@process.co/ui 0.0.21 → 0.0.23

package/dist/components/dev/index.d.cts

@@ -1,5 +1,39 @@
 import React__default, { PropsWithChildren } from 'react';
 
+/**
+ * Optional config for slot/case awareness in dev.
+ * Each control type can have unique data shape; getSlots interprets the field value and returns slot options.
+ */
+interface DevSlotConfig {
+    /** Property key (field) whose value holds the slot data (e.g. 'switchValue' or 'cases'). When set, getSlots and activeIdPath are applied to data[field]. */
+    field?: string;
+    /** Path (relative to the field value when field is set) where we store the active slot id in dev. This is mocked in dev only; we do not use the element definition's slots.activeSlotId (e.g. $.results.pathId). */
+    activeIdPath: string;
+    /**
+     * Given the field value (or full data when field is unset), return the list of slots for the Active path/case selector.
+     * Enables any control-specific shape (e.g. value.cases.cases, value.branches, etc.).
+     */
+    getSlots: (fieldValueOrData: Record<string, any>) => {
+        id: string;
+        label: string;
+    }[];
+}
+/** Preset for slot/case awareness (legacy); prefer deriving from elementDefinition.slots. */
+type SlotPreset = 'switch' | 'cases' | 'branches';
+/**
+ * Action/signal definition shape (defineAction): optional slots, initValue, props.
+ * Used to derive slotConfig and optionally initialData.
+ */
+interface ElementDefinition {
+    slots?: {
+        slots?: any[];
+        activeSlotId?: string;
+        [k: string]: any;
+    };
+    initValue?: Record<string, any>;
+    props?: Record<string, any>;
+    [k: string]: any;
+}
 /**
  * Configuration for the DevProvider
  */
@@ -12,6 +46,17 @@ interface DevProviderConfig {
     persist?: boolean;
     /** Mock node ID (default: 'dev-node-1') */
     nodeId?: string;
+    /** Key in dev data that holds the control value (e.g. devField). In the definition, the control is the prop with the UI (e.g. cases with ui.switch); in dev that value lives at data[propertyKey], so devField = $.data.cases. Default: 'devField' */
+    propertyKey?: string;
+    /** When set, provider builds slotConfig internally; loader does not need to pass slotConfig. */
+    slotPreset?: SlotPreset;
+    /** Optional. Full slot config; overrides slotPreset and elementDefinition when provided. */
+    slotConfig?: DevSlotConfig;
+    /**
+     * Action or signal definition (defineAction result). Provider derives slotConfig from slots + initValue
+     * and uses initValue as initialData when initialData is not provided.
+     */
+    elementDefinition?: ElementDefinition | null;
 }
 /**
  * Context value for development/testing
@@ -28,6 +73,14 @@ interface DevContextValue {
     /** Remove all inferred types */
     clearAllInferredTypes: () => void;
     nodeId: string;
+    /** Current active slot/case id (for elements with slots, e.g. Switch). Null when none selected. Provider state only; not stored in data. */
+    activeSlotId: string | null;
+    /** Set the active slot/case id. Stored in provider state only; not written to data. */
+    setActiveSlotId: (id: string | null) => void;
+    /** Slot config when provided to DevProvider (so toolbar can call getSlots(data)). */
+    slotConfig: DevSlotConfig | undefined;
+    /** Action/signal definition passed to DevProvider (for debugging). */
+    elementDefinition: ElementDefinition | null | undefined;
     clearAll: () => void;
     exportData: () => string;
     importData: (json: string) => void;
