@salilvnair/dui 1.0.6 → 1.0.7

package/dist/assets/{DuiShowcase-DdIO2HHe.js → DuiShowcase-CSkP-vdJ.js}

@@ -1,4 +1,4 @@
-var wE=Object.defineProperty;var EE=(t,n,r)=>n in t?wE(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r;var Et=(t,n,r)=>EE(t,typeof n!="symbol"?n+"":n,r);import{r as d,W as rc,j as e,a as CE,g as AE,R as kE}from"./index-BcOB3b2I.js";import{e as Mh,j as jh,J as X_,M as Y_,a as Q_,S as Z_,t as ey,m as ty}from"./monaco-editor-CN2OOCze.js";function bf(t,n){(n==null||n>t.length)&&(n=t.length);for(var r=0,o=Array(n);r<n;r++)o[r]=t[r];return o}function RE(t){if(Array.isArray(t))return t}function IE(t,n,r){return(n=OE(n))in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r,t}function DE(t,n){var r=t==null?null:typeof Symbol<"u"&&t[Symbol.iterator]||t["@@iterator"];if(r!=null){var o,i,a,s,l=[],u=!0,p=!1;try{if(a=(r=r.call(t)).next,n!==0)for(;!(u=(o=a.call(r)).done)&&(l.push(o.value),l.length!==n);u=!0);}catch(h){p=!0,i=h}finally{try{if(!u&&r.return!=null&&(s=r.return(),Object(s)!==s))return}finally{if(p)throw i}}return l}}function NE(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+var wE=Object.defineProperty;var EE=(t,n,r)=>n in t?wE(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r;var Et=(t,n,r)=>EE(t,typeof n!="symbol"?n+"":n,r);import{r as d,W as rc,j as e,a as CE,g as AE,R as kE}from"./index-DQdlwLhi.js";import{e as Mh,j as jh,J as X_,M as Y_,a as Q_,S as Z_,t as ey,m as ty}from"./monaco-editor-CN2OOCze.js";function bf(t,n){(n==null||n>t.length)&&(n=t.length);for(var r=0,o=Array(n);r<n;r++)o[r]=t[r];return o}function RE(t){if(Array.isArray(t))return t}function IE(t,n,r){return(n=OE(n))in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r,t}function DE(t,n){var r=t==null?null:typeof Symbol<"u"&&t[Symbol.iterator]||t["@@iterator"];if(r!=null){var o,i,a,s,l=[],u=!0,p=!1;try{if(a=(r=r.call(t)).next,n!==0)for(;!(u=(o=a.call(r)).done)&&(l.push(o.value),l.length!==n);u=!0);}catch(h){p=!0,i=h}finally{try{if(!u&&r.return!=null&&(s=r.return(),Object(s)!==s))return}finally{if(p)throw i}}return l}}function NE(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
 In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function xf(t,n){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);n&&(o=o.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,o)}return r}function Sf(t){for(var n=1;n<arguments.length;n++){var r=arguments[n]!=null?arguments[n]:{};n%2?xf(Object(r),!0).forEach(function(o){IE(t,o,r[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):xf(Object(r)).forEach(function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(r,o))})}return t}function LE(t,n){if(t==null)return{};var r,o,i=PE(t,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(o=0;o<a.length;o++)r=a[o],n.indexOf(r)===-1&&{}.propertyIsEnumerable.call(t,r)&&(i[r]=t[r])}return i}function PE(t,n){if(t==null)return{};var r={};for(var o in t)if({}.hasOwnProperty.call(t,o)){if(n.indexOf(o)!==-1)continue;r[o]=t[o]}return r}function ME(t,n){return RE(t)||DE(t,n)||zE(t,n)||NE()}function jE(t,n){if(typeof t!="object"||!t)return t;var r=t[Symbol.toPrimitive];if(r!==void 0){var o=r.call(t,n);if(typeof o!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(n==="string"?String:Number)(t)}function OE(t){var n=jE(t,"string");return typeof n=="symbol"?n:n+""}function zE(t,n){if(t){if(typeof t=="string")return bf(t,n);var r={}.toString.call(t).slice(8,-1);return r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set"?Array.from(t):r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?bf(t,n):void 0}}function FE(t,n,r){return n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r,t}function Tf(t,n){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);n&&(o=o.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,o)}return r}function wf(t){for(var n=1;n<arguments.length;n++){var r=arguments[n]!=null?arguments[n]:{};n%2?Tf(Object(r),!0).forEach(function(o){FE(t,o,r[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):Tf(Object(r)).forEach(function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(r,o))})}return t}function WE(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return function(o){return n.reduceRight(function(i,a){return a(i)},o)}}function Jc(t){return function n(){for(var r=this,o=arguments.length,i=new Array(o),a=0;a<o;a++)i[a]=arguments[a];return i.length>=t.length?t.apply(this,i):function(){for(var s=arguments.length,l=new Array(s),u=0;u<s;u++)l[u]=arguments[u];return n.apply(r,[].concat(i,l))}}}function wu(t){return{}.toString.call(t).includes("Object")}function VE(t){return!Object.keys(t).length}function od(t){return typeof t=="function"}function BE(t,n){return Object.prototype.hasOwnProperty.call(t,n)}function GE(t,n){return wu(n)||Pa("changeType"),Object.keys(n).some(function(r){return!BE(t,r)})&&Pa("changeField"),n}function UE(t){od(t)||Pa("selectorType")}function HE(t){od(t)||wu(t)||Pa("handlerType"),wu(t)&&Object.values(t).some(function(n){return!od(n)})&&Pa("handlersType")}function qE(t){t||Pa("initialIsRequired"),wu(t)||Pa("initialType"),VE(t)&&Pa("initialContent")}function KE(t,n){throw new Error(t[n]||t.default)}var $E={initialIsRequired:"initial state is required",initialType:"initial state should be an object",initialContent:"initial state shouldn't be an empty object",handlerType:"handler should be an object or a function",handlersType:"all handlers should be a functions",selectorType:"selector should be a function",changeType:"provided value of changes should be an object",changeField:'it seams you want to change a field in the state which is not specified in the "initial" state',default:"an unknown error accured in `state-local` package"},Pa=Jc(KE)($E),Bd={changes:GE,selector:UE,handler:HE,initial:qE};function JE(t){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};Bd.initial(t),Bd.handler(n);var r={current:t},o=Jc(QE)(r,n),i=Jc(YE)(r),a=Jc(Bd.changes)(t),s=Jc(XE)(r);function l(){var p=arguments.length>0&&arguments[0]!==void 0?arguments[0]:function(h){return h};return Bd.selector(p),p(r.current)}function u(p){WE(o,i,a,s)(p)}return[l,u]}function XE(t,n){return od(n)?n(t.current):n}function YE(t,n){return t.current=wf(wf({},t.current),n),n}function QE(t,n,r){return od(n)?n(t.current):Object.keys(r).forEach(function(o){var i;return(i=n[o])===null||i===void 0?void 0:i.call(n,t.current[o])}),r}var ZE={create:JE},eC={paths:{vs:"https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs"}};function tC(t){return function n(){for(var r=this,o=arguments.length,i=new Array(o),a=0;a<o;a++)i[a]=arguments[a];return i.length>=t.length?t.apply(this,i):function(){for(var s=arguments.length,l=new Array(s),u=0;u<s;u++)l[u]=arguments[u];return n.apply(r,[].concat(i,l))}}}function nC(t){return{}.toString.call(t).includes("Object")}function rC(t){return t||Ef("configIsRequired"),nC(t)||Ef("configType"),t.urls?(oC(),{paths:{vs:t.urls.monacoBase}}):t}function oC(){console.warn(ny.deprecation)}function iC(t,n){throw new Error(t[n]||t.default)}var ny={configIsRequired:"the configuration object is required",configType:"the configuration object should be an object",default:"an unknown error accured in `@monaco-editor/loader` package",deprecation:`Deprecation warning!
     You are using deprecated way of configuration.
 
@@ -67749,7 +67749,7 @@ interface WebGLRenderingContextOverloads {
     uniformMatrix4fv(location: WebGLUniformLocation | null, transpose: GLboolean, value: Iterable<GLfloat>): void;
 }
 \`;function wm(b){return typeof b=="string"?/^file:\\/\\/\\//.test(b)?!!Vi[b.substr(8)]:!1:b.path.indexOf("/lib.")===0?!!Vi[b.path.slice(1)]:!1}class ER{constructor(y,x){this._extraLibs=Object.create(null),this._languageService=sTe(this),this._ctx=y,this._compilerOptions=x.compilerOptions,this._extraLibs=x.extraLibs,this._inlayHintsOptions=x.inlayHintsOptions}getCompilationSettings(){return this._compilerOptions}getLanguageService(){return this._languageService}getExtraLibs(){return this._extraLibs}getScriptFileNames(){return this._ctx.getMirrorModels().map(W=>W.uri).filter(W=>!wm(W)).map(W=>W.toString()).concat(Object.keys(this._extraLibs))}_getModel(y){let x=this._ctx.getMirrorModels();for(let W=0;W<x.length;W++){const $=x[W].uri;if($.toString()===y||$.toString(!0)===y)return x[W]}return null}getScriptVersion(y){let x=this._getModel(y);return x?x.version.toString():this.isDefaultLibFileName(y)?"1":y in this._extraLibs?String(this._extraLibs[y].version):""}async getScriptText(y){return this._getScriptText(y)}_getScriptText(y){let x,W=this._getModel(y);const $="lib."+y+".d.ts";if(W)x=W.getValue();else if(y in Vi)x=Vi[y];else if($ in Vi)x=Vi[$];else if(y in this._extraLibs)x=this._extraLibs[y].content;else return;return x}getScriptSnapshot(y){const x=this._getScriptText(y);if(x!==void 0)return{getText:(W,$)=>x.substring(W,$),getLength:()=>x.length,getChangeRange:()=>{}}}getScriptKind(y){switch(y.substr(y.lastIndexOf(".")+1)){case"ts":return dN.TS;case"tsx":return dN.TSX;case"js":return dN.JS;case"jsx":return dN.JSX;default:return this.getCompilationSettings().allowJs?dN.JS:dN.TS}}getCurrentDirectory(){return""}getDefaultLibFileName(y){switch(y.target){case 99:const x="lib.esnext.full.d.ts";if(x in Vi||x in this._extraLibs)return x;case 7:case 6:case 5:case 4:case 3:case 2:default:const W=\`lib.es\${2013+(y.target||99)}.full.d.ts\`;return W in Vi||W in this._extraLibs?W:"lib.es6.d.ts";case 1:case 0:return"lib.d.ts"}}isDefaultLibFileName(y){return y===this.getDefaultLibFileName(this._compilerOptions)}readFile(y){return this._getScriptText(y)}fileExists(y){return this._getScriptText(y)!==void 0}async getLibFiles(){return Vi}static clearFiles(y){const x=[];for(const W of y){const $={...W};if($.file=$.file?{fileName:$.file.fileName}:void 0,W.relatedInformation){$.relatedInformation=[];for(const _e of W.relatedInformation){const Le={..._e};Le.file=Le.file?{fileName:Le.file.fileName}:void 0,$.relatedInformation.push(Le)}}x.push($)}return x}async getSyntacticDiagnostics(y){if(wm(y))return[];const x=this._languageService.getSyntacticDiagnostics(y);return ER.clearFiles(x)}async getSemanticDiagnostics(y){if(wm(y))return[];const x=this._languageService.getSemanticDiagnostics(y);return ER.clearFiles(x)}async getSuggestionDiagnostics(y){if(wm(y))return[];const x=this._languageService.getSuggestionDiagnostics(y);return ER.clearFiles(x)}async getCompilerOptionsDiagnostics(y){if(wm(y))return[];const x=this._languageService.getCompilerOptionsDiagnostics();return ER.clearFiles(x)}async getCompletionsAtPosition(y,x){if(!wm(y))return this._languageService.getCompletionsAtPosition(y,x,void 0)}async getCompletionEntryDetails(y,x,W){return this._languageService.getCompletionEntryDetails(y,x,W,void 0,void 0,void 0,void 0)}async getSignatureHelpItems(y,x,W){if(!wm(y))return this._languageService.getSignatureHelpItems(y,x,W)}async getQuickInfoAtPosition(y,x){if(!wm(y))return this._languageService.getQuickInfoAtPosition(y,x)}async getDocumentHighlights(y,x,W){if(!wm(y))return this._languageService.getDocumentHighlights(y,x,W)}async getDefinitionAtPosition(y,x){if(!wm(y))return this._languageService.getDefinitionAtPosition(y,x)}async getReferencesAtPosition(y,x){if(!wm(y))return this._languageService.getReferencesAtPosition(y,x)}async getNavigationTree(y){if(!wm(y))return this._languageService.getNavigationTree(y)}async getFormattingEditsForDocument(y,x){return wm(y)?[]:this._languageService.getFormattingEditsForDocument(y,x)}async getFormattingEditsForRange(y,x,W,$){return wm(y)?[]:this._languageService.getFormattingEditsForRange(y,x,W,$)}async getFormattingEditsAfterKeystroke(y,x,W,$){return wm(y)?[]:this._languageService.getFormattingEditsAfterKeystroke(y,x,W,$)}async findRenameLocations(y,x,W,$,_e){if(!wm(y))return this._languageService.findRenameLocations(y,x,W,$,_e)}async getRenameInfo(y,x,W){return wm(y)?{canRename:!1,localizedErrorMessage:"Cannot rename in lib file"}:this._languageService.getRenameInfo(y,x,W)}async getEmitOutput(y,x,W){if(wm(y))return{outputFiles:[],emitSkipped:!0};const $=this._languageService.getEmitOutput(y,x,W),_e=$.diagnostics?ER.clearFiles($.diagnostics):void 0;return{...$,diagnostics:_e}}async getCodeFixesAtPosition(y,x,W,$,_e){if(wm(y))return[];const Le={};try{return this._languageService.getCodeFixesAtPosition(y,x,W,$,_e,Le)}catch{return[]}}async updateExtraLibs(y){this._extraLibs=y}async provideInlayHints(y,x,W){if(wm(y))return[];const $=this._inlayHintsOptions??{},_e={start:x,length:W-x};try{return this._languageService.provideInlayHints(y,_e,$)}catch{return[]}}}function wBe(b,y){let x=ER;if(y.customWorkerPath)if(typeof importScripts>"u")console.warn("Monaco is not using webworkers for background tasks, and that is needed to support the customWorkerPath flag");else{self.importScripts(y.customWorkerPath);const W=self.customTSWorkerFactory;if(!W)throw new Error(\`The script at \${y.customWorkerPath} does not add customTSWorkerFactory to self\`);x=W(ER,kBe,Vi)}return new x(b,y)}globalThis.ts=lTe,self.onmessage=()=>{xBe((b,y)=>wBe(b,y))}})();
-`,jf=typeof self<"u"&&self.Blob&&new Blob([lw],{type:"text/javascript;charset=utf-8"});function mA(t){let n;try{if(n=jf&&(self.URL||self.webkitURL).createObjectURL(jf),!n)throw"";const r=new Worker(n,{name:t==null?void 0:t.name});return r.addEventListener("error",()=>{(self.URL||self.webkitURL).revokeObjectURL(n)}),r}catch{return new Worker("data:text/javascript;charset=utf-8,"+encodeURIComponent(lw),{name:t==null?void 0:t.name})}finally{n&&(self.URL||self.webkitURL).revokeObjectURL(n)}}window.MonacoEnvironment={getWorker(t,n){return n==="json"?new pA:n==="html"||n==="handlebars"||n==="razor"?new hA:n==="typescript"||n==="javascript"?new mA:new uA}};Mh.defineTheme("daakia-dark",{base:"vs-dark",inherit:!0,rules:[{token:"string.key.json",foreground:"9CDCFE"},{token:"string.value.json",foreground:"CE9178"},{token:"number",foreground:"B5CEA8"},{token:"keyword.json",foreground:"569CD6"},{token:"string",foreground:"CE9178"},{token:"keyword",foreground:"569CD6"},{token:"comment",foreground:"6A9955"},{token:"type",foreground:"4EC9B0"},{token:"identifier",foreground:"9CDCFE"},{token:"variable",foreground:"9CDCFE"},{token:"constant",foreground:"4FC1FF"},{token:"keyword.js",foreground:"C586C0"},{token:"keyword.ts",foreground:"C586C0"},{token:"string.js",foreground:"CE9178"},{token:"string.ts",foreground:"CE9178"},{token:"number.js",foreground:"B5CEA8"},{token:"number.ts",foreground:"B5CEA8"},{token:"regexp",foreground:"D16969"},{token:"delimiter",foreground:"D4D4D4"},{token:"delimiter.bracket",foreground:"FFD700"},{token:"tag",foreground:"569CD6"},{token:"attribute.name",foreground:"9CDCFE"},{token:"attribute.value",foreground:"CE9178"},{token:"keyword.graphql",foreground:"C586C0"},{token:"keyword.control.graphql",foreground:"C586C0"},{token:"type.identifier.graphql",foreground:"E5C07B"},{token:"variable.graphql",foreground:"9CDCFE"},{token:"string.graphql",foreground:"CE9178"},{token:"comment.graphql",foreground:"6A9955"},{token:"annotation.graphql",foreground:"DCDCAA"},{token:"operator.graphql",foreground:"D4D4D4"},{token:"identifier.graphql",foreground:"D4D4D4"}],colors:{"editor.background":"#1e1e1e","editor.foreground":"#D4D4D4","editor.lineHighlightBackground":"#2a2a2a","editor.selectionBackground":"#264f78","editor.inactiveSelectionBackground":"#3a3d41","editorLineNumber.foreground":"#858585","editorLineNumber.activeForeground":"#C6C6C6","editorCursor.foreground":"#AEAFAD","editor.selectionHighlightBackground":"#ADD6FF26","editorIndentGuide.background":"#404040","editorIndentGuide.activeBackground":"#707070","editorBracketMatch.background":"#0064001a","editorBracketMatch.border":"#888888","editorGutter.background":"#1e1e1e","editorWidget.background":"#252526","editorSuggestWidget.background":"#252526","editorSuggestWidget.border":"#454545","editorSuggestWidget.selectedBackground":"#04395e","list.hoverBackground":"#2a2d2e","input.background":"#3c3c3c",focusBorder:"#6366f1"}});jh.setCompilerOptions({target:Z_.ESNext,module:Q_.ESNext,allowNonTsExtensions:!0,allowJs:!0,checkJs:!0,strict:!1,noEmit:!0,esModuleInterop:!0,moduleResolution:Y_.NodeJs,jsx:X_.React});jh.setDiagnosticsOptions({noSemanticValidation:!1,noSyntaxValidation:!1});jh.setEagerModelSync(!0);ey.setEagerModelSync(!0);ey.setCompilerOptions({target:Z_.ESNext,module:Q_.ESNext,allowNonTsExtensions:!0,allowJs:!0,strict:!1,noEmit:!0,esModuleInterop:!0,moduleResolution:Y_.NodeJs,jsx:X_.React});Mh.defineTheme("daakia-light",{base:"vs",inherit:!0,rules:[{token:"string.key.json",foreground:"0451a5"},{token:"string.value.json",foreground:"a31515"},{token:"number",foreground:"09885a"},{token:"keyword.json",foreground:"0000ff"},{token:"string",foreground:"a31515"},{token:"keyword",foreground:"0000ff"},{token:"comment",foreground:"008000"},{token:"type",foreground:"267f99"},{token:"identifier",foreground:"001080"},{token:"variable",foreground:"001080"},{token:"constant",foreground:"0070c1"},{token:"keyword.js",foreground:"af00db"},{token:"keyword.ts",foreground:"af00db"},{token:"string.js",foreground:"a31515"},{token:"string.ts",foreground:"a31515"},{token:"number.js",foreground:"09885a"},{token:"number.ts",foreground:"09885a"},{token:"regexp",foreground:"c41a16"},{token:"delimiter",foreground:"000000"},{token:"delimiter.bracket",foreground:"000000"},{token:"tag",foreground:"800000"},{token:"attribute.name",foreground:"ff0000"},{token:"attribute.value",foreground:"0451a5"},{token:"keyword.graphql",foreground:"af00db"},{token:"type.identifier.graphql",foreground:"267f99"},{token:"variable.graphql",foreground:"001080"},{token:"string.graphql",foreground:"a31515"},{token:"comment.graphql",foreground:"008000"},{token:"operator.graphql",foreground:"000000"},{token:"identifier.graphql",foreground:"000000"}],colors:{"editor.background":"#ffffff","editor.foreground":"#000000","editor.lineHighlightBackground":"#f5f5f5","editor.selectionBackground":"#add6ff","editor.inactiveSelectionBackground":"#e5ebf1","editorLineNumber.foreground":"#237893","editorLineNumber.activeForeground":"#0b216f","editorCursor.foreground":"#000000","editor.selectionHighlightBackground":"#add6ff4d","editorIndentGuide.background1":"#d3d3d3","editorIndentGuide.activeBackground1":"#939393","editorGutter.background":"#ffffff","editorWidget.background":"#f3f3f3","editorSuggestWidget.background":"#f3f3f3","editorSuggestWidget.border":"#c8c8c8","editorSuggestWidget.selectedBackground":"#0060c0","list.hoverBackground":"#f0f0f0","input.background":"#ffffff","input.border":"#d1d5db",focusBorder:"#6366f1"}});Oh.config({monaco:ty});window.monaco=ty;FC(cA);WC(dA);GC();function Of(t){Mh.setTheme(t==="dark"?"daakia-dark":"daakia-light")}function an(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{height:`${or.input[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:Fa[o],gap:Qi[o],width:Zi(n.width??r.width),color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function _n(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{height:`${or.button[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:Fa[o],gap:Qi[o],width:Zi(n.width??r.width),color:n.color??r.color,defaultColor:n.defaultColor??r.defaultColor,activeColor:n.activeColor??r.activeColor,fontStyle:n.fontStyle??r.fontStyle}}function Cd(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"8px":o==="md"?"10px":o==="lg"?"12px":"16px";return{itemHeight:`${or.nav[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),gap:Qi[o],paddingX:a,color:n.color??r.color,activeColor:n.activeColor??r.activeColor,fontStyle:n.fontStyle??r.fontStyle}}function ea(t,n={}){const r=mt(),o=t??r.size;return{height:`${Wh[o]}px`,fontSize:o==="sm"?"9px":o==="md"?"10px":o==="lg"?"11px":"12px",paddingX:o==="sm"?"5px":o==="md"?"7px":o==="lg"?"9px":"11px",borderRadius:gn(n.borderRadius??r.borderRadius,Gh.full),color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function mp(t,n={}){const r=mt(),o=t??r.size;return{..._y[o],fontSize:Vt[o],activeColor:n.activeColor??r.activeColor,color:n.color??r.color}}function cw(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"8px":o==="md"?"10px":o==="lg"?"12px":"14px",s=o==="sm"?"5px":o==="md"?"6px":o==="lg"?"7px":"8px";return{itemHeight:`${or.menu[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:a,gap:s,color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function Ad(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"10px":o==="md"?"12px":o==="lg"?"14px":"18px";return{height:`${or.tab[o]}px`,fontSize:Vt[o],gap:Qi[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:a,width:Zi(n.width??r.width),color:n.color??r.color,activeColor:n.activeColor??r.activeColor,fontStyle:n.fontStyle??r.fontStyle}}function ao(t,n={}){const r=mt(),o=t??r.size,i=o==="sm"?"8px":o==="md"?"10px":o==="lg"?"12px":"14px";return{rowHeight:`${or.table[o]}px`,headerFontSize:o==="sm"||o==="md"?"9px":"10px",cellFontSize:Vt[o],paddingX:i,color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function Bt(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"4px":o==="md"?"6px":o==="lg"?"8px":"10px";return{fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),gap:a,color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function ri(t,n={}){const r=mt(),o=t??r.size,i={xxs:"4px",xs:"5px",sm:"6px",md:"8px",lg:"10px",xl:"12px",xxl:"14px",xxxl:"16px"};return{fontSize:Vt[o],borderRadius:gn(n.borderRadius??r.borderRadius,i[o]),headerFontSize:o==="sm"?"12px":o==="md"?"13px":o==="lg"?"14px":"15px",paddingX:o==="sm"?"12px":o==="md"?"16px":o==="lg"?"20px":"24px",paddingY:o==="sm"?"10px":o==="md"?"12px":o==="lg"?"16px":"20px",color:n.color??r.color}}function Qt(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"4px 8px":o==="md"?"6px 10px":o==="lg"?"8px 12px":"10px 16px",s=o==="sm"?"6px":o==="md"?"8px":o==="lg"?"10px":"12px";return{fontSize:Vt[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),padding:a,gap:s,color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function so(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{height:`${or.input[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:Fa[o],gap:Qi[o],width:Zi(n.width??r.width),color:n.color??r.color,itemPy:yy[o]}}function fp(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{cellSize:hy[o],ringDiameter:Vh[o],fontSize:Vt[o],gap:Qi[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:Fa[o],width:Zi(n.width??r.width),color:n.color??r.color}}function lo(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{thickness:my[o],ringDiameter:Vh[o],badgeSize:Wh[o],fontSize:Vt[o],gap:Qi[o],paddingX:Fa[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),width:Zi(n.width??r.width),color:n.color??r.color}}function Al(t,n={}){const r=mt(),o=t??r.size;return{diameter:fy[o],dotSize:gy[o],fontSize:Vt[o],color:n.color??r.color,activeColor:n.activeColor??r.activeColor}}function On(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"12px":o==="md"?"16px":o==="lg"?"24px":"32px";return{fontSize:Vt[o],gap:Qi[o],padding:a,borderRadius:gn(n.borderRadius??r.borderRadius,i),width:Zi(n.width??r.width),color:n.color??r.color}}function kl(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{fontSize:Vt[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),aspectRatio:n.aspectRatio??16/9,color:n.color??r.color}}const fA={height:"16px",px:"5px",fontSize:"9px"};function ce({label:t,icon:n,color:r,bg:o,size:i,rounded:a=!0,onClick:s,active:l=!1,className:u="",style:p}){const h=i==="xs",f=ea(h?"sm":i),{height:g,px:y,fontSize:b}=h?fA:{height:f.height,px:f.paddingX,fontSize:f.fontSize},v=r||"var(--color-primary)",x=a?"9999px":"4px",E=l?v:o||`color-mix(in srgb, ${v} 12%, transparent)`,w=l?"var(--color-chip-active-text)":v,C=`color-mix(in srgb, ${v} 30%, transparent)`;return e.jsxs("span",{className:`inline-flex items-center font-semibold tracking-wide select-none ${s?"cursor-pointer":""} ${u}`,style:{height:g,paddingLeft:y,paddingRight:y,gap:n?"5px":0,fontSize:b,borderRadius:x,background:E,color:w,border:`1px solid ${C}`,lineHeight:1,whiteSpace:"nowrap",transition:"all 120ms ease",...p},onClick:s,children:[n&&e.jsx("span",{style:{display:"inline-flex",flexShrink:0},children:n}),t]})}function gA({command:t,size:n,color:r,copiedLabel:o="copied ✓",copyable:i=!0,className:a="",style:s}){const l=_n(n),[u,p]=d.useState(!1),h=d.useRef(void 0),f=()=>{if(i)try{navigator.clipboard.writeText(t),p(!0),clearTimeout(h.current),h.current=setTimeout(()=>p(!1),1500)}catch{}},g=r||l.color||"var(--color-text-primary)";return e.jsx("button",{type:"button",onClick:f,title:i?"Copy command":void 0,className:`dui_command_chip inline-flex items-center select-none ${i?"cursor-pointer":"cursor-default"} ${a}`,style:{height:l.height,paddingLeft:l.paddingX,paddingRight:l.paddingX,fontSize:l.fontSize,borderRadius:l.borderRadius,fontFamily:"var(--dui-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)",border:"1px solid var(--color-elevated-border, var(--color-btn-secondary-border, #374151))",background:"var(--color-elevated, var(--color-btn-secondary-bg, #111827))",color:u?"var(--color-success, #059669)":g,whiteSpace:"nowrap",...s},children:u?o:t})}function B({variant:t="secondary",size:n="default",rounded:r=!0,iconLeft:o,iconRight:i,loading:a=!1,accentColor:s,label:l,children:u,disabled:p,style:h,className:f="",width:g,borderRadius:y,color:b,defaultColor:v,activeColor:x,fontStyle:E,...w}){const C=_n(n==="default"?void 0:n,{width:g,borderRadius:y,color:b,defaultColor:v,activeColor:x,fontStyle:E}),A=s||C.defaultColor||"var(--color-btn-primary-bg)",D=r?C.borderRadius:"0px",k=p||a,N=(()=>{switch(t){case"primary":return{color:C.color||"var(--color-btn-primary-text, #fff)",border:"1px solid transparent"};case"danger":return{color:C.color||"var(--color-btn-danger-text, #fff)",border:"1px solid transparent"};case"ghost":return{color:C.color||s||"var(--color-text-secondary)",border:"1px solid transparent"};case"accent":return{color:C.color||s||"var(--color-text-primary)",border:`1px solid ${s?`color-mix(in srgb, ${s} 25%, transparent)`:"var(--color-btn-secondary-border)"}`};default:return{color:C.color||"var(--color-text-primary)",border:"1px solid var(--color-btn-secondary-border)"}}})(),j=t==="primary"?{"--dui-btn-bg":A,"--dui-btn-hover-bg":s||C.defaultColor?`color-mix(in srgb, ${A} 80%, black)`:"var(--color-btn-primary-hover)"}:t==="ghost"&&s?{"--dui-ghost-hover-bg":`color-mix(in srgb, ${s} 12%, transparent)`}:t==="accent"?{"--dui-accent-bg":s?`color-mix(in srgb, ${s} 12%, transparent)`:"var(--color-btn-ghost-hover)","--dui-accent-hover-bg":s?`color-mix(in srgb, ${s} 20%, transparent)`:"var(--color-btn-secondary-hover)"}:{};return e.jsxs("button",{type:"button",disabled:k,className:`dui_button dui_button--${t} inline-flex items-center justify-center font-medium cursor-pointer select-none ${f}`,style:{height:C.height,width:C.width!=="auto"?C.width:void 0,paddingLeft:C.paddingX,paddingRight:C.paddingX,fontSize:C.fontSize,gap:C.gap,borderRadius:D,fontStyle:C.fontStyle,opacity:k?.5:1,...j,...N,...h},...w,children:[a?e.jsx(cc,{size:C.iconSize}):o,l??u,!a&&i]})}function _A({options:t,value:n,onChange:r,size:o="sm",accentColor:i,className:a,style:s}){const l=or.tab[o],u=Vt[o],p=Fa[o];return e.jsx("div",{className:a,style:{display:"inline-flex",height:l,borderRadius:6,border:"1px solid var(--color-btn-secondary-border, rgba(255,255,255,0.12))",overflow:"hidden",background:"var(--color-btn-secondary-bg, rgba(255,255,255,0.04))",flexShrink:0,...s},children:t.map(h=>{const f=h.id===n;return e.jsxs("button",{type:"button",onClick:()=>r(h.id),style:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:4,height:"100%",padding:`0 ${p}`,fontSize:u,fontWeight:600,lineHeight:1,whiteSpace:"nowrap",background:f?i??"var(--color-primary, #7c3aed)":"transparent",color:f?"#fff":"var(--color-text-muted)",border:"none",cursor:"pointer",transition:"background 120ms, color 120ms",fontFamily:"inherit"},children:[h.icon,h.label]},h.id)})})}const zf={default:"26px",xs:"20px",sm:"22px",md:"28px",lg:"32px",xl:"36px"};function fe({icon:t,size:n="default",rounded:r=!0,tooltip:o,variant:i="ghost",accentColor:a,activeColor:s,active:l=!1,disabled:u,style:p,className:h="",borderRadius:f,color:g,...y}){const b=mt(),v=zf[n]??zf.default,x=a||b.defaultColor||"var(--color-primary)",E=s||b.activeColor||x,w=r?gn(f??b.borderRadius,"4px"):"0px",C=g||b.color,A=i==="filled"?l?E:`color-mix(in srgb, ${x} 12%, transparent)`:l?`color-mix(in srgb, ${E} 14%, transparent)`:"transparent",k={width:v,height:v,minWidth:v,borderRadius:w,border:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:u?"default":"pointer",opacity:u?.45:1,"--dui-icon-bg":A,"--dui-icon-color":i==="filled"?l?"var(--color-btn-primary-text, white)":C||x:l?E:C||(a?x:"var(--color-text-muted)"),"--dui-hover-bg":l?`color-mix(in srgb, ${E} 20%, transparent)`:"var(--color-iconbtn-bg-hover, var(--color-surface-hover))","--dui-hover-color":l?E:"var(--color-text-primary)",...p};return e.jsx("button",{type:"button",title:o,disabled:u,className:`dui_icon-button transition-all ${h}`,style:k,...y,children:t})}function At({label:t,icon:n,variant:r="secondary",size:o="default",rounded:i=!0,items:a,accentColor:s,disabled:l=!1,onPrimaryClick:u,className:p="",align:h="auto"}){const[f,g]=d.useState(!1),y=d.useRef(null),b=s||"var(--color-primary)",v=_n(o==="default"?void 0:o),x=v.height,E=v.fontSize,w=v.paddingX,C=i?v.borderRadius:"0px",A=r==="primary",D=r==="danger",k=A?"var(--color-btn-primary-text, #fff)":D?"var(--color-btn-danger-text, #fff)":"var(--color-text-primary)",N=A?b:D?"var(--color-error)":r==="ghost"?"transparent":"var(--color-surface-hover)",j=A||D||r==="ghost"?"1px solid transparent":"1px solid var(--color-surface-border)",F=A||D?"rgba(0,0,0,0.12)":"var(--color-surface-active)";return e.jsxs(e.Fragment,{children:[e.jsxs("div",{ref:y,className:`inline-flex items-center ${p}`,style:{height:x,borderRadius:C,overflow:"hidden",opacity:l?.5:1,background:N,border:j,color:k,padding:0,transition:"background 120ms","--dui-hover-btn-bg":F},children:[e.jsxs("button",{type:"button",disabled:l,onClick:u,className:"dui_dropdown-button__label",style:{height:"100%",paddingLeft:w,paddingRight:"8px",display:"flex",alignItems:"center",gap:v.gap,fontSize:E,fontWeight:500,border:"none",color:"inherit",cursor:l?"default":"pointer",fontFamily:"inherit"},children:[n&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0},children:n}),t]}),e.jsx("div",{style:{width:"1px",height:"60%",background:A||D?"rgba(255,255,255,.25)":"var(--color-surface-border)"}}),e.jsx("button",{type:"button",disabled:l,onClick:()=>!l&&g(O=>!O),className:"dui_dropdown-button__chevron",style:{height:"100%",paddingLeft:"6px",paddingRight:"7px",display:"flex",alignItems:"center",border:"none",color:"inherit",cursor:l?"default":"pointer"},children:e.jsx(nn,{size:10,style:{transition:"transform 140ms",transform:f?"rotate(180deg)":"rotate(0deg)"}})})]}),e.jsx(nr,{items:a,anchorEl:y.current,open:f,onClose:()=>g(!1),rounded:i,matchAnchorWidth:!1,width:"md",align:h})]})}const Me=d.forwardRef(function({size:n="default",rounded:r=!0,accentColor:o,error:i=!1,iconLeft:a,iconRight:s,prefixIcon:l,suffixIcon:u,masked:p=!1,maskIcon:h,naked:f=!1,style:g,className:y="",onFocus:b,onBlur:v,type:x,width:E,borderRadius:w,color:C,fontStyle:A,...D},k){const[N,j]=d.useState(!1),[F,O]=d.useState(!1),V=an(n==="default"?void 0:n,{width:E,borderRadius:w,color:C,fontStyle:A}),Y=o||"var(--color-primary)",ee=r?V.borderRadius:"0px",le=l??a,ne=p?null:u??s,se=i?"var(--color-error)":N?Y:"var(--color-input-border)",q=f?{display:"inline-flex",alignItems:"center",height:V.height,width:V.width!=="auto"?V.width:void 0,border:"none",borderBottom:i?"1px solid color-mix(in srgb, var(--color-error) 60%, transparent)":"none",background:"transparent",boxShadow:"none",overflow:"hidden",...g}:{display:"inline-flex",alignItems:"center",height:V.height,width:V.width!=="auto"?V.width:void 0,borderRadius:ee,border:`1px solid ${se}`,background:"var(--color-input-bg)",transition:"border-color 140ms, box-shadow 140ms",boxShadow:N?`0 0 0 2px color-mix(in srgb, ${Y} 20%, transparent)`:"none",overflow:"hidden",...g},$=p?F?"text":"password":x??"text",te=F?(h==null?void 0:h.shown)??e.jsx(wl,{size:14}):(h==null?void 0:h.hidden)??e.jsx(El,{size:14});return e.jsxs("div",{style:q,className:y,children:[le&&e.jsx("span",{style:{paddingLeft:V.paddingX,display:"flex",alignItems:"center",color:f&&i?"var(--color-error)":"var(--color-text-muted)",flexShrink:0,transition:"color 140ms"},children:le}),e.jsx("input",{ref:k,type:$,style:{flex:1,height:"100%",paddingLeft:le?"6px":V.paddingX,paddingRight:p||ne?"6px":V.paddingX,fontSize:V.fontSize,background:"transparent",border:"none",outline:"none",color:f&&i?"var(--color-error)":V.color||"var(--color-text-primary)",fontStyle:V.fontStyle,minWidth:0,fontFamily:"inherit",caretColor:f&&i?"var(--color-error)":void 0},onFocus:ae=>{j(!0),b==null||b(ae)},onBlur:ae=>{j(!1),v==null||v(ae)},...D}),ne&&e.jsx("span",{style:{paddingRight:V.paddingX,display:"flex",alignItems:"center",color:"var(--color-text-muted)",flexShrink:0},children:ne}),p&&e.jsx("button",{type:"button",onClick:()=>O(ae=>!ae),style:{paddingRight:V.paddingX,display:"flex",alignItems:"center",background:"none",border:"none",cursor:"pointer",color:"var(--color-text-muted)",flexShrink:0},onMouseEnter:ae=>ae.currentTarget.style.color="var(--color-text-primary)",onMouseLeave:ae=>ae.currentTarget.style.color="",title:F?"Hide value":"Show value",children:te})]})}),yA=d.forwardRef(function({size:n="default",rounded:r=!0,accentColor:o,error:i=!1,rows:a=4,resize:s="none",style:l,className:u="",onFocus:p,onBlur:h,width:f,borderRadius:g,...y},b){const[v,x]=d.useState(!1),E=an(n==="default"?void 0:n,{width:f,borderRadius:g}),w=o||"var(--color-primary)",C=r?E.borderRadius:"0px",A=i?"var(--color-error)":v?w:"var(--color-input-border)";return e.jsx("textarea",{ref:b,rows:a,style:{width:E.width!=="auto"?E.width:"100%",padding:`${parseInt(E.paddingX)>0?"8px":"6px"} ${E.paddingX}`,fontSize:E.fontSize,fontFamily:"inherit",borderRadius:C,border:`1px solid ${A}`,background:"var(--color-input-bg)",color:"var(--color-text-primary)",outline:"none",resize:s,transition:"border-color 140ms, box-shadow 140ms",boxShadow:v?`0 0 0 2px color-mix(in srgb, ${w} 20%, transparent)`:"none",lineHeight:1.5,...l},className:u,onFocus:D=>{x(!0),p==null||p(D)},onBlur:D=>{x(!1),h==null||h(D)},...y})});function vA({value:t,placeholder:n="",onSave:r,multiline:o=!0,disabled:i=!1,className:a="",accentColor:s,tooltip:l="Double-click to edit",style:u}){const[p,h]=d.useState(!1),[f,g]=d.useState(t),[y,b]=d.useState(!1),v=d.useRef(null),x=s||"var(--color-primary)";d.useEffect(()=>{p||g(t)},[t,p]);const E=()=>{const A=v.current;A&&(A.style.height="auto",A.style.height=`${A.scrollHeight}px`)};d.useEffect(()=>{if(!p)return;E();const A=v.current;A==null||A.focus(),A==null||A.setSelectionRange(A.value.length,A.value.length)},[p]);const w=async()=>{const A=f.trim();if(h(!1),A!==t.trim()){b(!0);try{await r(A)}finally{b(!1)}}},C=()=>{g(t),h(!1)};return p?e.jsx("textarea",{ref:v,value:f,placeholder:n,rows:1,className:a,onChange:A=>{g(A.target.value),E()},onBlur:()=>void w(),onKeyDown:A=>{A.key==="Enter"&&!(o&&A.shiftKey)&&(A.preventDefault(),w()),A.key==="Escape"&&(A.preventDefault(),C())},style:{display:"block",width:"100%",boxSizing:"border-box",font:"inherit",fontSize:"inherit",lineHeight:"inherit",color:"inherit",textAlign:"inherit",background:"var(--color-input-bg)",border:`1px solid ${x}`,borderRadius:6,padding:"2px 6px",margin:"-3px -7px",outline:"none",resize:"none",overflow:"hidden",boxShadow:`0 0 0 2px color-mix(in srgb, ${x} 20%, transparent)`,...u}}):e.jsx("span",{className:a,title:i?void 0:l,style:{opacity:y?.55:void 0,cursor:i?void 0:"text",...u},onDoubleClick:i?void 0:()=>h(!0),children:t||n})}function bA(t){return t==="default"?"md":t}function Ff({label:t,color:n}){return e.jsx("span",{style:{fontSize:"8px",fontWeight:700,padding:"1px 4px",borderRadius:"3px",lineHeight:1,flexShrink:0,letterSpacing:"0.03em",backgroundColor:`color-mix(in srgb, ${n} 15%, transparent)`,color:n},children:t})}function St({options:t,value:n,onChange:r,size:o="default",rounded:i=!0,placeholder:a,accentColor:s,disabled:l=!1,className:u="",style:p,width:h,borderRadius:f}){const[g,y]=d.useState(!1),[b,v]=d.useState(!1),x=d.useRef(null),E=d.useRef(null),w=bA(o),C=so(w,{borderRadius:f}),A=s||"var(--color-primary)",D=i?C.borderRadius:"0px",k=t.find(V=>V.value===n&&!V.isHeader);d.useEffect(()=>{if(!g||!x.current||!E.current)return;const V=x.current,Y=E.current,ee=()=>{const ne=V.getBoundingClientRect(),se=8;Y.style.minWidth=ne.width+"px";const q=Y.scrollHeight||200;window.innerHeight-ne.bottom<q+12&&ne.top>q+12?Y.style.top=ne.top-q-4+"px":Y.style.top=ne.bottom+4+"px";const te=Math.max(Y.offsetWidth,ne.width);let ae=ne.left;ae+te>window.innerWidth-se&&(ae=ne.right-te),ae=Math.min(ae,window.innerWidth-te-se),ae=Math.max(se,ae),Y.style.left=ae+"px"};ee();const le=requestAnimationFrame(ee);return window.addEventListener("scroll",ee,{passive:!0,capture:!0}),window.addEventListener("resize",ee,{passive:!0}),()=>{cancelAnimationFrame(le),window.removeEventListener("scroll",ee,{capture:!0}),window.removeEventListener("resize",ee)}},[g]),d.useEffect(()=>{if(!g)return;const V=Y=>{var ee,le;(ee=x.current)!=null&&ee.contains(Y.target)||(le=E.current)!=null&&le.contains(Y.target)||y(!1)};return document.addEventListener("mousedown",V),()=>document.removeEventListener("mousedown",V)},[g]);const N=d.useCallback(V=>{r(V),y(!1)},[r]),j=V=>{if(l)return;if(!g){(V.key==="Enter"||V.key===" "||V.key==="ArrowDown")&&(V.preventDefault(),y(!0));return}const Y=t.filter(le=>!le.isHeader).findIndex(le=>le.value===n),ee=t.filter(le=>!le.isHeader);switch(V.key){case"ArrowDown":V.preventDefault(),N(ee[(Y+1)%ee.length].value);break;case"ArrowUp":V.preventDefault(),N(ee[(Y-1+ee.length)%ee.length].value);break;case"Escape":y(!1);break}},F=g||b?A:"var(--color-input-border)",O=g||b?`0 0 0 2px color-mix(in srgb, ${A} 20%, transparent)`:"none";return e.jsxs("div",{className:`relative inline-block ${u}`,style:{width:h,...p},onKeyDown:j,children:[e.jsxs("button",{ref:x,type:"button",disabled:l,onFocus:()=>v(!0),onBlur:()=>v(!1),onClick:()=>!l&&y(V=>!V),style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:C.gap,width:"100%",height:C.height,paddingLeft:C.paddingX,paddingRight:C.paddingX,fontSize:C.fontSize,background:"var(--color-input-bg)",border:`1px solid ${F}`,borderRadius:D,color:k?"var(--color-text-primary)":"var(--color-text-muted)",cursor:l?"default":"pointer",transition:"border-color 140ms, box-shadow 140ms",boxShadow:O,opacity:l?.5:1,fontFamily:"inherit",fontWeight:500,textAlign:"left"},"aria-haspopup":"listbox","aria-expanded":g,children:[(k==null?void 0:k.badge)&&!(k!=null&&k.icon)&&e.jsx(Ff,{label:k.badge.label,color:k.badge.color}),(k==null?void 0:k.icon)&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0},children:k.icon}),e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:k==null?void 0:k.color},children:(k==null?void 0:k.label)??a??n}),e.jsx(Td,{size:C.iconSize-2,style:{flexShrink:0,transition:"transform 140ms",transform:g?"rotate(180deg)":"rotate(0deg)",color:g?A:"var(--color-text-muted)"}})]}),g&&it.createPortal(e.jsx("div",{ref:E,role:"listbox",className:"dui_select__menu",style:{position:"fixed",zIndex:99999,minWidth:"100%",width:"max-content",maxHeight:"min(380px, 70vh)",overflowY:"auto",background:"var(--color-surface-bg, var(--color-elevated))",border:"1px solid var(--color-surface-border)",borderRadius:i?"7px":"0px",padding:"4px",boxShadow:"0 12px 40px rgba(0,0,0,.35)","--dui-select-accent":A},children:t.map((V,Y)=>V.isHeader?e.jsxs("div",{children:[Y>0&&e.jsx("div",{style:{height:"1px",background:"var(--color-surface-border)",margin:"3px 4px"}}),e.jsx("div",{style:{padding:`5px ${C.paddingX} 3px`,fontSize:"9px",fontWeight:700,textTransform:"uppercase",letterSpacing:"0.06em",color:"var(--color-text-muted)",userSelect:"none"},children:V.label})]},`${V.value}-${Y}`):e.jsxs("div",{role:"option","aria-selected":V.value===n,onClick:()=>N(V.value),className:`dui_select__option${V.value===n?" dui_select__option--selected":""}`,style:{display:"flex",alignItems:"center",gap:C.gap,padding:`${C.itemPy} ${C.paddingX}`,marginBottom:"2px",borderRadius:i?"5px":"0px",fontSize:C.fontSize,fontWeight:500,color:V.value===n?s||"var(--color-primary-light)":V.color||"var(--color-text-secondary)",cursor:"pointer"},children:[V.badge&&!V.icon&&e.jsx(Ff,{label:V.badge.label,color:V.badge.color}),V.icon&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0},children:V.icon}),e.jsx("span",{children:V.label})]},V.value))}),document.body)]})}const xA=/(\{\{[\w.\-]+\}\}|\$\{[\w.\-]+\})/g,SA=/(\$daakia_\{[\w.\-]+\}_\$)/g;function Ki(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(SA,'<span class="dui-var-token--escape">$1</span>').replace(xA,'<span class="dui-var-token">$1</span>')}function Au(t){const n=window.getSelection();if(!n||n.rangeCount===0)return 0;const r=n.getRangeAt(0),o=r.cloneRange();return o.selectNodeContents(t),o.setEnd(r.endContainer,r.endOffset),o.toString().length}const TA=400,wA=200;function dw(){let t=[],n=-1,r=0;return{reset(o,i){t=[{text:o,caret:i}],n=0,r=0},push(o,i){if(n>=0&&t[n].text===o){t[n]={text:o,caret:i};return}n<t.length-1&&(t=t.slice(0,n+1));const a=Date.now(),s=n>=0&&Math.abs(o.length-t[n].text.length)===1;n>0&&s&&a-r<TA?t[n]={text:o,caret:i}:(t.push({text:o,caret:i}),n=t.length-1,t.length>wA&&(t.shift(),n--)),r=a},undo(){return n<=0?null:(n-=1,r=0,t[n])},redo(){return n>=t.length-1?null:(n+=1,r=0,t[n])}}}function ku(t){return(t.metaKey||t.ctrlKey)&&!t.shiftKey&&t.key.toLowerCase()==="z"}function uw(t){const n=t.key.toLowerCase();return(t.metaKey||t.ctrlKey)&&t.shiftKey&&n==="z"||t.ctrlKey&&!t.metaKey&&n==="y"}function ic(t,n){const r=window.getSelection();if(!r)return;const o=document.createRange();let i=n;const a=s=>{var l;if(s.nodeType===Node.TEXT_NODE){const u=((l=s.textContent)==null?void 0:l.length)??0;return i<=u?(o.setStart(s,i),o.collapse(!0),!0):(i-=u,!1)}for(const u of Array.from(s.childNodes))if(a(u))return!0;return!1};a(t)||(o.selectNodeContents(t),o.collapse(!1)),r.removeAllRanges(),r.addRange(o)}const EA={xxs:44,xs:52,sm:64,md:80,lg:96,xl:112,xxl:128,xxxl:148};function Gn({selectValue:t,selectOptions:n,onSelectChange:r,inputValue:o,onInputChange:i,placeholder:a="Enter URL or paste text",size:s,disabled:l=!1,accentColor:u,selectWidth:p,suggestions:h=[],mockServers:f=[],onMockServerSelect:g,onKeyDown:y,suggestionMinWidth:b,suggestionZIndex:v=9998,width:x,borderRadius:E,color:w,fontStyle:C,className:A=""}){const D=mt(),k=s??D.size,N=an(s,{width:x,borderRadius:E,color:w,fontStyle:C}),j=p??EA[k],F=u??"var(--color-primary)",O=Math.max(Math.round(parseFloat(N.fontSize)*1.2*10)/10,16),V=Math.max(0,(parseFloat(N.height)-2-O)/2),[Y,ee]=d.useState(!1),[le,ne]=d.useState(!1),[se,q]=d.useState(!1),[$,te]=d.useState(-1),ae=d.useRef(null),me=d.useRef(null),he=d.useRef(null),Ce=d.useRef(!1),ue=d.useRef(!1),W=d.useRef(!1),K=d.useRef(null),Q=d.useRef(dw()),[X,pe]=d.useState({top:0,left:0,width:0}),[ye,De]=d.useState({top:0,left:0,width:0}),Oe=n.find(de=>de.value===t),nt=(Oe==null?void 0:Oe.color)??"var(--color-text-primary)";d.useEffect(()=>{const de=he.current;de&&(de.innerHTML=Ki(o),K.current=o,Q.current.reset(o,o.length))},[]),d.useEffect(()=>{const de=he.current;if(!de||K.current===o)return;K.current=o;const we=document.activeElement===de,Ke=we?Au(de):-1;de.innerHTML=Ki(o),we&&Ke>=0&&ic(de,Ke),Q.current.push(o,Ke>=0?Ke:o.length)},[o]);const Ye=d.useCallback((de,we)=>{const Ke=he.current;Ke&&(Ke.innerHTML=Ki(de),ic(Ke,Math.min(we,de.length)),K.current=de,i(de))},[i]),yt=d.useCallback(()=>{if(ue.current)return;const de=he.current;if(!de)return;const we=de.innerText.replace(/\n/g,""),Ke=Au(de);de.innerHTML=Ki(we),ic(de,Ke),K.current=we,Q.current.push(we,Ke),i(we)},[i]),Gt=de=>{const we=de.nativeEvent.inputType;if(we!=="historyUndo"&&we!=="historyRedo")return;if(de.preventDefault(),W.current){W.current=!1;return}const Ke=we==="historyUndo"?Q.current.undo():Q.current.redo();Ke&&Ye(Ke.text,Ke.caret)},rt=de=>{de.preventDefault();const we=de.clipboardData.getData("text/plain");document.execCommand("insertText",!1,we)},ft=d.useMemo(()=>{if(!h.length)return[];if(!o.trim())return[...new Set(h)].slice(0,8);const de=o.toLowerCase();return[...new Set(h.filter(we=>we.toLowerCase().includes(de)&&we!==o))].slice(0,8)},[o,h]),be=d.useMemo(()=>{if(!f.length)return[];if(!o.trim())return f.slice(0,8);const de=o.toLowerCase();return f.filter(we=>we.url.toLowerCase().includes(de)||we.name.toLowerCase().includes(de)).slice(0,8)},[o,f]),qe=()=>{if(l)return;const de=me.current;if(!de)return;const we=de.getBoundingClientRect();pe({top:we.bottom+4,left:we.left,width:Math.max(we.width,120)}),ee(Ke=>!Ke)};d.useEffect(()=>{if(!Y)return;const de=we=>{const Ke=we.target;!Ke.closest("[data-stiv-method]")&&!Ke.closest("[data-stiv-trigger]")&&ee(!1)};return document.addEventListener("mousedown",de),()=>document.removeEventListener("mousedown",de)},[Y]),d.useEffect(()=>{if(!Y)return;const de=()=>{const we=me.current;if(!we)return;const Ke=we.getBoundingClientRect();pe({top:Ke.bottom+4,left:Ke.left,width:Math.max(Ke.width,120)})};return window.addEventListener("scroll",de,{passive:!0,capture:!0}),window.addEventListener("resize",de,{passive:!0}),()=>{window.removeEventListener("scroll",de,{capture:!0}),window.removeEventListener("resize",de)}},[Y]),d.useEffect(()=>{if(!Ce.current)if((ft.length>0||be.length>0)&&le){const de=he.current;if(de){const we=de.getBoundingClientRect();De({top:we.bottom+4,left:we.left,width:Math.max(we.width,b??0)})}q(!0),te(-1)}else q(!1)},[ft,be,le]),d.useEffect(()=>{if(!se)return;const de=()=>{const we=he.current;if(!we)return;const Ke=we.getBoundingClientRect();De({top:Ke.bottom+4,left:Ke.left,width:Math.max(Ke.width,b??0)})};return window.addEventListener("scroll",de,{passive:!0,capture:!0}),window.addEventListener("resize",de,{passive:!0}),()=>{window.removeEventListener("scroll",de,{capture:!0}),window.removeEventListener("resize",de)}},[se]);const ut=de=>{Te(de),g==null||g(de)},Te=de=>{var we;Ce.current=!0,i(de),q(!1),te(-1),(we=he.current)==null||we.focus(),setTimeout(()=>{Ce.current=!1},150)},Ot=d.useMemo(()=>[...be.map(de=>de.url),...ft],[be,ft]),Zt=de=>{if(ku(de)||uw(de)){de.preventDefault(),W.current=!0;const we=ku(de)?Q.current.undo():Q.current.redo();we&&Ye(we.text,we.caret);return}if(de.key==="Enter"&&de.preventDefault(),se&&Ot.length>0){if(de.key==="ArrowDown"){de.preventDefault(),te(we=>Math.min(we+1,Ot.length-1));return}if(de.key==="ArrowUp"){de.preventDefault(),te(we=>Math.max(we-1,-1));return}if(de.key==="Enter"&&$>=0){de.preventDefault(),Te(Ot[$]);return}if(de.key==="Escape"){q(!1),te(-1);return}}y==null||y(de)},po=le||Y?F:"var(--color-input-border)";return e.jsxs(e.Fragment,{children:[e.jsxs("div",{ref:ae,className:A,style:{display:"flex",height:N.height,width:N.width,border:`1px solid ${po}`,borderRadius:N.borderRadius,background:"var(--color-input-bg)",opacity:l?.5:1,transition:"border-color 120ms",overflow:"visible",position:"relative"},children:[e.jsxs("div",{ref:me,"data-stiv-trigger":!0,onClick:qe,className:`dui_select-text__trigger${l?" dui_select-text__trigger--disabled":""}`,style:{display:"flex",alignItems:"center",gap:N.gap,padding:`0 ${N.paddingX}`,width:j,flexShrink:0,cursor:l?"not-allowed":"pointer",userSelect:"none",color:nt,fontWeight:700,fontSize:N.fontSize,letterSpacing:"0.02em",borderRadius:`calc(${N.borderRadius} - 1px) 0 0 calc(${N.borderRadius} - 1px)`},children:[e.jsx("span",{style:{flex:1,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:(Oe==null?void 0:Oe.label)??t}),e.jsx(Td,{size:N.iconSize-2,style:{flexShrink:0,color:"var(--color-text-muted)",transform:Y?"rotate(180deg)":"rotate(0deg)",transition:"transform 150ms ease"}})]}),e.jsx("div",{style:{width:1,alignSelf:"stretch",background:"var(--color-input-border)",flexShrink:0,margin:"4px 0"}}),e.jsxs("div",{style:{flex:1,minWidth:0,position:"relative",height:"100%"},children:[!o&&!le&&a&&e.jsx("span",{className:"dui_select-text__placeholder",style:{position:"absolute",left:N.paddingX,top:0,right:N.paddingX,lineHeight:N.height,pointerEvents:"none",fontSize:N.fontSize,color:"var(--color-text-muted)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:a}),e.jsx("div",{ref:he,contentEditable:!l,suppressContentEditableWarning:!0,spellCheck:!1,onInput:yt,onBeforeInput:Gt,onPaste:rt,onFocus:()=>ne(!0),onBlur:()=>setTimeout(()=>ne(!1),120),onKeyDown:Zt,onCompositionStart:()=>{ue.current=!0},onCompositionEnd:()=>{ue.current=!1,yt()},className:"dui_select-text__editor",style:{height:"100%",width:"100%",padding:`${V}px ${N.paddingX}`,boxSizing:"border-box",outline:"none",background:"transparent",fontSize:N.fontSize,lineHeight:`${O}px`,color:N.color??"var(--color-text-primary)",fontFamily:"inherit",fontStyle:N.fontStyle,whiteSpace:"nowrap",overflow:"hidden",cursor:l?"not-allowed":"text",caretColor:N.color??"var(--color-text-primary)"}})]})]}),Y&&it.createPortal(e.jsx("div",{"data-stiv-method":!0,style:{position:"fixed",top:X.top,left:X.left,minWidth:X.width,background:"var(--color-surface)",border:"1px solid var(--color-surface-border)",borderRadius:8,boxShadow:"0 8px 24px rgba(0,0,0,0.22)",zIndex:9999,padding:3,overflow:"hidden","--dui-stiv-accent":F},children:n.map(de=>{const we=de.value===t;return e.jsxs("div",{onMouseDown:Ke=>{Ke.preventDefault(),r(de.value),ee(!1)},className:`dui_select-text__option${we?" dui_select-text__option--selected":""}`,style:{display:"flex",alignItems:"center",gap:8,padding:`6px ${N.paddingX}`,marginBottom:"2px",borderRadius:5,cursor:"pointer",fontSize:N.fontSize,fontWeight:we?700:500,color:de.color??"var(--color-text-primary)"},children:[e.jsx("span",{style:{flex:1},children:de.label??de.value}),we&&e.jsx(Dt,{size:N.iconSize-2,style:{color:"var(--color-primary)",flexShrink:0}})]},de.value)})}),document.body),se&&(ft.length>0||be.length>0)&&it.createPortal(e.jsxs("div",{"data-stiv-suggestions":!0,style:{position:"fixed",top:ye.top,left:ye.left,width:ye.width,background:"var(--color-surface)",border:"1px solid var(--color-surface-border)",borderRadius:8,boxShadow:"0 8px 24px rgba(0,0,0,0.22)",zIndex:v,padding:3,overflow:"hidden","--dui-stiv-accent":F},children:[be.length>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{padding:"4px 10px 6px",borderBottom:"1px solid var(--color-surface-border)"},children:e.jsx("p",{style:{fontSize:"9.5px",fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--color-text-muted)"},children:"Mock Servers"})}),e.jsx("div",{style:{padding:"4px 3px 3px"},children:be.map((de,we)=>e.jsxs("div",{onMouseDown:Ke=>{Ke.preventDefault(),ut(de.url)},onMouseEnter:()=>te(we),onMouseLeave:()=>te(-1),className:`dui-stiv-sugg-item${we===$?" dui-stiv-sugg-item--active":""}`,style:{"--dui-stiv-accent":"var(--color-mock-server)"},children:[e.jsx(Lt,{size:14,style:{color:"var(--color-mock-server)",flexShrink:0}}),e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"monospace",color:"var(--color-mock-server)"},children:de.url}),e.jsx("span",{style:{fontSize:"10px",color:"var(--color-text-muted)",flexShrink:0},children:de.name})]},de.url))})]}),ft.length>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{padding:"4px 10px 6px",borderBottom:"1px solid var(--color-surface-border)",marginTop:be.length>0?4:0},children:e.jsx("p",{style:{fontSize:"9.5px",fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--color-text-muted)"},children:"Suggestions"})}),e.jsx("div",{style:{padding:"4px 3px 3px"},children:ft.map((de,we)=>{const Ke=be.length+we;return e.jsxs("div",{onMouseDown:Va=>{Va.preventDefault(),Te(de)},onMouseEnter:()=>te(Ke),onMouseLeave:()=>te(-1),className:`dui-stiv-sugg-item${Ke===$?" dui-stiv-sugg-item--active":""}`,children:[e.jsx(gt,{size:14,style:{color:"var(--color-text-muted)",flexShrink:0}}),e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"monospace"},children:de})]},de)})})]})]}),document.body)]})}const CA={pill:"full",rounded:"md",pointy:"none"};function yn({options:t,value:n,onChange:r,size:o,variant:i="pill",accentColor:a="var(--color-primary)",fullWidth:s,width:l,borderRadius:u,color:p,disabled:h=!1,className:f="",style:g}){const y=u??CA[i],b=Ad(o,{width:l,borderRadius:y,color:p}),v=d.useRef(null),[x,E]=d.useState({left:0,width:0}),[w,C]=d.useState(!1),A=d.useRef(!1),D=t.findIndex(O=>O.value===n),k=d.useCallback(()=>{const O=v.current;if(!O)return;const Y=O.querySelectorAll("button[data-seg]")[D];Y&&E({left:Y.offsetLeft,width:Y.offsetWidth})},[D]);d.useEffect(()=>{if(k(),A.current){C(!0);const O=setTimeout(()=>C(!1),360);return()=>clearTimeout(O)}A.current=!0},[n,D,t.length]),d.useEffect(()=>{const O=v.current;if(O){if(typeof ResizeObserver<"u"){const V=new ResizeObserver(()=>k());return V.observe(O),()=>V.disconnect()}return window.addEventListener("resize",k),()=>window.removeEventListener("resize",k)}},[k]);const N=d.useCallback(O=>{if(h)return;const V=t.filter(ee=>!ee.disabled);if(!V.length)return;const Y=V.findIndex(ee=>ee.value===n);O.key==="ArrowRight"?(O.preventDefault(),r(V[(Y+1)%V.length].value)):O.key==="ArrowLeft"&&(O.preventDefault(),r(V[(Y-1+V.length)%V.length].value))},[h,t,n,r]),j=3,F=i==="pointy"?b.borderRadius:`calc(${b.borderRadius} + ${j}px)`;return e.jsxs("div",{ref:v,role:"tablist",tabIndex:h?-1:0,onKeyDown:N,className:`dui_segctrl ${f}`,style:{display:"inline-flex",position:"relative",height:b.height,padding:j,borderRadius:F,backgroundColor:"var(--color-surface)",border:"1px solid var(--color-surface-border)",width:s?"100%":b.width,boxSizing:"border-box",flexShrink:0,opacity:h?.5:1,pointerEvents:h?"none":"auto",outline:"none",...g},children:[x.width>0&&e.jsx("div",{"aria-hidden":"true",className:`dui_segctrl__indicator${w?" dui_segctrl__indicator--bounce":""}`,style:{position:"absolute",top:j,left:x.left,width:x.width,height:`calc(100% - ${j*2}px)`,borderRadius:b.borderRadius,backgroundColor:`color-mix(in srgb, ${a} 22%, transparent)`,border:`1px solid color-mix(in srgb, ${a} 45%, transparent)`,boxSizing:"border-box",boxShadow:`0 1px 4px color-mix(in srgb, ${a} 15%, transparent)`}}),t.map(O=>{const V=O.value===n;return e.jsxs("button",{"data-seg":"1",type:"button",role:"tab","aria-selected":V,disabled:O.disabled,onClick:()=>!O.disabled&&O.value!==n&&r(O.value),className:"dui_segctrl__seg",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:b.gap,paddingLeft:b.paddingX,paddingRight:b.paddingX,fontSize:b.fontSize,fontWeight:V?700:500,height:"100%",border:"none",background:"transparent",color:V?a:b.color??"var(--color-text-secondary)",cursor:O.disabled?"not-allowed":"pointer",opacity:O.disabled?.35:1,position:"relative",zIndex:1,minWidth:0,userSelect:"none"},children:[O.icon,e.jsx("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:O.label})]},O.value)})]})}function yu({keyValue:t,value:n,badge:r,badgeColor:o,icon:i,masked:a=!1,onDelete:s,deleteTitle:l,showDescription:u=!1,className:p=""}){const[h,f]=d.useState(!1),g=a&&!h?"••••••••••••••••••••":n,y=["32px","1fr","1fr",u&&"1fr","32px"].filter(Boolean).join(" "),b={width:"100%",height:"28px",paddingLeft:"10px",paddingRight:"10px",borderRadius:"4px",fontSize:"12px",fontFamily:"inherit",display:"flex",alignItems:"center",overflow:"hidden",background:"color-mix(in srgb, var(--color-text-primary) 3%, transparent)",border:"1px dashed color-mix(in srgb, var(--color-text-primary) 12%, transparent)",color:"var(--color-text-muted)",cursor:"default",userSelect:"text"};return e.jsxs("div",{className:`dui_hidden-kv-item group ${p}`,style:{display:"grid",gridTemplateColumns:y,gap:"8px",alignItems:"center",minHeight:"28px"},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx("span",{style:{color:"var(--color-text-muted)",opacity:.55,display:"flex"},children:i??e.jsx(Xo,{size:13})})}),e.jsxs("div",{style:b,title:t,children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"monospace"},children:t}),r&&e.jsx("span",{style:{marginLeft:6,fontSize:9,padding:"1px 5px",borderRadius:99,flexShrink:0,background:`color-mix(in srgb, ${o??"var(--color-primary)"} 18%, transparent)`,color:o??"var(--color-primary)",fontWeight:700,letterSpacing:"0.03em"},children:r})]}),e.jsxs("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[e.jsx("div",{style:{...b,paddingRight:a?"28px":"10px",fontFamily:"monospace",width:"100%"},title:h?n:void 0,children:e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:g})}),a&&e.jsx("button",{type:"button",onClick:()=>f(v=>!v),className:"dui_hidden-kv-item__eye",style:{position:"absolute",right:6,top:"50%",transform:"translateY(-50%)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",padding:2,background:"transparent",border:"none"},title:h?"Hide value":"Reveal value",children:h?e.jsx(wl,{size:12}):e.jsx(El,{size:12})})]}),u&&e.jsx("div",{}),e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:s?e.jsx("button",{type:"button",onClick:s,title:l??"Remove",className:"dui_hidden-kv-item__delete opacity-0 group-hover:opacity-100",style:{display:"flex",alignItems:"center",justifyContent:"center",color:"var(--color-text-muted)",cursor:"pointer",padding:2,background:"transparent",border:"none"},children:e.jsx(ct,{size:13})}):e.jsx("div",{style:{width:24}})})]})}const Ud=["xxs","xs","sm","md","lg","xl","xxl","xxxl"];function Vi({options:t,value:n,onChange:r,size:o,accentColor:i,disabled:a=!1,direction:s="vertical",className:l="",style:u}){const p=mt(),h=o??p.size,f=i??p.activeColor??"var(--color-primary)",{box:g}=Bh[h],y=Ud[Math.max(0,Ud.indexOf(h)-1)],b=Vt[y],v=Vt[Ud[Math.max(0,Ud.indexOf(y)-1)]];return e.jsx("div",{role:"radiogroup",className:l,style:{display:"flex",flexDirection:s==="vertical"?"column":"row",gap:s==="vertical"?8:16,...u},children:t.map(x=>{const E=x.value===n,w=a||x.disabled;return e.jsxs("label",{style:{display:"flex",alignItems:x.description?"flex-start":"center",gap:8,cursor:w?"not-allowed":"pointer",opacity:w?.5:1},onClick:()=>!w&&r(x.value),children:[e.jsx("span",{style:{width:g,height:g,borderRadius:"999px",flexShrink:0,marginTop:x.description?2:0,display:"flex",alignItems:"center",justifyContent:"center",border:E?`2px solid ${f}`:"1.5px solid color-mix(in srgb, var(--color-text-primary) 28%, transparent)",transition:"border-color 120ms",boxSizing:"border-box"},children:E&&e.jsx("span",{style:{width:g*.5,height:g*.5,borderRadius:"999px",background:f}})}),e.jsxs("span",{style:{display:"flex",flexDirection:"column",gap:2},children:[e.jsx("span",{style:{fontSize:b,fontWeight:500,color:"var(--color-text-primary)",lineHeight:1.3},children:x.label}),x.description&&e.jsx("span",{style:{fontSize:v,color:"var(--color-text-muted)",lineHeight:1.4},children:x.description})]})]},x.value)})})}function Za({options:t,value:n,onChange:r,size:o,borderRadius:i,accentColor:a,columns:s=1,className:l="",style:u}){const p=Qt(o,{borderRadius:i}),h=a??p.color??"var(--color-primary)";return e.jsx("div",{className:l,style:{display:"grid",gridTemplateColumns:`repeat(${s}, 1fr)`,gap:p.gap,...u},children:t.map(f=>{const g=f.value===n;return e.jsxs("button",{type:"button",disabled:f.disabled,onClick:()=>r(f.value),style:{display:"flex",alignItems:"flex-start",gap:p.gap,padding:p.padding,borderRadius:p.borderRadius,border:`1.5px solid ${g?h:"var(--color-surface-border)"}`,background:g?`color-mix(in srgb, ${h} 8%, transparent)`:"var(--color-surface)",cursor:f.disabled?"not-allowed":"pointer",opacity:f.disabled?.5:1,textAlign:"left",transition:"border-color 140ms, background 140ms",fontFamily:"inherit",position:"relative"},children:[f.icon&&e.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,color:g?h:"var(--color-text-muted)"},children:f.icon}),e.jsxs("span",{style:{display:"flex",flexDirection:"column",gap:2,flex:1},children:[e.jsx("span",{style:{fontSize:p.fontSize,fontWeight:700,color:g?h:"var(--color-text-primary)"},children:f.label}),f.description&&e.jsx("span",{style:{fontSize:p.fontSize,color:"var(--color-text-muted)",lineHeight:1.4},children:f.description})]}),g&&e.jsx(An,{size:14,style:{color:h,flexShrink:0}})]},f.value)})})}function AA({filled:t,half:n,icon:r,size:o,color:i}){const a="color-mix(in srgb, var(--color-text-muted) 35%, transparent)",s=r==="star"?"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z":"M12 21s-7.5-4.5-10-9.2C.5 8.5 2.5 5 6 5c2 0 3.5 1 4 2 .5-1 2-2 4-2 3.5 0 5.5 3.5 4 6.8-2.5 4.7-10 9.2-10 9.2z",l=`dui-rating-half-${Math.random().toString(36).slice(2)}`;return e.jsxs("svg",{width:o,height:o,viewBox:"0 0 24 24",children:[n&&e.jsx("defs",{children:e.jsxs("linearGradient",{id:l,x1:"0",x2:"1",y1:"0",y2:"0",children:[e.jsx("stop",{offset:"50%",stopColor:i}),e.jsx("stop",{offset:"50%",stopColor:a})]})}),e.jsx("path",{d:s,fill:n?`url(#${l})`:t?i:a})]})}function Kr({value:t,onChange:n,max:r=5,allowHalf:o=!1,readOnly:i=!1,size:a,color:s,icon:l="star",className:u="",style:p}){const h=mt(),f=a??h.size,g=ni[f]*1.6,y=s??h.activeColor??"var(--color-warning)",[b,v]=d.useState(null),x=b??t,E=(C,A)=>{if(i||!n)return;let D=C+1;if(o){const k=A.currentTarget.getBoundingClientRect(),N=A.clientX-k.left<k.width/2;D=C+(N?.5:1)}n(D)},w=(C,A)=>{if(i)return;if(!o){v(C+1);return}const D=A.currentTarget.getBoundingClientRect(),k=A.clientX-D.left<D.width/2;v(C+(k?.5:1))};return e.jsx("div",{className:u,style:{display:"inline-flex",gap:2,...p},onMouseLeave:()=>v(null),children:Array.from({length:r},(C,A)=>{const D=x>=A+1,k=o&&!D&&x>=A+.5;return e.jsx("button",{type:"button",disabled:i,onClick:N=>E(A,N),onMouseMove:N=>w(A,N),style:{border:"none",background:"transparent",padding:1,cursor:i?"default":"pointer",display:"flex",lineHeight:0},"aria-label":`Rate ${A+1} of ${r}`,children:e.jsx(AA,{filled:D,half:k,icon:l,size:g,color:y})},A)})})}function Bi({value:t,onChange:n,onComplete:r,length:o=6,numeric:i=!0,disabled:a=!1,size:s,borderRadius:l,color:u,className:p="",style:h}){const f=an(s,{borderRadius:l,color:u}),g=u??"var(--color-primary)",y=d.useRef([]),b=Array.from({length:o},(A,D)=>t[D]??""),v=A=>{n(A),A.length===o&&!A.includes("")&&(r==null||r(A))},x=(A,D)=>{const k=b.slice();k[A]=D,v(k.join(""))},E=(A,D)=>{var j;const k=i?D.replace(/[^0-9]/g,""):D;if(!k){x(A,"");return}const N=k[k.length-1];x(A,N),A<o-1&&((j=y.current[A+1])==null||j.focus())},w=(A,D)=>{var k,N,j;D.key==="Backspace"?(b[A]?x(A,""):A>0&&((k=y.current[A-1])==null||k.focus(),x(A-1,"")),D.preventDefault()):D.key==="ArrowLeft"&&A>0?(N=y.current[A-1])==null||N.focus():D.key==="ArrowRight"&&A<o-1&&((j=y.current[A+1])==null||j.focus())},C=(A,D)=>{var O;D.preventDefault();const k=D.clipboardData.getData("text"),N=i?k.replace(/[^0-9]/g,""):k;if(!N)return;const j=b.slice();for(let V=0;V<N.length&&A+V<o;V++)j[A+V]=N[V];v(j.join(""));const F=Math.min(A+N.length,o-1);(O=y.current[F])==null||O.focus()};return e.jsx("div",{className:p,style:{display:"flex",gap:f.gap,...h},children:b.map((A,D)=>e.jsx("input",{ref:k=>{y.current[D]=k},type:"text",inputMode:i?"numeric":"text",maxLength:1,disabled:a,value:A,onChange:k=>E(D,k.target.value),onKeyDown:k=>w(D,k),onPaste:k=>C(D,k),onFocus:k=>k.target.select(),style:{width:f.height,height:f.height,fontSize:f.fontSize,textAlign:"center",borderRadius:f.borderRadius,border:`1.5px solid ${A?g:"var(--color-input-border)"}`,background:"var(--color-input-bg)",color:"var(--color-text-primary)",fontWeight:700,outline:"none",opacity:a?.5:1,transition:"border-color 140ms"}},D))})}const pw=[{code:"US",dialCode:"+1",label:"United States",flag:"🇺🇸"},{code:"GB",dialCode:"+44",label:"United Kingdom",flag:"🇬🇧"},{code:"IN",dialCode:"+91",label:"India",flag:"🇮🇳"},{code:"CA",dialCode:"+1",label:"Canada",flag:"🇨🇦"},{code:"AU",dialCode:"+61",label:"Australia",flag:"🇦🇺"},{code:"DE",dialCode:"+49",label:"Germany",flag:"🇩🇪"},{code:"FR",dialCode:"+33",label:"France",flag:"🇫🇷"},{code:"JP",dialCode:"+81",label:"Japan",flag:"🇯🇵"},{code:"SG",dialCode:"+65",label:"Singapore",flag:"🇸🇬"},{code:"AE",dialCode:"+971",label:"United Arab Emirates",flag:"🇦🇪"}];function ia({countryCode:t,onCountryChange:n,number:r,onNumberChange:o,countries:i=pw,placeholder:a="Phone number",disabled:s=!1,size:l,width:u,borderRadius:p,color:h,className:f="",style:g}){const y=an(l,{width:u,borderRadius:p,color:h}),b=i.map(v=>({value:v.code,label:`${v.flag??""} ${v.dialCode}`.trim()}));return e.jsxs("div",{className:f,style:{display:"flex",width:y.width,border:"1px solid var(--color-input-border)",borderRadius:y.borderRadius,background:"var(--color-input-bg)",overflow:"hidden",opacity:s?.5:1,pointerEvents:s?"none":"auto",boxSizing:"border-box",...g},children:[e.jsx(St,{options:b,value:t,onChange:n,size:l,style:{width:90,flexShrink:0},borderRadius:0,className:"dui_phoneinput__select"}),e.jsx("div",{style:{width:1,background:"var(--color-input-border)",flexShrink:0}}),e.jsx("input",{type:"tel",disabled:s,placeholder:a,value:r,onChange:v=>o(v.target.value.replace(/[^0-9\s-]/g,"")),style:{flex:1,minWidth:0,border:"none",outline:"none",background:"transparent",color:"var(--color-text-primary)",fontSize:y.fontSize,paddingLeft:y.paddingX,paddingRight:y.paddingX}})]})}const kA=["#EF4444","#F97316","#F59E0B","#EAB308","#84CC16","#22C55E","#10B981","#14B8A6","#06B6D4","#0EA5E9","#3B82F6","#6366F1","#8B5CF6","#A855F7","#D946EF","#EC4899","#F43F5E","#64748B"];function xo({value:t,onChange:n,swatches:r=kA,disabled:o=!1,size:i,width:a,borderRadius:s,className:l="",style:u}){const p=so(i,{width:a,borderRadius:s}),[h,f]=d.useState(!1),[g,y]=d.useState(t),b=d.useRef(null),v=d.useRef(null);d.useEffect(()=>y(t),[t]),d.useEffect(()=>{if(!h||!b.current||!v.current)return;const E=b.current,w=v.current,C=()=>{const D=E.getBoundingClientRect();w.style.top=`${D.bottom+6}px`,w.style.left=`${Math.min(D.left,window.innerWidth-w.offsetWidth-8)}px`};C();const A=requestAnimationFrame(C);return()=>cancelAnimationFrame(A)},[h]),d.useEffect(()=>{if(!h)return;const E=w=>{var C,A;(C=b.current)!=null&&C.contains(w.target)||(A=v.current)!=null&&A.contains(w.target)||f(!1)};return document.addEventListener("mousedown",E),()=>document.removeEventListener("mousedown",E)},[h]);const x=E=>{y(E),/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(E)&&n(E)};return e.jsxs("div",{className:`dui_colorpicker ${l}`,style:{display:"inline-block",...u},children:[e.jsxs("button",{ref:b,type:"button",disabled:o,onClick:()=>f(E=>!E),style:{display:"flex",alignItems:"center",gap:p.gap,height:p.height,paddingLeft:p.paddingX,paddingRight:p.paddingX,border:`1px solid ${h?"var(--color-primary)":"var(--color-input-border)"}`,borderRadius:p.borderRadius,background:"var(--color-input-bg)",cursor:o?"default":"pointer",opacity:o?.5:1},children:[e.jsx("span",{style:{width:p.iconSize+4,height:p.iconSize+4,borderRadius:4,background:t,border:"1px solid var(--color-surface-border)",flexShrink:0}}),e.jsx("span",{style:{fontSize:p.fontSize,color:"var(--color-text-primary)",fontWeight:500},children:t})]}),h&&it.createPortal(e.jsxs("div",{ref:v,className:"dui_colorpicker__menu",style:{position:"fixed",zIndex:99999},children:[e.jsx("div",{className:"dui_colorpicker__grid",children:r.map(E=>e.jsx("button",{type:"button",className:`dui_colorpicker__swatch${E.toLowerCase()===t.toLowerCase()?" dui_colorpicker__swatch--active":""}`,style:{background:E},onClick:()=>{n(E),f(!1)},"aria-label":E},E))}),e.jsxs("div",{className:"dui_colorpicker__hexrow",children:[e.jsx("input",{type:"color",value:/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(g)?g:"#000000",onChange:E=>x(E.target.value),className:"dui_colorpicker__native"}),e.jsx("input",{type:"text",value:g,onChange:E=>x(E.target.value),className:"dui_colorpicker__hexinput",placeholder:"#RRGGBB"})]})]}),document.body)]})}const Op=Object.entries(mh).filter(([t,n])=>t.endsWith("Icon")&&typeof n=="function").map(([t,n])=>({name:t,Icon:n}));function So({value:t,onChange:n,disabled:r=!1,size:o,width:i,borderRadius:a,color:s,className:l="",style:u}){const p=so(o,{width:i,borderRadius:a,color:s}),h=s??"var(--color-primary)",[f,g]=d.useState(!1),[y,b]=d.useState(""),v=d.useRef(null),x=d.useRef(null),E=Op.find(C=>C.name===t),w=d.useMemo(()=>{const C=y.trim().toLowerCase();return C?Op.filter(A=>A.name.toLowerCase().includes(C)):Op},[y]);return d.useEffect(()=>{if(!f||!v.current||!x.current)return;const C=v.current,A=x.current,D=()=>{const N=C.getBoundingClientRect();A.style.top=`${N.bottom+6}px`,A.style.left=`${Math.min(N.left,window.innerWidth-A.offsetWidth-8)}px`};D();const k=requestAnimationFrame(D);return()=>cancelAnimationFrame(k)},[f]),d.useEffect(()=>{if(!f)return;const C=A=>{var D,k;(D=v.current)!=null&&D.contains(A.target)||(k=x.current)!=null&&k.contains(A.target)||g(!1)};return document.addEventListener("mousedown",C),()=>document.removeEventListener("mousedown",C)},[f]),e.jsxs("div",{className:`dui_iconpicker ${l}`,style:{display:"inline-block",...u},children:[e.jsxs("button",{ref:v,type:"button",disabled:r,onClick:()=>g(C=>!C),style:{display:"flex",alignItems:"center",gap:p.gap,height:p.height,paddingLeft:p.paddingX,paddingRight:p.paddingX,border:`1px solid ${f?h:"var(--color-input-border)"}`,borderRadius:p.borderRadius,background:"var(--color-input-bg)",cursor:r?"default":"pointer",opacity:r?.5:1},children:[E?e.jsx(E.Icon,{size:p.iconSize}):e.jsx("span",{style:{width:p.iconSize,height:p.iconSize}}),e.jsx("span",{style:{fontSize:p.fontSize,color:"var(--color-text-primary)",fontWeight:500},children:(E==null?void 0:E.name)??"Choose icon"})]}),f&&it.createPortal(e.jsxs("div",{ref:x,className:"dui_iconpicker__menu",style:{position:"fixed",zIndex:99999},children:[e.jsx("input",{autoFocus:!0,type:"text",value:y,onChange:C=>b(C.target.value),placeholder:"Search icons…",className:"dui_iconpicker__search"}),e.jsxs("div",{className:"dui_iconpicker__grid",children:[w.slice(0,200).map(({name:C,Icon:A})=>e.jsx("button",{type:"button",title:C,className:`dui_iconpicker__item${C===t?" dui_iconpicker__item--active":""}`,onClick:()=>{n(C),g(!1)},children:e.jsx(A,{size:16})},C)),w.length===0&&e.jsx("div",{className:"dui_iconpicker__empty",children:"No icons found"})]})]}),document.body)]})}const Wf=[...["😀","😁","😂","🤣","😊","😍","🤩","😎","🤔","😴","😢","😡","🥳","🤯","🙌","👍","👎","🙏","👏","💪"].map((t,n)=>({char:t,name:`smiley-${n}`,category:"Smileys"})),...["🐶","🐱","🦊","🦁","🐼","🐨","🐸","🐙","🦋","🐝","🦄","🐢"].map((t,n)=>({char:t,name:`animal-${n}`,category:"Animals"})),...["🍕","🍔","🍟","🌮","🍣","🍩","🍰","☕","🍺","🍷","🥑","🍎"].map((t,n)=>({char:t,name:`food-${n}`,category:"Food"})),...["⚽","🏀","🏈","🎮","🎸","🎨","📸","🎯","🏆","🚀","✈️","🚗"].map((t,n)=>({char:t,name:`activity-${n}`,category:"Activities"})),...["❤️","🔥","⭐","✅","❌","⚠️","💡","🔒","🔑","📌","🎉","💯"].map((t,n)=>({char:t,name:`symbol-${n}`,category:"Symbols"}))];function To({value:t,onChange:n,disabled:r=!1,size:o,width:i,borderRadius:a,color:s,className:l="",style:u}){const p=so(o,{width:i,borderRadius:a,color:s}),h=s??"var(--color-primary)",[f,g]=d.useState(!1),[y,b]=d.useState(""),v=d.useRef(null),x=d.useRef(null),E=d.useMemo(()=>{const w=y.trim().toLowerCase(),C=w?Wf.filter(D=>D.category.toLowerCase().includes(w)):Wf,A=new Map;for(const D of C)A.has(D.category)||A.set(D.category,[]),A.get(D.category).push(D);return Array.from(A.entries())},[y]);return d.useEffect(()=>{if(!f||!v.current||!x.current)return;const w=v.current,C=x.current,A=()=>{const k=w.getBoundingClientRect();C.style.top=`${k.bottom+6}px`,C.style.left=`${Math.min(k.left,window.innerWidth-C.offsetWidth-8)}px`};A();const D=requestAnimationFrame(A);return()=>cancelAnimationFrame(D)},[f]),d.useEffect(()=>{if(!f)return;const w=C=>{var A,D;(A=v.current)!=null&&A.contains(C.target)||(D=x.current)!=null&&D.contains(C.target)||g(!1)};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[f]),e.jsxs("div",{className:`dui_emojipicker ${l}`,style:{display:"inline-block",...u},children:[e.jsx("button",{ref:v,type:"button",disabled:r,onClick:()=>g(w=>!w),style:{display:"flex",alignItems:"center",justifyContent:"center",gap:p.gap,width:p.height,height:p.height,border:`1px solid ${f?h:"var(--color-input-border)"}`,borderRadius:p.borderRadius,background:"var(--color-input-bg)",cursor:r?"default":"pointer",opacity:r?.5:1,fontSize:p.iconSize+4},children:t??"🙂"}),f&&it.createPortal(e.jsxs("div",{ref:x,className:"dui_emojipicker__menu",style:{position:"fixed",zIndex:99999},children:[e.jsx("input",{autoFocus:!0,type:"text",value:y,onChange:w=>b(w.target.value),placeholder:"Search category…",className:"dui_emojipicker__search"}),e.jsx("div",{className:"dui_emojipicker__scroll",children:E.map(([w,C])=>e.jsxs("div",{children:[e.jsx("div",{className:"dui_emojipicker__category",children:w}),e.jsx("div",{className:"dui_emojipicker__grid",children:C.map(A=>e.jsx("button",{type:"button",className:`dui_emojipicker__item${A.char===t?" dui_emojipicker__item--active":""}`,onClick:()=>{n(A.char),g(!1)},children:A.char},A.name))})]},w))})]}),document.body)]})}function RA(t){return t<1024?`${t} B`:t<1024*1024?`${(t/1024).toFixed(1)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`}function aa({files:t,onFilesAdded:n,onRemove:r,accept:o,multiple:i=!0,disabled:a=!1,size:s,width:l,borderRadius:u,color:p,className:h="",style:f}){const g=Qt(s,{borderRadius:u,color:p}),y=p??"var(--color-primary)",[b,v]=d.useState(!1),x=d.useRef(null),E=w=>{!w||!w.length||n(Array.from(w))};return e.jsxs("div",{className:`dui_dropzone ${h}`,style:{width:l,...f},children:[e.jsxs("div",{className:`dui_dropzone__area${b?" dui_dropzone__area--over":""}`,style:{borderRadius:g.borderRadius,borderColor:b?y:void 0,opacity:a?.5:1,pointerEvents:a?"none":"auto"},onClick:()=>{var w;return(w=x.current)==null?void 0:w.click()},onDragOver:w=>{w.preventDefault(),v(!0)},onDragLeave:()=>v(!1),onDrop:w=>{w.preventDefault(),v(!1),E(w.dataTransfer.files)},children:[e.jsx(_l,{size:20,style:{color:b?y:"var(--color-text-muted)"}}),e.jsx("div",{style:{fontSize:g.fontSize,fontWeight:600,color:"var(--color-text-primary)",marginTop:6},children:"Drop files here or click to browse"}),e.jsx("div",{style:{fontSize:g.fontSize,color:"var(--color-text-muted)",marginTop:2},children:o??"Any file type"}),e.jsx("input",{ref:x,type:"file",accept:o,multiple:i,style:{display:"none"},onChange:w=>{E(w.target.files),w.target.value=""}})]}),t.length>0&&e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:6,marginTop:g.gap},children:t.map((w,C)=>e.jsxs("div",{className:"dui_dropzone__row",style:{borderRadius:g.borderRadius},children:[e.jsx(ip,{size:14,style:{color:"var(--color-text-muted)",flexShrink:0}}),e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("div",{style:{fontSize:g.fontSize,color:"var(--color-text-primary)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:w.file.name}),e.jsx("div",{style:{fontSize:g.fontSize,color:w.error?"var(--color-error)":"var(--color-text-muted)"},children:w.error??RA(w.file.size)}),w.progress!==void 0&&w.progress<100&&!w.error&&e.jsx("div",{className:"dui_dropzone__progresstrack",children:e.jsx("div",{className:"dui_dropzone__progressfill",style:{width:`${w.progress}%`,background:y}})})]}),e.jsx("button",{type:"button",className:"dui_dropzone__remove",onClick:()=>r(C),"aria-label":"Remove file",children:e.jsx(ct,{size:13})})]},C))})]})}function zr({src:t,onFileSelected:n,initials:r,disabled:o=!1,size:i,color:a,className:s="",style:l}){const u=mt(),p=i??u.size,h=a??u.activeColor??"var(--color-primary)",f=or.card[p],g=d.useRef(null);return e.jsxs("div",{className:`dui_avatarupload ${s}`,style:{position:"relative",width:f,height:f,borderRadius:"999px",cursor:o?"default":"pointer",opacity:o?.5:1,flexShrink:0,...l},onClick:()=>{var y;return!o&&((y=g.current)==null?void 0:y.click())},children:[e.jsx("div",{style:{width:"100%",height:"100%",borderRadius:"999px",overflow:"hidden",background:t?`center/cover no-repeat url(${t})`:`color-mix(in srgb, ${h} 15%, transparent)`,display:"flex",alignItems:"center",justifyContent:"center",border:"2px solid var(--color-surface-border)",fontSize:f*.36,fontWeight:700,color:h},children:!t&&(r??e.jsx(Cu,{size:f*.32}))}),e.jsx("div",{style:{position:"absolute",bottom:0,right:0,width:f*.34,height:f*.34,borderRadius:"999px",background:h,display:"flex",alignItems:"center",justifyContent:"center",border:"2px solid var(--color-surface)"},children:e.jsx(Cu,{size:f*.18,style:{color:"var(--color-btn-primary-text, #fff)"}})}),e.jsx("input",{ref:g,type:"file",accept:"image/*",disabled:o,style:{display:"none"},onChange:y=>{var v;const b=(v=y.target.files)==null?void 0:v[0];b&&n(b),y.target.value=""}})]})}function IA(t,n){return t==="9"?/[0-9]/.test(n):t==="A"?/[a-zA-Z]/.test(n):!0}function hw(t,n){const r=n.split("");let o="",i=0;for(let a=0;a<t.length&&i<r.length;a++){const s=t[a];if(s==="9"||s==="A"||s==="*"){for(;i<r.length&&!IA(s,r[i]);)i++;if(i>=r.length)break;o+=r[i],i++}else o+=s,r[i]===s&&i++}return o}function jo({value:t,onChange:n,mask:r,placeholder:o,disabled:i=!1,size:a,width:s,borderRadius:l,color:u,className:p="",style:h}){const f=an(a,{width:s,borderRadius:l,color:u});return e.jsx("input",{type:"text",className:p,disabled:i,placeholder:o??r.replace(/9/g,"_").replace(/A/g,"_"),value:t,onChange:g=>n(hw(r,g.target.value)),style:{width:f.width,height:f.height,fontSize:f.fontSize,paddingLeft:f.paddingX,paddingRight:f.paddingX,borderRadius:f.borderRadius,border:"1px solid var(--color-input-border)",background:"var(--color-input-bg)",color:"var(--color-text-primary)",outline:"none",fontFamily:"monospace",letterSpacing:"0.03em",boxSizing:"border-box",opacity:i?.5:1,...h}})}function Vf({title:t,items:n,checked:r,onToggle:o,fontSize:i}){return e.jsxs("div",{className:"dui_transferlist__panel",children:[e.jsxs("div",{className:"dui_transferlist__header",style:{fontSize:i},children:[t," · ",n.length]}),e.jsxs("div",{className:"dui_transferlist__list",children:[n.map(a=>e.jsxs("label",{className:"dui_transferlist__row",style:{fontSize:i},children:[e.jsx("input",{type:"checkbox",checked:r.has(a.value),onChange:()=>o(a.value)}),a.label]},a.value)),n.length===0&&e.jsx("div",{className:"dui_transferlist__empty",style:{fontSize:i},children:"Empty"})]})]})}function wo({items:t,value:n,onChange:r,leftTitle:o="Available",rightTitle:i="Selected",size:a,borderRadius:s,color:l,height:u=220,className:p="",style:h}){const f=so(a,{borderRadius:s,color:l}),g=l??"var(--color-primary)",[y,b]=d.useState(new Set),[v,x]=d.useState(new Set),E=new Set(n),w=t.filter(F=>!E.has(F.value)),C=t.filter(F=>E.has(F.value)),A=(F,O,V)=>{const Y=new Set(F);Y.has(V)?Y.delete(V):Y.add(V),O(Y)},D=()=>{r([...n,...Array.from(y)]),b(new Set)},k=()=>{r(n.filter(F=>!v.has(F))),x(new Set)},N=()=>{r(t.map(F=>F.value)),b(new Set)},j=()=>{r([]),x(new Set)};return e.jsxs("div",{className:`dui_transferlist ${p}`,style:{display:"flex",alignItems:"center",gap:8,minWidth:460,...h},children:[e.jsx("div",{style:{height:u,borderRadius:f.borderRadius,border:"1px solid var(--color-surface-border)",overflow:"hidden",flex:1},children:e.jsx(Vf,{title:o,items:w,checked:y,onToggle:F=>A(y,b,F),fontSize:f.fontSize})}),e.jsxs("div",{className:"dui_transferlist__controls",children:[e.jsx("button",{type:"button",className:"dui_transferlist__btn",style:{"--dui-tl-accent":g},onClick:D,disabled:!y.size,"aria-label":"Move selected right",children:e.jsx(lt,{size:12})}),e.jsxs("button",{type:"button",className:"dui_transferlist__btn",style:{"--dui-tl-accent":g},onClick:N,disabled:!w.length,"aria-label":"Move all right",children:[e.jsx(lt,{size:12}),e.jsx(lt,{size:12,style:{marginLeft:-6}})]}),e.jsx("button",{type:"button",className:"dui_transferlist__btn",style:{"--dui-tl-accent":g},onClick:k,disabled:!v.size,"aria-label":"Move selected left",children:e.jsx(Yo,{size:12})}),e.jsxs("button",{type:"button",className:"dui_transferlist__btn",style:{"--dui-tl-accent":g},onClick:j,disabled:!C.length,"aria-label":"Move all left",children:[e.jsx(Yo,{size:12}),e.jsx(Yo,{size:12,style:{marginLeft:-6}})]})]}),e.jsx("div",{style:{height:u,borderRadius:f.borderRadius,border:"1px solid var(--color-surface-border)",overflow:"hidden",flex:1},children:e.jsx(Vf,{title:i,items:C,checked:v,onToggle:F=>A(v,x,F),fontSize:f.fontSize})})]})}function Hr({value:t,onChange:n,min:r=-1/0,max:o=1/0,step:i=1,disabled:a=!1,size:s,borderRadius:l,color:u,className:p="",style:h}){const f=an(s,{borderRadius:l,color:u}),g=u??"var(--color-primary)",y=E=>Math.min(o,Math.max(r,E)),b=()=>n(y(t-i)),v=()=>n(y(t+i)),x={display:"flex",alignItems:"center",justifyContent:"center",width:f.height,height:f.height,flexShrink:0,border:"none",background:"transparent",color:g,cursor:a?"default":"pointer"};return e.jsxs("div",{className:p,style:{display:"inline-flex",alignItems:"center",border:"1px solid var(--color-input-border)",borderRadius:f.borderRadius,background:"var(--color-input-bg)",overflow:"hidden",opacity:a?.5:1,pointerEvents:a?"none":"auto",...h},children:[e.jsx("button",{type:"button",style:x,onClick:b,disabled:t<=r,"aria-label":"Decrease",children:e.jsx(Uh,{size:f.iconSize})}),e.jsx("input",{type:"text",inputMode:"decimal",value:t,onChange:E=>{const w=Number(E.target.value);Number.isNaN(w)||n(y(w))},style:{width:parseInt(f.height,10)*1.4,textAlign:"center",border:"none",borderLeft:"1px solid var(--color-input-border)",borderRight:"1px solid var(--color-input-border)",background:"transparent",color:"var(--color-text-primary)",fontSize:f.fontSize,fontWeight:700,outline:"none",height:f.height}}),e.jsx("button",{type:"button",style:x,onClick:v,disabled:t>=o,"aria-label":"Increase",children:e.jsx(at,{size:f.iconSize})})]})}function $e({checked:t,onChange:n,disabled:r=!1,size:o,accentColor:i,label:a,labelPosition:s="right",className:l="",activeColor:u,color:p}){const h=mp(o,{activeColor:u,color:p}),f=i||h.activeColor||"var(--color-toggle-on)",g=h.color||(r?"var(--color-text-muted)":"var(--color-text-primary)"),{trackW:y,trackH:b,thumb:v,fontSize:x}=h,E=t?`calc(${y}px - ${v+2}px)`:"2px",w={position:"relative",width:y,height:b,borderRadius:999,flexShrink:0,cursor:r?"not-allowed":"pointer",transition:"background 160ms, border-color 160ms",...r?{background:"transparent",border:"1.5px dashed var(--color-text-muted)",opacity:.5}:t?{background:f,border:"1.5px solid transparent"}:{background:"color-mix(in srgb, var(--color-text-primary) 10%, transparent)",border:"1.5px solid color-mix(in srgb, var(--color-text-primary) 20%, transparent)"}},C={position:"absolute",top:"50%",left:E,transform:"translateY(-50%)",width:v,height:v,borderRadius:"50%",background:r?"var(--color-text-muted)":"var(--color-toggle-thumb)",transition:"left 160ms",boxShadow:"0 1px 3px rgba(0,0,0,0.3)",pointerEvents:"none"},A=e.jsx("button",{type:"button",role:"switch","aria-checked":t,disabled:r,onClick:()=>!r&&n(!t),style:w,className:l,children:e.jsx("span",{style:C})});return a?e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[s==="left"&&e.jsx("span",{style:{fontSize:x,color:g,userSelect:"none"},children:a}),A,s==="right"&&e.jsx("span",{style:{fontSize:x,color:g,userSelect:"none"},children:a})]}):A}function Oo({title:t,items:n,checked:r,onChange:o,size:i,color:a,className:s="",style:l}){const u=Qt(i,{color:a}),p=new Set(r),h=(f,g)=>{o(g?[...r,f]:r.filter(y=>y!==f))};return e.jsxs("div",{className:s,style:{borderRadius:u.borderRadius,border:"1px solid var(--color-surface-border)",background:"var(--color-surface)",overflow:"hidden",...l},children:[t&&e.jsx("div",{style:{padding:u.padding,fontSize:u.fontSize,fontWeight:700,color:"var(--color-text-muted)",textTransform:"uppercase",letterSpacing:"0.06em",borderBottom:"1px solid var(--color-surface-border)"},children:t}),n.map((f,g)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:u.gap,padding:u.padding,borderBottom:g<n.length-1?"1px solid var(--color-surface-border)":"none",opacity:f.disabled?.5:1},children:[f.icon&&e.jsx("span",{style:{display:"flex",color:"var(--color-text-muted)",flexShrink:0},children:f.icon}),e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("div",{style:{fontSize:u.fontSize,fontWeight:600,color:"var(--color-text-primary)"},children:f.label}),f.description&&e.jsx("div",{style:{fontSize:u.fontSize,color:"var(--color-text-muted)",marginTop:1},children:f.description})]}),e.jsx($e,{checked:p.has(f.value),onChange:y=>h(f.value,y),disabled:f.disabled,size:i,accentColor:a})]},f.value))]})}function es({open:t,message:n,onClose:r,actionLabel:o,onAction:i,duration:a=4e3,size:s,width:l,borderRadius:u,color:p,className:h="",style:f}){const g=lo(s,{width:l,borderRadius:u,color:p}),y=p??"var(--color-primary)",b=d.useRef(null),v=()=>{b.current&&clearTimeout(b.current)},x=()=>{v(),a>0&&(b.current=setTimeout(r,a))};return d.useEffect(()=>(t&&x(),v),[t,a]),t?e.jsxs("div",{className:`dui_snackbar ${h}`,onMouseEnter:v,onMouseLeave:x,style:{display:"inline-flex",alignItems:"center",gap:g.gap,paddingLeft:g.paddingX,paddingRight:g.paddingX,height:"auto",minHeight:40,borderRadius:g.borderRadius,width:l?g.width:void 0,background:"var(--color-elevated, #1f2430)",color:"#fff",boxShadow:"0 8px 30px rgba(0,0,0,.35)",...f},children:[e.jsx("span",{style:{fontSize:g.fontSize,flex:1,padding:"10px 0"},children:n}),o&&e.jsx("button",{type:"button",onClick:()=>{i==null||i(),r()},style:{border:"none",background:"transparent",color:y,fontWeight:700,fontSize:g.fontSize,cursor:"pointer",flexShrink:0},children:o}),e.jsx("button",{type:"button",onClick:r,"aria-label":"Dismiss",style:{display:"flex",border:"none",background:"transparent",color:"rgba(255,255,255,0.6)",cursor:"pointer",flexShrink:0,padding:2},children:e.jsx($t,{size:13})})]}):null}const DA={info:"var(--color-info)",success:"var(--color-success)",warning:"var(--color-warning)",danger:"var(--color-error)"};function qr({open:t,message:n,variant:r="info",onDismiss:o,actionLabel:i,onAction:a,icon:s,size:l,borderRadius:u,className:p="",style:h}){const f=lo(l,{borderRadius:u}),g=DA[r];return t?e.jsxs("div",{className:p,role:"status",style:{display:"flex",alignItems:"center",gap:f.gap,padding:`10px ${f.paddingX}`,borderRadius:f.borderRadius,background:`color-mix(in srgb, ${g} 10%, var(--color-surface))`,border:`1px solid color-mix(in srgb, ${g} 30%, transparent)`,width:"100%",boxSizing:"border-box",...h},children:[e.jsx("span",{style:{display:"flex",color:g,flexShrink:0},children:s??e.jsx(kt,{size:16})}),e.jsx("span",{style:{flex:1,fontSize:f.fontSize,color:"var(--color-text-primary)",lineHeight:1.5},children:n}),i&&e.jsx("button",{type:"button",onClick:a,style:{border:"none",background:"transparent",color:g,fontWeight:700,fontSize:f.fontSize,cursor:"pointer",flexShrink:0,whiteSpace:"nowrap"},children:i}),o&&e.jsx("button",{type:"button",onClick:o,"aria-label":"Dismiss",style:{display:"flex",border:"none",background:"transparent",color:"var(--color-text-muted)",cursor:"pointer",flexShrink:0,padding:2},children:e.jsx($t,{size:13})})]}):null}function Jn({value:t,size:n,color:r,trackColor:o,showLabel:i=!0,className:a="",style:s}){const l=lo(n,{color:r}),u=r??"var(--color-primary)",p=o??"var(--color-surface-border)",h=l.ringDiameter*.6,f=l.thickness,g=(h-f)/2,y=2*Math.PI*g,b=t===void 0,v=Math.min(100,Math.max(0,t??0)),x=y-v/100*y;return e.jsxs("div",{className:`dui_progressring ${a}`,style:{position:"relative",width:h,height:h,...s},children:[e.jsxs("svg",{width:h,height:h,className:b?"dui_progressring__svg dui_progressring__svg--spin":"dui_progressring__svg",children:[e.jsx("circle",{cx:h/2,cy:h/2,r:g,fill:"none",stroke:p,strokeWidth:f}),e.jsx("circle",{cx:h/2,cy:h/2,r:g,fill:"none",stroke:u,strokeWidth:f,strokeLinecap:"round",strokeDasharray:y,strokeDashoffset:b?y*.75:x,transform:`rotate(-90 ${h/2} ${h/2})`,style:{transition:b?void 0:"stroke-dashoffset 300ms ease-out"}})]}),i&&!b&&e.jsxs("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:l.fontSize,fontWeight:700,color:"var(--color-text-primary)"},children:[Math.round(v),"%"]})]})}function Yn({value:t,buffer:n,size:r,width:o,color:i,trackColor:a,className:s="",style:l}){const u=lo(r,{width:o,color:i}),p=i??"var(--color-primary)",h=a??"var(--color-surface-border)",f=t===void 0,g=Math.min(100,Math.max(0,t??0));return e.jsxs("div",{className:`dui_progressbar ${s}`,role:"progressbar","aria-valuenow":f?void 0:g,style:{width:u.width,height:u.thickness,borderRadius:u.thickness/2,background:h,overflow:"hidden",position:"relative",...l},children:[n!==void 0&&!f&&e.jsx("div",{style:{position:"absolute",inset:0,width:`${Math.min(100,Math.max(0,n))}%`,background:`color-mix(in srgb, ${p} 30%, transparent)`,borderRadius:"inherit",transition:"width 300ms ease-out"}}),e.jsx("div",{className:f?"dui_progressbar__fill dui_progressbar__fill--indeterminate":"dui_progressbar__fill",style:{position:"absolute",top:0,bottom:0,left:0,width:f?"40%":`${g}%`,background:p,borderRadius:"inherit",transition:f?void 0:"width 300ms ease-out"}})]})}const Wl=(t,n)=>({display:"block",height:t,width:n,borderRadius:4,background:"var(--color-loader-track)"});function pr({variant:t="text",lines:n=1,width:r,height:o,size:i,className:a="",style:s}){const l=lo(i),u=Al(i),p=parseInt(l.fontSize,10)+8;return t==="avatar"?e.jsx("span",{className:`animate-pulse ${a}`,style:{...Wl(u.diameter,u.diameter),borderRadius:"999px",display:"inline-block",flexShrink:0,...s}}):t==="row"?e.jsxs("div",{className:a,style:{display:"flex",alignItems:"center",gap:l.gap,...s},children:[e.jsx("span",{className:"animate-pulse",style:{...Wl(u.diameter,u.diameter),borderRadius:"999px",flexShrink:0}}),e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:6},children:[e.jsx("span",{className:"animate-pulse",style:Wl(p*.6,"60%")}),e.jsx("span",{className:"animate-pulse",style:Wl(p*.5,"35%")})]})]}):t==="block"?e.jsx("span",{className:`animate-pulse ${a}`,style:{...Wl(o??80,r??"100%"),borderRadius:l.borderRadius,...s}}):e.jsx("div",{className:a,style:{display:"flex",flexDirection:"column",gap:6,width:r??"100%",...s},children:Array.from({length:n},(h,f)=>e.jsx("span",{className:"animate-pulse",style:Wl(o??p*.6,f===n-1&&n>1?"70%":"100%")},f))})}function zo({children:t,count:n,hidden:r=!1,dot:o=!1,max:i=99,size:a,color:s,className:l="",style:u}){const p=lo(a,{color:s}),h=s??"var(--color-error)",f=o||n===void 0,g=n!==void 0?n>i?`${i}+`:String(n):"",y=!r&&(f||(n??0)>0);return e.jsxs("span",{className:l,style:{position:"relative",display:"inline-flex",...u},children:[t,y&&e.jsx("span",{style:{position:"absolute",top:-2,right:-2,minWidth:f&&n===void 0?p.badgeSize*.45:p.badgeSize,height:f&&n===void 0?p.badgeSize*.45:p.badgeSize,padding:f&&n===void 0?0:"0 4px",borderRadius:"999px",background:h,display:"flex",alignItems:"center",justifyContent:"center",fontSize:p.fontSize,fontWeight:700,color:"#fff",border:"2px solid var(--color-surface)",boxSizing:"content-box",lineHeight:1},children:!(f&&n===void 0)&&g})]})}const NA={online:"var(--color-success)",away:"var(--color-warning)",busy:"var(--color-error)",offline:"var(--color-text-muted)"};function Qn({status:t,size:n,ring:r=!1,className:o="",style:i}){const a=Al(n),s=NA[t];return e.jsx("span",{className:o,"aria-label":t,style:{display:"inline-block",width:a.dotSize,height:a.dotSize,borderRadius:"999px",background:s,border:r?"2px solid var(--color-surface)":void 0,boxSizing:"content-box",flexShrink:0,...i}})}function LA(t){var r,o;if(!t)return"?";const n=t.trim().split(/\s+/);return((((r=n[0])==null?void 0:r[0])??"")+(((o=n[1])==null?void 0:o[0])??"")).toUpperCase()||t.slice(0,2).toUpperCase()}function pt({src:t,initials:n,name:r,status:o,size:i,color:a,className:s="",style:l}){const u=Al(i,{color:a}),p=a??u.activeColor??"var(--color-primary)",h=n??LA(r);return e.jsxs("span",{className:s,style:{position:"relative",display:"inline-flex",flexShrink:0,...l},children:[e.jsx("span",{title:r,style:{width:u.diameter,height:u.diameter,borderRadius:"999px",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",background:t?void 0:`color-mix(in srgb, ${p} 18%, transparent)`,color:p,fontWeight:700,fontSize:u.diameter*.38,border:"1.5px solid var(--color-surface-border)"},children:t?e.jsx("img",{src:t,alt:r??"",style:{width:"100%",height:"100%",objectFit:"cover"}}):h}),o&&e.jsx("span",{style:{position:"absolute",bottom:0,right:0},children:e.jsx(Qn,{status:o,size:i,ring:!0})})]})}function Eo({members:t,max:n=4,size:r,color:o,className:i="",style:a}){const s=Al(r,{color:o}),l=t.slice(0,n),u=t.length-l.length,p=-(s.diameter*.28);return e.jsxs("div",{className:i,style:{display:"flex",alignItems:"center",...a},children:[l.map((h,f)=>e.jsx("span",{style:{marginLeft:f===0?0:p,position:"relative",zIndex:l.length-f,borderRadius:"999px",boxShadow:"0 0 0 2px var(--color-surface)"},children:e.jsx(pt,{src:h.src,name:h.name,initials:h.initials,size:r,color:o})},f)),u>0&&e.jsxs("span",{style:{marginLeft:p,zIndex:0,width:s.diameter,height:s.diameter,borderRadius:"999px",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--color-surface)",color:"var(--color-text-secondary)",fontWeight:700,fontSize:s.diameter*.32,boxShadow:"0 0 0 2px var(--color-surface)",border:"1.5px solid var(--color-surface-border)"},children:["+",u]})]})}const PA=["#6366F1","#22C55E","#F59E0B","#EF4444","#EC4899","#06B6D4"],ts=d.forwardRef(function({colors:n=PA,particleCount:r=80},o){const i=d.useRef(null),a=d.useRef([]),s=d.useRef(null);return d.useImperativeHandle(o,()=>({fire(l){const u=i.current;if(!u)return;const p=(l==null?void 0:l.x)??window.innerWidth/2,h=(l==null?void 0:l.y)??window.innerHeight/2;for(let f=0;f<r;f++){const g=Math.PI*2*f/r+Math.random()*.5,y=4+Math.random()*7;a.current.push({x:p,y:h,vx:Math.cos(g)*y,vy:Math.sin(g)*y-3,color:n[Math.floor(Math.random()*n.length)],size:4+Math.random()*4,rotation:Math.random()*360,vr:(Math.random()-.5)*20,life:1})}if(s.current===null){u.width=window.innerWidth,u.height=window.innerHeight;const f=u.getContext("2d"),g=()=>{f.clearRect(0,0,u.width,u.height);const y=[];for(const b of a.current)b.vy+=.25,b.x+=b.vx,b.y+=b.vy,b.rotation+=b.vr,b.life-=.012,b.life>0&&(f.save(),f.globalAlpha=Math.max(0,b.life),f.translate(b.x,b.y),f.rotate(b.rotation*Math.PI/180),f.fillStyle=b.color,f.fillRect(-b.size/2,-b.size/2,b.size,b.size*.6),f.restore(),y.push(b));a.current=y,y.length>0?s.current=requestAnimationFrame(g):s.current=null};s.current=requestAnimationFrame(g)}}}),[n,r]),e.jsx("canvas",{ref:i,style:{position:"fixed",inset:0,width:"100vw",height:"100vh",pointerEvents:"none",zIndex:99999}})});function Zl({open:t,onClose:n,anchorEl:r,children:o,placement:i="bottom",size:a,borderRadius:s,color:l,className:u=""}){const p=ri(a,{borderRadius:s,color:l}),h=d.useRef(null),[f,g]=d.useState({top:-9999,left:-9999});return d.useEffect(()=>{if(!t||!r||!h.current)return;const y=h.current,b=()=>{const x=r.getBoundingClientRect(),E=y.getBoundingClientRect(),w=8;let C=x.bottom+w,A=x.left;i==="top"&&(C=x.top-E.height-w),i==="left"&&(C=x.top,A=x.left-E.width-w),i==="right"&&(C=x.top,A=x.right+w),A=Math.min(Math.max(8,A),window.innerWidth-E.width-8),C=Math.min(Math.max(8,C),window.innerHeight-E.height-8),g({top:C,left:A})};b();const v=requestAnimationFrame(b);return window.addEventListener("scroll",b,{passive:!0,capture:!0}),window.addEventListener("resize",b,{passive:!0}),()=>{cancelAnimationFrame(v),window.removeEventListener("scroll",b,{capture:!0}),window.removeEventListener("resize",b)}},[t,r,i]),d.useEffect(()=>{if(!t)return;const y=v=>{var x;r!=null&&r.contains(v.target)||(x=h.current)!=null&&x.contains(v.target)||n()},b=v=>{v.key==="Escape"&&n()};return document.addEventListener("mousedown",y),document.addEventListener("keydown",b),()=>{document.removeEventListener("mousedown",y),document.removeEventListener("keydown",b)}},[t,r,n]),t?it.createPortal(e.jsx("div",{ref:h,className:`dui_popover ${u}`,style:{position:"fixed",top:f.top,left:f.left,zIndex:99999,borderRadius:p.borderRadius,background:"var(--color-surface-bg, var(--color-elevated))",border:"1px solid var(--color-surface-border)",boxShadow:"0 12px 40px rgba(0,0,0,.35)",padding:p.paddingY},children:o}),document.body):null}function Fo({content:t,children:n,placement:r="top",delay:o=300,size:i,color:a,disabled:s=!1}){const l=ri(i,{color:a}),[u,p]=d.useState(!1),[h,f]=d.useState({top:-9999,left:-9999}),g=d.useRef(null),y=d.useRef(null),b=d.useRef(null),v=()=>{s||(b.current=setTimeout(()=>p(!0),o))},x=()=>{b.current&&clearTimeout(b.current),p(!1)};d.useEffect(()=>{if(!u||!g.current||!y.current)return;const C=g.current.getBoundingClientRect(),A=y.current.getBoundingClientRect(),D=6;let k=C.top-A.height-D,N=C.left+C.width/2-A.width/2;r==="bottom"&&(k=C.bottom+D),r==="left"&&(k=C.top+C.height/2-A.height/2,N=C.left-A.width-D),r==="right"&&(k=C.top+C.height/2-A.height/2,N=C.right+D),N=Math.min(Math.max(4,N),window.innerWidth-A.width-4),k=Math.min(Math.max(4,k),window.innerHeight-A.height-4),f({top:k,left:N})},[u,r]);const E=n.props,w=d.cloneElement(n,{ref:g,onMouseEnter:C=>{var A;v(),(A=E.onMouseEnter)==null||A.call(E,C)},onMouseLeave:C=>{var A;x(),(A=E.onMouseLeave)==null||A.call(E,C)},onFocus:C=>{var A;v(),(A=E.onFocus)==null||A.call(E,C)},onBlur:C=>{var A;x(),(A=E.onBlur)==null||A.call(E,C)}});return e.jsxs(e.Fragment,{children:[w,u&&t&&it.createPortal(e.jsx("div",{ref:y,className:"dui_tooltip",role:"tooltip",style:{position:"fixed",top:h.top,left:h.left,zIndex:99999,background:"var(--color-elevated, #1f2430)",color:"#fff",fontSize:l.fontSize,padding:"5px 9px",borderRadius:6,boxShadow:"0 6px 20px rgba(0,0,0,.3)",maxWidth:240,pointerEvents:"none"},children:t}),document.body)]})}function ns({open:t,onClose:n,edge:r="right",title:o,children:i,size:a=320,duiSize:s,className:l=""}){const u=ri(s),p=r==="left"||r==="right";return d.useEffect(()=>{if(!t)return;const h=f=>{f.key==="Escape"&&n()};return document.addEventListener("keydown",h),()=>document.removeEventListener("keydown",h)},[t,n]),t?it.createPortal(e.jsx("div",{className:"dui_drawer__backdrop",onClick:n,children:e.jsxs("div",{className:`dui_drawer__panel dui_drawer__panel--${r} ${l}`,onClick:h=>h.stopPropagation(),style:{[p?"width":"height"]:typeof a=="number"?`${a}px`:a,background:"var(--color-surface)"},children:[o&&e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:`${u.paddingY} ${u.paddingX}`,borderBottom:"1px solid var(--color-surface-border)"},children:[e.jsx("span",{style:{fontSize:u.headerFontSize,fontWeight:700,color:"var(--color-text-primary)"},children:o}),e.jsx("button",{type:"button",onClick:n,"aria-label":"Close",style:{display:"flex",border:"none",background:"transparent",color:"var(--color-text-muted)",cursor:"pointer"},children:e.jsx($t,{size:15})})]}),e.jsx("div",{style:{flex:1,overflow:"auto",padding:u.paddingX},children:i})]})}),document.body):null}function rs({open:t,onClose:n,title:r,items:o,cancelLabel:i="Cancel",size:a,className:s=""}){const l=ri(a);return t?it.createPortal(e.jsx("div",{className:"dui_actionsheet__backdrop",onClick:n,children:e.jsxs("div",{className:`dui_actionsheet__sheet ${s}`,onClick:u=>u.stopPropagation(),children:[e.jsxs("div",{className:"dui_actionsheet__group",children:[r&&e.jsx("div",{style:{padding:`10px ${l.paddingX}`,fontSize:l.fontSize,color:"var(--color-text-muted)",textAlign:"center",borderBottom:"1px solid var(--color-surface-border)"},children:r}),o.map((u,p)=>e.jsxs("button",{type:"button",disabled:u.disabled,onClick:()=>{u.onClick(),n()},className:"dui_actionsheet__item",style:{fontSize:l.headerFontSize,color:u.danger?"var(--color-error)":"var(--color-text-primary)",borderTop:p>0?"1px solid var(--color-surface-border)":"none"},children:[u.icon&&e.jsx("span",{style:{display:"flex"},children:u.icon}),u.label]},p))]}),e.jsx("button",{type:"button",onClick:n,className:"dui_actionsheet__cancel",style:{fontSize:l.headerFontSize},children:i})]})}),document.body):null}function os({open:t,onClose:n,title:r,children:o,heightRatio:i=.6,size:a,className:s=""}){const l=ri(a),u=d.useRef(null),p=d.useRef({startY:0,dy:0,dragging:!1}),[h,f]=d.useState(0),[g,y]=d.useState(!1);d.useEffect(()=>{t&&(f(0),y(!1))},[t]);const b=E=>{p.current={startY:E.clientY,dy:0,dragging:!0},E.target.setPointerCapture(E.pointerId)},v=E=>{if(!p.current.dragging)return;const w=Math.max(0,E.clientY-p.current.startY);p.current.dy=w,f(w)},x=()=>{var w;if(!p.current.dragging)return;p.current.dragging=!1;const E=((w=u.current)==null?void 0:w.offsetHeight)??300;p.current.dy>E*.3?(y(!0),setTimeout(n,180)):f(0)};return t?it.createPortal(e.jsx("div",{className:"dui_bottomsheet__backdrop",onClick:n,style:{opacity:g?0:1},children:e.jsxs("div",{ref:u,className:`dui_bottomsheet__sheet ${s}`,onClick:E=>E.stopPropagation(),style:{height:`${i*100}vh`,transform:`translateY(${g?"100%":`${h}px`})`,transition:p.current.dragging?"none":"transform 200ms ease-out"},children:[e.jsx("div",{className:"dui_bottomsheet__handle",onPointerDown:b,onPointerMove:v,onPointerUp:x,children:e.jsx("span",{className:"dui_bottomsheet__grip"})}),r&&e.jsx("div",{style:{padding:`0 ${l.paddingX} ${l.paddingY}`,fontSize:l.headerFontSize,fontWeight:700,color:"var(--color-text-primary)"},children:r}),e.jsx("div",{style:{flex:1,overflow:"auto",padding:`0 ${l.paddingX} ${l.paddingY}`},children:o})]})}),document.body):null}function Qc({open:t,steps:n,stepIndex:r,onNext:o,onPrev:i,onClose:a,size:s,color:l}){const u=ri(s,{color:l}),p=l??"var(--color-primary)",[h,f]=d.useState(null),g=n[r];if(d.useEffect(()=>{if(!t||!g)return;const x=()=>{const E=document.querySelector(g.target);f(E?E.getBoundingClientRect():null)};return x(),window.addEventListener("resize",x),window.addEventListener("scroll",x,!0),()=>{window.removeEventListener("resize",x),window.removeEventListener("scroll",x,!0)}},[t,g]),!t||!g)return null;const y=8,b=h?h.bottom+16:window.innerHeight/2,v=h?Math.min(Math.max(16,h.left),window.innerWidth-300):window.innerWidth/2-150;return it.createPortal(e.jsxs("div",{className:"dui_spotlight__overlay",children:[h&&e.jsx("div",{className:"dui_spotlight__cutout",style:{top:h.top-y,left:h.left-y,width:h.width+y*2,height:h.height+y*2,boxShadow:`0 0 0 3px ${p}, 0 0 0 9999px rgba(0,0,0,0.65)`}}),e.jsxs("div",{className:"dui_spotlight__tooltip",style:{top:b,left:v,borderRadius:u.borderRadius},children:[e.jsx("div",{style:{fontSize:u.headerFontSize,fontWeight:700,color:"var(--color-text-primary)",marginBottom:4},children:g.title}),e.jsx("div",{style:{fontSize:u.fontSize,color:"var(--color-text-secondary)",lineHeight:1.5,marginBottom:12},children:g.content}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx("div",{style:{display:"flex",gap:4},children:n.map((x,E)=>e.jsx("span",{className:"dui_spotlight__dot",style:{background:E===r?p:"var(--color-surface-border)"}},E))}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{type:"button",onClick:a,className:"dui_spotlight__btn dui_spotlight__btn--ghost",children:"Skip"}),r>0&&e.jsx("button",{type:"button",onClick:i,className:"dui_spotlight__btn dui_spotlight__btn--ghost",children:"Back"}),e.jsx("button",{type:"button",onClick:r===n.length-1?a:o,className:"dui_spotlight__btn",style:{background:p},children:r===n.length-1?"Done":"Next"})]})]})]})]}),document.body)}function is({icon:t,label:n,onClick:r,actions:o,position:i="bottom-right",size:a,color:s,className:l=""}){const u=_n(a,{color:s}),p=s??u.defaultColor??"var(--color-primary)",[h,f]=d.useState(!1),g=!!(o!=null&&o.length),y=parseInt(u.height,10)*1.5;return e.jsxs("div",{className:`dui_fab dui_fab--${i} ${l}`,children:[g&&h&&e.jsx("div",{className:"dui_fab__actions",children:o.map((b,v)=>e.jsxs("button",{type:"button",className:"dui_fab__action",style:{animationDelay:`${v*30}ms`},onClick:()=>{b.onClick(),f(!1)},children:[e.jsx("span",{className:"dui_fab__actionlabel",children:b.label}),e.jsx("span",{className:"dui_fab__actionicon",style:{background:p},children:b.icon})]},v))}),e.jsxs("button",{type:"button",className:"dui_fab__main",style:{height:y,minWidth:y,borderRadius:y/2,background:g&&h?"var(--color-error)":p,color:"var(--color-btn-primary-text, #fff)",paddingLeft:n?20:0,paddingRight:n?20:0},onClick:()=>g?f(b=>!b):r==null?void 0:r(),children:[e.jsx("span",{className:"dui_fab__icon",children:g?h?e.jsx($t,{size:20}):t??e.jsx(at,{size:20}):t??e.jsx(at,{size:20})}),n&&e.jsx("span",{style:{fontWeight:700,fontSize:u.fontSize,marginLeft:8},children:n})]})]})}function sa({items:t,onSelect:n,size:r,color:o,className:i=""}){const a=Cd(r,{activeColor:o}),s=a.activeColor??"var(--color-primary)",[l,u]=d.useState(null),p=a.iconSize*2.2,h=f=>{if(l===null)return 1;const g=Math.abs(f-l);return g===0?1.5:g===1?1.22:g===2?1.08:1};return e.jsx("div",{className:`dui_dock ${i}`,onMouseLeave:()=>u(null),children:t.map((f,g)=>{const y=h(g);return e.jsxs("button",{type:"button",title:f.label,onMouseEnter:()=>u(g),onClick:()=>n(f.id),className:"dui_dock__item",style:{width:p,height:p,transform:`scale(${y}) translateY(${y>1?-(y-1)*14:0}px)`,color:f.active?s:"var(--color-text-secondary)"},children:[f.icon,f.active&&e.jsx("span",{className:"dui_dock__dot",style:{background:s}})]},f.id)})})}const MA=200,Bf=45;function jA({items:t,onSelect:n,open:r,direction:o="up-left",color:i,radius:a=68,spread:s=54,angleStep:l=0,tileSize:u=44,className:p="",style:h}){const f=i??"var(--color-primary)",g=o==="up-left"?1:-1,[y,b]=d.useState(r),[v,x]=d.useState(!1),E=d.useRef(null);return d.useEffect(()=>{if(E.current&&clearTimeout(E.current),r){b(!0),x(!1);return}if(y)return x(!0),E.current=setTimeout(()=>{b(!1),x(!1)},MA+Math.max(t.length-1,0)*Bf),()=>{E.current&&clearTimeout(E.current)}},[r,t.length]),e.jsx("div",{className:`dui_fanstack dui_fanstack--${o==="up-left"?"left":"right"} ${p}`,"aria-hidden":!r,style:h,children:y&&t.map((w,C)=>{const A=(90+g*l*C)*(Math.PI/180),D=a+s*C,k=Math.cos(A)*D,N=Math.sin(A)*D,j=w.color??f;return e.jsxs("button",{type:"button",className:`dui_fanstack__item ${v?"dui_fanstack__item--closing":""}`,onClick:()=>n(w.id),tabIndex:v?-1:0,style:{transform:`translate(-50%, -50%) translate(${k}px, ${-N}px)`,animationDelay:`${(v?t.length-1-C:C)*Bf}ms`,"--dui-fan-accent":j},children:[e.jsx("span",{className:"dui_fanstack__tile",style:{width:u,height:u,color:j},children:w.icon}),e.jsx("span",{className:"dui_fanstack__label",children:w.label})]},w.id)})})}function Ta({items:t,maxVisible:n=4,size:r,color:o,className:i=""}){const a=Cd(r,{activeColor:o}),s=a.activeColor??"var(--color-primary)",[l,u]=d.useState(!1),h=!l&&t.length>n?[t[0],{label:"…",onClick:void 0,collapse:!0},...t.slice(t.length-(n-2))]:t;return e.jsx("nav",{className:i,"aria-label":"Breadcrumb",style:{display:"flex",alignItems:"center",flexWrap:"wrap",gap:4,fontSize:a.fontSize},children:h.map((f,g)=>{const y=g===h.length-1,b=f.collapse;return e.jsxs("span",{style:{display:"flex",alignItems:"center",gap:4},children:[b?e.jsx("button",{type:"button",onClick:()=>u(!0),style:{display:"flex",border:"none",background:"transparent",color:"var(--color-text-muted)",cursor:"pointer",padding:2},"aria-label":"Show all",children:e.jsx(Sn,{size:13})}):f.onClick&&!y?e.jsx("button",{type:"button",onClick:f.onClick,style:{border:"none",background:"transparent",color:"var(--color-text-muted)",cursor:"pointer",fontSize:a.fontSize,fontWeight:500,padding:0},children:f.label}):e.jsx("span",{style:{color:y?s:"var(--color-text-muted)",fontWeight:y?700:500},children:f.label}),!y&&e.jsx(lt,{size:11,style:{color:"var(--color-text-muted)",opacity:.5,flexShrink:0}})]},g)})})}function OA(t,n,r){const o=r*2+5;if(n<=o)return Array.from({length:n},(l,u)=>u+1);const i=Math.max(t-r,2),a=Math.min(t+r,n-1),s=[1];i>2&&s.push("ellipsis");for(let l=i;l<=a;l++)s.push(l);return a<n-1&&s.push("ellipsis"),s.push(n),s}function Ar({page:t,totalPages:n,onChange:r,siblingCount:o=1,size:i,color:a,className:s=""}){const l=Cd(i,{activeColor:a}),u=l.activeColor??"var(--color-primary)",p=OA(t,n,o),h=parseInt(l.itemHeight,10)*.82,f=g=>({display:"flex",alignItems:"center",justifyContent:"center",width:h,height:h,minWidth:h,borderRadius:l.borderRadius,border:"none",background:g?u:"transparent",color:g?"var(--color-btn-primary-text, #fff)":"var(--color-text-secondary)",fontSize:l.fontSize,fontWeight:g?700:500,cursor:"pointer"});return e.jsxs("nav",{className:s,style:{display:"flex",alignItems:"center",gap:2},"aria-label":"Pagination",children:[e.jsx("button",{type:"button",disabled:t<=1,onClick:()=>r(t-1),style:{...f(!1),opacity:t<=1?.35:1,cursor:t<=1?"not-allowed":"pointer"},"aria-label":"Previous page",children:e.jsx(Yo,{size:l.iconSize})}),p.map((g,y)=>g==="ellipsis"?e.jsx("span",{style:{width:h,textAlign:"center",color:"var(--color-text-muted)",fontSize:l.fontSize},children:"…"},`e${y}`):e.jsx("button",{type:"button",onClick:()=>r(g),style:f(g===t),children:g},g)),e.jsx("button",{type:"button",disabled:t>=n,onClick:()=>r(t+1),style:{...f(!1),opacity:t>=n?.35:1,cursor:t>=n?"not-allowed":"pointer"},"aria-label":"Next page",children:e.jsx(lt,{size:l.iconSize})})]})}const zA={xxs:80,xs:100,sm:140,md:200,lg:280,xl:360,xxl:440,xxxl:520};function la({title:t,subtitle:n,actions:r,background:o,size:i,borderRadius:a,color:s,className:l="",style:u}){const p=On(i,{borderRadius:a,color:s}),h=i??"md",f=(o==null?void 0:o.startsWith("http"))||(o==null?void 0:o.startsWith("/"));return e.jsxs("div",{className:l,style:{minHeight:zA[h],display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",padding:p.padding,gap:p.gap,borderRadius:p.borderRadius,boxSizing:"border-box",background:o?f?`center/cover no-repeat url(${o})`:o:"var(--color-surface)",color:p.color??(o?"#fff":"var(--color-text-primary)"),...u},children:[e.jsx("div",{style:{fontSize:`calc(${p.fontSize} * 2.2)`,fontWeight:800,letterSpacing:"-0.02em"},children:t}),n&&e.jsx("div",{style:{fontSize:`calc(${p.fontSize} * 1.2)`,opacity:.8,maxWidth:480},children:n}),r&&e.jsx("div",{style:{display:"flex",gap:p.gap,marginTop:p.gap},children:r})]})}function ui({left:t,right:n,size:r,className:o="",style:i}){const a=On(r);return e.jsxs("div",{className:o,style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:a.gap,width:"100%",...i},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",gap:a.gap},children:t}),e.jsx("div",{style:{display:"flex",alignItems:"center",gap:a.gap},children:n})]})}function pi({media:t,children:n,actions:r,size:o,className:i="",style:a}){const s=On(o);return e.jsxs("div",{className:i,style:{display:"flex",alignItems:"flex-start",gap:s.gap,...a},children:[e.jsx("div",{style:{flexShrink:0},children:t}),e.jsx("div",{style:{flex:1,minWidth:0,fontSize:s.fontSize,color:"var(--color-text-primary)"},children:n}),r&&e.jsx("div",{style:{flexShrink:0,display:"flex",gap:s.gap},children:r})]})}function mw({nodes:t,vertical:n,gap:r}){return e.jsx("div",{style:{display:"flex",flexDirection:n?"column":"row",gap:r,width:"100%"},children:t.map((o,i)=>e.jsx("div",{style:{flex:o.weight??1,minWidth:0,display:"flex"},children:o.children?e.jsx(mw,{nodes:o.children,vertical:o.vertical,gap:r}):e.jsx("div",{style:{flex:1,minWidth:0},children:o.content})},i))})}function as({nodes:t,vertical:n=!1,size:r,className:o="",style:i}){const a=On(r);return e.jsx("div",{className:o,style:i,children:e.jsx(mw,{nodes:t,vertical:n,gap:a.gap})})}function Zn({value:t,onChange:n,prefix:r,suffix:o,placeholder:i,size:a,height:s,style:l,className:u="",...p}){const h=an(a),f=s??parseInt(h.height,10);return e.jsxs("div",{className:u,style:{height:f,flexShrink:0,display:"flex",alignItems:"center",gap:6,width:"100%",borderRadius:h.borderRadius,border:"1px solid var(--color-input-border)",background:"var(--color-input-bg)",paddingLeft:8,paddingRight:o?4:8,transition:"border-color 120ms",...l},children:[r&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0,color:"var(--color-text-muted)"},children:r}),e.jsx("input",{type:"text",value:t,onChange:g=>n(g.target.value),placeholder:i,style:{flex:1,minWidth:0,background:"transparent",border:"none",outline:"none",fontSize:h.fontSize,color:"var(--color-text-primary)",fontFamily:"inherit"},...p}),o&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0,color:"var(--color-text-muted)"},children:o})]})}function ca({heading:t,items:n,tabs:r,activeTab:o,onTabChange:i,searchable:a=!0,size:s,borderRadius:l,color:u,className:p="",style:h}){const f=On(s,{borderRadius:l,color:u}),g=u??"var(--color-primary)",[y,b]=d.useState(""),v=d.useMemo(()=>{const x=y.trim().toLowerCase();return x?n.filter(E=>E.label.toLowerCase().includes(x)):n},[n,y]);return e.jsxs("div",{className:p,style:{border:"1px solid var(--color-surface-border)",borderRadius:f.borderRadius,overflow:"hidden",...h},children:[e.jsx("div",{style:{padding:"10px 14px",fontWeight:700,fontSize:`calc(${f.fontSize} * 1.15)`,color:"var(--color-text-primary)",background:"var(--color-surface)",borderBottom:"1px solid var(--color-surface-border)"},children:t}),r&&r.length>0&&e.jsx("div",{style:{display:"flex",borderBottom:"1px solid var(--color-surface-border)"},children:r.map(x=>e.jsx("button",{type:"button",onClick:()=>i==null?void 0:i(x.id),style:{flex:1,padding:"8px 0",border:"none",background:"transparent",fontSize:f.fontSize,fontWeight:x.id===o?700:500,color:x.id===o?g:"var(--color-text-muted)",borderBottom:x.id===o?`2px solid ${g}`:"2px solid transparent",cursor:"pointer"},children:x.label},x.id))}),a&&e.jsx("div",{style:{padding:8,borderBottom:"1px solid var(--color-surface-border)"},children:e.jsx(Zn,{value:y,onChange:b,placeholder:"Filter…",size:s,style:{width:"100%"}})}),e.jsxs("div",{children:[v.map(x=>e.jsxs("button",{type:"button",onClick:x.onClick,style:{display:"flex",alignItems:"center",gap:8,width:"100%",textAlign:"left",padding:"8px 14px",border:"none",borderBottom:"1px solid var(--color-surface-border)",background:x.active?`color-mix(in srgb, ${g} 10%, transparent)`:"transparent",fontSize:f.fontSize,fontWeight:x.active?700:500,color:x.active?g:"var(--color-text-secondary)",cursor:"pointer"},children:[x.icon,x.label]},x.value)),v.length===0&&e.jsx("div",{style:{padding:16,textAlign:"center",fontSize:f.fontSize,color:"var(--color-text-muted)"},children:"No matches"})]})]})}function da({brand:t,links:n=[],right:r,size:o,color:i,className:a="",style:s}){const l=On(o,{color:i}),u=l.color??"var(--color-primary)",[p,h]=d.useState(!1);return e.jsxs("div",{className:a,style:{position:"relative",background:"var(--color-surface)",borderBottom:"1px solid var(--color-surface-border)",...s},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:`0 ${l.padding}`,height:52},children:[e.jsx("div",{style:{fontWeight:800,fontSize:`calc(${l.fontSize} * 1.2)`,color:"var(--color-text-primary)"},children:t}),e.jsx("div",{className:"dui_navbar__links",style:{display:"flex",alignItems:"center",gap:l.gap},children:n.map(f=>e.jsx("button",{type:"button",onClick:f.onClick,style:{border:"none",background:"transparent",cursor:"pointer",fontSize:l.fontSize,fontWeight:f.active?700:500,color:f.active?u:"var(--color-text-secondary)",padding:"6px 0"},children:f.label},f.id))}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[r,e.jsxs("button",{type:"button",className:"dui_navbar__burger",onClick:()=>h(f=>!f),"aria-label":"Toggle menu",style:{display:"none",flexDirection:"column",gap:3,border:"none",background:"transparent",cursor:"pointer",padding:6},children:[e.jsx("span",{style:{width:18,height:2,background:"var(--color-text-primary)",borderRadius:1}}),e.jsx("span",{style:{width:18,height:2,background:"var(--color-text-primary)",borderRadius:1}}),e.jsx("span",{style:{width:18,height:2,background:"var(--color-text-primary)",borderRadius:1}})]})]})]}),p&&e.jsx("div",{style:{display:"flex",flexDirection:"column",padding:l.padding,gap:6,borderTop:"1px solid var(--color-surface-border)"},children:n.map(f=>e.jsx("button",{type:"button",onClick:f.onClick,style:{textAlign:"left",border:"none",background:"transparent",cursor:"pointer",fontSize:l.fontSize,color:f.active?u:"var(--color-text-secondary)",fontWeight:f.active?700:500},children:f.label},f.id))})]})}function ss({children:t,offsetTop:n=0,onStickyChange:r,className:o="",style:i}){const a=d.useRef(null),[s,l]=d.useState(!1);return d.useEffect(()=>{const u=a.current;if(!u)return;const p=()=>{const f=u.getBoundingClientRect().top<=n;l(g=>(g!==f&&(r==null||r(f)),f))};return p(),window.addEventListener("scroll",p,{passive:!0,capture:!0}),window.addEventListener("resize",p),()=>{window.removeEventListener("scroll",p,{capture:!0}),window.removeEventListener("resize",p)}},[n,r]),e.jsx("div",{ref:a,className:o,style:{position:"sticky",top:n,zIndex:10,...i},"data-stuck":s,children:t})}function ls({links:t,size:n,color:r,offset:o=0,className:i="",style:a}){var f;const s=On(n,{color:r}),l=s.color??"var(--color-primary)",[u,p]=d.useState((f=t[0])==null?void 0:f.id);d.useEffect(()=>{const g=()=>{var b;let y=(b=t[0])==null?void 0:b.id;for(const v of t){const x=document.getElementById(v.id);x&&x.getBoundingClientRect().top-o<=8&&(y=v.id)}p(y)};return g(),window.addEventListener("scroll",g,{passive:!0,capture:!0}),()=>window.removeEventListener("scroll",g,{capture:!0})},[t,o]);const h=g=>{const y=document.getElementById(g);if(!y)return;const b=y.getBoundingClientRect().top+window.scrollY-o;window.scrollTo({top:b,behavior:"smooth"})};return e.jsx("nav",{className:i,style:{display:"flex",flexDirection:"column",gap:2,borderLeft:"2px solid var(--color-surface-border)",...a},children:t.map(g=>{const y=g.id===u;return e.jsx("button",{type:"button",onClick:()=>h(g.id),style:{textAlign:"left",border:"none",background:"transparent",cursor:"pointer",padding:"4px 0 4px 12px",marginLeft:-2,borderLeft:`2px solid ${y?l:"transparent"}`,fontSize:s.fontSize,fontWeight:y?700:500,color:y?l:"var(--color-text-muted)",transition:"color 120ms, border-color 120ms"},children:g.label},g.id)})})}function Co({children:t,offsetTop:n=0,size:r,className:o="",style:i}){const a=On(r),s=d.useRef(null),[l,u]=d.useState(!1);return d.useEffect(()=>{const p=s.current;if(!p)return;const h=()=>u(p.getBoundingClientRect().top<=n);return h(),window.addEventListener("scroll",h,{passive:!0,capture:!0}),()=>window.removeEventListener("scroll",h,{capture:!0})},[n]),e.jsx("div",{ref:s,className:o,style:{position:"sticky",top:n,zIndex:10,padding:`10px ${a.padding}`,background:"var(--color-surface)",borderBottom:"1px solid var(--color-surface-border)",boxShadow:l?"0 4px 12px rgba(0,0,0,.12)":"none",transition:"box-shadow 160ms",...i},children:t})}function wa({children:t,ratio:n,borderRadius:r,className:o="",style:i}){const a=kl(void 0,{borderRadius:r,aspectRatio:n});return e.jsx("div",{className:o,style:{position:"relative",width:"100%",aspectRatio:a.aspectRatio,borderRadius:a.borderRadius,overflow:"hidden",...i},children:e.jsx("div",{style:{position:"absolute",inset:0},children:t})})}function cs({children:t,columns:n=3,size:r,className:o="",style:i}){const a=On(r);return e.jsx("div",{className:o,style:{columnCount:n,columnGap:a.gap,...i},children:t.map((s,l)=>e.jsx("div",{style:{breakInside:"avoid",marginBottom:a.gap},children:s},l))})}function ds({children:t,direction:n="vertical",maxHeight:r,color:o,className:i="",style:a}){const s=o??"var(--color-primary)";return e.jsx("div",{className:`dui_scrollarea ${i}`,style:{overflowY:n!=="horizontal"?"auto":"hidden",overflowX:n!=="vertical"?"auto":"hidden",maxHeight:r,"--dui-scrollarea-accent":s},children:t})}function us({threshold:t=240,size:n,color:r,className:o=""}){const i=_n(n,{color:r}),a=r??i.defaultColor??"var(--color-primary)",[s,l]=d.useState(!1);d.useEffect(()=>{const p=()=>l(window.scrollY>t);return p(),window.addEventListener("scroll",p,{passive:!0,capture:!0}),()=>window.removeEventListener("scroll",p,{capture:!0})},[t]);const u=parseInt(i.height,10)*1.15;return s?e.jsx("button",{type:"button",className:o,onClick:()=>window.scrollTo({top:0,behavior:"smooth"}),"aria-label":"Back to top",style:{position:"fixed",bottom:24,right:24,zIndex:9e3,width:u,height:u,borderRadius:"999px",border:"none",background:a,color:"var(--color-btn-primary-text, #fff)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",boxShadow:"0 6px 20px rgba(0,0,0,.3)"},children:e.jsx(xd,{size:i.iconSize})}):null}function hi({children:t,text:n,angle:r=-22,gap:o=120,fontSize:i=14,color:a,opacity:s=.12,className:l="",style:u}){const p=a??"var(--color-text-primary)",h=d.useMemo(()=>{const f=`
+`,jf=typeof self<"u"&&self.Blob&&new Blob([lw],{type:"text/javascript;charset=utf-8"});function mA(t){let n;try{if(n=jf&&(self.URL||self.webkitURL).createObjectURL(jf),!n)throw"";const r=new Worker(n,{name:t==null?void 0:t.name});return r.addEventListener("error",()=>{(self.URL||self.webkitURL).revokeObjectURL(n)}),r}catch{return new Worker("data:text/javascript;charset=utf-8,"+encodeURIComponent(lw),{name:t==null?void 0:t.name})}finally{n&&(self.URL||self.webkitURL).revokeObjectURL(n)}}window.MonacoEnvironment={getWorker(t,n){return n==="json"?new pA:n==="html"||n==="handlebars"||n==="razor"?new hA:n==="typescript"||n==="javascript"?new mA:new uA}};Mh.defineTheme("daakia-dark",{base:"vs-dark",inherit:!0,rules:[{token:"string.key.json",foreground:"9CDCFE"},{token:"string.value.json",foreground:"CE9178"},{token:"number",foreground:"B5CEA8"},{token:"keyword.json",foreground:"569CD6"},{token:"string",foreground:"CE9178"},{token:"keyword",foreground:"569CD6"},{token:"comment",foreground:"6A9955"},{token:"type",foreground:"4EC9B0"},{token:"identifier",foreground:"9CDCFE"},{token:"variable",foreground:"9CDCFE"},{token:"constant",foreground:"4FC1FF"},{token:"keyword.js",foreground:"C586C0"},{token:"keyword.ts",foreground:"C586C0"},{token:"string.js",foreground:"CE9178"},{token:"string.ts",foreground:"CE9178"},{token:"number.js",foreground:"B5CEA8"},{token:"number.ts",foreground:"B5CEA8"},{token:"regexp",foreground:"D16969"},{token:"delimiter",foreground:"D4D4D4"},{token:"delimiter.bracket",foreground:"FFD700"},{token:"tag",foreground:"569CD6"},{token:"attribute.name",foreground:"9CDCFE"},{token:"attribute.value",foreground:"CE9178"},{token:"keyword.graphql",foreground:"C586C0"},{token:"keyword.control.graphql",foreground:"C586C0"},{token:"type.identifier.graphql",foreground:"E5C07B"},{token:"variable.graphql",foreground:"9CDCFE"},{token:"string.graphql",foreground:"CE9178"},{token:"comment.graphql",foreground:"6A9955"},{token:"annotation.graphql",foreground:"DCDCAA"},{token:"operator.graphql",foreground:"D4D4D4"},{token:"identifier.graphql",foreground:"D4D4D4"}],colors:{"editor.background":"#1e1e1e","editor.foreground":"#D4D4D4","editor.lineHighlightBackground":"#2a2a2a","editor.selectionBackground":"#264f78","editor.inactiveSelectionBackground":"#3a3d41","editorLineNumber.foreground":"#858585","editorLineNumber.activeForeground":"#C6C6C6","editorCursor.foreground":"#AEAFAD","editor.selectionHighlightBackground":"#ADD6FF26","editorIndentGuide.background":"#404040","editorIndentGuide.activeBackground":"#707070","editorBracketMatch.background":"#0064001a","editorBracketMatch.border":"#888888","editorGutter.background":"#1e1e1e","editorWidget.background":"#252526","editorSuggestWidget.background":"#252526","editorSuggestWidget.border":"#454545","editorSuggestWidget.selectedBackground":"#04395e","list.hoverBackground":"#2a2d2e","input.background":"#3c3c3c",focusBorder:"#6366f1"}});jh.setCompilerOptions({target:Z_.ESNext,module:Q_.ESNext,allowNonTsExtensions:!0,allowJs:!0,checkJs:!0,strict:!1,noEmit:!0,esModuleInterop:!0,moduleResolution:Y_.NodeJs,jsx:X_.React});jh.setDiagnosticsOptions({noSemanticValidation:!1,noSyntaxValidation:!1});jh.setEagerModelSync(!0);ey.setEagerModelSync(!0);ey.setCompilerOptions({target:Z_.ESNext,module:Q_.ESNext,allowNonTsExtensions:!0,allowJs:!0,strict:!1,noEmit:!0,esModuleInterop:!0,moduleResolution:Y_.NodeJs,jsx:X_.React});Mh.defineTheme("daakia-light",{base:"vs",inherit:!0,rules:[{token:"string.key.json",foreground:"0451a5"},{token:"string.value.json",foreground:"a31515"},{token:"number",foreground:"09885a"},{token:"keyword.json",foreground:"0000ff"},{token:"string",foreground:"a31515"},{token:"keyword",foreground:"0000ff"},{token:"comment",foreground:"008000"},{token:"type",foreground:"267f99"},{token:"identifier",foreground:"001080"},{token:"variable",foreground:"001080"},{token:"constant",foreground:"0070c1"},{token:"keyword.js",foreground:"af00db"},{token:"keyword.ts",foreground:"af00db"},{token:"string.js",foreground:"a31515"},{token:"string.ts",foreground:"a31515"},{token:"number.js",foreground:"09885a"},{token:"number.ts",foreground:"09885a"},{token:"regexp",foreground:"c41a16"},{token:"delimiter",foreground:"000000"},{token:"delimiter.bracket",foreground:"000000"},{token:"tag",foreground:"800000"},{token:"attribute.name",foreground:"ff0000"},{token:"attribute.value",foreground:"0451a5"},{token:"keyword.graphql",foreground:"af00db"},{token:"type.identifier.graphql",foreground:"267f99"},{token:"variable.graphql",foreground:"001080"},{token:"string.graphql",foreground:"a31515"},{token:"comment.graphql",foreground:"008000"},{token:"operator.graphql",foreground:"000000"},{token:"identifier.graphql",foreground:"000000"}],colors:{"editor.background":"#ffffff","editor.foreground":"#000000","editor.lineHighlightBackground":"#f5f5f5","editor.selectionBackground":"#add6ff","editor.inactiveSelectionBackground":"#e5ebf1","editorLineNumber.foreground":"#237893","editorLineNumber.activeForeground":"#0b216f","editorCursor.foreground":"#000000","editor.selectionHighlightBackground":"#add6ff4d","editorIndentGuide.background1":"#d3d3d3","editorIndentGuide.activeBackground1":"#939393","editorGutter.background":"#ffffff","editorWidget.background":"#f3f3f3","editorSuggestWidget.background":"#f3f3f3","editorSuggestWidget.border":"#c8c8c8","editorSuggestWidget.selectedBackground":"#0060c0","list.hoverBackground":"#f0f0f0","input.background":"#ffffff","input.border":"#d1d5db",focusBorder:"#6366f1"}});Oh.config({monaco:ty});window.monaco=ty;FC(cA);WC(dA);GC();function Of(t){Mh.setTheme(t==="dark"?"daakia-dark":"daakia-light")}function an(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{height:`${or.input[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:Fa[o],gap:Qi[o],width:Zi(n.width??r.width),color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function _n(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{height:`${or.button[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:Fa[o],gap:Qi[o],width:Zi(n.width??r.width),color:n.color??r.color,defaultColor:n.defaultColor??r.defaultColor,activeColor:n.activeColor??r.activeColor,fontStyle:n.fontStyle??r.fontStyle}}function Cd(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"8px":o==="md"?"10px":o==="lg"?"12px":"16px";return{itemHeight:`${or.nav[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),gap:Qi[o],paddingX:a,color:n.color??r.color,activeColor:n.activeColor??r.activeColor,fontStyle:n.fontStyle??r.fontStyle}}function ea(t,n={}){const r=mt(),o=t??r.size;return{height:`${Wh[o]}px`,fontSize:o==="sm"?"9px":o==="md"?"10px":o==="lg"?"11px":"12px",paddingX:o==="sm"?"5px":o==="md"?"7px":o==="lg"?"9px":"11px",borderRadius:gn(n.borderRadius??r.borderRadius,Gh.full),color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function mp(t,n={}){const r=mt(),o=t??r.size;return{..._y[o],fontSize:Vt[o],activeColor:n.activeColor??r.activeColor,color:n.color??r.color}}function cw(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"8px":o==="md"?"10px":o==="lg"?"12px":"14px",s=o==="sm"?"5px":o==="md"?"6px":o==="lg"?"7px":"8px";return{itemHeight:`${or.menu[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:a,gap:s,color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function Ad(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"10px":o==="md"?"12px":o==="lg"?"14px":"18px";return{height:`${or.tab[o]}px`,fontSize:Vt[o],gap:Qi[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:a,width:Zi(n.width??r.width),color:n.color??r.color,activeColor:n.activeColor??r.activeColor,fontStyle:n.fontStyle??r.fontStyle}}function ao(t,n={}){const r=mt(),o=t??r.size,i=o==="sm"?"8px":o==="md"?"10px":o==="lg"?"12px":"14px";return{rowHeight:`${or.table[o]}px`,headerFontSize:o==="sm"||o==="md"?"9px":"10px",cellFontSize:Vt[o],paddingX:i,color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function Bt(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"4px":o==="md"?"6px":o==="lg"?"8px":"10px";return{fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),gap:a,color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function ri(t,n={}){const r=mt(),o=t??r.size,i={xxs:"4px",xs:"5px",sm:"6px",md:"8px",lg:"10px",xl:"12px",xxl:"14px",xxxl:"16px"};return{fontSize:Vt[o],borderRadius:gn(n.borderRadius??r.borderRadius,i[o]),headerFontSize:o==="sm"?"12px":o==="md"?"13px":o==="lg"?"14px":"15px",paddingX:o==="sm"?"12px":o==="md"?"16px":o==="lg"?"20px":"24px",paddingY:o==="sm"?"10px":o==="md"?"12px":o==="lg"?"16px":"20px",color:n.color??r.color}}function Qt(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"4px 8px":o==="md"?"6px 10px":o==="lg"?"8px 12px":"10px 16px",s=o==="sm"?"6px":o==="md"?"8px":o==="lg"?"10px":"12px";return{fontSize:Vt[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),padding:a,gap:s,color:n.color??r.color,fontStyle:n.fontStyle??r.fontStyle}}function so(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{height:`${or.input[o]}px`,fontSize:Vt[o],iconSize:ni[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:Fa[o],gap:Qi[o],width:Zi(n.width??r.width),color:n.color??r.color,itemPy:yy[o]}}function fp(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{cellSize:hy[o],ringDiameter:Vh[o],fontSize:Vt[o],gap:Qi[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),paddingX:Fa[o],width:Zi(n.width??r.width),color:n.color??r.color}}function lo(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{thickness:my[o],ringDiameter:Vh[o],badgeSize:Wh[o],fontSize:Vt[o],gap:Qi[o],paddingX:Fa[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),width:Zi(n.width??r.width),color:n.color??r.color}}function Al(t,n={}){const r=mt(),o=t??r.size;return{diameter:fy[o],dotSize:gy[o],fontSize:Vt[o],color:n.color??r.color,activeColor:n.activeColor??r.activeColor}}function On(t,n={}){const r=mt(),o=t??r.size,i=xr[o],a=o==="sm"?"12px":o==="md"?"16px":o==="lg"?"24px":"32px";return{fontSize:Vt[o],gap:Qi[o],padding:a,borderRadius:gn(n.borderRadius??r.borderRadius,i),width:Zi(n.width??r.width),color:n.color??r.color}}function kl(t,n={}){const r=mt(),o=t??r.size,i=xr[o];return{fontSize:Vt[o],borderRadius:gn(n.borderRadius??r.borderRadius,i),aspectRatio:n.aspectRatio??16/9,color:n.color??r.color}}const fA={height:"16px",px:"5px",fontSize:"9px"};function ce({label:t,icon:n,color:r,bg:o,size:i,rounded:a=!0,onClick:s,active:l=!1,className:u="",style:p}){const h=i==="xs",f=ea(h?"sm":i),{height:g,px:y,fontSize:b}=h?fA:{height:f.height,px:f.paddingX,fontSize:f.fontSize},v=r||"var(--color-primary)",x=a?"9999px":"4px",E=l?v:o||`color-mix(in srgb, ${v} 12%, transparent)`,w=l?"var(--color-chip-active-text)":v,C=`color-mix(in srgb, ${v} 30%, transparent)`;return e.jsxs("span",{className:`inline-flex items-center font-semibold tracking-wide select-none ${s?"cursor-pointer":""} ${u}`,style:{height:g,paddingLeft:y,paddingRight:y,gap:n?"5px":0,fontSize:b,borderRadius:x,background:E,color:w,border:`1px solid ${C}`,lineHeight:1,whiteSpace:"nowrap",transition:"all 120ms ease",...p},onClick:s,children:[n&&e.jsx("span",{style:{display:"inline-flex",flexShrink:0},children:n}),t]})}function gA({command:t,size:n,color:r,copiedLabel:o="copied ✓",copyable:i=!0,className:a="",style:s}){const l=_n(n),[u,p]=d.useState(!1),h=d.useRef(void 0),f=()=>{if(i)try{navigator.clipboard.writeText(t),p(!0),clearTimeout(h.current),h.current=setTimeout(()=>p(!1),1500)}catch{}},g=r||l.color||"var(--color-text-primary)";return e.jsx("button",{type:"button",onClick:f,title:i?"Copy command":void 0,className:`dui_command_chip inline-flex items-center select-none ${i?"cursor-pointer":"cursor-default"} ${a}`,style:{height:l.height,paddingLeft:l.paddingX,paddingRight:l.paddingX,fontSize:l.fontSize,borderRadius:l.borderRadius,fontFamily:"var(--dui-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)",border:"1px solid var(--color-elevated-border, var(--color-btn-secondary-border, #374151))",background:"var(--color-elevated, var(--color-btn-secondary-bg, #111827))",color:u?"var(--color-success, #059669)":g,whiteSpace:"nowrap",...s},children:u?o:t})}function B({variant:t="secondary",size:n="default",rounded:r=!0,iconLeft:o,iconRight:i,loading:a=!1,accentColor:s,label:l,children:u,disabled:p,style:h,className:f="",width:g,borderRadius:y,color:b,defaultColor:v,activeColor:x,fontStyle:E,...w}){const C=_n(n==="default"?void 0:n,{width:g,borderRadius:y,color:b,defaultColor:v,activeColor:x,fontStyle:E}),A=s||C.defaultColor||"var(--color-btn-primary-bg)",D=r?C.borderRadius:"0px",k=p||a,N=(()=>{switch(t){case"primary":return{color:C.color||"var(--color-btn-primary-text, #fff)",border:"1px solid transparent"};case"danger":return{color:C.color||"var(--color-btn-danger-text, #fff)",border:"1px solid transparent"};case"ghost":return{color:C.color||s||"var(--color-text-secondary)",border:"1px solid transparent"};case"accent":return{color:C.color||s||"var(--color-text-primary)",border:`1px solid ${s?`color-mix(in srgb, ${s} 25%, transparent)`:"var(--color-btn-secondary-border)"}`};default:return{color:C.color||"var(--color-text-primary)",border:"1px solid var(--color-btn-secondary-border)"}}})(),j=t==="primary"?{"--dui-btn-bg":A,"--dui-btn-hover-bg":s||C.defaultColor?`color-mix(in srgb, ${A} 80%, black)`:"var(--color-btn-primary-hover)"}:t==="ghost"&&s?{"--dui-ghost-hover-bg":`color-mix(in srgb, ${s} 12%, transparent)`}:t==="accent"?{"--dui-accent-bg":s?`color-mix(in srgb, ${s} 12%, transparent)`:"var(--color-btn-ghost-hover)","--dui-accent-hover-bg":s?`color-mix(in srgb, ${s} 20%, transparent)`:"var(--color-btn-secondary-hover)"}:{};return e.jsxs("button",{type:"button",disabled:k,className:`dui_button dui_button--${t} inline-flex items-center justify-center font-medium cursor-pointer select-none ${f}`,style:{height:C.height,width:C.width!=="auto"?C.width:void 0,paddingLeft:C.paddingX,paddingRight:C.paddingX,fontSize:C.fontSize,gap:C.gap,borderRadius:D,fontStyle:C.fontStyle,opacity:k?.5:1,...j,...N,...h},...w,children:[a?e.jsx(cc,{size:C.iconSize}):o,l??u,!a&&i]})}function _A({options:t,value:n,onChange:r,size:o="sm",accentColor:i,className:a,style:s}){const l=or.tab[o],u=Vt[o],p=Fa[o];return e.jsx("div",{className:a,style:{display:"inline-flex",height:l,borderRadius:6,border:"1px solid var(--color-btn-secondary-border, rgba(255,255,255,0.12))",overflow:"hidden",background:"var(--color-btn-secondary-bg, rgba(255,255,255,0.04))",flexShrink:0,...s},children:t.map(h=>{const f=h.id===n;return e.jsxs("button",{type:"button",onClick:()=>r(h.id),style:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:4,height:"100%",padding:`0 ${p}`,fontSize:u,fontWeight:600,lineHeight:1,whiteSpace:"nowrap",background:f?i??"var(--color-primary, #7c3aed)":"transparent",color:f?"#fff":"var(--color-text-muted)",border:"none",cursor:"pointer",transition:"background 120ms, color 120ms",fontFamily:"inherit"},children:[h.icon,h.label]},h.id)})})}const zf={default:"26px",xs:"20px",sm:"22px",md:"28px",lg:"32px",xl:"36px"};function fe({icon:t,size:n="default",rounded:r=!0,tooltip:o,variant:i="ghost",accentColor:a,activeColor:s,active:l=!1,disabled:u,style:p,className:h="",borderRadius:f,color:g,...y}){const b=mt(),v=zf[n]??zf.default,x=a||b.defaultColor||"var(--color-primary)",E=s||b.activeColor||x,w=r?gn(f??b.borderRadius,"4px"):"0px",C=g||b.color,A=i==="filled"?l?E:`color-mix(in srgb, ${x} 12%, transparent)`:l?`color-mix(in srgb, ${E} 14%, transparent)`:"transparent",k={width:v,height:v,minWidth:v,borderRadius:w,border:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:u?"default":"pointer",opacity:u?.45:1,"--dui-icon-bg":A,"--dui-icon-color":i==="filled"?l?"var(--color-btn-primary-text, white)":C||x:l?E:C||(a?x:"var(--color-text-muted)"),"--dui-hover-bg":l?`color-mix(in srgb, ${E} 20%, transparent)`:"var(--color-iconbtn-bg-hover, var(--color-surface-hover))","--dui-hover-color":l?E:"var(--color-text-primary)",...p};return e.jsx("button",{type:"button",title:o,disabled:u,className:`dui_icon-button transition-all ${h}`,style:k,...y,children:t})}function At({label:t,icon:n,variant:r="secondary",size:o="default",rounded:i=!0,items:a,accentColor:s,disabled:l=!1,primaryDisabled:u=!1,onPrimaryClick:p,className:h="",align:f="auto"}){const[g,y]=d.useState(!1),b=d.useRef(null),v=s||"var(--color-primary)",x=_n(o==="default"?void 0:o),E=x.height,w=x.fontSize,C=x.paddingX,A=i?x.borderRadius:"0px",D=l||u,k=r==="primary",N=r==="danger",j=k?"var(--color-btn-primary-text, #fff)":N?"var(--color-btn-danger-text, #fff)":"var(--color-text-primary)",F=k?v:N?"var(--color-error)":r==="ghost"?"transparent":"var(--color-surface-hover)",O=k||N||r==="ghost"?"1px solid transparent":"1px solid var(--color-surface-border)",V=k||N?"rgba(0,0,0,0.12)":"var(--color-surface-active)";return e.jsxs(e.Fragment,{children:[e.jsxs("div",{ref:b,className:`inline-flex items-center ${h}`,style:{height:E,borderRadius:A,overflow:"hidden",opacity:l?.5:1,background:F,border:O,color:j,padding:0,transition:"background 120ms","--dui-hover-btn-bg":V},children:[e.jsxs("button",{type:"button",disabled:D,onClick:p,className:"dui_dropdown-button__label",style:{height:"100%",paddingLeft:C,paddingRight:"8px",display:"flex",alignItems:"center",gap:x.gap,fontSize:w,fontWeight:500,border:"none",color:"inherit",opacity:u&&!l?.5:1,transition:"opacity 120ms",cursor:D?"default":"pointer",fontFamily:"inherit"},children:[n&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0},children:n}),t]}),e.jsx("div",{style:{width:"1px",height:"60%",background:k||N?"rgba(255,255,255,.25)":"var(--color-surface-border)"}}),e.jsx("button",{type:"button",disabled:l,onClick:()=>!l&&y(Y=>!Y),className:"dui_dropdown-button__chevron",style:{height:"100%",paddingLeft:"6px",paddingRight:"7px",display:"flex",alignItems:"center",border:"none",color:"inherit",cursor:l?"default":"pointer"},children:e.jsx(nn,{size:10,style:{transition:"transform 140ms",transform:g?"rotate(180deg)":"rotate(0deg)"}})})]}),e.jsx(nr,{items:a,anchorEl:b.current,open:g,onClose:()=>y(!1),rounded:i,matchAnchorWidth:!1,width:"md",align:f})]})}const Me=d.forwardRef(function({size:n="default",rounded:r=!0,accentColor:o,error:i=!1,iconLeft:a,iconRight:s,prefixIcon:l,suffixIcon:u,masked:p=!1,maskIcon:h,naked:f=!1,style:g,className:y="",onFocus:b,onBlur:v,type:x,width:E,borderRadius:w,color:C,fontStyle:A,...D},k){const[N,j]=d.useState(!1),[F,O]=d.useState(!1),V=an(n==="default"?void 0:n,{width:E,borderRadius:w,color:C,fontStyle:A}),Y=o||"var(--color-primary)",ee=r?V.borderRadius:"0px",le=l??a,ne=p?null:u??s,se=i?"var(--color-error)":N?Y:"var(--color-input-border)",q=f?{display:"inline-flex",alignItems:"center",height:V.height,width:V.width!=="auto"?V.width:void 0,border:"none",borderBottom:i?"1px solid color-mix(in srgb, var(--color-error) 60%, transparent)":"none",background:"transparent",boxShadow:"none",overflow:"hidden",...g}:{display:"inline-flex",alignItems:"center",height:V.height,width:V.width!=="auto"?V.width:void 0,borderRadius:ee,border:`1px solid ${se}`,background:"var(--color-input-bg)",transition:"border-color 140ms, box-shadow 140ms",boxShadow:N?`0 0 0 2px color-mix(in srgb, ${Y} 20%, transparent)`:"none",overflow:"hidden",...g},$=p?F?"text":"password":x??"text",te=F?(h==null?void 0:h.shown)??e.jsx(wl,{size:14}):(h==null?void 0:h.hidden)??e.jsx(El,{size:14});return e.jsxs("div",{style:q,className:y,children:[le&&e.jsx("span",{style:{paddingLeft:V.paddingX,display:"flex",alignItems:"center",color:f&&i?"var(--color-error)":"var(--color-text-muted)",flexShrink:0,transition:"color 140ms"},children:le}),e.jsx("input",{ref:k,type:$,style:{flex:1,height:"100%",paddingLeft:le?"6px":V.paddingX,paddingRight:p||ne?"6px":V.paddingX,fontSize:V.fontSize,background:"transparent",border:"none",outline:"none",color:f&&i?"var(--color-error)":V.color||"var(--color-text-primary)",fontStyle:V.fontStyle,minWidth:0,fontFamily:"inherit",caretColor:f&&i?"var(--color-error)":void 0},onFocus:ae=>{j(!0),b==null||b(ae)},onBlur:ae=>{j(!1),v==null||v(ae)},...D}),ne&&e.jsx("span",{style:{paddingRight:V.paddingX,display:"flex",alignItems:"center",color:"var(--color-text-muted)",flexShrink:0},children:ne}),p&&e.jsx("button",{type:"button",onClick:()=>O(ae=>!ae),style:{paddingRight:V.paddingX,display:"flex",alignItems:"center",background:"none",border:"none",cursor:"pointer",color:"var(--color-text-muted)",flexShrink:0},onMouseEnter:ae=>ae.currentTarget.style.color="var(--color-text-primary)",onMouseLeave:ae=>ae.currentTarget.style.color="",title:F?"Hide value":"Show value",children:te})]})}),yA=d.forwardRef(function({size:n="default",rounded:r=!0,accentColor:o,error:i=!1,rows:a=4,resize:s="none",style:l,className:u="",onFocus:p,onBlur:h,width:f,borderRadius:g,...y},b){const[v,x]=d.useState(!1),E=an(n==="default"?void 0:n,{width:f,borderRadius:g}),w=o||"var(--color-primary)",C=r?E.borderRadius:"0px",A=i?"var(--color-error)":v?w:"var(--color-input-border)";return e.jsx("textarea",{ref:b,rows:a,style:{width:E.width!=="auto"?E.width:"100%",padding:`${parseInt(E.paddingX)>0?"8px":"6px"} ${E.paddingX}`,fontSize:E.fontSize,fontFamily:"inherit",borderRadius:C,border:`1px solid ${A}`,background:"var(--color-input-bg)",color:"var(--color-text-primary)",outline:"none",resize:s,transition:"border-color 140ms, box-shadow 140ms",boxShadow:v?`0 0 0 2px color-mix(in srgb, ${w} 20%, transparent)`:"none",lineHeight:1.5,...l},className:u,onFocus:D=>{x(!0),p==null||p(D)},onBlur:D=>{x(!1),h==null||h(D)},...y})});function vA({value:t,placeholder:n="",onSave:r,multiline:o=!0,disabled:i=!1,className:a="",accentColor:s,tooltip:l="Double-click to edit",style:u}){const[p,h]=d.useState(!1),[f,g]=d.useState(t),[y,b]=d.useState(!1),v=d.useRef(null),x=s||"var(--color-primary)";d.useEffect(()=>{p||g(t)},[t,p]);const E=()=>{const A=v.current;A&&(A.style.height="auto",A.style.height=`${A.scrollHeight}px`)};d.useEffect(()=>{if(!p)return;E();const A=v.current;A==null||A.focus(),A==null||A.setSelectionRange(A.value.length,A.value.length)},[p]);const w=async()=>{const A=f.trim();if(h(!1),A!==t.trim()){b(!0);try{await r(A)}finally{b(!1)}}},C=()=>{g(t),h(!1)};return p?e.jsx("textarea",{ref:v,value:f,placeholder:n,rows:1,className:a,onChange:A=>{g(A.target.value),E()},onBlur:()=>void w(),onKeyDown:A=>{A.key==="Enter"&&!(o&&A.shiftKey)&&(A.preventDefault(),w()),A.key==="Escape"&&(A.preventDefault(),C())},style:{display:"block",width:"100%",boxSizing:"border-box",font:"inherit",fontSize:"inherit",lineHeight:"inherit",color:"inherit",textAlign:"inherit",background:"var(--color-input-bg)",border:`1px solid ${x}`,borderRadius:6,padding:"2px 6px",margin:"-3px -7px",outline:"none",resize:"none",overflow:"hidden",boxShadow:`0 0 0 2px color-mix(in srgb, ${x} 20%, transparent)`,...u}}):e.jsx("span",{className:a,title:i?void 0:l,style:{opacity:y?.55:void 0,cursor:i?void 0:"text",...u},onDoubleClick:i?void 0:()=>h(!0),children:t||n})}function bA(t){return t==="default"?"md":t}function Ff({label:t,color:n}){return e.jsx("span",{style:{fontSize:"8px",fontWeight:700,padding:"1px 4px",borderRadius:"3px",lineHeight:1,flexShrink:0,letterSpacing:"0.03em",backgroundColor:`color-mix(in srgb, ${n} 15%, transparent)`,color:n},children:t})}function St({options:t,value:n,onChange:r,size:o="default",rounded:i=!0,placeholder:a,accentColor:s,disabled:l=!1,className:u="",style:p,width:h,borderRadius:f}){const[g,y]=d.useState(!1),[b,v]=d.useState(!1),x=d.useRef(null),E=d.useRef(null),w=bA(o),C=so(w,{borderRadius:f}),A=s||"var(--color-primary)",D=i?C.borderRadius:"0px",k=t.find(V=>V.value===n&&!V.isHeader);d.useEffect(()=>{if(!g||!x.current||!E.current)return;const V=x.current,Y=E.current,ee=()=>{const ne=V.getBoundingClientRect(),se=8;Y.style.minWidth=ne.width+"px";const q=Y.scrollHeight||200;window.innerHeight-ne.bottom<q+12&&ne.top>q+12?Y.style.top=ne.top-q-4+"px":Y.style.top=ne.bottom+4+"px";const te=Math.max(Y.offsetWidth,ne.width);let ae=ne.left;ae+te>window.innerWidth-se&&(ae=ne.right-te),ae=Math.min(ae,window.innerWidth-te-se),ae=Math.max(se,ae),Y.style.left=ae+"px"};ee();const le=requestAnimationFrame(ee);return window.addEventListener("scroll",ee,{passive:!0,capture:!0}),window.addEventListener("resize",ee,{passive:!0}),()=>{cancelAnimationFrame(le),window.removeEventListener("scroll",ee,{capture:!0}),window.removeEventListener("resize",ee)}},[g]),d.useEffect(()=>{if(!g)return;const V=Y=>{var ee,le;(ee=x.current)!=null&&ee.contains(Y.target)||(le=E.current)!=null&&le.contains(Y.target)||y(!1)};return document.addEventListener("mousedown",V),()=>document.removeEventListener("mousedown",V)},[g]);const N=d.useCallback(V=>{r(V),y(!1)},[r]),j=V=>{if(l)return;if(!g){(V.key==="Enter"||V.key===" "||V.key==="ArrowDown")&&(V.preventDefault(),y(!0));return}const Y=t.filter(le=>!le.isHeader).findIndex(le=>le.value===n),ee=t.filter(le=>!le.isHeader);switch(V.key){case"ArrowDown":V.preventDefault(),N(ee[(Y+1)%ee.length].value);break;case"ArrowUp":V.preventDefault(),N(ee[(Y-1+ee.length)%ee.length].value);break;case"Escape":y(!1);break}},F=g||b?A:"var(--color-input-border)",O=g||b?`0 0 0 2px color-mix(in srgb, ${A} 20%, transparent)`:"none";return e.jsxs("div",{className:`relative inline-block ${u}`,style:{width:h,...p},onKeyDown:j,children:[e.jsxs("button",{ref:x,type:"button",disabled:l,onFocus:()=>v(!0),onBlur:()=>v(!1),onClick:()=>!l&&y(V=>!V),style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:C.gap,width:"100%",height:C.height,paddingLeft:C.paddingX,paddingRight:C.paddingX,fontSize:C.fontSize,background:"var(--color-input-bg)",border:`1px solid ${F}`,borderRadius:D,color:k?"var(--color-text-primary)":"var(--color-text-muted)",cursor:l?"default":"pointer",transition:"border-color 140ms, box-shadow 140ms",boxShadow:O,opacity:l?.5:1,fontFamily:"inherit",fontWeight:500,textAlign:"left"},"aria-haspopup":"listbox","aria-expanded":g,children:[(k==null?void 0:k.badge)&&!(k!=null&&k.icon)&&e.jsx(Ff,{label:k.badge.label,color:k.badge.color}),(k==null?void 0:k.icon)&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0},children:k.icon}),e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:k==null?void 0:k.color},children:(k==null?void 0:k.label)??a??n}),e.jsx(Td,{size:C.iconSize-2,style:{flexShrink:0,transition:"transform 140ms",transform:g?"rotate(180deg)":"rotate(0deg)",color:g?A:"var(--color-text-muted)"}})]}),g&&it.createPortal(e.jsx("div",{ref:E,role:"listbox",className:"dui_select__menu",style:{position:"fixed",zIndex:99999,minWidth:"100%",width:"max-content",maxHeight:"min(380px, 70vh)",overflowY:"auto",background:"var(--color-surface-bg, var(--color-elevated))",border:"1px solid var(--color-surface-border)",borderRadius:i?"7px":"0px",padding:"4px",boxShadow:"0 12px 40px rgba(0,0,0,.35)","--dui-select-accent":A},children:t.map((V,Y)=>V.isHeader?e.jsxs("div",{children:[Y>0&&e.jsx("div",{style:{height:"1px",background:"var(--color-surface-border)",margin:"3px 4px"}}),e.jsx("div",{style:{padding:`5px ${C.paddingX} 3px`,fontSize:"9px",fontWeight:700,textTransform:"uppercase",letterSpacing:"0.06em",color:"var(--color-text-muted)",userSelect:"none"},children:V.label})]},`${V.value}-${Y}`):e.jsxs("div",{role:"option","aria-selected":V.value===n,onClick:()=>N(V.value),className:`dui_select__option${V.value===n?" dui_select__option--selected":""}`,style:{display:"flex",alignItems:"center",gap:C.gap,padding:`${C.itemPy} ${C.paddingX}`,marginBottom:"2px",borderRadius:i?"5px":"0px",fontSize:C.fontSize,fontWeight:500,color:V.value===n?s||"var(--color-primary-light)":V.color||"var(--color-text-secondary)",cursor:"pointer"},children:[V.badge&&!V.icon&&e.jsx(Ff,{label:V.badge.label,color:V.badge.color}),V.icon&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0},children:V.icon}),e.jsx("span",{children:V.label})]},V.value))}),document.body)]})}const xA=/(\{\{[\w.\-]+\}\}|\$\{[\w.\-]+\})/g,SA=/(\$daakia_\{[\w.\-]+\}_\$)/g;function Ki(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(SA,'<span class="dui-var-token--escape">$1</span>').replace(xA,'<span class="dui-var-token">$1</span>')}function Au(t){const n=window.getSelection();if(!n||n.rangeCount===0)return 0;const r=n.getRangeAt(0),o=r.cloneRange();return o.selectNodeContents(t),o.setEnd(r.endContainer,r.endOffset),o.toString().length}const TA=400,wA=200;function dw(){let t=[],n=-1,r=0;return{reset(o,i){t=[{text:o,caret:i}],n=0,r=0},push(o,i){if(n>=0&&t[n].text===o){t[n]={text:o,caret:i};return}n<t.length-1&&(t=t.slice(0,n+1));const a=Date.now(),s=n>=0&&Math.abs(o.length-t[n].text.length)===1;n>0&&s&&a-r<TA?t[n]={text:o,caret:i}:(t.push({text:o,caret:i}),n=t.length-1,t.length>wA&&(t.shift(),n--)),r=a},undo(){return n<=0?null:(n-=1,r=0,t[n])},redo(){return n>=t.length-1?null:(n+=1,r=0,t[n])}}}function ku(t){return(t.metaKey||t.ctrlKey)&&!t.shiftKey&&t.key.toLowerCase()==="z"}function uw(t){const n=t.key.toLowerCase();return(t.metaKey||t.ctrlKey)&&t.shiftKey&&n==="z"||t.ctrlKey&&!t.metaKey&&n==="y"}function ic(t,n){const r=window.getSelection();if(!r)return;const o=document.createRange();let i=n;const a=s=>{var l;if(s.nodeType===Node.TEXT_NODE){const u=((l=s.textContent)==null?void 0:l.length)??0;return i<=u?(o.setStart(s,i),o.collapse(!0),!0):(i-=u,!1)}for(const u of Array.from(s.childNodes))if(a(u))return!0;return!1};a(t)||(o.selectNodeContents(t),o.collapse(!1)),r.removeAllRanges(),r.addRange(o)}const EA={xxs:44,xs:52,sm:64,md:80,lg:96,xl:112,xxl:128,xxxl:148};function Gn({selectValue:t,selectOptions:n,onSelectChange:r,inputValue:o,onInputChange:i,placeholder:a="Enter URL or paste text",size:s,disabled:l=!1,accentColor:u,selectWidth:p,suggestions:h=[],mockServers:f=[],onMockServerSelect:g,onKeyDown:y,suggestionMinWidth:b,suggestionZIndex:v=9998,width:x,borderRadius:E,color:w,fontStyle:C,className:A=""}){const D=mt(),k=s??D.size,N=an(s,{width:x,borderRadius:E,color:w,fontStyle:C}),j=p??EA[k],F=u??"var(--color-primary)",O=Math.max(Math.round(parseFloat(N.fontSize)*1.2*10)/10,16),V=Math.max(0,(parseFloat(N.height)-2-O)/2),[Y,ee]=d.useState(!1),[le,ne]=d.useState(!1),[se,q]=d.useState(!1),[$,te]=d.useState(-1),ae=d.useRef(null),me=d.useRef(null),he=d.useRef(null),Ce=d.useRef(!1),ue=d.useRef(!1),W=d.useRef(!1),K=d.useRef(null),Q=d.useRef(dw()),[X,pe]=d.useState({top:0,left:0,width:0}),[ye,De]=d.useState({top:0,left:0,width:0}),Oe=n.find(de=>de.value===t),nt=(Oe==null?void 0:Oe.color)??"var(--color-text-primary)";d.useEffect(()=>{const de=he.current;de&&(de.innerHTML=Ki(o),K.current=o,Q.current.reset(o,o.length))},[]),d.useEffect(()=>{const de=he.current;if(!de||K.current===o)return;K.current=o;const we=document.activeElement===de,Ke=we?Au(de):-1;de.innerHTML=Ki(o),we&&Ke>=0&&ic(de,Ke),Q.current.push(o,Ke>=0?Ke:o.length)},[o]);const Ye=d.useCallback((de,we)=>{const Ke=he.current;Ke&&(Ke.innerHTML=Ki(de),ic(Ke,Math.min(we,de.length)),K.current=de,i(de))},[i]),yt=d.useCallback(()=>{if(ue.current)return;const de=he.current;if(!de)return;const we=de.innerText.replace(/\n/g,""),Ke=Au(de);de.innerHTML=Ki(we),ic(de,Ke),K.current=we,Q.current.push(we,Ke),i(we)},[i]),Gt=de=>{const we=de.nativeEvent.inputType;if(we!=="historyUndo"&&we!=="historyRedo")return;if(de.preventDefault(),W.current){W.current=!1;return}const Ke=we==="historyUndo"?Q.current.undo():Q.current.redo();Ke&&Ye(Ke.text,Ke.caret)},rt=de=>{de.preventDefault();const we=de.clipboardData.getData("text/plain");document.execCommand("insertText",!1,we)},ft=d.useMemo(()=>{if(!h.length)return[];if(!o.trim())return[...new Set(h)].slice(0,8);const de=o.toLowerCase();return[...new Set(h.filter(we=>we.toLowerCase().includes(de)&&we!==o))].slice(0,8)},[o,h]),be=d.useMemo(()=>{if(!f.length)return[];if(!o.trim())return f.slice(0,8);const de=o.toLowerCase();return f.filter(we=>we.url.toLowerCase().includes(de)||we.name.toLowerCase().includes(de)).slice(0,8)},[o,f]),qe=()=>{if(l)return;const de=me.current;if(!de)return;const we=de.getBoundingClientRect();pe({top:we.bottom+4,left:we.left,width:Math.max(we.width,120)}),ee(Ke=>!Ke)};d.useEffect(()=>{if(!Y)return;const de=we=>{const Ke=we.target;!Ke.closest("[data-stiv-method]")&&!Ke.closest("[data-stiv-trigger]")&&ee(!1)};return document.addEventListener("mousedown",de),()=>document.removeEventListener("mousedown",de)},[Y]),d.useEffect(()=>{if(!Y)return;const de=()=>{const we=me.current;if(!we)return;const Ke=we.getBoundingClientRect();pe({top:Ke.bottom+4,left:Ke.left,width:Math.max(Ke.width,120)})};return window.addEventListener("scroll",de,{passive:!0,capture:!0}),window.addEventListener("resize",de,{passive:!0}),()=>{window.removeEventListener("scroll",de,{capture:!0}),window.removeEventListener("resize",de)}},[Y]),d.useEffect(()=>{if(!Ce.current)if((ft.length>0||be.length>0)&&le){const de=he.current;if(de){const we=de.getBoundingClientRect();De({top:we.bottom+4,left:we.left,width:Math.max(we.width,b??0)})}q(!0),te(-1)}else q(!1)},[ft,be,le]),d.useEffect(()=>{if(!se)return;const de=()=>{const we=he.current;if(!we)return;const Ke=we.getBoundingClientRect();De({top:Ke.bottom+4,left:Ke.left,width:Math.max(Ke.width,b??0)})};return window.addEventListener("scroll",de,{passive:!0,capture:!0}),window.addEventListener("resize",de,{passive:!0}),()=>{window.removeEventListener("scroll",de,{capture:!0}),window.removeEventListener("resize",de)}},[se]);const ut=de=>{Te(de),g==null||g(de)},Te=de=>{var we;Ce.current=!0,i(de),q(!1),te(-1),(we=he.current)==null||we.focus(),setTimeout(()=>{Ce.current=!1},150)},Ot=d.useMemo(()=>[...be.map(de=>de.url),...ft],[be,ft]),Zt=de=>{if(ku(de)||uw(de)){de.preventDefault(),W.current=!0;const we=ku(de)?Q.current.undo():Q.current.redo();we&&Ye(we.text,we.caret);return}if(de.key==="Enter"&&de.preventDefault(),se&&Ot.length>0){if(de.key==="ArrowDown"){de.preventDefault(),te(we=>Math.min(we+1,Ot.length-1));return}if(de.key==="ArrowUp"){de.preventDefault(),te(we=>Math.max(we-1,-1));return}if(de.key==="Enter"&&$>=0){de.preventDefault(),Te(Ot[$]);return}if(de.key==="Escape"){q(!1),te(-1);return}}y==null||y(de)},po=le||Y?F:"var(--color-input-border)";return e.jsxs(e.Fragment,{children:[e.jsxs("div",{ref:ae,className:A,style:{display:"flex",height:N.height,width:N.width,border:`1px solid ${po}`,borderRadius:N.borderRadius,background:"var(--color-input-bg)",opacity:l?.5:1,transition:"border-color 120ms",overflow:"visible",position:"relative"},children:[e.jsxs("div",{ref:me,"data-stiv-trigger":!0,onClick:qe,className:`dui_select-text__trigger${l?" dui_select-text__trigger--disabled":""}`,style:{display:"flex",alignItems:"center",gap:N.gap,padding:`0 ${N.paddingX}`,width:j,flexShrink:0,cursor:l?"not-allowed":"pointer",userSelect:"none",color:nt,fontWeight:700,fontSize:N.fontSize,letterSpacing:"0.02em",borderRadius:`calc(${N.borderRadius} - 1px) 0 0 calc(${N.borderRadius} - 1px)`},children:[e.jsx("span",{style:{flex:1,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:(Oe==null?void 0:Oe.label)??t}),e.jsx(Td,{size:N.iconSize-2,style:{flexShrink:0,color:"var(--color-text-muted)",transform:Y?"rotate(180deg)":"rotate(0deg)",transition:"transform 150ms ease"}})]}),e.jsx("div",{style:{width:1,alignSelf:"stretch",background:"var(--color-input-border)",flexShrink:0,margin:"4px 0"}}),e.jsxs("div",{style:{flex:1,minWidth:0,position:"relative",height:"100%"},children:[!o&&!le&&a&&e.jsx("span",{className:"dui_select-text__placeholder",style:{position:"absolute",left:N.paddingX,top:0,right:N.paddingX,lineHeight:N.height,pointerEvents:"none",fontSize:N.fontSize,color:"var(--color-text-muted)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:a}),e.jsx("div",{ref:he,contentEditable:!l,suppressContentEditableWarning:!0,spellCheck:!1,onInput:yt,onBeforeInput:Gt,onPaste:rt,onFocus:()=>ne(!0),onBlur:()=>setTimeout(()=>ne(!1),120),onKeyDown:Zt,onCompositionStart:()=>{ue.current=!0},onCompositionEnd:()=>{ue.current=!1,yt()},className:"dui_select-text__editor",style:{height:"100%",width:"100%",padding:`${V}px ${N.paddingX}`,boxSizing:"border-box",outline:"none",background:"transparent",fontSize:N.fontSize,lineHeight:`${O}px`,color:N.color??"var(--color-text-primary)",fontFamily:"inherit",fontStyle:N.fontStyle,whiteSpace:"nowrap",overflow:"hidden",cursor:l?"not-allowed":"text",caretColor:N.color??"var(--color-text-primary)"}})]})]}),Y&&it.createPortal(e.jsx("div",{"data-stiv-method":!0,style:{position:"fixed",top:X.top,left:X.left,minWidth:X.width,background:"var(--color-surface)",border:"1px solid var(--color-surface-border)",borderRadius:8,boxShadow:"0 8px 24px rgba(0,0,0,0.22)",zIndex:9999,padding:3,overflow:"hidden","--dui-stiv-accent":F},children:n.map(de=>{const we=de.value===t;return e.jsxs("div",{onMouseDown:Ke=>{Ke.preventDefault(),r(de.value),ee(!1)},className:`dui_select-text__option${we?" dui_select-text__option--selected":""}`,style:{display:"flex",alignItems:"center",gap:8,padding:`6px ${N.paddingX}`,marginBottom:"2px",borderRadius:5,cursor:"pointer",fontSize:N.fontSize,fontWeight:we?700:500,color:de.color??"var(--color-text-primary)"},children:[e.jsx("span",{style:{flex:1},children:de.label??de.value}),we&&e.jsx(Dt,{size:N.iconSize-2,style:{color:"var(--color-primary)",flexShrink:0}})]},de.value)})}),document.body),se&&(ft.length>0||be.length>0)&&it.createPortal(e.jsxs("div",{"data-stiv-suggestions":!0,style:{position:"fixed",top:ye.top,left:ye.left,width:ye.width,background:"var(--color-surface)",border:"1px solid var(--color-surface-border)",borderRadius:8,boxShadow:"0 8px 24px rgba(0,0,0,0.22)",zIndex:v,padding:3,overflow:"hidden","--dui-stiv-accent":F},children:[be.length>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{padding:"4px 10px 6px",borderBottom:"1px solid var(--color-surface-border)"},children:e.jsx("p",{style:{fontSize:"9.5px",fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--color-text-muted)"},children:"Mock Servers"})}),e.jsx("div",{style:{padding:"4px 3px 3px"},children:be.map((de,we)=>e.jsxs("div",{onMouseDown:Ke=>{Ke.preventDefault(),ut(de.url)},onMouseEnter:()=>te(we),onMouseLeave:()=>te(-1),className:`dui-stiv-sugg-item${we===$?" dui-stiv-sugg-item--active":""}`,style:{"--dui-stiv-accent":"var(--color-mock-server)"},children:[e.jsx(Lt,{size:14,style:{color:"var(--color-mock-server)",flexShrink:0}}),e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"monospace",color:"var(--color-mock-server)"},children:de.url}),e.jsx("span",{style:{fontSize:"10px",color:"var(--color-text-muted)",flexShrink:0},children:de.name})]},de.url))})]}),ft.length>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{padding:"4px 10px 6px",borderBottom:"1px solid var(--color-surface-border)",marginTop:be.length>0?4:0},children:e.jsx("p",{style:{fontSize:"9.5px",fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--color-text-muted)"},children:"Suggestions"})}),e.jsx("div",{style:{padding:"4px 3px 3px"},children:ft.map((de,we)=>{const Ke=be.length+we;return e.jsxs("div",{onMouseDown:Va=>{Va.preventDefault(),Te(de)},onMouseEnter:()=>te(Ke),onMouseLeave:()=>te(-1),className:`dui-stiv-sugg-item${Ke===$?" dui-stiv-sugg-item--active":""}`,children:[e.jsx(gt,{size:14,style:{color:"var(--color-text-muted)",flexShrink:0}}),e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"monospace"},children:de})]},de)})})]})]}),document.body)]})}const CA={pill:"full",rounded:"md",pointy:"none"};function yn({options:t,value:n,onChange:r,size:o,variant:i="pill",accentColor:a="var(--color-primary)",fullWidth:s,width:l,borderRadius:u,color:p,disabled:h=!1,className:f="",style:g}){const y=u??CA[i],b=Ad(o,{width:l,borderRadius:y,color:p}),v=d.useRef(null),[x,E]=d.useState({left:0,width:0}),[w,C]=d.useState(!1),A=d.useRef(!1),D=t.findIndex(O=>O.value===n),k=d.useCallback(()=>{const O=v.current;if(!O)return;const Y=O.querySelectorAll("button[data-seg]")[D];Y&&E({left:Y.offsetLeft,width:Y.offsetWidth})},[D]);d.useEffect(()=>{if(k(),A.current){C(!0);const O=setTimeout(()=>C(!1),360);return()=>clearTimeout(O)}A.current=!0},[n,D,t.length]),d.useEffect(()=>{const O=v.current;if(O){if(typeof ResizeObserver<"u"){const V=new ResizeObserver(()=>k());return V.observe(O),()=>V.disconnect()}return window.addEventListener("resize",k),()=>window.removeEventListener("resize",k)}},[k]);const N=d.useCallback(O=>{if(h)return;const V=t.filter(ee=>!ee.disabled);if(!V.length)return;const Y=V.findIndex(ee=>ee.value===n);O.key==="ArrowRight"?(O.preventDefault(),r(V[(Y+1)%V.length].value)):O.key==="ArrowLeft"&&(O.preventDefault(),r(V[(Y-1+V.length)%V.length].value))},[h,t,n,r]),j=3,F=i==="pointy"?b.borderRadius:`calc(${b.borderRadius} + ${j}px)`;return e.jsxs("div",{ref:v,role:"tablist",tabIndex:h?-1:0,onKeyDown:N,className:`dui_segctrl ${f}`,style:{display:"inline-flex",position:"relative",height:b.height,padding:j,borderRadius:F,backgroundColor:"var(--color-surface)",border:"1px solid var(--color-surface-border)",width:s?"100%":b.width,boxSizing:"border-box",flexShrink:0,opacity:h?.5:1,pointerEvents:h?"none":"auto",outline:"none",...g},children:[x.width>0&&e.jsx("div",{"aria-hidden":"true",className:`dui_segctrl__indicator${w?" dui_segctrl__indicator--bounce":""}`,style:{position:"absolute",top:j,left:x.left,width:x.width,height:`calc(100% - ${j*2}px)`,borderRadius:b.borderRadius,backgroundColor:`color-mix(in srgb, ${a} 22%, transparent)`,border:`1px solid color-mix(in srgb, ${a} 45%, transparent)`,boxSizing:"border-box",boxShadow:`0 1px 4px color-mix(in srgb, ${a} 15%, transparent)`}}),t.map(O=>{const V=O.value===n;return e.jsxs("button",{"data-seg":"1",type:"button",role:"tab","aria-selected":V,disabled:O.disabled,onClick:()=>!O.disabled&&O.value!==n&&r(O.value),className:"dui_segctrl__seg",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:b.gap,paddingLeft:b.paddingX,paddingRight:b.paddingX,fontSize:b.fontSize,fontWeight:V?700:500,height:"100%",border:"none",background:"transparent",color:V?a:b.color??"var(--color-text-secondary)",cursor:O.disabled?"not-allowed":"pointer",opacity:O.disabled?.35:1,position:"relative",zIndex:1,minWidth:0,userSelect:"none"},children:[O.icon,e.jsx("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:O.label})]},O.value)})]})}function yu({keyValue:t,value:n,badge:r,badgeColor:o,icon:i,masked:a=!1,onDelete:s,deleteTitle:l,showDescription:u=!1,className:p=""}){const[h,f]=d.useState(!1),g=a&&!h?"••••••••••••••••••••":n,y=["32px","1fr","1fr",u&&"1fr","32px"].filter(Boolean).join(" "),b={width:"100%",height:"28px",paddingLeft:"10px",paddingRight:"10px",borderRadius:"4px",fontSize:"12px",fontFamily:"inherit",display:"flex",alignItems:"center",overflow:"hidden",background:"color-mix(in srgb, var(--color-text-primary) 3%, transparent)",border:"1px dashed color-mix(in srgb, var(--color-text-primary) 12%, transparent)",color:"var(--color-text-muted)",cursor:"default",userSelect:"text"};return e.jsxs("div",{className:`dui_hidden-kv-item group ${p}`,style:{display:"grid",gridTemplateColumns:y,gap:"8px",alignItems:"center",minHeight:"28px"},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx("span",{style:{color:"var(--color-text-muted)",opacity:.55,display:"flex"},children:i??e.jsx(Xo,{size:13})})}),e.jsxs("div",{style:b,title:t,children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"monospace"},children:t}),r&&e.jsx("span",{style:{marginLeft:6,fontSize:9,padding:"1px 5px",borderRadius:99,flexShrink:0,background:`color-mix(in srgb, ${o??"var(--color-primary)"} 18%, transparent)`,color:o??"var(--color-primary)",fontWeight:700,letterSpacing:"0.03em"},children:r})]}),e.jsxs("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[e.jsx("div",{style:{...b,paddingRight:a?"28px":"10px",fontFamily:"monospace",width:"100%"},title:h?n:void 0,children:e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:g})}),a&&e.jsx("button",{type:"button",onClick:()=>f(v=>!v),className:"dui_hidden-kv-item__eye",style:{position:"absolute",right:6,top:"50%",transform:"translateY(-50%)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",padding:2,background:"transparent",border:"none"},title:h?"Hide value":"Reveal value",children:h?e.jsx(wl,{size:12}):e.jsx(El,{size:12})})]}),u&&e.jsx("div",{}),e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:s?e.jsx("button",{type:"button",onClick:s,title:l??"Remove",className:"dui_hidden-kv-item__delete opacity-0 group-hover:opacity-100",style:{display:"flex",alignItems:"center",justifyContent:"center",color:"var(--color-text-muted)",cursor:"pointer",padding:2,background:"transparent",border:"none"},children:e.jsx(ct,{size:13})}):e.jsx("div",{style:{width:24}})})]})}const Ud=["xxs","xs","sm","md","lg","xl","xxl","xxxl"];function Vi({options:t,value:n,onChange:r,size:o,accentColor:i,disabled:a=!1,direction:s="vertical",className:l="",style:u}){const p=mt(),h=o??p.size,f=i??p.activeColor??"var(--color-primary)",{box:g}=Bh[h],y=Ud[Math.max(0,Ud.indexOf(h)-1)],b=Vt[y],v=Vt[Ud[Math.max(0,Ud.indexOf(y)-1)]];return e.jsx("div",{role:"radiogroup",className:l,style:{display:"flex",flexDirection:s==="vertical"?"column":"row",gap:s==="vertical"?8:16,...u},children:t.map(x=>{const E=x.value===n,w=a||x.disabled;return e.jsxs("label",{style:{display:"flex",alignItems:x.description?"flex-start":"center",gap:8,cursor:w?"not-allowed":"pointer",opacity:w?.5:1},onClick:()=>!w&&r(x.value),children:[e.jsx("span",{style:{width:g,height:g,borderRadius:"999px",flexShrink:0,marginTop:x.description?2:0,display:"flex",alignItems:"center",justifyContent:"center",border:E?`2px solid ${f}`:"1.5px solid color-mix(in srgb, var(--color-text-primary) 28%, transparent)",transition:"border-color 120ms",boxSizing:"border-box"},children:E&&e.jsx("span",{style:{width:g*.5,height:g*.5,borderRadius:"999px",background:f}})}),e.jsxs("span",{style:{display:"flex",flexDirection:"column",gap:2},children:[e.jsx("span",{style:{fontSize:b,fontWeight:500,color:"var(--color-text-primary)",lineHeight:1.3},children:x.label}),x.description&&e.jsx("span",{style:{fontSize:v,color:"var(--color-text-muted)",lineHeight:1.4},children:x.description})]})]},x.value)})})}function Za({options:t,value:n,onChange:r,size:o,borderRadius:i,accentColor:a,columns:s=1,className:l="",style:u}){const p=Qt(o,{borderRadius:i}),h=a??p.color??"var(--color-primary)";return e.jsx("div",{className:l,style:{display:"grid",gridTemplateColumns:`repeat(${s}, 1fr)`,gap:p.gap,...u},children:t.map(f=>{const g=f.value===n;return e.jsxs("button",{type:"button",disabled:f.disabled,onClick:()=>r(f.value),style:{display:"flex",alignItems:"flex-start",gap:p.gap,padding:p.padding,borderRadius:p.borderRadius,border:`1.5px solid ${g?h:"var(--color-surface-border)"}`,background:g?`color-mix(in srgb, ${h} 8%, transparent)`:"var(--color-surface)",cursor:f.disabled?"not-allowed":"pointer",opacity:f.disabled?.5:1,textAlign:"left",transition:"border-color 140ms, background 140ms",fontFamily:"inherit",position:"relative"},children:[f.icon&&e.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,color:g?h:"var(--color-text-muted)"},children:f.icon}),e.jsxs("span",{style:{display:"flex",flexDirection:"column",gap:2,flex:1},children:[e.jsx("span",{style:{fontSize:p.fontSize,fontWeight:700,color:g?h:"var(--color-text-primary)"},children:f.label}),f.description&&e.jsx("span",{style:{fontSize:p.fontSize,color:"var(--color-text-muted)",lineHeight:1.4},children:f.description})]}),g&&e.jsx(An,{size:14,style:{color:h,flexShrink:0}})]},f.value)})})}function AA({filled:t,half:n,icon:r,size:o,color:i}){const a="color-mix(in srgb, var(--color-text-muted) 35%, transparent)",s=r==="star"?"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z":"M12 21s-7.5-4.5-10-9.2C.5 8.5 2.5 5 6 5c2 0 3.5 1 4 2 .5-1 2-2 4-2 3.5 0 5.5 3.5 4 6.8-2.5 4.7-10 9.2-10 9.2z",l=`dui-rating-half-${Math.random().toString(36).slice(2)}`;return e.jsxs("svg",{width:o,height:o,viewBox:"0 0 24 24",children:[n&&e.jsx("defs",{children:e.jsxs("linearGradient",{id:l,x1:"0",x2:"1",y1:"0",y2:"0",children:[e.jsx("stop",{offset:"50%",stopColor:i}),e.jsx("stop",{offset:"50%",stopColor:a})]})}),e.jsx("path",{d:s,fill:n?`url(#${l})`:t?i:a})]})}function Kr({value:t,onChange:n,max:r=5,allowHalf:o=!1,readOnly:i=!1,size:a,color:s,icon:l="star",className:u="",style:p}){const h=mt(),f=a??h.size,g=ni[f]*1.6,y=s??h.activeColor??"var(--color-warning)",[b,v]=d.useState(null),x=b??t,E=(C,A)=>{if(i||!n)return;let D=C+1;if(o){const k=A.currentTarget.getBoundingClientRect(),N=A.clientX-k.left<k.width/2;D=C+(N?.5:1)}n(D)},w=(C,A)=>{if(i)return;if(!o){v(C+1);return}const D=A.currentTarget.getBoundingClientRect(),k=A.clientX-D.left<D.width/2;v(C+(k?.5:1))};return e.jsx("div",{className:u,style:{display:"inline-flex",gap:2,...p},onMouseLeave:()=>v(null),children:Array.from({length:r},(C,A)=>{const D=x>=A+1,k=o&&!D&&x>=A+.5;return e.jsx("button",{type:"button",disabled:i,onClick:N=>E(A,N),onMouseMove:N=>w(A,N),style:{border:"none",background:"transparent",padding:1,cursor:i?"default":"pointer",display:"flex",lineHeight:0},"aria-label":`Rate ${A+1} of ${r}`,children:e.jsx(AA,{filled:D,half:k,icon:l,size:g,color:y})},A)})})}function Bi({value:t,onChange:n,onComplete:r,length:o=6,numeric:i=!0,disabled:a=!1,size:s,borderRadius:l,color:u,className:p="",style:h}){const f=an(s,{borderRadius:l,color:u}),g=u??"var(--color-primary)",y=d.useRef([]),b=Array.from({length:o},(A,D)=>t[D]??""),v=A=>{n(A),A.length===o&&!A.includes("")&&(r==null||r(A))},x=(A,D)=>{const k=b.slice();k[A]=D,v(k.join(""))},E=(A,D)=>{var j;const k=i?D.replace(/[^0-9]/g,""):D;if(!k){x(A,"");return}const N=k[k.length-1];x(A,N),A<o-1&&((j=y.current[A+1])==null||j.focus())},w=(A,D)=>{var k,N,j;D.key==="Backspace"?(b[A]?x(A,""):A>0&&((k=y.current[A-1])==null||k.focus(),x(A-1,"")),D.preventDefault()):D.key==="ArrowLeft"&&A>0?(N=y.current[A-1])==null||N.focus():D.key==="ArrowRight"&&A<o-1&&((j=y.current[A+1])==null||j.focus())},C=(A,D)=>{var O;D.preventDefault();const k=D.clipboardData.getData("text"),N=i?k.replace(/[^0-9]/g,""):k;if(!N)return;const j=b.slice();for(let V=0;V<N.length&&A+V<o;V++)j[A+V]=N[V];v(j.join(""));const F=Math.min(A+N.length,o-1);(O=y.current[F])==null||O.focus()};return e.jsx("div",{className:p,style:{display:"flex",gap:f.gap,...h},children:b.map((A,D)=>e.jsx("input",{ref:k=>{y.current[D]=k},type:"text",inputMode:i?"numeric":"text",maxLength:1,disabled:a,value:A,onChange:k=>E(D,k.target.value),onKeyDown:k=>w(D,k),onPaste:k=>C(D,k),onFocus:k=>k.target.select(),style:{width:f.height,height:f.height,fontSize:f.fontSize,textAlign:"center",borderRadius:f.borderRadius,border:`1.5px solid ${A?g:"var(--color-input-border)"}`,background:"var(--color-input-bg)",color:"var(--color-text-primary)",fontWeight:700,outline:"none",opacity:a?.5:1,transition:"border-color 140ms"}},D))})}const pw=[{code:"US",dialCode:"+1",label:"United States",flag:"🇺🇸"},{code:"GB",dialCode:"+44",label:"United Kingdom",flag:"🇬🇧"},{code:"IN",dialCode:"+91",label:"India",flag:"🇮🇳"},{code:"CA",dialCode:"+1",label:"Canada",flag:"🇨🇦"},{code:"AU",dialCode:"+61",label:"Australia",flag:"🇦🇺"},{code:"DE",dialCode:"+49",label:"Germany",flag:"🇩🇪"},{code:"FR",dialCode:"+33",label:"France",flag:"🇫🇷"},{code:"JP",dialCode:"+81",label:"Japan",flag:"🇯🇵"},{code:"SG",dialCode:"+65",label:"Singapore",flag:"🇸🇬"},{code:"AE",dialCode:"+971",label:"United Arab Emirates",flag:"🇦🇪"}];function ia({countryCode:t,onCountryChange:n,number:r,onNumberChange:o,countries:i=pw,placeholder:a="Phone number",disabled:s=!1,size:l,width:u,borderRadius:p,color:h,className:f="",style:g}){const y=an(l,{width:u,borderRadius:p,color:h}),b=i.map(v=>({value:v.code,label:`${v.flag??""} ${v.dialCode}`.trim()}));return e.jsxs("div",{className:f,style:{display:"flex",width:y.width,border:"1px solid var(--color-input-border)",borderRadius:y.borderRadius,background:"var(--color-input-bg)",overflow:"hidden",opacity:s?.5:1,pointerEvents:s?"none":"auto",boxSizing:"border-box",...g},children:[e.jsx(St,{options:b,value:t,onChange:n,size:l,style:{width:90,flexShrink:0},borderRadius:0,className:"dui_phoneinput__select"}),e.jsx("div",{style:{width:1,background:"var(--color-input-border)",flexShrink:0}}),e.jsx("input",{type:"tel",disabled:s,placeholder:a,value:r,onChange:v=>o(v.target.value.replace(/[^0-9\s-]/g,"")),style:{flex:1,minWidth:0,border:"none",outline:"none",background:"transparent",color:"var(--color-text-primary)",fontSize:y.fontSize,paddingLeft:y.paddingX,paddingRight:y.paddingX}})]})}const kA=["#EF4444","#F97316","#F59E0B","#EAB308","#84CC16","#22C55E","#10B981","#14B8A6","#06B6D4","#0EA5E9","#3B82F6","#6366F1","#8B5CF6","#A855F7","#D946EF","#EC4899","#F43F5E","#64748B"];function xo({value:t,onChange:n,swatches:r=kA,disabled:o=!1,size:i,width:a,borderRadius:s,className:l="",style:u}){const p=so(i,{width:a,borderRadius:s}),[h,f]=d.useState(!1),[g,y]=d.useState(t),b=d.useRef(null),v=d.useRef(null);d.useEffect(()=>y(t),[t]),d.useEffect(()=>{if(!h||!b.current||!v.current)return;const E=b.current,w=v.current,C=()=>{const D=E.getBoundingClientRect();w.style.top=`${D.bottom+6}px`,w.style.left=`${Math.min(D.left,window.innerWidth-w.offsetWidth-8)}px`};C();const A=requestAnimationFrame(C);return()=>cancelAnimationFrame(A)},[h]),d.useEffect(()=>{if(!h)return;const E=w=>{var C,A;(C=b.current)!=null&&C.contains(w.target)||(A=v.current)!=null&&A.contains(w.target)||f(!1)};return document.addEventListener("mousedown",E),()=>document.removeEventListener("mousedown",E)},[h]);const x=E=>{y(E),/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(E)&&n(E)};return e.jsxs("div",{className:`dui_colorpicker ${l}`,style:{display:"inline-block",...u},children:[e.jsxs("button",{ref:b,type:"button",disabled:o,onClick:()=>f(E=>!E),style:{display:"flex",alignItems:"center",gap:p.gap,height:p.height,paddingLeft:p.paddingX,paddingRight:p.paddingX,border:`1px solid ${h?"var(--color-primary)":"var(--color-input-border)"}`,borderRadius:p.borderRadius,background:"var(--color-input-bg)",cursor:o?"default":"pointer",opacity:o?.5:1},children:[e.jsx("span",{style:{width:p.iconSize+4,height:p.iconSize+4,borderRadius:4,background:t,border:"1px solid var(--color-surface-border)",flexShrink:0}}),e.jsx("span",{style:{fontSize:p.fontSize,color:"var(--color-text-primary)",fontWeight:500},children:t})]}),h&&it.createPortal(e.jsxs("div",{ref:v,className:"dui_colorpicker__menu",style:{position:"fixed",zIndex:99999},children:[e.jsx("div",{className:"dui_colorpicker__grid",children:r.map(E=>e.jsx("button",{type:"button",className:`dui_colorpicker__swatch${E.toLowerCase()===t.toLowerCase()?" dui_colorpicker__swatch--active":""}`,style:{background:E},onClick:()=>{n(E),f(!1)},"aria-label":E},E))}),e.jsxs("div",{className:"dui_colorpicker__hexrow",children:[e.jsx("input",{type:"color",value:/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(g)?g:"#000000",onChange:E=>x(E.target.value),className:"dui_colorpicker__native"}),e.jsx("input",{type:"text",value:g,onChange:E=>x(E.target.value),className:"dui_colorpicker__hexinput",placeholder:"#RRGGBB"})]})]}),document.body)]})}const Op=Object.entries(mh).filter(([t,n])=>t.endsWith("Icon")&&typeof n=="function").map(([t,n])=>({name:t,Icon:n}));function So({value:t,onChange:n,disabled:r=!1,size:o,width:i,borderRadius:a,color:s,className:l="",style:u}){const p=so(o,{width:i,borderRadius:a,color:s}),h=s??"var(--color-primary)",[f,g]=d.useState(!1),[y,b]=d.useState(""),v=d.useRef(null),x=d.useRef(null),E=Op.find(C=>C.name===t),w=d.useMemo(()=>{const C=y.trim().toLowerCase();return C?Op.filter(A=>A.name.toLowerCase().includes(C)):Op},[y]);return d.useEffect(()=>{if(!f||!v.current||!x.current)return;const C=v.current,A=x.current,D=()=>{const N=C.getBoundingClientRect();A.style.top=`${N.bottom+6}px`,A.style.left=`${Math.min(N.left,window.innerWidth-A.offsetWidth-8)}px`};D();const k=requestAnimationFrame(D);return()=>cancelAnimationFrame(k)},[f]),d.useEffect(()=>{if(!f)return;const C=A=>{var D,k;(D=v.current)!=null&&D.contains(A.target)||(k=x.current)!=null&&k.contains(A.target)||g(!1)};return document.addEventListener("mousedown",C),()=>document.removeEventListener("mousedown",C)},[f]),e.jsxs("div",{className:`dui_iconpicker ${l}`,style:{display:"inline-block",...u},children:[e.jsxs("button",{ref:v,type:"button",disabled:r,onClick:()=>g(C=>!C),style:{display:"flex",alignItems:"center",gap:p.gap,height:p.height,paddingLeft:p.paddingX,paddingRight:p.paddingX,border:`1px solid ${f?h:"var(--color-input-border)"}`,borderRadius:p.borderRadius,background:"var(--color-input-bg)",cursor:r?"default":"pointer",opacity:r?.5:1},children:[E?e.jsx(E.Icon,{size:p.iconSize}):e.jsx("span",{style:{width:p.iconSize,height:p.iconSize}}),e.jsx("span",{style:{fontSize:p.fontSize,color:"var(--color-text-primary)",fontWeight:500},children:(E==null?void 0:E.name)??"Choose icon"})]}),f&&it.createPortal(e.jsxs("div",{ref:x,className:"dui_iconpicker__menu",style:{position:"fixed",zIndex:99999},children:[e.jsx("input",{autoFocus:!0,type:"text",value:y,onChange:C=>b(C.target.value),placeholder:"Search icons…",className:"dui_iconpicker__search"}),e.jsxs("div",{className:"dui_iconpicker__grid",children:[w.slice(0,200).map(({name:C,Icon:A})=>e.jsx("button",{type:"button",title:C,className:`dui_iconpicker__item${C===t?" dui_iconpicker__item--active":""}`,onClick:()=>{n(C),g(!1)},children:e.jsx(A,{size:16})},C)),w.length===0&&e.jsx("div",{className:"dui_iconpicker__empty",children:"No icons found"})]})]}),document.body)]})}const Wf=[...["😀","😁","😂","🤣","😊","😍","🤩","😎","🤔","😴","😢","😡","🥳","🤯","🙌","👍","👎","🙏","👏","💪"].map((t,n)=>({char:t,name:`smiley-${n}`,category:"Smileys"})),...["🐶","🐱","🦊","🦁","🐼","🐨","🐸","🐙","🦋","🐝","🦄","🐢"].map((t,n)=>({char:t,name:`animal-${n}`,category:"Animals"})),...["🍕","🍔","🍟","🌮","🍣","🍩","🍰","☕","🍺","🍷","🥑","🍎"].map((t,n)=>({char:t,name:`food-${n}`,category:"Food"})),...["⚽","🏀","🏈","🎮","🎸","🎨","📸","🎯","🏆","🚀","✈️","🚗"].map((t,n)=>({char:t,name:`activity-${n}`,category:"Activities"})),...["❤️","🔥","⭐","✅","❌","⚠️","💡","🔒","🔑","📌","🎉","💯"].map((t,n)=>({char:t,name:`symbol-${n}`,category:"Symbols"}))];function To({value:t,onChange:n,disabled:r=!1,size:o,width:i,borderRadius:a,color:s,className:l="",style:u}){const p=so(o,{width:i,borderRadius:a,color:s}),h=s??"var(--color-primary)",[f,g]=d.useState(!1),[y,b]=d.useState(""),v=d.useRef(null),x=d.useRef(null),E=d.useMemo(()=>{const w=y.trim().toLowerCase(),C=w?Wf.filter(D=>D.category.toLowerCase().includes(w)):Wf,A=new Map;for(const D of C)A.has(D.category)||A.set(D.category,[]),A.get(D.category).push(D);return Array.from(A.entries())},[y]);return d.useEffect(()=>{if(!f||!v.current||!x.current)return;const w=v.current,C=x.current,A=()=>{const k=w.getBoundingClientRect();C.style.top=`${k.bottom+6}px`,C.style.left=`${Math.min(k.left,window.innerWidth-C.offsetWidth-8)}px`};A();const D=requestAnimationFrame(A);return()=>cancelAnimationFrame(D)},[f]),d.useEffect(()=>{if(!f)return;const w=C=>{var A,D;(A=v.current)!=null&&A.contains(C.target)||(D=x.current)!=null&&D.contains(C.target)||g(!1)};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[f]),e.jsxs("div",{className:`dui_emojipicker ${l}`,style:{display:"inline-block",...u},children:[e.jsx("button",{ref:v,type:"button",disabled:r,onClick:()=>g(w=>!w),style:{display:"flex",alignItems:"center",justifyContent:"center",gap:p.gap,width:p.height,height:p.height,border:`1px solid ${f?h:"var(--color-input-border)"}`,borderRadius:p.borderRadius,background:"var(--color-input-bg)",cursor:r?"default":"pointer",opacity:r?.5:1,fontSize:p.iconSize+4},children:t??"🙂"}),f&&it.createPortal(e.jsxs("div",{ref:x,className:"dui_emojipicker__menu",style:{position:"fixed",zIndex:99999},children:[e.jsx("input",{autoFocus:!0,type:"text",value:y,onChange:w=>b(w.target.value),placeholder:"Search category…",className:"dui_emojipicker__search"}),e.jsx("div",{className:"dui_emojipicker__scroll",children:E.map(([w,C])=>e.jsxs("div",{children:[e.jsx("div",{className:"dui_emojipicker__category",children:w}),e.jsx("div",{className:"dui_emojipicker__grid",children:C.map(A=>e.jsx("button",{type:"button",className:`dui_emojipicker__item${A.char===t?" dui_emojipicker__item--active":""}`,onClick:()=>{n(A.char),g(!1)},children:A.char},A.name))})]},w))})]}),document.body)]})}function RA(t){return t<1024?`${t} B`:t<1024*1024?`${(t/1024).toFixed(1)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`}function aa({files:t,onFilesAdded:n,onRemove:r,accept:o,multiple:i=!0,disabled:a=!1,size:s,width:l,borderRadius:u,color:p,className:h="",style:f}){const g=Qt(s,{borderRadius:u,color:p}),y=p??"var(--color-primary)",[b,v]=d.useState(!1),x=d.useRef(null),E=w=>{!w||!w.length||n(Array.from(w))};return e.jsxs("div",{className:`dui_dropzone ${h}`,style:{width:l,...f},children:[e.jsxs("div",{className:`dui_dropzone__area${b?" dui_dropzone__area--over":""}`,style:{borderRadius:g.borderRadius,borderColor:b?y:void 0,opacity:a?.5:1,pointerEvents:a?"none":"auto"},onClick:()=>{var w;return(w=x.current)==null?void 0:w.click()},onDragOver:w=>{w.preventDefault(),v(!0)},onDragLeave:()=>v(!1),onDrop:w=>{w.preventDefault(),v(!1),E(w.dataTransfer.files)},children:[e.jsx(_l,{size:20,style:{color:b?y:"var(--color-text-muted)"}}),e.jsx("div",{style:{fontSize:g.fontSize,fontWeight:600,color:"var(--color-text-primary)",marginTop:6},children:"Drop files here or click to browse"}),e.jsx("div",{style:{fontSize:g.fontSize,color:"var(--color-text-muted)",marginTop:2},children:o??"Any file type"}),e.jsx("input",{ref:x,type:"file",accept:o,multiple:i,style:{display:"none"},onChange:w=>{E(w.target.files),w.target.value=""}})]}),t.length>0&&e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:6,marginTop:g.gap},children:t.map((w,C)=>e.jsxs("div",{className:"dui_dropzone__row",style:{borderRadius:g.borderRadius},children:[e.jsx(ip,{size:14,style:{color:"var(--color-text-muted)",flexShrink:0}}),e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("div",{style:{fontSize:g.fontSize,color:"var(--color-text-primary)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:w.file.name}),e.jsx("div",{style:{fontSize:g.fontSize,color:w.error?"var(--color-error)":"var(--color-text-muted)"},children:w.error??RA(w.file.size)}),w.progress!==void 0&&w.progress<100&&!w.error&&e.jsx("div",{className:"dui_dropzone__progresstrack",children:e.jsx("div",{className:"dui_dropzone__progressfill",style:{width:`${w.progress}%`,background:y}})})]}),e.jsx("button",{type:"button",className:"dui_dropzone__remove",onClick:()=>r(C),"aria-label":"Remove file",children:e.jsx(ct,{size:13})})]},C))})]})}function zr({src:t,onFileSelected:n,initials:r,disabled:o=!1,size:i,color:a,className:s="",style:l}){const u=mt(),p=i??u.size,h=a??u.activeColor??"var(--color-primary)",f=or.card[p],g=d.useRef(null);return e.jsxs("div",{className:`dui_avatarupload ${s}`,style:{position:"relative",width:f,height:f,borderRadius:"999px",cursor:o?"default":"pointer",opacity:o?.5:1,flexShrink:0,...l},onClick:()=>{var y;return!o&&((y=g.current)==null?void 0:y.click())},children:[e.jsx("div",{style:{width:"100%",height:"100%",borderRadius:"999px",overflow:"hidden",background:t?`center/cover no-repeat url(${t})`:`color-mix(in srgb, ${h} 15%, transparent)`,display:"flex",alignItems:"center",justifyContent:"center",border:"2px solid var(--color-surface-border)",fontSize:f*.36,fontWeight:700,color:h},children:!t&&(r??e.jsx(Cu,{size:f*.32}))}),e.jsx("div",{style:{position:"absolute",bottom:0,right:0,width:f*.34,height:f*.34,borderRadius:"999px",background:h,display:"flex",alignItems:"center",justifyContent:"center",border:"2px solid var(--color-surface)"},children:e.jsx(Cu,{size:f*.18,style:{color:"var(--color-btn-primary-text, #fff)"}})}),e.jsx("input",{ref:g,type:"file",accept:"image/*",disabled:o,style:{display:"none"},onChange:y=>{var v;const b=(v=y.target.files)==null?void 0:v[0];b&&n(b),y.target.value=""}})]})}function IA(t,n){return t==="9"?/[0-9]/.test(n):t==="A"?/[a-zA-Z]/.test(n):!0}function hw(t,n){const r=n.split("");let o="",i=0;for(let a=0;a<t.length&&i<r.length;a++){const s=t[a];if(s==="9"||s==="A"||s==="*"){for(;i<r.length&&!IA(s,r[i]);)i++;if(i>=r.length)break;o+=r[i],i++}else o+=s,r[i]===s&&i++}return o}function jo({value:t,onChange:n,mask:r,placeholder:o,disabled:i=!1,size:a,width:s,borderRadius:l,color:u,className:p="",style:h}){const f=an(a,{width:s,borderRadius:l,color:u});return e.jsx("input",{type:"text",className:p,disabled:i,placeholder:o??r.replace(/9/g,"_").replace(/A/g,"_"),value:t,onChange:g=>n(hw(r,g.target.value)),style:{width:f.width,height:f.height,fontSize:f.fontSize,paddingLeft:f.paddingX,paddingRight:f.paddingX,borderRadius:f.borderRadius,border:"1px solid var(--color-input-border)",background:"var(--color-input-bg)",color:"var(--color-text-primary)",outline:"none",fontFamily:"monospace",letterSpacing:"0.03em",boxSizing:"border-box",opacity:i?.5:1,...h}})}function Vf({title:t,items:n,checked:r,onToggle:o,fontSize:i}){return e.jsxs("div",{className:"dui_transferlist__panel",children:[e.jsxs("div",{className:"dui_transferlist__header",style:{fontSize:i},children:[t," · ",n.length]}),e.jsxs("div",{className:"dui_transferlist__list",children:[n.map(a=>e.jsxs("label",{className:"dui_transferlist__row",style:{fontSize:i},children:[e.jsx("input",{type:"checkbox",checked:r.has(a.value),onChange:()=>o(a.value)}),a.label]},a.value)),n.length===0&&e.jsx("div",{className:"dui_transferlist__empty",style:{fontSize:i},children:"Empty"})]})]})}function wo({items:t,value:n,onChange:r,leftTitle:o="Available",rightTitle:i="Selected",size:a,borderRadius:s,color:l,height:u=220,className:p="",style:h}){const f=so(a,{borderRadius:s,color:l}),g=l??"var(--color-primary)",[y,b]=d.useState(new Set),[v,x]=d.useState(new Set),E=new Set(n),w=t.filter(F=>!E.has(F.value)),C=t.filter(F=>E.has(F.value)),A=(F,O,V)=>{const Y=new Set(F);Y.has(V)?Y.delete(V):Y.add(V),O(Y)},D=()=>{r([...n,...Array.from(y)]),b(new Set)},k=()=>{r(n.filter(F=>!v.has(F))),x(new Set)},N=()=>{r(t.map(F=>F.value)),b(new Set)},j=()=>{r([]),x(new Set)};return e.jsxs("div",{className:`dui_transferlist ${p}`,style:{display:"flex",alignItems:"center",gap:8,minWidth:460,...h},children:[e.jsx("div",{style:{height:u,borderRadius:f.borderRadius,border:"1px solid var(--color-surface-border)",overflow:"hidden",flex:1},children:e.jsx(Vf,{title:o,items:w,checked:y,onToggle:F=>A(y,b,F),fontSize:f.fontSize})}),e.jsxs("div",{className:"dui_transferlist__controls",children:[e.jsx("button",{type:"button",className:"dui_transferlist__btn",style:{"--dui-tl-accent":g},onClick:D,disabled:!y.size,"aria-label":"Move selected right",children:e.jsx(lt,{size:12})}),e.jsxs("button",{type:"button",className:"dui_transferlist__btn",style:{"--dui-tl-accent":g},onClick:N,disabled:!w.length,"aria-label":"Move all right",children:[e.jsx(lt,{size:12}),e.jsx(lt,{size:12,style:{marginLeft:-6}})]}),e.jsx("button",{type:"button",className:"dui_transferlist__btn",style:{"--dui-tl-accent":g},onClick:k,disabled:!v.size,"aria-label":"Move selected left",children:e.jsx(Yo,{size:12})}),e.jsxs("button",{type:"button",className:"dui_transferlist__btn",style:{"--dui-tl-accent":g},onClick:j,disabled:!C.length,"aria-label":"Move all left",children:[e.jsx(Yo,{size:12}),e.jsx(Yo,{size:12,style:{marginLeft:-6}})]})]}),e.jsx("div",{style:{height:u,borderRadius:f.borderRadius,border:"1px solid var(--color-surface-border)",overflow:"hidden",flex:1},children:e.jsx(Vf,{title:i,items:C,checked:v,onToggle:F=>A(v,x,F),fontSize:f.fontSize})})]})}function Hr({value:t,onChange:n,min:r=-1/0,max:o=1/0,step:i=1,disabled:a=!1,size:s,borderRadius:l,color:u,className:p="",style:h}){const f=an(s,{borderRadius:l,color:u}),g=u??"var(--color-primary)",y=E=>Math.min(o,Math.max(r,E)),b=()=>n(y(t-i)),v=()=>n(y(t+i)),x={display:"flex",alignItems:"center",justifyContent:"center",width:f.height,height:f.height,flexShrink:0,border:"none",background:"transparent",color:g,cursor:a?"default":"pointer"};return e.jsxs("div",{className:p,style:{display:"inline-flex",alignItems:"center",border:"1px solid var(--color-input-border)",borderRadius:f.borderRadius,background:"var(--color-input-bg)",overflow:"hidden",opacity:a?.5:1,pointerEvents:a?"none":"auto",...h},children:[e.jsx("button",{type:"button",style:x,onClick:b,disabled:t<=r,"aria-label":"Decrease",children:e.jsx(Uh,{size:f.iconSize})}),e.jsx("input",{type:"text",inputMode:"decimal",value:t,onChange:E=>{const w=Number(E.target.value);Number.isNaN(w)||n(y(w))},style:{width:parseInt(f.height,10)*1.4,textAlign:"center",border:"none",borderLeft:"1px solid var(--color-input-border)",borderRight:"1px solid var(--color-input-border)",background:"transparent",color:"var(--color-text-primary)",fontSize:f.fontSize,fontWeight:700,outline:"none",height:f.height}}),e.jsx("button",{type:"button",style:x,onClick:v,disabled:t>=o,"aria-label":"Increase",children:e.jsx(at,{size:f.iconSize})})]})}function $e({checked:t,onChange:n,disabled:r=!1,size:o,accentColor:i,label:a,labelPosition:s="right",className:l="",activeColor:u,color:p}){const h=mp(o,{activeColor:u,color:p}),f=i||h.activeColor||"var(--color-toggle-on)",g=h.color||(r?"var(--color-text-muted)":"var(--color-text-primary)"),{trackW:y,trackH:b,thumb:v,fontSize:x}=h,E=t?`calc(${y}px - ${v+2}px)`:"2px",w={position:"relative",width:y,height:b,borderRadius:999,flexShrink:0,cursor:r?"not-allowed":"pointer",transition:"background 160ms, border-color 160ms",...r?{background:"transparent",border:"1.5px dashed var(--color-text-muted)",opacity:.5}:t?{background:f,border:"1.5px solid transparent"}:{background:"color-mix(in srgb, var(--color-text-primary) 10%, transparent)",border:"1.5px solid color-mix(in srgb, var(--color-text-primary) 20%, transparent)"}},C={position:"absolute",top:"50%",left:E,transform:"translateY(-50%)",width:v,height:v,borderRadius:"50%",background:r?"var(--color-text-muted)":"var(--color-toggle-thumb)",transition:"left 160ms",boxShadow:"0 1px 3px rgba(0,0,0,0.3)",pointerEvents:"none"},A=e.jsx("button",{type:"button",role:"switch","aria-checked":t,disabled:r,onClick:()=>!r&&n(!t),style:w,className:l,children:e.jsx("span",{style:C})});return a?e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[s==="left"&&e.jsx("span",{style:{fontSize:x,color:g,userSelect:"none"},children:a}),A,s==="right"&&e.jsx("span",{style:{fontSize:x,color:g,userSelect:"none"},children:a})]}):A}function Oo({title:t,items:n,checked:r,onChange:o,size:i,color:a,className:s="",style:l}){const u=Qt(i,{color:a}),p=new Set(r),h=(f,g)=>{o(g?[...r,f]:r.filter(y=>y!==f))};return e.jsxs("div",{className:s,style:{borderRadius:u.borderRadius,border:"1px solid var(--color-surface-border)",background:"var(--color-surface)",overflow:"hidden",...l},children:[t&&e.jsx("div",{style:{padding:u.padding,fontSize:u.fontSize,fontWeight:700,color:"var(--color-text-muted)",textTransform:"uppercase",letterSpacing:"0.06em",borderBottom:"1px solid var(--color-surface-border)"},children:t}),n.map((f,g)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:u.gap,padding:u.padding,borderBottom:g<n.length-1?"1px solid var(--color-surface-border)":"none",opacity:f.disabled?.5:1},children:[f.icon&&e.jsx("span",{style:{display:"flex",color:"var(--color-text-muted)",flexShrink:0},children:f.icon}),e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("div",{style:{fontSize:u.fontSize,fontWeight:600,color:"var(--color-text-primary)"},children:f.label}),f.description&&e.jsx("div",{style:{fontSize:u.fontSize,color:"var(--color-text-muted)",marginTop:1},children:f.description})]}),e.jsx($e,{checked:p.has(f.value),onChange:y=>h(f.value,y),disabled:f.disabled,size:i,accentColor:a})]},f.value))]})}function es({open:t,message:n,onClose:r,actionLabel:o,onAction:i,duration:a=4e3,size:s,width:l,borderRadius:u,color:p,className:h="",style:f}){const g=lo(s,{width:l,borderRadius:u,color:p}),y=p??"var(--color-primary)",b=d.useRef(null),v=()=>{b.current&&clearTimeout(b.current)},x=()=>{v(),a>0&&(b.current=setTimeout(r,a))};return d.useEffect(()=>(t&&x(),v),[t,a]),t?e.jsxs("div",{className:`dui_snackbar ${h}`,onMouseEnter:v,onMouseLeave:x,style:{display:"inline-flex",alignItems:"center",gap:g.gap,paddingLeft:g.paddingX,paddingRight:g.paddingX,height:"auto",minHeight:40,borderRadius:g.borderRadius,width:l?g.width:void 0,background:"var(--color-elevated, #1f2430)",color:"#fff",boxShadow:"0 8px 30px rgba(0,0,0,.35)",...f},children:[e.jsx("span",{style:{fontSize:g.fontSize,flex:1,padding:"10px 0"},children:n}),o&&e.jsx("button",{type:"button",onClick:()=>{i==null||i(),r()},style:{border:"none",background:"transparent",color:y,fontWeight:700,fontSize:g.fontSize,cursor:"pointer",flexShrink:0},children:o}),e.jsx("button",{type:"button",onClick:r,"aria-label":"Dismiss",style:{display:"flex",border:"none",background:"transparent",color:"rgba(255,255,255,0.6)",cursor:"pointer",flexShrink:0,padding:2},children:e.jsx($t,{size:13})})]}):null}const DA={info:"var(--color-info)",success:"var(--color-success)",warning:"var(--color-warning)",danger:"var(--color-error)"};function qr({open:t,message:n,variant:r="info",onDismiss:o,actionLabel:i,onAction:a,icon:s,size:l,borderRadius:u,className:p="",style:h}){const f=lo(l,{borderRadius:u}),g=DA[r];return t?e.jsxs("div",{className:p,role:"status",style:{display:"flex",alignItems:"center",gap:f.gap,padding:`10px ${f.paddingX}`,borderRadius:f.borderRadius,background:`color-mix(in srgb, ${g} 10%, var(--color-surface))`,border:`1px solid color-mix(in srgb, ${g} 30%, transparent)`,width:"100%",boxSizing:"border-box",...h},children:[e.jsx("span",{style:{display:"flex",color:g,flexShrink:0},children:s??e.jsx(kt,{size:16})}),e.jsx("span",{style:{flex:1,fontSize:f.fontSize,color:"var(--color-text-primary)",lineHeight:1.5},children:n}),i&&e.jsx("button",{type:"button",onClick:a,style:{border:"none",background:"transparent",color:g,fontWeight:700,fontSize:f.fontSize,cursor:"pointer",flexShrink:0,whiteSpace:"nowrap"},children:i}),o&&e.jsx("button",{type:"button",onClick:o,"aria-label":"Dismiss",style:{display:"flex",border:"none",background:"transparent",color:"var(--color-text-muted)",cursor:"pointer",flexShrink:0,padding:2},children:e.jsx($t,{size:13})})]}):null}function Jn({value:t,size:n,color:r,trackColor:o,showLabel:i=!0,className:a="",style:s}){const l=lo(n,{color:r}),u=r??"var(--color-primary)",p=o??"var(--color-surface-border)",h=l.ringDiameter*.6,f=l.thickness,g=(h-f)/2,y=2*Math.PI*g,b=t===void 0,v=Math.min(100,Math.max(0,t??0)),x=y-v/100*y;return e.jsxs("div",{className:`dui_progressring ${a}`,style:{position:"relative",width:h,height:h,...s},children:[e.jsxs("svg",{width:h,height:h,className:b?"dui_progressring__svg dui_progressring__svg--spin":"dui_progressring__svg",children:[e.jsx("circle",{cx:h/2,cy:h/2,r:g,fill:"none",stroke:p,strokeWidth:f}),e.jsx("circle",{cx:h/2,cy:h/2,r:g,fill:"none",stroke:u,strokeWidth:f,strokeLinecap:"round",strokeDasharray:y,strokeDashoffset:b?y*.75:x,transform:`rotate(-90 ${h/2} ${h/2})`,style:{transition:b?void 0:"stroke-dashoffset 300ms ease-out"}})]}),i&&!b&&e.jsxs("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:l.fontSize,fontWeight:700,color:"var(--color-text-primary)"},children:[Math.round(v),"%"]})]})}function Yn({value:t,buffer:n,size:r,width:o,color:i,trackColor:a,className:s="",style:l}){const u=lo(r,{width:o,color:i}),p=i??"var(--color-primary)",h=a??"var(--color-surface-border)",f=t===void 0,g=Math.min(100,Math.max(0,t??0));return e.jsxs("div",{className:`dui_progressbar ${s}`,role:"progressbar","aria-valuenow":f?void 0:g,style:{width:u.width,height:u.thickness,borderRadius:u.thickness/2,background:h,overflow:"hidden",position:"relative",...l},children:[n!==void 0&&!f&&e.jsx("div",{style:{position:"absolute",inset:0,width:`${Math.min(100,Math.max(0,n))}%`,background:`color-mix(in srgb, ${p} 30%, transparent)`,borderRadius:"inherit",transition:"width 300ms ease-out"}}),e.jsx("div",{className:f?"dui_progressbar__fill dui_progressbar__fill--indeterminate":"dui_progressbar__fill",style:{position:"absolute",top:0,bottom:0,left:0,width:f?"40%":`${g}%`,background:p,borderRadius:"inherit",transition:f?void 0:"width 300ms ease-out"}})]})}const Wl=(t,n)=>({display:"block",height:t,width:n,borderRadius:4,background:"var(--color-loader-track)"});function pr({variant:t="text",lines:n=1,width:r,height:o,size:i,className:a="",style:s}){const l=lo(i),u=Al(i),p=parseInt(l.fontSize,10)+8;return t==="avatar"?e.jsx("span",{className:`animate-pulse ${a}`,style:{...Wl(u.diameter,u.diameter),borderRadius:"999px",display:"inline-block",flexShrink:0,...s}}):t==="row"?e.jsxs("div",{className:a,style:{display:"flex",alignItems:"center",gap:l.gap,...s},children:[e.jsx("span",{className:"animate-pulse",style:{...Wl(u.diameter,u.diameter),borderRadius:"999px",flexShrink:0}}),e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:6},children:[e.jsx("span",{className:"animate-pulse",style:Wl(p*.6,"60%")}),e.jsx("span",{className:"animate-pulse",style:Wl(p*.5,"35%")})]})]}):t==="block"?e.jsx("span",{className:`animate-pulse ${a}`,style:{...Wl(o??80,r??"100%"),borderRadius:l.borderRadius,...s}}):e.jsx("div",{className:a,style:{display:"flex",flexDirection:"column",gap:6,width:r??"100%",...s},children:Array.from({length:n},(h,f)=>e.jsx("span",{className:"animate-pulse",style:Wl(o??p*.6,f===n-1&&n>1?"70%":"100%")},f))})}function zo({children:t,count:n,hidden:r=!1,dot:o=!1,max:i=99,size:a,color:s,className:l="",style:u}){const p=lo(a,{color:s}),h=s??"var(--color-error)",f=o||n===void 0,g=n!==void 0?n>i?`${i}+`:String(n):"",y=!r&&(f||(n??0)>0);return e.jsxs("span",{className:l,style:{position:"relative",display:"inline-flex",...u},children:[t,y&&e.jsx("span",{style:{position:"absolute",top:-2,right:-2,minWidth:f&&n===void 0?p.badgeSize*.45:p.badgeSize,height:f&&n===void 0?p.badgeSize*.45:p.badgeSize,padding:f&&n===void 0?0:"0 4px",borderRadius:"999px",background:h,display:"flex",alignItems:"center",justifyContent:"center",fontSize:p.fontSize,fontWeight:700,color:"#fff",border:"2px solid var(--color-surface)",boxSizing:"content-box",lineHeight:1},children:!(f&&n===void 0)&&g})]})}const NA={online:"var(--color-success)",away:"var(--color-warning)",busy:"var(--color-error)",offline:"var(--color-text-muted)"};function Qn({status:t,size:n,ring:r=!1,className:o="",style:i}){const a=Al(n),s=NA[t];return e.jsx("span",{className:o,"aria-label":t,style:{display:"inline-block",width:a.dotSize,height:a.dotSize,borderRadius:"999px",background:s,border:r?"2px solid var(--color-surface)":void 0,boxSizing:"content-box",flexShrink:0,...i}})}function LA(t){var r,o;if(!t)return"?";const n=t.trim().split(/\s+/);return((((r=n[0])==null?void 0:r[0])??"")+(((o=n[1])==null?void 0:o[0])??"")).toUpperCase()||t.slice(0,2).toUpperCase()}function pt({src:t,initials:n,name:r,status:o,size:i,color:a,className:s="",style:l}){const u=Al(i,{color:a}),p=a??u.activeColor??"var(--color-primary)",h=n??LA(r);return e.jsxs("span",{className:s,style:{position:"relative",display:"inline-flex",flexShrink:0,...l},children:[e.jsx("span",{title:r,style:{width:u.diameter,height:u.diameter,borderRadius:"999px",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",background:t?void 0:`color-mix(in srgb, ${p} 18%, transparent)`,color:p,fontWeight:700,fontSize:u.diameter*.38,border:"1.5px solid var(--color-surface-border)"},children:t?e.jsx("img",{src:t,alt:r??"",style:{width:"100%",height:"100%",objectFit:"cover"}}):h}),o&&e.jsx("span",{style:{position:"absolute",bottom:0,right:0},children:e.jsx(Qn,{status:o,size:i,ring:!0})})]})}function Eo({members:t,max:n=4,size:r,color:o,className:i="",style:a}){const s=Al(r,{color:o}),l=t.slice(0,n),u=t.length-l.length,p=-(s.diameter*.28);return e.jsxs("div",{className:i,style:{display:"flex",alignItems:"center",...a},children:[l.map((h,f)=>e.jsx("span",{style:{marginLeft:f===0?0:p,position:"relative",zIndex:l.length-f,borderRadius:"999px",boxShadow:"0 0 0 2px var(--color-surface)"},children:e.jsx(pt,{src:h.src,name:h.name,initials:h.initials,size:r,color:o})},f)),u>0&&e.jsxs("span",{style:{marginLeft:p,zIndex:0,width:s.diameter,height:s.diameter,borderRadius:"999px",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--color-surface)",color:"var(--color-text-secondary)",fontWeight:700,fontSize:s.diameter*.32,boxShadow:"0 0 0 2px var(--color-surface)",border:"1.5px solid var(--color-surface-border)"},children:["+",u]})]})}const PA=["#6366F1","#22C55E","#F59E0B","#EF4444","#EC4899","#06B6D4"],ts=d.forwardRef(function({colors:n=PA,particleCount:r=80},o){const i=d.useRef(null),a=d.useRef([]),s=d.useRef(null);return d.useImperativeHandle(o,()=>({fire(l){const u=i.current;if(!u)return;const p=(l==null?void 0:l.x)??window.innerWidth/2,h=(l==null?void 0:l.y)??window.innerHeight/2;for(let f=0;f<r;f++){const g=Math.PI*2*f/r+Math.random()*.5,y=4+Math.random()*7;a.current.push({x:p,y:h,vx:Math.cos(g)*y,vy:Math.sin(g)*y-3,color:n[Math.floor(Math.random()*n.length)],size:4+Math.random()*4,rotation:Math.random()*360,vr:(Math.random()-.5)*20,life:1})}if(s.current===null){u.width=window.innerWidth,u.height=window.innerHeight;const f=u.getContext("2d"),g=()=>{f.clearRect(0,0,u.width,u.height);const y=[];for(const b of a.current)b.vy+=.25,b.x+=b.vx,b.y+=b.vy,b.rotation+=b.vr,b.life-=.012,b.life>0&&(f.save(),f.globalAlpha=Math.max(0,b.life),f.translate(b.x,b.y),f.rotate(b.rotation*Math.PI/180),f.fillStyle=b.color,f.fillRect(-b.size/2,-b.size/2,b.size,b.size*.6),f.restore(),y.push(b));a.current=y,y.length>0?s.current=requestAnimationFrame(g):s.current=null};s.current=requestAnimationFrame(g)}}}),[n,r]),e.jsx("canvas",{ref:i,style:{position:"fixed",inset:0,width:"100vw",height:"100vh",pointerEvents:"none",zIndex:99999}})});function Zl({open:t,onClose:n,anchorEl:r,children:o,placement:i="bottom",size:a,borderRadius:s,color:l,className:u=""}){const p=ri(a,{borderRadius:s,color:l}),h=d.useRef(null),[f,g]=d.useState({top:-9999,left:-9999});return d.useEffect(()=>{if(!t||!r||!h.current)return;const y=h.current,b=()=>{const x=r.getBoundingClientRect(),E=y.getBoundingClientRect(),w=8;let C=x.bottom+w,A=x.left;i==="top"&&(C=x.top-E.height-w),i==="left"&&(C=x.top,A=x.left-E.width-w),i==="right"&&(C=x.top,A=x.right+w),A=Math.min(Math.max(8,A),window.innerWidth-E.width-8),C=Math.min(Math.max(8,C),window.innerHeight-E.height-8),g({top:C,left:A})};b();const v=requestAnimationFrame(b);return window.addEventListener("scroll",b,{passive:!0,capture:!0}),window.addEventListener("resize",b,{passive:!0}),()=>{cancelAnimationFrame(v),window.removeEventListener("scroll",b,{capture:!0}),window.removeEventListener("resize",b)}},[t,r,i]),d.useEffect(()=>{if(!t)return;const y=v=>{var x;r!=null&&r.contains(v.target)||(x=h.current)!=null&&x.contains(v.target)||n()},b=v=>{v.key==="Escape"&&n()};return document.addEventListener("mousedown",y),document.addEventListener("keydown",b),()=>{document.removeEventListener("mousedown",y),document.removeEventListener("keydown",b)}},[t,r,n]),t?it.createPortal(e.jsx("div",{ref:h,className:`dui_popover ${u}`,style:{position:"fixed",top:f.top,left:f.left,zIndex:99999,borderRadius:p.borderRadius,background:"var(--color-surface-bg, var(--color-elevated))",border:"1px solid var(--color-surface-border)",boxShadow:"0 12px 40px rgba(0,0,0,.35)",padding:p.paddingY},children:o}),document.body):null}function Fo({content:t,children:n,placement:r="top",delay:o=300,size:i,color:a,disabled:s=!1}){const l=ri(i,{color:a}),[u,p]=d.useState(!1),[h,f]=d.useState({top:-9999,left:-9999}),g=d.useRef(null),y=d.useRef(null),b=d.useRef(null),v=()=>{s||(b.current=setTimeout(()=>p(!0),o))},x=()=>{b.current&&clearTimeout(b.current),p(!1)};d.useEffect(()=>{if(!u||!g.current||!y.current)return;const C=g.current.getBoundingClientRect(),A=y.current.getBoundingClientRect(),D=6;let k=C.top-A.height-D,N=C.left+C.width/2-A.width/2;r==="bottom"&&(k=C.bottom+D),r==="left"&&(k=C.top+C.height/2-A.height/2,N=C.left-A.width-D),r==="right"&&(k=C.top+C.height/2-A.height/2,N=C.right+D),N=Math.min(Math.max(4,N),window.innerWidth-A.width-4),k=Math.min(Math.max(4,k),window.innerHeight-A.height-4),f({top:k,left:N})},[u,r]);const E=n.props,w=d.cloneElement(n,{ref:g,onMouseEnter:C=>{var A;v(),(A=E.onMouseEnter)==null||A.call(E,C)},onMouseLeave:C=>{var A;x(),(A=E.onMouseLeave)==null||A.call(E,C)},onFocus:C=>{var A;v(),(A=E.onFocus)==null||A.call(E,C)},onBlur:C=>{var A;x(),(A=E.onBlur)==null||A.call(E,C)}});return e.jsxs(e.Fragment,{children:[w,u&&t&&it.createPortal(e.jsx("div",{ref:y,className:"dui_tooltip",role:"tooltip",style:{position:"fixed",top:h.top,left:h.left,zIndex:99999,background:"var(--color-elevated, #1f2430)",color:"#fff",fontSize:l.fontSize,padding:"5px 9px",borderRadius:6,boxShadow:"0 6px 20px rgba(0,0,0,.3)",maxWidth:240,pointerEvents:"none"},children:t}),document.body)]})}function ns({open:t,onClose:n,edge:r="right",title:o,children:i,size:a=320,duiSize:s,className:l=""}){const u=ri(s),p=r==="left"||r==="right";return d.useEffect(()=>{if(!t)return;const h=f=>{f.key==="Escape"&&n()};return document.addEventListener("keydown",h),()=>document.removeEventListener("keydown",h)},[t,n]),t?it.createPortal(e.jsx("div",{className:"dui_drawer__backdrop",onClick:n,children:e.jsxs("div",{className:`dui_drawer__panel dui_drawer__panel--${r} ${l}`,onClick:h=>h.stopPropagation(),style:{[p?"width":"height"]:typeof a=="number"?`${a}px`:a,background:"var(--color-surface)"},children:[o&&e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:`${u.paddingY} ${u.paddingX}`,borderBottom:"1px solid var(--color-surface-border)"},children:[e.jsx("span",{style:{fontSize:u.headerFontSize,fontWeight:700,color:"var(--color-text-primary)"},children:o}),e.jsx("button",{type:"button",onClick:n,"aria-label":"Close",style:{display:"flex",border:"none",background:"transparent",color:"var(--color-text-muted)",cursor:"pointer"},children:e.jsx($t,{size:15})})]}),e.jsx("div",{style:{flex:1,overflow:"auto",padding:u.paddingX},children:i})]})}),document.body):null}function rs({open:t,onClose:n,title:r,items:o,cancelLabel:i="Cancel",size:a,className:s=""}){const l=ri(a);return t?it.createPortal(e.jsx("div",{className:"dui_actionsheet__backdrop",onClick:n,children:e.jsxs("div",{className:`dui_actionsheet__sheet ${s}`,onClick:u=>u.stopPropagation(),children:[e.jsxs("div",{className:"dui_actionsheet__group",children:[r&&e.jsx("div",{style:{padding:`10px ${l.paddingX}`,fontSize:l.fontSize,color:"var(--color-text-muted)",textAlign:"center",borderBottom:"1px solid var(--color-surface-border)"},children:r}),o.map((u,p)=>e.jsxs("button",{type:"button",disabled:u.disabled,onClick:()=>{u.onClick(),n()},className:"dui_actionsheet__item",style:{fontSize:l.headerFontSize,color:u.danger?"var(--color-error)":"var(--color-text-primary)",borderTop:p>0?"1px solid var(--color-surface-border)":"none"},children:[u.icon&&e.jsx("span",{style:{display:"flex"},children:u.icon}),u.label]},p))]}),e.jsx("button",{type:"button",onClick:n,className:"dui_actionsheet__cancel",style:{fontSize:l.headerFontSize},children:i})]})}),document.body):null}function os({open:t,onClose:n,title:r,children:o,heightRatio:i=.6,size:a,className:s=""}){const l=ri(a),u=d.useRef(null),p=d.useRef({startY:0,dy:0,dragging:!1}),[h,f]=d.useState(0),[g,y]=d.useState(!1);d.useEffect(()=>{t&&(f(0),y(!1))},[t]);const b=E=>{p.current={startY:E.clientY,dy:0,dragging:!0},E.target.setPointerCapture(E.pointerId)},v=E=>{if(!p.current.dragging)return;const w=Math.max(0,E.clientY-p.current.startY);p.current.dy=w,f(w)},x=()=>{var w;if(!p.current.dragging)return;p.current.dragging=!1;const E=((w=u.current)==null?void 0:w.offsetHeight)??300;p.current.dy>E*.3?(y(!0),setTimeout(n,180)):f(0)};return t?it.createPortal(e.jsx("div",{className:"dui_bottomsheet__backdrop",onClick:n,style:{opacity:g?0:1},children:e.jsxs("div",{ref:u,className:`dui_bottomsheet__sheet ${s}`,onClick:E=>E.stopPropagation(),style:{height:`${i*100}vh`,transform:`translateY(${g?"100%":`${h}px`})`,transition:p.current.dragging?"none":"transform 200ms ease-out"},children:[e.jsx("div",{className:"dui_bottomsheet__handle",onPointerDown:b,onPointerMove:v,onPointerUp:x,children:e.jsx("span",{className:"dui_bottomsheet__grip"})}),r&&e.jsx("div",{style:{padding:`0 ${l.paddingX} ${l.paddingY}`,fontSize:l.headerFontSize,fontWeight:700,color:"var(--color-text-primary)"},children:r}),e.jsx("div",{style:{flex:1,overflow:"auto",padding:`0 ${l.paddingX} ${l.paddingY}`},children:o})]})}),document.body):null}function Qc({open:t,steps:n,stepIndex:r,onNext:o,onPrev:i,onClose:a,size:s,color:l}){const u=ri(s,{color:l}),p=l??"var(--color-primary)",[h,f]=d.useState(null),g=n[r];if(d.useEffect(()=>{if(!t||!g)return;const x=()=>{const E=document.querySelector(g.target);f(E?E.getBoundingClientRect():null)};return x(),window.addEventListener("resize",x),window.addEventListener("scroll",x,!0),()=>{window.removeEventListener("resize",x),window.removeEventListener("scroll",x,!0)}},[t,g]),!t||!g)return null;const y=8,b=h?h.bottom+16:window.innerHeight/2,v=h?Math.min(Math.max(16,h.left),window.innerWidth-300):window.innerWidth/2-150;return it.createPortal(e.jsxs("div",{className:"dui_spotlight__overlay",children:[h&&e.jsx("div",{className:"dui_spotlight__cutout",style:{top:h.top-y,left:h.left-y,width:h.width+y*2,height:h.height+y*2,boxShadow:`0 0 0 3px ${p}, 0 0 0 9999px rgba(0,0,0,0.65)`}}),e.jsxs("div",{className:"dui_spotlight__tooltip",style:{top:b,left:v,borderRadius:u.borderRadius},children:[e.jsx("div",{style:{fontSize:u.headerFontSize,fontWeight:700,color:"var(--color-text-primary)",marginBottom:4},children:g.title}),e.jsx("div",{style:{fontSize:u.fontSize,color:"var(--color-text-secondary)",lineHeight:1.5,marginBottom:12},children:g.content}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx("div",{style:{display:"flex",gap:4},children:n.map((x,E)=>e.jsx("span",{className:"dui_spotlight__dot",style:{background:E===r?p:"var(--color-surface-border)"}},E))}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{type:"button",onClick:a,className:"dui_spotlight__btn dui_spotlight__btn--ghost",children:"Skip"}),r>0&&e.jsx("button",{type:"button",onClick:i,className:"dui_spotlight__btn dui_spotlight__btn--ghost",children:"Back"}),e.jsx("button",{type:"button",onClick:r===n.length-1?a:o,className:"dui_spotlight__btn",style:{background:p},children:r===n.length-1?"Done":"Next"})]})]})]})]}),document.body)}function is({icon:t,label:n,onClick:r,actions:o,position:i="bottom-right",size:a,color:s,className:l=""}){const u=_n(a,{color:s}),p=s??u.defaultColor??"var(--color-primary)",[h,f]=d.useState(!1),g=!!(o!=null&&o.length),y=parseInt(u.height,10)*1.5;return e.jsxs("div",{className:`dui_fab dui_fab--${i} ${l}`,children:[g&&h&&e.jsx("div",{className:"dui_fab__actions",children:o.map((b,v)=>e.jsxs("button",{type:"button",className:"dui_fab__action",style:{animationDelay:`${v*30}ms`},onClick:()=>{b.onClick(),f(!1)},children:[e.jsx("span",{className:"dui_fab__actionlabel",children:b.label}),e.jsx("span",{className:"dui_fab__actionicon",style:{background:p},children:b.icon})]},v))}),e.jsxs("button",{type:"button",className:"dui_fab__main",style:{height:y,minWidth:y,borderRadius:y/2,background:g&&h?"var(--color-error)":p,color:"var(--color-btn-primary-text, #fff)",paddingLeft:n?20:0,paddingRight:n?20:0},onClick:()=>g?f(b=>!b):r==null?void 0:r(),children:[e.jsx("span",{className:"dui_fab__icon",children:g?h?e.jsx($t,{size:20}):t??e.jsx(at,{size:20}):t??e.jsx(at,{size:20})}),n&&e.jsx("span",{style:{fontWeight:700,fontSize:u.fontSize,marginLeft:8},children:n})]})]})}function sa({items:t,onSelect:n,size:r,color:o,className:i=""}){const a=Cd(r,{activeColor:o}),s=a.activeColor??"var(--color-primary)",[l,u]=d.useState(null),p=a.iconSize*2.2,h=f=>{if(l===null)return 1;const g=Math.abs(f-l);return g===0?1.5:g===1?1.22:g===2?1.08:1};return e.jsx("div",{className:`dui_dock ${i}`,onMouseLeave:()=>u(null),children:t.map((f,g)=>{const y=h(g);return e.jsxs("button",{type:"button",title:f.label,onMouseEnter:()=>u(g),onClick:()=>n(f.id),className:"dui_dock__item",style:{width:p,height:p,transform:`scale(${y}) translateY(${y>1?-(y-1)*14:0}px)`,color:f.active?s:"var(--color-text-secondary)"},children:[f.icon,f.active&&e.jsx("span",{className:"dui_dock__dot",style:{background:s}})]},f.id)})})}const MA=200,Bf=45;function jA({items:t,onSelect:n,open:r,direction:o="up-left",color:i,radius:a=68,spread:s=54,angleStep:l=0,tileSize:u=44,className:p="",style:h}){const f=i??"var(--color-primary)",g=o==="up-left"?1:-1,[y,b]=d.useState(r),[v,x]=d.useState(!1),E=d.useRef(null);return d.useEffect(()=>{if(E.current&&clearTimeout(E.current),r){b(!0),x(!1);return}if(y)return x(!0),E.current=setTimeout(()=>{b(!1),x(!1)},MA+Math.max(t.length-1,0)*Bf),()=>{E.current&&clearTimeout(E.current)}},[r,t.length]),e.jsx("div",{className:`dui_fanstack dui_fanstack--${o==="up-left"?"left":"right"} ${p}`,"aria-hidden":!r,style:h,children:y&&t.map((w,C)=>{const A=(90+g*l*C)*(Math.PI/180),D=a+s*C,k=Math.cos(A)*D,N=Math.sin(A)*D,j=w.color??f;return e.jsxs("button",{type:"button",className:`dui_fanstack__item ${v?"dui_fanstack__item--closing":""}`,onClick:()=>n(w.id),tabIndex:v?-1:0,style:{transform:`translate(-50%, -50%) translate(${k}px, ${-N}px)`,animationDelay:`${(v?t.length-1-C:C)*Bf}ms`,"--dui-fan-accent":j},children:[e.jsx("span",{className:"dui_fanstack__tile",style:{width:u,height:u,color:j},children:w.icon}),e.jsx("span",{className:"dui_fanstack__label",children:w.label})]},w.id)})})}function Ta({items:t,maxVisible:n=4,size:r,color:o,className:i=""}){const a=Cd(r,{activeColor:o}),s=a.activeColor??"var(--color-primary)",[l,u]=d.useState(!1),h=!l&&t.length>n?[t[0],{label:"…",onClick:void 0,collapse:!0},...t.slice(t.length-(n-2))]:t;return e.jsx("nav",{className:i,"aria-label":"Breadcrumb",style:{display:"flex",alignItems:"center",flexWrap:"wrap",gap:4,fontSize:a.fontSize},children:h.map((f,g)=>{const y=g===h.length-1,b=f.collapse;return e.jsxs("span",{style:{display:"flex",alignItems:"center",gap:4},children:[b?e.jsx("button",{type:"button",onClick:()=>u(!0),style:{display:"flex",border:"none",background:"transparent",color:"var(--color-text-muted)",cursor:"pointer",padding:2},"aria-label":"Show all",children:e.jsx(Sn,{size:13})}):f.onClick&&!y?e.jsx("button",{type:"button",onClick:f.onClick,style:{border:"none",background:"transparent",color:"var(--color-text-muted)",cursor:"pointer",fontSize:a.fontSize,fontWeight:500,padding:0},children:f.label}):e.jsx("span",{style:{color:y?s:"var(--color-text-muted)",fontWeight:y?700:500},children:f.label}),!y&&e.jsx(lt,{size:11,style:{color:"var(--color-text-muted)",opacity:.5,flexShrink:0}})]},g)})})}function OA(t,n,r){const o=r*2+5;if(n<=o)return Array.from({length:n},(l,u)=>u+1);const i=Math.max(t-r,2),a=Math.min(t+r,n-1),s=[1];i>2&&s.push("ellipsis");for(let l=i;l<=a;l++)s.push(l);return a<n-1&&s.push("ellipsis"),s.push(n),s}function Ar({page:t,totalPages:n,onChange:r,siblingCount:o=1,size:i,color:a,className:s=""}){const l=Cd(i,{activeColor:a}),u=l.activeColor??"var(--color-primary)",p=OA(t,n,o),h=parseInt(l.itemHeight,10)*.82,f=g=>({display:"flex",alignItems:"center",justifyContent:"center",width:h,height:h,minWidth:h,borderRadius:l.borderRadius,border:"none",background:g?u:"transparent",color:g?"var(--color-btn-primary-text, #fff)":"var(--color-text-secondary)",fontSize:l.fontSize,fontWeight:g?700:500,cursor:"pointer"});return e.jsxs("nav",{className:s,style:{display:"flex",alignItems:"center",gap:2},"aria-label":"Pagination",children:[e.jsx("button",{type:"button",disabled:t<=1,onClick:()=>r(t-1),style:{...f(!1),opacity:t<=1?.35:1,cursor:t<=1?"not-allowed":"pointer"},"aria-label":"Previous page",children:e.jsx(Yo,{size:l.iconSize})}),p.map((g,y)=>g==="ellipsis"?e.jsx("span",{style:{width:h,textAlign:"center",color:"var(--color-text-muted)",fontSize:l.fontSize},children:"…"},`e${y}`):e.jsx("button",{type:"button",onClick:()=>r(g),style:f(g===t),children:g},g)),e.jsx("button",{type:"button",disabled:t>=n,onClick:()=>r(t+1),style:{...f(!1),opacity:t>=n?.35:1,cursor:t>=n?"not-allowed":"pointer"},"aria-label":"Next page",children:e.jsx(lt,{size:l.iconSize})})]})}const zA={xxs:80,xs:100,sm:140,md:200,lg:280,xl:360,xxl:440,xxxl:520};function la({title:t,subtitle:n,actions:r,background:o,size:i,borderRadius:a,color:s,className:l="",style:u}){const p=On(i,{borderRadius:a,color:s}),h=i??"md",f=(o==null?void 0:o.startsWith("http"))||(o==null?void 0:o.startsWith("/"));return e.jsxs("div",{className:l,style:{minHeight:zA[h],display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",padding:p.padding,gap:p.gap,borderRadius:p.borderRadius,boxSizing:"border-box",background:o?f?`center/cover no-repeat url(${o})`:o:"var(--color-surface)",color:p.color??(o?"#fff":"var(--color-text-primary)"),...u},children:[e.jsx("div",{style:{fontSize:`calc(${p.fontSize} * 2.2)`,fontWeight:800,letterSpacing:"-0.02em"},children:t}),n&&e.jsx("div",{style:{fontSize:`calc(${p.fontSize} * 1.2)`,opacity:.8,maxWidth:480},children:n}),r&&e.jsx("div",{style:{display:"flex",gap:p.gap,marginTop:p.gap},children:r})]})}function ui({left:t,right:n,size:r,className:o="",style:i}){const a=On(r);return e.jsxs("div",{className:o,style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:a.gap,width:"100%",...i},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",gap:a.gap},children:t}),e.jsx("div",{style:{display:"flex",alignItems:"center",gap:a.gap},children:n})]})}function pi({media:t,children:n,actions:r,size:o,className:i="",style:a}){const s=On(o);return e.jsxs("div",{className:i,style:{display:"flex",alignItems:"flex-start",gap:s.gap,...a},children:[e.jsx("div",{style:{flexShrink:0},children:t}),e.jsx("div",{style:{flex:1,minWidth:0,fontSize:s.fontSize,color:"var(--color-text-primary)"},children:n}),r&&e.jsx("div",{style:{flexShrink:0,display:"flex",gap:s.gap},children:r})]})}function mw({nodes:t,vertical:n,gap:r}){return e.jsx("div",{style:{display:"flex",flexDirection:n?"column":"row",gap:r,width:"100%"},children:t.map((o,i)=>e.jsx("div",{style:{flex:o.weight??1,minWidth:0,display:"flex"},children:o.children?e.jsx(mw,{nodes:o.children,vertical:o.vertical,gap:r}):e.jsx("div",{style:{flex:1,minWidth:0},children:o.content})},i))})}function as({nodes:t,vertical:n=!1,size:r,className:o="",style:i}){const a=On(r);return e.jsx("div",{className:o,style:i,children:e.jsx(mw,{nodes:t,vertical:n,gap:a.gap})})}function Zn({value:t,onChange:n,prefix:r,suffix:o,placeholder:i,size:a,height:s,style:l,className:u="",...p}){const h=an(a),f=s??parseInt(h.height,10);return e.jsxs("div",{className:u,style:{height:f,flexShrink:0,display:"flex",alignItems:"center",gap:6,width:"100%",borderRadius:h.borderRadius,border:"1px solid var(--color-input-border)",background:"var(--color-input-bg)",paddingLeft:8,paddingRight:o?4:8,transition:"border-color 120ms",...l},children:[r&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0,color:"var(--color-text-muted)"},children:r}),e.jsx("input",{type:"text",value:t,onChange:g=>n(g.target.value),placeholder:i,style:{flex:1,minWidth:0,background:"transparent",border:"none",outline:"none",fontSize:h.fontSize,color:"var(--color-text-primary)",fontFamily:"inherit"},...p}),o&&e.jsx("span",{style:{display:"flex",alignItems:"center",flexShrink:0,color:"var(--color-text-muted)"},children:o})]})}function ca({heading:t,items:n,tabs:r,activeTab:o,onTabChange:i,searchable:a=!0,size:s,borderRadius:l,color:u,className:p="",style:h}){const f=On(s,{borderRadius:l,color:u}),g=u??"var(--color-primary)",[y,b]=d.useState(""),v=d.useMemo(()=>{const x=y.trim().toLowerCase();return x?n.filter(E=>E.label.toLowerCase().includes(x)):n},[n,y]);return e.jsxs("div",{className:p,style:{border:"1px solid var(--color-surface-border)",borderRadius:f.borderRadius,overflow:"hidden",...h},children:[e.jsx("div",{style:{padding:"10px 14px",fontWeight:700,fontSize:`calc(${f.fontSize} * 1.15)`,color:"var(--color-text-primary)",background:"var(--color-surface)",borderBottom:"1px solid var(--color-surface-border)"},children:t}),r&&r.length>0&&e.jsx("div",{style:{display:"flex",borderBottom:"1px solid var(--color-surface-border)"},children:r.map(x=>e.jsx("button",{type:"button",onClick:()=>i==null?void 0:i(x.id),style:{flex:1,padding:"8px 0",border:"none",background:"transparent",fontSize:f.fontSize,fontWeight:x.id===o?700:500,color:x.id===o?g:"var(--color-text-muted)",borderBottom:x.id===o?`2px solid ${g}`:"2px solid transparent",cursor:"pointer"},children:x.label},x.id))}),a&&e.jsx("div",{style:{padding:8,borderBottom:"1px solid var(--color-surface-border)"},children:e.jsx(Zn,{value:y,onChange:b,placeholder:"Filter…",size:s,style:{width:"100%"}})}),e.jsxs("div",{children:[v.map(x=>e.jsxs("button",{type:"button",onClick:x.onClick,style:{display:"flex",alignItems:"center",gap:8,width:"100%",textAlign:"left",padding:"8px 14px",border:"none",borderBottom:"1px solid var(--color-surface-border)",background:x.active?`color-mix(in srgb, ${g} 10%, transparent)`:"transparent",fontSize:f.fontSize,fontWeight:x.active?700:500,color:x.active?g:"var(--color-text-secondary)",cursor:"pointer"},children:[x.icon,x.label]},x.value)),v.length===0&&e.jsx("div",{style:{padding:16,textAlign:"center",fontSize:f.fontSize,color:"var(--color-text-muted)"},children:"No matches"})]})]})}function da({brand:t,links:n=[],right:r,size:o,color:i,className:a="",style:s}){const l=On(o,{color:i}),u=l.color??"var(--color-primary)",[p,h]=d.useState(!1);return e.jsxs("div",{className:a,style:{position:"relative",background:"var(--color-surface)",borderBottom:"1px solid var(--color-surface-border)",...s},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:`0 ${l.padding}`,height:52},children:[e.jsx("div",{style:{fontWeight:800,fontSize:`calc(${l.fontSize} * 1.2)`,color:"var(--color-text-primary)"},children:t}),e.jsx("div",{className:"dui_navbar__links",style:{display:"flex",alignItems:"center",gap:l.gap},children:n.map(f=>e.jsx("button",{type:"button",onClick:f.onClick,style:{border:"none",background:"transparent",cursor:"pointer",fontSize:l.fontSize,fontWeight:f.active?700:500,color:f.active?u:"var(--color-text-secondary)",padding:"6px 0"},children:f.label},f.id))}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[r,e.jsxs("button",{type:"button",className:"dui_navbar__burger",onClick:()=>h(f=>!f),"aria-label":"Toggle menu",style:{display:"none",flexDirection:"column",gap:3,border:"none",background:"transparent",cursor:"pointer",padding:6},children:[e.jsx("span",{style:{width:18,height:2,background:"var(--color-text-primary)",borderRadius:1}}),e.jsx("span",{style:{width:18,height:2,background:"var(--color-text-primary)",borderRadius:1}}),e.jsx("span",{style:{width:18,height:2,background:"var(--color-text-primary)",borderRadius:1}})]})]})]}),p&&e.jsx("div",{style:{display:"flex",flexDirection:"column",padding:l.padding,gap:6,borderTop:"1px solid var(--color-surface-border)"},children:n.map(f=>e.jsx("button",{type:"button",onClick:f.onClick,style:{textAlign:"left",border:"none",background:"transparent",cursor:"pointer",fontSize:l.fontSize,color:f.active?u:"var(--color-text-secondary)",fontWeight:f.active?700:500},children:f.label},f.id))})]})}function ss({children:t,offsetTop:n=0,onStickyChange:r,className:o="",style:i}){const a=d.useRef(null),[s,l]=d.useState(!1);return d.useEffect(()=>{const u=a.current;if(!u)return;const p=()=>{const f=u.getBoundingClientRect().top<=n;l(g=>(g!==f&&(r==null||r(f)),f))};return p(),window.addEventListener("scroll",p,{passive:!0,capture:!0}),window.addEventListener("resize",p),()=>{window.removeEventListener("scroll",p,{capture:!0}),window.removeEventListener("resize",p)}},[n,r]),e.jsx("div",{ref:a,className:o,style:{position:"sticky",top:n,zIndex:10,...i},"data-stuck":s,children:t})}function ls({links:t,size:n,color:r,offset:o=0,className:i="",style:a}){var f;const s=On(n,{color:r}),l=s.color??"var(--color-primary)",[u,p]=d.useState((f=t[0])==null?void 0:f.id);d.useEffect(()=>{const g=()=>{var b;let y=(b=t[0])==null?void 0:b.id;for(const v of t){const x=document.getElementById(v.id);x&&x.getBoundingClientRect().top-o<=8&&(y=v.id)}p(y)};return g(),window.addEventListener("scroll",g,{passive:!0,capture:!0}),()=>window.removeEventListener("scroll",g,{capture:!0})},[t,o]);const h=g=>{const y=document.getElementById(g);if(!y)return;const b=y.getBoundingClientRect().top+window.scrollY-o;window.scrollTo({top:b,behavior:"smooth"})};return e.jsx("nav",{className:i,style:{display:"flex",flexDirection:"column",gap:2,borderLeft:"2px solid var(--color-surface-border)",...a},children:t.map(g=>{const y=g.id===u;return e.jsx("button",{type:"button",onClick:()=>h(g.id),style:{textAlign:"left",border:"none",background:"transparent",cursor:"pointer",padding:"4px 0 4px 12px",marginLeft:-2,borderLeft:`2px solid ${y?l:"transparent"}`,fontSize:s.fontSize,fontWeight:y?700:500,color:y?l:"var(--color-text-muted)",transition:"color 120ms, border-color 120ms"},children:g.label},g.id)})})}function Co({children:t,offsetTop:n=0,size:r,className:o="",style:i}){const a=On(r),s=d.useRef(null),[l,u]=d.useState(!1);return d.useEffect(()=>{const p=s.current;if(!p)return;const h=()=>u(p.getBoundingClientRect().top<=n);return h(),window.addEventListener("scroll",h,{passive:!0,capture:!0}),()=>window.removeEventListener("scroll",h,{capture:!0})},[n]),e.jsx("div",{ref:s,className:o,style:{position:"sticky",top:n,zIndex:10,padding:`10px ${a.padding}`,background:"var(--color-surface)",borderBottom:"1px solid var(--color-surface-border)",boxShadow:l?"0 4px 12px rgba(0,0,0,.12)":"none",transition:"box-shadow 160ms",...i},children:t})}function wa({children:t,ratio:n,borderRadius:r,className:o="",style:i}){const a=kl(void 0,{borderRadius:r,aspectRatio:n});return e.jsx("div",{className:o,style:{position:"relative",width:"100%",aspectRatio:a.aspectRatio,borderRadius:a.borderRadius,overflow:"hidden",...i},children:e.jsx("div",{style:{position:"absolute",inset:0},children:t})})}function cs({children:t,columns:n=3,size:r,className:o="",style:i}){const a=On(r);return e.jsx("div",{className:o,style:{columnCount:n,columnGap:a.gap,...i},children:t.map((s,l)=>e.jsx("div",{style:{breakInside:"avoid",marginBottom:a.gap},children:s},l))})}function ds({children:t,direction:n="vertical",maxHeight:r,color:o,className:i="",style:a}){const s=o??"var(--color-primary)";return e.jsx("div",{className:`dui_scrollarea ${i}`,style:{overflowY:n!=="horizontal"?"auto":"hidden",overflowX:n!=="vertical"?"auto":"hidden",maxHeight:r,"--dui-scrollarea-accent":s},children:t})}function us({threshold:t=240,size:n,color:r,className:o=""}){const i=_n(n,{color:r}),a=r??i.defaultColor??"var(--color-primary)",[s,l]=d.useState(!1);d.useEffect(()=>{const p=()=>l(window.scrollY>t);return p(),window.addEventListener("scroll",p,{passive:!0,capture:!0}),()=>window.removeEventListener("scroll",p,{capture:!0})},[t]);const u=parseInt(i.height,10)*1.15;return s?e.jsx("button",{type:"button",className:o,onClick:()=>window.scrollTo({top:0,behavior:"smooth"}),"aria-label":"Back to top",style:{position:"fixed",bottom:24,right:24,zIndex:9e3,width:u,height:u,borderRadius:"999px",border:"none",background:a,color:"var(--color-btn-primary-text, #fff)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",boxShadow:"0 6px 20px rgba(0,0,0,.3)"},children:e.jsx(xd,{size:i.iconSize})}):null}function hi({children:t,text:n,angle:r=-22,gap:o=120,fontSize:i=14,color:a,opacity:s=.12,className:l="",style:u}){const p=a??"var(--color-text-primary)",h=d.useMemo(()=>{const f=`
       <svg xmlns="http://www.w3.org/2000/svg" width="${o}" height="${o}">
         <text x="0" y="${o/2}" transform="rotate(${r} ${o/2} ${o/2})"
           font-size="${i}" fill="${p}" fill-opacity="${s}"
@@ -70715,7 +70715,7 @@ def load_dashboard():
 />`,children:e.jsx("div",{style:{height:260,border:"1px solid var(--color-surface-border)",borderRadius:6,overflow:"hidden"},children:e.jsx(Ia,{session:T9,actions:{onStop:()=>{}},accentColor:"var(--color-success)"})})}),e.jsx(m,{title:"No Active Session — Empty State",description:"session.active=false — shows the empty 'Run and Debug' panel with no toolbar",code:`<DebugView
   session={{ active: false, status: 'idle' }}
   accentColor="var(--color-primary)"
-/>`,children:e.jsx("div",{style:{height:240,border:"1px solid var(--color-surface-border)",borderRadius:6,overflow:"hidden"},children:e.jsx(Ia,{session:{active:!1,status:"idle"},accentColor:"var(--color-primary)"})})})]})}const D_=["var(--color-primary)","var(--color-success)","var(--color-info)","var(--color-warning)","#a855f7","#ec4899","#14b8a6","#f97316"];function Ph(t){return D_[t%D_.length]}function _({title:t,description:n,children:r,style:o}){return e.jsxs("div",{style:{marginBottom:32,...o},children:[e.jsxs("div",{style:{marginBottom:n?6:12},children:[e.jsx("span",{style:{fontSize:11,fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--color-text-muted)"},children:t}),n&&e.jsx("p",{style:{margin:"4px 0 12px",fontSize:12.5,color:"var(--color-text-secondary)",lineHeight:1.6},children:n})]}),r]})}function I({features:t}){return e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:6,marginBottom:20},children:t.map((n,r)=>{const o=typeof n=="string"?n:n.label,i=typeof n=="string"?Ph(r):n.color??Ph(r),a=typeof n=="string"?void 0:n.description;return e.jsx("span",{title:a,style:{display:"inline-flex",alignItems:"center",padding:"3px 10px",borderRadius:99,fontSize:11,fontWeight:600,letterSpacing:"0.01em",background:`color-mix(in srgb, ${i} 14%, transparent)`,color:i,border:`1px solid color-mix(in srgb, ${i} 30%, transparent)`,cursor:a?"help":"default"},children:o},o)})})}function M({props:t}){return e.jsxs("div",{style:{border:"1px solid var(--color-surface-border)",borderRadius:10,overflow:"hidden",fontSize:12},children:[e.jsx("div",{style:{display:"grid",gridTemplateColumns:"1.4fr 1.6fr 0.8fr 2.5fr",background:"var(--color-surface)",borderBottom:"1px solid var(--color-surface-border)",padding:"7px 12px",gap:8},children:["Prop","Type","Default","Description"].map(n=>e.jsx("span",{style:{fontSize:10,fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--color-text-muted)"},children:n},n))}),t.map((n,r)=>e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1.4fr 1.6fr 0.8fr 2.5fr",padding:"9px 12px",gap:8,alignItems:"start",background:r%2===0?"transparent":"color-mix(in srgb, var(--color-surface) 40%, transparent)",borderBottom:r<t.length-1?"1px solid var(--color-surface-border)":"none"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4},children:[e.jsx("code",{style:{fontSize:11.5,fontFamily:"monospace",color:"var(--color-primary)",fontWeight:600},children:n.name}),n.required&&e.jsx("span",{style:{fontSize:9,fontWeight:700,color:"var(--color-error)",background:"color-mix(in srgb, var(--color-error) 12%, transparent)",border:"1px solid color-mix(in srgb, var(--color-error) 28%, transparent)",borderRadius:4,padding:"0px 4px"},children:"required"})]}),e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:"#a855f7",lineHeight:1.5,wordBreak:"break-word"},children:n.type}),n.default?e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:"var(--color-success)"},children:n.default}):e.jsx("span",{style:{color:"var(--color-text-muted)",fontSize:11},children:"—"}),e.jsx("span",{style:{fontSize:12,color:"var(--color-text-secondary)",lineHeight:1.55},children:n.description})]},n.name))]})}function xe({name:t,values:n}){return e.jsxs("div",{style:{marginBottom:16},children:[e.jsx("div",{style:{marginBottom:6},children:e.jsx("code",{style:{fontSize:12,fontFamily:"monospace",color:"#a855f7",fontWeight:600},children:t})}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:6},children:n.map((r,o)=>{const i=r.color??Ph(o);return e.jsxs("div",{title:r.description,style:{display:"flex",alignItems:"center",gap:6,padding:"4px 10px",borderRadius:7,border:`1px solid color-mix(in srgb, ${i} 30%, transparent)`,background:`color-mix(in srgb, ${i} 10%, transparent)`,cursor:"help"},children:[e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:i,fontWeight:600},children:r.value}),e.jsx("span",{style:{fontSize:10.5,color:"var(--color-text-muted)"},children:r.description})]},r.value)})})]})}const E9={info:{icon:"ℹ",color:"var(--color-info)",label:"Note"},warning:{icon:"⚠",color:"var(--color-warning)",label:"Warning"},tip:{icon:"✦",color:"var(--color-success)",label:"Tip"},danger:{icon:"⛔",color:"var(--color-error)",label:"Danger"}};function S({type:t="info",children:n}){const r=E9[t];return e.jsxs("div",{style:{display:"flex",gap:10,padding:"10px 14px",borderRadius:8,marginBottom:20,background:`color-mix(in srgb, ${r.color} 8%, transparent)`,border:`1px solid color-mix(in srgb, ${r.color} 24%, transparent)`},children:[e.jsx("span",{style:{color:r.color,flexShrink:0,fontSize:13,lineHeight:"18px"},children:r.icon}),e.jsxs("div",{children:[e.jsx("span",{style:{fontSize:11,fontWeight:700,color:r.color,textTransform:"uppercase",letterSpacing:"0.06em"},children:r.label}),e.jsx("div",{style:{marginTop:4,fontSize:12.5,color:"var(--color-text-secondary)",lineHeight:1.6},children:n})]})]})}function xt({children:t}){return e.jsx("code",{style:{fontFamily:"monospace",fontSize:11.5,background:"var(--color-surface)",border:"1px solid var(--color-surface-border)",borderRadius:4,padding:"1px 5px",color:"var(--color-primary)"},children:t})}function H({sizes:t}){return e.jsx("div",{style:{display:"flex",gap:12,flexWrap:"wrap",marginBottom:20},children:t.map(n=>e.jsxs("div",{style:{padding:"20px 18px",borderRadius:8,border:"1px solid var(--color-surface-border)",background:"var(--color-surface)",minWidth:96,textAlign:"center"},children:[e.jsx("div",{style:{fontSize:18,fontWeight:800,color:"var(--color-primary)",lineHeight:1},children:n.size}),e.jsxs("div",{style:{fontSize:10,color:"var(--color-text-muted)",marginTop:10},children:["h: ",n.height]}),e.jsxs("div",{style:{fontSize:10,color:"var(--color-text-muted)",marginTop:4},children:["fs: ",n.font]}),e.jsx("div",{style:{fontSize:10,color:"var(--color-text-secondary)",marginTop:8},children:n.desc})]},n.size))})}function jt({widths:t}){return e.jsx("div",{style:{display:"flex",gap:12,flexWrap:"wrap",marginBottom:20},children:t.map(n=>e.jsxs("div",{style:{padding:"20px 18px",borderRadius:8,border:"1px solid var(--color-surface-border)",background:"var(--color-surface)",minWidth:96,textAlign:"center"},children:[e.jsx("div",{style:{fontSize:16,fontWeight:800,color:"var(--color-info)",lineHeight:1},children:n.width}),e.jsx("div",{style:{fontSize:10,color:"var(--color-text-muted)",marginTop:10},children:n.value}),n.desc&&e.jsx("div",{style:{fontSize:10,color:"var(--color-text-secondary)",marginTop:8},children:n.desc})]},n.width))})}function Xe({radii:t}){return e.jsx("div",{style:{display:"flex",gap:12,flexWrap:"wrap",marginBottom:20},children:t.map(n=>e.jsxs("div",{style:{padding:"18px",borderRadius:8,border:"1px solid var(--color-surface-border)",background:"var(--color-surface)",minWidth:88,textAlign:"center"},children:[e.jsx("div",{style:{width:40,height:40,margin:"0 auto 10px",background:"var(--color-primary)",borderRadius:n.value==="full"?"999px":n.value}}),e.jsx("div",{style:{fontSize:14,fontWeight:800,color:"var(--color-warning)",lineHeight:1},children:n.radius}),e.jsx("div",{style:{fontSize:10,color:"var(--color-text-muted)",marginTop:6},children:n.value}),n.desc&&e.jsx("div",{style:{fontSize:10,color:"var(--color-text-secondary)",marginTop:6},children:n.desc})]},n.radius))})}function Od({variants:t}){return e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:8},children:t.map(n=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"6px 12px",borderRadius:8,border:`1px solid color-mix(in srgb, ${n.color} 30%, transparent)`,background:`color-mix(in srgb, ${n.color} 9%, transparent)`},children:[e.jsx("div",{style:{width:8,height:8,borderRadius:"50%",background:n.color,flexShrink:0}}),e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:11.5,fontWeight:600,color:n.color},children:n.label}),e.jsx("div",{style:{fontSize:10.5,color:"var(--color-text-muted)"},children:n.description})]})]},n.label))})}function C9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"5 sizes (xs → xl)",color:"var(--color-primary)"},{label:"Custom color + auto bg derivation",color:"var(--color-success)"},{label:"Active / filled state",color:"var(--color-info)"},{label:"Rounded or square border-radius",color:"var(--color-warning)"},{label:"Click handler",color:"#a855f7"},{label:"Background override (bg prop)",color:"#ec4899"},{label:"DuiProvider size context",color:"#14b8a6"},{label:"xs sub-sm alias for dense badges",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"label",type:"string",required:!0,description:"Text displayed inside the chip."},{name:"color",type:"string",default:"var(--color-primary)",description:"CSS variable or raw color value. Drives text, border, and auto-derived translucent background."},{name:"bg",type:"string",description:"Override the background explicitly instead of deriving it from color."},{name:"size",type:"ChipViewSize",default:"context",description:"Size of the chip. Falls back to DuiProvider context when omitted. xs is a sub-sm alias for dense protocol badges."},{name:"rounded",type:"boolean",default:"true",description:"true = rounded-full (pill shape). false = small token border-radius (4px)."},{name:"active",type:"boolean",default:"false",description:"When true, fills the chip with the accent color instead of a translucent tint. Text shifts to var(--color-chip-active-text)."},{name:"onClick",type:"() => void",description:"Click handler. When provided, cursor changes to pointer."},{name:"className",type:"string",description:"Additional Tailwind or CSS class names."},{name:"style",type:"CSSProperties",description:"Inline style override applied to the outer span."}]})}),e.jsx(_,{title:"ChipViewSize enum",children:e.jsx(xe,{name:"ChipViewSize",values:[{value:"xs",description:"Sub-sm fixed preset — 16px height, 9px font. For dense protocol badges.",color:"#f97316"},{value:"sm",description:"Small chip for tight UIs.",color:"var(--color-success)"},{value:"md",description:"Default medium chip.",color:"var(--color-primary)"},{value:"lg",description:"Large chip.",color:"var(--color-info)"},{value:"xl",description:"Extra-large chip for prominent labels.",color:"#a855f7"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"16px",font:"9px",desc:"Dense badge"},{size:"sm",height:"20px",font:"10px",desc:"Compact"},{size:"md",height:"24px",font:"11px",desc:"Default"},{size:"lg",height:"28px",font:"12px",desc:"Large"},{size:"xl",height:"32px",font:"13px",desc:"XL label"}]})}),e.jsx(S,{type:"tip",children:"The xs size bypasses the DUI size system — it is a fixed-dimension preset specifically for dense protocol badges (e.g. REST, GQL, WS). For all other usage, prefer sm or md."}),e.jsx(S,{type:"info",children:"When color is a CSS variable like var(--color-primary), the background is automatically derived as a 12% translucent mix. You can override the background independently with the bg prop without affecting text or border color."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"ChipView reads its dimensions from the shared chip category base hook (useChipBase). Omitting size, borderRadius, or color on ChipView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every chip-category component at once.",children:[e.jsx(I,{features:[{label:"useChipBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"10px",font:"12px",desc:"padX 11px, radius full"},{size:"xs",height:"12px",font:"12px",desc:"padX 11px, radius full"},{size:"sm",height:"16px",font:"9px",desc:"padX 5px, radius full"},{size:"md",height:"20px",font:"10px",desc:"padX 7px, radius full"},{size:"lg",height:"24px",font:"11px",desc:"padX 9px, radius full"},{size:"xl",height:"28px",font:"12px",desc:"padX 11px, radius full"},{size:"xxl",height:"32px",font:"12px",desc:"padX 11px, radius full"},{size:"xxxl",height:"38px",font:"12px",desc:"padX 11px, radius full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Chip category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every chip-category component in the tree."]})]})]})}function A9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"forwardRef compatible",color:"var(--color-primary)"},{label:"Left + Right icon slots",color:"var(--color-success)"},{label:"Masked / password mode with eye toggle",color:"var(--color-info)"},{label:"Error state (red border)",color:"var(--color-warning)"},{label:"Naked mode (no border/bg)",color:"#a855f7"},{label:"Custom accent focus ring",color:"#ec4899"},{label:"DUI container props (width, borderRadius)",color:"#14b8a6"},{label:"Extends all native input HTML attributes",color:"#f97316"},{label:"Font style override",color:"var(--color-primary)"},{label:"Prefix / suffix icon aliases",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"size",type:"TextInputSize",default:"'default'",description:"Size of the input. 'default' resolves to the DuiProvider context size (md equivalent)."},{name:"rounded",type:"boolean",default:"true",description:"true = token border-radius. false = 0px square corners."},{name:"accentColor",type:"string",description:"Override the focus border and ring color. Accepts any CSS variable or raw color value."},{name:"error",type:"boolean",default:"false",description:"When true, renders a red border. In naked mode, shows a red bottom underline + red text/caret."},{name:"iconLeft",type:"ReactNode",description:"Icon rendered inside the left edge of the input. Alias: prefixIcon."},{name:"iconRight",type:"ReactNode",description:"Icon rendered inside the right edge. Ignored when masked=true. Alias: suffixIcon."},{name:"prefixIcon",type:"ReactNode",description:"Alias for iconLeft."},{name:"suffixIcon",type:"ReactNode",description:"Alias for iconRight. Ignored when masked=true."},{name:"masked",type:"boolean",default:"false",description:"When true, the value is hidden (type=password) with an eye-toggle button on the right."},{name:"maskIcon",type:"{ hidden?: ReactNode; shown?: ReactNode }",description:"Custom icons for the masked toggle. Defaults to EyeOffIcon (hidden) / EyeIcon (shown)."},{name:"naked",type:"boolean",default:"false",description:"When true: no border, transparent background, no focus ring. For embedding inside containers that supply their own chrome."},{name:"width",type:"DuiWidth",description:"Width override for the input container. Accepts DUI token values or CSS strings."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override for the container."},{name:"color",type:"string",description:"Text color override for the input."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override, e.g. 'italic'."},{name:"...rest",type:"InputHTMLAttributes<HTMLInputElement>",description:"All native input attributes (placeholder, value, onChange, disabled, type, etc.) are forwarded to the underlying input element."}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"Dense"},{size:"sm",height:"24px",font:"11px",desc:"Compact"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"tip",children:"Use the naked prop when embedding TextInputView inside a parent container (e.g. SelectTextInputView) that provides its own border and background. The naked mode still shows an error state via a bottom underline when error=true."}),e.jsx(S,{type:"info",children:"When masked=true is set, any iconRight or suffixIcon is automatically suppressed — the eye toggle button takes exclusive ownership of the right slot."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"TextInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on TextInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function k9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal-rendered dropdown",color:"var(--color-primary)"},{label:"Smart viewport positioning (flip up/down)",color:"var(--color-success)"},{label:"Scroll + resize tracking",color:"var(--color-info)"},{label:"Keyboard navigation (↑ ↓ Enter Escape)",color:"var(--color-warning)"},{label:"Option icons",color:"#a855f7"},{label:"Badge chips on options",color:"#ec4899"},{label:"Group headers with auto-dividers",color:"#14b8a6"},{label:"Disabled state",color:"#f97316"},{label:"Custom accent focus ring",color:"var(--color-primary)"},{label:"Rounded or square corners",color:"var(--color-success)"},{label:"Per-option color",color:"var(--color-info)"},{label:"DUI container props",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"options",type:"SelectOption[]",required:!0,description:"Array of options to display. Use isHeader: true for non-selectable group label rows."},{name:"value",type:"string",required:!0,description:"Currently selected option value."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called when the user picks an option."},{name:"size",type:"SelectInputSize",default:"'default'",description:"'default' maps to 'md'. All DuiSize values accepted."},{name:"rounded",type:"boolean",default:"true",description:"true = size-derived border radius. false = 0px square."},{name:"placeholder",type:"string",description:"Text shown when no option is selected."},{name:"accentColor",type:"string",description:"Override focus border and selected-item highlight color."},{name:"disabled",type:"boolean",default:"false",description:"When true, the trigger is not interactive and shows at 50% opacity."},{name:"className",type:"string",description:"Additional class names for the outer wrapper div."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer wrapper div."},{name:"width",type:"string | number",description:"Width override for the select trigger. CSS string or pixel number."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override."}]})}),e.jsx(_,{title:"SelectOption shape",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Unique value identifier for the option."},{name:"label",type:"string",required:!0,description:"Display label for the option."},{name:"icon",type:"ReactNode",description:"Icon rendered before the label in both trigger and dropdown."},{name:"color",type:"string",description:"Override text color for this option in the dropdown."},{name:"isHeader",type:"boolean",description:"When true, renders as a non-selectable group header with an auto-divider above it."},{name:"badge",type:"{ label: string; color: string }",description:"Colored pill chip rendered before the label. Takes priority over icon in the trigger."}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"Dense"},{size:"sm",height:"24px",font:"11px",desc:"Compact"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The dropdown is portalled to document.body at z-index 99999. It automatically flips between opening below and above the trigger based on available viewport space, and repositions on scroll and resize."}),e.jsx(S,{type:"tip",children:"Use isHeader: true on an option to create group separators. Headers are rendered with an uppercase label and a horizontal divider above them (except for the very first group). They are not selectable and not focusable via keyboard."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SelectInputView reads its dimensions from the shared select category base hook (useSelectBase). Omitting size, width, borderRadius, or color on SelectInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every select-category component at once.",children:[e.jsx(I,{features:[{label:"useSelectBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"item padY 2px"},{size:"xs",height:"20px",font:"9px",desc:"item padY 3px"},{size:"sm",height:"24px",font:"10px",desc:"item padY 4px"},{size:"md",height:"28px",font:"11px",desc:"item padY 5px"},{size:"lg",height:"36px",font:"12px",desc:"item padY 7px"},{size:"xl",height:"40px",font:"13px",desc:"item padY 9px"},{size:"xxl",height:"48px",font:"14px",desc:"item padY 11px"},{size:"xxxl",height:"56px",font:"16px",desc:"item padY 14px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Select category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every select-category component in the tree."]})]})]})}function R9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Unified select + text input combo",color:"var(--color-primary)"},{label:"HTTP method color coding",color:"var(--color-success)"},{label:"URL autocomplete suggestions",color:"var(--color-info)"},{label:"Mock server quick-pick with server icon",color:"var(--color-warning)"},{label:"Keyboard navigation for suggestions (↑ ↓ Enter Esc)",color:"#a855f7"},{label:"Portal-rendered method + suggestion dropdowns",color:"#ec4899"},{label:"Scroll + resize position tracking",color:"#14b8a6"},{label:"Per-option accent color for select section",color:"#f97316"},{label:"Configurable select section width",color:"var(--color-primary)"},{label:"DUI container props (width, borderRadius)",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Overview",description:"SelectTextInputView combines a left-side option selector (typically HTTP method) with a right-side text input (typically a URL). Both share a single bordered container that highlights on focus, mirroring a browser URL bar pattern. The two dropdowns (method list and URL suggestions) are portalled independently.",children:e.jsx(S,{type:"info",children:"This is the mandatory component for any method + URL input row in DUI. Never build a custom pill-group plus a separate input — always use SelectTextInputView."})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"selectValue",type:"string",required:!0,description:'Currently selected option in the left selector (e.g. "GET").'},{name:"selectOptions",type:"SelectTextOption[]",required:!0,description:"Options shown in the left dropdown."},{name:"onSelectChange",type:"(value: string) => void",required:!0,description:"Called when the user picks a different option in the left selector."},{name:"inputValue",type:"string",required:!0,description:"Current text value of the right input field."},{name:"onInputChange",type:"(value: string) => void",required:!0,description:"Called on every keystroke in the text input."},{name:"placeholder",type:"string",default:"'Enter URL or paste text'",description:"Placeholder text for the text input."},{name:"size",type:"DuiSize",description:"Falls back to DuiProvider context when omitted."},{name:"disabled",type:"boolean",default:"false",description:"Disables both the selector and the text input."},{name:"accentColor",type:"string",description:"Accent border color applied when either section is focused."},{name:"selectWidth",type:"number",description:"Override the select section width in pixels. Defaults to a size-based preset."},{name:"suggestions",type:"string[]",default:"[]",description:"URL / text autocomplete suggestions. Filtered as the user types."},{name:"mockServers",type:"MockServerSuggestion[]",default:"[]",description:"Running mock server URLs shown at the top of suggestions with a server icon."},{name:"onMockServerSelect",type:"(url: string) => void",description:"Called in addition to onInputChange when the user picks a mock server entry."},{name:"onKeyDown",type:"(e: KeyboardEvent<HTMLInputElement>) => void",description:"Key down handler for the text input. Arrow keys and Enter are pre-empted by the suggestion keyboard navigation."},{name:"width",type:"DuiWidth",description:"Width of the entire combined control."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override."},{name:"color",type:"string",description:"Text color override for the input portion."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override."},{name:"className",type:"string",description:"Additional class names for the outer wrapper."}]})}),e.jsx(_,{title:"SelectTextOption shape",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:'Option value (e.g. "GET").'},{name:"label",type:"string",required:!0,description:'Display label (e.g. "GET").'},{name:"color",type:"string",description:"Accent color for this option. Method colors use var(--color-method-get), etc."}]})}),e.jsx(_,{title:"MockServerSuggestion shape",children:e.jsx(M,{props:[{name:"url",type:"string",required:!0,description:"Base URL of the running mock server."},{name:"name",type:"string",required:!0,description:"Human-readable name of the mock server, shown to the right of the URL."}]})}),e.jsx(_,{title:"Default select widths per size",children:e.jsx(H,{sizes:[{size:"xxs",height:"—",font:"—",desc:"44px"},{size:"xs",height:"—",font:"—",desc:"52px"},{size:"sm",height:"—",font:"—",desc:"64px"},{size:"md",height:"—",font:"—",desc:"80px"},{size:"lg",height:"—",font:"—",desc:"96px"},{size:"xl",height:"—",font:"—",desc:"112px"}]})}),e.jsx(S,{type:"tip",children:'Suggestions are filtered client-side to a maximum of 8 items. Mock server entries always appear above regular suggestions, labelled with a "Mock Servers" section header and a server icon.'}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SelectTextInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on SelectTextInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Width presets, resolved via the ",e.jsx("code",{children:"width"})," prop or the nearest ",e.jsx("code",{children:'<DuiProvider width="...">'}),":"]}),e.jsx(jt,{widths:[{width:"sm",value:"80px"},{width:"md",value:"120px"},{width:"default",value:"auto"},{width:"lg",value:"200px"},{width:"fullWidth",value:"100%"},{width:"maxContent",value:"max-content"},{width:"fw",value:"100%"},{width:"mx",value:"max-content"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function I9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"4 variants",color:"var(--color-primary)"},{label:"8+ sizes via DuiSize",color:"var(--color-success)"},{label:"Loading spinner state",color:"var(--color-info)"},{label:"Left + right icon slots",color:"var(--color-warning)"},{label:"Custom accent color for primary variant",color:"#a855f7"},{label:"label prop alias for children",color:"#ec4899"},{label:"Rounded or square corners",color:"#14b8a6"},{label:"DUI container props (width, borderRadius, color)",color:"#f97316"},{label:"Extends native button HTML attributes",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Variants",children:e.jsx(Od,{variants:[{label:"primary",description:"Filled accent background, white text. Use for the main CTA.",color:"var(--color-primary)"},{label:"secondary",description:"Surface background with border. Default variant.",color:"var(--color-info)"},{label:"ghost",description:"No background, no visible border. Subtle action.",color:"var(--color-text-muted)"},{label:"danger",description:"Red filled background for destructive actions.",color:"var(--color-error)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"variant",type:"ButtonVariant",default:"'secondary'",description:"Visual style of the button. See variants above."},{name:"size",type:"ButtonSize",default:"'default'",description:"'default' resolves to DuiProvider context size. Accepts all DuiSize values."},{name:"rounded",type:"boolean",default:"true",description:"true = token border-radius. false = 0px square."},{name:"iconLeft",type:"ReactNode",description:"Icon rendered to the left of the label. Hidden during loading (replaced by spinner)."},{name:"iconRight",type:"ReactNode",description:"Icon rendered to the right of the label. Hidden during loading."},{name:"loading",type:"boolean",default:"false",description:"When true, replaces iconLeft with a spinner and disables the button. The label text stays visible."},{name:"accentColor",type:"string",description:"Override the accent color used in 'primary' variant background and focus ring."},{name:"label",type:"string",description:"Alias for children — shown as button label text."},{name:"disabled",type:"boolean",default:"false",description:"Disables the button. Also triggered automatically when loading=true."},{name:"width",type:"DuiWidth",description:"Width override. Useful for full-width buttons."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override."},{name:"color",type:"string",description:"Text color override."},{name:"defaultColor",type:"string",description:"Primary/accent color alias with context-level support (alias for accentColor)."},{name:"activeColor",type:"string",description:"Color for active/focus ring state."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override."},{name:"...rest",type:"ButtonHTMLAttributes<HTMLButtonElement>",description:"All native button attributes (onClick, type, aria-*, etc.) forwarded to the button element."}]})}),e.jsx(_,{title:"ButtonVariant enum",children:e.jsx(xe,{name:"ButtonVariant",values:[{value:"primary",description:"Filled accent bg, white text",color:"var(--color-primary)"},{value:"secondary",description:"Surface bg, border, default text",color:"var(--color-info)"},{value:"ghost",description:"Transparent bg, secondary text",color:"var(--color-text-muted)"},{value:"danger",description:"Red filled, white text",color:"var(--color-error)"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"Dense toolbar"},{size:"sm",height:"24px",font:"11px",desc:"Compact"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"tip",children:"All buttons in the same toolbar or row must use the same size. Never mix xs (20px) and sm (24px) buttons side by side — the height difference is visually jarring in a single UI."}),e.jsx(S,{type:"info",children:"When loading=true, the button is automatically disabled and iconLeft is replaced by a spinner. The label text (children or label prop) remains visible so the user knows what operation is in progress."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"ButtonView reads its dimensions from the shared button category base hook (useButtonBase). Omitting size, width, borderRadius, or color on ButtonView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every button-category component at once.",children:[e.jsx(I,{features:[{label:"useButtonBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Width presets, resolved via the ",e.jsx("code",{children:"width"})," prop or the nearest ",e.jsx("code",{children:'<DuiProvider width="...">'}),":"]}),e.jsx(jt,{widths:[{width:"sm",value:"80px"},{width:"md",value:"120px"},{width:"default",value:"auto"},{width:"lg",value:"200px"},{width:"fullWidth",value:"100%"},{width:"maxContent",value:"max-content"},{width:"fw",value:"100%"},{width:"mx",value:"max-content"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Button category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every button-category component in the tree."]})]})]})}function D9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Square icon-only button",color:"var(--color-primary)"},{label:"ghost + filled variants",color:"var(--color-success)"},{label:"Active state with accent fill",color:"var(--color-info)"},{label:"Tooltip via title attribute",color:"var(--color-warning)"},{label:"Custom accent + active colors",color:"#a855f7"},{label:"Rounded or square corners",color:"#ec4899"},{label:"5 fixed pixel sizes",color:"#14b8a6"},{label:"DuiProvider color context",color:"#f97316"},{label:"Extends native button attributes",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Variants",children:e.jsx(Od,{variants:[{label:"ghost",description:"Transparent background. Dim icon, brightens on hover. Default variant.",color:"var(--color-text-muted)"},{label:"filled",description:"Translucent accent background at rest, solid on active.",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"icon",type:"ReactNode",required:!0,description:"The icon element to render. Use DUI icon components for consistent sizing."},{name:"size",type:"IconButtonSize",default:"'default'",description:"Fixed pixel size for the button square."},{name:"rounded",type:"boolean",default:"true",description:"true = 4px border-radius. false = 0px square."},{name:"tooltip",type:"string",description:"Native browser tooltip via the title attribute. Shown on hover."},{name:"variant",type:"IconButtonVariant",default:"'ghost'",description:"Visual style. ghost = transparent at rest. filled = tinted background."},{name:"accentColor",type:"string",description:"Override the accent color used for hover highlight and active state."},{name:"activeColor",type:"string",description:"Color used specifically when active=true. Falls back to accentColor."},{name:"active",type:"boolean",default:"false",description:"Shows the active state — filled tint on ghost variant, solid fill on filled variant."},{name:"disabled",type:"boolean",default:"false",description:"Disables the button and reduces opacity to 45%."},{name:"borderRadius",type:"DuiRadius | number",description:"Override border-radius (takes effect when rounded=true)."},{name:"color",type:"string",description:"Icon color override (applies at rest state)."},{name:"...rest",type:"ButtonHTMLAttributes<HTMLButtonElement>",description:"All native button attributes forwarded to the button element."}]})}),e.jsx(_,{title:"IconButtonVariant enum",children:e.jsx(xe,{name:"IconButtonVariant",values:[{value:"ghost",description:"No background, subtle muted icon",color:"var(--color-text-muted)"},{value:"filled",description:"Translucent accent tinted background",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Sizes (fixed pixel dimensions)",children:e.jsx(H,{sizes:[{size:"default",height:"26px",font:"—",desc:"Context default"},{size:"sm",height:"22px",font:"—",desc:"Compact toolbar"},{size:"md",height:"28px",font:"—",desc:"Standard"},{size:"lg",height:"32px",font:"—",desc:"Large"},{size:"xl",height:"36px",font:"—",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"Unlike ButtonView, IconButtonView uses fixed pixel dimensions rather than DuiTokens height values. The five sizes (default, sm, md, lg, xl) map to 26, 22, 28, 32, 36px squares respectively."}),e.jsx(S,{type:"tip",children:"Use the active prop for toggle-style icon buttons (e.g. a mute button, a filter toggle). The active state shifts the icon color to accentColor and adds a tinted background so the state is visually obvious."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"IconButtonView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["IconButtonView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function N9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Split button: primary action + dropdown chevron",color:"var(--color-primary)"},{label:"4 variants (primary, secondary, ghost, danger)",color:"var(--color-success)"},{label:"Optional left icon",color:"var(--color-info)"},{label:"ContextMenuView-backed dropdown",color:"var(--color-warning)"},{label:"Dropdown alignment (auto, left, right)",color:"#a855f7"},{label:"Rounded or square corners",color:"#ec4899"},{label:"DUI token-based sizing",color:"#14b8a6"},{label:"Disabled state",color:"#f97316"}]})}),e.jsx(_,{title:"Overview",description:"DropDownButtonView renders a split-button pattern: a clickable label section on the left and a chevron toggle on the right. The left side fires onPrimaryClick. The right side opens a ContextMenuView dropdown with the provided items. A vertical divider separates the two sections.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"label",type:"string",required:!0,description:"Text shown in the primary (left) button section."},{name:"items",type:"ContextMenuItem[]",required:!0,description:"Menu items for the dropdown. Passed directly to ContextMenuView."},{name:"icon",type:"ReactNode",description:"Optional icon rendered to the left of the label in the primary section."},{name:"variant",type:"ButtonVariant",default:"'secondary'",description:"Visual variant. primary = accent filled. secondary = surface + border. ghost = transparent. danger = red filled."},{name:"size",type:"ButtonSize",default:"'default'",description:"Falls back to DuiProvider context size. 'default' resolves to the context default."},{name:"rounded",type:"boolean",default:"true",description:"true = token border-radius on the outer wrapper and dropdown. false = 0px square."},{name:"accentColor",type:"string",description:"Override the accent color for the primary variant background."},{name:"disabled",type:"boolean",default:"false",description:"Disables both the primary button and the chevron. Reduces opacity to 50%."},{name:"onPrimaryClick",type:"() => void",description:"Called when the user clicks the label/icon section (not the chevron)."},{name:"align",type:"'auto' | 'left' | 'right'",default:"'auto'",description:"Dropdown alignment relative to the button. 'right' keeps the menu right-edge aligned with the button (opens leftward)."},{name:"className",type:"string",description:"Additional class names for the outer wrapper div."}]})}),e.jsx(_,{title:"ButtonVariant enum",children:e.jsx(xe,{name:"ButtonVariant",values:[{value:"primary",description:"Filled accent background",color:"var(--color-primary)"},{value:"secondary",description:"Surface + border (default)",color:"var(--color-info)"},{value:"ghost",description:"No background",color:"var(--color-text-muted)"},{value:"danger",description:"Red filled",color:"var(--color-error)"}]})}),e.jsx(S,{type:"info",children:'The dropdown uses ContextMenuView internally with matchAnchorWidth=false and width="md" by default. For full control over menu items (icons, shortcuts, danger styling, submenus), use the ContextMenuItem shape documented in ContextMenuViewDocs.'}),e.jsx(S,{type:"tip",children:"The divider between label and chevron automatically adapts its color to match the variant: white at 25% opacity for primary/danger, and var(--color-surface-border) for secondary/ghost."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"DropDownButtonView reads its dimensions from the shared button category base hook (useButtonBase). Omitting size, width, borderRadius, or color on DropDownButtonView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every button-category component at once.",children:[e.jsx(I,{features:[{label:"useButtonBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Button category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every button-category component in the tree."]})]})]})}function L9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal-rendered at document.body",color:"var(--color-primary)"},{label:"Anchor-element or cursor-position trigger",color:"var(--color-success)"},{label:"Infinite recursive submenus",color:"var(--color-info)"},{label:"Keyboard shortcut binding (Escape + single-key)",color:"var(--color-warning)"},{label:"Danger styling per item",color:"#a855f7"},{label:"Separator / divider items",color:"#ec4899"},{label:"Optional icons and keyboard shortcuts displayed",color:"#14b8a6"},{label:"Viewport-safe auto positioning",color:"#f97316"},{label:"Dropdown alignment (auto, left, right)",color:"var(--color-primary)"},{label:"Match anchor width option",color:"var(--color-success)"},{label:"Open/close animation (dui_menu-in)",color:"var(--color-info)"},{label:"Disabled per-item state",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"items",type:"ContextMenuItem[]",required:!0,description:"Array of menu items. Items with separator=true render as horizontal dividers."},{name:"anchorEl",type:"HTMLElement | null",required:!0,description:"The element to anchor the menu to. Menu opens below this element. Pass null to use position instead."},{name:"open",type:"boolean",required:!0,description:"Controls the visibility of the menu."},{name:"onClose",type:"() => void",required:!0,description:"Called when the user clicks outside the menu, presses Escape, or clicks a non-submenu item."},{name:"width",type:"ContextMenuWidth",default:"'auto'",description:"Width of the menu. 'auto' = max-content. 'sm' = 140px. 'md' = 180px. 'lg' = 220px. number = px value."},{name:"rounded",type:"boolean",default:"true",description:"true = 8px border-radius on the menu, 5px on items. false = 0px square."},{name:"matchAnchorWidth",type:"boolean",default:"false",description:"When true, the menu width is set to match the anchor element width."},{name:"position",type:"{ x: number; y: number }",description:"Alternative to anchorEl. Positions the menu at a specific viewport coordinate (for right-click context menus)."},{name:"align",type:"'auto' | 'left' | 'right'",default:"'auto'",description:"Menu alignment relative to anchor. 'right' right-aligns with the anchor (opens leftward). 'left' always left-aligns. 'auto' chooses based on viewport space."}]})}),e.jsx(_,{title:"ContextMenuItem shape",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for the item. Used as the React key."},{name:"label",type:"string",required:!0,description:"Display text for the item."},{name:"icon",type:"ReactNode",description:"Icon rendered to the left of the label. Rendered in a 14px wide flex container."},{name:"shortcut",type:"string",description:"Keyboard shortcut hint displayed on the right side. Also wired as a keyboard shortcut when the menu is open. Use '⌫' to match Backspace/Delete."},{name:"danger",type:"boolean",description:"When true, the item and its icon render in var(--color-error) red."},{name:"disabled",type:"boolean",description:"When true, the item is shown at 45% opacity and clicks are ignored."},{name:"separator",type:"boolean",description:"When true, the item renders as a horizontal 1px divider line, ignoring all other props."},{name:"children",type:"ContextMenuItem[]",description:"Nested menu items. Hovering this item opens a submenu portalled to document.body, positioned to the right (auto-flips if needed)."},{name:"onClick",type:"() => void",description:"Handler called when the item is clicked. Also used by shortcut binding."}]})}),e.jsx(_,{title:"ContextMenuWidth enum",children:e.jsx(xe,{name:"ContextMenuWidth",values:[{value:"auto",description:"max-content — menu is as wide as the longest item",color:"var(--color-text-muted)"},{value:"sm",description:"140px",color:"var(--color-success)"},{value:"md",description:"180px",color:"var(--color-primary)"},{value:"lg",description:"220px",color:"var(--color-info)"}]})}),e.jsx(S,{type:"info",children:"Submenu portals are also attached to document.body and positioned independently. Each level of nesting has its own sibling-coordination state so only one child submenu can be open at a time per menu level."}),e.jsx(S,{type:"tip",children:`Shortcuts are fired globally while the menu is open. A shortcut of "D" fires the item's onClick when the user presses D. The special shortcut "⌫" matches both Backspace and Delete.`}),e.jsx(S,{type:"warning",children:"Items with children (submenus) do not fire onClick — clicking them opens the submenu instead. Add onClick only to leaf items."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ContextMenuView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ContextMenuView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function P9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"3 variants: pill, underline, chip",color:"var(--color-primary)"},{label:"Animated sliding indicator",color:"var(--color-success)"},{label:"Badge count per tab",color:"var(--color-info)"},{label:"Dot indicator per tab",color:"var(--color-warning)"},{label:"Per-badge custom color",color:"#a855f7"},{label:"Per-dot custom color",color:"#ec4899"},{label:"Custom accent + inactive color",color:"#14b8a6"},{label:"DUI container props (width, borderRadius)",color:"#f97316"},{label:"DuiProvider size context",color:"var(--color-primary)"},{label:"ARIA role=tablist + aria-selected",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Variants",children:e.jsx(Od,{variants:[{label:"pill",description:"Track background with animated sliding pill indicator. Default.",color:"var(--color-primary)"},{label:"underline",description:"No track, animated 2px bottom underline slides under the active tab.",color:"var(--color-info)"},{label:"chip",description:"Each tab is an independent pill chip; no shared track or underline.",color:"#a855f7"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tabs",type:"TabItem[]",required:!0,description:"Array of tab items to render."},{name:"activeTab",type:"string",required:!0,description:"The id of the currently active tab."},{name:"onChange",type:"(id: string) => void",required:!0,description:"Called when the user clicks a tab."},{name:"size",type:"DuiSize",description:"Falls back to DuiProvider context when omitted."},{name:"variant",type:"TabVariant",default:"'pill'",description:"Visual variant of the tab bar."},{name:"accentColor",type:"string",description:"Color for the active indicator, active tab text, and badge fills. Overrides base.activeColor."},{name:"className",type:"string",description:"Additional class names for the container element."},{name:"width",type:"DuiWidth",description:"Width of the tab container. When set, the container stretches to fill and tabs share space equally."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override (applies to pill track and pill indicator)."},{name:"color",type:"string",description:"Override color for inactive tab text."},{name:"activeColor",type:"string",description:"Color for the active tab indicator and text. Alias for accentColor with context-level support."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override for tab labels."}]})}),e.jsx(_,{title:"TabItem shape",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for the tab."},{name:"label",type:"string",required:!0,description:"Display text of the tab."},{name:"badge",type:"number",description:"Count shown as a pill badge to the right of the label. Only rendered when > 0."},{name:"dot",type:"boolean",description:"When true, shows a small colored dot indicator to the right of the label."},{name:"dotColor",type:"string",description:"Override color for the dot indicator. Defaults to the accent color."},{name:"badgeColor",type:"string",description:"Override color for the badge pill. Defaults to the accent color."}]})}),e.jsx(_,{title:"TabVariant enum",children:e.jsx(xe,{name:"TabVariant",values:[{value:"pill",description:"Track with sliding pill background indicator",color:"var(--color-primary)"},{value:"underline",description:"Sliding 2px bottom border indicator",color:"var(--color-info)"},{value:"chip",description:"Independent rounded chip per tab",color:"#a855f7"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"Dense"},{size:"sm",height:"24px",font:"11px",desc:"Compact"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The animated indicator uses useLayoutEffect to measure the active tab's offsetLeft and offsetWidth after each render, then transitions left and width with a 200ms ease-out. This means the animation also runs correctly during tab reordering."}),e.jsx(S,{type:"tip",children:"For browser-style tab bars with closeable tabs and a new-tab button, use TabBarView instead. TabView is for in-panel section switching (e.g. Headers / Body / Auth)."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"TabView reads its dimensions from the shared tab category base hook (useTabBase). Omitting size, width, borderRadius, or color on TabView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every tab-category component at once.",children:[e.jsx(I,{features:[{label:"useTabBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 18px"},{size:"xs",height:"20px",font:"9px",desc:"padX 18px"},{size:"sm",height:"24px",font:"10px",desc:"padX 10px"},{size:"md",height:"28px",font:"11px",desc:"padX 12px"},{size:"lg",height:"36px",font:"12px",desc:"padX 14px"},{size:"xl",height:"40px",font:"13px",desc:"padX 18px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 18px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 18px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Width presets, resolved via the ",e.jsx("code",{children:"width"})," prop or the nearest ",e.jsx("code",{children:'<DuiProvider width="...">'}),":"]}),e.jsx(jt,{widths:[{width:"sm",value:"80px"},{width:"md",value:"120px"},{width:"default",value:"auto"},{width:"lg",value:"200px"},{width:"fullWidth",value:"100%"},{width:"maxContent",value:"max-content"},{width:"fw",value:"100%"},{width:"mx",value:"max-content"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Tab category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every tab-category component in the tree."]})]})]})}function M9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Browser-style horizontal tab bar",color:"var(--color-primary)"},{label:"Protocol color badges (REST, GQL, WS, gRPC, SOAP, AI, MCP)",color:"var(--color-success)"},{label:"HTTP method color labels (GET, POST, PUT…)",color:"var(--color-info)"},{label:"Realtime protocol sub-badges (WS, SSE, SIO, MQTT)",color:"var(--color-warning)"},{label:"Scroll left/right when tabs overflow",color:"#a855f7"},{label:"Active top-border indicator per tab",color:"#ec4899"},{label:"Dirty (unsaved) dot indicator",color:"#14b8a6"},{label:"Pinned tab (no close button)",color:"#f97316"},{label:"Add tab button",color:"var(--color-primary)"},{label:"Settings and mock-server special tab types",color:"var(--color-success)"},{label:"DuiProvider size context",color:"var(--color-info)"},{label:"Raw pixel height override",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tabs",type:"TabBarTab[]",required:!0,description:"Array of tab objects to render."},{name:"activeTabId",type:"string",required:!0,description:"The id of the currently active tab."},{name:"onTabClick",type:"(id: string) => void",required:!0,description:"Called when the user clicks a tab to switch to it."},{name:"onTabClose",type:"(id: string) => void",description:"Called when the close (×) button is clicked on a tab. The close button is hidden for pinned tabs."},{name:"onAddTab",type:"() => void",description:"When provided, shows a + button after all tabs to create a new tab."},{name:"accentColor",type:"string",default:"var(--color-primary)",description:"Fallback accent color for tabs that have no protocol or type set."},{name:"size",type:"DuiSize",description:"Falls back to DuiProvider context when omitted. Uses nav heights (taller than input heights for click comfort)."},{name:"height",type:"number",description:"Raw pixel height override. Prefer size for token-aligned sizing."},{name:"className",type:"string",description:"Additional class names for the root container div."}]})}),e.jsx(_,{title:"TabBarTab shape",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for the tab."},{name:"label",type:"string",required:!0,description:"Display label of the tab."},{name:"type",type:"TabBarTabType",description:"Special tab type. 'settings' shows a gear icon. 'mock-server' shows a server icon. These two types are non-closeable."},{name:"protocol",type:"TabBarProtocol",description:"Protocol badge shown before the label. Drives the top-border accent color."},{name:"method",type:"string",description:"HTTP method for REST tabs (e.g. 'GET', 'POST'). Shown as a colored monospace label instead of a protocol badge."},{name:"dirty",type:"boolean",description:"When true, shows a small colored dot to the right of the label to indicate unsaved changes."},{name:"pinned",type:"boolean",description:"When true, hides the close button and shows a 📌 pin indicator."},{name:"rtProtocol",type:"RealtimeProtocol",description:"Realtime sub-protocol for websocket tabs. Drives the badge label: 'WS', 'SSE', 'SIO', 'MQTT'."}]})}),e.jsx(_,{title:"TabBarProtocol enum",children:e.jsx(xe,{name:"TabBarProtocol",values:[{value:"rest",description:"REST — var(--color-protocol-rest)",color:"var(--color-protocol-rest)"},{value:"graphql",description:"GraphQL — var(--color-protocol-graphql)",color:"#ec4899"},{value:"websocket",description:"WebSocket — var(--color-protocol-websocket)",color:"#14b8a6"},{value:"grpc",description:"gRPC — var(--color-protocol-grpc)",color:"#f97316"},{value:"soap",description:"SOAP — var(--color-protocol-soap)",color:"#a855f7"},{value:"ai",description:"AI — var(--color-protocol-ai)",color:"var(--color-primary)"},{value:"mcp",description:"MCP — var(--color-protocol-mcp)",color:"var(--color-info)"}]})}),e.jsx(_,{title:"Sizes (nav heights — taller than input heights)",children:e.jsx(H,{sizes:[{size:"xs",height:"28px",font:"10px",desc:"Dense nav"},{size:"sm",height:"32px",font:"11px",desc:"Compact"},{size:"md",height:"36px",font:"12px",desc:"Default"},{size:"lg",height:"40px",font:"13px",desc:"Large"},{size:"xl",height:"44px",font:"14px",desc:"XL nav"}]})}),e.jsx(S,{type:"info",children:"The tab list scrolls horizontally when there are too many tabs to fit. Scroll arrow buttons appear automatically at the left and right edges when scrolling is possible, detected by a ResizeObserver."}),e.jsx(S,{type:"tip",children:"For simple in-panel tab switching without close buttons or protocol badges, use TabView instead. TabBarView is specifically designed for the application chrome tab row at the top of the workspace."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"TabBarView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs(S,{type:"info",children:["TabBarView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function j9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Monaco Editor core",color:"var(--color-primary)"},{label:"12 languages",color:"var(--color-info)"},{label:"Read-only mode",color:"var(--color-text-muted)"},{label:"DUI context menu",color:"var(--color-success)"},{label:"Native context menu",color:"var(--color-text-muted)"},{label:"EditorOptions API",color:"#a855f7"},{label:"9 Monaco enums",color:"#ec4899"},{label:"Auto-layout",color:"var(--color-warning)"},{label:"Theme sync",color:"var(--color-success)"},{label:"dk.* IntelliSense",color:"#14b8a6"},{label:"GraphQL completions",color:"var(--color-primary)"},{label:"XML auto-format",color:"var(--color-info)"}]})}),e.jsxs(S,{type:"tip",children:["Use ",e.jsx(xt,{children:'contextMenuMode="dui"'})," with ",e.jsx(xt,{children:"contextMenuItems"})," to replace Monaco's default right-click menu with DUI's recursive ContextMenuView — supports icons, submenus, danger items, and separators."]}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Current editor content — controlled."},{name:"onChange",type:"(val: string) => void",description:"Called on every change with the new full content string."},{name:"language",type:"EditorLanguage",default:"'json'",description:"Syntax highlighting language. See EditorLanguage enum below."},{name:"height",type:"string | number",default:"300",description:"Editor container height. Pass a number (pixels) or a CSS string like '200px' or '40vh'."},{name:"readOnly",type:"boolean",default:"false",description:"Disable all editing. Editor becomes a styled read-only viewer."},{name:"fontSize",type:"number",default:"12",description:"Editor font size in pixels."},{name:"wordWrap",type:"'on' | 'off'",default:"'off'",description:"Quick soft word-wrap toggle. Overridden by editorOptions.wordWrap if both are set — use one or the other."},{name:"glyphMargin",type:"boolean",default:"false",description:"Reserve space for the glyph margin column. Required when using DebugEditorView breakpoint glyphs."},{name:"placeholder",type:"string",description:"Placeholder text shown when the editor is empty."},{name:"contextMenuMode",type:"EditorContextMenuMode",default:"'native'",description:"Controls right-click menu. 'native' = Monaco default. 'dui' = suppress Monaco menu and show DUI ContextMenuView at cursor position."},{name:"contextMenuItems",type:"ContextMenuItem[]",description:"Menu items for DUI context menu. Only active when contextMenuMode='dui'. Supports icons, separators, danger, submenus."},{name:"editorOptions",type:"EditorOptions",description:"Fine-grained Monaco editor options. Consumer values override DUI defaults. DUI always controls: automaticLayout, contextmenu, fixedOverflowWidgets, glyphMargin."},{name:"accentColor",type:"string",description:"CSS color for cursor and selection highlight."},{name:"style",type:"CSSProperties",description:"Style applied to the editor container div."},{name:"className",type:"string",description:"CSS class name for the editor container."}]})}),e.jsx(_,{title:"EditorLanguage",description:"Syntax highlighting languages supported by MonacoEditor.",children:e.jsx(xe,{name:"EditorLanguage",values:[{value:"json",description:"JSON — default language"},{value:"javascript",description:"JavaScript (.js)"},{value:"typescript",description:"TypeScript (.ts)"},{value:"graphql",description:"GraphQL schema + queries",color:"#e535ab"},{value:"xml",description:"XML / SOAP / HTML"},{value:"html",description:"HTML markup"},{value:"css",description:"CSS stylesheets"},{value:"yaml",description:"YAML configuration"},{value:"python",description:"Python (.py)"},{value:"markdown",description:"Markdown text"},{value:"plaintext",description:"No highlighting"},{value:"java",description:"Java source"},{value:"proto",description:"Protocol Buffers (.proto)"}]})}),e.jsx(_,{title:"EditorContextMenuMode",description:"Controls which context menu appears on right-click.",children:e.jsx(xe,{name:"EditorContextMenuMode",values:[{value:"native",description:"Monaco's default context menu (Format, Find, etc.)",color:"var(--color-text-muted)"},{value:"dui",description:"Suppress Monaco menu — show DUI ContextMenuView with contextMenuItems",color:"var(--color-success)"}]})}),e.jsx(_,{title:"EditorOptions",description:"All fields are optional. Consumer values override DUI defaults. Structural options (automaticLayout, contextmenu, fixedOverflowWidgets, glyphMargin) are always controlled by DUI and cannot be overridden.",children:e.jsx(M,{props:[{name:"lineNumbers",type:"EditorLineNumbers",default:"'on'",description:"Line number display mode."},{name:"lineHeight",type:"number",description:"Line height in pixels."},{name:"letterSpacing",type:"number",description:"Letter spacing in pixels."},{name:"rulers",type:"number[]",description:"Column ruler positions (e.g. [80, 120])."},{name:"renderWhitespace",type:"EditorRenderWhitespace",default:"'none'",description:"Whitespace character rendering."},{name:"minimap",type:"boolean",default:"false",description:"Show Monaco minimap."},{name:"scrollBeyondLastLine",type:"boolean",default:"false",description:"Allow scrolling past the last line."},{name:"smoothScrolling",type:"boolean",default:"false",description:"Smooth animated scrolling."},{name:"mouseWheelZoom",type:"boolean",default:"false",description:"Ctrl+scroll to zoom font size."},{name:"cursorStyle",type:"EditorCursorStyle",default:"'line'",description:"Shape of the text cursor."},{name:"cursorBlinking",type:"EditorCursorBlinking",default:"'blink'",description:"Cursor blink animation style."},{name:"tabSize",type:"number",default:"2",description:"Number of spaces per tab character."},{name:"wordWrap",type:"EditorWordWrap",default:"'off'",description:"Word wrap behavior."},{name:"formatOnPaste",type:"boolean",default:"false",description:"Auto-format content on paste."},{name:"formatOnType",type:"boolean",default:"false",description:"Auto-format as user types."},{name:"autoIndent",type:"EditorAutoIndent",default:"'keep'",description:"Auto-indent strategy."},{name:"folding",type:"boolean",default:"true",description:"Enable code folding."},{name:"showFoldingControls",type:"EditorFoldingControls",default:"'mouseover'",description:"When to show folding arrows."},{name:"matchBrackets",type:"EditorMatchBrackets",default:"'always'",description:"Bracket matching highlight."},{name:"bracketPairColorization",type:"boolean",default:"true",description:"Color-code bracket pairs."},{name:"quickSuggestions",type:"boolean",default:"true",description:"IntelliSense auto-trigger suggestions."},{name:"suggestOnTriggerCharacters",type:"boolean",default:"true",description:"Show suggestions on trigger chars (., (, etc.)."},{name:"acceptSuggestionOnEnter",type:"EditorAcceptSuggestion",default:"'on'",description:"Accept suggestion on Enter key."},{name:"parameterHints",type:"boolean",default:"true",description:"Show function parameter hints."},{name:"hover",type:"boolean",default:"true",description:"Show hover tooltip on token."},{name:"codeLens",type:"boolean",default:"false",description:"Show CodeLens annotations above code."},{name:"inlayHints",type:"boolean",default:"false",description:"Show inline type/value hints."},{name:"colorDecorators",type:"boolean",default:"true",description:"Color swatch decorators for CSS color values."},{name:"linkedEditing",type:"boolean",default:"false",description:"Linked renaming (rename tag opens closing tag)."},{name:"copyWithSyntaxHighlighting",type:"boolean",default:"true",description:"Include syntax highlighting when copying to clipboard."},{name:"padding",type:"{ top?: number; bottom?: number }",description:"Editor content padding in pixels."}]})}),e.jsxs(_,{title:"Monaco Enums",description:"Use these const enum objects instead of raw strings for type-safety and IntelliSense.",children:[e.jsx(xe,{name:"EditorLineNumbers",values:[{value:"EditorLineNumbers.ON",description:"Show absolute line numbers",color:"var(--color-success)"},{value:"EditorLineNumbers.OFF",description:"Hide line numbers",color:"var(--color-text-muted)"},{value:"EditorLineNumbers.RELATIVE",description:"Show relative line numbers (vim-style)",color:"var(--color-primary)"},{value:"EditorLineNumbers.INTERVAL",description:"Show numbers at intervals only",color:"var(--color-info)"}]}),e.jsx(xe,{name:"EditorCursorStyle",values:[{value:"EditorCursorStyle.LINE",description:"Thin vertical bar (default)",color:"var(--color-primary)"},{value:"EditorCursorStyle.BLOCK",description:"Full block cursor",color:"#a855f7"},{value:"EditorCursorStyle.UNDERLINE",description:"Underline cursor",color:"var(--color-info)"},{value:"EditorCursorStyle.LINE_THIN",description:"Thinner line",color:"var(--color-text-muted)"},{value:"EditorCursorStyle.BLOCK_OUTLINE",description:"Block outline only",color:"var(--color-warning)"},{value:"EditorCursorStyle.UNDERLINE_THIN",description:"Thin underline",color:"var(--color-text-muted)"}]}),e.jsx(xe,{name:"EditorCursorBlinking",values:[{value:"EditorCursorBlinking.BLINK",description:"Standard on/off blink",color:"var(--color-primary)"},{value:"EditorCursorBlinking.SMOOTH",description:"Fade in/out blink",color:"var(--color-success)"},{value:"EditorCursorBlinking.PHASE",description:"Phase animation",color:"#a855f7"},{value:"EditorCursorBlinking.EXPAND",description:"Expand animation",color:"var(--color-warning)"},{value:"EditorCursorBlinking.SOLID",description:"No blinking — always visible",color:"var(--color-info)"}]}),e.jsx(xe,{name:"EditorWordWrap",values:[{value:"EditorWordWrap.OFF",description:"No word wrap (default)",color:"var(--color-text-muted)"},{value:"EditorWordWrap.ON",description:"Wrap at viewport width",color:"var(--color-success)"},{value:"EditorWordWrap.WORD_WRAP_COLUMN",description:"Wrap at wordWrapColumn setting",color:"var(--color-primary)"},{value:"EditorWordWrap.BOUNDED",description:"Wrap at min(viewport, wordWrapColumn)",color:"var(--color-info)"}]}),e.jsx(xe,{name:"EditorRenderWhitespace",values:[{value:"EditorRenderWhitespace.NONE",description:"Hidden (default)",color:"var(--color-text-muted)"},{value:"EditorRenderWhitespace.BOUNDARY",description:"Only leading/trailing",color:"var(--color-warning)"},{value:"EditorRenderWhitespace.SELECTION",description:"Only in selected text",color:"var(--color-info)"},{value:"EditorRenderWhitespace.TRAILING",description:"Only trailing whitespace",color:"#ec4899"},{value:"EditorRenderWhitespace.ALL",description:"All whitespace visible",color:"var(--color-success)"}]}),e.jsx(xe,{name:"EditorFoldingControls",values:[{value:"EditorFoldingControls.ALWAYS",description:"Always show fold arrows",color:"var(--color-primary)"},{value:"EditorFoldingControls.NEVER",description:"Hide fold arrows entirely",color:"var(--color-text-muted)"},{value:"EditorFoldingControls.MOUSEOVER",description:"Show on hover (default)",color:"var(--color-success)"}]}),e.jsx(xe,{name:"EditorAutoIndent",values:[{value:"EditorAutoIndent.NONE",description:"No auto-indent",color:"var(--color-text-muted)"},{value:"EditorAutoIndent.KEEP",description:"Keep current indentation (default)",color:"var(--color-info)"},{value:"EditorAutoIndent.BRACKETS",description:"Indent inside brackets",color:"var(--color-primary)"},{value:"EditorAutoIndent.ADVANCED",description:"Language-aware advanced indent",color:"var(--color-warning)"},{value:"EditorAutoIndent.FULL",description:"Full language-specific indent",color:"var(--color-success)"}]}),e.jsx(xe,{name:"EditorAcceptSuggestion",values:[{value:"EditorAcceptSuggestion.ON",description:"Enter always accepts suggestion (default)",color:"var(--color-success)"},{value:"EditorAcceptSuggestion.OFF",description:"Enter never accepts",color:"var(--color-text-muted)"},{value:"EditorAcceptSuggestion.SMART",description:"Enter accepts only when suggestion is first",color:"var(--color-primary)"}]})]}),e.jsxs(S,{type:"warning",children:[e.jsx("strong",{children:"DUI-owned options"})," — these are always set by DUI and cannot be overridden via ",e.jsx(xt,{children:"editorOptions"}),":"," ",e.jsx(xt,{children:"automaticLayout"}),", ",e.jsx(xt,{children:"contextmenu"}),", ",e.jsx(xt,{children:"fixedOverflowWidgets"}),", ",e.jsx(xt,{children:"glyphMargin"}),". They are structural requirements of the DUI editor shell and breakpoint gutter."]}),e.jsxs(S,{type:"info",children:[e.jsx("strong",{children:"DebugEditorView"})," is a specialized variant of EditorView that adds breakpoint gutter clicks, paused-line highlight, and variable-hover tooltips. See the DebugEditorView panel for its own props and adapter API."]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"EditorView maps its size prop to an editor-specific font-size scale (mirroring useEditorBase / DUI_EDITOR_FONT_SIZE) rather than the standard input height/padding tokens, since code needs a larger, monospaced font than label-sized UI text. An explicit fontSize prop always takes precedence over size.",children:[e.jsx(I,{features:[{label:"Editor font-size scale (DUI_EDITOR_FONT_SIZE)",color:"var(--color-primary)"},{label:"fontSize prop overrides size",color:"var(--color-success)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"—",font:"10px",desc:"editor font-size"},{size:"xs",height:"—",font:"11px",desc:"editor font-size"},{size:"sm",height:"—",font:"11px",desc:"editor font-size"},{size:"md",height:"—",font:"12px",desc:"editor font-size (default)"},{size:"lg",height:"—",font:"13px",desc:"editor font-size"},{size:"xl",height:"—",font:"14px",desc:"editor font-size"},{size:"xxl",height:"—",font:"15px",desc:"editor font-size"},{size:"xxxl",height:"—",font:"16px",desc:"editor font-size"}]}),e.jsxs(S,{type:"info",children:["These values come from ",e.jsx("code",{children:"DUI_EDITOR_FONT_SIZE"})," in ",e.jsx("code",{children:"DuiTokens.ts"})," — deliberately larger than the standard ",e.jsx("code",{children:"DUI_FONT_SIZE"})," scale used by label-sized components. Omitting size falls back to 'md' (12px); EditorView does not read ambient ","<DuiProvider>"," size context directly."]})]})]})}function O9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",description:"This panel shows how DUI primitives combine into the real Daakia UI patterns. These are not standalone components — they are assembly recipes.",children:e.jsx(I,{features:[{label:"URL bar assembly",color:"var(--color-primary)"},{label:"Tab bar pattern",color:"var(--color-success)"},{label:"Sidebar layout",color:"var(--color-info)"},{label:"Settings layout",color:"var(--color-warning)"},{label:"Response panel",color:"#a855f7"},{label:"Form data pattern",color:"#ec4899"}]})}),e.jsx(_,{title:"URL bar pattern",children:e.jsxs(S,{type:"info",children:["The Daakia URL bar is a ",e.jsx(xt,{children:"MergedInputView"})," with segments:",e.jsx("br",{}),e.jsx("code",{children:"[select:method] + [divider] + [HighlightedInputView:url] + [button:Send]"}),e.jsx("br",{}),"The entire bar shares one border and one focus ring. Alternatively, use ",e.jsx(xt,{children:"SelectTextInputView"})," for method + URL pairs that don't need a custom URL input."]})}),e.jsx(_,{title:"Tab bar pattern",children:e.jsxs(S,{type:"tip",children:["Protocol-level tabs (REST, GraphQL, WebSocket, gRPC, SOAP) use ",e.jsx(xt,{children:"TabView"})," with ",e.jsx("code",{children:'variant="underline"'}),". Sub-section tabs within a panel (Headers, Body, Auth) use ",e.jsx("code",{children:'variant="chip"'}),". Never build a custom tab row with raw buttons."]})}),e.jsx(_,{title:"Sidebar layout",children:e.jsxs(S,{type:"info",children:["The collection sidebar uses ",e.jsx(xt,{children:"SideNavView"})," with ",e.jsx("code",{children:"searchable"})," and ",e.jsx("code",{children:"collapsible"})," enabled. Each collection is a ",e.jsx("code",{children:"isGroup"})," nav item with request items as children. The ",e.jsx("code",{children:"FolderView"})," component handles the folder tree inside the expanded sidebar pane."]})}),e.jsx(_,{title:"Settings panel layout",children:e.jsxs(S,{type:"tip",children:["Settings panels use a two-column layout: ",e.jsx(xt,{children:"SettingsNavView"})," on the left and the settings content on the right. Wrap both in a ",e.jsx(xt,{children:'DuiProvider size="sm"'})," to make all inputs compact without per-component props."]})}),e.jsx(_,{title:"Response panel pattern",children:e.jsxs(S,{type:"info",children:["Response data flows through: ",e.jsx(xt,{children:"TabView"})," (Pretty / Raw / Headers / Cookies) → ",e.jsx(xt,{children:"JsonTreeView"})," (structured JSON) or ",e.jsx(xt,{children:"MarkdownView"})," (text/html) or ",e.jsx(xt,{children:"KeyValueTableView"})," (headers). The ",e.jsx(xt,{children:"BottomPanelView"})," wraps logs and debug output."]})}),e.jsx(_,{title:"Key assembly rules",children:e.jsxs(S,{type:"warning",children:["Never build custom header rows with raw ",e.jsx("code",{children:"button"})," elements. Always use ",e.jsx(xt,{children:"ButtonView"})," or ",e.jsx(xt,{children:"IconButtonView"}),". Never build custom dropdowns — use ",e.jsx(xt,{children:"SelectInputView"})," or the ",e.jsx("code",{children:"select"})," segment in ",e.jsx(xt,{children:"MergedInputView"}),"."]})})]})}function z9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Animated thumb transition",color:"var(--color-primary)"},{label:"Custom accent / active color",color:"var(--color-success)"},{label:"Optional label (left or right)",color:"var(--color-info)"},{label:"Disabled state with dashed border",color:"var(--color-warning)"},{label:"ARIA role=switch + aria-checked",color:"#a855f7"},{label:"DuiProvider size context",color:"#ec4899"},{label:"Label color override",color:"#14b8a6"},{label:"Context activeColor + color props",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"checked",type:"boolean",required:!0,description:"Current on/off state of the toggle."},{name:"onChange",type:"(checked: boolean) => void",required:!0,description:"Called with the new boolean value when the user clicks the toggle."},{name:"disabled",type:"boolean",default:"false",description:"When true, the toggle is non-interactive. Shows a dashed border track and muted thumb at 50% opacity."},{name:"size",type:"ToggleSwitchSize",description:"Accepts all DuiSize values. Falls back to DuiProvider context when omitted."},{name:"accentColor",type:"string",description:"Color of the track when checked=true. Defaults to var(--color-toggle-on)."},{name:"label",type:"string",description:"Optional text label rendered beside the switch."},{name:"labelPosition",type:"'left' | 'right'",default:"'right'",description:"Position of the label relative to the switch track."},{name:"className",type:"string",description:"Additional class names applied to the button element (or the wrapper div when a label is present)."},{name:"activeColor",type:"string",description:"Alias for accentColor with context-level support. Sets the checked track color."},{name:"color",type:"string",description:"Label text color override."}]})}),e.jsx(_,{title:"Visual states",children:e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[{state:"checked",desc:"Track = accentColor (solid), thumb = white, border = transparent"},{state:"unchecked",desc:"Track = 10% text-primary tint, border = 20% text-primary"},{state:"disabled",desc:"Dashed border, transparent track, muted thumb, 50% opacity"}].map(t=>e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"flex-start"},children:[e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:"var(--color-primary)",fontWeight:600,flexShrink:0,marginTop:1},children:t.state}),e.jsx("span",{style:{fontSize:12,color:"var(--color-text-secondary)"},children:t.desc})]},t.state))})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"12px track",font:"10px",desc:"Dense"},{size:"sm",height:"14px track",font:"11px",desc:"Compact"},{size:"md",height:"16px track",font:"12px",desc:"Default"},{size:"lg",height:"20px track",font:"13px",desc:"Large"},{size:"xl",height:"24px track",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The thumb position animates via a CSS left transition (160ms). In the checked state the left is calculated as trackWidth - thumbSize - 2px so the thumb sits flush with the right edge with a 2px margin."}),e.jsx(S,{type:"tip",children:"When no label is provided, the component returns just the button element (no wrapper div), making it easy to embed directly in a flex row alongside other elements."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"ToggleSwitchView reads its dimensions from the shared toggle category base hook (useToggleBase). Omitting size or color on ToggleSwitchView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every toggle-category component at once.",children:[e.jsx(I,{features:[{label:"useToggleBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"10px track",font:"8px",desc:"18x10px, thumb 8px"},{size:"xs",height:"14px track",font:"9px",desc:"24x14px, thumb 10px"},{size:"sm",height:"16px track",font:"10px",desc:"28x16px, thumb 12px"},{size:"md",height:"20px track",font:"11px",desc:"36x20px, thumb 16px"},{size:"lg",height:"24px track",font:"12px",desc:"44x24px, thumb 20px"},{size:"xl",height:"28px track",font:"13px",desc:"52x28px, thumb 24px"},{size:"xxl",height:"32px track",font:"14px",desc:"60x32px, thumb 28px"},{size:"xxxl",height:"36px track",font:"16px",desc:"68x36px, thumb 32px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Toggle category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every toggle-category component in the tree."]})]})]})}function F9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Checked + unchecked + indeterminate states",color:"var(--color-primary)"},{label:"Custom accent color",color:"var(--color-success)"},{label:"Optional text label",color:"var(--color-info)"},{label:"Disabled state",color:"var(--color-warning)"},{label:"ARIA role=checkbox + aria-checked (mixed for indeterminate)",color:"#a855f7"},{label:"Label click triggers onChange",color:"#ec4899"},{label:"DuiProvider size context",color:"#14b8a6"},{label:"Label font is one size step smaller for compact look",color:"#f97316"},{label:"DuiToken-based box sizing",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"checked",type:"boolean",required:!0,description:"Current checked state of the checkbox."},{name:"onChange",type:"(checked: boolean) => void",description:"Called with the new boolean value when the user clicks. Optional — omit for read-only checkboxes."},{name:"disabled",type:"boolean",default:"false",description:"When true, the checkbox is non-interactive at 50% opacity."},{name:"indeterminate",type:"boolean",default:"false",description:'When true, renders a horizontal dash inside the box (mixed state). Sets aria-checked to "mixed".'},{name:"size",type:"DuiSize",description:"Falls back to DuiProvider context when omitted."},{name:"accentColor",type:"string",description:"Fill color of the box when checked or indeterminate. Defaults to var(--color-primary)."},{name:"label",type:"string",description:"Optional text label. When provided, the component wraps the box in a flex div and the entire row is clickable."},{name:"className",type:"string",description:"Additional class names for the button element."}]})}),e.jsx(_,{title:"Visual states",children:e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[{state:"unchecked",desc:"Transparent background, 1.5px solid border at 28% text-primary opacity"},{state:"checked",desc:"Solid accentColor background, no border, white CheckIcon inside"},{state:"indeterminate",desc:"Solid accentColor background, white horizontal dash (2px height bar)"},{state:"disabled",desc:"Any state at 50% opacity, cursor: not-allowed"}].map(t=>e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"flex-start"},children:[e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:"var(--color-primary)",fontWeight:600,flexShrink:0,marginTop:1},children:t.state}),e.jsx("span",{style:{fontSize:12,color:"var(--color-text-secondary)"},children:t.desc})]},t.state))})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"12px box",font:"10px label",desc:"Dense"},{size:"sm",height:"14px box",font:"11px label",desc:"Compact"},{size:"md",height:"16px box",font:"12px label",desc:"Default"},{size:"lg",height:"18px box",font:"12px label",desc:"Large"},{size:"xl",height:"20px box",font:"13px label",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The label font size is always one DuiSize step smaller than the box size for a compact, balanced look. For example, a md-size checkbox uses sm-level font for its label."}),e.jsx(S,{type:"tip",children:"When a label is provided, the entire row div (including the label text) triggers onChange on click — you do not need to click the box exactly."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"CheckboxView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs(S,{type:"info",children:["CheckboxView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function W9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal to document.body (popout mode)",color:"var(--color-primary)"},{label:"Inline mode (bare card, no portal)",color:"var(--color-success)"},{label:"Auto-stacking z-index via module-level counter",color:"var(--color-info)"},{label:"Header: title + subtitle + icon + right slot",color:"var(--color-warning)"},{label:"Tinted header color with optional gradient",color:"#a855f7"},{label:"Footer: footerLeft + footerRight slots",color:"#ec4899"},{label:"4 sizes (sm → xl)",color:"#14b8a6"},{label:"Elevated card background variant",color:"#f97316"},{label:"No-padding body mode (full-bleed editors)",color:"var(--color-primary)"},{label:"Escape key closes modal",color:"var(--color-success)"},{label:"Backdrop click intentionally NOT closing",color:"var(--color-info)"},{label:"Backdrop blur filter",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Modes",children:e.jsx(Od,{variants:[{label:"popout",description:"Default. Portalled to document.body with a blurred backdrop. Centered overlay.",color:"var(--color-primary)"},{label:"inline",description:"Bare card with no backdrop and no portal. Parent controls positioning.",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"open",type:"boolean",required:!0,description:"Controls visibility. When false, the component returns null (nothing is rendered)."},{name:"onClose",type:"() => void",required:!0,description:"Called when Escape is pressed. Never called on backdrop click (by design)."},{name:"title",type:"string",description:"Title text in the header bar."},{name:"subtitle",type:"string",description:"Secondary descriptive text shown below the title in the header."},{name:"headerIcon",type:"ReactNode",description:"Node rendered to the left of the title block — typically a colored icon circle."},{name:"children",type:"ReactNode",description:"Body content rendered inside the scrollable body area."},{name:"footerLeft",type:"ReactNode",description:"Content rendered in the left side of the footer bar."},{name:"footerRight",type:"ReactNode",description:"Content rendered in the right side of the footer bar."},{name:"size",type:"ModalSize",default:"'md'",description:"Maximum width of the modal card. See size reference below."},{name:"showCloseIcon",type:"boolean",default:"true",description:"When true, renders an X close button in the header right area."},{name:"headerColor",type:"string",description:"Optional CSS color for a tinted header background (e.g. var(--color-protocol-rest))."},{name:"headerGradient",type:"boolean",default:"false",description:"When true, renders the header as a left→right gradient (accent tint → surface) instead of a flat tint."},{name:"headerRight",type:"ReactNode",description:"Optional node rendered in the header right area, before the X button."},{name:"noPadding",type:"boolean",default:"false",description:"Removes body padding for full-bleed editor modals."},{name:"elevated",type:"boolean",default:"false",description:"Uses var(--color-elevated) instead of var(--color-surface) for the card background."},{name:"className",type:"string",description:"Additional class names (reserved for future use; currently not applied to any element)."},{name:"mode",type:"ModalMode",default:"'popout'",description:"popout = portal + backdrop + centered. inline = bare card, no portal, no backdrop."}]})}),e.jsx(_,{title:"ModalSize enum",children:e.jsx(xe,{name:"ModalSize",values:[{value:"sm",description:"max-width: 420px",color:"var(--color-success)"},{value:"md",description:"max-width: 560px (default)",color:"var(--color-primary)"},{value:"lg",description:"max-width: 720px",color:"var(--color-info)"},{value:"xl",description:"max-width: 920px",color:"#a855f7"}]})}),e.jsx(_,{title:"ModalMode enum",children:e.jsx(xe,{name:"ModalMode",values:[{value:"popout",description:"Portal + backdrop + centered overlay (default)",color:"var(--color-primary)"},{value:"inline",description:"Bare card, no portal, no backdrop",color:"var(--color-info)"}]})}),e.jsx(S,{type:"danger",children:"Backdrop click intentionally does NOT close the modal — by design. This prevents accidental dismissal of forms. The only way to close is via the X icon, Escape key, or a footer action button that calls onClose."}),e.jsx(S,{type:"info",children:"Each ModalView instance receives a unique, ever-growing z-index from the module-level _mountLayer counter (base 1000 + layer * 50). This guarantees later-opened modals always stack above earlier ones, regardless of DOM order. No manual z-index management needed."}),e.jsx(S,{type:"tip",children:"Use footerLeft for secondary actions (e.g. a Reset button) and footerRight for primary actions (e.g. Save, Generate). The footer is only rendered when at least one of footerLeft or footerRight is provided."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ModalView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ModalView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function V9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"5 variants: spinner, dots, skeleton, pulse, progress-bar",color:"var(--color-primary)"},{label:"Fullscreen overlay mode",color:"var(--color-success)"},{label:"Custom accent color",color:"var(--color-info)"},{label:"Optional text label",color:"var(--color-warning)"},{label:"Progress bar controlled value (0–100)",color:"#a855f7"},{label:"3 sizes (sm, md, lg)",color:"#ec4899"},{label:"Tailwind animate-spin / animate-bounce / animate-pulse / animate-ping",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"variant",type:"LoaderVariant",default:"'spinner'",description:"The loader animation type."},{name:"size",type:"LoaderSize",default:"'md'",description:"Controls dimensions of the spinner, dots, and pulse variants."},{name:"accentColor",type:"string",description:"Override color for the animation. Defaults to var(--color-loader-accent)."},{name:"label",type:"string",description:"Optional text shown beside (or below for progress-bar) the loader. Not shown for the skeleton variant."},{name:"fullscreen",type:"boolean",default:"false",description:"When true, wraps the loader in a fixed-position full-screen overlay with a dark backdrop (rgba(0,0,0,0.4))."},{name:"progress",type:"number",description:"0–100 progress value. Only used by the progress-bar variant. Clamped automatically."},{name:"className",type:"string",description:"Additional class names for the inner wrapper div."}]})}),e.jsx(_,{title:"LoaderVariant enum",children:e.jsx(xe,{name:"LoaderVariant",values:[{value:"spinner",description:"Circular spinning arc (animate-spin)",color:"var(--color-primary)"},{value:"dots",description:"Three bouncing dots in sequence (animate-bounce)",color:"var(--color-success)"},{value:"skeleton",description:"Three lines at 100% / 80% / 60% width (animate-pulse)",color:"var(--color-info)"},{value:"pulse",description:"Single pulsing circle (animate-pulse)",color:"var(--color-warning)"},{value:"progress-bar",description:"Horizontal fill bar with progress prop",color:"#a855f7"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"sm",height:"16px",font:"10px label",desc:"Inline use"},{size:"md",height:"24px",font:"11px label",desc:"Default"},{size:"lg",height:"36px",font:"12px label",desc:"Prominent"}]})}),e.jsx(S,{type:"info",children:"The skeleton variant renders three lines and ignores the label prop. The skeleton fills 100% of its container width and is useful for content placeholder UI patterns."}),e.jsx(S,{type:"tip",children:'The progress-bar variant requires the progress prop (0–100). The fill width transitions smoothly via CSS (300ms ease). Pair it with label for a "Loading 42%" style indicator.'}),e.jsx(_,{title:"DUI Sizing & Theming",description:"LoaderView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["LoaderView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function B9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Optional icon slot",color:"var(--color-primary)"},{label:"Title + message text",color:"var(--color-success)"},{label:"Optional action button",color:"var(--color-info)"},{label:"Compact mode (reduced padding)",color:"var(--color-warning)"},{label:"Custom accent color for action button",color:"#a855f7"},{label:"Centered flex layout",color:"#ec4899"},{label:"Max-width 320px on message for readability",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"title",type:"string",required:!0,description:"Primary heading text. Shown at 13px (12px in compact mode)."},{name:"icon",type:"ReactNode",description:"Optional icon rendered above the title. Shown at 50% opacity using var(--color-emptystate-icon)."},{name:"message",type:"string",description:"Secondary descriptive text shown below the title. Max width 320px for readability."},{name:"action",type:"EmptyStateAction",description:"Optional call-to-action button. Rendered as a small tinted button using accentColor."},{name:"accentColor",type:"string",description:"Color override for the action button border, background tint, and text. Defaults to var(--color-primary)."},{name:"compact",type:"boolean",default:"false",description:"When true, reduces padding (20px vs 40px) and font sizes for use in dense panels or table cells."},{name:"className",type:"string",description:"Additional class names for the outer container div."}]})}),e.jsx(_,{title:"EmptyStateAction shape",children:e.jsx(M,{props:[{name:"label",type:"string",required:!0,description:"Button text."},{name:"onClick",type:"() => void",required:!0,description:"Called when the action button is clicked."}]})}),e.jsx(S,{type:"tip",children:"For a truly centered empty state inside a scrollable container, wrap the parent in h-full flex flex-col and make EmptyStateView fill the remaining space. Never use py-12 on the empty state itself — let the flex centering do the work."}),e.jsx(S,{type:"info",children:"EmptyStateView is used internally by DataTableView when the rows array is empty. Pass emptyTitle and emptyMessage to DataTableView to customize the message without rendering EmptyStateView directly."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"EmptyStateView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["EmptyStateView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function G9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"5 status states",color:"var(--color-primary)"},{label:"Animated pulse ring (connecting + connected)",color:"var(--color-success)"},{label:"Custom label text",color:"var(--color-info)"},{label:"Optional subtext below label",color:"var(--color-warning)"},{label:"Show/hide label",color:"#a855f7"},{label:"3 sizes (sm, md, lg)",color:"#ec4899"},{label:"Color override (accent)",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"status",type:"StatusState",required:!0,description:"Current status. Controls the dot color, default label text, and whether the pulse animation runs."},{name:"label",type:"string",description:'Override the default label text. Defaults to the status display name (e.g. "Connected").'},{name:"subtext",type:"string",description:"Secondary smaller text shown below the label. Useful for showing connection details or timestamps."},{name:"showLabel",type:"boolean",default:"true",description:"When false, only the dot is shown without any text."},{name:"size",type:"StatusSize",default:"'md'",description:"Controls dot size and font size."},{name:"accentColor",type:"string",description:"Override both the dot color and label color. When set, overrides the status-derived color entirely."},{name:"className",type:"string",description:"Additional class names for the outer span."}]})}),e.jsx(_,{title:"StatusState enum",children:e.jsx(xe,{name:"StatusState",values:[{value:"idle",description:"Muted dot — var(--color-text-muted)",color:"var(--color-text-muted)"},{value:"connecting",description:"Pulsing warning dot — var(--color-warning)",color:"var(--color-warning)"},{value:"connected",description:"Pulsing success dot — var(--color-success)",color:"var(--color-success)"},{value:"disconnected",description:"Muted dot (same as idle)",color:"var(--color-text-muted)"},{value:"error",description:"Error red dot — var(--color-error)",color:"var(--color-error)"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"sm",height:"6px dot",font:"10px",desc:"Dense inline"},{size:"md",height:"8px dot",font:"11px",desc:"Default"},{size:"lg",height:"10px dot",font:"12px",desc:"Prominent"}]})}),e.jsx(S,{type:"info",children:"The pulse animation (animate-ping) runs only for the connecting and connected states. It is a separate absolutely-positioned span behind the dot, larger by 4px, at 35% opacity. The main dot remains opaque on top."}),e.jsx(S,{type:"tip",children:"Use showLabel=false when embedding in a tight toolbar where only the colored dot is needed. Add a tooltip on the parent element to explain the status to keyboard/assistive users."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"StatusIndicatorView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["StatusIndicatorView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function U9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal-rendered at document.body",color:"var(--color-primary)"},{label:"Viewport-safe auto-positioning with anchor element",color:"var(--color-success)"},{label:"Render-then-measure placement (no layout shift)",color:"var(--color-info)"},{label:"Scroll + resize position tracking",color:"var(--color-warning)"},{label:"Title section",color:"#a855f7"},{label:"Description text",color:"#ec4899"},{label:"Blue-badge code items with descriptions",color:"#14b8a6"},{label:"Footer italics note",color:"#f97316"},{label:"Optional wiki link with external icon",color:"var(--color-primary)"},{label:"Outside-click + Escape to close",color:"var(--color-success)"},{label:"Configurable width",color:"var(--color-info)"}]})}),e.jsx(_,{title:"Overview",description:"InfoPopupView is the standard way to attach help/info content to ? icons in DUI. It opens as a non-modal popup anchored to an element, auto-positions to stay within the viewport, and tracks the anchor on scroll and resize. It is NOT a toast and does NOT open a URL directly — all help content lives in the popup itself.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"open",type:"boolean",required:!0,description:"Controls visibility. When false, the component returns null."},{name:"onClose",type:"() => void",required:!0,description:"Called on outside click or Escape key press."},{name:"title",type:"string",required:!0,description:"Bold heading shown at the top of the popup."},{name:"anchorEl",type:"HTMLElement | null",description:"The element to anchor the popup to (typically the ? icon button). When not provided, the popup is centered in the viewport."},{name:"description",type:"string",description:"Paragraph text shown in the body below the title."},{name:"items",type:"InfoPopupItem[]",description:"Array of code + description pairs. Each item renders a blue badge chip for the code string and secondary text for the description."},{name:"footer",type:"string",description:"Italicized footer note shown at the bottom of the body section."},{name:"wikiLabel",type:"string",default:"'Open Wiki →'",description:"Label for the wiki link shown at the bottom of the popup."},{name:"wikiHref",type:"string",description:"URL for the wiki link. When not provided, the wiki link section is not rendered."},{name:"width",type:"number",default:"320",description:"Width of the popup in pixels."}]})}),e.jsx(_,{title:"InfoPopupItem shape",children:e.jsx(M,{props:[{name:"code",type:"string",required:!0,description:"Short code label rendered as a blue monospace badge chip."},{name:"description",type:"string",required:!0,description:"Descriptive text shown beside the badge."}]})}),e.jsx(S,{type:"danger",children:"Help (?) icons MUST always use InfoPopupView. NEVER trigger a toast or open a URL directly from a ? icon. This is an absolute DUI rule."}),e.jsx(S,{type:"info",children:"The popup starts invisible and only becomes visible after the first requestAnimationFrame measures its actual rendered size. This avoids a flash of incorrectly positioned content and ensures viewport-clamped positioning is based on real dimensions."}),e.jsx(S,{type:"tip",children:"The popup is z-index 1100, above ModalView instances. Pass the ref of the ? icon button as anchorEl so the popup appears directly below the icon, flipping to above when there is insufficient space below."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"InfoPopupView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["InfoPopupView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function H9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Bottom-edge drag to resize",color:"var(--color-primary)"},{label:"Pointer capture API (works outside browser window)",color:"var(--color-success)"},{label:"Min and max height constraints",color:"var(--color-info)"},{label:"Dashed grip indicator with hover reveal",color:"var(--color-warning)"},{label:"Configurable border-radius",color:"#a855f7"},{label:"Absolute-inset children (border + overflow:hidden)",color:"#ec4899"}]})}),e.jsx(_,{title:"Overview",description:"ResizablePanelView wraps children in a container of controlled height. A transparent 10px drag zone at the bottom edge allows the user to pull the panel taller or shorter. The grip indicator (a dashed pill) fades in on hover.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"defaultHeight",type:"number",required:!0,description:"Initial height of the panel in pixels."},{name:"minHeight",type:"number",default:"40",description:"Minimum height in pixels. The user cannot drag below this value."},{name:"maxHeight",type:"number",default:"600",description:"Maximum height in pixels. The user cannot drag above this value."},{name:"borderRadius",type:"number",default:"8",description:"Border radius in pixels applied to the inner content border and overflow clip."},{name:"children",type:"ReactNode",required:!0,description:"Content rendered inside the resizable panel. Children are absolutely positioned to fill the panel (inset: 0)."},{name:"className",type:"string",description:"Additional class names for the outer positioning div."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer div (merged with height and position: relative)."}]})}),e.jsx(S,{type:"info",children:"The drag handle uses the Pointer Capture API (setPointerCapture / releasePointerCapture) to continue tracking pointer movement even if the cursor leaves the handle element. This prevents the drag from sticking or releasing unexpectedly."}),e.jsx(S,{type:"tip",children:"For a two-panel split that resizes left/right or top/bottom, use SplitPanelView instead. ResizablePanelView is for a single panel with a user-adjustable bottom edge — for example a request body editor that the user can make taller."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ResizablePanelView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ResizablePanelView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function q9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Horizontal and vertical split directions",color:"var(--color-primary)"},{label:"Uncontrolled (defaultSplit) mode",color:"var(--color-success)"},{label:"Controlled (split) mode with onResize callback",color:"var(--color-info)"},{label:"Animated pill handle (grows on hover/drag)",color:"var(--color-warning)"},{label:"Double-click to reset to defaultSplit",color:"#a855f7"},{label:"Click-without-drag fires onHandleClick",color:"#ec4899"},{label:"Smooth transition when not dragging",color:"#14b8a6"},{label:"Min px constraints for each panel",color:"#f97316"},{label:"Hover tooltip (customizable or null to suppress)",color:"var(--color-primary)"},{label:"Pointer capture API",color:"var(--color-success)"},{label:"Custom accent color",color:"var(--color-info)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"first",type:"ReactNode",required:!0,description:"Content for the first (top or left) panel."},{name:"second",type:"ReactNode",required:!0,description:"Content for the second (bottom or right) panel."},{name:"direction",type:"SplitDirection",default:"'horizontal'",description:"Layout direction. 'horizontal' = left/right split. 'vertical' = top/bottom split."},{name:"defaultSplit",type:"number",default:"50",description:"Initial split percentage (0–100) for the first panel. Also the reset target on double-click."},{name:"split",type:"number",description:"Controlled split value (0–100). When provided, overrides internal state. Wire with onResize."},{name:"minFirst",type:"number",default:"80",description:"Minimum pixel size for the first panel."},{name:"minSecond",type:"number",default:"80",description:"Minimum pixel size for the second panel."},{name:"accentColor",type:"string",description:"Color of the drag-handle pill when active (hovered or dragging)."},{name:"onResize",type:"(split: number) => void",description:"Fired on every drag move and on double-click reset. Provides the current split percentage."},{name:"onResizeEnd",type:"(split: number) => void",description:"Fired once when the pointer is released (drag end) or on double-click reset."},{name:"onHandleClick",type:"() => void",description:"Fired when the handle is clicked without dragging. Use to implement collapse/expand."},{name:"pillTooltip",type:"ReactNode | null",description:"Tooltip content shown on pill hover. Defaults to keyboard hint. Pass null to suppress."},{name:"style",type:"CSSProperties",description:"Inline styles for the root container div."},{name:"className",type:"string",description:"Additional class names for the root container div."}]})}),e.jsx(_,{title:"SplitDirection enum",children:e.jsx(xe,{name:"SplitDirection",values:[{value:"horizontal",description:"Left panel | Right panel (col-resize cursor)",color:"var(--color-primary)"},{value:"vertical",description:"Top panel / Bottom panel (row-resize cursor)",color:"var(--color-info)"}]})}),e.jsx(S,{type:"info",children:"The animated pill handle grows from 44px to 80px (in the non-split axis) on hover or drag. It uses a CSS transition on the relevant dimension (height for horizontal, width for vertical)."}),e.jsx(S,{type:"tip",children:"To implement a collapsible sidebar: wire onHandleClick to toggle a collapsed state, and drive the split prop to 0 when collapsed and the user's last value when expanded. Use onResizeEnd to persist the last user-set split."}),e.jsx(S,{type:"warning",children:"When using controlled mode (split prop), always also wire onResize — otherwise the panel will not respond to drag input because internal state is overridden by the prop on every render."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"SplitPanelView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["SplitPanelView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function K9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Dashed accent border",color:"var(--color-primary)"},{label:"Optional title header",color:"var(--color-success)"},{label:"Expandable / collapsible mode",color:"var(--color-info)"},{label:"defaultExpanded state",color:"var(--color-warning)"},{label:"Chevron toggle icon",color:"#a855f7"},{label:"Custom accent color",color:"#ec4899"},{label:"Tinted header background (5% accent)",color:"#14b8a6"},{label:"Children slot",color:"#f97316"}]})}),e.jsx(_,{title:"Overview",description:"DottedCardView is a decorative container with a dashed border at a translucent accent color. It optionally shows a title bar and can be made collapsible. Commonly used for optional/advanced settings sections, embedded notes, and placeholder content areas.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"children",type:"ReactNode",required:!0,description:"Content rendered inside the card body (padded at 12px on all sides)."},{name:"title",type:"string",description:"When provided, renders a header bar with the title text in the accent color."},{name:"expandable",type:"boolean",default:"false",description:"When true, clicking the header toggles the body visibility. A chevron icon is shown in the header."},{name:"defaultExpanded",type:"boolean",default:"true",description:"Initial expanded/collapsed state when expandable=true."},{name:"accentColor",type:"string",description:"Color for the dashed border, header background, title text, and chevron. Defaults to var(--color-primary)."},{name:"className",type:"string",description:"Additional class names for the outer container div."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer container div."}]})}),e.jsx(S,{type:"info",children:"The dashed border uses color-mix(in srgb, accent 30%, transparent) so it stays visible but subtle. The header background uses a lighter 5% tint. The dashed body divider uses a 20% tint."}),e.jsx(S,{type:"tip",children:"When expandable=false (default), the chevron is not rendered even if a title is provided. The title bar is purely decorative in non-expandable mode."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"DottedCardView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["DottedCardView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function $9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Per-token color",color:"var(--color-primary)"},{label:"Bold, italic, underline, monospace per token",color:"var(--color-success)"},{label:"Click-to-copy per token",color:"var(--color-info)"},{label:"Hover tooltip on copyable tokens",color:"var(--color-warning)"},{label:"configurable fontSize + lineHeight",color:"#a855f7"},{label:"parseXmlTokens helper (XML syntax highlighting)",color:"#ec4899"},{label:"Inline span-based rendering (no block wrapping)",color:"#14b8a6"}]})}),e.jsx(_,{title:"Overview",description:"ColoredTextView renders an array of ColorToken objects as adjacent inline spans. Each token can have its own color, font weight, style, family, underline, and click-to-copy behaviour. It is ideal for syntax-highlighted inline text, status messages with mixed colors, and labeled values.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tokens",type:"ColorToken[]",required:!0,description:"Array of token objects. Each is rendered as an inline span."},{name:"fontSize",type:"string",default:"'12px'",description:"Font size applied to the outer span (inherited by all tokens)."},{name:"lineHeight",type:"number",default:"1.6",description:"Line height applied to the outer span."},{name:"className",type:"string",description:"Additional class names for the outer span element."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer span element."}]})}),e.jsx(_,{title:"ColorToken shape",children:e.jsx(M,{props:[{name:"text",type:"string",required:!0,description:"The string content of this token."},{name:"color",type:"string",description:"CSS color or variable. Defaults to var(--color-text-primary) when omitted."},{name:"bold",type:"boolean",description:"When true, fontWeight: 700."},{name:"italic",type:"boolean",description:"When true, fontStyle: italic."},{name:"mono",type:"boolean",description:"When true, fontFamily: monospace."},{name:"underline",type:"boolean",description:"When true, textDecoration: underline."},{name:"copyable",type:"boolean",description:"When true, clicking the span copies token.text to clipboard via navigator.clipboard.writeText. Shows a 'Click to copy: ...' browser tooltip."}]})}),e.jsxs(_,{title:"parseXmlTokens helper",children:[e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",lineHeight:1.6,marginBottom:8},children:["The exported ",e.jsx("code",{style:{fontFamily:"monospace",color:"var(--color-primary)"},children:"parseXmlTokens(xml: string)"})," function parses an XML/HTML string into a ColorToken array with syntax highlighting colors:"]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[{part:"Tag brackets (<, >, />",color:"var(--color-text-muted)"},{part:"Tag names (e.g. soap:Envelope)",color:"var(--color-protocol-soap)"},{part:"Attribute names",color:"var(--color-info)"},{part:"Attribute values",color:"var(--color-success)"},{part:"Text nodes",color:"var(--color-text-primary)"}].map(t=>e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"center"},children:[e.jsx("span",{style:{width:8,height:8,borderRadius:"50%",background:t.color,flexShrink:0}}),e.jsx("span",{style:{fontSize:12,color:"var(--color-text-secondary)"},children:t.part})]},t.part))})]}),e.jsx(S,{type:"tip",children:"Use parseXmlTokens to render SOAP/XML envelopes with color-coded tags in a compact inline view. Pass the returned token array directly to ColoredTextView tokens prop."}),e.jsx(S,{type:"info",children:"All tokens render as inline spans — ColoredTextView itself is an inline span. Wrap it in a block element (div, p) if you need block layout. This keeps the component composition flexible."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ColoredTextView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ColoredTextView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function J9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Label + value + unit layout",color:"var(--color-primary)"},{label:"Trend indicator (up ↑ / down ↓ / neutral →)",color:"var(--color-success)"},{label:"Sub-value secondary text",color:"var(--color-info)"},{label:"Optional icon in header",color:"var(--color-warning)"},{label:"Custom accent color tints the card border and bg",color:"#a855f7"},{label:"Compact mode (reduced size + padding)",color:"#ec4899"},{label:"Theme tokens for bg, border, trend colors",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"label",type:"string",required:!0,description:'Uppercase label shown at the top of the card (e.g. "REQUESTS", "LATENCY").'},{name:"value",type:"string | number",required:!0,description:"Primary metric value shown prominently."},{name:"subValue",type:"string",description:"Secondary smaller text shown below the value row."},{name:"icon",type:"ReactNode",description:"Icon rendered in the top-right of the card at 70% opacity in the accent color."},{name:"unit",type:"string",description:'Unit label shown beside the value in muted smaller text (e.g. "ms", "req/s").'},{name:"trend",type:"StatsTrend",description:"Trend direction. 'up' = green ↑. 'down' = red ↓. 'neutral' = muted →."},{name:"trendValue",type:"string",description:'Trend magnitude text shown beside the trend arrow (e.g. "+12%"). Only rendered when trend is also set.'},{name:"accentColor",type:"string",description:"Overrides the value color and tints the card border and background. Defaults to var(--color-primary)."},{name:"compact",type:"boolean",default:"false",description:"Reduces padding (10px vs 14px) and value font size (18px vs 22px) for dense dashboards."},{name:"className",type:"string",description:"Additional class names for the card div."},{name:"style",type:"CSSProperties",description:"Inline styles for the card div."}]})}),e.jsx(_,{title:"StatsTrend enum",children:e.jsx(xe,{name:"StatsTrend",values:[{value:"up",description:"↑ arrow — var(--color-statscard-trend-up) (green)",color:"var(--color-success)"},{value:"down",description:"↓ arrow — var(--color-statscard-trend-down) (red)",color:"var(--color-error)"},{value:"neutral",description:"→ arrow — var(--color-text-muted)",color:"var(--color-text-muted)"}]})}),e.jsx(S,{type:"info",children:"When accentColor is set, the card renders with a tinted border (20% opacity) and a tinted background (8% mix into surface). When no accentColor is set, theme tokens var(--color-statscard-bg) and var(--color-statscard-border) are used instead."}),e.jsx(S,{type:"tip",children:'Combine trend and trendValue for change indicators: trend="up" trendValue="+5%" renders a green "↑ +5%" line below the value. trendValue is only displayed when trend is also provided.'}),e.jsx(_,{title:"DUI Sizing & Theming",description:"StatsCardView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["StatsCardView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function X9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Sortable columns (client-side)",color:"var(--color-primary)"},{label:"Expandable rows with custom renderer",color:"var(--color-success)"},{label:"Row click handler",color:"var(--color-info)"},{label:"Striped rows",color:"var(--color-warning)"},{label:"Custom cell renderer per column",color:"#a855f7"},{label:"Column alignment (left, center, right)",color:"#ec4899"},{label:"Custom column widths (CSS or 1fr)",color:"#14b8a6"},{label:"Empty state via EmptyStateView",color:"#f97316"},{label:"DuiProvider size context",color:"var(--color-primary)"},{label:"maxHeight with scroll overflow",color:"var(--color-success)"},{label:"Push mode for expand (expanded rows push siblings)",color:"var(--color-info)"},{label:"Generic type parameter T for row data",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"columns",type:"DataTableColumn<T>[]",required:!0,description:"Column definitions."},{name:"rows",type:"T[]",required:!0,description:"Data rows. T must extend Record<string, unknown>."},{name:"keyField",type:"string",default:"'id'",description:"The row property used as the React key and for expand/collapse state tracking."},{name:"onRowClick",type:"(row: T) => void",description:"Called when the user clicks a data row. Makes rows visually clickable (pointer cursor + hover highlight)."},{name:"renderExpanded",type:"(row: T) => ReactNode",description:"When provided, each row gets an expand chevron in the first column. Clicking it shows the returned node below that row."},{name:"emptyTitle",type:"string",default:"'No data'",description:"Title shown in the EmptyStateView when rows is empty."},{name:"emptyMessage",type:"string",description:"Description text shown in the EmptyStateView when rows is empty."},{name:"striped",type:"boolean",default:"false",description:"When true, alternates row backgrounds using var(--color-table-stripe)."},{name:"compact",type:"boolean",default:"false",description:"Forces sm-size row heights. Prefer size prop for token-aligned sizing."},{name:"size",type:"DuiSize",description:"Row height and font size. Falls back to DuiProvider context when omitted."},{name:"sortable",type:"boolean",description:"Reserved prop (currently client-side sort is configured per-column via column.sortable)."},{name:"maxHeight",type:"string",description:"CSS max-height for the table body scroll container (only active when renderExpanded is not set)."},{name:"className",type:"string",description:"Additional class names for the outer border container div."}]})}),e.jsx(_,{title:"DataTableColumn shape",children:e.jsx(M,{props:[{name:"key",type:"string",required:!0,description:"The row property key to read the cell value from."},{name:"label",type:"string",required:!0,description:"Header label text (rendered uppercase)."},{name:"width",type:"string | number",description:"CSS column width for the grid-template-columns. Defaults to '1fr'."},{name:"sortable",type:"boolean",description:"When true, clicking the column header sorts the table by this column. Clicking again reverses the sort order."},{name:"renderCell",type:"(row: T, value: unknown) => ReactNode",description:"Custom cell renderer. When omitted, String(value) is rendered with ellipsis overflow."},{name:"align",type:"'left' | 'center' | 'right'",description:"Text alignment of header and cells. Defaults to 'left'."}]})}),e.jsx(_,{title:"Sizes (row heights)",children:e.jsx(H,{sizes:[{size:"xs",height:"24px row",font:"10px",desc:"Dense"},{size:"sm",height:"28px row",font:"11px",desc:"Compact"},{size:"md",height:"32px row",font:"12px",desc:"Default"},{size:"lg",height:"36px row",font:"13px",desc:"Large"},{size:"xl",height:"40px row",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:'When renderExpanded is provided, the table operates in "push mode": expanded row content is rendered inline below the row, pushing siblings down. maxHeight scroll is disabled in push mode because the body grows naturally with the expanded rows.'}),e.jsx(S,{type:"tip",children:"Use the renderCell prop to render custom cell content such as status badges, action buttons, or ChipView components. The function receives both the full row object and the specific cell value."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"DataTableView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs(S,{type:"info",children:["DataTableView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function Y9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Syntax highlighting via highlight.js",color:"var(--color-primary)"},{label:"Auto language detection (highlightAuto)",color:"var(--color-success)"},{label:"Copy-to-clipboard button with feedback",color:"var(--color-info)"},{label:"Optional line numbers",color:"var(--color-warning)"},{label:"Configurable maxHeight + scroll overflow",color:"#a855f7"},{label:"Language label in header bar",color:"#ec4899"},{label:"Custom accent color for copy button hover",color:"#14b8a6"},{label:"11 pre-registered languages",color:"#f97316"}]})}),e.jsx(_,{title:"Supported languages",children:e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:6},children:["javascript (js, jsx)","typescript (ts, tsx)","json","xml (html)","css","bash (shell, sh)","yaml (yml)","python (py)"].map((t,n)=>{const r=["var(--color-primary)","var(--color-success)","var(--color-info)","var(--color-warning)","#a855f7","#ec4899","#14b8a6","#f97316"],o=r[n%r.length];return e.jsx("span",{style:{padding:"3px 10px",borderRadius:99,fontSize:11,fontWeight:600,background:`color-mix(in srgb, ${o} 14%, transparent)`,color:o,border:`1px solid color-mix(in srgb, ${o} 30%, transparent)`},children:t},t)})})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"code",type:"string",required:!0,description:"The source code string to display."},{name:"language",type:"string",description:'Language identifier for syntax highlighting (e.g. "json", "typescript"). When omitted, highlightAuto is used.'},{name:"showCopyButton",type:"boolean",default:"true",description:"When true, shows a Copy button in the top bar that copies the code to the clipboard."},{name:"showLineNumbers",type:"boolean",default:"false",description:"When true, renders line numbers to the left of each code line."},{name:"maxHeight",type:"string",default:"'300px'",description:"CSS max-height for the scrollable code area. The block scrolls vertically when content exceeds this height."},{name:"accentColor",type:"string",description:"Color used for the copy button success state and hover. Defaults to var(--color-primary)."},{name:"className",type:"string",description:"Additional class names for the outer container div."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer container div (merged before overflow:hidden)."}]})}),e.jsx(S,{type:"info",children:"When showLineNumbers=true, each line is highlighted individually using hljs.highlight(line, { language }). When false (default), the entire code string is highlighted in one pass, which is faster for large files."}),e.jsx(S,{type:"tip",children:'The copy button shows a green "Copied" state with a check icon for 1500ms after a successful copy, then reverts. The success color is var(--color-success) regardless of accentColor.'}),e.jsx(S,{type:"warning",children:"When language is set but not registered with highlight.js, the component falls back to highlightAuto on that specific code string. Unknown language values are silently ignored."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"CodeBlockView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["CodeBlockView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function Q9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"6 AI action presets",color:"var(--color-primary)"},{label:"Loading / thinking state with spinner",color:"var(--color-success)"},{label:"Sparkle icon at rest",color:"var(--color-info)"},{label:"Gradient-border hover effect (CSS class)",color:"var(--color-warning)"},{label:"Custom accent color",color:"#a855f7"},{label:"Compact shorthand (xs size)",color:"#ec4899"},{label:"DuiProvider size context",color:"#14b8a6"},{label:"DUI container props (width, borderRadius, color)",color:"#f97316"},{label:"Disabled state",color:"var(--color-primary)"},{label:"Custom label override",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Overview",description:"AIButtonView is a specialized button for AI-triggered actions. It defaults to a themed gradient-border style with a SparkleIcon and auto-maps action keys to labels. During loading, the icon swaps to a spinner and the label reads 'Thinking…'. The accent defaults to var(--color-protocol-ai) — the DUI AI purple.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"action",type:"AIButtonAction",default:"'ask'",description:"Preset action type. Determines the default label if label prop is not set."},{name:"label",type:"string",description:'Override the auto-derived label from the action. When set, this text is always shown (except during loading, which shows "Thinking…").'},{name:"onClick",type:"() => void",description:"Click handler. Not called when disabled or loading."},{name:"loading",type:"boolean",default:"false",description:'When true, icon switches to a spinner and the label reads "Thinking…". Button is also disabled.'},{name:"disabled",type:"boolean",default:"false",description:"When true, the button is non-interactive at 50% opacity. Cursor changes to not-allowed."},{name:"size",type:"DuiSize",description:'Falls back to DuiProvider context when omitted. compact=true is shorthand for size="xs".'},{name:"compact",type:"boolean",default:"false",description:"Shorthand for size='xs' (20px height). Kept for backwards compatibility. Explicit size prop wins."},{name:"accentColor",type:"string",description:"Override the accent color. Affects text color, border color, and hover background. Defaults to var(--color-protocol-ai)."},{name:"className",type:"string",description:"Additional class names."},{name:"width",type:"DuiWidth",description:"Width override."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override (defaults to 5px via resolveBorderRadius)."},{name:"color",type:"string",description:"Text color override. When set, overrides the default accentColor text."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override."}]})}),e.jsx(_,{title:"AIButtonAction enum",children:e.jsx(xe,{name:"AIButtonAction",values:[{value:"generate",description:'Label: "Generate"',color:"var(--color-primary)"},{value:"fuzz",description:'Label: "Fuzz"',color:"var(--color-success)"},{value:"explain",description:'Label: "Explain"',color:"var(--color-info)"},{value:"fix",description:'Label: "Fix"',color:"var(--color-warning)"},{value:"ask",description:'Label: "Ask AI" (default)',color:"#a855f7"},{value:"suggest",description:'Label: "Suggest"',color:"#ec4899"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"compact=true"},{size:"sm",height:"24px",font:"11px",desc:"Small"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The hover/active styling is implemented via the .dui_ai-button CSS class in AIButtonView.css, using CSS custom properties --dui-aibtn-bg, --dui-aibtn-border-color, --dui-aibtn-hover-bg, and --dui-aibtn-hover-border. The inline style sets these vars so the CSS class can read them."}),e.jsx(S,{type:"tip",children:"When loading=true, both the disabled attribute and the not-allowed cursor are applied. The loading state does not add any timeout — caller is responsible for setting loading=false when the AI response arrives."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"AIButtonView reads its dimensions from the shared button category base hook (useButtonBase). Omitting size, width, borderRadius, or color on AIButtonView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every button-category component at once.",children:[e.jsx(I,{features:[{label:"useButtonBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Width presets, resolved via the ",e.jsx("code",{children:"width"})," prop or the nearest ",e.jsx("code",{children:'<DuiProvider width="...">'}),":"]}),e.jsx(jt,{widths:[{width:"sm",value:"80px"},{width:"md",value:"120px"},{width:"default",value:"auto"},{width:"lg",value:"200px"},{width:"fullWidth",value:"100%"},{width:"maxContent",value:"max-content"},{width:"fw",value:"100%"},{width:"mx",value:"max-content"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Button category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every button-category component in the tree."]})]})]})}function Z9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Collapsible sidebar",color:"var(--color-primary)"},{label:"Controlled + uncontrolled collapse",color:"var(--color-success)"},{label:"Group headers (uppercase, collapsible)",color:"var(--color-info)"},{label:"Badge + count per item",color:"var(--color-warning)"},{label:"Built-in search box",color:"#a855f7"},{label:"Empty state on no search results",color:"#ec4899"},{label:"Animated collapse (200ms)",color:"#14b8a6"},{label:"DuiProvider size inheritance",color:"#f97316"}]})}),e.jsx(_,{title:"SideNavItem",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for the nav item. Passed to onSelect callback."},{name:"label",type:"string",required:!0,description:"Display text shown in the nav item."},{name:"icon",type:"ReactNode",description:"Optional icon rendered left of the label."},{name:"badge",type:"number | string",description:'Accent-colored pill badge shown right of label (e.g. "New", 3).'},{name:"count",type:"number",description:"Plain muted count shown right of a group header label."},{name:"isGroup",type:"boolean",description:"When true, renders as uppercase section header — non-selectable and collapsible."},{name:"children",type:"SideNavItem[]",description:"Child items nested under a group header."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"items",type:"SideNavItem[]",required:!0,description:"Full nav item tree. Groups can contain children."},{name:"activeId",type:"string",description:"ID of the currently selected item. Highlighted with accent color."},{name:"onSelect",type:"(id: string) => void",description:"Called when a leaf nav item is clicked."},{name:"collapsible",type:"boolean",default:"true",description:"Show/hide the collapse toggle button at the bottom."},{name:"defaultCollapsed",type:"boolean",default:"false",description:"Initial collapsed state (uncontrolled mode)."},{name:"collapsed",type:"boolean",description:"Controlled collapsed state. When provided, overrides internal state."},{name:"onCollapsedChange",type:"(collapsed: boolean) => void",description:"Called when collapse state changes (controlled mode)."},{name:"defaultOpenIds",type:"string[]",description:"IDs of groups open by default. Defaults to all groups open."},{name:"width",type:"number",default:"200",description:"Width in px when expanded."},{name:"collapsedWidth",type:"number",default:"44",description:"Width in px when collapsed (icon-only mode)."},{name:"accentColor",type:"string",description:"Accent color for active item highlight and badges."},{name:"searchable",type:"boolean",default:"false",description:"Show a search input above nav items."},{name:"searchPlaceholder",type:"string",default:"'Search…'",description:"Placeholder text for the search box."},{name:"emptyText",type:"string",default:"'No results'",description:"Message shown when no items match the search query."},{name:"size",type:"DuiSize",description:"Size token. Falls back to DuiProvider context when omitted."},{name:"className",type:"string",description:"Extra CSS class applied to the root element."},{name:"style",type:"CSSProperties",description:"Inline styles applied to the root element."}]})}),e.jsxs(_,{title:"Collapse Behavior",children:[e.jsxs(S,{type:"info",children:["When collapsed, leaf items render as icon-only squares. Groups collapse their children directly, with no header shown. The collapse toggle button only appears in uncontrolled mode (when the ",e.jsx("code",{children:"collapsed"})," prop is not provided)."]}),e.jsxs(S,{type:"tip",children:["Pass ",e.jsx("code",{children:"collapsed"})," + ",e.jsx("code",{children:"onCollapsedChange"})," together for controlled mode. Use ",e.jsx("code",{children:"defaultCollapsed"})," alone for uncontrolled mode."]})]}),e.jsx(_,{title:"Exported Helpers",children:e.jsx(M,{props:[{name:"countLeaves(items)",type:"number",description:"Recursively counts all non-group items in the tree."},{name:"filterItems(items, q)",type:"SideNavItem[]",description:"Filters items by label substring match, preserving group structure."}]})}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SideNavView reads its dimensions from the shared nav category base hook (useNavBase). Omitting size, borderRadius, or color on SideNavView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every nav-category component at once.",children:[e.jsx(I,{features:[{label:"useNavBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"20px",font:"8px",desc:"padX 16px"},{size:"xs",height:"24px",font:"9px",desc:"padX 16px"},{size:"sm",height:"28px",font:"10px",desc:"padX 8px"},{size:"md",height:"32px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"44px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"52px",font:"14px",desc:"padX 16px"},{size:"xxxl",height:"60px",font:"16px",desc:"padX 16px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Nav category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every nav-category component in the tree."]})]})]})}function e7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Grouped settings navigation",color:"var(--color-primary)"},{label:"Optional group titles",color:"var(--color-success)"},{label:"Item description line",color:"var(--color-info)"},{label:"Icon support per item",color:"var(--color-warning)"},{label:"Badge chips per item",color:"#a855f7"},{label:"DUI size + radius + font tokens",color:"#ec4899"},{label:"Active + inactive color overrides",color:"#14b8a6"},{label:"DuiProvider context fallback",color:"#f97316"}]})}),e.jsx(_,{title:"SettingsNavItem",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier. Passed to onSelect callback when clicked."},{name:"label",type:"string",required:!0,description:"Primary label text for the item."},{name:"description",type:"string",description:"Optional secondary line shown below the label in muted style."},{name:"icon",type:"ReactNode",description:"Optional icon rendered left of the label. Tinted with accent when active."},{name:"badge",type:"string",description:"Accent-tinted pill badge rendered on the right side of the item."}]})}),e.jsx(_,{title:"SettingsNavGroup",children:e.jsx(M,{props:[{name:"title",type:"string",description:"Optional uppercase group label shown above the items."},{name:"items",type:"SettingsNavItem[]",required:!0,description:"List of items in this group."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"groups",type:"SettingsNavGroup[]",required:!0,description:"Array of groups, each containing a title and list of items."},{name:"activeId",type:"string",description:"ID of the currently selected item."},{name:"onSelect",type:"(id: string) => void",description:"Called when any item is clicked."},{name:"accentColor",type:"string",description:"Accent color for active item text, icon, and badge. Falls back to DuiProvider activeColor."},{name:"size",type:"DuiSize",description:"Controls item height and font size. Falls back to DuiProvider size."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius for items. Accepts preset name or raw px number."},{name:"color",type:"string",description:"Text color for inactive items. Falls back to DuiProvider color."},{name:"activeColor",type:"string",description:"Color for active item text and icon (alias for accentColor)."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style applied to item text ('normal' | 'italic')."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"Usage note",children:e.jsx(S,{type:"tip",children:"SettingsNavView differs from SideNavView in that it is designed for dense settings panels, not sidebars. It has no collapse toggle or search box. Use it for app settings screens with multiple named sections."})}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SettingsNavView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["SettingsNavView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function t7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Visual theme card grid",color:"var(--color-primary)"},{label:"Mini color swatch preview",color:"var(--color-success)"},{label:"Selected state with checkmark badge",color:"var(--color-info)"},{label:"Optional description per card",color:"var(--color-warning)"},{label:"Accent border on selection",color:"#a855f7"},{label:"Wrapping flex layout",color:"#ec4899"}]})}),e.jsx(_,{title:"ThemeOption",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Unique value identifier for this theme option."},{name:"label",type:"string",required:!0,description:"Display name shown below the swatch."},{name:"description",type:"string",description:"Optional short description shown in muted text below the label."},{name:"preview",type:"{ bg, panel, accent, text }",description:"Optional color preview swatch. Each field is a CSS color string. Renders a mini stripped UI inside the card."}]})}),e.jsx(_,{title:"Preview swatch shape",children:e.jsx(M,{props:[{name:"bg",type:"string",required:!0,description:"Background color of the swatch container."},{name:"panel",type:"string",required:!0,description:"Panel bar color (top strip in the swatch)."},{name:"accent",type:"string",required:!0,description:"Accent color strip (represents primary button/highlight)."},{name:"text",type:"string",required:!0,description:"Text color strip (shown as a semi-transparent bar)."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"options",type:"ThemeOption[]",required:!0,description:"Array of theme options to display as cards."},{name:"value",type:"string",required:!0,description:"Currently selected theme value. Highlights the matching card."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called when the user clicks a card."},{name:"className",type:"string",description:"Extra CSS class applied to the flex container."}]})}),e.jsxs(_,{title:"Card dimensions",children:[e.jsx(S,{type:"info",children:"Each card is fixed at 110px wide. The swatch preview area is 48px tall. Cards wrap automatically when the container is narrower than the total width of all cards."}),e.jsxs(S,{type:"tip",children:["The selected card shows a ",e.jsx("code",{children:"var(--color-primary)"})," border and a circular checkmark badge. The label turns primary-colored and gains font-weight 600."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ThemeCardSelectorView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ThemeCardSelectorView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function n7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Collapsible feature category",color:"var(--color-primary)"},{label:"Smooth height animation (220ms)",color:"var(--color-success)"},{label:"Category-level toggle switch",color:"var(--color-info)"},{label:"Per-feature toggle switches",color:"var(--color-warning)"},{label:"Enabled/total count badge",color:"#a855f7"},{label:"Accent color chip per category",color:"#ec4899"},{label:"Per-feature optional description",color:"#14b8a6"},{label:"No flash on initial render",color:"#f97316"}]})}),e.jsx(_,{title:"FeatureItem",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for this feature item."},{name:"label",type:"string",required:!0,description:"Feature name displayed in the row."},{name:"description",type:"string",description:"Optional sub-label shown below the feature name in muted text."},{name:"enabled",type:"boolean",required:!0,description:"Current toggle state of this feature."},{name:"onToggle",type:"(enabled: boolean) => void",required:!0,description:"Called when the feature toggle switch is clicked."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"categoryLabel",type:"string",required:!0,description:"Category name shown as a colored chip in the header."},{name:"categoryColor",type:"string",description:"Accent color for the chip, header background tint, and toggles. Defaults to var(--color-primary)."},{name:"features",type:"FeatureItem[]",required:!0,description:"List of feature items to display."},{name:"defaultExpanded",type:"boolean",default:"false",description:"Whether the category starts expanded."},{name:"categoryEnabled",type:"boolean",description:"Controlled state for the optional category-level toggle switch."},{name:"onCategoryToggle",type:"(enabled: boolean) => void",description:"When provided, shows a toggle switch in the header to enable/disable the entire category."},{name:"className",type:"string",description:"Extra CSS class on the root element."},{name:"style",type:"CSSProperties",description:"Inline styles on the root element."}]})}),e.jsxs(_,{title:"Animation details",children:[e.jsx(S,{type:"info",children:"The body uses a two-phase height animation to avoid FOUC on mount. On initial render, no transition is applied. On subsequent toggles, height animates from the current px value to 0 (collapse) or scrollHeight then auto (expand)."}),e.jsxs(S,{type:"tip",children:["The enabled count badge (",e.jsx("code",{children:"2/5"}),") is always shown in the header, even when collapsed, so users can see the current state at a glance."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"FeatureCategoryView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["FeatureCategoryView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function r7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Pill-style tag chips",color:"var(--color-primary)"},{label:"Enter or comma to add",color:"var(--color-success)"},{label:"Backspace removes last tag",color:"var(--color-info)"},{label:"Add on blur",color:"var(--color-warning)"},{label:"Duplicate prevention",color:"#a855f7"},{label:"maxTags limit",color:"#ec4899"},{label:"Disabled state",color:"#14b8a6"},{label:"Custom accent color",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tags",type:"string[]",required:!0,description:"Controlled array of current tag values."},{name:"onChange",type:"(tags: string[]) => void",required:!0,description:"Called with the updated tag array whenever a tag is added or removed."},{name:"placeholder",type:"string",default:"'Add tag…'",description:"Placeholder shown in the input when no tags exist."},{name:"accentColor",type:"string",description:"Custom color for tag chips. Defaults to var(--color-tag-bg) / var(--color-tag-text) theme variables."},{name:"maxTags",type:"number",description:"Maximum number of tags allowed. Input is hidden once the limit is reached."},{name:"disabled",type:"boolean",default:"false",description:"Disables adding and removing tags. Reduces opacity to 0.6."},{name:"className",type:"string",description:"Extra CSS class applied to the container."}]})}),e.jsx(_,{title:"Keyboard interactions",children:e.jsx(M,{props:[{name:"Enter",type:"key",description:"Confirms the current input text as a new tag."},{name:"Comma (,)",type:"key",description:"Also confirms the current input as a new tag."},{name:"Backspace",type:"key",description:"When the input is empty, removes the last tag in the list."},{name:"Blur",type:"event",description:"Automatically adds the current input text as a tag if non-empty."}]})}),e.jsxs(_,{title:"Notes",children:[e.jsx(S,{type:"info",children:"Duplicate tags are silently rejected — adding a tag value that already exists in the array does nothing."}),e.jsxs(S,{type:"tip",children:["When ",e.jsx("code",{children:"accentColor"})," is set, both the chip background and border are derived from that color using ",e.jsx("code",{children:"color-mix"})," at 15% and 25% opacity respectively."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"TagInputView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["TagInputView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function o7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Multi-tab bottom panel",color:"var(--color-primary)"},{label:"Drag-to-resize handle",color:"var(--color-success)"},{label:"Collapse / expand toggle",color:"var(--color-info)"},{label:"Tab icons support",color:"var(--color-warning)"},{label:"Configurable min/max height",color:"#a855f7"},{label:"Clicking tab auto-expands",color:"#ec4899"},{label:"Accent color per panel",color:"#14b8a6"}]})}),e.jsx(_,{title:"BottomPanelTab",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique tab identifier."},{name:"label",type:"string",required:!0,description:"Tab label text."},{name:"icon",type:"ReactNode",description:"Optional icon rendered left of the label."},{name:"content",type:"ReactNode",required:!0,description:"Content rendered in the panel body when this tab is active."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tabs",type:"BottomPanelTab[]",required:!0,description:"Array of tabs. The first tab is active on mount."},{name:"defaultHeight",type:"number",default:"200",description:"Initial panel height in px."},{name:"minHeight",type:"number",default:"80",description:"Minimum panel height when dragging to resize."},{name:"maxHeight",type:"number",default:"600",description:"Maximum panel height when dragging to resize."},{name:"defaultCollapsed",type:"boolean",default:"false",description:"Whether the panel starts collapsed."},{name:"accentColor",type:"string",description:"Color for the active tab indicator underline and text."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsxs(_,{title:"Resize behavior",children:[e.jsxs(S,{type:"info",children:["The drag handle is a 4px strip at the top of the panel. Dragging upward increases height; dragging downward decreases it. Height is clamped between ",e.jsx("code",{children:"minHeight"})," and ",e.jsx("code",{children:"maxHeight"}),". Text selection is disabled during drag."]}),e.jsx(S,{type:"tip",children:"Clicking a tab while the panel is collapsed automatically expands it. The collapse toggle button in the tab bar always stays accessible."})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"BottomPanelView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["BottomPanelView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function i7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal-rendered (document.body)",color:"var(--color-primary)"},{label:"Four variants: success/error/warning/info",color:"var(--color-success)"},{label:"Auto-dismiss with configurable duration",color:"var(--color-info)"},{label:"Manual dismiss via X button",color:"var(--color-warning)"},{label:"6 position presets",color:"#a855f7"},{label:"Fade-in-up animation",color:"#ec4899"},{label:"useToast() imperative hook",color:"#14b8a6"},{label:"Optional message sub-line",color:"#f97316"}]})}),e.jsx(_,{title:"Toast interface",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for this toast instance."},{name:"variant",type:"ToastVariant",required:!0,description:"One of 'success' | 'error' | 'warning' | 'info'."},{name:"title",type:"string",required:!0,description:"Primary bold title text."},{name:"message",type:"string",description:"Optional secondary description line."},{name:"duration",type:"number",default:"4000",description:"Auto-dismiss delay in ms. Set to 0 to disable auto-dismiss."}]})}),e.jsx(_,{title:"ToastView Props",children:e.jsx(M,{props:[{name:"toasts",type:"Toast[]",required:!0,description:"Array of active toasts to display."},{name:"onDismiss",type:"(id: string) => void",required:!0,description:"Called when a toast is dismissed (auto or manual)."},{name:"position",type:"ToastPosition",default:"'bottom-right'",description:"Where to anchor the toast stack on screen."}]})}),e.jsx(_,{title:"Position values",children:e.jsx(xe,{name:"position",values:[{value:"top-right",description:"Top-right corner",color:"var(--color-primary)"},{value:"top-left",description:"Top-left corner",color:"var(--color-success)"},{value:"bottom-right",description:"Bottom-right (default)",color:"var(--color-info)"},{value:"bottom-left",description:"Bottom-left corner",color:"var(--color-warning)"},{value:"top-center",description:"Top center (translateX)",color:"#a855f7"},{value:"bottom-center",description:"Bottom center (translateX)",color:"#ec4899"}]})}),e.jsx(_,{title:"ToastVariant colors",children:e.jsx(xe,{name:"ToastVariant",values:[{value:"success",description:"Green — CheckCircleIcon",color:"var(--color-success)"},{value:"error",description:"Red — CloseCircleIcon",color:"var(--color-error)"},{value:"warning",description:"Amber — WarningTriangleIcon",color:"var(--color-warning)"},{value:"info",description:"Blue — InfoCircleIcon",color:"var(--color-info)"}]})}),e.jsxs(_,{title:"useToast hook",children:[e.jsxs(S,{type:"info",children:["The ",e.jsx("code",{children:"useToast()"})," hook provides an imperative API: ",e.jsx("code",{children:"toast(variant, title, message?, duration?)"})," to add a toast and ",e.jsx("code",{children:"dismiss(id)"})," to remove one. Use ",e.jsx("code",{children:"subscribe(fn)"})," to sync the toast array into local state."]}),e.jsxs(S,{type:"tip",children:["The hook stores toasts in a ref (not React state) so calls from outside React components work without re-renders. Subscribe in a ",e.jsx("code",{children:"useEffect"})," to drive the ",e.jsx("code",{children:"ToastView"}),"."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ToastView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ToastView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function a7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Initials avatar auto-generated",color:"var(--color-primary)"},{label:"Hover action buttons (Use/Copy/Edit/Delete)",color:"var(--color-success)"},{label:"Protocol chip with color",color:"var(--color-info)"},{label:"CUSTOM badge for user prompts",color:"var(--color-warning)"},{label:"Selected state with accent tint",color:"#a855f7"},{label:"Copy-to-clipboard with checkmark feedback",color:"#ec4899"},{label:"Fine-grained color overrides via colors prop",color:"#14b8a6"},{label:"Description preview in muted text",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique prompt identifier. Passed to all action callbacks."},{name:"title",type:"string",required:!0,description:"Prompt title. First two words are used to generate the avatar initials."},{name:"content",type:"string",required:!0,description:"Full prompt content. Shown as preview text if description is absent."},{name:"description",type:"string",description:"Short description shown below the title. Overrides content as preview text."},{name:"protocol",type:"string",description:'Protocol label (e.g. "REST", "GraphQL"). Shown as a chip on the right.'},{name:"protocolColor",type:"string",description:"CSS color for the protocol chip."},{name:"isCustom",type:"boolean",default:"false",description:"When true, shows a muted CUSTOM badge next to the title."},{name:"selected",type:"boolean",default:"false",description:"Highlights the card with accent tint background."},{name:"accentColor",type:"string",description:"Accent color used for the avatar background and selected tint."},{name:"onUse",type:"(id: string) => void",description:"Shows a SparkleIcon action button on hover."},{name:"onCopy",type:"(id: string) => void",description:"Shows a CopyIcon action button on hover. Transitions to CheckIcon for 1.5s."},{name:"onEdit",type:"(id: string) => void",description:"Shows a RenameIcon action button on hover."},{name:"onDelete",type:"(id: string) => void",description:"Shows a TrashIcon action button on hover (danger-colored)."},{name:"onClick",type:"(id: string) => void",description:"Called when the card itself is clicked."},{name:"colors",type:"PromptCardColors",description:"Fine-grained color overrides for every part of the card."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"colors overrides",children:e.jsx(M,{props:[{name:"colors.avatarBg",type:"string",description:"Avatar background color."},{name:"colors.avatarText",type:"string",description:"Avatar initials/icon color."},{name:"colors.titleText",type:"string",description:"Title text color."},{name:"colors.bodyText",type:"string",description:"Description / content preview color."},{name:"colors.customBadgeBg",type:"string",description:"CUSTOM chip background color."},{name:"colors.customBadgeText",type:"string",description:"CUSTOM chip text color."},{name:"colors.chipColor",type:"string",description:"Protocol chip color override."},{name:"colors.actionIconColor",type:"string",description:"Default action icon color."},{name:"colors.actionDeleteColor",type:"string",description:"Delete action icon color (default: var(--color-error))."},{name:"colors.rowBg",type:"string",description:"Card background."},{name:"colors.rowBgHover",type:"string",description:"Card hover background."},{name:"colors.rowBgSelected",type:"string",description:"Card selected background."}]})}),e.jsx(_,{title:"Notes",children:e.jsx(S,{type:"tip",children:"Action buttons only appear on hover. They render in order: Use → Copy → Edit → Delete. Omit any callback to hide that action button."})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"PromptCardView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["PromptCardView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function s7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsxs(S,{type:"info",children:["PromptLibraryView consists of two cooperating components: ",e.jsx("strong",{children:"PromptLibraryListView"})," (the searchable tree sidebar) and ",e.jsx("strong",{children:"PromptLibraryEditorView"})," (the detail panel with preview/edit modes). Use them side-by-side in a split layout."]})}),e.jsx(_,{title:"Features — PromptLibraryListView",children:e.jsx(I,{features:[{label:"Three-level tree: Sections → Categories → Items",color:"var(--color-primary)"},{label:"Built-in search with live filtering",color:"var(--color-success)"},{label:"Total count badge in search bar",color:"var(--color-info)"},{label:"Collapsible sections and categories",color:"var(--color-warning)"},{label:"PromptCardView rows with hover actions",color:"#a855f7"},{label:"isCustom + isModified flags per item",color:"#ec4899"}]})}),e.jsx(_,{title:"Features — PromptLibraryEditorView",children:e.jsx(I,{features:[{label:"Preview mode: variable pills highlighted",color:"var(--color-primary)"},{label:"Edit mode: syntax-highlighted textarea",color:"var(--color-success)"},{label:"Variable insertion chips",color:"var(--color-info)"},{label:"Tab bar with optional icons",color:"var(--color-warning)"},{label:"isDirty / unsaved indicator",color:"#a855f7"},{label:"Save button (active when dirty)",color:"#ec4899"},{label:"Trigger breadcrumb label",color:"#14b8a6"},{label:"Avatar with initials",color:"#f97316"}]})}),e.jsx(_,{title:"PromptLibraryListView Props",children:e.jsx(M,{props:[{name:"sections",type:"PromptLibrarySection[]",required:!0,description:"Top-level sections, each with an id, title, and array of categories."},{name:"activeId",type:"string",description:"ID of the currently selected prompt."},{name:"onSelect",type:"(id: string) => void",description:"Called when a prompt card is clicked."},{name:"search",type:"string",default:"''",description:"Controlled search query string."},{name:"onSearchChange",type:"(v: string) => void",description:"Called when the user types in the search box."},{name:"accentColor",type:"string",description:"Accent color for badges and section count chips."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"PromptLibraryEditorView Props",children:e.jsx(M,{props:[{name:"title",type:"string",required:!0,description:"Prompt title shown in the header. Used for initials generation."},{name:"content",type:"string",required:!0,description:"Full prompt text — shown in preview or editable in edit mode."},{name:"onContentChange",type:"(content: string) => void",description:"Called when the user edits the prompt text."},{name:"description",type:"string",description:"Optional description shown below the title."},{name:"triggerLabel",type:"string",description:"Breadcrumb label shown in italic below the description (e.g. the trigger phrase)."},{name:"avatarColor",type:"string",description:"Background color of the avatar circle."},{name:"isCustom",type:"boolean",default:"false",description:"Shows a CUSTOM badge."},{name:"isDirty",type:"boolean",default:"false",description:'When true, shows an "unsaved" indicator and activates the Save button.'},{name:"variables",type:"PromptLibraryVariable[]",description:"Variable chips shown above the editor. Clicking inserts the variable text."},{name:"tabs",type:"PromptLibraryEditorTab[]",description:"Tab bar tabs shown above the content area."},{name:"activeTabId",type:"string",description:"Controlled active tab ID."},{name:"onTabChange",type:"(id: string) => void",description:"Called when the user switches tabs."},{name:"viewMode",type:"'preview' | 'edit'",default:"'preview'",description:"Controlled view mode. Can also be uncontrolled."},{name:"onViewModeChange",type:"(mode) => void",description:"Called when user toggles preview/edit. If omitted, component is uncontrolled."},{name:"onSave",type:"() => void",description:"Called when Save button is clicked. Renders the button only when provided."},{name:"onVariableInsert",type:"(insert: string) => void",description:"Called when a variable chip is clicked."},{name:"accentColor",type:"string",description:"Accent color for tabs, toggles, and save button."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"Variable syntax",children:e.jsxs(S,{type:"info",children:["Variables are detected by the regex ",e.jsx("code",{children:"{{varName}}"})," or ",e.jsx("code",{children:"{varName}"}),". In preview mode they render as colored inline pills. In edit mode the textarea uses a backdrop overlay to highlight them without breaking cursor position."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"PromptLibraryListView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["PromptLibraryListView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function l7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsx(S,{type:"info",children:"StageView provides three indicator components for showing multi-step process status. All three share the same base props and can be used inline or stacked in a progress list."})}),e.jsx(_,{title:"Variants",children:e.jsx(Od,{variants:[{label:"StageCheck",description:"Completed — green ring with a checkmark",color:"var(--color-success)"},{label:"StageSpin",description:"In-progress — rotating spinner ring",color:"var(--color-info)"},{label:"StagePulse",description:"Pending — pulsing dot (draws attention)",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"SVG-drawn indicators (no external deps)",color:"var(--color-primary)"},{label:"CSS keyframe animations",color:"var(--color-success)"},{label:"Configurable size",color:"var(--color-info)"},{label:"Label + sublabel text",color:"var(--color-warning)"},{label:"Accent color override",color:"#a855f7"},{label:"Theme CSS var defaults",color:"#ec4899"}]})}),e.jsx(_,{title:"Shared Base Props (StageViewBaseProps)",children:e.jsx(M,{props:[{name:"label",type:"string",description:"Primary label text shown to the right of the indicator."},{name:"sublabel",type:"string",description:"Secondary description shown below the label in muted text."},{name:"color",type:"string",description:"Override accent color for the indicator ring/dot. Defaults to the component-specific CSS var."},{name:"size",type:"number",default:"20",description:"Ring/icon diameter in px. Stroke width auto-adjusts at 16px and below."},{name:"textSize",type:"number",default:"12",description:"Font size in px for the label text."},{name:"className",type:"string",description:"Extra CSS class on the root flex container."}]})}),e.jsx(_,{title:"Default CSS variable colors",children:e.jsx(M,{props:[{name:"StageCheck",type:"var(--color-stage-check)",description:"Usually green — completed state."},{name:"StageSpin",type:"var(--color-stage-spin)",description:"Usually blue — active/in-progress state."},{name:"StagePulse",type:"var(--color-stage-pulse)",description:"Usually amber/orange — pending state."}]})}),e.jsx(_,{title:"Animation details",children:e.jsxs(S,{type:"info",children:[e.jsx("strong",{children:"StageSpin"})," uses a 0.9s linear CSS keyframe rotation applied to an SVG circle with a 270° dasharray. ",e.jsx("strong",{children:"StagePulse"})," uses a 1.6s ease-out keyframe that simultaneously pulses an outer ring (opacity/scale) and an inner dot (scale). Both animations are defined in ",e.jsx("code",{children:"StageView.css"}),"."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"StageView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["StageView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function c7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",description:"All DUI icons live in a single file. The gallery panel IS the documentation — browse it to find icons.",children:e.jsx(I,{features:[{label:"Single source file",color:"var(--color-primary)"},{label:"Named <Name>Icon convention",color:"var(--color-success)"},{label:"size prop (default 14)",color:"var(--color-info)"},{label:"style prop for color overrides",color:"var(--color-warning)"},{label:"Inline SVG components",color:"#a855f7"},{label:"strokeWidth built-in (2)",color:"#ec4899"},{label:"currentColor for theming",color:"#14b8a6"}]})}),e.jsx(_,{title:"Source location",children:e.jsxs(S,{type:"info",children:["All icons are defined in ",e.jsx(xt,{children:"src/icons/daakia-icons.tsx"}),". This is the ONLY file in the DUI project that contains inline SVG elements. Do not write SVG anywhere else."]})}),e.jsx(_,{title:"Icon API",children:e.jsxs(S,{type:"tip",children:["Every icon component accepts these props:",e.jsx("br",{}),"• ",e.jsx("code",{children:"size?: number"})," — sets both width and height (default: 14)",e.jsx("br",{}),"• ",e.jsx("code",{children:"style?: CSSProperties"})," — inline styles (use to set color, e.g. ",e.jsx("code",{children:'{ color: "var(--color-primary)" }'}),")",e.jsx("br",{}),"• ",e.jsx("code",{children:"className?: string"})," — extra CSS class",e.jsx("br",{}),e.jsx("br",{}),"Icons use ",e.jsx("code",{children:"currentColor"})," for stroke, so set ",e.jsx("code",{children:"color"})," on the icon or a parent to theme them."]})}),e.jsx(_,{title:"Naming convention",children:e.jsxs(S,{type:"info",children:["All icons follow the ",e.jsx("code",{children:"<Name>Icon"})," naming pattern. Examples: ",e.jsx(xt,{children:"SearchIcon"}),", ",e.jsx(xt,{children:"ChevronDownIcon"}),", ",e.jsx(xt,{children:"TrashIcon"}),", ",e.jsx(xt,{children:"CheckCircleIcon"}),", ",e.jsx(xt,{children:"SparkleIcon"}),". Import from ",e.jsx("code",{children:"../../../icons"})," (relative to the component file)."]})}),e.jsx(_,{title:"Adding new icons",children:e.jsxs(S,{type:"warning",children:["To add a new icon: open ",e.jsx(xt,{children:"src/icons/daakia-icons.tsx"}),", add a new exported function component following the existing pattern, then import it wherever needed. Never write a raw SVG element in any other file."]})})]})}function d7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Left prefix slot (icon / node)",color:"var(--color-primary)"},{label:"Right suffix slot (clear button / count)",color:"var(--color-success)"},{label:"DUI size token alignment",color:"var(--color-info)"},{label:"Raw height override",color:"var(--color-warning)"},{label:"Theme border + background variables",color:"#a855f7"},{label:"Passes through HTMLInput attributes",color:"#ec4899"},{label:"DuiProvider size fallback",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Controlled input value."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called when the user types in the input."},{name:"prefix",type:"ReactNode",description:"Node rendered left inside the bar. Typically a SearchIcon."},{name:"suffix",type:"ReactNode",description:"Node rendered right inside the bar. Typically a clear button or item count."},{name:"placeholder",type:"string",description:"Placeholder text for the input."},{name:"size",type:"DuiSize",description:"Size token controlling height and font size. Falls back to DuiProvider."},{name:"height",type:"number",description:"Raw height override in px. Prefer size for token-aligned sizing."},{name:"style",type:"CSSProperties",description:"Inline styles on the root container."},{name:"className",type:"string",description:"Extra CSS class on the root container."},{name:"...rest",type:"InputHTMLAttributes",description:"All other HTML input attributes (autoFocus, onKeyDown, etc.) passed through to the input element."}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xxs",height:"18px",font:"10px",desc:"Micro"},{size:"xs",height:"22px",font:"11px",desc:"Compact"},{size:"sm",height:"26px",font:"11px",desc:"Small"},{size:"md",height:"30px",font:"12px",desc:"Default"},{size:"lg",height:"34px",font:"13px",desc:"Large"},{size:"xl",height:"38px",font:"14px",desc:"Extra large"}]})}),e.jsxs(_,{title:"Notes",children:[e.jsxs(S,{type:"tip",children:["SearchInputView is a thin wrapper — it does not manage its own filter logic. Pair it with ",e.jsx("code",{children:"filterItems()"})," from SideNavView or your own filter function."]}),e.jsx(S,{type:"info",children:"The container uses flex: 1 by default, so it stretches to fill available width in a flex parent. Override with style={{ flex: 'none', width: 200 }} to pin a fixed width."})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SearchInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on SearchInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function u7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Value always in milliseconds",color:"var(--color-primary)"},{label:"Unit selector (ms/s/m/hr)",color:"var(--color-success)"},{label:"Auto-detects best unit on mount",color:"var(--color-info)"},{label:"Popup unit picker",color:"var(--color-warning)"},{label:"Click-outside to close popup",color:"#a855f7"},{label:"DUI size token sizing",color:"#ec4899"},{label:"Configurable width",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"value",type:"number",required:!0,description:"Current value in milliseconds."},{name:"onChange",type:"(ms: number) => void",required:!0,description:"Called with the new value in milliseconds whenever the number or unit changes."},{name:"placeholder",type:"string",default:"'0'",description:"Placeholder shown when value is 0."},{name:"accentColor",type:"string",description:"Accent color override (currently unused internally — reserved for future use)."},{name:"size",type:"DuiSize",description:"Size token controlling input height and font size. Falls back to DuiProvider."},{name:"width",type:"number",default:"110",description:"Width of the number input in px."},{name:"className",type:"string",description:"Extra CSS class on the root container."}]})}),e.jsx(_,{title:"Unit options",children:e.jsx(xe,{name:"DurationUnit",values:[{value:"ms",description:"Milliseconds — multiplier ×1",color:"var(--color-warning)"},{value:"s",description:"Seconds — multiplier ×1000",color:"var(--color-success)"},{value:"m",description:"Minutes — multiplier ×60000",color:"var(--color-info)"},{value:"hr",description:"Hours — multiplier ×3600000",color:"var(--color-error)"}]})}),e.jsxs(_,{title:"Auto-detection on mount",children:[e.jsx(S,{type:"info",children:'When the component mounts, it picks the most readable unit for the initial value: hours if evenly divisible by 3,600,000; minutes if by 60,000; seconds if by 1,000; otherwise milliseconds. This avoids showing "60000 ms" when "60 s" is clearer.'}),e.jsx(S,{type:"warning",children:"The internal unit state is not derived from the value on every render — only on mount. If you need to reset the unit externally, unmount and remount the component."})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"DurationInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on DurationInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function p7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"{{variable}} token highlighting",color:"var(--color-primary)"},{label:"contentEditable div (not textarea)",color:"var(--color-success)"},{label:"URL history dropdown suggestions",color:"var(--color-info)"},{label:"Mock server suggestions with server icon",color:"var(--color-warning)"},{label:"Portal-rendered dropdown (fixed position)",color:"#a855f7"},{label:"Keyboard nav: ↑↓ Enter Escape",color:"#ec4899"},{label:"IME / composition support",color:"#14b8a6"},{label:"Cursor position preserved on external value sync",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Controlled input value."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called with plain text value on every edit."},{name:"onKeyDown",type:"(e: React.KeyboardEvent) => void",description:"Additional keydown handler called after internal navigation handling."},{name:"onBlur",type:"() => void",description:"Called when the editor loses focus."},{name:"placeholder",type:"string",description:"Placeholder text shown when value is empty."},{name:"suggestions",type:"string[]",default:"[]",description:"URL history strings for the dropdown. Filtered to match current input."},{name:"mockServers",type:"MockServerSuggestion[]",default:"[]",description:"Running mock server URLs shown at top of dropdown with a server icon."},{name:"disabled",type:"boolean",description:"Disables editing. Applies opacity class."},{name:"accentColor",type:"string",description:"Border highlight color when focused."},{name:"size",type:"DuiSize",description:"Size token for height and font size. Falls back to DuiProvider."},{name:"height",type:"number",description:"Raw height override in px. Prefer size for token-aligned sizing."},{name:"borderRadius",type:"number",default:"0",description:"Border radius of the input in px. Default 0 matches URL bar usage; set 6 for standalone rounded use."},{name:"style",type:"CSSProperties",description:"Inline styles on the root container."},{name:"className",type:"string",description:"Extra CSS class on the root container."}]})}),e.jsx(_,{title:"MockServerSuggestion",children:e.jsx(M,{props:[{name:"url",type:"string",required:!0,description:"The full URL of the running mock server."},{name:"name",type:"string",required:!0,description:"Display name shown on the right side of the dropdown row."}]})}),e.jsxs(_,{title:"Token patterns highlighted",children:[e.jsxs(S,{type:"info",children:["Two token patterns are highlighted: ",e.jsx("code",{children:"{{varName}}"})," and ",e.jsxs("code",{children:["$","{varName}"]}),". A third escape pattern ",e.jsxs("code",{children:["$daakia_","{varName}","_$"]})," is also highlighted but with a different class. Highlighting is done via HTML injection in a backdrop div layered under a transparent textarea."]}),e.jsxs(S,{type:"warning",children:["This component uses a ",e.jsx("code",{children:"contentEditable"})," div rather than a native input. Avoid nesting it inside forms that submit on Enter — the Enter key is explicitly prevented inside this component."]})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"HighlightedInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on HighlightedInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function h7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Enable/disable per row checkbox",color:"var(--color-primary)"},{label:"Bulk edit mode (textarea)",color:"var(--color-success)"},{label:"Insert row divider between rows",color:"var(--color-info)"},{label:"HTTP header key autocomplete",color:"var(--color-warning)"},{label:"Sensitive key masking with eye toggle",color:"#a855f7"},{label:"Pinned / computed read-only rows",color:"#ec4899"},{label:"Confirm dialog on clear-all",color:"#14b8a6"},{label:"Optional description column",color:"#f97316"}]})}),e.jsx(_,{title:"KeyValueTableRow",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique row identifier (use crypto.randomUUID())."},{name:"key",type:"string",required:!0,description:"Key field value."},{name:"value",type:"string",required:!0,description:"Value field value."},{name:"description",type:"string",description:"Optional description column value."},{name:"enabled",type:"boolean",required:!0,description:"Whether the row is enabled (checked)."},{name:"type",type:"'text' | 'file'",default:"'text'",description:"Row type — used by FormDataTableView subclass."}]})}),e.jsx(_,{title:"PinnedKeyValueRow",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique row identifier."},{name:"key",type:"string",required:!0,description:"Key value (read-only)."},{name:"value",type:"string",required:!0,description:"Value (read-only)."},{name:"description",type:"string",description:"Optional description."},{name:"deletable",type:"boolean",description:"When true, shows a trash icon on hover and calls onPinnedRemove."},{name:"masked",type:"boolean",description:"When true, value is masked with an eye toggle."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"rows",type:"KeyValueTableRow[]",required:!0,description:"Controlled array of editable rows."},{name:"onChange",type:"(rows: KeyValueTableRow[]) => void",required:!0,description:"Called with the updated rows array on any change."},{name:"showDescription",type:"boolean",default:"false",description:"Add a third Description column to the grid."},{name:"placeholder",type:"{ key?, value? }",description:"Placeholder text for key and value inputs."},{name:"autocompleteKeys",type:"boolean",default:"false",description:"Enable HTTP header key autocomplete in the key column."},{name:"maskSensitive",type:"boolean",default:"false",description:"Automatically mask values for known sensitive keys (Authorization, token, etc.)."},{name:"hideToolbar",type:"boolean",default:"false",description:"Hides the entire toolbar row."},{name:"label",type:"string",description:'Left-side column header label (default "Key").'},{name:"accentColor",type:"string",description:"Accent color for insert divider and toolbar highlights."},{name:"toolbarExtra",type:"ReactNode",description:"Extra nodes rendered in the toolbar right side, before the trash icon."},{name:"size",type:"DuiSize",description:'Controls input height and font size. Falls back to DuiProvider or "md".'},{name:"bordered",type:"boolean",default:"false",description:"Wraps the table in a rounded border panel."},{name:"pinnedTopRows",type:"PinnedKeyValueRow[]",description:"Computed rows shown above editable rows with lock icon. Hidden by default — revealed via eye icon."},{name:"onPinnedRemove",type:"(id: string) => void",description:"Called when a deletable pinned row is removed."}]})}),e.jsxs(_,{title:"Bulk edit format",children:[e.jsxs(S,{type:"info",children:["In bulk edit mode, each line is a ",e.jsx("code",{children:"key: value"})," pair. Prepend ",e.jsx("code",{children:"#"})," to disable a row. Switching back to table mode parses the textarea content back into rows."]}),e.jsx(S,{type:"tip",children:"Pinned rows are ideal for computed/auto-generated headers (e.g. Content-Type derived from the request body). Show them only when the user clicks the eye icon to avoid visual clutter."})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"KeyValueTableView accepts a local size prop but forwards it down to the nested DUI primitives it composes (inputs / buttons / cells), rather than resolving sizing itself. Those inner primitives fall back to the nearest <DuiProvider> context value when size is omitted.",children:[e.jsx(I,{features:[{label:"Delegates sizing to nested primitives",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"}]}),e.jsx(S,{type:"info",children:"There is no dedicated size reference table for KeyValueTableView itself — its visual size comes from whichever DUI input/button/cell primitives it renders internally, each following its own category base hook."})]})]})}function m7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Unified border around all segments",color:"var(--color-primary)"},{label:"Focus ring on any active segment",color:"var(--color-success)"},{label:"Select segment with portal dropdown",color:"var(--color-info)"},{label:"Text segment with flex sizing",color:"var(--color-warning)"},{label:"Button segment (accent-outlined)",color:"#a855f7"},{label:"Divider segment (1px border)",color:"#ec4899"},{label:"Custom ReactNode segment",color:"#14b8a6"},{label:"DUI size token support",color:"#f97316"}]})}),e.jsx(_,{title:"Segment types",children:e.jsx(xe,{name:"MergedInputSegment.type",values:[{value:"select",description:"Dropdown selector with colored option labels and checkmark",color:"var(--color-primary)"},{value:"text",description:"Text input with configurable flex and placeholder",color:"var(--color-success)"},{value:"button",description:"Accent-outlined action button with optional icon",color:"var(--color-info)"},{value:"divider",description:"1px vertical separator aligned to input center",color:"var(--color-warning)"},{value:"custom",description:"Any ReactNode with optional fixed width",color:"#a855f7"}]})}),e.jsx(_,{title:"Segment props — select",children:e.jsx(M,{props:[{name:"type",type:"'select'",required:!0,description:"Marks this as a select segment."},{name:"value",type:"string",required:!0,description:"Currently selected value."},{name:"options",type:"MergedSelectOption[]",required:!0,description:"Array of { value, label, color? } option objects."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called when an option is selected."},{name:"width",type:"number",description:"Fixed width in px. Defaults to size-derived value (72–106px)."}]})}),e.jsx(_,{title:"Segment props — text",children:e.jsx(M,{props:[{name:"type",type:"'text'",required:!0,description:"Marks this as a text input segment."},{name:"value",type:"string",required:!0,description:"Controlled input value."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called on input change."},{name:"placeholder",type:"string",description:"Placeholder text."},{name:"flex",type:"number",default:"1",description:"CSS flex value for width distribution."}]})}),e.jsx(_,{title:"Segment props — button",children:e.jsx(M,{props:[{name:"type",type:"'button'",required:!0,description:"Marks this as a button segment."},{name:"label",type:"string",required:!0,description:"Button label text."},{name:"onClick",type:"() => void",required:!0,description:"Click handler."},{name:"icon",type:"ReactNode",description:"Optional icon rendered before the label."},{name:"accentColor",type:"string",description:"Button accent color (border + text). Defaults to var(--color-primary)."}]})}),e.jsx(_,{title:"Segment props — custom",children:e.jsx(M,{props:[{name:"type",type:"'custom'",required:!0,description:"Marks this as a custom content segment."},{name:"content",type:"ReactNode",required:!0,description:"Any ReactNode to render inside the segment."},{name:"width",type:"number",description:"Optional fixed width for the custom segment container."}]})}),e.jsx(_,{title:"MergedInputView Props",children:e.jsx(M,{props:[{name:"segments",type:"MergedInputSegment[]",required:!0,description:"Ordered array of segments composing the input."},{name:"size",type:"DuiSize",description:"Size token for all segments. Falls back to DuiProvider."},{name:"accentColor",type:"string",description:"Border highlight and focus ring color."},{name:"disabled",type:"boolean",default:"false",description:"Disables all segments. Applies 0.5 opacity."},{name:"className",type:"string",description:"Extra CSS class on the root container."}]})}),e.jsx(_,{title:"Real-world pattern",children:e.jsxs(S,{type:"tip",children:["MergedInputView powers the URL bar in Daakia: ",e.jsx("code",{children:"[select:method] | [divider] | [text:url] | [button:Send]"}),". The entire row shares one border and one focus ring."]})}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"MergedInputView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs(S,{type:"info",children:["MergedInputView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function f7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsx(S,{type:"info",children:"DuiProvider is a React context wrapper that sets global defaults for all DUI components in its subtree. Every DUI component reads from this context when no explicit prop is passed — making it easy to enforce consistent sizing across an entire panel or page."})}),e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Global size propagation",color:"var(--color-primary)"},{label:"Border radius preset or raw px",color:"var(--color-success)"},{label:"Active color for nav + toggle states",color:"var(--color-info)"},{label:"Text color override",color:"var(--color-warning)"},{label:"Width preset",color:"#a855f7"},{label:"Font style (normal/italic)",color:"#ec4899"},{label:"useDui() hook for component access",color:"#14b8a6"},{label:"useDuiStyle() convenience hook",color:"#f97316"}]})}),e.jsx(_,{title:"DuiProvider Props",children:e.jsx(M,{props:[{name:"size",type:"DuiSize",default:"'md'",description:"Default size inherited by all DUI components when no local size prop is passed."},{name:"width",type:"DuiWidth",description:"Default width preset. Components that support width read this as their default."},{name:"borderRadius",type:"DuiRadius | number",description:"Border-radius preset or raw px number. Overrides the size-derived default."},{name:"color",type:"string",description:"Text color override (CSS var or value, e.g. var(--color-text-primary))."},{name:"defaultColor",type:"string",description:"Primary/accent color for interactive highlights (buttons, selections)."},{name:"activeColor",type:"string",description:"Color for active/selected states (tabs, nav items, toggles)."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style applied to all text within the DUI subtree ('normal' | 'italic')."},{name:"children",type:"ReactNode",required:!0,description:"The subtree that inherits these defaults."}]})}),e.jsx(_,{title:"DuiSize values",children:e.jsx(H,{sizes:[{size:"xxs",height:"18px",font:"10px",desc:"Micro"},{size:"xs",height:"22px",font:"11px",desc:"Compact"},{size:"sm",height:"26px",font:"11px",desc:"Small"},{size:"md",height:"30px",font:"12px",desc:"Default"},{size:"lg",height:"34px",font:"13px",desc:"Large"},{size:"xl",height:"38px",font:"14px",desc:"XL"},{size:"xxl",height:"44px",font:"15px",desc:"Double XL"},{size:"xxxl",height:"52px",font:"16px",desc:"Triple XL"}]})}),e.jsx(_,{title:"DuiRadius presets",children:e.jsx(xe,{name:"DuiRadius",values:[{value:"none",description:"0px — no rounding",color:"var(--color-text-muted)"},{value:"sm",description:"4px — subtle",color:"var(--color-success)"},{value:"md",description:"6px — default",color:"var(--color-primary)"},{value:"lg",description:"10px — rounded",color:"var(--color-info)"},{value:"full",description:"9999px — pill shape",color:"#a855f7"}]})}),e.jsx(_,{title:"DuiWidth presets",children:e.jsx(xe,{name:"DuiWidth",values:[{value:"sm",description:"160px",color:"var(--color-primary)"},{value:"md",description:"240px",color:"var(--color-success)"},{value:"default",description:"320px",color:"var(--color-info)"},{value:"lg",description:"400px",color:"var(--color-warning)"},{value:"fullWidth",description:"100%",color:"#a855f7"},{value:"maxContent",description:"max-content",color:"#ec4899"},{value:"fw",description:"100% (alias)",color:"#14b8a6"},{value:"mx",description:"max-content (alias)",color:"#f97316"}]})}),e.jsx(_,{title:"Hooks",children:e.jsx(M,{props:[{name:"useDui()",type:"DuiConfig",description:"Returns the current DUI context object. Components call this and fall back to context values when no explicit prop is passed."},{name:"useDuiStyle(sizeFallback)",type:"{ borderRadius, width, color, defaultColor, activeColor, fontStyle }",description:"Convenience hook that resolves borderRadius and width to CSS strings plus extracts color/style values from context."},{name:"resolveBorderRadius(override, sizeFallback)",type:"string",description:"Resolves a DuiRadius preset or raw number to a CSS string."},{name:"resolveWidth(width)",type:"string",description:"Resolves a DuiWidth preset to a CSS string. Falls back to 'auto'."}]})}),e.jsx(_,{title:"Usage pattern",children:e.jsxs(S,{type:"tip",children:["Wrap a settings panel with ",e.jsx("code",{children:'<DuiProvider size="sm">'})," to make every input, button, and nav item within it compact — without passing ",e.jsx("code",{children:'size="sm"'})," to each component individually."]})})]})}function g7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Floating draggable toolbar",color:"var(--color-primary)"},{label:"Fixed position by default",color:"var(--color-success)"},{label:"Contained mode for showcase/preview",color:"var(--color-info)"},{label:"Active toggle state per item",color:"var(--color-warning)"},{label:"Separator lines between items",color:"#a855f7"},{label:"Status text after items",color:"#ec4899"},{label:"Drag handle grip",color:"#14b8a6"},{label:"CSS custom property theming",color:"#f97316"}]})}),e.jsx(_,{title:"HudItem",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique item identifier (used as React key)."},{name:"icon",type:"ReactNode",required:!0,description:"Icon rendered inside the button."},{name:"onClick",type:"() => void",description:"Called when the button is clicked."},{name:"title",type:"string",description:"Tooltip shown on hover."},{name:"disabled",type:"boolean",description:"Disables the button (reduces opacity, no cursor pointer)."},{name:"active",type:"boolean",description:"Renders a highlighted active state (toggled-on style)."},{name:"separator",type:"boolean",description:"Renders a separator line before this item."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"items",type:"HudItem[]",required:!0,description:"Array of HUD action items."},{name:"status",type:"string",description:"Optional short status text rendered after the last item."},{name:"accentColor",type:"string",description:"Sets --dui-hud-accent CSS custom property."},{name:"activeColor",type:"string",description:"Sets --dui-hud-active-color CSS custom property for toggled-on items."},{name:"className",type:"string",description:"Extra CSS class on the root element."},{name:"onDragEnd",type:"(x: number, y: number) => void",description:"Called when the user releases the drag handle. Receives the final left/top position in px."},{name:"contained",type:"boolean",default:"false",description:"When true, uses position:relative instead of fixed and disables drag. For embedded/showcase use."}]})}),e.jsxs(_,{title:"Drag behavior",children:[e.jsxs(S,{type:"info",children:["HudView uses ",e.jsx("code",{children:"position: fixed"})," by default, centered horizontally via CSS transform. When the user drags, the element switches to an absolute left/top and the transform is cleared. The ",e.jsx("code",{children:"onDragEnd"})," callback receives the final screen coordinates so you can persist the position."]}),e.jsxs(S,{type:"tip",children:["Set ",e.jsxs("code",{children:["contained=",!0]})," in the DUI showcase or any preview pane so the HUD stays inside its container without escaping to the screen edge."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"HudView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["HudView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function _7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Controlled expand/collapse",color:"var(--color-primary)"},{label:"Animated chevron rotation",color:"var(--color-success)"},{label:"Count badge next to title",color:"var(--color-info)"},{label:"headerRight slot for action buttons",color:"var(--color-warning)"},{label:"Accent color via CSS custom property",color:"#a855f7"},{label:"Click-outside safe header actions",color:"#ec4899"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"title",type:"string",required:!0,description:"Section title shown in the header."},{name:"expanded",type:"boolean",required:!0,description:"Controlled expanded state."},{name:"onToggle",type:"() => void",required:!0,description:"Called when the header is clicked to toggle expand state."},{name:"badge",type:"number",description:"Count badge shown next to the title. Hidden when 0 or undefined."},{name:"accentColor",type:"string",description:"Sets --dui-collapse-accent CSS custom property used in CSS for chip and badge colors."},{name:"headerRight",type:"ReactNode",description:"Slot rendered on the far right of the header. Click events are stopped from propagating to the toggle."},{name:"children",type:"ReactNode",required:!0,description:"Content rendered in the body when expanded."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsxs(_,{title:"Usage notes",children:[e.jsxs(S,{type:"info",children:["CollapsibleSectionView is fully controlled — you manage ",e.jsx("code",{children:"expanded"}),' state externally. This makes it easy to sync multiple sections or implement "expand all / collapse all" actions.']}),e.jsxs(S,{type:"tip",children:["The ",e.jsx("code",{children:"headerRight"})," slot is ideal for icon buttons (add, clear, mute). They receive a ",e.jsx("code",{children:"stopPropagation"})," wrapper so clicking them doesn't toggle the section."]}),e.jsxs(S,{type:"info",children:["Used internally by ",e.jsx("strong",{children:"DebugView"})," for the Variables, Watch, Call Stack, and Breakpoints sections."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"CollapsibleSectionView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["CollapsibleSectionView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function y7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Recursive JSON tree explorer",color:"var(--color-primary)"},{label:"Click to expand/collapse nodes",color:"var(--color-success)"},{label:"Configurable auto-expand depth",color:"var(--color-info)"},{label:"Max depth guard (prevents infinite trees)",color:"var(--color-warning)"},{label:"Type-colored values (string/number/bool/null)",color:"#a855f7"},{label:"Inline preview when collapsed",color:"#ec4899"},{label:"Array length indicator",color:"#14b8a6"},{label:"Optional root name label",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"data",type:"unknown",required:!0,description:"Any JavaScript value to display (object, array, primitive, null)."},{name:"name",type:"string",description:'Optional label shown as the root key (e.g. "response").'},{name:"defaultExpandDepth",type:"number",default:"2",description:"Nodes at depth less than this value start expanded."},{name:"maxDepth",type:"number",default:"8",description:"Rendering stops at this depth to prevent infinite tree explosion."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"Value type colors",children:e.jsx(M,{props:[{name:"string",type:"CSS class",description:"dui_json-tree__value--string — themed via CSS variable."},{name:"number",type:"CSS class",description:"dui_json-tree__value--number — typically green/teal."},{name:"boolean",type:"CSS class",description:"dui_json-tree__value--boolean — typically blue."},{name:"null",type:"CSS class",description:"dui_json-tree__value--null — typically grey."},{name:"object",type:"CSS class",description:"dui_json-tree__value--object — shown as {…} when collapsed."},{name:"array",type:"CSS class",description:"dui_json-tree__value--array — shown as (N) [x, y, …] when collapsed."},{name:"fn",type:"CSS class",description:"dui_json-tree__value--fn — strings starting with '<' are treated as function/JSX previews."}]})}),e.jsx(_,{title:"Collapsed preview format",children:e.jsxs(S,{type:"info",children:["When a node is collapsed, JsonTreeView shows a compact inline preview: objects show up to 3 key-value pairs (",e.jsx("code",{children:'{ name: "x", age: 5, … }'}),"), arrays show up to 4 items (",e.jsx("code",{children:"(10) [1, 2, 3, 4, …]"}),"). String values longer than 60 characters are truncated with an ellipsis."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"JsonTreeView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["JsonTreeView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function v7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Expandable log row with chevron",color:"var(--color-primary)"},{label:"Icon slot (left)",color:"var(--color-success)"},{label:"Colored badge label",color:"var(--color-info)"},{label:"Unix timestamp rendered as HH:MM:SS",color:"var(--color-warning)"},{label:"Default expanded state",color:"#a855f7"},{label:"Arbitrary children in body",color:"#ec4899"},{label:"CSS custom property for badge color",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"icon",type:"ReactNode",required:!0,description:"Icon rendered on the left side of the header row."},{name:"title",type:"string",required:!0,description:"Main log entry title text."},{name:"badge",type:"string",description:'Short colored label shown after the title (e.g. "GET", "200").'},{name:"badgeColor",type:"string",description:"CSS color or var() for the badge text and tinted background. Sets --dui-logentry-badge."},{name:"timestamp",type:"number",description:"Unix timestamp in milliseconds. Renders as localized HH:MM:SS AM/PM string."},{name:"defaultExpanded",type:"boolean",default:"false",description:"Whether the entry starts expanded."},{name:"children",type:"ReactNode",required:!0,description:"Content rendered in the expandable body area."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsxs(_,{title:"Layout structure",children:[e.jsxs(S,{type:"info",children:["The header row is: ",e.jsx("code",{children:"[icon] [title] [badge?] — [timestamp?] [chevron]"}),". The chevron rotates 180° when expanded. The content area appears below the header when expanded."]}),e.jsx(S,{type:"tip",children:"Use JsonTreeView or a pre-styled code block as children to display structured log data. The content area has no built-in padding — add padding inside the children as needed."})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ExpandableLogEntryView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ExpandableLogEntryView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function b7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"One-click clipboard copy",color:"var(--color-primary)"},{label:"CheckIcon feedback for 1.5s",color:"var(--color-success)"},{label:"DUI size token (height + icon)",color:"var(--color-info)"},{label:"Accent color for copied state",color:"var(--color-warning)"},{label:"Hover background animation",color:"#a855f7"},{label:"stopPropagation on click",color:"#ec4899"},{label:"Tooltip (Copy / Copied!)",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"text",type:"string",required:!0,description:"The text to copy to clipboard when clicked."},{name:"size",type:"DuiSize",default:"'md'",description:"DUI size token — controls button height and icon size."},{name:"title",type:"string",default:"'Copy'",description:'Tooltip text shown on hover. Changes to "Copied!" for 1.5s after clicking.'},{name:"accentColor",type:"string",description:"Color of the CheckIcon shown after copying. Defaults to var(--color-success)."},{name:"className",type:"string",description:"Extra CSS class on the button element."},{name:"style",type:"CSSProperties",description:"Inline styles on the button element."}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xxs",height:"18px",font:"10px",desc:"Micro"},{size:"xs",height:"22px",font:"11px",desc:"Compact"},{size:"sm",height:"26px",font:"11px",desc:"Small"},{size:"md",height:"30px",font:"12px",desc:"Default"},{size:"lg",height:"34px",font:"13px",desc:"Large"},{size:"xl",height:"38px",font:"14px",desc:"XL"}]})}),e.jsxs(_,{title:"Notes",children:[e.jsxs(S,{type:"info",children:["CopyButtonView is a square button (width === height from DUI token). It uses ",e.jsx("code",{children:"navigator.clipboard.writeText()"})," which requires a secure context (HTTPS or localhost)."]}),e.jsx(S,{type:"tip",children:"The copied feedback resets automatically after 1500ms. No external state is needed — the component manages this internally."})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"CopyButtonView reads its dimensions from the shared button category base hook (useButtonBase). Omitting size, width, borderRadius, or color on CopyButtonView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every button-category component at once.",children:[e.jsx(I,{features:[{label:"useButtonBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Button category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every button-category component in the tree."]})]})]})}function x7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Marked v14 rendering",color:"var(--color-primary)"},{label:"highlight.js syntax highlighting",color:"var(--color-success)"},{label:"Language alias resolution (js→javascript, ts→typescript)",color:"var(--color-info)"},{label:"Auto-language detection via highlightAuto",color:"var(--color-warning)"},{label:"Copy button per code block",color:"#a855f7"},{label:"GFM tables and task lists",color:"#ec4899"},{label:"Blockquotes and inline code",color:"#14b8a6"},{label:"Singleton marked config (configured once)",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"content",type:"string",required:!0,description:"Markdown string to render."},{name:"className",type:"string",description:"Extra CSS class on the root div. Add mdv-root to scope styles."},{name:"style",type:"CSSProperties",description:"Inline styles on the root div."}]})}),e.jsx(_,{title:"Code block features",children:e.jsx(M,{props:[{name:"language pill",type:"span.mdv-lang-pill",description:"Shows the detected/specified language name above the code block."},{name:"copy button",type:"button.mdv-copy-btn",description:"Copies raw code to clipboard. Shows a checkmark for 2s after clicking."},{name:"inline code",type:"code.mdv-inline-code",description:"Backtick-wrapped code styled with mdv-inline-code class."}]})}),e.jsxs(_,{title:"Dependencies",children:[e.jsxs(S,{type:"warning",children:["MarkdownView depends on ",e.jsx("code",{children:"marked"})," (v14) and ",e.jsx("code",{children:"highlight.js"})," (v11) being bundled. These are already included in the DUI package. The marked instance is configured once via a singleton guard — subsequent renders reuse the same renderer."]}),e.jsxs(S,{type:"info",children:["Language aliases supported: ",e.jsx("code",{children:"js→javascript"}),", ",e.jsx("code",{children:"ts→typescript"}),", ",e.jsx("code",{children:"sh→bash"}),", ",e.jsx("code",{children:"py→python"}),", ",e.jsx("code",{children:"yml→yaml"}),", ",e.jsx("code",{children:"rb→ruby"}),", ",e.jsx("code",{children:"rs→rust"}),", ",e.jsx("code",{children:"cs→csharp"}),", ",e.jsx("code",{children:"kt→kotlin"}),". Unknown languages fall back to ",e.jsx("code",{children:"highlightAuto"}),"."]})]}),e.jsx(_,{title:"Styling",children:e.jsxs(S,{type:"tip",children:["All MarkdownView styles live in a single CSS file scoped to ",e.jsx("code",{children:".mdv-root"}),". Override specific elements by adding rules targeting ",e.jsx("code",{children:".mdv-root p"}),", ",e.jsx("code",{children:".mdv-root pre"}),", etc. in your app stylesheet."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"MarkdownView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["MarkdownView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function S7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Text and file row types",color:"var(--color-primary)"},{label:"Per-row enable/disable toggle",color:"var(--color-success)"},{label:"Native file picker integration",color:"var(--color-info)"},{label:"Base64 file encoding (default)",color:"var(--color-warning)"},{label:"File download button",color:"#a855f7"},{label:"Clear-all with confirm",color:"#ec4899"},{label:"SelectInputView for type column",color:"#14b8a6"},{label:"Configurable label and toolbar",color:"#f97316"}]})}),e.jsx(_,{title:"FormDataRow",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique row identifier."},{name:"key",type:"string",required:!0,description:"Form field name."},{name:"value",type:"string",required:!0,description:"Text value (or comma-joined file names when type is file)."},{name:"type",type:"'text' | 'file'",required:!0,description:"Row type. 'file' shows a file picker instead of a text input."},{name:"enabled",type:"boolean",required:!0,description:"Whether this row is included in the request."},{name:"fileNames",type:"string[]",description:"Selected file names (populated after file pick)."},{name:"fileData",type:"string[]",description:"Base64-encoded file contents."},{name:"fileMimeTypes",type:"string[]",description:"MIME types of selected files."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"rows",type:"FormDataRow[]",required:!0,description:"Controlled array of form-data rows."},{name:"onChange",type:"(rows: FormDataRow[]) => void",required:!0,description:"Called with the updated rows array on any change."},{name:"onFileSelect",type:"(rowId: string, files: File[]) => void",description:"Called when files are picked. When provided, skips the internal base64 read and lets the consumer handle file data."},{name:"accentColor",type:"string",description:"Accent color for add-row button and file picker button."},{name:"label",type:"string",description:"Toolbar label shown on the left (default hidden)."},{name:"hideToolbar",type:"boolean",default:"false",description:"Hides the entire toolbar row."},{name:"className",type:"string",description:"Extra CSS class on the root element."},{name:"style",type:"CSSProperties",description:"Inline styles on the root element."}]})}),e.jsx(_,{title:"Row type behavior",children:e.jsx(xe,{name:"FormDataRow.type",values:[{value:"text",description:"Renders a text input in the value column",color:"var(--color-success)"},{value:"file",description:"Renders a Choose File button + file name display",color:"var(--color-info)"}]})}),e.jsxs(_,{title:"File handling",children:[e.jsxs(S,{type:"info",children:["By default, FormDataTableView reads files to base64 internally using FileReader. The base64 data is stored in ",e.jsx("code",{children:"row.fileData"}),". Provide ",e.jsx("code",{children:"onFileSelect"})," to handle file reading yourself (e.g. via an embedded webview messaging bridge)."]}),e.jsxs(S,{type:"tip",children:["The download button appears when ",e.jsx("code",{children:"row.fileData"})," is populated. It reconstructs the file from base64 and triggers a browser download via a temporary object URL."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"FormDataTableView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["FormDataTableView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function T7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Monospace YAML key badge",color:"var(--color-primary)"},{label:"Accent color tinted background",color:"var(--color-success)"},{label:"Optional click handler",color:"var(--color-info)"},{label:"Inline-flex (no layout disruption)",color:"var(--color-warning)"},{label:"No-select (no text highlight on click)",color:"#a855f7"},{label:"Used in LiveColorCustomizer",color:"#ec4899"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"yamlKey",type:"string",required:!0,description:'The YAML theme key name to display (e.g. "brand.primary", "component_button.primary_bg").'},{name:"color",type:"string",description:"Accent color for text and background tint. Defaults to var(--color-primary)."},{name:"onClick",type:"() => void",description:"When provided, adds cursor-pointer and calls the handler on click."},{name:"className",type:"string",description:"Extra CSS class on the root span."},{name:"style",type:"CSSProperties",description:"Inline styles on the root span."}]})}),e.jsxs(_,{title:"Visual style",children:[e.jsx(S,{type:"info",children:"YamlKeyChip renders as a 16px-tall monospace pill with a 10px font, 4px border-radius, and a color-mix background at 10% + 22% border opacity. This matches the style used in Daakia's theme editor to label which YAML key controls each color variable."}),e.jsxs(S,{type:"tip",children:["YamlKeyChip is a purely presentational chip — no state, no effects. It pairs naturally with ",e.jsx("code",{children:"LiveColorCustomizer"})," and any settings UI that surfaces theme configuration keys."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"YamlKeyChip does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["YamlKeyChip is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function w7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Native color picker per CSS var",color:"var(--color-primary)"},{label:"Live document.documentElement mutation",color:"var(--color-success)"},{label:"Scoped mutation via onVarChange",color:"var(--color-info)"},{label:"Dirty tracking per variable",color:"var(--color-warning)"},{label:"Per-variable reset button",color:"#a855f7"},{label:"Reset all button",color:"#ec4899"},{label:"YamlKeyChip per variable",color:"#14b8a6"},{label:"forceOpen mode (no toggle button)",color:"#f97316"}]})}),e.jsx(_,{title:"LiveColorVar",children:e.jsx(M,{props:[{name:"cssVar",type:"string",required:!0,description:'CSS custom property name (e.g. "--color-primary").'},{name:"yamlKey",type:"string",required:!0,description:'Corresponding YAML theme key (e.g. "brand.primary"). Displayed as a YamlKeyChip.'},{name:"label",type:"string",description:'Human-readable label shown above the swatch. Defaults to cssVar with "--color-" stripped.'}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"vars",type:"LiveColorVar[]",required:!0,description:"Array of CSS variables to expose for editing."},{name:"title",type:"string",description:"Label on the toggle button. Defaults to 'Customize colors'."},{name:"forceOpen",type:"boolean",default:"false",description:"When true, the grid is always visible and the toggle button is hidden. Used when embedded in a live playground pane."},{name:"onVarChange",type:"(cssVar: string, value: string | null) => void",description:"When provided, color changes call this instead of mutating document.documentElement. value=null means reset."}]})}),e.jsxs(_,{title:"Color resolution",children:[e.jsxs(S,{type:"info",children:["On open, all colors are read from ",e.jsx("code",{children:"getComputedStyle(document.documentElement)"}),". Non-hex values are converted to hex via a 1×1 canvas pixel. Transparent values fall back to #888888."]}),e.jsxs(S,{type:"tip",children:["Use ",e.jsx("code",{children:"onVarChange"})," to scope changes to a specific container (preview pane) rather than the global document. When ",e.jsx("code",{children:"value"})," is ",e.jsx("code",{children:"null"}),", the variable override should be removed."]}),e.jsx(S,{type:"warning",children:"Changes made via LiveColorCustomizer apply immediately and persist until page reload or until Reset is clicked. They do not affect stored themes or YAML files — they are in-memory overrides only."})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"LiveColorCustomizer does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["LiveColorCustomizer is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function E7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Horizontal or vertical separator",color:"var(--color-primary)"},{label:"Three spacing sizes (sm/md/lg)",color:"var(--color-success)"},{label:'aria-hidden + role="separator"',color:"var(--color-info)"},{label:"Token-based sizing via CSS classes",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"orientation",type:"'horizontal' | 'vertical'",default:"'horizontal'",description:"Direction of the spacer. Horizontal adds vertical margin; vertical adds horizontal margin."},{name:"spacing",type:"'sm' | 'md' | 'lg'",default:"'md'",description:"Amount of space. Maps to CSS classes defined in SpacerView.css."},{name:"className",type:"string",description:"Extra CSS class on the root div."}]})}),e.jsx(_,{title:"Spacing values",children:e.jsx(xe,{name:"spacing",values:[{value:"sm",description:"Small spacing (4–8px)",color:"var(--color-success)"},{value:"md",description:"Medium spacing (12–16px)",color:"var(--color-primary)"},{value:"lg",description:"Large spacing (24–32px)",color:"var(--color-info)"}]})}),e.jsxs(_,{title:"Usage notes",children:[e.jsxs(S,{type:"info",children:["SpacerView is a purely layout utility — it renders a div with ",e.jsx("code",{children:'role="separator"'})," and ",e.jsx("code",{children:'aria-hidden="true"'}),". It produces visual whitespace between sections, not a visible divider line (for that, use a border or HR element)."]}),e.jsx(S,{type:"tip",children:"In a flex column layout, a horizontal SpacerView adds top/bottom margin. In a flex row layout, use a vertical SpacerView to add left/right margin between items."})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"SpacerView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["SpacerView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function C7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Recursive folder tree (FolderNode)",color:"var(--color-primary)"},{label:"Expand/collapse with animated chevron",color:"var(--color-success)"},{label:"Inline rename on double-click",color:"var(--color-info)"},{label:"Hover action buttons per folder",color:"var(--color-warning)"},{label:"DUI ContextMenuView on right-click",color:"#a855f7"},{label:"Runner modal (tabbed popup per node)",color:"#ec4899"},{label:"HTML5 drag-and-drop (nodes + items)",color:"#14b8a6"},{label:"Move confirm modal",color:"#f97316"}]})}),e.jsx(_,{title:"FolderNode",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique node identifier."},{name:"label",type:"string",required:!0,description:"Display name of the folder."},{name:"children",type:"FolderNode[]",description:"Sub-folder nodes."},{name:"items",type:"T[]",description:"Leaf items inside this folder. Rendered via renderItem."},{name:"data",type:"unknown",description:"Arbitrary metadata attached to the node."}]})}),e.jsx(_,{title:"FolderAction",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Action identifier. Use 'run' to trigger the runner modal; use 'more'/'context' to trigger the context menu."},{name:"icon",type:"ReactNode",required:!0,description:"Icon for the action button."},{name:"tooltip",type:"string",description:"Tooltip shown on hover."},{name:"disabled",type:"boolean | (node) => boolean",description:"Disables the action. Accepts a per-node function."},{name:"onClick",type:"(node, e) => void",required:!0,description:'Called when action is clicked (unless id is "run" or "more").'}]})}),e.jsx(_,{title:"Core Props",children:e.jsx(M,{props:[{name:"nodes",type:"FolderNode[]",required:!0,description:"Top-level folder nodes."},{name:"accentColor",type:"string",default:"'var(--color-text-muted)'",description:"Accent color for folder icons, drop highlights, and action buttons."},{name:"folderActions",type:"FolderAction[]",description:"Action buttons rendered on folder hover."},{name:"contextMenuItems",type:"(node) => ContextMenuItem[]",description:"Returns context menu items for a node. Right-click triggers the menu."},{name:"runner",type:"FolderRunnerConfig",description:'Config for the runner modal (tabbed popup opened by the "run" action).'},{name:"defaultExpandedIds",type:"Set<string>",description:"IDs of nodes expanded by default (uncontrolled)."},{name:"expandedIds",type:"Set<string>",description:"Controlled expanded node IDs."},{name:"onToggle",type:"(id: string) => void",description:"Called when a node is expanded/collapsed (controlled mode)."},{name:"renderItem",type:"(item, node, depth) => ReactNode",description:"Custom renderer for leaf items."},{name:"onRename",type:"(id: string, newName: string) => void",description:"Called after a double-click rename is committed."},{name:"onFolderClick",type:"(node) => void",description:"Called when a folder is clicked (in addition to expand/collapse)."},{name:"emptyLabel",type:"string",default:"'No items'",description:"Text shown when nodes array is empty."},{name:"indentPx",type:"number",default:"12",description:"Horizontal indent per depth level in px."}]})}),e.jsx(_,{title:"Drag-and-drop Props",children:e.jsx(M,{props:[{name:"draggable",type:"boolean",default:"false",description:"Enable HTML5 drag-and-drop for folder nodes."},{name:"isDraggableNode",type:"(node) => boolean",description:"Guard function to prevent specific nodes from being dragged."},{name:"onMove",type:"(dragId, targetId, position) => void",description:'Called when a node is dropped. position is "before" | "inside" | "after".'},{name:"confirmFolderMove",type:"boolean",default:"false",description:"Show a confirmation modal before calling onMove."},{name:"getMoveSummary",type:"(dragId) => MoveSummaryEntry[]",description:"Returns sub-folder and item entries shown in the move confirmation modal."},{name:"draggableItems",type:"boolean",default:"false",description:"Enable drag-and-drop for leaf items."},{name:"getItemId",type:"(item) => string",description:"Required when draggableItems=true. Returns a stable unique ID per item."},{name:"onItemMove",type:"(itemId, targetId, targetKind, position) => void",description:"Called when an item is dropped."}]})}),e.jsx(_,{title:"Runner modal",children:e.jsxs(S,{type:"info",children:["When a folder action has ",e.jsx("code",{children:'id="run"'}),", clicking it opens the FolderRunnerConfig modal. The modal shows a tabbed layout with configurable content per tab and an optional Save button. This is used in Daakia for the collection runner panel."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"FolderView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["FolderView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function A7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsxs(S,{type:"info",children:["DebugEditorView wraps ",e.jsx("strong",{children:"EditorView"})," (the DUI Monaco editor) with ",e.jsx("code",{children:"debugSupported=true"})," always set. It exposes a pluggable ",e.jsx("strong",{children:"DebugEditorAdapter"})," interface so consumers supply their own breakpoint callbacks without importing daakia-specific stores."]})}),e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Monaco editor with debug gutter",color:"var(--color-primary)"},{label:"Breakpoint toggle on gutter click",color:"var(--color-success)"},{label:"Disabled breakpoints (greyed out)",color:"var(--color-info)"},{label:"Conditional breakpoints (amber)",color:"var(--color-warning)"},{label:"Paused line highlight (yellow bar)",color:"#a855f7"},{label:"Right-click glyph context menu",color:"#ec4899"},{label:"Adapter pattern (no store coupling)",color:"#14b8a6"},{label:"EditorMount callback for plugins",color:"#f97316"}]})}),e.jsx(_,{title:"DebugEditorAdapter",children:e.jsx(M,{props:[{name:"onToggleBreakpoint",type:"(line: number) => void",description:"Called when the user clicks in the breakpoint gutter to toggle a breakpoint."},{name:"onGlyphContextMenu",type:"(line: number, pos: { x, y }) => void",description:"Called when the user right-clicks a glyph in the gutter (for conditional breakpoints, etc.)."},{name:"onEditorMount",type:"(editor: unknown, monaco: unknown) => void",description:"Called after Monaco mounts. Use to attach AI autocomplete or other Monaco plugins."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"adapter",type:"DebugEditorAdapter",description:"Pluggable debug adapter — consumer supplies all callbacks."},{name:"breakpoints",type:"number[]",description:"Active breakpoint line numbers (shown with red dot in gutter)."},{name:"disabledBreakpoints",type:"number[]",description:"Line numbers with disabled breakpoints (shown grey)."},{name:"conditionalBreakpointLines",type:"number[]",description:"Line numbers with conditional breakpoints (shown amber)."},{name:"pausedLine",type:"number | null",description:"Currently paused line. Rendered with a yellow highlight bar."},{name:"...EditorViewProps",type:"EditorViewProps",description:"All other EditorView props (language, value, onChange, theme, etc.) pass through."}]})}),e.jsxs(_,{title:"Notes",children:[e.jsxs(S,{type:"tip",children:["DebugEditorView is a thin adapter layer. The heavy lifting is in ",e.jsx("code",{children:"EditorView"}),". If you need a plain Monaco editor without debug features, use ",e.jsx("code",{children:"EditorView"})," directly."]}),e.jsxs(S,{type:"warning",children:["The ",e.jsx("code",{children:"debugSupported"}),", ",e.jsx("code",{children:"onToggleBreakpoint"}),", ",e.jsx("code",{children:"onGlyphContextMenu"}),", and ",e.jsx("code",{children:"onEditorMount"})," props are stripped from the pass-through to prevent double-binding. Always use the ",e.jsx("code",{children:"adapter"})," prop for these callbacks."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"DebugEditorView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["DebugEditorView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function k7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsx(S,{type:"info",children:'DebugView is a code-editor-style "Run and Debug" side panel as a standalone DUI component. It is fully abstract — the consumer provides session data and action callbacks. No daakia store imports are required.'})}),e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"VARIABLES section with scope groups",color:"var(--color-primary)"},{label:"Recursive variable value tree",color:"var(--color-success)"},{label:"WATCH expressions with live evaluation",color:"var(--color-info)"},{label:"CALL STACK with frame restart",color:"var(--color-warning)"},{label:"BREAKPOINTS with enable/disable/mute",color:"#a855f7"},{label:"Debug toolbar (Continue/Step Over/Into/Out/Restart/Stop)",color:"#ec4899"},{label:"Syntax-highlighted value colors",color:"#14b8a6"},{label:"CollapsibleSectionView for all sections",color:"#f97316"}]})}),e.jsx(_,{title:"DebugSession",children:e.jsx(M,{props:[{name:"active",type:"boolean",required:!0,description:"Whether a debug session is running."},{name:"status",type:"'idle' | 'running' | 'paused'",required:!0,description:"Current session status. Paused enables the step toolbar buttons."},{name:"pausedLine",type:"number | null",description:"Current paused line number."},{name:"variables",type:"DebugVariable[]",description:"Array of { name, value, type? } captured at the current pause point."},{name:"callStack",type:"DebugCallFrame[]",description:"Call stack frames at the current pause point."},{name:"breakpoints",type:"DebugBreakpoint[]",description:"All breakpoints across all files."},{name:"breakpointsMuted",type:"boolean",description:"When true, all breakpoints are muted (the toolbar mute icon turns red)."}]})}),e.jsx(_,{title:"DebugActions",children:e.jsx(M,{props:[{name:"onContinue",type:"() => void",description:"Resume execution (F5)."},{name:"onStepOver",type:"() => void",description:"Step over current line (F10)."},{name:"onStepInto",type:"() => void",description:"Step into function (F11)."},{name:"onStepOut",type:"() => void",description:"Step out of function (⇧F11)."},{name:"onRestart",type:"() => void",description:"Restart the debug session."},{name:"onStop",type:"() => void",description:"Stop the debug session."},{name:"onAddWatchExpression",type:"(expr: string) => void",description:"Add a watch expression."},{name:"onRemoveWatchExpression",type:"(expr: string) => void",description:"Remove a specific watch expression."},{name:"onClearWatchExpressions",type:"() => void",description:"Remove all watch expressions."},{name:"onToggleBreakpoint",type:"(key, line, currentlyDisabled) => void",description:"Toggle a breakpoint enable/disable state."},{name:"onRemoveBreakpoint",type:"(key, line) => void",description:"Remove a breakpoint."},{name:"onNavigateBreakpoint",type:"(key, line) => void",description:"Navigate editor to a breakpoint location."},{name:"onToggleMuteBreakpoints",type:"() => void",description:"Toggle muting all breakpoints."},{name:"onClearAllBreakpoints",type:"() => void",description:"Remove all breakpoints."},{name:"onRestartFrame",type:"(frameIndex: number) => void",description:"Restart a call stack frame."}]})}),e.jsx(_,{title:"DebugViewProps",children:e.jsx(M,{props:[{name:"session",type:"DebugSession",required:!0,description:"Current debug session state."},{name:"actions",type:"DebugActions",description:"Action callbacks. Omit any to hide the corresponding UI."},{name:"watchExpressions",type:"string[]",default:"[]",description:"Controlled list of watch expressions managed externally."},{name:"accentColor",type:"string",default:"'var(--color-primary)'",description:"Accent color for section headers and highlights."},{name:"title",type:"string",default:"'Run and Debug'",description:"Panel title shown in the toolbar."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"Value type colors (syntax-highlighted)",children:e.jsx(xe,{name:"value type",values:[{value:"string",description:"#ce9178 — orange-red",color:"#ce9178"},{value:"number",description:"#b5cea8 — soft green",color:"#b5cea8"},{value:"boolean",description:"#569cd6 — blue",color:"#569cd6"},{value:"null/undefined",description:"#808080 — grey",color:"#808080"},{value:"array",description:"#dcdcaa — yellow",color:"#dcdcaa"},{value:"object",description:"#9cdcfe — light blue",color:"#9cdcfe"}]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"DebugView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["DebugView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}const N_=[{value:"GET",label:"GET"},{value:"POST",label:"POST"},{value:"PUT",label:"PUT"},{value:"PATCH",label:"PATCH"},{value:"DELETE",label:"DELETE"}],R7=Array.from({length:12},(t,n)=>({value:String(n+1),label:String(n+1)})),I7=Array.from({length:60},(t,n)=>({value:String(n).padStart(2,"0"),label:String(n).padStart(2,"0")})),D7=[{value:"AM",label:"AM"},{value:"PM",label:"PM"}],N7=[{value:"0",label:"No retries"},{value:"1",label:"1 retry"},{value:"3",label:"3 retries"},{value:"5",label:"5 retries"},{value:"10",label:"10 retries"}],L_=[{value:"us-east-1",label:"US East (N. Virginia)"},{value:"us-west-2",label:"US West (Oregon)"},{value:"eu-west-1",label:"EU (Ireland)"},{value:"ap-south-1",label:"AP (Mumbai)"},{value:"ap-southeast-1",label:"AP (Singapore)",disabled:!0}];function L7(){const[t,n]=d.useState("GET"),[r,o]=d.useState("9"),[i,a]=d.useState("30"),[s,l]=d.useState("AM"),[u,p]=d.useState("md"),[h,f]=d.useState("3"),[g,y]=d.useState("us-east-1"),b=[{options:R7,value:r,onChange:o,label:"Hour"},{options:I7,value:i,onChange:a,label:"Min"},{options:D7,value:s,onChange:l,label:""}];return e.jsxs("div",{children:[e.jsx(m,{title:"Single-column HTTP Method Wheel",description:"Basic single-column picker bound to options/value/onChange",code:`const methodOptions = [
+/>`,children:e.jsx("div",{style:{height:240,border:"1px solid var(--color-surface-border)",borderRadius:6,overflow:"hidden"},children:e.jsx(Ia,{session:{active:!1,status:"idle"},accentColor:"var(--color-primary)"})})})]})}const D_=["var(--color-primary)","var(--color-success)","var(--color-info)","var(--color-warning)","#a855f7","#ec4899","#14b8a6","#f97316"];function Ph(t){return D_[t%D_.length]}function _({title:t,description:n,children:r,style:o}){return e.jsxs("div",{style:{marginBottom:32,...o},children:[e.jsxs("div",{style:{marginBottom:n?6:12},children:[e.jsx("span",{style:{fontSize:11,fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--color-text-muted)"},children:t}),n&&e.jsx("p",{style:{margin:"4px 0 12px",fontSize:12.5,color:"var(--color-text-secondary)",lineHeight:1.6},children:n})]}),r]})}function I({features:t}){return e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:6,marginBottom:20},children:t.map((n,r)=>{const o=typeof n=="string"?n:n.label,i=typeof n=="string"?Ph(r):n.color??Ph(r),a=typeof n=="string"?void 0:n.description;return e.jsx("span",{title:a,style:{display:"inline-flex",alignItems:"center",padding:"3px 10px",borderRadius:99,fontSize:11,fontWeight:600,letterSpacing:"0.01em",background:`color-mix(in srgb, ${i} 14%, transparent)`,color:i,border:`1px solid color-mix(in srgb, ${i} 30%, transparent)`,cursor:a?"help":"default"},children:o},o)})})}function M({props:t}){return e.jsxs("div",{style:{border:"1px solid var(--color-surface-border)",borderRadius:10,overflow:"hidden",fontSize:12},children:[e.jsx("div",{style:{display:"grid",gridTemplateColumns:"1.4fr 1.6fr 0.8fr 2.5fr",background:"var(--color-surface)",borderBottom:"1px solid var(--color-surface-border)",padding:"7px 12px",gap:8},children:["Prop","Type","Default","Description"].map(n=>e.jsx("span",{style:{fontSize:10,fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--color-text-muted)"},children:n},n))}),t.map((n,r)=>e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1.4fr 1.6fr 0.8fr 2.5fr",padding:"9px 12px",gap:8,alignItems:"start",background:r%2===0?"transparent":"color-mix(in srgb, var(--color-surface) 40%, transparent)",borderBottom:r<t.length-1?"1px solid var(--color-surface-border)":"none"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4},children:[e.jsx("code",{style:{fontSize:11.5,fontFamily:"monospace",color:"var(--color-primary)",fontWeight:600},children:n.name}),n.required&&e.jsx("span",{style:{fontSize:9,fontWeight:700,color:"var(--color-error)",background:"color-mix(in srgb, var(--color-error) 12%, transparent)",border:"1px solid color-mix(in srgb, var(--color-error) 28%, transparent)",borderRadius:4,padding:"0px 4px"},children:"required"})]}),e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:"#a855f7",lineHeight:1.5,wordBreak:"break-word"},children:n.type}),n.default?e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:"var(--color-success)"},children:n.default}):e.jsx("span",{style:{color:"var(--color-text-muted)",fontSize:11},children:"—"}),e.jsx("span",{style:{fontSize:12,color:"var(--color-text-secondary)",lineHeight:1.55},children:n.description})]},n.name))]})}function xe({name:t,values:n}){return e.jsxs("div",{style:{marginBottom:16},children:[e.jsx("div",{style:{marginBottom:6},children:e.jsx("code",{style:{fontSize:12,fontFamily:"monospace",color:"#a855f7",fontWeight:600},children:t})}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:6},children:n.map((r,o)=>{const i=r.color??Ph(o);return e.jsxs("div",{title:r.description,style:{display:"flex",alignItems:"center",gap:6,padding:"4px 10px",borderRadius:7,border:`1px solid color-mix(in srgb, ${i} 30%, transparent)`,background:`color-mix(in srgb, ${i} 10%, transparent)`,cursor:"help"},children:[e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:i,fontWeight:600},children:r.value}),e.jsx("span",{style:{fontSize:10.5,color:"var(--color-text-muted)"},children:r.description})]},r.value)})})]})}const E9={info:{icon:"ℹ",color:"var(--color-info)",label:"Note"},warning:{icon:"⚠",color:"var(--color-warning)",label:"Warning"},tip:{icon:"✦",color:"var(--color-success)",label:"Tip"},danger:{icon:"⛔",color:"var(--color-error)",label:"Danger"}};function S({type:t="info",children:n}){const r=E9[t];return e.jsxs("div",{style:{display:"flex",gap:10,padding:"10px 14px",borderRadius:8,marginBottom:20,background:`color-mix(in srgb, ${r.color} 8%, transparent)`,border:`1px solid color-mix(in srgb, ${r.color} 24%, transparent)`},children:[e.jsx("span",{style:{color:r.color,flexShrink:0,fontSize:13,lineHeight:"18px"},children:r.icon}),e.jsxs("div",{children:[e.jsx("span",{style:{fontSize:11,fontWeight:700,color:r.color,textTransform:"uppercase",letterSpacing:"0.06em"},children:r.label}),e.jsx("div",{style:{marginTop:4,fontSize:12.5,color:"var(--color-text-secondary)",lineHeight:1.6},children:n})]})]})}function xt({children:t}){return e.jsx("code",{style:{fontFamily:"monospace",fontSize:11.5,background:"var(--color-surface)",border:"1px solid var(--color-surface-border)",borderRadius:4,padding:"1px 5px",color:"var(--color-primary)"},children:t})}function H({sizes:t}){return e.jsx("div",{style:{display:"flex",gap:12,flexWrap:"wrap",marginBottom:20},children:t.map(n=>e.jsxs("div",{style:{padding:"20px 18px",borderRadius:8,border:"1px solid var(--color-surface-border)",background:"var(--color-surface)",minWidth:96,textAlign:"center"},children:[e.jsx("div",{style:{fontSize:18,fontWeight:800,color:"var(--color-primary)",lineHeight:1},children:n.size}),e.jsxs("div",{style:{fontSize:10,color:"var(--color-text-muted)",marginTop:10},children:["h: ",n.height]}),e.jsxs("div",{style:{fontSize:10,color:"var(--color-text-muted)",marginTop:4},children:["fs: ",n.font]}),e.jsx("div",{style:{fontSize:10,color:"var(--color-text-secondary)",marginTop:8},children:n.desc})]},n.size))})}function jt({widths:t}){return e.jsx("div",{style:{display:"flex",gap:12,flexWrap:"wrap",marginBottom:20},children:t.map(n=>e.jsxs("div",{style:{padding:"20px 18px",borderRadius:8,border:"1px solid var(--color-surface-border)",background:"var(--color-surface)",minWidth:96,textAlign:"center"},children:[e.jsx("div",{style:{fontSize:16,fontWeight:800,color:"var(--color-info)",lineHeight:1},children:n.width}),e.jsx("div",{style:{fontSize:10,color:"var(--color-text-muted)",marginTop:10},children:n.value}),n.desc&&e.jsx("div",{style:{fontSize:10,color:"var(--color-text-secondary)",marginTop:8},children:n.desc})]},n.width))})}function Xe({radii:t}){return e.jsx("div",{style:{display:"flex",gap:12,flexWrap:"wrap",marginBottom:20},children:t.map(n=>e.jsxs("div",{style:{padding:"18px",borderRadius:8,border:"1px solid var(--color-surface-border)",background:"var(--color-surface)",minWidth:88,textAlign:"center"},children:[e.jsx("div",{style:{width:40,height:40,margin:"0 auto 10px",background:"var(--color-primary)",borderRadius:n.value==="full"?"999px":n.value}}),e.jsx("div",{style:{fontSize:14,fontWeight:800,color:"var(--color-warning)",lineHeight:1},children:n.radius}),e.jsx("div",{style:{fontSize:10,color:"var(--color-text-muted)",marginTop:6},children:n.value}),n.desc&&e.jsx("div",{style:{fontSize:10,color:"var(--color-text-secondary)",marginTop:6},children:n.desc})]},n.radius))})}function Od({variants:t}){return e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:8},children:t.map(n=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"6px 12px",borderRadius:8,border:`1px solid color-mix(in srgb, ${n.color} 30%, transparent)`,background:`color-mix(in srgb, ${n.color} 9%, transparent)`},children:[e.jsx("div",{style:{width:8,height:8,borderRadius:"50%",background:n.color,flexShrink:0}}),e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:11.5,fontWeight:600,color:n.color},children:n.label}),e.jsx("div",{style:{fontSize:10.5,color:"var(--color-text-muted)"},children:n.description})]})]},n.label))})}function C9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"5 sizes (xs → xl)",color:"var(--color-primary)"},{label:"Custom color + auto bg derivation",color:"var(--color-success)"},{label:"Active / filled state",color:"var(--color-info)"},{label:"Rounded or square border-radius",color:"var(--color-warning)"},{label:"Click handler",color:"#a855f7"},{label:"Background override (bg prop)",color:"#ec4899"},{label:"DuiProvider size context",color:"#14b8a6"},{label:"xs sub-sm alias for dense badges",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"label",type:"string",required:!0,description:"Text displayed inside the chip."},{name:"color",type:"string",default:"var(--color-primary)",description:"CSS variable or raw color value. Drives text, border, and auto-derived translucent background."},{name:"bg",type:"string",description:"Override the background explicitly instead of deriving it from color."},{name:"size",type:"ChipViewSize",default:"context",description:"Size of the chip. Falls back to DuiProvider context when omitted. xs is a sub-sm alias for dense protocol badges."},{name:"rounded",type:"boolean",default:"true",description:"true = rounded-full (pill shape). false = small token border-radius (4px)."},{name:"active",type:"boolean",default:"false",description:"When true, fills the chip with the accent color instead of a translucent tint. Text shifts to var(--color-chip-active-text)."},{name:"onClick",type:"() => void",description:"Click handler. When provided, cursor changes to pointer."},{name:"className",type:"string",description:"Additional Tailwind or CSS class names."},{name:"style",type:"CSSProperties",description:"Inline style override applied to the outer span."}]})}),e.jsx(_,{title:"ChipViewSize enum",children:e.jsx(xe,{name:"ChipViewSize",values:[{value:"xs",description:"Sub-sm fixed preset — 16px height, 9px font. For dense protocol badges.",color:"#f97316"},{value:"sm",description:"Small chip for tight UIs.",color:"var(--color-success)"},{value:"md",description:"Default medium chip.",color:"var(--color-primary)"},{value:"lg",description:"Large chip.",color:"var(--color-info)"},{value:"xl",description:"Extra-large chip for prominent labels.",color:"#a855f7"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"16px",font:"9px",desc:"Dense badge"},{size:"sm",height:"20px",font:"10px",desc:"Compact"},{size:"md",height:"24px",font:"11px",desc:"Default"},{size:"lg",height:"28px",font:"12px",desc:"Large"},{size:"xl",height:"32px",font:"13px",desc:"XL label"}]})}),e.jsx(S,{type:"tip",children:"The xs size bypasses the DUI size system — it is a fixed-dimension preset specifically for dense protocol badges (e.g. REST, GQL, WS). For all other usage, prefer sm or md."}),e.jsx(S,{type:"info",children:"When color is a CSS variable like var(--color-primary), the background is automatically derived as a 12% translucent mix. You can override the background independently with the bg prop without affecting text or border color."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"ChipView reads its dimensions from the shared chip category base hook (useChipBase). Omitting size, borderRadius, or color on ChipView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every chip-category component at once.",children:[e.jsx(I,{features:[{label:"useChipBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"10px",font:"12px",desc:"padX 11px, radius full"},{size:"xs",height:"12px",font:"12px",desc:"padX 11px, radius full"},{size:"sm",height:"16px",font:"9px",desc:"padX 5px, radius full"},{size:"md",height:"20px",font:"10px",desc:"padX 7px, radius full"},{size:"lg",height:"24px",font:"11px",desc:"padX 9px, radius full"},{size:"xl",height:"28px",font:"12px",desc:"padX 11px, radius full"},{size:"xxl",height:"32px",font:"12px",desc:"padX 11px, radius full"},{size:"xxxl",height:"38px",font:"12px",desc:"padX 11px, radius full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Chip category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every chip-category component in the tree."]})]})]})}function A9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"forwardRef compatible",color:"var(--color-primary)"},{label:"Left + Right icon slots",color:"var(--color-success)"},{label:"Masked / password mode with eye toggle",color:"var(--color-info)"},{label:"Error state (red border)",color:"var(--color-warning)"},{label:"Naked mode (no border/bg)",color:"#a855f7"},{label:"Custom accent focus ring",color:"#ec4899"},{label:"DUI container props (width, borderRadius)",color:"#14b8a6"},{label:"Extends all native input HTML attributes",color:"#f97316"},{label:"Font style override",color:"var(--color-primary)"},{label:"Prefix / suffix icon aliases",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"size",type:"TextInputSize",default:"'default'",description:"Size of the input. 'default' resolves to the DuiProvider context size (md equivalent)."},{name:"rounded",type:"boolean",default:"true",description:"true = token border-radius. false = 0px square corners."},{name:"accentColor",type:"string",description:"Override the focus border and ring color. Accepts any CSS variable or raw color value."},{name:"error",type:"boolean",default:"false",description:"When true, renders a red border. In naked mode, shows a red bottom underline + red text/caret."},{name:"iconLeft",type:"ReactNode",description:"Icon rendered inside the left edge of the input. Alias: prefixIcon."},{name:"iconRight",type:"ReactNode",description:"Icon rendered inside the right edge. Ignored when masked=true. Alias: suffixIcon."},{name:"prefixIcon",type:"ReactNode",description:"Alias for iconLeft."},{name:"suffixIcon",type:"ReactNode",description:"Alias for iconRight. Ignored when masked=true."},{name:"masked",type:"boolean",default:"false",description:"When true, the value is hidden (type=password) with an eye-toggle button on the right."},{name:"maskIcon",type:"{ hidden?: ReactNode; shown?: ReactNode }",description:"Custom icons for the masked toggle. Defaults to EyeOffIcon (hidden) / EyeIcon (shown)."},{name:"naked",type:"boolean",default:"false",description:"When true: no border, transparent background, no focus ring. For embedding inside containers that supply their own chrome."},{name:"width",type:"DuiWidth",description:"Width override for the input container. Accepts DUI token values or CSS strings."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override for the container."},{name:"color",type:"string",description:"Text color override for the input."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override, e.g. 'italic'."},{name:"...rest",type:"InputHTMLAttributes<HTMLInputElement>",description:"All native input attributes (placeholder, value, onChange, disabled, type, etc.) are forwarded to the underlying input element."}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"Dense"},{size:"sm",height:"24px",font:"11px",desc:"Compact"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"tip",children:"Use the naked prop when embedding TextInputView inside a parent container (e.g. SelectTextInputView) that provides its own border and background. The naked mode still shows an error state via a bottom underline when error=true."}),e.jsx(S,{type:"info",children:"When masked=true is set, any iconRight or suffixIcon is automatically suppressed — the eye toggle button takes exclusive ownership of the right slot."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"TextInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on TextInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function k9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal-rendered dropdown",color:"var(--color-primary)"},{label:"Smart viewport positioning (flip up/down)",color:"var(--color-success)"},{label:"Scroll + resize tracking",color:"var(--color-info)"},{label:"Keyboard navigation (↑ ↓ Enter Escape)",color:"var(--color-warning)"},{label:"Option icons",color:"#a855f7"},{label:"Badge chips on options",color:"#ec4899"},{label:"Group headers with auto-dividers",color:"#14b8a6"},{label:"Disabled state",color:"#f97316"},{label:"Custom accent focus ring",color:"var(--color-primary)"},{label:"Rounded or square corners",color:"var(--color-success)"},{label:"Per-option color",color:"var(--color-info)"},{label:"DUI container props",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"options",type:"SelectOption[]",required:!0,description:"Array of options to display. Use isHeader: true for non-selectable group label rows."},{name:"value",type:"string",required:!0,description:"Currently selected option value."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called when the user picks an option."},{name:"size",type:"SelectInputSize",default:"'default'",description:"'default' maps to 'md'. All DuiSize values accepted."},{name:"rounded",type:"boolean",default:"true",description:"true = size-derived border radius. false = 0px square."},{name:"placeholder",type:"string",description:"Text shown when no option is selected."},{name:"accentColor",type:"string",description:"Override focus border and selected-item highlight color."},{name:"disabled",type:"boolean",default:"false",description:"When true, the trigger is not interactive and shows at 50% opacity."},{name:"className",type:"string",description:"Additional class names for the outer wrapper div."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer wrapper div."},{name:"width",type:"string | number",description:"Width override for the select trigger. CSS string or pixel number."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override."}]})}),e.jsx(_,{title:"SelectOption shape",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Unique value identifier for the option."},{name:"label",type:"string",required:!0,description:"Display label for the option."},{name:"icon",type:"ReactNode",description:"Icon rendered before the label in both trigger and dropdown."},{name:"color",type:"string",description:"Override text color for this option in the dropdown."},{name:"isHeader",type:"boolean",description:"When true, renders as a non-selectable group header with an auto-divider above it."},{name:"badge",type:"{ label: string; color: string }",description:"Colored pill chip rendered before the label. Takes priority over icon in the trigger."}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"Dense"},{size:"sm",height:"24px",font:"11px",desc:"Compact"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The dropdown is portalled to document.body at z-index 99999. It automatically flips between opening below and above the trigger based on available viewport space, and repositions on scroll and resize."}),e.jsx(S,{type:"tip",children:"Use isHeader: true on an option to create group separators. Headers are rendered with an uppercase label and a horizontal divider above them (except for the very first group). They are not selectable and not focusable via keyboard."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SelectInputView reads its dimensions from the shared select category base hook (useSelectBase). Omitting size, width, borderRadius, or color on SelectInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every select-category component at once.",children:[e.jsx(I,{features:[{label:"useSelectBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"item padY 2px"},{size:"xs",height:"20px",font:"9px",desc:"item padY 3px"},{size:"sm",height:"24px",font:"10px",desc:"item padY 4px"},{size:"md",height:"28px",font:"11px",desc:"item padY 5px"},{size:"lg",height:"36px",font:"12px",desc:"item padY 7px"},{size:"xl",height:"40px",font:"13px",desc:"item padY 9px"},{size:"xxl",height:"48px",font:"14px",desc:"item padY 11px"},{size:"xxxl",height:"56px",font:"16px",desc:"item padY 14px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Select category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every select-category component in the tree."]})]})]})}function R9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Unified select + text input combo",color:"var(--color-primary)"},{label:"HTTP method color coding",color:"var(--color-success)"},{label:"URL autocomplete suggestions",color:"var(--color-info)"},{label:"Mock server quick-pick with server icon",color:"var(--color-warning)"},{label:"Keyboard navigation for suggestions (↑ ↓ Enter Esc)",color:"#a855f7"},{label:"Portal-rendered method + suggestion dropdowns",color:"#ec4899"},{label:"Scroll + resize position tracking",color:"#14b8a6"},{label:"Per-option accent color for select section",color:"#f97316"},{label:"Configurable select section width",color:"var(--color-primary)"},{label:"DUI container props (width, borderRadius)",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Overview",description:"SelectTextInputView combines a left-side option selector (typically HTTP method) with a right-side text input (typically a URL). Both share a single bordered container that highlights on focus, mirroring a browser URL bar pattern. The two dropdowns (method list and URL suggestions) are portalled independently.",children:e.jsx(S,{type:"info",children:"This is the mandatory component for any method + URL input row in DUI. Never build a custom pill-group plus a separate input — always use SelectTextInputView."})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"selectValue",type:"string",required:!0,description:'Currently selected option in the left selector (e.g. "GET").'},{name:"selectOptions",type:"SelectTextOption[]",required:!0,description:"Options shown in the left dropdown."},{name:"onSelectChange",type:"(value: string) => void",required:!0,description:"Called when the user picks a different option in the left selector."},{name:"inputValue",type:"string",required:!0,description:"Current text value of the right input field."},{name:"onInputChange",type:"(value: string) => void",required:!0,description:"Called on every keystroke in the text input."},{name:"placeholder",type:"string",default:"'Enter URL or paste text'",description:"Placeholder text for the text input."},{name:"size",type:"DuiSize",description:"Falls back to DuiProvider context when omitted."},{name:"disabled",type:"boolean",default:"false",description:"Disables both the selector and the text input."},{name:"accentColor",type:"string",description:"Accent border color applied when either section is focused."},{name:"selectWidth",type:"number",description:"Override the select section width in pixels. Defaults to a size-based preset."},{name:"suggestions",type:"string[]",default:"[]",description:"URL / text autocomplete suggestions. Filtered as the user types."},{name:"mockServers",type:"MockServerSuggestion[]",default:"[]",description:"Running mock server URLs shown at the top of suggestions with a server icon."},{name:"onMockServerSelect",type:"(url: string) => void",description:"Called in addition to onInputChange when the user picks a mock server entry."},{name:"onKeyDown",type:"(e: KeyboardEvent<HTMLInputElement>) => void",description:"Key down handler for the text input. Arrow keys and Enter are pre-empted by the suggestion keyboard navigation."},{name:"width",type:"DuiWidth",description:"Width of the entire combined control."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override."},{name:"color",type:"string",description:"Text color override for the input portion."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override."},{name:"className",type:"string",description:"Additional class names for the outer wrapper."}]})}),e.jsx(_,{title:"SelectTextOption shape",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:'Option value (e.g. "GET").'},{name:"label",type:"string",required:!0,description:'Display label (e.g. "GET").'},{name:"color",type:"string",description:"Accent color for this option. Method colors use var(--color-method-get), etc."}]})}),e.jsx(_,{title:"MockServerSuggestion shape",children:e.jsx(M,{props:[{name:"url",type:"string",required:!0,description:"Base URL of the running mock server."},{name:"name",type:"string",required:!0,description:"Human-readable name of the mock server, shown to the right of the URL."}]})}),e.jsx(_,{title:"Default select widths per size",children:e.jsx(H,{sizes:[{size:"xxs",height:"—",font:"—",desc:"44px"},{size:"xs",height:"—",font:"—",desc:"52px"},{size:"sm",height:"—",font:"—",desc:"64px"},{size:"md",height:"—",font:"—",desc:"80px"},{size:"lg",height:"—",font:"—",desc:"96px"},{size:"xl",height:"—",font:"—",desc:"112px"}]})}),e.jsx(S,{type:"tip",children:'Suggestions are filtered client-side to a maximum of 8 items. Mock server entries always appear above regular suggestions, labelled with a "Mock Servers" section header and a server icon.'}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SelectTextInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on SelectTextInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Width presets, resolved via the ",e.jsx("code",{children:"width"})," prop or the nearest ",e.jsx("code",{children:'<DuiProvider width="...">'}),":"]}),e.jsx(jt,{widths:[{width:"sm",value:"80px"},{width:"md",value:"120px"},{width:"default",value:"auto"},{width:"lg",value:"200px"},{width:"fullWidth",value:"100%"},{width:"maxContent",value:"max-content"},{width:"fw",value:"100%"},{width:"mx",value:"max-content"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function I9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"4 variants",color:"var(--color-primary)"},{label:"8+ sizes via DuiSize",color:"var(--color-success)"},{label:"Loading spinner state",color:"var(--color-info)"},{label:"Left + right icon slots",color:"var(--color-warning)"},{label:"Custom accent color for primary variant",color:"#a855f7"},{label:"label prop alias for children",color:"#ec4899"},{label:"Rounded or square corners",color:"#14b8a6"},{label:"DUI container props (width, borderRadius, color)",color:"#f97316"},{label:"Extends native button HTML attributes",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Variants",children:e.jsx(Od,{variants:[{label:"primary",description:"Filled accent background, white text. Use for the main CTA.",color:"var(--color-primary)"},{label:"secondary",description:"Surface background with border. Default variant.",color:"var(--color-info)"},{label:"ghost",description:"No background, no visible border. Subtle action.",color:"var(--color-text-muted)"},{label:"danger",description:"Red filled background for destructive actions.",color:"var(--color-error)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"variant",type:"ButtonVariant",default:"'secondary'",description:"Visual style of the button. See variants above."},{name:"size",type:"ButtonSize",default:"'default'",description:"'default' resolves to DuiProvider context size. Accepts all DuiSize values."},{name:"rounded",type:"boolean",default:"true",description:"true = token border-radius. false = 0px square."},{name:"iconLeft",type:"ReactNode",description:"Icon rendered to the left of the label. Hidden during loading (replaced by spinner)."},{name:"iconRight",type:"ReactNode",description:"Icon rendered to the right of the label. Hidden during loading."},{name:"loading",type:"boolean",default:"false",description:"When true, replaces iconLeft with a spinner and disables the button. The label text stays visible."},{name:"accentColor",type:"string",description:"Override the accent color used in 'primary' variant background and focus ring."},{name:"label",type:"string",description:"Alias for children — shown as button label text."},{name:"disabled",type:"boolean",default:"false",description:"Disables the button. Also triggered automatically when loading=true."},{name:"width",type:"DuiWidth",description:"Width override. Useful for full-width buttons."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override."},{name:"color",type:"string",description:"Text color override."},{name:"defaultColor",type:"string",description:"Primary/accent color alias with context-level support (alias for accentColor)."},{name:"activeColor",type:"string",description:"Color for active/focus ring state."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override."},{name:"...rest",type:"ButtonHTMLAttributes<HTMLButtonElement>",description:"All native button attributes (onClick, type, aria-*, etc.) forwarded to the button element."}]})}),e.jsx(_,{title:"ButtonVariant enum",children:e.jsx(xe,{name:"ButtonVariant",values:[{value:"primary",description:"Filled accent bg, white text",color:"var(--color-primary)"},{value:"secondary",description:"Surface bg, border, default text",color:"var(--color-info)"},{value:"ghost",description:"Transparent bg, secondary text",color:"var(--color-text-muted)"},{value:"danger",description:"Red filled, white text",color:"var(--color-error)"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"Dense toolbar"},{size:"sm",height:"24px",font:"11px",desc:"Compact"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"tip",children:"All buttons in the same toolbar or row must use the same size. Never mix xs (20px) and sm (24px) buttons side by side — the height difference is visually jarring in a single UI."}),e.jsx(S,{type:"info",children:"When loading=true, the button is automatically disabled and iconLeft is replaced by a spinner. The label text (children or label prop) remains visible so the user knows what operation is in progress."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"ButtonView reads its dimensions from the shared button category base hook (useButtonBase). Omitting size, width, borderRadius, or color on ButtonView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every button-category component at once.",children:[e.jsx(I,{features:[{label:"useButtonBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Width presets, resolved via the ",e.jsx("code",{children:"width"})," prop or the nearest ",e.jsx("code",{children:'<DuiProvider width="...">'}),":"]}),e.jsx(jt,{widths:[{width:"sm",value:"80px"},{width:"md",value:"120px"},{width:"default",value:"auto"},{width:"lg",value:"200px"},{width:"fullWidth",value:"100%"},{width:"maxContent",value:"max-content"},{width:"fw",value:"100%"},{width:"mx",value:"max-content"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Button category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every button-category component in the tree."]})]})]})}function D9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Square icon-only button",color:"var(--color-primary)"},{label:"ghost + filled variants",color:"var(--color-success)"},{label:"Active state with accent fill",color:"var(--color-info)"},{label:"Tooltip via title attribute",color:"var(--color-warning)"},{label:"Custom accent + active colors",color:"#a855f7"},{label:"Rounded or square corners",color:"#ec4899"},{label:"5 fixed pixel sizes",color:"#14b8a6"},{label:"DuiProvider color context",color:"#f97316"},{label:"Extends native button attributes",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Variants",children:e.jsx(Od,{variants:[{label:"ghost",description:"Transparent background. Dim icon, brightens on hover. Default variant.",color:"var(--color-text-muted)"},{label:"filled",description:"Translucent accent background at rest, solid on active.",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"icon",type:"ReactNode",required:!0,description:"The icon element to render. Use DUI icon components for consistent sizing."},{name:"size",type:"IconButtonSize",default:"'default'",description:"Fixed pixel size for the button square."},{name:"rounded",type:"boolean",default:"true",description:"true = 4px border-radius. false = 0px square."},{name:"tooltip",type:"string",description:"Native browser tooltip via the title attribute. Shown on hover."},{name:"variant",type:"IconButtonVariant",default:"'ghost'",description:"Visual style. ghost = transparent at rest. filled = tinted background."},{name:"accentColor",type:"string",description:"Override the accent color used for hover highlight and active state."},{name:"activeColor",type:"string",description:"Color used specifically when active=true. Falls back to accentColor."},{name:"active",type:"boolean",default:"false",description:"Shows the active state — filled tint on ghost variant, solid fill on filled variant."},{name:"disabled",type:"boolean",default:"false",description:"Disables the button and reduces opacity to 45%."},{name:"borderRadius",type:"DuiRadius | number",description:"Override border-radius (takes effect when rounded=true)."},{name:"color",type:"string",description:"Icon color override (applies at rest state)."},{name:"...rest",type:"ButtonHTMLAttributes<HTMLButtonElement>",description:"All native button attributes forwarded to the button element."}]})}),e.jsx(_,{title:"IconButtonVariant enum",children:e.jsx(xe,{name:"IconButtonVariant",values:[{value:"ghost",description:"No background, subtle muted icon",color:"var(--color-text-muted)"},{value:"filled",description:"Translucent accent tinted background",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Sizes (fixed pixel dimensions)",children:e.jsx(H,{sizes:[{size:"default",height:"26px",font:"—",desc:"Context default"},{size:"sm",height:"22px",font:"—",desc:"Compact toolbar"},{size:"md",height:"28px",font:"—",desc:"Standard"},{size:"lg",height:"32px",font:"—",desc:"Large"},{size:"xl",height:"36px",font:"—",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"Unlike ButtonView, IconButtonView uses fixed pixel dimensions rather than DuiTokens height values. The five sizes (default, sm, md, lg, xl) map to 26, 22, 28, 32, 36px squares respectively."}),e.jsx(S,{type:"tip",children:"Use the active prop for toggle-style icon buttons (e.g. a mute button, a filter toggle). The active state shifts the icon color to accentColor and adds a tinted background so the state is visually obvious."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"IconButtonView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["IconButtonView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function N9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Split button: primary action + dropdown chevron",color:"var(--color-primary)"},{label:"4 variants (primary, secondary, ghost, danger)",color:"var(--color-success)"},{label:"Optional left icon",color:"var(--color-info)"},{label:"ContextMenuView-backed dropdown",color:"var(--color-warning)"},{label:"Dropdown alignment (auto, left, right)",color:"#a855f7"},{label:"Rounded or square corners",color:"#ec4899"},{label:"DUI token-based sizing",color:"#14b8a6"},{label:"Disabled state",color:"#f97316"}]})}),e.jsx(_,{title:"Overview",description:"DropDownButtonView renders a split-button pattern: a clickable label section on the left and a chevron toggle on the right. The left side fires onPrimaryClick. The right side opens a ContextMenuView dropdown with the provided items. A vertical divider separates the two sections.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"label",type:"string",required:!0,description:"Text shown in the primary (left) button section."},{name:"items",type:"ContextMenuItem[]",required:!0,description:"Menu items for the dropdown. Passed directly to ContextMenuView."},{name:"icon",type:"ReactNode",description:"Optional icon rendered to the left of the label in the primary section."},{name:"variant",type:"ButtonVariant",default:"'secondary'",description:"Visual variant. primary = accent filled. secondary = surface + border. ghost = transparent. danger = red filled."},{name:"size",type:"ButtonSize",default:"'default'",description:"Falls back to DuiProvider context size. 'default' resolves to the context default."},{name:"rounded",type:"boolean",default:"true",description:"true = token border-radius on the outer wrapper and dropdown. false = 0px square."},{name:"accentColor",type:"string",description:"Override the accent color for the primary variant background."},{name:"disabled",type:"boolean",default:"false",description:"Disables both the primary button and the chevron. Reduces opacity to 50%."},{name:"primaryDisabled",type:"boolean",default:"false",description:"Disables only the primary button, dimming that half while the chevron and its menu stay usable. Use when the main action needs valid input but the menu holds the items that fix it."},{name:"onPrimaryClick",type:"() => void",description:"Called when the user clicks the label/icon section (not the chevron)."},{name:"align",type:"'auto' | 'left' | 'right'",default:"'auto'",description:"Dropdown alignment relative to the button. 'right' keeps the menu right-edge aligned with the button (opens leftward)."},{name:"className",type:"string",description:"Additional class names for the outer wrapper div."}]})}),e.jsx(_,{title:"ButtonVariant enum",children:e.jsx(xe,{name:"ButtonVariant",values:[{value:"primary",description:"Filled accent background",color:"var(--color-primary)"},{value:"secondary",description:"Surface + border (default)",color:"var(--color-info)"},{value:"ghost",description:"No background",color:"var(--color-text-muted)"},{value:"danger",description:"Red filled",color:"var(--color-error)"}]})}),e.jsx(S,{type:"info",children:'The dropdown uses ContextMenuView internally with matchAnchorWidth=false and width="md" by default. For full control over menu items (icons, shortcuts, danger styling, submenus), use the ContextMenuItem shape documented in ContextMenuViewDocs.'}),e.jsx(S,{type:"tip",children:"The divider between label and chevron automatically adapts its color to match the variant: white at 25% opacity for primary/danger, and var(--color-surface-border) for secondary/ghost."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"DropDownButtonView reads its dimensions from the shared button category base hook (useButtonBase). Omitting size, width, borderRadius, or color on DropDownButtonView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every button-category component at once.",children:[e.jsx(I,{features:[{label:"useButtonBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Button category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every button-category component in the tree."]})]})]})}function L9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal-rendered at document.body",color:"var(--color-primary)"},{label:"Anchor-element or cursor-position trigger",color:"var(--color-success)"},{label:"Infinite recursive submenus",color:"var(--color-info)"},{label:"Keyboard shortcut binding (Escape + single-key)",color:"var(--color-warning)"},{label:"Danger styling per item",color:"#a855f7"},{label:"Separator / divider items",color:"#ec4899"},{label:"Optional icons and keyboard shortcuts displayed",color:"#14b8a6"},{label:"Viewport-safe auto positioning",color:"#f97316"},{label:"Dropdown alignment (auto, left, right)",color:"var(--color-primary)"},{label:"Match anchor width option",color:"var(--color-success)"},{label:"Open/close animation (dui_menu-in)",color:"var(--color-info)"},{label:"Disabled per-item state",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"items",type:"ContextMenuItem[]",required:!0,description:"Array of menu items. Items with separator=true render as horizontal dividers."},{name:"anchorEl",type:"HTMLElement | null",required:!0,description:"The element to anchor the menu to. Menu opens below this element. Pass null to use position instead."},{name:"open",type:"boolean",required:!0,description:"Controls the visibility of the menu."},{name:"onClose",type:"() => void",required:!0,description:"Called when the user clicks outside the menu, presses Escape, or clicks a non-submenu item."},{name:"width",type:"ContextMenuWidth",default:"'auto'",description:"Width of the menu. 'auto' = max-content. 'sm' = 140px. 'md' = 180px. 'lg' = 220px. number = px value."},{name:"rounded",type:"boolean",default:"true",description:"true = 8px border-radius on the menu, 5px on items. false = 0px square."},{name:"matchAnchorWidth",type:"boolean",default:"false",description:"When true, the menu width is set to match the anchor element width."},{name:"position",type:"{ x: number; y: number }",description:"Alternative to anchorEl. Positions the menu at a specific viewport coordinate (for right-click context menus)."},{name:"align",type:"'auto' | 'left' | 'right'",default:"'auto'",description:"Menu alignment relative to anchor. 'right' right-aligns with the anchor (opens leftward). 'left' always left-aligns. 'auto' chooses based on viewport space."}]})}),e.jsx(_,{title:"ContextMenuItem shape",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for the item. Used as the React key."},{name:"label",type:"string",required:!0,description:"Display text for the item."},{name:"icon",type:"ReactNode",description:"Icon rendered to the left of the label. Rendered in a 14px wide flex container."},{name:"shortcut",type:"string",description:"Keyboard shortcut hint displayed on the right side. Also wired as a keyboard shortcut when the menu is open. Use '⌫' to match Backspace/Delete."},{name:"danger",type:"boolean",description:"When true, the item and its icon render in var(--color-error) red."},{name:"disabled",type:"boolean",description:"When true, the item is shown at 45% opacity and clicks are ignored."},{name:"separator",type:"boolean",description:"When true, the item renders as a horizontal 1px divider line, ignoring all other props."},{name:"children",type:"ContextMenuItem[]",description:"Nested menu items. Hovering this item opens a submenu portalled to document.body, positioned to the right (auto-flips if needed)."},{name:"onClick",type:"() => void",description:"Handler called when the item is clicked. Also used by shortcut binding."}]})}),e.jsx(_,{title:"ContextMenuWidth enum",children:e.jsx(xe,{name:"ContextMenuWidth",values:[{value:"auto",description:"max-content — menu is as wide as the longest item",color:"var(--color-text-muted)"},{value:"sm",description:"140px",color:"var(--color-success)"},{value:"md",description:"180px",color:"var(--color-primary)"},{value:"lg",description:"220px",color:"var(--color-info)"}]})}),e.jsx(S,{type:"info",children:"Submenu portals are also attached to document.body and positioned independently. Each level of nesting has its own sibling-coordination state so only one child submenu can be open at a time per menu level."}),e.jsx(S,{type:"tip",children:`Shortcuts are fired globally while the menu is open. A shortcut of "D" fires the item's onClick when the user presses D. The special shortcut "⌫" matches both Backspace and Delete.`}),e.jsx(S,{type:"warning",children:"Items with children (submenus) do not fire onClick — clicking them opens the submenu instead. Add onClick only to leaf items."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ContextMenuView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ContextMenuView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function P9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"3 variants: pill, underline, chip",color:"var(--color-primary)"},{label:"Animated sliding indicator",color:"var(--color-success)"},{label:"Badge count per tab",color:"var(--color-info)"},{label:"Dot indicator per tab",color:"var(--color-warning)"},{label:"Per-badge custom color",color:"#a855f7"},{label:"Per-dot custom color",color:"#ec4899"},{label:"Custom accent + inactive color",color:"#14b8a6"},{label:"DUI container props (width, borderRadius)",color:"#f97316"},{label:"DuiProvider size context",color:"var(--color-primary)"},{label:"ARIA role=tablist + aria-selected",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Variants",children:e.jsx(Od,{variants:[{label:"pill",description:"Track background with animated sliding pill indicator. Default.",color:"var(--color-primary)"},{label:"underline",description:"No track, animated 2px bottom underline slides under the active tab.",color:"var(--color-info)"},{label:"chip",description:"Each tab is an independent pill chip; no shared track or underline.",color:"#a855f7"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tabs",type:"TabItem[]",required:!0,description:"Array of tab items to render."},{name:"activeTab",type:"string",required:!0,description:"The id of the currently active tab."},{name:"onChange",type:"(id: string) => void",required:!0,description:"Called when the user clicks a tab."},{name:"size",type:"DuiSize",description:"Falls back to DuiProvider context when omitted."},{name:"variant",type:"TabVariant",default:"'pill'",description:"Visual variant of the tab bar."},{name:"accentColor",type:"string",description:"Color for the active indicator, active tab text, and badge fills. Overrides base.activeColor."},{name:"className",type:"string",description:"Additional class names for the container element."},{name:"width",type:"DuiWidth",description:"Width of the tab container. When set, the container stretches to fill and tabs share space equally."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override (applies to pill track and pill indicator)."},{name:"color",type:"string",description:"Override color for inactive tab text."},{name:"activeColor",type:"string",description:"Color for the active tab indicator and text. Alias for accentColor with context-level support."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override for tab labels."}]})}),e.jsx(_,{title:"TabItem shape",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for the tab."},{name:"label",type:"string",required:!0,description:"Display text of the tab."},{name:"badge",type:"number",description:"Count shown as a pill badge to the right of the label. Only rendered when > 0."},{name:"dot",type:"boolean",description:"When true, shows a small colored dot indicator to the right of the label."},{name:"dotColor",type:"string",description:"Override color for the dot indicator. Defaults to the accent color."},{name:"badgeColor",type:"string",description:"Override color for the badge pill. Defaults to the accent color."}]})}),e.jsx(_,{title:"TabVariant enum",children:e.jsx(xe,{name:"TabVariant",values:[{value:"pill",description:"Track with sliding pill background indicator",color:"var(--color-primary)"},{value:"underline",description:"Sliding 2px bottom border indicator",color:"var(--color-info)"},{value:"chip",description:"Independent rounded chip per tab",color:"#a855f7"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"Dense"},{size:"sm",height:"24px",font:"11px",desc:"Compact"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The animated indicator uses useLayoutEffect to measure the active tab's offsetLeft and offsetWidth after each render, then transitions left and width with a 200ms ease-out. This means the animation also runs correctly during tab reordering."}),e.jsx(S,{type:"tip",children:"For browser-style tab bars with closeable tabs and a new-tab button, use TabBarView instead. TabView is for in-panel section switching (e.g. Headers / Body / Auth)."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"TabView reads its dimensions from the shared tab category base hook (useTabBase). Omitting size, width, borderRadius, or color on TabView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every tab-category component at once.",children:[e.jsx(I,{features:[{label:"useTabBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 18px"},{size:"xs",height:"20px",font:"9px",desc:"padX 18px"},{size:"sm",height:"24px",font:"10px",desc:"padX 10px"},{size:"md",height:"28px",font:"11px",desc:"padX 12px"},{size:"lg",height:"36px",font:"12px",desc:"padX 14px"},{size:"xl",height:"40px",font:"13px",desc:"padX 18px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 18px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 18px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Width presets, resolved via the ",e.jsx("code",{children:"width"})," prop or the nearest ",e.jsx("code",{children:'<DuiProvider width="...">'}),":"]}),e.jsx(jt,{widths:[{width:"sm",value:"80px"},{width:"md",value:"120px"},{width:"default",value:"auto"},{width:"lg",value:"200px"},{width:"fullWidth",value:"100%"},{width:"maxContent",value:"max-content"},{width:"fw",value:"100%"},{width:"mx",value:"max-content"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Tab category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every tab-category component in the tree."]})]})]})}function M9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Browser-style horizontal tab bar",color:"var(--color-primary)"},{label:"Protocol color badges (REST, GQL, WS, gRPC, SOAP, AI, MCP)",color:"var(--color-success)"},{label:"HTTP method color labels (GET, POST, PUT…)",color:"var(--color-info)"},{label:"Realtime protocol sub-badges (WS, SSE, SIO, MQTT)",color:"var(--color-warning)"},{label:"Scroll left/right when tabs overflow",color:"#a855f7"},{label:"Active top-border indicator per tab",color:"#ec4899"},{label:"Dirty (unsaved) dot indicator",color:"#14b8a6"},{label:"Pinned tab (no close button)",color:"#f97316"},{label:"Add tab button",color:"var(--color-primary)"},{label:"Settings and mock-server special tab types",color:"var(--color-success)"},{label:"DuiProvider size context",color:"var(--color-info)"},{label:"Raw pixel height override",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tabs",type:"TabBarTab[]",required:!0,description:"Array of tab objects to render."},{name:"activeTabId",type:"string",required:!0,description:"The id of the currently active tab."},{name:"onTabClick",type:"(id: string) => void",required:!0,description:"Called when the user clicks a tab to switch to it."},{name:"onTabClose",type:"(id: string) => void",description:"Called when the close (×) button is clicked on a tab. The close button is hidden for pinned tabs."},{name:"onAddTab",type:"() => void",description:"When provided, shows a + button after all tabs to create a new tab."},{name:"accentColor",type:"string",default:"var(--color-primary)",description:"Fallback accent color for tabs that have no protocol or type set."},{name:"size",type:"DuiSize",description:"Falls back to DuiProvider context when omitted. Uses nav heights (taller than input heights for click comfort)."},{name:"height",type:"number",description:"Raw pixel height override. Prefer size for token-aligned sizing."},{name:"className",type:"string",description:"Additional class names for the root container div."}]})}),e.jsx(_,{title:"TabBarTab shape",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for the tab."},{name:"label",type:"string",required:!0,description:"Display label of the tab."},{name:"type",type:"TabBarTabType",description:"Special tab type. 'settings' shows a gear icon. 'mock-server' shows a server icon. These two types are non-closeable."},{name:"protocol",type:"TabBarProtocol",description:"Protocol badge shown before the label. Drives the top-border accent color."},{name:"method",type:"string",description:"HTTP method for REST tabs (e.g. 'GET', 'POST'). Shown as a colored monospace label instead of a protocol badge."},{name:"dirty",type:"boolean",description:"When true, shows a small colored dot to the right of the label to indicate unsaved changes."},{name:"pinned",type:"boolean",description:"When true, hides the close button and shows a 📌 pin indicator."},{name:"rtProtocol",type:"RealtimeProtocol",description:"Realtime sub-protocol for websocket tabs. Drives the badge label: 'WS', 'SSE', 'SIO', 'MQTT'."}]})}),e.jsx(_,{title:"TabBarProtocol enum",children:e.jsx(xe,{name:"TabBarProtocol",values:[{value:"rest",description:"REST — var(--color-protocol-rest)",color:"var(--color-protocol-rest)"},{value:"graphql",description:"GraphQL — var(--color-protocol-graphql)",color:"#ec4899"},{value:"websocket",description:"WebSocket — var(--color-protocol-websocket)",color:"#14b8a6"},{value:"grpc",description:"gRPC — var(--color-protocol-grpc)",color:"#f97316"},{value:"soap",description:"SOAP — var(--color-protocol-soap)",color:"#a855f7"},{value:"ai",description:"AI — var(--color-protocol-ai)",color:"var(--color-primary)"},{value:"mcp",description:"MCP — var(--color-protocol-mcp)",color:"var(--color-info)"}]})}),e.jsx(_,{title:"Sizes (nav heights — taller than input heights)",children:e.jsx(H,{sizes:[{size:"xs",height:"28px",font:"10px",desc:"Dense nav"},{size:"sm",height:"32px",font:"11px",desc:"Compact"},{size:"md",height:"36px",font:"12px",desc:"Default"},{size:"lg",height:"40px",font:"13px",desc:"Large"},{size:"xl",height:"44px",font:"14px",desc:"XL nav"}]})}),e.jsx(S,{type:"info",children:"The tab list scrolls horizontally when there are too many tabs to fit. Scroll arrow buttons appear automatically at the left and right edges when scrolling is possible, detected by a ResizeObserver."}),e.jsx(S,{type:"tip",children:"For simple in-panel tab switching without close buttons or protocol badges, use TabView instead. TabBarView is specifically designed for the application chrome tab row at the top of the workspace."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"TabBarView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs(S,{type:"info",children:["TabBarView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function j9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Monaco Editor core",color:"var(--color-primary)"},{label:"12 languages",color:"var(--color-info)"},{label:"Read-only mode",color:"var(--color-text-muted)"},{label:"DUI context menu",color:"var(--color-success)"},{label:"Native context menu",color:"var(--color-text-muted)"},{label:"EditorOptions API",color:"#a855f7"},{label:"9 Monaco enums",color:"#ec4899"},{label:"Auto-layout",color:"var(--color-warning)"},{label:"Theme sync",color:"var(--color-success)"},{label:"dk.* IntelliSense",color:"#14b8a6"},{label:"GraphQL completions",color:"var(--color-primary)"},{label:"XML auto-format",color:"var(--color-info)"}]})}),e.jsxs(S,{type:"tip",children:["Use ",e.jsx(xt,{children:'contextMenuMode="dui"'})," with ",e.jsx(xt,{children:"contextMenuItems"})," to replace Monaco's default right-click menu with DUI's recursive ContextMenuView — supports icons, submenus, danger items, and separators."]}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Current editor content — controlled."},{name:"onChange",type:"(val: string) => void",description:"Called on every change with the new full content string."},{name:"language",type:"EditorLanguage",default:"'json'",description:"Syntax highlighting language. See EditorLanguage enum below."},{name:"height",type:"string | number",default:"300",description:"Editor container height. Pass a number (pixels) or a CSS string like '200px' or '40vh'."},{name:"readOnly",type:"boolean",default:"false",description:"Disable all editing. Editor becomes a styled read-only viewer."},{name:"fontSize",type:"number",default:"12",description:"Editor font size in pixels."},{name:"wordWrap",type:"'on' | 'off'",default:"'off'",description:"Quick soft word-wrap toggle. Overridden by editorOptions.wordWrap if both are set — use one or the other."},{name:"glyphMargin",type:"boolean",default:"false",description:"Reserve space for the glyph margin column. Required when using DebugEditorView breakpoint glyphs."},{name:"placeholder",type:"string",description:"Placeholder text shown when the editor is empty."},{name:"contextMenuMode",type:"EditorContextMenuMode",default:"'native'",description:"Controls right-click menu. 'native' = Monaco default. 'dui' = suppress Monaco menu and show DUI ContextMenuView at cursor position."},{name:"contextMenuItems",type:"ContextMenuItem[]",description:"Menu items for DUI context menu. Only active when contextMenuMode='dui'. Supports icons, separators, danger, submenus."},{name:"editorOptions",type:"EditorOptions",description:"Fine-grained Monaco editor options. Consumer values override DUI defaults. DUI always controls: automaticLayout, contextmenu, fixedOverflowWidgets, glyphMargin."},{name:"accentColor",type:"string",description:"CSS color for cursor and selection highlight."},{name:"style",type:"CSSProperties",description:"Style applied to the editor container div."},{name:"className",type:"string",description:"CSS class name for the editor container."}]})}),e.jsx(_,{title:"EditorLanguage",description:"Syntax highlighting languages supported by MonacoEditor.",children:e.jsx(xe,{name:"EditorLanguage",values:[{value:"json",description:"JSON — default language"},{value:"javascript",description:"JavaScript (.js)"},{value:"typescript",description:"TypeScript (.ts)"},{value:"graphql",description:"GraphQL schema + queries",color:"#e535ab"},{value:"xml",description:"XML / SOAP / HTML"},{value:"html",description:"HTML markup"},{value:"css",description:"CSS stylesheets"},{value:"yaml",description:"YAML configuration"},{value:"python",description:"Python (.py)"},{value:"markdown",description:"Markdown text"},{value:"plaintext",description:"No highlighting"},{value:"java",description:"Java source"},{value:"proto",description:"Protocol Buffers (.proto)"}]})}),e.jsx(_,{title:"EditorContextMenuMode",description:"Controls which context menu appears on right-click.",children:e.jsx(xe,{name:"EditorContextMenuMode",values:[{value:"native",description:"Monaco's default context menu (Format, Find, etc.)",color:"var(--color-text-muted)"},{value:"dui",description:"Suppress Monaco menu — show DUI ContextMenuView with contextMenuItems",color:"var(--color-success)"}]})}),e.jsx(_,{title:"EditorOptions",description:"All fields are optional. Consumer values override DUI defaults. Structural options (automaticLayout, contextmenu, fixedOverflowWidgets, glyphMargin) are always controlled by DUI and cannot be overridden.",children:e.jsx(M,{props:[{name:"lineNumbers",type:"EditorLineNumbers",default:"'on'",description:"Line number display mode."},{name:"lineHeight",type:"number",description:"Line height in pixels."},{name:"letterSpacing",type:"number",description:"Letter spacing in pixels."},{name:"rulers",type:"number[]",description:"Column ruler positions (e.g. [80, 120])."},{name:"renderWhitespace",type:"EditorRenderWhitespace",default:"'none'",description:"Whitespace character rendering."},{name:"minimap",type:"boolean",default:"false",description:"Show Monaco minimap."},{name:"scrollBeyondLastLine",type:"boolean",default:"false",description:"Allow scrolling past the last line."},{name:"smoothScrolling",type:"boolean",default:"false",description:"Smooth animated scrolling."},{name:"mouseWheelZoom",type:"boolean",default:"false",description:"Ctrl+scroll to zoom font size."},{name:"cursorStyle",type:"EditorCursorStyle",default:"'line'",description:"Shape of the text cursor."},{name:"cursorBlinking",type:"EditorCursorBlinking",default:"'blink'",description:"Cursor blink animation style."},{name:"tabSize",type:"number",default:"2",description:"Number of spaces per tab character."},{name:"wordWrap",type:"EditorWordWrap",default:"'off'",description:"Word wrap behavior."},{name:"formatOnPaste",type:"boolean",default:"false",description:"Auto-format content on paste."},{name:"formatOnType",type:"boolean",default:"false",description:"Auto-format as user types."},{name:"autoIndent",type:"EditorAutoIndent",default:"'keep'",description:"Auto-indent strategy."},{name:"folding",type:"boolean",default:"true",description:"Enable code folding."},{name:"showFoldingControls",type:"EditorFoldingControls",default:"'mouseover'",description:"When to show folding arrows."},{name:"matchBrackets",type:"EditorMatchBrackets",default:"'always'",description:"Bracket matching highlight."},{name:"bracketPairColorization",type:"boolean",default:"true",description:"Color-code bracket pairs."},{name:"quickSuggestions",type:"boolean",default:"true",description:"IntelliSense auto-trigger suggestions."},{name:"suggestOnTriggerCharacters",type:"boolean",default:"true",description:"Show suggestions on trigger chars (., (, etc.)."},{name:"acceptSuggestionOnEnter",type:"EditorAcceptSuggestion",default:"'on'",description:"Accept suggestion on Enter key."},{name:"parameterHints",type:"boolean",default:"true",description:"Show function parameter hints."},{name:"hover",type:"boolean",default:"true",description:"Show hover tooltip on token."},{name:"codeLens",type:"boolean",default:"false",description:"Show CodeLens annotations above code."},{name:"inlayHints",type:"boolean",default:"false",description:"Show inline type/value hints."},{name:"colorDecorators",type:"boolean",default:"true",description:"Color swatch decorators for CSS color values."},{name:"linkedEditing",type:"boolean",default:"false",description:"Linked renaming (rename tag opens closing tag)."},{name:"copyWithSyntaxHighlighting",type:"boolean",default:"true",description:"Include syntax highlighting when copying to clipboard."},{name:"padding",type:"{ top?: number; bottom?: number }",description:"Editor content padding in pixels."}]})}),e.jsxs(_,{title:"Monaco Enums",description:"Use these const enum objects instead of raw strings for type-safety and IntelliSense.",children:[e.jsx(xe,{name:"EditorLineNumbers",values:[{value:"EditorLineNumbers.ON",description:"Show absolute line numbers",color:"var(--color-success)"},{value:"EditorLineNumbers.OFF",description:"Hide line numbers",color:"var(--color-text-muted)"},{value:"EditorLineNumbers.RELATIVE",description:"Show relative line numbers (vim-style)",color:"var(--color-primary)"},{value:"EditorLineNumbers.INTERVAL",description:"Show numbers at intervals only",color:"var(--color-info)"}]}),e.jsx(xe,{name:"EditorCursorStyle",values:[{value:"EditorCursorStyle.LINE",description:"Thin vertical bar (default)",color:"var(--color-primary)"},{value:"EditorCursorStyle.BLOCK",description:"Full block cursor",color:"#a855f7"},{value:"EditorCursorStyle.UNDERLINE",description:"Underline cursor",color:"var(--color-info)"},{value:"EditorCursorStyle.LINE_THIN",description:"Thinner line",color:"var(--color-text-muted)"},{value:"EditorCursorStyle.BLOCK_OUTLINE",description:"Block outline only",color:"var(--color-warning)"},{value:"EditorCursorStyle.UNDERLINE_THIN",description:"Thin underline",color:"var(--color-text-muted)"}]}),e.jsx(xe,{name:"EditorCursorBlinking",values:[{value:"EditorCursorBlinking.BLINK",description:"Standard on/off blink",color:"var(--color-primary)"},{value:"EditorCursorBlinking.SMOOTH",description:"Fade in/out blink",color:"var(--color-success)"},{value:"EditorCursorBlinking.PHASE",description:"Phase animation",color:"#a855f7"},{value:"EditorCursorBlinking.EXPAND",description:"Expand animation",color:"var(--color-warning)"},{value:"EditorCursorBlinking.SOLID",description:"No blinking — always visible",color:"var(--color-info)"}]}),e.jsx(xe,{name:"EditorWordWrap",values:[{value:"EditorWordWrap.OFF",description:"No word wrap (default)",color:"var(--color-text-muted)"},{value:"EditorWordWrap.ON",description:"Wrap at viewport width",color:"var(--color-success)"},{value:"EditorWordWrap.WORD_WRAP_COLUMN",description:"Wrap at wordWrapColumn setting",color:"var(--color-primary)"},{value:"EditorWordWrap.BOUNDED",description:"Wrap at min(viewport, wordWrapColumn)",color:"var(--color-info)"}]}),e.jsx(xe,{name:"EditorRenderWhitespace",values:[{value:"EditorRenderWhitespace.NONE",description:"Hidden (default)",color:"var(--color-text-muted)"},{value:"EditorRenderWhitespace.BOUNDARY",description:"Only leading/trailing",color:"var(--color-warning)"},{value:"EditorRenderWhitespace.SELECTION",description:"Only in selected text",color:"var(--color-info)"},{value:"EditorRenderWhitespace.TRAILING",description:"Only trailing whitespace",color:"#ec4899"},{value:"EditorRenderWhitespace.ALL",description:"All whitespace visible",color:"var(--color-success)"}]}),e.jsx(xe,{name:"EditorFoldingControls",values:[{value:"EditorFoldingControls.ALWAYS",description:"Always show fold arrows",color:"var(--color-primary)"},{value:"EditorFoldingControls.NEVER",description:"Hide fold arrows entirely",color:"var(--color-text-muted)"},{value:"EditorFoldingControls.MOUSEOVER",description:"Show on hover (default)",color:"var(--color-success)"}]}),e.jsx(xe,{name:"EditorAutoIndent",values:[{value:"EditorAutoIndent.NONE",description:"No auto-indent",color:"var(--color-text-muted)"},{value:"EditorAutoIndent.KEEP",description:"Keep current indentation (default)",color:"var(--color-info)"},{value:"EditorAutoIndent.BRACKETS",description:"Indent inside brackets",color:"var(--color-primary)"},{value:"EditorAutoIndent.ADVANCED",description:"Language-aware advanced indent",color:"var(--color-warning)"},{value:"EditorAutoIndent.FULL",description:"Full language-specific indent",color:"var(--color-success)"}]}),e.jsx(xe,{name:"EditorAcceptSuggestion",values:[{value:"EditorAcceptSuggestion.ON",description:"Enter always accepts suggestion (default)",color:"var(--color-success)"},{value:"EditorAcceptSuggestion.OFF",description:"Enter never accepts",color:"var(--color-text-muted)"},{value:"EditorAcceptSuggestion.SMART",description:"Enter accepts only when suggestion is first",color:"var(--color-primary)"}]})]}),e.jsxs(S,{type:"warning",children:[e.jsx("strong",{children:"DUI-owned options"})," — these are always set by DUI and cannot be overridden via ",e.jsx(xt,{children:"editorOptions"}),":"," ",e.jsx(xt,{children:"automaticLayout"}),", ",e.jsx(xt,{children:"contextmenu"}),", ",e.jsx(xt,{children:"fixedOverflowWidgets"}),", ",e.jsx(xt,{children:"glyphMargin"}),". They are structural requirements of the DUI editor shell and breakpoint gutter."]}),e.jsxs(S,{type:"info",children:[e.jsx("strong",{children:"DebugEditorView"})," is a specialized variant of EditorView that adds breakpoint gutter clicks, paused-line highlight, and variable-hover tooltips. See the DebugEditorView panel for its own props and adapter API."]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"EditorView maps its size prop to an editor-specific font-size scale (mirroring useEditorBase / DUI_EDITOR_FONT_SIZE) rather than the standard input height/padding tokens, since code needs a larger, monospaced font than label-sized UI text. An explicit fontSize prop always takes precedence over size.",children:[e.jsx(I,{features:[{label:"Editor font-size scale (DUI_EDITOR_FONT_SIZE)",color:"var(--color-primary)"},{label:"fontSize prop overrides size",color:"var(--color-success)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"—",font:"10px",desc:"editor font-size"},{size:"xs",height:"—",font:"11px",desc:"editor font-size"},{size:"sm",height:"—",font:"11px",desc:"editor font-size"},{size:"md",height:"—",font:"12px",desc:"editor font-size (default)"},{size:"lg",height:"—",font:"13px",desc:"editor font-size"},{size:"xl",height:"—",font:"14px",desc:"editor font-size"},{size:"xxl",height:"—",font:"15px",desc:"editor font-size"},{size:"xxxl",height:"—",font:"16px",desc:"editor font-size"}]}),e.jsxs(S,{type:"info",children:["These values come from ",e.jsx("code",{children:"DUI_EDITOR_FONT_SIZE"})," in ",e.jsx("code",{children:"DuiTokens.ts"})," — deliberately larger than the standard ",e.jsx("code",{children:"DUI_FONT_SIZE"})," scale used by label-sized components. Omitting size falls back to 'md' (12px); EditorView does not read ambient ","<DuiProvider>"," size context directly."]})]})]})}function O9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",description:"This panel shows how DUI primitives combine into the real Daakia UI patterns. These are not standalone components — they are assembly recipes.",children:e.jsx(I,{features:[{label:"URL bar assembly",color:"var(--color-primary)"},{label:"Tab bar pattern",color:"var(--color-success)"},{label:"Sidebar layout",color:"var(--color-info)"},{label:"Settings layout",color:"var(--color-warning)"},{label:"Response panel",color:"#a855f7"},{label:"Form data pattern",color:"#ec4899"}]})}),e.jsx(_,{title:"URL bar pattern",children:e.jsxs(S,{type:"info",children:["The Daakia URL bar is a ",e.jsx(xt,{children:"MergedInputView"})," with segments:",e.jsx("br",{}),e.jsx("code",{children:"[select:method] + [divider] + [HighlightedInputView:url] + [button:Send]"}),e.jsx("br",{}),"The entire bar shares one border and one focus ring. Alternatively, use ",e.jsx(xt,{children:"SelectTextInputView"})," for method + URL pairs that don't need a custom URL input."]})}),e.jsx(_,{title:"Tab bar pattern",children:e.jsxs(S,{type:"tip",children:["Protocol-level tabs (REST, GraphQL, WebSocket, gRPC, SOAP) use ",e.jsx(xt,{children:"TabView"})," with ",e.jsx("code",{children:'variant="underline"'}),". Sub-section tabs within a panel (Headers, Body, Auth) use ",e.jsx("code",{children:'variant="chip"'}),". Never build a custom tab row with raw buttons."]})}),e.jsx(_,{title:"Sidebar layout",children:e.jsxs(S,{type:"info",children:["The collection sidebar uses ",e.jsx(xt,{children:"SideNavView"})," with ",e.jsx("code",{children:"searchable"})," and ",e.jsx("code",{children:"collapsible"})," enabled. Each collection is a ",e.jsx("code",{children:"isGroup"})," nav item with request items as children. The ",e.jsx("code",{children:"FolderView"})," component handles the folder tree inside the expanded sidebar pane."]})}),e.jsx(_,{title:"Settings panel layout",children:e.jsxs(S,{type:"tip",children:["Settings panels use a two-column layout: ",e.jsx(xt,{children:"SettingsNavView"})," on the left and the settings content on the right. Wrap both in a ",e.jsx(xt,{children:'DuiProvider size="sm"'})," to make all inputs compact without per-component props."]})}),e.jsx(_,{title:"Response panel pattern",children:e.jsxs(S,{type:"info",children:["Response data flows through: ",e.jsx(xt,{children:"TabView"})," (Pretty / Raw / Headers / Cookies) → ",e.jsx(xt,{children:"JsonTreeView"})," (structured JSON) or ",e.jsx(xt,{children:"MarkdownView"})," (text/html) or ",e.jsx(xt,{children:"KeyValueTableView"})," (headers). The ",e.jsx(xt,{children:"BottomPanelView"})," wraps logs and debug output."]})}),e.jsx(_,{title:"Key assembly rules",children:e.jsxs(S,{type:"warning",children:["Never build custom header rows with raw ",e.jsx("code",{children:"button"})," elements. Always use ",e.jsx(xt,{children:"ButtonView"})," or ",e.jsx(xt,{children:"IconButtonView"}),". Never build custom dropdowns — use ",e.jsx(xt,{children:"SelectInputView"})," or the ",e.jsx("code",{children:"select"})," segment in ",e.jsx(xt,{children:"MergedInputView"}),"."]})})]})}function z9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Animated thumb transition",color:"var(--color-primary)"},{label:"Custom accent / active color",color:"var(--color-success)"},{label:"Optional label (left or right)",color:"var(--color-info)"},{label:"Disabled state with dashed border",color:"var(--color-warning)"},{label:"ARIA role=switch + aria-checked",color:"#a855f7"},{label:"DuiProvider size context",color:"#ec4899"},{label:"Label color override",color:"#14b8a6"},{label:"Context activeColor + color props",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"checked",type:"boolean",required:!0,description:"Current on/off state of the toggle."},{name:"onChange",type:"(checked: boolean) => void",required:!0,description:"Called with the new boolean value when the user clicks the toggle."},{name:"disabled",type:"boolean",default:"false",description:"When true, the toggle is non-interactive. Shows a dashed border track and muted thumb at 50% opacity."},{name:"size",type:"ToggleSwitchSize",description:"Accepts all DuiSize values. Falls back to DuiProvider context when omitted."},{name:"accentColor",type:"string",description:"Color of the track when checked=true. Defaults to var(--color-toggle-on)."},{name:"label",type:"string",description:"Optional text label rendered beside the switch."},{name:"labelPosition",type:"'left' | 'right'",default:"'right'",description:"Position of the label relative to the switch track."},{name:"className",type:"string",description:"Additional class names applied to the button element (or the wrapper div when a label is present)."},{name:"activeColor",type:"string",description:"Alias for accentColor with context-level support. Sets the checked track color."},{name:"color",type:"string",description:"Label text color override."}]})}),e.jsx(_,{title:"Visual states",children:e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[{state:"checked",desc:"Track = accentColor (solid), thumb = white, border = transparent"},{state:"unchecked",desc:"Track = 10% text-primary tint, border = 20% text-primary"},{state:"disabled",desc:"Dashed border, transparent track, muted thumb, 50% opacity"}].map(t=>e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"flex-start"},children:[e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:"var(--color-primary)",fontWeight:600,flexShrink:0,marginTop:1},children:t.state}),e.jsx("span",{style:{fontSize:12,color:"var(--color-text-secondary)"},children:t.desc})]},t.state))})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"12px track",font:"10px",desc:"Dense"},{size:"sm",height:"14px track",font:"11px",desc:"Compact"},{size:"md",height:"16px track",font:"12px",desc:"Default"},{size:"lg",height:"20px track",font:"13px",desc:"Large"},{size:"xl",height:"24px track",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The thumb position animates via a CSS left transition (160ms). In the checked state the left is calculated as trackWidth - thumbSize - 2px so the thumb sits flush with the right edge with a 2px margin."}),e.jsx(S,{type:"tip",children:"When no label is provided, the component returns just the button element (no wrapper div), making it easy to embed directly in a flex row alongside other elements."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"ToggleSwitchView reads its dimensions from the shared toggle category base hook (useToggleBase). Omitting size or color on ToggleSwitchView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every toggle-category component at once.",children:[e.jsx(I,{features:[{label:"useToggleBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"10px track",font:"8px",desc:"18x10px, thumb 8px"},{size:"xs",height:"14px track",font:"9px",desc:"24x14px, thumb 10px"},{size:"sm",height:"16px track",font:"10px",desc:"28x16px, thumb 12px"},{size:"md",height:"20px track",font:"11px",desc:"36x20px, thumb 16px"},{size:"lg",height:"24px track",font:"12px",desc:"44x24px, thumb 20px"},{size:"xl",height:"28px track",font:"13px",desc:"52x28px, thumb 24px"},{size:"xxl",height:"32px track",font:"14px",desc:"60x32px, thumb 28px"},{size:"xxxl",height:"36px track",font:"16px",desc:"68x36px, thumb 32px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Toggle category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every toggle-category component in the tree."]})]})]})}function F9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Checked + unchecked + indeterminate states",color:"var(--color-primary)"},{label:"Custom accent color",color:"var(--color-success)"},{label:"Optional text label",color:"var(--color-info)"},{label:"Disabled state",color:"var(--color-warning)"},{label:"ARIA role=checkbox + aria-checked (mixed for indeterminate)",color:"#a855f7"},{label:"Label click triggers onChange",color:"#ec4899"},{label:"DuiProvider size context",color:"#14b8a6"},{label:"Label font is one size step smaller for compact look",color:"#f97316"},{label:"DuiToken-based box sizing",color:"var(--color-primary)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"checked",type:"boolean",required:!0,description:"Current checked state of the checkbox."},{name:"onChange",type:"(checked: boolean) => void",description:"Called with the new boolean value when the user clicks. Optional — omit for read-only checkboxes."},{name:"disabled",type:"boolean",default:"false",description:"When true, the checkbox is non-interactive at 50% opacity."},{name:"indeterminate",type:"boolean",default:"false",description:'When true, renders a horizontal dash inside the box (mixed state). Sets aria-checked to "mixed".'},{name:"size",type:"DuiSize",description:"Falls back to DuiProvider context when omitted."},{name:"accentColor",type:"string",description:"Fill color of the box when checked or indeterminate. Defaults to var(--color-primary)."},{name:"label",type:"string",description:"Optional text label. When provided, the component wraps the box in a flex div and the entire row is clickable."},{name:"className",type:"string",description:"Additional class names for the button element."}]})}),e.jsx(_,{title:"Visual states",children:e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[{state:"unchecked",desc:"Transparent background, 1.5px solid border at 28% text-primary opacity"},{state:"checked",desc:"Solid accentColor background, no border, white CheckIcon inside"},{state:"indeterminate",desc:"Solid accentColor background, white horizontal dash (2px height bar)"},{state:"disabled",desc:"Any state at 50% opacity, cursor: not-allowed"}].map(t=>e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"flex-start"},children:[e.jsx("code",{style:{fontSize:11,fontFamily:"monospace",color:"var(--color-primary)",fontWeight:600,flexShrink:0,marginTop:1},children:t.state}),e.jsx("span",{style:{fontSize:12,color:"var(--color-text-secondary)"},children:t.desc})]},t.state))})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"12px box",font:"10px label",desc:"Dense"},{size:"sm",height:"14px box",font:"11px label",desc:"Compact"},{size:"md",height:"16px box",font:"12px label",desc:"Default"},{size:"lg",height:"18px box",font:"12px label",desc:"Large"},{size:"xl",height:"20px box",font:"13px label",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The label font size is always one DuiSize step smaller than the box size for a compact, balanced look. For example, a md-size checkbox uses sm-level font for its label."}),e.jsx(S,{type:"tip",children:"When a label is provided, the entire row div (including the label text) triggers onChange on click — you do not need to click the box exactly."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"CheckboxView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs(S,{type:"info",children:["CheckboxView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function W9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal to document.body (popout mode)",color:"var(--color-primary)"},{label:"Inline mode (bare card, no portal)",color:"var(--color-success)"},{label:"Auto-stacking z-index via module-level counter",color:"var(--color-info)"},{label:"Header: title + subtitle + icon + right slot",color:"var(--color-warning)"},{label:"Tinted header color with optional gradient",color:"#a855f7"},{label:"Footer: footerLeft + footerRight slots",color:"#ec4899"},{label:"4 sizes (sm → xl)",color:"#14b8a6"},{label:"Elevated card background variant",color:"#f97316"},{label:"No-padding body mode (full-bleed editors)",color:"var(--color-primary)"},{label:"Escape key closes modal",color:"var(--color-success)"},{label:"Backdrop click intentionally NOT closing",color:"var(--color-info)"},{label:"Backdrop blur filter",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Modes",children:e.jsx(Od,{variants:[{label:"popout",description:"Default. Portalled to document.body with a blurred backdrop. Centered overlay.",color:"var(--color-primary)"},{label:"inline",description:"Bare card with no backdrop and no portal. Parent controls positioning.",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"open",type:"boolean",required:!0,description:"Controls visibility. When false, the component returns null (nothing is rendered)."},{name:"onClose",type:"() => void",required:!0,description:"Called when Escape is pressed. Never called on backdrop click (by design)."},{name:"title",type:"string",description:"Title text in the header bar."},{name:"subtitle",type:"string",description:"Secondary descriptive text shown below the title in the header."},{name:"headerIcon",type:"ReactNode",description:"Node rendered to the left of the title block — typically a colored icon circle."},{name:"children",type:"ReactNode",description:"Body content rendered inside the scrollable body area."},{name:"footerLeft",type:"ReactNode",description:"Content rendered in the left side of the footer bar."},{name:"footerRight",type:"ReactNode",description:"Content rendered in the right side of the footer bar."},{name:"size",type:"ModalSize",default:"'md'",description:"Maximum width of the modal card. See size reference below."},{name:"showCloseIcon",type:"boolean",default:"true",description:"When true, renders an X close button in the header right area."},{name:"headerColor",type:"string",description:"Optional CSS color for a tinted header background (e.g. var(--color-protocol-rest))."},{name:"headerGradient",type:"boolean",default:"false",description:"When true, renders the header as a left→right gradient (accent tint → surface) instead of a flat tint."},{name:"headerRight",type:"ReactNode",description:"Optional node rendered in the header right area, before the X button."},{name:"noPadding",type:"boolean",default:"false",description:"Removes body padding for full-bleed editor modals."},{name:"elevated",type:"boolean",default:"false",description:"Uses var(--color-elevated) instead of var(--color-surface) for the card background."},{name:"className",type:"string",description:"Additional class names (reserved for future use; currently not applied to any element)."},{name:"mode",type:"ModalMode",default:"'popout'",description:"popout = portal + backdrop + centered. inline = bare card, no portal, no backdrop."}]})}),e.jsx(_,{title:"ModalSize enum",children:e.jsx(xe,{name:"ModalSize",values:[{value:"sm",description:"max-width: 420px",color:"var(--color-success)"},{value:"md",description:"max-width: 560px (default)",color:"var(--color-primary)"},{value:"lg",description:"max-width: 720px",color:"var(--color-info)"},{value:"xl",description:"max-width: 920px",color:"#a855f7"}]})}),e.jsx(_,{title:"ModalMode enum",children:e.jsx(xe,{name:"ModalMode",values:[{value:"popout",description:"Portal + backdrop + centered overlay (default)",color:"var(--color-primary)"},{value:"inline",description:"Bare card, no portal, no backdrop",color:"var(--color-info)"}]})}),e.jsx(S,{type:"danger",children:"Backdrop click intentionally does NOT close the modal — by design. This prevents accidental dismissal of forms. The only way to close is via the X icon, Escape key, or a footer action button that calls onClose."}),e.jsx(S,{type:"info",children:"Each ModalView instance receives a unique, ever-growing z-index from the module-level _mountLayer counter (base 1000 + layer * 50). This guarantees later-opened modals always stack above earlier ones, regardless of DOM order. No manual z-index management needed."}),e.jsx(S,{type:"tip",children:"Use footerLeft for secondary actions (e.g. a Reset button) and footerRight for primary actions (e.g. Save, Generate). The footer is only rendered when at least one of footerLeft or footerRight is provided."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ModalView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ModalView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function V9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"5 variants: spinner, dots, skeleton, pulse, progress-bar",color:"var(--color-primary)"},{label:"Fullscreen overlay mode",color:"var(--color-success)"},{label:"Custom accent color",color:"var(--color-info)"},{label:"Optional text label",color:"var(--color-warning)"},{label:"Progress bar controlled value (0–100)",color:"#a855f7"},{label:"3 sizes (sm, md, lg)",color:"#ec4899"},{label:"Tailwind animate-spin / animate-bounce / animate-pulse / animate-ping",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"variant",type:"LoaderVariant",default:"'spinner'",description:"The loader animation type."},{name:"size",type:"LoaderSize",default:"'md'",description:"Controls dimensions of the spinner, dots, and pulse variants."},{name:"accentColor",type:"string",description:"Override color for the animation. Defaults to var(--color-loader-accent)."},{name:"label",type:"string",description:"Optional text shown beside (or below for progress-bar) the loader. Not shown for the skeleton variant."},{name:"fullscreen",type:"boolean",default:"false",description:"When true, wraps the loader in a fixed-position full-screen overlay with a dark backdrop (rgba(0,0,0,0.4))."},{name:"progress",type:"number",description:"0–100 progress value. Only used by the progress-bar variant. Clamped automatically."},{name:"className",type:"string",description:"Additional class names for the inner wrapper div."}]})}),e.jsx(_,{title:"LoaderVariant enum",children:e.jsx(xe,{name:"LoaderVariant",values:[{value:"spinner",description:"Circular spinning arc (animate-spin)",color:"var(--color-primary)"},{value:"dots",description:"Three bouncing dots in sequence (animate-bounce)",color:"var(--color-success)"},{value:"skeleton",description:"Three lines at 100% / 80% / 60% width (animate-pulse)",color:"var(--color-info)"},{value:"pulse",description:"Single pulsing circle (animate-pulse)",color:"var(--color-warning)"},{value:"progress-bar",description:"Horizontal fill bar with progress prop",color:"#a855f7"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"sm",height:"16px",font:"10px label",desc:"Inline use"},{size:"md",height:"24px",font:"11px label",desc:"Default"},{size:"lg",height:"36px",font:"12px label",desc:"Prominent"}]})}),e.jsx(S,{type:"info",children:"The skeleton variant renders three lines and ignores the label prop. The skeleton fills 100% of its container width and is useful for content placeholder UI patterns."}),e.jsx(S,{type:"tip",children:'The progress-bar variant requires the progress prop (0–100). The fill width transitions smoothly via CSS (300ms ease). Pair it with label for a "Loading 42%" style indicator.'}),e.jsx(_,{title:"DUI Sizing & Theming",description:"LoaderView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["LoaderView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function B9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Optional icon slot",color:"var(--color-primary)"},{label:"Title + message text",color:"var(--color-success)"},{label:"Optional action button",color:"var(--color-info)"},{label:"Compact mode (reduced padding)",color:"var(--color-warning)"},{label:"Custom accent color for action button",color:"#a855f7"},{label:"Centered flex layout",color:"#ec4899"},{label:"Max-width 320px on message for readability",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"title",type:"string",required:!0,description:"Primary heading text. Shown at 13px (12px in compact mode)."},{name:"icon",type:"ReactNode",description:"Optional icon rendered above the title. Shown at 50% opacity using var(--color-emptystate-icon)."},{name:"message",type:"string",description:"Secondary descriptive text shown below the title. Max width 320px for readability."},{name:"action",type:"EmptyStateAction",description:"Optional call-to-action button. Rendered as a small tinted button using accentColor."},{name:"accentColor",type:"string",description:"Color override for the action button border, background tint, and text. Defaults to var(--color-primary)."},{name:"compact",type:"boolean",default:"false",description:"When true, reduces padding (20px vs 40px) and font sizes for use in dense panels or table cells."},{name:"className",type:"string",description:"Additional class names for the outer container div."}]})}),e.jsx(_,{title:"EmptyStateAction shape",children:e.jsx(M,{props:[{name:"label",type:"string",required:!0,description:"Button text."},{name:"onClick",type:"() => void",required:!0,description:"Called when the action button is clicked."}]})}),e.jsx(S,{type:"tip",children:"For a truly centered empty state inside a scrollable container, wrap the parent in h-full flex flex-col and make EmptyStateView fill the remaining space. Never use py-12 on the empty state itself — let the flex centering do the work."}),e.jsx(S,{type:"info",children:"EmptyStateView is used internally by DataTableView when the rows array is empty. Pass emptyTitle and emptyMessage to DataTableView to customize the message without rendering EmptyStateView directly."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"EmptyStateView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["EmptyStateView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function G9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"5 status states",color:"var(--color-primary)"},{label:"Animated pulse ring (connecting + connected)",color:"var(--color-success)"},{label:"Custom label text",color:"var(--color-info)"},{label:"Optional subtext below label",color:"var(--color-warning)"},{label:"Show/hide label",color:"#a855f7"},{label:"3 sizes (sm, md, lg)",color:"#ec4899"},{label:"Color override (accent)",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"status",type:"StatusState",required:!0,description:"Current status. Controls the dot color, default label text, and whether the pulse animation runs."},{name:"label",type:"string",description:'Override the default label text. Defaults to the status display name (e.g. "Connected").'},{name:"subtext",type:"string",description:"Secondary smaller text shown below the label. Useful for showing connection details or timestamps."},{name:"showLabel",type:"boolean",default:"true",description:"When false, only the dot is shown without any text."},{name:"size",type:"StatusSize",default:"'md'",description:"Controls dot size and font size."},{name:"accentColor",type:"string",description:"Override both the dot color and label color. When set, overrides the status-derived color entirely."},{name:"className",type:"string",description:"Additional class names for the outer span."}]})}),e.jsx(_,{title:"StatusState enum",children:e.jsx(xe,{name:"StatusState",values:[{value:"idle",description:"Muted dot — var(--color-text-muted)",color:"var(--color-text-muted)"},{value:"connecting",description:"Pulsing warning dot — var(--color-warning)",color:"var(--color-warning)"},{value:"connected",description:"Pulsing success dot — var(--color-success)",color:"var(--color-success)"},{value:"disconnected",description:"Muted dot (same as idle)",color:"var(--color-text-muted)"},{value:"error",description:"Error red dot — var(--color-error)",color:"var(--color-error)"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"sm",height:"6px dot",font:"10px",desc:"Dense inline"},{size:"md",height:"8px dot",font:"11px",desc:"Default"},{size:"lg",height:"10px dot",font:"12px",desc:"Prominent"}]})}),e.jsx(S,{type:"info",children:"The pulse animation (animate-ping) runs only for the connecting and connected states. It is a separate absolutely-positioned span behind the dot, larger by 4px, at 35% opacity. The main dot remains opaque on top."}),e.jsx(S,{type:"tip",children:"Use showLabel=false when embedding in a tight toolbar where only the colored dot is needed. Add a tooltip on the parent element to explain the status to keyboard/assistive users."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"StatusIndicatorView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["StatusIndicatorView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function U9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal-rendered at document.body",color:"var(--color-primary)"},{label:"Viewport-safe auto-positioning with anchor element",color:"var(--color-success)"},{label:"Render-then-measure placement (no layout shift)",color:"var(--color-info)"},{label:"Scroll + resize position tracking",color:"var(--color-warning)"},{label:"Title section",color:"#a855f7"},{label:"Description text",color:"#ec4899"},{label:"Blue-badge code items with descriptions",color:"#14b8a6"},{label:"Footer italics note",color:"#f97316"},{label:"Optional wiki link with external icon",color:"var(--color-primary)"},{label:"Outside-click + Escape to close",color:"var(--color-success)"},{label:"Configurable width",color:"var(--color-info)"}]})}),e.jsx(_,{title:"Overview",description:"InfoPopupView is the standard way to attach help/info content to ? icons in DUI. It opens as a non-modal popup anchored to an element, auto-positions to stay within the viewport, and tracks the anchor on scroll and resize. It is NOT a toast and does NOT open a URL directly — all help content lives in the popup itself.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"open",type:"boolean",required:!0,description:"Controls visibility. When false, the component returns null."},{name:"onClose",type:"() => void",required:!0,description:"Called on outside click or Escape key press."},{name:"title",type:"string",required:!0,description:"Bold heading shown at the top of the popup."},{name:"anchorEl",type:"HTMLElement | null",description:"The element to anchor the popup to (typically the ? icon button). When not provided, the popup is centered in the viewport."},{name:"description",type:"string",description:"Paragraph text shown in the body below the title."},{name:"items",type:"InfoPopupItem[]",description:"Array of code + description pairs. Each item renders a blue badge chip for the code string and secondary text for the description."},{name:"footer",type:"string",description:"Italicized footer note shown at the bottom of the body section."},{name:"wikiLabel",type:"string",default:"'Open Wiki →'",description:"Label for the wiki link shown at the bottom of the popup."},{name:"wikiHref",type:"string",description:"URL for the wiki link. When not provided, the wiki link section is not rendered."},{name:"width",type:"number",default:"320",description:"Width of the popup in pixels."}]})}),e.jsx(_,{title:"InfoPopupItem shape",children:e.jsx(M,{props:[{name:"code",type:"string",required:!0,description:"Short code label rendered as a blue monospace badge chip."},{name:"description",type:"string",required:!0,description:"Descriptive text shown beside the badge."}]})}),e.jsx(S,{type:"danger",children:"Help (?) icons MUST always use InfoPopupView. NEVER trigger a toast or open a URL directly from a ? icon. This is an absolute DUI rule."}),e.jsx(S,{type:"info",children:"The popup starts invisible and only becomes visible after the first requestAnimationFrame measures its actual rendered size. This avoids a flash of incorrectly positioned content and ensures viewport-clamped positioning is based on real dimensions."}),e.jsx(S,{type:"tip",children:"The popup is z-index 1100, above ModalView instances. Pass the ref of the ? icon button as anchorEl so the popup appears directly below the icon, flipping to above when there is insufficient space below."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"InfoPopupView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["InfoPopupView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function H9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Bottom-edge drag to resize",color:"var(--color-primary)"},{label:"Pointer capture API (works outside browser window)",color:"var(--color-success)"},{label:"Min and max height constraints",color:"var(--color-info)"},{label:"Dashed grip indicator with hover reveal",color:"var(--color-warning)"},{label:"Configurable border-radius",color:"#a855f7"},{label:"Absolute-inset children (border + overflow:hidden)",color:"#ec4899"}]})}),e.jsx(_,{title:"Overview",description:"ResizablePanelView wraps children in a container of controlled height. A transparent 10px drag zone at the bottom edge allows the user to pull the panel taller or shorter. The grip indicator (a dashed pill) fades in on hover.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"defaultHeight",type:"number",required:!0,description:"Initial height of the panel in pixels."},{name:"minHeight",type:"number",default:"40",description:"Minimum height in pixels. The user cannot drag below this value."},{name:"maxHeight",type:"number",default:"600",description:"Maximum height in pixels. The user cannot drag above this value."},{name:"borderRadius",type:"number",default:"8",description:"Border radius in pixels applied to the inner content border and overflow clip."},{name:"children",type:"ReactNode",required:!0,description:"Content rendered inside the resizable panel. Children are absolutely positioned to fill the panel (inset: 0)."},{name:"className",type:"string",description:"Additional class names for the outer positioning div."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer div (merged with height and position: relative)."}]})}),e.jsx(S,{type:"info",children:"The drag handle uses the Pointer Capture API (setPointerCapture / releasePointerCapture) to continue tracking pointer movement even if the cursor leaves the handle element. This prevents the drag from sticking or releasing unexpectedly."}),e.jsx(S,{type:"tip",children:"For a two-panel split that resizes left/right or top/bottom, use SplitPanelView instead. ResizablePanelView is for a single panel with a user-adjustable bottom edge — for example a request body editor that the user can make taller."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ResizablePanelView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ResizablePanelView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function q9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Horizontal and vertical split directions",color:"var(--color-primary)"},{label:"Uncontrolled (defaultSplit) mode",color:"var(--color-success)"},{label:"Controlled (split) mode with onResize callback",color:"var(--color-info)"},{label:"Animated pill handle (grows on hover/drag)",color:"var(--color-warning)"},{label:"Double-click to reset to defaultSplit",color:"#a855f7"},{label:"Click-without-drag fires onHandleClick",color:"#ec4899"},{label:"Smooth transition when not dragging",color:"#14b8a6"},{label:"Min px constraints for each panel",color:"#f97316"},{label:"Hover tooltip (customizable or null to suppress)",color:"var(--color-primary)"},{label:"Pointer capture API",color:"var(--color-success)"},{label:"Custom accent color",color:"var(--color-info)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"first",type:"ReactNode",required:!0,description:"Content for the first (top or left) panel."},{name:"second",type:"ReactNode",required:!0,description:"Content for the second (bottom or right) panel."},{name:"direction",type:"SplitDirection",default:"'horizontal'",description:"Layout direction. 'horizontal' = left/right split. 'vertical' = top/bottom split."},{name:"defaultSplit",type:"number",default:"50",description:"Initial split percentage (0–100) for the first panel. Also the reset target on double-click."},{name:"split",type:"number",description:"Controlled split value (0–100). When provided, overrides internal state. Wire with onResize."},{name:"minFirst",type:"number",default:"80",description:"Minimum pixel size for the first panel."},{name:"minSecond",type:"number",default:"80",description:"Minimum pixel size for the second panel."},{name:"accentColor",type:"string",description:"Color of the drag-handle pill when active (hovered or dragging)."},{name:"onResize",type:"(split: number) => void",description:"Fired on every drag move and on double-click reset. Provides the current split percentage."},{name:"onResizeEnd",type:"(split: number) => void",description:"Fired once when the pointer is released (drag end) or on double-click reset."},{name:"onHandleClick",type:"() => void",description:"Fired when the handle is clicked without dragging. Use to implement collapse/expand."},{name:"pillTooltip",type:"ReactNode | null",description:"Tooltip content shown on pill hover. Defaults to keyboard hint. Pass null to suppress."},{name:"style",type:"CSSProperties",description:"Inline styles for the root container div."},{name:"className",type:"string",description:"Additional class names for the root container div."}]})}),e.jsx(_,{title:"SplitDirection enum",children:e.jsx(xe,{name:"SplitDirection",values:[{value:"horizontal",description:"Left panel | Right panel (col-resize cursor)",color:"var(--color-primary)"},{value:"vertical",description:"Top panel / Bottom panel (row-resize cursor)",color:"var(--color-info)"}]})}),e.jsx(S,{type:"info",children:"The animated pill handle grows from 44px to 80px (in the non-split axis) on hover or drag. It uses a CSS transition on the relevant dimension (height for horizontal, width for vertical)."}),e.jsx(S,{type:"tip",children:"To implement a collapsible sidebar: wire onHandleClick to toggle a collapsed state, and drive the split prop to 0 when collapsed and the user's last value when expanded. Use onResizeEnd to persist the last user-set split."}),e.jsx(S,{type:"warning",children:"When using controlled mode (split prop), always also wire onResize — otherwise the panel will not respond to drag input because internal state is overridden by the prop on every render."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"SplitPanelView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["SplitPanelView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function K9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Dashed accent border",color:"var(--color-primary)"},{label:"Optional title header",color:"var(--color-success)"},{label:"Expandable / collapsible mode",color:"var(--color-info)"},{label:"defaultExpanded state",color:"var(--color-warning)"},{label:"Chevron toggle icon",color:"#a855f7"},{label:"Custom accent color",color:"#ec4899"},{label:"Tinted header background (5% accent)",color:"#14b8a6"},{label:"Children slot",color:"#f97316"}]})}),e.jsx(_,{title:"Overview",description:"DottedCardView is a decorative container with a dashed border at a translucent accent color. It optionally shows a title bar and can be made collapsible. Commonly used for optional/advanced settings sections, embedded notes, and placeholder content areas.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"children",type:"ReactNode",required:!0,description:"Content rendered inside the card body (padded at 12px on all sides)."},{name:"title",type:"string",description:"When provided, renders a header bar with the title text in the accent color."},{name:"expandable",type:"boolean",default:"false",description:"When true, clicking the header toggles the body visibility. A chevron icon is shown in the header."},{name:"defaultExpanded",type:"boolean",default:"true",description:"Initial expanded/collapsed state when expandable=true."},{name:"accentColor",type:"string",description:"Color for the dashed border, header background, title text, and chevron. Defaults to var(--color-primary)."},{name:"className",type:"string",description:"Additional class names for the outer container div."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer container div."}]})}),e.jsx(S,{type:"info",children:"The dashed border uses color-mix(in srgb, accent 30%, transparent) so it stays visible but subtle. The header background uses a lighter 5% tint. The dashed body divider uses a 20% tint."}),e.jsx(S,{type:"tip",children:"When expandable=false (default), the chevron is not rendered even if a title is provided. The title bar is purely decorative in non-expandable mode."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"DottedCardView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["DottedCardView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function $9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Per-token color",color:"var(--color-primary)"},{label:"Bold, italic, underline, monospace per token",color:"var(--color-success)"},{label:"Click-to-copy per token",color:"var(--color-info)"},{label:"Hover tooltip on copyable tokens",color:"var(--color-warning)"},{label:"configurable fontSize + lineHeight",color:"#a855f7"},{label:"parseXmlTokens helper (XML syntax highlighting)",color:"#ec4899"},{label:"Inline span-based rendering (no block wrapping)",color:"#14b8a6"}]})}),e.jsx(_,{title:"Overview",description:"ColoredTextView renders an array of ColorToken objects as adjacent inline spans. Each token can have its own color, font weight, style, family, underline, and click-to-copy behaviour. It is ideal for syntax-highlighted inline text, status messages with mixed colors, and labeled values.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tokens",type:"ColorToken[]",required:!0,description:"Array of token objects. Each is rendered as an inline span."},{name:"fontSize",type:"string",default:"'12px'",description:"Font size applied to the outer span (inherited by all tokens)."},{name:"lineHeight",type:"number",default:"1.6",description:"Line height applied to the outer span."},{name:"className",type:"string",description:"Additional class names for the outer span element."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer span element."}]})}),e.jsx(_,{title:"ColorToken shape",children:e.jsx(M,{props:[{name:"text",type:"string",required:!0,description:"The string content of this token."},{name:"color",type:"string",description:"CSS color or variable. Defaults to var(--color-text-primary) when omitted."},{name:"bold",type:"boolean",description:"When true, fontWeight: 700."},{name:"italic",type:"boolean",description:"When true, fontStyle: italic."},{name:"mono",type:"boolean",description:"When true, fontFamily: monospace."},{name:"underline",type:"boolean",description:"When true, textDecoration: underline."},{name:"copyable",type:"boolean",description:"When true, clicking the span copies token.text to clipboard via navigator.clipboard.writeText. Shows a 'Click to copy: ...' browser tooltip."}]})}),e.jsxs(_,{title:"parseXmlTokens helper",children:[e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",lineHeight:1.6,marginBottom:8},children:["The exported ",e.jsx("code",{style:{fontFamily:"monospace",color:"var(--color-primary)"},children:"parseXmlTokens(xml: string)"})," function parses an XML/HTML string into a ColorToken array with syntax highlighting colors:"]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[{part:"Tag brackets (<, >, />",color:"var(--color-text-muted)"},{part:"Tag names (e.g. soap:Envelope)",color:"var(--color-protocol-soap)"},{part:"Attribute names",color:"var(--color-info)"},{part:"Attribute values",color:"var(--color-success)"},{part:"Text nodes",color:"var(--color-text-primary)"}].map(t=>e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"center"},children:[e.jsx("span",{style:{width:8,height:8,borderRadius:"50%",background:t.color,flexShrink:0}}),e.jsx("span",{style:{fontSize:12,color:"var(--color-text-secondary)"},children:t.part})]},t.part))})]}),e.jsx(S,{type:"tip",children:"Use parseXmlTokens to render SOAP/XML envelopes with color-coded tags in a compact inline view. Pass the returned token array directly to ColoredTextView tokens prop."}),e.jsx(S,{type:"info",children:"All tokens render as inline spans — ColoredTextView itself is an inline span. Wrap it in a block element (div, p) if you need block layout. This keeps the component composition flexible."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ColoredTextView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ColoredTextView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function J9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Label + value + unit layout",color:"var(--color-primary)"},{label:"Trend indicator (up ↑ / down ↓ / neutral →)",color:"var(--color-success)"},{label:"Sub-value secondary text",color:"var(--color-info)"},{label:"Optional icon in header",color:"var(--color-warning)"},{label:"Custom accent color tints the card border and bg",color:"#a855f7"},{label:"Compact mode (reduced size + padding)",color:"#ec4899"},{label:"Theme tokens for bg, border, trend colors",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"label",type:"string",required:!0,description:'Uppercase label shown at the top of the card (e.g. "REQUESTS", "LATENCY").'},{name:"value",type:"string | number",required:!0,description:"Primary metric value shown prominently."},{name:"subValue",type:"string",description:"Secondary smaller text shown below the value row."},{name:"icon",type:"ReactNode",description:"Icon rendered in the top-right of the card at 70% opacity in the accent color."},{name:"unit",type:"string",description:'Unit label shown beside the value in muted smaller text (e.g. "ms", "req/s").'},{name:"trend",type:"StatsTrend",description:"Trend direction. 'up' = green ↑. 'down' = red ↓. 'neutral' = muted →."},{name:"trendValue",type:"string",description:'Trend magnitude text shown beside the trend arrow (e.g. "+12%"). Only rendered when trend is also set.'},{name:"accentColor",type:"string",description:"Overrides the value color and tints the card border and background. Defaults to var(--color-primary)."},{name:"compact",type:"boolean",default:"false",description:"Reduces padding (10px vs 14px) and value font size (18px vs 22px) for dense dashboards."},{name:"className",type:"string",description:"Additional class names for the card div."},{name:"style",type:"CSSProperties",description:"Inline styles for the card div."}]})}),e.jsx(_,{title:"StatsTrend enum",children:e.jsx(xe,{name:"StatsTrend",values:[{value:"up",description:"↑ arrow — var(--color-statscard-trend-up) (green)",color:"var(--color-success)"},{value:"down",description:"↓ arrow — var(--color-statscard-trend-down) (red)",color:"var(--color-error)"},{value:"neutral",description:"→ arrow — var(--color-text-muted)",color:"var(--color-text-muted)"}]})}),e.jsx(S,{type:"info",children:"When accentColor is set, the card renders with a tinted border (20% opacity) and a tinted background (8% mix into surface). When no accentColor is set, theme tokens var(--color-statscard-bg) and var(--color-statscard-border) are used instead."}),e.jsx(S,{type:"tip",children:'Combine trend and trendValue for change indicators: trend="up" trendValue="+5%" renders a green "↑ +5%" line below the value. trendValue is only displayed when trend is also provided.'}),e.jsx(_,{title:"DUI Sizing & Theming",description:"StatsCardView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["StatsCardView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function X9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Sortable columns (client-side)",color:"var(--color-primary)"},{label:"Expandable rows with custom renderer",color:"var(--color-success)"},{label:"Row click handler",color:"var(--color-info)"},{label:"Striped rows",color:"var(--color-warning)"},{label:"Custom cell renderer per column",color:"#a855f7"},{label:"Column alignment (left, center, right)",color:"#ec4899"},{label:"Custom column widths (CSS or 1fr)",color:"#14b8a6"},{label:"Empty state via EmptyStateView",color:"#f97316"},{label:"DuiProvider size context",color:"var(--color-primary)"},{label:"maxHeight with scroll overflow",color:"var(--color-success)"},{label:"Push mode for expand (expanded rows push siblings)",color:"var(--color-info)"},{label:"Generic type parameter T for row data",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"columns",type:"DataTableColumn<T>[]",required:!0,description:"Column definitions."},{name:"rows",type:"T[]",required:!0,description:"Data rows. T must extend Record<string, unknown>."},{name:"keyField",type:"string",default:"'id'",description:"The row property used as the React key and for expand/collapse state tracking."},{name:"onRowClick",type:"(row: T) => void",description:"Called when the user clicks a data row. Makes rows visually clickable (pointer cursor + hover highlight)."},{name:"renderExpanded",type:"(row: T) => ReactNode",description:"When provided, each row gets an expand chevron in the first column. Clicking it shows the returned node below that row."},{name:"emptyTitle",type:"string",default:"'No data'",description:"Title shown in the EmptyStateView when rows is empty."},{name:"emptyMessage",type:"string",description:"Description text shown in the EmptyStateView when rows is empty."},{name:"striped",type:"boolean",default:"false",description:"When true, alternates row backgrounds using var(--color-table-stripe)."},{name:"compact",type:"boolean",default:"false",description:"Forces sm-size row heights. Prefer size prop for token-aligned sizing."},{name:"size",type:"DuiSize",description:"Row height and font size. Falls back to DuiProvider context when omitted."},{name:"sortable",type:"boolean",description:"Reserved prop (currently client-side sort is configured per-column via column.sortable)."},{name:"maxHeight",type:"string",description:"CSS max-height for the table body scroll container (only active when renderExpanded is not set)."},{name:"className",type:"string",description:"Additional class names for the outer border container div."}]})}),e.jsx(_,{title:"DataTableColumn shape",children:e.jsx(M,{props:[{name:"key",type:"string",required:!0,description:"The row property key to read the cell value from."},{name:"label",type:"string",required:!0,description:"Header label text (rendered uppercase)."},{name:"width",type:"string | number",description:"CSS column width for the grid-template-columns. Defaults to '1fr'."},{name:"sortable",type:"boolean",description:"When true, clicking the column header sorts the table by this column. Clicking again reverses the sort order."},{name:"renderCell",type:"(row: T, value: unknown) => ReactNode",description:"Custom cell renderer. When omitted, String(value) is rendered with ellipsis overflow."},{name:"align",type:"'left' | 'center' | 'right'",description:"Text alignment of header and cells. Defaults to 'left'."}]})}),e.jsx(_,{title:"Sizes (row heights)",children:e.jsx(H,{sizes:[{size:"xs",height:"24px row",font:"10px",desc:"Dense"},{size:"sm",height:"28px row",font:"11px",desc:"Compact"},{size:"md",height:"32px row",font:"12px",desc:"Default"},{size:"lg",height:"36px row",font:"13px",desc:"Large"},{size:"xl",height:"40px row",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:'When renderExpanded is provided, the table operates in "push mode": expanded row content is rendered inline below the row, pushing siblings down. maxHeight scroll is disabled in push mode because the body grows naturally with the expanded rows.'}),e.jsx(S,{type:"tip",children:"Use the renderCell prop to render custom cell content such as status badges, action buttons, or ChipView components. The function receives both the full row object and the specific cell value."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"DataTableView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs(S,{type:"info",children:["DataTableView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function Y9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Syntax highlighting via highlight.js",color:"var(--color-primary)"},{label:"Auto language detection (highlightAuto)",color:"var(--color-success)"},{label:"Copy-to-clipboard button with feedback",color:"var(--color-info)"},{label:"Optional line numbers",color:"var(--color-warning)"},{label:"Configurable maxHeight + scroll overflow",color:"#a855f7"},{label:"Language label in header bar",color:"#ec4899"},{label:"Custom accent color for copy button hover",color:"#14b8a6"},{label:"11 pre-registered languages",color:"#f97316"}]})}),e.jsx(_,{title:"Supported languages",children:e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:6},children:["javascript (js, jsx)","typescript (ts, tsx)","json","xml (html)","css","bash (shell, sh)","yaml (yml)","python (py)"].map((t,n)=>{const r=["var(--color-primary)","var(--color-success)","var(--color-info)","var(--color-warning)","#a855f7","#ec4899","#14b8a6","#f97316"],o=r[n%r.length];return e.jsx("span",{style:{padding:"3px 10px",borderRadius:99,fontSize:11,fontWeight:600,background:`color-mix(in srgb, ${o} 14%, transparent)`,color:o,border:`1px solid color-mix(in srgb, ${o} 30%, transparent)`},children:t},t)})})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"code",type:"string",required:!0,description:"The source code string to display."},{name:"language",type:"string",description:'Language identifier for syntax highlighting (e.g. "json", "typescript"). When omitted, highlightAuto is used.'},{name:"showCopyButton",type:"boolean",default:"true",description:"When true, shows a Copy button in the top bar that copies the code to the clipboard."},{name:"showLineNumbers",type:"boolean",default:"false",description:"When true, renders line numbers to the left of each code line."},{name:"maxHeight",type:"string",default:"'300px'",description:"CSS max-height for the scrollable code area. The block scrolls vertically when content exceeds this height."},{name:"accentColor",type:"string",description:"Color used for the copy button success state and hover. Defaults to var(--color-primary)."},{name:"className",type:"string",description:"Additional class names for the outer container div."},{name:"style",type:"CSSProperties",description:"Inline styles for the outer container div (merged before overflow:hidden)."}]})}),e.jsx(S,{type:"info",children:"When showLineNumbers=true, each line is highlighted individually using hljs.highlight(line, { language }). When false (default), the entire code string is highlighted in one pass, which is faster for large files."}),e.jsx(S,{type:"tip",children:'The copy button shows a green "Copied" state with a check icon for 1500ms after a successful copy, then reverts. The success color is var(--color-success) regardless of accentColor.'}),e.jsx(S,{type:"warning",children:"When language is set but not registered with highlight.js, the component falls back to highlightAuto on that specific code string. Unknown language values are silently ignored."}),e.jsx(_,{title:"DUI Sizing & Theming",description:"CodeBlockView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["CodeBlockView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function Q9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"6 AI action presets",color:"var(--color-primary)"},{label:"Loading / thinking state with spinner",color:"var(--color-success)"},{label:"Sparkle icon at rest",color:"var(--color-info)"},{label:"Gradient-border hover effect (CSS class)",color:"var(--color-warning)"},{label:"Custom accent color",color:"#a855f7"},{label:"Compact shorthand (xs size)",color:"#ec4899"},{label:"DuiProvider size context",color:"#14b8a6"},{label:"DUI container props (width, borderRadius, color)",color:"#f97316"},{label:"Disabled state",color:"var(--color-primary)"},{label:"Custom label override",color:"var(--color-success)"}]})}),e.jsx(_,{title:"Overview",description:"AIButtonView is a specialized button for AI-triggered actions. It defaults to a themed gradient-border style with a SparkleIcon and auto-maps action keys to labels. During loading, the icon swaps to a spinner and the label reads 'Thinking…'. The accent defaults to var(--color-protocol-ai) — the DUI AI purple.",children:e.jsx(e.Fragment,{})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"action",type:"AIButtonAction",default:"'ask'",description:"Preset action type. Determines the default label if label prop is not set."},{name:"label",type:"string",description:'Override the auto-derived label from the action. When set, this text is always shown (except during loading, which shows "Thinking…").'},{name:"onClick",type:"() => void",description:"Click handler. Not called when disabled or loading."},{name:"loading",type:"boolean",default:"false",description:'When true, icon switches to a spinner and the label reads "Thinking…". Button is also disabled.'},{name:"disabled",type:"boolean",default:"false",description:"When true, the button is non-interactive at 50% opacity. Cursor changes to not-allowed."},{name:"size",type:"DuiSize",description:'Falls back to DuiProvider context when omitted. compact=true is shorthand for size="xs".'},{name:"compact",type:"boolean",default:"false",description:"Shorthand for size='xs' (20px height). Kept for backwards compatibility. Explicit size prop wins."},{name:"accentColor",type:"string",description:"Override the accent color. Affects text color, border color, and hover background. Defaults to var(--color-protocol-ai)."},{name:"className",type:"string",description:"Additional class names."},{name:"width",type:"DuiWidth",description:"Width override."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius override (defaults to 5px via resolveBorderRadius)."},{name:"color",type:"string",description:"Text color override. When set, overrides the default accentColor text."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style override."}]})}),e.jsx(_,{title:"AIButtonAction enum",children:e.jsx(xe,{name:"AIButtonAction",values:[{value:"generate",description:'Label: "Generate"',color:"var(--color-primary)"},{value:"fuzz",description:'Label: "Fuzz"',color:"var(--color-success)"},{value:"explain",description:'Label: "Explain"',color:"var(--color-info)"},{value:"fix",description:'Label: "Fix"',color:"var(--color-warning)"},{value:"ask",description:'Label: "Ask AI" (default)',color:"#a855f7"},{value:"suggest",description:'Label: "Suggest"',color:"#ec4899"}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xs",height:"20px",font:"10px",desc:"compact=true"},{size:"sm",height:"24px",font:"11px",desc:"Small"},{size:"md",height:"28px",font:"12px",desc:"Default"},{size:"lg",height:"32px",font:"13px",desc:"Large"},{size:"xl",height:"36px",font:"14px",desc:"XL"}]})}),e.jsx(S,{type:"info",children:"The hover/active styling is implemented via the .dui_ai-button CSS class in AIButtonView.css, using CSS custom properties --dui-aibtn-bg, --dui-aibtn-border-color, --dui-aibtn-hover-bg, and --dui-aibtn-hover-border. The inline style sets these vars so the CSS class can read them."}),e.jsx(S,{type:"tip",children:"When loading=true, both the disabled attribute and the not-allowed cursor are applied. The loading state does not add any timeout — caller is responsible for setting loading=false when the AI response arrives."}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"AIButtonView reads its dimensions from the shared button category base hook (useButtonBase). Omitting size, width, borderRadius, or color on AIButtonView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every button-category component at once.",children:[e.jsx(I,{features:[{label:"useButtonBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Width presets, resolved via the ",e.jsx("code",{children:"width"})," prop or the nearest ",e.jsx("code",{children:'<DuiProvider width="...">'}),":"]}),e.jsx(jt,{widths:[{width:"sm",value:"80px"},{width:"md",value:"120px"},{width:"default",value:"auto"},{width:"lg",value:"200px"},{width:"fullWidth",value:"100%"},{width:"maxContent",value:"max-content"},{width:"fw",value:"100%"},{width:"mx",value:"max-content"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["These values come from the Button category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every button-category component in the tree."]})]})]})}function Z9(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Collapsible sidebar",color:"var(--color-primary)"},{label:"Controlled + uncontrolled collapse",color:"var(--color-success)"},{label:"Group headers (uppercase, collapsible)",color:"var(--color-info)"},{label:"Badge + count per item",color:"var(--color-warning)"},{label:"Built-in search box",color:"#a855f7"},{label:"Empty state on no search results",color:"#ec4899"},{label:"Animated collapse (200ms)",color:"#14b8a6"},{label:"DuiProvider size inheritance",color:"#f97316"}]})}),e.jsx(_,{title:"SideNavItem",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for the nav item. Passed to onSelect callback."},{name:"label",type:"string",required:!0,description:"Display text shown in the nav item."},{name:"icon",type:"ReactNode",description:"Optional icon rendered left of the label."},{name:"badge",type:"number | string",description:'Accent-colored pill badge shown right of label (e.g. "New", 3).'},{name:"count",type:"number",description:"Plain muted count shown right of a group header label."},{name:"isGroup",type:"boolean",description:"When true, renders as uppercase section header — non-selectable and collapsible."},{name:"children",type:"SideNavItem[]",description:"Child items nested under a group header."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"items",type:"SideNavItem[]",required:!0,description:"Full nav item tree. Groups can contain children."},{name:"activeId",type:"string",description:"ID of the currently selected item. Highlighted with accent color."},{name:"onSelect",type:"(id: string) => void",description:"Called when a leaf nav item is clicked."},{name:"collapsible",type:"boolean",default:"true",description:"Show/hide the collapse toggle button at the bottom."},{name:"defaultCollapsed",type:"boolean",default:"false",description:"Initial collapsed state (uncontrolled mode)."},{name:"collapsed",type:"boolean",description:"Controlled collapsed state. When provided, overrides internal state."},{name:"onCollapsedChange",type:"(collapsed: boolean) => void",description:"Called when collapse state changes (controlled mode)."},{name:"defaultOpenIds",type:"string[]",description:"IDs of groups open by default. Defaults to all groups open."},{name:"width",type:"number",default:"200",description:"Width in px when expanded."},{name:"collapsedWidth",type:"number",default:"44",description:"Width in px when collapsed (icon-only mode)."},{name:"accentColor",type:"string",description:"Accent color for active item highlight and badges."},{name:"searchable",type:"boolean",default:"false",description:"Show a search input above nav items."},{name:"searchPlaceholder",type:"string",default:"'Search…'",description:"Placeholder text for the search box."},{name:"emptyText",type:"string",default:"'No results'",description:"Message shown when no items match the search query."},{name:"size",type:"DuiSize",description:"Size token. Falls back to DuiProvider context when omitted."},{name:"className",type:"string",description:"Extra CSS class applied to the root element."},{name:"style",type:"CSSProperties",description:"Inline styles applied to the root element."}]})}),e.jsxs(_,{title:"Collapse Behavior",children:[e.jsxs(S,{type:"info",children:["When collapsed, leaf items render as icon-only squares. Groups collapse their children directly, with no header shown. The collapse toggle button only appears in uncontrolled mode (when the ",e.jsx("code",{children:"collapsed"})," prop is not provided)."]}),e.jsxs(S,{type:"tip",children:["Pass ",e.jsx("code",{children:"collapsed"})," + ",e.jsx("code",{children:"onCollapsedChange"})," together for controlled mode. Use ",e.jsx("code",{children:"defaultCollapsed"})," alone for uncontrolled mode."]})]}),e.jsx(_,{title:"Exported Helpers",children:e.jsx(M,{props:[{name:"countLeaves(items)",type:"number",description:"Recursively counts all non-group items in the tree."},{name:"filterItems(items, q)",type:"SideNavItem[]",description:"Filters items by label substring match, preserving group structure."}]})}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SideNavView reads its dimensions from the shared nav category base hook (useNavBase). Omitting size, borderRadius, or color on SideNavView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every nav-category component at once.",children:[e.jsx(I,{features:[{label:"useNavBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"20px",font:"8px",desc:"padX 16px"},{size:"xs",height:"24px",font:"9px",desc:"padX 16px"},{size:"sm",height:"28px",font:"10px",desc:"padX 8px"},{size:"md",height:"32px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"44px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"52px",font:"14px",desc:"padX 16px"},{size:"xxxl",height:"60px",font:"16px",desc:"padX 16px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Nav category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every nav-category component in the tree."]})]})]})}function e7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Grouped settings navigation",color:"var(--color-primary)"},{label:"Optional group titles",color:"var(--color-success)"},{label:"Item description line",color:"var(--color-info)"},{label:"Icon support per item",color:"var(--color-warning)"},{label:"Badge chips per item",color:"#a855f7"},{label:"DUI size + radius + font tokens",color:"#ec4899"},{label:"Active + inactive color overrides",color:"#14b8a6"},{label:"DuiProvider context fallback",color:"#f97316"}]})}),e.jsx(_,{title:"SettingsNavItem",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier. Passed to onSelect callback when clicked."},{name:"label",type:"string",required:!0,description:"Primary label text for the item."},{name:"description",type:"string",description:"Optional secondary line shown below the label in muted style."},{name:"icon",type:"ReactNode",description:"Optional icon rendered left of the label. Tinted with accent when active."},{name:"badge",type:"string",description:"Accent-tinted pill badge rendered on the right side of the item."}]})}),e.jsx(_,{title:"SettingsNavGroup",children:e.jsx(M,{props:[{name:"title",type:"string",description:"Optional uppercase group label shown above the items."},{name:"items",type:"SettingsNavItem[]",required:!0,description:"List of items in this group."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"groups",type:"SettingsNavGroup[]",required:!0,description:"Array of groups, each containing a title and list of items."},{name:"activeId",type:"string",description:"ID of the currently selected item."},{name:"onSelect",type:"(id: string) => void",description:"Called when any item is clicked."},{name:"accentColor",type:"string",description:"Accent color for active item text, icon, and badge. Falls back to DuiProvider activeColor."},{name:"size",type:"DuiSize",description:"Controls item height and font size. Falls back to DuiProvider size."},{name:"borderRadius",type:"DuiRadius | number",description:"Border radius for items. Accepts preset name or raw px number."},{name:"color",type:"string",description:"Text color for inactive items. Falls back to DuiProvider color."},{name:"activeColor",type:"string",description:"Color for active item text and icon (alias for accentColor)."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style applied to item text ('normal' | 'italic')."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"Usage note",children:e.jsx(S,{type:"tip",children:"SettingsNavView differs from SideNavView in that it is designed for dense settings panels, not sidebars. It has no collapse toggle or search box. Use it for app settings screens with multiple named sections."})}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SettingsNavView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs("div",{style:{fontSize:12,color:"var(--color-text-secondary)",marginTop:4,marginBottom:8},children:["Border radius presets, resolved via the ",e.jsx("code",{children:"borderRadius"})," prop:"]}),e.jsx(Xe,{radii:[{radius:"none",value:"0px"},{radius:"sm",value:"3px"},{radius:"md",value:"4px"},{radius:"lg",value:"6px"},{radius:"full",value:"full"}]}),e.jsxs(S,{type:"info",children:["SettingsNavView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function t7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Visual theme card grid",color:"var(--color-primary)"},{label:"Mini color swatch preview",color:"var(--color-success)"},{label:"Selected state with checkmark badge",color:"var(--color-info)"},{label:"Optional description per card",color:"var(--color-warning)"},{label:"Accent border on selection",color:"#a855f7"},{label:"Wrapping flex layout",color:"#ec4899"}]})}),e.jsx(_,{title:"ThemeOption",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Unique value identifier for this theme option."},{name:"label",type:"string",required:!0,description:"Display name shown below the swatch."},{name:"description",type:"string",description:"Optional short description shown in muted text below the label."},{name:"preview",type:"{ bg, panel, accent, text }",description:"Optional color preview swatch. Each field is a CSS color string. Renders a mini stripped UI inside the card."}]})}),e.jsx(_,{title:"Preview swatch shape",children:e.jsx(M,{props:[{name:"bg",type:"string",required:!0,description:"Background color of the swatch container."},{name:"panel",type:"string",required:!0,description:"Panel bar color (top strip in the swatch)."},{name:"accent",type:"string",required:!0,description:"Accent color strip (represents primary button/highlight)."},{name:"text",type:"string",required:!0,description:"Text color strip (shown as a semi-transparent bar)."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"options",type:"ThemeOption[]",required:!0,description:"Array of theme options to display as cards."},{name:"value",type:"string",required:!0,description:"Currently selected theme value. Highlights the matching card."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called when the user clicks a card."},{name:"className",type:"string",description:"Extra CSS class applied to the flex container."}]})}),e.jsxs(_,{title:"Card dimensions",children:[e.jsx(S,{type:"info",children:"Each card is fixed at 110px wide. The swatch preview area is 48px tall. Cards wrap automatically when the container is narrower than the total width of all cards."}),e.jsxs(S,{type:"tip",children:["The selected card shows a ",e.jsx("code",{children:"var(--color-primary)"})," border and a circular checkmark badge. The label turns primary-colored and gains font-weight 600."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ThemeCardSelectorView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ThemeCardSelectorView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function n7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Collapsible feature category",color:"var(--color-primary)"},{label:"Smooth height animation (220ms)",color:"var(--color-success)"},{label:"Category-level toggle switch",color:"var(--color-info)"},{label:"Per-feature toggle switches",color:"var(--color-warning)"},{label:"Enabled/total count badge",color:"#a855f7"},{label:"Accent color chip per category",color:"#ec4899"},{label:"Per-feature optional description",color:"#14b8a6"},{label:"No flash on initial render",color:"#f97316"}]})}),e.jsx(_,{title:"FeatureItem",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for this feature item."},{name:"label",type:"string",required:!0,description:"Feature name displayed in the row."},{name:"description",type:"string",description:"Optional sub-label shown below the feature name in muted text."},{name:"enabled",type:"boolean",required:!0,description:"Current toggle state of this feature."},{name:"onToggle",type:"(enabled: boolean) => void",required:!0,description:"Called when the feature toggle switch is clicked."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"categoryLabel",type:"string",required:!0,description:"Category name shown as a colored chip in the header."},{name:"categoryColor",type:"string",description:"Accent color for the chip, header background tint, and toggles. Defaults to var(--color-primary)."},{name:"features",type:"FeatureItem[]",required:!0,description:"List of feature items to display."},{name:"defaultExpanded",type:"boolean",default:"false",description:"Whether the category starts expanded."},{name:"categoryEnabled",type:"boolean",description:"Controlled state for the optional category-level toggle switch."},{name:"onCategoryToggle",type:"(enabled: boolean) => void",description:"When provided, shows a toggle switch in the header to enable/disable the entire category."},{name:"className",type:"string",description:"Extra CSS class on the root element."},{name:"style",type:"CSSProperties",description:"Inline styles on the root element."}]})}),e.jsxs(_,{title:"Animation details",children:[e.jsx(S,{type:"info",children:"The body uses a two-phase height animation to avoid FOUC on mount. On initial render, no transition is applied. On subsequent toggles, height animates from the current px value to 0 (collapse) or scrollHeight then auto (expand)."}),e.jsxs(S,{type:"tip",children:["The enabled count badge (",e.jsx("code",{children:"2/5"}),") is always shown in the header, even when collapsed, so users can see the current state at a glance."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"FeatureCategoryView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["FeatureCategoryView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function r7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Pill-style tag chips",color:"var(--color-primary)"},{label:"Enter or comma to add",color:"var(--color-success)"},{label:"Backspace removes last tag",color:"var(--color-info)"},{label:"Add on blur",color:"var(--color-warning)"},{label:"Duplicate prevention",color:"#a855f7"},{label:"maxTags limit",color:"#ec4899"},{label:"Disabled state",color:"#14b8a6"},{label:"Custom accent color",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tags",type:"string[]",required:!0,description:"Controlled array of current tag values."},{name:"onChange",type:"(tags: string[]) => void",required:!0,description:"Called with the updated tag array whenever a tag is added or removed."},{name:"placeholder",type:"string",default:"'Add tag…'",description:"Placeholder shown in the input when no tags exist."},{name:"accentColor",type:"string",description:"Custom color for tag chips. Defaults to var(--color-tag-bg) / var(--color-tag-text) theme variables."},{name:"maxTags",type:"number",description:"Maximum number of tags allowed. Input is hidden once the limit is reached."},{name:"disabled",type:"boolean",default:"false",description:"Disables adding and removing tags. Reduces opacity to 0.6."},{name:"className",type:"string",description:"Extra CSS class applied to the container."}]})}),e.jsx(_,{title:"Keyboard interactions",children:e.jsx(M,{props:[{name:"Enter",type:"key",description:"Confirms the current input text as a new tag."},{name:"Comma (,)",type:"key",description:"Also confirms the current input as a new tag."},{name:"Backspace",type:"key",description:"When the input is empty, removes the last tag in the list."},{name:"Blur",type:"event",description:"Automatically adds the current input text as a tag if non-empty."}]})}),e.jsxs(_,{title:"Notes",children:[e.jsx(S,{type:"info",children:"Duplicate tags are silently rejected — adding a tag value that already exists in the array does nothing."}),e.jsxs(S,{type:"tip",children:["When ",e.jsx("code",{children:"accentColor"})," is set, both the chip background and border are derived from that color using ",e.jsx("code",{children:"color-mix"})," at 15% and 25% opacity respectively."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"TagInputView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["TagInputView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function o7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Multi-tab bottom panel",color:"var(--color-primary)"},{label:"Drag-to-resize handle",color:"var(--color-success)"},{label:"Collapse / expand toggle",color:"var(--color-info)"},{label:"Tab icons support",color:"var(--color-warning)"},{label:"Configurable min/max height",color:"#a855f7"},{label:"Clicking tab auto-expands",color:"#ec4899"},{label:"Accent color per panel",color:"#14b8a6"}]})}),e.jsx(_,{title:"BottomPanelTab",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique tab identifier."},{name:"label",type:"string",required:!0,description:"Tab label text."},{name:"icon",type:"ReactNode",description:"Optional icon rendered left of the label."},{name:"content",type:"ReactNode",required:!0,description:"Content rendered in the panel body when this tab is active."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"tabs",type:"BottomPanelTab[]",required:!0,description:"Array of tabs. The first tab is active on mount."},{name:"defaultHeight",type:"number",default:"200",description:"Initial panel height in px."},{name:"minHeight",type:"number",default:"80",description:"Minimum panel height when dragging to resize."},{name:"maxHeight",type:"number",default:"600",description:"Maximum panel height when dragging to resize."},{name:"defaultCollapsed",type:"boolean",default:"false",description:"Whether the panel starts collapsed."},{name:"accentColor",type:"string",description:"Color for the active tab indicator underline and text."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsxs(_,{title:"Resize behavior",children:[e.jsxs(S,{type:"info",children:["The drag handle is a 4px strip at the top of the panel. Dragging upward increases height; dragging downward decreases it. Height is clamped between ",e.jsx("code",{children:"minHeight"})," and ",e.jsx("code",{children:"maxHeight"}),". Text selection is disabled during drag."]}),e.jsx(S,{type:"tip",children:"Clicking a tab while the panel is collapsed automatically expands it. The collapse toggle button in the tab bar always stays accessible."})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"BottomPanelView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["BottomPanelView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function i7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Portal-rendered (document.body)",color:"var(--color-primary)"},{label:"Four variants: success/error/warning/info",color:"var(--color-success)"},{label:"Auto-dismiss with configurable duration",color:"var(--color-info)"},{label:"Manual dismiss via X button",color:"var(--color-warning)"},{label:"6 position presets",color:"#a855f7"},{label:"Fade-in-up animation",color:"#ec4899"},{label:"useToast() imperative hook",color:"#14b8a6"},{label:"Optional message sub-line",color:"#f97316"}]})}),e.jsx(_,{title:"Toast interface",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique identifier for this toast instance."},{name:"variant",type:"ToastVariant",required:!0,description:"One of 'success' | 'error' | 'warning' | 'info'."},{name:"title",type:"string",required:!0,description:"Primary bold title text."},{name:"message",type:"string",description:"Optional secondary description line."},{name:"duration",type:"number",default:"4000",description:"Auto-dismiss delay in ms. Set to 0 to disable auto-dismiss."}]})}),e.jsx(_,{title:"ToastView Props",children:e.jsx(M,{props:[{name:"toasts",type:"Toast[]",required:!0,description:"Array of active toasts to display."},{name:"onDismiss",type:"(id: string) => void",required:!0,description:"Called when a toast is dismissed (auto or manual)."},{name:"position",type:"ToastPosition",default:"'bottom-right'",description:"Where to anchor the toast stack on screen."}]})}),e.jsx(_,{title:"Position values",children:e.jsx(xe,{name:"position",values:[{value:"top-right",description:"Top-right corner",color:"var(--color-primary)"},{value:"top-left",description:"Top-left corner",color:"var(--color-success)"},{value:"bottom-right",description:"Bottom-right (default)",color:"var(--color-info)"},{value:"bottom-left",description:"Bottom-left corner",color:"var(--color-warning)"},{value:"top-center",description:"Top center (translateX)",color:"#a855f7"},{value:"bottom-center",description:"Bottom center (translateX)",color:"#ec4899"}]})}),e.jsx(_,{title:"ToastVariant colors",children:e.jsx(xe,{name:"ToastVariant",values:[{value:"success",description:"Green — CheckCircleIcon",color:"var(--color-success)"},{value:"error",description:"Red — CloseCircleIcon",color:"var(--color-error)"},{value:"warning",description:"Amber — WarningTriangleIcon",color:"var(--color-warning)"},{value:"info",description:"Blue — InfoCircleIcon",color:"var(--color-info)"}]})}),e.jsxs(_,{title:"useToast hook",children:[e.jsxs(S,{type:"info",children:["The ",e.jsx("code",{children:"useToast()"})," hook provides an imperative API: ",e.jsx("code",{children:"toast(variant, title, message?, duration?)"})," to add a toast and ",e.jsx("code",{children:"dismiss(id)"})," to remove one. Use ",e.jsx("code",{children:"subscribe(fn)"})," to sync the toast array into local state."]}),e.jsxs(S,{type:"tip",children:["The hook stores toasts in a ref (not React state) so calls from outside React components work without re-renders. Subscribe in a ",e.jsx("code",{children:"useEffect"})," to drive the ",e.jsx("code",{children:"ToastView"}),"."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ToastView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ToastView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function a7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Initials avatar auto-generated",color:"var(--color-primary)"},{label:"Hover action buttons (Use/Copy/Edit/Delete)",color:"var(--color-success)"},{label:"Protocol chip with color",color:"var(--color-info)"},{label:"CUSTOM badge for user prompts",color:"var(--color-warning)"},{label:"Selected state with accent tint",color:"#a855f7"},{label:"Copy-to-clipboard with checkmark feedback",color:"#ec4899"},{label:"Fine-grained color overrides via colors prop",color:"#14b8a6"},{label:"Description preview in muted text",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique prompt identifier. Passed to all action callbacks."},{name:"title",type:"string",required:!0,description:"Prompt title. First two words are used to generate the avatar initials."},{name:"content",type:"string",required:!0,description:"Full prompt content. Shown as preview text if description is absent."},{name:"description",type:"string",description:"Short description shown below the title. Overrides content as preview text."},{name:"protocol",type:"string",description:'Protocol label (e.g. "REST", "GraphQL"). Shown as a chip on the right.'},{name:"protocolColor",type:"string",description:"CSS color for the protocol chip."},{name:"isCustom",type:"boolean",default:"false",description:"When true, shows a muted CUSTOM badge next to the title."},{name:"selected",type:"boolean",default:"false",description:"Highlights the card with accent tint background."},{name:"accentColor",type:"string",description:"Accent color used for the avatar background and selected tint."},{name:"onUse",type:"(id: string) => void",description:"Shows a SparkleIcon action button on hover."},{name:"onCopy",type:"(id: string) => void",description:"Shows a CopyIcon action button on hover. Transitions to CheckIcon for 1.5s."},{name:"onEdit",type:"(id: string) => void",description:"Shows a RenameIcon action button on hover."},{name:"onDelete",type:"(id: string) => void",description:"Shows a TrashIcon action button on hover (danger-colored)."},{name:"onClick",type:"(id: string) => void",description:"Called when the card itself is clicked."},{name:"colors",type:"PromptCardColors",description:"Fine-grained color overrides for every part of the card."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"colors overrides",children:e.jsx(M,{props:[{name:"colors.avatarBg",type:"string",description:"Avatar background color."},{name:"colors.avatarText",type:"string",description:"Avatar initials/icon color."},{name:"colors.titleText",type:"string",description:"Title text color."},{name:"colors.bodyText",type:"string",description:"Description / content preview color."},{name:"colors.customBadgeBg",type:"string",description:"CUSTOM chip background color."},{name:"colors.customBadgeText",type:"string",description:"CUSTOM chip text color."},{name:"colors.chipColor",type:"string",description:"Protocol chip color override."},{name:"colors.actionIconColor",type:"string",description:"Default action icon color."},{name:"colors.actionDeleteColor",type:"string",description:"Delete action icon color (default: var(--color-error))."},{name:"colors.rowBg",type:"string",description:"Card background."},{name:"colors.rowBgHover",type:"string",description:"Card hover background."},{name:"colors.rowBgSelected",type:"string",description:"Card selected background."}]})}),e.jsx(_,{title:"Notes",children:e.jsx(S,{type:"tip",children:"Action buttons only appear on hover. They render in order: Use → Copy → Edit → Delete. Omit any callback to hide that action button."})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"PromptCardView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["PromptCardView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function s7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsxs(S,{type:"info",children:["PromptLibraryView consists of two cooperating components: ",e.jsx("strong",{children:"PromptLibraryListView"})," (the searchable tree sidebar) and ",e.jsx("strong",{children:"PromptLibraryEditorView"})," (the detail panel with preview/edit modes). Use them side-by-side in a split layout."]})}),e.jsx(_,{title:"Features — PromptLibraryListView",children:e.jsx(I,{features:[{label:"Three-level tree: Sections → Categories → Items",color:"var(--color-primary)"},{label:"Built-in search with live filtering",color:"var(--color-success)"},{label:"Total count badge in search bar",color:"var(--color-info)"},{label:"Collapsible sections and categories",color:"var(--color-warning)"},{label:"PromptCardView rows with hover actions",color:"#a855f7"},{label:"isCustom + isModified flags per item",color:"#ec4899"}]})}),e.jsx(_,{title:"Features — PromptLibraryEditorView",children:e.jsx(I,{features:[{label:"Preview mode: variable pills highlighted",color:"var(--color-primary)"},{label:"Edit mode: syntax-highlighted textarea",color:"var(--color-success)"},{label:"Variable insertion chips",color:"var(--color-info)"},{label:"Tab bar with optional icons",color:"var(--color-warning)"},{label:"isDirty / unsaved indicator",color:"#a855f7"},{label:"Save button (active when dirty)",color:"#ec4899"},{label:"Trigger breadcrumb label",color:"#14b8a6"},{label:"Avatar with initials",color:"#f97316"}]})}),e.jsx(_,{title:"PromptLibraryListView Props",children:e.jsx(M,{props:[{name:"sections",type:"PromptLibrarySection[]",required:!0,description:"Top-level sections, each with an id, title, and array of categories."},{name:"activeId",type:"string",description:"ID of the currently selected prompt."},{name:"onSelect",type:"(id: string) => void",description:"Called when a prompt card is clicked."},{name:"search",type:"string",default:"''",description:"Controlled search query string."},{name:"onSearchChange",type:"(v: string) => void",description:"Called when the user types in the search box."},{name:"accentColor",type:"string",description:"Accent color for badges and section count chips."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"PromptLibraryEditorView Props",children:e.jsx(M,{props:[{name:"title",type:"string",required:!0,description:"Prompt title shown in the header. Used for initials generation."},{name:"content",type:"string",required:!0,description:"Full prompt text — shown in preview or editable in edit mode."},{name:"onContentChange",type:"(content: string) => void",description:"Called when the user edits the prompt text."},{name:"description",type:"string",description:"Optional description shown below the title."},{name:"triggerLabel",type:"string",description:"Breadcrumb label shown in italic below the description (e.g. the trigger phrase)."},{name:"avatarColor",type:"string",description:"Background color of the avatar circle."},{name:"isCustom",type:"boolean",default:"false",description:"Shows a CUSTOM badge."},{name:"isDirty",type:"boolean",default:"false",description:'When true, shows an "unsaved" indicator and activates the Save button.'},{name:"variables",type:"PromptLibraryVariable[]",description:"Variable chips shown above the editor. Clicking inserts the variable text."},{name:"tabs",type:"PromptLibraryEditorTab[]",description:"Tab bar tabs shown above the content area."},{name:"activeTabId",type:"string",description:"Controlled active tab ID."},{name:"onTabChange",type:"(id: string) => void",description:"Called when the user switches tabs."},{name:"viewMode",type:"'preview' | 'edit'",default:"'preview'",description:"Controlled view mode. Can also be uncontrolled."},{name:"onViewModeChange",type:"(mode) => void",description:"Called when user toggles preview/edit. If omitted, component is uncontrolled."},{name:"onSave",type:"() => void",description:"Called when Save button is clicked. Renders the button only when provided."},{name:"onVariableInsert",type:"(insert: string) => void",description:"Called when a variable chip is clicked."},{name:"accentColor",type:"string",description:"Accent color for tabs, toggles, and save button."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"Variable syntax",children:e.jsxs(S,{type:"info",children:["Variables are detected by the regex ",e.jsx("code",{children:"{{varName}}"})," or ",e.jsx("code",{children:"{varName}"}),". In preview mode they render as colored inline pills. In edit mode the textarea uses a backdrop overlay to highlight them without breaking cursor position."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"PromptLibraryListView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["PromptLibraryListView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function l7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsx(S,{type:"info",children:"StageView provides three indicator components for showing multi-step process status. All three share the same base props and can be used inline or stacked in a progress list."})}),e.jsx(_,{title:"Variants",children:e.jsx(Od,{variants:[{label:"StageCheck",description:"Completed — green ring with a checkmark",color:"var(--color-success)"},{label:"StageSpin",description:"In-progress — rotating spinner ring",color:"var(--color-info)"},{label:"StagePulse",description:"Pending — pulsing dot (draws attention)",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"SVG-drawn indicators (no external deps)",color:"var(--color-primary)"},{label:"CSS keyframe animations",color:"var(--color-success)"},{label:"Configurable size",color:"var(--color-info)"},{label:"Label + sublabel text",color:"var(--color-warning)"},{label:"Accent color override",color:"#a855f7"},{label:"Theme CSS var defaults",color:"#ec4899"}]})}),e.jsx(_,{title:"Shared Base Props (StageViewBaseProps)",children:e.jsx(M,{props:[{name:"label",type:"string",description:"Primary label text shown to the right of the indicator."},{name:"sublabel",type:"string",description:"Secondary description shown below the label in muted text."},{name:"color",type:"string",description:"Override accent color for the indicator ring/dot. Defaults to the component-specific CSS var."},{name:"size",type:"number",default:"20",description:"Ring/icon diameter in px. Stroke width auto-adjusts at 16px and below."},{name:"textSize",type:"number",default:"12",description:"Font size in px for the label text."},{name:"className",type:"string",description:"Extra CSS class on the root flex container."}]})}),e.jsx(_,{title:"Default CSS variable colors",children:e.jsx(M,{props:[{name:"StageCheck",type:"var(--color-stage-check)",description:"Usually green — completed state."},{name:"StageSpin",type:"var(--color-stage-spin)",description:"Usually blue — active/in-progress state."},{name:"StagePulse",type:"var(--color-stage-pulse)",description:"Usually amber/orange — pending state."}]})}),e.jsx(_,{title:"Animation details",children:e.jsxs(S,{type:"info",children:[e.jsx("strong",{children:"StageSpin"})," uses a 0.9s linear CSS keyframe rotation applied to an SVG circle with a 270° dasharray. ",e.jsx("strong",{children:"StagePulse"})," uses a 1.6s ease-out keyframe that simultaneously pulses an outer ring (opacity/scale) and an inner dot (scale). Both animations are defined in ",e.jsx("code",{children:"StageView.css"}),"."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"StageView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["StageView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function c7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",description:"All DUI icons live in a single file. The gallery panel IS the documentation — browse it to find icons.",children:e.jsx(I,{features:[{label:"Single source file",color:"var(--color-primary)"},{label:"Named <Name>Icon convention",color:"var(--color-success)"},{label:"size prop (default 14)",color:"var(--color-info)"},{label:"style prop for color overrides",color:"var(--color-warning)"},{label:"Inline SVG components",color:"#a855f7"},{label:"strokeWidth built-in (2)",color:"#ec4899"},{label:"currentColor for theming",color:"#14b8a6"}]})}),e.jsx(_,{title:"Source location",children:e.jsxs(S,{type:"info",children:["All icons are defined in ",e.jsx(xt,{children:"src/icons/daakia-icons.tsx"}),". This is the ONLY file in the DUI project that contains inline SVG elements. Do not write SVG anywhere else."]})}),e.jsx(_,{title:"Icon API",children:e.jsxs(S,{type:"tip",children:["Every icon component accepts these props:",e.jsx("br",{}),"• ",e.jsx("code",{children:"size?: number"})," — sets both width and height (default: 14)",e.jsx("br",{}),"• ",e.jsx("code",{children:"style?: CSSProperties"})," — inline styles (use to set color, e.g. ",e.jsx("code",{children:'{ color: "var(--color-primary)" }'}),")",e.jsx("br",{}),"• ",e.jsx("code",{children:"className?: string"})," — extra CSS class",e.jsx("br",{}),e.jsx("br",{}),"Icons use ",e.jsx("code",{children:"currentColor"})," for stroke, so set ",e.jsx("code",{children:"color"})," on the icon or a parent to theme them."]})}),e.jsx(_,{title:"Naming convention",children:e.jsxs(S,{type:"info",children:["All icons follow the ",e.jsx("code",{children:"<Name>Icon"})," naming pattern. Examples: ",e.jsx(xt,{children:"SearchIcon"}),", ",e.jsx(xt,{children:"ChevronDownIcon"}),", ",e.jsx(xt,{children:"TrashIcon"}),", ",e.jsx(xt,{children:"CheckCircleIcon"}),", ",e.jsx(xt,{children:"SparkleIcon"}),". Import from ",e.jsx("code",{children:"../../../icons"})," (relative to the component file)."]})}),e.jsx(_,{title:"Adding new icons",children:e.jsxs(S,{type:"warning",children:["To add a new icon: open ",e.jsx(xt,{children:"src/icons/daakia-icons.tsx"}),", add a new exported function component following the existing pattern, then import it wherever needed. Never write a raw SVG element in any other file."]})})]})}function d7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Left prefix slot (icon / node)",color:"var(--color-primary)"},{label:"Right suffix slot (clear button / count)",color:"var(--color-success)"},{label:"DUI size token alignment",color:"var(--color-info)"},{label:"Raw height override",color:"var(--color-warning)"},{label:"Theme border + background variables",color:"#a855f7"},{label:"Passes through HTMLInput attributes",color:"#ec4899"},{label:"DuiProvider size fallback",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Controlled input value."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called when the user types in the input."},{name:"prefix",type:"ReactNode",description:"Node rendered left inside the bar. Typically a SearchIcon."},{name:"suffix",type:"ReactNode",description:"Node rendered right inside the bar. Typically a clear button or item count."},{name:"placeholder",type:"string",description:"Placeholder text for the input."},{name:"size",type:"DuiSize",description:"Size token controlling height and font size. Falls back to DuiProvider."},{name:"height",type:"number",description:"Raw height override in px. Prefer size for token-aligned sizing."},{name:"style",type:"CSSProperties",description:"Inline styles on the root container."},{name:"className",type:"string",description:"Extra CSS class on the root container."},{name:"...rest",type:"InputHTMLAttributes",description:"All other HTML input attributes (autoFocus, onKeyDown, etc.) passed through to the input element."}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xxs",height:"18px",font:"10px",desc:"Micro"},{size:"xs",height:"22px",font:"11px",desc:"Compact"},{size:"sm",height:"26px",font:"11px",desc:"Small"},{size:"md",height:"30px",font:"12px",desc:"Default"},{size:"lg",height:"34px",font:"13px",desc:"Large"},{size:"xl",height:"38px",font:"14px",desc:"Extra large"}]})}),e.jsxs(_,{title:"Notes",children:[e.jsxs(S,{type:"tip",children:["SearchInputView is a thin wrapper — it does not manage its own filter logic. Pair it with ",e.jsx("code",{children:"filterItems()"})," from SideNavView or your own filter function."]}),e.jsx(S,{type:"info",children:"The container uses flex: 1 by default, so it stretches to fill available width in a flex parent. Override with style={{ flex: 'none', width: 200 }} to pin a fixed width."})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"SearchInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on SearchInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function u7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Value always in milliseconds",color:"var(--color-primary)"},{label:"Unit selector (ms/s/m/hr)",color:"var(--color-success)"},{label:"Auto-detects best unit on mount",color:"var(--color-info)"},{label:"Popup unit picker",color:"var(--color-warning)"},{label:"Click-outside to close popup",color:"#a855f7"},{label:"DUI size token sizing",color:"#ec4899"},{label:"Configurable width",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"value",type:"number",required:!0,description:"Current value in milliseconds."},{name:"onChange",type:"(ms: number) => void",required:!0,description:"Called with the new value in milliseconds whenever the number or unit changes."},{name:"placeholder",type:"string",default:"'0'",description:"Placeholder shown when value is 0."},{name:"accentColor",type:"string",description:"Accent color override (currently unused internally — reserved for future use)."},{name:"size",type:"DuiSize",description:"Size token controlling input height and font size. Falls back to DuiProvider."},{name:"width",type:"number",default:"110",description:"Width of the number input in px."},{name:"className",type:"string",description:"Extra CSS class on the root container."}]})}),e.jsx(_,{title:"Unit options",children:e.jsx(xe,{name:"DurationUnit",values:[{value:"ms",description:"Milliseconds — multiplier ×1",color:"var(--color-warning)"},{value:"s",description:"Seconds — multiplier ×1000",color:"var(--color-success)"},{value:"m",description:"Minutes — multiplier ×60000",color:"var(--color-info)"},{value:"hr",description:"Hours — multiplier ×3600000",color:"var(--color-error)"}]})}),e.jsxs(_,{title:"Auto-detection on mount",children:[e.jsx(S,{type:"info",children:'When the component mounts, it picks the most readable unit for the initial value: hours if evenly divisible by 3,600,000; minutes if by 60,000; seconds if by 1,000; otherwise milliseconds. This avoids showing "60000 ms" when "60 s" is clearer.'}),e.jsx(S,{type:"warning",children:"The internal unit state is not derived from the value on every render — only on mount. If you need to reset the unit externally, unmount and remount the component."})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"DurationInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on DurationInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function p7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"{{variable}} token highlighting",color:"var(--color-primary)"},{label:"contentEditable div (not textarea)",color:"var(--color-success)"},{label:"URL history dropdown suggestions",color:"var(--color-info)"},{label:"Mock server suggestions with server icon",color:"var(--color-warning)"},{label:"Portal-rendered dropdown (fixed position)",color:"#a855f7"},{label:"Keyboard nav: ↑↓ Enter Escape",color:"#ec4899"},{label:"IME / composition support",color:"#14b8a6"},{label:"Cursor position preserved on external value sync",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"value",type:"string",required:!0,description:"Controlled input value."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called with plain text value on every edit."},{name:"onKeyDown",type:"(e: React.KeyboardEvent) => void",description:"Additional keydown handler called after internal navigation handling."},{name:"onBlur",type:"() => void",description:"Called when the editor loses focus."},{name:"placeholder",type:"string",description:"Placeholder text shown when value is empty."},{name:"suggestions",type:"string[]",default:"[]",description:"URL history strings for the dropdown. Filtered to match current input."},{name:"mockServers",type:"MockServerSuggestion[]",default:"[]",description:"Running mock server URLs shown at top of dropdown with a server icon."},{name:"disabled",type:"boolean",description:"Disables editing. Applies opacity class."},{name:"accentColor",type:"string",description:"Border highlight color when focused."},{name:"size",type:"DuiSize",description:"Size token for height and font size. Falls back to DuiProvider."},{name:"height",type:"number",description:"Raw height override in px. Prefer size for token-aligned sizing."},{name:"borderRadius",type:"number",default:"0",description:"Border radius of the input in px. Default 0 matches URL bar usage; set 6 for standalone rounded use."},{name:"style",type:"CSSProperties",description:"Inline styles on the root container."},{name:"className",type:"string",description:"Extra CSS class on the root container."}]})}),e.jsx(_,{title:"MockServerSuggestion",children:e.jsx(M,{props:[{name:"url",type:"string",required:!0,description:"The full URL of the running mock server."},{name:"name",type:"string",required:!0,description:"Display name shown on the right side of the dropdown row."}]})}),e.jsxs(_,{title:"Token patterns highlighted",children:[e.jsxs(S,{type:"info",children:["Two token patterns are highlighted: ",e.jsx("code",{children:"{{varName}}"})," and ",e.jsxs("code",{children:["$","{varName}"]}),". A third escape pattern ",e.jsxs("code",{children:["$daakia_","{varName}","_$"]})," is also highlighted but with a different class. Highlighting is done via HTML injection in a backdrop div layered under a transparent textarea."]}),e.jsxs(S,{type:"warning",children:["This component uses a ",e.jsx("code",{children:"contentEditable"})," div rather than a native input. Avoid nesting it inside forms that submit on Enter — the Enter key is explicitly prevented inside this component."]})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"HighlightedInputView reads its dimensions from the shared input category base hook (useInputBase). Omitting size, width, borderRadius, or color on HighlightedInputView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every input-category component at once.",children:[e.jsx(I,{features:[{label:"useInputBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Input category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every input-category component in the tree."]})]})]})}function h7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Enable/disable per row checkbox",color:"var(--color-primary)"},{label:"Bulk edit mode (textarea)",color:"var(--color-success)"},{label:"Insert row divider between rows",color:"var(--color-info)"},{label:"HTTP header key autocomplete",color:"var(--color-warning)"},{label:"Sensitive key masking with eye toggle",color:"#a855f7"},{label:"Pinned / computed read-only rows",color:"#ec4899"},{label:"Confirm dialog on clear-all",color:"#14b8a6"},{label:"Optional description column",color:"#f97316"}]})}),e.jsx(_,{title:"KeyValueTableRow",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique row identifier (use crypto.randomUUID())."},{name:"key",type:"string",required:!0,description:"Key field value."},{name:"value",type:"string",required:!0,description:"Value field value."},{name:"description",type:"string",description:"Optional description column value."},{name:"enabled",type:"boolean",required:!0,description:"Whether the row is enabled (checked)."},{name:"type",type:"'text' | 'file'",default:"'text'",description:"Row type — used by FormDataTableView subclass."}]})}),e.jsx(_,{title:"PinnedKeyValueRow",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique row identifier."},{name:"key",type:"string",required:!0,description:"Key value (read-only)."},{name:"value",type:"string",required:!0,description:"Value (read-only)."},{name:"description",type:"string",description:"Optional description."},{name:"deletable",type:"boolean",description:"When true, shows a trash icon on hover and calls onPinnedRemove."},{name:"masked",type:"boolean",description:"When true, value is masked with an eye toggle."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"rows",type:"KeyValueTableRow[]",required:!0,description:"Controlled array of editable rows."},{name:"onChange",type:"(rows: KeyValueTableRow[]) => void",required:!0,description:"Called with the updated rows array on any change."},{name:"showDescription",type:"boolean",default:"false",description:"Add a third Description column to the grid."},{name:"placeholder",type:"{ key?, value? }",description:"Placeholder text for key and value inputs."},{name:"autocompleteKeys",type:"boolean",default:"false",description:"Enable HTTP header key autocomplete in the key column."},{name:"maskSensitive",type:"boolean",default:"false",description:"Automatically mask values for known sensitive keys (Authorization, token, etc.)."},{name:"hideToolbar",type:"boolean",default:"false",description:"Hides the entire toolbar row."},{name:"label",type:"string",description:'Left-side column header label (default "Key").'},{name:"accentColor",type:"string",description:"Accent color for insert divider and toolbar highlights."},{name:"toolbarExtra",type:"ReactNode",description:"Extra nodes rendered in the toolbar right side, before the trash icon."},{name:"size",type:"DuiSize",description:'Controls input height and font size. Falls back to DuiProvider or "md".'},{name:"bordered",type:"boolean",default:"false",description:"Wraps the table in a rounded border panel."},{name:"pinnedTopRows",type:"PinnedKeyValueRow[]",description:"Computed rows shown above editable rows with lock icon. Hidden by default — revealed via eye icon."},{name:"onPinnedRemove",type:"(id: string) => void",description:"Called when a deletable pinned row is removed."}]})}),e.jsxs(_,{title:"Bulk edit format",children:[e.jsxs(S,{type:"info",children:["In bulk edit mode, each line is a ",e.jsx("code",{children:"key: value"})," pair. Prepend ",e.jsx("code",{children:"#"})," to disable a row. Switching back to table mode parses the textarea content back into rows."]}),e.jsx(S,{type:"tip",children:"Pinned rows are ideal for computed/auto-generated headers (e.g. Content-Type derived from the request body). Show them only when the user clicks the eye icon to avoid visual clutter."})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"KeyValueTableView accepts a local size prop but forwards it down to the nested DUI primitives it composes (inputs / buttons / cells), rather than resolving sizing itself. Those inner primitives fall back to the nearest <DuiProvider> context value when size is omitted.",children:[e.jsx(I,{features:[{label:"Delegates sizing to nested primitives",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"}]}),e.jsx(S,{type:"info",children:"There is no dedicated size reference table for KeyValueTableView itself — its visual size comes from whichever DUI input/button/cell primitives it renders internally, each following its own category base hook."})]})]})}function m7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Unified border around all segments",color:"var(--color-primary)"},{label:"Focus ring on any active segment",color:"var(--color-success)"},{label:"Select segment with portal dropdown",color:"var(--color-info)"},{label:"Text segment with flex sizing",color:"var(--color-warning)"},{label:"Button segment (accent-outlined)",color:"#a855f7"},{label:"Divider segment (1px border)",color:"#ec4899"},{label:"Custom ReactNode segment",color:"#14b8a6"},{label:"DUI size token support",color:"#f97316"}]})}),e.jsx(_,{title:"Segment types",children:e.jsx(xe,{name:"MergedInputSegment.type",values:[{value:"select",description:"Dropdown selector with colored option labels and checkmark",color:"var(--color-primary)"},{value:"text",description:"Text input with configurable flex and placeholder",color:"var(--color-success)"},{value:"button",description:"Accent-outlined action button with optional icon",color:"var(--color-info)"},{value:"divider",description:"1px vertical separator aligned to input center",color:"var(--color-warning)"},{value:"custom",description:"Any ReactNode with optional fixed width",color:"#a855f7"}]})}),e.jsx(_,{title:"Segment props — select",children:e.jsx(M,{props:[{name:"type",type:"'select'",required:!0,description:"Marks this as a select segment."},{name:"value",type:"string",required:!0,description:"Currently selected value."},{name:"options",type:"MergedSelectOption[]",required:!0,description:"Array of { value, label, color? } option objects."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called when an option is selected."},{name:"width",type:"number",description:"Fixed width in px. Defaults to size-derived value (72–106px)."}]})}),e.jsx(_,{title:"Segment props — text",children:e.jsx(M,{props:[{name:"type",type:"'text'",required:!0,description:"Marks this as a text input segment."},{name:"value",type:"string",required:!0,description:"Controlled input value."},{name:"onChange",type:"(value: string) => void",required:!0,description:"Called on input change."},{name:"placeholder",type:"string",description:"Placeholder text."},{name:"flex",type:"number",default:"1",description:"CSS flex value for width distribution."}]})}),e.jsx(_,{title:"Segment props — button",children:e.jsx(M,{props:[{name:"type",type:"'button'",required:!0,description:"Marks this as a button segment."},{name:"label",type:"string",required:!0,description:"Button label text."},{name:"onClick",type:"() => void",required:!0,description:"Click handler."},{name:"icon",type:"ReactNode",description:"Optional icon rendered before the label."},{name:"accentColor",type:"string",description:"Button accent color (border + text). Defaults to var(--color-primary)."}]})}),e.jsx(_,{title:"Segment props — custom",children:e.jsx(M,{props:[{name:"type",type:"'custom'",required:!0,description:"Marks this as a custom content segment."},{name:"content",type:"ReactNode",required:!0,description:"Any ReactNode to render inside the segment."},{name:"width",type:"number",description:"Optional fixed width for the custom segment container."}]})}),e.jsx(_,{title:"MergedInputView Props",children:e.jsx(M,{props:[{name:"segments",type:"MergedInputSegment[]",required:!0,description:"Ordered array of segments composing the input."},{name:"size",type:"DuiSize",description:"Size token for all segments. Falls back to DuiProvider."},{name:"accentColor",type:"string",description:"Border highlight and focus ring color."},{name:"disabled",type:"boolean",default:"false",description:"Disables all segments. Applies 0.5 opacity."},{name:"className",type:"string",description:"Extra CSS class on the root container."}]})}),e.jsx(_,{title:"Real-world pattern",children:e.jsxs(S,{type:"tip",children:["MergedInputView powers the URL bar in Daakia: ",e.jsx("code",{children:"[select:method] | [divider] | [text:url] | [button:Send]"}),". The entire row shares one border and one focus ring."]})}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"MergedInputView reads <code>size</code>, <code>color</code>, and related style props directly from the DuiProvider context via useDui() rather than through a shared category base hook. Omitting a local size or color prop falls back to the nearest <DuiProvider> value.",children:[e.jsx(I,{features:[{label:"useDui() context read",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / color overrides",color:"var(--color-info)"}]}),e.jsxs(S,{type:"info",children:["MergedInputView derives its own local size map from the resolved ",e.jsx("code",{children:"size"})," value rather than sharing one of the category base hooks (e.g. useInputBase, useButtonBase). Behavior is still provider-aware: change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle this component along with the rest of the tree."]})]})]})}function f7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsx(S,{type:"info",children:"DuiProvider is a React context wrapper that sets global defaults for all DUI components in its subtree. Every DUI component reads from this context when no explicit prop is passed — making it easy to enforce consistent sizing across an entire panel or page."})}),e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Global size propagation",color:"var(--color-primary)"},{label:"Border radius preset or raw px",color:"var(--color-success)"},{label:"Active color for nav + toggle states",color:"var(--color-info)"},{label:"Text color override",color:"var(--color-warning)"},{label:"Width preset",color:"#a855f7"},{label:"Font style (normal/italic)",color:"#ec4899"},{label:"useDui() hook for component access",color:"#14b8a6"},{label:"useDuiStyle() convenience hook",color:"#f97316"}]})}),e.jsx(_,{title:"DuiProvider Props",children:e.jsx(M,{props:[{name:"size",type:"DuiSize",default:"'md'",description:"Default size inherited by all DUI components when no local size prop is passed."},{name:"width",type:"DuiWidth",description:"Default width preset. Components that support width read this as their default."},{name:"borderRadius",type:"DuiRadius | number",description:"Border-radius preset or raw px number. Overrides the size-derived default."},{name:"color",type:"string",description:"Text color override (CSS var or value, e.g. var(--color-text-primary))."},{name:"defaultColor",type:"string",description:"Primary/accent color for interactive highlights (buttons, selections)."},{name:"activeColor",type:"string",description:"Color for active/selected states (tabs, nav items, toggles)."},{name:"fontStyle",type:"DuiFontStyle",description:"Font style applied to all text within the DUI subtree ('normal' | 'italic')."},{name:"children",type:"ReactNode",required:!0,description:"The subtree that inherits these defaults."}]})}),e.jsx(_,{title:"DuiSize values",children:e.jsx(H,{sizes:[{size:"xxs",height:"18px",font:"10px",desc:"Micro"},{size:"xs",height:"22px",font:"11px",desc:"Compact"},{size:"sm",height:"26px",font:"11px",desc:"Small"},{size:"md",height:"30px",font:"12px",desc:"Default"},{size:"lg",height:"34px",font:"13px",desc:"Large"},{size:"xl",height:"38px",font:"14px",desc:"XL"},{size:"xxl",height:"44px",font:"15px",desc:"Double XL"},{size:"xxxl",height:"52px",font:"16px",desc:"Triple XL"}]})}),e.jsx(_,{title:"DuiRadius presets",children:e.jsx(xe,{name:"DuiRadius",values:[{value:"none",description:"0px — no rounding",color:"var(--color-text-muted)"},{value:"sm",description:"4px — subtle",color:"var(--color-success)"},{value:"md",description:"6px — default",color:"var(--color-primary)"},{value:"lg",description:"10px — rounded",color:"var(--color-info)"},{value:"full",description:"9999px — pill shape",color:"#a855f7"}]})}),e.jsx(_,{title:"DuiWidth presets",children:e.jsx(xe,{name:"DuiWidth",values:[{value:"sm",description:"160px",color:"var(--color-primary)"},{value:"md",description:"240px",color:"var(--color-success)"},{value:"default",description:"320px",color:"var(--color-info)"},{value:"lg",description:"400px",color:"var(--color-warning)"},{value:"fullWidth",description:"100%",color:"#a855f7"},{value:"maxContent",description:"max-content",color:"#ec4899"},{value:"fw",description:"100% (alias)",color:"#14b8a6"},{value:"mx",description:"max-content (alias)",color:"#f97316"}]})}),e.jsx(_,{title:"Hooks",children:e.jsx(M,{props:[{name:"useDui()",type:"DuiConfig",description:"Returns the current DUI context object. Components call this and fall back to context values when no explicit prop is passed."},{name:"useDuiStyle(sizeFallback)",type:"{ borderRadius, width, color, defaultColor, activeColor, fontStyle }",description:"Convenience hook that resolves borderRadius and width to CSS strings plus extracts color/style values from context."},{name:"resolveBorderRadius(override, sizeFallback)",type:"string",description:"Resolves a DuiRadius preset or raw number to a CSS string."},{name:"resolveWidth(width)",type:"string",description:"Resolves a DuiWidth preset to a CSS string. Falls back to 'auto'."}]})}),e.jsx(_,{title:"Usage pattern",children:e.jsxs(S,{type:"tip",children:["Wrap a settings panel with ",e.jsx("code",{children:'<DuiProvider size="sm">'})," to make every input, button, and nav item within it compact — without passing ",e.jsx("code",{children:'size="sm"'})," to each component individually."]})})]})}function g7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Floating draggable toolbar",color:"var(--color-primary)"},{label:"Fixed position by default",color:"var(--color-success)"},{label:"Contained mode for showcase/preview",color:"var(--color-info)"},{label:"Active toggle state per item",color:"var(--color-warning)"},{label:"Separator lines between items",color:"#a855f7"},{label:"Status text after items",color:"#ec4899"},{label:"Drag handle grip",color:"#14b8a6"},{label:"CSS custom property theming",color:"#f97316"}]})}),e.jsx(_,{title:"HudItem",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique item identifier (used as React key)."},{name:"icon",type:"ReactNode",required:!0,description:"Icon rendered inside the button."},{name:"onClick",type:"() => void",description:"Called when the button is clicked."},{name:"title",type:"string",description:"Tooltip shown on hover."},{name:"disabled",type:"boolean",description:"Disables the button (reduces opacity, no cursor pointer)."},{name:"active",type:"boolean",description:"Renders a highlighted active state (toggled-on style)."},{name:"separator",type:"boolean",description:"Renders a separator line before this item."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"items",type:"HudItem[]",required:!0,description:"Array of HUD action items."},{name:"status",type:"string",description:"Optional short status text rendered after the last item."},{name:"accentColor",type:"string",description:"Sets --dui-hud-accent CSS custom property."},{name:"activeColor",type:"string",description:"Sets --dui-hud-active-color CSS custom property for toggled-on items."},{name:"className",type:"string",description:"Extra CSS class on the root element."},{name:"onDragEnd",type:"(x: number, y: number) => void",description:"Called when the user releases the drag handle. Receives the final left/top position in px."},{name:"contained",type:"boolean",default:"false",description:"When true, uses position:relative instead of fixed and disables drag. For embedded/showcase use."}]})}),e.jsxs(_,{title:"Drag behavior",children:[e.jsxs(S,{type:"info",children:["HudView uses ",e.jsx("code",{children:"position: fixed"})," by default, centered horizontally via CSS transform. When the user drags, the element switches to an absolute left/top and the transform is cleared. The ",e.jsx("code",{children:"onDragEnd"})," callback receives the final screen coordinates so you can persist the position."]}),e.jsxs(S,{type:"tip",children:["Set ",e.jsxs("code",{children:["contained=",!0]})," in the DUI showcase or any preview pane so the HUD stays inside its container without escaping to the screen edge."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"HudView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["HudView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function _7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Controlled expand/collapse",color:"var(--color-primary)"},{label:"Animated chevron rotation",color:"var(--color-success)"},{label:"Count badge next to title",color:"var(--color-info)"},{label:"headerRight slot for action buttons",color:"var(--color-warning)"},{label:"Accent color via CSS custom property",color:"#a855f7"},{label:"Click-outside safe header actions",color:"#ec4899"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"title",type:"string",required:!0,description:"Section title shown in the header."},{name:"expanded",type:"boolean",required:!0,description:"Controlled expanded state."},{name:"onToggle",type:"() => void",required:!0,description:"Called when the header is clicked to toggle expand state."},{name:"badge",type:"number",description:"Count badge shown next to the title. Hidden when 0 or undefined."},{name:"accentColor",type:"string",description:"Sets --dui-collapse-accent CSS custom property used in CSS for chip and badge colors."},{name:"headerRight",type:"ReactNode",description:"Slot rendered on the far right of the header. Click events are stopped from propagating to the toggle."},{name:"children",type:"ReactNode",required:!0,description:"Content rendered in the body when expanded."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsxs(_,{title:"Usage notes",children:[e.jsxs(S,{type:"info",children:["CollapsibleSectionView is fully controlled — you manage ",e.jsx("code",{children:"expanded"}),' state externally. This makes it easy to sync multiple sections or implement "expand all / collapse all" actions.']}),e.jsxs(S,{type:"tip",children:["The ",e.jsx("code",{children:"headerRight"})," slot is ideal for icon buttons (add, clear, mute). They receive a ",e.jsx("code",{children:"stopPropagation"})," wrapper so clicking them doesn't toggle the section."]}),e.jsxs(S,{type:"info",children:["Used internally by ",e.jsx("strong",{children:"DebugView"})," for the Variables, Watch, Call Stack, and Breakpoints sections."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"CollapsibleSectionView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["CollapsibleSectionView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function y7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Recursive JSON tree explorer",color:"var(--color-primary)"},{label:"Click to expand/collapse nodes",color:"var(--color-success)"},{label:"Configurable auto-expand depth",color:"var(--color-info)"},{label:"Max depth guard (prevents infinite trees)",color:"var(--color-warning)"},{label:"Type-colored values (string/number/bool/null)",color:"#a855f7"},{label:"Inline preview when collapsed",color:"#ec4899"},{label:"Array length indicator",color:"#14b8a6"},{label:"Optional root name label",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"data",type:"unknown",required:!0,description:"Any JavaScript value to display (object, array, primitive, null)."},{name:"name",type:"string",description:'Optional label shown as the root key (e.g. "response").'},{name:"defaultExpandDepth",type:"number",default:"2",description:"Nodes at depth less than this value start expanded."},{name:"maxDepth",type:"number",default:"8",description:"Rendering stops at this depth to prevent infinite tree explosion."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"Value type colors",children:e.jsx(M,{props:[{name:"string",type:"CSS class",description:"dui_json-tree__value--string — themed via CSS variable."},{name:"number",type:"CSS class",description:"dui_json-tree__value--number — typically green/teal."},{name:"boolean",type:"CSS class",description:"dui_json-tree__value--boolean — typically blue."},{name:"null",type:"CSS class",description:"dui_json-tree__value--null — typically grey."},{name:"object",type:"CSS class",description:"dui_json-tree__value--object — shown as {…} when collapsed."},{name:"array",type:"CSS class",description:"dui_json-tree__value--array — shown as (N) [x, y, …] when collapsed."},{name:"fn",type:"CSS class",description:"dui_json-tree__value--fn — strings starting with '<' are treated as function/JSX previews."}]})}),e.jsx(_,{title:"Collapsed preview format",children:e.jsxs(S,{type:"info",children:["When a node is collapsed, JsonTreeView shows a compact inline preview: objects show up to 3 key-value pairs (",e.jsx("code",{children:'{ name: "x", age: 5, … }'}),"), arrays show up to 4 items (",e.jsx("code",{children:"(10) [1, 2, 3, 4, …]"}),"). String values longer than 60 characters are truncated with an ellipsis."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"JsonTreeView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["JsonTreeView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function v7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Expandable log row with chevron",color:"var(--color-primary)"},{label:"Icon slot (left)",color:"var(--color-success)"},{label:"Colored badge label",color:"var(--color-info)"},{label:"Unix timestamp rendered as HH:MM:SS",color:"var(--color-warning)"},{label:"Default expanded state",color:"#a855f7"},{label:"Arbitrary children in body",color:"#ec4899"},{label:"CSS custom property for badge color",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"icon",type:"ReactNode",required:!0,description:"Icon rendered on the left side of the header row."},{name:"title",type:"string",required:!0,description:"Main log entry title text."},{name:"badge",type:"string",description:'Short colored label shown after the title (e.g. "GET", "200").'},{name:"badgeColor",type:"string",description:"CSS color or var() for the badge text and tinted background. Sets --dui-logentry-badge."},{name:"timestamp",type:"number",description:"Unix timestamp in milliseconds. Renders as localized HH:MM:SS AM/PM string."},{name:"defaultExpanded",type:"boolean",default:"false",description:"Whether the entry starts expanded."},{name:"children",type:"ReactNode",required:!0,description:"Content rendered in the expandable body area."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsxs(_,{title:"Layout structure",children:[e.jsxs(S,{type:"info",children:["The header row is: ",e.jsx("code",{children:"[icon] [title] [badge?] — [timestamp?] [chevron]"}),". The chevron rotates 180° when expanded. The content area appears below the header when expanded."]}),e.jsx(S,{type:"tip",children:"Use JsonTreeView or a pre-styled code block as children to display structured log data. The content area has no built-in padding — add padding inside the children as needed."})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"ExpandableLogEntryView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["ExpandableLogEntryView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function b7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"One-click clipboard copy",color:"var(--color-primary)"},{label:"CheckIcon feedback for 1.5s",color:"var(--color-success)"},{label:"DUI size token (height + icon)",color:"var(--color-info)"},{label:"Accent color for copied state",color:"var(--color-warning)"},{label:"Hover background animation",color:"#a855f7"},{label:"stopPropagation on click",color:"#ec4899"},{label:"Tooltip (Copy / Copied!)",color:"#14b8a6"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"text",type:"string",required:!0,description:"The text to copy to clipboard when clicked."},{name:"size",type:"DuiSize",default:"'md'",description:"DUI size token — controls button height and icon size."},{name:"title",type:"string",default:"'Copy'",description:'Tooltip text shown on hover. Changes to "Copied!" for 1.5s after clicking.'},{name:"accentColor",type:"string",description:"Color of the CheckIcon shown after copying. Defaults to var(--color-success)."},{name:"className",type:"string",description:"Extra CSS class on the button element."},{name:"style",type:"CSSProperties",description:"Inline styles on the button element."}]})}),e.jsx(_,{title:"Sizes",children:e.jsx(H,{sizes:[{size:"xxs",height:"18px",font:"10px",desc:"Micro"},{size:"xs",height:"22px",font:"11px",desc:"Compact"},{size:"sm",height:"26px",font:"11px",desc:"Small"},{size:"md",height:"30px",font:"12px",desc:"Default"},{size:"lg",height:"34px",font:"13px",desc:"Large"},{size:"xl",height:"38px",font:"14px",desc:"XL"}]})}),e.jsxs(_,{title:"Notes",children:[e.jsxs(S,{type:"info",children:["CopyButtonView is a square button (width === height from DUI token). It uses ",e.jsx("code",{children:"navigator.clipboard.writeText()"})," which requires a secure context (HTTPS or localhost)."]}),e.jsx(S,{type:"tip",children:"The copied feedback resets automatically after 1500ms. No external state is needed — the component manages this internally."})]}),e.jsxs(_,{title:"DUI Sizing & Theming",description:"CopyButtonView reads its dimensions from the shared button category base hook (useButtonBase). Omitting size, width, borderRadius, or color on CopyButtonView falls back to the nearest <DuiProvider> context value, so a single provider-level change can restyle every button-category component at once.",children:[e.jsx(I,{features:[{label:"useButtonBase",color:"var(--color-primary)"},{label:"Falls back to DuiProvider context",color:"var(--color-success)"},{label:"size / width / borderRadius / color",color:"var(--color-info)"}]}),e.jsx(H,{sizes:[{size:"xxs",height:"16px",font:"8px",desc:"padX 4px"},{size:"xs",height:"20px",font:"9px",desc:"padX 6px"},{size:"sm",height:"24px",font:"10px",desc:"padX 8px"},{size:"md",height:"28px",font:"11px",desc:"padX 10px"},{size:"lg",height:"36px",font:"12px",desc:"padX 12px"},{size:"xl",height:"40px",font:"13px",desc:"padX 16px"},{size:"xxl",height:"48px",font:"14px",desc:"padX 20px"},{size:"xxxl",height:"56px",font:"16px",desc:"padX 24px"}]}),e.jsxs(S,{type:"info",children:["These values come from the Button category tokens in ",e.jsx("code",{children:"DuiTokens.ts"}),". Set a local ",e.jsx("code",{children:"size"})," prop to override the provider default for this instance only, or change ",e.jsx("code",{children:'<DuiProvider size="...">'})," to restyle every button-category component in the tree."]})]})]})}function x7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Marked v14 rendering",color:"var(--color-primary)"},{label:"highlight.js syntax highlighting",color:"var(--color-success)"},{label:"Language alias resolution (js→javascript, ts→typescript)",color:"var(--color-info)"},{label:"Auto-language detection via highlightAuto",color:"var(--color-warning)"},{label:"Copy button per code block",color:"#a855f7"},{label:"GFM tables and task lists",color:"#ec4899"},{label:"Blockquotes and inline code",color:"#14b8a6"},{label:"Singleton marked config (configured once)",color:"#f97316"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"content",type:"string",required:!0,description:"Markdown string to render."},{name:"className",type:"string",description:"Extra CSS class on the root div. Add mdv-root to scope styles."},{name:"style",type:"CSSProperties",description:"Inline styles on the root div."}]})}),e.jsx(_,{title:"Code block features",children:e.jsx(M,{props:[{name:"language pill",type:"span.mdv-lang-pill",description:"Shows the detected/specified language name above the code block."},{name:"copy button",type:"button.mdv-copy-btn",description:"Copies raw code to clipboard. Shows a checkmark for 2s after clicking."},{name:"inline code",type:"code.mdv-inline-code",description:"Backtick-wrapped code styled with mdv-inline-code class."}]})}),e.jsxs(_,{title:"Dependencies",children:[e.jsxs(S,{type:"warning",children:["MarkdownView depends on ",e.jsx("code",{children:"marked"})," (v14) and ",e.jsx("code",{children:"highlight.js"})," (v11) being bundled. These are already included in the DUI package. The marked instance is configured once via a singleton guard — subsequent renders reuse the same renderer."]}),e.jsxs(S,{type:"info",children:["Language aliases supported: ",e.jsx("code",{children:"js→javascript"}),", ",e.jsx("code",{children:"ts→typescript"}),", ",e.jsx("code",{children:"sh→bash"}),", ",e.jsx("code",{children:"py→python"}),", ",e.jsx("code",{children:"yml→yaml"}),", ",e.jsx("code",{children:"rb→ruby"}),", ",e.jsx("code",{children:"rs→rust"}),", ",e.jsx("code",{children:"cs→csharp"}),", ",e.jsx("code",{children:"kt→kotlin"}),". Unknown languages fall back to ",e.jsx("code",{children:"highlightAuto"}),"."]})]}),e.jsx(_,{title:"Styling",children:e.jsxs(S,{type:"tip",children:["All MarkdownView styles live in a single CSS file scoped to ",e.jsx("code",{children:".mdv-root"}),". Override specific elements by adding rules targeting ",e.jsx("code",{children:".mdv-root p"}),", ",e.jsx("code",{children:".mdv-root pre"}),", etc. in your app stylesheet."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"MarkdownView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["MarkdownView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function S7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Text and file row types",color:"var(--color-primary)"},{label:"Per-row enable/disable toggle",color:"var(--color-success)"},{label:"Native file picker integration",color:"var(--color-info)"},{label:"Base64 file encoding (default)",color:"var(--color-warning)"},{label:"File download button",color:"#a855f7"},{label:"Clear-all with confirm",color:"#ec4899"},{label:"SelectInputView for type column",color:"#14b8a6"},{label:"Configurable label and toolbar",color:"#f97316"}]})}),e.jsx(_,{title:"FormDataRow",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique row identifier."},{name:"key",type:"string",required:!0,description:"Form field name."},{name:"value",type:"string",required:!0,description:"Text value (or comma-joined file names when type is file)."},{name:"type",type:"'text' | 'file'",required:!0,description:"Row type. 'file' shows a file picker instead of a text input."},{name:"enabled",type:"boolean",required:!0,description:"Whether this row is included in the request."},{name:"fileNames",type:"string[]",description:"Selected file names (populated after file pick)."},{name:"fileData",type:"string[]",description:"Base64-encoded file contents."},{name:"fileMimeTypes",type:"string[]",description:"MIME types of selected files."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"rows",type:"FormDataRow[]",required:!0,description:"Controlled array of form-data rows."},{name:"onChange",type:"(rows: FormDataRow[]) => void",required:!0,description:"Called with the updated rows array on any change."},{name:"onFileSelect",type:"(rowId: string, files: File[]) => void",description:"Called when files are picked. When provided, skips the internal base64 read and lets the consumer handle file data."},{name:"accentColor",type:"string",description:"Accent color for add-row button and file picker button."},{name:"label",type:"string",description:"Toolbar label shown on the left (default hidden)."},{name:"hideToolbar",type:"boolean",default:"false",description:"Hides the entire toolbar row."},{name:"className",type:"string",description:"Extra CSS class on the root element."},{name:"style",type:"CSSProperties",description:"Inline styles on the root element."}]})}),e.jsx(_,{title:"Row type behavior",children:e.jsx(xe,{name:"FormDataRow.type",values:[{value:"text",description:"Renders a text input in the value column",color:"var(--color-success)"},{value:"file",description:"Renders a Choose File button + file name display",color:"var(--color-info)"}]})}),e.jsxs(_,{title:"File handling",children:[e.jsxs(S,{type:"info",children:["By default, FormDataTableView reads files to base64 internally using FileReader. The base64 data is stored in ",e.jsx("code",{children:"row.fileData"}),". Provide ",e.jsx("code",{children:"onFileSelect"})," to handle file reading yourself (e.g. via an embedded webview messaging bridge)."]}),e.jsxs(S,{type:"tip",children:["The download button appears when ",e.jsx("code",{children:"row.fileData"})," is populated. It reconstructs the file from base64 and triggers a browser download via a temporary object URL."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"FormDataTableView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["FormDataTableView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function T7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Monospace YAML key badge",color:"var(--color-primary)"},{label:"Accent color tinted background",color:"var(--color-success)"},{label:"Optional click handler",color:"var(--color-info)"},{label:"Inline-flex (no layout disruption)",color:"var(--color-warning)"},{label:"No-select (no text highlight on click)",color:"#a855f7"},{label:"Used in LiveColorCustomizer",color:"#ec4899"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"yamlKey",type:"string",required:!0,description:'The YAML theme key name to display (e.g. "brand.primary", "component_button.primary_bg").'},{name:"color",type:"string",description:"Accent color for text and background tint. Defaults to var(--color-primary)."},{name:"onClick",type:"() => void",description:"When provided, adds cursor-pointer and calls the handler on click."},{name:"className",type:"string",description:"Extra CSS class on the root span."},{name:"style",type:"CSSProperties",description:"Inline styles on the root span."}]})}),e.jsxs(_,{title:"Visual style",children:[e.jsx(S,{type:"info",children:"YamlKeyChip renders as a 16px-tall monospace pill with a 10px font, 4px border-radius, and a color-mix background at 10% + 22% border opacity. This matches the style used in Daakia's theme editor to label which YAML key controls each color variable."}),e.jsxs(S,{type:"tip",children:["YamlKeyChip is a purely presentational chip — no state, no effects. It pairs naturally with ",e.jsx("code",{children:"LiveColorCustomizer"})," and any settings UI that surfaces theme configuration keys."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"YamlKeyChip does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["YamlKeyChip is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function w7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Native color picker per CSS var",color:"var(--color-primary)"},{label:"Live document.documentElement mutation",color:"var(--color-success)"},{label:"Scoped mutation via onVarChange",color:"var(--color-info)"},{label:"Dirty tracking per variable",color:"var(--color-warning)"},{label:"Per-variable reset button",color:"#a855f7"},{label:"Reset all button",color:"#ec4899"},{label:"YamlKeyChip per variable",color:"#14b8a6"},{label:"forceOpen mode (no toggle button)",color:"#f97316"}]})}),e.jsx(_,{title:"LiveColorVar",children:e.jsx(M,{props:[{name:"cssVar",type:"string",required:!0,description:'CSS custom property name (e.g. "--color-primary").'},{name:"yamlKey",type:"string",required:!0,description:'Corresponding YAML theme key (e.g. "brand.primary"). Displayed as a YamlKeyChip.'},{name:"label",type:"string",description:'Human-readable label shown above the swatch. Defaults to cssVar with "--color-" stripped.'}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"vars",type:"LiveColorVar[]",required:!0,description:"Array of CSS variables to expose for editing."},{name:"title",type:"string",description:"Label on the toggle button. Defaults to 'Customize colors'."},{name:"forceOpen",type:"boolean",default:"false",description:"When true, the grid is always visible and the toggle button is hidden. Used when embedded in a live playground pane."},{name:"onVarChange",type:"(cssVar: string, value: string | null) => void",description:"When provided, color changes call this instead of mutating document.documentElement. value=null means reset."}]})}),e.jsxs(_,{title:"Color resolution",children:[e.jsxs(S,{type:"info",children:["On open, all colors are read from ",e.jsx("code",{children:"getComputedStyle(document.documentElement)"}),". Non-hex values are converted to hex via a 1×1 canvas pixel. Transparent values fall back to #888888."]}),e.jsxs(S,{type:"tip",children:["Use ",e.jsx("code",{children:"onVarChange"})," to scope changes to a specific container (preview pane) rather than the global document. When ",e.jsx("code",{children:"value"})," is ",e.jsx("code",{children:"null"}),", the variable override should be removed."]}),e.jsx(S,{type:"warning",children:"Changes made via LiveColorCustomizer apply immediately and persist until page reload or until Reset is clicked. They do not affect stored themes or YAML files — they are in-memory overrides only."})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"LiveColorCustomizer does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["LiveColorCustomizer is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function E7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Horizontal or vertical separator",color:"var(--color-primary)"},{label:"Three spacing sizes (sm/md/lg)",color:"var(--color-success)"},{label:'aria-hidden + role="separator"',color:"var(--color-info)"},{label:"Token-based sizing via CSS classes",color:"var(--color-warning)"}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"orientation",type:"'horizontal' | 'vertical'",default:"'horizontal'",description:"Direction of the spacer. Horizontal adds vertical margin; vertical adds horizontal margin."},{name:"spacing",type:"'sm' | 'md' | 'lg'",default:"'md'",description:"Amount of space. Maps to CSS classes defined in SpacerView.css."},{name:"className",type:"string",description:"Extra CSS class on the root div."}]})}),e.jsx(_,{title:"Spacing values",children:e.jsx(xe,{name:"spacing",values:[{value:"sm",description:"Small spacing (4–8px)",color:"var(--color-success)"},{value:"md",description:"Medium spacing (12–16px)",color:"var(--color-primary)"},{value:"lg",description:"Large spacing (24–32px)",color:"var(--color-info)"}]})}),e.jsxs(_,{title:"Usage notes",children:[e.jsxs(S,{type:"info",children:["SpacerView is a purely layout utility — it renders a div with ",e.jsx("code",{children:'role="separator"'})," and ",e.jsx("code",{children:'aria-hidden="true"'}),". It produces visual whitespace between sections, not a visible divider line (for that, use a border or HR element)."]}),e.jsx(S,{type:"tip",children:"In a flex column layout, a horizontal SpacerView adds top/bottom margin. In a flex row layout, use a vertical SpacerView to add left/right margin between items."})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"SpacerView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["SpacerView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function C7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Recursive folder tree (FolderNode)",color:"var(--color-primary)"},{label:"Expand/collapse with animated chevron",color:"var(--color-success)"},{label:"Inline rename on double-click",color:"var(--color-info)"},{label:"Hover action buttons per folder",color:"var(--color-warning)"},{label:"DUI ContextMenuView on right-click",color:"#a855f7"},{label:"Runner modal (tabbed popup per node)",color:"#ec4899"},{label:"HTML5 drag-and-drop (nodes + items)",color:"#14b8a6"},{label:"Move confirm modal",color:"#f97316"}]})}),e.jsx(_,{title:"FolderNode",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Unique node identifier."},{name:"label",type:"string",required:!0,description:"Display name of the folder."},{name:"children",type:"FolderNode[]",description:"Sub-folder nodes."},{name:"items",type:"T[]",description:"Leaf items inside this folder. Rendered via renderItem."},{name:"data",type:"unknown",description:"Arbitrary metadata attached to the node."}]})}),e.jsx(_,{title:"FolderAction",children:e.jsx(M,{props:[{name:"id",type:"string",required:!0,description:"Action identifier. Use 'run' to trigger the runner modal; use 'more'/'context' to trigger the context menu."},{name:"icon",type:"ReactNode",required:!0,description:"Icon for the action button."},{name:"tooltip",type:"string",description:"Tooltip shown on hover."},{name:"disabled",type:"boolean | (node) => boolean",description:"Disables the action. Accepts a per-node function."},{name:"onClick",type:"(node, e) => void",required:!0,description:'Called when action is clicked (unless id is "run" or "more").'}]})}),e.jsx(_,{title:"Core Props",children:e.jsx(M,{props:[{name:"nodes",type:"FolderNode[]",required:!0,description:"Top-level folder nodes."},{name:"accentColor",type:"string",default:"'var(--color-text-muted)'",description:"Accent color for folder icons, drop highlights, and action buttons."},{name:"folderActions",type:"FolderAction[]",description:"Action buttons rendered on folder hover."},{name:"contextMenuItems",type:"(node) => ContextMenuItem[]",description:"Returns context menu items for a node. Right-click triggers the menu."},{name:"runner",type:"FolderRunnerConfig",description:'Config for the runner modal (tabbed popup opened by the "run" action).'},{name:"defaultExpandedIds",type:"Set<string>",description:"IDs of nodes expanded by default (uncontrolled)."},{name:"expandedIds",type:"Set<string>",description:"Controlled expanded node IDs."},{name:"onToggle",type:"(id: string) => void",description:"Called when a node is expanded/collapsed (controlled mode)."},{name:"renderItem",type:"(item, node, depth) => ReactNode",description:"Custom renderer for leaf items."},{name:"onRename",type:"(id: string, newName: string) => void",description:"Called after a double-click rename is committed."},{name:"onFolderClick",type:"(node) => void",description:"Called when a folder is clicked (in addition to expand/collapse)."},{name:"emptyLabel",type:"string",default:"'No items'",description:"Text shown when nodes array is empty."},{name:"indentPx",type:"number",default:"12",description:"Horizontal indent per depth level in px."}]})}),e.jsx(_,{title:"Drag-and-drop Props",children:e.jsx(M,{props:[{name:"draggable",type:"boolean",default:"false",description:"Enable HTML5 drag-and-drop for folder nodes."},{name:"isDraggableNode",type:"(node) => boolean",description:"Guard function to prevent specific nodes from being dragged."},{name:"onMove",type:"(dragId, targetId, position) => void",description:'Called when a node is dropped. position is "before" | "inside" | "after".'},{name:"confirmFolderMove",type:"boolean",default:"false",description:"Show a confirmation modal before calling onMove."},{name:"getMoveSummary",type:"(dragId) => MoveSummaryEntry[]",description:"Returns sub-folder and item entries shown in the move confirmation modal."},{name:"draggableItems",type:"boolean",default:"false",description:"Enable drag-and-drop for leaf items."},{name:"getItemId",type:"(item) => string",description:"Required when draggableItems=true. Returns a stable unique ID per item."},{name:"onItemMove",type:"(itemId, targetId, targetKind, position) => void",description:"Called when an item is dropped."}]})}),e.jsx(_,{title:"Runner modal",children:e.jsxs(S,{type:"info",children:["When a folder action has ",e.jsx("code",{children:'id="run"'}),", clicking it opens the FolderRunnerConfig modal. The modal shows a tabbed layout with configurable content per tab and an optional Save button. This is used in Daakia for the collection runner panel."]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"FolderView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["FolderView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function A7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsxs(S,{type:"info",children:["DebugEditorView wraps ",e.jsx("strong",{children:"EditorView"})," (the DUI Monaco editor) with ",e.jsx("code",{children:"debugSupported=true"})," always set. It exposes a pluggable ",e.jsx("strong",{children:"DebugEditorAdapter"})," interface so consumers supply their own breakpoint callbacks without importing daakia-specific stores."]})}),e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"Monaco editor with debug gutter",color:"var(--color-primary)"},{label:"Breakpoint toggle on gutter click",color:"var(--color-success)"},{label:"Disabled breakpoints (greyed out)",color:"var(--color-info)"},{label:"Conditional breakpoints (amber)",color:"var(--color-warning)"},{label:"Paused line highlight (yellow bar)",color:"#a855f7"},{label:"Right-click glyph context menu",color:"#ec4899"},{label:"Adapter pattern (no store coupling)",color:"#14b8a6"},{label:"EditorMount callback for plugins",color:"#f97316"}]})}),e.jsx(_,{title:"DebugEditorAdapter",children:e.jsx(M,{props:[{name:"onToggleBreakpoint",type:"(line: number) => void",description:"Called when the user clicks in the breakpoint gutter to toggle a breakpoint."},{name:"onGlyphContextMenu",type:"(line: number, pos: { x, y }) => void",description:"Called when the user right-clicks a glyph in the gutter (for conditional breakpoints, etc.)."},{name:"onEditorMount",type:"(editor: unknown, monaco: unknown) => void",description:"Called after Monaco mounts. Use to attach AI autocomplete or other Monaco plugins."}]})}),e.jsx(_,{title:"Props",children:e.jsx(M,{props:[{name:"adapter",type:"DebugEditorAdapter",description:"Pluggable debug adapter — consumer supplies all callbacks."},{name:"breakpoints",type:"number[]",description:"Active breakpoint line numbers (shown with red dot in gutter)."},{name:"disabledBreakpoints",type:"number[]",description:"Line numbers with disabled breakpoints (shown grey)."},{name:"conditionalBreakpointLines",type:"number[]",description:"Line numbers with conditional breakpoints (shown amber)."},{name:"pausedLine",type:"number | null",description:"Currently paused line. Rendered with a yellow highlight bar."},{name:"...EditorViewProps",type:"EditorViewProps",description:"All other EditorView props (language, value, onChange, theme, etc.) pass through."}]})}),e.jsxs(_,{title:"Notes",children:[e.jsxs(S,{type:"tip",children:["DebugEditorView is a thin adapter layer. The heavy lifting is in ",e.jsx("code",{children:"EditorView"}),". If you need a plain Monaco editor without debug features, use ",e.jsx("code",{children:"EditorView"})," directly."]}),e.jsxs(S,{type:"warning",children:["The ",e.jsx("code",{children:"debugSupported"}),", ",e.jsx("code",{children:"onToggleBreakpoint"}),", ",e.jsx("code",{children:"onGlyphContextMenu"}),", and ",e.jsx("code",{children:"onEditorMount"})," props are stripped from the pass-through to prevent double-binding. Always use the ",e.jsx("code",{children:"adapter"})," prop for these callbacks."]})]}),e.jsx(_,{title:"DUI Sizing & Theming",description:"DebugEditorView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["DebugEditorView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}function k7(){return e.jsxs("div",{style:{maxWidth:860},children:[e.jsx(_,{title:"Overview",children:e.jsx(S,{type:"info",children:'DebugView is a code-editor-style "Run and Debug" side panel as a standalone DUI component. It is fully abstract — the consumer provides session data and action callbacks. No daakia store imports are required.'})}),e.jsx(_,{title:"Features",children:e.jsx(I,{features:[{label:"VARIABLES section with scope groups",color:"var(--color-primary)"},{label:"Recursive variable value tree",color:"var(--color-success)"},{label:"WATCH expressions with live evaluation",color:"var(--color-info)"},{label:"CALL STACK with frame restart",color:"var(--color-warning)"},{label:"BREAKPOINTS with enable/disable/mute",color:"#a855f7"},{label:"Debug toolbar (Continue/Step Over/Into/Out/Restart/Stop)",color:"#ec4899"},{label:"Syntax-highlighted value colors",color:"#14b8a6"},{label:"CollapsibleSectionView for all sections",color:"#f97316"}]})}),e.jsx(_,{title:"DebugSession",children:e.jsx(M,{props:[{name:"active",type:"boolean",required:!0,description:"Whether a debug session is running."},{name:"status",type:"'idle' | 'running' | 'paused'",required:!0,description:"Current session status. Paused enables the step toolbar buttons."},{name:"pausedLine",type:"number | null",description:"Current paused line number."},{name:"variables",type:"DebugVariable[]",description:"Array of { name, value, type? } captured at the current pause point."},{name:"callStack",type:"DebugCallFrame[]",description:"Call stack frames at the current pause point."},{name:"breakpoints",type:"DebugBreakpoint[]",description:"All breakpoints across all files."},{name:"breakpointsMuted",type:"boolean",description:"When true, all breakpoints are muted (the toolbar mute icon turns red)."}]})}),e.jsx(_,{title:"DebugActions",children:e.jsx(M,{props:[{name:"onContinue",type:"() => void",description:"Resume execution (F5)."},{name:"onStepOver",type:"() => void",description:"Step over current line (F10)."},{name:"onStepInto",type:"() => void",description:"Step into function (F11)."},{name:"onStepOut",type:"() => void",description:"Step out of function (⇧F11)."},{name:"onRestart",type:"() => void",description:"Restart the debug session."},{name:"onStop",type:"() => void",description:"Stop the debug session."},{name:"onAddWatchExpression",type:"(expr: string) => void",description:"Add a watch expression."},{name:"onRemoveWatchExpression",type:"(expr: string) => void",description:"Remove a specific watch expression."},{name:"onClearWatchExpressions",type:"() => void",description:"Remove all watch expressions."},{name:"onToggleBreakpoint",type:"(key, line, currentlyDisabled) => void",description:"Toggle a breakpoint enable/disable state."},{name:"onRemoveBreakpoint",type:"(key, line) => void",description:"Remove a breakpoint."},{name:"onNavigateBreakpoint",type:"(key, line) => void",description:"Navigate editor to a breakpoint location."},{name:"onToggleMuteBreakpoints",type:"() => void",description:"Toggle muting all breakpoints."},{name:"onClearAllBreakpoints",type:"() => void",description:"Remove all breakpoints."},{name:"onRestartFrame",type:"(frameIndex: number) => void",description:"Restart a call stack frame."}]})}),e.jsx(_,{title:"DebugViewProps",children:e.jsx(M,{props:[{name:"session",type:"DebugSession",required:!0,description:"Current debug session state."},{name:"actions",type:"DebugActions",description:"Action callbacks. Omit any to hide the corresponding UI."},{name:"watchExpressions",type:"string[]",default:"[]",description:"Controlled list of watch expressions managed externally."},{name:"accentColor",type:"string",default:"'var(--color-primary)'",description:"Accent color for section headers and highlights."},{name:"title",type:"string",default:"'Run and Debug'",description:"Panel title shown in the toolbar."},{name:"className",type:"string",description:"Extra CSS class on the root element."}]})}),e.jsx(_,{title:"Value type colors (syntax-highlighted)",children:e.jsx(xe,{name:"value type",values:[{value:"string",description:"#ce9178 — orange-red",color:"#ce9178"},{value:"number",description:"#b5cea8 — soft green",color:"#b5cea8"},{value:"boolean",description:"#569cd6 — blue",color:"#569cd6"},{value:"null/undefined",description:"#808080 — grey",color:"#808080"},{value:"array",description:"#dcdcaa — yellow",color:"#dcdcaa"},{value:"object",description:"#9cdcfe — light blue",color:"#9cdcfe"}]})}),e.jsx(_,{title:"DUI Sizing & Theming",description:"DebugView does not read size, width, color, or borderRadius from the DuiProvider context — it is not part of the sized-component system and has no size prop to fall back to a provider default.",children:e.jsxs(S,{type:"info",children:["DebugView is unaffected by ",e.jsx("code",{children:"<DuiProvider>"})," size/color context. Style it directly via its own props (and CSS variables where documented above) rather than expecting provider-level sizing to apply."]})})]})}const N_=[{value:"GET",label:"GET"},{value:"POST",label:"POST"},{value:"PUT",label:"PUT"},{value:"PATCH",label:"PATCH"},{value:"DELETE",label:"DELETE"}],R7=Array.from({length:12},(t,n)=>({value:String(n+1),label:String(n+1)})),I7=Array.from({length:60},(t,n)=>({value:String(n).padStart(2,"0"),label:String(n).padStart(2,"0")})),D7=[{value:"AM",label:"AM"},{value:"PM",label:"PM"}],N7=[{value:"0",label:"No retries"},{value:"1",label:"1 retry"},{value:"3",label:"3 retries"},{value:"5",label:"5 retries"},{value:"10",label:"10 retries"}],L_=[{value:"us-east-1",label:"US East (N. Virginia)"},{value:"us-west-2",label:"US West (Oregon)"},{value:"eu-west-1",label:"EU (Ireland)"},{value:"ap-south-1",label:"AP (Mumbai)"},{value:"ap-southeast-1",label:"AP (Singapore)",disabled:!0}];function L7(){const[t,n]=d.useState("GET"),[r,o]=d.useState("9"),[i,a]=d.useState("30"),[s,l]=d.useState("AM"),[u,p]=d.useState("md"),[h,f]=d.useState("3"),[g,y]=d.useState("us-east-1"),b=[{options:R7,value:r,onChange:o,label:"Hour"},{options:I7,value:i,onChange:a,label:"Min"},{options:D7,value:s,onChange:l,label:""}];return e.jsxs("div",{children:[e.jsx(m,{title:"Single-column HTTP Method Wheel",description:"Basic single-column picker bound to options/value/onChange",code:`const methodOptions = [
   { value: 'GET', label: 'GET' },
   { value: 'POST', label: 'POST' },
   { value: 'PUT', label: 'PUT' },