@w6w/ui 0.2.54 → 0.2.55

package/dist/workflow-connections.d.ts

@@ -1,11 +1,59 @@
 import { FlowStep, FlowWorkflow } from './flow-types.ts';
-import { AuthDef, ConnectionSummary } from './types.ts';
+import { AppSummary, AuthDef, ConnectionSummary } from './types.ts';
 export type FlowConnections = Record<string, {
     app: string;
     connection: string | null;
 }>;
+export type ConnectionResourceEdit = {
+    type: "add";
+    name: string;
+    app: string;
+    connection: string;
+} | {
+    type: "update";
+    ref: string;
+    name: string;
+    connection: string;
+    nodeIds?: string[];
+} | {
+    type: "replace";
+    ref: string;
+    connection: string;
+} | {
+    type: "rename";
+    ref: string;
+    name: string;
+} | {
+    type: "remove";
+    ref: string;
+} | {
+    type: "assign";
+    ref: string;
+    nodeIds: string[];
+};
+export interface WorkflowConnectionResources {
+    workflowId: string;
+    nodes: Pick<FlowStep, "id" | "uses">[];
+    connections: FlowConnections;
+    /** App identity already resolved for the canvas; reuse it in the connections rail. */
+    apps?: ReadonlyMap<string, AppSummary>;
+    readOnly?: boolean;
+    /** Select and reveal a consuming node on the canvas. Available in read-only views too. */
+    focusNode?: (nodeId: string) => void;
+    /** Temporary canvas emphasis, without changing selection or the saved workflow. */
+    highlightNode?: (nodeId: string | null) => void;
+    /** Stable callback against the current canvas, including edits made since the panel opened. */
+    edit: (edit: ConnectionResourceEdit) => void;
+}
+/** Edit references and their consumers together, so one undo restores the whole change. */
+export declare function editConnectionResources(nodes: FlowStep[], connections: FlowConnections, edit: ConnectionResourceEdit): {
+    nodes: FlowStep[];
+    connections: FlowConnections;
+};
 /** Missing/foreign bindings stay unresolved in the editor; the server rejects invalid references. */
 export declare function connectionIdFor(step: FlowStep, connections?: FlowConnections): string | undefined;
+/** A workflow-owned name, independent of the first node or the account's display name. */
+export declare function nextWorkflowConnectionName(appId: string, connections: FlowConnections): string;
 /** Lift old inline IDs on the next editor save. Independent bindings remain independent. */
 export declare function centralizeConnections<T extends Pick<FlowWorkflow, "connections" | "nodes">>(workflow: T): T;
 /** Drop only unreferenced aliases when serializing the complete workflow. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w6w/ui",
-  "version": "0.2.54",
+  "version": "0.2.55",
   "description": "React components for w6w — central API management. Build plugins, apps and integrations on them.",
   "license": "MIT",
   "homepage": "https://w6w.io",

package/src/styles/_connections.scss

@@ -86,3 +86,67 @@
 .w6w-connection-id-copy:focus-within .w6w-copyable-btn {
   opacity: 1;
 }
+
+/* Identify workflow connections and their consuming canvas nodes. */
+.w6w-connection-app-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+.w6w-connection-node-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.w6w-connection-node-list .w6w-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  text-align: left;
+  width: 100%;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.w6w-connection-node-label {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.w6w-workflow-connections-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+}
+.w6w-workflow-connections-heading h3 { margin: 0; font-size: inherit; }
+.w6w-workflow-connection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  padding-bottom: var(--w6w-sp-3);
+  border-bottom: 1px solid var(--w6w-border);
+}
+.w6w-connection-summary {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.w6w-connection-consumers summary { cursor: pointer; }
+.w6w-connection-consumers[open] summary { margin-bottom: var(--w6w-sp-2); }
+.w6w-connection-scope { display: flex; align-items: flex-start; gap: var(--w6w-sp-2); }
+.w6w-connection-remove { border-top: 1px solid var(--w6w-border); padding-top: var(--w6w-sp-3); }
+
+.w6w-connection-node-kind {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--w6w-accent);
+}

package/src/styles/_flow.scss

@@ -386,3 +386,9 @@
 .w6w-state-map-add {
   align-self: flex-start;
 }
+
+/* Hover/focus in the connections rail: ephemeral emphasis, separate from selection/run status. */
+.w6w-flow .react-flow__node.w6w-connection-highlight [data-run-status] {
+  outline: 3px solid var(--w6w-accent);
+  outline-offset: 4px;
+}

package/src/styles.css

@@ -4260,6 +4260,12 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   align-self: flex-start;
 }
 
+/* Hover/focus in the connections rail: ephemeral emphasis, separate from selection/run status. */
+.w6w-flow .react-flow__node.w6w-connection-highlight [data-run-status] {
+  outline: 3px solid var(--w6w-accent);
+  outline-offset: 4px;
+}
+
 .w6w-section {
   border: 1px solid var(--w6w-border);
   border-radius: 8px;
@@ -6592,6 +6598,93 @@ button.w6w-rel-open:focus-visible strong {
   opacity: 1;
 }
 
+/* Identify workflow connections and their consuming canvas nodes. */
+.w6w-connection-app-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-connection-node-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.w6w-connection-node-list .w6w-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  text-align: left;
+  width: 100%;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.w6w-connection-node-label {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.w6w-workflow-connections-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-workflow-connections-heading h3 {
+  margin: 0;
+  font-size: inherit;
+}
+
+.w6w-workflow-connection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  padding-bottom: var(--w6w-sp-3);
+  border-bottom: 1px solid var(--w6w-border);
+}
+
+.w6w-connection-summary {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.w6w-connection-consumers summary {
+  cursor: pointer;
+}
+
+.w6w-connection-consumers[open] summary {
+  margin-bottom: var(--w6w-sp-2);
+}
+
+.w6w-connection-scope {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-connection-remove {
+  border-top: 1px solid var(--w6w-border);
+  padding-top: var(--w6w-sp-3);
+}
+
+.w6w-connection-node-kind {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--w6w-accent);
+}
+
 /* Data stores (F-2): DataStoreList, ColumnsEditor, CsvPanel and the data-grid/entry rules ported from Studio's Data store detail page. */
 .w6w-data-store-list {
   display: flex;