@octaviaflow/core 3.0.18-beta.15 → 3.0.18-beta.17

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.
Files changed (8) hide show
  1. package/dist/styles.css +1 -1
  2. package/dist/workflow/components/ConfigPanel/ConfigPanel.d.ts +21 -9
  3. package/dist/workflow/components/ConfigPanel/ConfigPanel.d.ts.map +1 -1
  4. package/dist/workflow.cjs +56 -58
  5. package/dist/workflow.cjs.map +1 -1
  6. package/dist/workflow.js +57 -59
  7. package/dist/workflow.js.map +1 -1
  8. package/package.json +1 -1
package/dist/workflow/components/ConfigPanel/ConfigPanel.d.ts CHANGED
@@ -11,12 +11,17 @@ export interface ConfigPanelTab {
11
11
  }
12
12
  export interface ConfigPanelProps {
13
13
  open?: boolean;
14
- /** Title shown in the header. Double-click opens the inline editor. */
14
+ /** Title shown in the header — the action name. Double-click opens
15
+ * the inline editor. The header shows this single line only. */
15
16
  title?: string;
16
- /** Optional breadcrumb prefix (e.g. "Action"). */
17
- kindLabel?: string;
18
17
  /** Optional icon rendered before the title. */
19
18
  icon?: ReactNode;
19
+ /**
20
+ * Modular header action slot — buttons rendered between the title and
21
+ * the close (✕). Use it for per-action affordances like the FX
22
+ * toggle; omit entirely for actions that don't need them.
23
+ */
24
+ headerActions?: ReactNode;
20
25
  /** Inline status banner — error / warning / hint, shown at the top of the body. */
21
26
  banner?: ReactNode;
22
27
  /** Tab definitions. When omitted, `children` renders directly (no tabs). */
@@ -25,7 +30,8 @@ export interface ConfigPanelProps {
25
30
  activeTab?: string;
26
31
  defaultActiveTab?: string;
27
32
  onTabChange?: (id: string) => void;
28
- /** Save-state pill in the footer. */
33
+ /** Save-state pill in the footer. Omit it entirely to hide the pill —
34
+ * the footer then shows only its action buttons. */
29
35
  saveState?: ConfigPanelSaveState;
30
36
  /** Fires on the title editor's commit. Omit to disable title editing. */
31
37
  onTitleChange?: (next: string) => void;
@@ -34,9 +40,10 @@ export interface ConfigPanelProps {
34
40
  onCancel?: () => void;
35
41
  /** Resizable width — pass `resizable: false` to lock. */
36
42
  resizable?: boolean;
37
- /** Initial width (px). Defaults to 360. */
43
+ /** Initial width (px). Defaults to 400. */
38
44
  defaultWidth?: number;
39
- /** Lower clamp during resize. Defaults to 280. */
45
+ /** Lower clamp during resize. Defaults to 400 — the panel can be
46
+ * widened but never narrowed past its default. */
40
47
  minWidth?: number;
41
48
  /**
42
49
  * Upper clamp during resize. Defaults to 720. The panel ALSO clamps
@@ -55,10 +62,15 @@ export interface ConfigPanelProps {
55
62
  variant?: "pinned" | "floating";
56
63
  /** Body slot used only when `tabs` is omitted. */
57
64
  children?: ReactNode;
58
- /** Custom footer slot — replaces the default save/cancel buttons. */
59
- footer?: ReactNode;
65
+ /**
66
+ * Modular footer action buttons — replaces the built-in Cancel/Save
67
+ * pair. The footer bar itself stays static and pinned; this slot just
68
+ * decides which buttons live in it, so a consumer can add, remove, or
69
+ * reorder actions freely.
70
+ */
71
+ footerActions?: ReactNode;
60
72
  className?: string;
61
73
  style?: CSSProperties;
62
74
  }
63
- export declare function ConfigPanel({ open, title, kindLabel, icon, banner, tabs, activeTab: controlledActive, defaultActiveTab, onTabChange, saveState, onTitleChange, onClose, onSave, onCancel, resizable, defaultWidth, minWidth, maxWidth, maxWidthContainerInset, variant, children, footer, className, style, }: ConfigPanelProps): import("react/jsx-runtime").JSX.Element;
75
+ export declare function ConfigPanel({ open, title, icon, headerActions, banner, tabs, activeTab: controlledActive, defaultActiveTab, onTabChange, saveState, onTitleChange, onClose, onSave, onCancel, resizable, defaultWidth, minWidth, maxWidth, maxWidthContainerInset, variant, children, footerActions, className, style, }: ConfigPanelProps): import("react/jsx-runtime").JSX.Element;
64
76
  //# sourceMappingURL=ConfigPanel.d.ts.map
package/dist/workflow/components/ConfigPanel/ConfigPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ConfigPanel.d.ts","sourceRoot":"","sources":["../../../../src/workflow/components/ConfigPanel/ConfigPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAEpF,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,yEAAyE;IACzE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qEAAqE;IACrE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAkBD,wBAAgB,WAAW,CAAC,EAC1B,IAAW,EACX,KAAK,EACL,SAAS,EACT,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,SAAS,EAAE,gBAAgB,EAC3B,gBAAgB,EAChB,WAAW,EACX,SAAmB,EACnB,aAAa,EACb,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAgB,EAChB,YAAkB,EAClB,QAAc,EACd,QAAc,EACd,sBAA2B,EAC3B,OAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,2CAsOlB"}
1
+ {"version":3,"file":"ConfigPanel.d.ts","sourceRoot":"","sources":["../../../../src/workflow/components/ConfigPanel/ConfigPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAEpF,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;qEACiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;yDACqD;IACrD,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,yEAAyE;IACzE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;uDACmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAkBD,wBAAgB,WAAW,CAAC,EAC1B,IAAW,EACX,KAAK,EACL,IAAI,EACJ,aAAa,EACb,MAAM,EACN,IAAI,EACJ,SAAS,EAAE,gBAAgB,EAC3B,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,aAAa,EACb,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAgB,EAChB,YAAkB,EAClB,QAAc,EACd,QAAc,EACd,sBAA2B,EAC3B,OAAkB,EAClB,QAAQ,EACR,aAAa,EACb,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,2CA8OlB"}
package/dist/workflow.cjs CHANGED
@@ -726,26 +726,26 @@ var SAVE_STATE_DOT = {
726
726
  function ConfigPanel({
727
727
  open = true,
728
728
  title,
729
- kindLabel,
730
729
  icon,
730
+ headerActions,
731
731
  banner,
732
732
  tabs,
733
733
  activeTab: controlledActive,
734
734
  defaultActiveTab,
735
735
  onTabChange,
736
- saveState = "clean",
736
+ saveState,
737
737
  onTitleChange,
738
738
  onClose,
739
739
  onSave,
740
740
  onCancel,
741
741
  resizable = true,
742
- defaultWidth = 360,
743
- minWidth = 280,
742
+ defaultWidth = 400,
743
+ minWidth = 400,
744
744
  maxWidth = 720,
745
745
  maxWidthContainerInset = 80,
746
746
  variant = "pinned",
747
747
  children,
748
- footer,
748
+ footerActions,
749
749
  className,
750
750
  style
751
751
  }) {
@@ -842,55 +842,53 @@ function ConfigPanel({
842
842
  "aria-hidden": "true"
843
843
  }
844
844
  ),
845
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "ods-flow-config-panel__header", children: [
846
- kindLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-flow-config-panel__breadcrumb", children: kindLabel }),
847
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-flow-config-panel__title-row", children: [
848
- icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-flow-config-panel__icon", children: icon }),
849
- editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
850
- "input",
851
- {
852
- className: "ods-flow-config-panel__title-input",
853
- value: draftTitle,
854
- autoFocus: true,
855
- onChange: (e) => setDraftTitle(e.target.value),
856
- onBlur: () => commitTitle(draftTitle),
857
- onKeyDown: titleKeyDown,
858
- "aria-label": "Edit title"
859
- }
860
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
861
- "button",
862
- {
863
- type: "button",
864
- className: "ods-flow-config-panel__title",
865
- onDoubleClick: () => {
866
- if (!onTitleChange) return;
867
- setDraftTitle(title ?? "");
868
- setEditingTitle(true);
869
- },
870
- title: onTitleChange ? "Double-click to rename" : void 0,
871
- children: title ?? "Untitled"
872
- }
873
- ),
874
- onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
875
- "button",
876
- {
877
- type: "button",
878
- className: "ods-flow-config-panel__close",
879
- onClick: onClose,
880
- "aria-label": "Close panel",
881
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
882
- "path",
883
- {
884
- d: "M3 3l8 8M11 3l-8 8",
885
- stroke: "currentColor",
886
- strokeWidth: "1.5",
887
- strokeLinecap: "round"
888
- }
889
- ) })
890
- }
891
- )
892
- ] })
893
- ] }),
845
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: "ods-flow-config-panel__header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-flow-config-panel__title-row", children: [
846
+ icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-flow-config-panel__icon", children: icon }),
847
+ editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
848
+ "input",
849
+ {
850
+ className: "ods-flow-config-panel__title-input",
851
+ value: draftTitle,
852
+ autoFocus: true,
853
+ onChange: (e) => setDraftTitle(e.target.value),
854
+ onBlur: () => commitTitle(draftTitle),
855
+ onKeyDown: titleKeyDown,
856
+ "aria-label": "Edit title"
857
+ }
858
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
859
+ "button",
860
+ {
861
+ type: "button",
862
+ className: "ods-flow-config-panel__title",
863
+ onDoubleClick: () => {
864
+ if (!onTitleChange) return;
865
+ setDraftTitle(title ?? "");
866
+ setEditingTitle(true);
867
+ },
868
+ title: onTitleChange ? "Double-click to rename" : void 0,
869
+ children: title ?? "Untitled"
870
+ }
871
+ ),
872
+ headerActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-flow-config-panel__header-actions", children: headerActions }),
873
+ onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
874
+ "button",
875
+ {
876
+ type: "button",
877
+ className: "ods-flow-config-panel__close",
878
+ onClick: onClose,
879
+ "aria-label": "Close panel",
880
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
881
+ "path",
882
+ {
883
+ d: "M3 3l8 8M11 3l-8 8",
884
+ stroke: "currentColor",
885
+ strokeWidth: "1.5",
886
+ strokeLinecap: "round"
887
+ }
888
+ ) })
889
+ }
890
+ )
891
+ ] }) }),
894
892
  tabs && tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "ods-flow-config-panel__tabs", role: "tablist", children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
