@storyshelf/app 0.5.3

package/dist/ui/css.mjs

@@ -0,0 +1,36 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { createCssContext } from "hono/css";
+//#region src/ui/css.ts
+/**
+* hono/css building blocks for the server-rendered UI.
+*
+* A single custom context so every family module shares one `<style>`
+* tag (mounted in `DocumentLayout`) and one readable naming scheme:
+* start each `css` template with a label comment and it becomes the
+* class-name prefix (`ss-btn-<hash>`). Unlabeled templates fall back to
+* the default `css-<hash>`.
+*
+* Rules (enforced by `ui/consistency.test.ts`, see the `ui-building-blocks`
+* skill for the full contract):
+* - Import `css`/`cx`/`Style` from here, never from `hono/css` directly.
+* - One `css` template per variant; compose via `${base}` extension so the
+*   label (and readable class name) survives. Do NOT compose variants with
+*   `cx` — it merges styles into a new unlabeled `css-<hash>` class.
+* - Pseudo-states via `&` nesting inside the template.
+* - Never interpolate runtime values (brand tokens stay as CSS vars in
+*   the global token `<style>` tag). Static maps only.
+*/
+const context = createCssContext({
+	id: "storyshelf-css",
+	classNameSlug: (hash, label) => label ? `ss-${label}-${hash}` : hash
+});
+/** Create a labeled, hashed class for a static declaration block. */
+const css = (strings, ...values) => context.css(strings, ...values);
+/** Collects every used class into `<style id="storyshelf-css">`. */
+const Style = (args) => context.Style(args);
+//#endregion
+export { Style, css };
+
+//# sourceMappingURL=css.mjs.map

package/dist/ui/css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.mjs","names":[],"sources":["../../src/ui/css.ts"],"sourcesContent":["/**\n * hono/css building blocks for the server-rendered UI.\n *\n * A single custom context so every family module shares one `<style>`\n * tag (mounted in `DocumentLayout`) and one readable naming scheme:\n * start each `css` template with a label comment and it becomes the\n * class-name prefix (`ss-btn-<hash>`). Unlabeled templates fall back to\n * the default `css-<hash>`.\n *\n * Rules (enforced by `ui/consistency.test.ts`, see the `ui-building-blocks`\n * skill for the full contract):\n * - Import `css`/`cx`/`Style` from here, never from `hono/css` directly.\n * - One `css` template per variant; compose via `${base}` extension so the\n *   label (and readable class name) survives. Do NOT compose variants with\n *   `cx` — it merges styles into a new unlabeled `css-<hash>` class.\n * - Pseudo-states via `&` nesting inside the template.\n * - Never interpolate runtime values (brand tokens stay as CSS vars in\n *   the global token `<style>` tag). Static maps only.\n */\nimport { createCssContext } from \"hono/css\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\n\n/** Values allowed inside a `css` template (static only, never user input). */\nexport type CssValue = string | number | false | null | undefined | Promise<string>;\n\n/** A `css` template function with a publicly nameable type (see below). */\nexport type CssTemplate = (strings: TemplateStringsArray, ...values: CssValue[]) => Promise<string>;\n\n/** Class-name composer with a publicly nameable type (see below). */\nexport type CxFn = (\n  ...args: Array<string | boolean | null | undefined | Promise<string>>\n) => Promise<string>;\n\n/** The `<Style />` tag with a publicly nameable type (see below). */\nexport type StyleTag = (args?: { children?: Promise<string>; nonce?: string }) => HtmlEscapedString;\n\nconst context = createCssContext({\n  id: \"storyshelf-css\",\n  classNameSlug: (hash, label) => (label ? `ss-${label}-${hash}` : hash),\n});\n\n// Thin wrappers (not direct re-exports): hono/css declares its function\n// types via private names, which `tsc --noEmit` rejects under\n// `declaration: true` (TS4023). These annotations keep the public surface\n// nameable while returning the identical runtime objects.\n/** Create a labeled, hashed class for a static declaration block. */\n// eslint-disable-next-line promise-function-async -- thin typed wrapper returning hono/css's own promise\nexport const css: CssTemplate = (strings, ...values) => context.css(strings, ...values);\n\n/** Compose classes and conditional values (falsy-safe). */\n// eslint-disable-next-line promise-function-async -- thin typed wrapper returning hono/css's own promise\nexport const cx: CxFn = (...args) => context.cx(...args);\n\n/** Collects every used class into `<style id=\"storyshelf-css\">`. */\nexport const Style: StyleTag = (args) => context.Style(args);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,UAAU,iBAAiB;CAC/B,IAAI;CACJ,gBAAgB,MAAM,UAAW,QAAQ,MAAM,MAAM,GAAG,SAAS;AACnE,CAAC;;AAQD,MAAa,OAAoB,SAAS,GAAG,WAAW,QAAQ,IAAI,SAAS,GAAG,MAAM;;AAOtF,MAAa,SAAmB,SAAS,QAAQ,MAAM,IAAI"}

