@storyshelf/app 0.5.3

package/dist/ui/layout.mjs

@@ -0,0 +1,173 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/ui/layout.tsx
+const cardBase = css`
+  /* card */
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+`;
+const cardColumn = css`
+  /* card-column */
+  ${cardBase}
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+const cardPadded = css`
+  /* card-padded */
+  ${cardBase}
+  padding: 1rem;
+`;
+const cardDanger = css`
+  /* card-danger */
+  ${cardPadded}
+  border-color: var(--status-rejected);
+`;
+const cardSection = css`
+  /* card-section */
+  padding: 1rem;
+`;
+const cardSectionDivider = css`
+  /* card-section-divider */
+  ${cardSection}
+  border-bottom: 1px solid var(--border);
+`;
+const pageHeader = css`
+  /* page-header */
+  margin-bottom: 1.25rem;
+`;
+const pageHeaderRow = css`
+  /* page-header-row */
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+const pageHeaderTitle = css`
+  /* page-header-title */
+  margin: 0;
+  font-size: 1.45rem;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+`;
+const pageHeaderDesc = css`
+  /* page-header-desc */
+  margin: 0.35rem 0 0;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  max-width: 65ch;
+  /* Links inside running text must not rely on colour alone. */
+  & a {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+`;
+const pageHeaderMeta = css`
+  /* page-header-meta */
+  margin: 0.4rem 0 0;
+  color: var(--text-secondary);
+  font-size: 0.82rem;
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  flex-wrap: wrap;
+  font-variant-numeric: tabular-nums;
+`;
+const pageHeaderActions = css`
+  /* page-header-actions */
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+`;
+const sectionTitleH2 = css`
+  /* section-title */
+  margin: 0 0 0.5rem;
+  font-size: 1.05rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+`;
+const sectionTitleH3 = css`
+  /* section-title-sm */
+  ${sectionTitleH2}
+  font-size: 0.95rem;
+`;
+const sectionTitleDanger = css`
+  /* section-title-danger */
+  ${sectionTitleH3}
+  color: var(--status-rejected);
+`;
+/** Card or section heading (h2 by default, h3 for subsections). */
+/** Card container, padded by default, with an optional danger tone. */
+const Card = ({ children, padded = true, tone = "neutral", fill = false, ...rest }) => {
+	if (fill) return /* @__PURE__ */ jsx("div", {
+		class: cardColumn,
+		...rest,
+		children
+	});
+	if (!padded) return /* @__PURE__ */ jsx("div", {
+		class: cardBase,
+		...rest,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		class: tone === "danger" ? cardDanger : cardPadded,
+		...rest,
+		children
+	});
+};
+/** Padded card section, with an optional bottom divider. */
+const CardSection = ({ divider = false, children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		class: divider ? cardSectionDivider : cardSection,
+		children
+	});
+};
+/** Page header with title, description, meta line, and actions (breadcrumbs live in the top bar). */
+const PageHeader = ({ title, description, meta, actions }) => {
+	return /* @__PURE__ */ jsx("div", {
+		class: pageHeader,
+		children: /* @__PURE__ */ jsxs("div", {
+			class: pageHeaderRow,
+			children: [/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("h1", {
+					class: pageHeaderTitle,
+					children: title
+				}),
+				description ? /* @__PURE__ */ jsx("p", {
+					class: pageHeaderDesc,
+					children: description
+				}) : null,
+				meta ? /* @__PURE__ */ jsx("p", {
+					class: pageHeaderMeta,
+					children: meta
+				}) : null
+			] }), actions ? /* @__PURE__ */ jsx("div", {
+				class: pageHeaderActions,
+				children: actions
+			}) : null]
+		})
+	});
+};
+/** Card or section heading (h2 by default, h3 for subsections). */
+const SectionTitle = ({ level = 2, tone = "neutral", children }) => {
+	if (level === 3) return /* @__PURE__ */ jsx("h3", {
+		class: tone === "danger" ? sectionTitleDanger : sectionTitleH3,
+		children
+	});
+	return /* @__PURE__ */ jsx("h2", {
+		class: sectionTitleH2,
+		children
+	});
+};
+//#endregion
+export { Card, CardSection, PageHeader, SectionTitle };
+
+//# sourceMappingURL=layout.mjs.map

