@kitn.ai/ui 0.29.0 → 0.30.0

package/kit-base.css

@@ -0,0 +1,311 @@
+/* Shared kit base + component rules. ONE source, TWO consumers, and the
+   consumers are different style paths, which is the whole reason this file
+   exists:
+
+     src/elements/styles.css  compiled to compiled.css and adopted into every
+                              kai-* shadow root (the ./elements and ./define
+                              entries). It also sets the :host rules.
+     solid.css                Tailwind SOURCE that a light-DOM SolidJS consumer
+                              @imports into their own Tailwind build (the . and
+                              ./solid entries ship class names and no CSS).
+
+   Before this file, everything below lived only in the elements sheet, so the
+   Solid path silently shipped without it: .kai-radio / .kai-checkbox / .kai-range
+   rendered as raw OS chrome, no inset focus ring, no token-driven focus outline,
+   no scrollbars, no ::selection. Nothing in CI rendered that path, so nothing
+   noticed. The same defect had already happened once before, one layer up, when
+   the Storybook sheet hand-copied a few of these rules and omitted the rest.
+
+   NEVER copy a rule from here into either consumer, and never add a rule to one
+   consumer that both need. Add it here. The one thing that cannot live here is
+   :host, which selects nothing in a light DOM; those rules stay in
+   src/elements/styles.css, and .storybook/styles.css re-states them on body.
+
+   This file relies on the --color-* tokens from theme.css and on the classes
+   tw-animate-css emits; both consumers import those alongside it. */
+
+@layer base {
+  /* Code/monospace surfaces use --kai-font-code (named for its ROLE — code — not
+     "mono", so any family works). Covers inline code, <pre>, and code blocks. */
+  code, kbd, samp, pre {
+    font-family: var(--kai-font-code, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
+  }
+  * { border-color: var(--color-border); }
+
+  /* Native controls (date/time pickers, <select>, number spinners, the
+     checkbox/radio fallbacks, scrollbars) must follow the kit's light/dark
+     mode — NOT the OS — so e.g. the native calendar icon never renders black
+     on a dark surface. `color-scheme` drives that native rendering; we set it
+     from the resolved mode (the `.dark` scope the element factory toggles). */
+  .dark { color-scheme: dark; }
+
+  /* One token-driven focus ring for EVERY focusable element in the shadow root.
+     Blue by default (via --color-ring), consistent in light + dark, and
+     overridable through --kai-color-ring. Uses `outline` (not a box-shadow
+     ring) because it follows the element's radius and — unlike a `ring-*`
+     utility — is written in literal values, so it does not depend on any
+     `--tw-*` custom property. That matters more than it looks: `@property`
+     registration is document-global and is ignored inside a shadow root, so
+     every `--tw-*` here is unset and every `ring-*` utility computes to
+     nothing. This literal rule is the only reason most of the kit had a focus
+     indicator at all. `:focus-visible` so it only appears for keyboard
+     navigation, never on a mouse click. Components that render their own ring
+     set `focus-visible:outline-none` (a utility in a later cascade layer) and
+     win over this — so there's no double ring, just a guaranteed blue fallback
+     for the many controls that have no explicit focus style.
+
+     CAVEAT, learned the hard way: an outline is NOT immune to clipping. It is
+     unaffected by the element's OWN overflow, but `outline-offset: 2px` draws
+     it entirely outside the border box, where an ANCESTOR with
+     `overflow: clip`/`hidden` erases it completely. Controls that sit flush
+     inside such a container need `.kai-focus-inset` below. */
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  /* Consistent cross-platform scrollbars for EVERY scroll region inside the
+     shadow root (message list, conversation list, menus, hover cards, code
+     blocks, the prompt textarea …). Thin + rounded + subtle, themed via tokens
+     for light/dark, thumb stronger on hover. Track stays transparent and
+     overflow is untouched, so no scrollbar is forced where none is needed.
+     Scoped to the shadow root, so it never restyles the host page. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-scrollbar-thumb) transparent;
+  }
+  *::-webkit-scrollbar { width: 8px; height: 8px; }
+  *::-webkit-scrollbar-track { background: transparent; }
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-scrollbar-thumb);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+  *::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }
+  *::-webkit-scrollbar-corner { background: transparent; }
+
+  /* SELECTED text, kit-owned. Scoped to the shadow root — deliberately, and this
+     is the whole design decision, so read it before "simplifying" it into
+     theme.css.
+
+     WHY THE KIT OWNS IT AT ALL: left to the UA, the browser's blue selection was
+     visually stronger than the kit's OWN deliberate emphasis (the composer's
+     --color-highlight mark), so an incidental drag-select outranked a keyword the
+     app had flagged on purpose. How selected text reads is a fact about the
+     medium, which is the kit's call.
+
+     WHY ONLY HERE, AND NOT IN theme.css: theme.css is imported into a CONSUMER's
+     Tailwind build, so a bare ::selection there would restyle every paragraph on
+     their page — the kit deciding for the app's own content, which is not ours to
+     decide. The shadow root IS the kit's DOM, so the same rule is unambiguous
+     here. Identical reasoning to the scrollbar and :focus-visible rules above,
+     which are scoped the same way and for the same reason. theme.css therefore
+     carries the TOKENS only. A Solid-layer consumer rendering our components
+     into their own light DOM opts in by importing solid.css, which brings this
+     whole file and says so in its header; a consumer who wants the tokens alone
+     imports theme.css and writes their own scoped rule:
+     `.my-chat ::selection { background-color: var(--color-selection); … }`.
+
+     WHY THE RULE MUST BE IN THIS SHEET AND NOT INHERITED: ::selection does NOT
+     cross the shadow boundary the way ordinary inherited properties do — a
+     document-level ::selection leaves shadow content on the UA default. The
+     --kai-color-selection TOKEN does pierce (custom properties inherit normally),
+     which is what keeps a consumer override working.
+
+     Both background AND color are set; see the theme.css note for why the
+     foreground is load-bearing rather than cosmetic (coloured text falls under
+     WCAG AA on this fill if it keeps its own colour). */
+  ::selection {
+    background-color: var(--color-selection);
+    color: var(--color-selection-foreground);
+  }
+
+  /* Respect a user's reduced-motion preference: disable the tw-animate-css
+     enter/exit keyframe animations (toasts, overlays, cards) so they appear and
+     disappear instantly instead of sliding/fading. Targets the utility classes
+     tw-animate-css emits (.animate-in / .animate-out) plus any arbitrary
+     `animate-[…]` keyframe utility. */
+  @media (prefers-reduced-motion: reduce) {
+    .animate-in,
+    .animate-out,
+    [class*="animate-["] {
+      animation: none !important;
+    }
+  }
+}
+
+
+@layer components {
+  /* Focus ring drawn INSIDE the element's border box, for focusable regions
+     that sit flush against a clipping ancestor. The scrollable code-block body
+     and the message log are both `overflow-*` regions filling a rounded
+     `overflow: clip` container, so the default `outline-offset: 2px` put the
+     whole ring outside the clip and it never painted — the outline computed
+     correctly, matched `:focus-visible`, and was erased before it reached the
+     screen. A negative offset keeps it clear of the boundary. Same token and
+     width as the base ring, so it reads identically. */
+  .kai-focus-inset:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: -2px;
+  }
+
+  /* Designed radio + checkbox (appearance-none) so the form controls read as
+     intentional, theme correctly in light/dark, and have comfortable targets —
+     replacing the weak native defaults. Used via `.kai-radio` / `.kai-checkbox`. */
+  .kai-radio,
+  .kai-checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    margin: 0;
+    flex-shrink: 0;
+    cursor: pointer;
+    border: 1.5px solid var(--color-input);
+    background-color: var(--color-background);
+    display: inline-grid;
+    place-content: center;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease,
+      transform 0.1s ease;
+  }
+  .kai-radio { border-radius: 9999px; }
+  .kai-checkbox { border-radius: 0.3rem; }
+  .kai-radio::after {
+    content: "";
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: 9999px;
+    background-color: var(--color-primary);
+    transform: scale(0);
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .kai-radio:checked { border-color: var(--color-primary); }
+  .kai-radio:checked::after { transform: scale(1); }
+  .kai-checkbox:checked {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+  .kai-checkbox::after {
+    content: "";
+    inline-size: 0.8rem;
+    block-size: 0.8rem;
+    background-color: var(--color-primary-foreground);
+    transform: scale(0);
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  .kai-checkbox:checked::after { transform: scale(1); }
+  .kai-radio:hover:not(:disabled),
+  .kai-checkbox:hover:not(:disabled) {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 9%, transparent);
+  }
+  .kai-radio:active:not(:disabled),
+  .kai-checkbox:active:not(:disabled) { transform: scale(0.92); }
+  .kai-checkbox:checked {
+    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 26%, transparent);
+  }
+  /* The mixed state ("some of the children below are ticked"). `indeterminate` is a
+     DOM property with no HTML attribute, so a rule is the ONLY way it can be seen —
+     without one a mixed box paints pixel-identically to an unchecked one and lies
+     about its state. That was live: `<kai-tasks>` in `select` mode puts an
+     indeterminate select-all above a partial selection, and it read as "none
+     selected".
+
+     Same fill and the same masked `::after` as `:checked`, with the tick mask
+     swapped for a bar, so the two states are siblings of one technique rather than
+     two: the bar is `--color-primary-foreground` on `--color-primary`, exactly the
+     pair the tick already uses, so it themes and contrasts identically in both
+     themes and stays consumer-themable through the same tokens.
+
+     Ordered AFTER the `:checked` rules on purpose. `indeterminate` is independent of
+     `checked`, so a box can be both; specificity is equal, so source order decides,
+     and mixed-wins is what the browser's own native rendering does.
+
+     Scoped to `.kai-checkbox` on purpose: `:indeterminate` also matches every radio
+     in a group with nothing selected, and an empty radio group must go on reading as
+     empty rather than sprouting a third state. */
+  .kai-checkbox:indeterminate {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 26%, transparent);
+  }
+  .kai-checkbox:indeterminate::after {
+    transform: scale(1);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  .kai-radio:disabled,
+  .kai-checkbox:disabled { opacity: 0.5; cursor: not-allowed; }
+
+  /* Custom range slider: a filled track (--kai-range-fill set by the widget) and a
+     refined thumb that scales on hover/press with a focus halo — no native chrome. */
+  .kai-range {
+    appearance: none;
+    -webkit-appearance: none;
+    inline-size: 100%;
+    block-size: 1.25rem;
+    background: transparent;
+    cursor: pointer;
+    margin: 0;
+  }
+  .kai-range::-webkit-slider-runnable-track {
+    block-size: 0.375rem;
+    border-radius: 9999px;
+    border: none;
+    box-shadow: none;
+    background: linear-gradient(
+      to right,
+      var(--color-primary) var(--kai-range-fill, 0%),
+      var(--color-muted) var(--kai-range-fill, 0%)
+    );
+  }
+  .kai-range::-moz-range-track {
+    block-size: 0.375rem;
+    border-radius: 9999px;
+    border: none;
+    box-shadow: none;
+    background: var(--color-muted);
+  }
+  .kai-range::-moz-range-progress {
+    block-size: 0.375rem;
+    border-radius: 9999px;
+    background: var(--color-primary);
+  }
+  .kai-range::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    border-radius: 9999px;
+    background: var(--color-background);
+    border: 2px solid var(--color-primary);
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
+    margin-block-start: -0.375rem;
+    transition: transform 0.12s ease, box-shadow 0.12s ease;
+  }
+  .kai-range::-moz-range-thumb {
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    border-radius: 9999px;
+    background: var(--color-background);
+    border: 2px solid var(--color-primary);
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
+    transition: transform 0.12s ease, box-shadow 0.12s ease;
+  }
+  .kai-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
+  .kai-range:hover::-moz-range-thumb { transform: scale(1.12); }
+  .kai-range:focus-visible { outline: none; }
+  .kai-range:focus-visible::-webkit-slider-thumb,
+  .kai-range:active::-webkit-slider-thumb {
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 14%, transparent);
+  }
+  .kai-range:focus-visible::-moz-range-thumb,
+  .kai-range:active::-moz-range-thumb {
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 14%, transparent);
+  }
+  .kai-range:disabled { opacity: 0.5; cursor: not-allowed; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitn.ai/ui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "nx": {
     "name": "ui",
     "targets": {
@@ -93,6 +93,7 @@
       "default": "./dist/elements/autoloader.js"
     },
     "./theme.css": "./theme.css",
+    "./solid.css": "./solid.css",
     "./theme.tokens.css": "./dist/theme.tokens.css",
     "./element-meta.json": "./src/elements/element-meta.json",
     "./icon-names.json": "./src/elements/icon-names.json",
@@ -162,6 +163,8 @@
     "!dist/**/*.testlib.*",
     "frameworks",
     "theme.css",
+    "solid.css",
+    "kit-base.css",
     "llms.txt",
     "llms-full.txt",
     "NOTICE"
@@ -303,11 +306,23 @@
     "vitest": "^4.1.0"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "@tailwindcss/typography": "^0.5.19",
+    "react": ">=18",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0"
   },
   "peerDependenciesMeta": {
+    "@tailwindcss/typography": {
+      "optional": true
+    },
     "react": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    },
+    "tw-animate-css": {
+      "optional": true
     }
   }
 }