895
893
  "button",
896
894
  {
@@ -913,7 +911,7 @@ function ConfigPanel({
913
911
  banner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-flow-config-panel__banner", children: banner }),
914
912
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-flow-config-panel__body", role: "tabpanel", children: tabs ? activeTab?.content : children }),
915
913
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("footer", { className: "ods-flow-config-panel__footer", children: [
916
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
914
+ saveState && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
917
915
  "span",
918
916
  {
919
917
  className: cn(
@@ -933,7 +931,7 @@ function ConfigPanel({
933
931
  ]
934
932
  }
935
933
  ),
936
- footer ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-flow-config-panel__footer-actions", children: [
934
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-flow-config-panel__footer-actions", children: footerActions ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
937
935
  onCancel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
938
936
  "button",
939
937
  {
@@ -949,11 +947,11 @@ function ConfigPanel({
949
947
  type: "button",
950
948
  className: "ods-flow-config-panel__btn ods-flow-config-panel__btn--primary",
951
949
  onClick: onSave,
952
- disabled: saveState === "saving" || saveState === "clean",
950
+ disabled: saveState === "saving",
953
951
  children: saveState === "saving" ? "Saving\u2026" : "Save"
954
952
  }
955
953
  )
956
- ] })
954
+ ] }) })
957
955
  ] })
958
956
  ]
959
957
  }