@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/fields/collection/previews/GenericPreview.d.ts

@@ -0,0 +1,9 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function GenericPreview({ className, schema, collection }: GenericPreview.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace GenericPreview {
+    type Props = {
+        className?: string;
+        schema: Schema.CollectionField;
+        collection: Schema.CollectionField.LinkedValue;
+    };
+}

package/dist/core/components/fields/collection/previews/GenericPreview.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericPreview = GenericPreview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// components
+function GenericPreview({ className, schema, collection }) {
+    // bind props
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col justify-center items-center gap-l2 p-l8", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-tertiary uppercase", children: schema.name }), (0, jsx_runtime_1.jsx)("h4", { className: "body-sm body-strong text-content-secondary", children: collection.name })] }));
+}

package/dist/core/components/fields/collection/previews/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ClientPreview';
+export * from './GenericPreview';

package/dist/core/components/fields/collection/previews/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ClientPreview"), exports);
+__exportStar(require("./GenericPreview"), exports);

package/dist/core/components/fields/dynamicPages/PageCard.d.ts

@@ -0,0 +1,10 @@
+import { Callback, Schema } from '@nascentdigital/funnel-core';
+export declare function PageCard({ pageId, onClick, selected, selecting }: PageCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageCard {
+    type Props = {
+        pageId: Schema.Page.Id;
+        onClick?: Callback.Void;
+        selecting?: boolean;
+        selected?: boolean;
+    };
+}

package/dist/core/components/fields/dynamicPages/PageCard.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageCard = PageCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const visuals_1 = require("../../visuals");
+// component
+function PageCard({ pageId, onClick, selected, selecting }) {
+    // bind
+    const store = (0, hooks_1.usePageRefStore)();
+    const page = store.getPageRef(pageId);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "FieldCard relative w-[212px] h-[170px] overflow-hidden", onClick: onClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('absolute -inset-1 flex flex-col', 'h-full flex flex-col justify-center items-center gap-l2 p-l8', { 'opacity-backdrop': selecting }), children: [(0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-tertiary uppercase", children: page === null || page === void 0 ? void 0 : page.template.name }), (0, jsx_runtime_1.jsx)("h4", { className: "body-sm body-strong text-content-secondary", children: page === null || page === void 0 ? void 0 : page.name })] }), selecting
+                ? (0, jsx_runtime_1.jsx)(feedback_1.SelectionDecorator, { className: "absolute top-l4 right-l4 z-supersurface pointer-events-none", selected: selected })
+                : (0, jsx_runtime_1.jsx)("div", { className: "absolute top-l4 right-l4 z-supersurface pointer-events-none", children: (0, jsx_runtime_1.jsx)("div", { className: "p-l2 bg-ix-primary rounded-full", children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Pin", size: "xs", className: "text-ix-secondary" }) }) })] }));
+}

package/dist/core/components/fields/dynamicPages/PageGhostCard.d.ts

@@ -0,0 +1,7 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function PageGhostCard({ pageSchemas }: PageGhostCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageGhostCard {
+    type Props = {
+        pageSchemas: Schema.Page[];
+    };
+}

package/dist/core/components/fields/dynamicPages/PageGhostCard.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageGhostCard = PageGhostCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const feedback_1 = require("../../feedback");
+// component
+function PageGhostCard({ pageSchemas }) {
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-l4 right-l4 z-surface", children: (0, jsx_runtime_1.jsx)(feedback_1.Badge, { label: "AUTO" }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard FieldCard-disabled w-[212px] h-[170px] overflow-hidden ', 'flex flex-col justify-center items-center gap-l2 p-l8'), children: pageSchemas.map(page => (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-tertiary uppercase", children: page.name }, page.type)) })] }));
+}

package/dist/core/components/fields/dynamicPages/PagePriorityDialog.d.ts

