npm - @designa8/vibedesign-stripe-deepseek-85ea - Versions diffs - 0.1.0 → 0.1.1 - Mend

@designa8/vibedesign-stripe-deepseek-85ea 0.1.0 → 0.1.1

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 (5) hide show

package/README.md +1 -1
package/dist/index.cjs +39 -21
package/dist/index.js +39 -21
package/package.json +1 -1
package/src/atoms/PaymentRoutingCanvas/PaymentRoutingCanvas.tsx +26 -8

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-85ea
-Complete design system generated by Atoms Design, version **0.1.0**.
+Complete design system generated by Atoms Design, version **0.1.1**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.

package/dist/index.cjs CHANGED Viewed

@@ -12277,6 +12277,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
     const [panelOpen, setPanelOpen] = React62.useState(true);
     const [zoom, setZoom] = React62.useState(1);
     const [fit, setFit] = React62.useState(1);
+    const [planeHeight, setPlaneHeight] = React62.useState(PLANE_H);
     const [pan, setPan] = React62.useState({ x: 0, y: 0 });
     const [issuesOpen, setIssuesOpen] = React62.useState(false);
     const [priority, setPriority] = React62.useState([
@@ -12303,8 +12304,16 @@ var PaymentRoutingCanvas = React62.forwardRef(
       if (!plane) return;
       const measure = () => {
         const width = plane.clientWidth;
-        if (!width) return;
-        setFit(Math.min(1, (width - PLANE_PAD * 2) / SCENE_W));
+        const height = plane.clientHeight;
+        if (!width || !height) return;
+        setFit(
+          Math.min(
+            1,
+            (width - PLANE_PAD * 2) / SCENE_W,
+            (height - PLANE_PAD * 2) / SCENE_H
+          )
+        );
+        setPlaneHeight(height);
       };
       measure();
       const observer = new ResizeObserver(measure);
@@ -12476,7 +12485,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
           else if (ref) ref.current = node;
         },
         className: cn54(
-          "flex w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
+          "flex min-h-0 w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
           className
         ),
         "data-simulating": replaying || void 0,
@@ -12532,7 +12541,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
               /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
                 "div",
                 {
@@ -12558,11 +12567,13 @@ var PaymentRoutingCanvas = React62.forwardRef(
                     }
                   },
                   className: cn54(
-                    "relative min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
+                    "relative min-h-0 min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
                     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue focus-visible:ring-inset"
                   ),
                   style: {
-                    height: PLANE_H,
+                    // Grows with the host height, never collapses below the
+                    // stand-alone look when the parent has no explicit height.
+                    minHeight: PLANE_H,
                     backgroundImage: "radial-gradient(var(--color-hairline) 1px, transparent 1px)",
                     backgroundSize: "16px 16px"
                   },
@@ -12574,7 +12585,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                         style: {
                           width: SCENE_W,
                           height: SCENE_H,
-                          transform: `translate(${PLANE_PAD + pan.x}px, ${Math.max((PLANE_H - SCENE_H * scale) / 2, 0) + pan.y}px) scale(${scale})`,
+                          transform: `translate(${PLANE_PAD + pan.x}px, ${Math.max((planeHeight - SCENE_H * scale) / 2, 0) + pan.y}px) scale(${scale})`,
                           transformOrigin: "0 0",
                           transition: "transform 200ms ease-out"
                         },
@@ -12735,22 +12746,29 @@ var PaymentRoutingCanvas = React62.forwardRef(
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "shrink-0 border-l border-hairline", style: { width: PANEL_W }, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-              NodeConfigPanel,
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+              "div",
               {
-                open: panelOpen,
-                nodeType: focusedNode?.type ?? "condition",
-                title: focusedNode?.title ?? "Select a node",
-                rule: priority[0]?.label ?? "",
-                priorities: priority,
-                fallbackEnabled,
-                onClose: closePanel,
-                onPrioritiesChange: setPriority,
-                onFallbackChange: setFallbackEnabled,
-                onRemove: () => setPanelOpen(false),
-                onSave: () => setPanelOpen(true)
+                className: "flex min-h-0 shrink-0 flex-col self-stretch border-l border-hairline",
+                style: { width: PANEL_W },
+                children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                  NodeConfigPanel,
+                  {
+                    open: panelOpen,
+                    nodeType: focusedNode?.type ?? "condition",
+                    title: focusedNode?.title ?? "Select a node",
+                    rule: priority[0]?.label ?? "",
+                    priorities: priority,
+                    fallbackEnabled,
+                    onClose: closePanel,
+                    onPrioritiesChange: setPriority,
+                    onFallbackChange: setFallbackEnabled,
+                    onRemove: () => setPanelOpen(false),
+                    onSave: () => setPanelOpen(true)
+                  }
+                )
               }
-            ) })
+            )
           ] }),
           ReactDOM10.createPortal(
             /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(

package/dist/index.js CHANGED Viewed

@@ -12141,6 +12141,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
     const [panelOpen, setPanelOpen] = React62.useState(true);
     const [zoom, setZoom] = React62.useState(1);
     const [fit, setFit] = React62.useState(1);
+    const [planeHeight, setPlaneHeight] = React62.useState(PLANE_H);
     const [pan, setPan] = React62.useState({ x: 0, y: 0 });
     const [issuesOpen, setIssuesOpen] = React62.useState(false);
     const [priority, setPriority] = React62.useState([
@@ -12167,8 +12168,16 @@ var PaymentRoutingCanvas = React62.forwardRef(
       if (!plane) return;
       const measure = () => {
         const width = plane.clientWidth;
-        if (!width) return;
-        setFit(Math.min(1, (width - PLANE_PAD * 2) / SCENE_W));
+        const height = plane.clientHeight;
+        if (!width || !height) return;
+        setFit(
+          Math.min(
+            1,
+            (width - PLANE_PAD * 2) / SCENE_W,
+            (height - PLANE_PAD * 2) / SCENE_H
+          )
+        );
+        setPlaneHeight(height);
       };
       measure();
       const observer = new ResizeObserver(measure);
@@ -12340,7 +12349,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
           else if (ref) ref.current = node;
         },
         className: cn54(
-          "flex w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
+          "flex min-h-0 w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
           className
         ),
         "data-simulating": replaying || void 0,
@@ -12396,7 +12405,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
             ] })
           ] }),
           /* @__PURE__ */ jsxs59("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
-            /* @__PURE__ */ jsxs59("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxs59("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
               /* @__PURE__ */ jsxs59(
                 "div",
                 {
@@ -12422,11 +12431,13 @@ var PaymentRoutingCanvas = React62.forwardRef(
                     }
                   },
                   className: cn54(
-                    "relative min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
+                    "relative min-h-0 min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
                     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue focus-visible:ring-inset"
                   ),
                   style: {
-                    height: PLANE_H,
+                    // Grows with the host height, never collapses below the
+                    // stand-alone look when the parent has no explicit height.
+                    minHeight: PLANE_H,
                     backgroundImage: "radial-gradient(var(--color-hairline) 1px, transparent 1px)",
                     backgroundSize: "16px 16px"
                   },
@@ -12438,7 +12449,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                         style: {
                           width: SCENE_W,
                           height: SCENE_H,
-                          transform: `translate(${PLANE_PAD + pan.x}px, ${Math.max((PLANE_H - SCENE_H * scale) / 2, 0) + pan.y}px) scale(${scale})`,
+                          transform: `translate(${PLANE_PAD + pan.x}px, ${Math.max((planeHeight - SCENE_H * scale) / 2, 0) + pan.y}px) scale(${scale})`,
                           transformOrigin: "0 0",
                           transition: "transform 200ms ease-out"
                         },
@@ -12599,22 +12610,29 @@ var PaymentRoutingCanvas = React62.forwardRef(
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsx62("div", { className: "shrink-0 border-l border-hairline", style: { width: PANEL_W }, children: /* @__PURE__ */ jsx62(
-              NodeConfigPanel,
+            /* @__PURE__ */ jsx62(
+              "div",
               {
-                open: panelOpen,
-                nodeType: focusedNode?.type ?? "condition",
-                title: focusedNode?.title ?? "Select a node",
-                rule: priority[0]?.label ?? "",
-                priorities: priority,
-                fallbackEnabled,
-                onClose: closePanel,
-                onPrioritiesChange: setPriority,
-                onFallbackChange: setFallbackEnabled,
-                onRemove: () => setPanelOpen(false),
-                onSave: () => setPanelOpen(true)
+                className: "flex min-h-0 shrink-0 flex-col self-stretch border-l border-hairline",
+                style: { width: PANEL_W },
+                children: /* @__PURE__ */ jsx62(
+                  NodeConfigPanel,
+                  {
+                    open: panelOpen,
+                    nodeType: focusedNode?.type ?? "condition",
+                    title: focusedNode?.title ?? "Select a node",
+                    rule: priority[0]?.label ?? "",
+                    priorities: priority,
+                    fallbackEnabled,
+                    onClose: closePanel,
+                    onPrioritiesChange: setPriority,
+                    onFallbackChange: setFallbackEnabled,
+                    onRemove: () => setPanelOpen(false),
+                    onSave: () => setPanelOpen(true)
+                  }
+                )
               }
-            ) })
+            )
           ] }),
           ReactDOM10.createPortal(
             /* @__PURE__ */ jsxs59(

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-85ea",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/atoms/PaymentRoutingCanvas/PaymentRoutingCanvas.tsx CHANGED Viewed

@@ -23,6 +23,7 @@ const CONDITION_X = 316;
 const PROCESSOR_X = 632;
 const SCENE_W = 860;
 const SCENE_H = 342;
+/** Minimum plane height, used when the host gives the canvas no explicit height. */
 const PLANE_H = 372;
 const PLANE_PAD = 18;
 const PANEL_W = 296;
@@ -287,6 +288,8 @@ export const PaymentRoutingCanvas = React.forwardRef<
     const [panelOpen, setPanelOpen] = React.useState(true);
     const [zoom, setZoom] = React.useState(1);
     const [fit, setFit] = React.useState(1);
+    /** Measured plane height — the scene centres against this, not a constant. */
+    const [planeHeight, setPlaneHeight] = React.useState(PLANE_H);
     const [pan, setPan] = React.useState({ x: 0, y: 0 });
     const [issuesOpen, setIssuesOpen] = React.useState(false);
     const [priority, setPriority] = React.useState<ConfigPriority[]>([
@@ -316,8 +319,18 @@ export const PaymentRoutingCanvas = React.forwardRef<
       if (!plane) return;
       const measure = () => {
         const width = plane.clientWidth;
-        if (!width) return;
-        setFit(Math.min(1, (width - PLANE_PAD * 2) / SCENE_W));
+        const height = plane.clientHeight;
+        if (!width || !height) return;
+        // Fit the scene into the plane on BOTH axes so a taller host height
+        // widens the fitted scene instead of leaving dead space.
+        setFit(
+          Math.min(
+            1,
+            (width - PLANE_PAD * 2) / SCENE_W,
+            (height - PLANE_PAD * 2) / SCENE_H,
+          ),
+        );
+        setPlaneHeight(height);
       };
       measure();
       const observer = new ResizeObserver(measure);
@@ -519,7 +532,7 @@ export const PaymentRoutingCanvas = React.forwardRef<
           else if (ref) ref.current = node;
         }}
         className={cn(
-          "flex w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
+          "flex min-h-0 w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
           className,
         )}
         data-simulating={replaying || undefined}
@@ -576,7 +589,7 @@ export const PaymentRoutingCanvas = React.forwardRef<
         </div>
         <div className="flex min-h-0 flex-1 items-stretch">
-          <div className="flex min-w-0 flex-1 flex-col">
+          <div className="flex min-h-0 min-w-0 flex-1 flex-col">
             <div
               ref={planeRef}
               role="application"
@@ -600,11 +613,13 @@ export const PaymentRoutingCanvas = React.forwardRef<
                 }
               }}
               className={cn(
-                "relative min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
+                "relative min-h-0 min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue focus-visible:ring-inset",
               )}
               style={{
-                height: PLANE_H,
+                // Grows with the host height, never collapses below the
+                // stand-alone look when the parent has no explicit height.
+                minHeight: PLANE_H,
                 backgroundImage:
                   "radial-gradient(var(--color-hairline) 1px, transparent 1px)",
                 backgroundSize: "16px 16px",
@@ -616,7 +631,7 @@ export const PaymentRoutingCanvas = React.forwardRef<
                   width: SCENE_W,
                   height: SCENE_H,
                   transform: `translate(${PLANE_PAD + pan.x}px, ${
-                    Math.max((PLANE_H - SCENE_H * scale) / 2, 0) + pan.y
+                    Math.max((planeHeight - SCENE_H * scale) / 2, 0) + pan.y
                   }px) scale(${scale})`,
                   transformOrigin: "0 0",
                   transition: "transform 200ms ease-out",
@@ -796,7 +811,10 @@ export const PaymentRoutingCanvas = React.forwardRef<
             </div>
           </div>
-          <div className="shrink-0 border-l border-hairline" style={{ width: PANEL_W }}>
+          <div
+            className="flex min-h-0 shrink-0 flex-col self-stretch border-l border-hairline"
+            style={{ width: PANEL_W }}
+          >
             <NodeConfigPanel
               open={panelOpen}
               nodeType={focusedNode?.type ?? "condition"}