@almadar/ui 4.50.19 → 4.50.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -27390,7 +27390,7 @@ var init_WizardProgress = __esm({
27390
27390
  stepClickEvent
27391
27391
  }) => {
27392
27392
  const eventBus = useEventBus();
27393
- const normalizedSteps = steps.map(
27393
+ const normalizedSteps = (steps ?? []).map(
27394
27394
  (s, i) => typeof s === "string" ? { id: `step-${i}`, title: s } : s
27395
27395
  );
27396
27396
  const totalSteps = normalizedSteps.length;
@@ -60188,7 +60188,7 @@ function findPatternInTree(root, path) {
60188
60188
  }
60189
60189
  var FIELD_TYPE_OPTIONS = core.FieldTypeSchema.options.map((v) => ({ value: v, label: v }));
60190
60190
  var EFFECT_TYPE_OPTIONS = Object.keys(exports.EFFECT_TYPE_TO_CATEGORY).map((v) => ({ value: v, label: v }));
60191
- function OrbInspector({ node, schema, editable = false, userType = "builder", onSchemaChange, onClose }) {
60191
+ function OrbInspector({ node, schema, editable = false, userType = "builder", themeManifest, onSchemaChange, onClose }) {
60192
60192
  const { selected: selectedPattern } = React93.useContext(PatternSelectionContext);
60193
60193
  const [activeTab, setActiveTab] = React93.useState("inspector");
60194
60194
  const eventBus = useEventBus();
@@ -60251,8 +60251,18 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", on
60251
60251
  }, [schema, orbitalName, traitName, transitionEvent, isExpanded]);
60252
60252
  const handlePropChange = React93.useCallback((propName, value) => {
60253
60253
  if (!editable) return;
60254
- eventBus.emit("UI:PROP_CHANGE", { propName, value });
60255
- }, [editable, eventBus]);
60254
+ eventBus.emit("UI:PROP_CHANGE", {
60255
+ propName,
60256
+ value,
60257
+ selection: {
60258
+ sourceSchemaName: selectedPattern?.nodeData.sourceSchemaName,
60259
+ patternPath: selectedPattern?.patternId,
60260
+ orbitalName,
60261
+ traitName,
60262
+ transitionEvent
60263
+ }
60264
+ });
60265
+ }, [editable, eventBus, selectedPattern, orbitalName, traitName, transitionEvent]);
60256
60266
  const handleAddField = React93.useCallback(() => {
60257
60267
  eventBus.emit("UI:ADD_FIELD", {});
60258
60268
  }, [eventBus]);
@@ -60324,18 +60334,21 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", on
60324
60334
  }
60325
60335
  ) })
