@vobs/ui 0.1.0 → 0.3.0

package/dist/tokens.css

@@ -8,11 +8,15 @@
     --radius-10: 10px;
     --radius-full: 9999px;
     --spacer-0: 0px;
+    --spacer-2: 2px;
     --spacer-4: 4px;
     --spacer-6: 6px;
     --spacer-8: 8px;
+    --spacer-10: 10px;
     --spacer-12: 12px;
+    --spacer-14: 14px;
     --spacer-16: 16px;
+    --spacer-20: 20px;
     --spacer-24: 24px;
     --spacer-32: 32px;
     --spacer-40: 40px;
@@ -99,9 +103,11 @@
     --code-terminal-font-weight: 450;
     --code-terminal-line-height: 18px;
     --font-weight-default: 400;
+    --font-weight-regular: var(--font-weight-default);
     --font-weight-code: 450;
     --font-weight-medium: 500;
     --font-weight-strong: 600;
+    --font-weight-semibold: var(--font-weight-strong);
     --z-index-dropdown: 2000;
     --z-index-drawer: 2500;
     --z-index-modal: 3000;
@@ -231,6 +237,9 @@
     --color-warning: var(--status-warning-default);
     --color-error: var(--status-error-default);
     --color-error-soft: var(--status-error-surface-l1);
+    --color-foreground-muted: var(--text-secondary);
+    --accent-blue: var(--status-primary-default);
+    --code-string: var(--code-text);
   }
 
   [data-theme="light"] {
@@ -238,22 +247,40 @@
     --bg-base-default: #FFFFFF;
     --bg-base-secondary: #F5F6F8;
     --bg-base-tertiary: #EDF0F5;
+    --bg-tooltip: #0F1117;
+    --bg-menu: #FFFFFF;
+    --bg-invert: #0F1117;
+    --bg-invert-hover: #1F2937;
+    --bg-invert-active: #374151;
+    --bg-invert-disabled: rgba(15, 17, 23, 0.12);
     --bg-overlay-l1: rgba(0, 0, 0, 0.04);
     --bg-overlay-l2: rgba(0, 0, 0, 0.06);
     --bg-overlay-l3: rgba(0, 0, 0, 0.08);
     --bg-overlay-l4: rgba(0, 0, 0, 0.12);
     --text-default: #0F1117;
+    --text-default-hover: #000000;
+    --text-default-active: #000000;
     --text-secondary: #4B5563;
+    --text-secondary-hover: #1F2937;
+    --text-secondary-active: #1F2937;
     --text-tertiary: #5B6370;
     --text-disabled: #525A68;
     --text-onbrand: #FFFFFF;
+    --text-onaccent: #FFFFFF;
     --icon-default: #0F1117;
+    --icon-default-hover: #000000;
+    --icon-default-active: #000000;
     --icon-secondary: #4B5563;
+    --icon-secondary-hover: #1F2937;
+    --icon-secondary-active: #1F2937;
     --icon-tertiary: #5B6370;
     --icon-disabled: #525A68;
+    --icon-onbrand: #FFFFFF;
+    --icon-onaccent: #FFFFFF;
     --border-neutral-l1: rgba(0, 0, 0, 0.12);
     --border-neutral-l2: rgba(0, 0, 0, 0.18);
     --border-neutral-l3: rgba(0, 0, 0, 0.25);
+    --border-contrast: #0F1117;
     --status-success-default: #16A34A;
     --status-warning-default: #CA8A04;
     --status-error-default: #DC2626;
@@ -294,6 +321,9 @@
     --color-warning: var(--status-warning-default);
     --color-error: var(--status-error-default);
     --color-error-soft: var(--status-error-surface-l1);
+    --color-foreground-muted: var(--text-secondary);
+    --accent-blue: var(--status-primary-default);
+    --code-string: var(--code-text);
   }
 
   :root,