package/solid.css

@@ -0,0 +1,33 @@
+/* @kitn.ai/ui for light-DOM SolidJS apps. Tailwind v4 SOURCE: import it from a
+   stylesheet that Tailwind processes, after `@import "tailwindcss"`, and keep
+   your `@source` line pointing at the kit so its class names survive:
+
+     @import "tailwindcss";
+     @import "@kitn.ai/ui/solid.css";
+     @source "../node_modules/@kitn.ai/ui";
+
+   Why this file and not theme.css alone: the Solid entry (`.` / `./solid`) ships
+   class-name strings and NO CSS, so everything the kai-* elements get from their
+   compiled shadow-root sheet has to reach your Tailwind build some other way.
+   theme.css carries only the tokens. This file adds the rest:
+
+     tw-animate-css              the animate-in/out, fade-*, zoom-*, slide-* classes
+                                 every overlay uses; without it they compile to
+                                 nothing and the animations are silently dead
+     @tailwindcss/typography     the prose-sm / prose-lg classes proseClass() emits
+     kit-base.css                the focus ring, scrollbars, ::selection, and the
+                                 .kai-radio / .kai-checkbox / .kai-range /
+                                 .kai-focus-inset component rules
+
+   tw-animate-css, @tailwindcss/typography and tailwindcss are optional peer
+   dependencies: install them next to the kit.
+
+   The base rules here are global by design: they style your whole page the way
+   the kit styles its own shadow roots. If you only want the tokens, import
+   theme.css instead and opt into the rest yourself.
+
+   Guarded by tests/styles/solid-css-contract.test.ts. */
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+@import "./theme.css";
+@import "./kit-base.css";

