@vertebr/react 0.1.1 → 0.3.0

package/dist/lib/description.js

@@ -0,0 +1,85 @@
+const DESCRIPTION_KEY = /(description|body|content|summary|bio|copy|caption|details)/i;
+export function isDescriptionField(key, field) {
+    if (field?.type === "richtext")
+        return true;
+    const hay = `${key} ${field?.label ?? ""}`;
+    return DESCRIPTION_KEY.test(hay);
+}
+export function descriptionStats(value) {
+    const text = typeof value === "string" ? value.trim() : "";
+    if (!text)
+        return { characters: 0, words: 0 };
+    return {
+        characters: text.length,
+        words: text.split(/\s+/).filter(Boolean).length,
+    };
+}
+function wrap(text, start, end, before, after, placeholder) {
+    const selected = text.slice(start, end) || placeholder;
+    const inserted = before + selected + after;
+    return {
+        next: text.slice(0, start) + inserted + text.slice(end),
+        inserted,
+        replaceStart: start,
+        replaceEnd: end,
+        selectionStart: start + before.length,
+        selectionEnd: start + before.length + selected.length,
+    };
+}
+function prefixLines(text, start, end, prefixFor) {
+    const lineStart = text.lastIndexOf("\n", Math.max(0, start - 1)) + 1;
+    const lineEndIndex = text.indexOf("\n", end);
+    const lineEnd = lineEndIndex === -1 ? text.length : lineEndIndex;
+    const block = text.slice(lineStart, lineEnd) || "";
+    const lines = block.split("\n");
+    const inserted = lines
+        .map((line, index) => prefixFor(index, line))
+        .join("\n");
+    return {
+        next: text.slice(0, lineStart) + inserted + text.slice(lineEnd),
+        inserted,
+        replaceStart: lineStart,
+        replaceEnd: lineEnd,
+        selectionStart: lineStart,
+        selectionEnd: lineStart + inserted.length,
+    };
+}
+/** Apply a markdown format command around the current selection. */
+export function applyMarkdown(text, start, end, command) {
+    const from = Math.max(0, Math.min(start, end, text.length));
+    const to = Math.max(0, Math.min(Math.max(start, end), text.length));
+    switch (command) {
+        case "bold":
+            return wrap(text, from, to, "**", "**", "bold text");
+        case "italic":
+            return wrap(text, from, to, "*", "*", "italic text");
+        case "link": {
+            const selected = text.slice(from, to) || "link text";
+            const inserted = `[${selected}](https://)`;
+            const urlStart = from + selected.length + 3;
+            return {
+                next: text.slice(0, from) + inserted + text.slice(to),
+                inserted,
+                replaceStart: from,
+                replaceEnd: to,
+                selectionStart: urlStart,
+                selectionEnd: urlStart + "https://".length,
+            };
+        }
+        case "heading":
+            return prefixLines(text, from, to, (_index, line) => {
+                const stripped = line.replace(/^#{1,6}\s+/, "");
+                return `## ${stripped || "Heading"}`;
+            });
+        case "ul":
+            return prefixLines(text, from, to, (_index, line) => {
+                const stripped = line.replace(/^[-*]\s+/, "").replace(/^\d+\.\s+/, "");
+                return `- ${stripped || "List item"}`;
+            });
+        case "ol":
+            return prefixLines(text, from, to, (index, line) => {
+                const stripped = line.replace(/^[-*]\s+/, "").replace(/^\d+\.\s+/, "");
+                return `${index + 1}. ${stripped || "List item"}`;
+            });
+    }
+}

package/dist/lib/images.d.ts

@@ -0,0 +1,14 @@
+import type { FieldSchema } from "@vertebr/client";
+export type RecordImage = {
+    id: string;
+    url: string;
+    name: string;
+    field: string;
+};
+declare function looksLikeUrl(value: string): boolean;
+export declare function isImageField(key: string, field?: Pick<FieldSchema, "label" | "type">): boolean;
+/** Flatten record image fields (single URL or URL lists) for the editor picker. */
+export declare function collectRecordImages(schema: Record<string, FieldSchema>, values: Record<string, unknown> | undefined): RecordImage[];
+export declare function urlsFromValue(value: unknown): string[];
+export { looksLikeUrl };
+//# sourceMappingURL=images.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/lib/images.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE5C;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,GAC1C,OAAO,CAIT;AAqBD,mFAAmF;AACnF,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAC1C,WAAW,EAAE,CAmBf;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,CAYtD;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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/auth.css

@@ -0,0 +1,39 @@
+/* ── Auth ────────────────────────────────────────────── */
+
+.vertebr-auth {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.15rem 0.2rem 0.35rem;
+}
+
+.vertebr-auth-hint {
+  margin: 0;
+  color: var(--vb-text-muted);
+  font-size: 0.78rem;
+  line-height: 1.4;
+  word-break: break-all;
+}
+
+.vertebr-auth-input {
+  width: 100%;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg);
+  color: var(--vb-text);
+  border-radius: var(--vb-radius-sm);
+  padding: 0.55rem 0.65rem;
+  font: inherit;
+  font-size: 0.85rem;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.vertebr-auth-input:focus {
+  outline: none;
+  border-color: var(--vb-accent-dim);
+  box-shadow: 0 0 0 3px var(--vb-accent-soft);
+}
+
+.vertebr-auth-actions {
+  display: flex;
+  gap: 0.5rem;
+}

package/dist/styles/base.css

@@ -0,0 +1,70 @@
+html:has(.vertebr-root),
+html:has(.vertebr-login),
+html:has(.vertebr-loading),
+html:has(.vertebr-error) {
+  background: var(--vb-bg);
+}
+
+html:has(.vertebr-root) body,
+html:has(.vertebr-login) body,
+html:has(.vertebr-loading) body,
+html:has(.vertebr-error) body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background: var(--vb-bg);
+  color: var(--vb-text);
+  font-family: var(--vb-font);
+}
+
+.vertebr-root {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  height: 100vh;
+  max-height: 100vh;
+  min-height: 100vh;
+  width: 100%;
+  display: grid;
+  grid-template-columns: var(--vb-sidebar-width) 1fr;
+  background:
+    radial-gradient(
+      900px 480px at 0% -10%,
+      var(--vb-glow-accent),
+      transparent 55%
+    ),
+    radial-gradient(
+      700px 400px at 100% 100%,
+      var(--vb-glow-cool),
+      transparent 50%
+    ),
+    linear-gradient(180deg, var(--vb-bg-deep) 0%, var(--vb-bg) 45%);
+  color: var(--vb-text);
+  font-family: var(--vb-font);
+  font-size: 15px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+  isolation: isolate;
+  overflow: clip;
+}
+
+.vertebr-root *,
+.vertebr-root *::before,
+.vertebr-root *::after {
+  box-sizing: border-box;
+}
+
+/* Guard against host-page CSS leaking into the sidebar. */
+.vertebr-sidebar,
+.vertebr-sidebar-top,
+.vertebr-sidebar-bottom,
+.vertebr-nav,
+.vertebr-nav-group,
+.vertebr-brand,
+.vertebr-env,
+.vertebr-auth,
+.vertebr-theme {
+  position: relative;
+  float: none;
+  inset: auto;
+}

