@inkra/react 0.6.0 → 0.9.0

package/dist/styles.css

@@ -373,6 +373,14 @@
   opacity: 0;
 }
 
+.inkra-button[data-variant="ghost"] > .inkra-button__surface > .inkra-pencil-surface__border {
+  display: none;
+}
+
+.inkra-button[data-variant="ghost"] > .inkra-button__surface > .inkra-pencil-surface__content {
+  clip-path: none;
+}
+
 .inkra-button[data-variant="ghost"]:hover:not(:disabled):not([aria-disabled="true"])
   .inkra-button__surface > .inkra-pencil-surface__ink,
 .inkra-button[data-variant="ghost"]:focus-visible
@@ -391,7 +399,7 @@
 .inkra-button[data-variant="ghost"]:focus-visible
   .inkra-button__surface[data-pencil-fallback="true"] {
   background: var(--inkra-surface-muted);
-  border-color: var(--inkra-border);
+  border-color: transparent;
 }
 
 .inkra-button[data-variant="link"] .inkra-button__label {
@@ -867,6 +875,16 @@
   resize: none;
 }
 
+/* Native rows establish the initial editor height; counters remain a separate row. */
+.inkra-field-control-hit--textarea[data-row-sizing="true"] .inkra-field-control--textarea {
+  min-height: 0;
+}
+
+.inkra-field-control-hit--textarea[data-row-sizing="true"] .inkra-textarea {
+  flex: none;
+  min-height: 0;
+}
+
 .inkra-textarea__footer {
   display: flex;
   align-items: center;
@@ -2458,176 +2476,969 @@
   color: var(--inkra-ink-muted);
   cursor: default;
   display: flex;
-  height: var(--inkra-control-xs);
+  height: var(--inkra-control-xs);
+  justify-content: center;
+}
+
+.inkra-select__separator {
+  color: var(--inkra-border);
+  height: 8px;
+  margin: 0 var(--inkra-space-2);
+}
+
+.inkra-select__separator > .inkra-pencil-line {
+  height: 8px;
+  width: 100%;
+}
+
+@keyframes inkra-select-content-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--inkra-space-1)) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes inkra-select-content-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(var(--inkra-space-1)) scale(0.98);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-select__content,
+  .inkra-select__content[data-ending-style],
+  .inkra-select__content[data-state="closed"] {
+    animation: none;
+  }
+
+  .inkra-select__trigger-icon,
+  .inkra-select__focus-ring,
+  .inkra-select-stepper__button .inkra-pencil-icon,
+  .inkra-select__item-surface > .inkra-pencil-surface__ink {
+    transition-duration: 0ms;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-select__trigger:focus-visible {
+    outline: var(--inkra-focus-width) solid Highlight;
+    outline-offset: var(--inkra-focus-offset);
+  }
+
+  .inkra-select__focus-ring {
+    display: none !important;
+  }
+
+  .inkra-select__trigger-surface,
+  .inkra-select__content-surface {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-select__trigger[data-invalid="true"] .inkra-select__trigger-surface {
+    border-color: Mark;
+  }
+
+  .inkra-select__item[data-highlighted] .inkra-select__item-surface,
+  .inkra-select__item[data-selected] .inkra-select__item-surface,
+  .inkra-select__item[data-state="checked"] .inkra-select__item-surface {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  .inkra-select__item:focus-visible {
+    outline: var(--inkra-focus-width) solid CanvasText;
+    outline-offset: calc(-1 * var(--inkra-focus-offset));
+  }
+}
+
+@media print {
+  .inkra-select__content {
+    animation: none;
+  }
+}
+
+.inkra-tabs { min-width: 0; --inkra-tabs-font-size: var(--inkra-text-md); --inkra-tabs-padding: var(--inkra-space-3); --inkra-tabs-icon-size: 20px; }
+.inkra-tabs[data-size="sm"] { --inkra-tabs-font-size: var(--inkra-text-sm); --inkra-tabs-padding: var(--inkra-space-2); --inkra-tabs-icon-size: 16px; }
+.inkra-tabs[data-size="lg"] { --inkra-tabs-font-size: 17px; --inkra-tabs-padding: var(--inkra-space-4); --inkra-tabs-icon-size: 24px; }
+.inkra-tabs__list {
+  display: flex;
+  gap: var(--inkra-space-2);
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-padding-inline: var(--inkra-focus-offset);
+}
+.inkra-tabs__list[data-orientation="vertical"] { flex-direction: column; }
+.inkra-tabs__list[data-divided] { gap: 24px; }
+.inkra-tabs__divider { position: absolute; color: var(--inkra-ink-muted); opacity: 0.56; }
+.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="vertical"] { inset-inline-start: -16px; top: 8px; width: 8px; height: calc(100% - 16px); }
+.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="horizontal"] { inset-inline: 8px; top: -16px; width: calc(100% - 16px); height: 8px; }
+.inkra-tabs__trigger:first-child > .inkra-tabs__divider { display: none; }
+.inkra-tabs__list[data-align="center"] { justify-content: safe center; }
+.inkra-tabs__list[data-align="end"] { justify-content: safe end; }
+.inkra-tabs__list[data-full-width] { width: 100%; }
+.inkra-tabs__list[data-full-width] > .inkra-tabs__trigger { flex: 1 0 0; }
+.inkra-tabs__list[data-orientation="vertical"][data-full-width] > .inkra-tabs__trigger { flex: none; width: 100%; }
+.inkra-tabs__trigger {
+  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
+  min-height: var(--inkra-touch-target); min-width: var(--inkra-touch-target);
+  padding: var(--inkra-space-2) var(--inkra-tabs-padding); border: 0; gap: var(--inkra-space-2);
+  background: transparent; color: var(--inkra-ink-muted); font: inherit;
+  white-space: nowrap; cursor: pointer; border-radius: var(--inkra-radius-md);
+  font-size: var(--inkra-tabs-font-size); line-height: var(--inkra-line-ui);
+}
+.inkra-tabs[data-size="lg"] .inkra-tabs__trigger { min-height: 48px; }
+.inkra-tabs__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--inkra-tabs-icon-size); height: var(--inkra-tabs-icon-size); flex: none; pointer-events: none; }
+.inkra-tabs__icon > * { width: 100%; height: 100%; }
+.inkra-tabs__trigger[data-state="active"] { color: var(--inkra-selection-foreground); }
+.inkra-tabs__trigger:disabled { cursor: not-allowed; opacity: 0.55; }
+.inkra-tabs__trigger:focus-visible { outline: 0; }
+.inkra-pencil-surface.inkra-tabs__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+  position: absolute !important;
+  display: block !important;
+  inset: var(--inkra-focus-width);
+  pointer-events: none;
+  opacity: 0;
+  z-index: 2;
+}
+.inkra-tabs__trigger:focus-visible > .inkra-pencil-surface.inkra-tabs__focus-ring { opacity: 1; }
+.inkra-tabs__content:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: calc(-1 * var(--inkra-focus-width));
+}
+.inkra-pencil-surface.inkra-tabs__selection { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
+.inkra-tabs__trigger[data-state="active"] > .inkra-pencil-surface.inkra-tabs__selection { opacity: 1; }
+.inkra-tabs__label { position: relative; }
+.inkra-tabs__content { min-width: 0; }
+.inkra-tabs__content[hidden] { display: none !important; }
+.inkra-tabs__overflow { display: flex; align-items: center; min-width: 0; max-width: 100%; position: relative; }
+.inkra-tabs__overflow > .inkra-tabs__list { flex: 1 1 auto; min-width: 0; }
+.inkra-tabs__scroll-button, .inkra-tabs__more { flex: 0 0 44px; }
+.inkra-tabs__overflow-icon { display: inline-flex; width: 32px; height: 32px; position: relative; pointer-events: none; }
+.inkra-tabs__overflow-icon[data-down] { transform: rotate(90deg); }
+.inkra-tabs__overflow-icon > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: none; }
+.inkra-tabs__overflow-icon > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
+.inkra-tabs__list[data-overflow="menu"] { position: relative; overflow: hidden; }
+.inkra-tabs__list[data-overflow="menu"][data-full-width] > .inkra-tabs__trigger { flex: 1 0 auto; }
+.inkra-tabs__trigger[data-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; inset-inline-start: 0; top: 0; }
+.inkra-tabs__list[data-overflow="buttons"] { scrollbar-width: none; }
+.inkra-tabs__list[data-overflow="buttons"]::-webkit-scrollbar { display: none; }
+@media (forced-colors: active) {
+  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
+  .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
+  .inkra-tabs__trigger:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
+  .inkra-pencil-surface.inkra-tabs__selection { display: none !important; }
+  .inkra-tabs__trigger[data-state="active"] { color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
+}
+@media print {
+  .inkra-pencil-surface.inkra-tabs__selection, .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
+  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
+}
+
+.inkra-guide__spotlight,
+.inkra-guide__backdrop {
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0));
+}
+
+.inkra-guide__backdrop {
+  background: var(--inkra-overlay);
+}
+
+.inkra-guide__spotlight {
+  box-shadow: 0 0 0 100vmax var(--inkra-overlay);
+  overflow: visible;
+}
+
+.inkra-guide__spotlight > .inkra-pencil-surface__ink,
+.inkra-guide__spotlight > .inkra-pencil-surface__border {
+  border-radius: var(--inkra-guide-highlight-radius, 8px);
+}
+
+.inkra-guide__content {
+  max-height: min(70dvh, var(--radix-popover-content-available-height, 70dvh));
+  max-width: min(24rem, calc(100dvw - var(--inkra-space-6)));
+  outline: 0;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  width: min(22rem, calc(100dvw - var(--inkra-space-6)));
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 1);
+}
+
+.inkra-guide__content:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: var(--inkra-focus-offset);
+}
+
+.inkra-guide__skip-layer {
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 2);
+}
+
+.inkra-guide__skip {
+  color: var(--inkra-ink-muted);
+  opacity: .72;
+  pointer-events: auto;
+  position: absolute;
+}
+
+.inkra-guide__skip:is(:hover, :focus-visible) {
+  color: var(--inkra-ink);
+  opacity: 1;
+}
+
+.inkra-guide__skip[data-placement^="top"] {
+  inset-block-start: max(var(--inkra-space-4), env(safe-area-inset-top));
+}
+
+.inkra-guide__skip[data-placement^="bottom"] {
+  inset-block-end: max(var(--inkra-space-4), env(safe-area-inset-bottom));
+}
+
+.inkra-guide__skip[data-placement$="start"] {
+  inset-inline-start: max(var(--inkra-space-4), env(safe-area-inset-left));
+}
+
+.inkra-guide__skip[data-placement$="end"] {
+  inset-inline-end: max(var(--inkra-space-4), env(safe-area-inset-right));
+}
+
+.inkra-guide__surface {
+  color: var(--inkra-ink);
+  display: block;
+  max-height: inherit;
+  width: 100%;
+}
+
+.inkra-guide__panel {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--inkra-space-4);
+  max-height: inherit;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  overscroll-behavior: contain;
+  padding: var(--inkra-space-5);
+}
+
+.inkra-guide__header,
+.inkra-guide__footer,
+.inkra-guide__navigation {
+  align-items: center;
+  display: flex;
+  gap: var(--inkra-space-2);
+}
+
+.inkra-guide__header {
+  align-items: flex-start;
+}
+
+.inkra-guide__heading {
+  display: grid;
+  flex: 1;
+  gap: var(--inkra-space-1);
+  min-width: 0;
+}
+
+.inkra-guide__progress {
+  color: var(--inkra-ink-subtle);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-guide__title {
+  font-family: var(--inkra-font-display);
+  font-size: var(--inkra-text-xl);
+  font-weight: var(--inkra-weight-regular);
+  line-height: var(--inkra-line-ui);
+  margin: 0;
+}
+
+.inkra-guide__description {
+  color: var(--inkra-ink-muted);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-body);
+}
+
+.inkra-guide__close {
+  flex: none;
+}
+
+.inkra-guide__footer {
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.inkra-guide__footer > :empty {
+  display: none;
+}
+
+.inkra-guide__navigation {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+.inkra-guide__footer .inkra-button {
+  max-width: 100%;
+}
+
+@media (max-width: 30rem) {
+  .inkra-guide__content {
+    max-height: calc(100dvh - var(--inkra-space-4));
+    max-width: calc(100dvw - var(--inkra-space-4));
+    width: calc(100dvw - var(--inkra-space-4));
+  }
+
+  .inkra-guide__panel {
+    padding: var(--inkra-space-4);
+  }
+
+  .inkra-guide__footer,
+  .inkra-guide__navigation {
+    width: 100%;
+  }
+
+  .inkra-guide__footer > .inkra-button,
+  .inkra-guide__navigation > .inkra-button {
+    flex: 1 1 auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-guide__content {
+    animation: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-guide__backdrop {
+    background: CanvasText;
+    opacity: 0.25;
+  }
+
+  .inkra-guide__spotlight {
+    box-shadow: 0 0 0 100vmax color-mix(in srgb, CanvasText 25%, transparent);
+    outline: 2px solid Highlight;
+  }
+
+  .inkra-guide__surface {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-guide__skip {
+    color: ButtonText;
+    opacity: 1;
+  }
+}
+
+.inkra-loading {
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  min-inline-size: 0;
+  position: relative;
+}
+
+.inkra-loading[data-mode="inline"] {
+  align-items: center;
+  display: inline-flex;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+
+.inkra-loading[data-mode="region"] {
+  column-gap: var(--inkra-space-2);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  inline-size: 100%;
+  min-block-size: 12rem;
+  overflow: hidden;
+}
+
+.inkra-loading[data-mode="fullscreen"] {
+  column-gap: var(--inkra-space-2);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  inset: 0;
+  min-block-size: 100dvh;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: max(var(--inkra-space-4), env(safe-area-inset-top)) max(var(--inkra-space-4), env(safe-area-inset-right)) max(var(--inkra-space-4), env(safe-area-inset-bottom)) max(var(--inkra-space-4), env(safe-area-inset-left));
+  position: fixed;
+  z-index: var(--inkra-z-modal, 30);
+}
+
+.inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]):has(.inkra-loading__slot[data-slot="center"]) {
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
+.inkra-loading[data-mode="fullscreen"]:not([data-blocking]) { pointer-events: none; }
+.inkra-loading[data-mode="fullscreen"]:not([data-blocking]) :is(.inkra-loading__actions, .inkra-loading__tip-controls, .inkra-loading__slot, .inkra-loading__content-layer) { pointer-events: auto; }
+
+.inkra-loading__theme-anchor {
+  block-size: 0;
+  inline-size: 0;
+  inset: 0 auto auto 0;
+  pointer-events: none;
+  position: fixed;
+}
+
+.inkra-loading__sr-status {
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.inkra-loading__background,
+.inkra-loading__veil {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.inkra-loading[data-mode="fullscreen"] > :is(.inkra-loading__background, .inkra-loading__veil) {
+  position: fixed;
+}
+
+.inkra-loading__background { overflow: hidden; }
+.inkra-loading__background > :is(img, video, canvas, picture),
+.inkra-loading__background > picture > img {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.inkra-loading__veil {
+  background: color-mix(in srgb, var(--inkra-paper) 86%, transparent);
+}
+
+.inkra-loading[data-mode="inline"] .inkra-loading__background,
+.inkra-loading[data-mode="inline"] .inkra-loading__veil { display: none; }
+
+.inkra-loading__layout {
+  align-items: center;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  inline-size: 100%;
+  justify-items: center;
+  min-block-size: 0;
+  min-inline-size: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]):has(.inkra-loading__slot[data-slot="center"]) .inkra-loading__layout {
+  grid-row: 3;
+}
+
+.inkra-loading__main {
+  align-items: center;
+  display: grid;
+  gap: var(--inkra-space-4);
+  inline-size: min(100%, 34rem);
+  justify-items: center;
+  min-inline-size: 0;
+  padding: var(--inkra-space-4);
+  text-align: center;
+}
+
+.inkra-loading[data-mode="inline"] .inkra-loading__main {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--inkra-space-2);
+  inline-size: auto;
+  justify-items: initial;
+  padding: 0;
+  text-align: start;
+}
+
+.inkra-loading[data-mode="inline"] .inkra-loading__copy { gap: 0; }
+.inkra-loading[data-mode="inline"] .inkra-loading__description,
+.inkra-loading[data-mode="inline"] .inkra-loading__tips,
+.inkra-loading[data-mode="inline"] .inkra-loading__stages { display: none; }
+.inkra-loading[data-mode="inline"] .inkra-loading__progress { inline-size: min(14rem, 45vw); }
+.inkra-loading[data-mode="inline"] .inkra-progress[data-shape="circular"] { inline-size: 32px; }
+.inkra-loading[data-mode="inline"] .inkra-progress__ring { --inkra-progress-diameter: 32px !important; }
+
+.inkra-loading__logo {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  max-inline-size: 100%;
+}
+
+.inkra-loading__logo > :is(img, svg) { block-size: auto; max-block-size: 7rem; max-inline-size: min(16rem, 100%); }
+.inkra-loading__copy { display: grid; gap: var(--inkra-space-2); max-inline-size: 100%; }
+.inkra-loading__title { font-size: var(--inkra-text-2xl); line-height: var(--inkra-line-tight); overflow-wrap: anywhere; }
+.inkra-loading__description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-md); line-height: var(--inkra-line-body); overflow-wrap: anywhere; }
+.inkra-loading[data-mode="inline"] .inkra-loading__title { font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
+
+.inkra-loading__progress { inline-size: min(100%, 28rem); }
+.inkra-loading__animation-progress {
+  display: grid;
+  gap: var(--inkra-space-2);
+  inline-size: min(100%, 28rem);
+  justify-items: center;
+}
+.inkra-loading[data-mode="inline"] .inkra-loading__animation-progress {
+  align-items: center;
+  display: inline-flex;
+  inline-size: auto;
+}
+.inkra-loading__animation-label {
+  line-height: var(--inkra-line-ui);
+  overflow-wrap: anywhere;
+}
+.inkra-loading__animation {
+  block-size: 48px;
+  color: var(--inkra-accent-strong);
+  flex: 0 0 auto;
+  inline-size: 48px;
+  position: relative;
+}
+.inkra-loading[data-mode="inline"] .inkra-loading__animation {
+  block-size: 32px;
+  inline-size: 32px;
+}
+.inkra-loading__animation-visual {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  inset: 0;
+  position: absolute;
+}
+.inkra-loading__animation-mark { position: absolute; }
+
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation {
+  animation: inkra-loading-orbit 1100ms linear infinite;
+}
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation-mark {
+  block-size: 20.8333%;
+  inline-size: 20.8333%;
+  inset-block-start: 39.5833%;
+  inset-inline-start: 39.5833%;
+  transform: rotate(0deg) translateY(-175%);
+}
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation-mark:nth-child(2) {
+  opacity: .68;
+  transform: rotate(120deg) translateY(-175%);
+}
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation-mark:nth-child(3) {
+  opacity: .4;
+  transform: rotate(240deg) translateY(-175%);
+}
+
+.inkra-loading[data-animation="dots"] .inkra-loading__animation {
+  display: block;
+}
+.inkra-loading[data-animation="dots"] .inkra-loading__animation-mark {
+  animation: inkra-loading-dot 900ms var(--inkra-ease) infinite;
+  block-size: 20.8333%;
+  inline-size: 20.8333%;
+  inset-block-start: 39.5833%;
+  inset-inline-start: 8.3333%;
+}
+.inkra-loading[data-animation="dots"] .inkra-loading__animation-mark:nth-child(2) { animation-delay: 120ms; inset-inline-start: 39.5833%; }
+.inkra-loading[data-animation="dots"] .inkra-loading__animation-mark:nth-child(3) { animation-delay: 240ms; inset-inline-start: 70.8333%; }
+
+.inkra-loading[data-animation="pulse"] .inkra-loading__animation-mark {
+  animation: inkra-loading-pulse 1500ms var(--inkra-ease) infinite;
+  inset: 12.5%;
+}
+.inkra-loading[data-animation="pulse"] .inkra-loading__animation-mark:nth-child(2) { animation-delay: 300ms; }
+.inkra-loading[data-animation="pulse"] .inkra-loading__animation-mark:nth-child(3) { animation-delay: 600ms; }
+
+.inkra-loading[data-animation="trail"] .inkra-loading__animation-mark {
+  animation: inkra-loading-trail 1050ms var(--inkra-ease) infinite;
+  block-size: 12.5%;
+  inline-size: 58.3333%;
+  inset-block-start: 25%;
+  inset-inline-start: 20.8333%;
+  transform-origin: center;
+}
+.inkra-loading[data-animation="trail"] .inkra-loading__animation-mark:nth-child(2) {
+  animation-delay: 140ms;
+  inset-block-start: 43.75%;
+}
+.inkra-loading[data-animation="trail"] .inkra-loading__animation-mark:nth-child(3) {
+  animation-delay: 280ms;
+  inset-block-start: 62.5%;
+}
+
+.inkra-loading__stages { display: grid; gap: var(--inkra-space-2); inline-size: min(100%, 28rem); text-align: start; }
+.inkra-loading__stage { align-items: start; display: grid; gap: var(--inkra-space-3); grid-template-columns: 36px minmax(0, 1fr); min-inline-size: 0; }
+.inkra-loading__stage-marker { align-items: center; block-size: 32px; display: flex; inline-size: 32px; justify-content: center; }
+.inkra-loading__stage[data-state="pending"] { color: var(--inkra-ink-muted); }
+.inkra-loading__stage[data-state="complete"] { color: var(--inkra-success-foreground); }
+.inkra-loading__stage[data-state="error"] { color: var(--inkra-danger-foreground); }
+.inkra-loading__stage-copy { display: grid; gap: var(--inkra-space-1); min-inline-size: 0; overflow-wrap: anywhere; }
+.inkra-loading__stage-description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); }
+
+.inkra-loading__tips { display: grid; gap: var(--inkra-space-2); inline-size: min(100%, 32rem); min-block-size: 2.5rem; place-items: center; }
+.inkra-loading__tip { line-height: var(--inkra-line-body); max-inline-size: 100%; overflow-wrap: anywhere; }
+.inkra-loading__tips[data-transition="fade"] .inkra-loading__tip { animation: inkra-loading-tip-fade var(--inkra-motion-normal) var(--inkra-ease) both; }
+.inkra-loading__tips[data-transition="slide"] .inkra-loading__tip { animation: inkra-loading-tip-slide var(--inkra-motion-normal) var(--inkra-ease) both; }
+.inkra-loading__tip-controls { align-items: center; display: flex; gap: var(--inkra-space-2); }
+.inkra-loading__tip-position { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; min-inline-size: 4ch; }
+
+.inkra-loading__content-layer { inline-size: 100%; min-inline-size: 0; }
+.inkra-loading__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--inkra-space-2); justify-content: center; }
+
+.inkra-loading__slot {
+  max-block-size: calc(50dvh - var(--inkra-space-8));
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+  position: relative;
+  z-index: 2;
+}
+.inkra-loading__slot[data-slot="top-start"] { align-self: start; grid-column: 1; grid-row: 1; justify-self: start; margin-block-end: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="top-end"] { align-self: start; grid-column: 3; grid-row: 1; justify-self: end; margin-block-end: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="center"] { align-self: center; grid-column: 2; grid-row: 2; justify-self: center; margin-block-end: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="bottom-start"] { align-self: end; grid-column: 1; grid-row: 3; justify-self: start; margin-block-start: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="bottom-center"] { align-self: end; grid-column: 2; grid-row: 3; justify-self: center; margin-block-start: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="bottom-end"] { align-self: end; grid-column: 3; grid-row: 3; justify-self: end; margin-block-start: var(--inkra-space-4); }
+
+.inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]):has(.inkra-loading__slot[data-slot="center"]) .inkra-loading__slot[data-slot^="bottom-"] {
+  grid-row: 4;
+}
+
+.inkra-loading[data-mode="region"] .inkra-loading__slot[data-slot$="start"] { margin-inline-start: var(--inkra-space-4); }
+.inkra-loading[data-mode="region"] .inkra-loading__slot[data-slot$="end"] { margin-inline-end: var(--inkra-space-4); }
+
+.inkra-loading[data-preset="scene-bottom"] .inkra-loading__layout { align-items: end; }
+.inkra-loading[data-preset="scene-bottom"] .inkra-loading__main { padding-block-end: max(var(--inkra-space-8), 10dvh); }
+.inkra-loading[data-preset="intel"] .inkra-loading__main { justify-items: start; margin-inline-start: 0; text-align: start; }
+.inkra-loading[data-preset="staged"] .inkra-loading__main { align-items: start; grid-template-columns: minmax(0, .8fr) minmax(14rem, 1.2fr); text-align: start; }
+.inkra-loading[data-preset="staged"] .inkra-loading__copy,
+.inkra-loading[data-preset="staged"] .inkra-loading__logo { justify-self: start; }
+.inkra-loading[data-preset="staged"] .inkra-loading__stages { grid-column: 2; grid-row: 1 / span 5; }
+.inkra-loading[data-preset="edge"] { align-items: start; min-block-size: auto; padding: 0; }
+.inkra-loading[data-preset="edge"] .inkra-loading__veil,
+.inkra-loading[data-preset="edge"] .inkra-loading__background { display: none; }
+.inkra-loading[data-preset="edge"] .inkra-loading__layout { justify-items: stretch; }
+.inkra-loading[data-preset="edge"] .inkra-loading__main { align-items: center; display: flex; inline-size: 100%; justify-content: space-between; padding: var(--inkra-space-2) var(--inkra-space-4); text-align: start; }
+.inkra-loading__edge-line { block-size: 8px; inset-block-end: 0; inset-inline: 0; pointer-events: none; position: absolute; }
+
+.inkra-loading__skeleton { display: grid; gap: var(--inkra-space-3); inline-size: min(100%, 36rem); }
+.inkra-loading__skeleton-grid { display: grid; gap: var(--inkra-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+@keyframes inkra-loading-tip-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes inkra-loading-tip-slide { from { opacity: 0; transform: translateY(var(--inkra-space-2)); } to { opacity: 1; transform: translateY(0); } }
+@keyframes inkra-loading-orbit { to { transform: rotate(360deg); } }
+@keyframes inkra-loading-dot { 0%, 70%, 100% { opacity: .36; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-45%); } }
+@keyframes inkra-loading-pulse { 0% { opacity: .9; transform: scale(.35); } 75%, 100% { opacity: 0; transform: scale(1); } }
+@keyframes inkra-loading-trail { 0%, 100% { opacity: .28; transform: scaleX(.45); } 50% { opacity: 1; transform: scaleX(1); } }
+
+@media (max-width: 40rem), (max-height: 32rem) {
+  .inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--inkra-space-2);
+  }
+  .inkra-loading[data-mode="fullscreen"] { padding: max(var(--inkra-space-2), env(safe-area-inset-top)) max(var(--inkra-space-2), env(safe-area-inset-right)) max(var(--inkra-space-2), env(safe-area-inset-bottom)) max(var(--inkra-space-2), env(safe-area-inset-left)); }
+  .inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]) .inkra-loading__layout { flex: 1 0 auto; order: 4; }
+  .inkra-loading__main { gap: var(--inkra-space-3); padding: var(--inkra-space-3); }
+  .inkra-loading__title { font-size: var(--inkra-text-xl); }
+  .inkra-loading[data-preset="staged"] .inkra-loading__main { grid-template-columns: minmax(0, 1fr); }
+  .inkra-loading[data-preset="staged"] .inkra-loading__stages { grid-column: auto; grid-row: auto; }
+  .inkra-loading__slot { flex: none; margin-block: 0 !important; max-block-size: none; max-inline-size: min(100%, 28rem); overflow: visible; }
+  .inkra-loading__slot[data-slot="top-start"] { align-self: start; order: 1; }
+  .inkra-loading__slot[data-slot="top-end"] { align-self: end; order: 2; }
+  .inkra-loading__slot[data-slot="center"] { align-self: center; order: 3; }
+  .inkra-loading__slot[data-slot="bottom-start"] { align-self: start; order: 5; }
+  .inkra-loading__slot[data-slot="bottom-center"] { align-self: center; order: 6; }
+  .inkra-loading__slot[data-slot="bottom-end"] { align-self: end; order: 7; }
+  .inkra-loading__skeleton-grid { grid-template-columns: 1fr; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-loading__tip,
+  .inkra-loading__animation,
+  .inkra-loading__animation * { animation: none !important; }
+}
+
+@media (forced-colors: active) {
+  .inkra-loading__veil { background: Canvas; opacity: .92; }
+  .inkra-loading[data-blocking] { border: 1px solid CanvasText; }
+  .inkra-loading__animation { color: CanvasText; }
+}
+
+@media print {
+  .inkra-loading[data-mode="fullscreen"] { min-block-size: auto; position: static; }
+  .inkra-loading__background, .inkra-loading__veil { display: none; }
+  .inkra-loading__tip,
+  .inkra-loading__animation,
+  .inkra-loading__animation * { animation: none !important; }
+}
+
+.inkra-infinite-scroll {
+  --inkra-infinite-scroll-pull-distance: 0px;
+  --inkra-infinite-scroll-indicator-inline-offset: 0px;
+  --inkra-infinite-scroll-indicator-block-offset: 0px;
+  --inkra-infinite-scroll-indicator-viewport-inline-size: 100%;
+  --inkra-infinite-scroll-indicator-viewport-block-size: 100%;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(min-content, 1fr) auto;
+  max-inline-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  color: var(--inkra-ink);
+}
+
+.inkra-infinite-scroll__body {
+  display: grid;
+  grid-template-columns: auto minmax(min-content, 1fr) auto;
+  grid-row: 2;
+  min-block-size: 0;
+  min-inline-size: 0;
+  transform: translate3d(0, 0, 0);
+  transition: transform var(--inkra-motion-slow) cubic-bezier(0.22, 1.45, 0.36, 1);
+}
+
+.inkra-infinite-scroll[data-pull-direction] > .inkra-infinite-scroll__body {
+  transition: none;
+}
+
+.inkra-infinite-scroll__content {
+  grid-column: 2;
+  grid-row: 1;
+  min-block-size: 100%;
+  min-inline-size: 100%;
+}
+
+.inkra-infinite-scroll[data-pull-direction="top"] > .inkra-infinite-scroll__body {
+  transform: translate3d(0, var(--inkra-infinite-scroll-pull-distance), 0);
+}
+.inkra-infinite-scroll[data-pull-direction="bottom"] > .inkra-infinite-scroll__body {
+  transform: translate3d(0, calc(-1 * var(--inkra-infinite-scroll-pull-distance)), 0);
+}
+.inkra-infinite-scroll[data-pull-direction="left"] > .inkra-infinite-scroll__body {
+  transform: translate3d(var(--inkra-infinite-scroll-pull-distance), 0, 0);
+}
+.inkra-infinite-scroll[data-pull-direction="right"] > .inkra-infinite-scroll__body {
+  transform: translate3d(calc(-1 * var(--inkra-infinite-scroll-pull-distance)), 0, 0);
+}
+
+.inkra-infinite-scroll__indicator {
+  position: relative;
+  display: none;
+  min-block-size: 0;
+  min-inline-size: 0;
+  z-index: 1;
+}
+.inkra-infinite-scroll__indicator[data-active] { display: flex; }
+.inkra-infinite-scroll__indicator[data-direction="top"],
+.inkra-infinite-scroll__indicator[data-direction="bottom"] {
+  inline-size: 100%;
+}
+.inkra-infinite-scroll__indicator[data-visible][data-direction="top"],
+.inkra-infinite-scroll__indicator[data-visible][data-direction="bottom"] {
+  min-block-size: 52px;
+}
+.inkra-infinite-scroll__indicator[data-direction="left"],
+.inkra-infinite-scroll__indicator[data-direction="right"] {
+  align-self: stretch;
+  grid-row: 1;
+}
+.inkra-infinite-scroll__indicator[data-visible][data-direction="left"],
+.inkra-infinite-scroll__indicator[data-visible][data-direction="right"] {
+  min-inline-size: 112px;
+}
+.inkra-infinite-scroll__indicator[data-direction="top"] { grid-row: 1; }
+.inkra-infinite-scroll__indicator[data-direction="bottom"] { grid-row: 3; }
+.inkra-infinite-scroll__indicator[data-direction="left"] { grid-column: 1; }
+.inkra-infinite-scroll__indicator[data-direction="right"] { grid-column: 3; }
+
+/* Pull feedback reveals inside the elastic gap, without changing scroll layout. */
+.inkra-infinite-scroll__indicator[data-pulling] {
+  position: absolute;
+  grid-area: auto;
+  left: var(--inkra-pull-left, 0px);
+  top: var(--inkra-pull-top, 0px);
+  inline-size: var(--inkra-pull-width, 0px);
+  block-size: var(--inkra-pull-height, 0px);
+  min-inline-size: 0 !important;
+  min-block-size: 0 !important;
+  overflow: clip;
+  pointer-events: none;
+}
+.inkra-infinite-scroll__indicator[data-pulling] .inkra-infinite-scroll__indicator-surface {
+  padding: 0;
+  max-inline-size: none;
+  min-block-size: 0;
+}
+.inkra-infinite-scroll__indicator[data-pulling][data-direction="left"] .inkra-infinite-scroll__loading-label,
+.inkra-infinite-scroll__indicator[data-pulling][data-direction="right"] .inkra-infinite-scroll__loading-label {
+  display: none;
+}
+
+.inkra-infinite-scroll__indicator-surface {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--inkra-space-1) var(--inkra-space-2);
+}
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__indicator-surface,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__indicator-surface {
+  min-block-size: 100%;
+  max-inline-size: 144px;
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="top"] .inkra-infinite-scroll__indicator-surface {
+  inline-size: var(--inkra-infinite-scroll-indicator-viewport-inline-size);
+  transform: translate3d(var(--inkra-infinite-scroll-indicator-inline-offset), 0, 0);
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="bottom"] .inkra-infinite-scroll__indicator-surface {
+  inline-size: var(--inkra-infinite-scroll-indicator-viewport-inline-size);
+  transform: translate3d(var(--inkra-infinite-scroll-indicator-inline-offset), 0, 0);
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="left"] .inkra-infinite-scroll__indicator-surface {
+  block-size: var(--inkra-infinite-scroll-indicator-viewport-block-size);
+  min-block-size: 0;
+  transform: translate3d(0, var(--inkra-infinite-scroll-indicator-block-offset), 0);
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="right"] .inkra-infinite-scroll__indicator-surface {
+  block-size: var(--inkra-infinite-scroll-indicator-viewport-block-size);
+  min-block-size: 0;
+  transform: translate3d(0, var(--inkra-infinite-scroll-indicator-block-offset), 0);
+}
+.inkra-infinite-scroll__indicator-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-2);
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  text-align: center;
+}
+.inkra-infinite-scroll__indicator-content > .inkra-progress { max-inline-size: 240px; }
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__indicator-content > .inkra-progress,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__indicator-content > .inkra-progress { min-inline-size: 96px; }
+.inkra-infinite-scroll__loading {
+  display: flex;
+  align-items: center;
   justify-content: center;
+  gap: var(--inkra-space-2);
+  min-inline-size: 0;
 }
