@heyramzi/ui 0.0.0-stage → 1.53.0

package/src/shadcn/card/card-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

package/src/shadcn/card/card-footer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn(
+		"rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/card/card-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/card/card-title.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	// WHY: card titles render as a div by default for backwards compatibility,
+
+	// but a page whose sections are all cards ends up with no headings below the h1, so screen readers cannot navigate it by heading (WCAG 2.4.6).
+
+	// Pass `as="h2"` on real section titles.
+	let {
+		ref = $bindable(null),
+		class: className,
+		as = "div",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		as?: "div" | "h2" | "h3" | "h4" | "h5" | "h6";
+	} = $props();
+</script>
+
+<svelte:element
+	this={as}
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

package/src/shadcn/card/card.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	data-size={size}
+	class={cn(
+		"ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-card ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/card/index.ts

@@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+  Root,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  Action,
+  //
+  Root as Card,
+  Content as CardContent,
+  Description as CardDescription,
+  Footer as CardFooter,
+  Header as CardHeader,
+  Title as CardTitle,
+  Action as CardAction,
+};

package/src/shadcn/checkbox/checkbox.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import { Check, Minus } from "phosphor-svelte";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-sm border shadow-btn transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 any-pointer-coarse:after:-inset-y-3.5 any-pointer-coarse:after:-inset-3 disabled:cursor-not-allowed disabled:opacity-50",
+		className,
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div
+			data-slot="checkbox-indicator"
+			class="[&>svg]:size-3.5 grid place-content-center text-current"
+		>
+			{#if checked}
+				<Check size={14} />
+			{:else if indeterminate}
+				<Minus size={14} />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

package/src/shadcn/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+  Root,
+  //
+  Root as Checkbox,
+};

package/src/shadcn/code-block/code-block-actions.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="code-block-actions"
+	class={cn(
+		"-my-1 -me-1.5 gap-1 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:top-3 [[data-slot=code-block]>&]:end-3 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-2 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10 ms-auto flex shrink-0 items-center [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 [[data-slot=code-block]>&]:pointer-coarse:opacity-100",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/code-block/code-block-content.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import CodeBlockLine from "./code-block-line.svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		style,
+		code,
+		wrap = false,
+		lineNumbers = false,
+		startLine = 1,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLPreElement>> & {
+		/** Plain text to render. Split into lines when `lineNumbers` is set. */
+		code?: string;
+		wrap?: boolean;
+		lineNumbers?: boolean;
+		startLine?: number;
+	} = $props();
+
+	// A `code` string is split into lines so each one can be numbered.
+	const lines = $derived(
+		code !== undefined && lineNumbers ? code.replace(/\n$/, "").split("\n") : null
+	);
+</script>
+
+{#snippet content()}
+	<code
+		data-slot="code-block-code"class=" grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0">
+		{#if lines}
+			{#each lines as line, index (index)}
+				<CodeBlockLine code={line} />
+			{/each}
+		{:else if code !== undefined}
+			{code}
+		{:else}
+			{@render children?.()}
+		{/if}
+	</code>
+{/snippet}
+
+<!-- Whitespace inside a <pre> is rendered, so its content is a snippet defined outside it, where Svelte trims whitespace as usual. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<pre
+	bind:this={ref}
+	data-slot="code-block-content"data-wrap={wrap || undefined}
+	data-numbered={lineNumbers || undefined}
+	dir="ltr"tabindex={0}
+	style="counter-reset: line {startLine - 1};{style ?? ''}"class={cn("px-4 py-4 leading-relaxed group-has-data-[slot=code-block-header]/code-block:pt-2 group-has-data-[slot=code-block-footer]/code-block:pb-2 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:py-3 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto text-start font-mono outline-none data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap",
+		className
+	)}
+	{...restProps}>{@render content()}</pre>

package/src/shadcn/code-block/code-block-copy-button.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import CopyButton from "../../components/copy/copy-button.svelte";
+
+	// WHY this wraps the shared control: the code block's own copy button drew a
+	// second icon swap and a second clipboard write. `md` is the 28px icon Button.
+	let { size = "md", ...restProps }: ComponentProps<typeof CopyButton> = $props();
+</script>
+
+<CopyButton data-slot="code-block-copy-button" {size} {...restProps} />

package/src/shadcn/code-block/code-block-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="code-block-footer"
+	class={cn("gap-2 px-4 pb-4 text-muted-foreground group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pb-3 flex min-w-0 shrink-0 items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/code-block/code-block-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="code-block-header"
+	class={cn(
+		"gap-2 px-4 pt-4 text-muted-foreground group-data-[variant=destructive]/code-block:text-destructive group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pt-3 flex min-w-0 shrink-0 items-center *:has-[>[data-slot=code-block-title]]:min-w-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/code-block/code-block-line.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const codeBlockLineVariants = tv({
+		base: "-mx-4 px-4 in-data-numbered:gap-x-3 before:min-w-6 before:text-end before:text-muted-foreground after:start-1 after:text-muted-foreground group-data-[size=sm]/code-block:-mx-3 group-data-[size=sm]/code-block:px-3 relative block min-h-lh after:absolute after:top-0 after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']",
+		variants: {
+			variant: {
+				default: "",
+				added: "bg-muted after:content-['+']",
+				removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+				highlighted: "bg-muted",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type CodeBlockLineVariant = VariantProps<typeof codeBlockLineVariants>["variant"];
+
+	// One highlighted token, such as one returned by `useHighlightedCode`.
+	export type CodeBlockLineToken = {
+		content: string;
+		style?: string;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		code,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+		variant?: CodeBlockLineVariant;
+		/** The line as plain text, or as highlighted tokens. When it is set, `children` is ignored. */
+		code?: string | CodeBlockLineToken[];
+	} = $props();
+
+	const newline = "\n";
+</script>
+
+<!-- An empty line holds a newline so copying a selection keeps blank lines. -->
+<span
+	bind:this={ref}
+	data-slot="code-block-line"data-variant={variant}
+	class={cn(codeBlockLineVariants({ variant }), className)}
+	{...restProps}
+>
+	<span data-slot="code-block-line-content"class="min-w-0">
+		{#if typeof code ==="string"}
+			{code || newline}
+		{:else if code?.length}
+			{#each code as token, index (index)}
+				<span style={token.style} class={token.class}>{token.content}</span>
+			{/each}
+		{:else if code}
+			{newline}
+		{:else if children}
+			{@render children()}
+		{:else}
+			{newline}
+		{/if}
+	</span>
+</span>

package/src/shadcn/code-block/code-block-title.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="code-block-title"
+	class={cn(
+		"font-sans text-sm font-medium text-foreground group-data-[variant=destructive]/code-block:text-destructive *:[svg]:me-1.5 [&_svg:not([class*='size-'])]:size-4 group-data-[size=sm]/code-block:text-xs group-data-[size=sm]/code-block:[&_svg:not([class*='size-'])]:size-3.5 min-w-0 truncate [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/code-block/code-block.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const codeBlockVariants = tv({
+		base: "rounded-lg text-sm data-[size=sm]:text-xs has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 group/code-block relative flex w-full min-w-0 flex-col overflow-hidden",
+		variants: {
+			variant: {
+				default: "border border-input text-foreground dark:bg-input/30 has-[>[data-slot=code-block-content]:focus-visible]:border-ring",
+				destructive: "border border-destructive/30 text-destructive dark:border-destructive/40",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type CodeBlockVariant = VariantProps<typeof codeBlockVariants>["variant"];
+	export type CodeBlockSize = "default" | "sm";
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		size = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: CodeBlockVariant;
+		size?: CodeBlockSize;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="code-block"
+	data-variant={variant}
+	data-size={size}
+	class={cn(codeBlockVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/code-block/index.ts

@@ -0,0 +1,42 @@
+import Actions from "./code-block-actions.svelte";
+import Content from "./code-block-content.svelte";
+import CopyButton from "./code-block-copy-button.svelte";
+import Footer from "./code-block-footer.svelte";
+import Header from "./code-block-header.svelte";
+import Title from "./code-block-title.svelte";
+import Line, {
+  codeBlockLineVariants,
+  type CodeBlockLineToken,
+  type CodeBlockLineVariant,
+} from "./code-block-line.svelte";
+import Root, {
+  codeBlockVariants,
+  type CodeBlockSize,
+  type CodeBlockVariant,
+} from "./code-block.svelte";
+
+export {
+  Root,
+  Header,
+  Title,
+  Actions,
+  CopyButton,
+  Content,
+  Line,
+  Footer,
+  codeBlockVariants,
+  codeBlockLineVariants,
+  type CodeBlockVariant,
+  type CodeBlockSize,
+  type CodeBlockLineVariant,
+  type CodeBlockLineToken,
+  //
+  Root as CodeBlock,
+  Header as CodeBlockHeader,
+  Title as CodeBlockTitle,
+  Actions as CodeBlockActions,
+  CopyButton as CodeBlockCopyButton,
+  Content as CodeBlockContent,
+  Line as CodeBlockLine,
+  Footer as CodeBlockFooter,
+};

package/src/shadcn/collapsible/collapsible-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

package/src/shadcn/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />

package/src/shadcn/collapsible/collapsible.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

package/src/shadcn/collapsible/index.ts

@@ -0,0 +1,13 @@
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
+
+export {
+  Root,
+  Content,
+  Trigger,
+  //
+  Root as Collapsible,
+  Content as CollapsibleContent,
+  Trigger as CollapsibleTrigger,
+};

package/src/shadcn/command/command-dialog.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import Command from "./command.svelte";
+	import * as Dialog from "../dialog/index.js";
+	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run...",
+		showCloseButton = false,
+		portalProps,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content
+		class={cn(
+			// WHY: search is the one dialog that must sit above the keyboard rather
+
+			// than under it, so it stays top-anchored on phones instead of taking the shared bottom-sheet position, and hugs the safe area at the top.
+			"rounded-xl! top-[max(0.5rem,env(safe-area-inset-top))] right-2 bottom-auto left-2 w-auto max-h-[70svh] translate-y-0 gap-0 overflow-hidden p-0 sm:p-0",
+			// WHY no border and no card background here: the palette is a floating
+
+			// object, so its edge is a lit rim and a cast shadow rather than a drawn line, and the surface itself belongs to the Command root beneath so its translucency
+
+			// can read the dimmed page through it.
+			"border-0 bg-transparent ring-1 ring-foreground/15 shadow-overlay",
+			// WHY a third of the way down rather than centred: the eye is already at
+
+			// the top of the screen when the shortcut is pressed, and a list that grows downward should not push its first row past the fold.
+			"sm:top-[14vh] sm:right-auto sm:left-1/2 sm:w-full sm:max-h-[min(32rem,72svh)] sm:max-w-[640px] sm:translate-y-0",
+			className,
+		)}
+		data-command-dialog="true"
+		overlayClass="t-instant"
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command
+			{...restProps}
+			bind:value
+			bind:ref
+			class="bg-popover supports-backdrop-filter:bg-popover/94 supports-backdrop-filter:backdrop-blur-2xl"
+			{children}
+		/>
+	</Dialog.Content>
+</Dialog.Root>

package/src/shadcn/command/command-empty.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn("py-6 text-center text-sm", className)}
+	{...restProps}
+/>