@inkra/react 0.5.0 → 0.8.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;
@@ -2050,13 +2068,18 @@
   inline-size: 100%;
 }
 
-.inkra-select-stepper .inkra-select-stepper__control,
-.inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
+.inkra-select-stepper .inkra-select-stepper__control {
   flex-wrap: nowrap;
   gap: 0;
   padding-inline: 0;
 }
 
+.inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
+  flex-wrap: nowrap;
+  gap: 0;
+  padding-inline: var(--inkra-field-control-padding);
+}
+
 .inkra-select-stepper__control {
   outline: 0;
 }
@@ -6979,6 +7002,38 @@ 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__cell-surface { position: absolute; inset: 2px; pointer-events: 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-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__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-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; }
@@ -8717,12 +8772,103 @@ svg.leaflet-image-layer.leaflet-interactive path {
 		}
 	}
 
-.inkra-breadcrumb { min-width: 0; color: var(--inkra-ink); }
-.inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.inkra-breadcrumb {
+  --inkra-breadcrumb-item-height: var(--inkra-control-md);
+  --inkra-breadcrumb-item-padding: var(--inkra-space-3);
+  --inkra-breadcrumb-item-font-size: var(--inkra-text-md);
+  --inkra-breadcrumb-item-icon-size: var(--inkra-icon-md);
+  --inkra-breadcrumb-item-gap: var(--inkra-space-2);
+  color: var(--inkra-ink);
+  max-width: 100%;
+  min-width: 0;
+}
+.inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
 .inkra-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
-.inkra-breadcrumb__link { max-width: 100%; color: var(--inkra-ink-muted); }
-.inkra-breadcrumb__link .inkra-button__label { white-space: normal; overflow-wrap: anywhere; }
-.inkra-breadcrumb__page { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; overflow-wrap: anywhere; }
+.inkra-breadcrumb__link,
+.inkra-breadcrumb__trigger {
+  --inkra-button-visual-height: var(--inkra-breadcrumb-item-height);
+  --inkra-button-visual-padding: var(--inkra-breadcrumb-item-padding);
+  --inkra-button-font-size: var(--inkra-breadcrumb-item-font-size);
+  --inkra-button-icon-size: var(--inkra-breadcrumb-item-icon-size);
+  --inkra-button-content-gap: var(--inkra-breadcrumb-item-gap);
+  color: var(--inkra-accent-strong);
+  max-width: 100%;
+}
+.inkra-breadcrumb__link .inkra-button__label,
+.inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text,
+.inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source,
+.inkra-breadcrumb__trigger .inkra-button__label,
+.inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text,
+.inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source {
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__surface {
+  height: auto;
+  max-width: 100%;
+  min-height: var(--inkra-breadcrumb-item-height);
+  min-width: var(--inkra-breadcrumb-item-height);
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__content {
+  max-width: 100%;
+  min-width: 0;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__focus-ring {
+  height: 100%;
+  inset-inline: 0;
+  top: 0;
+  transform: none;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):hover:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface,
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):active:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface {
+  transform: none;
+}
+.inkra-breadcrumb__page {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-size: var(--inkra-breadcrumb-item-font-size);
+  gap: var(--inkra-breadcrumb-item-gap);
+  justify-content: center;
+  letter-spacing: var(--inkra-letter-spacing);
+  line-height: var(--inkra-line-ui);
+  max-width: 100%;
+  min-height: var(--inkra-breadcrumb-item-height);
+  min-width: var(--inkra-breadcrumb-item-height);
+  overflow-wrap: anywhere;
+  padding-inline: var(--inkra-breadcrumb-item-padding);
+}
+.inkra-breadcrumb__label,
+.inkra-breadcrumb__label > .inkra-pencil-text {
+  align-items: center;
+  display: inline-flex;
+  min-width: 0;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.inkra-breadcrumb__label > .inkra-pencil-text > .inkra-pencil-text__source {
+  display: block;
+  min-width: 0;
+  white-space: inherit;
+}
+.inkra-breadcrumb__icon {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--inkra-breadcrumb-item-icon-size);
+  height: var(--inkra-breadcrumb-item-icon-size);
+  justify-content: center;
+  width: var(--inkra-breadcrumb-item-icon-size);
+}
+.inkra-breadcrumb__icon > :is(svg, canvas) {
+  height: 100% !important;
+  max-height: 100%;
+  max-width: 100%;
+  width: 100% !important;
+}
 .inkra-breadcrumb__separator { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 16px; color: var(--inkra-ink-subtle); pointer-events: none; }
 
 .inkra-calendar-scroll { max-width: 100%; min-width: 0; overflow-x: auto; }
@@ -9667,6 +9813,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; }
@@ -9953,6 +10109,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 {
@@ -9986,6 +10144,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%);
@@ -10004,6 +10189,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; }
@@ -10012,6 +10200,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; }
@@ -10019,3 +10210,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; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkra/react",
-  "version": "0.5.0",
+  "version": "0.8.0",
   "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
   "type": "module",
   "license": "MIT",
@@ -199,6 +199,11 @@
       "import": "./dist/input-number/index.js",
       "default": "./dist/input-number/index.js"
     },
+    "./inventory-grid": {
+      "types": "./dist/inventory-grid/index.d.ts",
+      "import": "./dist/inventory-grid/index.js",
+      "default": "./dist/inventory-grid/index.js"
+    },
     "./journey-map": {
       "types": "./dist/journey-map/index.d.ts",
       "import": "./dist/journey-map/index.js",
@@ -424,6 +429,7 @@
     "./styles/image-cropper.css": "./dist/styles/image-cropper.css",
     "./styles/image-viewer.css": "./dist/styles/image-viewer.css",
     "./styles/input-number.css": "./dist/styles/input-number.css",
+    "./styles/inventory-grid.css": "./dist/styles/inventory-grid.css",
     "./styles/journey-map.css": "./dist/styles/journey-map.css",
     "./styles/keypad.css": "./dist/styles/keypad.css",
     "./styles/layout.css": "./dist/styles/layout.css",
@@ -534,6 +540,7 @@
     "react-aria-components": "^1.22.1",
     "react-day-picker": "^9.14.0",
     "react-easy-crop": "^6.2.4",
+    "react-grid-layout": "^2.3.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^4.14.8",
     "react-zoom-pan-pinch": "^4.2.0",