package/theme.css

@@ -1,12 +1,27 @@
 /* @kitn.ai/ui design system — import after `@import "tailwindcss"`.
-   Defines ONLY namespaced (--color-*) tokens, component keyframes, animation
+   Defines the shadcn-style (--color-*) tokens, component keyframes, animation
    utilities, and the .chat-markdown styles. Contains NO global base/reset rules,
    so importing it restyles nothing on its own — a host opts in via the kit's
    components + classes. Rebrand by overriding the --color-* values (optionally
    scoped to a subtree).
    NOTE: This file is Tailwind-v4 source (requires tailwindcss as a peer). For
    bundler-based apps that don't use Tailwind, import @kitn.ai/ui/theme.tokens.css
-   instead — it is plain compiled CSS with no toolchain requirements. */
+   instead — it is plain compiled CSS with no toolchain requirements.
+
+   THIS FILE IS MERGED INTO THE CONSUMER'S TAILWIND BUILD when they @import it,
+   so everything at global scope here lands in THEIR namespace. What it changes
+   for them (documented in apps/docs/.../guides/theming.mdx, keep the two in sync):
+     - `@custom-variant dark` below switches their `dark:` utilities from
+       prefers-color-scheme to the `.dark` class.
+     - the `--color-*` names merge into their @theme (last import wins).
+     - `--radius-sm/md/lg/xl` re-point Tailwind's stock radius scale at --radius.
+     - `--text-xs/sm/base/lg` are aliased onto the kit's type scale (defaults
+       equal stock Tailwind, so nothing moves until a --kai-text-* token is set).
+   Everything else global carries a `kai-` prefix so it cannot clash by name:
+   every @keyframes is `kai-<name>`, the scrollbar utility is `.kai-scrollbar-thin`.
+   The one unprefixed global class is `.chat-markdown` (public; renaming it is a
+   breaking change). tests/elements/theme-globals.test.ts pins the prefix rule
+   and that every animation reference in src/ resolves to a keyframe here. */
 
 @custom-variant dark (&:is(.dark *));
 
