@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/tree/tree-node.svelte.d.ts

@@ -0,0 +1,81 @@
+import type { TreeNodeAction } from './tree-node-action';
+import type { TreeNodeDragConfig } from './tree-node-drag-config.svelte';
+export type TreeNodeInitializer = {
+    name?: string;
+    id?: string;
+    nonSelectable?: boolean;
+    initiallyExpanded?: boolean;
+    expandOnDoubleClick?: boolean;
+    /** Opaque metadata slot (e.g. an etag or sync token). Not rendered — purely for consumer bookkeeping. */
+    meta?: string | null;
+    /** Destination route for this node. The kit does not navigate; read it in your selection handler (e.g. `goto(node.href)`). */
+    href?: string | null;
+    icon?: string;
+    imgIcon?: string;
+    count?: number;
+    hideIcon?: boolean;
+    onNodeSelected?: (node: TreeNode, opt: {
+        selectedExplicitly: boolean;
+    }) => void;
+    onNodeHover?: {
+        mouseover: (node: TreeNode) => void;
+        mouseleave: (node: TreeNode) => void;
+    };
+    dragConfig?: TreeNodeDragConfig;
+    children?: TreeNode[];
+    actions?: TreeNodeAction[];
+};
+export declare class TreeNode {
+    id: string;
+    name: string;
+    icon: string;
+    count?: number;
+    expandOnDoubleClick: boolean;
+    meta?: string | null;
+    href?: string | null;
+    private _dragConfig?;
+    private _onNodeSelected?;
+    private _onNodeHover?;
+    private _imgIcon;
+    private _hideIcon;
+    private _expanded;
+    private _selected;
+    private _involvedIntoActivePath;
+    private _actions;
+    private _nonSelectable;
+    private _children;
+    private _parent?;
+    private _dirty;
+    constructor(init: TreeNodeInitializer);
+    /** Whether this node has unsaved changes; set via `setDirty` and propagated up to ancestors. */
+    get dirty(): boolean;
+    get expanded(): boolean;
+    get selected(): boolean;
+    get children(): readonly TreeNode[];
+    get actions(): TreeNodeAction[];
+    get parent(): TreeNode | undefined;
+    get nonSelectable(): boolean;
+    get involvedIntoActivePath(): boolean;
+    get imgIcon(): string;
+    get hideIcon(): boolean;
+    get dragConfig(): TreeNodeDragConfig | undefined;
+    select(options?: {
+        explicitly?: boolean;
+    }): void;
+    setChildren(value: TreeNode[]): void;
+    addChild(child: TreeNode): void;
+    insertChildAt(index: number, child: TreeNode): void;
+    removeChild(child: TreeNode): void;
+    setDirty(value: boolean): void;
+    notifyHover(mouseOver: boolean): void;
+    collapse(): void;
+    expand(): void;
+    unselect(): void;
+    flatten(): TreeNode[];
+    canMoveToParent(targetParent: TreeNode): boolean;
+    moveToFolder(targetFolder: TreeNode): boolean;
+    private refreshParentRefs;
+    private _select;
+    private unselectNodeAndChildren;
+    private buildChainToCurrentNode;
+}

package/dist/ui/tree/tree-node.svelte.js