@@ -312,6 +342,16 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"],
+  [data-theme="light"][data-brand="green"],
+  [data-theme="light"] [data-brand="green"] {
+    --text-brand: #1C874F;
+    --text-brand-hover: #09884A;
+    --icon-brand: #1C874F;
+    --icon-brand-hover: #09884A;
+    --border-brand: #1C874F;
+  }
+
   [data-brand="blue"] {
     --bg-brand: #80C1FF;
     --bg-brand-hover: #6EA6DB;
@@ -327,6 +367,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="blue"],
+  [data-theme="light"] [data-brand="blue"] {
+    --text-brand: #517AA2;
+    --text-brand-hover: #517AA2;
+    --icon-brand: #517AA2;
+    --icon-brand-hover: #517AA2;
+    --border-brand: #517AA2;
+  }
+
   [data-brand="purple"] {
     --bg-brand: #8E80FF;
     --bg-brand-hover: #9E92FF;
@@ -342,6 +391,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="purple"],
+  [data-theme="light"] [data-brand="purple"] {
+    --text-brand: #7468D0;
+    --text-brand-hover: #756CBE;
+    --icon-brand: #7468D0;
+    --icon-brand-hover: #756CBE;
+    --border-brand: #7468D0;
+  }
+
   [data-brand="yellow"] {
     --bg-brand: #FFD080;
     --bg-brand-hover: #DBB36E;
@@ -357,6 +415,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="yellow"],
+  [data-theme="light"] [data-brand="yellow"] {
+    --text-brand: #8C7347;
+    --text-brand-hover: #8C7347;
+    --icon-brand: #8C7347;
+    --icon-brand-hover: #8C7347;
+    --border-brand: #8C7347;
+  }
+
   [data-brand="red"] {
     --bg-brand: #FF8080;
     --bg-brand-hover: #DB6E6E;
@@ -372,6 +439,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="red"],
+  [data-theme="light"] [data-brand="red"] {
+    --text-brand: #B65B5B;
+    --text-brand-hover: #B65B5B;
+    --icon-brand: #B65B5B;
+    --icon-brand-hover: #B65B5B;
+    --border-brand: #B65B5B;
+  }
+
   [data-brand="teal"] {
     --bg-brand: #2DD288;
     --bg-brand-hover: #27B575;
@@ -387,6 +463,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="teal"],
+  [data-theme="light"] [data-brand="teal"] {
+    --text-brand: #1D8758;
+    --text-brand-hover: #1D8758;
+    --icon-brand: #1D8758;
+    --icon-brand-hover: #1D8758;
+    --border-brand: #1D8758;
+  }
+
   [data-brand="cyan"] {
     --bg-brand: #04CBE5;
     --bg-brand-hover: #27D2E9;
@@ -402,6 +487,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="cyan"],
+  [data-theme="light"] [data-brand="cyan"] {
+    --text-brand: #038293;
+    --text-brand-hover: #188291;
+    --icon-brand: #038293;
+    --icon-brand-hover: #188291;
+    --border-brand: #038293;
+  }
+
   [data-brand="violet"] {
     --bg-brand: #BFA5FF;
     --bg-brand-hover: #A48EDB;
@@ -417,6 +511,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="violet"],
+  [data-theme="light"] [data-brand="violet"] {
+    --text-brand: #7F6DA9;
+    --text-brand-hover: #7E6DA9;
+    --icon-brand: #7F6DA9;
+    --icon-brand-hover: #7E6DA9;
+    --border-brand: #7F6DA9;
+  }
+
   [data-brand="slate"] {
     --bg-brand: #AFB9CF;
     --bg-brand-hover: #979FB2;
@@ -432,6 +535,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="slate"],
+  [data-theme="light"] [data-brand="slate"] {
+    --text-brand: #707785;
+    --text-brand-hover: #717685;
+    --icon-brand: #707785;
+    --icon-brand-hover: #717685;
+    --border-brand: #707785;
+  }
+
   [data-brand="neutral"] {
     --bg-brand: #BABABA;
     --bg-brand-hover: #A0A0A0;
@@ -446,4 +558,13 @@
     --text-onbrand: #0C0C0D;
     --icon-onbrand: #0C0C0D;
   }