@@ -205,20 +220,18 @@
   --text-base: var(--kai-text-title, 1rem);           --text-base--line-height: calc(1.5 / 1);          /* ≡ text-title */
   --text-lg: var(--kai-text-lg, 1.125rem);            --text-lg--line-height: calc(1.75 / 1.125);       /* 18px — section headings, lg prose */
 
-  @keyframes typing { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-2px); opacity: 1 } }
-  @keyframes loading-dots { 0%,100% { opacity: 0 } 50% { opacity: 1 } }
-  @keyframes wave { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.6) } }
-  @keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
-  @keyframes text-blink { 0%,100% { color: var(--color-primary) } 50% { color: var(--color-muted-foreground) } }
-  @keyframes bounce-dots { 0%,100% { transform: scale(.8); opacity: .5 } 50% { transform: scale(1.2); opacity: 1 } }
-  @keyframes thin-pulse { 0%,100% { transform: scale(.95); opacity: .8 } 50% { transform: scale(1.05); opacity: .4 } }
-  @keyframes pulse-dot { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.5); opacity: 1 } }
-  @keyframes shimmer-text { 0% { background-position: 150% center } 100% { background-position: -150% center } }
-  @keyframes wave-bars { 0%,100% { transform: scaleY(1); opacity: .5 } 50% { transform: scaleY(.6); opacity: 1 } }
-  @keyframes shimmer { 0% { background-position: 200% 50% } 100% { background-position: -200% 50% } }
-  @keyframes spinner-fade { 0% { opacity: 0 } 100% { opacity: 1 } }
-  @keyframes collapsible-down { from { height: 0; opacity: 0 } to { height: var(--kb-collapsible-content-height); opacity: 1 } }
-  @keyframes collapsible-up { from { height: var(--kb-collapsible-content-height); opacity: 1 } to { height: 0; opacity: 0 } }
+  @keyframes kai-typing { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-2px); opacity: 1 } }
+  @keyframes kai-loading-dots { 0%,100% { opacity: 0 } 50% { opacity: 1 } }
+  @keyframes kai-wave { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.6) } }
+  @keyframes kai-blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
+  @keyframes kai-text-blink { 0%,100% { color: var(--color-primary) } 50% { color: var(--color-muted-foreground) } }
+  @keyframes kai-bounce-dots { 0%,100% { transform: scale(.8); opacity: .5 } 50% { transform: scale(1.2); opacity: 1 } }
+  @keyframes kai-thin-pulse { 0%,100% { transform: scale(.95); opacity: .8 } 50% { transform: scale(1.05); opacity: .4 } }
+  @keyframes kai-pulse-dot { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.5); opacity: 1 } }
+  @keyframes kai-shimmer-text { 0% { background-position: 150% center } 100% { background-position: -150% center } }
+  @keyframes kai-wave-bars { 0%,100% { transform: scaleY(1); opacity: .5 } 50% { transform: scaleY(.6); opacity: 1 } }
+  @keyframes kai-shimmer { 0% { background-position: 200% 50% } 100% { background-position: -200% 50% } }
+  @keyframes kai-spinner-fade { 0% { opacity: 0 } 100% { opacity: 1 } }
 }
 
 .dark {
@@ -344,21 +357,24 @@
 
 /* Cross-platform thin scrollbar utility (Firefox + WebKit). Used by ScrollArea
    and any scroll region in the SolidJS-component build (web components also get
-   this globally inside their shadow root — see src/elements/styles.css). */
-.scrollbar-thin {
+   this globally inside their shadow root — see src/elements/styles.css).
+   `kai-` prefixed because this file is merged into a consumer's Tailwind build
+   and `.scrollbar-thin` is a name they may well own (no consumer-facing doc ever
+   named the old unprefixed class, so no alias is kept). */
+.kai-scrollbar-thin {
   scrollbar-width: thin;
   scrollbar-color: var(--color-scrollbar-thumb) transparent;
 }
-.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
-.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
-.scrollbar-thin::-webkit-scrollbar-thumb {
+.kai-scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
+.kai-scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
+.kai-scrollbar-thin::-webkit-scrollbar-thumb {
   background-color: var(--color-scrollbar-thumb);
   border-radius: 9999px;
   border: 2px solid transparent;
   background-clip: padding-box;
 }
-.scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }
-.scrollbar-thin::-webkit-scrollbar-corner { background: transparent; }
+.kai-scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }
+.kai-scrollbar-thin::-webkit-scrollbar-corner { background: transparent; }
 
 /* Surface utilities — `bg-surface` / `bg-surface-strong` paint the opaque,
    theme-derived surface tokens (see --color-surface above). Defined explicitly

package/dist/arrow-down-CjRU3JgV.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-DObhsRtm.js";import{c as r,q as e}from"./define-By-uL588.js";var m=[["path",{d:"M12 5v14",key:"s699le"}],["path",{d:"m19 12-7 7-7-7",key:"1idqje"}]],p=a=>r(o,e(a,{name:"ArrowDown",iconNode:m})),t=p;export{t as a};

package/dist/arrow-left-Bnpb1UEW.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-DObhsRtm.js";import{c as r,q as e}from"./define-By-uL588.js";var m=[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]],t=a=>r(o,e(a,{name:"ArrowLeft",iconNode:m})),p=t;export{p as a};

package/dist/artifact-Bwt7OgcR.js

@@ -1 +0,0 @@
-import{q as J,s as he,g as k,k as y,j as F,x as Q,o as X,p as fe,i as c,c as a,S as g,t as v,d as p,a as z,b as Y,u as Z,m as ge,h as be,e as ve}from"./define-By-uL588.js";import{c as H}from"./cn-DN5AWfiS.js";import{B as C}from"./button-DkuOnGLy.js";import{C as me,a as pe}from"./code-block-ClMLKb7C.js";import{F as we}from"./file-tree-CJqM2aP7.js";import{L as xe}from"./loader-BM4CEz4G.js";import{a as ke,i as ee}from"./url-scheme-policy-DR5DgvkM.js";import{a as ye}from"./arrow-left-Bnpb1UEW.js";import{a as ze,r as Ce,h as Te,e as Fe,c as Pe,d as Se}from"./rotate-cw-CMVLoCyH.js";import{e as re}from"./external-link-ByXAwBBQ.js";import{f as Oe}from"./file-text-DMib2qwt.js";import{m as Re,a as je}from"./minimize-2-BQRoBV1V.js";const Ie="6.0.227",ne=`https://cdn.jsdelivr.net/npm/pdfjs-dist@${Ie}/build`,He=()=>import(/*@vite-ignore*/`${ne}/pdf.min.mjs`),Ne=`${ne}/pdf.worker.min.mjs`;let Ee=He,Me=Ne,N=null;function $e(){if(!N){const r=Ee;N=(async()=>{const t=await r(),e=t.default??t;return e.GlobalWorkerOptions.workerSrc=Me,e})()}return N}async function Be(r,t,e){const i=await(await $e()).getDocument({url:r}).promise;t.replaceChildren();const o=typeof window<"u"&&window.devicePixelRatio?window.devicePixelRatio:1;for(let s=1;s<=i.numPages;s++){const d=await i.getPage(s),u=d.getViewport({scale:1}),h=u.width>0?e/u.width:1,f=d.getViewport({scale:h*o}),b=document.createElement("canvas");b.width=Math.max(1,Math.floor(f.width)),b.height=Math.max(1,Math.floor(f.height)),b.setAttribute("role","img"),b.setAttribute("aria-label",`Page ${s}`),b.style.width="100%",b.style.height="auto",b.style.display="block";const w=b.getContext("2d");t.appendChild(b),await d.render({canvasContext:w,viewport:f}).promise}return{pages:i.numPages}}var Le=v('<div><div class="relative min-h-0 flex-1">'),Ue=v('<form class="min-w-0 flex-1"><label class=sr-only for=kai-artifact-path>Address</label><input id=kai-artifact-path name=kai-artifact-path type=text autocomplete=off placeholder="Enter a path or URL\u2026">'),De=v("<div class=flex-1 aria-hidden=true>"),Ae=v('<div role=tablist aria-label=View class="flex shrink-0 items-center gap-0.5 rounded-md bg-muted p-0.5">'),Ve=v('<div data-artifact-toolbar class="flex shrink-0 items-center gap-1.5 border-b border-border bg-surface px-2 py-1.5">'),We=v("<button type=button role=tab>"),Ke=v('<iframe class="absolute inset-0 h-full w-full border-0 bg-white">'),_e=v('<div class="absolute inset-0 flex"><div class="w-56 shrink-0 overflow-auto border-r border-border bg-surface-sunken py-1.5 scrollbar-thin"></div><div class="min-w-0 flex-1 overflow-auto scrollbar-thin">'),qe=v('<div class="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">Select a file to view its source.'),Ge=v('<div class="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">No source \u2014 this file (<!>) has no code view.'),Je=v('<div class="flex flex-wrap items-center justify-center gap-2"><a class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"target=_blank rel="noopener noreferrer">Open in new tab</a><a class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"download>Download'),Qe=v(`<div role=region aria-label="PDF preview unavailable"class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-card p-6 text-center"><div class="text-sm font-medium text-foreground"></div><div class="text-xs text-muted-foreground">Can't preview this PDF inline.`),Xe=v(`<div class="text-xs text-muted-foreground">Blocked: that address uses a scheme this viewer won't open.`),Ye=v('<div class="pointer-events-none absolute inset-0 flex items-center justify-center">'),Ze=v('<div class="absolute inset-0"><div role=region aria-label="PDF preview"tabindex=0 class="absolute inset-0 flex flex-col items-center gap-3 overflow-auto bg-surface-sunken p-3 scrollbar-thin focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset">');const er="allow-scripts allow-forms";function E(r,t){console.warn(`[kai-artifact] blocked unsafe url in ${r}: ${t}`)}function rr(r,t){if(r.url)return r.url;if(!t)return r.path;try{return new URL(r.path,t).href}catch{return r.path}}function nr(r,t){if(!r)return!1;const e=t.find(o=>o.url===r||o.path===r);if(e?.type==="pdf")return!0;const i=r.split(/[?#]/)[0];return/\.pdf$/i.test(i)}function tr(r){const t=J({files:[],defaultTab:"preview",sandbox:er,showNav:!0,showReload:!0,showHome:!0,showPathField:!0,showTabs:!0,expandable:!1,openInTab:!1,standalone:!1,readonlyPath:!1,maximized:!1},r),[e,i]=he(t,["src","files","tab","defaultTab","activeFile","sandbox","iframeTitle","onNavigate","onTabChange","onFileSelect","maximized","onMaximizeChange","showNav","showReload","showHome","showPathField","showTabs","expandable","openInTab","standalone","readonlyPath","displayUrl","controllerRef","class"]),[o,s]=k(e.src?[e.src]:[]),[d,u]=k(e.src?0:-1),h=()=>o()[d()]??"",f=()=>d()>0,b=()=>d()<o().length-1,w=y(()=>{const n=h();return n&&ke(n)?(E("preview",n),""):n}),[P,M]=k(e.tab??e.defaultTab),[$,B]=k(e.activeFile),[ae,ie]=k(0),[S,O]=k(e.maximized??!1);F(()=>O(e.maximized??!1));const le=()=>{var n;const l=!S();O(l),(n=e.onMaximizeChange)==null||n.call(e,l)},L=y(()=>{const n=h();return!!n&&n!=="about:blank"&&ee(n)}),U=()=>{const n=h();if(!L()){n&&n!=="about:blank"&&E("openExternal",n);return}window.open(n,"_blank","noopener,noreferrer")},D=y(()=>e.expandable&&!e.standalone),oe=y(()=>e.showNav||e.showReload||e.showHome||e.showPathField||e.showTabs||D()||e.openInTab);let x;F(()=>{e.tab!==void 0&&M(e.tab)}),F(()=>B(e.activeFile)),F(Q(()=>e.src,n=>{n&&n!==h()&&T(n)},{defer:!0}));const A=n=>n===void 0?void 0:e.files.find(l=>l.path===n),V=y(()=>A($())),se=y(()=>{const n=V();return!!n&&n.type!=="image"&&n.type!=="pdf"&&typeof n.code=="string"});function T(n){if(n===h()){j();return}s(l=>[...l.slice(0,d()+1),n]),u(l=>l+1),R()}function R(){var n;x&&(x.src=w()||"about:blank"),(n=e.onNavigate)==null||n.call(e,h())}function de(n){var l;n!==P()&&(M(n),(l=e.onTabChange)==null||l.call(e,n))}function W(n,l){var m;B(n),(m=e.onFileSelect)==null||m.call(e,n),T(rr(l,e.src))}const K=()=>{f()&&(u(n=>n-1),R())},_=()=>{b()&&(u(n=>n+1),R())};function j(){var n;x&&(x.src="about:blank",x.src=w()||"about:blank"),ie(l=>l+1),(n=e.onNavigate)==null||n.call(e,h())}const q=()=>{e.src&&T(e.src)},G=n=>{var l;S()!==n&&(O(n),(l=e.onMaximizeChange)==null||l.call(e,n))};X(()=>{var n;(n=e.controllerRef)==null||n.call(e,{back:()=>K(),forward:()=>_(),reload:()=>j(),home:()=>q(),navigate:l=>T(l),selectFile:l=>{const m=A(l);m&&W(l,m)},openExternal:()=>U(),maximize:()=>G(!0),restore:()=>G(!1)})});const ue=()=>{var n,l;try{const m=(n=x?.contentWindow)==null?void 0:n.location.href;m&&m!=="about:blank"&&m!==h()&&(s(I=>[...I.slice(0,d()+1),m]),u(I=>I+1),(l=e.onNavigate)==null||l.call(e,m))}catch{}},ce=n=>{n.preventDefault();const l=n.currentTarget.elements.namedItem("kai-artifact-path");if(e.readonlyPath||e.displayUrl!=null){l&&(l.value=e.displayUrl??h());return}l&&l.value&&T(l.value)};return(()=>{var n=Le(),l=n.firstChild;return fe(n,J({get class(){return H("flex h-full w-full flex-col overflow-hidden bg-card text-card-foreground",e.standalone&&"rounded-xl border border-border",e.class)}},i),!1,!0),c(n,a(g,{get when(){return oe()},get children(){return a(ar,{url:()=>e.displayUrl??h(),tab:P,canBack:f,canForward:b,canHome:()=>!!e.src,onBack:K,onForward:_,onReload:j,onHome:q,onSubmitPath:ce,onTab:de,showNav:()=>e.showNav,showReload:()=>e.showReload,showHome:()=>e.showHome,showPathField:()=>e.showPathField,showTabs:()=>e.showTabs,showExpand:D,showOpenInTab:()=>e.openInTab,maximized:S,onToggleMaximize:le,canOpenInTab:L,onOpenInTab:U,readonlyPath:()=>e.readonlyPath||e.displayUrl!=null})}}),l),c(l,a(g,{get when(){return P()==="preview"},get fallback(){return a(lr,{get files(){return e.files},activeFile:$,activeFileObj:V,hasSource:se,onSelect:W})},get children(){return a(g,{get when(){return nr(h(),e.files)},get fallback(){return a(ir,{ref:m=>x=m,src:w,get sandbox(){return e.sandbox},get title(){return e.iframeTitle??"Artifact preview"},onLoad:ue})},get children(){return a(sr,{get url(){return h()},get reloadKey(){return ae()}})}})}})),n})()}function ar(r){return(()=>{var t=Ve();return c(t,a(g,{get when(){return r.showNav()},get children(){return[a(C,{variant:"ghost",size:"icon-sm","aria-label":"Back",get disabled(){return!r.canBack()},onClick:()=>r.onBack(),get children(){return a(ye,{size:16,"aria-hidden":"true"})}}),a(C,{variant:"ghost",size:"icon-sm","aria-label":"Forward",get disabled(){return!r.canForward()},onClick:()=>r.onForward(),get children(){return a(ze,{size:16,"aria-hidden":"true"})}})]}}),null),c(t,a(g,{get when(){return r.showReload()},get children(){return a(C,{variant:"ghost",size:"icon-sm","aria-label":"Reload",onClick:()=>r.onReload(),get children(){return a(Ce,{size:15,"aria-hidden":"true"})}})}}),null),c(t,a(g,{get when(){return r.showHome()},get children(){return a(C,{variant:"ghost",size:"icon-sm","aria-label":"Home",get disabled(){return!r.canHome()},onClick:()=>r.onHome(),get children(){return a(Te,{size:15,"aria-hidden":"true"})}})}}),null),c(t,a(g,{get when(){return r.showPathField()},get children(){var e=Ue(),i=e.firstChild,o=i.nextSibling;return e.addEventListener("submit",s=>r.onSubmitPath(s)),p(o,"spellcheck",!1),z(s=>{var d=r.readonlyPath()||void 0,u=r.readonlyPath()?"true":void 0,h=H("h-7 w-full rounded-md border border-border px-2.5 text-xs text-foreground font-mono outline-none",r.readonlyPath()?"bg-muted/40 cursor-default":"bg-background focus-visible:ring-2 focus-visible:ring-ring");return d!==s.e&&(o.readOnly=s.e=d),u!==s.t&&p(o,"aria-readonly",s.t=u),h!==s.a&&Y(o,s.a=h),s},{e:void 0,t:void 0,a:void 0}),z(()=>o.value=r.url()),e}}),null),c(t,a(g,{get when(){return!r.showPathField()},get children(){return De()}}),null),c(t,a(g,{get when(){return r.showExpand()},get children(){return a(C,{variant:"ghost",size:"icon-sm",get"aria-label"(){return r.maximized()?"Collapse":"Expand"},get"aria-expanded"(){return r.maximized()},onClick:()=>r.onToggleMaximize(),get children(){return a(g,{get when(){return r.maximized()},get fallback(){return a(je,{size:15,"aria-hidden":"true"})},get children(){return a(Re,{size:15,"aria-hidden":"true"})}})}})}}),null),c(t,a(g,{get when(){return r.showOpenInTab()},get children(){return a(C,{variant:"ghost",size:"icon-sm","aria-label":"Open in new tab",get disabled(){return!r.canOpenInTab()},onClick:()=>r.onOpenInTab(),get children(){return a(re,{size:15,"aria-hidden":"true"})}})}}),null),c(t,a(g,{get when(){return r.showTabs()},get children(){var e=Ae();return c(e,a(te,{label:"Preview",get icon(){return a(Fe,{size:14,"aria-hidden":"true"})},get selected(){return r.tab()==="preview"},onClick:()=>r.onTab("preview")}),null),c(e,a(te,{label:"Code",get icon(){return a(Pe,{size:14,"aria-hidden":"true"})},get selected(){return r.tab()==="code"},onClick:()=>r.onTab("code")}),null),e}}),null),t})()}function te(r){return(()=>{var t=We();return t.$$click=()=>r.onClick(),c(t,()=>r.icon,null),c(t,()=>r.label,null),z(e=>{var i=r.selected,o=H("inline-flex h-6 items-center gap-1.5 rounded px-2 text-xs font-medium transition-colors outline-none","focus-visible:ring-2 focus-visible:ring-ring",r.selected?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground");return i!==e.e&&p(t,"aria-selected",e.e=i),o!==e.t&&Y(t,e.t=o),e},{e:void 0,t:void 0}),t})()}function ir(r){return(()=>{var t=Ke();t.addEventListener("load",()=>r.onLoad());var e=r.ref;return typeof e=="function"?Z(e,t):r.ref=t,z(i=>{var o=r.src()||"about:blank",s=r.sandbox,d=r.title;return o!==i.e&&p(t,"src",i.e=o),s!==i.t&&p(t,"sandbox",i.t=s),d!==i.a&&p(t,"title",i.a=d),i},{e:void 0,t:void 0,a:void 0}),t})()}function lr(r){return(()=>{var t=_e(),e=t.firstChild,i=e.nextSibling;return c(e,a(we,{get files(){return r.files},get activeFile(){return r.activeFile()},onSelect:(o,s)=>r.onSelect(o,s)})),c(i,a(g,{get when(){return r.activeFileObj()},get fallback(){return qe()},get children(){return a(g,{get when(){return r.hasSource()},get fallback(){return(()=>{var o=Ge(),s=o.firstChild,d=s.nextSibling;return d.nextSibling,c(o,()=>r.activeFileObj().type??"binary",d),o})()},get children(){return a(me,{class:"h-full rounded-none border-0",get children(){return a(pe,{get code(){return r.activeFileObj().code??""},get language(){return r.activeFileObj().language}})}})}})}})),t})()}function or(r){const t=()=>{const i=r.url.split(/[?#]/)[0];return i.slice(i.lastIndexOf("/")+1)||"document.pdf"},e=y(()=>{if(r.url){if(ee(r.url))return r.url;E("pdf fallback",r.url)}});return(()=>{var i=Qe(),o=i.firstChild;return o.nextSibling,c(i,a(Oe,{size:40,class:"text-muted-foreground","aria-hidden":"true"}),o),c(o,t),c(i,a(g,{get when(){return e()},get fallback(){return Xe()},get children(){var s=Je(),d=s.firstChild;d.firstChild;var u=d.nextSibling,h=u.firstChild;return c(d,a(re,{size:13,"aria-hidden":"true"}),null),c(u,a(Se,{size:13,"aria-hidden":"true"}),h),z(f=>{var b=e(),w=e();return b!==f.e&&p(d,"href",f.e=b),w!==f.t&&p(u,"href",f.t=w),f},{e:void 0,t:void 0}),s}}),null),i})()}function sr(r){const[t,e]=k("loading");let i,o=0,s;const d=async()=>{if(!i){e("error");return}const u=++o;e("loading");try{const h=i.clientWidth||600;await Be(r.url,i,h),u===o&&e("success")}catch{u===o&&e("error")}};return F(Q(()=>[r.url,r.reloadKey],()=>{d()})),X(()=>{if(!i||typeof ResizeObserver>"u")return;const u=new ResizeObserver(()=>{t()==="success"&&(clearTimeout(s),s=setTimeout(()=>{d()},200))});u.observe(i),be(()=>{u.disconnect(),clearTimeout(s),o++})}),(()=>{var u=Ze(),h=u.firstChild;return Z(f=>i=f,h),c(u,a(g,{get when(){return ge(()=>!0)()&&t()==="loading"},get children(){var f=Ye();return c(f,a(xe,{variant:"circular",size:"md"})),f}}),null),c(u,a(g,{get when(){return t()==="error"},get children(){return a(or,{get url(){return r.url}})}}),null),z(()=>p(h,"aria-busy",t()==="loading")),u})()}ve(["click"]);export{tr as A};

package/dist/check-njkVdZu2.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-DObhsRtm.js";import{c as m,q as r}from"./define-By-uL588.js";var c=[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]],e=a=>m(o,r(a,{name:"Check",iconNode:c})),f=e;export{f as c};

package/dist/chevron-down-B72s6PXR.js

@@ -1 +0,0 @@
-import{I as r}from"./Icon-DObhsRtm.js";import{c as a,q as m}from"./define-By-uL588.js";var e=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],n=o=>a(r,m(o,{name:"ChevronDown",iconNode:e})),p=n;export{p as c};

package/dist/chevron-right-BatuHzUm.js

@@ -1 +0,0 @@
-import{I as a}from"./Icon-DObhsRtm.js";import{c as m,q as r}from"./define-By-uL588.js";var t=[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]],e=o=>m(a,r(o,{name:"ChevronRight",iconNode:t})),h=e;export{h as c};

package/dist/circle-check-B62pODB3.js

@@ -1 +0,0 @@
-import{I as m}from"./Icon-DObhsRtm.js";import{c as r,q as a}from"./define-By-uL588.js";var e=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]],o=c=>r(m,a(c,{name:"CircleCheck",iconNode:e})),i=o;export{i as c};

package/dist/circle-zx0ByzY9.js

@@ -1 +0,0 @@
-import{I as c}from"./Icon-DObhsRtm.js";import{c as o,q as a}from"./define-By-uL588.js";var e=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]],m=r=>o(c,a(r,{name:"Circle",iconNode:e})),i=m;export{i as c};

package/dist/controllable-CnGpMF6r.js

@@ -1 +0,0 @@
-import{g as c}from"./define-By-uL588.js";function i(t,o){const[r,n]=c(o);return[()=>t()??r(),a=>n(a)]}export{i as c};