@vertebr/react 0.2.0 → 0.3.0

package/dist/lib/images.js

@@ -0,0 +1,63 @@
+function looksLikeUrl(value) {
+    return /^https?:\/\//i.test(value) || value.startsWith("//");
+}
+export function isImageField(key, field) {
+    if (field?.type === "file[]")
+        return true;
+    const hay = `${key} ${field?.label ?? ""}`;
+    return /(image|img|photo|avatar|thumbnail|thumb|cover)/i.test(hay);
+}
+function urlFromUnknown(value) {
+    if (typeof value === "string" && looksLikeUrl(value)) {
+        return { url: value };
+    }
+    if (value && typeof value === "object" && "url" in value) {
+        const url = value.url;
+        const name = value.name;
+        if (typeof url === "string" && looksLikeUrl(url)) {
+            return {
+                url,
+                name: typeof name === "string" ? name : undefined,
+            };
+        }
+    }
+    return null;
+}
+/** Flatten record image fields (single URL or URL lists) for the editor picker. */
+export function collectRecordImages(schema, values) {
+    const images = [];
+    for (const [key, field] of Object.entries(schema)) {
+        if (!isImageField(key, field))
+            continue;
+        const label = field.label?.trim() || key;
+        const value = values?.[key];
+        const items = Array.isArray(value) ? value : [value];
+        items.forEach((item, index) => {
+            const parsed = urlFromUnknown(item);
+            if (!parsed)
+                return;
+            images.push({
+                id: `${key}:${index}`,
+                url: parsed.url,
+                name: parsed.name || (items.length > 1 ? `${label} ${index + 1}` : label),
+                field: key,
+            });
+        });
+    }
+    return images;
+}
+export function urlsFromValue(value) {
+    const items = Array.isArray(value)
+        ? value
+        : value == null || value === ""
+            ? []
+            : [value];
+    const urls = [];
+    for (const item of items) {
+        const parsed = urlFromUnknown(item);
+        if (parsed)
+            urls.push(parsed.url);
+    }
+    return urls;
+}
+export { looksLikeUrl };

package/dist/lib/price.d.ts

@@ -0,0 +1,15 @@
+import type { FieldSchema } from "@vertebr/client";
+export declare function isCentsField(key: string, field?: Pick<FieldSchema, "label">): boolean;
+export declare function isPriceField(key: string, field?: Pick<FieldSchema, "label">): boolean;
+export declare function dollarsFromStored(value: number, asCents: boolean): number;
+export declare function storedFromDollars(dollars: number, asCents: boolean): number;
+/** Format a stored number for display (`3800` cents → `$38.00`). */
+export declare function formatPrice(value: number, options?: {
+    asCents?: boolean;
+    currency?: string;
+}): string;
+/** Value shown in an editable money input (`3800` → `38.00`). */
+export declare function formatPriceInput(value: unknown, asCents?: boolean): string;
+/** Parse typed money (`$38`, `38.00`, `38`) back to stored units. */
+export declare function parsePriceInput(raw: string, asCents?: boolean): number | undefined;
+//# sourceMappingURL=price.d.ts.map

package/dist/lib/price.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../src/lib/price.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GACjC,OAAO,CAET;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GACjC,OAAO,CAGT;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAEzE;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAE3E;AAED,oEAAoE;AACpE,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD,MAAM,CAcR;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,OAAO,EACd,OAAO,UAAO,GACb,MAAM,CAGR;AAED,qEAAqE;AACrE,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,EACX,OAAO,UAAO,GACb,MAAM,GAAG,SAAS,CAQpB"}

package/dist/lib/price.js

