@stonedogcode/style 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonedogcode/style",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "A Panda CSS design system: a themeable Panda preset plus the React components built on it.",
   "license": "Apache-2.0",
   "author": "StoneDogCode L.L.C.",

package/src/components/StyledBox.tsx

@@ -101,6 +101,79 @@ export interface StyledBoxProps
   scrollbar?: "auto" | "on" | "off";
 }
 
+/**
+ * The layout props that describe how a caller wants THEIR CHILDREN arranged.
+ *
+ * Without `noWrap`, `StyledBox` puts children three levels down:
+ *
+ * ```
+ * StyledBoxRoot        ← these props used to land here, and only here
+ *   └ StyledVStack     ← ...whose only child is this
+ *       └ div
+ *           └ StyledGridPanel
+ *               └ div  ← a plain block div, where the children actually live
+ * ```
+ *
+ * So a root flex container laid out exactly ONE item and the caller's children
+ * stayed in ordinary block flow — `display="flex" flexDirection="column"` did
+ * nothing, `alignItems` centred a wrapper, and `gap` separated nothing.
+ *
+ * The visible cost, three times over: two adjacent `StyledText` siblings render
+ * as one welded run, because `StyledText` is a `<span>` and JSX strips the
+ * whitespace between elements on separate lines. Hopper Vitals shipped
+ * `264.2Weight` and `Sep 6Record another to see a trend.` (NEH-1473), which is
+ * the same symptom NEH-490 fixed twice at the call site. Fixing it at the call
+ * site is why it came back.
+ *
+ * **This cannot break anything that currently works.** These declarations were
+ * discarded before — a flex container with one child arranges nothing — so
+ * nothing can be depending on their effect. Same argument `StyledText`'s block
+ * promotion makes for vertical margins on an inline box.
+ *
+ * They are FORWARDED, not moved: the root keeps them too, so a caller relying
+ * on the root's own box (a `gap` between header, content and footer, say) is
+ * unaffected.
+ *
+ * Sizing props are deliberately absent — `width`, `height`, `padding`,
+ * `margin`, `overflow` and friends genuinely apply to the root's own box, and
+ * copying them inward would double padding and re-clip content.
+ */
+const LAYOUT_PROPS = [
+  "display",
+  "flexDirection",
+  "flexWrap",
+  "alignItems",
+  "alignContent",
+  "justifyContent",
+  "justifyItems",
+  "gap",
+  "rowGap",
+  "columnGap",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridAutoFlow",
+  "placeItems",
+  "placeContent",
+] as const;
+
+/**
+ * Did the caller ask for a layout of their own?
+ *
+ * When they did, and nothing else needs the wrapper, `StyledBox` renders the
+ * children DIRECTLY inside the root so the root really is their parent — which
+ * is what makes every Panda prop work, `gap` included.
+ *
+ * Forwarding the props as inline CSS was tried first and is wrong: `gap="2"` is
+ * a Panda spacing TOKEN, not a length, so `style={{ gap: "2" }}` is invalid CSS
+ * and silently dropped. Panda resolves tokens at build time for props on a
+ * styled component; it cannot for a runtime value written into a style
+ * attribute. Making the root the parent sidesteps the problem entirely — the props
+ * stay exactly where Panda already handles them.
+ */
+function wantsOwnLayout(rest: Record<string, unknown>): boolean {
+  return LAYOUT_PROPS.some((prop) => rest[prop] !== undefined && rest[prop] !== null);
+}
+
 const StyledBoxRoot = styled("div", boxRecipe);
 
 const StyledBox = React.forwardRef<HTMLDivElement, StyledBoxProps>(
@@ -137,6 +210,10 @@ const StyledBox = React.forwardRef<HTMLDivElement, StyledBoxProps>(
     // scrollbar prop controls inner content overflow
     const innerOverflow: Property.Overflow = scrollbar === "auto" ? "auto" : scrollbar === "on" ? "scroll" : "hidden";
 
+    // Does the caller lay out their own children? If so the wrapper is what
+    // stands between their props and the elements those props describe.
+    const callerLaysOutChildren = wantsOwnLayout(rest as Record<string, unknown>);
+
     if (noWrap) {
       if (resolvedHeader || resolvedFooter) {
         return (
@@ -153,6 +230,30 @@ const StyledBox = React.forwardRef<HTMLDivElement, StyledBoxProps>(
         </StyledBoxRoot>
       );
     }
+    /*
+      The caller lays out their own children and nothing else needs the
+      wrapper, so the root parents them directly.
+
+      Gated on there being no header, footer, panels or scrollbar: each of
+      those is a real reason the wrapper exists, and this must not take any of
+      them away. What is left is the case where the wrapper only ever stood
+      between a caller's layout props and the children they describe.
+    */
+    if (
+      callerLaysOutChildren &&
+      !resolvedHeader &&
+      !resolvedFooter &&
+      !leftPanel &&
+      !rightPanel &&
+      scrollbar === undefined
+    ) {
+      return (
+        <StyledBoxRoot ref={ref} {...(as ? { as } : {})} className={combinedClassName} {...rest}>
+          {children}
+        </StyledBoxRoot>
+      );
+    }
+
     return (
       <StyledBoxRoot ref={ref} {...(as ? { as } : {})} className={combinedClassName} {...rest}>
         <StyledVStack gap="0" width="100%" height="100%" style={{ overflow: innerOverflow }}>