@nascentdigital/funnel-editor 4.5.7 → 4.6.0

package/dist/styles/index.css

@@ -499,6 +499,13 @@ video {
 [hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
+
+[popover]{
+    inset: var(--toolwind-toggle-nEDo9QfADx, 0px);
+    background-color: var(--toolwind-toggle-d4U08Ws6b8, canvas);
+    color: var(--toolwind-toggle-00SqTQfWhn, canvastext);
+    margin: var(--toolwind-toggle-sxV90D1uFT, auto);
+}
     html, body, #__next, .Editor-wrap{
     position: relative;
     height: 100lvh;
@@ -2730,6 +2737,18 @@ video {
     --tw-border-opacity: 1;
     border-color: rgb(var(--color-ix-primary) / var(--tw-border-opacity, 1));
 }
+.FieldCard-hover.FieldCard{
+    --tw-border-opacity: 1;
+    border-color: rgb(var(--color-ix-primary) / var(--tw-border-opacity, 1));
+}
+.FieldCard-press.FieldCard{
+    --tw-scale-x: .97;
+    --tw-scale-y: .97;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
+        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+        transition-duration: 200ms;
+}
 .iconbutton{
     flex-shrink: 0;
     cursor: pointer;
@@ -4229,30 +4248,26 @@ video {
 :root {
         --nd-visual-width: unset;
         --nd-visual-height: unset;
+        --nd-visual-max-width: unset;
+        --nd-visual-max-height: unset;
         --nd-visual-anchor: center;
-    }
-.nd-Visual-image{
-    -o-object-fit: cover;
-       object-fit: cover;
-        -o-object-position: var(--nd-visual-anchor);
-           object-position: var(--nd-visual-anchor);
-}
-.nd-Visual-image img{
-    -o-object-fit: cover;
-       object-fit: cover;
-            -o-object-position: var(--nd-visual-anchor);
-               object-position: var(--nd-visual-anchor);
-}
-.nd-Visual-video{
-    -o-object-fit: cover;
-       object-fit: cover;
-        aspect-ratio: var(--nd-visual-width) / var(--nd-visual-height);
-        -o-object-position: var(--nd-visual-anchor);
-           object-position: var(--nd-visual-anchor);
-}
-.nd-Visual-video video{
-    -o-object-fit: cover;
-       object-fit: cover;
+        --nd-visual-aspect: unset;
+        --nd-visual-object-fit: unset;
+    }
+.nd-Visual-image,
+    .nd-Visual-video
+    {
+        aspect-ratio: var(--nd-visual-aspect, var(--_nd-visual-native-width) / var(--_nd-visual-native-height));
+        max-width: var(--nd-visual-max-width, 100%);
+        max-height: var(--nd-visual-max-height, 100%);
+        width: var(--nd-visual-width, calc(var(--_nd-visual-native-width) * 1px));
+        height: var(--nd-visual-height, calc(var(--_nd-visual-native-height) * 1px));
+    }
+.nd-Visual-image img, .nd-Visual-image video, .nd-Visual-video img, .nd-Visual-video video{
+    width: 100%;
+    height: 100%;
+            -o-object-fit: var(--nd-visual-object-fit, cover);
+               object-fit: var(--nd-visual-object-fit, cover);
             -o-object-position: var(--nd-visual-anchor);
                object-position: var(--nd-visual-anchor);
 }
@@ -4274,6 +4289,9 @@ video {
 .static{
     position: static;
 }
+.\!fixed{
+    position: fixed !important;
+}
 .fixed{
     position: fixed;
 }
@@ -4367,9 +4385,6 @@ video {
 .col-span-10{
     grid-column: span 10 / span 10;
 }
-.col-span-2{
-    grid-column: span 2 / span 2;
-}
 .col-span-4{
     grid-column: span 4 / span 4;
 }
@@ -4779,9 +4794,6 @@ video {
 .w-8\/12{
     width: 66.666667%;
 }
-.w-\[100px\]{
-    width: 100px;
-}
 .w-\[120px\]{
     width: 120px;
 }
@@ -5514,6 +5526,9 @@ video {
 .p-3{
     padding: 3px;
 }
+.p-l1{
+    padding: 2px;
+}
 .p-l2{
     padding: 4px;
 }
@@ -5591,6 +5606,10 @@ video {
     padding-top: 72px;
     padding-bottom: 72px;
 }
+.py-l2{
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
 .py-l3{
     padding-top: 6px;
     padding-bottom: 6px;
@@ -5611,6 +5630,9 @@ video {
     padding-top: 24px;
     padding-bottom: 24px;
 }
+.pb-l10{
+    padding-bottom: 40px;
+}
 .pb-l3{
     padding-bottom: 6px;
 }
@@ -5653,6 +5675,9 @@ video {
 .pt-10{
     padding-top: 10px;
 }
+.pt-l10{
+    padding-top: 40px;
+}
 .pt-l12{
     padding-top: 56px;
 }
@@ -5699,9 +5724,6 @@ video {
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
-.leading-\[100\%\]{
-    line-height: 100%;
-}
 .leading-\[20px\]{
     line-height: 20px;
 }
@@ -5712,10 +5734,6 @@ video {
     --tw-text-opacity: 1;
     color: rgb(var(--color-background) / var(--tw-text-opacity, 1));
 }
-.text-border-l1{
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-border-l1) / var(--tw-text-opacity, 1));
-}
 .text-content-button{
     --tw-text-opacity: 1;
     color: rgb(var(--color-content-button) / var(--tw-text-opacity, 1));
@@ -5901,6 +5919,44 @@ video {
 .\@container{
     container-type: inline-size;
 }
+.\!anchor{
+    }
+.anchor{
+    }
+.anchor\/\[--nd-popup-anchor\]{
+    anchor-name: var(--nd-popup-anchor);
+}
+.anchored{
+    }
+.anchored-bottom{
+    position-area: bottom;
+}
+.anchored-bottom-span-left{
+    position-area: bottom span-left;
+}
+.anchored-left{
+    position-area: left;
+}
+.anchored-right{
+    position-area: right;
+}
+.anchored-top{
+    position-area: top;
+}
+.anchored-top-span-right{
+    position-area: top span-right;
+}
+.anchored\/\[--nd-popup-anchor\]{
+    position-anchor: var(--nd-popup-anchor);
+}
+.anchored\/\[--nd-popup-anchor\]:where(.anchored\/\[--nd-popup-anchor\]){
+    position: absolute;
+    view-transition-name: --tw-anchor-view-transition-2j1919322s193433343934192p322r2w33362l;
+    --toolwind-toggle-nEDo9QfADx: auto;
+    --toolwind-toggle-d4U08Ws6b8: transparent;
+    --toolwind-toggle-00SqTQfWhn: inherit;
+    --toolwind-toggle-sxV90D1uFT: 0px;
+}
 .counter-l1{
     counter-reset: l1;
 }
@@ -5989,6 +6045,43 @@ video {
             pointer-events: auto;
         }
     }
+.scroller-edge{
+    border-top-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+
+        animation: scroller-edge linear both;
+        animation-timeline: scroll(self);
+        animation-range: 0px 20px;
+}
+/* animation */
+@keyframes scroller-edge {
+        from {
+            border-top-color: transparent;
+        }
+        to {
+            border-top-color: #3b82f6;
+        }
+    }
+.scroller-fade-top{
+    position: relative;
+}
+/* overlay */
+.scroller-fade-top::before{
+    position: sticky;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    z-index: 2;
+    display: block;
+    height: 16px;
+    width: 100%;
+    background-color: inherit;
+    --tw-content: "\00a0";
+    content: var(--tw-content);
+            -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+                    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+}
 .stacked{
     display: grid;
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -6023,13 +6116,22 @@ video {
         inherits: false;
         initial-value: #000;
     }
-.\[--nd-icon-color\:theme\(colors\.content-primary\)\]{
-    --nd-icon-color: rgb(var(--color-content-primary) / 1);
-}
 .focus-within\:field-focused:focus-within.field {
         }
 .focus-visible\:field-focused:focus-visible.field {
         }
+.group:hover .group-hover\:FieldCard-hover.FieldCard{
+    --tw-border-opacity: 1;
+    border-color: rgb(var(--color-ix-primary) / var(--tw-border-opacity, 1));
+}
+.group:active .group-active\:FieldCard-press.FieldCard{
+    --tw-scale-x: .97;
+    --tw-scale-y: .97;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
+        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+        transition-duration: 200ms;
+}
 @media (min-width: 768px){
     .md\:display-md{
         font-family: var(--font-display), sans-serif;
@@ -6198,9 +6300,6 @@ video {
 .hover\:underline:hover{
     text-decoration-line: underline;
 }
-.hover\:opacity-full:hover{
-    opacity: 1;
-}
 .hover\:outline-ix-primary\/\[\.35\]:hover{
     outline-color: rgb(var(--color-ix-primary) / .35);
 }
@@ -6309,9 +6408,6 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--color-ix-primary-hover) / var(--tw-bg-opacity, 1));
 }
-.group:hover .group-hover\:bg-ix-primary\/tint1{
-    background-color: rgb(var(--color-ix-primary) / .1);
-}
 .group:hover .group-hover\:bg-ix-util-hover\/tint1{
     background-color: rgb(var(--color-ix-util-hover) / .1);
 }
@@ -6319,6 +6415,10 @@ video {
     --tw-text-opacity: 1;
     color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
 }
+.group:hover .group-hover\:text-content-secondary{
+    --tw-text-opacity: 1;
+    color: rgb(var(--color-content-secondary) / var(--tw-text-opacity, 1));
+}
 .group:focus-visible .group-focus-visible\:outline-ix-primary{
     outline-color: rgb(var(--color-ix-primary) / 1);
 }
@@ -6335,12 +6435,13 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--color-ix-primary-press) / var(--tw-bg-opacity, 1));
 }
-.group:active .group-active\:bg-ix-primary\/tint3{
-    background-color: rgb(var(--color-ix-primary) / .3);
-}
 .group:active .group-active\:bg-ix-util-press\/tint2{
     background-color: rgb(var(--color-ix-util-press) / .2);
 }
+.group:active .group-active\:text-content-primary{
+    --tw-text-opacity: 1;
+    color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
+}
 .group:active .group-active\:text-content-tertiary{
     --tw-text-opacity: 1;
     color: rgb(var(--color-content-tertiary) / var(--tw-text-opacity, 1));
@@ -6494,6 +6595,10 @@ video {
         display: block;
     }
 
+    .lg\:flex{
+        display: flex;
+    }
+
     .lg\:w-\[240px\]{
         width: 240px;
     }

package/dist/styles/tailwind.js

@@ -9,6 +9,7 @@ const plugin_1 = __importDefault(require("tailwindcss/plugin"));
 const Tailwind_1 = require("@nascentdigital/funnel-ui/Tailwind");
 const aspect_ratio_1 = __importDefault(require("@tailwindcss/aspect-ratio"));
 const container_queries_1 = __importDefault(require("@tailwindcss/container-queries"));
+const anchors_1 = __importDefault(require("@toolwind/anchors"));
 // tailwind
 exports.EditorTailwindConfig = {
     content: [
@@ -258,15 +259,16 @@ exports.EditorTailwindConfig = {
                 'quad-in-out': 'cubic-bezier(0.45, 0, 0.55, 1)',
                 'cube-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
                 'cube-out': 'cubic-bezier(0.33, 1, 0.68, 1)',
-                'cube-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
+                'cube-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)'
             }
         }
     },
     plugins: [
         aspect_ratio_1.default,
         container_queries_1.default,
+        anchors_1.default,
+        // counter: provides custom counting control via tailwind
         (0, plugin_1.default)(function ({ matchUtilities, matchVariant, theme }) {
-            // counter: provides custom counting control via tailwind
             matchUtilities({
                 'counter': (value) => ({
                     counterReset: value
@@ -280,7 +282,9 @@ exports.EditorTailwindConfig = {
             }, {
                 values: theme('counterName')
             });
-            // avoid: avoids child component (pass in selector to thing you want to not match)
+        }),
+        // avoid: avoids child component (pass in selector to thing you want to not match)
+        (0, plugin_1.default)(function ({ matchUtilities, matchVariant, theme }) {
             matchVariant('avoid', child => `&:not(:has(${child}:hover, ${child}:focus-visible, ${child}:active))`);
         })
     ]

package/dist/users/screens/UserExplorer.js

@@ -12,6 +12,7 @@ const core_1 = require("../../core");
 // component
 function UserExplorer() {
     // bind hooks
+    const anchorId = (0, react_1.useId)();
     const userEditorRef = (0, react_1.useRef)(null);
     const { user } = (0, core_1.useAuthenticator)();
     const browser = (0, core_1.useUserBrowser)();
@@ -118,7 +119,7 @@ function renderUsers({ user: currentUser, router, browser, menu, userEditorRef,
                 await browser.sync();
             }
         };
-        const onMenuOpen = async (e, user) => {
+        const onMenuOpen = async (e, user, anchor) => {
             // consume event
             e.preventDefault();
             e.stopPropagation();
@@ -145,7 +146,7 @@ function renderUsers({ user: currentUser, router, browser, menu, userEditorRef,
             // open menu
             menu.items = menuItems;
             menu.selectedItem = undefined;
-            menu.open(e.currentTarget, user);
+            menu.open(anchor, user);
         };
         const onMenuSelect = async (item) => {
             var _a;
@@ -173,21 +174,21 @@ function renderUsers({ user: currentUser, router, browser, menu, userEditorRef,
         const { users } = browser;
         const canManageUsers = currentUser.hasAny('user.update', 'user.delete', 'user.passwordReset');
         return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center gap-l8", children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-lg text-content-primary", children: "Users" }), currentUser.has('user.create') &&
-                            (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "primary", iconLeft: "Plus", onClick: e => onCreateUser(e.currentTarget), children: "New user" })] }), (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", children: users.map(user => {
+                            (0, jsx_runtime_1.jsx)(core_1.Button, { anchorId: "user-create", variant: "primary", iconLeft: "Plus", onClick: e => onCreateUser('user-create'), children: "New user" })] }), (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", children: users.map(user => {
                         // bond props
                         const isCurrentUser = currentUser.id === user.id;
                         const isInferior = currentUser.role.compareTo(user.role) > 0;
                         // render
-                        return ((0, jsx_runtime_1.jsx)(core_1.TableItem, { details: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [user.blocked &&
+                        return ((0, jsx_runtime_1.jsx)(core_1.TableItem, { anchorId: `user-edit-${user.id}`, details: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [user.blocked &&
                                         (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "error", label: "Blocked" }), isCurrentUser &&
                                         (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "warn", label: "You" }), user.isAdmin
                                         ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "success", label: user.role.name })
                                         : user.isEditor
                                             ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "default", label: user.role.name })
                                             : (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "warn", label: user.role.name }), canManageUsers &&
-                                        (0, jsx_runtime_1.jsx)(core_1.IconButton, { className: (0, classnames_1.default)('interactive-child ml-l5', {
+                                        (0, jsx_runtime_1.jsx)(core_1.IconButton, { anchorId: `user-menu-${user.id}`, className: (0, classnames_1.default)('interactive-child ml-l5', {
                                                 'opacity-none': isInferior
-                                            }), variant: "util", size: "sm", icon: "EllipsisVertical", onClick: e => onMenuOpen(e, user), disabled: isInferior })] }), onClick: e => onEditUser(user, e.currentTarget), disabled: isInferior, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-md label-strong text-content-primary", children: user.username }), (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-secondary", children: user.email })] }) }, user.id));
+                                            }), variant: "util", size: "sm", icon: "EllipsisVertical", onClick: e => onMenuOpen(e, user, `user-menu-${user.id}`), disabled: isInferior })] }), onClick: e => onEditUser(user, `user-edit-${user.id}`), disabled: isInferior, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-md label-strong text-content-primary", children: user.username }), (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-secondary", children: user.email })] }) }, user.id));
                     }) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { controller: menu, onItemClick: onMenuSelect })] }, "changes"));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "4.5.7",
