@celestia-island/hikari 0.43.13 → 0.43.15

package/src/components/HkDateTimePicker.scss

@@ -59,8 +59,8 @@
   color: inherit;
   cursor: pointer;
   white-space: nowrap;
-  border-radius: var(--hi-radius-sm, 4px);
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  border-radius: var(--radius-sm, 4px);
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
     background: var(--hi-color-surface);
@@ -80,13 +80,13 @@
   border: 0;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: var(--hi-color-muted);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
     background: var(--hi-color-surface);
@@ -122,7 +122,7 @@
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   /* Fixed height keeps the six-row day grid — and therefore the shared
    * stage height — independent of the picker width, so drilling between
    * views never changes the picker's size (enlarged on touch). */
@@ -134,7 +134,7 @@
   cursor: pointer;
   font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover:not(:disabled):not(.is-selected) {
     background: var(--hi-color-surface);
@@ -232,8 +232,8 @@
   justify-content: center;
   color: var(--hi-color-muted);
   cursor: pointer;
-  border-radius: var(--hi-radius-sm, 4px);
-  transition: color var(--hi-duration-fast, 0.15s) ease, background var(--hi-duration-fast, 0.15s) ease;
+  border-radius: var(--radius-sm, 4px);
+  transition: color var(--duration-fast, 0.15s) ease, background var(--duration-fast, 0.15s) ease;
 
   &:hover {
     color: var(--hi-color-text-primary);
@@ -266,13 +266,13 @@
   appearance: none;
   background: transparent;
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   padding: var(--space-4, 4px) var(--space-10, 10px);
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
   color: var(--hi-color-muted);
   cursor: pointer;
-  transition: color var(--hi-duration-fast, 0.15s) ease, border-color var(--hi-duration-fast, 0.15s) ease;
+  transition: color var(--duration-fast, 0.15s) ease, border-color var(--duration-fast, 0.15s) ease;
 
   &:hover {
     color: var(--hi-color-text-primary);
@@ -300,12 +300,12 @@
   padding: var(--space-4, 4px) var(--space-10, 10px);
   background: var(--hi-color-surface);
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: color-mix(in srgb, var(--hi-color-text-secondary) 70%, transparent);
   font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
   cursor: pointer;
-  transition: border-color var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: border-color var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover,
   &[aria-expanded="true"] {
@@ -330,7 +330,7 @@
 
 .hk-dtp-trigger-chev {
   color: var(--hi-color-muted);
-  transition: transform var(--hi-duration-fast, 0.15s) ease;
+  transition: transform var(--duration-fast, 0.15s) ease;
 }
 
 .hk-dtp-trigger-chev.is-open {
@@ -378,12 +378,12 @@
   background: var(--hi-color-primary);
   color: rgb(var(--color-on-solid-text, 255 255 255));
   border: 0;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   padding: var(--space-6, 6px) var(--space-14, 14px);
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
   cursor: pointer;
-  transition: filter var(--hi-duration-fast, 0.15s) ease;
+  transition: filter var(--duration-fast, 0.15s) ease;
 
   &:hover { filter: brightness(1.08); }
   &:focus-visible { outline: 2px solid color-mix(in srgb, var(--hi-color-primary) 55%, transparent); outline-offset: 2px; }
@@ -400,7 +400,7 @@
   padding: var(--space-8, 8px) var(--space-12, 12px);
   background: var(--hi-color-surface);
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: var(--hi-color-text-primary);
   font-family: inherit;
   font-size: var(--text-sm, 0.875rem);

package/src/components/HkDivider.scss

@@ -1,5 +1,5 @@
 .hk-divider {
-  --hk-divider-color: var(--hi-color-border, rgba(0, 0, 0, 0.12));
+  --hk-divider-color: var(--hi-color-border, rgba(100,100,100,0.12));
   flex-shrink: 0;
 
   width: 100%;
@@ -16,11 +16,11 @@
 }
 
 .hk-divider-faint {
-  --hk-divider-color: var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  --hk-divider-color: var(--hi-color-border, rgba(100,100,100,0.06));
 }
 
 .hk-divider-input {
-  --hk-divider-color: var(--hi-color-border, rgba(0, 0, 0, 0.15));
+  --hk-divider-color: var(--hi-color-border, rgba(100,100,100,0.15));
 }
 
 .hk-divider-dashed.hk-divider-vertical {

package/src/components/HkDraggableGrid.scss

@@ -12,9 +12,9 @@
 
 .hk-draggable-grid-row-phantom {
   min-height: 44px;
-  border: 1px dashed var(--hi-color-primary, #58a6ff);
+  border: 1px dashed var(--hi-color-primary, #7aa2f7);
   border-radius: var(--radius-sm, 4px);
-  background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
+  background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
 }
 
 .hk-draggable-grid-cell {
@@ -26,7 +26,7 @@
   padding: var(--space-8, 0.5rem) var(--space-10, 0.625rem);
   border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-subtle, #21262d);
-  border: 1px solid var(--hi-color-border, #30363d);
+  border: 1px solid var(--hi-color-border, #646464);
   transition:
     transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
     opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
@@ -45,13 +45,13 @@
     opacity: 0.35;
     transform: scale(0.96);
     border-style: dashed;
-    border-color: var(--hi-color-primary, #58a6ff);
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
     cursor: grabbing;
   }
 
   &[data-placeholder="before"] {
-    box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #58a6ff);
+    box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #7aa2f7);
   }
 
   &[data-locked] {
@@ -61,30 +61,30 @@
     /* Locked cells never start a drag (tsx returns early) — no hover
      * affordance and no grab cursor on their surface. */
     &:hover {
-      border-color: var(--hi-color-border, #30363d);
+      border-color: var(--hi-color-border, #646464);
     }
   }
 
   .hk-draggable-grid[data-dragging] & {
     &:hover {
-      border-color: var(--hi-color-border, #30363d);
+      border-color: var(--hi-color-border, #646464);
     }
   }
 }
 
 .hk-draggable-grid-row[data-placeholder-row="after"] {
-  box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #58a6ff);
+  box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #7aa2f7);
 }
 
 /* RTL flips the flex flow, so the before/after insertion markers must
  * swap physical sides to keep pointing at the inline edge (HkBreadcrumb
  * precedent for the [dir="rtl"] override form). */
 [dir="rtl"] .hk-draggable-grid-cell[data-placeholder="before"] {
-  box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #58a6ff);
+  box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #7aa2f7);
 }
 
 [dir="rtl"] .hk-draggable-grid-row[data-placeholder-row="after"] {
-  box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #58a6ff);
+  box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-draggable-grid-cell-placeholder-target {

package/src/components/HkDraggableList.scss

@@ -12,7 +12,7 @@
   padding: var(--space-8, 0.5rem) var(--space-10, 0.625rem);
   border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-subtle, #21262d);
-  border: 1px solid var(--hi-color-border, #30363d);
+  border: 1px solid var(--hi-color-border, #646464);
   transition:
     transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
     opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
@@ -29,16 +29,16 @@
     opacity: 0.35;
     transform: scale(0.96);
     border-style: dashed;
-    border-color: var(--hi-color-primary, #58a6ff);
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
     cursor: grabbing;
   }
 
   &[data-placeholder="before"] {
-    box-shadow: inset 0 2px 0 0 var(--hi-color-primary, #58a6ff);
+    box-shadow: inset 0 2px 0 0 var(--hi-color-primary, #7aa2f7);
   }
   &[data-placeholder="after"] {
-    box-shadow: inset 0 -2px 0 0 var(--hi-color-primary, #58a6ff);
+    box-shadow: inset 0 -2px 0 0 var(--hi-color-primary, #7aa2f7);
   }
 
   &[data-locked] {
@@ -47,7 +47,7 @@
 
   .hk-draggable-list[data-dragging] & {
     &:hover {
-      border-color: var(--hi-color-border, #30363d);
+      border-color: var(--hi-color-border, #646464);
     }
   }
 }

package/src/components/HkDrawer.scss

@@ -11,55 +11,55 @@
 // contract (./_scrim-fade.scss); the panel below owns all the motion.
 @include sf.scrim-fade(
   "hk-drawer-overlay",
-  $enter-duration: var(--hi-duration-normal, 0.3s),
-  $enter-ease: var(--hi-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
-  $leave-duration: var(--hi-duration-normal, 0.3s),
-  $leave-ease: var(--hi-ease-in, cubic-bezier(0.4, 0, 1, 1))
+  $enter-duration: var(--duration-normal, 0.3s),
+  $enter-ease: var(--ease-elastic, cubic-bezier(0.16, 1, 0.3, 1)),
+  $leave-duration: var(--duration-normal, 0.3s),
+  $leave-ease: var(--ease-in, cubic-bezier(0.4, 0, 1, 1))
 );
 
 .hk-drawer-panel {
   position: fixed;
   display: flex;
   flex-direction: column;
-  background: var(--hk-drawer-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)));
+  background: var(--hk-drawer-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
   backdrop-filter: blur(12px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
   outline: none;
   transition:
-    width var(--hi-duration-normal, 0.3s) ease,
-    height var(--hi-duration-normal, 0.3s) ease;
+    width var(--duration-normal, 0.3s) ease,
+    height var(--duration-normal, 0.3s) ease;
 }
 
 .hk-drawer-left {
   top: 0;
   bottom: 0;
   left: 0;
-  border-right: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: 0 var(--hi-radius-md, 0.5rem) var(--hi-radius-md, 0.5rem) 0;
+  border-right: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  border-radius: 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0;
 }
 
 .hk-drawer-right {
   top: 0;
   bottom: 0;
   right: 0;
-  border-left: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: var(--hi-radius-md, 0.5rem) 0 0 var(--hi-radius-md, 0.5rem);
+  border-left: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  border-radius: var(--radius-md, 0.5rem) 0 0 var(--radius-md, 0.5rem);
 }
 
 .hk-drawer-top {
   top: 0;
   left: 0;
   right: 0;
-  border-bottom: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: 0 0 var(--hi-radius-md, 0.5rem) var(--hi-radius-md, 0.5rem);
+  border-bottom: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  border-radius: 0 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem);
 }
 
 .hk-drawer-bottom {
   bottom: 0;
   left: 0;
   right: 0;
-  border-top: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: var(--hi-radius-md, 0.5rem) var(--hi-radius-md, 0.5rem) 0 0;
+  border-top: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  border-radius: var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0 0;
 }
 
 .hk-drawer-left-enter-active,
@@ -71,8 +71,8 @@
      that briefly opens a gap between the panel edge and the screen
      edge. Both properties use the same plain ease-out. */
   transition:
-    opacity var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1),
-    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+    opacity var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1),
+    transform var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-drawer-left-leave-active,
@@ -80,8 +80,8 @@
 .hk-drawer-top-leave-active,
 .hk-drawer-bottom-leave-active {
   transition:
-    opacity var(--hi-duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1),
-    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1);
+    opacity var(--duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1),
+    transform var(--duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1);
 }
 
 .hk-drawer-left-enter-from,
@@ -113,14 +113,14 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--space-12, 0.75rem) var(--space-16, 1rem);
-  border-bottom: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  border-bottom: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
   flex-shrink: 0;
 }
 
 .hk-drawer-title {
   font-size: var(--text-base, 0.875rem);
   font-weight: 700;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
 }
 
 // Legacy placement hook — the chrome lives on the shared .hk-icon-button
@@ -162,7 +162,7 @@
   /* HkMenuPanel carries its own inset; zero this variable when the
      footer hosts one so both edges align. */
   padding: var(--hk-drawer-footer-padding, var(--space-12, 0.75rem) var(--space-16, 1rem));
-  border-top: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  border-top: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
   flex-shrink: 0;
 }
 
@@ -180,8 +180,8 @@
 @media (max-width: 767px) {
   .hk-drawer-bottom {
     bottom: var(--hk-sheet-bottom-gap, 0px);
-    border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))
-                   var(--hk-modal-radius, var(--hi-radius-lg, 12px))
+    border-radius: var(--hk-modal-radius, var(--radius-lg, 12px))
+                   var(--hk-modal-radius, var(--radius-lg, 12px))
                    0 0;
     // The inline maxHeight from the `size` prop must lose to the family cap
     // (plain-vh fallback first for dvh-less engines, then dvh) — same

package/src/components/HkDrawer.sheetfamily.test.ts

@@ -60,7 +60,7 @@ describe("HkDrawer mobile bottom sheet-family contract", () => {
   });
 
   it("adopts the 12px family corner radius", () => {
-    expect(drawer).toContain("border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))");
+    expect(drawer).toContain("border-radius: var(--hk-modal-radius, var(--radius-lg, 12px))");
   });
 
   it("stacks the home-bar safe area on the mobile footer's BOTTOM axis", () => {

package/src/components/HkEmptyState.scss

@@ -5,10 +5,10 @@
   justify-content: center;
   padding: var(--space-48, 3rem) var(--space-16, 1rem);
   text-align: center;
-  background: var(--hk-empty-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)));
+  background: var(--hk-empty-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
   backdrop-filter: blur(var(--blur-sm, 8px));
-  border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
-  border-radius: var(--hi-radius-md, 0.5rem);
+  border: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
+  border-radius: var(--radius-md, 0.5rem);
   box-sizing: border-box;
 }
 
@@ -16,7 +16,7 @@
   width: var(--space-48, 3rem);
   height: var(--space-48, 3rem);
   margin-bottom: var(--space-12, 0.75rem);
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   opacity: 0.5;
   display: flex;
   align-items: center;
@@ -26,13 +26,13 @@
 .hk-empty-title {
   font-size: var(--text-base, 0.875rem);
   font-weight: 600;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
   margin: 0 0 var(--space-8, 0.5rem);
 }
 
 .hk-empty-desc {
   font-size: var(--text-sm, 0.8125rem);
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   margin: 0 0 var(--space-16, 1rem);
   max-width: 24rem;
   line-height: 1.5;

package/src/components/HkFab.scss

@@ -51,10 +51,10 @@
   -webkit-appearance: none;
   padding: 0;
   border: none;
-  border-radius: var(--hi-radius-full, 9999px);
+  border-radius: var(--radius-full, 9999px);
   cursor: pointer;
   font-family: inherit;
-  transition: transform var(--hi-duration-fast, 0.15s) ease, box-shadow var(--hi-duration-fast, 0.15s) ease;
+  transition: transform var(--duration-fast, 0.15s) ease, box-shadow var(--duration-fast, 0.15s) ease;
 
   &:active:not(:disabled) { transform: scale(0.94); }
   &:focus-visible { outline: 2px solid var(--hi-color-primary, #7aa2f7); outline-offset: 2px; }
@@ -84,13 +84,13 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
 }
 
 .hk-fab[data-variant="glass"] .hk-fab-button {
-  color: var(--hi-color-text-secondary, #555);
-  background: color-mix(in srgb, var(--hi-color-surface, #fff) 78%, transparent);
-  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(0, 0, 0, 0.12)) 25%, transparent);
+  color: var(--hi-color-text-secondary, #666666);
+  background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(100,100,100,0.12)) 25%, transparent);
   backdrop-filter: blur(var(--blur-xs, 4px)); // chip language shared with autotag pills
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
 
-  &:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-color-surface, #fff) 92%, transparent); }
+  &:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 92%, transparent); }
 }
 
 .hk-fab[data-variant="primary"] .hk-fab-button {
@@ -129,16 +129,16 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   font-size: 0.6875rem;
   letter-spacing: 0.02em;
   white-space: nowrap;
-  color: var(--hi-color-text-secondary, #555);
-  background: color-mix(in srgb, var(--hi-color-surface, #fff) 82%, transparent);
-  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(0, 0, 0, 0.12)) 25%, transparent);
-  border-radius: var(--hi-radius-full, 9999px);
+  color: var(--hi-color-text-secondary, #666666);
+  background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 82%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(100,100,100,0.12)) 25%, transparent);
+  border-radius: var(--radius-full, 9999px);
   cursor: pointer;
   backdrop-filter: blur(var(--blur-xs, 4px));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
   opacity: 0;
   transform: scale(0.4);
-  transition: opacity var(--hi-duration-fast, 0.15s) ease, transform var(--hi-duration-fast, 0.15s) ease;
+  transition: opacity var(--duration-fast, 0.15s) ease, transform var(--duration-fast, 0.15s) ease;
 
   .hk-fab-mini-icon {
     display: inline-flex;
@@ -149,7 +149,7 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   &:focus-visible { outline: 2px solid var(--hi-color-primary, #7aa2f7); outline-offset: 1px; }
   &:disabled { opacity: 0.35; cursor: not-allowed; }
   // 82%→94% mirrors the main glass hover ladder (78%→92%).
-  &:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-color-surface, #fff) 94%, transparent); }
+  &:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 94%, transparent); }
 }
 
 // Staggered reveal while expanded (CSS only, via nth-child delay).

package/src/components/HkFileField.scss

@@ -69,7 +69,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
     outline-offset: 2px;
     border-radius: var(--radius-xs, 2px);
   }
@@ -117,7 +117,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
     outline-offset: 1px;
   }
 }

package/src/components/HkFilePickerField.scss

@@ -54,8 +54,8 @@
   width: 1.75rem;
   height: 1.75rem;
   border-radius: var(--radius-xs, 2px);
-  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 14%, transparent);
-  color: var(--hi-color-primary, #58a6ff);
+  background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 14%, transparent);
+  color: var(--hi-color-primary, #7aa2f7);
   pointer-events: none;
 }
 

package/src/components/HkImagePreview.scss

@@ -9,7 +9,7 @@
   width: 100%;
   overflow: hidden;
   background: var(--hi-color-gray-100, rgba(0, 0, 0, 0.04));
-  border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  border: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
   border-radius: var(--radius-md, 8px);
 }
 
@@ -19,10 +19,10 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
 
   &:hover {
-    border-color: var(--hi-color-primary, #58a6ff);
+    border-color: var(--hi-color-primary, #7aa2f7);
     // Emphasis drawn INSIDE the border box (HkSelectionGrid precedent):
     // outer spread rings get shaved per-side by overlapping chrome.
-    box-shadow: inset 0 0 0 1px var(--hi-color-primary, #58a6ff);
+    box-shadow: inset 0 0 0 1px var(--hi-color-primary, #7aa2f7);
   }
 
   // Press feedback matching the house button pattern (HkButton variants,
@@ -32,7 +32,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
     outline-offset: 2px;
   }
 }
@@ -65,9 +65,9 @@
   justify-content: center;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent) 25%,
-    color-mix(in srgb, var(--hi-color-primary, #58a6ff) 18%, transparent) 50%,
-    color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent) 75%
+    color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 8%, transparent) 25%,
+    color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 18%, transparent) 50%,
+    color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 8%, transparent) 75%
   );
   background-size: 200% 100%;
   animation: hk-image-preview-shimmer 1.5s ease-in-out infinite;
@@ -95,7 +95,7 @@
   justify-content: center;
   gap: var(--space-8, 0.5rem);
   padding: var(--space-12, 0.75rem);
-  color: var(--hi-color-muted, #666);
+  color: var(--hi-color-muted, #6c6c6c);
   text-align: center;
 }
 

package/src/components/HkImageViewer.tsx

@@ -2,6 +2,7 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } fro
 
 import HSpinner from "./HkSpinner";
 import HMinimap from "./HkMinimap";
+import { drawnScale } from "../composables/layoutGeometry";
 import "./HkImageViewer.scss";
 
 /**
@@ -57,6 +58,29 @@ export default defineComponent({
       return c ? { cw: c.clientWidth, ch: c.clientHeight } : { cw: 0, ch: 0 };
     }
 
+    /** How many of the container's own pixels one DRAWN pixel is worth.
+     *  The camera (`panX`/`panY`/`zoom`) lives in the container's local CSS
+     *  pixels while the pointer arrives in drawn ones, and a scaled or zoomed
+     *  root makes the two differ — feeding a drawn delta straight into the
+     *  camera moves the image `k` times as far as the finger went. */
+    function pxScale() {
+      const el = containerRef.value;
+      if (!el) return 1;
+      const scale = drawnScale(el);
+      const factor = el.offsetWidth > 0 ? scale.x : el.offsetHeight > 0 ? scale.y : 1;
+      return factor > 0 ? factor : 1;
+    }
+
+    /** A pointer position inside the container, in the container's own
+     *  pixels (the space every anchor and the camera are written in). */
+    function localPoint(e: { clientX: number; clientY: number }) {
+      const el = containerRef.value;
+      if (!el) return { x: 0, y: 0 };
+      const rect = el.getBoundingClientRect();
+      const factor = pxScale();
+      return { x: (e.clientX - rect.left) / factor, y: (e.clientY - rect.top) / factor };
+    }
+
     function recomputeFit() {
       const { cw, ch } = dims();
       if (!imgW.value || !imgH.value || !cw || !ch) return;
@@ -115,11 +139,9 @@ export default defineComponent({
       e.preventDefault();
       const el = containerRef.value;
       if (!el) return;
-      const rect = el.getBoundingClientRect();
-      const cx = e.clientX - rect.left;
-      const cy = e.clientY - rect.top;
+      const at = localPoint(e);
       const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-      setZoom(zoom.value * factor, cx, cy);
+      setZoom(zoom.value * factor, at.x, at.y);
     }
 
     /** Euclidean distance between two pointer positions. */
@@ -172,19 +194,19 @@ export default defineComponent({
         if (!pair || !el) return;
         // Anchor the zoom at the fingers' midpoint (container-local
         // coordinates, same space as the wheel/dblclick anchors).
-        const rect = el.getBoundingClientRect();
         const dist = Math.max(pointerDist(pair[0], pair[1]), 1);
-        setZoom(
-          pinchStartZoom * (dist / pinchStartDist),
-          (pair[0].x + pair[1].x) / 2 - rect.left,
-          (pair[0].y + pair[1].y) / 2 - rect.top,
-        );
+        const mid = localPoint({
+          clientX: (pair[0].x + pair[1].x) / 2,
+          clientY: (pair[0].y + pair[1].y) / 2,
+        });
+        setZoom(pinchStartZoom * (dist / pinchStartDist), mid.x, mid.y);
         return;
       }
 
       if (!dragging.value) return;
-      const dx = e.clientX - lastPt.value.x;
-      const dy = e.clientY - lastPt.value.y;
+      const factor = pxScale();
+      const dx = (e.clientX - lastPt.value.x) / factor;
+      const dy = (e.clientY - lastPt.value.y) / factor;
       lastPt.value = { x: e.clientX, y: e.clientY };
       panX.value += dx;
       panY.value += dy;
@@ -235,12 +257,11 @@ export default defineComponent({
       if (!loaded.value) return;
       const el = containerRef.value;
       if (!el) return;
-      const rect = el.getBoundingClientRect();
-      const cx = e.clientX - rect.left;
-      const cy = e.clientY - rect.top;
-      setZoom(isZoomed.value ? fit.value : Math.min(MAX_ZOOM, fit.value * 3), cx, cy);
+      const at = localPoint(e);
+      setZoom(isZoomed.value ? fit.value : Math.min(MAX_ZOOM, fit.value * 3), at.x, at.y);
     }
 
+    /** Panned by another surface (the minimap), in this camera's own units. */
     function onPanDelta(dx: number, dy: number) {
       panX.value += dx;
       panY.value += dy;