+.inkra-infinite-scroll__loading > .inkra-progress { flex: 0 0 auto; }
+.inkra-infinite-scroll__loading-label { min-inline-size: 0; white-space: nowrap; }
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__loading,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__loading { flex-wrap: wrap; }
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__loading-label,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__loading-label { white-space: normal; }
 
-.inkra-select__separator {
-  color: var(--inkra-border);
-  height: 8px;
-  margin: 0 var(--inkra-space-2);
+@media (prefers-reduced-motion: reduce) {
+  .inkra-infinite-scroll__body { transition-duration: 0ms; }
 }
 
-.inkra-select__separator > .inkra-pencil-line {
-  height: 8px;
-  width: 100%;
+@media print {
+  .inkra-infinite-scroll { overflow: visible; }
+  .inkra-infinite-scroll__body { transform: none !important; }
 }
 
-@keyframes inkra-select-content-in {
-  from {
-    opacity: 0;
-    transform: translateY(var(--inkra-space-1)) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+.inkra-masonry {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--inkra-masonry-row-gap, 16px) var(--inkra-masonry-column-gap, 16px);
+  grid-template-columns: repeat(var(--inkra-masonry-columns, 1), minmax(0, 1fr));
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: clip;
+  overflow-clip-margin: 1px;
+  position: relative;
 }
 
-@keyframes inkra-select-content-out {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(var(--inkra-space-1)) scale(0.98);
-  }
+.inkra-masonry[data-mode="adaptive"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--inkra-masonry-min-column-width, 240px)), 1fr));
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .inkra-select__content,
-  .inkra-select__content[data-ending-style],
-  .inkra-select__content[data-state="closed"] {
-    animation: none;
-  }
-
-  .inkra-select__trigger-icon,
-  .inkra-select__focus-ring,
-  .inkra-select-stepper__button .inkra-pencil-icon,
-  .inkra-select__item-surface > .inkra-pencil-surface__ink {
-    transition-duration: 0ms;
-  }
+.inkra-masonry[data-layout="ready"] {
+  display: block;
 }
 
