@nascentdigital/funnel-editor 4.4.18

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

@@ -0,0 +1 @@
+export { FieldValueFactory } from './FieldValueFactory';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldValueFactory = void 0;
+var FieldValueFactory_1 = require("./FieldValueFactory");
+Object.defineProperty(exports, "FieldValueFactory", { enumerable: true, get: function () { return FieldValueFactory_1.FieldValueFactory; } });

package/dist/core/components/fields/form/FormFieldEditor.d.ts

@@ -0,0 +1,18 @@
+import { Field, PartialBy, Rect, Schema } from '@nascentdigital/funnel-core';
+export declare const FormFieldEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<FormFieldEditor.Ref>>;
+export declare namespace FormFieldEditor {
+    type Data = {
+        id: string;
+        value: Schema.FormField.FieldConfig;
+    };
+    type Props = {};
+    interface Ref {
+        edit(options: Options): Promise<Data | undefined>;
+    }
+    type Options = {
+        form: Field<Schema.FormField>;
+        schema: Schema.Field.Type;
+        initialValue: PartialBy<Data, 'value'>;
+        anchor: HTMLElement | Rect;
+    };
+}

package/dist/core/components/fields/form/FormFieldEditor.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldEditor = 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 react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const FieldEditor_1 = require("../FieldEditor");
+const FieldErrorController_1 = require("../FieldErrorController");
+// component
+exports.FormFieldEditor = (0, react_1.forwardRef)(function FormFieldEditor(_, ref) {
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
+    const [id, setId] = (0, react_1.useState)();
+    const [form, setForm] = (0, react_1.useState)();
+    const [schema, setSchema] = (0, react_1.useState)();
+    const [initialValue, setInitialValue] = (0, react_1.useState)();
+    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [errorLevel, setErrorLevel] = (0, react_1.useState)('none');
+    const touch = (0, client_1.useTouch)();
+    const { nameField, hintField, descriptionField } = (0, hooks_1.useTempFields)({
+        nameField: funnel_core_1.Schema.Field.text({
+            semantics: 'short',
+            name: 'Label',
+            hint: 'Field label',
+            description: 'Used as a label',
+            required: true
+        }),
+        hintField: funnel_core_1.Schema.Field.text({
+            semantics: 'short',
+            name: 'Hint',
+            hint: 'Hint text',
+            description: 'Placeholder text for the field',
+            required: false
+        }),
+        descriptionField: funnel_core_1.Schema.Field.text({
+            semantics: 'short',
+            name: 'Description',
+            hint: 'Provide a short explanation',
+            description: 'A description that provides a summary of what you expect to capture (and maybe why)',
+            required: false
+        })
+    });
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        edit: async ({ form, schema, initialValue: { id, value }, anchor }) => {
+            // reset state
+            setId(id);
+            setForm(form);
+            setSchema(schema);
+            setInitialValue(value);
+            setAnchor(anchor);
+            setErrorLevel('none');
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // sync fields
+    (0, react_1.useEffect)(() => {
+        // resolve value (force defaults)
+        const { name = schema === null || schema === void 0 ? void 0 : schema.name, hint, description, order = 1 } = initialValue !== null && initialValue !== void 0 ? initialValue : {};
+        nameField.reset(name ? funnel_core_1.Schema.TextField.Value.toData(name) : null);
+        hintField.reset(hint ? funnel_core_1.Schema.TextField.Value.toData(hint) : null);
+        descriptionField.reset(description ? funnel_core_1.Schema.TextField.Value.toData(description) : null);
+    }, [schema, nameField, hintField, descriptionField, initialValue]);
+    // helpers
+    const canSave = () => {
+        // check for validity
+        const valid = nameField.valid
+            && (!hintField.exists || hintField.valid)
+            && (!descriptionField.exists || descriptionField.valid);
+        // update error level
+        setErrorLevel(valid ? 'critical' : 'all');
+        // return result
+        return valid;
+    };
+    const onSave = async () => {
+        // blow up if we're missing stuff
+        const name = funnel_core_1.Schema.TextField.Value.fromData(nameField.value);
+        const hint = funnel_core_1.Schema.TextField.Value.fromData(hintField.value);
+        const description = funnel_core_1.Schema.TextField.Value.fromData(descriptionField.value);
+        if (!id || !name) {
+            throw new funnel_core_1.IllegalStateError('Missing id/name');
+        }
+        // transform page link if page was picked
+        const result = {
+            id,
+            value: {
+                name,
+                order: funnel_core_1.Ordinal.new().order
+            }
+        };
+        // add hint/description (if available)
+        if (hint) {
+            result.value.hint = hint;
+        }
+        if (description) {
+            result.value.description = description;
+        }
+        // resolve link (we're done)
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(result);
+        // refresh
+        touch();
+    };
+    const onCancel = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // cancel
+        deferral.resolve(undefined);
+        // touch
+        touch();
+    };
+    // render
+    const { name = '', description } = schema !== null && schema !== void 0 ? schema : {};
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { title: `Update ${name} field`, open: !!deferral && !deferral.isComplete, anchor: anchor, anchorOffset: 4, canSave: canSave, onSave: onSave, onClose: onCancel, children: [description &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), (0, jsx_runtime_1.jsxs)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: nameField, autoFocus: true }), (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: hintField }), (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: descriptionField })] })] }));
+});

