@parallelworks/ui 0.44.0 → 0.46.0

package/dist/logviewer/logviewer.css

@@ -7,64 +7,76 @@ mark.search-highlight {
 }
 
 /*
- * Scheme-aware ANSI colors for LogViewer.
+ * ANSI colors for LogViewer, from the theme's code tokens.
  *
  * The `anser` library is invoked with { use_classes: true }, so ANSI codes
- * become classes like `ansi-white-fg` / `ansi-black-bg` rather than inline
- * styles. Rules below remap only the combinations that would be unreadable
- * against the log surface — white/bright-white on a light surface, black on
- * a dark surface, and a few low-contrast hues. Colors that already read well
- * pass through as `currentcolor`/`transparent` so users still see the intent
- * of their ANSI output. `light-dark()` follows the host's `color-scheme`, so
- * no component ever branches on a scheme.
+ * become classes like `ansi-red-fg` / `ansi-black-bg` rather than inline
+ * styles. Each maps to a `--theme-ansi-*` token, which the theme solves for
+ * contrast against the log's surface, so every color reads in every theme;
+ * bright variants share their color's token. White and black map to the
+ * theme's text tones, so they never vanish into the surface.
  */
-.ansi-white-fg,
-.ansi-bright-white-fg {
-  color: light-dark(var(--theme-app, #111827), currentcolor);
+.ansi-black-fg,
+.ansi-bright-black-fg {
+  color: var(--theme-ansi-black);
 }
-.ansi-black-fg {
-  color: light-dark(currentcolor, var(--theme-muted-text-color, #9ca3af));
+.ansi-red-fg,
+.ansi-bright-red-fg {
+  color: var(--theme-ansi-red);
 }
-.ansi-red-fg {
-  color: light-dark(#991b1b, #f87171);
+.ansi-green-fg,
+.ansi-bright-green-fg {
+  color: var(--theme-ansi-green);
 }
-.ansi-bright-red-fg {
-  color: light-dark(#b91c1c, currentcolor);
+.ansi-yellow-fg,
+.ansi-bright-yellow-fg {
+  color: var(--theme-ansi-yellow);
 }
-.ansi-green-fg {
-  color: light-dark(#166534, #4ade80);
+.ansi-blue-fg,
+.ansi-bright-blue-fg {
+  color: var(--theme-ansi-blue);
 }
-.ansi-bright-green-fg {
-  color: light-dark(#15803d, currentcolor);
+.ansi-magenta-fg,
+.ansi-bright-magenta-fg {
+  color: var(--theme-ansi-magenta);
 }
-.ansi-yellow-fg {
-  color: light-dark(#a16207, #fde047);
+.ansi-cyan-fg,
+.ansi-bright-cyan-fg {
+  color: var(--theme-ansi-cyan);
 }
-.ansi-bright-yellow-fg {
-  color: light-dark(#b45309, currentcolor);
+.ansi-white-fg,
+.ansi-bright-white-fg {
+  color: var(--theme-ansi-white);
 }
-.ansi-blue-fg {
-  color: light-dark(#1e40af, #60a5fa);
+.ansi-black-bg,
+.ansi-bright-black-bg {
+  background-color: color-mix(in oklab, var(--theme-ansi-black) 18%, transparent);
 }
-.ansi-bright-blue-fg {
-  color: light-dark(#1d4ed8, currentcolor);
+.ansi-red-bg,
+.ansi-bright-red-bg {
+  background-color: color-mix(in oklab, var(--theme-ansi-red) 18%, transparent);
 }
-.ansi-magenta-fg {
-  color: light-dark(#86198f, #e879f9);
+.ansi-green-bg,
+.ansi-bright-green-bg {
+  background-color: color-mix(in oklab, var(--theme-ansi-green) 18%, transparent);
 }
-.ansi-bright-magenta-fg {
-  color: light-dark(#a21caf, currentcolor);
+.ansi-yellow-bg,
+.ansi-bright-yellow-bg {
+  background-color: color-mix(in oklab, var(--theme-ansi-yellow) 18%, transparent);
 }
-.ansi-cyan-fg {
-  color: light-dark(#155e75, #67e8f9);
+.ansi-blue-bg,
+.ansi-bright-blue-bg {
+  background-color: color-mix(in oklab, var(--theme-ansi-blue) 18%, transparent);
 }
-.ansi-bright-cyan-fg {
-  color: light-dark(#0e7490, currentcolor);
+.ansi-magenta-bg,
+.ansi-bright-magenta-bg {
+  background-color: color-mix(in oklab, var(--theme-ansi-magenta) 18%, transparent);
+}
+.ansi-cyan-bg,
+.ansi-bright-cyan-bg {
+  background-color: color-mix(in oklab, var(--theme-ansi-cyan) 18%, transparent);
 }
 .ansi-white-bg,
 .ansi-bright-white-bg {
-  background-color: light-dark(#e5e7eb, transparent);
-}
-.ansi-black-bg {
-  background-color: light-dark(transparent, #374151);
+  background-color: color-mix(in oklab, var(--theme-ansi-white) 18%, transparent);
 }

package/dist/logviewer/segments.d.ts

@@ -3,7 +3,7 @@ export declare function parseAnsiSegments(line: string): LogSegment[];
 export declare function plainSegments(text: string): LogSegment[];
 /**
  * Matches are located on the concatenated line text so a term straddling an
- * ANSI colour boundary still highlights, then sliced back onto the segments it
+ * ANSI color boundary still highlights, then sliced back onto the segments it
  * covers.
  */
 export declare function highlightSegments(segments: LogSegment[], searchTerm: string): LogSegment[];

package/dist/logviewer/segments.js

@@ -24,7 +24,7 @@ function plainSegments(text) {
 }
 /**
 * Matches are located on the concatenated line text so a term straddling an
-* ANSI colour boundary still highlights, then sliced back onto the segments it
+* ANSI color boundary still highlights, then sliced back onto the segments it
 * covers.
 */
 function highlightSegments(segments, searchTerm) {

package/dist/styles/base.css

@@ -1,7 +1,22 @@
-/* Page defaults and native controls, kept out of theme.css so package
+/* Page defaults, kept out of theme.css so package
  * entries can import them into their own cascade layer (theme.css's @utility
  * rules cannot be layered). Base layer so utilities still win. */
 @layer base {
+  /* The stacking scale: everything the package lays over the page takes one of
+   * these z-indexes, and a host slots its own fixed elements between them, such
+   * as a top bar at 100. Popups sit above dialogs so a select inside a modal
+   * opens over it; toasts sit above all, and stay usable while a modal is open.
+   * In this layer, so a host's own :root values win. */
+  :root {
+    --layer-sticky: 10; /* toolbars and tab strips that stick as their page scrolls */
+    --layer-header: 20; /* the page header, which sticks above them */
+    --layer-overlay: 1000; /* a panel over the page, such as a full-screen log */
+    --layer-drawer: 1100;
+    --layer-modal: 1200;
+    --layer-popover: 1300; /* menus, selects, popovers, hover cards and tooltips */
+    --layer-toast: 1400;
+  }
+
   body {
     font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
@@ -17,43 +32,4 @@
   ::file-selector-button {
     border-color: var(--theme-border, currentColor);
   }
-
-  input,
-  textarea {
-    border-radius: 0.25rem;
-    border: 1px solid var(--theme-border, #d1d5db);
-    padding: 0.25rem 0.5rem;
-    min-height: 1.25rem;
-    font-size: 14px;
-    background-color: var(--theme-input-bg, #f9fafb);
-    color: var(--theme-app, #000000);
-  }
-  input:disabled,
-  textarea:disabled,
-  input.disabled,
-  textarea.disabled {
-    cursor: not-allowed;
-    background-color: var(--theme-input-disabled-bg, #f3f4f6);
-    color: var(--theme-input-disabled-text, #9ca3af);
-  }
-  .form-label,
-  .form-label-compact,
-  .form-label-top {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    flex-shrink: 0;
-    font-weight: 300;
-    height: 34px;
-    width: 13rem;
-  }
-  .form-label-compact {
-    width: fit-content;
-    margin-right: 0.5rem;
-  }
-  .form-label-top {
-    min-height: 20px;
-    height: auto;
-    width: 100%;
-  }
 }

package/dist/styles/theme.css

@@ -1,58 +1,77 @@
-/* The unified theme contract: `theme-*` utilities backed by a closed set of
- * `--theme-*` CSS variables (see src/theme/index.ts for the full token list —
- * every token is derivable from an {accent, background, contrast} seed per
- * surface via deriveTheme()). Hosts override the variables at runtime (e.g.
- * an org theme); the :root block only supplies defaults for standalone use.
+/* The theme contract: `theme-*` utilities over the `--theme-*` tokens, which
+ * src/theme generates from a scheme of three choices (base, accent, contrast).
+ * Hosts set the tokens at runtime with applyTheme; the defaults below are the
+ * default theme's light scheme, for standalone use, with display-p3 values for
+ * wide-gamut screens.
  *
- * Sidebar tokens (--theme-bg, --theme-sidebar-*) are part of the contract but
- * intentionally have no :root defaults: hosts supply per-site fallbacks at the
- * use sites, and a global default here would override them. */
+ * Sidebar tokens (--theme-sidebar-*) are part of the contract but have no
+ * defaults here: hosts supply per-site fallbacks at the use sites, and a global
+ * default would override them. */
 
+/* generated:start (src/theme/derive.test.ts checks this; UPDATE_THEME_CSS=1 rewrites it) */
 :root {
-  --theme-app-bg: #ffffff;
-  --theme-app: #000000;
-  --theme-panel-bg: #ffffff;
-  --theme-panel: #000000;
-  --theme-muted-panel-bg: #f8f9fa;
-  --theme-muted-panel-color: #5f6b76;
-  --theme-muted-text-color: #5f6b76;
-  --theme-border: #d1d5db;
-  --theme-element: #06354f;
-  --theme-element-text: #ffffff;
-  --theme-element-hover: #053047;
-  --theme-hover: #f3f4f6;
-  --theme-hover-text: #000000;
-  --theme-link: #2f6fa8;
-  --theme-input-bg: #f9fafb;
-  --theme-input: #3b82f6;
-  --theme-input-disabled-bg: #f3f4f6;
-  --theme-input-disabled-text: #9ca3af;
-  --theme-card-bg: #ffffff;
-  --theme-card-border: rgba(0, 0, 0, 0.04);
-  --theme-card-hover: #fafafa;
+  --theme-app-bg: #f3f4f6;
+  --theme-panel-bg: #fcfeff;
+  --theme-panel-hover: #f2f5f9;
+  --theme-muted-panel-bg: #e7eaee;
+  --theme-hover: #e3e5e9;
+  --theme-input-bg: #fafcfe;
+  --theme-input-disabled-bg: #ebeef1;
+  --theme-app: #0a101b;
+  --theme-muted-text-color: #4e5664;
+  --theme-placeholder: #808999;
+  --theme-link: #06354f;
+  --theme-border: #cacdd0;
+  --theme-border-strong: #a3a6a9;
   --theme-accent: #06354f;
   --theme-accent-text: #ffffff;
-  --theme-focus-ring: rgba(37, 99, 235, 0.2);
-  --theme-hover-overlay: rgba(0, 0, 0, 0.02);
-  --theme-success: #16a34a;
-  --theme-success-muted: rgba(22, 163, 74, 0.1);
-  --theme-error: #dc2626;
-  --theme-error-muted: rgba(220, 38, 38, 0.1);
-  --theme-warning: #d97706;
-  --theme-warning-muted: rgba(217, 119, 6, 0.1);
-  --theme-info: #2563eb;
-  --theme-info-muted: rgba(37, 99, 235, 0.1);
-  --theme-favorite: #e11d48;
-  --theme-favorite-muted: rgba(225, 29, 72, 0.1);
-  --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
-  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
-  --theme-auth-shadow: 0 25px 80px -20px rgba(0, 0, 0, 0.2), 0 10px 30px -10px rgba(0, 0, 0, 0.1);
-}
-
-@utility theme-element {
-  background-color: var(--theme-element, #06354f);
-  color: var(--theme-element-text, #ffffff);
+  --theme-accent-hover: #002841;
+  --theme-accent-subtle: #d3ebfc;
+  --theme-focus: #06354f;
+  --theme-focus-ring: rgba(6, 53, 79, 0.25);
+  --theme-success: #005f23;
+  --theme-success-muted: rgba(0, 95, 35, 0.1);
+  --theme-error: #95050f;
+  --theme-error-muted: rgba(149, 5, 15, 0.1);
+  --theme-warning: #794800;
+  --theme-warning-muted: rgba(121, 72, 0, 0.1);
+  --theme-info: #004caa;
+  --theme-info-muted: rgba(0, 76, 170, 0.1);
+  --theme-favorite: #920242;
+  --theme-favorite-muted: rgba(146, 2, 66, 0.1);
+  --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.07);
+  --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
+  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
+  --theme-shadow-xl: 0 25px 80px -20px rgba(0, 0, 0, 0.2), 0 10px 30px -10px rgba(0, 0, 0, 0.1);
+  --theme-code-bg: #e7eaee;
+  --theme-code-text: #1c2330;
+  --theme-code-comment: #555d6c;
+  --theme-code-keyword: #36617d;
+  --theme-code-string: #196a24;
+  --theme-code-number: #944500;
+  --theme-code-function: #6c4b9e;
+  --theme-code-type: #006565;
+  --theme-code-property: #5a51a5;
+  --theme-ansi-black: #1c2330;
+  --theme-ansi-red: #a3322d;
+  --theme-ansi-green: #006a12;
+  --theme-ansi-yellow: #755800;
+  --theme-ansi-blue: #0b5aae;
+  --theme-ansi-magenta: #8d3a88;
+  --theme-ansi-cyan: #00666c;
+  --theme-ansi-white: #555d6c;
+}
+
+@media (color-gamut: p3) {
+  :root {
+    --theme-ansi-cyan: color(display-p3 0 0.4024 0.4329);
+  }
+}
+/* generated:end */
+
+@utility theme-accent {
+  background-color: var(--theme-accent, #06354f);
+  color: var(--theme-accent-text, #ffffff);
 }
 
 @utility theme-app {
@@ -62,7 +81,7 @@
 
 @utility theme-panel {
   background-color: var(--theme-panel-bg, #fff);
-  color: var(--theme-panel, #000);
+  color: var(--theme-app, #000);
 }
 
 /* The bordered panel graphs and settings cards sit in; graph circles hide connectors with its color. */
@@ -72,7 +91,7 @@
 
 @utility theme-muted-panel {
   background-color: var(--theme-muted-panel-bg, #f8f9fa);
-  color: var(--theme-muted-panel-color, #5f6b76);
+  color: var(--theme-muted-text-color, #5f6b76);
 }
 
 @utility theme-muted-text {
@@ -89,7 +108,7 @@
     background-color 0.15s ease-in-out,
     color 0.15s ease-in-out;
   background-color: var(--theme-hover, #f3f4f6);
-  color: var(--theme-hover-text, #000000);
+  color: var(--theme-app, #000000);
 }
 
 /* Utility for theme-aware borders */
@@ -98,27 +117,7 @@
 }
 
 .theme-hover-text {
-  color: var(--theme-hover-text);
-}
-
-/* Utility for theme-aware input styling */
-.theme-input {
-  background-color: var(--theme-input-bg, #f9fafb);
-  border-color: var(--theme-border, #d1d5db);
-  color: var(--theme-app, #374151);
-}
-
-.theme-input:focus {
-  border-color: var(--theme-element, #3b82f6);
-  outline: none;
-  box-shadow: 0 0 0 1px var(--theme-element, #3b82f6);
-}
-
-.theme-input:disabled,
-.theme-input.disabled {
-  cursor: not-allowed;
-  background-color: var(--theme-input-disabled-bg, #f3f4f6);
-  color: var(--theme-input-disabled-text, #9ca3af);
+  color: var(--theme-app);
 }
 
 .tooltip {
@@ -156,7 +155,7 @@
 }
 
 .theme-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--theme-element, #3b82f6);
+  background: var(--theme-accent, #3b82f6);
 }
 
 .theme-scrollbar::-webkit-scrollbar-corner {
@@ -185,43 +184,13 @@
 }
 
 .theme-scrollbar-small::-webkit-scrollbar-thumb:hover {
-  background: var(--theme-element, #3b82f6);
+  background: var(--theme-accent, #3b82f6);
 }
 
 .theme-scrollbar-small::-webkit-scrollbar-corner {
   background: var(--theme-panel-bg, #ffffff);
 }
 
-/* Button utilities matching the host app's .btn family, so packaged surfaces
- * (workflow views, storage explorer) style identically for standalone
- * consumers. A host that defines its own .btn family keeps its definitions. */
-@utility btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: center;
-  cursor: pointer;
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  vertical-align: middle;
-  transition: all 0.15s ease-in-out;
-}
-@utility btn-info {
-  background-color: var(--theme-element, #06354f);
-  color: var(--theme-element-text, #ffffff);
-}
-@utility btn-neutral {
-  background-color: var(--theme-input-bg, #ffffff);
-  border: 1px solid var(--theme-border, #d1d5db);
-}
-@utility btn-destructive {
-  background-color: #ef4444;
-  color: #ffffff;
-}
-
 @keyframes logo-loader-ripple {
   0%,
   100% {