@zhama/tego-ui 0.0.0-stage → 1.36.0

package/dist/config-form/index.d.cts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * The schema shape {@link ConfigForm} renders.
+ *
+ * Structurally the same as the plugin SDK's `PluginConfigSchema`, declared
+ * again here rather than imported: `@tego/ui` is the layer everything else
+ * builds on, and a dependency on the plugin SDK would make the design system
+ * aware of plugins. Callers pass their own type; TypeScript accepts it because
+ * the shapes match.
+ */
+type ConfigFormFieldType = 'string' | 'number' | 'integer' | 'boolean' | 'array';
+interface ConfigFormFieldSchema {
+    type?: ConfigFormFieldType | string;
+    title?: string;
+    description?: string;
+    default?: unknown;
+    enum?: (string | number)[];
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    format?: string;
+    minimum?: number;
+    maximum?: number;
+    items?: {
+        type?: string;
+        enum?: string[];
+    };
+    maxItems?: number;
+    /** Present on a claw schema, which is not held to the flat subset. */
+    properties?: Record<string, unknown>;
+}
+interface ConfigFormSchema {
+    type?: string;
+    properties?: Record<string, ConfigFormFieldSchema>;
+    required?: string[];
+}
+/**
+ * How one field is presented. Text is already resolved to one language — the
+ * design system has no business knowing which one.
+ */
+interface ConfigFormFieldHint {
+    label?: string;
+    help?: string;
+    placeholder?: string;
+    order?: number;
+    /** Collapsed until the operator asks for it. */
+    advanced?: boolean;
+    /**
+     * Rendered as a password field, and its stored value is never sent here.
+     *
+     * The form shows {@link CONFIG_FORM_SECRET_SENTINEL} for a secret that is
+     * set; leaving it untouched submits the sentinel, which the server reads as
+     * "keep what is stored".
+     */
+    sensitive?: boolean;
+}
+
+/**
+ * What the server substitutes for a stored secret, and what writing it back
+ * means: leave the stored value alone.
+ *
+ * The same literal OpenClaw uses. Two sentinels would mean a secret saved
+ * through one console could be clobbered by the other.
+ */
+declare const CONFIG_FORM_SECRET_SENTINEL = "__OPENCLAW_REDACTED__";
+interface ConfigFormLabels {
+    /** Shown on the toggle that reveals `advanced` fields. */
+    advanced: string;
+    /** Empty state when the schema declares nothing. */
+    empty: string;
+    /** Marks a field the section cannot run without. */
+    required: string;
+    /** Help text under a secret field that already has a stored value. */
+    secretStored: string;
+    /** Button that adds an entry to a string list. */
+    addItem: string;
+    /** Warning under a field the form had to fall back to raw JSON for. */
+    rawJson: string;
+    /** Shown under a raw JSON field whose text does not parse. */
+    invalidJson: string;
+}
+interface ConfigFormProps {
+    schema: ConfigFormSchema | null;
+    hints?: Record<string, ConfigFormFieldHint>;
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    disabled?: boolean;
+    /** Field names the caller wants flagged, e.g. from a failed save. */
+    errors?: Record<string, string>;
+    labels?: Partial<ConfigFormLabels>;
+    /** Rendered at the end of a field's label row, e.g. a per-field reset. */
+    renderFieldAction?: (name: string) => ReactNode;
+    className?: string;
+}
+declare function ConfigForm({ schema, hints, values, onChange, disabled, errors, labels: labelOverrides, renderFieldAction, className, }: ConfigFormProps): React.JSX.Element;
+
+export { CONFIG_FORM_SECRET_SENTINEL, ConfigForm, type ConfigFormFieldHint, type ConfigFormFieldSchema, type ConfigFormFieldType, type ConfigFormLabels, type ConfigFormProps, type ConfigFormSchema };