package/dist/ui/layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.mjs","names":[],"sources":["../../src/ui/layout.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst cardBase = css`\n  /* card */\n  background: var(--surface-card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow);\n`;\n\nconst cardColumn = css`\n  /* card-column */\n  ${cardBase}\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n`;\n\nconst cardPadded = css`\n  /* card-padded */\n  ${cardBase}\n  padding: 1rem;\n`;\n\nconst cardDanger = css`\n  /* card-danger */\n  ${cardPadded}\n  border-color: var(--status-rejected);\n`;\n\nconst cardSection = css`\n  /* card-section */\n  padding: 1rem;\n`;\n\nconst cardSectionDivider = css`\n  /* card-section-divider */\n  ${cardSection}\n  border-bottom: 1px solid var(--border);\n`;\n\nconst pageHeader = css`\n  /* page-header */\n  margin-bottom: 1.25rem;\n`;\n\nconst pageHeaderRow = css`\n  /* page-header-row */\n  display: flex;\n  gap: 1rem;\n  align-items: flex-start;\n  justify-content: space-between;\n  flex-wrap: wrap;\n`;\n\nconst pageHeaderTitle = css`\n  /* page-header-title */\n  margin: 0;\n  font-size: 1.45rem;\n  line-height: 1.2;\n  letter-spacing: -0.02em;\n  font-weight: 700;\n`;\n\nconst pageHeaderDesc = css`\n  /* page-header-desc */\n  margin: 0.35rem 0 0;\n  color: var(--text-secondary);\n  font-size: 0.9rem;\n  max-width: 65ch;\n  /* Links inside running text must not rely on colour alone. */\n  & a {\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n`;\n\nconst pageHeaderMeta = css`\n  /* page-header-meta */\n  margin: 0.4rem 0 0;\n  color: var(--text-secondary);\n  font-size: 0.82rem;\n  display: flex;\n  gap: 0.4rem;\n  align-items: center;\n  flex-wrap: wrap;\n  font-variant-numeric: tabular-nums;\n`;\n\nconst pageHeaderActions = css`\n  /* page-header-actions */\n  display: flex;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  align-items: center;\n`;\n\nconst sectionTitleH2 = css`\n  /* section-title */\n  margin: 0 0 0.5rem;\n  font-size: 1.05rem;\n  font-weight: 650;\n  letter-spacing: -0.01em;\n`;\n\nconst sectionTitleH3 = css`\n  /* section-title-sm */\n  ${sectionTitleH2}\n  font-size: 0.95rem;\n`;\n\nconst sectionTitleDanger = css`\n  /* section-title-danger */\n  ${sectionTitleH3}\n  color: var(--status-rejected);\n`;\n\n/** Card or section heading (h2 by default, h3 for subsections). */\n\n/** Card container, padded by default, with an optional danger tone. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Card: FC<{\n  children?: unknown;\n  padded?: boolean;\n  tone?: \"neutral\" | \"danger\";\n  /** Flex column filling its grid cell, so a footer can sit at the bottom of equal-height cards. */\n  fill?: boolean;\n  [key: string]: unknown;\n}> = ({ children, padded = true, tone = \"neutral\", fill = false, ...rest }) => {\n  if (fill) {\n    return (\n      <div class={cardColumn} {...rest}>\n        {children}\n      </div>\n    );\n  }\n  if (!padded) {\n    return (\n      <div class={cardBase} {...rest}>\n        {children}\n      </div>\n    );\n  }\n  return (\n    <div class={tone === \"danger\" ? cardDanger : cardPadded} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/** Padded card section, with an optional bottom divider. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const CardSection: FC<{ divider?: boolean; children?: unknown }> = ({\n  divider = false,\n  children,\n}) => {\n  return <div class={divider ? cardSectionDivider : cardSection}>{children}</div>;\n};\n\n/** Page header with title, description, meta line, and actions (breadcrumbs live in the top bar). */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const PageHeader: FC<{\n  title: unknown;\n  description?: unknown;\n  meta?: unknown;\n  actions?: unknown;\n}> = ({ title, description, meta, actions }) => {\n  return (\n    <div class={pageHeader}>\n      <div class={pageHeaderRow}>\n        <div>\n          <h1 class={pageHeaderTitle}>{title}</h1>\n          {description ? <p class={pageHeaderDesc}>{description}</p> : null}\n          {meta ? <p class={pageHeaderMeta}>{meta}</p> : null}\n        </div>\n        {actions ? <div class={pageHeaderActions}>{actions}</div> : null}\n      </div>\n    </div>\n  );\n};\n\n/** Card or section heading (h2 by default, h3 for subsections). */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const SectionTitle: FC<{\n  level?: 2 | 3;\n  tone?: \"neutral\" | \"danger\";\n  children?: unknown;\n}> = ({ level = 2, tone = \"neutral\", children }) => {\n  if (level === 3) {\n    return <h3 class={tone === \"danger\" ? sectionTitleDanger : sectionTitleH3}>{children}</h3>;\n  }\n  return <h2 class={sectionTitleH2}>{children}</h2>;\n};\n"],"mappings":";;;;;;AAKA,MAAM,WAAW,GAAG;;;;;;;AAQpB,MAAM,aAAa,GAAG;;IAElB,SAAS;;;;;AAMb,MAAM,aAAa,GAAG;;IAElB,SAAS;;;AAIb,MAAM,aAAa,GAAG;;IAElB,WAAW;;;AAIf,MAAM,cAAc,GAAG;;;;AAKvB,MAAM,qBAAqB,GAAG;;IAE1B,YAAY;;;AAIhB,MAAM,aAAa,GAAG;;;;AAKtB,MAAM,gBAAgB,GAAG;;;;;;;;AASzB,MAAM,kBAAkB,GAAG;;;;;;;;AAS3B,MAAM,iBAAiB,GAAG;;;;;;;;;;;;AAa1B,MAAM,iBAAiB,GAAG;;;;;;;;;;;AAY1B,MAAM,oBAAoB,GAAG;;;;;;;AAQ7B,MAAM,iBAAiB,GAAG;;;;;;;AAQ1B,MAAM,iBAAiB,GAAG;;IAEtB,eAAe;;;AAInB,MAAM,qBAAqB,GAAG;;IAE1B,eAAe;;;;;AAQnB,MAAa,QAOP,EAAE,UAAU,SAAS,MAAM,OAAO,WAAW,OAAO,OAAO,GAAG,WAAW;CAC7E,IAAI,MACF,OACE,oBAAC,OAAD;EAAK,OAAO;EAAY,GAAI;EACzB;CACE,CAAA;CAGT,IAAI,CAAC,QACH,OACE,oBAAC,OAAD;EAAK,OAAO;EAAU,GAAI;EACvB;CACE,CAAA;CAGT,OACE,oBAAC,OAAD;EAAK,OAAO,SAAS,WAAW,aAAa;EAAY,GAAI;EAC1D;CACE,CAAA;AAET;;AAIA,MAAa,eAA8D,EACzE,UAAU,OACV,eACI;CACJ,OAAO,oBAAC,OAAD;EAAK,OAAO,UAAU,qBAAqB;EAAc;CAAc,CAAA;AAChF;;AAIA,MAAa,cAKP,EAAE,OAAO,aAAa,MAAM,cAAc;CAC9C,OACE,oBAAC,OAAD;EAAK,OAAO;EACV,UAAA,qBAAC,OAAD;GAAK,OAAO;GAAZ,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA;IACE,oBAAC,MAAD;KAAI,OAAO;KAAkB,UAAA;IAAU,CAAA;IACtC,cAAc,oBAAC,KAAD;KAAG,OAAO;KAAiB,UAAA;IAAe,CAAA,IAAI;IAC5D,OAAO,oBAAC,KAAD;KAAG,OAAO;KAAiB,UAAA;IAAQ,CAAA,IAAI;GAC5C,EAAA,CAAA,GACJ,UAAU,oBAAC,OAAD;IAAK,OAAO;IAAoB,UAAA;GAAa,CAAA,IAAI,IACzD;;CACF,CAAA;AAET;;AAIA,MAAa,gBAIP,EAAE,QAAQ,GAAG,OAAO,WAAW,eAAe;CAClD,IAAI,UAAU,GACZ,OAAO,oBAAC,MAAD;EAAI,OAAO,SAAS,WAAW,qBAAqB;EAAiB;CAAa,CAAA;CAE3F,OAAO,oBAAC,MAAD;EAAI,OAAO;EAAiB;CAAa,CAAA;AAClD"}

