@heyramzi/ui 6.1.0 → 8.0.0

package/COMPONENTS.md

@@ -21,19 +21,21 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `calendar` — Calendar
 - `card` — Card
 - `checkbox` — Checkbox
+- `code-block` — CodeBlock. Highlight with `useHighlightedCode` from `@heyramzi/ui/shadcn/hooks/use-highlighted-code.svelte` (Shiki, ANSI too)
 - `collapsible` — Collapsible
-- `command` — Command
+- `command` — Command, computeCommandScore (the scorer, for a custom `filter`)
 - `context-menu` — ContextMenu
 - `dialog` — Dialog
 - `dropdown-menu` — CheckboxGroup, CheckboxItem, Content, Portal, DropdownMenu, DropdownMenuCheckboxGroup
 - `empty` — Empty
-- `field` — Field
+- `field` — Field and its parts, plus SimpleField: label, hint or error and the control, with the message linked by `aria-describedby`
 - `hover-card` — HoverCard
 - `input` — Input
 - `input-otp` — InputOtp
 - `label` — Label
 - `marker` — Marker
 - `message` — Message
+- `message-scroller` — MessageScroller, the chat transcript scroller: follows a streamed reply, anchors each turn, keeps place on prepend
 - `popover` — Popover
 - `progress` — Progress
 - `radio-group` — RadioGroup
@@ -53,56 +55,68 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `toggle` — toggleVariants, ToggleSize, ToggleVariant, ToggleVariants
 - `toggle-group` — ToggleGroup
 - `tooltip` — Tooltip
