Idk what I am doing, I give up

lib/components/package.json

@@ -2,11 +2,30 @@
   "name": "components",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "svelte": "./src/index.ts",
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "rollup -c -w",
+    "build": "rollup -c",
+    "types": "node ./scripts/types.js"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "@melt-ui/pp": "^0.1.4",
+    "@melt-ui/svelte": "^0.64.5",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@tsconfig/svelte": "^5.0.2",
+    "rollup": "^4.9.1",
+    "rollup-plugin-svelte": "^7.1.6",
+    "sveld": "^0.19.1",
+    "svelte": "^4.2.8",
+    "svelte-preprocess": "^5.1.2",
+    "svelte-sequential-preprocessor": "^2.0.1"
+  },
+  "dependencies": {
+    "nanoid": "^5.0.3"
+  }
 }

lib/components/rollup.config.js

@@ -0,0 +1,28 @@
+import { preprocessMeltUI } from '@melt-ui/pp'
+import resolve from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
+import svelte from 'rollup-plugin-svelte'
+import preprocess from 'svelte-preprocess'
+import sequence from 'svelte-sequential-preprocessor'
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/bundle.js',
+    format: 'esm',
+  },
+  inlineDynamicImports: true,
+  external: (id) => !(id.includes('src/') || id.includes('./')),
+  plugins: [
+    svelte({
+      preprocess: sequence([preprocess(), preprocessMeltUI()]),
+      emitCss: false,
+    }),
+    resolve({
+      browser: true,
+      exportConditions: ['svelte'],
+      extensions: ['.svelte', '.mjs', '.js'],
+    }),
+    typescript(),
+  ],
+}

lib/components/scripts/types.js

@@ -0,0 +1,3 @@
+import { sveld } from 'sveld'
+
+sveld({ glob: true, types: true })

lib/components/src/Button.svelte

@@ -0,0 +1,38 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<script>
+  /** @type {import('./index').ButtonKind} */
+  export let kind = 'primary'
+</script>
+
+<button on:click class={`button ${kind}`}><slot /></button>
+
+<style>
+  .button {
+    border: none;
+    padding: 0.5rem 1rem;
+
+    color: var(--text);
+    border-radius: 0.5rem;
+  }
+
+  .button.primary {
+    color: var(--base);
+    background-color: var(--active);
+  }
+
+  .button.primary:hover {
+    background-color: color-mix(in srgb, var(--active) 80%, white);
+  }
+
+  .button.secondary {
+    color: var(--text);
+    background-color: var(--surface-1);
+  }
+
+  .button.secondary:hover {
+    background-color: var(--surface-2);
+  }
+</style>

lib/components/src/FancySelect.svelte

