@kestack/web-platform 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,31 @@
+import { Input } from "../../../components/ui/input.js";
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/recipes/frame/sidebar/blocks.d.ts
+export declare function SidebarGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function SidebarGroupLabel({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function SidebarGroupContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function SidebarInput({ className, ...props }: ComponentProps<typeof Input>): import("react").JSX.Element;
+export declare function SidebarMenu({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;
+export declare function SidebarMenuItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
+/**
+ * A place in the sidebar. `render` makes it a link, and then a tap on a phone
+ * also shuts the sidebar. A finger's size on a phone, compact on a wide screen.
+ */
+export declare function SidebarMenuButton({ render, isActive, size, className, onClick, ...props }: useRender.ComponentProps<'button'> & ComponentProps<'button'> & {
+  readonly isActive?: boolean;
+  readonly size?: 'default' | 'lg';
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** A loading placeholder the shape of a menu button. */
+export declare function SidebarMenuSkeleton({ className, showIcon, ...props }: ComponentProps<'div'> & {
+  readonly showIcon?: boolean;
+}): import("react").JSX.Element;
+/** Places nested under a menu button, along a line. */
+export declare function SidebarMenuSub({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;
+export declare function SidebarMenuSubItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
+/** A nested place, a link: a tap on a phone shuts the sidebar. */
+export declare function SidebarMenuSubButton({ render, isActive, className, onClick, ...props }: useRender.ComponentProps<'a'> & ComponentProps<'a'> & {
+  readonly isActive?: boolean;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//# sourceMappingURL=blocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","names":[],"sources":["../../../../src/recipes/frame/sidebar/blocks.tsx"],"mappings":";;;;wBAkBgB,eAAe,cAAc,SAAS,wCAAqB,IAAA;wBAU3D,oBACd,cACG,SACF,wCAAqB,IAAA;wBAaR,sBACd,cACG,SACF,wCAAqB,IAAA;wBAUR,eACd,cACG,SACF,sBAAsB,yBAAM,IAAA;wBAUf,cAAc,cAAc,SAAS,uCAAoB,IAAA;wBAUzD,kBAAkB,cAAc,SAAS,uCAAoB,IAAA;;;;;wBA2B7D,oBACd,QACA,UACA,MACA,WACA,YACG,SACF,UAAU,2BACX;WACW;WACA;oBACV,+CAAA;;wBAqBa,sBACd,WACA,aACG,SACF;WAAmC;oBAAoB,IAAA;;wBAmB1C,iBAAiB,cAAc,SAAS,uCAAoB,IAAA;wBAa5D,qBACd,cACG,SACF,uCAAoB,IAAA;;wBAWP,uBACd,QACA,UACA,WACA,YACG,SACF,UAAU,sBACX;WAAiC;oBAAoB,+CAAA"}

package/dist/recipes/frame/sidebar/blocks.js

@@ -0,0 +1,126 @@
+import { Input } from "../../../components/ui/input.js";
+import { Skeleton } from "../../../components/ui/skeleton.js";
+import { useFrame } from "../frame/frame.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/recipes/frame/sidebar/blocks.tsx
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group",
+		className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+		...props
+	});
+}
+function SidebarGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group-label",
+		className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 [&>svg]:size-4 [&>svg]:shrink-0", className),
+		...props
+	});
+}
+function SidebarGroupContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group-content",
+		className: cn("w-full text-sm", className),
+		...props
+	});
+}
+function SidebarInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "sidebar-input",
+		className: cn("h-8 w-full bg-background shadow-none", className),
+		...props
+	});
+}
+function SidebarMenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu",
+		className: cn("flex w-full min-w-0 flex-col gap-1", className),
+		...props
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-item",
+		className: cn("group/menu-item relative", className),
+		...props
+	});
+}
+function useShutOnPhone(link, onClick) {
+	const { isMobile, setOpen } = useFrame();
+	return (event) => {
+		onClick?.(event);
+		if (link && isMobile) setOpen(false);
+	};
+}
+/**
+* A place in the sidebar. `render` makes it a link, and then a tap on a phone
+* also shuts the sidebar. A finger's size on a phone, compact on a wide screen.
+*/
+function SidebarMenuButton({ render, isActive = false, size = "default", className, onClick, ...props }) {
+	const shutOnPhone = useShutOnPhone(render !== void 0, onClick);
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			className: cn("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-inset active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", size === "lg" ? "h-12" : "h-11 md:h-8", className),
+			onClick: shutOnPhone
+		}, props),
+		render,
+		state: {
+			slot: "sidebar-menu-button",
+			size,
+			active: isActive
+		}
+	});
+}
+/** A loading placeholder the shape of a menu button. */
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+	const [width] = useState(() => `${Math.floor(Math.random() * 40) + 50}%`);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sidebar-menu-skeleton",
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+		...props,
+		children: [showIcon ? /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded-md" }) : null, /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			style: { "--skeleton-width": width }
+		})]
+	});
+}
+/** Places nested under a menu button, along a line. */
+function SidebarMenuSub({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu-sub",
+		className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5", className),
+		...props
+	});
+}
+function SidebarMenuSubItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-sub-item",
+		className: cn("group/menu-sub-item relative", className),
+		...props
+	});
+}
+/** A nested place, a link: a tap on a phone shuts the sidebar. */
+function SidebarMenuSubButton({ render, isActive = false, className, onClick, ...props }) {
+	const shutOnPhone = useShutOnPhone(true, onClick);
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({
+			className: cn("flex h-9 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sm text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-inset active:bg-sidebar-accent active:text-sidebar-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground md:h-7 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", className),
+			onClick: shutOnPhone
+		}, props),
+		render,
+		state: {
+			slot: "sidebar-menu-sub-button",
+			active: isActive
+		}
+	});
+}
+//#endregion
+export { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem };
+
+//# sourceMappingURL=blocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.js","names":[],"sources":["../../../../src/recipes/frame/sidebar/blocks.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from 'cn';\nimport {\n  type ComponentProps,\n  type CSSProperties,\n  type MouseEvent,\n  useState,\n} from 'react';\nimport { Input } from '#components/ui/input';\nimport { Skeleton } from '#components/ui/skeleton';\nimport { useFrame } from '../frame/index.ts';\n\n/*\n * The pieces a sidebar is built from, for content the `nav` list can't\n * describe. `nav` is built from them too, so both look alike.\n */\n\nexport function SidebarGroup({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupLabel({\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-group-label\"\n      className={cn(\n        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 [&>svg]:size-4 [&>svg]:shrink-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupContent({\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      className={cn('w-full text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInput({\n  className,\n  ...props\n}: ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      className={cn('h-8 w-full bg-background shadow-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({ className, ...props }: ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      className={cn('flex w-full min-w-0 flex-col gap-1', className)}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuItem({ className, ...props }: ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  );\n}\n\n// On a phone the open sidebar covers the page, so following a link shuts\n// it. A button that isn't a link, such as a menu's trigger, leaves it open.\nfunction useShutOnPhone<Element>(\n  link: boolean,\n  onClick: ((event: MouseEvent<Element>) => void) | undefined,\n) {\n  const { isMobile, setOpen } = useFrame();\n  return (event: MouseEvent<Element>) => {\n    onClick?.(event);\n    if (link && isMobile) setOpen(false);\n  };\n}\n\n/**\n * A place in the sidebar. `render` makes it a link, and then a tap on a phone\n * also shuts the sidebar. A finger's size on a phone, compact on a wide screen.\n */\nexport function SidebarMenuButton({\n  render,\n  isActive = false,\n  size = 'default',\n  className,\n  onClick,\n  ...props\n}: useRender.ComponentProps<'button'> &\n  ComponentProps<'button'> & {\n    readonly isActive?: boolean;\n    readonly size?: 'default' | 'lg';\n  }) {\n  const shutOnPhone = useShutOnPhone(render !== undefined, onClick);\n  return useRender({\n    defaultTagName: 'button',\n    props: mergeProps<'button'>(\n      {\n        className: cn(\n          'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-inset active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n          size === 'lg' ? 'h-12' : 'h-11 md:h-8',\n          className,\n        ),\n        onClick: shutOnPhone,\n      },\n      props,\n    ),\n    render,\n    state: { slot: 'sidebar-menu-button', size, active: isActive },\n  });\n}\n\n/** A loading placeholder the shape of a menu button. */\nexport function SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: ComponentProps<'div'> & { readonly showIcon?: boolean }) {\n  // Random width between 50 to 90%.\n  const [width] = useState(() => `${Math.floor(Math.random() * 40) + 50}%`);\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n      {...props}\n    >\n      {showIcon ? <Skeleton className=\"size-4 rounded-md\" /> : null}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        style={{ '--skeleton-width': width } as CSSProperties}\n      />\n    </div>\n  );\n}\n\n/** Places nested under a menu button, along a line. */\nexport function SidebarMenuSub({ className, ...props }: ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      className={cn(\n        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubItem({\n  className,\n  ...props\n}: ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      className={cn('group/menu-sub-item relative', className)}\n      {...props}\n    />\n  );\n}\n\n/** A nested place, a link: a tap on a phone shuts the sidebar. */\nexport function SidebarMenuSubButton({\n  render,\n  isActive = false,\n  className,\n  onClick,\n  ...props\n}: useRender.ComponentProps<'a'> &\n  ComponentProps<'a'> & { readonly isActive?: boolean }) {\n  const shutOnPhone = useShutOnPhone(true, onClick);\n  return useRender({\n    defaultTagName: 'a',\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          'flex h-9 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sm text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-inset active:bg-sidebar-accent active:text-sidebar-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground md:h-7 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n          className,\n        ),\n        onClick: shutOnPhone,\n      },\n      props,\n    ),\n    render,\n    state: { slot: 'sidebar-menu-sub-button', active: isActive },\n  });\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAgC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6CAA6C,SAAS;EACpE,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,kBAAkB,EAChC,WACA,GAAG,SACqB;CACxB,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,oBAAoB,EAClC,WACA,GAAG,SACqB;CACxB,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kBAAkB,SAAS;EACzC,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,aAAa,EAC3B,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA+B;CACzE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,gBAAgB,EAAE,WAAW,GAAG,SAA+B;CAC7E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,eACP,MACA,SACA;CACA,MAAM,EAAE,UAAU,YAAY,SAAS;CACvC,QAAQ,UAA+B;EACrC,UAAU,KAAK;EACf,IAAI,QAAQ,UAAU,QAAQ,KAAK;CACrC;AACF;;;;;AAMA,SAAgB,kBAAkB,EAChC,QACA,WAAW,OACX,OAAO,WACP,WACA,SACA,GAAG,SAKA;CACH,MAAM,cAAc,eAAe,WAAW,KAAA,GAAW,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL;GACE,WAAW,GACT,2kBACA,SAAS,OAAO,SAAS,eACzB,SACF;GACA,SAAS;EACX,GACA,KACF;EACA;EACA,OAAO;GAAE,MAAM;GAAuB;GAAM,QAAQ;EAAS;CAC/D,CAAC;AACH;;AAGA,SAAgB,oBAAoB,EAClC,WACA,WAAW,OACX,GAAG,SACuD;CAE1D,MAAM,CAAC,SAAS,eAAe,GAAG,KAAK,MAAM,KAAK,OAAO,IAAI,EAAE,IAAI,GAAG,EAAE;CACxE,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+CAA+C,SAAS;EACtE,GAAI;EAHN,UAAA,CAKG,WAAW,oBAAC,UAAD,EAAU,WAAU,oBAAqB,CAAA,IAAI,MACzD,oBAAC,UAAD;GACE,WAAU;GACV,OAAO,EAAE,oBAAoB,MAAM;EACpC,CAAA,CACE;;AAET;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA+B;CAC5E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,mBAAmB,EACjC,WACA,GAAG,SACoB;CACvB,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,qBAAqB,EACnC,QACA,WAAW,OACX,WACA,SACA,GAAG,SAEoD;CACvD,MAAM,cAAc,eAAe,MAAM,OAAO;CAChD,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL;GACE,WAAW,GACT,0gBACA,SACF;GACA,SAAS;EACX,GACA,KACF;EACA;EACA,OAAO;GAAE,MAAM;GAA2B,QAAQ;EAAS;CAC7D,CAAC;AACH"}

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { ComponentType, ReactElement } from "react";
+//#region src/recipes/frame/sidebar/nav.d.ts
+/** A place to go: its name, icon, whether it's here, and the link to it. */
+export interface NavItem {
+  readonly title: string;
+  readonly icon?: ComponentType<{
+    readonly 'aria-hidden'?: boolean;
+  }>;
+  readonly active?: boolean;
+  /** The link, such as a router's `<Link to=… />`; its children are filled in. */
+  readonly render: ReactElement;
+}
+/** The sidebar's places, in groups, each with an optional label. */
+export type Nav = ReadonlyArray<{
+  readonly label?: string;
+  readonly items: ReadonlyArray<NavItem>;
+}>;
+export declare function NavList(props: {
+  readonly nav: Nav;
+}): import("react").JSX.Element[];
+//#endregion
+//# sourceMappingURL=nav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav.d.ts","names":[],"sources":["../../../../src/recipes/frame/sidebar/nav.tsx"],"mappings":";;;iBAWiB;WACN;WACA,OAAO;aAAyB;;WAChC;;WAEA,QAAQ;;;YAIP,MAAM;WACP;WACA,OAAO,cAAc;;wBAGhB,QAAQ;WAAkB,KAAK;oBAAK,IAAA"}

