@vertebr/react 0.10.0 → 0.11.0

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

@@ -7,7 +7,7 @@ import { useToast } from "../../../hooks/useToast";
 import { buildZodSchema, groupFields, withSpecVisibility, withSpecVisibilityValues, } from "./helpers";
 import { RecordConfigForm } from "./RecordConfigForm";
 import { SettingsConfigForm } from "./SettingsConfigForm";
-export function ConfigForm({ schema, value, onSave, submitLabel, variant = "config", uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, fonts, fontsLoading, onListFonts, onRefreshFonts, onChange, hideActions, client, canWrite = true, }) {
+export function ConfigForm({ schema, value, onSave, submitLabel, variant = "config", uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, fonts, fontsLoading, onListFonts, onRefreshFonts, onChange, hideActions, client, canWrite = true, revisionsEnabled = false, onPublish, canPublish = false, }) {
     const { register, clear } = useSaveBar();
     const { push: pushToast } = useToast();
     const editorSchema = useMemo(() => (variant === "record" ? withSpecVisibility(schema) : schema), [schema, variant]);
@@ -18,14 +18,21 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
     const groups = useMemo(() => groupFields(editorSchema, variant), [editorSchema, variant]);
     const [status, setStatus] = useState(null);
     const [tone, setTone] = useState();
+    const [publishing, setPublishing] = useState(false);
     const form = useForm({
         resolver: zodResolver(zodSchema),
         defaultValues: editorValue,
     });
     const watched = useWatch({ control: form.control });
     useEffect(() => {
-        onChange?.((watched ?? {}));
-    }, [watched, onChange]);
+        if (!onChange)
+            return;
+        const subscription = form.watch((values) => {
+            onChange((values ?? {}));
+        });
+        onChange((form.getValues() ?? {}));
+        return () => subscription.unsubscribe();
+    }, [form, onChange]);
     useEffect(() => {
         form.reset(editorValue);
     }, [editorValue, form]);
@@ -34,18 +41,24 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
         setStatus(null);
         setTone(undefined);
     };
+    const saveLabel = submitLabel ?? (revisionsEnabled ? "Save draft" : "Save");
     const onSubmit = form.handleSubmit(async (data) => {
         if (!canWrite)
             return;
-        setStatus("Saving…");
+        setStatus(revisionsEnabled ? "Saving draft…" : "Saving…");
         setTone(undefined);
         register({ saving: true, isDirty: true, visible: true });
         try {
             await onSave(data);
-            setStatus("Saved");
+            const nextStatus = revisionsEnabled
+                ? "Draft saved — not live until you publish"
+                : "Saved";
+            setStatus(nextStatus);
             setTone("ok");
             form.reset(data);
-            pushToast("Changes saved", "ok");
+            pushToast(revisionsEnabled
+                ? "Draft saved. Publish to update the live storefront."
+                : "Changes saved", "ok");
         }
         catch (error) {
             const message = error instanceof Error ? error.message : "Save failed";
@@ -57,22 +70,51 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
             register({ saving: false });
         }
     });
+    const handlePublish = async () => {
+        if (!onPublish || !canPublish)
+            return;
+        setPublishing(true);
+        setStatus("Publishing…");
+        setTone(undefined);
+        register({ publishing: true, visible: true });
+        try {
+            await onPublish();
+            setStatus("Published");
+            setTone("ok");
+            pushToast("Published to live storefront", "ok");
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : "Publish failed";
+            setStatus(message);
+            setTone("danger");
+            pushToast(message, "danger");
+        }
+        finally {
+            setPublishing(false);
+            register({ publishing: false });
+        }
+    };
     const isDirty = form.formState.isDirty;
