@celestia-island/hikari 0.43.10 → 0.43.13

package/src/components/HkBlockingToast.scss

@@ -4,12 +4,12 @@
 // transient toasts read as one stack; the card itself follows the toast
 // item conventions (variant background, icon column, clamped message)
 // with a button row appended. Pointer events pass through the column
-// and re-enable on the card, exactly like toasts.
+// and re-enable on the per-card slot, exactly like toasts.
 
 .hk-blocking-toast-container {
   position: fixed;
   top: 4rem;
-  right: 1rem;
+  inset-inline-end: 1rem;
   z-index: var(--hk-z-toast, 4000);
   max-width: 24rem;
   pointer-events: none;
@@ -19,7 +19,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--hi-space-12, 12px);
+  gap: var(--space-12, 12px);
 }
 
 .hk-blocking-toast-slot {
@@ -30,13 +30,12 @@
 .hk-blocking-toast-card {
   display: flex;
   align-items: flex-start;
-  gap: var(--hi-space-8, 8px);
-  padding: var(--hi-space-12, 12px) var(--hi-space-16, 16px);
+  gap: var(--space-8, 8px);
+  padding: var(--space-12, 12px) var(--space-16, 16px);
   border-radius: var(--hi-radius-sm, 4px);
-  font-size: var(--hi-text-base, 0.875rem);
+  font-size: var(--text-base, 0.875rem);
   line-height: 1.4;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  pointer-events: auto;
   backdrop-filter: blur(12px);
 }
 
@@ -53,11 +52,10 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--hi-space-8, 8px);
+  gap: var(--space-8, 8px);
 }
 
 .hk-blocking-toast-title {
-  font-size: 1em;
   font-weight: 700;
 }
 
@@ -73,7 +71,7 @@
 .hk-blocking-toast-actions {
   display: flex;
   justify-content: flex-end;
-  gap: var(--hi-space-8, 8px);
+  gap: var(--space-8, 8px);
 }
 
 // Variant backgrounds follow the HkToast conventions (including the
@@ -118,6 +116,25 @@
   transform: translateX(1rem);
 }
 
+// RTL: the fixed column sits at the inline-end (physical left) side, so
+// the slide direction flips with it (house pattern: HkTimeline.scss).
+// The leave-pin contract writes physical right/top inline, which within
+// the shrink-to-fit column is edge-agnostic (slot width == column width).
+[dir="rtl"] .hk-blocking-toast-enter-from,
+[dir="rtl"] .hk-blocking-toast-leave-to {
+  transform: translateX(-1rem);
+}
+
 .hk-blocking-toast-move {
   transition: transform var(--hi-duration-normal, 0.3s) ease;
 }
+
+// Reduced motion: drop the slide/FLIP choreography, cards snap in and
+// out (house pattern: HkListTransition.scss / HkExpansionPanel.scss).
+@media (prefers-reduced-motion: reduce) {
+  .hk-blocking-toast-enter-active,
+  .hk-blocking-toast-leave-active,
+  .hk-blocking-toast-move {
+    transition: none;
+  }
+}

package/src/components/HkBoard.scss

@@ -37,10 +37,8 @@
   pointer-events: none;
 }
 