package/dist/recipes/frame/sidebar/nav.js

@@ -0,0 +1,14 @@
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "./blocks.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/recipes/frame/sidebar/nav.tsx
+function NavList(props) {
+	return props.nav.map((group, index) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [group.label === void 0 ? null : /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }), /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+		isActive: item.active,
+		render: item.render,
+		children: [item.icon === void 0 ? null : /* @__PURE__ */ jsx(item.icon, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children: item.title })]
+	}) }, item.title)) }) })] }, group.label ?? index));
+}
+//#endregion
+export { NavList };
+
+//# sourceMappingURL=nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav.js","names":[],"sources":["../../../../src/recipes/frame/sidebar/nav.tsx"],"sourcesContent":["import type { ComponentType, ReactElement } from 'react';\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from './blocks.tsx';\n\n/** A place to go: its name, icon, whether it's here, and the link to it. */\nexport interface NavItem {\n  readonly title: string;\n  readonly icon?: ComponentType<{ readonly 'aria-hidden'?: boolean }>;\n  readonly active?: boolean;\n  /** The link, such as a router's `<Link to=… />`; its children are filled in. */\n  readonly render: ReactElement;\n}\n\n/** The sidebar's places, in groups, each with an optional label. */\nexport type Nav = ReadonlyArray<{\n  readonly label?: string;\n  readonly items: ReadonlyArray<NavItem>;\n}>;\n\nexport function NavList(props: { readonly nav: Nav }) {\n  return props.nav.map((group, index) => (\n    <SidebarGroup key={group.label ?? index}>\n      {group.label === undefined ? null : (\n        <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n      )}\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {group.items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton isActive={item.active} render={item.render}>\n                {item.icon === undefined ? null : <item.icon aria-hidden />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  ));\n}\n"],"mappings":";;;AAyBA,SAAgB,QAAQ,OAA8B;CACpD,OAAO,MAAM,IAAI,KAAK,OAAO,UAC3B,qBAAC,cAAD,EAAA,UAAA,CACG,MAAM,UAAU,KAAA,IAAY,OAC3B,oBAAC,mBAAD,EAAA,UAAoB,MAAM,MAAyB,CAAA,GAErD,oBAAC,qBAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UACG,MAAM,MAAM,KAAK,SAChB,oBAAC,iBAAD,EAAA,UACE,qBAAC,mBAAD;EAAmB,UAAU,KAAK;EAAQ,QAAQ,KAAK;EAAvD,UAAA,CACG,KAAK,SAAS,KAAA,IAAY,OAAO,oBAAC,KAAK,MAAN,EAAW,eAAA,KAAa,CAAA,GAC1D,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA,CACP;CACJ,CAAA,EAAA,GALK,KAAK,KAKV,CAClB,EACU,CAAA,EACM,CAAA,CACT,EAAA,GAhBK,MAAM,SAAS,KAgBpB,CACf;AACH"}

