@celestia-island/hikari 0.55.107 → 0.55.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.107",
+  "version": "0.55.109",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAdminShell.test.tsx

@@ -76,6 +76,17 @@ const setWidth = (w: number) => {
   window.dispatchEvent(new Event("resize"));
 };
 
+function paddingInner(container: HTMLElement): HTMLElement | null | undefined {
+  const viewport = container.querySelector(".hk-scroll-container-viewport")
+    ?? container.querySelector(".hk-scroll-container");
+  return viewport?.firstElementChild as HTMLElement | null | undefined;
+}
+
+function mobileInnerPadding(container: HTMLElement): string {
+  return paddingInner(container)?.style.padding ?? "";
+}
+
+
 function shellNode(
   props: Record<string, unknown>,
   slots: Record<string, unknown>,
@@ -234,4 +245,37 @@ describe("HkAdminShell", () => {
     expect(inner).toBeTruthy();
     expect(inner?.style.padding).toBe("2rem");
   });
+
+  it("drops the horizontal half of the content padding below the mobile breakpoint", async () => {
+    // Phone width: side gutters must vanish; vertical clearance survives.
+    // Asserted via longhands: happy-dom's shorthand parser collapses
+    // 3-value paddings, so style.padding cannot distinguish them here.
+    setWidth(390);
+    const mobileShell = mount(shellNode(
+      { navTitle: "Navigation", contentPadding: "2rem" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    const inner = paddingInner(mobileShell);
+    expect(inner?.style.paddingTop).toBe("2rem");
+    expect(inner?.style.paddingBottom).toBe("2rem");
+    expect(inner?.style.paddingLeft).toBe("0px");
+    expect(inner?.style.paddingRight).toBe("0px");
+
+    // Multi-value shorthand keeps per-side meaning: vertical survives,
+    // horizontal is zeroed (never the inverted "1rem 2rem 0").
+    const multi = mount(shellNode(
+      { navTitle: "Navigation", contentPadding: "1rem 2rem" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    const multiInner = paddingInner(multi);
+    expect(multiInner?.style.paddingTop).toBe("1rem");
+    expect(multiInner?.style.paddingBottom).toBe("1rem");
+    expect(multiInner?.style.paddingLeft).toBe("0px");
+    expect(multiInner?.style.paddingRight).toBe("0px");
+
+    // Crossing back to desktop restores the verbatim padding.
+    setWidth(1280);
+    await nextTick();
+    expect(mobileInnerPadding(mobileShell)).toBe("2rem");
+  });
 });

package/src/components/HkAdminShell.tsx

@@ -21,7 +21,11 @@ export const HkAdminShell = defineComponent({
     drawerPanelClass: { type: String, default: undefined },
     /** Content-area padding (inside the scroll viewport). Padding is
      *  applied to an inner wrapper rather than the scroll container so
-     *  card box-shadows are never clipped at the viewport edges. */
+     *  card box-shadows are never clipped at the viewport edges. Below
+     *  the mobile breakpoint the horizontal half is dropped
+     *  automatically (2026-10-03 user direction: on phones the content
+     *  area must span the full width for 2D panels and the 3D scene —
+     *  only the vertical clearance survives). */
     contentPadding: { type: String, default: "1.5rem" },
   },
   setup(props, { slots }) {
@@ -30,6 +34,22 @@ export const HkAdminShell = defineComponent({
     const isDesktop = computed(() => viewportWidth.value >= props.mobileBreakpoint);
     const sidebarOpen = ref(false);
 
+    // Content padding with the mobile side-gutter rule applied: desktop
+    // gets the value verbatim; below the breakpoint the horizontal
+    // tracks become zero while the vertical tracks survive. The CSS
+    // padding shorthand is parsed per side so multi-value values keep
+    // their meaning ("1rem 2rem" -> "1rem 0", not the invalid or
+    // inverted "1rem 2rem 0"). An empty value passes through untouched.
+    const mobileSideGutterFree = (value: string): string => {
+      const sides = value.trim().split(/\s+/).filter(Boolean);
+      if (sides.length === 0) return value;
+      const [top, , bottom] = sides;
+      return `${top} 0 ${bottom ?? top}`;
+    };
+    const contentStyle = computed(() => ({
+      padding: isDesktop.value ? props.contentPadding : mobileSideGutterFree(props.contentPadding),
+    }));
+
     const actionBar = provideActionBar();
 
     const toggleHamburger = () => {
@@ -80,7 +100,7 @@ export const HkAdminShell = defineComponent({
               {/* Padding lives INSIDE the scroll viewport (an inner
                   wrapper) so card box-shadows are not clipped at the
                   viewport edges. */}
-              <div style={{ padding: props.contentPadding }}>{slots.content?.()}</div>
+              <div style={contentStyle.value}>{slots.content?.()}</div>
             </HScrollContainer>
           </main>
 

package/src/components/HkButton.scss

@@ -44,7 +44,20 @@
    text and toolbar rows. Font size does NOT scale with the size
    (2026-08-30 user report, Material-Design convention): md and lg share
    --text-base and lg only grows padding/min-height for a larger touch
-   target; sm keeps its compact --text-xs. */
+   target; sm keeps its compact --text-xs. xs (2026-10-02, connection
+   popover action row) shrinks the footprint further for inline popover
+   footers: same --text-xs, tighter padding, 1.375rem min-height, and a
+   13px glyph produced entirely by the CSS chain below (the glyph box
+   drops to 0.8125rem and the inner .hk-icon span scales to 100% of it,
+   so the svg that always renders at HIcon's size={16} lands at 13px)
+   while the square-glyph contract keeps its rhythm at the smaller
+   scale. HkButton.tsx itself renders every size's glyph identically. */
+
+.hk-btn-xs {
+  padding: var(--space-4) var(--space-8);
+  font-size: var(--text-xs);
+  min-height: 1.375rem;
+}
 
 .hk-btn-sm {
   padding: var(--space-6) var(--space-12);
@@ -73,6 +86,19 @@
    consistent margin from the adjacent label via the button's own gap.
    The 1rem box matches the 16px glyph HkButton renders for the
    icon/suffix props. */
+.hk-btn-xs .hk-btn-icon,
+.hk-btn-xs .hk-btn-suffix {
+  inline-size: 0.8125rem;
+  block-size: 0.8125rem;
+
+  /* HIcon's smallest span is 1rem; the box scales the span (and the svg
+     fills the span), so the glyph lands at 13px inside the 22px button. */
+  .hk-icon {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}
+
 .hk-btn-icon,
 .hk-btn-suffix {
   display: inline-flex;
@@ -121,6 +147,10 @@
   box-sizing: border-box;
 }
 
+.hk-btn-xs.hk-btn-icon-only {
+  width: 1.375rem;
+}
+
 .hk-btn-sm.hk-btn-icon-only {
   width: 1.75rem;
 }

package/src/components/HkButton.test.tsx

@@ -62,6 +62,15 @@ describe("HkButton class mapping", () => {
     expect(cls).not.toContain("hk-btn-md");
   });
 
+  it("maps the xs size with its leading icon box", () => {
+    const xs = mount(h(HkButton, { size: "xs", icon: "RotateCw" }, () => "Reconnect"));
+    const xsBtn = button(xs);
+    expect(xsBtn.className).toContain("hk-btn-xs");
+    const box = xsBtn.querySelector(".hk-btn-icon");
+    expect(box, "xs renders the leading icon box").toBeTruthy();
+    expect(box!.querySelector(".hk-icon"), "HIcon span renders").toBeTruthy();
+  });
+
   it("adds the block modifier only when block is set", () => {
     const blocked = mount(h(HkButton, { block: true }, () => "wide"));
     expect(button(blocked).className).toContain("hk-btn-block");
@@ -207,8 +216,16 @@ describe("HkButton icon-only SCSS contract", () => {
     expect(rule).toContain("width: 100%");
   });
 
+  it("shrinks the xs glyph box and scales the HIcon span with it", () => {
+    const rule = scss.match(/\.hk-btn-xs \.hk-btn-icon,\n\.hk-btn-xs \.hk-btn-suffix\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "xs glyph-box rule must exist").toBeTruthy();
+    expect(rule).toContain("inline-size: 0.8125rem");
+    expect(rule).toContain("inline-size: 100%");
+  });
+
   it("locks each size variant width to its min-height", () => {
     const cases: Array<[string, string]> = [
+      ["xs", "1.375rem"],
       ["sm", "1.75rem"],
       ["md", "2.5rem"],
       ["lg", "2.75rem"],

package/src/components/HkButton.tsx

@@ -11,7 +11,7 @@ export type ButtonVariant =
   | "ghost"
   | "danger"
   | "outline";
-export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
 
 export default defineComponent({
   name: "HkButton",

package/src/components/HkStatusBar.test.tsx

@@ -345,6 +345,9 @@ describe("HkStatusBar", () => {
     expect(row, "actions row renders").toBeTruthy();
     const button = row.querySelector<HTMLButtonElement>("button")!;
     expect(button.textContent).toContain("Reconnect now");
+    // 2026-10-02 user direction: small buttons with a leading glyph.
+    expect(button.className).toContain("hk-btn-xs");
+    expect(button.querySelector(".hk-btn-icon svg"), "leading glyph renders").toBeTruthy();
     expect(panel.textContent).not.toContain("Click to retry");
     button.click();
     expect(onRetry, "popover button click retries").toHaveBeenCalledTimes(1);

package/src/components/HkStatusBar.tsx

@@ -458,7 +458,12 @@ export const HkStatusBar = defineComponent({
                   }}
                 >
                   {showRetryButton && (
-                    <HkButton size="sm" variant="secondary" onClick={onRetryButtonClick}>
+                    <HkButton
+                      size="xs"
+                      variant="secondary"
+                      icon="RotateCw"
+                      onClick={onRetryButtonClick}
+                    >
                       {t("hikari::statusBar.retryNow", "Reconnect now")}
                     </HkButton>
                   )}