@heyramzi/ui 7.0.0 → 8.1.0

package/src/showcase/demos/shadcn/select.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import * as Select from "../../../shadcn/select/index.js";
-
-	const fruits = [
-		{ value: "apple", label: "Apple" },
-		{ value: "banana", label: "Banana" },
-		{ value: "blueberry", label: "Blueberry" },
-		{ value: "grapes", label: "Grapes", disabled: true },
-		{ value: "pineapple", label: "Pineapple" },
-	];
-
-	let value = $state("");
-</script>
-
-<Select.Root type="single" name="favoriteFruit" items={fruits} bind:value>
-	<Select.Trigger class="w-[180px]">
-		<Select.Value placeholder="Select a fruit" />
-	</Select.Trigger>
-	<Select.Content>
-		<Select.Group>
-			<Select.Label>Fruits</Select.Label>
-			{#each fruits as fruit (fruit.value)}
-				<Select.Item value={fruit.value} label={fruit.label} disabled={fruit.disabled}>
-					{fruit.label}
-				</Select.Item>
-			{/each}
-		</Select.Group>
-	</Select.Content>
-</Select.Root>

package/src/showcase/demos/shadcn/separator.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { Separator } from "../../../shadcn/separator/index.js";
-</script>
-
-<div class="flex max-w-sm flex-col gap-4 text-sm">
-	<div class="flex flex-col gap-1.5">
-		<div class="leading-none font-medium">shadcn/ui</div>
-		<div class="text-muted-foreground">The Foundation for your Design System</div>
-	</div>
-	<Separator />
-	<div>A set of beautifully designed components that you can customize, extend, and build on.</div>
-</div>

package/src/showcase/demos/shadcn/sheet.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import * as Sheet from "../../../shadcn/sheet/index.js";
-	import { Button } from "../../../shadcn/button/index.js";
-	import { buttonVariants } from "../../../shadcn/button/index.js";
-	import { Input } from "../../../shadcn/input/index.js";
-	import { Label } from "../../../shadcn/label/index.js";
-</script>
-
-<div class="flex flex-wrap gap-2">
-<Sheet.Root>
-	<Sheet.Trigger class={buttonVariants({ variant: "outline" })}>Open from the right</Sheet.Trigger>
-	<Sheet.Content side="right">
-		<Sheet.Header>
-			<Sheet.Title>Edit profile</Sheet.Title>
-			<Sheet.Description>
-				Make changes to your profile here. Click save when you're done.
-			</Sheet.Description>
-		</Sheet.Header>
-		<div class="grid flex-1 auto-rows-min gap-6 px-4">
-			<div class="grid gap-3">
-				<Label for="name" class="text-end">Name</Label>
-				<Input id="name" value="Pedro Duarte" />
-			</div>
-			<div class="grid gap-3">
-				<Label for="username" class="text-end">Username</Label>
-				<Input id="username" value="@peduarte" />
-			</div>
-		</div>
-		<Sheet.Footer>
-			<Button type="submit">Save changes</Button>
-			<Sheet.Close class={buttonVariants({ variant: "outline" })}>Close</Sheet.Close>
-		</Sheet.Footer>
-	</Sheet.Content>
-</Sheet.Root>
-<Sheet.Root>
-	<Sheet.Trigger class={buttonVariants({ variant: "outline" })}>Open from the bottom</Sheet.Trigger>
-	<Sheet.Content side="bottom">
-		<Sheet.Header>
-			<Sheet.Title>Share this page</Sheet.Title>
-			<Sheet.Description>Anyone with the link can view it.</Sheet.Description>
-		</Sheet.Header>
-		<Sheet.Footer>
-			<Button type="submit">Copy link</Button>
-			<Sheet.Close class={buttonVariants({ variant: "outline" })}>Close</Sheet.Close>
-		</Sheet.Footer>
-	</Sheet.Content>
-</Sheet.Root>
-</div>

package/src/showcase/demos/shadcn/skeleton.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { Skeleton } from "../../../shadcn/skeleton/index.js";
-</script>
-
-<div class="flex items-center space-x-4">
-	<Skeleton class="size-12 rounded-full" />
-	<div class="space-y-2">
-		<Skeleton class="h-4 w-[250px]" />
-		<Skeleton class="h-4 w-[200px]" />
-	</div>
-</div>

package/src/showcase/demos/shadcn/slider.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Slider } from "../../../shadcn/slider/index.js";
-
-	let value = $state(50);
-</script>
-
-<Slider type="single" bind:value max={100} step={1} class="max-w-[70%]" />