package/dist/styles/buttons.css

@@ -0,0 +1,86 @@
+/* ── Buttons / status ────────────────────────────────── */
+
+.vertebr-btn {
+  appearance: none;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+  color: var(--vb-text);
+  border-radius: var(--vb-radius-sm);
+  padding: 0.52rem 0.95rem;
+  font: inherit;
+  font-size: 0.88rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    transform 80ms ease;
+}
+
+.vertebr-btn:hover:not(:disabled) {
+  background: var(--vb-bg-hover);
+  border-color: var(--vb-border-strong);
+}
+
+.vertebr-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.vertebr-btn-primary {
+  background: linear-gradient(
+    180deg,
+    var(--vb-btn-primary-from) 0%,
+    var(--vb-btn-primary-to) 100%
+  );
+  border-color: var(--vb-btn-primary-border);
+  color: var(--vb-accent-contrast);
+  font-weight: 600;
+  box-shadow: 0 1px 0 var(--vb-surface-tint-strong) inset;
+}
+
+.vertebr-btn-primary:hover:not(:disabled) {
+  background: linear-gradient(
+    180deg,
+    var(--vb-btn-primary-hover-from) 0%,
+    var(--vb-btn-primary-hover-to) 100%
+  );
+  border-color: var(--vb-btn-primary-hover-border);
+}
+
+.vertebr-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.vertebr-btn-quiet {
+  border-color: transparent;
+  background: transparent;
+  color: var(--vb-text-muted);
+  box-shadow: none;
+}
+
+.vertebr-btn-quiet:hover:not(:disabled) {
+  background: var(--vb-bg-hover);
+  border-color: transparent;
+  color: var(--vb-text);
+}
+
+.vertebr-btn-danger-quiet:hover:not(:disabled) {
+  background: var(--vb-danger-soft);
+  color: var(--vb-danger);
+}
+
+.vertebr-status {
+  font-family: var(--vb-mono);
+  font-size: 0.75rem;
+  color: var(--vb-text-muted);
+  letter-spacing: 0.02em;
+}
+
+.vertebr-status[data-tone="ok"] {
+  color: var(--vb-ok);
+}
+
+.vertebr-status[data-tone="danger"] {
+  color: var(--vb-danger);
+}