+
+  [data-theme="light"][data-brand="neutral"],
+  [data-theme="light"] [data-brand="neutral"] {
+    --text-brand: #767676;
+    --text-brand-hover: #767676;
+    --icon-brand: #767676;
+    --icon-brand-hover: #767676;
+    --border-brand: #767676;
+  }
 }

package/dist/tree.js

@@ -102,13 +102,17 @@ export function createTreeLazyLoadStateContract(options) {
     const loadedIds = normalizeTreeIds(options.loadedIds, knownIds);
     const errorIds = normalizeTreeIds(options.errorIds, knownIds);
     const retryableIds = normalizeTreeIds(options.retryableIds, knownIds);
+    const loadingSet = new Set(loadingIds);
+    const loadedSet = new Set(loadedIds);
+    const errorSet = new Set(errorIds);
+    const retryableSet = new Set(retryableIds);
     const nodeContracts = options.nodes.map((node) => treeLazyLoadNodeContract(node, {
         disabled,
         error: options.errors?.[node.id],
-        loading: loadingIds.includes(node.id),
-        loaded: loadedIds.includes(node.id),
-        errored: errorIds.includes(node.id),
-        retryable: retryableIds.includes(node.id),
+        loading: loadingSet.has(node.id),
+        loaded: loadedSet.has(node.id),
+        errored: errorSet.has(node.id),
+        retryable: retryableSet.has(node.id),
     }));
     const nodes = options.nodes.map((node, index) => treeNodeWithLazyContract(node, nodeContracts[index]));
     const loadableCount = nodeContracts.filter((node) => node.lazy).length;
@@ -405,9 +409,11 @@ function normalizeTreeIds(ids, knownIds) {
     if (ids === undefined)
         return [];
     const result = [];
+    const seen = new Set();
     for (const id of ids) {
-        if (!knownIds.has(id) || result.includes(id))
+        if (!knownIds.has(id) || seen.has(id))
             continue;
+        seen.add(id);
         result.push(id);
     }
     return result;

package/dist/virtual-list.js

@@ -90,6 +90,7 @@ export function createVirtualListResizeMeasurementContract(options) {
     }))
         .filter((entry) => entry.height !== undefined && Number.isFinite(entry.height) && entry.height > 0)
         .map((entry) => entry.key);
+    const measuredKeySet = new Set(measuredKeys);
     const measuringKeys = uniqueKeys(options.measuringIds ?? []);
     const plans = createDynamicVirtualListPlans(options.getMeasuredItemHeight === undefined
         ? options
@@ -99,7 +100,7 @@ export function createVirtualListResizeMeasurementContract(options) {
         });
     const estimatedKeys = options.items
         .map((_, index) => keyFor(options, index))