+- `trace` — Trace, an agent's steps: reasoning, tool calls and sources as status rows that can expand
+
+## Components (`src/components`)
+
+Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<name>`.
+
+- `copy` — CopyButton, copyText, copyRichText, htmlToPlainText, Copied
+- `data-table` — SortableHead, Pagination, InfiniteScroll, RowContextMenu, TableSkeleton, and the sort, page and filter helpers
+- `hold-to-confirm` — HoldToConfirm, press and hold to confirm
+- `icon` — Icon, a Phosphor component at a size
+- `language-flag` — LanguageFlag
+- `list-page` — ListPageShell, MasterDetail, GroupedList, RailRow and the rest of the master-detail page kit, NoticeBar, EmptyState, FilterPopover, setSectionHost
+- `locale-switch` — LocaleSwitch, a language switch on SegmentedFilter
+- `mark` — Mark, a logo or photo glyph with an initial fallback
+- `open-in` — OpenIn, a link out to a tool that takes the tool's name, label and mark as a prop
+- `picker` — Picker, MarkPicker, pickerTriggerClass, a command palette at popover scale
+- `segmented` — AnimatedTabs (pill or underline), SegmentedFilter, SegmentedNav, SectionRuns, one bordered track with a sliding pill, a badge note and an overflow menu
+- `star-rating-input` — StarRatingInput
+- `svg` — Svg, an SVG file imported with `?raw`
 
 ## Effects (`src/effects`)
 
+- `interactive-hover-button` — InteractiveHoverButton, a dot that grows into the fill
+
 - `animated-beam` — AnimatedBeam, AnimatedBeamProps, AnchorPosition
 - `border-beam` — BorderBeam
-- `image-comparison` — ImageComparison
+- `image-comparison` — ImageComparison, a before/after wipe with a bindable position, side badges and a hint sweep
 - `image-reveal` — ImageReveal, ImageRevealProps, ImageRevealHandle
 - `magnetic` — magnetic
+- `magic-card` — MagicCard. Props: `glow`, `radius`, `class`, `contentClass`; the glow colour is `--magic-card-glow` set on `class`.
 - `marquee` — Marquee
 - `progressive-blur` — ProgressiveBlur
 - `reveal` — InView, AnimatedGroup, TextEffect, observeInView, RevealPreset, RevealPer
 - `shader-gradient` — ShaderGradient, ShaderGradientProps, ShaderGradientUniforms
 - `spotlight` — Spotlight
-- `theme-toggle` — ThemeToggle, revealTheme. Props: `isDark`, `mode` (`light`, `dark`, `system`; swaps in the Monitor icon), `onToggle`, `variant` (`outline`, `ghost`, `inverted`; `inverted` boolean is an alias), `size`, `label`, `title`, `skipTransition`, `class`. `revealTheme(event, apply, { skip, duration })` is the circular wipe on its own: `import { revealTheme } from "@heyramzi/ui"` (the `./lib/*` subpath points at `.js` and the source is `.ts`).
+- `theme-toggle` — ThemeToggle, revealTheme. Props: `isDark`, `mode` (`light`, `dark`, `system`; swaps in the Monitor icon), `onToggle`, `variant` (`outline`, `ghost`, `inverted`, `slide`; `inverted` boolean is an alias; `slide` is a pill with a moving thumb, coloured by `--theme-toggle-thumb-light`, `--theme-toggle-thumb-dark`, `--theme-toggle-track`, `--theme-toggle-glow` and friends set on `class`), `size`, `label`, `title`, `skipTransition`, `class`. `revealTheme(event, apply, { skip, duration, easing })` is the circular wipe on its own: `import { revealTheme } from "@heyramzi/ui"` (the `./lib/*` subpath points at `.js` and the source is `.ts`).
 
 ## Animations (`src/animations`)
 
-- `accordion` — keyframe utilities
 - `avatar-group-hover` — keyframe utilities
 - `card-tilt` — keyframe utilities
 - `digit-pop-in` — keyframe utilities
 - `dropdown` — keyframe utilities
-- `icon-swap` — keyframe utilities
 - `input-clear-dissolve` — keyframe utilities
 - `input-shake` — keyframe utilities
 - `learn-more-hover` — keyframe utilities
 - `like-button` — keyframe utilities
 - `modal` — keyframe utilities
-- `notification-badge` — keyframe utilities
 - `page-side-by-side` — keyframe utilities
-- `panel` — keyframe utilities
 - `plus-menu-morph` — keyframe utilities
-- `reasoning-stream` — keyframe utilities
 - `resize` — keyframe utilities
 - `shimmer-text` — keyframe utilities
-- `skeleton-reveal` — keyframe utilities
 - `spinning-counter` — keyframe utilities
-- `streaming-text` — keyframe utilities
 - `success-check` — keyframe utilities
-- `tabs-sliding` — keyframe utilities
 - `text-swap` — keyframe utilities
-- `texts-reveal` — keyframe utilities
 - `thinking-states` — keyframe utilities
-- `tooltip` — keyframe utilities
 
 ## AI and chat (`src/ai`)
 
-- `composer` — Composer, ComposerProps
+- `ai-button` — AiButton
 - `confirmation` — Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction
-- `conversation` — Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton
+- `generation-progress` — GenerationProgress
 - `loading-state` — PixelLoader
 - `prompt-input` — PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit
 - `reasoning` — Reasoning, ReasoningTrigger, ReasoningContent
@@ -112,30 +126,8 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `typing-dots` — TypingDots
 - `voice-waveform` — VoiceWaveform
 
-## Charts (`src/charts`)
-
-- `animated-value` — AnimatedValue
-- `area-chart` — AreaChart
-- `bar-chart` — BarChart
-- `crosshair` — Crosshair
-- `donut-chart` — DonutChart
-- `edge-fade` — EdgeFade
-- `figure` — Figure
-- `gauge-chart` — GaugeChart
-- `hover-focus` — HoverFocus
-- `legend` — Legend
-- `line-chart` — LineChart
-- `number-chart` — NumberChart
-- `reveal` — Reveal
-- `ring-chart` — RingChart
-- `sparkline` — Sparkline
-- `stat-card` — StatCard
-- `time-series-chart` — TimeSeriesChart
-- `trend-pill` — TrendPill
-- `primitives` — ChartContainer, ChartTooltip, ChartStyle, ChartConfig, TooltipSeriesItem, getPayloadConfigFromPayload
-
 ---
 
-Skipped on purpose: brand assets (logos, marks, brand renderer, language flags,
-locale switch), kanban and status (they live in `@heyramzi/board`). The bot avatars
+Skipped on purpose: brand assets (logos, marks, brand renderer), kanban, list, gantt and status (they live in `@heyramzi/tasks`), and charts
+(they live in `@heyramzi/charts`). The bot avatars
 are in `src/agents`, imported from `@heyramzi/ui/agents`.

package/README.md

@@ -1,7 +1,7 @@
 # @heyramzi/ui
 
 Svelte 5 UI primitives you copy into your project and own. Components, visual
-effects, CSS animations, charts and a small set of chat and AI surfaces. No build step, no runtime wrapper,
+effects, CSS animations and a small set of chat and AI surfaces. No build step, no runtime wrapper,
 no framework lock-in.
 
 The package is a source registry. Every component is a folder under
@@ -11,13 +11,12 @@ only a convenience.
 ## What is inside
 
 - `src/shadcn` shadcn-svelte primitives, generalized.
+- `src/components` generic pieces on the primitives: segmented control, picker, copy button, data table, list page, hold to confirm and more.
 - `src/effects` animated borders, beams, marquee, spotlight, image reveal,
   image comparison, shimmer gradients and a theme toggle.
 - `src/animations` keyframe CSS for dropdowns, modals, tooltips, text swaps,
   success checks and the rest of the motion vocabulary.
-- `src/ai` chat and AI surfaces: conversation, composer, prompt input, response, reasoning, confirmation and loaders.
-- `src/charts` SVG charts: line, area, bar, donut, ring, gauge, sparkline,
-  time series, and stat cards.
+- `src/ai` chat and AI surfaces: prompt input, response, reasoning, confirmation and loaders.
 - `src/agents` bot avatars and a cast grid, imported from `@heyramzi/ui/agents`:
   `AgentAvatar` draws an eyes-only face from a name, role, shape and colour, and
   `AgentCast` lays a list of agents out as cards you can pick from.
@@ -43,6 +42,13 @@ Retheme by overriding any variable on `:root`, for example
 `--color-brand-indigo` or `--radius-lg`. Dark mode keys off a `.dark`
 class on `html`.
 
+Rich text lives in [`@heyramzi/rich-editor`](https://github.com/heyramzi/ui/tree/main/packages/rich-editor),
+so the kit doesn't pull Tiptap into every app.
+
+Charts live in their own package now,
+[`@heyramzi/charts`](https://github.com/heyramzi/ui/tree/main/packages/charts). It reads
+the same tokens, so import `tokens.css` once and both work.
+
 React and other framework ports are out of scope. The source is Svelte 5
 runes only.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "6.1.0",
+  "version": "8.0.0",
   "description": "Svelte 5 UI primitives: effects, animations, and shared component CSS.",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,16 @@
       "default": "./src/index.ts"
     },
     "./tokens.css": "./src/tokens.css",
-    "./lib/*": "./src/lib/*",
+    "./lib/*.js": {
+      "svelte": "./src/lib/*.ts",
+      "types": "./src/lib/*.ts",
+      "default": "./src/lib/*.ts"
+    },
+    "./lib/*": {
+      "svelte": "./src/lib/*.ts",
+      "types": "./src/lib/*.ts",
+      "default": "./src/lib/*.ts"
+    },
     "./border-beam": {
       "svelte": "./src/effects/border-beam/BorderBeam.svelte",
       "default": "./src/effects/border-beam/BorderBeam.svelte"
@@ -55,6 +64,10 @@
       "svelte": "./src/effects/spotlight/Spotlight.svelte",
       "default": "./src/effects/spotlight/Spotlight.svelte"
     },
+    "./effects/magic-card": {
+      "svelte": "./src/effects/magic-card/MagicCard.svelte",
+      "default": "./src/effects/magic-card/MagicCard.svelte"
+    },
     "./effects/marquee": {
       "svelte": "./src/effects/marquee/Marquee.svelte",
       "default": "./src/effects/marquee/Marquee.svelte"
@@ -78,6 +91,10 @@
       "svelte": "./src/effects/progressive-blur/ProgressiveBlur.svelte",
       "default": "./src/effects/progressive-blur/ProgressiveBlur.svelte"
     },
+    "./effects/interactive-hover-button": {
+      "svelte": "./src/effects/interactive-hover-button/InteractiveHoverButton.svelte",
+      "default": "./src/effects/interactive-hover-button/InteractiveHoverButton.svelte"
+    },
     "./effects/image-comparison": {
       "svelte": "./src/effects/image-comparison/ImageComparison.svelte",
       "default": "./src/effects/image-comparison/ImageComparison.svelte"
@@ -115,31 +132,21 @@
     "./animations/*": {
       "default": "./src/animations/*"
     },
-    "./charts": {
-      "svelte": "./src/charts/index.ts",
-      "types": "./src/charts/index.ts",
-      "default": "./src/charts/index.ts"
-    },
-    "./showcase": {
-      "svelte": "./src/showcase/index.ts",
-      "types": "./src/showcase/index.ts",
-      "default": "./src/showcase/index.ts"
-    },
-    "./showcase/kit": {
-      "svelte": "./src/showcase/kit.ts",
-      "types": "./src/showcase/kit.ts",
-      "default": "./src/showcase/kit.ts"
-    },
-    "./shadcn/hooks/is-mobile.svelte": {
-      "svelte": "./src/shadcn/hooks/is-mobile.svelte.ts",
-      "types": "./src/shadcn/hooks/is-mobile.svelte.ts",
-      "default": "./src/shadcn/hooks/is-mobile.svelte.ts"
+    "./shadcn/hooks/*": {
+      "svelte": "./src/shadcn/hooks/*.ts",
+      "types": "./src/shadcn/hooks/*.ts",
+      "default": "./src/shadcn/hooks/*.ts"
     },
     "./shadcn/*": {
       "svelte": "./src/shadcn/*/index.ts",
       "types": "./src/shadcn/*/index.ts",
       "default": "./src/shadcn/*/index.ts"
     },
