@makeswift/runtime 0.28.8-canary.2 → 0.28.8-canary.20

package/dist/cjs/testing/read-write-state.js

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var read_write_state_exports = {};
+__export(read_write_state_exports, {
+  expectReadWriteState: () => expectReadWriteState
+});
+module.exports = __toCommonJS(read_write_state_exports);
+var import_unified_state = require("../state/unified-state");
+function expectReadWriteState(state) {
+  expect((0, import_unified_state.isReadWriteState)(state)).toBe(true);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  expectReadWriteState
+});
+//# sourceMappingURL=read-write-state.js.map

package/dist/cjs/testing/read-write-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/testing/read-write-state.ts"],"sourcesContent":["import { type State, type ReadWriteState, isReadWriteState } from '../state/unified-state'\n\nexport function expectReadWriteState(state: State): asserts state is ReadWriteState {\n  expect(isReadWriteState(state)).toBe(true)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAkE;AAE3D,SAAS,qBAAqB,OAA+C;AAClF,aAAO,uCAAiB,KAAK,CAAC,EAAE,KAAK,IAAI;AAC3C;","names":[]}

package/dist/cjs/translations/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/translations/index.ts"],"sourcesContent":["export { getTranslatableContent } from '../state/translations/get'\nexport { mergeTranslatedContent } from '../state/translations/merge'\nexport type { DescriptorsByComponentType, DescriptorsByProp } from '../state/modules/prop-controllers'\nexport type { ElementData, Data, Element } from '../state/read-only-state'\nexport type { TranslationDto } from '@makeswift/controls'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAuC;AACvC,mBAAuC;","names":[]}
+{"version":3,"sources":["../../../src/translations/index.ts"],"sourcesContent":["export { getTranslatableContent } from '../state/translations/get'\nexport { mergeTranslatedContent } from '../state/translations/merge'\nexport type {\n  DescriptorsByComponentType,\n  DescriptorsByProp,\n} from '../state/modules/prop-controller-descriptors'\nexport type { ElementData, Data, Element } from '../state/read-only-state'\nexport type { TranslationDto } from '@makeswift/controls'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAuC;AACvC,mBAAuC;","names":[]}

package/dist/cjs/utils/intersection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/intersection.ts"],"sourcesContent":["import deepEqual from './deepEqual'\nimport keys from './keys'\n\nexport default function intersection<A extends Record<string, unknown>, B extends A>(\n  a: A,\n  b: B,\n  isEqual: (a: unknown, b: unknown) => boolean = deepEqual,\n): { [K in keyof A]: A[K] | null } {\n  const allKeys = [...new Set([...keys(a), ...keys(b)])] as (keyof A)[]\n\n  return allKeys.reduce(\n    (acc, k) => {\n      if (isEqual(a[k], b[k])) acc[k] = a[k]\n      else acc[k] = null\n\n      return acc\n    },\n    {} as { [K in keyof A]: A[K] | null },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,kBAAiB;AAEF,SAAR,aACL,GACA,GACA,UAA+C,iBAAAA,SACd;AACjC,QAAM,UAAU,CAAC,GAAG,oBAAI,IAAI,CAAC,OAAG,YAAAC,SAAK,CAAC,GAAG,OAAG,YAAAA,SAAK,CAAC,CAAC,CAAC,CAAC;AAErD,SAAO,QAAQ;AAAA,IACb,CAAC,KAAK,MAAM;AACV,UAAI,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AAAG,YAAI,CAAC,IAAI,EAAE,CAAC;AAAA;AAChC,YAAI,CAAC,IAAI;AAEd,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;","names":["deepEqual","keys"]}
+{"version":3,"sources":["../../../src/utils/intersection.ts"],"sourcesContent":["import { type Data } from '@makeswift/controls'\n\nimport deepEqual from './deepEqual'\nimport keys from './keys'\n\nexport default function intersection<A extends Record<string, Data>, B extends A>(\n  a: A,\n  b: B,\n  isEqual: (a: Data, b: Data) => boolean = deepEqual,\n): { [K in keyof A]: A[K] | null } {\n  const allKeys = [...new Set([...keys(a), ...keys(b)])] as (keyof A)[]\n\n  return allKeys.reduce(\n    (acc, k) => {\n      if (isEqual(a[k], b[k])) acc[k] = a[k]\n      else acc[k] = null\n\n      return acc\n    },\n    {} as { [K in keyof A]: A[K] | null },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,uBAAsB;AACtB,kBAAiB;AAEF,SAAR,aACL,GACA,GACA,UAAyC,iBAAAA,SACR;AACjC,QAAM,UAAU,CAAC,GAAG,oBAAI,IAAI,CAAC,OAAG,YAAAC,SAAK,CAAC,GAAG,OAAG,YAAAA,SAAK,CAAC,CAAC,CAAC,CAAC;AAErD,SAAO,QAAQ;AAAA,IACb,CAAC,KAAK,MAAM;AACV,UAAI,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AAAG,YAAI,CAAC,IAAI,EAAE,CAAC;AAAA;AAChC,YAAI,CAAC,IAAI;AAEd,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;","names":["deepEqual","keys"]}

package/dist/esm/api/graphql-api-client.js

@@ -9,7 +9,7 @@ class MakeswiftGraphQLApiClient {
   graphqlClient;
   constructor({ endpoint }) {
     this.graphqlClient = new GraphQLClient(endpoint, {
-      "makeswift-runtime-version": "0.28.8-canary.2"
+      "makeswift-runtime-version": "0.28.8-canary.20"
     });
   }
   async createTableRecord(tableId, columns) {

package/dist/esm/api/rest-api-client.js

@@ -113,7 +113,7 @@ class MakeswiftRestAPIClient {
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.28.8-canary.2"
+      "makeswift-runtime-version": "0.28.8-canary.20"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

package/dist/esm/api-handler/handlers/manifest.js

@@ -8,7 +8,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return ApiResponse.json({
-    version: "0.28.8-canary.2",
+    version: "0.28.8-canary.20",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/esm/builder/host-to-builder-actions.js

@@ -1,8 +1,6 @@
 import { isAction } from "@reduxjs/toolkit";
-import {
-  ReadOnlyActionTypes
-} from "../state/actions/internal/read-only-actions";
-import { BuilderActionTypes } from "../state/builder-api/actions";
+import { ReadOnlyActionTypes } from "../state/actions/internal/read-only-action-types";
+import { BuilderActionTypes } from "../state/builder-api/action-types";
 const HostToBuilderActionTypes = {
   ...BuilderActionTypes,
   REGISTER_COMPONENT: ReadOnlyActionTypes.REGISTER_COMPONENT,

package/dist/esm/builder/host-to-builder-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/builder/host-to-builder-actions.ts"],"sourcesContent":["import { isAction } from '@reduxjs/toolkit'\n\n// in the past, we reused the same action type for registering components both internally\n// and in the builder; they have been since split into two separate action types,\n// REGISTER_COMPONENT and REGISTER_BUILDER_COMPONENT, but we still have to expose what\n// are now internal actions to the builder for backward compatibility with the older runtimes\nimport {\n  type RegisterComponentAction,\n  type UnregisterComponentAction,\n  ReadOnlyActionTypes,\n} from '../state/actions/internal/read-only-actions'\n\nimport { type BuilderAction, BuilderActionTypes } from '../state/builder-api/actions'\n\nexport const HostToBuilderActionTypes = {\n  ...BuilderActionTypes,\n  REGISTER_COMPONENT: ReadOnlyActionTypes.REGISTER_COMPONENT,\n  UNREGISTER_COMPONENT: ReadOnlyActionTypes.UNREGISTER_COMPONENT,\n} as const\n\nexport type HostToBuilderAction =\n  | BuilderAction\n  | RegisterComponentAction\n  | UnregisterComponentAction\n\nexport function isHostToBuilderAction(action: unknown): action is HostToBuilderAction {\n  return isAction(action) && Object.hasOwn(HostToBuilderActionTypes, action.type)\n}\n"],"mappings":"AAAA,SAAS,gBAAgB;AAMzB;AAAA,EAGE;AAAA,OACK;AAEP,SAA6B,0BAA0B;AAEhD,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,oBAAoB,oBAAoB;AAAA,EACxC,sBAAsB,oBAAoB;AAC5C;AAOO,SAAS,sBAAsB,QAAgD;AACpF,SAAO,SAAS,MAAM,KAAK,OAAO,OAAO,0BAA0B,OAAO,IAAI;AAChF;","names":[]}
+{"version":3,"sources":["../../../src/builder/host-to-builder-actions.ts"],"sourcesContent":["import { isAction } from '@reduxjs/toolkit'\n\n// in the past, we reused the same action type for registering components both internally\n// and in the builder; they have been since split into two separate action types,\n// REGISTER_COMPONENT and REGISTER_BUILDER_COMPONENT, but we still have to expose what\n// are now internal actions to the builder for backward compatibility with the older runtimes\nimport { ReadOnlyActionTypes } from '../state/actions/internal/read-only-action-types'\nimport {\n  type RegisterComponentAction,\n  type UnregisterComponentAction,\n} from '../state/actions/internal/read-only-actions'\n\nimport { BuilderActionTypes } from '../state/builder-api/action-types'\nimport { type BuilderAction } from '../state/builder-api/actions'\n\nexport const HostToBuilderActionTypes = {\n  ...BuilderActionTypes,\n  REGISTER_COMPONENT: ReadOnlyActionTypes.REGISTER_COMPONENT,\n  UNREGISTER_COMPONENT: ReadOnlyActionTypes.UNREGISTER_COMPONENT,\n} as const\n\nexport type HostToBuilderAction =\n  | BuilderAction\n  | RegisterComponentAction\n  | UnregisterComponentAction\n\nexport function isHostToBuilderAction(action: unknown): action is HostToBuilderAction {\n  return isAction(action) && Object.hasOwn(HostToBuilderActionTypes, action.type)\n}\n"],"mappings":"AAAA,SAAS,gBAAgB;AAMzB,SAAS,2BAA2B;AAMpC,SAAS,0BAA0B;AAG5B,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,oBAAoB,oBAAoB;AAAA,EACxC,sBAAsB,oBAAoB;AAC5C;AAOO,SAAS,sBAAsB,QAAgD;AACpF,SAAO,SAAS,MAAM,KAAK,OAAO,OAAO,0BAA0B,OAAO,IAAI;AAChF;","names":[]}

package/dist/esm/client/index.js

@@ -669,7 +669,7 @@ Received "${apiKey}" instead.`
       headers: {
         "x-api-key": this.apiKey,
         "makeswift-site-api-key": this.apiKey,
-        "makeswift-runtime-version": "0.28.8-canary.2",
+        "makeswift-runtime-version": "0.28.8-canary.20",
         "content-type": "application/json"
       },
       body: JSON.stringify({ token }),

package/dist/esm/components/builtin/Embed/Embed.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
+import { useState, useEffect, useMemo, forwardRef, useImperativeHandle } from "react";
 import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect";
 import { useStyle } from "../../../runtimes/react/use-style";
 import { cx } from "@emotion/css";
@@ -71,6 +71,7 @@ const Embed = forwardRef(function Embed2({ id, width, margin, html = defaultHtml
     });
   }, [container, html]);
   const className = useStyle({ minHeight: 15 });
+  const dangerouslySetInnerHTML = useMemo(() => ({ __html: html }), [html]);
   if (shouldRender === false)
     return null;
   return /* @__PURE__ */ jsx(
@@ -79,7 +80,7 @@ const Embed = forwardRef(function Embed2({ id, width, margin, html = defaultHtml
       ref: setContainer,
       id,
       className: cx(className, width, margin),
-      dangerouslySetInnerHTML: { __html: html }
+      dangerouslySetInnerHTML
     }
   );
 });

package/dist/esm/components/builtin/Embed/Embed.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["'use client'\n\n/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: string\n  html?: string\n  width?: string\n  margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => container, [\n    container,\n  ])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  const className = useStyle({ minHeight: 15 })\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"mappings":";AAgHI;AA5GJ,SAAS,UAAU,WAAW,YAAiB,2BAA2B;AAE1E,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AACzB,SAAS,UAAU;AASnB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBpB,MAAM,aAAa;AAEnB,MAAM,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,4BAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,sBAAkE,KAAK,MAAM,WAAW;AAAA,IACtF;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AAGd,QAAI,CAAC;AAAW;AAEhB,UAAM,SAAS,UAAU,cAAc,iBAAiB,WAAW,WAAW,cAAc;AAAA,MAC1F,WAAW,MAAe;AACxB,eAAO,KAAK,QAAQ,YAAY,MAAM,aAClC,WAAW,gBACX,WAAW;AAAA,MACjB;AAAA,IACF,CAAC;AAED,UAAM,QAAmB,CAAC;AAE1B,WAAO,OAAO,SAAS;AAAG,YAAM,KAAK,OAAO,WAAsB;AAOlE,mBAAe,wBAAwB;AACrC,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,IAAI,QAAc,aAAW;AACjC,gBAAM,OAAO,MAAM,CAAC;AACpB,gBAAM,SAAS,KAAK,cAAc,cAAc,UAAU;AAE1D,iBAAO,cAAc,KAAK;AAC1B,gBAAM,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACvD,mBAAO,aAAa,MAAM,KAAK;AAAA,UACjC,CAAC;AAED,iBAAO,SAAS,MAAM,QAAQ;AAC9B,iBAAO,UAAU,MAAM,QAAQ;AAE/B,eAAK,YAAY,aAAa,QAAQ,IAAI;AAC1C,eAAK,YAAY,YAAY,IAAI;AAEjC,cAAI,CAAC,OAAO,aAAa,KAAK;AAAG,oBAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AAAA,IACF;AAEA,0BAAsB,EAAE,MAAM,WAAS;AAErC,cAAQ,MAAM,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,YAAY,SAAS,EAAE,WAAW,GAAG,CAAC;AAE5C,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,WAAW,OAAO,MAAM;AAAA,MACtC,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["'use client'\n\n/* eslint-env browser */\n\nimport { useState, useEffect, useMemo, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: string\n  html?: string\n  width?: string\n  margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => container, [\n    container,\n  ])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  const className = useStyle({ minHeight: 15 })\n\n  // React 19+ resets `innerHTML` whenever the `dangerouslySetInnerHTML`\n  // object's identity changes, even if `__html` is the same string. Memoize\n  // the object so unrelated re-renders don't wipe out DOM produced by the\n  // executed scripts above. See https://github.com/facebook/react/issues/31660\n  // and https://github.com/react/react/issues/31600\n  const dangerouslySetInnerHTML = useMemo(() => ({ __html: html }), [html])\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={dangerouslySetInnerHTML}\n    />\n  )\n})\n\nexport default Embed\n"],"mappings":";AAuHI;AAnHJ,SAAS,UAAU,WAAW,SAAS,YAAiB,2BAA2B;AAEnF,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AACzB,SAAS,UAAU;AASnB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBpB,MAAM,aAAa;AAEnB,MAAM,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,4BAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,sBAAkE,KAAK,MAAM,WAAW;AAAA,IACtF;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AAGd,QAAI,CAAC;AAAW;AAEhB,UAAM,SAAS,UAAU,cAAc,iBAAiB,WAAW,WAAW,cAAc;AAAA,MAC1F,WAAW,MAAe;AACxB,eAAO,KAAK,QAAQ,YAAY,MAAM,aAClC,WAAW,gBACX,WAAW;AAAA,MACjB;AAAA,IACF,CAAC;AAED,UAAM,QAAmB,CAAC;AAE1B,WAAO,OAAO,SAAS;AAAG,YAAM,KAAK,OAAO,WAAsB;AAOlE,mBAAe,wBAAwB;AACrC,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,IAAI,QAAc,aAAW;AACjC,gBAAM,OAAO,MAAM,CAAC;AACpB,gBAAM,SAAS,KAAK,cAAc,cAAc,UAAU;AAE1D,iBAAO,cAAc,KAAK;AAC1B,gBAAM,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACvD,mBAAO,aAAa,MAAM,KAAK;AAAA,UACjC,CAAC;AAED,iBAAO,SAAS,MAAM,QAAQ;AAC9B,iBAAO,UAAU,MAAM,QAAQ;AAE/B,eAAK,YAAY,aAAa,QAAQ,IAAI;AAC1C,eAAK,YAAY,YAAY,IAAI;AAEjC,cAAI,CAAC,OAAO,aAAa,KAAK;AAAG,oBAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AAAA,IACF;AAEA,0BAAsB,EAAE,MAAM,WAAS;AAErC,cAAQ,MAAM,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,YAAY,SAAS,EAAE,WAAW,GAAG,CAAC;AAO5C,QAAM,0BAA0B,QAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAExE,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,WAAW,OAAO,MAAM;AAAA,MACtC;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}

package/dist/esm/components/builtin/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n  Size,\n  Sizes,\n  Provider as FormContextProvider,\n  Shape,\n  Contrast,\n  Alignment,\n  Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport { Link } from '../../shared/Link'\nimport { getBox, type BoxModelHandle } from '../../../state/modules/read-write/box-models'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../utils/types'\n\nimport { useMakeswiftGraphQLApiClient } from '../../../runtimes/react/hooks/use-graphql-api-client'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\nimport {\n  type LinkData,\n  type ResponsiveGapData,\n  type ResponsiveLengthData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveValue,\n  type TableFormFieldsData,\n  type TableFormFieldsDescriptor,\n} from '@makeswift/prop-controllers'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 12\n\n    case Sizes.MEDIUM:\n      return 14\n\n    case Sizes.LARGE:\n      return 18\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype Props = {\n  id?: string\n  tableId?: string\n  fields?: TableFormFieldsData\n  submitLink?: LinkData\n  gap?: ResponsiveGapData\n  shape?: ResponsiveIconRadioGroupValue<Shape>\n  size?: ResponsiveIconRadioGroupValue<Size>\n  contrast?: ResponsiveIconRadioGroupValue<Contrast>\n  labelTextStyle?: ResponsiveTextStyleData\n  labelTextColor?: ResponsiveColor | null\n  submitTextStyle?: ResponsiveTextStyleData\n  brandColor?: ResponsiveColor | null\n  submitTextColor?: ResponsiveColor | null\n  submitLabel?: string\n  submitVariant?: ResponsiveSelectValue<\n    'flat' | 'outline' | 'shadow' | 'clear' | 'blocky' | 'bubbly' | 'skewed'\n  >\n  submitWidth?: ResponsiveLengthData\n  submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n  width?: string\n  margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n  Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n  { className, size, ...restOfProps }: GridFormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  return (\n    <form\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            fontSize: getSizeFontSize(size),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n\ntype GridItemBaseProps = {\n  grid: ResponsiveValue<{ spans: number[][]; count: number }>\n  index: number\n  rowGap: Props['gap']\n  columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n  { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n        useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n        className,\n      )}\n    />\n  )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n  switch (alignment) {\n    case Alignments.LEFT:\n      return '0 auto 0 0'\n    case Alignments.RIGHT:\n      return '0 0 0 auto'\n    default:\n      return '0 auto'\n  }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n  return (\n    <Button\n      {...restOfProps}\n      as=\"button\"\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n        useStyle(\n          useResponsiveStyle(\n            [size, alignment] as const,\n            ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              margin: getAlignmentMargin(alignment),\n              paddingTop: 0,\n              paddingBottom: 0,\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          padding: '8px 16px',\n          backgroundColor: '#f19eb9',\n          borderRadius: 4,\n          marginTop: 16,\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n  return (\n    <p\n      {...restOfProps}\n      className={cx(\n        useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n  switch (tableColumn.__typename) {\n    case 'CheckboxTableColumn':\n      return false\n\n    case 'MultipleSelectTableColumn':\n      return []\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'SingleSelectTableColumn':\n    case 'PhoneNumberTableColumn':\n    case 'EmailTableColumn':\n    case 'URLTableColumn':\n    case 'NumberTableColumn':\n    default:\n      return ''\n  }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string | string[] | boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n  {\n    id,\n    tableId,\n    fields: fieldsProp,\n    submitLabel = 'Submit',\n    submitLink,\n    shape,\n    size,\n    contrast,\n    brandColor,\n    gap,\n    width,\n    margin,\n    submitTextStyle,\n    submitVariant,\n    submitTextColor,\n    submitWidth,\n    submitAlignment,\n    labelTextStyle,\n    labelTextColor,\n  }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n  const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n  const table = useTable(tableId ?? null)\n  const client = useMakeswiftGraphQLApiClient()\n  const [refEl, setRefEl] = useState<HTMLElement | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const [initialValues, setInitialValues] = useState<Fields>(() =>\n    fields.reduce((acc, formField) => {\n      const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n      const defaultValue = formField ? formField.defaultValue : null\n\n      if (tableColumn) {\n        acc[tableColumn.name] =\n          defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n      }\n\n      return acc\n    }, {} as Fields),\n  )\n  const controller = propControllers?.fields\n  const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n  const [isDone, setIsDone] = useState(false)\n  const linkRef = useRef<HTMLAnchorElement>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return refEl instanceof Element ? refEl : null\n      },\n      getBoxModel() {\n        return refEl instanceof Element ? getBox(refEl) : null\n      },\n      setPropControllers,\n    }),\n    [refEl, setPropControllers],\n  )\n\n  useEffect(() => {\n    container(refEl)\n  }, [container, refEl])\n\n  useEffect(() => {\n    if (!isDone) return\n\n    let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n    return () => clearTimeout(timeoutId)\n  }, [isDone])\n\n  function getTableColumn({ tableColumnId }: any) {\n    return table && table.columns.find(field => tableColumnId === field.id)\n  }\n\n  async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n    if (table) {\n      const columns: Column[] = []\n\n      fields.forEach(field => {\n        const tableColumn = getTableColumn(field)\n\n        if (tableColumn) {\n          const data = values[tableColumn.name]\n\n          if (data) {\n            columns.push({ columnId: field.tableColumnId, data })\n\n            if (field.autofill) {\n              localStorage.setItem(\n                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n                JSON.stringify(data),\n              )\n            }\n          }\n        }\n      })\n\n      try {\n        await client.createTableRecord(table.id, columns)\n        setIsDone(true)\n        setInitialValues(prev =>\n          fields.reduce(\n            (acc, field) => {\n              const tableColumn = getTableColumn(field)\n\n              if (tableColumn) {\n                const data = values[tableColumn.name]\n\n                if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n              }\n\n              return acc\n            },\n            { ...prev },\n          ),\n        )\n        resetForm()\n\n        if (linkRef.current != null) linkRef.current.click()\n      } catch (error) {\n        setStatus({ error: 'An unexpected error has occurred, please try again later' })\n      } finally {\n        setSubmitting(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setInitialValues(prev =>\n      fields.reduce(\n        (acc, formField) => {\n          const tableColumn =\n            table && table.columns.find(field => field.id === formField.tableColumnId)\n\n          if (tableColumn && formField.autofill) {\n            const storedValue = localStorage.getItem(\n              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n            )\n\n            if (storedValue) {\n              try {\n                acc[tableColumn.name] = JSON.parse(storedValue)\n              } catch (e) {\n                // Ignore\n              }\n            }\n          }\n\n          return acc\n        },\n        { ...prev },\n      ),\n    )\n  }, [fields, table])\n\n  return (\n    <FormContextProvider\n      value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n    >\n      {tableId == null ? (\n        <Placeholder ref={setRefEl} width={width} margin={margin} />\n      ) : (\n        <>\n          <Formik\n            onSubmit={handleSubmit}\n            initialValues={initialValues}\n            initialStatus={{ error: null }}\n            enableReinitialize\n          >\n            {formik => {\n              const error = formik.status && formik.status.error\n              const errors = fields\n                .map(field => {\n                  const tableColumn = getTableColumn(field)\n\n                  return (\n                    tableColumn &&\n                    getIn(formik.touched, tableColumn.name) &&\n                    getIn(formik.errors, tableColumn.name)\n                  )\n                })\n                .filter(message => typeof message === 'string')\n\n              return (\n                <>\n                  <GridForm\n                    ref={setRefEl}\n                    id={id}\n                    className={cx(width, margin)}\n                    size={size}\n                    onSubmit={formik.handleSubmit}\n                    onReset={formik.handleReset}\n                    noValidate\n                  >\n                    {fields.map((field, index) => {\n                      const tableColumn = getTableColumn(field)\n\n                      return (\n                        <GridItem\n                          key={field.id}\n                          ref={items[index]}\n                          grid={grid}\n                          index={index}\n                          rowGap={gap}\n                          columnGap={gap}\n                        >\n                          <Field tableColumn={tableColumn} tableFormField={field} />\n                        </GridItem>\n                      )\n                    })}\n                    <GridItem\n                      ref={items[fields.length]}\n                      grid={grid}\n                      index={fields.length}\n                      rowGap={gap}\n                      columnGap={gap}\n                    >\n                      <StyledButton\n                        type=\"submit\"\n                        // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n                        disabled={formik.isSubmitting || isDone}\n                        shape={shape}\n                        size={size}\n                        color={brandColor}\n                        variant={submitVariant}\n                        textColor={submitTextColor}\n                        width={submitWidth}\n                        alignment={submitAlignment}\n                        textStyle={submitTextStyle}\n                      >\n                        {formik.isSubmitting ? (\n                          <Spinner />\n                        ) : isDone ? (\n                          <IconContainer>\n                            <Check12 />\n                          </IconContainer>\n                        ) : (\n                          submitLabel\n                        )}\n                      </StyledButton>\n                      {(errors.length > 0 || error) && (\n                        <ErrorContainer>\n                          {errors.map(message => (\n                            <ErrorMessage key={message}>{message}</ErrorMessage>\n                          ))}\n                          {error != null && <ErrorMessage>{error}</ErrorMessage>}\n                        </ErrorContainer>\n                      )}\n                    </GridItem>\n                  </GridForm>\n                  {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n                </>\n              )\n            }}\n          </Formik>\n        </>\n      )}\n    </FormContextProvider>\n  )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","alignment","Form"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n  Size,\n  Sizes,\n  Provider as FormContextProvider,\n  Shape,\n  Contrast,\n  Alignment,\n  Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport { Link } from '../../shared/Link'\nimport { getBox, type BoxModelHandle } from '../../../state/modules/read-write/box-models'\nimport { PropControllersHandle } from '../../../state/modules/read-write/prop-controllers'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../utils/types'\n\nimport { useMakeswiftGraphQLApiClient } from '../../../runtimes/react/hooks/use-graphql-api-client'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\nimport {\n  type LinkData,\n  type ResponsiveGapData,\n  type ResponsiveLengthData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveValue,\n  type TableFormFieldsData,\n  type TableFormFieldsDescriptor,\n} from '@makeswift/prop-controllers'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 12\n\n    case Sizes.MEDIUM:\n      return 14\n\n    case Sizes.LARGE:\n      return 18\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype Props = {\n  id?: string\n  tableId?: string\n  fields?: TableFormFieldsData\n  submitLink?: LinkData\n  gap?: ResponsiveGapData\n  shape?: ResponsiveIconRadioGroupValue<Shape>\n  size?: ResponsiveIconRadioGroupValue<Size>\n  contrast?: ResponsiveIconRadioGroupValue<Contrast>\n  labelTextStyle?: ResponsiveTextStyleData\n  labelTextColor?: ResponsiveColor | null\n  submitTextStyle?: ResponsiveTextStyleData\n  brandColor?: ResponsiveColor | null\n  submitTextColor?: ResponsiveColor | null\n  submitLabel?: string\n  submitVariant?: ResponsiveSelectValue<\n    'flat' | 'outline' | 'shadow' | 'clear' | 'blocky' | 'bubbly' | 'skewed'\n  >\n  submitWidth?: ResponsiveLengthData\n  submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n  width?: string\n  margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n  Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n  { className, size, ...restOfProps }: GridFormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  return (\n    <form\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            fontSize: getSizeFontSize(size),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n\ntype GridItemBaseProps = {\n  grid: ResponsiveValue<{ spans: number[][]; count: number }>\n  index: number\n  rowGap: Props['gap']\n  columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n  { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n        useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n        className,\n      )}\n    />\n  )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n  switch (alignment) {\n    case Alignments.LEFT:\n      return '0 auto 0 0'\n    case Alignments.RIGHT:\n      return '0 0 0 auto'\n    default:\n      return '0 auto'\n  }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n  return (\n    <Button\n      {...restOfProps}\n      as=\"button\"\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n        useStyle(\n          useResponsiveStyle(\n            [size, alignment] as const,\n            ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              margin: getAlignmentMargin(alignment),\n              paddingTop: 0,\n              paddingBottom: 0,\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          padding: '8px 16px',\n          backgroundColor: '#f19eb9',\n          borderRadius: 4,\n          marginTop: 16,\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n  return (\n    <p\n      {...restOfProps}\n      className={cx(\n        useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n  switch (tableColumn.__typename) {\n    case 'CheckboxTableColumn':\n      return false\n\n    case 'MultipleSelectTableColumn':\n      return []\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'SingleSelectTableColumn':\n    case 'PhoneNumberTableColumn':\n    case 'EmailTableColumn':\n    case 'URLTableColumn':\n    case 'NumberTableColumn':\n    default:\n      return ''\n  }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string | string[] | boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n  {\n    id,\n    tableId,\n    fields: fieldsProp,\n    submitLabel = 'Submit',\n    submitLink,\n    shape,\n    size,\n    contrast,\n    brandColor,\n    gap,\n    width,\n    margin,\n    submitTextStyle,\n    submitVariant,\n    submitTextColor,\n    submitWidth,\n    submitAlignment,\n    labelTextStyle,\n    labelTextColor,\n  }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n  const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n  const table = useTable(tableId ?? null)\n  const client = useMakeswiftGraphQLApiClient()\n  const [refEl, setRefEl] = useState<HTMLElement | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const [initialValues, setInitialValues] = useState<Fields>(() =>\n    fields.reduce((acc, formField) => {\n      const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n      const defaultValue = formField ? formField.defaultValue : null\n\n      if (tableColumn) {\n        acc[tableColumn.name] =\n          defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n      }\n\n      return acc\n    }, {} as Fields),\n  )\n  const controller = propControllers?.fields\n  const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n  const [isDone, setIsDone] = useState(false)\n  const linkRef = useRef<HTMLAnchorElement>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return refEl instanceof Element ? refEl : null\n      },\n      getBoxModel() {\n        return refEl instanceof Element ? getBox(refEl) : null\n      },\n      setPropControllers,\n    }),\n    [refEl, setPropControllers],\n  )\n\n  useEffect(() => {\n    container(refEl)\n  }, [container, refEl])\n\n  useEffect(() => {\n    if (!isDone) return\n\n    let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n    return () => clearTimeout(timeoutId)\n  }, [isDone])\n\n  function getTableColumn({ tableColumnId }: any) {\n    return table && table.columns.find(field => tableColumnId === field.id)\n  }\n\n  async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n    if (table) {\n      const columns: Column[] = []\n\n      fields.forEach(field => {\n        const tableColumn = getTableColumn(field)\n\n        if (tableColumn) {\n          const data = values[tableColumn.name]\n\n          if (data) {\n            columns.push({ columnId: field.tableColumnId, data })\n\n            if (field.autofill) {\n              localStorage.setItem(\n                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n                JSON.stringify(data),\n              )\n            }\n          }\n        }\n      })\n\n      try {\n        await client.createTableRecord(table.id, columns)\n        setIsDone(true)\n        setInitialValues(prev =>\n          fields.reduce(\n            (acc, field) => {\n              const tableColumn = getTableColumn(field)\n\n              if (tableColumn) {\n                const data = values[tableColumn.name]\n\n                if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n              }\n\n              return acc\n            },\n            { ...prev },\n          ),\n        )\n        resetForm()\n\n        if (linkRef.current != null) linkRef.current.click()\n      } catch (error) {\n        setStatus({ error: 'An unexpected error has occurred, please try again later' })\n      } finally {\n        setSubmitting(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setInitialValues(prev =>\n      fields.reduce(\n        (acc, formField) => {\n          const tableColumn =\n            table && table.columns.find(field => field.id === formField.tableColumnId)\n\n          if (tableColumn && formField.autofill) {\n            const storedValue = localStorage.getItem(\n              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n            )\n\n            if (storedValue) {\n              try {\n                acc[tableColumn.name] = JSON.parse(storedValue)\n              } catch (e) {\n                // Ignore\n              }\n            }\n          }\n\n          return acc\n        },\n        { ...prev },\n      ),\n    )\n  }, [fields, table])\n\n  return (\n    <FormContextProvider\n      value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n    >\n      {tableId == null ? (\n        <Placeholder ref={setRefEl} width={width} margin={margin} />\n      ) : (\n        <>\n          <Formik\n            onSubmit={handleSubmit}\n            initialValues={initialValues}\n            initialStatus={{ error: null }}\n            enableReinitialize\n          >\n            {formik => {\n              const error = formik.status && formik.status.error\n              const errors = fields\n                .map(field => {\n                  const tableColumn = getTableColumn(field)\n\n                  return (\n                    tableColumn &&\n                    getIn(formik.touched, tableColumn.name) &&\n                    getIn(formik.errors, tableColumn.name)\n                  )\n                })\n                .filter(message => typeof message === 'string')\n\n              return (\n                <>\n                  <GridForm\n                    ref={setRefEl}\n                    id={id}\n                    className={cx(width, margin)}\n                    size={size}\n                    onSubmit={formik.handleSubmit}\n                    onReset={formik.handleReset}\n                    noValidate\n                  >\n                    {fields.map((field, index) => {\n                      const tableColumn = getTableColumn(field)\n\n                      return (\n                        <GridItem\n                          key={field.id}\n                          ref={items[index]}\n                          grid={grid}\n                          index={index}\n                          rowGap={gap}\n                          columnGap={gap}\n                        >\n                          <Field tableColumn={tableColumn} tableFormField={field} />\n                        </GridItem>\n                      )\n                    })}\n                    <GridItem\n                      ref={items[fields.length]}\n                      grid={grid}\n                      index={fields.length}\n                      rowGap={gap}\n                      columnGap={gap}\n                    >\n                      <StyledButton\n                        type=\"submit\"\n                        // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n                        disabled={formik.isSubmitting || isDone}\n                        shape={shape}\n                        size={size}\n                        color={brandColor}\n                        variant={submitVariant}\n                        textColor={submitTextColor}\n                        width={submitWidth}\n                        alignment={submitAlignment}\n                        textStyle={submitTextStyle}\n                      >\n                        {formik.isSubmitting ? (\n                          <Spinner />\n                        ) : isDone ? (\n                          <IconContainer>\n                            <Check12 />\n                          </IconContainer>\n                        ) : (\n                          submitLabel\n                        )}\n                      </StyledButton>\n                      {(errors.length > 0 || error) && (\n                        <ErrorContainer>\n                          {errors.map(message => (\n                            <ErrorMessage key={message}>{message}</ErrorMessage>\n                          ))}\n                          {error != null && <ErrorMessage>{error}</ErrorMessage>}\n                        </ErrorContainer>\n                      )}\n                    </GridItem>\n                  </GridForm>\n                  {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n                </>\n              )\n            }}\n          </Formik>\n        </>\n      )}\n    </FormContextProvider>\n  )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","alignment","Form"]}

package/dist/esm/components/builtin/Navigation/components/DropDownButton/index.js

@@ -1,6 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { forwardRef, useRef, useState } from "react";
+import {
+  forwardRef,
+  useRef,
+  useState
+} from "react";
 import { CaretDown8 } from "../../../../icons/CaretDown8";
 import { Plus8 } from "../../../../icons/Plus8";
 import { ArrowDown8 } from "../../../../icons/ArrowDown8";

package/dist/esm/components/builtin/Navigation/components/DropDownButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useRef, useState, ReactNode } from 'react'\n\nimport { CaretDown8 } from '../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../icons/ChevronDown8'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../hooks'\n\nimport { Link } from '../../../../shared/Link'\nimport Button from '../../../Button'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\nimport { cx, keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../../../utils/responsive-style'\nimport { LinkData, ResponsiveColorData, ResponsiveTextStyleData } from '@makeswift/prop-controllers'\n\nconst DROP_DOWN_MENU_WIDTH = 200\n\ntype Position = 'left' | 'right'\n\nconst DROP_DOWN_MENU_CLASS_NAME = 'drop-down-menu'\n\ntype DropDownMenuBaseProps = {\n  position: Position\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, position, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        DROP_DOWN_MENU_CLASS_NAME,\n        useStyle({\n          position: 'absolute',\n          top: '100%',\n          left: position === 'left' ? 0 : 'auto',\n          right: position === 'right' ? 0 : 'auto',\n          background: '#fff',\n          margin: 0,\n          padding: '8px 0',\n          borderRadius: 4,\n          boxShadow: '0 3px 10px rgba(0, 0, 0, 0.15)',\n          width: DROP_DOWN_MENU_WIDTH,\n          zIndex: 99,\n          listStyle: 'none',\n          overflow: 'hidden',\n          transformOrigin: '50% 0',\n          willChange: 'transform, opacity',\n          transformStyle: 'preserve-3d',\n          display: 'none',\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nconst dropIn = keyframes`\n  0% {\n      opacity: 0;\n      transform: rotateX(-20deg);\n  }\n  100% {\n      opacity: 1;\n      transform: none;\n  }\n`\n\ntype DropDownContainerProps = ComponentPropsWithoutRef<'div'>\n\nconst DropDownContainer = forwardRef(function DropDownContainer(\n  { className, ...restOfProps }: DropDownContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {\n            display: 'block',\n            animation: `${dropIn} 0.25s`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n})\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorData\n  textStyle?: ResponsiveTextStyleData\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ className, color, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'block',\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n          backgroundColor: 'transparent',\n          transition: 'background-color 0.2s',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData, textStyle] as const, ([color, textStyle = {}]) => {\n            const fontSize = textStyle.fontSize || { value: 14, unit: 'px' }\n            const fontWeight = textStyle.fontWeight == null ? 'normal' : textStyle.fontWeight\n            const fontStyle = textStyle.fontStyle || []\n            const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing\n            const textTransform = textStyle.textTransform || []\n\n            return {\n              color: color == null ? 'black' : colorToString(color),\n              fontSize: `${fontSize.value}${fontSize.unit}`,\n              fontWeight,\n              fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',\n              letterSpacing: letterSpacing == null ? 'normal' : `${letterSpacing}px`,\n              textTransform: textTransform.includes('uppercase') ? 'uppercase' : 'none',\n            }\n          }),\n        ),\n        useStyle({\n          '&:hover': {\n            backgroundColor: 'rgba(0, 0, 0, 0.04)',\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  caret?: 'caret' | 'plus' | 'arrow-down' | 'chevron-down'\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function DropDownButton({\n  label,\n  caret = 'caret',\n  links = [],\n  textColor,\n  color,\n  ...restOfProps\n}: Props): ReactNode {\n  const container = useRef<HTMLDivElement>(null)\n  const [position, setPosition] = useState<Position>('left')\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      container.current &&\n      container.current.ownerDocument.defaultView!.innerWidth <\n        container.current.offsetLeft + DROP_DOWN_MENU_WIDTH\n    ) {\n      setPosition('right')\n    } else {\n      setPosition('left')\n    }\n  }, [setPosition])\n\n  return (\n    <DropDownContainer ref={container}>\n      <Button\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            {caret === 'caret' && <CaretDown8 />}\n            {caret === 'plus' && <Plus8 />}\n            {caret === 'arrow-down' && <ArrowDown8 />}\n            {caret === 'chevron-down' && <ChevronDown8 />}\n          </span>\n        </div>\n      </Button>\n      <DropDownMenu position={position}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </DropDownContainer>\n  )\n}\n"],"mappings":"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","names":["DropDownContainer","color","textStyle"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  useRef,\n  useState,\n  ReactNode,\n} from 'react'\n\nimport { CaretDown8 } from '../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../icons/ChevronDown8'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../hooks'\n\nimport { Link } from '../../../../shared/Link'\nimport Button from '../../../Button'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\nimport { cx, keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../../../utils/responsive-style'\nimport { LinkData, ResponsiveColorData, ResponsiveTextStyleData } from '@makeswift/prop-controllers'\n\nconst DROP_DOWN_MENU_WIDTH = 200\n\ntype Position = 'left' | 'right'\n\nconst DROP_DOWN_MENU_CLASS_NAME = 'drop-down-menu'\n\ntype DropDownMenuBaseProps = {\n  position: Position\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, position, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        DROP_DOWN_MENU_CLASS_NAME,\n        useStyle({\n          position: 'absolute',\n          top: '100%',\n          left: position === 'left' ? 0 : 'auto',\n          right: position === 'right' ? 0 : 'auto',\n          background: '#fff',\n          margin: 0,\n          padding: '8px 0',\n          borderRadius: 4,\n          boxShadow: '0 3px 10px rgba(0, 0, 0, 0.15)',\n          width: DROP_DOWN_MENU_WIDTH,\n          zIndex: 99,\n          listStyle: 'none',\n          overflow: 'hidden',\n          transformOrigin: '50% 0',\n          willChange: 'transform, opacity',\n          transformStyle: 'preserve-3d',\n          display: 'none',\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nconst dropIn = keyframes`\n  0% {\n      opacity: 0;\n      transform: rotateX(-20deg);\n  }\n  100% {\n      opacity: 1;\n      transform: none;\n  }\n`\n\ntype DropDownContainerProps = ComponentPropsWithoutRef<'div'>\n\nconst DropDownContainer = forwardRef(function DropDownContainer(\n  { className, ...restOfProps }: DropDownContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {\n            display: 'block',\n            animation: `${dropIn} 0.25s`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n})\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorData\n  textStyle?: ResponsiveTextStyleData\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ className, color, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'block',\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n          backgroundColor: 'transparent',\n          transition: 'background-color 0.2s',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData, textStyle] as const, ([color, textStyle = {}]) => {\n            const fontSize = textStyle.fontSize || { value: 14, unit: 'px' }\n            const fontWeight = textStyle.fontWeight == null ? 'normal' : textStyle.fontWeight\n            const fontStyle = textStyle.fontStyle || []\n            const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing\n            const textTransform = textStyle.textTransform || []\n\n            return {\n              color: color == null ? 'black' : colorToString(color),\n              fontSize: `${fontSize.value}${fontSize.unit}`,\n              fontWeight,\n              fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',\n              letterSpacing: letterSpacing == null ? 'normal' : `${letterSpacing}px`,\n              textTransform: textTransform.includes('uppercase') ? 'uppercase' : 'none',\n            }\n          }),\n        ),\n        useStyle({\n          '&:hover': {\n            backgroundColor: 'rgba(0, 0, 0, 0.04)',\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  caret?: 'caret' | 'plus' | 'arrow-down' | 'chevron-down'\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function DropDownButton({\n  label,\n  caret = 'caret',\n  links = [],\n  textColor,\n  color,\n  ...restOfProps\n}: Props): ReactNode {\n  const container = useRef<HTMLDivElement>(null)\n  const [position, setPosition] = useState<Position>('left')\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      container.current &&\n      container.current.ownerDocument.defaultView!.innerWidth <\n        container.current.offsetLeft + DROP_DOWN_MENU_WIDTH\n    ) {\n      setPosition('right')\n    } else {\n      setPosition('left')\n    }\n  }, [setPosition])\n\n  return (\n    <DropDownContainer ref={container}>\n      <Button\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            {caret === 'caret' && <CaretDown8 />}\n            {caret === 'plus' && <Plus8 />}\n            {caret === 'arrow-down' && <ArrowDown8 />}\n            {caret === 'chevron-down' && <ChevronDown8 />}\n          </span>\n        </div>\n      </Button>\n      <DropDownMenu position={position}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </DropDownContainer>\n  )\n}\n"],"mappings":"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","names":["DropDownContainer","color","textStyle"]}

package/dist/esm/components/shared/BackgroundsContainer/components/BackgroundVideo/index.js

@@ -1,6 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@emotion/css";
-import { useState, useRef, forwardRef } from "react";
+import {
+  useState,
+  useRef,
+  forwardRef
+} from "react";
 import { ReactPlayer } from "../../../react-player";
 import { useStyle } from "../../../../../runtimes/react/use-style";
 import { useIsomorphicLayoutEffect } from "../../../../hooks/useIsomorphicLayoutEffect";

package/dist/esm/components/shared/BackgroundsContainer/components/BackgroundVideo/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { useState, useRef, ComponentPropsWithoutRef, ForwardedRef, forwardRef, ReactNode } from 'react'\n\nimport { ReactPlayer } from '../../../react-player'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nconst Container = forwardRef(function Container(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'div'>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          pointerEvents: 'none',\n          overflow: 'hidden',\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nfunction Mask({\n  backgroundColor,\n  visible,\n}: {\n  backgroundColor: string | undefined\n  visible: boolean\n}) {\n  return (\n    <div\n      className={useStyle({\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: backgroundColor,\n        opacity: visible ? 1 : 0,\n        transition: 'opacity 1s',\n      })}\n    />\n  )\n}\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n  const { offsetWidth: width, offsetHeight: height } = element\n  const computedAspectRatio = width / height\n\n  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n  url?: string\n  aspectRatio?: number\n  zoom?: number\n  opacity?: number\n  maskColor?: string\n}\n\nexport default function BackgroundVideo({\n  url = '',\n  aspectRatio = 16 / 9,\n  zoom = 1,\n  maskColor,\n  opacity,\n}: Props): ReactNode {\n  const [ready, setReady] = useState(false)\n  const [scale, setScale] = useState(1)\n  const container = useRef<HTMLDivElement>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const { current: containerEl } = container\n\n    if (!containerEl) return undefined\n\n    const { defaultView } = containerEl.ownerDocument\n    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n    handleResize()\n\n    defaultView!.addEventListener('resize', handleResize)\n\n    return () => defaultView!.removeEventListener('resize', handleResize)\n  }, [aspectRatio, zoom])\n\n  if (!ReactPlayer.canPlay(url)) return <></>\n\n  return (\n    <Container ref={container}>\n      {container.current && (\n        <ReactPlayer\n          url={url}\n          config={{\n            vimeo: { playerOptions: { background: true } },\n            youtube: {\n              playerVars: {\n                origin: container.current.ownerDocument.defaultView?.location.origin,\n              },\n            },\n            wistia: {\n              options: {\n                endVideoBehavior: 'loop',\n                playbackRateControl: false,\n                playbar: false,\n                playButton: false,\n                volumeControl: false,\n                fullscreenButton: false,\n                muted: true,\n              },\n            },\n          }}\n          playing\n          loop\n          muted\n          playsinline={true}\n          controls={false}\n          onReady={() => setReady(true)}\n          style={{\n            transform: `scale3d(${scale}, ${scale}, 1)`,\n            opacity,\n          }}\n          width=\"100%\"\n          height=\"100%\"\n        />\n      )}\n      <Mask backgroundColor={maskColor} visible={!ready} />\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Container"]}
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport {\n  useState,\n  useRef,\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\n\nimport { ReactPlayer } from '../../../react-player'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nconst Container = forwardRef(function Container(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'div'>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          pointerEvents: 'none',\n          overflow: 'hidden',\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nfunction Mask({\n  backgroundColor,\n  visible,\n}: {\n  backgroundColor: string | undefined\n  visible: boolean\n}) {\n  return (\n    <div\n      className={useStyle({\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: backgroundColor,\n        opacity: visible ? 1 : 0,\n        transition: 'opacity 1s',\n      })}\n    />\n  )\n}\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n  const { offsetWidth: width, offsetHeight: height } = element\n  const computedAspectRatio = width / height\n\n  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n  url?: string\n  aspectRatio?: number\n  zoom?: number\n  opacity?: number\n  maskColor?: string\n}\n\nexport default function BackgroundVideo({\n  url = '',\n  aspectRatio = 16 / 9,\n  zoom = 1,\n  maskColor,\n  opacity,\n}: Props): ReactNode {\n  const [ready, setReady] = useState(false)\n  const [scale, setScale] = useState(1)\n  const container = useRef<HTMLDivElement>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const { current: containerEl } = container\n\n    if (!containerEl) return undefined\n\n    const { defaultView } = containerEl.ownerDocument\n    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n    handleResize()\n\n    defaultView!.addEventListener('resize', handleResize)\n\n    return () => defaultView!.removeEventListener('resize', handleResize)\n  }, [aspectRatio, zoom])\n\n  if (!ReactPlayer.canPlay(url)) return <></>\n\n  return (\n    <Container ref={container}>\n      {container.current && (\n        <ReactPlayer\n          url={url}\n          config={{\n            vimeo: { playerOptions: { background: true } },\n            youtube: {\n              playerVars: {\n                origin: container.current.ownerDocument.defaultView?.location.origin,\n              },\n            },\n            wistia: {\n              options: {\n                endVideoBehavior: 'loop',\n                playbackRateControl: false,\n                playbar: false,\n                playButton: false,\n                volumeControl: false,\n                fullscreenButton: false,\n                muted: true,\n              },\n            },\n          }}\n          playing\n          loop\n          muted\n          playsinline={true}\n          controls={false}\n          onReady={() => setReady(true)}\n          style={{\n            transform: `scale3d(${scale}, ${scale}, 1)`,\n            opacity,\n          }}\n          width=\"100%\"\n          height=\"100%\"\n        />\n      )}\n      <Mask backgroundColor={maskColor} visible={!ready} />\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Container"]}

package/dist/esm/controls/index.js

@@ -11,6 +11,8 @@ import {
   ComboboxDefinition,
   Font,
   FontDefinition,
+  unstable_Gallery,
+  unstable_GalleryDefinition,
   Group,
   GroupDefinition,
   GroupControl,
@@ -95,6 +97,8 @@ export {
   TextAreaDefinition,
   TextInput,
   TextInputDefinition,
+  unstable_Gallery,
+  unstable_GalleryDefinition,
   unstable_StyleV2,
   unstable_Typography,
   unstable_TypographyDefinition

package/dist/esm/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/controls/index.ts"],"sourcesContent":["export * from './control'\n\nexport {\n  ControlDefinition,\n  Checkbox,\n  CheckboxDefinition,\n  Code,\n  CodeDefinition,\n  Color,\n  ColorDefinition,\n  Combobox,\n  ComboboxDefinition,\n  Font,\n  FontDefinition,\n  Group,\n  GroupDefinition,\n  GroupControl,\n  IconRadioGroup,\n  IconRadioGroupDefinition,\n  type IconRadioGroupIcon,\n  Image,\n  ImageDefinition,\n  List,\n  ListDefinition,\n  ListControl,\n  Number,\n  NumberDefinition,\n  Select,\n  SelectDefinition,\n  Shape,\n  ShapeDefinition,\n  ShapeControl,\n  Slider,\n  SliderDefinition,\n  Style,\n  StyleDefinition,\n  type StyleProperty,\n  StyleControl,\n  TextInput,\n  TextInputDefinition,\n  TextArea,\n  TextAreaDefinition,\n  unstable_Typography,\n  unstable_TypographyDefinition,\n} from '@makeswift/controls'\n\nexport { Link, LinkDefinition } from './link'\nexport { RichTextV1Definition, RichTextV1Control } from './rich-text'\nexport { RichText, RichTextV2Definition, RichTextV2Control } from './rich-text-v2'\nexport { Slot, SlotDefinition, SlotControl } from './slot'\nexport { unstable_StyleV2, StyleV2Definition, StyleV2Control } from './style-v2/style-v2'\n"],"mappings":"AAAA,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,MAAM,sBAAsB;AACrC,SAAS,sBAAsB,yBAAyB;AACxD,SAAS,UAAU,sBAAsB,yBAAyB;AAClE,SAAS,MAAM,gBAAgB,mBAAmB;AAClD,SAAS,kBAAkB,mBAAmB,sBAAsB;","names":[]}
+{"version":3,"sources":["../../../src/controls/index.ts"],"sourcesContent":["export * from './control'\n\nexport {\n  ControlDefinition,\n  Checkbox,\n  CheckboxDefinition,\n  Code,\n  CodeDefinition,\n  Color,\n  ColorDefinition,\n  Combobox,\n  ComboboxDefinition,\n  Font,\n  FontDefinition,\n  unstable_Gallery,\n  unstable_GalleryDefinition,\n  type GalleryOption,\n  type GalleryPage,\n  Group,\n  GroupDefinition,\n  GroupControl,\n  IconRadioGroup,\n  IconRadioGroupDefinition,\n  type IconRadioGroupIcon,\n  Image,\n  ImageDefinition,\n  List,\n  ListDefinition,\n  ListControl,\n  Number,\n  NumberDefinition,\n  Select,\n  SelectDefinition,\n  Shape,\n  ShapeDefinition,\n  ShapeControl,\n  Slider,\n  SliderDefinition,\n  Style,\n  StyleDefinition,\n  type StyleProperty,\n  StyleControl,\n  TextInput,\n  TextInputDefinition,\n  TextArea,\n  TextAreaDefinition,\n  unstable_Typography,\n  unstable_TypographyDefinition,\n} from '@makeswift/controls'\n\nexport { Link, LinkDefinition } from './link'\nexport { RichTextV1Definition, RichTextV1Control } from './rich-text'\nexport { RichText, RichTextV2Definition, RichTextV2Control } from './rich-text-v2'\nexport { Slot, SlotDefinition, SlotControl } from './slot'\nexport { unstable_StyleV2, StyleV2Definition, StyleV2Control } from './style-v2/style-v2'\n"],"mappings":"AAAA,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,MAAM,sBAAsB;AACrC,SAAS,sBAAsB,yBAAyB;AACxD,SAAS,UAAU,sBAAsB,yBAAyB;AAClE,SAAS,MAAM,gBAAgB,mBAAmB;AAClD,SAAS,kBAAkB,mBAAmB,sBAAsB;","names":[]}

package/dist/esm/controls/link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/controls/link.ts"],"sourcesContent":["import { z } from 'zod'\nimport { type MouseEvent } from 'react'\nimport scrollIntoView from 'scroll-into-view-if-needed'\n\nimport {\n  type DeserializedRecord,\n  LinkDefinition as BaseLinkDefinition,\n  LinkSchema,\n} from '@makeswift/controls'\n\ntype DataType = z.infer<typeof LinkDefinition.schema.data>\ntype ScrollOptions = z.infer<typeof LinkSchema.scrollOptions>\ntype MouseEventType = MouseEvent<Element>\n\nexport function validateElementRef(href: string) {\n  try {\n    const hash = new URL(`http://www.example.com/${href}`).hash\n    return href === hash ? hash : undefined\n  } catch (error) {\n    return undefined\n  }\n}\n\nexport class LinkDefinition extends BaseLinkDefinition<MouseEventType> {\n  static deserialize(data: DeserializedRecord): LinkDefinition {\n    if (data.type !== LinkDefinition.type) {\n      throw new Error(`Link: expected type ${LinkDefinition.type}, got ${data.type}`)\n    }\n\n    const { config } = LinkDefinition.schema.definition.parse(data)\n    return Link(config)\n  }\n\n  resolveOnClick(\n    data: DataType | undefined,\n    href: string,\n    scrollOptions: ScrollOptions | undefined,\n  ) {\n    const onClick = (event: MouseEvent<Element>) => {\n      if (event.defaultPrevented) return\n\n      if (data && data.type === 'SCROLL_TO_ELEMENT') {\n        const hash = validateElementRef(href)\n        if (hash == null) {\n          console.error(`Scroll-to-element link received invalid href: ${href}`)\n          return\n        }\n\n        event.preventDefault()\n        const view = event.view as unknown as Window\n\n        scrollIntoView(view.document.querySelector(hash)!, {\n          behavior: 'smooth',\n          block: scrollOptions?.block,\n        })\n\n        if (view.location.hash !== hash) view.history.pushState({}, '', hash)\n      }\n    }\n\n    onClick.$scrollOptions = scrollOptions\n    return onClick\n  }\n}\n\nexport function Link(config?: { description?: string, label?: string }): LinkDefinition {\n  return new LinkDefinition(config ?? {})\n}\n"],"mappings":"AAEA,OAAO,oBAAoB;AAE3B;AAAA,EAEE,kBAAkB;AAAA,OAEb;AAMA,SAAS,mBAAmB,MAAc;AAC/C,MAAI;AACF,UAAM,OAAO,IAAI,IAAI,0BAA0B,IAAI,EAAE,EAAE;AACvD,WAAO,SAAS,OAAO,OAAO;AAAA,EAChC,SAAS,OAAO;AACd,WAAO;AAAA,EACT;AACF;AAEO,MAAM,uBAAuB,mBAAmC;AAAA,EACrE,OAAO,YAAY,MAA0C;AAC3D,QAAI,KAAK,SAAS,eAAe,MAAM;AACrC,YAAM,IAAI,MAAM,uBAAuB,eAAe,IAAI,SAAS,KAAK,IAAI,EAAE;AAAA,IAChF;AAEA,UAAM,EAAE,OAAO,IAAI,eAAe,OAAO,WAAW,MAAM,IAAI;AAC9D,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAEA,eACE,MACA,MACA,eACA;AACA,UAAM,UAAU,CAAC,UAA+B;AAC9C,UAAI,MAAM;AAAkB;AAE5B,UAAI,QAAQ,KAAK,SAAS,qBAAqB;AAC7C,cAAM,OAAO,mBAAmB,IAAI;AACpC,YAAI,QAAQ,MAAM;AAChB,kBAAQ,MAAM,iDAAiD,IAAI,EAAE;AACrE;AAAA,QACF;AAEA,cAAM,eAAe;AACrB,cAAM,OAAO,MAAM;AAEnB,uBAAe,KAAK,SAAS,cAAc,IAAI,GAAI;AAAA,UACjD,UAAU;AAAA,UACV,OAAO,eAAe;AAAA,QACxB,CAAC;AAED,YAAI,KAAK,SAAS,SAAS;AAAM,eAAK,QAAQ,UAAU,CAAC,GAAG,IAAI,IAAI;AAAA,MACtE;AAAA,IACF;AAEA,YAAQ,iBAAiB;AACzB,WAAO;AAAA,EACT;AACF;AAEO,SAAS,KAAK,QAAmE;AACtF,SAAO,IAAI,eAAe,UAAU,CAAC,CAAC;AACxC;","names":[]}
+{"version":3,"sources":["../../../src/controls/link.ts"],"sourcesContent":["import { z } from 'zod'\nimport { type MouseEvent } from 'react'\nimport scrollIntoView from 'scroll-into-view-if-needed'\n\nimport {\n  type DeserializedRecord,\n  LinkDefinition as BaseLinkDefinition,\n  LinkSchema,\n} from '@makeswift/controls'\n\ntype DataType = z.infer<typeof LinkDefinition.schema.data>\ntype ScrollOptions = z.infer<typeof LinkSchema.scrollOptions>\ntype MouseEventType = MouseEvent<Element>\n\nexport function validateElementRef(href: string) {\n  try {\n    const hash = new URL(`http://www.example.com/${href}`).hash\n    return href === hash ? hash : undefined\n  } catch (error) {\n    return undefined\n  }\n}\n\nexport class LinkDefinition extends BaseLinkDefinition<MouseEventType> {\n  static deserialize(data: DeserializedRecord): LinkDefinition {\n    if (data.type !== LinkDefinition.type) {\n      throw new Error(`Link: expected type ${LinkDefinition.type}, got ${data.type}`)\n    }\n\n    const { config } = LinkDefinition.schema.definition.parse(data)\n    return Link(config)\n  }\n\n  resolveOnClick(\n    data: DataType | undefined,\n    href: string,\n    scrollOptions: ScrollOptions | undefined,\n  ) {\n    const onClick = (event: MouseEvent<Element>) => {\n      if (event.defaultPrevented) return\n\n      if (data && data.type === 'SCROLL_TO_ELEMENT') {\n        const hash = validateElementRef(href)\n        if (hash == null) {\n          console.error(`Scroll-to-element link received invalid href: ${href}`)\n          return\n        }\n\n        event.preventDefault()\n        const view = event.view as unknown as Window\n\n        scrollIntoView(view.document.querySelector(hash)!, {\n          behavior: 'smooth',\n          block: scrollOptions?.block,\n        })\n\n        if (view.location.hash !== hash) view.history.pushState({}, '', hash)\n      }\n    }\n\n    onClick.$scrollOptions = scrollOptions\n    return onClick\n  }\n}\n\nexport function Link(config?: { description?: string; label?: string }): LinkDefinition {\n  return new LinkDefinition(config ?? {})\n}\n"],"mappings":"AAEA,OAAO,oBAAoB;AAE3B;AAAA,EAEE,kBAAkB;AAAA,OAEb;AAMA,SAAS,mBAAmB,MAAc;AAC/C,MAAI;AACF,UAAM,OAAO,IAAI,IAAI,0BAA0B,IAAI,EAAE,EAAE;AACvD,WAAO,SAAS,OAAO,OAAO;AAAA,EAChC,SAAS,OAAO;AACd,WAAO;AAAA,EACT;AACF;AAEO,MAAM,uBAAuB,mBAAmC;AAAA,EACrE,OAAO,YAAY,MAA0C;AAC3D,QAAI,KAAK,SAAS,eAAe,MAAM;AACrC,YAAM,IAAI,MAAM,uBAAuB,eAAe,IAAI,SAAS,KAAK,IAAI,EAAE;AAAA,IAChF;AAEA,UAAM,EAAE,OAAO,IAAI,eAAe,OAAO,WAAW,MAAM,IAAI;AAC9D,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAEA,eACE,MACA,MACA,eACA;AACA,UAAM,UAAU,CAAC,UAA+B;AAC9C,UAAI,MAAM;AAAkB;AAE5B,UAAI,QAAQ,KAAK,SAAS,qBAAqB;AAC7C,cAAM,OAAO,mBAAmB,IAAI;AACpC,YAAI,QAAQ,MAAM;AAChB,kBAAQ,MAAM,iDAAiD,IAAI,EAAE;AACrE;AAAA,QACF;AAEA,cAAM,eAAe;AACrB,cAAM,OAAO,MAAM;AAEnB,uBAAe,KAAK,SAAS,cAAc,IAAI,GAAI;AAAA,UACjD,UAAU;AAAA,UACV,OAAO,eAAe;AAAA,QACxB,CAAC;AAED,YAAI,KAAK,SAAS,SAAS;AAAM,eAAK,QAAQ,UAAU,CAAC,GAAG,IAAI,IAAI;AAAA,MACtE;AAAA,IACF;AAEA,YAAQ,iBAAiB;AACzB,WAAO;AAAA,EACT;AACF;AAEO,SAAS,KAAK,QAAmE;AACtF,SAAO,IAAI,eAAe,UAAU,CAAC,CAAC;AACxC;","names":[]}

package/dist/esm/controls/rich-text/control.js

@@ -13,9 +13,6 @@ class RichTextControl extends ControlInstance {
   static REDO = "REDO";
   static CHANGE_BOX_MODEL = "CHANGE_BOX_MODEL";
   editor = null;
-  child(_key) {
-    return void 0;
-  }
   recv = (message) => {
     if (!this.editor)
       return;
@@ -34,6 +31,22 @@ class RichTextControl extends ControlInstance {
       }
     }
   };
+  subscribe(_listener) {
+    return () => {
+    };
+  }
+  isCompositeProp() {
+    return false;
+  }
+  children() {
+    return [];
+  }
+  child(_key) {
+    return void 0;
+  }
+  resolvesToRenderableNode() {
+    return true;
+  }
   setSlateEditor(editor) {
     this.editor = editor;
     this.sendMessage({

package/dist/esm/controls/rich-text/control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/controls/rich-text/control.ts"],"sourcesContent":["import { Editor } from 'slate'\n\nimport { BuilderEditMode } from '../../state/modules/builder-edit-mode'\n\nimport {\n  ControlInstance,\n  richTextDAOToDTO,\n  type BoxDisplayModel,\n  type RichTextValue,\n} from '@makeswift/controls'\n\ntype ChangeBuilderEditModeMessage = {\n  type: typeof RichTextControl.CHANGE_BUILDER_EDIT_MODE\n  payload: { editMode: BuilderEditMode }\n}\n\ntype InitializeEditorMessage = {\n  type: typeof RichTextControl.INITIALIZE_EDITOR\n  value: RichTextValue\n}\n\ntype ChangeEditorValueMessage = {\n  type: typeof RichTextControl.CHANGE_EDITOR_VALUE\n  value: RichTextValue\n}\n\ntype FocusMessage = {\n  type: typeof RichTextControl.FOCUS\n}\n\ntype BlurMessage = {\n  type: typeof RichTextControl.BLUR\n}\n\ntype UndoMessage = {\n  type: typeof RichTextControl.UNDO\n}\n\ntype RedoMessage = {\n  type: typeof RichTextControl.REDO\n}\n\ntype BoxModelChangeMessage = {\n  type: typeof RichTextControl.CHANGE_BOX_MODEL\n  payload: { boxModel: BoxDisplayModel | null }\n}\n\ntype Message =\n  | ChangeBuilderEditModeMessage\n  | InitializeEditorMessage\n  | ChangeEditorValueMessage\n  | FocusMessage\n  | BlurMessage\n  | UndoMessage\n  | RedoMessage\n  | BoxModelChangeMessage\n\nexport class RichTextControl extends ControlInstance<Message> {\n  static readonly CHANGE_BUILDER_EDIT_MODE = 'CHANGE_BUILDER_EDIT_MODE'\n  static readonly INITIALIZE_EDITOR = 'INITIALIZE_EDITOR'\n  static readonly CHANGE_EDITOR_VALUE = 'CHANGE_EDITOR_VALUE'\n  static readonly FOCUS = 'FOCUS'\n  static readonly BLUR = 'BLUR'\n  static readonly UNDO = 'UNDO'\n  static readonly REDO = 'REDO'\n  static readonly CHANGE_BOX_MODEL = 'CHANGE_BOX_MODEL'\n\n  private editor: Editor | null = null\n\n  child(_key: string): ControlInstance | undefined {\n    return undefined\n  }\n\n  recv = (message: Message): void => {\n    if (!this.editor) return\n\n    switch (message.type) {\n      case RichTextControl.CHANGE_BUILDER_EDIT_MODE: {\n        switch (message.payload.editMode) {\n          case BuilderEditMode.BUILD:\n          case BuilderEditMode.INTERACT:\n            this.editor.deselectAndBlur()\n        }\n        break\n      }\n\n      case RichTextControl.FOCUS: {\n        this.editor.focusAndSelectAll()\n        break\n      }\n    }\n  }\n\n  setSlateEditor(editor: Editor) {\n    this.editor = editor\n\n    this.sendMessage({\n      type: RichTextControl.INITIALIZE_EDITOR,\n      value: richTextDAOToDTO(editor.children, editor.selection),\n    })\n\n    const _onChange = editor.onChange\n    this.editor.onChange = options => {\n      _onChange(options)\n\n      // if onChange is local then it will include an operation(s)\n      // that is the only case in which we want to push updates\n      // this prevent infinite loops that can occur when collaborating\n      if (options?.operation != null) {\n        this.sendMessage({\n          type: RichTextControl.CHANGE_EDITOR_VALUE,\n          value: richTextDAOToDTO(editor.children, editor.selection),\n        })\n      }\n    }\n  }\n\n  focus() {\n    this.sendMessage({ type: RichTextControl.FOCUS })\n  }\n\n  blur() {\n    this.sendMessage({ type: RichTextControl.BLUR })\n  }\n\n  undo() {\n    this.sendMessage({ type: RichTextControl.UNDO })\n  }\n\n  redo() {\n    this.sendMessage({ type: RichTextControl.REDO })\n  }\n\n  changeBoxModel(boxModel: BoxDisplayModel | null): void {\n    this.sendMessage({\n      type: RichTextControl.CHANGE_BOX_MODEL,\n      payload: { boxModel },\n    })\n  }\n}\n"],"mappings":"AAEA,SAAS,uBAAuB;AAEhC;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAgDA,MAAM,wBAAwB,gBAAyB;AAAA,EAC5D,OAAgB,2BAA2B;AAAA,EAC3C,OAAgB,oBAAoB;AAAA,EACpC,OAAgB,sBAAsB;AAAA,EACtC,OAAgB,QAAQ;AAAA,EACxB,OAAgB,OAAO;AAAA,EACvB,OAAgB,OAAO;AAAA,EACvB,OAAgB,OAAO;AAAA,EACvB,OAAgB,mBAAmB;AAAA,EAE3B,SAAwB;AAAA,EAEhC,MAAM,MAA2C;AAC/C,WAAO;AAAA,EACT;AAAA,EAEA,OAAO,CAAC,YAA2B;AACjC,QAAI,CAAC,KAAK;AAAQ;AAElB,YAAQ,QAAQ,MAAM;AAAA,MACpB,KAAK,gBAAgB,0BAA0B;AAC7C,gBAAQ,QAAQ,QAAQ,UAAU;AAAA,UAChC,KAAK,gBAAgB;AAAA,UACrB,KAAK,gBAAgB;AACnB,iBAAK,OAAO,gBAAgB;AAAA,QAChC;AACA;AAAA,MACF;AAAA,MAEA,KAAK,gBAAgB,OAAO;AAC1B,aAAK,OAAO,kBAAkB;AAC9B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,eAAe,QAAgB;AAC7B,SAAK,SAAS;AAEd,SAAK,YAAY;AAAA,MACf,MAAM,gBAAgB;AAAA,MACtB,OAAO,iBAAiB,OAAO,UAAU,OAAO,SAAS;AAAA,IAC3D,CAAC;AAED,UAAM,YAAY,OAAO;AACzB,SAAK,OAAO,WAAW,aAAW;AAChC,gBAAU,OAAO;AAKjB,UAAI,SAAS,aAAa,MAAM;AAC9B,aAAK,YAAY;AAAA,UACf,MAAM,gBAAgB;AAAA,UACtB,OAAO,iBAAiB,OAAO,UAAU,OAAO,SAAS;AAAA,QAC3D,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA,EAEA,QAAQ;AACN,SAAK,YAAY,EAAE,MAAM,gBAAgB,MAAM,CAAC;AAAA,EAClD;AAAA,EAEA,OAAO;AACL,SAAK,YAAY,EAAE,MAAM,gBAAgB,KAAK,CAAC;AAAA,EACjD;AAAA,EAEA,OAAO;AACL,SAAK,YAAY,EAAE,MAAM,gBAAgB,KAAK,CAAC;AAAA,EACjD;AAAA,EAEA,OAAO;AACL,SAAK,YAAY,EAAE,MAAM,gBAAgB,KAAK,CAAC;AAAA,EACjD;AAAA,EAEA,eAAe,UAAwC;AACrD,SAAK,YAAY;AAAA,MACf,MAAM,gBAAgB;AAAA,MACtB,SAAS,EAAE,SAAS;AAAA,IACtB,CAAC;AAAA,EACH;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/controls/rich-text/control.ts"],"sourcesContent":["import { Editor } from 'slate'\n\nimport { BuilderEditMode } from '../../state/modules/builder-edit-mode'\n\nimport {\n  ControlInstance,\n  richTextDAOToDTO,\n  type BoxDisplayModel,\n  type RichTextValue,\n} from '@makeswift/controls'\n\ntype ChangeBuilderEditModeMessage = {\n  type: typeof RichTextControl.CHANGE_BUILDER_EDIT_MODE\n  payload: { editMode: BuilderEditMode }\n}\n\ntype InitializeEditorMessage = {\n  type: typeof RichTextControl.INITIALIZE_EDITOR\n  value: RichTextValue\n}\n\ntype ChangeEditorValueMessage = {\n  type: typeof RichTextControl.CHANGE_EDITOR_VALUE\n  value: RichTextValue\n}\n\ntype FocusMessage = {\n  type: typeof RichTextControl.FOCUS\n}\n\ntype BlurMessage = {\n  type: typeof RichTextControl.BLUR\n}\n\ntype UndoMessage = {\n  type: typeof RichTextControl.UNDO\n}\n\ntype RedoMessage = {\n  type: typeof RichTextControl.REDO\n}\n\ntype BoxModelChangeMessage = {\n  type: typeof RichTextControl.CHANGE_BOX_MODEL\n  payload: { boxModel: BoxDisplayModel | null }\n}\n\ntype Message =\n  | ChangeBuilderEditModeMessage\n  | InitializeEditorMessage\n  | ChangeEditorValueMessage\n  | FocusMessage\n  | BlurMessage\n  | UndoMessage\n  | RedoMessage\n  | BoxModelChangeMessage\n\nexport class RichTextControl extends ControlInstance<Message> {\n  static readonly CHANGE_BUILDER_EDIT_MODE = 'CHANGE_BUILDER_EDIT_MODE'\n  static readonly INITIALIZE_EDITOR = 'INITIALIZE_EDITOR'\n  static readonly CHANGE_EDITOR_VALUE = 'CHANGE_EDITOR_VALUE'\n  static readonly FOCUS = 'FOCUS'\n  static readonly BLUR = 'BLUR'\n  static readonly UNDO = 'UNDO'\n  static readonly REDO = 'REDO'\n  static readonly CHANGE_BOX_MODEL = 'CHANGE_BOX_MODEL'\n\n  private editor: Editor | null = null\n\n  recv = (message: Message): void => {\n    if (!this.editor) return\n\n    switch (message.type) {\n      case RichTextControl.CHANGE_BUILDER_EDIT_MODE: {\n        switch (message.payload.editMode) {\n          case BuilderEditMode.BUILD:\n          case BuilderEditMode.INTERACT:\n            this.editor.deselectAndBlur()\n        }\n        break\n      }\n\n      case RichTextControl.FOCUS: {\n        this.editor.focusAndSelectAll()\n        break\n      }\n    }\n  }\n\n  subscribe(_listener: () => void): () => void {\n    // No mutable state, nothing to subscribe to\n    return () => {}\n  }\n\n  isCompositeProp(): boolean {\n    return false\n  }\n\n  children(): ControlInstance[] {\n    return []\n  }\n\n  child(_key: string): ControlInstance | undefined {\n    return undefined\n  }\n\n  resolvesToRenderableNode(): boolean {\n    return true\n  }\n\n  setSlateEditor(editor: Editor) {\n    this.editor = editor\n\n    this.sendMessage({\n      type: RichTextControl.INITIALIZE_EDITOR,\n      value: richTextDAOToDTO(editor.children, editor.selection),\n    })\n\n    const _onChange = editor.onChange\n    this.editor.onChange = options => {\n      _onChange(options)\n\n      // if onChange is local then it will include an operation(s)\n      // that is the only case in which we want to push updates\n      // this prevent infinite loops that can occur when collaborating\n      if (options?.operation != null) {\n        this.sendMessage({\n          type: RichTextControl.CHANGE_EDITOR_VALUE,\n          value: richTextDAOToDTO(editor.children, editor.selection),\n        })\n      }\n    }\n  }\n\n  focus() {\n    this.sendMessage({ type: RichTextControl.FOCUS })\n  }\n\n  blur() {\n    this.sendMessage({ type: RichTextControl.BLUR })\n  }\n\n  undo() {\n    this.sendMessage({ type: RichTextControl.UNDO })\n  }\n\n  redo() {\n    this.sendMessage({ type: RichTextControl.REDO })\n  }\n\n  changeBoxModel(boxModel: BoxDisplayModel | null): void {\n    this.sendMessage({\n      type: RichTextControl.CHANGE_BOX_MODEL,\n      payload: { boxModel },\n    })\n  }\n}\n"],"mappings":"AAEA,SAAS,uBAAuB;AAEhC;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAgDA,MAAM,wBAAwB,gBAAyB;AAAA,EAC5D,OAAgB,2BAA2B;AAAA,EAC3C,OAAgB,oBAAoB;AAAA,EACpC,OAAgB,sBAAsB;AAAA,EACtC,OAAgB,QAAQ;AAAA,EACxB,OAAgB,OAAO;AAAA,EACvB,OAAgB,OAAO;AAAA,EACvB,OAAgB,OAAO;AAAA,EACvB,OAAgB,mBAAmB;AAAA,EAE3B,SAAwB;AAAA,EAEhC,OAAO,CAAC,YAA2B;AACjC,QAAI,CAAC,KAAK;AAAQ;AAElB,YAAQ,QAAQ,MAAM;AAAA,MACpB,KAAK,gBAAgB,0BAA0B;AAC7C,gBAAQ,QAAQ,QAAQ,UAAU;AAAA,UAChC,KAAK,gBAAgB;AAAA,UACrB,KAAK,gBAAgB;AACnB,iBAAK,OAAO,gBAAgB;AAAA,QAChC;AACA;AAAA,MACF;AAAA,MAEA,KAAK,gBAAgB,OAAO;AAC1B,aAAK,OAAO,kBAAkB;AAC9B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU,WAAmC;AAE3C,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB;AAAA,EAEA,kBAA2B;AACzB,WAAO;AAAA,EACT;AAAA,EAEA,WAA8B;AAC5B,WAAO,CAAC;AAAA,EACV;AAAA,EAEA,MAAM,MAA2C;AAC/C,WAAO;AAAA,EACT;AAAA,EAEA,2BAAoC;AAClC,WAAO;AAAA,EACT;AAAA,EAEA,eAAe,QAAgB;AAC7B,SAAK,SAAS;AAEd,SAAK,YAAY;AAAA,MACf,MAAM,gBAAgB;AAAA,MACtB,OAAO,iBAAiB,OAAO,UAAU,OAAO,SAAS;AAAA,IAC3D,CAAC;AAED,UAAM,YAAY,OAAO;AACzB,SAAK,OAAO,WAAW,aAAW;AAChC,gBAAU,OAAO;AAKjB,UAAI,SAAS,aAAa,MAAM;AAC9B,aAAK,YAAY;AAAA,UACf,MAAM,gBAAgB;AAAA,UACtB,OAAO,iBAAiB,OAAO,UAAU,OAAO,SAAS;AAAA,QAC3D,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA,EAEA,QAAQ;AACN,SAAK,YAAY,EAAE,MAAM,gBAAgB,MAAM,CAAC;AAAA,EAClD;AAAA,EAEA,OAAO;AACL,SAAK,YAAY,EAAE,MAAM,gBAAgB,KAAK,CAAC;AAAA,EACjD;AAAA,EAEA,OAAO;AACL,SAAK,YAAY,EAAE,MAAM,gBAAgB,KAAK,CAAC;AAAA,EACjD;AAAA,EAEA,OAAO;AACL,SAAK,YAAY,EAAE,MAAM,gBAAgB,KAAK,CAAC;AAAA,EACjD;AAAA,EAEA,eAAe,UAAwC;AACrD,SAAK,YAAY;AAAA,MACf,MAAM,gBAAgB;AAAA,MACtB,SAAS,EAAE,SAAS;AAAA,IACtB,CAAC;AAAA,EACH;AACF;","names":[]}

package/dist/esm/controls/rich-text/rich-text.js

@@ -25,8 +25,8 @@ class Definition extends BaseDefinition {
       }
     };
   }
-  createInstance(sendMessage) {
-    return new RichTextControl(sendMessage);
+  createInstance(args) {
+    return new RichTextControl(args);
   }
 }
 export {

package/dist/esm/controls/rich-text/rich-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/controls/rich-text/rich-text.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport {\n  RichTextV1Definition,\n  SendMessage,\n  StableValue,\n  type DeserializedRecord,\n  type ResourceResolver,\n  type Stylesheet,\n  type Resolvable,\n  type DataType,\n} from '@makeswift/controls'\n\nimport { renderRichText } from '../../runtimes/react/controls/rich-text'\n\nimport { RichTextControl } from './control'\n\nabstract class BaseDefinition extends RichTextV1Definition<ReactNode, RichTextControl> {}\n\nclass Definition extends BaseDefinition {\n  static deserialize(data: DeserializedRecord): Definition {\n    if (data.type !== Definition.type) {\n      throw new Error(`RichTextV1: expected type ${Definition.type}, got ${data.type}`)\n    }\n\n    return new (class RichTextV1 extends Definition {})()\n  }\n\n  resolveValue(\n    data: DataType<BaseDefinition> | undefined,\n    _resolver: ResourceResolver,\n    _stylesheet: Stylesheet,\n    control?: RichTextControl,\n  ): Resolvable<ReactNode | undefined> {\n    const stableValue = StableValue({\n      name: Definition.type,\n      read: () => renderRichText(data, control ?? null),\n    })\n\n    return {\n      ...stableValue,\n      triggerResolve: async () => {},\n    }\n  }\n\n  createInstance(sendMessage: SendMessage<any>) {\n    return new RichTextControl(sendMessage)\n  }\n}\n\nexport { Definition as RichTextV1Definition, RichTextControl as RichTextV1Control }\n"],"mappings":"AACA;AAAA,EACE;AAAA,EAEA;AAAA,OAMK;AAEP,SAAS,sBAAsB;AAE/B,SAAS,uBAAuB;AAEhC,MAAe,uBAAuB,qBAAiD;AAAC;AAExF,MAAM,mBAAmB,eAAe;AAAA,EACtC,OAAO,YAAY,MAAsC;AACvD,QAAI,KAAK,SAAS,WAAW,MAAM;AACjC,YAAM,IAAI,MAAM,6BAA6B,WAAW,IAAI,SAAS,KAAK,IAAI,EAAE;AAAA,IAClF;AAEA,WAAO,IAAK,MAAM,mBAAmB,WAAW;AAAA,IAAC,EAAG;AAAA,EACtD;AAAA,EAEA,aACE,MACA,WACA,aACA,SACmC;AACnC,UAAM,cAAc,YAAY;AAAA,MAC9B,MAAM,WAAW;AAAA,MACjB,MAAM,MAAM,eAAe,MAAM,WAAW,IAAI;AAAA,IAClD,CAAC;AAED,WAAO;AAAA,MACL,GAAG;AAAA,MACH,gBAAgB,YAAY;AAAA,MAAC;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,eAAe,aAA+B;AAC5C,WAAO,IAAI,gBAAgB,WAAW;AAAA,EACxC;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/controls/rich-text/rich-text.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport {\n  RichTextV1Definition,\n  StableValue,\n  type DeserializedRecord,\n  type ControlInstanceArgs,\n  type ResourceResolver,\n  type Stylesheet,\n  type Resolvable,\n  type DataType,\n} from '@makeswift/controls'\n\nimport { renderRichText } from '../../runtimes/react/controls/rich-text'\n\nimport { RichTextControl } from './control'\n\nabstract class BaseDefinition extends RichTextV1Definition<ReactNode, RichTextControl> {}\n\nclass Definition extends BaseDefinition {\n  static deserialize(data: DeserializedRecord): Definition {\n    if (data.type !== Definition.type) {\n      throw new Error(`RichTextV1: expected type ${Definition.type}, got ${data.type}`)\n    }\n\n    return new (class RichTextV1 extends Definition {})()\n  }\n\n  resolveValue(\n    data: DataType<BaseDefinition> | undefined,\n    _resolver: ResourceResolver,\n    _stylesheet: Stylesheet,\n    control?: RichTextControl,\n  ): Resolvable<ReactNode | undefined> {\n    const stableValue = StableValue({\n      name: Definition.type,\n      read: () => renderRichText(data, control ?? null),\n    })\n\n    return {\n      ...stableValue,\n      triggerResolve: async () => {},\n    }\n  }\n\n  createInstance(args: ControlInstanceArgs) {\n    return new RichTextControl(args)\n  }\n}\n\nexport { Definition as RichTextV1Definition, RichTextControl as RichTextV1Control }\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA;AAAA,OAOK;AAEP,SAAS,sBAAsB;AAE/B,SAAS,uBAAuB;AAEhC,MAAe,uBAAuB,qBAAiD;AAAC;AAExF,MAAM,mBAAmB,eAAe;AAAA,EACtC,OAAO,YAAY,MAAsC;AACvD,QAAI,KAAK,SAAS,WAAW,MAAM;AACjC,YAAM,IAAI,MAAM,6BAA6B,WAAW,IAAI,SAAS,KAAK,IAAI,EAAE;AAAA,IAClF;AAEA,WAAO,IAAK,MAAM,mBAAmB,WAAW;AAAA,IAAC,EAAG;AAAA,EACtD;AAAA,EAEA,aACE,MACA,WACA,aACA,SACmC;AACnC,UAAM,cAAc,YAAY;AAAA,MAC9B,MAAM,WAAW;AAAA,MACjB,MAAM,MAAM,eAAe,MAAM,WAAW,IAAI;AAAA,IAClD,CAAC;AAED,WAAO;AAAA,MACL,GAAG;AAAA,MACH,gBAAgB,YAAY;AAAA,MAAC;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,eAAe,MAA2B;AACxC,WAAO,IAAI,gBAAgB,IAAI;AAAA,EACjC;AACF;","names":[]}

package/dist/esm/controls/rich-text-v2/control.js

@@ -4,8 +4,8 @@ import {
 } from "@makeswift/controls";
 import { RichTextV2Definition } from "./rich-text-v2";
 class RichTextV2Control extends ControlInstance {
-  constructor(send, descriptor) {
-    super(send);
+  constructor(descriptor, args) {
+    super(args);
     this.descriptor = descriptor;
   }
   static messagePrefix = `${RichTextDefinition.type}::control-message`;
@@ -47,9 +47,22 @@ class RichTextV2Control extends ControlInstance {
       }
     }
   };
+  subscribe(_listener) {
+    return () => {
+    };
+  }
+  isCompositeProp() {
+    return false;
+  }
+  children() {
+    return [];
+  }
   child(_key) {
     return void 0;
   }
+  resolvesToRenderableNode() {
+    return true;
+  }
   setEditor(editor) {
     this.editor = editor;
     this.sendMessage({