@heyramzi/ui 7.0.0 → 8.1.0

package/src/showcase/ShowcaseSection.svelte

@@ -1,112 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-
-	export interface ShowcaseSectionProps {
-		/** Anchor id. Must match the ShowcaseSectionMeta the nav rail was given. */
-		id: string;
-		label: string;
-		/** What the section is for, in the reader's terms, not a list of its members. */
-		lead?: string;
-		/** Live demos. Stacked one per row unless `bare` is set. */
-		children?: Snippet;
-		/** Skip the stack, for content that brings a layout of its own. */
-		bare?: boolean;
-		/** Everything in the section with no demo, drawn as rows under the stack. */
-		listed?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	let { id, label, lead, children, listed, bare = false }: ShowcaseSectionProps = $props();
-</script>
-
-<section {id}>
-	<div class="sc-section-head">
-		<h2>{label}</h2>
-		{#if lead}
-			<p>{lead}</p>
-		{/if}
-	</div>
-
-	{#if children}
-		{#if bare}
-			{@render children()}
-		{:else}
-			<div class="sc-stack">
-				{@render children()}
-			</div>
-		{/if}
-	{/if}
-
-	{#if listed}
-		<div class="sc-section-listed">
-			{@render listed()}
-		</div>
-	{/if}
-</section>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		/* Clears the sticky controls row, whose height the page declares once. */
-		scroll-margin-top: calc(var(--showcase-nav-top, 0px) + 4.5rem);
-	}
-
-	/*
-	 * WHY the heading sits on its own rule rather than on whitespace: the page is
-	 */
-
-	/*
-	 * one long column of stages now, and a gap alone did not read as a boundary once the stages themselves had air inside them.
-	 */
-	.sc-section-head {
-		display: flex;
-		flex-direction: column;
-		gap: 0.3125rem;
-		margin-top: 2.25rem;
-		padding: 2.25rem 0 1.25rem;
-		border-top: 1px solid var(--color-border, var(--border));
-	}
-
-	section:first-child .sc-section-head {
-		margin-top: 0;
-		padding-top: 1.5rem;
-		border-top: 0;
-	}
-
-	h2 {
-		margin: 0;
-		font-size: 1.125rem;
-		font-weight: 600;
-		line-height: 1.2;
-		letter-spacing: -0.014em;
-		color: var(--color-foreground, var(--foreground));
-	}
-
-	p {
-		margin: 0;
-		max-width: 62ch;
-		font-size: 0.8125rem;
-		line-height: 1.55;
-		color: var(--color-muted-foreground, var(--muted-foreground));
-		text-wrap: pretty;
-	}
-
-	/*
-	 * One stage per row. A grid of narrow cards made every component the size of the smallest one on the page, which is the opposite of what a showcase is
-	 */
-
-	/*
-	 * for: a table and a button both got 20rem, and only one of them survived it.
-	 */
-	.sc-stack {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-	}
-
-	.sc-section-listed {
-		padding-top: 1rem;
-	}
-</style>

package/src/showcase/ShowcaseShell.svelte

@@ -1,55 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-	import type { ShowcaseSectionMeta } from "./types.js";
-
-	export interface ShowcaseShellProps {
-		/** Every section the rail lists, in the order the page renders them. */
-		sections: ShowcaseSectionMeta[];
-		/** Search box, filters, anything that acts on the whole page. Spans both columns. */
-		controls?: Snippet;
-		/** Sits at the top of the rail, above the index. A title, a count, a legend. */
-		railHead?: Snippet;
-		/** The sections themselves. */
-		children: Snippet;
-		/** Rendered instead of the rail and the sections, e.g. a search result list. */
-		override?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import ShowcaseNav from "./ShowcaseNav.svelte";
-	import "./showcase-shell.css";
-
-	let { sections, controls, railHead, children, override }: ShowcaseShellProps = $props();
-</script>
-
-<div class="sc-shell">
-	{#if controls}
-		<div class="sc-shell-controls">
-			{@render controls()}
-		</div>
-	{/if}
-
-	{#if override}
-		<div class="sc-shell-override">
-			{@render override()}
-		</div>
-	{:else}
-		<div class="sc-shell-body">
-			<!-- A landmark of its own, because the index is a second way through the
-           page rather than part of the page's content. -->
-			<aside class="sc-shell-rail">
-				{#if railHead}
-					<div class="sc-shell-rail-head">
-						{@render railHead()}
-					</div>
-				{/if}
-				<ShowcaseNav {sections} />
-			</aside>
-
-			<div class="sc-shell-main">
-				{@render children()}
-			</div>
-		</div>
-	{/if}
-</div>

package/src/showcase/ShowcaseStage.svelte

@@ -1,342 +0,0 @@
-<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

@@ -1,109 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1,2 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1,2 +0,0 @@
-<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

@@ -1,59 +0,0 @@
-<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>