package/dist/core/components/fields/form/FormFieldItem.d.ts

@@ -0,0 +1,15 @@
+import { Callback, Field, Forms, Schema } from '@nascentdigital/funnel-core';
+import { MouseEvent } from 'react';
+export declare function FormFieldItem({ className, id, schema, value, disabled, onClick }: FormFieldItem.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormFieldItem {
+    type Props = {
+        className?: string;
+        id: string;
+        form: Field<Schema.FormField>;
+        formSchema: Forms.Config;
+        schema: Schema.Field.Type;
+        value?: Schema.FormField.FieldConfig;
+        disabled?: boolean;
+        onClick?: Callback<MouseEvent<HTMLElement>>;
+    };
+}

package/dist/core/components/fields/form/FormFieldItem.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldItem = FormFieldItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../../visuals");
+// component
+function FormFieldItem({ className, id, schema, value, disabled = false, onClick = funnel_core_1.Fn.NoOp }) {
+    // render
+    const { name = schema.name } = value !== null && value !== void 0 ? value : {};
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'FieldCard grid grid-cols-[max-content_max-content_1fr] items-center gap-l6 px-l6 py-l4', {
+            'FieldCard-disabled': disabled
+        }), onClick: disabled ? undefined : onClick, children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: getFieldIcon(schema), size: "sm" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-center items-start gap-l1", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-tertiary uppercase", children: getFieldType(schema) }), (0, jsx_runtime_1.jsx)("span", { className: "body-xs body-strong text-content-secondary", children: id })] }), (0, jsx_runtime_1.jsx)("h3", { className: "text-end text-ellipsis body-sm text-content-primary", children: name !== null && name !== void 0 ? name : schema.name })] }));
+}
+// helpers
+function getFieldIcon(schema) {
+    switch (schema.type) {
+        case 'text':
+            switch (schema.semantics) {
+                case 'short':
+                    return 'TextAlignStart';
+                case 'long':
+                    return 'TextAlignStart';
+                case 'email':
+                    return 'TextAlignStart';
+                case 'password':
+                case 'password-input':
+                    return 'TextAlignStart';
+                case 'phone':
+                case 'phone-intl':
+                    return 'TextAlignStart';
+                case 'uri':
+                case 'url':
+                    return 'TextAlignStart';
+                case 'slug':
+                    return 'TextAlignStart';
+                case 'integer':
+                    return 'TextAlignStart';
+                default:
+                    return 'TextAlignStart';
+            }
+        default:
+            return 'TextAlignStart';
+    }
+}
+function getFieldType(schema) {
+    switch (schema.type) {
+        case 'text':
+            switch (schema.semantics) {
+                case 'short':
+                    return 'Short Text';
+                case 'long':
+                    return 'Long Text';
+                case 'email':
+                    return 'Email Address';
+                case 'password':
+                case 'password-input':
+                    return 'Password';
+                case 'phone':
+                case 'phone-intl':
+                    return 'Phone Number';
+                case 'uri':
+                case 'url':
+                    return 'URL';
+                case 'slug':
+                    return 'Slug';
+                case 'integer':
+                    return 'Numeric';
+                default:
+                    return 'Unknown';
+            }
+        default:
+            return schema.type;
+    }
+}

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

