@celestia-island/hikari 0.55.222 → 0.55.224

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.222",
+  "version": "0.55.224",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkAdminShell.tsx

@@ -1,135 +1,37 @@
-import { computed, defineComponent, ref, type PropType } from "vue";
-import { HkCrossfade, HDrawer, HScrollContainer, useBreakpoint } from "@celestia-island/hikari";
+import { defineComponent, h, type PropType } from "vue";
+import { HkFaceShell } from "./HkFaceShell";
 import { provideActionBar } from "../composables/useActionBar";
-import { useI18n } from "../i18n/context";
 
-/** CSS-wide keywords. A shorthand rebuilt from one of them is NOT a
- *  padding (`inherit 0 inherit` is rejected by every engine, measured in
- *  Chromium), so the declaration would be dropped WHOLE and the page
- *  would lose the vertical clearance too — worse than not bleeding. */
-const CSS_WIDE_KEYWORDS = new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
+// The padding-scan utilities moved INTO HkFaceShell with the content
+// host that applies them (2026-10-29 extraction). Re-exported here
+// because HkAdminShell.padding.test.ts and any external importer know
+// this module as their home — the extraction must not move the public
+// surface, only the implementation.
+export {
+  scanPaddingSides,
+  splitPaddingSides,
+  mobileSideGutterFree,
+} from "./HkFaceShell";
+export type { PaddingSidesScan } from "./HkFaceShell";
 
 /**
- * A scanned padding shorthand: the top-level `sides` plus whether the
- * value ENDED with every function closed and every quote terminated.
- * `balanced: false` means the scan cannot know where the value ends —
- * CSS closes an open function at EOF, so the authored declaration can
- * still be valid while a rewrite of it cannot be.
- */
-export interface PaddingSidesScan {
-  sides: string[];
-  balanced: boolean;
-}
-
-/**
- * Scan a CSS padding shorthand into its top-level tracks: split on
- * TOP-LEVEL whitespace, quote- and function-aware, so whitespace inside
- * a function belongs to that value — `calc(1rem + 2px)`,
- * `var(--pad, 1rem)` and a quoted argument are ONE track. A plain
- * `split(/\s+/)` shreds them (`["calc(1rem", "+", "2px)"]`), and the
- * rebuilt shorthand is invalid CSS — a browser drops the whole
- * declaration, taking with it the vertical clearance
- * `contentBleedOnMobile` promises to keep (rounds 2 and 3 of this change
- * hit exactly that; rounds 4 and 5 the escape and EOF variants). The
- * depth counter balances parentheses, so nested functions
- * (`clamp(1rem, min(2vw, 3px), 4rem)`) survive; a stray `)` never drives
- * the depth negative. Tabs and newlines are valid CSS separators and
- * split like spaces, and the whitespace around a shorthand yields no
- * empty tracks.
+ * HkAdminShell — the ADMIN face of the generalized shell
+ * (2026-10-29 extraction): HkFaceShell in document mode, plus the
+ * legacy action-bar channel. Everything structural — the frame, the
+ * optional sidebar and its mobile drawer, the scroll-viewport content
+ * host with `contentPadding` / `contentKey` / `contentBleedOnMobile`,
+ * the fixed footer band and its height reservation, the overlays slot —
+ * lives in HkFaceShell now; this component is a thin, behavior-identical
+ * wrapper kept for every existing consumer (props, slots and rendered
+ * classes are unchanged).
  *
- * Exported for its own unit test: happy-dom cannot round-trip
- * `var()`/`clamp()` values or the hostile inputs below, so the
- * component-level suite cannot observe them.
+ * The one thing the wrapper ADDS is its own action-bar provide: hosts
+ * of the pre-extraction contract read the registered actions through
+ * the header slot's `actions` param (the bar this shell provides
+ * itself). Faces that own their action bar — or their whole content
+ * lifecycle, like a canvas stage — consume HkFaceShell directly and
+ * provide whatever they want, closest to their pages.
  */
