@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/recipes/frame/app-shell.d.ts

@@ -0,0 +1,37 @@
+import { HeaderConfig } from "./header.js";
+import { SidebarConfig } from "./sidebar/sidebar.js";
+import { useSidebarWidth } from "./sidebar/width.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "./sidebar/blocks.js";
+import "./sidebar/index.js";
+import { CSSProperties, ReactNode } from "react";
+//#region src/recipes/frame/app-shell.d.ts
+/**
+ * An app's whole screen: an optional sidebar, an optional header, and the
+ * page, which scrolls under the header. Mobile first: on a phone the page
+ * moves aside and shrinks to show the sidebar, under a finger on a touch
+ * screen; on a wide screen the sidebar sits beside the page, which is a card.
+ * One open state serves every size. Without a sidebar the page fills the
+ * screen, and the header's actions hold what the sidebar's footer would.
+ */
+export declare function AppShell(props: {
+  readonly sidebar?: SidebarConfig;
+  readonly header?: HeaderConfig;
+  /** Where a swipe that opens the sidebar may start, on a touch screen. */
+  readonly swipe?: 'anywhere' | 'edge' | 'off';
+  /** Drawn outside the moving page, told whether the sidebar is open. */
+  readonly statusBar?: (open: boolean) => ReactNode;
+  readonly className?: string;
+  readonly style?: CSSProperties;
+  /** The page. */
+  readonly children: ReactNode;
+}): import("react").JSX.Element;
+/** Whether the sidebar is open, to open or shut it, and whether it's a phone. */
+export declare function useAppShell(): {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+  isMobile: boolean;
+};
+//#endregion
+export { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebarWidth };
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/recipes/frame/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","names":[],"sources":["../../../src/recipes/frame/app-shell.tsx"],"mappings":";;;;;;;;;;;;;;;wBA8BgB,SAAS;WACd,UAAU;WACV,SAAS;;WAET;;WAEA,aAAa,kBAAkB;WAC/B;WACA,QAAQ;;WAER,UAAU;oBACpB,IAAA;;wBA6Be"}

package/dist/recipes/frame/app-shell.js

@@ -0,0 +1,46 @@
+import { Frame, useFrame } from "./frame/frame.js";
+import { Header } from "./header.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "./sidebar/blocks.js";
+import { SidebarContents } from "./sidebar/sidebar.js";
+import { useSidebarWidth } from "./sidebar/width.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+//#region src/recipes/frame/app-shell.tsx
+/**
+* An app's whole screen: an optional sidebar, an optional header, and the
+* page, which scrolls under the header. Mobile first: on a phone the page
+* moves aside and shrinks to show the sidebar, under a finger on a touch
+* screen; on a wide screen the sidebar sits beside the page, which is a card.
+* One open state serves every size. Without a sidebar the page fills the
+* screen, and the header's actions hold what the sidebar's footer would.
+*/
+function AppShell(props) {
+	const { sidebar, header } = props;
+	return /* @__PURE__ */ jsxs(Frame, {
+		sidebar: sidebar === void 0 ? void 0 : /* @__PURE__ */ jsx(SidebarContents, { config: sidebar }),
+		sidebarWidth: sidebar?.width,
+		swipe: props.swipe ?? "anywhere",
+		statusBar: props.statusBar,
+		className: props.className,
+		style: props.style,
+		children: [header === void 0 ? null : /* @__PURE__ */ jsx(Header, { config: header }), /* @__PURE__ */ jsx("div", {
+			"data-slot": "app-shell-scroller",
+			className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain", header === void 0 && "pt-[env(safe-area-inset-top)]"),
+			children: props.children
+		})]
+	});
+}
+/** Whether the sidebar is open, to open or shut it, and whether it's a phone. */
+function useAppShell() {
+	const { open, setOpen, toggle, isMobile } = useFrame();
+	return {
+		open,
+		setOpen,
+		toggle,
+		isMobile
+	};
+}
+//#endregion
+export { AppShell, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useAppShell, useSidebarWidth };
+
+//# sourceMappingURL=app-shell.js.map

