twenty-ui 2.47.0 → 2.48.0

package/dist/components/code-editor/CodeEditor/internal/useCodeEditorHeight.d.ts

@@ -0,0 +1,13 @@
+import { ResizedCodeEditorHeight } from './types/ResizedCodeEditorHeight';
+export declare const useCodeEditorHeight: ({ height, resizable, autoHeight, }: {
+    height: number | string;
+    resizable: boolean;
+    autoHeight: boolean;
+}) => {
+    currentHeight: string | number;
+    resizableHeight: number;
+    setResizableHeight: (value: number) => void;
+    setResizedHeight: import('react').Dispatch<import('react').SetStateAction<ResizedCodeEditorHeight | undefined>>;
+    setContentHeight: import('react').Dispatch<import('react').SetStateAction<number | undefined>>;
+    shouldAutoHeight: boolean;
+};

package/dist/components/code-editor/CodeEditor/internal/utils/defineCodeEditorDefaultTheme.d.ts

@@ -0,0 +1,7 @@
+import { Monaco } from '@monaco-editor/react';
+import { ThemeType } from '../../../../../theme';
+export declare const defineCodeEditorDefaultTheme: ({ monaco, theme, colorScheme, }: {
+    monaco: Monaco;
+    theme: ThemeType;
+    colorScheme: "light" | "dark";
+}) => void;

package/dist/components/code-editor/CodeEditor/internal/utils/getBaseCodeEditorTheme.d.ts

@@ -1,3 +1,6 @@
 import { ThemeType } from '../../../../../theme';
 import { editor } from 'monaco-editor';
-export declare const getBaseCodeEditorTheme: (theme: ThemeType, colorScheme: "light" | "dark") => editor.IStandaloneThemeData;
+export declare const getBaseCodeEditorTheme: ({ theme, colorScheme, }: {
+    theme: ThemeType;
+    colorScheme: "light" | "dark";
+}) => editor.IStandaloneThemeData;

package/dist/components/code-editor/CodeEditor/internal/utils/getBoundedCodeEditorHeight.d.ts

@@ -0,0 +1 @@
+export declare const getBoundedCodeEditorHeight: (height: number) => number;

package/dist/components/code-editor/CodeEditor/internal/utils/getCurrentCodeEditorHeight.d.ts

@@ -0,0 +1,7 @@
+export declare const getCurrentCodeEditorHeight: ({ height, resizableHeight, contentHeight, shouldUseResizableHeight, shouldAutoHeight, }: {
+    height: number | string;
+    resizableHeight: number;
+    contentHeight: number | undefined;
+    shouldUseResizableHeight: boolean;
+    shouldAutoHeight: boolean;
+}) => string | number;

package/dist/components/code-editor/CodeEditor/internal/utils/getResizableCodeEditorHeight.d.ts

@@ -0,0 +1,5 @@
+import { ResizedCodeEditorHeight } from '../types/ResizedCodeEditorHeight';
+export declare const getResizableCodeEditorHeight: ({ height, resizedHeight, }: {
+    height: number | string;
+    resizedHeight: ResizedCodeEditorHeight | undefined;
+}) => number;

package/dist/components/code-editor/CodeEditor/types/CodeEditorProps.d.ts

@@ -1,9 +1,11 @@
 import { EditorProps } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
+import { ComponentPropsWithoutRef, Ref } from 'react';
 type CodeEditorVariant = 'default' | 'with-header' | 'borderless';
 type CodeEditorContentPadding = 'default' | 'comfortable';