60326
60336
  ) : activeTab === "styles" ? (
60327
- /* ── Styles Tab (read-only in Phase 2) ──
60328
- Phase 2 ships a token-only viewer with no editing. The proper
60329
- tokenContract on PatternDefinition lands in Phase 6; until then
60330
- we fall back to a static map of well-known atoms keyed by
60331
- pattern type. Patterns missing from the map render a placeholder
60332
- so the gap is visible rather than silently empty. */
60337
+ /* ── Styles Tab ──
60338
+ Variant + size pills are clickable when `editable` and emit
60339
+ `UI:PROP_CHANGE` with the selection context. The page-level
60340
+ dispatcher routes those events to the project schemaEditor or
60341
+ to the theme manifest based on `selection.sourceSchemaName`. */
60333
60342
  /* @__PURE__ */ jsxRuntime.jsx(
60334
- StylesTabReadOnly,
60343
+ StylesTab,
60335
60344
  {
60336
60345
  patternType,
60337
60346
  patternDef,
60338
- patternConfig
60347
+ patternConfig,
60348
+ editable,
60349
+ onPropChange: handlePropChange,
60350
+ themeManifest,
60351
+ isDesignSystem: selectedPattern?.nodeData.sourceSchemaName === "__design_system__"
60339
60352
  }
60340
60353
  )
60341
60354
  ) : (
@@ -60617,7 +60630,7 @@ var PHASE_2_TOKEN_FALLBACK = {
60617
60630
  modal: ["--color-card", "--shadow-lg", "--radius-lg"],
60618
60631
  toast: ["--color-card", "--shadow-lg", "--radius-md"]
60619
60632
  };
60620
- function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
60633
+ function StylesTab({ patternType, patternDef, patternConfig, editable, onPropChange, themeManifest, isDesignSystem }) {
60621
60634
  const { t } = useTranslate();
60622
60635
  if (!patternType) {
60623
60636
  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px]", children: t("Select a pattern to view its style tokens.") }) });
@@ -60651,7 +60664,9 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
60651
60664
  return /* @__PURE__ */ jsxRuntime.jsx(
60652
60665
  Box,
60653
60666
  {
60654
- className: "rounded px-2 py-0.5 text-[11px] font-mono",
60667
+ as: editable ? "button" : "div",
60668
+ onClick: editable ? () => onPropChange("variant", variant) : void 0,
60669
+ className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
60655
60670
  style: {
60656
60671
  backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
60657
60672
  color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -60669,7 +60684,9 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
60669
60684
  return /* @__PURE__ */ jsxRuntime.jsx(
60670
60685
  Box,
60671
60686
  {
60672
- className: "rounded px-2 py-0.5 text-[11px] font-mono",
60687
+ as: editable ? "button" : "div",
60688
+ onClick: editable ? () => onPropChange("size", size) : void 0,
60689
+ className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
60673
60690
  style: {
60674
60691
  backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
60675
60692
  color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -60679,7 +60696,58 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
60679
60696
  size
60680
60697
  );
60681
60698
  }) })
60682
- ] })
60699
+ ] }),
60700
+ isDesignSystem && themeManifest && editable && /* @__PURE__ */ jsxRuntime.jsx(TokenEditorSection, { themeManifest, onPropChange })
60701
+ ] });
60702
+ }
60703
+ var TOKEN_GROUPS = [
60704
+ { group: "colors", label: "Colors" },
60705
+ { group: "radii", label: "Radii" },
60706
+ { group: "spacing", label: "Spacing" },
60707
+ { group: "shadows", label: "Shadows" }
60708
+ ];
60709
+ function TokenEditorSection({ themeManifest, onPropChange }) {
60710
+ const tokens = themeManifest.tokens ?? {};
60711
+ return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col gap-3 pt-2 border-t border-border/40", children: [
60712
+ /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Project theme tokens" }),
60713
+ TOKEN_GROUPS.map(({ group, label }) => {
60714
+ const entries = Object.entries(tokens[group] ?? {});
60715
+ if (entries.length === 0) return null;
60716
+ return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col gap-1.5", children: [
60717
+ /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[10px] font-mono text-muted-foreground", children: label }),
60718
+ entries.map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsx(
60719
+ TokenRow,
60720
+ {
60721
+ group,
60722
+ tokenKey: key,
60723
+ value: String(value),
60724
+ isColor: group === "colors",
60725
+ onPropChange
60726
+ },
60727
+ key
60728
+ ))
60729
+ ] }, group);
60730
+ })
60731
+ ] });
60732
+ }
60733
+ function TokenRow({ group, tokenKey, value, isColor, onPropChange }) {
60734
+ return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
60735
+ isColor && /* @__PURE__ */ jsxRuntime.jsx(
60736
+ Box,
60737
+ {
60738
+ className: "w-4 h-4 rounded border border-border/40 shrink-0",
60739
+ style: { backgroundColor: value }
60740
+ }
60741
+ ),
60742
+ /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground w-24 shrink-0 truncate", children: tokenKey }),
60743
+ /* @__PURE__ */ jsxRuntime.jsx(
60744
+ Input,
60745
+ {
60746
+ value,
60747
+ onChange: (e) => onPropChange(`__token__.${group}.${tokenKey}`, e.target.value),
60748
+ className: "flex-1 text-[11px] font-mono"
60749
+ }
60750
+ )
60683
60751
  ] });
60684
60752
  }
60685
60753
 
