@heyramzi/ui 1.54.0 → 1.54.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "1.54.0",
+  "version": "1.54.2",
   "description": "Svelte 5 UI primitives: effects, animations, and shared component CSS.",
   "license": "MIT",
   "repository": {
@@ -169,11 +169,12 @@
     "./agents/demo.svelte": "./src/agents/demo.svelte"
   },
   "dependencies": {
-    "@heyramzi/utils": "^1.8.1",
     "@shadcn-svelte/primitives": "^0.0.1",
+    "clsx": "^2.1.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": {

package/scripts/sync-shadcn.mjs

@@ -39,7 +39,7 @@ const LOCAL_ONLY = new Set(["hooks"]);
 /* The registry's aliases, resolved to what this package imports. Absolute
  * `#src/` form, so a nested target resolves without counting `../`. */
 const ALIASES = [
-  ["$UTILS$.js", "@heyramzi/utils"],
+  ["$UTILS$.js", "../src/lib/utils.js"],
   ["$UI$/", "../src/shadcn"],
   ["$HOOKS$/", "../src/shadcn/hooks"],
   ["$LIB$/", "../src/shadcn/hooks"],
@@ -91,7 +91,7 @@ const NOT_SHIPPED = new Set([
   "resizable",
   // Its `pascalToKebab` has no importer, in the registry or here.
   "casing",
-  // `cn` ships from @heyramzi/utils in vibe-kit, so a copy here would be a stray.
+  // The registry's `utils` is ours: src/lib/utils.ts, so a sync never overwrites it.
   "utils",
   "questionnaire",
 ]);

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

@@ -20,7 +20,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { Sparkle } from "phosphor-svelte";
 	import { Spinner } from "../../shadcn/spinner/index.js";
 	import { Button } from "../../shadcn/button/index.js";

package/src/ai/confirmation/Confirmation.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { setConfirmationContext } from "./confirmation-context.svelte.js";
 
 	let {

package/src/ai/confirmation/ConfirmationAction.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
 	import { getConfirmationContext } from "./confirmation-context.svelte.js";
 

package/src/ai/confirmation/ConfirmationActions.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { getConfirmationContext } from "./confirmation-context.svelte.js";
 
 	let { class: className, children, ...rest }: ConfirmationActionsProps = $props();

package/src/ai/confirmation/ConfirmationTitle.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let { class: className, children, ...rest }: ConfirmationTitleProps = $props();
 </script>

package/src/ai/generation-progress/GenerationProgress.svelte

@@ -19,7 +19,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	// =========================
 	// PROPS

package/src/ai/loading-state/PixelLoader.svelte

@@ -14,7 +14,7 @@
 
 <script lang="ts">
 	import { untrack } from "svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		label = "Working",

package/src/ai/prompt-input/PromptInput.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { fade } from "svelte/transition";
 
 	let {

package/src/ai/prompt-input/PromptInputBody.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let { class: className, children, ...rest }: PromptInputBodyProps = $props();
 </script>

package/src/ai/prompt-input/PromptInputSubmit.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
 	import { Spinner } from "../../shadcn/spinner/index.js";
 	import SendIcon from "phosphor-svelte/lib/PaperPlaneRight";

package/src/ai/prompt-input/PromptInputTextarea.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		class: className,

package/src/ai/prompt-input/PromptInputToolbar.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let { class: className, children, ...rest }: PromptInputToolbarProps = $props();
 </script>

package/src/ai/reasoning/Reasoning.svelte

@@ -11,7 +11,7 @@
 
 <script lang="ts">
 	import { untrack } from "svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { Collapsible } from "../../shadcn/collapsible/index.js";
 	import { setReasoningContext } from "./reasoning-context.svelte.js";
 

package/src/ai/reasoning/ReasoningContent.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { CollapsibleContent } from "../../shadcn/collapsible/index.js";
 
 	let { class: className, children, ...rest }: ReasoningContentProps = $props();

package/src/ai/reasoning/ReasoningTrigger.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import BrainIcon from "phosphor-svelte/lib/Brain";
 	import ChevronDownIcon from "phosphor-svelte/lib/CaretDown";
 	import { CollapsibleTrigger } from "../../shadcn/collapsible/index.js";

package/src/ai/response/Response.svelte

@@ -81,7 +81,7 @@
 	// =========================
 
 	import "./Response.css";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	// =========================
 	// PROPS

package/src/ai/suggestion/Suggestion.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		suggestion,

package/src/ai/suggestion/Suggestions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 

package/src/ai/thinking-dots/ThinkingDots.svelte

@@ -3,7 +3,7 @@
 	// IMPORTS
 	// =========================
 
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import TypingDots from "../typing-dots/TypingDots.svelte";
 

package/src/ai/typing-dots/TypingDots.svelte

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 	import "./TypingDots.css";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let { size = 4, class: className, ...rest }: TypingDotsProps = $props();
 </script>

package/src/ai/voice-waveform/VoiceWaveform.svelte

@@ -4,7 +4,7 @@
 	// =========================
 
 	import "./VoiceWaveform.css";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	// =========================

package/src/components/copy/clipboard.ts

@@ -1,5 +1,3 @@
-import { tryCatchAsync } from "@heyramzi/utils";
-
 /**
  * The one write to the clipboard. A rejected permission, a missing gesture and
  * an insecure origin get one answer: false. The caller decides what to show.
@@ -7,8 +5,12 @@ import { tryCatchAsync } from "@heyramzi/utils";
 
 /** Plain text. Returns false when the browser refused the write. */
 export async function copyText(value: string): Promise<boolean> {
-  const result = await tryCatchAsync(() => navigator.clipboard.writeText(value));
-  return result.ok;
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 /**
@@ -17,15 +19,17 @@ export async function copyText(value: string): Promise<boolean> {
  */
 export async function copyRichText(html: string, plainText?: string): Promise<boolean> {
   const text = plainText ?? htmlToPlainText(html);
-  const result = await tryCatchAsync(() =>
-    navigator.clipboard.write([
+  try {
+    await navigator.clipboard.write([
       new ClipboardItem({
         "text/html": new Blob([html], { type: "text/html" }),
         "text/plain": new Blob([text], { type: "text/plain" }),
       }),
-    ]),
-  );
-  return result.ok ? true : copyText(text);
+    ]);
+    return true;
+  } catch {
+    return copyText(text);
+  }
 }
 
 /** The plain-text twin of an HTML fragment. */

package/src/components/copy/copy-button.svelte

@@ -8,7 +8,7 @@
 // IMPORTS
 // =========================
 import { Check, Copy, StarFour } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { buttonVariants } from "../../shadcn/button/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import { copyText } from "./clipboard.js";

package/src/components/data-table/row-arrow.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import { CaretRight } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/data-table/sortable-head.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T">
 import type { Snippet } from "svelte";
 import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import type { SortDirection, SortState } from "./data-table.js";
 
 // ========================= TYPES

package/src/components/field-row/field-row.svelte

@@ -3,7 +3,7 @@
 	// IMPORTS
 	// =========================
 	import type { Snippet } from "svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import * as Field from "../../shadcn/field/index.js";
 
 	// =========================
@@ -32,6 +32,8 @@
 <!-- MARKUP -->
 <!-- WHY a measure of its own: a settings card fills the page, but a text field
      stretched over 1200px is hard to read and to aim at. 36rem, left aligned. -->
+<!-- WHY the coarse-pointer height: Button grows to 44px on touch and Input
+     does not, so a row built from the two drew a 12px step. -->
 <!-- =========================== -->
 <Field.Simple
 	{label}
@@ -41,7 +43,7 @@
 	class={cn("max-w-xl", className)}
 >
 	<div
-		class="flex items-start gap-2"
+		class="flex items-start gap-2 any-pointer-coarse:[&_[data-slot=input]]:h-11"
 		data-slot="field-row"
 	>
 		<div class="min-w-0 flex-1">{@render children()}</div>

package/src/components/hold-to-confirm/hold-to-confirm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// ========================= IMPORTS
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { buttonVariants, type ButtonSize, type ButtonVariant } from "../../shadcn/button/index.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";

package/src/components/language-flag/language-flag.svelte

@@ -2,7 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	// =========================
 	// CONSTANTS

package/src/components/list-page/detail-empty.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import EmptyState from "./empty-state.svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
 // =========================

package/src/components/list-page/detail-header.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/detail-panel.svelte

@@ -4,7 +4,7 @@
 // =========================
 import type { Snippet } from "svelte";
 import SectionLabel from "./section-label.svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
 

package/src/components/list-page/detail-row.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/detail-stack.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/filter-item.svelte

@@ -5,7 +5,7 @@
 import type { Snippet } from "svelte";
 import { Checkbox } from "../../shadcn/checkbox/index.js";
 import { Check } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/filter-popover.svelte

@@ -5,7 +5,7 @@
 import type { Snippet } from "svelte";
 import * as Popover from "../../shadcn/popover/index.js";
 import { Funnel as FunnelIcon } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { Button } from "../../shadcn/button/index.js";
 import { toolbarTriggerClass } from "./toolbar-trigger.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";

package/src/components/list-page/filter-section.ts

@@ -1,4 +1,4 @@
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // The header for each control group in a toolbar popover, in one place so
 // sections can't drift in size or weight.

package/src/components/list-page/grouped-list.svelte

@@ -5,7 +5,7 @@
 	import { untrack, type Snippet } from "svelte";
 	import { SvelteSet } from "svelte/reactivity";
 	import { CaretDown } from "phosphor-svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	// =========================
 	// TYPES

package/src/components/list-page/list-page-shell.svelte

@@ -4,7 +4,7 @@
 	// =========================
 	import type { Snippet } from "svelte";
 	import EmptyState from "./empty-state.svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { pageGutterClass } from "../../lib/layout.js";
 	import { getSectionHost } from "./section-host.js";
 	import SectionRuns from "../segmented/section-runs.svelte";

package/src/components/list-page/list-table.ts

@@ -1,4 +1,4 @@
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 /**
  * The list-page table rhythm, Attio's: one 40px row, a hairline under each, a flat hover.

package/src/components/list-page/master-detail.svelte

@@ -5,7 +5,7 @@
 import type { Snippet } from "svelte";
 import { setContext } from "svelte";
 import { CaretLeft } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { Button } from "../../shadcn/button/index.js";
 import { MASTER_DETAIL_PANE, type MasterDetailPane } from "./queue-rail.js";
 

package/src/components/list-page/notice-bar.svelte

@@ -4,7 +4,7 @@
 // =========================
 import type { Snippet } from "svelte";
 import { Warning, Info, CheckCircle, WarningCircle } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { Alert } from "../../shadcn/alert/index.js";
 import { TONE_CLASS, type Tone as SeverityTone } from "../../lib/tone.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";

package/src/components/list-page/prev-next.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import { CaretLeft, CaretRight } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { Button } from "../../shadcn/button/index.js";
 import { stepTo } from "./step.js";
 

package/src/components/list-page/rail-body.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/rail-empty.svelte

@@ -2,7 +2,7 @@
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import * as Empty from "../../shadcn/empty/index.js";
 import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 

package/src/components/list-page/rail-head.svelte

@@ -4,7 +4,7 @@
 // =========================
 import type { Snippet } from "svelte";
 import SectionLabel from "./section-label.svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/rail-row.svelte

@@ -4,7 +4,7 @@
 // =========================
 import type { Snippet } from "svelte";
 import { getContext } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { MASTER_DETAIL_PANE, type MasterDetailPane } from "./queue-rail.js";
 
 // =========================

package/src/components/list-page/section-label.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
 
 // =========================

package/src/components/list-page/toolbar-search.svelte

@@ -4,7 +4,7 @@
 // =========================
 import { Input } from "../../shadcn/input/index.js";
 import { MagnifyingGlass } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/toolbar-trigger.ts

@@ -1,4 +1,4 @@
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 type ToolbarTriggerOpts = {
   active?: boolean;

package/src/components/mark/mark.svelte

@@ -2,7 +2,7 @@
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/open-in/open-in.svelte

@@ -24,7 +24,7 @@
 // IMPORTS
 // =========================
 import { ArrowSquareOut } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { buttonVariants } from "../../shadcn/button/index.js";
 
 // =========================

package/src/components/picker/mark-picker.svelte

@@ -4,7 +4,7 @@
 // =========================
 import { CaretDown } from "phosphor-svelte";
 import { Mark } from "../mark/index.js";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import Picker from "./picker.svelte";
 import { pickerTriggerClass } from "./trigger.js";
 import type { PickerOption } from "./types.js";

package/src/components/picker/picker.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from "svelte";
 	import * as Command from "../../shadcn/command/index.js";
 	import * as Popover from "../../shadcn/popover/index.js";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import type { PickerGroup, PickerOption } from "./types.js";
 
 	/**