-@media (forced-colors: active) {
-  .inkra-select__trigger:focus-visible {
-    outline: var(--inkra-focus-width) solid Highlight;
-    outline-offset: var(--inkra-focus-offset);
-  }
+.inkra-masonry__item {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
 
-  .inkra-select__focus-ring {
-    display: none !important;
-  }
+.inkra-masonry[data-layout="ready"] > .inkra-masonry__item {
+  inset-block-start: 0;
+  left: 0;
+  position: absolute;
+}
 
-  .inkra-select__trigger-surface,
-  .inkra-select__content-surface {
-    background: Canvas;
-    border: 1px solid CanvasText;
-  }
+.inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+  transition: transform var(--inkra-motion-normal, 180ms) var(--inkra-ease, ease);
+}
 
-  .inkra-select__trigger[data-invalid="true"] .inkra-select__trigger-surface {
-    border-color: Mark;
-  }
+.inkra-masonry__item > * {
+  max-inline-size: 100%;
+}
 
-  .inkra-select__item[data-highlighted] .inkra-select__item-surface,
-  .inkra-select__item[data-selected] .inkra-select__item-surface,
-  .inkra-select__item[data-state="checked"] .inkra-select__item-surface {
-    background: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none;
+@media (prefers-reduced-motion: reduce) {
+  .inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+    transition-duration: 0ms;
   }
+}
 
-  .inkra-select__item:focus-visible {
-    outline: var(--inkra-focus-width) solid CanvasText;
-    outline-offset: calc(-1 * var(--inkra-focus-offset));
+@media (forced-colors: active) {
+  .inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+    transition-duration: 0ms;
   }
 }
 
 @media print {
-  .inkra-select__content {
-    animation: none;
+  .inkra-masonry,
+  .inkra-masonry[data-layout="ready"] {
+    block-size: auto !important;
+    display: grid;
+    overflow: visible;
   }
-}
 
-.inkra-tabs { min-width: 0; --inkra-tabs-font-size: var(--inkra-text-md); --inkra-tabs-padding: var(--inkra-space-3); --inkra-tabs-icon-size: 20px; }
-.inkra-tabs[data-size="sm"] { --inkra-tabs-font-size: var(--inkra-text-sm); --inkra-tabs-padding: var(--inkra-space-2); --inkra-tabs-icon-size: 16px; }
-.inkra-tabs[data-size="lg"] { --inkra-tabs-font-size: 17px; --inkra-tabs-padding: var(--inkra-space-4); --inkra-tabs-icon-size: 24px; }
-.inkra-tabs__list {
-  display: flex;
-  gap: var(--inkra-space-2);
-  max-width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-padding-inline: var(--inkra-focus-offset);
-}
-.inkra-tabs__list[data-orientation="vertical"] { flex-direction: column; }
-.inkra-tabs__list[data-divided] { gap: 24px; }
-.inkra-tabs__divider { position: absolute; color: var(--inkra-ink-muted); opacity: 0.56; }
-.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="vertical"] { inset-inline-start: -16px; top: 8px; width: 8px; height: calc(100% - 16px); }
-.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="horizontal"] { inset-inline: 8px; top: -16px; width: calc(100% - 16px); height: 8px; }
-.inkra-tabs__trigger:first-child > .inkra-tabs__divider { display: none; }
-.inkra-tabs__list[data-align="center"] { justify-content: safe center; }
-.inkra-tabs__list[data-align="end"] { justify-content: safe end; }
-.inkra-tabs__list[data-full-width] { width: 100%; }
-.inkra-tabs__list[data-full-width] > .inkra-tabs__trigger { flex: 1 0 0; }
-.inkra-tabs__list[data-orientation="vertical"][data-full-width] > .inkra-tabs__trigger { flex: none; width: 100%; }
-.inkra-tabs__trigger {
-  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
-  min-height: var(--inkra-touch-target); min-width: var(--inkra-touch-target);
-  padding: var(--inkra-space-2) var(--inkra-tabs-padding); border: 0; gap: var(--inkra-space-2);
-  background: transparent; color: var(--inkra-ink-muted); font: inherit;
-  white-space: nowrap; cursor: pointer; border-radius: var(--inkra-radius-md);
-  font-size: var(--inkra-tabs-font-size); line-height: var(--inkra-line-ui);
-}
-.inkra-tabs[data-size="lg"] .inkra-tabs__trigger { min-height: 48px; }
-.inkra-tabs__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--inkra-tabs-icon-size); height: var(--inkra-tabs-icon-size); flex: none; pointer-events: none; }
-.inkra-tabs__icon > * { width: 100%; height: 100%; }
-.inkra-tabs__trigger[data-state="active"] { color: var(--inkra-selection-foreground); }
-.inkra-tabs__trigger:disabled { cursor: not-allowed; opacity: 0.55; }
-.inkra-tabs__trigger:focus-visible { outline: 0; }
-.inkra-pencil-surface.inkra-tabs__focus-ring {
-  --inkra-accent-strong: var(--inkra-focus);
-  position: absolute !important;
-  display: block !important;
-  inset: var(--inkra-focus-width);
-  pointer-events: none;
-  opacity: 0;
-  z-index: 2;
-}
-.inkra-tabs__trigger:focus-visible > .inkra-pencil-surface.inkra-tabs__focus-ring { opacity: 1; }
-.inkra-tabs__content:focus-visible {
-  outline: var(--inkra-focus-width) solid var(--inkra-focus);
-  outline-offset: calc(-1 * var(--inkra-focus-width));
-}
-.inkra-pencil-surface.inkra-tabs__selection { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
-.inkra-tabs__trigger[data-state="active"] > .inkra-pencil-surface.inkra-tabs__selection { opacity: 1; }
-.inkra-tabs__label { position: relative; }
-.inkra-tabs__content { min-width: 0; }
-.inkra-tabs__content[hidden] { display: none !important; }
-.inkra-tabs__overflow { display: flex; align-items: center; min-width: 0; max-width: 100%; position: relative; }
-.inkra-tabs__overflow > .inkra-tabs__list { flex: 1 1 auto; min-width: 0; }
-.inkra-tabs__scroll-button, .inkra-tabs__more { flex: 0 0 44px; }
-.inkra-tabs__overflow-icon { display: inline-flex; width: 32px; height: 32px; position: relative; pointer-events: none; }
-.inkra-tabs__overflow-icon[data-down] { transform: rotate(90deg); }
-.inkra-tabs__overflow-icon > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
-.inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: none; }
-.inkra-tabs__overflow-icon > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
-.inkra-tabs__list[data-overflow="menu"] { position: relative; overflow: hidden; }
-.inkra-tabs__list[data-overflow="menu"][data-full-width] > .inkra-tabs__trigger { flex: 1 0 auto; }
-.inkra-tabs__trigger[data-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; inset-inline-start: 0; top: 0; }
-.inkra-tabs__list[data-overflow="buttons"] { scrollbar-width: none; }
-.inkra-tabs__list[data-overflow="buttons"]::-webkit-scrollbar { display: none; }
-@media (forced-colors: active) {
-  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
-  .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
-  .inkra-tabs__trigger:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
-  .inkra-pencil-surface.inkra-tabs__selection { display: none !important; }
-  .inkra-tabs__trigger[data-state="active"] { color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
-}
-@media print {
-  .inkra-pencil-surface.inkra-tabs__selection, .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
-  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
+  .inkra-masonry[data-layout="ready"] > .inkra-masonry__item {
+    inline-size: auto !important;
+    position: static;
+    transform: none !important;
+    transition: none;
+  }
 }
 
 .inkra-tooltip__content {
@@ -3926,6 +4737,52 @@
   font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
 }
 
+.inkra-number-ticker__reels {
+  display: inline-flex;
+  align-items: baseline;
+  unicode-bidi: isolate;
+  line-height: var(--inkra-line-ui, 1.45);
+}
+
+.inkra-number-ticker__column {
+  display: inline-grid;
+  flex: none;
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.inkra-number-ticker__column-inner {
+  display: grid;
+  min-width: 0;
+  height: 1lh;
+  overflow: hidden;
+}
+
+.inkra-number-ticker__face {
+  grid-area: 1 / 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1lh;
+  white-space: pre;
+}
+
+.inkra-number-ticker__column[data-digit] .inkra-number-ticker__face {
+  width: 1ch;
+}
+
+.inkra-number-ticker__face > .inkra-pencil-text {
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce), print {
+  .inkra-number-ticker__column { grid-template-columns: 1fr !important; }
+  .inkra-number-ticker__column[data-digit] { width: 1ch !important; }
+  .inkra-number-ticker__column[data-departing] { display: none; }
+  .inkra-number-ticker__face[data-face="from"] { display: none; }
+  .inkra-number-ticker__face[data-face="to"] { transform: none !important; opacity: 1 !important; }
+}
+
 .inkra-number-ticker__prefix,
 .inkra-number-ticker__suffix {
   align-items: center;
@@ -5701,6 +6558,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 }
 
 .inkra-image-viewer__body {
+  position: relative;
   display: grid;
   flex: 1 1 auto;
   min-block-size: var(--inkra-touch-target);
@@ -5848,6 +6706,24 @@ div.inkra-choice-grid > .inkra-radio-group {
   padding: var(--inkra-focus-offset);
   position: relative;
   scrollbar-gutter: auto;
+  pointer-events: auto;
+}
+
+.inkra-image-viewer__floating-tools {
+  position: absolute;
+  inset-inline: max(var(--inkra-space-3), env(safe-area-inset-left)) max(var(--inkra-space-3), env(safe-area-inset-right));
+  inset-block-start: max(var(--inkra-space-3), env(safe-area-inset-top));
+  display: flex;
+  justify-content: center;
+  padding-inline: var(--inkra-touch-target);
+  pointer-events: none;
+  z-index: 6;
+}
+
+.inkra-image-viewer__floating-tools[data-position="bottom"] {
+  inset-block-start: auto;
+  inset-block-end: max(var(--inkra-space-3), env(safe-area-inset-bottom));
+  padding-inline: 0;
 }
 
 .inkra-image-viewer__video-navigation {
@@ -5967,6 +6843,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 @media print {
   .inkra-image-viewer__close-control,
   .inkra-image-viewer__navigation,
+  .inkra-image-viewer__floating-tools,
   .inkra-image-viewer__bottom { display: none; }
 }
 
@@ -6984,6 +7861,50 @@ div.inkra-choice-grid > .inkra-radio-group {
   .inkra-sortable__handle { display: none; }
 }
 
+.inkra-inventory-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; min-width: 0; max-width: 100%; color: var(--inkra-ink); }
+.inkra-inventory-grid__container { min-width: 0; max-width: 100%; }
+.inkra-inventory-grid__header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 8px; padding-bottom: 8px; }
+.inkra-inventory-grid__scroll { max-width: 100%; overflow: auto; padding: 4px; }
+.inkra-inventory-grid__board { position: relative; isolation: isolate; direction: ltr; }
+.inkra-inventory-grid__lines { position: absolute; inset: 0; color: var(--inkra-border); pointer-events: none; }
+.inkra-inventory-grid__lines > canvas { position: absolute; }
+.inkra-inventory-grid__item, .inkra-inventory-grid__preview, .inkra-inventory-grid__cell, .inkra-inventory-grid__blocked { position: absolute; }
+.inkra-inventory-grid__item { outline: none; pointer-events: none; }
+.inkra-inventory-grid__cell { box-sizing: border-box; display: grid; place-items: center; pointer-events: auto; touch-action: none; cursor: grab; }
+.inkra-inventory-grid__shape { position: absolute; inset: 0 auto auto 0; pointer-events: none; color: var(--inkra-border-strong); }
+.inkra-inventory-grid__shape-fill, .inkra-inventory-grid__shape-wash { position: absolute; inset: 0; pointer-events: none; }
+.inkra-inventory-grid__shape-wash { opacity: .65; --inkra-selection-pigment: var(--inkra-accent-soft); }
+.inkra-inventory-grid__shape-fill[data-pencil-fallback] { background: var(--inkra-paper); border: 0; }
+.inkra-inventory-grid__shape-fill[data-pencil-fallback] + .inkra-inventory-grid__shape-fallback { display: block; }
+.inkra-inventory-grid__shape-edge { position: absolute; }
+.inkra-inventory-grid__shape-fallback { position: absolute; inset: 0; display: none; }
+.inkra-inventory-grid__item-content { position: relative; z-index: 1; padding: 4px; max-width: 100%; max-height: 100%; overflow: hidden; pointer-events: none; font-size: 13px; overflow-wrap: anywhere; text-align: center; }
+.inkra-inventory-grid__item[data-selected] .inkra-inventory-grid__shape { color: var(--inkra-accent-strong); }
+.inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__shape { color: var(--inkra-focus); --inkra-stroke-width: 2; }
+.inkra-inventory-grid__item[data-selected] .inkra-inventory-grid__shape-wash { opacity: 1; }
+.inkra-inventory-grid__item[data-dragging] { opacity: .28; }
+.inkra-inventory-grid__item[data-disabled] .inkra-inventory-grid__cell { cursor: default; touch-action: auto; }
+.inkra-inventory-grid__container[data-disabled], .inkra-inventory-grid[data-disabled] { opacity: .55; }
+.inkra-inventory-grid__preview { z-index: 2; pointer-events: none; color: var(--inkra-accent-strong); }
+.inkra-inventory-grid__preview[data-valid="false"] { color: var(--inkra-danger); }
+.inkra-inventory-grid__preview .inkra-inventory-grid__shape { color: inherit; --inkra-stroke-width: 2; }
+.inkra-inventory-grid__preview .inkra-inventory-grid__cell, .inkra-inventory-grid__overlay .inkra-inventory-grid__cell { pointer-events: none; }
+.inkra-inventory-grid__overlay { position: relative; opacity: .8; pointer-events: none; color: var(--inkra-ink); }
+.inkra-inventory-grid__blocked { display: grid; place-items: center; color: var(--inkra-ink-muted); pointer-events: none; }
+.inkra-inventory-grid__announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (forced-colors: active) {
+  .inkra-inventory-grid__board { border: 1px solid CanvasText; }
+  .inkra-inventory-grid__shape-fill { background: Canvas; }
+  .inkra-inventory-grid__shape-fallback { display: block; color: CanvasText; }
+  .inkra-inventory-grid__shape-edge { display: none; }
+  .inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__shape-fallback,
+  .inkra-inventory-grid__preview .inkra-inventory-grid__shape-fallback { color: Highlight; stroke-width: 3px; }
+}
+@media print {
+  .inkra-inventory-grid__shape-fallback { display: block; }
+  .inkra-inventory-grid__shape-edge { display: none; }
+}
+
 .inkra-sparkline { position: relative; display: inline-grid; gap: var(--inkra-space-1, 4px); max-inline-size: 100%; color: var(--inkra-ink); font-size: var(--inkra-text-sm); }
 .inkra-sparkline__svg { display: block; inline-size: min(100%, 100%); block-size: auto; overflow: visible; outline: none; position: relative; z-index: 1; }
 .inkra-sparkline__pencil { position: absolute; inset: 0 auto auto 0; inline-size: 100%; block-size: auto; aspect-ratio: 180 / 56; pointer-events: none; z-index: 2; opacity: 0; }
@@ -9763,6 +10684,16 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .inkra-time-picker__error { margin: 0; color: var(--inkra-danger); font-size: var(--inkra-text-sm); }
 
 .inkra-pagination { min-inline-size: 0; max-inline-size: 100%; color: var(--inkra-ink); }
+.inkra-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inkra-space-2); }
+.inkra-pagination[data-align="start"] { justify-content: flex-start; }
+.inkra-pagination[data-align="center"] { justify-content: center; }
+.inkra-pagination[data-align="end"] { justify-content: flex-end; }
+.inkra-pagination__size { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; }
+.inkra-pagination__size .inkra-select__trigger { max-inline-size: 100%; }
+.inkra-pagination__list { min-inline-size: 0; }
+.inkra-pagination[data-wrap="true"] .inkra-pagination__list { flex-wrap: wrap; }
+.inkra-pagination[data-wrap="true"][data-align="center"] .inkra-pagination__list { justify-content: center; }
+.inkra-pagination[data-wrap="true"][data-align="end"] .inkra-pagination__list { justify-content: flex-end; }
 .inkra-pagination__list { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--inkra-space-1); max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 8px; list-style: none; padding: 8px; margin: 0; }
 .inkra-pagination__list > li { display: flex; flex: 0 0 auto; }
 .inkra-pagination__summary { align-items: center; box-sizing: border-box; font-variant-numeric: tabular-nums; justify-content: center; max-inline-size: 100%; min-block-size: var(--inkra-touch-target); min-inline-size: 0; overflow-wrap: anywhere; padding-inline: var(--inkra-space-2); text-align: center; white-space: normal; }
