@vertebr/react 0.3.0 → 0.5.0

package/dist/styles/nav.css

@@ -9,7 +9,7 @@
 .vertebr-nav-group {
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.2rem;
 }
 
 .vertebr-nav-label {
@@ -44,6 +44,47 @@
     box-shadow 120ms ease;
 }
 
+.vertebr-nav-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.vertebr-nav-parent {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  gap: 0.15rem;
+}
+
+.vertebr-nav-parent-label {
+  min-width: 0;
+}
+
+.vertebr-nav-parent-toggle {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem !important;
+  min-width: 1.75rem;
+  margin: 0.1rem 0.15rem 0.1rem 0 !important;
+  padding: 0 !important;
+  border-radius: 7px !important;
+  color: var(--vb-text-subtle) !important;
+  font-size: 0.62rem !important;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.vertebr-nav-parent-toggle:hover {
+  background: var(--vb-bg-muted) !important;
+  color: var(--vb-text) !important;
+}
+
+.vertebr-nav-item[data-open="true"] .vertebr-nav-parent-toggle {
+  color: var(--vb-text-muted) !important;
+}
+
 .vertebr-nav button:hover {
   background: var(--vb-bg-muted);
   color: var(--vb-text);
@@ -56,6 +97,67 @@
   font-weight: 500;
 }
 
+.vertebr-nav-parent-label[data-section="true"] {
+  color: var(--vb-text);
+  font-weight: 600;
+  background: transparent;
+  box-shadow: none;
+}
+
+.vertebr-nav-parent-label[data-section="true"]:hover {
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-nav-parent-label[data-section="true"][data-active="true"] {
+  background: var(--vb-accent-soft);
+  box-shadow: inset 2px 0 0 var(--vb-accent);
+  color: var(--vb-accent);
+  font-weight: 500;
+}
+
+.vertebr-nav-sub {
+  display: flex;
+  flex-direction: column;
+  gap: 0.12rem;
+  margin: 0.28rem 0 0.35rem 0.85rem;
+  padding: 0.1rem 0 0.1rem 0.75rem;
+  border-left: 1px solid
+    color-mix(in srgb, var(--vb-border) 70%, var(--vb-text-subtle) 30%);
+}
+
+.vertebr-nav-subitem {
+  font-size: 0.8rem !important;
+  padding: 0.4rem 0.7rem !important;
+  border-radius: 8px !important;
+  color: var(--vb-text-subtle) !important;
+  font-weight: 450 !important;
+  letter-spacing: 0.01em;
+}
+
+.vertebr-nav-subitem:hover {
+  background: var(--vb-bg-muted) !important;
+  color: var(--vb-text) !important;
+  box-shadow: none !important;
+}
+
+.vertebr-nav-subitem[data-active="true"] {
+  background: var(--vb-accent-soft) !important;
+  box-shadow: none !important;
+  color: var(--vb-text) !important;
+  font-weight: 560 !important;
+}
+
+.vertebr-nav-subitem[data-active="true"]::before {
+  content: "";
+  position: absolute;
+  left: -0.75rem;
+  top: 0.35rem;
+  bottom: 0.35rem;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--vb-accent);
+}
+
 .vertebr-nav button:focus-visible,
 .vertebr-btn:focus-visible {
   outline: none;

package/dist/styles/panel.css

@@ -2,6 +2,7 @@
 
 .vertebr-panel {
   flex: 1 1 auto;
+  min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -33,6 +34,12 @@
   color: var(--vb-text-subtle);
 }
 
+.vertebr-panel-head-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
 .vertebr-count {
   font-family: var(--vb-mono);
   font-size: 0.7rem;
@@ -44,6 +51,7 @@
 
 .vertebr-resource-body {
   flex: 1 1 auto;
+  min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -103,74 +111,6 @@
   white-space: nowrap;
 }
 
-.vertebr-metrics {
-  flex: 1 1 auto;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.vertebr-metrics-grid {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 1rem;
-  align-content: start;
-  padding: 1.35rem 1.5rem 1.5rem;
-}
-
-.vertebr-metric-card {
-  border: 1px solid var(--vb-border);
-  border-radius: var(--vb-radius);
-  background: var(--vb-surface-tint);
-  padding: 1rem 1.05rem 1.1rem;
-  min-height: 110px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.vertebr-metric-card[data-tone="ok"] {
-  border-color: color-mix(in srgb, var(--vb-ok) 40%, transparent);
-  background: var(--vb-ok-soft);
-}
-
-.vertebr-metric-card[data-tone="warn"] {
-  border-color: color-mix(in srgb, var(--vb-accent) 40%, transparent);
-  background: var(--vb-accent-soft);
-}
-
-.vertebr-metric-card[data-tone="danger"] {
-  border-color: color-mix(in srgb, var(--vb-danger) 40%, transparent);
-  background: var(--vb-danger-soft);
-}
-
-.vertebr-metric-label {
-  margin: 0;
-  font-size: 0.72rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  font-family: var(--vb-mono);
-  color: var(--vb-text-subtle);
-}
-
-.vertebr-metric-value {
-  margin: 0;
-  font-size: 1.75rem;
-  font-weight: 600;
-  letter-spacing: -0.03em;
-  line-height: 1.1;
-}
-
-.vertebr-metric-hint {
-  margin: 0.15rem 0 0;
-  font-size: 0.78rem;
-  color: var(--vb-text-muted);
-  line-height: 1.35;
-}
-
 .vertebr-resource-edit {
   flex: 1 1 auto;
   min-height: 0;

package/dist/styles/table.css

@@ -5,9 +5,11 @@
   min-height: 0;
   min-width: 0;
   max-width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: auto;
   overscroll-behavior-inline: contain;
   scrollbar-gutter: stable;
+  scrollbar-width: thin;
 }
 
 .vertebr-table {
@@ -21,11 +23,13 @@
 
 .vertebr-table th,
 .vertebr-table td {
-  padding: 0.85rem 1rem;
+  padding: 0.7rem 0.9rem;
   border-bottom: 1px solid var(--vb-border);
   text-align: left;
   vertical-align: middle;
   white-space: nowrap;
+  overflow: hidden;
+  max-width: 16rem;
 }
 
 .vertebr-table th:not(.vertebr-col-actions),
@@ -50,10 +54,27 @@
   transition: background 100ms ease;
 }
 
-.vertebr-table tbody tr:hover {
+.vertebr-table tbody tr[data-selected="true"] {
   background: var(--vb-surface-tint);
 }
 
+.vertebr-table th.vertebr-col-select,
+.vertebr-table td.vertebr-col-select {
+  width: 2.4rem;
+  min-width: 2.4rem;
+  max-width: 2.4rem;
+  padding-left: 0.85rem;
+  padding-right: 0.4rem;
+}
+
+.vertebr-row-check {
+  width: 0.95rem;
+  height: 0.95rem;
+  margin: 0;
+  accent-color: var(--vb-accent);
+  cursor: pointer;
+}
+
 .vertebr-table-row-clickable {
   cursor: pointer;
 }
@@ -70,6 +91,8 @@
   z-index: 2;
   width: 1%;
   min-width: 7.5rem;
+  max-width: none;
+  overflow: visible;
   padding-left: 0.75rem;
   padding-right: 0.85rem;
   background: var(--vb-bg-elevated);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertebr/react",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Vertebr admin dashboard UI",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,7 +18,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json && rm -rf dist/styles dist/themes && cp src/styles.css dist/styles.css && cp -R src/styles dist/styles && cp -R src/themes dist/themes",
+    "build": "rm -rf dist && tsc -p tsconfig.json && cp src/styles.css dist/styles.css && cp -R src/styles dist/styles && cp -R src/themes dist/themes",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "prepublishOnly": "npm run typecheck && npm run build"
   },

package/dist/components/config/form/helpers.d.ts

@@ -1,16 +0,0 @@
-import { z } from "zod";
-import type { FieldSchema } from "@vertebr/client";
-import type { ConfigFormVariant, FieldGroup } from "./types";
-export declare function buildZodSchema(schema: Record<string, FieldSchema>): z.ZodObject<Record<string, z.ZodTypeAny>, "strip", z.ZodTypeAny, {
-    [x: string]: any;
-}, {
-    [x: string]: any;
-}>;
-export declare function humanizeKey(key: string): string;
-export declare function isStockField(key: string, field?: FieldSchema): boolean;
-export declare function spanFor(key: string, field: FieldSchema, variant: ConfigFormVariant): "wide" | "full" | undefined;
-export declare function displayLabel(key: string, field: FieldSchema, group: string): string;
-export declare function groupFields(schema: Record<string, FieldSchema>, variant: ConfigFormVariant): FieldGroup[];
-export declare function firstImageUrl(value: unknown): string | null;
-export declare function findPrimaryImageKey(schema: Record<string, FieldSchema>, values: Record<string, unknown> | undefined): string | null;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/components/config/form/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EACV,iBAAiB,EAEjB,UAAU,EACX,MAAM,SAAS,CAAC;AAWjB,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC;;;;GAyBjE;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAK/C;AAMD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,OAAO,CAGtE;AAED,wBAAgB,OAAO,CACrB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,iBAAiB,GACzB,MAAM,GAAG,MAAM,GAAG,SAAS,CAK7B;AA0CD,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,MAAM,GACZ,MAAM,CAcR;AAgBD,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,OAAO,EAAE,iBAAiB,GACzB,UAAU,EAAE,CA4Cd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAU3D;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAC1C,MAAM,GAAG,IAAI,CASf"}

package/dist/components/config/form/helpers.js

@@ -1,186 +0,0 @@
-import { z } from "zod";
-import { isDescriptionField } from "../../../lib/description";
-import { isImageField, looksLikeUrl } from "../../../lib/images";
-const RECORD_GROUP_ORDER = [
-    "Details",
-    "Content",
-    "Pricing",
-    "Inventory",
-    "Media",
-    "Status",
-];
-export function buildZodSchema(schema) {
-    const shape = {};
-    for (const [key, field] of Object.entries(schema)) {
-        let zodField;
-        switch (field.type) {
-            case "number":
-                zodField = z.number();
-                if (field.min != null)
-                    zodField = zodField.min(field.min);
-                if (field.max != null)
-                    zodField = zodField.max(field.max);
-                break;
-            case "boolean":
-                zodField = z.boolean();
-                break;
-            case "file[]":
-                zodField = z.array(z.string());
-                break;
-            default:
-                zodField = z.string();
-        }
-        if (!field.required) {
-            zodField = zodField.optional();
-        }
-        shape[key] = zodField;
-    }
-    return z.object(shape);
-}
-export function humanizeKey(key) {
-    return key
-        .replace(/([a-z])([A-Z])/g, "$1 $2")
-        .replace(/[_-]+/g, " ")
-        .trim();
-}
-function escapeRegExp(value) {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-export function isStockField(key, field) {
-    const hay = `${key} ${field?.label ?? ""}`;
-    return /(stock|inventory|qty|quantity)/i.test(hay);
-}
-export function spanFor(key, field, variant) {
-    if (field.type === "boolean")
-        return "full";
-    if (field.type === "richtext" || isDescriptionField(key, field))
-        return "full";
-    if (variant === "record" && isImageField(key, field))
-        return "full";
-    return undefined;
-}
-function inferConfigGroup(key, field) {
-    if (field.group?.trim())
-        return field.group.trim();
-    const source = field.label?.trim() || humanizeKey(key);
-    const words = source.split(/\s+/).filter(Boolean);
-    if (words.length >= 2)
-        return words[0];
-    return "General";
-}
-function inferRecordGroup(key, field) {
-    if (field.group?.trim())
-        return field.group.trim();
-    const k = key.toLowerCase();
-    const label = (field.label ?? "").toLowerCase();
-    const hay = `${k} ${label}`;
-    if (/(image|img|photo|avatar|thumbnail|thumb|cover|media_url)/i.test(hay)) {
-        return "Media";
-    }
-    if (/(price|cost|cents|amount|msrp)/i.test(hay)) {
-        return "Pricing";
-    }
-    if (/(stock|inventory|qty|quantity)/i.test(hay)) {
-        return "Inventory";
-    }
-    if (field.type === "boolean" ||
-        /(^|_)(active|enabled|published|status|visible)(_|$)/i.test(k) ||
-        /^(active|enabled|published|status|visible)$/i.test(label)) {
-        return "Status";
-    }
-    if (field.type === "richtext" ||
-        /(description|body|content|summary|bio)/i.test(hay)) {
-        return "Content";
-    }
-    return "Details";
-}
-export function displayLabel(key, field, group) {
-    const label = field.label?.trim() || humanizeKey(key);
-    const stripped = label.replace(new RegExp(`^${escapeRegExp(group)}\\s+`, "i"), "");
-    if (/^inventory$/i.test(group)) {
-        const stock = label.replace(/^stock\s+/i, "").trim();
-        if (stock && stock !== label)
-            return stock;
-    }
-    if (/^pricing$/i.test(group) && /cents/i.test(label)) {
-        return label.replace(/\s*\(cents\)/i, "").trim() || label;
-    }
-    return stripped || label;
-}
-function sortGroups(groups, variant) {
-    if (variant !== "record")
-        return groups;
-    const rank = (id) => {
-        const index = RECORD_GROUP_ORDER.indexOf(id);
-        return index === -1 ? RECORD_GROUP_ORDER.length + 1 : index;
-    };
-    return [...groups].sort((a, b) => rank(a.id) - rank(b.id));
-}
-export function groupFields(schema, variant) {
-    const order = [];
-    const map = new Map();
-    const explicit = new Set();
-    for (const entry of Object.entries(schema)) {
-        const [key, field] = entry;
-        const group = variant === "record"
-            ? inferRecordGroup(key, field)
-            : inferConfigGroup(key, field);
-        if (field.group?.trim())
-            explicit.add(group);
-        if (!map.has(group)) {
-            map.set(group, []);
-            order.push(group);
-        }
-        map.get(group).push(entry);
-    }
-    if (variant === "config") {
-        for (const [group, fields] of [...map.entries()]) {
-            if (fields.length > 1 || explicit.has(group) || group === "General") {
-                continue;
-            }
-            if (!map.has("General")) {
-                map.set("General", []);
-                order.unshift("General");
-            }
-            map.get("General").push(...fields);
-            map.delete(group);
-            const idx = order.indexOf(group);
-            if (idx >= 0)
-                order.splice(idx, 1);
-        }
-    }
-    const groups = order
-        .filter((id) => map.has(id))
-        .map((id) => ({
-        id,
-        label: id,
-        fields: map.get(id),
-    }));
-    return sortGroups(groups, variant);
-}
-export function firstImageUrl(value) {
-    const items = Array.isArray(value) ? value : [value];
-    for (const item of items) {
-        if (typeof item === "string" && looksLikeUrl(item))
-            return item;
-        if (item && typeof item === "object" && "url" in item) {
-            const url = item.url;
-            if (typeof url === "string" && looksLikeUrl(url))
-                return url;
-        }
-    }
-    return null;
-}
-export function findPrimaryImageKey(schema, values) {
-    for (const [key, field] of Object.entries(schema)) {
-        if (!isImageField(key, field))
-            continue;
-        if (firstImageUrl(values?.[key]))
-            return key;
-    }
-    for (const [key, field] of Object.entries(schema)) {
-        if (isImageField(key, field))
-            return key;
-    }
-    return null;
-}