-.hk-board-edge {
-  fill: none;
-  stroke-linecap: round;
-}
+// Edge ink (fill/stroke/linecap) is set as presentation attributes on every
+// emitted path (HkBoard.tsx) — no CSS declaration here, only per-edge attrs.
 
 .hk-board-node {
   position: absolute;
@@ -63,8 +61,9 @@
   justify-content: center;
   padding: 0 var(--space-6);
   box-sizing: border-box;
+  // NOTE: no text-overflow here — the shell is a flex container, ellipsis
+  // only renders on block containers; clipping is owned by overflow: hidden.
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
   font-size: var(--text-2xs);
   color: rgb(var(--color-text));
@@ -72,12 +71,33 @@
   border: 1px solid rgb(var(--color-primary) / 45%);
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-elevated);
+  transition:
+    border-color 200ms ease,
+    box-shadow 200ms ease;
+
+  // Every visible node is click-interactive (HkBoard.tsx emits `nodeClick`
+  // on a short tap for draggable and read-only nodes alike), so the shell
+  // carries hover/press emphasis. The press ring draws INSIDE the border
+  // box (HkSelectionGrid model) so overlapping chrome cannot shave it.
+  &:hover {
+    border-color: rgb(var(--color-primary) / 80%);
+  }
+
+  &:active {
+    box-shadow:
+      var(--shadow-elevated),
+      inset 0 0 0 1px rgb(var(--color-primary) / 45%);
+  }
 }
 
 .hk-board-minimap {
   position: absolute;
-  right: var(--space-10);
+  // Logical property: the corner dock mirrors in RTL (same spot in LTR).
+  inset-inline-end: var(--space-10);
   bottom: var(--space-10);
   z-index: 6;
+  // Defensive re-enable (the inner HkMinimap root asserts it too,
+  // HkMinimap.scss:15): keeps the dock alive if a host ever parks the
+  // board under an ancestor `pointer-events: none`.
   pointer-events: auto;
 }

package/src/components/HkBreadcrumb.scss

@@ -28,7 +28,7 @@
   line-height: 1.5;
 
   // Gap
-  gap: 0.5rem;
+  gap: var(--space-8);
 }
 
 // ------
@@ -46,27 +46,6 @@
   // Position
   position: relative;
 
-  // Not the last item
-  &:not(:last-child) {
-    // Separator
-    .hk-breadcrumb-separator {
-      margin-left: 0.5rem;
-      color: var(--hi-color-text-secondary);
-      opacity: 0.5;
-      // DISABLED - migrated to JS animation
-
-      // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
-
-      // Glow effect on separator
-      filter: drop-shadow(0 0 4px var(--hi-primary));
-
-      svg {
-        width: 1rem;
-        height: 1rem;
-      }
-    }
-  }
-
   // Last item (current page)
   &:last-child {
     .hk-breadcrumb-link {
@@ -91,59 +70,57 @@
   text-decoration: none;
   white-space: nowrap;
 
-  // Cursor
-  cursor: pointer;
-
-  // Transitions
-  // DISABLED - migrated to JS animation
-
-  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+  // Transitions — house convention (200ms ease on color/background/
+  // box-shadow, cf. HkSelectionGrid). The old value was commented out as
+  // "migrated to JS animation", but HkBreadcrumb.tsx ships no animation
+  // code, so hover/focus snapped.
+  transition:
+    color 200ms ease,
+    background 200ms ease,
+    box-shadow 200ms ease,
+    filter 200ms ease;
 
   // Padding
-  padding: 0.25rem 0.5rem;
-  margin: -0.25rem -0.5rem;
+  padding: var(--space-4) var(--space-8);
+  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-8));
   border-radius: vars.$hikari-radius-fui-sm;
 
   // Display
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--space-6);
 