package/dist/recipes/frame/sidebar/resize-handle.d.ts

@@ -0,0 +1,12 @@
+//#region src/recipes/frame/sidebar/resize-handle.d.ts
+/**
+ * The sidebar's right edge on a wide screen: drag it, or use the arrow keys,
+ * to resize the sidebar between 224 and 480 px; click it, or press Enter, to
+ * shut or open it.
+ */
+export declare function ResizeHandle(props: {
+  readonly width: number;
+  readonly onWidthChange: (width: number) => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=resize-handle.d.ts.map

package/dist/recipes/frame/sidebar/resize-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handle.d.ts","names":[],"sources":["../../../../src/recipes/frame/sidebar/resize-handle.tsx"],"mappings":";;;;;;wBAoBgB,aAAa;WAClB;WACA,gBAAgB;oBAC1B,IAAA"}

package/dist/recipes/frame/sidebar/resize-handle.js

@@ -0,0 +1,90 @@
+import { useFrame } from "../frame/frame.js";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/recipes/frame/sidebar/resize-handle.tsx
+const MIN = 224;
+const MAX = 480;
+const STEP = 16;
+const clamp = (width) => Math.min(MAX, Math.max(MIN, width));
+const holdCursor = (held) => {
+	document.body.style.cursor = held ? "col-resize" : "";
+	document.body.style.userSelect = held ? "none" : "";
+};
+/**
+* The sidebar's right edge on a wide screen: drag it, or use the arrow keys,
+* to resize the sidebar between 224 and 480 px; click it, or press Enter, to
+* shut or open it.
+*/
+function ResizeHandle(props) {
+	const { open, toggle } = useFrame();
+	const drag = useRef(null);
+	const moved = useRef(false);
+	const [resizing, setResizing] = useState(false);
+	const stop = () => {
+		drag.current = null;
+		setResizing(false);
+		holdCursor(false);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "separator",
+		"aria-label": "Resize the sidebar",
+		"aria-orientation": "vertical",
+		"aria-valuemin": MIN,
+		"aria-valuemax": MAX,
+		"aria-valuenow": props.width,
+		"aria-valuetext": `${props.width} pixels wide`,
+		title: "Drag to resize the sidebar",
+		"data-resizing": resizing,
+		className: "absolute inset-y-0 right-0 z-20 hidden w-2 cursor-col-resize touch-none after:absolute after:inset-y-0 after:right-0 after:w-0.5 after:transition-[background-color] after:duration-150 hover:after:bg-primary/40 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[resizing=true]:after:bg-primary/60 md:block",
+		onPointerDown: (event) => {
+			if (!open || event.button !== 0) return;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			drag.current = {
+				x: event.clientX,
+				width: props.width
+			};
+			moved.current = false;
+		},
+		onPointerMove: (event) => {
+			if (drag.current === null) return;
+			const delta = event.clientX - drag.current.x;
+			if (!moved.current && Math.abs(delta) > 2) {
+				moved.current = true;
+				setResizing(true);
+				holdCursor(true);
+			}
+			if (moved.current) props.onWidthChange(clamp(drag.current.width + delta));
+		},
+		onPointerUp: (event) => {
+			if (drag.current === null) return;
+			event.currentTarget.releasePointerCapture(event.pointerId);
+			stop();
+		},
+		onPointerCancel: () => {
+			moved.current = false;
+			stop();
+		},
+		onClick: () => {
+			if (moved.current) {
+				moved.current = false;
+				return;
+			}
+			toggle();
+		},
+		onKeyDown: (event) => {
+			if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+				event.preventDefault();
+				const direction = event.key === "ArrowLeft" ? -1 : 1;
+				props.onWidthChange(clamp(props.width + direction * STEP));
+			} else if (event.key === "Home" || event.key === "End") {
+				event.preventDefault();
+				props.onWidthChange(event.key === "Home" ? MIN : MAX);
+			}
+		}
+	});
+}
+//#endregion
+export { ResizeHandle };
+
+//# sourceMappingURL=resize-handle.js.map

