achery-ui 0.6.2 → 0.7.0

package/dist/index.d.cts

@@ -12,9 +12,36 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 type ThemeMode = 'light' | 'dark' | 'system';
 /** The **resolved** colour mode actually applied to the DOM — always `'light'` or `'dark'`. */
 type ResolvedTheme = 'light' | 'dark';
+/**
+ * Controls how loudly the accent runs across the working UI.
+ * Set once on the project root via `<AcheryProvider defaultDial="chrome">`.
+ *
+ * - `'underline'` — accent only on links, focus rings, and the active-tab underline
+ * - `'chrome'`    — accent threads the wiring: tabs, ticks, eyebrows, outline buttons (default)
+ * - `'surface'`   — one signature panel floods with accent colour (`.signature-surface`)
+ */
+type AccentDial = 'underline' | 'chrome' | 'surface';
+/**
+ * The hero material a project uses for its contained, occasional objects
+ * (modals, dialogs, featured cards, receipts).
+ *
+ * - `'none'`    — no material signature; objects use plain paper/ink (default)
+ * - `'leather'` — cordovan + gilt; warm, bookish
+ * - `'wood'`    — walnut + pewter; honest, mid-tone
+ * - `'copper'`  — oxidised copper + patina; energetic, high-contrast
+ */
+type MaterialSignature = 'none' | 'leather' | 'wood' | 'copper';
+/**
+ * How much of the material surfaces on a `.material` object.
+ *
+ * - `'chrome'`  — material only as a spine/trim + metal accents; paper body (default)
+ * - `'surface'` — material header band over a paper body
+ * - `'full'`    — the whole object in material; reserve for rare, celebratory moments
+ */
+type MaterialIntensity = 'chrome' | 'surface' | 'full';
 /**
  * Value provided by {@link ThemeContext} and returned by {@link useTheme}.
- * Gives components read/write access to the active theme and accent colour.
+ * Gives components read/write access to the active theme, accent, dial, and material.
  */
 interface ThemeContextValue {
     /** The user's colour-mode preference (`'light'` | `'dark'` | `'system'`). */
@@ -29,6 +56,14 @@ interface ThemeContextValue {
     accent: AccentColor;
     /** Set the accent colour. */
     setAccent: (accent: AccentColor) => void;
+    /** How loudly the accent runs across the working UI. */
+    dial: AccentDial;
+    /** Set the accent dial. */
+    setDial: (dial: AccentDial) => void;
+    /** The hero material signature for this project. */
+    material: MaterialSignature;
+    /** Set the material signature. */
+    setMaterial: (material: MaterialSignature) => void;
 }
 
 /** Props for the {@link AcheryProvider} component. */
@@ -45,6 +80,23 @@ interface AcheryProviderProps {
      * @default 'terracotta'
      */
     defaultAccent?: AccentColor;
+    /**
+     * How loudly the accent runs across the working UI.
+     * - `'underline'` — accent on links, focus, and active-tab underline only
+     * - `'chrome'`    — accent threads the wiring: tabs, ticks, eyebrows, outlines
+     * - `'surface'`   — one `.signature-surface` panel floods with accent (default for storefront/game products)
+     * @default 'chrome'
+     */
+    defaultDial?: AccentDial;
+    /**
+     * Hero material signature for contained, occasional objects (modals, dialogs, featured cards).
+     * - `'none'`    — no material; objects use plain paper/ink
+     * - `'leather'` — cordovan + gilt
+     * - `'wood'`    — walnut + pewter
+     * - `'copper'`  — oxidised copper + patina
+     * @default 'none'
+     */
+    defaultMaterial?: MaterialSignature;
     /** className applied to the root `[data-achery-root]` div. */
     className?: string;
     /** Inline styles applied to the root `[data-achery-root]` div. */
@@ -78,7 +130,7 @@ interface AcheryProviderProps {
  * }
  * ```
  */
-declare function AcheryProvider({ children, defaultTheme, defaultAccent, className, style, }: AcheryProviderProps): react_jsx_runtime.JSX.Element;
+declare function AcheryProvider({ children, defaultTheme, defaultAccent, defaultDial, defaultMaterial, className, style, }: AcheryProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook that returns the current theme state and setters from the nearest
  * {@link AcheryProvider}.
@@ -128,6 +180,11 @@ declare const vars: {
         info: `var(--${string})`;
         selectionBg: `var(--${string})`;
         selectionFg: `var(--${string})`;
+        material: `var(--${string})`;
+        materialFg: `var(--${string})`;
+        materialBtnFg: `var(--${string})`;
+        metal: `var(--${string})`;
+        metalDeep: `var(--${string})`;
     };
     font: {
         display: `var(--${string})`;
@@ -192,11 +249,11 @@ type ButtonVariant = 'primary' | 'secondary' | 'accent' | 'ghost' | 'danger';
  */
 type BadgeTone = 'saved' | 'drafting' | 'stopped' | 'archived' | 'neutral';
 /**
- * Union of all valid glyph names in the Achery icon set.
+ * Union of all valid glyph names in the Achery icon set (394 glyphs + 3 brand marks).
  * Pass to the `name` prop of {@link Glyph}, or to any component that accepts
  * a `glyph?: GlyphName` prop (Button, Card, Sidebar items, etc.).
  */
-type GlyphName = 'arrow-right' | 'arrow-up' | 'asterism' | 'book' | 'circle' | 'compass' | 'cross' | 'eye' | 'feather' | 'fern' | 'flask' | 'flourish' | 'hand' | 'hex' | 'key' | 'leaf' | 'mark' | 'menu' | 'mercury' | 'minus' | 'moon' | 'plus' | 'salt' | 'scroll' | 'sigil' | 'spinner' | 'sprig' | 'square' | 'star' | 'sulfur' | 'sun' | 'tick' | 'triangle' | 'triangle-down' | 'wordmark';
+type GlyphName = 'acorn' | 'alarm' | 'anchor' | 'ankh' | 'anvil' | 'apple' | 'archive' | 'arrow-down' | 'arrow-down-right' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-up-right' | 'asterism' | 'at-sign' | 'atm' | 'award' | 'axe' | 'baby-bottle' | 'backpack' | 'bag' | 'balloon' | 'ban' | 'bandage' | 'bank' | 'barcode' | 'basket' | 'battery' | 'bed' | 'beer' | 'bell' | 'bell-off' | 'bike' | 'bird' | 'bitcoin' | 'blocks' | 'bolt' | 'bone' | 'book' | 'bookmark' | 'bottle' | 'box' | 'brain' | 'bread' | 'briefcase' | 'broom' | 'brush' | 'bug' | 'building' | 'burger' | 'bus' | 'cactus' | 'cake' | 'calculator' | 'calendar' | 'calendar-check' | 'camera' | 'campfire' | 'candle' | 'candy' | 'car' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'cart' | 'cat' | 'chart-bar' | 'chart-line' | 'chart-pie' | 'chat' | 'chat-dots' | 'check-circle' | 'chess' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-left' | 'chevrons-right' | 'circle' | 'clapperboard' | 'clipboard' | 'clock' | 'close' | 'cloud' | 'cloud-rain' | 'cloud-sun' | 'cocktail' | 'coffee' | 'coin' | 'coins' | 'collapse' | 'columns' | 'comet' | 'comments' | 'compass' | 'cookie' | 'copy' | 'couch' | 'cpu' | 'credit-card' | 'croissant' | 'cross' | 'crosshair' | 'crown' | 'crystal' | 'cup' | 'database' | 'dice' | 'dog' | 'dollar' | 'donut' | 'door' | 'download' | 'drafting-compass' | 'drag' | 'dress' | 'droplet' | 'dumbbell' | 'edit' | 'egg' | 'element-air' | 'element-earth' | 'element-fire' | 'element-water' | 'eraser' | 'euro' | 'exchange' | 'expand' | 'external-link' | 'eye' | 'eye-off' | 'factory' | 'feather' | 'fern' | 'file' | 'file-plus' | 'film' | 'filter' | 'fingerprint' | 'fire' | 'fire-extinguisher' | 'first-aid' | 'fish' | 'fish-hook' | 'flag' | 'flask' | 'flourish' | 'flower' | 'folder' | 'folder-open' | 'fuel' | 'gamepad' | 'gavel' | 'gear' | 'gem' | 'gift' | 'glasses' | 'globe' | 'grid' | 'guitar' | 'hammer' | 'hand' | 'hand-coin' | 'hanger' | 'hard-drive' | 'hat' | 'headphones' | 'heart' | 'heart-filled' | 'heart-pulse' | 'help' | 'hex' | 'hexagram' | 'history' | 'home' | 'hospital' | 'hourglass' | 'ice-cream' | 'image' | 'inbox' | 'info' | 'key' | 'key-round' | 'keyboard' | 'lamp' | 'laptop' | 'layers' | 'leaf' | 'lightbulb' | 'link' | 'lipstick' | 'list' | 'lock' | 'lotus' | 'luggage' | 'magnet' | 'mail' | 'mail-open' | 'map' | 'mark' | 'mars' | 'mask' | 'maximize' | 'megaphone' | 'menu' | 'mercury' | 'mic' | 'mic-off' | 'milk' | 'minus' | 'minus-circle' | 'money-bill' | 'monitor' | 'moon' | 'more' | 'more-vertical' | 'mortar-pestle' | 'mountain' | 'mushroom' | 'music-note' | 'navigation' | 'needle' | 'noodles' | 'note' | 'nut-bolt' | 'palette' | 'palm-tree' | 'paperclip' | 'parking' | 'passport' | 'pause' | 'paw' | 'pencil' | 'people' | 'percent' | 'perfume' | 'person' | 'person-add' | 'phone' | 'piano' | 'pickaxe' | 'piggy-bank' | 'pill' | 'pin' | 'pizza' | 'plane' | 'planet' | 'play' | 'play-circle' | 'plug' | 'plus' | 'plus-circle' | 'popcorn' | 'potion' | 'pound' | 'printer' | 'puzzle' | 'qr' | 'quintessence' | 'rainbow' | 'receipt' | 'redo' | 'refresh' | 'restaurant' | 'ring' | 'road' | 'rocket' | 'router' | 'rss' | 'ruler' | 'running' | 'salad' | 'salt' | 'save' | 'saw' | 'scale' | 'scales' | 'school' | 'scissors' | 'scooter' | 'screwdriver' | 'scroll' | 'search' | 'send' | 'server' | 'settings' | 'share' | 'shield' | 'shield-check' | 'shield-key' | 'ship' | 'shirt' | 'shoe' | 'shovel' | 'sidebar' | 'sigil' | 'sigil-blade' | 'sigil-cardinal' | 'sigil-eye' | 'sigil-feather' | 'sigil-flame' | 'sigil-flask' | 'sigil-heptagram' | 'sigil-hexnested' | 'sigil-key' | 'sigil-leaf' | 'sigil-moon' | 'sigil-octagram' | 'sigil-pentagram' | 'sigil-solomon' | 'sigil-spiralsquare' | 'sigil-triquetra' | 'sigil-vesica' | 'sigil-wheel' | 'skip-back' | 'skip-forward' | 'skull' | 'sliders' | 'smartphone' | 'snowflake' | 'snowman' | 'soda' | 'sort' | 'spinner' | 'sprig' | 'sprout' | 'square' | 'star' | 'star-filled' | 'stethoscope' | 'stop' | 'store' | 'stroller' | 'sulfur' | 'sun' | 'sunglasses' | 'sunrise' | 'sushi' | 'syringe' | 'taco' | 'tag' | 'target' | 'taxi' | 'teddy' | 'tent' | 'theater-masks' | 'thermometer' | 'thermostat' | 'thumbs-down' | 'thumbs-up' | 'thumbtack' | 'tick' | 'ticket' | 'timer' | 'toggle-off' | 'toggle-on' | 'toolbox' | 'tooth' | 'traffic-light' | 'train' | 'trash' | 'tree' | 'trending-down' | 'trending-up' | 'triangle' | 'triangle-down' | 'trophy' | 'truck' | 'tv' | 'umbrella' | 'undo' | 'unlink' | 'unlock' | 'upload' | 'user-circle' | 'utensils' | 'vault' | 'venus' | 'video' | 'volume' | 'volume-off' | 'wallet' | 'warning' | 'washer' | 'watch' | 'waves' | 'weight-scale' | 'wheelchair' | 'wifi' | 'wind' | 'wine' | 'wordmark' | 'wrench' | 'x-circle' | 'yen';
 /**
  * Sort direction for the {@link Table} component.
  * `null` means no active sort (natural/insertion order).
@@ -206,15 +263,10 @@ type SortDirection = 'asc' | 'desc' | null;
 /** Props for the {@link Glyph} component. */
 interface GlyphProps extends SVGProps<SVGSVGElement> {
     /**
-     * Name of the glyph to render. One of the 33 icons in the Achery glyph set.
+     * Name of the glyph to render. One of the 394 icons + 3 brand marks in the Achery glyph set.
+     * Use `searchGlyphs()` to find glyphs by keyword, or browse categories via `GlyphCategories`.
      *
-     * **Geometric:** `circle`, `square`, `triangle`, `triangle-down`, `hex`, `minus`, `plus`, `cross`, `tick`, `arrow-right`, `arrow-up`
-     *
-     * **Botanical / alchemical:** `fern`, `sprig`, `leaf`, `feather`, `flourish`, `asterism`, `sigil`, `salt`, `sulfur`, `mercury`
-     *
-     * **Editorial / tools:** `book`, `scroll`, `feather`, `key`, `flask`, `compass`, `eye`, `hand`, `star`, `moon`, `sun`, `spinner`
-     *
-     * **Brand:** `mark`, `wordmark`
+     * **Brand:** `mark`, `wordmark`, `sigil`
      */
     name: GlyphName;
     /**
@@ -235,18 +287,43 @@ interface GlyphProps extends SVGProps<SVGSVGElement> {
  *
  * For decorative use, omit `title` (the glyph is `aria-hidden` by default).
  * For semantic use (icon-only button labels etc.), provide a `title`.
- *
- * @example
- * ```tsx
- * // Decorative
- * <Glyph name="fern" size={24} />
- *
- * // Semantic (in an icon-only button)
- * <button aria-label="Close"><Glyph name="cross" size={16} /></button>
- * ```
  */
 declare function Glyph({ name, size, title, className, style, ...props }: GlyphProps): react_jsx_runtime.JSX.Element;
 
+declare const GlyphCategories: Record<string, readonly GlyphName[]>;
+type GlyphCategory = keyof typeof GlyphCategories;
+declare const GlyphAliases: Partial<Record<GlyphName, readonly string[]>>;
+/** Human label: 'chart-bar' → 'Chart Bar'. */
+declare const glyphLabel: (name: GlyphName) => string;
+/** Category a glyph belongs to (first match), or undefined. */
+declare const glyphCategory: (name: GlyphName) => GlyphCategory | undefined;
+interface GlyphSearchResult {
+    name: GlyphName;
+    score: number;
+}
+/**
+ * Search glyphs by free text, ranked by relevance (higher = better).
+ *
+ * Multi-word queries use AND semantics — every token must hit something.
+ * Returns matches sorted by score desc, then alphabetically, capped by `limit`.
+ */
+declare const searchGlyphs: (query: string, allNames: readonly GlyphName[], limit?: number) => GlyphSearchResult[];
+
+interface GlyphPickerProps {
+    /** Currently selected glyph, or undefined for none. */
+    value?: GlyphName;
+    /** Called when a glyph is selected or cleared. */
+    onChange?: (name: GlyphName | undefined) => void;
+    /** Placeholder shown when no glyph is selected. */
+    placeholder?: string;
+    /** Disable the picker. */
+    disabled?: boolean;
+    /** Show a clear button in the trigger when a value is selected. */
+    clearable?: boolean;
+    className?: string;
+}
+declare const GlyphPicker: ({ value, onChange, placeholder, disabled, clearable, className, }: GlyphPickerProps) => react_jsx_runtime.JSX.Element;
+
 type PolymorphicProps<E extends ElementType> = HTMLAttributes<HTMLElement> & {
     as?: E;
     children?: ReactNode;
@@ -1948,4 +2025,49 @@ interface AvatarProps {
 }
 declare function Avatar({ initials, size, tone, loading, className }: AvatarProps): react_jsx_runtime.JSX.Element;
 
-export { AccentColor, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, type GlyphName, type GlyphProps, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, useConfirm, useTheme, useToast, vars };
+/** Props for the {@link MaterialCard} component. */
+interface MaterialCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * How much of the material surfaces on this object.
+     * - `'chrome'`  — material as spine + metal trim only; paper body (default)
+     * - `'surface'` — material header band over a paper body
+     * - `'full'`    — the whole object in material; reserve for rare, celebratory moments
+     * @default 'chrome'
+     */
+    intensity?: MaterialIntensity;
+    /**
+     * Header slot — rendered as `.material__bar`. Receives material background
+     * at `surface` and `full` intensities. Pass a string for the title or a
+     * ReactNode for a custom bar layout.
+     */
+    header?: ReactNode;
+    /**
+     * Footer slot — rendered as `.material__foot` with a top border rule.
+     * Ideal for action buttons.
+     */
+    footer?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * A contained, bounded surface that wears the project's material signature.
+ * Use for modals, dialogs, featured cards, receipts — objects that *arrive*
+ * and demand a moment of attention.
+ *
+ * The working page stays plain paper/ink. The material is the occasion.
+ *
+ * The parent `<AcheryProvider defaultMaterial="leather">` (or `wood` / `copper`)
+ * sets which signature is used; the `intensity` prop controls how loudly it
+ * surfaces on this object.
+ *
+ * @example
+ * ```tsx
+ * <MaterialCard intensity="surface" header="Close the month" footer={<Button>Bind & archive</Button>}>
+ *   <Eyebrow>November · ready to bind</Eyebrow>
+ *   <Body>Seal the ledger and file it to the archive.</Body>
+ * </MaterialCard>
+ * ```
+ */
+declare function MaterialCard({ intensity, header, footer, children, className, ...props }: MaterialCardProps): react_jsx_runtime.JSX.Element;
+
+export { AccentColor, type AccentDial, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, GlyphAliases, GlyphCategories, type GlyphCategory, type GlyphName, GlyphPicker, type GlyphPickerProps, type GlyphProps, type GlyphSearchResult, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, MaterialCard, type MaterialCardProps, type MaterialIntensity, type MaterialSignature, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, glyphCategory, glyphLabel, searchGlyphs, useConfirm, useTheme, useToast, vars };

package/dist/index.d.ts

@@ -12,9 +12,36 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 type ThemeMode = 'light' | 'dark' | 'system';
 /** The **resolved** colour mode actually applied to the DOM — always `'light'` or `'dark'`. */
 type ResolvedTheme = 'light' | 'dark';
+/**
+ * Controls how loudly the accent runs across the working UI.
+ * Set once on the project root via `<AcheryProvider defaultDial="chrome">`.
+ *
+ * - `'underline'` — accent only on links, focus rings, and the active-tab underline
+ * - `'chrome'`    — accent threads the wiring: tabs, ticks, eyebrows, outline buttons (default)
+ * - `'surface'`   — one signature panel floods with accent colour (`.signature-surface`)
+ */
+type AccentDial = 'underline' | 'chrome' | 'surface';
+/**
+ * The hero material a project uses for its contained, occasional objects
+ * (modals, dialogs, featured cards, receipts).
+ *
+ * - `'none'`    — no material signature; objects use plain paper/ink (default)
+ * - `'leather'` — cordovan + gilt; warm, bookish
+ * - `'wood'`    — walnut + pewter; honest, mid-tone
+ * - `'copper'`  — oxidised copper + patina; energetic, high-contrast
+ */
+type MaterialSignature = 'none' | 'leather' | 'wood' | 'copper';
+/**
+ * How much of the material surfaces on a `.material` object.
+ *
+ * - `'chrome'`  — material only as a spine/trim + metal accents; paper body (default)
+ * - `'surface'` — material header band over a paper body
+ * - `'full'`    — the whole object in material; reserve for rare, celebratory moments
+ */
+type MaterialIntensity = 'chrome' | 'surface' | 'full';
 /**
  * Value provided by {@link ThemeContext} and returned by {@link useTheme}.
- * Gives components read/write access to the active theme and accent colour.
+ * Gives components read/write access to the active theme, accent, dial, and material.
  */
 interface ThemeContextValue {
     /** The user's colour-mode preference (`'light'` | `'dark'` | `'system'`). */
@@ -29,6 +56,14 @@ interface ThemeContextValue {
     accent: AccentColor;
     /** Set the accent colour. */
     setAccent: (accent: AccentColor) => void;
+    /** How loudly the accent runs across the working UI. */
+    dial: AccentDial;
+    /** Set the accent dial. */
+    setDial: (dial: AccentDial) => void;
+    /** The hero material signature for this project. */
+    material: MaterialSignature;
+    /** Set the material signature. */
+    setMaterial: (material: MaterialSignature) => void;
 }
 
 /** Props for the {@link AcheryProvider} component. */
@@ -45,6 +80,23 @@ interface AcheryProviderProps {
      * @default 'terracotta'
      */
     defaultAccent?: AccentColor;
+    /**
+     * How loudly the accent runs across the working UI.
+     * - `'underline'` — accent on links, focus, and active-tab underline only
+     * - `'chrome'`    — accent threads the wiring: tabs, ticks, eyebrows, outlines
+     * - `'surface'`   — one `.signature-surface` panel floods with accent (default for storefront/game products)
+     * @default 'chrome'
+     */
+    defaultDial?: AccentDial;
+    /**
+     * Hero material signature for contained, occasional objects (modals, dialogs, featured cards).
+     * - `'none'`    — no material; objects use plain paper/ink
+     * - `'leather'` — cordovan + gilt
+     * - `'wood'`    — walnut + pewter
+     * - `'copper'`  — oxidised copper + patina
+     * @default 'none'
+     */
+    defaultMaterial?: MaterialSignature;
     /** className applied to the root `[data-achery-root]` div. */
     className?: string;
     /** Inline styles applied to the root `[data-achery-root]` div. */
@@ -78,7 +130,7 @@ interface AcheryProviderProps {
  * }
  * ```
  */
-declare function AcheryProvider({ children, defaultTheme, defaultAccent, className, style, }: AcheryProviderProps): react_jsx_runtime.JSX.Element;
+declare function AcheryProvider({ children, defaultTheme, defaultAccent, defaultDial, defaultMaterial, className, style, }: AcheryProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook that returns the current theme state and setters from the nearest
  * {@link AcheryProvider}.
@@ -128,6 +180,11 @@ declare const vars: {
         info: `var(--${string})`;
         selectionBg: `var(--${string})`;
         selectionFg: `var(--${string})`;
+        material: `var(--${string})`;
+        materialFg: `var(--${string})`;
+        materialBtnFg: `var(--${string})`;
+        metal: `var(--${string})`;
+        metalDeep: `var(--${string})`;
     };
     font: {
         display: `var(--${string})`;
@@ -192,11 +249,11 @@ type ButtonVariant = 'primary' | 'secondary' | 'accent' | 'ghost' | 'danger';
  */
 type BadgeTone = 'saved' | 'drafting' | 'stopped' | 'archived' | 'neutral';
 /**
- * Union of all valid glyph names in the Achery icon set.
+ * Union of all valid glyph names in the Achery icon set (394 glyphs + 3 brand marks).
  * Pass to the `name` prop of {@link Glyph}, or to any component that accepts
  * a `glyph?: GlyphName` prop (Button, Card, Sidebar items, etc.).
  */
-type GlyphName = 'arrow-right' | 'arrow-up' | 'asterism' | 'book' | 'circle' | 'compass' | 'cross' | 'eye' | 'feather' | 'fern' | 'flask' | 'flourish' | 'hand' | 'hex' | 'key' | 'leaf' | 'mark' | 'menu' | 'mercury' | 'minus' | 'moon' | 'plus' | 'salt' | 'scroll' | 'sigil' | 'spinner' | 'sprig' | 'square' | 'star' | 'sulfur' | 'sun' | 'tick' | 'triangle' | 'triangle-down' | 'wordmark';
+type GlyphName = 'acorn' | 'alarm' | 'anchor' | 'ankh' | 'anvil' | 'apple' | 'archive' | 'arrow-down' | 'arrow-down-right' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-up-right' | 'asterism' | 'at-sign' | 'atm' | 'award' | 'axe' | 'baby-bottle' | 'backpack' | 'bag' | 'balloon' | 'ban' | 'bandage' | 'bank' | 'barcode' | 'basket' | 'battery' | 'bed' | 'beer' | 'bell' | 'bell-off' | 'bike' | 'bird' | 'bitcoin' | 'blocks' | 'bolt' | 'bone' | 'book' | 'bookmark' | 'bottle' | 'box' | 'brain' | 'bread' | 'briefcase' | 'broom' | 'brush' | 'bug' | 'building' | 'burger' | 'bus' | 'cactus' | 'cake' | 'calculator' | 'calendar' | 'calendar-check' | 'camera' | 'campfire' | 'candle' | 'candy' | 'car' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'cart' | 'cat' | 'chart-bar' | 'chart-line' | 'chart-pie' | 'chat' | 'chat-dots' | 'check-circle' | 'chess' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-left' | 'chevrons-right' | 'circle' | 'clapperboard' | 'clipboard' | 'clock' | 'close' | 'cloud' | 'cloud-rain' | 'cloud-sun' | 'cocktail' | 'coffee' | 'coin' | 'coins' | 'collapse' | 'columns' | 'comet' | 'comments' | 'compass' | 'cookie' | 'copy' | 'couch' | 'cpu' | 'credit-card' | 'croissant' | 'cross' | 'crosshair' | 'crown' | 'crystal' | 'cup' | 'database' | 'dice' | 'dog' | 'dollar' | 'donut' | 'door' | 'download' | 'drafting-compass' | 'drag' | 'dress' | 'droplet' | 'dumbbell' | 'edit' | 'egg' | 'element-air' | 'element-earth' | 'element-fire' | 'element-water' | 'eraser' | 'euro' | 'exchange' | 'expand' | 'external-link' | 'eye' | 'eye-off' | 'factory' | 'feather' | 'fern' | 'file' | 'file-plus' | 'film' | 'filter' | 'fingerprint' | 'fire' | 'fire-extinguisher' | 'first-aid' | 'fish' | 'fish-hook' | 'flag' | 'flask' | 'flourish' | 'flower' | 'folder' | 'folder-open' | 'fuel' | 'gamepad' | 'gavel' | 'gear' | 'gem' | 'gift' | 'glasses' | 'globe' | 'grid' | 'guitar' | 'hammer' | 'hand' | 'hand-coin' | 'hanger' | 'hard-drive' | 'hat' | 'headphones' | 'heart' | 'heart-filled' | 'heart-pulse' | 'help' | 'hex' | 'hexagram' | 'history' | 'home' | 'hospital' | 'hourglass' | 'ice-cream' | 'image' | 'inbox' | 'info' | 'key' | 'key-round' | 'keyboard' | 'lamp' | 'laptop' | 'layers' | 'leaf' | 'lightbulb' | 'link' | 'lipstick' | 'list' | 'lock' | 'lotus' | 'luggage' | 'magnet' | 'mail' | 'mail-open' | 'map' | 'mark' | 'mars' | 'mask' | 'maximize' | 'megaphone' | 'menu' | 'mercury' | 'mic' | 'mic-off' | 'milk' | 'minus' | 'minus-circle' | 'money-bill' | 'monitor' | 'moon' | 'more' | 'more-vertical' | 'mortar-pestle' | 'mountain' | 'mushroom' | 'music-note' | 'navigation' | 'needle' | 'noodles' | 'note' | 'nut-bolt' | 'palette' | 'palm-tree' | 'paperclip' | 'parking' | 'passport' | 'pause' | 'paw' | 'pencil' | 'people' | 'percent' | 'perfume' | 'person' | 'person-add' | 'phone' | 'piano' | 'pickaxe' | 'piggy-bank' | 'pill' | 'pin' | 'pizza' | 'plane' | 'planet' | 'play' | 'play-circle' | 'plug' | 'plus' | 'plus-circle' | 'popcorn' | 'potion' | 'pound' | 'printer' | 'puzzle' | 'qr' | 'quintessence' | 'rainbow' | 'receipt' | 'redo' | 'refresh' | 'restaurant' | 'ring' | 'road' | 'rocket' | 'router' | 'rss' | 'ruler' | 'running' | 'salad' | 'salt' | 'save' | 'saw' | 'scale' | 'scales' | 'school' | 'scissors' | 'scooter' | 'screwdriver' | 'scroll' | 'search' | 'send' | 'server' | 'settings' | 'share' | 'shield' | 'shield-check' | 'shield-key' | 'ship' | 'shirt' | 'shoe' | 'shovel' | 'sidebar' | 'sigil' | 'sigil-blade' | 'sigil-cardinal' | 'sigil-eye' | 'sigil-feather' | 'sigil-flame' | 'sigil-flask' | 'sigil-heptagram' | 'sigil-hexnested' | 'sigil-key' | 'sigil-leaf' | 'sigil-moon' | 'sigil-octagram' | 'sigil-pentagram' | 'sigil-solomon' | 'sigil-spiralsquare' | 'sigil-triquetra' | 'sigil-vesica' | 'sigil-wheel' | 'skip-back' | 'skip-forward' | 'skull' | 'sliders' | 'smartphone' | 'snowflake' | 'snowman' | 'soda' | 'sort' | 'spinner' | 'sprig' | 'sprout' | 'square' | 'star' | 'star-filled' | 'stethoscope' | 'stop' | 'store' | 'stroller' | 'sulfur' | 'sun' | 'sunglasses' | 'sunrise' | 'sushi' | 'syringe' | 'taco' | 'tag' | 'target' | 'taxi' | 'teddy' | 'tent' | 'theater-masks' | 'thermometer' | 'thermostat' | 'thumbs-down' | 'thumbs-up' | 'thumbtack' | 'tick' | 'ticket' | 'timer' | 'toggle-off' | 'toggle-on' | 'toolbox' | 'tooth' | 'traffic-light' | 'train' | 'trash' | 'tree' | 'trending-down' | 'trending-up' | 'triangle' | 'triangle-down' | 'trophy' | 'truck' | 'tv' | 'umbrella' | 'undo' | 'unlink' | 'unlock' | 'upload' | 'user-circle' | 'utensils' | 'vault' | 'venus' | 'video' | 'volume' | 'volume-off' | 'wallet' | 'warning' | 'washer' | 'watch' | 'waves' | 'weight-scale' | 'wheelchair' | 'wifi' | 'wind' | 'wine' | 'wordmark' | 'wrench' | 'x-circle' | 'yen';
 /**
  * Sort direction for the {@link Table} component.
  * `null` means no active sort (natural/insertion order).
@@ -206,15 +263,10 @@ type SortDirection = 'asc' | 'desc' | null;
 /** Props for the {@link Glyph} component. */
 interface GlyphProps extends SVGProps<SVGSVGElement> {
     /**
-     * Name of the glyph to render. One of the 33 icons in the Achery glyph set.
+     * Name of the glyph to render. One of the 394 icons + 3 brand marks in the Achery glyph set.
+     * Use `searchGlyphs()` to find glyphs by keyword, or browse categories via `GlyphCategories`.
      *
-     * **Geometric:** `circle`, `square`, `triangle`, `triangle-down`, `hex`, `minus`, `plus`, `cross`, `tick`, `arrow-right`, `arrow-up`
-     *
-     * **Botanical / alchemical:** `fern`, `sprig`, `leaf`, `feather`, `flourish`, `asterism`, `sigil`, `salt`, `sulfur`, `mercury`
-     *
-     * **Editorial / tools:** `book`, `scroll`, `feather`, `key`, `flask`, `compass`, `eye`, `hand`, `star`, `moon`, `sun`, `spinner`
-     *
-     * **Brand:** `mark`, `wordmark`
+     * **Brand:** `mark`, `wordmark`, `sigil`
      */
     name: GlyphName;
     /**
@@ -235,18 +287,43 @@ interface GlyphProps extends SVGProps<SVGSVGElement> {
  *
  * For decorative use, omit `title` (the glyph is `aria-hidden` by default).
  * For semantic use (icon-only button labels etc.), provide a `title`.
- *
- * @example
- * ```tsx
- * // Decorative
- * <Glyph name="fern" size={24} />
- *
- * // Semantic (in an icon-only button)
- * <button aria-label="Close"><Glyph name="cross" size={16} /></button>
- * ```
  */
 declare function Glyph({ name, size, title, className, style, ...props }: GlyphProps): react_jsx_runtime.JSX.Element;
 
+declare const GlyphCategories: Record<string, readonly GlyphName[]>;
+type GlyphCategory = keyof typeof GlyphCategories;
+declare const GlyphAliases: Partial<Record<GlyphName, readonly string[]>>;
+/** Human label: 'chart-bar' → 'Chart Bar'. */
+declare const glyphLabel: (name: GlyphName) => string;
+/** Category a glyph belongs to (first match), or undefined. */
+declare const glyphCategory: (name: GlyphName) => GlyphCategory | undefined;
+interface GlyphSearchResult {
+    name: GlyphName;
+    score: number;
+}
+/**
+ * Search glyphs by free text, ranked by relevance (higher = better).
+ *
+ * Multi-word queries use AND semantics — every token must hit something.
+ * Returns matches sorted by score desc, then alphabetically, capped by `limit`.
+ */
+declare const searchGlyphs: (query: string, allNames: readonly GlyphName[], limit?: number) => GlyphSearchResult[];
+
+interface GlyphPickerProps {
+    /** Currently selected glyph, or undefined for none. */
+    value?: GlyphName;
+    /** Called when a glyph is selected or cleared. */
+    onChange?: (name: GlyphName | undefined) => void;
+    /** Placeholder shown when no glyph is selected. */
+    placeholder?: string;
+    /** Disable the picker. */
+    disabled?: boolean;
+    /** Show a clear button in the trigger when a value is selected. */
+    clearable?: boolean;
+    className?: string;
+}
+declare const GlyphPicker: ({ value, onChange, placeholder, disabled, clearable, className, }: GlyphPickerProps) => react_jsx_runtime.JSX.Element;
+
 type PolymorphicProps<E extends ElementType> = HTMLAttributes<HTMLElement> & {
     as?: E;
     children?: ReactNode;
@@ -1948,4 +2025,49 @@ interface AvatarProps {
 }
 declare function Avatar({ initials, size, tone, loading, className }: AvatarProps): react_jsx_runtime.JSX.Element;
 
-export { AccentColor, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, type GlyphName, type GlyphProps, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, useConfirm, useTheme, useToast, vars };
+/** Props for the {@link MaterialCard} component. */
+interface MaterialCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * How much of the material surfaces on this object.
+     * - `'chrome'`  — material as spine + metal trim only; paper body (default)
+     * - `'surface'` — material header band over a paper body
+     * - `'full'`    — the whole object in material; reserve for rare, celebratory moments
+     * @default 'chrome'
+     */
+    intensity?: MaterialIntensity;
+    /**
+     * Header slot — rendered as `.material__bar`. Receives material background
+     * at `surface` and `full` intensities. Pass a string for the title or a
+     * ReactNode for a custom bar layout.
+     */
+    header?: ReactNode;
+    /**
+     * Footer slot — rendered as `.material__foot` with a top border rule.
+     * Ideal for action buttons.
+     */
+    footer?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * A contained, bounded surface that wears the project's material signature.
+ * Use for modals, dialogs, featured cards, receipts — objects that *arrive*
+ * and demand a moment of attention.
+ *
+ * The working page stays plain paper/ink. The material is the occasion.
+ *
+ * The parent `<AcheryProvider defaultMaterial="leather">` (or `wood` / `copper`)
+ * sets which signature is used; the `intensity` prop controls how loudly it
+ * surfaces on this object.
+ *
+ * @example
+ * ```tsx
+ * <MaterialCard intensity="surface" header="Close the month" footer={<Button>Bind & archive</Button>}>
+ *   <Eyebrow>November · ready to bind</Eyebrow>
+ *   <Body>Seal the ledger and file it to the archive.</Body>
+ * </MaterialCard>
+ * ```
+ */
+declare function MaterialCard({ intensity, header, footer, children, className, ...props }: MaterialCardProps): react_jsx_runtime.JSX.Element;
+
+export { AccentColor, type AccentDial, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, GlyphAliases, GlyphCategories, type GlyphCategory, type GlyphName, GlyphPicker, type GlyphPickerProps, type GlyphProps, type GlyphSearchResult, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, MaterialCard, type MaterialCardProps, type MaterialIntensity, type MaterialSignature, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, glyphCategory, glyphLabel, searchGlyphs, useConfirm, useTheme, useToast, vars };