@@ -0,0 +1,15 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare const PagePriorityDialog: import("react").ForwardRefExoticComponent<PagePriorityDialog.Props & import("react").RefAttributes<PagePriorityDialog.Service>>;
+export declare namespace PagePriorityDialog {
+    type Props = {
+        region: string;
+    };
+    type OpenArgs = {
+        types: Schema.Page.Type[];
+        sort: Schema.PageQuery.Sort.ByType[] | 'latest';
+    };
+    type OpenResult = Schema.PageQuery.Sort.ByType[];
+    interface Service {
+        open(args: OpenArgs): Promise<OpenResult | undefined>;
+    }
+}

package/dist/core/components/fields/dynamicPages/PagePriorityDialog.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PagePriorityDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("@nascentdigital/funnel-ui/hooks");
+const react_1 = require("react");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+// component
+exports.PagePriorityDialog = (0, react_1.forwardRef)(function CreatePageDialog({ region }, ref) {
+    // bind state + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)();
+    const [currentPage, setCurrentPage] = (0, react_1.useState)();
+    const [pageTagState, setPageTagState] = (0, react_1.useState)();
+    // bind service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        open: async ({ types, sort }) => {
+            console.debug('[PagePriorityDialog] open', types);
+            // get pages from types
+            const pages = types.map(type => funnel_core_1.Schema.Site.getPage(type, region));
+            setCurrentPage(pages[0]);
+            // initial state
+            const state = PageTagState.from(pages, sort);
+            setPageTagState(state);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            // open dialog
+            setDeferral(deferral);
+            // await deferral completion (or error)
+            const result = await deferral.promise;
+            // clear deferral
+            setDeferral(undefined);
+            // return (or cancellation)
+            return result;
+        }
+    }), [region]);
+    // helpers
+    const onClose = () => {
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(undefined);
+    };
+    const onSave = () => {
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(pageTagState ? PageTagState.toResult(pageTagState) : undefined);
+    };
+    const onReset = () => {
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve([]);
+    };
+    // bail if no current page
+    if (!currentPage || !pageTagState) {
+        return;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { open: !!deferral, onClose: onClose, className: "flex", children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Priority Settings" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "label-sm label-strong text-content-tertiary", children: "Site Pages" }), (0, jsx_runtime_1.jsx)(feedback_1.Badge, { label: currentPage.name })] })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: currentPage.tags.map(group => (0, jsx_runtime_1.jsx)(TagGroup, { page: currentPage, group: group, state: pageTagState }, group.id)) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-l4 items-center p-l8 border-t border-solid border-border-l1", children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onReset, children: "Reset" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", onClick: onSave, children: "Save" })] })] })] }));
+});
+var PageTagState;
+(function (PageTagState) {
+    function from(pages, sort) {
+        var _a, _b;
+        const state = new Map();
+        for (const page of pages) {
+            const groups = new Map();
+            // get all tags for this page
+            const selectedPageTags = (_b = (_a = (sort === 'latest'
+                ? undefined
+                : sort.find(tuple => tuple.type === page.type))) === null || _a === void 0 ? void 0 : _a.tags) !== null && _b !== void 0 ? _b : [];
+            for (const group of page.tags) {
+                // get all tags based on the tag ids
+                const selectedTags = group.parse(selectedPageTags);
+                const selectedTagsData = selectedTags.map(tag => tag.data);
+                // set group with selected tags
+                groups.set(group.id, new Set(selectedTagsData));
+            }
+            // set page with groups
+            state.set(page.type, groups);
+        }
+        // return state
+        return state;
+    }
+    PageTagState.from = from;
+    function toResult(state) {
+        const result = [];
+        state.forEach((group, pageType) => {
+            const tags = group.values()
+                .flatMap(tags => tags.values())
+                .toArray();
+            if (tags.length > 0) {
+                result.push({ type: pageType, tags });
+            }
+        });
+        // return result
+        return result;
+    }
+    PageTagState.toResult = toResult;
+})(PageTagState || (PageTagState = {}));
+function TagGroup({ page, group, state }) {
+    var _a;
+    // bind
+    const touch = (0, hooks_1.useTouch)();
+    const allTags = Object.values(group.tags).map(tag => tag.data);
+    const selectedTags = (_a = state.get(page.type)) === null || _a === void 0 ? void 0 : _a.get(group.id);
+    // render
+    return ((0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: group.name, options: allTags, selectedOptions: selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.values().toArray(), onToggle: (tag, selected) => {
+            if (selected) {
+                selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.add(tag);
+            }
+            else {
+                selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.delete(tag);
+            }
+            touch();
+        }, renderLabel: tag => {
+            var _a, _b;
+            const { tagId } = (_a = funnel_core_1.Schema.Tag.Data.parse(tag)) !== null && _a !== void 0 ? _a : {};
+            return tagId ? (_b = group.get(tagId)) === null || _b === void 0 ? void 0 : _b.name : 'unknown';
+        } }));
+}