+    "./components/*": {
+      "svelte": "./src/components/*/index.ts",
+      "types": "./src/components/*/index.ts",
+      "default": "./src/components/*/index.ts"
+    },
     "./shadcn/utilities.css": {
       "style": "./src/shadcn/utilities.css",
       "default": "./src/shadcn/utilities.css"
@@ -163,21 +170,16 @@
   },
   "dependencies": {
     "@heyramzi/utils": "^1.3.3",
-    "@lucide/svelte": "^1.52.0",
-    "clsx": "^2.1.1",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
-    "layerchart": "^2.5.1",
+    "@shadcn-svelte/primitives": "^0.0.1",
     "marked": "^18.1.0",
     "phosphor-svelte": "^3.1.0",
-    "tailwind-merge": "^3.7.0",
+    "shiki": "^4.5.0",
     "tailwind-variants": "^3.3.1"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.4",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
-    "@types/d3-scale": "^4.0.9",
-    "@types/d3-shape": "^3.2.0",
+    "@types/node": "^26.6.4",
     "bits-ui": "^2.19.5",
     "jsdom": "^30.1.2",
     "mode-watcher": "^1.1.0",

package/scripts/sync-shadcn.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/* Sync shadcn-svelte into src/shadcn and its demos into the showcase, three-way
+/* Sync shadcn-svelte into src/shadcn and its demos into the site, three-way
  * per file against `.upstream/`. The rules and why: ../docs/decisions.md. */
 
 //   pnpm sync:shadcn          fetch, vendor, apply, report
@@ -8,7 +8,7 @@
 import { execFileSync } from "node:child_process";
 import { existsSync, readFileSync, readdirSync } from "node:fs";
 import { fileURLToPath } from "node:url";
-import { basename, dirname, resolve } from "node:path";
+import { basename, dirname, relative, resolve } from "node:path";
 import {
   CHECK,
   classify,
@@ -42,26 +42,30 @@ const ALIASES = [
   ["$UTILS$.js", "@heyramzi/utils"],
   ["$UI$/", "../src/shadcn"],
   ["$HOOKS$/", "../src/shadcn/hooks"],
+  ["$LIB$/", "../src/shadcn/hooks"],
 ];
 
 /* Upstream target path -> ours, where the two differ. Everything else lands at
  * src/shadcn/<target>. */
 const REROUTE = {
   "is-mobile/is-mobile.svelte.ts": "src/shadcn/hooks/is-mobile.svelte.ts",
+  "highlighter/highlighter.ts": "src/shadcn/hooks/highlighter.ts",
+  "use-highlighted-code/use-highlighted-code.svelte.ts":
+    "src/shadcn/hooks/use-highlighted-code.svelte.ts",
 };
 
 const DOCS = "https://raw.githubusercontent.com/huntabyte/shadcn-svelte/main/docs";
 const DEMO_VENDOR = `${PKG}/.upstream/shadcn-demos`;
-const DEMO_LOCAL = `${PKG}/src/showcase/demos/shadcn`;
+const DEMO_LOCAL = `${ROOT}/site/src/lib/shadcn-demos`;
 const DEMO_MANIFEST = `${DEMO_LOCAL}/index.ts`;
 
 /* The docs site's aliases. A demo is a docs file, not a registry payload, so it
  * carries `$lib/...` rather than the registry's `$UI$`. */
 const DEMO_ALIASES = [
-  ["$lib/registry/ui/", "../src/shadcn"],
+  ["$lib/registry/ui/", "@heyramzi/ui/shadcn/"],
   // A handful reach their neighbour by relative path instead of the alias.
-  ["../ui/", "../src/shadcn"],
-  ["$lib/registry/hooks/", "../src/shadcn/hooks"],
+  ["../ui/", "@heyramzi/ui/shadcn/"],
+  ["$lib/registry/hooks/", "@heyramzi/ui/shadcn/hooks/"],
   ["$lib/utils.js", "@heyramzi/utils"],
   // The peer here is the runes build, published under its own name.
   ["@tabler/icons-svelte/", "@tabler/icons-svelte-runes/"],
@@ -90,20 +94,29 @@ const NOT_SHIPPED = new Set([
   // `cn` ships from @heyramzi/utils in vibe-kit, so a copy here would be a stray.
   "utils",
   "questionnaire",
-  // Every app chat runs on our ai/conversation, so a second scroller would be two answers to one job.
-  "message-scroller",
 ]);
 
 /* No demo to take: `hooks`, `is-mobile` and `utils` are not components, and `sidebar` demos as a page block. */
-const NO_DEMO = new Set(["hooks", "is-mobile", "sidebar", "utils"]);
+const NO_DEMO = new Set([
+  "hooks",
+  "is-mobile",
+  "highlighter",
+  "use-highlighted-code",
+  "sidebar",
+  "utils",
+]);
 
 const adapt = (text) => ALIASES.reduce((acc, [from, to]) => acc.replaceAll(from, to), text);
+/* The site imports the kit the way a consumer does, so the exports map names a
+ * primitive without its `/index.js` and a hook without its `.js`. */
 const adaptDemo = (text) =>
-  DEMO_ALIASES.reduce((acc, [from, to]) => acc.replaceAll(from, to), text);
+  DEMO_ALIASES.reduce((acc, [from, to]) => acc.replaceAll(from, to), text)
+    .replace(/(@heyramzi\/ui\/shadcn\/[a-z-]+)\/index\.js/g, "$1")
+    .replace(/(@heyramzi\/ui\/shadcn\/hooks\/[a-z-]+(?:\.svelte)?)\.js/g, "$1");
 const readIf = (path) => (existsSync(path) ? readFileSync(path, "utf8") : null);
 const route = (name, target) => `${PKG}/${REROUTE[`${name}/${target}`] ?? `src/shadcn/${target}`}`;
 /** Report a file by where it lives here, not by its upstream target. */
-const label = (path) => path.slice(PKG.length + 1);
+const label = (path) => (path.startsWith(`${PKG}/`) ? path.slice(PKG.length + 1) : relative(ROOT, path));
 
 const pascal = (name) => name.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCase());
 
@@ -118,10 +131,10 @@ const meta = (doc, name) => {
   return { title: field("title") ?? pascal(name), note: field("description") ?? "" };
 };
 
-/** The demo's own shadcn imports, respelled as a consumer writes them. */
+/** The demo's own shadcn imports, as it spells them for a consumer. */
 const publicImports = (demo) =>
-  [...demo.matchAll(/import[^;]*?from\s+"#src\/shadcn\/([^"]+?)(?:\/index\.js)?";/g)]
-    .map((m) => m[0].replace(/"[^"]+"/, `"@heyramzi/ui/shadcn/${m[1]}"`))
+  [...demo.matchAll(/import[^;]*?from\s+"@heyramzi\/ui\/shadcn\/[^"]+";/g)]
+    .map((m) => m[0])
     .join("\n");
 
 /* The section's list, generated: a primitive reaches the page by being synced,
@@ -136,7 +149,7 @@ async function writeManifest(demos) {
     " * own, and the sync rewrites this list. */",
     'import type { Component } from "svelte";',
     ...demos.map(
-      (d) => `import ${pascal(d.name)}Demo from "../src/showcase/demos/shadcn/${d.name}.svelte";`,
+      (d) => `import ${pascal(d.name)}Demo from "./${d.name}.svelte";`,
     ),
     "",
     "export type ShadcnDemo = {",
@@ -258,7 +271,7 @@ const ours = readdirSync(LOCAL, { withFileTypes: true })
 for (const name of ours) buckets.unported.push(`${name} — in src/shadcn, not in the registry`);
 
 /* The docs site's own demo for each primitive, vendored on the same three-way
- * rule. Upstream writes them; the showcase renders them. */
+ * rule. Upstream writes them; the site renders them. */
 const demoNames = [...Object.keys(entries), ...LOCAL_ONLY]
   .filter((name) => !NO_DEMO.has(name))
   .toSorted();

package/scripts/sync-transitions.mjs

@@ -46,7 +46,7 @@ const SRC = `${PKG}/src`;
  */
 
 /*
- * Most land in src/animations. Five do not, because a component already did the job and one behaviour gets one implementation: the last five entries name where each went instead.
+ * Fourteen of these name the component that owns the motion instead of a file in src/animations.
  */
 
 /*
@@ -55,31 +55,31 @@ const SRC = `${PKG}/src`;
 const PORTED = {
   "card-resize": "animations/resize.css",
   "number-pop-in": "animations/digit-pop-in.css",
-  "notification-badge": "animations/notification-badge.css",
+  "notification-badge": "shadcn/badge/badge.svelte",
   "text-states-swap": "animations/text-swap.css",
   "menu-dropdown": "animations/dropdown.css",
   "modal-open-close": "animations/modal.css",
-  "panel-reveal": "animations/panel.css",
+  "panel-reveal": "shadcn/sheet/sheet-content.svelte",
   "page-side-by-side": "animations/page-side-by-side.css",
-  "icon-swap": "animations/icon-swap.css",
+  "icon-swap": "effects/theme-toggle/ThemeToggle.svelte",
   "success-check": "animations/success-check.css",
   "avatar-group-hover": "animations/avatar-group-hover.css",
   "error-state-shake": "animations/input-shake.css",
   "input-clear-with-dissolve": "animations/input-clear-dissolve.css",
-  "skeleton-loader-and-reveal": "animations/skeleton-reveal.css",
-  "texts-reveal": "animations/texts-reveal.css",
-  "tabs-sliding": "animations/tabs-sliding.css",
+  "skeleton-loader-and-reveal": "shadcn/skeleton/skeleton.svelte",
+  "texts-reveal": "effects/reveal/TextEffect.svelte",
+  "tabs-sliding": "shadcn/tabs/tabs-list.svelte",
   "shimmer-text": "animations/shimmer-text.css",
-  "tooltip-open-close": "animations/tooltip.css",
+  "tooltip-open-close": "shadcn/tooltip/tooltip-content.svelte",
   "3d-tilt": "animations/card-tilt.css",
   "dropdown-menu-morph": "animations/plus-menu-morph.css",
-  accordion: "animations/accordion.css",
+  accordion: "shadcn/accordion/accordion-content.svelte",
   "like-button": "animations/like-button.css",
   "learn-more-hover": "animations/learn-more-hover.css",
   "spinning-counter": "animations/spinning-counter.css",
   "thinking-states": "animations/thinking-states.css",
-  "reasoning-stream": "animations/reasoning-stream.css",
-  "streaming-text": "animations/streaming-text.css",
+  "reasoning-stream": "ai/reasoning/ReasoningContent.svelte",
+  "streaming-text": "effects/reveal/TextEffect.svelte",
   toggle: "shadcn/switch/switch.svelte",
   "checkbox-check": "shadcn/checkbox/checkbox.svelte",
   "toast-open-close": "shadcn/sonner/sonner.svelte",

package/src/ai/ai-button/AiButton.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+	import type { ButtonProps } from "../../shadcn/button/index.js";
+
+	export type AiStatus = "idle" | "processing" | "done";
+
+	export interface AiButtonProps {
+		status?: AiStatus;
+		label?: string;
+		processingLabel?: string;
+		variant?: ButtonProps["variant"];
+		size?: ButtonProps["size"];
+		disabled?: boolean;
+		onclick?: (e: MouseEvent) => void;
+		class?: string;
+		iconOnly?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "@heyramzi/utils";
+	import { Sparkle } from "phosphor-svelte";
+	import { Spinner } from "../../shadcn/spinner/index.js";
+	import { Button } from "../../shadcn/button/index.js";
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		status = "idle",
+		label = "Generate",
+		processingLabel = "Processing...",
+		variant = "outline",
+		size = "sm",
+		disabled = false,
+		onclick,
+		class: className,
+		iconOnly = false,
+	}: AiButtonProps = $props();
+</script>
+
+<!-- ===========================
+     MARKUP
+     =========================== -->
+{#if iconOnly}
+	<Button
+		{variant}
+		size="sm"
+		icon
+		disabled={disabled || status === "processing"}
+		onclick={onclick}
+		class={cn(
+			"relative",
+			status === "processing" && "pointer-events-none",
+			className,
+		)}
+	>
+		{#if status === "processing"}
+			<Spinner class="size-4" />
+		{:else}
+			<Sparkle class="size-4" weight="fill" />
+		{/if}
+	</Button>
+{:else}
+	<Button
+		{variant}
+		{size}
+		disabled={disabled || status === "processing"}
+		onclick={onclick}
+		class={cn(
+			"gap-1.5",
+			status === "processing" && "pointer-events-none",
+			className,
+		)}
+	>
+		{#if status === "processing"}
+			<Spinner class="size-3.5" />
+			<span>{processingLabel}</span>
+		{:else}
+			<Sparkle class="size-3.5" weight="fill" />
+			<span>{label}</span>
+		{/if}
+	</Button>
+{/if}

package/src/ai/ai-button/index.ts

@@ -0,0 +1,4 @@
+import AiButton from "./AiButton.svelte";
+import type { AiButtonProps, AiStatus } from "./AiButton.svelte";
+
+export { AiButton, type AiButtonProps, type AiStatus };

package/src/ai/confirmation/Confirmation.svelte

@@ -23,15 +23,15 @@
 		...rest
 	}: ConfirmationProps = $props();
 
-	// WHY: setContext runs once on mount but the value is referenced reactively via the proxy Svelte sets up on objects passed to setContext.
-
-	// State changes rerun any $derived in child components.
-	const ctx = $state({ kind, executing });
-	$effect(() => {
-		ctx.kind = kind;
-		ctx.executing = executing;
+	// WHY getters: setContext runs once on mount, so the parts read the props through these and rerun their $derived when a prop changes.
+	setConfirmationContext({
+		get kind() {
+			return kind;
+		},
+		get executing() {
+			return executing;
+		},
 	});
-	setConfirmationContext(ctx);
 </script>
 
 {#if kind !== "idle"}

package/src/ai/confirmation/confirmation-context.svelte.ts

@@ -5,8 +5,8 @@ const CONFIRMATION_CONTEXT_KEY = Symbol("confirmation-context");
 export type ConfirmationState = "idle" | "requested" | "accepted" | "rejected" | "failed";
 
 export interface ConfirmationContextValue {
-  kind: ConfirmationState;
-  executing: boolean;
+  readonly kind: ConfirmationState;
+  readonly executing: boolean;
 }
 
 export function setConfirmationContext(value: ConfirmationContextValue) {