-export type CodeEditorProps = Pick<EditorProps, 'value' | 'language' | 'onMount' | 'onValidate' | 'height' | 'options'> & {
-    onChange?: (value: string) => void;
+export type CodeEditorProps = EditorProps & {
+    containerProps?: Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
+    ref?: Ref<HTMLDivElement>;
     setMarkers?: (value: string) => editor.IMarkerData[];
     variant?: CodeEditorVariant;
     isLoading?: boolean;

package/dist/components/code-editor.cjs

@@ -1 +1 @@
-var Z=Object.create;var B=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var ne=(e,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of oe(t))!te.call(e,i)&&i!==n&&B(e,i,{get:()=>t[i],enumerable:!(l=ee(t,i))||l.enumerable});return e};var ie=(e,t,n)=>(n=e!=null?Z(re(e)):{},ne(t||!e||!e.__esModule?B(n,"default",{value:e,enumerable:!0}):n,e));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("../theme-1XkFz8Qu.cjs"),s=require("../isDefined-DS2Q42p5.cjs"),de=require("../Loader-Bb72CUQ9.cjs"),ae=require("../ResizeHandle-CNlQ4TEE.cjs");let se=require("@base-ui/react/use-render"),le=require("clsx"),a=require("react"),d=require("react/jsx-runtime"),C=require("@monaco-editor/react");C=D.__toESM(C,1);var z="baseCodeEditorTheme",o=e=>{if(e.trim()==="transparent")return"#00000000";const t=e.match(/color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/);if(s.isDefined(t)){const[,n,l,i,f]=t;if(!s.isDefined(n)||!s.isDefined(l)||!s.isDefined(i))return e;const u=Math.round(parseFloat(n)*255).toString(16).padStart(2,"0"),k=Math.round(parseFloat(l)*255).toString(16).padStart(2,"0"),v=Math.round(parseFloat(i)*255).toString(16).padStart(2,"0");return s.isDefined(f)?`#${u}${k}${v}${Math.round(parseFloat(f)*255).toString(16).padStart(2,"0")}`:`#${u}${k}${v}`}return e},ue=(e,t)=>({base:t==="dark"?"vs-dark":"vs",inherit:!0,rules:[{token:"",foreground:o(e.font.color.secondary)},{token:"keyword",foreground:o(e.color.pink11)},{token:"keyword.control",foreground:o(e.color.pink11)},{token:"keyword.json",foreground:o(e.color.orange11)},{token:"number",foreground:o(e.color.orange11)},{token:"number.json",foreground:o(e.color.orange11)},{token:"regexp",foreground:o(e.color.orange11)},{token:"type",foreground:o(e.color.green11)},{token:"attribute.name",foreground:o(e.color.blue11)},{token:"tag",foreground:o(e.color.pink11)},{token:"string",foreground:o(e.color.green11)},{token:"string.key.json",foreground:o(e.color.blue11)},{token:"delimiter",foreground:o(e.font.color.light)},{token:"delimiter.bracket.json",foreground:o(e.font.color.light)},{token:"string.value.json",foreground:o(e.color.green11)},{token:"comment",foreground:o(e.font.color.light),fontStyle:"italic"}],colors:{"editor.background":o("transparent"),"editor.foreground":o(e.font.color.secondary),"editorCursor.foreground":o(e.font.color.primary),"editorLineNumber.foreground":o(e.font.color.extraLight),"editorLineNumber.activeForeground":o(e.font.color.light),"editor.lineHighlightBackground":o(e.background.tertiary),"editor.selectionBackground":o(e.background.transparent.blue),"editor.inactiveSelectionBackground":o(e.background.transparent.light),"editorIndentGuide.background1":o(e.border.color.light),"editorIndentGuide.activeBackground1":o(e.border.color.medium),"editorBracketMatch.background":o(e.background.transparent.light),"editorBracketMatch.border":o(e.border.color.medium)}}),ce="_editorWrapper_zilk9_24",ge="_editorLoader_zilk9_1",fe="_container_zilk9_20",S={editorWrapper:ce,editorLoader:ge,container:fe},N,pe=()=>(N??=import("monaco-editor").then(e=>{C.loader.config({monaco:e})}),N),I=(e,t,n)=>{e.editor.defineTheme(z,ue(t,n)),e.editor.setTheme(z)},ke=({value:e,language:t,onMount:n,onChange:l,setMarkers:i,onValidate:f,height:u=450,variant:k="default",transparentBackground:v,isLoading:O=!1,options:P,resizable:M=!1,resizeLabel:$="Resize editor",contentPadding:R="default",autoHeight:w=!1})=>{const p=D.useTheme(),y=D.useThemeColorScheme(),[h,W]=(0,a.useState)(void 0),[_,A]=(0,a.useState)(void 0),[V,j]=(0,a.useState)(!1),[G,K]=(0,a.useState)(!1),[J,q]=(0,a.useState)(void 0),[L,Q]=(0,a.useState)(typeof u=="number"?u:450),T=(0,a.useId)(),E=w&&!M,H=typeof p.spacingMultiplicator=="number"?p.spacingMultiplicator*4:void 0,m=E?J??u:M?L:u,U={...R==="comfortable"?{lineDecorationsWidth:H}:{},padding:{bottom:H,top:H}},{padding:he,...X}=P??{},F=(r,c)=>{const g=r?.getModel();if(!s.isDefined(g))return;const b=i?.(g.getValue());s.isDefined(b)&&c?.editor.setModelMarkers(g,"customMarker",b)},Y=r=>{V&&r.stopPropagation()};return(0,a.useEffect)(()=>{let r=!0;return pe().then(()=>{r&&K(!0)}),()=>{r=!1}},[]),(0,a.useEffect)(()=>{s.isDefined(h)&&I(h,p,y)},[y,h,p]),(0,a.useEffect)(()=>{if(!E||!s.isDefined(_)){q(void 0);return}const r=()=>{const g=_.getContentHeight();!Number.isFinite(g)||g<=0||q(b=>b===g?b:g)};r();const c=_.onDidContentSizeChange(r);return()=>{c.dispose()}},[_,E]),O||!G?(0,d.jsx)("div",{className:S.editorLoader,"data-variant":k,style:{"--code-editor-height":typeof m=="number"?`${m}px`:m},children:(0,d.jsx)(de.Loader,{})}):(0,d.jsxs)("div",{className:S.container,onKeyDown:Y,children:[(0,d.jsx)("input",{type:"hidden","data-testid":"code-editor-value",value:e??"",readOnly:!0}),(0,d.jsx)("div",{id:T,className:S.editorWrapper,"data-variant":k,"data-transparent-background":v||void 0,children:(0,d.jsx)(C.default,{height:m,value:e,language:t,loading:"",onMount:(r,c)=>{W(c),A(r),I(c,p,y),r.onDidFocusEditorWidget(()=>{j(!0)}),r.onDidBlurEditorWidget(()=>{j(!1)}),n?.(r,c),F(r,c)},onChange:r=>{s.isDefined(r)&&(l?.(r),F(_,h))},onValidate:r=>{f?.(r)},options:{formatOnPaste:!0,formatOnType:!0,fontFamily:p.code.font.family,bracketPairColorization:{enabled:!1},overviewRulerLanes:0,scrollBeyondLastLine:!1,scrollbar:{vertical:"hidden",horizontal:"hidden"},minimap:{enabled:!1},...X,...U}})}),M&&(0,d.jsx)(ae.ResizeHandle,{"aria-label":$,"aria-controls":T,value:L,onValueChange:Q})]})},_e="_editorHeader_19qlo_1",be="_elementContainer_19qlo_15",x={editorHeader:_e,elementContainer:be},ve=({title:e,startElement:t,endElement:n,className:l,render:i,ref:f,...u})=>(0,se.useRender)({render:i,ref:f,props:{...u,className:(0,le.clsx)(x.editorHeader,l),children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("div",{className:x.elementContainer,children:[t,e]}),(0,d.jsx)("div",{className:x.elementContainer,children:n})]})}});exports.CodeEditor=ke;exports.CodeEditorHeader=ve;
+var re=Object.create;var z=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var ae=(e,r,o,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of te(r))!ie.call(e,n)&&n!==o&&z(e,n,{get:()=>r[n],enumerable:!(t=oe(r,n))||t.enumerable});return e};var de=(e,r,o)=>(o=e!=null?re(ne(e)):{},ae(r||!e||!e.__esModule?z(o,"default",{value:e,enumerable:!0}):o,e));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("../theme-1XkFz8Qu.cjs"),s=require("../isDefined-DS2Q42p5.cjs"),se=require("../Loader-Bb72CUQ9.cjs"),j=require("../ResizeHandle-DI4LHIQm.cjs");let ue=require("@base-ui/react/use-render"),C=require("@sniptt/guards"),F=require("clsx"),u=require("react"),d=require("react/jsx-runtime"),le=require("@base-ui/utils/clamp"),h=require("@monaco-editor/react");h=M.__toESM(h,1);var ce="baseCodeEditorTheme",fe=({shouldAutoHeight:e,editor:r,setContentHeight:o})=>((0,u.useEffect)(()=>{if(!e||!s.isDefined(r)){o(void 0);return}const t=()=>{const a=r.getContentHeight();!Number.isFinite(a)||a<=0||o(a)};t();const n=r.onDidContentSizeChange(t);return()=>n.dispose()},[r,e,o]),null),ge=({editor:e,setEditor:r,setMonaco:o,setIsEditorFocused:t})=>((0,u.useEffect)(()=>{if(!s.isDefined(e)){t(!1);return}t(e.hasWidgetFocus());const n=[e.onDidFocusEditorWidget(()=>t(!0)),e.onDidBlurEditorWidget(()=>t(!1)),e.onDidDispose(()=>{r(void 0),o(void 0)})];return()=>{for(const a of n)a.dispose()}},[e,r,o,t]),null),pe=({configureMonacoLoader:e,setIsMonacoLoaderConfigured:r})=>((0,u.useEffect)(()=>{let o=!0;return e().then(()=>{o&&r(!0)}),()=>{o=!1}},[e,r]),null),be=({editor:e,monaco:r,setMarkers:o})=>((0,u.useEffect)(()=>{if(!s.isDefined(e)||!s.isDefined(r)||!s.isDefined(o))return;const t=()=>{const a=e.getModel();s.isDefined(a)&&r.editor.setModelMarkers(a,"customMarker",o(a.getValue()))};t();const n=[e.onDidChangeModel(t),e.onDidChangeModelContent(t)];return()=>{for(const a of n)a.dispose()}},[e,r,o]),null),$=e=>(0,le.clamp)(e,j.RESIZE_HANDLE_DEFAULTS.min,j.RESIZE_HANDLE_DEFAULTS.max),_e=({height:e,resizable:r,editor:o,setResizedHeight:t})=>((0,u.useEffect)(()=>{if(!r||!s.isDefined(o))return;const n=o.getContainerDomNode().parentElement?.getBoundingClientRect().height;!s.isDefined(n)||n<=0||t({sourceHeight:e,value:$(n)})},[o,e,r,t]),null),i=e=>{if(e.trim()==="transparent")return"#00000000";const r=e.match(/color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/);if(s.isDefined(r)){const[,o,t,n,a]=r;if(!s.isDefined(o)||!s.isDefined(t)||!s.isDefined(n))return e;const l=Math.round(parseFloat(o)*255).toString(16).padStart(2,"0"),c=Math.round(parseFloat(t)*255).toString(16).padStart(2,"0"),g=Math.round(parseFloat(n)*255).toString(16).padStart(2,"0");return s.isDefined(a)?`#${l}${c}${g}${Math.round(parseFloat(a)*255).toString(16).padStart(2,"0")}`:`#${l}${c}${g}`}return e},ve=({theme:e,colorScheme:r})=>({base:r==="dark"?"vs-dark":"vs",inherit:!0,rules:[{token:"",foreground:i(e.font.color.secondary)},{token:"keyword",foreground:i(e.color.pink11)},{token:"keyword.control",foreground:i(e.color.pink11)},{token:"keyword.json",foreground:i(e.color.orange11)},{token:"number",foreground:i(e.color.orange11)},{token:"number.json",foreground:i(e.color.orange11)},{token:"regexp",foreground:i(e.color.orange11)},{token:"type",foreground:i(e.color.green11)},{token:"attribute.name",foreground:i(e.color.blue11)},{token:"tag",foreground:i(e.color.pink11)},{token:"string",foreground:i(e.color.green11)},{token:"string.key.json",foreground:i(e.color.blue11)},{token:"delimiter",foreground:i(e.font.color.light)},{token:"delimiter.bracket.json",foreground:i(e.font.color.light)},{token:"string.value.json",foreground:i(e.color.green11)},{token:"comment",foreground:i(e.font.color.light),fontStyle:"italic"}],colors:{"editor.background":i("transparent"),"editor.foreground":i(e.font.color.secondary),"editorCursor.foreground":i(e.font.color.primary),"editorLineNumber.foreground":i(e.font.color.extraLight),"editorLineNumber.activeForeground":i(e.font.color.light),"editor.lineHighlightBackground":i(e.background.tertiary),"editor.selectionBackground":i(e.background.transparent.blue),"editor.inactiveSelectionBackground":i(e.background.transparent.light),"editorIndentGuide.background1":i(e.border.color.light),"editorIndentGuide.activeBackground1":i(e.border.color.medium),"editorBracketMatch.background":i(e.background.transparent.light),"editorBracketMatch.border":i(e.border.color.medium)}}),A=({monaco:e,theme:r,colorScheme:o})=>{e.editor.defineTheme(ce,ve({theme:r,colorScheme:o}))},Ee=({monaco:e,theme:r,colorScheme:o,editorTheme:t})=>((0,u.useEffect)(()=>{s.isDefined(e)&&(A({monaco:e,theme:r,colorScheme:o}),e.editor.setTheme(t))},[o,t,e,r]),null),ke=({height:e,resizableHeight:r,contentHeight:o,shouldUseResizableHeight:t,shouldAutoHeight:n})=>t?r:n?o??e:e,Ce=({height:e,resizedHeight:r})=>r?.sourceHeight===e?r.value:(0,C.isNumber)(e)?$(e):450,he=({height:e,resizable:r,autoHeight:o})=>{const[t,n]=(0,u.useState)(),[a,l]=(0,u.useState)(),c=o&&!r,g=t?.sourceHeight===e,E=r&&(g||(0,C.isNumber)(e)),p=Ce({height:e,resizedHeight:t});return{currentHeight:ke({height:e,resizableHeight:p,contentHeight:a,shouldUseResizableHeight:E,shouldAutoHeight:c}),resizableHeight:p,setResizableHeight:b=>{n({sourceHeight:e,value:b})},setResizedHeight:n,setContentHeight:l,shouldAutoHeight:c}},He="_editorWrapper_zilk9_24",me="_editorLoader_zilk9_1",De="_container_zilk9_20",x={editorWrapper:He,editorLoader:me,container:De},B,xe=()=>(B??=import("monaco-editor").then(e=>{h.loader.config({monaco:e})}),B),Se=({onMount:e,beforeMount:r,setMarkers:o,height:t=450,width:n="100%",theme:a,loading:l=(0,d.jsx)(se.Loader,{}),variant:c="default",transparentBackground:g,isLoading:E=!1,options:p,resizable:b=!1,resizeLabel:W="Resize editor",contentPadding:w="default",autoHeight:I=!1,containerProps:H,ref:O,...P})=>{const _=M.useTheme(),y=M.useThemeColorScheme(),[L,q]=(0,u.useState)(),[v,N]=(0,u.useState)(),[K,U]=(0,u.useState)(!1),[G,V]=(0,u.useState)(!1),R=(0,u.useId)(),m=a??p?.theme??"baseCodeEditorTheme",{currentHeight:k,resizableHeight:Z,setResizableHeight:J,setResizedHeight:Q,setContentHeight:X,shouldAutoHeight:Y}=he({height:t,resizable:b,autoHeight:I}),D=(0,C.isNumber)(_.spacingMultiplicator)?_.spacingMultiplicator*4:void 0,ee=f=>{H?.onKeyDown?.(f),G&&f.stopPropagation()};return(0,d.jsxs)("div",{role:"group",...H,ref:O,className:(0,F.clsx)(x.container,H?.className),onKeyDown:ee,children:[(0,d.jsx)(pe,{configureMonacoLoader:xe,setIsMonacoLoaderConfigured:U}),(0,d.jsx)(_e,{height:t,resizable:b,editor:v,setResizedHeight:Q}),(0,d.jsx)(fe,{shouldAutoHeight:Y,editor:v,setContentHeight:X}),(0,d.jsx)(ge,{editor:v,setEditor:N,setMonaco:q,setIsEditorFocused:V}),(0,d.jsx)(be,{editor:v,monaco:L,setMarkers:o}),(0,d.jsx)(Ee,{monaco:L,theme:_,colorScheme:y,editorTheme:m}),E||!K?(0,d.jsx)("div",{className:x.editorLoader,"data-variant":c,style:{width:n,"--code-editor-height":(0,C.isNumber)(k)?`${k}px`:k},children:l}):(0,d.jsx)("div",{id:R,className:x.editorWrapper,"data-variant":c,"data-transparent-background":g||void 0,children:(0,d.jsx)(h.default,{...P,height:k,width:n,theme:m,loading:l,beforeMount:f=>{A({monaco:f,theme:_,colorScheme:y}),r?.(f)},onMount:(f,T)=>{q(T),N(f),e?.(f,T)},options:{formatOnPaste:!0,formatOnType:!0,fontFamily:_.code.font.family,bracketPairColorization:{enabled:!1},overviewRulerLanes:0,scrollBeyondLastLine:!1,scrollbar:{vertical:"hidden",horizontal:"hidden"},minimap:{enabled:!1},...w==="comfortable"?{lineDecorationsWidth:D}:{},padding:{bottom:D,top:D},...p,theme:m}})}),b&&!E&&s.isDefined(v)&&(0,d.jsx)(j.ResizeHandle,{"aria-label":W,"aria-controls":R,value:Z,onValueChange:J})]})},Me="_editorHeader_19qlo_1",je="_elementContainer_19qlo_15",S={editorHeader:Me,elementContainer:je},ye=({title:e,startElement:r,endElement:o,className:t,render:n,ref:a,...l})=>(0,ue.useRender)({render:n,ref:a,props:{...l,className:(0,F.clsx)(S.editorHeader,t),children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("div",{className:S.elementContainer,children:[r,e]}),(0,d.jsx)("div",{className:S.elementContainer,children:o})]})}});exports.CodeEditor=Se;exports.CodeEditorHeader=ye;