+  "version": "4.6.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -77,6 +77,7 @@
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0",
     "@tailwindcss/container-queries": "^0",
+    "@toolwind/anchors": "^1",
     "@types/node": "^22",
     "@types/url-regex-safe": "^1",
     "autoprefixer": "^10",
@@ -89,5 +90,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "aa14b53e99044a968b850c4f426e40d312a9306a"
+  "gitHead": "7fba18243bc79f94b3bd665db21f37bc7f3afd4c"
 }

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

@@ -1,10 +0,0 @@
-import { Schema } from '@nascentdigital/funnel-core';
-import { Client } from '@nascentdigital/funnel-ui';
-export declare function ClientPreview({ className, client }: ClientPreview.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace ClientPreview {
-    type Props = {
-        className?: string;
-        schema: Schema.CollectionField;
-        client: Client.Value;
-    };
-}

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

@@ -1,29 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientPreview = ClientPreview;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_ui_1 = require("@nascentdigital/funnel-ui");
-const classnames_1 = __importDefault(require("classnames"));
-// components
-function ClientPreview({ className, client }) {
-    // bind props
-    const { name, fields } = client;
-    const { logo: logoRaw, division: divisionRaw, location: locationRaw } = fields !== null && fields !== void 0 ? fields : {};
-    const logo = logoRaw === null || logoRaw === void 0 ? void 0 : logoRaw.value;
-    const division = divisionRaw === null || divisionRaw === void 0 ? void 0 : divisionRaw.value;
-    const location = locationRaw === null || locationRaw === void 0 ? void 0 : locationRaw.value;
-    // render
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'h-full flex flex-col justify-center items-center gap-l8 p-l8', '[--nd-icon-color:theme(colors.content-primary)]', '[--nd-icon-color:theme(colors.content-primary)]'), children: [logo
-                ?
-                    (0, jsx_runtime_1.jsx)(funnel_ui_1.Icon, { className: "w-[100px] h-40", icon: logo })
-                :
-                    (0, jsx_runtime_1.jsx)("div", { className: "text-border-l1 border border-dashed border-border-l1 rounded-xs p-l6", children: "Logo" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center text-center", children: [(0, jsx_runtime_1.jsx)("h4", { className: "body-xs body-strong text-content-secondary", children: name }), division && location &&
-                        (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-tertiary", children: division
-                                ? location
-                                    ? `${division}, ${location}`
-                                    : division
-                                : location })] })] }));
-}

package/dist/core/components/visuals/SkeletonLayout.d.ts

@@ -1,9 +0,0 @@
-import { BlockLayout } from '@nascentdigital/funnel-core';
-export declare function SkeletonLayout({ variant, layout }: SkeletonLayout.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace SkeletonLayout {
-    type Variant = 'mobile' | 'desktop';
-    type Props = {
-        variant: Variant;
-        layout?: Readonly<BlockLayout>;
-    };
-}