@@ -0,0 +1,2 @@
+export * from './FormFieldEditor';
+export * from './FormFieldItem';

package/dist/core/components/fields/form/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("./FormFieldEditor"), exports);
+__exportStar(require("./FormFieldItem"), exports);

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

@@ -0,0 +1,8 @@
+export * from './DateField';
+export * from './FieldEditor';
+export * from './FieldErrorController';
+export * from './FieldsPanel';
+export * from './RichTextEditor';
+export * from './RichTextField';
+export * from './TextField';
+export * from './TimestampField';

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

@@ -0,0 +1,24 @@
+"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("./DateField"), exports);
+__exportStar(require("./FieldEditor"), exports);
+__exportStar(require("./FieldErrorController"), exports);
+__exportStar(require("./FieldsPanel"), exports);
+__exportStar(require("./RichTextEditor"), exports);
+__exportStar(require("./RichTextField"), exports);
+__exportStar(require("./TextField"), exports);
+__exportStar(require("./TimestampField"), exports);

package/dist/core/components/fields/link/LinkCard.d.ts

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

package/dist/core/components/fields/link/LinkCard.js

@@ -0,0 +1,95 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkCard = LinkCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../../../hooks");
+const visuals_1 = require("../../visuals");
+const FieldCardLayout_1 = require("../FieldCardLayout");
+// component
+function LinkCard(_a) {
+    var _b, _c, _d;
+    var { className, field } = _a, props = __rest(_a, ["className", "field"]);
+    // bind props
+    const { schema, value: data } = field;
+    const { value } = data !== null && data !== void 0 ? data : {};
+    const { embedded = false } = props;
+    const store = (0, hooks_1.usePossiblePageRefStore)();
+    // sync field
+    (0, hooks_1.useField)(field);
+    // render content
+    let cta;
+    let headline;
+    let caption;
+    if (!value) {
+        cta = 'Click here to setup your link';
+    }
+    else if (value.type === 'internal') {
+        // fail if there's no store available
+        if (!store) {
+            throw new funnel_core_1.IllegalStateError('Cannot access internal links outside of the PageContext');
+        }
+        // render loader if page isn't ready
+        const pageId = (_c = (_b = value.page) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.id;
+        const page = pageId && store.getPageRef(pageId);
+        if (!page) {
+            // broken if not load (otherwise leaving empty shows loader)
+            if (!store.syncing && !store.modified) {
+                return ((0, jsx_runtime_1.jsx)("span", { className: "label-md text-destructive-content", children: "Broken page link!" }));
+            }
+        }
+        // or set page details
+        else {
+            headline = page.name;
+            caption = page.url;
+        }
+    }
+    // or render email link
+    else if (value.type === 'email') {
+        const { label, email, subject } = value;
+        headline = label;
+        caption = email;
+    }
+    // or render tel phone
+    else if (value.type === 'phone') {
+        const { label, number } = value;
+        headline = label;
+        caption = number;
+    }
+    // or render file
+    else if (value.type === 'file') {
+        const { label, action } = value;
+        headline = label;
+        caption = (_d = value.file) === null || _d === void 0 ? void 0 : _d.url;
+    }
+    // or render file
+    else {
+        const { label, url } = value;
+        headline = label;
+        caption = url;
+    }
+    // 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: (0, classnames_1.default)('w-full h-full flex flex-col justify-center items-center gap-l3 px-l5', 'text-center text-pretty'), children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-ix-primary mb-l1", variant: "Link", size: "md" }), cta &&
+                    (0, jsx_runtime_1.jsx)("h5", { className: "label-sm label-strong text-content-secondary", children: cta }), headline &&
+                    (0, jsx_runtime_1.jsx)("h5", { className: "label-xs label-strong text-content-secondary ellipsis", children: headline }), caption &&
+                    (0, jsx_runtime_1.jsx)("h5", { className: "body-xs text-content-tertiary ellipsis", children: caption })] }) })));
+}
+// helper
+function renderError(message) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: "label-md text-destructive-content", children: message }));
+}

package/dist/core/components/fields/link/LinkEditor.d.ts

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

package/dist/core/components/fields/link/LinkEditor.js

