ab-nextjs-components 0.1.10 → 0.1.11

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.1.11 — 2026-10-15
+
+* 🐛 **AbFlowDiagram: nodes no longer cover the header in small boxes.** At 390px wide the Live Playground's top node ("core") sat under the "Live Playground" header. With a header (title, live dot or caption) the root now gets `data-ab-header="true"`, and nodes + wires live in a stage that starts below the header band: `--ab-flow-diagram-inset-top` (default `2.75rem`, tunable). Node `x` / `y` stay 0–100 but now map onto that stage, and the wires share the same box so they still meet the nodes. Without a header the stage is the full card (unchanged)
+* 📏 **AbFlowDiagram nodes scale with the card:** `container-type: inline-size` on the root; node text, padding, radius and the hub glow use clamped `cqi` sizes (13px on a 760px card, 11px at 390px)
+* 🪐 **AbFlowDiagram: side nodes are never clipped** (Joseph: s04's `--ab-color-bronze` and s07's `reduced motion` were cut off at the card edge in a 390px box). The orbit now scales with the box. Each node is anchored at the same fraction of its own box as its position (`translate(-x%, -y%)` via `--ab-flow-node-x` / `-y`; `x = y = 50` is the old centring), so the outer ring pulls in by exactly the node's width, and the wire end stays inside the pill. Nodes + wires also sit inside a side margin, `--ab-flow-diagram-inset-x` (default `0.5rem`), and an over-long label ellipsises (`max-width: 100%`). Positions are clamped to 0–100 like the wires
+* Tests: header flag, stage insets shared by nodes + wires, 390px geometry, clamped scaling, proportional anchoring + side margin, s04 / s07 orbit geometry at 390 / 760px × 276 / 380px. Checked in WebKit at 390px: "core" top 9px → 53px (header ends at 33px); no node overlaps the header or is clipped at 390 / 760px. After the orbit fix: s04 + s07 have no node clipped (x or y) or over the header at 390 / 760px wide × 276px / 380px / default-ratio heights (before: 5 nodes clipped at 390px, 2 at 760px)
+
 ## 0.1.10 — 2026-10-14
 
 * **Motion comes from ab-nextjs-animations (>= 0.2.4, now a required peer):** no component CSS declares its own `transition`, `animation` or `@keyframes` any more. Each component imports the package stylesheet it needs:

package/ab-flow-diagram/index.tsx

@@ -73,6 +73,13 @@ export interface AbFlowDiagramProps {
   children?: ReactNode; // 🧩 optional extra overlay (decorative)
 }
 