@@ -60726,7 +60794,8 @@ function FlowCanvasInner({
60726
60794
  composeLevel,
60727
60795
  behaviorEntries,
60728
60796
  behaviorWires,
60729
- userType = "builder"
60797
+ userType = "builder",
60798
+ themeManifest
60730
60799
  }) {
60731
60800
  const NODE_TYPES2 = React93.useMemo(() => ({
60732
60801
  preview: OrbPreviewNode,
@@ -61023,6 +61092,7 @@ function FlowCanvasInner({
61023
61092
  schema: parsedSchema,
61024
61093
  editable,
61025
61094
  userType,
61095
+ themeManifest,
61026
61096
  onSchemaChange,
61027
61097
  onClose: handleClosePanel
61028
61098
  }
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import React__default from 'react';
3
- import { OrbitalSchema, UISlot, Expression, EntityPersistence, EventPayloadField } from '@almadar/core';
3
+ import { OrbitalSchema, UISlot, Expression, EntityPersistence, EventPayloadField, ThemeDefinition } from '@almadar/core';
4
4
  import { Node, Edge, NodeProps, EdgeProps } from '@xyflow/react';
5
5
 
6
6
  /**
@@ -1204,10 +1204,18 @@ interface OrbInspectorProps {
1204
1204
  * gets.
1205
1205
  */
1206
1206
  userType?: 'builder' | 'designer' | 'architect';
1207
+ /**
1208
+ * Project theme tokens (Design System tab only). When provided AND the
1209
+ * selection originates from the synthesized `__design_system__` schema,
1210
+ * the Styles tab renders an editable token-row list; edits emit
1211
+ * `UI:PROP_CHANGE` with `propName: '__token__.<group>.<key>'` and the
1212
+ * page-level dispatcher routes them to `themeManifest.setToken`.
1213
+ */
1214
+ themeManifest?: ThemeDefinition;
1207
1215
  onSchemaChange?: (schema: OrbitalSchema) => void;
1208
1216
  onClose: () => void;
1209
1217
  }
1210
- declare function OrbInspector({ node, schema, editable, userType, onSchemaChange, onClose }: OrbInspectorProps): React__default.ReactElement;
1218
+ declare function OrbInspector({ node, schema, editable, userType, themeManifest, onSchemaChange, onClose }: OrbInspectorProps): React__default.ReactElement;
1211
1219
  declare namespace OrbInspector {
1212
1220
  var displayName: string;
1213
1221
  }
@@ -1335,6 +1343,12 @@ interface FlowCanvasProps {
1335
1343
  * everything. Default `'builder'` preserves pre-Phase-2 behavior.
1336
1344
  */
1337
1345
  userType?: 'builder' | 'designer' | 'architect';
1346
+ /**
1347
+ * Project theme tokens (Design System tab only). Forwarded to `OrbInspector`
1348
+ * so the Styles tab can render an editable token list when the selection
1349
+ * originates from the synthesized `__design_system__` schema.
1350
+ */
1351
+ themeManifest?: ThemeDefinition;
1338
1352
  }
1339
1353
  declare const FlowCanvas: React__default.FC<FlowCanvasProps>;
1340
1354
 
package/dist/avl/index.js CHANGED
@@ -27344,7 +27344,7 @@ var init_WizardProgress = __esm({
27344
27344
  stepClickEvent
27345
27345
  }) => {
27346
27346
  const eventBus = useEventBus();
27347
- const normalizedSteps = steps.map(
27347
+ const normalizedSteps = (steps ?? []).map(
27348
27348
  (s, i) => typeof s === "string" ? { id: `step-${i}`, title: s } : s
27349
27349
  );
27350
27350
  const totalSteps = normalizedSteps.length;
@@ -60142,7 +60142,7 @@ function findPatternInTree(root, path) {
60142
60142
  }
60143
60143
  var FIELD_TYPE_OPTIONS = FieldTypeSchema.options.map((v) => ({ value: v, label: v }));
60144
60144
  var EFFECT_TYPE_OPTIONS = Object.keys(EFFECT_TYPE_TO_CATEGORY).map((v) => ({ value: v, label: v }));
60145
- function OrbInspector({ node, schema, editable = false, userType = "builder", onSchemaChange, onClose }) {
60145
+ function OrbInspector({ node, schema, editable = false, userType = "builder", themeManifest, onSchemaChange, onClose }) {
60146
60146
  const { selected: selectedPattern } = useContext(PatternSelectionContext);
60147
60147
  const [activeTab, setActiveTab] = useState("inspector");
60148
60148
  const eventBus = useEventBus();
@@ -60205,8 +60205,18 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", on
60205
60205
  }, [schema, orbitalName, traitName, transitionEvent, isExpanded]);
60206
60206
  const handlePropChange = useCallback((propName, value) => {
60207
60207
  if (!editable) return;
60208
- eventBus.emit("UI:PROP_CHANGE", { propName, value });
60209
- }, [editable, eventBus]);
60208
+ eventBus.emit("UI:PROP_CHANGE", {
60209
+ propName,
60210
+ value,
60211
+ selection: {
60212
+ sourceSchemaName: selectedPattern?.nodeData.sourceSchemaName,
60213
+ patternPath: selectedPattern?.patternId,
60214
+ orbitalName,
60215
+ traitName,
60216
+ transitionEvent
60217
+ }
60218
+ });
60219
+ }, [editable, eventBus, selectedPattern, orbitalName, traitName, transitionEvent]);
60210
60220
  const handleAddField = useCallback(() => {
60211
60221
  eventBus.emit("UI:ADD_FIELD", {});
60212
60222
  }, [eventBus]);
@@ -60278,18 +60288,21 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", on
60278
60288
  }
60279
60289
  ) })
