@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

package/dist/components/ui/glyph-picker.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { GLYPH_SEARCH, glyphComponent } from './glyph-registry.js';
+import { glyphForeground, glyphTint, glyphTintHover } from './glyph-tint.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from './input-group.js';
+import { cn } from '../../lib/utils.js';
+import { PROJECT_GLYPH_COLORS, PROJECT_GLYPH_NAMES } from '../../_vendor/kortix-shared.js';
+/**
+ * Glyph grid for picking a project icon. Same geometry contract as
+ * `emoji-picker.tsx` on purpose: `h-[368px]`, 9 columns of `size-8` cells in
+ * rows padded `px-1.5`. `project-icon-field.tsx` sizes the popover to that
+ * exact width (9 * 8 + 2 * 1.5 spacing units); a different column count or a
+ * different fixed height changes the popover's geometry the moment the Icon
+ * tab is selected, so both numbers are copied here, not re-derived.
+ *
+ * glyph-picker.test.tsx checks those same four literals — `size-8`, `px-1.5`,
+ * `grid-cols-9`, `h-[368px]` — but never against THIS raw, commented file: the
+ * three grid classes are asserted against `renderToStaticMarkup` output (real
+ * shipped DOM, no comments exist there at all), and the height comparison
+ * strips every block and line comment out of both this file and
+ * emoji-picker.tsx before matching. A doc comment repeating these class
+ * names — like this one — is deliberately safe to write and cannot make
+ * either test pass or fail.
+ *
+ * All 202 catalogue glyphs render in ONE `grid-cols-9`, in
+ * `PROJECT_GLYPH_NAMES`'s declaration order — no category headers. This
+ * shipped with an 8-category sub-grid (sticky header per category) first;
+ * review feedback was that the categories added scannable structure but no
+ * function — nothing filters, sorts, or navigates by category — so they were
+ * cut. `PROJECT_GLYPH_GROUPS` (in `@kortix/shared`) still owns the grouping
+ * and the ordering; `PROJECT_GLYPH_NAMES` is that same catalogue flattened in
+ * declaration order, so related glyphs stay adjacent even with the headers
+ * gone. Flattening it a second time here, instead of importing the flat
+ * export, would risk a reordering that drifts from the shared source.
+ *
+ * The grid IS the colour preview: every cell paints in `color`, not just the
+ * one the user last picked. Clicking a swatch re-tints the whole grid and
+ * leaves the popover open — colour is a modifier you can change your mind
+ * about. Clicking a glyph commits `{ name, color }` and closes it — the glyph
+ * is the choice. That asymmetry is deliberate, not an oversight.
+ *
+ * Unlike an emoji cell (tinted only while `data-active`, via frimousse's
+ * pointer/keyboard tracking), a glyph cell carries its colour in TWO layers:
+ * the icon itself is tinted at rest (`glyphForeground`, so the preview reads
+ * before you ever touch the grid), and the fill + 1px inset ring appear only
+ * on hover (`glyphTintHover` + a local ring map below) — the same tile
+ * treatment an emoji cell shows on `data-active`, so hovering either tab reads
+ * as the same surface.
+ */
+/**
+ * Hover-only ring colour, one literal class per palette colour.
+ *
+ * `glyph-tint.ts` exports the REST tile (`glyphTint`: fill + ring, always on —
+ * built for a host like the project-icon trigger button that stays tinted
+ * once an icon is picked) and the hover FILL restated on its own
+ * (`glyphTintHover`, for fighting a host variant's `hover:bg-*`). Neither is a
+ * hover-scoped RING. A glyph cell here has no rest-state tile at all — only
+ * the tinted icon — so the ring has to be introduced fresh, hover-scoped, and
+ * it has to stay a literal string per colour: Tailwind v4 extracts class names
+ * by scanning source TEXT, so gluing a `hover:` prefix onto a helper's return
+ * value at runtime would compile to nothing.
+ */
+const GLYPH_HOVER_RING = {
+    grey: 'hover:inset-ring-glyph-ring-grey',
+    red: 'hover:inset-ring-glyph-ring-red',
+    orange: 'hover:inset-ring-glyph-ring-orange',
+    yellow: 'hover:inset-ring-glyph-ring-yellow',
+    lime: 'hover:inset-ring-glyph-ring-lime',
+    blue: 'hover:inset-ring-glyph-ring-blue',
+    purple: 'hover:inset-ring-glyph-ring-purple',
+    magenta: 'hover:inset-ring-glyph-ring-magenta',
+};
+/** `color` is typed `string` at the component boundary (it round-trips through
+ *  plain project state, same as `glyph-tint.ts`'s own props) but the hover-ring
+ *  map above is keyed by the narrow palette type, so an unrecognised value —
+ *  stale cached data, a hand-edited row — falls back to grey rather than
+ *  indexing to `undefined` and silently dropping the hover ring. */
+function resolveGlyphColor(color) {
+    return PROJECT_GLYPH_COLORS.includes(color)
+        ? color
+        : 'grey';
+}
+/** Ring geometry declared once — only the colour is per-instance below, same
+ *  reasoning as EMOJI_BUTTON's single `data-[active]:inset-ring-1`. */
+const GLYPH_BUTTON = cn('flex size-8 items-center justify-center rounded-md', 'cursor-pointer select-none', 'transition-[background-color,box-shadow,scale] duration-100 active:scale-[0.96]', 'hover:inset-ring-1');
+/**
+ * A glyph's keyword list always includes its own lowercased name
+ * (glyph-registry.test.tsx pins this), so an empty query matches everything.
+ *
+ * `startsWith`, NOT `includes`. A substring test matches the middle of a word,
+ * which stayed tolerable at 64 glyphs and stopped being so at 202: "cat"
+ * matched `dupli(cat)e` and `notifi(cat)ion`, so searching for the cat returned
+ * Copy and Bell above it. Every keyword here is a whole word a person would
+ * actually type, so anchoring to the start costs nothing real and removes a
+ * class of result that reads as the search being broken.
+ */
+export function matchesSearch(name, query) {
+    if (!query)
+        return true;
+    return GLYPH_SEARCH[name]?.some((keyword) => keyword.startsWith(query)) ?? false;
+}
+export function GlyphPicker({ color, onColorChange, onGlyphSelect, className, }) {
+    const [search, setSearch] = useState('');
+    const query = search.trim().toLowerCase();
+    const resolvedColor = resolveGlyphColor(color);
+    // Filtered even when `query` is empty — `matchesSearch` short-circuits to
+    // `true` there, so this is the one code path for both states rather than a
+    // branch that has to be proven to agree with its sibling.
+    const names = PROJECT_GLYPH_NAMES.filter((name) => matchesSearch(name, query));
+    return (_jsxs("div", { className: cn('isolate flex h-[368px] w-full flex-col', className), children: [_jsxs("div", { className: "space-y-2 p-1", children: [_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { "aria-label": "Search icons", placeholder: "Search icons", variant: "popover", size: "sm", value: search, onChange: (event) => setSearch(event.target.value) }), _jsx(InputGroupSearchClear, { onClick: () => setSearch('') })] }), _jsx("div", { className: "flex items-center justify-between gap-1.5", children: PROJECT_GLYPH_COLORS.map((paletteColor) => (_jsx("button", { type: "button", "data-swatch": paletteColor, "aria-pressed": paletteColor === resolvedColor, "aria-label": `Colour: ${paletteColor}`, onClick: () => onColorChange(paletteColor), className: cn('flex size-7 shrink-0 items-center justify-center rounded-full', 'cursor-pointer transition-[scale] duration-100 active:scale-[0.96]', glyphTint(paletteColor)), children: paletteColor === resolvedColor ? (_jsx(CheckIcon, { className: cn('size-3.5', glyphForeground(paletteColor)) })) : null }, paletteColor))) })] }), _jsx("div", { className: "relative flex-1 overflow-y-auto", children: names.length > 0 ? (_jsx("div", { className: "grid grid-cols-9 px-1.5 pb-1.5 select-none", children: names.map((name) => {
+                        const Glyph = glyphComponent(name);
+                        if (!Glyph)
+                            return null;
+                        return (_jsx("button", { type: "button", "data-glyph": name, "aria-label": name, onClick: () => onGlyphSelect({ name, color: resolvedColor }), className: cn(GLYPH_BUTTON, glyphForeground(color), glyphTintHover(color), GLYPH_HOVER_RING[resolvedColor]), children: _jsx(Glyph, { className: "size-4" }) }, name));
+                    }) })) : (_jsxs("p", { className: "text-muted-foreground absolute inset-0 flex items-center justify-center px-6 text-center text-sm text-balance", children: ["No icons for \u201C", search, "\u201D"] })) })] }));
+}

