@inkra/react 0.10.0 → 0.12.0

package/dist/styles/number-ticker.css

@@ -66,7 +66,48 @@
   flex: none;
 }
 
+.inkra-number-ticker[data-animation="morph"] { min-inline-size: 0; }
+
+.inkra-number-ticker[data-animation="morph"] .inkra-number-ticker__value {
+  display: block;
+  max-inline-size: 100%;
+  overflow: hidden;
+}
+
+.inkra-number-ticker__morph {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: baseline;
+  justify-content: flex-end;
+  max-inline-size: 100%;
+  height: 1lh;
+  line-height: var(--inkra-line-ui, 1.45);
+  overflow: hidden;
+  contain: paint;
+  unicode-bidi: isolate;
+}
+
+.inkra-number-ticker__morph-glyph {
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  height: 1lh;
+  white-space: pre;
+}
+
+.inkra-number-ticker__morph-glyph > .inkra-pencil-text { flex: none; }
+
 @media (prefers-reduced-motion: reduce), print {
+  .inkra-number-ticker__morph { width: auto !important; }
+  .inkra-number-ticker__morph-glyph[data-face="from"] { display: none; }
+  .inkra-number-ticker__morph-glyph[data-face="to"] {
+    position: relative !important;
+    left: auto !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
   .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; }

package/dist/styles.css

@@ -4445,8 +4445,6 @@
 }
 
 .inkra-log[data-toolbar="true"] { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr); }
-.inkra-log:has(> .inkra-log__latest) { grid-template-rows: minmax(var(--inkra-touch-target), 1fr) auto; }
-.inkra-log[data-toolbar="true"]:has(> .inkra-log__latest) { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr) auto; }
 
 .inkra-log__toolbar {
   align-items: center;
@@ -4590,21 +4588,15 @@
 }
 
 .inkra-log__latest {
-  align-items: center;
   display: flex;
-  justify-content: flex-end;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  padding: var(--inkra-space-2) var(--inkra-space-3);
-  position: relative;
+  inset-block-end: clamp(0px, calc(100% - var(--inkra-touch-target)), var(--inkra-space-2));
+  inset-inline-end: var(--inkra-space-3);
+  position: absolute;
   z-index: 2;
 }
 