@@ -0,0 +1,232 @@
+import { randomNanoid } from '../../core/utils';
+import IconDocumentFolder from '@fluentui/svg-icons/icons/document_folder_20_regular.svg?raw';
+export class TreeNode {
+    id = randomNanoid(9);
+    name = $state('');
+    icon = $state('');
+    count = $state(undefined);
+    expandOnDoubleClick = $state(false);
+    meta = $state(undefined);
+    href = $state(undefined);
+    _dragConfig;
+    _onNodeSelected;
+    _onNodeHover;
+    _imgIcon;
+    _hideIcon;
+    _expanded = $state(false);
+    _selected = $state(false);
+    _involvedIntoActivePath = $state(false);
+    _actions = [];
+    _nonSelectable;
+    _children = $state([]);
+    _parent;
+    _dirty = $state(false);
+    constructor(init) {
+        this.id = init.id || this.id;
+        this.name = init.name || '';
+        this.href = init.href;
+        this.meta = init.meta;
+        this._nonSelectable = init.nonSelectable || false;
+        this.icon = init.icon || (init.imgIcon ? '' : IconDocumentFolder);
+        this._imgIcon = init.imgIcon || '';
+        this.count = init.count;
+        this._hideIcon = init.hideIcon || false;
+        this._onNodeSelected = init.onNodeSelected;
+        this._onNodeHover = init.onNodeHover;
+        this._dragConfig = init.dragConfig;
+        this.setChildren(init.children || []);
+        this._expanded = init.initiallyExpanded || false;
+        this.expandOnDoubleClick = init.expandOnDoubleClick || false;
+        this._actions = init.actions || [];
+    }
+    /** Whether this node has unsaved changes; set via `setDirty` and propagated up to ancestors. */
+    get dirty() {
+        return this._dirty;
+    }
+    get expanded() {
+        return this._expanded;
+    }
+    get selected() {
+        return this._selected;
+    }
+    get children() {
+        return this._children;
+    }
+    get actions() {
+        return this._actions;
+    }
+    get parent() {
+        return this._parent;
+    }
+    get nonSelectable() {
+        return this._nonSelectable;
+    }
+    get involvedIntoActivePath() {
+        return this._involvedIntoActivePath;
+    }
+    get imgIcon() {
+        return this._imgIcon;
+    }
+    get hideIcon() {
+        return this._hideIcon;
+    }
+    get dragConfig() {
+        return this._dragConfig;
+    }
+    select(options) {
+        this._select(options?.explicitly ?? false);
+    }
+    setChildren(value) {
+        this._children = value;
+        this.refreshParentRefs(value);
+    }
+    addChild(child) {
+        child._parent = this;
+        this._children.push(child);
+    }
+    insertChildAt(index, child) {
+        child._parent = this;
+        this._children.splice(index, 0, child);
+    }
+    removeChild(child) {
+        const i = this._children.indexOf(child);
+        if (i < 0) {
+            return;
+        }
+        this._children.splice(i, 1);
+        child._parent = undefined;
+    }
+    setDirty(value) {
+        this._dirty = value;
+        if (this._parent) {
+            const parent = this._parent;
+            const children = parent.flatten().filter((f) => f.id !== parent.id);
+            parent.setDirty(children.some((f) => f._dirty));
+        }
+    }
+    notifyHover(mouseOver) {
+        const selectionPath = this.buildChainToCurrentNode(this);
+        for (const item of selectionPath) {
+            if (item._onNodeHover) {
+                if (mouseOver) {
+                    item._onNodeHover.mouseover(this);
+                }
+                else {
+                    item._onNodeHover.mouseleave(this);
+                }
+                return;
+            }
+        }
+    }
+    collapse() {
+        this._expanded = false;
+        this._children.forEach((f) => {
+            f.collapse();
+        });
+    }
+    expand() {
+        this._expanded = true;
+    }
+    unselect() {
+        this.unselectNodeAndChildren(this);
+    }
+    flatten() {
+        const result = [];
+        const processNode = (node) => {
+            result.push(node);
+            node._children.forEach(processNode);
+        };
+        processNode(this);
+        return result;
+    }
+    canMoveToParent(targetParent) {
+        if (!this._dragConfig) {
+            return false;
+        }
+        if (!targetParent._dragConfig) {
+            return false;
+        }
+        const canMoveTo = (targetParent) => {
+            let current = targetParent;
+            while (current) {
+                if (current.id === this.id) {
+                    return false;
+                }
+                current = current._parent;
+            }
+            return true;
+        };
+        if (!canMoveTo(targetParent)) {
+            return false;
+        }
+        return targetParent._dragConfig.acceptZones.includes(this._dragConfig.dragZone);
+    }
+    moveToFolder(targetFolder) {
+        if (!this._parent || !this._dragConfig || !this.canMoveToParent(targetFolder)) {
+            return false;
+        }
+        this._dragConfig.onNodeMovedToFolder({ movedNode: this, targetFolder });
+        return true;
+    }
+    refreshParentRefs(children) {
+        for (const child of children) {
+            child._parent = this;
+            if (child._children.length) {
+                child.refreshParentRefs(child._children);
+            }
+        }
+    }
+    _select(selectedExplicitly) {
+        if (this._nonSelectable) {
+            if (!this._children.length) {
+                return;
+            }
+            return this._children[0]._select(selectedExplicitly);
+        }
+        // generate selection path (all nodes involved into current path)
+        const selectionPath = this.buildChainToCurrentNode(this);
+        // unselect previously selected values
+        const root = selectionPath[selectionPath.length - 1];
+        this.unselectNodeAndChildren(root);
+        // process selection path
+        this._selected = true;
+        if (selectionPath.length > 1) {
+            for (let i = 1, length = selectionPath.length; i < length; i++) {
+                const item = selectionPath[i];
+                item._expanded = true;
+            }
+        }
+        let callbackInvoked = false;
+        for (let i = 0, length = selectionPath.length; i < length; i++) {
+            const item = selectionPath[i];
+            item._involvedIntoActivePath = true;
+            if (callbackInvoked) {
+                continue;
+            }
+            if (item._onNodeSelected) {
+                item._onNodeSelected(this, { selectedExplicitly });
+                callbackInvoked = true;
+            }
+        }
+    }
+    unselectNodeAndChildren(node) {
+        node._involvedIntoActivePath = false;
+        node._selected = false;
+        const children = node._children;
+        if (!children.length) {
+            return;
+        }
+        children.forEach((f) => {
+            this.unselectNodeAndChildren(f);
+        });
+    }
+    buildChainToCurrentNode(node) {
+        const chain = [];
+        let current = node;
+        while (current) {
+            chain.push(current);
+            current = current._parent;
+        }
+        return chain;
+    }
+}