@@ -0,0 +1,50 @@
+const CENTS_KEY = /(cents|priceCents|amountCents)/i;
+const PRICE_KEY = /(price|amount|cost|total|msrp)/i;
+export function isCentsField(key, field) {
+    return CENTS_KEY.test(key) || /cents/i.test(field?.label ?? "");
+}
+export function isPriceField(key, field) {
+    if (isCentsField(key, field))
+        return true;
+    return PRICE_KEY.test(key) || PRICE_KEY.test(field?.label ?? "");
+}
+export function dollarsFromStored(value, asCents) {
+    return asCents ? value / 100 : value;
+}
+export function storedFromDollars(dollars, asCents) {
+    return asCents ? Math.round(dollars * 100) : dollars;
+}
+/** Format a stored number for display (`3800` cents → `$38.00`). */
+export function formatPrice(value, options) {
+    const asCents = options?.asCents ?? true;
+    const currency = options?.currency ?? "USD";
+    const amount = dollarsFromStored(value, asCents);
+    try {
+        return new Intl.NumberFormat(undefined, {
+            style: "currency",
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(amount);
+    }
+    catch {
+        return `$${amount.toFixed(2)}`;
+    }
+}
+/** Value shown in an editable money input (`3800` → `38.00`). */
+export function formatPriceInput(value, asCents = true) {
+    if (typeof value !== "number" || !Number.isFinite(value))
+        return "";
+    return dollarsFromStored(value, asCents).toFixed(2);
+}
+/** Parse typed money (`$38`, `38.00`, `38`) back to stored units. */
+export function parsePriceInput(raw, asCents = true) {
+    const cleaned = raw.replace(/[^0-9.-]/g, "");
+    if (!cleaned || cleaned === "-" || cleaned === "." || cleaned === "-.") {
+        return undefined;
+    }
+    const dollars = Number(cleaned);
+    if (!Number.isFinite(dollars))
+        return undefined;
+    return storedFromDollars(dollars, asCents);
+}

package/dist/styles/form.css

@@ -234,6 +234,252 @@
   padding-top: 0.65rem;
 }
 
+.vertebr-field-money {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: stretch;
+}
+
+.vertebr-field-money-prefix {
+  display: grid;
+  place-items: center;
+  padding: 0 0.7rem;
+  border: 1px solid var(--vb-border);
+  border-right: 0;
+  border-radius: var(--vb-radius-sm) 0 0 var(--vb-radius-sm);
+  background: var(--vb-surface-tint);
+  color: var(--vb-text-muted);
+  font-family: var(--vb-mono);
+  font-size: 0.86rem;
+}
+
+.vertebr-field-money input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--vb-mono);
+}
+
+.vertebr-field-prose {
+  display: grid;
+  gap: 0;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-sm);
+  background: var(--vb-bg);
+  overflow: hidden;
+}
+
+.vertebr-md-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.35rem 0.4rem;
+  border-bottom: 1px solid var(--vb-border);
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-md-btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--vb-text-muted);
+  border-radius: 5px;
+  min-width: 1.7rem;
+  height: 1.7rem;
+  padding: 0 0.4rem;
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.vertebr-md-btn:hover:not(:disabled) {
+  background: var(--vb-bg-hover);
+  color: var(--vb-text);
+}
+
+.vertebr-md-btn[data-active="true"] {
+  background: var(--vb-bg-hover);
+  color: var(--vb-text);
+}
+
+.vertebr-md-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.vertebr-md-glyph {
+  font-weight: 700;
+}
+
+.vertebr-md-italic {
+  font-style: italic;
+  font-family: Georgia, "Times New Roman", serif;
+}
+
+.vertebr-md-strike {
+  text-decoration: line-through;
+}
+
+.vertebr-md-sep {
+  width: 1px;
+  height: 1rem;
+  margin: 0 0.25rem;
+  background: var(--vb-border);
+}
+
+.vertebr-field-prose textarea,
+.vertebr-md-content {
+  resize: none;
+  min-height: 7.5rem;
+  overflow: hidden;
+  line-height: 1.55;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.vertebr-md-content {
+  padding: 0.65rem 0.75rem;
+  outline: none;
+  color: var(--vb-text);
+}
+
+.vertebr-md-content p {
+  margin: 0 0 0.65em;
+}
+
+.vertebr-md-content p:last-child {
+  margin-bottom: 0;
+}
+
+.vertebr-md-content h2,
+.vertebr-md-content h3 {
+  margin: 0.85em 0 0.4em;
+  font-size: 1.05em;
+  font-weight: 650;
+  line-height: 1.3;
+}
+
+.vertebr-md-content ul,
+.vertebr-md-content ol {
+  margin: 0.35em 0 0.65em;
+  padding-left: 1.3rem;
+}
+
+.vertebr-md-content a {
+  color: var(--vb-accent);
+}
+
+.vertebr-md-content s {
+  text-decoration: line-through;
+}
+
+.vertebr-md-content code {
+  font-family: var(--vb-mono);
+  font-size: 0.86em;
+  padding: 0.08em 0.32em;
+  border-radius: 4px;
+  background: var(--vb-surface-tint);
+  border: 1px solid var(--vb-border);
+}
+
+.vertebr-md-content pre {
+  margin: 0.45em 0 0.7em;
+  padding: 0.65rem 0.75rem;
+  overflow: auto;
+  border-radius: 6px;
+  background: var(--vb-surface-tint);
+  border: 1px solid var(--vb-border);
+}
+
+.vertebr-md-content pre code {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.vertebr-md-content blockquote {
+  margin: 0.45em 0 0.7em;
+  padding: 0.15rem 0 0.15rem 0.75rem;
+  border-left: 2px solid var(--vb-accent-dim);
+  color: var(--vb-text-muted);
+}
+
+.vertebr-md-content img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0.5em 0;
+  border-radius: 8px;
+  border: 1px solid var(--vb-border);
+}
+
+.vertebr-md-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5em 0 0.75em;
+  font-size: 0.88em;
+}
+
+.vertebr-md-content th,
+.vertebr-md-content td {
+  border: 1px solid var(--vb-border);
+  padding: 0.35rem 0.5rem;
+  vertical-align: top;
+  min-width: 4rem;
+}
+
+.vertebr-md-content th {
+  background: var(--vb-surface-tint);
+  font-weight: 650;
+  text-align: left;
+}
+
+.vertebr-md-content .selectedCell::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--vb-accent-soft);
+  pointer-events: none;
+}
+
+.vertebr-md-content td,
+.vertebr-md-content th {
+  position: relative;
+}
+
+.vertebr-md-content p.is-editor-empty:first-child::before {
+  color: var(--vb-text-subtle);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.vertebr-field-prose textarea:focus,
+.vertebr-md-content:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.vertebr-field-prose:focus-within {
+  border-color: var(--vb-accent-dim);
+  box-shadow: 0 0 0 3px var(--vb-accent-soft);
+}
+
+.vertebr-field-prose-meta {
+  margin: 0;
+  padding: 0.35rem 0.7rem 0.45rem;
+  border-top: 1px solid var(--vb-border);
+  font-family: var(--vb-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.04em;
+  color: var(--vb-text-subtle);
+  background: var(--vb-surface-tint);
+}
+
 .vertebr-field input:hover,
 .vertebr-field textarea:hover {
   border-color: var(--vb-border-strong);
@@ -269,6 +515,35 @@
   background: var(--vb-bg-muted);
 }
 
+.vertebr-field-files-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
+  gap: 0.55rem;
+}
+
+.vertebr-field-files-list li {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.vertebr-field-files-list img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: var(--vb-radius);
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-field-files-empty {
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--vb-text-subtle);
+}
+
 .vertebr-field[data-kind="image"] {
   grid-column: 1 / -1;
 }

package/dist/styles/modal.css

@@ -108,3 +108,118 @@
   margin: 0;
   min-width: 0;
 }
