@flanksource/clicky-ui 0.3.54 → 0.3.56

package/dist/layout/Workspace.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Workspace.cjs","names":["UiSidebar","useState","readWorkspaceLayoutState","createWorkspaceLayoutState","useRef","useMemo","useCallback","cn","WorkspaceSideRegion","WorkspaceSingleRegion"],"sources":["../../src/layout/Workspace.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { UiSidebar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  createWorkspaceLayoutState,\n  readWorkspaceLayoutState,\n  validateWorkspacePanes,\n  writeWorkspaceLayoutState,\n  type WorkspaceLayoutDefaults,\n  type WorkspaceLayoutState,\n  type WorkspacePaneSpec,\n  type WorkspaceSideLocation,\n} from \"./Workspace.model\";\nimport {\n  WorkspaceSideRegion,\n  WorkspaceSingleRegion,\n  type WorkspaceUpdate,\n} from \"./Workspace.regions\";\n\nexport type {\n  WorkspaceLayoutDefaults,\n  WorkspaceLayoutState,\n  WorkspacePaneLocation,\n  WorkspacePaneSlots,\n  WorkspacePaneSpec,\n  WorkspaceSideLocation,\n} from \"./Workspace.model\";\n\nexport type WorkspaceSlots = {\n  topRightActions?: ReactNode;\n};\n\nexport type WorkspaceProps = {\n  panes: WorkspacePaneSpec[];\n  value?: WorkspaceLayoutState;\n  defaultValue?: WorkspaceLayoutDefaults;\n  onValueChange?: (value: WorkspaceLayoutState) => void;\n  storageKey?: string;\n  slots?: WorkspaceSlots;\n  /**\n   * Sides the host holds collapsed for now, such as while the center shows something that needs the\n   * full width: they render collapsed and lose their toggle, and the layout state keeps how they were.\n   */\n  collapsedSides?: WorkspaceSideLocation[];\n  className?: string;\n};\n\ntype WorkspaceTopRightProps = {\n  hasLeft: boolean;\n  hasRight: boolean;\n  slots?: WorkspaceSlots;\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nfunction WorkspaceTopRight({\n  hasLeft,\n  hasRight,\n  slots,\n  state,\n  update,\n}: WorkspaceTopRightProps) {\n  if (!hasLeft && !hasRight && !slots?.topRightActions) return null;\n  const toggleSide = (location: \"left\" | \"right\") =>\n    update((current) => ({\n      ...current,\n      sideCollapsed: {\n        ...current.sideCollapsed,\n        [location]: !current.sideCollapsed[location],\n      },\n    }));\n  return (\n    <div\n      data-testid=\"workspace-top-right\"\n      className=\"absolute right-1 top-1 z-30 flex h-7 items-center gap-1 rounded bg-muted/90 px-1 shadow-sm backdrop-blur\"\n    >\n      {slots?.topRightActions}\n      {hasLeft && (\n        <button\n          type=\"button\"\n          className=\"inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          aria-expanded={!state.sideCollapsed.left}\n          aria-label={`${state.sideCollapsed.left ? \"Expand\" : \"Collapse\"} left side`}\n          onClick={() => toggleSide(\"left\")}\n        >\n          <UiSidebar className=\"size-4\" />\n        </button>\n      )}\n      {hasRight && (\n        <button\n          type=\"button\"\n          className=\"inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          aria-expanded={!state.sideCollapsed.right}\n          aria-label={`${state.sideCollapsed.right ? \"Expand\" : \"Collapse\"} right side`}\n          onClick={() => toggleSide(\"right\")}\n        >\n          <UiSidebar className=\"size-4 -scale-x-100\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function Workspace({\n  panes,\n  value,\n  defaultValue = {},\n  onValueChange,\n  storageKey,\n  slots,\n  collapsedSides,\n  className,\n}: WorkspaceProps) {\n  validateWorkspacePanes(panes);\n  if (value !== undefined && storageKey !== undefined) {\n    throw new Error(\"Workspace cannot combine value with storageKey\");\n  }\n  const [internal, setInternal] = useState(() =>\n    storageKey\n      ? readWorkspaceLayoutState(storageKey, panes, defaultValue)\n      : createWorkspaceLayoutState(panes, defaultValue),\n  );\n  const seenLocations = useRef(new Set(panes.map((pane) => pane.location)));\n  const seenPaneIds = useRef(new Set(panes.map((pane) => pane.id)));\n  const state = value ?? internal;\n  const groups = useMemo(\n    () => ({\n      left: panes.filter((pane) => pane.location === \"left\"),\n      center: panes.find(\n        (pane) => pane.location === \"center\",\n      ) as WorkspacePaneSpec,\n      right: panes.filter((pane) => pane.location === \"right\"),\n      bottom: panes.find((pane) => pane.location === \"bottom\"),\n    }),\n    [panes],\n  );\n\n  useLayoutEffect(() => {\n    const addedLocations = new Set(\n      panes\n        .map((pane) => pane.location)\n        .filter((location) => !seenLocations.current.has(location)),\n    );\n    const addedPanes = panes.filter(\n      (pane) => !seenPaneIds.current.has(pane.id),\n    );\n    panes.forEach((pane) => {\n      seenLocations.current.add(pane.location);\n      seenPaneIds.current.add(pane.id);\n    });\n    if (\n      value !== undefined ||\n      (addedLocations.size === 0 && addedPanes.length === 0)\n    )\n      return;\n    const defaults = createWorkspaceLayoutState(panes, defaultValue);\n    const addedStackHeights = addedPanes.reduce<Record<string, number>>(\n      (heights, pane) => {\n        if (pane.height !== undefined) heights[pane.id] = pane.height;\n        return heights;\n      },\n      {},\n    );\n    setInternal((current) => ({\n      ...current,\n      ...(addedLocations.has(\"left\") ? { leftWidth: defaults.leftWidth } : {}),\n      ...(addedLocations.has(\"right\")\n        ? { rightWidth: defaults.rightWidth }\n        : {}),\n      ...(addedLocations.has(\"bottom\")\n        ? { bottomHeight: defaults.bottomHeight }\n        : {}),\n      stackHeights: { ...current.stackHeights, ...addedStackHeights },\n      collapsed: {\n        ...current.collapsed,\n        ...Object.fromEntries(\n          addedPanes.map((pane) => [pane.id, pane.defaultCollapsed ?? false]),\n        ),\n      },\n    }));\n  }, [defaultValue, panes, value]);\n\n  const update = useCallback<WorkspaceUpdate>(\n    (change) => {\n      const next = change(state);\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, state, value],\n  );\n\n  useEffect(() => {\n    if (storageKey && value === undefined)\n      writeWorkspaceLayoutState(storageKey, internal);\n  }, [internal, storageKey, value]);\n\n  const held = (location: WorkspaceSideLocation) =>\n    collapsedSides?.includes(location) ?? false;\n  const shown: WorkspaceLayoutState = collapsedSides?.length\n    ? {\n        ...state,\n        sideCollapsed: {\n          left: held(\"left\") || state.sideCollapsed.left,\n          right: held(\"right\") || state.sideCollapsed.right,\n        },\n      }\n    : state;\n\n  return (\n    <div\n      className={cn(\n        \"relative grid min-h-0 w-full grid-cols-1 overflow-auto bg-background md:h-full md:grid-cols-[auto_minmax(0,1fr)_auto] md:grid-rows-[minmax(0,1fr)_auto] md:overflow-hidden\",\n        className,\n      )}\n    >\n      <WorkspaceTopRight\n        hasLeft={groups.left.length > 0 && !held(\"left\")}\n        hasRight={groups.right.length > 0 && !held(\"right\")}\n        {...(slots ? { slots } : {})}\n        state={state}\n        update={update}\n      />\n      <WorkspaceSideRegion\n        location=\"left\"\n        panes={groups.left}\n        state={shown}\n        update={update}\n      />\n      <WorkspaceSingleRegion\n        pane={groups.center}\n        state={state}\n        update={update}\n      />\n      <WorkspaceSideRegion\n        location=\"right\"\n        panes={groups.right}\n        state={shown}\n        update={update}\n      />\n      {groups.bottom && (\n        <WorkspaceSingleRegion\n          pane={groups.bottom}\n          state={state}\n          update={update}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA+DA,SAAS,kBAAkB,EACzB,SACA,UACA,OACA,OACA,UACyB;CACzB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,iBAAiB,OAAO;CAC7D,MAAM,cAAc,aAClB,QAAQ,aAAa;EACnB,GAAG;EACH,eAAe;GACb,GAAG,QAAQ;IACV,WAAW,CAAC,QAAQ,cAAc;EACrC;CACF,EAAE;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,eAAY;EACZ,WAAU;EAFZ,UAAA;GAIG,OAAO;GACP,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,iBAAe,CAAC,MAAM,cAAc;IACpC,cAAY,GAAG,MAAM,cAAc,OAAO,WAAW,WAAW;IAChE,eAAe,WAAW,MAAM;IAEhC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,WAAD,EAAW,WAAU,SAAU,CAAA;GACzB,CAAA;GAET,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,iBAAe,CAAC,MAAM,cAAc;IACpC,cAAY,GAAG,MAAM,cAAc,QAAQ,WAAW,WAAW;IACjE,eAAe,WAAW,OAAO;IAEjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,WAAD,EAAW,WAAU,sBAAuB,CAAA;GACtC,CAAA;EAEP;;AAET;AAEA,SAAgB,UAAU,EACxB,OACA,OACA,eAAe,CAAC,GAChB,eACA,YACA,OACA,gBACA,aACiB;CACjB,wBAAA,uBAAuB,KAAK;CAC5B,IAAI,UAAU,KAAA,KAAa,eAAe,KAAA,GACxC,MAAM,IAAI,MAAM,gDAAgD;CAElE,MAAM,CAAC,UAAU,gBAAA,GAAeC,MAAAA,SAAAA,OAC9B,aACIC,wBAAAA,yBAAyB,YAAY,OAAO,YAAY,IACxDC,wBAAAA,2BAA2B,OAAO,YAAY,CACpD;CACA,MAAM,iBAAA,GAAgBC,MAAAA,OAAAA,CAAO,IAAI,IAAI,MAAM,KAAK,SAAS,KAAK,QAAQ,CAAC,CAAC;CACxE,MAAM,eAAA,GAAcA,MAAAA,OAAAA,CAAO,IAAI,IAAI,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC,CAAC;CAChE,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAA,GAASC,MAAAA,QAAAA,QACN;EACL,MAAM,MAAM,QAAQ,SAAS,KAAK,aAAa,MAAM;EACrD,QAAQ,MAAM,MACX,SAAS,KAAK,aAAa,QAC9B;EACA,OAAO,MAAM,QAAQ,SAAS,KAAK,aAAa,OAAO;EACvD,QAAQ,MAAM,MAAM,SAAS,KAAK,aAAa,QAAQ;CACzD,IACA,CAAC,KAAK,CACR;CAEA,CAAA,GAAA,MAAA,gBAAA,OAAsB;EACpB,MAAM,iBAAiB,IAAI,IACzB,MACG,KAAK,SAAS,KAAK,QAAQ,CAAC,CAC5B,QAAQ,aAAa,CAAC,cAAc,QAAQ,IAAI,QAAQ,CAAC,CAC9D;EACA,MAAM,aAAa,MAAM,QACtB,SAAS,CAAC,YAAY,QAAQ,IAAI,KAAK,EAAE,CAC5C;EACA,MAAM,SAAS,SAAS;GACtB,cAAc,QAAQ,IAAI,KAAK,QAAQ;GACvC,YAAY,QAAQ,IAAI,KAAK,EAAE;EACjC,CAAC;EACD,IACE,UAAU,KAAA,KACT,eAAe,SAAS,KAAK,WAAW,WAAW,GAEpD;EACF,MAAM,WAAWF,wBAAAA,2BAA2B,OAAO,YAAY;EAC/D,MAAM,oBAAoB,WAAW,QAClC,SAAS,SAAS;GACjB,IAAI,KAAK,WAAW,KAAA,GAAW,QAAQ,KAAK,MAAM,KAAK;GACvD,OAAO;EACT,GACA,CAAC,CACH;EACA,aAAa,aAAa;GACxB,GAAG;GACH,GAAI,eAAe,IAAI,MAAM,IAAI,EAAE,WAAW,SAAS,UAAU,IAAI,CAAC;GACtE,GAAI,eAAe,IAAI,OAAO,IAC1B,EAAE,YAAY,SAAS,WAAW,IAClC,CAAC;GACL,GAAI,eAAe,IAAI,QAAQ,IAC3B,EAAE,cAAc,SAAS,aAAa,IACtC,CAAC;GACL,cAAc;IAAE,GAAG,QAAQ;IAAc,GAAG;GAAkB;GAC9D,WAAW;IACT,GAAG,QAAQ;IACX,GAAG,OAAO,YACR,WAAW,KAAK,SAAS,CAAC,KAAK,IAAI,KAAK,oBAAoB,KAAK,CAAC,CACpE;GACF;EACF,EAAE;CACJ,GAAG;EAAC;EAAc;EAAO;CAAK,CAAC;CAE/B,MAAM,UAAA,GAASG,MAAAA,YAAAA,EACZ,WAAW;EACV,MAAM,OAAO,OAAO,KAAK;EACzB,IAAI,UAAU,KAAA,GAAW,YAAY,IAAI;EACzC,gBAAgB,IAAI;CACtB,GACA;EAAC;EAAe;EAAO;CAAK,CAC9B;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,cAAc,UAAU,KAAA,GAC1B,wBAAA,0BAA0B,YAAY,QAAQ;CAClD,GAAG;EAAC;EAAU;EAAY;CAAK,CAAC;CAEhC,MAAM,QAAQ,aACZ,gBAAgB,SAAS,QAAQ,KAAK;CACxC,MAAM,QAA8B,gBAAgB,SAChD;EACE,GAAG;EACH,eAAe;GACb,MAAM,KAAK,MAAM,KAAK,MAAM,cAAc;GAC1C,OAAO,KAAK,OAAO,KAAK,MAAM,cAAc;EAC9C;CACF,IACA;CAEJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,WAAWC,cAAAA,GACT,8KACA,SACF;EAJF,UAAA;GAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IACE,SAAS,OAAO,KAAK,SAAS,KAAK,CAAC,KAAK,MAAM;IAC/C,UAAU,OAAO,MAAM,SAAS,KAAK,CAAC,KAAK,OAAO;IAClD,GAAK,QAAQ,EAAE,MAAM,IAAI,CAAC;IACnB;IACC;GACT,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,qBAAD;IACE,UAAS;IACT,OAAO,OAAO;IACd,OAAO;IACC;GACT,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,uBAAD;IACE,MAAM,OAAO;IACN;IACC;GACT,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAACD,0BAAAA,qBAAD;IACE,UAAS;IACT,OAAO,OAAO;IACd,OAAO;IACC;GACT,CAAA;GACA,OAAO,UACN,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,uBAAD;IACE,MAAM,OAAO;IACN;IACC;GACT,CAAA;EAEA;;AAET"}
+{"version":3,"file":"Workspace.cjs","names":["UiSidebar","useState","readWorkspaceLayoutState","createWorkspaceLayoutState","useRef","useMemo","useCallback","cn","WorkspaceSideRegion","WorkspaceSingleRegion"],"sources":["../../src/layout/Workspace.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { UiSidebar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  createWorkspaceLayoutState,\n  readWorkspaceLayoutState,\n  validateWorkspacePanes,\n  writeWorkspaceLayoutState,\n  type WorkspaceLayoutDefaults,\n  type WorkspaceLayoutState,\n  type WorkspacePaneSpec,\n  type WorkspaceSideLocation,\n} from \"./Workspace.model\";\nimport {\n  WorkspaceSideRegion,\n  WorkspaceSingleRegion,\n  type WorkspaceUpdate,\n} from \"./Workspace.regions\";\n\nexport type {\n  WorkspaceLayoutDefaults,\n  WorkspaceLayoutState,\n  WorkspacePaneLocation,\n  WorkspacePaneSlots,\n  WorkspacePaneSpec,\n  WorkspaceSideLocation,\n} from \"./Workspace.model\";\n\nexport type WorkspaceSlots = {\n  topRightActions?: ReactNode;\n};\n\nexport type WorkspaceProps = {\n  panes: WorkspacePaneSpec[];\n  value?: WorkspaceLayoutState;\n  defaultValue?: WorkspaceLayoutDefaults;\n  onValueChange?: (value: WorkspaceLayoutState) => void;\n  storageKey?: string;\n  slots?: WorkspaceSlots;\n  /**\n   * Sides the host holds collapsed for now, such as while the center shows something that needs the\n   * full width: they render collapsed and lose their toggle, and the layout state keeps how they were.\n   */\n  collapsedSides?: WorkspaceSideLocation[];\n  className?: string;\n};\n\ntype WorkspaceTopRightProps = {\n  hasLeft: boolean;\n  hasRight: boolean;\n  slots?: WorkspaceSlots;\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nfunction WorkspaceTopRight({\n  hasLeft,\n  hasRight,\n  slots,\n  state,\n  update,\n}: WorkspaceTopRightProps) {\n  if (!hasLeft && !hasRight && !slots?.topRightActions) return null;\n  const toggleSide = (location: \"left\" | \"right\") =>\n    update((current) => ({\n      ...current,\n      sideCollapsed: {\n        ...current.sideCollapsed,\n        [location]: !current.sideCollapsed[location],\n      },\n    }));\n  return (\n    <div\n      data-testid=\"workspace-top-right\"\n      className=\"absolute right-1 top-1 z-30 flex h-7 items-center gap-1 rounded bg-muted/90 px-1 shadow-sm backdrop-blur\"\n    >\n      {slots?.topRightActions}\n      {hasLeft && (\n        <button\n          type=\"button\"\n          className=\"inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          aria-expanded={!state.sideCollapsed.left}\n          aria-label={`${state.sideCollapsed.left ? \"Expand\" : \"Collapse\"} left side`}\n          onClick={() => toggleSide(\"left\")}\n        >\n          <UiSidebar className=\"size-4\" />\n        </button>\n      )}\n      {hasRight && (\n        <button\n          type=\"button\"\n          className=\"inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          aria-expanded={!state.sideCollapsed.right}\n          aria-label={`${state.sideCollapsed.right ? \"Expand\" : \"Collapse\"} right side`}\n          onClick={() => toggleSide(\"right\")}\n        >\n          <UiSidebar className=\"size-4 -scale-x-100\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function Workspace({\n  panes,\n  value,\n  defaultValue = {},\n  onValueChange,\n  storageKey,\n  slots,\n  collapsedSides,\n  className,\n}: WorkspaceProps) {\n  validateWorkspacePanes(panes);\n  if (value !== undefined && storageKey !== undefined) {\n    throw new Error(\"Workspace cannot combine value with storageKey\");\n  }\n  const [internal, setInternal] = useState(() =>\n    storageKey\n      ? readWorkspaceLayoutState(storageKey, panes, defaultValue)\n      : createWorkspaceLayoutState(panes, defaultValue),\n  );\n  const seenLocations = useRef(new Set(panes.map((pane) => pane.location)));\n  const seenPaneIds = useRef(new Set(panes.map((pane) => pane.id)));\n  const state = value ?? internal;\n  const groups = useMemo(\n    () => ({\n      left: panes.filter((pane) => pane.location === \"left\"),\n      center: panes.find(\n        (pane) => pane.location === \"center\",\n      ) as WorkspacePaneSpec,\n      right: panes.filter((pane) => pane.location === \"right\"),\n      bottom: panes.find((pane) => pane.location === \"bottom\"),\n    }),\n    [panes],\n  );\n\n  useLayoutEffect(() => {\n    const addedLocations = new Set(\n      panes\n        .map((pane) => pane.location)\n        .filter((location) => !seenLocations.current.has(location)),\n    );\n    const addedPanes = panes.filter(\n      (pane) => !seenPaneIds.current.has(pane.id),\n    );\n    panes.forEach((pane) => {\n      seenLocations.current.add(pane.location);\n      seenPaneIds.current.add(pane.id);\n    });\n    if (\n      value !== undefined ||\n      (addedLocations.size === 0 && addedPanes.length === 0)\n    )\n      return;\n    const defaults = createWorkspaceLayoutState(panes, defaultValue);\n    const addedStackHeights = addedPanes.reduce<Record<string, number>>(\n      (heights, pane) => {\n        if (pane.height !== undefined) heights[pane.id] = pane.height;\n        return heights;\n      },\n      {},\n    );\n    setInternal((current) => ({\n      ...current,\n      ...(addedLocations.has(\"left\") ? { leftWidth: defaults.leftWidth } : {}),\n      ...(addedLocations.has(\"right\")\n        ? { rightWidth: defaults.rightWidth }\n        : {}),\n      ...(addedLocations.has(\"bottom\")\n        ? { bottomHeight: defaults.bottomHeight }\n        : {}),\n      stackHeights: { ...current.stackHeights, ...addedStackHeights },\n      collapsed: {\n        ...current.collapsed,\n        ...Object.fromEntries(\n          addedPanes.map((pane) => [pane.id, pane.defaultCollapsed ?? false]),\n        ),\n      },\n    }));\n  }, [defaultValue, panes, value]);\n\n  const update = useCallback<WorkspaceUpdate>(\n    (change) => {\n      const next = change(state);\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, state, value],\n  );\n\n  useEffect(() => {\n    if (storageKey && value === undefined)\n      writeWorkspaceLayoutState(storageKey, internal);\n  }, [internal, storageKey, value]);\n\n  const held = (location: WorkspaceSideLocation) =>\n    collapsedSides?.includes(location) ?? false;\n  const shown: WorkspaceLayoutState = collapsedSides?.length\n    ? {\n        ...state,\n        sideCollapsed: {\n          left: held(\"left\") || state.sideCollapsed.left,\n          right: held(\"right\") || state.sideCollapsed.right,\n        },\n      }\n    : state;\n\n  // The regions switch between stacked and side-by-side on the workspace's own\n  // width (a container query), so a workspace embedded in a narrow column\n  // stacks even on a wide screen. A container cannot query itself, hence the\n  // outer box; caller classes size it.\n  return (\n    <div\n      data-slot=\"workspace\"\n      className={cn(\"@container/workspace h-full min-h-0 w-full\", className)}\n    >\n      <div\n        className=\"relative grid h-full min-h-0 w-full grid-cols-1 content-start overflow-auto bg-background @3xl/workspace:grid-cols-[auto_minmax(0,1fr)_auto] @3xl/workspace:grid-rows-[minmax(0,1fr)_auto] @3xl/workspace:content-stretch @3xl/workspace:overflow-hidden\"\n      >\n        <WorkspaceTopRight\n          hasLeft={groups.left.length > 0 && !held(\"left\")}\n          hasRight={groups.right.length > 0 && !held(\"right\")}\n          {...(slots ? { slots } : {})}\n          state={state}\n          update={update}\n        />\n        <WorkspaceSideRegion\n          location=\"left\"\n          panes={groups.left}\n          state={shown}\n          update={update}\n        />\n        <WorkspaceSingleRegion\n          pane={groups.center}\n          state={state}\n          update={update}\n        />\n        <WorkspaceSideRegion\n          location=\"right\"\n          panes={groups.right}\n          state={shown}\n          update={update}\n        />\n        {groups.bottom && (\n          <WorkspaceSingleRegion\n            pane={groups.bottom}\n            state={state}\n            update={update}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/layout/Workspace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Workspace.d.ts","sourceRoot":"","sources":["../../src/layout/Workspace.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAO3B,YAAY,EACV,uBAAuB,EACvB,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,cAAc,GAAG;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0DF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,UAAU,EACV,KAAK,EACL,cAAc,EACd,SAAS,GACV,EAAE,cAAc,+BAwIhB"}
+{"version":3,"file":"Workspace.d.ts","sourceRoot":"","sources":["../../src/layout/Workspace.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAO3B,YAAY,EACV,uBAAuB,EACvB,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,cAAc,GAAG;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0DF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,UAAU,EACV,KAAK,EACL,cAAc,EACd,SAAS,GACV,EAAE,cAAc,+BA8IhB"}

package/dist/layout/Workspace.js

@@ -107,39 +107,43 @@ function Workspace({ panes, value, defaultValue = {}, onValueChange, storageKey,
 			right: held("right") || state.sideCollapsed.right
 		}
 	} : state;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative grid min-h-0 w-full grid-cols-1 overflow-auto bg-background md:h-full md:grid-cols-[auto_minmax(0,1fr)_auto] md:grid-rows-[minmax(0,1fr)_auto] md:overflow-hidden", className),
-		children: [
-			/* @__PURE__ */ jsx(WorkspaceTopRight, {
-				hasLeft: groups.left.length > 0 && !held("left"),
-				hasRight: groups.right.length > 0 && !held("right"),
-				...slots ? { slots } : {},
-				state,
-				update
-			}),
-			/* @__PURE__ */ jsx(WorkspaceSideRegion, {
-				location: "left",
-				panes: groups.left,
-				state: shown,
-				update
-			}),
-			/* @__PURE__ */ jsx(WorkspaceSingleRegion, {
-				pane: groups.center,
-				state,
-				update
-			}),
-			/* @__PURE__ */ jsx(WorkspaceSideRegion, {
-				location: "right",
-				panes: groups.right,
-				state: shown,
-				update
-			}),
-			groups.bottom && /* @__PURE__ */ jsx(WorkspaceSingleRegion, {
-				pane: groups.bottom,
-				state,
-				update
-			})
-		]
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "workspace",
+		className: cn("@container/workspace h-full min-h-0 w-full", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative grid h-full min-h-0 w-full grid-cols-1 content-start overflow-auto bg-background @3xl/workspace:grid-cols-[auto_minmax(0,1fr)_auto] @3xl/workspace:grid-rows-[minmax(0,1fr)_auto] @3xl/workspace:content-stretch @3xl/workspace:overflow-hidden",
+			children: [
+				/* @__PURE__ */ jsx(WorkspaceTopRight, {
+					hasLeft: groups.left.length > 0 && !held("left"),
+					hasRight: groups.right.length > 0 && !held("right"),
+					...slots ? { slots } : {},
+					state,
+					update
+				}),
+				/* @__PURE__ */ jsx(WorkspaceSideRegion, {
+					location: "left",
+					panes: groups.left,
+					state: shown,
+					update
+				}),
+				/* @__PURE__ */ jsx(WorkspaceSingleRegion, {
+					pane: groups.center,
+					state,
+					update
+				}),
+				/* @__PURE__ */ jsx(WorkspaceSideRegion, {
+					location: "right",
+					panes: groups.right,
+					state: shown,
+					update
+				}),
+				groups.bottom && /* @__PURE__ */ jsx(WorkspaceSingleRegion, {
+					pane: groups.bottom,
+					state,
+					update
+				})
+			]
+		})
 	});
 }
 export { Workspace };