package/src/showcase/demos/shadcn/sonner.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { toast } from "svelte-sonner";
-	import { Button } from "../../../shadcn/button/index.js";
-</script>
-
-<Button
-	variant="outline"
-	onclick={() =>
-		toast("Event has been created", {
-			description: "Sunday, December 03, 2023 at 9:00 AM",
-			action: {
-				label: "Undo",
-				onClick: () => console.info("Undo"),
-			},
-		})}
->
-	Show Toast
-</Button>

package/src/showcase/demos/shadcn/spinner.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { Spinner } from "../../../shadcn/spinner/index.js";
-</script>
-
-<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
-	<div class="bg-muted/50 flex items-center gap-3 rounded-md border p-3 text-sm">
-		<Spinner />
-		<span class="line-clamp-1 flex-1 font-medium">Processing payment...</span>
-		<span class="tabular-nums">$100.00</span>
-	</div>
-</div>

package/src/showcase/demos/shadcn/switch.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	import { Label } from "../../../shadcn/label/index.js";
-	import { Switch } from "../../../shadcn/switch/index.js";
-</script>
-
-<div class="flex items-center space-x-2">
-	<Switch id="airplane-mode" />
-	<Label for="airplane-mode">Airplane Mode</Label>
-</div>

package/src/showcase/demos/shadcn/table.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-	import * as Table from "../../../shadcn/table/index.js";
-
-	const invoices = [
-		{
-			invoice: "INV001",
-			paymentStatus: "Paid",
-			totalAmount: "$250.00",
-			paymentMethod: "Credit Card",
-		},
-		{
-			invoice: "INV002",
-			paymentStatus: "Pending",
-			totalAmount: "$150.00",
-			paymentMethod: "PayPal",
-		},
-		{
-			invoice: "INV003",
-			paymentStatus: "Unpaid",
-			totalAmount: "$350.00",
-			paymentMethod: "Bank Transfer",
-		},
-		{
-			invoice: "INV004",
-			paymentStatus: "Paid",
-			totalAmount: "$450.00",
-			paymentMethod: "Credit Card",
-		},
-		{
-			invoice: "INV005",
-			paymentStatus: "Paid",
-			totalAmount: "$550.00",
-			paymentMethod: "PayPal",
-		},
-		{
-			invoice: "INV006",
-			paymentStatus: "Pending",
-			totalAmount: "$200.00",
-			paymentMethod: "Bank Transfer",
-		},
-		{
-			invoice: "INV007",
-			paymentStatus: "Unpaid",
-			totalAmount: "$300.00",
-			paymentMethod: "Credit Card",
-		},
-	];
-</script>
-
-<Table.Root>
-	<Table.Caption>A list of your recent invoices.</Table.Caption>
-	<Table.Header>
-		<Table.Row>
-			<Table.Head class="w-[100px]">Invoice</Table.Head>
-			<Table.Head>Status</Table.Head>
-			<Table.Head>Method</Table.Head>
-			<Table.Head class="text-end">Amount</Table.Head>
-		</Table.Row>
-	</Table.Header>
-	<Table.Body>
-		{#each invoices as invoice (invoice)}
-			<Table.Row>
-				<Table.Cell class="font-medium">{invoice.invoice}</Table.Cell>
-				<Table.Cell>{invoice.paymentStatus}</Table.Cell>
-				<Table.Cell>{invoice.paymentMethod}</Table.Cell>
-				<Table.Cell class="text-end">{invoice.totalAmount}</Table.Cell>
-			</Table.Row>
-		{/each}
-	</Table.Body>
-	<Table.Footer>
-		<Table.Row>
-			<Table.Cell colspan={3}>Total</Table.Cell>
-			<Table.Cell class="text-end">$2,500.00</Table.Cell>
-		</Table.Row>
-	</Table.Footer>
-</Table.Root>

package/src/showcase/demos/shadcn/tabs.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import * as Card from "../../../shadcn/card/index.js";
-	import * as Tabs from "../../../shadcn/tabs/index.js";
-	import { Button } from "../../../shadcn/button/index.js";
-	import { Input } from "../../../shadcn/input/index.js";
-	import { Label } from "../../../shadcn/label/index.js";
-</script>
-
-<div class="-mb-4 flex w-full max-w-sm flex-col gap-6">
-	<Tabs.Root value="account">
-		<Tabs.List>
-			<Tabs.Trigger value="account">Account</Tabs.Trigger>
-			<Tabs.Trigger value="password">Password</Tabs.Trigger>
-		</Tabs.List>
-		<Tabs.Content value="account">
-			<Card.Root>
-				<Card.Header>
-					<Card.Title>Account</Card.Title>
-					<Card.Description>
-						Make changes to your account here. Click save when you&apos;re done.
-					</Card.Description>
-				</Card.Header>
-				<Card.Content class="grid gap-6">
-					<div class="grid gap-3">
-						<Label for="tabs-demo-name">Name</Label>
-						<Input id="tabs-demo-name" value="Pedro Duarte" />
-					</div>
-					<div class="grid gap-3">
-						<Label for="tabs-demo-username">Username</Label>
-						<Input id="tabs-demo-username" value="@peduarte" />
-					</div>
-				</Card.Content>
-				<Card.Footer>
-					<Button>Save changes</Button>
-				</Card.Footer>
-			</Card.Root>
-		</Tabs.Content>
-		<Tabs.Content value="password">
-			<Card.Root>
-				<Card.Header>
-					<Card.Title>Password</Card.Title>
-					<Card.Description>
-						Change your password here. After saving, you&apos;ll be logged out.
-					</Card.Description>
-				</Card.Header>
-				<Card.Content class="grid gap-6">
-					<div class="grid gap-3">
-						<Label for="tabs-demo-current">Current password</Label>
-						<Input id="tabs-demo-current" type="password" />
-					</div>
-					<div class="grid gap-3">
-						<Label for="tabs-demo-new">New password</Label>
-						<Input id="tabs-demo-new" type="password" />
-					</div>
-				</Card.Content>
-				<Card.Footer>
-					<Button>Save password</Button>
-				</Card.Footer>
-			</Card.Root>
-		</Tabs.Content>
-	</Tabs.Root>
-</div>

package/src/showcase/demos/shadcn/textarea.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-	import { Textarea } from "../../../shadcn/textarea/index.js";
-</script>
-
-<Textarea placeholder="Type your message here." />

package/src/showcase/demos/shadcn/toggle-group.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import BoldIcon from "@lucide/svelte/icons/bold";
-	import ItalicIcon from "@lucide/svelte/icons/italic";
-	import UnderlineIcon from "@lucide/svelte/icons/underline";
-	import * as ToggleGroup from "../../../shadcn/toggle-group/index.js";
-</script>
-
-<ToggleGroup.Root variant="outline" type="multiple">
-	<ToggleGroup.Item value="bold" aria-label="Toggle bold">
-		<BoldIcon class="h-4 w-4" />
-	</ToggleGroup.Item>
-	<ToggleGroup.Item value="italic" aria-label="Toggle italic">
-		<ItalicIcon class="h-4 w-4" />
-	</ToggleGroup.Item>
-	<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
-		<UnderlineIcon class="h-4 w-4" />
-	</ToggleGroup.Item>
-</ToggleGroup.Root>

package/src/showcase/demos/shadcn/toggle.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	import BookmarkIcon from "@lucide/svelte/icons/bookmark";
-	import { Toggle } from "../../../shadcn/toggle/index.js";
-</script>
-
-<Toggle
-	aria-label="Toggle bookmark"
-	size="sm"
-	variant="outline"
-	class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
->
-	<BookmarkIcon />
-	Bookmark
-</Toggle>

package/src/showcase/demos/shadcn/tooltip.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import * as Tooltip from "../../../shadcn/tooltip/index.js";
-	import { buttonVariants } from "../../../shadcn/button/index.js";
-</script>
-
-<Tooltip.Provider>
-	<Tooltip.Root>
-		<Tooltip.Trigger class={buttonVariants({ variant: "outline" })}>Hover</Tooltip.Trigger>
-		<Tooltip.Content>
-			<p>Add to library</p>
-		</Tooltip.Content>
-	</Tooltip.Root>
-</Tooltip.Provider>

package/src/showcase/demos/shadcn/trace.svelte

@@ -1,51 +0,0 @@
-<!-- Ours, not upstream's: theirs streams through @ai-sdk/svelte and docs-only helpers this package doesn't ship. -->
-<script lang="ts">
-	import CircleAlertIcon from "@lucide/svelte/icons/circle-alert";
-	import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
-	import LoaderCircleIcon from "@lucide/svelte/icons/loader-circle";
-	import * as CodeBlock from "../../../shadcn/code-block/index.js";
-	import * as Trace from "../../../shadcn/trace/index.js";
-
-	const steps = [
-		{ command: "pnpm --version", output: "12.10.1" },
-		{
-			command: "git diff --stat HEAD~1 -- package.json pnpm-lock.yaml",
-			output: " package.json | 2 +-\n 1 file changed, 1 insertion(+), 1 deletion(-)",
-		},
-		{
-			command: "pnpm install --frozen-lockfile",
-			error: "ERR_PNPM_OUTDATED_LOCKFILE  pnpm-lock.yaml is not up to date with package.json",
-		},
-	];
-</script>
-
-<div class="w-full max-w-md">
-	<Trace.Root>
-		<Trace.Line>
-			<Trace.Icon><CircleCheckIcon /></Trace.Icon>
-			<Trace.Title>Thought for 5s</Trace.Title>
-		</Trace.Line>
-		{#each steps as step (step.command)}
-			<Trace.Collapsible>
-				<Trace.CollapsibleTrigger>
-					<Trace.Line status={step.error ? "error" : undefined}>
-						<Trace.Icon>
-							{#if step.error}<CircleAlertIcon />{:else}<CircleCheckIcon />{/if}
-						</Trace.Icon>
-						<Trace.Title>{step.error ? "Failed to run" : "Ran"} {step.command}</Trace.Title>
-					</Trace.Line>
-				</Trace.CollapsibleTrigger>
-				<Trace.CollapsibleContent>
-					<CodeBlock.Root size="sm" variant={step.error ? "destructive" : "default"}>
-						<CodeBlock.Content wrap class="max-h-64" code={step.error ?? step.output} />
-					</CodeBlock.Root>
-				</Trace.CollapsibleContent>
-			</Trace.Collapsible>
-		{/each}
-		<Trace.Line status="running">
-			<Trace.Icon><LoaderCircleIcon class="animate-spin" /></Trace.Icon>
-			<Trace.Title>Writing the fix</Trace.Title>
-			<Trace.Description>2 sources</Trace.Description>
-		</Trace.Line>
-	</Trace.Root>
-</div>

package/src/showcase/heart.svg

@@ -1 +0,0 @@
-<svg class="t-like-heart" viewBox="0 0 24 24" width="18" height="18" stroke-width="1.6"><path d="M12 20s-7-4.35-7-9a4 4 0 017-2.65A4 4 0 0119 11c0 4.65-7 9-7 9z" stroke-linejoin="round" /></svg>

package/src/showcase/index.ts

@@ -1,38 +0,0 @@
-// Chrome for a component showcase: the sticky section rail, the section frame, the demo stage, the compact row for a component with no demo, and the copy control they share.
-
-// WHY the chrome is shared and the content is not: every Studio app vendors its own component kit, so the inventory and the demos are local by nature.
-
-// What repeats across apps is the reading structure, and it was drifting.
-
-// Styling is scoped CSS, not Tailwind utilities: a consumer does not `@source` this package, so utility classes written here would never be generated. Every colour reads `var(--color-x, var(--x))`.
-
-// Tailwind v4's `@theme inline` resolves a token into the utilities that use it and emits no custom property, so an app built that way has `--card` and no `--color-card`,
-
-// while an app that declares its palette in `@theme` has the opposite. The pair covers both.
-export {
-  default as ShowcaseShell,
-  type ShowcaseShellProps,
-} from "./ShowcaseShell.svelte";
-export { default as ShowcaseNav, type ShowcaseNavProps } from "./ShowcaseNav.svelte";
-export {
-  default as ShowcaseSection,
-  type ShowcaseSectionProps,
-} from "./ShowcaseSection.svelte";
-export {
-  default as ShowcaseStage,
-  type ShowcaseStageProps,
-} from "./ShowcaseStage.svelte";
-export {
-  default as ShowcaseVariant,
-  type ShowcaseVariantProps,
-} from "./ShowcaseVariant.svelte";
-export {
-  default as ShowcaseList,
-  type ShowcaseListProps,
-  type ShowcaseListItem,
-} from "./ShowcaseList.svelte";
-export {
-  default as ShowcaseImport,
-  type ShowcaseImportProps,
-} from "./ShowcaseImport.svelte";
-export type { ShowcaseSectionMeta } from "./types.js";

package/src/showcase/kit.test.ts

@@ -1,72 +0,0 @@
-/*
- * The showcase has to hold everything the package ships.
- */
-
-/*
- * A demo that is written once and then forgotten is how a kit ends up with a page that shows two thirds of it.
- */
-
-/*
- * These assert coverage off the source, not off a number typed here: an animation with no stage, or a synced primitive missing from the generated list, fails.
- */
-
-import { existsSync, readFileSync, readdirSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { flushSync, mount, unmount } from "svelte";
-import { describe, expect, it } from "vite-plus/test";
-import AnimationsSection from "./AnimationsSection.svelte";
-import ShadcnSection from "./ShadcnSection.svelte";
-import { SHADCN_DEMOS } from "./demos/shadcn/index.js";
-
-/** The runner's cwd is the workspace root or the package; find the package. */
-function packageRoot(): string {
-  let dir = process.cwd();
-  for (;;) {
-    if (existsSync(join(dir, "src", "showcase", "kit.ts"))) return dir;
-    const candidate = join(dir, "packages", "ui");
-    if (existsSync(join(candidate, "src", "showcase", "kit.ts"))) return candidate;
-    const parent = dirname(dir);
-    if (parent === dir) throw new Error("packages/ui not found");
-    dir = parent;
-  }
-}
-
-const PKG = packageRoot();
-const SRC = join(PKG, "src");
-
-function render(Comp: Parameters<typeof mount>[0]) {
-  const target = document.createElement("div");
-  document.body.appendChild(target);
-  const app = mount(Comp, { target });
-  flushSync();
-  const stages = target.querySelectorAll(".sc-stage").length;
-  void unmount(app);
-  target.remove();
-  return stages;
-}
-
-describe("showcase coverage", () => {
-  it("gives every animation a stage", () => {
-    const section = readFileSync(join(SRC, "showcase", "AnimationsSection.svelte"), "utf8");
-    const missing = readdirSync(join(SRC, "animations"))
-      .filter((file) => file.endsWith(".css") && file !== "index.css")
-      .filter((file) => !section.includes(`animations/${file.replace(".css", "")}`));
-    expect(missing).toEqual([]);
-  });
-
-  it("lists every synced shadcn demo", () => {
-    const vendored = readdirSync(join(PKG, ".upstream", "shadcn-demos"))
-      .filter((file) => file.endsWith(".svelte"))
-      .map((file) => file.replace(".svelte", ""));
-    const listed = new Set(SHADCN_DEMOS.map((demo) => demo.name));
-    expect(vendored.filter((name) => !listed.has(name))).toEqual([]);
-  });
-
-  it("renders a stage for every shadcn primitive", () => {
-    expect(render(ShadcnSection)).toBe(SHADCN_DEMOS.length);
-  });
-
-  it("renders the animation stages", () => {
-    expect(render(AnimationsSection)).toBe(27);
-  });
-});

package/src/showcase/kit.ts

@@ -1,16 +0,0 @@
-// The showcase of @heyramzi/ui itself: its shadcn primitives,
-// its motion vocabulary, its visual effects and its AI surface. The chart set's own section ships with `@heyramzi/charts/showcase`.
-
-// WHY they ship with the package and not with the app showing them: they demo
-
-// what every consumer installs identically, so a second copy in a second app is only a copy that drifts. Recovered from the retired orcastrate GUI (vibe-kit @ ccbccb7a^).
-
-// The shadcn stages are not written here at all: `pnpm sync:shadcn` vendors
-// upstream's own example per primitive and generates the list.
-
-// Each section brings its own layout, so render it inside a `ShowcaseSection`
-// marked `bare`, or in a bare <section> carrying the anchor id.
-export { default as AnimationsSection } from "./AnimationsSection.svelte";
-export { default as ShadcnSection } from "./ShadcnSection.svelte";
-export { default as EffectsSection } from "./EffectsSection.svelte";
-export { default as AiSection } from "./AiSection.svelte";

package/src/showcase/plus.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M8 3.5v9M3.5 8h9" /></svg>

package/src/showcase/showcase-shell.css

@@ -1,91 +0,0 @@
-/* Chrome for ShowcaseShell.
-   Plain colocated CSS rather than a <style> block: a <style> becomes a
-   ?type=style&lang.css virtual module that Tailwind v4 mis-parses when this
-   package is consumed as source out of node_modules. Every selector is
-   namespaced under .sc-shell, because without a Svelte scope hash there is
-   nothing else keeping two components apart. */
-
-.sc-shell {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-/* Provenance beside a name: "shadcn" on a primitive taken as is, so the reader
-   knows a fix goes upstream and not into the kit. Lives here rather than in the
-   stage and the list because both draw it and neither owns it. */
-.sc-tag {
-  display: inline-block;
-  vertical-align: 0.1em;
-  padding: 0 0.375rem;
-  border: 1px solid color-mix(in oklab, var(--color-border, var(--border)) 90%, transparent);
-  border-radius: 999px;
-  font-size: 0.5625rem;
-  font-weight: 600;
-  line-height: 1.5;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--color-muted-foreground, var(--muted-foreground));
-  white-space: nowrap;
-}
-
-.sc-shell-controls {
-  position: sticky;
-  top: var(--showcase-nav-top, 0px);
-  z-index: 30;
-  padding: 0.75rem 0;
-  background: var(--color-background, var(--background));
-  border-bottom: 1px solid var(--color-border, var(--border));
-}
-
-.sc-shell-body {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: start;
-  min-width: 0;
-}
-
-.sc-shell-rail-head {
-  padding: 1.25rem 0.75rem 0 0;
-}
-
-/* WHY the rail only exists above 60rem: below it there is not enough width for
-   both a 12rem index and a stage a component can be judged in, and the stage is
-   the point of the page. On a phone the section headings are the index. */
-@media (min-width: 60rem) {
-  .sc-shell-body {
-    grid-template-columns: 12.5rem minmax(0, 1fr);
-    gap: 2.5rem;
-  }
-
-  /* WHY no rule down the inside edge: the rail is only as tall as its own list,
-     so the rule stopped level with the last section and read as a stray bar
-     hanging in the middle of a page eighty stages long. The 2.5rem gutter and
-     the filled active row are what separate the index from the work. */
-  .sc-shell-rail {
-    position: sticky;
-    top: calc(var(--showcase-nav-top, 0px) + 3.25rem);
-    align-self: start;
-    min-width: 0;
-  }
-}
-
-@media (max-width: 59.99rem) {
-  .sc-shell-rail {
-    display: none;
-  }
-}
-
-.sc-shell-main {
-  min-width: 0;
-  /* Numbering is a counter rather than a prop, so a stage added to a section
-     renumbers the page without the page being told about it. */
-  counter-reset: sc-stage;
-}
-
-.sc-shell-override {
-  padding-top: 1.25rem;
-  /* Search results are stages too, and they number from one. Without this the
-     counter is instantiated on the root and every result reads 01. */
-  counter-reset: sc-stage;
-}

package/src/showcase/stacked-section.css

@@ -1,15 +0,0 @@
-/* One demo per row, the rule ShowcaseSection states for `.sc-stack`: in a grid
-   of narrow cards a table gets the width of a button. The dashed rule is a
-   separator, not a card edge — these are entries in one list. */
-.sc-stacked {
-  display: flex;
-  flex-direction: column;
-}
-
-.sc-stacked > .sc-stage {
-  border-bottom: 1px dashed color-mix(in oklab, var(--color-border, var(--border)) 80%, transparent);
-}
-
-.sc-stacked > .sc-stage:last-child {
-  border-bottom: 0;
-}

package/src/showcase/success-check.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 48 48" fill="none"><path d="M14 25 L21 32 L34 16" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>