@krapwoo/ds-viewer 0.6.6 → 0.6.7

package/native/catalog/SectionBlock.tsx

@@ -113,22 +113,21 @@ function Preview({ render, widths, surface, layout }: { render: () => React.Reac
   if (widths === 'full') return <SpecimenSurface surface={kind} style={styles.previewCard}>{render()}</SpecimenSurface>;
   if (layout === 'table') return <TablePreview render={render} widths={widths} surface={kind} />;
   return (
-    <View style={styles.previewCard}>
+    <SpecimenSurface surface={kind} style={styles.previewCard}>
       <View style={styles.frames}>
         {widths.map((width, i) => (
-          <SpecimenSurface
+          <View
             key={`${width}-${i}`}
-            surface={kind}
             // Two live instances of the same component: name each so assistive tech can tell them apart.
             {...(widths.length > 1 ? ({ role: 'group', 'aria-label': frameLabel(width) } as Record<string, unknown>) : null)}
             style={[styles.frame, { width }]}
           >
             {widths.length > 1 && <Text style={styles.frameLabel}>{frameLabel(width)}</Text>}
             {render()}
-          </SpecimenSurface>
+          </View>
         ))}
       </View>
-    </View>
+    </SpecimenSurface>
   );
 }
 

package/native/catalog/SpecimenSurface.tsx

@@ -116,25 +116,30 @@ function readTree(root: MeasurableNode, browser: Browser): LayoutBox {
 }
 
 export function SpecimenContent({ fill, align, capped = true, children }: { fill?: boolean; align?: SpecimenAlign; /** Phone-width cap for a filled example; off for page-width cells. */ capped?: boolean; children: React.ReactNode }) {
-  // After layout (browser only): a `fill` example whose visible content is narrower than the cell
-  // (a fixed-width skeleton, a tooltip around a small trigger) is centred instead of sitting
-  // against the leading edge; an explicit `align` always wins. And in development, an example
+  // After layout (browser only): a genuinely narrow `fill` root (a fixed-width skeleton) is
+  // centred. Narrow text/icons inside a full-width layout do not collapse that layout's root.
+  // An explicit `align` always wins. And in development, an example
   // wider than its cell logs a warning naming a wider `specimenSize`.
   const address = useSpecimenAddress();
   const ref = useRef<View>(null);
   const [centerNarrow, setCenterNarrow] = useState(false);
   const warned = useRef(false);
+  useEffect(() => {
+    setCenterNarrow(false);
+  }, [fill, capped, align]);
   const measure = useCallback(() => {
     const browser = globalThis as unknown as Browser;
     const node = ref.current as unknown as MeasurableNode | null;
     if (!browser.Element || !browser.getComputedStyle || !node?.getBoundingClientRect) return;
     const wrapperWidth = node.getBoundingClientRect().width;
-    const visible = paintedExtent(visibleBoxes(readTree(node, browser)));
+    const tree = readTree(node, browser);
+    const visible = paintedExtent(visibleBoxes(tree));
+    const rootWidth = Math.max(0, ...tree.children.map((child) => child.right - child.left));
     // Only for a phone-width cell. Centring exists for a small control adrift in a wide cell (a
     // tooltip, a fixed-width skeleton); a 'page' cell holds a layout, whose own content is
     // supposed to sit at the left of its own measure, and centring it collapses it to the width of
     // whatever it happens to have painted.
-    if (capped && fill && align === undefined && !centerNarrow && shouldCenterFilledContent(visible, wrapperWidth)) setCenterNarrow(true);
+    if (capped && fill && align === undefined && !centerNarrow && shouldCenterFilledContent(visible, wrapperWidth, rootWidth)) setCenterNarrow(true);
     if ((globalThis as { __DEV__?: boolean }).__DEV__ && !warned.current && overflowsCell(visible, wrapperWidth)) {
       warned.current = true;
       console.warn(
@@ -143,7 +148,7 @@ export function SpecimenContent({ fill, align, capped = true, children }: { fill
     }
   }, [capped, fill, align, centerNarrow, address]);
   if (fill) {
-    const alignItems = centerNarrow ? 'center' : specimenContentAlignItems(fill, align);
+    const alignItems = capped && align === undefined && centerNarrow ? 'center' : specimenContentAlignItems(fill, align);
     return <View ref={ref} onLayout={measure} style={[SPECIMEN_SURFACE_WIDTH_STYLE, filledContentStyle(capped), { alignItems }]}>{children}</View>;
   }
   return <View ref={ref} onLayout={measure} style={specimenContentBoundedStyle(align)}>{children}</View>;

package/native/catalog/specimenSurfaceStyle.ts

@@ -89,12 +89,12 @@ export function specimenContentBoundedStyle(align: SpecimenAlign | undefined) {
  *  `specimenFill.ts`). A page can force a fill with `specimenSurface`. */
 export const DEFAULT_SPECIMEN_SURFACE: SpecimenSurfaceKind = 'auto';
 
-/** A `fill` example stretches to its cell, but one with its own fixed width (a 160-point skeleton
- *  bar) stays that width; it should then sit in the middle of the cell, not against its leading
- *  edge. True when the measured example is narrower than its wrapper (by more than rounding). */
-export function shouldCenterFilledContent(contentWidth: number, wrapperWidth: number): boolean {
-  if (!(contentWidth > 0) || !(wrapperWidth > 0)) return false;
-  return contentWidth < wrapperWidth - 1;
+/** Center genuinely narrow filled examples, not narrow paint inside a full-width fluid layout.
+ *  The latter must retain stretch: centering its root would collapse it to its intrinsic width.
+ *  Callers without a separate root measurement retain the established fixed-width behavior. */
+export function shouldCenterFilledContent(contentWidth: number, wrapperWidth: number, rootWidth = contentWidth): boolean {
+  if (!(contentWidth > 0) || !(wrapperWidth > 0) || !(rootWidth > 0)) return false;
+  return contentWidth < wrapperWidth - 1 && rootWidth < wrapperWidth - 1;
 }
 
 /** The width of what's actually visible in an example: from the leftmost to the rightmost painted

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krapwoo/ds-viewer",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "license": "MIT",
   "type": "module",
   "description": "A browsable, always-current catalog for an Expo / React Native design system.",