@@ -10049,6 +10980,8 @@ button.inkra-steps__control { cursor: pointer; }
 .inkra-layout,
 .inkra-layout__body,
 .inkra-layout__header,
+.inkra-layout__header-sidebar,
+.inkra-layout__header-content,
 .inkra-layout__sidebar,
 .inkra-layout__content,
 .inkra-layout__footer {
@@ -10082,6 +11015,33 @@ button.inkra-steps__control { cursor: pointer; }
 .inkra-layout__body { display: flex; flex: 1; align-items: stretch; }
 .inkra-layout__header,
 .inkra-layout__footer { position: relative; flex: none; }
+.inkra-layout__header[data-shared-sidebar] { display: flex; align-items: stretch; }
+.inkra-layout__header-sidebar,
+.inkra-layout__header-content {
+  display: flex;
+  align-items: center;
+  padding: var(--inkra-layout-header-padding, 20px);
+  overflow-wrap: anywhere;
+}
+.inkra-layout__header-sidebar {
+  position: relative;
+  flex: 0 0 min(var(--inkra-layout-shared-sidebar-width, 240px), 100%);
+  max-width: 100%;
+}
+.inkra-layout__header-content { flex: 1; }
+.inkra-layout__header-content > * { min-width: 0; }
+.inkra-layout__header-sidebar-divider[data-orientation="vertical"] {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  height: min(32px, max(0px, calc(100% - 2 * var(--inkra-layout-header-padding, 20px))));
+  color: var(--inkra-ink-muted);
+  opacity: 0.56;
+  transform: translate(50%, -50%);
+}
+.inkra-layout__header-sidebar-divider[data-orientation="vertical"]:dir(rtl) { transform: translate(-50%, -50%); }
+.inkra-layout__header-sidebar[hidden],
+.inkra-layout__sidebar[hidden] { display: none; }
 .inkra-layout__sidebar {
   position: relative;
   flex: 0 0 min(var(--inkra-layout-sidebar-width, 240px), 100%);
@@ -10100,6 +11060,9 @@ button.inkra-steps__control { cursor: pointer; }
 }
 .inkra-layout__sidebar-divider-mobile { display: none; }
 @container inkra-layout (max-width: 639px) {
+  .inkra-layout[data-collapse-at="sm"] > .inkra-layout__header[data-shared-sidebar] { flex-direction: column; }
+  .inkra-layout[data-collapse-at="sm"] > .inkra-layout__header > .inkra-layout__header-sidebar { flex-basis: auto; width: 100%; }
+  .inkra-layout[data-collapse-at="sm"] > .inkra-layout__header > .inkra-layout__header-sidebar > .inkra-layout__header-sidebar-divider { display: none !important; }
   .inkra-layout[data-collapse-at="sm"] > .inkra-layout__body { flex-direction: column; }
   .inkra-layout[data-collapse-at="sm"] > .inkra-layout__body > .inkra-layout__sidebar { flex-basis: auto; width: 100%; }
   .inkra-layout[data-collapse-at="sm"] > .inkra-layout__body > .inkra-layout__sidebar > .inkra-layout__sidebar-divider { display: none; }
@@ -10108,6 +11071,9 @@ button.inkra-steps__control { cursor: pointer; }
   }
 }
 @container inkra-layout (max-width: 767px) {
+  .inkra-layout[data-collapse-at="md"] > .inkra-layout__header[data-shared-sidebar] { flex-direction: column; }
+  .inkra-layout[data-collapse-at="md"] > .inkra-layout__header > .inkra-layout__header-sidebar { flex-basis: auto; width: 100%; }
+  .inkra-layout[data-collapse-at="md"] > .inkra-layout__header > .inkra-layout__header-sidebar > .inkra-layout__header-sidebar-divider { display: none !important; }
   .inkra-layout[data-collapse-at="md"] > .inkra-layout__body { flex-direction: column; }
   .inkra-layout[data-collapse-at="md"] > .inkra-layout__body > .inkra-layout__sidebar { flex-basis: auto; width: 100%; }
   .inkra-layout[data-collapse-at="md"] > .inkra-layout__body > .inkra-layout__sidebar > .inkra-layout__sidebar-divider { display: none; }
@@ -10115,3 +11081,53 @@ button.inkra-steps__control { cursor: pointer; }
     display: block; position: absolute; bottom: -4px; inset-inline: 0; width: 100%;
   }
 }
