1import{r as n,j as e}from"./react-vendor-DaI6VGpT.js" 2import{ad as r,ae as a,h as t,S as i,af as o,ag as s,J as l}from"./index-BWDYJ3To.js" 3import{m as c}from"./framer-motion-Ecnl6GjF.js" 4import"./icons-BNENLX3T.js" 5const d=n.forwardRef(({variant:n="primary",size:r="md",loading:a=!1,fullWidth:t=!1,leftIcon:i,rightIcon:o,children:s,disabled:l,className:c="",...d},p)=>{const x=l||a 6return e.jsxs(e.Fragment,{children:[e.jsxs("button",{ref:p,disabled:x,className:`btn btn--${n} btn--${r} ${t?"btn--full":""} ${a?"btn--loading":""} ${c}`,...d,children:[a&&e.jsx("span",{className:"btn__spinner",children:e.jsx("svg",{className:"btn__spinner-svg",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeDasharray:"31.4 31.4"})})}),!a&&i&&e.jsx("span",{className:"btn__icon btn__icon--left",children:i}),e.jsx("span",{className:"btn__text",children:s}),!a&&o&&e.jsx("span",{className:"btn__icon btn__icon--right",children:o})]}),e.jsx("style",{children:"\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n border: none;\n border-radius: var(--radius-md, 12px);\n font-family: var(--font-family, 'Inter', sans-serif);\n font-weight: 500;\n cursor: pointer;\n transition: all var(--transition-fast, 100ms) ease-out;\n position: relative;\n overflow: hidden;\n }\n\n .btn:active:not(:disabled) {\n transform: scale(0.95);\n }\n\n .btn:focus-visible {\n outline: 2px solid var(--color-brand-primary, #B2DD3F);\n outline-offset: 2px;\n }\n\n .btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* Sizes */\n .btn--sm {\n height: 32px;\n padding: 0 12px;\n font-size: 13px;\n }\n\n .btn--md {\n height: 44px;\n padding: 0 20px;\n font-size: 15px;\n }\n\n .btn--lg {\n height: 52px;\n padding: 0 28px;\n font-size: 16px;\n }\n\n .btn--full {\n width: 100%;\n }\n\n /* Variants â lime brand. On lime, text is dark ink (lime is too\n light for white text to pass contrast). */\n .btn--primary {\n background: var(--color-brand-primary, #B2DD3F);\n color: var(--color-brand-primary-ink, #16210A);\n }\n\n .btn--primary:hover:not(:disabled) {\n background: var(--color-brand-primary-dark, #7F9F28);\n }\n\n .btn--secondary {\n background: transparent;\n border: 2px solid var(--color-brand-primary, #B2DD3F);\n color: var(--color-brand-primary, #B2DD3F);\n }\n\n .btn--secondary:hover:not(:disabled) {\n background: rgba(178, 221, 63, 0.12);\n }\n\n .btn--ghost {\n background: transparent;\n color: var(--theme-text-primary, #FFF);\n }\n\n .btn--ghost:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .btn--danger {\n background: var(--color-error, #EF4444);\n color: white;\n }\n\n .btn--danger:hover:not(:disabled) {\n background: #DC2626;\n }\n\n .btn--success {\n background: var(--color-success, #10B981);\n color: white;\n }\n\n .btn--success:hover:not(:disabled) {\n background: #059669;\n }\n\n /* Loading state */\n .btn--loading {\n pointer-events: none;\n }\n\n .btn__spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .btn__spinner-svg {\n width: 18px;\n height: 18px;\n animation: spin 1s linear infinite;\n }\n\n .btn__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .btn__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .btn__text {\n white-space: nowrap;\n }\n\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .btn {\n transition: none;\n }\n .btn:active:not(:disabled) {\n transform: none;\n }\n .btn__spinner-svg {\n animation: none;\n }\n }\n "})]})}) 7d.displayName="Button" 8const p=n.forwardRef(({variant:n="ghost",size:r="md",icon:a,disabled:t,className:i="",...o},s)=>e.jsxs(e.Fragment,{children:[e.jsx("button",{ref:s,disabled:t,className:`icon-btn icon-btn--${n} icon-btn--${r} ${i}`,...o,children:a}),e.jsx("style",{children:"\n .icon-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--radius-md, 12px);\n cursor: pointer;\n transition: all var(--transition-fast, 100ms) ease-out;\n }\n\n .icon-btn:active:not(:disabled) {\n transform: scale(0.9);\n }\n\n .icon-btn:focus-visible {\n outline: 2px solid var(--color-brand-primary, #FF0000);\n outline-offset: 2px;\n }\n\n .icon-btn:disabled {\n opacity: 0.5;
8\n cursor: not-allowed;\n }\n\n /* Sizes */\n .icon-btn--sm {\n width: 32px;\n height: 32px;\n }\n\n .icon-btn--sm svg {\n width: 16px;\n height: 16px;\n }\n\n .icon-btn--md {\n width: 40px;\n height: 40px;\n }\n\n .icon-btn--md svg {\n width: 20px;\n height: 20px;\n }\n\n .icon-btn--lg {\n width: 48px;\n height: 48px;\n }\n\n .icon-btn--lg svg {\n width: 24px;\n height: 24px;\n }\n\n /* Variants */\n .icon-btn--primary {\n background: var(--color-brand-primary, #FF0000);\n color: white;\n }\n\n .icon-btn--primary:hover:not(:disabled) {\n background: var(--color-brand-primary-dark, #CC0000);\n }\n\n .icon-btn--secondary {\n background: transparent;\n border: 2px solid var(--color-border, #333);\n color: var(--theme-text-primary, #FFF);\n }\n\n .icon-btn--secondary:hover:not(:disabled) {\n border-color: var(--color-brand-primary, #FF0000);\n color: var(--color-brand-primary, #FF0000);\n }\n\n .icon-btn--ghost {\n background: transparent;\n color: var(--theme-text-secondary, #9B9B9B);\n }\n\n .icon-btn--ghost:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.1);\n color: var(--theme-text-primary, #FFF);\n }\n\n .icon-btn--danger {\n background: transparent;\n color: var(--color-error, #EF4444);\n }\n\n .icon-btn--danger:hover:not(:disabled) {\n background: rgba(239, 68, 68, 0.1);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .icon-btn {\n transition: none;\n }\n .icon-btn:active:not(:disabled) {\n transform: none;\n }\n }\n "})]})) 9p.displayName="IconButton" 10const x=n.forwardRef(({variant:n="default",padding:r="md",radius:a="lg",children:t,className:i="",onClick:o,...s},l)=>{const c=Boolean(o) 11return e.jsxs(e.Fragment,{children:[e.jsx("div",{ref:l,className:`card card--${n} card--p-${r} card--r-${a} ${c?"card--clickable":""} ${i}`,onClick:o,role:c?"button":void 0,tabIndex:c?0:void 0,onKeyDown:c?n=>"Enter"===n.key&&(null==o?void 0:o(n)):void 0,...s,children:t}),e.jsx("style",{children:"\n .card {\n background: var(--color-surface, #1F1F1F);\n border: 1px solid var(--color-border, #333);\n transition: all var(--transition-normal, 300ms) ease;\n }\n\n /* Padding */\n .card--p-none { padding: 0; }\n .card--p-sm { padding: var(--spacing-sm, 8px); }\n .card--p-md { padding: var(--spacing-md, 16px); }\n .card--p-lg { padding: var(--spacing-lg, 24px); }\n\n /* Radius */\n .card--r-sm { border-radius: var(--radius-sm, 6px); }\n .card--r-md { border-radius: var(--radius-md, 12px); }\n .card--r-lg { border-radius: var(--radius-lg, 16px); }\n .card--r-xl { border-radius: var(--radius-xl, 24px); }\n\n /* Variants */\n .card--default {\n box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));\n }\n\n .card--elevated {\n box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.15));\n }\n\n .card--interactive {\n box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));\n }\n\n .card--glass {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n /* Clickable */\n .card--clickable {\n cursor: pointer;\n }\n\n .card--clickable:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.15));\n }\n\n .card--clickable:active {\n transform: translateY(0);\n }\n\n .card--clickable:focus-visible {\n outline: 2px solid var(--color-brand-primary, #FF0000);\n outline-offset: 2px;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .card {\n transition: none;\n }\n .card--clickable:hover {\n transform: none;\n }\n }\n "})]})}) 12function g({title:n,subtitle:r,action:a,children:t,className:i="",...o}){return t?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:`card-header ${i}`,...o,children:t}),e.jsx("style",{children:b})]}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:`card-header ${i}`,...o,children:[e.jsxs("div",{className:"card-header__content",children:[n&&e.jsx("h3",{className:"card-header__title",children:n}),r&&e.jsx("p",{className:"card-header__subtitle",children:r})]}),a&&e.jsx("div",{className:"card-header__action",children:a})]}),e.jsx("style",{children:b})]})}
12x.displayName="Card" 13const b="\n .card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--spacing-md, 16px);\n padding-bottom: var(--spacing-md, 16px);\n border-bottom: 1px solid var(--color-border, #333);\n margin-bottom: var(--spacing-md, 16px);\n }\n\n .card-header__content {\n flex: 1;\n min-width: 0;\n }\n\n .card-header__title {\n margin: 0;\n font-size: var(--font-size-h4, 18px);\n font-weight: 600;\n color: var(--theme-text-primary, #FFF);\n line-height: 1.3;\n }\n\n .card-header__subtitle {\n margin: 4px 0 0;\n font-size: var(--font-size-caption, 14px);\n color: var(--theme-text-secondary, #9B9B9B);\n }\n\n .card-header__action {\n flex-shrink: 0;\n }\n" 14function h({children:n,className:r="",...a}){return e.jsx("div",{className:`card-body ${r}`,...a,children:n})}function m({children:n,align:r="right",className:a="",...t}){return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:`card-footer card-footer--${r} ${a}`,...t,children:n}),e.jsx("style",{children:"\n .card-footer {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm, 8px);\n padding-top: var(--spacing-md, 16px);\n border-top: 1px solid var(--color-border, #333);\n margin-top: var(--spacing-md, 16px);\n }\n\n .card-footer--left {\n justify-content: flex-start;\n }\n\n .card-footer--center {\n justify-content: center;\n }\n\n .card-footer--right {\n justify-content: flex-end;\n }\n\n .card-footer--between {\n justify-content: space-between;\n }\n "})]})}const u=n.forwardRef(({label:n,error:r,hint:a,size:t="md",leftIcon:i,rightIcon:o,fullWidth:s=!1,disabled:l,className:c="",id:d,...p},x)=>{const g=d||`input-${Math.random().toString(36).slice(2,9)}` 15return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:`input-wrapper ${s?"input-wrapper--full":""} ${c}`,children:[n&&e.jsx("label",{htmlFor:g,className:"input__label",children:n}),e.jsxs("div",{className:`input-container input-container--${t} ${r?"input-container--error":""}`,children:[i&&e.jsx("span",{className:"input__icon input__icon--left",children:i}),e.jsx("input",{ref:x,id:g,disabled:l,className:"input__field","aria-invalid":Boolean(r),"aria-describedby":r?`${g}-error`:a?`${g}-hint`:void 0,...p}),o&&e.jsx("span",{className:"input__icon input__icon--right",children:o})]}),r&&e.jsx("p",{id:`${g}-error`,className:"input__error",role:"alert",children:r}),a&&!r&&e.jsx("p",{id:`${g}-hint`,className:"input__hint",children:a})]}),e.jsx("style",{children:"\n .input-wrapper {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .input-wrapper--full {\n width: 100%;\n }\n\n .input__label {\n font-size: 13px;\n font-weight: 500;\n color: var(--theme-text-secondary, #9B9B9B);\n }\n\n .input-container {\n display: flex;\n align-items: center;\n background: var(--color-surface, #1F1F1F);\n border: 1px solid var(--color-border, #333);\n border-radius: var(--radius-md, 12px);\n transition: all var(--transition-fast, 100ms) ease;\n }\n\n .input-container:focus-within {\n border-color: var(--color-brand-primary, #FF0000);\n box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);\n }\n\n .input-container--error {\n border-color: var(--color-error, #EF4444);\n }\n\n .input-container--error:focus-within {\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n }\n\n /* Sizes */\n .input-container--sm {\n height: 36px;\n padding: 0 10px;\n }\n\n .input-container--md {\n height: 44px;\n padding: 0 14px;\n }\n\n .input-container--lg {\n height: 52px;\n padding: 0 16px;\n }\n\n .input__field {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: none;\n outline: none;\n color: var(--theme-text-primary, #FFF);\n font-size: 15px;\n font-family: inherit;\n }\n\n .input__field::placeholder {\n color: var(--theme-text-tertiary, #6B6B6B);\n }\n\n .input__field:disabled {\n opacity: 0.5;
15\n cursor: not-allowed;\n }\n\n .input__icon {\n display: flex;\n align-items: center;\n color: var(--theme-text-tertiary, #6B6B6B);\n }\n\n .input__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .input__icon--left {\n margin-right: 10px;\n }\n\n .input__icon--right {\n margin-left: 10px;\n }\n\n .input__error {\n margin: 0;\n font-size: 12px;\n color: var(--color-error, #EF4444);\n }\n\n .input__hint {\n margin: 0;\n font-size: 12px;\n color: var(--theme-text-tertiary, #6B6B6B);\n }\n "})]})}) 16u.displayName="Input" 17const f=n.forwardRef(({label:n,error:r,hint:a,fullWidth:t=!1,resize:i="vertical",disabled:o,className:s="",id:l,rows:c=4,...d},p)=>{const x=l||`textarea-${Math.random().toString(36).slice(2,9)}` 18return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:`textarea-wrapper ${t?"textarea-wrapper--full":""} ${s}`,children:[n&&e.jsx("label",{htmlFor:x,className:"textarea__label",children:n}),e.jsx("textarea",{ref:p,id:x,disabled:o,rows:c,className:`textarea__field textarea__field--resize-${i} ${r?"textarea__field--error":""}`,"aria-invalid":Boolean(r),"aria-describedby":r?`${x}-error`:a?`${x}-hint`:void 0,...d}),r&&e.jsx("p",{id:`${x}-error`,className:"textarea__error",role:"alert",children:r}),a&&!r&&e.jsx("p",{id:`${x}-hint`,className:"textarea__hint",children:a})]}),e.jsx("style",{children:"\n .textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .textarea-wrapper--full {\n width: 100%;\n }\n\n .textarea__label {\n font-size: 13px;\n font-weight: 500;\n color: var(--theme-text-secondary, #9B9B9B);\n }\n\n .textarea__field {\n padding: 12px 14px;\n background: var(--color-surface, #1F1F1F);\n border: 1px solid var(--color-border, #333);\n border-radius: var(--radius-md, 12px);\n color: var(--theme-text-primary, #FFF);\n font-size: 15px;\n font-family: inherit;\n line-height: 1.5;\n transition: all var(--transition-fast, 100ms) ease;\n }\n\n .textarea__field:focus {\n outline: none;\n border-color: var(--color-brand-primary, #FF0000);\n box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);\n }\n\n .textarea__field--error {\n border-color: var(--color-error, #EF4444);\n }\n\n .textarea__field--error:focus {\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n }\n\n .textarea__field::placeholder {\n color: var(--theme-text-tertiary, #6B6B6B);\n }\n\n .textarea__field:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea__field--resize-none { resize: none; }\n .textarea__field--resize-vertical { resize: vertical; }\n .textarea__field--resize-horizontal { resize: horizontal; }\n .textarea__field--resize-both { resize: both; }\n\n .textarea__error {\n margin: 0;\n font-size: 12px;\n color: var(--color-error, #EF4444);\n }\n\n .textarea__hint {\n margin: 0;\n font-size: 12px;\n color: var(--theme-text-tertiary, #6B6B6B);\n }\n "})]})}) 19f.displayName="TextArea",n.forwardRef(({label:r,error:a,size:t="md",leftIcon:i,rightIcon:o,fullWidth:s=!1,disabled:l,className:c="",id:d,value:p,defaultValue:x,onFocus:g,onBlur:b,...h},m)=>{const[u,f]=n.useState(!1),y=Boolean(p||x),v=u||y,k=d||`floating-input-${Math.random().toString(36).slice(2,9)}` 20return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:`floating-input-wrapper ${s?"floating-input-wrapper--full":""} ${c}`,children:[e.jsxs("div",{className:`floating-input-container floating-input-container--${t} ${u?"floating-input-container--focused":""} ${a?"floating-input-container--error":""}`,children:[i&&e.jsx("span",{className:"floating-input__icon floating-input__icon--left",children:i}),e.jsxs("div",{className:"floating-input__field-wrapper",children:[e.jsx("input",{ref:m,id:k,disabled:l,className:"floating-input__field",value:p,defaultValue:x,onFocus:n=>{f(!0),null==g||g(n)},onBlur:n=>{f(!1),null==b||b(n)},"aria-invalid":Boolean(a),...h}),e.jsx("label",{htmlFor:k,className:"floating-input__label "+(v?"floating-input__label--floating":""),children:r})]}),o&&e.jsx("span",{className:"floating-input__icon floating-input__icon--right",children:o})]}),a&&e.jsx("p",{className:"floating-input__error",role:"alert",children:a})]}),e.jsx("style",{children:"\n .floating-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .floating-input-wrapper--full {\n width: 100%;\n }\n\n .floating-input-container {\n display: flex;\n align-items: center;\n position: relative;\n background: var(--color-surface, #1F1F1F);\n border: 1px solid var(--color-border, #333);\n border-radius: var(--radius-md, 12px);\n transition: all var(--transition-fast, 100ms) ease;\n }\n\n .floating-input-container--focused {\n border-color: var(--color-brand-primary, #FF0000);\n box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);\n }\n\n .floating-input-container--error {\n border-color: var(--color-error, #EF4444);\n }\n\n .floating-input-container--error.floating-input-container--focused {\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n }\n\n .floating-input-container--md {\n height: 56px;\n padding: 0 14px;\n }\n\n .floating-input-container--lg {\n height: 64px;\n padding: 0 16px;\n }\n\n .floating-input__field-wrapper {\n flex: 1;\n position: relative;\n height: 100%;\n }\n\n .floating-input__field {\n width: 100%;\n height: 100%;\n padding-top: 18px;\n background: transparent;\n border: none;\n outline: none;\n color: var(--theme-text-primary, #FFF);\n font-size: 15px;\n font-family: inherit;\n }\n\n .floating-input__field:disabled {\n opacity: 0.5;
20\n cursor: not-allowed;\n }\n\n .floating-input__label {\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n color: var(--theme-text-tertiary, #6B6B6B);\n font-size: 15px;\n pointer-events: none;\n transition: all 0.2s ease;\n }\n\n .floating-input__label--floating {\n top: 12px;\n transform: translateY(0);\n font-size: 11px;\n color: var(--color-brand-primary, #FF0000);\n }\n\n .floating-input-container--error .floating-input__label--floating {\n color: var(--color-error, #EF4444);\n }\n\n .floating-input__icon {\n display: flex;\n align-items: center;\n color: var(--theme-text-tertiary, #6B6B6B);\n }\n\n .floating-input__icon svg {\n width: 20px;\n height: 20px;\n }\n\n .floating-input__icon--left {\n margin-right: 10px;\n }\n\n .floating-input__icon--right {\n margin-left: 10px;\n }\n\n .floating-input__error {\n margin: 0;\n font-size: 12px;\n color: var(--color-error, #EF4444);\n }\n "})]})}).displayName="FloatingLabelInput" 21const y={sm:20,md:32,lg:48},v=({size:n="md",color:r="#3B82F6",trackColor:a="rgba(255, 255, 255, 0.1)",lineWidth:t=3,className:i})=>{const o="number"==typeof n?n:y[n] 22return e.jsx(c.div,{animate:{rotate:360},transition:{duration:1,repeat:1/0,ease:"linear"},className:i,style:{width:o,height:o,borderRadius:"50%",border:`${t}px solid ${a}`,borderTopColor:r}})} 23function k({variant:n="default",size:r="md",children:a,className:t=""}){return e.jsxs(e.Fragment,{children:[e.jsx("span",{className:`badge badge--${n} badge--${r} ${t}`,children:a}),e.jsx("style",{children:"\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-weight: 500;\n border-radius: var(--radius-full, 9999px);\n white-space: nowrap;\n }\n\n /* Sizes */\n .badge--sm {\n height: 18px;\n padding: 0 6px;\n font-size: 10px;\n }\n\n .badge--md {\n height: 22px;\n padding: 0 8px;\n font-size: 12px;\n }\n\n .badge--lg {\n height: 28px;\n padding: 0 12px;\n font-size: 13px;\n }\n\n /* Variants */\n .badge--default {\n background: var(--color-gray-700, #4A4A4A);\n color: var(--theme-text-primary, #FFF);\n }\n\n .badge--primary {\n background: var(--color-brand-primary, #FF0000);\n color: white;\n }\n\n .badge--success {\n background: rgba(16, 185, 129, 0.2);\n color: #10B981;\n }\n\n .badge--warning {\n background: rgba(245, 158, 11, 0.2);\n color: #F59E0B;\n }\n\n .badge--error {\n background: rgba(239, 68, 68, 0.2);\n color: #EF4444;\n }\n\n .badge--info {\n background: rgba(59, 130, 246, 0.2);\n color: #3B82F6;\n }\n "})]})}function j({status:n="offline",size:r="md",className:a=""}){return e.jsxs(e.Fragment,{children:[e.jsx("span",{className:`status-dot status-dot--${n} status-dot--${r} ${a}`,"aria-label":`Status: ${n}`}),e.jsx("style",{children:"\n .status-dot {\n display: inline-block;\n border-radius: 50%;\n }\n\n .status-dot--sm { width: 6px; height: 6px; }\n .status-dot--md { width: 8px; height: 8px; }\n .status-dot--lg { width: 10px; height: 10px; }\n\n .status-dot--online {\n background: #10B981;\n box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);\n }\n\n .status-dot--offline {\n background: var(--color-gray-500, #6B6B6B);\n }\n\n .status-dot--busy {\n background: #EF4444;\n box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);\n }\n\n .status-dot--away {\n background: #F59E0B;\n box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);\n }\n "})]})}const _=n.forwardRef(({label:n,size:r="md",disabled:a,className:t="",id:i,...o},s)=>{const l=i||`toggle-${Math.random().toString(36).slice(2,9)}` 24return e.jsxs(e.Fragment,{children:[e.jsxs("label",{className:`toggle toggle--${r} ${a?"toggle--disabled":""} ${t}
24`,children:[e.jsx("input",{ref:s,type:"checkbox",id:l,disabled:a,className:"toggle__input",...o}),e.jsx("span",{className:"toggle__track",children:e.jsx("span",{className:"toggle__thumb"})}),n&&e.jsx("span",{className:"toggle__label",children:n})]}),e.jsx("style",{children:"\n .toggle {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n user-select: none;\n }\n\n .toggle--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .toggle__input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .toggle__track {\n position: relative;\n background: var(--color-gray-600, #4A4A4A);\n border-radius: var(--radius-full, 9999px);\n transition: background 0.2s ease;\n }\n\n .toggle--sm .toggle__track { width: 32px; height: 18px; }\n .toggle--md .toggle__track { width: 44px; height: 24px; }\n .toggle--lg .toggle__track { width: 56px; height: 30px; }\n\n .toggle__thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n .toggle--sm .toggle__thumb { width: 14px; height: 14px; }\n .toggle--md .toggle__thumb { width: 20px; height: 20px; }\n .toggle--lg .toggle__thumb { width: 26px; height: 26px; }\n\n .toggle__input:checked + .toggle__track {\n background: var(--color-brand-primary, #FF0000);\n }\n\n .toggle--sm .toggle__input:checked + .toggle__track .toggle__thumb {\n transform: translateX(14px);\n }\n .toggle--md .toggle__input:checked + .toggle__track .toggle__thumb {\n transform: translateX(20px);\n }\n .toggle--lg .toggle__input:checked + .toggle__track .toggle__thumb {\n transform: translateX(26px);\n }\n\n .toggle__input:focus-visible + .toggle__track {\n outline: 2px solid var(--color-brand-primary, #FF0000);\n outline-offset: 2px;\n }\n\n .toggle__label {\n font-size: 14px;\n color: var(--theme-text-primary, #FFF);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .toggle__track,\n .toggle__thumb {\n transition: none;\n }\n }\n "})]})}) 25_.displayName="Toggle",n.forwardRef(({label:n,disabled:r,className:a="",id:t,...i},o)=>{const s=t||`checkbox-${Math.random().toString(36).slice(2,9)}` 26return e.jsxs(e.Fragment,{children:[e.jsxs("label",{className:`checkbox ${r?"checkbox--disabled":""} ${a}`,children:[e.jsx("input",{ref:o,type:"checkbox",id:s,disabled:r,className:"checkbox__input",...i}),e.jsx("span",{className:"checkbox__box",children:e.jsx("svg",{className:"checkbox__check",viewBox:"0 0 12 10",fill:"none",children:e.jsx("path",{d:"M1 5l3 3 7-7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),n&&e.jsx("span",{className:"checkbox__label",children:n})]}),e.jsx("style",{children:"\n .checkbox {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n user-select: none;\n }\n\n .checkbox--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .checkbox__box {\n width: 20px;\n height: 20px;\n border: 2px solid var(--color-gray-500, #6B6B6B);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n }\n\n .checkbox__check {\n width: 12px;\n height: 10px;\n color: white;\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.2s ease;\n }
26\n\n .checkbox__input:checked + .checkbox__box {\n background: var(--color-brand-primary, #FF0000);\n border-color: var(--color-brand-primary, #FF0000);\n }\n\n .checkbox__input:checked + .checkbox__box .checkbox__check {\n opacity: 1;\n transform: scale(1);\n }\n\n .checkbox__input:focus-visible + .checkbox__box {\n outline: 2px solid var(--color-brand-primary, #FF0000);\n outline-offset: 2px;\n }\n\n .checkbox__label {\n font-size: 14px;\n color: var(--theme-text-primary, #FFF);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .checkbox__box,\n .checkbox__check {\n transition: none;\n }\n }\n "})]})}).displayName="Checkbox",n.createContext(null) 27const w=[{key:"voice",label:"Voice",color:r.activity.voice,demoStatus:"0:23 listening",ic:'<path d="M12 2a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zM5 11a7 7 0 0 0 14 0M12 18v4"/>'},{key:"video",label:"Video",color:r.activity.video,demoStatus:"47% · 1:34 left",ic:'<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 9l5 3-5 3z"/>'},{key:"image",label:"Image",color:r.activity.image,demoStatus:"4 of 6",ic:'<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/>'},{key:"research",label:"Research",color:r.activity.research,demoStatus:"9 sources",ic:'<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>'},{key:"search",label:"Search",color:r.activity.search,demoStatus:"847 found",ic:'<circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/>'},{key:"agents",label:"Agents",color:r.activity.agents,demoStatus:"3 running",ic:'<circle cx="9" cy="8" r="3.5"/><path d="M2 21a7 7 0 0 1 14 0M16 4a3.5 3.5 0 0 1 0 8M22 21a7 7 0 0 0-5-6.7"/>'}],$=[["voice"],["voice","research"],["voice","research","image"],["voice","image","agents"],["research","search","agents"],["video","agents"],["voice","video","image","agents"]] 28let F=!1 29function N(n,e){const r=String(n).replace("#","") 30if(6!==r.length)return n 31const a=parseInt(r,16) 32return`rgba(${a>>16&255}, ${a>>8&255}, ${255&a}, ${e})`}function z({active:t,demo:i=!1}){!function(){if(F||"undefined"==typeof document)return 33F=!0 34const n=document.createElement("style") 35n.setAttribute("data-loqui-activity",""),n.textContent=`\n .lqai-band{position:fixed;top:50%;right:26px;transform:translateY(-50%);z-index:9050;\n display:none;flex-direction:column;align-items:flex-end;gap:30px;padding:14px 0}\n .lqai-band::before{content:'';position:absolute;top:30px;bottom:30px;right:15px;width:1px;\n background:linear-gradient(180deg,transparent,rgba(178,221,63,.16) 8%,rgba(178,221,63,.16) 92%,transparent);\n pointer-events:none}\n .lqai-cell{position:relative;background:transparent;border:none;padding:0;cursor:default;\n display:flex;flex-direction:row;align-items:center;gap:14px}\n .lqai-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:96px;\n text-align:right;opacity:.5;transition:opacity .4s ease}\n .lqai-cell[data-active] .lqai-meta{opacity:1}\n .lqai-lbl{font-family:${r.font.label};text-transform:uppercase;letter-spacing:.22em;\n font-size:9px;font-weight:700;color:${r.gray[400]};line-height:1;transition:color .4s ease}\n .lqai-cell[data-active] .lqai-lbl{color:var(--proc)}\n .lqai-status{font-family:${r.font.mono};font-size:10px;font-weight:500;color:${r.gray[500]};\n letter-spacing:.03em;line-height:1;min-height:12px;transition:color .4s ease}\n .lqai-cell[data-active] .lqai-status{color:var(--proc);font-weight:600}\n .lqai-orb{position:relative;opacity:.32;transition:opacity .45s ease;will-change:opacity}\n .lqai-cell[data-active] .lqai-orb{opacity:1;animation:lqai-pop .6s cubic-bezier(.16,1,.3,1)}\n @keyframes lqai-pop{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}\n\n .lqai-pill{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:9050;\n display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;\n background:${r.surfaces.dark.card};border:2px solid ${r.surfaces.dark.border};\n backdrop-filter:blur(8px);box-shadow:0 12px 32px -14px rgba(0,0,0,.5)}\n .lqai-proc{position:relative;height:34px;background:transparent;border:none;border-radius:999px;\n display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;cursor:default;\n transition:background-color .35s ease,box-shadow .35s ease}\n .lqai-proc .ic{width:13px;height:13px;stroke:${r.gray[500]};fill:none;stroke-width:1.9;flex:0 0 13px;transition:stroke .35s ease}\n .lqai-proc .bars{display:flex;align-items:center;gap:1.5px;height:14px;width:16px;justify-content:center}
35\n .lqai-proc .bars span{display:inline-block;width:1.6px;height:3px;background:${r.gray[500]};border-radius:1px;opacity:.4;\n transition:background-color .35s ease,opacity .35s ease}\n .lqai-proc[data-active]{box-shadow:inset 0 0 0 1px var(--proc),0 0 14px var(--proc-glow)}\n .lqai-proc[data-active] .ic{stroke:var(--proc)}\n .lqai-proc[data-active] .bars span{background:var(--proc);opacity:.95;animation:lqai-bar 1s ease-in-out infinite alternate}\n .lqai-proc[data-active] .bars span:nth-child(2){animation-delay:.12s}\n .lqai-proc[data-active] .bars span:nth-child(3){animation-delay:.24s}\n .lqai-proc[data-active] .bars span:nth-child(4){animation-delay:.36s}\n .lqai-proc[data-active] .bars span:nth-child(5){animation-delay:.48s}\n @keyframes lqai-bar{from{height:3px}to{height:13px}}\n .lqai-proc::after{content:attr(data-label);position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);\n font-family:${r.font.label};text-transform:uppercase;letter-spacing:.18em;font-size:9px;font-weight:600;\n color:${r.gray[300]};background:${r.surfaces.dark.card};border:1px solid ${r.surfaces.dark.border};\n padding:4px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}\n .lqai-proc:hover::after{opacity:1}\n .lqai-proc:focus-visible{outline:2px solid rgba(178,221,63,.9);outline-offset:2px}\n\n @media (min-width:880px){ .lqai-band{display:flex} .lqai-pill{display:none} }\n @media (prefers-reduced-motion:reduce){\n .lqai-cell[data-active] .lqai-orb{animation:none}\n .lqai-proc[data-active] .bars span{animation:none;height:9px}\n }`,document.head.appendChild(n)}() 36const[o,s]=n.useState(()=>i?$[0]:[]) 37n.useEffect(()=>{if(!i)return 38let n=0 39const e=setInterval(()=>{n=(n+1)%$.length,s($[n])},3500) 40return()=>clearInterval(e)},[i]) 41const l=n.useMemo(()=>{const n=i?o:t 42return n?Array.isArray(n)?Object.fromEntries(n.map(n=>[n,null])):n:{}},[t,i,o]),c=n=>Object.prototype.hasOwnProperty.call(l,n),d=n=>l[n.key]||n.demoStatus 43return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"lqai-band",role:"toolbar","aria-label":"Loqui active processes",children:w.map(n=>{const r=c(n.key) 44return e.jsxs("div",{className:"lqai-cell","data-active":r?"":void 0,style:{"--proc":n.color},children:[e.jsxs("div",{className:"lqai-meta",children:[e.jsx("div",{className:"lqai-lbl",children:n.label}),e.jsx("div",{className:"lqai-status",children:r?d(n):"idle"})]}),e.jsx("div",{className:"lqai-orb",children:e.jsx(a,{size:30,color:n.color,glow:r,breathing:r,interactive:!1})})]},n.key)})}),e.jsx("div",{className:"lqai-pill",role:"toolbar","aria-label":"Loqui active processes",children:w.map(n=>{const r=c(n.key) 45return e.jsxs("button",{type:"button",className:"lqai-proc","data-label":n.label,"data-active":r?"":void 0,"aria-pressed":r,style:{"--proc":n.color,"--proc-glow":N(n.color,.5)},children:[e.jsx("svg",{className:"ic",viewBox:"0 0 24 24",dangerouslySetInnerHTML:{__html:n.ic}}),e.jsxs("span",{className:"bars",children:[e.jsx("span",{}),e.jsx("span",{}),e.jsx("span",{}),e.jsx("span",{}),e.jsx("span",{})]})]},n.key)})})]})}const B=r 46let q=!1 47function S({eyebrow:n="Tonight's Briefing · Ready · 2 min",title:r=e.jsxs(e.Fragment,{children:["I've got ",e.jsx("em",{children:"3 things"})," for you tonight."]}),tunedPct:a=85,sources:t="Calendar · Email · 4 custom sources",duration:i="2:14",onPlay:o,onTranscript:s}){return function(){if(q||"undefined"==typeof document)return 48q=!0 49const n=document.createElement("style") 50n.setAttribute("data-loqui-briefing",""),n.textContent=`\n .brc{position:relative;overflow:hidden;background:${B.surfaces.dark.card};\n border:1px solid ${B.surfaces.dark.border};border-radius:28px;padding:34px 40px;\n box-shadow:0 36px 90px -20px rgba(0,0,0,.7),0 8px 24px -12px rgba(0,0,0,.4),0 0 0 1px rgba(178,221,63,.1)}\n .brc::before{content:'';position:absolute;left:40px;right:40px;top:0;height:3px;border-radius:0 0 6px 6px;\n background:linear-gradient(90deg,transparent,${B.brand.lime} 30%,${B.brand.lime} 70%,transparent);z-index:2}\n .brc::after{content:'';position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;\n background:radial-gradient(circle,rgba(178,221,63,.16),transparent 65%);pointer-events:none;z-index:0}\n .brc > *{position:relative;z-index:1}\n .brc-eyebrow{font-family:${B.font.label};text-transform:uppercase;letter-spacing:.22em;font-size:10.5px;\n font-weight:700;color:${B.brand.limeDark};display:inline-flex;align-items:center;gap:10px}\n .brc-pulse{width:8px;height:8px;border-radius:50%;background:${B.brand.lime};\n box-shadow:0 0 12px rgba(178,221,63,.7)}\n .brc-title{font-family:${B.font.display};font-weight:800;letter-spacing:-.03em;\n font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.04;color:${B.surfaces.dark.text};margin:14px 0;max-width:640px}\n .brc-title em{font-style:normal;color:${B.brand.limeDark}}\n .brc-meta{font-size:13px;color:${B.surfaces.dark.text2};margin-bottom:26px;\n display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}\n .brc-ring{display:inline-block;width:14px;
50height:14px;border-radius:50%;flex:0 0 14px;vertical-align:middle;position:relative;\n background:conic-gradient(${B.brand.lime} 0% var(--pct),${B.surfaces.dark.rail} var(--pct) 100%)}\n .brc-ring::after{content:'';position:absolute;inset:3px;border-radius:50%;background:${B.surfaces.dark.card}}\n .brc-tune b{font-weight:700;color:${B.surfaces.dark.text}}\n .brc-bdot{color:${B.surfaces.dark.text3};opacity:.5}\n .brc-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}\n .brc-play{display:inline-flex;align-items:center;gap:13px;background:${B.brand.lime};color:${B.brand.limeInk};\n border:none;border-radius:18px;padding:18px 26px 18px 22px;font-family:${B.font.display};font-weight:700;\n font-size:17px;letter-spacing:-.01em;cursor:pointer;transition:transform .22s ${B.motion.ease},box-shadow .25s ${B.motion.ease};\n box-shadow:0 14px 36px rgba(178,221,63,.42),0 30px 64px -16px rgba(178,221,63,.26),inset 0 1px 0 rgba(255,255,255,.42)}\n .brc-play:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(178,221,63,.58),0 42px 80px -16px rgba(178,221,63,.32),inset 0 1px 0 rgba(255,255,255,.5)}\n .brc-play .pi{width:16px;height:16px;fill:currentColor;flex:0 0 16px}\n .brc-play .dur{font-family:${B.font.mono};font-size:13px;font-weight:600;opacity:.7;margin-left:6px;\n padding-left:14px;border-left:1px solid rgba(22,33,10,.25)}\n .brc-link{font-size:13px;color:${B.brand.blue};text-decoration:none;font-weight:600;cursor:pointer;background:none;border:none}\n .brc-link:hover{text-decoration:underline}\n .brc-play:focus-visible,.brc-link:focus-visible{outline:3px solid rgba(178,221,63,.9);outline-offset:3px;border-radius:8px}\n @media(max-width:780px){.brc{padding:26px}}\n `,document.head.appendChild(n)}(),e.jsxs("div",{className:"brc",children:[e.jsxs("div",{className:"brc-eyebrow",children:[e.jsx("span",{className:"brc-pulse"}),n]}),e.jsx("h2",{className:"brc-title",children:r}),e.jsxs("div",{className:"brc-meta",children:[e.jsxs("span",{className:"brc-tune",children:[e.jsx("span",{className:"brc-ring",style:{"--pct":`${a}%`}})," ",e.jsxs("b",{children:[a,"% tuned"]})," to you"]}),e.jsx("span",{className:"brc-bdot",children:"·"}),e.jsx("span",{children:t})]}),e.jsxs("div",{className:"brc-actions",children:[e.jsxs("button",{className:"brc-play",onClick:o,"aria-label":"Play the briefing",children:[e.jsx("svg",{className:"pi",viewBox:"0 0 24 24",children:e.jsx("path",{d:"M8 5l11 7-11 7z"})}),e.jsx("span",{children:"Listen to Briefing"}),e.jsx("span",{className:"dur",children:i})]}),e.jsx("button",{className:"brc-link",onClick:s,children:"Read transcript â"})]})]})}const C=r,I=[{id:"loqui",letter:"L",name:"Loqui Auris",accent:C.brand.lime},{id:"curator",letter:"C",name:"The Curator",accent:C.brand.blue},{id:"muse",letter:"O",name:"The Oracle",accent:C.brand.orange}] 51let D=!1 52function T({omnis:n=I,activeId:r="loqui",onSelect:o,onNew:s,onTalk:l}){return function(){if(D||"undefined"==typeof document)return 53D=!0 54const n=document.createElement("style") 55n.setAttribute("data-loqui-talkcard",""),n.textContent=`\n .tkc{background:${C.surfaces.dark.card};border:1px solid ${C.surfaces.dark.border};border-radius:20px;\n padding:22px 28px;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;\n box-shadow:0 16px 40px -18px rgba(0,0,0,.55)}\n .tkc-label{font-family:${C.font.label};text-transform:uppercase;letter-spacing:.22em;font-size:9.5px;\n color:${C.surfaces.dark.kicker};margin-bottom:14px}\n .tkc-omnis{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}\n .tkc-cell{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:74px;cursor:pointer;\n background:none;border:none;padding:0}\n .tkc-orb{position:relative;transition:transform .22s ${C.motion.ease}}\n .tkc-cell:not(.is-active):hover .tkc-orb{transform:translateY(-3px) scale(1.06)}\n .tkc-ltr{position:absolute;inset:0;display:grid;place-items:center;font-family:${C.font.display};\n font-weight:800;font-size:24px;color:rgba(255,255,255,.96);text-shadow:0 1px 5px rgba(0,0,0,.45);pointer-events:none}\n .tkc-cell.is-active .tkc-ring{content:'';position:absolute;inset:-5px;border-radius:50%;\n border:2px solid ${C.brand.lime};box-shadow:0 0 20px rgba(178,221,63,.5);pointer-events:none}\n .tkc-nm{font-family:${C.font.label};text-transform:uppercase;letter-spacing:.14em;font-size:9px;\n color:${C.surfaces.dark.text3};text-align:center;line-height:1.25;max-width:84px}\n .tkc-cell.is-active .tkc-nm{color:${C.brand.limeDark};font-weight:700}\n .tkc-new{width:62px;height:62px;border-radius:50%;border:2px dashed ${C.surfaces.dark.border};\n display:grid;place-items:center;transition:.22s ${C.motion.ease}}\n .tkc-cell:hover .tkc-new{border-color:${C.brand.lime};transform:translateY(-2px)}\n .tkc-new svg{width:20px;height:20px;stroke:${C.surfaces.dark.text3};transition:.22s}\n .tkc-cell:hover .tkc-new svg{stroke:${C.brand.lime}}\n .tkc-talk{display:inline-flex;align-items:center;gap:11px;background:${C.brand.lime};color:${C.brand.limeInk};\n border:none;border-radius:14px;padding:16px 24px;font-family:${C.font.display};font-weight:700;font-size:16px;\n letter-spacing:-.01em;cursor:pointer;transition:transform .22s ${C.motion.ease},box-shadow .25s ${C.motion.ease};\n box-shadow:0 12px 30px rgba(178,221,63,.36),0 24px 50px -16px rgba(178,221,63,.22),inset 0 1px 0 rgba(255,255,255,.42)}\n .tkc-talk:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(178,221,63,.52),0 32px 64px -16px rgba(178,221,63,.3),inset 0 1px 0 rgba(255,255,255,.5)}\n .tkc-talk .sub{font-family:${C.font.body};font-weight:500;font-size:12px;opacity:.65;margin-left:3px}\n .tkc-talk svg{width:18px;height:18px}\n .tkc-cell:focus-visible,.tkc-talk:focus-visible{outline:3px solid rgba(178,221,63,.9);outline-offset:3px;border-radius:14px}\n .tkc-cell:focus-visible{border-radius:16px}\n @media(max-width:780px){.tkc{grid-template-columns:1fr;text-align:center}.tkc-omnis{justify-content:center}\n .tkc-talk{justify-content:center;align-self:center}}\n `,document.head.appendChild(n)}(),e.jsxs("div",{className:"tkc",children:[e.jsxs("div",{className:"tkc-omni-wrap",children:[e.jsx("div",{className:"tkc-label",children:"Active OMNI"}),e.jsxs("div",{className:"tkc-omnis",children:[n.map(n=>e.jsxs("button",{type:"button",className:"tkc-cell"+(n.id===r?" is-active":""),onClick:()=>null==o?void 0:o(n.id),"aria-pressed":n.id===r,"aria-label":n.name,children:[e.jsxs("div",{className:"tkc-orb",children:[e.jsx(a,{size:62,color:n.accent,interactive:!1}),e.jsx("span",{className:"tkc-ltr",children:n.letter}),n.id===r&&e.jsx("span",{className:"tkc-ring"})]}),e.jsx("div",{className:"tkc-nm",children:n.name})]},n.id)),e.jsxs("button",{type:"button",className:"tkc-cell",onClick:s,"aria-label":"New OMNI",children:[e.jsx("div",{className:"tkc-new",children:e.jsx(t,{})}),e.jsx("div",{className:"tkc-nm",children:"New OMNI"})]})]})]}),e.jsxs("button",{type:"button",className:"tkc-talk",onClick:l,children:[e.jsx(i,{})," Talk to Loqui",e.jsx("span",{className:"sub",children:"Voice"})]})]})}const M=r,L=[{key:"messages",value:0,label:"Messages",desc:"Inbox"},{key:"connections",value:15,label:"Connections",desc:"In your orbit"},{key:"today",value:0,label:"Today",desc:"Events"},{key:"orbit",value:0,label:"Orbit",desc:"Unread feed"}] 56let A=!1 57function E({stats:n=L}){return function(){if(A||"undefined"==typeof document)return 58A=!0 59const n=document.createElement("style") 60n.setAttribute("data-loqui-statpills",""),n.textContent=`\n .spl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\n .spl{background:${M.surfaces.dark.card};border:1px solid ${M.surfaces.dark.border};border-radius:14px;\n padding:16px 18px 14px;text-align:left;cursor:pointer;\n transition:transform .22s ${M.motion.ease},border-color .22s,box-shadow .22s;\n box-shadow:0 12px 28px -14px rgba(0,0,0,.55)}\n .spl:hover{transform:translateY(-3px);border-color:${M.surfaces.dark.borderHi};\n box-shadow:0 22px 44px -16px rgba(178,221,63,.18)}\n .spl-k{font-family:${M.font.label};text-transform:uppercase;letter-spacing:.18em;font-size:9px;color:${M.surfaces.dark.kicker}}\n .spl-v{font-family:${M.font.mono};font-weight:600;font-size:32px;letter-spacing:-.02em;margin-top:6px;\n color:${M.surfaces.dark.text};line-height:1;font-variant-numeric:tabular-nums}\n .spl-d{font-size:11px;color:${M.surfaces.dark.text3};margin-top:5px}\n .spl:focus-visible{outline:3px solid rgba(178,221,63,.9);outline-offset:2px}\n @media(max-width:780px){.spl-row{grid-template-columns:repeat(2,1fr)}}\n `,document.head.appendChild(n)}(),e.jsx("div",{className:"spl-row",children:n.map(n=>{const r=n.onClick?"button":"div" 61return e.jsxs(r,{className:"spl",type:n.onClick?"button":void 0,onClick:n.onClick,children:[e.jsx("div",{className:"spl-k",children:n.label}),e.jsx("div",{className:"spl-v",children:"number"==typeof n.value?n.value.toLocaleStr
61ing():n.value}),e.jsx("div",{className:"spl-d",children:n.desc})]},n.key)})})}const O=r 62function R({label:n,children:r}){return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsx("span",{style:{fontFamily:O.font.label,fontSize:11,letterSpacing:"0.18em",textTransform:"uppercase",color:O.surfaces.dark.kicker},children:n}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:14,alignItems:"center"},children:r})]})}function W({eyebrow:n,title:r,children:a}){return e.jsxs("section",{style:{display:"flex",flexDirection:"column",gap:24,paddingBlock:40,borderTop:`1px solid ${O.surfaces.dark.border}`},children:[e.jsxs("div",{children:[e.jsx("p",{style:{margin:0,fontFamily:O.font.label,fontSize:11,letterSpacing:"0.2em",textTransform:"uppercase",color:O.brand.lime},children:n}),e.jsx("h2",{style:{margin:"8px 0 0",fontFamily:O.font.display,fontSize:30,letterSpacing:"-0.02em",color:O.surfaces.dark.text},children:r})]}),a]})}function V(){const[c,b]=n.useState(!0),[y,w]=n.useState(""),[$,F]=n.useState("loqui"),N=[{key:"image",color:r.activity.image,label:"Image",detail:"4 of 6",rate:.9},{key:"research",color:r.activity.research,label:"Research",detail:"9 sources",rate:.4},{key:"video",color:r.activity.video,label:"Video",detail:"1:34 left",rate:.6},{key:"agents",color:r.activity.agents,label:"Agents",detail:"3 running",rate:1.1}],[B,q]=n.useState({image:12,research:44,video:6,agents:68}),[C,I]=n.useState(4) 63n.useEffect(()=>{const n=setInterval(()=>{q(n=>{const e={...n} 64return N.forEach(r=>{e[r.key]=(n[r.key]+2*r.rate)%100}),e})},110) 65return()=>clearInterval(n)},[]) 66const D=N.slice(0,C).map(n=>({...n,progress:B[n.key]})),M={minHeight:"100vh",background:O.surfaces.dark.canvas,color:O.surfaces.dark.text,fontFamily:O.font.body,padding:"48px clamp(20px, 5vw, 64px) 96px"},L={fontFamily:O.font.mono,fontSize:12},A=[["Lime â brand",O.brand.lime],["Lime dark",O.brand.limeDark],["Blue",O.brand.blue],["Orange",O.brand.orange],["Canvas",O.surfaces.dark.canvas],["Card",O.surfaces.dark.card]],V=Object.entries(O.activity) 67return e.jsxs("div",{style:M,children:[e.jsx(o,{size:76,state:"speaking"}),e.jsx(z,{demo:!0}),e.jsxs("header",{style:{maxWidth:980,margin:"0 auto 8px"},children:[e.jsx("p",{style:{margin:0,fontFamily:O.font.label,fontSize:11,letterSpacing:"0.24em",textTransform:"uppercase",color:O.brand.lime},children:"Loqui Auris · Design System"}),e.jsxs("h1",{style:{margin:"10px 0 0",fontFamily:O.font.display,fontSize:"clamp(34px, 6vw, 56px)",letterSpacing:"-0.03em",lineHeight:1.05},children:["One identity. ",e.jsx("span",{style:{color:O.brand.lime},children:"Lime."})," Dark-first."]}),e.jsx("p",{style:{margin:"16px 0 0",maxWidth:620,color:O.surfaces.dark.text2,fontSize:17,lineHeight:1.5},children:"The canonical primitives, on the ground they're meant for. Lime is a precise accent â never a flood. This is the target we adopt across the app."})]}),e.jsxs("div",{style:{maxWidth:980,margin:"0 auto"},children:[e.jsxs(W,{eyebrow:"Foundation",title:"Color",children:[e.jsx(R,{label:"Brand & surface",children:A.map(([n,r])=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6,width:132},children:[e.jsx("div",{style:{height:56,borderRadius:10,background:r,border:`1px solid ${O.surfaces.dark.border}`}}),e.jsx("span",{style:{fontSize:12,color:O.surfaces.dark.text2},children:n}),e.jsx("span",{style:{...L,color:O.surfaces.dark.text3},children:r})]},n))}),e.jsx(R,{label:"Activity â one hue per parallel process",children:V.map(([n,r])=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{width:12,height:12,borderRadius:"50%",background:r,display:"inline-block"}}),e.jsx("span",{style:{fontSize:13,color:O.surfaces.dark.text2,textTransform:"capitalize"},children:n})]},n))})]}),e.jsxs(W,{eyebrow:"Signature",title:"The sphere is Loqui's body",children:[e.jsxs(R,{label:"Same DNA at every scale â 30 · 40 · 62 · 104 · 160px",children:[e.jsx(a,{size:30}),e.jsx(a,{size:40}),e.jsx(a,{size:62}),e.jsx(a,{size:104}),e.jsx(a,{size:160})]}),e.jsx(R,{label:"Color = state (one hue per meaning)",children:["idle","listening","thinking","speaking","muted"].map(n=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:8},children:[e.jsx(a,{size:64,state:n}),e.jsx("span",{style:{fontSize:12,color:O.surfaces.dark.text3,textTransform:"capitalize"},children:n})]},n))}),e.jsxs(R,{label:"Breathing = active (respects reduced-motion)",children:[e.jsx(a,{size:120,state:"speaking",breathing:!0}),e.jsx("span",{style:{fontSize:13,color:O.surfaces.dark.text2,maxWidth:320},children:"One pop per screen. The orb is the bold moment; everything around it stays quiet."})]}),e.jsx(R,{label:"Presence â sits ON the surface (hover to stir). Its cast shadow reads on a lighter ground",children:e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:40,width:"100%",padding:"56px 32px",borderRadius:20,background:"linear-gradient(160deg, #eef1e6, #dfe3d4)"},children:[e.jsx(a,{size:72,state:"idle"}
67),e.jsx(a,{size:128,state:"speaking",breathing:!0}),e.jsx(a,{size:72,state:"thinking"})]})})]}),e.jsx(W,{eyebrow:"Signature · Live work",title:"Rings show what Loqui is working on",children:e.jsxs(R,{label:"Each ring is a real background process â colour = process, arc = progress. Drag the count 1â6",children:[e.jsx("div",{style:{display:"flex",gap:8,marginBottom:8},children:[1,2,3,4].map(n=>e.jsx("button",{onClick:()=>I(n),style:{width:34,height:30,borderRadius:8,cursor:"pointer",fontFamily:O.font.mono,fontSize:13,border:`1px solid ${C===n?O.brand.lime:O.surfaces.dark.border}`,background:C===n?O.brand.lime:"transparent",color:C===n?O.brand.limeInk:O.surfaces.dark.text2},children:n},n))}),e.jsx("div",{style:{display:"grid",placeItems:"center",width:"100%",padding:"96px 0 120px"},children:e.jsxs("div",{style:{position:"relative"},children:[e.jsx(a,{size:104,state:"thinking",breathing:!0}),e.jsx(s,{size:104,tasks:D,captionSide:"below"})]})})]})}),e.jsx(W,{eyebrow:"Companion · Focal point",title:"The Evening Briefing card",children:e.jsx(R,{label:"The hero of the Companion tier â one bold moment, everything else quiet",children:e.jsx("div",{style:{width:"100%",maxWidth:720},children:e.jsx(S,{})})})}),e.jsx(W,{eyebrow:"Companion · Talk & stats",title:"Pick an OMNI, then talk",children:e.jsx(R,{label:"OMNI selector + Talk-to-Loqui, then four quiet stat pills â same orb DNA at 62px",children:e.jsxs("div",{style:{width:"100%",maxWidth:720,display:"flex",flexDirection:"column",gap:14},children:[e.jsx(T,{activeId:$,onSelect:F}),e.jsx(E,{})]})})}),e.jsx(W,{eyebrow:"Foundation",title:"Type",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:14},children:[e.jsx("span",{style:{fontFamily:O.font.display,fontSize:40,letterSpacing:"-0.02em"},children:"Syne â display"}),e.jsx("span",{style:{fontFamily:O.font.body,fontSize:20},children:"Inter â body copy, the workhorse for reading."}),e.jsx("span",{style:{fontFamily:O.font.label,fontSize:14,letterSpacing:"0.18em",textTransform:"uppercase",color:O.surfaces.dark.text2},children:"Orbitron â labels"}),e.jsx("span",{style:{fontFamily:O.font.mono,fontSize:15,color:O.surfaces.dark.text2},children:"IBM Plex Mono â data · 0.0295 · $B2DD3F"})]})}),e.jsxs(W,{eyebrow:"Primitives",title:"Button",children:[e.jsxs(R,{label:"Variants (md)",children:[e.jsx(d,{variant:"primary",children:"Primary"}),e.jsx(d,{variant:"secondary",children:"Secondary"}),e.jsx(d,{variant:"ghost",children:"Ghost"}),e.jsx(d,{variant:"danger",children:"Danger"}),e.jsx(d,{variant:"success",children:"Success"})]}),e.jsxs(R,{label:"Sizes",children:[e.jsx(d,{size:"sm",children:"Small"}),e.jsx(d,{size:"md",children:"Medium"}),e.jsx(d,{size:"lg",children:"Large"})]}),e.jsxs(R,{label:"With icon · loading · disabled",children:[e.jsx(d,{leftIcon:e.jsx(i,{}),children:"Talk"}),e.jsx(d,{rightIcon:e.jsx(l,{}),children:"Continue"}),e.jsx(d,{loading:!0,children:"Working"}),e.jsx(d,{disabled:!0,children:"Disabled"}),e.jsx(p,{"aria-label":"Add",children:e.jsx(t,{})})]})]}),e.jsx(W,{eyebrow:"Primitives",title:"Card, inputs & status",children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:20},children:[e.jsxs(x,{children:[e.jsx(g,{children:"Evening briefing"}),e.jsx(h,{children:e.jsx("p",{style:{margin:0,color:O.surfaces.dark.text2},children:"Two calls, a dentist reminder, and three people you've gone quiet with."})}),e.jsxs(m,{children:[e.jsx(d,{size:"sm",variant:"secondary",children:"Later"}),e.jsx(d,{size:"sm",children:"Open"})]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16},children:[e.jsx(u,{label:"Your name",placeholder:"Ada Lovelace",value:y,onChange:n=>w(n.target.value)}),e.jsx(f,{label:"What should Loqui remember?",placeholder:"I prefer morningsâ¦",rows:3}),e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"center",flexWrap:"wrap"},children:[e.jsx(k,{children:"New"}),e.jsx(k,{variant:"success",children:"Live"}),e.jsx(j,{status:"online"})," ",e.jsx("span",{style:{fontSize:13,color:O.surfaces.dark.text2},children:"online"}),e.jsx(_,{checked:c,onChange:()=>b(n=>!n)}),e.jsx(v,{size:"sm"})]})]})]})}),e.jsx("p",{style:{marginTop:48,...L,color:O.surfaces.dark.text3},children:"// If any primitive above renders unstyled, design-tokens.css isn't loaded. It should be (main.jsx)."})]})]})}export{V as default}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.