@uipath/apollo-wind 2.63.0 → 2.64.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

@@ -42,7 +42,7 @@ var __webpack_modules__ = {
     "@/components/ui/checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "./collapsible" (module) {
+    "@/components/ui/collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (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) {
@@ -69,10 +69,10 @@ var __webpack_modules__ = {
     "./drawer" (module) {
         module.exports = require("./drawer.cjs");
     },
-    "./dropdown-menu" (module) {
+    "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "./editable-cell" (module) {
+    "@/components/ui/editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -90,10 +90,10 @@ var __webpack_modules__ = {
     "./form-field" (module) {
         module.exports = require("./form-field.cjs");
     },
-    "@/components/ui/hover-card" (module) {
+    "./hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "./info-tooltip" (module) {
+    "@/components/ui/info-tooltip" (module) {
         module.exports = require("./info-tooltip.cjs");
     },
     "@/components/ui/input-group" (module) {
@@ -108,7 +108,7 @@ var __webpack_modules__ = {
     "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
-    "./layout" (module) {
+    "@/components/ui/layout" (module) {
         module.exports = require("./layout/index.cjs");
     },
     "./lockable-value-field" (module) {
@@ -183,28 +183,28 @@ 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) {
+    "@/components/ui/tooltip" (module) {
         module.exports = require("./tooltip.cjs");
     },
     "./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) {
@@ -370,7 +370,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_13[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_14 = __webpack_require__("./collapsible");
+    var _collapsible__rspack_import_14 = __webpack_require__("@/components/ui/collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_14)if ([
         "default",
@@ -394,7 +394,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",
@@ -442,7 +442,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",
@@ -450,7 +450,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_23[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_24 = __webpack_require__("./editable-cell");
+    var _editable_cell__rspack_import_24 = __webpack_require__("@/components/ui/editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_24)if ([
         "default",
@@ -498,7 +498,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_form_field__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_30 = __webpack_require__("@/components/ui/hover-card");
+    var _hover_card__rspack_import_30 = __webpack_require__("./hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_30)if ([
         "default",
@@ -506,7 +506,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_30[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _info_tooltip__rspack_import_31 = __webpack_require__("./info-tooltip");
+    var _info_tooltip__rspack_import_31 = __webpack_require__("@/components/ui/info-tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _info_tooltip__rspack_import_31)if ([
         "default",
@@ -546,7 +546,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_label__rspack_import_35[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _layout__rspack_import_36 = __webpack_require__("./layout");
+    var _layout__rspack_import_36 = __webpack_require__("@/components/ui/layout");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _layout__rspack_import_36)if ([
         "default",
@@ -746,7 +746,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_60[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_61 = __webpack_require__("./table");
+    var _table__rspack_import_61 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_61)if ([
         "default",
@@ -762,7 +762,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_62[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_63 = __webpack_require__("./textarea");
+    var _textarea__rspack_import_63 = __webpack_require__("@/components/ui/textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_63)if ([
         "default",
@@ -770,7 +770,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_63[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_64 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_64 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_64)if ([
         "default",
@@ -786,7 +786,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle_group__rspack_import_65[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tooltip__rspack_import_66 = __webpack_require__("./tooltip");
+    var _tooltip__rspack_import_66 = __webpack_require__("@/components/ui/tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _tooltip__rspack_import_66)if ([
         "default",
@@ -796,7 +796,7 @@ var __webpack_exports__ = {};
     __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 _variable_picker__rspack_import_68 = __webpack_require__("@/components/ui/variable-picker");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _variable_picker__rspack_import_68)if ([
         "default",

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
+                    })
+                })
+            ]
         })
     });
 }

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { JsonTreeNodeType } from './JsonTree.types';
+import type { JsonTreeNodeType, NodeBadgeReference } from './JsonTree.types';
 export interface JsonTypeBadgeProps {
     type: JsonTreeNodeType;
     /** Replaces the default type icon (e.g. a paperclip for file nodes). */
@@ -8,10 +8,13 @@ export interface JsonTypeBadgeProps {
     className?: string;
     /** Tooltip content on hover. Defaults to the capitalized type name. */
     tooltip?: ReactNode;
+    /** Marks the value as a reference: adds a corner tab with an arrow. */
+    reference?: NodeBadgeReference;
 }
 /**
  * Compact badge for a JSON value type. Deliberately neutral: the value text
  * carries the color coding, the badge only carries the type icon. Hovering it
- * shows the type name (override via `tooltip`).
+ * shows the type name (override via `tooltip`). A `reference` adds a corner
+ * tab with an arrow; it has no hover state of its own, only the tooltip.
  */
-export declare function JsonTypeBadge({ type, icon, className, tooltip }: JsonTypeBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonTypeBadge({ type, icon, className, tooltip, reference }: JsonTypeBadgeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpRight, Braces, Brackets, CircleSlash2, Hash, ToggleLeft, Type } from "lucide-react";
 import { cn } from "../../../lib/index.js";
-import { Braces, Brackets, CircleSlash2, Hash, ToggleLeft, Type } from "lucide-react";
 import { JsonTreeTooltip } from "./JsonTreeTooltip.js";
+import { useJsonTreeViewStrings } from "./strings.js";
 const TYPE_ICON = {
     string: Type,
     number: Hash,
@@ -18,18 +19,54 @@ const TYPE_LABEL = {
     array: 'Array',
     null: 'Null'
 };
-function JsonTypeBadge({ type, icon, className, tooltip }) {
+function JsonTypeBadge({ type, icon, className, tooltip, reference }) {
+    const strings = useJsonTreeViewStrings();
     const DefaultIcon = TYPE_ICON[type];
-    return /*#__PURE__*/ jsx(JsonTreeTooltip, {
+    const box = /*#__PURE__*/ jsx("span", {
+        className: 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__*/ jsx(DefaultIcon, {})
+    });
+    if (!reference) return /*#__PURE__*/ jsx(JsonTreeTooltip, {
         content: /*#__PURE__*/ jsx("span", {
             className: "break-all font-mono text-xs font-semibold leading-4",
             children: tooltip ?? TYPE_LABEL[type]
         }),
         placement: "top",
         delay: true,
-        children: /*#__PURE__*/ jsx("span", {
-            className: 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__*/ jsx(DefaultIcon, {})
+        children: box
+    });
+    const title = strings.referenceType(TYPE_LABEL[type]);
+    return /*#__PURE__*/ jsx(JsonTreeTooltip, {
+        content: tooltip ?? /*#__PURE__*/ jsxs("span", {
+            className: "flex flex-col gap-0.5 leading-4",
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: "text-xs font-semibold",
+                    children: title
+                }),
+                reference.source && /*#__PURE__*/ jsx("span", {
+                    className: "break-all text-xs text-foreground-muted",
+                    children: reference.source
+                })
+            ]
+        }),
+        placement: "top",
+        delay: true,
+        children: /*#__PURE__*/ 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__*/ 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__*/ jsx(ArrowUpRight, {
+                        className: "size-2.5",
+                        strokeWidth: 3
+                    })
+                })
+            ]
         })
     });
 }

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

@@ -7,4 +7,4 @@ export * from './JsonTree';
 export * from './JsonTree.types';
 export * from './JsonTreeToolbar';
 export * from './JsonTypeBadge';
-export { DEFAULT_JSON_TREE_VIEW_STRINGS, type JsonTreeViewStrings, JsonTreeViewProvider, type JsonTreeViewProviderProps, useJsonTreeViewStrings, } from './strings';
+export { DEFAULT_JSON_TREE_VIEW_STRINGS, type JsonTreeViewStrings, JsonTreeViewProvider, type JsonTreeViewProviderProps, type ResolvedJsonTreeViewStrings, useJsonTreeViewStrings, } from './strings';

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

@@ -41,6 +41,7 @@ const DEFAULT_JSON_TREE_VIEW_STRINGS = {
     itemCount: (count)=>1 === count ? '1 item' : `${count} items`,
     keyCount: (count)=>1 === count ? '1 key' : `${count} keys`,
     requiredMarker: 'required',
+    referenceType: (typeLabel)=>`${typeLabel} · reference`,
     pathCopied: 'Path copied',
     copyPathHint: 'Click to copy this path',
     copyPathFor: (path)=>`Copy path for ${path}`,

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

@@ -16,6 +16,12 @@ export interface JsonTreeViewStrings {
     keyCount: (count: number) => string;
     /** Screen-reader text for the required-field marker. */
     requiredMarker: string;
+    /**
+     * Type badge tooltip title for a reference, given the type name (e.g. "String").
+     * Optional so catalogs written before it was added still type-check; falls
+     * back to the English default.
+     */
+    referenceType?: (typeLabel: string) => string;
     pathCopied: string;
     copyPathHint: string;
     copyPathFor: (path: string) => string;
@@ -48,7 +54,9 @@ export interface JsonTreeViewStrings {
     expandAll: string;
     collapseAll: string;
 }
-export declare const DEFAULT_JSON_TREE_VIEW_STRINGS: JsonTreeViewStrings;
+/** Strings with every optional key filled in, as the tree parts read them. */
+export type ResolvedJsonTreeViewStrings = Required<JsonTreeViewStrings>;
+export declare const DEFAULT_JSON_TREE_VIEW_STRINGS: ResolvedJsonTreeViewStrings;
 export interface JsonTreeViewProviderProps {
     /** Overrides merged over any outer provider's strings, then the English defaults. */
     strings?: Partial<JsonTreeViewStrings>;
@@ -61,5 +69,5 @@ export interface JsonTreeViewProviderProps {
  * including the toolbar and editors when they are rendered on their own.
  */
 export declare function JsonTreeViewProvider({ strings, tooltipContentClassName, children, }: JsonTreeViewProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useJsonTreeViewStrings(): JsonTreeViewStrings;
+export declare function useJsonTreeViewStrings(): ResolvedJsonTreeViewStrings;
 export declare function useJsonTreeViewTooltipClassName(): string | undefined;

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

@@ -10,6 +10,7 @@ const DEFAULT_JSON_TREE_VIEW_STRINGS = {
     itemCount: (count)=>1 === count ? '1 item' : `${count} items`,
     keyCount: (count)=>1 === count ? '1 key' : `${count} keys`,
     requiredMarker: 'required',
+    referenceType: (typeLabel)=>`${typeLabel} · reference`,
     pathCopied: 'Path copied',
     copyPathHint: 'Click to copy this path',
     copyPathFor: (path)=>`Copy path for ${path}`,