@fairgarden/design 0.1.0-alpha.1 → 0.1.0-alpha.2

package/content/code-block/index.d.ts

@@ -0,0 +1,4 @@
+export * from './CodeBlock';
+export * from './CodeBlockLazy';
+export { CodeBlockLoading, type CodeBlockLoadingProps } from './CodeBlockLoading';
+//# sourceMappingURL=index.d.ts.map

package/content/code-block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/content/code-block/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAA"}

package/content/code-block/index.js

@@ -0,0 +1,4 @@
+export * from './CodeBlock';
+export * from './CodeBlockLazy';
+export { CodeBlockLoading } from './CodeBlockLoading';
+//# sourceMappingURL=index.js.map

package/content/code-block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/content/code-block/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAA8B,MAAM,oBAAoB,CAAA"}

package/content/demo/DemoContent.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { ContentProps } from '@fairgarden/docs/CodeHighlighter/types';
+import type { CodeBlockOptions } from '../code-block/CodeBlock';
+import type { PrimaryScale, RadixScale } from '../../utils/scales';
+export { demo } from './DemoFrame';
+/** Demo's own content props: JSON, so a demo's props (`<DemoX collapse />`) can carry them. */
+export type DemoOptions = CodeBlockOptions;
+/** Props for DemoContent: the content props the demo factories hand over, plus the preview hook and scales. */
+export type DemoContentProps = ContentProps<DemoOptions> & {
+    /**
+     * Wraps or replaces what renders in the preview surface, such as a docs
+     * site's iframe of the demo's own page. Called with useDemo's `component`.
+     * Default: the component as is. A rendered preview that runs edge to edge
+     * cancels the surface's inset with `margin: calc(-1 * var(--demo-inset))`.
+     * A function, so pass it from a client component that wraps DemoContent.
+     */
+    renderPreview?: (component: React.ReactNode) => React.ReactNode;
+    /** Primary scale: frame, labels, syntax inks, focus ring. Never defaulted [D133]. */
+    primary?: PrimaryScale;
+    /** Secondary scale: keywords, highlight accent, the selected file tab. Never defaulted. */
+    secondary?: RadixScale;
+    className?: string;
+};
+/**
+ * A demo: the live component on the page ground, with a Select of the
+ * variants in its top-start corner (two or more), above the embedded code
+ * with the file tabs, the actions (copy, copy link, view source, TS | JS)
+ * and, with `collapse`, the window. Every file's `#slug` has a hidden
+ * scroll target before the frame.
+ */
+export declare function DemoContent(props: DemoContentProps): React.JSX.Element;
+//# sourceMappingURL=DemoContent.d.ts.map

package/content/demo/DemoContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoContent.d.ts","sourceRoot":"","sources":["../../src/content/demo/DemoContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AAK1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAS/D,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAyClE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAElC,+FAA+F;AAC/F,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAA;AAE1C,+GAA+G;AAC/G,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,WAAW,CAAC,GAAG;IACzD;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;IAC/D,qFAAqF;IACrF,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAgElD"}

package/content/demo/DemoContent.js