+@media (forced-colors: active), print {
+  .inkra-layout__header-sidebar-divider[data-orientation="vertical"] { opacity: 1; }
+}
+.inkra-grid-resizable,
+.inkra-grid-resizable > .inkra-resizable,
+.inkra-grid-resizable .inkra-resizable__panel > .inkra-resizable {
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+.inkra-grid-resizable__cell {
+  box-sizing: border-box;
+  block-size: 100%;
+  min-inline-size: 0;
+  overflow: auto;
+}
+.inkra-grid-board { min-inline-size: 0; inline-size: 100%; }
+.inkra-grid-board__canvas { position: relative; min-inline-size: 0; }
+.inkra-grid-board__item { position: absolute; transition: transform var(--inkra-motion-fast) var(--inkra-ease); }
+.inkra-grid-board__item.resizing,
+.inkra-grid-board__item.react-draggable-dragging { transition: none; z-index: 2; }
+.inkra-grid-board__surface { box-sizing: border-box; display: flex; flex-direction: column; block-size: 100%; min-inline-size: 0; }
+.inkra-grid-board__surface > .inkra-pencil-surface__content { display: flex; flex-direction: column; block-size: 100%; min-block-size: 0; }
+.inkra-grid-board__header { display: flex; flex-shrink: 0; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 12px 4px; }
+.inkra-grid-board__title { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.inkra-grid-board__content { padding: 4px 12px 24px; min-block-size: 0; overflow: auto; flex: 1; }
+.inkra-grid-board__move,
+.inkra-grid-board__resize {
+  appearance: none; border: 0; background: transparent; color: var(--inkra-ink-muted);
+  display: inline-flex; align-items: center; justify-content: center;
+  inline-size: 44px; block-size: 44px; padding: 0; flex: 0 0 44px;
+}
+.inkra-grid-board__move { cursor: grab; touch-action: none; position: relative; }
+.inkra-grid-board__resize { position: absolute; right: 0; bottom: 0; cursor: se-resize; touch-action: none; z-index: 1; }
+.inkra-grid-board__move:hover,
+.inkra-grid-board__resize:hover { color: var(--inkra-accent-strong); }
+.inkra-grid-board__move:focus-visible,
+.inkra-grid-board__resize:focus-visible { outline: none; }
+.inkra-grid-board__focus { position: absolute; inset: 4px; opacity: 0; pointer-events: none; }
+.inkra-grid-board__move:focus-visible .inkra-grid-board__focus,
+.inkra-grid-board__resize:focus-visible .inkra-grid-board__focus { opacity: 1; }
+.inkra-grid-board__item.react-resizable-hide > .inkra-grid-board__resize { display: none; }
+.inkra-grid-board[data-stacked] .inkra-grid-board__canvas { display: grid; gap: var(--inkra-grid-board-gap); }
+.inkra-grid-board[data-stacked] .inkra-grid-board__item { position: relative !important; transform: none !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; min-block-size: 160px; }
+.inkra-grid-board[data-stacked] .inkra-grid-board__resize { display: none; }
+@media (prefers-reduced-motion: reduce) { .inkra-grid-board__item { transition: none; } }
+@media (forced-colors: active) {
+  .inkra-grid-board__focus { display: none; }
+  .inkra-grid-board__move:focus-visible, .inkra-grid-board__resize:focus-visible { outline: 2px solid Highlight; outline-offset: -4px; }
+}