package/dist/recipes/frame/sidebar/resize-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handle.js","names":[],"sources":["../../../../src/recipes/frame/sidebar/resize-handle.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useFrame } from '../frame/index.ts';\n\nconst MIN = 224;\nconst MAX = 480;\nconst STEP = 16;\n\nconst clamp = (width: number) => Math.min(MAX, Math.max(MIN, width));\n\n// While dragging, the whole page keeps the resize cursor and no text selects.\nconst holdCursor = (held: boolean) => {\n  document.body.style.cursor = held ? 'col-resize' : '';\n  document.body.style.userSelect = held ? 'none' : '';\n};\n\n/**\n * The sidebar's right edge on a wide screen: drag it, or use the arrow keys,\n * to resize the sidebar between 224 and 480 px; click it, or press Enter, to\n * shut or open it.\n */\nexport function ResizeHandle(props: {\n  readonly width: number;\n  readonly onWidthChange: (width: number) => void;\n}) {\n  const { open, toggle } = useFrame();\n  const drag = useRef<{ x: number; width: number } | null>(null);\n  const moved = useRef(false);\n  const [resizing, setResizing] = useState(false);\n\n  const stop = () => {\n    drag.current = null;\n    setResizing(false);\n    holdCursor(false);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"separator\"\n      aria-label=\"Resize the sidebar\"\n      aria-orientation=\"vertical\"\n      aria-valuemin={MIN}\n      aria-valuemax={MAX}\n      aria-valuenow={props.width}\n      aria-valuetext={`${props.width} pixels wide`}\n      title=\"Drag to resize the sidebar\"\n      data-resizing={resizing}\n      className=\"absolute inset-y-0 right-0 z-20 hidden w-2 cursor-col-resize touch-none after:absolute after:inset-y-0 after:right-0 after:w-0.5 after:transition-[background-color] after:duration-150 hover:after:bg-primary/40 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[resizing=true]:after:bg-primary/60 md:block\"\n      onPointerDown={(event) => {\n        if (!open || event.button !== 0) return;\n        event.currentTarget.setPointerCapture(event.pointerId);\n        drag.current = { x: event.clientX, width: props.width };\n        moved.current = false;\n      }}\n      onPointerMove={(event) => {\n        if (drag.current === null) return;\n        const delta = event.clientX - drag.current.x;\n        if (!moved.current && Math.abs(delta) > 2) {\n          moved.current = true;\n          setResizing(true);\n          holdCursor(true);\n        }\n        if (moved.current)\n          props.onWidthChange(clamp(drag.current.width + delta));\n      }}\n      onPointerUp={(event) => {\n        if (drag.current === null) return;\n        event.currentTarget.releasePointerCapture(event.pointerId);\n        stop();\n      }}\n      onPointerCancel={() => {\n        moved.current = false;\n        stop();\n      }}\n      onClick={() => {\n        if (moved.current) {\n          moved.current = false;\n          return;\n        }\n        toggle();\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n          event.preventDefault();\n          const direction = event.key === 'ArrowLeft' ? -1 : 1;\n          props.onWidthChange(clamp(props.width + direction * STEP));\n        } else if (event.key === 'Home' || event.key === 'End') {\n          event.preventDefault();\n          props.onWidthChange(event.key === 'Home' ? MIN : MAX);\n        }\n      }}\n    />\n  );\n}\n"],"mappings":";;;;AAGA,MAAM,MAAM;AACZ,MAAM,MAAM;AACZ,MAAM,OAAO;AAEb,MAAM,SAAS,UAAkB,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAGnE,MAAM,cAAc,SAAkB;CACpC,SAAS,KAAK,MAAM,SAAS,OAAO,eAAe;CACnD,SAAS,KAAK,MAAM,aAAa,OAAO,SAAS;AACnD;;;;;;AAOA,SAAgB,aAAa,OAG1B;CACD,MAAM,EAAE,MAAM,WAAW,SAAS;CAClC,MAAM,OAAO,OAA4C,IAAI;CAC7D,MAAM,QAAQ,OAAO,KAAK;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,MAAM,aAAa;EACjB,KAAK,UAAU;EACf,YAAY,KAAK;EACjB,WAAW,KAAK;CAClB;CAEA,OACE,oBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,cAAW;EACX,oBAAiB;EACjB,iBAAe;EACf,iBAAe;EACf,iBAAe,MAAM;EACrB,kBAAgB,GAAG,MAAM,MAAM;EAC/B,OAAM;EACN,iBAAe;EACf,WAAU;EACV,gBAAgB,UAAU;GACxB,IAAI,CAAC,QAAQ,MAAM,WAAW,GAAG;GACjC,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACrD,KAAK,UAAU;IAAE,GAAG,MAAM;IAAS,OAAO,MAAM;GAAM;GACtD,MAAM,UAAU;EAClB;EACA,gBAAgB,UAAU;GACxB,IAAI,KAAK,YAAY,MAAM;GAC3B,MAAM,QAAQ,MAAM,UAAU,KAAK,QAAQ;GAC3C,IAAI,CAAC,MAAM,WAAW,KAAK,IAAI,KAAK,IAAI,GAAG;IACzC,MAAM,UAAU;IAChB,YAAY,IAAI;IAChB,WAAW,IAAI;GACjB;GACA,IAAI,MAAM,SACR,MAAM,cAAc,MAAM,KAAK,QAAQ,QAAQ,KAAK,CAAC;EACzD;EACA,cAAc,UAAU;GACtB,IAAI,KAAK,YAAY,MAAM;GAC3B,MAAM,cAAc,sBAAsB,MAAM,SAAS;GACzD,KAAK;EACP;EACA,uBAAuB;GACrB,MAAM,UAAU;GAChB,KAAK;EACP;EACA,eAAe;GACb,IAAI,MAAM,SAAS;IACjB,MAAM,UAAU;IAChB;GACF;GACA,OAAO;EACT;EACA,YAAY,UAAU;GACpB,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,cAAc;IAC3D,MAAM,eAAe;IACrB,MAAM,YAAY,MAAM,QAAQ,cAAc,KAAK;IACnD,MAAM,cAAc,MAAM,MAAM,QAAQ,YAAY,IAAI,CAAC;GAC3D,OAAO,IAAI,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;IACtD,MAAM,eAAe;IACrB,MAAM,cAAc,MAAM,QAAQ,SAAS,MAAM,GAAG;GACtD;EACF;CACD,CAAA;AAEL"}

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