@@ -0,0 +1,87 @@
+'use client';
+import * as React from 'react';
+import { useCodeWindow } from '@fairgarden/docs/useCodeWindow';
+import { useDemo } from '@fairgarden/docs/useDemo';
+import { useScrollAnchor } from '@fairgarden/docs/useScrollAnchor';
+import { isOn, variantItems } from '../code-block/CodeBlockFrame';
+import { CodeBlockSection, SWAP_ANCHOR_MS, useCodeBlockOptions, } from '../code-block/CodeBlockSection';
+import { useCopyToasts } from '../code-block/CodeBlockToasts';
+import { Select } from '../../forms/select';
+import { useScopeAttributes } from '../../utils/scope';
+import { demo } from './DemoFrame';
+import styles from './demo.module.css';
+/*
+ * Demo: a live component above its source. It is the `@fairgarden/docs`
+ * DemoContent component, built as fg-docs' DemoContent: pass it to
+ * `createDemoFactory({ DemoContent })` or `createDemoWithVariantsFactory`.
+ * It calls `useDemo(props)` and renders the selected variant's component in
+ * the preview surface (with any runtime error laid across its top edge),
+ * the variants in a Select in its corner, and the Code Block's code section
+ * embedded beneath. The engine owns the variant, file and transform state,
+ * the swap, the hash deep links, the stored preferences and copy.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: demo.module.css; CVA function `demo`.
+ * - Axes: `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Defaults: color axes none [D133].
+ * - Color fallback: inherits the scope, and passes both scales to the
+ *   embedded code section and the variant Select.
+ * - States: static. The variant Select, the file tabs, the actions and the
+ *   window render the engine's state; a variant change updates the Select at
+ *   once and the code swaps after --fgd-duration-swap (instant under
+ *   --motionNotOK). The error (useDemo's `error`, reported through a
+ *   `CodeControllerContext`) is `role="alert"` in the danger roles, no
+ *   shadow.
+ * - Parts: base (the root: scroll targets, then the frame), target (a hidden
+ *   `#slug` scroll target), frame (the one edge), bar (the variant bar),
+ *   variantSelect (its Select trigger, in the top-start corner), stage
+ *   (holds the error and the surface), error, preview (the surface), code
+ *   (the embedded code section's root).
+ * - Scope: none. Container: none; inherits its context.
+ *
+ * The frame never clips: the error hangs across the preview's top edge and
+ * the code's ⋮ hangs past the frame's inline end, so each part
+ * rounds its own corners to the frame's inner radius. The surface clips its
+ * own content without a scroll container, so a sticky demo still docks. The
+ * preview prints as rendered (components carry their own print fallbacks),
+ * the variant bar as its selected name and the code in full, black on white.
+ */
+export { demo } from './DemoFrame';
+/**
+ * A demo: the live component on the page ground, with a Select of the
+ * variants in its top-start corner (two or more), above the embedded code
+ * with the file tabs, the actions (copy, copy link, view source, TS | JS)
+ * and, with `collapse`, the window. Every file's `#slug` has a hidden
+ * scroll target before the frame.
+ */
+export function DemoContent(props) {
+    const { renderPreview, primary, secondary, className, ...contentProps } = props;
+    const collapsible = isOn(contentProps.collapse);
+    const scope = useScopeAttributes();
+    const codeWindow = useCodeWindow();
+    const toasts = useCopyToasts();
+    const demoResult = useDemo(contentProps, useCodeBlockOptions(collapsible, codeWindow, toasts));
+    // Variant swaps anchor on the whole demo (the preview and code both reflow),
+    // held at the variant bar, as in the source.
+    const { containerRef: variantAnchorRef, anchorScroll: anchorVariantScroll } = useScrollAnchor();
+    const barRef = React.useRef(null);
+    const items = React.useMemo(() => variantItems(demoResult.variants), [demoResult.variants]);
+    const selectVariant = (value) => {
+        if (barRef.current)
+            anchorVariantScroll(barRef.current, SWAP_ANCHOR_MS);
+        demoResult.selectVariant(value);
+    };
+    return (React.createElement("div", { ...scope, className: demo({ primary, secondary, className }) },
+        demoResult.allFilesSlugs.map((file) => (React.createElement("span", { key: file.slug, id: file.slug, className: styles.target }))),
+        React.createElement("div", { ref: variantAnchorRef, className: styles.frame },
+            items.length > 1 ? (React.createElement("div", { ref: barRef, className: styles.bar },
+                React.createElement(Select, { "aria-label": "Variant", items: items, value: demoResult.selectedVariant, onValueChange: (value) => {
+                        if (value != null)
+                            selectVariant(value);
+                    }, primary: primary, secondary: secondary, className: styles.variantSelect }))) : null,
+            React.createElement("div", { className: styles.stage },
+                demoResult.error ? (React.createElement("div", { role: "alert", className: styles.error }, demoResult.error)) : null,
+                React.createElement("div", { className: styles.preview }, renderPreview ? renderPreview(demoResult.component) : demoResult.component)),
+            React.createElement(CodeBlockSection, { code: demoResult, codeWindow: codeWindow, collapsible: collapsible, toasts: toasts, embedded: true, primary: primary, secondary: secondary, className: styles.code }))));
+}
+//# sourceMappingURL=DemoContent.js.map

package/content/demo/DemoContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoContent.js","sourceRoot":"","sources":["../../src/content/demo/DemoContent.tsx"],"names":[],"mappings":"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"}

