@vertebr/react 0.8.1 → 0.9.0

package/dist/components/admin/routes.js

@@ -23,6 +23,12 @@ export function pathForSelection(selection, catalog) {
     switch (selection.kind) {
         case "overview":
             return "/overview";
+        case "sync":
+            return "/sync";
+        case "addons":
+            return "/addons";
+        case "addon":
+            return `/addons/${encodeURIComponent(selection.id)}`;
         case "gallery":
             return "/gallery";
         case "fontLibrary":
@@ -77,6 +83,17 @@ export function selectionFromPath(pathname, basePath, catalog) {
     const [head, ...tail] = parts;
     if (head === "overview")
         return { kind: "overview" };
+    if (head === "sync")
+        return { kind: "sync" };
+    if (head === "addons") {
+        if (!tail[0])
+            return { kind: "addons" };
+        const id = decodeURIComponent(tail[0]);
+        if (catalog && !catalog.addons?.some((item) => item.id === id)) {
+            return null;
+        }
+        return { kind: "addon", id };
+    }
     if (head === "gallery")
         return { kind: "gallery" };
     if (head === "fonts")
@@ -134,6 +151,17 @@ export function coerceSelection(selection, catalog) {
     if (selection.kind === "overview") {
         return catalog.metrics ? selection : defaultSelection(catalog);
     }
+    if (selection.kind === "sync") {
+        return catalog.sync?.enabled ? selection : defaultSelection(catalog);
+    }
+    if (selection.kind === "addons") {
+        return catalog.addons?.length ? selection : defaultSelection(catalog);
+    }
+    if (selection.kind === "addon") {
+        return catalog.addons?.some((item) => item.id === selection.id)
+            ? selection
+            : defaultSelection(catalog);
+    }
     if (selection.kind === "gallery") {
         return catalog.gallery ? selection : defaultSelection(catalog);
     }
@@ -162,9 +190,11 @@ export function selectionsEqual(a, b) {
         return a === b;
     if (a.kind !== b.kind)
         return false;
-    if (a.kind === "overview" || a.kind === "gallery" || a.kind === "fontLibrary") {
+    if (a.kind === "overview" || a.kind === "gallery" || a.kind === "fontLibrary" || a.kind === "sync" || a.kind === "addons") {
         return true;
     }
+    if (a.kind === "addon" && b.kind === "addon")
+        return a.id === b.id;
     if (a.kind === "emails" && b.kind === "emails") {
         return (a.tab ?? "compose") === (b.tab ?? "compose");
     }

package/dist/components/admin/types.d.ts

@@ -29,6 +29,13 @@ export type NavIcon = (props: {
 }) => ReactElement;
 export type Selection = {
     kind: "overview";
+} | {
+    kind: "sync";
+} | {
+    kind: "addons";
+} | {
+    kind: "addon";
+    id: string;
 } | {
     kind: "resource";
     id: string;

package/dist/components/admin/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/admin/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oEAAoE;IACpE,cAAc,CAAC,EAAE,MACb,MAAM,GACN,IAAI,GACJ,SAAS,GACT,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvC,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC,CAAC;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,YAAY,CAAC;AAEtE,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GACpB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GACnB;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,GACvB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,GAAG,CAAC,EAAE,SAAS,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC9B,IAAI,CAAC;AAET,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACf,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,OAAO,CAAC;QAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/admin/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oEAAoE;IACpE,cAAc,CAAC,EAAE,MACb,MAAM,GACN,IAAI,GACJ,SAAS,GACT,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvC,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC,CAAC;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,YAAY,CAAC;AAEtE,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GACpB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC7B;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GACnB;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,GACvB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,GAAG,CAAC,EAAE,SAAS,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC9B,IAAI,CAAC;AAET,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACf,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,OAAO,CAAC;QAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC"}

package/dist/components/env/EnvMultiSelect.d.ts

@@ -0,0 +1,20 @@
+import type { AdminEnvironment } from "@vertebr/client";
+export type EnvMultiSelectProps = {
+    environments: AdminEnvironment[];
+    value: string[];
+    onChange: (next: string[]) => void;
+    /** Hide this env id from destination options (usually the selected source). */
+    excludeId?: string;
+    ariaLabel?: string;
+    placeholder?: string;
+};
+export declare function EnvMultiSelect({ environments, value, onChange, excludeId, ariaLabel, placeholder, }: EnvMultiSelectProps): import("react").JSX.Element;
+export declare function EnvFlowBadge({ environment }: {
+    environment: AdminEnvironment;
+}): import("react").JSX.Element;
+export type SyncFlowDiagramProps = {
+    from?: AdminEnvironment;
+    to: AdminEnvironment[];
+};
+export declare function SyncFlowDiagram({ from, to }: SyncFlowDiagramProps): import("react").JSX.Element;
+//# sourceMappingURL=EnvMultiSelect.d.ts.map

package/dist/components/env/EnvMultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/env/EnvMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAsC,EACtC,WAAmC,GACpC,EAAE,mBAAmB,+BAmFrB;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,EAAE,gBAAgB,CAAA;CAAE,+BAU9E;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,EAAE,EAAE,gBAAgB,EAAE,CAAC;CACxB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,oBAAoB,+BA8BjE"}

package/dist/components/env/EnvMultiSelect.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+export function EnvMultiSelect({ environments, value, onChange, excludeId, ariaLabel = "Destination environments", placeholder = "Select destinations", }) {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    const options = environments.filter((env) => env.id !== excludeId);
+    const selected = options.filter((env) => value.includes(env.id));
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onPointerDown);
+        return () => document.removeEventListener("mousedown", onPointerDown);
+    }, [open]);
+    const toggle = (envId) => {
+        if (value.includes(envId)) {
+            onChange(value.filter((id) => id !== envId));
+            return;
+        }
+        onChange([...value, envId]);
+    };
+    return (_jsxs("div", { className: "vertebr-env-multi", ref: rootRef, children: [_jsxs("button", { type: "button", className: "vertebr-select-trigger vertebr-env-multi-trigger", "aria-label": ariaLabel, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), children: [_jsx("span", { className: "vertebr-env-multi-value", children: selected.length === 0 ? (_jsx("span", { className: "vertebr-env-multi-placeholder", children: placeholder })) : (selected.map((env) => (_jsxs("span", { className: "vertebr-env-multi-chip", "data-tone": env.tone ?? "neutral", children: [_jsx("span", { className: "vertebr-select-dot", "data-tone": env.tone ?? "neutral" }), env.label] }, env.id)))) }), _jsx("span", { className: "vertebr-select-icon", "aria-hidden": "true", children: "\u25BE" })] }), open ? (_jsx("div", { className: "vertebr-env-multi-menu", role: "listbox", "aria-label": ariaLabel, children: options.map((env) => {
+                    const checked = value.includes(env.id);
+                    return (_jsxs("label", { className: "vertebr-env-multi-option", "data-tone": env.tone ?? "neutral", children: [_jsx("input", { type: "checkbox", checked: checked, onChange: () => toggle(env.id) }), _jsx("span", { className: "vertebr-select-dot", "data-tone": env.tone ?? "neutral" }), _jsx("span", { children: env.label })] }, env.id));
+                }) })) : null] }));
+}
+export function EnvFlowBadge({ environment }) {
+    return (_jsxs("span", { className: "vertebr-sync-env-badge", "data-tone": environment.tone ?? "neutral", children: [_jsx("span", { className: "vertebr-select-dot", "data-tone": environment.tone ?? "neutral" }), _jsx("span", { children: environment.label })] }));
+}
+export function SyncFlowDiagram({ from, to }) {
+    if (!from || to.length === 0) {
+        return (_jsx("div", { className: "vertebr-sync-flow vertebr-sync-flow-empty", children: "Select a source and at least one destination environment." }));
+    }
+    return (_jsxs("div", { className: "vertebr-sync-flow", "aria-label": "Sync direction", children: [_jsxs("div", { className: "vertebr-sync-flow-source", children: [_jsx("span", { className: "vertebr-sync-flow-label", children: "From" }), _jsx(EnvFlowBadge, { environment: from })] }), _jsx("div", { className: "vertebr-sync-flow-targets", children: to.map((destination) => (_jsxs("div", { className: "vertebr-sync-flow-row", children: [_jsx("span", { className: "vertebr-sync-flow-arrow", "aria-hidden": "true", children: "\u2192" }), _jsxs("div", { className: "vertebr-sync-flow-target", children: [_jsx("span", { className: "vertebr-sync-flow-label", children: "To" }), _jsx(EnvFlowBadge, { environment: destination })] })] }, destination.id))) })] }));
+}

package/dist/components/ui/icons.d.ts

@@ -10,6 +10,8 @@ export declare function IconSettings(props: IconProps): import("react").JSX.Elem
 export declare function IconChart(props: IconProps): import("react").JSX.Element;
 export declare function IconChevronLeft(props: IconProps): import("react").JSX.Element;
 export declare function IconSearch(props: IconProps): import("react").JSX.Element;
+export declare function IconSync(props: IconProps): import("react").JSX.Element;
+export declare function IconAddon(props: IconProps): import("react").JSX.Element;
 export declare function iconForNavKey(key: string): typeof IconHome;
 export {};
 //# sourceMappingURL=icons.d.ts.map

package/dist/components/ui/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,KAAK,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAiBzC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,+BAQ3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAOxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAMzC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,+BAM/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,+BAO1C;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,mBAQxC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,KAAK,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAiBzC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,+BAQ3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAOxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAMzC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,+BAM/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,+BAO1C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BASxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BASzC;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,mBAWxC"}

package/dist/components/ui/icons.js

@@ -43,6 +43,12 @@ export function IconChevronLeft(props) {
 export function IconSearch(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "9", cy: "9", r: "4.75" }), _jsx("path", { d: "M13 13l3.5 3.5" })] }));
 }
+export function IconSync(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M4 7h8" }), _jsx("path", { d: "M10 5l2 2-2 2" }), _jsx("path", { d: "M16 13H8" }), _jsx("path", { d: "M10 11l-2 2 2 2" })] }));
+}
+export function IconAddon(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M8 3.5h4v4H8z" }), _jsx("path", { d: "M3.5 8h4v4h-4z" }), _jsx("path", { d: "M12.5 8h4v4h-4z" }), _jsx("path", { d: "M8 12.5h4v4H8z" })] }));
+}
 export function iconForNavKey(key) {
     if (key === "overview")
         return IconHome;
@@ -54,6 +60,12 @@ export function iconForNavKey(key) {
         return IconFonts;
     if (key === "emails")
         return IconMail;
+    if (key === "sync")
+        return IconSync;
+    if (key === "addons:overview")
+        return IconAddon;
+    if (key.startsWith("addon:"))
+        return IconAddon;
     if (key.startsWith("config:"))
         return IconPages;
     return IconSettings;