package/dist/ui/document.mjs

@@ -0,0 +1,130 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "../store.mjs";
+import { getCsrfToken } from "../middleware/csrf.mjs";
+import { Style, css } from "./css.mjs";
+import { assetManifest } from "../asset-manifest.mjs";
+import { BareShell } from "./shell/bare.mjs";
+import { bootScript } from "./shell/boot-script.mjs";
+import { clientScript } from "./shell/client-script.mjs";
+import { Sidebar } from "./shell/sidebar.mjs";
+import { ToastRegion, TopBar } from "./shell/topbar.mjs";
+import { baseStyle } from "./styles.mjs";
+import { DARK_THEME, LIGHT_THEME } from "./theme.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { raw } from "hono/html";
+//#region src/ui/document.tsx
+const shellRoot = css`
+  /* shell */
+  display: grid;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+  min-height: 100vh;
+  @media (max-width: 880px) {
+    & {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+`;
+const shellContent = css`
+  /* shell-content */
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--space-6) var(--space-6) var(--space-8);
+  min-width: 0;
+  @media (max-width: 880px) {
+    & {
+      padding: var(--space-4);
+    }
+  }
+`;
+const shellContentWide = css`
+  /* shell-content-wide */
+  ${shellContent}
+  max-width: none;
+`;
+const shellBackdrop = css`
+  /* shell-backdrop */
+  position: fixed;
+  inset: 0;
+  z-index: 55;
+  background: rgb(0 0 0 / 0.4);
+  &[hidden] {
+    display: none;
+  }
+`;
+/** Full HTML document shell with sidebar, top bar, theme, toasts, and HTMX. */
+const DocumentLayout = ({ title, nav, layout = "default", children }) => {
+	const { ui, config, sessionId } = getStore();
+	const name = ui.name ?? "StoryShelf";
+	const logo = ui.logo ?? assetManifest.mark.href;
+	const light = ui.lightTheme ?? LIGHT_THEME;
+	const dark = ui.darkTheme ?? DARK_THEME;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [raw("<!DOCTYPE html>"), /* @__PURE__ */ jsxs("html", {
+		lang: "en",
+		"data-theme": "system",
+		children: [/* @__PURE__ */ jsxs("head", { children: [
+			/* @__PURE__ */ jsx("meta", { charset: "utf-8" }),
+			/* @__PURE__ */ jsx("meta", {
+				name: "viewport",
+				content: "width=device-width, initial-scale=1"
+			}),
+			/* @__PURE__ */ jsx("meta", {
+				name: "color-scheme",
+				content: "light dark"
+			}),
+			/* @__PURE__ */ jsx("meta", {
+				name: "csrf-token",
+				content: getCsrfToken(config.secret, sessionId)
+			}),
+			/* @__PURE__ */ jsx("link", {
+				rel: "icon",
+				type: "image/svg+xml",
+				href: assetManifest.mark.href
+			}),
+			/* @__PURE__ */ jsxs("title", { children: [
+				title,
+				" · ",
+				name
+			] }),
+			/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: baseStyle(light, dark) } }),
+			/* @__PURE__ */ jsx(Style, {}),
+			/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: bootScript() } })
+		] }), /* @__PURE__ */ jsxs("body", { children: [
+			/* @__PURE__ */ jsx("a", {
+				class: "skip-link",
+				href: "#main-content",
+				children: "Skip to content"
+			}),
+			layout === "bare" ? /* @__PURE__ */ jsx(BareShell, {
+				name,
+				logo,
+				children
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				class: shellRoot,
+				children: [/* @__PURE__ */ jsx(Sidebar, {
+					nav,
+					name,
+					logo
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(TopBar, { nav }), /* @__PURE__ */ jsx("main", {
+					id: "main-content",
+					class: layout === "wide" ? shellContentWide : shellContent,
+					tabindex: -1,
+					children
+				})] })]
+			}), /* @__PURE__ */ jsx("div", {
+				class: shellBackdrop,
+				"data-sidebar-backdrop": true,
+				hidden: true
+			})] }),
+			/* @__PURE__ */ jsx(ToastRegion, {}),
+			/* @__PURE__ */ jsx("script", { src: assetManifest.htmx.href }),
+			/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: clientScript() } })
+		] })]
+	})] });
+};
+//#endregion
+export { DocumentLayout };
+
+//# sourceMappingURL=document.mjs.map

