@makeswift/runtime 0.24.0-canary.1 → 0.24.0

package/dist/cjs/state/modules/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/state/modules/breakpoints.ts"],"sourcesContent":["import { Viewport } from 'csstype'\n\nimport {\n  findBreakpointOverride,\n  type ResponsiveValue,\n  type BreakpointId,\n  type Breakpoint,\n  type Breakpoints,\n  type FallbackStrategy,\n} from '@makeswift/controls'\n\nimport { Action, ActionTypes } from '../actions'\n\nexport {\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  type ResponsiveValue,\n  type DeviceOverride,\n  type Breakpoint,\n  type BreakpointId,\n  type Breakpoints,\n  type FallbackStrategy,\n} from '@makeswift/controls'\n\nexport type State = Breakpoints\n\nexport const DefaultBreakpointID = {\n  Desktop: 'desktop',\n  Tablet: 'tablet',\n  Mobile: 'mobile',\n} as const\n\ntype DefaultBreakpointID = (typeof DefaultBreakpointID)[keyof typeof DefaultBreakpointID]\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = [\n  {\n    id: DefaultBreakpointID.Desktop,\n    label: 'Desktop',\n    minWidth: 769,\n  },\n  {\n    id: DefaultBreakpointID.Tablet,\n    label: 'Tablet',\n    minWidth: 576,\n    maxWidth: 768,\n    viewportWidth: 760,\n  },\n  {\n    id: DefaultBreakpointID.Mobile,\n    label: 'Mobile',\n    maxWidth: 575,\n    viewportWidth: 390,\n  },\n]\n\nexport function getInitialState(breakpoints = DEFAULT_BREAKPOINTS): State {\n  return breakpoints\n}\n\nexport function reducer(state: State = getInitialState(), action: Action): State {\n  switch (action.type) {\n    case ActionTypes.SET_BREAKPOINTS: {\n      const breakpoints = action.payload.breakpoints\n\n      if (breakpoints.length === 0) throw new Error('Breakpoints cannot be empty.')\n\n      return breakpoints\n    }\n\n    default:\n      return state\n  }\n}\n\nexport type BreakpointsInput = Record<string, { width: number; label?: string; viewport?: number }>\n\nexport function parseBreakpointsInput(input: BreakpointsInput): Breakpoints {\n  validateBreakpointsInput(input)\n\n  const sorted = Object.entries(input)\n    .map(([id, value]) => ({ ...value, id }))\n    .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n  const transformed = sorted.reduce(\n    (prev, curr, index, array) => {\n      const { width, viewport, id, label } = curr\n      const next = array[index + 1]\n\n      const breakpoint: Breakpoint = {\n        id,\n        ...(label && { label }),\n        ...(next && { minWidth: next.width + 1 }),\n        maxWidth: width,\n        viewportWidth: viewport ?? width,\n      }\n\n      return [...prev, breakpoint]\n    },\n    [\n      { id: DefaultBreakpointID.Desktop, label: 'Desktop', minWidth: sorted[0].width + 1 },\n    ] as Breakpoints,\n  )\n\n  return transformed\n}\n\nfunction validateBreakpointsInput(input: BreakpointsInput) {\n  if (DefaultBreakpointID.Desktop in input) {\n    throw new Error(\n      `Cannot change the base breakpoint. \"${DefaultBreakpointID.Desktop}\" is reserved as the base breakpoint.`,\n    )\n  }\n\n  if (Object.keys(input).length === 0) {\n    throw new Error(`Breakpoints cannot be empty. You must provide at least one breakpoint.`)\n  }\n\n  const sorted = Object.entries(input)\n    .map(([id, value]) => ({ ...value, id }))\n    .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n  sorted.forEach(({ id, width, viewport }, index, array) => {\n    // This is only valid for desktop-first. We need to check the inverse for mobile-first.\n    if (viewport && viewport > width) {\n      throw new Error(\n        `Error on breakpoint \"${id}\". Viewport cannot be greater than its width.\n        \"${id}\" has a viewport of ${viewport}px and a width of ${width}px.`,\n      )\n    }\n\n    const next = array[index + 1]\n\n    if (viewport && next && viewport < next.width) {\n      throw new Error(\n        `Error on breakpoint \"${id}\". Viewport cannot be smaller than the next breakpoint's width. \n        \"${id}\" has a viewport of ${viewport}px and the next breakpoint \"${next.id}\" has a width of ${next.width}px.`,\n      )\n    }\n\n    if (next && width === next.width) {\n      throw new Error(\n        `Breakpoints cannot have the same width. \"${id}\" and \"${next.id}\" have the same width`,\n      )\n    }\n  })\n}\n\nexport const getBreakpoint = (state: State, breakpointId: Breakpoint['id']): Breakpoint => {\n  const breakpoint = state.find(({ id }) => id === breakpointId)\n\n  if (breakpoint == null) throw new Error(`Unrecognized breakpoint ID: \"${breakpointId}\".`)\n\n  return breakpoint\n}\n\nexport const getBreakpointMediaQuery = (breakpoint: Breakpoint): string => {\n  const parts = ['@media only screen']\n\n  if (breakpoint.minWidth != null) {\n    parts.push(`(min-width: ${breakpoint.minWidth}px)`)\n  }\n\n  if (breakpoint.maxWidth != null) {\n    parts.push(`(max-width: ${breakpoint.maxWidth}px)`)\n  }\n\n  return parts.join(' and ')\n}\n\nexport const getViewportStyle = (\n  state: State,\n  deviceId: string,\n): Viewport<string | number> | null | undefined => {\n  const device = getBreakpoint(state, deviceId)\n\n  return (\n    device && {\n      width: device.viewportWidth != null ? device.viewportWidth : '100%',\n      minWidth: device.minWidth,\n    }\n  )\n}\n\nexport function findNextFallback<V>(\n  breakpoints: Breakpoints,\n  value: ResponsiveValue<V>,\n  deviceId: BreakpointId,\n  activeDeviceId: BreakpointId,\n  fallbackStrategy?: FallbackStrategy<V>,\n): Breakpoint | null {\n  const deviceOverride = findBreakpointOverride(\n    breakpoints,\n    value.filter(v => v.deviceId !== activeDeviceId),\n    deviceId,\n    fallbackStrategy,\n  )\n\n  return (deviceOverride && getBreakpoint(breakpoints, deviceOverride.deviceId)) ?? null\n}\n"],"mappings":"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","names":["import_controls"]}
+{"version":3,"sources":["../../../../src/state/modules/breakpoints.ts"],"sourcesContent":["import { type Breakpoint, type Breakpoints } from '@makeswift/controls'\n\nimport { Action, ActionTypes } from '../actions'\n\nexport {\n  getBreakpoint,\n  type Breakpoint,\n  type BreakpointId,\n  type Breakpoints,\n} from '@makeswift/controls'\n\nexport type State = Breakpoints\n\nexport const DefaultBreakpointID = {\n  Desktop: 'desktop',\n  Tablet: 'tablet',\n  Mobile: 'mobile',\n} as const\n\ntype DefaultBreakpointID = (typeof DefaultBreakpointID)[keyof typeof DefaultBreakpointID]\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = [\n  {\n    id: DefaultBreakpointID.Desktop,\n    label: 'Desktop',\n    minWidth: 769,\n  },\n  {\n    id: DefaultBreakpointID.Tablet,\n    label: 'Tablet',\n    minWidth: 576,\n    maxWidth: 768,\n    viewportWidth: 760,\n  },\n  {\n    id: DefaultBreakpointID.Mobile,\n    label: 'Mobile',\n    maxWidth: 575,\n    viewportWidth: 390,\n  },\n]\n\nexport function getInitialState(breakpoints = DEFAULT_BREAKPOINTS): State {\n  return breakpoints\n}\n\nexport function reducer(state: State = getInitialState(), action: Action): State {\n  switch (action.type) {\n    case ActionTypes.SET_BREAKPOINTS: {\n      const breakpoints = action.payload.breakpoints\n\n      if (breakpoints.length === 0) throw new Error('Breakpoints cannot be empty.')\n\n      return breakpoints\n    }\n\n    default:\n      return state\n  }\n}\n\nexport type BreakpointsInput = Record<string, { width: number; label?: string; viewport?: number }>\n\nexport function parseBreakpointsInput(input: BreakpointsInput): Breakpoints {\n  validateBreakpointsInput(input)\n\n  const sorted = Object.entries(input)\n    .map(([id, value]) => ({ ...value, id }))\n    .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n  const transformed = sorted.reduce(\n    (prev, curr, index, array) => {\n      const { width, viewport, id, label } = curr\n      const next = array[index + 1]\n\n      const breakpoint: Breakpoint = {\n        id,\n        ...(label && { label }),\n        ...(next && { minWidth: next.width + 1 }),\n        maxWidth: width,\n        viewportWidth: viewport ?? width,\n      }\n\n      return [...prev, breakpoint]\n    },\n    [\n      { id: DefaultBreakpointID.Desktop, label: 'Desktop', minWidth: sorted[0].width + 1 },\n    ] as Breakpoints,\n  )\n\n  return transformed\n}\n\nfunction validateBreakpointsInput(input: BreakpointsInput) {\n  if (DefaultBreakpointID.Desktop in input) {\n    throw new Error(\n      `Cannot change the base breakpoint. \"${DefaultBreakpointID.Desktop}\" is reserved as the base breakpoint.`,\n    )\n  }\n\n  if (Object.keys(input).length === 0) {\n    throw new Error(`Breakpoints cannot be empty. You must provide at least one breakpoint.`)\n  }\n\n  const sorted = Object.entries(input)\n    .map(([id, value]) => ({ ...value, id }))\n    .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n  sorted.forEach(({ id, width, viewport }, index, array) => {\n    // This is only valid for desktop-first. We need to check the inverse for mobile-first.\n    if (viewport && viewport > width) {\n      throw new Error(\n        `Error on breakpoint \"${id}\". Viewport cannot be greater than its width.\n        \"${id}\" has a viewport of ${viewport}px and a width of ${width}px.`,\n      )\n    }\n\n    const next = array[index + 1]\n\n    if (viewport && next && viewport < next.width) {\n      throw new Error(\n        `Error on breakpoint \"${id}\". Viewport cannot be smaller than the next breakpoint's width. \n        \"${id}\" has a viewport of ${viewport}px and the next breakpoint \"${next.id}\" has a width of ${next.width}px.`,\n      )\n    }\n\n    if (next && width === next.width) {\n      throw new Error(\n        `Breakpoints cannot have the same width. \"${id}\" and \"${next.id}\" have the same width`,\n      )\n    }\n  })\n}\n"],"mappings":"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","names":["import_controls"]}

package/dist/cjs/state/modules/element-trees.js

@@ -43,8 +43,8 @@ function getInitialState(documents, descriptors) {
   }
   return state;
 }
-function getElementTree(state, id) {
-  return state.get(id) ?? null;
+function getElementTree(state, documentKey) {
+  return state.get(documentKey) ?? null;
 }
 function getElements(state, documentKey) {
   return getElementTree(state, documentKey)?.elements ?? /* @__PURE__ */ new Map();
@@ -142,12 +142,15 @@ function isElement(item) {
   return typeof item === "object" && item != null && "key" in item && "type" in item && typeof item.key === "string" && typeof item.type === "string";
 }
 function getElementOperationPath(path) {
+  if (path.length === 0) {
+    return { elementPath: [], propName: null };
+  }
   const i = path.findLastIndex(
     (fragment, i2) => typeof fragment === "number" && (i2 === path.length - 1 || path[i2 + 1] === "props")
   );
-  if (path.length === 0 || i === -1 && path[0] !== "props" || path.length - i < 3) {
+  if (i === -1 && path[0] !== "props" || path.length - i < 3) {
     console.error("Operation path does not point to an element property", { path });
-    return { elementPath: [], propName: "children" };
+    return { elementPath: [], propName: null };
   }
   return { elementPath: path.slice(0, i + 1), propName: `${path.slice(i + 1).at(1)}` };
 }
@@ -173,7 +176,7 @@ function getElementByPath(rootElement, elementPath) {
 }
 function getElementAndPropName(rootElement, { elementPath, propName }) {
   const element = getElementByPath(rootElement, elementPath);
-  return element != null ? [element, propName] : [rootElement, "children"];
+  return element != null ? [element, propName] : [rootElement, null];
 }
 function updateParentElements(elements, elementPaths, rootElement) {
   elementPaths.forEach(({ elementPath }) => {
@@ -192,7 +195,7 @@ function hasChildren(element, propName, descriptors) {
   return children.length > 0;
 }
 function deleteElement({ elements, elementIds }, deletedElement, propName, descriptors) {
-  if (hasChildren(deletedElement, propName, descriptors)) {
+  if (propName == null || hasChildren(deletedElement, propName, descriptors)) {
     for (const element of traverseElementTree(deletedElement, descriptors)) {
       elements.delete(element.key);
       elementIds.delete(element.key);
@@ -215,7 +218,7 @@ function applyDelete(elementTree, descriptors, rootElements, path) {
   };
 }
 function insertElement({ elements, elementIds }, insertedElement, propName, descriptors) {
-  if (hasChildren(insertedElement, propName, descriptors)) {
+  if (propName == null || hasChildren(insertedElement, propName, descriptors)) {
     for (const element of traverseElementTree(insertedElement, descriptors)) {
       elements.set(element.key, element);
       if (!(0, import_controls.isElementReference)(element)) {

package/dist/cjs/state/modules/element-trees.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/state/modules/element-trees.ts"],"sourcesContent":["import { type Operation } from 'ot-json0'\nimport { getIn } from 'immutable'\n\nimport { type Element, type ElementData, isElementReference } from '@makeswift/controls'\n\nimport { Introspection } from '../../prop-controllers'\n\nimport { type Action, ActionTypes } from '../actions'\n\nimport { getRootElement, type Document } from './read-only-documents'\nimport { type DescriptorsByComponentType } from './prop-controllers'\n\nexport type ElementTree = {\n  elements: Map<string, Element>\n  elementIds: Map<string, string>\n}\n\nexport type State = Map<string, ElementTree>\n\nexport function getInitialState(\n  documents?: Map<string, Document>,\n  descriptors?: DescriptorsByComponentType,\n): State {\n  const state = new Map<string, ElementTree>()\n  if (documents == null || descriptors == null) return state\n\n  for (const [documentKey, document] of documents) {\n    state.set(documentKey, buildElementTree(getRootElement(document), descriptors))\n  }\n\n  return state\n}\n\nfunction getElementTree(state: State, id: string): ElementTree | null {\n  return state.get(id) ?? null\n}\n\nexport function getElements(state: State, documentKey: string): Map<string, Element> {\n  return getElementTree(state, documentKey)?.elements ?? new Map()\n}\n\nexport function getElementIds(state: State, documentKey: string): Map<string, string> {\n  return getElementTree(state, documentKey)?.elementIds ?? new Map()\n}\n\nexport function getElement(state: State, documentKey: string, elementKey: string): Element | null {\n  return getElements(state, documentKey).get(elementKey) ?? null\n}\n\nexport function getElementId(state: State, documentKey: string, elementKey: string): string | null {\n  return getElementIds(state, documentKey).get(elementKey) ?? null\n}\n\nexport function reducer(state: State = getInitialState(), action: Action): State {\n  switch (action.type) {\n    case ActionTypes.CREATE_ELEMENT_TREE: {\n      const { document, descriptors } = action.payload\n      return new Map(state).set(\n        document.key,\n        buildElementTree(getRootElement(document), descriptors),\n      )\n    }\n\n    case ActionTypes.DELETE_ELEMENT_TREE: {\n      const nextState = new Map(state)\n      const deleted = nextState.delete(action.payload.documentKey)\n      return deleted ? nextState : state\n    }\n\n    case ActionTypes.CHANGE_ELEMENT_TREE: {\n      const { oldDocument, newDocument, descriptors, operation } = action.payload\n      const documentKey = oldDocument.key\n      console.assert(\n        documentKey === newDocument.key,\n        `Mismatching document keys ${documentKey} !== ${newDocument.key}`,\n      )\n\n      const elementTree = state.get(documentKey)\n      if (elementTree == null) return state\n\n      const updatedElementTree = applyChanges(\n        elementTree,\n        descriptors,\n        {\n          old: getRootElement(oldDocument),\n          new: getRootElement(newDocument),\n        },\n        operation,\n      )\n\n      return new Map(state).set(documentKey, updatedElementTree)\n    }\n\n    default:\n      return state\n  }\n}\n\nexport function* traverseElementTree(\n  element: Element,\n  descriptors: DescriptorsByComponentType,\n): Generator<Element> {\n  yield element\n  if (isElementReference(element)) return\n\n  const elementDescriptors = descriptors.get(element.type)\n  if (elementDescriptors == null) return\n\n  for (const [propKey, descriptor] of Object.entries(elementDescriptors)) {\n    const children = Introspection.getElementChildren(descriptor, element.props[propKey])\n    for (const child of children) {\n      yield* traverseElementTree(child, descriptors)\n    }\n  }\n}\n\nfunction getElementIdProp(\n  element: ElementData,\n  descriptors: DescriptorsByComponentType,\n): string | null {\n  const elementDescriptors = descriptors.get(element.type)\n  if (elementDescriptors == null) return null\n\n  for (const [propName, descriptor] of Object.entries(elementDescriptors)) {\n    const elementId = Introspection.getElementId(descriptor, element.props[propName])\n    if (elementId != null) return elementId\n  }\n\n  return null\n}\n\nexport function buildElementTree(\n  rootElement: Element,\n  descriptors: DescriptorsByComponentType,\n): ElementTree {\n  const elements = new Map<string, Element>()\n  const elementIds = new Map<string, string>()\n\n  for (const element of traverseElementTree(rootElement, descriptors)) {\n    elements.set(element.key, element)\n    if (!isElementReference(element)) {\n      const elementId = getElementIdProp(element, descriptors)\n      if (elementId != null) elementIds.set(element.key, elementId)\n    }\n  }\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\ntype OperationPath = Operation[number]['p']\n\n// performance-sensitive function, intentionally not using `elementData` schema here\nfunction isElement(item: unknown): item is Element {\n  return (\n    typeof item === 'object' &&\n    item != null &&\n    'key' in item &&\n    'type' in item &&\n    typeof item.key === 'string' &&\n    typeof item.type === 'string'\n  )\n}\n\ntype ElementOperationPath = { elementPath: OperationPath; propName: string }\n\nfunction getElementOperationPath(path: OperationPath): ElementOperationPath {\n  const i = path.findLastIndex(\n    (fragment, i) =>\n      typeof fragment === 'number' && (i === path.length - 1 || path[i + 1] === 'props'),\n  )\n\n  if (path.length === 0 || (i === -1 && path[0] !== 'props') || path.length - i < 3) {\n    console.error('Operation path does not point to an element property', { path })\n    return { elementPath: [], propName: 'children' }\n  }\n\n  return { elementPath: path.slice(0, i + 1), propName: `${path.slice(i + 1).at(1)}` }\n}\n\nexport function getChangedElementsPaths(\n  path: OperationPath,\n): [ElementOperationPath, ...ElementOperationPath[]] {\n  let elementOp = getElementOperationPath(path)\n  const result: [ElementOperationPath, ...ElementOperationPath[]] = [elementOp]\n  while (elementOp.elementPath.length > 0) {\n    elementOp = getElementOperationPath(elementOp.elementPath.slice(0, -1))\n    result.push(elementOp)\n  }\n\n  return result\n}\n\nfunction getElementByPath(rootElement: Element, elementPath: OperationPath): Element | null {\n  const item = getIn(rootElement, elementPath)\n  if (!isElement(item)) {\n    console.error('Expected an element, got', item, {\n      rootElement,\n      elementPath,\n    })\n\n    return null\n  }\n\n  return item\n}\n\nfunction getElementAndPropName(\n  rootElement: Element,\n  { elementPath, propName }: ElementOperationPath,\n): [Element, string] {\n  const element = getElementByPath(rootElement, elementPath)\n  return element != null ? [element, propName] : [rootElement, 'children']\n}\n\nfunction updateParentElements(\n  elements: ElementTree['elements'],\n  elementPaths: ElementOperationPath[],\n  rootElement: Element,\n): void {\n  elementPaths.forEach(({ elementPath }) => {\n    const element = getElementByPath(rootElement, elementPath)\n    if (element != null) elements.set(element.key, element)\n  })\n}\n\nfunction hasChildren(\n  element: Element,\n  propName: string,\n  descriptors: DescriptorsByComponentType,\n): boolean {\n  if (isElementReference(element)) return false\n\n  const propDescriptor = descriptors.get(element.type)?.[propName]\n  if (propDescriptor == null) return false\n\n  const children = Introspection.getElementChildren(propDescriptor, element.props[propName])\n  return children.length > 0\n}\n\nfunction deleteElement(\n  { elements, elementIds }: ElementTree,\n  deletedElement: Element,\n  propName: string,\n  descriptors: DescriptorsByComponentType,\n) {\n  if (hasChildren(deletedElement, propName, descriptors)) {\n    for (const element of traverseElementTree(deletedElement, descriptors)) {\n      elements.delete(element.key)\n      elementIds.delete(element.key)\n    }\n  } else {\n    elements.delete(deletedElement.key)\n    elementIds.delete(deletedElement.key)\n  }\n}\n\nfunction applyDelete(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  path: OperationPath,\n): ElementTree {\n  const [deleteElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [deletedElement, propName] = getElementAndPropName(rootElements.old, deleteElementPath)\n\n  const elements = new Map(elementTree.elements)\n  const elementIds = new Map(elementTree.elementIds)\n\n  deleteElement({ elements, elementIds }, deletedElement, propName, descriptors)\n  updateParentElements(elements, parentElementPaths, rootElements.new)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction insertElement(\n  { elements, elementIds }: ElementTree,\n  insertedElement: Element,\n  propName: string,\n  descriptors: DescriptorsByComponentType,\n) {\n  if (hasChildren(insertedElement, propName, descriptors)) {\n    for (const element of traverseElementTree(insertedElement, descriptors)) {\n      elements.set(element.key, element)\n      if (!isElementReference(element)) {\n        const elementId = getElementIdProp(element, descriptors)\n        if (elementId != null) elementIds.set(element.key, elementId)\n      }\n    }\n  } else {\n    elements.set(insertedElement.key, insertedElement)\n    if (!isElementReference(insertedElement)) {\n      const elementId = getElementIdProp(insertedElement, descriptors)\n      if (elementId != null) elementIds.set(insertedElement.key, elementId)\n    }\n  }\n}\n\nfunction applyInsert(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  path: OperationPath,\n): ElementTree {\n  const [insertedElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [insertedElement, propName] = getElementAndPropName(rootElements.new, insertedElementPath)\n\n  const elements = new Map(elementTree.elements)\n  const elementIds = new Map(elementTree.elementIds)\n\n  insertElement({ elements, elementIds }, insertedElement, propName, descriptors)\n  updateParentElements(elements, parentElementPaths, rootElements.new)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction applyUpdate(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  path: OperationPath,\n): ElementTree {\n  const [updateElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [deletedElement, propName] = getElementAndPropName(rootElements.old, updateElementPath)\n  const [insertedElement, _] = getElementAndPropName(rootElements.new, updateElementPath)\n\n  const elements = new Map(elementTree.elements)\n  const elementIds = new Map(elementTree.elementIds)\n\n  deleteElement({ elements, elementIds }, deletedElement, propName, descriptors)\n  insertElement({ elements, elementIds }, insertedElement, propName, descriptors)\n\n  updateParentElements(elements, parentElementPaths, rootElements.new)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction applyChanges(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  operation: Operation,\n): ElementTree {\n  return operation.reduce((tree, op) => {\n    const hasDelete = 'ld' in op || 'od' in op\n    const hasInsert = 'li' in op || 'oi' in op\n    if (hasDelete && hasInsert) {\n      return applyUpdate(tree, descriptors, rootElements, op.p)\n    }\n\n    if (hasDelete) return applyDelete(tree, descriptors, rootElements, op.p)\n    if (hasInsert) return applyInsert(tree, descriptors, rootElements, op.p)\n    return tree\n  }, elementTree)\n}\n"],"mappings":"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","names":["i"]}
+{"version":3,"sources":["../../../../src/state/modules/element-trees.ts"],"sourcesContent":["import { type Operation } from 'ot-json0'\nimport { getIn } from 'immutable'\n\nimport { type Element, type ElementData, isElementReference } from '@makeswift/controls'\n\nimport { Introspection } from '../../prop-controllers'\n\nimport { type Action, ActionTypes } from '../actions'\n\nimport { getRootElement, type Document } from './read-only-documents'\nimport { type DescriptorsByComponentType } from './prop-controllers'\n\nexport type ElementTree = {\n  elements: Map<string, Element>\n  elementIds: Map<string, string>\n}\n\nexport type State = Map<string, ElementTree>\n\nexport function getInitialState(\n  documents?: Map<string, Document>,\n  descriptors?: DescriptorsByComponentType,\n): State {\n  const state = new Map<string, ElementTree>()\n  if (documents == null || descriptors == null) return state\n\n  for (const [documentKey, document] of documents) {\n    state.set(documentKey, buildElementTree(getRootElement(document), descriptors))\n  }\n\n  return state\n}\n\nfunction getElementTree(state: State, documentKey: string): ElementTree | null {\n  return state.get(documentKey) ?? null\n}\n\nexport function getElements(state: State, documentKey: string): Map<string, Element> {\n  return getElementTree(state, documentKey)?.elements ?? new Map()\n}\n\nexport function getElementIds(state: State, documentKey: string): Map<string, string> {\n  return getElementTree(state, documentKey)?.elementIds ?? new Map()\n}\n\nexport function getElement(state: State, documentKey: string, elementKey: string): Element | null {\n  return getElements(state, documentKey).get(elementKey) ?? null\n}\n\nexport function getElementId(state: State, documentKey: string, elementKey: string): string | null {\n  return getElementIds(state, documentKey).get(elementKey) ?? null\n}\n\nexport function reducer(state: State = getInitialState(), action: Action): State {\n  switch (action.type) {\n    case ActionTypes.CREATE_ELEMENT_TREE: {\n      const { document, descriptors } = action.payload\n      return new Map(state).set(\n        document.key,\n        buildElementTree(getRootElement(document), descriptors),\n      )\n    }\n\n    case ActionTypes.DELETE_ELEMENT_TREE: {\n      const nextState = new Map(state)\n      const deleted = nextState.delete(action.payload.documentKey)\n      return deleted ? nextState : state\n    }\n\n    case ActionTypes.CHANGE_ELEMENT_TREE: {\n      const { oldDocument, newDocument, descriptors, operation } = action.payload\n      const documentKey = oldDocument.key\n      console.assert(\n        documentKey === newDocument.key,\n        `Mismatching document keys ${documentKey} !== ${newDocument.key}`,\n      )\n\n      const elementTree = state.get(documentKey)\n      if (elementTree == null) return state\n\n      const updatedElementTree = applyChanges(\n        elementTree,\n        descriptors,\n        {\n          old: getRootElement(oldDocument),\n          new: getRootElement(newDocument),\n        },\n        operation,\n      )\n\n      return new Map(state).set(documentKey, updatedElementTree)\n    }\n\n    default:\n      return state\n  }\n}\n\nexport function* traverseElementTree(\n  element: Element,\n  descriptors: DescriptorsByComponentType,\n): Generator<Element> {\n  yield element\n  if (isElementReference(element)) return\n\n  const elementDescriptors = descriptors.get(element.type)\n  if (elementDescriptors == null) return\n\n  for (const [propKey, descriptor] of Object.entries(elementDescriptors)) {\n    const children = Introspection.getElementChildren(descriptor, element.props[propKey])\n    for (const child of children) {\n      yield* traverseElementTree(child, descriptors)\n    }\n  }\n}\n\nfunction getElementIdProp(\n  element: ElementData,\n  descriptors: DescriptorsByComponentType,\n): string | null {\n  const elementDescriptors = descriptors.get(element.type)\n  if (elementDescriptors == null) return null\n\n  for (const [propName, descriptor] of Object.entries(elementDescriptors)) {\n    const elementId = Introspection.getElementId(descriptor, element.props[propName])\n    if (elementId != null) return elementId\n  }\n\n  return null\n}\n\nexport function buildElementTree(\n  rootElement: Element,\n  descriptors: DescriptorsByComponentType,\n): ElementTree {\n  const elements = new Map<string, Element>()\n  const elementIds = new Map<string, string>()\n\n  for (const element of traverseElementTree(rootElement, descriptors)) {\n    elements.set(element.key, element)\n    if (!isElementReference(element)) {\n      const elementId = getElementIdProp(element, descriptors)\n      if (elementId != null) elementIds.set(element.key, elementId)\n    }\n  }\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\ntype OperationPath = Operation[number]['p']\n\n// performance-sensitive function, intentionally not using `elementData` schema here\nfunction isElement(item: unknown): item is Element {\n  return (\n    typeof item === 'object' &&\n    item != null &&\n    'key' in item &&\n    'type' in item &&\n    typeof item.key === 'string' &&\n    typeof item.type === 'string'\n  )\n}\n\ntype ElementOperationPath = { elementPath: OperationPath; propName: string | null }\n\nfunction getElementOperationPath(path: OperationPath): ElementOperationPath {\n  if (path.length === 0) {\n    return { elementPath: [], propName: null }\n  }\n\n  const i = path.findLastIndex(\n    (fragment, i) =>\n      typeof fragment === 'number' && (i === path.length - 1 || path[i + 1] === 'props'),\n  )\n\n  if ((i === -1 && path[0] !== 'props') || path.length - i < 3) {\n    console.error('Operation path does not point to an element property', { path })\n    return { elementPath: [], propName: null }\n  }\n\n  return { elementPath: path.slice(0, i + 1), propName: `${path.slice(i + 1).at(1)}` }\n}\n\nexport function getChangedElementsPaths(\n  path: OperationPath,\n): [ElementOperationPath, ...ElementOperationPath[]] {\n  let elementOp = getElementOperationPath(path)\n  const result: [ElementOperationPath, ...ElementOperationPath[]] = [elementOp]\n  while (elementOp.elementPath.length > 0) {\n    elementOp = getElementOperationPath(elementOp.elementPath.slice(0, -1))\n    result.push(elementOp)\n  }\n\n  return result\n}\n\nfunction getElementByPath(rootElement: Element, elementPath: OperationPath): Element | null {\n  const item = getIn(rootElement, elementPath)\n  if (!isElement(item)) {\n    console.error('Expected an element, got', item, {\n      rootElement,\n      elementPath,\n    })\n\n    return null\n  }\n\n  return item\n}\n\nfunction getElementAndPropName(\n  rootElement: Element,\n  { elementPath, propName }: ElementOperationPath,\n): [Element, string | null] {\n  const element = getElementByPath(rootElement, elementPath)\n  return element != null ? [element, propName] : [rootElement, null]\n}\n\nfunction updateParentElements(\n  elements: ElementTree['elements'],\n  elementPaths: ElementOperationPath[],\n  rootElement: Element,\n): void {\n  elementPaths.forEach(({ elementPath }) => {\n    const element = getElementByPath(rootElement, elementPath)\n    if (element != null) elements.set(element.key, element)\n  })\n}\n\nfunction hasChildren(\n  element: Element,\n  propName: string,\n  descriptors: DescriptorsByComponentType,\n): boolean {\n  if (isElementReference(element)) return false\n\n  const propDescriptor = descriptors.get(element.type)?.[propName]\n  if (propDescriptor == null) return false\n\n  const children = Introspection.getElementChildren(propDescriptor, element.props[propName])\n  return children.length > 0\n}\n\nfunction deleteElement(\n  { elements, elementIds }: ElementTree,\n  deletedElement: Element,\n  propName: string | null,\n  descriptors: DescriptorsByComponentType,\n) {\n  if (propName == null || hasChildren(deletedElement, propName, descriptors)) {\n    for (const element of traverseElementTree(deletedElement, descriptors)) {\n      elements.delete(element.key)\n      elementIds.delete(element.key)\n    }\n  } else {\n    elements.delete(deletedElement.key)\n    elementIds.delete(deletedElement.key)\n  }\n}\n\nfunction applyDelete(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  path: OperationPath,\n): ElementTree {\n  const [deleteElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [deletedElement, propName] = getElementAndPropName(rootElements.old, deleteElementPath)\n\n  const elements = new Map(elementTree.elements)\n  const elementIds = new Map(elementTree.elementIds)\n\n  deleteElement({ elements, elementIds }, deletedElement, propName, descriptors)\n  updateParentElements(elements, parentElementPaths, rootElements.new)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction insertElement(\n  { elements, elementIds }: ElementTree,\n  insertedElement: Element,\n  propName: string | null,\n  descriptors: DescriptorsByComponentType,\n) {\n  if (propName == null || hasChildren(insertedElement, propName, descriptors)) {\n    for (const element of traverseElementTree(insertedElement, descriptors)) {\n      elements.set(element.key, element)\n      if (!isElementReference(element)) {\n        const elementId = getElementIdProp(element, descriptors)\n        if (elementId != null) elementIds.set(element.key, elementId)\n      }\n    }\n  } else {\n    elements.set(insertedElement.key, insertedElement)\n    if (!isElementReference(insertedElement)) {\n      const elementId = getElementIdProp(insertedElement, descriptors)\n      if (elementId != null) elementIds.set(insertedElement.key, elementId)\n    }\n  }\n}\n\nfunction applyInsert(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  path: OperationPath,\n): ElementTree {\n  const [insertedElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [insertedElement, propName] = getElementAndPropName(rootElements.new, insertedElementPath)\n\n  const elements = new Map(elementTree.elements)\n  const elementIds = new Map(elementTree.elementIds)\n\n  insertElement({ elements, elementIds }, insertedElement, propName, descriptors)\n  updateParentElements(elements, parentElementPaths, rootElements.new)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction applyUpdate(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  path: OperationPath,\n): ElementTree {\n  const [updateElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [deletedElement, propName] = getElementAndPropName(rootElements.old, updateElementPath)\n  const [insertedElement, _] = getElementAndPropName(rootElements.new, updateElementPath)\n\n  const elements = new Map(elementTree.elements)\n  const elementIds = new Map(elementTree.elementIds)\n\n  deleteElement({ elements, elementIds }, deletedElement, propName, descriptors)\n  insertElement({ elements, elementIds }, insertedElement, propName, descriptors)\n\n  updateParentElements(elements, parentElementPaths, rootElements.new)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction applyChanges(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  operation: Operation,\n): ElementTree {\n  return operation.reduce((tree, op) => {\n    const hasDelete = 'ld' in op || 'od' in op\n    const hasInsert = 'li' in op || 'oi' in op\n    if (hasDelete && hasInsert) {\n      return applyUpdate(tree, descriptors, rootElements, op.p)\n    }\n\n    if (hasDelete) return applyDelete(tree, descriptors, rootElements, op.p)\n    if (hasInsert) return applyInsert(tree, descriptors, rootElements, op.p)\n    return tree\n  }, elementTree)\n}\n"],"mappings":"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","names":["i"]}

package/dist/esm/api/react.js

@@ -13,15 +13,22 @@ const CacheData = {
   }
 };
 class MakeswiftHostApiClient {
+  siteVersion;
   graphqlClient;
   makeswiftApiClient;
   subscribe;
-  constructor({ uri, cacheData, locale }) {
+  constructor({
+    uri,
+    siteVersion,
+    cacheData,
+    locale
+  }) {
     this.graphqlClient = new GraphQLClient(uri);
     this.makeswiftApiClient = MakeswiftApiClient.configureStore({
       serializedState: cacheData,
       defaultLocale: locale
     });
+    this.siteVersion = siteVersion;
     this.subscribe = this.makeswiftApiClient.subscribe;
   }
   readSwatch(swatchId) {
@@ -33,7 +40,7 @@ class MakeswiftHostApiClient {
   }
   async fetchSwatch(swatchId) {
     return await this.makeswiftApiClient.dispatch(
-      MakeswiftApiClient.fetchAPIResource(APIResourceType.Swatch, swatchId)
+      MakeswiftApiClient.fetchAPIResource(APIResourceType.Swatch, swatchId, this.siteVersion)
     );
   }
   resolveSwatch(swatchId) {
@@ -52,7 +59,7 @@ class MakeswiftHostApiClient {
   }
   async fetchFile(fileId) {
     return await this.makeswiftApiClient.dispatch(
-      MakeswiftApiClient.fetchAPIResource(APIResourceType.File, fileId)
+      MakeswiftApiClient.fetchAPIResource(APIResourceType.File, fileId, this.siteVersion)
     );
   }
   resolveFile(fileId) {
@@ -71,7 +78,11 @@ class MakeswiftHostApiClient {
   }
   async fetchTypography(typographyId) {
     return await this.makeswiftApiClient.dispatch(
-      MakeswiftApiClient.fetchAPIResource(APIResourceType.Typography, typographyId)
+      MakeswiftApiClient.fetchAPIResource(
+        APIResourceType.Typography,
+        typographyId,
+        this.siteVersion
+      )
     );
   }
   resolveTypography(typographyId) {
@@ -90,7 +101,11 @@ class MakeswiftHostApiClient {
   }
   async fetchGlobalElement(globalElementId) {
     return await this.makeswiftApiClient.dispatch(
-      MakeswiftApiClient.fetchAPIResource(APIResourceType.GlobalElement, globalElementId)
+      MakeswiftApiClient.fetchAPIResource(
+        APIResourceType.GlobalElement,
+        globalElementId,
+        this.siteVersion
+      )
     );
   }
   readLocalizedGlobalElement({
@@ -112,6 +127,7 @@ class MakeswiftHostApiClient {
       MakeswiftApiClient.fetchAPIResource(
         APIResourceType.LocalizedGlobalElement,
         globalElementId,
+        this.siteVersion,
         locale
       )
     );
@@ -132,7 +148,12 @@ class MakeswiftHostApiClient {
     locale
   }) {
     return await this.makeswiftApiClient.dispatch(
-      MakeswiftApiClient.fetchAPIResource(APIResourceType.PagePathnameSlice, pageId, locale)
+      MakeswiftApiClient.fetchAPIResource(
+        APIResourceType.PagePathnameSlice,
+        pageId,
+        this.siteVersion,
+        locale
+      )
     );
   }
   resolvePagePathnameSlice({
@@ -171,7 +192,7 @@ class MakeswiftHostApiClient {
   }
   async fetchTable(tableId) {
     return await this.makeswiftApiClient.dispatch(
-      MakeswiftApiClient.fetchAPIResource(APIResourceType.Table, tableId)
+      MakeswiftApiClient.fetchAPIResource(APIResourceType.Table, tableId, this.siteVersion)
     );
   }
   async createTableRecord(tableId, columns) {

package/dist/esm/api/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/api/react.ts"],"sourcesContent":["import { type FetchableValue } from '@makeswift/controls'\nimport * as MakeswiftApiClient from '../state/makeswift-api-client'\nimport {\n  APIResourceType,\n  File,\n  GlobalElement,\n  LocalizedGlobalElement,\n  Page,\n  PagePathnameSlice,\n  Site,\n  Snippet,\n  Swatch,\n  Table,\n  Typography,\n} from './types'\nimport { GraphQLClient } from './graphql/client'\nimport { CreateTableRecordMutation } from './graphql/documents'\nimport {\n  CreateTableRecordMutationResult,\n  CreateTableRecordMutationVariables,\n} from './graphql/generated/types'\n\nexport type CacheData = MakeswiftApiClient.SerializedState\n\nexport const CacheData = {\n  empty(): CacheData {\n    return {\n      apiResources: {},\n      localizedResourcesMap: {},\n    }\n  },\n}\n\n/**\n * NOTE(miguel): This \"client\" is used to fetch Makeswift API resources needed for the host. For\n * example, swatches, files, typographies, etc. Ideally it's internal to the runtime and is only\n * used by controls to transform API references to API resources.\n *\n * Moreover, its use should be reserved for the builder only, since for live pages all Makeswift\n * API resources should be embedded in the \"page snapshot\". In the builder, this client serves the\n * purpose of sending requests for API resources and keeping a cache so that changes that happen in\n * the builder, like modifying a swatch, can be sent via `postMessage` to the host and the cache can\n * immediately update the value and re-render.\n *\n * Furthermore, the API resources requested shouldn't be requested directly from the Makeswift API\n * as that would require those resources to not be authenticated since the requests come from the\n * browser when running the host. Instead, the requests should go to the host directly, at the\n * Makeswift API endpoint (i.g., `/api/makeswift/[...makeswift]` dynamic route) where the host's\n * API key can be used, securely, in the server. For this reason, this client should really be a\n * client of the host's API, not Makeswift's, intended to build and continuously maintain a realtime\n * snapshot for use in the builder, not the lives pages.\n */\nexport class MakeswiftHostApiClient {\n  graphqlClient: GraphQLClient\n  makeswiftApiClient: MakeswiftApiClient.Store\n  subscribe: MakeswiftApiClient.Store['subscribe']\n\n  constructor({ uri, cacheData, locale }: { uri: string; cacheData?: CacheData; locale?: string }) {\n    this.graphqlClient = new GraphQLClient(uri)\n    this.makeswiftApiClient = MakeswiftApiClient.configureStore({\n      serializedState: cacheData,\n      defaultLocale: locale,\n    })\n\n    this.subscribe = this.makeswiftApiClient.subscribe\n  }\n\n  readSwatch(swatchId: string): Swatch | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Swatch,\n      swatchId,\n    )\n  }\n\n  async fetchSwatch(swatchId: string): Promise<Swatch | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Swatch, swatchId),\n    )\n  }\n\n  resolveSwatch(swatchId: string | undefined): FetchableValue<Swatch | null> {\n    return this.resolveResource(APIResourceType.Swatch, {\n      id: swatchId,\n      read: id => this.readSwatch(id),\n      fetch: id => this.fetchSwatch(id),\n    })\n  }\n\n  readFile(fileId: string): File | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.File,\n      fileId,\n    )\n  }\n\n  async fetchFile(fileId: string): Promise<File | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.File, fileId),\n    )\n  }\n\n  resolveFile(fileId: string | undefined): FetchableValue<File | null> {\n    return this.resolveResource(APIResourceType.File, {\n      id: fileId,\n      read: id => this.readFile(id),\n      fetch: id => this.fetchFile(id),\n    })\n  }\n\n  readTypography(typographyId: string): Typography | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Typography,\n      typographyId,\n    )\n  }\n\n  async fetchTypography(typographyId: string): Promise<Typography | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Typography, typographyId),\n    )\n  }\n\n  resolveTypography(typographyId: string | undefined): FetchableValue<Typography | null> {\n    return this.resolveResource(APIResourceType.Typography, {\n      id: typographyId,\n      read: id => this.readTypography(id),\n      fetch: id => this.fetchTypography(id),\n    })\n  }\n\n  readGlobalElement(globalElementId: string): GlobalElement | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.GlobalElement,\n      globalElementId,\n    )\n  }\n\n  async fetchGlobalElement(globalElementId: string): Promise<GlobalElement | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.GlobalElement, globalElementId),\n    )\n  }\n\n  readLocalizedGlobalElement({\n    globalElementId,\n    locale,\n  }: {\n    globalElementId: string\n    locale: string\n  }): LocalizedGlobalElement | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.LocalizedGlobalElement,\n      globalElementId,\n      locale,\n    )\n  }\n\n  async fetchLocalizedGlobalElement({\n    globalElementId,\n    locale,\n  }: {\n    globalElementId: string\n    locale: string\n  }): Promise<LocalizedGlobalElement | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(\n        APIResourceType.LocalizedGlobalElement,\n        globalElementId,\n        locale,\n      ),\n    )\n  }\n\n  readPagePathnameSlice({\n    pageId,\n    locale,\n  }: {\n    pageId: string\n    locale: string | null\n  }): PagePathnameSlice | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.PagePathnameSlice,\n      pageId,\n      locale,\n    )\n  }\n\n  async fetchPagePathnameSlice({\n    pageId,\n    locale,\n  }: {\n    pageId: string\n    locale: string | null\n  }): Promise<PagePathnameSlice | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.PagePathnameSlice, pageId, locale),\n    )\n  }\n\n  resolvePagePathnameSlice({\n    pageId,\n    locale,\n  }: {\n    pageId: string | undefined\n    locale: string | null\n  }): FetchableValue<PagePathnameSlice | null> {\n    return this.resolveResource(APIResourceType.PagePathnameSlice, {\n      id: pageId,\n      read: id => this.readPagePathnameSlice({ pageId: id, locale }),\n      fetch: id => this.fetchPagePathnameSlice({ pageId: id, locale }),\n    })\n  }\n\n  resolveResource<R>(\n    type: APIResourceType,\n    {\n      id,\n      read,\n      fetch,\n    }: {\n      id: string | undefined\n      read: (id: string) => R | null\n      fetch: (id: string) => Promise<R | null>\n    },\n  ): FetchableValue<R | null> {\n    const _read = () => (id != null ? read(id) : null)\n    let lastValue: R | null = null\n    return {\n      name: `${type}:${id}`,\n      readStable: () => (lastValue = _read()),\n      subscribe: (onUpdate: () => void) =>\n        this.subscribe(() => {\n          if (_read() !== lastValue) onUpdate()\n        }),\n      fetch: async () => (id != null ? fetch(id) : null),\n    }\n  }\n\n  readTable(tableId: string): Table | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Table,\n      tableId,\n    )\n  }\n\n  async fetchTable(tableId: string): Promise<Table | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Table, tableId),\n    )\n  }\n\n  async createTableRecord(tableId: string, columns: any): Promise<void> {\n    await this.graphqlClient.request<\n      CreateTableRecordMutationResult,\n      CreateTableRecordMutationVariables\n    >(CreateTableRecordMutation, { input: { data: { tableId, columns } } })\n  }\n\n  readSite(siteId: string): Site | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Site,\n      siteId,\n    )\n  }\n\n  readPage(pageId: string): Page | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Page,\n      pageId,\n    )\n  }\n\n  readSnippet(snippetId: string): Snippet | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Snippet,\n      snippetId,\n    )\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/api/react.ts"],"sourcesContent":["import { type FetchableValue } from '@makeswift/controls'\nimport * as MakeswiftApiClient from '../state/makeswift-api-client'\nimport {\n  APIResourceType,\n  File,\n  GlobalElement,\n  LocalizedGlobalElement,\n  Page,\n  PagePathnameSlice,\n  Site,\n  Snippet,\n  Swatch,\n  Table,\n  Typography,\n} from './types'\nimport { GraphQLClient } from './graphql/client'\nimport { CreateTableRecordMutation } from './graphql/documents'\nimport {\n  CreateTableRecordMutationResult,\n  CreateTableRecordMutationVariables,\n} from './graphql/generated/types'\nimport { MakeswiftSiteVersion } from './site-version'\n\nexport type CacheData = MakeswiftApiClient.SerializedState\n\nexport const CacheData = {\n  empty(): CacheData {\n    return {\n      apiResources: {},\n      localizedResourcesMap: {},\n    }\n  },\n}\n\n/**\n * NOTE(miguel): This \"client\" is used to fetch Makeswift API resources needed for the host. For\n * example, swatches, files, typographies, etc. Ideally it's internal to the runtime and is only\n * used by controls to transform API references to API resources.\n *\n * Moreover, its use should be reserved for the builder only, since for live pages all Makeswift\n * API resources should be embedded in the \"page snapshot\". In the builder, this client serves the\n * purpose of sending requests for API resources and keeping a cache so that changes that happen in\n * the builder, like modifying a swatch, can be sent via `postMessage` to the host and the cache can\n * immediately update the value and re-render.\n *\n * Furthermore, the API resources requested shouldn't be requested directly from the Makeswift API\n * as that would require those resources to not be authenticated since the requests come from the\n * browser when running the host. Instead, the requests should go to the host directly, at the\n * Makeswift API endpoint (i.g., `/api/makeswift/[...makeswift]` dynamic route) where the host's\n * API key can be used, securely, in the server. For this reason, this client should really be a\n * client of the host's API, not Makeswift's, intended to build and continuously maintain a realtime\n * snapshot for use in the builder, not the lives pages.\n */\nexport class MakeswiftHostApiClient {\n  siteVersion: MakeswiftSiteVersion\n  graphqlClient: GraphQLClient\n  makeswiftApiClient: MakeswiftApiClient.Store\n  subscribe: MakeswiftApiClient.Store['subscribe']\n\n  constructor({\n    uri,\n    siteVersion,\n    cacheData,\n    locale,\n  }: {\n    uri: string\n    siteVersion: MakeswiftSiteVersion\n    cacheData?: CacheData\n    locale?: string\n  }) {\n    this.graphqlClient = new GraphQLClient(uri)\n    this.makeswiftApiClient = MakeswiftApiClient.configureStore({\n      serializedState: cacheData,\n      defaultLocale: locale,\n    })\n    this.siteVersion = siteVersion\n    this.subscribe = this.makeswiftApiClient.subscribe\n  }\n\n  readSwatch(swatchId: string): Swatch | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Swatch,\n      swatchId,\n    )\n  }\n\n  async fetchSwatch(swatchId: string): Promise<Swatch | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Swatch, swatchId, this.siteVersion),\n    )\n  }\n\n  resolveSwatch(swatchId: string | undefined): FetchableValue<Swatch | null> {\n    return this.resolveResource(APIResourceType.Swatch, {\n      id: swatchId,\n      read: id => this.readSwatch(id),\n      fetch: id => this.fetchSwatch(id),\n    })\n  }\n\n  readFile(fileId: string): File | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.File,\n      fileId,\n    )\n  }\n\n  async fetchFile(fileId: string): Promise<File | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.File, fileId, this.siteVersion),\n    )\n  }\n\n  resolveFile(fileId: string | undefined): FetchableValue<File | null> {\n    return this.resolveResource(APIResourceType.File, {\n      id: fileId,\n      read: id => this.readFile(id),\n      fetch: id => this.fetchFile(id),\n    })\n  }\n\n  readTypography(typographyId: string): Typography | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Typography,\n      typographyId,\n    )\n  }\n\n  async fetchTypography(typographyId: string): Promise<Typography | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(\n        APIResourceType.Typography,\n        typographyId,\n        this.siteVersion,\n      ),\n    )\n  }\n\n  resolveTypography(typographyId: string | undefined): FetchableValue<Typography | null> {\n    return this.resolveResource(APIResourceType.Typography, {\n      id: typographyId,\n      read: id => this.readTypography(id),\n      fetch: id => this.fetchTypography(id),\n    })\n  }\n\n  readGlobalElement(globalElementId: string): GlobalElement | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.GlobalElement,\n      globalElementId,\n    )\n  }\n\n  async fetchGlobalElement(globalElementId: string): Promise<GlobalElement | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(\n        APIResourceType.GlobalElement,\n        globalElementId,\n        this.siteVersion,\n      ),\n    )\n  }\n\n  readLocalizedGlobalElement({\n    globalElementId,\n    locale,\n  }: {\n    globalElementId: string\n    locale: string\n  }): LocalizedGlobalElement | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.LocalizedGlobalElement,\n      globalElementId,\n      locale,\n    )\n  }\n\n  async fetchLocalizedGlobalElement({\n    globalElementId,\n    locale,\n  }: {\n    globalElementId: string\n    locale: string\n  }): Promise<LocalizedGlobalElement | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(\n        APIResourceType.LocalizedGlobalElement,\n        globalElementId,\n        this.siteVersion,\n        locale,\n      ),\n    )\n  }\n\n  readPagePathnameSlice({\n    pageId,\n    locale,\n  }: {\n    pageId: string\n    locale: string | null\n  }): PagePathnameSlice | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.PagePathnameSlice,\n      pageId,\n      locale,\n    )\n  }\n\n  async fetchPagePathnameSlice({\n    pageId,\n    locale,\n  }: {\n    pageId: string\n    locale: string | null\n  }): Promise<PagePathnameSlice | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(\n        APIResourceType.PagePathnameSlice,\n        pageId,\n        this.siteVersion,\n        locale,\n      ),\n    )\n  }\n\n  resolvePagePathnameSlice({\n    pageId,\n    locale,\n  }: {\n    pageId: string | undefined\n    locale: string | null\n  }): FetchableValue<PagePathnameSlice | null> {\n    return this.resolveResource(APIResourceType.PagePathnameSlice, {\n      id: pageId,\n      read: id => this.readPagePathnameSlice({ pageId: id, locale }),\n      fetch: id => this.fetchPagePathnameSlice({ pageId: id, locale }),\n    })\n  }\n\n  resolveResource<R>(\n    type: APIResourceType,\n    {\n      id,\n      read,\n      fetch,\n    }: {\n      id: string | undefined\n      read: (id: string) => R | null\n      fetch: (id: string) => Promise<R | null>\n    },\n  ): FetchableValue<R | null> {\n    const _read = () => (id != null ? read(id) : null)\n    let lastValue: R | null = null\n    return {\n      name: `${type}:${id}`,\n      readStable: () => (lastValue = _read()),\n      subscribe: (onUpdate: () => void) =>\n        this.subscribe(() => {\n          if (_read() !== lastValue) onUpdate()\n        }),\n      fetch: async () => (id != null ? fetch(id) : null),\n    }\n  }\n\n  readTable(tableId: string): Table | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Table,\n      tableId,\n    )\n  }\n\n  async fetchTable(tableId: string): Promise<Table | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Table, tableId, this.siteVersion),\n    )\n  }\n\n  async createTableRecord(tableId: string, columns: any): Promise<void> {\n    await this.graphqlClient.request<\n      CreateTableRecordMutationResult,\n      CreateTableRecordMutationVariables\n    >(CreateTableRecordMutation, { input: { data: { tableId, columns } } })\n  }\n\n  readSite(siteId: string): Site | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Site,\n      siteId,\n    )\n  }\n\n  readPage(pageId: string): Page | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Page,\n      pageId,\n    )\n  }\n\n  readSnippet(snippetId: string): Snippet | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Snippet,\n      snippetId,\n    )\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/api/site-version.js