-.inkra-log__latest-divider {
-  color: var(--inkra-border);
-  inset-block-start: -4px;
-  inset-inline: 0;
-  position: absolute;
+.inkra-log__latest .inkra-button__surface {
+  background: var(--inkra-paper);
 }
 
 @container (max-width: 36rem) {
@@ -4620,11 +4612,6 @@
   .inkra-log__follow-control .inkra-button__content,
   .inkra-log__follow-control .inkra-button__label,
   .inkra-log__follow-control .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
-  .inkra-log__latest .inkra-button { inline-size: 100%; }
-  .inkra-log__latest .inkra-button__surface { height: auto; inline-size: 100%; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
-  .inkra-log__latest .inkra-button__content,
-  .inkra-log__latest .inkra-button__label,
-  .inkra-log__latest .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
 }
 
 @media (forced-colors: active) {
@@ -4892,7 +4879,48 @@
   flex: none;
 }
 
+.inkra-number-ticker[data-animation="morph"] { min-inline-size: 0; }
+
+.inkra-number-ticker[data-animation="morph"] .inkra-number-ticker__value {
+  display: block;
+  max-inline-size: 100%;
+  overflow: hidden;
+}
+
+.inkra-number-ticker__morph {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: baseline;
+  justify-content: flex-end;
+  max-inline-size: 100%;
+  height: 1lh;
+  line-height: var(--inkra-line-ui, 1.45);
+  overflow: hidden;
+  contain: paint;
+  unicode-bidi: isolate;
+}
+
+.inkra-number-ticker__morph-glyph {
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  height: 1lh;
+  white-space: pre;
+}
+
+.inkra-number-ticker__morph-glyph > .inkra-pencil-text { flex: none; }
+
 @media (prefers-reduced-motion: reduce), print {
+  .inkra-number-ticker__morph { width: auto !important; }
+  .inkra-number-ticker__morph-glyph[data-face="from"] { display: none; }
+  .inkra-number-ticker__morph-glyph[data-face="to"] {
+    position: relative !important;
+    left: auto !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
   .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; }
@@ -7273,6 +7301,40 @@ div.inkra-choice-grid > .inkra-radio-group {
   .inkra-node-graph__control:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
 }
 
+.inkra-dependency-graph__node { position: relative; width: 100%; height: 100%; }
+.inkra-dependency-graph__anchor.react-flow__handle { position: absolute; width: 0; height: 0; min-width: 0; min-height: 0; border: 0; opacity: 0; pointer-events: none; }
+.inkra-dependency-graph__card, .inkra-dependency-graph__icon-button { box-sizing: border-box; width: 100%; height: 100%; padding: 14px 16px; border: 0; font: inherit; color: var(--inkra-ink); text-align: start; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
+.inkra-dependency-graph__card--custom { padding: 0; }
+.inkra-dependency-graph__header { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.inkra-dependency-graph__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
+.inkra-dependency-graph__title { appearance: none; background: none; border: 0; padding: 0; margin: 0; min-width: 0; flex: 1; font: inherit; color: inherit; text-align: start; font-weight: 600; cursor: pointer; }
+.inkra-dependency-graph__title > * { max-width: 100%; }
+.inkra-dependency-graph__actions { display: flex; align-items: center; flex: 0 0 auto; gap: 4px; margin-inline-start: auto; }
+.inkra-dependency-graph__body { min-height: 0; overflow: auto; font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__footer { display: flex; align-items: center; gap: 8px; margin-top: auto; }
+.inkra-dependency-graph__icon-button { align-items: center; justify-content: center; padding: 10px; cursor: pointer; }
+.inkra-dependency-graph__card:focus-visible, .inkra-dependency-graph__title:focus-visible, .inkra-dependency-graph__icon-button:focus-visible { outline: 0; }
+.inkra-dependency-graph__focus { --inkra-accent-strong: var(--inkra-focus); position: absolute !important; inset: -5px; pointer-events: none; opacity: 0; }
+.inkra-dependency-graph__card:focus-visible > .inkra-dependency-graph__focus,
+.inkra-dependency-graph__card--custom:focus-visible .inkra-dependency-graph__focus,
+.inkra-dependency-graph__card:has(.inkra-dependency-graph__title:focus-visible) > .inkra-dependency-graph__focus,
+.inkra-dependency-graph__icon-button:focus-visible > .inkra-dependency-graph__focus { opacity: 1; }
+.inkra-dependency-graph__node[data-disabled] { opacity: .55; }
+.inkra-dependency-graph__title:disabled, .inkra-dependency-graph__icon-button:disabled { cursor: not-allowed; }
+.inkra-dependency-graph__status { font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__node[data-status="completed"] .inkra-dependency-graph__status { color: var(--inkra-success); }
+.inkra-dependency-graph__node[data-status="available"] .inkra-dependency-graph__status,
+.inkra-dependency-graph__node[data-status="active"] .inkra-dependency-graph__status { color: var(--inkra-accent-strong); }
+.inkra-dependency-graph__highlight { position: absolute !important; inset: -3px; pointer-events: none; }
+.inkra-dependency-graph__node[data-dimmed], .inkra-dependency-graph__edge[data-dimmed] { opacity: .5; }
+.inkra-dependency-graph__edge { color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__edge[data-highlighted], .inkra-dependency-graph__edge--highlighted { color: var(--inkra-accent-strong); }
+@media (forced-colors: active) {
+  .inkra-dependency-graph__card:focus-visible, .inkra-dependency-graph__title:focus-visible, .inkra-dependency-graph__icon-button:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: 4px; }
+  .inkra-dependency-graph__focus { display: none !important; }
+  .inkra-dependency-graph__node[data-dimmed], .inkra-dependency-graph__edge[data-dimmed] { opacity: 1; }
+}
+
 .inkra-overflow-list {
   --inkra-overflow-list-gap: var(--inkra-space-2);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkra/react",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
   "type": "module",
   "license": "MIT",
@@ -489,7 +489,13 @@
     "./styles/tree-select.css": "./dist/styles/tree-select.css",
     "./styles/typewriter.css": "./dist/styles/typewriter.css",
     "./styles/upload.css": "./dist/styles/upload.css",
-    "./styles/virtual-list.css": "./dist/styles/virtual-list.css"
+    "./styles/virtual-list.css": "./dist/styles/virtual-list.css",
+    "./dependency-graph": {
+      "types": "./dist/dependency-graph/index.d.ts",
+      "import": "./dist/dependency-graph/index.js",
+      "default": "./dist/dependency-graph/index.js"
+    },
+    "./styles/dependency-graph.css": "./dist/styles/dependency-graph.css"
   },
   "files": [
     "dist",