@charcuterie/ui 4.5.1 → 4.7.0

package/src/Toolbar/Toolbar.test.tsx

@@ -284,3 +284,87 @@ test("the shell mounts exactly one toolbar", async () => {
     }),
   ).toHaveLength(1)
 })
+
+/**
+ * The font race, which is latent rather than observed: it needs the
+ * two faces to disagree across a collapse boundary, and no story in
+ * the library crosses one today. The test builds that boundary on
+ * purpose, so the mechanism is checked rather than waited for.
+ *
+ * Every width the bar measures is a **text** width. On a cold cache
+ * the first measurement is taken in the fallback face, and when the
+ * real face swaps in the items change size — but the container does
+ * not, so the `ResizeObserver` stays quiet, and nothing re-renders,
+ * so the layout effect does not run either. The bar keeps an answer
+ * computed against a font that is no longer on screen.
+ *
+ * The stub below is that swap with the timing made explicit: the bar
+ * mounts while `document.fonts.ready` is still pending, the items
+ * are widened with no change to the container's box, and the
+ * promise is then resolved. A bar that only measures on mount and
+ * on resize sees neither event and stays wrong.
+ */
+test("the bar re-measures once the webfont has loaded", async () => {
+  const realFonts = document.fonts
+
+  let markFontsReady = () => {}
+
+  const fontsReady = new Promise<FontFaceSet>((resolve) => {
+    markFontsReady = () => {
+      resolve(realFonts)
+    }
+  })
+
+  // Layered over the real set rather than replacing it, so anything
+  // else that reads `document.fonts` during the mount still works.
+  Object.defineProperty(document, "fonts", {
+    configurable: true,
+    value: Object.create(realFonts, {
+      ready: {
+        get: () => fontsReady,
+      },
+    }),
+  })
+
+  // Widens every action without touching the bar's own box — the
+  // `Frame` around `Playground` is a fixed `34rem`. That is exactly
+  // what a font swap does, and it is why the `ResizeObserver` is
+  // not a substitute for this effect.
+  const widenActions = document.createElement("style")
+
+  widenActions.textContent = `[role="toolbar"] button { padding-inline: 4rem; }`
+
+  try {
+    const { canvas } = await mountStory(Playground)
+
+    const toolbar = expectAgentDrivable(canvas, {
+      name: "Deck actions",
+      role: "toolbar",
+    })
+
+    // It fits in the fallback face.
+    await expect(
+      within(toolbar).queryByRole("button", {
+        name: "More actions",
+      }),
+    ).toBeNull()
+
+    document.head.append(widenActions)
+
+    markFontsReady()
+
+    await waitFor(() => {
+      expect(
+        within(toolbar).getByRole("button", {
+          name: "More actions",
+        }),
+      ).toBeInTheDocument()
+    })
+  } finally {
+    widenActions.remove()
+
+    // Back to the prototype getter — the stub was an own property
+    // shadowing it.
+    Reflect.deleteProperty(document, "fonts")
+  }
+})

package/src/Toolbar/useToolbarOverflow.ts

@@ -159,6 +159,49 @@ export const useToolbarOverflow = ({
    */
   useLayoutEffect(measure)
 
+  /**
+   * Measure again once the webfont has actually arrived.
+   *
+   * Every width above is a **text** width, so it is only as correct
+   * as the font that was loaded when it was read. On a cold cache
+   * the first measurement happens in the fallback face, the items
+   * come out a few pixels off, and `chooseVisibleCount` keeps or
+   * drops one action it should not have — then never revisits it,
+   * because swapping a font changes no box the `ResizeObserver`
+   * watches and triggers no render.
+   *
+   * The user-visible symptom is a bar that settles one button wrong
+   * and stays there. It needs the two faces to disagree across a
+   * collapse boundary, so it is latent rather than observed: no
+   * story in the library crosses one today, which is why `vrt`
+   * reports nothing either way. That makes it a gap to close, not a
+   * regression to chase — the bar is supposed to measure what is on
+   * screen, and until now it could not.
+   *
+   * `document.fonts.ready` resolves immediately when the fonts are
+   * already in, so a warm load pays one microtask and
+   * `setVisibleCount` bails on the unchanged answer.
+   */
+  useLayoutEffect(() => {
+    // jsdom has no `document.fonts`, and neither does a very old
+    // browser. Nothing to wait for is not an error.
+    if (!document.fonts) {
+      return
+    }
+
+    let isActive = true
+
+    document.fonts.ready.then(() => {
+      if (isActive) {
+        measure()
+      }
+    })
+
+    return () => {
+      isActive = false
+    }
+  }, [measure])
+
   useLayoutEffect(() => {
     const container = containerRef.current
 

package/src/index.ts

@@ -237,6 +237,19 @@ export {
   INTENT_HOVER_CLASS,
   INTENT_SOLID_FILL_CLASS,
 } from "./intentStyles.ts"
+export type { LaneTimelineProps } from "./LaneTimeline/LaneTimeline.tsx"
+export { LaneTimeline } from "./LaneTimeline/LaneTimeline.tsx"
+export type { TimelineItem } from "./LaneTimeline/LaneTimelineBar.tsx"
+export type { TimelineLane } from "./LaneTimeline/LaneTimelineLane.tsx"
+export type {
+  BarPlacement,
+  TimelineAxis,
+  TimelineSpan,
+} from "./LaneTimeline/laneTimelineGeometry.ts"
+export {
+  toBarPlacement,
+  toTimelineAxis,
+} from "./LaneTimeline/laneTimelineGeometry.ts"
 export type { LightboxProps } from "./Lightbox/Lightbox.tsx"
 export { Lightbox } from "./Lightbox/Lightbox.tsx"
 export type {

package/src/sourceRules.test.ts

@@ -233,6 +233,13 @@ test("a container-query component is never storied in a shrink-to-fit cell", ()
     // owner is in whenever he browses zoomed in.
     "DatePicker",
     "EmptyState",
+    // `LaneTimeline` declares one and **never queries it**, which is
+    // the `Main` case rather than a mistake: it wants the
+    // `contain: inline-size` that rides along, because the component
+    // measures its own box to decide whether to draw a date axis at
+    // all. Without the containment a shrink-wrapping parent makes
+    // that answer its own input.
+    "LaneTimeline",
     "Main",
     "MarkdownEditor",
     "MediaTile",
@@ -591,7 +598,21 @@ test("the barrel is the only place components are re-exported", async () => {
   // from `ActionTiles`' "what do you want to do" and would have
   // meant one component whose icon is sometimes a 20px glyph beside
   // a title and sometimes a 144px circle above it.
-  expect(componentNames.length).toBe(65)
+  //
+  // `LaneTimeline` — one horizontal lane per group across a date
+  // axis, with a multi-day thing drawn as a bar — is +1 -> 66. It is
+  // the first component that folds on a **measurement of its own
+  // box** rather than on a container query, and the reason is in the
+  // arithmetic: the question is not how wide the box is but how wide
+  // one day is, which is the width divided by a number that lives in
+  // the data. `laneTimelineGeometry.ts`, `LaneTimelineBar.tsx`,
+  // `LaneTimelineLane.tsx` and `useTrackMeasurements.ts` are its
+  // members and stay out of this count by the `<Name>/<Name>.tsx`
+  // rule. The geometry module is still exported from the barrel — a
+  // consumer deciding whether an item is on screen must ask the
+  // question the same way the bars are placed, or the two answers
+  // drift by a day and nothing says so.
+  expect(componentNames.length).toBe(66)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)