package/dist/core/components/fields/dynamicPages/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PageCard';
+export * from './PageGhostCard';
+export * from './PagePriorityDialog';

package/dist/core/components/fields/dynamicPages/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PageCard"), exports);
+__exportStar(require("./PageGhostCard"), exports);
+__exportStar(require("./PagePriorityDialog"), exports);

package/dist/core/components/fields/embed/EmbeddedVideoCard.d.ts

@@ -0,0 +1,6 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import type { FieldCard } from '../FieldCard';
+export declare function EmbeddedVideoCard({ className, field, ...props }: EmbeddedVideoCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace EmbeddedVideoCard {
+    type Props = FieldCard.Props.For<Field<Schema.EmbeddedVideoField>>;
+}

package/dist/core/components/fields/embed/EmbeddedVideoCard.js

@@ -0,0 +1,39 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmbeddedVideoCard = EmbeddedVideoCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FieldCardLayout_1 = require("../FieldCardLayout");
+// component
+function EmbeddedVideoCard(_a) {
+    var _b;
+    var { className, field } = _a, props = __rest(_a, ["className", "field"]);
+    // bind state
+    const { value: video } = (_b = field.value) !== null && _b !== void 0 ? _b : {};
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldCardLayout_1.FieldCardLayout, Object.assign({}, props, { className: className, field: field, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 w-full h-full flex flex-col", children: [(video === null || video === void 0 ? void 0 : video.thumbUrl)
+                    ?
+                        (0, jsx_runtime_1.jsx)("img", { className: "flex-1 object-cover", src: video.thumbUrl, alt: "Video thumbnail preview", draggable: false })
+                    :
+                        (0, jsx_runtime_1.jsx)("div", { className: "flex-1" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-l4 right-l4", children: renderPlatformIcon(video === null || video === void 0 ? void 0 : video.type) })] }) })));
+}
+function renderPlatformIcon(videoType) {
+    switch (videoType) {
+        case 'youtube':
+            return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 14", fill: "none", children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_6468_1593)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.19151 13.5766C1.32953 13.3433 0.657706 12.6569 0.409048 11.8101C0 10.2483 0 6.99244 0 6.99244C0 6.99244 0 3.73713 0.409048 2.18986C0.657201 1.32853 1.32953 0.656707 2.19151 0.423357C3.73994 0 9.99269 0 9.99269 0C9.99269 0 16.2601 0 17.8085 0.423357C18.6851 0.656707 19.3423 1.32853 19.5763 2.18986C20 3.73713 20 6.99244 20 6.99244C20 6.99244 20 10.2478 19.5763 11.8101C19.3423 12.6569 18.6851 13.3428 17.8085 13.5766C16.2601 14 9.99269 14 9.99269 14C9.99269 14 3.73994 14 2.19151 13.5766ZM8.00595 9.99978L13.1924 6.99244L8.00595 3.99971V9.99978Z", fill: "#FF0033" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.00586 9.99983L13.1924 6.99248L8.00586 3.99976V9.99983Z", fill: "white" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_6468_1593", children: (0, jsx_runtime_1.jsx)("rect", { width: "20", height: "14", fill: "white" }) }) })] }));
+        case 'vimeo':
+            return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "10", fill: "#0E1216" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.0683 5.20227C11.9636 5.20227 10.9672 7.93659 10.9672 7.93659L11.1301 8.17408C11.3169 8.06176 11.5405 7.93659 11.7992 7.93659C12.0802 7.93659 12.3133 8.1452 12.3133 8.6956C12.3133 9.60703 11.277 11.8471 10.346 11.8471C9.93244 11.8471 9.74722 11.1732 9.47896 9.95525C9.38794 9.59901 9.22825 8.68596 8.99671 7.21932C8.78115 5.86018 8.62784 5.3162 7.86457 5.3162C6.11285 5.3162 4.39307 7.7681 4.39307 7.7681L4.64217 8.28962C4.829 8.17729 5.05096 8.05052 5.37671 8.05052C5.99788 8.05052 6.06016 8.74375 6.41625 10.0274C6.73721 11.2053 7.05338 12.3622 7.37913 13.5609C7.70648 14.7596 8.37873 15.4913 9.20589 15.4913C10.4466 15.4913 11.6411 14.4338 13.2634 12.3237C14.0187 11.3513 14.814 10.0451 15.2307 9.12564C15.6523 8.19815 15.7225 7.40866 15.7225 7.04601C15.7225 5.99336 15.309 5.20227 14.0683 5.20227Z", fill: "#17D5FF" })] }));
+        default:
+            return null;
+    }
+}