package/dist/config-form/index.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * The schema shape {@link ConfigForm} renders.
+ *
+ * Structurally the same as the plugin SDK's `PluginConfigSchema`, declared
+ * again here rather than imported: `@tego/ui` is the layer everything else
+ * builds on, and a dependency on the plugin SDK would make the design system
+ * aware of plugins. Callers pass their own type; TypeScript accepts it because
+ * the shapes match.
+ */
+type ConfigFormFieldType = 'string' | 'number' | 'integer' | 'boolean' | 'array';
+interface ConfigFormFieldSchema {
+    type?: ConfigFormFieldType | string;
+    title?: string;
+    description?: string;
+    default?: unknown;
+    enum?: (string | number)[];
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    format?: string;
+    minimum?: number;
+    maximum?: number;
+    items?: {
+        type?: string;
+        enum?: string[];
+    };
+    maxItems?: number;
+    /** Present on a claw schema, which is not held to the flat subset. */
+    properties?: Record<string, unknown>;
+}
+interface ConfigFormSchema {
+    type?: string;
+    properties?: Record<string, ConfigFormFieldSchema>;
+    required?: string[];
+}
+/**
+ * How one field is presented. Text is already resolved to one language — the
+ * design system has no business knowing which one.
+ */
+interface ConfigFormFieldHint {
+    label?: string;
+    help?: string;
+    placeholder?: string;
+    order?: number;
+    /** Collapsed until the operator asks for it. */
+    advanced?: boolean;
+    /**
+     * Rendered as a password field, and its stored value is never sent here.
+     *
+     * The form shows {@link CONFIG_FORM_SECRET_SENTINEL} for a secret that is
+     * set; leaving it untouched submits the sentinel, which the server reads as
+     * "keep what is stored".
+     */
+    sensitive?: boolean;
+}
+
+/**
+ * What the server substitutes for a stored secret, and what writing it back
+ * means: leave the stored value alone.
+ *
+ * The same literal OpenClaw uses. Two sentinels would mean a secret saved
+ * through one console could be clobbered by the other.
+ */
+declare const CONFIG_FORM_SECRET_SENTINEL = "__OPENCLAW_REDACTED__";
+interface ConfigFormLabels {
+    /** Shown on the toggle that reveals `advanced` fields. */
+    advanced: string;
+    /** Empty state when the schema declares nothing. */
+    empty: string;
+    /** Marks a field the section cannot run without. */
+    required: string;
+    /** Help text under a secret field that already has a stored value. */
+    secretStored: string;
+    /** Button that adds an entry to a string list. */
+    addItem: string;
+    /** Warning under a field the form had to fall back to raw JSON for. */
+    rawJson: string;
+    /** Shown under a raw JSON field whose text does not parse. */
+    invalidJson: string;
+}
+interface ConfigFormProps {
+    schema: ConfigFormSchema | null;
+    hints?: Record<string, ConfigFormFieldHint>;
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    disabled?: boolean;
+    /** Field names the caller wants flagged, e.g. from a failed save. */
+    errors?: Record<string, string>;
+    labels?: Partial<ConfigFormLabels>;
+    /** Rendered at the end of a field's label row, e.g. a per-field reset. */
+    renderFieldAction?: (name: string) => ReactNode;
+    className?: string;
+}
+declare function ConfigForm({ schema, hints, values, onChange, disabled, errors, labels: labelOverrides, renderFieldAction, className, }: ConfigFormProps): React.JSX.Element;
+
+export { CONFIG_FORM_SECRET_SENTINEL, ConfigForm, type ConfigFormFieldHint, type ConfigFormFieldSchema, type ConfigFormFieldType, type ConfigFormLabels, type ConfigFormProps, type ConfigFormSchema };

package/dist/config-form/index.js