@@ -0,0 +1,24 @@
+import { Nav } from "./nav.js";
+import { ReactNode } from "react";
+//#region src/recipes/frame/sidebar/sidebar.d.ts
+/** What an app puts in its sidebar. */
+export interface SidebarConfig {
+  /** Top: the app, and a way back. */
+  readonly header?: ReactNode;
+  /** Middle: where you can go, as a list of groups… */
+  readonly nav?: Nav;
+  /** …or anything the list can't describe, built from the Sidebar pieces. */
+  readonly content?: ReactNode;
+  /** Bottom: who you are. */
+  readonly footer?: ReactNode;
+  /** Its width on a wide screen, in px: 256 unless set. */
+  readonly width?: number;
+  /** Lets people resize it by its edge on a wide screen. */
+  readonly onWidthChange?: (width: number) => void;
+}
+/** The sidebar, top to bottom: header, places, footer, and its edge. */
+export declare function SidebarContents(props: {
+  readonly config: SidebarConfig;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","names":[],"sources":["../../../../src/recipes/frame/sidebar/sidebar.tsx"],"mappings":";;;;iBAKiB;;WAEN,SAAS;;WAET,MAAM;;WAEN,UAAU;;WAEV,SAAS;;WAET;;WAEA,iBAAiB;;;wBAIZ,gBAAgB;WAAkB,QAAQ;oBAAe,IAAA"}

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

@@ -0,0 +1,30 @@
+import { NavList } from "./nav.js";
+import { ResizeHandle } from "./resize-handle.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/recipes/frame/sidebar/sidebar.tsx
+/** The sidebar, top to bottom: header, places, footer, and its edge. */
+function SidebarContents(props) {
+	const { config } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		config.header === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2 p-2",
+			children: config.header
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto",
+			children: config.content ?? (config.nav === void 0 ? null : /* @__PURE__ */ jsx(NavList, { nav: config.nav }))
+		}),
+		config.footer === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2 p-2",
+			children: config.footer
+		}),
+		config.onWidthChange === void 0 ? null : /* @__PURE__ */ jsx(ResizeHandle, {
+			width: config.width ?? 256,
+			onWidthChange: config.onWidthChange
+		})
+	] });
+}
+//#endregion
+export { SidebarContents };
+
+//# sourceMappingURL=sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../../../src/recipes/frame/sidebar/sidebar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { type Nav, NavList } from './nav.tsx';\nimport { ResizeHandle } from './resize-handle.tsx';\n\n/** What an app puts in its sidebar. */\nexport interface SidebarConfig {\n  /** Top: the app, and a way back. */\n  readonly header?: ReactNode;\n  /** Middle: where you can go, as a list of groups… */\n  readonly nav?: Nav;\n  /** …or anything the list can't describe, built from the Sidebar pieces. */\n  readonly content?: ReactNode;\n  /** Bottom: who you are. */\n  readonly footer?: ReactNode;\n  /** Its width on a wide screen, in px: 256 unless set. */\n  readonly width?: number;\n  /** Lets people resize it by its edge on a wide screen. */\n  readonly onWidthChange?: (width: number) => void;\n}\n\n/** The sidebar, top to bottom: header, places, footer, and its edge. */\nexport function SidebarContents(props: { readonly config: SidebarConfig }) {\n  const { config } = props;\n  return (\n    <>\n      {config.header === undefined ? null : (\n        <div className=\"flex flex-col gap-2 p-2\">{config.header}</div>\n      )}\n      <div className=\"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto\">\n        {config.content ??\n          (config.nav === undefined ? null : <NavList nav={config.nav} />)}\n      </div>\n      {config.footer === undefined ? null : (\n        <div className=\"flex flex-col gap-2 p-2\">{config.footer}</div>\n      )}\n      {config.onWidthChange === undefined ? null : (\n        <ResizeHandle\n          width={config.width ?? 256}\n          onWidthChange={config.onWidthChange}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;AAqBA,SAAgB,gBAAgB,OAA2C;CACzE,MAAM,EAAE,WAAW;CACnB,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,OAAO,WAAW,KAAA,IAAY,OAC7B,oBAAC,OAAD;GAAK,WAAU;GAA2B,UAAA,OAAO;EAAY,CAAA;EAE/D,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,OAAO,YACL,OAAO,QAAQ,KAAA,IAAY,OAAO,oBAAC,SAAD,EAAS,KAAK,OAAO,IAAM,CAAA;EAC7D,CAAA;EACJ,OAAO,WAAW,KAAA,IAAY,OAC7B,oBAAC,OAAD;GAAK,WAAU;GAA2B,UAAA,OAAO;EAAY,CAAA;EAE9D,OAAO,kBAAkB,KAAA,IAAY,OACpC,oBAAC,cAAD;GACE,OAAO,OAAO,SAAS;GACvB,eAAe,OAAO;EACvB,CAAA;CAEH,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,9 @@
+//#region src/recipes/frame/sidebar/width.d.ts
+/**
+ * The sidebar's width on a wide screen, kept in `localStorage` under `key`
+ * so it stays as the person left it. Give both to `AppShell`'s sidebar
+ * (`width`, `onWidthChange`) to let them resize it by its edge.
+ */
+export declare const useSidebarWidth: (key: string, initial?: number) => readonly [number, (next: number) => void];
+//#endregion
+//# sourceMappingURL=width.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"width.d.ts","names":[],"sources":["../../../../src/recipes/frame/sidebar/width.ts"],"mappings":";;;;;;qBAOa,kBAAe,aAAe,wCAAA"}

