4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T1b2f,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { signatureShapePaths, type SignatureShapeName } from "@/lib/cojeev/signature-shapes"; import { Icon, Disk } from "@/components/ui/icon"; import { ShapeMorph } from "@/components/ui/shape"; import { AnimatedIcon, type IconMotion } from "@/components/ui/animated-icon"; export type ItemAdornmentColor = "pink" | "yellow" | "olive" | "blue"; export type ItemAdornmentOptions = { shape?: SignatureShapeName; /** A palette name or CSS color. Supply foreground for a custom dark color. */ color?: ItemAdornmentColor | (string & {}); foreground?: string; /** An Icon name, custom decorative node, or false for the silhouette alone. */ icon?: string | React.ReactNode; /** Hide the glyph independently of its background silhouette. */ showIcon?: boolean; /** Hide the silhouette while keeping the glyph in the row's foreground. */ showBackground?: boolean; effect?: IconMotion; }; export type ItemAdornmentValue = "auto" | "none" | false | ItemAdornmentOptions | React.ReactElement; export type ItemAdornmentItemProps = { adornment?: ItemAdornmentValue; /** Keeps the visual identity stable when a label changes or is translated. */ adornmentId?: string; }; const signatureShapeNames = Object.keys(signatureShapePaths) as SignatureShapeName[]; const colors: ItemAdornmentColor[] = ["pink", "blue", "yellow", "olive"]; const glyphs = ["sparkles", "flower", "leaf", "star", "circle-plus", "zap"]; const namedGlyphs: [RegExp, string][] = [ [/github/i, "github"], [/setting|preference/i, "settings"], [/save/i, "save"], [/copy|duplicate/i, "copy"], [/delete|remove|trash/i, "trash-2"], [/share/i, "share-2"], [/download|export/i, "download"], [/upload|import/i, "upload"], [/file|document/i, "file-text"], [/folder|project/i, "folder"], [/home|overview/i, "house"], [/search|find/i, "search"], [/calendar|date/i, "calendar"], [/user|profile|account/i, "user"], [/help|support/i, "circle-help"], ]; /** A pure identity mapping: independent of order, filtering, and hydration. */ export function resolveItemAdornment(identity: string) { let hash = 2166136261; for (const character of identity) hash = Math.imul(hash ^ character.codePointAt(0)!, 16777619) >>> 0; return { shape: signatureShapeNames[hash % signatureShapeNames.length], color: colors[(hash >>> 8) % colors.length], icon: namedGlyphs.find(([pattern]) => pattern.test(identity))?.[1] ?? glyphs[(hash >>> 16) % glyphs.length], }; } export function itemText(children: React.ReactNode): string { return React.Children.toArray(children).map(child => typeof child === "string" || typeof child === "number" ? String(child) : React.isValidElement<{ children?: React.ReactNode }>(child) ? itemText(child.props.children) : "", ).join(" ").trim(); } /** Menus use one identity layer: a glyph by default, or an explicit silhouette. */ export function menuAdornment(value?: ItemAdornmentValue): ItemAdornmentValue { if (value === false || value === "none" || React.isValidElement(value)) return value; const options = typeof value === "object" ? value : {}; const silhouette = options.showBackground === true || options.showIcon === false || options.icon === false || options.icon === null; return silhouette ? { ...options, showIcon: false } : { ...options, showBackground: false }; } export type ItemAdornmentProps = Omit, "children"> & { identity: string; value?: ItemAdornmentValue; size?: "sm" | "default" | "lg"; }; export function ItemAdornment({ identity, value = "auto", size = "default", className, style, ...props }: ItemAdornmentProps) { if (value === false || value === "none") return null; if (React.isValidElement(value)) return ; const options = typeof value === "object" ? value : {}; const resolved = { ...resolveItemAdornment(identity), ...options }; const showIcon = resolved.showIcon !== false && resolved.icon !== false && resolved.icon != null; const showBackground = resolved.showBackground !== false; if (!showIcon && !showBackground) return null; const color = colors.includes(resolved.color as ItemAdornmentColor) ? `var(--v-${resolved.color})` : resolved.color; return ; } function hasItemVisual(children: React.ReactNode): boolean { return React.Children.toArray(children).some(child => React.isValidElement<{ children?: React.ReactNode }>(child) && (child.type === Icon || child.type === Disk || child.type === AnimatedIcon || child.type === ItemAdornment || (child.type === React.Fragment && hasItemVisual(child.props.children)))); } /** Decorate the native child itself when Radix's asChild composition is used. */ export function adornItem(children: React.ReactNode, adornment: ItemAdornmentValue | undefined, identity: string, asChild?: boolean, trailing?: React.ReactNode): React.ReactNode { if (asChild && React.isValidElement<{ children?: React.ReactNode }>(children)) { return React.cloneElement(children, { children: adornItem(children.props.children, adornment, identity, false, trailing) }); } // Existing explicitly composed icons remain the consumer's custom adornment. const hasVisual = hasItemVisual(children); return <>{(!hasVisual || adornment !== undefined) && }{children}{trailing}; } /** Keep native-child and precomposed-icon handling while simplifying menu rows. */ export function adornMenuItem(children: React.ReactNode, adornment: ItemAdornmentValue | undefined, identity: string, asChild?: boolean, trailing?: React.ReactNode): React.ReactNode { if (asChild && React.isValidElement<{ children?: React.ReactNode }>(children)) { return React.cloneElement(children, { children: adornMenuItem(children.props.children, adornment, identity, false, trailing) }); } return adornItem(children, adornment === undefined && hasItemVisual(children) ? false : menuAdornment(adornment), identity, false, trailing); } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/shape.json","https://000h.cojeev.com/r/animated-icon.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/item-adornment.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/item-adornment.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/item-adornment.css","content":"@layer cojeev-states {\n.v-item-adornment { position:relative; display:inline-grid; place-items:center; width:30px; height:30px; min-width:30px; flex:none; vertical-align:middle; isolation:isolate; }\n.v-item-adornment[data-size=\"sm\"] { width:24px; height:24px; min-width:24px; }\n.v-item-adornment[data-size=\"lg\"] { width:44px; height:44px; min-width:44px; }\n.v-item-adornment > .v-item-adornment__shape { position:absolute; inset:0; width:100%; height:100%; color:var(--adornment-color); overflow:visible; }\n.v-item-adornment__icon { position:relative; display:inline-grid; place-items:center; color:var(--adornment-foreground); }\n.v-item-adornment__icon .v-icon { width:15px; height:15px; stroke-width:1.8; }\n.v-item-adornment[data-size=\"lg\"] .v-icon { width:21px; height:21px; }\n.v-item-adornment[data-custom] > * { max-width:100%; max-height:100%; }\n:is([data-disabled]:not([data-disabled=\"false\"]),[aria-disabled=\"true\"]) .v-item-adornment { opacity:.5; filter:saturate(.3); }\n\n}\n","type":"registry:file","target":"styles/cojeev/item-adornment.css"}],"className":"h-[70svh] min-h-80"}]]}]