@dbcdk/react-components 0.0.9 → 0.0.12

package/dist/styles/styles.css

@@ -30,6 +30,8 @@ body {
   color: var(--color-fg-default);
   background-color: var(--color-bg-page);
   --density: var(--density-comfortable);
+  font-size: var(--font-size-sm);
+  margin: 0;
 }
 
 h1 {
@@ -45,7 +47,7 @@ h3 {
 }
 
 h4 {
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
 }
 
@@ -53,46 +55,79 @@ body.dbc-app {
   max-width: 1600px;
 }
 
+.dbc-font-mono {
+  font-family: monospace;
+}
+
 .dbc-table {
   --card-label-width: 260px;
+
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  tr + tr th,
-  tr + tr td {
-    padding-block: var(--spacing-xxs);
-  }
+}
 
-  th {
-    white-space: nowrap;
-    color: var(--color-fg-subtle);
-    font-weight: var(--font-weight-default);
-    padding-right: var(--spacing-lg);
-    vertical-align: top;
-    text-align: left;
-  }
+.dbc-table tr + tr th,
+.dbc-table tr + tr td {
+  padding-block: var(--spacing-xxs);
+}
 
-  td {
-    color: var(--color-fg-default);
-    vertical-align: top;
-    min-width: 0;
-  }
+/* LABELS (th) → match .metaLabel */
+.dbc-table th {
+  white-space: nowrap;
+  text-align: left;
+  vertical-align: top;
+  max-width: var(--card-label-width);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-subtle);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  font-weight: var(--font-weight-default);
+  padding-right: var(--spacing-lg);
+}
 
-  th {
-    max-width: var(--card-label-width);
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+/* VALUES (td) → match .metaValue */
+.dbc-table td {
+  vertical-align: top;
+  min-width: 0;
+
+  margin: 0; /* harmless on td, keeps parity with metaValue */
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+  font-weight: var(--font-weight-medium);
+
+  word-break: break-word;
+}
+
+/* Optional: baseline alignment closer to metaRow */
+.dbc-table th,
+.dbc-table td {
+  vertical-align: baseline;
+}
+
+.dbc-full-width {
+  width: 100%;
+}
+
+.dbc-highlight {
+  background-color: var(--color-status-warning-bg);
+}
+
+.dbc-muted-text {
+  color: var(--color-fg-subtle);
 }
 
 .dbc-table--bordered {
   width: auto;
-  border: 1px solid var(--color-border-default);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-collapse: collapse;
 }
 
 .dbc-table--bordered th,
 .dbc-table--bordered td {
-  border: 1px solid var(--color-border-default);
+  border: var(--border-width-thin) solid var(--color-border-default);
   padding: var(--spacing-xs) var(--spacing-sm);
 }
 

package/dist/styles/themes/dbc/dark.css

@@ -215,7 +215,7 @@ html[data-theme='dark'] {
   --component-size-md: 36px;
   --component-size-lg: 44px;
   --component-size-xl: 435px;
-  --sidebar-width: 200px;
+  --sidebar-width: 180px;
 
   /* Control paddings */
   --control-padding-x: 12px;

package/dist/styles/themes/dbc/light.css

@@ -202,12 +202,13 @@ html[data-theme='light'] {
   --icon-size-md: 20px;
   --icon-size-lg: 24px;
 
+  --component-size-xxs: 12px;
   --component-size-xs: 20px;
   --component-size-sm: 30px;
   --component-size-md: 36px;
   --component-size-lg: 44px;
   --component-size-xl: 435px;
-  --sidebar-width: 200px;
+  --sidebar-width: 180px;
 
   /* Control paddings */
   --control-padding-x: 12px;

package/dist/utils/localStorage.utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Safely read from localStorage.
+ * - Returns undefined if not in browser
+ * - Returns parsed JSON if value is JSON
+ * - Returns plain string if not JSON
+ * - Never throws
+ */
+export declare function readLocalStorage<T = unknown>(key: string): T | string | undefined;
+/**
+ * Safely write to localStorage.
+ * - Automatically JSON.stringifies objects/arrays
+ * - Stores plain strings as-is
+ * - Never throws
+ */
+export declare function writeLocalStorage(key: string, value: unknown): void;
+/**
+ * Remove key safely
+ */
+export declare function removeLocalStorage(key: string): void;

package/dist/utils/localStorage.utils.js

@@ -0,0 +1,78 @@
+function isBrowser() {
+    return typeof window !== 'undefined' && typeof window.localStorage !== 'undefined';
+}
+/**
+ * Safely read from localStorage.
+ * - Returns undefined if not in browser
+ * - Returns parsed JSON if value is JSON
+ * - Returns plain string if not JSON
+ * - Never throws
+ */
+export function readLocalStorage(key) {
+    if (!isBrowser())
+        return undefined;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (raw == null)
+            return undefined;
+        // Try parse once
+        try {
+            const parsed = JSON.parse(raw);
+            // Handle double-stringified JSON
+            if (typeof parsed === 'string') {
+                try {
+                    return JSON.parse(parsed);
+                }
+                catch {
+                    return parsed;
+                }
+            }
+            return parsed;
+        }
+        catch {
+            // Not JSON — return as plain string
+            return raw;
+        }
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Safely write to localStorage.
+ * - Automatically JSON.stringifies objects/arrays
+ * - Stores plain strings as-is
+ * - Never throws
+ */
+export function writeLocalStorage(key, value) {
+    if (!isBrowser())
+        return;
+    try {
+        if (value === undefined) {
+            window.localStorage.removeItem(key);
+            return;
+        }
+        if (typeof value === 'string') {
+            window.localStorage.setItem(key, value);
+        }
+        else {
+            window.localStorage.setItem(key, JSON.stringify(value));
+        }
+    }
+    catch {
+        // ignore quota errors etc.
+    }
+}
+/**
+ * Remove key safely
+ */
+export function removeLocalStorage(key) {
+    if (!isBrowser())
+        return;
+    try {
+        window.localStorage.removeItem(key);
+    }
+    catch {
+        // ignore
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",