package/dist/recipes/frame/sidebar/width.js

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from "react";
+//#region src/recipes/frame/sidebar/width.ts
+/**
+* The sidebar's width on a wide screen, kept in `localStorage` under `key`
+* so it stays as the person left it. Give both to `AppShell`'s sidebar
+* (`width`, `onWidthChange`) to let them resize it by its edge.
+*/
+const useSidebarWidth = (key, initial = 256) => {
+	const [width, setWidth] = useState(initial);
+	useEffect(() => {
+		const stored = Number(localStorage.getItem(key));
+		if (Number.isFinite(stored) && stored > 0) setWidth(stored);
+	}, [key]);
+	return [width, useCallback((next) => {
+		setWidth(next);
+		localStorage.setItem(key, String(next));
+	}, [key])];
+};
+//#endregion
+export { useSidebarWidth };
+
+//# sourceMappingURL=width.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"width.js","names":[],"sources":["../../../../src/recipes/frame/sidebar/width.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\n/**\n * The sidebar's width on a wide screen, kept in `localStorage` under `key`\n * so it stays as the person left it. Give both to `AppShell`'s sidebar\n * (`width`, `onWidthChange`) to let them resize it by its edge.\n */\nexport const useSidebarWidth = (key: string, initial = 256) => {\n  const [width, setWidth] = useState(initial);\n  // Read after mount: the server renders the default.\n  useEffect(() => {\n    const stored = Number(localStorage.getItem(key));\n    if (Number.isFinite(stored) && stored > 0) setWidth(stored);\n  }, [key]);\n  const change = useCallback(\n    (next: number) => {\n      setWidth(next);\n      localStorage.setItem(key, String(next));\n    },\n    [key],\n  );\n  return [width, change] as const;\n};\n"],"mappings":";;;;;;;AAOA,MAAa,mBAAmB,KAAa,UAAU,QAAQ;CAC7D,MAAM,CAAC,OAAO,YAAY,SAAS,OAAO;CAE1C,gBAAgB;EACd,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG,CAAC;EAC/C,IAAI,OAAO,SAAS,MAAM,KAAK,SAAS,GAAG,SAAS,MAAM;CAC5D,GAAG,CAAC,GAAG,CAAC;CAQR,OAAO,CAAC,OAPO,aACZ,SAAiB;EAChB,SAAS,IAAI;EACb,aAAa,QAAQ,KAAK,OAAO,IAAI,CAAC;CACxC,GACA,CAAC,GAAG,CAEc,CAAC;AACvB"}