package/dist/ui/typography/cmp.heading.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">import { KIT_FONT_VARS } from '../../fonts';
+let { level = 1, size, fontFamily, children } = $props();
+const defaultSizeForLevel = {
+    1: '3xl',
+    2: '2xl',
+    3: 'xl',
+    4: 'lg',
+    5: 'md',
+    6: 'sm'
+};
+const resolvedSize = $derived(size ?? defaultSizeForLevel[level]);
+</script>
+
+<svelte:element
+  this={`h${level}`}
+  class="typo-heading typo-heading--{resolvedSize}"
+  style:--sc-kit--typo-heading--font-family={fontFamily ? KIT_FONT_VARS[fontFamily] : undefined}>
+  {@render children()}
+</svelte:element>
+
+<!--
+@component
+A heading element with a semantic level (h1–h6) decoupled from its visual size.
+
+Pass `level` for the HTML element and document outline; pass `size` to control
+the visual appearance independently. When `size` is omitted it defaults to a
+sensible match for the level.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--typo-heading--color` | Text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--typo-heading--font-family` | Font family | `var(--sc-kit--font--sans)` |
+-->
+
+<style>.typo-heading {
+  --_typo-heading--color: var(--sc-kit--typo-heading--color, var(--sc-kit--color--text--primary));
+  --_typo-heading--font-family: var(--sc-kit--typo-heading--font-family, var(--sc-kit--font--sans));
+  margin: 0;
+  color: var(--_typo-heading--color);
+  font-family: var(--_typo-heading--font-family), sans-serif;
+  font-weight: var(--sc-kit--font-weight--semibold);
+  letter-spacing: -0.01em;
+}
+.typo-heading--sm {
+  font-size: var(--sc-kit--font-size--md);
+  line-height: var(--sc-kit--line-height--md);
+}
+.typo-heading--md {
+  font-size: var(--sc-kit--font-size--lg);
+  line-height: var(--sc-kit--line-height--lg);
+}
+.typo-heading--lg {
+  font-size: var(--sc-kit--font-size--xl);
+  line-height: var(--sc-kit--line-height--xl);
+}
+.typo-heading--xl {
+  font-size: var(--sc-kit--font-size--2xl);
+  line-height: var(--sc-kit--line-height--2xl);
+}
+.typo-heading--2xl {
+  font-size: var(--sc-kit--font-size--3xl);
+  line-height: var(--sc-kit--line-height--3xl);
+  font-weight: var(--sc-kit--font-weight--bold);
+}
+.typo-heading--3xl {
+  font-size: var(--sc-kit--font-size--3xl);
+  line-height: var(--sc-kit--line-height--3xl);
+  font-weight: var(--sc-kit--font-weight--bold);
+  letter-spacing: -0.02em;
+}
+.typo-heading--4xl {
+  font-size: var(--sc-kit--font-size--4xl);
+  line-height: var(--sc-kit--line-height--4xl);
+  font-weight: var(--sc-kit--font-weight--bold);
+  letter-spacing: -0.02em;
+}</style>