package/dist/components/ui/glyph-registry.d.ts

@@ -0,0 +1,36 @@
+/**
+ * name -> Phosphor component, for the 202 glyphs in the shared catalogue.
+ *
+ * The imports are EXPLICIT and one per glyph. `import * as Phosphor` would
+ * resolve names dynamically and defeat tree-shaking, pulling all 1512 icons
+ * (~5.3 MB of path data) into the bundle instead of the 202 we use (~704 KB
+ * raw, well under budget gzipped).
+ *
+ * The catalogue in @kortix/shared is the source of truth for WHICH names exist;
+ * this file is the source of truth for what each one DRAWS. glyph-registry.test
+ * asserts the two agree in both directions, so a name added to one and not the
+ * other fails CI rather than shipping a blank tile.
+ */
+import { type Icon } from '@phosphor-icons/react';
+export declare const GLYPH_COMPONENTS: Record<string, Icon>;
+/**
+ * `Object.hasOwn`, not a bare index. `GLYPH_COMPONENTS` is an object literal, so
+ * it inherits Object.prototype: a bare `GLYPH_COMPONENTS['toString']` returns a
+ * function — truthy, not a component — and React throws when it tries to render
+ * it. Same for `constructor` and `valueOf`.
+ *
+ * Not reachable through the API today: `normalizeProjectGlyph` allowlists the
+ * name against the catalogue on every write AND on the read path, and rejects
+ * all of those keys (verified). This guard exists so the helper is safe on its
+ * own terms rather than only because two other layers happen to hold — a future
+ * caller passing a name from a URL, localStorage, or a cached payload would
+ * otherwise turn a typo into a render crash.
+ */
+export declare function glyphComponent(name: string): Icon | null;
+/**
+ * Search terms per glyph. Always includes the name lowercased, plus the words a
+ * user would actually type — 'bin' and 'delete' for Trash, 'buy' and 'basket'
+ * for ShoppingCart. Without these, search matches only the Phosphor identifier,
+ * which is not a word most people would guess.
+ */
+export declare const GLYPH_SEARCH: Record<string, string[]>;