+
+.vertebr-picker-body {
+  gap: 0.95rem;
+}
+
+.vertebr-picker-tabs {
+  display: flex;
+  gap: 0.35rem;
+  padding: 0.2rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 8px;
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-picker-tabs button {
+  appearance: none;
+  flex: 1 1 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  border: 0;
+  background: transparent;
+  color: var(--vb-text-muted);
+  border-radius: 6px;
+  padding: 0.4rem 0.55rem;
+  font: inherit;
+  font-size: 0.82rem;
+  cursor: pointer;
+}
+
+.vertebr-picker-tabs button[data-active="true"] {
+  background: var(--vb-bg-elevated);
+  color: var(--vb-text);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--vb-text) 8%, transparent);
+}
+
+.vertebr-picker-tabs span {
+  font-family: var(--vb-mono);
+  font-size: 0.68rem;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-picker-url {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.5rem;
+}
+
+.vertebr-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  gap: 0.7rem;
+}
+
+.vertebr-picker-tile {
+  appearance: none;
+  display: grid;
+  gap: 0.4rem;
+  padding: 0.45rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 10px;
+  background: var(--vb-bg);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.vertebr-picker-tile:hover {
+  border-color: var(--vb-border-strong);
+}
+
+.vertebr-picker-tile[data-selected="true"] {
+  border-color: var(--vb-accent-dim);
+  box-shadow: 0 0 0 3px var(--vb-accent-soft);
+}
+
+.vertebr-picker-thumb {
+  display: block;
+  aspect-ratio: 1;
+  border-radius: 7px;
+  overflow: hidden;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-picker-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.vertebr-picker-name {
+  font-size: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vertebr-picker-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.85rem 1.25rem 1.05rem;
+  border-top: 1px solid var(--vb-border);
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-picker-count {
+  font-family: var(--vb-mono);
+  font-size: 0.72rem;
+  color: var(--vb-text-subtle);
+}

package/dist/styles/panel.css

@@ -53,7 +53,7 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   gap: 0.5rem;
   padding: 0.55rem 1rem;
   border-bottom: 1px solid var(--vb-border);
@@ -67,6 +67,17 @@
   flex-wrap: wrap;
 }
 
+.vertebr-table-scroll-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  margin-left: auto;
+}
+
+.vertebr-table-scroll-btn {
+  padding: 0.3rem 0.45rem;
+}
+
 .vertebr-btn-icon {
   display: inline-flex;
   align-items: center;

package/dist/styles/table.css

@@ -3,12 +3,16 @@
 .vertebr-table-wrap {
   flex: 1 1 auto;
   min-height: 0;
+  min-width: 0;
   max-width: 100%;
   overflow: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-gutter: stable;
 }
 
 .vertebr-table {
-  width: 100%;
+  width: max-content;
+  min-width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   font-size: 0.9rem;
@@ -24,6 +28,11 @@
   white-space: nowrap;
 }
 
+.vertebr-table th:not(.vertebr-col-actions),
+.vertebr-table td:not(.vertebr-col-actions) {
+  min-width: 6.5rem;
+}
+
 .vertebr-table th {
   position: sticky;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertebr/react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Vertebr admin dashboard UI",
   "type": "module",
   "main": "./dist/index.js",
@@ -36,13 +36,20 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@vertebr/client": "*",
     "@hookform/resolvers": "^5.2.1",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.3.7",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-switch": "^1.2.5",
     "@tanstack/react-table": "^8.21.3",
+    "@tiptap/extension-image": "^3.29.2",
+    "@tiptap/extension-table": "^3.29.2",
+    "@tiptap/extensions": "^3.29.2",
+    "@tiptap/markdown": "^3.29.2",
+    "@tiptap/pm": "^3.29.2",
+    "@tiptap/react": "^3.29.2",
+    "@tiptap/starter-kit": "^3.29.2",
+    "@vertebr/client": "*",
     "react-hook-form": "^7.62.0",
     "zod": "^3.25.76"
   },