@uipath/apollo-wind 2.63.0 → 2.65.0

package/dist/components/forms/mode-aware-field.js

@@ -10,6 +10,7 @@ import { Input } from "../ui/input.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { PromptValueControl } from "../ui/prompt-value-control.js";
 import { VariableValueControl } from "../ui/variable-value-control.js";
+import { joinIds } from "./aria-ids.js";
 import { DEFAULT_FIELD_ACTION_REGISTRY, resolveFieldActions, resolveVariables } from "./field-actions.js";
 import { FIELD_CONTROL_GEOMETRY, FieldControl } from "./field-control.js";
 import { DEFAULT_METADATA_FORM_STRINGS } from "./form-strings.js";
@@ -67,7 +68,7 @@ const TEXT_GEOMETRY = {
     labelTarget: 'control',
     insertable: true
 };
-function FieldAnatomy({ field, context, customComponents, disabled, required, options, formField, error }) {
+function FieldAnatomy({ field, context, customComponents, disabled, required, options, formField, error, describedBy }) {
     const form = useFormContext();
     const registry = context.valueModes ?? DEFAULT_VALUE_MODE_REGISTRY;
     const actionRegistry = context.fieldActions ?? DEFAULT_FIELD_ACTION_REGISTRY;
@@ -76,6 +77,7 @@ function FieldAnatomy({ field, context, customComponents, disabled, required, op
     const { name } = field;
     const errorId = `${name}-error`;
     const labelId = `${name}-label`;
+    const controlDescribedBy = joinIds(error && errorId, describedBy);
     const formVariables = context.variables;
     const variables = useCallback(()=>resolveVariables(formVariables, field), [
         formVariables,
@@ -235,6 +237,7 @@ function FieldAnatomy({ field, context, customComponents, disabled, required, op
         required,
         error,
         errorId,
+        describedBy,
         valueModeProps: ()=>({
                 value: inner,
                 onChange: (next)=>writeInner(next),
@@ -258,7 +261,7 @@ function FieldAnatomy({ field, context, customComponents, disabled, required, op
                 controlProps: {
                     'data-slot': 'input-group-control',
                     'aria-invalid': error ? true : void 0,
-                    'aria-describedby': error ? errorId : void 0,
+                    'aria-describedby': controlDescribedBy,
                     'aria-errormessage': error ? errorId : void 0
                 }
             })
@@ -492,7 +495,7 @@ function resolveControl(input) {
         source: 'fallback'
     };
 }
-function FallbackControl({ field, binding, disabled, error, errorId }) {
+function FallbackControl({ field, binding, disabled, error, errorId, describedBy }) {
     const { value } = binding;
     return /*#__PURE__*/ jsx(Input, {
         id: field.name,
@@ -504,7 +507,7 @@ function FallbackControl({ field, binding, disabled, error, errorId }) {
         placeholder: field.placeholder,
         disabled: disabled,
         "aria-invalid": error ? true : void 0,
-        "aria-describedby": error ? errorId : void 0,
+        "aria-describedby": joinIds(error && errorId, describedBy),
         "aria-errormessage": error ? errorId : void 0
     });
 }
@@ -533,7 +536,8 @@ function builtInLiteral(input) {
                 required: required,
                 error: error,
                 controlRef: input.controlRef,
-                labelId: input.labelId
+                labelId: input.labelId,
+                "aria-describedby": joinIds(field.componentProps?.['aria-describedby'], input.describedBy)
             }),
             geometry: registrationGeometry(registration),
             source: 'custom'
@@ -546,7 +550,8 @@ function builtInLiteral(input) {
             options: options,
             disabled: disabled,
             invalid: !!error,
-            strings: strings.boolean
+            strings: strings.boolean,
+            describedBy: input.describedBy
         }),
         geometry: FIELD_CONTROL_GEOMETRY[field.type] ?? unfittedGeometry(field),
         source: 'field-type'

package/dist/components/forms/string-list-field.cjs

@@ -37,7 +37,7 @@ const textarea_cjs_namespaceObject = require("../ui/textarea.cjs");
 function formatTemplate(template, values) {
     return template.replace(/\{\{(\w+)\}\}/g, (match, token)=>token in values ? String(values[token]) : match);
 }
-function StringListField({ field, value, onChange, onBlur, error, disabled = false, required = false, inputRef }) {
+function StringListField({ field, value, onChange, onBlur, error, disabled = false, required = false, inputRef, ariaDescribedBy = error ? `${field.name}-error` : void 0 }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
         "data-slot": "string-list-field",
         children: [
@@ -54,7 +54,8 @@ function StringListField({ field, value, onChange, onBlur, error, disabled = fal
                 onBlur: onBlur,
                 invalid: !!error,
                 disabled: disabled,
-                inputRef: inputRef
+                inputRef: inputRef,
+                ariaDescribedBy: ariaDescribedBy
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
                 children: field.description
@@ -66,7 +67,7 @@ function StringListField({ field, value, onChange, onBlur, error, disabled = fal
         ]
     });
 }
-function StringListControl({ field, value, onChange, onBlur, invalid = false, disabled = false, inputRef }) {
+function StringListControl({ field, value, onChange, onBlur, invalid = false, disabled = false, inputRef, ariaDescribedBy = invalid ? `${field.name}-error` : void 0 }) {
     const items = value ?? [];
     const maxItems = field.maxItems ?? 1 / 0;
     const canAdd = !disabled && items.length < maxItems;
@@ -126,7 +127,7 @@ function StringListControl({ field, value, onChange, onBlur, invalid = false, di
                                 disabled: disabled,
                                 "aria-label": `${field.label} ${index + 1}`,
                                 "aria-invalid": invalid || void 0,
-                                "aria-describedby": invalid ? `${field.name}-error` : void 0,
+                                "aria-describedby": ariaDescribedBy,
                                 "aria-errormessage": invalid ? `${field.name}-error` : void 0,
                                 className: "flex-1"
                             }),

package/dist/components/forms/string-list-field.d.ts

@@ -18,6 +18,8 @@ export interface StringListFieldProps {
      * indication of where it is.
      */
     inputRef?: React.Ref<HTMLTextAreaElement>;
+    /** Every row's aria-describedby. Defaults to the error message's id while there is an error. */
+    ariaDescribedBy?: string;
 }
 /**
  * Repeated multiline rows with Add / Remove — the `string-list` field type.
@@ -26,10 +28,10 @@ export interface StringListFieldProps {
  * the info trigger is a Radix tooltip, which throws without one. Inside `MetadataForm` this
  * is handled for you — it mounts a provider for schemas that use tooltip metadata.
  */
-export declare function StringListField({ field, value, onChange, onBlur, error, disabled, required, inputRef, }: StringListFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function StringListField({ field, value, onChange, onBlur, error, disabled, required, inputRef, ariaDescribedBy, }: StringListFieldProps): import("react/jsx-runtime").JSX.Element;
 export interface StringListControlProps extends Omit<StringListFieldProps, 'error' | 'required'> {
     /** Marks every row invalid and points it at the `${field.name}-error` message. */
     invalid?: boolean;
 }
 /** The rows and Add button of a string list, without its label, description or error. */
-export declare function StringListControl({ field, value, onChange, onBlur, invalid, disabled, inputRef, }: StringListControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function StringListControl({ field, value, onChange, onBlur, invalid, disabled, inputRef, ariaDescribedBy, }: StringListControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/string-list-field.js

@@ -7,7 +7,7 @@ import { Textarea } from "../ui/textarea.js";
 function formatTemplate(template, values) {
     return template.replace(/\{\{(\w+)\}\}/g, (match, token)=>token in values ? String(values[token]) : match);
 }
-function StringListField({ field, value, onChange, onBlur, error, disabled = false, required = false, inputRef }) {
+function StringListField({ field, value, onChange, onBlur, error, disabled = false, required = false, inputRef, ariaDescribedBy = error ? `${field.name}-error` : void 0 }) {
     return /*#__PURE__*/ jsxs(FormField, {
         "data-slot": "string-list-field",
         children: [
@@ -24,7 +24,8 @@ function StringListField({ field, value, onChange, onBlur, error, disabled = fal
                 onBlur: onBlur,
                 invalid: !!error,
                 disabled: disabled,
-                inputRef: inputRef
+                inputRef: inputRef,
+                ariaDescribedBy: ariaDescribedBy
             }),
             /*#__PURE__*/ jsx(FormFieldDescription, {
                 children: field.description
@@ -36,7 +37,7 @@ function StringListField({ field, value, onChange, onBlur, error, disabled = fal
         ]
     });
 }
-function StringListControl({ field, value, onChange, onBlur, invalid = false, disabled = false, inputRef }) {
+function StringListControl({ field, value, onChange, onBlur, invalid = false, disabled = false, inputRef, ariaDescribedBy = invalid ? `${field.name}-error` : void 0 }) {
     const items = value ?? [];
     const maxItems = field.maxItems ?? 1 / 0;
     const canAdd = !disabled && items.length < maxItems;
@@ -96,7 +97,7 @@ function StringListControl({ field, value, onChange, onBlur, invalid = false, di
                                 disabled: disabled,
                                 "aria-label": `${field.label} ${index + 1}`,
                                 "aria-invalid": invalid || void 0,
-                                "aria-describedby": invalid ? `${field.name}-error` : void 0,
+                                "aria-describedby": ariaDescribedBy,
                                 "aria-errormessage": invalid ? `${field.name}-error` : void 0,
                                 className: "flex-1"
                             }),

package/dist/components/ui/index.cjs

@@ -39,7 +39,7 @@ var __webpack_modules__ = {
     "./chart" (module) {
         module.exports = require("./chart.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
     "./collapsible" (module) {
@@ -51,7 +51,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "./context-menu" (module) {
+    "@/components/ui/context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -63,13 +63,13 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./drawer" (module) {
         module.exports = require("./drawer.cjs");
     },
-    "./dropdown-menu" (module) {
+    "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
     "./editable-cell" (module) {
@@ -105,7 +105,7 @@ var __webpack_modules__ = {
     "./json-tree-view" (module) {
         module.exports = require("./json-tree-view/index.cjs");
     },
-    "@/components/ui/label" (module) {
+    "./label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -162,6 +162,9 @@ var __webpack_modules__ = {
     "./sheet" (module) {
         module.exports = require("./sheet.cjs");
     },
+    "./sidebar" (module) {
+        module.exports = require("./sidebar/index.cjs");
+    },
     "./skeleton" (module) {
         module.exports = require("./skeleton.cjs");
     },
@@ -183,19 +186,19 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "./textarea" (module) {
+    "@/components/ui/textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -204,7 +207,7 @@ var __webpack_modules__ = {
     "./tree-view" (module) {
         module.exports = require("./tree-view.cjs");
     },
-    "./variable-picker" (module) {
+    "@/components/ui/variable-picker" (module) {
         module.exports = require("./variable-picker/index.cjs");
     },
     "./variable-value-control" (module) {
@@ -255,8 +258,8 @@ var __webpack_exports__ = {};
 (()=>{
     __webpack_require__.r(__webpack_exports__);
     __webpack_require__.d(__webpack_exports__, {
-        FileTreeView: ()=>_tree_view__rspack_import_67_default.a,
-        TreeView: ()=>_tree_view__rspack_import_67.TreeView
+        FileTreeView: ()=>_tree_view__rspack_import_68_default.a,
+        TreeView: ()=>_tree_view__rspack_import_68.TreeView
     });
     var _accordion__rspack_import_0 = __webpack_require__("./accordion");
     var __rspack_reexport = {};
@@ -362,7 +365,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_chart__rspack_import_12[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_13 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_13 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_13)if ([
         "default",
@@ -394,7 +397,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_16[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_17 = __webpack_require__("./context-menu");
+    var _context_menu__rspack_import_17 = __webpack_require__("@/components/ui/context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_17)if ([
         "default",
@@ -426,7 +429,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_21 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_21 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_21)if ([
         "default",
@@ -442,7 +445,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_drawer__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_23 = __webpack_require__("./dropdown-menu");
+    var _dropdown_menu__rspack_import_23 = __webpack_require__("@/components/ui/dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_23)if ([
         "default",
@@ -538,7 +541,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_34[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_35 = __webpack_require__("@/components/ui/label");
+    var _label__rspack_import_35 = __webpack_require__("./label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_35)if ([
         "default",
@@ -682,135 +685,143 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_separator__rspack_import_52[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _sheet__rspack_import_53 = __webpack_require__("./sheet");
+    var _sidebar__rspack_import_53 = __webpack_require__("./sidebar");
+    var __rspack_reexport = {};
+    for(const __rspack_import_key in _sidebar__rspack_import_53)if ([
+        "default",
+        "FileTreeView",
+        "TreeView"
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_sidebar__rspack_import_53[__rspack_import_key];
+    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
+    var _sheet__rspack_import_54 = __webpack_require__("./sheet");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _sheet__rspack_import_53)if ([
+    for(const __rspack_import_key in _sheet__rspack_import_54)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_sheet__rspack_import_53[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_sheet__rspack_import_54[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _skeleton__rspack_import_54 = __webpack_require__("./skeleton");
+    var _skeleton__rspack_import_55 = __webpack_require__("./skeleton");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _skeleton__rspack_import_54)if ([
+    for(const __rspack_import_key in _skeleton__rspack_import_55)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_skeleton__rspack_import_54[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_skeleton__rspack_import_55[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _slider__rspack_import_55 = __webpack_require__("./slider");
+    var _slider__rspack_import_56 = __webpack_require__("./slider");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _slider__rspack_import_55)if ([
+    for(const __rspack_import_key in _slider__rspack_import_56)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_slider__rspack_import_55[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_slider__rspack_import_56[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _sonner__rspack_import_56 = __webpack_require__("./sonner");
+    var _sonner__rspack_import_57 = __webpack_require__("./sonner");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _sonner__rspack_import_56)if ([
+    for(const __rspack_import_key in _sonner__rspack_import_57)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_sonner__rspack_import_56[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_sonner__rspack_import_57[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _spinner__rspack_import_57 = __webpack_require__("./spinner");
+    var _spinner__rspack_import_58 = __webpack_require__("./spinner");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _spinner__rspack_import_57)if ([
+    for(const __rspack_import_key in _spinner__rspack_import_58)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_spinner__rspack_import_57[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_spinner__rspack_import_58[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _stats_card__rspack_import_58 = __webpack_require__("./stats-card");
+    var _stats_card__rspack_import_59 = __webpack_require__("./stats-card");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _stats_card__rspack_import_58)if ([
+    for(const __rspack_import_key in _stats_card__rspack_import_59)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_stats_card__rspack_import_58[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_stats_card__rspack_import_59[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _stepper__rspack_import_59 = __webpack_require__("./stepper");
+    var _stepper__rspack_import_60 = __webpack_require__("./stepper");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _stepper__rspack_import_59)if ([
+    for(const __rspack_import_key in _stepper__rspack_import_60)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_stepper__rspack_import_59[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_stepper__rspack_import_60[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _switch__rspack_import_60 = __webpack_require__("./switch");
+    var _switch__rspack_import_61 = __webpack_require__("./switch");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _switch__rspack_import_60)if ([
+    for(const __rspack_import_key in _switch__rspack_import_61)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_60[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_61[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_61 = __webpack_require__("./table");
+    var _table__rspack_import_62 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _table__rspack_import_61)if ([
+    for(const __rspack_import_key in _table__rspack_import_62)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_table__rspack_import_61[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_table__rspack_import_62[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tabs__rspack_import_62 = __webpack_require__("./tabs");
+    var _tabs__rspack_import_63 = __webpack_require__("./tabs");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _tabs__rspack_import_62)if ([
+    for(const __rspack_import_key in _tabs__rspack_import_63)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_62[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_63[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_63 = __webpack_require__("./textarea");
+    var _textarea__rspack_import_64 = __webpack_require__("@/components/ui/textarea");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _textarea__rspack_import_63)if ([
+    for(const __rspack_import_key in _textarea__rspack_import_64)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_63[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_64[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_64 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_65 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _toggle__rspack_import_64)if ([
+    for(const __rspack_import_key in _toggle__rspack_import_65)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle__rspack_import_64[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle__rspack_import_65[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle_group__rspack_import_65 = __webpack_require__("./toggle-group");
+    var _toggle_group__rspack_import_66 = __webpack_require__("./toggle-group");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _toggle_group__rspack_import_65)if ([
+    for(const __rspack_import_key in _toggle_group__rspack_import_66)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle_group__rspack_import_65[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle_group__rspack_import_66[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tooltip__rspack_import_66 = __webpack_require__("./tooltip");
+    var _tooltip__rspack_import_67 = __webpack_require__("./tooltip");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _tooltip__rspack_import_66)if ([
+    for(const __rspack_import_key in _tooltip__rspack_import_67)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tooltip__rspack_import_66[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tooltip__rspack_import_67[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tree_view__rspack_import_67 = __webpack_require__("./tree-view");
-    var _tree_view__rspack_import_67_default = /*#__PURE__*/ __webpack_require__.n(_tree_view__rspack_import_67);
-    var _variable_picker__rspack_import_68 = __webpack_require__("./variable-picker");
+    var _tree_view__rspack_import_68 = __webpack_require__("./tree-view");
+    var _tree_view__rspack_import_68_default = /*#__PURE__*/ __webpack_require__.n(_tree_view__rspack_import_68);
+    var _variable_picker__rspack_import_69 = __webpack_require__("@/components/ui/variable-picker");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _variable_picker__rspack_import_68)if ([
+    for(const __rspack_import_key in _variable_picker__rspack_import_69)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_variable_picker__rspack_import_68[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_variable_picker__rspack_import_69[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _variable_value_control__rspack_import_69 = __webpack_require__("./variable-value-control");
+    var _variable_value_control__rspack_import_70 = __webpack_require__("./variable-value-control");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _variable_value_control__rspack_import_69)if ([
+    for(const __rspack_import_key in _variable_value_control__rspack_import_70)if ([
         "default",
         "FileTreeView",
         "TreeView"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_variable_value_control__rspack_import_69[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_variable_value_control__rspack_import_70[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
 })();
 exports.FileTreeView = __webpack_exports__.FileTreeView;

package/dist/components/ui/index.d.ts

@@ -51,6 +51,7 @@ export * from './scroll-area';
 export * from './search';
 export * from './select';
 export * from './separator';
+export * from './sidebar';
 export * from './sheet';
 export * from './skeleton';
 export * from './slider';

package/dist/components/ui/index.js

@@ -52,6 +52,7 @@ export * from "./scroll-area.js";
 export * from "./search.js";
 export * from "./select.js";
 export * from "./separator.js";
+export * from "./sidebar/index.js";
 export * from "./sheet.js";
 export * from "./skeleton.js";
 export * from "./slider.js";

package/dist/components/ui/json-tree-view/JsonTree.types.d.ts

@@ -104,6 +104,19 @@ export interface NodeDecorationBadge {
      * neutral default, e.g. `'border-info/30 bg-info/10 text-info'`.
      */
     className?: string;
+    /**
+     * Marks the node as a reference to another variable. The badge gets a
+     * corner tab with an arrow, and its tooltip names the reference.
+     */
+    reference?: NodeBadgeReference;
+}
+/** A reference marker on a row's type badge. */
+export interface NodeBadgeReference {
+    /**
+     * Where the value comes from, shown under the tooltip title
+     * (e.g. `'Live from Read customer · output.email'`).
+     */
+    source?: string;
 }
 /** Consumer-provided visual annotation for a tree node. */
 export interface NodeDecoration {

package/dist/components/ui/json-tree-view/JsonTreeRow.cjs

@@ -151,7 +151,8 @@ function JsonTreeRow({ node, depth }) {
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTypeBadge_cjs_namespaceObject.JsonTypeBadge, {
                         type: node.type,
                         icon: decoration?.badge?.icon ?? deriveTypeIcon?.(node),
-                        className: decoration?.badge?.className
+                        className: decoration?.badge?.className,
+                        reference: decoration?.badge?.reference
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeKey_cjs_namespaceObject.NodeKey, {
                         node: node,

package/dist/components/ui/json-tree-view/JsonTreeRow.js

@@ -121,7 +121,8 @@ function JsonTreeRow({ node, depth }) {
                     /*#__PURE__*/ jsx(JsonTypeBadge, {
                         type: node.type,
                         icon: decoration?.badge?.icon ?? deriveTypeIcon?.(node),
-                        className: decoration?.badge?.className
+                        className: decoration?.badge?.className,
+                        reference: decoration?.badge?.reference
                     }),
                     /*#__PURE__*/ jsx(NodeKey, {
                         node: node,

package/dist/components/ui/json-tree-view/JsonTypeBadge.cjs

@@ -27,9 +27,10 @@ __webpack_require__.d(__webpack_exports__, {
     JsonTypeBadge: ()=>JsonTypeBadge
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../../lib/index.cjs");
 const external_lucide_react_namespaceObject = require("lucide-react");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
 const external_JsonTreeTooltip_cjs_namespaceObject = require("./JsonTreeTooltip.cjs");
+const external_strings_cjs_namespaceObject = require("./strings.cjs");
 const TYPE_ICON = {
     string: external_lucide_react_namespaceObject.Type,
     number: external_lucide_react_namespaceObject.Hash,
@@ -46,18 +47,54 @@ const TYPE_LABEL = {
     array: 'Array',
     null: 'Null'
 };
-function JsonTypeBadge({ type, icon, className, tooltip }) {
+function JsonTypeBadge({ type, icon, className, tooltip, reference }) {
+    const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
     const DefaultIcon = TYPE_ICON[type];
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeTooltip_cjs_namespaceObject.JsonTreeTooltip, {
+    const box = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        className: (0, index_cjs_namespaceObject.cn)('inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded border border-border bg-surface-overlay px-0.5 text-foreground-muted [&_svg]:size-2.75', className),
+        children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultIcon, {})
+    });
+    if (!reference) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeTooltip_cjs_namespaceObject.JsonTreeTooltip, {
         content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
             className: "break-all font-mono text-xs font-semibold leading-4",
             children: tooltip ?? TYPE_LABEL[type]
         }),
         placement: "top",
         delay: true,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-            className: (0, index_cjs_namespaceObject.cn)('inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded border border-border bg-surface-overlay px-0.5 text-foreground-muted [&_svg]:size-2.75', className),
-            children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultIcon, {})
+        children: box
+    });
+    const title = strings.referenceType(TYPE_LABEL[type]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeTooltip_cjs_namespaceObject.JsonTreeTooltip, {
+        content: tooltip ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+            className: "flex flex-col gap-0.5 leading-4",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-xs font-semibold",
+                    children: title
+                }),
+                reference.source && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "break-all text-xs text-foreground-muted",
+                    children: reference.source
+                })
+            ]
+        }),
+        placement: "top",
+        delay: true,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+            className: "relative inline-flex shrink-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            role: "img",
+            tabIndex: 0,
+            "aria-label": reference.source ? `${title}, ${reference.source}` : title,
+            children: [
+                box,
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "absolute -right-1 -bottom-1 grid size-3 place-items-center rounded-[3px] border border-border bg-surface-overlay text-foreground-muted",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ArrowUpRight, {
+                        className: "size-2.5",
+                        strokeWidth: 3
+                    })
+                })
+            ]
         })
     });
 }