@inkra/react 0.8.0 → 0.10.0

package/dist/styles/infinite-scroll.css

@@ -0,0 +1,171 @@
+.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; }
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-infinite-scroll__body { transition-duration: 0ms; }
+}
+
+@media print {
+  .inkra-infinite-scroll { overflow: visible; }
+  .inkra-infinite-scroll__body { transform: none !important; }
+}

package/dist/styles/inventory-grid.css

@@ -8,24 +8,36 @@
 .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__cell-surface { position: absolute; inset: 2px; pointer-events: none; }
+.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__cell-surface { color: var(--inkra-accent-strong); }
-.inkra-inventory-grid__cell-focus { position: absolute; inset: 3px; pointer-events: none; opacity: 0; color: var(--inkra-focus); }
-.inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__cell-focus { opacity: 1; }
+.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[data-valid="false"] .inkra-inventory-grid__cell { outline: 2px solid var(--inkra-danger); outline-offset: -4px; }
+.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__cell { border: 1px solid CanvasText; background: Canvas; }
-  .inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__cell { outline: 2px solid Highlight; outline-offset: -3px; }
-  .inkra-inventory-grid__preview .inkra-inventory-grid__cell { border: 3px solid Highlight; }
+  .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; }
 }

package/dist/styles/loading.css

@@ -0,0 +1,348 @@
+.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; }
+}

package/dist/styles/markdown.css

@@ -232,7 +232,7 @@
 .inkra-markdown__code-surface {
   background: transparent;
   color: var(--inkra-ink);
-  font-family: "Trip Map Hand", var(--inkra-font-hand);
+  font-family: var(--inkra-font-hand);
   font-size: var(--inkra-text-md);
   font-weight: var(--inkra-weight-regular);
   line-height: 1.8;

package/dist/styles/masonry.css

@@ -0,0 +1,68 @@
+.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;
+}
+
+.inkra-masonry[data-mode="adaptive"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--inkra-masonry-min-column-width, 240px)), 1fr));
+}
+
+.inkra-masonry[data-layout="ready"] {
+  display: block;
+}
+
+.inkra-masonry__item {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.inkra-masonry[data-layout="ready"] > .inkra-masonry__item {
+  inset-block-start: 0;
+  left: 0;
+  position: absolute;
+}
+
+.inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+  transition: transform var(--inkra-motion-normal, 180ms) var(--inkra-ease, ease);
+}
+
+.inkra-masonry__item > * {
+  max-inline-size: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+    transition-duration: 0ms;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+    transition-duration: 0ms;
+  }
+}
+
+@media print {
+  .inkra-masonry,
+  .inkra-masonry[data-layout="ready"] {
+    block-size: auto !important;
+    display: grid;
+    overflow: visible;
+  }
+
+  .inkra-masonry[data-layout="ready"] > .inkra-masonry__item {
+    inline-size: auto !important;
+    position: static;
+    transform: none !important;
+    transition: none;
+  }
+}