package/content/demo/DemoFrame.d.ts

@@ -0,0 +1,6 @@
+/** Demo's CVA function. */
+export declare const demo: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=DemoFrame.d.ts.map

package/content/demo/DemoFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoFrame.d.ts","sourceRoot":"","sources":["../../src/content/demo/DemoFrame.tsx"],"names":[],"mappings":"AAWA,2BAA2B;AAC3B,eAAO,MAAM,IAAI;;;8EAMf,CAAA"}

package/content/demo/DemoFrame.js

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import styles from './demo.module.css';
+/*
+ * Internal to Demo: the CVA function the loaded demo and its loading state
+ * share, in a module with no docs engine runtime, so the loading path stays
+ * light. Re-exported by DemoContent.
+ */
+/** Demo's CVA function. */
+export const demo = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+//# sourceMappingURL=DemoFrame.js.map

package/content/demo/DemoFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoFrame.js","sourceRoot":"","sources":["../../src/content/demo/DemoFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAE9C,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC;;;;GAIG;AAEH,2BAA2B;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACnC,QAAQ,EAAE;QACR,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA"}

package/content/demo/DemoLazy.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { DemoContentProps } from './DemoContent';
+/**
+ * Demo, code-split: the demo factories' `DemoContent` that loads
+ * DemoContent (`useDemo`, the code section, the Select) in its own chunk,
+ * as fg-docs' DemoContentLazy. Pair it with `DemoContentLoading:
+ * DemoLoading`, which shows while the chunk loads. Props, `renderPreview`
+ * included, pass through to DemoContent.
+ */
+export declare function DemoLazy(props: DemoContentProps): React.JSX.Element;
+//# sourceMappingURL=DemoLazy.d.ts.map

package/content/demo/DemoLazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoLazy.d.ts","sourceRoot":"","sources":["../../src/content/demo/DemoLazy.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAErD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,gBAAgB,qBAO/C"}

package/content/demo/DemoLazy.js

@@ -0,0 +1,14 @@
+'use client';
+import * as React from 'react';
+import { LazyContent } from '@fairgarden/docs/CoordinatedLazy';
+/**
+ * Demo, code-split: the demo factories' `DemoContent` that loads
+ * DemoContent (`useDemo`, the code section, the Select) in its own chunk,
+ * as fg-docs' DemoContentLazy. Pair it with `DemoContentLoading:
+ * DemoLoading`, which shows while the chunk loads. Props, `renderPreview`
+ * included, pass through to DemoContent.
+ */
+export function DemoLazy(props) {
+    return (React.createElement(LazyContent, { content: () => import('./DemoContent').then((mod) => ({ default: mod.DemoContent })), props: props }));
+}
+//# sourceMappingURL=DemoLazy.js.map

package/content/demo/DemoLazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoLazy.js","sourceRoot":"","sources":["../../src/content/demo/DemoLazy.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAI9D;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAuB;IAC9C,OAAO,CACL,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,EACpF,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC"}

package/content/demo/DemoLoading.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { ContentLoadingProps } from '@fairgarden/docs/CodeHighlighter/types';
+import type { PrimaryScale, RadixScale } from '../../utils/scales';
+import type { DemoOptions } from './DemoContent';
+/** Props for DemoLoading: what the demo factories hand `DemoContentLoading`, plus the preview hook and scales. */
+export type DemoLoadingProps = ContentLoadingProps<DemoOptions> & {
+    /**
+     * As DemoContent's `renderPreview`, called with the fallback's
+     * `component`. Pass the loaded demo's, or a stand-in the same size: a
+     * preview that must mount only once (an iframe) renders its stand-in here,
+     * since the swap replaces the loading tree.
+     */
+    renderPreview?: (component: React.ReactNode) => React.ReactNode;
+    primary?: PrimaryScale;
+    secondary?: RadixScale;
+    className?: string;
+};
+/**
+ * The loading state of a demo: the component above its precomputed code,
+ * with the controls disabled until the content loads.
+ */
+export declare function DemoLoading(props: DemoLoadingProps): React.JSX.Element;
+//# sourceMappingURL=DemoLoading.d.ts.map