@@ -74,15 +127,23 @@ declare function useInferredTypes(): {
  * }
  * ```
  */
-declare function DevProvider({ children, storageKey, initialData, persist, nodeId, }: PropsWithChildren<DevProviderConfig>): React__default.JSX.Element;
+declare function DevProvider({ children, storageKey, initialData, persist, nodeId, propertyKey, slotPreset, slotConfig: slotConfigProp, elementDefinition, }: PropsWithChildren<DevProviderConfig>): React__default.JSX.Element;
 
+/**
+ * Helper: get slots from data when the shape is { cases: { cases: [...] } } or similar.
+ * Use this inside slotConfig.getSlots for Switch-style data, or implement your own for other shapes.
+ */
+declare function getSlotsFromCasesData(data: Record<string, any>): {
+    id: string;
+    label: string;
+}[];
 /**
  * DevToolbar - Optional toolbar for development
  * Shows current data state and provides controls for import/export/clear
- * Also allows spoofing inferred types for testing components that depend on external field types
+ * Also allows spoofing inferred types and selecting active path/case when slotConfig.getSlots is provided
  */
 declare function DevToolbar({ className }: {
     className?: string;
 }): React__default.JSX.Element;
 
-export { DevContext, type DevContextValue, DevProvider, type DevProviderConfig, DevToolbar, useDevContext, useInferredTypes, useNodeProperty };
+export { DevContext, type DevContextValue, DevProvider, type DevProviderConfig, type DevSlotConfig, DevToolbar, type ElementDefinition, type SlotPreset, getSlotsFromCasesData, useDevContext, useInferredTypes, useNodeProperty };

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

@@ -1,5 +1,39 @@
 import React__default, { PropsWithChildren } from 'react';
 
+/**
+ * Optional config for slot/case awareness in dev.
+ * Each control type can have unique data shape; getSlots interprets the field value and returns slot options.
+ */
+interface DevSlotConfig {
+    /** Property key (field) whose value holds the slot data (e.g. 'switchValue' or 'cases'). When set, getSlots and activeIdPath are applied to data[field]. */
+    field?: string;
+    /** Path (relative to the field value when field is set) where we store the active slot id in dev. This is mocked in dev only; we do not use the element definition's slots.activeSlotId (e.g. $.results.pathId). */
+    activeIdPath: string;
+    /**
+     * Given the field value (or full data when field is unset), return the list of slots for the Active path/case selector.
+     * Enables any control-specific shape (e.g. value.cases.cases, value.branches, etc.).
+     */
+    getSlots: (fieldValueOrData: Record<string, any>) => {
+        id: string;
+        label: string;
+    }[];
+}
+/** Preset for slot/case awareness (legacy); prefer deriving from elementDefinition.slots. */
+type SlotPreset = 'switch' | 'cases' | 'branches';
+/**
+ * Action/signal definition shape (defineAction): optional slots, initValue, props.
+ * Used to derive slotConfig and optionally initialData.
+ */
+interface ElementDefinition {
+    slots?: {
+        slots?: any[];
+        activeSlotId?: string;
+        [k: string]: any;
+    };
+    initValue?: Record<string, any>;
+    props?: Record<string, any>;
+    [k: string]: any;
+}
 /**
  * Configuration for the DevProvider
  */
@@ -12,6 +46,17 @@ interface DevProviderConfig {
     persist?: boolean;
     /** Mock node ID (default: 'dev-node-1') */
     nodeId?: string;
+    /** Key in dev data that holds the control value (e.g. devField). In the definition, the control is the prop with the UI (e.g. cases with ui.switch); in dev that value lives at data[propertyKey], so devField = $.data.cases. Default: 'devField' */
+    propertyKey?: string;
+    /** When set, provider builds slotConfig internally; loader does not need to pass slotConfig. */
+    slotPreset?: SlotPreset;
+    /** Optional. Full slot config; overrides slotPreset and elementDefinition when provided. */
+    slotConfig?: DevSlotConfig;
+    /**
+     * Action or signal definition (defineAction result). Provider derives slotConfig from slots + initValue
+     * and uses initValue as initialData when initialData is not provided.
+     */
+    elementDefinition?: ElementDefinition | null;
 }
 /**
  * Context value for development/testing
@@ -28,6 +73,14 @@ interface DevContextValue {
     /** Remove all inferred types */
     clearAllInferredTypes: () => void;
     nodeId: string;
+    /** Current active slot/case id (for elements with slots, e.g. Switch). Null when none selected. Provider state only; not stored in data. */
+    activeSlotId: string | null;
+    /** Set the active slot/case id. Stored in provider state only; not written to data. */
+    setActiveSlotId: (id: string | null) => void;
+    /** Slot config when provided to DevProvider (so toolbar can call getSlots(data)). */
+    slotConfig: DevSlotConfig | undefined;
+    /** Action/signal definition passed to DevProvider (for debugging). */
+    elementDefinition: ElementDefinition | null | undefined;
     clearAll: () => void;
     exportData: () => string;
     importData: (json: string) => void;
@@ -74,15 +127,23 @@ declare function useInferredTypes(): {
  * }
  * ```
  */