package/dist/styles/cells.css

@@ -0,0 +1,178 @@
+/* ── Cells ───────────────────────────────────────────── */
+
+.vertebr-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.vertebr-table td:has(.vertebr-cell-clamp),
+.vertebr-table td:has(.vertebr-cell-media),
+.vertebr-table td:has(.vertebr-cell-link) {
+  white-space: normal;
+  min-width: 10rem;
+  max-width: 16rem;
+}
+
+.vertebr-cell-empty {
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-cell-text,
+.vertebr-cell-number,
+.vertebr-cell-money,
+.vertebr-cell-datetime {
+  color: var(--vb-text);
+}
+
+.vertebr-cell-number,
+.vertebr-cell-money {
+  font-variant-numeric: tabular-nums;
+  font-family: var(--vb-mono);
+  font-size: 0.86rem;
+}
+
+.vertebr-cell-money {
+  font-weight: 600;
+}
+
+.vertebr-cell-datetime {
+  font-family: var(--vb-mono);
+  font-size: 0.8rem;
+  color: var(--vb-text-muted);
+}
+
+.vertebr-cell-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+  line-height: 1.35;
+  color: var(--vb-text-muted);
+  max-width: 16rem;
+}
+
+.vertebr-cell-link {
+  display: inline-block;
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--vb-accent);
+  text-decoration: none;
+  font-size: 0.82rem;
+}
+
+.vertebr-cell-link:hover {
+  text-decoration: underline;
+}
+
+.vertebr-cell-media {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  max-width: 16rem;
+  text-decoration: none;
+  color: inherit;
+}
+
+.vertebr-cell-media img {
+  width: 44px;
+  height: 44px;
+  object-fit: cover;
+  border-radius: var(--vb-radius-sm);
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+  flex: none;
+}
+
+.vertebr-cell-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  color: var(--vb-text-subtle);
+  font-family: var(--vb-mono);
+}
+
+.vertebr-cell-json {
+  display: inline-block;
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--vb-mono);
+  font-size: 0.75rem;
+  color: var(--vb-text-muted);
+}
+
+.vertebr-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 0.18rem 0.55rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  border: 1px solid var(--vb-border);
+  color: var(--vb-text-muted);
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-badge[data-tone="ok"] {
+  color: var(--vb-ok);
+  border-color: color-mix(in srgb, var(--vb-ok) 40%, transparent);
+  background: var(--vb-ok-soft);
+}
+
+.vertebr-badge[data-tone="neutral"] {
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  max-width: 14rem;
+}
+
+.vertebr-chip {
+  border: 1px solid var(--vb-border);
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+  font-size: 0.72rem;
+  color: var(--vb-text-muted);
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-empty {
+  flex: 1 1 auto;
+  display: grid;
+  place-items: center;
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: var(--vb-text-muted);
+  font-size: 0.92rem;
+}
+
+.vertebr-cell-media-detail {
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: none;
+}
+
+.vertebr-cell-media-detail img {
+  width: min(100%, 280px);
+  height: auto;
+  max-height: 280px;
+  object-fit: cover;
+}
+
+.vertebr-cell-prose {
+  margin: 0;
+  white-space: pre-wrap;
+  line-height: 1.5;
+  color: var(--vb-text);
+  max-width: 40rem;
+}
+