@@ -0,0 +1 @@
+var _=Object.defineProperty;var c=(s,n)=>_(s,"name",{value:n,configurable:!0});import{Label as T,Badge as I,Select as J,SelectTrigger as O,SelectValue as K,SelectContent as L,SelectItem as q,Switch as D,Input as S,Textarea as R}from"../chunk-MVPRTW7Z.js";import{Button as C}from"../chunk-OS64HXLJ.js";import{cn as w}from"../chunk-ULCTAAJ2.js";import"../chunk-QPXIAUJD.js";import{ChevronDown as j,X as z,Plus as B,EyeOff as M,Eye as P}from"lucide-react";import{useState as g,useMemo as V}from"react";import{jsx as r,jsxs as h}from"react/jsx-runtime";var k="__OPENCLAW_REDACTED__",G={advanced:"Advanced",empty:"This section has no settings.",required:"Required",secretStored:"A value is stored. Leave this untouched to keep it.",addItem:"Add",rawJson:"This field is edited as JSON.",invalidJson:"Not valid JSON \u2014 the last valid value is kept."};function X(s,n){const o=new Set(s.required??[]);return Object.entries(s.properties??{}).map(([i,e],l)=>{const t=n[i]??{};return{name:i,schema:e,hint:t,required:o.has(i),advanced:t.advanced===!0,sortKey:[t.order??Number.MAX_SAFE_INTEGER,l]}}).sort((i,e)=>i.sortKey[0]-e.sortKey[0]||i.sortKey[1]-e.sortKey[1]).map(({sortKey:i,...e})=>e)}c(X,"orderFields");function U(s){if(s.enum)return!0;switch(s.type){case"string":case"number":case"integer":case"boolean":return!0;case"array":return s.items?.type==="string";default:return!1}}c(U,"isRenderable");function W({schema:s,hints:n={},values:o,onChange:m,disabled:i=!1,errors:e={},labels:l,renderFieldAction:t,className:u}){const d={...G,...l},[f,N]=g(!1),a=V(()=>s?X(s,n):[],[s,n]);if(a.length===0)return r("p",{className:w("py-6 text-center text-sm text-muted-foreground",u),children:d.empty});const x=a.filter(p=>!p.advanced),v=a.filter(p=>p.advanced),F=c((p,y)=>{const b={...o};y===void 0?delete b[p]:b[p]=y,m(b)},"patch"),E=c(p=>r(H,{field:p,value:o[p.name],error:e[p.name],disabled:i,labels:d,action:t?.(p.name),onChange:c(y=>F(p.name,y),"onChange")},p.name),"renderField");return h("div",{className:w("space-y-1",u),children:[x.map(E),v.length>0&&h("div",{className:"pt-2",children:[h("button",{type:"button",className:"flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground",onClick:c(()=>N(p=>!p),"onClick"),children:[r(j,{className:w("h-3.5 w-3.5 transition-transform",f&&"rotate-180")}),d.advanced,h("span",{className:"opacity-60",children:["(",v.length,")"]})]}),f&&r("div",{className:"mt-1 space-y-1",children:v.map(E)})]})]})}c(W,"ConfigForm");function H({field:s,value:n,error:o,disabled:m,labels:i,action:e,onChange:l}){const{name:t,schema:u,hint:d,required:f}=s,N=d.label??u.title??t,a=d.help??u.description;return h("div",{className:"space-y-1.5 py-2",children:[h("div",{className:"flex items-center gap-2",children:[r(T,{className:"text-sm font-medium",children:N}),f&&r(I,{variant:"outline",className:"h-4 px-1 text-[10px] font-normal",children:i.required}),r("code",{className:"text-[11px] text-muted-foreground/70",children:t}),e&&r("div",{className:"ml-auto",children:e})]}),a&&r("p",{className:"text-xs text-muted-foreground",children:a}),r(Q,{field:s,value:n,disabled:m,labels:i,onChange:l}),o&&r("p",{className:"text-xs text-destructive",children:o})]})}c(H,"ConfigField");function Q({field:s,value:n,disabled:o,labels:m,onChange:i}){const{schema:e,hint:l}=s;if(!U(e))return r($,{value:n,disabled:o,labels:m,onChange:i});if(e.enum)return h(J,{value:n==null?"":String(n),disabled:o,onValueChange:c(t=>i(e.type==="number"||e.type==="integer"?Number(t):t),"onValueChange"),children:[r(O,{className:"h-8 text-sm",children:r(K,{placeholder:l.placeholder??""})}),r(L,{children:e.enum.map(t=>r(q,{value:String(t),children:String(t)},String(t)))})]});if(e.type==="boolean"){const t=typeof n=="boolean"?n:typeof e.default=="boolean"?e.default:!1;return r(D,{checked:t,disabled:o,onCheckedChange:c(u=>i(u),"onCheckedChange")})}return e.type==="number"||e.type==="integer"?r(S,{type:"number",className:"h-8 text-sm",disabled:o,placeholder:l.placeholder??A(e),value:n==null?"":String(n),min:e.minimum,max:e.maximum,onChange:c(t=>{const u=t.target.value;if(u===""){i(void 0);return}const d=Number(u);i(Number.isNaN(d)?u:d)},"onChange")}):e.type==="array"?r(Z,{value:n,disabled:o,labels:m,options:e.items?.enum,maxItems:e.maxItems,onChange:i}):l.sensitive?r(Y,{value:n,disabled:o,labels:m,placeholder:l.placeholder,onChange:i}):r(S,{type:e.format==="email"?"email":"text",className:"h-8 text-sm",disabled:o,placeholder:l.placeholder??A(e),value:n==null?"":String(n),onChange:c(t=>i(t.target.value===""?void 0:t.target.value),"onChange")})}c(Q,"ConfigInput");function A(s){return s.default===void 0?"":String(s.default)}c(A,"defaultPlaceholder");function Y({value:s,disabled:n,labels:o,placeholder:m,onChange:i}){const[e,l]=g(!1),t=s===k,u=s==null?"":String(s);return h("div",{className:"space-y-1",children:[h("div",{className:"flex items-center gap-2",children:[r(S,{type:e&&!t?"text":"password",className:"h-8 text-sm",disabled:n,placeholder:m??"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",value:u,onFocus:c(()=>{t&&i(void 0)},"onFocus"),onChange:c(d=>i(d.target.value===""?void 0:d.target.value),"onChange")}),r(C,{type:"button",variant:"outline",size:"icon",className:"h-8 w-8 shrink-0 text-muted-foreground",disabled:n||t,onClick:c(()=>l(d=>!d),"onClick"),children:e?r(M,{className:"h-3.5 w-3.5"}):r(P,{className:"h-3.5 w-3.5"})})]}),t&&r("p",{className:"text-xs text-muted-foreground",children:o.secretStored})]})}c(Y,"SecretField");function Z({value:s,disabled:n,labels:o,options:m,maxItems:i,onChange:e}){const l=Array.isArray(s)?s.filter(a=>typeof a=="string"):[],[t,u]=g(""),d=i!==void 0&&l.length>=i,f=c(a=>e(a.length===0?void 0:a),"commit");if(m)return r("div",{className:"flex flex-wrap gap-1.5",children:m.map(a=>{const x=l.includes(a);return r(C,{type:"button",size:"sm",variant:x?"default":"outline",className:"h-7 text-xs",disabled:n||!x&&d,onClick:c(()=>f(x?l.filter(v=>v!==a):[...l,a]),"onClick"),children:a},a)})});const N=c(()=>{const a=t.trim();a===""||l.includes(a)||(f([...l,a]),u(""))},"add");return h("div",{className:"space-y-1.5",children:[l.length>0&&r("div",{className:"flex flex-wrap gap-1.5",children:l.map(a=>h("span",{className:"inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs",children:[a,r("button",{type:"button",disabled:n,className:"text-muted-foreground transition-colors hover:text-destructive",onClick:c(()=>f(l.filter(x=>x!==a)),"onClick"),children:r(z,{className:"h-3 w-3"})})]},a))}),h("div",{className:"flex items-center gap-2",children:[r(S,{className:"h-8 text-sm",disabled:n||d,value:t,onChange:c(a=>u(a.target.value),"onChange"),onKeyDown:c(a=>{a.key==="Enter"&&(a.preventDefault(),N())},"onKeyDown")}),h(C,{type:"button",variant:"outline",size:"sm",className:"h-8 shrink-0 text-xs",disabled:n||d||t.trim()==="",onClick:N,children:[r(B,{className:"mr-1 h-3.5 w-3.5"}),o.addItem]})]})]})}c(Z,"StringListField");function $({value:s,disabled:n,labels:o,onChange:m}){const[i,e]=g(()=>s===void 0?"":JSON.stringify(s,null,2)),[l,t]=g(!0);return h("div",{className:"space-y-1",children:[r(R,{rows:4,spellCheck:!1,disabled:n,className:"font-mono text-xs",value:i,onChange:c(u=>{const d=u.target.value;if(e(d),d.trim()===""){t(!0),m(void 0);return}try{m(JSON.parse(d)),t(!0)}catch{t(!1)}},"onChange")}),r("p",{className:w("text-xs",l?"text-muted-foreground":"text-destructive"),children:l?o.rawJson:o.invalidJson})]})}c($,"JsonField");export{k as CONFIG_FORM_SECRET_SENTINEL,W as ConfigForm};