-declare function DevProvider({ children, storageKey, initialData, persist, nodeId, }: PropsWithChildren<DevProviderConfig>): React__default.JSX.Element;
+declare function DevProvider({ children, storageKey, initialData, persist, nodeId, propertyKey, slotPreset, slotConfig: slotConfigProp, elementDefinition, }: PropsWithChildren<DevProviderConfig>): React__default.JSX.Element;
 
+/**
+ * Helper: get slots from data when the shape is { cases: { cases: [...] } } or similar.
+ * Use this inside slotConfig.getSlots for Switch-style data, or implement your own for other shapes.
+ */
+declare function getSlotsFromCasesData(data: Record<string, any>): {
+    id: string;
+    label: string;
+}[];
 /**
  * DevToolbar - Optional toolbar for development
  * Shows current data state and provides controls for import/export/clear
- * Also allows spoofing inferred types for testing components that depend on external field types
+ * Also allows spoofing inferred types and selecting active path/case when slotConfig.getSlots is provided
  */
 declare function DevToolbar({ className }: {
     className?: string;
 }): React__default.JSX.Element;
 
-export { DevContext, type DevContextValue, DevProvider, type DevProviderConfig, DevToolbar, useDevContext, useInferredTypes, useNodeProperty };
+export { DevContext, type DevContextValue, DevProvider, type DevProviderConfig, type DevSlotConfig, DevToolbar, type ElementDefinition, type SlotPreset, getSlotsFromCasesData, useDevContext, useInferredTypes, useNodeProperty };

package/dist/components/dev/index.js

@@ -1,6 +1,148 @@
-import React2, { createContext, useContext, useCallback, useState, useEffect, useMemo } from 'react';
+import React2, { createContext, useContext, useCallback, useState, useMemo, useEffect } from 'react';
 
 // src/components/dev/DevProvider.tsx
