@celestia-island/hikari 0.55.203 → 0.55.204

package/package.json

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

package/src/components/HkMarkdownRenderer.scss

@@ -78,6 +78,43 @@
   margin: 0;
 }
 
+/* Markdown tables size to their content, so a wide one (many columns, or
+   a single unbreakable cell) pushes every ancestor's min-content width
+   past its box — clipping hosts (the modal reading region, chat bubbles,
+   report cards) then leave the far columns unreachable. The renderer wraps
+   every table in the same two-level shape as code above: this wrap is the
+   rail HOST (track host for the scroller below — it contains ONLY the
+   scrolling box, so the rail hugs the table instead of spanning the whole
+   markdown body, useOverlayScrollbar's host contract) and carries the
+   table's vertical margin, because a scroll container never collapses
+   margins with its children and the margin must keep collapsing with the
+   surrounding flow exactly as the bare table's did. */
+.hk-md-table-wrap {
+  position: relative;
+  margin: 0.75em 0;
+}
+
+/* The horizontal rail itself — the viewport the overlay scrollbar attaches
+   to. Only a genuinely overflowing table grows the scroll; normal tables
+   keep their full-width layout. Same hidden-native-chrome contract as
+   .hk-md-code (the 2026-10-01 native-bar regression rule). */
+.hk-md-table-scroll {
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* The railed table renders flush inside its scroller — its old vertical
+   margin lives on the host wrap above. Outranks `.hk-markdown table`
+   (two classes + one type vs one class + one type); GFM tables cannot
+   nest, so no other table is ever matched. */
+.hk-markdown .hk-md-table-wrap table {
+  margin: 0;
+}
+
 .hk-md-code-lang {
   position: absolute;
   top: 0.25em;

package/src/components/HkMarkdownRenderer.tsx

@@ -61,7 +61,8 @@ async function renderMarkdown(content: string): Promise<string> {
     return renderPlain(content);
   }
 
-  const renderer = new (marked as unknown as { Renderer: new () => Record<string, unknown> }).Renderer();
+  const RendererCtor = (marked as unknown as { Renderer: new () => Record<string, unknown> }).Renderer;
+  const renderer = new RendererCtor();
 
   (renderer as Record<string, unknown>).code = function (tok: { text: string; lang?: string }) {
     const highlighted = tryHighlight(tok.text, tok.lang);
@@ -74,6 +75,21 @@ async function renderMarkdown(content: string): Promise<string> {
     return `<div class="hk-md-code-wrap"><div class="hk-md-code">${langLabel}<pre><code class="hljs${langAttr}">${highlighted}</code></pre></div></div>`;
   };
 
+  (renderer as Record<string, unknown>).table = function (token: unknown) {
+    // Tables size to their content: a wide one (many columns, or a single
+    // unbreakable cell) pushes every ancestor's min-content width past its
+    // box, and clipping hosts (modal reading region, chat bubbles, report
+    // cards) leave the far columns unreachable. Same two-level shape as the
+    // code override above: `.hk-md-table-wrap` is the rail HOST (a plain
+    // positioned box wrapping only the scroller — the engine anchors the
+    // track in the viewport's parent), `.hk-md-table-scroll` is the
+    // viewport that actually rails. Rail the TABLE itself — normal tables
+    // keep their full-width layout; only a genuinely overflowing one grows
+    // the horizontal scroll (see .hk-md-table-scroll).
+    const inner = (RendererCtor.prototype as { table: (t: unknown) => string }).table.call(this, token);
+    return `<div class="hk-md-table-wrap"><div class="hk-md-table-scroll">${inner}</div></div>`;
+  };
+
   const raw = marked.parse(content, { renderer, async: false });
   const html = typeof raw === "string" ? raw : "";
   return DOMPurify.sanitize(html);
@@ -114,33 +130,34 @@ export default defineComponent({
       { immediate: true },
     );
 
-    // Overlay scrollbars (shared chrome) on markdown code blocks. The
-    // body is innerHTML-rendered and fully replaced on every parse, so
-    // the attachment set is reconciled after each render pass: handles
-    // whose block left the DOM detach, fresh blocks attach.
+    // Overlay scrollbars (shared chrome) on the markdown blocks that can
+    // rail horizontally: code blocks and table scrollers. The body is
+    // innerHTML-rendered and fully replaced on every parse, so the
+    // attachment set is reconciled after each render pass: handles whose
+    // block left the DOM detach, fresh blocks attach.
     const bodyRef = ref<HTMLElement>();
-    const codeScrollbars: Array<{ el: HTMLElement; handle: OverlayScrollbarHandle }> = [];
+    const overlayScrollbars: Array<{ el: HTMLElement; handle: OverlayScrollbarHandle }> = [];
 
-    function syncCodeScrollbars() {
-      for (let i = codeScrollbars.length - 1; i >= 0; i--) {
-        if (!codeScrollbars[i].el.isConnected) {
-          codeScrollbars[i].handle.detach();
-          codeScrollbars.splice(i, 1);
+    function syncOverlayScrollbars() {
+      for (let i = overlayScrollbars.length - 1; i >= 0; i--) {
+        if (!overlayScrollbars[i].el.isConnected) {
+          overlayScrollbars[i].handle.detach();
+          overlayScrollbars.splice(i, 1);
         }
       }
-      for (const el of bodyRef.value?.querySelectorAll<HTMLElement>(".hk-md-code") ?? []) {
-        if (codeScrollbars.some((c) => c.el === el)) continue;
-        codeScrollbars.push({ el, handle: attachOverlayScrollbars(el, { axis: "horizontal" }) });
+      for (const el of bodyRef.value?.querySelectorAll<HTMLElement>(".hk-md-code, .hk-md-table-scroll") ?? []) {
+        if (overlayScrollbars.some((c) => c.el === el)) continue;
+        overlayScrollbars.push({ el, handle: attachOverlayScrollbars(el, { axis: "horizontal" }) });
       }
     }
 
     watch(renderedHtml, () => {
-      void nextTick(syncCodeScrollbars);
+      void nextTick(syncOverlayScrollbars);
     });
 
     onBeforeUnmount(() => {
-      for (const c of codeScrollbars) c.handle.detach();
-      codeScrollbars.length = 0;
+      for (const c of overlayScrollbars) c.handle.detach();
+      overlayScrollbars.length = 0;
     });
 
     return () => (

package/src/components/__tests__/hkMarkdownTableWrap.test.ts

@@ -0,0 +1,82 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Source contract for the markdown table rail (2026-10-24: a wide table —
+ * many columns or one unbreakable cell — pushed every ancestor's
+ * min-content width past its box, and clipping hosts (the chest report
+ * modal's reading region, chat bubbles, report cards) left the far columns
+ * unreachable).
+ *
+ * vitest never resolves stylesheets, and the renderer's marked/DOMPurify
+ * are lazy dynamic imports, so this pins the moving parts as source
+ * contracts in the same idiom as hkMarkdownLang.test.ts:
+ *
+ *   - the renderer overrides `table` to wrap the emitted table in the
+ *     two-level rail shape (host + scroller), delegating to the base
+ *     Renderer for the table markup itself;
+ *   - the stylesheet gives the scroller the horizontal rail with the
+ *     hidden-native-chrome contract (the 2026-10-01 native-bar rule) and
+ *     makes the wrap a positioned rail host carrying the vertical margin;
+ *   - the overlay-scrollbar reconciliation covers the scroller alongside
+ *     `.hk-md-code`, so the rail gets the shared chrome and detaches with
+ *     the block.
+ */
+const here = dirname(fileURLToPath(import.meta.url));
+const tsx = readFileSync(join(here, "../HkMarkdownRenderer.tsx"), "utf-8");
+const scss = readFileSync(join(here, "../HkMarkdownRenderer.scss"), "utf-8");
+
+describe("markdown table rail contract", () => {
+  it("the renderer wraps tables in the rail via the base renderer", () => {
+    // The override must DELEGATE (base table markup) and then wrap — a
+    // replacement that dropped the delegation would lose marked's table
+    // rendering; a wrap without the override is the dead-selector shape.
+    // The wrap is TWO-level (`.hk-md-table-wrap` host containing the
+    // `.hk-md-table-scroll` viewport): the overlay engine anchors its
+    // track in the viewport's PARENT, so a single-level wrap would rail
+    // against the whole `.hk-markdown-body` instead of the table.
+    expect(tsx).toMatch(
+      /return\s*`<div class="hk-md-table-wrap"><div class="hk-md-table-scroll">\$\{inner\}<\/div><\/div>`;/,
+    );
+    expect(tsx).toMatch(
+      /RendererCtor\.prototype as \{ table: \(t: unknown\) => string \}\)\.table\.call\(this, token\)/,
+    );
+  });
+
+  it("the rail stylesheet keeps native chrome hidden on the scroller", () => {
+    expect(scss).toMatch(
+      /\.hk-md-table-scroll\s*\{[^}]*overflow-x:\s*auto/,
+    );
+    expect(scss).toMatch(
+      /\.hk-md-table-scroll\s*\{[^}]*scrollbar-width:\s*none/,
+    );
+  });
+
+  it("the wrap is a positioned host carrying the table's vertical margin", () => {
+    // Host: wraps ONLY the scroller and is positioned, so the rail hugs
+    // the table (no guard promotion of `.hk-markdown-body`); the margin
+    // lives here because the scroll box never collapses margins with its
+    // children — this keeps normal tables' surrounding rhythm identical
+    // to the pre-wrap bare table.
+    expect(scss).toMatch(
+      /\.hk-md-table-wrap\s*\{[^}]*position:\s*relative/,
+    );
+    expect(scss).toMatch(
+      /\.hk-md-table-wrap\s*\{[^}]*margin:\s*0\.75em\s+0/,
+    );
+    expect(scss).toMatch(
+      // `0\s*;` — a bare `margin:\s*0` would also prefix-match the
+      // bare-table `margin: 0.75em 0` and false-pass the very double-margin
+      // regression this reset exists to prevent.
+      /\.hk-markdown \.hk-md-table-wrap table\s*\{[^}]*margin:\s*0\s*;/,
+    );
+  });
+
+  it("the overlay reconciliation covers the rail alongside code blocks", () => {
+    expect(tsx).toMatch(
+      /querySelectorAll<HTMLElement>\("\.hk-md-code, \.hk-md-table-scroll"\)/,
+    );
+  });
+});

package/src/components/paneSwap.contract.test.ts

@@ -11,6 +11,22 @@ const componentsDir = here;
  * Pane-swap contract — the enforcement half of the family's transition
  * primitives (user audit 2026-10-23).
  *
+ * THE DECISION TABLE (which surface for which class of slot):
+ *
+ *   ┌──────────────────────────────┬───────────────────────────────┐
+ *   │ the content can UNMOUNT      │ HkTransitionContainer (frame │
+ *   │ when it leaves the stage     │ must morph) / HkCrossfade    │
+ *   │                              │ (same-box dissolve)          │
+ *   ├──────────────────────────────┼───────────────────────────────┤
+ *   │ the instance must SURVIVE    │ HkPaneHolder (draft stores,  │
+ *   │ (draft store, canvas, sock)  │ canvases, sockets)           │
+ *   ├──────────────────────────────┼───────────────────────────────┤
+ *   │ a WIZARD STEPPER inside a    │ HkStepFlow — see its exception│
+ *   │ modal sheet                  │ below; it is a sibling with a │
+ *   │                              │ different contract, not a    │
+ *   │                              │ rogue pane slot              │
+ *   └──────────────────────────────┴───────────────────────────────┘
+ *
  * THE RULE. A "pane slot" is a container whose visible content is selected
  * by a state key while the container stays put: tabs, settings sections,
  * step bodies, view areas. Every such slot must swap through the standard
@@ -113,7 +129,34 @@ describe("pane-swap contract", () => {
       // wrapped by the standard above or justified here.
       "HkTabs.tsx", // wrapped by HkTransitionContainer (pinned above)
       "HkSettingsDialog.tsx", // wrapped by HkTransitionContainer (pinned above)
-      "HkStepFlow.tsx", // justified: frozen-sheet two-window protocol + direction axis
+      // HkStepFlow is NOT a rogue pane slot — it is a sibling mechanism
+      // with a contract the generic primitives deliberately do not
+      // offer (2026-10-24 deep-dive ruling; do not re-litigate without
+      // reading this):
+      //  1. SEQUENTIAL two-window choreography (slide with the hosting
+      //     sheet's height FROZEN, then the morph plays ALONE) — the
+      //     inversion of HkTransitionContainer's concurrent morph, born
+      //     from the 2026-09-23 round-16 user directive after the
+      //     concurrent form overloaded phone GPU raster threads
+      //     (whole-region black flashes no layering fix absorbed).
+      //  2. A direction axis (translateX travel + RTL mirroring) that
+      //     HkCrossfade's contract forbids — its tests pin
+      //     opacity-only, no transform, ever.
+      //  3. The hk-stepflow-swap sheet protocol: HkModal freezes its
+      //     height pin on "swap", safety-unfreezes (ms+650), and
+      //     height-morphs alone on "morph".
+      //  4. Six round-numbered field incidents live in its logic:
+      //     r16 align-self:start (grid stretch zeroed every shrink's
+      //     delta), r17 near-instant clip sweep (moving clip edges
+      //     re-raster per frame), r18 announce-AFTER-patch (a shrink
+      //     read the leaving body's geometry and no-opped), r22
+      //     Android-autofill strobe (dropFlowFocus before the swap),
+      //     r24 sticky-pin vs modal gutter-cover layering, and
+      //     preemptSwap keeping whichever body is actually visible
+      //     (opacity > 0.05) when interrupted mid-slide.
+      // Merging any of this into the generic container would change its
+      // semantics for every existing call site. Permanent exception.
+      "HkStepFlow.tsx",
       "HkAdminShell.tsx", // content slot is host-owned; hosts key it (chest wraps HkCrossfade)
       "HkThemePanelContent.tsx", // forwards to HTabs (HkTabs), inherits the mechanism
       "HkMenuPanel.tsx", // menu items, not a pane swap