···11+<html lang="en">
22+ <head>
33+ <meta charset="UTF-8" />
44+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
55+66+ <title>Diffuse</title>
77+88+ <!-- Base -->
99+ <base href="./" />
1010+1111+ <!-- Favicons & Mobile -->
1212+ <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
1313+ <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
1414+ <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
1515+ <!-- TODO: <link rel="manifest" href="site.webmanifest" />-->
1616+ <link rel="mask-icon" href="safari-pinned-tab.svg" color="#8a90a9" />
1717+ <meta name="msapplication-TileColor" content="#8a90a9" />
1818+ <meta name="theme-color" content="#8a90a9" />
1919+2020+ <!-- Styles -->
2121+ <link rel="stylesheet" href="styles/base.css" />
2222+ <link rel="stylesheet" href="styles/diffuse/page.css" />
2323+ <link rel="stylesheet" href="styles/vendor/phosphor/fill/style.css" />
2424+2525+ <!-- Scripts -->
2626+ <script src="index.js" type="module"></script>
2727+ </head>
2828+ <body>
2929+ <header>
3030+ <div>
3131+ <h1 class="diffuse-logo">
3232+ <svg viewBox="0 0 902 134" width="160">
3333+ <title>Diffuse</title>
3434+ <use
3535+ xlink:href="images/diffuse-current.svg#diffuse"
3636+ href="images/diffuse-current.svg#diffuse"></use>
3737+</svg>
3838+3939+ </h1>
4040+ <p class="construct dither-mask">
4141+ Construct your audio player.
4242+ </p>
4343+ <p>
4444+ Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital
4545+ audio listening experience for you.
4646+ </p>
4747+ <p style="align-items: center; display: flex; gap: var(--space-2xs); opacity: 0.55;">
4848+ <i class="ph-fill ph-crane"></i>
4949+ <strong style="font-weight: 700;">WORK IN PROGRESS</strong>
5050+ </p>
5151+ <ul class="table-of-contents">
5252+ <li><a href="#usage">Usage</a></li>
5353+ <li><a href="#demo">Demo</a></li>
5454+ <li><a href="#themes">Themes</a></li>
5555+ <li><a href="#constituents">Constituents</a></li>
5656+ <li><a href="#take-control">Take control</a></li>
5757+ <li><a href="#elements">Elements</a></li>
5858+ <li><a href="#definitions">Definitions</a></li>
5959+ </ul>
6060+ <p>
6161+ <small>Built by <a href="https://tokono.ma">tokono.ma</a></small>
6262+ </p>
6363+ </div>
6464+ <div class="dither-mask filler"></div>
6565+</header>
6666+<main>
6767+ <div class="columns">
6868+ <!-- USAGE -->
6969+ <section>
7070+ <h2 id="usage">Usage</h2>
7171+7272+ <p>
7373+ The easiest way to start is by exploring the software. If you prefer a traditional pre­packaged web application approach, you can check out <a href="#themes">themes</a>.
7474+ </p>
7575+7676+ <p>
7777+ Alternatively, there's <a href="#constituents">constituents</a> which allows you to use any component from any theme interchange­ably, each in a separate browser tab. Each tab talks to each other, so you can for example browse audio in one tab and play it in another.
7878+ </p>
7979+8080+ <p>
8181+ The goal is for every user, no matter their experience with web software, to have agency over their software. One can start with making small changes and gradually progress to making big changes.
8282+ </p>
8383+ </section>
8484+8585+ <!-- DEMO -->
8686+ <section>
8787+ <h2 id="demo">Demo</h2>
8888+8989+ <p>Diffuse is not your typical streaming service, you have to add sources of audio. This button here adds a few sample audio files.</p>
9090+9191+ <p>
9292+ <button id="add-sample-content">
9393+ <span>Add sample content</span>
9494+ </button>
9595+ </p>
9696+9797+ <p>
9898+ Next, select any <a href="#themes">theme</a> from below to play the audio. Or any of the other options suggested in the usage section.
9999+ </p>
100100+ </section>
101101+ </div>
102102+ <div class="columns">
103103+ <!-- THEMES -->
104104+ <section>
105105+ <h2 id="themes">Themes</h2>
106106+107107+ <p>
108108+ Themes are element compositions and provide a traditional browser web application way of
109109+ using them. In other words, pretty much the whole thing, besides your data, lives inside a single browser tab.
110110+ </p>
111111+112112+ <p>
113113+ <small>
114114+ <strong><i class="ph-fill ph-info"></i></strong>
115115+ Each theme is unique, not just a skin; each one might have a totally different feature set.
116116+ </small>
117117+ </p>
118118+119119+ <ul>
120120+ <li>
121121+ <span class="todo">[todo]</span>
122122+ <span>Blur</span>
123123+ <div class="list-description"><strong>A theme with an Apple-inspired playback view.</strong> Features two audio players instead of the usual one.</div>
124124+ </li>
125125+ <li>
126126+ <span class="todo">[todo]</span>
127127+ <span>Loader</span>
128128+ <div class="list-description"><strong>A theme that loads other themes!</strong> Load a theme from a URL, text snippet or from your user data output. <em>If you're taking the first steps to customize, checkout the <a href="#constituents">constituents loader</a> first!</em></div>
129129+ </li>
130130+ <li>
131131+ <a href="themes/webamp/">Webamp</a>
132132+ <div class="list-description"><strong>Winamp 2 + Windows 98</strong>. Uses Webamp as the audio player connected to various Diffuse elements. Also features a desktop-like Windows 98 environment in which you can open "programs" that control the used Diffuse elements.</div>
133133+ </li>
134134+</ul>
135135+136136+ </section>
137137+138138+ <!-- CONSTITUENTS -->
139139+ <section>
140140+ <h2 id="constituents">Constituents</h2>
141141+142142+ <p>
143143+ Constituents are various interface components each loaded in their own web page. Every used component is configured so that it operates in broadcast mode, making all the pages communicate with each other.
144144+ </p>
145145+146146+ <p>
147147+ <small>
148148+ <strong><i class="ph-fill ph-info"></i></strong>
149149+ It also allows non-browser web environments, such as WebViews, to display UI components separately. For example, to enable moveable web views on the desktop.
150150+ </small>
151151+ </p>
152152+153153+ <ul>
154154+ <li>
155155+ <a href="themes/blur/artwork-controller/">Blur / Artwork controller</a>
156156+ <div class="list-description">Audio playback controller with artwork display.</div>
157157+ </li>
158158+ <li>
159159+ <span class="todo">[todo]</span>
160160+ <span>Loader</span>
161161+ <div class="list-description"><strong>A constituent that loads other constituents!</strong> Load a constituent from a URL, text snippet or from your user data output.</div>
162162+ </li>
163163+ <li>
164164+ <a href="themes/webamp/browser/">Webamp / Browser</a>
165165+ <div class="list-description">Collection browser + search in a retro, win98, look.</div>
166166+ </li>
167167+ <li>
168168+ <a href="themes/webamp/configurators/input/">Webamp / Input Configurator</a>
169169+ <div class="list-description">Windows 98 styled input configurator where you can add music sources.</div>
170170+ </li>
171171+</ul>
172172+173173+ </section>
174174+ </div>
175175+176176+ <!-- TAKE CONTROL -->
177177+ <section>
178178+ <h2 id="take-control">Take control</h2>
179179+180180+ <p>
181181+ <em>Diffuse ranges from “eating out at a great restaurant” all the way to “making your favourite meal at home”</em>
182182+ </p>
183183+184184+ <ul class="columns">
185185+ <div class="element">
186186+ <!-- 1 -->
187187+ <li>
188188+ <p>
189189+ <i class="ph-fill ph-storefront"></i> <strong>Level 1</strong>: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse <a href="#themes">theme</a>.
190190+ </p>
191191+ </li>
192192+ <!-- 2 -->
193193+ <li>
194194+ <p>
195195+ <i class="ph-fill ph-basket"></i> <strong>Level 2</strong>: Take out food from various places, eg. cheese shop + bakery. You choose how you combine the foods and from where you order them. That's <a href="#constituents">constituents</a>.
196196+ </p>
197197+ </li>
198198+ <!-- 3 -->
199199+ <li>
200200+ <p>
201201+ <i class="ph-fill ph-pepper"></i> <strong>Level 3</strong>: Now that you know which food is good and how to make combinations, you might make a slight customization, add a little something of your own (eg. add some spice). However, you're not quite confident enough which spice to pick, so you hire some help.
202202+ </p>
203203+ <p>
204204+ This can be done using the <a href="#constituents-loader">constituents loader</a> which allows you to build on top of a familiar preconfigured foundation and load custom constituents. People might share their own, or maybe you use an LLM to generate something for you (eg. an album art gallery).
205205+ </p>
206206+ </li>
207207+ <!-- 4 -->
208208+ <li>
209209+ <p>
210210+ <i class="ph-fill ph-knife"></i> <strong>Level 4</strong>: You learned a bit from watching and talking to the help you hired, so you decide to take things in your own hands.
211211+ </p>
212212+ <p>
213213+ You continue to use the <a href="#constituents-loader">constituents loader</a> but learn a bit of <a href="https://htmlforpeople.com">HTML</a>, <a href="https://javascript.info">Javascript</a> and <a href="https://htmlforpeople.com/css-basics/">CSS</a>; so you're able to write your own constituent.
214214+ </p>
215215+ </li>
216216+ </div>
217217+ <div class="element">
218218+ <!-- 5 -->
219219+ <li>
220220+ <p>
221221+ <i class="ph-fill ph-cooking-pot"></i> <strong>Level 5</strong>: At this point you're confident enough to make a meal from scratch. You can start very simple, eg. just throwing a steak in the pan with some butter and some salt to it. Then later add some baked potatoes and go from there.
222222+ </p>
223223+ <p>
224224+ A similar tool comes into play here, the <a href="#themes-loader">themes loader</a>. Same concept as the constituents loader, but now you need to specify the foundation yourself. You can use the <a href="#elements">elements</a> listed below to do so. The code for these is available from this website or through the <a href="https://jsr.io/@toko/diffuse">Javascript package</a>.
225225+ </p>
226226+ </li>
227227+ <!-- 6 -->
228228+ <li>
229229+ <p>
230230+ <i class="ph-fill ph-storefront"></i> <strong>Level 6</strong>: You open your own restaurant.
231231+ </p>
232232+ <p>
233233+ You can host the theme you made on any web server, it's only HTML after all. Only difference is that you'll have to create the entire HTML tree, not just the body element, as is the case with the theme loader.
234234+ </p>
235235+ </li>
236236+ <!-- 7 -->
237237+ <li>
238238+ <p>
239239+ <i class="ph-fill ph-chef-hat"></i> <strong>Level 7</strong>: You got promoted to master chef. Time to open your own restaurant chain.
240240+ </p>
241241+ <p>
242242+ You can self-host Diffuse, it's <a href="https://tangled.org/tokono.ma/diffuse/blob/v4/">open-source</a>! Or you present your own collection of elements.
243243+ </p>
244244+ </li>
245245+ </div>
246246+ </ul>
247247+ </section>
248248+249249+ <!-- ELEMENTS -->
250250+ <section>
251251+ <h2 id="elements">Elements</h2>
252252+253253+ <p>
254254+ The (web) components of the system. These custom elements are then recombined into an entire music player experience, or whatever you want to build.
255255+ </p>
256256+257257+ <div class="columns">
258258+ <div class="element">
259259+ <h3>Configurators</h3>
260260+261261+ <p>
262262+ <em>
263263+ Elements that serve as an intermediate in order to make a particular kind of element configurable. In other words, these allow for an element to be swapped out with another that takes the same set of the actions and data output.
264264+ </em>
265265+ </p>
266266+267267+ <ul>
268268+ <li>
269269+ <a href="components/configurator/input/element.js">Input</a>
270270+ <div class="list-description">Allows for multiple inputs to be used at once.</div>
271271+ </li>
272272+ <li>
273273+ <a href="components/configurator/output/element.js">Output</a>
274274+ <div class="list-description">Enables the user to configure a specific output. If no default output is set, it creates a temporary session by storing everything in memory.</div>
275275+ </li>
276276+ <li>
277277+ <span class="todo">[todo]</span>
278278+ <span>Scrobbles</span>
279279+ <div class="list-description">Configure multiple scrobblers (music trackers).</div>
280280+ </li>
281281+</ul>
282282+283283+</div>
284284+285285+286286+ <div class="element">
287287+ <h3>Engines</h3>
288288+289289+ <p>
290290+ <em>
291291+ Elements with each a singular purpose and don't have any UI. There are specialised UI and orchestrator elements that control these.
292292+ </em>
293293+ </p>
294294+295295+ <ul>
296296+ <li>
297297+ <a href="components/engine/audio/element.js">Audio</a>
298298+ <div class="list-description">Plays audio through audio elements.</div>
299299+ </li>
300300+ <li>
301301+ <a href="components/engine/queue/element.js">Queue</a>
302302+ <div class="list-description">A simple queue for tracks.</div>
303303+ </li>
304304+</ul>
305305+306306+</div>
307307+308308+309309+ <div class="element">
310310+ <h3>Input</h3>
311311+312312+ <p>
313313+ <em>
314314+ Inputs are sources of audio tracks. Each track is an entry in the list of possible items to play. These can be files or streams, static or dynamic.
315315+ </em>
316316+ </p>
317317+318318+ <ul>
319319+ <li>
320320+ <a href="components/input/opensubsonic/element.js">Opensubsonic</a>
321321+ <div class="list-description">Add any (open)subsonic server.</div>
322322+ </li>
323323+ <li>
324324+ <span class="todo">[todo]</span>
325325+ <span>HTTPS (Raw)</span>
326326+ <div class="list-description">Enables usage of tracks with a HTTPS URI.</div>
327327+ </li>
328328+ <li>
329329+ <span class="todo">[todo]</span>
330330+ <span>HTTPS (JSON)</span>
331331+ <div class="list-description">Generate tracks based on HTTPS servers that provide JSON (directory) listings.</div>
332332+ </li>
333333+ <li>
334334+ <a href="components/input/s3/element.js">S3</a>
335335+ <div class="list-description">AWS S3 and services that provide the same surface API such as Cloudflare R2.</div>
336336+ </li>
337337+ <li>
338338+ <span class="todo">[todo]</span>
339339+ <span>Soundcloud</span>
340340+ <div class="list-description">Add items from your Soundcloud feed.</div>
341341+ </li>
342342+ <li>
343343+ <span class="todo">[todo]</span>
344344+ <span>WebDAV</span>
345345+ <div class="list-description">Add any WebDAV server.</div>
346346+ </li>
347347+</ul>
348348+349349+</div>
350350+351351+352352+ <div class="element">
353353+ <h3>Orchestrators</h3>
354354+355355+ <p>
356356+ <em>
357357+ These too are element compositions. However, unlike themes, these are purely logical. Mostly exist in order to construct sensible defaults to use across themes and other compositions.
358358+ </em>
359359+ </p>
360360+361361+ <ul>
362362+ <li>
363363+ <a href="components/orchestrator/input/element.js">Input</a>
364364+ <div class="list-description"><strong>A default input configuration.</strong> Contains all the inputs provided here.</div>
365365+ </li>
366366+ <li>
367367+ <a href="components/orchestrator/output/element.js">Output</a>
368368+ <div class="list-description"><strong>A default output configuration.</strong> Contains all the outputs provided here along with the relevant transformers.</div>
369369+ </li>
370370+ <li>
371371+ <a href="components/orchestrator/process-tracks/element.js">Process inputs into tracks</a>
372372+ <div class="list-description">Whenever the cached tracks are initially loaded through the passed output element it will list tracks by using the passed input element. Afterwards it loops over all tracks and checks if metadata needs to be fetched. If anything has changed, it'll pass the results to the output element.</div>
373373+ </li>
374374+ <li>
375375+ <a href="components/orchestrator/queue-audio/element.js">Queue ⭤ Audio</a>
376376+ <div class="list-description">Connects the given queue engine to the given audio engine.</div>
377377+ </li>
378378+ <li>
379379+ <a href="components/orchestrator/queue-tracks/element.js">Queue ⭤ Tracks</a>
380380+ <div class="list-description">Sets the given queue element pool whenever the tracks signal from the given output changes.</div>
381381+ </li>
382382+ <li>
383383+ <a href="components/orchestrator/repeat-shuffle/element.js">Repeat & Shuffle</a>
384384+ <div class="list-description">An opinionated way to setup repeat & shuffle.</div>
385385+ </li>
386386+ <li>
387387+ <a href="components/orchestrator/sources/element.js">Sources</a>
388388+ <div class="list-description">Monitor tracks from the given output to form a list of sources based on the input's sources return value.</div>
389389+ </li>
390390+ <li>
391391+ <a href="components/orchestrator/search-tracks/element.js">Search ⭤ Tracks</a>
392392+ <div class="list-description">Supplies tracks to the given search processor whenever the tracks collection changes.</div>
393393+ </li>
394394+</ul>
395395+396396+</div>
397397+398398+399399+ <div class="element">
400400+ <h3>Output</h3>
401401+402402+ <p>
403403+ <em>
404404+ Output is application-derived data such as playlists. These elements can receive such data and keep it around. These are categorised by the type of data they ingest, or many types in the case of polymorphic. Optionally use transformers to convert output into the expected format.
405405+ </em>
406406+ </p>
407407+408408+ <ul>
409409+ <li>
410410+ <span class="todo">[todo]</span>
411411+ <span>Bytes / Automerge Repo</span>
412412+ <div class="list-description">Sync with an Automerge repo <a href="https://github.com/automerge/automerge-repo-sync-server/tree/main">sync server</a>.</div>
413413+ </li>
414414+ <li>
415415+ <a href="components/output/polymorphic/indexed-db/element.js">Polymorphic / IndexedDB</a>
416416+ <div class="list-description">Stores output into the local indexedDB. Supports any type of data that indexedDB supports.</div>
417417+ </li>
418418+ <li>
419419+ <span class="todo">[todo]</span>
420420+ <span>Raw / AT Protocol</span>
421421+ <div class="list-description">Store your user data on the storage associated with your ATProtocol identity. Data is lexicon shaped by default so this element takes in that data directly without any transformations.</div>
422422+ </li>
423423+</ul>
424424+425425+</div>
426426+427427+428428+ <div class="element">
429429+ <h3>Processors</h3>
430430+431431+ <p>
432432+ <em>
433433+ These elements work with the output generated by the input elements to add more data to them, or process them in some other way.
434434+ </em>
435435+ </p>
436436+437437+ <ul>
438438+ <li>
439439+ <a href="components/processor/artwork/element.js">Artwork</a>
440440+ <div class="list-description">Fetches cover art for a given set of tracks, stored locally in indexedDB. Checks the audio metadata first, then MusicBrainz and uses Last.fm as the fallback.</div>
441441+ </li>
442442+ <li>
443443+ <a href="components/processor/metadata/element.js">Metadata</a>
444444+ <div class="list-description">Fetch audio metadata for a given set of tracks, adding to the <code>Track</code> object.</div>
445445+ </li>
446446+ <li>
447447+ <a href="components/processor/search/element.js">Search</a>
448448+ <div class="list-description">Provides a way to search through a collection of tracks, powered by orama.js</div>
449449+ </li>
450450+</ul>
451451+452452+</div>
453453+454454+455455+ <div class="element">
456456+ <h3>Supplements</h3>
457457+458458+ <p>
459459+ <em>
460460+ Additional elements, such as scrobblers.
461461+ </em>
462462+ </p>
463463+464464+ <ul>
465465+ <li>
466466+ <span class="todo">[todo]</span>
467467+ <span>Last.fm scrobbler</span>
468468+ </li>
469469+ <li>
470470+ <span class="todo">[todo]</span>
471471+ <span>ListenBrainz scrobbler</span>
472472+ </li>
473473+ <li>
474474+ <span class="todo">[todo]</span>
475475+ <span>Rocksky scrobbler</span>
476476+ </li>
477477+ <li>
478478+ <span class="todo">[todo]</span>
479479+ <span>Teal.fm scrobbler</span>
480480+ </li>
481481+</ul>
482482+483483+</div>
484484+485485+486486+ <div class="element">
487487+ <h3>Transformers</h3>
488488+489489+ <p>
490490+ <em>
491491+ Transform data from one format or schema into another. See schema section below for more information. Just as configurators, these are intermediates and require to have the same set of actions as the element it targets.
492492+ </em>
493493+ </p>
494494+495495+ <ul>
496496+ <li>
497497+ <a href="components/transformer/output/bytes/automerge/element.js">Output / Bytes / Automerge</a>
498498+ <div class="list-description">Translate data to and from an Automerge CRDT.</div>
499499+ </li>
500500+ <li>
501501+ <span class="todo">[todo]</span>
502502+ <span>Output / Bytes / Cambria lenses</span>
503503+ <div class="list-description">Uses the Cambria library to seamlessly translate between data schemas so that no data migration is needed.</div>
504504+ </li>
505505+ <li>
506506+ <a href="components/transformer/output/bytes/json/element.js">Output / Bytes / JSON</a>
507507+ <div class="list-description">Raw data schema output ⇄ JSON Uint8Array.</div>
508508+ </li>
509509+ <li>
510510+ <a href="components/transformer/output/refiner/default/element.js">Output / Refiner / Default</a>
511511+ <div class="list-description">The task of a refiner transformer is to remove the output state that is not meant to be saved to storage. For example, ephemeral tracks; this transformer will keep them in memory, but they will not be present in the output. <strong>Ideally this is part of every theme, but you may swap it out with another transformer that might provide better defaults.</strong></div>
512512+ </li>
513513+ <li>
514514+ <a href="components/transformer/output/string/json/element.js">Output / String / JSON</a>
515515+ <div class="list-description">Raw data schema output ⇄ JSON UTF8 string.</div>
516516+ </li>
517517+</ul>
518518+519519+</div>
520520+521521+ </div>
522522+ </section>
523523+524524+ <!-- DEFINITIONS -->
525525+ <section>
526526+ <h2 id="definitions">Definitions</h2>
527527+528528+ <p>All of the elements here are built with these data definitions in mind. That said, you can mix elements that use different definitions; you just have to put a transformer between them in order to translate between them, if needed.</p>
529529+530530+ <ul>
531531+ <li>
532532+ <span class="todo">[todo]</span>
533533+ <span>Output / Constituent</span>
534534+ <div class="list-description">Custom constituents to keep around.</div>
535535+ </li>
536536+ <li>
537537+ <span class="todo">[todo]</span>
538538+ <span>Output / Favourites</span>
539539+ <div class="list-description">Indicate a user's favourite audio. Not a property of a track because tracks are associated with a specific source. Favourites may match with multiple tracks. Specified using the audio's title and artist.</div>
540540+ </li>
541541+ <li>
542542+ <span class="todo">[todo]</span>
543543+ <span>Output / Playlist</span>
544544+ <div class="list-description">Just like favourites, does not refer to specific tracks. Unlike favourites, must also specify the album. Can also be considered a collection which is basically an unordered playlist.</div>
545545+ </li>
546546+ <li>
547547+ <span class="todo">[todo]</span>
548548+ <span>Output / Progress</span>
549549+ <div class="list-description">Used to track progress of (long) audio playback.</div>
550550+ </li>
551551+ <li>
552552+ <span class="todo">[todo]</span>
553553+ <span>Output / Theme</span>
554554+ <div class="list-description">Custom theme to keep around.</div>
555555+ </li>
556556+ <li>
557557+ <a href="definitions/output/tracks.json">Output / Tracks</a>
558558+ <div class="list-description">Represents audio that can be played, or a placeholder for a source of tracks. Contains a URI that will resolve to the audio. This object may be cached if convenient.</div>
559559+ </li>
560560+</ul>
561561+562562+ </section>
563563+</main>
564564+565565+ </body>
566566+</html>
···11+{"version":3,"sources":["/index.js"],"sourcesContent":["import defaults from \"@common/constituents/default/config.js\";\nimport InputConfigElement from \"@themes/webamp/configurators/input/element.js\";\n\nconst sources = defaults.lazy.orchestrator.sources();\n\nconst el = new InputConfigElement();\nel.setAttribute(\"input-selector\", defaults.orchestrator.input.selector);\nel.setAttribute(\"output-selector\", defaults.orchestrator.output.selector);\nel.setAttribute(\"sources-orchestrator-selector\", sources.selector);\n\ndocument.querySelector(\"#placeholder\")?.replaceWith(el);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,UAAU,eAAS,KAAK,aAAa,QAAQ;AAEnD,IAAM,KAAK,IAAI,gBAAmB;AAClC,GAAG,aAAa,kBAAkB,eAAS,aAAa,MAAM,QAAQ;AACtE,GAAG,aAAa,mBAAmB,eAAS,aAAa,OAAO,QAAQ;AACxE,GAAG,aAAa,iCAAiC,QAAQ,QAAQ;AAEjE,SAAS,cAAc,cAAc,GAAG,YAAY,EAAE;","names":[],"sourceRoot":"file:///var/home/toko/Code/tokono.ma/diffuse-artifacts/diffuse","file":"/themes/webamp/configurators/input/index.js.map"}