@gradeui/ui 3.3.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ui/media-surface.md +1 -1
- package/dist/composer.d.mts +262 -0
- package/dist/composer.d.ts +262 -0
- package/dist/composer.js +3 -0
- package/dist/composer.js.map +1 -0
- package/dist/composer.mjs +3 -0
- package/dist/composer.mjs.map +1 -0
- package/dist/contracts.js +1 -1
- package/dist/contracts.js.map +1 -1
- package/dist/contracts.mjs +1 -1
- package/dist/contracts.mjs.map +1 -1
- package/dist/index.d.mts +28 -327
- package/dist/index.d.ts +28 -327
- package/dist/index.js +70 -70
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +70 -70
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types-DUwnWaxR.d.mts +43 -0
- package/dist/types-DUwnWaxR.d.ts +43 -0
- package/package.json +6 -1
- package/styles/globals.css +430 -0
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {z}from'zod';import*as w from'react';import {useRef,useMemo,useCallback,useEffect,useState,useLayoutEffect}from'react';import*as Kt from'@radix-ui/react-accordion';import {ChevronDown,X,ChevronLeft,ChevronRight,Check,Circle,Search,XCircle,ChevronsUpDown,ChevronUp,Image,Box,Code2,Music,Video,UtensilsCrossed,Package,Film,Mountain,User,Book,Gamepad2,Clapperboard,Tv,Disc3,Pause,Play,ArrowLeftRight,RotateCw,Plus,Minus,Paperclip,Square,Send,Bold,Italic,Underline,Strikethrough,Code,Heading1,Heading2,Heading3,Quote,List,ListOrdered,ChevronLeftIcon,ChevronRightIcon,ChevronDownIcon,CalendarIcon,Grid3x3,LayoutGrid,Rows3,SlidersHorizontal,ArrowUp,ArrowDown,ArrowUpDown,GripVertical,MoreHorizontal,Blend,Sparkles,Eye,EyeOff,Trash2,Palette,Download,SunDim,Sun,Moon,MoonStar}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {Slot}from'@radix-ui/react-slot';import*as Ao from'@radix-ui/react-avatar';import {getDefaultClassNames,DayPicker}from'react-day-picker';import ih from'embla-carousel-react';import*as Ln from'@radix-ui/react-checkbox';import*as or from'@radix-ui/react-radio-group';import*as oa from'@radix-ui/react-switch';import {Highlight}from'prism-react-renderer';import {useInView,motion,AnimatePresence,useReducedMotion}from'motion/react';import {LexicalComposer}from'@lexical/react/LexicalComposer';import {RichTextPlugin}from'@lexical/react/LexicalRichTextPlugin';import {ContentEditable}from'@lexical/react/LexicalContentEditable';import {LexicalErrorBoundary}from'@lexical/react/LexicalErrorBoundary';import {HistoryPlugin}from'@lexical/react/LexicalHistoryPlugin';import {OnChangePlugin}from'@lexical/react/LexicalOnChangePlugin';import {ListPlugin}from'@lexical/react/LexicalListPlugin';import {LinkPlugin}from'@lexical/react/LexicalLinkPlugin';import {useLexicalComposerContext}from'@lexical/react/LexicalComposerContext';import {HeadingNode,QuoteNode,$createHeadingNode,$createQuoteNode}from'@lexical/rich-text';import {ListNode,ListItemNode,INSERT_UNORDERED_LIST_COMMAND,INSERT_ORDERED_LIST_COMMAND}from'@lexical/list';import {LinkNode,AutoLinkNode}from'@lexical/link';import {CodeNode,CodeHighlightNode}from'@lexical/code';import {$setBlocksType}from'@lexical/selection';import {mergeRegister}from'@lexical/utils';import {createCommand,$getSelection,$isRangeSelection,$getRoot,$createParagraphNode,$createTextNode,DecoratorNode,$applyNodeReplacement,$isNodeSelection,$getNodeByKey,$isElementNode,$isTextNode,$isDecoratorNode,$setSelection,CLICK_COMMAND,COMMAND_PRIORITY_LOW,KEY_DELETE_COMMAND,KEY_BACKSPACE_COMMAND,KEY_ARROW_LEFT_COMMAND,KEY_ARROW_RIGHT_COMMAND,BLUR_COMMAND,SELECTION_CHANGE_COMMAND,FORMAT_TEXT_COMMAND,KEY_ENTER_COMMAND,COMMAND_PRIORITY_HIGH,TextNode,$isParagraphNode,KEY_DOWN_COMMAND,KEY_SPACE_COMMAND,PASTE_COMMAND,COMMAND_PRIORITY_NORMAL,FOCUS_COMMAND,$getEditor,$nodesOfType,$createRangeSelection,KEY_ARROW_DOWN_COMMAND,KEY_ARROW_UP_COMMAND,KEY_TAB_COMMAND,KEY_ESCAPE_COMMAND,ElementNode}from'lexical';import {jsx,jsxs}from'react/jsx-runtime';import {LexicalTypeaheadMenuPlugin}from'@lexical/react/LexicalTypeaheadMenuPlugin';import*as cs from'react-dom';import {createPortal}from'react-dom';import {useLexicalNodeSelection}from'@lexical/react/useLexicalNodeSelection';import {format}from'date-fns';import*as ao from'@radix-ui/react-popover';import*as je from'@radix-ui/react-dialog';import*as ge from'@radix-ui/react-dropdown-menu';import*as ms from'@radix-ui/react-label';import*as jn from'@radix-ui/react-progress';import {Command}from'cmdk';import*as fs from'@radix-ui/react-separator';import {useReactTable,getSortedRowModel,getCoreRowModel}from'@tanstack/react-table';import*as sn from'@radix-ui/react-toggle-group';import*as gs from'@radix-ui/react-toggle';import*as so from'@radix-ui/react-tooltip';import*as ln from'react-resizable-panels';import*as qt from'@radix-ui/react-scroll-area';import*as xe from'@radix-ui/react-select';import*as Go from'@radix-ui/react-slider';import {useSensors,useSensor,PointerSensor,KeyboardSensor,DndContext,closestCorners,closestCenter,useDroppable}from'@dnd-kit/core';import {sortableKeyboardCoordinates,arrayMove,SortableContext,rectSortingStrategy,horizontalListSortingStrategy,verticalListSortingStrategy,useSortable}from'@dnd-kit/sortable';import {CSS}from'@dnd-kit/utilities';import*as lo from'@radix-ui/react-tabs';import*as un from'recharts';import {GDS_MODULAR_SCALES,GDS_TYPE_SIZE_NAMES,modularTypeSizes}from'@gradeui/core';import*as We from'three';import {EffectComposer,RenderPass,BloomEffect,KernelSize,NoiseEffect,BlendFunction,ScanlineEffect,VignetteEffect,ChromaticAberrationEffect,GlitchEffect,GlitchMode,EffectPass}from'postprocessing';import hC from'lenis';var fg=Object.defineProperty;var xn=(e,t)=>()=>(e&&(t=e(e=0)),t);var ha=(e,t)=>{for(var o in t)fg(e,o,{get:t[o],enumerable:true});};var xi,Om,zm=xn(()=>{xi="2pMfyvhpuKonkf7h8HzH",Om=()=>xi!=="YOUR_KEY_HERE"&&xi.length>0;});var Gm={};ha(Gm,{createMaplibreAdapter:()=>V0});function z0(){if(typeof document>"u"||document.getElementById(Bm))return;let e=document.createElement("link");e.id=Bm,e.rel="stylesheet",e.href=O0,document.head.appendChild(e);}var F0,Vm,O0,Bm,V0,$m=xn(()=>{zm();F0={light:"dataviz-light",dark:"dataviz-dark",satellite:"satellite"},Vm=(e,t)=>`https://api.maptiler.com/maps/${F0[e]}/style.json?key=${encodeURIComponent(t)}`,O0="https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.css",Bm="gds-maplibre-gl-css";V0=async(e,t,o)=>{z0();let r;try{r=await import('maplibre-gl'),r.default&&(r=r.default);}catch(l){throw o.onError({code:"sdk-missing",message:'@gradeui/ui Map: `maplibre-gl` is not installed. Run `pnpm add maplibre-gl` (or your package manager\'s equivalent) to use provider="maplibre".',cause:l}),l}let a=t.tilerKey??xi;process.env.NODE_ENV!=="production"&&!t.tilerKey&&!Om()&&console.warn("@gradeui/ui Map: no `tilerKey` prop and the bundled MapTiler demo key is unset. Tile requests will 403. Set `tilerKey` or paste a key into demo-config.ts.");let n=t.styleUrl??Vm(t.appearance,a),i=new r.Map({container:e,style:n,center:t.center,zoom:t.zoom,interactive:t.interactive,attributionControl:{compact:true}});(t.tools==="zoom"||t.tools==="auto"&&t.interactive)&&i.addControl(new r.NavigationControl({showCompass:false}),t.toolsPosition),t.bounds&&i.fitBounds([t.bounds[0],t.bounds[1]],{animate:false}),await new Promise(l=>{i.once("load",()=>l());}),o.onLoad(),i.on("error",l=>{let d=String(l?.error?.message??l?.message??"MapLibre error"),m=d.toLowerCase().includes("style");o.onError({code:m?"style-load-failed":"tile-load-failed",message:d,cause:l?.error??l});});let c=new globalThis.Map;return {setCenter:l=>i.setCenter(l),setZoom:l=>i.setZoom(l),setBounds:(l,d)=>i.fitBounds([l,d],{animate:false}),setAppearance:l=>{let d=t.styleUrl??Vm(l,a);i.setStyle(d,{diff:false});},setInteractive:l=>{let d=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate"];for(let m of d){let u=i[m];u&&(l?u.enable():u.disable());}},flyTo:(l,d)=>i.flyTo({center:l,zoom:d?.zoom,duration:d?.durationMs??800}),panTo:(l,d)=>i.panTo(l,{duration:d?.durationMs??600}),fitBounds:(l,d)=>{if(l.length===0)return;let m=1/0,u=1/0,f=-1/0,h=-1/0;for(let[g,b]of l)g<m&&(m=g),b<u&&(u=b),g>f&&(f=g),b>h&&(h=b);i.fitBounds([[m,u],[f,h]],{padding:d?.paddingPx??40,duration:d?.durationMs??800});},getCenter:()=>{let l=i.getCenter();return [l.lng,l.lat]},getZoom:()=>i.getZoom(),getBounds:()=>{let l=i.getBounds();return [[l.getWest(),l.getSouth()],[l.getEast(),l.getNorth()]]},addMarker:(l,d,m)=>{let u=document.createElement("div");u.dataset.gdsPart="map-marker",u.dataset.gdsState="idle",u.style.cursor="pointer",u.addEventListener("mouseenter",()=>o.onMarkerHover(l)),u.addEventListener("mouseleave",()=>o.onMarkerHover(null)),u.addEventListener("click",g=>{o.onMarkerClick(l,h.coords,g);});let f=new r.Marker({element:u,anchor:m==="center"?"center":"bottom"}).setLngLat(d).addTo(i),h={element:u,coords:d,setHovered:g=>{u.dataset.gdsState=g?"hovered":"idle",u.style.zIndex=g?"10":"1";},setPosition:g=>{h.coords=g,f.setLngLat(g);},remove:()=>{f.remove(),c.delete(l);}};return c.set(l,{marker:f,handle:h}),h},destroy:()=>{c.forEach(({marker:l})=>l.remove()),c.clear(),i.remove();},instance:i}};});var jm={};ha(jm,{createMapboxAdapter:()=>$0});function G0(){if(typeof document>"u"||document.getElementById(Um))return;let e=document.createElement("link");e.id=Um,e.rel="stylesheet",e.href=B0,document.head.appendChild(e);}var Wm,B0,Um,$0,Km=xn(()=>{Wm={light:"mapbox://styles/mapbox/light-v11",dark:"mapbox://styles/mapbox/dark-v11",satellite:"mapbox://styles/mapbox/satellite-streets-v12"},B0="https://unpkg.com/mapbox-gl@3/dist/mapbox-gl.css",Um="gds-mapbox-gl-css";$0=async(e,t,o)=>{if(!t.accessToken)throw o.onError({code:"api-key-missing",message:'@gradeui/ui Map: provider="mapbox" requires an `accessToken` prop.'}),new Error("mapbox accessToken missing");G0();let r;try{r=await import('mapbox-gl'),r.default&&(r=r.default);}catch(s){throw o.onError({code:"sdk-missing",message:'@gradeui/ui Map: `mapbox-gl` is not installed. Run `pnpm add mapbox-gl` to use provider="mapbox".',cause:s}),s}r.accessToken=t.accessToken;let a=t.styleUrl??Wm[t.appearance],n=new r.Map({container:e,style:a,center:t.center,zoom:t.zoom,interactive:t.interactive});(t.tools==="zoom"||t.tools==="auto"&&t.interactive)&&n.addControl(new r.NavigationControl({showCompass:false}),t.toolsPosition),t.bounds&&n.fitBounds([t.bounds[0],t.bounds[1]],{animate:false}),await new Promise(s=>{n.once("load",()=>s());}),o.onLoad(),n.on("error",s=>{let l=String(s?.error?.message??s?.message??"Mapbox error"),d=l.toLowerCase().includes("style");o.onError({code:d?"style-load-failed":"tile-load-failed",message:l,cause:s?.error??s});});let i=new globalThis.Map;return {setCenter:s=>n.setCenter(s),setZoom:s=>n.setZoom(s),setBounds:(s,l)=>n.fitBounds([s,l],{animate:false}),setAppearance:s=>{let l=t.styleUrl??Wm[s];n.setStyle(l,{diff:false});},setInteractive:s=>{let l=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate"];for(let d of l){let m=n[d];m&&(s?m.enable():m.disable());}},flyTo:(s,l)=>n.flyTo({center:s,zoom:l?.zoom,duration:l?.durationMs??800}),panTo:(s,l)=>n.panTo(s,{duration:l?.durationMs??600}),fitBounds:(s,l)=>{if(s.length===0)return;let d=1/0,m=1/0,u=-1/0,f=-1/0;for(let[h,g]of s)h<d&&(d=h),g<m&&(m=g),h>u&&(u=h),g>f&&(f=g);n.fitBounds([[d,m],[u,f]],{padding:l?.paddingPx??40,duration:l?.durationMs??800});},getCenter:()=>{let s=n.getCenter();return [s.lng,s.lat]},getZoom:()=>n.getZoom(),getBounds:()=>{let s=n.getBounds();return [[s.getWest(),s.getSouth()],[s.getEast(),s.getNorth()]]},addMarker:(s,l,d)=>{let m=document.createElement("div");m.dataset.gdsPart="map-marker",m.dataset.gdsState="idle",m.style.cursor="pointer",m.addEventListener("mouseenter",()=>o.onMarkerHover(s)),m.addEventListener("mouseleave",()=>o.onMarkerHover(null)),m.addEventListener("click",h=>{o.onMarkerClick(s,f.coords,h);});let u=new r.Marker({element:m,anchor:d==="center"?"center":"bottom"}).setLngLat(l).addTo(n),f={element:m,coords:l,setHovered:h=>{m.dataset.gdsState=h?"hovered":"idle",m.style.zIndex=h?"10":"1";},setPosition:h=>{f.coords=h,u.setLngLat(h);},remove:()=>{u.remove(),i.delete(s);}};return i.set(s,{marker:u,handle:f}),f},destroy:()=>{i.forEach(({marker:s})=>s.remove()),i.clear(),n.remove();},instance:n}};});var Ym={};ha(Ym,{createGoogleAdapter:()=>j0});var W0,U0,qm,j0,Zm=xn(()=>{W0=[{featureType:"poi",stylers:[{visibility:"off"}]},{featureType:"transit",stylers:[{visibility:"simplified"}]}],U0=[{elementType:"geometry",stylers:[{color:"#1a1a1a"}]},{elementType:"labels.text.stroke",stylers:[{color:"#1a1a1a"}]},{elementType:"labels.text.fill",stylers:[{color:"#9ca3af"}]},{featureType:"poi",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"geometry",stylers:[{color:"#262626"}]},{featureType:"road",elementType:"labels.text.fill",stylers:[{color:"#9ca3af"}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#0f172a"}]},{featureType:"transit",stylers:[{visibility:"simplified"},{color:"#3a3a3a"}]}],qm=e=>e==="dark"?U0:W0,j0=async(e,t,o)=>{if(!t.apiKey)throw o.onError({code:"api-key-missing",message:'@gradeui/ui Map: provider="google" requires an `apiKey` prop.'}),new Error("google apiKey missing");let r;try{let u=await import('@googlemaps/js-api-loader');r=u.Loader??u.default?.Loader;}catch(u){throw o.onError({code:"sdk-missing",message:'@gradeui/ui Map: `@googlemaps/js-api-loader` is not installed. Run `pnpm add @googlemaps/js-api-loader` to use provider="google".',cause:u}),u}let a=new r({apiKey:t.apiKey,version:"weekly",libraries:["maps","marker"]}),n;try{n=await a.load();}catch(u){throw o.onError({code:"provider-init-failed",message:"@gradeui/ui Map: Google Maps loader failed.",cause:u}),u}let i=t.appearance==="satellite",c=t.tools==="zoom"||t.tools==="auto"&&t.interactive,s={"top-left":n.maps.ControlPosition.LEFT_TOP,"top-right":n.maps.ControlPosition.RIGHT_TOP,"bottom-left":n.maps.ControlPosition.LEFT_BOTTOM,"bottom-right":n.maps.ControlPosition.RIGHT_BOTTOM},l=new n.maps.Map(e,{center:{lat:t.center[1],lng:t.center[0]},zoom:t.zoom,mapTypeId:i?n.maps.MapTypeId.HYBRID:n.maps.MapTypeId.ROADMAP,mapId:t.mapId,styles:i?void 0:qm(t.appearance==="dark"?"dark":"light"),disableDefaultUI:true,zoomControl:c,zoomControlOptions:{position:s[t.toolsPosition]},gestureHandling:t.interactive?"auto":"none",keyboardShortcuts:t.interactive});if(t.bounds){let u=new n.maps.LatLngBounds({lat:t.bounds[0][1],lng:t.bounds[0][0]},{lat:t.bounds[1][1],lng:t.bounds[1][0]});l.fitBounds(u);}await new Promise(u=>{n.maps.event.addListenerOnce(l,"idle",()=>u());}),o.onLoad();let d=new globalThis.Map;return {setCenter:u=>l.setCenter({lat:u[1],lng:u[0]}),setZoom:u=>l.setZoom(u),setBounds:(u,f)=>{let h=new n.maps.LatLngBounds({lat:u[1],lng:u[0]},{lat:f[1],lng:f[0]});l.fitBounds(h);},setAppearance:u=>{u==="satellite"?(l.setMapTypeId(n.maps.MapTypeId.HYBRID),l.setOptions({styles:void 0})):(l.setMapTypeId(n.maps.MapTypeId.ROADMAP),l.setOptions({styles:qm(u)}));},setInteractive:u=>{l.setOptions({zoomControl:t.tools==="zoom"||t.tools==="auto"&&u,gestureHandling:u?"auto":"none",keyboardShortcuts:u});},flyTo:(u,f)=>{l.panTo({lat:u[1],lng:u[0]}),f?.zoom!=null&&l.setZoom(f.zoom);},panTo:u=>l.panTo({lat:u[1],lng:u[0]}),fitBounds:(u,f)=>{if(u.length===0)return;let h=new n.maps.LatLngBounds;for(let[g,b]of u)h.extend({lat:b,lng:g});l.fitBounds(h,f?.paddingPx??40);},getCenter:()=>{let u=l.getCenter();return u?[u.lng(),u.lat()]:[0,0]},getZoom:()=>l.getZoom()??0,getBounds:()=>{let u=l.getBounds();if(!u)return [[0,0],[0,0]];let f=u.getSouthWest(),h=u.getNorthEast();return [[f.lng(),f.lat()],[h.lng(),h.lat()]]},addMarker:(u,f,h)=>{let g=document.createElement("div");g.dataset.gdsPart="map-marker",g.dataset.gdsState="idle",g.style.cursor="pointer",h==="center"&&(g.style.transform="translateY(50%)"),g.addEventListener("mouseenter",()=>o.onMarkerHover(u)),g.addEventListener("mouseleave",()=>o.onMarkerHover(null)),g.addEventListener("click",C=>{o.onMarkerClick(u,v.coords,C);});let b=new n.maps.marker.AdvancedMarkerElement({map:l,position:{lat:f[1],lng:f[0]},content:g}),v={element:g,coords:f,setHovered:C=>{g.dataset.gdsState=C?"hovered":"idle",b.zIndex=C?10:1;},setPosition:C=>{v.coords=C,b.position={lat:C[1],lng:C[0]};},remove:()=>{b.map=null,d.delete(u);}};return d.set(u,{marker:b,handle:v}),v},destroy:()=>{d.forEach(({marker:u})=>{u.map=null;}),d.clear();},instance:l}};});var Qm={};ha(Qm,{createLeafletAdapter:()=>X0});function q0(){if(typeof document>"u"||globalThis.__gradeLeafletCssBundled||document.getElementById(Xm))return;let e=document.createElement("link");e.id=Xm,e.rel="stylesheet",e.href=K0,document.head.appendChild(e);}var K0,Xm,Jm,Y0,Z0,X0,ef=xn(()=>{K0="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css",Xm="gds-leaflet-css";Jm={light:"rastertiles/voyager",dark:"rastertiles/dark_all",satellite:"rastertiles/voyager"},Y0=e=>`https://{s}.basemaps.cartocdn.com/${e}/{z}/{x}/{y}{r}.png`,Z0="\xA9 OpenStreetMap contributors \xA9 CARTO",X0=async(e,t,o)=>{q0();let r;try{r=await import('leaflet'),r.default&&(r=r.default);}catch(h){throw o.onError({code:"sdk-missing",message:"@gradeui/ui Map: `leaflet` is not installed. Run `pnpm add leaflet` to use the worker-free Leaflet adapter.",cause:h}),h}let a=h=>[h[1],h[0]],n=t.tools==="zoom"||t.tools==="auto"&&t.interactive,i={"top-left":"topleft","top-right":"topright","bottom-left":"bottomleft","bottom-right":"bottomright"},c=r.map(e,{center:a(t.center),zoom:t.zoom,zoomControl:false,attributionControl:true,dragging:t.interactive,scrollWheelZoom:t.interactive,doubleClickZoom:t.interactive,boxZoom:t.interactive,keyboard:t.interactive,touchZoom:t.interactive});n&&r.control.zoom({position:i[t.toolsPosition]??"topleft"}).addTo(c);let s=h=>{let g=r.tileLayer(Y0(Jm[h]??Jm.light),{maxZoom:20,subdomains:"abcd",detectRetina:true,attribution:Z0,crossOrigin:true});return g.on("tileerror",()=>o.onError({code:"tile-load-failed",message:"map tile failed to load (is the tile host allowed by CSP?)"})),g.addTo(c),g},l=s(t.appearance),d=h=>{l&&c.removeLayer(l),l=s(h);};t.bounds&&c.fitBounds([a(t.bounds[0]),a(t.bounds[1])],{animate:false}),o.onLoad();let m=typeof ResizeObserver<"u"?new ResizeObserver(()=>c.invalidateSize(false)):null;m?.observe(e),requestAnimationFrame(()=>c.invalidateSize(false)),window.setTimeout(()=>c.invalidateSize(false),200),window.setTimeout(()=>c.invalidateSize(false),600);let u=new globalThis.Map;return {setCenter:h=>c.panTo(a(h),{animate:false}),setZoom:h=>c.setZoom(h),setBounds:(h,g)=>c.fitBounds([a(h),a(g)],{animate:false}),setAppearance:h=>d(h),setInteractive:h=>{let g=["dragging","scrollWheelZoom","doubleClickZoom","boxZoom","keyboard","touchZoom"];for(let b of g){let v=c[b];v&&(h?v.enable():v.disable());}},flyTo:(h,g)=>c.flyTo(a(h),g?.zoom??c.getZoom(),{duration:(g?.durationMs??800)/1e3}),panTo:(h,g)=>c.panTo(a(h),{duration:(g?.durationMs??600)/1e3}),fitBounds:(h,g)=>{if(h.length===0)return;let b=g?.paddingPx??40;c.fitBounds(h.map(a),{padding:[b,b],duration:(g?.durationMs??800)/1e3});},getCenter:()=>{let h=c.getCenter();return [h.lng,h.lat]},getZoom:()=>c.getZoom(),getBounds:()=>{let h=c.getBounds(),g=h.getSouthWest(),b=h.getNorthEast();return [[g.lng,g.lat],[b.lng,b.lat]]},addMarker:(h,g,b)=>{let v=document.createElement("div");v.dataset.gdsPart="map-marker",v.dataset.gdsState="idle",v.style.position="absolute",v.style.cursor="pointer",v.style.transform=b==="center"?"translate(-50%, -50%)":"translate(-50%, -100%)",v.addEventListener("mouseenter",()=>o.onMarkerHover(h)),v.addEventListener("mouseleave",()=>o.onMarkerHover(null)),v.addEventListener("click",R=>o.onMarkerClick(h,y.coords,R));let C=r.divIcon({className:"gds-leaflet-marker",html:"",iconSize:[0,0],iconAnchor:[0,0]}),S=r.marker(a(g),{icon:C,interactive:true,keyboard:false}).addTo(c),x=S.getElement();x&&(x.style.pointerEvents="auto",x.appendChild(v));let y={element:v,coords:g,setHovered:R=>{v.dataset.gdsState=R?"hovered":"idle",x&&(x.style.zIndex=R?"1000":"");},setPosition:R=>{y.coords=R,S.setLatLng(a(R));},remove:()=>{c.removeLayer(S),u.delete(h);}};return u.set(h,{marker:S,handle:y}),y},destroy:()=>{m?.disconnect(),u.forEach(({marker:h})=>c.removeLayer(h)),u.clear(),c.remove();},instance:c}};});var Ml={name:"Accordion",description:`Long-form content that would overwhelm if shown all at once \u2014 FAQs, settings groups, "what's included" sections, nested help. For tab-style peer views with one always visible, reach for Tabs. For a single show/hide reveal use Collapsible.`,import:"@gradeui/ui",aliases:["accordion","faq","expand","collapse list","disclosure list","disclosure group","outline group","expandable list","sectionlist"],subcomponents:["AccordionItem","AccordionTrigger","AccordionContent"],composesWith:["Card (as a faq inside a card body)","Section primitives"],styleDefaults:{AccordionItem:"border-b",AccordionTrigger:"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",AccordionContent:"pb-4 pt-0"},props:{type:{schema:z.enum(["single","multiple"]),design:"knob",description:"single keeps one open at a time, multiple lets several be open at once"},collapsible:{schema:z.boolean().optional(),design:"knob",description:'only valid with type="single"; allows the open item to be toggled shut'},defaultValue:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"initial open item(s)"},value:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"controlled"},onValueChange:{schema:z.unknown().optional(),design:"event"},children:{schema:z.unknown().optional(),design:"plumbing",description:"the row label users click to expand"}}};var Nl={name:"AiChat",description:'A flexible chat block \u2014 header + scrollable message list + composer. Out of the box it looks like a polished "AI panel"; under it, every region is a slot so hosts can compose richer chat surfaces (e.g. Studio\'s left column with selection chip + settings panel above the composer, an error banner inline, per-message usage / refs / actions). Per-turn token usage, refs, and actions are optional and gated by `showUsage` / `showRefs` / `showActions` \u2014 leave them off for product-facing chats, turn them on for developer-facing ones where transparency matters. Composes with [[AIChatComposer]] (rendered internally; can be slotted in with custom props via `composerSlot`).',import:"@gradeui/ui",aliases:["ai chat","chat panel","chat block","llm chat","assistant panel","copilot chat","ai assistant"],composesWith:["Card (host in a sidebar panel)","Sheet (mobile drawer)","Stack (place above other content)","AIChatComposer (internal composer; slot to override)"],styleDefaults:{MessageActions:"inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px]",ThinkingDisclosure:"w-3.5 h-3.5 text-gds-gray-500 dark:text-gds-gray-400 shrink-0",StepsDisclosure:"w-3.5 h-3.5 text-gds-gray-500 dark:text-gds-gray-400 transition-transform shrink-0",AIChat:"flex flex-col overflow-hidden"},props:{messages:{schema:z.unknown().optional(),design:"plumbing",description:'`{ id, role: "user" | "assistant", content, timestamp, thinking?, steps?, usage?, refs?, actions?, duration? }`; defaults to empty'},onSendMessage:{schema:z.unknown().optional(),design:"event",description:"fires when the user submits via the default composer; ignored if `composerSlot` is set"},isLoading:{schema:z.boolean().optional(),design:"knob",description:"shows a typing indicator at the bottom of the message list"},placeholder:{schema:z.string().optional(),design:"content",description:"composer placeholder text (ignored if `composerSlot` is set)"},title:{schema:z.string().optional(),design:"plumbing",description:'header title; defaults to "AI Assistant"'},titleIcon:{schema:z.unknown().optional(),design:"plumbing",description:"optional icon rendered before the title (e.g. `<Sparkles />`)"},headerTokens:{schema:z.number().optional(),design:"knob",description:'optional session-level token total shown on the right of the header; rendered as "N tokens" with a small gauge icon when set'},headerEnd:{schema:z.unknown().optional(),design:"plumbing",description:"optional arbitrary content appended after `headerTokens` on the right of the header"},showUsage:{schema:z.boolean().optional(),design:"knob",description:"show the per-turn `usage` strip below the assistant bubble; default false"},showRefs:{schema:z.boolean().optional(),design:"knob",description:"show the per-turn `refs` strip below the assistant bubble; default false"},showActions:{schema:z.boolean().optional(),design:"knob",description:"render per-turn `actions` chips when a message has them; default true"},showDuration:{schema:z.boolean().optional(),design:"knob",description:'render the per-turn wall-clock duration ("2.3s") below the assistant bubble when a message carries `duration`; default false'},showThinking:{schema:z.boolean().optional(),design:"knob",description:'render the per-turn reasoning ("Thoughts") disclosure above the assistant prose when a message carries `thinking`; collapsed by default, click to expand; default false'},showSteps:{schema:z.boolean().optional(),design:"knob",description:'render the per-turn step timeline above the assistant prose when a message carries `steps`; collapsed view shows the current running step (or "N steps completed"), click to expand the vertical timeline with status glyphs; default false'},thinkingPhrase:{schema:z.string().optional(),design:"content",description:'override the "Thinking" label in the loading indicator'},suggestedPrompts:{schema:z.unknown().optional(),design:"plumbing",description:"empty-state quick prompts (ignored if `emptyStateSlot` is set)"},emptyStateSlot:{schema:z.unknown().optional(),design:"plumbing",description:"replaces the default empty state entirely"},errorSlot:{schema:z.unknown().optional(),design:"plumbing",description:"rendered after the messages list (typically an error banner)"},composerAboveSlot:{schema:z.unknown().optional(),design:"plumbing",description:"rendered between the messages and the composer (selection chip, settings panel)"},composerBelowSlot:{schema:z.unknown().optional(),design:"plumbing",description:"rendered below the composer (disclaimer, char counter)"},composerSlot:{schema:z.unknown().optional(),design:"plumbing",description:"full override of the composer; when provided, `onSendMessage` + `placeholder` are unused"},bare:{schema:z.boolean().optional(),design:"knob",description:"strip the outer card chrome (background, border, rounded corners) so the chat takes the surface of its container; default false (keeps the canned card look)"},assistantBubble:{schema:z.boolean().optional(),design:"knob",description:"whether assistant messages render with a bubble (background + border + padding + rounded corners); default true. Set false for a Claude.ai-style chromeless transcript where assistant text sits on the surface and only user turns wear a bubble."},className:{schema:z.string().optional(),design:"plumbing"}}};var El={name:"AiChatComposer",description:"The reusable \"input card\" for any chat surface \u2014 auto-growing textarea, image attachments via paperclip and clipboard paste, attachment chips with previews, Send/Stop toggle, controlled value. Drop in below any messages list. Use this when you want the input affordances of `<AIChat>` but you're rendering your own messages list / scrollarea / header (e.g. Studio's left-column chat, where SelectionChip and SettingsPanel sit between messages and composer). For the full canned chat block, use `<AIChat>` instead.",import:"@gradeui/ui",aliases:["chat composer","chat input","prompt composer","message input"],composesWith:["AIChat (uses this internally)","Card (host above)","ScrollArea (place messages above)"],styleDefaults:{AIChatComposer:"w-full"},props:{value:{schema:z.string(),design:"content",description:"controlled textarea value"},onChange:{schema:z.unknown(),design:"event",description:"fires for every textarea change"},onSend:{schema:z.unknown(),design:"event",description:"fires when the user submits (Enter or click Send); composer validates that text or attachments exist before firing"},isLoading:{schema:z.boolean().optional(),design:"knob",description:"disables the textarea + paperclip and swaps Send for Stop"},onStop:{schema:z.unknown().optional(),design:"event",description:"fires when the user clicks Stop; without this, Stop renders disabled"},placeholder:{schema:z.string().optional(),design:"content"},maxLength:{schema:z.number().optional(),design:"knob",description:"hard cap passed to the underlying `<textarea>`"},showHint:{schema:z.boolean().optional(),design:"knob",description:'show the "Press Enter\u2026 \xB7 Paste images" hint below the card; default true, set false when the host renders its own footer'},className:{schema:z.string().optional(),design:"plumbing"}}};var Ll={name:"AppShell",description:`The top-level page scaffold for any app-like or marketing layout. Reach for AppShell
|
|
2
|
+
import {z}from'zod';import*as y from'react';import {useRef,useEffect}from'react';import*as Ot from'@radix-ui/react-accordion';import {ChevronDown,X,ChevronLeft,ChevronRight,Check,Circle,Search,XCircle,ChevronsUpDown,ChevronUp,Image,Box,Code2,Music,Video,UtensilsCrossed,Package,Film,Mountain,User,Book,Gamepad2,Clapperboard,Tv as Tv$1,Disc3,Pause,Play,ArrowLeftRight,RotateCw,Plus,Minus,ChevronLeftIcon,ChevronRightIcon,ChevronDownIcon,CalendarIcon,Grid3x3,LayoutGrid,Rows3,SlidersHorizontal,ArrowUp,ArrowDown,ArrowUpDown,GripVertical,MoreHorizontal,Square,Blend,Sparkles,Eye,EyeOff,Trash2,Palette,Download,SunDim,Sun,Moon,MoonStar}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {Slot}from'@radix-ui/react-slot';import*as So from'@radix-ui/react-avatar';import {getDefaultClassNames,DayPicker}from'react-day-picker';import pg from'embla-carousel-react';import*as rr from'@radix-ui/react-checkbox';import*as Oo from'@radix-ui/react-radio-group';import*as xr from'@radix-ui/react-switch';import {Highlight}from'prism-react-renderer';import {useInView,motion,useReducedMotion}from'motion/react';import {format}from'date-fns';import*as Jt from'@radix-ui/react-popover';import*as Ve from'@radix-ui/react-dialog';import*as ae from'@radix-ui/react-dropdown-menu';import*as ai from'@radix-ui/react-label';import*as dr from'@radix-ui/react-progress';import {Command}from'cmdk';import*as ri from'@radix-ui/react-separator';import {useReactTable,getSortedRowModel,getCoreRowModel}from'@tanstack/react-table';import*as Aa from'@radix-ui/react-toggle-group';import*as ni from'@radix-ui/react-toggle';import*as eo from'@radix-ui/react-tooltip';import*as Ia from'react-resizable-panels';import*as _t from'@radix-ui/react-scroll-area';import*as ce from'@radix-ui/react-select';import*as Po from'@radix-ui/react-slider';import {useSensors,useSensor,PointerSensor,KeyboardSensor,DndContext,closestCorners,closestCenter,useDroppable}from'@dnd-kit/core';import {sortableKeyboardCoordinates,arrayMove,SortableContext,rectSortingStrategy,horizontalListSortingStrategy,verticalListSortingStrategy,useSortable}from'@dnd-kit/sortable';import {CSS}from'@dnd-kit/utilities';import*as to from'@radix-ui/react-tabs';import*as Va from'recharts';import {GDS_MODULAR_SCALES,GDS_TYPE_SIZE_NAMES,modularTypeSizes}from'@gradeui/core';import {createPortal}from'react-dom';import*as Ie from'three';import {EffectComposer,RenderPass,BloomEffect,KernelSize,NoiseEffect,BlendFunction,ScanlineEffect,VignetteEffect,ChromaticAberrationEffect,GlitchEffect,GlitchMode,EffectPass}from'postprocessing';import ex from'lenis';var ym=Object.defineProperty;var Ka=(e,t)=>()=>(e&&(t=e(e=0)),t);var Ir=(e,t)=>{for(var o in t)ym(e,o,{get:t[o],enumerable:true});};var Mn,Up,$p=Ka(()=>{Mn="2pMfyvhpuKonkf7h8HzH",Up=()=>Mn!=="YOUR_KEY_HERE"&&Mn.length>0;});var qp={};Ir(qp,{createMaplibreAdapter:()=>Rb});function Sb(){if(typeof document>"u"||document.getElementById(Kp))return;let e=document.createElement("link");e.id=Kp,e.rel="stylesheet",e.href=kb,document.head.appendChild(e);}var wb,jp,kb,Kp,Rb,Yp=Ka(()=>{$p();wb={light:"dataviz-light",dark:"dataviz-dark",satellite:"satellite"},jp=(e,t)=>`https://api.maptiler.com/maps/${wb[e]}/style.json?key=${encodeURIComponent(t)}`,kb="https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.css",Kp="gds-maplibre-gl-css";Rb=async(e,t,o)=>{Sb();let a;try{a=await import('maplibre-gl'),a.default&&(a=a.default);}catch(l){throw o.onError({code:"sdk-missing",message:'@gradeui/ui Map: `maplibre-gl` is not installed. Run `pnpm add maplibre-gl` (or your package manager\'s equivalent) to use provider="maplibre".',cause:l}),l}let r=t.tilerKey??Mn;process.env.NODE_ENV!=="production"&&!t.tilerKey&&!Up()&&console.warn("@gradeui/ui Map: no `tilerKey` prop and the bundled MapTiler demo key is unset. Tile requests will 403. Set `tilerKey` or paste a key into demo-config.ts.");let n=t.styleUrl??jp(t.appearance,r),i=new a.Map({container:e,style:n,center:t.center,zoom:t.zoom,interactive:t.interactive,attributionControl:{compact:true}});(t.tools==="zoom"||t.tools==="auto"&&t.interactive)&&i.addControl(new a.NavigationControl({showCompass:false}),t.toolsPosition),t.bounds&&i.fitBounds([t.bounds[0],t.bounds[1]],{animate:false}),await new Promise(l=>{i.once("load",()=>l());}),o.onLoad(),i.on("error",l=>{let p=String(l?.error?.message??l?.message??"MapLibre error"),m=p.toLowerCase().includes("style");o.onError({code:m?"style-load-failed":"tile-load-failed",message:p,cause:l?.error??l});});let c=new globalThis.Map;return {setCenter:l=>i.setCenter(l),setZoom:l=>i.setZoom(l),setBounds:(l,p)=>i.fitBounds([l,p],{animate:false}),setAppearance:l=>{let p=t.styleUrl??jp(l,r);i.setStyle(p,{diff:false});},setInteractive:l=>{let p=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate"];for(let m of p){let u=i[m];u&&(l?u.enable():u.disable());}},flyTo:(l,p)=>i.flyTo({center:l,zoom:p?.zoom,duration:p?.durationMs??800}),panTo:(l,p)=>i.panTo(l,{duration:p?.durationMs??600}),fitBounds:(l,p)=>{if(l.length===0)return;let m=1/0,u=1/0,g=-1/0,h=-1/0;for(let[f,b]of l)f<m&&(m=f),b<u&&(u=b),f>g&&(g=f),b>h&&(h=b);i.fitBounds([[m,u],[g,h]],{padding:p?.paddingPx??40,duration:p?.durationMs??800});},getCenter:()=>{let l=i.getCenter();return [l.lng,l.lat]},getZoom:()=>i.getZoom(),getBounds:()=>{let l=i.getBounds();return [[l.getWest(),l.getSouth()],[l.getEast(),l.getNorth()]]},addMarker:(l,p,m)=>{let u=document.createElement("div");u.dataset.gdsPart="map-marker",u.dataset.gdsState="idle",u.style.cursor="pointer",u.addEventListener("mouseenter",()=>o.onMarkerHover(l)),u.addEventListener("mouseleave",()=>o.onMarkerHover(null)),u.addEventListener("click",f=>{o.onMarkerClick(l,h.coords,f);});let g=new a.Marker({element:u,anchor:m==="center"?"center":"bottom"}).setLngLat(p).addTo(i),h={element:u,coords:p,setHovered:f=>{u.dataset.gdsState=f?"hovered":"idle",u.style.zIndex=f?"10":"1";},setPosition:f=>{h.coords=f,g.setLngLat(f);},remove:()=>{g.remove(),c.delete(l);}};return c.set(l,{marker:g,handle:h}),h},destroy:()=>{c.forEach(({marker:l})=>l.remove()),c.clear(),i.remove();},instance:i}};});var Jp={};Ir(Jp,{createMapboxAdapter:()=>Pb});function Tb(){if(typeof document>"u"||document.getElementById(Xp))return;let e=document.createElement("link");e.id=Xp,e.rel="stylesheet",e.href=Cb,document.head.appendChild(e);}var Zp,Cb,Xp,Pb,Qp=Ka(()=>{Zp={light:"mapbox://styles/mapbox/light-v11",dark:"mapbox://styles/mapbox/dark-v11",satellite:"mapbox://styles/mapbox/satellite-streets-v12"},Cb="https://unpkg.com/mapbox-gl@3/dist/mapbox-gl.css",Xp="gds-mapbox-gl-css";Pb=async(e,t,o)=>{if(!t.accessToken)throw o.onError({code:"api-key-missing",message:'@gradeui/ui Map: provider="mapbox" requires an `accessToken` prop.'}),new Error("mapbox accessToken missing");Tb();let a;try{a=await import('mapbox-gl'),a.default&&(a=a.default);}catch(s){throw o.onError({code:"sdk-missing",message:'@gradeui/ui Map: `mapbox-gl` is not installed. Run `pnpm add mapbox-gl` to use provider="mapbox".',cause:s}),s}a.accessToken=t.accessToken;let r=t.styleUrl??Zp[t.appearance],n=new a.Map({container:e,style:r,center:t.center,zoom:t.zoom,interactive:t.interactive});(t.tools==="zoom"||t.tools==="auto"&&t.interactive)&&n.addControl(new a.NavigationControl({showCompass:false}),t.toolsPosition),t.bounds&&n.fitBounds([t.bounds[0],t.bounds[1]],{animate:false}),await new Promise(s=>{n.once("load",()=>s());}),o.onLoad(),n.on("error",s=>{let l=String(s?.error?.message??s?.message??"Mapbox error"),p=l.toLowerCase().includes("style");o.onError({code:p?"style-load-failed":"tile-load-failed",message:l,cause:s?.error??s});});let i=new globalThis.Map;return {setCenter:s=>n.setCenter(s),setZoom:s=>n.setZoom(s),setBounds:(s,l)=>n.fitBounds([s,l],{animate:false}),setAppearance:s=>{let l=t.styleUrl??Zp[s];n.setStyle(l,{diff:false});},setInteractive:s=>{let l=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate"];for(let p of l){let m=n[p];m&&(s?m.enable():m.disable());}},flyTo:(s,l)=>n.flyTo({center:s,zoom:l?.zoom,duration:l?.durationMs??800}),panTo:(s,l)=>n.panTo(s,{duration:l?.durationMs??600}),fitBounds:(s,l)=>{if(s.length===0)return;let p=1/0,m=1/0,u=-1/0,g=-1/0;for(let[h,f]of s)h<p&&(p=h),f<m&&(m=f),h>u&&(u=h),f>g&&(g=f);n.fitBounds([[p,m],[u,g]],{padding:l?.paddingPx??40,duration:l?.durationMs??800});},getCenter:()=>{let s=n.getCenter();return [s.lng,s.lat]},getZoom:()=>n.getZoom(),getBounds:()=>{let s=n.getBounds();return [[s.getWest(),s.getSouth()],[s.getEast(),s.getNorth()]]},addMarker:(s,l,p)=>{let m=document.createElement("div");m.dataset.gdsPart="map-marker",m.dataset.gdsState="idle",m.style.cursor="pointer",m.addEventListener("mouseenter",()=>o.onMarkerHover(s)),m.addEventListener("mouseleave",()=>o.onMarkerHover(null)),m.addEventListener("click",h=>{o.onMarkerClick(s,g.coords,h);});let u=new a.Marker({element:m,anchor:p==="center"?"center":"bottom"}).setLngLat(l).addTo(n),g={element:m,coords:l,setHovered:h=>{m.dataset.gdsState=h?"hovered":"idle",m.style.zIndex=h?"10":"1";},setPosition:h=>{g.coords=h,u.setLngLat(h);},remove:()=>{u.remove(),i.delete(s);}};return i.set(s,{marker:u,handle:g}),g},destroy:()=>{i.forEach(({marker:s})=>s.remove()),i.clear(),n.remove();},instance:n}};});var tu={};Ir(tu,{createGoogleAdapter:()=>Eb});var Mb,Nb,eu,Eb,ou=Ka(()=>{Mb=[{featureType:"poi",stylers:[{visibility:"off"}]},{featureType:"transit",stylers:[{visibility:"simplified"}]}],Nb=[{elementType:"geometry",stylers:[{color:"#1a1a1a"}]},{elementType:"labels.text.stroke",stylers:[{color:"#1a1a1a"}]},{elementType:"labels.text.fill",stylers:[{color:"#9ca3af"}]},{featureType:"poi",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"geometry",stylers:[{color:"#262626"}]},{featureType:"road",elementType:"labels.text.fill",stylers:[{color:"#9ca3af"}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#0f172a"}]},{featureType:"transit",stylers:[{visibility:"simplified"},{color:"#3a3a3a"}]}],eu=e=>e==="dark"?Nb:Mb,Eb=async(e,t,o)=>{if(!t.apiKey)throw o.onError({code:"api-key-missing",message:'@gradeui/ui Map: provider="google" requires an `apiKey` prop.'}),new Error("google apiKey missing");let a;try{let u=await import('@googlemaps/js-api-loader');a=u.Loader??u.default?.Loader;}catch(u){throw o.onError({code:"sdk-missing",message:'@gradeui/ui Map: `@googlemaps/js-api-loader` is not installed. Run `pnpm add @googlemaps/js-api-loader` to use provider="google".',cause:u}),u}let r=new a({apiKey:t.apiKey,version:"weekly",libraries:["maps","marker"]}),n;try{n=await r.load();}catch(u){throw o.onError({code:"provider-init-failed",message:"@gradeui/ui Map: Google Maps loader failed.",cause:u}),u}let i=t.appearance==="satellite",c=t.tools==="zoom"||t.tools==="auto"&&t.interactive,s={"top-left":n.maps.ControlPosition.LEFT_TOP,"top-right":n.maps.ControlPosition.RIGHT_TOP,"bottom-left":n.maps.ControlPosition.LEFT_BOTTOM,"bottom-right":n.maps.ControlPosition.RIGHT_BOTTOM},l=new n.maps.Map(e,{center:{lat:t.center[1],lng:t.center[0]},zoom:t.zoom,mapTypeId:i?n.maps.MapTypeId.HYBRID:n.maps.MapTypeId.ROADMAP,mapId:t.mapId,styles:i?void 0:eu(t.appearance==="dark"?"dark":"light"),disableDefaultUI:true,zoomControl:c,zoomControlOptions:{position:s[t.toolsPosition]},gestureHandling:t.interactive?"auto":"none",keyboardShortcuts:t.interactive});if(t.bounds){let u=new n.maps.LatLngBounds({lat:t.bounds[0][1],lng:t.bounds[0][0]},{lat:t.bounds[1][1],lng:t.bounds[1][0]});l.fitBounds(u);}await new Promise(u=>{n.maps.event.addListenerOnce(l,"idle",()=>u());}),o.onLoad();let p=new globalThis.Map;return {setCenter:u=>l.setCenter({lat:u[1],lng:u[0]}),setZoom:u=>l.setZoom(u),setBounds:(u,g)=>{let h=new n.maps.LatLngBounds({lat:u[1],lng:u[0]},{lat:g[1],lng:g[0]});l.fitBounds(h);},setAppearance:u=>{u==="satellite"?(l.setMapTypeId(n.maps.MapTypeId.HYBRID),l.setOptions({styles:void 0})):(l.setMapTypeId(n.maps.MapTypeId.ROADMAP),l.setOptions({styles:eu(u)}));},setInteractive:u=>{l.setOptions({zoomControl:t.tools==="zoom"||t.tools==="auto"&&u,gestureHandling:u?"auto":"none",keyboardShortcuts:u});},flyTo:(u,g)=>{l.panTo({lat:u[1],lng:u[0]}),g?.zoom!=null&&l.setZoom(g.zoom);},panTo:u=>l.panTo({lat:u[1],lng:u[0]}),fitBounds:(u,g)=>{if(u.length===0)return;let h=new n.maps.LatLngBounds;for(let[f,b]of u)h.extend({lat:b,lng:f});l.fitBounds(h,g?.paddingPx??40);},getCenter:()=>{let u=l.getCenter();return u?[u.lng(),u.lat()]:[0,0]},getZoom:()=>l.getZoom()??0,getBounds:()=>{let u=l.getBounds();if(!u)return [[0,0],[0,0]];let g=u.getSouthWest(),h=u.getNorthEast();return [[g.lng(),g.lat()],[h.lng(),h.lat()]]},addMarker:(u,g,h)=>{let f=document.createElement("div");f.dataset.gdsPart="map-marker",f.dataset.gdsState="idle",f.style.cursor="pointer",h==="center"&&(f.style.transform="translateY(50%)"),f.addEventListener("mouseenter",()=>o.onMarkerHover(u)),f.addEventListener("mouseleave",()=>o.onMarkerHover(null)),f.addEventListener("click",k=>{o.onMarkerClick(u,v.coords,k);});let b=new n.maps.marker.AdvancedMarkerElement({map:l,position:{lat:g[1],lng:g[0]},content:f}),v={element:f,coords:g,setHovered:k=>{f.dataset.gdsState=k?"hovered":"idle",b.zIndex=k?10:1;},setPosition:k=>{v.coords=k,b.position={lat:k[1],lng:k[0]};},remove:()=>{b.map=null,p.delete(u);}};return p.set(u,{marker:b,handle:v}),v},destroy:()=>{p.forEach(({marker:u})=>{u.map=null;}),p.clear();},instance:l}};});var nu={};Ir(nu,{createLeafletAdapter:()=>Hb});function Db(){if(typeof document>"u"||globalThis.__gradeLeafletCssBundled||document.getElementById(au))return;let e=document.createElement("link");e.id=au,e.rel="stylesheet",e.href=Lb,document.head.appendChild(e);}var Lb,au,ru,Ab,Ib,Hb,iu=Ka(()=>{Lb="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css",au="gds-leaflet-css";ru={light:"rastertiles/voyager",dark:"rastertiles/dark_all",satellite:"rastertiles/voyager"},Ab=e=>`https://{s}.basemaps.cartocdn.com/${e}/{z}/{x}/{y}{r}.png`,Ib="\xA9 OpenStreetMap contributors \xA9 CARTO",Hb=async(e,t,o)=>{Db();let a;try{a=await import('leaflet'),a.default&&(a=a.default);}catch(h){throw o.onError({code:"sdk-missing",message:"@gradeui/ui Map: `leaflet` is not installed. Run `pnpm add leaflet` to use the worker-free Leaflet adapter.",cause:h}),h}let r=h=>[h[1],h[0]],n=t.tools==="zoom"||t.tools==="auto"&&t.interactive,i={"top-left":"topleft","top-right":"topright","bottom-left":"bottomleft","bottom-right":"bottomright"},c=a.map(e,{center:r(t.center),zoom:t.zoom,zoomControl:false,attributionControl:true,dragging:t.interactive,scrollWheelZoom:t.interactive,doubleClickZoom:t.interactive,boxZoom:t.interactive,keyboard:t.interactive,touchZoom:t.interactive});n&&a.control.zoom({position:i[t.toolsPosition]??"topleft"}).addTo(c);let s=h=>{let f=a.tileLayer(Ab(ru[h]??ru.light),{maxZoom:20,subdomains:"abcd",detectRetina:true,attribution:Ib,crossOrigin:true});return f.on("tileerror",()=>o.onError({code:"tile-load-failed",message:"map tile failed to load (is the tile host allowed by CSP?)"})),f.addTo(c),f},l=s(t.appearance),p=h=>{l&&c.removeLayer(l),l=s(h);};t.bounds&&c.fitBounds([r(t.bounds[0]),r(t.bounds[1])],{animate:false}),o.onLoad();let m=typeof ResizeObserver<"u"?new ResizeObserver(()=>c.invalidateSize(false)):null;m?.observe(e),requestAnimationFrame(()=>c.invalidateSize(false)),window.setTimeout(()=>c.invalidateSize(false),200),window.setTimeout(()=>c.invalidateSize(false),600);let u=new globalThis.Map;return {setCenter:h=>c.panTo(r(h),{animate:false}),setZoom:h=>c.setZoom(h),setBounds:(h,f)=>c.fitBounds([r(h),r(f)],{animate:false}),setAppearance:h=>p(h),setInteractive:h=>{let f=["dragging","scrollWheelZoom","doubleClickZoom","boxZoom","keyboard","touchZoom"];for(let b of f){let v=c[b];v&&(h?v.enable():v.disable());}},flyTo:(h,f)=>c.flyTo(r(h),f?.zoom??c.getZoom(),{duration:(f?.durationMs??800)/1e3}),panTo:(h,f)=>c.panTo(r(h),{duration:(f?.durationMs??600)/1e3}),fitBounds:(h,f)=>{if(h.length===0)return;let b=f?.paddingPx??40;c.fitBounds(h.map(r),{padding:[b,b],duration:(f?.durationMs??800)/1e3});},getCenter:()=>{let h=c.getCenter();return [h.lng,h.lat]},getZoom:()=>c.getZoom(),getBounds:()=>{let h=c.getBounds(),f=h.getSouthWest(),b=h.getNorthEast();return [[f.lng,f.lat],[b.lng,b.lat]]},addMarker:(h,f,b)=>{let v=document.createElement("div");v.dataset.gdsPart="map-marker",v.dataset.gdsState="idle",v.style.position="absolute",v.style.cursor="pointer",v.style.transform=b==="center"?"translate(-50%, -50%)":"translate(-50%, -100%)",v.addEventListener("mouseenter",()=>o.onMarkerHover(h)),v.addEventListener("mouseleave",()=>o.onMarkerHover(null)),v.addEventListener("click",C=>o.onMarkerClick(h,S.coords,C));let k=a.divIcon({className:"gds-leaflet-marker",html:"",iconSize:[0,0],iconAnchor:[0,0]}),x=a.marker(r(f),{icon:k,interactive:true,keyboard:false}).addTo(c),w=x.getElement();w&&(w.style.pointerEvents="auto",w.appendChild(v));let S={element:v,coords:f,setHovered:C=>{v.dataset.gdsState=C?"hovered":"idle",w&&(w.style.zIndex=C?"1000":"");},setPosition:C=>{S.coords=C,x.setLatLng(r(C));},remove:()=>{c.removeLayer(x),u.delete(h);}};return u.set(h,{marker:x,handle:S}),S},destroy:()=>{m?.disconnect(),u.forEach(({marker:h})=>c.removeLayer(h)),u.clear(),c.remove();},instance:c}};});var vs={name:"Accordion",description:`Long-form content that would overwhelm if shown all at once \u2014 FAQs, settings groups, "what's included" sections, nested help. For tab-style peer views with one always visible, reach for Tabs. For a single show/hide reveal use Collapsible.`,import:"@gradeui/ui",aliases:["accordion","faq","expand","collapse list","disclosure list","disclosure group","outline group","expandable list","sectionlist"],subcomponents:["AccordionItem","AccordionTrigger","AccordionContent"],composesWith:["Card (as a faq inside a card body)","Section primitives"],styleDefaults:{AccordionItem:"border-b",AccordionTrigger:"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",AccordionContent:"pb-4 pt-0"},props:{type:{schema:z.enum(["single","multiple"]),design:"knob",description:"single keeps one open at a time, multiple lets several be open at once"},collapsible:{schema:z.boolean().optional(),design:"knob",description:'only valid with type="single"; allows the open item to be toggled shut'},defaultValue:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"initial open item(s)"},value:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"controlled"},onValueChange:{schema:z.unknown().optional(),design:"event"},children:{schema:z.unknown().optional(),design:"plumbing",description:"the row label users click to expand"}}};var ys={name:"AiChat",description:'A flexible chat block \u2014 header + scrollable message list + composer. Out of the box it looks like a polished "AI panel"; under it, every region is a slot so hosts can compose richer chat surfaces (e.g. Studio\'s left column with selection chip + settings panel above the composer, an error banner inline, per-message usage / refs / actions). Per-turn token usage, refs, and actions are optional and gated by `showUsage` / `showRefs` / `showActions` \u2014 leave them off for product-facing chats, turn them on for developer-facing ones where transparency matters. Composes with [[AIChatComposer]] (rendered internally; can be slotted in with custom props via `composerSlot`).',import:"@gradeui/ui",aliases:["ai chat","chat panel","chat block","llm chat","assistant panel","copilot chat","ai assistant"],composesWith:["Card (host in a sidebar panel)","Sheet (mobile drawer)","Stack (place above other content)","AIChatComposer (internal composer; slot to override)"],styleDefaults:{MessageActions:"inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px]",ThinkingDisclosure:"w-3.5 h-3.5 text-gds-gray-500 dark:text-gds-gray-400 shrink-0",StepsDisclosure:"w-3.5 h-3.5 text-gds-gray-500 dark:text-gds-gray-400 transition-transform shrink-0",AIChat:"flex flex-col overflow-hidden"},props:{messages:{schema:z.unknown().optional(),design:"plumbing",description:'`{ id, role: "user" | "assistant", content, timestamp, thinking?, steps?, usage?, refs?, actions?, duration? }`; defaults to empty'},onSendMessage:{schema:z.unknown().optional(),design:"event",description:"fires when the user submits via the default composer; ignored if `composerSlot` is set"},isLoading:{schema:z.boolean().optional(),design:"knob",description:"shows a typing indicator at the bottom of the message list"},placeholder:{schema:z.string().optional(),design:"content",description:"composer placeholder text (ignored if `composerSlot` is set)"},title:{schema:z.string().optional(),design:"plumbing",description:'header title; defaults to "AI Assistant"'},titleIcon:{schema:z.unknown().optional(),design:"plumbing",description:"optional icon rendered before the title (e.g. `<Sparkles />`)"},headerTokens:{schema:z.number().optional(),design:"knob",description:'optional session-level token total shown on the right of the header; rendered as "N tokens" with a small gauge icon when set'},headerEnd:{schema:z.unknown().optional(),design:"plumbing",description:"optional arbitrary content appended after `headerTokens` on the right of the header"},showUsage:{schema:z.boolean().optional(),design:"knob",description:"show the per-turn `usage` strip below the assistant bubble; default false"},showRefs:{schema:z.boolean().optional(),design:"knob",description:"show the per-turn `refs` strip below the assistant bubble; default false"},showActions:{schema:z.boolean().optional(),design:"knob",description:"render per-turn `actions` chips when a message has them; default true"},showDuration:{schema:z.boolean().optional(),design:"knob",description:'render the per-turn wall-clock duration ("2.3s") below the assistant bubble when a message carries `duration`; default false'},showThinking:{schema:z.boolean().optional(),design:"knob",description:'render the per-turn reasoning ("Thoughts") disclosure above the assistant prose when a message carries `thinking`; collapsed by default, click to expand; default false'},showSteps:{schema:z.boolean().optional(),design:"knob",description:'render the per-turn step timeline above the assistant prose when a message carries `steps`; collapsed view shows the current running step (or "N steps completed"), click to expand the vertical timeline with status glyphs; default false'},thinkingPhrase:{schema:z.string().optional(),design:"content",description:'override the "Thinking" label in the loading indicator'},suggestedPrompts:{schema:z.unknown().optional(),design:"plumbing",description:"empty-state quick prompts (ignored if `emptyStateSlot` is set)"},emptyStateSlot:{schema:z.unknown().optional(),design:"plumbing",description:"replaces the default empty state entirely"},errorSlot:{schema:z.unknown().optional(),design:"plumbing",description:"rendered after the messages list (typically an error banner)"},composerAboveSlot:{schema:z.unknown().optional(),design:"plumbing",description:"rendered between the messages and the composer (selection chip, settings panel)"},composerBelowSlot:{schema:z.unknown().optional(),design:"plumbing",description:"rendered below the composer (disclaimer, char counter)"},composerSlot:{schema:z.unknown().optional(),design:"plumbing",description:"full override of the composer; when provided, `onSendMessage` + `placeholder` are unused"},bare:{schema:z.boolean().optional(),design:"knob",description:"strip the outer card chrome (background, border, rounded corners) so the chat takes the surface of its container; default false (keeps the canned card look)"},assistantBubble:{schema:z.boolean().optional(),design:"knob",description:"whether assistant messages render with a bubble (background + border + padding + rounded corners); default true. Set false for a Claude.ai-style chromeless transcript where assistant text sits on the surface and only user turns wear a bubble."},className:{schema:z.string().optional(),design:"plumbing"}}};var xs={name:"AiChatComposer",description:"The reusable \"input card\" for any chat surface \u2014 auto-growing textarea, image attachments via paperclip and clipboard paste, attachment chips with previews, Send/Stop toggle, controlled value. Drop in below any messages list. Use this when you want the input affordances of `<AIChat>` but you're rendering your own messages list / scrollarea / header (e.g. Studio's left-column chat, where SelectionChip and SettingsPanel sit between messages and composer). For the full canned chat block, use `<AIChat>` instead.",import:"@gradeui/ui",aliases:["chat composer","chat input","prompt composer","message input"],composesWith:["AIChat (uses this internally)","Card (host above)","ScrollArea (place messages above)"],styleDefaults:{AIChatComposer:"w-full"},props:{value:{schema:z.string(),design:"content",description:"controlled textarea value"},onChange:{schema:z.unknown(),design:"event",description:"fires for every textarea change"},onSend:{schema:z.unknown(),design:"event",description:"fires when the user submits (Enter or click Send); composer validates that text or attachments exist before firing"},isLoading:{schema:z.boolean().optional(),design:"knob",description:"disables the textarea + paperclip and swaps Send for Stop"},onStop:{schema:z.unknown().optional(),design:"event",description:"fires when the user clicks Stop; without this, Stop renders disabled"},placeholder:{schema:z.string().optional(),design:"content"},maxLength:{schema:z.number().optional(),design:"knob",description:"hard cap passed to the underlying `<textarea>`"},showHint:{schema:z.boolean().optional(),design:"knob",description:'show the "Press Enter\u2026 \xB7 Paste images" hint below the card; default true, set false when the host renders its own footer'},className:{schema:z.string().optional(),design:"plumbing"}}};var ws={name:"AppShell",description:`The top-level page scaffold for any app-like or marketing layout. Reach for AppShell
|
|
3
3
|
instead of hand-rolling \`grid grid-cols-[auto_1fr]\` so the layout shape (top nav,
|
|
4
4
|
side nav, three-pane Slack/Mail/Notion shape, constrained vs full-width main) is a
|
|
5
5
|
prop the settings panel can mutate. Don't compose top-level layouts from raw grid
|
|
@@ -14,7 +14,7 @@ Pick the \`nav\` variant from the source:
|
|
|
14
14
|
shape. ANY time you see a vertical icon rail next to
|
|
15
15
|
a separate list/sidebar, this is the answer \u2014 don't
|
|
16
16
|
reach for raw \`<div className="grid">\` with three
|
|
17
|
-
column tracks.`,import:"@gradeui/ui",subcomponents:["AppShellHeader","AppShellNav","AppShellAside","AppShellMain","AppShellFooter"],composesWith:["Stack","Row","Card","Button","Separator","Sidebar","Toolbar","any page content"],styleDefaults:{AppShell:"gds-app-shell min-h-screen w-full bg-background text-foreground grid",AppShellHeader:"gds-app-shell-header",AppShellNav:"gds-app-shell-nav border-b bg-background",AppShellAside:"gds-app-shell-aside min-w-0 border-r bg-background",AppShellMain:"gds-app-shell-main min-w-0 w-full",AppShellFooter:"gds-app-shell-footer border-t bg-background"},variantDefaults:{nav:"none"},props:{nav:{schema:z.enum(["none","top","side","three-pane"]).optional(),design:"knob",description:"layout structure",default:"none"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var Al={name:"Avatar",description:"User/entity identity for PEOPLE \u2014 profile pictures, author rows, member lists, account headers. Circular by default; the AvatarFallback initials read as a person's name. Always include AvatarFallback so load failure doesn't leave a gap.",import:"@gradeui/ui",aliases:["profile picture","user image","account image","avatar","person glyph","user avatar","profile image","react native avatar"],subcomponents:["AvatarImage","AvatarFallback"],composesWith:["Card (in CardHeader)","Table cells","Badge (placed next to for status)","Skeleton (loading state)","Message (in the avatar slot)"],styleDefaults:{AvatarImage:"aspect-square h-full w-full"},props:{size:{schema:z.enum(["2xs","xs","sm","md","lg","xl"]).optional(),design:"knob",description:"t-shirt scale, 20px \u2192 80px; default md (40px). xs for chat message rows, sm for comments/dense threads, lg/xl for profile headers. Prefer this over h-*/w-* className utilities."},src:{schema:z.unknown().optional(),design:"plumbing"},alt:{schema:z.unknown().optional(),design:"plumbing"},tone:{schema:z.enum(["muted","primary","violet","amber","emerald","sky","rose","plum","lime"]).optional(),design:"knob",description:"tinted bg/text pair. Reach for explicit tones when each author needs a stable colour mapping (chat avatars, comment threads, member lists); default muted."},children:{schema:z.unknown().optional(),design:"plumbing",description:"initials (or a small icon), rendered while the image loads or when it fails"}}};var Dl={name:"BackgroundFill",description:"The background *paint* of a frame \u2014 a generative shader, image, video, gradient, repeating texture, or solid token rendered as a layer BEHIND the frame's content. Use it as the first child of a `relative` frame; it paints an `absolute inset-0`, `z-0`, `pointer-events-none` layer, so content carrying `relative z-10` sits on top. This is the canonical way to give any container a rich background \u2014 never drop a full-bleed `<ThreeScene>` or `<img>` as a free-standing sibling. For a sized, in-flow media element (a hero card, a thumbnail), use ThreeScene / MediaSurface / VideoPlayer directly instead.",import:"@gradeui/ui",aliases:["background","fill","frame fill","backdrop","surface fill","background image","background video","background gradient","background shader","texture","paint"],composesWith:["AppShell","Card","Stack","Row","Grid (any relative container)","ThreeScene (shader fill)","MediaSurface"],styleDefaults:{BackgroundFill:"absolute inset-0 h-full w-full"},props:{type:{schema:z.enum(["none","solid","gradient","image","video","shader"]),design:"knob",description:"which paint to render (required)"},color:{schema:z.string().optional(),design:"content",description:"solid fill; a token name (`primary`, `card`, `muted`, `accent`, `secondary`, `destructive`, `background`, `transparent`) or any CSS colour"},gradient:{schema:z.unknown().optional(),design:"plumbing",description:'stops are token names or CSS colours. shape: "linear" (default, uses `angle`, default 135\xB0) | "radial" (uses `at` \u2014 CSS position like "top" / "30% 20%", default "center" \u2014 and optional `size` like "45rem 50rem", default farthest-corner)'},src:{schema:z.string().optional(),design:"content",description:"image or video URL"},fit:{schema:z.enum(["cover","contain","fill","none"]).optional(),design:"knob",description:'object-fit for image/video (default "cover")'},position:{schema:z.string().optional(),design:"content",description:'CSS object/background position (default "center")'},repeat:{schema:z.boolean().optional(),design:"knob",description:"tile the image (background-repeat) instead of a single <img>"},tileSize:{schema:z.string().optional(),design:"content",description:'CSS background-size when repeating (e.g. "120px")'},preset:{schema:z.string().optional(),design:"content",description:"shader preset id (see ThreeScene)"},fragmentShader:{schema:z.string().optional(),design:"content",description:"custom GLSL (takes precedence over preset)"},palette:{schema:z.unknown().optional(),design:"plumbing",description:"shader palette overrides; wrap tokens as `oklch(var(--token))`"},postPreset:{schema:z.string().optional(),design:"content",description:"shader post-FX"},opacity:{schema:z.number().optional(),design:"knob",description:"layer opacity 0\u20131"},blendMode:{schema:z.unknown().optional(),design:"plumbing",description:"blend against the frame behind it"},radius:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"match the frame's radius so the paint clips cleanly"}}};var Hl={name:"Badge",description:"Compact status chips, counts, tags, pills. For higher-signal inline status \u2192 use Callout. For solid CTAs \u2192 Button. Soft/outline variants are quieter; solid variants are loud.",import:"@gradeui/ui",aliases:["chip","tag","pill","label chip","badge","tag view","status pill","token","count badge"],composesWith:["Card","Table (inside a cell)","Avatar (next to it)","anywhere inline"],props:{variant:{schema:z.enum(["default","secondary","destructive","outline","highlight","success","warning","info","success-soft","warning-soft","destructive-soft","info-soft","highlight-soft","success-outline","warning-outline","destructive-outline","info-outline"]).optional(),design:"knob"},rounded:{schema:z.enum(["default","full"]).optional(),design:"knob",description:'"full" gives a pill shape'}}};var _l={name:"Banner",description:`A full-width horizontal strip surfacing system-level state, announcements, or first-run guidance \u2014 "you're previewing a draft", "investigating incident", "new feature available", "send your design to Figma". Distinct from Callout (inline boxed message in the layout flow), Toast (transient floating notification), Dialog (modal interrupt). Banner is what lives at the TOP of an AppShellHeader, page, or panel.`,import:"@gradeui/ui",aliases:["banner","notification banner","system banner","header banner","announcement bar","top bar","status bar","promo banner","incident banner","draft banner","first run banner","glass banner","sticky banner"],composesWith:["AppShellHeader (most common host \u2014 banner sits ABOVE the header content)","Button (in the action slot)","Link (inside the content)","Lucide icons (in the icon slot)"],styleDefaults:{Banner:"relative flex items-center gap-3 px-4 py-2.5 text-sm leading-relaxed border-b bg-muted text-foreground border-border [&>svg]:text-muted-foreground justify-between"},variantDefaults:{variant:"default",align:"between"},props:{variant:{schema:z.enum(["default","info","success","warning","destructive","announcement"]).optional(),design:"knob",description:'intent + tonal direction. `default` is a calm muted strip; `announcement` is a low-alpha brand tint for "new feature" messaging; status variants pick up the soft+deep token pairs.'},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"material applied over the variant tint. `glass` for banners that sit over imagery / generative backdrops."},align:{schema:z.enum(["start","center","between"]).optional(),design:"knob",description:"justify behaviour of the inner flex row. Defaults to `between` so the action / dismiss button right-align."},sticky:{schema:z.boolean().optional(),design:"knob",description:"stick to the top of the scroll container."},dismissible:{schema:z.boolean().optional(),design:"knob",description:"render the trailing X close button. Pair with `onDismiss` to react."},onDismiss:{schema:z.unknown().optional(),design:"event"},icon:{schema:z.unknown().optional(),design:"plumbing",description:"leading icon slot. NOT inferred from variant; pass what fits the message."},action:{schema:z.unknown().optional(),design:"plumbing",description:'trailing slot before dismiss. Usually a `<Button size="sm">` or `<a>`.'},role:{schema:z.string().optional(),design:"plumbing",description:"overrides the automatic role mapping (warning/destructive \u2192 alert, others \u2192 status)."}}};var Fl={name:"Breadcrumb",description:'Reach for Breadcrumb whenever a screen sits inside a hierarchy and you want the path back to the top to be visible. Common spots: above page titles in admin/CMS screens, top of Settings detail pages, after a router redirect when the URL implies depth. Use the current page as a <BreadcrumbPage> (non-clickable) and prior levels as <BreadcrumbLink>. For a horizontal "top nav" of peer destinations use Side Menu or Tabs instead \u2014 Breadcrumb is strictly for hierarchical path.',import:"@gradeui/ui",aliases:["breadcrumb","breadcrumbs","crumbs","path","page hierarchy","path bar","navigation trail","finder path"],subcomponents:["BreadcrumbList","BreadcrumbItem","BreadcrumbLink","BreadcrumbPage","BreadcrumbSeparator","BreadcrumbEllipsis"],composesWith:["AppShellMain","Card (in CardHeader)","Dialog"],styleDefaults:{BreadcrumbList:"flex flex-wrap items-center gap-1.5 break-words text-xs text-muted-foreground",BreadcrumbItem:"inline-flex items-center gap-1.5",BreadcrumbPage:"inline-flex items-center gap-1.5 px-0.5 text-xs font-medium text-foreground",BreadcrumbSeparator:"[&_svg]:size-3 [&_svg]:shrink-0 text-muted-foreground/60",BreadcrumbEllipsis:"flex h-5 w-5 items-center justify-center",BreadcrumbMenuTrigger:"h-3 w-3 text-muted-foreground transition-transform"},props:{"aria-label":{schema:z.unknown().optional(),design:"plumbing",description:"passed to the underlying <nav>"},separator:{schema:z.unknown().optional(),design:"plumbing",description:'**tree-wide default** for every <BreadcrumbSeparator/> inside. Pass a string ("/", "\u203A", "\u2022"), a lucide icon (`<Slash/>`, `<ChevronRight/>`), or any ReactNode. Default: `<ChevronRight/>`. Set once on the root; every separator below picks it up via context.'},className:{schema:z.unknown().optional(),design:"plumbing",description:"the <ol> wrapper; usually no overrides needed"},href:{schema:z.unknown().optional(),design:"plumbing",description:"renders as <a> when set, <button> when not"},asChild:{schema:z.unknown().optional(),design:"plumbing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"per-instance override of the separator glyph. When set, beats the root's `separator` prop for this one slot. When not set, falls back to the root's `separator`, then to `<ChevronRight/>`."}}};var Ol={name:"Button",description:'Any clickable action. Use `iconOnly` for square icon-only buttons (at any size), variant="link" for inline links that should look like Button, the `raised` prop for high-commitment / weighty actions where the chrome can afford a tactile "physical key" treatment (composes with any variant; variant="raised" remains the neutral-key alias). A Button placed next to a TabsList of the same size lines up edge-to-edge without per-call overrides.',import:"@gradeui/ui",aliases:["button","push button","plain button","bordered button","destructive button","capsule button","link button","action button","cta","raised button","pill button","key button"],composesWith:["Dialog","DropdownMenu","Tooltip","Card (in CardFooter)","Row","Form controls"],styleDefaults:{Button:"inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1.5 px-3 text-base [&_svg]:size-4"},variantDefaults:{variant:"default",size:"md"},props:{variant:{schema:z.enum(["default","destructive","outline","secondary","ghost","link","raised"]).optional(),design:"knob",description:"`raised` here is a back-compat alias (the raised TRAIT on a neutral key surface); prefer the `raised` prop"},raised:{schema:z.boolean().optional(),design:"knob",description:'presence TRAIT: tactile elevation (bevel + drop + hover glow + pressed sink) layered onto ANY variant \u2014 raised primary, raised outline, etc. Glow tone reads --btn-glow \u2192 --accent-glow \u2192 --selected-glow; override per-button via style={{ "--btn-glow": "var(--warning)" }}'},size:{schema:z.enum(["2xs","xs","sm","md","lg"]).optional(),design:"knob",description:"t-shirt scale aligned with Tabs/ToggleGroup heights (2xs=h-5, xs=h-6, sm=h-7, md=h-8, lg=h-10). 2xs/xs are the dense tool-panel sizes (match Figma Button size=2xs/xs). `default` still works as an alias for `md`."},iconOnly:{schema:z.boolean().optional(),design:"knob",description:"squares the button at the current `size` height (w = h, no horizontal padding) for icon-only buttons; the icon child is centered. This is THE way to make a square icon button at any density (sm\u219228\xB2, 2xs\u219220\xB2)."},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"renders as the child element (use to wrap <a>/<Link>)"},disabled:{schema:z.boolean().optional(),design:"knob"}}};var zl={name:"Calendar",description:'An inline date grid \u2014 date-of-birth pickers in profile forms, scheduling screens with a month view, range selection in reporting filters. For a compact trigger-and-popover input, use DatePicker / DateRangePicker (which wrap Calendar internally). For one-off relative dates ("yesterday", "last week") use a Select instead.',import:"@gradeui/ui",aliases:["calendar","date grid","month view","scheduler grid","calendar view","multidate picker","react native calendars"],subcomponents:["CalendarDayButton"],composesWith:["Popover (DatePicker composes them)","Card (inline scheduling card)","Dialog (full-screen mobile date pick)"],styleDefaults:{Calendar:"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent"},props:{mode:{schema:z.enum(["single","multiple","range"]).optional(),design:"knob",description:"picks one date, several dates, or a [from, to] range"},selected:{schema:z.unknown().optional(),design:"plumbing",description:"controlled selection; shape matches `mode`"},onSelect:{schema:z.unknown().optional(),design:"event",description:"fires with the new selection"},month:{schema:z.unknown().optional(),design:"plumbing",description:"controlled displayed month"},defaultMonth:{schema:z.unknown().optional(),design:"plumbing",description:"uncontrolled initial month"},onMonthChange:{schema:z.unknown().optional(),design:"event"},numberOfMonths:{schema:z.number().optional(),design:"knob",description:"render multiple months side by side, useful for range pickers"},disabled:{schema:z.unknown().optional(),design:"plumbing"},captionLayout:{schema:z.enum(["label","dropdown","dropdown-months","dropdown-years"]).optional(),design:"knob"},className:{schema:z.string().optional(),design:"plumbing"}}};var Vl={name:"Callout",description:"Inline, ambient, non-blocking status/feedback that sits inside the layout flow. Form-level validation summaries, settings-page notices, page-level banners. NOT a toast (use Sonner for transient). NOT a modal (use Dialog when the user must respond). Put an icon as first child \u2014 it's auto-positioned; CalloutTitle + CalloutDescription follow.",import:"@gradeui/ui",aliases:["callout","banner","notice","inline alert","in-app notification","status banner","info banner","info callout","warning callout","success callout"],subcomponents:["CalloutTitle","CalloutDescription"],composesWith:["lucide-react icons as first child","Button (inside CalloutDescription)","Card (as a section callout)"],styleDefaults:{CalloutTitle:"mb-1 font-medium leading-none tracking-tight",CalloutDescription:"text-sm [&_p]:leading-relaxed"},props:{variant:{schema:z.enum(["default","destructive","success","warning","info"]).optional(),design:"knob",description:"semantic colouring; `default` is neutral"}}};var Gl={name:"Card",description:'Grouped content with a distinct surface \u2014 settings panels, dashboard tiles, list-of-cards layouts, marketing hero containers, AI suggestion overlays. Pair CardHeader (title + description) with CardContent and optional CardFooter (actions). Reach for `surface="glass"` whenever the card sits over a busy backdrop (gradient mesh, dot grid, generative art, image hero).',import:"@gradeui/ui",aliases:["card","group box","groupbox","panel","tile","surface","glass card","frosted card","floating panel","hero card","ai suggestion card","dashboard tile","settings panel"],subcomponents:["CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],composesWith:["Button (in CardFooter)","Badge","Separator","Avatar","Code","MediaSurface","any form controls"],styleDefaults:{Card:"gds-card rounded-xl border text-card-foreground shadow",CardHeader:"flex flex-col space-y-1.5 p-6",CardTitle:"font-semibold leading-none tracking-tight",CardDescription:"text-sm text-muted-foreground",CardContent:"p-6 pt-0",CardFooter:"flex items-center p-6 pt-0"},props:{surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the card surface is *made of*. `solid` is the default opaque `bg-card`. `translucent` is ~82% opacity for menu sheets. `glass` is ~58% opacity + 14px blur + edge highlight for floating panels. `glass-strong` is ~42% + 24px blur for full-page overlays. Composes with `shadow-elevation-*` (depth) and `gds-aura-*` (state signal)."},Each:{schema:z.unknown(),design:"plumbing"}}};var hg=z.enum(["start","center","end"]),bg=z.object({delay:z.number().int().positive().optional(),pauseOnHover:z.boolean().optional(),pauseWhenOffscreen:z.boolean().optional()}),vg=z.union([z.boolean(),bg]),$l={name:"Carousel",description:"Token-driven slideshow primitive. Embla under the hood, custom autoplay loop with per-slide duration overrides, and a VideoSlide variant that autoplays muted+loop with a poster fallback. Reach for it for marketing hero rotations, app onboarding tours, image galleries, TV/streaming featured rails \u2014 anywhere a horizontal stack of slides cycles automatically or on user input.",import:"@gradeui/ui",aliases:["carousel","slideshow","slider","hero rotation","image gallery","featured row","swipe deck"],subcomponents:["Carousel.Slide","Carousel.VideoSlide","Carousel.Dots","Carousel.Arrows","Carousel.Prev","Carousel.Next"],composesWith:["MediaSurface (inside Carousel.Slide for posters / album art)","Card (slide content)","Stack / Row (slide composition)"],props:{loop:{schema:z.boolean().optional(),design:"knob",label:"Loop",default:true,description:"Wrap from the last slide back to the first. Default true \u2014 the natural fit for hero rotations. Turn off for finite onboarding sequences."},align:{schema:hg.optional(),design:"knob",control:"toggle-group",label:"Slide alignment",default:"start",description:"How slides line up inside the viewport when not at 100% width. 'start' is full-bleed; 'center' gives the 'peek of neighbours' carousel look."},slidesPerView:{schema:z.number().int().positive().optional(),design:"knob",label:"Slides per view",default:1,description:"How many slides show at once. 1 for hero rotations; 3 for thumbnail strips; etc. For media-query responsive layouts, leave this at 1 and override `--gds-carousel-slide-basis` on each Slide via CSS."},autoplay:{schema:vg.optional(),design:"structured",label:"Autoplay",default:false,description:"`true` for sensible defaults (5s, pause on hover, pause offscreen). Object form: `{ delay, pauseOnHover, pauseWhenOffscreen }`. Per-slide overrides go on `<Carousel.Slide duration={ms}>`."},draggable:{schema:z.boolean().optional(),design:"knob",label:"Drag to swipe",default:true,description:"Disable when slide content (a Map, a chart, a draggable card) needs to swallow drag events."},onSlideChange:{schema:z.function().optional(),design:"event",description:"Fires with the new slide index whenever the active slide changes (programmatic, autoplay, or user swipe)."},className:{schema:z.string().optional(),design:"plumbing"},style:{schema:z.record(z.string(),z.unknown()).optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing",description:"Carousel.Slide / Carousel.VideoSlide children, plus optionally Carousel.Dots and Carousel.Arrows."}}};var Wl={name:"Chart",description:"Reporting dashboards, single-purpose analytics cards (revenue, conversions, active users), or anywhere you'd otherwise hand-roll a Recharts setup. Bring the actual chart type from `recharts` \u2014 ChartContainer doesn't pick the chart shape for you, it themes whatever you nest. For sparkline-style decorative trends consider just rendering a small SVG line directly; ChartContainer is overkill for non-interactive ornament.",import:"@gradeui/ui",aliases:["chart","charts","graph","bar chart","line chart","area chart","recharts","analytics chart","swift chart","swiftui chart","victory chart","victory native"],subcomponents:["ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","ChartStyle"],composesWith:["Card (chart-in-a-card pattern)","Tabs (multi-metric switcher)","Recharts components (Bar","Line","Area","Pie",'Radar from "recharts")'],styleDefaults:{ChartContainer:"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",ChartTooltipContent:"font-medium",ChartLegendContent:"flex items-center justify-center gap-4"},props:{config:{schema:z.unknown().optional(),design:"plumbing",description:'`{ [seriesKey]: { label: string; color?: string; theme?: { light: string; dark: string } } }`; the keys here are the names you reference in your Recharts <Bar dataKey="\u2026" /> calls'},id:{schema:z.string().optional(),design:"plumbing",description:"used for the inlined <style> tag"},children:{schema:z.unknown().optional(),design:"plumbing",description:"typically a single Recharts ResponsiveContainer or chart"},passes:{schema:z.unknown().optional(),design:"plumbing",description:"pair with `content={<ChartTooltipContent />}`"},indicator:{schema:z.enum(["dot","line","dashed"]).optional(),design:"knob"},hideLabel:{schema:z.unknown().optional(),design:"plumbing"},hideIndicator:{schema:z.unknown().optional(),design:"plumbing"},nameKey:{schema:z.unknown().optional(),design:"plumbing"},labelKey:{schema:z.unknown().optional(),design:"plumbing"},ChartLegend:{schema:z.unknown(),design:"plumbing"}}};var Ul={name:"Checkbox",description:"Binary on/off tied to a list (select multiple, agree to terms). Single on/off that controls a setting is better with Switch. For a label + description row, wrap in Field. When each option should be a whole selectable card (label + description, selected state on the card surface), use CheckboxCard.",import:"@gradeui/ui",aliases:["checkbox","tickbox","tick box","check","multi-select item"],composesWith:["Label (via htmlFor)","Field (label + description row)","CheckboxCard (whole-card selectable option)","Card","Form rows","Table (for row selection)"],styleDefaults:{Checkbox:"flex items-center justify-center text-current"},props:{checked:{schema:z.boolean().optional(),design:"knob"},onCheckedChange:{schema:z.unknown().optional(),design:"event"},defaultChecked:{schema:z.boolean().optional(),design:"knob"},disabled:{schema:z.boolean().optional(),design:"knob"},id:{schema:z.string().optional(),design:"plumbing",description:"bind a Label's htmlFor to this"}}};var jl={name:"CheckboxCard",description:"Multi-select where each option is a whole selectable card (add-ons, feature toggles, opt-ins). The whole card is the control, so focus and the checked state live on the card surface. Standalone (not in a group). Static content only \u2014 never nest an interactive control inside. For a plain checkbox + label row use Field instead.",import:"@gradeui/ui",aliases:["checkbox card","selectable card","multi-select card","add-on card","feature card","opt-in card"],composesWith:["Badge (in aside)","MediaSurface (custom children)","Stack / Grid (laying out several)"],props:{checked:{schema:z.unknown().optional(),design:"plumbing",description:"standard checkbox state"},label:{schema:z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:z.boolean().optional(),design:"knob",description:"hide the check; selection shown by the card border + background"},indicatorPosition:{schema:z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"arbitrary static content instead of label/description"}}};var Kl={name:"Code",description:'Read-only code surface for marketing heroes, docs, changelog entries, AI-output displays. Use `diff` for the "diff hero" pattern (before/after side-by-side or stacked). Use `reveal="lines"` with `trigger="inView"` for scroll-driven marketing pages. Use `reveal="typewriter"` for AI-output / chat-style displays. Use `bare` for inline code inside prose. NOT a code editor \u2014 for editable code, reach for an external editor primitive (CodeMirror / Monaco).',import:"@gradeui/ui",aliases:["code block","code","code snippet","code surface","syntax highlighted code","diff hero","diff view","diff block","changelog code","before after code","scroll-triggered code","typewriter code"],composesWith:["SectionBlock","Card","Tabs (for multi-file examples)","Carousel (slide-to-slide code progression)"],styleDefaults:{Code:"gds-code relative w-full overflow-hidden"},props:{source:{schema:z.string(),design:"content",description:"the code to render"},language:{schema:z.enum(["tsx","jsx","ts","js","html","css","json","bash","md","py","go","rust"]).optional(),design:"knob",description:"Prism language id; defaults to `tsx`"},highlight:{schema:z.unknown().optional(),design:"plumbing",description:"1-indexed line number, array of numbers, or array of `[start, end]` ranges to emphasise"},diff:{schema:z.unknown().optional(),design:"plumbing",description:"`{ added?: number[]; removed?: number[] }` \u2014 1-indexed lines for diff hero / changelog mode"},reveal:{schema:z.enum(["none","lines","typewriter","diff"]).optional(),design:"knob",description:"entrance animation; defaults to `none`"},trigger:{schema:z.enum(["mount","inView","manual"]).optional(),design:"knob",description:"what kicks the reveal off; defaults to `mount`"},play:{schema:z.boolean().optional(),design:"knob",description:'for `trigger="manual"`, set true to play'},speed:{schema:z.enum(["slow","normal","fast"]).optional(),design:"knob",description:"animation feel preset. `normal` (default) maps to the canonical 50ms/22ms staggers + 180ms pre-delay. Pick a feel; don't tune individual numbers unless you have to."},delay:{schema:z.number().optional(),design:"knob",description:"explicit delay before reveal starts (ms) \u2014 overrides the `speed` preset"},stagger:{schema:z.number().optional(),design:"knob",description:"explicit per-line stagger for `lines`/`diff`, per-token for `typewriter` (ms) \u2014 overrides the `speed` preset"},prompt:{schema:z.string().optional(),design:"content",description:'string prepended to each line. Use for terminal emulation: `prompt="$ "` for bash, `prompt="> "` for PowerShell, `prompt=">>> "` for Python REPL. Prompt characters render in muted token colour, don\'t pick up the typewriter stagger, and are hidden from screen readers.'},showLineNumbers:{schema:z.boolean().optional(),design:"knob"},filename:{schema:z.string().optional(),design:"content",description:"optional label rendered in the header chrome"},wrap:{schema:z.boolean().optional(),design:"knob",description:"wrap long lines instead of horizontal scroll"},bare:{schema:z.boolean().optional(),design:"knob",description:"drop chrome (border, header, padding) \u2014 for inline use"},size:{schema:z.enum(["xs","sm","md"]).optional(),design:"knob",description:"type-scale preset. `xs` (12px) for dense changelog cards / inline blocks; `sm` (14px, default) for marketing heroes and docs; `md` (16px) for focal-point displays."},height:{schema:z.enum(["auto","number","string"]).optional(),design:"knob",description:'container sizing. `auto` (default) grows with content. Number = pixels (`300` \u2192 `300px`). String passes through as CSS (`"20rem"`, `"50vh"`).'},maxLines:{schema:z.number().optional(),design:"knob",description:"cap the visible line count at exactly N line-heights. Wins over `height`. Inherits the current size's line-height automatically."}}};var ql={name:"Collapsible",description:'A single show/hide reveal \u2014 "Show advanced settings" rows, expandable inline help, "More details" sections inside cards. For multiple rows of expandable content where one-at-a-time matters, reach for Accordion. For a separate panel that floats above content, use Popover.',import:"@gradeui/ui",aliases:["collapsible","expand","show more","disclosure","advanced settings","disclosure group","expandable section","expandable view","show hide"],subcomponents:["CollapsibleTrigger","CollapsibleContent"],composesWith:["Button (as the trigger","asChild)","Card (expandable settings group)","Row (header + chevron)"],props:{open:{schema:z.boolean().optional(),design:"knob",description:"controlled open state"},defaultOpen:{schema:z.boolean().optional(),design:"knob",description:"uncontrolled initial state"},onOpenChange:{schema:z.unknown().optional(),design:"event"},children:{schema:z.unknown().optional(),design:"plumbing",description:"the clickable header (often a Button asChild)"}}};var Yl={name:"ColorPicker",description:`The token-led single-select colour picker \u2014 the focused "pick one colour token" sibling of FillPicker's solid tab. Use it anywhere a value is ONE Grade colour token (a fill colour, a border colour, an accent override) rather than a full paint. Composes Popover + Command exactly like Combobox, but each row is a Swatch + the token's short name, grouped by family and searchable. triggerVariant="inline" reduces the trigger to a single clickable swatch \u2014 reach for that inside inspectors and the FillSection fill rows. For a full paint (gradient / image / shader) use FillPicker; for a list of fills use FillSection; for a multi-stop gradient use GradientEditor.`,import:"@gradeui/ui",aliases:["color picker","colour picker","token picker","colour token picker","color token picker","swatch picker","paint colour","fill colour picker","accent picker","colour dropdown"],composesWith:["Popover","Command","Swatch","FillSection","GradientEditor","Field","PropertyList"],styleDefaults:{ColorPicker:"ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",ColorRow:"ml-auto h-3.5 w-3.5"},props:{value:{schema:z.string().optional(),design:"content",description:'a Grade colour token NAME ("action/primary"), the literal "transparent", or null when nothing is picked'},onValueChange:{schema:z.unknown().optional(),design:"event",description:'fired with the next value (token name, "transparent", or null)'},tokens:{schema:z.unknown().optional(),design:"plumbing",description:"token families offered in the list; defaults to the Grade semantic set (surface / action / status)"},searchable:{schema:z.boolean().optional(),design:"knob",description:"show the search input (default true)"},triggerVariant:{schema:z.enum(["default","inline"]).optional(),design:"knob",description:"default = form-control surface (swatch + name); inline = just a clickable swatch for inspector / fill-row use"},placeholder:{schema:z.string().optional(),design:"content",description:"trigger text when nothing is selected"},searchPlaceholder:{schema:z.string().optional(),design:"content",description:"search-input placeholder"},emptyMessage:{schema:z.string().optional(),design:"content",description:"shown when search returns no rows"},allowTransparent:{schema:z.boolean().optional(),design:"knob",description:"include a Transparent option at the top (default true)"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob",description:"popover alignment (default start)"},disabled:{schema:z.boolean().optional(),design:"knob",description:"lock to a read-only display of the current value"}}};var Zl={name:"Combobox",description:'Single-pick searchable picker \u2014 the single-select sibling of MultiSelect and the Linear "selectable badge" pattern (status / priority / assignee). Use triggerVariant="inline" with renderValue returning a Badge to make a value read as a clickable token that opens a command menu. For multiple selection use MultiSelect; for a small fixed list with no search use Select; for free-form command palettes use Command directly. Pass disabled (driven by a permission check) to show the value without letting the user edit it.',import:"@gradeui/ui",aliases:["combobox","single select","searchable select","picker","status picker","priority picker","assignee picker","command select","autocomplete","dropdown select","selectable badge","inline select","token select","linear combobox"],composesWith:["Popover","Command","Badge","Avatar","PropertyList","Table","Field"],styleDefaults:{Combobox:"ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"},props:{options:{schema:z.unknown(),design:"plumbing",description:"the selectable pool"},value:{schema:z.string().optional(),design:"content",description:"controlled selection (wire onValueChange)"},defaultValue:{schema:z.string().optional(),design:"content",description:"uncontrolled initial selection"},onValueChange:{schema:z.unknown().optional(),design:"event",description:"fired with the next value, or null when cleared"},placeholder:{schema:z.string().optional(),design:"content",description:"trigger text when nothing is selected"},searchPlaceholder:{schema:z.string().optional(),design:"content",description:"search-input placeholder"},emptyMessage:{schema:z.string().optional(),design:"content",description:"shown when search returns no rows"},searchable:{schema:z.boolean().optional(),design:"knob",description:"show the search input (default true)"},clearable:{schema:z.boolean().optional(),design:"knob",description:"add a Clear row so the value can return to unset"},triggerVariant:{schema:z.enum(["default","inline"]).optional(),design:"knob",description:"default = form-control surface (like Select); inline = chrome-free token trigger"},renderValue:{schema:z.unknown().optional(),design:"plumbing",description:"render the selected value yourself (e.g. a Badge); falls back to icon + label"},hideChevron:{schema:z.boolean().optional(),design:"knob",description:"drop the trailing chevron (inline token look)"},disabled:{schema:z.boolean().optional(),design:"knob",description:"lock to a read-only display of the current value"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob",description:"popover alignment"}}};var Xl={name:"Command",description:'A searchable list of actions or destinations \u2014 global \u2318K palettes, "jump to" inputs, account switchers with filter. Wrap in CommandDialog when it should pop over the entire app on a hotkey. For straight forms with filter, prefer a Select with a search input. For free-text autocomplete tied to a single value, prefer Combobox built on Popover + Command.',import:"@gradeui/ui",aliases:["command palette","command menu","cmd k","quick switcher","action menu","spotlight","spotlight search","quick open","fuzzy finder"],subcomponents:["CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","CommandSeparator","CommandShortcut","CommandDialog"],composesWith:["Dialog (CommandDialog wraps it)","Popover (inline combobox)","Tooltip"],styleDefaults:{Command:"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",CommandInput:"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",CommandList:"max-h-[300px] overflow-y-auto overflow-x-hidden",CommandGroup:"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",CommandSeparator:"-mx-1 h-px bg-border",CommandItem:"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",CommandShortcut:"ml-auto text-xs tracking-widest text-muted-foreground"},props:{value:{schema:z.string().optional(),design:"content",description:"controlled active item value"},onValueChange:{schema:z.unknown().optional(),design:"event"},placeholder:{schema:z.string().optional(),design:"content"},children:{schema:z.unknown().optional(),design:"plumbing",description:"wraps groups and empty state"},heading:{schema:z.string().optional(),design:"content"},onSelect:{schema:z.unknown().optional(),design:"event"},disabled:{schema:z.boolean().optional(),design:"knob"},open:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event",description:"when you want the command palette mounted in a modal (cmd+k pattern)"}}};var Jl={name:"Composer",description:`THE PRIMITIVE for any text composition surface \u2014 Slack / Discord /
|
|
17
|
+
column tracks.`,import:"@gradeui/ui",subcomponents:["AppShellHeader","AppShellNav","AppShellAside","AppShellMain","AppShellFooter"],composesWith:["Stack","Row","Card","Button","Separator","Sidebar","Toolbar","any page content"],styleDefaults:{AppShell:"gds-app-shell min-h-screen w-full bg-background text-foreground grid",AppShellHeader:"gds-app-shell-header",AppShellNav:"gds-app-shell-nav border-b bg-background",AppShellAside:"gds-app-shell-aside min-w-0 border-r bg-background",AppShellMain:"gds-app-shell-main min-w-0 w-full",AppShellFooter:"gds-app-shell-footer border-t bg-background"},variantDefaults:{nav:"none"},props:{nav:{schema:z.enum(["none","top","side","three-pane"]).optional(),design:"knob",description:"layout structure",default:"none"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var ks={name:"Avatar",description:"User/entity identity for PEOPLE \u2014 profile pictures, author rows, member lists, account headers. Circular by default; the AvatarFallback initials read as a person's name. Always include AvatarFallback so load failure doesn't leave a gap.",import:"@gradeui/ui",aliases:["profile picture","user image","account image","avatar","person glyph","user avatar","profile image","react native avatar"],subcomponents:["AvatarImage","AvatarFallback"],composesWith:["Card (in CardHeader)","Table cells","Badge (placed next to for status)","Skeleton (loading state)","Message (in the avatar slot)"],styleDefaults:{AvatarImage:"aspect-square h-full w-full"},props:{size:{schema:z.enum(["2xs","xs","sm","md","lg","xl"]).optional(),design:"knob",description:"t-shirt scale, 20px \u2192 80px; default md (40px). xs for chat message rows, sm for comments/dense threads, lg/xl for profile headers. Prefer this over h-*/w-* className utilities."},src:{schema:z.unknown().optional(),design:"plumbing"},alt:{schema:z.unknown().optional(),design:"plumbing"},tone:{schema:z.enum(["muted","primary","violet","amber","emerald","sky","rose","plum","lime"]).optional(),design:"knob",description:"tinted bg/text pair. Reach for explicit tones when each author needs a stable colour mapping (chat avatars, comment threads, member lists); default muted."},children:{schema:z.unknown().optional(),design:"plumbing",description:"initials (or a small icon), rendered while the image loads or when it fails"}}};var Ss={name:"BackgroundFill",description:"The background *paint* of a frame \u2014 a generative shader, image, video, gradient, repeating texture, or solid token rendered as a layer BEHIND the frame's content. Use it as the first child of a `relative` frame; it paints an `absolute inset-0`, `z-0`, `pointer-events-none` layer, so content carrying `relative z-10` sits on top. This is the canonical way to give any container a rich background \u2014 never drop a full-bleed `<ThreeScene>` or `<img>` as a free-standing sibling. For a sized, in-flow media element (a hero card, a thumbnail), use ThreeScene / MediaSurface / VideoPlayer directly instead.",import:"@gradeui/ui",aliases:["background","fill","frame fill","backdrop","surface fill","background image","background video","background gradient","background shader","texture","paint"],composesWith:["AppShell","Card","Stack","Row","Grid (any relative container)","ThreeScene (shader fill)","MediaSurface"],styleDefaults:{BackgroundFill:"absolute inset-0 h-full w-full"},props:{type:{schema:z.enum(["none","solid","gradient","image","video","shader"]),design:"knob",description:"which paint to render (required)"},color:{schema:z.string().optional(),design:"content",description:"solid fill; a token name (`primary`, `card`, `muted`, `accent`, `secondary`, `destructive`, `background`, `transparent`) or any CSS colour"},gradient:{schema:z.unknown().optional(),design:"plumbing",description:'stops are token names or CSS colours. shape: "linear" (default, uses `angle`, default 135\xB0) | "radial" (uses `at` \u2014 CSS position like "top" / "30% 20%", default "center" \u2014 and optional `size` like "45rem 50rem", default farthest-corner)'},src:{schema:z.string().optional(),design:"content",description:"image or video URL"},fit:{schema:z.enum(["cover","contain","fill","none"]).optional(),design:"knob",description:'object-fit for image/video (default "cover")'},position:{schema:z.string().optional(),design:"content",description:'CSS object/background position (default "center")'},repeat:{schema:z.boolean().optional(),design:"knob",description:"tile the image (background-repeat) instead of a single <img>"},tileSize:{schema:z.string().optional(),design:"content",description:'CSS background-size when repeating (e.g. "120px")'},preset:{schema:z.string().optional(),design:"content",description:"shader preset id (see ThreeScene)"},fragmentShader:{schema:z.string().optional(),design:"content",description:"custom GLSL (takes precedence over preset)"},palette:{schema:z.unknown().optional(),design:"plumbing",description:"shader palette overrides; wrap tokens as `oklch(var(--token))`"},postPreset:{schema:z.string().optional(),design:"content",description:"shader post-FX"},opacity:{schema:z.number().optional(),design:"knob",description:"layer opacity 0\u20131"},blendMode:{schema:z.unknown().optional(),design:"plumbing",description:"blend against the frame behind it"},radius:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"match the frame's radius so the paint clips cleanly"}}};var Cs={name:"Badge",description:"Compact status chips, counts, tags, pills. For higher-signal inline status \u2192 use Callout. For solid CTAs \u2192 Button. Soft/outline variants are quieter; solid variants are loud.",import:"@gradeui/ui",aliases:["chip","tag","pill","label chip","badge","tag view","status pill","token","count badge"],composesWith:["Card","Table (inside a cell)","Avatar (next to it)","anywhere inline"],props:{variant:{schema:z.enum(["default","secondary","destructive","outline","highlight","success","warning","info","success-soft","warning-soft","destructive-soft","info-soft","highlight-soft","success-outline","warning-outline","destructive-outline","info-outline"]).optional(),design:"knob"},rounded:{schema:z.enum(["default","full"]).optional(),design:"knob",description:'"full" gives a pill shape'}}};var Ts={name:"Banner",description:`A full-width horizontal strip surfacing system-level state, announcements, or first-run guidance \u2014 "you're previewing a draft", "investigating incident", "new feature available", "send your design to Figma". Distinct from Callout (inline boxed message in the layout flow), Toast (transient floating notification), Dialog (modal interrupt). Banner is what lives at the TOP of an AppShellHeader, page, or panel.`,import:"@gradeui/ui",aliases:["banner","notification banner","system banner","header banner","announcement bar","top bar","status bar","promo banner","incident banner","draft banner","first run banner","glass banner","sticky banner"],composesWith:["AppShellHeader (most common host \u2014 banner sits ABOVE the header content)","Button (in the action slot)","Link (inside the content)","Lucide icons (in the icon slot)"],styleDefaults:{Banner:"relative flex items-center gap-3 px-4 py-2.5 text-sm leading-relaxed border-b bg-muted text-foreground border-border [&>svg]:text-muted-foreground justify-between"},variantDefaults:{variant:"default",align:"between"},props:{variant:{schema:z.enum(["default","info","success","warning","destructive","announcement"]).optional(),design:"knob",description:'intent + tonal direction. `default` is a calm muted strip; `announcement` is a low-alpha brand tint for "new feature" messaging; status variants pick up the soft+deep token pairs.'},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"material applied over the variant tint. `glass` for banners that sit over imagery / generative backdrops."},align:{schema:z.enum(["start","center","between"]).optional(),design:"knob",description:"justify behaviour of the inner flex row. Defaults to `between` so the action / dismiss button right-align."},sticky:{schema:z.boolean().optional(),design:"knob",description:"stick to the top of the scroll container."},dismissible:{schema:z.boolean().optional(),design:"knob",description:"render the trailing X close button. Pair with `onDismiss` to react."},onDismiss:{schema:z.unknown().optional(),design:"event"},icon:{schema:z.unknown().optional(),design:"plumbing",description:"leading icon slot. NOT inferred from variant; pass what fits the message."},action:{schema:z.unknown().optional(),design:"plumbing",description:'trailing slot before dismiss. Usually a `<Button size="sm">` or `<a>`.'},role:{schema:z.string().optional(),design:"plumbing",description:"overrides the automatic role mapping (warning/destructive \u2192 alert, others \u2192 status)."}}};var Ps={name:"Breadcrumb",description:'Reach for Breadcrumb whenever a screen sits inside a hierarchy and you want the path back to the top to be visible. Common spots: above page titles in admin/CMS screens, top of Settings detail pages, after a router redirect when the URL implies depth. Use the current page as a <BreadcrumbPage> (non-clickable) and prior levels as <BreadcrumbLink>. For a horizontal "top nav" of peer destinations use Side Menu or Tabs instead \u2014 Breadcrumb is strictly for hierarchical path.',import:"@gradeui/ui",aliases:["breadcrumb","breadcrumbs","crumbs","path","page hierarchy","path bar","navigation trail","finder path"],subcomponents:["BreadcrumbList","BreadcrumbItem","BreadcrumbLink","BreadcrumbPage","BreadcrumbSeparator","BreadcrumbEllipsis"],composesWith:["AppShellMain","Card (in CardHeader)","Dialog"],styleDefaults:{BreadcrumbList:"flex flex-wrap items-center gap-1.5 break-words text-xs text-muted-foreground",BreadcrumbItem:"inline-flex items-center gap-1.5",BreadcrumbPage:"inline-flex items-center gap-1.5 px-0.5 text-xs font-medium text-foreground",BreadcrumbSeparator:"[&_svg]:size-3 [&_svg]:shrink-0 text-muted-foreground/60",BreadcrumbEllipsis:"flex h-5 w-5 items-center justify-center",BreadcrumbMenuTrigger:"h-3 w-3 text-muted-foreground transition-transform"},props:{"aria-label":{schema:z.unknown().optional(),design:"plumbing",description:"passed to the underlying <nav>"},separator:{schema:z.unknown().optional(),design:"plumbing",description:'**tree-wide default** for every <BreadcrumbSeparator/> inside. Pass a string ("/", "\u203A", "\u2022"), a lucide icon (`<Slash/>`, `<ChevronRight/>`), or any ReactNode. Default: `<ChevronRight/>`. Set once on the root; every separator below picks it up via context.'},className:{schema:z.unknown().optional(),design:"plumbing",description:"the <ol> wrapper; usually no overrides needed"},href:{schema:z.unknown().optional(),design:"plumbing",description:"renders as <a> when set, <button> when not"},asChild:{schema:z.unknown().optional(),design:"plumbing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"per-instance override of the separator glyph. When set, beats the root's `separator` prop for this one slot. When not set, falls back to the root's `separator`, then to `<ChevronRight/>`."}}};var Ms={name:"Button",description:'Any clickable action. Use `iconOnly` for square icon-only buttons (at any size), variant="link" for inline links that should look like Button, the `raised` prop for high-commitment / weighty actions where the chrome can afford a tactile "physical key" treatment (composes with any variant; variant="raised" remains the neutral-key alias). A Button placed next to a TabsList of the same size lines up edge-to-edge without per-call overrides.',import:"@gradeui/ui",aliases:["button","push button","plain button","bordered button","destructive button","capsule button","link button","action button","cta","raised button","pill button","key button"],composesWith:["Dialog","DropdownMenu","Tooltip","Card (in CardFooter)","Row","Form controls"],styleDefaults:{Button:"inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1.5 px-3 text-base [&_svg]:size-4"},variantDefaults:{variant:"default",size:"md"},props:{variant:{schema:z.enum(["default","destructive","outline","secondary","ghost","link","raised"]).optional(),design:"knob",description:"`raised` here is a back-compat alias (the raised TRAIT on a neutral key surface); prefer the `raised` prop"},raised:{schema:z.boolean().optional(),design:"knob",description:'presence TRAIT: tactile elevation (bevel + drop + hover glow + pressed sink) layered onto ANY variant \u2014 raised primary, raised outline, etc. Glow tone reads --btn-glow \u2192 --accent-glow \u2192 --selected-glow; override per-button via style={{ "--btn-glow": "var(--warning)" }}'},size:{schema:z.enum(["2xs","xs","sm","md","lg"]).optional(),design:"knob",description:"t-shirt scale aligned with Tabs/ToggleGroup heights (2xs=h-5, xs=h-6, sm=h-7, md=h-8, lg=h-10). 2xs/xs are the dense tool-panel sizes (match Figma Button size=2xs/xs). `default` still works as an alias for `md`."},iconOnly:{schema:z.boolean().optional(),design:"knob",description:"squares the button at the current `size` height (w = h, no horizontal padding) for icon-only buttons; the icon child is centered. This is THE way to make a square icon button at any density (sm\u219228\xB2, 2xs\u219220\xB2)."},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"renders as the child element (use to wrap <a>/<Link>)"},disabled:{schema:z.boolean().optional(),design:"knob"}}};var Ns={name:"Calendar",description:'An inline date grid \u2014 date-of-birth pickers in profile forms, scheduling screens with a month view, range selection in reporting filters. For a compact trigger-and-popover input, use DatePicker / DateRangePicker (which wrap Calendar internally). For one-off relative dates ("yesterday", "last week") use a Select instead.',import:"@gradeui/ui",aliases:["calendar","date grid","month view","scheduler grid","calendar view","multidate picker","react native calendars"],subcomponents:["CalendarDayButton"],composesWith:["Popover (DatePicker composes them)","Card (inline scheduling card)","Dialog (full-screen mobile date pick)"],styleDefaults:{Calendar:"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent"},props:{mode:{schema:z.enum(["single","multiple","range"]).optional(),design:"knob",description:"picks one date, several dates, or a [from, to] range"},selected:{schema:z.unknown().optional(),design:"plumbing",description:"controlled selection; shape matches `mode`"},onSelect:{schema:z.unknown().optional(),design:"event",description:"fires with the new selection"},month:{schema:z.unknown().optional(),design:"plumbing",description:"controlled displayed month"},defaultMonth:{schema:z.unknown().optional(),design:"plumbing",description:"uncontrolled initial month"},onMonthChange:{schema:z.unknown().optional(),design:"event"},numberOfMonths:{schema:z.number().optional(),design:"knob",description:"render multiple months side by side, useful for range pickers"},disabled:{schema:z.unknown().optional(),design:"plumbing"},captionLayout:{schema:z.enum(["label","dropdown","dropdown-months","dropdown-years"]).optional(),design:"knob"},className:{schema:z.string().optional(),design:"plumbing"}}};var Es={name:"Callout",description:"Inline, ambient, non-blocking status/feedback that sits inside the layout flow. Form-level validation summaries, settings-page notices, page-level banners. NOT a toast (use Sonner for transient). NOT a modal (use Dialog when the user must respond). Put an icon as first child \u2014 it's auto-positioned; CalloutTitle + CalloutDescription follow.",import:"@gradeui/ui",aliases:["callout","banner","notice","inline alert","in-app notification","status banner","info banner","info callout","warning callout","success callout"],subcomponents:["CalloutTitle","CalloutDescription"],composesWith:["lucide-react icons as first child","Button (inside CalloutDescription)","Card (as a section callout)"],styleDefaults:{CalloutTitle:"mb-1 font-medium leading-none tracking-tight",CalloutDescription:"text-sm [&_p]:leading-relaxed"},props:{variant:{schema:z.enum(["default","destructive","success","warning","info"]).optional(),design:"knob",description:"semantic colouring; `default` is neutral"}}};var Ds={name:"Card",description:'Grouped content with a distinct surface \u2014 settings panels, dashboard tiles, list-of-cards layouts, marketing hero containers, AI suggestion overlays. Pair CardHeader (title + description) with CardContent and optional CardFooter (actions). Reach for `surface="glass"` whenever the card sits over a busy backdrop (gradient mesh, dot grid, generative art, image hero).',import:"@gradeui/ui",aliases:["card","group box","groupbox","panel","tile","surface","glass card","frosted card","floating panel","hero card","ai suggestion card","dashboard tile","settings panel"],subcomponents:["CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],composesWith:["Button (in CardFooter)","Badge","Separator","Avatar","Code","MediaSurface","any form controls"],styleDefaults:{Card:"gds-card rounded-xl border text-card-foreground shadow",CardHeader:"flex flex-col space-y-1.5 p-6",CardTitle:"font-semibold leading-none tracking-tight",CardDescription:"text-sm text-muted-foreground",CardContent:"p-6 pt-0",CardFooter:"flex items-center p-6 pt-0"},props:{surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the card surface is *made of*. `solid` is the default opaque `bg-card`. `translucent` is ~82% opacity for menu sheets. `glass` is ~58% opacity + 14px blur + edge highlight for floating panels. `glass-strong` is ~42% + 24px blur for full-page overlays. Composes with `shadow-elevation-*` (depth) and `gds-aura-*` (state signal)."},Each:{schema:z.unknown(),design:"plumbing"}}};var wm=z.enum(["start","center","end"]),km=z.object({delay:z.number().int().positive().optional(),pauseOnHover:z.boolean().optional(),pauseWhenOffscreen:z.boolean().optional()}),Sm=z.union([z.boolean(),km]),As={name:"Carousel",description:"Token-driven slideshow primitive. Embla under the hood, custom autoplay loop with per-slide duration overrides, and a VideoSlide variant that autoplays muted+loop with a poster fallback. Reach for it for marketing hero rotations, app onboarding tours, image galleries, TV/streaming featured rails \u2014 anywhere a horizontal stack of slides cycles automatically or on user input.",import:"@gradeui/ui",aliases:["carousel","slideshow","slider","hero rotation","image gallery","featured row","swipe deck"],subcomponents:["Carousel.Slide","Carousel.VideoSlide","Carousel.Dots","Carousel.Arrows","Carousel.Prev","Carousel.Next"],composesWith:["MediaSurface (inside Carousel.Slide for posters / album art)","Card (slide content)","Stack / Row (slide composition)"],props:{loop:{schema:z.boolean().optional(),design:"knob",label:"Loop",default:true,description:"Wrap from the last slide back to the first. Default true \u2014 the natural fit for hero rotations. Turn off for finite onboarding sequences."},align:{schema:wm.optional(),design:"knob",control:"toggle-group",label:"Slide alignment",default:"start",description:"How slides line up inside the viewport when not at 100% width. 'start' is full-bleed; 'center' gives the 'peek of neighbours' carousel look."},slidesPerView:{schema:z.number().int().positive().optional(),design:"knob",label:"Slides per view",default:1,description:"How many slides show at once. 1 for hero rotations; 3 for thumbnail strips; etc. For media-query responsive layouts, leave this at 1 and override `--gds-carousel-slide-basis` on each Slide via CSS."},autoplay:{schema:Sm.optional(),design:"structured",label:"Autoplay",default:false,description:"`true` for sensible defaults (5s, pause on hover, pause offscreen). Object form: `{ delay, pauseOnHover, pauseWhenOffscreen }`. Per-slide overrides go on `<Carousel.Slide duration={ms}>`."},draggable:{schema:z.boolean().optional(),design:"knob",label:"Drag to swipe",default:true,description:"Disable when slide content (a Map, a chart, a draggable card) needs to swallow drag events."},onSlideChange:{schema:z.function().optional(),design:"event",description:"Fires with the new slide index whenever the active slide changes (programmatic, autoplay, or user swipe)."},className:{schema:z.string().optional(),design:"plumbing"},style:{schema:z.record(z.string(),z.unknown()).optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing",description:"Carousel.Slide / Carousel.VideoSlide children, plus optionally Carousel.Dots and Carousel.Arrows."}}};var Is={name:"Chart",description:"Reporting dashboards, single-purpose analytics cards (revenue, conversions, active users), or anywhere you'd otherwise hand-roll a Recharts setup. Bring the actual chart type from `recharts` \u2014 ChartContainer doesn't pick the chart shape for you, it themes whatever you nest. For sparkline-style decorative trends consider just rendering a small SVG line directly; ChartContainer is overkill for non-interactive ornament.",import:"@gradeui/ui",aliases:["chart","charts","graph","bar chart","line chart","area chart","recharts","analytics chart","swift chart","swiftui chart","victory chart","victory native"],subcomponents:["ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","ChartStyle"],composesWith:["Card (chart-in-a-card pattern)","Tabs (multi-metric switcher)","Recharts components (Bar","Line","Area","Pie",'Radar from "recharts")'],styleDefaults:{ChartContainer:"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",ChartTooltipContent:"font-medium",ChartLegendContent:"flex items-center justify-center gap-4"},props:{config:{schema:z.unknown().optional(),design:"plumbing",description:'`{ [seriesKey]: { label: string; color?: string; theme?: { light: string; dark: string } } }`; the keys here are the names you reference in your Recharts <Bar dataKey="\u2026" /> calls'},id:{schema:z.string().optional(),design:"plumbing",description:"used for the inlined <style> tag"},children:{schema:z.unknown().optional(),design:"plumbing",description:"typically a single Recharts ResponsiveContainer or chart"},passes:{schema:z.unknown().optional(),design:"plumbing",description:"pair with `content={<ChartTooltipContent />}`"},indicator:{schema:z.enum(["dot","line","dashed"]).optional(),design:"knob"},hideLabel:{schema:z.unknown().optional(),design:"plumbing"},hideIndicator:{schema:z.unknown().optional(),design:"plumbing"},nameKey:{schema:z.unknown().optional(),design:"plumbing"},labelKey:{schema:z.unknown().optional(),design:"plumbing"},ChartLegend:{schema:z.unknown(),design:"plumbing"}}};var Hs={name:"Checkbox",description:"Binary on/off tied to a list (select multiple, agree to terms). Single on/off that controls a setting is better with Switch. For a label + description row, wrap in Field. When each option should be a whole selectable card (label + description, selected state on the card surface), use CheckboxCard.",import:"@gradeui/ui",aliases:["checkbox","tickbox","tick box","check","multi-select item"],composesWith:["Label (via htmlFor)","Field (label + description row)","CheckboxCard (whole-card selectable option)","Card","Form rows","Table (for row selection)"],styleDefaults:{Checkbox:"flex items-center justify-center text-current"},props:{checked:{schema:z.boolean().optional(),design:"knob"},onCheckedChange:{schema:z.unknown().optional(),design:"event"},defaultChecked:{schema:z.boolean().optional(),design:"knob"},disabled:{schema:z.boolean().optional(),design:"knob"},id:{schema:z.string().optional(),design:"plumbing",description:"bind a Label's htmlFor to this"}}};var Fs={name:"CheckboxCard",description:"Multi-select where each option is a whole selectable card (add-ons, feature toggles, opt-ins). The whole card is the control, so focus and the checked state live on the card surface. Standalone (not in a group). Static content only \u2014 never nest an interactive control inside. For a plain checkbox + label row use Field instead.",import:"@gradeui/ui",aliases:["checkbox card","selectable card","multi-select card","add-on card","feature card","opt-in card"],composesWith:["Badge (in aside)","MediaSurface (custom children)","Stack / Grid (laying out several)"],props:{checked:{schema:z.unknown().optional(),design:"plumbing",description:"standard checkbox state"},label:{schema:z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:z.boolean().optional(),design:"knob",description:"hide the check; selection shown by the card border + background"},indicatorPosition:{schema:z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"arbitrary static content instead of label/description"}}};var zs={name:"Code",description:'Read-only code surface for marketing heroes, docs, changelog entries, AI-output displays. Use `diff` for the "diff hero" pattern (before/after side-by-side or stacked). Use `reveal="lines"` with `trigger="inView"` for scroll-driven marketing pages. Use `reveal="typewriter"` for AI-output / chat-style displays. Use `bare` for inline code inside prose. NOT a code editor \u2014 for editable code, reach for an external editor primitive (CodeMirror / Monaco).',import:"@gradeui/ui",aliases:["code block","code","code snippet","code surface","syntax highlighted code","diff hero","diff view","diff block","changelog code","before after code","scroll-triggered code","typewriter code"],composesWith:["SectionBlock","Card","Tabs (for multi-file examples)","Carousel (slide-to-slide code progression)"],styleDefaults:{Code:"gds-code relative w-full overflow-hidden"},props:{source:{schema:z.string(),design:"content",description:"the code to render"},language:{schema:z.enum(["tsx","jsx","ts","js","html","css","json","bash","md","py","go","rust"]).optional(),design:"knob",description:"Prism language id; defaults to `tsx`"},highlight:{schema:z.unknown().optional(),design:"plumbing",description:"1-indexed line number, array of numbers, or array of `[start, end]` ranges to emphasise"},diff:{schema:z.unknown().optional(),design:"plumbing",description:"`{ added?: number[]; removed?: number[] }` \u2014 1-indexed lines for diff hero / changelog mode"},reveal:{schema:z.enum(["none","lines","typewriter","diff"]).optional(),design:"knob",description:"entrance animation; defaults to `none`"},trigger:{schema:z.enum(["mount","inView","manual"]).optional(),design:"knob",description:"what kicks the reveal off; defaults to `mount`"},play:{schema:z.boolean().optional(),design:"knob",description:'for `trigger="manual"`, set true to play'},speed:{schema:z.enum(["slow","normal","fast"]).optional(),design:"knob",description:"animation feel preset. `normal` (default) maps to the canonical 50ms/22ms staggers + 180ms pre-delay. Pick a feel; don't tune individual numbers unless you have to."},delay:{schema:z.number().optional(),design:"knob",description:"explicit delay before reveal starts (ms) \u2014 overrides the `speed` preset"},stagger:{schema:z.number().optional(),design:"knob",description:"explicit per-line stagger for `lines`/`diff`, per-token for `typewriter` (ms) \u2014 overrides the `speed` preset"},prompt:{schema:z.string().optional(),design:"content",description:'string prepended to each line. Use for terminal emulation: `prompt="$ "` for bash, `prompt="> "` for PowerShell, `prompt=">>> "` for Python REPL. Prompt characters render in muted token colour, don\'t pick up the typewriter stagger, and are hidden from screen readers.'},showLineNumbers:{schema:z.boolean().optional(),design:"knob"},filename:{schema:z.string().optional(),design:"content",description:"optional label rendered in the header chrome"},wrap:{schema:z.boolean().optional(),design:"knob",description:"wrap long lines instead of horizontal scroll"},bare:{schema:z.boolean().optional(),design:"knob",description:"drop chrome (border, header, padding) \u2014 for inline use"},size:{schema:z.enum(["xs","sm","md"]).optional(),design:"knob",description:"type-scale preset. `xs` (12px) for dense changelog cards / inline blocks; `sm` (14px, default) for marketing heroes and docs; `md` (16px) for focal-point displays."},height:{schema:z.enum(["auto","number","string"]).optional(),design:"knob",description:'container sizing. `auto` (default) grows with content. Number = pixels (`300` \u2192 `300px`). String passes through as CSS (`"20rem"`, `"50vh"`).'},maxLines:{schema:z.number().optional(),design:"knob",description:"cap the visible line count at exactly N line-heights. Wins over `height`. Inherits the current size's line-height automatically."}}};var Vs={name:"Collapsible",description:'A single show/hide reveal \u2014 "Show advanced settings" rows, expandable inline help, "More details" sections inside cards. For multiple rows of expandable content where one-at-a-time matters, reach for Accordion. For a separate panel that floats above content, use Popover.',import:"@gradeui/ui",aliases:["collapsible","expand","show more","disclosure","advanced settings","disclosure group","expandable section","expandable view","show hide"],subcomponents:["CollapsibleTrigger","CollapsibleContent"],composesWith:["Button (as the trigger","asChild)","Card (expandable settings group)","Row (header + chevron)"],props:{open:{schema:z.boolean().optional(),design:"knob",description:"controlled open state"},defaultOpen:{schema:z.boolean().optional(),design:"knob",description:"uncontrolled initial state"},onOpenChange:{schema:z.unknown().optional(),design:"event"},children:{schema:z.unknown().optional(),design:"plumbing",description:"the clickable header (often a Button asChild)"}}};var Bs={name:"ColorPicker",description:`The token-led single-select colour picker \u2014 the focused "pick one colour token" sibling of FillPicker's solid tab. Use it anywhere a value is ONE Grade colour token (a fill colour, a border colour, an accent override) rather than a full paint. Composes Popover + Command exactly like Combobox, but each row is a Swatch + the token's short name, grouped by family and searchable. triggerVariant="inline" reduces the trigger to a single clickable swatch \u2014 reach for that inside inspectors and the FillSection fill rows. For a full paint (gradient / image / shader) use FillPicker; for a list of fills use FillSection; for a multi-stop gradient use GradientEditor.`,import:"@gradeui/ui",aliases:["color picker","colour picker","token picker","colour token picker","color token picker","swatch picker","paint colour","fill colour picker","accent picker","colour dropdown"],composesWith:["Popover","Command","Swatch","FillSection","GradientEditor","Field","PropertyList"],styleDefaults:{ColorPicker:"ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",ColorRow:"ml-auto h-3.5 w-3.5"},props:{value:{schema:z.string().optional(),design:"content",description:'a Grade colour token NAME ("action/primary"), the literal "transparent", or null when nothing is picked'},onValueChange:{schema:z.unknown().optional(),design:"event",description:'fired with the next value (token name, "transparent", or null)'},tokens:{schema:z.unknown().optional(),design:"plumbing",description:"token families offered in the list; defaults to the Grade semantic set (surface / action / status)"},searchable:{schema:z.boolean().optional(),design:"knob",description:"show the search input (default true)"},triggerVariant:{schema:z.enum(["default","inline"]).optional(),design:"knob",description:"default = form-control surface (swatch + name); inline = just a clickable swatch for inspector / fill-row use"},placeholder:{schema:z.string().optional(),design:"content",description:"trigger text when nothing is selected"},searchPlaceholder:{schema:z.string().optional(),design:"content",description:"search-input placeholder"},emptyMessage:{schema:z.string().optional(),design:"content",description:"shown when search returns no rows"},allowTransparent:{schema:z.boolean().optional(),design:"knob",description:"include a Transparent option at the top (default true)"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob",description:"popover alignment (default start)"},disabled:{schema:z.boolean().optional(),design:"knob",description:"lock to a read-only display of the current value"}}};var Os={name:"Combobox",description:'Single-pick searchable picker \u2014 the single-select sibling of MultiSelect and the Linear "selectable badge" pattern (status / priority / assignee). Use triggerVariant="inline" with renderValue returning a Badge to make a value read as a clickable token that opens a command menu. For multiple selection use MultiSelect; for a small fixed list with no search use Select; for free-form command palettes use Command directly. Pass disabled (driven by a permission check) to show the value without letting the user edit it.',import:"@gradeui/ui",aliases:["combobox","single select","searchable select","picker","status picker","priority picker","assignee picker","command select","autocomplete","dropdown select","selectable badge","inline select","token select","linear combobox"],composesWith:["Popover","Command","Badge","Avatar","PropertyList","Table","Field"],styleDefaults:{Combobox:"ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"},props:{options:{schema:z.unknown(),design:"plumbing",description:"the selectable pool"},value:{schema:z.string().optional(),design:"content",description:"controlled selection (wire onValueChange)"},defaultValue:{schema:z.string().optional(),design:"content",description:"uncontrolled initial selection"},onValueChange:{schema:z.unknown().optional(),design:"event",description:"fired with the next value, or null when cleared"},placeholder:{schema:z.string().optional(),design:"content",description:"trigger text when nothing is selected"},searchPlaceholder:{schema:z.string().optional(),design:"content",description:"search-input placeholder"},emptyMessage:{schema:z.string().optional(),design:"content",description:"shown when search returns no rows"},searchable:{schema:z.boolean().optional(),design:"knob",description:"show the search input (default true)"},clearable:{schema:z.boolean().optional(),design:"knob",description:"add a Clear row so the value can return to unset"},triggerVariant:{schema:z.enum(["default","inline"]).optional(),design:"knob",description:"default = form-control surface (like Select); inline = chrome-free token trigger"},renderValue:{schema:z.unknown().optional(),design:"plumbing",description:"render the selected value yourself (e.g. a Badge); falls back to icon + label"},hideChevron:{schema:z.boolean().optional(),design:"knob",description:"drop the trailing chevron (inline token look)"},disabled:{schema:z.boolean().optional(),design:"knob",description:"lock to a read-only display of the current value"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob",description:"popover alignment"}}};var _s={name:"Command",description:'A searchable list of actions or destinations \u2014 global \u2318K palettes, "jump to" inputs, account switchers with filter. Wrap in CommandDialog when it should pop over the entire app on a hotkey. For straight forms with filter, prefer a Select with a search input. For free-text autocomplete tied to a single value, prefer Combobox built on Popover + Command.',import:"@gradeui/ui",aliases:["command palette","command menu","cmd k","quick switcher","action menu","spotlight","spotlight search","quick open","fuzzy finder"],subcomponents:["CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","CommandSeparator","CommandShortcut","CommandDialog"],composesWith:["Dialog (CommandDialog wraps it)","Popover (inline combobox)","Tooltip"],styleDefaults:{Command:"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",CommandInput:"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",CommandList:"max-h-[300px] overflow-y-auto overflow-x-hidden",CommandGroup:"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",CommandSeparator:"-mx-1 h-px bg-border",CommandItem:"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",CommandShortcut:"ml-auto text-xs tracking-widest text-muted-foreground"},props:{value:{schema:z.string().optional(),design:"content",description:"controlled active item value"},onValueChange:{schema:z.unknown().optional(),design:"event"},placeholder:{schema:z.string().optional(),design:"content"},children:{schema:z.unknown().optional(),design:"plumbing",description:"wraps groups and empty state"},heading:{schema:z.string().optional(),design:"content"},onSelect:{schema:z.unknown().optional(),design:"event"},disabled:{schema:z.boolean().optional(),design:"knob"},open:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event",description:"when you want the command palette mounted in a modal (cmd+k pattern)"}}};var Gs={name:"Composer",description:`THE PRIMITIVE for any text composition surface \u2014 Slack / Discord /
|
|
18
18
|
Teams chat input, AI chat / copilot prompt box, comment thread input,
|
|
19
19
|
GitHub / Linear / Jira comment box, Reddit / Twitter reply box,
|
|
20
20
|
Notion / Linear document body, email composer, post body, anywhere
|
|
@@ -44,7 +44,7 @@ toolbar buttons render when \`toolbar\` is on.
|
|
|
44
44
|
|
|
45
45
|
Shares the lib/demo step vocabulary with <Code> so scripted
|
|
46
46
|
typing/format/mention demos animate in the same rhythm as your
|
|
47
|
-
terminal demos.`,import:"@gradeui/ui",composesWith:["AIChatComposer (preset wrapping this with paperclip + send + attachments)","ComposerReply (preset for comment threads)","AIChat (uses AIChatComposer internally)","Card (host above for reply boxes)",'Avatar (in leftActions slot for "your" avatar next to the input)'],styleDefaults:{ComposerToolbar:"flex flex-wrap items-center gap-0.5",AttachmentChips:"absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full",ComposerInner:"w-full"},props:{placeholder:{schema:z.string().optional(),design:"content"},initialText:{schema:z.string().optional(),design:"content",description:"plain text content to seed on mount"},initialJson:{schema:z.string().optional(),design:"content",description:"Lexical state JSON (from a previous onSubmit round-trip)"},formats:{schema:z.unknown().optional(),design:"plumbing",description:"available formats (defaults to bold/italic/underline/strikethrough/code/h1/h2/blockquote/ul/ol); pass false for plain text only"},toolbar:{schema:z.boolean().optional(),design:"knob",description:"show the formatting toolbar above the editor; default false"},triggers:{schema:z.unknown().optional(),design:"plumbing",description:'mention/slash configs, eg. `[{ char: "@", items: people }, { char: "/", items: commands }]`'},attachments:{schema:z.boolean().optional(),design:"knob",description:"enable image paste + paperclip when true/object; default off"},onSubmit:{schema:z.unknown().optional(),design:"event"},isLoading:{schema:z.boolean().optional(),design:"knob",description:"disables editor, swaps default Send for Stop"},onStop:{schema:z.unknown().optional(),design:"event"},maxLength:{schema:z.number().optional(),design:"knob"},autoFocus:{schema:z.boolean().optional(),design:"plumbing"},submitOnEnter:{schema:z.boolean().optional(),design:"knob",description:"default true (Shift-Enter still inserts newline)"},leftActions:{schema:z.unknown().optional(),design:"plumbing",description:"override the default paperclip"},rightActions:{schema:z.unknown().optional(),design:"plumbing",description:"override the default Send/Stop"},hideSend:{schema:z.boolean().optional(),design:"knob",description:"hide the default Send without replacing it"},steps:{schema:z.unknown().optional(),design:"plumbing",description:"scripted demo sequence"},trigger:{schema:z.unknown().optional(),design:"plumbing",description:'"mount" | "inView" | "manual"; default "mount"'},play:{schema:z.boolean().optional(),design:"knob",description:'for trigger="manual"'},speed:{schema:z.unknown().optional(),design:"plumbing",description:'"slow" | "normal" | "fast"; default "normal"'},loop:{schema:z.boolean().optional(),design:"knob"},loopDelay:{schema:z.number().optional(),design:"knob",description:"ms between loop iterations, default 2000"},readOnly:{schema:z.boolean().optional(),design:"knob",description:"disables editing AND focusability; programmatic playback still works; use for marketing demos so the script doesn't steal focus"},bare:{schema:z.boolean().optional(),design:"knob",description:"strip the card chrome"},className:{schema:z.string().optional(),design:"plumbing"}}};var Ql={name:"DataView",description:'One dataset, drawn as a table, a list of cards, or a grid \u2014 without re-typing the TanStack boilerplate (sortable headers, flexRender, selection, view switch) on every page. Hand it data + a columns schema; columns declare a `type` (badge/tags/number/currency/percent/date/boolean/url/text) that DataView renders, with a `cell` override for bespoke cells (avatars, relations). The view toggle can live anywhere \u2014 `useDataView()` holds the state so a `<DataViewToggle>` or `<DataViewColumns>` in a page header drives a `<DataView>` lower down. Mark a column `pinned="left"` (with a `width`) for a fixed column and `stickyHeader` to freeze the header. For a single record\'s fields use PropertyList; for the raw table primitive use Table.',import:"@gradeui/ui",aliases:["data view","data table","datatable","data grid","dataview","table view","card view","grid view","list view","gallery","records list","master list","tanstack table","sortable table","column visibility","pinned column","frozen column","sticky header","view switcher"],composesWith:["Table","Card","Badge","Avatar","ToggleGroup","DropdownMenu","PropertyList","Combobox"],props:{data:{schema:z.unknown(),design:"plumbing",description:"the rows"},columns:{schema:z.unknown(),design:"plumbing",description:"the schema; one list drives table, cards, and grid"},getRowId:{schema:z.unknown().optional(),design:"plumbing",description:"defaults to row.id"},view:{schema:z.unknown().optional(),design:"plumbing",description:"controlled or uncontrolled view"},views:{schema:z.unknown().optional(),design:"plumbing",description:"allowed views; one entry = single view, no toggle"},activeId:{schema:z.unknown().optional(),design:"plumbing",description:"the selected row; click emits it"},sorting:{schema:z.unknown().optional(),design:"plumbing",description:"TanStack SortingState"},columnVisibility:{schema:z.unknown().optional(),design:"plumbing",description:"which fields show"},stickyHeader:{schema:z.boolean().optional(),design:"knob",description:"freeze the header row on scroll"},toolbar:{schema:z.boolean().optional(),design:"knob",description:"render the built-in columns menu + view toggle above the view"},renderCard:{schema:z.unknown().optional(),design:"plumbing",description:"override card / grid tiles"},emptyMessage:{schema:z.unknown().optional(),design:"plumbing"}}};var ec={name:"DatePicker",description:'Any date or date-range entry. Use DatePicker for a single date (DOB, due date, booking). Use DateRangePicker for a span (report period, stay dates, filter window). Prefer these over <Input type="date"> \u2014 consistent theming, keyboard nav, a11y, and no browser-native UI drift.',import:"@gradeui/ui",aliases:["datepicker","calendar input","date field","date range","datepickerios","react native date picker","calendar input field","date field control"],subcomponents:["DateRangePicker"],composesWith:["Label","Form","Card (in CardContent)","Button (form submit)"],styleDefaults:{DatePicker:"w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground",DateRangePicker:"w-[300px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground"},props:{value:{schema:z.unknown().optional(),design:"plumbing"},onChange:{schema:z.unknown().optional(),design:"event",description:"called on select or clear"},placeholder:{schema:z.string().optional(),design:"content",description:'trigger label when empty (default "Pick a date" / "Pick a date range")'},disabled:{schema:z.boolean().optional(),design:"knob"},format:{schema:z.string().optional(),design:"content",description:'date-fns format token for the trigger label (default "PPP" single, "LLL dd, y" range)'},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob",description:'popover align (default "start")'},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob",description:"popover side"},captionLayout:{schema:z.enum(["label","dropdown","dropdown-months","dropdown-years"]).optional(),design:"knob"},className:{schema:z.string().optional(),design:"plumbing",description:"on the trigger button"},contentClassName:{schema:z.string().optional(),design:"content",description:"on the PopoverContent"},icon:{schema:z.unknown().optional(),design:"plumbing",description:"replaces the default CalendarIcon"},numberOfMonths:{schema:z.number().optional(),design:"knob",description:"DateRangePicker only, default 2"}}};var tc={name:"Dialog",description:'Modal interruptions \u2014 confirmations, focused forms, detail views, AI suggestion sheets. Dialog is the right primitive for Apple HIG / React Native "Alert" (modal) semantics. For non-blocking inline messaging use Callout; for transient notifications use Toaster (Sonner). Always include DialogTitle (a11y requirement).',import:"@gradeui/ui",aliases:["modal","popup","overlay","alert","system alert","alert dialog","modal dialog","confirm dialog","react native modal","rn alert","glass modal","frosted modal","ai suggestion modal"],subcomponents:["DialogTrigger","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogFooter","DialogClose"],composesWith:["Button (as DialogTrigger asChild","and inside DialogFooter)","Input/Textarea/Select inside DialogContent","Code (for changelog / diff modals)","MediaSurface (for image / preview modals)"],styleDefaults:{DialogOverlay:"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",DialogContent:"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",DialogHeader:"flex flex-col space-y-1.5 text-center sm:text-left",DialogFooter:"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",DialogTitle:"text-lg font-semibold leading-none tracking-tight",DialogDescription:"text-sm text-muted-foreground"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event",description:"Radix controlled/uncontrolled pattern"},asChild:{schema:z.enum(["wrap a Button"]).optional(),design:"plumbing"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the modal panel is *made of*. Defaults to `solid` (opaque `bg-background`). `glass` lets the page show through softly \u2014 pairs with rich backdrops or AI-suggestion modals."},accepts:{schema:z.unknown().optional(),design:"plumbing"},used:{schema:z.unknown().optional(),design:"plumbing"}}};var oc={name:"DropdownMenu",description:'A small action menu attached to a trigger \u2014 overflow "\u2026" buttons on cards, user-avatar menus in headers, "Insert" menus in editors. For a full searchable list, use Command. For ONE primary action plus a secondary, use a Button next to a smaller ghost Button instead of a dropdown.',import:"@gradeui/ui",aliases:["dropdown","dropdown menu","overflow menu","kebab menu","more menu","action menu","context-style menu","menu","pull-down menu","pulldown menu","context menu","popup menu","actions menu","glass menu","frosted menu","ios menu","hig menu"],subcomponents:["DropdownMenuTrigger","DropdownMenuContent","DropdownMenuItem","DropdownMenuCheckboxItem","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuShortcut","DropdownMenuGroup","DropdownMenuSub","DropdownMenuSubTrigger","DropdownMenuSubContent"],composesWith:["Button (as trigger asChild)","Avatar (user menu)","Card (overflow on a tile)","Tooltip (on the trigger)"],styleDefaults:{DropdownMenuSubContent:"z-50 min-w-[8rem] overflow-hidden rounded-md border text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",DropdownMenuContent:"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border text-popover-foreground shadow-md",DropdownMenuItem:"relative flex cursor-default select-none items-center gap-2 rounded-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:shrink-0",DropdownMenuCheckboxItem:"relative flex cursor-default select-none items-center rounded-sm pr-2 outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",DropdownMenuRadioItem:"relative flex cursor-default select-none items-center rounded-sm pr-2 outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",DropdownMenuLabel:"font-semibold",DropdownMenuSeparator:"-mx-1 my-1 h-px bg-muted",DropdownMenuShortcut:"ml-auto text-xs tracking-widest opacity-60"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},modal:{schema:z.unknown().optional(),design:"plumbing"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"usually wraps a Button"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob"},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob"},sideOffset:{schema:z.number().optional(),design:"knob"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the menu surface is *made of*. `solid` (default) is `bg-popover`. `translucent` matches Apple HIG / iOS menu sheets. `glass` for menus floating over rich canvases."},size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:'menu density; cascades to every item (Item, Checkbox, Radio, SubTrigger, Label) via context so a compact trigger gets a compact menu. Use "xs" in dense tool panels.'},onSelect:{schema:z.unknown().optional(),design:"event"},disabled:{schema:z.unknown().optional(),design:"plumbing"},inset:{schema:z.unknown().optional(),design:"plumbing"},DropdownMenuCheckboxItem:{schema:z.unknown(),design:"plumbing"},DropdownMenuSub:{schema:z.unknown(),design:"plumbing",description:"sub-trigger shows children, sub-content holds the deeper items"},children:{schema:z.unknown().optional(),design:"plumbing",description:"right-aligned kbd hint"}}};var nc={name:"Field",description:'Pair a bare control with a label and optional description in a row, with id + aria-describedby wired automatically. Use layout="setting" for the classic settings row (label on the left, Switch on the right). For a selectable CARD where the whole surface is the control, use RadioCard / CheckboxCard / SwitchCard instead.',import:"@gradeui/ui",aliases:["field","form field","control row","label and description","two line checkbox","option row","setting row","toggle row"],composesWith:["Checkbox","RadioGroup","RadioGroupItem","Switch","Badge (inside Field.Trailing)"],styleDefaults:{FieldLabel:"text-sm font-medium leading-none text-foreground cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",FieldDescription:"text-sm text-muted-foreground",FieldTrailing:"flex shrink-0 items-center gap-2",FieldRoot:"flex gap-3"},props:{layout:{schema:z.enum(["option","setting"]).optional(),design:"knob",description:"option (default): control leads, text beside it; setting: text leads, control pinned trailing"},children:{schema:z.unknown(),design:"plumbing",description:"order does not matter"}}};var ac={name:"FillPicker",description:`Grade's paint picker \u2014 the control for choosing a frame's background fill, modelled on Figma's fill popover. A fill-type icon row (solid \xB7 gradient \xB7 image \xB7 pattern \xB7 video \xB7 shader) switches the panel below; a global opacity sits at the foot. Emits a FillValue that maps 1:1 onto BackgroundFill props. This is a Studio/inspector chrome control \u2014 pair it with BackgroundFill, which renders the chosen paint. Not for app content. Use the FillSection subcomponent to edit a LIST of fills (the Figma "Fill" inspector section): each row is a Solid/Gradient/Image toggle, the matching value control (ColorPicker / GradientEditor popover / image URL), an opacity %, a visibility eye, and a remove button, with an add button in the header.`,import:"@gradeui/ui",aliases:["fill picker","paint picker","background picker","fill chooser","fill popover","fill section","fill list","fills inspector","paint section"],subcomponents:["FillSection"],composesWith:["BackgroundFill (renders the FillValue)","Popover (host it in a popover)","ColorPicker (the solid value)","GradientEditor (the gradient value)","ShaderPresetPicker (the shader tab)","the inspector Fill section"],styleDefaults:{Swatch:"h-7 w-7 rounded-md border border-border/60 transition-shadow",FillPicker:"flex flex-col gap-3",FillSection:"flex flex-col gap-2"},props:{value:{schema:z.unknown(),design:"plumbing",description:"current paint ({ type, color?, gradient?, src?, fit?, repeat?, tileSize?, preset?, palette?, postPreset?, opacity? }) (required)"},onChange:{schema:z.unknown(),design:"event",description:"called on any change (required)"},title:{schema:z.string().optional(),design:"plumbing",description:'section heading (default "Fills")'}}};var ic={name:"Flex",description:"The unopinionated flexbox primitive \u2014 reach for Flex when Stack, Row, or Grid don't quite fit. Specifically when you need reverse direction (`row-reverse` / `col-reverse`), CSS defaults instead of Row's baked-in `items-center gap-md`, or baseline alignment. Otherwise prefer Stack / Row / Grid \u2014 they're easier to read and tuned for the 95% case. Flex is the escape hatch, not the default.",import:"@gradeui/ui",aliases:["flex","flexbox","flex container","hstack","vstack","horizontal","vertical","generic container","layout view"],composesWith:["any content component"],props:{direction:{schema:z.enum(["row","col","row-reverse","col-reverse"]).optional(),design:"knob",description:"main-axis direction",default:"row"},gap:{schema:z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"gap between children",default:"none"},align:{schema:z.enum(["start","center","end","stretch","baseline"]).optional(),design:"knob",description:"cross-axis alignment",default:"stretch"},justify:{schema:z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:"main-axis distribution",default:"start"},wrap:{schema:z.enum(["nowrap","wrap","wrap-reverse"]).optional(),design:"knob",description:"wrap behaviour when children overflow",default:"nowrap"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var lc={name:"GradientEditor",description:'Edit a multi-stop CSS gradient with token-led stops. A type Select (Linear / Radial / Angular) with reverse + rotate actions, a live full-width preview bar (a Swatch type="gradient"), then a Stops list where each stop is a position %, a colour (ColorPicker token or raw), an opacity %, and a remove button; an add button appends a stop. Token stops resolve to oklch(var(--<token>)) so the preview re-voices with the theme. Emits the structured GradientValue (kept editable + serialisable); the caller turns it into CSS with the exported gradientToCss(value). Use inside a Popover from a FillSection gradient row, or standalone in a theme builder. For a single solid colour use ColorPicker; for a full paint (solid / gradient / image / shader) use FillPicker.',import:"@gradeui/ui",aliases:["gradient editor","gradient picker","gradient builder","css gradient editor","stop editor","gradient stops","linear gradient editor","conic gradient editor"],composesWith:["Select","Button","Input","ColorPicker","Swatch","Popover","FillSection"],styleDefaults:{GradientEditor:"flex flex-col gap-3"},props:{value:{schema:z.unknown(),design:"plumbing",description:"the structured gradient (type linear/radial/angular, optional angle in deg, ordered stops). NOT a CSS string \u2014 render the string via gradientToCss(value)."},onChange:{schema:z.unknown(),design:"event",description:"fired with the next structured gradient on any edit"}}};var cc={name:"Grid",description:"2D layouts where Stack (vertical) and Row (horizontal) don't fit \u2014 stat-card grids, feature tiles, pricing columns, photo grids. Reach for Grid over hand-rolled `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4` so the column count is a prop the settings panel can mutate and the responsive ladder stays consistent across designs.",import:"@gradeui/ui",aliases:["grid","tiles","cards grid","stat grid","columns","feature grid","grid view","lazy v grid","lazyvgrid","lazy h grid","lazyhgrid","tile grid","masonry"],composesWith:["Card","Stack (inside each cell)","Row","Button","any content component"],styleDefaults:{Grid:"gds-grid grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 items-stretch"},variantDefaults:{cols:"3",gap:"md",align:"stretch"},props:{cols:{schema:z.enum(["1","2","3","4","5","6","12"]).optional(),design:"knob",description:'desktop column count; each value has a baked-in responsive ladder (e.g. "4" \u2192 1 col mobile, 2 tablet, 4 desktop)',default:"3"},gap:{schema:z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"gap between grid cells (same scale as Stack/Row)",default:"md"},align:{schema:z.enum(["start","center","end","stretch"]).optional(),design:"knob",description:"cross-axis alignment of cells",default:"stretch"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var dc={name:"HoverCard",description:"Rich preview content surfaced on hover \u2014 user profile mini-cards on @-mentions, link previews, definition popups, layer-thumbnail peeks. Pointer-only by design (no touch-friendly trigger); pair with a click target for touch devices, or fall back to Popover. NEVER use HoverCard for critical info \u2014 if the user can't reach it via keyboard or touch, it might as well not exist for accessibility.",import:"@gradeui/ui",aliases:["hover card","hover preview","mention preview","profile peek","link preview","rich tooltip","link preview card","profile hover","peek card","glass preview","frosted preview"],subcomponents:["HoverCardTrigger","HoverCardContent"],composesWith:["Avatar (user preview)","Card (richer content)","Link (the trigger)","MediaSurface (link/layer previews)","Code (snippet previews)"],styleDefaults:{HoverCardContent:"z-50 w-64 rounded-md border p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},openDelay:{schema:z.unknown().optional(),design:"plumbing"},closeDelay:{schema:z.unknown().optional(),design:"plumbing"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"usually a Link or Button"},side:{schema:z.unknown().optional(),design:"plumbing"},align:{schema:z.unknown().optional(),design:"plumbing"},sideOffset:{schema:z.unknown().optional(),design:"plumbing"},alignOffset:{schema:z.unknown().optional(),design:"plumbing"},className:{schema:z.unknown().optional(),design:"plumbing"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the preview surface is *made of*. `solid` (default) is `bg-popover`. `glass` for hover previews over rich content (a media feed, a layout canvas)."}}};var pc={name:"Input",description:'Any single-line text entry. Always pair with a Label for accessibility. Use startSlot/endSlot for icons, prefixes and units instead of hand-positioning absolute children; use size="sm"/"xs" in dense tool panels.',import:"@gradeui/ui",aliases:["text field","textbox","textfield","form field","text input","secure field","search field","url field","number field","textinput","text input field","react native textinput","unit input","input with icon"],composesWith:["Label","Form","Card (in CardContent)","Button (form submit)"],styleDefaults:{Input:"pointer-events-none absolute inset-y-0 left-0 flex items-center text-muted-foreground [&_svg]:size-3.5"},props:{type:{schema:z.string().optional(),design:"content"},placeholder:{schema:z.string().optional(),design:"content",description:"hint text shown while the input is empty. Model it explicitly (not just a native passthrough) so generated screens carry placeholders and the validator accepts them."},size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density. `default` (h-9) for forms; `sm` (h-8) and `xs` (h-7) for dense tool panels like the inspector. NOTE: pre-unification scale \u2014 see Figma parity audit; due to migrate to the t-shirt scale (xs 24 | sm 28 | md 32 | lg 40, default\u2192md)."},startSlot:{schema:z.unknown().optional(),design:"plumbing",description:"adornment rendered inside the leading edge (icon, prefix, currency symbol). Non-interactive by default so clicks focus the input."},endSlot:{schema:z.unknown().optional(),design:"plumbing",description:'adornment rendered inside the trailing edge (unit like "px", a clear button, a stepper). Same pointer rules as startSlot.'}}};var mc={name:"Label",description:'Every Input / Textarea / Checkbox / Switch / RadioGroup. Always use htmlFor so clicking the label focuses the control. Match `size` to the field it labels (size="xs" label over a size="xs" input).',import:"@gradeui/ui",aliases:["label","form label","field label","caption"],composesWith:["Input","Textarea","Checkbox","Switch","RadioGroup","Select"],styleDefaults:{Label:"font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm"},variantDefaults:{size:"default"},props:{htmlFor:{schema:z.string().optional(),design:"content",description:"binds to the input's id"},size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:"text size, mirrors Input/Select/Textarea so a field and its label scale together. default = text-sm; xs = 11px for dense tool panels."}}};var fc={name:"Logo",description:"ALWAYS use <Logo> wherever a screen carries a brand mark \u2014",import:"@gradeui/ui",aliases:["logo","brand","brandmark","wordmark","lockup","brand logo","app logo","logotype","grade mark","g arrow"],composesWith:["AppShell","AppShellHeader","Sidebar","SidebarHeader","Toolbar","MotionOverlay","Row","Stack"],styleDefaults:{Logo:"gds-logo inline-flex shrink-0 select-none items-center"},props:{sources:{schema:z.unknown().optional(),design:"plumbing",description:"artwork keyed by lockup then appearance: { square?: { light?, dark?, mono? }, horizontal?: {...}, icon?: {...} }. Each slot is any node (inline <svg>, <img>, component). OMIT ENTIRELY and the GRADE MARK renders (the square G-arrow, painted with currentColor so it sits correctly on any surface). A bare <Logo /> is always correct branding."},size:{schema:z.enum(["sm","md","lg","xl"]).optional(),design:"knob",description:'height of the mark: 20 / 28 / 40 / 56px (a raw pixel number also works). Width is intrinsic (square/icon 1:1, horizontal keeps its ratio). Default "md"; use "sm" in dense rails and toolbars.'},lockup:{schema:z.enum(["square","horizontal","icon"]).optional(),design:"knob",description:'which shape to show; falls back to the next-best available artwork. Default "horizontal".'},mode:{schema:z.enum(["light","dark"]).optional(),design:"knob",description:'the background the logo SITS ON, selecting light/dark artwork. Explicit, not theme-coupled. Default "light".'},mono:{schema:z.boolean().optional(),design:"knob",description:"render the single-colour treatment; inherits currentColor from the parent. Default false."},label:{schema:z.string().optional(),design:"content",description:'accessible name (aria-label + role="img"); pair with decorative when the brand name is already beside it.'},decorative:{schema:z.boolean().optional(),design:"knob",description:"aria-hidden, no role; use when text nearby names the brand."},href:{schema:z.string().optional(),design:"content",description:"renders the logo as a link (logo-links-home)."},className:{schema:z.string().optional(),design:"plumbing"}}};var gc={name:"Map",description:"Any layout that needs a real map \u2014 listings (real estate, Airbnb-style), fleet/logistics dashboards, store locators, anywhere a user picks a location from a viewport. Reach for the controlled `hoveredId` prop when a sibling list and the map need to highlight each other.",import:"@gradeui/ui",aliases:["map","maps","mapbox","maplibre","google maps","geo","location","latlng","coordinates","marker","pin","airbnb","listings","fleet","real estate","logistics","map view","mapkit","mapview","react native maps","rn maps"],subcomponents:["MapMarker"],composesWith:["Card (as marker content)","Badge","Avatar","Button","Row","Stack","Skeleton"],props:{provider:{schema:z.unknown(),design:"plumbing",description:'"maplibre" (default, free, no key) | "mapbox" (needs accessToken) | "google" (needs apiKey). Switching is one prop change.'},center:{schema:z.unknown(),design:"plumbing",description:"`[lng, lat]` tuple. ALWAYS lng first. Required."},zoom:{schema:z.unknown(),design:"plumbing",description:"number, 0\u201322. Required."},bounds:{schema:z.unknown(),design:"plumbing",description:"`[[swLng, swLat], [neLng, neLat]]`. When set, takes precedence over center+zoom."},appearance:{schema:z.unknown(),design:"plumbing",description:'"light" | "dark" | "satellite" | "auto" (default "auto", follows GradeThemeProvider mode).'},hoveredId:{schema:z.unknown(),design:"plumbing",description:'controlled string id, pairs with onHoveredIdChange. The matching MapMarker gets `data-gds-state="hovered"` automatically. This is how you build list \u2194 map two-way sync.'},onHoveredIdChange:{schema:z.unknown(),design:"event",description:"`(id: string | null) => void`. The other half of the controlled hover pair: fires when the pointer enters/leaves a marker so the sibling list can highlight in step. Without this entry in the contract, screens using the documented two-way sync fail save validation."},interactive:{schema:z.unknown(),design:"plumbing",description:"false freezes pan/zoom, useful for static cards."},tools:{schema:z.unknown(),design:"plumbing",description:'"auto" (default, zoom buttons follow `interactive`) | "zoom" (force zoom buttons) | "none" (chrome-free map; attribution always stays \u2014 license). One vocabulary across all providers.'},toolsPosition:{schema:z.unknown(),design:"plumbing",description:'"top-left" (default) | "top-right" | "bottom-left" | "bottom-right". Corner the tools dock to; use when a search bar or legend sits over the default corner.'},onLoad:{schema:z.unknown(),design:"event",description:"handle exposes flyTo, panTo, fitBounds, getCenter, getZoom, getBounds, instance."},tilerKey:{schema:z.unknown().optional(),design:"plumbing",description:'MapLibre only (provider="maplibre"). Optional everywhere: omit on `gradeui.com`/`localhost` and the referrer-locked demo key is used; set it only when embedding off-domain. The contract never requires it.'},accessToken:{schema:z.unknown().optional(),design:"plumbing",description:'Mapbox only. Pass it whenever provider="mapbox" \u2014 the component itself enforces this at runtime (throws a clear `provider="mapbox" requires an accessToken prop` error via onError if missing). It is OPTIONAL in the contract on purpose, so the validator never demands it from maplibre/google maps.'},apiKey:{schema:z.unknown().optional(),design:"plumbing",description:'Google only. Pass it whenever provider="google" \u2014 the component enforces it at runtime (throws `provider="google" requires an apiKey prop` via onError if missing). OPTIONAL in the contract on purpose, so it\'s never demanded from maplibre/mapbox.'},id:{schema:z.unknown().optional(),design:"plumbing",description:"string. Required. Stable marker id; pair with Map's `hoveredId` for list\u2194map hover sync."},at:{schema:z.unknown().optional(),design:"plumbing",description:"`[lng, lat]` tuple. Required. THE coordinate prop. ALWAYS lng first. The prop is literally named `at` \u2014 it is NOT `lngLat`, `coordinates`, `position`, `latLng`, `center`, or separate `lng`/`lat` props. Passing any other name leaves the marker coord `undefined`, and MapLibre throws on mount, crashing the WHOLE screen in every renderer. When in doubt, copy the `airbnb-listings` scaffold: `<MapMarker id={l.id} at={l.coords}>`."},anchor:{schema:z.unknown().optional(),design:"plumbing",description:'"center" | "bottom" (default "bottom", pin tip sits on the coord). Only these two values.'},onClick:{schema:z.unknown().optional(),design:"event",description:"handler called with `({ id, coords, native })` on marker click."},children:{schema:z.unknown().optional(),design:"plumbing",description:"DOM rendered as the marker (Badge, Card, Avatar, or any element). Inherits `--gds-*` tokens."}}};var yg=z.object({kind:z.literal("album"),artist:z.string(),title:z.string(),year:z.number().optional(),description:z.string().optional()}),xg=z.object({kind:z.literal("tv-show"),title:z.string(),year:z.number().optional(),description:z.string().optional()}),wg=z.object({kind:z.literal("movie"),title:z.string(),year:z.number().optional(),description:z.string().optional()}),Sg=z.object({kind:z.literal("game"),title:z.string(),description:z.string().optional()}),Cg=z.object({kind:z.literal("book"),title:z.string().optional(),author:z.string().optional(),isbn:z.string().optional(),description:z.string().optional()}),kg=z.object({kind:z.literal("poster"),title:z.string(),year:z.number().optional(),description:z.string().optional()}),Rg=z.object({kind:z.literal("portrait"),name:z.string().optional(),role:z.string().optional()}),Tg=z.object({kind:z.literal("landscape"),location:z.string().optional(),mood:z.string().optional()}),Pg=z.object({kind:z.literal("product"),name:z.string().optional(),brand:z.string().optional()}),Mg=z.object({kind:z.literal("food"),dish:z.string().optional(),cuisine:z.string().optional()}),Ng=z.object({kind:z.literal("generic"),prompt:z.string()}),Eg=z.union([z.object({kind:z.literal("video")}),z.object({kind:z.literal("audio")}),z.object({kind:z.literal("embed")}),z.object({kind:z.literal("3d")})]),Lg=z.union([yg,xg,wg,Sg,Cg,kg,Rg,Tg,Pg,Mg,Ng,Eg]),Ag=z.enum(["video","square","portrait","wide","auto"]),Dg=z.enum(["none","sm","md","lg","xl"]),Ig=z.enum(["album","tv-show","movie","game","book","portrait","landscape","poster","product","food","video","audio","embed","3d","generic"]),Hg=z.union([z.literal("auto"),z.literal("icon"),z.literal("none")]),Ii={name:"MediaSurface",description:"The canonical media slot for ALL non-person imagery \u2014 album art, posters, hero images, landscape photos, video and 3D containers.",when:"Pass `hint` + `alt` + (optionally) `source` so the empty-state placeholder is meaningful and the generation pipeline can later fill the slot with a real image. Use directly for declarative slots; the higher-level VideoPlayer / RivePlayer / ThreeScene wrap this for runtime-heavy media.",antipatterns:["Don't wrap <Avatar> inside <MediaSurface> to get an initials fallback. Set `alt` + `hint` on MediaSurface directly \u2014 the placeholder renders initials at small sizes derived from `alt`.","Don't use <Avatar> for album art, posters, products, food, landscapes, etc. Avatar is for PEOPLE only.","Don't inline manual gradient backgrounds (`bg-gradient-to-br \u2026`) on MediaSurface as a 'placeholder vibe' \u2014 the empty-state is already styled via `--gds-media-placeholder-bg/-fg` tokens."],composesWith:["Card","CardBlock","MediaBlock","VideoPlayer","RivePlayer","ThreeScene"],aliases:["media","image slot","media slot","image placeholder","cover","thumbnail","poster slot"],import:"@gradeui/ui",props:{hint:{schema:Ig.optional(),design:"knob",group:"image",control:"glyph-picker",label:"Slot kind",description:"Picks the placeholder glyph + the default aspect + the future generation provider. Defaults to 'generic'.",default:"generic",examples:["album","portrait","landscape","poster"]},aspect:{schema:Ag.optional(),design:"knob",control:"toggle-group",label:"Aspect ratio",description:"Override the slot's natural framing. When omitted, derived from `hint`: album/product/food \u2192 square, portrait/poster \u2192 portrait, landscape \u2192 wide, video/audio/embed/generic \u2192 video."},radius:{schema:Dg.optional(),design:"knob",control:"toggle-group",label:"Corner radius",default:"lg",description:"Driven by the `--gds-media-radius` CSS variable."},border:{schema:z.boolean().optional(),design:"knob",label:"Show border",default:false},loading:{schema:z.boolean().optional(),design:"knob",label:"Loading state",default:false,description:"Overlays the muted-pulse skeleton on top of the slot."},emptyState:{schema:Hg.optional(),design:"knob",control:"select",label:"Empty state",default:"auto",description:"'auto' renders the size-tiered placeholder (initials \u2192 glyph \u2192 glyph + caption). 'icon' is a legacy alias. 'none' renders a truly empty surface."},alt:{schema:z.string().optional(),design:"content",group:"image",control:"text",label:"Alt text",description:"Becomes the eventual `<img alt>`. Also drives the placeholder caption (>160px slots) and the 2-letter initials fallback (<64px slots).",examples:["Travelling Without Moving \u2014 Jamiroquai","Sunset over Mount Fuji"]},src:{schema:z.string().url().optional(),design:"content",group:"image",control:"url",label:"Image URL",description:"When set, renders an `<img>` filling the slot via object-cover. The wrapper keeps its aspect/radius/border. Generators patch this prop; manual values always win."},instanceId:{schema:z.string().optional(),design:"content",group:"image",control:"text",label:"Instance id",description:"Stable per-instance id stamped as `data-gds-instance-id`. Use when rendering MediaSurfaces from a data array (`.map(item => <MediaSurface instanceId={item.id} \u2026/>)`) \u2014 it's how Studio's selection + Fill flows tell one card apart from its siblings and patch only that entry. Was missing from this hand-authored contract while the component documented it, which made save validation reject the documented pattern (June 2026)."},source:{schema:Lg.optional(),design:"structured",label:"Source descriptor",description:"Structured metadata for the generation pipeline. Opaque to MediaSurface itself; read by the resolver to look up real imagery from the right provider (MusicBrainz / Pollinations / etc.).",perKindFields:{album:{artist:"string",title:"string",year:"number?"},poster:{title:"string",year:"number?"},portrait:{name:"string?",role:"string?"},landscape:{location:"string?",mood:"string?"},product:{name:"string?",brand:"string?"},food:{dish:"string?",cuisine:"string?"},generic:{prompt:"string"},video:{},audio:{},embed:{},"3d":{}}},className:{schema:z.string().optional(),design:"plumbing"},style:{schema:z.record(z.string(),z.unknown()).optional(),design:"plumbing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"Escape hatch for putting a custom <video>, <canvas>, Rive runtime, etc. inside. When supplied, the placeholder is suppressed."},overlay:{schema:z.unknown().optional(),design:"plumbing",description:"Decorative layer rendered ABOVE the media/placeholder (play buttons, hover gradients, corner badges). Does NOT suppress the placeholder."},glyph:{schema:z.unknown().optional(),design:"plumbing",description:"Per-instance override of the hint-derived placeholder glyph. Most consumers should pick a `hint` and let the map decide."},fallback:{schema:z.unknown().optional(),design:"plumbing",description:"Custom node shown while `loading` is true."},onVisibilityChange:{schema:z.function().optional(),design:"event",description:"Fires when the surface enters / leaves the viewport (IntersectionObserver)."}},actions:{fill:{label:"Fill image",icon:"Sparkles",description:"Resolve this slot's source via the free providers (MusicBrainz \u2192 Pollinations \u2192 Picsum) and patch the result into the runtime URL map.",kind:"resolve-media-source",enabledWhen:{propPresent:"source"}}}};var hc={name:"Message",description:`The canonical "avatar + author + timestamp + body" row. THE PRIMITIVE
|
|
47
|
+
terminal demos.`,import:"@gradeui/ui",composesWith:["AIChatComposer (preset wrapping this with paperclip + send + attachments)","ComposerReply (preset for comment threads)","AIChat (uses AIChatComposer internally)","Card (host above for reply boxes)",'Avatar (in leftActions slot for "your" avatar next to the input)'],styleDefaults:{ComposerToolbar:"flex flex-wrap items-center gap-0.5",AttachmentChips:"absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full",ComposerInner:"w-full"},props:{placeholder:{schema:z.string().optional(),design:"content"},initialText:{schema:z.string().optional(),design:"content",description:"plain text content to seed on mount"},initialJson:{schema:z.string().optional(),design:"content",description:"Lexical state JSON (from a previous onSubmit round-trip)"},formats:{schema:z.unknown().optional(),design:"plumbing",description:"available formats (defaults to bold/italic/underline/strikethrough/code/h1/h2/blockquote/ul/ol); pass false for plain text only"},toolbar:{schema:z.boolean().optional(),design:"knob",description:"show the formatting toolbar above the editor; default false"},triggers:{schema:z.unknown().optional(),design:"plumbing",description:'mention/slash configs, eg. `[{ char: "@", items: people }, { char: "/", items: commands }]`'},attachments:{schema:z.boolean().optional(),design:"knob",description:"enable image paste + paperclip when true/object; default off"},onSubmit:{schema:z.unknown().optional(),design:"event"},isLoading:{schema:z.boolean().optional(),design:"knob",description:"disables editor, swaps default Send for Stop"},onStop:{schema:z.unknown().optional(),design:"event"},maxLength:{schema:z.number().optional(),design:"knob"},autoFocus:{schema:z.boolean().optional(),design:"plumbing"},submitOnEnter:{schema:z.boolean().optional(),design:"knob",description:"default true (Shift-Enter still inserts newline)"},leftActions:{schema:z.unknown().optional(),design:"plumbing",description:"override the default paperclip"},rightActions:{schema:z.unknown().optional(),design:"plumbing",description:"override the default Send/Stop"},hideSend:{schema:z.boolean().optional(),design:"knob",description:"hide the default Send without replacing it"},steps:{schema:z.unknown().optional(),design:"plumbing",description:"scripted demo sequence"},trigger:{schema:z.unknown().optional(),design:"plumbing",description:'"mount" | "inView" | "manual"; default "mount"'},play:{schema:z.boolean().optional(),design:"knob",description:'for trigger="manual"'},speed:{schema:z.unknown().optional(),design:"plumbing",description:'"slow" | "normal" | "fast"; default "normal"'},loop:{schema:z.boolean().optional(),design:"knob"},loopDelay:{schema:z.number().optional(),design:"knob",description:"ms between loop iterations, default 2000"},readOnly:{schema:z.boolean().optional(),design:"knob",description:"disables editing AND focusability; programmatic playback still works; use for marketing demos so the script doesn't steal focus"},bare:{schema:z.boolean().optional(),design:"knob",description:"strip the card chrome"},className:{schema:z.string().optional(),design:"plumbing"}}};var Ws={name:"DataView",description:'One dataset, drawn as a table, a list of cards, or a grid \u2014 without re-typing the TanStack boilerplate (sortable headers, flexRender, selection, view switch) on every page. Hand it data + a columns schema; columns declare a `type` (badge/tags/number/currency/percent/date/boolean/url/text) that DataView renders, with a `cell` override for bespoke cells (avatars, relations). The view toggle can live anywhere \u2014 `useDataView()` holds the state so a `<DataViewToggle>` or `<DataViewColumns>` in a page header drives a `<DataView>` lower down. Mark a column `pinned="left"` (with a `width`) for a fixed column and `stickyHeader` to freeze the header. For a single record\'s fields use PropertyList; for the raw table primitive use Table.',import:"@gradeui/ui",aliases:["data view","data table","datatable","data grid","dataview","table view","card view","grid view","list view","gallery","records list","master list","tanstack table","sortable table","column visibility","pinned column","frozen column","sticky header","view switcher"],composesWith:["Table","Card","Badge","Avatar","ToggleGroup","DropdownMenu","PropertyList","Combobox"],props:{data:{schema:z.unknown(),design:"plumbing",description:"the rows"},columns:{schema:z.unknown(),design:"plumbing",description:"the schema; one list drives table, cards, and grid"},getRowId:{schema:z.unknown().optional(),design:"plumbing",description:"defaults to row.id"},view:{schema:z.unknown().optional(),design:"plumbing",description:"controlled or uncontrolled view"},views:{schema:z.unknown().optional(),design:"plumbing",description:"allowed views; one entry = single view, no toggle"},activeId:{schema:z.unknown().optional(),design:"plumbing",description:"the selected row; click emits it"},sorting:{schema:z.unknown().optional(),design:"plumbing",description:"TanStack SortingState"},columnVisibility:{schema:z.unknown().optional(),design:"plumbing",description:"which fields show"},stickyHeader:{schema:z.boolean().optional(),design:"knob",description:"freeze the header row on scroll"},toolbar:{schema:z.boolean().optional(),design:"knob",description:"render the built-in columns menu + view toggle above the view"},renderCard:{schema:z.unknown().optional(),design:"plumbing",description:"override card / grid tiles"},emptyMessage:{schema:z.unknown().optional(),design:"plumbing"}}};var Us={name:"DatePicker",description:'Any date or date-range entry. Use DatePicker for a single date (DOB, due date, booking). Use DateRangePicker for a span (report period, stay dates, filter window). Prefer these over <Input type="date"> \u2014 consistent theming, keyboard nav, a11y, and no browser-native UI drift.',import:"@gradeui/ui",aliases:["datepicker","calendar input","date field","date range","datepickerios","react native date picker","calendar input field","date field control"],subcomponents:["DateRangePicker"],composesWith:["Label","Form","Card (in CardContent)","Button (form submit)"],styleDefaults:{DatePicker:"w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground",DateRangePicker:"w-[300px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground"},props:{value:{schema:z.unknown().optional(),design:"plumbing"},onChange:{schema:z.unknown().optional(),design:"event",description:"called on select or clear"},placeholder:{schema:z.string().optional(),design:"content",description:'trigger label when empty (default "Pick a date" / "Pick a date range")'},disabled:{schema:z.boolean().optional(),design:"knob"},format:{schema:z.string().optional(),design:"content",description:'date-fns format token for the trigger label (default "PPP" single, "LLL dd, y" range)'},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob",description:'popover align (default "start")'},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob",description:"popover side"},captionLayout:{schema:z.enum(["label","dropdown","dropdown-months","dropdown-years"]).optional(),design:"knob"},className:{schema:z.string().optional(),design:"plumbing",description:"on the trigger button"},contentClassName:{schema:z.string().optional(),design:"content",description:"on the PopoverContent"},icon:{schema:z.unknown().optional(),design:"plumbing",description:"replaces the default CalendarIcon"},numberOfMonths:{schema:z.number().optional(),design:"knob",description:"DateRangePicker only, default 2"}}};var $s={name:"Dialog",description:'Modal interruptions \u2014 confirmations, focused forms, detail views, AI suggestion sheets. Dialog is the right primitive for Apple HIG / React Native "Alert" (modal) semantics. For non-blocking inline messaging use Callout; for transient notifications use Toaster (Sonner). Always include DialogTitle (a11y requirement).',import:"@gradeui/ui",aliases:["modal","popup","overlay","alert","system alert","alert dialog","modal dialog","confirm dialog","react native modal","rn alert","glass modal","frosted modal","ai suggestion modal"],subcomponents:["DialogTrigger","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogFooter","DialogClose"],composesWith:["Button (as DialogTrigger asChild","and inside DialogFooter)","Input/Textarea/Select inside DialogContent","Code (for changelog / diff modals)","MediaSurface (for image / preview modals)"],styleDefaults:{DialogOverlay:"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",DialogContent:"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",DialogHeader:"flex flex-col space-y-1.5 text-center sm:text-left",DialogFooter:"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",DialogTitle:"text-lg font-semibold leading-none tracking-tight",DialogDescription:"text-sm text-muted-foreground"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event",description:"Radix controlled/uncontrolled pattern"},asChild:{schema:z.enum(["wrap a Button"]).optional(),design:"plumbing"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the modal panel is *made of*. Defaults to `solid` (opaque `bg-background`). `glass` lets the page show through softly \u2014 pairs with rich backdrops or AI-suggestion modals."},accepts:{schema:z.unknown().optional(),design:"plumbing"},used:{schema:z.unknown().optional(),design:"plumbing"}}};var js={name:"DropdownMenu",description:'A small action menu attached to a trigger \u2014 overflow "\u2026" buttons on cards, user-avatar menus in headers, "Insert" menus in editors. For a full searchable list, use Command. For ONE primary action plus a secondary, use a Button next to a smaller ghost Button instead of a dropdown.',import:"@gradeui/ui",aliases:["dropdown","dropdown menu","overflow menu","kebab menu","more menu","action menu","context-style menu","menu","pull-down menu","pulldown menu","context menu","popup menu","actions menu","glass menu","frosted menu","ios menu","hig menu"],subcomponents:["DropdownMenuTrigger","DropdownMenuContent","DropdownMenuItem","DropdownMenuCheckboxItem","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuShortcut","DropdownMenuGroup","DropdownMenuSub","DropdownMenuSubTrigger","DropdownMenuSubContent"],composesWith:["Button (as trigger asChild)","Avatar (user menu)","Card (overflow on a tile)","Tooltip (on the trigger)"],styleDefaults:{DropdownMenuSubContent:"z-50 min-w-[8rem] overflow-hidden rounded-md border text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",DropdownMenuContent:"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border text-popover-foreground shadow-md",DropdownMenuItem:"relative flex cursor-default select-none items-center gap-2 rounded-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:shrink-0",DropdownMenuCheckboxItem:"relative flex cursor-default select-none items-center rounded-sm pr-2 outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",DropdownMenuRadioItem:"relative flex cursor-default select-none items-center rounded-sm pr-2 outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",DropdownMenuLabel:"font-semibold",DropdownMenuSeparator:"-mx-1 my-1 h-px bg-muted",DropdownMenuShortcut:"ml-auto text-xs tracking-widest opacity-60"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},modal:{schema:z.unknown().optional(),design:"plumbing"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"usually wraps a Button"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob"},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob"},sideOffset:{schema:z.number().optional(),design:"knob"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the menu surface is *made of*. `solid` (default) is `bg-popover`. `translucent` matches Apple HIG / iOS menu sheets. `glass` for menus floating over rich canvases."},size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:'menu density; cascades to every item (Item, Checkbox, Radio, SubTrigger, Label) via context so a compact trigger gets a compact menu. Use "xs" in dense tool panels.'},onSelect:{schema:z.unknown().optional(),design:"event"},disabled:{schema:z.unknown().optional(),design:"plumbing"},inset:{schema:z.unknown().optional(),design:"plumbing"},DropdownMenuCheckboxItem:{schema:z.unknown(),design:"plumbing"},DropdownMenuSub:{schema:z.unknown(),design:"plumbing",description:"sub-trigger shows children, sub-content holds the deeper items"},children:{schema:z.unknown().optional(),design:"plumbing",description:"right-aligned kbd hint"}}};var qs={name:"Field",description:'Pair a bare control with a label and optional description in a row, with id + aria-describedby wired automatically. Use layout="setting" for the classic settings row (label on the left, Switch on the right). For a selectable CARD where the whole surface is the control, use RadioCard / CheckboxCard / SwitchCard instead.',import:"@gradeui/ui",aliases:["field","form field","control row","label and description","two line checkbox","option row","setting row","toggle row"],composesWith:["Checkbox","RadioGroup","RadioGroupItem","Switch","Badge (inside Field.Trailing)"],styleDefaults:{FieldLabel:"text-sm font-medium leading-none text-foreground cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",FieldDescription:"text-sm text-muted-foreground",FieldTrailing:"flex shrink-0 items-center gap-2",FieldRoot:"flex gap-3"},props:{layout:{schema:z.enum(["option","setting"]).optional(),design:"knob",description:"option (default): control leads, text beside it; setting: text leads, control pinned trailing"},children:{schema:z.unknown(),design:"plumbing",description:"order does not matter"}}};var Ys={name:"FillPicker",description:`Grade's paint picker \u2014 the control for choosing a frame's background fill, modelled on Figma's fill popover. A fill-type icon row (solid \xB7 gradient \xB7 image \xB7 pattern \xB7 video \xB7 shader) switches the panel below; a global opacity sits at the foot. Emits a FillValue that maps 1:1 onto BackgroundFill props. This is a Studio/inspector chrome control \u2014 pair it with BackgroundFill, which renders the chosen paint. Not for app content. Use the FillSection subcomponent to edit a LIST of fills (the Figma "Fill" inspector section): each row is a Solid/Gradient/Image toggle, the matching value control (ColorPicker / GradientEditor popover / image URL), an opacity %, a visibility eye, and a remove button, with an add button in the header.`,import:"@gradeui/ui",aliases:["fill picker","paint picker","background picker","fill chooser","fill popover","fill section","fill list","fills inspector","paint section"],subcomponents:["FillSection"],composesWith:["BackgroundFill (renders the FillValue)","Popover (host it in a popover)","ColorPicker (the solid value)","GradientEditor (the gradient value)","ShaderPresetPicker (the shader tab)","the inspector Fill section"],styleDefaults:{Swatch:"h-7 w-7 rounded-md border border-border/60 transition-shadow",FillPicker:"flex flex-col gap-3",FillSection:"flex flex-col gap-2"},props:{value:{schema:z.unknown(),design:"plumbing",description:"current paint ({ type, color?, gradient?, src?, fit?, repeat?, tileSize?, preset?, palette?, postPreset?, opacity? }) (required)"},onChange:{schema:z.unknown(),design:"event",description:"called on any change (required)"},title:{schema:z.string().optional(),design:"plumbing",description:'section heading (default "Fills")'}}};var Zs={name:"Flex",description:"The unopinionated flexbox primitive \u2014 reach for Flex when Stack, Row, or Grid don't quite fit. Specifically when you need reverse direction (`row-reverse` / `col-reverse`), CSS defaults instead of Row's baked-in `items-center gap-md`, or baseline alignment. Otherwise prefer Stack / Row / Grid \u2014 they're easier to read and tuned for the 95% case. Flex is the escape hatch, not the default.",import:"@gradeui/ui",aliases:["flex","flexbox","flex container","hstack","vstack","horizontal","vertical","generic container","layout view"],composesWith:["any content component"],props:{direction:{schema:z.enum(["row","col","row-reverse","col-reverse"]).optional(),design:"knob",description:"main-axis direction",default:"row"},gap:{schema:z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"gap between children",default:"none"},align:{schema:z.enum(["start","center","end","stretch","baseline"]).optional(),design:"knob",description:"cross-axis alignment",default:"stretch"},justify:{schema:z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:"main-axis distribution",default:"start"},wrap:{schema:z.enum(["nowrap","wrap","wrap-reverse"]).optional(),design:"knob",description:"wrap behaviour when children overflow",default:"nowrap"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var Js={name:"GradientEditor",description:'Edit a multi-stop CSS gradient with token-led stops. A type Select (Linear / Radial / Angular) with reverse + rotate actions, a live full-width preview bar (a Swatch type="gradient"), then a Stops list where each stop is a position %, a colour (ColorPicker token or raw), an opacity %, and a remove button; an add button appends a stop. Token stops resolve to oklch(var(--<token>)) so the preview re-voices with the theme. Emits the structured GradientValue (kept editable + serialisable); the caller turns it into CSS with the exported gradientToCss(value). Use inside a Popover from a FillSection gradient row, or standalone in a theme builder. For a single solid colour use ColorPicker; for a full paint (solid / gradient / image / shader) use FillPicker.',import:"@gradeui/ui",aliases:["gradient editor","gradient picker","gradient builder","css gradient editor","stop editor","gradient stops","linear gradient editor","conic gradient editor"],composesWith:["Select","Button","Input","ColorPicker","Swatch","Popover","FillSection"],styleDefaults:{GradientEditor:"flex flex-col gap-3"},props:{value:{schema:z.unknown(),design:"plumbing",description:"the structured gradient (type linear/radial/angular, optional angle in deg, ordered stops). NOT a CSS string \u2014 render the string via gradientToCss(value)."},onChange:{schema:z.unknown(),design:"event",description:"fired with the next structured gradient on any edit"}}};var Qs={name:"Grid",description:"2D layouts where Stack (vertical) and Row (horizontal) don't fit \u2014 stat-card grids, feature tiles, pricing columns, photo grids. Reach for Grid over hand-rolled `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4` so the column count is a prop the settings panel can mutate and the responsive ladder stays consistent across designs.",import:"@gradeui/ui",aliases:["grid","tiles","cards grid","stat grid","columns","feature grid","grid view","lazy v grid","lazyvgrid","lazy h grid","lazyhgrid","tile grid","masonry"],composesWith:["Card","Stack (inside each cell)","Row","Button","any content component"],styleDefaults:{Grid:"gds-grid grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 items-stretch"},variantDefaults:{cols:"3",gap:"md",align:"stretch"},props:{cols:{schema:z.enum(["1","2","3","4","5","6","12"]).optional(),design:"knob",description:'desktop column count; each value has a baked-in responsive ladder (e.g. "4" \u2192 1 col mobile, 2 tablet, 4 desktop)',default:"3"},gap:{schema:z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"gap between grid cells (same scale as Stack/Row)",default:"md"},align:{schema:z.enum(["start","center","end","stretch"]).optional(),design:"knob",description:"cross-axis alignment of cells",default:"stretch"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var el={name:"HoverCard",description:"Rich preview content surfaced on hover \u2014 user profile mini-cards on @-mentions, link previews, definition popups, layer-thumbnail peeks. Pointer-only by design (no touch-friendly trigger); pair with a click target for touch devices, or fall back to Popover. NEVER use HoverCard for critical info \u2014 if the user can't reach it via keyboard or touch, it might as well not exist for accessibility.",import:"@gradeui/ui",aliases:["hover card","hover preview","mention preview","profile peek","link preview","rich tooltip","link preview card","profile hover","peek card","glass preview","frosted preview"],subcomponents:["HoverCardTrigger","HoverCardContent"],composesWith:["Avatar (user preview)","Card (richer content)","Link (the trigger)","MediaSurface (link/layer previews)","Code (snippet previews)"],styleDefaults:{HoverCardContent:"z-50 w-64 rounded-md border p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},openDelay:{schema:z.unknown().optional(),design:"plumbing"},closeDelay:{schema:z.unknown().optional(),design:"plumbing"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"usually a Link or Button"},side:{schema:z.unknown().optional(),design:"plumbing"},align:{schema:z.unknown().optional(),design:"plumbing"},sideOffset:{schema:z.unknown().optional(),design:"plumbing"},alignOffset:{schema:z.unknown().optional(),design:"plumbing"},className:{schema:z.unknown().optional(),design:"plumbing"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the preview surface is *made of*. `solid` (default) is `bg-popover`. `glass` for hover previews over rich content (a media feed, a layout canvas)."}}};var tl={name:"Input",description:'Any single-line text entry. Always pair with a Label for accessibility. Use startSlot/endSlot for icons, prefixes and units instead of hand-positioning absolute children; use size="sm"/"xs" in dense tool panels.',import:"@gradeui/ui",aliases:["text field","textbox","textfield","form field","text input","secure field","search field","url field","number field","textinput","text input field","react native textinput","unit input","input with icon"],composesWith:["Label","Form","Card (in CardContent)","Button (form submit)"],styleDefaults:{Input:"pointer-events-none absolute inset-y-0 left-0 flex items-center text-muted-foreground [&_svg]:size-3.5"},props:{type:{schema:z.string().optional(),design:"content"},placeholder:{schema:z.string().optional(),design:"content",description:"hint text shown while the input is empty. Model it explicitly (not just a native passthrough) so generated screens carry placeholders and the validator accepts them."},size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density. `default` (h-9) for forms; `sm` (h-8) and `xs` (h-7) for dense tool panels like the inspector. NOTE: pre-unification scale \u2014 see Figma parity audit; due to migrate to the t-shirt scale (xs 24 | sm 28 | md 32 | lg 40, default\u2192md)."},startSlot:{schema:z.unknown().optional(),design:"plumbing",description:"adornment rendered inside the leading edge (icon, prefix, currency symbol). Non-interactive by default so clicks focus the input."},endSlot:{schema:z.unknown().optional(),design:"plumbing",description:'adornment rendered inside the trailing edge (unit like "px", a clear button, a stepper). Same pointer rules as startSlot.'}}};var al={name:"Label",description:'Every Input / Textarea / Checkbox / Switch / RadioGroup. Always use htmlFor so clicking the label focuses the control. Match `size` to the field it labels (size="xs" label over a size="xs" input).',import:"@gradeui/ui",aliases:["label","form label","field label","caption"],composesWith:["Input","Textarea","Checkbox","Switch","RadioGroup","Select"],styleDefaults:{Label:"font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm"},variantDefaults:{size:"default"},props:{htmlFor:{schema:z.string().optional(),design:"content",description:"binds to the input's id"},size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:"text size, mirrors Input/Select/Textarea so a field and its label scale together. default = text-sm; xs = 11px for dense tool panels."}}};var rl={name:"Logo",description:"ALWAYS use <Logo> wherever a screen carries a brand mark \u2014",import:"@gradeui/ui",aliases:["logo","brand","brandmark","wordmark","lockup","brand logo","app logo","logotype","grade mark","g arrow"],composesWith:["AppShell","AppShellHeader","Sidebar","SidebarHeader","Toolbar","MotionOverlay","Row","Stack"],styleDefaults:{Logo:"gds-logo inline-flex shrink-0 select-none items-center"},props:{sources:{schema:z.unknown().optional(),design:"plumbing",description:"artwork keyed by lockup then appearance: { square?: { light?, dark?, mono? }, horizontal?: {...}, icon?: {...} }. Each slot is any node (inline <svg>, <img>, component). OMIT ENTIRELY and the GRADE MARK renders (the square G-arrow, painted with currentColor so it sits correctly on any surface). A bare <Logo /> is always correct branding."},size:{schema:z.enum(["sm","md","lg","xl"]).optional(),design:"knob",description:'height of the mark: 20 / 28 / 40 / 56px (a raw pixel number also works). Width is intrinsic (square/icon 1:1, horizontal keeps its ratio). Default "md"; use "sm" in dense rails and toolbars.'},lockup:{schema:z.enum(["square","horizontal","icon"]).optional(),design:"knob",description:'which shape to show; falls back to the next-best available artwork. Default "horizontal".'},mode:{schema:z.enum(["light","dark"]).optional(),design:"knob",description:'the background the logo SITS ON, selecting light/dark artwork. Explicit, not theme-coupled. Default "light".'},mono:{schema:z.boolean().optional(),design:"knob",description:"render the single-colour treatment; inherits currentColor from the parent. Default false."},label:{schema:z.string().optional(),design:"content",description:'accessible name (aria-label + role="img"); pair with decorative when the brand name is already beside it.'},decorative:{schema:z.boolean().optional(),design:"knob",description:"aria-hidden, no role; use when text nearby names the brand."},href:{schema:z.string().optional(),design:"content",description:"renders the logo as a link (logo-links-home)."},className:{schema:z.string().optional(),design:"plumbing"}}};var nl={name:"Map",description:"Any layout that needs a real map \u2014 listings (real estate, Airbnb-style), fleet/logistics dashboards, store locators, anywhere a user picks a location from a viewport. Reach for the controlled `hoveredId` prop when a sibling list and the map need to highlight each other.",import:"@gradeui/ui",aliases:["map","maps","mapbox","maplibre","google maps","geo","location","latlng","coordinates","marker","pin","airbnb","listings","fleet","real estate","logistics","map view","mapkit","mapview","react native maps","rn maps"],subcomponents:["MapMarker"],composesWith:["Card (as marker content)","Badge","Avatar","Button","Row","Stack","Skeleton"],props:{provider:{schema:z.unknown(),design:"plumbing",description:'"maplibre" (default, free, no key) | "mapbox" (needs accessToken) | "google" (needs apiKey). Switching is one prop change.'},center:{schema:z.unknown(),design:"plumbing",description:"`[lng, lat]` tuple. ALWAYS lng first. Required."},zoom:{schema:z.unknown(),design:"plumbing",description:"number, 0\u201322. Required."},bounds:{schema:z.unknown(),design:"plumbing",description:"`[[swLng, swLat], [neLng, neLat]]`. When set, takes precedence over center+zoom."},appearance:{schema:z.unknown(),design:"plumbing",description:'"light" | "dark" | "satellite" | "auto" (default "auto", follows GradeThemeProvider mode).'},hoveredId:{schema:z.unknown(),design:"plumbing",description:'controlled string id, pairs with onHoveredIdChange. The matching MapMarker gets `data-gds-state="hovered"` automatically. This is how you build list \u2194 map two-way sync.'},onHoveredIdChange:{schema:z.unknown(),design:"event",description:"`(id: string | null) => void`. The other half of the controlled hover pair: fires when the pointer enters/leaves a marker so the sibling list can highlight in step. Without this entry in the contract, screens using the documented two-way sync fail save validation."},interactive:{schema:z.unknown(),design:"plumbing",description:"false freezes pan/zoom, useful for static cards."},tools:{schema:z.unknown(),design:"plumbing",description:'"auto" (default, zoom buttons follow `interactive`) | "zoom" (force zoom buttons) | "none" (chrome-free map; attribution always stays \u2014 license). One vocabulary across all providers.'},toolsPosition:{schema:z.unknown(),design:"plumbing",description:'"top-left" (default) | "top-right" | "bottom-left" | "bottom-right". Corner the tools dock to; use when a search bar or legend sits over the default corner.'},onLoad:{schema:z.unknown(),design:"event",description:"handle exposes flyTo, panTo, fitBounds, getCenter, getZoom, getBounds, instance."},tilerKey:{schema:z.unknown().optional(),design:"plumbing",description:'MapLibre only (provider="maplibre"). Optional everywhere: omit on `gradeui.com`/`localhost` and the referrer-locked demo key is used; set it only when embedding off-domain. The contract never requires it.'},accessToken:{schema:z.unknown().optional(),design:"plumbing",description:'Mapbox only. Pass it whenever provider="mapbox" \u2014 the component itself enforces this at runtime (throws a clear `provider="mapbox" requires an accessToken prop` error via onError if missing). It is OPTIONAL in the contract on purpose, so the validator never demands it from maplibre/google maps.'},apiKey:{schema:z.unknown().optional(),design:"plumbing",description:'Google only. Pass it whenever provider="google" \u2014 the component enforces it at runtime (throws `provider="google" requires an apiKey prop` via onError if missing). OPTIONAL in the contract on purpose, so it\'s never demanded from maplibre/mapbox.'},id:{schema:z.unknown().optional(),design:"plumbing",description:"string. Required. Stable marker id; pair with Map's `hoveredId` for list\u2194map hover sync."},at:{schema:z.unknown().optional(),design:"plumbing",description:"`[lng, lat]` tuple. Required. THE coordinate prop. ALWAYS lng first. The prop is literally named `at` \u2014 it is NOT `lngLat`, `coordinates`, `position`, `latLng`, `center`, or separate `lng`/`lat` props. Passing any other name leaves the marker coord `undefined`, and MapLibre throws on mount, crashing the WHOLE screen in every renderer. When in doubt, copy the `airbnb-listings` scaffold: `<MapMarker id={l.id} at={l.coords}>`."},anchor:{schema:z.unknown().optional(),design:"plumbing",description:'"center" | "bottom" (default "bottom", pin tip sits on the coord). Only these two values.'},onClick:{schema:z.unknown().optional(),design:"event",description:"handler called with `({ id, coords, native })` on marker click."},children:{schema:z.unknown().optional(),design:"plumbing",description:"DOM rendered as the marker (Badge, Card, Avatar, or any element). Inherits `--gds-*` tokens."}}};var Rm=z.object({kind:z.literal("album"),artist:z.string(),title:z.string(),year:z.number().optional(),description:z.string().optional()}),Cm=z.object({kind:z.literal("tv-show"),title:z.string(),year:z.number().optional(),description:z.string().optional()}),Tm=z.object({kind:z.literal("movie"),title:z.string(),year:z.number().optional(),description:z.string().optional()}),Pm=z.object({kind:z.literal("game"),title:z.string(),description:z.string().optional()}),Mm=z.object({kind:z.literal("book"),title:z.string().optional(),author:z.string().optional(),isbn:z.string().optional(),description:z.string().optional()}),Nm=z.object({kind:z.literal("poster"),title:z.string(),year:z.number().optional(),description:z.string().optional()}),Em=z.object({kind:z.literal("portrait"),name:z.string().optional(),role:z.string().optional()}),Lm=z.object({kind:z.literal("landscape"),location:z.string().optional(),mood:z.string().optional()}),Dm=z.object({kind:z.literal("product"),name:z.string().optional(),brand:z.string().optional()}),Am=z.object({kind:z.literal("food"),dish:z.string().optional(),cuisine:z.string().optional()}),Im=z.object({kind:z.literal("generic"),prompt:z.string()}),Hm=z.union([z.object({kind:z.literal("video")}),z.object({kind:z.literal("audio")}),z.object({kind:z.literal("embed")}),z.object({kind:z.literal("3d")})]),Fm=z.union([Rm,Cm,Tm,Pm,Mm,Nm,Em,Lm,Dm,Am,Im,Hm]),zm=z.enum(["video","square","portrait","wide","auto"]),Vm=z.enum(["none","sm","md","lg","xl"]),Bm=z.enum(["album","tv-show","movie","game","book","portrait","landscape","poster","product","food","video","audio","embed","3d","generic"]),Om=z.union([z.literal("auto"),z.literal("icon"),z.literal("none")]),Gn={name:"MediaSurface",description:"The canonical media slot for ALL non-person imagery \u2014 album art, posters, hero images, landscape photos, video and 3D containers.",when:"Pass `hint` + `alt` + (optionally) `source` so the empty-state placeholder is meaningful and the generation pipeline can later fill the slot with a real image. Use directly for declarative slots; the higher-level VideoPlayer / RivePlayer / ThreeScene wrap this for runtime-heavy media.",antipatterns:["Don't wrap <Avatar> inside <MediaSurface> to get an initials fallback. Set `alt` + `hint` on MediaSurface directly \u2014 the placeholder renders initials at small sizes derived from `alt`.","Don't use <Avatar> for album art, posters, products, food, landscapes, etc. Avatar is for PEOPLE only.","Don't inline manual gradient backgrounds (`bg-gradient-to-br \u2026`) on MediaSurface as a 'placeholder vibe' \u2014 the empty-state is already styled via `--gds-media-placeholder-bg/-fg` tokens."],composesWith:["Card","CardBlock","MediaBlock","VideoPlayer","RivePlayer","ThreeScene"],aliases:["media","image slot","media slot","image placeholder","cover","thumbnail","poster slot"],import:"@gradeui/ui",props:{hint:{schema:Bm.optional(),design:"knob",group:"image",control:"glyph-picker",label:"Slot kind",description:"Picks the placeholder glyph + the default aspect + the future generation provider. Defaults to 'generic'.",default:"generic",examples:["album","portrait","landscape","poster"]},aspect:{schema:zm.optional(),design:"knob",control:"toggle-group",label:"Aspect ratio",description:"Override the slot's natural framing. When omitted, derived from `hint`: album/product/food \u2192 square, portrait/poster \u2192 portrait, landscape \u2192 wide, video/audio/embed/generic \u2192 video."},radius:{schema:Vm.optional(),design:"knob",control:"toggle-group",label:"Corner radius",default:"none",description:"Driven by the `--gds-media-radius` CSS variable. Defaults to `none` so the slot sits flush \u2014 set `lg`/`xl` for a standalone rounded image. (A media slot mounted flush at the top of a Card should stay square and let the Card clip it.)"},border:{schema:z.boolean().optional(),design:"knob",label:"Show border",default:false},loading:{schema:z.boolean().optional(),design:"knob",label:"Loading state",default:false,description:"Overlays the muted-pulse skeleton on top of the slot."},emptyState:{schema:Om.optional(),design:"knob",control:"select",label:"Empty state",default:"auto",description:"'auto' renders the size-tiered placeholder (initials \u2192 glyph \u2192 glyph + caption). 'icon' is a legacy alias. 'none' renders a truly empty surface."},alt:{schema:z.string().optional(),design:"content",group:"image",control:"text",label:"Alt text",description:"Becomes the eventual `<img alt>`. Also drives the placeholder caption (>160px slots) and the 2-letter initials fallback (<64px slots).",examples:["Travelling Without Moving \u2014 Jamiroquai","Sunset over Mount Fuji"]},src:{schema:z.string().url().optional(),design:"content",group:"image",control:"url",label:"Image URL",description:"When set, renders an `<img>` filling the slot via object-cover. The wrapper keeps its aspect/radius/border. Generators patch this prop; manual values always win."},instanceId:{schema:z.string().optional(),design:"content",group:"image",control:"text",label:"Instance id",description:"Stable per-instance id stamped as `data-gds-instance-id`. Use when rendering MediaSurfaces from a data array (`.map(item => <MediaSurface instanceId={item.id} \u2026/>)`) \u2014 it's how Studio's selection + Fill flows tell one card apart from its siblings and patch only that entry. Was missing from this hand-authored contract while the component documented it, which made save validation reject the documented pattern (June 2026)."},source:{schema:Fm.optional(),design:"structured",label:"Source descriptor",description:"Structured metadata for the generation pipeline. Opaque to MediaSurface itself; read by the resolver to look up real imagery from the right provider (MusicBrainz / Pollinations / etc.).",perKindFields:{album:{artist:"string",title:"string",year:"number?"},poster:{title:"string",year:"number?"},portrait:{name:"string?",role:"string?"},landscape:{location:"string?",mood:"string?"},product:{name:"string?",brand:"string?"},food:{dish:"string?",cuisine:"string?"},generic:{prompt:"string"},video:{},audio:{},embed:{},"3d":{}}},className:{schema:z.string().optional(),design:"plumbing"},style:{schema:z.record(z.string(),z.unknown()).optional(),design:"plumbing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"Escape hatch for putting a custom <video>, <canvas>, Rive runtime, etc. inside. When supplied, the placeholder is suppressed."},overlay:{schema:z.unknown().optional(),design:"plumbing",description:"Decorative layer rendered ABOVE the media/placeholder (play buttons, hover gradients, corner badges). Does NOT suppress the placeholder."},glyph:{schema:z.unknown().optional(),design:"plumbing",description:"Per-instance override of the hint-derived placeholder glyph. Most consumers should pick a `hint` and let the map decide."},fallback:{schema:z.unknown().optional(),design:"plumbing",description:"Custom node shown while `loading` is true."},onVisibilityChange:{schema:z.function().optional(),design:"event",description:"Fires when the surface enters / leaves the viewport (IntersectionObserver)."}},actions:{fill:{label:"Fill image",icon:"Sparkles",description:"Resolve this slot's source via the free providers (MusicBrainz \u2192 Pollinations \u2192 Picsum) and patch the result into the runtime URL map.",kind:"resolve-media-source",enabledWhen:{propPresent:"source"}}}};var il={name:"Message",description:`The canonical "avatar + author + timestamp + body" row. THE PRIMITIVE
|
|
48
48
|
for any chat surface, comment thread, post-reply, activity log, or
|
|
49
49
|
notification feed that follows the people-and-text shape.
|
|
50
50
|
|
|
@@ -58,7 +58,7 @@ Notion comment sidebars, in-app activity logs, notification rows \u2014
|
|
|
58
58
|
every one of these IS \`<Message>\`. Do not roll the layout inline.
|
|
59
59
|
|
|
60
60
|
For non-people activity (system events, log lines, status pings) use
|
|
61
|
-
Callout or a plain Row instead \u2014 Message implies a human author.`,import:"@gradeui/ui",composesWith:['Avatar (in the avatar slot \u2014 pair with AvatarFallback tone="..." for stable per-author colour)',"Badge (in the badge slot for role / OP / bot tags)","Button (in actions",'typically size="icon" + variant="ghost")',"Stack (host multiple Messages in a thread)","Card (wrap a Stack of Messages for a comment-thread block)"],styleDefaults:{Message:"flex items-start"},props:{author:{schema:z.string(),design:"content",description:"display name of the message author"},timestamp:{schema:z.unknown().optional(),design:"plumbing",description:'string ("11:24", "2 hours ago") or any node for custom formatting'},avatar:{schema:z.unknown().optional(),design:"plumbing",description:"slot for any `<Avatar>` composition; omit for grouped messages from the same author"},badge:{schema:z.unknown().optional(),design:"plumbing",description:"small chip(s) next to the author name (OP, Bot, Admin, role tag)"},edited:{schema:z.union([z.boolean(),z.string()]).optional(),design:"knob",description:'renders "(edited)" hint next to timestamp; pass a string to customise ("(edited 2 minutes ago)")'},pinned:{schema:z.boolean().optional(),design:"knob",description:'renders a pin glyph + "Pinned" label above the header row for sticky / pinned messages'},actions:{schema:z.unknown().optional(),design:"plumbing",description:"end-of-header slot, typically hover-revealed icon buttons (reply / react / more)"},reactions:{schema:z.unknown().optional(),design:"plumbing",description:"slot below the body, typically a Row of reaction chips (emoji + count)"},threadCount:{schema:z.number().optional(),design:"knob",description:'renders a "N replies" link affordance below the body'},onThreadClick:{schema:z.unknown().optional(),design:"event",description:"handler for the threadCount affordance"},align:{schema:z.enum(["start","end"]).optional(),design:"knob",description:'`start` (default) puts the avatar on the left; `end` mirrors for "your messages" in DM threads'},density:{schema:z.enum(["default","compact"]).optional(),design:"knob",description:'`default` is the canonical chat / channel-feed rhythm; `compact` tightens text sizes + gaps for dense side panels (Studio comments, activity feeds). Pair with `Avatar size="xs"` for the tightest stack.'},children:{schema:z.unknown(),design:"plumbing",description:"body content (plain text or rich nodes)"},className:{schema:z.string().optional(),design:"plumbing"}}};var
|
|
61
|
+
Callout or a plain Row instead \u2014 Message implies a human author.`,import:"@gradeui/ui",composesWith:['Avatar (in the avatar slot \u2014 pair with AvatarFallback tone="..." for stable per-author colour)',"Badge (in the badge slot for role / OP / bot tags)","Button (in actions",'typically size="icon" + variant="ghost")',"Stack (host multiple Messages in a thread)","Card (wrap a Stack of Messages for a comment-thread block)"],styleDefaults:{Message:"flex items-start"},props:{author:{schema:z.string(),design:"content",description:"display name of the message author"},timestamp:{schema:z.unknown().optional(),design:"plumbing",description:'string ("11:24", "2 hours ago") or any node for custom formatting'},avatar:{schema:z.unknown().optional(),design:"plumbing",description:"slot for any `<Avatar>` composition; omit for grouped messages from the same author"},badge:{schema:z.unknown().optional(),design:"plumbing",description:"small chip(s) next to the author name (OP, Bot, Admin, role tag)"},edited:{schema:z.union([z.boolean(),z.string()]).optional(),design:"knob",description:'renders "(edited)" hint next to timestamp; pass a string to customise ("(edited 2 minutes ago)")'},pinned:{schema:z.boolean().optional(),design:"knob",description:'renders a pin glyph + "Pinned" label above the header row for sticky / pinned messages'},actions:{schema:z.unknown().optional(),design:"plumbing",description:"end-of-header slot, typically hover-revealed icon buttons (reply / react / more)"},reactions:{schema:z.unknown().optional(),design:"plumbing",description:"slot below the body, typically a Row of reaction chips (emoji + count)"},threadCount:{schema:z.number().optional(),design:"knob",description:'renders a "N replies" link affordance below the body'},onThreadClick:{schema:z.unknown().optional(),design:"event",description:"handler for the threadCount affordance"},align:{schema:z.enum(["start","end"]).optional(),design:"knob",description:'`start` (default) puts the avatar on the left; `end` mirrors for "your messages" in DM threads'},density:{schema:z.enum(["default","compact"]).optional(),design:"knob",description:'`default` is the canonical chat / channel-feed rhythm; `compact` tightens text sizes + gaps for dense side panels (Studio comments, activity feeds). Pair with `Avatar size="xs"` for the tightest stack.'},children:{schema:z.unknown(),design:"plumbing",description:"body content (plain text or rich nodes)"},className:{schema:z.string().optional(),design:"plumbing"}}};var sl={name:"Motion",description:"A directed sequence of scenes on one persistent stage \u2014 the",import:"@gradeui/ui",aliases:["motion","grade motion","scenes","sequence","demo reel","product video","launch video","title card","lower third","section break","multi-scene","storyboard"],subcomponents:["MotionScene","MotionScreen","MotionText"],composesWith:["ScreenAnimator","ThreeScene","VideoPlayer","AppShell","the whole component set (scenes hold screens)"],styleDefaults:{MotionScreen:"gds-motion-screen",MotionText:"gds-motion-text",MotionOverlay:"gds-motion-overlay",MotionSceneImpl:"gds-motion-scene",Motion:"gds-motion"},props:{view:{schema:z.enum(["play","strip"]).optional(),design:"knob",description:"play runs the film; strip lays",default:"play"}}};var ll={name:"MultiSelect",description:`Picking multiple items from a finite list \u2014 tag selectors, filter chips,
|
|
62
62
|
"share with N people", multi-region settings.
|
|
63
63
|
|
|
64
64
|
**This is the answer for ANY "removable-chips-inside-an-input" pattern.**
|
|
@@ -76,7 +76,7 @@ already covers the trigger-with-badges shape.
|
|
|
76
76
|
|
|
77
77
|
Use \`<Select>\` instead for SINGLE selection. Use \`<Command>\` directly
|
|
78
78
|
(no MultiSelect wrapper) when the option set is unbounded or async
|
|
79
|
-
(users to @-mention, email recipients, search-as-you-type API results).`,import:"@gradeui/ui",composesWith:["Popover","Command","Badge","Checkbox-style row indicator","Separator"],styleDefaults:{MultiSelect:"mr-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary"},props:{options:{schema:z.unknown(),design:"plumbing"},value:{schema:z.string().optional(),design:"content",description:"controlled selection"},defaultValue:{schema:z.string().optional(),design:"content",description:"uncontrolled initial selection"},onValueChange:{schema:z.unknown().optional(),design:"event"},placeholder:{schema:z.string().optional(),design:"content",default:"Select\u2026"},searchPlaceholder:{schema:z.string().optional(),design:"content",default:"Search\u2026"},emptyMessage:{schema:z.string().optional(),design:"content",default:"Nothing matches."},maxCount:{schema:z.number().optional(),design:"knob",description:'badges shown on the trigger before collapsing to "+N more"'},searchable:{schema:z.boolean().optional(),design:"knob",description:"hide for short option lists",default:true},badgeDismissible:{schema:z.boolean().optional(),design:"knob",description:"show \xD7 on each selected badge",default:true},disabled:{schema:z.boolean().optional(),design:"knob"},modalPopover:{schema:z.boolean().optional(),design:"knob",description:"Popover modal mode",default:false},className:{schema:z.string().optional(),design:"plumbing"}}};var yc={name:"Popover",description:'A floating panel anchored to a trigger that contains interactive content \u2014 date pickers, color pickers, filter pickers, "more info" panels, inline forms. Differs from Tooltip (hover-only, no focusable content) and Dialog (modal, blocks the page). DatePicker, DateRangePicker, and the Combobox pattern all compose Popover internally.',import:"@gradeui/ui",aliases:["popover","dropdown panel","floating panel","inline editor","attached panel","filter pop","popover view","popoverpresentation","attached popover","glass popover","frosted popover","inspector popover"],subcomponents:["PopoverTrigger","PopoverContent","PopoverAnchor"],composesWith:["Button (as trigger)","Calendar (date picker)","Command (combobox)","Form controls (inline edit popover)","Code (code-detail popovers)"],styleDefaults:{PopoverContent:"z-50 w-72 rounded-md border p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},modal:{schema:z.unknown().optional(),design:"plumbing"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"usually a Button"},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob"},sideOffset:{schema:z.unknown().optional(),design:"plumbing"},alignOffset:{schema:z.unknown().optional(),design:"plumbing"},collisionPadding:{schema:z.unknown().optional(),design:"plumbing"},className:{schema:z.unknown().optional(),design:"plumbing"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the popover surface is *made of*. `solid` is the default opaque `bg-popover`. `translucent` is the Apple HIG menu-sheet feel. `glass` for floating panels over rich canvases (Studio inspector, image-tool palette)."}}};var xc={name:"Progress",description:"Determinate progress \u2014 file uploads, multi-step forms, quota meters. Indeterminate state \u2192 use Skeleton or animated Loader icon.",import:"@gradeui/ui",aliases:["progress","progress view","progress indicator","progress bar","determinate progress","loading bar","completion bar"],composesWith:["Card (as a section)","Badge (showing % next to it)","Label (describing what's loading)"],styleDefaults:{Progress:"relative h-4 w-full overflow-hidden rounded-full bg-secondary"},props:{value:{schema:z.number().optional(),design:"knob",description:"percent complete"},max:{schema:z.number().optional(),design:"knob"},className:{schema:z.string().optional(),design:"plumbing"}}};var wc={name:"PropertyList",description:'Read-only display of the properties of a SINGLE item \u2014 detail panels, inspectors, "about this" cards, order/record summaries. It is a Table row transposed (schema vertical, one record). The value side is a polymorphic slot, so the same renderers that fill a Table cell (text, Badge, tag group, Avatar stack, date, link) drop straight into a row. For an EDITABLE field (label + control) use Field instead; a panel that flips between read and edit swaps a PropertyList for a stack of Fields.',import:"@gradeui/ui",aliases:["property list","properties","property panel","description list","definition list","detail list","key value","key-value","data list","field list","attributes","metadata list","record summary","detail panel","inspector fields","spec list"],composesWith:["Badge","Avatar","Table","Field","Separator","Card"],styleDefaults:{PropertyListRoot:"flex min-w-0 flex-col",PropertyListRow:"grid"},props:{layout:{schema:z.enum(["row","stack"]).optional(),design:"knob",description:"row (default): label column beside value; stack: label above value for narrow panels"},density:{schema:z.enum(["compact","default","relaxed"]).optional(),design:"knob",description:"row rhythm"},align:{schema:z.enum(["start","center"]).optional(),design:"knob",description:"default vertical alignment of label vs value; use start when values wrap (tag groups, multi-line)"},divider:{schema:z.boolean().optional(),design:"knob",description:"hairline rule between rows"},labelWidth:{schema:z.string().optional(),design:"content",description:"override the label column width (any CSS length); sets --gds-property-list-label-width"},children:{schema:z.unknown(),design:"plumbing"}}};var Sc={name:"RadioCard",description:"Single-select where each option is a whole selectable card (shipping options, plan picker, onboarding choices). The whole card is the control, so focus and the checked state live on the card surface and the entire card is clickable. MUST sit inside a RadioGroup (keeps roving focus + single-select). Static content only \u2014 never nest an interactive control (Slider/Input/Button/link) inside. For a plain radio + label row use Field instead.",import:"@gradeui/ui",aliases:["radio card","selectable card","option card","plan picker","choice card","pricing tier","segmented choice card"],composesWith:["RadioGroup (required parent)","Badge (in aside)","MediaSurface (custom children)"],props:{value:{schema:z.string(),design:"content",description:"the radio value"},label:{schema:z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:z.boolean().optional(),design:"knob",description:"hide the dot; selection shown by the card border + background"},indicatorPosition:{schema:z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"arbitrary static content (image, custom layout) instead of label/description"}}};var Cc={name:"RadioGroup",description:"A small set of mutually-exclusive options where the user needs to SEE all of them at once \u2014 pricing tiers (3-4 options), shipping speed, payment method radio cards. When each option should be a whole clickable card (label + description, selected state on the card), use RadioCard inside the RadioGroup instead of a Card with a radio in the corner. For a plain label + description row, wrap RadioGroupItem in Field. For 5+ options use Select. For a segmented control as part of a toolbar use ToggleGroup. For yes/no use Switch.",import:"@gradeui/ui",aliases:["radio group","radio buttons","single-choice","pricing options","payment method","radio buttons","radio control","single-select"],subcomponents:["RadioGroupItem"],composesWith:["Label (paired with each item via htmlFor)","Field (label + description row)","RadioCard (whole-card selectable option)","Stack (vertical list)"],styleDefaults:{RadioGroup:"grid gap-2",RadioGroupItem:"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"},props:{value:{schema:z.string().optional(),design:"content",description:"controlled selection"},defaultValue:{schema:z.string().optional(),design:"content",description:"uncontrolled initial"},onValueChange:{schema:z.unknown().optional(),design:"event"},disabled:{schema:z.boolean().optional(),design:"knob"},orientation:{schema:z.enum(["horizontal","vertical"]).optional(),design:"knob",default:"vertical"},name:{schema:z.string().optional(),design:"content",description:"form name when posting natively"},id:{schema:z.string().optional(),design:"plumbing",description:"pair with a <Label htmlFor> for click-on-label"}}};var kc={name:"Resizable",description:`A multi-pane layout where the user wants to drag the divider \u2014 Slack/Mail-style list+detail, IDE editor+terminal, side-by-side compare view. Static layouts shouldn't use this \u2014 reach for AppShell with nav="three-pane" (fixed widths) or Grid (responsive ladder). Built on react-resizable-panels under the hood.`,import:"@gradeui/ui",aliases:["resizable","splitter","split pane","drag divider","adjustable panels","resizer","split view","draggable divider","split pane resizer","ns split view"],subcomponents:["ResizablePanelGroup","ResizablePanel","ResizableHandle"],composesWith:["AppShellMain (host the splitter inside main)","ScrollArea (each panel's content)","Card"],styleDefaults:{ResizablePanelGroup:"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",ResizableHandle:"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90"},props:{direction:{schema:z.enum(["horizontal","vertical"]).optional(),design:"knob",description:"required; sets the axis the user drags along"},autoSaveId:{schema:z.string().optional(),design:"content",description:"persists user-adjusted sizes to localStorage under this id"},onLayout:{schema:z.unknown().optional(),design:"event"},defaultSize:{schema:z.number().optional(),design:"knob",description:"percent of group (0-100); siblings should sum to ~100"},minSize:{schema:z.unknown().optional(),design:"plumbing"},maxSize:{schema:z.number().optional(),design:"knob",description:"percent bounds"},collapsible:{schema:z.boolean().optional(),design:"knob",description:"allow this panel to collapse to zero"},collapsedSize:{schema:z.unknown().optional(),design:"plumbing"},onCollapse:{schema:z.unknown().optional(),design:"event"},onExpand:{schema:z.unknown().optional(),design:"event",description:"collapse behaviour controls"},withHandle:{schema:z.boolean().optional(),design:"knob",description:"show a visible drag affordance (default just a hit-zone)"}}};var Rc={name:"RivePlayer",description:"Rive runtime wrapped in the shared media surface. Reach for Rive when you need interactive state-machine animations driven by scroll/hover/input. For non-interactive looping video, use VideoPlayer; for shader-driven backgrounds, use ThreeScene.",import:"@gradeui/ui",aliases:["rive","riv","animation","animated","lottie"],composesWith:["MediaSurface (internal)","Card","any container"],styleDefaults:{RiveInner:"absolute inset-0 flex items-end justify-end p-2"},props:{src:{schema:z.string(),design:"content",description:"URL or path to the .riv file"},stateMachines:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"state machine(s) to run"},artboard:{schema:z.string().optional(),design:"content",description:"artboard name; omit to use default"},controls:{schema:z.boolean().optional(),design:"knob",description:"viewer mode by default; set true for play/pause overlay",default:false},autoPlay:{schema:z.boolean().optional(),design:"knob",description:"respects reduced-motion",default:true},loop:{schema:z.boolean().optional(),design:"knob",default:true},pauseOffscreen:{schema:z.boolean().optional(),design:"knob",default:true},fit:{schema:z.enum(["contain","cover","fill","fitWidth","fitHeight","none"]).optional(),design:"knob",default:"contain"},stateMachineInputs:{schema:z.unknown().optional(),design:"plumbing"},aspect:{schema:z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"square"},radius:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",default:"lg"},poster:{schema:z.string().optional(),design:"content",description:"image shown while the runtime loads"}}};var Tc={name:"Row",description:"Horizontal composition \u2014 button groups, inline form rows, logo + nav rows, anything on one line. Reach for Row instead of `flex items-center gap-*` so the alignment and spacing are editable through the settings panel. For two-pane layouts with an explicit ratio (sidebar + content, 1/3 + 2/3) use Split instead \u2014 Row evenly flows whatever children it holds.",import:"@gradeui/ui",aliases:["row","hstack","horizontal","inline","horizontal layout","hstack","h-stack","horizontal stack","lazyhstack"],composesWith:["Button","Input","NavItem","Stack (can wrap a Row)","any content component"],styleDefaults:{Row:"gds-row flex flex-row gap-4 items-center justify-start"},variantDefaults:{gap:"md",align:"center",justify:"start"},props:{gap:{schema:z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"gap between children",default:"md"},align:{schema:z.enum(["start","center","end","stretch","baseline"]).optional(),design:"knob",description:"cross-axis (vertical) alignment",default:"center"},justify:{schema:z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:"main-axis distribution",default:"start"},wrap:{schema:z.boolean().optional(),design:"knob",description:"allow children to wrap onto additional lines when they overflow",default:false},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var Pc={name:"ScreenAnimator",description:'Wrap ANY screen or section in a directed camera \u2014 a "live demo',import:"@gradeui/ui",aliases:["screen animator","camera","camera tour","director","demo","product demo","zoom pan","spotlight","ken burns","presenter"],composesWith:["AppShell","ThreeScene","Card","Grid","the whole component set (it wraps a screen)"],styleDefaults:{ScreenAnimator:"gds-screen-animator"},props:{shots:{schema:z.unknown().optional(),design:"plumbing",description:"the tour. Each"}}};var Mc={name:"ScrollArea",description:"Bounded content that needs custom scroll chrome \u2014 sidebars with long item lists, chat transcripts, table panels inside a dashboard, anywhere the OS scrollbar would feel out of place against the design tokens. The wrapping element has to have a height constraint (`h-`, `max-h-`, or grid row sizing) or nothing scrolls \u2014 scroll-area can't infer a bound on its own. For body-level scrolling, leave the document to the browser.",import:"@gradeui/ui",aliases:["scroll area","scroll container","custom scrollbar","sidebar scroll","panel scroll","scroll view","scrollview","react native scrollview"],subcomponents:["ScrollBar"],composesWith:["Card (long card body)","AppShellNav (long sidebar)","Sheet (long modal body)","Table (sticky-header scrolling list)"],styleDefaults:{ScrollArea:"relative overflow-hidden",ScrollBar:"flex touch-none select-none transition-colors"},props:{type:{schema:z.enum(["auto","always","scroll","hover"]).optional(),design:"knob",description:"when the scrollbar shows"},scrollHideDelay:{schema:z.number().optional(),design:"knob",description:'ms before "scroll"/"hover" scrollbars fade'},dir:{schema:z.enum(["ltr","rtl"]).optional(),design:"plumbing"},className:{schema:z.string().optional(),design:"plumbing",description:"set a height/max-height here, otherwise nothing scrolls"},orientation:{schema:z.enum(["vertical","horizontal"]).optional(),design:"knob",default:"vertical"}}};var Nc={name:"Section",description:'THE page scaffold. A page is an ordered stack of Sections \u2014 every distinct band (hero, logos, features, pricing, testimonial, CTA, footer) gets its OWN Section so each is independently themeable. `Section` is the full-width band (scope + vertical rhythm); drop a `Container` inside it for a measure, or omit the Container for a full-bleed band. Reach for Section/Container instead of hand-rolling `<section className="py-20"><div className="max-w-7xl mx-auto px-6">`. The content inside is free \u2014 use the parts (SectionEyebrow/Title/Subtitle/Description/Actions/Media) for the common heading+copy+CTA+media shape, or drop any JSX. SectionMedia is a slot for any media (MediaSurface image, Carousel, VideoPlayer, embed, or a whole app UI). Don\'t use Section for app chrome \u2014 that\'s AppShell.',import:"@gradeui/ui",aliases:["section","band","hero section","page section","content section","marketing section","landing section","full bleed","container","max width wrapper","page band","section block"],subcomponents:["Container","SectionEyebrow","SectionTitle","SectionSubtitle","SectionDescription","SectionActions","SectionMedia"],composesWith:["Container","MediaSurface","Carousel","VideoPlayer","Button","Badge","Card","Grid","Stack"],styleDefaults:{Section:"w-full py-16 md:py-24",Container:"mx-auto w-full px-4 md:px-6 lg:px-8 max-w-7xl",SectionEyebrow:"inline-block text-xs font-medium uppercase tracking-wider text-muted-foreground",SectionTitle:"text-balance text-3xl font-semibold tracking-tight md:text-4xl",SectionSubtitle:"text-lg text-muted-foreground md:text-xl",SectionDescription:"leading-relaxed text-muted-foreground",SectionActions:"flex flex-wrap items-center gap-3",SectionMedia:"w-full"},variantDefaults:{pad:"lg"},props:{scope:{schema:z.enum(["default","inverse","brand","accent","muted","card"]).optional(),design:"knob",description:"colour SUBTHEME; applies the `scope-*` class so the whole band re-tones (bg/fg/card/muted/border) while action colours stay vivid. Unset = the page surface. See STUDIO-COLOR.md."},background:{schema:z.unknown().optional(),design:"plumbing",description:"visual band background slot: image / video / gradient / shader (drop a <BackgroundFill> here). Renders BEHIND the content; Section owns the relative/overflow/z plumbing. Works with `scope` (which re-tones the content tokens so text stays legible over the media)."},pad:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"vertical rhythm (responsive py); default lg. Section is ALWAYS full width \u2014 it never sets a max width."},as:{schema:z.enum(["section","header","footer","div"]).optional(),design:"knob",description:"semantic element; default section."},maxW:{schema:z.enum(["sm","md","lg","xl","prose","full"]).optional(),design:"knob",description:"centred max width + gutters; default lg. The MEASURE."},grid:{schema:z.boolean().optional(),design:"knob",description:"snap children to a 12-column grid (use `col-span-*` on children); default false."}}};var Ec={name:"SectionBlock",description:'The top-level container for a marketing page section \u2014 hero, feature row, pricing table, testimonial strip, FAQ section. Always reach for SectionBlock over a hand-rolled `<section>` so vertical rhythm, container width, and tonal background stay consistent across the page. Pair `background="gradient"` + `surface="glass"` inner Cards for the "modern marketing hero" pattern.',import:"@gradeui/ui",aliases:["section","section block","hero section","marketing section","page section","content section","container section","feature section","hero","page hero","marketing hero","glass section","gradient section","mesh hero"],composesWith:['Card (the most common child \u2014 especially with surface="glass")',"Grid (feature rows)","Stack (hero column)","MediaSurface (hero imagery)","Code (developer hero)","Carousel (logo strips)"],styleDefaults:{SectionBlock:"relative w-full py-16 md:py-24 bg-transparent"},variantDefaults:{padding:"lg",background:"transparent"},props:{padding:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"vertical rhythm. Defaults to `lg`."},background:{schema:z.enum(["transparent","muted","card","primary","gradient"]).optional(),design:"knob",description:"tonal direction of the section bg."},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the section is *made of*. Orthogonal to `background`. Use `glass` for hero sections that float over a generative backdrop / image / dot grid."},container:{schema:z.enum(["default","wide","narrow","full"]).optional(),design:"knob",description:"max-width of the inner content."},alignment:{schema:z.enum(["left","center","right"]).optional(),design:"knob",description:"header / CTA alignment."},titleSize:{schema:z.enum(["sm","md","lg","xl"]).optional(),design:"knob"},title:{schema:z.string().optional(),design:"plumbing"},subtitle:{schema:z.string().optional(),design:"content"},cta1:{schema:z.unknown().optional(),design:"plumbing",description:"string or `{ text, variant, href, onClick }` config"},backgroundImage:{schema:z.string().optional(),design:"content",description:"direct CSS background image url"},as:{schema:z.enum(["section","div","article"]).optional(),design:"knob",description:"semantic root"},fullBleed:{schema:z.boolean().optional(),design:"knob"}}};var Lc={name:"Select",description:'Single-choice from 3+ known options. Fewer than 3 \u2192 RadioGroup. Huge list with search \u2192 use a Combobox (not in DS yet). Multi-select \u2192 not supported by this primitive. In dense tool panels, set size="xs" on BOTH the trigger and the content so the closed control and open menu match.',import:"@gradeui/ui",aliases:["dropdown","combobox","picker","select","pop-up button","popup button","popup picker","picker view","rnpickerselect","react native picker","native picker"],subcomponents:["SelectTrigger","SelectValue","SelectContent","SelectItem","SelectGroup","SelectLabel","SelectSeparator"],composesWith:["Label (above SelectTrigger)","Form","Card"],styleDefaults:{SelectTrigger:"flex w-full items-center justify-between rounded-md border border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 h-10 px-3 py-2 text-sm",SelectScrollUpButton:"flex cursor-default items-center justify-center py-1",SelectScrollDownButton:"flex cursor-default items-center justify-center py-1",SelectContent:"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",SelectItem:"relative flex w-full cursor-default select-none items-center rounded-sm outline-none focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 py-1.5 pl-8 pr-2 text-sm",SelectSeparator:"-mx-1 my-1 h-px bg-muted"},props:{value:{schema:z.unknown().optional(),design:"plumbing"},onValueChange:{schema:z.unknown().optional(),design:"event"},defaultValue:{schema:z.unknown().optional(),design:"plumbing"},disabled:{schema:z.unknown().optional(),design:"plumbing",description:"Radix root"},size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density; wraps the clickable control, nest SelectValue inside"},placeholder:{schema:z.string().optional(),design:"content",description:"text when nothing is selected"}}};var Ac={name:"Separator",description:"Light divider between sibling blocks in a Card, list, or header. For section-level partition use extra spacing instead.",import:"@gradeui/ui",aliases:["divider","rule","hr","line","horizontal rule"],composesWith:["Card (between CardHeader/Content/Footer)","navigation menus","any vertical stacks"],styleDefaults:{Separator:"shrink-0 bg-border"},props:{orientation:{schema:z.enum(["horizontal","vertical"]).optional(),design:"knob",description:'default "horizontal"'},decorative:{schema:z.boolean().optional(),design:"knob",description:"hide from a11y tree",default:true},className:{schema:z.string().optional(),design:"plumbing"}}};var Dc={name:"ShaderPresetPicker",description:"Runtime gallery of shader presets \u2014 click to select. Use with ThreeScene as a controlled input so the user can pick a background shader. For a single preview card, use ShaderPresetPreview directly.",import:"@gradeui/ui",aliases:["shader picker","preset picker","shader gallery","preset gallery"],composesWith:["ShaderPresetPreview (internal)","ThreeScene (the typical downstream consumer)"],styleDefaults:{ShaderPresetPicker:"grid grid-cols-2 gap-3"},props:{value:{schema:z.string().optional(),design:"content",description:"currently selected preset id (controlled)"},onChange:{schema:z.unknown().optional(),design:"event",description:"called when the user clicks a preset card"},filterTags:{schema:z.string().optional(),design:"content",description:'only show presets matching at least one tag ("space" | "retro" | "motion" | "hero" | "background" \u2026)'},live:{schema:z.enum(["never","hover","always"]).optional(),design:"knob",description:"thumbnail render mode",default:"hover"},postPreset:{schema:z.string().optional(),design:"content",description:"shared post-FX preset applied to every thumbnail"},palette:{schema:z.unknown().optional(),design:"plumbing",description:"shared palette applied to every thumbnail"},columns:{schema:z.unknown().optional(),design:"plumbing",description:"grid columns at md+ breakpoint"}}};var Ic={name:"ShaderPresetPreview",description:"Thumbnail-sized preview card for a shader preset. Defaults to a cheap static placeholder until hovered, at which point the live WebGL render kicks in. Use directly when you want a single preset card; use ShaderPresetPicker for a filterable grid.",import:"@gradeui/ui",aliases:["shader preview","preset preview","shader card"],composesWith:["ThreeScene (internal)","ShaderPresetPicker (wraps this)"],styleDefaults:{ShaderPresetPreview:"group cursor-pointer flex flex-col gap-2"},props:{preset:{schema:z.string(),design:"content",description:"shader preset id from the registry"},live:{schema:z.enum(["never","hover","always"]).optional(),design:"knob",description:"when to run the live WebGL render",default:"hover"},postPreset:{schema:z.string().optional(),design:"content",description:"override the preset's default post-FX"},palette:{schema:z.unknown().optional(),design:"plumbing",description:"palette overrides for the preview"},aspect:{schema:z.enum(["video","square","portrait","wide"]).optional(),design:"knob",default:"video"},hideLabel:{schema:z.boolean().optional(),design:"knob",description:"hide the label strip under the preview",default:false},onClick:{schema:z.unknown().optional(),design:"event"}}};var Hc={name:"Sheet",description:"A panel that slides in from a screen edge \u2014 mobile nav drawers, side panels for editing a single record without leaving the list, filter trays on small viewports, Studio-style inspector panels. For a centered focus modal use Dialog. For a transient announcement use Toast (Sonner). For inline reveals use Collapsible.",import:"@gradeui/ui",aliases:["sheet","drawer","side panel","slide-in","nav drawer","mobile drawer","slide-over","action sheet","modal sheet","bottom sheet","side sheet","react native modal sheet","bottom-sheet","ios action sheet","inspector panel","glass sheet","frosted drawer"],subcomponents:["SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetDescription","SheetFooter","SheetClose"],composesWith:["Form controls (an inline edit sheet)","Button (trigger + close)","AppShellNav (mobile-only swap)","Code (changelog drawers)","MediaSurface (image-detail sheets)"],styleDefaults:{SheetOverlay:"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",SheetContent:"fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",SheetHeader:"flex flex-col space-y-2 text-center sm:text-left",SheetFooter:"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",SheetTitle:"text-lg font-semibold text-foreground",SheetDescription:"text-sm text-muted-foreground"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},modal:{schema:z.unknown().optional(),design:"plumbing"},asChild:{schema:z.boolean().optional(),design:"plumbing"},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob",default:"right"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the sheet panel is *made of*. `solid` is the default opaque `bg-background`. Reach for `glass` whenever the canvas behind the sheet (a layout in progress, a media gallery, a dashboard) should remain visible."},className:{schema:z.string().optional(),design:"plumbing",description:"usually set a width (right/left) or height (top/bottom)"},SheetTitle:{schema:z.unknown(),design:"plumbing"}}};var _c={name:"Sidebar",description:'Vertical app navigation. Drop inside `<AppShellNav placement="side">` for full-page layouts. Compound API \u2014 `<SidebarHeader>` for brand, `<SidebarContent>` for the scrollable body of `<SidebarSection>` + `<SidebarItem>` rows, `<SidebarFooter>` for user / settings chrome. For top nav reach for TopMenu; for command-palette style search reach for Command.',import:"@gradeui/ui",aliases:["sidebar","side menu","sidemenu","navigation sidebar","app sidebar","side nav","side nav rail","master pane","sidebarmenu","navigation rail","react native drawer"],subcomponents:["SidebarHeader","SidebarContent","SidebarFooter","SidebarSection","SidebarItem"],composesWith:["AppShell (inside AppShellNav)","Avatar (in Footer)","Tooltip (auto-wrapped on collapsed items)","Button (asChild for custom routing)"],styleDefaults:{Sidebar:"relative flex h-full flex-col bg-card text-card-foreground",SidebarHeader:"flex shrink-0 items-center border-b border-border",SidebarContent:"flex-1 overflow-y-auto overflow-x-hidden",SidebarFooter:"shrink-0 border-t border-border",SidebarSection:"px-[var(--gds-sidebar-section-px,0.5rem)] space-y-[var(--gds-sidebar-section-gap,0.125rem)]",SidebarItem:"group flex items-center gap-2.5 rounded-md transition-colors",SidebarTreeItem:"group flex w-full items-center gap-1.5 rounded-md py-1 text-sm font-medium transition-colors"},props:{collapsed:{schema:z.boolean().optional(),design:"knob",description:"controlled collapsed state (wire onCollapsedChange when set)"},defaultCollapsed:{schema:z.boolean().optional(),design:"knob",description:"uncontrolled initial value (default false)"},onCollapsedChange:{schema:z.unknown().optional(),design:"event"},collapsible:{schema:z.boolean().optional(),design:"knob",description:"show the affordance for the user to collapse (default true)"},variant:{schema:z.enum(["rail","panel"]).optional(),design:"knob",description:'outer chrome treatment. `rail` (default) is the classic nav rail with a single right-border + tracked width via `--gds-sidebar-width`; drops cleanly into `<AppShellNav placement="side">`. `panel` is a card-style floating sidebar with full border + rounded corners + parent-controlled width; use when the sidebar is one of several adjacent panes in a body row (e.g. Projects | Canvas | Settings). The compound children (Header/Content/Footer/Section/Item) are identical in both treatments.'},any:{schema:z.unknown().optional(),design:"plumbing",description:"brand / logo / org switcher; hides nothing when collapsed (centred)"},title:{schema:z.unknown().optional(),design:"plumbing",description:'group label, tracking-wide muted styling; hidden when sidebar is collapsed. CASE: static (non-collapsible) headers historically render UPPERCASE (Notion / Linear / Slack-style "GAMES", "FAVORITES"); collapsible headers render the authored case. Control it explicitly with titleTransform.'},titleTransform:{schema:z.enum(["uppercase","none"]).optional(),design:"knob",description:'title casing for BOTH header variants. "none" renders the authored case (sentence-case headers like a "Recents" list); "uppercase" forces the shouty group label. Unset = the per-variant legacy default above.'},icon:{schema:z.unknown().optional(),design:"plumbing",description:"optional icon beside the title"},trailing:{schema:z.unknown().optional(),design:"plumbing",description:`**action(s) on the right edge of the header** \u2014 the canonical "+" / "..." slot (Notion's "+ Add page" next to Pages, Linear's "+" next to Favorites, Slack's "+" next to Channels). Pointer events isolated so a Button here doesn't toggle collapse.`},defaultExpanded:{schema:z.boolean().optional(),design:"knob",description:"initial open state (default true)"},badge:{schema:z.unknown().optional(),design:"plumbing",description:"trailing count / label (hidden when collapsed)"},active:{schema:z.boolean().optional(),design:"knob",description:'current route; adds aria-current="page"'},href:{schema:z.string().optional(),design:"content",description:"renders as <a>; for routing use `asChild` with your link component"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"wrap a custom link (<Link href> from Next.js etc.) via Radix Slot"},asButton:{schema:z.boolean().optional(),design:"knob",description:"render as <button> for action rows (open dialog, log out)"},disabled:{schema:z.boolean().optional(),design:"knob"},collapsedLabel:{schema:z.unknown().optional(),design:"plumbing",description:"tooltip override when sidebar is collapsed (defaults to children text)"},size:{schema:z.enum(["sm","md"]).optional(),design:"knob",description:"row size. `md` (default) is the standard `text-sm font-medium` nav row; `sm` is `text-xs` + lighter weight + tighter padding for visually subordinate rows (nested screens under a project, sub-pages under a section). Active state still wins on color + weight so the current row pops at either size."},description:{schema:z.unknown().optional(),design:"plumbing",description:"secondary line beneath the label (metadata like 'Edited 2m ago', '12 items', a brief description). Row layout adapts: label + description stacked vertically; icon vertically-centered against the stack; badge stays on trailing edge. Hidden when sidebar collapsed."}}};var Fc={name:"Skeleton",description:'Loading placeholder for content whose shape you know. Set width/height via className to mimic the real content (e.g. "h-4 w-32"). Not a spinner \u2014 use it where the real thing will drop in.',import:"@gradeui/ui",aliases:["placeholder","shimmer","loader","loading state","redacted","redacted placeholder","shimmer placeholder","content placeholder","lottie placeholder"],composesWith:["Card","Avatar (inside a Skeleton for avatar loading)","any layout"],styleDefaults:{Skeleton:"animate-pulse rounded-md bg-muted"},props:{className:{schema:z.string().optional(),design:"plumbing",description:"required in practice; supply width/height utilities"}}};var Oc={name:"Slider",description:'A continuous-ish numeric pick \u2014 volume, opacity, font size, price-range filters. Use a single-thumb slider for one value, two-thumb for a range. For a small set of discrete options (1-5 stars, sm/md/lg) prefer ToggleGroup. For free-text numeric entry use an Input type="number".',import:"@gradeui/ui",aliases:["slider","range slider","range input","volume","opacity slider","scrub","drag value","slider control","value slider","react native slider"],composesWith:["Label (mandatory above)","Row (label + current value display)","Card (settings rows)"],styleDefaults:{Slider:"relative w-full grow overflow-hidden rounded-full"},props:{value:{schema:z.number().optional(),design:"knob",description:"controlled value; ALWAYS an array even for a single-thumb slider (`[50]`)"},defaultValue:{schema:z.number().optional(),design:"knob",description:"uncontrolled initial; `[20, 80]` for a two-thumb range"},onValueChange:{schema:z.unknown().optional(),design:"event"},min:{schema:z.number().optional(),design:"knob"},max:{schema:z.number().optional(),design:"knob"},step:{schema:z.number().optional(),design:"knob"},disabled:{schema:z.boolean().optional(),design:"knob"},orientation:{schema:z.enum(["horizontal","vertical"]).optional(),design:"knob",default:"horizontal"},dir:{schema:z.enum(["ltr","rtl"]).optional(),design:"plumbing"},inverted:{schema:z.boolean().optional(),design:"knob",description:"flip the visual direction"},name:{schema:z.string().optional(),design:"content",description:"form name when posting natively"}}};var zc={name:"Sortable",description:"Drag-to-reorder lists, kanban-column reordering, sortable shelves, tab strips the user can rearrange. Pairs with any layout primitive \u2014 Stack for vertical lists, Row for horizontal strips, Grid for 2D card walls. For cross-container drag (drag a card from one column to another) hand-roll DndContext at the page level \u2014 Sortable v1 covers single-list reorder; Sortable.Group for cross-container is a planned follow-up. Reach for raw `@dnd-kit/core` if you need custom collision detection, drag overlays with arbitrary chrome, or non-list use cases (kanban swimlanes, draggable canvas nodes).",import:"@gradeui/ui",aliases:["sortable","reorder","drag and drop","dnd","draggable list","sortable list","kanban","drag to reorder","drag-drop","dragdroplist","drag handle","react native draggable flatlist"],subcomponents:["Sortable.Item","Sortable.Handle"],composesWith:["Stack (vertical lists)","Row (horizontal strips)","Grid (2D card walls)","Card (typical item content)","Button (as Sortable.Handle asChild)"],styleDefaults:{SortableHandle:"cursor-grab touch-none select-none"},props:{values:{schema:z.unknown(),design:"plumbing",description:"ordered list of unique ids; the source of truth for the order"},onReorder:{schema:z.unknown().optional(),design:"event",description:"fires with the new order after a drag that changed it"},strategy:{schema:z.enum(["vertical","horizontal","grid"]).optional(),design:"knob",description:"match the layout your items render in",default:"vertical"},disabled:{schema:z.boolean().optional(),design:"knob",description:"disable drag on every item"},Sortable:{schema:z.unknown(),design:"plumbing",description:"must match one entry in the parent `values` array (identity, not React key)"}}};var Vc={name:"Stack",description:"Default top-level layout inside the main slot when composing two or more stacked regions (hero + content + footer, auth card + subtext, etc.). Prefer Stack over hand-rolled `flex flex-col gap-*` so the vertical rhythm is editable through the settings panel.",import:"@gradeui/ui",aliases:["stack","vstack","vertical","column","vertical layout","v-stack","vertical stack","lazyvstack"],composesWith:["Section","Row","Split","Hero","any content component"],props:{gap:{schema:z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"vertical gap between children",default:"md"},align:{schema:z.enum(["start","center","end","stretch"]).optional(),design:"knob",description:"cross-axis (horizontal) alignment of children",default:"stretch"},justify:{schema:z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:'main-axis (vertical) distribution. Reach for this on absolute-positioned overlays (`justify="end"` pins children to the bottom) and split footers (`justify="between"`).',default:"start"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot, so `<Stack asChild><section>\u2026</section></Stack>` stamps Stack's classes onto the `<section>` rather than nesting a wrapper div",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var Bc={name:"Swatch",description:'Showing a colour as a small chip \u2014 brand-pop strips, palette / accent pickers, theme previews, token galleries, "pick a colour" rows. Reach for `token` to bind to a live theme variable; `color` for raw values. A transparency checkerboard sits behind the fill so semi-transparent values read honestly.',import:"@gradeui/ui",aliases:["colour swatch","color swatch","colour chip","color chip","palette swatch","token swatch","brand pop","accent swatch","colour tile","color tile","paint chip","react native colour swatch"],subcomponents:["SwatchGroup"],composesWith:["Row (strip of swatches)","Stack","Grid (palette wall)","Field (as a colour-picker trailing slot)","Card (in a theme-preview)","RadioGroup (selectable accent set)","Label"],styleDefaults:{Swatch:"relative inline-block shrink-0 overflow-hidden shadow-elevation-1 size-8 rounded-[var(--radius)]",SwatchGroup:"inline-flex flex-wrap items-center"},variantDefaults:{size:"md",shape:"rounded"},props:{color:{schema:z.string().optional(),design:"content",description:"any raw CSS colour (`#1f6feb`, `oklch(...)`, `rgb(...)`, or `var(--x)`). Takes precedence over `token`. Use for one-off or external colours."},token:{schema:z.string().optional(),design:"content",description:'a Grade colour token NAME with no `--` and no `oklch()` wrap; resolved internally to `oklch(var(--<token>))`. THE design-system path \u2014 e.g. `token="brand-3"`, `token="primary"`, `token="chart-2"`. Re-voices live when the theme changes.'},type:{schema:z.enum(["solid","gradient","image"]).optional(),design:"knob",description:"fill kind; default solid (or inferred from `image` / `gradient`). Determines what the chip renders in place."},gradient:{schema:z.string().optional(),design:"content",description:'CSS gradient for `type="gradient"`, e.g. `linear-gradient(135deg,#6366f1,#ec4899)`.'},image:{schema:z.string().optional(),design:"content",description:'image URL for `type="image"`; rendered cover-fit behind the chip.'},size:{schema:z.enum(["2xs","xs","sm","md","lg","xl"]).optional(),design:"knob",description:"t-shirt scale, 16px \u2192 56px; default md (32px). 2xs (16px) suits dense colour lists. Prefer over h-*/w-* utilities."},shape:{schema:z.enum(["square","rounded","circle"]).optional(),design:"knob",description:"default rounded (rides `--radius`); circle for dot pickers; square for a hard tile."},selected:{schema:z.boolean().optional(),design:"knob",description:"draws the shared selection ring (`--selected`). For palette / accent pickers."},onSelect:{schema:z.unknown().optional(),design:"event",description:"makes the swatch a pickable <button> (adds aria-pressed, focus ring, hover lift). Omit for a static display chip."},onColorChange:{schema:z.unknown().optional(),design:"event",description:'makes the swatch an editable colour well: hosts a native `<input type="color">` (the OS picker) behind the DS chip and fires with the new `#rrggbb`. Presentation stays the chip, interaction stays native. Use for inspector / control-panel colour fields instead of styling a raw colour input. Takes precedence over `onSelect`.'},label:{schema:z.unknown().optional(),design:"plumbing",description:"caption rendered beneath the chip; also becomes the accessible name + tooltip."},layout:{schema:z.enum(["row","stack"]).optional(),design:"knob",description:'`row` (default) spaces chips out; `stack` overlaps them into a coin-stack (the theme-picker / "key colours" treatment, where each chip\'s ring reads as the separating edge).'},gap:{schema:z.enum(["xs","sm","md","lg"]).optional(),design:"knob",description:"spacing between chips in `row` layout; default sm."}}};var Gc={name:"Switch",description:'Instant on/off setting ("Enable notifications", "Dark mode"). Commits on toggle \u2014 no submit button needed. For selecting-from-a-list use Checkbox. For a settings row (label + description on the left, Switch on the right) use Field layout="setting". For a prominent on/off presented as a whole selectable card, use SwitchCard.',import:"@gradeui/ui",aliases:["toggle","switch","on/off switch","ios toggle","toggle switch","switch control","react native switch"],composesWith:["Label (via htmlFor)",'Field (layout="setting" settings row)',"SwitchCard (whole-card toggle)","Card (settings rows)"],styleDefaults:{Switch:"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-6 w-11"},variantDefaults:{size:"default"},props:{checked:{schema:z.boolean().optional(),design:"knob"},onCheckedChange:{schema:z.unknown().optional(),design:"event"},defaultChecked:{schema:z.boolean().optional(),design:"knob"},disabled:{schema:z.boolean().optional(),design:"knob"},id:{schema:z.string().optional(),design:"plumbing"}}};var $c={name:"SwitchCard",description:'A prominent on/off setting presented as a whole selectable card. The whole card is the switch, so the toggled state lives on the card surface. Standalone. For a row of compact settings (label left, small Switch right) use Field layout="setting" instead \u2014 SwitchCard is for the heavier, card-sized toggle.',import:"@gradeui/ui",aliases:["switch card","toggle card","setting card","feature toggle card"],composesWith:["Badge (in aside)","Stack (stacking several)"],props:{checked:{schema:z.unknown().optional(),design:"plumbing",description:"standard switch state"},label:{schema:z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:z.boolean().optional(),design:"knob",description:"hide the switch glyph; state shown by the card border + background"},indicatorPosition:{schema:z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"arbitrary static content instead of label/description"}}};var Uc={name:"Table",description:"Structured tabular data \u2014 rows \xD7 columns with alignment requirements. NOT a layout grid \u2014 for that use div+Tailwind grid utilities. Keep to <100 rows; larger datasets need virtualisation (not in DS).",import:"@gradeui/ui",aliases:["table","table view","data table","datatable","grid view","data grid","rows and columns"],subcomponents:["TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],composesWith:["Card (wrap the table)","Badge (inside TableCell for status)","Checkbox (row selection)","Button (row actions)"],styleDefaults:{Table:"w-full caption-bottom text-sm",TableHeader:"[&_tr]:border-b",TableBody:"[&_tr:last-child]:border-0",TableFooter:"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",TableRow:"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",TableHead:"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",TableCell:"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",TableCaption:"mt-4 text-sm text-muted-foreground"},props:{Each:{schema:z.unknown(),design:"plumbing"},No:{schema:z.unknown(),design:"plumbing",description:"styling follows the active theme tokens"}}};var jc={name:"Tabs",description:'A small set of peer views within one surface (2\u20135 tabs). For primary nav use Side Menu/routing. For filters use a filter control, not tabs. Pick `variant="pill"` for app chrome (settings panels, in-card tab strips). Pick `variant="underlined"` for marketing/docs pages and browser-tab-style treatments.',import:"@gradeui/ui",aliases:["tabs","tab strip","tab bar","tab view","tabbed interface","pageviewcontroller","react native tab view","underlined tabs","page tabs","segment switcher","simple tabs"],subcomponents:["TabsList","TabsTrigger","TabsContent"],composesWith:["Card (tabs inside a card body)","Dialog","TooltipProvider (required for tooltip prop)"],styleDefaults:{TabsList:"inline-flex items-center text-muted-foreground justify-center rounded-lg bg-muted",TabsContent:"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"},props:{defaultValue:{schema:z.unknown().optional(),design:"plumbing"},value:{schema:z.unknown().optional(),design:"plumbing"},onValueChange:{schema:z.unknown().optional(),design:"event"},orientation:{schema:z.unknown().optional(),design:"plumbing"},size:{schema:z.enum(["sm","md","lg, default md"]).optional(),design:"knob",description:"t-shirt scale aligned with Button/ToggleGroup heights; cascades to every TabsTrigger via context so set it once on the list"},variant:{schema:z.enum(["pill","underlined, default pill"]).optional(),design:"knob",description:"`pill` is the shadcn chip-on-muted look; `underlined` is the minimal text + bottom-border treatment (formerly the separate SimpleTabs component, collapsed into Tabs in May 2026). Cascades to triggers."},tooltip:{schema:z.string().optional(),design:"content",description:"when set, wraps the trigger in the design-system Tooltip and auto-applies aria-label (useful for icon-only triggers); requires a TooltipProvider somewhere above the tabs"}}};var Kc={name:"Textarea",description:'Multi-line text entry (descriptions, messages, comments). Pair with a Label. Single-line input \u2192 use Input instead. Use size="sm"/"xs" in dense tool panels.',import:"@gradeui/ui",aliases:["text area","multiline","comment box","message field","text editor","multi-line text","multiline input","multiline text field","comments box","multiline textinput"],composesWith:["Label","Form","Card (in CardContent)"],styleDefaults:{Textarea:"flex w-full rounded-md border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px] px-3 py-2 text-sm"},variantDefaults:{size:"default"},props:{size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density, mirrors Input. default = min-h-80 / text-sm; sm and xs shrink the min-height + padding for dense panels."}}};var qc={name:"ThreeScene",description:"WebGL primitive for shader backgrounds, generative visuals, and bespoke three.js scenes. Three authoring paths, in order of preference \u2014 (1) pick a `preset` id; (2) if nothing in the registry fits, write a `fragmentShader` against the fixed uniform contract; (3) only as a last resort, pass a full `createScene` factory. For looping video, use VideoPlayer; for interactive animations, use RivePlayer.",import:"@gradeui/ui",aliases:["three","threejs","webgl","shader","scene","3d","generative","hero background","fragment shader","glsl"],composesWith:["MediaSurface (internal)","foreground content stacked above with `position: absolute/relative z-10`"],styleDefaults:{ThreeScene:"absolute inset-0 flex items-end justify-end p-2"},props:{preset:{schema:z.enum(["mesh","waves","space","plasma","voronoi","synthwave"]).optional(),design:"knob",description:"shader preset id from the registry"},fragmentShader:{schema:z.string().optional(),design:"content",description:"user-authored GLSL body; takes precedence over preset"},onShaderError:{schema:z.unknown().optional(),design:"event",description:'fires on compile failure; scene falls back to `preset="space"`'},postPreset:{schema:z.enum(["none","vhs","cinematic","synthwave","crt"]).optional(),design:"knob",description:"post-processing pass",default:"vhs"},palette:{schema:z.unknown().optional(),design:"plumbing",description:"any CSS-legal colour string per slot. Re-tints automatically when the theme changes. Unset slots fall back to defaults."},createScene:{schema:z.unknown().optional(),design:"plumbing",description:"custom full scene factory; takes precedence over preset AND fragmentShader"},controls:{schema:z.boolean().optional(),design:"knob",description:"play/pause overlay",default:false},autoPlay:{schema:z.boolean().optional(),design:"knob",description:"respects reduced-motion",default:true},pauseOffscreen:{schema:z.boolean().optional(),design:"knob",description:"big win for WebGL battery life",default:true},aspect:{schema:z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"video"},maxDpr:{schema:z.number().optional(),design:"knob",description:"lower for thumbnails / low-end devices"},radius:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",default:"lg"}}};var Yc={name:"Toast",description:'Transient, non-blocking feedback that confirms or warns about an action \u2014 "Saved", "Failed to upload", "Copied to clipboard", "Invitation sent". For permanent inline messages reach for Callout. For confirmations that block until acknowledged use Dialog. Mount <Toaster /> ONCE at the root of the app; everywhere else, call the `toast` helper.',import:"@gradeui/ui",aliases:["toast","toaster","sonner","notification","snackbar","alert toast","transient alert","transient banner","banner notification","toastandroid"],composesWith:["App root layout (single <Toaster /> mount)","Form submit handlers (success/error toasts)","Async actions"],props:{position:{schema:z.enum(["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"]).optional(),design:"knob",default:"bottom-right"},theme:{schema:z.enum(["light","dark","system"]).optional(),design:"knob"},richColors:{schema:z.boolean().optional(),design:"knob",description:"colored variants for success/error/warning/info"},expand:{schema:z.boolean().optional(),design:"knob",description:"keep multiple toasts visually separated rather than stacked"},visibleToasts:{schema:z.number().optional(),design:"knob",description:"max concurrent toasts on screen (default 3)"},duration:{schema:z.number().optional(),design:"knob",description:"default ms before auto-dismiss"}}};var Zc={name:"Toggle",description:`A standalone on/off button \u2014 Bold/Italic in a toolbar, "Show grid" in a header, single binary toggle that doesn't belong inside a Switch row. For two-or-more mutually-exclusive options use ToggleGroup. For a labeled settings switch ("Active: on/off") use Switch.`,import:"@gradeui/ui",aliases:["toggle","toggle button","press button","bold button","italic button"],composesWith:["Tooltip (wrap an icon-only Toggle)","Row","TabsList (sibling)"],styleDefaults:{Toggle:"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-transparent h-9 px-2 min-w-9"},variantDefaults:{variant:"default",size:"default"},props:{variant:{schema:z.enum(["default","outline"]).optional(),design:"knob",description:"outline adds a border, default is borderless and ghost-like"},size:{schema:z.enum(["default","sm","lg"]).optional(),design:"knob"},pressed:{schema:z.boolean().optional(),design:"knob",description:"controlled pressed state"},defaultPressed:{schema:z.boolean().optional(),design:"knob",description:"uncontrolled initial state"},onPressedChange:{schema:z.unknown().optional(),design:"event"},disabled:{schema:z.boolean().optional(),design:"knob"},children:{schema:z.unknown(),design:"plumbing",description:"usually an icon or short label"}}};var Xc={name:"ToggleGroup",description:'A small set of mutually-exclusive (`type="single"`) or independent (`type="multiple"`) binary options that live side-by-side as a segmented control \u2014 viewport size picker (Mobile/Tablet/Desktop), text alignment, view density. Reads identically to a TabsList of the same size; reach for ToggleGroup when each option emits a value (like a form input) rather than swapping panels. Use Tabs for panel switching, Toggle for a single on/off.',import:"@gradeui/ui",aliases:["toggle group","segmented control","segmented buttons","button group","pill group","view selector","segmented picker","segmentedcontrolios","segmented buttons group","rn segmented control"],subcomponents:["ToggleGroupItem"],composesWith:["Card (header controls)","Row","AppShellHeader chrome","settings panels"],styleDefaults:{ToggleGroup:"flex items-center justify-center gap-1"},props:{type:{schema:z.enum(["single","multiple"]),design:"knob",description:"single picks one, multiple picks any number"},value:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"controlled; matches `type` (string for single, string[] for multiple)"},defaultValue:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"uncontrolled initial"},onValueChange:{schema:z.unknown().optional(),design:"event"},size:{schema:z.enum(["2xs","xs","sm","md","lg, default md"]).optional(),design:"knob",description:"cascades to every ToggleGroupItem via context, matches Tabs/Button heights; 2xs/xs are the dense tool-panel sizes (2xs also drops text to text-2xs and icons to size-3 so labelled items read at panel density)"},variant:{schema:z.enum(["default","outline","segmented"]).optional(),design:"knob",description:"segmented sits the items in a muted track with the active item as a soft raised pill, so it reads like a TabsList; reach for it in dense property panels (e.g. a Row/Stack direction toggle)"},tooltip:{schema:z.unknown().optional(),design:"plumbing",description:"when set, wraps the item in a Tooltip; required for icon-only items where the visible chrome doesn't carry a label"},tooltipSide:{schema:z.enum(["top","right","bottom",'left", default "top']).optional(),design:"knob",description:"side the tooltip renders on"},tooltipDelay:{schema:z.number().optional(),design:"knob",description:"per-item delay override; falls back to the upstream TooltipProvider's delayDuration"}}};var Jc={name:"Toolbar",description:`ANY three-region chrome bar \u2014 the leading/center/trailing pattern Apple HIG
|
|
79
|
+
(users to @-mention, email recipients, search-as-you-type API results).`,import:"@gradeui/ui",composesWith:["Popover","Command","Badge","Checkbox-style row indicator","Separator"],styleDefaults:{MultiSelect:"mr-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary"},props:{options:{schema:z.unknown(),design:"plumbing"},value:{schema:z.string().optional(),design:"content",description:"controlled selection"},defaultValue:{schema:z.string().optional(),design:"content",description:"uncontrolled initial selection"},onValueChange:{schema:z.unknown().optional(),design:"event"},placeholder:{schema:z.string().optional(),design:"content",default:"Select\u2026"},searchPlaceholder:{schema:z.string().optional(),design:"content",default:"Search\u2026"},emptyMessage:{schema:z.string().optional(),design:"content",default:"Nothing matches."},maxCount:{schema:z.number().optional(),design:"knob",description:'badges shown on the trigger before collapsing to "+N more"'},searchable:{schema:z.boolean().optional(),design:"knob",description:"hide for short option lists",default:true},badgeDismissible:{schema:z.boolean().optional(),design:"knob",description:"show \xD7 on each selected badge",default:true},disabled:{schema:z.boolean().optional(),design:"knob"},modalPopover:{schema:z.boolean().optional(),design:"knob",description:"Popover modal mode",default:false},className:{schema:z.string().optional(),design:"plumbing"}}};var cl={name:"Popover",description:'A floating panel anchored to a trigger that contains interactive content \u2014 date pickers, color pickers, filter pickers, "more info" panels, inline forms. Differs from Tooltip (hover-only, no focusable content) and Dialog (modal, blocks the page). DatePicker, DateRangePicker, and the Combobox pattern all compose Popover internally.',import:"@gradeui/ui",aliases:["popover","dropdown panel","floating panel","inline editor","attached panel","filter pop","popover view","popoverpresentation","attached popover","glass popover","frosted popover","inspector popover"],subcomponents:["PopoverTrigger","PopoverContent","PopoverAnchor"],composesWith:["Button (as trigger)","Calendar (date picker)","Command (combobox)","Form controls (inline edit popover)","Code (code-detail popovers)"],styleDefaults:{PopoverContent:"z-50 w-72 rounded-md border p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},modal:{schema:z.unknown().optional(),design:"plumbing"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"usually a Button"},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob"},sideOffset:{schema:z.unknown().optional(),design:"plumbing"},alignOffset:{schema:z.unknown().optional(),design:"plumbing"},collisionPadding:{schema:z.unknown().optional(),design:"plumbing"},className:{schema:z.unknown().optional(),design:"plumbing"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the popover surface is *made of*. `solid` is the default opaque `bg-popover`. `translucent` is the Apple HIG menu-sheet feel. `glass` for floating panels over rich canvases (Studio inspector, image-tool palette)."}}};var dl={name:"Progress",description:"Determinate progress \u2014 file uploads, multi-step forms, quota meters. Indeterminate state \u2192 use Skeleton or animated Loader icon.",import:"@gradeui/ui",aliases:["progress","progress view","progress indicator","progress bar","determinate progress","loading bar","completion bar"],composesWith:["Card (as a section)","Badge (showing % next to it)","Label (describing what's loading)"],styleDefaults:{Progress:"relative h-4 w-full overflow-hidden rounded-full bg-secondary"},props:{value:{schema:z.number().optional(),design:"knob",description:"percent complete"},max:{schema:z.number().optional(),design:"knob"},className:{schema:z.string().optional(),design:"plumbing"}}};var pl={name:"PropertyList",description:'Read-only display of the properties of a SINGLE item \u2014 detail panels, inspectors, "about this" cards, order/record summaries. It is a Table row transposed (schema vertical, one record). The value side is a polymorphic slot, so the same renderers that fill a Table cell (text, Badge, tag group, Avatar stack, date, link) drop straight into a row. For an EDITABLE field (label + control) use Field instead; a panel that flips between read and edit swaps a PropertyList for a stack of Fields.',import:"@gradeui/ui",aliases:["property list","properties","property panel","description list","definition list","detail list","key value","key-value","data list","field list","attributes","metadata list","record summary","detail panel","inspector fields","spec list"],composesWith:["Badge","Avatar","Table","Field","Separator","Card"],styleDefaults:{PropertyListRoot:"flex min-w-0 flex-col",PropertyListRow:"grid"},props:{layout:{schema:z.enum(["row","stack"]).optional(),design:"knob",description:"row (default): label column beside value; stack: label above value for narrow panels"},density:{schema:z.enum(["compact","default","relaxed"]).optional(),design:"knob",description:"row rhythm"},align:{schema:z.enum(["start","center"]).optional(),design:"knob",description:"default vertical alignment of label vs value; use start when values wrap (tag groups, multi-line)"},divider:{schema:z.boolean().optional(),design:"knob",description:"hairline rule between rows"},labelWidth:{schema:z.string().optional(),design:"content",description:"override the label column width (any CSS length); sets --gds-property-list-label-width"},children:{schema:z.unknown(),design:"plumbing"}}};var ul={name:"RadioCard",description:"Single-select where each option is a whole selectable card (shipping options, plan picker, onboarding choices). The whole card is the control, so focus and the checked state live on the card surface and the entire card is clickable. MUST sit inside a RadioGroup (keeps roving focus + single-select). Static content only \u2014 never nest an interactive control (Slider/Input/Button/link) inside. For a plain radio + label row use Field instead.",import:"@gradeui/ui",aliases:["radio card","selectable card","option card","plan picker","choice card","pricing tier","segmented choice card"],composesWith:["RadioGroup (required parent)","Badge (in aside)","MediaSurface (custom children)"],props:{value:{schema:z.string(),design:"content",description:"the radio value"},label:{schema:z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:z.boolean().optional(),design:"knob",description:"hide the dot; selection shown by the card border + background"},indicatorPosition:{schema:z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"arbitrary static content (image, custom layout) instead of label/description"}}};var ml={name:"RadioGroup",description:"A small set of mutually-exclusive options where the user needs to SEE all of them at once \u2014 pricing tiers (3-4 options), shipping speed, payment method radio cards. When each option should be a whole clickable card (label + description, selected state on the card), use RadioCard inside the RadioGroup instead of a Card with a radio in the corner. For a plain label + description row, wrap RadioGroupItem in Field. For 5+ options use Select. For a segmented control as part of a toolbar use ToggleGroup. For yes/no use Switch.",import:"@gradeui/ui",aliases:["radio group","radio buttons","single-choice","pricing options","payment method","radio buttons","radio control","single-select"],subcomponents:["RadioGroupItem"],composesWith:["Label (paired with each item via htmlFor)","Field (label + description row)","RadioCard (whole-card selectable option)","Stack (vertical list)"],styleDefaults:{RadioGroup:"grid gap-2",RadioGroupItem:"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"},props:{value:{schema:z.string().optional(),design:"content",description:"controlled selection"},defaultValue:{schema:z.string().optional(),design:"content",description:"uncontrolled initial"},onValueChange:{schema:z.unknown().optional(),design:"event"},disabled:{schema:z.boolean().optional(),design:"knob"},orientation:{schema:z.enum(["horizontal","vertical"]).optional(),design:"knob",default:"vertical"},name:{schema:z.string().optional(),design:"content",description:"form name when posting natively"},id:{schema:z.string().optional(),design:"plumbing",description:"pair with a <Label htmlFor> for click-on-label"}}};var gl={name:"Resizable",description:`A multi-pane layout where the user wants to drag the divider \u2014 Slack/Mail-style list+detail, IDE editor+terminal, side-by-side compare view. Static layouts shouldn't use this \u2014 reach for AppShell with nav="three-pane" (fixed widths) or Grid (responsive ladder). Built on react-resizable-panels under the hood.`,import:"@gradeui/ui",aliases:["resizable","splitter","split pane","drag divider","adjustable panels","resizer","split view","draggable divider","split pane resizer","ns split view"],subcomponents:["ResizablePanelGroup","ResizablePanel","ResizableHandle"],composesWith:["AppShellMain (host the splitter inside main)","ScrollArea (each panel's content)","Card"],styleDefaults:{ResizablePanelGroup:"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",ResizableHandle:"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90"},props:{direction:{schema:z.enum(["horizontal","vertical"]).optional(),design:"knob",description:"required; sets the axis the user drags along"},autoSaveId:{schema:z.string().optional(),design:"content",description:"persists user-adjusted sizes to localStorage under this id"},onLayout:{schema:z.unknown().optional(),design:"event"},defaultSize:{schema:z.number().optional(),design:"knob",description:"percent of group (0-100); siblings should sum to ~100"},minSize:{schema:z.unknown().optional(),design:"plumbing"},maxSize:{schema:z.number().optional(),design:"knob",description:"percent bounds"},collapsible:{schema:z.boolean().optional(),design:"knob",description:"allow this panel to collapse to zero"},collapsedSize:{schema:z.unknown().optional(),design:"plumbing"},onCollapse:{schema:z.unknown().optional(),design:"event"},onExpand:{schema:z.unknown().optional(),design:"event",description:"collapse behaviour controls"},withHandle:{schema:z.boolean().optional(),design:"knob",description:"show a visible drag affordance (default just a hit-zone)"}}};var fl={name:"RivePlayer",description:"Rive runtime wrapped in the shared media surface. Reach for Rive when you need interactive state-machine animations driven by scroll/hover/input. For non-interactive looping video, use VideoPlayer; for shader-driven backgrounds, use ThreeScene.",import:"@gradeui/ui",aliases:["rive","riv","animation","animated","lottie"],composesWith:["MediaSurface (internal)","Card","any container"],styleDefaults:{RiveInner:"absolute inset-0 flex items-end justify-end p-2"},props:{src:{schema:z.string(),design:"content",description:"URL or path to the .riv file"},stateMachines:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"state machine(s) to run"},artboard:{schema:z.string().optional(),design:"content",description:"artboard name; omit to use default"},controls:{schema:z.boolean().optional(),design:"knob",description:"viewer mode by default; set true for play/pause overlay",default:false},autoPlay:{schema:z.boolean().optional(),design:"knob",description:"respects reduced-motion",default:true},loop:{schema:z.boolean().optional(),design:"knob",default:true},pauseOffscreen:{schema:z.boolean().optional(),design:"knob",default:true},fit:{schema:z.enum(["contain","cover","fill","fitWidth","fitHeight","none"]).optional(),design:"knob",default:"contain"},stateMachineInputs:{schema:z.unknown().optional(),design:"plumbing"},aspect:{schema:z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"square"},radius:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",default:"lg"},poster:{schema:z.string().optional(),design:"content",description:"image shown while the runtime loads"}}};var hl={name:"Row",description:"Horizontal composition \u2014 button groups, inline form rows, logo + nav rows, anything on one line. Reach for Row instead of `flex items-center gap-*` so the alignment and spacing are editable through the settings panel. For two-pane layouts with an explicit ratio (sidebar + content, 1/3 + 2/3) use Split instead \u2014 Row evenly flows whatever children it holds.",import:"@gradeui/ui",aliases:["row","hstack","horizontal","inline","horizontal layout","hstack","h-stack","horizontal stack","lazyhstack"],composesWith:["Button","Input","NavItem","Stack (can wrap a Row)","any content component"],styleDefaults:{Row:"gds-row flex flex-row gap-4 items-center justify-start"},variantDefaults:{gap:"md",align:"center",justify:"start"},props:{gap:{schema:z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"gap between children",default:"md"},align:{schema:z.enum(["start","center","end","stretch","baseline"]).optional(),design:"knob",description:"cross-axis (vertical) alignment",default:"center"},justify:{schema:z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:"main-axis distribution",default:"start"},wrap:{schema:z.boolean().optional(),design:"knob",description:"allow children to wrap onto additional lines when they overflow",default:false},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var bl={name:"ScreenAnimator",description:'Wrap ANY screen or section in a directed camera \u2014 a "live demo',import:"@gradeui/ui",aliases:["screen animator","camera","camera tour","director","demo","product demo","zoom pan","spotlight","ken burns","presenter"],composesWith:["AppShell","ThreeScene","Card","Grid","the whole component set (it wraps a screen)"],styleDefaults:{ScreenAnimator:"gds-screen-animator"},props:{shots:{schema:z.unknown().optional(),design:"plumbing",description:"the tour. Each"}}};var vl={name:"ScrollArea",description:"Bounded content that needs custom scroll chrome \u2014 sidebars with long item lists, chat transcripts, table panels inside a dashboard, anywhere the OS scrollbar would feel out of place against the design tokens. The wrapping element has to have a height constraint (`h-`, `max-h-`, or grid row sizing) or nothing scrolls \u2014 scroll-area can't infer a bound on its own. For body-level scrolling, leave the document to the browser.",import:"@gradeui/ui",aliases:["scroll area","scroll container","custom scrollbar","sidebar scroll","panel scroll","scroll view","scrollview","react native scrollview"],subcomponents:["ScrollBar"],composesWith:["Card (long card body)","AppShellNav (long sidebar)","Sheet (long modal body)","Table (sticky-header scrolling list)"],styleDefaults:{ScrollArea:"relative overflow-hidden",ScrollBar:"flex touch-none select-none transition-colors"},props:{type:{schema:z.enum(["auto","always","scroll","hover"]).optional(),design:"knob",description:"when the scrollbar shows"},scrollHideDelay:{schema:z.number().optional(),design:"knob",description:'ms before "scroll"/"hover" scrollbars fade'},dir:{schema:z.enum(["ltr","rtl"]).optional(),design:"plumbing"},className:{schema:z.string().optional(),design:"plumbing",description:"set a height/max-height here, otherwise nothing scrolls"},orientation:{schema:z.enum(["vertical","horizontal"]).optional(),design:"knob",default:"vertical"}}};var yl={name:"Section",description:'THE page scaffold. A page is an ordered stack of Sections \u2014 every distinct band (hero, logos, features, pricing, testimonial, CTA, footer) gets its OWN Section so each is independently themeable. `Section` is the full-width band (scope + vertical rhythm); drop a `Container` inside it for a measure, or omit the Container for a full-bleed band. Reach for Section/Container instead of hand-rolling `<section className="py-20"><div className="max-w-7xl mx-auto px-6">`. The content inside is free \u2014 use the parts (SectionEyebrow/Title/Subtitle/Description/Actions/Media) for the common heading+copy+CTA+media shape, or drop any JSX. SectionMedia is a slot for any media (MediaSurface image, Carousel, VideoPlayer, embed, or a whole app UI). Don\'t use Section for app chrome \u2014 that\'s AppShell.',import:"@gradeui/ui",aliases:["section","band","hero section","page section","content section","marketing section","landing section","full bleed","container","max width wrapper","page band","section block"],subcomponents:["Container","SectionEyebrow","SectionTitle","SectionSubtitle","SectionDescription","SectionActions","SectionMedia"],composesWith:["Container","MediaSurface","Carousel","VideoPlayer","Button","Badge","Card","Grid","Stack"],styleDefaults:{Section:"w-full py-16 md:py-24",Container:"mx-auto w-full px-4 md:px-6 lg:px-8 max-w-7xl",SectionEyebrow:"inline-block text-xs font-medium uppercase tracking-wider text-muted-foreground",SectionTitle:"text-balance text-3xl font-semibold tracking-tight md:text-4xl",SectionSubtitle:"text-lg text-muted-foreground md:text-xl",SectionDescription:"leading-relaxed text-muted-foreground",SectionActions:"flex flex-wrap items-center gap-3",SectionMedia:"w-full"},variantDefaults:{pad:"lg"},props:{scope:{schema:z.enum(["default","inverse","brand","accent","muted","card"]).optional(),design:"knob",description:"colour SUBTHEME; applies the `scope-*` class so the whole band re-tones (bg/fg/card/muted/border) while action colours stay vivid. Unset = the page surface. See STUDIO-COLOR.md."},background:{schema:z.unknown().optional(),design:"plumbing",description:"visual band background slot: image / video / gradient / shader (drop a <BackgroundFill> here). Renders BEHIND the content; Section owns the relative/overflow/z plumbing. Works with `scope` (which re-tones the content tokens so text stays legible over the media)."},pad:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"vertical rhythm (responsive py); default lg. Section is ALWAYS full width \u2014 it never sets a max width."},as:{schema:z.enum(["section","header","footer","div"]).optional(),design:"knob",description:"semantic element; default section."},maxW:{schema:z.enum(["sm","md","lg","xl","prose","full"]).optional(),design:"knob",description:"centred max width + gutters; default lg. The MEASURE."},grid:{schema:z.boolean().optional(),design:"knob",description:"snap children to a 12-column grid (use `col-span-*` on children); default false."}}};var xl={name:"SectionBlock",description:'The top-level container for a marketing page section \u2014 hero, feature row, pricing table, testimonial strip, FAQ section. Always reach for SectionBlock over a hand-rolled `<section>` so vertical rhythm, container width, and tonal background stay consistent across the page. Pair `background="gradient"` + `surface="glass"` inner Cards for the "modern marketing hero" pattern.',import:"@gradeui/ui",aliases:["section","section block","hero section","marketing section","page section","content section","container section","feature section","hero","page hero","marketing hero","glass section","gradient section","mesh hero"],composesWith:['Card (the most common child \u2014 especially with surface="glass")',"Grid (feature rows)","Stack (hero column)","MediaSurface (hero imagery)","Code (developer hero)","Carousel (logo strips)"],styleDefaults:{SectionBlock:"relative w-full py-16 md:py-24 bg-transparent"},variantDefaults:{padding:"lg",background:"transparent"},props:{padding:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"vertical rhythm. Defaults to `lg`."},background:{schema:z.enum(["transparent","muted","card","primary","gradient"]).optional(),design:"knob",description:"tonal direction of the section bg."},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the section is *made of*. Orthogonal to `background`. Use `glass` for hero sections that float over a generative backdrop / image / dot grid."},container:{schema:z.enum(["default","wide","narrow","full"]).optional(),design:"knob",description:"max-width of the inner content."},alignment:{schema:z.enum(["left","center","right"]).optional(),design:"knob",description:"header / CTA alignment."},titleSize:{schema:z.enum(["sm","md","lg","xl"]).optional(),design:"knob"},title:{schema:z.string().optional(),design:"plumbing"},subtitle:{schema:z.string().optional(),design:"content"},cta1:{schema:z.unknown().optional(),design:"plumbing",description:"string or `{ text, variant, href, onClick }` config"},backgroundImage:{schema:z.string().optional(),design:"content",description:"direct CSS background image url"},as:{schema:z.enum(["section","div","article"]).optional(),design:"knob",description:"semantic root"},fullBleed:{schema:z.boolean().optional(),design:"knob"}}};var wl={name:"Select",description:'Single-choice from 3+ known options. Fewer than 3 \u2192 RadioGroup. Huge list with search \u2192 use a Combobox (not in DS yet). Multi-select \u2192 not supported by this primitive. In dense tool panels, set size="xs" on BOTH the trigger and the content so the closed control and open menu match.',import:"@gradeui/ui",aliases:["dropdown","combobox","picker","select","pop-up button","popup button","popup picker","picker view","rnpickerselect","react native picker","native picker"],subcomponents:["SelectTrigger","SelectValue","SelectContent","SelectItem","SelectGroup","SelectLabel","SelectSeparator"],composesWith:["Label (above SelectTrigger)","Form","Card"],styleDefaults:{SelectTrigger:"flex w-full items-center justify-between rounded-md border border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 h-10 px-3 py-2 text-sm",SelectScrollUpButton:"flex cursor-default items-center justify-center py-1",SelectScrollDownButton:"flex cursor-default items-center justify-center py-1",SelectContent:"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",SelectItem:"relative flex w-full cursor-default select-none items-center rounded-sm outline-none focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 py-1.5 pl-8 pr-2 text-sm",SelectSeparator:"-mx-1 my-1 h-px bg-muted"},props:{value:{schema:z.unknown().optional(),design:"plumbing"},onValueChange:{schema:z.unknown().optional(),design:"event"},defaultValue:{schema:z.unknown().optional(),design:"plumbing"},disabled:{schema:z.unknown().optional(),design:"plumbing",description:"Radix root"},size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density; wraps the clickable control, nest SelectValue inside"},placeholder:{schema:z.string().optional(),design:"content",description:"text when nothing is selected"}}};var kl={name:"Separator",description:"Light divider between sibling blocks in a Card, list, or header. For section-level partition use extra spacing instead.",import:"@gradeui/ui",aliases:["divider","rule","hr","line","horizontal rule"],composesWith:["Card (between CardHeader/Content/Footer)","navigation menus","any vertical stacks"],styleDefaults:{Separator:"shrink-0 bg-border"},props:{orientation:{schema:z.enum(["horizontal","vertical"]).optional(),design:"knob",description:'default "horizontal"'},decorative:{schema:z.boolean().optional(),design:"knob",description:"hide from a11y tree",default:true},className:{schema:z.string().optional(),design:"plumbing"}}};var Sl={name:"ShaderPresetPicker",description:"Runtime gallery of shader presets \u2014 click to select. Use with ThreeScene as a controlled input so the user can pick a background shader. For a single preview card, use ShaderPresetPreview directly.",import:"@gradeui/ui",aliases:["shader picker","preset picker","shader gallery","preset gallery"],composesWith:["ShaderPresetPreview (internal)","ThreeScene (the typical downstream consumer)"],styleDefaults:{ShaderPresetPicker:"grid grid-cols-2 gap-3"},props:{value:{schema:z.string().optional(),design:"content",description:"currently selected preset id (controlled)"},onChange:{schema:z.unknown().optional(),design:"event",description:"called when the user clicks a preset card"},filterTags:{schema:z.string().optional(),design:"content",description:'only show presets matching at least one tag ("space" | "retro" | "motion" | "hero" | "background" \u2026)'},live:{schema:z.enum(["never","hover","always"]).optional(),design:"knob",description:"thumbnail render mode",default:"hover"},postPreset:{schema:z.string().optional(),design:"content",description:"shared post-FX preset applied to every thumbnail"},palette:{schema:z.unknown().optional(),design:"plumbing",description:"shared palette applied to every thumbnail"},columns:{schema:z.unknown().optional(),design:"plumbing",description:"grid columns at md+ breakpoint"}}};var Rl={name:"ShaderPresetPreview",description:"Thumbnail-sized preview card for a shader preset. Defaults to a cheap static placeholder until hovered, at which point the live WebGL render kicks in. Use directly when you want a single preset card; use ShaderPresetPicker for a filterable grid.",import:"@gradeui/ui",aliases:["shader preview","preset preview","shader card"],composesWith:["ThreeScene (internal)","ShaderPresetPicker (wraps this)"],styleDefaults:{ShaderPresetPreview:"group cursor-pointer flex flex-col gap-2"},props:{preset:{schema:z.string(),design:"content",description:"shader preset id from the registry"},live:{schema:z.enum(["never","hover","always"]).optional(),design:"knob",description:"when to run the live WebGL render",default:"hover"},postPreset:{schema:z.string().optional(),design:"content",description:"override the preset's default post-FX"},palette:{schema:z.unknown().optional(),design:"plumbing",description:"palette overrides for the preview"},aspect:{schema:z.enum(["video","square","portrait","wide"]).optional(),design:"knob",default:"video"},hideLabel:{schema:z.boolean().optional(),design:"knob",description:"hide the label strip under the preview",default:false},onClick:{schema:z.unknown().optional(),design:"event"}}};var Cl={name:"Sheet",description:"A panel that slides in from a screen edge \u2014 mobile nav drawers, side panels for editing a single record without leaving the list, filter trays on small viewports, Studio-style inspector panels. For a centered focus modal use Dialog. For a transient announcement use Toast (Sonner). For inline reveals use Collapsible.",import:"@gradeui/ui",aliases:["sheet","drawer","side panel","slide-in","nav drawer","mobile drawer","slide-over","action sheet","modal sheet","bottom sheet","side sheet","react native modal sheet","bottom-sheet","ios action sheet","inspector panel","glass sheet","frosted drawer"],subcomponents:["SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetDescription","SheetFooter","SheetClose"],composesWith:["Form controls (an inline edit sheet)","Button (trigger + close)","AppShellNav (mobile-only swap)","Code (changelog drawers)","MediaSurface (image-detail sheets)"],styleDefaults:{SheetOverlay:"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",SheetContent:"fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",SheetHeader:"flex flex-col space-y-2 text-center sm:text-left",SheetFooter:"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",SheetTitle:"text-lg font-semibold text-foreground",SheetDescription:"text-sm text-muted-foreground"},props:{open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},modal:{schema:z.unknown().optional(),design:"plumbing"},asChild:{schema:z.boolean().optional(),design:"plumbing"},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob",default:"right"},surface:{schema:z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the sheet panel is *made of*. `solid` is the default opaque `bg-background`. Reach for `glass` whenever the canvas behind the sheet (a layout in progress, a media gallery, a dashboard) should remain visible."},className:{schema:z.string().optional(),design:"plumbing",description:"usually set a width (right/left) or height (top/bottom)"},SheetTitle:{schema:z.unknown(),design:"plumbing"}}};var Tl={name:"Sidebar",description:'Vertical app navigation. Drop inside `<AppShellNav placement="side">` for full-page layouts. Compound API \u2014 `<SidebarHeader>` for brand, `<SidebarContent>` for the scrollable body of `<SidebarSection>` + `<SidebarItem>` rows, `<SidebarFooter>` for user / settings chrome. For top nav reach for TopMenu; for command-palette style search reach for Command.',import:"@gradeui/ui",aliases:["sidebar","side menu","sidemenu","navigation sidebar","app sidebar","side nav","side nav rail","master pane","sidebarmenu","navigation rail","react native drawer"],subcomponents:["SidebarHeader","SidebarContent","SidebarFooter","SidebarSection","SidebarItem"],composesWith:["AppShell (inside AppShellNav)","Avatar (in Footer)","Tooltip (auto-wrapped on collapsed items)","Button (asChild for custom routing)"],styleDefaults:{Sidebar:"relative flex h-full flex-col bg-card text-card-foreground",SidebarHeader:"flex shrink-0 items-center border-b border-border",SidebarContent:"flex-1 overflow-y-auto overflow-x-hidden",SidebarFooter:"shrink-0 border-t border-border",SidebarSection:"px-[var(--gds-sidebar-section-px,0.5rem)] space-y-[var(--gds-sidebar-section-gap,0.125rem)]",SidebarItem:"group flex items-center gap-2.5 rounded-md transition-colors",SidebarTreeItem:"group flex w-full items-center gap-1.5 rounded-md py-1 text-sm font-medium transition-colors"},props:{collapsed:{schema:z.boolean().optional(),design:"knob",description:"controlled collapsed state (wire onCollapsedChange when set)"},defaultCollapsed:{schema:z.boolean().optional(),design:"knob",description:"uncontrolled initial value (default false)"},onCollapsedChange:{schema:z.unknown().optional(),design:"event"},collapsible:{schema:z.boolean().optional(),design:"knob",description:"show the affordance for the user to collapse (default true)"},variant:{schema:z.enum(["rail","panel"]).optional(),design:"knob",description:'outer chrome treatment. `rail` (default) is the classic nav rail with a single right-border + tracked width via `--gds-sidebar-width`; drops cleanly into `<AppShellNav placement="side">`. `panel` is a card-style floating sidebar with full border + rounded corners + parent-controlled width; use when the sidebar is one of several adjacent panes in a body row (e.g. Projects | Canvas | Settings). The compound children (Header/Content/Footer/Section/Item) are identical in both treatments.'},any:{schema:z.unknown().optional(),design:"plumbing",description:"brand / logo / org switcher; hides nothing when collapsed (centred)"},title:{schema:z.unknown().optional(),design:"plumbing",description:'group label, tracking-wide muted styling; hidden when sidebar is collapsed. CASE: static (non-collapsible) headers historically render UPPERCASE (Notion / Linear / Slack-style "GAMES", "FAVORITES"); collapsible headers render the authored case. Control it explicitly with titleTransform.'},titleTransform:{schema:z.enum(["uppercase","none"]).optional(),design:"knob",description:'title casing for BOTH header variants. "none" renders the authored case (sentence-case headers like a "Recents" list); "uppercase" forces the shouty group label. Unset = the per-variant legacy default above.'},icon:{schema:z.unknown().optional(),design:"plumbing",description:"optional icon beside the title"},trailing:{schema:z.unknown().optional(),design:"plumbing",description:`**action(s) on the right edge of the header** \u2014 the canonical "+" / "..." slot (Notion's "+ Add page" next to Pages, Linear's "+" next to Favorites, Slack's "+" next to Channels). Pointer events isolated so a Button here doesn't toggle collapse.`},defaultExpanded:{schema:z.boolean().optional(),design:"knob",description:"initial open state (default true)"},badge:{schema:z.unknown().optional(),design:"plumbing",description:"trailing count / label (hidden when collapsed)"},active:{schema:z.boolean().optional(),design:"knob",description:'current route; adds aria-current="page"'},href:{schema:z.string().optional(),design:"content",description:"renders as <a>; for routing use `asChild` with your link component"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"wrap a custom link (<Link href> from Next.js etc.) via Radix Slot"},asButton:{schema:z.boolean().optional(),design:"knob",description:"render as <button> for action rows (open dialog, log out)"},disabled:{schema:z.boolean().optional(),design:"knob"},collapsedLabel:{schema:z.unknown().optional(),design:"plumbing",description:"tooltip override when sidebar is collapsed (defaults to children text)"},size:{schema:z.enum(["sm","md"]).optional(),design:"knob",description:"row size. `md` (default) is the standard `text-sm font-medium` nav row; `sm` is `text-xs` + lighter weight + tighter padding for visually subordinate rows (nested screens under a project, sub-pages under a section). Active state still wins on color + weight so the current row pops at either size."},description:{schema:z.unknown().optional(),design:"plumbing",description:"secondary line beneath the label (metadata like 'Edited 2m ago', '12 items', a brief description). Row layout adapts: label + description stacked vertically; icon vertically-centered against the stack; badge stays on trailing edge. Hidden when sidebar collapsed."}}};var Pl={name:"Skeleton",description:'Loading placeholder for content whose shape you know. Set width/height via className to mimic the real content (e.g. "h-4 w-32"). Not a spinner \u2014 use it where the real thing will drop in.',import:"@gradeui/ui",aliases:["placeholder","shimmer","loader","loading state","redacted","redacted placeholder","shimmer placeholder","content placeholder","lottie placeholder"],composesWith:["Card","Avatar (inside a Skeleton for avatar loading)","any layout"],styleDefaults:{Skeleton:"animate-pulse rounded-md bg-muted"},props:{className:{schema:z.string().optional(),design:"plumbing",description:"required in practice; supply width/height utilities"}}};var Ml={name:"Slider",description:'A continuous-ish numeric pick \u2014 volume, opacity, font size, price-range filters. Use a single-thumb slider for one value, two-thumb for a range. For a small set of discrete options (1-5 stars, sm/md/lg) prefer ToggleGroup. For free-text numeric entry use an Input type="number".',import:"@gradeui/ui",aliases:["slider","range slider","range input","volume","opacity slider","scrub","drag value","slider control","value slider","react native slider"],composesWith:["Label (mandatory above)","Row (label + current value display)","Card (settings rows)"],styleDefaults:{Slider:"relative w-full grow overflow-hidden rounded-full"},props:{value:{schema:z.number().optional(),design:"knob",description:"controlled value; ALWAYS an array even for a single-thumb slider (`[50]`)"},defaultValue:{schema:z.number().optional(),design:"knob",description:"uncontrolled initial; `[20, 80]` for a two-thumb range"},onValueChange:{schema:z.unknown().optional(),design:"event"},min:{schema:z.number().optional(),design:"knob"},max:{schema:z.number().optional(),design:"knob"},step:{schema:z.number().optional(),design:"knob"},disabled:{schema:z.boolean().optional(),design:"knob"},orientation:{schema:z.enum(["horizontal","vertical"]).optional(),design:"knob",default:"horizontal"},dir:{schema:z.enum(["ltr","rtl"]).optional(),design:"plumbing"},inverted:{schema:z.boolean().optional(),design:"knob",description:"flip the visual direction"},name:{schema:z.string().optional(),design:"content",description:"form name when posting natively"}}};var Nl={name:"Sortable",description:"Drag-to-reorder lists, kanban-column reordering, sortable shelves, tab strips the user can rearrange. Pairs with any layout primitive \u2014 Stack for vertical lists, Row for horizontal strips, Grid for 2D card walls. For cross-container drag (drag a card from one column to another) hand-roll DndContext at the page level \u2014 Sortable v1 covers single-list reorder; Sortable.Group for cross-container is a planned follow-up. Reach for raw `@dnd-kit/core` if you need custom collision detection, drag overlays with arbitrary chrome, or non-list use cases (kanban swimlanes, draggable canvas nodes).",import:"@gradeui/ui",aliases:["sortable","reorder","drag and drop","dnd","draggable list","sortable list","kanban","drag to reorder","drag-drop","dragdroplist","drag handle","react native draggable flatlist"],subcomponents:["Sortable.Item","Sortable.Handle"],composesWith:["Stack (vertical lists)","Row (horizontal strips)","Grid (2D card walls)","Card (typical item content)","Button (as Sortable.Handle asChild)"],styleDefaults:{SortableHandle:"cursor-grab touch-none select-none"},props:{values:{schema:z.unknown(),design:"plumbing",description:"ordered list of unique ids; the source of truth for the order"},onReorder:{schema:z.unknown().optional(),design:"event",description:"fires with the new order after a drag that changed it"},strategy:{schema:z.enum(["vertical","horizontal","grid"]).optional(),design:"knob",description:"match the layout your items render in",default:"vertical"},disabled:{schema:z.boolean().optional(),design:"knob",description:"disable drag on every item"},Sortable:{schema:z.unknown(),design:"plumbing",description:"must match one entry in the parent `values` array (identity, not React key)"}}};var El={name:"Stack",description:"Default top-level layout inside the main slot when composing two or more stacked regions (hero + content + footer, auth card + subtext, etc.). Prefer Stack over hand-rolled `flex flex-col gap-*` so the vertical rhythm is editable through the settings panel.",import:"@gradeui/ui",aliases:["stack","vstack","vertical","column","vertical layout","v-stack","vertical stack","lazyvstack"],composesWith:["Section","Row","Split","Hero","any content component"],props:{gap:{schema:z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"vertical gap between children",default:"md"},align:{schema:z.enum(["start","center","end","stretch"]).optional(),design:"knob",description:"cross-axis (horizontal) alignment of children",default:"stretch"},justify:{schema:z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:'main-axis (vertical) distribution. Reach for this on absolute-positioned overlays (`justify="end"` pins children to the bottom) and split footers (`justify="between"`).',default:"start"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot, so `<Stack asChild><section>\u2026</section></Stack>` stamps Stack's classes onto the `<section>` rather than nesting a wrapper div",default:false},className:{schema:z.string().optional(),design:"plumbing"},children:{schema:z.unknown(),design:"plumbing"}}};var Ll={name:"Swatch",description:'Showing a colour as a small chip \u2014 brand-pop strips, palette / accent pickers, theme previews, token galleries, "pick a colour" rows. Reach for `token` to bind to a live theme variable; `color` for raw values. A transparency checkerboard sits behind the fill so semi-transparent values read honestly.',import:"@gradeui/ui",aliases:["colour swatch","color swatch","colour chip","color chip","palette swatch","token swatch","brand pop","accent swatch","colour tile","color tile","paint chip","react native colour swatch"],subcomponents:["SwatchGroup"],composesWith:["Row (strip of swatches)","Stack","Grid (palette wall)","Field (as a colour-picker trailing slot)","Card (in a theme-preview)","RadioGroup (selectable accent set)","Label"],styleDefaults:{Swatch:"relative inline-block shrink-0 overflow-hidden shadow-elevation-1 size-8 rounded-[var(--radius)]",SwatchGroup:"inline-flex flex-wrap items-center"},variantDefaults:{size:"md",shape:"rounded"},props:{color:{schema:z.string().optional(),design:"content",description:"any raw CSS colour (`#1f6feb`, `oklch(...)`, `rgb(...)`, or `var(--x)`). Takes precedence over `token`. Use for one-off or external colours."},token:{schema:z.string().optional(),design:"content",description:'a Grade colour token NAME with no `--` and no `oklch()` wrap; resolved internally to `oklch(var(--<token>))`. THE design-system path \u2014 e.g. `token="brand-3"`, `token="primary"`, `token="chart-2"`. Re-voices live when the theme changes.'},type:{schema:z.enum(["solid","gradient","image"]).optional(),design:"knob",description:"fill kind; default solid (or inferred from `image` / `gradient`). Determines what the chip renders in place."},gradient:{schema:z.string().optional(),design:"content",description:'CSS gradient for `type="gradient"`, e.g. `linear-gradient(135deg,#6366f1,#ec4899)`.'},image:{schema:z.string().optional(),design:"content",description:'image URL for `type="image"`; rendered cover-fit behind the chip.'},size:{schema:z.enum(["2xs","xs","sm","md","lg","xl"]).optional(),design:"knob",description:"t-shirt scale, 16px \u2192 56px; default md (32px). 2xs (16px) suits dense colour lists. Prefer over h-*/w-* utilities."},shape:{schema:z.enum(["square","rounded","circle"]).optional(),design:"knob",description:"default rounded (rides `--radius`); circle for dot pickers; square for a hard tile."},selected:{schema:z.boolean().optional(),design:"knob",description:"draws the shared selection ring (`--selected`). For palette / accent pickers."},onSelect:{schema:z.unknown().optional(),design:"event",description:"makes the swatch a pickable <button> (adds aria-pressed, focus ring, hover lift). Omit for a static display chip."},onColorChange:{schema:z.unknown().optional(),design:"event",description:'makes the swatch an editable colour well: hosts a native `<input type="color">` (the OS picker) behind the DS chip and fires with the new `#rrggbb`. Presentation stays the chip, interaction stays native. Use for inspector / control-panel colour fields instead of styling a raw colour input. Takes precedence over `onSelect`.'},label:{schema:z.unknown().optional(),design:"plumbing",description:"caption rendered beneath the chip; also becomes the accessible name + tooltip."},layout:{schema:z.enum(["row","stack"]).optional(),design:"knob",description:'`row` (default) spaces chips out; `stack` overlaps them into a coin-stack (the theme-picker / "key colours" treatment, where each chip\'s ring reads as the separating edge).'},gap:{schema:z.enum(["xs","sm","md","lg"]).optional(),design:"knob",description:"spacing between chips in `row` layout; default sm."}}};var Dl={name:"Switch",description:'Instant on/off setting ("Enable notifications", "Dark mode"). Commits on toggle \u2014 no submit button needed. For selecting-from-a-list use Checkbox. For a settings row (label + description on the left, Switch on the right) use Field layout="setting". For a prominent on/off presented as a whole selectable card, use SwitchCard.',import:"@gradeui/ui",aliases:["toggle","switch","on/off switch","ios toggle","toggle switch","switch control","react native switch"],composesWith:["Label (via htmlFor)",'Field (layout="setting" settings row)',"SwitchCard (whole-card toggle)","Card (settings rows)"],styleDefaults:{Switch:"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-6 w-11"},variantDefaults:{size:"default"},props:{checked:{schema:z.boolean().optional(),design:"knob"},onCheckedChange:{schema:z.unknown().optional(),design:"event"},defaultChecked:{schema:z.boolean().optional(),design:"knob"},disabled:{schema:z.boolean().optional(),design:"knob"},id:{schema:z.string().optional(),design:"plumbing"}}};var Al={name:"SwitchCard",description:'A prominent on/off setting presented as a whole selectable card. The whole card is the switch, so the toggled state lives on the card surface. Standalone. For a row of compact settings (label left, small Switch right) use Field layout="setting" instead \u2014 SwitchCard is for the heavier, card-sized toggle.',import:"@gradeui/ui",aliases:["switch card","toggle card","setting card","feature toggle card"],composesWith:["Badge (in aside)","Stack (stacking several)"],props:{checked:{schema:z.unknown().optional(),design:"plumbing",description:"standard switch state"},label:{schema:z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:z.boolean().optional(),design:"knob",description:"hide the switch glyph; state shown by the card border + background"},indicatorPosition:{schema:z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:z.unknown().optional(),design:"plumbing",description:"arbitrary static content instead of label/description"}}};var Hl={name:"Table",description:"Structured tabular data \u2014 rows \xD7 columns with alignment requirements. NOT a layout grid \u2014 for that use div+Tailwind grid utilities. Keep to <100 rows; larger datasets need virtualisation (not in DS).",import:"@gradeui/ui",aliases:["table","table view","data table","datatable","grid view","data grid","rows and columns"],subcomponents:["TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],composesWith:["Card (wrap the table)","Badge (inside TableCell for status)","Checkbox (row selection)","Button (row actions)"],styleDefaults:{Table:"w-full caption-bottom text-sm",TableHeader:"[&_tr]:border-b",TableBody:"[&_tr:last-child]:border-0",TableFooter:"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",TableRow:"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",TableHead:"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",TableCell:"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",TableCaption:"mt-4 text-sm text-muted-foreground"},props:{Each:{schema:z.unknown(),design:"plumbing"},No:{schema:z.unknown(),design:"plumbing",description:"styling follows the active theme tokens"}}};var Fl={name:"Tabs",description:'A small set of peer views within one surface (2\u20135 tabs). For primary nav use Side Menu/routing. For filters use a filter control, not tabs. Pick `variant="pill"` for app chrome (settings panels, in-card tab strips). Pick `variant="underlined"` for marketing/docs pages and browser-tab-style treatments.',import:"@gradeui/ui",aliases:["tabs","tab strip","tab bar","tab view","tabbed interface","pageviewcontroller","react native tab view","underlined tabs","page tabs","segment switcher","simple tabs"],subcomponents:["TabsList","TabsTrigger","TabsContent"],composesWith:["Card (tabs inside a card body)","Dialog","TooltipProvider (required for tooltip prop)"],styleDefaults:{TabsList:"inline-flex items-center text-muted-foreground justify-center rounded-lg bg-muted",TabsContent:"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"},props:{defaultValue:{schema:z.unknown().optional(),design:"plumbing"},value:{schema:z.unknown().optional(),design:"plumbing"},onValueChange:{schema:z.unknown().optional(),design:"event"},orientation:{schema:z.unknown().optional(),design:"plumbing"},size:{schema:z.enum(["sm","md","lg, default md"]).optional(),design:"knob",description:"t-shirt scale aligned with Button/ToggleGroup heights; cascades to every TabsTrigger via context so set it once on the list"},variant:{schema:z.enum(["pill","underlined, default pill"]).optional(),design:"knob",description:"`pill` is the shadcn chip-on-muted look; `underlined` is the minimal text + bottom-border treatment (formerly the separate SimpleTabs component, collapsed into Tabs in May 2026). Cascades to triggers."},tooltip:{schema:z.string().optional(),design:"content",description:"when set, wraps the trigger in the design-system Tooltip and auto-applies aria-label (useful for icon-only triggers); requires a TooltipProvider somewhere above the tabs"}}};var zl={name:"Textarea",description:'Multi-line text entry (descriptions, messages, comments). Pair with a Label. Single-line input \u2192 use Input instead. Use size="sm"/"xs" in dense tool panels.',import:"@gradeui/ui",aliases:["text area","multiline","comment box","message field","text editor","multi-line text","multiline input","multiline text field","comments box","multiline textinput"],composesWith:["Label","Form","Card (in CardContent)"],styleDefaults:{Textarea:"flex w-full rounded-md border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px] px-3 py-2 text-sm"},variantDefaults:{size:"default"},props:{size:{schema:z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density, mirrors Input. default = min-h-80 / text-sm; sm and xs shrink the min-height + padding for dense panels."}}};var Vl={name:"ThreeScene",description:"WebGL primitive for shader backgrounds, generative visuals, and bespoke three.js scenes. Three authoring paths, in order of preference \u2014 (1) pick a `preset` id; (2) if nothing in the registry fits, write a `fragmentShader` against the fixed uniform contract; (3) only as a last resort, pass a full `createScene` factory. For looping video, use VideoPlayer; for interactive animations, use RivePlayer.",import:"@gradeui/ui",aliases:["three","threejs","webgl","shader","scene","3d","generative","hero background","fragment shader","glsl"],composesWith:["MediaSurface (internal)","foreground content stacked above with `position: absolute/relative z-10`"],styleDefaults:{ThreeScene:"absolute inset-0 flex items-end justify-end p-2"},props:{preset:{schema:z.enum(["mesh","waves","space","plasma","voronoi","synthwave"]).optional(),design:"knob",description:"shader preset id from the registry"},fragmentShader:{schema:z.string().optional(),design:"content",description:"user-authored GLSL body; takes precedence over preset"},onShaderError:{schema:z.unknown().optional(),design:"event",description:'fires on compile failure; scene falls back to `preset="space"`'},postPreset:{schema:z.enum(["none","vhs","cinematic","synthwave","crt"]).optional(),design:"knob",description:"post-processing pass",default:"vhs"},palette:{schema:z.unknown().optional(),design:"plumbing",description:"any CSS-legal colour string per slot. Re-tints automatically when the theme changes. Unset slots fall back to defaults."},createScene:{schema:z.unknown().optional(),design:"plumbing",description:"custom full scene factory; takes precedence over preset AND fragmentShader"},controls:{schema:z.boolean().optional(),design:"knob",description:"play/pause overlay",default:false},autoPlay:{schema:z.boolean().optional(),design:"knob",description:"respects reduced-motion",default:true},pauseOffscreen:{schema:z.boolean().optional(),design:"knob",description:"big win for WebGL battery life",default:true},aspect:{schema:z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"video"},maxDpr:{schema:z.number().optional(),design:"knob",description:"lower for thumbnails / low-end devices"},radius:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",default:"lg"}}};var Bl={name:"Toast",description:'Transient, non-blocking feedback that confirms or warns about an action \u2014 "Saved", "Failed to upload", "Copied to clipboard", "Invitation sent". For permanent inline messages reach for Callout. For confirmations that block until acknowledged use Dialog. Mount <Toaster /> ONCE at the root of the app; everywhere else, call the `toast` helper.',import:"@gradeui/ui",aliases:["toast","toaster","sonner","notification","snackbar","alert toast","transient alert","transient banner","banner notification","toastandroid"],composesWith:["App root layout (single <Toaster /> mount)","Form submit handlers (success/error toasts)","Async actions"],props:{position:{schema:z.enum(["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"]).optional(),design:"knob",default:"bottom-right"},theme:{schema:z.enum(["light","dark","system"]).optional(),design:"knob"},richColors:{schema:z.boolean().optional(),design:"knob",description:"colored variants for success/error/warning/info"},expand:{schema:z.boolean().optional(),design:"knob",description:"keep multiple toasts visually separated rather than stacked"},visibleToasts:{schema:z.number().optional(),design:"knob",description:"max concurrent toasts on screen (default 3)"},duration:{schema:z.number().optional(),design:"knob",description:"default ms before auto-dismiss"}}};var Ol={name:"Toggle",description:`A standalone on/off button \u2014 Bold/Italic in a toolbar, "Show grid" in a header, single binary toggle that doesn't belong inside a Switch row. For two-or-more mutually-exclusive options use ToggleGroup. For a labeled settings switch ("Active: on/off") use Switch.`,import:"@gradeui/ui",aliases:["toggle","toggle button","press button","bold button","italic button"],composesWith:["Tooltip (wrap an icon-only Toggle)","Row","TabsList (sibling)"],styleDefaults:{Toggle:"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-transparent h-9 px-2 min-w-9"},variantDefaults:{variant:"default",size:"default"},props:{variant:{schema:z.enum(["default","outline"]).optional(),design:"knob",description:"outline adds a border, default is borderless and ghost-like"},size:{schema:z.enum(["default","sm","lg"]).optional(),design:"knob"},pressed:{schema:z.boolean().optional(),design:"knob",description:"controlled pressed state"},defaultPressed:{schema:z.boolean().optional(),design:"knob",description:"uncontrolled initial state"},onPressedChange:{schema:z.unknown().optional(),design:"event"},disabled:{schema:z.boolean().optional(),design:"knob"},children:{schema:z.unknown(),design:"plumbing",description:"usually an icon or short label"}}};var _l={name:"ToggleGroup",description:'A small set of mutually-exclusive (`type="single"`) or independent (`type="multiple"`) binary options that live side-by-side as a segmented control \u2014 viewport size picker (Mobile/Tablet/Desktop), text alignment, view density. Reads identically to a TabsList of the same size; reach for ToggleGroup when each option emits a value (like a form input) rather than swapping panels. Use Tabs for panel switching, Toggle for a single on/off.',import:"@gradeui/ui",aliases:["toggle group","segmented control","segmented buttons","button group","pill group","view selector","segmented picker","segmentedcontrolios","segmented buttons group","rn segmented control"],subcomponents:["ToggleGroupItem"],composesWith:["Card (header controls)","Row","AppShellHeader chrome","settings panels"],styleDefaults:{ToggleGroup:"flex items-center justify-center gap-1"},props:{type:{schema:z.enum(["single","multiple"]),design:"knob",description:"single picks one, multiple picks any number"},value:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"controlled; matches `type` (string for single, string[] for multiple)"},defaultValue:{schema:z.union([z.string(),z.array(z.string())]).optional(),design:"knob",description:"uncontrolled initial"},onValueChange:{schema:z.unknown().optional(),design:"event"},size:{schema:z.enum(["2xs","xs","sm","md","lg, default md"]).optional(),design:"knob",description:"cascades to every ToggleGroupItem via context, matches Tabs/Button heights; 2xs/xs are the dense tool-panel sizes (2xs also drops text to text-2xs and icons to size-3 so labelled items read at panel density)"},variant:{schema:z.enum(["default","outline","segmented"]).optional(),design:"knob",description:"segmented sits the items in a muted track with the active item as a soft raised pill, so it reads like a TabsList; reach for it in dense property panels (e.g. a Row/Stack direction toggle)"},tooltip:{schema:z.unknown().optional(),design:"plumbing",description:"when set, wraps the item in a Tooltip; required for icon-only items where the visible chrome doesn't carry a label"},tooltipSide:{schema:z.enum(["top","right","bottom",'left", default "top']).optional(),design:"knob",description:"side the tooltip renders on"},tooltipDelay:{schema:z.number().optional(),design:"knob",description:"per-item delay override; falls back to the upstream TooltipProvider's delayDuration"}}};var Gl={name:"Toolbar",description:`ANY three-region chrome bar \u2014 the leading/center/trailing pattern Apple HIG
|
|
80
80
|
describes as a "Toolbar." App window chrome (Reddit, Twitter, GitHub, Linear,
|
|
81
81
|
most desktop apps), section toolbars inside Cards or panels, bottom action
|
|
82
82
|
bars on mobile layouts, persistent footer toolbars.
|
|
@@ -104,26 +104,26 @@ Use directly inside a Card or page section for section-scoped toolbars:
|
|
|
104
104
|
<Card>
|
|
105
105
|
<Toolbar size="sm" variant="subtle" leading={...} trailing={...} />
|
|
106
106
|
{content}
|
|
107
|
-
</Card>`,import:"@gradeui/ui",subcomponents:["ToolbarSlot"],composesWith:["Button","Avatar","Input","Logo","Badge","AppShellHeader","Card","Row","Stack"],styleDefaults:{ToolbarSlot:"flex items-center min-w-0"},props:{leading:{schema:z.unknown().optional(),design:"plumbing",description:"left-aligned region (logo + primary nav)"},center:{schema:z.unknown().optional(),design:"plumbing",description:"center region (search, page title, segmented control)"},trailing:{schema:z.unknown().optional(),design:"plumbing",description:"right-aligned region (action icons, avatar, primary CTA)"},children:{schema:z.unknown().optional(),design:"plumbing",description:"escape hatch; bypasses slot layout"},position:{schema:z.enum(["top","bottom","inline"]).optional(),design:"knob",description:"border placement",default:"top"},variant:{schema:z.enum(["default","subtle","transparent"]).optional(),design:"knob",default:"default"},size:{schema:z.enum(["sm","md","lg"]).optional(),design:"knob",description:"height + padding",default:"md"},sticky:{schema:z.boolean().optional(),design:"knob",description:"pin to top/bottom of scroll container",default:false},"aria-label":{schema:z.string().optional(),design:"content",description:"required by WAI-ARIA toolbar pattern",default:"Toolbar"},className:{schema:z.string().optional(),design:"plumbing"}}};var Qc={name:"Tooltip",description:"A short, non-essential label that explains a control on hover/focus \u2014 icon-only buttons in toolbars, abbreviated column headers, status dots. NEVER hide critical info inside a tooltip \u2014 they're invisible on touch and can be skipped by screen readers if implemented carelessly. For richer hover content use HoverCard. For inline help text that's always visible, use a description paragraph.",import:"@gradeui/ui",aliases:["tooltip","tip","hover tip","hint","label on hover","help tag","hint","helper text bubble","info tip"],subcomponents:["TooltipTrigger","TooltipContent","TooltipProvider"],composesWith:["Button (icon-only)","Toggle","TabsTrigger (the canonical tabs already have a `tooltip` prop that wraps this)","Avatar (status badge meaning)"],styleDefaults:{TooltipContent:"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]"},props:{delayDuration:{schema:z.number().optional(),design:"knob",description:"ms hover before show; mount ONCE near the app root"},skipDelayDuration:{schema:z.number().optional(),design:"knob",description:'ms gap that still feels like "same hover"'},open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"usually wraps a Button or icon"},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob",default:"top"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob"},sideOffset:{schema:z.number().optional(),design:"knob"}}};var ed={name:"VideoPlayer",description:"HTML5 video wrapped in the shared media surface. Controls-on for a standard player, controls-off (+ autoplay/muted/loop) for hero / background video. Prefer Rive for anything interactive, Three Scene for shader backgrounds.",import:"@gradeui/ui",aliases:["video","mp4","movie","webm","clip","video view","av player","react native video","video element"],composesWith:["MediaSurface (internal)","Card (wrap for thumbnail grids)"],styleDefaults:{VideoPlayer:"w-full h-full"},props:{src:{schema:z.string(),design:"content",description:"video URL"},controls:{schema:z.boolean().optional(),design:"knob",description:"show native controls; false for chromeless hero/background video",default:true},autoPlay:{schema:z.boolean().optional(),design:"knob",description:"forces muted=true (browser restriction)",default:false},loop:{schema:z.boolean().optional(),design:"knob",default:false},muted:{schema:z.boolean().optional(),design:"knob",default:false},pauseOffscreen:{schema:z.boolean().optional(),design:"knob",description:"pause when scrolled out of viewport",default:true},aspect:{schema:z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"video"},radius:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"driven by `--gds-media-radius`",default:"lg"},objectFit:{schema:z.enum(["cover","contain","fill"]).optional(),design:"knob",default:"cover"},poster:{schema:z.string().optional(),design:"content",description:'image shown before playback. Always rendered as a `loading="lazy"` `<img>` overlay (not the native `poster` attribute, which fetches eagerly).'},playbackRate:{schema:z.number().optional(),design:"knob"}}};var Fi={Accordion:Ml,AiChat:Nl,AiChatComposer:El,AppShell:Ll,Avatar:Al,BackgroundFill:Dl,Badge:Hl,Banner:_l,Breadcrumb:Fl,Button:Ol,Calendar:zl,Callout:Vl,Card:Gl,Carousel:$l,Chart:Wl,Checkbox:Ul,CheckboxCard:jl,Code:Kl,Collapsible:ql,ColorPicker:Yl,Combobox:Zl,Command:Xl,Composer:Jl,DataView:Ql,DatePicker:ec,Dialog:tc,DropdownMenu:oc,Field:nc,FillPicker:ac,Flex:ic,GradientEditor:lc,Grid:cc,HoverCard:dc,Input:pc,Label:mc,Logo:fc,Map:gc,MediaSurface:Ii,Message:hc,Motion:bc,MultiSelect:vc,Popover:yc,Progress:xc,PropertyList:wc,RadioCard:Sc,RadioGroup:Cc,Resizable:kc,RivePlayer:Rc,Row:Tc,ScreenAnimator:Pc,ScrollArea:Mc,Section:Nc,SectionBlock:Ec,Select:Lc,Separator:Ac,ShaderPresetPicker:Dc,ShaderPresetPreview:Ic,Sheet:Hc,Sidebar:_c,Skeleton:Fc,Slider:Oc,Sortable:zc,Stack:Vc,Swatch:Bc,Switch:Gc,SwitchCard:$c,Table:Uc,Tabs:jc,Textarea:Kc,ThreeScene:qc,Toast:Yc,Toggle:Zc,ToggleGroup:Xc,Toolbar:Jc,Tooltip:Qc,VideoPlayer:ed};function Vg(e){return e?Fi[e]??null:null}function Bg(){return Object.keys(Fi)}function p(...e){return twMerge(clsx(e))}var Ug=Kt.Root,td=w.forwardRef(({className:e,...t},o)=>w.createElement(Kt.Item,{ref:o,className:p("border-b",e),...t}));td.displayName="AccordionItem";var od=w.forwardRef(({className:e,children:t,...o},r)=>w.createElement(Kt.Header,{className:"flex"},w.createElement(Kt.Trigger,{ref:r,className:p("flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",e),...o},t,w.createElement(ChevronDown,{className:"h-4 w-4 shrink-0 transition-transform duration-200"}))));od.displayName=Kt.Trigger.displayName;var rd=w.forwardRef(({className:e,children:t,...o},r)=>w.createElement(Kt.Content,{ref:r,className:"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",...o},w.createElement("div",{className:p("pb-4 pt-0",e)},t)));rd.displayName=Kt.Content.displayName;var nd=cva("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",{variants:{variant:{default:"bg-background text-foreground [&>svg]:text-foreground",destructive:"border-destructive/30 bg-destructive-soft text-destructive-deep [&>svg]:text-destructive-deep",success:"border-success/30 bg-success-soft text-success-deep [&>svg]:text-success-deep",warning:"border-warning/30 bg-warning-soft text-warning-deep [&>svg]:text-warning-deep",info:"border-info/30 bg-info-soft text-info-deep [&>svg]:text-info-deep"}},defaultVariants:{variant:"default"}}),Kg={destructive:"alert",warning:"alert",info:"status",success:"status",default:"status"},ad=w.forwardRef(({className:e,variant:t,role:o,...r},a)=>w.createElement("div",{ref:a,role:o??Kg[t??"default"],"data-gds-part":"callout",className:p(nd({variant:t}),e),...r}));ad.displayName="Callout";var id=w.forwardRef(({className:e,...t},o)=>w.createElement("h5",{ref:o,"data-gds-part":"callout-title",className:p("mb-1 font-medium leading-none tracking-tight",e),...t}));id.displayName="CalloutTitle";var sd=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{ref:o,"data-gds-part":"callout-description",className:p("text-sm [&_p]:leading-relaxed",e),...t}));sd.displayName="CalloutDescription";var ld=cva("gds-app-shell min-h-screen w-full bg-background text-foreground grid",{variants:{nav:{none:"",top:"",side:"","three-pane":""}},defaultVariants:{nav:"none"}}),cd=cva("gds-app-shell-header",{variants:{sticky:{true:"sticky top-0 z-30",false:""}},defaultVariants:{sticky:false}}),dd=cva("gds-app-shell-nav",{variants:{placement:{top:"border-b bg-background",side:"border-r bg-background",none:"hidden"},sticky:{true:"",false:""}},compoundVariants:[{placement:"top",sticky:true,className:"sticky top-0 z-30"},{placement:"side",sticky:true,className:"sticky top-0 h-screen self-start"}],defaultVariants:{placement:"top",sticky:true}}),pd=cva("gds-app-shell-aside min-w-0 border-r bg-background",{variants:{sticky:{true:"sticky top-0 h-screen self-start",false:""}},defaultVariants:{sticky:false}}),ud=cva("gds-app-shell-main min-w-0",{variants:{maxWidth:{full:"w-full",container:"w-full mx-auto max-w-7xl px-4 md:px-6 lg:px-8"}},defaultVariants:{maxWidth:"full"}}),md=cva("gds-app-shell-footer border-t bg-background"),fd=w.forwardRef(({className:e,nav:t,asChild:o=false,...r},a)=>w.createElement(o?Slot:"div",{ref:a,"data-gds-part":"app-shell","data-nav":t??"none",className:p(ld({nav:t,className:e})),...r}));fd.displayName="AppShell";var gd=w.forwardRef(({className:e,sticky:t,asChild:o=false,...r},a)=>w.createElement(o?Slot:"header",{ref:a,"data-gds-part":"app-shell-header",className:p(cd({sticky:t,className:e})),...r}));gd.displayName="AppShellHeader";var hd=w.forwardRef(({className:e,placement:t,sticky:o,asChild:r=false,...a},n)=>w.createElement(r?Slot:"nav",{ref:n,"data-gds-part":"app-shell-nav","data-placement":t??"top",className:p(dd({placement:t,sticky:o,className:e})),...a}));hd.displayName="AppShellNav";var bd=w.forwardRef(({className:e,sticky:t,asChild:o=false,...r},a)=>w.createElement(o?Slot:"aside",{ref:a,"data-gds-part":"app-shell-aside",className:p(pd({sticky:t,className:e})),...r}));bd.displayName="AppShellAside";var vd=w.forwardRef(({className:e,maxWidth:t,asChild:o=false,...r},a)=>w.createElement(o?Slot:"main",{ref:a,"data-gds-part":"app-shell-main",className:p(ud({maxWidth:t,className:e})),...r}));vd.displayName="AppShellMain";var yd=w.forwardRef(({className:e,asChild:t=false,...o},r)=>w.createElement(t?Slot:"footer",{ref:r,"data-gds-part":"app-shell-footer",className:p(md({className:e})),...o}));yd.displayName="AppShellFooter";var qg=cva("relative flex shrink-0 overflow-hidden rounded-full",{variants:{size:{"2xs":"h-5 w-5",xs:"h-6 w-6",sm:"h-7 w-7",md:"h-10 w-10",lg:"h-14 w-14",xl:"h-20 w-20"}},defaultVariants:{size:"md"}}),wd=w.forwardRef(({className:e,size:t,...o},r)=>w.createElement(Ao.Root,{ref:r,"data-gds-part":"avatar","data-gds-size":t??"md",className:p(qg({size:t}),e),...o}));wd.displayName=Ao.Root.displayName;var Sd=w.forwardRef(({className:e,...t},o)=>w.createElement(Ao.Image,{ref:o,"data-gds-part":"avatar-image",className:p("aspect-square h-full w-full",e),...t}));Sd.displayName=Ao.Image.displayName;var Yg=cva("flex h-full w-full items-center justify-center rounded-full font-semibold",{variants:{tone:{muted:"bg-muted text-foreground",primary:"bg-primary/15 text-primary",violet:"bg-violet-500/20 text-violet-600 dark:text-violet-400",amber:"bg-amber-500/20 text-amber-600 dark:text-amber-400",emerald:"bg-emerald-500/20 text-emerald-600 dark:text-emerald-400",sky:"bg-sky-500/20 text-sky-600 dark:text-sky-400",rose:"bg-rose-500/20 text-rose-600 dark:text-rose-400",plum:"bg-fuchsia-500/20 text-fuchsia-600 dark:text-fuchsia-400",lime:"bg-lime-500/20 text-lime-600 dark:text-lime-400"}},defaultVariants:{tone:"muted"}}),Cd=w.forwardRef(({className:e,tone:t,...o},r)=>w.createElement(Ao.Fallback,{ref:r,"data-gds-part":"avatar-fallback","data-gds-tone":t??"muted",className:p(Yg({tone:t}),e),...o}));Cd.displayName=Ao.Fallback.displayName;var Rd=cva("inline-flex items-center gap-1 border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 [&_svg]:size-3 [&_svg]:shrink-0",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",destructive:"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",outline:"text-foreground",highlight:"border-transparent bg-highlight text-gds-gray-900 hover:bg-highlight/90",success:"border-transparent bg-success text-gds-gray-900 hover:bg-success/90",warning:"border-transparent bg-warning text-white hover:bg-warning/90",info:"border-transparent bg-info text-white hover:bg-info/90","success-soft":"border-success/30 bg-success-soft text-success-deep","warning-soft":"border-warning/30 bg-warning-soft text-warning-deep","destructive-soft":"border-destructive/30 bg-destructive-soft text-destructive-deep","info-soft":"border-info/30 bg-info-soft text-info-deep","highlight-soft":"border-highlight/30 bg-highlight-soft text-highlight-deep","success-outline":"border-success/50 bg-transparent text-success-deep","warning-outline":"border-warning/50 bg-transparent text-warning-deep","destructive-outline":"border-destructive/50 bg-transparent text-destructive-deep","info-outline":"border-info/50 bg-transparent text-info-deep"},rounded:{default:"rounded-md",full:"rounded-full"}},defaultVariants:{variant:"default",rounded:"default"}});function Ko({className:e,variant:t,rounded:o,...r}){return w.createElement("div",{className:p(Rd({variant:t,rounded:o}),e),...r})}var Ht={solid:"",translucent:"gds-surface-translucent",glass:"gds-surface-glass","glass-strong":"gds-surface-glass-strong"};function ro(e,t){return e==="solid"?t:""}var Td=cva("relative flex items-center gap-3 px-4 py-2.5 text-sm leading-relaxed border-b",{variants:{variant:{default:"bg-muted text-foreground border-border [&>svg]:text-muted-foreground",info:"bg-info-soft text-info-deep border-info/30 [&>svg]:text-info-deep",success:"bg-success-soft text-success-deep border-success/30 [&>svg]:text-success-deep",warning:"bg-warning-soft text-warning-deep border-warning/30 [&>svg]:text-warning-deep",destructive:"bg-destructive-soft text-destructive-deep border-destructive/30 [&>svg]:text-destructive-deep",announcement:"bg-[oklch(var(--primary)_/_0.06)] text-foreground border-[oklch(var(--primary)_/_0.18)] [&>svg]:text-primary"},align:{start:"justify-start",center:"justify-center",between:"justify-between"},sticky:{true:"sticky top-0 z-30",false:""}},defaultVariants:{variant:"default",align:"between",sticky:false}}),Qg={destructive:"alert",warning:"alert",info:"status",success:"status",default:"status",announcement:"status"},Pd=w.forwardRef(({className:e,variant:t="default",align:o,sticky:r,surface:a="solid",dismissible:n,onDismiss:i,icon:c,action:s,role:l,children:d,...m},u)=>{let f=t??"default",h=l??Qg[f];return w.createElement("div",{ref:u,role:h,"data-gds-part":"banner","data-variant":f,"data-surface":a,className:p(Td({variant:t,align:o,sticky:r}),Ht[a],e),...m},c?w.createElement("span",{"data-gds-part":"banner-icon","aria-hidden":true,className:"shrink-0"},c):null,w.createElement("div",{"data-gds-part":"banner-content",className:"flex-1 min-w-0"},d),s?w.createElement("span",{"data-gds-part":"banner-action",className:"shrink-0"},s):null,n?w.createElement("button",{type:"button","data-gds-part":"banner-dismiss",onClick:i,"aria-label":"Dismiss",className:"shrink-0 inline-flex h-7 w-7 items-center justify-center rounded-md opacity-70 hover:opacity-100 hover:bg-black/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity"},w.createElement(X,{className:"h-4 w-4"})):null)});Pd.displayName="Banner";var Pn=cva("inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline",raised:"gds-button-raised gds-button-raised-surface"},size:{"2xs":"h-5 gap-1 px-1.5 text-2xs [&_svg]:size-3",xs:"h-6 gap-1 px-2 text-xs [&_svg]:size-3",sm:"h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5",md:"h-8 gap-1.5 px-3 text-base [&_svg]:size-4",default:"h-8 gap-1.5 px-3 text-base [&_svg]:size-4",lg:"h-10 gap-2 px-4 text-lg [&_svg]:size-5"},iconOnly:{true:"px-0",false:""}},compoundVariants:[{size:"2xs",iconOnly:true,class:"w-5"},{size:"xs",iconOnly:true,class:"w-6"},{size:"sm",iconOnly:true,class:"w-7"},{size:"md",iconOnly:true,class:"w-8"},{size:"default",iconOnly:true,class:"w-8"},{size:"lg",iconOnly:true,class:"w-10"}],defaultVariants:{variant:"default",size:"md"}}),Ie=w.forwardRef(({className:e,variant:t,size:o,iconOnly:r,asChild:a=false,raised:n=false,...i},c)=>w.createElement(a?Slot:"button",{"data-gds-part":"button",className:p("gds-button",Pn({variant:t,size:o,iconOnly:r}),n&&"gds-button-raised",e),ref:c,...i}));Ie.displayName="Button";var Nd=cva("w-full",{variants:{pad:{none:"py-0",sm:"py-8 md:py-12",md:"py-12 md:py-16",lg:"py-16 md:py-24",xl:"py-20 md:py-32"}},defaultVariants:{pad:"lg"}}),Ed=w.forwardRef(({className:e,scope:t,background:o,pad:r,as:a="section",children:n,...i},c)=>w.createElement(a,{ref:c,"data-gds-part":"section","data-scope":t,className:p(Nd({pad:r}),t&&`scope-${t}`,o!=null&&"relative overflow-hidden",e),...i},o!=null?w.createElement(w.Fragment,null,w.createElement("div",{"data-gds-part":"section-background",className:"absolute inset-0"},o),w.createElement("div",{className:"relative z-10"},n)):n));Ed.displayName="Section";var Ld=cva("mx-auto w-full px-4 md:px-6 lg:px-8",{variants:{maxW:{sm:"max-w-3xl",md:"max-w-5xl",lg:"max-w-7xl",xl:"max-w-[96rem]",prose:"max-w-prose",full:"max-w-none"},grid:{true:"grid grid-cols-12 gap-6",false:""}},defaultVariants:{maxW:"lg",grid:false}}),Ad=w.forwardRef(({className:e,maxW:t,grid:o,as:r="div",...a},n)=>w.createElement(r,{ref:n,"data-gds-part":"container",className:p(Ld({maxW:t,grid:o}),e),...a}));Ad.displayName="Container";var Dd=w.forwardRef(({className:e,...t},o)=>w.createElement("span",{ref:o,"data-gds-part":"section-eyebrow",className:p("inline-block text-xs font-medium uppercase tracking-wider text-muted-foreground",e),...t}));Dd.displayName="SectionEyebrow";var Id=w.forwardRef(({className:e,...t},o)=>w.createElement("h2",{ref:o,"data-gds-part":"section-title",className:p("text-balance text-3xl font-semibold tracking-tight md:text-4xl",e),style:{fontFamily:"var(--font-heading, var(--font-sans))"},...t}));Id.displayName="SectionTitle";var Hd=w.forwardRef(({className:e,...t},o)=>w.createElement("p",{ref:o,"data-gds-part":"section-subtitle",className:p("text-lg text-muted-foreground md:text-xl",e),...t}));Hd.displayName="SectionSubtitle";var _d=w.forwardRef(({className:e,...t},o)=>w.createElement("p",{ref:o,"data-gds-part":"section-description",className:p("leading-relaxed text-muted-foreground",e),...t}));_d.displayName="SectionDescription";var Fd=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{ref:o,"data-gds-part":"section-actions",className:p("flex flex-wrap items-center gap-3",e),...t}));Fd.displayName="SectionActions";var Od=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{ref:o,"data-gds-part":"section-media",className:p("w-full",e),...t}));Od.displayName="SectionMedia";function xa({className:e,classNames:t,showOutsideDays:o=true,captionLayout:r="label",buttonVariant:a="ghost",formatters:n,components:i,...c}){let s=getDefaultClassNames();return w.createElement(DayPicker,{showOutsideDays:o,className:p("bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,e),captionLayout:r,formatters:{formatMonthDropdown:l=>l.toLocaleString("default",{month:"short"}),...n},classNames:{root:p("w-fit",s.root),months:p("relative flex flex-col gap-4 md:flex-row",s.months),month:p("flex w-full flex-col gap-4",s.month),nav:p("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",s.nav),button_previous:p(Pn({variant:a}),"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",s.button_previous),button_next:p(Pn({variant:a}),"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",s.button_next),month_caption:p("flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",s.month_caption),dropdowns:p("flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",s.dropdowns),dropdown_root:p("has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",s.dropdown_root),dropdown:p("bg-popover absolute inset-0 opacity-0",s.dropdown),caption_label:p("select-none font-medium",r==="label"?"text-sm":"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",s.caption_label),table:"w-full border-collapse",weekdays:p("flex",s.weekdays),weekday:p("text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",s.weekday),week:p("mt-2 flex w-full",s.week),week_number_header:p("w-[--cell-size] select-none",s.week_number_header),week_number:p("text-muted-foreground select-none text-[0.8rem]",s.week_number),day:p("group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",s.day),range_start:p("bg-accent rounded-l-md",s.range_start),range_middle:p("rounded-none",s.range_middle),range_end:p("bg-accent rounded-r-md",s.range_end),today:p("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",s.today),outside:p("text-muted-foreground aria-selected:text-muted-foreground",s.outside),disabled:p("text-muted-foreground opacity-50",s.disabled),hidden:p("invisible",s.hidden),...t},components:{Root:({className:l,rootRef:d,...m})=>w.createElement("div",{"data-slot":"calendar",ref:d,className:p(l),...m}),Chevron:({className:l,orientation:d,...m})=>d==="left"?w.createElement(ChevronLeftIcon,{className:p("size-4",l),...m}):d==="right"?w.createElement(ChevronRightIcon,{className:p("size-4",l),...m}):w.createElement(ChevronDownIcon,{className:p("size-4",l),...m}),DayButton:Vd,WeekNumber:({children:l,...d})=>w.createElement("td",{...d},w.createElement("div",{className:"flex size-[--cell-size] items-center justify-center text-center"},l)),...i},...c})}function Vd({className:e,day:t,modifiers:o,...r}){let a=getDefaultClassNames(),n=w.useRef(null);return w.useEffect(()=>{o.focused&&n.current?.focus();},[o.focused]),w.createElement(Ie,{ref:n,variant:"ghost",iconOnly:true,"data-day":`${t.date.getFullYear()}-${String(t.date.getMonth()+1).padStart(2,"0")}-${String(t.date.getDate()).padStart(2,"0")}`,"data-selected-single":o.selected&&!o.range_start&&!o.range_end&&!o.range_middle,"data-range-start":o.range_start,"data-range-end":o.range_end,"data-range-middle":o.range_middle,className:p("hover:bg-accent/40 hover:text-foreground","data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",a.day,e),...r})}var Oi=w.createContext(null);function En(e){let t=w.useContext(Oi);if(!t)throw new Error(`<${e}> must be rendered inside a <Carousel> root.`);return t}var ch=5e3,qo=w.forwardRef(({loop:e=true,align:t="start",slidesPerView:o=1,autoplay:r=false,draggable:a=true,onSlideChange:n,className:i,style:c,children:s,...l},d)=>{let m=w.useMemo(()=>({loop:e,align:t,slidesToScroll:1,watchDrag:a,containScroll:e?false:"trimSnaps"}),[e,t,a]),[u,f]=ih(m),[h,g]=w.useState(0),[b,v]=w.useState(0),[C,S]=w.useState(false),[x,y]=w.useState(false),R=w.useRef(new Map),L=w.useRef(n);L.current=n;let D=w.useMemo(()=>r?r===true?{}:r:null,[r]);w.useEffect(()=>{if(!f)return;let T=()=>{g(f.selectedScrollSnap()),v(f.scrollSnapList().length),S(f.canScrollPrev()),y(f.canScrollNext()),L.current?.(f.selectedScrollSnap());};return T(),f.on("select",T),f.on("reInit",T),()=>{f.off("select",T),f.off("reInit",T);}},[f]);let I=w.useCallback(T=>{f&&f.selectedScrollSnap()===T&&f.scrollNext();},[f]),E=w.useRef(false),H=w.useRef(true),z=w.useRef(null);w.useImperativeHandle(d,()=>z.current),w.useEffect(()=>{if(!D?.pauseWhenOffscreen){H.current=true;return}let T=z.current;if(!T||typeof IntersectionObserver>"u")return;let _=new IntersectionObserver(ae=>{H.current=ae.some(te=>te.isIntersecting);},{threshold:.25});return _.observe(T),()=>_.disconnect()},[D?.pauseWhenOffscreen]),w.useEffect(()=>{if(!f||!D)return;let T=null,_=()=>{T&&clearTimeout(T);let re=f.selectedScrollSnap(),he=R.current.get(re)??D.delay??ch;T=setTimeout(()=>{if(E.current||!H.current){_();return}f.scrollNext();},he);},ae=()=>_(),te=()=>{T&&clearTimeout(T);},X=()=>_();return f.on("select",ae),f.on("pointerDown",te),f.on("settle",X),_(),()=>{T&&clearTimeout(T),f.off("select",ae),f.off("pointerDown",te),f.off("settle",X);}},[f,D]);let W=()=>{D?.pauseOnHover!==false&&(E.current=true);},Z=()=>{E.current=false;},O=w.useMemo(()=>({api:f,selectedIndex:h,slideCount:b,canScrollPrev:C,canScrollNext:x,durationsRef:R,advanceFromSlide:I}),[f,h,b,C,x,I]),B=`calc(100% / ${o})`;return w.createElement(Oi.Provider,{value:O},w.createElement("div",{ref:z,"data-gds-part":"carousel",className:p("relative",i),style:{"--gds-carousel-slide-basis":B,...c},onMouseEnter:W,onMouseLeave:Z,...l},w.createElement("div",{ref:u,"data-gds-part":"carousel-viewport",className:"overflow-hidden",style:{borderRadius:"var(--gds-carousel-radius, var(--gds-media-radius, 0.5rem))"}},w.createElement("div",{"data-gds-part":"carousel-track",className:"flex",style:{gap:"var(--gds-carousel-gap, 0)",touchAction:"pan-y pinch-zoom"}},s))))});qo.displayName="Carousel";var wa=w.forwardRef(({duration:e,className:t,style:o,children:r,...a},n)=>{let{durationsRef:i}=En("Carousel.Slide"),c=w.useRef(null);return w.useImperativeHandle(n,()=>c.current),w.useEffect(()=>{if(e==null)return;let s=c.current;if(!s?.parentElement)return;let l=Array.from(s.parentElement.children).indexOf(s);if(l<0)return;let d=i.current;return d.set(l,e),()=>{d.delete(l);}},[e,i]),w.createElement("div",{ref:c,"data-gds-part":"carousel-slide",className:p("min-w-0 shrink-0 grow-0",t),style:{flexBasis:"var(--gds-carousel-slide-basis, 100%)",...o},...a},r)});wa.displayName="Carousel.Slide";var zi=w.forwardRef(({src:e,poster:t,alt:o,controls:r=false,loop:a=true,fit:n="cover",duration:i,className:c,style:s,...l},d)=>{let{api:m,selectedIndex:u,advanceFromSlide:f}=En("Carousel.VideoSlide"),h=w.useRef(null),g=w.useRef(null);w.useImperativeHandle(d,()=>h.current);let[b,v]=w.useState(null);w.useEffect(()=>{let S=h.current;S?.parentElement&&v(Array.from(S.parentElement.children).indexOf(S));},[m]);let C=b!=null&&b===u;return w.useEffect(()=>{let S=g.current;if(S)if(C){let x=S.play();x&&typeof x.catch=="function"&&x.catch(()=>{});}else S.pause(),S.currentTime=0;},[C]),w.createElement(wa,{ref:h,duration:i,className:p("relative overflow-hidden bg-[var(--gds-media-placeholder-bg)]",c),style:s,"data-gds-part":"carousel-video-slide",...l},t&&w.createElement("img",{src:t,alt:o??"","aria-hidden":C,className:"absolute inset-0 h-full w-full",style:{objectFit:n,opacity:C?0:1,transition:"opacity var(--gds-carousel-fade-ms, 200ms) ease-out"}}),w.createElement("video",{ref:g,src:e,muted:true,playsInline:true,loop:a,controls:r,preload:"metadata","aria-label":o,className:"block h-full w-full",style:{objectFit:n,opacity:C?1:0,transition:"opacity var(--gds-carousel-fade-ms, 200ms) ease-out"},onEnded:()=>{a||b!=null&&f(b);}}))});zi.displayName="Carousel.VideoSlide";var Vi=w.forwardRef(({position:e="below",renderDot:t,className:o,style:r,...a},n)=>{let{api:i,selectedIndex:c,slideCount:s}=En("Carousel.Dots");if(s<=1)return null;let l=Array.from({length:s},(m,u)=>u),d=e==="overlay"?{position:"absolute",insetInlineStart:0,insetInlineEnd:0,bottom:"var(--gds-carousel-dots-inset, 0.75rem)",zIndex:1}:{marginBlockStart:"var(--gds-carousel-dots-gap, 0.75rem)"};return w.createElement("div",{ref:n,"data-gds-part":"carousel-dots",className:p("flex items-center justify-center",o),style:{gap:"var(--gds-carousel-dots-spacing, 0.5rem)",...d,...r},...a},l.map(m=>{let u=m===c,f=()=>i?.scrollTo(m);return t?t({index:m,active:u,onClick:f}):w.createElement("button",{key:m,type:"button",onClick:f,"aria-label":`Go to slide ${m+1}`,"aria-current":u?"true":void 0,"data-active":u||void 0,className:"rounded-full transition-all",style:{width:u?"var(--gds-carousel-dot-active-width, 1.25rem)":"var(--gds-carousel-dot-size, 0.5rem)",height:"var(--gds-carousel-dot-size, 0.5rem)",background:u?"var(--gds-carousel-dot-active-color, oklch(var(--primary)))":"var(--gds-carousel-dot-color, oklch(var(--muted-foreground) / 0.4))"}})}))});Vi.displayName="Carousel.Dots";var Bi=w.forwardRef(({position:e="overlay",className:t,style:o,...r},a)=>e==="outside"?w.createElement("div",{ref:a,"data-gds-part":"carousel-arrows",className:p("flex items-center justify-end gap-2 pt-2",t),style:o,...r},w.createElement(Mn,null),w.createElement(Nn,null)):w.createElement("div",{ref:a,"data-gds-part":"carousel-arrows",className:p("pointer-events-none absolute inset-0 z-[1]",t),style:o,...r},w.createElement(Mn,{className:"pointer-events-auto absolute left-[var(--gds-carousel-arrow-inset,0.75rem)] top-1/2 -translate-y-1/2"}),w.createElement(Nn,{className:"pointer-events-auto absolute right-[var(--gds-carousel-arrow-inset,0.75rem)] top-1/2 -translate-y-1/2"})));Bi.displayName="Carousel.Arrows";var Mn=w.forwardRef(({className:e,style:t,children:o,...r},a)=>{let{api:n,canScrollPrev:i}=En("Carousel.Prev");return w.createElement("button",{ref:a,type:"button","data-gds-part":"carousel-prev","aria-label":"Previous slide",disabled:!i,onClick:()=>n?.scrollPrev(),className:p("inline-flex items-center justify-center rounded-full","transition disabled:opacity-40 disabled:cursor-not-allowed","hover:[background:var(--gds-carousel-arrow-hover-bg,oklch(var(--background)))]",e),style:{width:"var(--gds-carousel-arrow-size, 2.25rem)",height:"var(--gds-carousel-arrow-size, 2.25rem)",background:"var(--gds-carousel-arrow-bg, oklch(var(--background) / 0.85))",color:"var(--gds-carousel-arrow-fg, oklch(var(--foreground)))",backdropFilter:"var(--gds-carousel-arrow-backdrop, blur(6px))",boxShadow:"var(--gds-carousel-arrow-shadow, 0 2px 8px oklch(0 0 0 / 0.12))",...t},...r},o??w.createElement(ChevronLeft,{className:"h-4 w-4","aria-hidden":true}))});Mn.displayName="Carousel.Prev";var Nn=w.forwardRef(({className:e,style:t,children:o,...r},a)=>{let{api:n,canScrollNext:i}=En("Carousel.Next");return w.createElement("button",{ref:a,type:"button","data-gds-part":"carousel-next","aria-label":"Next slide",disabled:!i,onClick:()=>n?.scrollNext(),className:p("inline-flex items-center justify-center rounded-full","transition disabled:opacity-40 disabled:cursor-not-allowed","hover:[background:var(--gds-carousel-arrow-hover-bg,oklch(var(--background)))]",e),style:{width:"var(--gds-carousel-arrow-size, 2.25rem)",height:"var(--gds-carousel-arrow-size, 2.25rem)",background:"var(--gds-carousel-arrow-bg, oklch(var(--background) / 0.85))",color:"var(--gds-carousel-arrow-fg, oklch(var(--foreground)))",backdropFilter:"var(--gds-carousel-arrow-backdrop, blur(6px))",boxShadow:"var(--gds-carousel-arrow-shadow, 0 2px 8px oklch(0 0 0 / 0.12))",...t},...r},o??w.createElement(ChevronRight,{className:"h-4 w-4","aria-hidden":true}))});Nn.displayName="Carousel.Next";qo.Slide=wa;qo.VideoSlide=zi;qo.Dots=Vi;qo.Arrows=Bi;qo.Prev=Mn;qo.Next=Nn;var dh=qo;function ph(){return w.useContext(Oi)?.api}var Sa=w.forwardRef(({className:e,surface:t="solid",...o},r)=>w.createElement("div",{ref:r,"data-gds-part":"card","data-surface":t,className:p("gds-card rounded-xl border text-card-foreground shadow",ro(t,"bg-card"),Ht[t],e),...o}));Sa.displayName="Card";var Bd=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{ref:o,"data-gds-part":"card-header",className:p("flex flex-col space-y-1.5 p-6",e),...t}));Bd.displayName="CardHeader";var Gd=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{ref:o,"data-gds-part":"card-title",className:p("font-semibold leading-none tracking-tight",e),...t}));Gd.displayName="CardTitle";var $d=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{ref:o,"data-gds-part":"card-description",className:p("text-sm text-muted-foreground",e),...t}));$d.displayName="CardDescription";var Wd=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{ref:o,"data-gds-part":"card-content",className:p("p-6 pt-0",e),...t}));Wd.displayName="CardContent";var Ud=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{ref:o,"data-gds-part":"card-footer",className:p("flex items-center p-6 pt-0",e),...t}));Ud.displayName="CardFooter";var jd=w.forwardRef(({className:e,...t},o)=>w.createElement(Ln.Root,{ref:o,className:p("gds-checkbox peer h-4 w-4 shrink-0 rounded-[3px] border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",e),...t},w.createElement(Ln.Indicator,{className:p("flex items-center justify-center text-current")},w.createElement(Check,{className:"h-4 w-4"}))));jd.displayName=Ln.Root.displayName;var Gi=w.createContext(null),Ca=w.forwardRef(({className:e,...t},o)=>{let r=w.useContext(Gi);return w.createElement("label",{ref:o,htmlFor:r?.controlId,className:p("text-sm font-medium leading-none text-foreground cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",e),...t})});Ca.displayName="Field.Label";var ka=w.forwardRef(({className:e,...t},o)=>{let r=w.useContext(Gi);return w.createElement("p",{ref:o,id:r?.descriptionId,className:p("text-sm text-muted-foreground",e),...t})});ka.displayName="Field.Description";var Ra=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{ref:o,className:p("flex shrink-0 items-center gap-2",e),...t}));Ra.displayName="Field.Trailing";var Kd=w.forwardRef(({layout:e="option",className:t,children:o,...r},a)=>{let n=w.useId(),i=null,c=null,s=null,l=null;w.Children.forEach(o,v=>{w.isValidElement(v)&&(v.type===Ca?i=v:v.type===ka?c=v:v.type===Ra?s=v:l||(l=v));});let d=l,m=d?.props??{},u=m.id??`${n}-control`,f=c?`${n}-description`:void 0,h=[m["aria-describedby"],f].filter(Boolean).join(" ")||void 0,g=d?w.cloneElement(d,{id:u,"aria-describedby":h}):null,b=w.createElement("div",{className:"flex min-w-0 flex-col gap-0.5"},i,c);return w.createElement(Gi.Provider,{value:{controlId:u,descriptionId:f}},w.createElement("div",{ref:a,"data-gds-part":"field","data-layout":e,className:p("flex gap-3",e==="setting"?"items-center justify-between":c?"items-start":"items-center",t),...r},e==="setting"?w.createElement(w.Fragment,null,b,w.createElement("div",{className:"flex shrink-0 items-center gap-2"},s,g)):w.createElement(w.Fragment,null,w.createElement("div",{className:p("shrink-0",c?"mt-0.5":void 0)},g),w.createElement("div",{className:"flex min-w-0 flex-1 flex-col gap-0.5"},i,c),s)))});Kd.displayName="Field";var mh=Object.assign(Kd,{Label:Ca,Description:ka,Trailing:Ra});var qd=w.createContext({layout:"row",align:"center",divider:false}),fh={compact:"var(--gds-property-list-row-gap-compact, 0.375rem)",default:"var(--gds-property-list-row-gap, 0.625rem)",relaxed:"var(--gds-property-list-row-gap-relaxed, 1rem)"},Yd=w.forwardRef(({layout:e="row",density:t="default",align:o="center",divider:r=false,labelWidth:a,className:n,style:i,children:c,...s},l)=>w.createElement(qd.Provider,{value:{layout:e,align:o,divider:r}},w.createElement("dl",{ref:l,"data-gds-part":"property-list","data-layout":e,"data-density":t,className:p("flex min-w-0 flex-col",n),style:{rowGap:fh[t],...a?{"--gds-property-list-label-width":a}:{},...i},...s},c)));Yd.displayName="PropertyList";var $i=w.forwardRef(({label:e,icon:t,value:o,align:r,className:a,children:n,...i},c)=>{let{layout:s,align:l,divider:d}=w.useContext(qd),m=r??l,u=o??n;return w.createElement("div",{ref:c,"data-gds-part":"property",className:p("grid",d&&"border-t border-[color:var(--gds-property-list-divider-color,oklch(var(--border)))] pt-[var(--gds-property-list-row-gap,0.625rem)] first:border-t-0 first:pt-0",a),style:{gridTemplateColumns:s==="stack"?"minmax(0, 1fr)":"var(--gds-property-list-label-width, 8.5rem) minmax(0, 1fr)",columnGap:"var(--gds-property-list-col-gap, 1rem)",rowGap:s==="stack"?"0.25rem":void 0,alignItems:m==="start"?"start":"center"},...i},w.createElement("dt",{"data-gds-part":"property-label",className:p("flex min-w-0 items-center gap-1.5 text-sm text-[color:var(--gds-property-list-label-color,oklch(var(--muted-foreground)))]",m==="start"&&"pt-px")},t?w.createElement("span",{"data-gds-part":"property-icon","aria-hidden":true,className:"flex shrink-0 items-center justify-center text-current [&_svg]:h-[var(--gds-property-list-icon-size,0.875rem)] [&_svg]:w-[var(--gds-property-list-icon-size,0.875rem)]"},t):null,w.createElement("span",{className:"truncate"},e)),w.createElement("dd",{"data-gds-part":"property-value",className:"m-0 min-w-0 text-sm text-foreground"},u))});$i.displayName="PropertyList.Row";var gh=Object.assign(Yd,{Row:$i});function Wi({label:e,description:t,aside:o,hideIndicator:r,indicatorPosition:a="trailing",titleId:n,descriptionId:i,indicator:c,children:s}){let l=s!=null?w.createElement("div",{className:"gds-selection-card__slot"},s):w.createElement("div",{className:"gds-selection-card__content"},e!=null&&w.createElement("span",{id:n,className:"gds-selection-card__title"},e),t!=null&&w.createElement("span",{id:i,className:"gds-selection-card__desc"},t)),d=r?null:c;return a==="leading"?w.createElement(w.Fragment,null,d,l,o):w.createElement(w.Fragment,null,l,o,d)}var bh=w.createElement("span",{className:"gds-selection-indicator gds-selection-indicator--radio","aria-hidden":true},w.createElement(or.Indicator,{className:"gds-selection-indicator__dot"})),vh=w.createElement("span",{className:"gds-selection-indicator gds-selection-indicator--checkbox","aria-hidden":true},w.createElement(Ln.Indicator,{className:"gds-selection-indicator__check"},w.createElement(Check,{className:"h-3.5 w-3.5",strokeWidth:3}))),yh=w.createElement("span",{className:"gds-selection-indicator gds-selection-indicator--switch","aria-hidden":true},w.createElement(oa.Thumb,{className:"gds-selection-indicator__thumb"})),Zd=w.forwardRef(({className:e,label:t,description:o,aside:r,hideIndicator:a,indicatorPosition:n="trailing",children:i,...c},s)=>{let l=w.useId(),d=t!=null?`${l}-t`:void 0,m=o!=null?`${l}-d`:void 0;return w.createElement(or.Item,{ref:s,"data-gds-part":"radio-card","data-indicator":n,"aria-labelledby":d,"aria-describedby":m,className:p("gds-selection-card",e),...c},w.createElement(Wi,{label:t,description:o,aside:r,hideIndicator:a,indicatorPosition:n,titleId:d,descriptionId:m,indicator:bh},i))});Zd.displayName="RadioCard";var Xd=w.forwardRef(({className:e,label:t,description:o,aside:r,hideIndicator:a,indicatorPosition:n="trailing",children:i,...c},s)=>{let l=w.useId(),d=t!=null?`${l}-t`:void 0,m=o!=null?`${l}-d`:void 0;return w.createElement(Ln.Root,{ref:s,"data-gds-part":"checkbox-card","data-indicator":n,"aria-labelledby":d,"aria-describedby":m,className:p("gds-selection-card",e),...c},w.createElement(Wi,{label:t,description:o,aside:r,hideIndicator:a,indicatorPosition:n,titleId:d,descriptionId:m,indicator:vh},i))});Xd.displayName="CheckboxCard";var Jd=w.forwardRef(({className:e,label:t,description:o,aside:r,hideIndicator:a,indicatorPosition:n="trailing",children:i,...c},s)=>{let l=w.useId(),d=t!=null?`${l}-t`:void 0,m=o!=null?`${l}-d`:void 0;return w.createElement(oa.Root,{ref:s,"data-gds-part":"switch-card","data-indicator":n,"aria-labelledby":d,"aria-describedby":m,className:p("gds-selection-card",e),...c},w.createElement(Wi,{label:t,description:o,aside:r,hideIndicator:a,indicatorPosition:n,titleId:d,descriptionId:m,indicator:yh},i))});Jd.displayName="SwitchCard";var Zr={slow:{tokenStagger:70,lineStagger:200,preDelay:500,fadeMs:480},normal:{tokenStagger:22,lineStagger:55,preDelay:200,fadeMs:280},fast:{tokenStagger:8,lineStagger:18,preDelay:60,fadeMs:160}},Na=.55;function De(e,t){return e<=0?Promise.resolve():new Promise((o,r)=>{if(t?.aborted){r(new DOMException("Aborted","AbortError"));return}let a=window.setTimeout(()=>{t?.removeEventListener("abort",n),o();},e),n=()=>{window.clearTimeout(a),r(new DOMException("Aborted","AbortError"));};t?.addEventListener("abort",n,{once:true});})}async function Ea(e,t,o=22,r){if(o<=0){t(e);return}for(let a=1;a<=e.length;a++)t(e.slice(0,a)),a<e.length&&await De(o,r);}function Ui(e){return e instanceof DOMException&&e.name==="AbortError"}var An="data-motion",Qd="off",ep="(prefers-reduced-motion: reduce)";function xh(){if(typeof window>"u"||typeof document>"u")return false;let e=window.matchMedia(ep).matches,t=document.documentElement.getAttribute(An)===Qd;return e||t}function Io(){let[e,t]=w.useState(false);return w.useEffect(()=>{let o=()=>t(xh());o();let r=window.matchMedia(ep);r.addEventListener("change",o);let a=new MutationObserver(o);return a.observe(document.documentElement,{attributes:true,attributeFilter:[An]}),()=>{r.removeEventListener("change",o),a.disconnect();}},[]),e}var Yo=Io;function Dn(){let[e,t]=w.useState(true);return w.useEffect(()=>{let o=window.self!==window.top,r=()=>document.visibilityState!=="hidden"&&(o||document.hasFocus()),a=()=>t(r());return a(),document.addEventListener("visibilitychange",a),window.addEventListener("focus",a),window.addEventListener("blur",a),window.addEventListener("pageshow",a),()=>{document.removeEventListener("visibilitychange",a),window.removeEventListener("focus",a),window.removeEventListener("blur",a),window.removeEventListener("pageshow",a);}},[]),e}function wh(e){if(typeof document>"u")return;let t=document.documentElement;e?t.removeAttribute(An):t.setAttribute(An,Qd);}var Sh=2e3,Ch={tokenStagger:0,lineStagger:0,preDelay:0,fadeMs:0};function Zo(e){let{steps:t,interpret:o,speed:r="normal",trigger:a="mount",play:n,loop:i=false,loopDelay:c=Sh,maxLoops:s=1/0,containerRef:l,onComplete:d,onLoopReset:m}=e,u=Io(),f=u?Ch:Zr[r],h=u?false:i,g=Dn(),[b,v]=w.useState(false),[C,S]=w.useState(false),[x,y]=w.useState(-1),R=w.useRef(null),L=useInView(l??R,{once:true,amount:Na}),D=useInView(l??R,{amount:Na}),I=g&&(l?D:true),[E,H]=w.useState(0),z=w.useMemo(()=>a==="mount"?true:a==="inView"?L:!!n||E>0,[a,L,n,E]),W=w.useRef(o);W.current=o;let Z=w.useRef(d);Z.current=d;let O=w.useRef(m);O.current=m;let B=w.useRef(null),T=w.useRef(null),_=w.useCallback(()=>{B.current?.abort(),B.current=null,T.current!==null&&(window.clearTimeout(T.current),T.current=null),v(false);},[]),ae=w.useCallback(()=>{H(X=>X+1);},[]),te=w.useCallback((X=0)=>{if(B.current?.abort(),B.current=null,T.current!==null&&(window.clearTimeout(T.current),T.current=null),X>0){T.current=window.setTimeout(()=>{T.current=null,H(re=>re+1);},X);return}H(re=>re+1);},[]);return w.useEffect(()=>()=>{T.current!==null&&(window.clearTimeout(T.current),T.current=null);},[]),w.useEffect(()=>{if(!t||t.length===0||!u&&(!z||!I))return;let X=new AbortController;B.current=X;let{signal:re}=X,Me={speed:f,signal:re,cancelled:()=>re.aborted,reduced:u},le=true,A=0;return (async()=>{do{v(true),S(false),y(-1);try{await De(a==="inView"?f.preDelay:0,re);for(let J=0;J<t.length;J++){if(re.aborted)return;y(J),await W.current(t[J],Me);}if(re.aborted)return;if(y(-1),S(!0),Z.current?.(),A+=1,!h||A>=s){v(!1);return}if(await De(c,re),re.aborted)return;O.current?.();}catch(J){if(Ui(J))return;process.env.NODE_ENV!=="production"&&console.error("[useScriptedDemo] step error:",J),v(false);return}}while(le&&h&&!re.aborted)})(),()=>{le=false,X.abort(),B.current===X&&(B.current=null);}},[t,z,I,h,c,f,a,E,u]),{isPlaying:b,isComplete:C,currentIndex:x,play:ae,stop:_,restart:te}}var Aa=w.forwardRef(function({variant:t="inline",className:o,...r},a){return w.createElement("span",{ref:a,"data-gds-part":"demo-cursor","data-gds-variant":t,"aria-hidden":true,className:p("gds-demo-cursor",o),...r})});var op=w.createContext({visible:new Set,hasStage:false,reducedMotion:false,defaultAnimation:"fade-up"});function rp({steps:e,speed:t="normal",trigger:o="mount",play:r,loop:a=false,defaultAnimation:n="fade-up",visibleWhenIdle:i=true,className:c,children:s}){let l=useReducedMotion()??false,d=w.useRef(null),[m,u]=w.useState(()=>new Set),f=!!(e&&e.length);Zo({steps:f?e:void 0,speed:t,trigger:o,play:r,loop:a,containerRef:d,onLoopReset:()=>u(new Set),interpret:async(b,v)=>{if(b.type==="wait")return De(b.ms,v.signal);if(b.type==="reset")return u(new Set),De(v.speed.preDelay,v.signal);if(b.type==="reveal")return u(C=>{if(C.has(b.target))return C;let S=new Set(C);return S.add(b.target),S}),De(v.speed.lineStagger,v.signal);if(b.type==="reveal-all")return u(C=>{let S=new Set(C);return S.add("__all__"),S}),De(v.speed.lineStagger,v.signal);if(b.type==="hide")return u(C=>{if(!C.has(b.target))return C;let S=new Set(C);return S.delete(b.target),S}),De(v.speed.fadeMs,v.signal)}});let h=w.useMemo(()=>({visible:f?m:new Set(["__all__"]),hasStage:true,reducedMotion:l,defaultAnimation:n}),[f,m,l,n]),g=!f&&!i?{...h,visible:new Set}:h;return w.createElement("div",{ref:d,"data-gds-part":"demo-stage","data-gds-stage-playing":f?"true":"false",className:c},w.createElement(op.Provider,{value:g},s))}var Th={fade:{initial:{opacity:0},animate:{opacity:1}},"fade-up":{initial:{opacity:0,y:12},animate:{opacity:1,y:0}},"fade-down":{initial:{opacity:0,y:-12},animate:{opacity:1,y:0}},"fade-left":{initial:{opacity:0,x:12},animate:{opacity:1,x:0}},"fade-right":{initial:{opacity:0,x:-12},animate:{opacity:1,x:0}},scale:{initial:{opacity:0,scale:.96},animate:{opacity:1,scale:1}},none:{initial:{opacity:1},animate:{opacity:1}}};function np({id:e,animation:t,durationMs:o,hideOutsideStage:r=false,onReveal:a,onHide:n,className:i,children:c}){let s=w.useContext(op),l=s.hasStage?s.visible.has("__all__")||s.visible.has(e):!r,d=w.useRef(l),m=w.useRef(a),u=w.useRef(n);m.current=a,u.current=n,w.useEffect(()=>{l!==d.current&&(d.current=l,l?m.current?.():u.current?.());},[l]);let f=t??s.defaultAnimation,h=Th[f],g=(o??280)/1e3;return s.reducedMotion?w.createElement("div",{"data-gds-part":"reveal","data-gds-reveal-id":e,"data-gds-revealed":l?"true":"false",className:i,style:{opacity:l?1:0}},c):w.createElement(motion.div,{"data-gds-part":"reveal","data-gds-reveal-id":e,"data-gds-revealed":l?"true":"false",className:i,initial:h.initial,animate:l?h.animate:h.initial,transition:{duration:g,ease:[.22,1,.36,1]}},c)}var Nh={xs:"text-xs",sm:"text-sm",md:"text-base"},Eh={slow:{lineStagger:200,tokenStagger:70,preDelay:500,fadeMs:480},normal:{lineStagger:55,tokenStagger:22,preDelay:200,fadeMs:280},fast:{lineStagger:18,tokenStagger:8,preDelay:60,fadeMs:160}},Lh={plain:{color:"var(--gds-code-fg)",backgroundColor:"transparent"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"var(--gds-code-comment)",fontStyle:"normal"}},{types:["punctuation"],style:{color:"var(--gds-code-punctuation)"}},{types:["property","constant","symbol","deleted"],style:{color:"var(--gds-code-property)"}},{types:["boolean","number"],style:{color:"var(--gds-code-number)"}},{types:["selector","attr-name","string","char","builtin","inserted"],style:{color:"var(--gds-code-string)"}},{types:["operator","entity","url"],style:{color:"var(--gds-code-operator)"}},{types:["atrule","keyword"],style:{color:"var(--gds-code-keyword)"}},{types:["function","class-name"],style:{color:"var(--gds-code-function)"}},{types:["regex","important","variable"],style:{color:"var(--gds-code-variable)"}},{types:["tag"],style:{color:"var(--gds-code-tag)"}},{types:["attr-name"],style:{color:"var(--gds-code-attr-name)"}},{types:["attr-value"],style:{color:"var(--gds-code-attr-value)"}}]};function Ah(e){let t=new Set;if(e==null)return t;let o=Array.isArray(e)?e:[e];for(let r of o)if(typeof r=="number")t.add(r);else if(Array.isArray(r)&&r.length===2){let[a,n]=r;for(let i=a;i<=n;i++)t.add(i);}return t}function Dh(e,t,o){return t?.added?.includes(e)?"added":t?.removed?.includes(e)?"removed":o.has(e)?"highlight":"default"}var ip=w.forwardRef(function({source:t,language:o="tsx",highlight:r,diff:a,reveal:n="none",trigger:i="mount",play:c,speed:s="normal",delay:l,stagger:d,showLineNumbers:m=false,filename:u,wrap:f=false,bare:h=false,prompt:g,cursor:b,steps:v,loop:C=false,size:S="sm",height:x,maxLines:y,className:R,style:L,...D},I){let E=Eh[s],H=l??0,z=d??(n==="typewriter"?E.tokenStagger:E.lineStagger),W=!!(v&&v.length),[Z,O]=w.useState(""),[B,T]=w.useState(()=>new Set),_=W?Z:t??"",ae=w.useMemo(()=>_.replace(/\n$/,""),[_]),te=w.useMemo(()=>Ah(r),[r]),X=!!(a?.added?.length||a?.removed?.length),re=m||X,he=w.useRef(null);w.useImperativeHandle(I,()=>he.current);let[Me,le]=w.useState(n==="none"),A=useInView(he,{once:true,amount:.55}),oe=i==="inView"?E.preDelay:0,J=i==="mount"?true:i==="inView"?A:!!c,ke=z,Q=ae.split(`
|
|
108
|
-
`).length
|
|
109
|
-
`)?
|
|
110
|
-
`:
|
|
111
|
-
`).length,
|
|
112
|
-
`).length,
|
|
107
|
+
</Card>`,import:"@gradeui/ui",subcomponents:["ToolbarSlot"],composesWith:["Button","Avatar","Input","Logo","Badge","AppShellHeader","Card","Row","Stack"],styleDefaults:{ToolbarSlot:"flex items-center min-w-0"},props:{leading:{schema:z.unknown().optional(),design:"plumbing",description:"left-aligned region (logo + primary nav)"},center:{schema:z.unknown().optional(),design:"plumbing",description:"center region (search, page title, segmented control)"},trailing:{schema:z.unknown().optional(),design:"plumbing",description:"right-aligned region (action icons, avatar, primary CTA)"},children:{schema:z.unknown().optional(),design:"plumbing",description:"escape hatch; bypasses slot layout"},position:{schema:z.enum(["top","bottom","inline"]).optional(),design:"knob",description:"border placement",default:"top"},variant:{schema:z.enum(["default","subtle","transparent"]).optional(),design:"knob",default:"default"},size:{schema:z.enum(["sm","md","lg"]).optional(),design:"knob",description:"height + padding",default:"md"},sticky:{schema:z.boolean().optional(),design:"knob",description:"pin to top/bottom of scroll container",default:false},"aria-label":{schema:z.string().optional(),design:"content",description:"required by WAI-ARIA toolbar pattern",default:"Toolbar"},className:{schema:z.string().optional(),design:"plumbing"}}};var Wl={name:"Tooltip",description:"A short, non-essential label that explains a control on hover/focus \u2014 icon-only buttons in toolbars, abbreviated column headers, status dots. NEVER hide critical info inside a tooltip \u2014 they're invisible on touch and can be skipped by screen readers if implemented carelessly. For richer hover content use HoverCard. For inline help text that's always visible, use a description paragraph.",import:"@gradeui/ui",aliases:["tooltip","tip","hover tip","hint","label on hover","help tag","hint","helper text bubble","info tip"],subcomponents:["TooltipTrigger","TooltipContent","TooltipProvider"],composesWith:["Button (icon-only)","Toggle","TabsTrigger (the canonical tabs already have a `tooltip` prop that wraps this)","Avatar (status badge meaning)"],styleDefaults:{TooltipContent:"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]"},props:{delayDuration:{schema:z.number().optional(),design:"knob",description:"ms hover before show; mount ONCE near the app root"},skipDelayDuration:{schema:z.number().optional(),design:"knob",description:'ms gap that still feels like "same hover"'},open:{schema:z.unknown().optional(),design:"plumbing"},defaultOpen:{schema:z.unknown().optional(),design:"plumbing"},onOpenChange:{schema:z.unknown().optional(),design:"event"},asChild:{schema:z.boolean().optional(),design:"plumbing",description:"usually wraps a Button or icon"},side:{schema:z.enum(["top","right","bottom","left"]).optional(),design:"knob",default:"top"},align:{schema:z.enum(["start","center","end"]).optional(),design:"knob"},sideOffset:{schema:z.number().optional(),design:"knob"}}};var Ul={name:"VideoPlayer",description:"HTML5 video wrapped in the shared media surface. Controls-on for a standard player, controls-off (+ autoplay/muted/loop) for hero / background video. Prefer Rive for anything interactive, Three Scene for shader backgrounds.",import:"@gradeui/ui",aliases:["video","mp4","movie","webm","clip","video view","av player","react native video","video element"],composesWith:["MediaSurface (internal)","Card (wrap for thumbnail grids)"],styleDefaults:{VideoPlayer:"w-full h-full"},props:{src:{schema:z.string(),design:"content",description:"video URL"},controls:{schema:z.boolean().optional(),design:"knob",description:"show native controls; false for chromeless hero/background video",default:true},autoPlay:{schema:z.boolean().optional(),design:"knob",description:"forces muted=true (browser restriction)",default:false},loop:{schema:z.boolean().optional(),design:"knob",default:false},muted:{schema:z.boolean().optional(),design:"knob",default:false},pauseOffscreen:{schema:z.boolean().optional(),design:"knob",description:"pause when scrolled out of viewport",default:true},aspect:{schema:z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"video"},radius:{schema:z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"driven by `--gds-media-radius`",default:"lg"},objectFit:{schema:z.enum(["cover","contain","fill"]).optional(),design:"knob",default:"cover"},poster:{schema:z.string().optional(),design:"content",description:'image shown before playback. Always rendered as a `loading="lazy"` `<img>` overlay (not the native `poster` attribute, which fetches eagerly).'},playbackRate:{schema:z.number().optional(),design:"knob"}}};var $n={Accordion:vs,AiChat:ys,AiChatComposer:xs,AppShell:ws,Avatar:ks,BackgroundFill:Ss,Badge:Cs,Banner:Ts,Breadcrumb:Ps,Button:Ms,Calendar:Ns,Callout:Es,Card:Ds,Carousel:As,Chart:Is,Checkbox:Hs,CheckboxCard:Fs,Code:zs,Collapsible:Vs,ColorPicker:Bs,Combobox:Os,Command:_s,Composer:Gs,DataView:Ws,DatePicker:Us,Dialog:$s,DropdownMenu:js,Field:qs,FillPicker:Ys,Flex:Zs,GradientEditor:Js,Grid:Qs,HoverCard:el,Input:tl,Label:al,Logo:rl,Map:nl,MediaSurface:Gn,Message:il,Motion:sl,MultiSelect:ll,Popover:cl,Progress:dl,PropertyList:pl,RadioCard:ul,RadioGroup:ml,Resizable:gl,RivePlayer:fl,Row:hl,ScreenAnimator:bl,ScrollArea:vl,Section:yl,SectionBlock:xl,Select:wl,Separator:kl,ShaderPresetPicker:Sl,ShaderPresetPreview:Rl,Sheet:Cl,Sidebar:Tl,Skeleton:Pl,Slider:Ml,Sortable:Nl,Stack:El,Swatch:Ll,Switch:Dl,SwitchCard:Al,Table:Hl,Tabs:Fl,Textarea:zl,ThreeScene:Vl,Toast:Bl,Toggle:Ol,ToggleGroup:_l,Toolbar:Gl,Tooltip:Wl,VideoPlayer:Ul};function $m(e){return e?$n[e]??null:null}function jm(){return Object.keys($n)}function d(...e){return twMerge(clsx(e))}var Zm=Ot.Root,$l=y.forwardRef(({className:e,...t},o)=>y.createElement(Ot.Item,{ref:o,className:d("border-b",e),...t}));$l.displayName="AccordionItem";var jl=y.forwardRef(({className:e,children:t,...o},a)=>y.createElement(Ot.Header,{className:"flex"},y.createElement(Ot.Trigger,{ref:a,className:d("flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",e),...o},t,y.createElement(ChevronDown,{className:"h-4 w-4 shrink-0 transition-transform duration-200"}))));jl.displayName=Ot.Trigger.displayName;var Kl=y.forwardRef(({className:e,children:t,...o},a)=>y.createElement(Ot.Content,{ref:a,className:"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",...o},y.createElement("div",{className:d("pb-4 pt-0",e)},t)));Kl.displayName=Ot.Content.displayName;var ql=cva("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",{variants:{variant:{default:"bg-background text-foreground [&>svg]:text-foreground",destructive:"border-destructive/30 bg-destructive-soft text-destructive-deep [&>svg]:text-destructive-deep",success:"border-success/30 bg-success-soft text-success-deep [&>svg]:text-success-deep",warning:"border-warning/30 bg-warning-soft text-warning-deep [&>svg]:text-warning-deep",info:"border-info/30 bg-info-soft text-info-deep [&>svg]:text-info-deep"}},defaultVariants:{variant:"default"}}),Jm={destructive:"alert",warning:"alert",info:"status",success:"status",default:"status"},Yl=y.forwardRef(({className:e,variant:t,role:o,...a},r)=>y.createElement("div",{ref:r,role:o??Jm[t??"default"],"data-gds-part":"callout",className:d(ql({variant:t}),e),...a}));Yl.displayName="Callout";var Zl=y.forwardRef(({className:e,...t},o)=>y.createElement("h5",{ref:o,"data-gds-part":"callout-title",className:d("mb-1 font-medium leading-none tracking-tight",e),...t}));Zl.displayName="CalloutTitle";var Xl=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{ref:o,"data-gds-part":"callout-description",className:d("text-sm [&_p]:leading-relaxed",e),...t}));Xl.displayName="CalloutDescription";var Jl=cva("gds-app-shell min-h-screen w-full bg-background text-foreground grid",{variants:{nav:{none:"",top:"",side:"","three-pane":""}},defaultVariants:{nav:"none"}}),Ql=cva("gds-app-shell-header",{variants:{sticky:{true:"sticky top-0 z-30",false:""}},defaultVariants:{sticky:false}}),ec=cva("gds-app-shell-nav",{variants:{placement:{top:"border-b bg-background",side:"border-r bg-background",none:"hidden"},sticky:{true:"",false:""}},compoundVariants:[{placement:"top",sticky:true,className:"sticky top-0 z-30"},{placement:"side",sticky:true,className:"sticky top-0 h-screen self-start"}],defaultVariants:{placement:"top",sticky:true}}),tc=cva("gds-app-shell-aside min-w-0 border-r bg-background",{variants:{sticky:{true:"sticky top-0 h-screen self-start",false:""}},defaultVariants:{sticky:false}}),oc=cva("gds-app-shell-main min-w-0",{variants:{maxWidth:{full:"w-full",container:"w-full mx-auto max-w-7xl px-4 md:px-6 lg:px-8"}},defaultVariants:{maxWidth:"full"}}),ac=cva("gds-app-shell-footer border-t bg-background"),rc=y.forwardRef(({className:e,nav:t,asChild:o=false,...a},r)=>y.createElement(o?Slot:"div",{ref:r,"data-gds-part":"app-shell","data-nav":t??"none",className:d(Jl({nav:t,className:e})),...a}));rc.displayName="AppShell";var nc=y.forwardRef(({className:e,sticky:t,asChild:o=false,...a},r)=>y.createElement(o?Slot:"header",{ref:r,"data-gds-part":"app-shell-header",className:d(Ql({sticky:t,className:e})),...a}));nc.displayName="AppShellHeader";var ic=y.forwardRef(({className:e,placement:t,sticky:o,asChild:a=false,...r},n)=>y.createElement(a?Slot:"nav",{ref:n,"data-gds-part":"app-shell-nav","data-placement":t??"top",className:d(ec({placement:t,sticky:o,className:e})),...r}));ic.displayName="AppShellNav";var sc=y.forwardRef(({className:e,sticky:t,asChild:o=false,...a},r)=>y.createElement(o?Slot:"aside",{ref:r,"data-gds-part":"app-shell-aside",className:d(tc({sticky:t,className:e})),...a}));sc.displayName="AppShellAside";var lc=y.forwardRef(({className:e,maxWidth:t,asChild:o=false,...a},r)=>y.createElement(o?Slot:"main",{ref:r,"data-gds-part":"app-shell-main",className:d(oc({maxWidth:t,className:e})),...a}));lc.displayName="AppShellMain";var cc=y.forwardRef(({className:e,asChild:t=false,...o},a)=>y.createElement(t?Slot:"footer",{ref:a,"data-gds-part":"app-shell-footer",className:d(ac({className:e})),...o}));cc.displayName="AppShellFooter";var Qm=cva("relative flex shrink-0 overflow-hidden rounded-full",{variants:{size:{"2xs":"h-5 w-5",xs:"h-6 w-6",sm:"h-7 w-7",md:"h-10 w-10",lg:"h-14 w-14",xl:"h-20 w-20"}},defaultVariants:{size:"md"}}),pc=y.forwardRef(({className:e,size:t,...o},a)=>y.createElement(So.Root,{ref:a,"data-gds-part":"avatar","data-gds-size":t??"md",className:d(Qm({size:t}),e),...o}));pc.displayName=So.Root.displayName;var uc=y.forwardRef(({className:e,...t},o)=>y.createElement(So.Image,{ref:o,"data-gds-part":"avatar-image",className:d("aspect-square h-full w-full",e),...t}));uc.displayName=So.Image.displayName;var eg=cva("flex h-full w-full items-center justify-center rounded-full font-semibold",{variants:{tone:{muted:"bg-muted text-foreground",primary:"bg-primary/15 text-primary",violet:"bg-violet-500/20 text-violet-600 dark:text-violet-400",amber:"bg-amber-500/20 text-amber-600 dark:text-amber-400",emerald:"bg-emerald-500/20 text-emerald-600 dark:text-emerald-400",sky:"bg-sky-500/20 text-sky-600 dark:text-sky-400",rose:"bg-rose-500/20 text-rose-600 dark:text-rose-400",plum:"bg-fuchsia-500/20 text-fuchsia-600 dark:text-fuchsia-400",lime:"bg-lime-500/20 text-lime-600 dark:text-lime-400"}},defaultVariants:{tone:"muted"}}),mc=y.forwardRef(({className:e,tone:t,...o},a)=>y.createElement(So.Fallback,{ref:a,"data-gds-part":"avatar-fallback","data-gds-tone":t??"muted",className:d(eg({tone:t}),e),...o}));mc.displayName=So.Fallback.displayName;var fc=cva("inline-flex items-center gap-1 border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 [&_svg]:size-3 [&_svg]:shrink-0",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",destructive:"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",outline:"text-foreground",highlight:"border-transparent bg-highlight text-gds-gray-900 hover:bg-highlight/90",success:"border-transparent bg-success text-gds-gray-900 hover:bg-success/90",warning:"border-transparent bg-warning text-white hover:bg-warning/90",info:"border-transparent bg-info text-white hover:bg-info/90","success-soft":"border-success/30 bg-success-soft text-success-deep","warning-soft":"border-warning/30 bg-warning-soft text-warning-deep","destructive-soft":"border-destructive/30 bg-destructive-soft text-destructive-deep","info-soft":"border-info/30 bg-info-soft text-info-deep","highlight-soft":"border-highlight/30 bg-highlight-soft text-highlight-deep","success-outline":"border-success/50 bg-transparent text-success-deep","warning-outline":"border-warning/50 bg-transparent text-warning-deep","destructive-outline":"border-destructive/50 bg-transparent text-destructive-deep","info-outline":"border-info/50 bg-transparent text-info-deep"},rounded:{default:"rounded-md",full:"rounded-full"}},defaultVariants:{variant:"default",rounded:"default"}});function Ao({className:e,variant:t,rounded:o,...a}){return y.createElement("div",{className:d(fc({variant:t,rounded:o}),e),...a})}var Mt={solid:"",translucent:"gds-surface-translucent",glass:"gds-surface-glass","glass-strong":"gds-surface-glass-strong",frosted:"gds-surface-frosted"};function Xt(e,t){return e==="solid"?t:""}var hc=cva("relative flex items-center gap-3 px-4 py-2.5 text-sm leading-relaxed border-b",{variants:{variant:{default:"bg-muted text-foreground border-border [&>svg]:text-muted-foreground",info:"bg-info-soft text-info-deep border-info/30 [&>svg]:text-info-deep",success:"bg-success-soft text-success-deep border-success/30 [&>svg]:text-success-deep",warning:"bg-warning-soft text-warning-deep border-warning/30 [&>svg]:text-warning-deep",destructive:"bg-destructive-soft text-destructive-deep border-destructive/30 [&>svg]:text-destructive-deep",announcement:"bg-[oklch(var(--primary)_/_0.06)] text-foreground border-[oklch(var(--primary)_/_0.18)] [&>svg]:text-primary"},align:{start:"justify-start",center:"justify-center",between:"justify-between"},sticky:{true:"sticky top-0 z-30",false:""}},defaultVariants:{variant:"default",align:"between",sticky:false}}),rg={destructive:"alert",warning:"alert",info:"status",success:"status",default:"status",announcement:"status"},bc=y.forwardRef(({className:e,variant:t="default",align:o,sticky:a,surface:r="solid",dismissible:n,onDismiss:i,icon:c,action:s,role:l,children:p,...m},u)=>{let g=t??"default",h=l??rg[g];return y.createElement("div",{ref:u,role:h,"data-gds-part":"banner","data-variant":g,"data-surface":r,className:d(hc({variant:t,align:o,sticky:a}),Mt[r],e),...m},c?y.createElement("span",{"data-gds-part":"banner-icon","aria-hidden":true,className:"shrink-0"},c):null,y.createElement("div",{"data-gds-part":"banner-content",className:"flex-1 min-w-0"},p),s?y.createElement("span",{"data-gds-part":"banner-action",className:"shrink-0"},s):null,n?y.createElement("button",{type:"button","data-gds-part":"banner-dismiss",onClick:i,"aria-label":"Dismiss",className:"shrink-0 inline-flex h-7 w-7 items-center justify-center rounded-md opacity-70 hover:opacity-100 hover:bg-black/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity"},y.createElement(X,{className:"h-4 w-4"})):null)});bc.displayName="Banner";var er=cva("inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline",raised:"gds-button-raised gds-button-raised-surface"},size:{"2xs":"h-5 gap-1 px-1.5 text-2xs [&_svg]:size-3",xs:"h-6 gap-1 px-2 text-xs [&_svg]:size-3",sm:"h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5",md:"h-8 gap-1.5 px-3 text-base [&_svg]:size-4",default:"h-8 gap-1.5 px-3 text-base [&_svg]:size-4",lg:"h-10 gap-2 px-4 text-lg [&_svg]:size-5"},iconOnly:{true:"px-0",false:""}},compoundVariants:[{size:"2xs",iconOnly:true,class:"w-5"},{size:"xs",iconOnly:true,class:"w-6"},{size:"sm",iconOnly:true,class:"w-7"},{size:"md",iconOnly:true,class:"w-8"},{size:"default",iconOnly:true,class:"w-8"},{size:"lg",iconOnly:true,class:"w-10"}],defaultVariants:{variant:"default",size:"md"}}),Ce=y.forwardRef(({className:e,variant:t,size:o,iconOnly:a,asChild:r=false,raised:n=false,...i},c)=>y.createElement(r?Slot:"button",{"data-gds-part":"button",className:d("gds-button",er({variant:t,size:o,iconOnly:a}),n&&"gds-button-raised",e),ref:c,...i}));Ce.displayName="Button";var yc=cva("w-full",{variants:{pad:{none:"py-0",sm:"py-8 md:py-12",md:"py-12 md:py-16",lg:"py-16 md:py-24",xl:"py-20 md:py-32"}},defaultVariants:{pad:"lg"}}),xc=y.forwardRef(({className:e,scope:t,background:o,pad:a,as:r="section",children:n,...i},c)=>y.createElement(r,{ref:c,"data-gds-part":"section","data-scope":t,className:d(yc({pad:a}),t&&`scope-${t}`,o!=null&&"relative overflow-hidden",e),...i},o!=null?y.createElement(y.Fragment,null,y.createElement("div",{"data-gds-part":"section-background",className:"absolute inset-0"},o),y.createElement("div",{className:"relative z-10"},n)):n));xc.displayName="Section";var wc=cva("mx-auto w-full px-4 md:px-6 lg:px-8",{variants:{maxW:{sm:"max-w-3xl",md:"max-w-5xl",lg:"max-w-7xl",xl:"max-w-[96rem]",prose:"max-w-prose",full:"max-w-none"},grid:{true:"grid grid-cols-12 gap-6",false:""}},defaultVariants:{maxW:"lg",grid:false}}),kc=y.forwardRef(({className:e,maxW:t,grid:o,as:a="div",...r},n)=>y.createElement(a,{ref:n,"data-gds-part":"container",className:d(wc({maxW:t,grid:o}),e),...r}));kc.displayName="Container";var Sc=y.forwardRef(({className:e,...t},o)=>y.createElement("span",{ref:o,"data-gds-part":"section-eyebrow",className:d("inline-block text-xs font-medium uppercase tracking-wider text-muted-foreground",e),...t}));Sc.displayName="SectionEyebrow";var Rc=y.forwardRef(({className:e,...t},o)=>y.createElement("h2",{ref:o,"data-gds-part":"section-title",className:d("text-balance text-3xl font-semibold tracking-tight md:text-4xl",e),style:{fontFamily:"var(--font-heading, var(--font-sans))"},...t}));Rc.displayName="SectionTitle";var Cc=y.forwardRef(({className:e,...t},o)=>y.createElement("p",{ref:o,"data-gds-part":"section-subtitle",className:d("text-lg text-muted-foreground md:text-xl",e),...t}));Cc.displayName="SectionSubtitle";var Tc=y.forwardRef(({className:e,...t},o)=>y.createElement("p",{ref:o,"data-gds-part":"section-description",className:d("leading-relaxed text-muted-foreground",e),...t}));Tc.displayName="SectionDescription";var Pc=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{ref:o,"data-gds-part":"section-actions",className:d("flex flex-wrap items-center gap-3",e),...t}));Pc.displayName="SectionActions";var Mc=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{ref:o,"data-gds-part":"section-media",className:d("w-full",e),...t}));Mc.displayName="SectionMedia";function Vr({className:e,classNames:t,showOutsideDays:o=true,captionLayout:a="label",buttonVariant:r="ghost",formatters:n,components:i,...c}){let s=getDefaultClassNames();return y.createElement(DayPicker,{showOutsideDays:o,className:d("bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,e),captionLayout:a,formatters:{formatMonthDropdown:l=>l.toLocaleString("default",{month:"short"}),...n},classNames:{root:d("w-fit",s.root),months:d("relative flex flex-col gap-4 md:flex-row",s.months),month:d("flex w-full flex-col gap-4",s.month),nav:d("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",s.nav),button_previous:d(er({variant:r}),"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",s.button_previous),button_next:d(er({variant:r}),"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",s.button_next),month_caption:d("flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",s.month_caption),dropdowns:d("flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",s.dropdowns),dropdown_root:d("has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",s.dropdown_root),dropdown:d("bg-popover absolute inset-0 opacity-0",s.dropdown),caption_label:d("select-none font-medium",a==="label"?"text-sm":"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",s.caption_label),table:"w-full border-collapse",weekdays:d("flex",s.weekdays),weekday:d("text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",s.weekday),week:d("mt-2 flex w-full",s.week),week_number_header:d("w-[--cell-size] select-none",s.week_number_header),week_number:d("text-muted-foreground select-none text-[0.8rem]",s.week_number),day:d("group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",s.day),range_start:d("bg-accent rounded-l-md",s.range_start),range_middle:d("rounded-none",s.range_middle),range_end:d("bg-accent rounded-r-md",s.range_end),today:d("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",s.today),outside:d("text-muted-foreground aria-selected:text-muted-foreground",s.outside),disabled:d("text-muted-foreground opacity-50",s.disabled),hidden:d("invisible",s.hidden),...t},components:{Root:({className:l,rootRef:p,...m})=>y.createElement("div",{"data-slot":"calendar",ref:p,className:d(l),...m}),Chevron:({className:l,orientation:p,...m})=>p==="left"?y.createElement(ChevronLeftIcon,{className:d("size-4",l),...m}):p==="right"?y.createElement(ChevronRightIcon,{className:d("size-4",l),...m}):y.createElement(ChevronDownIcon,{className:d("size-4",l),...m}),DayButton:Ec,WeekNumber:({children:l,...p})=>y.createElement("td",{...p},y.createElement("div",{className:"flex size-[--cell-size] items-center justify-center text-center"},l)),...i},...c})}function Ec({className:e,day:t,modifiers:o,...a}){let r=getDefaultClassNames(),n=y.useRef(null);return y.useEffect(()=>{o.focused&&n.current?.focus();},[o.focused]),y.createElement(Ce,{ref:n,variant:"ghost",iconOnly:true,"data-day":`${t.date.getFullYear()}-${String(t.date.getMonth()+1).padStart(2,"0")}-${String(t.date.getDate()).padStart(2,"0")}`,"data-selected-single":o.selected&&!o.range_start&&!o.range_end&&!o.range_middle,"data-range-start":o.range_start,"data-range-end":o.range_end,"data-range-middle":o.range_middle,className:d("hover:bg-accent/40 hover:text-foreground","data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",r.day,e),...a})}var jn=y.createContext(null);function ar(e){let t=y.useContext(jn);if(!t)throw new Error(`<${e}> must be rendered inside a <Carousel> root.`);return t}var gg=5e3,Io=y.forwardRef(({loop:e=true,align:t="start",slidesPerView:o=1,autoplay:a=false,draggable:r=true,onSlideChange:n,className:i,style:c,children:s,...l},p)=>{let m=y.useMemo(()=>({loop:e,align:t,slidesToScroll:1,watchDrag:r,containScroll:e?false:"trimSnaps"}),[e,t,r]),[u,g]=pg(m),[h,f]=y.useState(0),[b,v]=y.useState(0),[k,x]=y.useState(false),[w,S]=y.useState(false),C=y.useRef(new Map),M=y.useRef(n);M.current=n;let I=y.useMemo(()=>a?a===true?{}:a:null,[a]);y.useEffect(()=>{if(!g)return;let R=()=>{f(g.selectedScrollSnap()),v(g.scrollSnapList().length),x(g.canScrollPrev()),S(g.canScrollNext()),M.current?.(g.selectedScrollSnap());};return R(),g.on("select",R),g.on("reInit",R),()=>{g.off("select",R),g.off("reInit",R);}},[g]);let B=y.useCallback(R=>{g&&g.selectedScrollSnap()===R&&g.scrollNext();},[g]),z=y.useRef(false),E=y.useRef(true),W=y.useRef(null);y.useImperativeHandle(p,()=>W.current),y.useEffect(()=>{if(!I?.pauseWhenOffscreen){E.current=true;return}let R=W.current;if(!R||typeof IntersectionObserver>"u")return;let F=new IntersectionObserver(re=>{E.current=re.some(Z=>Z.isIntersecting);},{threshold:.25});return F.observe(R),()=>F.disconnect()},[I?.pauseWhenOffscreen]),y.useEffect(()=>{if(!g||!I)return;let R=null,F=()=>{R&&clearTimeout(R);let Q=g.selectedScrollSnap(),Re=C.current.get(Q)??I.delay??gg;R=setTimeout(()=>{if(z.current||!E.current){F();return}g.scrollNext();},Re);},re=()=>F(),Z=()=>{R&&clearTimeout(R);},G=()=>F();return g.on("select",re),g.on("pointerDown",Z),g.on("settle",G),F(),()=>{R&&clearTimeout(R),g.off("select",re),g.off("pointerDown",Z),g.off("settle",G);}},[g,I]);let oe=()=>{I?.pauseOnHover!==false&&(z.current=true);},he=()=>{z.current=false;},Y=y.useMemo(()=>({api:g,selectedIndex:h,slideCount:b,canScrollPrev:k,canScrollNext:w,durationsRef:C,advanceFromSlide:B}),[g,h,b,k,w,B]),H=`calc(100% / ${o})`;return y.createElement(jn.Provider,{value:Y},y.createElement("div",{ref:W,"data-gds-part":"carousel",className:d("relative",i),style:{"--gds-carousel-slide-basis":H,...c},onMouseEnter:oe,onMouseLeave:he,...l},y.createElement("div",{ref:u,"data-gds-part":"carousel-viewport",className:"overflow-hidden",style:{borderRadius:"var(--gds-carousel-radius, var(--gds-media-radius, 0.5rem))"}},y.createElement("div",{"data-gds-part":"carousel-track",className:"flex",style:{gap:"var(--gds-carousel-gap, 0)",touchAction:"pan-y pinch-zoom"}},s))))});Io.displayName="Carousel";var Br=y.forwardRef(({duration:e,className:t,style:o,children:a,...r},n)=>{let{durationsRef:i}=ar("Carousel.Slide"),c=y.useRef(null);return y.useImperativeHandle(n,()=>c.current),y.useEffect(()=>{if(e==null)return;let s=c.current;if(!s?.parentElement)return;let l=Array.from(s.parentElement.children).indexOf(s);if(l<0)return;let p=i.current;return p.set(l,e),()=>{p.delete(l);}},[e,i]),y.createElement("div",{ref:c,"data-gds-part":"carousel-slide",className:d("min-w-0 shrink-0 grow-0",t),style:{flexBasis:"var(--gds-carousel-slide-basis, 100%)",...o},...r},a)});Br.displayName="Carousel.Slide";var Kn=y.forwardRef(({src:e,poster:t,alt:o,controls:a=false,loop:r=true,fit:n="cover",duration:i,className:c,style:s,...l},p)=>{let{api:m,selectedIndex:u,advanceFromSlide:g}=ar("Carousel.VideoSlide"),h=y.useRef(null),f=y.useRef(null);y.useImperativeHandle(p,()=>h.current);let[b,v]=y.useState(null);y.useEffect(()=>{let x=h.current;x?.parentElement&&v(Array.from(x.parentElement.children).indexOf(x));},[m]);let k=b!=null&&b===u;return y.useEffect(()=>{let x=f.current;if(x)if(k){let w=x.play();w&&typeof w.catch=="function"&&w.catch(()=>{});}else x.pause(),x.currentTime=0;},[k]),y.createElement(Br,{ref:h,duration:i,className:d("relative overflow-hidden bg-[var(--gds-media-placeholder-bg)]",c),style:s,"data-gds-part":"carousel-video-slide",...l},t&&y.createElement("img",{src:t,alt:o??"","aria-hidden":k,className:"absolute inset-0 h-full w-full",style:{objectFit:n,opacity:k?0:1,transition:"opacity var(--gds-carousel-fade-ms, 200ms) ease-out"}}),y.createElement("video",{ref:f,src:e,muted:true,playsInline:true,loop:r,controls:a,preload:"metadata","aria-label":o,className:"block h-full w-full",style:{objectFit:n,opacity:k?1:0,transition:"opacity var(--gds-carousel-fade-ms, 200ms) ease-out"},onEnded:()=>{r||b!=null&&g(b);}}))});Kn.displayName="Carousel.VideoSlide";var qn=y.forwardRef(({position:e="below",renderDot:t,className:o,style:a,...r},n)=>{let{api:i,selectedIndex:c,slideCount:s}=ar("Carousel.Dots");if(s<=1)return null;let l=Array.from({length:s},(m,u)=>u),p=e==="overlay"?{position:"absolute",insetInlineStart:0,insetInlineEnd:0,bottom:"var(--gds-carousel-dots-inset, 0.75rem)",zIndex:1}:{marginBlockStart:"var(--gds-carousel-dots-gap, 0.75rem)"};return y.createElement("div",{ref:n,"data-gds-part":"carousel-dots",className:d("flex items-center justify-center",o),style:{gap:"var(--gds-carousel-dots-spacing, 0.5rem)",...p,...a},...r},l.map(m=>{let u=m===c,g=()=>i?.scrollTo(m);return t?t({index:m,active:u,onClick:g}):y.createElement("button",{key:m,type:"button",onClick:g,"aria-label":`Go to slide ${m+1}`,"aria-current":u?"true":void 0,"data-active":u||void 0,className:"rounded-full transition-all",style:{width:u?"var(--gds-carousel-dot-active-width, 1.25rem)":"var(--gds-carousel-dot-size, 0.5rem)",height:"var(--gds-carousel-dot-size, 0.5rem)",background:u?"var(--gds-carousel-dot-active-color, oklch(var(--primary)))":"var(--gds-carousel-dot-color, oklch(var(--muted-foreground) / 0.4))"}})}))});qn.displayName="Carousel.Dots";var Yn=y.forwardRef(({position:e="overlay",className:t,style:o,...a},r)=>e==="outside"?y.createElement("div",{ref:r,"data-gds-part":"carousel-arrows",className:d("flex items-center justify-end gap-2 pt-2",t),style:o,...a},y.createElement(tr,null),y.createElement(or,null)):y.createElement("div",{ref:r,"data-gds-part":"carousel-arrows",className:d("pointer-events-none absolute inset-0 z-[1]",t),style:o,...a},y.createElement(tr,{className:"pointer-events-auto absolute left-[var(--gds-carousel-arrow-inset,0.75rem)] top-1/2 -translate-y-1/2"}),y.createElement(or,{className:"pointer-events-auto absolute right-[var(--gds-carousel-arrow-inset,0.75rem)] top-1/2 -translate-y-1/2"})));Yn.displayName="Carousel.Arrows";var tr=y.forwardRef(({className:e,style:t,children:o,...a},r)=>{let{api:n,canScrollPrev:i}=ar("Carousel.Prev");return y.createElement("button",{ref:r,type:"button","data-gds-part":"carousel-prev","aria-label":"Previous slide",disabled:!i,onClick:()=>n?.scrollPrev(),className:d("inline-flex items-center justify-center rounded-full","transition disabled:opacity-40 disabled:cursor-not-allowed","hover:[background:var(--gds-carousel-arrow-hover-bg,oklch(var(--background)))]",e),style:{width:"var(--gds-carousel-arrow-size, 2.25rem)",height:"var(--gds-carousel-arrow-size, 2.25rem)",background:"var(--gds-carousel-arrow-bg, oklch(var(--background) / 0.85))",color:"var(--gds-carousel-arrow-fg, oklch(var(--foreground)))",backdropFilter:"var(--gds-carousel-arrow-backdrop, blur(6px))",boxShadow:"var(--gds-carousel-arrow-shadow, 0 2px 8px oklch(0 0 0 / 0.12))",...t},...a},o??y.createElement(ChevronLeft,{className:"h-4 w-4","aria-hidden":true}))});tr.displayName="Carousel.Prev";var or=y.forwardRef(({className:e,style:t,children:o,...a},r)=>{let{api:n,canScrollNext:i}=ar("Carousel.Next");return y.createElement("button",{ref:r,type:"button","data-gds-part":"carousel-next","aria-label":"Next slide",disabled:!i,onClick:()=>n?.scrollNext(),className:d("inline-flex items-center justify-center rounded-full","transition disabled:opacity-40 disabled:cursor-not-allowed","hover:[background:var(--gds-carousel-arrow-hover-bg,oklch(var(--background)))]",e),style:{width:"var(--gds-carousel-arrow-size, 2.25rem)",height:"var(--gds-carousel-arrow-size, 2.25rem)",background:"var(--gds-carousel-arrow-bg, oklch(var(--background) / 0.85))",color:"var(--gds-carousel-arrow-fg, oklch(var(--foreground)))",backdropFilter:"var(--gds-carousel-arrow-backdrop, blur(6px))",boxShadow:"var(--gds-carousel-arrow-shadow, 0 2px 8px oklch(0 0 0 / 0.12))",...t},...a},o??y.createElement(ChevronRight,{className:"h-4 w-4","aria-hidden":true}))});or.displayName="Carousel.Next";Io.Slide=Br;Io.VideoSlide=Kn;Io.Dots=qn;Io.Arrows=Yn;Io.Prev=tr;Io.Next=or;var fg=Io;function hg(){return y.useContext(jn)?.api}var Or=y.forwardRef(({className:e,surface:t="solid",...o},a)=>y.createElement("div",{ref:a,"data-gds-part":"card","data-surface":t,className:d("gds-card rounded-xl border text-card-foreground shadow",Xt(t,"bg-card"),Mt[t],e),...o}));Or.displayName="Card";var Lc=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{ref:o,"data-gds-part":"card-header",className:d("flex flex-col space-y-1.5 p-6",e),...t}));Lc.displayName="CardHeader";var Dc=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{ref:o,"data-gds-part":"card-title",className:d("font-semibold leading-none tracking-tight",e),...t}));Dc.displayName="CardTitle";var Ac=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{ref:o,"data-gds-part":"card-description",className:d("text-sm text-muted-foreground",e),...t}));Ac.displayName="CardDescription";var Ic=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{ref:o,"data-gds-part":"card-content",className:d("p-6 pt-0",e),...t}));Ic.displayName="CardContent";var Hc=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{ref:o,"data-gds-part":"card-footer",className:d("flex items-center p-6 pt-0",e),...t}));Hc.displayName="CardFooter";var Fc=y.forwardRef(({className:e,...t},o)=>y.createElement(rr.Root,{ref:o,className:d("gds-checkbox peer h-4 w-4 shrink-0 rounded-[3px] border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",e),...t},y.createElement(rr.Indicator,{className:d("flex items-center justify-center text-current")},y.createElement(Check,{className:"h-4 w-4"}))));Fc.displayName=rr.Root.displayName;var Zn=y.createContext(null),_r=y.forwardRef(({className:e,...t},o)=>{let a=y.useContext(Zn);return y.createElement("label",{ref:o,htmlFor:a?.controlId,className:d("text-sm font-medium leading-none text-foreground cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",e),...t})});_r.displayName="Field.Label";var Gr=y.forwardRef(({className:e,...t},o)=>{let a=y.useContext(Zn);return y.createElement("p",{ref:o,id:a?.descriptionId,className:d("text-sm text-muted-foreground",e),...t})});Gr.displayName="Field.Description";var Wr=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{ref:o,className:d("flex shrink-0 items-center gap-2",e),...t}));Wr.displayName="Field.Trailing";var zc=y.forwardRef(({layout:e="option",className:t,children:o,...a},r)=>{let n=y.useId(),i=null,c=null,s=null,l=null;y.Children.forEach(o,v=>{y.isValidElement(v)&&(v.type===_r?i=v:v.type===Gr?c=v:v.type===Wr?s=v:l||(l=v));});let p=l,m=p?.props??{},u=m.id??`${n}-control`,g=c?`${n}-description`:void 0,h=[m["aria-describedby"],g].filter(Boolean).join(" ")||void 0,f=p?y.cloneElement(p,{id:u,"aria-describedby":h}):null,b=y.createElement("div",{className:"flex min-w-0 flex-col gap-0.5"},i,c);return y.createElement(Zn.Provider,{value:{controlId:u,descriptionId:g}},y.createElement("div",{ref:r,"data-gds-part":"field","data-layout":e,className:d("flex gap-3",e==="setting"?"items-center justify-between":c?"items-start":"items-center",t),...a},e==="setting"?y.createElement(y.Fragment,null,b,y.createElement("div",{className:"flex shrink-0 items-center gap-2"},s,f)):y.createElement(y.Fragment,null,y.createElement("div",{className:d("shrink-0",c?"mt-0.5":void 0)},f),y.createElement("div",{className:"flex min-w-0 flex-1 flex-col gap-0.5"},i,c),s)))});zc.displayName="Field";var vg=Object.assign(zc,{Label:_r,Description:Gr,Trailing:Wr});var Vc=y.createContext({layout:"row",align:"center",divider:false}),yg={compact:"var(--gds-property-list-row-gap-compact, 0.375rem)",default:"var(--gds-property-list-row-gap, 0.625rem)",relaxed:"var(--gds-property-list-row-gap-relaxed, 1rem)"},Bc=y.forwardRef(({layout:e="row",density:t="default",align:o="center",divider:a=false,labelWidth:r,className:n,style:i,children:c,...s},l)=>y.createElement(Vc.Provider,{value:{layout:e,align:o,divider:a}},y.createElement("dl",{ref:l,"data-gds-part":"property-list","data-layout":e,"data-density":t,className:d("flex min-w-0 flex-col",n),style:{rowGap:yg[t],...r?{"--gds-property-list-label-width":r}:{},...i},...s},c)));Bc.displayName="PropertyList";var Xn=y.forwardRef(({label:e,icon:t,value:o,align:a,className:r,children:n,...i},c)=>{let{layout:s,align:l,divider:p}=y.useContext(Vc),m=a??l,u=o??n;return y.createElement("div",{ref:c,"data-gds-part":"property",className:d("grid",p&&"border-t border-[color:var(--gds-property-list-divider-color,oklch(var(--border)))] pt-[var(--gds-property-list-row-gap,0.625rem)] first:border-t-0 first:pt-0",r),style:{gridTemplateColumns:s==="stack"?"minmax(0, 1fr)":"var(--gds-property-list-label-width, 8.5rem) minmax(0, 1fr)",columnGap:"var(--gds-property-list-col-gap, 1rem)",rowGap:s==="stack"?"0.25rem":void 0,alignItems:m==="start"?"start":"center"},...i},y.createElement("dt",{"data-gds-part":"property-label",className:d("flex min-w-0 items-center gap-1.5 text-sm text-[color:var(--gds-property-list-label-color,oklch(var(--muted-foreground)))]",m==="start"&&"pt-px")},t?y.createElement("span",{"data-gds-part":"property-icon","aria-hidden":true,className:"flex shrink-0 items-center justify-center text-current [&_svg]:h-[var(--gds-property-list-icon-size,0.875rem)] [&_svg]:w-[var(--gds-property-list-icon-size,0.875rem)]"},t):null,y.createElement("span",{className:"truncate"},e)),y.createElement("dd",{"data-gds-part":"property-value",className:"m-0 min-w-0 text-sm text-foreground"},u))});Xn.displayName="PropertyList.Row";var xg=Object.assign(Bc,{Row:Xn});function Jn({label:e,description:t,aside:o,hideIndicator:a,indicatorPosition:r="trailing",titleId:n,descriptionId:i,indicator:c,children:s}){let l=s!=null?y.createElement("div",{className:"gds-selection-card__slot"},s):y.createElement("div",{className:"gds-selection-card__content"},e!=null&&y.createElement("span",{id:n,className:"gds-selection-card__title"},e),t!=null&&y.createElement("span",{id:i,className:"gds-selection-card__desc"},t)),p=a?null:c;return r==="leading"?y.createElement(y.Fragment,null,p,l,o):y.createElement(y.Fragment,null,l,o,p)}var kg=y.createElement("span",{className:"gds-selection-indicator gds-selection-indicator--radio","aria-hidden":true},y.createElement(Oo.Indicator,{className:"gds-selection-indicator__dot"})),Sg=y.createElement("span",{className:"gds-selection-indicator gds-selection-indicator--checkbox","aria-hidden":true},y.createElement(rr.Indicator,{className:"gds-selection-indicator__check"},y.createElement(Check,{className:"h-3.5 w-3.5",strokeWidth:3}))),Rg=y.createElement("span",{className:"gds-selection-indicator gds-selection-indicator--switch","aria-hidden":true},y.createElement(xr.Thumb,{className:"gds-selection-indicator__thumb"})),Oc=y.forwardRef(({className:e,label:t,description:o,aside:a,hideIndicator:r,indicatorPosition:n="trailing",children:i,...c},s)=>{let l=y.useId(),p=t!=null?`${l}-t`:void 0,m=o!=null?`${l}-d`:void 0;return y.createElement(Oo.Item,{ref:s,"data-gds-part":"radio-card","data-indicator":n,"aria-labelledby":p,"aria-describedby":m,className:d("gds-selection-card",e),...c},y.createElement(Jn,{label:t,description:o,aside:a,hideIndicator:r,indicatorPosition:n,titleId:p,descriptionId:m,indicator:kg},i))});Oc.displayName="RadioCard";var _c=y.forwardRef(({className:e,label:t,description:o,aside:a,hideIndicator:r,indicatorPosition:n="trailing",children:i,...c},s)=>{let l=y.useId(),p=t!=null?`${l}-t`:void 0,m=o!=null?`${l}-d`:void 0;return y.createElement(rr.Root,{ref:s,"data-gds-part":"checkbox-card","data-indicator":n,"aria-labelledby":p,"aria-describedby":m,className:d("gds-selection-card",e),...c},y.createElement(Jn,{label:t,description:o,aside:a,hideIndicator:r,indicatorPosition:n,titleId:p,descriptionId:m,indicator:Sg},i))});_c.displayName="CheckboxCard";var Gc=y.forwardRef(({className:e,label:t,description:o,aside:a,hideIndicator:r,indicatorPosition:n="trailing",children:i,...c},s)=>{let l=y.useId(),p=t!=null?`${l}-t`:void 0,m=o!=null?`${l}-d`:void 0;return y.createElement(xr.Root,{ref:s,"data-gds-part":"switch-card","data-indicator":n,"aria-labelledby":p,"aria-describedby":m,className:d("gds-selection-card",e),...c},y.createElement(Jn,{label:t,description:o,aside:a,hideIndicator:r,indicatorPosition:n,titleId:p,descriptionId:m,indicator:Rg},i))});Gc.displayName="SwitchCard";var Ma={slow:{tokenStagger:70,lineStagger:200,preDelay:500,fadeMs:480},normal:{tokenStagger:22,lineStagger:55,preDelay:200,fadeMs:280},fast:{tokenStagger:8,lineStagger:18,preDelay:60,fadeMs:160}},Kr=.55;function et(e,t){return e<=0?Promise.resolve():new Promise((o,a)=>{if(t?.aborted){a(new DOMException("Aborted","AbortError"));return}let r=window.setTimeout(()=>{t?.removeEventListener("abort",n),o();},e),n=()=>{window.clearTimeout(r),a(new DOMException("Aborted","AbortError"));};t?.addEventListener("abort",n,{once:true});})}async function Wc(e,t,o=22,a){if(o<=0){t(e);return}for(let r=1;r<=e.length;r++)t(e.slice(0,r)),r<e.length&&await et(o,a);}function Qn(e){return e instanceof DOMException&&e.name==="AbortError"}var nr="data-motion",Uc="off",$c="(prefers-reduced-motion: reduce)";function Cg(){if(typeof window>"u"||typeof document>"u")return false;let e=window.matchMedia($c).matches,t=document.documentElement.getAttribute(nr)===Uc;return e||t}function Co(){let[e,t]=y.useState(false);return y.useEffect(()=>{let o=()=>t(Cg());o();let a=window.matchMedia($c);a.addEventListener("change",o);let r=new MutationObserver(o);return r.observe(document.documentElement,{attributes:true,attributeFilter:[nr]}),()=>{a.removeEventListener("change",o),r.disconnect();}},[]),e}var Ho=Co;function ir(){let[e,t]=y.useState(true);return y.useEffect(()=>{let o=window.self!==window.top,a=()=>document.visibilityState!=="hidden"&&(o||document.hasFocus()),r=()=>t(a());return r(),document.addEventListener("visibilitychange",r),window.addEventListener("focus",r),window.addEventListener("blur",r),window.addEventListener("pageshow",r),()=>{document.removeEventListener("visibilitychange",r),window.removeEventListener("focus",r),window.removeEventListener("blur",r),window.removeEventListener("pageshow",r);}},[]),e}function Tg(e){if(typeof document>"u")return;let t=document.documentElement;e?t.removeAttribute(nr):t.setAttribute(nr,Uc);}var Pg=2e3,Mg={tokenStagger:0,lineStagger:0,preDelay:0,fadeMs:0};function Ea(e){let{steps:t,interpret:o,speed:a="normal",trigger:r="mount",play:n,loop:i=false,loopDelay:c=Pg,maxLoops:s=1/0,containerRef:l,onComplete:p,onLoopReset:m}=e,u=Co(),g=u?Mg:Ma[a],h=u?false:i,f=ir(),[b,v]=y.useState(false),[k,x]=y.useState(false),[w,S]=y.useState(-1),C=y.useRef(null),M=useInView(l??C,{once:true,amount:Kr}),I=useInView(l??C,{amount:Kr}),B=f&&(l?I:true),[z,E]=y.useState(0),W=y.useMemo(()=>r==="mount"?true:r==="inView"?M:!!n||z>0,[r,M,n,z]),oe=y.useRef(o);oe.current=o;let he=y.useRef(p);he.current=p;let Y=y.useRef(m);Y.current=m;let H=y.useRef(null),R=y.useRef(null),F=y.useCallback(()=>{H.current?.abort(),H.current=null,R.current!==null&&(window.clearTimeout(R.current),R.current=null),v(false);},[]),re=y.useCallback(()=>{E(G=>G+1);},[]),Z=y.useCallback((G=0)=>{if(H.current?.abort(),H.current=null,R.current!==null&&(window.clearTimeout(R.current),R.current=null),G>0){R.current=window.setTimeout(()=>{R.current=null,E(Q=>Q+1);},G);return}E(Q=>Q+1);},[]);return y.useEffect(()=>()=>{R.current!==null&&(window.clearTimeout(R.current),R.current=null);},[]),y.useEffect(()=>{if(!t||t.length===0||!u&&(!W||!B))return;let G=new AbortController;H.current=G;let{signal:Q}=G,Oe={speed:g,signal:Q,cancelled:()=>Q.aborted,reduced:u},de=true,O=0;return (async()=>{do{v(true),x(false),S(-1);try{await et(r==="inView"?g.preDelay:0,Q);for(let pe=0;pe<t.length;pe++){if(Q.aborted)return;S(pe),await oe.current(t[pe],Oe);}if(Q.aborted)return;if(S(-1),x(!0),he.current?.(),O+=1,!h||O>=s){v(!1);return}if(await et(c,Q),Q.aborted)return;Y.current?.();}catch(pe){if(Qn(pe))return;process.env.NODE_ENV!=="production"&&console.error("[useScriptedDemo] step error:",pe),v(false);return}}while(de&&h&&!Q.aborted)})(),()=>{de=false,G.abort(),H.current===G&&(H.current=null);}},[t,W,B,h,c,g,r,z,u]),{isPlaying:b,isComplete:k,currentIndex:w,play:re,stop:F,restart:Z}}var Yr=y.forwardRef(function({variant:t="inline",className:o,...a},r){return y.createElement("span",{ref:r,"data-gds-part":"demo-cursor","data-gds-variant":t,"aria-hidden":true,className:d("gds-demo-cursor",o),...a})});var Kc=y.createContext({visible:new Set,hasStage:false,reducedMotion:false,defaultAnimation:"fade-up"});function qc({steps:e,speed:t="normal",trigger:o="mount",play:a,loop:r=false,defaultAnimation:n="fade-up",visibleWhenIdle:i=true,className:c,children:s}){let l=useReducedMotion()??false,p=y.useRef(null),[m,u]=y.useState(()=>new Set),g=!!(e&&e.length);Ea({steps:g?e:void 0,speed:t,trigger:o,play:a,loop:r,containerRef:p,onLoopReset:()=>u(new Set),interpret:async(b,v)=>{if(b.type==="wait")return et(b.ms,v.signal);if(b.type==="reset")return u(new Set),et(v.speed.preDelay,v.signal);if(b.type==="reveal")return u(k=>{if(k.has(b.target))return k;let x=new Set(k);return x.add(b.target),x}),et(v.speed.lineStagger,v.signal);if(b.type==="reveal-all")return u(k=>{let x=new Set(k);return x.add("__all__"),x}),et(v.speed.lineStagger,v.signal);if(b.type==="hide")return u(k=>{if(!k.has(b.target))return k;let x=new Set(k);return x.delete(b.target),x}),et(v.speed.fadeMs,v.signal)}});let h=y.useMemo(()=>({visible:g?m:new Set(["__all__"]),hasStage:true,reducedMotion:l,defaultAnimation:n}),[g,m,l,n]),f=!g&&!i?{...h,visible:new Set}:h;return y.createElement("div",{ref:p,"data-gds-part":"demo-stage","data-gds-stage-playing":g?"true":"false",className:c},y.createElement(Kc.Provider,{value:f},s))}var Lg={fade:{initial:{opacity:0},animate:{opacity:1}},"fade-up":{initial:{opacity:0,y:12},animate:{opacity:1,y:0}},"fade-down":{initial:{opacity:0,y:-12},animate:{opacity:1,y:0}},"fade-left":{initial:{opacity:0,x:12},animate:{opacity:1,x:0}},"fade-right":{initial:{opacity:0,x:-12},animate:{opacity:1,x:0}},scale:{initial:{opacity:0,scale:.96},animate:{opacity:1,scale:1}},none:{initial:{opacity:1},animate:{opacity:1}}};function Yc({id:e,animation:t,durationMs:o,hideOutsideStage:a=false,onReveal:r,onHide:n,className:i,children:c}){let s=y.useContext(Kc),l=s.hasStage?s.visible.has("__all__")||s.visible.has(e):!a,p=y.useRef(l),m=y.useRef(r),u=y.useRef(n);m.current=r,u.current=n,y.useEffect(()=>{l!==p.current&&(p.current=l,l?m.current?.():u.current?.());},[l]);let g=t??s.defaultAnimation,h=Lg[g],f=(o??280)/1e3;return s.reducedMotion?y.createElement("div",{"data-gds-part":"reveal","data-gds-reveal-id":e,"data-gds-revealed":l?"true":"false",className:i,style:{opacity:l?1:0}},c):y.createElement(motion.div,{"data-gds-part":"reveal","data-gds-reveal-id":e,"data-gds-revealed":l?"true":"false",className:i,initial:h.initial,animate:l?h.animate:h.initial,transition:{duration:f,ease:[.22,1,.36,1]}},c)}var Ig={xs:"text-xs",sm:"text-sm",md:"text-base"},Hg={slow:{lineStagger:200,tokenStagger:70,preDelay:500,fadeMs:480},normal:{lineStagger:55,tokenStagger:22,preDelay:200,fadeMs:280},fast:{lineStagger:18,tokenStagger:8,preDelay:60,fadeMs:160}},Fg={plain:{color:"var(--gds-code-fg)",backgroundColor:"transparent"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"var(--gds-code-comment)",fontStyle:"normal"}},{types:["punctuation"],style:{color:"var(--gds-code-punctuation)"}},{types:["property","constant","symbol","deleted"],style:{color:"var(--gds-code-property)"}},{types:["boolean","number"],style:{color:"var(--gds-code-number)"}},{types:["selector","attr-name","string","char","builtin","inserted"],style:{color:"var(--gds-code-string)"}},{types:["operator","entity","url"],style:{color:"var(--gds-code-operator)"}},{types:["atrule","keyword"],style:{color:"var(--gds-code-keyword)"}},{types:["function","class-name"],style:{color:"var(--gds-code-function)"}},{types:["regex","important","variable"],style:{color:"var(--gds-code-variable)"}},{types:["tag"],style:{color:"var(--gds-code-tag)"}},{types:["attr-name"],style:{color:"var(--gds-code-attr-name)"}},{types:["attr-value"],style:{color:"var(--gds-code-attr-value)"}}]};function zg(e){let t=new Set;if(e==null)return t;let o=Array.isArray(e)?e:[e];for(let a of o)if(typeof a=="number")t.add(a);else if(Array.isArray(a)&&a.length===2){let[r,n]=a;for(let i=r;i<=n;i++)t.add(i);}return t}function Vg(e,t,o){return t?.added?.includes(e)?"added":t?.removed?.includes(e)?"removed":o.has(e)?"highlight":"default"}var Xc=y.forwardRef(function({source:t,language:o="tsx",highlight:a,diff:r,reveal:n="none",trigger:i="mount",play:c,speed:s="normal",delay:l,stagger:p,showLineNumbers:m=false,filename:u,wrap:g=false,bare:h=false,prompt:f,cursor:b,steps:v,loop:k=false,size:x="sm",height:w,maxLines:S,className:C,style:M,...I},B){let z=Hg[s],E=l??0,W=p??(n==="typewriter"?z.tokenStagger:z.lineStagger),oe=!!(v&&v.length),[he,Y]=y.useState(""),[H,R]=y.useState(()=>new Set),F=oe?he:t??"",re=y.useMemo(()=>F.replace(/\n$/,""),[F]),Z=y.useMemo(()=>zg(a),[a]),G=!!(r?.added?.length||r?.removed?.length),Q=m||G,Re=y.useRef(null);y.useImperativeHandle(B,()=>Re.current);let[Oe,de]=y.useState(n==="none"),O=useInView(Re,{once:true,amount:.55}),ye=i==="inView"?z.preDelay:0,pe=i==="mount"?true:i==="inView"?O:!!c,He=W,xe=re.split(`
|
|
108
|
+
`).length,$a=n==="typewriter"?re.replace(/\s+/g," ").split(" ").length:xe,Ke=ye+E+$a*He+280;y.useEffect(()=>{if(oe)return;if(!pe||n==="none"){de(n==="none");return}de(false);let ue=window.setTimeout(()=>de(true),Ke);return ()=>window.clearTimeout(ue)},[pe,n,Ke,oe]);let No=y.useRef(""),_=y.useRef(new Set),U=y.useCallback(ue=>{No.current=ue,Y(ue);},[]),V=y.useCallback(ue=>{_.current=ue,R(ue);},[]),{isComplete:ne}=Ea({steps:oe?v:void 0,speed:s,trigger:"manual",play:pe,loop:k,containerRef:Re,onLoopReset:()=>{U(""),V(new Set),de(false);},interpret:async(ue,Ut)=>{let _e=Ut.signal;if(ue.type==="wait")return et(ue.ms,_e);if(ue.type==="clear"){U(""),V(new Set);return}if(ue.type==="output"){let ee=No.current,Pe=ee.length>0&&!ee.endsWith(`
|
|
109
|
+
`)?ee+`
|
|
110
|
+
`:ee,$t=Pe+ue.text,jo=Pe.split(`
|
|
111
|
+
`).length,On=ue.text.split(`
|
|
112
|
+
`).length,ja=new Set(_.current);for(let fa=0;fa<On;fa++)ja.add(jo+fa);return U($t),V(ja),U($t+($t.endsWith(`
|
|
113
113
|
`)?"":`
|
|
114
|
-
`)),
|
|
115
|
-
`)?
|
|
116
|
-
`:_e;await De(60,Ne);for(let me=0;me<ce.text.length;me++){if(Ne.aborted)return;let Fe=mt+ce.text.slice(0,me+1);F(Fe),me<ce.text.length-1&&await De(rt,Ne);}}});w.useEffect(()=>{W&&le(ee);},[W,ee]);let Re=b??(n==="typewriter"||W);return w.createElement("div",{ref:he,"data-gds-part":"code","data-gds-reveal":n,"data-gds-trigger":i,"data-gds-size":S,className:p("gds-code relative w-full overflow-hidden",Nh[S],!h&&["rounded-lg border bg-[var(--gds-code-bg)] text-[var(--gds-code-fg)]","border-border/60"],R),style:L,...D},u&&!h?w.createElement("div",{"data-gds-part":"code-header",className:"flex items-center justify-between border-b border-border/60 px-4 py-2 text-xs text-muted-foreground"},w.createElement("span",{className:"font-mono"},u),o?w.createElement("span",{className:"uppercase tracking-wider opacity-60"},o):null):null,w.createElement(Highlight,{code:ae,language:o,theme:Lh},({tokens:ce,getLineProps:$e,getTokenProps:Ne})=>w.createElement("pre",{"data-gds-part":"code-pre",className:p("font-mono leading-relaxed",h?"p-0":"px-0 py-3",f?"whitespace-pre-wrap break-words":"overflow-x-auto whitespace-pre",(x!==void 0||y!==void 0)&&"overflow-y-auto"),style:{background:"transparent",margin:0,...y!==void 0?{height:`calc(${y} * 1lh + 0.5rem)`}:x!==void 0&&x!=="auto"?{height:typeof x=="number"?`${x}px`:x}:null}},ce.map((rt,_e)=>{let mt=_e+1,me=Dh(mt,a,te),Fe=$e({line:rt}),Xt=_e===ce.length-1,lr=W&&B.has(mt),Ai=Re&&Xt&&(!Me||b===true),yn=p("flex w-full pr-4",h?"pl-0":"pl-4",me==="added"&&"bg-[var(--gds-code-diff-added-bg)] text-[var(--gds-code-diff-added-fg)]",me==="removed"&&"bg-[var(--gds-code-diff-removed-bg)] text-[var(--gds-code-diff-removed-fg)]",me==="highlight"&&"bg-[var(--gds-code-line-highlight-bg)] shadow-[inset_2px_0_0_0_var(--gds-code-line-highlight-marker)]"),Fr=w.createElement(w.Fragment,null,re?w.createElement("span",{"data-gds-part":"code-gutter",className:p("select-none pr-3 text-right font-mono text-xs leading-relaxed opacity-60",X?"w-10":"w-8"),"aria-hidden":true},X?w.createElement("span",{className:"inline-block w-3 text-center"},me==="added"?"+":me==="removed"?"-":" "):null,m?w.createElement("span",{className:"ml-1 tabular-nums"},mt):null):null,w.createElement("span",{className:"flex-1",style:lr?{color:"var(--gds-code-comment)"}:void 0},g&&!lr?w.createElement("span",{"data-gds-part":"code-prompt","aria-hidden":true,className:"select-none opacity-60",style:{color:"var(--gds-code-comment)"}},g):null,n==="typewriter"&&J&&!W?w.createElement(Ih,{line:rt,getTokenProps:Ne,delay:oe+H+_e*ke,stagger:ke}):rt.map((ug,mg)=>w.createElement("span",{key:mg,...Ne({token:ug})})),Ai&&!lr?w.createElement(Aa,{"data-gds-part":"code-cursor"}):null));return n==="none"||n==="typewriter"||W||!J?w.createElement("div",{key:_e,...Fe,className:p(Fe.className,yn),style:{...Fe.style,opacity:i!=="mount"&&!J&&n!=="none"?0:void 0}},Fr):w.createElement(motion.div,{key:_e,...Fe,className:p(Fe.className,yn),initial:{opacity:0,y:n==="diff"?me==="removed"?-4:6:4},animate:{opacity:1,y:0},transition:{delay:(oe+H+_e*ke)/1e3,duration:E.fadeMs/1e3,ease:[.22,1,.36,1]},style:Fe.style},Fr)}))))});ip.displayName="Code";function Ih({line:e,getTokenProps:t,delay:o,stagger:r}){let a=0;return w.createElement(w.Fragment,null,e.map((n,i)=>{let c=/^\s*$/.test(n.content),s=t({token:n});if(c)return w.createElement("span",{key:i,...s});let l=a++;return w.createElement(motion.span,{key:i,...s,initial:{opacity:0},animate:{opacity:1},transition:{delay:(o+l*r)/1e3,duration:.12}})}))}var Hh={default:{row:"gap-3",content:"space-y-1",author:"text-sm font-semibold",meta:"text-xs",body:"text-sm leading-relaxed",thread:"text-xs"},compact:{row:"gap-2",content:"space-y-0.5",author:"text-xs font-semibold",meta:"text-[10px]",body:"text-xs leading-relaxed",thread:"text-[11px]"}},_h=w.forwardRef(function({author:t,timestamp:o,avatar:r,badge:a,edited:n,pinned:i,actions:c,reactions:s,threadCount:l,onThreadClick:d,align:m="start",density:u="default",className:f,children:h,...g},b){let v=m==="end",C=n===true?"(edited)":n||void 0,S=Hh[u];return w.createElement("div",{ref:b,"data-gds-part":"message","data-gds-align":m,"data-gds-density":u,"data-gds-pinned":i?"true":void 0,className:p("flex items-start",S.row,v&&"flex-row-reverse",f),...g},r&&w.createElement("div",{"data-gds-part":"message-avatar",className:"flex-shrink-0"},r),w.createElement("div",{"data-gds-part":"message-content",className:p("flex-1 min-w-0",S.content,v&&"text-right")},i&&w.createElement("div",{"data-gds-part":"message-pinned",className:p("flex items-center gap-1 text-[10px] uppercase tracking-wider text-muted-foreground",v&&"flex-row-reverse")},w.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 16 16",className:"h-3 w-3",fill:"currentColor"},w.createElement("path",{d:"M9.828.722a.5.5 0 0 1 .707 0l4.743 4.743a.5.5 0 0 1 0 .707l-2.121 2.121a.5.5 0 0 1-.354.146h-1.792l-3.586 3.586v2.293a.5.5 0 0 1-.854.354L4.146 12.39 1 15.535V14.12l3.146-3.146-1.293-1.293a.5.5 0 0 1 .354-.854h2.293l3.586-3.586V3.45a.5.5 0 0 1 .146-.354L9.828.722Z"})),"Pinned"),w.createElement("div",{"data-gds-part":"message-header",className:p("flex items-baseline gap-2 flex-wrap",v&&"flex-row-reverse")},w.createElement("span",{"data-gds-part":"message-author",className:S.author},t),a&&w.createElement("div",{"data-gds-part":"message-badge"},a),o&&w.createElement("span",{"data-gds-part":"message-timestamp",className:p(S.meta,"text-muted-foreground")},o),C&&w.createElement("span",{"data-gds-part":"message-edited",className:p(S.meta,"text-muted-foreground")},C),c&&w.createElement("div",{"data-gds-part":"message-actions",className:p(v?"mr-auto":"ml-auto")},c)),w.createElement("div",{"data-gds-part":"message-body",className:S.body},h),s&&w.createElement("div",{"data-gds-part":"message-reactions",className:p("flex flex-wrap gap-1 pt-1",v&&"justify-end")},s),typeof l=="number"&&l>0&&w.createElement("button",{type:"button","data-gds-part":"message-thread",onClick:d,className:p("inline-flex items-center gap-1 font-medium",S.thread,"text-primary hover:underline","focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded",v&&"flex-row-reverse")},w.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 16 16",className:"h-3 w-3",fill:"currentColor"},w.createElement("path",{d:"M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H6.414l-2.707 2.707A1 1 0 0 1 2 12V3Z"})),l," ",l===1?"reply":"replies")))});var Ho=typeof window<"u"&&typeof window.document.createElement<"u",sp=Ho&&/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream,vr=Ho&&window.matchMedia("(pointer: coarse)").matches;var Wh=Ho?useLayoutEffect:useEffect,Jr=()=>{let[e]=useLexicalComposerContext(),[t,o]=useState(()=>Ho?e.getRootElement()===document.activeElement:false);return Wh(()=>mergeRegister(e.registerCommand(FOCUS_COMMAND,()=>(o(true),false),COMMAND_PRIORITY_NORMAL),e.registerCommand(BLUR_COMMAND,()=>(o(false),false),COMMAND_PRIORITY_NORMAL)),[e]),t};function ji(e){let{value:t,trigger:o,data:r,className:a,classNameFocused:n,classNames:i,nodeKey:c,component:s}=e,[l]=useLexicalComposerContext(),d=Jr(),[m,u,f]=useLexicalNodeSelection(c),h=useRef(null),g=o+t,b=useMemo(()=>{if(a){let L=[a];return m&&d&&n&&L.push(n),L.join(" ").trim()||void 0}return ""},[m,a,n,d]),v=useCallback(L=>{if(m&&$isNodeSelection($getSelection())){L.preventDefault();let D=$getNodeByKey(c);_o(D)&&D.remove();}return false},[m,c]),C=useCallback(L=>{let D=$getNodeByKey(c);if(!D?.isSelected())return false;let I=false,E=tn(D);return $isElementNode(E)&&(E.selectEnd(),I=true),$isTextNode(E)&&(E.select(),I=true),$isDecoratorNode(E)&&(E.selectNext(),I=true),E===null&&(D.selectPrevious(),I=true),I&&L.preventDefault(),I},[c]),S=useCallback(L=>{let D=$getNodeByKey(c);if(!D?.isSelected())return false;let I=false,E=en(D);return $isElementNode(E)&&(E.selectStart(),I=true),$isTextNode(E)&&(E.select(0,0),I=true),$isDecoratorNode(E)&&(E.selectPrevious(),I=true),E===null&&(D.selectNext(),I=true),I&&L.preventDefault(),I},[c]),x=useCallback(L=>{var D;return L.target===h.current||!((D=h.current)===null||D===void 0)&&D.contains(L.target)?(L.shiftKey||f(),u(true),true):false},[f,u]),y=useCallback(()=>{let L=$getNodeByKey(c);if(!L?.isSelected())return false;let D=$getSelection();return $isNodeSelection(D)&&$setSelection(null),false},[c]),R=useCallback(()=>sp&&m?(u(false),true):false,[m,u]);return useEffect(()=>{let L=mergeRegister(l.registerCommand(CLICK_COMMAND,x,COMMAND_PRIORITY_LOW),l.registerCommand(KEY_DELETE_COMMAND,v,COMMAND_PRIORITY_LOW),l.registerCommand(KEY_BACKSPACE_COMMAND,v,COMMAND_PRIORITY_LOW),l.registerCommand(KEY_ARROW_LEFT_COMMAND,C,COMMAND_PRIORITY_LOW),l.registerCommand(KEY_ARROW_RIGHT_COMMAND,S,COMMAND_PRIORITY_LOW),l.registerCommand(BLUR_COMMAND,y,COMMAND_PRIORITY_LOW),l.registerCommand(SELECTION_CHANGE_COMMAND,R,COMMAND_PRIORITY_LOW));return ()=>{L();}},[l,C,S,x,v,y,R]),s?jsx(s,{ref:h,trigger:o,value:t,data:r,className:b,"data-beautiful-mention":g,children:g}):i?jsxs("span",{ref:h,className:m&&i.containerFocused?i.containerFocused:i.container,"data-beautiful-mention":g,children:[jsx("span",{className:i.trigger,children:o}),jsx("span",{className:i.value,children:t})]}):jsx("span",{ref:h,className:b,"data-beautiful-mention":g,children:g})}function cb(e){let t=e.getAttribute("data-lexical-beautiful-mention-trigger"),o=e.getAttribute("data-lexical-beautiful-mention-value"),r,a=e.getAttribute("data-lexical-beautiful-mention-data");if(a)try{r=JSON.parse(a);}catch(n){console.warn("Failed to parse data attribute of beautiful mention node",n);}return t!=null&&o!==null?{node:go(t,o,r)}:null}var no=class e extends DecoratorNode{static getType(){return "beautifulMention"}static clone(t){return new e(t.__trigger,t.__value,t.__data,t.__key)}constructor(t,o,r,a){super(a),this.__trigger=t,this.__value=o,this.__data=r;}createDOM(){return document.createElement("span")}updateDOM(){return false}exportDOM(){let t=document.createElement("span");return t.setAttribute("data-lexical-beautiful-mention","true"),t.setAttribute("data-lexical-beautiful-mention-trigger",this.__trigger),t.setAttribute("data-lexical-beautiful-mention-value",this.__value),this.__data&&t.setAttribute("data-lexical-beautiful-mention-data",JSON.stringify(this.__data)),t.textContent=this.getTextContent(),{element:t}}static importDOM(){return {span:t=>t.hasAttribute("data-lexical-beautiful-mention")?{conversion:cb,priority:1}:null}}static importJSON(t){return go(t.trigger,t.value,t.data)}exportJSON(){let t=this.__data;return Object.assign(Object.assign({trigger:this.__trigger,value:this.__value},t?{data:t}:{}),{type:"beautifulMention",version:1})}getTextContent(){let t=this.getLatest();return t.__trigger+t.__value}getTrigger(){return this.getLatest().__trigger}getValue(){return this.getLatest().__value}setValue(t){let o=this.getWritable();o.__value=t;}getData(){return this.getLatest().__data}setData(t){let o=this.getWritable();o.__data=t;}component(){return null}decorate(t,o){let{className:r,classNameFocused:a,classNames:n}=this.getCssClassesFromTheme(o);return jsx(ji,{nodeKey:this.getKey(),trigger:this.getTrigger(),value:this.getValue(),data:this.getData(),className:r,classNameFocused:a,classNames:n,component:this.component()})}getCssClassesFromTheme(t){var o,r;let a=(o=t.theme.beautifulMentions)!==null&&o!==void 0?o:{},n=Object.entries(a).find(([m])=>new RegExp(m).test(this.__trigger)),i=(r=n?.[0])!==null&&r!==void 0?r:"",c=n?.[1],s=typeof c=="string"?c:void 0,l=s&&typeof a[i+"Focused"]=="string"?a[i+"Focused"]:void 0;return {className:s,classNameFocused:l,classNames:n&&typeof c!="string"?c:void 0}}};function go(e,t,o){let r=new no(e,t,o);return $applyNodeReplacement(r)}function _o(e){return e instanceof no}var fp="\u200B";var In=class e extends TextNode{static getType(){return "zeroWidth"}static clone(t){return new e(t.__textContent,t.__key)}static importJSON(t){return gp()}constructor(t,o){super(fp,o),this.__textContent=t;}exportJSON(){return Object.assign(Object.assign({},super.exportJSON()),{text:"",type:"zeroWidth"})}updateDOM(){return false}static importDOM(){return null}exportDOM(t){return {element:null}}isTextEntity(){return true}getTextContent(){return this.__textContent}};function gp(e=""){let t=new In(e);return t.setMode("segmented"),$applyNodeReplacement(t)}function Hn(e){return e instanceof In}var Yi=`\\.,\\*\\?\\$\\|#{}\\(\\)\\^\\[\\]\\\\/!%'"~=<>_:;`,bp="\\(",Zi=e=>"(?:"+e.join("|")+")",Fa=(e,t)=>(e.length===0?"":"(?!"+e.join("|")+")")+"[^\\s"+t+"]",Xi=75;function _a(e,t,o){return new RegExp(Fa(t,o)).test(e)}function xr(e,t){let o=$getSelection();if(!o||!$isRangeSelection(o))return;let r=o.anchor,a=o.focus,[n]=o.getNodes();if(r.key!==a.key||r.offset!==a.offset||!n)return;let i=$isTextNode(n)&&n.isSimpleText(),c=r.type,s=r.offset,l=Et(n),d=s===0,m=l.length===s,u=l.charAt(s-1),f=l.charAt(s),h=_a(u,e,t),g=_a(f,e,t),b=/\s/.test(u),v=/\s/.test(f),C=tn(n),S=en(n),x=n.getParent(),y={node:n,type:c,offset:s,isTextNode:i,textContent:l,selection:o,prevNode:C,nextNode:S,parentNode:x,cursorAtStartOfNode:d,cursorAtEndOfNode:m,wordCharBeforeCursor:h,wordCharAfterCursor:g,spaceBeforeCursor:b,spaceAfterCursor:v};return i?Object.assign(Object.assign({},y),{isTextNode:true,node:n}):Object.assign(Object.assign({},y),{isTextNode:false,node:n})}function en(e){let t=e.getNextSibling();for(;t!==null&&Hn(t);)t=t.getNextSibling();return t}function tn(e){let t=e.getPreviousSibling();for(;t!==null&&Hn(t);)t=t.getPreviousSibling();return t}function Et(e){return Hn(e)?"":e.getTextContent()}function vp(e,t){return typeof e=="string"||typeof e=="boolean"?e:t===null?false:typeof e=="object"?e[t]:false}function yp(e,t){return typeof e=="number"||e===false?e:typeof e>"u"?5:t===null?false:typeof e=="object"?e[t]:5}function yb(e){let t=e.getLastDescendant();return $isElementNode(t)||$isTextNode(t)?t:$isDecoratorNode(t)?t.getParent():e}function _n(){let e=$getRoot(),t=yb(e),o=t?.getKey(),r=$isElementNode(t)?t.getChildrenSize():$isTextNode(t)?Et(t).length:0,a=$isElementNode(t)?"element":"text";if(o){let n=$createRangeSelection();n.anchor.set(o,r,a),n.focus.set(o,r,a),$setSelection(n);}}function on(e){return e=e??$getEditor(),$nodesOfType(no)}var wr=class{constructor(t,o,r){this.value=t,this.displayValue=o,this.data=r,this.key=r?JSON.stringify(Object.assign(Object.assign({},r),{value:t})):t,this.displayValue=o??t,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this);}setRefElement(t){this.ref={current:t};}};function Ji(e){let t=$getSelection();if(!$isRangeSelection(t)||!t.isCollapsed())return null;let o=t.anchor;if(o.type!=="text")return null;let r=o.getNode();if(!r.isSimpleText())return null;let a=o.offset,n=Et(r).slice(0,a),i=e.replaceableString.length,c=Sb(n,e.matchingString,i),s=a-c;if(s<0)return null;let l;return s===0?[l]=r.splitText(a):[,l]=r.splitText(s,a),l}function Sb(e,t,o){let r=o;for(let a=r;a<=t.length;a++)e.substring(-a)===t.substring(0,a)&&(r=a);return r}var Fn=class e extends ElementNode{static getType(){return "placeholder"}static clone(t){return new e(t.__textContent,t.__key)}constructor(t,o){super(o),this.__textContent=t;}createDOM(t){let o=document.createElement("img");return o.style.display="inline",o.style.border="none",o.style.margin="0",o.style.height="1px",o.style.width="1px",o}updateDOM(){return false}static importDOM(){return null}static importJSON(t){return xp()}isInline(){return true}exportJSON(){return Object.assign(Object.assign({},super.exportJSON()),{type:"placeholder"})}getTextContent(){return ""}};function xp(e=""){let t=new Fn(e);return $applyNodeReplacement(t)}function Qi(e){return e instanceof Fn}var es=createCommand("INSERT_MENTION_COMMAND"),ts=createCommand("REMOVE_MENTIONS_COMMAND"),os=createCommand("RENAME_MENTIONS_COMMAND"),rs=createCommand("OPEN_MENTION_MENU_COMMAND");function Va(e,t,o,r){return Cp(e,t,o,void 0,void 0,r)}function Sp(e,t,o,r,a,n){return Cp(e,t,o,r,a,n)}function Cp(e,t,o,r,a,n){let i=xr(e,t);if(!i)return false;let{node:c,selection:s,wordCharBeforeCursor:l,wordCharAfterCursor:d,cursorAtStartOfNode:m,cursorAtEndOfNode:u,prevNode:f,nextNode:h}=i,g=r?go(o,r,a):$createTextNode(o),b=[];if(!($isParagraphNode(c)&&m)&&!$isTextNode(c))return n&&b.push($createTextNode(" ")),b.push(g),s.insertNodes(b),true;let v=null;return n&&(l||m&&f!==null&&!$isTextNode(f))&&b.push($createTextNode(" ")),b.push(g),n&&(d||u&&h!==null&&!$isTextNode(h))&&(v=$createTextNode(" "),b.push(v)),s.insertNodes(b),b.length>1&&($isTextNode(g)?g.select():v&&v.selectPrevious()),true}function kp(e,t,o=true){let r=false,a=null,n=null,i=on();for(let c of i){let s=c.getTrigger()===e,l=c.getValue()===t;s&&(l||!t)&&(a=tn(c),n=en(c),c.remove(),r=true,$isTextNode(a)&&Et(a).endsWith(" ")&&n&&Et(n).startsWith(" ")&&a.setTextContent(Et(a).slice(0,-1)),(n===null||Qi(n))&&$isTextNode(a)&&Et(a).endsWith(" ")&&a.setTextContent(Et(a).trimEnd()));}return r&&o?Tp(a,n):o||$setSelection(null),r}function Rp(e,t,o,r=true){let a=on(),n=null;for(let i of a){let c=i.getTrigger()===e,s=i.getValue()===o;c&&(s||!o)&&(n=i,i.setValue(t));}if(n&&r){let i=tn(n),c=en(n);Tp(i,c),c&&$isTextNode(c)?c.select(0,0):_n();}else r||$setSelection(null);return n!==null}function Tp(e,t){t&&$isTextNode(t)?t.select(0,0):e&&$isTextNode(e)?e.select():_n();}var On=class extends wr{constructor(t,o,r,a={}){super(o,r,a),this.itemType=t,this.comboboxItem={itemType:t,value:o,displayValue:r,data:a},this.menuOption=new wr(o,r,a);}};function ns(e){let t=null;return e.getEditorState().read(()=>{let o=$getSelection();$isRangeSelection(o)&&(t=Vb(o));}),t}function Vb(e){let t=e.anchor;if(t.type!=="text")return null;let o=t.getNode();if(!o.isSimpleText())return null;let r=t.offset;return Et(o).slice(0,r)}function Bb(e){return e.key.length===1&&!e.ctrlKey&&!e.altKey&&!e.metaKey&&!e.repeat}function Gb(e,t,o){let[r]=useLexicalComposerContext(),[a,n]=useState(t??null),[i,c]=useState(null);return useEffect(()=>{if(t){n(t);return}return r.registerRootListener(s=>{s&&n(s.parentElement);})},[r,t]),useEffect(()=>{if(!a)return;if(!e){i&&(i.remove(),c(null));return}let{height:s}=a.getBoundingClientRect(),l=i??document.createElement("div");l.style.position="absolute",l.style.left="0",l.style.right="0",l.style.paddingTop=`${s}px`,a.prepend(l),i||c(l);let d=new ResizeObserver(([m])=>{l.style.paddingTop=`${m.contentRect.height}px`;});return d.observe(a),setTimeout(()=>{l.className=o??"";}),()=>{d.disconnect(),a.removeChild(l);}},[a,e,i,o]),i}function $b(e,t){var o;let r=(o=e.split(/\s/).pop())!==null&&o!==void 0?o:e,a=e!==r?e.lastIndexOf(r):0;return t.some(i=>i.startsWith(r)&&i!==r)?{leadOffset:a,matchingString:r,replaceableString:r}:null}function Lp(e){var t;let{onSelectOption:o,triggers:r,punctuation:a,autoSpace:n,loading:i,triggerFn:c,onQueryChange:s,onReset:l,comboboxAnchor:d,comboboxAnchorClassName:m,comboboxComponent:u="div",comboboxItemComponent:f="div",onComboboxOpen:h,onComboboxClose:g,onComboboxFocusChange:b,comboboxAdditionalItems:v=[],onComboboxItemSelect:C}=e,S=Jr(),[x]=useLexicalComposerContext(),[y,R]=useState(null),[L,D]=useState(null),[I,E]=useState(null),[H,z]=useState(null),W=e.options.length===0?"trigger":"value",Z=useMemo(()=>{let k=v.map(P=>new On("additional",P.value,P.displayValue,P.data));if(W==="trigger"){let P=r.map(N=>new On("trigger",N,N));return !H||P.every(N=>!N.value.startsWith(H))?[...P,...k]:[...P.filter(N=>N.value.startsWith(H)),...k]}return [...e.options.map(P=>new On("value",P.value,P.displayValue,P.data)),...k]},[v,W,e.options,r,H]),[O,B]=useState((t=e.comboboxOpen)!==null&&t!==void 0?t:false),T=Gb(O,d,m),_=useCallback(k=>{vr||R(k);},[]),ae=useCallback(k=>{var P;let M=(P=Z[k].ref)===null||P===void 0?void 0:P.current;M&&M.scrollIntoView({block:"nearest"});},[Z]),te=useCallback((k,P)=>{if(!S)return false;let N;return P==="up"?y===null?N=Z.length-1:y===0?N=null:N=y-1:y===null?N=0:y===Z.length-1?N=null:N=y+1,_(N),N&&ae(N),k.preventDefault(),k.stopImmediatePropagation(),true},[S,y,Z.length,ae,_]),X=useCallback(k=>{_(k),ae(k);},[ae,_]),re=useCallback(()=>{_(null);},[_]),he=useCallback(k=>{let P=Z[k];C?.(P.comboboxItem),P.itemType!=="additional"&&(x.update(()=>{let N=I?Ji(I):null;o(P.menuOption,N);}),E(null),s(null),z(null),_(null));},[Z,x,s,_,C,I,o]),Me=useCallback(k=>{let P=Z[k];C?.(P.comboboxItem),P.itemType!=="additional"&&(x.update(()=>{let N=L?Ji(L):null;if(N){let M=$createTextNode(P.value);N.replace(M),M.select();}else Va(r,a,P.value,n);}),D(null),z(null),_(0));},[Z,x,_,C,L,r,a,n]),le=useCallback(k=>{W==="trigger"&&Me(k),W==="value"&&he(k);},[W,Me,he]),A=useCallback(k=>{if(!S||y===null)return false;let P=false;return W==="trigger"&&(P=true,Me(y)),W==="value"&&(P=true,he(y)),P&&(k.preventDefault(),k.stopImmediatePropagation()),P},[S,he,Me,W,y]),oe=useCallback(()=>{let k=ns(x),P=k?k.substring(0,k.length-1):void 0;return P?.trim()||_(null),false},[x,_]),J=useCallback(k=>{if(B(true),!Bb(k))return false;let P=ns(x),M=(P===null?k.key:P+k.key).trim();return Z.some(F=>F.displayValue.startsWith(M)&&M.length<=F.displayValue.length)?_(0):W==="trigger"&&_(null),false},[x,Z,W,_]),ke=useCallback(()=>(B(true),false),[]),Q=useCallback(()=>(B(false),H||(z(null),D(null),E(null)),false),[H]);return useEffect(()=>mergeRegister(x.registerCommand(KEY_ARROW_DOWN_COMMAND,k=>te(k,"down"),COMMAND_PRIORITY_LOW),x.registerCommand(KEY_ARROW_UP_COMMAND,k=>te(k,"up"),COMMAND_PRIORITY_LOW),x.registerCommand(KEY_ENTER_COMMAND,A,COMMAND_PRIORITY_NORMAL),x.registerCommand(KEY_TAB_COMMAND,A,COMMAND_PRIORITY_LOW),x.registerCommand(KEY_BACKSPACE_COMMAND,oe,COMMAND_PRIORITY_LOW),x.registerCommand(KEY_DOWN_COMMAND,J,COMMAND_PRIORITY_LOW),x.registerCommand(FOCUS_COMMAND,ke,COMMAND_PRIORITY_NORMAL),x.registerCommand(CLICK_COMMAND,()=>(O||B(true),false),COMMAND_PRIORITY_LOW),x.registerCommand(KEY_ESCAPE_COMMAND,()=>(B(false),false),COMMAND_PRIORITY_LOW)),[x,O,te,A,oe,J,ke]),useEffect(()=>{let k=()=>{x.getEditorState().read(()=>{let P=ns(x);if(P===null){l(),D(null),E(null),s(null),z(null);return}let N=$b(P,r);if(D(N),N){z(N.matchingString),E(null);return}let M=c(P,x);if(E(M),s(M?M.matchingString:null),M?.matchingString){z(M.matchingString);return}z(null);});};return x.registerUpdateListener(k)},[x,c,s,l,r]),useEffect(()=>{var k;B((k=e.comboboxOpen)!==null&&k!==void 0?k:false);},[e.comboboxOpen]),useEffect(()=>{O?h?.():(R(null),g?.());},[h,g,O]),useEffect(()=>{y!==null&&Z[y]?b?.(Z[y].comboboxItem):b?.(null);},[y,Z,b]),useEffect(()=>{if(!Ho)return;let k=x.getRootElement(),P=N=>{T&&!T.contains(N.target)&&k&&!k.contains(N.target)&&Q();};return document.addEventListener("mousedown",P),()=>{document.removeEventListener("mousedown",P);}},[T,x,Q]),!O||!T?null:cs.createPortal(jsx(u,{loading:i,itemType:W,role:"menu","aria-activedescendant":y!==null&&Z[y]?Z[y].displayValue:"","aria-label":"Choose trigger and value","aria-hidden":!O,children:Z.map((k,P)=>jsx(f,{selected:P===y,role:"menuitem","aria-selected":y===P,"aria-label":`Choose ${k.value}`,item:k.comboboxItem,ref:k.setRefElement,onClick:()=>{le(P);},onMouseEnter:()=>{X(P);},onMouseLeave:re,onMouseDown:N=>{N.preventDefault();},children:k.displayValue},k.key))}),T)}function Ap(e,t){let[o,r]=useState(e);return useEffect(()=>{let a=setTimeout(()=>{r(e);},t);return ()=>{clearTimeout(a);}},[e,t]),o}function Ip(e){let{queryString:t,trigger:o,searchDelay:r,items:a,onSearch:n,justSelectedAnOption:i}=e,c=Ap(t,r),[s,l]=useState(false),[d,m]=useState([]),[u,f]=useState(null);return useEffect(()=>{if(!a)return;if(o===null){m([]),f(null);return}let h=Object.entries(a).find(([b])=>new RegExp(b).test(o));if(!h)return;let g=t?h[1].filter(b=>(typeof b=="string"?b:b.value).toLowerCase().includes(t.toLowerCase())):[...h[1]];m(g),f(t);},[a,o,t]),useEffect(()=>{if(n){if(o===null||c===null){m([]),f(null);return}l(true),f(c),n(o,i?.current?"":c).then(h=>{m(h);}).finally(()=>{l(false);}),i?.current&&(i.current=false);}},[c,n,o,i]),useMemo(()=>({loading:s,results:d,query:u}),[s,d,u])}var Kb=function(e,t){var o={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var a=0,r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(o[r[a]]=e[r[a]]);return o},rn=class extends wr{constructor(t,o,r,a){super(o,r,a),this.trigger=t,this.menuItem={trigger:t,value:o,displayValue:r,data:a};}},iv=e=>"(?:\\.[ |$]|\\s|["+e+"]|)";function sv(e,t,o,r){return new RegExp((t?`(^|\\s|${t})(`:"(^|\\s)(")+Zi(e)+"((?:"+Fa(e,o)+(r?iv(o):"")+"){0,"+Xi+"}))$")}function zp(e,t,o,r,a){let n=sv(t,o,r,a).exec(e);if(n!==null){let i=n[1],c=n[2],s=n[3];if(c.length>=1)return {leadOffset:n.index+i.length,matchingString:s,replaceableString:c}}return null}function Vp(e){let{items:t,onSearch:o,autoSpace:r=true,searchDelay:a=e.onSearch?250:0,allowSpaces:n=true,insertOnBlur:i=true,menuComponent:c="ul",menuItemComponent:s="li",emptyComponent:l,menuAnchorClassName:d,showMentionsOnDelete:m,showCurrentMentionsAsSuggestions:u=true,mentionEnclosure:f,onMenuOpen:h,onMenuClose:g,onMenuItemSelect:b,punctuation:v=Yi,preTriggerChars:C=bp}=e,S=useRef(false),x=Jr(),y=useMemo(()=>{var k;return (k=e.triggers)!==null&&k!==void 0?k:Object.keys(t??{})},[e.triggers,t]),[R]=useLexicalComposerContext(),[L,D]=useState(null),[I,E]=useState(null),{results:H,loading:z,query:W}=Ip({queryString:L,searchDelay:a,trigger:I,items:t,onSearch:o,justSelectedAnOption:S}),Z=useRef(null),O=useRef(null),B=vp(e.creatable,I),T=yp(e.menuItemLimit,I),_=useMemo(()=>{if(!I)return [];let k=H.map(N=>{if(typeof N=="string")return new rn(I,N,N);{let{value:M}=N,F=Kb(N,["value"]);return new rn(I,M,M,F)}});if(T!==false&&T>0&&(k=k.slice(0,T)),(!o||!z&&W!==null)&&u&&R.getEditorState().read(()=>{let N=on(R);for(let M of N){let F=M.getValue(),V=M.getData();M.getTrigger()===I&&(W===null||M.getValue().startsWith(W))&&k.every(ee=>ee.value!==F)&&k.push(new rn(I,F,F,V));}}),W&&k.every(N=>N.displayValue!==W)){let N=typeof B=="string"?B.replace("{{name}}",W):typeof B>"u"||B?`Add "${W}"`:void 0;N&&k.push(new rn(I,W,N));}return k},[H,o,z,W,R,I,B,T,u]),ae=!!o&&!_.length&&!!L&&/\s+/.test(L),te=!!_.length||z&&!ae,X=useCallback(()=>{E(null);},[]),re=useCallback((k,P,N)=>{R.update(()=>{if(!I)return;let F=!!B&&k.value!==k.displayValue&&f&&/\s/.test(k.value)?f+k.value+f:k.value,V=go(I,F,k.data);if(P){let ee=P.getNextSibling();if(P.replace(V),ee instanceof TextNode){let Re=ee.getTextContent();!/\s/.test(Re)&&F.includes(Re)&&ee.remove();}}N?.(),S.current=true;});},[R,I,B,f]),he=useCallback((k,P,N)=>{I&&(b?.({trigger:I,value:k.value,displayValue:k.displayValue,data:k.data}),re(k,P,N));},[re,b,I]),Me=useCallback(k=>{let P=zp(k,y,C,v,n);if(P){let{replaceableString:N,matchingString:M}=P,F=N.lastIndexOf(M),V=F===-1?N:N.substring(0,F)+N.substring(F+M.length);if(E(V||null),P.replaceableString)return P}else E(null);return null},[C,n,v,y]),le=useCallback((k=false)=>{if(!r)return;let P=xr(y,v);if(!P)return;let{node:N,offset:M,type:F,parentNode:V,isTextNode:ee,textContent:Re,prevNode:ce,nextNode:$e,wordCharAfterCursor:Ne,cursorAtStartOfNode:rt,cursorAtEndOfNode:_e}=P;if(ee&&rt&&_o(ce)){N.insertBefore($createTextNode(" "));return}if(_o(N)&&ce===null&&$isParagraphNode(V)&&F==="element"&&M===0){let mt=$createTextNode(" ");N.insertBefore(mt),mt.selectStart();return}if(ee&&_e&&_o($e)){N.insertAfter($createTextNode(" "));return}if(ee&&k&&Ne){let mt=Re.substring(0,M)+" "+Re.substring(M);N.setTextContent(mt);return}_o(N)&&$e===null&&N.insertAfter($createTextNode(" "));},[v,y,r]),A=useCallback((k=false)=>{let P=Z.current,N=typeof P=="number"?_[P]:void 0,M=_.find(Ne=>Ne.value!==Ne.displayValue);if(M&&(vr||N===null)&&(N=M),!N)return false;let F=xr(y,v);if(!I||!F?.isTextNode)return false;let V=F.node,ee=Et(V),Re=zp(ee,y,C,v,n);if(Re===null)return false;let ce=ee.search(new RegExp(`${Re.replaceableString}\\s?$`));if(ce===-1)return false;let $e=go(I,N.value,N.data);if(R.update(()=>{V.setTextContent(ee.substring(0,ce)),V.insertAfter($e),$e.selectNext();},{tag:"history-merge"}),k){let Ne=$getSelection();setTimeout(()=>{R.update(()=>{Ne&&$setSelection(Ne.clone());});});}return true},[_,y,v,I,C,n,R]),oe=useCallback(()=>{let k=$getSelection();if((!k||$isNodeSelection(k))&&O.current){let P=O.current.clone();$setSelection(P);}else k||_n();O.current&&(O.current=null);},[]),J=useCallback(k=>{if(!m)return false;let P=xr(y,v);if(P){let{node:N,prevNode:M,offset:F}=P,V=_o(N)?N:_o(M)&&F===0?M:null;if(V){let ee=V.getTrigger();return V.replace($createTextNode(ee)),k.preventDefault(),true}}return false},[m,y,v]),ke=useCallback(k=>{var P;let{key:N,metaKey:M,ctrlKey:F}=k,V=N?.length===1,ee=_a(N,y,v),Re=n&&/^\s$/.test(N);if(!V||M||F)return false;let ce=N,$e=xr(y,v);if($e?.isTextNode){let{textContent:rt,offset:_e}=$e;ce=(((P=rt.substring(0,_e).split(/\s+/).at(-1))!==null&&P!==void 0?P:"")+N).trim();}let Ne=y.some(rt=>ce===rt);return !ee&&!Ne&&!Re||le(Ne),false},[le,v,y,n]),Q=useCallback(k=>{var P;let N=(P=k.clipboardData)===null||P===void 0?void 0:P.getData("text/plain"),M=N?.charAt(0),F=y.some(ee=>M===ee),V=M&&new RegExp(`[\\s${v}]`).test(M);return (F||!V)&&le(),false},[le,y,v]);return useEffect(()=>{if(!R.hasNodes([no]))throw new Error("BeautifulMentionsPlugin: BeautifulMentionNode not registered on editor");return mergeRegister(R.registerCommand(SELECTION_CHANGE_COMMAND,()=>{let k=$getSelection();return k&&!$isNodeSelection(k)?O.current=k:k||(O.current=null),false},COMMAND_PRIORITY_LOW),R.registerCommand(KEY_DOWN_COMMAND,ke,COMMAND_PRIORITY_LOW),R.registerCommand(KEY_BACKSPACE_COMMAND,J,COMMAND_PRIORITY_LOW),R.registerCommand(BLUR_COMMAND,()=>i?A(true):false,COMMAND_PRIORITY_LOW),R.registerCommand(KEY_SPACE_COMMAND,()=>!n&&B?A():false,COMMAND_PRIORITY_LOW),R.registerCommand(es,({trigger:k,value:P,data:N,focus:M=true})=>{oe();let F=Sp(y,v,k,P,N,r);return M||$setSelection(null),F},COMMAND_PRIORITY_LOW),R.registerCommand(ts,({trigger:k,value:P,focus:N})=>{let M=kp(k,P,N);return N||(O.current=null),M},COMMAND_PRIORITY_LOW),R.registerCommand(os,({trigger:k,newValue:P,value:N,focus:M})=>Rp(k,P,N,M),COMMAND_PRIORITY_LOW),R.registerCommand(rs,({trigger:k})=>(oe(),Va(y,v,k,r)),COMMAND_PRIORITY_LOW),R.registerCommand(PASTE_COMMAND,Q,COMMAND_PRIORITY_LOW))},[R,y,v,r,n,i,B,x,A,ke,J,Q,oe]),useEffect(()=>{te&&x?h?.():g?.(),te&&!x&&X();},[h,g,te,x,X]),Ho?e.combobox?jsx(Lp,{options:_,loading:z,onQueryChange:D,onSelectOption:re,onReset:()=>{E(null);},triggerFn:Me,triggers:y,punctuation:v,creatable:B,comboboxOpen:e.comboboxOpen,comboboxAnchor:e.comboboxAnchor,comboboxAnchorClassName:e.comboboxAnchorClassName,comboboxComponent:e.comboboxComponent,comboboxItemComponent:e.comboboxItemComponent,comboboxAdditionalItems:e.comboboxAdditionalItems,onComboboxOpen:e.onComboboxOpen,onComboboxClose:e.onComboboxClose,onComboboxFocusChange:e.onComboboxFocusChange,onComboboxItemSelect:e.onComboboxItemSelect}):jsx(LexicalTypeaheadMenuPlugin,{commandPriority:COMMAND_PRIORITY_NORMAL,onQueryChange:D,onSelectOption:he,triggerFn:Me,options:_,anchorClassName:d,onClose:X,menuRenderFn:(k,{selectedIndex:P,selectOptionAndCleanUp:N,setHighlightedIndex:M})=>(Z.current=P,k.current&&_.length===0&&W&&!z&&x&&l?cs.createPortal(jsx(l,{}),k.current):k.current&&te?cs.createPortal(jsx(c,{loading:z,role:"menu","aria-label":"Choose a mention","aria-hidden":!te,"aria-activedescendant":!vr&&P!==null&&_[P]?_[P].displayValue:"",children:_.map((F,V)=>jsx(s,Object.assign({tabIndex:-1,selected:!vr&&P===V,ref:F.setRefElement,role:"menuitem","aria-selected":!vr&&P===V,"aria-label":`Choose ${F.value}`,item:F.menuItem,itemValue:F.value,label:F.displayValue},F.data,{onClick:()=>{M(V),N(F);},onMouseDown:ee=>{ee.preventDefault();},onMouseEnter:()=>{M(V);},children:F.displayValue}),F.key))}),k.current):null)}):null}function Yv({onSubmit:e,enabled:t}){let[o]=useLexicalComposerContext();return w.useEffect(()=>{if(t)return o.registerCommand(KEY_ENTER_COMMAND,r=>r&&r.shiftKey?false:(r?.preventDefault(),e(),true),COMMAND_PRIORITY_HIGH)},[o,t,e]),null}function Zv({onImageFiles:e,enabled:t}){let[o]=useLexicalComposerContext();return w.useEffect(()=>{if(!t)return;let r=o.getRootElement();if(!r)return;let a=n=>{let c=Array.from(n.clipboardData?.items??[]).filter(s=>s.kind==="file"&&s.type.startsWith("image/")).map(s=>s.getAsFile()).filter(s=>s!==null);c.length>0&&(n.preventDefault(),e(c));};return r.addEventListener("paste",a),()=>r.removeEventListener("paste",a)},[o,t,e]),null}function Xv({enabled:e}){let[t]=useLexicalComposerContext();return w.useEffect(()=>{e&&t.focus();},[t,e]),null}var Gp={bold:"bold",italic:"italic",underline:"underline",strikethrough:"strikethrough",code:"code"};function $p(e,t){let o=Gp[t];if(o){e.dispatchCommand(FORMAT_TEXT_COMMAND,o);return}if(t==="ul"){e.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND,void 0);return}if(t==="ol"){e.dispatchCommand(INSERT_ORDERED_LIST_COMMAND,void 0);return}e.update(()=>{let r=$getSelection();if($isRangeSelection(r)){if(t==="h1"||t==="h2"||t==="h3"){let a=t;$setBlocksType(r,()=>$createHeadingNode(a));return}(t==="blockquote"||t==="pullquote")&&$setBlocksType(r,()=>{let a=$createQuoteNode();return t==="pullquote"&&(a.__pullquote=true),a});}});}function Jv(e,t,o,r){e.update(()=>{let a=$getSelection();if(!$isRangeSelection(a))return;let n=go(t,o,r);a.insertNodes([n]),a.insertText(" ");});}function Qv(e,t){let o=false;return e.update(()=>{let r=$getRoot(),n=r.getTextContent().indexOf(t);if(n===-1)return;let i=0,c=null,s=0,l=null,d=0,m=u=>{if(!(c&&l)){if(u.getType()==="text"){let f=u,h=f.getTextContentSize(),g=i,b=i+h;!c&&n>=g&&n<b&&(c=f,s=n-g);let v=n+t.length;!l&&v>g&&v<=b&&(l=f,d=v-g),i=b;return}if("getChildren"in u)for(let f of u.getChildren())m(f);else i+=u.getTextContentSize();}};if(m(r),c&&l){let u=c,f=l;u.select(s,0).focus.set(f.getKey(),d,"text"),o=true;}}),o}function Bn(e){e.update(()=>{let t=$getRoot();t.clear();let o=$createParagraphNode();t.append(o),o.select();});}function Wp(e){let t="",o="",r=[];return e.getEditorState().read(()=>{t=$getRoot().getTextContent(),o=JSON.stringify(e.getEditorState().toJSON());let a=n=>{if(n.getType()==="beautifulMention"){let i=n;r.push({trigger:i.getTrigger(),value:i.getValue(),data:i.getData()});}if("getChildren"in n)for(let i of n.getChildren())a(i);};a($getRoot());}),{text:t,json:o,mentions:r}}var ey=[{format:"bold",icon:Bold,label:"Bold"},{format:"italic",icon:Italic,label:"Italic"},{format:"underline",icon:Underline,label:"Underline"},{format:"strikethrough",icon:Strikethrough,label:"Strikethrough"},{format:"code",icon:Code,label:"Inline code"},{format:"h1",icon:Heading1,label:"Heading 1"},{format:"h2",icon:Heading2,label:"Heading 2"},{format:"h3",icon:Heading3,label:"Heading 3"},{format:"blockquote",icon:Quote,label:"Blockquote"},{format:"ul",icon:List,label:"Bulleted list"},{format:"ol",icon:ListOrdered,label:"Numbered list"}];function ty({formats:e}){let[t]=useLexicalComposerContext(),[o,r]=w.useState(()=>new Set);w.useEffect(()=>mergeRegister(t.registerUpdateListener(({editorState:n})=>{n.read(()=>{let i=$getSelection();if(!$isRangeSelection(i))return;let c=new Set;for(let s of ["bold","italic","underline","strikethrough","code"])i.hasFormat(s)&&c.add(s);r(c);});})),[t]);let a=ey.filter(n=>e.includes(n.format));return w.createElement("div",{"data-gds-part":"composer-toolbar",className:p("flex flex-wrap items-center gap-0.5","px-2 py-1")},a.map(({format:n,icon:i,label:c})=>{let s=Gp[n],l=s?o.has(s):false;return w.createElement("button",{key:n,type:"button","aria-label":c,title:c,"data-gds-part":"composer-toolbar-button","data-gds-active":l?"true":"false",onClick:()=>$p(t,n),className:p("h-7 w-7 inline-flex items-center justify-center rounded","text-[var(--gds-composer-toolbar-fg)]","hover:bg-[var(--gds-composer-toolbar-hover-bg)]","focus:outline-none focus:ring-2 focus:ring-primary",l&&"bg-[var(--gds-composer-toolbar-active-bg)] text-[var(--gds-composer-toolbar-active-fg)]")},w.createElement(i,{className:"h-3.5 w-3.5"}))}))}function oy({attachments:e,onRemove:t}){return w.createElement(AnimatePresence,{initial:false},e.length>0&&w.createElement(motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:{duration:.18},className:"overflow-hidden"},w.createElement("div",{"data-gds-part":"composer-attachments",className:"flex flex-wrap gap-2 px-2 py-2"},e.map(o=>w.createElement("div",{key:o.id,className:"relative group"},o.file.type.startsWith("image/")?w.createElement("img",{src:o.previewUrl,alt:o.name,className:"h-14 w-14 rounded-md object-cover border border-[var(--gds-composer-border)]"}):w.createElement("div",{className:"h-14 w-14 rounded-md border border-[var(--gds-composer-border)] flex items-center justify-center text-xs px-1 text-center text-[var(--gds-composer-muted-fg)]"},o.name.slice(0,18)),w.createElement("button",{type:"button",onClick:()=>t(o.id),"aria-label":`Remove ${o.name}`,className:p("absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full","bg-[var(--gds-composer-chip-remove-bg)]","text-[var(--gds-composer-chip-remove-fg)]","flex items-center justify-center","opacity-0 group-hover:opacity-100 focus:opacity-100","focus:outline-none focus:ring-2 focus:ring-primary","transition-opacity")},w.createElement(X,{className:"w-3 h-3"})))))))}function ry({placeholder:e,triggers:t,attachmentsCfg:o,formatList:r,showToolbar:a,isLoading:n,onStop:i,maxLength:c,autoFocus:s,submitOnEnter:l=true,leftActions:d,rightActions:m,hideSend:u,steps:f,trigger:h="mount",play:g,speed:b="normal",loop:v=false,loopDelay:C,onLoopReset:S,bare:x,className:y,onSubmit:R,onChange:L,readOnly:D,handleEditorReady:I,submitRef:E,restartRef:H,attachments:z,setAttachments:W,ingestImages:Z}){let[O]=useLexicalComposerContext(),B=w.useRef(null),T=w.useRef(null),[_,ae]=w.useState(false);w.useEffect(()=>{I(O);},[O,I]),w.useEffect(()=>{O.setEditable(!D);},[O,D]);let te=w.useRef(L);te.current=L,w.useEffect(()=>O.registerUpdateListener(({editorState:A})=>{A.read(()=>{let oe=$getRoot().getTextContent();ae(oe.trim().length>0),te.current?.(oe);});}),[O]);let X=w.useCallback(()=>{if(n)return;let A=Wp(O),oe=A.text.trim().length>0,J=z.length>0;!oe&&!J||(R?.(A,J?z:void 0),Bn(O),z.forEach(ke=>URL.revokeObjectURL(ke.previewUrl)),W([]));},[O,n,z,R,W]);E.current=X;let{restart:re}=Zo({steps:f,speed:b,trigger:h,play:g,loop:v,loopDelay:C,containerRef:B,onLoopReset:()=>{Bn(O),S?.();},interpret:async(A,oe)=>{let J=oe.signal;if(A.type==="wait")return De(A.ms,J);if(A.type==="clear")return Bn(O),De(120,J);if(A.type==="newline")return O.update(()=>{let Q=$getSelection();$isRangeSelection(Q)&&Q.insertParagraph();}),De(60,J);if(A.type==="submit")return X(),De(120,J);if(A.type==="format")return $p(O,A.format),O.update(()=>{let Q=$getSelection();if(!$isRangeSelection(Q)||Q.isCollapsed())return;let k=Q.focus;Q.anchor.set(k.key,k.offset,k.type);}),De(80,J);if(A.type==="select")return Qv(O,A.text),De(120,J);if(A.type==="mention")return A.query&&(O.update(()=>{let Q=$getSelection();$isRangeSelection(Q)&&Q.insertText(A.trigger);}),await Ea(A.query,Q=>{O.update(()=>{let k=$getRoot(),P=k.getTextContent(),N=P.slice(0,P.length-A.trigger.length-(Q.length-1));k.clear();let M=$createParagraphNode();N&&M.append($createTextNode(N)),M.append($createTextNode(A.trigger+Q)),k.append(M);});},oe.speed.tokenStagger,J),await De(180,J),O.update(()=>{let Q=$getRoot(),k=Q.getTextContent(),P=A.trigger.length+A.query.length,N=k.slice(0,k.length-P);Q.clear();let M=$createParagraphNode();N&&M.append($createTextNode(N)),Q.append(M),M.select();})),Jv(O,A.trigger,A.value),De(120,J);let ke=A.speed?{slow:70,normal:22,fast:8}[A.speed]:oe.speed.tokenStagger;for(let Q=0;Q<A.text.length;Q++){if(J.aborted)return;let k=A.text[Q];O.update(()=>{let P=$getSelection();if(!$isRangeSelection(P)){$getRoot().selectEnd();let N=$getSelection();$isRangeSelection(N)&&N.insertText(k);return}P.insertText(k);}),Q<A.text.length-1&&await De(ke,J);}}});w.useEffect(()=>{H.current=A=>{Bn(O),re(A);};},[O,re,H]);let he=!D&&!m&&!u,Me=!D&&!d&&o!==null,le=!D&&(Me||d||he||m);return w.createElement("div",{ref:B,"data-gds-part":"composer","data-gds-loading":n?"true":"false",className:p("w-full",!x&&["rounded-md","bg-transparent","border border-input","shadow-sm","focus-within:outline-none focus-within:ring-1 focus-within:ring-ring","transition-colors"],y)},a&&w.createElement(ty,{formats:r}),o&&w.createElement(oy,{attachments:z,onRemove:A=>{W(oe=>{let J=oe.find(ke=>ke.id===A);return J&&URL.revokeObjectURL(J.previewUrl),oe.filter(ke=>ke.id!==A)});}}),w.createElement("div",{className:"relative"},w.createElement(RichTextPlugin,{contentEditable:w.createElement(ContentEditable,{"data-gds-part":"composer-editor",className:p("outline-none","px-3 sm:px-4 py-3","text-sm text-[var(--gds-composer-fg)]","min-h-[44px] max-h-[300px] overflow-y-auto","[&_p]:m-0 [&_p+p]:mt-2","[&_h1]:text-xl [&_h1]:font-semibold [&_h1]:mt-2","[&_h2]:text-lg [&_h2]:font-semibold [&_h2]:mt-2","[&_h3]:text-base [&_h3]:font-semibold [&_h3]:mt-2","[&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5","[&_blockquote]:border-l-2 [&_blockquote]:border-[var(--gds-composer-border)] [&_blockquote]:pl-3 [&_blockquote]:italic","[&_code]:bg-[var(--gds-composer-toolbar-active-bg)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_code]:font-mono",n&&"opacity-60 pointer-events-none"),"aria-placeholder":e??"",placeholder:w.createElement("div",{"data-gds-part":"composer-placeholder",className:"absolute top-3 left-3 sm:left-4 text-sm text-muted-foreground pointer-events-none select-none"},e),spellCheck:true}),ErrorBoundary:LexicalErrorBoundary}),w.createElement(HistoryPlugin,null),w.createElement(ListPlugin,null),w.createElement(LinkPlugin,null),w.createElement(OnChangePlugin,{onChange:()=>{}}),w.createElement(Xv,{enabled:!!s}),w.createElement(Yv,{onSubmit:X,enabled:l}),o&&w.createElement(Zv,{onImageFiles:Z,enabled:true}),t.length>0&&w.createElement(Vp,{items:t.reduce((A,oe)=>(typeof oe.items=="function"||(A[oe.char]=oe.items.map(J=>({value:J.value}))),A),{})})),le&&w.createElement("div",{"data-gds-part":"composer-actions",className:"flex items-center justify-between gap-2 px-2 pb-2 pt-1"},w.createElement("div",{className:"flex items-center gap-1"},d??(Me&&w.createElement("button",{type:"button",onClick:()=>T.current?.click(),disabled:n,"aria-label":"Attach image",title:"Attach image",className:p("h-8 w-8 rounded-lg flex items-center justify-center","text-[var(--gds-composer-action-fg)]","hover:text-[var(--gds-composer-fg)]","hover:bg-[var(--gds-composer-toolbar-hover-bg)]","focus:outline-none focus:ring-2 focus:ring-primary","transition-colors","disabled:opacity-50 disabled:cursor-not-allowed")},w.createElement(Paperclip,{className:"w-4 h-4"})))),m??(he&&w.createElement("button",{type:"button",onClick:n?i:X,disabled:n?!i:!_&&z.length===0,"aria-label":n?"Stop":"Send",className:p("h-8 w-8 rounded-lg flex items-center justify-center transition-colors flex-shrink-0","focus:outline-none focus:ring-2 focus:ring-primary",n?"bg-red-500 hover:bg-red-600 text-white disabled:opacity-50":_||z.length>0?"bg-primary hover:bg-primary/90 text-primary-foreground":"bg-[var(--gds-composer-toolbar-active-bg)] text-[var(--gds-composer-muted-fg)] cursor-not-allowed")},n?w.createElement(Square,{className:"w-3.5 h-3.5"}):w.createElement(Send,{className:"w-3.5 h-3.5"}))),o&&w.createElement("input",{ref:T,type:"file",accept:o.accept,multiple:o.multiple,onChange:A=>{A.target.files&&Z(Array.from(A.target.files)),A.target.value="";},className:"sr-only",tabIndex:-1,"aria-hidden":"true"})))}var Up=w.forwardRef(function(t,o){let{initialText:r,initialJson:a,formats:n,toolbar:i,triggers:c,attachments:s,...l}=t,d=w.useMemo(()=>n===false?[]:n??["bold","italic","underline","strikethrough","code","h1","h2","blockquote","ul","ol"],[n]),m=i===true||i==="top",u=w.useMemo(()=>{if(!s)return null;let E=s===true?{}:s;return E.enabled===false?null:{enabled:true,accept:E.accept??"image/*",maxItems:E.maxItems??10,multiple:E.multiple??true}},[s]),[f,h]=w.useState([]),g=w.useRef(f);g.current=f,w.useEffect(()=>()=>{g.current.forEach(E=>URL.revokeObjectURL(E.previewUrl));},[]);let b=w.useCallback(E=>{if(!u)return;let H=E.filter(z=>u.accept?u.accept==="image/*"?z.type.startsWith("image/"):u.accept.split(",").some(W=>{let Z=W.trim();return Z.endsWith("/*")?z.type.startsWith(Z.slice(0,-1)):z.type===Z||z.name.toLowerCase().endsWith(Z)}):true);H.length!==0&&h(z=>{let W=u.maxItems-z.length;if(W<=0)return z;let Z=H.slice(0,W).map(O=>({id:`${O.name}-${O.size}-${Date.now()}-${Math.random().toString(36).slice(2,8)}`,file:O,previewUrl:URL.createObjectURL(O),name:O.name}));return [...z,...Z]});},[u]),v=w.useRef(null),C=w.useRef(()=>{}),S=w.useRef(()=>{}),x=w.useCallback(E=>{v.current=E;},[]);w.useImperativeHandle(o,()=>({play:E=>{console.warn('[Composer] handle.play(steps) is not wired in v1 \u2014 pass `steps` + `trigger="manual"` and toggle `play` instead.');},stop:()=>{},restart:E=>S.current(E),focus:()=>v.current?.focus(),clear:()=>{let E=v.current;E&&Bn(E);},insert:E=>{v.current?.update(()=>{let H=$getSelection();$isRangeSelection(H)&&H.insertText(E);});},getContent:()=>v.current?Wp(v.current):{text:"",json:"",mentions:[]},getEditor:()=>v.current}),[]);let y=w.useMemo(()=>({paragraph:"gds-composer-paragraph",quote:"gds-composer-quote",heading:{h1:"gds-composer-h1",h2:"gds-composer-h2",h3:"gds-composer-h3"},list:{ul:"gds-composer-ul",ol:"gds-composer-ol",listitem:"gds-composer-li"},text:{bold:"font-semibold",italic:"italic",underline:"underline",strikethrough:"line-through",code:"gds-composer-code"},beautifulMentions:{"@":"gds-composer-mention px-1.5 py-0.5 mx-0.5 rounded bg-primary/10 text-primary font-medium","/":"gds-composer-mention px-1.5 py-0.5 mx-0.5 rounded bg-violet-500/15 text-violet-600 dark:text-violet-400 font-medium"}}),[]),R=w.useMemo(()=>({namespace:"gds-composer",theme:y,onError:E=>{console.error("[Composer]",E);},nodes:[HeadingNode,QuoteNode,ListNode,ListItemNode,LinkNode,AutoLinkNode,CodeNode,CodeHighlightNode,no],editorState:a||(r?E=>{let H=$getRoot(),z=$createParagraphNode();z.append($createTextNode(r)),H.append(z);}:void 0)}),[y,a,r]),L=d.length>0,{readOnly:D=false,...I}=l;return w.createElement(LexicalComposer,{initialConfig:{...R,editable:!D}},w.createElement(ry,{...I,readOnly:D,triggers:c??[],attachmentsCfg:D?null:u,formatList:d,showToolbar:m&&L&&!D,handleEditorReady:x,submitRef:C,restartRef:S,attachments:f,setAttachments:h,ingestImages:b}))}),ny=w.forwardRef(function(t,o){return w.createElement(Up,{ref:o,placeholder:"Write a reply\u2026",formats:false,submitOnEnter:false,...t})});var bt=ao.Root,vt=ao.Trigger,ay=ao.Anchor,it=w.forwardRef(({className:e,align:t="center",sideOffset:o=4,surface:r="solid",...a},n)=>w.createElement(ao.Portal,null,w.createElement(ao.Content,{ref:n,align:t,sideOffset:o,"data-surface":r,className:p("z-50 w-72 rounded-md border p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",ro(r,"bg-popover"),Ht[r],e),...a})));it.displayName=ao.Content.displayName;var iy="PPP",sy="LLL dd, y";function ly({value:e,onChange:t,placeholder:o="Pick a date",disabled:r,className:a,contentClassName:n,align:i="start",side:c,format:s=iy,captionLayout:l,icon:d,"aria-label":m}){return w.createElement(bt,null,w.createElement(vt,{asChild:true},w.createElement(Ie,{type:"button",variant:"outline",disabled:r,"aria-label":m??(e?void 0:o),"data-empty":!e,className:p("w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground",a)},d??w.createElement(CalendarIcon,{className:"mr-2 h-4 w-4","aria-hidden":true}),e?format(e,s):w.createElement("span",null,o))),w.createElement(it,{className:p("w-auto p-0",n),align:i,side:c},w.createElement(xa,{mode:"single",selected:e,onSelect:t,captionLayout:l,initialFocus:true})))}function cy({value:e,onChange:t,placeholder:o="Pick a date range",disabled:r,className:a,contentClassName:n,align:i="start",side:c,format:s=sy,captionLayout:l,icon:d,numberOfMonths:m=2,"aria-label":u}){let f=!!e?.from;return w.createElement(bt,null,w.createElement(vt,{asChild:true},w.createElement(Ie,{type:"button",variant:"outline",disabled:r,"aria-label":u??(f?void 0:o),"data-empty":!f,className:p("w-[300px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground",a)},d??w.createElement(CalendarIcon,{className:"mr-2 h-4 w-4","aria-hidden":true}),e?.from?e.to?w.createElement(w.Fragment,null,format(e.from,s)," \u2013"," ",format(e.to,s)):format(e.from,s):w.createElement("span",null,o))),w.createElement(it,{className:p("w-auto p-0",n),align:i,side:c},w.createElement(xa,{mode:"range",selected:e,onSelect:t,defaultMonth:e?.from,numberOfMonths:m,captionLayout:l,initialFocus:true})))}var py=je.Root,uy=je.Trigger,Kp=je.Portal,my=je.Close,ds=w.forwardRef(({className:e,...t},o)=>w.createElement(je.Overlay,{ref:o,className:p("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t}));ds.displayName=je.Overlay.displayName;var qp=w.forwardRef(({className:e,children:t,surface:o="solid",...r},a)=>w.createElement(Kp,null,w.createElement(ds,null),w.createElement(je.Content,{ref:a,"data-surface":o,className:p("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",ro(o,"bg-background"),Ht[o],e),...r},t,w.createElement(je.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"},w.createElement(X,{className:"h-4 w-4"}),w.createElement("span",{className:"sr-only"},"Close")))));qp.displayName=je.Content.displayName;var Yp=({className:e,...t})=>w.createElement("div",{className:p("flex flex-col space-y-1.5 text-center sm:text-left",e),...t});Yp.displayName="DialogHeader";var Zp=({className:e,...t})=>w.createElement("div",{className:p("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});Zp.displayName="DialogFooter";var Xp=w.forwardRef(({className:e,...t},o)=>w.createElement(je.Title,{ref:o,className:p("text-lg font-semibold leading-none tracking-tight",e),...t}));Xp.displayName=je.Title.displayName;var Jp=w.forwardRef(({className:e,...t},o)=>w.createElement(je.Description,{ref:o,className:p("text-sm text-muted-foreground",e),...t}));Jp.displayName=je.Description.displayName;var ps=ge.Root,us=ge.Trigger,kr=w.createContext("default"),Qp=e=>e==="default"?"px-2 py-1.5 text-sm":"px-2 py-1 text-xs",by=ge.Group,vy=ge.Portal,yy=ge.Sub,xy=ge.RadioGroup,eu=w.forwardRef(({className:e,inset:t,children:o,...r},a)=>{let n=w.useContext(kr);return w.createElement(ge.SubTrigger,{ref:a,className:p("flex cursor-default select-none items-center gap-2 rounded-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",Qp(n),n==="default"?"[&_svg]:size-4":"[&_svg]:size-3.5",t&&(n==="default"?"pl-8":"pl-7"),e),...r},o,w.createElement(ChevronRight,{className:"ml-auto"}))});eu.displayName=ge.SubTrigger.displayName;var tu=w.forwardRef(({className:e,surface:t="solid",size:o="default",children:r,...a},n)=>w.createElement(ge.SubContent,{ref:n,"data-surface":t,className:p("z-50 min-w-[8rem] overflow-hidden rounded-md border text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",o==="default"?"p-1":"p-0.5",ro(t,"bg-popover"),Ht[t],e),...a},w.createElement(kr.Provider,{value:o},r)));tu.displayName=ge.SubContent.displayName;var Wa=w.forwardRef(({className:e,sideOffset:t=4,surface:o="solid",size:r="default",children:a,...n},i)=>w.createElement(ge.Portal,null,w.createElement(ge.Content,{ref:i,sideOffset:t,"data-surface":o,className:p("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border text-popover-foreground shadow-md",r==="default"?"p-1":"p-0.5","data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",ro(o,"bg-popover"),Ht[o],e),...n},w.createElement(kr.Provider,{value:r},a))));Wa.displayName=ge.Content.displayName;var ou=w.forwardRef(({className:e,inset:t,...o},r)=>{let a=w.useContext(kr);return w.createElement(ge.Item,{ref:r,className:p("relative flex cursor-default select-none items-center gap-2 rounded-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:shrink-0",Qp(a),a==="default"?"[&>svg]:size-4":"[&>svg]:size-3.5",t&&(a==="default"?"pl-8":"pl-7"),e),...o})});ou.displayName=ge.Item.displayName;var Ua=w.forwardRef(({className:e,children:t,checked:o,...r},a)=>{let i=w.useContext(kr)!=="default";return w.createElement(ge.CheckboxItem,{ref:a,className:p("relative flex cursor-default select-none items-center rounded-sm pr-2 outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",i?"py-1 pl-7 text-xs":"py-1.5 pl-8 text-sm",e),checked:o,...r},w.createElement("span",{className:p("absolute flex items-center justify-center",i?"left-1.5 h-3 w-3":"left-2 h-3.5 w-3.5")},w.createElement(ge.ItemIndicator,null,w.createElement(Check,{className:i?"h-3 w-3":"h-4 w-4"}))),t)});Ua.displayName=ge.CheckboxItem.displayName;var ru=w.forwardRef(({className:e,children:t,...o},r)=>{let n=w.useContext(kr)!=="default";return w.createElement(ge.RadioItem,{ref:r,className:p("relative flex cursor-default select-none items-center rounded-sm pr-2 outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",n?"py-1 pl-7 text-xs":"py-1.5 pl-8 text-sm",e),...o},w.createElement("span",{className:p("absolute flex items-center justify-center",n?"left-1.5 h-3 w-3":"left-2 h-3.5 w-3.5")},w.createElement(ge.ItemIndicator,null,w.createElement(Circle,{className:"h-2 w-2 fill-current"}))),t)});ru.displayName=ge.RadioItem.displayName;var ja=w.forwardRef(({className:e,inset:t,...o},r)=>{let a=w.useContext(kr);return w.createElement(ge.Label,{ref:r,className:p("font-semibold",a==="default"?"px-2 py-1.5 text-sm":"px-2 py-1 text-xs",t&&(a==="default"?"pl-8":"pl-7"),e),...o})});ja.displayName=ge.Label.displayName;var Ka=w.forwardRef(({className:e,...t},o)=>w.createElement(ge.Separator,{ref:o,className:p("-mx-1 my-1 h-px bg-muted",e),...t}));Ka.displayName=ge.Separator.displayName;var nu=({className:e,...t})=>w.createElement("span",{className:p("ml-auto text-xs tracking-widest opacity-60",e),...t});nu.displayName="DropdownMenuShortcut";var au=cva("flex w-full rounded-md bg-transparent transition-colors file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{default:"h-9 pl-3 pr-3 py-1 text-base file:text-sm md:text-sm",sm:"h-8 pl-2 pr-2 py-1 text-sm file:text-xs",xs:"h-7 pl-2 pr-2 py-0 text-xs file:text-xs shadow-none","2xs":"h-6 rounded-lg pl-1.5 pr-2 py-0 text-2xs file:text-2xs shadow-none"},variant:{default:"border border-input",ghost:"border border-transparent bg-transparent shadow-none"}},defaultVariants:{size:"default",variant:"default"}}),Sy={default:{startPad:"pl-9",endPad:"pr-9",startInset:"pl-3",endInset:"pr-3"},sm:{startPad:"pl-7",endPad:"pr-6",startInset:"pl-2",endInset:"pr-2"},xs:{startPad:"pl-6",endPad:"pr-5",startInset:"pl-2",endInset:"pr-2"},"2xs":{startPad:"pl-6",endPad:"pr-5",startInset:"pl-1.5",endInset:"pr-2"}},Lt=w.forwardRef(({className:e,type:t,size:o="default",variant:r="default",startSlot:a,endSlot:n,...i},c)=>{if(!a&&!n)return w.createElement("input",{type:t,className:p(au({size:o,variant:r}),e),ref:c,...i});let s=Sy[o];return w.createElement("div",{className:"relative flex w-full items-center"},a?w.createElement("span",{className:p("pointer-events-none absolute inset-y-0 left-0 flex items-center text-muted-foreground [&_svg]:size-3.5",s.startInset)},a):null,w.createElement("input",{type:t,ref:c,className:p(au({size:o,variant:r}),a&&s.startPad,n&&s.endPad,e),...i}),n?w.createElement("span",{className:p("pointer-events-none absolute inset-y-0 right-0 flex items-center text-muted-foreground [&_svg]:size-3.5",s.endInset)},n):null)});Lt.displayName="Input";var ky=cva("font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",{variants:{size:{default:"text-sm",sm:"text-sm",xs:"text-xs","2xs":"text-2xs"}},defaultVariants:{size:"default"}}),Wn=w.forwardRef(({className:e,size:t,...o},r)=>w.createElement(ms.Root,{ref:r,className:p(ky({size:t}),e),...o}));Wn.displayName=ms.Root.displayName;var iu=w.forwardRef(({className:e,value:t,...o},r)=>w.createElement(jn.Root,{ref:r,className:p("relative h-4 w-full overflow-hidden rounded-full bg-secondary",e),...o},w.createElement(jn.Indicator,{className:"h-full w-full flex-1 bg-primary transition-all",style:{transform:`translateX(-${100-(t||0)}%)`}})));iu.displayName=jn.Root.displayName;var Rr=w.forwardRef(({className:e,...t},o)=>w.createElement(Command,{ref:o,className:p("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",e),...t}));Rr.displayName=Command.displayName;var Tr=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{className:"flex items-center border-b px-3","cmdk-input-wrapper":""},w.createElement(Search,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),w.createElement(Command.Input,{ref:o,className:p("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",e),...t})));Tr.displayName=Command.Input.displayName;var Pr=w.forwardRef(({className:e,...t},o)=>w.createElement(Command.List,{ref:o,className:p("max-h-[300px] overflow-y-auto overflow-x-hidden",e),...t}));Pr.displayName=Command.List.displayName;var Mr=w.forwardRef((e,t)=>w.createElement(Command.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));Mr.displayName=Command.Empty.displayName;var vo=w.forwardRef(({className:e,...t},o)=>w.createElement(Command.Group,{ref:o,className:p("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",e),...t}));vo.displayName=Command.Group.displayName;var Kn=w.forwardRef(({className:e,...t},o)=>w.createElement(Command.Separator,{ref:o,className:p("-mx-1 h-px bg-border",e),...t}));Kn.displayName=Command.Separator.displayName;var io=w.forwardRef(({className:e,...t},o)=>w.createElement(Command.Item,{ref:o,className:p("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",e),...t}));io.displayName=Command.Item.displayName;var qn=w.forwardRef(({className:e,orientation:t="horizontal",decorative:o=true,...r},a)=>w.createElement(fs.Root,{ref:a,decorative:o,orientation:t,className:p("shrink-0 bg-border",t==="horizontal"?"h-[1px] w-full":"h-full w-[1px]",e),...r}));qn.displayName=fs.Root.displayName;var Ly=3,su=w.forwardRef(function({options:t,value:o,defaultValue:r,onValueChange:a,placeholder:n="Select\u2026",searchPlaceholder:i="Search\u2026",emptyMessage:c="Nothing matches.",maxCount:s=Ly,searchable:l=true,badgeDismissible:d=true,disabled:m=false,modalPopover:u=false,className:f,id:h,"aria-label":g,...b},v){let C=o!==void 0,[S,x]=w.useState(r??[]),y=C?o:S,[R,L]=w.useState(false),D=w.useMemo(()=>{let T=new Map;for(let _ of t)T.set(_.value,_);return T},[t]),I=w.useCallback(T=>{C||x(T),a?.(T);},[C,a]),E=T=>{y.includes(T)?I(y.filter(_=>_!==T)):I([...y,T]);},H=(T,_)=>{T.preventDefault(),T.stopPropagation(),I(y.filter(ae=>ae!==_));},z=T=>{T?.preventDefault(),T?.stopPropagation(),I([]);},W=()=>{let T=t.filter(_=>!_.disabled).map(_=>_.value);I(T);},Z=t.length>0&&t.filter(T=>!T.disabled).every(T=>y.includes(T.value)),O=y.slice(0,s),B=Math.max(0,y.length-s);return w.createElement(bt,{open:R,onOpenChange:L,modal:u},w.createElement(vt,{asChild:true},w.createElement("button",{ref:v,type:"button",id:h,role:"combobox","aria-expanded":R,"aria-haspopup":"listbox","aria-label":g,disabled:m,"data-gds-part":"multi-select",className:p("flex min-h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent pl-2 pr-2 text-sm shadow-sm","ring-offset-background placeholder:text-muted-foreground","focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring","disabled:cursor-not-allowed disabled:opacity-50","[&[data-state=open]]:ring-1 [&[data-state=open]]:ring-ring",f)},y.length===0?w.createElement("span",{className:"text-muted-foreground px-1"},n):w.createElement("div",{className:"flex flex-1 flex-wrap items-center gap-1 py-1","data-gds-part":"multi-select-badges"},O.map(T=>{let _=D.get(T);if(!_)return null;let ae=_.icon;return w.createElement(Ko,{key:T,variant:"secondary",className:"gap-1 pr-1","data-gds-part":"multi-select-badge"},ae?w.createElement(ae,{className:"h-3 w-3"}):null,w.createElement("span",{className:"truncate max-w-[12rem]"},_.label),d&&!m&&w.createElement("span",{role:"button","aria-label":`Remove ${_.label}`,tabIndex:0,onClick:te=>H(te,T),onKeyDown:te=>{(te.key==="Enter"||te.key===" ")&&H(te,T);},className:"ml-0.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm hover:bg-muted-foreground/20"},w.createElement(X,{className:"h-3 w-3","aria-hidden":true})))}),B>0&&w.createElement(Ko,{variant:"outline",className:"text-muted-foreground","data-gds-part":"multi-select-overflow",title:y.slice(s).map(T=>D.get(T)?.label??T).join(", ")},"+",B," more")),w.createElement("div",{className:"flex shrink-0 items-center gap-1"},y.length>0&&!m&&w.createElement("span",{role:"button","aria-label":"Clear all",tabIndex:0,onClick:T=>z(T),onKeyDown:T=>{(T.key==="Enter"||T.key===" ")&&z(T);},className:"inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-muted"},w.createElement(XCircle,{className:"h-3.5 w-3.5","aria-hidden":true})),w.createElement(ChevronDown,{className:"h-4 w-4 shrink-0 text-muted-foreground","aria-hidden":true})))),w.createElement(it,{align:"start",className:"w-[var(--radix-popover-trigger-width)] p-0","data-gds-part":"multi-select-content"},w.createElement(Rr,null,l&&w.createElement(Tr,{placeholder:i}),w.createElement(Pr,null,w.createElement(Mr,null,c),w.createElement(vo,null,t.map(T=>{let _=T.icon,ae=y.includes(T.value);return w.createElement(io,{key:T.value,value:T.label,onSelect:()=>E(T.value),disabled:T.disabled,"data-gds-part":"multi-select-item","data-selected":ae||void 0},w.createElement("div",{className:p("mr-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary",ae?"bg-primary text-primary-foreground":"opacity-50 [&_svg]:invisible"),"aria-hidden":true},w.createElement(Check,{className:"h-3 w-3"})),_?w.createElement(_,{className:"mr-2 h-4 w-4 text-muted-foreground"}):null,w.createElement("span",{className:"truncate"},T.label))})),w.createElement(Kn,null),w.createElement(vo,null,w.createElement("div",{className:"flex items-center justify-between gap-1 p-1"},w.createElement(io,{onSelect:W,className:"flex-1 justify-center text-xs",disabled:Z},"Select all"),w.createElement(qn,{orientation:"vertical",className:"h-5"}),w.createElement(io,{onSelect:()=>z(),className:"flex-1 justify-center text-xs",disabled:y.length===0},"Clear"),w.createElement(qn,{orientation:"vertical",className:"h-5"}),w.createElement(io,{onSelect:()=>L(false),className:"flex-1 justify-center text-xs"},"Close")))))))});su.displayName="MultiSelect";var lu=w.forwardRef(function({options:t,value:o,defaultValue:r=null,onValueChange:a,placeholder:n="Select\u2026",searchPlaceholder:i="Search\u2026",emptyMessage:c="Nothing matches.",searchable:s=true,clearable:l=false,triggerVariant:d="default",renderValue:m,hideChevron:u=false,disabled:f=false,modalPopover:h=false,align:g="start",className:b,id:v,"aria-label":C,...S},x){let y=o!==void 0,[R,L]=w.useState(r),D=y?o:R,[I,E]=w.useState(false),H=w.useMemo(()=>t.find(B=>B.value===D)??null,[t,D]),z=w.useCallback(B=>{y||L(B),a?.(B);},[y,a]),W=B=>{z(l&&B===D?null:B),E(false);},Z=d==="inline",O=H?.icon;return w.createElement(bt,{open:I,onOpenChange:E,modal:h},w.createElement(vt,{asChild:true},w.createElement("button",{ref:x,type:"button",id:v,role:"combobox","aria-expanded":I,"aria-haspopup":"listbox","aria-label":C,disabled:f,"data-gds-part":"combobox","data-variant":d,className:p("ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",Z?"inline-flex max-w-full items-center gap-1 rounded-md px-1 py-0.5 text-sm hover:bg-muted data-[state=open]:bg-muted":"flex min-h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-ring",b),...S},w.createElement("span",{className:p("flex min-w-0 items-center gap-1.5",!H&&"text-muted-foreground"),"data-gds-part":"combobox-value"},H?m?m(H):w.createElement(w.Fragment,null,O?w.createElement(O,{className:"h-4 w-4 shrink-0 text-muted-foreground"}):null,w.createElement("span",{className:"truncate"},H.label)):n),!u&&w.createElement(ChevronsUpDown,{className:p("h-4 w-4 shrink-0 text-muted-foreground",Z&&"opacity-60"),"aria-hidden":true}))),w.createElement(it,{align:g,className:"w-[var(--radix-popover-trigger-width)] min-w-[12rem] p-0","data-gds-part":"combobox-content"},w.createElement(Rr,{filter:(B,T,_)=>`${B} ${(_??[]).join(" ")}`.toLowerCase().includes(T.toLowerCase())?1:0},s&&w.createElement(Tr,{placeholder:i}),w.createElement(Pr,null,w.createElement(Mr,null,c),w.createElement(vo,null,t.map(B=>{let T=B.icon,_=B.value===D;return w.createElement(io,{key:B.value,value:B.label,keywords:B.keywords,onSelect:()=>W(B.value),disabled:B.disabled,"data-gds-part":"combobox-item","data-selected":_||void 0,className:"[&_svg]:text-muted-foreground data-[selected=true]:[&_svg]:text-accent-foreground"},T?w.createElement(T,{className:"mr-2 h-4 w-4"}):null,w.createElement("span",{className:"truncate"},B.label),w.createElement(Check,{className:p("ml-auto h-4 w-4",_?"opacity-100":"opacity-0"),"aria-hidden":true}))})),l&&D!==null&&w.createElement(w.Fragment,null,w.createElement(Kn,null),w.createElement(vo,null,w.createElement(io,{onSelect:()=>{z(null),E(false);},"data-gds-part":"combobox-clear",className:"[&_svg]:text-muted-foreground data-[selected=true]:[&_svg]:text-accent-foreground"},w.createElement(X,{className:"mr-2 h-4 w-4"}),w.createElement("span",null,"Clear"))))))))});lu.displayName="Combobox";var cu=cva("gds-row flex flex-row",{variants:{gap:{none:"gap-0",xs:"gap-1",sm:"gap-2",md:"gap-4",lg:"gap-6",xl:"gap-8","2xl":"gap-12"},align:{start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},justify:{start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between",around:"justify-around",evenly:"justify-evenly"},wrap:{true:"flex-wrap",false:"flex-nowrap"}},defaultVariants:{gap:"md",align:"center",justify:"start",wrap:false}}),Qo=w.forwardRef(({className:e,gap:t,align:o,justify:r,wrap:a,asChild:n=false,...i},c)=>w.createElement(n?Slot:"div",{ref:c,"data-gds-part":"row",className:p(cu({gap:t,align:o,justify:r,wrap:a,className:e})),...i}));Qo.displayName="Row";var du=cva("gds-stack flex flex-col",{variants:{gap:{none:"gap-0",xs:"gap-1",sm:"gap-2",md:"gap-4",lg:"gap-6",xl:"gap-8","2xl":"gap-12"},align:{start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch"},justify:{start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between",around:"justify-around",evenly:"justify-evenly"}},defaultVariants:{gap:"md",align:"stretch",justify:"start"}}),nn=w.forwardRef(({className:e,gap:t,align:o,justify:r,asChild:a=false,...n},i)=>w.createElement(a?Slot:"div",{ref:i,"data-gds-part":"stack",className:p(du({gap:t,align:o,justify:r,className:e})),...n}));nn.displayName="Stack";var Ja=w.forwardRef(({className:e,...t},o)=>w.createElement("div",{className:"relative w-full overflow-auto"},w.createElement("table",{ref:o,className:p("w-full caption-bottom text-sm",e),...t})));Ja.displayName="Table";var Qa=w.forwardRef(({className:e,...t},o)=>w.createElement("thead",{ref:o,className:p("[&_tr]:border-b",e),...t}));Qa.displayName="TableHeader";var ei=w.forwardRef(({className:e,...t},o)=>w.createElement("tbody",{ref:o,className:p("[&_tr:last-child]:border-0",e),...t}));ei.displayName="TableBody";var pu=w.forwardRef(({className:e,...t},o)=>w.createElement("tfoot",{ref:o,className:p("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",e),...t}));pu.displayName="TableFooter";var an=w.forwardRef(({className:e,...t},o)=>w.createElement("tr",{ref:o,className:p("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",e),...t}));an.displayName="TableRow";var ti=w.forwardRef(({className:e,...t},o)=>w.createElement("th",{ref:o,className:p("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",e),...t}));ti.displayName="TableHead";var Yn=w.forwardRef(({className:e,...t},o)=>w.createElement("td",{ref:o,className:p("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",e),...t}));Yn.displayName="TableCell";var uu=w.forwardRef(({className:e,...t},o)=>w.createElement("caption",{ref:o,className:p("mt-4 text-sm text-muted-foreground",e),...t}));uu.displayName="TableCaption";var ri=cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-transparent",outline:"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",segmented:"rounded-md bg-transparent text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm"},size:{default:"h-9 px-2 min-w-9",sm:"h-8 px-1.5 min-w-8",xs:"h-7 px-1 min-w-7 text-xs","2xs":"h-6 px-1 min-w-6 text-2xs [&_svg]:size-3",lg:"h-10 px-2.5 min-w-10"}},defaultVariants:{variant:"default",size:"default"}}),mu=w.forwardRef(({className:e,variant:t,size:o,...r},a)=>w.createElement(gs.Root,{ref:a,className:p(ri({variant:t,size:o,className:e})),...r}));mu.displayName=gs.Root.displayName;var hs=so.Provider,Nr=so.Root,Er=so.Trigger,er=w.forwardRef(({className:e,sideOffset:t=4,...o},r)=>w.createElement(so.Portal,null,w.createElement(so.Content,{ref:r,sideOffset:t,className:p("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",e),...o})));er.displayName=so.Content.displayName;var fu=w.createContext({size:"default",variant:"default"}),yo=w.forwardRef(({className:e,variant:t,size:o,children:r,...a},n)=>w.createElement(sn.Root,{ref:n,className:p("flex items-center justify-center gap-1",t==="segmented"&&"inline-flex gap-0 rounded-lg bg-muted/70 p-0.5",e),...a},w.createElement(fu.Provider,{value:{variant:t,size:o}},r)));yo.displayName=sn.Root.displayName;var xo=w.forwardRef(({className:e,children:t,variant:o,size:r,tooltip:a,tooltipSide:n="top",tooltipDelay:i,"aria-label":c,...s},l)=>{let d=w.useContext(fu),m=c??(typeof a=="string"?a:void 0),u=w.createElement(sn.Item,{ref:l,className:p(ri({variant:d.variant||o,size:d.size||r}),e),"aria-label":m,...s},t);return a==null?u:w.createElement(Nr,{delayDuration:i},w.createElement(Er,{asChild:true},w.createElement("span",{className:"inline-flex"},u)),w.createElement(er,{side:n},a))});xo.displayName=sn.Item.displayName;function ni(e,t,o){let[r,a]=w.useState(t),n=e!==void 0?e:r,i=w.useCallback(c=>{let s=typeof c=="function"?c(n):c;e===void 0&&a(s),o?.(s);},[e,o,n]);return [n,i]}function Zy(e={}){let{defaultView:t="table",views:o=["table","cards","grid"],defaultActiveId:r=null,defaultSorting:a=[],defaultColumnVisibility:n={}}=e,[i,c]=w.useState(t),[s,l]=w.useState(r),[d,m]=w.useState(a),[u,f]=w.useState(n);return {view:i,setView:c,views:o,activeId:s,setActiveId:l,sorting:d,setSorting:m,columnVisibility:u,setColumnVisibility:f}}var Xy=e=>{let t=new Date(e);return Number.isNaN(t.getTime())?String(e):t.toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"})};function ai(e,t){if(e.cell)return e.cell(t);let o=t[e.key];switch(e.type){case "badge":{let r=e.options?.find(a=>a.value===o);return w.createElement(Ko,{variant:r?.variant??"secondary"},r?.label??o)}case "tags":return Array.isArray(o)?w.createElement(Qo,{gap:"xs",wrap:true},o.map(r=>w.createElement(Ko,{key:String(r),variant:"secondary"},r))):null;case "number":return w.createElement("span",{className:"tabular-nums"},o);case "currency":return w.createElement("span",{className:"tabular-nums"},"$"+Number(o).toLocaleString("en-US"));case "percent":return w.createElement("span",{className:"tabular-nums"},Math.round(Number(o)*100)+"%");case "date":return w.createElement("span",{className:"tabular-nums text-muted-foreground"},Xy(o));case "boolean":return w.createElement(Ko,{variant:o?"success-soft":"outline"},o?"Yes":"No");case "url":return w.createElement("a",{href:String(o),className:"text-primary underline-offset-2 hover:underline"},String(o).replace(/^https?:\/\//,""));default:return w.createElement("span",null,o)}}var Jy={table:Rows3,cards:LayoutGrid,grid:Grid3x3},Qy={table:"Table view",cards:"Card view",grid:"Grid view"};function bs({value:e,onChange:t,views:o=["table","cards","grid"],className:r}){return o.length<2?null:w.createElement(yo,{type:"single",value:e,onValueChange:a=>a&&t(a),className:r,"data-gds-part":"data-view-toggle"},o.map(a=>{let n=Jy[a];return w.createElement(xo,{key:a,value:a,"aria-label":Qy[a]},w.createElement(n,{className:"h-4 w-4"}))}))}function vs({columns:e,visibility:t,onVisibilityChange:o,label:r="Display",className:a}){let n=e.filter(s=>s.hideable!==false),i=s=>t[s]!==false,c=s=>o({...t,[s]:!i(s)});return w.createElement(ps,null,w.createElement(us,{asChild:true},w.createElement(Ie,{variant:"outline",size:"sm",className:a,"data-gds-part":"data-view-columns"},w.createElement(SlidersHorizontal,{className:"mr-1.5 h-3.5 w-3.5"}),r)),w.createElement(Wa,{align:"end",className:"w-48"},w.createElement(ja,null,"Show fields"),w.createElement(Ka,null),n.map(s=>w.createElement(Ua,{key:s.key,checked:i(s.key),onCheckedChange:()=>c(s.key),onSelect:l=>l.preventDefault()},typeof s.header=="string"?s.header:s.key))))}function ii(e){let{data:t,columns:o,getRowId:r=te=>String(te.id),view:a,defaultView:n="table",onViewChange:i,views:c=["table","cards","grid"],activeId:s,defaultActiveId:l=null,onActiveChange:d,sorting:m,defaultSorting:u=[],onSortingChange:f,columnVisibility:h,defaultColumnVisibility:g,onColumnVisibilityChange:b,stickyHeader:v=false,toolbar:C=false,renderCard:S,emptyMessage:x="Nothing to show.",className:y}=e,[R,L]=ni(a,n,i),[D,I]=ni(s,l,d),[E,H]=ni(m,u,f),z=w.useMemo(()=>{let te={...g??{}};for(let X of o)X.defaultHidden&&(te[X.key]??=false);return te},[]),[W,Z]=ni(h,z,b),O=w.useMemo(()=>o.map(te=>({id:te.key,accessorKey:te.key,header:()=>te.header,enableSorting:!!te.sortable,enableHiding:te.hideable!==false,meta:te})),[o]),B=useReactTable({data:t,columns:O,getRowId:r,state:{sorting:E,columnVisibility:W},onSortingChange:H,onColumnVisibilityChange:Z,getCoreRowModel:getCoreRowModel(),getSortedRowModel:getSortedRowModel()}),T=w.useMemo(()=>{let te={},X=0;for(let re of o)re.pinned==="left"&&(te[re.key]=X,X+=re.width??0);return te},[o]),ae=B.getRowModel().rows.length===0;return w.createElement(nn,{gap:"md",className:y,"data-gds-part":"data-view","data-view":R},C&&w.createElement(Qo,{justify:"end",align:"center",gap:"sm"},w.createElement(vs,{columns:o,visibility:W,onVisibilityChange:te=>Z(te)}),w.createElement(bs,{value:R,onChange:L,views:c})),R==="table"?w.createElement(ex,{table:B,activeId:D,onActivate:I,pinnedOffset:T,stickyHeader:v,emptyMessage:x,isEmpty:ae}):w.createElement(tx,{table:B,mode:R,activeId:D,onActivate:I,renderCard:S,emptyMessage:x,isEmpty:ae}))}ii.displayName="DataView";ii.Toggle=bs;ii.Columns=vs;function ex({table:e,activeId:t,onActivate:o,pinnedOffset:r,stickyHeader:a,emptyMessage:n,isEmpty:i}){let c=e.getVisibleLeafColumns(),s=(l,d)=>{if(l in r)return {position:"sticky",left:r[l],zIndex:d?30:10,background:"var(--gds-data-view-pinned-bg, oklch(var(--background)))"}};return w.createElement("div",{className:"rounded-lg border border-border overflow-auto","data-gds-part":"data-view-table",style:a?{maxHeight:"var(--gds-data-view-table-max-h, 28rem)"}:void 0},w.createElement(Ja,null,w.createElement(Qa,null,e.getHeaderGroups().map(l=>w.createElement(an,{key:l.id},l.headers.map(d=>{let m=d.column.columnDef.meta,u=d.column.getCanSort(),f=d.column.getIsSorted(),h=f==="asc"?ArrowUp:f==="desc"?ArrowDown:ArrowUpDown,g=s(d.column.id,true);return w.createElement(ti,{key:d.id,style:{...m?.width?{width:m.width,minWidth:m.width}:{},...a?{position:"sticky",top:0,zIndex:g?30:20,background:"var(--gds-data-view-header-bg, oklch(var(--background)))"}:{},...g},className:p(m?.align==="end"&&"text-right",d.column.id in r&&"border-r border-border")},u?w.createElement("button",{type:"button",className:"inline-flex items-center gap-1 text-left font-medium hover:text-foreground",onClick:d.column.getToggleSortingHandler()},typeof m?.header<"u"?m.header:null,w.createElement(h,{className:f?"h-3 w-3 text-foreground":"h-3 w-3 text-muted-foreground"})):m?.header??null)})))),w.createElement(ei,null,i?w.createElement(an,null,w.createElement(Yn,{colSpan:c.length,className:"py-12 text-center text-sm text-muted-foreground"},n)):e.getRowModel().rows.map(l=>{let d=l.id===t;return w.createElement(an,{key:l.id,"data-state":d?"selected":void 0,className:d?"cursor-pointer bg-muted":"cursor-pointer",onClick:()=>o(l.id)},l.getVisibleCells().map(m=>{let u=m.column.columnDef.meta,f=s(m.column.id,false);return w.createElement(Yn,{key:m.id,style:{...u?.width?{width:u.width,minWidth:u.width}:{},...f?{...f,background:d?"var(--muted, oklch(var(--background)))":f.background}:{}},className:p(u?.align==="end"&&"text-right",m.column.id in r&&"border-r border-border")},ai(u,l.original))}))}))))}function tx({table:e,mode:t,activeId:o,onActivate:r,renderCard:a,emptyMessage:n,isEmpty:i}){let c=e.getVisibleLeafColumns().map(f=>f.columnDef.meta),s=c.find(f=>f?.role==="title")??c[0],l=c.filter(f=>f&&f!==s&&(f.type==="badge"||f.type==="tags")),d=c.filter(f=>f&&f!==s&&f.type!=="badge"&&f.type!=="tags"),m=t==="grid",u=m?"var(--gds-data-view-grid-min, 11rem)":"var(--gds-data-view-card-min, 18rem)";return i?w.createElement("div",{className:"rounded-lg border border-border py-12 text-center text-sm text-muted-foreground"},n):w.createElement("div",{"data-gds-part":m?"data-view-grid":"data-view-cards",style:{display:"grid",gap:"var(--gds-data-view-gap, 0.75rem)",gridTemplateColumns:`repeat(auto-fill, minmax(${u}, 1fr))`}},e.getRowModel().rows.map(f=>{let h=f.id===o;return a?w.createElement("div",{key:f.id,onClick:()=>r(f.id)},a(f.original,{active:h})):w.createElement(Sa,{key:f.id,onClick:()=>r(f.id),className:h?"cursor-pointer ring-2 ring-primary":"cursor-pointer hover:bg-muted/40"},w.createElement(nn,{gap:"sm",className:m?"p-3":"p-4"},w.createElement(Qo,{justify:"between",align:"start",gap:"sm"},s?w.createElement("span",{className:"min-w-0 truncate font-medium"},ai(s,f.original)):null),l.length>0&&w.createElement(Qo,{gap:"xs",wrap:true},l.map(g=>w.createElement(w.Fragment,{key:g.key},ai(g,f.original)))),!m&&d.length>0&&w.createElement(nn,{gap:"xs"},d.slice(0,3).map(g=>w.createElement(Qo,{key:g.key,justify:"between",gap:"sm",align:"center"},w.createElement("span",{className:"text-xs text-muted-foreground"},typeof g.header=="string"?g.header:g.key),w.createElement("span",{className:"text-sm"},ai(g,f.original)))))))}))}var gu=w.forwardRef(({className:e,...t},o)=>w.createElement(or.Root,{className:p("grid gap-2",e),...t,ref:o}));gu.displayName=or.Root.displayName;var hu=w.forwardRef(({className:e,...t},o)=>w.createElement(or.Item,{ref:o,className:p("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",e),...t},w.createElement(or.Indicator,{className:"flex items-center justify-center"},w.createElement(Circle,{className:"h-2.5 w-2.5 fill-current text-current"}))));hu.displayName=or.Item.displayName;var nx=({className:e,...t})=>w.createElement(ln.PanelGroup,{"data-gds-part":"resizable-panel-group",className:p("flex h-full w-full data-[panel-group-direction=vertical]:flex-col",e),...t}),ax=ln.Panel,ix=({withHandle:e,className:t,...o})=>w.createElement(ln.PanelResizeHandle,{"data-gds-part":"resizable-handle",className:p("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",t),...o},e&&w.createElement("div",{className:"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"},w.createElement(GripVertical,{className:"h-2.5 w-2.5"})));var bu=cva("gds-grid grid",{variants:{cols:{1:"grid-cols-1",2:"grid-cols-1 md:grid-cols-2",3:"grid-cols-1 sm:grid-cols-2 md:grid-cols-3",4:"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",5:"grid-cols-1 sm:grid-cols-2 lg:grid-cols-5",6:"grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",12:"grid-cols-4 md:grid-cols-6 lg:grid-cols-12"},gap:{none:"gap-0",xs:"gap-1",sm:"gap-2",md:"gap-4",lg:"gap-6",xl:"gap-8","2xl":"gap-12"},align:{start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch"}},defaultVariants:{cols:"3",gap:"md",align:"stretch"}}),vu=w.forwardRef(({className:e,cols:t,gap:o,align:r,asChild:a=false,...n},i)=>w.createElement(a?Slot:"div",{ref:i,"data-gds-part":"grid",className:p(bu({cols:t,gap:o,align:r,className:e})),...n}));vu.displayName="Grid";var yu=cva("gds-flex flex",{variants:{direction:{row:"flex-row",col:"flex-col","row-reverse":"flex-row-reverse","col-reverse":"flex-col-reverse"},gap:{none:"gap-0",xs:"gap-1",sm:"gap-2",md:"gap-4",lg:"gap-6",xl:"gap-8","2xl":"gap-12"},align:{start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},justify:{start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between",around:"justify-around",evenly:"justify-evenly"},wrap:{nowrap:"flex-nowrap",wrap:"flex-wrap","wrap-reverse":"flex-wrap-reverse"}},defaultVariants:{direction:"row",gap:"none",align:"stretch",justify:"start",wrap:"nowrap"}}),xu=w.forwardRef(({className:e,direction:t,gap:o,align:r,justify:a,wrap:n,asChild:i=false,...c},s)=>w.createElement(i?Slot:"div",{ref:s,"data-gds-part":"flex",className:p(yu({direction:t,gap:o,align:r,justify:a,wrap:n,className:e})),...c}));xu.displayName="Flex";var wu=w.forwardRef(({className:e,children:t,...o},r)=>w.createElement(qt.Root,{ref:r,className:p("relative overflow-hidden",e),...o},w.createElement(qt.Viewport,{className:"h-full w-full rounded-[inherit]"},t),w.createElement(ys,null),w.createElement(qt.Corner,null)));wu.displayName=qt.Root.displayName;var ys=w.forwardRef(({className:e,orientation:t="vertical",...o},r)=>w.createElement(qt.ScrollAreaScrollbar,{ref:r,orientation:t,className:p("flex touch-none select-none transition-colors",t==="vertical"&&"h-full w-2.5 border-l border-l-transparent p-[1px]",t==="horizontal"&&"h-2.5 flex-col border-t border-t-transparent p-[1px]",e),...o},w.createElement(qt.ScrollAreaThumb,{className:"relative flex-1 rounded-full bg-border"})));ys.displayName=qt.ScrollAreaScrollbar.displayName;var Jn=xe.Root,mx=xe.Group,Qn=xe.Value,xs=w.createContext("default"),fx=cva("flex w-full items-center justify-between rounded-md border border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",{variants:{size:{default:"h-10 px-3 py-2 text-sm",sm:"h-8 px-2 py-1 text-sm",xs:"h-7 px-2 py-0 text-xs","2xs":"h-6 rounded-lg pl-1.5 pr-2 py-0 text-2xs"}},defaultVariants:{size:"default"}}),cn=w.forwardRef(({className:e,children:t,size:o="default",startSlot:r,chevron:a=true,...n},i)=>w.createElement(xe.Trigger,{ref:i,className:p(fx({size:o}),e),...n},r?w.createElement("div",{className:"flex min-w-0 flex-1 items-center gap-1.5 [&>span]:truncate"},w.createElement("span",{className:"pointer-events-none flex shrink-0 items-center text-muted-foreground/70 [&_svg]:size-4"},r),t):t,a?w.createElement(xe.Icon,{asChild:true},w.createElement(ChevronDown,{className:p("opacity-50",o==="sm"?"h-3.5 w-3.5":"h-4 w-4")})):null));cn.displayName=xe.Trigger.displayName;var ws=w.forwardRef(({className:e,...t},o)=>w.createElement(xe.ScrollUpButton,{ref:o,className:p("flex cursor-default items-center justify-center py-1",e),...t},w.createElement(ChevronUp,{className:"h-4 w-4"})));ws.displayName=xe.ScrollUpButton.displayName;var Ss=w.forwardRef(({className:e,...t},o)=>w.createElement(xe.ScrollDownButton,{ref:o,className:p("flex cursor-default items-center justify-center py-1",e),...t},w.createElement(ChevronDown,{className:"h-4 w-4"})));Ss.displayName=xe.ScrollDownButton.displayName;var dn=w.forwardRef(({className:e,children:t,position:o="popper",size:r="default",container:a,...n},i)=>w.createElement(xe.Portal,{container:a??void 0},w.createElement(xe.Content,{ref:i,className:p("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",o==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),position:o,...n},w.createElement(ws,null),w.createElement(xe.Viewport,{className:p(r==="default"?"p-1":"p-0.5",o==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")},w.createElement(xs.Provider,{value:r},t)),w.createElement(Ss,null))));dn.displayName=xe.Content.displayName;var gx={default:"py-1.5 pl-8 pr-2 text-sm font-semibold",sm:"py-1 pl-7 pr-2 text-xs font-semibold",xs:"py-1 pl-6 pr-2 text-2xs font-medium text-muted-foreground uppercase tracking-wide","2xs":"py-0.5 pl-6 pr-2 text-2xs font-medium text-muted-foreground uppercase tracking-wide"},ku=w.forwardRef(({className:e,...t},o)=>{let r=w.useContext(xs);return w.createElement(xe.Label,{ref:o,className:p(gx[r],e),...t})});ku.displayName=xe.Label.displayName;var hx=cva("relative flex w-full cursor-default select-none items-center rounded-sm outline-none focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",{variants:{size:{default:"py-1.5 pl-8 pr-2 text-sm",sm:"py-1 pl-7 pr-2 text-sm",xs:"py-1 pl-6 pr-2 text-xs","2xs":"py-0.5 pl-6 pr-2 text-2xs"}},defaultVariants:{size:"default"}}),pn=w.forwardRef(({className:e,children:t,hint:o,...r},a)=>{let n=w.useContext(xs),i=n!=="default";return w.createElement(xe.Item,{ref:a,className:p("group",hx({size:n}),e),...r},w.createElement("span",{className:p("absolute flex items-center justify-center",i?"left-1.5 h-3 w-3":"left-2 h-3.5 w-3.5")},w.createElement(xe.ItemIndicator,null,w.createElement(Check,{className:i?"h-3 w-3":"h-4 w-4"}))),w.createElement(xe.ItemText,null,t),o!=null?w.createElement("span",{className:"ml-auto pl-3 tabular-nums text-muted-foreground/60 group-focus:text-accent-foreground/80 group-data-[highlighted]:text-accent-foreground/80"},o):null)});pn.displayName=xe.Item.displayName;var Ru=w.forwardRef(({className:e,...t},o)=>w.createElement(xe.Separator,{ref:o,className:p("-mx-1 my-1 h-px bg-muted",e),...t}));Ru.displayName=xe.Separator.displayName;var Tu=cva("relative inline-block shrink-0 overflow-hidden shadow-elevation-1",{variants:{size:{"2xs":"size-4",xs:"size-5",sm:"size-6",md:"size-8",lg:"size-10",xl:"size-14"},shape:{square:"rounded-none",rounded:"rounded-[var(--radius)]",circle:"rounded-full"}},compoundVariants:[{size:"2xs",shape:"rounded",class:"rounded-[2px]"}],defaultVariants:{size:"md",shape:"rounded"}});function vx(e,t){return e||(t?`oklch(var(--${t.replace(/^--/,"")}))`:"transparent")}var yx=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i,Pu=w.createContext({}),Bo=w.forwardRef(function({color:t,token:o,type:r,gradient:a,image:n,size:i,shape:c,label:s,selected:l,onSelect:d,onColorChange:m,className:u,style:f,title:h,"aria-label":g,...b},v){let C=w.useContext(Pu),S=i??C.size,x=c??C.shape,y=r??(n?"image":a?"gradient":"solid"),R=y==="image"&&n?`url("${n}") center / cover no-repeat`:y==="gradient"&&a?a:vx(t,o),L=typeof m=="function",D=!L&&typeof d=="function",I=yx.test(t??"")?t:"#000000",E=(typeof s=="string"?s:void 0)??o??t??"colour swatch",H={backgroundImage:"repeating-conic-gradient(var(--gds-media-checker-color) 0% 25%, transparent 0% 50%)",backgroundSize:"var(--gds-media-checker-size) var(--gds-media-checker-size)"},W=w.createElement(L?"label":D?"button":"div",{ref:v,"data-gds-part":"swatch","data-selected":l?"":void 0,title:h??E,"aria-label":g??(D?E:void 0),"aria-pressed":D?!!l:void 0,type:D?"button":void 0,onClick:D?d:void 0,className:p(Tu({size:S,shape:x}),l&&"ring-2 ring-selected ring-offset-2 ring-offset-background",(D||L)&&"cursor-pointer outline-none transition-transform hover:scale-[1.06] focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",!s&&u),style:{...H,...s?void 0:f},...s?{}:b},w.createElement("span",{className:"absolute inset-0",style:{background:R}}),w.createElement("span",{"aria-hidden":true,className:"pointer-events-none absolute inset-0 rounded-[inherit] ring-[0.5px] ring-inset ring-border"}),L&&w.createElement("input",{type:"color",value:I,onChange:Z=>m(Z.currentTarget.value),"aria-label":g??E,className:"absolute inset-0 cursor-pointer opacity-0"}));return s?w.createElement("div",{className:p("inline-flex flex-col items-start gap-1.5",u),style:f,...b},W,w.createElement("span",{className:"text-xs leading-none text-muted-foreground"},s)):W});Bo.displayName="Swatch";var xx={"2xs":"-space-x-1",xs:"-space-x-1.5",sm:"-space-x-2",md:"-space-x-2.5",lg:"-space-x-3",xl:"-space-x-4"},wx={xs:"gap-1",sm:"gap-2",md:"gap-3",lg:"gap-4"},Mu=w.forwardRef(function({layout:t="row",size:o,shape:r,gap:a="sm",className:n,children:i,...c},s){let l=t==="stack";return w.createElement(Pu.Provider,{value:{size:o,shape:r}},w.createElement("div",{ref:s,"data-gds-part":"swatch-group","data-layout":t,className:p("inline-flex flex-wrap items-center",l?p(xx[o??"md"],"[&_[data-gds-part=swatch]]:ring-2 [&_[data-gds-part=swatch]]:ring-background"):wx[a],n),...c},i))});Mu.displayName="SwatchGroup";var kx=je.Root,Rx=je.Trigger,Tx=je.Close,Nu=je.Portal,Cs=w.forwardRef(({className:e,...t},o)=>w.createElement(je.Overlay,{className:p("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t,ref:o}));Cs.displayName=je.Overlay.displayName;var Px=cva("fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",{variants:{side:{top:"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",bottom:"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"}},defaultVariants:{side:"right"}}),Eu=w.forwardRef(({side:e="right",surface:t="solid",className:o,overlayClassName:r,closeClassName:a,children:n,...i},c)=>w.createElement(Nu,null,w.createElement(Cs,{className:r}),w.createElement(je.Content,{ref:c,"data-surface":t,className:p(Px({side:e}),ro(t,"bg-background"),Ht[t],o),...i},n,w.createElement(je.Close,{className:p("absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",a)},w.createElement(X,{className:"h-4 w-4"}),w.createElement("span",{className:"sr-only"},"Close")))));Eu.displayName=je.Content.displayName;var Lu=({className:e,...t})=>w.createElement("div",{className:p("flex flex-col space-y-2 text-center sm:text-left",e),...t});Lu.displayName="SheetHeader";var Au=({className:e,...t})=>w.createElement("div",{className:p("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});Au.displayName="SheetFooter";var Du=w.forwardRef(({className:e,...t},o)=>w.createElement(je.Title,{ref:o,className:p("text-lg font-semibold text-foreground",e),...t}));Du.displayName=je.Title.displayName;var Iu=w.forwardRef(({className:e,...t},o)=>w.createElement(je.Description,{ref:o,className:p("text-sm text-muted-foreground",e),...t}));Iu.displayName=je.Description.displayName;function Mx({className:e,...t}){return w.createElement("div",{className:p("animate-pulse rounded-md bg-muted",e),...t})}var Nx={default:{track:"h-2 bg-secondary",range:"bg-primary",thumb:"h-5 w-5 border-2 border-primary focus-visible:ring-2 focus-visible:ring-offset-2"},sm:{track:"h-[3px] bg-border",range:"bg-foreground/40",thumb:"h-3 w-3 border border-border hover:border-foreground/40 focus-visible:ring-2"}},Ar=w.forwardRef(({className:e,size:t="default",...o},r)=>{let a=Nx[t];return w.createElement(Go.Root,{ref:r,className:p("relative flex w-full cursor-pointer touch-none select-none items-center py-2 -my-1",e),...o},w.createElement(Go.Track,{className:p("relative w-full grow overflow-hidden rounded-full",a.track)},w.createElement(Go.Range,{className:p("absolute h-full rounded-full",a.range)})),w.createElement(Go.Thumb,{className:p("block rounded-full bg-background shadow-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",a.thumb)}))});Ar.displayName=Go.Root.displayName;var zx={vertical:verticalListSortingStrategy,horizontal:horizontalListSortingStrategy,grid:rectSortingStrategy},ks=w.createContext(null),$u=w.createContext(null),Rs=w.forwardRef(function({disabled:t=false,className:o,children:r,...a},n){let i=w.useRef(new Map),c=w.useCallback(m=>(i.current.set(m.id,m),()=>{i.current.delete(m.id);}),[]),s=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:4}}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),l=m=>{let u=i.current,f=u.get(String(m));if(f)return f;for(let h of u.values())if(h.values.some(g=>g===m))return h;return null},d=w.useCallback(m=>{if(t)return;let{active:u,over:f}=m;if(!f)return;let h=l(u.id),g=l(f.id);if(!h||!g)return;if(h.id===g.id){if(u.id===f.id)return;let S=h.values.findIndex(y=>y===u.id),x=h.values.findIndex(y=>y===f.id);if(S===-1||x===-1)return;h.onReorder?.(arrayMove(h.values,S,x));return}let b=h.values.filter(S=>S!==u.id),v=f.id===g.id?g.values.length:Math.max(0,g.values.findIndex(S=>S===f.id)),C=[...g.values.slice(0,v),u.id,...g.values.slice(v)];h.onReorder?.(b),g.onReorder?.(C);},[t]);return w.createElement($u.Provider,{value:{registerContainer:c}},w.createElement(DndContext,{sensors:s,collisionDetection:closestCorners,onDragEnd:d},w.createElement("div",{ref:n,"data-gds-part":"sortable-group","data-disabled":t||void 0,className:p(o),...a},r)))});Rs.displayName="Sortable.Group";var ea=w.forwardRef(function({values:t,onReorder:o,strategy:r="vertical",disabled:a=false,id:n,className:i,children:c,...s},l){let d=w.useContext($u),m=d!==null,u=w.useId(),f=n??u;w.useEffect(()=>{if(m)return d.registerContainer({id:f,values:t,onReorder:o})},[m,d,f,t,o]);let h=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:4}}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),g=w.useCallback(C=>{let{active:S,over:x}=C;if(!x||S.id===x.id)return;let y=t.findIndex(L=>L===S.id),R=t.findIndex(L=>L===x.id);y===-1||R===-1||o?.(arrayMove(t,y,R));},[t,o]),b=w.useMemo(()=>({disabled:a}),[a]),v=w.createElement(SortableContext,{items:t,strategy:zx[r]},w.createElement(Vx,{id:f,enabled:m,forwardedRef:l,strategy:r,disabled:a,className:i,...s},c));return m?w.createElement(ks.Provider,{value:b},v):w.createElement(ks.Provider,{value:b},w.createElement(DndContext,{sensors:h,collisionDetection:closestCenter,onDragEnd:g},v))});ea.displayName="Sortable";function Vx({id:e,enabled:t,forwardedRef:o,strategy:r,disabled:a,className:n,children:i,...c}){let s=useDroppable({id:e,disabled:!t}),l=w.useCallback(d=>{t&&s.setNodeRef(d),typeof o=="function"?o(d):o&&(o.current=d);},[t,s,o]);return w.createElement("div",{ref:l,"data-gds-part":"sortable","data-strategy":r,"data-disabled":a||void 0,className:p(n),...c},i)}var Wu=w.createContext(null),Ts=w.forwardRef(function({value:t,asChild:o=false,disabled:r,className:a,style:n,children:i,...c},s){let l=w.useContext(ks);if(!l)throw new Error("<Sortable.Item> must be rendered inside <Sortable>.");let d=l.disabled||r||false,{attributes:m,listeners:u,setNodeRef:f,setActivatorNodeRef:h,transform:g,transition:b,isDragging:v}=useSortable({id:t,disabled:d}),C=w.useRef(false),S=w.useCallback(L=>{f(L),typeof s=="function"?s(L):s&&(s.current=L);},[f,s]),x=w.useMemo(()=>({listeners:u,setActivatorNodeRef:h,hasHandle:C,disabled:d}),[u,h,d]),y={transform:CSS.Transform.toString(g),transition:b,zIndex:v?1:void 0,cursor:d?"default":C.current?void 0:"grab",...n},R=o?Slot:"div";return w.createElement(Wu.Provider,{value:x},w.createElement(R,{ref:S,"data-gds-part":"sortable-item","data-value":String(t),"data-dragging":v||void 0,className:p(a),style:y,...m,...C.current?{}:u,...c},i))});Ts.displayName="Sortable.Item";var Ps=w.forwardRef(function({asChild:t=false,className:o,children:r,...a},n){let i=w.useContext(Wu);if(!i)throw new Error("<Sortable.Handle> must be rendered inside <Sortable.Item>.");w.useLayoutEffect(()=>(i.hasHandle.current=true,()=>{i.hasHandle.current=false;}),[i.hasHandle]);let c=w.useCallback(l=>{i.setActivatorNodeRef(l),typeof n=="function"?n(l):n&&(n.current=l);},[i,n]),s={"data-gds-part":"sortable-handle","aria-label":"Drag to reorder",className:p("cursor-grab touch-none select-none",i.disabled&&"cursor-default opacity-50",o),...i.disabled?{}:i.listeners,...a};return t?w.createElement(Slot,{ref:c,...s},r):w.createElement("button",{type:"button",ref:c,...s},r)});Ps.displayName="Sortable.Handle";ea.Item=Ts;ea.Handle=Ps;ea.Group=Rs;var Bx=ea;var Gx=cva("peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",{variants:{size:{default:"h-6 w-11",sm:"h-5 w-9",xs:"h-4 w-7","2xs":"h-3 w-5"}},defaultVariants:{size:"default"}}),$x=cva("pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",{variants:{size:{default:"h-5 w-5 data-[state=checked]:translate-x-5",sm:"h-4 w-4 data-[state=checked]:translate-x-4",xs:"h-3 w-3 data-[state=checked]:translate-x-3","2xs":"h-2 w-2 data-[state=checked]:translate-x-2"}},defaultVariants:{size:"default"}}),di=w.forwardRef(({className:e,size:t="default",...o},r)=>w.createElement(oa.Root,{className:p(Gx({size:t}),e),...o,ref:r},w.createElement(oa.Thumb,{className:p($x({size:t}))})));di.displayName=oa.Root.displayName;var ju=w.createContext(w.createElement(ChevronRight,null)),Ku=w.forwardRef(({separator:e,children:t,...o},r)=>w.createElement(ju.Provider,{value:e??w.createElement(ChevronRight,null)},w.createElement("nav",{ref:r,"aria-label":"breadcrumb",...o},t)));Ku.displayName="Breadcrumb";var qu=w.forwardRef(({className:e,...t},o)=>w.createElement("ol",{ref:o,className:p("flex flex-wrap items-center gap-1.5 break-words text-xs text-muted-foreground",e),...t}));qu.displayName="BreadcrumbList";var Yu=w.forwardRef(({className:e,...t},o)=>w.createElement("li",{ref:o,className:p("inline-flex items-center gap-1.5",e),...t}));Yu.displayName="BreadcrumbItem";var pi=p("inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-xs","transition-colors hover:text-foreground hover:bg-muted/60","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0"),Zu=w.forwardRef(({asChild:e,className:t,href:o,...r},a)=>e?w.createElement("span",{ref:a,className:p(pi,t),...r}):o?w.createElement("a",{ref:a,href:o,className:p(pi,t),...r}):w.createElement("button",{ref:a,type:"button",className:p(pi,t),...r}));Zu.displayName="BreadcrumbLink";var Xu=w.forwardRef(({className:e,...t},o)=>w.createElement("span",{ref:o,role:"link","aria-disabled":"true","aria-current":"page",className:p("inline-flex items-center gap-1.5 px-0.5 text-xs font-medium text-foreground","[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",e),...t}));Xu.displayName="BreadcrumbPage";var Ju=({children:e,className:t,...o})=>{let r=w.useContext(ju);return w.createElement("li",{role:"presentation","aria-hidden":"true",className:p("[&_svg]:size-3 [&_svg]:shrink-0 text-muted-foreground/60",t),...o},e??r)};Ju.displayName="BreadcrumbSeparator";var Qu=({className:e,...t})=>w.createElement("span",{role:"presentation","aria-hidden":"true",className:p("flex h-5 w-5 items-center justify-center",e),...t},w.createElement(MoreHorizontal,{className:"h-3.5 w-3.5"}),w.createElement("span",{className:"sr-only"},"More"));Qu.displayName="BreadcrumbEllipsis";var em=w.forwardRef(({label:e,items:t,onSelect:o,onSelectLabel:r,current:a,className:n},i)=>{let[c,s]=w.useState(false);return w.createElement(bt,{open:c,onOpenChange:s},w.createElement(vt,{asChild:true},w.createElement("button",{ref:i,type:"button",className:p(pi,a&&"font-medium text-foreground",n),onClick:()=>{r?r():s(l=>!l);}},w.createElement("span",null,e),w.createElement(ChevronDown,{className:p("h-3 w-3 text-muted-foreground transition-transform",c&&"rotate-180"),onClick:l=>{l.stopPropagation(),s(d=>!d);},role:"button","aria-label":`Show ${e} children`}))),w.createElement(it,{align:"start",className:"w-64 p-1 max-h-80 overflow-y-auto"},t.length===0?w.createElement("p",{className:"px-2 py-1.5 text-xs text-muted-foreground"},"No items here yet."):w.createElement("ul",{className:"flex flex-col gap-0.5"},t.map(l=>w.createElement("li",{key:l.id},w.createElement("button",{type:"button",onClick:()=>{o(l.id),s(false);},className:p("w-full text-left rounded-md px-2 py-1.5","flex items-start gap-2","hover:bg-muted transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",l.active&&"bg-muted/60")},w.createElement("span",{className:"flex-1 min-w-0"},w.createElement("span",{className:"flex items-center gap-1.5"},w.createElement("span",{className:"text-xs font-medium text-foreground truncate"},l.label),l.active&&w.createElement(Check,{className:"h-3 w-3 text-primary shrink-0"})),l.summary&&w.createElement("span",{className:"block text-[10px] text-muted-foreground leading-snug truncate"},l.summary)),l.hasChildren&&w.createElement(ChevronRight,{className:"h-3 w-3 text-muted-foreground/70 shrink-0 mt-0.5"})))))))});em.displayName="BreadcrumbMenuTrigger";var om=w.createContext({size:"md",variant:"pill"}),Kx=lo.Root,qx=cva("inline-flex items-center text-muted-foreground",{variants:{variant:{pill:"justify-center rounded-lg bg-muted",underlined:"justify-start border-b border-border"},size:{sm:"",md:"",lg:""}},compoundVariants:[{variant:"pill",size:"sm",className:"h-7 p-0.5"},{variant:"pill",size:"md",className:"h-8 p-0.5"},{variant:"pill",size:"lg",className:"h-10 p-1"},{variant:"underlined",size:"sm",className:"gap-3"},{variant:"underlined",size:"md",className:"gap-4"},{variant:"underlined",size:"lg",className:"gap-6"}],defaultVariants:{variant:"pill",size:"md"}}),Yx=cva("inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",{variants:{variant:{pill:"rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground",underlined:"rounded-none bg-transparent border-b-2 border-transparent -mb-px hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-primary"},size:{sm:"text-2xs gap-1 [&_svg]:size-3",md:"text-xs gap-1.5 [&_svg]:size-3.5",lg:"text-sm gap-2 [&_svg]:size-4"}},compoundVariants:[{variant:"pill",size:"sm",className:"h-6 px-1.5"},{variant:"pill",size:"md",className:"h-7 px-2"},{variant:"pill",size:"lg",className:"h-8 px-2.5"},{variant:"underlined",size:"sm",className:"pb-1.5 pt-1 px-1"},{variant:"underlined",size:"md",className:"pb-2 pt-1.5 px-1.5"},{variant:"underlined",size:"lg",className:"pb-2.5 pt-2 px-2"}],defaultVariants:{variant:"pill",size:"md"}}),rm=w.forwardRef(({className:e,size:t="md",variant:o="pill",children:r,...a},n)=>w.createElement(om.Provider,{value:{size:t??"md",variant:o??"pill"}},w.createElement(lo.List,{ref:n,className:p(qx({size:t,variant:o}),e),...a},r)));rm.displayName=lo.List.displayName;var nm=w.forwardRef(({className:e,size:t,variant:o,tooltip:r,...a},n)=>{let i=w.useContext(om),c=t??i.size,s=o??i.variant,l=a["aria-label"]??(typeof r=="string"?r:void 0),d=w.createElement(lo.Trigger,{ref:n,className:p(Yx({size:c,variant:s}),e),"aria-label":l,...a});return r?w.createElement(Nr,null,w.createElement(Er,{asChild:true},d),w.createElement(er,null,r)):d});nm.displayName=lo.Trigger.displayName;var am=w.forwardRef(({className:e,...t},o)=>w.createElement(lo.Content,{ref:o,className:p("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",e),...t}));am.displayName=lo.Content.displayName;var Zx={light:"",dark:".dark"},im=w.createContext(null);function sm(){let e=w.useContext(im);if(!e)throw new Error("useChart must be used within a <ChartContainer />");return e}var lm=w.forwardRef(({id:e,className:t,children:o,config:r,...a},n)=>{let i=w.useId(),c=`chart-${e||i.replace(/:/g,"")}`;return w.createElement(im.Provider,{value:{config:r}},w.createElement("div",{"data-chart":c,ref:n,className:p("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",t),...a},w.createElement(cm,{id:c,config:r}),w.createElement(un.ResponsiveContainer,null,o)))});lm.displayName="Chart";var cm=({id:e,config:t})=>{let o=Object.entries(t).filter(([,r])=>r.theme||r.color);return o.length?w.createElement("style",{dangerouslySetInnerHTML:{__html:Object.entries(Zx).map(([r,a])=>`
|
|
117
|
-
${
|
|
118
|
-
${o.map(([n,i])=>{let c=i.theme?.[
|
|
114
|
+
`)),et(240,_e)}let Dt=ue.speed?Ma[ue.speed].tokenStagger:Ut.speed.tokenStagger,Fe=No.current,ro=Fe.length>0&&!Fe.endsWith(`
|
|
115
|
+
`)?Fe+`
|
|
116
|
+
`:Fe;await et(60,_e);for(let ee=0;ee<ue.text.length;ee++){if(_e.aborted)return;let Pe=ro+ue.text.slice(0,ee+1);U(Pe),ee<ue.text.length-1&&await et(Dt,_e);}}});y.useEffect(()=>{oe&&de(ne);},[oe,ne]);let Ae=b??(n==="typewriter"||oe);return y.createElement("div",{ref:Re,"data-gds-part":"code","data-gds-reveal":n,"data-gds-trigger":i,"data-gds-size":x,className:d("gds-code relative w-full overflow-hidden",Ig[x],!h&&["rounded-lg border bg-[var(--gds-code-bg)] text-[var(--gds-code-fg)]","border-border/60"],C),style:M,...I},u&&!h?y.createElement("div",{"data-gds-part":"code-header",className:"flex items-center justify-between border-b border-border/60 px-4 py-2 text-xs text-muted-foreground"},y.createElement("span",{className:"font-mono"},u),o?y.createElement("span",{className:"uppercase tracking-wider opacity-60"},o):null):null,y.createElement(Highlight,{code:re,language:o,theme:Fg},({tokens:ue,getLineProps:Ut,getTokenProps:_e})=>y.createElement("pre",{"data-gds-part":"code-pre",className:d("font-mono leading-relaxed",h?"p-0":"px-0 py-3",g?"whitespace-pre-wrap break-words":"overflow-x-auto whitespace-pre",(w!==void 0||S!==void 0)&&"overflow-y-auto"),style:{background:"transparent",margin:0,...S!==void 0?{height:`calc(${S} * 1lh + 0.5rem)`}:w!==void 0&&w!=="auto"?{height:typeof w=="number"?`${w}px`:w}:null}},ue.map((Dt,Fe)=>{let ro=Fe+1,ee=Vg(ro,r,Z),Pe=Ut({line:Dt}),$t=Fe===ue.length-1,jo=oe&&H.has(ro),On=Ae&&$t&&(!Oe||b===true),ja=d("flex w-full pr-4",h?"pl-0":"pl-4",ee==="added"&&"bg-[var(--gds-code-diff-added-bg)] text-[var(--gds-code-diff-added-fg)]",ee==="removed"&&"bg-[var(--gds-code-diff-removed-bg)] text-[var(--gds-code-diff-removed-fg)]",ee==="highlight"&&"bg-[var(--gds-code-line-highlight-bg)] shadow-[inset_2px_0_0_0_var(--gds-code-line-highlight-marker)]"),fa=y.createElement(y.Fragment,null,Q?y.createElement("span",{"data-gds-part":"code-gutter",className:d("select-none pr-3 text-right font-mono text-xs leading-relaxed opacity-60",G?"w-10":"w-8"),"aria-hidden":true},G?y.createElement("span",{className:"inline-block w-3 text-center"},ee==="added"?"+":ee==="removed"?"-":" "):null,m?y.createElement("span",{className:"ml-1 tabular-nums"},ro):null):null,y.createElement("span",{className:"flex-1",style:jo?{color:"var(--gds-code-comment)"}:void 0},f&&!jo?y.createElement("span",{"data-gds-part":"code-prompt","aria-hidden":true,className:"select-none opacity-60",style:{color:"var(--gds-code-comment)"}},f):null,n==="typewriter"&&pe&&!oe?y.createElement(Bg,{line:Dt,getTokenProps:_e,delay:ye+E+Fe*He,stagger:He}):Dt.map((bm,vm)=>y.createElement("span",{key:vm,..._e({token:bm})})),On&&!jo?y.createElement(Yr,{"data-gds-part":"code-cursor"}):null));return n==="none"||n==="typewriter"||oe||!pe?y.createElement("div",{key:Fe,...Pe,className:d(Pe.className,ja),style:{...Pe.style,opacity:i!=="mount"&&!pe&&n!=="none"?0:void 0}},fa):y.createElement(motion.div,{key:Fe,...Pe,className:d(Pe.className,ja),initial:{opacity:0,y:n==="diff"?ee==="removed"?-4:6:4},animate:{opacity:1,y:0},transition:{delay:(ye+E+Fe*He)/1e3,duration:z.fadeMs/1e3,ease:[.22,1,.36,1]},style:Pe.style},fa)}))))});Xc.displayName="Code";function Bg({line:e,getTokenProps:t,delay:o,stagger:a}){let r=0;return y.createElement(y.Fragment,null,e.map((n,i)=>{let c=/^\s*$/.test(n.content),s=t({token:n});if(c)return y.createElement("span",{key:i,...s});let l=r++;return y.createElement(motion.span,{key:i,...s,initial:{opacity:0},animate:{opacity:1},transition:{delay:(o+l*a)/1e3,duration:.12}})}))}var Og={default:{row:"gap-3",content:"space-y-1",author:"text-sm font-semibold",meta:"text-xs",body:"text-sm leading-relaxed",thread:"text-xs"},compact:{row:"gap-2",content:"space-y-0.5",author:"text-xs font-semibold",meta:"text-[10px]",body:"text-xs leading-relaxed",thread:"text-[11px]"}},_g=y.forwardRef(function({author:t,timestamp:o,avatar:a,badge:r,edited:n,pinned:i,actions:c,reactions:s,threadCount:l,onThreadClick:p,align:m="start",density:u="default",className:g,children:h,...f},b){let v=m==="end",k=n===true?"(edited)":n||void 0,x=Og[u];return y.createElement("div",{ref:b,"data-gds-part":"message","data-gds-align":m,"data-gds-density":u,"data-gds-pinned":i?"true":void 0,className:d("flex items-start",x.row,v&&"flex-row-reverse",g),...f},a&&y.createElement("div",{"data-gds-part":"message-avatar",className:"flex-shrink-0"},a),y.createElement("div",{"data-gds-part":"message-content",className:d("flex-1 min-w-0",x.content,v&&"text-right")},i&&y.createElement("div",{"data-gds-part":"message-pinned",className:d("flex items-center gap-1 text-[10px] uppercase tracking-wider text-muted-foreground",v&&"flex-row-reverse")},y.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 16 16",className:"h-3 w-3",fill:"currentColor"},y.createElement("path",{d:"M9.828.722a.5.5 0 0 1 .707 0l4.743 4.743a.5.5 0 0 1 0 .707l-2.121 2.121a.5.5 0 0 1-.354.146h-1.792l-3.586 3.586v2.293a.5.5 0 0 1-.854.354L4.146 12.39 1 15.535V14.12l3.146-3.146-1.293-1.293a.5.5 0 0 1 .354-.854h2.293l3.586-3.586V3.45a.5.5 0 0 1 .146-.354L9.828.722Z"})),"Pinned"),y.createElement("div",{"data-gds-part":"message-header",className:d("flex items-baseline gap-2 flex-wrap",v&&"flex-row-reverse")},y.createElement("span",{"data-gds-part":"message-author",className:x.author},t),r&&y.createElement("div",{"data-gds-part":"message-badge"},r),o&&y.createElement("span",{"data-gds-part":"message-timestamp",className:d(x.meta,"text-muted-foreground")},o),k&&y.createElement("span",{"data-gds-part":"message-edited",className:d(x.meta,"text-muted-foreground")},k),c&&y.createElement("div",{"data-gds-part":"message-actions",className:d(v?"mr-auto":"ml-auto")},c)),y.createElement("div",{"data-gds-part":"message-body",className:x.body},h),s&&y.createElement("div",{"data-gds-part":"message-reactions",className:d("flex flex-wrap gap-1 pt-1",v&&"justify-end")},s),typeof l=="number"&&l>0&&y.createElement("button",{type:"button","data-gds-part":"message-thread",onClick:p,className:d("inline-flex items-center gap-1 font-medium",x.thread,"text-primary hover:underline","focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded",v&&"flex-row-reverse")},y.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 16 16",className:"h-3 w-3",fill:"currentColor"},y.createElement("path",{d:"M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H6.414l-2.707 2.707A1 1 0 0 1 2 12V3Z"})),l," ",l===1?"reply":"replies")))});var pt=Jt.Root,ut=Jt.Trigger,Gg=Jt.Anchor,tt=y.forwardRef(({className:e,align:t="center",sideOffset:o=4,surface:a="solid",...r},n)=>y.createElement(Jt.Portal,null,y.createElement(Jt.Content,{ref:n,align:t,sideOffset:o,"data-surface":a,className:d("z-50 w-72 rounded-md border p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",Xt(a,"bg-popover"),Mt[a],e),...r})));tt.displayName=Jt.Content.displayName;var Wg="PPP",Ug="LLL dd, y";function $g({value:e,onChange:t,placeholder:o="Pick a date",disabled:a,className:r,contentClassName:n,align:i="start",side:c,format:s=Wg,captionLayout:l,icon:p,"aria-label":m}){return y.createElement(pt,null,y.createElement(ut,{asChild:true},y.createElement(Ce,{type:"button",variant:"outline",disabled:a,"aria-label":m??(e?void 0:o),"data-empty":!e,className:d("w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground",r)},p??y.createElement(CalendarIcon,{className:"mr-2 h-4 w-4","aria-hidden":true}),e?format(e,s):y.createElement("span",null,o))),y.createElement(tt,{className:d("w-auto p-0",n),align:i,side:c},y.createElement(Vr,{mode:"single",selected:e,onSelect:t,captionLayout:l,initialFocus:true})))}function jg({value:e,onChange:t,placeholder:o="Pick a date range",disabled:a,className:r,contentClassName:n,align:i="start",side:c,format:s=Ug,captionLayout:l,icon:p,numberOfMonths:m=2,"aria-label":u}){let g=!!e?.from;return y.createElement(pt,null,y.createElement(ut,{asChild:true},y.createElement(Ce,{type:"button",variant:"outline",disabled:a,"aria-label":u??(g?void 0:o),"data-empty":!g,className:d("w-[300px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground",r)},p??y.createElement(CalendarIcon,{className:"mr-2 h-4 w-4","aria-hidden":true}),e?.from?e.to?y.createElement(y.Fragment,null,format(e.from,s)," \u2013"," ",format(e.to,s)):format(e.from,s):y.createElement("span",null,o))),y.createElement(tt,{className:d("w-auto p-0",n),align:i,side:c},y.createElement(Vr,{mode:"range",selected:e,onSelect:t,defaultMonth:e?.from,numberOfMonths:m,captionLayout:l,initialFocus:true})))}var qg=Ve.Root,Yg=Ve.Trigger,Qc=Ve.Portal,Zg=Ve.Close,ei=y.forwardRef(({className:e,...t},o)=>y.createElement(Ve.Overlay,{ref:o,className:d("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t}));ei.displayName=Ve.Overlay.displayName;var ed=y.forwardRef(({className:e,children:t,surface:o="solid",...a},r)=>y.createElement(Qc,null,y.createElement(ei,null),y.createElement(Ve.Content,{ref:r,"data-surface":o,className:d("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",Xt(o,"bg-background"),Mt[o],e),...a},t,y.createElement(Ve.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"},y.createElement(X,{className:"h-4 w-4"}),y.createElement("span",{className:"sr-only"},"Close")))));ed.displayName=Ve.Content.displayName;var td=({className:e,...t})=>y.createElement("div",{className:d("flex flex-col space-y-1.5 text-center sm:text-left",e),...t});td.displayName="DialogHeader";var od=({className:e,...t})=>y.createElement("div",{className:d("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});od.displayName="DialogFooter";var ad=y.forwardRef(({className:e,...t},o)=>y.createElement(Ve.Title,{ref:o,className:d("text-lg font-semibold leading-none tracking-tight",e),...t}));ad.displayName=Ve.Title.displayName;var rd=y.forwardRef(({className:e,...t},o)=>y.createElement(Ve.Description,{ref:o,className:d("text-sm text-muted-foreground",e),...t}));rd.displayName=Ve.Description.displayName;var ti=ae.Root,oi=ae.Trigger,oa=y.createContext("default"),nd=e=>e==="default"?"px-2 py-1.5 text-sm":"px-2 py-1 text-xs",ef=ae.Group,tf=ae.Portal,of=ae.Sub,af=ae.RadioGroup,id=y.forwardRef(({className:e,inset:t,children:o,...a},r)=>{let n=y.useContext(oa);return y.createElement(ae.SubTrigger,{ref:r,className:d("flex cursor-default select-none items-center gap-2 rounded-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",nd(n),n==="default"?"[&_svg]:size-4":"[&_svg]:size-3.5",t&&(n==="default"?"pl-8":"pl-7"),e),...a},o,y.createElement(ChevronRight,{className:"ml-auto"}))});id.displayName=ae.SubTrigger.displayName;var sd=y.forwardRef(({className:e,surface:t="solid",size:o="default",children:a,...r},n)=>y.createElement(ae.SubContent,{ref:n,"data-surface":t,className:d("z-50 min-w-[8rem] overflow-hidden rounded-md border text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",o==="default"?"p-1":"p-0.5",Xt(t,"bg-popover"),Mt[t],e),...r},y.createElement(oa.Provider,{value:o},a)));sd.displayName=ae.SubContent.displayName;var Xr=y.forwardRef(({className:e,sideOffset:t=4,surface:o="solid",size:a="default",children:r,...n},i)=>y.createElement(ae.Portal,null,y.createElement(ae.Content,{ref:i,sideOffset:t,"data-surface":o,className:d("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border text-popover-foreground shadow-md",a==="default"?"p-1":"p-0.5","data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",Xt(o,"bg-popover"),Mt[o],e),...n},y.createElement(oa.Provider,{value:a},r))));Xr.displayName=ae.Content.displayName;var ld=y.forwardRef(({className:e,inset:t,...o},a)=>{let r=y.useContext(oa);return y.createElement(ae.Item,{ref:a,className:d("relative flex cursor-default select-none items-center gap-2 rounded-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:shrink-0",nd(r),r==="default"?"[&>svg]:size-4":"[&>svg]:size-3.5",t&&(r==="default"?"pl-8":"pl-7"),e),...o})});ld.displayName=ae.Item.displayName;var Jr=y.forwardRef(({className:e,children:t,checked:o,...a},r)=>{let i=y.useContext(oa)!=="default";return y.createElement(ae.CheckboxItem,{ref:r,className:d("relative flex cursor-default select-none items-center rounded-sm pr-2 outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",i?"py-1 pl-7 text-xs":"py-1.5 pl-8 text-sm",e),checked:o,...a},y.createElement("span",{className:d("absolute flex items-center justify-center",i?"left-1.5 h-3 w-3":"left-2 h-3.5 w-3.5")},y.createElement(ae.ItemIndicator,null,y.createElement(Check,{className:i?"h-3 w-3":"h-4 w-4"}))),t)});Jr.displayName=ae.CheckboxItem.displayName;var cd=y.forwardRef(({className:e,children:t,...o},a)=>{let n=y.useContext(oa)!=="default";return y.createElement(ae.RadioItem,{ref:a,className:d("relative flex cursor-default select-none items-center rounded-sm pr-2 outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",n?"py-1 pl-7 text-xs":"py-1.5 pl-8 text-sm",e),...o},y.createElement("span",{className:d("absolute flex items-center justify-center",n?"left-1.5 h-3 w-3":"left-2 h-3.5 w-3.5")},y.createElement(ae.ItemIndicator,null,y.createElement(Circle,{className:"h-2 w-2 fill-current"}))),t)});cd.displayName=ae.RadioItem.displayName;var Qr=y.forwardRef(({className:e,inset:t,...o},a)=>{let r=y.useContext(oa);return y.createElement(ae.Label,{ref:a,className:d("font-semibold",r==="default"?"px-2 py-1.5 text-sm":"px-2 py-1 text-xs",t&&(r==="default"?"pl-8":"pl-7"),e),...o})});Qr.displayName=ae.Label.displayName;var en=y.forwardRef(({className:e,...t},o)=>y.createElement(ae.Separator,{ref:o,className:d("-mx-1 my-1 h-px bg-muted",e),...t}));en.displayName=ae.Separator.displayName;var dd=({className:e,...t})=>y.createElement("span",{className:d("ml-auto text-xs tracking-widest opacity-60",e),...t});dd.displayName="DropdownMenuShortcut";var pd=cva("flex w-full rounded-md bg-transparent transition-colors file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{default:"h-9 pl-3 pr-3 py-1 text-base file:text-sm md:text-sm",sm:"h-8 pl-2 pr-2 py-1 text-sm file:text-xs",xs:"h-7 pl-2 pr-2 py-0 text-xs file:text-xs shadow-none","2xs":"h-6 rounded-lg pl-1.5 pr-2 py-0 text-2xs file:text-2xs shadow-none"},variant:{default:"border border-input",ghost:"border border-transparent bg-transparent shadow-none"}},defaultVariants:{size:"default",variant:"default"}}),nf={default:{startPad:"pl-9",endPad:"pr-9",startInset:"pl-3",endInset:"pr-3"},sm:{startPad:"pl-7",endPad:"pr-6",startInset:"pl-2",endInset:"pr-2"},xs:{startPad:"pl-6",endPad:"pr-5",startInset:"pl-2",endInset:"pr-2"},"2xs":{startPad:"pl-6",endPad:"pr-5",startInset:"pl-1.5",endInset:"pr-2"}},Rt=y.forwardRef(({className:e,type:t,size:o="default",variant:a="default",startSlot:r,endSlot:n,...i},c)=>{if(!r&&!n)return y.createElement("input",{type:t,className:d(pd({size:o,variant:a}),e),ref:c,...i});let s=nf[o];return y.createElement("div",{className:"relative flex w-full items-center"},r?y.createElement("span",{className:d("pointer-events-none absolute inset-y-0 left-0 flex items-center text-muted-foreground [&_svg]:size-3.5",s.startInset)},r):null,y.createElement("input",{type:t,ref:c,className:d(pd({size:o,variant:a}),r&&s.startPad,n&&s.endPad,e),...i}),n?y.createElement("span",{className:d("pointer-events-none absolute inset-y-0 right-0 flex items-center text-muted-foreground [&_svg]:size-3.5",s.endInset)},n):null)});Rt.displayName="Input";var lf=cva("font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",{variants:{size:{default:"text-sm",sm:"text-sm",xs:"text-xs","2xs":"text-2xs"}},defaultVariants:{size:"default"}}),lr=y.forwardRef(({className:e,size:t,...o},a)=>y.createElement(ai.Root,{ref:a,className:d(lf({size:t}),e),...o}));lr.displayName=ai.Root.displayName;var ud=y.forwardRef(({className:e,value:t,...o},a)=>y.createElement(dr.Root,{ref:a,className:d("relative h-4 w-full overflow-hidden rounded-full bg-secondary",e),...o},y.createElement(dr.Indicator,{className:"h-full w-full flex-1 bg-primary transition-all",style:{transform:`translateX(-${100-(t||0)}%)`}})));ud.displayName=dr.Root.displayName;var aa=y.forwardRef(({className:e,...t},o)=>y.createElement(Command,{ref:o,className:d("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",e),...t}));aa.displayName=Command.displayName;var ra=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{className:"flex items-center border-b px-3","cmdk-input-wrapper":""},y.createElement(Search,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),y.createElement(Command.Input,{ref:o,className:d("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",e),...t})));ra.displayName=Command.Input.displayName;var na=y.forwardRef(({className:e,...t},o)=>y.createElement(Command.List,{ref:o,className:d("max-h-[300px] overflow-y-auto overflow-x-hidden",e),...t}));na.displayName=Command.List.displayName;var ia=y.forwardRef((e,t)=>y.createElement(Command.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));ia.displayName=Command.Empty.displayName;var lo=y.forwardRef(({className:e,...t},o)=>y.createElement(Command.Group,{ref:o,className:d("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",e),...t}));lo.displayName=Command.Group.displayName;var pr=y.forwardRef(({className:e,...t},o)=>y.createElement(Command.Separator,{ref:o,className:d("-mx-1 h-px bg-border",e),...t}));pr.displayName=Command.Separator.displayName;var Qt=y.forwardRef(({className:e,...t},o)=>y.createElement(Command.Item,{ref:o,className:d("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",e),...t}));Qt.displayName=Command.Item.displayName;var ur=y.forwardRef(({className:e,orientation:t="horizontal",decorative:o=true,...a},r)=>y.createElement(ri.Root,{ref:r,decorative:o,orientation:t,className:d("shrink-0 bg-border",t==="horizontal"?"h-[1px] w-full":"h-full w-[1px]",e),...a}));ur.displayName=ri.Root.displayName;var ff=3,md=y.forwardRef(function({options:t,value:o,defaultValue:a,onValueChange:r,placeholder:n="Select\u2026",searchPlaceholder:i="Search\u2026",emptyMessage:c="Nothing matches.",maxCount:s=ff,searchable:l=true,badgeDismissible:p=true,disabled:m=false,modalPopover:u=false,className:g,id:h,"aria-label":f,...b},v){let k=o!==void 0,[x,w]=y.useState(a??[]),S=k?o:x,[C,M]=y.useState(false),I=y.useMemo(()=>{let R=new Map;for(let F of t)R.set(F.value,F);return R},[t]),B=y.useCallback(R=>{k||w(R),r?.(R);},[k,r]),z=R=>{S.includes(R)?B(S.filter(F=>F!==R)):B([...S,R]);},E=(R,F)=>{R.preventDefault(),R.stopPropagation(),B(S.filter(re=>re!==F));},W=R=>{R?.preventDefault(),R?.stopPropagation(),B([]);},oe=()=>{let R=t.filter(F=>!F.disabled).map(F=>F.value);B(R);},he=t.length>0&&t.filter(R=>!R.disabled).every(R=>S.includes(R.value)),Y=S.slice(0,s),H=Math.max(0,S.length-s);return y.createElement(pt,{open:C,onOpenChange:M,modal:u},y.createElement(ut,{asChild:true},y.createElement("button",{ref:v,type:"button",id:h,role:"combobox","aria-expanded":C,"aria-haspopup":"listbox","aria-label":f,disabled:m,"data-gds-part":"multi-select",className:d("flex min-h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent pl-2 pr-2 text-sm shadow-sm","ring-offset-background placeholder:text-muted-foreground","focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring","disabled:cursor-not-allowed disabled:opacity-50","[&[data-state=open]]:ring-1 [&[data-state=open]]:ring-ring",g)},S.length===0?y.createElement("span",{className:"text-muted-foreground px-1"},n):y.createElement("div",{className:"flex flex-1 flex-wrap items-center gap-1 py-1","data-gds-part":"multi-select-badges"},Y.map(R=>{let F=I.get(R);if(!F)return null;let re=F.icon;return y.createElement(Ao,{key:R,variant:"secondary",className:"gap-1 pr-1","data-gds-part":"multi-select-badge"},re?y.createElement(re,{className:"h-3 w-3"}):null,y.createElement("span",{className:"truncate max-w-[12rem]"},F.label),p&&!m&&y.createElement("span",{role:"button","aria-label":`Remove ${F.label}`,tabIndex:0,onClick:Z=>E(Z,R),onKeyDown:Z=>{(Z.key==="Enter"||Z.key===" ")&&E(Z,R);},className:"ml-0.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm hover:bg-muted-foreground/20"},y.createElement(X,{className:"h-3 w-3","aria-hidden":true})))}),H>0&&y.createElement(Ao,{variant:"outline",className:"text-muted-foreground","data-gds-part":"multi-select-overflow",title:S.slice(s).map(R=>I.get(R)?.label??R).join(", ")},"+",H," more")),y.createElement("div",{className:"flex shrink-0 items-center gap-1"},S.length>0&&!m&&y.createElement("span",{role:"button","aria-label":"Clear all",tabIndex:0,onClick:R=>W(R),onKeyDown:R=>{(R.key==="Enter"||R.key===" ")&&W(R);},className:"inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-muted"},y.createElement(XCircle,{className:"h-3.5 w-3.5","aria-hidden":true})),y.createElement(ChevronDown,{className:"h-4 w-4 shrink-0 text-muted-foreground","aria-hidden":true})))),y.createElement(tt,{align:"start",className:"w-[var(--radix-popover-trigger-width)] p-0","data-gds-part":"multi-select-content"},y.createElement(aa,null,l&&y.createElement(ra,{placeholder:i}),y.createElement(na,null,y.createElement(ia,null,c),y.createElement(lo,null,t.map(R=>{let F=R.icon,re=S.includes(R.value);return y.createElement(Qt,{key:R.value,value:R.label,onSelect:()=>z(R.value),disabled:R.disabled,"data-gds-part":"multi-select-item","data-selected":re||void 0},y.createElement("div",{className:d("mr-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary",re?"bg-primary text-primary-foreground":"opacity-50 [&_svg]:invisible"),"aria-hidden":true},y.createElement(Check,{className:"h-3 w-3"})),F?y.createElement(F,{className:"mr-2 h-4 w-4 text-muted-foreground"}):null,y.createElement("span",{className:"truncate"},R.label))})),y.createElement(pr,null),y.createElement(lo,null,y.createElement("div",{className:"flex items-center justify-between gap-1 p-1"},y.createElement(Qt,{onSelect:oe,className:"flex-1 justify-center text-xs",disabled:he},"Select all"),y.createElement(ur,{orientation:"vertical",className:"h-5"}),y.createElement(Qt,{onSelect:()=>W(),className:"flex-1 justify-center text-xs",disabled:S.length===0},"Clear"),y.createElement(ur,{orientation:"vertical",className:"h-5"}),y.createElement(Qt,{onSelect:()=>M(false),className:"flex-1 justify-center text-xs"},"Close")))))))});md.displayName="MultiSelect";var gd=y.forwardRef(function({options:t,value:o,defaultValue:a=null,onValueChange:r,placeholder:n="Select\u2026",searchPlaceholder:i="Search\u2026",emptyMessage:c="Nothing matches.",searchable:s=true,clearable:l=false,triggerVariant:p="default",renderValue:m,hideChevron:u=false,disabled:g=false,modalPopover:h=false,align:f="start",className:b,id:v,"aria-label":k,...x},w){let S=o!==void 0,[C,M]=y.useState(a),I=S?o:C,[B,z]=y.useState(false),E=y.useMemo(()=>t.find(H=>H.value===I)??null,[t,I]),W=y.useCallback(H=>{S||M(H),r?.(H);},[S,r]),oe=H=>{W(l&&H===I?null:H),z(false);},he=p==="inline",Y=E?.icon;return y.createElement(pt,{open:B,onOpenChange:z,modal:h},y.createElement(ut,{asChild:true},y.createElement("button",{ref:w,type:"button",id:v,role:"combobox","aria-expanded":B,"aria-haspopup":"listbox","aria-label":k,disabled:g,"data-gds-part":"combobox","data-variant":p,className:d("ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",he?"inline-flex max-w-full items-center gap-1 rounded-md px-1 py-0.5 text-sm hover:bg-muted data-[state=open]:bg-muted":"flex min-h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-ring",b),...x},y.createElement("span",{className:d("flex min-w-0 items-center gap-1.5",!E&&"text-muted-foreground"),"data-gds-part":"combobox-value"},E?m?m(E):y.createElement(y.Fragment,null,Y?y.createElement(Y,{className:"h-4 w-4 shrink-0 text-muted-foreground"}):null,y.createElement("span",{className:"truncate"},E.label)):n),!u&&y.createElement(ChevronsUpDown,{className:d("h-4 w-4 shrink-0 text-muted-foreground",he&&"opacity-60"),"aria-hidden":true}))),y.createElement(tt,{align:f,className:"w-[var(--radix-popover-trigger-width)] min-w-[12rem] p-0","data-gds-part":"combobox-content"},y.createElement(aa,{filter:(H,R,F)=>`${H} ${(F??[]).join(" ")}`.toLowerCase().includes(R.toLowerCase())?1:0},s&&y.createElement(ra,{placeholder:i}),y.createElement(na,null,y.createElement(ia,null,c),y.createElement(lo,null,t.map(H=>{let R=H.icon,F=H.value===I;return y.createElement(Qt,{key:H.value,value:H.label,keywords:H.keywords,onSelect:()=>oe(H.value),disabled:H.disabled,"data-gds-part":"combobox-item","data-selected":F||void 0,className:"[&_svg]:text-muted-foreground data-[selected=true]:[&_svg]:text-accent-foreground"},R?y.createElement(R,{className:"mr-2 h-4 w-4"}):null,y.createElement("span",{className:"truncate"},H.label),y.createElement(Check,{className:d("ml-auto h-4 w-4",F?"opacity-100":"opacity-0"),"aria-hidden":true}))})),l&&I!==null&&y.createElement(y.Fragment,null,y.createElement(pr,null),y.createElement(lo,null,y.createElement(Qt,{onSelect:()=>{W(null),z(false);},"data-gds-part":"combobox-clear",className:"[&_svg]:text-muted-foreground data-[selected=true]:[&_svg]:text-accent-foreground"},y.createElement(X,{className:"mr-2 h-4 w-4"}),y.createElement("span",null,"Clear"))))))))});gd.displayName="Combobox";var fd=cva("gds-row flex flex-row",{variants:{gap:{none:"gap-0",xs:"gap-1",sm:"gap-2",md:"gap-4",lg:"gap-6",xl:"gap-8","2xl":"gap-12"},align:{start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},justify:{start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between",around:"justify-around",evenly:"justify-evenly"},wrap:{true:"flex-wrap",false:"flex-nowrap"}},defaultVariants:{gap:"md",align:"center",justify:"start",wrap:false}}),zo=y.forwardRef(({className:e,gap:t,align:o,justify:a,wrap:r,asChild:n=false,...i},c)=>y.createElement(n?Slot:"div",{ref:c,"data-gds-part":"row",className:d(fd({gap:t,align:o,justify:a,wrap:r,className:e})),...i}));zo.displayName="Row";var hd=cva("gds-stack flex flex-col",{variants:{gap:{none:"gap-0",xs:"gap-1",sm:"gap-2",md:"gap-4",lg:"gap-6",xl:"gap-8","2xl":"gap-12"},align:{start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch"},justify:{start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between",around:"justify-around",evenly:"justify-evenly"}},defaultVariants:{gap:"md",align:"stretch",justify:"start"}}),La=y.forwardRef(({className:e,gap:t,align:o,justify:a,asChild:r=false,...n},i)=>y.createElement(r?Slot:"div",{ref:i,"data-gds-part":"stack",className:d(hd({gap:t,align:o,justify:a,className:e})),...n}));La.displayName="Stack";var nn=y.forwardRef(({className:e,...t},o)=>y.createElement("div",{className:"relative w-full overflow-auto"},y.createElement("table",{ref:o,className:d("w-full caption-bottom text-sm",e),...t})));nn.displayName="Table";var sn=y.forwardRef(({className:e,...t},o)=>y.createElement("thead",{ref:o,className:d("[&_tr]:border-b",e),...t}));sn.displayName="TableHeader";var ln=y.forwardRef(({className:e,...t},o)=>y.createElement("tbody",{ref:o,className:d("[&_tr:last-child]:border-0",e),...t}));ln.displayName="TableBody";var bd=y.forwardRef(({className:e,...t},o)=>y.createElement("tfoot",{ref:o,className:d("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",e),...t}));bd.displayName="TableFooter";var Da=y.forwardRef(({className:e,...t},o)=>y.createElement("tr",{ref:o,className:d("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",e),...t}));Da.displayName="TableRow";var cn=y.forwardRef(({className:e,...t},o)=>y.createElement("th",{ref:o,className:d("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",e),...t}));cn.displayName="TableHead";var mr=y.forwardRef(({className:e,...t},o)=>y.createElement("td",{ref:o,className:d("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",e),...t}));mr.displayName="TableCell";var vd=y.forwardRef(({className:e,...t},o)=>y.createElement("caption",{ref:o,className:d("mt-4 text-sm text-muted-foreground",e),...t}));vd.displayName="TableCaption";var pn=cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-transparent",outline:"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",segmented:"rounded-md bg-transparent text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm"},size:{default:"h-9 px-2 min-w-9",sm:"h-8 px-1.5 min-w-8",xs:"h-7 px-1 min-w-7 text-xs","2xs":"h-6 px-1 min-w-6 text-2xs [&_svg]:size-3",lg:"h-10 px-2.5 min-w-10"}},defaultVariants:{variant:"default",size:"default"}}),yd=y.forwardRef(({className:e,variant:t,size:o,...a},r)=>y.createElement(ni.Root,{ref:r,className:d(pn({variant:t,size:o,className:e})),...a}));yd.displayName=ni.Root.displayName;var ii=eo.Provider,sa=eo.Root,la=eo.Trigger,Vo=y.forwardRef(({className:e,sideOffset:t=4,...o},a)=>y.createElement(eo.Portal,null,y.createElement(eo.Content,{ref:a,sideOffset:t,className:d("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",e),...o})));Vo.displayName=eo.Content.displayName;var xd=y.createContext({size:"default",variant:"default"}),co=y.forwardRef(({className:e,variant:t,size:o,children:a,...r},n)=>y.createElement(Aa.Root,{ref:n,className:d("flex items-center justify-center gap-1",t==="segmented"&&"inline-flex gap-0 rounded-lg bg-muted p-0.5",e),...r},y.createElement(xd.Provider,{value:{variant:t,size:o}},a)));co.displayName=Aa.Root.displayName;var po=y.forwardRef(({className:e,children:t,variant:o,size:a,tooltip:r,tooltipSide:n="top",tooltipDelay:i,"aria-label":c,...s},l)=>{let p=y.useContext(xd),m=c??(typeof r=="string"?r:void 0),u=y.createElement(Aa.Item,{ref:l,className:d(pn({variant:p.variant||o,size:p.size||a}),e),"aria-label":m,...s},t);return r==null?u:y.createElement(sa,{delayDuration:i},y.createElement(la,{asChild:true},y.createElement("span",{className:"inline-flex"},u)),y.createElement(Vo,{side:n},r))});po.displayName=Aa.Item.displayName;function un(e,t,o){let[a,r]=y.useState(t),n=e!==void 0?e:a,i=y.useCallback(c=>{let s=typeof c=="function"?c(n):c;e===void 0&&r(s),o?.(s);},[e,o,n]);return [n,i]}function If(e={}){let{defaultView:t="table",views:o=["table","cards","grid"],defaultActiveId:a=null,defaultSorting:r=[],defaultColumnVisibility:n={}}=e,[i,c]=y.useState(t),[s,l]=y.useState(a),[p,m]=y.useState(r),[u,g]=y.useState(n);return {view:i,setView:c,views:o,activeId:s,setActiveId:l,sorting:p,setSorting:m,columnVisibility:u,setColumnVisibility:g}}var Hf=e=>{let t=new Date(e);return Number.isNaN(t.getTime())?String(e):t.toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"})};function mn(e,t){if(e.cell)return e.cell(t);let o=t[e.key];switch(e.type){case "badge":{let a=e.options?.find(r=>r.value===o);return y.createElement(Ao,{variant:a?.variant??"secondary"},a?.label??o)}case "tags":return Array.isArray(o)?y.createElement(zo,{gap:"xs",wrap:true},o.map(a=>y.createElement(Ao,{key:String(a),variant:"secondary"},a))):null;case "number":return y.createElement("span",{className:"tabular-nums"},o);case "currency":return y.createElement("span",{className:"tabular-nums"},"$"+Number(o).toLocaleString("en-US"));case "percent":return y.createElement("span",{className:"tabular-nums"},Math.round(Number(o)*100)+"%");case "date":return y.createElement("span",{className:"tabular-nums text-muted-foreground"},Hf(o));case "boolean":return y.createElement(Ao,{variant:o?"success-soft":"outline"},o?"Yes":"No");case "url":return y.createElement("a",{href:String(o),className:"text-primary underline-offset-2 hover:underline"},String(o).replace(/^https?:\/\//,""));default:return y.createElement("span",null,o)}}var Ff={table:Rows3,cards:LayoutGrid,grid:Grid3x3},zf={table:"Table view",cards:"Card view",grid:"Grid view"};function si({value:e,onChange:t,views:o=["table","cards","grid"],className:a}){return o.length<2?null:y.createElement(co,{type:"single",value:e,onValueChange:r=>r&&t(r),className:a,"data-gds-part":"data-view-toggle"},o.map(r=>{let n=Ff[r];return y.createElement(po,{key:r,value:r,"aria-label":zf[r]},y.createElement(n,{className:"h-4 w-4"}))}))}function li({columns:e,visibility:t,onVisibilityChange:o,label:a="Display",className:r}){let n=e.filter(s=>s.hideable!==false),i=s=>t[s]!==false,c=s=>o({...t,[s]:!i(s)});return y.createElement(ti,null,y.createElement(oi,{asChild:true},y.createElement(Ce,{variant:"outline",size:"sm",className:r,"data-gds-part":"data-view-columns"},y.createElement(SlidersHorizontal,{className:"mr-1.5 h-3.5 w-3.5"}),a)),y.createElement(Xr,{align:"end",className:"w-48"},y.createElement(Qr,null,"Show fields"),y.createElement(en,null),n.map(s=>y.createElement(Jr,{key:s.key,checked:i(s.key),onCheckedChange:()=>c(s.key),onSelect:l=>l.preventDefault()},typeof s.header=="string"?s.header:s.key))))}function gn(e){let{data:t,columns:o,getRowId:a=Z=>String(Z.id),view:r,defaultView:n="table",onViewChange:i,views:c=["table","cards","grid"],activeId:s,defaultActiveId:l=null,onActiveChange:p,sorting:m,defaultSorting:u=[],onSortingChange:g,columnVisibility:h,defaultColumnVisibility:f,onColumnVisibilityChange:b,stickyHeader:v=false,toolbar:k=false,renderCard:x,emptyMessage:w="Nothing to show.",className:S}=e,[C,M]=un(r,n,i),[I,B]=un(s,l,p),[z,E]=un(m,u,g),W=y.useMemo(()=>{let Z={...f??{}};for(let G of o)G.defaultHidden&&(Z[G.key]??=false);return Z},[]),[oe,he]=un(h,W,b),Y=y.useMemo(()=>o.map(Z=>({id:Z.key,accessorKey:Z.key,header:()=>Z.header,enableSorting:!!Z.sortable,enableHiding:Z.hideable!==false,meta:Z})),[o]),H=useReactTable({data:t,columns:Y,getRowId:a,state:{sorting:z,columnVisibility:oe},onSortingChange:E,onColumnVisibilityChange:he,getCoreRowModel:getCoreRowModel(),getSortedRowModel:getSortedRowModel()}),R=y.useMemo(()=>{let Z={},G=0;for(let Q of o)Q.pinned==="left"&&(Z[Q.key]=G,G+=Q.width??0);return Z},[o]),re=H.getRowModel().rows.length===0;return y.createElement(La,{gap:"md",className:S,"data-gds-part":"data-view","data-view":C},k&&y.createElement(zo,{justify:"end",align:"center",gap:"sm"},y.createElement(li,{columns:o,visibility:oe,onVisibilityChange:Z=>he(Z)}),y.createElement(si,{value:C,onChange:M,views:c})),C==="table"?y.createElement(Vf,{table:H,activeId:I,onActivate:B,pinnedOffset:R,stickyHeader:v,emptyMessage:w,isEmpty:re}):y.createElement(Bf,{table:H,mode:C,activeId:I,onActivate:B,renderCard:x,emptyMessage:w,isEmpty:re}))}gn.displayName="DataView";gn.Toggle=si;gn.Columns=li;function Vf({table:e,activeId:t,onActivate:o,pinnedOffset:a,stickyHeader:r,emptyMessage:n,isEmpty:i}){let c=e.getVisibleLeafColumns(),s=(l,p)=>{if(l in a)return {position:"sticky",left:a[l],zIndex:p?30:10,background:"var(--gds-data-view-pinned-bg, oklch(var(--background)))"}};return y.createElement("div",{className:"rounded-lg border border-border overflow-auto","data-gds-part":"data-view-table",style:r?{maxHeight:"var(--gds-data-view-table-max-h, 28rem)"}:void 0},y.createElement(nn,null,y.createElement(sn,null,e.getHeaderGroups().map(l=>y.createElement(Da,{key:l.id},l.headers.map(p=>{let m=p.column.columnDef.meta,u=p.column.getCanSort(),g=p.column.getIsSorted(),h=g==="asc"?ArrowUp:g==="desc"?ArrowDown:ArrowUpDown,f=s(p.column.id,true);return y.createElement(cn,{key:p.id,style:{...m?.width?{width:m.width,minWidth:m.width}:{},...r?{position:"sticky",top:0,zIndex:f?30:20,background:"var(--gds-data-view-header-bg, oklch(var(--background)))"}:{},...f},className:d(m?.align==="end"&&"text-right",p.column.id in a&&"border-r border-border")},u?y.createElement("button",{type:"button",className:"inline-flex items-center gap-1 text-left font-medium hover:text-foreground",onClick:p.column.getToggleSortingHandler()},typeof m?.header<"u"?m.header:null,y.createElement(h,{className:g?"h-3 w-3 text-foreground":"h-3 w-3 text-muted-foreground"})):m?.header??null)})))),y.createElement(ln,null,i?y.createElement(Da,null,y.createElement(mr,{colSpan:c.length,className:"py-12 text-center text-sm text-muted-foreground"},n)):e.getRowModel().rows.map(l=>{let p=l.id===t;return y.createElement(Da,{key:l.id,"data-state":p?"selected":void 0,className:p?"cursor-pointer bg-muted":"cursor-pointer",onClick:()=>o(l.id)},l.getVisibleCells().map(m=>{let u=m.column.columnDef.meta,g=s(m.column.id,false);return y.createElement(mr,{key:m.id,style:{...u?.width?{width:u.width,minWidth:u.width}:{},...g?{...g,background:p?"var(--muted, oklch(var(--background)))":g.background}:{}},className:d(u?.align==="end"&&"text-right",m.column.id in a&&"border-r border-border")},mn(u,l.original))}))}))))}function Bf({table:e,mode:t,activeId:o,onActivate:a,renderCard:r,emptyMessage:n,isEmpty:i}){let c=e.getVisibleLeafColumns().map(g=>g.columnDef.meta),s=c.find(g=>g?.role==="title")??c[0],l=c.filter(g=>g&&g!==s&&(g.type==="badge"||g.type==="tags")),p=c.filter(g=>g&&g!==s&&g.type!=="badge"&&g.type!=="tags"),m=t==="grid",u=m?"var(--gds-data-view-grid-min, 11rem)":"var(--gds-data-view-card-min, 18rem)";return i?y.createElement("div",{className:"rounded-lg border border-border py-12 text-center text-sm text-muted-foreground"},n):y.createElement("div",{"data-gds-part":m?"data-view-grid":"data-view-cards",style:{display:"grid",gap:"var(--gds-data-view-gap, 0.75rem)",gridTemplateColumns:`repeat(auto-fill, minmax(${u}, 1fr))`}},e.getRowModel().rows.map(g=>{let h=g.id===o;return r?y.createElement("div",{key:g.id,onClick:()=>a(g.id)},r(g.original,{active:h})):y.createElement(Or,{key:g.id,onClick:()=>a(g.id),className:h?"cursor-pointer ring-2 ring-primary":"cursor-pointer hover:bg-muted/40"},y.createElement(La,{gap:"sm",className:m?"p-3":"p-4"},y.createElement(zo,{justify:"between",align:"start",gap:"sm"},s?y.createElement("span",{className:"min-w-0 truncate font-medium"},mn(s,g.original)):null),l.length>0&&y.createElement(zo,{gap:"xs",wrap:true},l.map(f=>y.createElement(y.Fragment,{key:f.key},mn(f,g.original)))),!m&&p.length>0&&y.createElement(La,{gap:"xs"},p.slice(0,3).map(f=>y.createElement(zo,{key:f.key,justify:"between",gap:"sm",align:"center"},y.createElement("span",{className:"text-xs text-muted-foreground"},typeof f.header=="string"?f.header:f.key),y.createElement("span",{className:"text-sm"},mn(f,g.original)))))))}))}var wd=y.forwardRef(({className:e,...t},o)=>y.createElement(Oo.Root,{className:d("grid gap-2",e),...t,ref:o}));wd.displayName=Oo.Root.displayName;var kd=y.forwardRef(({className:e,...t},o)=>y.createElement(Oo.Item,{ref:o,className:d("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",e),...t},y.createElement(Oo.Indicator,{className:"flex items-center justify-center"},y.createElement(Circle,{className:"h-2.5 w-2.5 fill-current text-current"}))));kd.displayName=Oo.Item.displayName;var Gf=({className:e,...t})=>y.createElement(Ia.PanelGroup,{"data-gds-part":"resizable-panel-group",className:d("flex h-full w-full data-[panel-group-direction=vertical]:flex-col",e),...t}),Wf=Ia.Panel,Uf=({withHandle:e,className:t,...o})=>y.createElement(Ia.PanelResizeHandle,{"data-gds-part":"resizable-handle",className:d("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",t),...o},e&&y.createElement("div",{className:"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"},y.createElement(GripVertical,{className:"h-2.5 w-2.5"})));var Sd=cva("gds-grid grid",{variants:{cols:{1:"grid-cols-1",2:"grid-cols-1 md:grid-cols-2",3:"grid-cols-1 sm:grid-cols-2 md:grid-cols-3",4:"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",5:"grid-cols-1 sm:grid-cols-2 lg:grid-cols-5",6:"grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",12:"grid-cols-4 md:grid-cols-6 lg:grid-cols-12"},gap:{none:"gap-0",xs:"gap-1",sm:"gap-2",md:"gap-4",lg:"gap-6",xl:"gap-8","2xl":"gap-12"},align:{start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch"}},defaultVariants:{cols:"3",gap:"md",align:"stretch"}}),Rd=y.forwardRef(({className:e,cols:t,gap:o,align:a,asChild:r=false,...n},i)=>y.createElement(r?Slot:"div",{ref:i,"data-gds-part":"grid",className:d(Sd({cols:t,gap:o,align:a,className:e})),...n}));Rd.displayName="Grid";var Cd=cva("gds-flex flex",{variants:{direction:{row:"flex-row",col:"flex-col","row-reverse":"flex-row-reverse","col-reverse":"flex-col-reverse"},gap:{none:"gap-0",xs:"gap-1",sm:"gap-2",md:"gap-4",lg:"gap-6",xl:"gap-8","2xl":"gap-12"},align:{start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},justify:{start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between",around:"justify-around",evenly:"justify-evenly"},wrap:{nowrap:"flex-nowrap",wrap:"flex-wrap","wrap-reverse":"flex-wrap-reverse"}},defaultVariants:{direction:"row",gap:"none",align:"stretch",justify:"start",wrap:"nowrap"}}),Td=y.forwardRef(({className:e,direction:t,gap:o,align:a,justify:r,wrap:n,asChild:i=false,...c},s)=>y.createElement(i?Slot:"div",{ref:s,"data-gds-part":"flex",className:d(Cd({direction:t,gap:o,align:a,justify:r,wrap:n,className:e})),...c}));Td.displayName="Flex";var Pd=y.forwardRef(({className:e,children:t,...o},a)=>y.createElement(_t.Root,{ref:a,className:d("relative overflow-hidden",e),...o},y.createElement(_t.Viewport,{className:"h-full w-full rounded-[inherit]"},t),y.createElement(ci,null),y.createElement(_t.Corner,null)));Pd.displayName=_t.Root.displayName;var ci=y.forwardRef(({className:e,orientation:t="vertical",...o},a)=>y.createElement(_t.ScrollAreaScrollbar,{ref:a,orientation:t,className:d("flex touch-none select-none transition-colors",t==="vertical"&&"h-full w-2.5 border-l border-l-transparent p-[1px]",t==="horizontal"&&"h-2.5 flex-col border-t border-t-transparent p-[1px]",e),...o},y.createElement(_t.ScrollAreaThumb,{className:"relative flex-1 rounded-full bg-border"})));ci.displayName=_t.ScrollAreaScrollbar.displayName;var hr=ce.Root,Xf=ce.Group,br=ce.Value,di=y.createContext("default"),Jf=cva("flex w-full items-center justify-between rounded-md border border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",{variants:{size:{default:"h-10 px-3 py-2 text-sm",sm:"h-8 px-2 py-1 text-sm",xs:"h-7 px-2 py-0 text-xs","2xs":"h-6 rounded-lg pl-1.5 pr-2 py-0 text-2xs"}},defaultVariants:{size:"default"}}),Ha=y.forwardRef(({className:e,children:t,size:o="default",startSlot:a,chevron:r=true,...n},i)=>y.createElement(ce.Trigger,{ref:i,className:d(Jf({size:o}),e),...n},a?y.createElement("div",{className:"flex min-w-0 flex-1 items-center gap-1.5 [&>span]:truncate"},y.createElement("span",{className:"pointer-events-none flex shrink-0 items-center text-muted-foreground/70 [&_svg]:size-4"},a),t):t,r?y.createElement(ce.Icon,{asChild:true},y.createElement(ChevronDown,{className:d("opacity-50",o==="sm"?"h-3.5 w-3.5":"h-4 w-4")})):null));Ha.displayName=ce.Trigger.displayName;var pi=y.forwardRef(({className:e,...t},o)=>y.createElement(ce.ScrollUpButton,{ref:o,className:d("flex cursor-default items-center justify-center py-1",e),...t},y.createElement(ChevronUp,{className:"h-4 w-4"})));pi.displayName=ce.ScrollUpButton.displayName;var ui=y.forwardRef(({className:e,...t},o)=>y.createElement(ce.ScrollDownButton,{ref:o,className:d("flex cursor-default items-center justify-center py-1",e),...t},y.createElement(ChevronDown,{className:"h-4 w-4"})));ui.displayName=ce.ScrollDownButton.displayName;var Fa=y.forwardRef(({className:e,children:t,position:o="popper",size:a="default",container:r,...n},i)=>y.createElement(ce.Portal,{container:r??void 0},y.createElement(ce.Content,{ref:i,className:d("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",o==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),position:o,...n},y.createElement(pi,null),y.createElement(ce.Viewport,{className:d(a==="default"?"p-1":"p-0.5",o==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")},y.createElement(di.Provider,{value:a},t)),y.createElement(ui,null))));Fa.displayName=ce.Content.displayName;var Qf={default:"py-1.5 pl-8 pr-2 text-sm font-semibold",sm:"py-1 pl-7 pr-2 text-xs font-semibold",xs:"py-1 pl-6 pr-2 text-2xs font-medium text-muted-foreground uppercase tracking-wide","2xs":"py-0.5 pl-6 pr-2 text-2xs font-medium text-muted-foreground uppercase tracking-wide"},Ed=y.forwardRef(({className:e,...t},o)=>{let a=y.useContext(di);return y.createElement(ce.Label,{ref:o,className:d(Qf[a],e),...t})});Ed.displayName=ce.Label.displayName;var eh=cva("relative flex w-full cursor-default select-none items-center rounded-sm outline-none focus:bg-accent focus:text-accent-foreground focus:[&_svg]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",{variants:{size:{default:"py-1.5 pl-8 pr-2 text-sm",sm:"py-1 pl-7 pr-2 text-sm",xs:"py-1 pl-6 pr-2 text-xs","2xs":"py-0.5 pl-6 pr-2 text-2xs"}},defaultVariants:{size:"default"}}),za=y.forwardRef(({className:e,children:t,hint:o,...a},r)=>{let n=y.useContext(di),i=n!=="default";return y.createElement(ce.Item,{ref:r,className:d("group",eh({size:n}),e),...a},y.createElement("span",{className:d("absolute flex items-center justify-center",i?"left-1.5 h-3 w-3":"left-2 h-3.5 w-3.5")},y.createElement(ce.ItemIndicator,null,y.createElement(Check,{className:i?"h-3 w-3":"h-4 w-4"}))),y.createElement(ce.ItemText,null,t),o!=null?y.createElement("span",{className:"ml-auto pl-3 tabular-nums text-muted-foreground/60 group-focus:text-accent-foreground/80 group-data-[highlighted]:text-accent-foreground/80"},o):null)});za.displayName=ce.Item.displayName;var Ld=y.forwardRef(({className:e,...t},o)=>y.createElement(ce.Separator,{ref:o,className:d("-mx-1 my-1 h-px bg-muted",e),...t}));Ld.displayName=ce.Separator.displayName;var Dd=cva("relative inline-block shrink-0 overflow-hidden shadow-elevation-1",{variants:{size:{"2xs":"size-4",xs:"size-5",sm:"size-6",md:"size-8",lg:"size-10",xl:"size-14"},shape:{square:"rounded-none",rounded:"rounded-[var(--radius)]",circle:"rounded-full"}},compoundVariants:[{size:"2xs",shape:"rounded",class:"rounded-[2px]"}],defaultVariants:{size:"md",shape:"rounded"}});function oh(e,t){return e||(t?`oklch(var(--${t.replace(/^--/,"")}))`:"transparent")}var ah=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i,Ad=y.createContext({}),To=y.forwardRef(function({color:t,token:o,type:a,gradient:r,image:n,size:i,shape:c,label:s,selected:l,onSelect:p,onColorChange:m,className:u,style:g,title:h,"aria-label":f,...b},v){let k=y.useContext(Ad),x=i??k.size,w=c??k.shape,S=a??(n?"image":r?"gradient":"solid"),C=S==="image"&&n?`url("${n}") center / cover no-repeat`:S==="gradient"&&r?r:oh(t,o),M=typeof m=="function",I=!M&&typeof p=="function",B=ah.test(t??"")?t:"#000000",z=(typeof s=="string"?s:void 0)??o??t??"colour swatch",E={backgroundImage:"repeating-conic-gradient(var(--gds-media-checker-color) 0% 25%, transparent 0% 50%)",backgroundSize:"var(--gds-media-checker-size) var(--gds-media-checker-size)"},oe=y.createElement(M?"label":I?"button":"div",{ref:v,"data-gds-part":"swatch","data-selected":l?"":void 0,title:h??z,"aria-label":f??(I?z:void 0),"aria-pressed":I?!!l:void 0,type:I?"button":void 0,onClick:I?p:void 0,className:d(Dd({size:x,shape:w}),l&&"ring-2 ring-selected ring-offset-2 ring-offset-background",(I||M)&&"cursor-pointer outline-none transition-transform hover:scale-[1.06] focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",!s&&u),style:{...E,...s?void 0:g},...s?{}:b},y.createElement("span",{className:"absolute inset-0",style:{background:C}}),y.createElement("span",{"aria-hidden":true,className:"pointer-events-none absolute inset-0 rounded-[inherit] ring-[0.5px] ring-inset ring-border"}),M&&y.createElement("input",{type:"color",value:B,onChange:he=>m(he.currentTarget.value),"aria-label":f??z,className:"absolute inset-0 cursor-pointer opacity-0"}));return s?y.createElement("div",{className:d("inline-flex flex-col items-start gap-1.5",u),style:g,...b},oe,y.createElement("span",{className:"text-xs leading-none text-muted-foreground"},s)):oe});To.displayName="Swatch";var rh={"2xs":"-space-x-1",xs:"-space-x-1.5",sm:"-space-x-2",md:"-space-x-2.5",lg:"-space-x-3",xl:"-space-x-4"},nh={xs:"gap-1",sm:"gap-2",md:"gap-3",lg:"gap-4"},Id=y.forwardRef(function({layout:t="row",size:o,shape:a,gap:r="sm",className:n,children:i,...c},s){let l=t==="stack";return y.createElement(Ad.Provider,{value:{size:o,shape:a}},y.createElement("div",{ref:s,"data-gds-part":"swatch-group","data-layout":t,className:d("inline-flex flex-wrap items-center",l?d(rh[o??"md"],"[&_[data-gds-part=swatch]]:ring-2 [&_[data-gds-part=swatch]]:ring-background"):nh[r],n),...c},i))});Id.displayName="SwatchGroup";var lh=Ve.Root,ch=Ve.Trigger,dh=Ve.Close,Hd=Ve.Portal,mi=y.forwardRef(({className:e,...t},o)=>y.createElement(Ve.Overlay,{className:d("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t,ref:o}));mi.displayName=Ve.Overlay.displayName;var ph=cva("fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",{variants:{side:{top:"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",bottom:"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"}},defaultVariants:{side:"right"}}),Fd=y.forwardRef(({side:e="right",surface:t="solid",className:o,overlayClassName:a,closeClassName:r,children:n,...i},c)=>y.createElement(Hd,null,y.createElement(mi,{className:a}),y.createElement(Ve.Content,{ref:c,"data-surface":t,className:d(ph({side:e}),Xt(t,"bg-background"),Mt[t],o),...i},n,y.createElement(Ve.Close,{className:d("absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",r)},y.createElement(X,{className:"h-4 w-4"}),y.createElement("span",{className:"sr-only"},"Close")))));Fd.displayName=Ve.Content.displayName;var zd=({className:e,...t})=>y.createElement("div",{className:d("flex flex-col space-y-2 text-center sm:text-left",e),...t});zd.displayName="SheetHeader";var Vd=({className:e,...t})=>y.createElement("div",{className:d("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});Vd.displayName="SheetFooter";var Bd=y.forwardRef(({className:e,...t},o)=>y.createElement(Ve.Title,{ref:o,className:d("text-lg font-semibold text-foreground",e),...t}));Bd.displayName=Ve.Title.displayName;var Od=y.forwardRef(({className:e,...t},o)=>y.createElement(Ve.Description,{ref:o,className:d("text-sm text-muted-foreground",e),...t}));Od.displayName=Ve.Description.displayName;function uh({className:e,...t}){return y.createElement("div",{className:d("animate-pulse rounded-md bg-muted",e),...t})}var mh={default:{track:"h-2 bg-secondary",range:"bg-primary",thumb:"h-5 w-5 border-2 border-primary focus-visible:ring-2 focus-visible:ring-offset-2"},sm:{track:"h-[3px] bg-border",range:"bg-foreground/40",thumb:"h-3 w-3 border border-border hover:border-foreground/40 focus-visible:ring-2"}},da=y.forwardRef(({className:e,size:t="default",...o},a)=>{let r=mh[t];return y.createElement(Po.Root,{ref:a,className:d("relative flex w-full cursor-pointer touch-none select-none items-center py-2 -my-1",e),...o},y.createElement(Po.Track,{className:d("relative w-full grow overflow-hidden rounded-full",r.track)},y.createElement(Po.Range,{className:d("absolute h-full rounded-full",r.range)})),y.createElement(Po.Thumb,{className:d("block rounded-full bg-background shadow-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",r.thumb)}))});da.displayName=Po.Root.displayName;var Sh={vertical:verticalListSortingStrategy,horizontal:horizontalListSortingStrategy,grid:rectSortingStrategy},gi=y.createContext(null),Yd=y.createContext(null),fi=y.forwardRef(function({disabled:t=false,className:o,children:a,...r},n){let i=y.useRef(new Map),c=y.useCallback(m=>(i.current.set(m.id,m),()=>{i.current.delete(m.id);}),[]),s=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:4}}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),l=m=>{let u=i.current,g=u.get(String(m));if(g)return g;for(let h of u.values())if(h.values.some(f=>f===m))return h;return null},p=y.useCallback(m=>{if(t)return;let{active:u,over:g}=m;if(!g)return;let h=l(u.id),f=l(g.id);if(!h||!f)return;if(h.id===f.id){if(u.id===g.id)return;let x=h.values.findIndex(S=>S===u.id),w=h.values.findIndex(S=>S===g.id);if(x===-1||w===-1)return;h.onReorder?.(arrayMove(h.values,x,w));return}let b=h.values.filter(x=>x!==u.id),v=g.id===f.id?f.values.length:Math.max(0,f.values.findIndex(x=>x===g.id)),k=[...f.values.slice(0,v),u.id,...f.values.slice(v)];h.onReorder?.(b),f.onReorder?.(k);},[t]);return y.createElement(Yd.Provider,{value:{registerContainer:c}},y.createElement(DndContext,{sensors:s,collisionDetection:closestCorners,onDragEnd:p},y.createElement("div",{ref:n,"data-gds-part":"sortable-group","data-disabled":t||void 0,className:d(o),...r},a)))});fi.displayName="Sortable.Group";var vr=y.forwardRef(function({values:t,onReorder:o,strategy:a="vertical",disabled:r=false,id:n,className:i,children:c,...s},l){let p=y.useContext(Yd),m=p!==null,u=y.useId(),g=n??u;y.useEffect(()=>{if(m)return p.registerContainer({id:g,values:t,onReorder:o})},[m,p,g,t,o]);let h=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:4}}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),f=y.useCallback(k=>{let{active:x,over:w}=k;if(!w||x.id===w.id)return;let S=t.findIndex(M=>M===x.id),C=t.findIndex(M=>M===w.id);S===-1||C===-1||o?.(arrayMove(t,S,C));},[t,o]),b=y.useMemo(()=>({disabled:r}),[r]),v=y.createElement(SortableContext,{items:t,strategy:Sh[a]},y.createElement(Rh,{id:g,enabled:m,forwardedRef:l,strategy:a,disabled:r,className:i,...s},c));return m?y.createElement(gi.Provider,{value:b},v):y.createElement(gi.Provider,{value:b},y.createElement(DndContext,{sensors:h,collisionDetection:closestCenter,onDragEnd:f},v))});vr.displayName="Sortable";function Rh({id:e,enabled:t,forwardedRef:o,strategy:a,disabled:r,className:n,children:i,...c}){let s=useDroppable({id:e,disabled:!t}),l=y.useCallback(p=>{t&&s.setNodeRef(p),typeof o=="function"?o(p):o&&(o.current=p);},[t,s,o]);return y.createElement("div",{ref:l,"data-gds-part":"sortable","data-strategy":a,"data-disabled":r||void 0,className:d(n),...c},i)}var Zd=y.createContext(null),hi=y.forwardRef(function({value:t,asChild:o=false,disabled:a,className:r,style:n,children:i,...c},s){let l=y.useContext(gi);if(!l)throw new Error("<Sortable.Item> must be rendered inside <Sortable>.");let p=l.disabled||a||false,{attributes:m,listeners:u,setNodeRef:g,setActivatorNodeRef:h,transform:f,transition:b,isDragging:v}=useSortable({id:t,disabled:p}),k=y.useRef(false),x=y.useCallback(M=>{g(M),typeof s=="function"?s(M):s&&(s.current=M);},[g,s]),w=y.useMemo(()=>({listeners:u,setActivatorNodeRef:h,hasHandle:k,disabled:p}),[u,h,p]),S={transform:CSS.Transform.toString(f),transition:b,zIndex:v?1:void 0,cursor:p?"default":k.current?void 0:"grab",...n},C=o?Slot:"div";return y.createElement(Zd.Provider,{value:w},y.createElement(C,{ref:x,"data-gds-part":"sortable-item","data-value":String(t),"data-dragging":v||void 0,className:d(r),style:S,...m,...k.current?{}:u,...c},i))});hi.displayName="Sortable.Item";var bi=y.forwardRef(function({asChild:t=false,className:o,children:a,...r},n){let i=y.useContext(Zd);if(!i)throw new Error("<Sortable.Handle> must be rendered inside <Sortable.Item>.");y.useLayoutEffect(()=>(i.hasHandle.current=true,()=>{i.hasHandle.current=false;}),[i.hasHandle]);let c=y.useCallback(l=>{i.setActivatorNodeRef(l),typeof n=="function"?n(l):n&&(n.current=l);},[i,n]),s={"data-gds-part":"sortable-handle","aria-label":"Drag to reorder",className:d("cursor-grab touch-none select-none",i.disabled&&"cursor-default opacity-50",o),...i.disabled?{}:i.listeners,...r};return t?y.createElement(Slot,{ref:c,...s},a):y.createElement("button",{type:"button",ref:c,...s},a)});bi.displayName="Sortable.Handle";vr.Item=hi;vr.Handle=bi;vr.Group=fi;var Ch=vr;var Th=cva("peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",{variants:{size:{default:"h-6 w-11",sm:"h-5 w-9",xs:"h-4 w-7","2xs":"h-3 w-5"}},defaultVariants:{size:"default"}}),Ph=cva("pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",{variants:{size:{default:"h-5 w-5 data-[state=checked]:translate-x-5",sm:"h-4 w-4 data-[state=checked]:translate-x-4",xs:"h-3 w-3 data-[state=checked]:translate-x-3","2xs":"h-2 w-2 data-[state=checked]:translate-x-2"}},defaultVariants:{size:"default"}}),vn=y.forwardRef(({className:e,size:t="default",...o},a)=>y.createElement(xr.Root,{className:d(Th({size:t}),e),...o,ref:a},y.createElement(xr.Thumb,{className:d(Ph({size:t}))})));vn.displayName=xr.Root.displayName;var Jd=y.createContext(y.createElement(ChevronRight,null)),Qd=y.forwardRef(({separator:e,children:t,...o},a)=>y.createElement(Jd.Provider,{value:e??y.createElement(ChevronRight,null)},y.createElement("nav",{ref:a,"aria-label":"breadcrumb",...o},t)));Qd.displayName="Breadcrumb";var ep=y.forwardRef(({className:e,...t},o)=>y.createElement("ol",{ref:o,className:d("flex flex-wrap items-center gap-1.5 break-words text-xs text-muted-foreground",e),...t}));ep.displayName="BreadcrumbList";var tp=y.forwardRef(({className:e,...t},o)=>y.createElement("li",{ref:o,className:d("inline-flex items-center gap-1.5",e),...t}));tp.displayName="BreadcrumbItem";var yn=d("inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-xs","transition-colors hover:text-foreground hover:bg-muted/60","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0"),op=y.forwardRef(({asChild:e,className:t,href:o,...a},r)=>e?y.createElement("span",{ref:r,className:d(yn,t),...a}):o?y.createElement("a",{ref:r,href:o,className:d(yn,t),...a}):y.createElement("button",{ref:r,type:"button",className:d(yn,t),...a}));op.displayName="BreadcrumbLink";var ap=y.forwardRef(({className:e,...t},o)=>y.createElement("span",{ref:o,role:"link","aria-disabled":"true","aria-current":"page",className:d("inline-flex items-center gap-1.5 px-0.5 text-xs font-medium text-foreground","[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",e),...t}));ap.displayName="BreadcrumbPage";var rp=({children:e,className:t,...o})=>{let a=y.useContext(Jd);return y.createElement("li",{role:"presentation","aria-hidden":"true",className:d("[&_svg]:size-3 [&_svg]:shrink-0 text-muted-foreground/60",t),...o},e??a)};rp.displayName="BreadcrumbSeparator";var np=({className:e,...t})=>y.createElement("span",{role:"presentation","aria-hidden":"true",className:d("flex h-5 w-5 items-center justify-center",e),...t},y.createElement(MoreHorizontal,{className:"h-3.5 w-3.5"}),y.createElement("span",{className:"sr-only"},"More"));np.displayName="BreadcrumbEllipsis";var ip=y.forwardRef(({label:e,items:t,onSelect:o,onSelectLabel:a,current:r,className:n},i)=>{let[c,s]=y.useState(false);return y.createElement(pt,{open:c,onOpenChange:s},y.createElement(ut,{asChild:true},y.createElement("button",{ref:i,type:"button",className:d(yn,r&&"font-medium text-foreground",n),onClick:()=>{a?a():s(l=>!l);}},y.createElement("span",null,e),y.createElement(ChevronDown,{className:d("h-3 w-3 text-muted-foreground transition-transform",c&&"rotate-180"),onClick:l=>{l.stopPropagation(),s(p=>!p);},role:"button","aria-label":`Show ${e} children`}))),y.createElement(tt,{align:"start",className:"w-64 p-1 max-h-80 overflow-y-auto"},t.length===0?y.createElement("p",{className:"px-2 py-1.5 text-xs text-muted-foreground"},"No items here yet."):y.createElement("ul",{className:"flex flex-col gap-0.5"},t.map(l=>y.createElement("li",{key:l.id},y.createElement("button",{type:"button",onClick:()=>{o(l.id),s(false);},className:d("w-full text-left rounded-md px-2 py-1.5","flex items-start gap-2","hover:bg-muted transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",l.active&&"bg-muted/60")},y.createElement("span",{className:"flex-1 min-w-0"},y.createElement("span",{className:"flex items-center gap-1.5"},y.createElement("span",{className:"text-xs font-medium text-foreground truncate"},l.label),l.active&&y.createElement(Check,{className:"h-3 w-3 text-primary shrink-0"})),l.summary&&y.createElement("span",{className:"block text-[10px] text-muted-foreground leading-snug truncate"},l.summary)),l.hasChildren&&y.createElement(ChevronRight,{className:"h-3 w-3 text-muted-foreground/70 shrink-0 mt-0.5"})))))))});ip.displayName="BreadcrumbMenuTrigger";var lp=y.createContext({size:"md",variant:"pill"}),Lh=to.Root,Dh=cva("inline-flex items-center text-muted-foreground",{variants:{variant:{pill:"justify-center rounded-lg bg-muted",underlined:"justify-start border-b border-border"},size:{sm:"",md:"",lg:""}},compoundVariants:[{variant:"pill",size:"sm",className:"h-7 p-0.5"},{variant:"pill",size:"md",className:"h-8 p-0.5"},{variant:"pill",size:"lg",className:"h-10 p-1"},{variant:"underlined",size:"sm",className:"gap-3"},{variant:"underlined",size:"md",className:"gap-4"},{variant:"underlined",size:"lg",className:"gap-6"}],defaultVariants:{variant:"pill",size:"md"}}),Ah=cva("inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",{variants:{variant:{pill:"rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground",underlined:"rounded-none bg-transparent border-b-2 border-transparent -mb-px hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-primary"},size:{sm:"text-2xs gap-1 [&_svg]:size-3",md:"text-xs gap-1.5 [&_svg]:size-3.5",lg:"text-sm gap-2 [&_svg]:size-4"}},compoundVariants:[{variant:"pill",size:"sm",className:"h-6 px-1.5"},{variant:"pill",size:"md",className:"h-7 px-2"},{variant:"pill",size:"lg",className:"h-8 px-2.5"},{variant:"underlined",size:"sm",className:"pb-1.5 pt-1 px-1"},{variant:"underlined",size:"md",className:"pb-2 pt-1.5 px-1.5"},{variant:"underlined",size:"lg",className:"pb-2.5 pt-2 px-2"}],defaultVariants:{variant:"pill",size:"md"}}),cp=y.forwardRef(({className:e,size:t="md",variant:o="pill",children:a,...r},n)=>y.createElement(lp.Provider,{value:{size:t??"md",variant:o??"pill"}},y.createElement(to.List,{ref:n,className:d(Dh({size:t,variant:o}),e),...r},a)));cp.displayName=to.List.displayName;var dp=y.forwardRef(({className:e,size:t,variant:o,tooltip:a,...r},n)=>{let i=y.useContext(lp),c=t??i.size,s=o??i.variant,l=r["aria-label"]??(typeof a=="string"?a:void 0),p=y.createElement(to.Trigger,{ref:n,className:d(Ah({size:c,variant:s}),e),"aria-label":l,...r});return a?y.createElement(sa,null,y.createElement(la,{asChild:true},p),y.createElement(Vo,null,a)):p});dp.displayName=to.Trigger.displayName;var pp=y.forwardRef(({className:e,...t},o)=>y.createElement(to.Content,{ref:o,className:d("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",e),...t}));pp.displayName=to.Content.displayName;var Ih={light:"",dark:".dark"},up=y.createContext(null);function mp(){let e=y.useContext(up);if(!e)throw new Error("useChart must be used within a <ChartContainer />");return e}var gp=y.forwardRef(({id:e,className:t,children:o,config:a,...r},n)=>{let i=y.useId(),c=`chart-${e||i.replace(/:/g,"")}`;return y.createElement(up.Provider,{value:{config:a}},y.createElement("div",{"data-chart":c,ref:n,className:d("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",t),...r},y.createElement(fp,{id:c,config:a}),y.createElement(Va.ResponsiveContainer,null,o)))});gp.displayName="Chart";var fp=({id:e,config:t})=>{let o=Object.entries(t).filter(([,a])=>a.theme||a.color);return o.length?y.createElement("style",{dangerouslySetInnerHTML:{__html:Object.entries(Ih).map(([a,r])=>`
|
|
117
|
+
${r} [data-chart=${e}] {
|
|
118
|
+
${o.map(([n,i])=>{let c=i.theme?.[a]||i.color;return c?` --color-${n}: ${c};`:null}).join(`
|
|
119
119
|
`)}
|
|
120
120
|
}
|
|
121
121
|
`).join(`
|
|
122
|
-
`)}}):null},Xx=un.Tooltip,dm=w.forwardRef(({active:e,payload:t,className:o,indicator:r="dot",hideLabel:a=false,hideIndicator:n=false,label:i,labelFormatter:c,labelClassName:s,formatter:l,color:d,nameKey:m,labelKey:u},f)=>{let{config:h}=sm(),g=w.useMemo(()=>{if(a||!t?.length)return null;let[v]=t,C=`${u||v?.dataKey||v?.name||"value"}`,S=Ns(h,v,C),x=!u&&typeof i=="string"?h[i]?.label||i:S?.label;return c?w.createElement("div",{className:p("font-medium",s)},c(x,t)):x?w.createElement("div",{className:p("font-medium",s)},x):null},[i,c,t,a,s,h,u]);if(!e||!t?.length)return null;let b=t.length===1&&r!=="dot";return w.createElement("div",{ref:f,className:p("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",o)},b?null:g,w.createElement("div",{className:"grid gap-1.5"},t.filter(v=>v.type!=="none").map((v,C)=>{let S=`${m||v.name||v.dataKey||"value"}`,x=Ns(h,v,S),y=d||v.payload.fill||v.color;return w.createElement("div",{key:v.dataKey,className:p("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",r==="dot"&&"items-center")},l&&v?.value!==void 0&&v.name?l(v.value,v.name,v,C,v.payload):w.createElement(w.Fragment,null,x?.icon?w.createElement(x.icon,null):!n&&w.createElement("div",{className:p("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",{"h-2.5 w-2.5":r==="dot","w-1":r==="line","w-0 border-[1.5px] border-dashed bg-transparent":r==="dashed","my-0.5":b&&r==="dashed"}),style:{"--color-bg":y,"--color-border":y}}),w.createElement("div",{className:p("flex flex-1 justify-between leading-none",b?"items-end":"items-center")},w.createElement("div",{className:"grid gap-1.5"},b?g:null,w.createElement("span",{className:"text-muted-foreground"},x?.label||v.name)),v.value&&w.createElement("span",{className:"font-mono font-medium tabular-nums text-foreground"},v.value.toLocaleString()))))})))});dm.displayName="ChartTooltip";var Jx=un.Legend,pm=w.forwardRef(({className:e,hideIcon:t=false,payload:o,verticalAlign:r="bottom",nameKey:a},n)=>{let{config:i}=sm();return o?.length?w.createElement("div",{ref:n,className:p("flex items-center justify-center gap-4",r==="top"?"pb-3":"pt-3",e)},o.filter(c=>c.type!=="none").map(c=>{let s=`${a||c.dataKey||"value"}`,l=Ns(i,c,s);return w.createElement("div",{key:c.value,className:p("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")},l?.icon&&!t?w.createElement(l.icon,null):w.createElement("div",{className:"h-2 w-2 shrink-0 rounded-[2px]",style:{backgroundColor:c.color}}),l?.label)})):null});pm.displayName="ChartLegend";function Ns(e,t,o){if(typeof t!="object"||t===null)return;let r="payload"in t&&typeof t.payload=="object"&&t.payload!==null?t.payload:void 0,a=o;return o in t&&typeof t[o]=="string"?a=t[o]:r&&o in r&&typeof r[o]=="string"&&(a=r[o]),a in e?e[a]:e[o]}var e0=cva("flex w-full rounded-md border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{default:"min-h-[80px] px-3 py-2 text-sm",sm:"min-h-[64px] px-2 py-1.5 text-sm",xs:"min-h-[52px] px-2 py-1 text-xs","2xs":"min-h-[44px] px-2 py-1 text-2xs"}},defaultVariants:{size:"default"}}),um=w.forwardRef(({className:e,size:t="default",...o},r)=>w.createElement("textarea",{className:p(e0({size:t}),e),ref:r,...o}));um.displayName="Textarea";var o0=cva("grid items-center w-full gap-3 [grid-template-columns:auto_1fr_auto]",{variants:{position:{top:"border-b border-border",bottom:"border-t border-border",inline:""},variant:{default:"bg-background",subtle:"bg-muted/30",transparent:"bg-transparent"},size:{sm:"min-h-10 px-3",md:"min-h-12 px-4",lg:"min-h-14 px-6"},sticky:{true:"",false:""}},compoundVariants:[{sticky:true,position:"top",className:"sticky top-0 z-20"},{sticky:true,position:"bottom",className:"sticky bottom-0 z-20"}],defaultVariants:{position:"top",variant:"default",size:"md",sticky:false}}),mm=w.forwardRef(({className:e,position:t,variant:o,size:r,sticky:a,leading:n,center:i,trailing:c,children:s,"aria-label":l,...d},m)=>{let u=s==null;return w.createElement("div",{ref:m,role:"toolbar","aria-label":l??"Toolbar","data-gds-part":"toolbar","data-position":t??"top",className:p(o0({position:t,variant:o,size:r,sticky:a}),e),...d},u?w.createElement(w.Fragment,null,w.createElement("div",{"data-gds-part":"toolbar-leading",className:"flex items-center min-w-0"},n),w.createElement("div",{"data-gds-part":"toolbar-center",className:"flex items-center min-w-0 justify-center"},i),w.createElement("div",{"data-gds-part":"toolbar-trailing",className:"flex items-center min-w-0 justify-end"},c)):s)});mm.displayName="Toolbar";var fm=w.forwardRef(({className:e,align:t="leading",...o},r)=>w.createElement("div",{ref:r,"data-gds-part":`toolbar-${t}`,className:p("flex items-center min-w-0",t==="center"&&"justify-center",t==="trailing"&&"justify-end",e),...o}));fm.displayName="ToolbarSlot";var hm=w.createContext(null),Es=w.createContext(0);function bm(){return w.useContext(Es)}function ra(e){let t=w.useContext(hm);if(!t)throw new Error(`<${e}> must be rendered inside a <Sidebar> root.`);return t}var rr=w.forwardRef(({collapsed:e,defaultCollapsed:t=false,onCollapsedChange:o,collapsible:r=true,variant:a="rail",className:n,style:i,children:c,...s},l)=>{let d=e!==void 0,[m,u]=w.useState(t),f=d?e:m,h=a==="panel",g=()=>{let b=!f;d||u(b),o?.(b);};return w.createElement(hs,{delayDuration:0},w.createElement(hm.Provider,{value:{collapsed:f}},w.createElement("aside",{ref:l,"data-gds-part":"sidebar","data-collapsed":f||void 0,"data-variant":a,className:p("relative flex h-full flex-col bg-card text-card-foreground",h?"w-full border border-border rounded-lg overflow-hidden":"border-r border-border transition-[width] duration-200 ease-out",n),style:h?i:{width:f?"var(--gds-sidebar-collapsed-width, 4rem)":"var(--gds-sidebar-width, 16rem)",...i},...s},c,r&&!h&&w.createElement("button",{type:"button",onClick:g,"aria-label":f?"Expand sidebar":"Collapse sidebar","data-gds-part":"sidebar-collapse-toggle",className:p("absolute -right-3 top-6 z-10 flex h-6 w-6 items-center justify-center","rounded-full border border-border bg-card text-muted-foreground shadow-sm","hover:text-foreground hover:bg-muted transition-colors")},f?w.createElement(ChevronRight,{className:"h-3 w-3"}):w.createElement(ChevronLeft,{className:"h-3 w-3"})))))});rr.displayName="Sidebar";var As=w.forwardRef(({className:e,...t},o)=>{let{collapsed:r}=ra("SidebarHeader");return w.createElement("div",{ref:o,"data-gds-part":"sidebar-header","data-collapsed":r||void 0,className:p("flex shrink-0 items-center border-b border-border",r?"justify-center px-2":"px-3","h-[var(--gds-sidebar-header-height,3.25rem)]",e),...t})});As.displayName="SidebarHeader";var Ds=w.forwardRef(({className:e,...t},o)=>w.createElement("nav",{ref:o,"data-gds-part":"sidebar-content",className:p("flex-1 overflow-y-auto overflow-x-hidden","py-[var(--gds-sidebar-content-py,0.5rem)]",e),...t}));Ds.displayName="SidebarContent";var Is=w.forwardRef(({className:e,...t},o)=>{let{collapsed:r}=ra("SidebarFooter");return w.createElement("div",{ref:o,"data-gds-part":"sidebar-footer","data-collapsed":r||void 0,className:p("shrink-0 border-t border-border",r?"px-2 py-2":"px-3 py-2",e),...t})});Is.displayName="SidebarFooter";var Hs=w.forwardRef(({title:e,icon:t,trailing:o,collapsible:r=true,defaultExpanded:a=true,titleTransform:n,className:i,children:c,...s},l)=>{let{collapsed:d}=ra("SidebarSection"),[m,u]=w.useState(a),f=!!e&&r;return d?w.createElement("div",{ref:l,"data-gds-part":"sidebar-section",className:p("px-[var(--gds-sidebar-section-px,0.5rem)] space-y-[var(--gds-sidebar-section-gap,0.125rem)]",i),...s},c):w.createElement("div",{ref:l,"data-gds-part":"sidebar-section",className:p("px-[var(--gds-sidebar-section-px,0.5rem)] pb-1",i),...s},e&&(f?w.createElement("div",{className:p("group/header flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-xs font-medium uppercase tracking-wide","text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors")},w.createElement("button",{type:"button",onClick:()=>u(h=>!h),"aria-expanded":m,className:"flex flex-1 items-center gap-2 text-left min-w-0"},t,w.createElement("span",{className:p("flex-1 text-left truncate",n==="uppercase"?"uppercase":"normal-case")},e),m?w.createElement(ChevronDown,{className:"h-3 w-3 shrink-0",strokeWidth:1.5}):w.createElement(ChevronRight,{className:"h-3 w-3 shrink-0",strokeWidth:1.5})),o&&w.createElement("span",{className:"flex items-center shrink-0",onClick:h=>h.stopPropagation(),onKeyDown:h=>h.stopPropagation()},o)):w.createElement("div",{className:p("flex items-center gap-2 px-2 py-1.5 text-xs font-medium tracking-wide",n==="none"?"":"uppercase","text-muted-foreground")},t,w.createElement("span",{className:"flex-1 truncate"},e),o&&w.createElement("span",{className:"shrink-0"},o))),m&&w.createElement("div",{className:p("mt-[var(--gds-sidebar-section-gap,0.125rem)]","space-y-[var(--gds-sidebar-section-gap,0.125rem)]")},c))});Hs.displayName="SidebarSection";var _s=w.forwardRef(({icon:e,badge:t,active:o=false,asButton:r=false,asChild:a=false,disabled:n=false,collapsedLabel:i,size:c="md",description:s,className:l,children:d,...m},u)=>{let{collapsed:f}=ra("SidebarItem"),h=bm(),g=!f&&h>0?{paddingLeft:`calc(0.5rem + ${h} * var(--gds-sidebar-tree-indent, 1.5rem))`}:void 0,b=c==="sm",v=b?"text-xs px-2 py-1":"text-sm px-2 py-1.5",C=b&&!o?"font-normal":"font-medium",S=o?"bg-primary/10 text-primary":b?"text-muted-foreground hover:bg-muted hover:text-foreground":"text-foreground/80 hover:bg-muted hover:text-foreground",x=!f&&s!=null,y=p("group flex items-center gap-2.5 rounded-md transition-colors",v,C,x&&(b?"py-1.5":"py-2"),f?"justify-center px-2 py-2":null,S,n&&"opacity-50 pointer-events-none",l),R=x?w.createElement("span",{className:"flex min-w-0 flex-1 flex-col gap-0.5 text-left leading-tight"},w.createElement("span",{className:"truncate"},d),w.createElement("span",{className:p("truncate font-normal text-muted-foreground",b?"text-[10px]":"text-[11px]")},s)):w.createElement("span",{className:"flex-1 truncate text-left"},d),L=w.createElement(w.Fragment,null,e&&w.createElement("span",{className:"shrink-0 [&>svg]:h-4 [&>svg]:w-4","aria-hidden":true},e),!f&&R,!f&&t!==void 0&&t!==null&&w.createElement("span",{className:"ml-auto inline-flex items-center justify-center rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground"},t)),D;if(a)D=w.createElement(Slot,{"data-gds-part":"sidebar-item","data-active":o||void 0,"aria-current":o?"page":void 0,className:y,style:g},d);else if(r){let{href:E,target:H,rel:z,download:W,hrefLang:Z,ping:O,referrerPolicy:B,type:T,..._}=m;D=w.createElement("button",{type:"button","data-gds-part":"sidebar-item","data-active":o||void 0,"aria-current":o?"page":void 0,disabled:n,className:p(y,"w-full text-left"),style:g,..._},L);}else D=w.createElement("a",{ref:u,"data-gds-part":"sidebar-item","data-active":o||void 0,"aria-current":o?"page":void 0,"aria-disabled":n||void 0,className:y,style:g,...m},L);if(!f)return D;let I=i??(typeof d=="string"?d:null);return I?w.createElement(Nr,null,w.createElement(Er,{asChild:true},D),w.createElement(er,{side:"right",sideOffset:8},I,t!=null&&w.createElement("span",{className:"ml-2 inline-flex items-center justify-center rounded bg-foreground/10 px-1.5 py-0 text-[10px]"},t))):D});_s.displayName="SidebarItem";var Fs=w.forwardRef(function({label:t,icon:o,badge:r,active:a=false,defaultExpanded:n=true,expanded:i,onExpandedChange:c,disabled:s,description:l,trailing:d,className:m,style:u,children:f,...h},g){let{collapsed:b}=ra("SidebarTreeItem"),v=bm(),C=i!==void 0,[S,x]=w.useState(n),y=C?i:S,R=()=>{let D=!y;C||x(D),c?.(D);};if(b)return w.createElement(Es.Provider,{value:v},f);let L=v*1.5;return w.createElement("div",{"data-gds-part":"sidebar-tree-item"},w.createElement("div",{className:"group/row relative"},w.createElement("button",{ref:g,type:"button",onClick:R,"aria-expanded":y,"aria-current":a?"page":void 0,"data-active":a||void 0,disabled:s,className:p("group flex w-full items-center gap-1.5 rounded-md py-1 text-sm font-medium transition-colors",a?"bg-primary/10 text-primary":"text-foreground/80 hover:bg-muted hover:text-foreground",s&&"opacity-50 pointer-events-none",d!=null&&"pr-12",m),style:{paddingLeft:`calc(0.25rem + ${L}rem)`,paddingRight:d!=null?"3rem":"0.5rem",...u},...h},w.createElement("span",{className:"inline-flex h-4 w-4 items-center justify-center text-muted-foreground shrink-0","aria-hidden":true},y?w.createElement(ChevronDown,{className:"h-3 w-3"}):w.createElement(ChevronRight,{className:"h-3 w-3"})),o&&w.createElement("span",{className:"shrink-0 [&>svg]:h-4 [&>svg]:w-4","aria-hidden":true},o),l!=null?w.createElement("span",{className:"flex min-w-0 flex-1 flex-col gap-0.5 text-left leading-tight"},w.createElement("span",{className:"truncate"},t),w.createElement("span",{className:"truncate text-[11px] font-normal text-muted-foreground"},l)):w.createElement("span",{className:"flex-1 truncate text-left"},t),r!=null&&w.createElement("span",{className:"ml-auto inline-flex items-center justify-center rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground"},r)),d!=null&&w.createElement("div",{onClick:D=>D.stopPropagation(),className:"pointer-events-auto absolute inset-y-0 right-1.5 flex items-center gap-0.5"},d)),y&&f&&w.createElement(Es.Provider,{value:v+1},w.createElement("div",{className:"space-y-[var(--gds-sidebar-section-gap,0.125rem)]"},f)))});Fs.displayName="SidebarTreeItem";rr.Header=As;rr.Content=Ds;rr.Footer=Is;rr.Section=Hs;rr.Item=_s;rr.TreeItem=Fs;var $o=[50,100,200,300,400,500,600,700,800,900,950],vm=[.985,.955,.895,.82,.72,.61,.51,.415,.325,.245,.17],a0=[.015,.04,.075,.11,.14,.17,.17,.15,.12,.08,.04];function So({hue:e,chromaScale:t=1}){let o=(e%360+360)%360,r={};for(let a=0;a<$o.length;a++){let n=vm[a],i=a0[a]*t;r[$o[a]]=`${n.toFixed(4)} ${i.toFixed(4)} ${o.toFixed(2)}`;}return r}function ym(){let e={};for(let t=0;t<$o.length;t++){let o=vm[t];e[$o[t]]=`${o.toFixed(4)} 0 0`;}return e}var mi={light:{destructive:"0.560 0.220 27.0",destructiveFg:"0.990 0.005 27.0",success:"0.610 0.180 145.0",warning:"0.720 0.180 60.0",info:"0.580 0.200 240.0",highlight:"0.860 0.180 95.0"},dark:{destructive:"0.680 0.220 27.0",destructiveFg:"0.990 0.005 27.0",success:"0.720 0.180 145.0",warning:"0.800 0.180 60.0",info:"0.700 0.200 240.0",highlight:"0.880 0.180 95.0"}},na="1 0 0",xm="0 0 0";function mn(e,t){let[,o,r]=e.split(/\s+/).map(d=>d.trim()),a=Number(o),n=r;if(t==="light"){let m=Math.min(a*.22,.045),u=.38,f=a;return {soft:`${.965.toFixed(3)} ${m.toFixed(3)} ${n}`,deep:`${u.toFixed(3)} ${f.toFixed(3)} ${n}`}}let i=.22,c=Math.min(a*.45,.075),s=.82,l=a*.9;return {soft:`${i.toFixed(3)} ${c.toFixed(3)} ${n}`,deep:`${s.toFixed(3)} ${l.toFixed(3)} ${n}`}}var Os={geist:"var(--font-geist), system-ui, sans-serif",inter:"var(--font-inter), system-ui, sans-serif",manrope:"var(--font-manrope), system-ui, sans-serif",figtree:"var(--font-figtree), system-ui, sans-serif",dmSans:"var(--font-dm-sans), system-ui, sans-serif",lexend:"var(--font-lexend), system-ui, sans-serif",outfit:"var(--font-outfit), system-ui, sans-serif",plusJakarta:"var(--font-plus-jakarta), system-ui, sans-serif",spaceGrotesk:"var(--font-space-grotesk), system-ui, sans-serif",poppins:"var(--font-poppins), system-ui, sans-serif",fraunces:"var(--font-fraunces), Georgia, serif",instrumentSerif:"var(--font-instrument-serif), Georgia, serif",sourceSerif:"var(--font-source-serif), Georgia, serif",jetbrainsMono:"var(--font-jetbrains-mono), ui-monospace, monospace",geistMono:"var(--font-geist-mono), ui-monospace, monospace",ibmPlexMono:"var(--font-ibm-plex-mono), ui-monospace, monospace",system:"system-ui, -apple-system, sans-serif",serif:"Georgia, 'Times New Roman', serif",mono:"ui-monospace, Menlo, monospace"};var wm="custom:";function Sm(e){return e.startsWith(wm)?e.slice(wm.length):null}var Cm={sans:"system-ui, sans-serif",serif:"Georgia, serif",mono:"ui-monospace, monospace"};var c0=["superLight","light","dark","superDark"],d0={muted:.6,default:1,vibrant:1.3};function p0(e,t,o){let r=t.primary*o,a=t.accent*o,n=(r+a)/2*.8,i=c=>(c%360+360)%360;return {1:`0.600 ${(.17*r).toFixed(4)} ${e.primary.toFixed(2)}`,2:`0.640 ${(.17*n).toFixed(4)} ${i(e.primary+140).toFixed(2)}`,3:`0.580 ${(.17*n).toFixed(4)} ${i(e.primary+220).toFixed(2)}`,4:`0.510 0.0250 ${e.neutral.toFixed(2)}`,5:`0.620 ${(.17*a).toFixed(4)} ${e.accent.toFixed(2)}`}}var fe=e=>({source:"neutral",step:e}),Zt=e=>({source:"primary",step:e}),nr=e=>({source:"accent",step:e}),aa=e=>({source:"pure",value:e}),u0={superLight:{background:fe(50),foreground:fe(800),card:aa(na),cardForeground:fe(800),popover:aa(na),popoverForeground:fe(800),primary:Zt(600),primaryForeground:Zt(50),secondary:fe(100),secondaryForeground:fe(700),muted:fe(100),mutedForeground:fe(500),accent:nr(600),accentForeground:nr(50),border:fe(200),input:fe(200),ring:Zt(500)},light:{background:fe(50),foreground:fe(950),card:aa(na),cardForeground:fe(950),popover:aa(na),popoverForeground:fe(950),primary:Zt(500),primaryForeground:Zt(50),secondary:fe(100),secondaryForeground:fe(700),muted:fe(100),mutedForeground:fe(500),accent:nr(500),accentForeground:nr(50),border:fe(200),input:fe(200),ring:Zt(500)},dark:{background:fe(950),foreground:fe(50),card:fe(900),cardForeground:fe(50),popover:fe(900),popoverForeground:fe(50),primary:Zt(400),primaryForeground:Zt(950),secondary:fe(800),secondaryForeground:fe(200),muted:fe(800),mutedForeground:fe(400),accent:nr(400),accentForeground:nr(950),border:fe(800),input:fe(800),ring:Zt(400)},superDark:{background:aa(xm),foreground:fe(100),card:fe(950),cardForeground:fe(100),popover:fe(950),popoverForeground:fe(100),primary:Zt(300),primaryForeground:Zt(950),secondary:fe(900),secondaryForeground:fe(300),muted:fe(900),mutedForeground:fe(500),accent:nr(300),accentForeground:nr(950),border:fe(900),input:fe(900),ring:Zt(300)}};function ct(e,t){return e.source==="pure"?e.value:t[e.source][e.step]}function m0(e,t,o){let r=u0[t],a=t==="superLight"||t==="light",n=a?mi.light:mi.dark;return {background:ct(r.background,e),foreground:ct(r.foreground,e),card:ct(r.card,e),cardForeground:ct(r.cardForeground,e),popover:ct(r.popover,e),popoverForeground:ct(r.popoverForeground,e),primary:ct(r.primary,e),primaryForeground:ct(r.primaryForeground,e),secondary:ct(r.secondary,e),secondaryForeground:ct(r.secondaryForeground,e),muted:ct(r.muted,e),mutedForeground:ct(r.mutedForeground,e),accent:ct(r.accent,e),accentForeground:ct(r.accentForeground,e),border:ct(r.border,e),input:ct(r.input,e),ring:o&&r.ring.source!=="pure"?o[r.ring.step]:ct(r.ring,e),destructive:n.destructive,destructiveForeground:n.destructiveFg,success:n.success,warning:n.warning,info:n.info,highlight:n.highlight,...(()=>{let i=a?"light":"dark",c=mn(n.destructive,i),s=mn(n.success,i),l=mn(n.warning,i),d=mn(n.info,i),m=mn(n.highlight,i);return {destructiveSoft:c.soft,destructiveDeep:c.deep,successSoft:s.soft,successDeep:s.deep,warningSoft:l.soft,warningDeep:l.deep,infoSoft:d.soft,infoDeep:d.deep,highlightSoft:m.soft,highlightDeep:m.deep}})()}}var f0={display:3.75,h1:2.5,h2:2,h3:1.5,h4:1.25,h5:1.125,h6:1,body:1,bodySm:.875},Vs={compact:.85,default:1,spacious:1.18},g0=Object.fromEntries(GDS_MODULAR_SCALES.map(e=>[e.id,e.ratio])),h0=.625,b0=1.02,v0=1.8,Rm=(e,t,o)=>Math.min(o,Math.max(t,e)),y0={"2xs":1.455,xs:1.333,sm:1.429,base:1.5,lg:1.556,xl:1.4,"2xl":1.333,"3xl":1.2,"4xl":1.111,"5xl":1,"6xl":1,"7xl":1};function x0(e){if(e in Vs){let o=Vs[e];return Object.fromEntries(Object.entries(f0).map(([r,a])=>[r,a*o]))}let t=Tm(e);return {display:t["6xl"],h1:t["4xl"],h2:t["3xl"],h3:t["2xl"],h4:t.xl,h5:t.lg,h6:t.base,body:t.base,bodySm:t.sm}}function Tm(e){let t=Rm(g0[e],b0,v0);return modularTypeSizes(1,t,h0)}function zs(e,t,o){let r=Sm(e);if(r===null)return Os[e]??Os.system;let n=t?.find(i=>i.family===r)?.category??o;return `"${r}", ${Cm[n]}`}function w0(e){let t=x0(e.scale),o=a=>`${a.toFixed(3)}rem`,r;if(!(e.scale in Vs)){let a=Tm(e.scale);r=Object.fromEntries(GDS_TYPE_SIZE_NAMES.map(n=>[n,{size:o(a[n]),lineHeight:String(y0[n])}]));}return {fontSans:zs(e.body,e.customFonts,"sans"),fontMono:zs(e.mono,e.customFonts,"mono"),fontDisplay:zs(e.display,e.customFonts,"sans"),fontFaces:e.customFonts,headingWeight:e.headingWeight??600,bodyWeight:e.bodyWeight??400,headingTracking:e.headingTracking??"-0.01em",bodyStretch:e.bodyStretch??"normal",displayStretch:e.displayStretch??e.bodyStretch??"normal",scale:{display:o(t.display),h1:o(t.h1),h2:o(t.h2),h3:o(t.h3),h4:o(t.h4),h5:o(t.h5),h6:o(t.h6),body:o(t.body),bodySm:o(t.bodySm)},namedScale:r}}var S0={sharp:0,subtle:.25,soft:.5,round:.875,pill:1.25};function C0(e){let t=S0[e.style],o=r=>`${r.toFixed(3)}rem`;return {base:o(t),sm:o(Math.max(0,t-.25)),md:o(t),lg:o(t+.25),xl:o(t+.5),"2xl":o(t+1),full:"9999px"}}var km={tight:.85,default:1,roomy:1.2},k0=.25,R0=.125;function T0(e){let t=Rm(km[e.density],.6,1.6),o=Math.max(R0,Math.round(k0*t*1e4)/1e4);return {baseUnit:"1rem",densityFactor:km[e.density],unit:`${o}rem`}}var P0={none:{sm:"none",md:"none",lg:"none",xl:"none","2xl":"none",inner:"none"},subtle:{sm:"0 1px 2px 0 rgb(0 0 0 / 0.03)",md:"0 2px 4px -1px rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03)",lg:"0 6px 14px -2px rgb(0 0 0 / 0.05)",xl:"0 12px 24px -4px rgb(0 0 0 / 0.06)","2xl":"0 24px 48px -12px rgb(0 0 0 / 0.12)",inner:"inset 0 1px 2px 0 rgb(0 0 0 / 0.03)"},default:{sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)",inner:"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"},dramatic:{sm:"0 2px 4px 0 rgb(0 0 0 / 0.12)",md:"0 8px 16px -2px rgb(0 0 0 / 0.18), 0 4px 8px -4px rgb(0 0 0 / 0.12)",lg:"0 20px 32px -4px rgb(0 0 0 / 0.22), 0 8px 16px -8px rgb(0 0 0 / 0.18)",xl:"0 32px 48px -6px rgb(0 0 0 / 0.28), 0 12px 24px -10px rgb(0 0 0 / 0.22)","2xl":"0 48px 80px -16px rgb(0 0 0 / 0.45)",inner:"inset 0 4px 8px 0 rgb(0 0 0 / 0.1)"}};function M0(e){let t=e?.shadows??"default",o=e?.motionIntensity??1,r=a=>`${Math.round(a*o)}ms`;return {shadows:P0[t],motion:{fast:r(150),base:r(200),slow:r(300),slower:r(500)},borderWidth:e?.borderWidth??"1px"}}function Dr(e){let t=d0[e.intensity??"default"],o=e.neutralPureGray??false,r=(e.chroma?.neutral??.08)*t,a=(e.chroma?.primary??1)*t,n=(e.chroma?.accent??1)*t,i=o?ym():So({hue:e.hues.neutral,chromaScale:r}),c=So({hue:e.hues.primary,chromaScale:a}),s=So({hue:e.hues.accent,chromaScale:n}),l={neutral:i,primary:c,accent:s},d=p0(e.hues,{primary:a,accent:n},t),m=e.ring?.hue!=null?So({hue:e.ring.hue,chromaScale:a}):e.ring?.source&&e.ring.source!=="primary"?l[e.ring.source]:void 0,u=Object.fromEntries(c0.map(y=>[y,m0(l,y,m)])),f=y=>parseFloat(y.trim().split(/\s+/)[2]??"0"),h=mi.light,g={success:So({hue:f(h.success)}),warning:So({hue:f(h.warning)}),info:So({hue:f(h.info)}),highlight:So({hue:f(h.highlight)}),destructive:So({hue:f(h.destructive)})},b=w0(e.typography),v=C0(e.radius),C=T0(e.spacing),S=M0(e.effects),x={buttonShape:e.components?.buttonShape??"default",inputStyle:e.components?.inputStyle??"outlined",cardStyle:e.components?.cardStyle??"flat"};return {id:e.id,name:e.name,description:e.description,tagline:e.tagline,input:e,ramps:l,roleRamps:g,colors:u,chart:d,typography:b,radius:v,spacing:C,effects:S,components:x}}var ia={id:"calm",name:"Calm",description:"Warm neutrals, terracotta primary, serif typography.",tagline:"Signature",hues:{neutral:40,primary:20,accent:40},chroma:{neutral:.15,primary:.75,accent:.8},intensity:"muted",typography:{display:"fraunces",body:"fraunces",mono:"jetbrainsMono",scale:"default",headingWeight:600,headingTracking:"-0.02em"},spacing:{density:"roomy"},radius:{style:"round"},effects:{shadows:"subtle",motionIntensity:1.25},components:{buttonShape:"pill",inputStyle:"outlined",cardStyle:"outlined"}},Bs={id:"energy",name:"Energy",description:"Teal + indigo \u2014 punchy, cool-tone, modern sans.",tagline:"Alternate",hues:{neutral:175,primary:175,accent:235},chroma:{neutral:.08,primary:1,accent:1},intensity:"vibrant",typography:{display:"geist",body:"geist",mono:"geistMono",scale:"default",headingWeight:600},spacing:{density:"default"},radius:{style:"soft"},effects:{shadows:"default",motionIntensity:1},components:{buttonShape:"default",inputStyle:"outlined",cardStyle:"flat"}},fi=[ia,Bs];function N0(e){return {"--background":e.background,"--foreground":e.foreground,"--card":e.card,"--card-foreground":e.cardForeground,"--popover":e.popover,"--popover-foreground":e.popoverForeground,"--primary":e.primary,"--primary-foreground":e.primaryForeground,"--secondary":e.secondary,"--secondary-foreground":e.secondaryForeground,"--muted":e.muted,"--muted-foreground":e.mutedForeground,"--accent":e.accent,"--accent-foreground":e.accentForeground,"--destructive":e.destructive,"--destructive-foreground":e.destructiveForeground,"--border":e.border,"--input":e.input,"--ring":e.ring,"--success":e.success,"--warning":e.warning,"--info":e.info,"--highlight":e.highlight,"--destructive-soft":e.destructiveSoft,"--destructive-deep":e.destructiveDeep,"--success-soft":e.successSoft,"--success-deep":e.successDeep,"--warning-soft":e.warningSoft,"--warning-deep":e.warningDeep,"--info-soft":e.infoSoft,"--info-deep":e.infoDeep,"--highlight-soft":e.highlightSoft,"--highlight-deep":e.highlightDeep}}function Ws(e,t){let o=e.colors[t],r={...N0(o),...Gs("neutral",e.ramps.neutral),...Gs("primary",e.ramps.primary),...Gs("accent",e.ramps.accent),"--chart-1":e.chart[1],"--chart-2":e.chart[2],"--chart-3":e.chart[3],"--chart-4":e.chart[4],"--chart-5":e.chart[5],...E0(e),"--font-sans":e.typography.fontSans,"--font-mono":e.typography.fontMono,"--font-display":e.typography.fontDisplay,"--font-heading-weight":String(e.typography.headingWeight),"--font-body-weight":String(e.typography.bodyWeight),"--font-heading-tracking":e.typography.headingTracking,"--font-body-stretch":e.typography.bodyStretch??"normal","--font-display-stretch":e.typography.displayStretch??"normal","--text-display":e.typography.scale.display,"--text-h1":e.typography.scale.h1,"--text-h2":e.typography.scale.h2,"--text-h3":e.typography.scale.h3,"--text-h4":e.typography.scale.h4,"--text-h5":e.typography.scale.h5,"--text-h6":e.typography.scale.h6,"--text-body":e.typography.scale.body,"--text-body-sm":e.typography.scale.bodySm,"--radius":e.radius.base,"--gds-radius-sm":e.radius.sm,"--gds-radius-md":e.radius.md,"--gds-radius-lg":e.radius.lg,"--gds-radius-xl":e.radius.xl,"--gds-radius-2xl":e.radius["2xl"],"--gds-radius-full":e.radius.full,"--gds-density":String(e.spacing.densityFactor),"--spacing":e.spacing.unit??"0.25rem","--gds-shadow-sm":e.effects.shadows.sm,"--gds-shadow-md":e.effects.shadows.md,"--gds-shadow-lg":e.effects.shadows.lg,"--gds-shadow-xl":e.effects.shadows.xl,"--gds-shadow-2xl":e.effects.shadows["2xl"],"--gds-shadow-inner":e.effects.shadows.inner,"--gds-transition-fast":e.effects.motion.fast,"--gds-transition-base":e.effects.motion.base,"--gds-transition-slow":e.effects.motion.slow,"--gds-transition-slower":e.effects.motion.slower,"--gds-border-width":e.effects.borderWidth};if(e.typography.namedScale)for(let[n,i]of Object.entries(e.typography.namedScale))r[`--text-${n}`]=i.size,r[`--text-${n}--line-height`]=i.lineHeight;let a=[["primary",e.ramps.primary],["accent",e.ramps.accent],["neutral",e.ramps.neutral],["success",e.roleRamps?.success],["warning",e.roleRamps?.warning],["info",e.roleRamps?.info],["highlight",e.roleRamps?.highlight],["destructive",e.roleRamps?.destructive]];for(let[n,i]of a)if(i)for(let c of $o)r[`--gds-${n}-${c}`]=i[c];return r}function E0(e){let t=c=>parseFloat(c.trim().split(/\s+/)[2]??"0"),o=c=>(c%360+360)%360,r=t(e.ramps.primary[500]),a=t(e.ramps.accent[500]),n=[r,a,r+45,a+60,r+150,a-75,r+210,a+165].map(o),i={};return n.forEach((c,s)=>{let l=(.68+s%3*.02).toFixed(3);i[`--brand-${s+1}`]=`${l} 0.200 ${c.toFixed(2)}`;}),i}function Gs(e,t){let o={};for(let r of $o)o[`--ramp-${e}-${r}`]=t[r];return o}var $s="gds-theme-fonts";function Pm(e){return !e||e.length===0?"":e.map(t=>{let o=t.format?`url("${t.url}") format("${t.format}")`:`url("${t.url}")`;return ["@font-face {",` font-family: "${t.family.replace(/"/g,"")}";`,` src: ${o};`,` font-weight: ${t.weight??"100 900"};`,` font-stretch: ${t.stretch??"50% 200%"};`,` font-style: ${t.style??"normal"};`," font-display: swap;","}"].join(`
|
|
122
|
+
`)}}):null},Hh=Va.Tooltip,hp=y.forwardRef(({active:e,payload:t,className:o,indicator:a="dot",hideLabel:r=false,hideIndicator:n=false,label:i,labelFormatter:c,labelClassName:s,formatter:l,color:p,nameKey:m,labelKey:u},g)=>{let{config:h}=mp(),f=y.useMemo(()=>{if(r||!t?.length)return null;let[v]=t,k=`${u||v?.dataKey||v?.name||"value"}`,x=yi(h,v,k),w=!u&&typeof i=="string"?h[i]?.label||i:x?.label;return c?y.createElement("div",{className:d("font-medium",s)},c(w,t)):w?y.createElement("div",{className:d("font-medium",s)},w):null},[i,c,t,r,s,h,u]);if(!e||!t?.length)return null;let b=t.length===1&&a!=="dot";return y.createElement("div",{ref:g,className:d("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",o)},b?null:f,y.createElement("div",{className:"grid gap-1.5"},t.filter(v=>v.type!=="none").map((v,k)=>{let x=`${m||v.name||v.dataKey||"value"}`,w=yi(h,v,x),S=p||v.payload.fill||v.color;return y.createElement("div",{key:v.dataKey,className:d("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",a==="dot"&&"items-center")},l&&v?.value!==void 0&&v.name?l(v.value,v.name,v,k,v.payload):y.createElement(y.Fragment,null,w?.icon?y.createElement(w.icon,null):!n&&y.createElement("div",{className:d("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",{"h-2.5 w-2.5":a==="dot","w-1":a==="line","w-0 border-[1.5px] border-dashed bg-transparent":a==="dashed","my-0.5":b&&a==="dashed"}),style:{"--color-bg":S,"--color-border":S}}),y.createElement("div",{className:d("flex flex-1 justify-between leading-none",b?"items-end":"items-center")},y.createElement("div",{className:"grid gap-1.5"},b?f:null,y.createElement("span",{className:"text-muted-foreground"},w?.label||v.name)),v.value&&y.createElement("span",{className:"font-mono font-medium tabular-nums text-foreground"},v.value.toLocaleString()))))})))});hp.displayName="ChartTooltip";var Fh=Va.Legend,bp=y.forwardRef(({className:e,hideIcon:t=false,payload:o,verticalAlign:a="bottom",nameKey:r},n)=>{let{config:i}=mp();return o?.length?y.createElement("div",{ref:n,className:d("flex items-center justify-center gap-4",a==="top"?"pb-3":"pt-3",e)},o.filter(c=>c.type!=="none").map(c=>{let s=`${r||c.dataKey||"value"}`,l=yi(i,c,s);return y.createElement("div",{key:c.value,className:d("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")},l?.icon&&!t?y.createElement(l.icon,null):y.createElement("div",{className:"h-2 w-2 shrink-0 rounded-[2px]",style:{backgroundColor:c.color}}),l?.label)})):null});bp.displayName="ChartLegend";function yi(e,t,o){if(typeof t!="object"||t===null)return;let a="payload"in t&&typeof t.payload=="object"&&t.payload!==null?t.payload:void 0,r=o;return o in t&&typeof t[o]=="string"?r=t[o]:a&&o in a&&typeof a[o]=="string"&&(r=a[o]),r in e?e[r]:e[o]}var Vh=cva("flex w-full rounded-md border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{default:"min-h-[80px] px-3 py-2 text-sm",sm:"min-h-[64px] px-2 py-1.5 text-sm",xs:"min-h-[52px] px-2 py-1 text-xs","2xs":"min-h-[44px] px-2 py-1 text-2xs"}},defaultVariants:{size:"default"}}),vp=y.forwardRef(({className:e,size:t="default",...o},a)=>y.createElement("textarea",{className:d(Vh({size:t}),e),ref:a,...o}));vp.displayName="Textarea";var Oh=cva("grid items-center w-full gap-3 [grid-template-columns:auto_1fr_auto]",{variants:{position:{top:"border-b border-border",bottom:"border-t border-border",inline:""},variant:{default:"bg-background",subtle:"bg-muted/30",transparent:"bg-transparent"},size:{sm:"min-h-10 px-3",md:"min-h-12 px-4",lg:"min-h-14 px-6"},sticky:{true:"",false:""}},compoundVariants:[{sticky:true,position:"top",className:"sticky top-0 z-20"},{sticky:true,position:"bottom",className:"sticky bottom-0 z-20"}],defaultVariants:{position:"top",variant:"default",size:"md",sticky:false}}),yp=y.forwardRef(({className:e,position:t,variant:o,size:a,sticky:r,leading:n,center:i,trailing:c,children:s,"aria-label":l,...p},m)=>{let u=s==null;return y.createElement("div",{ref:m,role:"toolbar","aria-label":l??"Toolbar","data-gds-part":"toolbar","data-position":t??"top",className:d(Oh({position:t,variant:o,size:a,sticky:r}),e),...p},u?y.createElement(y.Fragment,null,y.createElement("div",{"data-gds-part":"toolbar-leading",className:"flex items-center min-w-0"},n),y.createElement("div",{"data-gds-part":"toolbar-center",className:"flex items-center min-w-0 justify-center"},i),y.createElement("div",{"data-gds-part":"toolbar-trailing",className:"flex items-center min-w-0 justify-end"},c)):s)});yp.displayName="Toolbar";var xp=y.forwardRef(({className:e,align:t="leading",...o},a)=>y.createElement("div",{ref:a,"data-gds-part":`toolbar-${t}`,className:d("flex items-center min-w-0",t==="center"&&"justify-center",t==="trailing"&&"justify-end",e),...o}));xp.displayName="ToolbarSlot";var kp=y.createContext(null),xi=y.createContext(0);function Sp(){return y.useContext(xi)}function wr(e){let t=y.useContext(kp);if(!t)throw new Error(`<${e}> must be rendered inside a <Sidebar> root.`);return t}var _o=y.forwardRef(({collapsed:e,defaultCollapsed:t=false,onCollapsedChange:o,collapsible:a=true,variant:r="rail",className:n,style:i,children:c,...s},l)=>{let p=e!==void 0,[m,u]=y.useState(t),g=p?e:m,h=r==="panel",f=()=>{let b=!g;p||u(b),o?.(b);};return y.createElement(ii,{delayDuration:0},y.createElement(kp.Provider,{value:{collapsed:g}},y.createElement("aside",{ref:l,"data-gds-part":"sidebar","data-collapsed":g||void 0,"data-variant":r,className:d("relative flex h-full flex-col bg-card text-card-foreground",h?"w-full border border-border rounded-lg overflow-hidden":"border-r border-border transition-[width] duration-200 ease-out",n),style:h?i:{width:g?"var(--gds-sidebar-collapsed-width, 4rem)":"var(--gds-sidebar-width, 16rem)",...i},...s},c,a&&!h&&y.createElement("button",{type:"button",onClick:f,"aria-label":g?"Expand sidebar":"Collapse sidebar","data-gds-part":"sidebar-collapse-toggle",className:d("absolute -right-3 top-6 z-10 flex h-6 w-6 items-center justify-center","rounded-full border border-border bg-card text-muted-foreground shadow-sm","hover:text-foreground hover:bg-muted transition-colors")},g?y.createElement(ChevronRight,{className:"h-3 w-3"}):y.createElement(ChevronLeft,{className:"h-3 w-3"})))))});_o.displayName="Sidebar";var ki=y.forwardRef(({className:e,...t},o)=>{let{collapsed:a}=wr("SidebarHeader");return y.createElement("div",{ref:o,"data-gds-part":"sidebar-header","data-collapsed":a||void 0,className:d("flex shrink-0 items-center border-b border-border",a?"justify-center px-2":"px-3","h-[var(--gds-sidebar-header-height,3.25rem)]",e),...t})});ki.displayName="SidebarHeader";var Si=y.forwardRef(({className:e,...t},o)=>y.createElement("nav",{ref:o,"data-gds-part":"sidebar-content",className:d("flex-1 overflow-y-auto overflow-x-hidden","py-[var(--gds-sidebar-content-py,0.5rem)]",e),...t}));Si.displayName="SidebarContent";var Ri=y.forwardRef(({className:e,...t},o)=>{let{collapsed:a}=wr("SidebarFooter");return y.createElement("div",{ref:o,"data-gds-part":"sidebar-footer","data-collapsed":a||void 0,className:d("shrink-0 border-t border-border",a?"px-2 py-2":"px-3 py-2",e),...t})});Ri.displayName="SidebarFooter";var Ci=y.forwardRef(({title:e,icon:t,trailing:o,collapsible:a=true,defaultExpanded:r=true,titleTransform:n,className:i,children:c,...s},l)=>{let{collapsed:p}=wr("SidebarSection"),[m,u]=y.useState(r),g=!!e&&a;return p?y.createElement("div",{ref:l,"data-gds-part":"sidebar-section",className:d("px-[var(--gds-sidebar-section-px,0.5rem)] space-y-[var(--gds-sidebar-section-gap,0.125rem)]",i),...s},c):y.createElement("div",{ref:l,"data-gds-part":"sidebar-section",className:d("px-[var(--gds-sidebar-section-px,0.5rem)] pb-1",i),...s},e&&(g?y.createElement("div",{className:d("group/header flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-xs font-medium uppercase tracking-wide","text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors")},y.createElement("button",{type:"button",onClick:()=>u(h=>!h),"aria-expanded":m,className:"flex flex-1 items-center gap-2 text-left min-w-0"},t,y.createElement("span",{className:d("flex-1 text-left truncate",n==="uppercase"?"uppercase":"normal-case")},e),m?y.createElement(ChevronDown,{className:"h-3 w-3 shrink-0",strokeWidth:1.5}):y.createElement(ChevronRight,{className:"h-3 w-3 shrink-0",strokeWidth:1.5})),o&&y.createElement("span",{className:"flex items-center shrink-0",onClick:h=>h.stopPropagation(),onKeyDown:h=>h.stopPropagation()},o)):y.createElement("div",{className:d("flex items-center gap-2 px-2 py-1.5 text-xs font-medium tracking-wide",n==="none"?"":"uppercase","text-muted-foreground")},t,y.createElement("span",{className:"flex-1 truncate"},e),o&&y.createElement("span",{className:"shrink-0"},o))),m&&y.createElement("div",{className:d("mt-[var(--gds-sidebar-section-gap,0.125rem)]","space-y-[var(--gds-sidebar-section-gap,0.125rem)]")},c))});Ci.displayName="SidebarSection";var Ti=y.forwardRef(({icon:e,badge:t,active:o=false,asButton:a=false,asChild:r=false,disabled:n=false,collapsedLabel:i,size:c="md",description:s,className:l,children:p,...m},u)=>{let{collapsed:g}=wr("SidebarItem"),h=Sp(),f=!g&&h>0?{paddingLeft:`calc(0.5rem + ${h} * var(--gds-sidebar-tree-indent, 1.5rem))`}:void 0,b=c==="sm",v=b?"text-xs px-2 py-1":"text-sm px-2 py-1.5",k=b&&!o?"font-normal":"font-medium",x=o?"bg-primary/10 text-primary":b?"text-muted-foreground hover:bg-muted hover:text-foreground":"text-foreground/80 hover:bg-muted hover:text-foreground",w=!g&&s!=null,S=d("group flex items-center gap-2.5 rounded-md transition-colors",v,k,w&&(b?"py-1.5":"py-2"),g?"justify-center px-2 py-2":null,x,n&&"opacity-50 pointer-events-none",l),C=w?y.createElement("span",{className:"flex min-w-0 flex-1 flex-col gap-0.5 text-left leading-tight"},y.createElement("span",{className:"truncate"},p),y.createElement("span",{className:d("truncate font-normal text-muted-foreground",b?"text-[10px]":"text-[11px]")},s)):y.createElement("span",{className:"flex-1 truncate text-left"},p),M=y.createElement(y.Fragment,null,e&&y.createElement("span",{className:"shrink-0 [&>svg]:h-4 [&>svg]:w-4","aria-hidden":true},e),!g&&C,!g&&t!==void 0&&t!==null&&y.createElement("span",{className:"ml-auto inline-flex items-center justify-center rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground"},t)),I;if(r)I=y.createElement(Slot,{"data-gds-part":"sidebar-item","data-active":o||void 0,"aria-current":o?"page":void 0,className:S,style:f},p);else if(a){let{href:z,target:E,rel:W,download:oe,hrefLang:he,ping:Y,referrerPolicy:H,type:R,...F}=m;I=y.createElement("button",{type:"button","data-gds-part":"sidebar-item","data-active":o||void 0,"aria-current":o?"page":void 0,disabled:n,className:d(S,"w-full text-left"),style:f,...F},M);}else I=y.createElement("a",{ref:u,"data-gds-part":"sidebar-item","data-active":o||void 0,"aria-current":o?"page":void 0,"aria-disabled":n||void 0,className:S,style:f,...m},M);if(!g)return I;let B=i??(typeof p=="string"?p:null);return B?y.createElement(sa,null,y.createElement(la,{asChild:true},I),y.createElement(Vo,{side:"right",sideOffset:8},B,t!=null&&y.createElement("span",{className:"ml-2 inline-flex items-center justify-center rounded bg-foreground/10 px-1.5 py-0 text-[10px]"},t))):I});Ti.displayName="SidebarItem";var Pi=y.forwardRef(function({label:t,icon:o,badge:a,active:r=false,defaultExpanded:n=true,expanded:i,onExpandedChange:c,disabled:s,description:l,trailing:p,className:m,style:u,children:g,...h},f){let{collapsed:b}=wr("SidebarTreeItem"),v=Sp(),k=i!==void 0,[x,w]=y.useState(n),S=k?i:x,C=()=>{let I=!S;k||w(I),c?.(I);};if(b)return y.createElement(xi.Provider,{value:v},g);let M=v*1.5;return y.createElement("div",{"data-gds-part":"sidebar-tree-item"},y.createElement("div",{className:"group/row relative"},y.createElement("button",{ref:f,type:"button",onClick:C,"aria-expanded":S,"aria-current":r?"page":void 0,"data-active":r||void 0,disabled:s,className:d("group flex w-full items-center gap-1.5 rounded-md py-1 text-sm font-medium transition-colors",r?"bg-primary/10 text-primary":"text-foreground/80 hover:bg-muted hover:text-foreground",s&&"opacity-50 pointer-events-none",p!=null&&"pr-12",m),style:{paddingLeft:`calc(0.25rem + ${M}rem)`,paddingRight:p!=null?"3rem":"0.5rem",...u},...h},y.createElement("span",{className:"inline-flex h-4 w-4 items-center justify-center text-muted-foreground shrink-0","aria-hidden":true},S?y.createElement(ChevronDown,{className:"h-3 w-3"}):y.createElement(ChevronRight,{className:"h-3 w-3"})),o&&y.createElement("span",{className:"shrink-0 [&>svg]:h-4 [&>svg]:w-4","aria-hidden":true},o),l!=null?y.createElement("span",{className:"flex min-w-0 flex-1 flex-col gap-0.5 text-left leading-tight"},y.createElement("span",{className:"truncate"},t),y.createElement("span",{className:"truncate text-[11px] font-normal text-muted-foreground"},l)):y.createElement("span",{className:"flex-1 truncate text-left"},t),a!=null&&y.createElement("span",{className:"ml-auto inline-flex items-center justify-center rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground"},a)),p!=null&&y.createElement("div",{onClick:I=>I.stopPropagation(),className:"pointer-events-auto absolute inset-y-0 right-1.5 flex items-center gap-0.5"},p)),S&&g&&y.createElement(xi.Provider,{value:v+1},y.createElement("div",{className:"space-y-[var(--gds-sidebar-section-gap,0.125rem)]"},g)))});Pi.displayName="SidebarTreeItem";_o.Header=ki;_o.Content=Si;_o.Footer=Ri;_o.Section=Ci;_o.Item=Ti;_o.TreeItem=Pi;var Mo=[50,100,200,300,400,500,600,700,800,900,950],Rp=[.985,.955,.895,.82,.72,.61,.51,.415,.325,.245,.17],Wh=[.015,.04,.075,.11,.14,.17,.17,.15,.12,.08,.04];function mo({hue:e,chromaScale:t=1}){let o=(e%360+360)%360,a={};for(let r=0;r<Mo.length;r++){let n=Rp[r],i=Wh[r]*t;a[Mo[r]]=`${n.toFixed(4)} ${i.toFixed(4)} ${o.toFixed(2)}`;}return a}function Cp(){let e={};for(let t=0;t<Mo.length;t++){let o=Rp[t];e[Mo[t]]=`${o.toFixed(4)} 0 0`;}return e}var wn={light:{destructive:"0.560 0.220 27.0",destructiveFg:"0.990 0.005 27.0",success:"0.610 0.180 145.0",warning:"0.720 0.180 60.0",info:"0.580 0.200 240.0",highlight:"0.860 0.180 95.0"},dark:{destructive:"0.680 0.220 27.0",destructiveFg:"0.990 0.005 27.0",success:"0.720 0.180 145.0",warning:"0.800 0.180 60.0",info:"0.700 0.200 240.0",highlight:"0.880 0.180 95.0"}},kr="1 0 0",Tp="0 0 0";function Ba(e,t){let[,o,a]=e.split(/\s+/).map(p=>p.trim()),r=Number(o),n=a;if(t==="light"){let m=Math.min(r*.22,.045),u=.38,g=r;return {soft:`${.965.toFixed(3)} ${m.toFixed(3)} ${n}`,deep:`${u.toFixed(3)} ${g.toFixed(3)} ${n}`}}let i=.22,c=Math.min(r*.45,.075),s=.82,l=r*.9;return {soft:`${i.toFixed(3)} ${c.toFixed(3)} ${n}`,deep:`${s.toFixed(3)} ${l.toFixed(3)} ${n}`}}var Mi={geist:"var(--font-geist), system-ui, sans-serif",inter:"var(--font-inter), system-ui, sans-serif",manrope:"var(--font-manrope), system-ui, sans-serif",figtree:"var(--font-figtree), system-ui, sans-serif",dmSans:"var(--font-dm-sans), system-ui, sans-serif",lexend:"var(--font-lexend), system-ui, sans-serif",outfit:"var(--font-outfit), system-ui, sans-serif",plusJakarta:"var(--font-plus-jakarta), system-ui, sans-serif",spaceGrotesk:"var(--font-space-grotesk), system-ui, sans-serif",poppins:"var(--font-poppins), system-ui, sans-serif",fraunces:"var(--font-fraunces), Georgia, serif",instrumentSerif:"var(--font-instrument-serif), Georgia, serif",sourceSerif:"var(--font-source-serif), Georgia, serif",jetbrainsMono:"var(--font-jetbrains-mono), ui-monospace, monospace",geistMono:"var(--font-geist-mono), ui-monospace, monospace",ibmPlexMono:"var(--font-ibm-plex-mono), ui-monospace, monospace",system:"system-ui, -apple-system, sans-serif",serif:"Georgia, 'Times New Roman', serif",mono:"ui-monospace, Menlo, monospace"};var Pp="custom:";function Mp(e){return e.startsWith(Pp)?e.slice(Pp.length):null}var Np={sans:"system-ui, sans-serif",serif:"Georgia, serif",mono:"ui-monospace, monospace"};var Kh=["superLight","light","dark","superDark"],qh={muted:.6,default:1,vibrant:1.3};function Yh(e,t,o){let a=t.primary*o,r=t.accent*o,n=(a+r)/2*.8,i=c=>(c%360+360)%360;return {1:`0.600 ${(.17*a).toFixed(4)} ${e.primary.toFixed(2)}`,2:`0.640 ${(.17*n).toFixed(4)} ${i(e.primary+140).toFixed(2)}`,3:`0.580 ${(.17*n).toFixed(4)} ${i(e.primary+220).toFixed(2)}`,4:`0.510 0.0250 ${e.neutral.toFixed(2)}`,5:`0.620 ${(.17*r).toFixed(4)} ${e.accent.toFixed(2)}`}}var te=e=>({source:"neutral",step:e}),Wt=e=>({source:"primary",step:e}),Go=e=>({source:"accent",step:e}),Sr=e=>({source:"pure",value:e}),Zh={superLight:{background:te(50),foreground:te(800),card:Sr(kr),cardForeground:te(800),popover:Sr(kr),popoverForeground:te(800),primary:Wt(600),primaryForeground:Wt(50),secondary:te(100),secondaryForeground:te(700),muted:te(100),mutedForeground:te(500),accent:Go(600),accentForeground:Go(50),border:te(200),input:te(200),ring:Wt(500)},light:{background:te(50),foreground:te(950),card:Sr(kr),cardForeground:te(950),popover:Sr(kr),popoverForeground:te(950),primary:Wt(500),primaryForeground:Wt(50),secondary:te(100),secondaryForeground:te(700),muted:te(100),mutedForeground:te(500),accent:Go(500),accentForeground:Go(50),border:te(200),input:te(200),ring:Wt(500)},dark:{background:te(950),foreground:te(50),card:te(900),cardForeground:te(50),popover:te(900),popoverForeground:te(50),primary:Wt(400),primaryForeground:Wt(950),secondary:te(800),secondaryForeground:te(200),muted:te(800),mutedForeground:te(400),accent:Go(400),accentForeground:Go(950),border:te(800),input:te(800),ring:Wt(400)},superDark:{background:Sr(Tp),foreground:te(100),card:te(950),cardForeground:te(100),popover:te(950),popoverForeground:te(100),primary:Wt(300),primaryForeground:Wt(950),secondary:te(900),secondaryForeground:te(300),muted:te(900),mutedForeground:te(500),accent:Go(300),accentForeground:Go(950),border:te(900),input:te(900),ring:Wt(300)}};function rt(e,t){return e.source==="pure"?e.value:t[e.source][e.step]}function Xh(e,t,o){let a=Zh[t],r=t==="superLight"||t==="light",n=r?wn.light:wn.dark;return {background:rt(a.background,e),foreground:rt(a.foreground,e),card:rt(a.card,e),cardForeground:rt(a.cardForeground,e),popover:rt(a.popover,e),popoverForeground:rt(a.popoverForeground,e),primary:rt(a.primary,e),primaryForeground:rt(a.primaryForeground,e),secondary:rt(a.secondary,e),secondaryForeground:rt(a.secondaryForeground,e),muted:rt(a.muted,e),mutedForeground:rt(a.mutedForeground,e),accent:rt(a.accent,e),accentForeground:rt(a.accentForeground,e),border:rt(a.border,e),input:rt(a.input,e),ring:o&&a.ring.source!=="pure"?o[a.ring.step]:rt(a.ring,e),destructive:n.destructive,destructiveForeground:n.destructiveFg,success:n.success,warning:n.warning,info:n.info,highlight:n.highlight,...(()=>{let i=r?"light":"dark",c=Ba(n.destructive,i),s=Ba(n.success,i),l=Ba(n.warning,i),p=Ba(n.info,i),m=Ba(n.highlight,i);return {destructiveSoft:c.soft,destructiveDeep:c.deep,successSoft:s.soft,successDeep:s.deep,warningSoft:l.soft,warningDeep:l.deep,infoSoft:p.soft,infoDeep:p.deep,highlightSoft:m.soft,highlightDeep:m.deep}})()}}var Jh={display:3.75,h1:2.5,h2:2,h3:1.5,h4:1.25,h5:1.125,h6:1,body:1,bodySm:.875},Ei={compact:.85,default:1,spacious:1.18},Qh=Object.fromEntries(GDS_MODULAR_SCALES.map(e=>[e.id,e.ratio])),eb=.625,tb=1.02,ob=1.8,Lp=(e,t,o)=>Math.min(o,Math.max(t,e)),ab={"2xs":1.455,xs:1.333,sm:1.429,base:1.5,lg:1.556,xl:1.4,"2xl":1.333,"3xl":1.2,"4xl":1.111,"5xl":1,"6xl":1,"7xl":1};function rb(e){if(e in Ei){let o=Ei[e];return Object.fromEntries(Object.entries(Jh).map(([a,r])=>[a,r*o]))}let t=Dp(e);return {display:t["6xl"],h1:t["4xl"],h2:t["3xl"],h3:t["2xl"],h4:t.xl,h5:t.lg,h6:t.base,body:t.base,bodySm:t.sm}}function Dp(e){let t=Lp(Qh[e],tb,ob);return modularTypeSizes(1,t,eb)}function Ni(e,t,o){let a=Mp(e);if(a===null)return Mi[e]??Mi.system;let n=t?.find(i=>i.family===a)?.category??o;return `"${a}", ${Np[n]}`}function nb(e){let t=rb(e.scale),o=r=>`${r.toFixed(3)}rem`,a;if(!(e.scale in Ei)){let r=Dp(e.scale);a=Object.fromEntries(GDS_TYPE_SIZE_NAMES.map(n=>[n,{size:o(r[n]),lineHeight:String(ab[n])}]));}return {fontSans:Ni(e.body,e.customFonts,"sans"),fontMono:Ni(e.mono,e.customFonts,"mono"),fontDisplay:Ni(e.display,e.customFonts,"sans"),fontFaces:e.customFonts,headingWeight:e.headingWeight??600,bodyWeight:e.bodyWeight??400,headingTracking:e.headingTracking??"-0.01em",bodyStretch:e.bodyStretch??"normal",displayStretch:e.displayStretch??e.bodyStretch??"normal",scale:{display:o(t.display),h1:o(t.h1),h2:o(t.h2),h3:o(t.h3),h4:o(t.h4),h5:o(t.h5),h6:o(t.h6),body:o(t.body),bodySm:o(t.bodySm)},namedScale:a}}var ib={sharp:0,subtle:.25,soft:.5,round:.875,pill:1.25};function sb(e){let t=ib[e.style],o=a=>`${a.toFixed(3)}rem`;return {base:o(t),sm:o(Math.max(0,t-.25)),md:o(t),lg:o(t+.25),xl:o(t+.5),"2xl":o(t+1),full:"9999px"}}var Ep={tight:.85,default:1,roomy:1.2},lb=.25,cb=.125;function db(e){let t=Lp(Ep[e.density],.6,1.6),o=Math.max(cb,Math.round(lb*t*1e4)/1e4);return {baseUnit:"1rem",densityFactor:Ep[e.density],unit:`${o}rem`}}var pb={none:{sm:"none",md:"none",lg:"none",xl:"none","2xl":"none",inner:"none"},subtle:{sm:"0 1px 2px 0 rgb(0 0 0 / 0.03)",md:"0 2px 4px -1px rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03)",lg:"0 6px 14px -2px rgb(0 0 0 / 0.05)",xl:"0 12px 24px -4px rgb(0 0 0 / 0.06)","2xl":"0 24px 48px -12px rgb(0 0 0 / 0.12)",inner:"inset 0 1px 2px 0 rgb(0 0 0 / 0.03)"},default:{sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)",inner:"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"},dramatic:{sm:"0 2px 4px 0 rgb(0 0 0 / 0.12)",md:"0 8px 16px -2px rgb(0 0 0 / 0.18), 0 4px 8px -4px rgb(0 0 0 / 0.12)",lg:"0 20px 32px -4px rgb(0 0 0 / 0.22), 0 8px 16px -8px rgb(0 0 0 / 0.18)",xl:"0 32px 48px -6px rgb(0 0 0 / 0.28), 0 12px 24px -10px rgb(0 0 0 / 0.22)","2xl":"0 48px 80px -16px rgb(0 0 0 / 0.45)",inner:"inset 0 4px 8px 0 rgb(0 0 0 / 0.1)"}};function ub(e){let t=e?.shadows??"default",o=e?.motionIntensity??1,a=r=>`${Math.round(r*o)}ms`;return {shadows:pb[t],motion:{fast:a(150),base:a(200),slow:a(300),slower:a(500)},borderWidth:e?.borderWidth??"1px"}}function pa(e){let t=qh[e.intensity??"default"],o=e.neutralPureGray??false,a=(e.chroma?.neutral??.08)*t,r=(e.chroma?.primary??1)*t,n=(e.chroma?.accent??1)*t,i=o?Cp():mo({hue:e.hues.neutral,chromaScale:a}),c=mo({hue:e.hues.primary,chromaScale:r}),s=mo({hue:e.hues.accent,chromaScale:n}),l={neutral:i,primary:c,accent:s},p=Yh(e.hues,{primary:r,accent:n},t),m=e.ring?.hue!=null?mo({hue:e.ring.hue,chromaScale:r}):e.ring?.source&&e.ring.source!=="primary"?l[e.ring.source]:void 0,u=Object.fromEntries(Kh.map(S=>[S,Xh(l,S,m)])),g=S=>parseFloat(S.trim().split(/\s+/)[2]??"0"),h=wn.light,f={success:mo({hue:g(h.success)}),warning:mo({hue:g(h.warning)}),info:mo({hue:g(h.info)}),highlight:mo({hue:g(h.highlight)}),destructive:mo({hue:g(h.destructive)})},b=nb(e.typography),v=sb(e.radius),k=db(e.spacing),x=ub(e.effects),w={buttonShape:e.components?.buttonShape??"default",inputStyle:e.components?.inputStyle??"outlined",cardStyle:e.components?.cardStyle??"flat"};return {id:e.id,name:e.name,description:e.description,tagline:e.tagline,input:e,ramps:l,roleRamps:f,colors:u,chart:p,typography:b,radius:v,spacing:k,effects:x,components:w}}var Rr={id:"calm",name:"Calm",description:"Warm neutrals, terracotta primary, serif typography.",tagline:"Signature",hues:{neutral:40,primary:20,accent:40},chroma:{neutral:.15,primary:.75,accent:.8},intensity:"muted",typography:{display:"fraunces",body:"fraunces",mono:"jetbrainsMono",scale:"default",headingWeight:600,headingTracking:"-0.02em"},spacing:{density:"roomy"},radius:{style:"round"},effects:{shadows:"subtle",motionIntensity:1.25},components:{buttonShape:"pill",inputStyle:"outlined",cardStyle:"outlined"}},Li={id:"energy",name:"Energy",description:"Teal + indigo \u2014 punchy, cool-tone, modern sans.",tagline:"Alternate",hues:{neutral:175,primary:175,accent:235},chroma:{neutral:.08,primary:1,accent:1},intensity:"vibrant",typography:{display:"geist",body:"geist",mono:"geistMono",scale:"default",headingWeight:600},spacing:{density:"default"},radius:{style:"soft"},effects:{shadows:"default",motionIntensity:1},components:{buttonShape:"default",inputStyle:"outlined",cardStyle:"flat"}},kn=[Rr,Li];function mb(e){return {"--background":e.background,"--foreground":e.foreground,"--card":e.card,"--card-foreground":e.cardForeground,"--popover":e.popover,"--popover-foreground":e.popoverForeground,"--primary":e.primary,"--primary-foreground":e.primaryForeground,"--secondary":e.secondary,"--secondary-foreground":e.secondaryForeground,"--muted":e.muted,"--muted-foreground":e.mutedForeground,"--accent":e.accent,"--accent-foreground":e.accentForeground,"--destructive":e.destructive,"--destructive-foreground":e.destructiveForeground,"--border":e.border,"--input":e.input,"--ring":e.ring,"--success":e.success,"--warning":e.warning,"--info":e.info,"--highlight":e.highlight,"--destructive-soft":e.destructiveSoft,"--destructive-deep":e.destructiveDeep,"--success-soft":e.successSoft,"--success-deep":e.successDeep,"--warning-soft":e.warningSoft,"--warning-deep":e.warningDeep,"--info-soft":e.infoSoft,"--info-deep":e.infoDeep,"--highlight-soft":e.highlightSoft,"--highlight-deep":e.highlightDeep}}function Ii(e,t){let o=e.colors[t],a={...mb(o),...Di("neutral",e.ramps.neutral),...Di("primary",e.ramps.primary),...Di("accent",e.ramps.accent),"--chart-1":e.chart[1],"--chart-2":e.chart[2],"--chart-3":e.chart[3],"--chart-4":e.chart[4],"--chart-5":e.chart[5],...gb(e),"--font-sans":e.typography.fontSans,"--font-mono":e.typography.fontMono,"--font-display":e.typography.fontDisplay,"--font-heading-weight":String(e.typography.headingWeight),"--font-body-weight":String(e.typography.bodyWeight),"--font-heading-tracking":e.typography.headingTracking,"--font-body-stretch":e.typography.bodyStretch??"normal","--font-display-stretch":e.typography.displayStretch??"normal","--text-display":e.typography.scale.display,"--text-h1":e.typography.scale.h1,"--text-h2":e.typography.scale.h2,"--text-h3":e.typography.scale.h3,"--text-h4":e.typography.scale.h4,"--text-h5":e.typography.scale.h5,"--text-h6":e.typography.scale.h6,"--text-body":e.typography.scale.body,"--text-body-sm":e.typography.scale.bodySm,"--radius":e.radius.base,"--gds-radius-sm":e.radius.sm,"--gds-radius-md":e.radius.md,"--gds-radius-lg":e.radius.lg,"--gds-radius-xl":e.radius.xl,"--gds-radius-2xl":e.radius["2xl"],"--gds-radius-full":e.radius.full,"--gds-density":String(e.spacing.densityFactor),"--spacing":e.spacing.unit??"0.25rem","--gds-shadow-sm":e.effects.shadows.sm,"--gds-shadow-md":e.effects.shadows.md,"--gds-shadow-lg":e.effects.shadows.lg,"--gds-shadow-xl":e.effects.shadows.xl,"--gds-shadow-2xl":e.effects.shadows["2xl"],"--gds-shadow-inner":e.effects.shadows.inner,"--gds-transition-fast":e.effects.motion.fast,"--gds-transition-base":e.effects.motion.base,"--gds-transition-slow":e.effects.motion.slow,"--gds-transition-slower":e.effects.motion.slower,"--gds-border-width":e.effects.borderWidth};if(e.typography.namedScale)for(let[n,i]of Object.entries(e.typography.namedScale))a[`--text-${n}`]=i.size,a[`--text-${n}--line-height`]=i.lineHeight;let r=[["primary",e.ramps.primary],["accent",e.ramps.accent],["neutral",e.ramps.neutral],["success",e.roleRamps?.success],["warning",e.roleRamps?.warning],["info",e.roleRamps?.info],["highlight",e.roleRamps?.highlight],["destructive",e.roleRamps?.destructive]];for(let[n,i]of r)if(i)for(let c of Mo)a[`--gds-${n}-${c}`]=i[c];return a}function gb(e){let t=c=>parseFloat(c.trim().split(/\s+/)[2]??"0"),o=c=>(c%360+360)%360,a=t(e.ramps.primary[500]),r=t(e.ramps.accent[500]),n=[a,r,a+45,r+60,a+150,r-75,a+210,r+165].map(o),i={};return n.forEach((c,s)=>{let l=(.68+s%3*.02).toFixed(3);i[`--brand-${s+1}`]=`${l} 0.200 ${c.toFixed(2)}`;}),i}function Di(e,t){let o={};for(let a of Mo)o[`--ramp-${e}-${a}`]=t[a];return o}var Ai="gds-theme-fonts";function Ap(e){return !e||e.length===0?"":e.map(t=>{let o=t.format?`url("${t.url}") format("${t.format}")`:`url("${t.url}")`;return ["@font-face {",` font-family: "${t.family.replace(/"/g,"")}";`,` src: ${o};`,` font-weight: ${t.weight??"100 900"};`,` font-stretch: ${t.stretch??"50% 200%"};`,` font-style: ${t.style??"normal"};`," font-display: swap;","}"].join(`
|
|
123
123
|
`)}).join(`
|
|
124
|
-
`)}function
|
|
125
|
-
`)}function
|
|
126
|
-
`)}function
|
|
124
|
+
`)}function Ip(e,t=typeof document>"u"?void 0:document){if(!t)return;let o=Ap(e),a=t.getElementById(Ai);if(!o){a?.remove();return}a||(a=t.createElement("style"),a.id=Ai,t.head.appendChild(a)),a.textContent!==o&&(a.textContent=o);}function Sn(e,t){if(typeof document>"u")return;let o=document.documentElement,a=Ii(e,t);for(let[r,n]of Object.entries(a))o.style.setProperty(r,n);Ip(e.typography.fontFaces,document),o.setAttribute("data-grade-theme",e.id),o.setAttribute("data-mode",t),o.setAttribute("data-button-shape",e.components.buttonShape??"default"),o.setAttribute("data-input-style",e.components.inputStyle??"outlined"),o.setAttribute("data-card-style",e.components.cardStyle??"flat");}function Cr(e){if(typeof document>"u")return "";let t=document.createElement("span");t.style.color=`oklch(${e})`,t.style.position="absolute",t.style.visibility="hidden",document.body.appendChild(t);let o=getComputedStyle(t).color;document.body.removeChild(t);let a=o.match(/\d+/g);if(!a||a.length<3)return "";let[r,n,i]=a.slice(0,3).map(Number);return "#"+[r,n,i].map(c=>Math.max(0,Math.min(255,c)).toString(16).padStart(2,"0")).join("").toUpperCase()}function fb(e){let t=e.trim().split(/\s+/);if(t.length<3)return {oklch:e,hex:""};let[o,a,r]=t.map(Number),n=`${o.toFixed(3)} ${a.toFixed(3)} ${Math.round(r)}`,i=Cr(e);return {oklch:n,hex:i}}function Hi(e,t,o){let a=[`### ${e} ramp (hue ${Math.round(o)}\xB0)`,"","| Step | OKLCH | Hex |","|------|-------|-----|"];for(let r of Mo){let{oklch:n,hex:i}=fb(t[r]);a.push(`| ${r} | \`${n}\` | \`${i||"\u2014"}\` |`);}return a.join(`
|
|
125
|
+
`)}function Hp(e,t){let o=[`### ${e}`,"","| Token | Usage | Light (hex) | Dark (hex) |","|-------|-------|-------------|------------|"];for(let a of t){let r=Cr(a.light)||"\u2014",n=Cr(a.dark)||"\u2014";o.push(`| \`--${a.token}\` | ${a.usage} | \`${r}\` (\`${a.light}\`) | \`${n}\` (\`${a.dark}\`) |`);}return o.join(`
|
|
126
|
+
`)}function Fp(e){return !e||e.input==null?"{}":JSON.stringify(e.input,null,2)??"{}"}function zp(e){let{input:t,ramps:o,colors:a,chart:r,typography:n,radius:i,spacing:c,effects:s,components:l}=e,p=t.intensity??"default",m=f=>({token:f,usage:hb[f]??"",light:a.light[f],dark:a.dark[f]}),u=["background","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","border","input","ring"].map(m),g=["destructive","destructiveForeground","success","warning","info","highlight"].map(m),h=[1,2,3,4,5].map(f=>{let b=r[f];return {slot:f,triplet:b,hex:Cr(b)||"\u2014"}});return `# ${e.name} \u2014 Grade Design System Theme
|
|
127
127
|
|
|
128
128
|
> **Portable theme spec.** Paste this entire file into a fresh LLM prompt along with your design brief. The model will have everything it needs to produce UI that matches this exact theme \u2014 colors, typography, spacing, shapes, and the "feel" we're after.
|
|
129
129
|
|
|
@@ -133,7 +133,7 @@ ${o.map(([n,i])=>{let c=i.theme?.[r]||i.color;return c?` --color-${n}: ${c};`:n
|
|
|
133
133
|
- **ID**: \`${t.id}\`
|
|
134
134
|
${t.description?`- **Description**: ${t.description}
|
|
135
135
|
`:""}- **Hues**: neutral \`${t.hues.neutral}\xB0\` \xB7 primary \`${t.hues.primary}\xB0\` \xB7 accent \`${t.hues.accent}\xB0\`
|
|
136
|
-
- **Intensity**: \`${
|
|
136
|
+
- **Intensity**: \`${p}\` ${p==="muted"?"(quieter chroma across the board)":p==="vibrant"?"(punchier chroma across the board)":"(balanced)"}
|
|
137
137
|
- **Typography**: ${t.typography.display} display \xB7 ${t.typography.body} body \xB7 ${t.typography.mono} mono \xB7 scale \`${t.typography.scale}\`
|
|
138
138
|
- **Spacing density**: \`${t.spacing.density}\`
|
|
139
139
|
- **Radius style**: \`${t.radius.style}\` (base \`${i.base}\`)
|
|
@@ -153,30 +153,30 @@ A \`ThemeInput\` is a small object (three hues plus a handful of presets). The g
|
|
|
153
153
|
## Full ThemeInput (round-trippable)
|
|
154
154
|
|
|
155
155
|
\`\`\`json
|
|
156
|
-
${
|
|
156
|
+
${Fp(e)}
|
|
157
157
|
\`\`\`
|
|
158
158
|
|
|
159
159
|
## Color ramps
|
|
160
160
|
|
|
161
161
|
Three 11-stop OKLCH ramps, generated from the input hues + chromas + global intensity. Every color elsewhere in the theme resolves back to one of these stops.
|
|
162
162
|
|
|
163
|
-
${
|
|
163
|
+
${Hi("Neutral",o.neutral,t.hues.neutral)}
|
|
164
164
|
|
|
165
|
-
${
|
|
165
|
+
${Hi("Primary",o.primary,t.hues.primary)}
|
|
166
166
|
|
|
167
|
-
${
|
|
167
|
+
${Hi("Accent",o.accent,t.hues.accent)}
|
|
168
168
|
|
|
169
169
|
## Semantic tokens (hue-derived)
|
|
170
170
|
|
|
171
171
|
Purpose-based tokens drawn from the ramps. Two values per token \u2014 the generator produces them for all four brightness modes, but only light + dark are shown here for brevity.
|
|
172
172
|
|
|
173
|
-
${
|
|
173
|
+
${Hp("Core semantic tokens",u)}
|
|
174
174
|
|
|
175
175
|
## Fixed semantic tokens (not hue-derived)
|
|
176
176
|
|
|
177
177
|
Status colors stay consistent across themes so users always read green as success, red as destructive, etc. Accessibility wins over brand cohesion.
|
|
178
178
|
|
|
179
|
-
${
|
|
179
|
+
${Hp("Status colors",g)}
|
|
180
180
|
|
|
181
181
|
## Chart palette
|
|
182
182
|
|
|
@@ -184,7 +184,7 @@ ${Nm("Status colors",f)}
|
|
|
184
184
|
|
|
185
185
|
| Slot | OKLCH | Hex |
|
|
186
186
|
|------|-------|-----|
|
|
187
|
-
${h.map(
|
|
187
|
+
${h.map(f=>`| \`--chart-${f.slot}\` | \`${f.triplet}\` | \`${f.hex}\` |`).join(`
|
|
188
188
|
`)}
|
|
189
189
|
|
|
190
190
|
## Typography
|
|
@@ -255,8 +255,8 @@ Every color is stored as a bare \`L C H\` OKLCH triplet and wrapped at call time
|
|
|
255
255
|
|
|
256
256
|
\`\`\`css
|
|
257
257
|
:root {
|
|
258
|
-
--primary: ${
|
|
259
|
-
--background: ${
|
|
258
|
+
--primary: ${a.light.primary};
|
|
259
|
+
--background: ${a.light.background};
|
|
260
260
|
}
|
|
261
261
|
\`\`\`
|
|
262
262
|
|
|
@@ -305,7 +305,7 @@ Every component accepts a \`className\` for layout tweaks. Variants are passed v
|
|
|
305
305
|
|
|
306
306
|
When generating UI in the ${e.name} theme, match this character:
|
|
307
307
|
|
|
308
|
-
${
|
|
308
|
+
${bb(e)}
|
|
309
309
|
|
|
310
310
|
## Instructions for the generating LLM
|
|
311
311
|
|
|
@@ -324,7 +324,7 @@ To recreate this theme in code:
|
|
|
324
324
|
\`\`\`ts
|
|
325
325
|
import { generateTheme, applyThemeToRoot, type ThemeInput } from "@gradeui/ui";
|
|
326
326
|
|
|
327
|
-
const input: ThemeInput = ${
|
|
327
|
+
const input: ThemeInput = ${Fp(e).replace(/\n/g,`
|
|
328
328
|
`)};
|
|
329
329
|
|
|
330
330
|
const theme = generateTheme(input);
|
|
@@ -333,11 +333,11 @@ applyThemeToRoot(theme, "light"); // or "dark" / "superLight" / "superDark"
|
|
|
333
333
|
|
|
334
334
|
---
|
|
335
335
|
*Generated from Grade Design System v1 \xB7 ${new Date().toISOString()}*
|
|
336
|
-
`}var
|
|
337
|
-
`)}function
|
|
336
|
+
`}var hb={background:"Page / body background",foreground:"Primary text",card:"Elevated surface background",cardForeground:"Text on cards",popover:"Floating menu background",popoverForeground:"Text inside floating menus",primary:"Primary actions, links, default button",primaryForeground:"Text on primary-tinted fills",secondary:"Secondary surfaces + quiet buttons",secondaryForeground:"Text on secondary surfaces",muted:"Subtle surfaces (hover states, skeletons)",mutedForeground:"Secondary / less-important text",accent:"Highlights, hover accents",accentForeground:"Text on accent surfaces",border:"Default borders",input:"Form input borders",ring:"Focus ring color",destructive:"Destructive actions, errors",destructiveForeground:"Text on destructive surfaces",success:"Success states",warning:"Warning states",info:"Informational states",highlight:"Emphasis, new features, callouts"};function bb(e){let t=[],{input:o,components:a}=e;o.intensity==="muted"?t.push("- **Quiet and restrained.** Avoid heavy saturation, glowing effects, or loud contrast jumps. Let whitespace do the work."):o.intensity==="vibrant"?t.push("- **Loud and confident.** Primary color wants to lead. Use it on hero CTAs, key metrics, empty states. Don't be shy."):t.push("- **Balanced.** Neither shouty nor sleepy \u2014 a workhorse feel suited to product interfaces."),o.spacing.density==="roomy"?t.push("- **Generous spacing.** Stretch things out \u2014 reach for `gap-6`, `gap-8`, `p-6`, `p-8`. Airy is the vibe."):o.spacing.density==="tight"?t.push("- **Dense layouts.** Pack information in \u2014 `gap-2`, `gap-3`, `p-3`, `p-4`. Scan-friendly dashboard energy."):t.push("- **Standard density.** Use Tailwind's default spacing ladder."),o.radius.style==="pill"?t.push("- **Fully rounded.** Controls are pill-shaped. Use `rounded-full` on custom chips / pills too."):o.radius.style==="sharp"?t.push("- **Square corners.** Zero radius everywhere \u2014 very architectural. Do not add curves."):o.radius.style==="round"?t.push("- **Rounded and friendly.** Corner radius is noticeable (\u224814px base). Avoid sharp edges."):t.push("- **Standard rounded corners.**");let r=o.typography.display;return r==="fraunces"||r==="instrumentSerif"||r==="sourceSerif"?t.push("- **Editorial serif headings.** Treat headings like magazine titles \u2014 give them space and weight. Serifs reward larger sizes."):(r==="geist"||r==="inter")&&t.push("- **Modern technical sans.** Clean, functional, neutral. Good for product UIs."),a.cardStyle==="outlined"?t.push("- **Cards are outlined**, not shadowed. Rely on borders + spacing for hierarchy."):a.cardStyle==="elevated"?t.push("- **Cards have real elevation.** Use shadows to stack content visually."):a.cardStyle==="glass"&&t.push("- **Glass / frosted cards.** Use translucent surfaces over background imagery or gradients."),a.buttonShape==="pill"&&t.push("- **Buttons are pills** \u2014 don't override with square corners."),t.join(`
|
|
337
|
+
`)}function Fi(e){if(typeof window>"u"||typeof document>"u")return;let t=zp(e),o=new Blob([t],{type:"text/markdown;charset=utf-8"}),a=URL.createObjectURL(o),r=document.createElement("a");r.href=a,r.download=`grade-theme-${e.input.id}.md`,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(a);}var go=Object.fromEntries(kn.map(e=>[e.id,pa(e)])),Oa=Rr.id;function ua(e){if(e in go)return go[e];let t=Vi(e);if(t)return pa(t)}function zi(){return [...Object.values(go),...Op()]}var Vp="grade-user-themes";function Rn(){if(typeof localStorage>"u")return {};try{let e=localStorage.getItem(Vp);if(!e)return {};let t=JSON.parse(e);return t&&typeof t=="object"?t:{}}catch{return {}}}function Bp(e){if(!(typeof localStorage>"u"))try{localStorage.setItem(Vp,JSON.stringify(e));}catch{}}function Op(){return Object.values(Rn()).map(pa)}function Vi(e){return Rn()[e]}function Cn(e){let t=Rn();return t[e.id]=e,Bp(t),pa(e)}function Bi(e){if(e in go)return;let t=Rn();delete t[e],Bp(t);}function vb(e,t,o){let a=go[e]?.input??Vi(e);if(!a)return;let r={...a,id:t,name:o};return Cn(r),r}var Oi="grade-theme",Tn="grade-mode",Gp=["superLight","light","dark","superDark"],_p=new Set(["dark","superDark"]),yb=`
|
|
338
338
|
(function() {
|
|
339
339
|
try {
|
|
340
|
-
var mode = localStorage.getItem('${
|
|
340
|
+
var mode = localStorage.getItem('${Tn}');
|
|
341
341
|
var valid = ['superLight','light','dark','superDark'];
|
|
342
342
|
if (!mode || valid.indexOf(mode) === -1) {
|
|
343
343
|
mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
@@ -346,28 +346,28 @@ applyThemeToRoot(theme, "light"); // or "dark" / "superLight" / "superDark"
|
|
|
346
346
|
document.documentElement.classList.add('dark');
|
|
347
347
|
}
|
|
348
348
|
document.documentElement.setAttribute('data-mode', mode);
|
|
349
|
-
var themeId = localStorage.getItem('${
|
|
349
|
+
var themeId = localStorage.getItem('${Oi}');
|
|
350
350
|
if (themeId) document.documentElement.setAttribute('data-grade-theme', themeId);
|
|
351
351
|
} catch(e) {}
|
|
352
352
|
})();
|
|
353
|
-
`,Xs=w.createContext(null);function _0({children:e,defaultTheme:t=fn,defaultMode:o="light"}){let[r,a]=w.useState(t),[n,i]=w.useState(o),[c,s]=w.useState(0);w.useEffect(()=>{try{let g=localStorage.getItem(Zs);g&&Ir(g)&&a(g);let b=localStorage.getItem(vi);if(b&&_m.includes(b))i(b);else if(typeof window<"u"){let v=window.matchMedia("(prefers-color-scheme: dark)").matches;i(v?"dark":"light");}}catch{}},[]),w.useEffect(()=>{let g=Ir(r)??Ir(fn);g&&(gi(g,n),typeof document<"u"&&document.documentElement.classList.toggle("dark",Hm.has(n)));},[r,n,c]),w.useEffect(()=>{if(typeof window>"u")return;let g=window.matchMedia("(prefers-color-scheme: dark)"),b=v=>{try{if(localStorage.getItem(vi))return}catch{return}i(v.matches?"dark":"light");};return g.addEventListener("change",b),()=>g.removeEventListener("change",b)},[]);let l=w.useCallback(g=>{a(g);try{localStorage.setItem(Zs,g);}catch{}},[]),d=w.useCallback(g=>{i(g);try{localStorage.setItem(vi,g);}catch{}},[]),m=w.useCallback(g=>{bi(g),s(b=>b+1),l(g.id);},[l]),u=w.useCallback(g=>{g in Co||(Ys(g),s(b=>b+1),a(b=>b===g?fn:b));},[]),f=w.useCallback(()=>{s(g=>g+1);},[]),h=w.useMemo(()=>{let g=Ir(r)??Ir(fn);return {theme:g,themeId:g.id,mode:n,isDark:Hm.has(n),setThemeId:l,setMode:d,themes:Ks(),saveAndActivate:m,deleteTheme:u,refresh:f}},[r,n,c,l,d,m,u,f]);return w.createElement(Xs.Provider,{value:h},e)}function Js(){let e=w.useContext(Xs);if(!e)throw new Error("useGradeTheme must be used inside <GradeThemeProvider>. Wrap your app (typically in app/layout.tsx).");return e}function Hr(){return w.useContext(Xs)}var Qs=w.createContext(null);function Fm(){return w.useContext(Qs)}var J0={maplibre:()=>Promise.resolve().then(()=>($m(),Gm)).then(e=>e.createMaplibreAdapter),mapbox:()=>Promise.resolve().then(()=>(Km(),jm)).then(e=>e.createMapboxAdapter),google:()=>Promise.resolve().then(()=>(Zm(),Ym)).then(e=>e.createGoogleAdapter),leaflet:()=>Promise.resolve().then(()=>(ef(),Qm)).then(e=>e.createLeafletAdapter)},Q0=500,el=w.forwardRef(function(t,o){let{center:r,zoom:a,bounds:n,appearance:i="auto",interactive:c=true,tools:s="auto",toolsPosition:l="top-left",hoveredId:d,onHoveredIdChange:m,onLoad:u,onError:f,className:h,style:g,children:b,...v}=t,S=globalThis.__gradeMapProvider??v.provider??"leaflet",x=v.styleUrl,y=v.tilerKey,R=v.accessToken,L=v.apiKey,D=v.mapId,I=w.useRef(null),E=w.useRef(null),H=w.useRef(new globalThis.Map),z=w.useRef(null),[W,Z]=w.useState(false),O=w.useRef(m),B=w.useRef(f),T=w.useRef(u);w.useEffect(()=>{O.current=m,B.current=f,T.current=u;});let _=Hr(),ae=_!=null,[te,X]=w.useState(false);w.useEffect(()=>{if(ae||typeof document>"u")return;let le=document.documentElement,A=()=>X(le.classList.contains("dark"));A();let oe=new MutationObserver(A);return oe.observe(le,{attributes:true,attributeFilter:["class"]}),()=>oe.disconnect()},[ae]);let re=_?.isDark??te,he=i==="auto"?re?"dark":"light":i;w.useEffect(()=>{let le=false,A=I.current;if(!A)return;let oe=i==="auto"?re?"dark":"light":i;return (async()=>{try{let J=await J0[S]();if(le)return;let ke=await J(A,{center:r,zoom:a,bounds:n,appearance:oe,interactive:c,tools:s,toolsPosition:l,styleUrl:x,tilerKey:y,accessToken:R,apiKey:L,mapId:D},{onLoad:()=>{},onError:Q=>B.current?.(Q),onMarkerHover:Q=>O.current?.(Q),onMarkerClick:()=>{}});if(le){ke.destroy();return}E.current=ke,Z(!0),T.current?.(tf(E,H));}catch(J){if(le)return;J?.code||B.current?.({code:"provider-init-failed",message:J?.message??"Map init failed",cause:J});}})(),()=>{le=true,E.current?.destroy(),E.current=null,Z(false),H.current.clear(),z.current=null;}},[S,x,R,L,D,y,s,l]),w.useEffect(()=>{E.current?.setAppearance(he);},[he]),w.useEffect(()=>{E.current?.setInteractive(c);},[c]),w.useEffect(()=>{E.current&&(n?E.current.setBounds(n[0],n[1]):(E.current.setCenter(r),E.current.setZoom(a)));},[r[0],r[1],a,n?.[0]?.[0],n?.[0]?.[1],n?.[1]?.[0],n?.[1]?.[1]]),w.useEffect(()=>{let le=z.current;le&&le!==d&&H.current.get(le)?.setHovered(false),d&&H.current.get(d)?.setHovered(true),z.current=d??null;},[d]),w.useImperativeHandle(o,()=>tf(E,H),[]);let Me=w.useMemo(()=>({registerMarker:(le,A,oe)=>{let J=E.current;if(!J)return null;let ke=J.addMarker(le,A,oe);H.current.set(le,ke),process.env.NODE_ENV!=="production"&&H.current.size===Q0+1&&console.warn(`@gradeui/ui Map: rendering ${H.current.size} markers. DOM markers degrade past ~1k. Consider clustering via the .instance escape hatch.`);let Q=ke.remove;return ke.remove=()=>{Q(),H.current.delete(le),z.current===le&&(z.current=null);},d===le&&ke.setHovered(true),ke}}),[W]);return w.createElement("div",{ref:I,"data-gds-part":"map",className:p("gds-map relative isolate overflow-hidden",h),style:g},w.createElement(Qs.Provider,{value:Me},b))});el.displayName="Map";function tf(e,t){let o=()=>{};return {flyTo:(r,a)=>{let n=e.current;if(!n)return;let i;if(typeof r=="string"){if(i=t.current.get(r)?.coords??null,!i){console.warn(`@gradeui/ui Map.flyTo: no marker registered with id "${r}".`);return}}else i=r;n.flyTo(i,a);},panTo:(r,a)=>e.current?.panTo(r,a)??o(),fitBounds:(r,a)=>e.current?.fitBounds(r,a)??o(),getCenter:()=>e.current?.getCenter()??[0,0],getZoom:()=>e.current?.getZoom()??0,getBounds:()=>e.current?.getBounds()??[[0,0],[0,0]],get instance(){return e.current?.instance??null}}}var tl=w.memo(function({id:t,at:o,anchor:r="bottom",className:a,children:n,onClick:i}){let c=Fm(),[s,l]=w.useState(null),d=w.useRef(null),m=w.useRef(i);return w.useEffect(()=>{m.current=i;}),w.useEffect(()=>{if(!c)return;let u=c.registerMarker(t,o,r);if(u){d.current=u,l(u.element);let f=h=>{m.current?.({id:t,coords:u.coords,native:h});};return u.element.addEventListener("click",f),()=>{u.element.removeEventListener("click",f),u.remove(),d.current=null,l(null);}}},[c,t]),w.useEffect(()=>{d.current?.setPosition(o);},[o[0],o[1]]),s?createPortal(w.createElement("div",{"data-gds-part":"map-marker-content",className:p("pointer-events-auto",a)},n),s):null});tl.displayName="MapMarker";var gw={video:"aspect-video",standard:"aspect-[4/3]",square:"aspect-square",portrait:"aspect-[3/4]",wide:"aspect-[21/9]",auto:""},hw={video:"16 / 9",standard:"4 / 3",square:"1 / 1",portrait:"3 / 4",wide:"21 / 9",auto:"auto"},bw={none:"0",sm:"var(--radius, 0.25rem)",md:"calc(var(--radius, 0.375rem) * 1.25)",lg:"calc(var(--radius, 0.5rem) * 1.5)",xl:"calc(var(--radius, 0.75rem) * 2)"},vw={album:Disc3,"tv-show":Tv,movie:Clapperboard,game:Gamepad2,book:Book,portrait:User,landscape:Mountain,poster:Film,product:Package,food:UtensilsCrossed,video:Video,audio:Music,embed:Code2,"3d":Box,generic:Image},yw={album:"square","tv-show":"portrait",movie:"portrait",game:"portrait",book:"portrait",portrait:"portrait",landscape:"wide",poster:"portrait",product:"square",food:"square",video:"video",audio:"video",embed:"video","3d":"square",generic:"video"};function xw(e){if(!e)return null;switch(e.kind){case "album":return `album:${e.artist}|${e.title}|${e.year??""}`;case "tv-show":return `tv-show:${e.title}|${e.year??""}`;case "movie":return `movie:${e.title}|${e.year??""}`;case "game":return `game:${e.title}`;case "book":return `book:${e.isbn??""}|${e.title??""}|${e.author??""}`;case "poster":return `poster:${e.title}|${e.year??""}`;case "portrait":return `portrait:${e.name??""}|${e.role??""}`;case "landscape":return `landscape:${e.location??""}|${e.mood??""}`;case "product":return `product:${e.brand??""}|${e.name??""}`;case "food":return `food:${e.dish??""}|${e.cuisine??""}`;case "generic":return `generic:${e.prompt}`;default:return `${e.kind}:`}}function ww(e){let t=xw(e),[o,r]=w.useState(0);return w.useEffect(()=>{if(typeof window>"u")return;let a=()=>r(n=>n+1);return window.addEventListener("grade:media-pending-updated",a),()=>window.removeEventListener("grade:media-pending-updated",a)},[]),w.useEffect(()=>{},[o]),!t||typeof window>"u"?false:!!window.__gradeMediaPending?.[t]}function Sw(e){if(!e)return "";let t=/^(the|a|an|and|for|by|of|in|on|at|to)$/i,o=e.trim().split(/\s+/).filter(r=>r&&!t.test(r));return o.length===0?e.replace(/\s+/g,"").slice(0,2).toUpperCase():o.length===1?o[0].slice(0,2).toUpperCase():(o[0][0]+o[1][0]).toUpperCase()}function Cw(e){return e<64?"sm":e>=160?"lg":"md"}var ko=w.forwardRef(({className:e,aspect:t,radius:o="lg",border:r=false,loading:a=false,onVisibilityChange:n,fallback:i,emptyState:c="auto",hint:s="generic",alt:l,source:d,src:m,glyph:u,overlay:f,instanceId:h,style:g,children:b,...v},C)=>{let S=w.useRef(null);w.useImperativeHandle(C,()=>S.current);let x=s,y=t,R=o,L=r,D=a,I=l,E=m,H=c,z=y??yw[x],W=y!=null;w.useEffect(()=>{if(!n||!S.current)return;let A=S.current,oe=new IntersectionObserver(([J])=>n(J.isIntersecting),{threshold:.05});return oe.observe(A),()=>oe.disconnect()},[n]);let Z=E,[O,B]=w.useState(false);w.useEffect(()=>{B(false);},[Z]);let T=O?void 0:Z,_=!b&&H!=="none",[ae,te]=w.useState("md");w.useEffect(()=>{if(!_)return;let A=S.current;if(!A)return;let oe=new ResizeObserver(([J])=>{let ke=J.contentRect.width;te(Cw(ke));});return oe.observe(A),()=>oe.disconnect()},[_]);let X=w.useMemo(()=>Sw(I),[I]),re=vw[x]??Image,he=H==="auto"||H==="icon",Me=w.useMemo(()=>d?JSON.stringify(d):void 0,[d]),le=ww(d)&&!T;return w.createElement("div",{ref:S,"data-gds-part":"media-surface","data-media-hint":x,"data-media-source-kind":d?.kind,"data-media-source":Me,"data-media-alt":I,"data-gds-instance-id":h,className:p("gds-media-surface relative w-full overflow-hidden",!W&&gw[z],L&&"border border-border",e),style:{...W?{aspectRatio:hw[z]}:{},borderRadius:`var(--gds-media-radius, ${bw[R]})`,...g},...v},_&&w.createElement("div",{"data-gds-part":"media-surface-placeholder","data-tier":ae,"data-filled":T?"":void 0,"data-fill-pending":le||void 0,className:p("absolute inset-0 z-0 flex flex-col items-center justify-center gap-2 pointer-events-none px-3 text-center",le&&"gds-aura-shimmer"),style:{position:"absolute",background:"var(--gds-media-placeholder-bg)",color:"var(--gds-media-placeholder-fg)",...le?{"--aura-shimmer-duration":"1400ms","--aura-shimmer-delay-between":"400ms"}:null},"aria-hidden":true},he?ae==="sm"?X?w.createElement("span",{className:"font-semibold text-sm tracking-tight"},X):w.createElement(re,{className:"h-1/2 w-1/2 max-h-6 max-w-6"}):ae==="md"?w.createElement(w.Fragment,null,u??w.createElement(re,{className:"h-1/3 w-1/3 max-h-10 max-w-10"})):w.createElement(w.Fragment,null,u??w.createElement(re,{className:"h-1/4 w-1/4 max-h-12 max-w-12"}),I&&w.createElement("span",{className:"text-xs leading-snug line-clamp-2 max-w-[80%]","data-gds-part":"media-surface-caption"},I)):H),(T||b)&&w.createElement("div",{"data-gds-part":"media-surface-content",className:"absolute inset-0 z-[1]"},T&&w.createElement("img",{src:T,alt:I??"",onError:()=>B(true),className:"absolute inset-0 h-full w-full object-cover","data-gds-part":"media-surface-img"}),b),D&&w.createElement("div",{className:"absolute inset-0 z-[2] flex items-center justify-center bg-muted animate-pulse","aria-hidden":true},i),f&&w.createElement("div",{"data-gds-part":"media-surface-overlay",className:"absolute inset-0 z-10"},f))});ko.displayName="MediaSurface";var rf=w.forwardRef(({src:e,controls:t=true,autoPlay:o=false,loop:r=false,muted:a,pauseOffscreen:n=true,aspect:i="video",radius:c="lg",border:s=false,poster:l,label:d,className:m,style:u,playbackRate:f=1,objectFit:h="cover"},g)=>{let b=w.useRef(null),v=Yo(),[C,S]=w.useState(!!l);w.useImperativeHandle(g,()=>b.current);let x=a??o,y=o&&!v;w.useEffect(()=>{b.current&&(b.current.playbackRate=f);},[f]),w.useEffect(()=>{S(!!l);},[l]);let R=w.useCallback(L=>{!n||!b.current||(L&&y?b.current.play().catch(()=>{}):b.current.pause());},[n,y]);return w.createElement(ko,{aspect:i,radius:c,border:s,"aria-label":d,className:m,style:u,onVisibilityChange:n?R:void 0},w.createElement("video",{ref:b,src:e,controls:t,autoPlay:y,loop:r,muted:x,playsInline:true,preload:y?"auto":"metadata",onPlaying:()=>S(false),className:p("w-full h-full",h==="cover"&&"object-cover",h==="contain"&&"object-contain",h==="fill"&&"object-fill")},"Your browser does not support the video tag."),l&&C&&w.createElement("img",{src:l,alt:"","aria-hidden":"true",loading:"lazy",decoding:"async","data-gds-part":"video-poster",className:p("absolute inset-0 w-full h-full pointer-events-none transition-opacity duration-200",h==="cover"&&"object-cover",h==="contain"&&"object-contain",h==="fill"&&"object-fill")}))});rf.displayName="VideoPlayer";var nf=w.forwardRef(({src:e,controls:t=false,autoPlay:o=true,loop:r=true,pauseOffscreen:a=true,aspect:n="square",radius:i="lg",border:c=false,poster:s,label:l,className:d,style:m,stateMachines:u,artboard:f,fit:h="contain",stateMachineInputs:g},b)=>{let v=Yo(),[C,S]=w.useState(null),[x,y]=w.useState(null);return w.useEffect(()=>{let R=false;return import('@rive-app/react-canvas').then(L=>{R||S(L);}).catch(()=>{R||y("Rive runtime not installed. Run `npm install @rive-app/react-canvas`.");}),()=>{R=true;}},[]),w.createElement(ko,{ref:b,aspect:n,radius:i,border:c,"aria-label":l,className:d,style:m},x?w.createElement("div",{className:"flex items-center justify-center h-full text-sm text-muted-foreground p-4 text-center"},x):C&&e?w.createElement(Tw,{Mod:C,src:e,stateMachines:u,artboard:f,fit:h,stateMachineInputs:g,autoPlay:o&&!v,loop:r,pauseOffscreen:a,controls:t,poster:s}):s&&w.createElement("img",{src:s,alt:"",className:"w-full h-full object-contain"}))});nf.displayName="RivePlayer";function Tw({Mod:e,src:t,stateMachines:o,artboard:r,fit:a,autoPlay:n,loop:i,pauseOffscreen:c,controls:s,poster:l}){let{useRive:d,Layout:m,Fit:u,Alignment:f,EventType:h}=e,g={contain:u.Contain,cover:u.Cover,fill:u.Fill,fitWidth:u.FitWidth,fitHeight:u.FitHeight,none:u.None},{rive:b,RiveComponent:v}=d({src:t,stateMachines:o,artboard:r,autoplay:n,layout:new m({fit:g[a],alignment:f.Center})}),[C,S]=w.useState(n);w.useEffect(()=>{if(!b||!i)return;let y=()=>{b.play();};return b.on(h.Stop,y),()=>{b.off(h.Stop,y);}},[b,i,h]),w.useEffect(()=>{if(!c||!b)return;let y=b.canvas;if(!y)return;let R=new IntersectionObserver(([L])=>{L.isIntersecting&&n?b.play():b.pause();},{threshold:.05});return R.observe(y),()=>R.disconnect()},[b,c,n]);let x=()=>{b&&(C?(b.pause(),S(false)):(b.play(),S(true)));};return w.createElement(w.Fragment,null,w.createElement(v,{className:"w-full h-full"}),!b&&l&&w.createElement("img",{src:l,alt:"",className:"absolute inset-0 w-full h-full object-contain pointer-events-none"}),s&&w.createElement("div",{className:p("absolute inset-0 flex items-end justify-end p-2","opacity-0 hover:opacity-100 transition-opacity","bg-gradient-to-t from-black/40 to-transparent")},w.createElement(Ie,{iconOnly:true,variant:"secondary",onClick:x},C?w.createElement(Pause,{className:"h-4 w-4"}):w.createElement(Play,{className:"h-4 w-4"}))))}var Pw={sm:20,md:28,lg:40,xl:56},Mw={horizontal:["horizontal","square","icon"],square:["square","icon","horizontal"],icon:["icon","square","horizontal"]};function Nw(e,t,o,r){for(let a of Mw[t]){let n=e[a];if(!n)continue;let i=o==="dark"?n.dark??n.light:n.light??n.dark,c=r?n.mono??i:i??n.mono;if(c!=null)return c}return null}var Ew=w.forwardRef(function({sources:t={},lockup:o="horizontal",mode:r="light",mono:a=false,size:n="md",label:i,decorative:c=false,href:s,className:l,style:d,...m},u){let f=typeof n=="number"?n:Pw[n],h=Nw(t,o,r,a),g=c?{"aria-hidden":true}:i?s?{}:{role:"img","aria-label":i}:{},b=h??w.createElement(Lw,{label:i}),v=w.createElement("span",{className:p("gds-logo inline-flex shrink-0 select-none items-center","[&_img]:h-full [&_img]:w-auto [&_svg]:h-full [&_svg]:w-auto",l),style:{height:f,...d},"data-gds-part":"logo","data-gds-lockup":o,"data-gds-mode":r,...s?{}:g,...s?{}:m},b);return s?w.createElement("a",{ref:u,href:s,"aria-label":c?void 0:i,className:"inline-flex",...c?{"aria-hidden":true}:{},...m},v):w.cloneElement(v,{ref:u})});function Lw({label:e}){return w.createElement("svg",{viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e?{}:{"aria-hidden":true}},w.createElement("path",{d:"M28 0L32 4V10L26 4H6L4 6V26L6 28H16L26 18V24L18 32H4L0 28V4L4 0H28ZM32 32H28V18H16V14H32V32Z",fill:"currentColor"}))}var af="M28 0L32 4V10L26 4H6L4 6V26L6 28H16L26 18V24L18 32H4L0 28V4L4 0H28ZM32 32H28V18H16V14H32V32Z",Aw={sm:16,md:24,lg:32,xl:48},sf=w.forwardRef(({size:e="md",label:t="Loading\u2026",showLabel:o=false,className:r,style:a,...n},i)=>{let c=typeof e=="number"?e:Aw[e],s=w.useId().replace(/[^a-zA-Z0-9-]/g,"");return w.createElement("div",{ref:i,"data-gds-part":"grade-loader",role:"status","aria-label":t||void 0,className:p("gds-grade-loader inline-flex flex-col items-center gap-2",r),style:a,...n},w.createElement("style",null,`
|
|
353
|
+
`,_i=y.createContext(null);function xb({children:e,defaultTheme:t=Oa,defaultMode:o="light"}){let[a,r]=y.useState(t),[n,i]=y.useState(o),[c,s]=y.useState(0);y.useEffect(()=>{try{let f=localStorage.getItem(Oi);f&&ua(f)&&r(f);let b=localStorage.getItem(Tn);if(b&&Gp.includes(b))i(b);else if(typeof window<"u"){let v=window.matchMedia("(prefers-color-scheme: dark)").matches;i(v?"dark":"light");}}catch{}},[]),y.useEffect(()=>{let f=ua(a)??ua(Oa);f&&(Sn(f,n),typeof document<"u"&&document.documentElement.classList.toggle("dark",_p.has(n)));},[a,n,c]),y.useEffect(()=>{if(typeof window>"u")return;let f=window.matchMedia("(prefers-color-scheme: dark)"),b=v=>{try{if(localStorage.getItem(Tn))return}catch{return}i(v.matches?"dark":"light");};return f.addEventListener("change",b),()=>f.removeEventListener("change",b)},[]);let l=y.useCallback(f=>{r(f);try{localStorage.setItem(Oi,f);}catch{}},[]),p=y.useCallback(f=>{i(f);try{localStorage.setItem(Tn,f);}catch{}},[]),m=y.useCallback(f=>{Cn(f),s(b=>b+1),l(f.id);},[l]),u=y.useCallback(f=>{f in go||(Bi(f),s(b=>b+1),r(b=>b===f?Oa:b));},[]),g=y.useCallback(()=>{s(f=>f+1);},[]),h=y.useMemo(()=>{let f=ua(a)??ua(Oa);return {theme:f,themeId:f.id,mode:n,isDark:_p.has(n),setThemeId:l,setMode:p,themes:zi(),saveAndActivate:m,deleteTheme:u,refresh:g}},[a,n,c,l,p,m,u,g]);return y.createElement(_i.Provider,{value:h},e)}function Gi(){let e=y.useContext(_i);if(!e)throw new Error("useGradeTheme must be used inside <GradeThemeProvider>. Wrap your app (typically in app/layout.tsx).");return e}function ma(){return y.useContext(_i)}var Wi=y.createContext(null);function Wp(){return y.useContext(Wi)}var Fb={maplibre:()=>Promise.resolve().then(()=>(Yp(),qp)).then(e=>e.createMaplibreAdapter),mapbox:()=>Promise.resolve().then(()=>(Qp(),Jp)).then(e=>e.createMapboxAdapter),google:()=>Promise.resolve().then(()=>(ou(),tu)).then(e=>e.createGoogleAdapter),leaflet:()=>Promise.resolve().then(()=>(iu(),nu)).then(e=>e.createLeafletAdapter)},zb=500,Ui=y.forwardRef(function(t,o){let{center:a,zoom:r,bounds:n,appearance:i="auto",interactive:c=true,tools:s="auto",toolsPosition:l="top-left",hoveredId:p,onHoveredIdChange:m,onLoad:u,onError:g,className:h,style:f,children:b,...v}=t,x=globalThis.__gradeMapProvider??v.provider??"leaflet",w=v.styleUrl,S=v.tilerKey,C=v.accessToken,M=v.apiKey,I=v.mapId,B=y.useRef(null),z=y.useRef(null),E=y.useRef(new globalThis.Map),W=y.useRef(null),[oe,he]=y.useState(false),Y=y.useRef(m),H=y.useRef(g),R=y.useRef(u);y.useEffect(()=>{Y.current=m,H.current=g,R.current=u;});let F=ma(),re=F!=null,[Z,G]=y.useState(false);y.useEffect(()=>{if(re||typeof document>"u")return;let de=document.documentElement,O=()=>G(de.classList.contains("dark"));O();let ye=new MutationObserver(O);return ye.observe(de,{attributes:true,attributeFilter:["class"]}),()=>ye.disconnect()},[re]);let Q=F?.isDark??Z,Re=i==="auto"?Q?"dark":"light":i;y.useEffect(()=>{let de=false,O=B.current;if(!O)return;let ye=i==="auto"?Q?"dark":"light":i;return (async()=>{try{let pe=await Fb[x]();if(de)return;let He=await pe(O,{center:a,zoom:r,bounds:n,appearance:ye,interactive:c,tools:s,toolsPosition:l,styleUrl:w,tilerKey:S,accessToken:C,apiKey:M,mapId:I},{onLoad:()=>{},onError:xe=>H.current?.(xe),onMarkerHover:xe=>Y.current?.(xe),onMarkerClick:()=>{}});if(de){He.destroy();return}z.current=He,he(!0),R.current?.(su(z,E));}catch(pe){if(de)return;pe?.code||H.current?.({code:"provider-init-failed",message:pe?.message??"Map init failed",cause:pe});}})(),()=>{de=true,z.current?.destroy(),z.current=null,he(false),E.current.clear(),W.current=null;}},[x,w,C,M,I,S,s,l]),y.useEffect(()=>{z.current?.setAppearance(Re);},[Re]),y.useEffect(()=>{z.current?.setInteractive(c);},[c]),y.useEffect(()=>{z.current&&(n?z.current.setBounds(n[0],n[1]):(z.current.setCenter(a),z.current.setZoom(r)));},[a[0],a[1],r,n?.[0]?.[0],n?.[0]?.[1],n?.[1]?.[0],n?.[1]?.[1]]),y.useEffect(()=>{let de=W.current;de&&de!==p&&E.current.get(de)?.setHovered(false),p&&E.current.get(p)?.setHovered(true),W.current=p??null;},[p]),y.useImperativeHandle(o,()=>su(z,E),[]);let Oe=y.useMemo(()=>({registerMarker:(de,O,ye)=>{let pe=z.current;if(!pe)return null;let He=pe.addMarker(de,O,ye);E.current.set(de,He),process.env.NODE_ENV!=="production"&&E.current.size===zb+1&&console.warn(`@gradeui/ui Map: rendering ${E.current.size} markers. DOM markers degrade past ~1k. Consider clustering via the .instance escape hatch.`);let xe=He.remove;return He.remove=()=>{xe(),E.current.delete(de),W.current===de&&(W.current=null);},p===de&&He.setHovered(true),He}}),[oe]);return y.createElement("div",{ref:B,"data-gds-part":"map",className:d("gds-map relative isolate overflow-hidden",h),style:f},y.createElement(Wi.Provider,{value:Oe},b))});Ui.displayName="Map";function su(e,t){let o=()=>{};return {flyTo:(a,r)=>{let n=e.current;if(!n)return;let i;if(typeof a=="string"){if(i=t.current.get(a)?.coords??null,!i){console.warn(`@gradeui/ui Map.flyTo: no marker registered with id "${a}".`);return}}else i=a;n.flyTo(i,r);},panTo:(a,r)=>e.current?.panTo(a,r)??o(),fitBounds:(a,r)=>e.current?.fitBounds(a,r)??o(),getCenter:()=>e.current?.getCenter()??[0,0],getZoom:()=>e.current?.getZoom()??0,getBounds:()=>e.current?.getBounds()??[[0,0],[0,0]],get instance(){return e.current?.instance??null}}}var $i=y.memo(function({id:t,at:o,anchor:a="bottom",className:r,children:n,onClick:i}){let c=Wp(),[s,l]=y.useState(null),p=y.useRef(null),m=y.useRef(i);return y.useEffect(()=>{m.current=i;}),y.useEffect(()=>{if(!c)return;let u=c.registerMarker(t,o,a);if(u){p.current=u,l(u.element);let g=h=>{m.current?.({id:t,coords:u.coords,native:h});};return u.element.addEventListener("click",g),()=>{u.element.removeEventListener("click",g),u.remove(),p.current=null,l(null);}}},[c,t]),y.useEffect(()=>{p.current?.setPosition(o);},[o[0],o[1]]),s?createPortal(y.createElement("div",{"data-gds-part":"map-marker-content",className:d("pointer-events-auto",r)},n),s):null});$i.displayName="MapMarker";var Qb={video:"aspect-video",standard:"aspect-[4/3]",square:"aspect-square",portrait:"aspect-[3/4]",wide:"aspect-[21/9]",auto:""},ev={video:"16 / 9",standard:"4 / 3",square:"1 / 1",portrait:"3 / 4",wide:"21 / 9",auto:"auto"},tv={none:"0",sm:"var(--radius, 0.25rem)",md:"calc(var(--radius, 0.375rem) * 1.25)",lg:"calc(var(--radius, 0.5rem) * 1.5)",xl:"calc(var(--radius, 0.75rem) * 2)"},ov={album:Disc3,"tv-show":Tv$1,movie:Clapperboard,game:Gamepad2,book:Book,portrait:User,landscape:Mountain,poster:Film,product:Package,food:UtensilsCrossed,video:Video,audio:Music,embed:Code2,"3d":Box,generic:Image},av={album:"square","tv-show":"portrait",movie:"portrait",game:"portrait",book:"portrait",portrait:"portrait",landscape:"wide",poster:"portrait",product:"square",food:"square",video:"video",audio:"video",embed:"video","3d":"square",generic:"video"};function rv(e){if(!e)return null;switch(e.kind){case "album":return `album:${e.artist}|${e.title}|${e.year??""}`;case "tv-show":return `tv-show:${e.title}|${e.year??""}`;case "movie":return `movie:${e.title}|${e.year??""}`;case "game":return `game:${e.title}`;case "book":return `book:${e.isbn??""}|${e.title??""}|${e.author??""}`;case "poster":return `poster:${e.title}|${e.year??""}`;case "portrait":return `portrait:${e.name??""}|${e.role??""}`;case "landscape":return `landscape:${e.location??""}|${e.mood??""}`;case "product":return `product:${e.brand??""}|${e.name??""}`;case "food":return `food:${e.dish??""}|${e.cuisine??""}`;case "generic":return `generic:${e.prompt}`;default:return `${e.kind}:`}}function nv(e){let t=rv(e),[o,a]=y.useState(0);return y.useEffect(()=>{if(typeof window>"u")return;let r=()=>a(n=>n+1);return window.addEventListener("grade:media-pending-updated",r),()=>window.removeEventListener("grade:media-pending-updated",r)},[]),y.useEffect(()=>{},[o]),!t||typeof window>"u"?false:!!window.__gradeMediaPending?.[t]}function iv(e){if(!e)return "";let t=/^(the|a|an|and|for|by|of|in|on|at|to)$/i,o=e.trim().split(/\s+/).filter(a=>a&&!t.test(a));return o.length===0?e.replace(/\s+/g,"").slice(0,2).toUpperCase():o.length===1?o[0].slice(0,2).toUpperCase():(o[0][0]+o[1][0]).toUpperCase()}function sv(e){return e<64?"sm":e>=160?"lg":"md"}var fo=y.forwardRef(({className:e,aspect:t,radius:o="none",border:a=false,loading:r=false,onVisibilityChange:n,fallback:i,emptyState:c="auto",hint:s="generic",alt:l,source:p,src:m,glyph:u,overlay:g,instanceId:h,style:f,children:b,...v},k)=>{let x=y.useRef(null);y.useImperativeHandle(k,()=>x.current);let w=s,S=t,C=o,M=a,I=r,B=l,z=m,E=c,W=S??av[w],oe=S!=null;y.useEffect(()=>{if(!n||!x.current)return;let O=x.current,ye=new IntersectionObserver(([pe])=>n(pe.isIntersecting),{threshold:.05});return ye.observe(O),()=>ye.disconnect()},[n]);let he=z,[Y,H]=y.useState(false);y.useEffect(()=>{H(false);},[he]);let R=Y?void 0:he,F=!b&&E!=="none",[re,Z]=y.useState("md");y.useEffect(()=>{if(!F)return;let O=x.current;if(!O)return;let ye=new ResizeObserver(([pe])=>{let He=pe.contentRect.width;Z(sv(He));});return ye.observe(O),()=>ye.disconnect()},[F]);let G=y.useMemo(()=>iv(B),[B]),Q=ov[w]??Image,Re=E==="auto"||E==="icon",Oe=y.useMemo(()=>p?JSON.stringify(p):void 0,[p]),de=nv(p)&&!R;return y.createElement("div",{ref:x,"data-gds-part":"media-surface","data-media-hint":w,"data-media-source-kind":p?.kind,"data-media-source":Oe,"data-media-alt":B,"data-gds-instance-id":h,className:d("gds-media-surface relative w-full overflow-hidden",!oe&&Qb[W],M&&"border border-border",e),style:{...oe?{aspectRatio:ev[W]}:{},borderRadius:`var(--gds-media-radius, ${tv[C]})`,...f},...v},F&&y.createElement("div",{"data-gds-part":"media-surface-placeholder","data-tier":re,"data-filled":R?"":void 0,"data-fill-pending":de||void 0,className:d("absolute inset-0 z-0 flex flex-col items-center justify-center gap-2 pointer-events-none px-3 text-center",de&&"gds-aura-shimmer"),style:{position:"absolute",background:"var(--gds-media-placeholder-bg)",color:"var(--gds-media-placeholder-fg)",...de?{"--aura-shimmer-duration":"1400ms","--aura-shimmer-delay-between":"400ms"}:null},"aria-hidden":true},Re?re==="sm"?G?y.createElement("span",{className:"font-semibold text-sm tracking-tight"},G):y.createElement(Q,{className:"h-1/2 w-1/2 max-h-6 max-w-6"}):re==="md"?y.createElement(y.Fragment,null,u??y.createElement(Q,{className:"h-1/3 w-1/3 max-h-10 max-w-10"})):y.createElement(y.Fragment,null,u??y.createElement(Q,{className:"h-1/4 w-1/4 max-h-12 max-w-12"}),B&&y.createElement("span",{className:"text-xs leading-snug line-clamp-2 max-w-[80%]","data-gds-part":"media-surface-caption"},B)):E),(R||b)&&y.createElement("div",{"data-gds-part":"media-surface-content",className:"absolute inset-0 z-[1]"},R&&y.createElement("img",{src:R,alt:B??"",onError:()=>H(true),className:"absolute inset-0 h-full w-full object-cover","data-gds-part":"media-surface-img"}),b),I&&y.createElement("div",{className:"absolute inset-0 z-[2] flex items-center justify-center bg-muted animate-pulse","aria-hidden":true},i),g&&y.createElement("div",{"data-gds-part":"media-surface-overlay",className:"absolute inset-0 z-10"},g))});fo.displayName="MediaSurface";var cu=y.forwardRef(({src:e,controls:t=true,autoPlay:o=false,loop:a=false,muted:r,pauseOffscreen:n=true,aspect:i="video",radius:c="lg",border:s=false,poster:l,label:p,className:m,style:u,playbackRate:g=1,objectFit:h="cover"},f)=>{let b=y.useRef(null),v=Ho(),[k,x]=y.useState(!!l);y.useImperativeHandle(f,()=>b.current);let w=r??o,S=o&&!v;y.useEffect(()=>{b.current&&(b.current.playbackRate=g);},[g]),y.useEffect(()=>{x(!!l);},[l]);let C=y.useCallback(M=>{!n||!b.current||(M&&S?b.current.play().catch(()=>{}):b.current.pause());},[n,S]);return y.createElement(fo,{aspect:i,radius:c,border:s,"aria-label":p,className:m,style:u,onVisibilityChange:n?C:void 0},y.createElement("video",{ref:b,src:e,controls:t,autoPlay:S,loop:a,muted:w,playsInline:true,preload:S?"auto":"metadata",onPlaying:()=>x(false),className:d("w-full h-full",h==="cover"&&"object-cover",h==="contain"&&"object-contain",h==="fill"&&"object-fill")},"Your browser does not support the video tag."),l&&k&&y.createElement("img",{src:l,alt:"","aria-hidden":"true",loading:"lazy",decoding:"async","data-gds-part":"video-poster",className:d("absolute inset-0 w-full h-full pointer-events-none transition-opacity duration-200",h==="cover"&&"object-cover",h==="contain"&&"object-contain",h==="fill"&&"object-fill")}))});cu.displayName="VideoPlayer";var du=y.forwardRef(({src:e,controls:t=false,autoPlay:o=true,loop:a=true,pauseOffscreen:r=true,aspect:n="square",radius:i="lg",border:c=false,poster:s,label:l,className:p,style:m,stateMachines:u,artboard:g,fit:h="contain",stateMachineInputs:f},b)=>{let v=Ho(),[k,x]=y.useState(null),[w,S]=y.useState(null);return y.useEffect(()=>{let C=false;return import('@rive-app/react-canvas').then(M=>{C||x(M);}).catch(()=>{C||S("Rive runtime not installed. Run `npm install @rive-app/react-canvas`.");}),()=>{C=true;}},[]),y.createElement(fo,{ref:b,aspect:n,radius:i,border:c,"aria-label":l,className:p,style:m},w?y.createElement("div",{className:"flex items-center justify-center h-full text-sm text-muted-foreground p-4 text-center"},w):k&&e?y.createElement(dv,{Mod:k,src:e,stateMachines:u,artboard:g,fit:h,stateMachineInputs:f,autoPlay:o&&!v,loop:a,pauseOffscreen:r,controls:t,poster:s}):s&&y.createElement("img",{src:s,alt:"",className:"w-full h-full object-contain"}))});du.displayName="RivePlayer";function dv({Mod:e,src:t,stateMachines:o,artboard:a,fit:r,autoPlay:n,loop:i,pauseOffscreen:c,controls:s,poster:l}){let{useRive:p,Layout:m,Fit:u,Alignment:g,EventType:h}=e,f={contain:u.Contain,cover:u.Cover,fill:u.Fill,fitWidth:u.FitWidth,fitHeight:u.FitHeight,none:u.None},{rive:b,RiveComponent:v}=p({src:t,stateMachines:o,artboard:a,autoplay:n,layout:new m({fit:f[r],alignment:g.Center})}),[k,x]=y.useState(n);y.useEffect(()=>{if(!b||!i)return;let S=()=>{b.play();};return b.on(h.Stop,S),()=>{b.off(h.Stop,S);}},[b,i,h]),y.useEffect(()=>{if(!c||!b)return;let S=b.canvas;if(!S)return;let C=new IntersectionObserver(([M])=>{M.isIntersecting&&n?b.play():b.pause();},{threshold:.05});return C.observe(S),()=>C.disconnect()},[b,c,n]);let w=()=>{b&&(k?(b.pause(),x(false)):(b.play(),x(true)));};return y.createElement(y.Fragment,null,y.createElement(v,{className:"w-full h-full"}),!b&&l&&y.createElement("img",{src:l,alt:"",className:"absolute inset-0 w-full h-full object-contain pointer-events-none"}),s&&y.createElement("div",{className:d("absolute inset-0 flex items-end justify-end p-2","opacity-0 hover:opacity-100 transition-opacity","bg-gradient-to-t from-black/40 to-transparent")},y.createElement(Ce,{iconOnly:true,variant:"secondary",onClick:w},k?y.createElement(Pause,{className:"h-4 w-4"}):y.createElement(Play,{className:"h-4 w-4"}))))}var pv={sm:20,md:28,lg:40,xl:56},uv={horizontal:["horizontal","square","icon"],square:["square","icon","horizontal"],icon:["icon","square","horizontal"]};function mv(e,t,o,a){for(let r of uv[t]){let n=e[r];if(!n)continue;let i=o==="dark"?n.dark??n.light:n.light??n.dark,c=a?n.mono??i:i??n.mono;if(c!=null)return c}return null}var gv=y.forwardRef(function({sources:t={},lockup:o="horizontal",mode:a="light",mono:r=false,size:n="md",label:i,decorative:c=false,href:s,className:l,style:p,...m},u){let g=typeof n=="number"?n:pv[n],h=mv(t,o,a,r),f=c?{"aria-hidden":true}:i?s?{}:{role:"img","aria-label":i}:{},b=h??y.createElement(fv,{label:i}),v=y.createElement("span",{className:d("gds-logo inline-flex shrink-0 select-none items-center","[&_img]:h-full [&_img]:w-auto [&_svg]:h-full [&_svg]:w-auto",l),style:{height:g,...p},"data-gds-part":"logo","data-gds-lockup":o,"data-gds-mode":a,...s?{}:f,...s?{}:m},b);return s?y.createElement("a",{ref:u,href:s,"aria-label":c?void 0:i,className:"inline-flex",...c?{"aria-hidden":true}:{},...m},v):y.cloneElement(v,{ref:u})});function fv({label:e}){return y.createElement("svg",{viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e?{}:{"aria-hidden":true}},y.createElement("path",{d:"M28 0L32 4V10L26 4H6L4 6V26L6 28H16L26 18V24L18 32H4L0 28V4L4 0H28ZM32 32H28V18H16V14H32V32Z",fill:"currentColor"}))}var pu="M28 0L32 4V10L26 4H6L4 6V26L6 28H16L26 18V24L18 32H4L0 28V4L4 0H28ZM32 32H28V18H16V14H32V32Z",hv={sm:16,md:24,lg:32,xl:48},uu=y.forwardRef(({size:e="md",label:t="Loading\u2026",showLabel:o=false,className:a,style:r,...n},i)=>{let c=typeof e=="number"?e:hv[e],s=y.useId().replace(/[^a-zA-Z0-9-]/g,"");return y.createElement("div",{ref:i,"data-gds-part":"grade-loader",role:"status","aria-label":t||void 0,className:d("gds-grade-loader inline-flex flex-col items-center gap-2",a),style:r,...n},y.createElement("style",null,`
|
|
354
354
|
@keyframes gdsLoaderSweep { from { transform: translate(-48px, 48px) } to { transform: translate(48px, -48px) } }
|
|
355
355
|
@keyframes gdsLoaderPulse { 0%, 100% { opacity: 0.35 } 50% { opacity: 0.9 } }
|
|
356
356
|
@media (prefers-reduced-motion: reduce) {
|
|
357
357
|
.gds-grade-loader [data-sweep] { display: none }
|
|
358
358
|
.gds-grade-loader [data-mark] { animation: gdsLoaderPulse 2.2s ease-in-out infinite }
|
|
359
359
|
}
|
|
360
|
-
`),
|
|
360
|
+
`),y.createElement("svg",{width:c,height:c,viewBox:"0 0 32 32",fill:"none","aria-hidden":true,style:{display:"block"}},y.createElement("defs",null,y.createElement("clipPath",{id:`${s}-clip`},y.createElement("path",{d:pu})),y.createElement("linearGradient",{id:`${s}-shine`,x1:"0",y1:"1",x2:"1",y2:"0"},y.createElement("stop",{offset:"0.35",stopColor:"currentColor",stopOpacity:"0"}),y.createElement("stop",{offset:"0.5",stopColor:"oklch(var(--brand-1, 0.7 0 0))",stopOpacity:"0.95"}),y.createElement("stop",{offset:"0.65",stopColor:"currentColor",stopOpacity:"0"}))),y.createElement("path",{d:pu,fill:"currentColor",opacity:.28,"data-mark":true}),y.createElement("g",{clipPath:`url(#${s}-clip)`},y.createElement("rect",{"data-sweep":true,x:-16,y:-16,width:64,height:64,fill:`url(#${s}-shine)`,style:{animation:"gdsLoaderSweep 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite"}}))),o&&t?y.createElement("span",{className:"text-xs text-muted-foreground"},t):null,!o&&t?y.createElement("span",{className:"sr-only"},t):null)});uu.displayName="GradeLoader";var ji=1150,Ki=1500,vv="translate(101%, 95%) scale(0.18)",yv="translate(122%, 36%) scale(0.2)",xv="var(--gds-canvas-fill, radial-gradient(circle at 50% 38%, #1b1b22, #0b0b0e))",wv="cubic-bezier(0.34, 1.16, 0.64, 1)",kv="cubic-bezier(0.65, 0, 0.35, 1)";function qi(e,t){let o=e.zoom??1,a=e.cx??.5,r=e.cy??.5;return {transform:`translate(${(.5-a*o)*100}%, ${(.5-r*o)*100}%) scale(${o})`,zoom:o,label:e.label??null,opacity:1,hold:e.hold??2400,trans:t}}var mu={display:"inline-flex",alignItems:"center",justifyContent:"center",width:28,height:28,borderRadius:999,border:"none",background:"transparent",color:"#fff",cursor:"pointer"};function Sv(){return y.createElement("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":true},y.createElement("path",{d:"M8 5v14l11-7z"}))}function Rv(){return y.createElement("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":true},y.createElement("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1"}),y.createElement("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1"}))}function gu(){return y.createElement("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":true},y.createElement("path",{d:"M3 12a9 9 0 1 0 3-6.7L3 8"}),y.createElement("path",{d:"M3 3v5h5"}))}function Yi({shots:e,autoplay:t=true,loop:o=true,maxLoops:a=1/0,controls:r=true,paused:n,onEnded:i,spotlight:c=false,cursor:s=true,enter:l=true,captionPosition:p="bottom",stage:m=xv,backdrop:u,className:g,style:h,children:f}){let b=Co(),v=y.useRef(null),k=ir(),x=useInView(v,{amount:.25}),w=k&&x,S=y.useMemo(()=>{let G=e&&e.length>0?e:[{zoom:1}],Q=[];l&&Q.push({transform:vv,zoom:.18,label:null,opacity:0,hold:360,trans:0}),Q.push(qi(G[0],l?Ki:0));for(let Re=1;Re<G.length;Re++)Q.push(qi(G[Re],ji));return o&&(Q.push(qi(G[0],Ki)),Q.push({transform:yv,zoom:.2,label:null,opacity:0,hold:520,trans:Ki})),Q},[e,l,o]),C=l&&S.length>1?1:0,[M,I]=y.useState(t?0:C),[B,z]=y.useState(t),[E,W]=y.useState(false),oe=y.useRef(0),he=y.useCallback(()=>{oe.current=0,W(false),I(0),z(true);},[]);y.useEffect(()=>{n!==void 0&&(n?z(false):E||z(true));},[n,E]);let Y=y.useRef(i);y.useEffect(()=>{Y.current=i;}),y.useEffect(()=>{E&&Y.current?.();},[E]),y.useEffect(()=>{if(b||!B||!w||S.length<=1)return;let G=setTimeout(()=>{I(Q=>{let Re=Q+1;return Re>=S.length?o&&oe.current+1<a?(oe.current+=1,0):(z(false),W(true),C):Re});},S[M].hold);return ()=>clearTimeout(G)},[M,B,w,b,S,o,a,C]);let H=b?C:Math.min(M,S.length-1),R=S[H]??S[0],F=R.opacity===1&&R.zoom>1.05,re=b?0:R.trans,Z=R.zoom<=1.05?wv:kv;return y.createElement("div",{ref:v,className:d("gds-screen-animator",g),"data-gds-part":"screen-animator",style:{position:"absolute",inset:0,overflow:"hidden",background:m,...h}},y.createElement("style",null,`
|
|
361
361
|
@keyframes gdsSaPing { from { transform: scale(0.4); opacity: 0.9 } to { transform: scale(1.8); opacity: 0 } }
|
|
362
362
|
@keyframes gdsSaPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }
|
|
363
|
-
`),u&&
|
|
363
|
+
`),u&&y.createElement("div",{"aria-hidden":true,style:{position:"absolute",inset:0,pointerEvents:"none"}},u),y.createElement("div",{style:{position:"absolute",inset:0,transform:R.transform,transformOrigin:"0 0",opacity:R.opacity,transition:`transform ${re}ms ${Z}, opacity 700ms ease`}},f),c&&y.createElement("div",{"aria-hidden":true,style:{position:"absolute",inset:0,pointerEvents:"none",background:"radial-gradient(circle at 50% 50%, transparent 26%, rgba(0,0,0,0.46) 80%)",opacity:F?1:0,transition:`opacity ${ji}ms ease`}}),s&&y.createElement("div",{key:H,"aria-hidden":true,style:{position:"absolute",left:"50%",top:"50%",transform:"translate(-50%, -50%)",pointerEvents:"none",opacity:F?1:0,transition:`opacity ${ji}ms ease`}},y.createElement("span",{style:{position:"absolute",left:-19,top:-19,width:38,height:38,borderRadius:999,border:"2px solid rgba(59,130,246,0.75)",animation:"gdsSaPing 1100ms ease-out 0.4s 1"}}),y.createElement("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"none"},y.createElement("path",{d:"M5 3l14 7-6 1.5L10 18 5 3z",fill:"#fff",stroke:"#111",strokeWidth:"1.5",strokeLinejoin:"round"}))),y.createElement("div",{role:"status","aria-live":"polite","aria-atomic":"true",style:{position:"absolute",left:"50%",[p==="top"?"top":"bottom"]:22,transform:"translateX(-50%)",pointerEvents:"none"}},R.label&&y.createElement("span",{style:{display:"inline-flex",alignItems:"center",gap:9,padding:"8px 14px",borderRadius:999,background:"rgba(15,15,17,0.62)",color:"#fff",fontSize:13.5,fontWeight:600,backdropFilter:"blur(10px)",boxShadow:"0 6px 22px rgba(0,0,0,0.25)"}},y.createElement("span",{"aria-hidden":true,style:{width:7,height:7,borderRadius:999,background:"#34d399",animation:"gdsSaPulse 1600ms ease-in-out infinite"}}),R.label)),r&&S.length>1&&!b&&y.createElement("div",{role:"group","aria-label":"Demo playback controls",style:{position:"absolute",right:16,bottom:16,display:"flex",gap:4,alignItems:"center",padding:"4px 6px",borderRadius:999,background:"rgba(15,15,17,0.55)",backdropFilter:"blur(10px)",boxShadow:"0 6px 22px rgba(0,0,0,0.25)"}},y.createElement("button",{type:"button",onClick:()=>E?he():z(G=>!G),"aria-label":E?"Replay":B?"Pause":"Play",style:mu},E?y.createElement(gu,null):B?y.createElement(Rv,null):y.createElement(Sv,null)),y.createElement("button",{type:"button",onClick:he,"aria-label":"Restart",style:mu},y.createElement(gu,null))),E&&!b&&y.createElement("button",{type:"button",onClick:he,"aria-label":"Replay",style:{position:"absolute",inset:0,margin:"auto",width:64,height:64,display:"grid",placeItems:"center",borderRadius:999,border:"none",color:"#fff",background:"rgba(15,15,17,0.55)",backdropFilter:"blur(10px)",boxShadow:"0 8px 30px rgba(0,0,0,0.35)",cursor:"pointer"}},y.createElement("svg",{width:"26",height:"26",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":true},y.createElement("path",{d:"M3 12a9 9 0 1 0 3-6.7L3 8"}),y.createElement("path",{d:"M3 3v5h5"}))))}var yu=y.createContext(null),Cv={mode:"play",active:true,paused:false,register:()=>({done:()=>{},cancel:()=>{}})};function Ji(){return y.useContext(yu)??Cv}var Tv="var(--gds-canvas-fill, radial-gradient(circle at 50% 38%, #1b1b22, #0b0b0e))";function Pv({label:e,onSkip:t}){return y.useEffect(()=>{if(!t)return;let o=setTimeout(t,1400);return ()=>clearTimeout(o)},[t]),y.createElement("div",{style:{position:"absolute",inset:0,display:"grid",placeItems:"center",pointerEvents:"none"}},y.createElement("span",{style:{padding:"8px 14px",borderRadius:999,background:"rgba(15,15,17,0.6)",border:"1px solid rgba(255,255,255,0.16)",color:"rgba(255,255,255,0.75)",fontSize:12.5,backdropFilter:"blur(10px)"}},e?`Scene \u201C${e}\u201D hit an error`:"This scene hit an error",t?" \u2014 skipping":""))}var Tr=class extends y.Component{state={failed:false};static getDerivedStateFromError(){return {failed:true}}componentDidCatch(){}render(){return this.state.failed?y.createElement(Pv,{label:this.props.label,onSkip:this.props.onSkip}):this.props.children}};function fu({virtualWidth:e,children:t}){let o=y.useRef(null),[a,r]=y.useState(null);y.useEffect(()=>{let i=o.current;if(!i)return;let c=()=>r({w:i.clientWidth||1,h:i.clientHeight||1});c();let s=new ResizeObserver(c);return s.observe(i),()=>s.disconnect()},[]);let n=a?a.w/e:0;return y.createElement("div",{ref:o,style:{position:"absolute",inset:0,overflow:"hidden"}},a&&n>0&&y.createElement("div",{style:{width:e,height:a.h/n,transform:`scale(${n})`,transformOrigin:"0 0"}},t))}function Mv(e){let t=e.match(/^\s*([0-9.]+)\s*\/\s*([0-9.]+)\s*$/);if(!t)return null;let o=Number(t[1])/Number(t[2]);return Number.isFinite(o)&&o>0?o:null}function Nv({ratio:e,children:t}){let o=y.useRef(null),[a,r]=y.useState(null);return y.useEffect(()=>{let n=o.current;if(!n)return;let i=()=>{let s=n.clientWidth||1,l=n.clientHeight||1,p=Math.min(s,l*e);r({w:p,h:p/e});};i();let c=new ResizeObserver(i);return c.observe(n),()=>c.disconnect()},[e]),y.createElement("div",{ref:o,style:{position:"absolute",inset:0}},a&&y.createElement("div",{style:{position:"absolute",left:"50%",top:"50%",transform:"translate(-50%, -50%)",width:a.w,height:a.h,overflow:"hidden"}},t))}function xu({device:e="desktop",shots:t,virtualWidth:o,spotlight:a=false,cursor:r=true,enter:n=false,animate:i="none",screenId:c,className:s,style:l,children:p}){let m=Ji(),u=o??(e==="mobile"?390:1100),g=y.useRef(null),h=m.mode==="play"&&m.active,{register:f}=m;y.useEffect(()=>{if(!h)return;let v=f();return g.current=v,()=>{g.current=null,v.cancel();}},[h,f]);let b=e==="mobile"?{position:"relative",height:"76%",aspectRatio:"390 / 800",borderRadius:22,flex:"0 0 auto"}:{position:"relative",flex:"1 1 0%",maxWidth:"82%",aspectRatio:"16 / 10",minWidth:0,borderRadius:12};return y.createElement("div",{"data-gds-part":"motion-screen",className:d("gds-motion-screen",s),style:{...b,overflow:"hidden",background:"var(--gds-background, #fff)",boxShadow:"0 18px 60px rgba(0,0,0,0.38), 0 2px 10px rgba(0,0,0,0.22)",...h&&hu[i]?{animation:hu[i]}:{},...l}},h?y.createElement(Yi,{shots:t,loop:false,controls:false,enter:n,spotlight:a,cursor:r,stage:"transparent",paused:m.paused,onEnded:()=>g.current?.done()},y.createElement(fu,{virtualWidth:u},p)):y.createElement(fu,{virtualWidth:u},p))}var wu={title:3800,"lower-third":3200,"section-break":4200,broadcast:4200,ticker:6e3,stat:4200,quote:5200};function ku({template:e="title",heading:t,text:o,durationMs:a,tone:r="light",lift:n="none",className:i,style:c}){let s=Ji(),l=Co(),p=a??wu[e],m=s.mode==="play"&&s.active,u=m&&!l,g=y.useRef(null),h=y.useRef(p),{register:f,paused:b}=s;y.useEffect(()=>{if(!m)return;h.current=p;let S=f();return g.current=S,()=>{g.current=null,S.cancel();}},[m,p,f]),y.useEffect(()=>{if(!m||b)return;let S=Date.now(),C=setTimeout(()=>{h.current=0,g.current?.done();},h.current);return ()=>{clearTimeout(C),h.current=Math.max(0,h.current-(Date.now()-S));}},[m,b]);let v=r==="dark"?"#16161a":"#fff",k=n==="none"?void 0:r==="dark"?"0 1px 2px rgba(255,255,255,0.55), 0 2px 24px rgba(255,255,255,0.45)":"0 1px 2px rgba(0,0,0,0.35), 0 2px 28px rgba(0,0,0,0.30)",x=b?"paused":"running",w=(S,C,M=0)=>u?{animation:`${S} ${C}ms cubic-bezier(0.22, 1, 0.36, 1) ${M}ms both`,animationPlayState:x}:{};return y.createElement("div",{"data-gds-part":"motion-text",className:d("gds-motion-text",i),style:{position:e==="lower-third"||e==="broadcast"||e==="ticker"?"absolute":"relative",...e==="lower-third"?{left:"6%",bottom:"9%"}:e==="broadcast"?{left:0,right:0,bottom:"6%"}:e==="ticker"?{left:0,right:0,bottom:0}:e==="quote"?{textAlign:"center",maxWidth:"64%"}:{textAlign:"center",maxWidth:"72%"},color:v,textShadow:k,isolation:n==="scrim"?"isolate":void 0,pointerEvents:"none",...c}},n==="scrim"&&y.createElement("div",{"aria-hidden":true,style:{position:"absolute",inset:"-30% -20%",zIndex:-1,pointerEvents:"none",background:r==="dark"?"radial-gradient(ellipse at center, rgba(255,255,255,0.45), transparent 70%)":"radial-gradient(ellipse at center, rgba(0,0,0,0.34), transparent 70%)",filter:"blur(2px)"}}),y.createElement("style",null,`
|
|
364
364
|
@keyframes gdsMotionFadeUp { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: translateY(0) } }
|
|
365
365
|
@keyframes gdsMotionSlideIn { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: translateX(0) } }
|
|
366
366
|
@keyframes gdsMotionPush { from { opacity: 0; transform: scale(1.05) } to { opacity: 1; transform: scale(1) } }
|
|
367
367
|
@keyframes gdsMotionMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
|
|
368
368
|
@keyframes gdsMotionStatSlam { 0% { opacity: 0; transform: scale(2.2) } 60% { opacity: 1; transform: scale(0.96) } 80% { transform: scale(1.02) } 100% { opacity: 1; transform: scale(1) } }
|
|
369
369
|
@keyframes gdsMotionQuoteMark { from { opacity: 0; transform: translateY(10px) scale(0.9) } to { opacity: 0.14; transform: translateY(0) scale(1) } }
|
|
370
|
-
`),e==="title"&&
|
|
370
|
+
`),e==="title"&&y.createElement(y.Fragment,null,y.createElement("div",{style:{fontSize:"clamp(26px, 5.2vw, 60px)",fontWeight:700,letterSpacing:"-0.02em",lineHeight:1.06,...w("gdsMotionFadeUp",700)}},t),o&&y.createElement("div",{style:{marginTop:14,fontSize:"clamp(14px, 1.8vw, 20px)",opacity:.72,...w("gdsMotionFadeUp",700,160)}},o)),e==="lower-third"&&y.createElement("div",{style:{display:"inline-flex",flexDirection:"column",gap:3,padding:"10px 16px",borderRadius:12,background:r==="dark"?"rgba(255,255,255,0.78)":"rgba(15,15,17,0.62)",backdropFilter:"blur(10px)",boxShadow:"0 6px 22px rgba(0,0,0,0.25)",...w("gdsMotionSlideIn",500)}},y.createElement("span",{style:{fontSize:15,fontWeight:650}},t),o&&y.createElement("span",{style:{fontSize:12.5,opacity:.72}},o)),e==="broadcast"&&y.createElement("div",{style:{overflow:"hidden",...w("gdsMotionSlideIn",600)}},o&&y.createElement("div",{style:{display:"inline-block",marginLeft:"6%",padding:"5px 14px",fontSize:12.5,fontWeight:600,letterSpacing:"0.04em",textTransform:"uppercase",color:"#fff",background:"oklch(var(--primary, 0.45 0.18 264) / 0.85)"}},o),y.createElement("div",{style:{padding:"12px 6% 14px",background:"linear-gradient(90deg, oklch(var(--primary, 0.45 0.18 264)) 0%, oklch(var(--primary, 0.45 0.18 264) / 0.92) 70%, oklch(var(--primary, 0.45 0.18 264) / 0) 100%)",color:"#fff"}},y.createElement("span",{style:{fontSize:22,fontWeight:800,letterSpacing:"-0.01em"}},t))),e==="section-break"&&y.createElement("div",{style:{fontSize:"clamp(30px, 6vw, 72px)",fontWeight:700,letterSpacing:"-0.025em",lineHeight:1.04,...w("gdsMotionPush",1400)}},t),e==="ticker"&&y.createElement("div",{style:{display:"flex",alignItems:"stretch",background:r==="dark"?"rgba(255,255,255,0.78)":"rgba(15,15,17,0.62)",backdropFilter:"blur(10px)",overflow:"hidden",...w("gdsMotionFadeUp",500)}},y.createElement("span",{style:{flex:"0 0 auto",display:"inline-flex",alignItems:"center",padding:"7px 14px",fontSize:11.5,fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color:"#fff",background:"oklch(var(--primary, 0.45 0.18 264))"}},t),o&&y.createElement("div",{style:{flex:"1 1 0%",minWidth:0,display:"flex",alignItems:"center",overflow:"hidden",maskImage:"linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%)"}},y.createElement("div",{style:{display:"inline-flex",whiteSpace:"nowrap",fontSize:13,...u?{animation:"gdsMotionMarquee 24000ms linear infinite",animationPlayState:x}:{}}},y.createElement("span",{style:{padding:"0 0 0 16px"}},o," \xB7 "),y.createElement("span",{style:{padding:"0 0 0 4px"}},o," \xB7 ")))),e==="stat"&&y.createElement(y.Fragment,null,y.createElement("div",{style:{fontSize:"clamp(48px, 16vw, 180px)",fontWeight:900,letterSpacing:"-0.04em",lineHeight:1,...w("gdsMotionStatSlam",800)}},t),o&&y.createElement("div",{style:{marginTop:16,fontSize:"clamp(14px, 1.8vw, 20px)",opacity:.72,...w("gdsMotionFadeUp",700,420)}},o)),e==="quote"&&y.createElement("div",{style:{position:"relative"}},y.createElement("span",{"aria-hidden":true,style:{position:"absolute",top:"-0.45em",left:"-0.18em",fontSize:"clamp(80px, 12vw, 160px)",fontWeight:800,lineHeight:1,opacity:u?void 0:.14,pointerEvents:"none",...w("gdsMotionQuoteMark",900)}},"\u201C"),y.createElement("div",{style:{position:"relative",fontSize:"clamp(22px, 3.6vw, 44px)",fontWeight:600,letterSpacing:"-0.015em",lineHeight:1.25,...w("gdsMotionFadeUp",700)}},t),o&&y.createElement("div",{style:{marginTop:18,fontSize:"clamp(13px, 1.6vw, 17px)",opacity:.65,...w("gdsMotionFadeUp",700,240)}},"\u2014 ",o)))}var Ev={"top-left":{top:18,left:20},top:{top:18,left:0,right:0,display:"grid",placeItems:"center"},"top-right":{top:18,right:20},center:{inset:0,display:"grid",placeItems:"center"},"bottom-left":{bottom:18,left:20},bottom:{bottom:18,left:0,right:0,display:"grid",placeItems:"center"},"bottom-right":{bottom:52,right:20},"lower-third":{left:"6%",right:"6%",bottom:"8%"}};function Qi({zone:e="top-right",fromScene:t,toScene:o,interactive:a=false,className:r,style:n,children:i}){return y.createElement("div",{"data-gds-part":"motion-overlay",className:d("gds-motion-overlay",r),style:{position:"absolute",zIndex:20,pointerEvents:a?"auto":"none",...Ev[e],...n}},i)}var Su={fade:420,"slide-up":520,"slide-down":520,"slide-left":520,"slide-right":520,pop:420,zoom:650,"wipe-circle":750,none:0};function Lv(e,t){switch(e){case "fade":return `gdsMotionSceneIn ${t}ms ease both`;case "slide-up":return `gdsMotionSceneUp ${t}ms cubic-bezier(0.22, 1, 0.36, 1) both`;case "slide-down":return `gdsMotionSceneDown ${t}ms cubic-bezier(0.22, 1, 0.36, 1) both`;case "slide-left":return `gdsMotionSceneLeft ${t}ms cubic-bezier(0.22, 1, 0.36, 1) both`;case "slide-right":return `gdsMotionSceneRight ${t}ms cubic-bezier(0.22, 1, 0.36, 1) both`;case "pop":return `gdsMotionScenePop ${t}ms cubic-bezier(0.34, 1.56, 0.64, 1) both`;case "zoom":return `gdsMotionSceneZoom ${t}ms cubic-bezier(0.22, 1, 0.36, 1) both`;case "wipe-circle":return `gdsMotionSceneWipe ${t}ms cubic-bezier(0.65, 0, 0.35, 1) both`;case "none":return null}}var Dv=`
|
|
371
371
|
@keyframes gdsMotionSceneIn { from { opacity: 0 } to { opacity: 1 } }
|
|
372
372
|
@keyframes gdsMotionSceneUp { from { opacity: 0; transform: translateY(7%) } to { opacity: 1; transform: translateY(0) } }
|
|
373
373
|
@keyframes gdsMotionSceneDown { from { opacity: 0; transform: translateY(-7%) } to { opacity: 1; transform: translateY(0) } }
|
|
@@ -380,7 +380,7 @@ applyThemeToRoot(theme, "light"); // or "dark" / "superLight" / "superDark"
|
|
|
380
380
|
@keyframes gdsMotionScreenFloat { from { transform: translateY(-1.2%) } to { transform: translateY(1.2%) } }
|
|
381
381
|
@keyframes gdsMotionScreenTilt { from { transform: perspective(1100px) rotateX(12deg) rotateY(-16deg) } to { transform: perspective(1100px) rotateX(0deg) rotateY(0deg) } }
|
|
382
382
|
@keyframes gdsMotionScreenDrift { from { transform: translateX(-1.5%) } to { transform: translateX(1.5%) } }
|
|
383
|
-
`,pf={rise:"gdsMotionScreenRise 900ms cubic-bezier(0.22, 1, 0.36, 1) both",float:"gdsMotionScreenFloat 6s ease-in-out infinite alternate","tilt-settle":"gdsMotionScreenTilt 1800ms cubic-bezier(0.22, 1, 0.36, 1) both",drift:"gdsMotionScreenDrift 9s ease-in-out infinite alternate",none:null},sl=4e3,yf=420;function wi({label:e,durationMs:t,fill:o,transition:r="fade",transitionMs:a,className:n,style:i,children:c,internal:s}){let{active:l,paused:d,mode:m,onSceneEnd:u}=s,f=m==="play"&&l,h=t!=null,g=w.useRef(0),b=w.useRef(0),v=w.useRef(false),C=w.useRef(!h),S=w.useCallback(()=>{v.current||(v.current=true,u());},[u]),x=w.useRef(null),y=w.useRef(d);y.current=d;let R=w.useRef(false),L=w.useCallback(()=>{if(C.current&&!(g.current>0&&b.current<g.current)){if(y.current){R.current=true;return}x.current||(x.current=setTimeout(S,yf));}},[S]);w.useEffect(()=>{if(d){x.current&&(clearTimeout(x.current),x.current=null,R.current=true);return}R.current&&(R.current=false,L());},[d,L]);let D=w.useCallback(()=>{g.current+=1;let H=false;return {done:()=>{H||(H=true,b.current+=1,L());},cancel:()=>{g.current-=1,H?b.current-=1:L();}}},[L]),I=w.useRef(t??sl);w.useEffect(()=>{if(f)return I.current=t??sl,v.current=false,C.current=!h,()=>{x.current&&(clearTimeout(x.current),x.current=null);}},[f,t,h]),w.useEffect(()=>{if(!f||d||!h&&g.current>0)return;let H=Date.now(),z=setTimeout(()=>{C.current=true,L();},I.current);return ()=>{clearTimeout(z),I.current=Math.max(0,I.current-(Date.now()-H));}},[f,d,h,L]);let E=w.useMemo(()=>({mode:m,active:l,paused:d,register:D}),[m,l,d,D]);return w.createElement(ff.Provider,{value:E},w.createElement("div",{"data-gds-part":"motion-scene",className:p("gds-motion-scene",n),style:{position:"absolute",inset:0,background:o,isolation:"isolate",...f?(()=>{let H=a??vf[r],z=Kw(r,H);return z?{animation:z}:{}})():{},...i}},w.createElement("style",null,qw),w.createElement("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",gap:"4%",padding:"6%"}},c)))}function Yw(e){return w.createElement(wi,{...e,internal:{active:true,paused:false,mode:"play",onSceneEnd:()=>{}}})}var il={display:"inline-flex",alignItems:"center",justifyContent:"center",width:28,height:28,borderRadius:999,border:"none",background:"transparent",color:"#fff",cursor:"pointer"};function Zw(){return w.createElement("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":true},w.createElement("path",{d:"M8 5v14l11-7z"}))}function Xw(){return w.createElement("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":true},w.createElement("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1"}),w.createElement("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1"}))}function uf(){return w.createElement("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":true},w.createElement("path",{d:"M3 12a9 9 0 1 0 3-6.7L3 8"}),w.createElement("path",{d:"M3 3v5h5"}))}function Jw(e){return w.isValidElement(e)&&e.type===cl}function Qw(e){return w.isValidElement(e)&&e.type!==cl}var eS=1500,tS=2400,oS=1150;function rS(e){let t=e.shots&&e.shots.length>0?e.shots:[{}],o=e.enter===true?eS:0;return t.forEach((r,a)=>{o+=(r.hold??tS)+(a>0?r.trans??oS:0);}),o}function xf(e,t,o){t>7||w.Children.forEach(e,r=>{if(!w.isValidElement(r))return;if(r.type===gf){o.push(rS(r.props));return}if(r.type===bf){let n=r.props;o.push(n.durationMs??hf[n.template??"title"]);return}let a=r.props.children;a&&xf(a,t+1,o);});}function nS(e){let t=[];xf(e.props.children,0,t);let o=t.length>0?Math.max(...t):0,r=e.props.durationMs??0;return (Math.max(o,r)||(e.props.durationMs??sl))+yf}function mf(e,t,o){if(!(!e||typeof e.getAnimations!="function"))try{for(let r of e.getAnimations({subtree:!0}))try{r.currentTime=t,o?r.pause():r.play();}catch{}}catch{}}function aS({view:e="play",aspect:t="auto",stage:o=Gw,backdrop:r,autoplay:a=true,loop:n=false,controls:i=true,className:c,style:s,children:l}){let d=Io(),m=w.Children.toArray(l),u=m.filter(Qw),f=m.filter(Jw),h=u.length,g=t!=="auto"?Ww(t):null,b=g?t:"16 / 9",v=g&&g<1?"clamp(150px, 17%, 250px)":"clamp(260px, 30%, 440px)",[C,S]=w.useState(0),[x,y]=w.useState(!a),[R,L]=w.useState(false),[D,I]=w.useState(0),[E,H]=w.useState(null),z=E??e,[W,Z]=w.useState(false),O=w.useMemo(()=>{let M=u.map(ee=>nS(ee)),F=[],V=0;for(let ee of M)F.push(V),V+=ee;return {durations:M,starts:F,totalMs:Math.max(V,1)}},[u]),B=w.useRef(0),T=w.useRef(null),_=w.useRef(0);_.current=C;let ae=w.useCallback(M=>{let{starts:F,durations:V}=O;for(let ee=F.length-1;ee>=0;ee--)if(M>=F[ee])return Math.min(ee,F.length-1);return 0},[O]),te=w.useCallback(()=>{let M=T.current?.querySelectorAll('[data-gds-part="motion-scene"]');return M&&M.length>0?M[M.length-1]:null},[]),X=w.useCallback((M,F)=>{let V=Math.max(0,Math.min(M,O.totalMs-1));B.current=V,L(false),F?.resume&&y(false);let ee=ae(V);if(ee===_.current&&!F?.resume){let Ne=V-O.starts[ee];mf(te(),Ne,re.current);try{window.parent?.postMessage({type:"grade:motion-time",timeMs:Math.round(V),totalMs:O.totalMs,durations:O.durations},"*");}catch{}return}try{window.parent?.postMessage({type:"grade:motion-time",timeMs:Math.round(V),totalMs:O.totalMs,durations:O.durations},"*");}catch{}let Re=ee;S(Re),I(Ne=>Ne+1);let ce=V-O.starts[Re],$e=!F?.resume&&re.current;requestAnimationFrame(()=>requestAnimationFrame(()=>{mf(te(),ce,$e);}));},[O,ae,te]),re=w.useRef(x);re.current=x;let he=w.useRef(O);he.current=O,w.useEffect(()=>{if(x||R||d||z!=="play"||h===0)return;let M=0,F=performance.now(),V=0,ee=Re=>{let ce=he.current,$e=Math.min(Re-F,120);if(F=Re,B.current+=$e,B.current>=ce.totalMs)if(n)B.current=0,S(0),I(Ne=>Ne+1);else {B.current=ce.totalMs,L(true),y(true);return}else {let{starts:Ne}=ce,rt=0;for(let _e=Ne.length-1;_e>=0;_e--)if(B.current>=Ne[_e]){rt=_e;break}rt!==_.current&&(S(rt),I(_e=>_e+1));}if(Re-V>150){V=Re;try{window.parent?.postMessage({type:"grade:motion-time",timeMs:Math.round(B.current),totalMs:ce.totalMs,durations:ce.durations},"*");}catch{}}M=requestAnimationFrame(ee);};return M=requestAnimationFrame(ee),()=>cancelAnimationFrame(M)},[x,R,d,z,h,n]),w.useEffect(()=>{if(d||z!=="play")return;let M=T.current?.querySelectorAll('[data-gds-part="motion-scene"]'),F=M?.[M.length-1]??null;if(!(!F||typeof F.getAnimations!="function"))try{for(let V of F.getAnimations({subtree:!0}))try{x?V.pause():V.play();}catch{}}catch{}},[x,d,z,C,D]);let[Me,le]=w.useState(null),A=w.useRef(null);w.useEffect(()=>{let M=A.current;if(A.current=C,M===null||M===C)return;let F=u[C];if(!F)return;let V=F.props.transition??"fade",ee=F.props.transitionMs??vf[V]??0;if(ee<=0||re.current){le(null);return}le(M);let Re=setTimeout(()=>le(null),ee+60);return ()=>clearTimeout(Re)},[C,D]);let oe=w.useCallback(M=>{X(O.starts[Math.max(0,Math.min(M,h-1))]??0,{resume:true});},[X,O,h]),J=w.useCallback(()=>{let M=_.current+1;M<h?X(O.starts[M],{resume:true}):n&&h>0?X(0,{resume:true}):(L(true),y(true));},[h,n,X,O]);w.useEffect(()=>{if(d||typeof window>"u")return;let M=F=>{let V=F.data;if(!(!V||V.type!=="grade:motion-control")){if(V.action==="set-view"){(V.view==="play"||V.view==="strip")&&H(V.view);return}if(V.action==="export-mode"){Z(!!V.enabled);return}if(V.action==="seek"&&typeof V.ms=="number"){H("play"),X(V.ms);return}typeof V.scene=="number"?(H("play"),X(O.starts[Math.max(0,Math.min(h-1,Math.round(V.scene)))]??0)):V.action==="pause"?y(true):V.action==="play"?(H("play"),L(false),y(false)):V.action==="restart"&&(H("play"),oe(0));}};return window.addEventListener("message",M),()=>window.removeEventListener("message",M)},[d,oe,h,X,O]);let Q=w.useRef(X);Q.current=X,w.useEffect(()=>{if(typeof window>"u")return;let M=window;return M.__gradeMotion={ready:true,meta:()=>({totalMs:he.current.totalMs,durations:he.current.durations,count:h}),enterRenderMode:()=>{y(true),H("play"),Z(true);},renderFrame:F=>new Promise(V=>{y(true),Q.current(Math.max(0,F));let ee=false,Re=()=>{ee||(ee=true,V());};requestAnimationFrame(()=>requestAnimationFrame(Re)),setTimeout(Re,4e3);})},()=>{delete window.__gradeMotion;}},[h]),w.useEffect(()=>{if(d||typeof window>"u")return;let M=F=>{if(F.code!=="Space")return;let V=F.target;V&&(V.tagName==="INPUT"||V.tagName==="TEXTAREA"||V.tagName==="BUTTON"||V.isContentEditable)||(F.preventDefault(),H("play"),L(false),y(ee=>!ee));};return window.addEventListener("keydown",M),()=>window.removeEventListener("keydown",M)},[d]),w.useEffect(()=>{if(!(d||typeof window>"u"))try{window.parent?.postMessage({type:"grade:motion-state",scene:C,paused:x,done:R,count:h,view:z},"*");}catch{}},[d,C,x,R,h,z]);let k=e==="strip"||E==="strip";if(z==="strip"||d){let F=!k&&u.length>2,V=F?u.slice(0,2):u,ee=u.length-V.length;return w.createElement("div",{"data-gds-part":"motion",className:p("gds-motion",c),style:{position:"absolute",inset:0,overflow:"hidden",background:o,...s}},r&&w.createElement("div",{"aria-hidden":true,style:{position:"absolute",inset:0,pointerEvents:"none"}},r),w.createElement("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",gap:28,padding:"0 48px",overflowX:"auto"}},V.map((Re,ce)=>w.createElement("figure",{key:ce,style:{margin:0,flex:"0 0 auto",width:v}},w.createElement("figcaption",{style:{marginBottom:8,fontSize:12,fontWeight:500,color:"rgba(255,255,255,0.66)"}},Re.props.label??`Scene ${ce+1}`),w.createElement("div",{style:{position:"relative",aspectRatio:b,borderRadius:10,overflow:"hidden",background:Re.props.fill??"rgba(127,127,127,0.10)",border:"1px solid rgba(127,127,127,0.22)",boxShadow:"0 10px 34px rgba(0,0,0,0.28)"}},w.createElement(la,{label:Re.props.label},w.createElement(wi,{...Re.props,fill:void 0,internal:{active:false,paused:true,mode:"strip",onSceneEnd:()=>{}}}))))),F&&ee>0&&w.createElement("figure",{style:{margin:0,flex:"0 0 auto",width:v}},w.createElement("figcaption",{style:{marginBottom:8,fontSize:12,fontWeight:500,color:"rgba(255,255,255,0.66)"}},"\u2026"),w.createElement("div",{style:{aspectRatio:b,borderRadius:10,display:"grid",placeItems:"center",border:"1px dashed rgba(127,127,127,0.4)",color:"rgba(255,255,255,0.55)",fontSize:14,fontWeight:600}},"+",ee," scene",ee===1?"":"s"))))}let P=u[Math.min(C,Math.max(0,h-1))],N=w.createElement("div",{ref:T,style:{position:"absolute",inset:0,overflow:"hidden",background:o}},r&&w.createElement("div",{"aria-hidden":true,style:{position:"absolute",inset:0,pointerEvents:"none"}},r),Me!==null&&Me!==C&&u[Me]&&w.createElement(la,{key:`out:${Me}`,label:u[Me].props.label},w.createElement(wi,{...u[Me].props,transition:"none",internal:{active:false,paused:true,mode:"play",onSceneEnd:()=>{}}})),P&&w.createElement(la,{key:`${C}:${D}`,label:P.props.label,onSkip:h>1?J:void 0},w.createElement(wi,{...P.props,internal:{active:true,paused:x,mode:"play",onSceneEnd:()=>{}}})),f.filter(M=>{let F=M.props.fromScene??0,V=M.props.toScene??1/0;return C>=F&&C<=V}),W&&w.createElement("div",{"aria-hidden":true,style:{position:"absolute",left:14,bottom:14,zIndex:30,width:16,height:16,opacity:.55,color:"#fff",mixBlendMode:"difference",pointerEvents:"none"}},w.createElement("svg",{viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},w.createElement("path",{d:"M28 0L32 4V10L26 4H6L4 6V26L6 28H16L26 18V24L18 32H4L0 28V4L4 0H28ZM32 32H28V18H16V14H32V32Z",fill:"currentColor"}))),i&&h>0&&!W&&w.createElement("div",{role:"group","aria-label":"Motion playback controls",className:"gds-motion-transport",style:{position:"absolute",right:16,bottom:16,display:"flex",gap:4,alignItems:"center",padding:"4px 6px",borderRadius:999,background:"rgba(15,15,17,0.55)",backdropFilter:"blur(10px)",boxShadow:"0 6px 22px rgba(0,0,0,0.25)"}},w.createElement("style",null,`
|
|
383
|
+
`,hu={rise:"gdsMotionScreenRise 900ms cubic-bezier(0.22, 1, 0.36, 1) both",float:"gdsMotionScreenFloat 6s ease-in-out infinite alternate","tilt-settle":"gdsMotionScreenTilt 1800ms cubic-bezier(0.22, 1, 0.36, 1) both",drift:"gdsMotionScreenDrift 9s ease-in-out infinite alternate",none:null},Xi=4e3,Ru=420;function Nn({label:e,durationMs:t,fill:o,transition:a="fade",transitionMs:r,className:n,style:i,children:c,internal:s}){let{active:l,paused:p,mode:m,onSceneEnd:u}=s,g=m==="play"&&l,h=t!=null,f=y.useRef(0),b=y.useRef(0),v=y.useRef(false),k=y.useRef(!h),x=y.useCallback(()=>{v.current||(v.current=true,u());},[u]),w=y.useRef(null),S=y.useRef(p);S.current=p;let C=y.useRef(false),M=y.useCallback(()=>{if(k.current&&!(f.current>0&&b.current<f.current)){if(S.current){C.current=true;return}w.current||(w.current=setTimeout(x,Ru));}},[x]);y.useEffect(()=>{if(p){w.current&&(clearTimeout(w.current),w.current=null,C.current=true);return}C.current&&(C.current=false,M());},[p,M]);let I=y.useCallback(()=>{f.current+=1;let E=false;return {done:()=>{E||(E=true,b.current+=1,M());},cancel:()=>{f.current-=1,E?b.current-=1:M();}}},[M]),B=y.useRef(t??Xi);y.useEffect(()=>{if(g)return B.current=t??Xi,v.current=false,k.current=!h,()=>{w.current&&(clearTimeout(w.current),w.current=null);}},[g,t,h]),y.useEffect(()=>{if(!g||p||!h&&f.current>0)return;let E=Date.now(),W=setTimeout(()=>{k.current=true,M();},B.current);return ()=>{clearTimeout(W),B.current=Math.max(0,B.current-(Date.now()-E));}},[g,p,h,M]);let z=y.useMemo(()=>({mode:m,active:l,paused:p,register:I}),[m,l,p,I]);return y.createElement(yu.Provider,{value:z},y.createElement("div",{"data-gds-part":"motion-scene",className:d("gds-motion-scene",n),style:{position:"absolute",inset:0,background:o,isolation:"isolate",...g?(()=>{let E=r??Su[a],W=Lv(a,E);return W?{animation:W}:{}})():{},...i}},y.createElement("style",null,Dv),y.createElement("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",gap:"4%",padding:"6%"}},c)))}function Av(e){return y.createElement(Nn,{...e,internal:{active:true,paused:false,mode:"play",onSceneEnd:()=>{}}})}var Zi={display:"inline-flex",alignItems:"center",justifyContent:"center",width:28,height:28,borderRadius:999,border:"none",background:"transparent",color:"#fff",cursor:"pointer"};function Iv(){return y.createElement("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":true},y.createElement("path",{d:"M8 5v14l11-7z"}))}function Hv(){return y.createElement("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":true},y.createElement("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1"}),y.createElement("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1"}))}function bu(){return y.createElement("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":true},y.createElement("path",{d:"M3 12a9 9 0 1 0 3-6.7L3 8"}),y.createElement("path",{d:"M3 3v5h5"}))}function Fv(e){return y.isValidElement(e)&&e.type===Qi}function zv(e){return y.isValidElement(e)&&e.type!==Qi}var Vv=1500,Bv=2400,Ov=1150;function _v(e){let t=e.shots&&e.shots.length>0?e.shots:[{}],o=e.enter===true?Vv:0;return t.forEach((a,r)=>{o+=(a.hold??Bv)+(r>0?a.trans??Ov:0);}),o}function Cu(e,t,o){t>7||y.Children.forEach(e,a=>{if(!y.isValidElement(a))return;if(a.type===xu){o.push(_v(a.props));return}if(a.type===ku){let n=a.props;o.push(n.durationMs??wu[n.template??"title"]);return}let r=a.props.children;r&&Cu(r,t+1,o);});}function Gv(e){let t=[];Cu(e.props.children,0,t);let o=t.length>0?Math.max(...t):0,a=e.props.durationMs??0;return (Math.max(o,a)||(e.props.durationMs??Xi))+Ru}function vu(e,t,o){if(!(!e||typeof e.getAnimations!="function"))try{for(let a of e.getAnimations({subtree:!0}))try{a.currentTime=t,o?a.pause():a.play();}catch{}}catch{}}function Wv({view:e="play",aspect:t="auto",stage:o=Tv,backdrop:a,autoplay:r=true,loop:n=false,controls:i=true,className:c,style:s,children:l}){let p=Co(),m=y.Children.toArray(l),u=m.filter(zv),g=m.filter(Fv),h=u.length,f=t!=="auto"?Mv(t):null,b=f?t:"16 / 9",v=f&&f<1?"clamp(150px, 17%, 250px)":"clamp(260px, 30%, 440px)",[k,x]=y.useState(0),[w,S]=y.useState(!r),[C,M]=y.useState(false),[I,B]=y.useState(0),[z,E]=y.useState(null),W=z??e,[oe,he]=y.useState(false),Y=y.useMemo(()=>{let _=u.map(ne=>Gv(ne)),U=[],V=0;for(let ne of _)U.push(V),V+=ne;return {durations:_,starts:U,totalMs:Math.max(V,1)}},[u]),H=y.useRef(0),R=y.useRef(null),F=y.useRef(0);F.current=k;let re=y.useCallback(_=>{let{starts:U,durations:V}=Y;for(let ne=U.length-1;ne>=0;ne--)if(_>=U[ne])return Math.min(ne,U.length-1);return 0},[Y]),Z=y.useCallback(()=>{let _=R.current?.querySelectorAll('[data-gds-part="motion-scene"]');return _&&_.length>0?_[_.length-1]:null},[]),G=y.useCallback((_,U)=>{let V=Math.max(0,Math.min(_,Y.totalMs-1));H.current=V,M(false),U?.resume&&S(false);let ne=re(V);if(ne===F.current&&!U?.resume){let _e=V-Y.starts[ne];vu(Z(),_e,Q.current);try{window.parent?.postMessage({type:"grade:motion-time",timeMs:Math.round(V),totalMs:Y.totalMs,durations:Y.durations},"*");}catch{}return}try{window.parent?.postMessage({type:"grade:motion-time",timeMs:Math.round(V),totalMs:Y.totalMs,durations:Y.durations},"*");}catch{}let Ae=ne;x(Ae),B(_e=>_e+1);let ue=V-Y.starts[Ae],Ut=!U?.resume&&Q.current;requestAnimationFrame(()=>requestAnimationFrame(()=>{vu(Z(),ue,Ut);}));},[Y,re,Z]),Q=y.useRef(w);Q.current=w;let Re=y.useRef(Y);Re.current=Y,y.useEffect(()=>{if(w||C||p||W!=="play"||h===0)return;let _=0,U=performance.now(),V=0,ne=Ae=>{let ue=Re.current,Ut=Math.min(Ae-U,120);if(U=Ae,H.current+=Ut,H.current>=ue.totalMs)if(n)H.current=0,x(0),B(_e=>_e+1);else {H.current=ue.totalMs,M(true),S(true);return}else {let{starts:_e}=ue,Dt=0;for(let Fe=_e.length-1;Fe>=0;Fe--)if(H.current>=_e[Fe]){Dt=Fe;break}Dt!==F.current&&(x(Dt),B(Fe=>Fe+1));}if(Ae-V>150){V=Ae;try{window.parent?.postMessage({type:"grade:motion-time",timeMs:Math.round(H.current),totalMs:ue.totalMs,durations:ue.durations},"*");}catch{}}_=requestAnimationFrame(ne);};return _=requestAnimationFrame(ne),()=>cancelAnimationFrame(_)},[w,C,p,W,h,n]),y.useEffect(()=>{if(p||W!=="play")return;let _=R.current?.querySelectorAll('[data-gds-part="motion-scene"]'),U=_?.[_.length-1]??null;if(!(!U||typeof U.getAnimations!="function"))try{for(let V of U.getAnimations({subtree:!0}))try{w?V.pause():V.play();}catch{}}catch{}},[w,p,W,k,I]);let[Oe,de]=y.useState(null),O=y.useRef(null);y.useEffect(()=>{let _=O.current;if(O.current=k,_===null||_===k)return;let U=u[k];if(!U)return;let V=U.props.transition??"fade",ne=U.props.transitionMs??Su[V]??0;if(ne<=0||Q.current){de(null);return}de(_);let Ae=setTimeout(()=>de(null),ne+60);return ()=>clearTimeout(Ae)},[k,I]);let ye=y.useCallback(_=>{G(Y.starts[Math.max(0,Math.min(_,h-1))]??0,{resume:true});},[G,Y,h]),pe=y.useCallback(()=>{let _=F.current+1;_<h?G(Y.starts[_],{resume:true}):n&&h>0?G(0,{resume:true}):(M(true),S(true));},[h,n,G,Y]);y.useEffect(()=>{if(p||typeof window>"u")return;let _=U=>{let V=U.data;if(!(!V||V.type!=="grade:motion-control")){if(V.action==="set-view"){(V.view==="play"||V.view==="strip")&&E(V.view);return}if(V.action==="export-mode"){he(!!V.enabled);return}if(V.action==="seek"&&typeof V.ms=="number"){E("play"),G(V.ms);return}typeof V.scene=="number"?(E("play"),G(Y.starts[Math.max(0,Math.min(h-1,Math.round(V.scene)))]??0)):V.action==="pause"?S(true):V.action==="play"?(E("play"),M(false),S(false)):V.action==="restart"&&(E("play"),ye(0));}};return window.addEventListener("message",_),()=>window.removeEventListener("message",_)},[p,ye,h,G,Y]);let xe=y.useRef(G);xe.current=G,y.useEffect(()=>{if(typeof window>"u")return;let _=window;return _.__gradeMotion={ready:true,meta:()=>({totalMs:Re.current.totalMs,durations:Re.current.durations,count:h}),enterRenderMode:()=>{S(true),E("play"),he(true);},renderFrame:U=>new Promise(V=>{S(true),xe.current(Math.max(0,U));let ne=false,Ae=()=>{ne||(ne=true,V());};requestAnimationFrame(()=>requestAnimationFrame(Ae)),setTimeout(Ae,4e3);})},()=>{delete window.__gradeMotion;}},[h]),y.useEffect(()=>{if(p||typeof window>"u")return;let _=U=>{if(U.code!=="Space")return;let V=U.target;V&&(V.tagName==="INPUT"||V.tagName==="TEXTAREA"||V.tagName==="BUTTON"||V.isContentEditable)||(U.preventDefault(),E("play"),M(false),S(ne=>!ne));};return window.addEventListener("keydown",_),()=>window.removeEventListener("keydown",_)},[p]),y.useEffect(()=>{if(!(p||typeof window>"u"))try{window.parent?.postMessage({type:"grade:motion-state",scene:k,paused:w,done:C,count:h,view:W},"*");}catch{}},[p,k,w,C,h,W]);let $a=e==="strip"||z==="strip";if(W==="strip"||p){let U=!$a&&u.length>2,V=U?u.slice(0,2):u,ne=u.length-V.length;return y.createElement("div",{"data-gds-part":"motion",className:d("gds-motion",c),style:{position:"absolute",inset:0,overflow:"hidden",background:o,...s}},a&&y.createElement("div",{"aria-hidden":true,style:{position:"absolute",inset:0,pointerEvents:"none"}},a),y.createElement("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",gap:28,padding:"0 48px",overflowX:"auto"}},V.map((Ae,ue)=>y.createElement("figure",{key:ue,style:{margin:0,flex:"0 0 auto",width:v}},y.createElement("figcaption",{style:{marginBottom:8,fontSize:12,fontWeight:500,color:"rgba(255,255,255,0.66)"}},Ae.props.label??`Scene ${ue+1}`),y.createElement("div",{style:{position:"relative",aspectRatio:b,borderRadius:10,overflow:"hidden",background:Ae.props.fill??"rgba(127,127,127,0.10)",border:"1px solid rgba(127,127,127,0.22)",boxShadow:"0 10px 34px rgba(0,0,0,0.28)"}},y.createElement(Tr,{label:Ae.props.label},y.createElement(Nn,{...Ae.props,fill:void 0,internal:{active:false,paused:true,mode:"strip",onSceneEnd:()=>{}}}))))),U&&ne>0&&y.createElement("figure",{style:{margin:0,flex:"0 0 auto",width:v}},y.createElement("figcaption",{style:{marginBottom:8,fontSize:12,fontWeight:500,color:"rgba(255,255,255,0.66)"}},"\u2026"),y.createElement("div",{style:{aspectRatio:b,borderRadius:10,display:"grid",placeItems:"center",border:"1px dashed rgba(127,127,127,0.4)",color:"rgba(255,255,255,0.55)",fontSize:14,fontWeight:600}},"+",ne," scene",ne===1?"":"s"))))}let Ke=u[Math.min(k,Math.max(0,h-1))],No=y.createElement("div",{ref:R,style:{position:"absolute",inset:0,overflow:"hidden",background:o}},a&&y.createElement("div",{"aria-hidden":true,style:{position:"absolute",inset:0,pointerEvents:"none"}},a),Oe!==null&&Oe!==k&&u[Oe]&&y.createElement(Tr,{key:`out:${Oe}`,label:u[Oe].props.label},y.createElement(Nn,{...u[Oe].props,transition:"none",internal:{active:false,paused:true,mode:"play",onSceneEnd:()=>{}}})),Ke&&y.createElement(Tr,{key:`${k}:${I}`,label:Ke.props.label,onSkip:h>1?pe:void 0},y.createElement(Nn,{...Ke.props,internal:{active:true,paused:w,mode:"play",onSceneEnd:()=>{}}})),g.filter(_=>{let U=_.props.fromScene??0,V=_.props.toScene??1/0;return k>=U&&k<=V}),oe&&y.createElement("div",{"aria-hidden":true,style:{position:"absolute",left:14,bottom:14,zIndex:30,width:16,height:16,opacity:.55,color:"#fff",mixBlendMode:"difference",pointerEvents:"none"}},y.createElement("svg",{viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},y.createElement("path",{d:"M28 0L32 4V10L26 4H6L4 6V26L6 28H16L26 18V24L18 32H4L0 28V4L4 0H28ZM32 32H28V18H16V14H32V32Z",fill:"currentColor"}))),i&&h>0&&!oe&&y.createElement("div",{role:"group","aria-label":"Motion playback controls",className:"gds-motion-transport",style:{position:"absolute",right:16,bottom:16,display:"flex",gap:4,alignItems:"center",padding:"4px 6px",borderRadius:999,background:"rgba(15,15,17,0.55)",backdropFilter:"blur(10px)",boxShadow:"0 6px 22px rgba(0,0,0,0.25)"}},y.createElement("style",null,`
|
|
384
384
|
.gds-motion-transport [data-gds-transport-extras] {
|
|
385
385
|
display: flex; align-items: center; gap: 4px;
|
|
386
386
|
max-width: 0; opacity: 0; overflow: hidden;
|
|
@@ -390,7 +390,7 @@ applyThemeToRoot(theme, "light"); // or "dark" / "superLight" / "superDark"
|
|
|
390
390
|
.gds-motion-transport:focus-within [data-gds-transport-extras] {
|
|
391
391
|
max-width: 360px; opacity: 1;
|
|
392
392
|
}
|
|
393
|
-
`),
|
|
393
|
+
`),y.createElement("button",{type:"button",onClick:()=>C?ye(0):S(_=>!_),"aria-label":C?"Replay":w?"Play":"Pause",style:Zi},C?y.createElement(bu,null):w?y.createElement(Iv,null):y.createElement(Hv,null)),y.createElement("div",{"data-gds-transport-extras":true},y.createElement("button",{type:"button",onClick:()=>ye(0),"aria-label":"Restart",style:Zi},y.createElement(bu,null)),y.createElement("div",{style:{display:"flex",gap:5,padding:"0 6px"},"aria-hidden":true},u.map((_,U)=>y.createElement("button",{key:U,type:"button",onClick:()=>ye(U),"aria-label":`Go to ${_.props.label??`scene ${U+1}`}`,tabIndex:-1,style:{...Zi,width:14,height:14}},y.createElement("span",{style:{width:6,height:6,borderRadius:999,background:U===k?"#fff":"rgba(255,255,255,0.35)",transition:"background 200ms ease"}})))))),C&&y.createElement("button",{type:"button",onClick:()=>ye(0),"aria-label":"Replay",style:{position:"absolute",inset:0,margin:"auto",width:64,height:64,display:"grid",placeItems:"center",borderRadius:999,border:"none",color:"#fff",background:"rgba(15,15,17,0.55)",backdropFilter:"blur(10px)",boxShadow:"0 8px 30px rgba(0,0,0,0.35)",cursor:"pointer"}},y.createElement("svg",{width:"26",height:"26",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":true},y.createElement("path",{d:"M3 12a9 9 0 1 0 3-6.7L3 8"}),y.createElement("path",{d:"M3 3v5h5"}))));return y.createElement("div",{"data-gds-part":"motion",className:d("gds-motion",c),style:{position:"absolute",inset:0,overflow:"hidden",background:f?oe?"#000":"transparent":o,...s}},f?y.createElement(Nv,{ratio:f},No):No)}var Pu=({renderer:e,scene:t,camera:o,preset:a,width:r,height:n})=>{let i=new EffectComposer(e);i.setSize(r,n),i.addPass(new RenderPass(t,o));let c=new BloomEffect({intensity:0,luminanceThreshold:.6,radius:.6,kernelSize:KernelSize.MEDIUM}),s=new NoiseEffect({blendFunction:BlendFunction.OVERLAY});s.blendMode.opacity.value=0;let l=new ScanlineEffect({blendFunction:BlendFunction.OVERLAY,density:1.25});l.blendMode.opacity.value=0;let p=new VignetteEffect({darkness:0,offset:.5}),m=new ChromaticAberrationEffect({offset:new Ie.Vector2(0,0),radialModulation:false,modulationOffset:.15}),u=new GlitchEffect({chromaticAberrationOffset:new Ie.Vector2(0,0),columns:.05});u.minStrength=0,u.maxStrength=0,u.mode=GlitchMode.DISABLED,u.blendMode.opacity.value=0,i.addPass(new EffectPass(o,c)),i.addPass(new EffectPass(o,s,l,p)),i.addPass(new EffectPass(o,m)),i.addPass(new EffectPass(o,u));function g(h){let f=h.effects;c.intensity=f.bloom?.intensity??0,c.luminanceMaterial&&f.bloom?.luminanceThreshold!==void 0&&(c.luminanceMaterial.threshold=f.bloom.luminanceThreshold),s.blendMode.opacity.value=f.noise?.intensity??0,l.density=f.scanlines?.density??1.25,l.blendMode.opacity.value=f.scanlines?.opacity??0,p.darkness=f.vignette?.darkness??0,p.offset=f.vignette?.offset??.5;let b=f.chromatic?.offset??0;m.offset?.set(b,b);let v=f.glitch?.strength?.[1]??0;f.glitch&&v>0?(u.mode=GlitchMode.SPORADIC,u.blendMode.opacity.value=1,u.minStrength=f.glitch.strength?.[0]??0,u.maxStrength=v):(u.mode=GlitchMode.DISABLED,u.blendMode.opacity.value=0,u.minStrength=0,u.maxStrength=0);}return g(a),{composer:i,setPreset:g,resize:(h,f)=>i.setSize(h,f),dispose:()=>{i.dispose();}}};var _a=3e3,os=400,Qv=80,Mu=({width:e,height:t,palette:o})=>{let a=new Ie.Scene;a.background=new Ie.Color(o.background);let r=new Ie.PerspectiveCamera(70,e/t,.1,os*2);r.position.z=0;let n=new Float32Array(_a*6),i=new Float32Array(_a*6),c=new Float32Array(_a),s=new Ie.Color(o.primary),l=new Ie.Color(o.accent);function p(b,v){let k=Math.random()*Math.PI*2,x=Qv*Math.pow(Math.random(),.6),w=Math.cos(k)*x,S=Math.sin(k)*x,C=v?-Math.random()*os:-os;c[b]=C,n[b*6+0]=w,n[b*6+1]=S,n[b*6+2]=C,n[b*6+3]=w,n[b*6+4]=S,n[b*6+5]=C-2,i[b*6+0]=s.r,i[b*6+1]=s.g,i[b*6+2]=s.b,i[b*6+3]=l.r,i[b*6+4]=l.g,i[b*6+5]=l.b;}for(let b=0;b<_a;b++)p(b,true);let m=new Ie.BufferGeometry;m.setAttribute("position",new Ie.BufferAttribute(n,3)),m.setAttribute("color",new Ie.BufferAttribute(i,3));let u=new Ie.LineBasicMaterial({vertexColors:true,transparent:true,opacity:.95,blending:Ie.AdditiveBlending}),g=new Ie.LineSegments(m,u);a.add(g);let h=60,f=6;return {scene:a,camera:r,update:(b,v)=>{let k=m.attributes.position.array;for(let x=0;x<_a;x++){let w=x*6;k[w+2]+=h*v,k[w+5]=k[w+2]-f,k[w+2]>5&&p(x,false);}m.attributes.position.needsUpdate=true;},resize:(b,v)=>{let k=r;k.aspect=b/v,k.updateProjectionMatrix();},setPalette:b=>{a.background=new Ie.Color(b.background);let v=new Ie.Color(b.primary),k=new Ie.Color(b.accent),x=m.attributes.color.array;for(let w=0;w<_a;w++)x[w*6+0]=v.r,x[w*6+1]=v.g,x[w*6+2]=v.b,x[w*6+3]=k.r,x[w*6+4]=k.g,x[w*6+5]=k.b;m.attributes.color.needsUpdate=true;},dispose:()=>{m.dispose(),u.dispose();}}};var ey=`
|
|
394
394
|
precision highp float;
|
|
395
395
|
varying vec2 vUv;
|
|
396
396
|
uniform float uTime;
|
|
@@ -428,19 +428,19 @@ applyThemeToRoot(theme, "light"); // or "dark" / "superLight" / "superDark"
|
|
|
428
428
|
|
|
429
429
|
gl_FragColor = vec4(col, 1.0);
|
|
430
430
|
}
|
|
431
|
-
`,
|
|
431
|
+
`,ty=`
|
|
432
432
|
varying vec2 vUv;
|
|
433
433
|
void main() {
|
|
434
434
|
vUv = uv;
|
|
435
435
|
gl_Position = vec4(position.xy, 0.0, 1.0);
|
|
436
436
|
}
|
|
437
|
-
`,
|
|
437
|
+
`,Nu=({width:e,height:t,palette:o})=>{let a=new Ie.Scene,r=new Ie.OrthographicCamera(-1,1,1,-1,0,1),n={uTime:{value:0},uResolution:{value:new Ie.Vector2(e,t)},uBackground:{value:new Ie.Color(o.background)},uPrimary:{value:new Ie.Color(o.primary)},uSecondary:{value:new Ie.Color(o.secondary)},uAccent:{value:new Ie.Color(o.accent)}},i=new Ie.ShaderMaterial({uniforms:n,vertexShader:ty,fragmentShader:ey,depthTest:false,depthWrite:false}),c=new Ie.PlaneGeometry(2,2),s=new Ie.Mesh(c,i);return a.add(s),{scene:a,camera:r,update:p=>{n.uTime.value=p;},resize:(p,m)=>{n.uResolution.value.set(p,m);},setPalette:p=>{n.uBackground.value.set(p.background),n.uPrimary.value.set(p.primary),n.uSecondary.value.set(p.secondary),n.uAccent.value.set(p.accent);},dispose:()=>{c.dispose(),i.dispose();}}};var oy=`
|
|
438
438
|
varying vec2 vUv;
|
|
439
439
|
void main() {
|
|
440
440
|
vUv = uv;
|
|
441
441
|
gl_Position = vec4(position.xy, 0.0, 1.0);
|
|
442
442
|
}
|
|
443
|
-
`,
|
|
443
|
+
`,ay=`
|
|
444
444
|
precision highp float;
|
|
445
445
|
varying vec2 vUv;
|
|
446
446
|
uniform float uTime;
|
|
@@ -497,13 +497,13 @@ applyThemeToRoot(theme, "light"); // or "dark" / "superLight" / "superDark"
|
|
|
497
497
|
|
|
498
498
|
gl_FragColor = vec4(col, 1.0);
|
|
499
499
|
}
|
|
500
|
-
`,
|
|
500
|
+
`,Eu=({width:e,height:t,palette:o})=>{let a=new Ie.Scene,r=new Ie.OrthographicCamera(-1,1,1,-1,0,1),n={uTime:{value:0},uResolution:{value:new Ie.Vector2(e,t)},uBackground:{value:new Ie.Color(o.background)},uPrimary:{value:new Ie.Color(o.primary)},uSecondary:{value:new Ie.Color(o.secondary)},uAccent:{value:new Ie.Color(o.accent)}},i=new Ie.ShaderMaterial({uniforms:n,vertexShader:oy,fragmentShader:ay,depthTest:false,depthWrite:false}),c=new Ie.PlaneGeometry(2,2),s=new Ie.Mesh(c,i);return a.add(s),{scene:a,camera:r,update:p=>{n.uTime.value=p;},resize:(p,m)=>{n.uResolution.value.set(p,m);},setPalette:p=>{n.uBackground.value.set(p.background),n.uPrimary.value.set(p.primary),n.uSecondary.value.set(p.secondary),n.uAccent.value.set(p.accent);},dispose:()=>{c.dispose(),i.dispose();}}};var ry=`
|
|
501
501
|
varying vec2 vUv;
|
|
502
502
|
void main() {
|
|
503
503
|
vUv = uv;
|
|
504
504
|
gl_Position = vec4(position.xy, 0.0, 1.0);
|
|
505
505
|
}
|
|
506
|
-
`,
|
|
506
|
+
`,ny=`
|
|
507
507
|
precision highp float;
|
|
508
508
|
varying vec2 vUv;
|
|
509
509
|
uniform float uTime;
|
|
@@ -573,8 +573,8 @@ applyThemeToRoot(theme, "light"); // or "dark" / "superLight" / "superDark"
|
|
|
573
573
|
|
|
574
574
|
gl_FragColor = vec4(col, 1.0);
|
|
575
575
|
}
|
|
576
|
-
`,
|
|
577
|
-
`)}function
|
|
576
|
+
`,Lu=({palette:e})=>{let t=new Ie.Scene,o=new Ie.OrthographicCamera(-1,1,1,-1,0,1),a={uTime:{value:0},uBackground:{value:new Ie.Color(e.background)},uPrimary:{value:new Ie.Color(e.primary)},uSecondary:{value:new Ie.Color(e.secondary)},uAccent:{value:new Ie.Color(e.accent)}},r=new Ie.ShaderMaterial({uniforms:a,vertexShader:ry,fragmentShader:ny,depthTest:false,depthWrite:false}),n=new Ie.PlaneGeometry(2,2),i=new Ie.Mesh(n,r);return t.add(i),{scene:t,camera:o,update:s=>{a.uTime.value=s;},setPalette:s=>{a.uBackground.value.set(s.background),a.uPrimary.value.set(s.primary),a.uSecondary.value.set(s.secondary),a.uAccent.value.set(s.accent);},dispose:()=>{n.dispose(),r.dispose();}}};function as(e){return "u"+e.charAt(0).toUpperCase()+e.slice(1)}var Au=8;function iy(e){let t=[];for(let o of e){if(o.type==="divider")continue;let a=as(o.key);if(o.type==="color")t.push(`uniform vec3 ${a};`);else if(o.type==="colorList"){let r=Math.min(o.max??o.default.length,Au);t.push(`uniform vec3 ${a}[${r}];`,`uniform int ${a}Count;`);}else t.push(`uniform float ${a};`);}return t.join(`
|
|
577
|
+
`)}function Du(e){let t=new Ie.Color;try{t.set(e);}catch{t.setRGB(.5,.5,.5);}return t}var Iu=`
|
|
578
578
|
precision highp float;
|
|
579
579
|
varying vec2 vUv;
|
|
580
580
|
uniform float uTime;
|
|
@@ -584,16 +584,16 @@ applyThemeToRoot(theme, "light"); // or "dark" / "superLight" / "superDark"
|
|
|
584
584
|
uniform vec3 uSecondary;
|
|
585
585
|
uniform vec3 uAccent;
|
|
586
586
|
uniform vec3 uBackground;
|
|
587
|
-
`,
|
|
587
|
+
`,sy=`
|
|
588
588
|
varying vec2 vUv;
|
|
589
589
|
void main() {
|
|
590
590
|
vUv = uv;
|
|
591
591
|
gl_Position = vec4(position.xy, 0.0, 1.0);
|
|
592
592
|
}
|
|
593
|
-
`,
|
|
594
|
-
${t.trim()}`),this.name="ShaderCompileError",this.log=t,this.source=o;}};function
|
|
593
|
+
`,Ga=class extends Error{log;source;constructor(t,o){super(`Fragment shader failed to compile:
|
|
594
|
+
${t.trim()}`),this.name="ShaderCompileError",this.log=t,this.source=o;}};function ly(e,t){let o=e.getContext(),a=o.createShader(o.FRAGMENT_SHADER);if(!a)throw new Error("Unable to allocate fragment shader");o.shaderSource(a,t),o.compileShader(a);let r=o.getShaderParameter(a,o.COMPILE_STATUS),n=o.getShaderInfoLog(a)||"";if(o.deleteShader(a),!r)throw new Ga(n,t)}function je(e,t){return ({renderer:o,width:a,height:r,palette:n})=>{let i=t?.length?iy(t):"",c=`${Iu}
|
|
595
595
|
${i}
|
|
596
|
-
${e}`;
|
|
596
|
+
${e}`;ly(o,c);let s=new Ie.Scene,l=new Ie.OrthographicCamera(-1,1,1,-1,0,1),p={uTime:{value:0},uResolution:{value:new Ie.Vector2(a,r)},uMouse:{value:new Ie.Vector2(.5,.5)},uPrimary:{value:new Ie.Color(n.primary)},uSecondary:{value:new Ie.Color(n.secondary)},uAccent:{value:new Ie.Color(n.accent)},uBackground:{value:new Ie.Color(n.background)}};if(t?.length)for(let b of t){if(b.type==="divider")continue;let v=as(b.key);if(b.type==="color")p[v]={value:Du(b.default)};else if(b.type==="colorList"){let k=Math.min(b.max??b.default.length,Au),x=Array.from({length:k},(w,S)=>Du(b.default[Math.min(S,b.default.length-1)]??"#888"));p[v]={value:x},p[`${v}Count`]={value:Math.min(b.default.length,k)};}else if(b.type==="select"||b.type==="segmented"){let k=b.options.findIndex(x=>x.value===b.default);p[v]={value:Math.max(0,k)};}else b.type==="toggle"?p[v]={value:b.default?1:0}:p[v]={value:b.default};}let m=new Map;for(let b of t??[])b.type!=="divider"&&m.set(b.key,b);let u=new Ie.ShaderMaterial({uniforms:p,vertexShader:sy,fragmentShader:c,depthTest:false,depthWrite:false}),g=new Ie.PlaneGeometry(2,2),h=new Ie.Mesh(g,u);return s.add(h),{scene:s,camera:l,update:b=>{p.uTime.value=b;},resize:(b,v)=>{p.uResolution.value.set(b,v);},setPalette:b=>{p.uPrimary.value.set(b.primary),p.uSecondary.value.set(b.secondary),p.uAccent.value.set(b.accent),p.uBackground.value.set(b.background);},setMouse:(b,v)=>{p.uMouse.value.set(b,v);},setParams:b=>{for(let[v,k]of Object.entries(b)){let x=m.get(v);if(!x)continue;let w=as(v),S=p[w];if(S)if(x.type==="color")S.value.set(String(k));else if(x.type==="colorList"){let C=Array.isArray(k)?k:[],M=S.value;for(let B=0;B<M.length;B++){let z=C[Math.min(B,C.length-1)];z&&M[B].set(z);}let I=p[`${w}Count`];I&&(I.value=Math.min(C.length,M.length));}else if(x.type==="select"||x.type==="segmented"){let C=x.options.findIndex(M=>M.value===k);S.value=Math.max(0,C);}else x.type==="toggle"?S.value=k?1:0:S.value=Number(k);}},dispose:()=>{g.dispose(),u.dispose();}}}}var Hu=je(`
|
|
597
597
|
void main() {
|
|
598
598
|
vec2 uv = vUv;
|
|
599
599
|
float t = uTime * 0.15;
|
|
@@ -612,7 +612,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
612
612
|
col = mix(col, uAccent, w3 * 0.85);
|
|
613
613
|
gl_FragColor = vec4(col, 1.0);
|
|
614
614
|
}
|
|
615
|
-
`),
|
|
615
|
+
`),Fu=je(`
|
|
616
616
|
float uHash(vec2 p) {
|
|
617
617
|
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
|
|
618
618
|
}
|
|
@@ -664,7 +664,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
664
664
|
|
|
665
665
|
gl_FragColor = vec4(col, 1.0);
|
|
666
666
|
}
|
|
667
|
-
`),
|
|
667
|
+
`),zu=je(`
|
|
668
668
|
float dHash(vec2 p) {
|
|
669
669
|
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
|
|
670
670
|
}
|
|
@@ -708,7 +708,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
708
708
|
vec3 col = mix(uBackground, dotCol, dot_ * (0.78 + 0.22 * flow));
|
|
709
709
|
gl_FragColor = vec4(col, 1.0);
|
|
710
710
|
}
|
|
711
|
-
`),
|
|
711
|
+
`),Vu=je(`
|
|
712
712
|
float gHash(vec2 p) {
|
|
713
713
|
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
|
|
714
714
|
}
|
|
@@ -746,7 +746,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
746
746
|
|
|
747
747
|
gl_FragColor = vec4(col, 1.0);
|
|
748
748
|
}
|
|
749
|
-
`),
|
|
749
|
+
`),Bu=je(`
|
|
750
750
|
void main() {
|
|
751
751
|
vec2 uv = vUv;
|
|
752
752
|
float t = uTime * 0.4;
|
|
@@ -757,7 +757,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
757
757
|
col = mix(col, uAccent, smoothstep(0.85, 1.0, m));
|
|
758
758
|
gl_FragColor = vec4(col, 1.0);
|
|
759
759
|
}
|
|
760
|
-
`),
|
|
760
|
+
`),Ou=je(`
|
|
761
761
|
float gHash(vec2 p) {
|
|
762
762
|
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
|
|
763
763
|
}
|
|
@@ -849,7 +849,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
849
849
|
|
|
850
850
|
gl_FragColor = vec4(col, 1.0);
|
|
851
851
|
}
|
|
852
|
-
`),
|
|
852
|
+
`),_u=je(`
|
|
853
853
|
float hHash(vec2 p) {
|
|
854
854
|
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
|
|
855
855
|
}
|
|
@@ -916,7 +916,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
916
916
|
|
|
917
917
|
gl_FragColor = vec4(col, 1.0);
|
|
918
918
|
}
|
|
919
|
-
`),
|
|
919
|
+
`),rs=[{type:"slider",key:"speed",label:"Speed",min:0,max:3,step:.01,default:1},{type:"slider",key:"scale",label:"Scale",min:.4,max:2.5,step:.01,default:1},{type:"slider",key:"viscosity",label:"Viscosity",min:0,max:1,step:.01,default:.55},{type:"slider",key:"contrast",label:"Contrast",min:0,max:1,step:.01,default:.45},{type:"divider",key:"palette",label:"Colours"},{type:"color",key:"colorA",label:"Liquid A",slot:"secondary",default:"#6d5cff"},{type:"color",key:"colorB",label:"Liquid B",slot:"primary",default:"#22d3ee"},{type:"color",key:"colorC",label:"Core",slot:"accent",default:"#f0abfc"},{type:"divider",key:"interact",label:"Interaction"},{type:"slider",key:"mouseWarp",label:"Pointer warp",min:0,max:2,step:.01,default:.8},{type:"slider",key:"grain",label:"Grain",min:0,max:1.5,step:.01,default:1}],Gu=je(`
|
|
920
920
|
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
|
|
921
921
|
float noise(vec2 p){
|
|
922
922
|
vec2 i=floor(p), f=fract(p); f=f*f*(3.0-2.0*f);
|
|
@@ -961,7 +961,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
961
961
|
col = clamp(col, 0.0, 1.0);
|
|
962
962
|
gl_FragColor = vec4(col, 1.0);
|
|
963
963
|
}
|
|
964
|
-
`,
|
|
964
|
+
`,rs),ns=[{type:"slider",key:"speed",label:"Speed",min:0,max:3,step:.01,default:1},{type:"slider",key:"bandCount",label:"Curtains",min:1,max:5,step:1,default:3},{type:"slider",key:"waviness",label:"Waviness",min:0,max:2,step:.01,default:1},{type:"slider",key:"height",label:"Height",min:.2,max:.9,step:.01,default:.5},{type:"slider",key:"glow",label:"Glow",min:.2,max:2.5,step:.01,default:1.2},{type:"divider",key:"palette",label:"Aurora colours"},{type:"color",key:"colorLow",label:"Low (ground)",slot:"primary",default:"#22e0a3"},{type:"color",key:"colorMid",label:"Mid",slot:"secondary",default:"#19c2d6"},{type:"color",key:"colorHigh",label:"High (sky)",slot:"accent",default:"#9b5cff"},{type:"divider",key:"interact",label:"Interaction"},{type:"slider",key:"mouseSway",label:"Pointer sway",min:0,max:1,step:.01,default:.35},{type:"slider",key:"grain",label:"Grain",min:0,max:1.5,step:.01,default:1}],Wu=je(`
|
|
965
965
|
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
|
|
966
966
|
float noise(vec2 p){
|
|
967
967
|
vec2 i=floor(p), f=fract(p); f=f*f*(3.0-2.0*f);
|
|
@@ -1000,7 +1000,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
1000
1000
|
col = clamp(col, 0.0, 1.0);
|
|
1001
1001
|
gl_FragColor = vec4(col, 1.0);
|
|
1002
1002
|
}
|
|
1003
|
-
`,
|
|
1003
|
+
`,ns),is=[{type:"slider",key:"speed",label:"Speed",min:0,max:3,step:.01,default:1},{type:"slider",key:"scale",label:"Scale",min:.4,max:3,step:.01,default:1},{type:"slider",key:"sharpness",label:"Sharpness",min:0,max:1,step:.01,default:.5},{type:"slider",key:"brightness",label:"Brightness",min:.2,max:2.5,step:.01,default:1.1},{type:"divider",key:"palette",label:"Water tint"},{type:"color",key:"deep",label:"Deep",slot:"secondary",default:"#0b2a4a"},{type:"color",key:"shallow",label:"Shallow",slot:"primary",default:"#2bb0c9"},{type:"divider",key:"interact",label:"Interaction"},{type:"slider",key:"chroma",label:"Chromatic split",min:0,max:2,step:.01,default:.6},{type:"slider",key:"mouseRipple",label:"Pointer ripple",min:0,max:2,step:.01,default:.8},{type:"slider",key:"grain",label:"Grain",min:0,max:1.5,step:.01,default:1}],Uu=je(`
|
|
1004
1004
|
vec2 hash2(vec2 p){
|
|
1005
1005
|
p = vec2(dot(p, vec2(127.1,311.7)), dot(p, vec2(269.5,183.3)));
|
|
1006
1006
|
return fract(sin(p)*43758.5453);
|
|
@@ -1050,7 +1050,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
1050
1050
|
col = clamp(col, 0.0, 1.0);
|
|
1051
1051
|
gl_FragColor = vec4(col, 1.0);
|
|
1052
1052
|
}
|
|
1053
|
-
`,
|
|
1053
|
+
`,is),ss=[{type:"divider",key:"motion",label:"Motion"},{type:"slider",key:"speed",label:"Speed",min:0,max:3,step:.01,default:.6},{type:"slider",key:"mouseSway",label:"Mouse sway",min:0,max:1,step:.01,default:.3},{type:"divider",key:"form",label:"Ribbon"},{type:"slider",key:"ribbonWidth",label:"Ribbon width",min:.08,max:.6,step:.01,default:.26},{type:"slider",key:"twist",label:"Twist",min:0,max:2.5,step:.01,default:1},{type:"slider",key:"sheen",label:"Sheen",min:0,max:1,step:.01,default:.7},{type:"divider",key:"palette",label:"Palette"},{type:"color",key:"ribbonA",label:"Ribbon A",default:"#f7a8c4",slot:"primary"},{type:"color",key:"ribbonB",label:"Ribbon B",default:"#8fe3d8",slot:"secondary"},{type:"color",key:"ribbonC",label:"Ribbon C",default:"#c9b8ff",slot:"accent"},{type:"color",key:"bg",label:"Background",default:"#f4f1ec",slot:"background"},{type:"divider",key:"finish",label:"Finish"},{type:"slider",key:"grain",label:"Grain",min:0,max:.08,step:.001,default:.02}],$u=je(`
|
|
1054
1054
|
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
|
|
1055
1055
|
float vnoise(vec2 p){
|
|
1056
1056
|
vec2 i=floor(p), f=fract(p); f=f*f*(3.0-2.0*f);
|
|
@@ -1095,7 +1095,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
1095
1095
|
col = clamp(col, 0.0, 1.0);
|
|
1096
1096
|
gl_FragColor = vec4(col, 1.0);
|
|
1097
1097
|
}
|
|
1098
|
-
`,
|
|
1098
|
+
`,ss),ls=[{type:"divider",key:"motion",label:"Motion"},{type:"slider",key:"speed",label:"Speed",min:0,max:3,step:.01,default:.7},{type:"divider",key:"rings",label:"Rings"},{type:"slider",key:"ringCount",label:"Ring count",min:2,max:40,step:.5,default:14},{type:"slider",key:"ringSharpness",label:"Ring sharpness",min:0,max:1,step:.01,default:.45},{type:"slider",key:"moire",label:"Moir\xE9",min:0,max:1,step:.01,default:.5},{type:"slider",key:"glow",label:"Centre glow",min:0,max:1,step:.01,default:.5},{type:"divider",key:"center",label:"Centre"},{type:"toggle",key:"followMouse",label:"Follow cursor",default:true},{type:"slider",key:"centerX",label:"Centre X",min:0,max:1,step:.01,default:.5},{type:"slider",key:"centerY",label:"Centre Y",min:0,max:1,step:.01,default:.5},{type:"divider",key:"palette",label:"Palette"},{type:"color",key:"colorA",label:"Colour A",default:"#b45cff",slot:"primary"},{type:"color",key:"colorB",label:"Colour B",default:"#ff4fd8",slot:"secondary"},{type:"color",key:"colorC",label:"Colour C",default:"#6a2fb0",slot:"accent"},{type:"color",key:"bg",label:"Background",default:"#1a0e2a",slot:"background"},{type:"divider",key:"finish",label:"Finish"},{type:"slider",key:"grain",label:"Grain",min:0,max:.08,step:.001,default:.02}],ju=je(`
|
|
1099
1099
|
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
|
|
1100
1100
|
void main(){
|
|
1101
1101
|
vec2 uv = vUv;
|
|
@@ -1126,7 +1126,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
1126
1126
|
col = clamp(col, 0.0, 1.0);
|
|
1127
1127
|
gl_FragColor = vec4(col, 1.0);
|
|
1128
1128
|
}
|
|
1129
|
-
`,
|
|
1129
|
+
`,ls),cs=[{type:"divider",key:"motion",label:"Motion"},{type:"slider",key:"speed",label:"Speed",min:0,max:3,step:.01,default:.7},{type:"slider",key:"mousePull",label:"Mouse pull",min:0,max:1,step:.01,default:.35},{type:"divider",key:"swirl",label:"Swirl"},{type:"slider",key:"spin",label:"Spin",min:-6,max:6,step:.1,default:3},{type:"slider",key:"armCount",label:"Arms",min:1,max:16,step:1,default:5},{type:"slider",key:"depth",label:"Depth",min:0,max:1,step:.01,default:.6},{type:"divider",key:"palette",label:"Palette"},{type:"color",key:"colorA",label:"Colour A",default:"#3a1d6e",slot:"primary"},{type:"color",key:"colorB",label:"Colour B",default:"#a24be0",slot:"secondary"},{type:"color",key:"bg",label:"Background",default:"#0a0612",slot:"background"},{type:"divider",key:"finish",label:"Finish"},{type:"slider",key:"sparkle",label:"Sparkle",min:0,max:1,step:.01,default:.4},{type:"slider",key:"grain",label:"Grain",min:0,max:.08,step:.001,default:.02}],Ku=je(`
|
|
1130
1130
|
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
|
|
1131
1131
|
float vnoise(vec2 p){
|
|
1132
1132
|
vec2 i=floor(p), f=fract(p); f=f*f*(3.0-2.0*f);
|
|
@@ -1164,7 +1164,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
1164
1164
|
col = clamp(col, 0.0, 1.0);
|
|
1165
1165
|
gl_FragColor = vec4(col, 1.0);
|
|
1166
1166
|
}
|
|
1167
|
-
`,
|
|
1167
|
+
`,cs),ds=[{type:"slider",key:"speed",label:"Speed",min:0,max:3,step:.01,default:.6},{type:"slider",key:"petalCount",label:"Petals",min:3,max:24,step:1,default:8},{type:"slider",key:"bloomRadius",label:"Bloom radius",min:.1,max:1.2,step:.01,default:.5},{type:"slider",key:"spread",label:"Spectrum spread",min:.1,max:1.5,step:.01,default:.7},{type:"slider",key:"cycle",label:"Spectral cycling",min:0,max:2,step:.01,default:.6},{type:"slider",key:"glow",label:"Glow",min:0,max:1.5,step:.01,default:.6},{type:"divider",key:"palette",label:"Palette"},{type:"color",key:"colorA",label:"Colour A",default:"#2dd4bf",slot:"primary"},{type:"color",key:"colorB",label:"Colour B",default:"#3b82f6",slot:"secondary"},{type:"color",key:"colorC",label:"Colour C",default:"#a855f7",slot:"accent"},{type:"color",key:"bg",label:"Background",default:"#05060a",slot:"background"},{type:"divider",key:"interaction",label:"Interaction"},{type:"slider",key:"mouseInfluence",label:"Mouse pull",min:0,max:1,step:.01,default:.6}],qu=je(`
|
|
1168
1168
|
#define PI 3.14159265359
|
|
1169
1169
|
#define TAU 6.28318530718
|
|
1170
1170
|
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
|
|
@@ -1208,7 +1208,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
1208
1208
|
col = max(col, 0.0);
|
|
1209
1209
|
gl_FragColor = vec4(col, 1.0);
|
|
1210
1210
|
}
|
|
1211
|
-
`,
|
|
1211
|
+
`,ds),ps=[{type:"slider",key:"speed",label:"Speed",min:0,max:3,step:.01,default:.7},{type:"slider",key:"dotSize",label:"Dot size",min:6,max:48,step:1,default:18,unit:"px"},{type:"slider",key:"gridAngle",label:"Grid angle",min:0,max:90,step:1,default:27,unit:"deg"},{type:"slider",key:"contrast",label:"Contrast",min:.5,max:4,step:.01,default:1.6},{type:"slider",key:"dotSoftness",label:"Dot softness",min:0,max:1,step:.01,default:.35},{type:"divider",key:"palette",label:"Palette"},{type:"color",key:"colorA",label:"Ink A",default:"#f97316",slot:"primary"},{type:"color",key:"colorB",label:"Ink B",default:"#fb7185",slot:"secondary"},{type:"color",key:"colorC",label:"Ink C",default:"#fbbf24",slot:"accent"},{type:"color",key:"bg",label:"Paper",default:"#0b0b0f",slot:"background"},{type:"divider",key:"interaction",label:"Interaction"},{type:"slider",key:"mouseInfluence",label:"Mouse swell",min:0,max:2,step:.01,default:.8}],Yu=je(`
|
|
1212
1212
|
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
|
|
1213
1213
|
float noise(vec2 p){ vec2 i=floor(p),f=fract(p); f=f*f*(3.0-2.0*f);
|
|
1214
1214
|
float a=hash(i),b=hash(i+vec2(1,0)),c=hash(i+vec2(0,1)),d=hash(i+vec2(1,1));
|
|
@@ -1246,7 +1246,7 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
1246
1246
|
col = clamp(col, 0.0, 1.0);
|
|
1247
1247
|
gl_FragColor = vec4(col, 1.0);
|
|
1248
1248
|
}
|
|
1249
|
-
`,
|
|
1249
|
+
`,ps),us=[{type:"slider",key:"speed",label:"Speed",min:0,max:3,step:.01,default:.8},{type:"slider",key:"gridDensity",label:"Grid density",min:6,max:60,step:1,default:26},{type:"slider",key:"pulseSpeed",label:"Pulse speed",min:0,max:4,step:.01,default:1.2},{type:"slider",key:"glow",label:"Glow / intensity",min:0,max:2,step:.01,default:.9},{type:"slider",key:"ringRadius",label:"Ring radius",min:.1,max:.6,step:.01,default:.32},{type:"slider",key:"scanline",label:"Scanline mix",min:0,max:1,step:.01,default:.3},{type:"divider",key:"palette",label:"Palette"},{type:"color",key:"colorA",label:"Accent",default:"#22c55e",slot:"primary"},{type:"color",key:"colorB",label:"Rim",default:"#4ade80",slot:"accent"},{type:"color",key:"bg",label:"Background",default:"#03060a",slot:"background"},{type:"divider",key:"interaction",label:"Interaction"},{type:"slider",key:"mouseInfluence",label:"Mouse spotlight",min:0,max:2,step:.01,default:1}],Zu=je(`
|
|
1250
1250
|
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
|
|
1251
1251
|
float hash1(float n){ return fract(sin(n)*43758.5453); }
|
|
1252
1252
|
void main(){
|
|
@@ -1290,6 +1290,6 @@ ${e}`;kS(o,c);let s=new We.Scene,l=new We.OrthographicCamera(-1,1,1,-1,0,1),d={u
|
|
|
1290
1290
|
col = max(col, 0.0);
|
|
1291
1291
|
gl_FragColor = vec4(col, 1.0);
|
|
1292
1292
|
}
|
|
1293
|
-
`,Sl);var ca={space:Cf,plasma:kf,voronoi:Rf,synthwave:Tf,mesh:Ef,waves:If,undertones:Lf,"flowing-dots":Af,grain:Df,glass:Hf,holographic:_f,fluid:Ff,aurora:Of,caustics:zf,ribbon:Vf,concentric:Bf,vortex:Gf,spectral:$f,halftone:Wf,digital:Uf},da=[{id:"mesh",label:"Mesh gradient",description:"Smooth moving blobs of the primary / secondary / accent colours over the background \u2014 the go-to soft, theme-reactive background.",tags:["gradient","mesh","abstract","hero","background"],scene:"mesh",defaultPostPreset:"none"},{id:"waves",label:"Waves",description:"Flowing banded ribbons that ripple across the surface. Clean motion for headers and hero backdrops.",tags:["waves","motion","abstract","hero"],scene:"waves",defaultPostPreset:"none"},{id:"undertones",label:"Undertones",description:"Soft low-saturation tonal washes drifting like weather \u2014 the field bends gently toward the cursor and a faint light follows it. The calm, expensive-feeling backdrop.",tags:["gradient","soft","subtle","mouse","hero","background","calm"],scene:"undertones",defaultPostPreset:"none"},{id:"flowing-dots",label:"Flowing dots",description:"A dot-matrix grid where waves of dots swell and tint as a flow field passes through \u2014 and swell toward the cursor. Playful, technical, great behind type.",tags:["dots","grid","halftone","mouse","motion","background","playful"],scene:"flowing-dots",defaultPostPreset:"none"},{id:"grain",label:"Grain",description:"A glacial tonal wash under heavy animated film grain \u2014 fine print grain plus a coarser fleck, with a gentle vignette. The editorial, print-feeling backdrop; lovely in light AND dark tones.",tags:["grain","film","texture","editorial","print","subtle","hero","background"],scene:"grain",defaultPostPreset:"none"},{id:"holographic",label:"Holographic foil",description:"Iridescent foil \u2014 a brushed diagonal grain (a diffraction grating) under a spectrum that sweeps across the sheet in dense shimmering bands, with metallic glints riding the grain. The spectrum cycles the brand colours (secondary \u2192 primary \u2192 accent) so it re-tints with the theme rather than being a fixed rainbow. The cursor acts as the view angle, sliding the whole spectrum like tilting a holographic card.",tags:["holographic","foil","iridescent","diffraction","grain","mouse","hero","background"],scene:"holographic",defaultPostPreset:"none"},{id:"glass",label:"Studio glass",description:"A brand-tinted wash seen through a sheet of frosted, slumped glass \u2014 chromatic refraction fringes the edges, anisotropic specular streaks catch a moving key light, and a faint caustic shimmer pools in the folds. The glass bulges toward the cursor like a lens and the highlight tracks it. The expensive, tactile backdrop; lovely in light AND dark tones.",tags:["glass","frosted","refraction","caustic","mouse","soft","hero","background"],scene:"glass",defaultPostPreset:"none"},{id:"space",label:"Hyperspace",description:"Classic 'jump to hyperspace' \u2014 streaking stars flying past camera. Pairs well with VHS or Cinematic post-FX.",tags:["space","retro","motion","hero","background"],scene:"space",defaultPostPreset:"vhs"},{id:"plasma",label:"Plasma",description:"Soft rolling colour clouds \u2014 overlapping sines warping a palette ramp. Classic demoscene vibe. Pairs well with Synthwave or Cinematic.",tags:["abstract","soft","ambient","hero","background","gradient"],scene:"plasma",defaultPostPreset:"synthwave"},{id:"voronoi",label:"Voronoi",description:"Jittered cellular grid \u2014 orbiting seed points form animated cells with glowing edges. Great for data / organic / network moods. Pairs well with CRT or VHS.",tags:["abstract","cells","organic","network","hero","background"],scene:"voronoi",defaultPostPreset:"crt"},{id:"synthwave",label:"Synthwave Grid",description:"Retro-future perspective grid receding to a banded sun disc on the horizon. Pairs beautifully with the Synthwave post preset (its namesake).",tags:["retro","synthwave","80s","hero","background","grid","sun"],scene:"synthwave",defaultPostPreset:"synthwave"},{id:"fluid",label:"Fluid",description:"Soft liquid metaballs \u2014 large slow blobs of palette colour merge and split like a lava lamp. The cursor warps the liquid around it.",tags:["lava lamp","liquid","metaballs","organic","gradient","ambient","background"],scene:"fluid",defaultPostPreset:"none",controls:fl},{id:"aurora",label:"Aurora",description:"Vertical curtains of northern-light ribbons drift and shimmer over a dark sky, with a faint star field. Lovely on dark surfaces.",tags:["aurora","northern lights","ribbons","dark","glow","atmospheric","background"],scene:"aurora",defaultPostPreset:"none",controls:gl},{id:"caustics",label:"Water caustics",description:"Animated underwater caustic light net \u2014 bright cellular veins ripple across a tinted water surface, with depth-graded colour and a pointer ripple.",tags:["caustics","water","underwater","ripple","cellular","light","background"],scene:"caustics",defaultPostPreset:"none",controls:hl},{id:"ribbon",label:"Flowing ribbon",description:"A silky satin ribbon sweeps and folds across the frame, catching shifting palette colours with an iridescent specular sheen on a light ground.",tags:["ribbon","satin","iridescent","elegant","light","hero","background"],scene:"ribbon",defaultPostPreset:"none",controls:bl},{id:"concentric",label:"Concentric",description:"Concentric rings ripple outward from a centre with soft moir\xE9 interference and a gentle pulse. The centre can follow the cursor.",tags:["rings","ripple","moire","radial","hypnotic","background"],scene:"concentric",defaultPostPreset:"none",controls:vl},{id:"vortex",label:"Deep vortex",description:"A dark radial vortex of spiralling streaks pulling into a deep centre, dusted with starfield sparkle. Brooding and atmospheric.",tags:["vortex","spiral","dark","cosmic","radial","atmospheric","background"],scene:"vortex",defaultPostPreset:"none",controls:yl},{id:"spectral",label:"Spectral bloom",description:"A kaleidoscopic radial spectrum burst \u2014 petals of shifting spectrum colour bloom from a cursor-driven centre over a dark ground.",tags:["radial","spectrum","kaleidoscope","bloom","luminous","background"],scene:"spectral",defaultPostPreset:"none",controls:xl},{id:"halftone",label:"Halftone pop",description:"A bold pop-art halftone field \u2014 a palette gradient resolved into a rotated grid of luminance-sized print dots, with a diagonal sweep and mouse swell.",tags:["halftone","pop-art","retro","print","dots","gradient","background"],scene:"halftone",defaultPostPreset:"none",controls:wl},{id:"digital",label:"Digital grid",description:"A techy data-activity field \u2014 a grid of cells lighting up in travelling waves with scanning pulses, a glowing ring, and a mouse spotlight on a near-black ground.",tags:["grid","digital","data","techy","scanline","glow","background"],scene:"digital",defaultPostPreset:"none",controls:Sl}],pa=Object.fromEntries(da.map(e=>[e.id,e]));var ua={none:{id:"none",label:"Clean",effects:{}},vhs:{id:"vhs",label:"VHS",effects:{bloom:{intensity:.35,luminanceThreshold:.5,radius:.7},noise:{intensity:.04},scanlines:{density:1.5,opacity:.12},vignette:{darkness:.4,offset:.45},chromatic:{offset:.0015}}},cinematic:{id:"cinematic",label:"Cinematic",effects:{bloom:{intensity:.5,luminanceThreshold:.55,radius:.8},vignette:{darkness:.5,offset:.5}}},synthwave:{id:"synthwave",label:"Synthwave",effects:{bloom:{intensity:.8,luminanceThreshold:.3,radius:.9},chromatic:{offset:.002},vignette:{darkness:.3,offset:.55}}},crt:{id:"crt",label:"CRT",effects:{bloom:{intensity:.2,luminanceThreshold:.7,radius:.4},scanlines:{density:2,opacity:.25},vignette:{darkness:.6,offset:.4},chromatic:{offset:.0025}}}},Ci="vhs";var ma={primary:"oklch(var(--brand-1, 0.62 0.20 20))",secondary:"oklch(var(--brand-2, 0.70 0.16 200))",accent:"oklch(var(--brand-3, 0.78 0.17 90))",background:"oklch(var(--background, 0.12 0.01 265))"},PS={dark:"oklch(0.13 0.015 265)",light:"oklch(0.97 0.005 265)"},MS=/^[\d.]+\s+[\d.]+\s+[\d.]+(?:\s*\/\s*[\d.%]+)?$/,NS=/^[\d.]+\s+[\d.]+%\s+[\d.]+%(?:\s*\/\s*[\d.%]+)?$/,ES=/^\s*var\(\s*(--[^,)\s]+)(?:\s*,[^)]*)?\s*\)\s*$/;function ki(e,t,o){if(typeof document>"u")return o;let r=e,a=ES.exec(e);if(a){let c=getComputedStyle(t).getPropertyValue(a[1]).trim();c&&(MS.test(c)?r=`oklch(${c})`:NS.test(c)&&(r=`hsl(${c})`));}let n=document.createElement("span");if(n.style.color="",n.style.color=r,n.style.color==="")return o;n.style.display="none",t.appendChild(n);let i=getComputedStyle(n).color;if(t.removeChild(n),!i)return o;if(i.startsWith("rgb"))return i;try{let c=document.createElement("canvas");c.width=1,c.height=1;let s=c.getContext("2d");if(!s)return i;s.clearRect(0,0,1,1),s.fillStyle=i,s.fillRect(0,0,1,1);let[l,d,m]=s.getImageData(0,0,1,1).data;return `rgb(${l}, ${d}, ${m})`}catch{return i}}function jf(e,t){return {primary:ki(e.primary,t,ma.primary),secondary:ki(e.secondary,t,ma.secondary),accent:ki(e.accent,t,ma.accent),background:ki(e.background,t,ma.background)}}var LS=12,Cl=new Set,AS=0;function qf(){[...Cl].sort((t,o)=>o.touched-t.touched).forEach((t,o)=>t.setGranted(o<LS));}function DS(e){e.touched=++AS,Cl.add(e),qf();}function Kf(e){Cl.delete(e)&&qf();}var bn=w.forwardRef(({preset:e,fragmentShader:t,onShaderError:o,postPreset:r,palette:a,tone:n="auto",createScene:i,controls:c=false,autoPlay:s=true,play:l,pauseOffscreen:d=true,releaseOffscreen:m=false,aspect:u="video",radius:f="lg",border:h=false,poster:g,label:b,className:v,style:C,maxDpr:S,...x},y)=>{let R=w.useRef(null),[L,D]=w.useState(l??s),[I,E]=w.useState(false),H=Yo(),[z,W]=w.useState(!m),[Z,O]=w.useState(!m),B=w.useRef(null);w.useEffect(()=>{if(!m){O(true);return}let A={touched:0,setGranted:O};return B.current=A,()=>{Kf(A),B.current=null;}},[m]),w.useEffect(()=>{if(!m)return;let A=B.current;A&&(z?DS(A):Kf(A));},[z,m]),w.useEffect(()=>{if(!m){W(true);return}let A=R.current;if(!A)return;let oe=new IntersectionObserver(([J])=>W(J.isIntersecting),{rootMargin:"0px",threshold:0});return oe.observe(A),()=>oe.disconnect()},[m]);let T=w.useMemo(()=>{let A={...ma,...a};return n!=="auto"&&!a?.background&&(A.background=PS[n]),A},[a,n]),_=w.useMemo(()=>i||(t?Je(t):e&&ca[e]?ca[e]:null),[i,t,e]),ae=w.useMemo(()=>{if(r&&typeof r=="object")return r;let A=typeof r=="string"?r:(e?pa[e]?.defaultPostPreset:void 0)??Ci;return ua[A]??ua[Ci]},[r,e]),te=w.useRef(ae);te.current=ae;let X=w.useRef(T);X.current=T;let re=w.useMemo(()=>JSON.stringify(T??null),[T]),he=w.useRef(o);he.current=o,w.useEffect(()=>{let A=R.current;if(!A||!_)return;if(m&&(!z||!Z)){E(false);return}let oe=A.clientWidth||1,J=A.clientHeight||1,ke=jf(X.current,A),Q=new We.WebGLRenderer({antialias:true,alpha:false,powerPreference:"high-performance"}),k=S??Math.min(window.devicePixelRatio||1,2);Q.setPixelRatio(k),Q.setSize(oe,J),Q.setClearColor(new We.Color(ke.background),1),Q.domElement.dataset.gdsPart="shader-canvas",Q.domElement.style.width="100%",Q.domElement.style.height="100%",Q.domElement.style.display="block",A.appendChild(Q.domElement);let P;try{P=_({renderer:Q,width:oe,height:J,palette:ke});}catch(me){if(me instanceof hn)he.current?.(me),P=ca.space({renderer:Q,width:oe,height:J,palette:ke});else throw Q.dispose(),Q.domElement.parentElement===A&&A.removeChild(Q.domElement),me}let N=te.current,M=Sf({renderer:Q,scene:P.scene,camera:P.camera,preset:N,width:oe,height:J}),F=new We.Clock,V=0,ee=(l??s)&&!H,Re=true,ce=()=>{if(V=requestAnimationFrame(ce),!ee||d&&!Re)return;let me=F.getDelta(),Fe=F.getElapsedTime();P.update?.(Fe,me),M.composer.render(me);};P.update?.(0,0),M.composer.render(0),E(true),ce();let $e=new ResizeObserver(([me])=>{let Fe=Math.max(1,Math.floor(me.contentRect.width)),Xt=Math.max(1,Math.floor(me.contentRect.height));Q.setSize(Fe,Xt),M.resize(Fe,Xt),P.resize?.(Fe,Xt),ee||(P.update?.(F.getElapsedTime(),0),M.composer.render(0));});$e.observe(A);let Ne=new IntersectionObserver(([me])=>{Re=me.isIntersecting;},{threshold:.05});Ne.observe(A);let rt=new MutationObserver(()=>{if(!R.current)return;let me=jf(X.current,R.current);Q.setClearColor(new We.Color(me.background),1),P.setPalette?.(me);});rt.observe(document.documentElement,{attributes:true,attributeFilter:["class","style","data-theme","data-gds-theme","data-grade-mode"]});let _e=P,mt=_e.setMouse?me=>{let Fe=A.getBoundingClientRect(),Xt=(me.clientX-Fe.left)/Fe.width,lr=1-(me.clientY-Fe.top)/Fe.height;_e.setMouse(Xt,lr);}:null;return mt&&A.addEventListener("pointermove",mt),Me.current={toggle:()=>{ee=!ee,D(ee);},setRunning:me=>{ee=me&&!H,D(ee);},setPalette:me=>{Q.setClearColor(new We.Color(me.background),1),P.setPalette?.(me);},setPostPreset:me=>{let Fe=typeof me=="string"?ua[me]:me;Fe&&M.setPreset(Fe);}},()=>{cancelAnimationFrame(V),$e.disconnect(),Ne.disconnect(),rt.disconnect(),mt&&A.removeEventListener("pointermove",mt),M.dispose(),P.dispose?.(),Q.dispose(),Q.domElement.parentElement===A&&A.removeChild(Q.domElement),Me.current=null;}},[_,re,s,H,d,m,z,Z,S]);let Me=w.useRef(null);w.useEffect(()=>{Me.current?.setPostPreset(ae);},[ae]),w.useEffect(()=>{l!==void 0&&Me.current?.setRunning(l);},[l]);let le=()=>Me.current?.toggle();return w.createElement(ko,{...x,ref:A=>{R.current=A,typeof y=="function"?y(A):y&&(y.current=A);},aspect:u,radius:f,border:h,"aria-label":b,className:v,style:C,"data-gds-part":"three-scene"},!I&&g&&w.createElement("img",{src:g,alt:"",className:"absolute inset-0 w-full h-full object-cover","data-gds-part":"scene-poster"}),c&&w.createElement("div",{"data-gds-part":"scene-controls",className:p("absolute inset-0 flex items-end justify-end p-2","opacity-0 hover:opacity-100 transition-opacity","bg-gradient-to-t from-black/30 to-transparent")},w.createElement(Ie,{iconOnly:true,variant:"secondary",onClick:le},L?w.createElement(Pause,{className:"h-4 w-4"}):w.createElement(Play,{className:"h-4 w-4"}))))});bn.displayName="ThreeScene";function Yf(e,t,o){let r=e[t];return typeof r=="number"?r:o}function Ri(e,t,o){let r=e[t];return typeof r=="string"?r:o}function Zf(e,t,o){let r=e[t];return typeof r=="boolean"?r:o}function Xf(e,t,o){let r=e[t];return Array.isArray(r)?r:o}function _S(e,t){return e.display==="percent"?true:t==="percent"&&!e.unit&&e.step<1&&e.min>=0}function FS({controls:e,state:t,onChange:o,disabled:r,labelPosition:a="inline",format:n="raw",className:i}){return w.createElement("div",{className:p("flex flex-col",a==="above"?"gap-2.5":"gap-1",i)},e.map(c=>{if(c.type==="divider")return w.createElement("div",{key:c.key,className:"mt-2 mb-0.5 first:mt-0"},c.label?w.createElement("span",{className:"text-[11px] font-medium text-foreground/70"},c.label):null);if(c.type==="slider"){let l=Yf(t,c.key,c.default);return w.createElement(fa,{key:c.key,labelPosition:a,label:c.label,value:w.createElement(OS,{spec:c,value:l,percent:_S(c,n),disabled:r,onChange:d=>o(c.key,d)}),control:w.createElement(Ar,{size:"sm",className:"flex-1",value:[l],min:c.min,max:c.max,step:c.step,disabled:r,"aria-label":c.label,onValueChange:d=>o(c.key,Math.min(c.max,Math.max(c.min,d[0]??c.default)))})})}if(c.type==="segmented"){let l=Ri(t,c.key,c.default);return w.createElement(fa,{key:c.key,labelPosition:a,label:c.label,control:w.createElement(yo,{type:"single",variant:"segmented",size:"2xs",value:l,disabled:r,onValueChange:d=>d&&o(c.key,d),className:a==="above"?"w-full":""},c.options.map(d=>w.createElement(xo,{key:d.value,value:d.value,className:"px-2.5 text-[11px] font-medium"},d.label)))})}if(c.type==="select"){let l=Ri(t,c.key,c.default);return w.createElement(fa,{key:c.key,labelPosition:a,label:c.label,control:w.createElement(Jn,{value:l,onValueChange:d=>o(c.key,d),disabled:r},w.createElement(cn,{size:"xs",className:a==="above"?"w-full":"w-auto"},w.createElement(Qn,null)),w.createElement(dn,{size:"xs"},c.options.map(d=>w.createElement(pn,{key:d.value,value:d.value},d.label))))})}if(c.type==="toggle"){let l=Zf(t,c.key,c.default);return w.createElement(fa,{key:c.key,labelPosition:a,label:c.label,control:w.createElement(di,{checked:l,onCheckedChange:d=>o(c.key,d),disabled:r})})}if(c.type==="color"){let l=Ri(t,c.key,c.default);return w.createElement(fa,{key:c.key,labelPosition:a,label:c.label,hint:c.slot,control:w.createElement(Jf,{value:l,disabled:r,onChange:d=>o(c.key,d)})})}let s=Xf(t,c.key,c.default);return w.createElement(zS,{key:c.key,spec:c,value:s,disabled:r,onChange:l=>o(c.key,l)})}))}function fa({labelPosition:e,label:t,hint:o,control:r,value:a}){let n=w.createElement(Wn,{size:"xs",className:p("text-muted-foreground",e==="inline"&&"w-24 shrink-0 truncate")},t,o?w.createElement("span",{className:"ml-1.5 text-[10px] text-muted-foreground/50"},o):null);return e==="above"?w.createElement("div",{className:"space-y-1"},w.createElement("div",{className:"flex items-baseline justify-between gap-2"},n,a),r):w.createElement("div",{className:"flex items-center gap-2"},n,w.createElement("div",{className:"flex min-w-0 flex-1 items-center justify-end gap-2"},r,a))}function OS({spec:e,value:t,percent:o,disabled:r,onChange:a}){let n=e.max-e.min||1,i=e.step<1?e.step<.1?3:2:0,c=g=>Math.min(e.max,Math.max(e.min,g)),s=g=>o?String(Math.round((g-e.min)/n*100)):g.toFixed(i),l=g=>{let b=Number(g.replace("%",""));return Number.isFinite(b)?(o&&(b=e.min+b/100*n),c(Math.round(b/e.step)*e.step)):null},d=o?"%":e.unit,[m,u]=w.useState(null),f=m??s(t),h=g=>{let b=l(g);b!==null&&a(b),u(null);};return w.createElement("div",{className:"flex w-14 shrink-0 items-center justify-end gap-0.5"},w.createElement(Lt,{size:"2xs",variant:"ghost",inputMode:"decimal","aria-label":e.label,className:"w-full px-0 text-right tabular-nums",value:f,disabled:r,onChange:g=>u(g.currentTarget.value),onBlur:g=>h(g.currentTarget.value),onKeyDown:g=>{g.key==="Enter"&&h(g.currentTarget.value);}}),d?w.createElement("span",{className:"text-[9px] text-muted-foreground/50"},d):null)}function Jf({value:e,disabled:t,onChange:o}){return w.createElement("div",{className:"flex items-center gap-1.5"},w.createElement(Lt,{size:"2xs",variant:"ghost",value:e,disabled:t,onChange:r=>o(r.currentTarget.value),className:"w-20 px-0 text-right font-mono","aria-label":"Colour value"}),w.createElement(Bo,{color:e,size:"xs",shape:"rounded",onColorChange:t?void 0:o,className:t?"opacity-50":void 0}))}function zS({spec:e,value:t,disabled:o,onChange:r}){let a=e.min??1,n=e.max??8,i=(l,d)=>r(t.map((m,u)=>u===l?d:m)),c=()=>t.length<n&&r([...t,t[t.length-1]??"#ffffff"]),s=l=>t.length>a&&r(t.filter((d,m)=>m!==l));return w.createElement("div",null,w.createElement("div",{className:"flex items-center gap-2"},w.createElement(Wn,{size:"xs",className:"w-24 shrink-0 truncate text-muted-foreground"},e.label),w.createElement("div",{className:"flex flex-1 justify-end"},w.createElement("button",{type:"button",onClick:c,disabled:o||t.length>=n,"aria-label":"Add colour",className:"inline-flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 [&_svg]:size-3.5"},w.createElement(Plus,null)))),w.createElement("div",{className:"mt-1 space-y-1 pl-24"},t.map((l,d)=>w.createElement("div",{key:d,className:"flex items-center justify-end gap-1.5"},w.createElement(Jf,{value:l,disabled:o,onChange:m=>i(d,m)}),w.createElement("button",{type:"button",onClick:()=>s(d),disabled:o||t.length<=a,"aria-label":"Remove colour",className:"inline-flex h-6 w-5 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 [&_svg]:size-3.5"},w.createElement(Minus,null))))))}var VS={background:"oklch(var(--background))",card:"oklch(var(--card))",muted:"oklch(var(--muted))",secondary:"oklch(var(--secondary))",accent:"oklch(var(--accent))",primary:"oklch(var(--primary))",destructive:"oklch(var(--destructive))",transparent:"transparent"};function Ti(e){if(e)return VS[e]??e}var BS={none:"rounded-none",sm:"rounded-sm",md:"rounded-md",lg:"rounded-lg",xl:"rounded-xl"},Qf={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"},eg=w.forwardRef(({type:e,color:t,gradient:o,src:r,fit:a="cover",position:n="center",repeat:i=false,tileSize:c,preset:s,fragmentShader:l,palette:d,tone:m,postPreset:u,opacity:f,blendMode:h,radius:g="none",className:b,style:v},C)=>{if(e==="none")return null;let S={opacity:f,mixBlendMode:h,...v},x=null;if(e==="solid")S.background=Ti(t)??"oklch(var(--background))";else if(e==="gradient"){let y=[Ti(o?.from)??"oklch(var(--primary))",Ti(o?.via),Ti(o?.to)??"oklch(var(--accent))"].filter(Boolean);if(o?.shape==="radial"){let R=o.at??"center",L=o.size?`${o.size} `:"";S.backgroundImage=`radial-gradient(${L}at ${R}, ${y.join(", ")})`;}else {let R=o?.angle??135;S.backgroundImage=`linear-gradient(${R}deg, ${y.join(", ")})`;}}else e==="image"?i&&r?(S.backgroundImage=`url(${r})`,S.backgroundRepeat="repeat",S.backgroundPosition=n,c&&(S.backgroundSize=c)):r&&(x=w.createElement("img",{src:r,alt:"",className:p("absolute inset-0 h-full w-full",Qf[a]),style:{objectPosition:n}})):e==="video"?r&&(x=w.createElement("video",{src:r,autoPlay:true,muted:true,loop:true,playsInline:true,className:p("absolute inset-0 h-full w-full",Qf[a]),style:{objectPosition:n}})):e==="shader"&&(x=w.createElement(bn,{preset:s,fragmentShader:l,palette:d,tone:m,postPreset:u,aspect:"auto",radius:"none",className:"absolute inset-0"}));return w.createElement("div",{ref:C,"data-gds-part":"frame-fill","data-gds-fill-type":e,"aria-hidden":"true",className:p("absolute inset-0 z-0 overflow-hidden pointer-events-none",g!=="none"&&BS[g],b),style:S},x)});eg.displayName="BackgroundFill";var Rl=[{group:"surface",tokens:["surface/background","surface/card","surface/popover"]},{group:"action",tokens:["action/primary","action/secondary","action/accent","action/muted","action/destructive"]},{group:"status",tokens:["status/success","status/warning","status/info","status/highlight"]}],ga="transparent";function kl(e){if(e===ga)return "Transparent";let t=e.split("/").pop()??e;return t.charAt(0).toUpperCase()+t.slice(1)}function og({value:e}){return e===ga?w.createElement(Bo,{size:"2xs",shape:"rounded",type:"solid",color:"transparent"}):w.createElement(Bo,{size:"2xs",shape:"rounded",token:e})}function WS({value:e=null,onValueChange:t,tokens:o=Rl,searchable:r=true,searchPlaceholder:a="Search\u2026",emptyMessage:n="No colours match.",allowTransparent:i=true,title:c="Color",onClose:s}){let l=d=>t?.(d);return w.createElement("div",{className:"flex flex-col gap-2"},c!=null?w.createElement("div",{className:"flex items-center justify-between gap-1 pl-1"},w.createElement("span",{className:"text-[13px] leading-none text-foreground"},c),s?w.createElement("button",{type:"button","aria-label":"Close",onClick:s,className:"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring [&_svg]:size-3.5"},w.createElement(X,null)):null):null,w.createElement(Rr,{filter:(d,m,u)=>`${d} ${(u??[]).join(" ")}`.toLowerCase().includes(m.toLowerCase())?1:0},r&&w.createElement(Tr,{placeholder:a,className:"h-8 text-xs"}),w.createElement(Pr,{className:"h-56 overflow-y-auto overflow-x-hidden"},w.createElement(Mr,null,n),i&&w.createElement(vo,null,w.createElement(tg,{value:ga,selected:e===ga,onSelect:l})),o.map(({group:d,tokens:m})=>w.createElement(vo,{key:d,heading:d},m.map(u=>w.createElement(tg,{key:u,value:u,selected:e===u,onSelect:l})))))))}var vn=w.forwardRef(function({value:t=null,onValueChange:o,tokens:r=Rl,searchable:a=true,triggerVariant:n="default",placeholder:i="Pick a colour",searchPlaceholder:c="Search\u2026",emptyMessage:s="No colours match.",allowTransparent:l=true,title:d="Color",align:m="start",disabled:u=false,className:f,id:h,"aria-label":g,...b},v){let[C,S]=w.useState(false),x=n==="inline",y=t!=null;return w.createElement(bt,{open:C,onOpenChange:S},w.createElement(vt,{asChild:true},w.createElement("button",{ref:v,type:"button",id:h,role:"combobox","aria-expanded":C,"aria-haspopup":"listbox","aria-label":g??i,disabled:u,"data-gds-part":"color-picker","data-variant":n,className:p("ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",x?"inline-flex items-center rounded-md p-0.5 hover:bg-muted data-[state=open]:bg-muted":"flex min-h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-2.5 text-sm shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-ring",f),...b},y?w.createElement(w.Fragment,null,w.createElement(og,{value:t}),!x&&w.createElement("span",{className:"truncate"},kl(t))):x?w.createElement("span",{className:"size-4 rounded-[2px] border border-dashed border-input"}):w.createElement("span",{className:"text-muted-foreground"},i))),w.createElement(it,{align:m,className:"w-64 rounded-xl p-2","data-gds-part":"color-picker-content"},w.createElement(WS,{value:t,onValueChange:R=>{o?.(R),S(false);},tokens:r,searchable:a,searchPlaceholder:c,emptyMessage:s,allowTransparent:l,title:d,onClose:()=>S(false)})))});vn.displayName="ColorPicker";function tg({value:e,selected:t,onSelect:o}){return w.createElement(io,{value:e,keywords:[kl(e)],onSelect:()=>o(e),"data-gds-part":"color-picker-item","data-selected":t||void 0,className:"gap-2 px-2 py-1 text-xs [&_svg]:size-3.5"},w.createElement(og,{value:e}),w.createElement("span",{className:"truncate"},kl(e)),w.createElement(Check,{className:p("ml-auto h-3.5 w-3.5",t?"opacity-100":"opacity-0"),"aria-hidden":true}))}var YS=[{value:"linear",label:"Linear"},{value:"radial",label:"Radial"},{value:"angular",label:"Angular"}];function ZS(e){let t=e.token&&e.token!=="transparent"?`oklch(var(--${e.token.replace(/^--/,"")}))`:e.token==="transparent"?"transparent":e.color??"transparent";if(e.opacity>=1)return t;let o=Math.round(e.opacity*100);return `color-mix(in oklab, ${t} ${o}%, transparent)`}function Pi(e){let r=[...e.stops].sort((n,i)=>n.position-i.position).map(n=>`${ZS(n)} ${n.position}%`).join(", "),a=e.angle??90;return e.type==="radial"?`radial-gradient(circle, ${r})`:e.type==="angular"?`conic-gradient(from ${a}deg, ${r})`:`linear-gradient(${a}deg, ${r})`}var rg=0;function XS(){return rg+=1,`stop-${Date.now().toString(36)}-${rg}`}var JS="text-[11px] font-medium text-muted-foreground",Mi=w.forwardRef(function({value:t,onChange:o,className:r},a){let n=u=>o({...t,...u}),i=(u,f)=>n({stops:t.stops.map(h=>h.id===u?{...h,...f}:h)}),c=()=>n({stops:[...t.stops,{id:XS(),position:100,token:"action/primary",opacity:1}]}),s=u=>n({stops:t.stops.filter(f=>f.id!==u)}),l=()=>n({stops:t.stops.map(u=>({...u,position:100-u.position}))}),d=()=>n({angle:((t.angle??90)+45)%360}),m=Pi(t);return w.createElement("div",{ref:a,className:p("flex flex-col gap-3",r)},w.createElement("div",{className:"flex items-center gap-1.5"},w.createElement(Jn,{value:t.type,onValueChange:u=>n({type:u})},w.createElement(cn,{size:"sm",className:"flex-1"},w.createElement(Qn,null)),w.createElement(dn,{size:"sm"},YS.map(u=>w.createElement(pn,{key:u.value,value:u.value},u.label)))),w.createElement(Ie,{size:"sm",iconOnly:true,variant:"ghost",onClick:l,"aria-label":"Reverse stops",title:"Reverse stops"},w.createElement(ArrowLeftRight,null)),w.createElement(Ie,{size:"sm",iconOnly:true,variant:"ghost",onClick:d,"aria-label":"Rotate gradient",title:"Rotate gradient"},w.createElement(RotateCw,null))),w.createElement(Bo,{type:"gradient",gradient:m,shape:"rounded",className:"h-8 w-full"}),w.createElement("div",{className:"flex items-center justify-between"},w.createElement("span",{className:JS},"Stops"),w.createElement(Ie,{size:"2xs",iconOnly:true,variant:"ghost",onClick:c,"aria-label":"Add stop",title:"Add stop"},w.createElement(Plus,null))),w.createElement("div",{className:"flex flex-col gap-1.5"},t.stops.map(u=>w.createElement("div",{key:u.id,className:"flex items-center gap-1.5"},w.createElement(Lt,{size:"xs",type:"number",min:0,max:100,value:u.position,onChange:f=>i(u.id,{position:Number(f.target.value)}),endSlot:"%","aria-label":"Stop position",className:"w-16"}),w.createElement(vn,{triggerVariant:"inline",value:u.token??null,onValueChange:f=>i(u.id,{token:f??void 0,color:void 0}),"aria-label":"Stop colour"}),w.createElement(Lt,{size:"xs",type:"number",min:0,max:100,value:Math.round(u.opacity*100),onChange:f=>i(u.id,{opacity:Math.max(0,Math.min(100,Number(f.target.value)))/100}),endSlot:"%","aria-label":"Stop opacity",className:"w-16"}),w.createElement(Ie,{size:"xs",iconOnly:true,variant:"ghost",onClick:()=>s(u.id),disabled:t.stops.length<=2,"aria-label":"Remove stop",title:"Remove stop",className:"ml-auto"},w.createElement(Minus,null))))))});Mi.displayName="GradientEditor";var ng={primary:"oklch(var(--primary))",secondary:"oklch(var(--accent))",accent:"oklch(var(--primary))",background:"oklch(var(--foreground))"};var Ni=w.forwardRef(({preset:e,live:t="hover",postPreset:o,palette:r,className:a,aspect:n="video",radius:i="lg",label:c,hideLabel:s=false,onClick:l},d)=>{let m=pa[e],[u,f]=w.useState(false),h=t!=="never",g=t==="always"||t==="hover"&&u;return w.createElement("div",{ref:d,"data-gds-part":"picker-card","data-gds-preset":e,onMouseEnter:()=>f(true),onMouseLeave:()=>f(false),onClick:l,className:p("group cursor-pointer flex flex-col gap-2",a)},h?w.createElement(bn,{key:e,preset:e,postPreset:o,palette:r??ng,aspect:n,radius:i,autoPlay:false,play:g,controls:false,pauseOffscreen:true,releaseOffscreen:true,poster:m?.poster,maxDpr:1}):w.createElement(ko,{aspect:n,radius:i,"data-gds-part":"preset-poster",className:"bg-gradient-to-br from-muted to-muted/50"},m?.poster?w.createElement("img",{src:m.poster,alt:m.label,className:"w-full h-full object-cover"}):w.createElement("div",{className:"absolute inset-0 flex items-center justify-center text-xs text-muted-foreground"},m?.label??e)),!s&&w.createElement("div",{className:"flex items-baseline justify-between text-xs"},w.createElement("span",{className:"font-medium text-foreground","data-gds-part":"preset-label"},c??m?.label??e),m?.tags?.[0]&&w.createElement("span",{className:"text-muted-foreground"},m.tags[0])))});Ni.displayName="ShaderPresetPreview";function Tl({value:e,onChange:t,filterTags:o,live:r="hover",postPreset:a,palette:n,columns:i=3,className:c}){let s=w.useMemo(()=>o?.length?da.filter(d=>o.some(m=>d.tags.includes(m))):da,[o]);return w.createElement("div",{"data-gds-part":"preset-grid",role:"radiogroup",className:p("grid grid-cols-2 gap-3",i===2?"md:grid-cols-2":i===4?"md:grid-cols-4":"md:grid-cols-3",c)},s.map(d=>{let m=e===d.id;return w.createElement("div",{key:d.id,className:"relative",role:"radio","aria-checked":m},w.createElement(Ni,{preset:d.id,postPreset:a,palette:n,live:r,onClick:()=>t?.(d.id),className:p("transition-all",m&&"ring-2 ring-primary ring-offset-2 ring-offset-background rounded-lg")}),m&&w.createElement("div",{"data-gds-part":"picker-selected-badge",className:"absolute top-2 right-2 rounded-full bg-primary text-primary-foreground p-1 shadow-sm"},w.createElement(Check,{className:"h-3.5 w-3.5"})))}))}var Ei=["primary","accent","secondary","muted","card","background","destructive","transparent"];function sC(e){return e==="transparent"?"transparent":`oklch(var(--${e}))`}var lC=[{tab:"solid",icon:Square,label:"Solid"},{tab:"gradient",icon:Blend,label:"Gradient"},{tab:"image",icon:Image,label:"Image"},{tab:"pattern",icon:Grid3x3,label:"Pattern"},{tab:"video",icon:Video,label:"Video"},{tab:"shader",icon:Sparkles,label:"Shader"}];function cC(e){return e.type==="image"&&e.repeat?"pattern":e.type==="image"?"image":e.type}var co="text-[11px] font-medium text-muted-foreground";function Pl({token:e,active:t,onClick:o}){return w.createElement("button",{type:"button",title:e,onClick:o,className:p("h-7 w-7 rounded-md border border-border/60 transition-shadow",e==="transparent"&&"bg-[linear-gradient(45deg,#bbb_25%,transparent_25%,transparent_75%,#bbb_75%),linear-gradient(45deg,#bbb_25%,transparent_25%,transparent_75%,#bbb_75%)] bg-[length:8px_8px] bg-[position:0_0,4px_4px]",t&&"ring-2 ring-primary ring-offset-1 ring-offset-background"),style:e==="transparent"?void 0:{background:sC(e)}})}function cg({value:e,onChange:t,className:o}){let r=cC(e),a=i=>t({...e,...i}),n=i=>{i&&a(i==="pattern"?{type:"image",repeat:true}:i==="image"?{type:"image",repeat:false}:{type:i});};return w.createElement("div",{className:p("flex flex-col gap-3",o)},w.createElement(yo,{type:"single",size:"sm",value:r,onValueChange:i=>n(i),className:"justify-start gap-0.5"},lC.map(({tab:i,icon:c,label:s})=>w.createElement(xo,{key:i,value:i,"aria-label":s,title:s},w.createElement(c,{className:"h-4 w-4"})))),r==="solid"&&w.createElement("div",{className:"flex flex-col gap-1.5"},w.createElement("span",{className:co},"Token"),w.createElement("div",{className:"flex flex-wrap gap-1.5"},Ei.map(i=>w.createElement(Pl,{key:i,token:i,active:e.color===i,onClick:()=>a({color:i})})))),r==="gradient"&&w.createElement("div",{className:"flex flex-col gap-2"},w.createElement("div",{className:"flex flex-col gap-1.5"},w.createElement("span",{className:co},"From"),w.createElement("div",{className:"flex flex-wrap gap-1.5"},Ei.map(i=>w.createElement(Pl,{key:i,token:i,active:e.gradient?.from===i,onClick:()=>a({gradient:{...e.gradient,from:i}})})))),w.createElement("div",{className:"flex flex-col gap-1.5"},w.createElement("span",{className:co},"To"),w.createElement("div",{className:"flex flex-wrap gap-1.5"},Ei.map(i=>w.createElement(Pl,{key:i,token:i,active:e.gradient?.to===i,onClick:()=>a({gradient:{...e.gradient,to:i}})})))),w.createElement("div",{className:"flex flex-col gap-1.5"},w.createElement("span",{className:co},"Angle \u2014 ",e.gradient?.angle??135,"\xB0"),w.createElement(Ar,{value:[e.gradient?.angle??135],min:0,max:360,step:5,onValueChange:([i])=>a({gradient:{...e.gradient,angle:i}})}))),(r==="image"||r==="pattern")&&w.createElement("div",{className:"flex flex-col gap-2"},w.createElement("div",{className:"flex flex-col gap-1.5"},w.createElement("span",{className:co},"Image URL"),w.createElement(Lt,{size:"sm",value:e.src??"",placeholder:"https://\u2026 or /asset.png",onChange:i=>a({src:i.target.value})})),r==="image"&&w.createElement("div",{className:"flex flex-col gap-1.5"},w.createElement("span",{className:co},"Fit"),w.createElement(yo,{type:"single",size:"sm",value:e.fit??"cover",onValueChange:i=>i&&a({fit:i}),className:"justify-start gap-0.5"},["cover","contain","fill","none"].map(i=>w.createElement(xo,{key:i,value:i,className:"px-2 text-[11px] capitalize"},i)))),r==="pattern"&&w.createElement("div",{className:"flex flex-col gap-1.5"},w.createElement("span",{className:co},"Tile size"),w.createElement(Lt,{size:"sm",value:e.tileSize??"",placeholder:"120px",onChange:i=>a({tileSize:i.target.value})}))),r==="video"&&w.createElement("div",{className:"flex flex-col gap-1.5"},w.createElement("span",{className:co},"Video URL"),w.createElement(Lt,{size:"sm",value:e.src??"",placeholder:"https://\u2026.mp4",onChange:i=>a({src:i.target.value})})),r==="shader"&&w.createElement("div",{className:"flex flex-col gap-1.5"},w.createElement("span",{className:co},"Shader"),w.createElement(Tl,{value:e.preset,onChange:i=>a({preset:i}),live:"hover",columns:3})),e.type!=="none"&&w.createElement("div",{className:"flex items-center gap-2 border-t border-border/50 pt-2.5"},w.createElement("span",{className:p(co,"shrink-0")},"Opacity"),w.createElement(Ar,{value:[e.opacity??1],min:0,max:1,step:.05,onValueChange:([i])=>a({opacity:i}),className:"flex-1"}),w.createElement("span",{className:"w-9 shrink-0 text-right text-[11px] tabular-nums text-foreground"},Math.round((e.opacity??1)*100),"%")))}cg.displayName="FillPicker";var dC=[{kind:"solid",icon:Square,label:"Solid"},{kind:"gradient",icon:Blend,label:"Gradient"},{kind:"image",icon:Image,label:"Image"}];function pC(e){return e.type==="gradient"?"gradient":e.type==="image"?"image":"solid"}function ag(e){let t=e.gradient??{},o=[],r=(a,n,i)=>{a!=null&&o.push({id:i,position:n,token:a,opacity:1});};return r(t.from??"primary",0,"g-from"),t.via!=null&&r(t.via,50,"g-via"),r(t.to??"accent",100,"g-to"),{type:"linear",angle:t.angle??90,stops:o}}function uC(e){let t=[...e.stops].sort((n,i)=>n.position-i.position),o=t[0]?.token,r=t[t.length-1]?.token,a=t.length>2?t[1]?.token:void 0;return {from:o,via:a,to:r,angle:e.angle}}function mC(){return {type:"solid",color:"primary",opacity:1}}function dg({value:e,onChange:t,title:o="Fills",className:r}){let a=(s,l)=>t(e.map((d,m)=>m===s?{...d,...l}:d)),n=s=>t(e.filter((l,d)=>d!==s)),i=()=>t([...e,mC()]),c=(s,l)=>{l==="image"?a(s,{type:"image",repeat:false}):a(s,{type:l});};return w.createElement("div",{className:p("flex flex-col gap-2",r)},w.createElement("div",{className:"flex items-center justify-between"},w.createElement("span",{className:co},o),w.createElement(Ie,{size:"2xs",iconOnly:true,variant:"ghost",onClick:i,"aria-label":"Add fill",title:"Add fill"},w.createElement(Plus,null))),e.length===0&&w.createElement("p",{className:"text-[11px] text-muted-foreground"},"No fills."),w.createElement("div",{className:"flex flex-col gap-1.5"},e.map((s,l)=>{let d=pC(s),m=s.opacity??1,u=m>0,f=s._opacity,h=()=>{u?a(l,{opacity:0,_opacity:m}):a(l,{opacity:f??1});};return w.createElement("div",{key:l,"data-gds-part":"fill-row",className:"flex items-center gap-1.5"},w.createElement(yo,{type:"single",size:"sm",value:d,onValueChange:g=>g&&c(l,g),className:"gap-0.5"},dC.map(({kind:g,icon:b,label:v})=>w.createElement(xo,{key:g,value:g,"aria-label":v,title:v},w.createElement(b,{className:"h-4 w-4"})))),w.createElement("div",{className:"min-w-0 flex-1"},d==="solid"&&w.createElement(vn,{triggerVariant:"inline",value:s.color??null,onValueChange:g=>a(l,{color:g??void 0}),"aria-label":"Fill colour"}),d==="gradient"&&w.createElement(bt,null,w.createElement(vt,{asChild:true},w.createElement("button",{type:"button","aria-label":"Edit gradient",className:"h-6 w-full rounded-md border border-border/60",style:{background:Pi(ag(s))}})),w.createElement(it,{align:"start",className:"w-64"},w.createElement(Mi,{value:ag(s),onChange:g=>a(l,{gradient:uC(g)})}))),d==="image"&&w.createElement(Lt,{size:"xs",value:s.src??"",placeholder:"https://\u2026 or /asset.png",onChange:g=>a(l,{src:g.target.value}),"aria-label":"Image URL"})),w.createElement(Lt,{size:"xs",type:"number",min:0,max:100,value:Math.round(m*100),onChange:g=>a(l,{opacity:Math.max(0,Math.min(100,Number(g.target.value)))/100}),endSlot:"%","aria-label":"Fill opacity",className:"w-14"}),w.createElement(Ie,{size:"xs",iconOnly:true,variant:"ghost",onClick:h,"aria-label":u?"Hide fill":"Show fill",title:u?"Hide fill":"Show fill"},u?w.createElement(Eye,null):w.createElement(EyeOff,null)),w.createElement(Ie,{size:"xs",iconOnly:true,variant:"ghost",onClick:()=>n(l),"aria-label":"Remove fill",title:"Remove fill"},w.createElement(Trash2,null)))})))}dg.displayName="FillSection";function bC({children:e}){let t=useRef(null);return useEffect(()=>{let o=new hC({duration:1.2,easing:a=>Math.min(1,1.001-Math.pow(2,-10*a)),orientation:"vertical",gestureOrientation:"vertical",smoothWheel:true});t.current=o;function r(a){o.raf(a),requestAnimationFrame(r);}return requestAnimationFrame(r),()=>{o.destroy(),t.current=null;}},[]),w.createElement(w.Fragment,null,e)}function SC({className:e}){let t=Hr();if(!t)return null;let{theme:o,themes:r,setThemeId:a,deleteTheme:n}=t;return w.createElement(bt,null,w.createElement(vt,{asChild:true},w.createElement(Ie,{variant:"ghost",size:"sm",className:p("gap-2",e),"aria-label":"Switch theme"},w.createElement(Palette,{className:"h-4 w-4"}),w.createElement("span",{className:"hidden sm:inline"},o.name))),w.createElement(it,{className:"w-80 p-2",align:"end"},w.createElement("div",{className:"flex items-start justify-between gap-2 px-2 py-1.5 mb-1"},w.createElement("div",null,w.createElement("div",{className:"text-xs font-medium text-muted-foreground"},"Theme"),w.createElement("div",{className:"text-xs text-muted-foreground/80"},"Switch the skin applied site-wide.")),w.createElement("button",{type:"button",onClick:()=>js(o),className:"flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[10px] font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",title:"Download the active theme as a markdown spec \u2014 paste into a fresh LLM prompt"},w.createElement(Download,{className:"h-3 w-3"}),".md")),w.createElement("div",{className:"flex flex-col gap-0.5"},r.map(i=>{let c=i.id===o.id,s=i.id in Co,l=i.ramps.primary[500],d=i.ramps.accent[500],m=i.ramps.neutral[500];return w.createElement("div",{key:i.id,className:p("group flex items-start gap-3 rounded-md px-2 py-2 text-left transition-colors","hover:bg-muted",c&&"bg-muted")},w.createElement("button",{type:"button",onClick:()=>a(i.id),className:"flex items-start gap-3 flex-1 min-w-0 text-left"},w.createElement("div",{className:"mt-0.5 flex shrink-0 overflow-hidden rounded-md border border-border"},w.createElement("div",{className:"h-5 w-2.5",style:{background:`oklch(${l})`},"aria-hidden":true}),w.createElement("div",{className:"h-5 w-2.5",style:{background:`oklch(${d})`},"aria-hidden":true}),w.createElement("div",{className:"h-5 w-2.5",style:{background:`oklch(${m})`},"aria-hidden":true})),w.createElement("div",{className:"min-w-0 flex-1"},w.createElement("div",{className:"flex items-center gap-2"},w.createElement("span",{className:"text-sm font-medium truncate text-foreground"},i.name),i.tagline&&w.createElement("span",{className:"text-[10px] uppercase tracking-wide text-muted-foreground shrink-0"},i.tagline)),i.description&&w.createElement("div",{className:"text-xs text-muted-foreground line-clamp-2"},i.description))),c&&w.createElement(Check,{className:"mt-2 h-4 w-4 shrink-0 text-primary"}),!s&&!c&&w.createElement("button",{type:"button",onClick:u=>{u.stopPropagation(),n(i.id);},className:"mt-1 opacity-0 group-hover:opacity-100 transition-opacity rounded p-1 hover:bg-destructive/10 hover:text-destructive","aria-label":`Delete theme ${i.name}`},w.createElement(Trash2,{className:"h-3.5 w-3.5"})))}))))}var pg=[{mode:"superLight",label:"Super light",icon:SunDim,tooltip:"Super light \u2014 airy, low contrast"},{mode:"light",label:"Light",icon:Sun,tooltip:"Light"},{mode:"dark",label:"Dark",icon:Moon,tooltip:"Dark"},{mode:"superDark",label:"Super dark",icon:MoonStar,tooltip:"Super dark \u2014 OLED, high contrast"}];function PC({className:e,variant:t="icons"}){let o=Hr();if(!o)return null;let{mode:r,setMode:a}=o;return t==="labeled"?w.createElement("div",{role:"radiogroup","aria-label":"Brightness mode",className:p("inline-flex flex-wrap gap-1 rounded-md border border-border bg-background p-1",e)},pg.map(({mode:n,label:i,icon:c})=>{let s=r===n;return w.createElement("button",{key:n,type:"button",role:"radio","aria-checked":s,onClick:()=>a(n),className:p("flex items-center gap-2 rounded px-3 py-1.5 text-sm transition-colors",s?"bg-primary text-primary-foreground":"hover:bg-accent hover:text-accent-foreground")},w.createElement(c,{className:"h-4 w-4"}),w.createElement("span",null,i))})):w.createElement("div",{role:"radiogroup","aria-label":"Brightness mode",className:p("inline-flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5",e)},pg.map(({mode:n,icon:i,tooltip:c})=>{let s=r===n;return w.createElement("button",{key:n,type:"button",role:"radio","aria-checked":s,"aria-label":c,title:c,onClick:()=>a(n),className:p("flex h-7 w-7 items-center justify-center rounded transition-colors",s?"bg-primary text-primary-foreground":"text-muted-foreground hover:bg-accent hover:text-accent-foreground")},w.createElement(i,{className:"h-3.5 w-3.5"}))}))}function EC(){let{isDark:e,setMode:t}=Js();return w.createElement(Ie,{variant:"ghost",size:"sm",onClick:()=>t(e?"light":"dark"),className:"gap-2","aria-label":e?"Switch to light mode":"Switch to dark mode"},e?w.createElement(w.Fragment,null,w.createElement(Sun,{className:"h-4 w-4"}),w.createElement("span",{className:"hidden sm:inline"},"Light")):w.createElement(w.Fragment,null,w.createElement(Moon,{className:"h-4 w-4"}),w.createElement("span",{className:"hidden sm:inline"},"Dark")))}
|
|
1294
|
-
export{
|
|
1293
|
+
`,us);var Pr={space:Mu,plasma:Nu,voronoi:Eu,synthwave:Lu,mesh:Hu,waves:Bu,undertones:Fu,"flowing-dots":zu,grain:Vu,glass:Ou,holographic:_u,fluid:Gu,aurora:Wu,caustics:Uu,ribbon:$u,concentric:ju,vortex:Ku,spectral:qu,halftone:Yu,digital:Zu},Mr=[{id:"mesh",label:"Mesh gradient",description:"Smooth moving blobs of the primary / secondary / accent colours over the background \u2014 the go-to soft, theme-reactive background.",tags:["gradient","mesh","abstract","hero","background"],scene:"mesh",defaultPostPreset:"none"},{id:"waves",label:"Waves",description:"Flowing banded ribbons that ripple across the surface. Clean motion for headers and hero backdrops.",tags:["waves","motion","abstract","hero"],scene:"waves",defaultPostPreset:"none"},{id:"undertones",label:"Undertones",description:"Soft low-saturation tonal washes drifting like weather \u2014 the field bends gently toward the cursor and a faint light follows it. The calm, expensive-feeling backdrop.",tags:["gradient","soft","subtle","mouse","hero","background","calm"],scene:"undertones",defaultPostPreset:"none"},{id:"flowing-dots",label:"Flowing dots",description:"A dot-matrix grid where waves of dots swell and tint as a flow field passes through \u2014 and swell toward the cursor. Playful, technical, great behind type.",tags:["dots","grid","halftone","mouse","motion","background","playful"],scene:"flowing-dots",defaultPostPreset:"none"},{id:"grain",label:"Grain",description:"A glacial tonal wash under heavy animated film grain \u2014 fine print grain plus a coarser fleck, with a gentle vignette. The editorial, print-feeling backdrop; lovely in light AND dark tones.",tags:["grain","film","texture","editorial","print","subtle","hero","background"],scene:"grain",defaultPostPreset:"none"},{id:"holographic",label:"Holographic foil",description:"Iridescent foil \u2014 a brushed diagonal grain (a diffraction grating) under a spectrum that sweeps across the sheet in dense shimmering bands, with metallic glints riding the grain. The spectrum cycles the brand colours (secondary \u2192 primary \u2192 accent) so it re-tints with the theme rather than being a fixed rainbow. The cursor acts as the view angle, sliding the whole spectrum like tilting a holographic card.",tags:["holographic","foil","iridescent","diffraction","grain","mouse","hero","background"],scene:"holographic",defaultPostPreset:"none"},{id:"glass",label:"Studio glass",description:"A brand-tinted wash seen through a sheet of frosted, slumped glass \u2014 chromatic refraction fringes the edges, anisotropic specular streaks catch a moving key light, and a faint caustic shimmer pools in the folds. The glass bulges toward the cursor like a lens and the highlight tracks it. The expensive, tactile backdrop; lovely in light AND dark tones.",tags:["glass","frosted","refraction","caustic","mouse","soft","hero","background"],scene:"glass",defaultPostPreset:"none"},{id:"space",label:"Hyperspace",description:"Classic 'jump to hyperspace' \u2014 streaking stars flying past camera. Pairs well with VHS or Cinematic post-FX.",tags:["space","retro","motion","hero","background"],scene:"space",defaultPostPreset:"vhs"},{id:"plasma",label:"Plasma",description:"Soft rolling colour clouds \u2014 overlapping sines warping a palette ramp. Classic demoscene vibe. Pairs well with Synthwave or Cinematic.",tags:["abstract","soft","ambient","hero","background","gradient"],scene:"plasma",defaultPostPreset:"synthwave"},{id:"voronoi",label:"Voronoi",description:"Jittered cellular grid \u2014 orbiting seed points form animated cells with glowing edges. Great for data / organic / network moods. Pairs well with CRT or VHS.",tags:["abstract","cells","organic","network","hero","background"],scene:"voronoi",defaultPostPreset:"crt"},{id:"synthwave",label:"Synthwave Grid",description:"Retro-future perspective grid receding to a banded sun disc on the horizon. Pairs beautifully with the Synthwave post preset (its namesake).",tags:["retro","synthwave","80s","hero","background","grid","sun"],scene:"synthwave",defaultPostPreset:"synthwave"},{id:"fluid",label:"Fluid",description:"Soft liquid metaballs \u2014 large slow blobs of palette colour merge and split like a lava lamp. The cursor warps the liquid around it.",tags:["lava lamp","liquid","metaballs","organic","gradient","ambient","background"],scene:"fluid",defaultPostPreset:"none",controls:rs},{id:"aurora",label:"Aurora",description:"Vertical curtains of northern-light ribbons drift and shimmer over a dark sky, with a faint star field. Lovely on dark surfaces.",tags:["aurora","northern lights","ribbons","dark","glow","atmospheric","background"],scene:"aurora",defaultPostPreset:"none",controls:ns},{id:"caustics",label:"Water caustics",description:"Animated underwater caustic light net \u2014 bright cellular veins ripple across a tinted water surface, with depth-graded colour and a pointer ripple.",tags:["caustics","water","underwater","ripple","cellular","light","background"],scene:"caustics",defaultPostPreset:"none",controls:is},{id:"ribbon",label:"Flowing ribbon",description:"A silky satin ribbon sweeps and folds across the frame, catching shifting palette colours with an iridescent specular sheen on a light ground.",tags:["ribbon","satin","iridescent","elegant","light","hero","background"],scene:"ribbon",defaultPostPreset:"none",controls:ss},{id:"concentric",label:"Concentric",description:"Concentric rings ripple outward from a centre with soft moir\xE9 interference and a gentle pulse. The centre can follow the cursor.",tags:["rings","ripple","moire","radial","hypnotic","background"],scene:"concentric",defaultPostPreset:"none",controls:ls},{id:"vortex",label:"Deep vortex",description:"A dark radial vortex of spiralling streaks pulling into a deep centre, dusted with starfield sparkle. Brooding and atmospheric.",tags:["vortex","spiral","dark","cosmic","radial","atmospheric","background"],scene:"vortex",defaultPostPreset:"none",controls:cs},{id:"spectral",label:"Spectral bloom",description:"A kaleidoscopic radial spectrum burst \u2014 petals of shifting spectrum colour bloom from a cursor-driven centre over a dark ground.",tags:["radial","spectrum","kaleidoscope","bloom","luminous","background"],scene:"spectral",defaultPostPreset:"none",controls:ds},{id:"halftone",label:"Halftone pop",description:"A bold pop-art halftone field \u2014 a palette gradient resolved into a rotated grid of luminance-sized print dots, with a diagonal sweep and mouse swell.",tags:["halftone","pop-art","retro","print","dots","gradient","background"],scene:"halftone",defaultPostPreset:"none",controls:ps},{id:"digital",label:"Digital grid",description:"A techy data-activity field \u2014 a grid of cells lighting up in travelling waves with scanning pulses, a glowing ring, and a mouse spotlight on a near-black ground.",tags:["grid","digital","data","techy","scanline","glow","background"],scene:"digital",defaultPostPreset:"none",controls:us}],Nr=Object.fromEntries(Mr.map(e=>[e.id,e]));var Er={none:{id:"none",label:"Clean",effects:{}},vhs:{id:"vhs",label:"VHS",effects:{bloom:{intensity:.35,luminanceThreshold:.5,radius:.7},noise:{intensity:.04},scanlines:{density:1.5,opacity:.12},vignette:{darkness:.4,offset:.45},chromatic:{offset:.0015}}},cinematic:{id:"cinematic",label:"Cinematic",effects:{bloom:{intensity:.5,luminanceThreshold:.55,radius:.8},vignette:{darkness:.5,offset:.5}}},synthwave:{id:"synthwave",label:"Synthwave",effects:{bloom:{intensity:.8,luminanceThreshold:.3,radius:.9},chromatic:{offset:.002},vignette:{darkness:.3,offset:.55}}},crt:{id:"crt",label:"CRT",effects:{bloom:{intensity:.2,luminanceThreshold:.7,radius:.4},scanlines:{density:2,opacity:.25},vignette:{darkness:.6,offset:.4},chromatic:{offset:.0025}}}},Ln="vhs";var Lr={primary:"oklch(var(--brand-1, 0.62 0.20 20))",secondary:"oklch(var(--brand-2, 0.70 0.16 200))",accent:"oklch(var(--brand-3, 0.78 0.17 90))",background:"oklch(var(--background, 0.12 0.01 265))"},py={dark:"oklch(0.13 0.015 265)",light:"oklch(0.97 0.005 265)"},uy=/^[\d.]+\s+[\d.]+\s+[\d.]+(?:\s*\/\s*[\d.%]+)?$/,my=/^[\d.]+\s+[\d.]+%\s+[\d.]+%(?:\s*\/\s*[\d.%]+)?$/,gy=/^\s*var\(\s*(--[^,)\s]+)(?:\s*,[^)]*)?\s*\)\s*$/;function Dn(e,t,o){if(typeof document>"u")return o;let a=e,r=gy.exec(e);if(r){let c=getComputedStyle(t).getPropertyValue(r[1]).trim();c&&(uy.test(c)?a=`oklch(${c})`:my.test(c)&&(a=`hsl(${c})`));}let n=document.createElement("span");if(n.style.color="",n.style.color=a,n.style.color==="")return o;n.style.display="none",t.appendChild(n);let i=getComputedStyle(n).color;if(t.removeChild(n),!i)return o;if(i.startsWith("rgb"))return i;try{let c=document.createElement("canvas");c.width=1,c.height=1;let s=c.getContext("2d");if(!s)return i;s.clearRect(0,0,1,1),s.fillStyle=i,s.fillRect(0,0,1,1);let[l,p,m]=s.getImageData(0,0,1,1).data;return `rgb(${l}, ${p}, ${m})`}catch{return i}}function Xu(e,t){return {primary:Dn(e.primary,t,Lr.primary),secondary:Dn(e.secondary,t,Lr.secondary),accent:Dn(e.accent,t,Lr.accent),background:Dn(e.background,t,Lr.background)}}var fy=12,ms=new Set,hy=0;function Qu(){[...ms].sort((t,o)=>o.touched-t.touched).forEach((t,o)=>t.setGranted(o<fy));}function by(e){e.touched=++hy,ms.add(e),Qu();}function Ju(e){ms.delete(e)&&Qu();}var Wa=y.forwardRef(({preset:e,fragmentShader:t,onShaderError:o,postPreset:a,palette:r,tone:n="auto",createScene:i,controls:c=false,autoPlay:s=true,play:l,pauseOffscreen:p=true,releaseOffscreen:m=false,aspect:u="video",radius:g="lg",border:h=false,poster:f,label:b,className:v,style:k,maxDpr:x,...w},S)=>{let C=y.useRef(null),[M,I]=y.useState(l??s),[B,z]=y.useState(false),E=Ho(),[W,oe]=y.useState(!m),[he,Y]=y.useState(!m),H=y.useRef(null);y.useEffect(()=>{if(!m){Y(true);return}let O={touched:0,setGranted:Y};return H.current=O,()=>{Ju(O),H.current=null;}},[m]),y.useEffect(()=>{if(!m)return;let O=H.current;O&&(W?by(O):Ju(O));},[W,m]),y.useEffect(()=>{if(!m){oe(true);return}let O=C.current;if(!O)return;let ye=new IntersectionObserver(([pe])=>oe(pe.isIntersecting),{rootMargin:"0px",threshold:0});return ye.observe(O),()=>ye.disconnect()},[m]);let R=y.useMemo(()=>{let O={...Lr,...r};return n!=="auto"&&!r?.background&&(O.background=py[n]),O},[r,n]),F=y.useMemo(()=>i||(t?je(t):e&&Pr[e]?Pr[e]:null),[i,t,e]),re=y.useMemo(()=>{if(a&&typeof a=="object")return a;let O=typeof a=="string"?a:(e?Nr[e]?.defaultPostPreset:void 0)??Ln;return Er[O]??Er[Ln]},[a,e]),Z=y.useRef(re);Z.current=re;let G=y.useRef(R);G.current=R;let Q=y.useMemo(()=>JSON.stringify(R??null),[R]),Re=y.useRef(o);Re.current=o,y.useEffect(()=>{let O=C.current;if(!O||!F)return;if(m&&(!W||!he)){z(false);return}let ye=O.clientWidth||1,pe=O.clientHeight||1,He=Xu(G.current,O),xe=new Ie.WebGLRenderer({antialias:true,alpha:false,powerPreference:"high-performance"}),$a=x??Math.min(window.devicePixelRatio||1,2);xe.setPixelRatio($a),xe.setSize(ye,pe),xe.setClearColor(new Ie.Color(He.background),1),xe.domElement.dataset.gdsPart="shader-canvas",xe.domElement.style.width="100%",xe.domElement.style.height="100%",xe.domElement.style.display="block",O.appendChild(xe.domElement);let Ke;try{Ke=F({renderer:xe,width:ye,height:pe,palette:He});}catch(ee){if(ee instanceof Ga)Re.current?.(ee),Ke=Pr.space({renderer:xe,width:ye,height:pe,palette:He});else throw xe.dispose(),xe.domElement.parentElement===O&&O.removeChild(xe.domElement),ee}let No=Z.current,_=Pu({renderer:xe,scene:Ke.scene,camera:Ke.camera,preset:No,width:ye,height:pe}),U=new Ie.Clock,V=0,ne=(l??s)&&!E,Ae=true,ue=()=>{if(V=requestAnimationFrame(ue),!ne||p&&!Ae)return;let ee=U.getDelta(),Pe=U.getElapsedTime();Ke.update?.(Pe,ee),_.composer.render(ee);};Ke.update?.(0,0),_.composer.render(0),z(true),ue();let Ut=new ResizeObserver(([ee])=>{let Pe=Math.max(1,Math.floor(ee.contentRect.width)),$t=Math.max(1,Math.floor(ee.contentRect.height));xe.setSize(Pe,$t),_.resize(Pe,$t),Ke.resize?.(Pe,$t),ne||(Ke.update?.(U.getElapsedTime(),0),_.composer.render(0));});Ut.observe(O);let _e=new IntersectionObserver(([ee])=>{Ae=ee.isIntersecting;},{threshold:.05});_e.observe(O);let Dt=new MutationObserver(()=>{if(!C.current)return;let ee=Xu(G.current,C.current);xe.setClearColor(new Ie.Color(ee.background),1),Ke.setPalette?.(ee);});Dt.observe(document.documentElement,{attributes:true,attributeFilter:["class","style","data-theme","data-gds-theme","data-grade-mode"]});let Fe=Ke,ro=Fe.setMouse?ee=>{let Pe=O.getBoundingClientRect(),$t=(ee.clientX-Pe.left)/Pe.width,jo=1-(ee.clientY-Pe.top)/Pe.height;Fe.setMouse($t,jo);}:null;return ro&&O.addEventListener("pointermove",ro),Oe.current={toggle:()=>{ne=!ne,I(ne);},setRunning:ee=>{ne=ee&&!E,I(ne);},setPalette:ee=>{xe.setClearColor(new Ie.Color(ee.background),1),Ke.setPalette?.(ee);},setPostPreset:ee=>{let Pe=typeof ee=="string"?Er[ee]:ee;Pe&&_.setPreset(Pe);}},()=>{cancelAnimationFrame(V),Ut.disconnect(),_e.disconnect(),Dt.disconnect(),ro&&O.removeEventListener("pointermove",ro),_.dispose(),Ke.dispose?.(),xe.dispose(),xe.domElement.parentElement===O&&O.removeChild(xe.domElement),Oe.current=null;}},[F,Q,s,E,p,m,W,he,x]);let Oe=y.useRef(null);y.useEffect(()=>{Oe.current?.setPostPreset(re);},[re]),y.useEffect(()=>{l!==void 0&&Oe.current?.setRunning(l);},[l]);let de=()=>Oe.current?.toggle();return y.createElement(fo,{...w,ref:O=>{C.current=O,typeof S=="function"?S(O):S&&(S.current=O);},aspect:u,radius:g,border:h,"aria-label":b,className:v,style:k,"data-gds-part":"three-scene"},!B&&f&&y.createElement("img",{src:f,alt:"",className:"absolute inset-0 w-full h-full object-cover","data-gds-part":"scene-poster"}),c&&y.createElement("div",{"data-gds-part":"scene-controls",className:d("absolute inset-0 flex items-end justify-end p-2","opacity-0 hover:opacity-100 transition-opacity","bg-gradient-to-t from-black/30 to-transparent")},y.createElement(Ce,{iconOnly:true,variant:"secondary",onClick:de},M?y.createElement(Pause,{className:"h-4 w-4"}):y.createElement(Play,{className:"h-4 w-4"}))))});Wa.displayName="ThreeScene";function em(e,t,o){let a=e[t];return typeof a=="number"?a:o}function An(e,t,o){let a=e[t];return typeof a=="string"?a:o}function tm(e,t,o){let a=e[t];return typeof a=="boolean"?a:o}function om(e,t,o){let a=e[t];return Array.isArray(a)?a:o}function xy(e,t){return e.display==="percent"?true:t==="percent"&&!e.unit&&e.step<1&&e.min>=0}function wy({controls:e,state:t,onChange:o,disabled:a,labelPosition:r="inline",format:n="raw",className:i}){return y.createElement("div",{className:d("flex flex-col",r==="above"?"gap-2.5":"gap-1",i)},e.map(c=>{if(c.type==="divider")return y.createElement("div",{key:c.key,className:"mt-2 mb-0.5 first:mt-0"},c.label?y.createElement("span",{className:"text-[11px] font-medium text-foreground/70"},c.label):null);if(c.type==="slider"){let l=em(t,c.key,c.default);return y.createElement(Dr,{key:c.key,labelPosition:r,label:c.label,value:y.createElement(ky,{spec:c,value:l,percent:xy(c,n),disabled:a,onChange:p=>o(c.key,p)}),control:y.createElement(da,{size:"sm",className:"flex-1",value:[l],min:c.min,max:c.max,step:c.step,disabled:a,"aria-label":c.label,onValueChange:p=>o(c.key,Math.min(c.max,Math.max(c.min,p[0]??c.default)))})})}if(c.type==="segmented"){let l=An(t,c.key,c.default);return y.createElement(Dr,{key:c.key,labelPosition:r,label:c.label,control:y.createElement(co,{type:"single",variant:"segmented",size:"2xs",value:l,disabled:a,onValueChange:p=>p&&o(c.key,p),className:r==="above"?"w-full":""},c.options.map(p=>y.createElement(po,{key:p.value,value:p.value,className:"px-2.5 text-[11px] font-medium"},p.label)))})}if(c.type==="select"){let l=An(t,c.key,c.default);return y.createElement(Dr,{key:c.key,labelPosition:r,label:c.label,control:y.createElement(hr,{value:l,onValueChange:p=>o(c.key,p),disabled:a},y.createElement(Ha,{size:"xs",className:r==="above"?"w-full":"w-auto"},y.createElement(br,null)),y.createElement(Fa,{size:"xs"},c.options.map(p=>y.createElement(za,{key:p.value,value:p.value},p.label))))})}if(c.type==="toggle"){let l=tm(t,c.key,c.default);return y.createElement(Dr,{key:c.key,labelPosition:r,label:c.label,control:y.createElement(vn,{checked:l,onCheckedChange:p=>o(c.key,p),disabled:a})})}if(c.type==="color"){let l=An(t,c.key,c.default);return y.createElement(Dr,{key:c.key,labelPosition:r,label:c.label,hint:c.slot,control:y.createElement(am,{value:l,disabled:a,onChange:p=>o(c.key,p)})})}let s=om(t,c.key,c.default);return y.createElement(Sy,{key:c.key,spec:c,value:s,disabled:a,onChange:l=>o(c.key,l)})}))}function Dr({labelPosition:e,label:t,hint:o,control:a,value:r}){let n=y.createElement(lr,{size:"xs",className:d("text-muted-foreground",e==="inline"&&"w-24 shrink-0 truncate")},t,o?y.createElement("span",{className:"ml-1.5 text-[10px] text-muted-foreground/50"},o):null);return e==="above"?y.createElement("div",{className:"space-y-1"},y.createElement("div",{className:"flex items-baseline justify-between gap-2"},n,r),a):y.createElement("div",{className:"flex items-center gap-2"},n,y.createElement("div",{className:"flex min-w-0 flex-1 items-center justify-end gap-2"},a,r))}function ky({spec:e,value:t,percent:o,disabled:a,onChange:r}){let n=e.max-e.min||1,i=e.step<1?e.step<.1?3:2:0,c=f=>Math.min(e.max,Math.max(e.min,f)),s=f=>o?String(Math.round((f-e.min)/n*100)):f.toFixed(i),l=f=>{let b=Number(f.replace("%",""));return Number.isFinite(b)?(o&&(b=e.min+b/100*n),c(Math.round(b/e.step)*e.step)):null},p=o?"%":e.unit,[m,u]=y.useState(null),g=m??s(t),h=f=>{let b=l(f);b!==null&&r(b),u(null);};return y.createElement("div",{className:"flex w-14 shrink-0 items-center justify-end gap-0.5"},y.createElement(Rt,{size:"2xs",variant:"ghost",inputMode:"decimal","aria-label":e.label,className:"w-full px-0 text-right tabular-nums",value:g,disabled:a,onChange:f=>u(f.currentTarget.value),onBlur:f=>h(f.currentTarget.value),onKeyDown:f=>{f.key==="Enter"&&h(f.currentTarget.value);}}),p?y.createElement("span",{className:"text-[9px] text-muted-foreground/50"},p):null)}function am({value:e,disabled:t,onChange:o}){return y.createElement("div",{className:"flex items-center gap-1.5"},y.createElement(Rt,{size:"2xs",variant:"ghost",value:e,disabled:t,onChange:a=>o(a.currentTarget.value),className:"w-20 px-0 text-right font-mono","aria-label":"Colour value"}),y.createElement(To,{color:e,size:"xs",shape:"rounded",onColorChange:t?void 0:o,className:t?"opacity-50":void 0}))}function Sy({spec:e,value:t,disabled:o,onChange:a}){let r=e.min??1,n=e.max??8,i=(l,p)=>a(t.map((m,u)=>u===l?p:m)),c=()=>t.length<n&&a([...t,t[t.length-1]??"#ffffff"]),s=l=>t.length>r&&a(t.filter((p,m)=>m!==l));return y.createElement("div",null,y.createElement("div",{className:"flex items-center gap-2"},y.createElement(lr,{size:"xs",className:"w-24 shrink-0 truncate text-muted-foreground"},e.label),y.createElement("div",{className:"flex flex-1 justify-end"},y.createElement("button",{type:"button",onClick:c,disabled:o||t.length>=n,"aria-label":"Add colour",className:"inline-flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 [&_svg]:size-3.5"},y.createElement(Plus,null)))),y.createElement("div",{className:"mt-1 space-y-1 pl-24"},t.map((l,p)=>y.createElement("div",{key:p,className:"flex items-center justify-end gap-1.5"},y.createElement(am,{value:l,disabled:o,onChange:m=>i(p,m)}),y.createElement("button",{type:"button",onClick:()=>s(p),disabled:o||t.length<=r,"aria-label":"Remove colour",className:"inline-flex h-6 w-5 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 [&_svg]:size-3.5"},y.createElement(Minus,null))))))}var Ry={background:"oklch(var(--background))",card:"oklch(var(--card))",muted:"oklch(var(--muted))",secondary:"oklch(var(--secondary))",accent:"oklch(var(--accent))",primary:"oklch(var(--primary))",destructive:"oklch(var(--destructive))",transparent:"transparent"};function In(e){if(e)return Ry[e]??e}var Cy={none:"rounded-none",sm:"rounded-sm",md:"rounded-md",lg:"rounded-lg",xl:"rounded-xl"},rm={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"},nm=y.forwardRef(({type:e,color:t,gradient:o,src:a,fit:r="cover",position:n="center",repeat:i=false,tileSize:c,preset:s,fragmentShader:l,palette:p,tone:m,postPreset:u,opacity:g,blendMode:h,radius:f="none",className:b,style:v},k)=>{if(e==="none")return null;let x={opacity:g,mixBlendMode:h,...v},w=null;if(e==="solid")x.background=In(t)??"oklch(var(--background))";else if(e==="gradient"){let S=[In(o?.from)??"oklch(var(--primary))",In(o?.via),In(o?.to)??"oklch(var(--accent))"].filter(Boolean);if(o?.shape==="radial"){let C=o.at??"center",M=o.size?`${o.size} `:"";x.backgroundImage=`radial-gradient(${M}at ${C}, ${S.join(", ")})`;}else {let C=o?.angle??135;x.backgroundImage=`linear-gradient(${C}deg, ${S.join(", ")})`;}}else e==="image"?i&&a?(x.backgroundImage=`url(${a})`,x.backgroundRepeat="repeat",x.backgroundPosition=n,c&&(x.backgroundSize=c)):a&&(w=y.createElement("img",{src:a,alt:"",className:d("absolute inset-0 h-full w-full",rm[r]),style:{objectPosition:n}})):e==="video"?a&&(w=y.createElement("video",{src:a,autoPlay:true,muted:true,loop:true,playsInline:true,className:d("absolute inset-0 h-full w-full",rm[r]),style:{objectPosition:n}})):e==="shader"&&(w=y.createElement(Wa,{preset:s,fragmentShader:l,palette:p,tone:m,postPreset:u,aspect:"auto",radius:"none",className:"absolute inset-0"}));return y.createElement("div",{ref:k,"data-gds-part":"frame-fill","data-gds-fill-type":e,"aria-hidden":"true",className:d("absolute inset-0 z-0 overflow-hidden pointer-events-none",f!=="none"&&Cy[f],b),style:x},w)});nm.displayName="BackgroundFill";var fs=[{group:"surface",tokens:["surface/background","surface/card","surface/popover"]},{group:"action",tokens:["action/primary","action/secondary","action/accent","action/muted","action/destructive"]},{group:"status",tokens:["status/success","status/warning","status/info","status/highlight"]}],Ar="transparent";function gs(e){if(e===Ar)return "Transparent";let t=e.split("/").pop()??e;return t.charAt(0).toUpperCase()+t.slice(1)}function sm({value:e}){return e===Ar?y.createElement(To,{size:"2xs",shape:"rounded",type:"solid",color:"transparent"}):y.createElement(To,{size:"2xs",shape:"rounded",token:e})}function My({value:e=null,onValueChange:t,tokens:o=fs,searchable:a=true,searchPlaceholder:r="Search\u2026",emptyMessage:n="No colours match.",allowTransparent:i=true,title:c="Color",onClose:s}){let l=p=>t?.(p);return y.createElement("div",{className:"flex flex-col gap-2"},c!=null?y.createElement("div",{className:"flex items-center justify-between gap-1 pl-1"},y.createElement("span",{className:"text-[13px] leading-none text-foreground"},c),s?y.createElement("button",{type:"button","aria-label":"Close",onClick:s,className:"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring [&_svg]:size-3.5"},y.createElement(X,null)):null):null,y.createElement(aa,{filter:(p,m,u)=>`${p} ${(u??[]).join(" ")}`.toLowerCase().includes(m.toLowerCase())?1:0},a&&y.createElement(ra,{placeholder:r,className:"h-8 text-xs"}),y.createElement(na,{className:"h-56 overflow-y-auto overflow-x-hidden"},y.createElement(ia,null,n),i&&y.createElement(lo,null,y.createElement(im,{value:Ar,selected:e===Ar,onSelect:l})),o.map(({group:p,tokens:m})=>y.createElement(lo,{key:p,heading:p},m.map(u=>y.createElement(im,{key:u,value:u,selected:e===u,onSelect:l})))))))}var Ua=y.forwardRef(function({value:t=null,onValueChange:o,tokens:a=fs,searchable:r=true,triggerVariant:n="default",placeholder:i="Pick a colour",searchPlaceholder:c="Search\u2026",emptyMessage:s="No colours match.",allowTransparent:l=true,title:p="Color",align:m="start",disabled:u=false,className:g,id:h,"aria-label":f,...b},v){let[k,x]=y.useState(false),w=n==="inline",S=t!=null;return y.createElement(pt,{open:k,onOpenChange:x},y.createElement(ut,{asChild:true},y.createElement("button",{ref:v,type:"button",id:h,role:"combobox","aria-expanded":k,"aria-haspopup":"listbox","aria-label":f??i,disabled:u,"data-gds-part":"color-picker","data-variant":n,className:d("ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",w?"inline-flex items-center rounded-md p-0.5 hover:bg-muted data-[state=open]:bg-muted":"flex min-h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-2.5 text-sm shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-ring",g),...b},S?y.createElement(y.Fragment,null,y.createElement(sm,{value:t}),!w&&y.createElement("span",{className:"truncate"},gs(t))):w?y.createElement("span",{className:"size-4 rounded-[2px] border border-dashed border-input"}):y.createElement("span",{className:"text-muted-foreground"},i))),y.createElement(tt,{align:m,className:"w-64 rounded-xl p-2","data-gds-part":"color-picker-content"},y.createElement(My,{value:t,onValueChange:C=>{o?.(C),x(false);},tokens:a,searchable:r,searchPlaceholder:c,emptyMessage:s,allowTransparent:l,title:p,onClose:()=>x(false)})))});Ua.displayName="ColorPicker";function im({value:e,selected:t,onSelect:o}){return y.createElement(Qt,{value:e,keywords:[gs(e)],onSelect:()=>o(e),"data-gds-part":"color-picker-item","data-selected":t||void 0,className:"gap-2 px-2 py-1 text-xs [&_svg]:size-3.5"},y.createElement(sm,{value:e}),y.createElement("span",{className:"truncate"},gs(e)),y.createElement(Check,{className:d("ml-auto h-3.5 w-3.5",t?"opacity-100":"opacity-0"),"aria-hidden":true}))}var Ay=[{value:"linear",label:"Linear"},{value:"radial",label:"Radial"},{value:"angular",label:"Angular"}];function Iy(e){let t=e.token&&e.token!=="transparent"?`oklch(var(--${e.token.replace(/^--/,"")}))`:e.token==="transparent"?"transparent":e.color??"transparent";if(e.opacity>=1)return t;let o=Math.round(e.opacity*100);return `color-mix(in oklab, ${t} ${o}%, transparent)`}function Hn(e){let a=[...e.stops].sort((n,i)=>n.position-i.position).map(n=>`${Iy(n)} ${n.position}%`).join(", "),r=e.angle??90;return e.type==="radial"?`radial-gradient(circle, ${a})`:e.type==="angular"?`conic-gradient(from ${r}deg, ${a})`:`linear-gradient(${r}deg, ${a})`}var lm=0;function Hy(){return lm+=1,`stop-${Date.now().toString(36)}-${lm}`}var Fy="text-[11px] font-medium text-muted-foreground",Fn=y.forwardRef(function({value:t,onChange:o,className:a},r){let n=u=>o({...t,...u}),i=(u,g)=>n({stops:t.stops.map(h=>h.id===u?{...h,...g}:h)}),c=()=>n({stops:[...t.stops,{id:Hy(),position:100,token:"action/primary",opacity:1}]}),s=u=>n({stops:t.stops.filter(g=>g.id!==u)}),l=()=>n({stops:t.stops.map(u=>({...u,position:100-u.position}))}),p=()=>n({angle:((t.angle??90)+45)%360}),m=Hn(t);return y.createElement("div",{ref:r,className:d("flex flex-col gap-3",a)},y.createElement("div",{className:"flex items-center gap-1.5"},y.createElement(hr,{value:t.type,onValueChange:u=>n({type:u})},y.createElement(Ha,{size:"sm",className:"flex-1"},y.createElement(br,null)),y.createElement(Fa,{size:"sm"},Ay.map(u=>y.createElement(za,{key:u.value,value:u.value},u.label)))),y.createElement(Ce,{size:"sm",iconOnly:true,variant:"ghost",onClick:l,"aria-label":"Reverse stops",title:"Reverse stops"},y.createElement(ArrowLeftRight,null)),y.createElement(Ce,{size:"sm",iconOnly:true,variant:"ghost",onClick:p,"aria-label":"Rotate gradient",title:"Rotate gradient"},y.createElement(RotateCw,null))),y.createElement(To,{type:"gradient",gradient:m,shape:"rounded",className:"h-8 w-full"}),y.createElement("div",{className:"flex items-center justify-between"},y.createElement("span",{className:Fy},"Stops"),y.createElement(Ce,{size:"2xs",iconOnly:true,variant:"ghost",onClick:c,"aria-label":"Add stop",title:"Add stop"},y.createElement(Plus,null))),y.createElement("div",{className:"flex flex-col gap-1.5"},t.stops.map(u=>y.createElement("div",{key:u.id,className:"flex items-center gap-1.5"},y.createElement(Rt,{size:"xs",type:"number",min:0,max:100,value:u.position,onChange:g=>i(u.id,{position:Number(g.target.value)}),endSlot:"%","aria-label":"Stop position",className:"w-16"}),y.createElement(Ua,{triggerVariant:"inline",value:u.token??null,onValueChange:g=>i(u.id,{token:g??void 0,color:void 0}),"aria-label":"Stop colour"}),y.createElement(Rt,{size:"xs",type:"number",min:0,max:100,value:Math.round(u.opacity*100),onChange:g=>i(u.id,{opacity:Math.max(0,Math.min(100,Number(g.target.value)))/100}),endSlot:"%","aria-label":"Stop opacity",className:"w-16"}),y.createElement(Ce,{size:"xs",iconOnly:true,variant:"ghost",onClick:()=>s(u.id),disabled:t.stops.length<=2,"aria-label":"Remove stop",title:"Remove stop",className:"ml-auto"},y.createElement(Minus,null))))))});Fn.displayName="GradientEditor";var cm={primary:"oklch(var(--primary))",secondary:"oklch(var(--accent))",accent:"oklch(var(--primary))",background:"oklch(var(--foreground))"};var zn=y.forwardRef(({preset:e,live:t="hover",postPreset:o,palette:a,className:r,aspect:n="video",radius:i="lg",label:c,hideLabel:s=false,onClick:l},p)=>{let m=Nr[e],[u,g]=y.useState(false),h=t!=="never",f=t==="always"||t==="hover"&&u;return y.createElement("div",{ref:p,"data-gds-part":"picker-card","data-gds-preset":e,onMouseEnter:()=>g(true),onMouseLeave:()=>g(false),onClick:l,className:d("group cursor-pointer flex flex-col gap-2",r)},h?y.createElement(Wa,{key:e,preset:e,postPreset:o,palette:a??cm,aspect:n,radius:i,autoPlay:false,play:f,controls:false,pauseOffscreen:true,releaseOffscreen:true,poster:m?.poster,maxDpr:1}):y.createElement(fo,{aspect:n,radius:i,"data-gds-part":"preset-poster",className:"bg-gradient-to-br from-muted to-muted/50"},m?.poster?y.createElement("img",{src:m.poster,alt:m.label,className:"w-full h-full object-cover"}):y.createElement("div",{className:"absolute inset-0 flex items-center justify-center text-xs text-muted-foreground"},m?.label??e)),!s&&y.createElement("div",{className:"flex items-baseline justify-between text-xs"},y.createElement("span",{className:"font-medium text-foreground","data-gds-part":"preset-label"},c??m?.label??e),m?.tags?.[0]&&y.createElement("span",{className:"text-muted-foreground"},m.tags[0])))});zn.displayName="ShaderPresetPreview";function hs({value:e,onChange:t,filterTags:o,live:a="hover",postPreset:r,palette:n,columns:i=3,className:c}){let s=y.useMemo(()=>o?.length?Mr.filter(p=>o.some(m=>p.tags.includes(m))):Mr,[o]);return y.createElement("div",{"data-gds-part":"preset-grid",role:"radiogroup",className:d("grid grid-cols-2 gap-3",i===2?"md:grid-cols-2":i===4?"md:grid-cols-4":"md:grid-cols-3",c)},s.map(p=>{let m=e===p.id;return y.createElement("div",{key:p.id,className:"relative",role:"radio","aria-checked":m},y.createElement(zn,{preset:p.id,postPreset:r,palette:n,live:a,onClick:()=>t?.(p.id),className:d("transition-all",m&&"ring-2 ring-primary ring-offset-2 ring-offset-background rounded-lg")}),m&&y.createElement("div",{"data-gds-part":"picker-selected-badge",className:"absolute top-2 right-2 rounded-full bg-primary text-primary-foreground p-1 shadow-sm"},y.createElement(Check,{className:"h-3.5 w-3.5"})))}))}var Vn=["primary","accent","secondary","muted","card","background","destructive","transparent"];function $y(e){return e==="transparent"?"transparent":`oklch(var(--${e}))`}var jy=[{tab:"solid",icon:Square,label:"Solid"},{tab:"gradient",icon:Blend,label:"Gradient"},{tab:"image",icon:Image,label:"Image"},{tab:"pattern",icon:Grid3x3,label:"Pattern"},{tab:"video",icon:Video,label:"Video"},{tab:"shader",icon:Sparkles,label:"Shader"}];function Ky(e){return e.type==="image"&&e.repeat?"pattern":e.type==="image"?"image":e.type}var oo="text-[11px] font-medium text-muted-foreground";function bs({token:e,active:t,onClick:o}){return y.createElement("button",{type:"button",title:e,onClick:o,className:d("h-7 w-7 rounded-md border border-border/60 transition-shadow",e==="transparent"&&"bg-[linear-gradient(45deg,#bbb_25%,transparent_25%,transparent_75%,#bbb_75%),linear-gradient(45deg,#bbb_25%,transparent_25%,transparent_75%,#bbb_75%)] bg-[length:8px_8px] bg-[position:0_0,4px_4px]",t&&"ring-2 ring-primary ring-offset-1 ring-offset-background"),style:e==="transparent"?void 0:{background:$y(e)}})}function gm({value:e,onChange:t,className:o}){let a=Ky(e),r=i=>t({...e,...i}),n=i=>{i&&r(i==="pattern"?{type:"image",repeat:true}:i==="image"?{type:"image",repeat:false}:{type:i});};return y.createElement("div",{className:d("flex flex-col gap-3",o)},y.createElement(co,{type:"single",size:"sm",value:a,onValueChange:i=>n(i),className:"justify-start gap-0.5"},jy.map(({tab:i,icon:c,label:s})=>y.createElement(po,{key:i,value:i,"aria-label":s,title:s},y.createElement(c,{className:"h-4 w-4"})))),a==="solid"&&y.createElement("div",{className:"flex flex-col gap-1.5"},y.createElement("span",{className:oo},"Token"),y.createElement("div",{className:"flex flex-wrap gap-1.5"},Vn.map(i=>y.createElement(bs,{key:i,token:i,active:e.color===i,onClick:()=>r({color:i})})))),a==="gradient"&&y.createElement("div",{className:"flex flex-col gap-2"},y.createElement("div",{className:"flex flex-col gap-1.5"},y.createElement("span",{className:oo},"From"),y.createElement("div",{className:"flex flex-wrap gap-1.5"},Vn.map(i=>y.createElement(bs,{key:i,token:i,active:e.gradient?.from===i,onClick:()=>r({gradient:{...e.gradient,from:i}})})))),y.createElement("div",{className:"flex flex-col gap-1.5"},y.createElement("span",{className:oo},"To"),y.createElement("div",{className:"flex flex-wrap gap-1.5"},Vn.map(i=>y.createElement(bs,{key:i,token:i,active:e.gradient?.to===i,onClick:()=>r({gradient:{...e.gradient,to:i}})})))),y.createElement("div",{className:"flex flex-col gap-1.5"},y.createElement("span",{className:oo},"Angle \u2014 ",e.gradient?.angle??135,"\xB0"),y.createElement(da,{value:[e.gradient?.angle??135],min:0,max:360,step:5,onValueChange:([i])=>r({gradient:{...e.gradient,angle:i}})}))),(a==="image"||a==="pattern")&&y.createElement("div",{className:"flex flex-col gap-2"},y.createElement("div",{className:"flex flex-col gap-1.5"},y.createElement("span",{className:oo},"Image URL"),y.createElement(Rt,{size:"sm",value:e.src??"",placeholder:"https://\u2026 or /asset.png",onChange:i=>r({src:i.target.value})})),a==="image"&&y.createElement("div",{className:"flex flex-col gap-1.5"},y.createElement("span",{className:oo},"Fit"),y.createElement(co,{type:"single",size:"sm",value:e.fit??"cover",onValueChange:i=>i&&r({fit:i}),className:"justify-start gap-0.5"},["cover","contain","fill","none"].map(i=>y.createElement(po,{key:i,value:i,className:"px-2 text-[11px] capitalize"},i)))),a==="pattern"&&y.createElement("div",{className:"flex flex-col gap-1.5"},y.createElement("span",{className:oo},"Tile size"),y.createElement(Rt,{size:"sm",value:e.tileSize??"",placeholder:"120px",onChange:i=>r({tileSize:i.target.value})}))),a==="video"&&y.createElement("div",{className:"flex flex-col gap-1.5"},y.createElement("span",{className:oo},"Video URL"),y.createElement(Rt,{size:"sm",value:e.src??"",placeholder:"https://\u2026.mp4",onChange:i=>r({src:i.target.value})})),a==="shader"&&y.createElement("div",{className:"flex flex-col gap-1.5"},y.createElement("span",{className:oo},"Shader"),y.createElement(hs,{value:e.preset,onChange:i=>r({preset:i}),live:"hover",columns:3})),e.type!=="none"&&y.createElement("div",{className:"flex items-center gap-2 border-t border-border/50 pt-2.5"},y.createElement("span",{className:d(oo,"shrink-0")},"Opacity"),y.createElement(da,{value:[e.opacity??1],min:0,max:1,step:.05,onValueChange:([i])=>r({opacity:i}),className:"flex-1"}),y.createElement("span",{className:"w-9 shrink-0 text-right text-[11px] tabular-nums text-foreground"},Math.round((e.opacity??1)*100),"%")))}gm.displayName="FillPicker";var qy=[{kind:"solid",icon:Square,label:"Solid"},{kind:"gradient",icon:Blend,label:"Gradient"},{kind:"image",icon:Image,label:"Image"}];function Yy(e){return e.type==="gradient"?"gradient":e.type==="image"?"image":"solid"}function dm(e){let t=e.gradient??{},o=[],a=(r,n,i)=>{r!=null&&o.push({id:i,position:n,token:r,opacity:1});};return a(t.from??"primary",0,"g-from"),t.via!=null&&a(t.via,50,"g-via"),a(t.to??"accent",100,"g-to"),{type:"linear",angle:t.angle??90,stops:o}}function Zy(e){let t=[...e.stops].sort((n,i)=>n.position-i.position),o=t[0]?.token,a=t[t.length-1]?.token,r=t.length>2?t[1]?.token:void 0;return {from:o,via:r,to:a,angle:e.angle}}function Xy(){return {type:"solid",color:"primary",opacity:1}}function fm({value:e,onChange:t,title:o="Fills",className:a}){let r=(s,l)=>t(e.map((p,m)=>m===s?{...p,...l}:p)),n=s=>t(e.filter((l,p)=>p!==s)),i=()=>t([...e,Xy()]),c=(s,l)=>{l==="image"?r(s,{type:"image",repeat:false}):r(s,{type:l});};return y.createElement("div",{className:d("flex flex-col gap-2",a)},y.createElement("div",{className:"flex items-center justify-between"},y.createElement("span",{className:oo},o),y.createElement(Ce,{size:"2xs",iconOnly:true,variant:"ghost",onClick:i,"aria-label":"Add fill",title:"Add fill"},y.createElement(Plus,null))),e.length===0&&y.createElement("p",{className:"text-[11px] text-muted-foreground"},"No fills."),y.createElement("div",{className:"flex flex-col gap-1.5"},e.map((s,l)=>{let p=Yy(s),m=s.opacity??1,u=m>0,g=s._opacity,h=()=>{u?r(l,{opacity:0,_opacity:m}):r(l,{opacity:g??1});};return y.createElement("div",{key:l,"data-gds-part":"fill-row",className:"flex items-center gap-1.5"},y.createElement(co,{type:"single",size:"sm",value:p,onValueChange:f=>f&&c(l,f),className:"gap-0.5"},qy.map(({kind:f,icon:b,label:v})=>y.createElement(po,{key:f,value:f,"aria-label":v,title:v},y.createElement(b,{className:"h-4 w-4"})))),y.createElement("div",{className:"min-w-0 flex-1"},p==="solid"&&y.createElement(Ua,{triggerVariant:"inline",value:s.color??null,onValueChange:f=>r(l,{color:f??void 0}),"aria-label":"Fill colour"}),p==="gradient"&&y.createElement(pt,null,y.createElement(ut,{asChild:true},y.createElement("button",{type:"button","aria-label":"Edit gradient",className:"h-6 w-full rounded-md border border-border/60",style:{background:Hn(dm(s))}})),y.createElement(tt,{align:"start",className:"w-64"},y.createElement(Fn,{value:dm(s),onChange:f=>r(l,{gradient:Zy(f)})}))),p==="image"&&y.createElement(Rt,{size:"xs",value:s.src??"",placeholder:"https://\u2026 or /asset.png",onChange:f=>r(l,{src:f.target.value}),"aria-label":"Image URL"})),y.createElement(Rt,{size:"xs",type:"number",min:0,max:100,value:Math.round(m*100),onChange:f=>r(l,{opacity:Math.max(0,Math.min(100,Number(f.target.value)))/100}),endSlot:"%","aria-label":"Fill opacity",className:"w-14"}),y.createElement(Ce,{size:"xs",iconOnly:true,variant:"ghost",onClick:h,"aria-label":u?"Hide fill":"Show fill",title:u?"Hide fill":"Show fill"},u?y.createElement(Eye,null):y.createElement(EyeOff,null)),y.createElement(Ce,{size:"xs",iconOnly:true,variant:"ghost",onClick:()=>n(l),"aria-label":"Remove fill",title:"Remove fill"},y.createElement(Trash2,null)))})))}fm.displayName="FillSection";function tx({children:e}){let t=useRef(null);return useEffect(()=>{let o=new ex({duration:1.2,easing:r=>Math.min(1,1.001-Math.pow(2,-10*r)),orientation:"vertical",gestureOrientation:"vertical",smoothWheel:true});t.current=o;function a(r){o.raf(r),requestAnimationFrame(a);}return requestAnimationFrame(a),()=>{o.destroy(),t.current=null;}},[]),y.createElement(y.Fragment,null,e)}function ix({className:e}){let t=ma();if(!t)return null;let{theme:o,themes:a,setThemeId:r,deleteTheme:n}=t;return y.createElement(pt,null,y.createElement(ut,{asChild:true},y.createElement(Ce,{variant:"ghost",size:"sm",className:d("gap-2",e),"aria-label":"Switch theme"},y.createElement(Palette,{className:"h-4 w-4"}),y.createElement("span",{className:"hidden sm:inline"},o.name))),y.createElement(tt,{className:"w-80 p-2",align:"end"},y.createElement("div",{className:"flex items-start justify-between gap-2 px-2 py-1.5 mb-1"},y.createElement("div",null,y.createElement("div",{className:"text-xs font-medium text-muted-foreground"},"Theme"),y.createElement("div",{className:"text-xs text-muted-foreground/80"},"Switch the skin applied site-wide.")),y.createElement("button",{type:"button",onClick:()=>Fi(o),className:"flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[10px] font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",title:"Download the active theme as a markdown spec \u2014 paste into a fresh LLM prompt"},y.createElement(Download,{className:"h-3 w-3"}),".md")),y.createElement("div",{className:"flex flex-col gap-0.5"},a.map(i=>{let c=i.id===o.id,s=i.id in go,l=i.ramps.primary[500],p=i.ramps.accent[500],m=i.ramps.neutral[500];return y.createElement("div",{key:i.id,className:d("group flex items-start gap-3 rounded-md px-2 py-2 text-left transition-colors","hover:bg-muted",c&&"bg-muted")},y.createElement("button",{type:"button",onClick:()=>r(i.id),className:"flex items-start gap-3 flex-1 min-w-0 text-left"},y.createElement("div",{className:"mt-0.5 flex shrink-0 overflow-hidden rounded-md border border-border"},y.createElement("div",{className:"h-5 w-2.5",style:{background:`oklch(${l})`},"aria-hidden":true}),y.createElement("div",{className:"h-5 w-2.5",style:{background:`oklch(${p})`},"aria-hidden":true}),y.createElement("div",{className:"h-5 w-2.5",style:{background:`oklch(${m})`},"aria-hidden":true})),y.createElement("div",{className:"min-w-0 flex-1"},y.createElement("div",{className:"flex items-center gap-2"},y.createElement("span",{className:"text-sm font-medium truncate text-foreground"},i.name),i.tagline&&y.createElement("span",{className:"text-[10px] uppercase tracking-wide text-muted-foreground shrink-0"},i.tagline)),i.description&&y.createElement("div",{className:"text-xs text-muted-foreground line-clamp-2"},i.description))),c&&y.createElement(Check,{className:"mt-2 h-4 w-4 shrink-0 text-primary"}),!s&&!c&&y.createElement("button",{type:"button",onClick:u=>{u.stopPropagation(),n(i.id);},className:"mt-1 opacity-0 group-hover:opacity-100 transition-opacity rounded p-1 hover:bg-destructive/10 hover:text-destructive","aria-label":`Delete theme ${i.name}`},y.createElement(Trash2,{className:"h-3.5 w-3.5"})))}))))}var hm=[{mode:"superLight",label:"Super light",icon:SunDim,tooltip:"Super light \u2014 airy, low contrast"},{mode:"light",label:"Light",icon:Sun,tooltip:"Light"},{mode:"dark",label:"Dark",icon:Moon,tooltip:"Dark"},{mode:"superDark",label:"Super dark",icon:MoonStar,tooltip:"Super dark \u2014 OLED, high contrast"}];function px({className:e,variant:t="icons"}){let o=ma();if(!o)return null;let{mode:a,setMode:r}=o;return t==="labeled"?y.createElement("div",{role:"radiogroup","aria-label":"Brightness mode",className:d("inline-flex flex-wrap gap-1 rounded-md border border-border bg-background p-1",e)},hm.map(({mode:n,label:i,icon:c})=>{let s=a===n;return y.createElement("button",{key:n,type:"button",role:"radio","aria-checked":s,onClick:()=>r(n),className:d("flex items-center gap-2 rounded px-3 py-1.5 text-sm transition-colors",s?"bg-primary text-primary-foreground":"hover:bg-accent hover:text-accent-foreground")},y.createElement(c,{className:"h-4 w-4"}),y.createElement("span",null,i))})):y.createElement("div",{role:"radiogroup","aria-label":"Brightness mode",className:d("inline-flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5",e)},hm.map(({mode:n,icon:i,tooltip:c})=>{let s=a===n;return y.createElement("button",{key:n,type:"button",role:"radio","aria-checked":s,"aria-label":c,title:c,onClick:()=>r(n),className:d("flex h-7 w-7 items-center justify-center rounded transition-colors",s?"bg-primary text-primary-foreground":"text-muted-foreground hover:bg-accent hover:text-accent-foreground")},y.createElement(i,{className:"h-3.5 w-3.5"}))}))}function gx(){let{isDark:e,setMode:t}=Gi();return y.createElement(Ce,{variant:"ghost",size:"sm",onClick:()=>t(e?"light":"dark"),className:"gap-2","aria-label":e?"Switch to light mode":"Switch to dark mode"},e?y.createElement(y.Fragment,null,y.createElement(Sun,{className:"h-4 w-4"}),y.createElement("span",{className:"hidden sm:inline"},"Light")):y.createElement(y.Fragment,null,y.createElement(Moon,{className:"h-4 w-4"}),y.createElement("span",{className:"hidden sm:inline"},"Dark")))}
|
|
1294
|
+
export{Gp as ALL_MODES,Zm as Accordion,Kl as AccordionContent,$l as AccordionItem,jl as AccordionTrigger,rc as AppShell,sc as AppShellAside,cc as AppShellFooter,nc as AppShellHeader,lc as AppShellMain,ic as AppShellNav,pc as Avatar,mc as AvatarFallback,uc as AvatarImage,kn as BUILT_IN_INPUTS,nm as BackgroundFill,Ao as Badge,bc as Banner,Yr as BlinkingCursor,Qd as Breadcrumb,np as BreadcrumbEllipsis,tp as BreadcrumbItem,op as BreadcrumbLink,ep as BreadcrumbList,ip as BreadcrumbMenuTrigger,ap as BreadcrumbPage,rp as BreadcrumbSeparator,Ce as Button,Ar as COLOR_PICKER_TRANSPARENT,$n as COMPONENT_CONTRACTS,Vr as Calendar,Ec as CalendarDayButton,Yl as Callout,Xl as CalloutDescription,Zl as CalloutTitle,Or as Card,Ic as CardContent,Ac as CardDescription,Hc as CardFooter,Lc as CardHeader,Dc as CardTitle,fg as Carousel,Yn as CarouselArrows,qn as CarouselDots,or as CarouselNext,tr as CarouselPrev,Br as CarouselSlide,Kn as CarouselVideoSlide,gp as ChartContainer,Fh as ChartLegend,bp as ChartLegendContent,fp as ChartStyle,Hh as ChartTooltip,hp as ChartTooltipContent,Fc as Checkbox,_c as CheckboxCard,Xc as Code,Ua as ColorPicker,gd as Combobox,kc as Container,fs as DEFAULT_COLOR_TOKEN_GROUPS,Ma as DEMO_SPEED_PRESETS,gn as DataView,li as DataViewColumns,si as DataViewToggle,$g as DatePicker,jg as DateRangePicker,qc as DemoStage,qg as Dialog,Zg as DialogClose,ed as DialogContent,rd as DialogDescription,od as DialogFooter,td as DialogHeader,ei as DialogOverlay,Qc as DialogPortal,ad as DialogTitle,Yg as DialogTrigger,ti as DropdownMenu,Jr as DropdownMenuCheckboxItem,Xr as DropdownMenuContent,ef as DropdownMenuGroup,ld as DropdownMenuItem,Qr as DropdownMenuLabel,tf as DropdownMenuPortal,af as DropdownMenuRadioGroup,cd as DropdownMenuRadioItem,en as DropdownMenuSeparator,dd as DropdownMenuShortcut,of as DropdownMenuSub,sd as DropdownMenuSubContent,id as DropdownMenuSubTrigger,oi as DropdownMenuTrigger,Vn as FILL_TOKENS,Iu as FRAGMENT_HEADER,vg as Field,Gr as FieldDescription,_r as FieldLabel,Wr as FieldTrailing,gm as FillPicker,fm as FillSection,Td as Flex,yb as GRADE_PRE_HYDRATION_SCRIPT,uu as GradeLoader,px as GradeModeSwitcher,xb as GradeThemeProvider,ix as GradeThemeSwitcher,Fn as GradientEditor,Rd as Grid,Rt as Input,lr as Label,tx as LenisProvider,gv as Logo,nr as MOTION_ATTR,Ui as Map,$i as MapMarker,fo as MediaSurface,Gn as MediaSurfaceContract,_g as Message,Wv as Motion,Qi as MotionOverlay,Av as MotionScene,xu as MotionScreen,ku as MotionText,md as MultiSelect,pt as Popover,Gg as PopoverAnchor,tt as PopoverContent,ut as PopoverTrigger,ud as Progress,xg as PropertyList,Xn as PropertyListRow,Oc as RadioCard,wd as RadioGroup,kd as RadioGroupItem,Uf as ResizableHandle,Wf as ResizablePanel,Gf as ResizablePanelGroup,Yc as Reveal,du as RivePlayer,zo as Row,Yi as ScreenAnimator,Pd as ScrollArea,ci as ScrollBar,xc as Section,Pc as SectionActions,Tc as SectionDescription,Sc as SectionEyebrow,Mc as SectionMedia,Cc as SectionSubtitle,Rc as SectionTitle,hr as Select,Fa as SelectContent,Xf as SelectGroup,za as SelectItem,Ed as SelectLabel,ui as SelectScrollDownButton,pi as SelectScrollUpButton,Ld as SelectSeparator,Ha as SelectTrigger,br as SelectValue,ur as Separator,Ga as ShaderCompileError,wy as ShaderControls,hs as ShaderPresetPicker,zn as ShaderPresetPreview,lh as Sheet,dh as SheetClose,Fd as SheetContent,Od as SheetDescription,Vd as SheetFooter,zd as SheetHeader,mi as SheetOverlay,Hd as SheetPortal,Bd as SheetTitle,ch as SheetTrigger,_o as Sidebar,Si as SidebarContent,Ri as SidebarFooter,ki as SidebarHeader,Ti as SidebarItem,Ci as SidebarSection,Pi as SidebarTreeItem,uh as Skeleton,da as Slider,Ch as Sortable,fi as SortableGroup,bi as SortableHandle,hi as SortableItem,La as Stack,To as Swatch,Id as SwatchGroup,vn as Switch,Gc as SwitchCard,nn as Table,ln as TableBody,vd as TableCaption,mr as TableCell,bd as TableFooter,cn as TableHead,sn as TableHeader,Da as TableRow,Lh as Tabs,pp as TabsContent,cp as TabsList,dp as TabsTrigger,vp as Textarea,gx as ThemeToggle,Wa as ThreeScene,yd as Toggle,co as ToggleGroup,po as ToggleGroupItem,yp as Toolbar,xp as ToolbarSlot,sa as Tooltip,Vo as TooltipContent,ii as TooltipProvider,la as TooltipTrigger,cu as VideoPlayer,tc as appShellAsideVariants,ac as appShellFooterVariants,Ql as appShellHeaderVariants,oc as appShellMainVariants,ec as appShellNavVariants,Sn as applyThemeToRoot,fc as badgeVariants,hc as bannerVariants,je as buildFragmentShaderScene,go as builtInThemes,er as buttonVariants,ql as calloutVariants,Rr as calmInput,d as cn,wc as containerVariants,Ln as defaultPostPreset,Oa as defaultThemeId,Bi as deleteUserTheme,et as demoSleep,Wc as demoTypeText,vb as duplicateTheme,Li as energyInput,Cd as flexVariants,pa as generateTheme,$m as getComponentContract,ua as getTheme,Hn as gradientToCss,Sd as gridVariants,jm as listContractedComponents,zi as listThemes,Op as listUserThemes,Vi as loadUserThemeInput,Er as postPresets,fd as rowVariants,Cn as saveUserTheme,Pr as sceneRegistry,yc as sectionBandVariants,Tg as setMotion,Nr as shaderPresetById,Mr as shaderPresets,Jl as shellVariants,hd as stackVariants,Dd as swatchVariants,Ii as themeToCSSVars,pn as toggleVariants,hg as useCarouselApi,If as useDataView,Gi as useGradeTheme,ma as useMaybeGradeTheme,Ji as useMotionScene,ir as usePageActive,Ho as usePrefersReducedMotion,Co as useReducedMotion,Ea as useScriptedDemo};//# sourceMappingURL=index.mjs.map
|
|
1295
1295
|
//# sourceMappingURL=index.mjs.map
|