package/dist/ui/document.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.mjs","names":[],"sources":["../../src/ui/document.tsx"],"sourcesContent":["import { raw } from \"hono/html\";\nimport type { FC } from \"hono/jsx\";\nimport { assetManifest } from \"../asset-manifest.ts\";\nimport { getCsrfToken } from \"../middleware/csrf.ts\";\nimport { getStore } from \"../store.ts\";\nimport { Style, css } from \"./css.ts\";\nimport { BareShell } from \"./shell/bare.tsx\";\nimport { bootScript } from \"./shell/boot-script.ts\";\nimport { clientScript } from \"./shell/client-script.ts\";\nimport type { NavConfig } from \"./shell/nav.ts\";\nimport { Sidebar } from \"./shell/sidebar.tsx\";\nimport { ToastRegion, TopBar } from \"./shell/topbar.tsx\";\nimport { baseStyle } from \"./styles.ts\";\nimport { DARK_THEME, LIGHT_THEME } from \"./theme.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Active section, project, and breadcrumb trail passed to the shell. */\nexport type { NavConfig };\n\n/** Rendered HTML content returned by page components. */\nexport type RenderedContent = string | Promise<string>;\n\n/**\n * Page frame: `default` is a readable column, `wide` uses the full viewport,\n * `bare` drops the app chrome (sign-in, invites).\n */\ntype PageLayout = \"default\" | \"wide\" | \"bare\";\n\nconst shellRoot = css`\n  /* shell */\n  display: grid;\n  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);\n  min-height: 100vh;\n  @media (max-width: 880px) {\n    & {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  }\n`;\n\nconst shellContent = css`\n  /* shell-content */\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: var(--space-6) var(--space-6) var(--space-8);\n  min-width: 0;\n  @media (max-width: 880px) {\n    & {\n      padding: var(--space-4);\n    }\n  }\n`;\n\nconst shellContentWide = css`\n  /* shell-content-wide */\n  ${shellContent}\n  max-width: none;\n`;\n\nconst shellBackdrop = css`\n  /* shell-backdrop */\n  position: fixed;\n  inset: 0;\n  z-index: 55;\n  background: rgb(0 0 0 / 0.4);\n  &[hidden] {\n    display: none;\n  }\n`;\n\n// Hono's JSX.Element is typed as `HtmlEscapedString | Promise<...>`, so JSX-returning\n// Functions can legitimately return a promise; the rule is a false positive here.\n/** Full HTML document shell with sidebar, top bar, theme, toasts, and HTMX. */\nexport const DocumentLayout: FC<{\n  title: string;\n  nav?: NavConfig;\n  layout?: PageLayout;\n  children?: unknown;\n}> = ({ title, nav, layout = \"default\", children }) => {\n  const { ui, config, sessionId } = getStore();\n  const name = ui.name ?? \"StoryShelf\";\n  const logo = ui.logo ?? assetManifest.mark.href;\n  const light = ui.lightTheme ?? LIGHT_THEME;\n  const dark = ui.darkTheme ?? DARK_THEME;\n\n  return (\n    <>\n      {/* Without a doctype browsers use quirks mode (form margins, line-box struts, …). */}\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\" data-theme=\"system\">\n        <head>\n          <meta charset=\"utf-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n          <meta name=\"color-scheme\" content=\"light dark\" />\n          <meta name=\"csrf-token\" content={getCsrfToken(config.secret, sessionId)} />\n          {/* Favicon is the product's own mark, not brandable: it identifies\n              StoryShelf in the tab strip. `ui.logo` stays overridable. */}\n          <link rel=\"icon\" type=\"image/svg+xml\" href={assetManifest.mark.href} />\n          <title>\n            {title} · {name}\n          </title>\n          <style dangerouslySetInnerHTML={{ __html: baseStyle(light, dark) }} />\n          <Style />\n          <script dangerouslySetInnerHTML={{ __html: bootScript() }} />\n        </head>\n        <body>\n          <a class=\"skip-link\" href=\"#main-content\">\n            Skip to content\n          </a>\n          {layout === \"bare\" ? (\n            <BareShell name={name} logo={logo}>\n              {children}\n            </BareShell>\n          ) : (\n            <>\n              <div class={shellRoot}>\n                <Sidebar nav={nav} name={name} logo={logo} />\n                <div>\n                  <TopBar nav={nav} />\n                  <main\n                    id=\"main-content\"\n                    class={layout === \"wide\" ? shellContentWide : shellContent}\n                    tabindex={-1}\n                  >\n                    {children}\n                  </main>\n                </div>\n              </div>\n              <div class={shellBackdrop} data-sidebar-backdrop hidden />\n            </>\n          )}\n          <ToastRegion />\n          <script src={assetManifest.htmx.href} />\n          <script dangerouslySetInnerHTML={{ __html: clientScript() }} />\n        </body>\n      </html>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAM,YAAY,GAAG;;;;;;;;;;;AAYrB,MAAM,eAAe,GAAG;;;;;;;;;;;;;AAcxB,MAAM,mBAAmB,GAAG;;IAExB,aAAa;;;AAIjB,MAAM,gBAAgB,GAAG;;;;;;;;;;;AAczB,MAAa,kBAKP,EAAE,OAAO,KAAK,SAAS,WAAW,eAAe;CACrD,MAAM,EAAE,IAAI,QAAQ,cAAc,SAAS;CAC3C,MAAM,OAAO,GAAG,QAAQ;CACxB,MAAM,OAAO,GAAG,QAAQ,cAAc,KAAK;CAC3C,MAAM,QAAQ,GAAG,cAAc;CAC/B,MAAM,OAAO,GAAG,aAAa;CAE7B,OACE,qBAAA,UAAA,EAAA,UAAA,CAEG,IAAI,iBAAiB,GACtB,qBAAC,QAAD;EAAM,MAAK;EAAK,cAAW;EAA3B,UAAA,CACE,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,QAAD,EAAM,SAAQ,QAAS,CAAA;GACvB,oBAAC,QAAD;IAAM,MAAK;IAAW,SAAQ;GAAuC,CAAA;GACrE,oBAAC,QAAD;IAAM,MAAK;IAAe,SAAQ;GAAc,CAAA;GAChD,oBAAC,QAAD;IAAM,MAAK;IAAa,SAAS,aAAa,OAAO,QAAQ,SAAS;GAAI,CAAA;GAG1E,oBAAC,QAAD;IAAM,KAAI;IAAO,MAAK;IAAgB,MAAM,cAAc,KAAK;GAAO,CAAA;GACtE,qBAAC,SAAD,EAAA,UAAA;IACG;IAAM;IAAI;GACN,EAAA,CAAA;GACP,oBAAC,SAAD,EAAO,yBAAyB,EAAE,QAAQ,UAAU,OAAO,IAAI,EAAE,EAAI,CAAA;GACrE,oBAAC,OAAD,CAAQ,CAAA;GACR,oBAAC,UAAD,EAAQ,yBAAyB,EAAE,QAAQ,WAAW,EAAE,EAAI,CAAA;EACxD,EAAA,CAAA,GACN,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,KAAD;IAAG,OAAM;IAAY,MAAK;IAAgB,UAAA;GAEvC,CAAA;GACF,WAAW,SACV,oBAAC,WAAD;IAAiB;IAAY;IAC1B;GACQ,CAAA,IAEX,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA,CACE,oBAAC,SAAD;KAAc;KAAW;KAAY;IAAO,CAAA,GAC5C,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,QAAD,EAAa,IAAM,CAAA,GACnB,oBAAC,QAAD;KACE,IAAG;KACH,OAAO,WAAW,SAAS,mBAAmB;KAC9C,UAAU;KAET;IACG,CAAA,CACH,EAAA,CAAA,CACF;GACL,CAAA,GAAA,oBAAC,OAAD;IAAK,OAAO;IAAe,yBAAA;IAAsB,QAAA;GAAQ,CAAA,CACzD,EAAA,CAAA;GAEJ,oBAAC,aAAD,CAAc,CAAA;GACd,oBAAC,UAAD,EAAQ,KAAK,cAAc,KAAK,KAAO,CAAA;GACvC,oBAAC,UAAD,EAAQ,yBAAyB,EAAE,QAAQ,aAAa,EAAE,EAAI,CAAA;EAC1D,EAAA,CAAA,CACF;CACN,CAAA,CAAA,EAAA,CAAA;AAEN"}