60280
60290
  ) : activeTab === "styles" ? (
60281
- /* ── Styles Tab (read-only in Phase 2) ──
60282
- Phase 2 ships a token-only viewer with no editing. The proper
60283
- tokenContract on PatternDefinition lands in Phase 6; until then
60284
- we fall back to a static map of well-known atoms keyed by
60285
- pattern type. Patterns missing from the map render a placeholder
60286
- so the gap is visible rather than silently empty. */
60291
+ /* ── Styles Tab ──
60292
+ Variant + size pills are clickable when `editable` and emit
60293
+ `UI:PROP_CHANGE` with the selection context. The page-level
60294
+ dispatcher routes those events to the project schemaEditor or
60295
+ to the theme manifest based on `selection.sourceSchemaName`. */
60287
60296
  /* @__PURE__ */ jsx(
60288
- StylesTabReadOnly,
60297
+ StylesTab,
60289
60298
  {
60290
60299
  patternType,
60291
60300
  patternDef,
60292
- patternConfig
60301
+ patternConfig,
60302
+ editable,
60303
+ onPropChange: handlePropChange,
60304
+ themeManifest,
60305
+ isDesignSystem: selectedPattern?.nodeData.sourceSchemaName === "__design_system__"
60293
60306
  }
60294
60307
  )
60295
60308
  ) : (
@@ -60571,7 +60584,7 @@ var PHASE_2_TOKEN_FALLBACK = {
60571
60584
  modal: ["--color-card", "--shadow-lg", "--radius-lg"],
60572
60585
  toast: ["--color-card", "--shadow-lg", "--radius-md"]
60573
60586
  };
60574
- function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
60587
+ function StylesTab({ patternType, patternDef, patternConfig, editable, onPropChange, themeManifest, isDesignSystem }) {
60575
60588
  const { t } = useTranslate();
60576
60589
  if (!patternType) {
60577
60590
  return /* @__PURE__ */ jsx(Box, { className: "p-4", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px]", children: t("Select a pattern to view its style tokens.") }) });
@@ -60605,7 +60618,9 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
60605
60618
  return /* @__PURE__ */ jsx(
60606
60619
  Box,
60607
60620
  {
60608
- className: "rounded px-2 py-0.5 text-[11px] font-mono",
60621
+ as: editable ? "button" : "div",
60622
+ onClick: editable ? () => onPropChange("variant", variant) : void 0,
60623
+ className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
60609
60624
  style: {
60610
60625
  backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
60611
60626
  color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -60623,7 +60638,9 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
60623
60638
  return /* @__PURE__ */ jsx(
60624
60639
  Box,
60625
60640
  {
60626
- className: "rounded px-2 py-0.5 text-[11px] font-mono",
60641
+ as: editable ? "button" : "div",
60642
+ onClick: editable ? () => onPropChange("size", size) : void 0,
60643
+ className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
60627
60644
  style: {
60628
60645
  backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
60629
60646
  color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -60633,7 +60650,58 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
60633
60650
  size
60634
60651
  );
60635
60652
  }) })
60636
- ] })
60653
+ ] }),
60654
+ isDesignSystem && themeManifest && editable && /* @__PURE__ */ jsx(TokenEditorSection, { themeManifest, onPropChange })
60655
+ ] });
60656
+ }
60657
+ var TOKEN_GROUPS = [
60658
+ { group: "colors", label: "Colors" },
60659
+ { group: "radii", label: "Radii" },
60660
+ { group: "spacing", label: "Spacing" },
60661
+ { group: "shadows", label: "Shadows" }
60662
+ ];
60663
+ function TokenEditorSection({ themeManifest, onPropChange }) {
60664
+ const tokens = themeManifest.tokens ?? {};
60665
+ return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-3 pt-2 border-t border-border/40", children: [
60666
+ /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Project theme tokens" }),
60667
+ TOKEN_GROUPS.map(({ group, label }) => {
60668
+ const entries = Object.entries(tokens[group] ?? {});
60669
+ if (entries.length === 0) return null;
60670
+ return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-1.5", children: [
60671
+ /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[10px] font-mono text-muted-foreground", children: label }),
60672
+ entries.map(([key, value]) => /* @__PURE__ */ jsx(
60673
+ TokenRow,
60674
+ {
60675
+ group,
60676
+ tokenKey: key,
60677
+ value: String(value),
60678
+ isColor: group === "colors",
60679
+ onPropChange
60680
+ },
60681
+ key
60682
+ ))
60683
+ ] }, group);
60684
+ })
60685
+ ] });
60686
+ }
60687
+ function TokenRow({ group, tokenKey, value, isColor, onPropChange }) {
60688
+ return /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
60689
+ isColor && /* @__PURE__ */ jsx(
60690
+ Box,
60691
+ {
60692
+ className: "w-4 h-4 rounded border border-border/40 shrink-0",
60693
+ style: { backgroundColor: value }
60694
+ }
60695
+ ),
60696
+ /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground w-24 shrink-0 truncate", children: tokenKey }),
60697
+ /* @__PURE__ */ jsx(
60698
+ Input,
60699
+ {
60700
+ value,
60701
+ onChange: (e) => onPropChange(`__token__.${group}.${tokenKey}`, e.target.value),
60702
+ className: "flex-1 text-[11px] font-mono"
60703
+ }
60704
+ )
60637
60705
  ] });
