@jonsoc/ui 1.1.34

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@jonsoc/ui",
+  "version": "1.1.34",
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    "./*": "./src/components/*.tsx",
+    "./i18n/*": "./src/i18n/*.ts",
+    "./pierre": "./src/pierre/index.ts",
+    "./pierre/*": "./src/pierre/*.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./context": "./src/context/index.ts",
+    "./context/*": "./src/context/*.tsx",
+    "./styles": "./src/styles/index.css",
+    "./styles/tailwind": "./src/styles/tailwind/index.css",
+    "./theme": "./src/theme/index.ts",
+    "./theme/*": "./src/theme/*.ts",
+    "./theme/context": "./src/theme/context.tsx",
+    "./icons/provider": "./src/components/provider-icons/types.ts",
+    "./icons/file-type": "./src/components/file-icons/types.ts",
+    "./fonts/*": "./src/assets/fonts/*",
+    "./audio/*": "./src/assets/audio/*"
+  },
+  "scripts": {
+    "typecheck": "tsgo --noEmit",
+    "dev": "vite",
+    "generate:tailwind": "bun run script/tailwind.ts"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "catalog:",
+    "@tsconfig/node22": "catalog:",
+    "@types/bun": "catalog:",
+    "@types/katex": "0.16.7",
+    "@types/luxon": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-icons-spritesheet": "3.0.1",
+    "vite-plugin-solid": "catalog:"
+  },
+  "dependencies": {
+    "@kobalte/core": "catalog:",
+    "@jonsoc/sdk": "workspace:*",
+    "@jonsoc/util": "workspace:*",
+    "@pierre/diffs": "catalog:",
+    "@shikijs/transformers": "3.9.2",
+    "@solid-primitives/bounds": "0.1.3",
+    "@solid-primitives/media": "2.3.3",
+    "@solid-primitives/resize-observer": "2.1.3",
+    "@solidjs/meta": "catalog:",
+    "@typescript/native-preview": "catalog:",
+    "dompurify": "3.3.1",
+    "fuzzysort": "catalog:",
+    "katex": "0.16.27",
+    "luxon": "catalog:",
+    "marked": "catalog:",
+    "marked-katex-extension": "5.1.6",
+    "marked-shiki": "catalog:",
+    "remeda": "catalog:",
+    "shiki": "catalog:",
+    "solid-js": "catalog:",
+    "solid-list": "catalog:",
+    "strip-ansi": "7.1.2",
+    "virtua": "catalog:"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/script/colors.txt

@@ -0,0 +1,234 @@
+--background-base: #F8F7F7;
+--background-weak: var(--smoke-light-3);
+--background-strong: var(--smoke-light-1);
+--background-stronger: #FCFCFC;
+--surface-base: var(--smoke-light-alpha-2);
+--base: var(--smoke-light-alpha-2);
+--surface-base-hover: #0500000F;
+--surface-base-active: var(--smoke-light-alpha-3);
+--surface-base-interactive-active: var(--cobalt-light-alpha-3);
+--base2: var(--smoke-light-alpha-2);
+--base3: var(--smoke-light-alpha-2);
+--surface-inset-base: var(--smoke-light-alpha-2);
+--surface-inset-base-hover: var(--smoke-light-alpha-3);
+--surface-inset-strong: #1F000017;
+--surface-inset-strong-hover: #1F000017;
+--surface-raised-base: var(--smoke-light-alpha-1);
+--surface-float-base: var(--smoke-dark-1);
+--surface-float-base-hover: var(--smoke-dark-2);
+--surface-raised-base-hover: var(--smoke-light-alpha-2);
+--surface-raised-base-active: var(--smoke-light-alpha-3);
+--surface-raised-strong: var(--smoke-light-1);
+--surface-raised-strong-hover: var(--white);
+--surface-raised-stronger: var(--white);
+--surface-raised-stronger-hover: var(--white);
+--surface-weak: var(--smoke-light-alpha-3);
+--surface-weaker: var(--smoke-light-alpha-4);
+--surface-strong: #FFFFFF;
+--surface-raised-stronger-non-alpha: var(--white);
+--surface-brand-base: var(--yuzu-light-9);
+--surface-brand-hover: var(--yuzu-light-10);
+--surface-interactive-base: var(--cobalt-light-3);
+--surface-interactive-hover: var(--cobalt-light-4);
+--surface-interactive-weak: var(--cobalt-light-2);
+--surface-interactive-weak-hover: var(--cobalt-light-3);
+--surface-success-base: var(--apple-light-3);
+--surface-success-weak: var(--apple-light-2);
+--surface-success-strong: var(--apple-light-9);
+--surface-warning-base: var(--solaris-light-3);
+--surface-warning-weak: var(--solaris-light-2);
+--surface-warning-strong: var(--solaris-light-9);
+--surface-critical-base: var(--ember-light-3);
+--surface-critical-weak: var(--ember-light-2);
+--surface-critical-strong: var(--ember-light-9);
+--surface-info-base: var(--lilac-light-3);
+--surface-info-weak: var(--lilac-light-2);
+--surface-info-strong: var(--lilac-light-9);
+--surface-diff-unchanged-base: #FFFFFF00;
+--surface-diff-skip-base: var(--smoke-light-2);
+--surface-diff-hidden-base: var(--blue-light-3);
+--surface-diff-hidden-weak: var(--blue-light-2);
+--surface-diff-hidden-weaker: var(--blue-light-1);
+--surface-diff-hidden-strong: var(--blue-light-5);
+--surface-diff-hidden-stronger: var(--blue-light-9);
+--surface-diff-add-base: var(--mint-light-3);
+--surface-diff-add-weak: var(--mint-light-2);
+--surface-diff-add-weaker: var(--mint-light-1);
+--surface-diff-add-strong: var(--mint-light-5);
+--surface-diff-add-stronger: var(--mint-light-9);
+--surface-diff-delete-base: var(--ember-light-3);
+--surface-diff-delete-weak: var(--ember-light-2);
+--surface-diff-delete-weaker: var(--ember-light-1);
+--surface-diff-delete-strong: var(--ember-light-6);
+--surface-diff-delete-stronger: var(--ember-light-9);
+--text-base: var(--smoke-light-11);
+--input-base: var(--smoke-light-1);
+--input-hover: var(--smoke-light-2);
+--input-active: var(--cobalt-light-1);
+--input-selected: var(--cobalt-light-4);
+--input-focus: var(--cobalt-light-1);
+--input-disabled: var(--smoke-light-4);
+--text-weak: var(--smoke-light-9);
+--text-weaker: var(--smoke-light-8);
+--text-strong: var(--smoke-light-12);
+--text-interactive-base: var(--cobalt-light-9);
+--text-on-brand-base: var(--smoke-light-alpha-11);
+--text-on-interactive-base: var(--smoke-light-1);
+--text-on-interactive-weak: var(--smoke-dark-alpha-11);
+--text-on-success-base: var(--apple-light-10);
+--text-on-critical-base: var(--ember-light-10);
+--text-on-critical-weak: var(--ember-light-8);
+--text-on-critical-strong: var(--ember-light-12);
+--text-on-warning-base: var(--smoke-dark-alpha-11);
+--text-on-info-base: var(--smoke-dark-alpha-11);
+--text-diff-add-base: var(--mint-light-11);
+--text-diff-delete-base: var(--ember-light-10);
+--text-diff-delete-strong: var(--ember-light-12);
+--text-diff-add-strong: var(--mint-light-12);
+--text-on-info-weak: var(--smoke-dark-alpha-9);
+--text-on-info-strong: var(--smoke-dark-alpha-12);
+--text-on-warning-weak: var(--smoke-dark-alpha-9);
+--text-on-warning-strong: var(--smoke-dark-alpha-12);
+--text-on-success-weak: var(--apple-light-6);
+--text-on-success-strong: var(--apple-light-12);
+--text-on-brand-weak: var(--smoke-light-alpha-9);
+--text-on-brand-weaker: var(--smoke-light-alpha-8);
+--text-on-brand-strong: var(--smoke-light-alpha-12);
+--button-secondary-base: #FDFCFC;
+--button-secondary-hover: #FAF9F9;
+--border-base: var(--smoke-light-alpha-7);
+--border-hover: var(--smoke-light-alpha-8);
+--border-active: var(--smoke-light-alpha-9);
+--border-selected: var(--cobalt-light-alpha-9);
+--border-disabled: var(--smoke-light-alpha-8);
+--border-focus: var(--smoke-light-alpha-9);
+--border-weak-base: var(--smoke-light-alpha-5);
+--border-strong-base: var(--smoke-light-alpha-7);
+--border-strong-hover: var(--smoke-light-alpha-8);
+--border-strong-active: var(--smoke-light-alpha-7);
+--border-strong-selected: var(--cobalt-light-alpha-6);
+--border-strong-disabled: var(--smoke-light-alpha-6);
+--border-strong-focus: var(--smoke-light-alpha-7);
+--border-weak-hover: var(--smoke-light-alpha-6);
+--border-weak-active: var(--smoke-light-alpha-7);
+--border-weak-selected: var(--cobalt-light-alpha-5);
+--border-weak-disabled: var(--smoke-light-alpha-6);
+--border-weak-focus: var(--smoke-light-alpha-7);
+--border-interactive-base: var(--cobalt-light-7);
+--border-interactive-hover: var(--cobalt-light-8);
+--border-interactive-active: var(--cobalt-light-9);
+--border-interactive-selected: var(--cobalt-light-9);
+--border-interactive-disabled: var(--smoke-light-8);
+--border-interactive-focus: var(--cobalt-light-9);
+--border-success-base: var(--apple-light-6);
+--border-success-hover: var(--apple-light-7);
+--border-success-selected: var(--apple-light-9);
+--border-warning-base: var(--solaris-light-6);
+--border-warning-hover: var(--solaris-light-7);
+--border-warning-selected: var(--solaris-light-9);
+--border-critical-base: var(--ember-light-6);
+--border-critical-hover: var(--ember-light-7);
+--border-critical-selected: var(--ember-light-9);
+--border-info-base: var(--lilac-light-6);
+--border-info-hover: var(--lilac-light-7);
+--border-info-selected: var(--lilac-light-9);
+--icon-base: var(--smoke-light-9);
+--icon-hover: var(--smoke-light-11);
+--icon-active: var(--smoke-light-12);
+--icon-selected: var(--smoke-light-12);
+--icon-disabled: var(--smoke-light-8);
+--icon-focus: var(--smoke-light-12);
+--icon-invert-base: #FFFFFF;
+--icon-weak-base: var(--smoke-light-7);
+--icon-weak-hover: var(--smoke-light-8);
+--icon-weak-active: var(--smoke-light-9);
+--icon-weak-selected: var(--smoke-light-10);
+--icon-weak-disabled: var(--smoke-light-6);
+--icon-weak-focus: var(--smoke-light-9);
+--icon-strong-base: var(--smoke-light-12);
+--icon-strong-hover: #151313;
+--icon-strong-active: #020202;
+--icon-strong-selected: #020202;
+--icon-strong-disabled: var(--smoke-light-8);
+--icon-strong-focus: #020202;
+--icon-brand-base: var(--smoke-light-12);
+--icon-interactive-base: var(--cobalt-light-9);
+--icon-success-base: var(--apple-light-7);
+--icon-success-hover: var(--apple-light-8);
+--icon-success-active: var(--apple-light-11);
+--icon-warning-base: var(--amber-light-7);
+--icon-warning-hover: var(--amber-light-8);
+--icon-warning-active: var(--amber-light-11);
+--icon-critical-base: var(--ember-light-10);
+--icon-critical-hover: var(--ember-light-11);
+--icon-critical-active: var(--ember-light-12);
+--icon-info-base: var(--lilac-light-7);
+--icon-info-hover: var(--lilac-light-8);
+--icon-info-active: var(--lilac-light-11);
+--icon-on-brand-base: var(--smoke-light-alpha-11);
+--icon-on-brand-hover: var(--smoke-light-alpha-12);
+--icon-on-brand-selected: var(--smoke-light-alpha-12);
+--icon-on-interactive-base: var(--smoke-light-1);
+--icon-agent-plan-base: var(--purple-light-9);
+--icon-agent-docs-base: var(--amber-light-9);
+--icon-agent-ask-base: var(--cyan-light-9);
+--icon-agent-build-base: var(--cobalt-light-9);
+--icon-on-success-base: var(--apple-light-alpha-9);
+--icon-on-success-hover: var(--apple-light-alpha-10);
+--icon-on-success-selected: var(--apple-light-alpha-11);
+--icon-on-warning-base: var(--amber-lightalpha-9);
+--icon-on-warning-hover: var(--amber-lightalpha-10);
+--icon-on-warning-selected: var(--amber-lightalpha-11);
+--icon-on-critical-base: var(--ember-light-alpha-9);
+--icon-on-critical-hover: var(--ember-light-alpha-10);
+--icon-on-critical-selected: var(--ember-light-alpha-11);
+--icon-on-info-base: var(--lilac-light-9);
+--icon-on-info-hover: var(--lilac-light-alpha-10);
+--icon-on-info-selected: var(--lilac-light-alpha-11);
+--icon-diff-add-base: var(--mint-light-11);
+--icon-diff-add-hover: var(--mint-light-12);
+--icon-diff-add-active: var(--mint-light-12);
+--icon-diff-delete-base: var(--ember-light-10);
+--icon-diff-delete-hover: var(--ember-light-11);
+--syntax-comment: var(--text-weaker);
+--syntax-regexp: var(--text-base);
+--syntax-string: #007663;
+--syntax-keyword: var(--text-weak);
+--syntax-primitive: #FB7F51;
+--syntax-operator: var(--text-weak);
+--syntax-variable: var(--text-strong);
+--syntax-property: #EC6CC8;
+--syntax-type: #738400;
+--syntax-constant: #00B2B9;
+--syntax-punctuation: var(--text-weaker);
+--syntax-object: var(--text-strong);
+--syntax-success: var(--apple-light-10);
+--syntax-warning: var(--amber-light-10);
+--syntax-critical: var(--ember-light-9);
+--syntax-info: #0091A7;
+--syntax-diff-add: var(--mint-light-11);
+--syntax-diff-delete: var(--ember-light-11);
+--syntax-diff-unknown: #FF0000;
+--markdown-heading: #D68C27;
+--markdown-text: #1A1A1A;
+--markdown-link: #3B7DD8;
+--markdown-link-text: #318795;
+--markdown-code: #3D9A57;
+--markdown-block-quote: #B0851F;
+--markdown-emph: #B0851F;
+--markdown-strong: #D68C27;
+--markdown-horizontal-rule: #8A8A8A;
+--markdown-list-item: #3B7DD8;
+--markdown-list-enumeration: #318795;
+--markdown-image: #3B7DD8;
+--markdown-image-text: #318795;
+--markdown-code-block: #1A1A1A;
+--border-color: #FFFFFF;
+--border-weaker-base: var(--smoke-light-alpha-3);
+--border-weaker-hover: var(--smoke-light-alpha-4);
+--border-weaker-active: var(--smoke-light-alpha-6);
+--border-weaker-selected: var(--cobalt-light-alpha-4);
+--border-weaker-disabled: var(--smoke-light-alpha-2);
+--border-weaker-focus: var(--smoke-light-alpha-6);
+--button-ghost-hover: var(--smoke-light-alpha-2);
+--button-ghost-hover2: var(--smoke-light-alpha-3);

package/script/tailwind.ts

@@ -0,0 +1,23 @@
+#!/usr/bin/env bun
+
+const colors = await Bun.file(import.meta.dir + "/colors.txt").text()
+
+const variables = []
+for (const line of colors.split("\n")) {
+  if (!line.trim()) continue
+  const [variable] = line.trim().split(":")
+  const name = variable!.trim().substring(2)
+  variables.push(`--color-${name}: var(--${name});`)
+}
+
+const output = `
+/* Generated by script/tailwind.ts */
+/* Do not edit this file manually */
+
+@theme {
+  --color-*: initial;
+  ${variables.join("\n  ")}
+}
+`
+
+await Bun.file(import.meta.dir + "/../src/styles/tailwind/colors.css").write(output.trim())

package/src/assets/favicon/favicon-v3.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512"><svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" fill="#131010"></rect>
+<path d="M320 224V352H192V224H320Z" fill="#5A5858"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M384 416H128V96H384V416ZM320 160H192V352H320V160Z" fill="white"></path>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>

package/src/assets/favicon/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512"><svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" fill="#131010"></rect>
+<path d="M320 224V352H192V224H320Z" fill="#5A5858"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M384 416H128V96H384V416ZM320 160H192V352H320V160Z" fill="white"></path>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>

package/src/assets/favicon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "OpenCode",
+  "short_name": "OpenCode",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

package/src/assets/fonts/cascadia-code-nerd-font-bold.woff2

@@ -0,0 +1 @@
+CaskaydiaCoveNerdFontMono-Bold.woff2

package/src/assets/fonts/cascadia-code-nerd-font.woff2

@@ -0,0 +1 @@
+CaskaydiaCoveNerdFontMono-Regular.woff2

package/src/assets/fonts/fira-code-nerd-font-bold.woff2

@@ -0,0 +1 @@
+FiraCodeNerdFontMono-Bold.woff2

package/src/assets/fonts/fira-code-nerd-font.woff2

@@ -0,0 +1 @@
+FiraCodeNerdFontMono-Regular.woff2

package/src/assets/fonts/geist-mono-bold.woff2

@@ -0,0 +1 @@
+GeistMonoNerdFontMono-Bold.woff2

package/src/assets/fonts/geist-mono-medium.woff2

@@ -0,0 +1 @@
+GeistMonoNerdFontMono-Medium.woff2

package/src/assets/fonts/geist-mono.woff2

@@ -0,0 +1 @@
+GeistMonoNerdFontMono-Regular.woff2

package/src/assets/fonts/hack-nerd-font-bold.woff2

@@ -0,0 +1 @@
+HackNerdFontMono-Bold.woff2

package/src/assets/fonts/hack-nerd-font.woff2

@@ -0,0 +1 @@
+HackNerdFontMono-Regular.woff2

package/src/assets/fonts/ibm-plex-mono-bold.woff2

@@ -0,0 +1 @@
+BlexMonoNerdFontMono-Bold.woff2