@heyramzi/ui 6.0.1 → 7.0.0

package/COMPONENTS.md

@@ -21,6 +21,7 @@ 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
 - `context-menu` — ContextMenu
@@ -34,6 +35,7 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `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,6 +55,7 @@ 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
 
 ## Effects (`src/effects`)
 
@@ -66,7 +69,7 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `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`; `inverted` boolean is an alias), `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`)
 
@@ -102,7 +105,6 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 
 - `composer` — Composer, ComposerProps
 - `confirmation` — Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction
-- `conversation` — Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton
 - `loading-state` — PixelLoader
 - `prompt-input` — PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit
 - `reasoning` — Reasoning, ReasoningTrigger, ReasoningContent
@@ -112,30 +114,9 @@ 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), the bot avatars (they live in `@heyramzi/agents`), kanban and status
-(they live in `@heyramzi/board`).
+locale switch), 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
@@ -15,9 +15,10 @@ only a convenience.
   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: composer, 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.
 
 See [COMPONENTS.md](./COMPONENTS.md) for the full list, one line each.
 
@@ -40,6 +41,10 @@ Retheme by overriding any variable on `:root`, for example
 `--color-brand-indigo` or `--radius-lg`. Dark mode keys off a `.dark`
 class on `html`.
 
+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.
 
@@ -119,7 +124,9 @@ there, use its page for props and examples:
 Inspired by [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte).
 The reveal, marquee and beam effects are inspired by
 [motion-primitives](https://github.com/ibelick/motion-primitives), and the
-motion vocabulary by [transitions-dev](https://transitions.dev).
+motion vocabulary by [transitions-dev](https://transitions.dev). The agent avatars
+vendor [bot-avatars](https://github.com/jakubantalik/bot-avatars); its licence is in
+`src/agents/vendor/LICENSE`.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "Svelte 5 UI primitives: effects, animations, and shared component CSS.",
   "license": "MIT",
   "repository": {
@@ -115,11 +115,6 @@
     "./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",
@@ -130,10 +125,10 @@
       "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",
@@ -153,25 +148,28 @@
       "svelte": "./src/ai/*/index.ts",
       "types": "./src/ai/*/index.ts",
       "default": "./src/ai/*/index.ts"
-    }
+    },
+    "./agents": {
+      "svelte": "./src/agents/index.ts",
+      "types": "./src/agents/index.ts",
+      "default": "./src/agents/index.ts"
+    },
+    "./agents/demo.svelte": "./src/agents/demo.svelte"
   },
   "dependencies": {
     "@heyramzi/utils": "^1.3.3",
     "@lucide/svelte": "^1.52.0",
+    "@shadcn-svelte/primitives": "^0.0.1",
     "clsx": "^2.1.1",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
-    "layerchart": "^2.5.1",
     "marked": "^18.1.0",
     "phosphor-svelte": "^3.1.0",
+    "shiki": "^4.5.0",
     "tailwind-merge": "^3.7.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",
     "bits-ui": "^2.19.5",
     "jsdom": "^30.1.2",
     "mode-watcher": "^1.1.0",

package/scripts/sync-shadcn.mjs

@@ -42,12 +42,16 @@ 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";
@@ -90,12 +94,17 @@ 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);
 const adaptDemo = (text) =>