+// ✂️ 0–100 (same clamp as the wires, so a node and its wire end always agree)
+const pct = (v: number): number => Math.min(100, Math.max(0, v));
+
+/** 📍 node position + proportional anchor (CSS keeps every node inside the stage, see styles.module.css) */
+const nodeStyle = (n: AbFlowNode): CSSProperties =>
+  ({ left: `${pct(n.x)}%`, top: `${pct(n.y)}%`, '--ab-flow-node-x': String(pct(n.x)), '--ab-flow-node-y': String(pct(n.y)) }) as CSSProperties;
+
 /** 🎨 Live Playground scene: SVG wires + HTML nodes, CSS-only motion, one accessible image. */
 export function AbFlowDiagram(props: AbFlowDiagramProps): ReactElement {
   // 🧩 props
@@ -88,6 +95,9 @@ export function AbFlowDiagram(props: AbFlowDiagramProps): ReactElement {
     '--ab-wire-poster': String(100 - Math.min(1, Math.max(0, posterAt)) * 100), // 🖼️ dashoffset at the poster frame
   } as CSSProperties;
 
+  // 🏷️ is there a header row? (drives the header-safe stage inset in CSS)
+  const hasHeader = Boolean(title || live || caption);
+
   return (
     <figure
       role="img" // ♿ the whole scene is ONE image
@@ -98,9 +108,10 @@ export function AbFlowDiagram(props: AbFlowDiagramProps): ReactElement {
       data-active={String(active)} // ▶️ / ⏸️
       data-ab-paused={String(!active)} // ⏸️ ab-nextjs-animations pauses wires on inactive slides
       data-variant={variant} // 📐
+      data-ab-header={String(hasHeader)} // 🏷️ header-safe stage: nodes + wires start below the header
     >
       {/* 🏷️ card header (decorative: alt already describes it) */}
-      {title || live || caption ? (
+      {hasHeader ? (
         <div className={styles.header} aria-hidden="true">
           {title ? <span className={styles.title}>{title}</span> : null}
           {live ? <span className={styles.live}><span className={styles.liveDot} />{typeof live === 'string' ? live : null}</span> : null}
@@ -126,7 +137,7 @@ export function AbFlowDiagram(props: AbFlowDiagramProps): ReactElement {
       {/* 🔵 nodes layer (HTML: crisp text, real fonts) */}
       <div className={styles.nodes} aria-hidden="true">
         {nodes.map((n) => (
-          <span key={n.id} className={styles.node} data-tone={n.tone ?? 'node'} style={{ left: `${n.x}%`, top: `${n.y}%` }}>
+          <span key={n.id} className={styles.node} data-tone={n.tone ?? 'node'} style={nodeStyle(n)}>
             {n.icon ? <span className={styles.nodeIcon}>{n.icon}</span> : null}
             <span>{n.label}</span>
           </span>

package/ab-flow-diagram/styles.module.css

@@ -47,6 +47,15 @@
   background: var(--ab-color-surface-container, transparent); /* 🎨 */
   overflow: hidden; /* ✂️ */
   color: var(--ab-color-on-surface, currentColor); /* 🎨 */
+  container-type: inline-size; /* 📦 nodes scale with the card width (cqi units below) */
+  /* 🎛️ stage insets (tunable): where nodes + wires may sit. Top is 0 unless a header renders (below) */
+  --ab-flow-diagram-stage-top: 0px;
+  --ab-flow-diagram-stage-x: var(--ab-flow-diagram-inset-x, 0.5rem); /* ↔️ side margin: nodes never touch the card edge */
+}
+/* 🏷️ header-safe stage: with a title / live dot / caption, nodes + wires start BELOW the header band, so a
+ *    node near the top (e.g. "core" at 390px) can't cover the header. Override with --ab-flow-diagram-inset-top */
+.root[data-ab-header='true'] {
+  --ab-flow-diagram-stage-top: var(--ab-flow-diagram-inset-top, 2.75rem); /* 📏 0.875rem header top + ~1.25rem row + gap */
 }
 .root[data-variant='compact'] {
   aspect-ratio: auto; /* 📐 */
@@ -78,9 +87,9 @@
 /* 〰️ wires layer */
 .wires {
   position: absolute; /* 📌 */
-  inset: 0; /* 📐 full card */
-  width: 100%; /* ↔️ */
-  height: 100%; /* ↕️ */
+  inset: var(--ab-flow-diagram-stage-top) var(--ab-flow-diagram-stage-x) 0; /* 📐 the stage (below the header, inside the side margins) */
+  width: calc(100% - 2 * var(--ab-flow-diagram-stage-x)); /* ↔️ same box as .nodes */
+  height: calc(100% - var(--ab-flow-diagram-stage-top)); /* ↕️ same box as .nodes, so wires meet the nodes */
   overflow: visible; /* 🚫 clip */
 }
 .wire,
@@ -101,25 +110,33 @@
 }
 
 /* 🔵 nodes layer */
-.nodes { position: absolute; inset: 0; } /* 📐 */
+.nodes { position: absolute; inset: var(--ab-flow-diagram-stage-top) var(--ab-flow-diagram-stage-x) 0; } /* 📐 same stage as .wires */
 .node {
   position: absolute; /* 📌 x/y */
-  transform: translate(-50%, -50%); /* 🎯 centre on the point */
+  /* 🎯 orbit that scales with the box: each node is anchored at the SAME fraction of its own box as its
+   *    position in the stage (x = 8 → 8% of the pill sits left of the point, x = 92 → 92%). So the outer edge
+   *    of the orbit pulls in by exactly the node's width: a side node can never cross the card edge, at any
+   *    box size, and the wire end (the point) is always inside the pill. x = y = 50 is the old centring. */
+  transform: translate(calc(var(--ab-flow-node-x, 50) * -1%), calc(var(--ab-flow-node-y, 50) * -1%));
+  max-width: 100%; /* 📏 an over-long label can't be wider than the stage… */
+  overflow: hidden; /* ✂️ …it ellipsises instead */
+  text-overflow: ellipsis; /* … */
   display: inline-flex; /* 📐 */
   align-items: center; /* ↕️ */
   gap: 0.375rem; /* 🧱 */
-  padding: 0.375rem 0.625rem; /* 🧱 */
-  border-radius: 0.625rem; /* 🔲 */
+  /* 📏 scales with the card (cqi = 1% of its width): 760px card → 13px text, 390px → 11px; clamped both ways */
+  padding: clamp(0.25rem, 0.8cqi, 0.375rem) clamp(0.4375rem, 1.4cqi, 0.625rem); /* 🧱 */
+  border-radius: clamp(0.5rem, 1.4cqi, 0.625rem); /* 🔲 */
   border: 1px solid var(--ab-color-outline-variant, rgb(0 0 0 / 0.12)); /* 🖊️ */
   background: var(--ab-color-surface, #fff); /* 🎨 */
-  font-size: 0.8125rem; /* 🔡 */
+  font-size: clamp(0.6875rem, 1.75cqi, 0.8125rem); /* 🔡 */
   white-space: nowrap; /* 🚫 wrap */
 }
 .node[data-tone='hub'] {
-  padding: 0.625rem 0.875rem; /* 🧱 bigger */
+  padding: clamp(0.4375rem, 1.4cqi, 0.625rem) clamp(0.625rem, 1.9cqi, 0.875rem); /* 🧱 bigger (scales too) */
   border-color: var(--ab-color-bronze, #A67C52); /* 🥉 */
   font-weight: 700; /* 💪 */
-  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ab-color-bronze, #A67C52) 12%, transparent); /* ✨ glow */
+  box-shadow: 0 0 0 clamp(3px, 0.8cqi, 6px) color-mix(in srgb, var(--ab-color-bronze, #A67C52) 12%, transparent); /* ✨ glow */
 }
 .node[data-tone='accent'] { color: var(--ab-color-bronze-text, #8A6440); } /* ♿ */
 .nodeIcon { display: inline-flex; width: 1.125rem; height: 1.125rem; } /* 🖼️ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-nextjs-components",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "🚀 A lightweight collection of server & client React components created by Abraham Ukachi, and optimized for Next.js applications 😎.",
   "type": "module",
   "main": "index.ts",