package/dist/components/code-editor.mjs

@@ -1,198 +1,305 @@
-import { t as n } from "../isDefined-fMi6eQ4r.js";
-import { n as Y, r as Z } from "../theme-B2EaXhye.js";
-import { t as oo } from "../Loader-DtHWQH8w.js";
-import { t as ro } from "../ResizeHandle-Bjg4R0c-.js";
-import { useRender as eo } from "@base-ui/react/use-render";
-import { clsx as to } from "clsx";
-import { useEffect as E, useId as no, useState as p } from "react";
-import { Fragment as ao, jsx as l, jsxs as x } from "react/jsx-runtime";
-import io, { loader as so } from "@monaco-editor/react";
-var $ = "baseCodeEditorTheme", r = (o) => {
-  if (o.trim() === "transparent") return "#00000000";
-  const t = o.match(/color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/);
-  if (n(t)) {
-    const [, i, c, u, g] = t;
-    if (!n(i) || !n(c) || !n(u)) return o;
-    const a = Math.round(parseFloat(i) * 255).toString(16).padStart(2, "0"), k = Math.round(parseFloat(c) * 255).toString(16).padStart(2, "0"), b = Math.round(parseFloat(u) * 255).toString(16).padStart(2, "0");
-    return n(g) ? `#${a}${k}${b}${Math.round(parseFloat(g) * 255).toString(16).padStart(2, "0")}` : `#${a}${k}${b}`;
+import { t as d } from "../isDefined-fMi6eQ4r.js";
+import { n as rr, r as er } from "../theme-B2EaXhye.js";
+import { t as or } from "../Loader-DtHWQH8w.js";
+import { n as B, t as tr } from "../ResizeHandle-C1kQ3MYR.js";
+import { useRender as nr } from "@base-ui/react/use-render";
+import { isNumber as H } from "@sniptt/guards";
+import { clsx as $ } from "clsx";
+import { useEffect as p, useId as ir, useState as g } from "react";
+import { Fragment as ar, jsx as s, jsxs as S } from "react/jsx-runtime";
+import { clamp as dr } from "@base-ui/utils/clamp";
+import sr, { loader as lr } from "@monaco-editor/react";
+var ur = "baseCodeEditorTheme", cr = ({ shouldAutoHeight: r, editor: e, setContentHeight: o }) => (p(() => {
+  if (!r || !d(e)) {
+    o(void 0);
+    return;
   }
-  return o;
-}, lo = (o, t) => ({
-  base: t === "dark" ? "vs-dark" : "vs",
+  const t = () => {
+    const a = e.getContentHeight();
+    !Number.isFinite(a) || a <= 0 || o(a);
+  };
+  t();
+  const i = e.onDidContentSizeChange(t);
+  return () => i.dispose();
+}, [
+  e,
+  r,
+  o
+]), null), fr = ({ editor: r, setEditor: e, setMonaco: o, setIsEditorFocused: t }) => (p(() => {
+  if (!d(r)) {
+    t(!1);
+    return;
+  }
+  t(r.hasWidgetFocus());
+  const i = [
+    r.onDidFocusEditorWidget(() => t(!0)),
+    r.onDidBlurEditorWidget(() => t(!1)),
+    r.onDidDispose(() => {
+      e(void 0), o(void 0);
+    })
+  ];
+  return () => {
+    for (const a of i) a.dispose();
+  };
+}, [
+  r,
+  e,
+  o,
+  t
+]), null), gr = ({ configureMonacoLoader: r, setIsMonacoLoaderConfigured: e }) => (p(() => {
+  let o = !0;
+  return r().then(() => {
+    o && e(!0);
+  }), () => {
+    o = !1;
+  };
+}, [r, e]), null), pr = ({ editor: r, monaco: e, setMarkers: o }) => (p(() => {
+  if (!d(r) || !d(e) || !d(o)) return;
+  const t = () => {
+    const a = r.getModel();
+    d(a) && e.editor.setModelMarkers(a, "customMarker", o(a.getValue()));
+  };
+  t();
+  const i = [r.onDidChangeModel(t), r.onDidChangeModelContent(t)];
+  return () => {
+    for (const a of i) a.dispose();
+  };
+}, [
+  r,
+  e,
+  o
+]), null), j = (r) => dr(r, B.min, B.max), mr = ({ height: r, resizable: e, editor: o, setResizedHeight: t }) => (p(() => {
+  if (!e || !d(o)) return;
+  const i = o.getContainerDomNode().parentElement?.getBoundingClientRect().height;
+  !d(i) || i <= 0 || t({
+    sourceHeight: r,
+    value: j(i)
+  });
+}, [
+  o,
+  r,
+  e,
+  t
+]), null), n = (r) => {
+  if (r.trim() === "transparent") return "#00000000";
+  const e = r.match(/color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/);
+  if (d(e)) {
+    const [, o, t, i, a] = e;
+    if (!d(o) || !d(t) || !d(i)) return r;
+    const l = Math.round(parseFloat(o) * 255).toString(16).padStart(2, "0"), u = Math.round(parseFloat(t) * 255).toString(16).padStart(2, "0"), f = Math.round(parseFloat(i) * 255).toString(16).padStart(2, "0");
+    return d(a) ? `#${l}${u}${f}${Math.round(parseFloat(a) * 255).toString(16).padStart(2, "0")}` : `#${l}${u}${f}`;
+  }
+  return r;
+}, vr = ({ theme: r, colorScheme: e }) => ({
+  base: e === "dark" ? "vs-dark" : "vs",
   inherit: !0,
   rules: [
     {
       token: "",
-      foreground: r(o.font.color.secondary)
+      foreground: n(r.font.color.secondary)
     },
     {
       token: "keyword",
-      foreground: r(o.color.pink11)
+      foreground: n(r.color.pink11)
     },
     {
       token: "keyword.control",
-      foreground: r(o.color.pink11)
+      foreground: n(r.color.pink11)
     },
     {
       token: "keyword.json",
-      foreground: r(o.color.orange11)
+      foreground: n(r.color.orange11)
     },
     {
       token: "number",
-      foreground: r(o.color.orange11)
+      foreground: n(r.color.orange11)
     },
     {
       token: "number.json",
-      foreground: r(o.color.orange11)
+      foreground: n(r.color.orange11)
     },
     {
       token: "regexp",
-      foreground: r(o.color.orange11)
+      foreground: n(r.color.orange11)
     },
     {
       token: "type",
-      foreground: r(o.color.green11)
+      foreground: n(r.color.green11)
     },
     {
       token: "attribute.name",
-      foreground: r(o.color.blue11)
+      foreground: n(r.color.blue11)
     },
     {
       token: "tag",
-      foreground: r(o.color.pink11)
+      foreground: n(r.color.pink11)
     },
     {
       token: "string",
-      foreground: r(o.color.green11)
+      foreground: n(r.color.green11)
     },
     {
       token: "string.key.json",
-      foreground: r(o.color.blue11)
+      foreground: n(r.color.blue11)
     },
     {
       token: "delimiter",
-      foreground: r(o.font.color.light)
+      foreground: n(r.font.color.light)
     },
     {
       token: "delimiter.bracket.json",
-      foreground: r(o.font.color.light)
+      foreground: n(r.font.color.light)
     },
     {
       token: "string.value.json",
-      foreground: r(o.color.green11)
+      foreground: n(r.color.green11)
     },
     {
       token: "comment",
-      foreground: r(o.font.color.light),
+      foreground: n(r.font.color.light),
       fontStyle: "italic"
     }
   ],
   colors: {
-    "editor.background": r("transparent"),
-    "editor.foreground": r(o.font.color.secondary),
-    "editorCursor.foreground": r(o.font.color.primary),
-    "editorLineNumber.foreground": r(o.font.color.extraLight),
-    "editorLineNumber.activeForeground": r(o.font.color.light),
-    "editor.lineHighlightBackground": r(o.background.tertiary),
-    "editor.selectionBackground": r(o.background.transparent.blue),
-    "editor.inactiveSelectionBackground": r(o.background.transparent.light),
-    "editorIndentGuide.background1": r(o.border.color.light),
-    "editorIndentGuide.activeBackground1": r(o.border.color.medium),
-    "editorBracketMatch.background": r(o.background.transparent.light),
-    "editorBracketMatch.border": r(o.border.color.medium)
+    "editor.background": n("transparent"),
+    "editor.foreground": n(r.font.color.secondary),
+    "editorCursor.foreground": n(r.font.color.primary),
+    "editorLineNumber.foreground": n(r.font.color.extraLight),
+    "editorLineNumber.activeForeground": n(r.font.color.light),
+    "editor.lineHighlightBackground": n(r.background.tertiary),
+    "editor.selectionBackground": n(r.background.transparent.blue),
+    "editor.inactiveSelectionBackground": n(r.background.transparent.light),
+    "editorIndentGuide.background1": n(r.border.color.light),
+    "editorIndentGuide.activeBackground1": n(r.border.color.medium),
+    "editorBracketMatch.background": n(r.background.transparent.light),
+    "editorBracketMatch.border": n(r.border.color.medium)
   }
-}), co = "_editorWrapper_zilk9_24", uo = "_editorLoader_zilk9_1", go = "_container_zilk9_20", S = {
-  editorWrapper: co,
-  editorLoader: uo,
-  container: go
-}, z, fo = () => (z ??= import("monaco-editor").then((o) => {
-  so.config({ monaco: o });
-}), z), I = (o, t, i) => {
-  o.editor.defineTheme($, lo(t, i)), o.editor.setTheme($);
-}, So = ({ value: o, language: t, onMount: i, onChange: c, setMarkers: u, onValidate: g, height: a = 450, variant: k = "default", transparentBackground: b, isLoading: j = !1, options: O, resizable: y = !1, resizeLabel: P = "Resize editor", contentPadding: w = "default", autoHeight: R = !1 }) => {
-  const f = Z(), _ = Y(), [h, W] = p(void 0), [m, A] = p(void 0), [V, F] = p(!1), [q, G] = p(!1), [K, T] = p(void 0), [B, J] = p(typeof a == "number" ? a : 450), D = no(), M = R && !y, H = typeof f.spacingMultiplicator == "number" ? f.spacingMultiplicator * 4 : void 0, C = M ? K ?? a : y ? B : a, Q = {
-    ...w === "comfortable" ? { lineDecorationsWidth: H } : {},
-    padding: {
-      bottom: H,
-      top: H
-    }
-  }, { padding: mo, ...U } = O ?? {}, N = (e, d) => {
-    const s = e?.getModel();
-    if (!n(s)) return;
-    const v = u?.(s.getValue());
-    n(v) && d?.editor.setModelMarkers(s, "customMarker", v);
-  }, X = (e) => {
-    V && e.stopPropagation();
+}), W = ({ monaco: r, theme: e, colorScheme: o }) => {
+  r.editor.defineTheme(ur, vr({
+    theme: e,
+    colorScheme: o
+  }));
+}, kr = ({ monaco: r, theme: e, colorScheme: o, editorTheme: t }) => (p(() => {
+  d(r) && (W({
+    monaco: r,
+    theme: e,
+    colorScheme: o
+  }), r.editor.setTheme(t));
+}, [
+  o,
+  t,
+  r,
+  e
+]), null), br = ({ height: r, resizableHeight: e, contentHeight: o, shouldUseResizableHeight: t, shouldAutoHeight: i }) => t ? e : i ? o ?? r : r, Cr = ({ height: r, resizedHeight: e }) => e?.sourceHeight === r ? e.value : H(r) ? j(r) : 450, hr = ({ height: r, resizable: e, autoHeight: o }) => {
+  const [t, i] = g(), [a, l] = g(), u = o && !e, f = t?.sourceHeight === r, C = e && (f || H(r)), m = Cr({
+    height: r,
+    resizedHeight: t
+  });
+  return {
+    currentHeight: br({
+      height: r,
+      resizableHeight: m,
+      contentHeight: a,
+      shouldUseResizableHeight: C,
+      shouldAutoHeight: u
+    }),
+    resizableHeight: m,
+    setResizableHeight: (v) => {
+      i({
+        sourceHeight: r,
+        value: v
+      });
+    },
+    setResizedHeight: i,
+    setContentHeight: l,
+    shouldAutoHeight: u
   };
-  return E(() => {
-    let e = !0;
-    return fo().then(() => {
-      e && G(!0);
-    }), () => {
-      e = !1;
-    };
-  }, []), E(() => {
-    n(h) && I(h, f, _);
-  }, [
-    _,
-    h,
-    f
-  ]), E(() => {
-    if (!M || !n(m)) {
-      T(void 0);
-      return;
-    }
-    const e = () => {
-      const s = m.getContentHeight();
-      !Number.isFinite(s) || s <= 0 || T((v) => v === s ? v : s);
-    };
-    e();
-    const d = m.onDidContentSizeChange(e);
-    return () => {
-      d.dispose();
-    };
-  }, [m, M]), j || !q ? /* @__PURE__ */ l("div", {
-    className: S.editorLoader,
-    "data-variant": k,
-    style: { "--code-editor-height": typeof C == "number" ? `${C}px` : C },
-    children: /* @__PURE__ */ l(oo, {})
-  }) : /* @__PURE__ */ x("div", {
-    className: S.container,
-    onKeyDown: X,
+}, Hr = "_editorWrapper_zilk9_24", Er = "_editorLoader_zilk9_1", _r = "_container_zilk9_20", M = {
+  editorWrapper: Hr,
+  editorLoader: Er,
+  container: _r
+}, F, yr = () => (F ??= import("monaco-editor").then((r) => {
+  lr.config({ monaco: r });
+}), F), Wr = ({ onMount: r, beforeMount: e, setMarkers: o, height: t = 450, width: i = "100%", theme: a, loading: l = /* @__PURE__ */ s(or, {}), variant: u = "default", transparentBackground: f, isLoading: C = !1, options: m, resizable: v = !1, resizeLabel: w = "Resize editor", contentPadding: A = "default", autoHeight: I = !1, containerProps: E, ref: O, ...K }) => {
+  const k = er(), L = rr(), [R, T] = g(), [b, x] = g(), [P, q] = g(!1), [G, U] = g(!1), z = ir(), _ = a ?? m?.theme ?? "baseCodeEditorTheme", { currentHeight: h, resizableHeight: V, setResizableHeight: Z, setResizedHeight: J, setContentHeight: Q, shouldAutoHeight: X } = hr({
+    height: t,
+    resizable: v,
+    autoHeight: I
+  }), y = H(k.spacingMultiplicator) ? k.spacingMultiplicator * 4 : void 0, Y = (c) => {
+    E?.onKeyDown?.(c), G && c.stopPropagation();
+  };
+  return /* @__PURE__ */ S("div", {
+    role: "group",
+    ...E,
+    ref: O,
+    className: $(M.container, E?.className),
+    onKeyDown: Y,
     children: [
-      /* @__PURE__ */ l("input", {
-        type: "hidden",
-        "data-testid": "code-editor-value",
-        value: o ?? "",
-        readOnly: !0
+      /* @__PURE__ */ s(gr, {
+        configureMonacoLoader: yr,
+        setIsMonacoLoaderConfigured: q
       }),
-      /* @__PURE__ */ l("div", {
-        id: D,
-        className: S.editorWrapper,
-        "data-variant": k,
-        "data-transparent-background": b || void 0,
-        children: /* @__PURE__ */ l(io, {
-          height: C,
-          value: o,
-          language: t,
-          loading: "",
-          onMount: (e, d) => {
-            W(d), A(e), I(d, f, _), e.onDidFocusEditorWidget(() => {
-              F(!0);
-            }), e.onDidBlurEditorWidget(() => {
-              F(!1);
-            }), i?.(e, d), N(e, d);
-          },
-          onChange: (e) => {
-            n(e) && (c?.(e), N(m, h));
+      /* @__PURE__ */ s(mr, {
+        height: t,
+        resizable: v,
+        editor: b,
+        setResizedHeight: J
+      }),
+      /* @__PURE__ */ s(cr, {
+        shouldAutoHeight: X,
+        editor: b,
+        setContentHeight: Q
+      }),
+      /* @__PURE__ */ s(fr, {
+        editor: b,
+        setEditor: x,
+        setMonaco: T,
+        setIsEditorFocused: U
+      }),
+      /* @__PURE__ */ s(pr, {
+        editor: b,
+        monaco: R,
+        setMarkers: o
+      }),
+      /* @__PURE__ */ s(kr, {
+        monaco: R,
+        theme: k,
+        colorScheme: L,
+        editorTheme: _
+      }),
+      C || !P ? /* @__PURE__ */ s("div", {
+        className: M.editorLoader,
+        "data-variant": u,
+        style: {
+          width: i,
+          "--code-editor-height": H(h) ? `${h}px` : h
+        },
+        children: l
+      }) : /* @__PURE__ */ s("div", {
+        id: z,
+        className: M.editorWrapper,
+        "data-variant": u,
+        "data-transparent-background": f || void 0,
+        children: /* @__PURE__ */ s(sr, {
+          ...K,
+          height: h,
+          width: i,
+          theme: _,
+          loading: l,
+          beforeMount: (c) => {
+            W({
+              monaco: c,
+              theme: k,
+              colorScheme: L
+            }), e?.(c);
           },
-          onValidate: (e) => {
-            g?.(e);
+          onMount: (c, N) => {
+            T(N), x(c), r?.(c, N);
           },
           options: {
             formatOnPaste: !0,
             formatOnType: !0,
-            fontFamily: f.code.font.family,
+            fontFamily: k.code.font.family,
             bracketPairColorization: { enabled: !1 },
             overviewRulerLanes: 0,
             scrollBeyondLastLine: !1,
@@ -201,38 +308,43 @@ var $ = "baseCodeEditorTheme", r = (o) => {
               horizontal: "hidden"
             },
             minimap: { enabled: !1 },
-            ...U,
-            ...Q
+            ...A === "comfortable" ? { lineDecorationsWidth: y } : {},
+            padding: {
+              bottom: y,
+              top: y
+            },
+            ...m,
+            theme: _
           }
         })
       }),
-      y && /* @__PURE__ */ l(ro, {
-        "aria-label": P,
-        "aria-controls": D,
-        value: B,
-        onValueChange: J
+      v && !C && d(b) && /* @__PURE__ */ s(tr, {
+        "aria-label": w,
+        "aria-controls": z,
+        value: V,
+        onValueChange: Z
       })
     ]
   });
-}, po = "_editorHeader_19qlo_1", ko = "_elementContainer_19qlo_15", L = {
-  editorHeader: po,
-  elementContainer: ko
-}, Lo = ({ title: o, startElement: t, endElement: i, className: c, render: u, ref: g, ...a }) => eo({
-  render: u,
-  ref: g,
+}, Mr = "_editorHeader_19qlo_1", Dr = "_elementContainer_19qlo_15", D = {
+  editorHeader: Mr,
+  elementContainer: Dr
+}, wr = ({ title: r, startElement: e, endElement: o, className: t, render: i, ref: a, ...l }) => nr({
+  render: i,
+  ref: a,
   props: {
-    ...a,
-    className: to(L.editorHeader, c),
-    children: /* @__PURE__ */ x(ao, { children: [/* @__PURE__ */ x("div", {
-      className: L.elementContainer,
-      children: [t, o]
-    }), /* @__PURE__ */ l("div", {
-      className: L.elementContainer,
-      children: i
+    ...l,
+    className: $(D.editorHeader, t),
+    children: /* @__PURE__ */ S(ar, { children: [/* @__PURE__ */ S("div", {
+      className: D.elementContainer,
+      children: [e, r]
+    }), /* @__PURE__ */ s("div", {
+      className: D.elementContainer,
+      children: o
     })] })
   }
 });
 export {
-  So as CodeEditor,
-  Lo as CodeEditorHeader
+  Wr as CodeEditor,
+  wr as CodeEditorHeader
 };

package/dist/components/data-display.mjs

@@ -1,4 +1,4 @@
-import { a, i as r, n as t, r as e, t as s } from "../data-display-DU3G8ZyI.js";
+import { a, i as r, n as t, r as e, t as s } from "../data-display-KyZbLLy-.js";
 import { n as i, t as c } from "../TintedIconTile-4BGa8g8n.js";
 export {
   a as AvatarGroup,