package/content/demo/DemoLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoLoading.d.ts","sourceRoot":"","sources":["../../src/content/demo/DemoLoading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAKjF,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAElE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAehD,kHAAkH;AAClH,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,WAAW,CAAC,GAAG;IAChE;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;IAC/D,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAwClD"}

package/content/demo/DemoLoading.js

@@ -0,0 +1,26 @@
+'use client';
+import * as React from 'react';
+import { isOn, variantItems } from '../code-block/CodeBlockFrame';
+import { CodeBlockSectionLoading, fallbackSlugs } from '../code-block/CodeBlockLoading';
+import { Select } from '../../forms/select';
+import { useScopeAttributes } from '../../utils/scope';
+import { demo } from './DemoFrame';
+import styles from './demo.module.css';
+/**
+ * The loading state of a demo: the component above its precomputed code,
+ * with the controls disabled until the content loads.
+ */
+export function DemoLoading(props) {
+    const { renderPreview, primary, secondary, className, ...fallback } = props;
+    const scope = useScopeAttributes();
+    const items = variantItems(Object.keys(fallback.components ?? {}));
+    return (React.createElement("div", { ...scope, className: demo({ primary, secondary, className }) },
+        fallbackSlugs(fallback, fallback.fileNames ?? []).map((slug) => (React.createElement("span", { key: slug, id: slug, className: styles.target }))),
+        React.createElement("div", { className: styles.frame },
+            items.length > 1 ? (React.createElement("div", { className: styles.bar },
+                React.createElement(Select, { "aria-label": "Variant", items: items, value: fallback.initialVariant ?? items[0].value, disabled: true, primary: primary, secondary: secondary, className: styles.variantSelect }))) : null,
+            React.createElement("div", { className: styles.stage },
+                React.createElement("div", { className: styles.preview }, renderPreview ? renderPreview(fallback.component) : fallback.component)),
+            React.createElement(CodeBlockSectionLoading, { fallback: fallback, collapsible: isOn(fallback.collapse), embedded: true, primary: primary, secondary: secondary, className: styles.code }))));
+}
+//# sourceMappingURL=DemoLoading.js.map

package/content/demo/DemoLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoLoading.js","sourceRoot":"","sources":["../../src/content/demo/DemoLoading.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACvF,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAClC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AA2BtC;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC3E,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,KAAK,GAAG,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,CAAA;IAElE,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;QAC/D,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/D,8BAAM,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,CACxD,CAAC;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;YACzB,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAClB,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;gBACxB,oBAAC,MAAM,kBACM,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,QAAQ,CAAC,cAAc,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAChD,QAAQ,QACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,MAAM,CAAC,aAAa,GAC/B,CACE,CACP,CAAC,CAAC,CAAC,IAAI;YACR,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;gBAC1B,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAC3B,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CACnE,CACF;YACN,oBAAC,uBAAuB,IACtB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EACpC,QAAQ,QACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,MAAM,CAAC,IAAI,GACtB,CACE,CACF,CACP,CAAA;AACH,CAAC"}

package/content/demo/demo.module.css