60638
60706
  }
60639
60707
 
@@ -60680,7 +60748,8 @@ function FlowCanvasInner({
60680
60748
  composeLevel,
60681
60749
  behaviorEntries,
60682
60750
  behaviorWires,
60683
- userType = "builder"
60751
+ userType = "builder",
60752
+ themeManifest
60684
60753
  }) {
60685
60754
  const NODE_TYPES2 = useMemo(() => ({
60686
60755
  preview: OrbPreviewNode,
@@ -60977,6 +61046,7 @@ function FlowCanvasInner({
60977
61046
  schema: parsedSchema,
60978
61047
  editable,
60979
61048
  userType,
61049
+ themeManifest,
60980
61050
  onSchemaChange,
60981
61051
  onClose: handleClosePanel
60982
61052
  }
@@ -21,5 +21,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
21
21
  actionPayload?: EventPayload;
22
22
  /** Button label text (alternative to children for schema-driven rendering) */
23
23
  label?: string;
24
+ /** Disable the button (greys out, blocks click events) */
25
+ disabled?: boolean;
24
26
  }
25
27
  export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -22565,7 +22565,7 @@ var init_WizardProgress = __esm({
22565
22565
  stepClickEvent
22566
22566
  }) => {
22567
22567
  const eventBus = useEventBus();
22568
- const normalizedSteps = steps.map(
22568
+ const normalizedSteps = (steps ?? []).map(
22569
22569
  (s, i) => typeof s === "string" ? { id: `step-${i}`, title: s } : s
22570
22570
  );
22571
22571
  const totalSteps = normalizedSteps.length;
@@ -22519,7 +22519,7 @@ var init_WizardProgress = __esm({
22519
22519
  stepClickEvent
22520
22520
  }) => {
22521
22521
  const eventBus = useEventBus();
22522
- const normalizedSteps = steps.map(
22522
+ const normalizedSteps = (steps ?? []).map(
22523
22523
  (s, i) => typeof s === "string" ? { id: `step-${i}`, title: s } : s
22524
22524
  );
22525
22525
  const totalSteps = normalizedSteps.length;
@@ -8,6 +8,7 @@
8
8
  * Uses wireframe theme styling (high contrast, sharp edges).
9
9
  */
10
10
  import React from "react";
11
+ import type { EventEmit } from "@almadar/core";
11
12
  export interface WizardNavigationProps {
12
13
  /** Current step index (0-based) */
13
14
  currentStep: number;
@@ -27,12 +28,21 @@ export interface WizardNavigationProps {
27
28
  nextLabel?: string;
28
29
  /** Custom label for Complete button */
29
30
  completeLabel?: string;
30
- /** Event to emit on Back click */
31
- onBack?: string;
32
- /** Event to emit on Next click */
33
- onNext?: string;
34
- /** Event to emit on Complete click */
35
- onComplete?: string;
31
+ /** Event to emit on Back click — emits UI:{onBack} with { currentStep, totalSteps } */
32
+ onBack?: EventEmit<{
33
+ currentStep: number;
34
+ totalSteps: number;
35
+ }>;
36
+ /** Event to emit on Next click — emits UI:{onNext} with { currentStep, totalSteps } */
37
+ onNext?: EventEmit<{
38
+ currentStep: number;
39
+ totalSteps: number;
40
+ }>;
41
+ /** Event to emit on Complete click — emits UI:{onComplete} with { currentStep, totalSteps } */
42
+ onComplete?: EventEmit<{
43
+ currentStep: number;
44
+ totalSteps: number;
45
+ }>;
36
46
  /** Direct callback for Back (alternative to event) */
37
47
  onBackClick?: () => void;
38
48
  /** Direct callback for Next (alternative to event) */
@@ -22,7 +22,7 @@ export interface WizardProgressStep {
22
22
  }
23
23
  export interface WizardProgressProps {
24
24
  /** Step definitions (compatible with WizardContainer's WizardStep). A string is shorthand for `{ id: str, title: str }`. */
25
- steps: (WizardProgressStep | string)[];
25
+ steps?: (WizardProgressStep | string)[];
26
26
  /** Current step index (0-based) */
27
27
  currentStep: number;
28
28
  /** Callback when a completed step is clicked */
@@ -12,7 +12,7 @@
12
12
  * Escape to go back. AVL overlays on hover (future).
13
13
  */
14
14
  import React from 'react';
15
- import type { OrbitalSchema } from '@almadar/core';
15
+ import type { OrbitalSchema, ThemeDefinition } from '@almadar/core';
16
16
  import type { ViewLevel, PreviewNodeData } from '../../molecules/avl/avl-preview-types';
17
17
  import type { ComposeViewLevel, BehaviorCanvasEntry, BehaviorWireEdgeData } from '../../molecules/avl/avl-behavior-compose-types';
18
18
  export interface FlowCanvasProps {
@@ -124,5 +124,11 @@ export interface FlowCanvasProps {
124
124
  * everything. Default `'builder'` preserves pre-Phase-2 behavior.
125
125
  */
126
126
  userType?: 'builder' | 'designer' | 'architect';
127
+ /**
128
+ * Project theme tokens (Design System tab only). Forwarded to `OrbInspector`
129
+ * so the Styles tab can render an editable token list when the selection
130
+ * originates from the synthesized `__design_system__` schema.
131
+ */
132
+ themeManifest?: ThemeDefinition;
127
133
  }
128
134
  export declare const FlowCanvas: React.FC<FlowCanvasProps>;
@@ -14,7 +14,7 @@
14
14
  * When `editable` is true, inspector fields become inputs.
15
15
  */
16
16
  import React from 'react';
17
- import type { OrbitalSchema } from '@almadar/core';
17
+ import type { OrbitalSchema, ThemeDefinition } from '@almadar/core';
18
18
  import type { PreviewNodeData } from '../../molecules/avl/avl-preview-types';
19
19
  export interface OrbInspectorProps {
20
20
  node: PreviewNodeData;
@@ -28,10 +28,18 @@ export interface OrbInspectorProps {
28
28
  * gets.
29
29
  */
30
30
  userType?: 'builder' | 'designer' | 'architect';
31
+ /**
32
+ * Project theme tokens (Design System tab only). When provided AND the
33
+ * selection originates from the synthesized `__design_system__` schema,
34
+ * the Styles tab renders an editable token-row list; edits emit
35
+ * `UI:PROP_CHANGE` with `propName: '__token__.<group>.<key>'` and the
36
+ * page-level dispatcher routes them to `themeManifest.setToken`.
37
+ */
38
+ themeManifest?: ThemeDefinition;
31
39
  onSchemaChange?: (schema: OrbitalSchema) => void;
32
40
  onClose: () => void;
33
41
  }
34
- export declare function OrbInspector({ node, schema, editable, userType, onSchemaChange, onClose }: OrbInspectorProps): React.ReactElement;
42
+ export declare function OrbInspector({ node, schema, editable, userType, themeManifest, onSchemaChange, onClose }: OrbInspectorProps): React.ReactElement;
35
43
  export declare namespace OrbInspector {
36
44
  var displayName: string;
37
45
  }
@@ -186,6 +186,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
186
186
  actionPayload?: EventPayload;
187
187
  /** Button label text (alternative to children for schema-driven rendering) */
188
188
  label?: string;
189
+ /** Disable the button (greys out, blocks click events) */
190
+ disabled?: boolean;
189
191
  }
190
192
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
191
193
 
@@ -185,6 +185,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
185
185
  actionPayload?: EventPayload;
186
186
  /** Button label text (alternative to children for schema-driven rendering) */
187
187
  label?: string;
188
+ /** Disable the button (greys out, blocks click events) */
189
+ disabled?: boolean;
188
190
  }
189
191
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
190
192
 
@@ -23802,7 +23802,7 @@ var init_WizardProgress = __esm({
23802
23802
  stepClickEvent
23803
23803
  }) => {
23804
23804
  const eventBus = useEventBus();
23805
- const normalizedSteps = steps.map(
23805
+ const normalizedSteps = (steps ?? []).map(
23806
23806
  (s, i) => typeof s === "string" ? { id: `step-${i}`, title: s } : s
23807
23807
  );
23808
23808
  const totalSteps = normalizedSteps.length;
@@ -23756,7 +23756,7 @@ var init_WizardProgress = __esm({
23756
23756
  stepClickEvent
23757
23757
  }) => {
23758
23758
  const eventBus = useEventBus();
23759
- const normalizedSteps = steps.map(
23759
+ const normalizedSteps = (steps ?? []).map(
23760
23760
  (s, i) => typeof s === "string" ? { id: `step-${i}`, title: s } : s
23761
23761
  );
23762
23762
  const totalSteps = normalizedSteps.length;
@@ -23507,7 +23507,7 @@ var init_WizardProgress = __esm({
23507
23507
  stepClickEvent
23508
23508
  }) => {
23509
23509
  const eventBus = useEventBus();
23510
- const normalizedSteps = steps.map(
23510
+ const normalizedSteps = (steps ?? []).map(
23511
23511
  (s, i) => typeof s === "string" ? { id: `step-${i}`, title: s } : s
23512
23512
  );
23513
23513
  const totalSteps = normalizedSteps.length;
@@ -23461,7 +23461,7 @@ var init_WizardProgress = __esm({
23461
23461
  stepClickEvent
23462
23462
  }) => {
23463
23463
  const eventBus = useEventBus();
23464
- const normalizedSteps = steps.map(
23464
+ const normalizedSteps = (steps ?? []).map(
23465
23465
  (s, i) => typeof s === "string" ? { id: `step-${i}`, title: s } : s
23466
23466
  );
23467
23467
  const totalSteps = normalizedSteps.length;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@almadar/ui",
3
- "version": "4.50.19",
3
+ "version": "4.50.21",
4
4
  "description": "React UI components, hooks, and providers for Almadar",
5
5
  "type": "module",
6
6
  "sideEffects": [