+    const showPublish = Boolean(revisionsEnabled && canPublish && onPublish);
     useEffect(() => {
         if (hideActions) {
             clear();
             return;
         }
         register({
-            visible: isDirty,
+            visible: isDirty || Boolean(status) || showPublish,
             isDirty,
-            saving: status === "Saving…",
+            saving: status === "Saving…" || status === "Saving draft…",
+            publishing,
             message: !canWrite && isDirty
                 ? "Missing config.write capability"
                 : (status ?? undefined),
             tone: !canWrite && isDirty ? "danger" : tone,
+            saveLabel,
             onSave: canWrite ? () => void onSubmit() : undefined,
             onDiscard,
+            publishLabel: "Publish",
+            onPublish: showPublish ? () => void handlePublish() : undefined,
         });
         return () => clear();
     }, [
@@ -85,6 +127,9 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
         register,
         clear,
         canWrite,
+        saveLabel,
+        showPublish,
+        publishing,
     ]);
     useEffect(() => {
         const onKeyDown = (event) => {
@@ -117,7 +162,7 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
         status,
         tone,
         onDiscard,
-        submitLabel,
+        submitLabel: saveLabel,
         hideActions: true,
     };
     if (variant === "record") {

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

@@ -30,6 +30,15 @@ export type ConfigFormProps = {
     client?: VertebrClient;
     /** When false, save actions are disabled (missing write capability). */
     canWrite?: boolean;
+    /**
+     * When true, Save creates a draft (not live). Save bar labels and
+     * optional Publish action reflect that.
+     */
+    revisionsEnabled?: boolean;
+    /** Publish the current draft revision to live. */
+    onPublish?: () => Promise<void>;
+    /** Show Publish when a draft revision is available. */
+    canPublish?: boolean;
 };
 export type FieldEntry = [string, FieldSchema];
 export type FieldGroup = {

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,aAAa,EACd,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EACf,eAAe,GAAG,eAAe,GAAG,iBAAiB,CACtD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,eAAe,EACf,OAAO,GAAG,cAAc,GAAG,aAAa,GAAG,gBAAgB,CAC5D,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,aAAa,EACd,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EACf,eAAe,GAAG,eAAe,GAAG,iBAAiB,CACtD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,eAAe,EACf,OAAO,GAAG,cAAc,GAAG,aAAa,GAAG,gBAAgB,CAC5D,CAAC"}

package/dist/hooks/useSaveBar.d.ts

@@ -5,8 +5,14 @@ export type SaveBarState = {
     tone?: "ok" | "danger";
     isDirty: boolean;
     saving: boolean;
+    /** Primary save button label. @default "Save" */
+    saveLabel?: string;
     onSave?: () => void | Promise<void>;
     onDiscard?: () => void;
+    /** Optional publish action when revisions are enabled. */
+    publishLabel?: string;
+    onPublish?: () => void | Promise<void>;
+    publishing?: boolean;
 };
 type SaveBarContextValue = {
     state: SaveBarState;

package/dist/hooks/useSaveBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSaveBar.d.ts","sourceRoot":"","sources":["../../src/hooks/useSaveBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAuBpE;AAED,wBAAgB,UAAU,wBAMzB"}
+{"version":3,"file":"useSaveBar.d.ts","sourceRoot":"","sources":["../../src/hooks/useSaveBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAuBpE;AAED,wBAAgB,UAAU,wBAMzB"}

package/dist/styles/form.css

@@ -428,6 +428,372 @@
     background 140ms ease;
 }
 
+.vertebr-datetime {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  width: 100%;
+}
+
+.vertebr-datetime-shell {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-height: 3.15rem;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-sm);
+  background: var(--vb-bg);
+  overflow: hidden;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease;
+}
+
+.vertebr-datetime-shell:focus-within,
+.vertebr-datetime-shell:has([data-state="open"]) {
+  border-color: color-mix(in srgb, var(--vb-accent) 55%, var(--vb-border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vb-accent) 18%, transparent);
+}
+
+.vertebr-datetime-cell {
+  appearance: none;
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+}
+
+.vertebr-datetime-cell:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.vertebr-datetime-cell:hover:not(:disabled) .vertebr-datetime-cell-inner {
+  background: color-mix(in srgb, var(--vb-surface-tint) 70%, transparent);
+}
+
+.vertebr-datetime-cell-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 0.45rem 0.7rem;
+}
+
+.vertebr-datetime-icon {
+  flex: none;
+  color: var(--vb-text-muted);
+}
+
+.vertebr-datetime-cell-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.08rem;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.vertebr-datetime-cell-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+  line-height: 1;
+}
+
+.vertebr-datetime-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--vb-text);
+  font-size: 0.9rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.35rem;
+}
+
+.vertebr-datetime-value[data-empty="true"] {
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-datetime-divider {
+  flex: none;
+  width: 1px;
+  align-self: stretch;
+  margin: 0.55rem 0;
+  background: var(--vb-border);
+}
+
+.vertebr-datetime-clear {
+  appearance: none;
+  flex: none;
+  align-self: stretch;
+  margin: 0;
+  padding: 0 0.85rem;
+  border: 0;
+  border-left: 1px solid var(--vb-border);
+  background: color-mix(in srgb, var(--vb-surface-tint) 55%, transparent);
+  color: var(--vb-text-muted);
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.vertebr-datetime-clear:hover {
+  color: var(--vb-text);
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-datetime-summary {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--vb-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.vertebr-datetime-summary-empty {
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-datetime-popover {
+  z-index: 70;
+  box-sizing: border-box;
+  width: min(20.5rem, calc(100vw - 1.5rem));
+  padding: 0.75rem;
+  border: 1px solid var(--vb-border-strong);
+  border-radius: var(--vb-radius);
+  background: var(--vb-bg-elevated);
+  color: var(--vb-text);
+  font-family: var(--vb-font);
+  box-shadow: var(--vb-shadow);
+  animation: vertebr-pop 120ms ease-out;
+}
+
+.vertebr-day-picker {
+  position: relative;
+  width: 100%;
+}
+
+.vertebr-day-picker-months,
+.vertebr-day-picker-month {
+  position: relative;
+  width: 100%;
+}
+
+.vertebr-day-picker-caption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.25rem;
+  margin: 0 2.1rem 0.45rem;
+}
+
+.vertebr-day-picker-caption-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.vertebr-day-picker-nav {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 2.25rem;
+  pointer-events: none;
+}
+
+.vertebr-day-picker-nav-btn {
+  appearance: none;
+  position: absolute;
+  top: 0;
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.85rem;
+  height: 1.85rem;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-sm);
+  background: var(--vb-bg);
+  color: var(--vb-text-muted);
+  cursor: pointer;
+}
+
+.vertebr-day-picker-nav-btn:first-of-type {
+  left: 0;
+}
+
+.vertebr-day-picker-nav-btn:last-of-type {
+  right: 0;
+}
+
+.vertebr-day-picker-nav-btn:hover {
+  color: var(--vb-text);
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-day-picker-grid {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.vertebr-day-picker-weekday {
+  padding: 0.35rem 0;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  text-align: center;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-day-picker-day {
+  width: 14.28%;
+  height: 2.35rem;
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.vertebr-day-picker-day-btn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.15rem;
+  height: 2.15rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--vb-text);
+  font: inherit;
+  font-size: 0.85rem;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.vertebr-day-picker-day-btn:hover {
+  background: var(--vb-bg-hover);
+}
+
+.vertebr-day-picker-today .vertebr-day-picker-day-btn {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vb-accent) 45%, transparent);
+}
+
+.vertebr-day-picker-selected .vertebr-day-picker-day-btn,
+.vertebr-day-picker-selected .vertebr-day-picker-day-btn:hover {
+  background: var(--vb-accent);
+  color: var(--vb-accent-contrast);
+  box-shadow: none;
+}
+
+.vertebr-day-picker-outside .vertebr-day-picker-day-btn {
+  color: var(--vb-text-subtle);
+  opacity: 0.55;
+}
+
+.vertebr-day-picker-disabled .vertebr-day-picker-day-btn,
+.vertebr-day-picker-hidden .vertebr-day-picker-day-btn {
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.vertebr-datetime-time-row {
+  display: flex;
+  align-items: end;
+  gap: 0.45rem;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--vb-border);
+}
+
+.vertebr-datetime-time-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  flex: 1 1 0;
+  min-width: 0;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-datetime-time-field-meridiem {
+  flex: 0 0 4.5rem;
+}
+
+.vertebr-datetime-timezone {
+  margin-top: 0.55rem;
+}
+
+.vertebr-datetime-time-select {
+  appearance: none;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 2.35rem;
+  padding: 0.45rem 0.65rem;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-sm);
+  background: var(--vb-bg);
+  color: var(--vb-text);
+  font: inherit;
+  font-size: 0.9rem;
+  font-variant-numeric: tabular-nums;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.vertebr-datetime-time-select:focus-visible {
+  outline: none;
+  border-color: var(--vb-accent-dim);
+  box-shadow: 0 0 0 3px var(--vb-accent-soft);
+}
+
+.vertebr-datetime-time-sep {
+  flex: none;
+  padding-bottom: 0.55rem;
+  color: var(--vb-text-muted);
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+@media (max-width: 520px) {
+  .vertebr-datetime-shell {
+    flex-wrap: wrap;
+  }
+
+  .vertebr-datetime-cell {
+    flex: 1 1 auto;
+  }
+
+  .vertebr-datetime-clear {
+    flex: 1 1 100%;
+    min-height: 2.2rem;
+    border-left: 0;
+    border-top: 1px solid var(--vb-border);
+  }
+}
+
 .vertebr-field textarea {
   resize: vertical;
   min-height: 4.5rem;
@@ -784,15 +1150,22 @@
 }
 
 .vertebr-switch {
-  width: 40px;
-  height: 22px;
+  box-sizing: border-box;
+  width: 2.5rem;
+  height: 1.375rem;
   background: var(--vb-bg-muted);
   border-radius: 999px;
   position: relative;
   border: 1px solid var(--vb-border);
   cursor: pointer;
   flex: none;
-  transition: background 140ms ease, border-color 140ms ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0;
+  transition:
+    background 140ms ease,
+    border-color 140ms ease;
 }
 
 .vertebr-switch[data-state="checked"] {
@@ -802,17 +1175,22 @@
 
 .vertebr-switch-thumb {
   display: block;
-  width: 16px;
-  height: 16px;
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
   background: var(--vb-text);
   border-radius: 999px;
-  transform: translateX(2px);
-  transition: transform 140ms ease, background 140ms ease;
-  margin-top: 2px;
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translateY(-50%);
+  transition:
+    left 140ms ease,
+    background 140ms ease;
 }
 
 .vertebr-switch[data-state="checked"] .vertebr-switch-thumb {
-  transform: translateX(18px);
+  left: calc(100% - 1rem - 2px);
   background: var(--vb-accent);
 }
 
@@ -1075,14 +1453,49 @@
 
 /* ── Revision history ────────────────────────────────── */
 
-.vertebr-revisions {
-  margin-top: 1.25rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--vb-border);
+.vertebr-revisions-trigger {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  height: 2rem;
+  padding: 0 0.7rem;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-sm, 8px);
+  background: var(--vb-bg-elevated);
+  color: var(--vb-text-secondary);
+  font: inherit;
+  font-size: var(--vb-font-size-100, 0.88rem);
+  font-weight: var(--vb-font-weight-medium, 500);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.vertebr-revisions-trigger:hover {
+  background: var(--vb-bg-hover);
+  color: var(--vb-text);
+  border-color: var(--vb-border-strong, var(--vb-border));
+}
+
+.vertebr-revisions-trigger-count {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3rem;
+  border-radius: 999px;
+  background: var(--vb-bg-muted);
+  color: var(--vb-text-muted);
+  font-family: var(--vb-mono);
+  font-size: 0.68rem;
 }
 
-.vertebr-revisions .vertebr-panel-head {
-  margin-bottom: 0.65rem;
+.vertebr-revisions-modal .vertebr-modal-body {
+  gap: 0.75rem;
 }
 
 .vertebr-revisions-empty {
@@ -1108,17 +1521,24 @@
   padding: 0.55rem 0.65rem;
   border: 1px solid var(--vb-border);
   border-radius: 8px;
-  background: var(--vb-bg-elevated);
+  background: var(--vb-bg-muted);
 }
 
 .vertebr-revisions-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  gap: 0.4rem 0.65rem;
+  gap: 0.35rem 0.55rem;
   min-width: 0;
 }
 
+.vertebr-revisions-meta strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 16rem;
+}
+
 .vertebr-revisions-meta [data-status] {
   font-family: var(--vb-mono);
   font-size: 0.68rem;
@@ -1135,7 +1555,22 @@
   color: var(--vb-warn, #9a6b2f);
 }
 
+.vertebr-revisions-meta [data-status="current"] {
+  color: var(--vb-text);
+  background: var(--vb-bg-elevated);
+  border: 1px solid var(--vb-border);
+  border-radius: 999px;
+  padding: 0.05rem 0.4rem;
+  letter-spacing: 0.04em;
+}
+
+.vertebr-revisions-item[data-active="true"] {
+  border-color: color-mix(in srgb, var(--vb-text) 22%, var(--vb-border));
+  background: var(--vb-bg-elevated);
+}
+
 .vertebr-revisions-when {
+  flex-basis: 100%;
   font-size: 0.78rem;
   color: var(--vb-text-subtle);
 }