@storyshelf/app 0.5.3

package/dist/ui/shell/sidebar.mjs

@@ -0,0 +1,323 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "../../store.mjs";
+import { css } from "../css.mjs";
+import { Icon } from "../icons/icon.mjs";
+import { ThemeMenu, UserMenu } from "./account.mjs";
+import { adminNavItems, developerNavItems, projectNavItems } from "./nav.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createUrlBuilder, safeImageUrl } from "@storyshelf/core/urls";
+//#region src/ui/shell/sidebar.tsx
+/**
+* Left rail. Collapses to icons only on desktop (`html[data-sidebar="rail"]`)
+* and becomes an off-canvas drawer on small screens.
+*/
+const shellSidebar = css`
+  /* shell-sidebar */
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-2);
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--border);
+  .sidebar__brand {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-height: 40px;
+    padding: 0 var(--space-2);
+    color: var(--text-primary);
+    font-weight: 650;
+    font-size: var(--text-lg);
+    letter-spacing: -0.01em;
+    text-decoration: none;
+  }
+  .sidebar__brand:hover {
+    text-decoration: none;
+  }
+  .sidebar__mark {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius);
+    background: var(--accent);
+    color: var(--accent-contrast);
+  }
+  .sidebar__logo {
+    flex: none;
+    border-radius: var(--radius-sm);
+    object-fit: contain;
+  }
+  .sidebar__nav {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .sidebar__section {
+    margin: var(--space-4) 0 var(--space-1);
+    padding: 0 var(--space-3);
+    color: var(--text-secondary);
+    font-size: 0.68rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .sidebar__link {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    min-height: 38px;
+    padding: 0.4rem var(--space-3);
+    border-radius: var(--radius);
+    color: var(--text-secondary);
+    font-size: var(--text-base);
+    font-weight: 500;
+    text-decoration: none;
+    white-space: nowrap;
+    transition:
+      background var(--dur-fast) var(--ease),
+      color var(--dur-fast) var(--ease);
+  }
+  .sidebar__link:hover {
+    background: var(--surface-muted);
+    color: var(--text-primary);
+    text-decoration: none;
+  }
+  .sidebar__link--active {
+    background: var(--accent-subtle);
+    color: var(--accent-fg);
+    font-weight: 600;
+  }
+  .sidebar__link--active:hover {
+    background: var(--accent-subtle);
+    color: var(--accent-fg);
+  }
+  .sidebar__link--active svg {
+    color: var(--accent);
+  }
+  .sidebar__ext {
+    margin-left: auto;
+    opacity: 0.6;
+  }
+  .sidebar__footer {
+    display: grid;
+    gap: var(--space-1);
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--border-subtle);
+  }
+  .sidebar__tools {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+  .sidebar__tools > details {
+    flex: none;
+    width: auto;
+  }
+  .sidebar__tools .sidebar__collapse {
+    flex: 1;
+    width: auto;
+  }
+  .sidebar__collapse {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    min-height: 36px;
+    padding: 0.4rem var(--space-3);
+    border: 0;
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--text-secondary);
+    font: inherit;
+    font-size: var(--text-sm);
+    cursor: pointer;
+  }
+  .sidebar__collapse:hover {
+    background: var(--surface-muted);
+    color: var(--text-primary);
+  }
+  @media (min-width: 881px) {
+    html[data-sidebar="rail"] & .sidebar__label,
+    html[data-sidebar="rail"] & .sidebar__section,
+    html[data-sidebar="rail"] & .sidebar__ext {
+      display: none;
+    }
+    html[data-sidebar="rail"] & .sidebar__link,
+    html[data-sidebar="rail"] & .sidebar__collapse,
+    html[data-sidebar="rail"] & .sidebar__brand {
+      justify-content: center;
+      padding-inline: 0;
+    }
+    html[data-sidebar="rail"] & .sidebar__collapse svg {
+      transform: rotate(180deg);
+    }
+    html[data-sidebar="rail"] & .sidebar__footer summary {
+      justify-content: center;
+    }
+    html[data-sidebar="rail"] & .sidebar__footer summary > svg:last-child {
+      display: none;
+    }
+    html[data-sidebar="rail"] & .sidebar__tools {
+      flex-direction: column;
+    }
+  }
+  @media (max-width: 880px) {
+    & {
+      position: fixed;
+      inset: 0 auto 0 0;
+      z-index: 60;
+      width: min(280px, 85vw);
+      height: 100dvh;
+      transform: translateX(-100%);
+      transition: transform var(--dur-base) var(--ease);
+      box-shadow: var(--shadow-3);
+    }
+    &.sidebar--open {
+      transform: translateX(0);
+    }
+    & .sidebar__collapse {
+      display: none;
+    }
+  }
+`;
+const NavLink = ({ item, active }) => {
+	const current = active === item.key;
+	return /* @__PURE__ */ jsxs("a", {
+		class: `sidebar__link${current ? " sidebar__link--active" : ""}`,
+		href: item.href,
+		title: item.label,
+		"aria-current": current ? "page" : void 0,
+		target: item.external ? "_blank" : void 0,
+		rel: item.external ? "noopener" : void 0,
+		children: [
+			/* @__PURE__ */ jsx(Icon, { name: item.icon }),
+			/* @__PURE__ */ jsx("span", {
+				class: "sidebar__label",
+				children: item.label
+			}),
+			item.external ? /* @__PURE__ */ jsx("span", {
+				class: "sidebar__ext",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "external-link",
+					size: "sm"
+				})
+			}) : null
+		]
+	});
+};
+const NavSection = ({ title, items, active }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		class: "sidebar__section",
+		children: title
+	}), items.map((item) => /* @__PURE__ */ jsx(NavLink, {
+		item,
+		active
+	}, item.key))] });
+};
+const Brand = ({ name, logo, href }) => {
+	const safeLogo = safeImageUrl(logo);
+	return /* @__PURE__ */ jsxs("a", {
+		class: "sidebar__brand",
+		href,
+		title: name,
+		children: [safeLogo ? /* @__PURE__ */ jsx("img", {
+			class: "sidebar__logo",
+			src: safeLogo,
+			alt: "",
+			width: "28",
+			height: "28"
+		}) : /* @__PURE__ */ jsx("span", {
+			class: "sidebar__mark",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "layers",
+				size: "sm"
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			class: "sidebar__label",
+			children: name
+		})]
+	});
+};
+/** Primary navigation: brand, workspace, project, developer, and admin entries. */
+const Sidebar = ({ nav, name, logo }) => {
+	const { user, authEnabled, config } = getStore();
+	const urls = createUrlBuilder("/", config.publishedBaseDomain);
+	const showAdmin = !authEnabled || user?.role === "admin";
+	const projects = {
+		key: "projects",
+		label: "Projects",
+		href: urls.projects(),
+		icon: "folder"
+	};
+	return /* @__PURE__ */ jsxs("aside", {
+		id: "sidebar",
+		class: shellSidebar,
+		"aria-label": "Primary",
+		"data-sidebar": true,
+		children: [
+			/* @__PURE__ */ jsx(Brand, {
+				name,
+				logo,
+				href: urls.projects()
+			}),
+			/* @__PURE__ */ jsxs("nav", {
+				class: "sidebar__nav",
+				children: [
+					/* @__PURE__ */ jsx(NavLink, {
+						item: projects,
+						active: nav?.active
+					}),
+					nav?.projectSlug ? /* @__PURE__ */ jsx(NavSection, {
+						title: "Project",
+						items: projectNavItems(urls, nav.projectSlug),
+						active: nav.active
+					}) : null,
+					/* @__PURE__ */ jsx(NavSection, {
+						title: "Developer",
+						items: developerNavItems(),
+						active: nav?.active
+					}),
+					showAdmin ? /* @__PURE__ */ jsx(NavSection, {
+						title: "Administration",
+						items: adminNavItems(),
+						active: nav?.active
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				class: "sidebar__footer",
+				children: [/* @__PURE__ */ jsx(UserMenu, {}), /* @__PURE__ */ jsxs("div", {
+					class: "sidebar__tools",
+					children: [/* @__PURE__ */ jsx(ThemeMenu, {}), /* @__PURE__ */ jsxs("button", {
+						class: "sidebar__collapse",
+						type: "button",
+						"data-sidebar-collapse": true,
+						"aria-label": "Collapse or expand sidebar",
+						title: "Collapse or expand sidebar",
+						children: [/* @__PURE__ */ jsx(Icon, { name: "chevrons-left" }), /* @__PURE__ */ jsx("span", {
+							class: "sidebar__label",
+							children: "Collapse"
+						})]
+					})]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { Sidebar };
+
+//# sourceMappingURL=sidebar.mjs.map

package/dist/ui/shell/sidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.mjs","names":[],"sources":["../../../src/ui/shell/sidebar.tsx"],"sourcesContent":["import { createUrlBuilder, safeImageUrl } from \"@storyshelf/core/urls\";\nimport type { FC } from \"hono/jsx\";\nimport { getStore } from \"../../store.ts\";\nimport { css } from \"../css.ts\";\nimport { Icon } from \"../icons/icon.tsx\";\nimport { ThemeMenu, UserMenu } from \"./account.tsx\";\nimport {\n  adminNavItems,\n  developerNavItems,\n  projectNavItems,\n  type NavConfig,\n  type NavItem,\n} from \"./nav.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Left rail. Collapses to icons only on desktop (`html[data-sidebar=\"rail\"]`)\n * and becomes an off-canvas drawer on small screens.\n */\nconst shellSidebar = css`\n  /* shell-sidebar */\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-2);\n  background: var(--sidebar-bg);\n  border-right: 1px solid var(--border);\n  .sidebar__brand {\n    display: flex;\n    align-items: center;\n    gap: 0.6rem;\n    min-height: 40px;\n    padding: 0 var(--space-2);\n    color: var(--text-primary);\n    font-weight: 650;\n    font-size: var(--text-lg);\n    letter-spacing: -0.01em;\n    text-decoration: none;\n  }\n  .sidebar__brand:hover {\n    text-decoration: none;\n  }\n  .sidebar__mark {\n    flex: none;\n    display: inline-grid;\n    place-items: center;\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius);\n    background: var(--accent);\n    color: var(--accent-contrast);\n  }\n  .sidebar__logo {\n    flex: none;\n    border-radius: var(--radius-sm);\n    object-fit: contain;\n  }\n  .sidebar__nav {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex: 1;\n    min-height: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n  .sidebar__section {\n    margin: var(--space-4) 0 var(--space-1);\n    padding: 0 var(--space-3);\n    color: var(--text-secondary);\n    font-size: 0.68rem;\n    font-weight: 600;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    white-space: nowrap;\n  }\n  .sidebar__link {\n    display: flex;\n    align-items: center;\n    gap: 0.65rem;\n    min-height: 38px;\n    padding: 0.4rem var(--space-3);\n    border-radius: var(--radius);\n    color: var(--text-secondary);\n    font-size: var(--text-base);\n    font-weight: 500;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background var(--dur-fast) var(--ease),\n      color var(--dur-fast) var(--ease);\n  }\n  .sidebar__link:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n  .sidebar__link--active {\n    background: var(--accent-subtle);\n    color: var(--accent-fg);\n    font-weight: 600;\n  }\n  .sidebar__link--active:hover {\n    background: var(--accent-subtle);\n    color: var(--accent-fg);\n  }\n  .sidebar__link--active svg {\n    color: var(--accent);\n  }\n  .sidebar__ext {\n    margin-left: auto;\n    opacity: 0.6;\n  }\n  .sidebar__footer {\n    display: grid;\n    gap: var(--space-1);\n    padding-top: var(--space-2);\n    border-top: 1px solid var(--border-subtle);\n  }\n  .sidebar__tools {\n    display: flex;\n    align-items: center;\n    gap: var(--space-1);\n  }\n  .sidebar__tools > details {\n    flex: none;\n    width: auto;\n  }\n  .sidebar__tools .sidebar__collapse {\n    flex: 1;\n    width: auto;\n  }\n  .sidebar__collapse {\n    appearance: none;\n    display: flex;\n    align-items: center;\n    gap: 0.65rem;\n    min-height: 36px;\n    padding: 0.4rem var(--space-3);\n    border: 0;\n    border-radius: var(--radius);\n    background: transparent;\n    color: var(--text-secondary);\n    font: inherit;\n    font-size: var(--text-sm);\n    cursor: pointer;\n  }\n  .sidebar__collapse:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n  }\n  @media (min-width: 881px) {\n    html[data-sidebar=\"rail\"] & .sidebar__label,\n    html[data-sidebar=\"rail\"] & .sidebar__section,\n    html[data-sidebar=\"rail\"] & .sidebar__ext {\n      display: none;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__link,\n    html[data-sidebar=\"rail\"] & .sidebar__collapse,\n    html[data-sidebar=\"rail\"] & .sidebar__brand {\n      justify-content: center;\n      padding-inline: 0;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__collapse svg {\n      transform: rotate(180deg);\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__footer summary {\n      justify-content: center;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__footer summary > svg:last-child {\n      display: none;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__tools {\n      flex-direction: column;\n    }\n  }\n  @media (max-width: 880px) {\n    & {\n      position: fixed;\n      inset: 0 auto 0 0;\n      z-index: 60;\n      width: min(280px, 85vw);\n      height: 100dvh;\n      transform: translateX(-100%);\n      transition: transform var(--dur-base) var(--ease);\n      box-shadow: var(--shadow-3);\n    }\n    &.sidebar--open {\n      transform: translateX(0);\n    }\n    & .sidebar__collapse {\n      display: none;\n    }\n  }\n`;\n\nconst NavLink: FC<{ item: NavItem; active?: string }> = ({ item, active }) => {\n  const current = active === item.key;\n  return (\n    <a\n      class={`sidebar__link${current ? \" sidebar__link--active\" : \"\"}`}\n      href={item.href}\n      title={item.label}\n      aria-current={current ? \"page\" : undefined}\n      target={item.external ? \"_blank\" : undefined}\n      rel={item.external ? \"noopener\" : undefined}\n    >\n      <Icon name={item.icon} />\n      <span class=\"sidebar__label\">{item.label}</span>\n      {item.external ? (\n        <span class=\"sidebar__ext\">\n          <Icon name=\"external-link\" size=\"sm\" />\n        </span>\n      ) : null}\n    </a>\n  );\n};\n\nconst NavSection: FC<{ title: string; items: NavItem[]; active?: string }> = ({\n  title,\n  items,\n  active,\n}) => {\n  return (\n    <>\n      <div class=\"sidebar__section\">{title}</div>\n      {items.map((item) => (\n        <NavLink key={item.key} item={item} active={active} />\n      ))}\n    </>\n  );\n};\n\nconst Brand: FC<{ name: string; logo?: string; href: string }> = ({ name, logo, href }) => {\n  const safeLogo = safeImageUrl(logo);\n  return (\n    <a class=\"sidebar__brand\" href={href} title={name}>\n      {safeLogo ? (\n        <img class=\"sidebar__logo\" src={safeLogo} alt=\"\" width=\"28\" height=\"28\" />\n      ) : (\n        <span class=\"sidebar__mark\" aria-hidden=\"true\">\n          <Icon name=\"layers\" size=\"sm\" />\n        </span>\n      )}\n      <span class=\"sidebar__label\">{name}</span>\n    </a>\n  );\n};\n\n/** Primary navigation: brand, workspace, project, developer, and admin entries. */\nexport const Sidebar: FC<{ nav?: NavConfig; name: string; logo?: string }> = ({\n  nav,\n  name,\n  logo,\n}) => {\n  const { user, authEnabled, config } = getStore();\n  const urls = createUrlBuilder(\"/\", config.publishedBaseDomain);\n  const showAdmin = !authEnabled || user?.role === \"admin\";\n  const projects: NavItem = {\n    key: \"projects\",\n    label: \"Projects\",\n    href: urls.projects(),\n    icon: \"folder\",\n  };\n  return (\n    <aside id=\"sidebar\" class={shellSidebar} aria-label=\"Primary\" data-sidebar>\n      <Brand name={name} logo={logo} href={urls.projects()} />\n      <nav class=\"sidebar__nav\">\n        <NavLink item={projects} active={nav?.active} />\n        {nav?.projectSlug ? (\n          <NavSection\n            title=\"Project\"\n            items={projectNavItems(urls, nav.projectSlug)}\n            active={nav.active}\n          />\n        ) : null}\n        <NavSection title=\"Developer\" items={developerNavItems()} active={nav?.active} />\n        {showAdmin ? (\n          <NavSection title=\"Administration\" items={adminNavItems()} active={nav?.active} />\n        ) : null}\n      </nav>\n      <div class=\"sidebar__footer\">\n        <UserMenu />\n        <div class=\"sidebar__tools\">\n          <ThemeMenu />\n          <button\n            class=\"sidebar__collapse\"\n            type=\"button\"\n            data-sidebar-collapse\n            aria-label=\"Collapse or expand sidebar\"\n            title=\"Collapse or expand sidebar\"\n          >\n            <Icon name=\"chevrons-left\" />\n            <span class=\"sidebar__label\">Collapse</span>\n          </button>\n        </div>\n      </div>\n    </aside>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/shell/topbar.mjs

@@ -0,0 +1,268 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "../../store.mjs";
+import { css } from "../css.mjs";
+import { Icon } from "../icons/icon.mjs";
+import { Button } from "../buttons.mjs";
+import { Dropdown, DropdownDivider, DropdownItem } from "../dropdown.mjs";
+import { breadcrumbs } from "./nav.mjs";
+import { ProjectModel } from "@storyshelf/core/models";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createUrlBuilder } from "@storyshelf/core/urls";
+//#region src/ui/shell/topbar.tsx
+/** Slim, translucent bar: project picker plus breadcrumbs (account lives in the sidebar). */
+const shellTopbar = css`
+  /* shell-topbar */
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  height: var(--topbar-height);
+  background: color-mix(in srgb, var(--surface-base) 86%, transparent);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border);
+  .topbar__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    height: 100%;
+    padding: 0 var(--space-6);
+  }
+  .topbar__left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    flex: 1;
+    overflow: visible;
+  }
+  .topbar__menu {
+    display: none;
+  }
+  .topbar__menu button {
+    min-width: 36px;
+    min-height: 36px;
+    padding: 0 0.5rem;
+  }
+  .topbar__left nav {
+    min-width: 0;
+  }
+  .topbar__picker {
+    overflow: hidden;
+    max-width: 26ch;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .crumbs {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    color: var(--text-secondary);
+    font-size: var(--text-base);
+  }
+  .crumbs li {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+  .crumbs li::before {
+    content: "›";
+    color: var(--text-muted);
+  }
+  .crumbs a {
+    overflow: hidden;
+    max-width: 28ch;
+    color: var(--text-secondary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .crumbs a:hover {
+    color: var(--text-primary);
+    text-decoration: none;
+  }
+  @media (max-width: 880px) {
+    & .topbar__inner {
+      padding: 0 var(--space-4);
+    }
+    & .topbar__menu {
+      display: inline-flex;
+    }
+    & .crumbs li:not(:last-child) {
+      display: none;
+    }
+    & .topbar__picker {
+      display: none;
+    }
+    & .topbar__left summary {
+      min-width: 36px;
+      justify-content: center;
+      padding: 0.25rem 0.5rem;
+    }
+    & .topbar__pick[data-single] summary > svg:last-child {
+      display: none;
+    }
+    & .crumbs a {
+      max-width: 22ch;
+    }
+  }
+`;
+const toastRegion = css`
+  /* toast-region */
+  position: fixed;
+  top: calc(var(--topbar-height) + var(--space-3));
+  right: var(--space-4);
+  z-index: 80;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  max-width: min(360px, calc(100vw - 2rem));
+  pointer-events: none;
+  .toast {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.6rem;
+    padding: 0.7rem 0.9rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface-card);
+    box-shadow: var(--shadow-3);
+    font-size: var(--text-base);
+    pointer-events: auto;
+    animation: toast-in var(--dur-base) var(--ease);
+  }
+  .toast svg {
+    margin-top: 0.1rem;
+  }
+  .toast[data-tone="success"] svg {
+    color: var(--status-approved);
+  }
+  .toast[data-tone="danger"] svg {
+    color: var(--status-rejected);
+  }
+  .toast[data-tone="warning"] svg {
+    color: var(--status-new);
+  }
+  .toast[data-tone="info"] svg {
+    color: var(--accent);
+  }
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+  }
+`;
+async function listProjects() {
+	try {
+		return (await new ProjectModel(getStore().db).list()).map((project) => ({
+			slug: project.slug,
+			name: project.name
+		}));
+	} catch {
+		return [];
+	}
+}
+/** Dropdown to jump between projects; on global pages it reads "All projects". */
+const ProjectPicker = async ({ nav }) => {
+	const { user, config } = getStore();
+	const urls = createUrlBuilder("/", config.publishedBaseDomain);
+	const projects = await listProjects();
+	const canCreate = !user || user.role === "admin" || user.role === "member";
+	const current = nav?.projectSlug;
+	const label = current ? nav?.projectName ?? current : "All projects";
+	return /* @__PURE__ */ jsx("span", {
+		class: "topbar__pick",
+		"data-single": projects.length <= 1 ? "true" : void 0,
+		children: /* @__PURE__ */ jsxs(Dropdown, {
+			ariaLabel: `Project: ${label}`,
+			label: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+				name: "folder",
+				size: "sm"
+			}), /* @__PURE__ */ jsx("span", {
+				class: "topbar__picker",
+				children: label
+			})] }),
+			children: [
+				projects.map((project) => /* @__PURE__ */ jsx(DropdownItem, {
+					href: urls.library(project.slug),
+					current: project.slug === current,
+					children: project.name
+				}, project.slug)),
+				projects.length > 0 ? /* @__PURE__ */ jsx(DropdownDivider, {}) : null,
+				/* @__PURE__ */ jsx(DropdownItem, {
+					href: urls.projects(),
+					icon: "folder",
+					current: !current,
+					children: "All projects"
+				}),
+				canCreate ? /* @__PURE__ */ jsx(DropdownItem, {
+					href: urls.projectsNew(),
+					icon: "plus",
+					children: "New project"
+				}) : null
+			]
+		})
+	});
+};
+/** Ancestor trail after the picker; the page itself is named by its heading. */
+const Crumbs = ({ crumbs }) => {
+	if (crumbs.length === 0) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Breadcrumb",
+		children: /* @__PURE__ */ jsx("ol", {
+			class: "crumbs",
+			children: crumbs.map((crumb) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				href: crumb.href,
+				children: crumb.label
+			}) }, crumb.href))
+		})
+	});
+};
+/** Top bar: mobile menu button, project picker, and breadcrumbs. */
+const TopBar = ({ nav }) => {
+	const urls = createUrlBuilder("/", getStore().config.publishedBaseDomain);
+	return /* @__PURE__ */ jsx("header", {
+		class: shellTopbar,
+		role: "banner",
+		children: /* @__PURE__ */ jsx("div", {
+			class: "topbar__inner",
+			children: /* @__PURE__ */ jsxs("div", {
+				class: "topbar__left",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						class: "topbar__menu",
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							icon: "menu",
+							"aria-label": "Toggle navigation",
+							"aria-expanded": "false",
+							"aria-controls": "sidebar",
+							"data-sidebar-toggle": true
+						})
+					}),
+					/* @__PURE__ */ jsx(ProjectPicker, { nav }),
+					/* @__PURE__ */ jsx(Crumbs, { crumbs: breadcrumbs(nav, urls) })
+				]
+			})
+		})
+	});
+};
+/** Live region the client script appends toasts to. */
+const ToastRegion = () => {
+	return /* @__PURE__ */ jsx("div", {
+		class: toastRegion,
+		"data-toast-region": true,
+		"aria-live": "polite",
+		"aria-atomic": "false"
+	});
+};
+//#endregion
+export { ToastRegion, TopBar };
+
+//# sourceMappingURL=topbar.mjs.map