package/dist/ui/typography/cmp.heading.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type KitFontFamily } from '../../fonts';
+import type { Snippet } from 'svelte';
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+type Size = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+type Props = {
+    /** Semantic heading level (h1–h6). @default 1 */
+    level?: Level;
+    /** Visual size, decoupled from semantic level. Defaults to a size matching the level. */
+    size?: Size;
+    /** Per-instance font-family. Equivalent to setting `--sc-kit--typo-heading--font-family` from CSS, but typed and inline. */
+    fontFamily?: KitFontFamily;
+    children: Snippet;
+};
+/**
+ * A heading element with a semantic level (h1–h6) decoupled from its visual size.
+ *
+ * Pass `level` for the HTML element and document outline; pass `size` to control
+ * the visual appearance independently. When `size` is omitted it defaults to a
+ * sensible match for the level.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--typo-heading--color` | Text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--typo-heading--font-family` | Font family | `var(--sc-kit--font--sans)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/typography/cmp.text.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">import { KIT_FONT_VARS } from '../../fonts';
+let { size = 'md', tone = 'primary', weight = 'regular', as = 'span', fontFamily, children } = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class="typo-text typo-text--{size} typo-text--tone-{tone} typo-text--w-{weight}"
+  style:--sc-kit--typo-text--font-family={fontFamily ? KIT_FONT_VARS[fontFamily] : undefined}>
+  {@render children()}
+</svelte:element>
+
+<!--
+@component
+A typography primitive that maps `size`, `tone`, and `weight` props to the
+kit's semantic text tokens. Renders as `<span>` by default; switch to `<p>`
+for block-level paragraphs via the `as` prop.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--typo-text--color` | Text color override | inherits from `tone` |
+| `--sc-kit--typo-text--font-family` | Font family | `var(--sc-kit--font--sans)` |
+-->
+
+<style>.typo-text {
+  --_typo-text--color: var(--sc-kit--typo-text--color, var(--sc-kit--color--text--primary));
+  --_typo-text--font-family: var(--sc-kit--typo-text--font-family, var(--sc-kit--font--sans));
+  margin: 0;
+  font-family: var(--_typo-text--font-family), sans-serif;
+  color: var(--_typo-text--color);
+}
+.typo-text--xs {
+  font-size: var(--sc-kit--font-size--xs);
+  line-height: var(--sc-kit--line-height--xs);
+}
+.typo-text--sm {
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: var(--sc-kit--line-height--sm);
+}
+.typo-text--md {
+  font-size: var(--sc-kit--font-size--md);
+  line-height: var(--sc-kit--line-height--md);
+}
+.typo-text--lg {
+  font-size: var(--sc-kit--font-size--lg);
+  line-height: var(--sc-kit--line-height--lg);
+}
+.typo-text--tone-primary {
+  --_typo-text--color: var(--sc-kit--typo-text--color, var(--sc-kit--color--text--primary));
+}
+.typo-text--tone-secondary {
+  --_typo-text--color: var(--sc-kit--typo-text--color, var(--sc-kit--color--text--secondary));
+}
+.typo-text--tone-muted {
+  --_typo-text--color: var(--sc-kit--typo-text--color, var(--sc-kit--color--text--muted));
+}
+.typo-text--w-regular {
+  font-weight: var(--sc-kit--font-weight--regular);
+}
+.typo-text--w-medium {
+  font-weight: var(--sc-kit--font-weight--medium);
+}
+.typo-text--w-semibold {
+  font-weight: var(--sc-kit--font-weight--semibold);
+}
+.typo-text--w-bold {
+  font-weight: var(--sc-kit--font-weight--bold);
+}</style>

package/dist/ui/typography/cmp.text.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type KitFontFamily } from '../../fonts';
+import type { Snippet } from 'svelte';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+type Tone = 'primary' | 'secondary' | 'muted';
+type Weight = 'regular' | 'medium' | 'semibold' | 'bold';
+type Props = {
+    /** @default 'md' */
+    size?: Size;
+    /** Color tone, mapped to the semantic text-color tokens. @default 'primary' */
+    tone?: Tone;
+    /** @default 'regular' */
+    weight?: Weight;
+    /** Renders as `<span>` (inline) or `<p>` (block). @default 'span' */
+    as?: 'span' | 'p';
+    /** Per-instance font-family. Equivalent to setting `--sc-kit--typo-text--font-family` from CSS, but typed and inline. */
+    fontFamily?: KitFontFamily;
+    children: Snippet;
+};
+/**
+ * A typography primitive that maps `size`, `tone`, and `weight` props to the
+ * kit's semantic text tokens. Renders as `<span>` by default; switch to `<p>`
+ * for block-level paragraphs via the `as` prop.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--typo-text--color` | Text color override | inherits from `tone` |
+ * | `--sc-kit--typo-text--font-family` | Font family | `var(--sc-kit--font--sans)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/typography/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Heading } from './cmp.heading.svelte';
+export { default as Text } from './cmp.text.svelte';

package/dist/ui/typography/index.js

@@ -0,0 +1,2 @@
+export { default as Heading } from './cmp.heading.svelte';
+export { default as Text } from './cmp.text.svelte';

package/dist/ui/usage/cmp.usage-row.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">import { IconSlot } from '../icon';
+import { Progress } from '../progress';
+let { title, subtitle, value, max, display, icon } = $props();
+const ratio = $derived(max === 0 ? 0 : value / max);
+</script>
+
+<div class="usage-row">
+  <div class="usage-row__label">
+    <span class="usage-row__title">
+      {#if icon}
+        <span class="usage-row__icon"><IconSlot icon={icon} size="sm" /></span>
+      {/if}
+      {title}
+    </span>
+    {#if subtitle}<span class="usage-row__sub">{subtitle}</span>{/if}
+  </div>
+  <div class="usage-row__bar">
+    <Progress value={ratio} label={title} />
+  </div>
+  <div class="usage-row__display">{display}</div>
+</div>
+
+<!--
+@component
+UsageRow — single row inside a `<Usage>` card: icon + title / subtitle on the left, a kit `Progress`
+bar in the middle (fill = `value / max`), and the `display` text on the right. The `display` text is
+independent of the bar — phrase it however you want.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--usage-row--label-width` | Left label column width | `13.75rem` |
+| `--sc-kit--usage-row--display-width` | Right display column width | `5.625rem` |
+| `--sc-kit--usage-row--bar--height` | Progress bar height | `0.5rem` |
+-->
+<style>.usage-row {
+  display: grid;
+  grid-template-columns: var(--sc-kit--usage-row--label-width, 13.75rem) 1fr var(--sc-kit--usage-row--display-width, 5.625rem);
+  align-items: center;
+  gap: var(--sc-kit--space--6);
+  padding: var(--sc-kit--space--3) 0;
+}
+@media screen and (max-width: 768px) {
+  .usage-row {
+    grid-template-columns: 1fr;
+    gap: var(--sc-kit--space--2);
+  }
+}
+.usage-row__label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.usage-row__title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-kit--space--2);
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  color: var(--sc-kit--color--text--primary);
+}
+.usage-row__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sc-kit--color--text--primary);
+}
+.usage-row__sub {
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--secondary);
+}
+.usage-row__bar {
+  --sc-kit--progress--height: var(--sc-kit--usage-row--bar--height, 0.5rem);
+}
+.usage-row__display {
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--secondary);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+@media screen and (max-width: 768px) {
+  .usage-row__display {
+    text-align: left;
+  }
+}</style>

package/dist/ui/usage/cmp.usage-row.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type IconProp } from '../icon';
+type Props = {
+    title: string;
+    /** Sub-label beneath the title (e.g. "6 of 8 seats used"). */
+    subtitle?: string;
+    /** Numerator. Drives the progress bar fill. */
+    value: number;
+    /** Denominator. */
+    max: number;
+    /** Right-aligned text beside the bar. Independent of `value` / `max` — phrase it freely ("75% used", "12.4 GB"). */
+    display: string;
+    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
+};
+/**
+ * UsageRow — single row inside a `<Usage>` card: icon + title / subtitle on the left, a kit `Progress`
+ * bar in the middle (fill = `value / max`), and the `display` text on the right. The `display` text is
+ * independent of the bar — phrase it however you want.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--usage-row--label-width` | Left label column width | `13.75rem` |
+ * | `--sc-kit--usage-row--display-width` | Right display column width | `5.625rem` |
+ * | `--sc-kit--usage-row--bar--height` | Progress bar height | `0.5rem` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/usage/cmp.usage.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">let { title, meta, children } = $props();
+export {};
+</script>
+
+<div class="usage">
+  <div class="usage__head">
+    <span class="usage__title">{title}</span>
+    {#if meta}<span class="usage__meta">{meta}</span>{/if}
+  </div>
+  <div class="usage__rows">
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+Usage — card that lists plan / quota usage as a column of icon + label + progress bar + display rows.
+Compose with `<UsageRow>` children.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--usage--background` | Card background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--usage--border-color` | Card border | `var(--sc-kit--color--border)` |
+| `--sc-kit--usage--padding` | Card padding | `var(--sc-kit--space--6) var(--sc-kit--space--8)` |
+| `--sc-kit--usage--title--color` | Header title color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--usage--meta--color` | Header meta color | `var(--sc-kit--color--text--muted)` |
+-->
+<style>.usage {
+  background: var(--sc-kit--usage--background, var(--sc-kit--color--bg--panel));
+  border: 1px solid var(--sc-kit--usage--border-color, var(--sc-kit--color--border));
+  border-radius: var(--sc-kit--radius--lg);
+  padding: var(--sc-kit--usage--padding, var(--sc-kit--space--6) var(--sc-kit--space--8));
+}
+.usage__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: var(--sc-kit--space--2);
+}
+.usage__title {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  color: var(--sc-kit--usage--title--color, var(--sc-kit--color--text--primary));
+}
+.usage__meta {
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--sc-kit--usage--meta--color, var(--sc-kit--color--text--muted));
+}</style>