package/dist/design-system/index.cjs

@@ -0,0 +1 @@
+"use strict";var n=Object.defineProperty;var e=(t,r)=>n(t,"name",{value:r,configurable:!0});var chunkUQZZ6WIZ_cjs=require("../chunk-UQZZ6WIZ.cjs");require("../chunk-6HRT65AA.cjs"),Object.defineProperty(exports,"animations",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.animations},"get")}),Object.defineProperty(exports,"breakpoints",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.breakpoints},"get")}),Object.defineProperty(exports,"buildBadgeClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.buildBadgeClass},"get")}),Object.defineProperty(exports,"buildButtonClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.buildButtonClass},"get")}),Object.defineProperty(exports,"buildCardClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.buildCardClass},"get")}),Object.defineProperty(exports,"buildFocusableClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.buildFocusableClass},"get")}),Object.defineProperty(exports,"buildGridClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.buildGridClass},"get")}),Object.defineProperty(exports,"buildInputClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.buildInputClass},"get")}),Object.defineProperty(exports,"buildSkeletonClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.buildSkeletonClass},"get")}),Object.defineProperty(exports,"buildTableClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.buildTableClass},"get")}),Object.defineProperty(exports,"chatBubbles",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.chatBubbles},"get")}),Object.defineProperty(exports,"cn",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.cn},"get")}),Object.defineProperty(exports,"colors",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.colors},"get")}),Object.defineProperty(exports,"combineTokens",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.combineTokens},"get")}),Object.defineProperty(exports,"designTokens",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.designTokens},"get")}),Object.defineProperty(exports,"focusRing",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.focusRing},"get")}),Object.defineProperty(exports,"getAnimation",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.getAnimation},"get")}),Object.defineProperty(exports,"getContainerClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.getContainerClass},"get")}),Object.defineProperty(exports,"getIconSize",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.getIconSize},"get")}),Object.defineProperty(exports,"getSpacing",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.getSpacing},"get")}),Object.defineProperty(exports,"getStateStyle",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.getStateStyle},"get")}),Object.defineProperty(exports,"getStatusBadgeVariant",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.getStatusBadgeVariant},"get")}),Object.defineProperty(exports,"getStatusColor",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.getStatusColor},"get")}),Object.defineProperty(exports,"getTruncateClass",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.getTruncateClass},"get")}),Object.defineProperty(exports,"getTypography",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.getTypography},"get")}),Object.defineProperty(exports,"iconSizes",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.iconSizes},"get")}),Object.defineProperty(exports,"interactions",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.interactions},"get")}),Object.defineProperty(exports,"layout",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.layout},"get")}),Object.defineProperty(exports,"presets",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.presets},"get")}),Object.defineProperty(exports,"radius",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.radius},"get")}),Object.defineProperty(exports,"shadows",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.shadows},"get")}),Object.defineProperty(exports,"spacing",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.spacing},"get")}),Object.defineProperty(exports,"states",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.states},"get")}),Object.defineProperty(exports,"surfaces",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.surfaces},"get")}),Object.defineProperty(exports,"transitions",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.transitions},"get")}),Object.defineProperty(exports,"truncate",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.truncate},"get")}),Object.defineProperty(exports,"typography",{enumerable:!0,get:e(function(){return chunkUQZZ6WIZ_cjs.typography},"get")});