-  // Icon
-  .hk-breadcrumb-icon {
-    flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
-    // DISABLED - migrated to JS animation
+  // Interactive affordance only for REAL links: items without `to` render
+  // as a <span class="hk-breadcrumb-link"> (HkBreadcrumb.tsx) — a pointer
+  // cursor + hover fill on that dead span read as a broken link.
+  &[href] {
+    cursor: pointer;
 
-    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+    // Hover state
+    &:hover {
+      color: var(--hi-color-text-primary);
+      background: var(--hi-primary);
 
-    svg {
-      width: 100%;
-      height: 100%;
+      // Glow effect on text
+      text-shadow: 0 0 8px var(--hi-primary);
     }
-  }
 
-  // Hover state
-  &:hover {
-    color: var(--hi-color-text-primary);
-    background: var(--hi-primary);
-
-    .hk-breadcrumb-icon {
-      color: var(--hi-color-primary);
-      filter: drop-shadow(0 0 4px var(--hi-primary));
+    // Press feedback (house idiom: HkButton brightness dip)
+    &:active {
+      filter: brightness(0.95);
     }
-
-    // Glow effect on text
-    text-shadow: 0 0 8px var(--hi-primary);
   }
 
-  // Active/focus state
+  // Keyboard focus (spans are not focusable, so <a href> only): house
+  // double ring (HkButton pattern). The former single 2px primary ring
+  // shared its ink with the focus fill and merged into it / got shaved
+  // per-side by overlapping chrome.
   &:focus-visible {
     outline: none;
     background: var(--hi-primary);
     box-shadow:
-      0 0 0 2px var(--hi-primary),
+      0 0 0 2px rgb(var(--color-surface)),
+      0 0 0 4px rgb(var(--color-primary)),
       0 0 12px var(--hi-primary);
   }
 
@@ -158,65 +135,38 @@
 // Breadcrumb Separator
 // ------
 
+// Separator styling lives at TOP LEVEL, not scoped under
+// `.hk-breadcrumb-item:not(:last-child)` — every rendered separator sits in
+// a non-last item (HkBreadcrumb.tsx renders it only for index < len-1), and
+// the deeper base specificity made the sm/lg size overrides below
+// cascade-dead. Spacing uses a logical property so it mirrors in RTL.
 .hk-breadcrumb-separator {
   // Layout
   display: inline-flex;
   align-items: center;
 
   // Typography
-  font-size: 0.875rem;
-
-  // Transitions
-  // DISABLED - migrated to JS animation
+  font-size: var(--text-base);
 
-  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
-
-  // Custom separator glow
-  &.hk-breadcrumb-separator-glow {
-    color: var(--hi-color-primary);
-    opacity: 0.8;
-    filter: drop-shadow(0 0 6px var(--hi-primary));
-  }
-}
-
-// ------
-// Separator Variants
-// ------
-
-// Slash separator
-.hk-breadcrumb-separator-slash {
-  &::before {
-    content: '/';
-  }
-}
+  // Spacing
+  margin-inline-start: var(--space-8);
+  color: var(--hi-color-text-secondary);
+  opacity: 0.5;
 
-// Arrow separator
-.hk-breadcrumb-separator-arrow {
-  &::before {
-    content: '›';
-    font-size: 1.1em;
-  }
-}
+  // Glow effect on separator
+  filter: drop-shadow(0 0 4px var(--hi-primary));
 
-// Double arrow separator
-.hk-breadcrumb-separator-double-arrow {
-  &::before {
-    content: '»';
-    font-size: 0.9em;
+  svg {
+    width: 1rem;
+    height: 1rem;
   }
 }
 
-// Chevron separator (default with icon)
-.hk-breadcrumb-separator-chevron {
-  // Uses chevron-right icon
-}
-
-// Dot separator
-.hk-breadcrumb-separator-dot {
-  &::before {
-    content: '•';
-    font-size: 1.2em;
-  }
+// RTL mirrors the chevron: the tsx always renders a right-pointing glyph,
+// which reads backwards on the flipped axis (HkTimeline precedent —
+// scaleX mirrors paint only; the box is symmetric around its center).
+[dir="rtl"] .hk-breadcrumb-separator svg {
+  transform: scaleX(-1);
 }
 
 // ------
@@ -234,15 +184,12 @@
     // Layout
     display: inline-flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: var(--space-4);
 
     // Arrow icon
     .hk-breadcrumb-dropdown-arrow {
       width: 0.75rem;
       height: 0.75rem;
-      // DISABLED - migrated to JS animation
-
-      // transition: transform vars.$hikari-duration-fast vars.$hikari-ease-smooth;
 
       svg {
         width: 100%;
@@ -277,12 +224,7 @@
       0 0 0 1px var(--hi-white-5, rgba(255, 255, 255, 0.05)) inset;
 
     // Padding
-    padding: 0.5rem;
-
-    // Transitions
-    // DISABLED - migrated to JS animation
-
-    // transition: all vars.$hikari-duration-normal vars.$hikari-ease-smooth;
+    padding: var(--space-8);
 
     // Animation
     opacity: 0;
@@ -312,62 +254,30 @@
   @include mi.item;
 
   // Spacing
-  margin: 0.125rem 0;
+  margin: var(--space-2) 0;
 
-  // Typography
-  color: var(--hi-color-text-primary);
+  // Typography — the mixin owns the row ink (rgb(var(--color-text) / 88%));
+  // the former full-opacity color here silently defeated it in-rule.
   text-decoration: none;
   white-space: nowrap;
 }
 
-// ------
-// Icon Styles
-// ------
-
-.hk-breadcrumb-icon {
-  // Layout
-  display: inline-flex;
-  align-items: center;
-
-  // Size
-  width: 1rem;
-  height: 1rem;
-
-  // Color
-  color: var(--hi-color-text-secondary);
-
-  // Transitions
-  // DISABLED - migrated to JS animation
-
-  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
-
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-}
-
 // ------
 // Size Variants
 // ------
 
 .hk-breadcrumb-sm {
-  font-size: 0.75rem;
-  gap: 0.375rem;
+  font-size: var(--text-xs);
+  gap: var(--space-6);
 
   .hk-breadcrumb-link {
-    padding: 0.125rem 0.375rem;
-    margin: -0.125rem -0.375rem;
-
-    .hk-breadcrumb-icon {
-      width: 0.875rem;
-      height: 0.875rem;
-    }
+    padding: var(--space-2) var(--space-6);
+    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-6));
   }
 
   .hk-breadcrumb-separator {
-    margin-left: 0.375rem;
-    font-size: 0.75rem;
+    margin-inline-start: var(--space-6);
+    font-size: var(--text-xs);
 
     svg {
       width: 0.875rem;
@@ -376,28 +286,21 @@
   }
 }
 
-.hk-breadcrumb-md {
-  font-size: vars.$hikari-font-size-sm;
-  gap: 0.5rem;
-}
+// NOTE: no .hk-breadcrumb-md rule — the tsx always applies the md class
+// (default size) and it restated the base values exactly.
 
 .hk-breadcrumb-lg {
-  font-size: 1rem;
-  gap: 0.625rem;
+  font-size: var(--text-md);
+  gap: var(--space-10);
 
   .hk-breadcrumb-link {
-    padding: 0.375rem 0.625rem;
-    margin: -0.375rem -0.625rem;
-
-    .hk-breadcrumb-icon {
-      width: 1.125rem;
-      height: 1.125rem;
-    }
+    padding: var(--space-6) var(--space-10);
+    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-10));
   }
 
   .hk-breadcrumb-separator {
-    margin-left: 0.625rem;
-    font-size: 1rem;
+    margin-inline-start: var(--space-10);
+    font-size: var(--text-md);
 
     svg {
       width: 1.125rem;
@@ -418,9 +321,6 @@
     background: var(--hi-card-bg);
     padding: 0.375rem 0.75rem;
     border-radius: vars.$hikari-radius-fui-sm;
-    // DISABLED - migrated to JS animation
-
-    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
 
     &:not(:last-child):hover {
       background: var(--hi-primary);
@@ -442,19 +342,16 @@
     padding: 0.375rem 0.875rem;
     border-radius: 999px;
     border: 1px solid var(--hi-color-border);
-    // DISABLED - migrated to JS animation
-
-    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
 
-    &:not(:last-child) {
-      &:hover {
-        background: var(--hi-primary);
-        border-color: var(--hi-primary);
-      }
+    &:not(:last-child):hover {
+      background: var(--hi-primary);
+      border-color: var(--hi-primary);
     }
 
+    // Solid fill: the former linear-gradient(135deg, primary, primary) had
+    // identical stops and rendered exactly this solid.
     &:last-child {
-      background: linear-gradient(135deg, var(--hi-primary), var(--hi-primary));
+      background: var(--hi-primary);
       border-color: var(--hi-primary);
       box-shadow:
         0 0 12px var(--hi-primary),
@@ -463,29 +360,6 @@
   }
 }
 
-// ------
-// Separator Animations
-// ------
-
-// Animated separator (pulsing glow)
-.hk-breadcrumb-separator-animated {
-  // DISABLED - migrated to JS animation
-
-  // animation: breadcrumb-separator-pulse 2s ease-in-out infinite;
-}
-
-// DISABLED - migrated to JS animation
-// @keyframes breadcrumb-separator-pulse {
-//   0%, 100% {
-//     opacity: 0.5;
-//     filter: drop-shadow(0 0 4px var(--hi-primary));
-//   }
-//   50% {
-//     opacity: 1;
-//     filter: drop-shadow(0 0 8px var(--hi-primary));
-//   }
-// }
-
 // ------
 // Collapsible Breadcrumb (for mobile)
 // ------
@@ -508,73 +382,13 @@
   }
 }
 
-// ------
-// Animations
-// ------
-
-// Fade-in animation
-.hk-breadcrumb-animate-in {
-  .hk-breadcrumb-item {
-    opacity: 0;
-    // DISABLED - migrated to JS animation
-
-    // animation: breadcrumb-fade-in vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
-
-    @for $i from 1 through 10 {
-      &:nth-child(#{$i}) {
-        animation-delay: #{$i * 0.1s};
-      }
-    }
-  }
-}
-
-// DISABLED - migrated to JS animation
-// @keyframes breadcrumb-fade-in {
-//   from {
-//     opacity: 0;
-//     transform: translateY(-4px);
-//   }
-//   to {
-//     opacity: 1;
-//     transform: translateY(0);
-//   }
-// }
-
-// Slide-in animation
-.hk-breadcrumb-slide-in {
-  .hk-breadcrumb-item {
-    opacity: 0;
-    // DISABLED - migrated to JS animation
-
-    // animation: breadcrumb-slide-in vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
-
-    @for $i from 1 through 10 {
-      &:nth-child(#{$i}) {
-        animation-delay: #{$i * 0.08s};
-      }
-    }
-  }
-}
-
-// DISABLED - migrated to JS animation
-// @keyframes breadcrumb-slide-in {
-//   from {
-//     opacity: 0;
-//     transform: translateX(-8px);
-//   }
-//   to {
-//     opacity: 1;
-//     transform: translateX(0);
-//   }
-// }
-
 // ------
 // Custom Colors
 // ------
 
 .hk-breadcrumb-primary {
   .hk-breadcrumb-link {
-    &:hover {
+    &[href]:hover {
       color: var(--hi-color-primary);
       text-shadow: 0 0 8px var(--hi-color-primary);
     }
@@ -583,7 +397,7 @@
 
 .hk-breadcrumb-success {
   .hk-breadcrumb-link {
-    &:hover {
+    &[href]:hover {
       color: var(--hi-color-success);
       text-shadow: 0 0 8px var(--hi-color-success);
     }
@@ -592,7 +406,7 @@
 
 .hk-breadcrumb-warning {
   .hk-breadcrumb-link {
-    &:hover {
+    &[href]:hover {
       color: var(--hi-color-warning);
       text-shadow: 0 0 8px var(--hi-color-warning);
     }
@@ -601,7 +415,7 @@
 
 .hk-breadcrumb-danger {
   .hk-breadcrumb-link {
-    &:hover {
+    &[href]:hover {
       color: var(--hi-color-danger);
       text-shadow: 0 0 8px var(--hi-color-danger);
     }