package/dist/ui/dropdown.mjs

@@ -0,0 +1,181 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { Icon } from "./icons/icon.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/ui/dropdown.tsx
+const dropdownRoot = css`
+  /* dropdown */
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+`;
+const dropdownRootBlock = css`
+  /* dropdown-block */
+  ${dropdownRoot}
+  display: block;
+  width: 100%;
+`;
+const dropdownTrigger = css`
+  /* dropdown-trigger */
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 36px;
+  padding: 0.25rem 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-card);
+  color: var(--text-primary);
+  font-size: var(--text-base);
+  font-weight: 600;
+  cursor: pointer;
+  &::-webkit-details-marker {
+    display: none;
+  }
+  &:hover {
+    background: var(--surface-subtle);
+  }
+`;
+const dropdownTriggerGhost = css`
+  /* dropdown-trigger-ghost */
+  ${dropdownTrigger}
+  min-height: 34px;
+  width: 100%;
+  justify-content: space-between;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  &:hover {
+    background: var(--surface-muted);
+  }
+`;
+const dropdownMenu = css`
+  /* dropdown-menu */
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 12rem;
+  padding: 0.25rem;
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-2);
+`;
+const dropdownMenuEnd = css`
+  /* dropdown-menu-end */
+  ${dropdownMenu}
+  left: auto;
+  right: 0;
+`;
+const dropdownMenuAbove = css`
+  /* dropdown-menu-above */
+  ${dropdownMenu}
+  top: auto;
+  bottom: calc(100% + 4px);
+`;
+const dropdownMenuAboveEnd = css`
+  /* dropdown-menu-above-end */
+  ${dropdownMenuEnd}
+  top: auto;
+  bottom: calc(100% + 4px);
+`;
+const menuClasses = {
+	below: {
+		start: dropdownMenu,
+		end: dropdownMenuEnd
+	},
+	above: {
+		start: dropdownMenuAbove,
+		end: dropdownMenuAboveEnd
+	}
+};
+const dropdownItem = css`
+  /* dropdown-item */
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.45rem 0.6rem;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-primary);
+  font: inherit;
+  font-size: var(--text-base);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    background: var(--surface-muted);
+    text-decoration: none;
+  }
+  &[aria-current="true"] {
+    background: var(--accent-subtle);
+    color: var(--accent-fg);
+  }
+`;
+const dropdownDivider = css`
+  /* dropdown-divider */
+  height: 1px;
+  margin: 0.25rem 0;
+  background: var(--border-subtle);
+`;
+/** Popover menu built on native `<details>`; `align="end"` opens leftward. */
+const Dropdown = ({ label, align = "start", ariaLabel, iconOnly = false, placement = "below", block = false, children }) => {
+	return /* @__PURE__ */ jsxs("details", {
+		class: block ? dropdownRootBlock : dropdownRoot,
+		"data-dropdown": true,
+		children: [/* @__PURE__ */ jsxs("summary", {
+			class: block ? dropdownTriggerGhost : dropdownTrigger,
+			"aria-label": ariaLabel,
+			children: [label, iconOnly ? null : /* @__PURE__ */ jsx(Icon, {
+				name: placement === "above" ? "chevron-up" : "chevron-down",
+				size: "sm"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			class: menuClasses[placement][align],
+			role: "menu",
+			children
+		})]
+	});
+};
+/** Menu entry: a link when `href` is set, otherwise a button (forms, actions). */
+const DropdownItem = ({ href, icon, current = false, children, ...rest }) => {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [icon ? /* @__PURE__ */ jsx(Icon, {
+		name: icon,
+		size: "sm"
+	}) : null, children] });
+	const aria = current ? "true" : void 0;
+	if (href) return /* @__PURE__ */ jsx("a", {
+		class: dropdownItem,
+		role: "menuitem",
+		href,
+		"aria-current": aria,
+		...rest,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		class: dropdownItem,
+		role: "menuitem",
+		type: "button",
+		"aria-current": aria,
+		...rest,
+		children: content
+	});
+};
+/** Hairline between menu groups. */
+const DropdownDivider = () => {
+	return /* @__PURE__ */ jsx("div", {
+		class: dropdownDivider,
+		role: "separator"
+	});
+};
+//#endregion
+export { Dropdown, DropdownDivider, DropdownItem };
+
+//# sourceMappingURL=dropdown.mjs.map

package/dist/ui/dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../src/ui/dropdown.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Icon } from \"./icons/icon.tsx\";\nimport type { IconName } from \"./icons/paths.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst dropdownRoot = css`\n  /* dropdown */\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n`;\n\nconst dropdownRootBlock = css`\n  /* dropdown-block */\n  ${dropdownRoot}\n  display: block;\n  width: 100%;\n`;\n\nconst dropdownTrigger = css`\n  /* dropdown-trigger */\n  list-style: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  min-height: 36px;\n  padding: 0.25rem 0.6rem;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--surface-card);\n  color: var(--text-primary);\n  font-size: var(--text-base);\n  font-weight: 600;\n  cursor: pointer;\n  &::-webkit-details-marker {\n    display: none;\n  }\n  &:hover {\n    background: var(--surface-subtle);\n  }\n`;\n\nconst dropdownTriggerGhost = css`\n  /* dropdown-trigger-ghost */\n  ${dropdownTrigger}\n  min-height: 34px;\n  width: 100%;\n  justify-content: space-between;\n  border-color: transparent;\n  background: transparent;\n  box-shadow: none;\n  &:hover {\n    background: var(--surface-muted);\n  }\n`;\n\nconst dropdownMenu = css`\n  /* dropdown-menu */\n  position: absolute;\n  z-index: 50;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 12rem;\n  padding: 0.25rem;\n  background: var(--surface-card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-2);\n`;\n\nconst dropdownMenuEnd = css`\n  /* dropdown-menu-end */\n  ${dropdownMenu}\n  left: auto;\n  right: 0;\n`;\n\nconst dropdownMenuAbove = css`\n  /* dropdown-menu-above */\n  ${dropdownMenu}\n  top: auto;\n  bottom: calc(100% + 4px);\n`;\n\nconst dropdownMenuAboveEnd = css`\n  /* dropdown-menu-above-end */\n  ${dropdownMenuEnd}\n  top: auto;\n  bottom: calc(100% + 4px);\n`;\n\nconst menuClasses = {\n  below: { start: dropdownMenu, end: dropdownMenuEnd },\n  above: { start: dropdownMenuAbove, end: dropdownMenuAboveEnd },\n};\n\nconst dropdownItem = css`\n  /* dropdown-item */\n  appearance: none;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.45rem 0.6rem;\n  border: 0;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--text-base);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  &:hover {\n    background: var(--surface-muted);\n    text-decoration: none;\n  }\n  &[aria-current=\"true\"] {\n    background: var(--accent-subtle);\n    color: var(--accent-fg);\n  }\n`;\n\nconst dropdownDivider = css`\n  /* dropdown-divider */\n  height: 1px;\n  margin: 0.25rem 0;\n  background: var(--border-subtle);\n`;\n\n/** Popover menu built on native `<details>`; `align=\"end\"` opens leftward. */\nexport const Dropdown: FC<{\n  label: unknown;\n  align?: \"start\" | \"end\";\n  /** Accessible name when the label is only an icon or avatar. */\n  ariaLabel?: string;\n  /** Hide the trailing chevron (icon-only triggers). */\n  iconOnly?: boolean;\n  /** Open upward (menus anchored at the bottom of the screen). */\n  placement?: \"below\" | \"above\";\n  /** Full-width, borderless trigger (sidebar rows). */\n  block?: boolean;\n  children?: unknown;\n}> = ({\n  label,\n  align = \"start\",\n  ariaLabel,\n  iconOnly = false,\n  placement = \"below\",\n  block = false,\n  children,\n}) => {\n  return (\n    <details class={block ? dropdownRootBlock : dropdownRoot} data-dropdown>\n      <summary class={block ? dropdownTriggerGhost : dropdownTrigger} aria-label={ariaLabel}>\n        {label}\n        {iconOnly ? null : (\n          <Icon name={placement === \"above\" ? \"chevron-up\" : \"chevron-down\"} size=\"sm\" />\n        )}\n      </summary>\n      <div class={menuClasses[placement][align]} role=\"menu\">\n        {children}\n      </div>\n    </details>\n  );\n};\n\n/** Menu entry: a link when `href` is set, otherwise a button (forms, actions). */\nexport const DropdownItem: FC<{\n  href?: string;\n  icon?: IconName;\n  current?: boolean;\n  children?: unknown;\n  [key: string]: unknown;\n}> = ({ href, icon, current = false, children, ...rest }) => {\n  const content = (\n    <>\n      {icon ? <Icon name={icon} size=\"sm\" /> : null}\n      {children}\n    </>\n  );\n  const aria = current ? \"true\" : undefined;\n  if (href) {\n    return (\n      <a class={dropdownItem} role=\"menuitem\" href={href} aria-current={aria} {...rest}>\n        {content}\n      </a>\n    );\n  }\n  return (\n    <button class={dropdownItem} role=\"menuitem\" type=\"button\" aria-current={aria} {...rest}>\n      {content}\n    </button>\n  );\n};\n\n/** Hairline between menu groups. */\nexport const DropdownDivider: FC = () => {\n  return <div class={dropdownDivider} role=\"separator\" />;\n};\n"],"mappings":";;;;;;;AAOA,MAAM,eAAe,GAAG;;;;;;AAOxB,MAAM,oBAAoB,GAAG;;IAEzB,aAAa;;;;AAKjB,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;AAuB3B,MAAM,uBAAuB,GAAG;;IAE5B,gBAAgB;;;;;;;;;;;AAYpB,MAAM,eAAe,GAAG;;;;;;;;;;;;;AAcxB,MAAM,kBAAkB,GAAG;;IAEvB,aAAa;;;;AAKjB,MAAM,oBAAoB,GAAG;;IAEzB,aAAa;;;;AAKjB,MAAM,uBAAuB,GAAG;;IAE5B,gBAAgB;;;;AAKpB,MAAM,cAAc;CAClB,OAAO;EAAE,OAAO;EAAc,KAAK;CAAgB;CACnD,OAAO;EAAE,OAAO;EAAmB,KAAK;CAAqB;AAC/D;AAEA,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BxB,MAAM,kBAAkB,GAAG;;;;;;;AAQ3B,MAAa,YAYP,EACJ,OACA,QAAQ,SACR,WACA,WAAW,OACX,YAAY,SACZ,QAAQ,OACR,eACI;CACJ,OACE,qBAAC,WAAD;EAAS,OAAO,QAAQ,oBAAoB;EAAc,iBAAA;EAA1D,UAAA,CACE,qBAAC,WAAD;GAAS,OAAO,QAAQ,uBAAuB;GAAiB,cAAY;GAA5E,UAAA,CACG,OACA,WAAW,OACV,oBAAC,MAAD;IAAM,MAAM,cAAc,UAAU,eAAe;IAAgB,MAAK;GAAM,CAAA,CAEzE;EACT,CAAA,GAAA,oBAAC,OAAD;GAAK,OAAO,YAAY,UAAU,CAAC;GAAQ,MAAK;GAC7C;EACE,CAAA,CACE;;AAEb;;AAGA,MAAa,gBAMP,EAAE,MAAM,MAAM,UAAU,OAAO,UAAU,GAAG,WAAW;CAC3D,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,OAAO,oBAAC,MAAD;EAAM,MAAM;EAAM,MAAK;CAAM,CAAA,IAAI,MACxC,QACD,EAAA,CAAA;CAEJ,MAAM,OAAO,UAAU,SAAS,KAAA;CAChC,IAAI,MACF,OACE,oBAAC,KAAD;EAAG,OAAO;EAAc,MAAK;EAAiB;EAAM,gBAAc;EAAM,GAAI;EACzE,UAAA;CACA,CAAA;CAGP,OACE,oBAAC,UAAD;EAAQ,OAAO;EAAc,MAAK;EAAW,MAAK;EAAS,gBAAc;EAAM,GAAI;EAChF,UAAA;CACK,CAAA;AAEZ;;AAGA,MAAa,wBAA4B;CACvC,OAAO,oBAAC,OAAD;EAAK,OAAO;EAAiB,MAAK;CAAa,CAAA;AACxD"}