-export function scanPaddingSides(value: string): PaddingSidesScan {
-  const sides: string[] = [];
-  let current = "";
-  let depth = 0;
-  let quote = "";
-  for (const ch of value) {
-    if (quote) {
-      current += ch;
-      if (ch === quote) quote = "";
-      continue;
-    }
-    if (ch === "\"" || ch === "'") {
-      quote = ch;
-      current += ch;
-      continue;
-    }
-    if (ch === "(") depth += 1;
-    else if (ch === ")") depth = Math.max(0, depth - 1);
-    if (depth === 0 && /\s/.test(ch)) {
-      if (current) sides.push(current);
-      current = "";
-      continue;
-    }
-    current += ch;
-  }
-  if (current) sides.push(current);
-  return { sides, balanced: depth === 0 && quote === "" };
-}
-
-/** The tracks of {@link scanPaddingSides} — for callers that only need
- *  the split, and for the unit test that pins the splitting rules. */
-export function splitPaddingSides(value: string): string[] {
-  return scanPaddingSides(value).sides;
-}
-
-/**
- * The side-gutter-free form of a padding shorthand: the vertical tracks
- * survive, the horizontal ones become zero (`"1rem 2rem"` -> `"1rem 0
- * 1rem"`). The value is returned VERBATIM — the page keeps its padding
- * and simply does not bleed — whenever the shorthand cannot be rewritten
- * safely. That fallback IS the contract: emitting a declaration a browser
- * drops costs the page ALL FOUR sides, including the vertical clearance
- * this prop exists to keep.
- *
- * Verbatim cases:
- *
- * - an empty / whitespace-only value has nothing to strip;
- * - a LONE CSS-wide keyword cannot be combined per side (`inherit 0
- *   inherit` is not a padding — every engine rejects it);
- * - the value contains a CSS comment, whose text would land in the
- *   rebuilt declaration as a garbage track (`1rem 0 x`, measured in
- *   Chromium: dropped, all four sides lost);
- * - the value contains a backslash: this scanner does not decode CSS
- *   escapes, and an escape can hide a quote, a parenthesis or a whole
- *   keyword (`\69 nherit` IS `inherit` to an engine) — the literal text
- *   is not the value, so no rewrite of it is trustworthy (round 5);
- * - the value ends with a `!important` annotation: the annotation
- *   belongs to the DECLARATION, so a per-side rewrite would either
- *   silently lose the priority (`2rem !important`) or rebuild the
- *   `inherit 0 inherit` every engine rejects (`inherit !important`,
- *   measured in Chromium, round 5);
- * - the scan ends inside an open function or an unterminated quote: CSS
- *   auto-closes a function at EOF, so `"calc(1rem + 2px"` IS a real
- *   padding (measured: all four sides) while its rewrite is not; an
- *   unterminated quote is invalid at both ends, and bailing keeps the
- *   two paths identical (round 5).
- *
- * Known residual (documented, not fixable at string level): a `var()`
- * whose custom property resolves to MORE than one track cannot keep its
- * vertical half — `padding: var(--multi) 0 var(--multi)` is valid at
- * parse time and invalid at computed-value time, and all four sides
- * collapse. No consumer passes a multi-track custom property today.
- */
-export function mobileSideGutterFree(value: string): string {
-  if (value.includes("/*") || value.includes("\\")) return value;
-  // `!important` is an annotation on the DECLARATION, not a track — it
-  // cannot ride a per-side rewrite: `2rem !important` would silently lose
-  // its priority, and `inherit !important` would rebuild into the
-  // `inherit 0 inherit` every engine drops (measured in Chromium, round
-  // 5). Bail out and let the authored padding stand.
-  if (/!\s*important\s*$/i.test(value)) return value;
-  const { sides, balanced } = scanPaddingSides(value);
-  if (!balanced) return value;
-  if (sides.length === 0) return value;
-  if (sides.length === 1 && CSS_WIDE_KEYWORDS.has(sides[0].toLowerCase())) return value;
-  const [top, , bottom] = sides;
-  return `${top} 0 ${bottom ?? top}`;
-}
-
 export const HkAdminShell = defineComponent({
   name: "HkAdminShell",
   props: {
@@ -145,11 +47,9 @@ export const HkAdminShell = defineComponent({
      *  whether the shell actually renders a status bar — a filled
      *  `footer` slot (the shell's own fixed `.s-status-bar`) reserves
      *  `var(--s-footer-height)` by default, and with NO footer slot
-     *  nothing is reserved (`0px`). The old unconditional default
-     *  reserved the band on every host, leaving a dead 3rem blank under
-     *  consoles that never mount a status bar. Hosts that pin their OWN
-     *  fixed bar outside the shell opt back in by passing an explicit
-     *  value (e.g. `"var(--s-footer-height)"`). */
+     *  nothing is reserved (`0px`). Hosts that pin their OWN fixed bar
+     *  outside the shell opt back in by passing an explicit value
+     *  (e.g. `"var(--s-footer-height)"`). */
     footerHeight: { type: String, default: undefined },
     navTitle: { type: String, default: undefined },
     /** Extra class for the mobile nav drawer's panel — lets consumers zero
@@ -188,134 +88,52 @@ export const HkAdminShell = defineComponent({
      *  of risking a declaration a browser would drop whole.
      *  Default false: the padding reads the same at every width. */
     contentBleedOnMobile: { type: Boolean, default: false },
+    /** The content host mode, forwarded to HkFaceShell. DECLARED on
+     *  this wrapper on purpose (R2 S2, 2026-10-29): an undeclared input
+     *  would fall through `$attrs` onto the inner shell, where it IS a
+     *  declared prop — and fallthrough attrs override explicit props,
+     *  so a stray `content-mode="stage"` from a template or a
+     *  `v-bind="$attrs"` relay would silently flip the admin shell into
+     *  the stage host. Declared here, the input is a real prop of this
+     *  component and forwards honestly; the default stays `document`,
+     *  which is what the admin face is. */
+    contentMode: { type: String as PropType<"document" | "stage">, default: "document" },
   },
   setup(props, { slots }) {
-    const { t } = useI18n();
-    const { width: viewportWidth } = useBreakpoint();
-    const isDesktop = computed(() => viewportWidth.value >= props.mobileBreakpoint);
-    const sidebarOpen = ref(false);
-
-    const contentStyle = computed(() => ({
-      padding: isDesktop.value || !props.contentBleedOnMobile
-        ? props.contentPadding
-        : mobileSideGutterFree(props.contentPadding),
-    }));
-
     const actionBar = provideActionBar();
 
-    // The status-bar band exists only when the shell renders one (the
-    // footer slot) or the host pins its own bar and says so via the prop
-    // — an unreserved shell carries no dead clearance (2026-10-24: the
-    // unconditional default used to blank 3rem under every console that
-    // never mounted a status bar). Computed INSIDE the render (not a
-    // `computed()`): slot PRESENCE is what it reads, and a cached
-    // computed is not reliably invalidated by a slot appearing or
-    // disappearing, while every re-render re-evaluates this line.
-    function footerPad(): string {
-      if (props.footerHeight !== undefined) return props.footerHeight;
-      return slots.footer ? "var(--s-footer-height)" : "0px";
-    }
-
-    const toggleHamburger = () => {
-      sidebarOpen.value = !sidebarOpen.value;
-    };
-
-    const openSidebar = () => {
-      sidebarOpen.value = true;
-    };
-
-    const closeSidebar = () => {
-      sidebarOpen.value = false;
-    };
-
-    return () => (
-      <div class="s-admin-shell">
-        {slots.header && (
-          <div style={{ flexShrink: 0 }}>
-            {slots.header({
-              isDesktop: isDesktop.value,
-              showHamburger: !isDesktop.value,
-              compact: !isDesktop.value,
-              actions: actionBar.actions.value ? actionBar.actions.value() : [],
-              onHamburger: toggleHamburger,
-              // Lets a header trigger (e.g. the avatar in "drawer" action
-              // mode) open the mobile nav drawer directly.
-              onOpenDrawer: openSidebar,
-            })}
-          </div>
-        )}
-
-        <div class="s-admin-shell-body" style={{ paddingBottom: footerPad() }}>
-          {isDesktop.value && !props.sidebarCollapsed && slots.sidebar && (
-            <aside
-              style={{
-                width: props.sidebarWidth,
-                flexShrink: 0,
-                borderRight: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
-                background: "rgb(var(--color-surface))",
-                overflow: "hidden",
-              }}
-            >
-              {slots.sidebar({ collapsed: false, onNavigate: closeSidebar })}
-            </aside>
-          )}
-          <main class="s-admin-shell-main">
-            <HScrollContainer class="s-admin-shell-scroll">
-              {/* Padding lives INSIDE the scroll viewport (an inner
-                  wrapper) so card box-shadows are not clipped at the
-                  viewport edges. */}
-              <div style={contentStyle.value}>
-                {props.contentKey != null ? (
-                  <HkCrossfade swapKey={props.contentKey} class="s-admin-shell-swap">
-                    {slots.content?.()}
-                  </HkCrossfade>
-                ) : (
-                  slots.content?.()
-                )}
-              </div>
-            </HScrollContainer>
-          </main>
-
-          {!isDesktop.value && (
-            <HDrawer
-              modelValue={sidebarOpen.value}
-              onUpdate:modelValue={(v: boolean) => (sidebarOpen.value = v)}
-              side="left"
-              size="280px"
-              title={props.navTitle ?? t("hikari::adminShell.navTitle", "Navigation")}
-              panelClass={props.drawerPanelClass}
-            >
-              {/* The drawer body carries the nav; a `userPanel` slot rides
-                  the drawer footer (identity + account actions) so mobile
-                  gets the same content the desktop user menu exposes.
-                  `inDrawer` lets the sidebar slot fill the drawer width.
-                  The userPanel receives `onNavigate` (closes the drawer)
-                  so its action rows — e.g. "go to frontend", which swaps
-                  the whole layout underneath — can dismiss the drawer
-                  instead of leaving it hovering over the new page. */}
-              {{
-                default: () =>
-                  slots.sidebar?.({ collapsed: false, onNavigate: closeSidebar, inDrawer: true }),
-                footer: slots.userPanel
-                  ? () => slots.userPanel!({ onNavigate: closeSidebar })
-                  : undefined,
-              }}
-            </HDrawer>
-          )}
-        </div>
-
-        {slots.footer && (
-          <footer class="s-status-bar" style={{ position: "fixed", bottom: 0, left: 0, right: 0, // Footer band (was a bare 40 — the pre-band chrome value).
-            zIndex: "var(--hk-z-toolbar)" }}>
-            {slots.footer()}
-          </footer>
-        )}
-
-        {/* Scoped slots are functions — rendering the slot itself instead of
-            calling it would stringify the compiled withCtx source into a text
-            node (normalizeVNode String()s non-vnode children). */}
-        {slots.overlays?.()}
-      </div>
-    );
+    return () =>
+      h(HkFaceShell, {
+        sidebarCollapsed: props.sidebarCollapsed,
+        sidebarWidth: props.sidebarWidth,
+        mobileBreakpoint: props.mobileBreakpoint,
+        footerHeight: props.footerHeight,
+        navTitle: props.navTitle,
+        drawerPanelClass: props.drawerPanelClass,
+        // The admin face IS the document mode by default — stage faces
+        // normally consume HkFaceShell directly; the forward keeps an
+        // explicit opt-in honest (and the declared prop above keeps a
+        // stray attr from ever reaching the inner shell on its own).
+        contentMode: props.contentMode,
+        contentPadding: props.contentPadding,
+        contentKey: props.contentKey,
+        contentBleedOnMobile: props.contentBleedOnMobile,
+      }, {
+        header: slots.header
+          ? (shellParams: Record<string, unknown>) =>
+              slots.header!({
+                ...shellParams,
+                // The legacy channel this wrapper exists to keep: the
+                // actions of the bar provided above, handed to the header
+                // slot exactly as before the extraction.
+                actions: actionBar.actions.value ? actionBar.actions.value() : [],
+              })
+          : undefined,
+        sidebar: slots.sidebar,
+        userPanel: slots.userPanel,
+        content: slots.content,
+        footer: slots.footer,
+        overlays: slots.overlays,
+      });
   },
 });

package/src/components/HkAlert.scss

@@ -93,6 +93,11 @@
 }
 
 .hk-alert-text {
+  /* Alert body = the same copy-this-error-detail content class as the
+   * toast message and message-box text (L2 selection policy re-enables,
+   * 2026-10-29); the title above stays chrome. */
+  -webkit-user-select: text;
+  user-select: text;
   margin: 0;
   line-height: 1.5;
   color: color-mix(in srgb, var(--hi-color-text-secondary, #666666) 85%, transparent);

package/src/components/HkBlockingToast.scss

@@ -58,10 +58,17 @@
 }
 
 .hk-blocking-toast-title {
+  /* Content, not chrome — copy-worthy detail under the L2 selection
+   * policy (2026-10-29): the card shell denies, these two text blocks
+   * select again. */
+  -webkit-user-select: text;
+  user-select: text;
   font-weight: 700;
 }
 
 .hk-blocking-toast-message {
+  -webkit-user-select: text;
+  user-select: text;
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 5;

package/src/components/HkConfirmDialog.scss

@@ -15,6 +15,10 @@
 }
 
 .hk-confirm-dialog-message {
+  /* Dialog message = copy-worthy content, same class as the message-box
+   * text (L2 selection policy re-enables, 2026-10-29). */
+  -webkit-user-select: text;
+  user-select: text;
   margin: 0;
   color: color-mix(in srgb, var(--hi-color-text-secondary) 85%, transparent);
   font-size: var(--text-sm, 0.8125rem);

package/src/components/HkDiffViewer.scss

@@ -67,6 +67,10 @@
 }
 
 .hk-diff-viewer__code {
+  /* The diff body is content (review text users copy into replies);
+   * the line-number gutter above and the sign column stay denied. */
+  -webkit-user-select: text;
+  user-select: text;
   padding-inline-end: 1ch;
   min-width: 0;
 }

package/src/components/HkFaceShell.barrel.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import * as barrel from "../index";
+
+/**
+ * The public barrel guard for HkFaceShell (R3 M6 on PR #900): deleting
+ * the export line from index.ts kept the ENTIRE suite green before this
+ * pin — every other test reaches the component through the direct
+ * "./HkFaceShell" path, so only an external consumer would have noticed.
+ * Same shape as theme/themeDecorSurface.test.ts.
+ *
+ * This file deliberately does NOT mock "@celestia-island/hikari": the
+ * package's self-reference resolves to the very same src/index.ts module
+ * as "../index", so a vi.mock here would replace the barrel under test
+ * with the mock's own namespace (measured: HkFaceShell read as undefined
+ * through `...actual` under the re-entrant factory).
+ */
+describe("the public barrel", () => {
+  it("exports HkFaceShell (deleting the line kept the suite green before this pin)", () => {
+    // defineComponent's object syntax yields a plain object, so the
+    // identity check is the component's own `name`, not typeof.
+    const face = barrel.HkFaceShell as unknown as { name?: string };
+    expect(face, "HkFaceShell must be re-exported").toBeTruthy();
+    expect(face.name).toBe("HkFaceShell");
+    // The admin wrapper stays reachable too — the extraction must not
+    // move the public surface.
+    const admin = barrel.HkAdminShell as unknown as { name?: string };
+    expect(admin, "HkAdminShell must stay exported").toBeTruthy();
+    expect(admin.name).toBe("HkAdminShell");
+  });
+});