package/dist/recipes/gate-screens/gate-screens.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+//#region src/recipes/gate-screens/gate-screens.d.ts
+/** What stands in for an app while no Account is open, one per state. */
+export type GateScreen = {
+  kind: 'checking';
+} | {
+  kind: 'signingOut';
+} | {
+  kind: 'opening';
+  name: string;
+} | {
+  kind: 'signedOut';
+  unreachable: boolean;
+} | {
+  kind: 'unopenable';
+  name: string;
+};
+export interface GateScreensProps {
+  /** The app's name, as every screen titles it. */
+  title: string;
+  /** One line on what the app is for. */
+  description?: string;
+  /** The app's mark, above its name. */
+  mark?: ReactNode;
+  /** Whatever colors the status bar, such as the Theme's strip. */
+  statusBar?: ReactNode;
+  /** For the Google button. */
+  theme: 'light' | 'dark';
+  screen: GateScreen;
+  /** The Backend running, and whether the app has a device Backend to
+   * offer. */
+  backend: 'cloud' | 'device' | null;
+  hasDevice: boolean;
+  /** Why the last sign-in came back with nobody, shown once. */
+  loginError?: string | null;
+  onLoginErrorShown?: () => void;
+  onSignIn: () => Promise<void> | void;
+  onCheckAgain: () => void;
+  onRetry: () => void;
+  onSignOut: () => void;
+  onBackend: (backend: 'cloud' | 'device') => void;
+}
+/**
+ * Every screen an app shows before an Account is open: checking who is
+ * signed in, opening an Account, signing out, signed out (Google on the
+ * cloud Backend, a name on the device Backend, and the way to the other),
+ * and an Account that would not open. One card for all of them, so nothing
+ * jumps between them. An Account Lost is the Account Lost recipe.
+ */
+export declare function GateScreens(props: GateScreensProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=gate-screens.d.ts.map

package/dist/recipes/gate-screens/gate-screens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gate-screens.d.ts","names":[],"sources":["../../../src/recipes/gate-screens/gate-screens.tsx"],"mappings":";;;YAOY;EACN;;EACA;;EACA;EAAiB;;EACjB;EAAmB;;EACnB;EAAoB;;iBAET;;EAEf;;EAEA;;EAEA,OAAO;;EAEP,YAAY;;EAEZ;EACA,QAAQ;;;EAGR;EACA;;EAEA;EACA;EACA,gBAAgB;EAChB;EACA;EACA;EACA,YAAY;;;;;;;;;wBAUE,YAAY,OAAO,mCAAgB,IAAA"}