package/dist/core/components/fields/embed/EmbeddedVideoEditor.d.ts

@@ -0,0 +1,15 @@
+import { Language, Rect, Schema } from '@nascentdigital/funnel-core';
+export declare const EmbeddedVideoEditor: import("react").ForwardRefExoticComponent<EmbeddedVideoEditor.Props & import("react").RefAttributes<EmbeddedVideoEditor.Ref>>;
+export declare namespace EmbeddedVideoEditor {
+    type Props = {
+        language: Language;
+    };
+    interface Ref {
+        edit(options: Options): Promise<Schema.Field.Data<Schema.EmbeddedVideoField> | undefined>;
+    }
+    type Options = {
+        schema: Schema.EmbeddedVideoField;
+        initialValue?: Schema.Field.Data<Schema.EmbeddedVideoField>;
+        anchor: HTMLElement | Rect;
+    };
+}

package/dist/core/components/fields/embed/EmbeddedVideoEditor.js

@@ -0,0 +1,234 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmbeddedVideoEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const visuals_1 = require("../../visuals");
+const FieldEditor_1 = require("../FieldEditor");
+const FieldErrorController_1 = require("../FieldErrorController");
+const TextField_1 = require("../TextField");
+// component
+exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEditor({ language }, ref) {
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
+    const [schema, setSchema] = (0, react_1.useState)();
+    const [initialValue, setInitialValue] = (0, react_1.useState)();
+    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [state, setState] = (0, react_1.useState)('initializing');
+    const touch = (0, client_1.useTouch)();
+    const { uriField, mutedField } = (0, hooks_1.useTempFields)({
+        uriField: funnel_core_1.Schema.Field.uri({
+            name: 'YouTube or Vimeo URL',
+            hint: 'Enter video link',
+            required: true
+        }),
+        mutedField: funnel_core_1.Schema.Field.boolean({
+            name: 'Muted',
+            hint: 'Video starts off on mute',
+            semantics: 'toggle',
+            required: true,
+            defaultValue: true
+        })
+    });
+    const uri = uriField.valid
+        ? funnel_core_1.Schema.TextField.Value.fromData(uriField.value)
+        : undefined;
+    const video$ = (0, react_1.useMemo)(() => new rxjs_1.BehaviorSubject(undefined), []);
+    const { name = '', description } = schema !== null && schema !== void 0 ? schema : {};
+    const video = video$.value;
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        edit: async ({ schema, initialValue, anchor }) => {
+            var _a;
+            // reset state
+            setSchema(schema);
+            setInitialValue(initialValue);
+            setAnchor(anchor);
+            setState('initializing');
+            // setup inputs
+            const video = initialValue === null || initialValue === void 0 ? void 0 : initialValue.value;
+            video$.next(video);
+            uriField.reset(video
+                ? funnel_core_1.Schema.TextField.Value.toData(funnel_core_1.Schema.EmbeddedVideoField.Value.toUrl(video).href)
+                : null);
+            mutedField.reset(funnel_core_1.Schema.BooleanField.Value.toData(schema.allowMuting ? (_a = video === null || video === void 0 ? void 0 : video.muted) !== null && _a !== void 0 ? _a : true : true));
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), [uriField, mutedField, video$]);
+    // sync uri on change
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // reset if there's no uri
+        if (!uri) {
+            video$.next(undefined);
+        }
+        // or try to use url
+        else {
+            // parse url
+            const url = (_a = URL.parse(uri)) !== null && _a !== void 0 ? _a : undefined;
+            const video = funnel_core_1.Schema.EmbeddedVideoField.Value.fromUrl(url);
+            // update video if the video changed
+            const currentVideo = video$.value;
+            if (!currentVideo || currentVideo.videoId !== (video === null || video === void 0 ? void 0 : video.videoId)) {
+                // update video
+                video$.next(video);
+            }
+        }
+    }, [video$, uri]);
+    // update thumb on video change
+    (0, react_1.useEffect)(() => {
+        // listen to video changes
+        const subscription = video$.subscribe(async (video) => {
+            console.debug('[EmbeddedVideoEditor] handling video change', video);
+            // skip if there's no video
+            if (!video) {
+                setState('invalid');
+                return;
+            }
+            // or if there's already a thumb
+            else if (video.thumbUrl) {
+                setState('valid');
+                return;
+            }
+            // mark as validating
+            setState('validating');
+            // try to fetch thumb
+            const thumbUrl = await getVideoThumbnailUrl(video);
+            // skip if video has changed (debounced)
+            if (video$.value !== video) {
+                return;
+            }
+            // or fail if we couldn't get a thumbnail (means no video)
+            if (!thumbUrl) {
+                setState('error');
+            }
+            // otherwise, update video with valid thumb
+            else {
+                // update video
+                video$.next(Object.assign(Object.assign({}, video), { thumbUrl: thumbUrl.href }));
+                // update state
+                setState('valid');
+                // touch (just in case we were already valid)
+                touch();
+            }
+        });
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [touch, video$]);
+    // helpers
+    const canSave = () => {
+        return state === 'valid';
+    };
+    const onSave = async () => {
+        var _a;
+        // blow up if missing uri (should never happen)
+        if (!video || state !== 'valid') {
+            throw new funnel_core_1.IllegalStateError('Missing URI');
+        }
+        // resolve embed (we're done)
+        const muted = (_a = funnel_core_1.Schema.BooleanField.Value.fromData(mutedField.value)) !== null && _a !== void 0 ? _a : true;
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(funnel_core_1.Schema.EmbeddedVideoField.Value.toData(Object.assign(Object.assign({}, video), { muted })));
+        // refresh
+        touch();
+    };
+    const onCancel = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // cancel
+        deferral.resolve(undefined);
+        // touch
+        touch();
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { title: `${initialValue ? 'Edit' : 'Add'} ${name}`, open: !!deferral && !deferral.isComplete, placement: "right", anchor: anchor, anchorOffset: 4, canSave: canSave, onSave: onSave, onClose: onCancel, disabled: false, children: [description &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), renderPreview({ state, video }), (0, jsx_runtime_1.jsxs)(FieldErrorController_1.FieldErrorController, { errorLevel: "none", children: [(0, jsx_runtime_1.jsx)(TextField_1.TextField, { field: uriField }), (schema === null || schema === void 0 ? void 0 : schema.allowMuting) &&
+                        (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: mutedField })] })] }));
+});
+async function getVideoThumbnailUrl(video) {
+    // skip if there's no video
+    if (!video) {
+        return null;
+    }
+    // try to get valid thumbnail
+    try {
+        // fetch thumb for youtube
+        if (video.type === 'youtube') {
+            // construct thumb url
+            const thumbnailUrl = new URL(`https://i.ytimg.com/vi/${video.videoId}/maxresdefault.jpg`);
+            // fail if there's no valid image
+            const response = await fetch(thumbnailUrl);
+            if (!response.ok) {
+                return null;
+            }
+            // or return it
+            else {
+                return thumbnailUrl;
+            }
+        }
+        // or fetch for vimeo
+        else {
+            // fetch oembed metadata
+            const videoUrl = funnel_core_1.Schema.EmbeddedVideoField.Value.toUrl(video);
+            const videoInfoUrl = new URL('https://vimeo.com/api/oembed.json');
+            videoInfoUrl.searchParams.set('url', videoUrl.href);
+            videoInfoUrl.searchParams.set('width', '1280');
+            videoInfoUrl.searchParams.set('height', '720');
+            const response = await fetch(videoInfoUrl.href);
+            // fail if it didn't come back
+            if (!response.ok) {
+                return null;
+            }
+            // or return thumbnail url
+            const oembed = await response.json();
+            return (oembed === null || oembed === void 0 ? void 0 : oembed.thumbnail_url)
+                ? new URL(oembed.thumbnail_url)
+                : null;
+        }
+    }
+    // or fail
+    catch (e) {
+        console.error('[getVideoThumbnailUrl] failed to fetch vimeo info', e);
+        return null;
+    }
+}
+function renderPreview({ state, video }) {
+    // show loader if checking
+    let content;
+    if (state === 'validating') {
+        content = (0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "md" });
+    }
+    // or error if something went wrong
+    else if (state === 'error') {
+        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-destructive-content", variant: "CircleAlert" }), (0, jsx_runtime_1.jsx)("h3", { className: "body-sm text-destructive-content", children: "Please enter a valid YouTube or Vimeo link" })] }));
+    }
+    // or render thumb if valid
+    else if (state === 'valid' && (video === null || video === void 0 ? void 0 : video.thumbUrl)) {
+        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { className: "absolute inset-0 w-full h-full object-cover", src: video.thumbUrl, alt: "Video preview thumbnail" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('glass-overlay absolute bottom-l5 h-26 flex items-center gap-l4 px-l6', 'border-t border-solid border-glass-stroke-l1 rounded-full', 'label-xs text-content-primary'), children: (0, jsx_runtime_1.jsx)("a", { className: "hover:underline active: no-underline", href: funnel_core_1.Schema.EmbeddedVideoField.Value.toUrl(video, 'watch').href, target: "_blank", rel: "noreferrer", children: video.type === 'youtube' ? 'Youtube Video' : 'Vimeo Video' }) })] }));
+    }
+    // or instructions
+    else {
+        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-primary", variant: "SquarePlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-sm text-content-primary", children: "Embed a video using a YouTube or Vimeo link" }), (0, jsx_runtime_1.jsx)("p", { className: "label-xs text-content-tertiary", children: "You can paste the main or embed link." })] })] }));
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('min-h-[209px] relative', 'flex flex-col justify-center items-center gap-l5 p-l9 select-none overflow-hidden', 'border border-border-l1 rounded-md', {
+            'bg-destructive/tint0 border-destructive-content': state === 'error',
+            'bg-background border-solid  border-border-l1': state === 'valid',
+            'bg-background border-dashed  border-border-l1': state !== 'error' && state !== 'valid'
+        }), children: content }));
+}

package/dist/core/components/fields/embed/index.d.ts

@@ -0,0 +1,2 @@
+export * from './EmbeddedVideoCard';
+export * from './EmbeddedVideoEditor';

package/dist/core/components/fields/embed/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./EmbeddedVideoCard"), exports);
+__exportStar(require("./EmbeddedVideoEditor"), exports);

package/dist/core/components/fields/factories/AssetFactory.d.ts

@@ -0,0 +1,11 @@
+import { Callback, Schema } from '@nascentdigital/funnel-core';
+export declare function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw }: AssetFactory.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AssetFactory {
+    type Props = {
+        schema: Schema.AssetField;
+        assetId?: Schema.Asset.Id;
+        anchor: HTMLElement;
+        onCommit: Callback<Schema.Field.Data<Schema.AssetField>>;
+        onCancel: Callback.Void;
+    };
+}