@heyramzi/ui 0.0.0-stage → 6.0.1

package/src/showcase/ShowcaseStage.svelte

@@ -0,0 +1,342 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ShowcaseStageProps {
+		/** Component name, e.g. "Dialog". */
+		title: string;
+		/** One line on what this demo shows. Not a description of the component. */
+		note?: string;
+		/** Import line for the copy control. Omitted when the demo covers several. */
+		importPath?: string;
+		/** Give a demo that needs room a taller ground, e.g. a table or a chart. */
+		wide?: boolean;
+		/** Provenance beside the name, e.g. "shadcn" on a primitive the kit took as is. */
+		tag?: string;
+		/** Replay control for a demo that animates once. Without it, no button. */
+		onaction?: () => void;
+		actionLabel?: string;
+		children: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import ShowcaseImport from "./ShowcaseImport.svelte";
+	import "./showcase-shell.css";
+
+	let {
+		title,
+		note,
+		importPath,
+		wide = false,
+		tag,
+		onaction,
+		actionLabel = "Replay",
+		children,
+	}: ShowcaseStageProps = $props();
+</script>
+
+<article class={cn("sc-stage", wide && "sc-stage-tall")}>
+	<header>
+		<div class="sc-stage-name">
+			<h3>
+				{title}
+				{#if tag}
+					<span class="sc-tag">{tag}</span>
+				{/if}
+			</h3>
+			{#if note}
+				<p>{note}</p>
+			{/if}
+		</div>
+
+		<!-- The controls sit on the header line rather than under the ground: a footer under every stage put a second full-width row between each demo -->
+		<!-- and the next, and the page reads as demos, not as rows of chrome. In a narrow stage they drop to a line of their own, because a nowrap import -->
+		<!-- path on the same line left the title nothing to occupy. -->
+		<div class="sc-stage-tools">
+			{#if onaction}
+				<button type="button" class="sc-stage-replay" onclick={onaction}>{actionLabel}</button>
+			{/if}
+			{#if importPath}
+				<ShowcaseImport path={importPath} label={title} />
+			{/if}
+		</div>
+	</header>
+
+	<!-- The ground is a canvas, not a card: it is what makes a white-on-white or
+       fully transparent component visible on the surface it sits on. -->
+	<div class="sc-ground">
+		{@render children()}
+	</div>
+</article>
+
+<style>
+	.sc-stage {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		padding-block: 1.5rem;
+		counter-increment: sc-stage;
+	}
+
+	/*
+	 * The stage answers its own width, not the viewport's: the same component serves a full-width stack and a four-column kit grid on one page. The header
+	 */
+
+	/*
+	 * carries the container rather than the stage, because an element with `container-type` cannot also be a subgrid, and the kit grids need the stage
+	 */
+
+	/*
+	 * to be one so every card in a band shares its tracks. The header is exactly as wide as the stage, so it measures the same thing.
+	 */
+
+	/*
+	 * One explicit row, and an implicit second that takes the rest. In a wide stage
+	 */
+
+	/*
+	 * the tools sit in row one, no second track exists and no row gap with it.
+	 */
+	.sc-stage header {
+		container-type: inline-size;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+		grid-template-rows: auto;
+		grid-auto-rows: 1fr;
+		align-items: start;
+		gap: 0.5rem 1rem;
+		padding-bottom: 0.875rem;
+	}
+
+	.sc-stage-name {
+		grid-column: 1;
+		grid-row: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 0.1875rem;
+		min-width: 0;
+	}
+
+	/*
+	 * The number is a counter on the stage, so the page never carries an index it has to keep in step with the demos. `decimal-leading-zero` is what makes a
+	 */
+
+	/*
+	 * run of these read as a set rather than as a list.
+	 */
+	h3 {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		margin: 0;
+		font-size: 0.875rem;
+		font-weight: 600;
+		line-height: 1.3;
+		letter-spacing: -0.006em;
+		color: var(--color-foreground, var(--foreground));
+	}
+
+	h3::before {
+		content: counter(sc-stage, decimal-leading-zero);
+		font-size: 0.6875rem;
+		font-weight: 500;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-muted-foreground, var(--muted-foreground));
+		opacity: 0.65;
+	}
+
+	.sc-stage-name p {
+		margin: 0;
+		max-width: 64ch;
+		padding-inline-start: 1.5rem;
+		font-size: 0.75rem;
+		line-height: 1.5;
+		color: var(--color-muted-foreground, var(--muted-foreground));
+		text-wrap: pretty;
+	}
+
+	/*
+	 * The import path is the reason most people open this page, so the control is on screen rather than waiting for a pointer that a touch device never sends.
+	 */
+
+	/*
+	 * It shrinks and truncates instead of pushing the title out of the header: a nowrap path at flex-shrink 0 measured 435px inside a 310px column and left
+	 */
+
+	/*
+	 * the title at zero.
+	 */
+	.sc-stage-tools {
+		grid-column: 2;
+		grid-row: 1;
+		justify-self: end;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 0.25rem;
+		min-width: 0;
+		/*
+		 * A length, not a percentage: a percentage max-width resolves to nothing while the auto column is being sized, which collapsed a 900px header's
+		 */
+
+		/*
+		 * path chip to one word. This still leaves the title two thirds of a full-width header.
+		 */
+		max-width: 24rem;
+	}
+
+	/*
+	 * Below this the header cannot hold a title and a path side by side, so the
+	 */
+
+	/*
+	 * tools take a line of their own and the path gets the full column. 26rem and not 30rem: two equal columns of a 60rem section measure 29.5rem each, and at
+	 */
+
+	/*
+	 * 30rem every card in the AI and charts grids spent a whole row on a copy control that fits beside the title.
+	 */
+	@container (max-width: 26rem) {
+		.sc-stage-name {
+			grid-column: 1 / -1;
+		}
+
+		.sc-stage-tools {
+			grid-column: 1 / -1;
+			grid-row: 2;
+			justify-self: stretch;
+			justify-content: flex-start;
+			max-width: 100%;
+			/*
+			 * The kit grids stretch the header to a shared track, so sitting the tools at its foot puts every copy control on one line across the band instead
+			 */
+
+			/*
+			 * of trailing whatever note happens to sit above it.
+			 */
+			align-self: end;
+		}
+	}
+
+	.sc-ground {
+		flex: 1 1 auto;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		align-content: center;
+		justify-content: center;
+		gap: 0.75rem;
+		/*
+		 * Tall enough that a component is not squeezed, short enough that a row of five buttons does not float in an acre of nothing. A demo that needs more
+		 */
+
+		/*
+		 * asks for it with `wide`.
+		 */
+		min-height: 10.5rem;
+		padding: 2rem 1.75rem;
+		border-radius: var(--radius-xl, 10px);
+		/* A demo wider than its column scrolls inside the ground rather than bleeding
+     past the stage edge. Overlays portal to the body, so none is clipped. */
+		overflow: auto;
+		/*
+		 * WHY the containment is on one axis: `overscroll-behavior: contain` made the ground refuse to chain a wheel in either direction, and a page of these is
+		 */
+
+		/*
+		 * eighty grounds covering almost every pixel of it. The wheel landed on a ground, the ground had nothing to scroll vertically, and the page did not
+		 */
+
+		/*
+		 * move. Only the sideways scroll of a wide demo needs containing.
+		 */
+		overscroll-behavior-x: contain;
+		scrollbar-width: thin;
+		/*
+		 * A ground is recessed, not raised: it is the hole the component sits in. The dot grid is what gives a transparent component something to be seen
+		 */
+
+		/*
+		 * against, and it is faint enough to disappear under a filled one.
+		 */
+		background-color: color-mix(
+			in oklab,
+			var(--color-muted, var(--muted)) 45%,
+			var(--color-background, var(--background))
+		);
+		background-image: radial-gradient(
+			circle at 1px 1px,
+			color-mix(in oklab, var(--color-border, var(--border)) 42%, transparent) 1px,
+			transparent 0
+		);
+		background-size: 18px 18px;
+		box-shadow: inset 0 0 0 1px
+			color-mix(in oklab, var(--color-border, var(--border)) 65%, transparent);
+	}
+
+	/*
+	 * The ground keeps the full width, because it is the canvas the component is seen against. What stops is the demo standing on it: one stage per row let
+	 */
+
+	/*
+	 * a card that says `width: 100%` stretch to 2000px and read as a bar. A variant row is the exception, being a stack of demos rather than one.
+	 */
+	.sc-ground > :global(*:not(.sc-variant)) {
+		max-width: 42rem;
+	}
+
+	.sc-stage-tall .sc-ground > :global(*:not(.sc-variant)) {
+		max-width: 62rem;
+	}
+
+	/*
+	 * A tall ground is taller, not differently aligned. `justify-content: stretch` here read as `flex-start`, so any demo narrower than the ground sat against
+	 */
+
+	/*
+	 * its left padding while every other stage on the page centred: the logo row, the list toolbar and the table each left ~380px of empty ground to their
+	 */
+
+	/*
+	 * right. A demo that really wants the full width says so itself with `width: 100%`, which centring does not take away.
+	 */
+	.sc-stage-tall .sc-ground {
+		align-items: stretch;
+		min-height: 19rem;
+	}
+
+	.sc-stage-replay {
+		padding: 0.25rem 0.625rem;
+		border: 1px solid var(--color-border, var(--border));
+		border-radius: var(--radius-lg, 8px);
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: var(--color-muted-foreground, var(--muted-foreground));
+		background: var(--color-background, var(--background));
+		cursor: pointer;
+		transition:
+			color var(--duration-quick, 150ms) var(--ease-smooth-out, ease),
+			background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease),
+			transform var(--duration-micro, 80ms) var(--ease-smooth-out, ease);
+	}
+
+	.sc-stage-replay:hover {
+		color: var(--color-foreground, var(--foreground));
+		background: color-mix(in oklab, var(--color-muted, var(--muted)) 70%, transparent);
+	}
+
+	.sc-stage-replay:active {
+		transform: translateY(1px);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sc-stage-replay {
+			transition: none;
+		}
+
+		.sc-stage-replay:active {
+			transform: none;
+		}
+	}
+</style>

package/src/showcase/ShowcaseVariant.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ShowcaseVariantProps {
+		/** What this variant changes, e.g. "size=line, ocean". */
+		label: string;
+		children: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	let { label, children }: ShowcaseVariantProps = $props();
+</script>
+
+<!-- One cell of a family stage. Four BorderBeams are one component, so they share a stage and a copy control instead of taking four numbered slots, and -->
+<!-- they sit side by side because that is how presets are compared. -->
+<div class="sc-variant">
+	<span class="sc-variant-label">{label}</span>
+	<div class="sc-variant-body">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	/*
+	 * A family stage is not one ground carrying cells: each variant is a ground of its own, and they stand side by side, one column each, the way the four
+	 */
+
+	/*
+	 * BorderBeams read before they shared a stage. Global because the ground belongs to the stage, and the rule only exists where a variant renders.
+	 */
+	:global(.sc-ground:has(> .sc-variant)) {
+		display: grid;
+		/*
+		 * Four across at most, and never a cell under 16rem: five in a row squeezed the gauge card until its caption ran one word per line. Two variants take
+		 */
+
+		/*
+		 * half the row each, four take a quarter.
+		 */
+		grid-template-columns: repeat(auto-fit, minmax(max(16rem, calc((100% - 3rem) / 4)), 1fr));
+		gap: 1rem;
+		padding: 0;
+		min-height: 0;
+		overflow: visible;
+		background: none;
+		box-shadow: none;
+	}
+
+	/* Below this a row of cells is narrower than the demos standing on them. */
+	@media (max-width: 60rem) {
+		:global(.sc-ground:has(> .sc-variant)) {
+			grid-template-columns: minmax(0, 1fr);
+		}
+	}
+
+	/* The cell is the ground: same recess, same dot grid, same hairline. */
+	.sc-variant {
+		display: flex;
+		flex-direction: column;
+		gap: 0.625rem;
+		min-width: 0;
+		min-height: 10.5rem;
+		padding: 1.25rem;
+		border-radius: var(--radius-xl, 10px);
+		/* A demo wider than its column scrolls in the cell, not past the stage. */
+		overflow: auto;
+		overscroll-behavior-x: contain;
+		scrollbar-width: thin;
+		background-color: color-mix(
+			in oklab,
+			var(--color-muted, var(--muted)) 45%,
+			var(--color-background, var(--background))
+		);
+		background-image: radial-gradient(
+			circle at 1px 1px,
+			color-mix(in oklab, var(--color-border, var(--border)) 42%, transparent) 1px,
+			transparent 0
+		);
+		background-size: 18px 18px;
+		box-shadow: inset 0 0 0 1px
+			color-mix(in oklab, var(--color-border, var(--border)) 65%, transparent);
+	}
+
+	.sc-variant-label {
+		font-size: 0.6875rem;
+		font-weight: 500;
+		letter-spacing: 0.04em;
+		color: var(--color-muted-foreground, var(--muted-foreground));
+		font-family: ui-monospace, SFMono-Regular, monospace;
+		overflow-wrap: anywhere;
+	}
+
+	.sc-variant-body {
+		display: flex;
+		flex: 1 1 auto;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		width: 100%;
+		min-width: 0;
+	}
+
+	/* The cell spans its column; the demo on it stops where a card stops. */
+	.sc-variant-body > :global(*) {
+		max-width: 42rem;
+	}
+</style>

package/src/showcase/check.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m20 6-11 11-5-5" /></svg>

package/src/showcase/chevron-arms.svg

@@ -0,0 +1,2 @@
+<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path class="t-learn-arm t-learn-arm-top" d="M6 4L10 8" />
+<path class="t-learn-arm t-learn-arm-bot" d="M10 8L6 12" /></svg>

package/src/showcase/chevron-down.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6.5L8 10.5L12 6.5" /></svg>

package/src/showcase/copy.svg

@@ -0,0 +1,2 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2" />
+<path d="M5 15V5a2 2 0 0 1 2-2h10" /></svg>

package/src/showcase/demos/ai/confirmation.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import {
+		Confirmation,
+		ConfirmationTitle,
+		ConfirmationRequest,
+		ConfirmationAccepted,
+		ConfirmationRejected,
+		ConfirmationActions,
+		ConfirmationAction,
+		type ConfirmationState,
+	} from "../../../ai/index.js";
+
+	let kind = $state<ConfirmationState>("requested");
+</script>
+
+<div class="stack">
+	<Confirmation {kind}>
+		<ConfirmationTitle>Delete 3 stale views?</ConfirmationTitle>
+		<ConfirmationRequest>
+			<p class="body">Removes the views from the workspace. This can't be undone.</p>
+			<ConfirmationActions>
+				<ConfirmationAction variant="outline" onclick={() => (kind = "rejected")}>
+					Cancel
+				</ConfirmationAction>
+				<ConfirmationAction onclick={() => (kind = "accepted")}>Delete</ConfirmationAction>
+			</ConfirmationActions>
+		</ConfirmationRequest>
+		<ConfirmationAccepted>Deleted 3 views.</ConfirmationAccepted>
+		<ConfirmationRejected>Kept the views.</ConfirmationRejected>
+	</Confirmation>
+
+	{#if kind !== "requested"}
+		<button type="button" class="reset" onclick={() => (kind = "requested")}>Reset</button>
+	{/if}
+</div>
+
+<style>
+	.stack {
+		display: flex;
+		flex-direction: column;
+		gap: 0.625rem;
+		width: 100%;
+	}
+	.body {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--muted-foreground);
+	}
+	.reset {
+		align-self: flex-start;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.75rem;
+		color: var(--foreground);
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		cursor: pointer;
+	}
+</style>

package/src/showcase/demos/ai/conversation.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Conversation, ConversationContent, Response } from "../../../ai/index.js";
+	import * as Message from "../../../shadcn/message/index.js";
+	import * as Bubble from "../../../shadcn/bubble/index.js";
+	import { Button } from "../../../shadcn/button/index.js";
+	import Copy from "@lucide/svelte/icons/copy";
+	import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+	import ThumbsUp from "@lucide/svelte/icons/thumbs-up";
+
+	const answer = `Here's the plan:
+
+1. **Extract** \`AnimatedBeam\` into \`@heyramzi/ui\`
+2. **Showcase** it on the Effects page
+3. **Migrate** both apps onto the shared copy
+
+Want me to start?`;
+</script>
+
+<div class="convo">
+	<Conversation>
+		<ConversationContent class="space-y-4 p-1">
+			<Message.Root align="end">
+				<Message.Content>
+					<Bubble.Root variant="default" align="end">
+						<Bubble.Content>How should I DRY up our beam effects?</Bubble.Content>
+					</Bubble.Root>
+				</Message.Content>
+			</Message.Root>
+			<Message.Root align="start">
+				<Message.Content>
+					<Bubble.Root variant="muted" align="start">
+						<Bubble.Content><Response content={answer} /></Bubble.Content>
+					</Bubble.Root>
+					<Message.Footer>
+						<Button variant="ghost" size="sm" icon class="size-7" title="Copy">
+							<Copy class="size-3.5" />
+							<span class="sr-only">Copy</span>
+						</Button>
+						<Button variant="ghost" size="sm" icon class="size-7" title="Regenerate">
+							<RefreshCw class="size-3.5" />
+							<span class="sr-only">Regenerate</span>
+						</Button>
+						<Button variant="ghost" size="sm" icon class="size-7" title="Good answer">
+							<ThumbsUp class="size-3.5" />
+							<span class="sr-only">Good answer</span>
+						</Button>
+					</Message.Footer>
+				</Message.Content>
+			</Message.Root>
+		</ConversationContent>
+	</Conversation>
+</div>
+
+<style>
+	.convo {
+		height: 17rem;
+		width: 100%;
+	}
+</style>

package/src/showcase/demos/ai/loading-state.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { PixelLoader } from "../../../ai/index.js";
+</script>
+
+<div class="stack">
+	<PixelLoader label="Reading the workspace" />
+	<PixelLoader label="Writing the migration" startSeconds={47} />
+	<PixelLoader label="Waiting on the tool" elapsed={false} />
+</div>
+
+<style>
+	.stack {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.875rem;
+		width: 100%;
+	}
+</style>

package/src/showcase/demos/ai/prompt-input.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import {
+		PromptInput,
+		PromptInputBody,
+		PromptInputTextarea,
+		PromptInputToolbar,
+		PromptInputSubmit,
+		Suggestions,
+		Suggestion,
+		type PromptInputStatus,
+	} from "../../../ai/index.js";
+
+	let status = $state<PromptInputStatus>("ready");
+	let value = $state("");
+
+	// Two, not three: the stage is half the section now, and the third chip ran
+	// past the card edge into a sideways scroll.
+	const ideas = ["Summarize this thread", "Draft a reply"];
+
+	function send(text: string) {
+		if (!text.trim()) return;
+		value = "";
+		status = "submitted";
+		setTimeout(() => (status = "streaming"), 400);
+		setTimeout(() => (status = "ready"), 2000);
+	}
+</script>
+
+<div class="stack">
+	<Suggestions>
+		{#each ideas as idea (idea)}
+			<Suggestion suggestion={idea} onclick={(s) => send(s)} />
+		{/each}
+	</Suggestions>
+	<PromptInput onSubmit={(v) => send(v)}>
+		<PromptInputBody>
+			<PromptInputTextarea bind:value placeholder="Ask anything..." />
+			<PromptInputToolbar>
+				<span class="hint">Enter to send</span>
+				<PromptInputSubmit {status} />
+			</PromptInputToolbar>
+		</PromptInputBody>
+	</PromptInput>
+</div>
+
+<style>
+	.stack {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		width: 100%;
+	}
+	.hint {
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+	}
+</style>

package/src/showcase/demos/ai/reasoning.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Reasoning, ReasoningTrigger, ReasoningContent } from "../../../ai/index.js";
+</script>
+
+<div class="w">
+	<Reasoning duration={4} open>
+		<ReasoningTrigger />
+		<ReasoningContent>
+			AnimatedBeam already lives in @heyramzi/ui, so the fix is to re-export it and migrate the two
+			consumers rather than copy the keyframes a third time.
+		</ReasoningContent>
+	</Reasoning>
+</div>
+
+<style>
+	.w {
+		width: 100%;
+	}
+</style>