@@ -0,0 +1,10 @@
+import { z } from "zod";
+const makeswiftSiteVersionSchema = z.enum(["Live", "Working"]);
+const MakeswiftSiteVersion = makeswiftSiteVersionSchema.Enum;
+const API_HANDLER_SITE_VERSION_HEADER = "X-Makeswift-Site-Version";
+export {
+  API_HANDLER_SITE_VERSION_HEADER,
+  MakeswiftSiteVersion,
+  makeswiftSiteVersionSchema
+};
+//# sourceMappingURL=site-version.js.map

package/dist/esm/api/site-version.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/api/site-version.ts"],"sourcesContent":["import { z } from 'zod'\n\nexport const makeswiftSiteVersionSchema = z.enum(['Live', 'Working'])\nexport const MakeswiftSiteVersion = makeswiftSiteVersionSchema.Enum\nexport type MakeswiftSiteVersion = z.infer<typeof makeswiftSiteVersionSchema>\n\nexport const API_HANDLER_SITE_VERSION_HEADER = 'X-Makeswift-Site-Version'\n"],"mappings":"AAAA,SAAS,SAAS;AAEX,MAAM,6BAA6B,EAAE,KAAK,CAAC,QAAQ,SAAS,CAAC;AAC7D,MAAM,uBAAuB,2BAA2B;AAGxD,MAAM,kCAAkC;","names":[]}