-        .filter((key) => !measuredKeys.includes(key));
+        .filter((key) => !measuredKeySet.has(key));
     return {
         plans,
         measuredKeys,
@@ -174,8 +175,7 @@ export function calculateDynamicVirtualListState(options) {
     if (count === 0) {
         return createDynamicState(options, 0, 0, 0, -1, 0, []);
     }
-    const metrics = dynamicItemMetrics(options, estimatedItemHeight);
-    const totalSize = metrics.at(-1)?.end ?? 0;
+    const { metrics, measuredCount, totalSize } = dynamicItemMetrics(options, estimatedItemHeight);
     const viewportHeight = Math.max(0, options.viewportHeight);
     const scrollOffset = clamp(options.scrollOffset ?? 0, 0, Math.max(totalSize - viewportHeight, 0));
     const visibleStart = firstDynamicIndexAfter(metrics, scrollOffset);
@@ -186,7 +186,7 @@ export function calculateDynamicVirtualListState(options) {
     const end = ssrCount === undefined
         ? Math.min(count - 1, visibleEnd + (options.overscan ?? 2))
         : fallbackEnd;
-    return createDynamicState(options, totalSize, scrollOffset, visibleStart, visibleEnd, metrics.filter((metric) => metric.measured).length, dynamicRangeItems(options, metrics, start, end));
+    return createDynamicState(options, totalSize, scrollOffset, visibleStart, visibleEnd, measuredCount, dynamicRangeItems(options, metrics, start, end));
 }
 export function createFixedVirtualListController(options) {
     let current = normalizeControllerOptions(options);
@@ -398,14 +398,17 @@ function dynamicItemFromMetric(options, index, metric) {
 function dynamicItemMetrics(options, estimatedItemHeight) {
     const metrics = [];
     let start = 0;
+    let measuredCount = 0;
     for (let index = 0; index < options.items.length; index++) {
         const measuredHeight = options.getItemHeight?.(options.items[index], index);
         const measured = measuredHeight !== undefined && Number.isFinite(measuredHeight) && measuredHeight > 0;
         const size = measured ? measuredHeight : estimatedItemHeight;
         metrics.push({ start, size, measured, end: start + size });
         start += size;
+        if (measured)
+            measuredCount += 1;
     }
-    return metrics;
+    return { metrics, measuredCount, totalSize: start };
 }
 function createLayoutState(options, rowCount, columnCount, totalWidth, totalHeight, scrollLeft, scrollTop, visibleStartIndex, visibleEndIndex, visibleRowStart, visibleRowEnd, items, visibleColumnStart = 0, visibleColumnEnd = -1) {
     return {
@@ -468,14 +471,28 @@ function layoutItemFromRange(options, index, rowIndex, columnIndex, width, heigh
     };
 }
 function firstDynamicIndexAfter(metrics, offset) {
-    const index = metrics.findIndex((metric) => metric.end > offset);
-    return index === -1 ? Math.max(0, metrics.length - 1) : index;
+    let low = 0;
+    let high = metrics.length;
+    while (low < high) {
+        const mid = low + Math.floor((high - low) / 2);
+        if (metrics[mid].end > offset)
+            high = mid;
+        else
+            low = mid + 1;
+    }
+    return low === metrics.length ? Math.max(0, metrics.length - 1) : low;
 }
 function lastDynamicIndexBefore(metrics, offset) {
-    const index = metrics.findIndex((metric) => metric.start >= offset);
-    if (index === -1)
-        return metrics.length - 1;
-    return Math.max(0, index);
+    let low = 0;
+    let high = metrics.length;
+    while (low < high) {
+        const mid = low + Math.floor((high - low) / 2);
+        if (metrics[mid].start >= offset)
+            high = mid;
+        else
+            low = mid + 1;
+    }
+    return low === metrics.length ? metrics.length - 1 : Math.max(0, low);
 }
 function normalizeControllerOptions(options) {
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vobs/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Optional design tokens, layouts and UI components for vobs.",
   "type": "module",
   "publishConfig": {
@@ -41,6 +41,14 @@
       "types": "./dist/data-display.d.ts",
       "import": "./dist/data-display.js"
     },
+    "./page-state": {
+      "types": "./dist/page-state.d.ts",
+      "import": "./dist/page-state.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog.d.ts",
+      "import": "./dist/dialog.js"
+    },
     "./icons": {
       "types": "./dist/icons.d.ts",
       "import": "./dist/icons.js"
@@ -96,18 +104,18 @@
   "main": "./dist/index.js",
   "dependencies": {
     "@tanstack/virtual-core": "^3.17.7",
-    "@vobs/forms": "0.1.0",
-    "@vobs/i18n": "0.1.0",
-    "@vobs/icons": "0.1.0",
-    "@vobs/runtime-dom": "0.1.0",
-    "@vobs/router": "0.1.0",
-    "@vobs/server-renderer": "0.1.0",
-    "@vobs/reactivity": "0.1.0"
+    "@vobs/icons": "0.3.0",
+    "@vobs/i18n": "0.3.0",
+    "@vobs/forms": "0.3.0",
+    "@vobs/runtime-dom": "0.3.0",
+    "@vobs/router": "0.3.0",
+    "@vobs/reactivity": "0.3.0",
+    "@vobs/server-renderer": "0.3.0"
   },
   "sideEffects": [
     "./dist/*.css"
   ],
   "engines": {
-    "node": ">=20.19.0"
+    "node": ">=22.12.0"
   }
 }