@@ -0,0 +1,163 @@
+/*
+ * Demo. Parts: `base` (the root: the scroll targets, then the frame),
+ * `target` (a hidden `#slug` scroll target), `frame` (the one edge around
+ * preview and code), `bar` (the variant bar), `variantSelect` (its Select
+ * trigger, in the top-start corner), `stage` (holds the error and the
+ * surface), `error`, `preview` (the surface), `code` (the embedded Code
+ * Block's root).
+ *
+ * The frame never clips: the error hangs across the preview's top edge and
+ * the Code Block's ⋮ hangs past the frame's inline end. Each part
+ * rounds its own corners to the frame's inner radius instead. Colors are role
+ * variables and scale steps only; nothing is transparent, shadowed or graded
+ * [D12]. Local custom properties carry dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.error {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    min-inline-size: 0;
+    margin-block: var(--size-px-5);
+  }
+
+  /* A hidden target for native `#slug` links: in flow, so the browser can
+   * scroll to it, and zero tall. */
+  .target {
+    display: block;
+    block-size: 0;
+    scroll-margin-block-start: var(--size-px-3);
+  }
+
+  /* The frame: every fill has an edge [D12]. */
+  .frame {
+    /* The parts' corner radius, inside the frame's edge. */
+    --demo-radius: calc(var(--radius-2-25) - var(--border-size-1));
+
+    min-inline-size: 0;
+    border: var(--border-size-1) solid var(--role-rule);
+    border-radius: var(--radius-2-25);
+    background-color: var(--primary1);
+    color: var(--primary12);
+  }
+
+  /* The variant bar: the preview's ground, with the Select in its corner. */
+  .bar {
+    display: flex;
+    border-start-start-radius: var(--demo-radius);
+    border-start-end-radius: var(--demo-radius);
+    background-color: var(--role-ground);
+  }
+
+  /* The error's containing block: it hangs across the surface's top edge
+   * from here, outside the surface's clip. */
+  .stage {
+    position: relative;
+  }
+
+  /*
+   * The surface: the page ground, inset --size-px-7, a wrapping row with a
+   * --size-px-3 gap. It clips its content without a scroll container, so a
+   * sticky demo docks against the page. `--demo-inset` is the inset a
+   * rendered preview cancels to run edge to edge.
+   */
+  .preview {
+    --demo-inset: var(--size-px-7);
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-px-3);
+    align-items: center;
+    min-inline-size: 0;
+    padding: var(--demo-inset);
+    background-color: var(--role-ground);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* Without a variant bar, the surface takes the frame's top corners. */
+  .stage:first-child > .preview {
+    border-start-start-radius: var(--demo-radius);
+    border-start-end-radius: var(--demo-radius);
+  }
+
+  /*
+   * The runtime error: laid across the surface's top edge, so showing it
+   * never shifts layout. The danger edge at --border-size-2 and the danger
+   * text on the face; no shadow.
+   */
+  .error {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 0;
+    inset-inline: var(--size-px-2-5);
+    translate: 0 -50%;
+    padding: var(--size-px-1) var(--size-px-2-5);
+    border: var(--border-size-2) solid var(--role-danger-edge);
+    border-radius: var(--radius-2-25);
+    background-color: var(--primary1);
+    color: var(--role-danger-text);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+}
+
+@layer variants {
+  /*
+   * The variant Select, compact, in the top-start corner: the frame's edge
+   * doubles as its top and start edges, its outer corner follows the
+   * frame's, and its inner corner rounds so it reads as its own chip.
+   */
+  .bar > .variantSelect {
+    inline-size: auto;
+    min-inline-size: var(--size-px-11);
+    max-inline-size: 100%;
+    block-size: var(--fgd-size-hit);
+    border-block-start-width: 0;
+    border-inline-start-width: 0;
+    border-radius: 0;
+    border-start-start-radius: var(--demo-radius);
+    border-end-end-radius: var(--radius-2-25);
+  }
+
+  /* The embedded Code Block's foot follows the frame's inner radius. */
+  .frame > .code {
+    border-end-start-radius: var(--demo-radius);
+    border-end-end-radius: var(--demo-radius);
+  }
+}
+
+@layer states {
+  /* The corner Select's ring sits inside it, off the frame's edge [D45]. */
+  .bar > .variantSelect:focus-visible {
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+}
+
+@layer print {
+  @media print {
+    /* The preview never splits across pages; the code block keeps its own rule. */
+    .stage {
+      break-inside: avoid;
+    }
+
+    /* The variant bar prints the selected variant's name as text. */
+    .bar > .variantSelect {
+      border-width: 0;
+    }
+
+    /* A runtime error prints in flow above the preview, not over it; the
+     * print remap turns the danger roles black, and its 2 px edge still
+     * marks it. */
+    .error {
+      position: static;
+      translate: none;
+      margin: var(--size-px-2) var(--size-px-2-5) 0;
+    }
+  }
+}

package/content/demo/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DemoContent';
+export * from './DemoLazy';
+export { DemoLoading, type DemoLoadingProps } from './DemoLoading';
+//# sourceMappingURL=index.d.ts.map

package/content/demo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/content/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/content/demo/index.js

@@ -0,0 +1,4 @@
+export * from './DemoContent';
+export * from './DemoLazy';
+export { DemoLoading } from './DemoLoading';
+//# sourceMappingURL=index.js.map

package/content/demo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/content/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA"}

package/content/empty-state/EmptyState.d.ts

@@ -50,7 +50,7 @@ export declare function EmptyState(props: EmptyStateProps): React.ReactElement<u
 /** Props for EmptyStateDrawing: `div` props, `render`, and the sticker's art (`viewBox`, `halo`, line art as children). */
 export type EmptyStateDrawingProps = Omit<useRender.ComponentProps<'div'>, 'children'> & Pick<StickerProps, 'viewBox' | 'halo' | 'children'>;
 /**
- * The drawing (`illustrated`): a §6.5 Sticker at `--ds-size-art-s` with its
+ * The drawing (`illustrated`): a §6.5 Sticker at `--fgd-size-art-s` with its
  * halo, decorative (`aria-hidden`); the spot size `--size-px-9` below
  * 360 px. Pass the asset's `viewBox`, its pre-expanded `halo` path and its
  * line art as children. The sticker brings its own `white` scope, so it

package/content/empty-state/EmptyState.js

@@ -84,7 +84,7 @@ export function EmptyState(props) {
     });
 }
 /**
- * The drawing (`illustrated`): a §6.5 Sticker at `--ds-size-art-s` with its
+ * The drawing (`illustrated`): a §6.5 Sticker at `--fgd-size-art-s` with its
  * halo, decorative (`aria-hidden`); the spot size `--size-px-9` below
  * 360 px. Pass the asset's `viewBox`, its pre-expanded `halo` path and its
  * line art as children. The sticker brings its own `white` scope, so it

package/content/empty-state/empty-state.module.css

@@ -5,8 +5,8 @@
  * dashes are exact [D36]), drawing (holds the §6.5 Sticker), trail (holds
  * the shared ornament-trail), heading, text, action. Static. Colors are role
  * variables only; local custom properties carry dimensions only:
- *   --empty-state-pad   the frame padding (--ds-space-40; --size-px-5 below 360 px)
- *   --empty-state-art   the drawing's fixed size (--ds-size-art-s; --size-px-9 below 360 px)
+ *   --empty-state-pad   the frame padding (--size-px-7-5; --size-px-5 below 360 px)
+ *   --empty-state-art   the drawing's fixed size (--fgd-size-art-s; --size-px-9 below 360 px)
  */
 
 /* Composition sits in top-level rules, outside the layers: Lightning CSS
@@ -27,8 +27,8 @@
 
 @layer base {
   .base {
-    --empty-state-pad: var(--ds-space-40);
-    --empty-state-art: var(--ds-size-art-s);
+    --empty-state-pad: var(--size-px-7-5);
+    --empty-state-art: var(--fgd-size-art-s);
 
     container-type: inline-size;
     min-inline-size: 0;
@@ -45,7 +45,7 @@
     text-align: center;
   }
 
-  /* The §4.7.4 provisional frame: line-dashed in --role-rule, --ds-radius-8, inset by
+  /* The §4.7.4 provisional frame: line-dashed in --role-rule, --radius-2-25, inset by
      half its stroke so the whole line sits inside the box. */
   .frameLine {
     position: absolute;
@@ -59,8 +59,8 @@
   .frameRect {
     fill: none;
     stroke: var(--role-rule);
-    rx: var(--ds-radius-8);
-    ry: var(--ds-radius-8);
+    rx: var(--radius-2-25);
+    ry: var(--radius-2-25);
   }
 
   /* Stack: drawing or trail → 24 → heading → 12 → text → 24 → action. */
@@ -97,7 +97,7 @@
   .text {
     position: relative;
     max-inline-size: 40ch;
-    margin: var(--ds-space-12) 0 0;
+    margin: var(--size-px-2-5) 0 0;
     color: var(--primary12);
   }
 
@@ -106,7 +106,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: var(--ds-space-12);
+    gap: var(--size-px-2-5);
     margin-block-start: var(--size-px-5);
   }
 
@@ -130,10 +130,10 @@
   /* Framed and illustrated share the dashed frame; illustrated adds the drawing. */
   .framed .frame,
   .illustrated .frame {
-    border-radius: var(--ds-radius-8);
+    border-radius: var(--radius-2-25);
   }
 
-  /* Inline (Deno, fixed): one sentence in place of the content; no frame, no padding. */
+  /* Inline: one sentence in place of the content; no frame, no padding. */
   .inline .frame {
     justify-items: start;
     padding: 0;