package/dist/ui/progress.mjs

@@ -0,0 +1,44 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { jsx } from "hono/jsx/jsx-runtime";
+//#region src/ui/progress.tsx
+const track = css`
+  /* progress */
+  height: 6px;
+  overflow: hidden;
+  background: var(--surface-muted);
+  border-radius: var(--radius-pill);
+  & > span {
+    display: block;
+    height: 100%;
+    background: var(--accent);
+    border-radius: inherit;
+    transition: width var(--dur-base) var(--ease);
+  }
+`;
+const trackDone = css`
+  /* progress-done */
+  ${track}
+  & > span {
+    background: var(--status-approved);
+  }
+`;
+/** Determinate progress bar; turns green when `value` reaches `max`. */
+const Progress = ({ value, max, label }) => {
+	const percent = max > 0 ? Math.min(100, Math.round(value / max * 100)) : 0;
+	return /* @__PURE__ */ jsx("div", {
+		class: max > 0 && value >= max ? trackDone : track,
+		role: "progressbar",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": Math.min(value, max),
+		children: /* @__PURE__ */ jsx("span", { style: `width:${percent}%` })
+	});
+};
+//#endregion
+export { Progress };
+
+//# sourceMappingURL=progress.mjs.map

package/dist/ui/progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.mjs","names":[],"sources":["../../src/ui/progress.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst track = css`\n  /* progress */\n  height: 6px;\n  overflow: hidden;\n  background: var(--surface-muted);\n  border-radius: var(--radius-pill);\n  & > span {\n    display: block;\n    height: 100%;\n    background: var(--accent);\n    border-radius: inherit;\n    transition: width var(--dur-base) var(--ease);\n  }\n`;\n\nconst trackDone = css`\n  /* progress-done */\n  ${track}\n  & > span {\n    background: var(--status-approved);\n  }\n`;\n\n/** Determinate progress bar; turns green when `value` reaches `max`. */\nexport const Progress: FC<{ value: number; max: number; label: string }> = ({\n  value,\n  max,\n  label,\n}) => {\n  const percent = max > 0 ? Math.min(100, Math.round((value / max) * 100)) : 0;\n  return (\n    <div\n      class={max > 0 && value >= max ? trackDone : track}\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuenow={Math.min(value, max)}\n    >\n      <span style={`width:${percent}%`} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAKA,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;AAejB,MAAM,YAAY,GAAG;;IAEjB,MAAM;;;;;;AAOV,MAAa,YAA+D,EAC1E,OACA,KACA,YACI;CACJ,MAAM,UAAU,MAAM,IAAI,KAAK,IAAI,KAAK,KAAK,MAAO,QAAQ,MAAO,GAAG,CAAC,IAAI;CAC3E,OACE,oBAAC,OAAD;EACE,OAAO,MAAM,KAAK,SAAS,MAAM,YAAY;EAC7C,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe,KAAK,IAAI,OAAO,GAAG;EAElC,UAAA,oBAAC,QAAD,EAAM,OAAO,SAAS,QAAQ,GAAK,CAAA;CAChC,CAAA;AAET"}

package/dist/ui/segmented.mjs

@@ -0,0 +1,77 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { jsx } from "hono/jsx/jsx-runtime";
+//#region src/ui/segmented.tsx
+const segmentedRoot = css`
+  /* segmented */
+  display: inline-flex;
+  padding: 2px;
+  gap: 2px;
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  max-width: 100%;
+  overflow-x: auto;
+`;
+const segmentedItem = css`
+  /* segmented-item */
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 34px;
+  padding: 0.2rem 0.7rem;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    background var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+  &:hover {
+    color: var(--text-primary);
+    text-decoration: none;
+  }
+  &[aria-pressed="true"],
+  &[aria-current="page"] {
+    background: var(--surface-card);
+    color: var(--text-primary);
+    box-shadow: var(--shadow);
+  }
+`;
+/**
+* Compact single-choice control. Items with `href` navigate (filters, tabs);
+* items without toggle in place and carry `data-view-value` for client code.
+*/
+const Segmented = ({ items, label, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		class: segmentedRoot,
+		role: "group",
+		"aria-label": label,
+		...rest,
+		children: items.map((item) => item.href ? /* @__PURE__ */ jsx("a", {
+			class: segmentedItem,
+			href: item.href,
+			"aria-current": item.active ? "page" : void 0,
+			children: item.label
+		}, item.value) : /* @__PURE__ */ jsx("button", {
+			class: segmentedItem,
+			type: "button",
+			"data-view-value": item.value,
+			"aria-pressed": item.active ? "true" : "false",
+			children: item.label
+		}, item.value))
+	});
+};
+//#endregion
+export { Segmented };
+
+//# sourceMappingURL=segmented.mjs.map

package/dist/ui/segmented.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.mjs","names":[],"sources":["../../src/ui/segmented.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst segmentedRoot = css`\n  /* segmented */\n  display: inline-flex;\n  padding: 2px;\n  gap: 2px;\n  background: var(--surface-muted);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  max-width: 100%;\n  overflow-x: auto;\n`;\n\nconst segmentedItem = css`\n  /* segmented-item */\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  min-height: 34px;\n  padding: 0.2rem 0.7rem;\n  border: 0;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  color: var(--text-secondary);\n  font: inherit;\n  font-size: var(--text-sm);\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  text-decoration: none;\n  transition:\n    background var(--dur-fast) var(--ease),\n    color var(--dur-fast) var(--ease);\n  &:hover {\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n  &[aria-pressed=\"true\"],\n  &[aria-current=\"page\"] {\n    background: var(--surface-card);\n    color: var(--text-primary);\n    box-shadow: var(--shadow);\n  }\n`;\n\n/** One option in a `Segmented` control. */\nexport interface SegmentedItem {\n  label: string;\n  value: string;\n  /** Renders a link (navigation) instead of a toggle button. */\n  href?: string;\n  active?: boolean;\n}\n\n/**\n * Compact single-choice control. Items with `href` navigate (filters, tabs);\n * items without toggle in place and carry `data-view-value` for client code.\n */\nexport const Segmented: FC<{\n  items: SegmentedItem[];\n  label: string;\n  [key: string]: unknown;\n}> = ({ items, label, ...rest }) => {\n  return (\n    <div class={segmentedRoot} role=\"group\" aria-label={label} {...rest}>\n      {items.map((item) =>\n        item.href ? (\n          <a\n            key={item.value}\n            class={segmentedItem}\n            href={item.href}\n            aria-current={item.active ? \"page\" : undefined}\n          >\n            {item.label}\n          </a>\n        ) : (\n          <button\n            key={item.value}\n            class={segmentedItem}\n            type=\"button\"\n            data-view-value={item.value}\n            aria-pressed={item.active ? \"true\" : \"false\"}\n          >\n            {item.label}\n          </button>\n        ),\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAKA,MAAM,gBAAgB,GAAG;;;;;;;;;;;AAYzB,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CzB,MAAa,aAIP,EAAE,OAAO,OAAO,GAAG,WAAW;CAClC,OACE,oBAAC,OAAD;EAAK,OAAO;EAAe,MAAK;EAAQ,cAAY;EAAO,GAAI;EAC5D,UAAA,MAAM,KAAK,SACV,KAAK,OACH,oBAAC,KAAD;GAEE,OAAO;GACP,MAAM,KAAK;GACX,gBAAc,KAAK,SAAS,SAAS,KAAA;GAEpC,UAAA,KAAK;EACL,GANI,KAAK,KAMT,IAEH,oBAAC,UAAD;GAEE,OAAO;GACP,MAAK;GACL,mBAAiB,KAAK;GACtB,gBAAc,KAAK,SAAS,SAAS;GAEpC,UAAA,KAAK;EACA,GAPD,KAAK,KAOJ,CAEZ;CACG,CAAA;AAET"}

package/dist/ui/shell/account.mjs

@@ -0,0 +1,161 @@
+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 { Avatar } from "../avatar.mjs";
+import { Dropdown, DropdownDivider, DropdownItem } from "../dropdown.mjs";
+import { csrfField } from "../csrf-field.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { safeImageUrl } from "@storyshelf/core/urls";
+//#region src/ui/shell/account.tsx
+/** Styles for the account widgets that live in the sidebar footer. */
+const accountRoot = css`
+  /* account */
+  display: grid;
+  gap: var(--space-1);
+  .account__who {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+  }
+  .account__text {
+    display: grid;
+    min-width: 0;
+    text-align: left;
+    line-height: 1.2;
+  }
+  .account__name {
+    overflow: hidden;
+    font-size: var(--text-base);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .account__role {
+    color: var(--text-secondary);
+    font-size: var(--text-xs);
+    text-transform: capitalize;
+  }
+  .account__meta {
+    padding: 0.4rem 0.6rem 0.5rem;
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: 1.3;
+  }
+  .account__meta strong {
+    display: block;
+    color: var(--text-primary);
+    font-size: var(--text-base);
+  }
+  .account__logout {
+    margin: 0;
+  }
+`;
+/** Light / Dark / System menu; the trigger shows the active mode's icon. */
+const ThemeMenu = () => {
+	return /* @__PURE__ */ jsxs(Dropdown, {
+		iconOnly: true,
+		placement: "above",
+		ariaLabel: "Theme",
+		label: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-theme-icon": "light",
+				children: /* @__PURE__ */ jsx(Icon, { name: "sun" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-theme-icon": "dark",
+				children: /* @__PURE__ */ jsx(Icon, { name: "moon" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-theme-icon": "system",
+				children: /* @__PURE__ */ jsx(Icon, { name: "monitor" })
+			})
+		] }),
+		children: [
+			/* @__PURE__ */ jsx(DropdownItem, {
+				icon: "sun",
+				"data-theme-set": "light",
+				children: "Light"
+			}),
+			/* @__PURE__ */ jsx(DropdownItem, {
+				icon: "moon",
+				"data-theme-set": "dark",
+				children: "Dark"
+			}),
+			/* @__PURE__ */ jsx(DropdownItem, {
+				icon: "monitor",
+				"data-theme-set": "system",
+				children: "System"
+			})
+		]
+	});
+};
+/** Signed-in user row (name, role, profile, sign out); a sign-in button when signed out. */
+const UserMenu = () => {
+	const { user, authEnabled } = getStore();
+	if (!authEnabled) return null;
+	if (!user) return /* @__PURE__ */ jsx(Button, {
+		href: "/auth/login",
+		size: "sm",
+		icon: "user",
+		children: /* @__PURE__ */ jsx("span", {
+			class: "sidebar__label",
+			children: "Sign in"
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		class: accountRoot,
+		children: /* @__PURE__ */ jsxs(Dropdown, {
+			block: true,
+			placement: "above",
+			ariaLabel: `Account: ${user.name}`,
+			label: /* @__PURE__ */ jsxs("span", {
+				class: "account__who",
+				children: [/* @__PURE__ */ jsx(Avatar, {
+					name: user.name,
+					src: safeImageUrl(user.avatarUrl),
+					size: "sm"
+				}), /* @__PURE__ */ jsxs("span", {
+					class: "account__text sidebar__label",
+					children: [/* @__PURE__ */ jsx("span", {
+						class: "account__name",
+						children: user.name
+					}), /* @__PURE__ */ jsx("span", {
+						class: "account__role",
+						children: user.role
+					})]
+				})]
+			}),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					class: "account__meta",
+					children: [/* @__PURE__ */ jsx("strong", { children: user.name }), user.role]
+				}),
+				/* @__PURE__ */ jsx(DropdownDivider, {}),
+				/* @__PURE__ */ jsx(DropdownItem, {
+					href: "/profile",
+					icon: "user",
+					children: "Profile"
+				}),
+				/* @__PURE__ */ jsxs("form", {
+					class: "account__logout",
+					method: "post",
+					action: "/auth/logout",
+					children: [csrfField(), /* @__PURE__ */ jsx(DropdownItem, {
+						type: "submit",
+						icon: "log-out",
+						children: "Sign out"
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ThemeMenu, UserMenu };
+
+//# sourceMappingURL=account.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"account.mjs","names":[],"sources":["../../../src/ui/shell/account.tsx"],"sourcesContent":["import { safeImageUrl } from \"@storyshelf/core/urls\";\nimport type { FC } from \"hono/jsx\";\nimport { getStore } from \"../../store.ts\";\nimport { Avatar } from \"../avatar.tsx\";\nimport { Button } from \"../buttons.tsx\";\nimport { csrfField } from \"../csrf-field.tsx\";\nimport { css } from \"../css.ts\";\nimport { Dropdown, DropdownDivider, DropdownItem } from \"../dropdown.tsx\";\nimport { Icon } from \"../icons/icon.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Styles for the account widgets that live in the sidebar footer. */\nconst accountRoot = css`\n  /* account */\n  display: grid;\n  gap: var(--space-1);\n  .account__who {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    min-width: 0;\n  }\n  .account__text {\n    display: grid;\n    min-width: 0;\n    text-align: left;\n    line-height: 1.2;\n  }\n  .account__name {\n    overflow: hidden;\n    font-size: var(--text-base);\n    font-weight: 600;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .account__role {\n    color: var(--text-secondary);\n    font-size: var(--text-xs);\n    text-transform: capitalize;\n  }\n  .account__meta {\n    padding: 0.4rem 0.6rem 0.5rem;\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n    line-height: 1.3;\n  }\n  .account__meta strong {\n    display: block;\n    color: var(--text-primary);\n    font-size: var(--text-base);\n  }\n  .account__logout {\n    margin: 0;\n  }\n`;\n\n/** Light / Dark / System menu; the trigger shows the active mode's icon. */\nexport const ThemeMenu: FC = () => {\n  return (\n    <Dropdown\n      iconOnly\n      placement=\"above\"\n      ariaLabel=\"Theme\"\n      label={\n        <>\n          <span data-theme-icon=\"light\">\n            <Icon name=\"sun\" />\n          </span>\n          <span data-theme-icon=\"dark\">\n            <Icon name=\"moon\" />\n          </span>\n          <span data-theme-icon=\"system\">\n            <Icon name=\"monitor\" />\n          </span>\n        </>\n      }\n    >\n      <DropdownItem icon=\"sun\" data-theme-set=\"light\">\n        Light\n      </DropdownItem>\n      <DropdownItem icon=\"moon\" data-theme-set=\"dark\">\n        Dark\n      </DropdownItem>\n      <DropdownItem icon=\"monitor\" data-theme-set=\"system\">\n        System\n      </DropdownItem>\n    </Dropdown>\n  );\n};\n\n/** Signed-in user row (name, role, profile, sign out); a sign-in button when signed out. */\nexport const UserMenu: FC = () => {\n  const { user, authEnabled } = getStore();\n  if (!authEnabled) {\n    return null;\n  }\n  if (!user) {\n    return (\n      <Button href=\"/auth/login\" size=\"sm\" icon=\"user\">\n        <span class=\"sidebar__label\">Sign in</span>\n      </Button>\n    );\n  }\n  return (\n    <div class={accountRoot}>\n      <Dropdown\n        block\n        placement=\"above\"\n        ariaLabel={`Account: ${user.name}`}\n        label={\n          <span class=\"account__who\">\n            <Avatar name={user.name} src={safeImageUrl(user.avatarUrl)} size=\"sm\" />\n            <span class=\"account__text sidebar__label\">\n              <span class=\"account__name\">{user.name}</span>\n              <span class=\"account__role\">{user.role}</span>\n            </span>\n          </span>\n        }\n      >\n        <div class=\"account__meta\">\n          <strong>{user.name}</strong>\n          {user.role}\n        </div>\n        <DropdownDivider />\n        <DropdownItem href=\"/profile\" icon=\"user\">\n          Profile\n        </DropdownItem>\n        <form class=\"account__logout\" method=\"post\" action=\"/auth/logout\">\n          {csrfField()}\n          <DropdownItem type=\"submit\" icon=\"log-out\">\n            Sign out\n          </DropdownItem>\n        </form>\n      </Dropdown>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CvB,MAAa,kBAAsB;CACjC,OACE,qBAAC,UAAD;EACE,UAAA;EACA,WAAU;EACV,WAAU;EACV,OACE,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAD;IAAM,mBAAgB;IACpB,UAAA,oBAAC,MAAD,EAAM,MAAK,MAAO,CAAA;GACd,CAAA;GACN,oBAAC,QAAD;IAAM,mBAAgB;IACpB,UAAA,oBAAC,MAAD,EAAM,MAAK,OAAQ,CAAA;GACf,CAAA;GACN,oBAAC,QAAD;IAAM,mBAAgB;IACpB,UAAA,oBAAC,MAAD,EAAM,MAAK,UAAW,CAAA;GAClB,CAAA;EACN,EAAA,CAAA;EAfN,UAAA;GAkBE,oBAAC,cAAD;IAAc,MAAK;IAAM,kBAAe;IAAQ,UAAA;GAElC,CAAA;GACd,oBAAC,cAAD;IAAc,MAAK;IAAO,kBAAe;IAAO,UAAA;GAElC,CAAA;GACd,oBAAC,cAAD;IAAc,MAAK;IAAU,kBAAe;IAAS,UAAA;GAEvC,CAAA;EACN;;AAEd;;AAGA,MAAa,iBAAqB;CAChC,MAAM,EAAE,MAAM,gBAAgB,SAAS;CACvC,IAAI,CAAC,aACH,OAAO;CAET,IAAI,CAAC,MACH,OACE,oBAAC,QAAD;EAAQ,MAAK;EAAc,MAAK;EAAK,MAAK;EACxC,UAAA,oBAAC,QAAD;GAAM,OAAM;GAAiB,UAAA;EAAa,CAAA;CACpC,CAAA;CAGZ,OACE,oBAAC,OAAD;EAAK,OAAO;EACV,UAAA,qBAAC,UAAD;GACE,OAAA;GACA,WAAU;GACV,WAAW,YAAY,KAAK;GAC5B,OACE,qBAAC,QAAD;IAAM,OAAM;IAAZ,UAAA,CACE,oBAAC,QAAD;KAAQ,MAAM,KAAK;KAAM,KAAK,aAAa,KAAK,SAAS;KAAG,MAAK;IAAM,CAAA,GACvE,qBAAC,QAAD;KAAM,OAAM;KAAZ,UAAA,CACE,oBAAC,QAAD;MAAM,OAAM;MAAiB,UAAA,KAAK;KAAW,CAAA,GAC7C,oBAAC,QAAD;MAAM,OAAM;MAAiB,UAAA,KAAK;KAAW,CAAA,CACzC;IACF,CAAA,CAAA;;GAXV,UAAA;IAcE,qBAAC,OAAD;KAAK,OAAM;KAAX,UAAA,CACE,oBAAC,UAAD,EAAA,UAAS,KAAK,KAAa,CAAA,GAC1B,KAAK,IACH;;IACL,oBAAC,iBAAD,CAAkB,CAAA;IAClB,oBAAC,cAAD;KAAc,MAAK;KAAW,MAAK;KAAO,UAAA;IAE5B,CAAA;IACd,qBAAC,QAAD;KAAM,OAAM;KAAkB,QAAO;KAAO,QAAO;KAAnD,UAAA,CACG,UAAU,GACX,oBAAC,cAAD;MAAc,MAAK;MAAS,MAAK;MAAU,UAAA;KAE7B,CAAA,CACV;;GACE;;CACP,CAAA;AAET"}

package/dist/ui/shell/bare.mjs

@@ -0,0 +1,69 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "../css.mjs";
+import { Icon } from "../icons/icon.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { safeImageUrl } from "@storyshelf/core/urls";
+//#region src/ui/shell/bare.tsx
+/** Chrome-free page for signed-out flows: brand over a centered column. */
+const bareRoot = css`
+  /* bare */
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: var(--space-5);
+  min-height: 100vh;
+  padding: var(--space-6) var(--space-4);
+  background: radial-gradient(60rem 30rem at 50% -10%, var(--accent-subtle), transparent 70%);
+  .bare__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    color: var(--text-primary);
+    font-size: var(--text-xl);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+  .bare__mark {
+    display: inline-grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border-radius: var(--radius);
+    background: var(--accent);
+    color: var(--accent-contrast);
+  }
+  .bare__body {
+    width: min(400px, 100%);
+  }
+`;
+/** Brand header plus a narrow column, used instead of the app shell. */
+const BareShell = ({ name, logo, children }) => {
+	const safeLogo = safeImageUrl(logo);
+	return /* @__PURE__ */ jsxs("main", {
+		id: "main-content",
+		class: bareRoot,
+		tabindex: -1,
+		children: [/* @__PURE__ */ jsxs("div", {
+			class: "bare__brand",
+			children: [safeLogo ? /* @__PURE__ */ jsx("img", {
+				src: safeLogo,
+				alt: "",
+				width: "34",
+				height: "34"
+			}) : /* @__PURE__ */ jsx("span", {
+				class: "bare__mark",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(Icon, { name: "layers" })
+			}), /* @__PURE__ */ jsx("span", { children: name })]
+		}), /* @__PURE__ */ jsx("div", {
+			class: "bare__body",
+			children
+		})]
+	});
+};
+//#endregion
+export { BareShell };
+
+//# sourceMappingURL=bare.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bare.mjs","names":[],"sources":["../../../src/ui/shell/bare.tsx"],"sourcesContent":["import { safeImageUrl } from \"@storyshelf/core/urls\";\nimport type { FC } from \"hono/jsx\";\nimport { css } from \"../css.ts\";\nimport { Icon } from \"../icons/icon.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Chrome-free page for signed-out flows: brand over a centered column. */\nconst bareRoot = css`\n  /* bare */\n  display: grid;\n  place-content: center;\n  justify-items: center;\n  gap: var(--space-5);\n  min-height: 100vh;\n  padding: var(--space-6) var(--space-4);\n  background: radial-gradient(60rem 30rem at 50% -10%, var(--accent-subtle), transparent 70%);\n  .bare__brand {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.6rem;\n    color: var(--text-primary);\n    font-size: var(--text-xl);\n    font-weight: 700;\n    letter-spacing: -0.02em;\n  }\n  .bare__mark {\n    display: inline-grid;\n    place-items: center;\n    width: 34px;\n    height: 34px;\n    border-radius: var(--radius);\n    background: var(--accent);\n    color: var(--accent-contrast);\n  }\n  .bare__body {\n    width: min(400px, 100%);\n  }\n`;\n\n/** Brand header plus a narrow column, used instead of the app shell. */\nexport const BareShell: FC<{ name: string; logo?: string; children?: unknown }> = ({\n  name,\n  logo,\n  children,\n}) => {\n  const safeLogo = safeImageUrl(logo);\n  return (\n    <main id=\"main-content\" class={bareRoot} tabindex={-1}>\n      <div class=\"bare__brand\">\n        {safeLogo ? (\n          <img src={safeLogo} alt=\"\" width=\"34\" height=\"34\" />\n        ) : (\n          <span class=\"bare__mark\" aria-hidden=\"true\">\n            <Icon name=\"layers\" />\n          </span>\n        )}\n        <span>{name}</span>\n      </div>\n      <div class=\"bare__body\">{children}</div>\n    </main>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCpB,MAAa,aAAsE,EACjF,MACA,MACA,eACI;CACJ,MAAM,WAAW,aAAa,IAAI;CAClC,OACE,qBAAC,QAAD;EAAM,IAAG;EAAe,OAAO;EAAU,UAAU;EAAnD,UAAA,CACE,qBAAC,OAAD;GAAK,OAAM;GAAX,UAAA,CACG,WACC,oBAAC,OAAD;IAAK,KAAK;IAAU,KAAI;IAAG,OAAM;IAAK,QAAO;GAAM,CAAA,IAEnD,oBAAC,QAAD;IAAM,OAAM;IAAa,eAAY;IACnC,UAAA,oBAAC,MAAD,EAAM,MAAK,SAAU,CAAA;GACjB,CAAA,GAER,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,CACf;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,OAAM;GAAc;EAAc,CAAA,CACnC;;AAEV"}

package/dist/ui/shell/boot-script.mjs

@@ -0,0 +1,46 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/ui/shell/boot-script.ts
+/**
+* Runs in `<head>` before first paint so the saved theme and sidebar state
+* apply without a flash. Exposes cookie helpers to the client script.
+*/
+function bootScript() {
+	return `
+  (function(){
+    var themeCookie='storyshelf_theme';
+    var sidebarCookie='storyshelf_sidebar';
+    function readCookie(name){
+      var parts=document.cookie.split('; ');
+      for(var i=0;i<parts.length;i++){
+        var at=parts[i].indexOf('=');
+        if(at>0&&parts[i].slice(0,at)===name){ return decodeURIComponent(parts[i].slice(at+1)); }
+      }
+      return null;
+    }
+    function writeCookie(name,value){
+      document.cookie=name+'='+encodeURIComponent(value)+'; Path=/; Max-Age=31536000; SameSite=Lax';
+    }
+    function applyTheme(value){
+      var ok=value==='light'||value==='dark'||value==='system';
+      document.documentElement.setAttribute('data-theme',ok?value:'system');
+    }
+    function applySidebar(value){
+      if(value==='rail'){ document.documentElement.setAttribute('data-sidebar','rail'); }
+      else { document.documentElement.removeAttribute('data-sidebar'); }
+    }
+    var theme=readCookie(themeCookie);
+    if(theme){ applyTheme(theme); }
+    applySidebar(readCookie(sidebarCookie));
+    window.__storyshelfShell={
+      readCookie:readCookie,writeCookie:writeCookie,applyTheme:applyTheme,applySidebar:applySidebar,
+      themeCookie:themeCookie,sidebarCookie:sidebarCookie
+    };
+  })();
+  `.trim();
+}
+//#endregion
+export { bootScript };
+
+//# sourceMappingURL=boot-script.mjs.map

package/dist/ui/shell/boot-script.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"boot-script.mjs","names":[],"sources":["../../../src/ui/shell/boot-script.ts"],"sourcesContent":["/**\n * Runs in `<head>` before first paint so the saved theme and sidebar state\n * apply without a flash. Exposes cookie helpers to the client script.\n */\nexport function bootScript(): string {\n  return `\n  (function(){\n    var themeCookie='storyshelf_theme';\n    var sidebarCookie='storyshelf_sidebar';\n    function readCookie(name){\n      var parts=document.cookie.split('; ');\n      for(var i=0;i<parts.length;i++){\n        var at=parts[i].indexOf('=');\n        if(at>0&&parts[i].slice(0,at)===name){ return decodeURIComponent(parts[i].slice(at+1)); }\n      }\n      return null;\n    }\n    function writeCookie(name,value){\n      document.cookie=name+'='+encodeURIComponent(value)+'; Path=/; Max-Age=31536000; SameSite=Lax';\n    }\n    function applyTheme(value){\n      var ok=value==='light'||value==='dark'||value==='system';\n      document.documentElement.setAttribute('data-theme',ok?value:'system');\n    }\n    function applySidebar(value){\n      if(value==='rail'){ document.documentElement.setAttribute('data-sidebar','rail'); }\n      else { document.documentElement.removeAttribute('data-sidebar'); }\n    }\n    var theme=readCookie(themeCookie);\n    if(theme){ applyTheme(theme); }\n    applySidebar(readCookie(sidebarCookie));\n    window.__storyshelfShell={\n      readCookie:readCookie,writeCookie:writeCookie,applyTheme:applyTheme,applySidebar:applySidebar,\n      themeCookie:themeCookie,sidebarCookie:sidebarCookie\n    };\n  })();\n  `.trim();\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,aAAqB;CACnC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BL,KAAK;AACT"}