@@ -0,0 +1,55 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<script>
+  import { onMount } from 'svelte'
+
+  /** @type {{ icon: string; value: string; label: string }[]} */
+  export let items
+  /** @type {string} */
+  export let selected
+
+  let menulist
+
+  onMount(
+    () =>
+      (menulist.selectedIndex = items.findIndex(
+        (item) => item.value == selected,
+      )),
+  )
+  $: menulist &&
+    (menulist.selectedIndex = items.findIndex((item) => item.value == selected))
+</script>
+
+<xul:menulist
+  class="menulist"
+  bind:this={menulist}
+  on:command={(e) => {
+    selected = e.target.value
+  }}
+>
+  <xul:menupopup>
+    {#each items as item}
+      <xul:menuitem
+        class="menuitem-iconic"
+        label={item.label}
+        value={item.value}
+        image={item.icon}
+      />
+    {/each}
+  </xul:menupopup>
+</xul:menulist>
+
+<style>
+  .menulist::part(icon) {
+    width: 1.5rem;
+    height: 1.5rem;
+
+    margin-right: 0.25rem;
+  }
+
+  .menuitem-iconic :global(.menu-iconic-left) {
+    display: flex;
+  }
+</style>

lib/components/src/Spinner.svelte

@@ -0,0 +1,32 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<div class="spinner" />
+
+<style>
+  .spinner {
+    background-color: var(--active);
+
+    display: block;
+    width: 0.75em;
+    height: 0.75em;
+    border-radius: 0.25em;
+
+    margin: 0.125rem;
+
+    animation-name: spinner;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes spinner {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(90deg);
+    }
+  }
+</style>

lib/components/src/TextInput.svelte

@@ -0,0 +1,43 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<script context="module">
+  let gId = 0
+</script>
+
+<script>
+  /** @type {string} */
+  export let value = ''
+
+  const id = gId++
+
+  $: labelId = `text-input-${id}`
+</script>
+
+<div class="text-input__container">
+  <label class="text-input__label" for={labelId}><slot /></label>
+  <input type="text" class="text-input" id={labelId} bind:value on:keyup />
+</div>
+
+<style>
+  .text-input__label {
+    display: block;
+  }
+
+  .text-input {
+    display: block;
+    margin: 0;
+    border: none;
+
+    border-radius: 0.5rem;
+    padding: 0.5rem 1rem;
+
+    --surface-level: 1;
+    background-color: var(--surface-1);
+  }
+
+  .text-input:focus {
+    outline: solid var(--active);
+  }
+</style>

lib/components/src/ToolbarButton.svelte

@@ -0,0 +1,50 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<script>
+  export let disabled = false
+  /** @type {HTMLButtonElement | undefined} */
+  export let button = undefined
+  /** @type {'toolbar' | 'page-icon'} */
+  export let kind = 'toolbar'
+  /** @type {string | undefined} */
+  export let tooltip = undefined
+</script>
+
+<button
+  class={`toolbar__button toolbar__button--${kind}`}
+  bind:this={button}
+  on:click
+  {disabled}
+  title={tooltip}
+>
+  <slot />
+</button>
+
+<style>
+  .toolbar__button {
+    border: none;
+    background: none;
+
+    margin: 0;
+    border-radius: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .toolbar__button--page-icon {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.25rem;
+    padding: 0;
+  }
+
+  .toolbar__button:hover:not(:disabled) {
+    background: var(--surface-1);
+  }
+</style>

lib/components/src/Tree/TreeView.svelte

@@ -0,0 +1,32 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<script>
+  import { createTreeView } from '@melt-ui/svelte'
+  import { nanoid } from 'nanoid'
+  import { setContext } from 'svelte'
+
+  export let treeId = `tree-${nanoid()}`
+
+  let context = createTreeView()
+  setContext(treeId, context)
+
+  const {
+    elements: { tree },
+  } = context
+</script>
+
+<ul {...$tree} class="tree-root">
+  <slot />
+</ul>
+
+<style>
+  .tree-root {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    max-width: 100vw;
+  }
+</style>

lib/components/src/Tree/index.ts

@@ -0,0 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import TreeView from './TreeView.svelte'
+
+export { TreeView }

lib/components/src/index.ts

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+import Button from './Button.svelte'
+import FancySelect from './FancySelect.svelte'
+import Spinner from './Spinner.svelte'
+import TextInput from './TextInput.svelte'
+import ToolbarButton from './ToolbarButton.svelte'
+
+export * from './Tree'
+
+export type ButtonKind = 'primary' | 'secondary'
+
+export { Button, FancySelect, Spinner, TextInput, ToolbarButton }

lib/components/src/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="svelte" />

lib/components/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": true,
+    "outDir": "./dist"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules/*"
+  ],
+}

lib/link/types/_link.d.ts

@@ -14,4 +14,5 @@
 /// <reference path="./modules/BrowserWindowTracker.d.ts" />
 /// <reference path="./modules/EPageActions.d.ts" />
 /// <reference path="./modules/mitt.d.ts" />
+/// <reference path="./modules/PlacesUtils.d.ts" />
 /// <reference path="./modules/typedImport.d.ts" />

lib/shared/package.json

@@ -1,12 +1,22 @@
 {
-  "name": "shared",
+  "name": "@browser/shared",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "type": "module",
+  "source": "src/index.ts",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "microbundle --external=none --format=modern",
+    "dev": "microbundle watch --external=none --format=modern"
+  },
+  "devDependencies": {
+    "@browser/link": "workspace:*",
+    "microbundle": "^0.15.1"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "svelte": "^4.2.8"
+  }
 }