@widgetic/editor 3.11.4 → 4.0.1

package/README.md

@@ -0,0 +1,245 @@
+### WIDGET PROPERTIES EDITOR
+
+
+A Svelte Component Module that will be loaded and used to edit the widget properties: design and content.
+
+Based on the Widget's design schema and content schema it generates 2 panels of input controllers for the user to edit the widget's properties.
+
+## How to use the component in your project
+
+1. add the component as a dependency in the npm package of the project
+2. import the component in the project: 
+`import PropsEditor from '@widgetic/props-editor';`
+3. load the design and content schemas and pass them as props to the component:
+```js
+let designSchemaUrl = '/design-debug-schema.json';
+
+const designResponse = await fetch(designSchemaUrl);
+const designSchema = await designResponse.json();
+
+let contentSchemaUrl = '/widget-meta-sample/content.json';
+const contentResponse = await fetch(contentSchemaUrl);
+const contentSchema = await contentResponse.json();
+```
+4. use the component in the page layouts:
+```svelte
+<PropsEditor {designSchema} {contentSchema} />
+```
+5. the component will render the 2 panels and the input controllers
+6. the user can edit the widget properties in the 2 panels
+7. the changes will be sent from the component with an event to the parent component:
+```svelte
+dispatch('propertyChange', { schema, property, value});
+```
+8. the parent component will catch the event and save the changes in the database:
+```svelte
+<PropsEditor {designSchema} {contentSchema} on:propertyChange={(event) => {
+  console.log('propertyChange event caught in the parent component', event);
+}} />
+```
+
+
+## Input Controllers
+
+The component uses the input controllers to edit the widget properties.
+Each input controller is a separate component that is located in the `src/lib/components/ic` folder.
+
+The input controllers are responsible for rendering the input elements for the widget properties and handling the user input.
+
+The input controllers are dynamically imported from the component based on the the properties from the design and content schemas.
+
+Note: components that uses an object as a value type, like `date_input` and `range_calendar_input`, need to handle a conversion of the defaultValue from the schema to the object type they use:
+```svelte
+ $: value && (value = { 
+    start: new CalendarDate(value.start?.era || 'AD', value.start?.year || 0, value.start?.month || 0, value.start?.day || 0), 
+    end: new CalendarDate(value.end?.era || 'AD', value.end?.year || 0, value.end?.month || 0, value.end?.day || 0) 
+  });
+```
+
+
+
+### How to develop the component
+## Initialize the sveltekit project
+
+1. clone the repo
+2. cd into the project
+3. install dependencies
+
+```bash
+npm i --legacy-peer-deps
+```
+Note: use --legacy-peer-deps if you get peer dependency errors
+as our project uses svelte 5 and some of the dependencies are still using svelte 4.
+
+## Start the development server
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Build the project
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+## Preview the project
+
+You can preview the production build with `npm run preview`.
+
+
+## Deploy the project to a server
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment(node in our case on render.com's servers):
+
+1. Install node adapter:
+```bash
+npm install --save-dev @sveltejs/adapter-node
+```
+Also add it to the `svelte.config.js` file:
+```js
+import adapter from '@sveltejs/adapter-node';
+```
+
+2. Build the project:
+```bash
+npm run build
+```
+
+3. Deploy to render.com
+
+Because we deploy to render.com, the build command is run automatically if we push a new commit to the main branch.
+But you must connect the gitlab repo of this project to the render.com project before and add there the secret env variables and start command.
+
+In the future if you want to deploy a manual build you can run:
+```bash
+npm run deploy
+```
+Note that you need to add the right deploy script that copies the dist folder to the root of the project on the server.
+
+
+## Deploy the component to the npm package registry
+
+```bash
+npm publish
+```
+
+
+### Font Loading and Batching Strategy
+
+The font loading system uses a combination of batching, lazy loading, and scroll-based loading to optimize performance:
+
+1. **Initial Load**:
+   - First 12 fonts (initial batch) are loaded when FontManager initializes
+   - These fonts are cached and immediately available to all font controllers
+   - Initial fonts include most popular Google Fonts and recently used fonts
+   - Use subset of the fonts for the initial load, load full fonts only when needed
+   - Example:
+     ```javascript
+     const initialFonts = [
+       'Roboto', 'Open Sans', 'Montserrat', 'Poppins', 
+       'Lato', 'Inter', 'Material Icons'
+     ];
+     ```
+
+2. **Batch Loading**:
+   - Remaining fonts are loaded in batches of 100 fonts
+   - Each font controller maintains its own batch index
+   - Batches are loaded only when scrolling reaches the bottom of the list
+   - Example flow:
+     ```
+     Initial fonts (0-12) → Batch 1 (12-112) → Batch 2 (112-212) → etc.
+     ```
+
+3. **Scroll-Based Loading**:
+   - Font loading is triggered by scroll events
+   - When user scrolls near bottom (100px threshold), next batch is loaded
+   - Each batch load updates the controller's batch index
+   - Example:
+     ```javascript
+     if (distanceFromBottom < threshold && !isLoadingBatch) {
+       loadNextBatch();  // Loads next 100 fonts
+     }
+     ```
+
+4. **Font Visibility Optimization**:
+   - IntersectionObserver watches for font elements entering viewport
+   - Only fonts currently visible are loaded into the browser
+   - Prevents unnecessary loading of fonts not in view
+   - Example:
+     ```javascript
+     // Font is loaded only when it becomes visible
+     observer.observe(fontElement);
+     ```
+
+5. **Caching Strategy**:
+   - Font list is cached in localStorage (24 hours duration)
+   - Browser caches actual font files (1 year duration)
+   - Each controller maintains its own loading state
+   - Cache structure:
+     ```javascript
+     {
+       fontList: [...],        // Complete list of fonts
+       loadedFonts: [...],     // Fonts loaded in browser
+       batchIndices: Map<controllerId, index>  // Track batch position
+     }
+     ```
+
+6. **Font Loading Flow**:
+   - FontManager initializes with API key
+   - Checks browser cache for already loaded fonts
+   - Loads initial batch of popular fonts
+   - Sets up observers for lazy loading
+   - Example:
+     ```javascript
+     // Initialize FontManager
+     const fontManager = await FontManager.getInstance(apiKey);
+     
+     // Get cached fonts
+     const cachedFonts = await fontManager.getBrowserCachedFonts();
+     
+     // Load initial fonts
+     const initialFonts = await fontManager.getInitialFontList();
+     ```
+
+7. **Controller-Specific Handling**:
+   - Each font controller gets its own batch index
+   - Controllers load fonts independently
+   - Prevents interference between controllers
+   - Example:
+     ```javascript
+     // Reset batch index for new controller
+     fontManager.resetBatchIndex(controllerId);
+     
+     // Get next batch for specific controller
+     const batch = fontManager.getNextBatch(controllerId);
+     ```
+
+This approach ensures:
+- Fast initial load with most popular fonts
+- Smooth scrolling experience
+- Efficient memory usage
+- No unnecessary font loading
+- Proper font caching
+- Independent controller operation
+
+
+
+8. **Font Upload Format**:
+   - The fonts uploaded need to respect the name structure of fonts downloaded from Google Fonts (GeistMono-Black.ttf - FONTFAMILY-VARIANT.FORMAT)
+   - The format needs to be .woff2 ideally, otherwise .woff, tiff, or otf.
+
+9. **SVG Upload Format**:
+   - The svgs uploaded need respect the name structure (Arrows-ArrowRight.ttf - TAG-NAME.SVG), where "Arrows" will list all SVGs in the group.
+  
+
+
+### Adding a new input controller
+
+  - Add the new controller to the `Frontend/editor/src/lib/components/ic/index.ts` file.
+  - import the new controller to the `Frontend/editor/src/lib/components/PropsEditor.svelte` file.
+  

package/dist/assets/fonts.json

@@ -0,0 +1,331 @@
+{
+  "id": "custom-fonts-001",
+  "name": "Custom Uploaded Fonts",
+  "version": "1.0.0",
+  "contentType": "FONTS",
+  "fontFamilies": [
+    {
+      "id": "cormorantgaramond-family",
+      "family": "Cormorant Garamond",
+      "name": "Cormorant Garamond",
+      "category": "Mine",
+      "variants": [
+        {
+          "id": "cormorantgaramond-regular",
+          "weight": "Regular",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-Regular.ttf"
+        },
+        {
+          "id": "cormorantgaramond-medium",
+          "weight": "Medium",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-Medium.ttf"
+        },
+        {
+          "id": "cormorantgaramond-semibold",
+          "weight": "SemiBold",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-SemiBold.ttf"
+        },
+        {
+          "id": "cormorantgaramond-bold",
+          "weight": "Bold",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-Bold.ttf"
+        },
+        {
+          "id": "cormorantgaramond-light",
+          "weight": "Light",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-Light.ttf"
+        },
+        {
+          "id": "cormorantgaramond-italic",
+          "weight": "Italic",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-Italic.ttf"
+        },
+        {
+          "id": "cormorantgaramond-mediumitalic",
+          "weight": "Medium Italic",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-MediumItalic.ttf"
+        },
+        {
+          "id": "cormorantgaramond-semibolditalic",
+          "weight": "SemiBold Italic",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-SemiBoldItalic.ttf"
+        },
+        {
+          "id": "cormorantgaramond-bolditalic",
+          "weight": "Bold Italic",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-BoldItalic.ttf"
+        },
+        {
+          "id": "cormorantgaramond-lightitalic",
+          "weight": "Light Italic",
+          "url": "/fonts/CormorantGaramond/CormorantGaramond-LightItalic.ttf"
+        }
+      ]
+    },
+    {
+      "id": "GeistMono-family",
+      "family": "GeistMono",
+      "name": "Geist Mono",
+      "category": "Mine",
+      "variants": [
+        {
+          "id": "geistmono-regular",
+          "weight": "Regular",
+          "url": "/fonts/GeistMono/GeistMono-Regular.ttf"
+        },
+        {
+          "id": "geistmono-medium",
+          "weight": "Medium",
+          "url": "/fonts/GeistMono/GeistMono-Medium.ttf"
+        }
+      ]
+    },
+    {
+      "id": "cause-family",
+      "family": "Cause",
+      "name": "Cause",
+      "category": "Mine",
+      "variants": [
+        {
+          "id": "cause-thin",
+          "weight": "Thin",
+          "url": "/fonts/Cause/Cause-Thin.woff2"
+        },
+        {
+          "id": "cause-extralight",
+          "weight": "ExtraLight",
+          "url": "/fonts/Cause/Cause-ExtraLight.woff2"
+        },
+        {
+          "id": "cause-light",
+          "weight": "Light",
+          "url": "/fonts/Cause/Cause-Light.woff2"
+        },
+        {
+          "id": "cause-regular",
+          "weight": "Regular",
+          "url": "/fonts/Cause/Cause-Regular.woff2"
+        },
+        {
+          "id": "cause-medium",
+          "weight": "Medium",
+          "url": "/fonts/Cause/Cause-Medium.woff2"
+        },
+        {
+          "id": "cause-semibold",
+          "weight": "SemiBold",
+          "url": "/fonts/Cause/Cause-SemiBold.woff2"
+        },
+        {
+          "id": "cause-bold",
+          "weight": "Bold",
+          "url": "/fonts/Cause/Cause-Bold.woff2"
+        },
+        {
+          "id": "cause-extrabold",
+          "weight": "ExtraBold",
+          "url": "/fonts/Cause/Cause-ExtraBold.woff2"
+        },
+        {
+          "id": "cause-black",
+          "weight": "Black",
+          "url": "/fonts/Cause/Cause-Black.woff2"
+        }
+      ]
+    },
+    {
+      "id": "ojuju-family",
+      "family": "Ojuju",
+      "name": "Ojuju",
+      "category": "Mine",
+      "variants": [
+        {
+          "id": "ojuju-extralight",
+          "weight": "ExtraLight",
+          "url": "/fonts/Ojuju/Ojuju-ExtraLight.woff2"
+        },
+        {
+          "id": "ojuju-light",
+          "weight": "Light",
+          "url": "/fonts/Ojuju/Ojuju-Light.woff2"
+        },
+        {
+          "id": "ojuju-regular",
+          "weight": "Regular",
+          "url": "/fonts/Ojuju/Ojuju-Regular.woff2"
+        },
+        {
+          "id": "ojuju-medium",
+          "weight": "Medium",
+          "url": "/fonts/Ojuju/Ojuju-Medium.woff2"
+        },
+        {
+          "id": "ojuju-semibold",
+          "weight": "SemiBold",
+          "url": "/fonts/Ojuju/Ojuju-SemiBold.woff2"
+        },
+        {
+          "id": "ojuju-bold",
+          "weight": "Bold",
+          "url": "/fonts/Ojuju/Ojuju-Bold.woff2"
+        },
+        {
+          "id": "ojuju-extrabold",
+          "weight": "ExtraBold",
+          "url": "/fonts/Ojuju/Ojuju-ExtraBold.woff2"
+        }
+      ]
+    },
+    {
+      "id": "raleway-family",
+      "family": "Raleway",
+      "name": "Raleway",
+      "category": "Mine",
+      "variants": [
+        {
+          "id": "raleway-thin",
+          "weight": "Thin",
+          "url": "/fonts/Raleway/Raleway-Thin.woff2"
+        },
+        {
+          "id": "raleway-thinitalic",
+          "weight": "Thin Italic",
+          "url": "/fonts/Raleway/Raleway-ThinItalic.woff2"
+        },
+        {
+          "id": "raleway-extralight",
+          "weight": "ExtraLight",
+          "url": "/fonts/Raleway/Raleway-ExtraLight.woff2"
+        },
+        {
+          "id": "raleway-extralightitalic",
+          "weight": "ExtraLight Italic",
+          "url": "/fonts/Raleway/Raleway-ExtraLightItalic.woff2"
+        },
+        {
+          "id": "raleway-light",
+          "weight": "Light",
+          "url": "/fonts/Raleway/Raleway-Light.woff2"
+        },
+        {
+          "id": "raleway-lightitalic",
+          "weight": "Light Italic",
+          "url": "/fonts/Raleway/Raleway-LightItalic.woff2"
+        },
+        {
+          "id": "raleway-regular",
+          "weight": "Regular",
+          "url": "/fonts/Raleway/Raleway-Regular.woff2"
+        },
+        {
+          "id": "raleway-italic",
+          "weight": "Italic",
+          "url": "/fonts/Raleway/Raleway-Italic.woff2"
+        },
+        {
+          "id": "raleway-medium",
+          "weight": "Medium",
+          "url": "/fonts/Raleway/Raleway-Medium.woff2"
+        },
+        {
+          "id": "raleway-mediumitalic",
+          "weight": "Medium Italic",
+          "url": "/fonts/Raleway/Raleway-MediumItalic.woff2"
+        },
+        {
+          "id": "raleway-semibold",
+          "weight": "SemiBold",
+          "url": "/fonts/Raleway/Raleway-SemiBold.woff2"
+        },
+        {
+          "id": "raleway-semibolditalic",
+          "weight": "SemiBold Italic",
+          "url": "/fonts/Raleway/Raleway-SemiBoldItalic.woff2"
+        },
+        {
+          "id": "raleway-bold",
+          "weight": "Bold",
+          "url": "/fonts/Raleway/Raleway-Bold.woff2"
+        },
+        {
+          "id": "raleway-bolditalic",
+          "weight": "Bold Italic",
+          "url": "/fonts/Raleway/Raleway-BoldItalic.woff2"
+        },
+        {
+          "id": "raleway-extrabold",
+          "weight": "ExtraBold",
+          "url": "/fonts/Raleway/Raleway-ExtraBold.woff2"
+        },
+        {
+          "id": "raleway-extrabolditalic",
+          "weight": "ExtraBold Italic",
+          "url": "/fonts/Raleway/Raleway-ExtraBoldItalic.woff2"
+        },
+        {
+          "id": "raleway-black",
+          "weight": "Black",
+          "url": "/fonts/Raleway/Raleway-Black.woff2"
+        },
+        {
+          "id": "raleway-blackitalic",
+          "weight": "Black Italic",
+          "url": "/fonts/Raleway/Raleway-BlackItalic.woff2"
+        }
+      ]
+    },
+    {
+      "id": "worksans-family",
+      "family": "WorkSans",
+      "name": "Work Sans",
+      "category": "Mine",
+      "variants": [
+        {
+          "id": "worksans-thin",
+          "weight": "Thin",
+          "url": "/fonts/WorkSans/WorkSans-Thin.woff2"
+        },
+        {
+          "id": "worksans-extralight",
+          "weight": "ExtraLight",
+          "url": "/fonts/WorkSans/WorkSans-ExtraLight.woff2"
+        },
+        {
+          "id": "worksans-light",
+          "weight": "Light",
+          "url": "/fonts/WorkSans/WorkSans-Light.woff2"
+        },
+        {
+          "id": "worksans-regular",
+          "weight": "Regular",
+          "url": "/fonts/WorkSans/WorkSans-Regular.woff2"
+        },
+        {
+          "id": "worksans-medium",
+          "weight": "Medium",
+          "url": "/fonts/WorkSans/WorkSans-Medium.woff2"
+        },
+        {
+          "id": "worksans-semibold",
+          "weight": "SemiBold",
+          "url": "/fonts/WorkSans/WorkSans-SemiBold.woff2"
+        },
+        {
+          "id": "worksans-bold",
+          "weight": "Bold",
+          "url": "/fonts/WorkSans/WorkSans-Bold.woff2"
+        },
+        {
+          "id": "worksans-extrabold",
+          "weight": "ExtraBold",
+          "url": "/fonts/WorkSans/WorkSans-ExtraBold.woff2"
+        },
+        {
+          "id": "worksans-black",
+          "weight": "Black",
+          "url": "/fonts/WorkSans/WorkSans-Black.woff2"
+        }
+      ]
+    }
+  ]
+} 

package/dist/assets/icons/ic-browser/audio.svg

@@ -0,0 +1,7 @@
+<svg width="63" height="55" viewBox="0 0 63 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.155518" y="0.736923" width="62" height="54" rx="15" fill="#A7FF68"/>
+<g opacity="0.1">
+<path d="M58.734 26.3555C57.281 25.3053 57.0378 18.7466 56.2021 21.5913C55.582 23.7034 55.3673 26.9532 53.0974 25.9665C51.5323 25.2875 51.5568 19.2978 50.9505 17.9635C50.3457 16.6291 49.7042 24.2231 48.3146 25.5328C47.0427 26.7293 45.5856 25.6079 44.8767 21.3523C44.1756 17.1406 43.5764 12.9982 42.9579 15.4942C42.057 19.1245 41.4804 27.4745 39.4848 26.3351C38.1828 25.5927 37.894 19.9621 37.0963 23.4194C36.4815 26.0744 35.5943 26.8088 34.5451 26.1181C33.5864 25.4878 33.0507 20.5325 32.456 19.5734C31.8135 18.5335 30.9832 23.8614 29.9824 25.5341C29.673 26.0528 29.2778 26.1892 28.9414 26.0688C28.5661 25.9354 28.2743 25.6337 28.0975 25.2738C27.0048 23.0387 26.0166 16.5679 25.9583 16.1491C25.8719 15.5266 25.4777 14.8635 25.1752 16.1491C24.8729 17.4271 23.4319 25.7742 21.8844 25.7524C20.7339 25.7374 19.7319 22.1589 19.3945 19.9976C18.9193 16.9565 18.3721 19.0181 18.3721 19.0181C18.3721 19.0181 17.6053 23.0145 15.4595 24.6815C14.3308 25.5604 13.3449 24.2395 12.6157 22.2392C12.0877 20.5583 11.7016 17.546 11.7016 17.546C11.4976 15.8347 11.1627 13.8568 10.7077 13.9087C10.705 13.9087 10.7023 13.9087 10.6995 13.9087C10.6942 13.9087 10.6873 13.9101 10.6821 13.9114C10.5861 13.9317 10.4984 14.0516 10.4282 14.22C10.2391 14.5894 9.91774 15.4437 9.53149 17.3741C9.52194 17.415 9.51259 17.4588 9.50454 17.5076C9.50314 17.5157 9.50185 17.5226 9.50046 17.531C9.47758 17.6469 9.4545 17.7682 9.43153 17.8924C9.11163 19.4259 8.38917 21.4847 8.3081 21.7143C7.65189 23.163 6.76739 24.5426 5.55344 25.5084C4.47318 26.3666 1.28374 27.4484 0.261475 27.7813H62.1554C61.0969 27.537 59.7681 27.1035 58.734 26.3555Z" fill="black"/>
+<path d="M58.6279 29.1183C57.1749 30.1686 56.9317 36.7272 56.0962 33.8826C55.4759 31.7705 55.2615 28.5206 52.9915 29.5072C51.4266 30.1866 51.4509 36.1764 50.8443 37.5103C50.2396 38.8447 49.5984 31.2507 48.2086 29.941C46.9368 28.7446 45.4795 29.8658 44.7708 34.1217C44.0698 38.3332 43.4703 42.4755 42.8518 39.9797C41.9511 36.3493 41.3746 27.9994 39.3789 29.1386C38.0769 29.881 37.7879 35.5119 36.9901 32.0543C36.3757 29.3995 35.4885 28.665 34.4391 29.3556C33.4806 29.9861 32.9445 34.9413 32.3502 35.9004C31.7075 36.9404 30.8771 31.6124 29.8763 29.9397C29.5669 29.4211 29.1717 29.2846 28.8354 29.4051C28.4599 29.5384 28.1681 29.8401 27.9914 30.1999C26.8987 32.4351 25.9107 38.906 25.8521 39.3248C25.7658 39.9472 25.3716 40.6103 25.0691 39.3248C24.7668 38.0468 23.3257 29.6998 21.7786 29.7214C20.6278 29.7364 19.626 33.315 19.2884 35.4762C18.8132 38.5172 18.2662 36.4556 18.2662 36.4556C18.2662 36.4556 17.4992 32.4593 15.3534 30.7923C14.2247 29.9135 13.239 31.2342 12.5096 33.2346C11.9817 34.9156 11.5955 37.9278 11.5955 37.9278C11.3916 39.6391 11.0567 41.6173 10.6018 41.5651C10.5989 41.5651 10.5962 41.5651 10.5934 41.5651C10.5883 41.5651 10.5814 41.5638 10.576 41.5625C10.4801 41.5421 10.3924 41.4221 10.3222 41.254C10.1332 40.8845 9.81168 40.0301 9.42554 38.0997C9.41599 38.0588 9.40654 38.0151 9.39848 37.9664C9.39709 37.9582 9.39579 37.9512 9.3944 37.943C9.37152 37.8269 9.34845 37.7057 9.32557 37.5813C9.00557 36.0479 8.28321 33.9891 8.20204 33.7595C7.54593 32.3107 6.66133 30.9313 5.44748 29.9655C4.36713 29.1075 1.17768 28.0253 0.155518 27.6925H62.0496C60.9908 27.9368 59.6623 28.3703 58.6279 29.1183Z" fill="black"/>
+</g>
+</svg>

package/dist/assets/icons/ic-browser/document.svg

@@ -0,0 +1,11 @@
+<svg width="63" height="54" viewBox="0 0 63 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.42334" width="62" height="54" rx="15" fill="#FFDC68"/>
+<g opacity="0.1">
+<path d="M21.4233 32.0543H46.4233" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.4233 38.7935H21.4233" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36.4233 25.3152H46.4233" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.4233 18.5761H36.4233" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.4233 21.9456H28.09C28.4196 21.9456 28.7419 22.0444 29.016 22.2296C29.29 22.4147 29.5037 22.6778 29.6298 22.9857C29.756 23.2935 29.789 23.6323 29.7246 23.9591C29.6603 24.2859 29.5016 24.5861 29.2685 24.8217C29.0354 25.0574 28.7385 25.2178 28.4152 25.2828C28.0919 25.3478 27.7567 25.3145 27.4522 25.1869C27.1477 25.0594 26.8874 24.8435 26.7042 24.5664C26.5211 24.2894 26.4233 23.9636 26.4233 23.6304V19.4185C26.4233 18.5248 26.7745 17.6677 27.3997 17.0358C28.0248 16.4039 28.8726 16.0489 29.7567 16.0489" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.4233 21.9456H18.09C18.4196 21.9456 18.7419 22.0444 19.016 22.2296C19.29 22.4147 19.5037 22.6778 19.6298 22.9857C19.756 23.2935 19.789 23.6323 19.7246 23.9591C19.6603 24.2859 19.5016 24.5861 19.2685 24.8217C19.0354 25.0574 18.7385 25.2178 18.4152 25.2828C18.0919 25.3478 17.7567 25.3145 17.4522 25.1869C17.1477 25.0594 16.8874 24.8435 16.7042 24.5664C16.5211 24.2894 16.4233 23.9636 16.4233 23.6304V19.4185C16.4233 18.5248 16.7745 17.6677 17.3997 17.0358C18.0248 16.4039 18.8726 16.0489 19.7567 16.0489" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/dist/assets/icons/ic-browser/error.svg

@@ -0,0 +1,5 @@
+<svg width="63" height="54" viewBox="0 0 63 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.423828" width="62" height="54" rx="15" fill="#FF4848"/>
+<path d="M31.4238 20.9348V29.0217" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.4238 35.087V35.107" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/ic-browser/folder.svg

@@ -0,0 +1,28 @@
+<svg width="63" height="54" viewBox="0 0 63 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.2133 0H14.6343C6.78609 0 0.423828 6.36226 0.423828 14.2105V39.7894C0.423828 47.6377 6.78609 53.9999 14.6343 53.9999H48.2133C56.0615 53.9999 62.4238 47.6377 62.4238 39.7894V14.2105C62.4238 6.36226 56.0615 0 48.2133 0Z" fill="url(#paint0_linear_48_184)"/>
+<rect x="7.42383" y="11" width="48" height="36" rx="1" fill="white"/>
+<rect x="7.42383" y="19" width="48" height="0.5" fill="#BFBFBF"/>
+<rect x="7.42383" y="15" width="48" height="0.5" fill="#BFBFBF"/>
+<rect x="7.42383" y="23" width="48" height="0.5" fill="#BFBFBF"/>
+<g filter="url(#filter0_bi_48_184)">
+<path d="M15.1839 15C16.7544 15 18.2112 15.8187 19.0278 17.1602L23.2371 24.0756C23.9248 25.2053 25.1516 25.8947 26.4741 25.8947H57.6865C60.2918 25.8947 62.4233 28.0263 62.4233 30.6316V39.7856C62.4233 47.6338 56.0611 53.9961 48.2128 53.9961H14.6339C6.78567 53.9961 0.42334 47.6338 0.42334 39.7856V19.6962C0.445386 17.1094 2.56855 15 5.16024 15H15.1839Z" fill="#45BCFE" fill-opacity="0.9"/>
+</g>
+<defs>
+<filter id="filter0_bi_48_184" x="-1.94508" y="12.6316" width="66.7368" height="43.7329" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.18421"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_48_184"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_48_184" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.236842"/>
+<feGaussianBlur stdDeviation="0.236842"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.478431 0 0 0 0 0.94902 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_48_184"/>
+</filter>
+<linearGradient id="paint0_linear_48_184" x1="27.4238" y1="0" x2="27.4238" y2="53.9999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0699FF"/>
+<stop offset="1" stop-color="#0171EF"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/assets/icons/ic-browser/player-pause.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-player-pause"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" /><path d="M17 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" /></svg>

package/dist/assets/icons/ic-browser/player-play.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-player-play"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z" /></svg>

package/dist/assets/icons/ic-browser/trash.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>

package/dist/assets/icons/ic-fixed-position/background-deselected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.4949 0H0.494865V36H72.4949V0Z" fill="#F3F3F3"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/background-selected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.4949 36H0.494869V0H72.4949V36Z" fill="#0171EF"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/bottom-left-background-deselected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.4949 36H8.49487C4.07659 36 0.494873 32.4183 0.494873 28V0H72.4949V36Z" fill="#F3F3F3"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/bottom-left-background-selected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.4949 36H8.49487C4.07659 36 0.494873 32.4183 0.494873 28V0H72.4949V36Z" fill="#0171EF"/>
+</svg>