@@ -0,0 +1,232 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkEditor = 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 hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const transitions_1 = require("../../transitions");
+const FieldEditor_1 = require("../FieldEditor");
+const FieldErrorController_1 = require("../FieldErrorController");
+const FieldLayout_1 = require("../FieldLayout");
+const page_1 = require("../page");
+const TextField_1 = require("../TextField");
+// component
+exports.LinkEditor = (0, react_1.forwardRef)(function LinkEditor({ region, language }, ref) {
+    var _a;
+    // 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 [pickedPage, setPickedPage] = (0, react_1.useState)();
+    const [pickingPage, setPickingPage] = (0, react_1.useState)(false);
+    const [errorLevel, setErrorLevel] = (0, react_1.useState)('none');
+    const pageStore = (0, hooks_1.usePossiblePageRefStore)();
+    const touch = (0, client_1.useTouch)();
+    const { uriField, labelField } = (0, hooks_1.useTempFields)({
+        uriField: funnel_core_1.Schema.Field.uri({
+            name: 'Target',
+            hint: 'URL, email, or phone number',
+            required: true
+        }),
+        labelField: funnel_core_1.Schema.Field.text({
+            name: 'Label',
+            hint: 'Provide a label for your link',
+            required: true
+        }),
+    });
+    const pagePickerRef = (0, react_1.useRef)(null);
+    const { name = '', description, allowInternal = false, internalOptions: { pageTypes = 'all' } = {} } = schema !== null && schema !== void 0 ? schema : {};
+    const pagesAvailable = allowInternal && pageStore !== undefined;
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        edit: async ({ schema, initialValue, anchor }) => {
+            // reset state
+            setSchema(schema);
+            setInitialValue(initialValue);
+            setAnchor(anchor);
+            setPickedPage(undefined);
+            setPickingPage(false);
+            setErrorLevel('none');
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // bind initial value
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // clear uri if there's no initial value
+        const { value } = initialValue !== null && initialValue !== void 0 ? initialValue : {};
+        if (!value) {
+            console.debug('[LinkEditor/bind] no initial value');
+            labelField.reset(null);
+            uriField.reset(null);
+            setPickedPage(undefined);
+        }
+        // or handle page
+        else if (value.type === 'internal') {
+            console.debug('[LinkEditor/bind] binding page', value);
+            // get page ref
+            const { page } = value;
+            const pageId = (_a = page === null || page === void 0 ? void 0 : page.value) === null || _a === void 0 ? void 0 : _a.id;
+            const pageRef = pageId && (pageStore === null || pageStore === void 0 ? void 0 : pageStore.getPageRef(pageId));
+            // set it if we have one
+            labelField.reset(value.label ? funnel_core_1.Schema.TextField.Value.toData(value.label) : null);
+            uriField.reset(null);
+            setPickedPage(pageRef);
+        }
+        // or reverse the uri
+        else {
+            console.debug('[LinkEditor/bind] binding url', value);
+            // clear picked page
+            setPickedPage(undefined);
+            // set the label
+            labelField.reset(value.label ? funnel_core_1.Schema.TextField.Value.toData(value.label) : null);
+            // set the uri
+            switch (value.type) {
+                case 'email': {
+                    if (value.subject) {
+                        uriField.reset(funnel_core_1.Schema.TextField.Value.toData(funnel_core_1.Schema.LinkField.Value.toUrl(value)));
+                    }
+                    else {
+                        uriField.reset(funnel_core_1.Schema.TextField.Value.toData(value.email));
+                    }
+                    break;
+                }
+                case 'phone':
+                    uriField.reset(funnel_core_1.Schema.TextField.Value.toData(value.number));
+                    break;
+                default:
+                    uriField.reset(funnel_core_1.Schema.TextField.Value.toData(funnel_core_1.Schema.LinkField.Value.toUrl(value)));
+                    break;
+            }
+        }
+    }, [labelField, uriField, pageStore, initialValue]);
+    // helpers
+    const onPickPage = async () => {
+        var _a;
+        // ignore if schema doesn't support pages
+        if (!pagesAvailable) {
+            return;
+        }
+        console.debug('[LinkEditor] opening picker for page types:', pageTypes);
+        // pick page (ignore if nothing got picked)
+        setPickingPage(true);
+        const pageRef = await ((_a = pagePickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({
+            pageTypes
+        }));
+        setPickingPage(false);
+        // set page (only if the user picked something)
+        if (pageRef) {
+            setPickedPage(pageRef);
+        }
+    };
+    const canSave = () => {
+        // check for validity
+        const valid = (!!pickedPage || uriField.valid) && labelField.valid;
+        // update error level
+        setErrorLevel(valid ? 'critical' : 'all');
+        // return result
+        return valid;
+    };
+    const onSave = async () => {
+        // blow up if we're missing stuff
+        const label = funnel_core_1.Schema.TextField.Value.fromData(labelField.value);
+        const uri = funnel_core_1.Schema.TextField.Value.fromData(uriField.value);
+        if (!label || (!uri && !pickedPage)) {
+            throw new funnel_core_1.IllegalStateError('Missing label');
+        }
+        // transform page link if page was picked
+        let result;
+        if (pickedPage) {
+            result = {
+                type: 'internal',
+                label,
+                page: funnel_core_1.Schema.PageField.Value.toData({
+                    id: pickedPage.id,
+                    type: pickedPage.template.type,
+                    scope: 'link'
+                })
+            };
+        }
+        // or transform uri
+        else {
+            // blow up if missing uri (should never happen)
+            if (!uri) {
+                throw new funnel_core_1.IllegalStateError('Missing URI');
+            }
+            // blow if uri is invalid (should never happen)
+            const invalidUri = '__invalid__';
+            const url = funnel_core_1.UrlUtils.coerce(uri, invalidUri);
+            if (url === invalidUri) {
+                throw new funnel_core_1.IllegalStateError(`Invalid URI: "${uri}"`);
+            }
+            // create email link
+            if (funnel_core_1.Value.isEmailLink(url)) {
+                const mailto = funnel_core_1.UrlUtils.parseMailto(url);
+                result = {
+                    type: 'email',
+                    label,
+                    email: mailto.email,
+                    subject: mailto.subject
+                };
+            }
+            // create phone link
+            else if (funnel_core_1.Value.isPhoneNumberLink(url)) {
+                const tel = funnel_core_1.UrlUtils.parseTel(url);
+                result = {
+                    type: 'phone',
+                    label,
+                    number: tel
+                };
+            }
+            // otherwise just use raw url
+            else {
+                result = {
+                    type: 'external',
+                    label,
+                    url
+                };
+            }
+        }
+        console.debug('[LinkEditor] saving link', result);
+        // resolve link (we're done)
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(funnel_core_1.Schema.LinkField.Value.toData(result));
+        // 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' : 'Create'} ${name}`, open: !!deferral && !deferral.isComplete, anchor: anchor, anchorOffset: 4, canSave: canSave, onSave: onSave, onClose: onCancel, disabled: pickingPage, children: [description &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), (0, jsx_runtime_1.jsxs)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: labelField, autoFocus: true }), pickedPage
+                        // show picked page (if selected)
+                        ?
+                            (0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { children: (0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { label: "Page Link", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-[1fr_min-content] items-center gap-l5", children: [(0, jsx_runtime_1.jsx)(interaction_1.Chip, { className: "col-start-1", label: (0, jsx_runtime_1.jsxs)("span", { className: "grid grid-cols-[max-content_1fr] items-center gap-l3", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('col-start-1 inline-block px-l2 py-l1', 'body-xs text-content-tertiary bg-surface2', 'border border-solid border-border-l2 rounded-sm'), children: pickedPage.template.name }), (0, jsx_runtime_1.jsx)("span", { className: "col-start-2 label-sm ellipsis", children: (_a = pickedPage.name) !== null && _a !== void 0 ? _a : pickedPage.url })] }), onClick: onPickPage, onDelete: () => setPickedPage(undefined) }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { className: "col-start-2", icon: "Globe", onClick: onPickPage })] }) }) }, "field.picker")
+                        // or input field
+                        :
+                            (0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { children: (0, jsx_runtime_1.jsx)(TextField_1.TextField, { field: uriField, controls: pagesAvailable
+                                        ?
+                                            (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "Globe", onClick: onPickPage })
+                                        : undefined }) }, "field.input")] }), allowInternal &&
+                (0, jsx_runtime_1.jsx)(page_1.PagePicker, { ref: pagePickerRef, language: language })] }));
+});

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

@@ -0,0 +1,2 @@
+export * from './LinkCard';
+export * from './LinkEditor';