+function evaluateSimplePath(obj, path) {
+  if (!path || !obj) return void 0;
+  const cleanPath = path.startsWith("$.") ? path.slice(2) : path.startsWith("$") ? path.slice(1) : path;
+  const parts = cleanPath.split(".");
+  let current = obj.data ?? obj;
+  for (const part of parts) {
+    if (current == null) return void 0;
+    const cleanPart = part.replace(/\[\*\]$/, "");
+    if (cleanPart) current = current[cleanPart];
+  }
+  return current;
+}
+function evaluateCollectionPath(obj, path) {
+  if (!path || !obj) return [];
+  let cleanPath = path.startsWith("$.") ? path.slice(2) : path.startsWith("$") ? path.slice(1) : path;
+  cleanPath = cleanPath.replace(/\[\*\]$/, "");
+  const parts = cleanPath.split(".");
+  let current = obj.data ?? obj;
+  for (const part of parts) {
+    if (current == null) return [];
+    if (part) current = current[part];
+  }
+  if (Array.isArray(current)) return current;
+  if (parts.length >= 2) {
+    const parentPath = parts.slice(0, -1).join(".");
+    let parent = obj;
+    for (const part of parentPath.split(".")) {
+      if (parent == null) return [];
+      if (part) parent = parent[part];
+    }
+    if (Array.isArray(parent)) return parent;
+  }
+  return [];
+}
+function evaluateItemPath(item, fullPath, _index) {
+  if (!fullPath || item == null) return void 0;
+  const wildcardIndex = fullPath.indexOf("[*]");
+  if (wildcardIndex === -1) return evaluateSimplePath(item, fullPath);
+  const afterWildcard = fullPath.slice(wildcardIndex + 3);
+  if (!afterWildcard || afterWildcard === "") return item;
+  const propertyPath = afterWildcard.startsWith(".") ? afterWildcard.slice(1) : afterWildcard;
+  const parts = propertyPath.split(".");
+  let current = item;
+  for (const part of parts) {
+    if (current == null) return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function deriveFieldFromSlotsDefinition(slotsConfig) {
+  for (const slot of slotsConfig) {
+    const path = slot.path ?? slot.idPath ?? slot.labelPath;
+    if (typeof path !== "string") continue;
+    const afterData = path.replace(/^\$\.data\./, "").replace(/^\$\./, "");
+    const firstSegment = afterData.split(".")[0];
+    if (firstSegment) return firstSegment;
+  }
+  return void 0;
+}
+function deriveControlPropertyKey(def, slotsField) {
+  const props = def?.props;
+  if (!props) return slotsField;
+  const arr = Array.isArray(props) ? props : Object.keys(props).map((k) => ({ key: k, ...props[k] }));
+  const withUi = arr.find((p) => p?.ui != null);
+  const matchKey = slotsField ? arr.find((p) => p?.key === slotsField) : withUi;
+  return matchKey?.key ?? withUi?.key ?? slotsField;
+}
+function isDynamicSlot(slot) {
+  if (slot.type === "dynamic") return true;
+  const path = slot.path ?? slot.idPath ?? slot.labelPath ?? "";
+  return typeof path === "string" && path.includes("[*]");
+}
+function getSlotDefinitions(slotsConfig) {
+  return slotsConfig.map((slot) => ({
+    ...slot,
+    type: isDynamicSlot(slot) ? "dynamic" : "static"
+  }));
+}
+function rewritePathForControlBase(path, definitionPropertyKey) {
+  if (!path || !definitionPropertyKey) return path;
+  const afterData = path.replace(/^\$\.data\./, "");
+  if (!afterData.startsWith(definitionPropertyKey + ".")) return path;
+  const rest = afterData.slice(definitionPropertyKey.length + 1);
+  return rest ? "$." + rest : path;
+}
+function resolveSlotDefinitions(slotDefinitions, node, nodeIdForStatic, definitionPropertyKey) {
+  const result = [];
+  for (const slot of slotDefinitions) {
+    if (slot.type === "static") {
+      const idPath = slot.idPath != null ? rewritePathForControlBase(slot.idPath, definitionPropertyKey) : void 0;
+      const id = idPath != null ? evaluateSimplePath(node, idPath) : slot.id != null ? String(slot.id).replace(/\{\{ID_GUID\}\}/g, nodeIdForStatic) : void 0;
+      const labelPath = slot.labelPath != null ? rewritePathForControlBase(slot.labelPath, definitionPropertyKey) : void 0;
+      const label = labelPath != null ? evaluateSimplePath(node, labelPath) : slot.labelPlaceholderValue ?? slot.label ?? (id ?? "");
+      result.push({ id: id ?? "", label: label ?? id ?? "" });
+    } else {
+      const path = slot.path ?? slot.idPath;
+      if (!path) continue;
+      const pathRewritten = rewritePathForControlBase(path, definitionPropertyKey);
+      const collection = evaluateCollectionPath(node, pathRewritten);
+      if (!Array.isArray(collection)) continue;
+      const idPath = rewritePathForControlBase(slot.idPath ?? path, definitionPropertyKey);
+      const labelPath = rewritePathForControlBase(slot.labelPath ?? path, definitionPropertyKey);
+      collection.forEach((item, index) => {
+        const id = evaluateItemPath(item, idPath) ?? item?.id ?? String(index);
+        const label = evaluateItemPath(item, labelPath) ?? item?.label ?? id ?? String(index);
+        result.push({ id: String(id), label: String(label) });
+      });
+    }
+  }
+  return result;
+}
+function buildGetSlotsFromDefinition(slotDefinitions, nodeIdForStatic, options) {
+  const { devPropertyKey, definitionPropertyKey } = options;
+  return (fullData) => {
+    const controlValue = devPropertyKey != null && fullData != null ? fullData[devPropertyKey] : fullData;
+    const node = { data: controlValue ?? {} };
+    return resolveSlotDefinitions(
+      slotDefinitions,
+      node,
+      nodeIdForStatic,
+      definitionPropertyKey
+    );
+  };
+}
+function deriveSlotConfigFromDefinition(def, nodeId, propertyKeyFromLoader) {
+  const slotsRoot = def?.slots;
+  const slotsConfig = Array.isArray(slotsRoot) ? slotsRoot : slotsRoot?.slots;
+  if (!Array.isArray(slotsConfig) || slotsConfig.length === 0) return void 0;
+  const field = deriveFieldFromSlotsDefinition(slotsConfig);
+  const definitionPropertyKey = deriveControlPropertyKey(def, field);
+  const devPropertyKey = propertyKeyFromLoader ?? definitionPropertyKey;
+  const slotDefinitions = getSlotDefinitions(slotsConfig);
+  const getSlots = buildGetSlotsFromDefinition(slotDefinitions, nodeId ?? "dev-node", {
+    devPropertyKey,
+    definitionPropertyKey
+  });
+  return {
+    field: devPropertyKey ?? field ?? void 0,
+    activeIdPath: "activeSlotId",
+    getSlots
+  };
+}
 var DevContext = createContext(null);
 function useDevContext() {
   return useContext(DevContext);
@@ -34,20 +176,33 @@ function DevProvider({
   storageKey = "process-dev",
   initialData = {},
   persist = true,
-  nodeId = "dev-node-1"
+  nodeId = "dev-node-1",
+  propertyKey = "devField",
+  slotPreset,
+  slotConfig: slotConfigProp,
+  elementDefinition
 }) {
+  const slotConfig = useMemo(
+    () => slotConfigProp ?? deriveSlotConfigFromDefinition(elementDefinition, nodeId, propertyKey),
+    [slotConfigProp, elementDefinition, nodeId, propertyKey]
+  );
+  const effectiveInitialData = useMemo(
+    () => Object.keys(initialData).length > 0 ? initialData : elementDefinition?.initValue ?? {},
+    [initialData, elementDefinition?.initValue]
+  );
+  const [activeSlotId, setActiveSlotIdState] = useState(null);
   const [data, setData] = useState(() => {
     if (persist && typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem(`${storageKey}:data`);
         if (stored) {
-          return { ...initialData, ...JSON.parse(stored) };
+          return { ...effectiveInitialData, ...JSON.parse(stored) };
         }
       } catch (e) {
         console.warn("DevProvider: Failed to load from localStorage", e);
       }
     }
-    return initialData;
+    return effectiveInitialData;
   });
   const [inferredTypes, setInferredTypesState] = useState(() => {
     if (persist && typeof window !== "undefined") {
@@ -62,6 +217,10 @@ function DevProvider({
     }
     return {};
   });
+  useEffect(() => {
+    if (!elementDefinition?.initValue || typeof elementDefinition.initValue !== "object") return;
+    setData((prev) => Object.keys(prev).length === 0 ? { ...elementDefinition.initValue } : prev);
+  }, [elementDefinition?.initValue]);
   useEffect(() => {
     if (persist && typeof window !== "undefined") {
       try {
@@ -83,6 +242,9 @@ function DevProvider({
   const setProperty = useCallback((key, value2) => {
     setData((prev) => ({ ...prev, [key]: value2 }));
   }, []);
+  const setActiveSlotId = useCallback((id) => {
+    setActiveSlotIdState(id);
+  }, []);
   const getProperty = useCallback((key) => {
     return data[key];
   }, [data]);
@@ -131,18 +293,36 @@ function DevProvider({
     clearInferredType,
     clearAllInferredTypes,
     nodeId,
+    activeSlotId,
+    setActiveSlotId,
+    slotConfig,
+    elementDefinition,
     clearAll,
     exportData,
     importData
-  }), [data, setProperty, getProperty, inferredTypes, setInferredType, getInferredType, clearInferredType, clearAllInferredTypes, nodeId, clearAll, exportData, importData]);
+  }), [data, setProperty, getProperty, inferredTypes, setInferredType, getInferredType, clearInferredType, clearAllInferredTypes, nodeId, activeSlotId, setActiveSlotId, slotConfig, elementDefinition, clearAll, exportData, importData]);
   return /* @__PURE__ */ React2.createElement(DevContext.Provider, { value }, children);
 }
+function getSlotsFromCasesData(data) {
+  const list = data?.cases?.cases ?? data?.cases ?? data?.branches;
+  if (!Array.isArray(list)) return [];
+  return list.map((item) => ({
+    id: item.id ?? String(item),
+    label: item.label ?? item.id ?? String(item)
+  }));
+}
 function DevToolbar({ className }) {
   const devCtx = useDevContext();
   const [showData, setShowData] = useState(false);
+  const [showDefinition, setShowDefinition] = useState(false);
   const [showTypeEditor, setShowTypeEditor] = useState(false);
   const [newTypeKey, setNewTypeKey] = useState("");
   const [newTypeValue, setNewTypeValue] = useState("");
+  const slots = useMemo(() => {
+    if (!devCtx?.slotConfig?.getSlots) return [];
+    const data = devCtx.data ?? {};
+    return devCtx.slotConfig.getSlots(data);
+  }, [devCtx?.slotConfig, devCtx?.data]);
   if (!devCtx) {
     return /* @__PURE__ */ React2.createElement("div", { className }, "DevToolbar: Not inside DevProvider");
   }
@@ -161,7 +341,7 @@ function DevToolbar({ className }) {
       devCtx.clearAllInferredTypes();
     }
   };
-  return /* @__PURE__ */ React2.createElement("div", { className: `${className || ""} uii:border uii:rounded-lg uii:p-4 uii:bg-gray-50 dark:uii:bg-gray-900` }, /* @__PURE__ */ React2.createElement("div", { className: "uii:flex uii:items-center uii:gap-4 uii:mb-2 uii:flex-wrap" }, /* @__PURE__ */ React2.createElement("span", { className: "uii:font-semibold uii:text-sm" }, "\u{1F6E0}\uFE0F Dev Mode"), /* @__PURE__ */ React2.createElement("span", { className: "uii:text-xs uii:text-gray-500" }, "Node: ", devCtx.nodeId), /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement("div", { className: `${className || ""} uii:border uii:rounded-lg uii:p-4 uii:bg-gray-50 dark:uii:bg-gray-900` }, /* @__PURE__ */ React2.createElement("div", { className: "uii:flex uii:items-center uii:gap-4 uii:mb-2 uii:flex-wrap" }, /* @__PURE__ */ React2.createElement("span", { className: "uii:font-semibold uii:text-sm " }, "\u{1F6E0}\uFE0F Dev Mode"), /* @__PURE__ */ React2.createElement("span", { className: "uii:text-xs uii:text-gray-500" }, "Node: ", devCtx.nodeId), /* @__PURE__ */ React2.createElement(
     "button",
     {
       onClick: () => setShowData(!showData),
@@ -169,6 +349,14 @@ function DevToolbar({ className }) {
     },
     showData ? "Hide" : "Show",
     " Data"
+  ), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      onClick: () => setShowDefinition(!showDefinition),
+      className: "uii:text-xs uii:px-2 uii:py-1 uii:bg-amber-100 dark:uii:bg-amber-900 uii:rounded hover:uii:bg-amber-200"
+    },
+    showDefinition ? "Hide" : "Show",
+    " Definition"
   ), /* @__PURE__ */ React2.createElement(
     "button",
     {
@@ -207,7 +395,24 @@ function DevToolbar({ className }) {
       className: "uii:text-xs uii:px-2 uii:py-1 uii:bg-red-100 dark:uii:bg-red-900 uii:rounded hover:uii:bg-red-200"
     },
     "Clear"
-  )), showTypeEditor && /* @__PURE__ */ React2.createElement("div", { className: "uii:mt-3 uii:p-3 uii:bg-purple-50 dark:uii:bg-purple-950 uii:rounded-lg uii:border uii:border-purple-200 dark:uii:border-purple-800" }, /* @__PURE__ */ React2.createElement("div", { className: "uii:text-xs uii:font-medium uii:mb-2 uii:text-purple-700 dark:uii:text-purple-300" }, "Spoof Inferred Types (simulate external field types)"), /* @__PURE__ */ React2.createElement("div", { className: "uii:flex uii:gap-2 uii:mb-2 uii:flex-wrap" }, /* @__PURE__ */ React2.createElement(
+  )), slots.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "uii:mt-2 uii:p-2 uii:bg-slate-50 dark:uii:bg-slate-900 uii:rounded-lg uii:border uii:border-slate-200 dark:uii:border-slate-700" }, /* @__PURE__ */ React2.createElement("div", { className: "uii:text-xs uii:font-medium uii:mb-1.5 uii:text-slate-600 dark:uii:text-slate-400" }, "Active path / case"), /* @__PURE__ */ React2.createElement("div", { className: "uii:flex uii:flex-wrap uii:gap-1" }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => devCtx.setActiveSlotId(null),
+      className: `uii:text-xs uii:px-2 uii:py-1 uii:rounded uii:border ${devCtx.activeSlotId === null ? "uii:bg-slate-300 dark:uii:bg-slate-600 uii:border-slate-500" : "uii:bg-slate-100 dark:uii:bg-slate-800 uii:border-slate-300 dark:uii:border-slate-600 hover:uii:bg-slate-200"}`
+    },
+    "(none)"
+  ), slots.map((slot) => /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      key: slot.id,
+      type: "button",
+      onClick: () => devCtx.setActiveSlotId(slot.id),
+      className: `uii:text-xs uii:px-2 uii:py-1 uii:rounded uii:border ${devCtx.activeSlotId === slot.id ? "uii:bg-blue-200 dark:uii:bg-blue-800 uii:border-blue-500" : "uii:bg-white dark:uii:bg-slate-800 uii:border-slate-300 dark:uii:border-slate-600 hover:uii:bg-slate-100 dark:uii:hover:bg-slate-700"}`
+    },
+    slot.label || slot.id
+  )))), showTypeEditor && /* @__PURE__ */ React2.createElement("div", { className: "uii:mt-3 uii:p-3 uii:bg-purple-50 dark:uii:bg-purple-950 uii:rounded-lg uii:border uii:border-purple-200 dark:uii:border-purple-800" }, /* @__PURE__ */ React2.createElement("div", { className: "uii:text-xs uii:font-medium uii:mb-2 uii:text-purple-700 dark:uii:text-purple-300" }, "Spoof Inferred Types (simulate external field types)"), /* @__PURE__ */ React2.createElement("div", { className: "uii:flex uii:gap-2 uii:mb-2 uii:flex-wrap" }, /* @__PURE__ */ React2.createElement(
     "input",
     {
       type: "text",
@@ -280,9 +485,9 @@ function DevToolbar({ className }) {
       },
       "\u2715"
     )
-  ))))), showData && /* @__PURE__ */ React2.createElement("div", { className: "uii:mt-2" }, /* @__PURE__ */ React2.createElement("div", { className: "uii:text-xs uii:mb-1 uii:font-medium" }, "Data:"), /* @__PURE__ */ React2.createElement("pre", { className: "uii:text-xs uii:bg-gray-100 dark:uii:bg-gray-800 uii:p-2 uii:rounded uii:overflow-auto uii:max-h-48" }, JSON.stringify(devCtx.data, null, 2)), /* @__PURE__ */ React2.createElement("div", { className: "uii:text-xs uii:mb-1 uii:mt-2 uii:font-medium" }, "Inferred Types:"), /* @__PURE__ */ React2.createElement("pre", { className: "uii:text-xs uii:bg-gray-100 dark:uii:bg-gray-800 uii:p-2 uii:rounded uii:overflow-auto uii:max-h-24" }, JSON.stringify(devCtx.inferredTypes, null, 2))));
+  ))))), showData && /* @__PURE__ */ React2.createElement("div", { className: "uii:mt-2" }, /* @__PURE__ */ React2.createElement("div", { className: "uii:text-xs uii:mb-1 uii:font-medium" }, "Data:"), /* @__PURE__ */ React2.createElement("pre", { className: "uii:text-xs uii:bg-gray-100 dark:uii:bg-gray-800 uii:p-2 uii:rounded uii:overflow-auto uii:max-h-48" }, JSON.stringify(devCtx.data, null, 2)), /* @__PURE__ */ React2.createElement("div", { className: "uii:text-xs uii:mb-1 uii:mt-2 uii:font-medium" }, "Inferred Types:"), /* @__PURE__ */ React2.createElement("pre", { className: "uii:text-xs uii:bg-gray-100 dark:uii:bg-gray-800 uii:p-2 uii:rounded uii:overflow-auto uii:max-h-24" }, JSON.stringify(devCtx.inferredTypes, null, 2))), showDefinition && /* @__PURE__ */ React2.createElement("div", { className: "uii:mt-2" }, /* @__PURE__ */ React2.createElement("div", { className: "uii:text-xs uii:mb-1 uii:font-medium" }, "Action / signal definition:"), devCtx.elementDefinition != null ? /* @__PURE__ */ React2.createElement("pre", { className: "uii:text-xs uii:bg-amber-50 dark:uii:bg-amber-950/30 uii:p-2 uii:rounded uii:overflow-auto uii:max-h-64 uii:border uii:border-amber-200 dark:uii:border-amber-800" }, JSON.stringify(devCtx.elementDefinition, null, 2)) : /* @__PURE__ */ React2.createElement("p", { className: "uii:text-xs uii:text-gray-500 uii:italic" }, "No definition passed to DevProvider.")));
 }
 
-export { DevContext, DevProvider, DevToolbar, useDevContext, useInferredTypes, useNodeProperty };
+export { DevContext, DevProvider, DevToolbar, getSlotsFromCasesData, useDevContext, useInferredTypes, useNodeProperty };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map