package/dist/components/ui/glyph-registry.js

@@ -0,0 +1,479 @@
+'use client';
+/**
+ * name -> Phosphor component, for the 202 glyphs in the shared catalogue.
+ *
+ * The imports are EXPLICIT and one per glyph. `import * as Phosphor` would
+ * resolve names dynamically and defeat tree-shaking, pulling all 1512 icons
+ * (~5.3 MB of path data) into the bundle instead of the 202 we use (~704 KB
+ * raw, well under budget gzipped).
+ *
+ * The catalogue in @kortix/shared is the source of truth for WHICH names exist;
+ * this file is the source of truth for what each one DRAWS. glyph-registry.test
+ * asserts the two agree in both directions, so a name added to one and not the
+ * other fails CI rather than shipping a blank tile.
+ */
+import { AirplaneIcon, AlienIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowSquareOutIcon, ArrowUUpLeftIcon, ArrowUpIcon, ArrowsClockwiseIcon, ArrowsInIcon, ArrowsLeftRightIcon, ArrowsOutIcon, AsteriskIcon, AtIcon, BabyIcon, BandaidsIcon, BankIcon, BarbellIcon, BaseballIcon, BasketballIcon, BeerSteinIcon, BellIcon, BicycleIcon, BirdIcon, BoatIcon, BoneIcon, BookIcon, BookmarkIcon, BreadIcon, BriefcaseIcon, BugIcon, BusIcon, ButterflyIcon, CactusIcon, CakeIcon, CarIcon, CarrotIcon, CatIcon, ChartBarIcon, ChartLineIcon, ChartPieIcon, CheckIcon, CircleIcon, ClipboardIcon, CloudIcon, CloudLightningIcon, CloudRainIcon, CloudSnowIcon, ClubIcon, CodeIcon, CoffeeIcon, CoinsIcon, CookieIcon, CopyIcon, CowIcon, CpuIcon, CreditCardIcon, CrownIcon, CubeIcon, CurrencyDollarIcon, DatabaseIcon, DeviceMobileIcon, DiamondIcon, DiscIcon, DogIcon, DropIcon, EggIcon, EqualizerIcon, EraserIcon, EyeIcon, FeatherIcon, FileIcon, FileTextIcon, FilesIcon, FireIcon, FirstAidIcon, FishIcon, FlagIcon, FlowerIcon, FolderIcon, FolderOpenIcon, FolderPlusIcon, FootballIcon, GhostIcon, GiftIcon, GitBranchIcon, GolfIcon, GuitarIcon, HamburgerIcon, HammerIcon, HandIcon, HandshakeIcon, HashIcon, HeadphonesIcon, HeartIcon, HeartbeatIcon, HexagonIcon, HorseIcon, IceCreamIcon, InfoIcon, JeepIcon, KeyIcon, KeyboardIcon, LeafIcon, LightbulbIcon, LightningIcon, LinkSimpleIcon, LockIcon, MartiniIcon, MedalIcon, MetronomeIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MotorcycleIcon, MountainsIcon, MusicNoteIcon, MusicNotesIcon, NewspaperIcon, NoteIcon, NotebookIcon, NumberCircleEightIcon, NumberCircleFiveIcon, NumberCircleFourIcon, NumberCircleNineIcon, NumberCircleOneIcon, NumberCircleSevenIcon, NumberCircleSixIcon, NumberCircleThreeIcon, NumberCircleTwoIcon, NumberCircleZeroIcon, PackageIcon, PaperclipIcon, PawPrintIcon, PencilIcon, PercentIcon, PersonSimpleRunIcon, PersonSimpleSwimIcon, PiggyBankIcon, PillIcon, PingPongIcon, PizzaIcon, PlanetIcon, PlaylistIcon, PlusIcon, PolygonIcon, QuestionIcon, RabbitIcon, RacquetIcon, RadioIcon, RainbowIcon, ReceiptIcon, RobotIcon, RocketIcon, ScissorsIcon, ScooterIcon, ShareNetworkIcon, ShoppingCartIcon, ShrimpIcon, SmileyIcon, SmileyMehIcon, SmileySadIcon, SnowflakeIcon, SoccerBallIcon, SpadeIcon, SparkleIcon, SpeakerHighIcon, SquareIcon, StarIcon, StethoscopeIcon, SunIcon, SunglassesIcon, SyringeIcon, TagIcon, TargetIcon, TaxiIcon, TennisBallIcon, TerminalIcon, ThermometerIcon, ThumbsUpIcon, TrainIcon, TrashIcon, TreeIcon, TrendDownIcon, TrendUpIcon, TriangleIcon, TrophyIcon, TruckIcon, UmbrellaIcon, UserIcon, UsersIcon, VanIcon, VolleyballIcon, WalletIcon, WarningIcon, WaveformIcon, WindIcon, WineIcon, WrenchIcon, XIcon, } from '@phosphor-icons/react';
+export const GLYPH_COMPONENTS = {
+    // Objects
+    Trash: TrashIcon,
+    ShoppingCart: ShoppingCartIcon,
+    Package: PackageIcon,
+    Briefcase: BriefcaseIcon,
+    Gift: GiftIcon,
+    Lightbulb: LightbulbIcon,
+    Wrench: WrenchIcon,
+    Hammer: HammerIcon,
+    Key: KeyIcon,
+    Lock: LockIcon,
+    Umbrella: UmbrellaIcon,
+    Trophy: TrophyIcon,
+    // Shapes
+    Circle: CircleIcon,
+    Square: SquareIcon,
+    Triangle: TriangleIcon,
+    Diamond: DiamondIcon,
+    Hexagon: HexagonIcon,
+    Star: StarIcon,
+    Heart: HeartIcon,
+    Lightning: LightningIcon,
+    Spade: SpadeIcon,
+    Club: ClubIcon,
+    Cube: CubeIcon,
+    Polygon: PolygonIcon,
+    // Files
+    File: FileIcon,
+    FileText: FileTextIcon,
+    Folder: FolderIcon,
+    FolderOpen: FolderOpenIcon,
+    Note: NoteIcon,
+    Book: BookIcon,
+    Newspaper: NewspaperIcon,
+    Paperclip: PaperclipIcon,
+    Archive: ArchiveIcon,
+    Notebook: NotebookIcon,
+    Files: FilesIcon,
+    FolderPlus: FolderPlusIcon,
+    // Actions
+    Plus: PlusIcon,
+    Minus: MinusIcon,
+    Copy: CopyIcon,
+    Check: CheckIcon,
+    X: XIcon,
+    Pencil: PencilIcon,
+    Bookmark: BookmarkIcon,
+    Eraser: EraserIcon,
+    Scissors: ScissorsIcon,
+    LinkSimple: LinkSimpleIcon,
+    ShareNetwork: ShareNetworkIcon,
+    Clipboard: ClipboardIcon,
+    // Arrows
+    ArrowUp: ArrowUpIcon,
+    ArrowDown: ArrowDownIcon,
+    ArrowLeft: ArrowLeftIcon,
+    ArrowRight: ArrowRightIcon,
+    ArrowsClockwise: ArrowsClockwiseIcon,
+    ArrowSquareOut: ArrowSquareOutIcon,
+    TrendUp: TrendUpIcon,
+    TrendDown: TrendDownIcon,
+    ArrowsLeftRight: ArrowsLeftRightIcon,
+    ArrowUUpLeft: ArrowUUpLeftIcon,
+    ArrowsOut: ArrowsOutIcon,
+    ArrowsIn: ArrowsInIcon,
+    // Tech
+    Code: CodeIcon,
+    Terminal: TerminalIcon,
+    Database: DatabaseIcon,
+    Cloud: CloudIcon,
+    Cpu: CpuIcon,
+    Bug: BugIcon,
+    GitBranch: GitBranchIcon,
+    Rocket: RocketIcon,
+    Monitor: MonitorIcon,
+    DeviceMobile: DeviceMobileIcon,
+    Keyboard: KeyboardIcon,
+    Robot: RobotIcon,
+    // Nature
+    Leaf: LeafIcon,
+    Tree: TreeIcon,
+    Sun: SunIcon,
+    Moon: MoonIcon,
+    Drop: DropIcon,
+    Fire: FireIcon,
+    Mountains: MountainsIcon,
+    Planet: PlanetIcon,
+    Flower: FlowerIcon,
+    Cactus: CactusIcon,
+    Snowflake: SnowflakeIcon,
+    Rainbow: RainbowIcon,
+    // Symbols
+    Hash: HashIcon,
+    At: AtIcon,
+    Percent: PercentIcon,
+    Asterisk: AsteriskIcon,
+    Question: QuestionIcon,
+    Warning: WarningIcon,
+    Info: InfoIcon,
+    Bell: BellIcon,
+    Crown: CrownIcon,
+    Flag: FlagIcon,
+    Medal: MedalIcon,
+    Sparkle: SparkleIcon,
+    // Food
+    Carrot: CarrotIcon,
+    Pizza: PizzaIcon,
+    Hamburger: HamburgerIcon,
+    IceCream: IceCreamIcon,
+    Coffee: CoffeeIcon,
+    BeerStein: BeerSteinIcon,
+    Cookie: CookieIcon,
+    Cake: CakeIcon,
+    Egg: EggIcon,
+    Bread: BreadIcon,
+    Wine: WineIcon,
+    Martini: MartiniIcon,
+    // Animals
+    Dog: DogIcon,
+    Cat: CatIcon,
+    Bird: BirdIcon,
+    Butterfly: ButterflyIcon,
+    Rabbit: RabbitIcon,
+    Horse: HorseIcon,
+    Cow: CowIcon,
+    PawPrint: PawPrintIcon,
+    Fish: FishIcon,
+    Shrimp: ShrimpIcon,
+    Feather: FeatherIcon,
+    Bone: BoneIcon,
+    // Transport
+    Car: CarIcon,
+    Bus: BusIcon,
+    Truck: TruckIcon,
+    Train: TrainIcon,
+    Airplane: AirplaneIcon,
+    Bicycle: BicycleIcon,
+    Motorcycle: MotorcycleIcon,
+    Boat: BoatIcon,
+    Scooter: ScooterIcon,
+    Taxi: TaxiIcon,
+    Van: VanIcon,
+    Jeep: JeepIcon,
+    // People
+    User: UserIcon,
+    Users: UsersIcon,
+    Smiley: SmileyIcon,
+    SmileyMeh: SmileyMehIcon,
+    SmileySad: SmileySadIcon,
+    Ghost: GhostIcon,
+    Alien: AlienIcon,
+    Baby: BabyIcon,
+    PersonSimpleRun: PersonSimpleRunIcon,
+    Hand: HandIcon,
+    ThumbsUp: ThumbsUpIcon,
+    Eye: EyeIcon,
+    // Music
+    MusicNote: MusicNoteIcon,
+    MusicNotes: MusicNotesIcon,
+    Guitar: GuitarIcon,
+    Microphone: MicrophoneIcon,
+    SpeakerHigh: SpeakerHighIcon,
+    Radio: RadioIcon,
+    Playlist: PlaylistIcon,
+    Metronome: MetronomeIcon,
+    Waveform: WaveformIcon,
+    Disc: DiscIcon,
+    Headphones: HeadphonesIcon,
+    Equalizer: EqualizerIcon,
+    // Sport
+    Basketball: BasketballIcon,
+    Football: FootballIcon,
+    SoccerBall: SoccerBallIcon,
+    Baseball: BaseballIcon,
+    TennisBall: TennisBallIcon,
+    Barbell: BarbellIcon,
+    Target: TargetIcon,
+    Golf: GolfIcon,
+    Volleyball: VolleyballIcon,
+    PingPong: PingPongIcon,
+    Racquet: RacquetIcon,
+    PersonSimpleSwim: PersonSimpleSwimIcon,
+    // Money
+    CurrencyDollar: CurrencyDollarIcon,
+    Wallet: WalletIcon,
+    CreditCard: CreditCardIcon,
+    PiggyBank: PiggyBankIcon,
+    Coins: CoinsIcon,
+    Receipt: ReceiptIcon,
+    Bank: BankIcon,
+    ChartLine: ChartLineIcon,
+    Tag: TagIcon,
+    ChartBar: ChartBarIcon,
+    ChartPie: ChartPieIcon,
+    Handshake: HandshakeIcon,
+    // Care
+    CloudRain: CloudRainIcon,
+    CloudSnow: CloudSnowIcon,
+    CloudLightning: CloudLightningIcon,
+    Wind: WindIcon,
+    Thermometer: ThermometerIcon,
+    Sunglasses: SunglassesIcon,
+    Heartbeat: HeartbeatIcon,
+    Pill: PillIcon,
+    FirstAid: FirstAidIcon,
+    Syringe: SyringeIcon,
+    Bandaids: BandaidsIcon,
+    Stethoscope: StethoscopeIcon,
+    // Numbers
+    NumberCircleZero: NumberCircleZeroIcon,
+    NumberCircleOne: NumberCircleOneIcon,
+    NumberCircleTwo: NumberCircleTwoIcon,
+    NumberCircleThree: NumberCircleThreeIcon,
+    NumberCircleFour: NumberCircleFourIcon,
+    NumberCircleFive: NumberCircleFiveIcon,
+    NumberCircleSix: NumberCircleSixIcon,
+    NumberCircleSeven: NumberCircleSevenIcon,
+    NumberCircleEight: NumberCircleEightIcon,
+    NumberCircleNine: NumberCircleNineIcon,
+};
+/**
+ * `Object.hasOwn`, not a bare index. `GLYPH_COMPONENTS` is an object literal, so
+ * it inherits Object.prototype: a bare `GLYPH_COMPONENTS['toString']` returns a
+ * function — truthy, not a component — and React throws when it tries to render
+ * it. Same for `constructor` and `valueOf`.
+ *
+ * Not reachable through the API today: `normalizeProjectGlyph` allowlists the
+ * name against the catalogue on every write AND on the read path, and rejects
+ * all of those keys (verified). This guard exists so the helper is safe on its
+ * own terms rather than only because two other layers happen to hold — a future
+ * caller passing a name from a URL, localStorage, or a cached payload would
+ * otherwise turn a typo into a render crash.
+ */
+export function glyphComponent(name) {
+    return Object.hasOwn(GLYPH_COMPONENTS, name) ? (GLYPH_COMPONENTS[name] ?? null) : null;
+}
+/**
+ * Search terms per glyph. Always includes the name lowercased, plus the words a
+ * user would actually type — 'bin' and 'delete' for Trash, 'buy' and 'basket'
+ * for ShoppingCart. Without these, search matches only the Phosphor identifier,
+ * which is not a word most people would guess.
+ */
+export const GLYPH_SEARCH = {
+    // Objects
+    Trash: ['trash', 'bin', 'delete', 'remove'],
+    ShoppingCart: ['shoppingcart', 'cart', 'buy', 'basket', 'shop', 'store'],
+    Package: ['package', 'box', 'parcel', 'ship', 'delivery'],
+    Briefcase: ['briefcase', 'work', 'business', 'job', 'case'],
+    Gift: ['gift', 'present', 'reward', 'box'],
+    Lightbulb: ['lightbulb', 'idea', 'bulb', 'light', 'tip'],
+    Wrench: ['wrench', 'tool', 'fix', 'settings', 'repair'],
+    Hammer: ['hammer', 'tool', 'build', 'construct'],
+    Key: ['key', 'unlock', 'password', 'access', 'security'],
+    Lock: ['lock', 'secure', 'security', 'password', 'privacy', 'locked'],
+    Umbrella: ['umbrella', 'rain', 'weather', 'protect', 'insurance'],
+    Trophy: ['trophy', 'award', 'win', 'winner', 'prize', 'achievement'],
+    // Shapes
+    Circle: ['circle', 'round', 'dot', 'shape'],
+    Square: ['square', 'box', 'shape'],
+    Triangle: ['triangle', 'shape'],
+    Diamond: ['diamond', 'gem', 'shape', 'rhombus'],
+    Hexagon: ['hexagon', 'shape', 'hex'],
+    Star: ['star', 'favourite', 'favorite', 'rating'],
+    Heart: ['heart', 'love', 'like', 'favourite', 'favorite'],
+    Lightning: ['lightning', 'bolt', 'fast', 'power', 'energy', 'zap'],
+    Spade: ['spade', 'card', 'cards', 'suit', 'poker'],
+    Club: ['club', 'card', 'cards', 'suit', 'poker'],
+    Cube: ['cube', '3d', 'box', 'shape', 'block'],
+    Polygon: ['polygon', 'shape', 'geometry', 'vector'],
+    // Files
+    File: ['file', 'document', 'page'],
+    FileText: ['filetext', 'document', 'text', 'doc', 'page'],
+    Folder: ['folder', 'directory'],
+    FolderOpen: ['folderopen', 'directory', 'open'],
+    Note: ['note', 'memo', 'sticky'],
+    Book: ['book', 'read', 'docs', 'manual', 'library'],
+    Newspaper: ['newspaper', 'news', 'article', 'press'],
+    Paperclip: ['paperclip', 'attach', 'attachment', 'clip'],
+    Archive: ['archive', 'zip', 'storage', 'box', 'compress'],
+    Notebook: ['notebook', 'journal', 'write', 'notes'],
+    Files: ['files', 'documents', 'multiple', 'stack'],
+    FolderPlus: ['folderplus', 'newfolder', 'add', 'create', 'directory'],
+    // Actions
+    Plus: ['plus', 'add', 'new', 'create'],
+    Minus: ['minus', 'remove', 'subtract', 'less'],
+    Copy: ['copy', 'duplicate', 'clone'],
+    Check: ['check', 'done', 'tick', 'complete', 'ok'],
+    X: ['x', 'close', 'cancel', 'cross', 'remove'],
+    Pencil: ['pencil', 'edit', 'write', 'draw'],
+    Bookmark: ['bookmark', 'save', 'mark', 'flag'],
+    Eraser: ['eraser', 'delete', 'remove', 'undo', 'clear'],
+    Scissors: ['scissors', 'cut', 'trim', 'snip'],
+    LinkSimple: ['linksimple', 'link', 'url', 'chain', 'connect'],
+    ShareNetwork: ['sharenetwork', 'share', 'network', 'send', 'distribute'],
+    Clipboard: ['clipboard', 'paste', 'copy'],
+    // Arrows
+    ArrowUp: ['arrowup', 'up', 'north', 'increase'],
+    ArrowDown: ['arrowdown', 'down', 'south', 'decrease'],
+    ArrowLeft: ['arrowleft', 'left', 'back', 'west'],
+    ArrowRight: ['arrowright', 'right', 'forward', 'next', 'east'],
+    ArrowsClockwise: ['arrowsclockwise', 'refresh', 'reload', 'sync', 'retry'],
+    ArrowSquareOut: ['arrowsquareout', 'external', 'open', 'link', 'launch'],
+    TrendUp: ['trendup', 'growth', 'increase', 'chart', 'up'],
+    TrendDown: ['trenddown', 'decline', 'decrease', 'chart', 'down'],
+    ArrowsLeftRight: ['arrowsleftright', 'swap', 'exchange', 'toggle', 'switch'],
+    ArrowUUpLeft: ['arrowuupleft', 'undo', 'back', 'revert'],
+    ArrowsOut: ['arrowsout', 'expand', 'fullscreen', 'maximize', 'resize'],
+    ArrowsIn: ['arrowsin', 'collapse', 'shrink', 'minimize', 'resize'],
+    // Tech
+    Code: ['code', 'develop', 'program', 'source'],
+    Terminal: ['terminal', 'console', 'shell', 'cli', 'command'],
+    Database: ['database', 'db', 'storage', 'data', 'sql'],
+    Cloud: ['cloud', 'server', 'hosting', 'sky'],
+    Cpu: ['cpu', 'chip', 'processor', 'compute', 'hardware'],
+    Bug: ['bug', 'issue', 'defect', 'error', 'debug'],
+    GitBranch: ['gitbranch', 'git', 'branch', 'repo', 'version'],
+    Rocket: ['rocket', 'launch', 'ship', 'deploy', 'space'],
+    Monitor: ['monitor', 'screen', 'display', 'computer'],
+    DeviceMobile: ['devicemobile', 'phone', 'mobile', 'smartphone', 'app'],
+    Keyboard: ['keyboard', 'type', 'keys', 'input'],
+    Robot: ['robot', 'ai', 'bot', 'automation', 'machine'],
+    // Nature
+    Leaf: ['leaf', 'nature', 'plant', 'eco', 'green'],
+    Tree: ['tree', 'nature', 'forest', 'plant'],
+    Sun: ['sun', 'day', 'light', 'weather', 'bright'],
+    Moon: ['moon', 'night', 'dark', 'sleep'],
+    Drop: ['drop', 'water', 'liquid', 'rain'],
+    Fire: ['fire', 'flame', 'hot', 'burn', 'trending'],
+    Mountains: ['mountains', 'mountain', 'peak', 'nature', 'hike'],
+    Planet: ['planet', 'space', 'world', 'globe', 'orbit'],
+    Flower: ['flower', 'bloom', 'plant', 'nature', 'garden'],
+    Cactus: ['cactus', 'plant', 'desert', 'succulent'],
+    Snowflake: ['snowflake', 'snow', 'winter', 'cold', 'weather'],
+    Rainbow: ['rainbow', 'colour', 'color', 'weather', 'pride'],
+    // Symbols
+    Hash: ['hash', 'number', 'tag', 'channel', 'pound'],
+    At: ['at', 'mention', 'email', 'address'],
+    Percent: ['percent', 'percentage', 'discount', 'rate'],
+    Asterisk: ['asterisk', 'star', 'required', 'wildcard'],
+    Question: ['question', 'help', 'ask', 'faq', 'unknown'],
+    Warning: ['warning', 'alert', 'caution', 'danger'],
+    Info: ['info', 'information', 'about', 'details'],
+    Bell: ['bell', 'notification', 'alert', 'reminder'],
+    Crown: ['crown', 'king', 'queen', 'royal', 'premium', 'vip'],
+    Flag: ['flag', 'mark', 'report', 'country', 'milestone'],
+    Medal: ['medal', 'award', 'achievement', 'win', 'honor'],
+    Sparkle: ['sparkle', 'shine', 'magic', 'new', 'ai', 'clean'],
+    // Food
+    Carrot: ['carrot', 'vegetable', 'food', 'healthy'],
+    Pizza: ['pizza', 'food', 'slice', 'italian'],
+    Hamburger: ['hamburger', 'burger', 'food', 'fastfood'],
+    IceCream: ['icecream', 'dessert', 'food', 'cold', 'sweet'],
+    Coffee: ['coffee', 'drink', 'cafe', 'caffeine', 'cup'],
+    BeerStein: ['beerstein', 'beer', 'drink', 'alcohol', 'pub'],
+    Cookie: ['cookie', 'dessert', 'food', 'sweet', 'snack'],
+    Cake: ['cake', 'dessert', 'birthday', 'celebration', 'sweet'],
+    Egg: ['egg', 'food', 'breakfast'],
+    Bread: ['bread', 'food', 'bakery', 'loaf'],
+    Wine: ['wine', 'drink', 'alcohol', 'glass'],
+    Martini: ['martini', 'cocktail', 'drink', 'alcohol', 'bar'],
+    // Animals
+    Dog: ['dog', 'pet', 'animal'],
+    Cat: ['cat', 'pet', 'animal'],
+    Bird: ['bird', 'animal', 'fly'],
+    Butterfly: ['butterfly', 'insect', 'animal', 'nature'],
+    Rabbit: ['rabbit', 'bunny', 'animal', 'pet'],
+    Horse: ['horse', 'animal', 'ride'],
+    Cow: ['cow', 'animal', 'farm', 'cattle'],
+    PawPrint: ['pawprint', 'paw', 'pet', 'animal', 'print'],
+    Fish: ['fish', 'animal', 'sea', 'aquarium', 'ocean'],
+    Shrimp: ['shrimp', 'seafood', 'animal', 'ocean'],
+    Feather: ['feather', 'bird', 'light', 'write'],
+    Bone: ['bone', 'dog', 'pet', 'skeleton'],
+    // Transport
+    Car: ['car', 'vehicle', 'drive', 'auto'],
+    Bus: ['bus', 'vehicle', 'transport', 'public'],
+    Truck: ['truck', 'vehicle', 'delivery', 'cargo'],
+    Train: ['train', 'vehicle', 'transport', 'rail'],
+    Airplane: ['airplane', 'plane', 'flight', 'travel', 'fly'],
+    Bicycle: ['bicycle', 'bike', 'cycle', 'ride'],
+    Motorcycle: ['motorcycle', 'bike', 'ride', 'vehicle'],
+    Boat: ['boat', 'ship', 'sail', 'water'],
+    Scooter: ['scooter', 'ride', 'vehicle'],
+    Taxi: ['taxi', 'cab', 'ride', 'car'],
+    Van: ['van', 'vehicle', 'delivery'],
+    Jeep: ['jeep', 'car', 'offroad', 'vehicle', 'suv'],
+    // People
+    User: ['user', 'person', 'profile', 'account'],
+    Users: ['users', 'people', 'team', 'group'],
+    Smiley: ['smiley', 'happy', 'face', 'emoji', 'smile'],
+    SmileyMeh: ['smileymeh', 'meh', 'neutral', 'face', 'emoji'],
+    SmileySad: ['smileysad', 'sad', 'face', 'emoji', 'unhappy'],
+    Ghost: ['ghost', 'spooky', 'halloween', 'error', '404'],
+    Alien: ['alien', 'space', 'ufo', 'extraterrestrial'],
+    Baby: ['baby', 'infant', 'child', 'kid'],
+    PersonSimpleRun: ['personsimplerun', 'run', 'running', 'exercise', 'fitness'],
+    Hand: ['hand', 'stop', 'wave', 'gesture'],
+    ThumbsUp: ['thumbsup', 'like', 'approve', 'good', 'vote'],
+    Eye: ['eye', 'view', 'see', 'watch', 'visibility'],
+    // Music
+    MusicNote: ['musicnote', 'music', 'note', 'song', 'sound'],
+    MusicNotes: ['musicnotes', 'music', 'notes', 'song', 'sound', 'playlist'],
+    Guitar: ['guitar', 'music', 'instrument', 'band'],
+    Microphone: ['microphone', 'mic', 'record', 'audio', 'podcast', 'sing'],
+    SpeakerHigh: ['speakerhigh', 'speaker', 'volume', 'sound', 'audio'],
+    Radio: ['radio', 'music', 'broadcast', 'audio', 'fm'],
+    Playlist: ['playlist', 'music', 'queue', 'songs'],
+    Metronome: ['metronome', 'music', 'tempo', 'beat', 'rhythm'],
+    Waveform: ['waveform', 'audio', 'sound', 'wave', 'music'],
+    Disc: ['disc', 'cd', 'vinyl', 'record', 'album'],
+    Headphones: ['headphones', 'music', 'audio', 'listen', 'sound'],
+    Equalizer: ['equalizer', 'audio', 'sound', 'mix', 'levels'],
+    // Sport
+    Basketball: ['basketball', 'sport', 'ball', 'nba'],
+    Football: ['football', 'sport', 'nfl', 'ball', 'american'],
+    SoccerBall: ['soccerball', 'soccer', 'football', 'sport', 'ball'],
+    Baseball: ['baseball', 'sport', 'ball', 'mlb'],
+    TennisBall: ['tennisball', 'tennis', 'sport', 'ball'],
+    Barbell: ['barbell', 'gym', 'fitness', 'weights', 'workout'],
+    Target: ['target', 'goal', 'aim', 'focus', 'bullseye'],
+    Golf: ['golf', 'sport', 'club', 'ball'],
+    Volleyball: ['volleyball', 'sport', 'ball'],
+    PingPong: ['pingpong', 'tabletennis', 'sport', 'ball', 'paddle'],
+    Racquet: ['racquet', 'racket', 'tennis', 'sport', 'badminton'],
+    PersonSimpleSwim: ['personsimpleswim', 'swim', 'swimming', 'pool', 'sport'],
+    // Money
+    CurrencyDollar: ['currencydollar', 'dollar', 'money', 'price', 'cost', 'currency'],
+    Wallet: ['wallet', 'money', 'payment', 'cash'],
+    CreditCard: ['creditcard', 'card', 'payment', 'pay', 'money'],
+    PiggyBank: ['piggybank', 'savings', 'budget', 'finance', 'save', 'money'],
+    Coins: ['coins', 'money', 'cash', 'currency', 'change'],
+    Receipt: ['receipt', 'invoice', 'bill', 'payment', 'order'],
+    Bank: ['bank', 'finance', 'money', 'institution'],
+    ChartLine: ['chartline', 'chart', 'graph', 'analytics', 'trend', 'stats'],
+    Tag: ['tag', 'price', 'label', 'discount', 'sale'],
+    ChartBar: ['chartbar', 'chart', 'graph', 'analytics', 'stats', 'bar'],
+    ChartPie: ['chartpie', 'chart', 'graph', 'analytics', 'stats', 'pie'],
+    Handshake: ['handshake', 'deal', 'partnership', 'agreement', 'business'],
+    // Care
+    CloudRain: ['cloudrain', 'rain', 'weather', 'storm'],
+    CloudSnow: ['cloudsnow', 'snow', 'weather', 'winter'],
+    CloudLightning: ['cloudlightning', 'lightning', 'storm', 'thunder', 'weather'],
+    Wind: ['wind', 'weather', 'breeze', 'air'],
+    Thermometer: ['thermometer', 'temperature', 'fever', 'weather', 'health'],
+    Sunglasses: ['sunglasses', 'shades', 'summer', 'fashion'],
+    Heartbeat: ['heartbeat', 'health', 'pulse', 'vitals', 'medical', 'ecg'],
+    Pill: ['pill', 'medicine', 'drug', 'health', 'pharmacy'],
+    FirstAid: ['firstaid', 'medical', 'health', 'emergency', 'kit'],
+    Syringe: ['syringe', 'injection', 'vaccine', 'medical', 'shot'],
+    Bandaids: ['bandaids', 'bandage', 'injury', 'medical'],
+    Stethoscope: ['stethoscope', 'doctor', 'medical', 'health', 'checkup'],
+    // Numbers
+    NumberCircleZero: ['numbercirclezero', 'zero', '0', 'number'],
+    NumberCircleOne: ['numbercircleone', 'one', '1', 'number'],
+    NumberCircleTwo: ['numbercircletwo', 'two', '2', 'number'],
+    NumberCircleThree: ['numbercirclethree', 'three', '3', 'number'],
+    NumberCircleFour: ['numbercirclefour', 'four', '4', 'number'],
+    NumberCircleFive: ['numbercirclefive', 'five', '5', 'number'],
+    NumberCircleSix: ['numbercirclesix', 'six', '6', 'number'],
+    NumberCircleSeven: ['numbercircleseven', 'seven', '7', 'number'],
+    NumberCircleEight: ['numbercircleeight', 'eight', '8', 'number'],
+    NumberCircleNine: ['numbercirclenine', 'nine', '9', 'number'],
+};

package/dist/components/ui/glyph-tint.d.ts

@@ -0,0 +1,6 @@
+/** The tile: fill + 1px inset ring, in the chosen colour. */
+export declare function glyphTint(color: string): string;
+/** Holds `glyphTint`'s fill through a host variant's own hover background. */
+export declare function glyphTintHover(color: string): string;
+/** The glyph itself, in the ring colour. */
+export declare function glyphForeground(color: string): string;