package/dist/recipes/frame/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","names":[],"sources":["../../../src/recipes/frame/app-shell.tsx"],"sourcesContent":["import { cn } from 'cn';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { Frame, useFrame } from './frame/index.ts';\nimport { Header, type HeaderConfig } from './header.tsx';\nimport { type SidebarConfig, SidebarContents } from './sidebar/index.ts';\n\nexport { useSidebarWidth } from './sidebar/index.ts';\n\nexport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from './sidebar/index.ts';\n\n/**\n * An app's whole screen: an optional sidebar, an optional header, and the\n * page, which scrolls under the header. Mobile first: on a phone the page\n * moves aside and shrinks to show the sidebar, under a finger on a touch\n * screen; on a wide screen the sidebar sits beside the page, which is a card.\n * One open state serves every size. Without a sidebar the page fills the\n * screen, and the header's actions hold what the sidebar's footer would.\n */\nexport function AppShell(props: {\n  readonly sidebar?: SidebarConfig;\n  readonly header?: HeaderConfig;\n  /** Where a swipe that opens the sidebar may start, on a touch screen. */\n  readonly swipe?: 'anywhere' | 'edge' | 'off';\n  /** Drawn outside the moving page, told whether the sidebar is open. */\n  readonly statusBar?: (open: boolean) => ReactNode;\n  readonly className?: string;\n  readonly style?: CSSProperties;\n  /** The page. */\n  readonly children: ReactNode;\n}) {\n  const { sidebar, header } = props;\n  return (\n    <Frame\n      sidebar={\n        sidebar === undefined ? undefined : <SidebarContents config={sidebar} />\n      }\n      sidebarWidth={sidebar?.width}\n      swipe={props.swipe ?? 'anywhere'}\n      statusBar={props.statusBar}\n      className={props.className}\n      style={props.style}\n    >\n      {header === undefined ? null : <Header config={header} />}\n      <div\n        data-slot=\"app-shell-scroller\"\n        className={cn(\n          'min-h-0 flex-1 overflow-y-auto overscroll-contain',\n          // Without a header, the page itself keeps clear of the status bar.\n          header === undefined && 'pt-[env(safe-area-inset-top)]',\n        )}\n      >\n        {props.children}\n      </div>\n    </Frame>\n  );\n}\n\n/** Whether the sidebar is open, to open or shut it, and whether it's a phone. */\nexport function useAppShell() {\n  const { open, setOpen, toggle, isMobile } = useFrame();\n  return { open, setOpen, toggle, isMobile };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,SAAgB,SAAS,OAWtB;CACD,MAAM,EAAE,SAAS,WAAW;CAC5B,OACE,qBAAC,OAAD;EACE,SACE,YAAY,KAAA,IAAY,KAAA,IAAY,oBAAC,iBAAD,EAAiB,QAAQ,QAAU,CAAA;EAEzE,cAAc,SAAS;EACvB,OAAO,MAAM,SAAS;EACtB,WAAW,MAAM;EACjB,WAAW,MAAM;EACjB,OAAO,MAAM;EARf,UAAA,CAUG,WAAW,KAAA,IAAY,OAAO,oBAAC,QAAD,EAAQ,QAAQ,OAAS,CAAA,GACxD,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,qDAEA,WAAW,KAAA,KAAa,+BAC1B;GAEC,UAAA,MAAM;EACJ,CAAA,CACA;;AAEX;;AAGA,SAAgB,cAAc;CAC5B,MAAM,EAAE,MAAM,SAAS,QAAQ,aAAa,SAAS;CACrD,OAAO;EAAE;EAAM;EAAS;EAAQ;CAAS;AAC3C"}

package/dist/recipes/frame/frame/frame.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties, ReactNode } from "react";
+//#region src/recipes/frame/frame/frame.d.ts
+interface FrameState {
+  readonly open: boolean;
+  readonly setOpen: (open: boolean) => void;
+  readonly toggle: () => void;
+  readonly isMobile: boolean;
+  readonly hasSidebar: boolean;
+}
+/** The shell's state, for anything inside it. */
+export declare function useFrame(): FrameState;
+interface FrameProps {
+  /** What the sidebar holds; without it the page fills the screen alone. */
+  readonly sidebar?: ReactNode;
+  /** The page. */
+  readonly children: ReactNode;
+  readonly swipe: 'anywhere' | 'edge' | 'off';
+  /** The sidebar's width on a wide screen, in px. */
+  readonly sidebarWidth?: number;
+  /** Drawn outside the moving page, told whether the sidebar is open. */
+  readonly statusBar?: (open: boolean) => ReactNode;
+  readonly className?: string;
+  readonly style?: CSSProperties;
+}
+/**
+ * The screen: a sidebar under the page. On a phone the page moves aside,
+ * shrinks and dims to show it, under a finger or a spring; on a wide screen
+ * it sits beside the page, a card. Crossing between the two morphs.
+ */
+export declare function Frame(props: FrameProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=frame.d.ts.map

package/dist/recipes/frame/frame/frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.d.ts","names":[],"sources":["../../../../src/recipes/frame/frame/frame.tsx"],"mappings":";;UAuBU;WACC;WACA,UAAU;WACV;WACA;WACA;;;wBAMK,YAAY;UAOlB;;WAEC,UAAU;;WAEV,UAAU;WACV;;WAEA;;WAEA,aAAa,kBAAkB;WAC/B;WACA,QAAQ;;;;;;;wBAQH,MAAM,OAAO,6BAAU,IAAA"}

package/dist/recipes/frame/frame/frame.js

@@ -0,0 +1,135 @@
+import { GestureProvider, GestureZone } from "../../../input/gesture/zones/zone/zone.js";
+import { useIsMobile } from "../../../components/hooks/use-mobile.js";
+import { DERIVED, FIRST_PAINT, PAGE_SIZE, PAGE_STYLE, SCRIM, SIDEBAR_STYLE } from "./geometry.js";
+import { useMobileProgress, useOpenProgress } from "./motion.js";
+import { useHydrated, useOpenState } from "./state.js";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { motion } from "motion/react";
+//#region src/recipes/frame/frame/frame.tsx
+const FrameContext = createContext(null);
+/** The shell's state, for anything inside it. */
+function useFrame() {
+	const frame = useContext(FrameContext);
+	if (frame === null) throw new Error("useAppShell must be used in an AppShell");
+	return frame;
+}
+/**
+* The screen: a sidebar under the page. On a phone the page moves aside,
+* shrinks and dims to show it, under a finger or a spring; on a wide screen
+* it sits beside the page, a card. Crossing between the two morphs.
+*/
+function Frame(props) {
+	const root = cn("h-dvh", props.className);
+	if (props.sidebar === void 0) return /* @__PURE__ */ jsx("div", {
+		className: root,
+		style: props.style,
+		children: /* @__PURE__ */ jsx(Page, {
+			statusBar: props.statusBar,
+			children: props.children
+		})
+	});
+	return /* @__PURE__ */ jsx(GestureProvider, { children: /* @__PURE__ */ jsx(GestureZone, {
+		className: root,
+		style: props.style,
+		children: /* @__PURE__ */ jsx(WithSidebar, {
+			...props,
+			sidebar: props.sidebar
+		})
+	}) });
+}
+const noop = () => {};
+function Page(props) {
+	const isMobile = useIsMobile();
+	const state = useMemo(() => ({
+		open: false,
+		setOpen: noop,
+		toggle: noop,
+		isMobile,
+		hasSidebar: false
+	}), [isMobile]);
+	return /* @__PURE__ */ jsxs(FrameContext.Provider, {
+		value: state,
+		children: [props.statusBar?.(false), /* @__PURE__ */ jsx("main", {
+			"data-slot": "app-shell-page",
+			className: "flex h-full flex-col bg-background",
+			children: props.children
+		})]
+	});
+}
+function WithSidebar(props) {
+	const isMobile = useIsMobile();
+	const { open, shown, setOpen } = useOpenState();
+	const toggle = useCallback(() => setOpen(!open), [open, setOpen]);
+	const values = {
+		"--sidebar-open": useOpenProgress({
+			open,
+			setOpen,
+			swipe: props.swipe
+		}),
+		"--sidebar-mobile": useMobileProgress()
+	};
+	const hydrated = useHydrated();
+	const state = useMemo(() => ({
+		open: shown,
+		setOpen,
+		toggle,
+		isMobile,
+		hasSidebar: true
+	}), [
+		shown,
+		setOpen,
+		toggle,
+		isMobile
+	]);
+	const covered = isMobile && shown;
+	return /* @__PURE__ */ jsx(FrameContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "app-shell",
+			"data-state": shown ? "open" : "closed",
+			className: cn("relative flex size-full overflow-hidden bg-sidebar", FIRST_PAINT),
+			style: {
+				"--sidebar-width": props.sidebarWidth === void 0 ? "16rem" : `${props.sidebarWidth}px`,
+				"--sidebar-width-mobile": "18rem"
+			},
+			onClick: (event) => {
+				if (covered && event.target === event.currentTarget) setOpen(false);
+			},
+			onKeyDown: (event) => {
+				if (covered && event.key === "Escape") setOpen(false);
+			},
+			children: [props.statusBar?.(shown), /* @__PURE__ */ jsxs(motion.div, {
+				className: "contents",
+				style: {
+					...DERIVED,
+					...hydrated ? values : {}
+				},
+				children: [/* @__PURE__ */ jsxs("aside", {
+					inert: !shown,
+					"data-slot": "app-shell-sidebar",
+					style: SIDEBAR_STYLE,
+					className: "absolute inset-y-0 left-0 z-0 flex w-(--sidebar-width-mobile) flex-col bg-sidebar pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] text-sidebar-foreground md:w-(--sidebar-width) md:py-2",
+					children: [props.swipe !== "off" && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "absolute inset-y-0 left-0 z-10 hidden w-6 pointer-coarse:block"
+					}), props.sidebar]
+				}), /* @__PURE__ */ jsxs("main", {
+					inert: covered,
+					"data-slot": "app-shell-page",
+					style: PAGE_STYLE,
+					className: cn("relative z-10 flex flex-col overflow-hidden bg-background shadow-sm", PAGE_SIZE),
+					children: [props.children, /* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: cn("pointer-events-none absolute inset-0 z-50 bg-black", SCRIM)
+					})]
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { Frame, useFrame };
+
+//# sourceMappingURL=frame.js.map

package/dist/recipes/frame/frame/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.js","names":[],"sources":["../../../../src/recipes/frame/frame/frame.tsx"],"sourcesContent":["import { GestureProvider, GestureZone } from '../../../input/index.ts';\nimport { cn } from 'cn';\nimport { motion, type MotionStyle } from 'motion/react';\nimport {\n  createContext,\n  type CSSProperties,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react';\nimport { useIsMobile } from '#hooks/use-mobile';\nimport {\n  DERIVED,\n  FIRST_PAINT,\n  PAGE_SIZE,\n  PAGE_STYLE,\n  SCRIM,\n  SIDEBAR_STYLE,\n} from './geometry.ts';\nimport { useMobileProgress, useOpenProgress } from './motion.ts';\nimport { useHydrated, useOpenState } from './state.ts';\n\ninterface FrameState {\n  readonly open: boolean;\n  readonly setOpen: (open: boolean) => void;\n  readonly toggle: () => void;\n  readonly isMobile: boolean;\n  readonly hasSidebar: boolean;\n}\n\nconst FrameContext = createContext<FrameState | null>(null);\n\n/** The shell's state, for anything inside it. */\nexport function useFrame(): FrameState {\n  const frame = useContext(FrameContext);\n  if (frame === null)\n    throw new Error('useAppShell must be used in an AppShell');\n  return frame;\n}\n\ninterface FrameProps {\n  /** What the sidebar holds; without it the page fills the screen alone. */\n  readonly sidebar?: ReactNode;\n  /** The page. */\n  readonly children: ReactNode;\n  readonly swipe: 'anywhere' | 'edge' | 'off';\n  /** The sidebar's width on a wide screen, in px. */\n  readonly sidebarWidth?: number;\n  /** Drawn outside the moving page, told whether the sidebar is open. */\n  readonly statusBar?: (open: boolean) => ReactNode;\n  readonly className?: string;\n  readonly style?: CSSProperties;\n}\n\n/**\n * The screen: a sidebar under the page. On a phone the page moves aside,\n * shrinks and dims to show it, under a finger or a spring; on a wide screen\n * it sits beside the page, a card. Crossing between the two morphs.\n */\nexport function Frame(props: FrameProps) {\n  const root = cn('h-dvh', props.className);\n  if (props.sidebar === undefined) {\n    return (\n      <div className={root} style={props.style}>\n        <Page statusBar={props.statusBar}>{props.children}</Page>\n      </div>\n    );\n  }\n  // A swipe needs a Gesture Zone; it takes only the swipes the sidebar wants.\n  return (\n    <GestureProvider>\n      <GestureZone className={root} style={props.style}>\n        <WithSidebar {...props} sidebar={props.sidebar} />\n      </GestureZone>\n    </GestureProvider>\n  );\n}\n\nconst noop = () => {};\n\nfunction Page(props: {\n  readonly statusBar: FrameProps['statusBar'];\n  readonly children: ReactNode;\n}) {\n  const isMobile = useIsMobile();\n  const state = useMemo<FrameState>(\n    () => ({\n      open: false,\n      setOpen: noop,\n      toggle: noop,\n      isMobile,\n      hasSidebar: false,\n    }),\n    [isMobile],\n  );\n  return (\n    <FrameContext.Provider value={state}>\n      {props.statusBar?.(false)}\n      <main\n        data-slot=\"app-shell-page\"\n        className=\"flex h-full flex-col bg-background\"\n      >\n        {props.children}\n      </main>\n    </FrameContext.Provider>\n  );\n}\n\nfunction WithSidebar(props: FrameProps & { readonly sidebar: ReactNode }) {\n  const isMobile = useIsMobile();\n  const { open, shown, setOpen } = useOpenState();\n  const toggle = useCallback(() => setOpen(!open), [open, setOpen]);\n\n  // The two values everything is drawn from. The server can't know either,\n  // so until hydration ends the classes give both by the breakpoint.\n  const values = {\n    '--sidebar-open': useOpenProgress({ open, setOpen, swipe: props.swipe }),\n    '--sidebar-mobile': useMobileProgress(),\n  };\n  const hydrated = useHydrated();\n\n  const state = useMemo<FrameState>(\n    () => ({ open: shown, setOpen, toggle, isMobile, hasSidebar: true }),\n    [shown, setOpen, toggle, isMobile],\n  );\n  // On a phone the open sidebar covers the page, which is inert till it shuts.\n  const covered = isMobile && shown;\n\n  return (\n    <FrameContext.Provider value={state}>\n      <div\n        data-slot=\"app-shell\"\n        data-state={shown ? 'open' : 'closed'}\n        className={cn(\n          'relative flex size-full overflow-hidden bg-sidebar',\n          FIRST_PAINT,\n        )}\n        style={\n          {\n            '--sidebar-width':\n              props.sidebarWidth === undefined\n                ? '16rem'\n                : `${props.sidebarWidth}px`,\n            '--sidebar-width-mobile': '18rem',\n          } as CSSProperties\n        }\n        // The page is inert while covered, so a tap on it lands here: that\n        // shuts the sidebar, as a tap on a scrim would.\n        onClick={(event) => {\n          if (covered && event.target === event.currentTarget) setOpen(false);\n        }}\n        onKeyDown={(event) => {\n          if (covered && event.key === 'Escape') setOpen(false);\n        }}\n      >\n        {props.statusBar?.(shown)}\n        {/* No box of its own: it carries the values to what it holds. */}\n        <motion.div\n          className=\"contents\"\n          style={{ ...DERIVED, ...(hydrated ? values : {}) } as MotionStyle}\n        >\n          {/* Absolute, not fixed: a fixed element down the whole screen stops\n              an installed iOS app's status bar following theme switches. */}\n          <aside\n            inert={!shown}\n            data-slot=\"app-shell-sidebar\"\n            style={SIDEBAR_STYLE}\n            className=\"absolute inset-y-0 left-0 z-0 flex w-(--sidebar-width-mobile) flex-col bg-sidebar pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] text-sidebar-foreground md:w-(--sidebar-width) md:py-2\"\n          >\n            {/* On touch, use-gesture keeps the first 24px from the edge from\n                the browser's back swipe, but not on a link or button. This\n                strip covers the items there, so the swipe never reaches one. */}\n            {props.swipe !== 'off' && (\n              <div\n                aria-hidden=\"true\"\n                className=\"absolute inset-y-0 left-0 z-10 hidden w-6 pointer-coarse:block\"\n              />\n            )}\n            {props.sidebar}\n          </aside>\n          <main\n            inert={covered}\n            data-slot=\"app-shell-page\"\n            style={PAGE_STYLE}\n            className={cn(\n              'relative z-10 flex flex-col overflow-hidden bg-background shadow-sm',\n              PAGE_SIZE,\n            )}\n          >\n            {props.children}\n            <div\n              aria-hidden=\"true\"\n              className={cn(\n                'pointer-events-none absolute inset-0 z-50 bg-black',\n                SCRIM,\n              )}\n            />\n          </main>\n        </motion.div>\n      </div>\n    </FrameContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;AA+BA,MAAM,eAAe,cAAiC,IAAI;;AAG1D,SAAgB,WAAuB;CACrC,MAAM,QAAQ,WAAW,YAAY;CACrC,IAAI,UAAU,MACZ,MAAM,IAAI,MAAM,yCAAyC;CAC3D,OAAO;AACT;;;;;;AAqBA,SAAgB,MAAM,OAAmB;CACvC,MAAM,OAAO,GAAG,SAAS,MAAM,SAAS;CACxC,IAAI,MAAM,YAAY,KAAA,GACpB,OACE,oBAAC,OAAD;EAAK,WAAW;EAAM,OAAO,MAAM;EACjC,UAAA,oBAAC,MAAD;GAAM,WAAW,MAAM;GAAY,UAAA,MAAM;EAAe,CAAA;CACrD,CAAA;CAIT,OACE,oBAAC,iBAAD,EAAA,UACE,oBAAC,aAAD;EAAa,WAAW;EAAM,OAAO,MAAM;EACzC,UAAA,oBAAC,aAAD;GAAa,GAAI;GAAO,SAAS,MAAM;EAAU,CAAA;CACtC,CAAA,EACE,CAAA;AAErB;AAEA,MAAM,aAAa,CAAC;AAEpB,SAAS,KAAK,OAGX;CACD,MAAM,WAAW,YAAY;CAC7B,MAAM,QAAQ,eACL;EACL,MAAM;EACN,SAAS;EACT,QAAQ;EACR;EACA,YAAY;CACd,IACA,CAAC,QAAQ,CACX;CACA,OACE,qBAAC,aAAa,UAAd;EAAuB,OAAO;EAA9B,UAAA,CACG,MAAM,YAAY,KAAK,GACxB,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;GAET,UAAA,MAAM;EACH,CAAA,CACe;;AAE3B;AAEA,SAAS,YAAY,OAAqD;CACxE,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,OAAO,YAAY,aAAa;CAC9C,MAAM,SAAS,kBAAkB,QAAQ,CAAC,IAAI,GAAG,CAAC,MAAM,OAAO,CAAC;CAIhE,MAAM,SAAS;EACb,kBAAkB,gBAAgB;GAAE;GAAM;GAAS,OAAO,MAAM;EAAM,CAAC;EACvE,oBAAoB,kBAAkB;CACxC;CACA,MAAM,WAAW,YAAY;CAE7B,MAAM,QAAQ,eACL;EAAE,MAAM;EAAO;EAAS;EAAQ;EAAU,YAAY;CAAK,IAClE;EAAC;EAAO;EAAS;EAAQ;CAAQ,CACnC;CAEA,MAAM,UAAU,YAAY;CAE5B,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAC5B,UAAA,qBAAC,OAAD;GACE,aAAU;GACV,cAAY,QAAQ,SAAS;GAC7B,WAAW,GACT,sDACA,WACF;GACA,OACE;IACE,mBACE,MAAM,iBAAiB,KAAA,IACnB,UACA,GAAG,MAAM,aAAa;IAC5B,0BAA0B;GAC5B;GAIF,UAAU,UAAU;IAClB,IAAI,WAAW,MAAM,WAAW,MAAM,eAAe,QAAQ,KAAK;GACpE;GACA,YAAY,UAAU;IACpB,IAAI,WAAW,MAAM,QAAQ,UAAU,QAAQ,KAAK;GACtD;GAvBF,UAAA,CAyBG,MAAM,YAAY,KAAK,GAExB,qBAAC,OAAO,KAAR;IACE,WAAU;IACV,OAAO;KAAE,GAAG;KAAS,GAAI,WAAW,SAAS,CAAC;IAAG;IAFnD,UAAA,CAME,qBAAC,SAAD;KACE,OAAO,CAAC;KACR,aAAU;KACV,OAAO;KACP,WAAU;KAJZ,UAAA,CASG,MAAM,UAAU,SACf,oBAAC,OAAD;MACE,eAAY;MACZ,WAAU;KACX,CAAA,GAEF,MAAM,OACF;IACP,CAAA,GAAA,qBAAC,QAAD;KACE,OAAO;KACP,aAAU;KACV,OAAO;KACP,WAAW,GACT,uEACA,SACF;KAPF,UAAA,CASG,MAAM,UACP,oBAAC,OAAD;MACE,eAAY;MACZ,WAAW,GACT,sDACA,KACF;KACD,CAAA,CACG;IACI,CAAA,CAAA;GACT,CAAA,CAAA;;CACgB,CAAA;AAE3B"}

package/dist/recipes/frame/frame/geometry.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from "react";
+//#region src/recipes/frame/frame/geometry.d.ts
+/** The values the shapes below read, derived from the two. */
+export declare const DERIVED: Record<string, string>;
+/**
+ * The two values before the motion takes over, by the breakpoint: a phone
+ * starts shut, a wide screen as the markup says.
+ */
+export declare const FIRST_PAINT = "[--sidebar-mobile:1] [--sidebar-open:0] md:[--sidebar-mobile:0] md:data-[state=open]:[--sidebar-open:1]";
+/** The sidebar, under the page, sliding in and fading up as it opens. */
+export declare const SIDEBAR_STYLE: CSSProperties;
+/** The page: moved aside by the sidebar, lifted on a phone, a card when wide. */
+export declare const PAGE_STYLE: CSSProperties;
+/**
+ * The page's size: a phone's is the whole screen, pushed aside; a wide one's
+ * is what the sidebar leaves, less the card's margin.
+ */
+export declare const PAGE_SIZE = "w-full md:h-[calc(100%-1rem)] md:w-[calc(100%-var(--sidebar-open)*var(--sidebar-width)-(2-var(--sidebar-open))*0.5rem)]";
+/** The dim over the page, by how lifted it is. */
+export declare const SCRIM = "opacity-[calc(var(--sidebar-lift)*0.3)] dark:opacity-[calc(var(--sidebar-lift)*0.5)]";
+//#endregion
+//# sourceMappingURL=geometry.d.ts.map

package/dist/recipes/frame/frame/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","names":[],"sources":["../../../../src/recipes/frame/frame/geometry.ts"],"mappings":";;;qBAea,SAAS;;;;;qBAeT;;qBAIA,eAAe;;qBAMf,YAAY;;;;;qBAcZ;;qBAIA"}

package/dist/recipes/frame/frame/geometry.js

@@ -0,0 +1,36 @@
+//#region src/recipes/frame/frame/geometry.ts
+/** The values the shapes below read, derived from the two. */
+const DERIVED = {
+	"--sidebar-lift": "calc(var(--sidebar-open) * var(--sidebar-mobile))",
+	"--sidebar-push": "calc(var(--sidebar-width-mobile) * var(--sidebar-mobile) + var(--sidebar-width) * (1 - var(--sidebar-mobile)))",
+	"--sidebar-gap": "calc(0.5rem * (1 - var(--sidebar-mobile)))"
+};
+/**
+* The two values before the motion takes over, by the breakpoint: a phone
+* starts shut, a wide screen as the markup says.
+*/
+const FIRST_PAINT = "[--sidebar-mobile:1] [--sidebar-open:0] md:[--sidebar-mobile:0] md:data-[state=open]:[--sidebar-open:1]";
+/** The sidebar, under the page, sliding in and fading up as it opens. */
+const SIDEBAR_STYLE = {
+	translate: "calc((var(--sidebar-open) - 1) * 20%)",
+	opacity: "var(--sidebar-open)"
+};
+/** The page: moved aside by the sidebar, lifted on a phone, a card when wide. */
+const PAGE_STYLE = {
+	flex: "none",
+	translate: "calc(var(--sidebar-open) * var(--sidebar-push) + (1 - var(--sidebar-open)) * var(--sidebar-gap)) var(--sidebar-gap)",
+	scale: "calc(1 - 0.08 * var(--sidebar-lift))",
+	transformOrigin: "left center",
+	borderRadius: "calc(var(--sidebar-lift) * 2rem + (1 - var(--sidebar-mobile)) * 0.75rem)"
+};
+/**
+* The page's size: a phone's is the whole screen, pushed aside; a wide one's
+* is what the sidebar leaves, less the card's margin.
+*/
+const PAGE_SIZE = "w-full md:h-[calc(100%-1rem)] md:w-[calc(100%-var(--sidebar-open)*var(--sidebar-width)-(2-var(--sidebar-open))*0.5rem)]";
+/** The dim over the page, by how lifted it is. */
+const SCRIM = "opacity-[calc(var(--sidebar-lift)*0.3)] dark:opacity-[calc(var(--sidebar-lift)*0.5)]";
+//#endregion
+export { DERIVED, FIRST_PAINT, PAGE_SIZE, PAGE_STYLE, SCRIM, SIDEBAR_STYLE };
+
+//# sourceMappingURL=geometry.js.map

package/dist/recipes/frame/frame/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.js","names":[],"sources":["../../../../src/recipes/frame/frame/geometry.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\n/*\n * The shell is drawn from two values, both 0 to 1: `--sidebar-open`, how open\n * the sidebar is, and `--sidebar-mobile`, how much the layout is a phone's.\n * Everything else is a formula of them, so the same formulas swipe the\n * sidebar open on a phone, push the page on a wide screen, and morph one into\n * the other as the screen crosses the breakpoint.\n *\n * They move only what is painted. Sizes follow the breakpoint itself, in the\n * classes, so the page reflows once as the screen crosses it, never while it\n * morphs.\n */\n\n/** The values the shapes below read, derived from the two. */\nexport const DERIVED: Record<string, string> = {\n  // How far the page is lifted off the sidebar, a phone's look: shrunk,\n  // rounded and dimmed. Never on a wide screen.\n  '--sidebar-lift': 'calc(var(--sidebar-open) * var(--sidebar-mobile))',\n  // How far the page moves aside: a phone's sidebar width or a wide screen's.\n  '--sidebar-push':\n    'calc(var(--sidebar-width-mobile) * var(--sidebar-mobile) + var(--sidebar-width) * (1 - var(--sidebar-mobile)))',\n  // The margin round the page, a card on a wide screen.\n  '--sidebar-gap': 'calc(0.5rem * (1 - var(--sidebar-mobile)))',\n};\n\n/**\n * The two values before the motion takes over, by the breakpoint: a phone\n * starts shut, a wide screen as the markup says.\n */\nexport const FIRST_PAINT =\n  '[--sidebar-mobile:1] [--sidebar-open:0] md:[--sidebar-mobile:0] md:data-[state=open]:[--sidebar-open:1]';\n\n/** The sidebar, under the page, sliding in and fading up as it opens. */\nexport const SIDEBAR_STYLE: CSSProperties = {\n  translate: 'calc((var(--sidebar-open) - 1) * 20%)',\n  opacity: 'var(--sidebar-open)',\n};\n\n/** The page: moved aside by the sidebar, lifted on a phone, a card when wide. */\nexport const PAGE_STYLE: CSSProperties = {\n  flex: 'none',\n  translate:\n    'calc(var(--sidebar-open) * var(--sidebar-push) + (1 - var(--sidebar-open)) * var(--sidebar-gap)) var(--sidebar-gap)',\n  scale: 'calc(1 - 0.08 * var(--sidebar-lift))',\n  transformOrigin: 'left center',\n  borderRadius:\n    'calc(var(--sidebar-lift) * 2rem + (1 - var(--sidebar-mobile)) * 0.75rem)',\n};\n\n/**\n * The page's size: a phone's is the whole screen, pushed aside; a wide one's\n * is what the sidebar leaves, less the card's margin.\n */\nexport const PAGE_SIZE =\n  'w-full md:h-[calc(100%-1rem)] md:w-[calc(100%-var(--sidebar-open)*var(--sidebar-width)-(2-var(--sidebar-open))*0.5rem)]';\n\n/** The dim over the page, by how lifted it is. */\nexport const SCRIM =\n  'opacity-[calc(var(--sidebar-lift)*0.3)] dark:opacity-[calc(var(--sidebar-lift)*0.5)]';\n"],"mappings":";;AAeA,MAAa,UAAkC;CAG7C,kBAAkB;CAElB,kBACE;CAEF,iBAAiB;AACnB;;;;;AAMA,MAAa,cACX;;AAGF,MAAa,gBAA+B;CAC1C,WAAW;CACX,SAAS;AACX;;AAGA,MAAa,aAA4B;CACvC,MAAM;CACN,WACE;CACF,OAAO;CACP,iBAAiB;CACjB,cACE;AACJ;;;;;AAMA,MAAa,YACX;;AAGF,MAAa,QACX"}

package/dist/recipes/frame/frame/index.d.ts

@@ -0,0 +1,2 @@
+import { Frame, useFrame } from "./frame.js";
+export { Frame, useFrame };

package/dist/recipes/frame/frame/index.js

@@ -0,0 +1,2 @@
+import { Frame, useFrame } from "./frame.js";
+export { Frame, useFrame };

package/dist/recipes/frame/frame/motion.d.ts

@@ -0,0 +1,20 @@
+import { MotionValue } from "motion/react";
+//#region src/recipes/frame/frame/motion.d.ts
+/**
+ * `open`, 0 shut to 1 open: under a finger on a touch screen, else springing
+ * to the open state as it changes. Swipes open from anywhere, from the left
+ * edge only, or not at all.
+ */
+export declare function useOpenProgress(options: {
+  readonly open: boolean;
+  readonly setOpen: (open: boolean) => void;
+  readonly swipe: 'anywhere' | 'edge' | 'off';
+}): MotionValue<number>;
+/**
+ * `mobile`, 1 on a phone to 0 wider: springing between the two as the screen
+ * crosses the breakpoint, or jumping, for reduced motion. It starts at the
+ * screen's real value.
+ */
+export declare function useMobileProgress(): MotionValue<number>;
+//#endregion
+//# sourceMappingURL=motion.d.ts.map

package/dist/recipes/frame/frame/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","names":[],"sources":["../../../../src/recipes/frame/frame/motion.ts"],"mappings":";;;;;;;wBAmCgB,gBAAgB;WACrB;WACA,UAAU;WACV;IACP;;;;;;wBAiBY,qBAAqB"}

package/dist/recipes/frame/frame/motion.js

@@ -0,0 +1,58 @@
+import { useSidebar } from "../../../input/gesture/patterns/sidebar/use-sidebar.js";
+import { MOBILE_QUERY } from "../../../components/hooks/use-mobile.js";
+import { useCallback, useState, useSyncExternalStore } from "react";
+import { animate, motionValue } from "motion/react";
+//#region src/recipes/frame/frame/motion.ts
+/** How far a phone's sidebar opens, in px: the `18rem` of `--sidebar-width-mobile`. */
+const PHONE_SIDEBAR_WIDTH = 288;
+/** The strip along the left edge that opens it, when swipes open from the edge. */
+const EDGE = 24;
+const TOUCH_QUERY = "(pointer: coarse)";
+const MOBILE_SPRING = {
+	type: "spring",
+	visualDuration: .3,
+	bounce: 0
+};
+const watch = (query, onChange) => {
+	const mql = window.matchMedia(query);
+	mql.addEventListener("change", onChange);
+	return () => mql.removeEventListener("change", onChange);
+};
+function useIsTouch() {
+	return useSyncExternalStore(useCallback((onChange) => watch(TOUCH_QUERY, onChange), []), () => window.matchMedia(TOUCH_QUERY).matches, () => false);
+}
+/**
+* `open`, 0 shut to 1 open: under a finger on a touch screen, else springing
+* to the open state as it changes. Swipes open from anywhere, from the left
+* edge only, or not at all.
+*/
+function useOpenProgress(options) {
+	const touch = useIsTouch();
+	return useSidebar({
+		side: "left",
+		width: PHONE_SIDEBAR_WIDTH,
+		edge: options.swipe === "edge" ? EDGE : void 0,
+		enabled: touch && options.swipe !== "off",
+		open: options.open,
+		onOpenChange: options.setOpen
+	}).progress;
+}
+/**
+* `mobile`, 1 on a phone to 0 wider: springing between the two as the screen
+* crosses the breakpoint, or jumping, for reduced motion. It starts at the
+* screen's real value.
+*/
+function useMobileProgress() {
+	const [value] = useState(() => motionValue(typeof window !== "undefined" && window.matchMedia(MOBILE_QUERY).matches ? 1 : 0));
+	useSyncExternalStore(useCallback((onChange) => watch(MOBILE_QUERY, () => {
+		const next = window.matchMedia(MOBILE_QUERY).matches ? 1 : 0;
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) value.jump(next);
+		else animate(value, next, MOBILE_SPRING);
+		onChange();
+	}), [value]), () => value, () => value);
+	return value;
+}
+//#endregion
+export { useMobileProgress, useOpenProgress };
+
+//# sourceMappingURL=motion.js.map

package/dist/recipes/frame/frame/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":["useSwipeSidebar"],"sources":["../../../../src/recipes/frame/frame/motion.ts"],"sourcesContent":["import { useSidebar as useSwipeSidebar } from '../../../input/index.ts';\nimport { animate, type MotionValue, motionValue } from 'motion/react';\nimport { useCallback, useState, useSyncExternalStore } from 'react';\nimport { MOBILE_QUERY } from '#hooks/use-mobile';\n\n/** How far a phone's sidebar opens, in px: the `18rem` of `--sidebar-width-mobile`. */\nconst PHONE_SIDEBAR_WIDTH = 288;\n/** The strip along the left edge that opens it, when swipes open from the edge. */\nconst EDGE = 24;\nconst TOUCH_QUERY = '(pointer: coarse)';\nconst MOBILE_SPRING = {\n  type: 'spring',\n  visualDuration: 0.3,\n  bounce: 0,\n} as const;\n\nconst watch = (query: string, onChange: () => void) => {\n  const mql = window.matchMedia(query);\n  mql.addEventListener('change', onChange);\n  return () => mql.removeEventListener('change', onChange);\n};\n\nfunction useIsTouch() {\n  return useSyncExternalStore(\n    useCallback((onChange: () => void) => watch(TOUCH_QUERY, onChange), []),\n    () => window.matchMedia(TOUCH_QUERY).matches,\n    () => false,\n  );\n}\n\n/**\n * `open`, 0 shut to 1 open: under a finger on a touch screen, else springing\n * to the open state as it changes. Swipes open from anywhere, from the left\n * edge only, or not at all.\n */\nexport function useOpenProgress(options: {\n  readonly open: boolean;\n  readonly setOpen: (open: boolean) => void;\n  readonly swipe: 'anywhere' | 'edge' | 'off';\n}): MotionValue<number> {\n  const touch = useIsTouch();\n  return useSwipeSidebar({\n    side: 'left',\n    width: PHONE_SIDEBAR_WIDTH,\n    edge: options.swipe === 'edge' ? EDGE : undefined,\n    enabled: touch && options.swipe !== 'off',\n    open: options.open,\n    onOpenChange: options.setOpen,\n  }).progress;\n}\n\n/**\n * `mobile`, 1 on a phone to 0 wider: springing between the two as the screen\n * crosses the breakpoint, or jumping, for reduced motion. It starts at the\n * screen's real value.\n */\nexport function useMobileProgress(): MotionValue<number> {\n  const [value] = useState(() =>\n    motionValue(\n      typeof window !== 'undefined' && window.matchMedia(MOBILE_QUERY).matches\n        ? 1\n        : 0,\n    ),\n  );\n  // The breakpoint's change event moves the value, through React's store\n  // subscription: no effect to keep in step.\n  useSyncExternalStore(\n    useCallback(\n      (onChange: () => void) =>\n        watch(MOBILE_QUERY, () => {\n          const next = window.matchMedia(MOBILE_QUERY).matches ? 1 : 0;\n          if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n            value.jump(next);\n          } else {\n            animate(value, next, MOBILE_SPRING);\n          }\n          onChange();\n        }),\n      [value],\n    ),\n    () => value,\n    () => value,\n  );\n  return value;\n}\n"],"mappings":";;;;;;AAMA,MAAM,sBAAsB;;AAE5B,MAAM,OAAO;AACb,MAAM,cAAc;AACpB,MAAM,gBAAgB;CACpB,MAAM;CACN,gBAAgB;CAChB,QAAQ;AACV;AAEA,MAAM,SAAS,OAAe,aAAyB;CACrD,MAAM,MAAM,OAAO,WAAW,KAAK;CACnC,IAAI,iBAAiB,UAAU,QAAQ;CACvC,aAAa,IAAI,oBAAoB,UAAU,QAAQ;AACzD;AAEA,SAAS,aAAa;CACpB,OAAO,qBACL,aAAa,aAAyB,MAAM,aAAa,QAAQ,GAAG,CAAC,CAAC,SAChE,OAAO,WAAW,WAAW,CAAC,CAAC,eAC/B,KACR;AACF;;;;;;AAOA,SAAgB,gBAAgB,SAIR;CACtB,MAAM,QAAQ,WAAW;CACzB,OAAOA,WAAgB;EACrB,MAAM;EACN,OAAO;EACP,MAAM,QAAQ,UAAU,SAAS,OAAO,KAAA;EACxC,SAAS,SAAS,QAAQ,UAAU;EACpC,MAAM,QAAQ;EACd,cAAc,QAAQ;CACxB,CAAC,CAAC,CAAC;AACL;;;;;;AAOA,SAAgB,oBAAyC;CACvD,MAAM,CAAC,SAAS,eACd,YACE,OAAO,WAAW,eAAe,OAAO,WAAW,YAAY,CAAC,CAAC,UAC7D,IACA,CACN,CACF;CAGA,qBACE,aACG,aACC,MAAM,oBAAoB;EACxB,MAAM,OAAO,OAAO,WAAW,YAAY,CAAC,CAAC,UAAU,IAAI;EAC3D,IAAI,OAAO,WAAW,kCAAkC,CAAC,CAAC,SACxD,MAAM,KAAK,IAAI;OAEf,QAAQ,OAAO,MAAM,aAAa;EAEpC,SAAS;CACX,CAAC,GACH,CAAC,KAAK,CACR,SACM,aACA,KACR;CACA,OAAO;AACT"}

package/dist/recipes/frame/frame/state.d.ts

@@ -0,0 +1,17 @@
+//#region src/recipes/frame/frame/state.d.ts
+/** False while the server renders and hydration matches it, then true. */
+export declare function useHydrated(): boolean;
+/**
+ * The sidebar's one open state, at every screen size. It starts open, except
+ * on a phone, where it starts shut so the page shows first. The server can't
+ * tell a phone, so it renders open, and so does hydration: `shown` is the
+ * state for the markup, `open` the real one for the motion, which draws
+ * nothing until then.
+ */
+export declare function useOpenState(): {
+  open: boolean;
+  shown: boolean;
+  setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+//#endregion
+//# sourceMappingURL=state.d.ts.map

package/dist/recipes/frame/frame/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","names":[],"sources":["../../../../src/recipes/frame/frame/state.ts"],"mappings":";;wBAMgB;;;;;;;;wBAeA"}

package/dist/recipes/frame/frame/state.js

@@ -0,0 +1,27 @@
+import { MOBILE_QUERY } from "../../../components/hooks/use-mobile.js";
+import { useState, useSyncExternalStore } from "react";
+//#region src/recipes/frame/frame/state.ts
+const noSubscription = () => () => {};
+/** False while the server renders and hydration matches it, then true. */
+function useHydrated() {
+	return useSyncExternalStore(noSubscription, () => true, () => false);
+}
+/**
+* The sidebar's one open state, at every screen size. It starts open, except
+* on a phone, where it starts shut so the page shows first. The server can't
+* tell a phone, so it renders open, and so does hydration: `shown` is the
+* state for the markup, `open` the real one for the motion, which draws
+* nothing until then.
+*/
+function useOpenState() {
+	const [open, setOpen] = useState(() => typeof window === "undefined" || !window.matchMedia(MOBILE_QUERY).matches);
+	return {
+		open,
+		shown: useHydrated() ? open : true,
+		setOpen
+	};
+}
+//#endregion
+export { useHydrated, useOpenState };
+
+//# sourceMappingURL=state.js.map

package/dist/recipes/frame/frame/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","names":[],"sources":["../../../../src/recipes/frame/frame/state.ts"],"sourcesContent":["import { useState, useSyncExternalStore } from 'react';\nimport { MOBILE_QUERY } from '#hooks/use-mobile';\n\nconst noSubscription = () => () => {};\n\n/** False while the server renders and hydration matches it, then true. */\nexport function useHydrated() {\n  return useSyncExternalStore(\n    noSubscription,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * The sidebar's one open state, at every screen size. It starts open, except\n * on a phone, where it starts shut so the page shows first. The server can't\n * tell a phone, so it renders open, and so does hydration: `shown` is the\n * state for the markup, `open` the real one for the motion, which draws\n * nothing until then.\n */\nexport function useOpenState() {\n  const [open, setOpen] = useState(\n    () =>\n      typeof window === 'undefined' || !window.matchMedia(MOBILE_QUERY).matches,\n  );\n  const shown = useHydrated() ? open : true;\n  return { open, shown, setOpen };\n}\n"],"mappings":";;;AAGA,MAAM,6BAA6B,CAAC;;AAGpC,SAAgB,cAAc;CAC5B,OAAO,qBACL,sBACM,YACA,KACR;AACF;;;;;;;;AASA,SAAgB,eAAe;CAC7B,MAAM,CAAC,MAAM,WAAW,eAEpB,OAAO,WAAW,eAAe,CAAC,OAAO,WAAW,YAAY,CAAC,CAAC,OACtE;CAEA,OAAO;EAAE;EAAM,OADD,YAAY,IAAI,OAAO;EACf;CAAQ;AAChC"}

package/dist/recipes/frame/header.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/recipes/frame/header.d.ts
+/** What an app puts in its header. */
+export interface HeaderConfig {
+  /** Where you are. */
+  readonly title: ReactNode;
+  /** At the right edge: the page's own actions, and the account menu when there's no sidebar. */
+  readonly actions?: ReactNode;
+}
+/**
+ * The page's bar: the sidebar's button and a divider, when there's a sidebar,
+ * then where you are, then the actions. Under the status bar on a phone.
+ */
+export declare function Header(props: {
+  readonly config: HeaderConfig;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=header.d.ts.map

package/dist/recipes/frame/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","names":[],"sources":["../../../src/recipes/frame/header.tsx"],"mappings":";;;iBAOiB;;WAEN,OAAO;;WAEP,UAAU;;;;;;wBAOL,OAAO;WAAkB,QAAQ;oBAAc,IAAA"}

package/dist/recipes/frame/header.js

@@ -0,0 +1,43 @@
+import { Button } from "../../components/ui/button.js";
+import { Separator } from "../../components/ui/separator.js";
+import { useFrame } from "./frame/frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftIcon } from "lucide-react";
+//#region src/recipes/frame/header.tsx
+/**
+* The page's bar: the sidebar's button and a divider, when there's a sidebar,
+* then where you are, then the actions. Under the status bar on a phone.
+*/
+function Header(props) {
+	const { open, toggle, hasSidebar } = useFrame();
+	return /* @__PURE__ */ jsxs("header", {
+		"data-slot": "app-shell-header",
+		className: "box-content flex h-14 shrink-0 items-center gap-2 border-b border-border px-4 pt-[env(safe-area-inset-top)] md:h-12 md:pt-0",
+		children: [
+			hasSidebar ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				"aria-label": "Toggle sidebar",
+				"aria-expanded": open,
+				className: "-ml-2 size-11 rounded-full hover:bg-transparent aria-expanded:bg-transparent md:-ml-1 md:size-8 dark:hover:bg-transparent",
+				onClick: toggle,
+				children: /* @__PURE__ */ jsx(PanelLeftIcon, { "aria-hidden": "true" })
+			}), /* @__PURE__ */ jsx(Separator, {
+				orientation: "vertical",
+				className: "mr-1 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center"
+			})] }) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 truncate text-sm font-medium",
+				children: props.config.title
+			}),
+			props.config.actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				className: "-mr-2 flex shrink-0 items-center gap-1 md:-mr-1",
+				children: props.config.actions
+			})
+		]
+	});
+}
+//#endregion
+export { Header };
+
+//# sourceMappingURL=header.js.map

package/dist/recipes/frame/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","names":[],"sources":["../../../src/recipes/frame/header.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { PanelLeftIcon } from 'lucide-react';\nimport { Button } from '#components/ui/button';\nimport { Separator } from '#components/ui/separator';\nimport { useFrame } from './frame/index.ts';\n\n/** What an app puts in its header. */\nexport interface HeaderConfig {\n  /** Where you are. */\n  readonly title: ReactNode;\n  /** At the right edge: the page's own actions, and the account menu when there's no sidebar. */\n  readonly actions?: ReactNode;\n}\n\n/**\n * The page's bar: the sidebar's button and a divider, when there's a sidebar,\n * then where you are, then the actions. Under the status bar on a phone.\n */\nexport function Header(props: { readonly config: HeaderConfig }) {\n  const { open, toggle, hasSidebar } = useFrame();\n  return (\n    <header\n      data-slot=\"app-shell-header\"\n      className=\"box-content flex h-14 shrink-0 items-center gap-2 border-b border-border px-4 pt-[env(safe-area-inset-top)] md:h-12 md:pt-0\"\n    >\n      {hasSidebar ? (\n        <>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label=\"Toggle sidebar\"\n            aria-expanded={open}\n            className=\"-ml-2 size-11 rounded-full hover:bg-transparent aria-expanded:bg-transparent md:-ml-1 md:size-8 dark:hover:bg-transparent\"\n            onClick={toggle}\n          >\n            <PanelLeftIcon aria-hidden=\"true\" />\n          </Button>\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-1 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center\"\n          />\n        </>\n      ) : null}\n      <div className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n        {props.config.title}\n      </div>\n      {props.config.actions === undefined ? null : (\n        <div className=\"-mr-2 flex shrink-0 items-center gap-1 md:-mr-1\">\n          {props.config.actions}\n        </div>\n      )}\n    </header>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,OAAO,OAA0C;CAC/D,MAAM,EAAE,MAAM,QAAQ,eAAe,SAAS;CAC9C,OACE,qBAAC,UAAD;EACE,aAAU;EACV,WAAU;EAFZ,UAAA;GAIG,aACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,cAAW;IACX,iBAAe;IACf,WAAU;IACV,SAAS;IAET,UAAA,oBAAC,eAAD,EAAe,eAAY,OAAQ,CAAA;GAC7B,CAAA,GACR,oBAAC,WAAD;IACE,aAAY;IACZ,WAAU;GACX,CAAA,CACD,EAAA,CAAA,IACA;GACJ,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,OAAO;GACX,CAAA;GACJ,MAAM,OAAO,YAAY,KAAA,IAAY,OACpC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,OAAO;GACX,CAAA;EAED;;AAEZ"}

package/dist/recipes/frame/index.d.ts

@@ -0,0 +1,4 @@
+import { useSidebarWidth } from "./sidebar/width.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "./sidebar/blocks.js";
+import { AppShell, useAppShell } from "./app-shell.js";
+export { AppShell, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useAppShell, useSidebarWidth };

package/dist/recipes/frame/index.js

@@ -0,0 +1,4 @@
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "./sidebar/blocks.js";
+import { useSidebarWidth } from "./sidebar/width.js";
+import { AppShell, useAppShell } from "./app-shell.js";
+export { AppShell, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useAppShell, useSidebarWidth };