package/dist/esm/components/builtin/Box/register.js

@@ -15,7 +15,7 @@ import {
   Shadows,
   Width
 } from "@makeswift/prop-controllers";
-import { findBreakpointOverride, getBaseBreakpoint } from "../../../state/modules/breakpoints";
+import { findBreakpointOverride, getBaseBreakpoint } from "@makeswift/controls";
 import { MakeswiftComponentType } from "../constants";
 import {
   DEFAULT_BOX_ANIMATE_DELAY,

package/dist/esm/components/builtin/Box/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Box/register.ts"],"sourcesContent":["import {\n  Backgrounds,\n  Border,\n  BorderRadius,\n  Checkbox,\n  ElementID,\n  GapX,\n  GapY,\n  Grid,\n  Margin,\n  Padding,\n  ResponsiveIconRadioGroup,\n  ResponsiveNumber,\n  ResponsiveSelect,\n  Shadows,\n  Width,\n  type PropData,\n} from '@makeswift/prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n  BoxAnimateIn,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_ITEM_ANIMATE_DELAY,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  function isHiddenBasedOnAnimationType(\n    props: Record<string, unknown>,\n    deviceId: string,\n    property: 'boxAnimateType' | 'itemAnimateType',\n  ): boolean {\n    const animateIn = ResponsiveSelect.fromPropData<BoxAnimateIn>(\n      props[property] as PropData<typeof ResponsiveSelect> | undefined,\n    )\n    return (\n      (findBreakpointOverride<BoxAnimateIn>(runtime.getBreakpoints(), animateIn, deviceId)?.value ??\n        'none') === 'none'\n    )\n  }\n  const isHiddenBasedOnBoxAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'boxAnimateType')\n  const isHiddenBasedOnItemAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'itemAnimateType')\n\n  return runtime.registerComponent(\n    lazy(() => import('./Box')),\n    {\n      type: MakeswiftComponentType.Box,\n      label: 'Box',\n      props: {\n        id: ElementID(),\n        backgrounds: Backgrounds(),\n        width: Width({\n          format: Width.Format.ClassName,\n          defaultValue: { value: 100, unit: '%' },\n        }),\n        height: ResponsiveIconRadioGroup({\n          label: 'Height',\n          options: [\n            { value: 'auto', label: 'Auto', icon: 'HeightAuto16' },\n            { value: 'stretch', label: 'Stretch', icon: 'HeightMatch16' },\n          ],\n          defaultValue: 'auto',\n        }),\n        verticalAlign: ResponsiveIconRadioGroup({\n          label: 'Align items',\n          options: [\n            { value: 'flex-start', label: 'Top', icon: 'VerticalAlignStart16' },\n            { value: 'center', label: 'Middle', icon: 'VerticalAlignMiddle16' },\n            { value: 'flex-end', label: 'Bottom', icon: 'VerticalAlignEnd16' },\n            {\n              value: 'space-between',\n              label: 'Space between',\n              icon: 'VerticalAlignSpaceBetween16',\n            },\n          ],\n          defaultValue: 'flex-start',\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        padding: Padding({\n          format: Padding.Format.ClassName,\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: {\n                paddingTop: { value: 10, unit: 'px' },\n                paddingRight: { value: 10, unit: 'px' },\n                paddingBottom: { value: 10, unit: 'px' },\n                paddingLeft: { value: 10, unit: 'px' },\n              },\n            },\n          ],\n        }),\n        border: Border({ format: Border.Format.ClassName }),\n        borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n        boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n        rowGap: GapY(props => ({\n          hidden: props.children == null,\n        })),\n        columnGap: GapX(props => ({\n          hidden: props.children == null,\n        })),\n        boxAnimateType: ResponsiveSelect({\n          label: 'Animate box in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        boxAnimateDuration: ResponsiveNumber((props, device) => ({\n          label: 'Box duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        boxAnimateDelay: ResponsiveNumber((props, device) => ({\n          label: 'Box delay',\n          defaultValue: DEFAULT_BOX_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        itemAnimateType: ResponsiveSelect({\n          label: 'Animate items in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        itemAnimateDuration: ResponsiveNumber((props, device) => ({\n          label: 'Items duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemAnimateDelay: ResponsiveNumber((props, device) => ({\n          label: 'Items delay',\n          defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemStaggerDuration: ResponsiveNumber((props, device) => ({\n          label: 'Stagger',\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          defaultValue: DEFAULT_ITEM_STAGGER_DURATION,\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        hidePlaceholder: Checkbox(props => ({\n          label: 'Hide placeholder',\n          hidden: props.children != null,\n        })),\n        children: Grid(),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/components/builtin/Box/register.ts"],"sourcesContent":["import {\n  Backgrounds,\n  Border,\n  BorderRadius,\n  Checkbox,\n  ElementID,\n  GapX,\n  GapY,\n  Grid,\n  Margin,\n  Padding,\n  ResponsiveIconRadioGroup,\n  ResponsiveNumber,\n  ResponsiveSelect,\n  Shadows,\n  Width,\n  type PropData,\n} from '@makeswift/prop-controllers'\nimport { findBreakpointOverride, getBaseBreakpoint } from '@makeswift/controls'\n\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n  BoxAnimateIn,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_ITEM_ANIMATE_DELAY,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  function isHiddenBasedOnAnimationType(\n    props: Record<string, unknown>,\n    deviceId: string,\n    property: 'boxAnimateType' | 'itemAnimateType',\n  ): boolean {\n    const animateIn = ResponsiveSelect.fromPropData<BoxAnimateIn>(\n      props[property] as PropData<typeof ResponsiveSelect> | undefined,\n    )\n    return (\n      (findBreakpointOverride<BoxAnimateIn>(runtime.getBreakpoints(), animateIn, deviceId)?.value ??\n        'none') === 'none'\n    )\n  }\n  const isHiddenBasedOnBoxAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'boxAnimateType')\n  const isHiddenBasedOnItemAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'itemAnimateType')\n\n  return runtime.registerComponent(\n    lazy(() => import('./Box')),\n    {\n      type: MakeswiftComponentType.Box,\n      label: 'Box',\n      props: {\n        id: ElementID(),\n        backgrounds: Backgrounds(),\n        width: Width({\n          format: Width.Format.ClassName,\n          defaultValue: { value: 100, unit: '%' },\n        }),\n        height: ResponsiveIconRadioGroup({\n          label: 'Height',\n          options: [\n            { value: 'auto', label: 'Auto', icon: 'HeightAuto16' },\n            { value: 'stretch', label: 'Stretch', icon: 'HeightMatch16' },\n          ],\n          defaultValue: 'auto',\n        }),\n        verticalAlign: ResponsiveIconRadioGroup({\n          label: 'Align items',\n          options: [\n            { value: 'flex-start', label: 'Top', icon: 'VerticalAlignStart16' },\n            { value: 'center', label: 'Middle', icon: 'VerticalAlignMiddle16' },\n            { value: 'flex-end', label: 'Bottom', icon: 'VerticalAlignEnd16' },\n            {\n              value: 'space-between',\n              label: 'Space between',\n              icon: 'VerticalAlignSpaceBetween16',\n            },\n          ],\n          defaultValue: 'flex-start',\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        padding: Padding({\n          format: Padding.Format.ClassName,\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: {\n                paddingTop: { value: 10, unit: 'px' },\n                paddingRight: { value: 10, unit: 'px' },\n                paddingBottom: { value: 10, unit: 'px' },\n                paddingLeft: { value: 10, unit: 'px' },\n              },\n            },\n          ],\n        }),\n        border: Border({ format: Border.Format.ClassName }),\n        borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n        boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n        rowGap: GapY(props => ({\n          hidden: props.children == null,\n        })),\n        columnGap: GapX(props => ({\n          hidden: props.children == null,\n        })),\n        boxAnimateType: ResponsiveSelect({\n          label: 'Animate box in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        boxAnimateDuration: ResponsiveNumber((props, device) => ({\n          label: 'Box duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        boxAnimateDelay: ResponsiveNumber((props, device) => ({\n          label: 'Box delay',\n          defaultValue: DEFAULT_BOX_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        itemAnimateType: ResponsiveSelect({\n          label: 'Animate items in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        itemAnimateDuration: ResponsiveNumber((props, device) => ({\n          label: 'Items duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemAnimateDelay: ResponsiveNumber((props, device) => ({\n          label: 'Items delay',\n          defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemStaggerDuration: ResponsiveNumber((props, device) => ({\n          label: 'Stagger',\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          defaultValue: DEFAULT_ITEM_STAGGER_DURATION,\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        hidePlaceholder: Checkbox(props => ({\n          label: 'Hide placeholder',\n          hidden: props.children != null,\n        })),\n        children: Grid(),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/builtin/Button/register.js

@@ -9,7 +9,7 @@ import {
   TextStyle,
   Width
 } from "@makeswift/prop-controllers";
-import { findBreakpointOverride } from "../../../state/modules/breakpoints";
+import { findBreakpointOverride } from "@makeswift/controls";
 import { MakeswiftComponentType } from "../constants";
 import { lazy } from "react";
 function registerComponent(runtime) {

package/dist/esm/components/builtin/Button/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Button/register.ts"],"sourcesContent":["import {\n  ElementID,\n  Link,\n  Margin,\n  ResponsiveColor,\n  ResponsiveIconRadioGroup,\n  ResponsiveSelect,\n  TextInput,\n  TextStyle,\n  Width,\n  type PropData,\n} from '@makeswift/prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ButtonVariant } from './contants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Button')),\n    {\n      type: MakeswiftComponentType.Button,\n      label: 'Button',\n      props: {\n        id: ElementID(),\n        children: TextInput({ placeholder: 'Button text' }),\n        link: Link({\n          defaultValue: {\n            type: 'OPEN_PAGE',\n            payload: {\n              pageId: null,\n              openInNewTab: false,\n            },\n          },\n        }),\n        variant: ResponsiveSelect({\n          label: 'Style',\n          labelOrientation: 'horizontal',\n          options: [\n            { value: 'flat', label: 'Flat' },\n            { value: 'outline', label: 'Outline' },\n            { value: 'shadow', label: 'Floating' },\n            { value: 'clear', label: 'Clear' },\n            { value: 'blocky', label: 'Blocky' },\n            { value: 'bubbly', label: 'Bubbly' },\n            { value: 'skewed', label: 'Skewed' },\n          ],\n          defaultValue: 'flat',\n        }),\n        shape: ResponsiveIconRadioGroup({\n          label: 'Shape',\n          options: [\n            { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n            { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n            { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n          ],\n          defaultValue: 'rounded',\n        }),\n        size: ResponsiveIconRadioGroup({\n          label: 'Size',\n          options: [\n            { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n            { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n            { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n          ],\n          defaultValue: 'medium',\n        }),\n        color: ResponsiveColor((props, device) => {\n          const variant = ResponsiveSelect.fromPropData<ButtonVariant>(\n            props.variant as PropData<typeof ResponsiveSelect> | undefined,\n          )\n          const hidden =\n            findBreakpointOverride<ButtonVariant>(runtime.getBreakpoints(), variant, device)\n              ?.value === 'clear'\n\n          return { placeholder: 'black', hidden }\n        }),\n        textColor: ResponsiveColor({\n          label: 'Text color',\n          placeholder: 'white',\n        }),\n        textStyle: TextStyle(),\n        width: Width(),\n        margin: Margin({ format: Margin.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AAEvC,SAAS,YAAY;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,UAAU,CAAC;AAAA,IAC7B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,UAAU,UAAU,EAAE,aAAa,cAAc,CAAC;AAAA,QAClD,MAAM,KAAK;AAAA,UACT,cAAc;AAAA,YACZ,MAAM;AAAA,YACN,SAAS;AAAA,cACP,QAAQ;AAAA,cACR,cAAc;AAAA,YAChB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,SAAS,iBAAiB;AAAA,UACxB,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YAC/B,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,YACrC,EAAE,OAAO,UAAU,OAAO,WAAW;AAAA,YACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACrC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,OAAO,yBAAyB;AAAA,UAC9B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,QAAQ,MAAM,eAAe;AAAA,YACrD,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,kBAAkB;AAAA,YAC9D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,iBAAiB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,MAAM,yBAAyB;AAAA,UAC7B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,YACtD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,YACzD,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,UACxD;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,OAAO,gBAAgB,CAAC,OAAO,WAAW;AACxC,gBAAM,UAAU,iBAAiB;AAAA,YAC/B,MAAM;AAAA,UACR;AACA,gBAAM,SACJ,uBAAsC,QAAQ,eAAe,GAAG,SAAS,MAAM,GAC3E,UAAU;AAEhB,iBAAO,EAAE,aAAa,SAAS,OAAO;AAAA,QACxC,CAAC;AAAA,QACD,WAAW,gBAAgB;AAAA,UACzB,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,WAAW,UAAU;AAAA,QACrB,OAAO,MAAM;AAAA,QACb,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/components/builtin/Button/register.ts"],"sourcesContent":["import {\n  ElementID,\n  Link,\n  Margin,\n  ResponsiveColor,\n  ResponsiveIconRadioGroup,\n  ResponsiveSelect,\n  TextInput,\n  TextStyle,\n  Width,\n  type PropData,\n} from '@makeswift/prop-controllers'\nimport { findBreakpointOverride } from '@makeswift/controls'\n\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ButtonVariant } from './contants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Button')),\n    {\n      type: MakeswiftComponentType.Button,\n      label: 'Button',\n      props: {\n        id: ElementID(),\n        children: TextInput({ placeholder: 'Button text' }),\n        link: Link({\n          defaultValue: {\n            type: 'OPEN_PAGE',\n            payload: {\n              pageId: null,\n              openInNewTab: false,\n            },\n          },\n        }),\n        variant: ResponsiveSelect({\n          label: 'Style',\n          labelOrientation: 'horizontal',\n          options: [\n            { value: 'flat', label: 'Flat' },\n            { value: 'outline', label: 'Outline' },\n            { value: 'shadow', label: 'Floating' },\n            { value: 'clear', label: 'Clear' },\n            { value: 'blocky', label: 'Blocky' },\n            { value: 'bubbly', label: 'Bubbly' },\n            { value: 'skewed', label: 'Skewed' },\n          ],\n          defaultValue: 'flat',\n        }),\n        shape: ResponsiveIconRadioGroup({\n          label: 'Shape',\n          options: [\n            { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n            { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n            { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n          ],\n          defaultValue: 'rounded',\n        }),\n        size: ResponsiveIconRadioGroup({\n          label: 'Size',\n          options: [\n            { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n            { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n            { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n          ],\n          defaultValue: 'medium',\n        }),\n        color: ResponsiveColor((props, device) => {\n          const variant = ResponsiveSelect.fromPropData<ButtonVariant>(\n            props.variant as PropData<typeof ResponsiveSelect> | undefined,\n          )\n          const hidden =\n            findBreakpointOverride<ButtonVariant>(runtime.getBreakpoints(), variant, device)\n              ?.value === 'clear'\n\n          return { placeholder: 'black', hidden }\n        }),\n        textColor: ResponsiveColor({\n          label: 'Text color',\n          placeholder: 'white',\n        }),\n        textStyle: TextStyle(),\n        width: Width(),\n        margin: Margin({ format: Margin.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,8BAA8B;AAGvC,SAAS,8BAA8B;AAEvC,SAAS,YAAY;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,UAAU,CAAC;AAAA,IAC7B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,UAAU,UAAU,EAAE,aAAa,cAAc,CAAC;AAAA,QAClD,MAAM,KAAK;AAAA,UACT,cAAc;AAAA,YACZ,MAAM;AAAA,YACN,SAAS;AAAA,cACP,QAAQ;AAAA,cACR,cAAc;AAAA,YAChB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,SAAS,iBAAiB;AAAA,UACxB,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YAC/B,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,YACrC,EAAE,OAAO,UAAU,OAAO,WAAW;AAAA,YACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACrC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,OAAO,yBAAyB;AAAA,UAC9B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,QAAQ,MAAM,eAAe;AAAA,YACrD,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,kBAAkB;AAAA,YAC9D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,iBAAiB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,MAAM,yBAAyB;AAAA,UAC7B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,YACtD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,YACzD,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,UACxD;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,OAAO,gBAAgB,CAAC,OAAO,WAAW;AACxC,gBAAM,UAAU,iBAAiB;AAAA,YAC/B,MAAM;AAAA,UACR;AACA,gBAAM,SACJ,uBAAsC,QAAQ,eAAe,GAAG,SAAS,MAAM,GAC3E,UAAU;AAEhB,iBAAO,EAAE,aAAa,SAAS,OAAO;AAAA,QACxC,CAAC;AAAA,QACD,WAAW,gBAAgB;AAAA,UACzB,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,WAAW,UAAU;AAAA,QACrB,OAAO,MAAM;AAAA,QACb,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

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

@@ -10,13 +10,13 @@ import {
 import { motion, useAnimation } from "framer-motion";
 import { useGesture } from "@use-gesture/react";
 import { wrap } from "@popmotion/popcorn";
+import { getBaseBreakpoint } from "@makeswift/controls";
 import { colorToString } from "../../utils/colorToString";
 import { useMediaQuery } from "../../hooks";
 import Image from "../Image";
 import { useStyle } from "../../../runtimes/react/use-style";
 import { cx } from "@emotion/css";
 import { useResponsiveStyle } from "../../utils/responsive-style";
-import { getBaseBreakpoint } from "../../../state/modules/breakpoints";
 import { useBreakpoints } from "../../../runtimes/react/hooks/use-breakpoints";
 const LeftChevron = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "14", viewBox: "0 0 10 14", children: /* @__PURE__ */ jsx(
   "path",
@@ -40,6 +40,7 @@ const RightChevron = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.or
 ) });
 const SWIPE_THRESHOLD = 20;
 const swipePower = (dx, velocity) => dx * (1 + velocity);
+const classSelector = (classname) => `.${classname.split(" ").join(".")}`;
 const Carousel = forwardRef(function Carousel2({
   images = [],
   width,
@@ -135,7 +136,7 @@ const Carousel = forwardRef(function Carousel2({
     useStyle(
       useResponsiveStyle([gap], ([gap2 = { value: 0, unit: "px" }]) => ({
         margin: `0 ${`${-gap2.value / 2}${gap2.unit}`}`,
-        [`& > .${slideClassName}`]: {
+        [`& > ${classSelector(slideClassName)}`]: {
           padding: `0 ${`${gap2.value / 2}${gap2.unit}`}`
         }
       }))
@@ -203,7 +204,7 @@ const Carousel = forwardRef(function Carousel2({
     ),
     useStyle({
       left: 0,
-      [`&:hover > .${arrowClassName}`]: {
+      [`&:hover > ${classSelector(arrowClassName)}`]: {
         "& > svg": {
           transform: "translateX(-2px)"
         }
@@ -226,7 +227,7 @@ const Carousel = forwardRef(function Carousel2({
     ),
     useStyle({
       right: 0,
-      [`&:hover > .${arrowClassName}`]: {
+      [`&:hover > ${classSelector(arrowClassName)}`]: {
         "& > svg": {
           transform: "translateX(2px)"
         }