package/dist/layout/Workspace.js.map

@@ -1 +1 @@
-{"version":3,"file":"Workspace.js","names":[],"sources":["../../src/layout/Workspace.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { UiSidebar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  createWorkspaceLayoutState,\n  readWorkspaceLayoutState,\n  validateWorkspacePanes,\n  writeWorkspaceLayoutState,\n  type WorkspaceLayoutDefaults,\n  type WorkspaceLayoutState,\n  type WorkspacePaneSpec,\n  type WorkspaceSideLocation,\n} from \"./Workspace.model\";\nimport {\n  WorkspaceSideRegion,\n  WorkspaceSingleRegion,\n  type WorkspaceUpdate,\n} from \"./Workspace.regions\";\n\nexport type {\n  WorkspaceLayoutDefaults,\n  WorkspaceLayoutState,\n  WorkspacePaneLocation,\n  WorkspacePaneSlots,\n  WorkspacePaneSpec,\n  WorkspaceSideLocation,\n} from \"./Workspace.model\";\n\nexport type WorkspaceSlots = {\n  topRightActions?: ReactNode;\n};\n\nexport type WorkspaceProps = {\n  panes: WorkspacePaneSpec[];\n  value?: WorkspaceLayoutState;\n  defaultValue?: WorkspaceLayoutDefaults;\n  onValueChange?: (value: WorkspaceLayoutState) => void;\n  storageKey?: string;\n  slots?: WorkspaceSlots;\n  /**\n   * Sides the host holds collapsed for now, such as while the center shows something that needs the\n   * full width: they render collapsed and lose their toggle, and the layout state keeps how they were.\n   */\n  collapsedSides?: WorkspaceSideLocation[];\n  className?: string;\n};\n\ntype WorkspaceTopRightProps = {\n  hasLeft: boolean;\n  hasRight: boolean;\n  slots?: WorkspaceSlots;\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nfunction WorkspaceTopRight({\n  hasLeft,\n  hasRight,\n  slots,\n  state,\n  update,\n}: WorkspaceTopRightProps) {\n  if (!hasLeft && !hasRight && !slots?.topRightActions) return null;\n  const toggleSide = (location: \"left\" | \"right\") =>\n    update((current) => ({\n      ...current,\n      sideCollapsed: {\n        ...current.sideCollapsed,\n        [location]: !current.sideCollapsed[location],\n      },\n    }));\n  return (\n    <div\n      data-testid=\"workspace-top-right\"\n      className=\"absolute right-1 top-1 z-30 flex h-7 items-center gap-1 rounded bg-muted/90 px-1 shadow-sm backdrop-blur\"\n    >\n      {slots?.topRightActions}\n      {hasLeft && (\n        <button\n          type=\"button\"\n          className=\"inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          aria-expanded={!state.sideCollapsed.left}\n          aria-label={`${state.sideCollapsed.left ? \"Expand\" : \"Collapse\"} left side`}\n          onClick={() => toggleSide(\"left\")}\n        >\n          <UiSidebar className=\"size-4\" />\n        </button>\n      )}\n      {hasRight && (\n        <button\n          type=\"button\"\n          className=\"inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          aria-expanded={!state.sideCollapsed.right}\n          aria-label={`${state.sideCollapsed.right ? \"Expand\" : \"Collapse\"} right side`}\n          onClick={() => toggleSide(\"right\")}\n        >\n          <UiSidebar className=\"size-4 -scale-x-100\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function Workspace({\n  panes,\n  value,\n  defaultValue = {},\n  onValueChange,\n  storageKey,\n  slots,\n  collapsedSides,\n  className,\n}: WorkspaceProps) {\n  validateWorkspacePanes(panes);\n  if (value !== undefined && storageKey !== undefined) {\n    throw new Error(\"Workspace cannot combine value with storageKey\");\n  }\n  const [internal, setInternal] = useState(() =>\n    storageKey\n      ? readWorkspaceLayoutState(storageKey, panes, defaultValue)\n      : createWorkspaceLayoutState(panes, defaultValue),\n  );\n  const seenLocations = useRef(new Set(panes.map((pane) => pane.location)));\n  const seenPaneIds = useRef(new Set(panes.map((pane) => pane.id)));\n  const state = value ?? internal;\n  const groups = useMemo(\n    () => ({\n      left: panes.filter((pane) => pane.location === \"left\"),\n      center: panes.find(\n        (pane) => pane.location === \"center\",\n      ) as WorkspacePaneSpec,\n      right: panes.filter((pane) => pane.location === \"right\"),\n      bottom: panes.find((pane) => pane.location === \"bottom\"),\n    }),\n    [panes],\n  );\n\n  useLayoutEffect(() => {\n    const addedLocations = new Set(\n      panes\n        .map((pane) => pane.location)\n        .filter((location) => !seenLocations.current.has(location)),\n    );\n    const addedPanes = panes.filter(\n      (pane) => !seenPaneIds.current.has(pane.id),\n    );\n    panes.forEach((pane) => {\n      seenLocations.current.add(pane.location);\n      seenPaneIds.current.add(pane.id);\n    });\n    if (\n      value !== undefined ||\n      (addedLocations.size === 0 && addedPanes.length === 0)\n    )\n      return;\n    const defaults = createWorkspaceLayoutState(panes, defaultValue);\n    const addedStackHeights = addedPanes.reduce<Record<string, number>>(\n      (heights, pane) => {\n        if (pane.height !== undefined) heights[pane.id] = pane.height;\n        return heights;\n      },\n      {},\n    );\n    setInternal((current) => ({\n      ...current,\n      ...(addedLocations.has(\"left\") ? { leftWidth: defaults.leftWidth } : {}),\n      ...(addedLocations.has(\"right\")\n        ? { rightWidth: defaults.rightWidth }\n        : {}),\n      ...(addedLocations.has(\"bottom\")\n        ? { bottomHeight: defaults.bottomHeight }\n        : {}),\n      stackHeights: { ...current.stackHeights, ...addedStackHeights },\n      collapsed: {\n        ...current.collapsed,\n        ...Object.fromEntries(\n          addedPanes.map((pane) => [pane.id, pane.defaultCollapsed ?? false]),\n        ),\n      },\n    }));\n  }, [defaultValue, panes, value]);\n\n  const update = useCallback<WorkspaceUpdate>(\n    (change) => {\n      const next = change(state);\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, state, value],\n  );\n\n  useEffect(() => {\n    if (storageKey && value === undefined)\n      writeWorkspaceLayoutState(storageKey, internal);\n  }, [internal, storageKey, value]);\n\n  const held = (location: WorkspaceSideLocation) =>\n    collapsedSides?.includes(location) ?? false;\n  const shown: WorkspaceLayoutState = collapsedSides?.length\n    ? {\n        ...state,\n        sideCollapsed: {\n          left: held(\"left\") || state.sideCollapsed.left,\n          right: held(\"right\") || state.sideCollapsed.right,\n        },\n      }\n    : state;\n\n  return (\n    <div\n      className={cn(\n        \"relative grid min-h-0 w-full grid-cols-1 overflow-auto bg-background md:h-full md:grid-cols-[auto_minmax(0,1fr)_auto] md:grid-rows-[minmax(0,1fr)_auto] md:overflow-hidden\",\n        className,\n      )}\n    >\n      <WorkspaceTopRight\n        hasLeft={groups.left.length > 0 && !held(\"left\")}\n        hasRight={groups.right.length > 0 && !held(\"right\")}\n        {...(slots ? { slots } : {})}\n        state={state}\n        update={update}\n      />\n      <WorkspaceSideRegion\n        location=\"left\"\n        panes={groups.left}\n        state={shown}\n        update={update}\n      />\n      <WorkspaceSingleRegion\n        pane={groups.center}\n        state={state}\n        update={update}\n      />\n      <WorkspaceSideRegion\n        location=\"right\"\n        panes={groups.right}\n        state={shown}\n        update={update}\n      />\n      {groups.bottom && (\n        <WorkspaceSingleRegion\n          pane={groups.bottom}\n          state={state}\n          update={update}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Workspace.js","names":[],"sources":["../../src/layout/Workspace.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { UiSidebar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  createWorkspaceLayoutState,\n  readWorkspaceLayoutState,\n  validateWorkspacePanes,\n  writeWorkspaceLayoutState,\n  type WorkspaceLayoutDefaults,\n  type WorkspaceLayoutState,\n  type WorkspacePaneSpec,\n  type WorkspaceSideLocation,\n} from \"./Workspace.model\";\nimport {\n  WorkspaceSideRegion,\n  WorkspaceSingleRegion,\n  type WorkspaceUpdate,\n} from \"./Workspace.regions\";\n\nexport type {\n  WorkspaceLayoutDefaults,\n  WorkspaceLayoutState,\n  WorkspacePaneLocation,\n  WorkspacePaneSlots,\n  WorkspacePaneSpec,\n  WorkspaceSideLocation,\n} from \"./Workspace.model\";\n\nexport type WorkspaceSlots = {\n  topRightActions?: ReactNode;\n};\n\nexport type WorkspaceProps = {\n  panes: WorkspacePaneSpec[];\n  value?: WorkspaceLayoutState;\n  defaultValue?: WorkspaceLayoutDefaults;\n  onValueChange?: (value: WorkspaceLayoutState) => void;\n  storageKey?: string;\n  slots?: WorkspaceSlots;\n  /**\n   * Sides the host holds collapsed for now, such as while the center shows something that needs the\n   * full width: they render collapsed and lose their toggle, and the layout state keeps how they were.\n   */\n  collapsedSides?: WorkspaceSideLocation[];\n  className?: string;\n};\n\ntype WorkspaceTopRightProps = {\n  hasLeft: boolean;\n  hasRight: boolean;\n  slots?: WorkspaceSlots;\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nfunction WorkspaceTopRight({\n  hasLeft,\n  hasRight,\n  slots,\n  state,\n  update,\n}: WorkspaceTopRightProps) {\n  if (!hasLeft && !hasRight && !slots?.topRightActions) return null;\n  const toggleSide = (location: \"left\" | \"right\") =>\n    update((current) => ({\n      ...current,\n      sideCollapsed: {\n        ...current.sideCollapsed,\n        [location]: !current.sideCollapsed[location],\n      },\n    }));\n  return (\n    <div\n      data-testid=\"workspace-top-right\"\n      className=\"absolute right-1 top-1 z-30 flex h-7 items-center gap-1 rounded bg-muted/90 px-1 shadow-sm backdrop-blur\"\n    >\n      {slots?.topRightActions}\n      {hasLeft && (\n        <button\n          type=\"button\"\n          className=\"inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          aria-expanded={!state.sideCollapsed.left}\n          aria-label={`${state.sideCollapsed.left ? \"Expand\" : \"Collapse\"} left side`}\n          onClick={() => toggleSide(\"left\")}\n        >\n          <UiSidebar className=\"size-4\" />\n        </button>\n      )}\n      {hasRight && (\n        <button\n          type=\"button\"\n          className=\"inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          aria-expanded={!state.sideCollapsed.right}\n          aria-label={`${state.sideCollapsed.right ? \"Expand\" : \"Collapse\"} right side`}\n          onClick={() => toggleSide(\"right\")}\n        >\n          <UiSidebar className=\"size-4 -scale-x-100\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function Workspace({\n  panes,\n  value,\n  defaultValue = {},\n  onValueChange,\n  storageKey,\n  slots,\n  collapsedSides,\n  className,\n}: WorkspaceProps) {\n  validateWorkspacePanes(panes);\n  if (value !== undefined && storageKey !== undefined) {\n    throw new Error(\"Workspace cannot combine value with storageKey\");\n  }\n  const [internal, setInternal] = useState(() =>\n    storageKey\n      ? readWorkspaceLayoutState(storageKey, panes, defaultValue)\n      : createWorkspaceLayoutState(panes, defaultValue),\n  );\n  const seenLocations = useRef(new Set(panes.map((pane) => pane.location)));\n  const seenPaneIds = useRef(new Set(panes.map((pane) => pane.id)));\n  const state = value ?? internal;\n  const groups = useMemo(\n    () => ({\n      left: panes.filter((pane) => pane.location === \"left\"),\n      center: panes.find(\n        (pane) => pane.location === \"center\",\n      ) as WorkspacePaneSpec,\n      right: panes.filter((pane) => pane.location === \"right\"),\n      bottom: panes.find((pane) => pane.location === \"bottom\"),\n    }),\n    [panes],\n  );\n\n  useLayoutEffect(() => {\n    const addedLocations = new Set(\n      panes\n        .map((pane) => pane.location)\n        .filter((location) => !seenLocations.current.has(location)),\n    );\n    const addedPanes = panes.filter(\n      (pane) => !seenPaneIds.current.has(pane.id),\n    );\n    panes.forEach((pane) => {\n      seenLocations.current.add(pane.location);\n      seenPaneIds.current.add(pane.id);\n    });\n    if (\n      value !== undefined ||\n      (addedLocations.size === 0 && addedPanes.length === 0)\n    )\n      return;\n    const defaults = createWorkspaceLayoutState(panes, defaultValue);\n    const addedStackHeights = addedPanes.reduce<Record<string, number>>(\n      (heights, pane) => {\n        if (pane.height !== undefined) heights[pane.id] = pane.height;\n        return heights;\n      },\n      {},\n    );\n    setInternal((current) => ({\n      ...current,\n      ...(addedLocations.has(\"left\") ? { leftWidth: defaults.leftWidth } : {}),\n      ...(addedLocations.has(\"right\")\n        ? { rightWidth: defaults.rightWidth }\n        : {}),\n      ...(addedLocations.has(\"bottom\")\n        ? { bottomHeight: defaults.bottomHeight }\n        : {}),\n      stackHeights: { ...current.stackHeights, ...addedStackHeights },\n      collapsed: {\n        ...current.collapsed,\n        ...Object.fromEntries(\n          addedPanes.map((pane) => [pane.id, pane.defaultCollapsed ?? false]),\n        ),\n      },\n    }));\n  }, [defaultValue, panes, value]);\n\n  const update = useCallback<WorkspaceUpdate>(\n    (change) => {\n      const next = change(state);\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, state, value],\n  );\n\n  useEffect(() => {\n    if (storageKey && value === undefined)\n      writeWorkspaceLayoutState(storageKey, internal);\n  }, [internal, storageKey, value]);\n\n  const held = (location: WorkspaceSideLocation) =>\n    collapsedSides?.includes(location) ?? false;\n  const shown: WorkspaceLayoutState = collapsedSides?.length\n    ? {\n        ...state,\n        sideCollapsed: {\n          left: held(\"left\") || state.sideCollapsed.left,\n          right: held(\"right\") || state.sideCollapsed.right,\n        },\n      }\n    : state;\n\n  // The regions switch between stacked and side-by-side on the workspace's own\n  // width (a container query), so a workspace embedded in a narrow column\n  // stacks even on a wide screen. A container cannot query itself, hence the\n  // outer box; caller classes size it.\n  return (\n    <div\n      data-slot=\"workspace\"\n      className={cn(\"@container/workspace h-full min-h-0 w-full\", className)}\n    >\n      <div\n        className=\"relative grid h-full min-h-0 w-full grid-cols-1 content-start overflow-auto bg-background @3xl/workspace:grid-cols-[auto_minmax(0,1fr)_auto] @3xl/workspace:grid-rows-[minmax(0,1fr)_auto] @3xl/workspace:content-stretch @3xl/workspace:overflow-hidden\"\n      >\n        <WorkspaceTopRight\n          hasLeft={groups.left.length > 0 && !held(\"left\")}\n          hasRight={groups.right.length > 0 && !held(\"right\")}\n          {...(slots ? { slots } : {})}\n          state={state}\n          update={update}\n        />\n        <WorkspaceSideRegion\n          location=\"left\"\n          panes={groups.left}\n          state={shown}\n          update={update}\n        />\n        <WorkspaceSingleRegion\n          pane={groups.center}\n          state={state}\n          update={update}\n        />\n        <WorkspaceSideRegion\n          location=\"right\"\n          panes={groups.right}\n          state={shown}\n          update={update}\n        />\n        {groups.bottom && (\n          <WorkspaceSingleRegion\n            pane={groups.bottom}\n            state={state}\n            update={update}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA+DA,SAAS,kBAAkB,EACzB,SACA,UACA,OACA,OACA,UACyB;CACzB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,iBAAiB,OAAO;CAC7D,MAAM,cAAc,aAClB,QAAQ,aAAa;EACnB,GAAG;EACH,eAAe;GACb,GAAG,QAAQ;IACV,WAAW,CAAC,QAAQ,cAAc;EACrC;CACF,EAAE;CACJ,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,WAAU;EAFZ,UAAA;GAIG,OAAO;GACP,WACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,iBAAe,CAAC,MAAM,cAAc;IACpC,cAAY,GAAG,MAAM,cAAc,OAAO,WAAW,WAAW;IAChE,eAAe,WAAW,MAAM;IAEhC,UAAA,oBAAC,WAAD,EAAW,WAAU,SAAU,CAAA;GACzB,CAAA;GAET,YACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,iBAAe,CAAC,MAAM,cAAc;IACpC,cAAY,GAAG,MAAM,cAAc,QAAQ,WAAW,WAAW;IACjE,eAAe,WAAW,OAAO;IAEjC,UAAA,oBAAC,WAAD,EAAW,WAAU,sBAAuB,CAAA;GACtC,CAAA;EAEP;;AAET;AAEA,SAAgB,UAAU,EACxB,OACA,OACA,eAAe,CAAC,GAChB,eACA,YACA,OACA,gBACA,aACiB;CACjB,uBAAuB,KAAK;CAC5B,IAAI,UAAU,KAAA,KAAa,eAAe,KAAA,GACxC,MAAM,IAAI,MAAM,gDAAgD;CAElE,MAAM,CAAC,UAAU,eAAe,eAC9B,aACI,yBAAyB,YAAY,OAAO,YAAY,IACxD,2BAA2B,OAAO,YAAY,CACpD;CACA,MAAM,gBAAgB,OAAO,IAAI,IAAI,MAAM,KAAK,SAAS,KAAK,QAAQ,CAAC,CAAC;CACxE,MAAM,cAAc,OAAO,IAAI,IAAI,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC,CAAC;CAChE,MAAM,QAAQ,SAAS;CACvB,MAAM,SAAS,eACN;EACL,MAAM,MAAM,QAAQ,SAAS,KAAK,aAAa,MAAM;EACrD,QAAQ,MAAM,MACX,SAAS,KAAK,aAAa,QAC9B;EACA,OAAO,MAAM,QAAQ,SAAS,KAAK,aAAa,OAAO;EACvD,QAAQ,MAAM,MAAM,SAAS,KAAK,aAAa,QAAQ;CACzD,IACA,CAAC,KAAK,CACR;CAEA,sBAAsB;EACpB,MAAM,iBAAiB,IAAI,IACzB,MACG,KAAK,SAAS,KAAK,QAAQ,CAAC,CAC5B,QAAQ,aAAa,CAAC,cAAc,QAAQ,IAAI,QAAQ,CAAC,CAC9D;EACA,MAAM,aAAa,MAAM,QACtB,SAAS,CAAC,YAAY,QAAQ,IAAI,KAAK,EAAE,CAC5C;EACA,MAAM,SAAS,SAAS;GACtB,cAAc,QAAQ,IAAI,KAAK,QAAQ;GACvC,YAAY,QAAQ,IAAI,KAAK,EAAE;EACjC,CAAC;EACD,IACE,UAAU,KAAA,KACT,eAAe,SAAS,KAAK,WAAW,WAAW,GAEpD;EACF,MAAM,WAAW,2BAA2B,OAAO,YAAY;EAC/D,MAAM,oBAAoB,WAAW,QAClC,SAAS,SAAS;GACjB,IAAI,KAAK,WAAW,KAAA,GAAW,QAAQ,KAAK,MAAM,KAAK;GACvD,OAAO;EACT,GACA,CAAC,CACH;EACA,aAAa,aAAa;GACxB,GAAG;GACH,GAAI,eAAe,IAAI,MAAM,IAAI,EAAE,WAAW,SAAS,UAAU,IAAI,CAAC;GACtE,GAAI,eAAe,IAAI,OAAO,IAC1B,EAAE,YAAY,SAAS,WAAW,IAClC,CAAC;GACL,GAAI,eAAe,IAAI,QAAQ,IAC3B,EAAE,cAAc,SAAS,aAAa,IACtC,CAAC;GACL,cAAc;IAAE,GAAG,QAAQ;IAAc,GAAG;GAAkB;GAC9D,WAAW;IACT,GAAG,QAAQ;IACX,GAAG,OAAO,YACR,WAAW,KAAK,SAAS,CAAC,KAAK,IAAI,KAAK,oBAAoB,KAAK,CAAC,CACpE;GACF;EACF,EAAE;CACJ,GAAG;EAAC;EAAc;EAAO;CAAK,CAAC;CAE/B,MAAM,SAAS,aACZ,WAAW;EACV,MAAM,OAAO,OAAO,KAAK;EACzB,IAAI,UAAU,KAAA,GAAW,YAAY,IAAI;EACzC,gBAAgB,IAAI;CACtB,GACA;EAAC;EAAe;EAAO;CAAK,CAC9B;CAEA,gBAAgB;EACd,IAAI,cAAc,UAAU,KAAA,GAC1B,0BAA0B,YAAY,QAAQ;CAClD,GAAG;EAAC;EAAU;EAAY;CAAK,CAAC;CAEhC,MAAM,QAAQ,aACZ,gBAAgB,SAAS,QAAQ,KAAK;CACxC,MAAM,QAA8B,gBAAgB,SAChD;EACE,GAAG;EACH,eAAe;GACb,MAAM,KAAK,MAAM,KAAK,MAAM,cAAc;GAC1C,OAAO,KAAK,OAAO,KAAK,MAAM,cAAc;EAC9C;CACF,IACA;CAMJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8CAA8C,SAAS;EAErE,UAAA,qBAAC,OAAD;GACE,WAAU;GADZ,UAAA;IAGE,oBAAC,mBAAD;KACE,SAAS,OAAO,KAAK,SAAS,KAAK,CAAC,KAAK,MAAM;KAC/C,UAAU,OAAO,MAAM,SAAS,KAAK,CAAC,KAAK,OAAO;KAClD,GAAK,QAAQ,EAAE,MAAM,IAAI,CAAC;KACnB;KACC;IACT,CAAA;IACD,oBAAC,qBAAD;KACE,UAAS;KACT,OAAO,OAAO;KACd,OAAO;KACC;IACT,CAAA;IACD,oBAAC,uBAAD;KACE,MAAM,OAAO;KACN;KACC;IACT,CAAA;IACD,oBAAC,qBAAD;KACE,UAAS;KACT,OAAO,OAAO;KACd,OAAO;KACC;IACT,CAAA;IACA,OAAO,UACN,oBAAC,uBAAD;KACE,MAAM,OAAO;KACN;KACC;IACT,CAAA;GAEA;;CACF,CAAA;AAET"}

package/dist/layout/Workspace.regions.cjs

@@ -55,7 +55,7 @@ function WorkspaceResizeHandle(props) {
 		"aria-valuemax": max,
 		"aria-valuenow": Math.round(value),
 		"data-testid": testId,
-		className: require_utils.cn("absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none md:block", orientation === "vertical" ? "top-0 h-full w-1 cursor-col-resize" : "left-0 h-1 w-full cursor-row-resize", className),
+		className: require_utils.cn("absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none @3xl/workspace:block", orientation === "vertical" ? "top-0 h-full w-1 cursor-col-resize" : "left-0 h-1 w-full cursor-row-resize", className),
 		onPointerDown,
 		onKeyDown
 	});
@@ -113,7 +113,7 @@ function WorkspaceSideRegion({ location, panes, state, update }) {
 		"data-testid": `workspace-region-${location}`,
 		"aria-hidden": sideCollapsed,
 		style,
-		className: require_utils.cn("relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border md:row-span-2 md:h-full md:w-[var(--workspace-region-width)]", location === "left" ? "md:order-none md:col-start-1 md:row-start-1 md:border-r" : "order-3 md:order-none md:col-start-3 md:row-start-1 md:border-l", sideCollapsed && "hidden border-0 md:flex"),
+		className: require_utils.cn("relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border @3xl/workspace:row-span-2 @3xl/workspace:h-full @3xl/workspace:w-[var(--workspace-region-width)]", location === "left" ? "@3xl/workspace:order-none @3xl/workspace:col-start-1 @3xl/workspace:row-start-1 @3xl/workspace:border-r" : "order-3 @3xl/workspace:order-none @3xl/workspace:col-start-3 @3xl/workspace:row-start-1 @3xl/workspace:border-l", sideCollapsed && "hidden border-0 @3xl/workspace:flex"),
 		children: [!sideCollapsed && panes.map((pane, index) => {
 			const collapsed = state.collapsed[pane.id] ?? false;
 			const nextPane = panes[index + 1];
@@ -173,7 +173,7 @@ function WorkspaceSingleRegion({ pane, state, update }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": `workspace-region-${pane.location}`,
 		style,
-		className: require_utils.cn("relative flex min-h-0 min-w-0 flex-col overflow-hidden", isBottom ? "order-4 w-full border-t border-border md:order-none md:col-start-2 md:row-start-2 md:h-[var(--workspace-bottom-height)]" : "order-1 min-h-80 md:order-none md:col-start-2 md:row-start-1 md:min-h-0"),
+		className: require_utils.cn("relative flex min-h-0 min-w-0 flex-col overflow-hidden", isBottom ? "order-4 w-full border-t border-border @3xl/workspace:order-none @3xl/workspace:col-start-2 @3xl/workspace:row-start-2 @3xl/workspace:h-[var(--workspace-bottom-height)]" : "order-1 min-h-80 @3xl/workspace:order-none @3xl/workspace:col-start-2 @3xl/workspace:row-start-1 @3xl/workspace:min-h-0"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspacePaneView, {
 			pane,
 			collapsed,

package/dist/layout/Workspace.regions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Workspace.regions.cjs","names":["useCallback","cn","_Fragment","UiChevronRight","UiChevronDown"],"sources":["../../src/layout/Workspace.regions.tsx"],"sourcesContent":["import {\n  useCallback,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  WORKSPACE_COLLAPSED_RAIL_WIDTH,\n  type WorkspaceLayoutState,\n  type WorkspacePaneSpec,\n} from \"./Workspace.model\";\n\nexport type WorkspaceUpdate = (\n  change: (current: WorkspaceLayoutState) => WorkspaceLayoutState,\n) => void;\n\ntype ResizeHandleProps = {\n  orientation: \"horizontal\" | \"vertical\";\n  value: number;\n  min: number;\n  max: number;\n  pointerFactor: number;\n  label: string;\n  testId: string;\n  className?: string;\n  onChange: (value: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.max(min, Math.min(max, value));\n}\n\nfunction WorkspaceResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation,\n    value,\n    min,\n    max,\n    pointerFactor,\n    label,\n    testId,\n    className,\n    onChange,\n  } = props;\n  const onPointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      const start = orientation === \"vertical\" ? event.clientX : event.clientY;\n      const initial = value;\n      const onMove = (moveEvent: PointerEvent) => {\n        const current =\n          orientation === \"vertical\" ? moveEvent.clientX : moveEvent.clientY;\n        onChange(clamp(initial + (current - start) * pointerFactor, min, max));\n      };\n      const onUp = () => {\n        document.removeEventListener(\"pointermove\", onMove);\n        document.removeEventListener(\"pointerup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n      document.addEventListener(\"pointermove\", onMove);\n      document.addEventListener(\"pointerup\", onUp);\n      document.body.style.cursor =\n        orientation === \"vertical\" ? \"col-resize\" : \"row-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [max, min, onChange, orientation, pointerFactor, value],\n  );\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? 48 : 16;\n    const lowerKey = orientation === \"vertical\" ? \"ArrowLeft\" : \"ArrowUp\";\n    const upperKey = orientation === \"vertical\" ? \"ArrowRight\" : \"ArrowDown\";\n    if (event.key === \"Home\") onChange(min);\n    else if (event.key === \"End\") onChange(max);\n    else if (event.key === lowerKey)\n      onChange(clamp(value - step * pointerFactor, min, max));\n    else if (event.key === upperKey)\n      onChange(clamp(value + step * pointerFactor, min, max));\n    else return;\n    event.preventDefault();\n  };\n\n  return (\n    <div\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={label}\n      aria-orientation={orientation}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={Math.round(value)}\n      data-testid={testId}\n      className={cn(\n        \"absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none md:block\",\n        orientation === \"vertical\"\n          ? \"top-0 h-full w-1 cursor-col-resize\"\n          : \"left-0 h-1 w-full cursor-row-resize\",\n        className,\n      )}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n\ntype PaneViewProps = {\n  pane: WorkspacePaneSpec;\n  collapsed: boolean;\n  compact: boolean;\n  onToggle: () => void;\n};\n\nfunction WorkspacePaneView({\n  pane,\n  collapsed,\n  compact,\n  onToggle,\n}: PaneViewProps) {\n  const headerContent = (\n    <>\n      {pane.collapsible !== false &&\n        (collapsed ? (\n          <UiChevronRight className=\"size-3.5 shrink-0\" />\n        ) : (\n          <UiChevronDown className=\"size-3.5 shrink-0\" />\n        ))}\n      {pane.slots?.headerLeading}\n      {pane.icon && (\n        <span className=\"flex size-4 shrink-0 items-center justify-center\">\n          {pane.icon}\n        </span>\n      )}\n      <span\n        className={cn(\n          \"min-w-0 flex-1 truncate text-xs font-semibold\",\n          compact && \"[writing-mode:vertical-rl]\",\n        )}\n      >\n        {pane.label}\n      </span>\n    </>\n  );\n\n  return (\n    <section\n      data-testid={`workspace-pane-${pane.id}`}\n      className={cn(\n        \"flex min-h-0 min-w-0 flex-col overflow-hidden bg-background\",\n        collapsed ? \"shrink-0\" : \"flex-1\",\n        pane.className,\n      )}\n    >\n      {pane.showHeader !== false ? (\n        <header\n          className={cn(\n            \"flex h-9 shrink-0 items-center gap-1 border-b border-border bg-muted/40 px-2\",\n            compact && \"h-auto min-h-12 flex-col px-1 py-2\",\n          )}\n        >\n          {pane.collapsible === false ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n              {headerContent}\n            </div>\n          ) : (\n            <button\n              type=\"button\"\n              className={cn(\n                \"flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-left hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n                compact && \"flex-col\",\n              )}\n              aria-expanded={!collapsed}\n              aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n              onClick={onToggle}\n            >\n              {headerContent}\n            </button>\n          )}\n          {!compact && pane.slots?.headerTrailing && (\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {pane.slots.headerTrailing}\n            </div>\n          )}\n        </header>\n      ) : null}\n      {!collapsed && (\n        <div\n          className={cn(\n            \"min-h-0 min-w-0 flex-1 overflow-auto\",\n            pane.contentClassName,\n          )}\n        >\n          {pane.content}\n        </div>\n      )}\n    </section>\n  );\n}\n\ntype SideRegionProps = {\n  location: \"left\" | \"right\";\n  panes: WorkspacePaneSpec[];\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSideRegion({\n  location,\n  panes,\n  state,\n  update,\n}: SideRegionProps) {\n  if (panes.length === 0) return null;\n  const sideCollapsed = state.sideCollapsed[location];\n  const allCollapsed = panes.every((pane) => state.collapsed[pane.id]);\n  const width = sideCollapsed\n    ? 0\n    : allCollapsed\n      ? WORKSPACE_COLLAPSED_RAIL_WIDTH\n      : location === \"left\"\n        ? state.leftWidth\n        : state.rightWidth;\n  const min = Math.max(...panes.map((pane) => pane.minWidth ?? 160));\n  const max = Math.min(...panes.map((pane) => pane.maxWidth ?? 720));\n  const canResize =\n    !sideCollapsed &&\n    !allCollapsed &&\n    panes.some((pane) => pane.resizable !== false);\n  const style = { \"--workspace-region-width\": `${width}px` } as CSSProperties;\n  // Open panes flex-share the region, so changing one pane's basis by d moves its\n  // rendered edge by only d*(open-1)/open; scale the drag so the handle tracks the cursor.\n  const openCount = panes.filter(\n    (pane) => !(state.collapsed[pane.id] ?? false),\n  ).length;\n  const stackPointerFactor = openCount > 1 ? openCount / (openCount - 1) : 1;\n\n  return (\n    <aside\n      data-testid={`workspace-region-${location}`}\n      aria-hidden={sideCollapsed}\n      style={style}\n      className={cn(\n        \"relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border md:row-span-2 md:h-full md:w-[var(--workspace-region-width)]\",\n        location === \"left\"\n          ? \"md:order-none md:col-start-1 md:row-start-1 md:border-r\"\n          : \"order-3 md:order-none md:col-start-3 md:row-start-1 md:border-l\",\n        sideCollapsed && \"hidden border-0 md:flex\",\n      )}\n    >\n      {!sideCollapsed &&\n        panes.map((pane, index) => {\n          const collapsed = state.collapsed[pane.id] ?? false;\n          const nextPane = panes[index + 1];\n          return (\n            <div\n              key={pane.id}\n              data-testid={`workspace-stack-${pane.id}`}\n              className={cn(\n                \"relative flex min-h-0 flex-col\",\n                collapsed ? \"shrink-0\" : \"flex-1\",\n              )}\n              style={\n                !collapsed && state.stackHeights[pane.id] !== undefined\n                  ? { flexBasis: `${state.stackHeights[pane.id]}px` }\n                  : undefined\n              }\n            >\n              <WorkspacePaneView\n                pane={pane}\n                collapsed={collapsed}\n                compact={allCollapsed}\n                onToggle={() =>\n                  update((current) => ({\n                    ...current,\n                    collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n                  }))\n                }\n              />\n              {!collapsed &&\n                nextPane &&\n                pane.resizable !== false &&\n                nextPane.resizable !== false && (\n                  <WorkspaceResizeHandle\n                    orientation=\"horizontal\"\n                    // Seed from the pane's current flex basis (0 when unsized) so the\n                    // drag starts where the divider actually is — no snap on first move.\n                    value={state.stackHeights[pane.id] ?? 0}\n                    min={pane.minHeight ?? 72}\n                    max={pane.maxHeight ?? 640}\n                    pointerFactor={stackPointerFactor}\n                    label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n                    testId={`workspace-resize-stack-${pane.id}`}\n                    className=\"bottom-0\"\n                    onChange={(height) =>\n                      update((current) => ({\n                        ...current,\n                        stackHeights: {\n                          ...current.stackHeights,\n                          [pane.id]: height,\n                        },\n                      }))\n                    }\n                  />\n                )}\n            </div>\n          );\n        })}\n      {canResize && (\n        <WorkspaceResizeHandle\n          orientation=\"vertical\"\n          value={width}\n          min={min}\n          max={max}\n          pointerFactor={location === \"left\" ? 1 : -1}\n          label={`Resize ${location} workspace panes`}\n          testId={`workspace-resize-${location}`}\n          className={location === \"left\" ? \"right-0\" : \"left-0\"}\n          onChange={(nextWidth) =>\n            update((current) => ({\n              ...current,\n              [location === \"left\" ? \"leftWidth\" : \"rightWidth\"]: nextWidth,\n            }))\n          }\n        />\n      )}\n    </aside>\n  );\n}\n\ntype SingleRegionProps = {\n  pane: WorkspacePaneSpec;\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSingleRegion({\n  pane,\n  state,\n  update,\n}: SingleRegionProps) {\n  const collapsed = state.collapsed[pane.id] ?? false;\n  const isBottom = pane.location === \"bottom\";\n  const style =\n    isBottom && !collapsed\n      ? ({\n          \"--workspace-bottom-height\": `${state.bottomHeight}px`,\n        } as CSSProperties)\n      : undefined;\n  return (\n    <div\n      data-testid={`workspace-region-${pane.location}`}\n      style={style}\n      className={cn(\n        \"relative flex min-h-0 min-w-0 flex-col overflow-hidden\",\n        isBottom\n          ? \"order-4 w-full border-t border-border md:order-none md:col-start-2 md:row-start-2 md:h-[var(--workspace-bottom-height)]\"\n          : \"order-1 min-h-80 md:order-none md:col-start-2 md:row-start-1 md:min-h-0\",\n      )}\n    >\n      <WorkspacePaneView\n        pane={pane}\n        collapsed={collapsed}\n        compact={false}\n        onToggle={() =>\n          update((current) => ({\n            ...current,\n            collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n          }))\n        }\n      />\n      {isBottom && !collapsed && pane.resizable !== false && (\n        <WorkspaceResizeHandle\n          orientation=\"horizontal\"\n          value={state.bottomHeight}\n          min={pane.minHeight ?? 96}\n          max={pane.maxHeight ?? 640}\n          pointerFactor={-1}\n          label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n          testId=\"workspace-resize-bottom\"\n          className=\"top-0\"\n          onChange={(bottomHeight) =>\n            update((current) => ({ ...current, bottomHeight }))\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA8BA,SAAS,MAAM,OAAe,KAAa,KAAa;CACtD,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;AAEA,SAAS,sBAAsB,OAA0B;CACvD,MAAM,EACJ,aACA,OACA,KACA,KACA,eACA,OACA,QACA,WACA,aACE;CACJ,MAAM,iBAAA,GAAgBA,MAAAA,YAAAA,EACnB,UAA6C;EAC5C,MAAM,eAAe;EACrB,MAAM,QAAQ,gBAAgB,aAAa,MAAM,UAAU,MAAM;EACjE,MAAM,UAAU;EAChB,MAAM,UAAU,cAA4B;GAC1C,MAAM,UACJ,gBAAgB,aAAa,UAAU,UAAU,UAAU;GAC7D,SAAS,MAAM,WAAW,UAAU,SAAS,eAAe,KAAK,GAAG,CAAC;EACvE;EACA,MAAM,aAAa;GACjB,SAAS,oBAAoB,eAAe,MAAM;GAClD,SAAS,oBAAoB,aAAa,IAAI;GAC9C,SAAS,KAAK,MAAM,SAAS;GAC7B,SAAS,KAAK,MAAM,aAAa;EACnC;EACA,SAAS,iBAAiB,eAAe,MAAM;EAC/C,SAAS,iBAAiB,aAAa,IAAI;EAC3C,SAAS,KAAK,MAAM,SAClB,gBAAgB,aAAa,eAAe;EAC9C,SAAS,KAAK,MAAM,aAAa;CACnC,GACA;EAAC;EAAK;EAAK;EAAU;EAAa;EAAe;CAAK,CACxD;CAEA,MAAM,aAAa,UAAyC;EAC1D,MAAM,OAAO,MAAM,WAAW,KAAK;EACnC,MAAM,WAAW,gBAAgB,aAAa,cAAc;EAC5D,MAAM,WAAW,gBAAgB,aAAa,eAAe;EAC7D,IAAI,MAAM,QAAQ,QAAQ,SAAS,GAAG;OACjC,IAAI,MAAM,QAAQ,OAAO,SAAS,GAAG;OACrC,IAAI,MAAM,QAAQ,UACrB,SAAS,MAAM,QAAQ,OAAO,eAAe,KAAK,GAAG,CAAC;OACnD,IAAI,MAAM,QAAQ,UACrB,SAAS,MAAM,QAAQ,OAAO,eAAe,KAAK,GAAG,CAAC;OACnD;EACL,MAAM,eAAe;CACvB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,cAAY;EACZ,oBAAkB;EAClB,iBAAe;EACf,iBAAe;EACf,iBAAe,KAAK,MAAM,KAAK;EAC/B,eAAa;EACb,WAAWC,cAAAA,GACT,kIACA,gBAAgB,aACZ,uCACA,uCACJ,SACF;EACe;EACJ;CACZ,CAAA;AAEL;AASA,SAAS,kBAAkB,EACzB,MACA,WACA,SACA,YACgB;CAChB,MAAM,gBACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA;EACG,KAAK,gBAAgB,UACnB,YACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD,EAAgB,WAAU,oBAAqB,CAAA,IAE/C,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD,EAAe,WAAU,oBAAqB,CAAA;EAEjD,KAAK,OAAO;EACZ,KAAK,QACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GACb,UAAA,KAAK;EACF,CAAA;EAER,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,WAAWH,cAAAA,GACT,iDACA,WAAW,4BACb;GAEC,UAAA,KAAK;EACF,CAAA;CACN,EAAA,CAAA;CAGJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EACE,eAAa,kBAAkB,KAAK;EACpC,WAAWA,cAAAA,GACT,+DACA,YAAY,aAAa,UACzB,KAAK,SACP;EANF,UAAA,CAQG,KAAK,eAAe,QACnB,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;GACE,WAAWA,cAAAA,GACT,gFACA,WAAW,oCACb;GAJF,UAAA,CAMG,KAAK,gBAAgB,QACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACE,MAAK;IACL,WAAWA,cAAAA,GACT,+JACA,WAAW,UACb;IACA,iBAAe,CAAC;IAChB,cAAY,GAAG,YAAY,WAAW,WAAW,GAAG,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK;IACvG,SAAS;IAER,UAAA;GACK,CAAA,GAET,CAAC,WAAW,KAAK,OAAO,kBACvB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACZ,UAAA,KAAK,MAAM;GACT,CAAA,CAED;EACN,CAAA,IAAA,MACH,CAAC,aACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,WAAWA,cAAAA,GACT,wCACA,KAAK,gBACP;GAEC,UAAA,KAAK;EACH,CAAA,CAEA;;AAEb;AASA,SAAgB,oBAAoB,EAClC,UACA,OACA,OACA,UACkB;CAClB,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,MAAM,gBAAgB,MAAM,cAAc;CAC1C,MAAM,eAAe,MAAM,OAAO,SAAS,MAAM,UAAU,KAAK,GAAG;CACnE,MAAM,QAAQ,gBACV,IACA,eAAA,KAEE,aAAa,SACX,MAAM,YACN,MAAM;CACd,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM,KAAK,SAAS,KAAK,YAAY,GAAG,CAAC;CACjE,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM,KAAK,SAAS,KAAK,YAAY,GAAG,CAAC;CACjE,MAAM,YACJ,CAAC,iBACD,CAAC,gBACD,MAAM,MAAM,SAAS,KAAK,cAAc,KAAK;CAC/C,MAAM,QAAQ,EAAE,4BAA4B,GAAG,MAAM,IAAI;CAGzD,MAAM,YAAY,MAAM,QACrB,SAAS,EAAE,MAAM,UAAU,KAAK,OAAO,MAC1C,CAAC,CAAC;CACF,MAAM,qBAAqB,YAAY,IAAI,aAAa,YAAY,KAAK;CAEzE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;EACE,eAAa,oBAAoB;EACjC,eAAa;EACN;EACP,WAAWA,cAAAA,GACT,4IACA,aAAa,SACT,4DACA,mEACJ,iBAAiB,yBACnB;EAVF,UAAA,CAYG,CAAC,iBACA,MAAM,KAAK,MAAM,UAAU;GACzB,MAAM,YAAY,MAAM,UAAU,KAAK,OAAO;GAC9C,MAAM,WAAW,MAAM,QAAQ;GAC/B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAEE,eAAa,mBAAmB,KAAK;IACrC,WAAWA,cAAAA,GACT,kCACA,YAAY,aAAa,QAC3B;IACA,OACE,CAAC,aAAa,MAAM,aAAa,KAAK,QAAQ,KAAA,IAC1C,EAAE,WAAW,GAAG,MAAM,aAAa,KAAK,IAAI,IAAI,IAChD,KAAA;IAVR,UAAA,CAaE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;KACQ;KACK;KACX,SAAS;KACT,gBACE,QAAQ,aAAa;MACnB,GAAG;MACH,WAAW;OAAE,GAAG,QAAQ;QAAY,KAAK,KAAK,CAAC;MAAU;KAC3D,EAAE;IAEL,CAAA,GACA,CAAC,aACA,YACA,KAAK,cAAc,SACnB,SAAS,cAAc,SACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;KACE,aAAY;KAGZ,OAAO,MAAM,aAAa,KAAK,OAAO;KACtC,KAAK,KAAK,aAAa;KACvB,KAAK,KAAK,aAAa;KACvB,eAAe;KACf,OAAO,UAAU,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK;KACpE,QAAQ,0BAA0B,KAAK;KACvC,WAAU;KACV,WAAW,WACT,QAAQ,aAAa;MACnB,GAAG;MACH,cAAc;OACZ,GAAG,QAAQ;QACV,KAAK,KAAK;MACb;KACF,EAAE;IAEL,CAAA,CAEF;GAjDE,GAAA,KAAK,EAiDP;EAET,CAAC,GACF,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;GACE,aAAY;GACZ,OAAO;GACF;GACA;GACL,eAAe,aAAa,SAAS,IAAI;GACzC,OAAO,UAAU,SAAS;GAC1B,QAAQ,oBAAoB;GAC5B,WAAW,aAAa,SAAS,YAAY;GAC7C,WAAW,cACT,QAAQ,aAAa;IACnB,GAAG;KACF,aAAa,SAAS,cAAc,eAAe;GACtD,EAAE;EAEL,CAAA,CAEE;;AAEX;AAQA,SAAgB,sBAAsB,EACpC,MACA,OACA,UACoB;CACpB,MAAM,YAAY,MAAM,UAAU,KAAK,OAAO;CAC9C,MAAM,WAAW,KAAK,aAAa;CACnC,MAAM,QACJ,YAAY,CAAC,YACR,EACC,6BAA6B,GAAG,MAAM,aAAa,IACrD,IACA,KAAA;CACN,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,eAAa,oBAAoB,KAAK;EAC/B;EACP,WAAWA,cAAAA,GACT,0DACA,WACI,4HACA,yEACN;EARF,UAAA,CAUE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;GACQ;GACK;GACX,SAAS;GACT,gBACE,QAAQ,aAAa;IACnB,GAAG;IACH,WAAW;KAAE,GAAG,QAAQ;MAAY,KAAK,KAAK,CAAC;IAAU;GAC3D,EAAE;EAEL,CAAA,GACA,YAAY,CAAC,aAAa,KAAK,cAAc,SAC5C,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;GACE,aAAY;GACZ,OAAO,MAAM;GACb,KAAK,KAAK,aAAa;GACvB,KAAK,KAAK,aAAa;GACvB,eAAe;GACf,OAAO,UAAU,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK;GACpE,QAAO;GACP,WAAU;GACV,WAAW,iBACT,QAAQ,aAAa;IAAE,GAAG;IAAS;GAAa,EAAE;EAErD,CAAA,CAEA;;AAET"}
+{"version":3,"file":"Workspace.regions.cjs","names":["useCallback","cn","_Fragment","UiChevronRight","UiChevronDown"],"sources":["../../src/layout/Workspace.regions.tsx"],"sourcesContent":["import {\n  useCallback,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  WORKSPACE_COLLAPSED_RAIL_WIDTH,\n  type WorkspaceLayoutState,\n  type WorkspacePaneSpec,\n} from \"./Workspace.model\";\n\nexport type WorkspaceUpdate = (\n  change: (current: WorkspaceLayoutState) => WorkspaceLayoutState,\n) => void;\n\ntype ResizeHandleProps = {\n  orientation: \"horizontal\" | \"vertical\";\n  value: number;\n  min: number;\n  max: number;\n  pointerFactor: number;\n  label: string;\n  testId: string;\n  className?: string;\n  onChange: (value: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.max(min, Math.min(max, value));\n}\n\nfunction WorkspaceResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation,\n    value,\n    min,\n    max,\n    pointerFactor,\n    label,\n    testId,\n    className,\n    onChange,\n  } = props;\n  const onPointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      const start = orientation === \"vertical\" ? event.clientX : event.clientY;\n      const initial = value;\n      const onMove = (moveEvent: PointerEvent) => {\n        const current =\n          orientation === \"vertical\" ? moveEvent.clientX : moveEvent.clientY;\n        onChange(clamp(initial + (current - start) * pointerFactor, min, max));\n      };\n      const onUp = () => {\n        document.removeEventListener(\"pointermove\", onMove);\n        document.removeEventListener(\"pointerup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n      document.addEventListener(\"pointermove\", onMove);\n      document.addEventListener(\"pointerup\", onUp);\n      document.body.style.cursor =\n        orientation === \"vertical\" ? \"col-resize\" : \"row-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [max, min, onChange, orientation, pointerFactor, value],\n  );\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? 48 : 16;\n    const lowerKey = orientation === \"vertical\" ? \"ArrowLeft\" : \"ArrowUp\";\n    const upperKey = orientation === \"vertical\" ? \"ArrowRight\" : \"ArrowDown\";\n    if (event.key === \"Home\") onChange(min);\n    else if (event.key === \"End\") onChange(max);\n    else if (event.key === lowerKey)\n      onChange(clamp(value - step * pointerFactor, min, max));\n    else if (event.key === upperKey)\n      onChange(clamp(value + step * pointerFactor, min, max));\n    else return;\n    event.preventDefault();\n  };\n\n  return (\n    <div\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={label}\n      aria-orientation={orientation}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={Math.round(value)}\n      data-testid={testId}\n      className={cn(\n        \"absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none @3xl/workspace:block\",\n        orientation === \"vertical\"\n          ? \"top-0 h-full w-1 cursor-col-resize\"\n          : \"left-0 h-1 w-full cursor-row-resize\",\n        className,\n      )}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n\ntype PaneViewProps = {\n  pane: WorkspacePaneSpec;\n  collapsed: boolean;\n  compact: boolean;\n  onToggle: () => void;\n};\n\nfunction WorkspacePaneView({\n  pane,\n  collapsed,\n  compact,\n  onToggle,\n}: PaneViewProps) {\n  const headerContent = (\n    <>\n      {pane.collapsible !== false &&\n        (collapsed ? (\n          <UiChevronRight className=\"size-3.5 shrink-0\" />\n        ) : (\n          <UiChevronDown className=\"size-3.5 shrink-0\" />\n        ))}\n      {pane.slots?.headerLeading}\n      {pane.icon && (\n        <span className=\"flex size-4 shrink-0 items-center justify-center\">\n          {pane.icon}\n        </span>\n      )}\n      <span\n        className={cn(\n          \"min-w-0 flex-1 truncate text-xs font-semibold\",\n          compact && \"[writing-mode:vertical-rl]\",\n        )}\n      >\n        {pane.label}\n      </span>\n    </>\n  );\n\n  return (\n    <section\n      data-testid={`workspace-pane-${pane.id}`}\n      className={cn(\n        \"flex min-h-0 min-w-0 flex-col overflow-hidden bg-background\",\n        collapsed ? \"shrink-0\" : \"flex-1\",\n        pane.className,\n      )}\n    >\n      {pane.showHeader !== false ? (\n        <header\n          className={cn(\n            \"flex h-9 shrink-0 items-center gap-1 border-b border-border bg-muted/40 px-2\",\n            compact && \"h-auto min-h-12 flex-col px-1 py-2\",\n          )}\n        >\n          {pane.collapsible === false ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n              {headerContent}\n            </div>\n          ) : (\n            <button\n              type=\"button\"\n              className={cn(\n                \"flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-left hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n                compact && \"flex-col\",\n              )}\n              aria-expanded={!collapsed}\n              aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n              onClick={onToggle}\n            >\n              {headerContent}\n            </button>\n          )}\n          {!compact && pane.slots?.headerTrailing && (\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {pane.slots.headerTrailing}\n            </div>\n          )}\n        </header>\n      ) : null}\n      {!collapsed && (\n        <div\n          className={cn(\n            \"min-h-0 min-w-0 flex-1 overflow-auto\",\n            pane.contentClassName,\n          )}\n        >\n          {pane.content}\n        </div>\n      )}\n    </section>\n  );\n}\n\ntype SideRegionProps = {\n  location: \"left\" | \"right\";\n  panes: WorkspacePaneSpec[];\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSideRegion({\n  location,\n  panes,\n  state,\n  update,\n}: SideRegionProps) {\n  if (panes.length === 0) return null;\n  const sideCollapsed = state.sideCollapsed[location];\n  const allCollapsed = panes.every((pane) => state.collapsed[pane.id]);\n  const width = sideCollapsed\n    ? 0\n    : allCollapsed\n      ? WORKSPACE_COLLAPSED_RAIL_WIDTH\n      : location === \"left\"\n        ? state.leftWidth\n        : state.rightWidth;\n  const min = Math.max(...panes.map((pane) => pane.minWidth ?? 160));\n  const max = Math.min(...panes.map((pane) => pane.maxWidth ?? 720));\n  const canResize =\n    !sideCollapsed &&\n    !allCollapsed &&\n    panes.some((pane) => pane.resizable !== false);\n  const style = { \"--workspace-region-width\": `${width}px` } as CSSProperties;\n  // Open panes flex-share the region, so changing one pane's basis by d moves its\n  // rendered edge by only d*(open-1)/open; scale the drag so the handle tracks the cursor.\n  const openCount = panes.filter(\n    (pane) => !(state.collapsed[pane.id] ?? false),\n  ).length;\n  const stackPointerFactor = openCount > 1 ? openCount / (openCount - 1) : 1;\n\n  return (\n    <aside\n      data-testid={`workspace-region-${location}`}\n      aria-hidden={sideCollapsed}\n      style={style}\n      className={cn(\n        \"relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border @3xl/workspace:row-span-2 @3xl/workspace:h-full @3xl/workspace:w-[var(--workspace-region-width)]\",\n        location === \"left\"\n          ? \"@3xl/workspace:order-none @3xl/workspace:col-start-1 @3xl/workspace:row-start-1 @3xl/workspace:border-r\"\n          : \"order-3 @3xl/workspace:order-none @3xl/workspace:col-start-3 @3xl/workspace:row-start-1 @3xl/workspace:border-l\",\n        sideCollapsed && \"hidden border-0 @3xl/workspace:flex\",\n      )}\n    >\n      {!sideCollapsed &&\n        panes.map((pane, index) => {\n          const collapsed = state.collapsed[pane.id] ?? false;\n          const nextPane = panes[index + 1];\n          return (\n            <div\n              key={pane.id}\n              data-testid={`workspace-stack-${pane.id}`}\n              className={cn(\n                \"relative flex min-h-0 flex-col\",\n                collapsed ? \"shrink-0\" : \"flex-1\",\n              )}\n              style={\n                !collapsed && state.stackHeights[pane.id] !== undefined\n                  ? { flexBasis: `${state.stackHeights[pane.id]}px` }\n                  : undefined\n              }\n            >\n              <WorkspacePaneView\n                pane={pane}\n                collapsed={collapsed}\n                compact={allCollapsed}\n                onToggle={() =>\n                  update((current) => ({\n                    ...current,\n                    collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n                  }))\n                }\n              />\n              {!collapsed &&\n                nextPane &&\n                pane.resizable !== false &&\n                nextPane.resizable !== false && (\n                  <WorkspaceResizeHandle\n                    orientation=\"horizontal\"\n                    // Seed from the pane's current flex basis (0 when unsized) so the\n                    // drag starts where the divider actually is — no snap on first move.\n                    value={state.stackHeights[pane.id] ?? 0}\n                    min={pane.minHeight ?? 72}\n                    max={pane.maxHeight ?? 640}\n                    pointerFactor={stackPointerFactor}\n                    label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n                    testId={`workspace-resize-stack-${pane.id}`}\n                    className=\"bottom-0\"\n                    onChange={(height) =>\n                      update((current) => ({\n                        ...current,\n                        stackHeights: {\n                          ...current.stackHeights,\n                          [pane.id]: height,\n                        },\n                      }))\n                    }\n                  />\n                )}\n            </div>\n          );\n        })}\n      {canResize && (\n        <WorkspaceResizeHandle\n          orientation=\"vertical\"\n          value={width}\n          min={min}\n          max={max}\n          pointerFactor={location === \"left\" ? 1 : -1}\n          label={`Resize ${location} workspace panes`}\n          testId={`workspace-resize-${location}`}\n          className={location === \"left\" ? \"right-0\" : \"left-0\"}\n          onChange={(nextWidth) =>\n            update((current) => ({\n              ...current,\n              [location === \"left\" ? \"leftWidth\" : \"rightWidth\"]: nextWidth,\n            }))\n          }\n        />\n      )}\n    </aside>\n  );\n}\n\ntype SingleRegionProps = {\n  pane: WorkspacePaneSpec;\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSingleRegion({\n  pane,\n  state,\n  update,\n}: SingleRegionProps) {\n  const collapsed = state.collapsed[pane.id] ?? false;\n  const isBottom = pane.location === \"bottom\";\n  const style =\n    isBottom && !collapsed\n      ? ({\n          \"--workspace-bottom-height\": `${state.bottomHeight}px`,\n        } as CSSProperties)\n      : undefined;\n  return (\n    <div\n      data-testid={`workspace-region-${pane.location}`}\n      style={style}\n      className={cn(\n        \"relative flex min-h-0 min-w-0 flex-col overflow-hidden\",\n        isBottom\n          ? \"order-4 w-full border-t border-border @3xl/workspace:order-none @3xl/workspace:col-start-2 @3xl/workspace:row-start-2 @3xl/workspace:h-[var(--workspace-bottom-height)]\"\n          : \"order-1 min-h-80 @3xl/workspace:order-none @3xl/workspace:col-start-2 @3xl/workspace:row-start-1 @3xl/workspace:min-h-0\",\n      )}\n    >\n      <WorkspacePaneView\n        pane={pane}\n        collapsed={collapsed}\n        compact={false}\n        onToggle={() =>\n          update((current) => ({\n            ...current,\n            collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n          }))\n        }\n      />\n      {isBottom && !collapsed && pane.resizable !== false && (\n        <WorkspaceResizeHandle\n          orientation=\"horizontal\"\n          value={state.bottomHeight}\n          min={pane.minHeight ?? 96}\n          max={pane.maxHeight ?? 640}\n          pointerFactor={-1}\n          label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n          testId=\"workspace-resize-bottom\"\n          className=\"top-0\"\n          onChange={(bottomHeight) =>\n            update((current) => ({ ...current, bottomHeight }))\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/layout/Workspace.regions.js

@@ -55,7 +55,7 @@ function WorkspaceResizeHandle(props) {
 		"aria-valuemax": max,
 		"aria-valuenow": Math.round(value),
 		"data-testid": testId,
-		className: cn("absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none md:block", orientation === "vertical" ? "top-0 h-full w-1 cursor-col-resize" : "left-0 h-1 w-full cursor-row-resize", className),
+		className: cn("absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none @3xl/workspace:block", orientation === "vertical" ? "top-0 h-full w-1 cursor-col-resize" : "left-0 h-1 w-full cursor-row-resize", className),
 		onPointerDown,
 		onKeyDown
 	});
@@ -113,7 +113,7 @@ function WorkspaceSideRegion({ location, panes, state, update }) {
 		"data-testid": `workspace-region-${location}`,
 		"aria-hidden": sideCollapsed,
 		style,
-		className: cn("relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border md:row-span-2 md:h-full md:w-[var(--workspace-region-width)]", location === "left" ? "md:order-none md:col-start-1 md:row-start-1 md:border-r" : "order-3 md:order-none md:col-start-3 md:row-start-1 md:border-l", sideCollapsed && "hidden border-0 md:flex"),
+		className: cn("relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border @3xl/workspace:row-span-2 @3xl/workspace:h-full @3xl/workspace:w-[var(--workspace-region-width)]", location === "left" ? "@3xl/workspace:order-none @3xl/workspace:col-start-1 @3xl/workspace:row-start-1 @3xl/workspace:border-r" : "order-3 @3xl/workspace:order-none @3xl/workspace:col-start-3 @3xl/workspace:row-start-1 @3xl/workspace:border-l", sideCollapsed && "hidden border-0 @3xl/workspace:flex"),
 		children: [!sideCollapsed && panes.map((pane, index) => {
 			const collapsed = state.collapsed[pane.id] ?? false;
 			const nextPane = panes[index + 1];
@@ -173,7 +173,7 @@ function WorkspaceSingleRegion({ pane, state, update }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": `workspace-region-${pane.location}`,
 		style,
-		className: cn("relative flex min-h-0 min-w-0 flex-col overflow-hidden", isBottom ? "order-4 w-full border-t border-border md:order-none md:col-start-2 md:row-start-2 md:h-[var(--workspace-bottom-height)]" : "order-1 min-h-80 md:order-none md:col-start-2 md:row-start-1 md:min-h-0"),
+		className: cn("relative flex min-h-0 min-w-0 flex-col overflow-hidden", isBottom ? "order-4 w-full border-t border-border @3xl/workspace:order-none @3xl/workspace:col-start-2 @3xl/workspace:row-start-2 @3xl/workspace:h-[var(--workspace-bottom-height)]" : "order-1 min-h-80 @3xl/workspace:order-none @3xl/workspace:col-start-2 @3xl/workspace:row-start-1 @3xl/workspace:min-h-0"),
 		children: [/* @__PURE__ */ jsx(WorkspacePaneView, {
 			pane,
 			collapsed,

package/dist/layout/Workspace.regions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Workspace.regions.js","names":["_Fragment"],"sources":["../../src/layout/Workspace.regions.tsx"],"sourcesContent":["import {\n  useCallback,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  WORKSPACE_COLLAPSED_RAIL_WIDTH,\n  type WorkspaceLayoutState,\n  type WorkspacePaneSpec,\n} from \"./Workspace.model\";\n\nexport type WorkspaceUpdate = (\n  change: (current: WorkspaceLayoutState) => WorkspaceLayoutState,\n) => void;\n\ntype ResizeHandleProps = {\n  orientation: \"horizontal\" | \"vertical\";\n  value: number;\n  min: number;\n  max: number;\n  pointerFactor: number;\n  label: string;\n  testId: string;\n  className?: string;\n  onChange: (value: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.max(min, Math.min(max, value));\n}\n\nfunction WorkspaceResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation,\n    value,\n    min,\n    max,\n    pointerFactor,\n    label,\n    testId,\n    className,\n    onChange,\n  } = props;\n  const onPointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      const start = orientation === \"vertical\" ? event.clientX : event.clientY;\n      const initial = value;\n      const onMove = (moveEvent: PointerEvent) => {\n        const current =\n          orientation === \"vertical\" ? moveEvent.clientX : moveEvent.clientY;\n        onChange(clamp(initial + (current - start) * pointerFactor, min, max));\n      };\n      const onUp = () => {\n        document.removeEventListener(\"pointermove\", onMove);\n        document.removeEventListener(\"pointerup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n      document.addEventListener(\"pointermove\", onMove);\n      document.addEventListener(\"pointerup\", onUp);\n      document.body.style.cursor =\n        orientation === \"vertical\" ? \"col-resize\" : \"row-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [max, min, onChange, orientation, pointerFactor, value],\n  );\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? 48 : 16;\n    const lowerKey = orientation === \"vertical\" ? \"ArrowLeft\" : \"ArrowUp\";\n    const upperKey = orientation === \"vertical\" ? \"ArrowRight\" : \"ArrowDown\";\n    if (event.key === \"Home\") onChange(min);\n    else if (event.key === \"End\") onChange(max);\n    else if (event.key === lowerKey)\n      onChange(clamp(value - step * pointerFactor, min, max));\n    else if (event.key === upperKey)\n      onChange(clamp(value + step * pointerFactor, min, max));\n    else return;\n    event.preventDefault();\n  };\n\n  return (\n    <div\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={label}\n      aria-orientation={orientation}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={Math.round(value)}\n      data-testid={testId}\n      className={cn(\n        \"absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none md:block\",\n        orientation === \"vertical\"\n          ? \"top-0 h-full w-1 cursor-col-resize\"\n          : \"left-0 h-1 w-full cursor-row-resize\",\n        className,\n      )}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n\ntype PaneViewProps = {\n  pane: WorkspacePaneSpec;\n  collapsed: boolean;\n  compact: boolean;\n  onToggle: () => void;\n};\n\nfunction WorkspacePaneView({\n  pane,\n  collapsed,\n  compact,\n  onToggle,\n}: PaneViewProps) {\n  const headerContent = (\n    <>\n      {pane.collapsible !== false &&\n        (collapsed ? (\n          <UiChevronRight className=\"size-3.5 shrink-0\" />\n        ) : (\n          <UiChevronDown className=\"size-3.5 shrink-0\" />\n        ))}\n      {pane.slots?.headerLeading}\n      {pane.icon && (\n        <span className=\"flex size-4 shrink-0 items-center justify-center\">\n          {pane.icon}\n        </span>\n      )}\n      <span\n        className={cn(\n          \"min-w-0 flex-1 truncate text-xs font-semibold\",\n          compact && \"[writing-mode:vertical-rl]\",\n        )}\n      >\n        {pane.label}\n      </span>\n    </>\n  );\n\n  return (\n    <section\n      data-testid={`workspace-pane-${pane.id}`}\n      className={cn(\n        \"flex min-h-0 min-w-0 flex-col overflow-hidden bg-background\",\n        collapsed ? \"shrink-0\" : \"flex-1\",\n        pane.className,\n      )}\n    >\n      {pane.showHeader !== false ? (\n        <header\n          className={cn(\n            \"flex h-9 shrink-0 items-center gap-1 border-b border-border bg-muted/40 px-2\",\n            compact && \"h-auto min-h-12 flex-col px-1 py-2\",\n          )}\n        >\n          {pane.collapsible === false ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n              {headerContent}\n            </div>\n          ) : (\n            <button\n              type=\"button\"\n              className={cn(\n                \"flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-left hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n                compact && \"flex-col\",\n              )}\n              aria-expanded={!collapsed}\n              aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n              onClick={onToggle}\n            >\n              {headerContent}\n            </button>\n          )}\n          {!compact && pane.slots?.headerTrailing && (\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {pane.slots.headerTrailing}\n            </div>\n          )}\n        </header>\n      ) : null}\n      {!collapsed && (\n        <div\n          className={cn(\n            \"min-h-0 min-w-0 flex-1 overflow-auto\",\n            pane.contentClassName,\n          )}\n        >\n          {pane.content}\n        </div>\n      )}\n    </section>\n  );\n}\n\ntype SideRegionProps = {\n  location: \"left\" | \"right\";\n  panes: WorkspacePaneSpec[];\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSideRegion({\n  location,\n  panes,\n  state,\n  update,\n}: SideRegionProps) {\n  if (panes.length === 0) return null;\n  const sideCollapsed = state.sideCollapsed[location];\n  const allCollapsed = panes.every((pane) => state.collapsed[pane.id]);\n  const width = sideCollapsed\n    ? 0\n    : allCollapsed\n      ? WORKSPACE_COLLAPSED_RAIL_WIDTH\n      : location === \"left\"\n        ? state.leftWidth\n        : state.rightWidth;\n  const min = Math.max(...panes.map((pane) => pane.minWidth ?? 160));\n  const max = Math.min(...panes.map((pane) => pane.maxWidth ?? 720));\n  const canResize =\n    !sideCollapsed &&\n    !allCollapsed &&\n    panes.some((pane) => pane.resizable !== false);\n  const style = { \"--workspace-region-width\": `${width}px` } as CSSProperties;\n  // Open panes flex-share the region, so changing one pane's basis by d moves its\n  // rendered edge by only d*(open-1)/open; scale the drag so the handle tracks the cursor.\n  const openCount = panes.filter(\n    (pane) => !(state.collapsed[pane.id] ?? false),\n  ).length;\n  const stackPointerFactor = openCount > 1 ? openCount / (openCount - 1) : 1;\n\n  return (\n    <aside\n      data-testid={`workspace-region-${location}`}\n      aria-hidden={sideCollapsed}\n      style={style}\n      className={cn(\n        \"relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border md:row-span-2 md:h-full md:w-[var(--workspace-region-width)]\",\n        location === \"left\"\n          ? \"md:order-none md:col-start-1 md:row-start-1 md:border-r\"\n          : \"order-3 md:order-none md:col-start-3 md:row-start-1 md:border-l\",\n        sideCollapsed && \"hidden border-0 md:flex\",\n      )}\n    >\n      {!sideCollapsed &&\n        panes.map((pane, index) => {\n          const collapsed = state.collapsed[pane.id] ?? false;\n          const nextPane = panes[index + 1];\n          return (\n            <div\n              key={pane.id}\n              data-testid={`workspace-stack-${pane.id}`}\n              className={cn(\n                \"relative flex min-h-0 flex-col\",\n                collapsed ? \"shrink-0\" : \"flex-1\",\n              )}\n              style={\n                !collapsed && state.stackHeights[pane.id] !== undefined\n                  ? { flexBasis: `${state.stackHeights[pane.id]}px` }\n                  : undefined\n              }\n            >\n              <WorkspacePaneView\n                pane={pane}\n                collapsed={collapsed}\n                compact={allCollapsed}\n                onToggle={() =>\n                  update((current) => ({\n                    ...current,\n                    collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n                  }))\n                }\n              />\n              {!collapsed &&\n                nextPane &&\n                pane.resizable !== false &&\n                nextPane.resizable !== false && (\n                  <WorkspaceResizeHandle\n                    orientation=\"horizontal\"\n                    // Seed from the pane's current flex basis (0 when unsized) so the\n                    // drag starts where the divider actually is — no snap on first move.\n                    value={state.stackHeights[pane.id] ?? 0}\n                    min={pane.minHeight ?? 72}\n                    max={pane.maxHeight ?? 640}\n                    pointerFactor={stackPointerFactor}\n                    label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n                    testId={`workspace-resize-stack-${pane.id}`}\n                    className=\"bottom-0\"\n                    onChange={(height) =>\n                      update((current) => ({\n                        ...current,\n                        stackHeights: {\n                          ...current.stackHeights,\n                          [pane.id]: height,\n                        },\n                      }))\n                    }\n                  />\n                )}\n            </div>\n          );\n        })}\n      {canResize && (\n        <WorkspaceResizeHandle\n          orientation=\"vertical\"\n          value={width}\n          min={min}\n          max={max}\n          pointerFactor={location === \"left\" ? 1 : -1}\n          label={`Resize ${location} workspace panes`}\n          testId={`workspace-resize-${location}`}\n          className={location === \"left\" ? \"right-0\" : \"left-0\"}\n          onChange={(nextWidth) =>\n            update((current) => ({\n              ...current,\n              [location === \"left\" ? \"leftWidth\" : \"rightWidth\"]: nextWidth,\n            }))\n          }\n        />\n      )}\n    </aside>\n  );\n}\n\ntype SingleRegionProps = {\n  pane: WorkspacePaneSpec;\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSingleRegion({\n  pane,\n  state,\n  update,\n}: SingleRegionProps) {\n  const collapsed = state.collapsed[pane.id] ?? false;\n  const isBottom = pane.location === \"bottom\";\n  const style =\n    isBottom && !collapsed\n      ? ({\n          \"--workspace-bottom-height\": `${state.bottomHeight}px`,\n        } as CSSProperties)\n      : undefined;\n  return (\n    <div\n      data-testid={`workspace-region-${pane.location}`}\n      style={style}\n      className={cn(\n        \"relative flex min-h-0 min-w-0 flex-col overflow-hidden\",\n        isBottom\n          ? \"order-4 w-full border-t border-border md:order-none md:col-start-2 md:row-start-2 md:h-[var(--workspace-bottom-height)]\"\n          : \"order-1 min-h-80 md:order-none md:col-start-2 md:row-start-1 md:min-h-0\",\n      )}\n    >\n      <WorkspacePaneView\n        pane={pane}\n        collapsed={collapsed}\n        compact={false}\n        onToggle={() =>\n          update((current) => ({\n            ...current,\n            collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n          }))\n        }\n      />\n      {isBottom && !collapsed && pane.resizable !== false && (\n        <WorkspaceResizeHandle\n          orientation=\"horizontal\"\n          value={state.bottomHeight}\n          min={pane.minHeight ?? 96}\n          max={pane.maxHeight ?? 640}\n          pointerFactor={-1}\n          label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n          testId=\"workspace-resize-bottom\"\n          className=\"top-0\"\n          onChange={(bottomHeight) =>\n            update((current) => ({ ...current, bottomHeight }))\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA8BA,SAAS,MAAM,OAAe,KAAa,KAAa;CACtD,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;AAEA,SAAS,sBAAsB,OAA0B;CACvD,MAAM,EACJ,aACA,OACA,KACA,KACA,eACA,OACA,QACA,WACA,aACE;CACJ,MAAM,gBAAgB,aACnB,UAA6C;EAC5C,MAAM,eAAe;EACrB,MAAM,QAAQ,gBAAgB,aAAa,MAAM,UAAU,MAAM;EACjE,MAAM,UAAU;EAChB,MAAM,UAAU,cAA4B;GAC1C,MAAM,UACJ,gBAAgB,aAAa,UAAU,UAAU,UAAU;GAC7D,SAAS,MAAM,WAAW,UAAU,SAAS,eAAe,KAAK,GAAG,CAAC;EACvE;EACA,MAAM,aAAa;GACjB,SAAS,oBAAoB,eAAe,MAAM;GAClD,SAAS,oBAAoB,aAAa,IAAI;GAC9C,SAAS,KAAK,MAAM,SAAS;GAC7B,SAAS,KAAK,MAAM,aAAa;EACnC;EACA,SAAS,iBAAiB,eAAe,MAAM;EAC/C,SAAS,iBAAiB,aAAa,IAAI;EAC3C,SAAS,KAAK,MAAM,SAClB,gBAAgB,aAAa,eAAe;EAC9C,SAAS,KAAK,MAAM,aAAa;CACnC,GACA;EAAC;EAAK;EAAK;EAAU;EAAa;EAAe;CAAK,CACxD;CAEA,MAAM,aAAa,UAAyC;EAC1D,MAAM,OAAO,MAAM,WAAW,KAAK;EACnC,MAAM,WAAW,gBAAgB,aAAa,cAAc;EAC5D,MAAM,WAAW,gBAAgB,aAAa,eAAe;EAC7D,IAAI,MAAM,QAAQ,QAAQ,SAAS,GAAG;OACjC,IAAI,MAAM,QAAQ,OAAO,SAAS,GAAG;OACrC,IAAI,MAAM,QAAQ,UACrB,SAAS,MAAM,QAAQ,OAAO,eAAe,KAAK,GAAG,CAAC;OACnD,IAAI,MAAM,QAAQ,UACrB,SAAS,MAAM,QAAQ,OAAO,eAAe,KAAK,GAAG,CAAC;OACnD;EACL,MAAM,eAAe;CACvB;CAEA,OACE,oBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,cAAY;EACZ,oBAAkB;EAClB,iBAAe;EACf,iBAAe;EACf,iBAAe,KAAK,MAAM,KAAK;EAC/B,eAAa;EACb,WAAW,GACT,kIACA,gBAAgB,aACZ,uCACA,uCACJ,SACF;EACe;EACJ;CACZ,CAAA;AAEL;AASA,SAAS,kBAAkB,EACzB,MACA,WACA,SACA,YACgB;CAChB,MAAM,gBACJ,qBAAAA,YAAA,EAAA,UAAA;EACG,KAAK,gBAAgB,UACnB,YACC,oBAAC,gBAAD,EAAgB,WAAU,oBAAqB,CAAA,IAE/C,oBAAC,eAAD,EAAe,WAAU,oBAAqB,CAAA;EAEjD,KAAK,OAAO;EACZ,KAAK,QACJ,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,KAAK;EACF,CAAA;EAER,oBAAC,QAAD;GACE,WAAW,GACT,iDACA,WAAW,4BACb;GAEC,UAAA,KAAK;EACF,CAAA;CACN,EAAA,CAAA;CAGJ,OACE,qBAAC,WAAD;EACE,eAAa,kBAAkB,KAAK;EACpC,WAAW,GACT,+DACA,YAAY,aAAa,UACzB,KAAK,SACP;EANF,UAAA,CAQG,KAAK,eAAe,QACnB,qBAAC,UAAD;GACE,WAAW,GACT,gFACA,WAAW,oCACb;GAJF,UAAA,CAMG,KAAK,gBAAgB,QACpB,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,IAEL,oBAAC,UAAD;IACE,MAAK;IACL,WAAW,GACT,+JACA,WAAW,UACb;IACA,iBAAe,CAAC;IAChB,cAAY,GAAG,YAAY,WAAW,WAAW,GAAG,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK;IACvG,SAAS;IAER,UAAA;GACK,CAAA,GAET,CAAC,WAAW,KAAK,OAAO,kBACvB,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,KAAK,MAAM;GACT,CAAA,CAED;EACN,CAAA,IAAA,MACH,CAAC,aACA,oBAAC,OAAD;GACE,WAAW,GACT,wCACA,KAAK,gBACP;GAEC,UAAA,KAAK;EACH,CAAA,CAEA;;AAEb;AASA,SAAgB,oBAAoB,EAClC,UACA,OACA,OACA,UACkB;CAClB,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,MAAM,gBAAgB,MAAM,cAAc;CAC1C,MAAM,eAAe,MAAM,OAAO,SAAS,MAAM,UAAU,KAAK,GAAG;CACnE,MAAM,QAAQ,gBACV,IACA,eAAA,KAEE,aAAa,SACX,MAAM,YACN,MAAM;CACd,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM,KAAK,SAAS,KAAK,YAAY,GAAG,CAAC;CACjE,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM,KAAK,SAAS,KAAK,YAAY,GAAG,CAAC;CACjE,MAAM,YACJ,CAAC,iBACD,CAAC,gBACD,MAAM,MAAM,SAAS,KAAK,cAAc,KAAK;CAC/C,MAAM,QAAQ,EAAE,4BAA4B,GAAG,MAAM,IAAI;CAGzD,MAAM,YAAY,MAAM,QACrB,SAAS,EAAE,MAAM,UAAU,KAAK,OAAO,MAC1C,CAAC,CAAC;CACF,MAAM,qBAAqB,YAAY,IAAI,aAAa,YAAY,KAAK;CAEzE,OACE,qBAAC,SAAD;EACE,eAAa,oBAAoB;EACjC,eAAa;EACN;EACP,WAAW,GACT,4IACA,aAAa,SACT,4DACA,mEACJ,iBAAiB,yBACnB;EAVF,UAAA,CAYG,CAAC,iBACA,MAAM,KAAK,MAAM,UAAU;GACzB,MAAM,YAAY,MAAM,UAAU,KAAK,OAAO;GAC9C,MAAM,WAAW,MAAM,QAAQ;GAC/B,OACE,qBAAC,OAAD;IAEE,eAAa,mBAAmB,KAAK;IACrC,WAAW,GACT,kCACA,YAAY,aAAa,QAC3B;IACA,OACE,CAAC,aAAa,MAAM,aAAa,KAAK,QAAQ,KAAA,IAC1C,EAAE,WAAW,GAAG,MAAM,aAAa,KAAK,IAAI,IAAI,IAChD,KAAA;IAVR,UAAA,CAaE,oBAAC,mBAAD;KACQ;KACK;KACX,SAAS;KACT,gBACE,QAAQ,aAAa;MACnB,GAAG;MACH,WAAW;OAAE,GAAG,QAAQ;QAAY,KAAK,KAAK,CAAC;MAAU;KAC3D,EAAE;IAEL,CAAA,GACA,CAAC,aACA,YACA,KAAK,cAAc,SACnB,SAAS,cAAc,SACrB,oBAAC,uBAAD;KACE,aAAY;KAGZ,OAAO,MAAM,aAAa,KAAK,OAAO;KACtC,KAAK,KAAK,aAAa;KACvB,KAAK,KAAK,aAAa;KACvB,eAAe;KACf,OAAO,UAAU,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK;KACpE,QAAQ,0BAA0B,KAAK;KACvC,WAAU;KACV,WAAW,WACT,QAAQ,aAAa;MACnB,GAAG;MACH,cAAc;OACZ,GAAG,QAAQ;QACV,KAAK,KAAK;MACb;KACF,EAAE;IAEL,CAAA,CAEF;GAjDE,GAAA,KAAK,EAiDP;EAET,CAAC,GACF,aACC,oBAAC,uBAAD;GACE,aAAY;GACZ,OAAO;GACF;GACA;GACL,eAAe,aAAa,SAAS,IAAI;GACzC,OAAO,UAAU,SAAS;GAC1B,QAAQ,oBAAoB;GAC5B,WAAW,aAAa,SAAS,YAAY;GAC7C,WAAW,cACT,QAAQ,aAAa;IACnB,GAAG;KACF,aAAa,SAAS,cAAc,eAAe;GACtD,EAAE;EAEL,CAAA,CAEE;;AAEX;AAQA,SAAgB,sBAAsB,EACpC,MACA,OACA,UACoB;CACpB,MAAM,YAAY,MAAM,UAAU,KAAK,OAAO;CAC9C,MAAM,WAAW,KAAK,aAAa;CACnC,MAAM,QACJ,YAAY,CAAC,YACR,EACC,6BAA6B,GAAG,MAAM,aAAa,IACrD,IACA,KAAA;CACN,OACE,qBAAC,OAAD;EACE,eAAa,oBAAoB,KAAK;EAC/B;EACP,WAAW,GACT,0DACA,WACI,4HACA,yEACN;EARF,UAAA,CAUE,oBAAC,mBAAD;GACQ;GACK;GACX,SAAS;GACT,gBACE,QAAQ,aAAa;IACnB,GAAG;IACH,WAAW;KAAE,GAAG,QAAQ;MAAY,KAAK,KAAK,CAAC;IAAU;GAC3D,EAAE;EAEL,CAAA,GACA,YAAY,CAAC,aAAa,KAAK,cAAc,SAC5C,oBAAC,uBAAD;GACE,aAAY;GACZ,OAAO,MAAM;GACb,KAAK,KAAK,aAAa;GACvB,KAAK,KAAK,aAAa;GACvB,eAAe;GACf,OAAO,UAAU,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK;GACpE,QAAO;GACP,WAAU;GACV,WAAW,iBACT,QAAQ,aAAa;IAAE,GAAG;IAAS;GAAa,EAAE;EAErD,CAAA,CAEA;;AAET"}
+{"version":3,"file":"Workspace.regions.js","names":["_Fragment"],"sources":["../../src/layout/Workspace.regions.tsx"],"sourcesContent":["import {\n  useCallback,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  WORKSPACE_COLLAPSED_RAIL_WIDTH,\n  type WorkspaceLayoutState,\n  type WorkspacePaneSpec,\n} from \"./Workspace.model\";\n\nexport type WorkspaceUpdate = (\n  change: (current: WorkspaceLayoutState) => WorkspaceLayoutState,\n) => void;\n\ntype ResizeHandleProps = {\n  orientation: \"horizontal\" | \"vertical\";\n  value: number;\n  min: number;\n  max: number;\n  pointerFactor: number;\n  label: string;\n  testId: string;\n  className?: string;\n  onChange: (value: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.max(min, Math.min(max, value));\n}\n\nfunction WorkspaceResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation,\n    value,\n    min,\n    max,\n    pointerFactor,\n    label,\n    testId,\n    className,\n    onChange,\n  } = props;\n  const onPointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      const start = orientation === \"vertical\" ? event.clientX : event.clientY;\n      const initial = value;\n      const onMove = (moveEvent: PointerEvent) => {\n        const current =\n          orientation === \"vertical\" ? moveEvent.clientX : moveEvent.clientY;\n        onChange(clamp(initial + (current - start) * pointerFactor, min, max));\n      };\n      const onUp = () => {\n        document.removeEventListener(\"pointermove\", onMove);\n        document.removeEventListener(\"pointerup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n      document.addEventListener(\"pointermove\", onMove);\n      document.addEventListener(\"pointerup\", onUp);\n      document.body.style.cursor =\n        orientation === \"vertical\" ? \"col-resize\" : \"row-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [max, min, onChange, orientation, pointerFactor, value],\n  );\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? 48 : 16;\n    const lowerKey = orientation === \"vertical\" ? \"ArrowLeft\" : \"ArrowUp\";\n    const upperKey = orientation === \"vertical\" ? \"ArrowRight\" : \"ArrowDown\";\n    if (event.key === \"Home\") onChange(min);\n    else if (event.key === \"End\") onChange(max);\n    else if (event.key === lowerKey)\n      onChange(clamp(value - step * pointerFactor, min, max));\n    else if (event.key === upperKey)\n      onChange(clamp(value + step * pointerFactor, min, max));\n    else return;\n    event.preventDefault();\n  };\n\n  return (\n    <div\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={label}\n      aria-orientation={orientation}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={Math.round(value)}\n      data-testid={testId}\n      className={cn(\n        \"absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none @3xl/workspace:block\",\n        orientation === \"vertical\"\n          ? \"top-0 h-full w-1 cursor-col-resize\"\n          : \"left-0 h-1 w-full cursor-row-resize\",\n        className,\n      )}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n\ntype PaneViewProps = {\n  pane: WorkspacePaneSpec;\n  collapsed: boolean;\n  compact: boolean;\n  onToggle: () => void;\n};\n\nfunction WorkspacePaneView({\n  pane,\n  collapsed,\n  compact,\n  onToggle,\n}: PaneViewProps) {\n  const headerContent = (\n    <>\n      {pane.collapsible !== false &&\n        (collapsed ? (\n          <UiChevronRight className=\"size-3.5 shrink-0\" />\n        ) : (\n          <UiChevronDown className=\"size-3.5 shrink-0\" />\n        ))}\n      {pane.slots?.headerLeading}\n      {pane.icon && (\n        <span className=\"flex size-4 shrink-0 items-center justify-center\">\n          {pane.icon}\n        </span>\n      )}\n      <span\n        className={cn(\n          \"min-w-0 flex-1 truncate text-xs font-semibold\",\n          compact && \"[writing-mode:vertical-rl]\",\n        )}\n      >\n        {pane.label}\n      </span>\n    </>\n  );\n\n  return (\n    <section\n      data-testid={`workspace-pane-${pane.id}`}\n      className={cn(\n        \"flex min-h-0 min-w-0 flex-col overflow-hidden bg-background\",\n        collapsed ? \"shrink-0\" : \"flex-1\",\n        pane.className,\n      )}\n    >\n      {pane.showHeader !== false ? (\n        <header\n          className={cn(\n            \"flex h-9 shrink-0 items-center gap-1 border-b border-border bg-muted/40 px-2\",\n            compact && \"h-auto min-h-12 flex-col px-1 py-2\",\n          )}\n        >\n          {pane.collapsible === false ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n              {headerContent}\n            </div>\n          ) : (\n            <button\n              type=\"button\"\n              className={cn(\n                \"flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-left hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n                compact && \"flex-col\",\n              )}\n              aria-expanded={!collapsed}\n              aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n              onClick={onToggle}\n            >\n              {headerContent}\n            </button>\n          )}\n          {!compact && pane.slots?.headerTrailing && (\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {pane.slots.headerTrailing}\n            </div>\n          )}\n        </header>\n      ) : null}\n      {!collapsed && (\n        <div\n          className={cn(\n            \"min-h-0 min-w-0 flex-1 overflow-auto\",\n            pane.contentClassName,\n          )}\n        >\n          {pane.content}\n        </div>\n      )}\n    </section>\n  );\n}\n\ntype SideRegionProps = {\n  location: \"left\" | \"right\";\n  panes: WorkspacePaneSpec[];\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSideRegion({\n  location,\n  panes,\n  state,\n  update,\n}: SideRegionProps) {\n  if (panes.length === 0) return null;\n  const sideCollapsed = state.sideCollapsed[location];\n  const allCollapsed = panes.every((pane) => state.collapsed[pane.id]);\n  const width = sideCollapsed\n    ? 0\n    : allCollapsed\n      ? WORKSPACE_COLLAPSED_RAIL_WIDTH\n      : location === \"left\"\n        ? state.leftWidth\n        : state.rightWidth;\n  const min = Math.max(...panes.map((pane) => pane.minWidth ?? 160));\n  const max = Math.min(...panes.map((pane) => pane.maxWidth ?? 720));\n  const canResize =\n    !sideCollapsed &&\n    !allCollapsed &&\n    panes.some((pane) => pane.resizable !== false);\n  const style = { \"--workspace-region-width\": `${width}px` } as CSSProperties;\n  // Open panes flex-share the region, so changing one pane's basis by d moves its\n  // rendered edge by only d*(open-1)/open; scale the drag so the handle tracks the cursor.\n  const openCount = panes.filter(\n    (pane) => !(state.collapsed[pane.id] ?? false),\n  ).length;\n  const stackPointerFactor = openCount > 1 ? openCount / (openCount - 1) : 1;\n\n  return (\n    <aside\n      data-testid={`workspace-region-${location}`}\n      aria-hidden={sideCollapsed}\n      style={style}\n      className={cn(\n        \"relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border @3xl/workspace:row-span-2 @3xl/workspace:h-full @3xl/workspace:w-[var(--workspace-region-width)]\",\n        location === \"left\"\n          ? \"@3xl/workspace:order-none @3xl/workspace:col-start-1 @3xl/workspace:row-start-1 @3xl/workspace:border-r\"\n          : \"order-3 @3xl/workspace:order-none @3xl/workspace:col-start-3 @3xl/workspace:row-start-1 @3xl/workspace:border-l\",\n        sideCollapsed && \"hidden border-0 @3xl/workspace:flex\",\n      )}\n    >\n      {!sideCollapsed &&\n        panes.map((pane, index) => {\n          const collapsed = state.collapsed[pane.id] ?? false;\n          const nextPane = panes[index + 1];\n          return (\n            <div\n              key={pane.id}\n              data-testid={`workspace-stack-${pane.id}`}\n              className={cn(\n                \"relative flex min-h-0 flex-col\",\n                collapsed ? \"shrink-0\" : \"flex-1\",\n              )}\n              style={\n                !collapsed && state.stackHeights[pane.id] !== undefined\n                  ? { flexBasis: `${state.stackHeights[pane.id]}px` }\n                  : undefined\n              }\n            >\n              <WorkspacePaneView\n                pane={pane}\n                collapsed={collapsed}\n                compact={allCollapsed}\n                onToggle={() =>\n                  update((current) => ({\n                    ...current,\n                    collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n                  }))\n                }\n              />\n              {!collapsed &&\n                nextPane &&\n                pane.resizable !== false &&\n                nextPane.resizable !== false && (\n                  <WorkspaceResizeHandle\n                    orientation=\"horizontal\"\n                    // Seed from the pane's current flex basis (0 when unsized) so the\n                    // drag starts where the divider actually is — no snap on first move.\n                    value={state.stackHeights[pane.id] ?? 0}\n                    min={pane.minHeight ?? 72}\n                    max={pane.maxHeight ?? 640}\n                    pointerFactor={stackPointerFactor}\n                    label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n                    testId={`workspace-resize-stack-${pane.id}`}\n                    className=\"bottom-0\"\n                    onChange={(height) =>\n                      update((current) => ({\n                        ...current,\n                        stackHeights: {\n                          ...current.stackHeights,\n                          [pane.id]: height,\n                        },\n                      }))\n                    }\n                  />\n                )}\n            </div>\n          );\n        })}\n      {canResize && (\n        <WorkspaceResizeHandle\n          orientation=\"vertical\"\n          value={width}\n          min={min}\n          max={max}\n          pointerFactor={location === \"left\" ? 1 : -1}\n          label={`Resize ${location} workspace panes`}\n          testId={`workspace-resize-${location}`}\n          className={location === \"left\" ? \"right-0\" : \"left-0\"}\n          onChange={(nextWidth) =>\n            update((current) => ({\n              ...current,\n              [location === \"left\" ? \"leftWidth\" : \"rightWidth\"]: nextWidth,\n            }))\n          }\n        />\n      )}\n    </aside>\n  );\n}\n\ntype SingleRegionProps = {\n  pane: WorkspacePaneSpec;\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSingleRegion({\n  pane,\n  state,\n  update,\n}: SingleRegionProps) {\n  const collapsed = state.collapsed[pane.id] ?? false;\n  const isBottom = pane.location === \"bottom\";\n  const style =\n    isBottom && !collapsed\n      ? ({\n          \"--workspace-bottom-height\": `${state.bottomHeight}px`,\n        } as CSSProperties)\n      : undefined;\n  return (\n    <div\n      data-testid={`workspace-region-${pane.location}`}\n      style={style}\n      className={cn(\n        \"relative flex min-h-0 min-w-0 flex-col overflow-hidden\",\n        isBottom\n          ? \"order-4 w-full border-t border-border @3xl/workspace:order-none @3xl/workspace:col-start-2 @3xl/workspace:row-start-2 @3xl/workspace:h-[var(--workspace-bottom-height)]\"\n          : \"order-1 min-h-80 @3xl/workspace:order-none @3xl/workspace:col-start-2 @3xl/workspace:row-start-1 @3xl/workspace:min-h-0\",\n      )}\n    >\n      <WorkspacePaneView\n        pane={pane}\n        collapsed={collapsed}\n        compact={false}\n        onToggle={() =>\n          update((current) => ({\n            ...current,\n            collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n          }))\n        }\n      />\n      {isBottom && !collapsed && pane.resizable !== false && (\n        <WorkspaceResizeHandle\n          orientation=\"horizontal\"\n          value={state.bottomHeight}\n          min={pane.minHeight ?? 96}\n          max={pane.maxHeight ?? 640}\n          pointerFactor={-1}\n          label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n          testId=\"workspace-resize-bottom\"\n          className=\"top-0\"\n          onChange={(bottomHeight) =>\n            update((current) => ({ ...current, bottomHeight }))\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/lib/breakpoints.cjs

@@ -0,0 +1,102 @@
+// src/lib/breakpoints.ts
+/**
+* The one breakpoint scale for the library: Tailwind's default screens plus the
+* preset's `3xl`. Components that branch in JS (`useMediaQuery`) must phrase
+* their query through `belowBreakpoint` so the JS switch lands on the same pixel
+* as the `sm:`/`md:` classes that style the other side of it.
+*/
+var BREAKPOINTS = {
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280,
+	"2xl": 1536,
+	"3xl": 1920
+};
+/** Matches viewports narrower than `bp` — the complement of Tailwind's `bp:` prefix. */
+function belowBreakpoint(bp) {
+	return `(max-width: ${BREAKPOINTS[bp] - 1}px)`;
+}
+/**
+* Viewports worth checking a layout at, smallest first. Each sits on a side of a
+* breakpoint that real devices land on, so sweeping the list exercises every
+* branch: 320 (smallest supported phone), 390 (current iPhone), 768 (tablet
+* portrait, exactly `md`), 844×390 (phone landscape: `md` width, phone height),
+* 1024 (tablet landscape / small laptop, exactly `lg`), then desktop widths.
+* Storybook's viewport toolbar, the kitchen-sink sweep and the e2e overflow
+* check all read this list.
+*/
+var VIEWPORT_PRESETS = [
+	{
+		id: "phone-sm",
+		label: "Phone S",
+		width: 320,
+		height: 568,
+		kind: "phone"
+	},
+	{
+		id: "phone",
+		label: "Phone",
+		width: 390,
+		height: 844,
+		kind: "phone"
+	},
+	{
+		id: "phone-lg",
+		label: "Phone L",
+		width: 430,
+		height: 932,
+		kind: "phone"
+	},
+	{
+		id: "tablet",
+		label: "Tablet",
+		width: 768,
+		height: 1024,
+		kind: "tablet"
+	},
+	{
+		id: "phone-landscape",
+		label: "Phone landscape",
+		width: 844,
+		height: 390,
+		kind: "phone"
+	},
+	{
+		id: "tablet-landscape",
+		label: "Tablet landscape",
+		width: 1024,
+		height: 768,
+		kind: "tablet"
+	},
+	{
+		id: "laptop",
+		label: "Laptop",
+		width: 1280,
+		height: 800,
+		kind: "desktop"
+	},
+	{
+		id: "desktop",
+		label: "Desktop",
+		width: 1440,
+		height: 900,
+		kind: "desktop"
+	},
+	{
+		id: "wide",
+		label: "Wide",
+		width: 1920,
+		height: 1080,
+		kind: "desktop"
+	}
+];
+function findViewportPreset(id) {
+	return VIEWPORT_PRESETS.find((preset) => preset.id === id);
+}
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.VIEWPORT_PRESETS = VIEWPORT_PRESETS;
+exports.belowBreakpoint = belowBreakpoint;
+exports.findViewportPreset = findViewportPreset;
+
+//# sourceMappingURL=breakpoints.cjs.map

package/dist/lib/breakpoints.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.cjs","names":[],"sources":["../../src/lib/breakpoints.ts"],"sourcesContent":["/**\n * The one breakpoint scale for the library: Tailwind's default screens plus the\n * preset's `3xl`. Components that branch in JS (`useMediaQuery`) must phrase\n * their query through `belowBreakpoint` so the JS switch lands on the same pixel\n * as the `sm:`/`md:` classes that style the other side of it.\n */\nexport const BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  \"2xl\": 1536,\n  \"3xl\": 1920,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/** Matches viewports narrower than `bp` — the complement of Tailwind's `bp:` prefix. */\nexport function belowBreakpoint(bp: Breakpoint): string {\n  return `(max-width: ${BREAKPOINTS[bp] - 1}px)`;\n}\n\nexport type ViewportPreset = {\n  id: string;\n  label: string;\n  width: number;\n  height: number;\n  kind: \"phone\" | \"tablet\" | \"desktop\";\n};\n\n/**\n * Viewports worth checking a layout at, smallest first. Each sits on a side of a\n * breakpoint that real devices land on, so sweeping the list exercises every\n * branch: 320 (smallest supported phone), 390 (current iPhone), 768 (tablet\n * portrait, exactly `md`), 844×390 (phone landscape: `md` width, phone height),\n * 1024 (tablet landscape / small laptop, exactly `lg`), then desktop widths.\n * Storybook's viewport toolbar, the kitchen-sink sweep and the e2e overflow\n * check all read this list.\n */\nexport const VIEWPORT_PRESETS: readonly ViewportPreset[] = [\n  { id: \"phone-sm\", label: \"Phone S\", width: 320, height: 568, kind: \"phone\" },\n  { id: \"phone\", label: \"Phone\", width: 390, height: 844, kind: \"phone\" },\n  { id: \"phone-lg\", label: \"Phone L\", width: 430, height: 932, kind: \"phone\" },\n  { id: \"tablet\", label: \"Tablet\", width: 768, height: 1024, kind: \"tablet\" },\n  { id: \"phone-landscape\", label: \"Phone landscape\", width: 844, height: 390, kind: \"phone\" },\n  { id: \"tablet-landscape\", label: \"Tablet landscape\", width: 1024, height: 768, kind: \"tablet\" },\n  { id: \"laptop\", label: \"Laptop\", width: 1280, height: 800, kind: \"desktop\" },\n  { id: \"desktop\", label: \"Desktop\", width: 1440, height: 900, kind: \"desktop\" },\n  { id: \"wide\", label: \"Wide\", width: 1920, height: 1080, kind: \"desktop\" },\n];\n\nexport function findViewportPreset(id: string | null | undefined): ViewportPreset | undefined {\n  return VIEWPORT_PRESETS.find((preset) => preset.id === id);\n}\n"],"mappings":";;;;;;;AAMA,IAAa,cAAc;CACzB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;AACT;;AAKA,SAAgB,gBAAgB,IAAwB;CACtD,OAAO,eAAe,YAAY,MAAM,EAAE;AAC5C;;;;;;;;;;AAmBA,IAAa,mBAA8C;CACzD;EAAE,IAAI;EAAY,OAAO;EAAW,OAAO;EAAK,QAAQ;EAAK,MAAM;CAAQ;CAC3E;EAAE,IAAI;EAAS,OAAO;EAAS,OAAO;EAAK,QAAQ;EAAK,MAAM;CAAQ;CACtE;EAAE,IAAI;EAAY,OAAO;EAAW,OAAO;EAAK,QAAQ;EAAK,MAAM;CAAQ;CAC3E;EAAE,IAAI;EAAU,OAAO;EAAU,OAAO;EAAK,QAAQ;EAAM,MAAM;CAAS;CAC1E;EAAE,IAAI;EAAmB,OAAO;EAAmB,OAAO;EAAK,QAAQ;EAAK,MAAM;CAAQ;CAC1F;EAAE,IAAI;EAAoB,OAAO;EAAoB,OAAO;EAAM,QAAQ;EAAK,MAAM;CAAS;CAC9F;EAAE,IAAI;EAAU,OAAO;EAAU,OAAO;EAAM,QAAQ;EAAK,MAAM;CAAU;CAC3E;EAAE,IAAI;EAAW,OAAO;EAAW,OAAO;EAAM,QAAQ;EAAK,MAAM;CAAU;CAC7E;EAAE,IAAI;EAAQ,OAAO;EAAQ,OAAO;EAAM,QAAQ;EAAM,MAAM;CAAU;AAC1E;AAEA,SAAgB,mBAAmB,IAA2D;CAC5F,OAAO,iBAAiB,MAAM,WAAW,OAAO,OAAO,EAAE;AAC3D"}

package/dist/lib/breakpoints.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The one breakpoint scale for the library: Tailwind's default screens plus the
+ * preset's `3xl`. Components that branch in JS (`useMediaQuery`) must phrase
+ * their query through `belowBreakpoint` so the JS switch lands on the same pixel
+ * as the `sm:`/`md:` classes that style the other side of it.
+ */
+export declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1536;
+    readonly "3xl": 1920;
+};
+export type Breakpoint = keyof typeof BREAKPOINTS;
+/** Matches viewports narrower than `bp` — the complement of Tailwind's `bp:` prefix. */
+export declare function belowBreakpoint(bp: Breakpoint): string;
+export type ViewportPreset = {
+    id: string;
+    label: string;
+    width: number;
+    height: number;
+    kind: "phone" | "tablet" | "desktop";
+};
+/**
+ * Viewports worth checking a layout at, smallest first. Each sits on a side of a
+ * breakpoint that real devices land on, so sweeping the list exercises every
+ * branch: 320 (smallest supported phone), 390 (current iPhone), 768 (tablet
+ * portrait, exactly `md`), 844×390 (phone landscape: `md` width, phone height),
+ * 1024 (tablet landscape / small laptop, exactly `lg`), then desktop widths.
+ * Storybook's viewport toolbar, the kitchen-sink sweep and the e2e overflow
+ * check all read this list.
+ */
+export declare const VIEWPORT_PRESETS: readonly ViewportPreset[];
+export declare function findViewportPreset(id: string | null | undefined): ViewportPreset | undefined;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/lib/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../src/lib/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD,wFAAwF;AACxF,wBAAgB,eAAe,CAAC,EAAE,EAAE,UAAU,GAAG,MAAM,CAEtD;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,SAAS,cAAc,EAUrD,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CAE5F"}