package/dist/ui/shell/topbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"topbar.mjs","names":[],"sources":["../../../src/ui/shell/topbar.tsx"],"sourcesContent":["import { ProjectModel } from \"@storyshelf/core/models\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { FC } from \"hono/jsx\";\nimport { getStore } from \"../../store.ts\";\nimport { Button } from \"../buttons.tsx\";\nimport { css } from \"../css.ts\";\nimport { Dropdown, DropdownDivider, DropdownItem } from \"../dropdown.tsx\";\nimport { Icon } from \"../icons/icon.tsx\";\nimport { breadcrumbs, type NavConfig, type NavCrumb } from \"./nav.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Slim, translucent bar: project picker plus breadcrumbs (account lives in the sidebar). */\nconst shellTopbar = css`\n  /* shell-topbar */\n  position: sticky;\n  top: 0;\n  z-index: 40;\n  height: var(--topbar-height);\n  background: color-mix(in srgb, var(--surface-base) 86%, transparent);\n  backdrop-filter: blur(10px);\n  border-bottom: 1px solid var(--border);\n  .topbar__inner {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-3);\n    height: 100%;\n    padding: 0 var(--space-6);\n  }\n  .topbar__left {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    min-width: 0;\n    flex: 1;\n    overflow: visible;\n  }\n  .topbar__menu {\n    display: none;\n  }\n  .topbar__menu button {\n    min-width: 36px;\n    min-height: 36px;\n    padding: 0 0.5rem;\n  }\n  .topbar__left nav {\n    min-width: 0;\n  }\n  .topbar__picker {\n    overflow: hidden;\n    max-width: 26ch;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .crumbs {\n    display: flex;\n    align-items: center;\n    gap: var(--space-1);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--text-secondary);\n    font-size: var(--text-base);\n  }\n  .crumbs li {\n    display: flex;\n    align-items: center;\n    gap: var(--space-1);\n    min-width: 0;\n  }\n  .crumbs li::before {\n    content: \"›\";\n    color: var(--text-muted);\n  }\n  .crumbs a {\n    overflow: hidden;\n    max-width: 28ch;\n    color: var(--text-secondary);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .crumbs a:hover {\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n  @media (max-width: 880px) {\n    & .topbar__inner {\n      padding: 0 var(--space-4);\n    }\n    & .topbar__menu {\n      display: inline-flex;\n    }\n    & .crumbs li:not(:last-child) {\n      display: none;\n    }\n    & .topbar__picker {\n      display: none;\n    }\n    & .topbar__left summary {\n      min-width: 36px;\n      justify-content: center;\n      padding: 0.25rem 0.5rem;\n    }\n    & .topbar__pick[data-single] summary > svg:last-child {\n      display: none;\n    }\n    & .crumbs a {\n      max-width: 22ch;\n    }\n  }\n`;\n\nconst toastRegion = css`\n  /* toast-region */\n  position: fixed;\n  top: calc(var(--topbar-height) + var(--space-3));\n  right: var(--space-4);\n  z-index: 80;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  max-width: min(360px, calc(100vw - 2rem));\n  pointer-events: none;\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.6rem;\n    padding: 0.7rem 0.9rem;\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n    background: var(--surface-card);\n    box-shadow: var(--shadow-3);\n    font-size: var(--text-base);\n    pointer-events: auto;\n    animation: toast-in var(--dur-base) var(--ease);\n  }\n  .toast svg {\n    margin-top: 0.1rem;\n  }\n  .toast[data-tone=\"success\"] svg {\n    color: var(--status-approved);\n  }\n  .toast[data-tone=\"danger\"] svg {\n    color: var(--status-rejected);\n  }\n  .toast[data-tone=\"warning\"] svg {\n    color: var(--status-new);\n  }\n  .toast[data-tone=\"info\"] svg {\n    color: var(--accent);\n  }\n  @keyframes toast-in {\n    from {\n      opacity: 0;\n      transform: translateY(-8px);\n    }\n  }\n`;\n\ninterface PickerProject {\n  slug: string;\n  name: string;\n}\n\nasync function listProjects(): Promise<PickerProject[]> {\n  try {\n    const projects = await new ProjectModel(getStore().db).list();\n    return projects.map((project) => ({ slug: project.slug, name: project.name }));\n  } catch {\n    // The picker is a convenience; never fail a page render over it.\n    return [];\n  }\n}\n\n/** Dropdown to jump between projects; on global pages it reads \"All projects\". */\nconst ProjectPicker: FC<{ nav?: NavConfig }> = async ({ nav }) => {\n  const { user, config } = getStore();\n  const urls = createUrlBuilder(\"/\", config.publishedBaseDomain);\n  const projects = await listProjects();\n  const canCreate = !user || user.role === \"admin\" || user.role === \"member\";\n  const current = nav?.projectSlug;\n  const label = current ? (nav?.projectName ?? current) : \"All projects\";\n  return (\n    <span class=\"topbar__pick\" data-single={projects.length <= 1 ? \"true\" : undefined}>\n      <Dropdown\n        ariaLabel={`Project: ${label}`}\n        label={\n          <>\n            <Icon name=\"folder\" size=\"sm\" />\n            <span class=\"topbar__picker\">{label}</span>\n          </>\n        }\n      >\n        {projects.map((project) => (\n          <DropdownItem\n            key={project.slug}\n            href={urls.library(project.slug)}\n            current={project.slug === current}\n          >\n            {project.name}\n          </DropdownItem>\n        ))}\n        {projects.length > 0 ? <DropdownDivider /> : null}\n        <DropdownItem href={urls.projects()} icon=\"folder\" current={!current}>\n          All projects\n        </DropdownItem>\n        {canCreate ? (\n          <DropdownItem href={urls.projectsNew()} icon=\"plus\">\n            New project\n          </DropdownItem>\n        ) : null}\n      </Dropdown>\n    </span>\n  );\n};\n\n/** Ancestor trail after the picker; the page itself is named by its heading. */\nconst Crumbs: FC<{ crumbs: NavCrumb[] }> = ({ crumbs }) => {\n  if (crumbs.length === 0) {\n    return null;\n  }\n  return (\n    <nav aria-label=\"Breadcrumb\">\n      <ol class=\"crumbs\">\n        {crumbs.map((crumb) => (\n          <li key={crumb.href}>\n            <a href={crumb.href}>{crumb.label}</a>\n          </li>\n        ))}\n      </ol>\n    </nav>\n  );\n};\n\n/** Top bar: mobile menu button, project picker, and breadcrumbs. */\nexport const TopBar: FC<{ nav?: NavConfig }> = ({ nav }) => {\n  const urls = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain);\n  return (\n    <header class={shellTopbar} role=\"banner\">\n      <div class=\"topbar__inner\">\n        <div class=\"topbar__left\">\n          <span class=\"topbar__menu\">\n            <Button\n              variant=\"ghost\"\n              icon=\"menu\"\n              aria-label=\"Toggle navigation\"\n              aria-expanded=\"false\"\n              aria-controls=\"sidebar\"\n              data-sidebar-toggle\n            />\n          </span>\n          <ProjectPicker nav={nav} />\n          <Crumbs crumbs={breadcrumbs(nav, urls)} />\n        </div>\n      </div>\n    </header>\n  );\n};\n\n/** Live region the client script appends toasts to. */\nexport const ToastRegion: FC = () => {\n  return <div class={toastRegion} data-toast-region aria-live=\"polite\" aria-atomic=\"false\" />;\n};\n"],"mappings":"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"}