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

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, removeIn, setIn } from 'immutable'\n\nimport { type Element, type ElementData, isElementReference } from '@makeswift/controls'\n\nimport * as Introspection from '../../prop-controllers/introspection'\n\nimport { type Action, type UnknownAction, isKnownAction } from '../actions'\n\nimport { ReadOnlyActionTypes } from '../actions/internal/read-only-actions'\nimport { ReadWriteActionTypes } from '../actions/internal/read-write-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 | UnknownAction): State {\n  if (!isKnownAction(action)) return state\n\n  switch (action.type) {\n    case ReadOnlyActionTypes.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 ReadOnlyActionTypes.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 ReadWriteActionTypes.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: { before: Element; after: Element },\n  path: OperationPath,\n): ElementTree {\n  const [deleteElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [deletedElement, propName] = getElementAndPropName(rootElements.before, 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\n  // Use the \"after\" state to efficiently update all of parent subtrees in the state\n  updateParentElements(elements, parentElementPaths, rootElements.after)\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: { before: Element; after: Element },\n  path: OperationPath,\n): ElementTree {\n  const [insertedElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [insertedElement, propName] = getElementAndPropName(rootElements.after, 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\n  // Use the \"after\" state to efficiently update all of parent subtrees in the state\n  updateParentElements(elements, parentElementPaths, rootElements.after)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction applyUpdate(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { before: Element; after: Element },\n  path: OperationPath,\n): ElementTree {\n  const [updateElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [deletedElement, propName] = getElementAndPropName(rootElements.before, updateElementPath)\n  const [insertedElement, _] = getElementAndPropName(rootElements.after, 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  // Use the \"after\" state to efficiently update all of parent subtrees in the state\n  updateParentElements(elements, parentElementPaths, rootElements.after)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction applyOpComponent(root: Element, component: Operation[number]): Element {\n  let applied: Element = root\n\n  if ('ld' in component || 'od' in component) {\n    applied = removeIn(applied, component.p)\n  }\n\n  if ('li' in component) {\n    applied = setIn(applied, component.p, component.li)\n  }\n\n  if ('oi' in component) {\n    applied = setIn(applied, component.p, component.oi)\n  }\n\n  return applied\n}\n\nfunction selectTreeTransform(op: Operation[number]): typeof applyUpdate {\n  const hasDelete = 'ld' in op || 'od' in op\n  const hasInsert = 'li' in op || 'oi' in op\n\n  if (hasDelete && hasInsert) return applyUpdate\n  if (hasDelete) return applyDelete\n  if (hasInsert) return applyInsert\n\n  return elementTree => elementTree\n}\n\nfunction applyChanges(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  operation: Operation,\n): ElementTree {\n  // Updates the element tree \"cache\" based on the provided operation, which can\n  // be composed of 1-n component ops. We apply each component op sequentially\n  // to the 'old' root element to determine the changed elements and update the\n  // cache accordingly at each intermediate step.\n  const result = operation.reduce(\n    (acc, op) => {\n      const rootBefore = acc.rootBefore\n\n      // If there's only one component op, we can skip the application of the op\n      // and assume that the result will be the 'new' root element provided to\n      // us by the builder.\n      const rootAfter = operation.length > 1 ? applyOpComponent(rootBefore, op) : rootElements.new\n\n      const roots = { before: rootBefore, after: rootAfter }\n      const applyChange = selectTreeTransform(op)\n\n      return {\n        elementTree: applyChange(acc.elementTree, descriptors, roots, op.p),\n        rootBefore: rootAfter,\n      }\n    },\n    { elementTree, rootBefore: rootElements.old },\n  )\n\n  return result.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, removeIn, setIn } from 'immutable'\n\nimport { type Element, type ElementData, isElementReference } from '@makeswift/controls'\n\nimport * as Introspection from '../../prop-controllers/introspection'\n\nimport { type Action, type UnknownAction, isKnownAction } from '../actions'\n\nimport { ReadOnlyActionTypes } from '../actions/internal/read-only-actions'\nimport { ReadWriteActionTypes } from '../actions/internal/read-write-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 | UnknownAction): State {\n  if (!isKnownAction(action)) return state\n\n  switch (action.type) {\n    case ReadOnlyActionTypes.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 ReadOnlyActionTypes.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 ReadWriteActionTypes.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 getPropChildren(\n  element: Element,\n  propName: string,\n  descriptors: DescriptorsByComponentType,\n): Element[] | null {\n  if (isElementReference(element)) return null\n\n  const propDescriptor = descriptors.get(element.type)?.[propName]\n  if (propDescriptor == null) return null\n\n  return Introspection.getElementChildren(propDescriptor, element.props[propName])\n}\n\nfunction isChildrenProp(\n  element: Element,\n  propName: string,\n  descriptors: DescriptorsByComponentType,\n): boolean {\n  const children = getPropChildren(element, propName, descriptors)\n  return children != null\n}\n\nfunction deleteElement(\n  { elements, elementIds }: ElementTree,\n  elementToDelete: Element,\n  descriptors: DescriptorsByComponentType,\n) {\n  for (const element of traverseElementTree(elementToDelete, descriptors)) {\n    elements.delete(element.key)\n    elementIds.delete(element.key)\n  }\n}\n\nfunction deleteChildrenInProp(\n  elementTree: ElementTree,\n  parentElement: Element,\n  propName: string,\n  descriptors: DescriptorsByComponentType,\n) {\n  const childrenInProp = getPropChildren(parentElement, propName, descriptors)\n\n  if (childrenInProp == null) {\n    return\n  }\n\n  for (const child of childrenInProp) {\n    deleteElement(elementTree, child, descriptors)\n  }\n}\n\nfunction deleteElementOrProp(\n  { elements, elementIds }: ElementTree,\n  targetElement: Element,\n  propName: string | null,\n  descriptors: DescriptorsByComponentType,\n) {\n  if (propName == null) {\n    deleteElement({ elements, elementIds }, targetElement, descriptors)\n    return\n  }\n\n  if (isChildrenProp(targetElement, propName, descriptors)) {\n    deleteChildrenInProp({ elements, elementIds }, targetElement, propName, descriptors)\n  }\n\n  // The provided targetElement might refer to an element from the before/after documents,\n  // not the actual element object from the ElementTree\n  const elementInTree = elements.get(targetElement.key)\n\n  if (!elementInTree) {\n    console.error(\n      `Attempting to remove prop ${propName} from element ${targetElement.key} not found in tree`,\n    )\n    return\n  }\n\n  if (!isElementReference(elementInTree)) {\n    const newProps = { ...elementInTree.props }\n    delete newProps[propName]\n    elements.set(targetElement.key, { ...elementInTree, props: newProps })\n  }\n}\n\nfunction applyDelete(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { before: Element; after: Element },\n  path: OperationPath,\n): ElementTree {\n  const [targetElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [targetElement, propName] = getElementAndPropName(rootElements.before, targetElementPath)\n\n  const elements = new Map(elementTree.elements)\n  const elementIds = new Map(elementTree.elementIds)\n\n  deleteElementOrProp({ elements, elementIds }, targetElement, propName, descriptors)\n\n  // Use the \"after\" state to efficiently update all of parent subtrees in the state\n  updateParentElements(elements, parentElementPaths, rootElements.after)\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 || isChildrenProp(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: { before: Element; after: Element },\n  path: OperationPath,\n): ElementTree {\n  const [insertedElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [insertedElement, propName] = getElementAndPropName(rootElements.after, 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\n  // Use the \"after\" state to efficiently update all of parent subtrees in the state\n  updateParentElements(elements, parentElementPaths, rootElements.after)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction applyUpdate(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { before: Element; after: Element },\n  path: OperationPath,\n): ElementTree {\n  const [updateElementPath, ...parentElementPaths] = getChangedElementsPaths(path)\n  const [targetElement, propName] = getElementAndPropName(rootElements.before, updateElementPath)\n  const [insertedElement, _] = getElementAndPropName(rootElements.after, updateElementPath)\n\n  const elements = new Map(elementTree.elements)\n  const elementIds = new Map(elementTree.elementIds)\n\n  deleteElementOrProp({ elements, elementIds }, targetElement, propName, descriptors)\n\n  insertElement({ elements, elementIds }, insertedElement, propName, descriptors)\n\n  // Use the \"after\" state to efficiently update all of parent subtrees in the state\n  updateParentElements(elements, parentElementPaths, rootElements.after)\n\n  return {\n    elements,\n    elementIds,\n  }\n}\n\nfunction applyOpComponent(root: Element, component: Operation[number]): Element {\n  let applied: Element = root\n\n  if ('ld' in component || 'od' in component) {\n    applied = removeIn(applied, component.p)\n  }\n\n  if ('li' in component) {\n    applied = setIn(applied, component.p, component.li)\n  }\n\n  if ('oi' in component) {\n    applied = setIn(applied, component.p, component.oi)\n  }\n\n  return applied\n}\n\nfunction selectTreeTransform(op: Operation[number]): typeof applyUpdate {\n  const hasDelete = 'ld' in op || 'od' in op\n  const hasInsert = 'li' in op || 'oi' in op\n\n  if (hasDelete && hasInsert) return applyUpdate\n  if (hasDelete) return applyDelete\n  if (hasInsert) return applyInsert\n\n  return elementTree => elementTree\n}\n\nfunction applyChanges(\n  elementTree: ElementTree,\n  descriptors: DescriptorsByComponentType,\n  rootElements: { old: Element; new: Element },\n  operation: Operation,\n): ElementTree {\n  // Updates the element tree \"cache\" based on the provided operation, which can\n  // be composed of 1-n component ops. We apply each component op sequentially\n  // to the 'old' root element to determine the changed elements and update the\n  // cache accordingly at each intermediate step.\n  const result = operation.reduce(\n    (acc, op) => {\n      const rootBefore = acc.rootBefore\n\n      // If there's only one component op, we can skip the application of the op\n      // and assume that the result will be the 'new' root element provided to\n      // us by the builder.\n      const rootAfter = operation.length > 1 ? applyOpComponent(rootBefore, op) : rootElements.new\n\n      const roots = { before: rootBefore, after: rootAfter }\n      const applyChange = selectTreeTransform(op)\n\n      return {\n        elementTree: applyChange(acc.elementTree, descriptors, roots, op.p),\n        rootBefore: rootAfter,\n      }\n    },\n    { elementTree, rootBefore: rootElements.old },\n  )\n\n  return result.elementTree\n}\n"],"mappings":"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","names":["i"]}

package/dist/cjs/state/translations/get.js

@@ -36,10 +36,7 @@ var ElementTrees = __toESM(require("../modules/element-trees"));
 var import_control = require("../../controls/control");
 function getTranslatableContent(descriptors, elementTree) {
   const translatableData = {};
-  for (const element of ElementTrees.traverseElementTree(
-    elementTree,
-    descriptors
-  )) {
+  for (const element of ElementTrees.traverseElementTree(elementTree, descriptors)) {
     if (Documents.isElementReference(element))
       continue;
     const elementDescriptors = descriptors.get(element.type);

package/dist/cjs/state/translations/get.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/state/translations/get.ts"],"sourcesContent":["import * as Documents from '../modules/read-only-documents'\nimport * as ElementTrees from '../modules/element-trees'\nimport { getTranslatableData } from '../../controls/control'\nimport type {DescriptorsByComponentType} from '../modules/prop-controllers'\n\nexport function getTranslatableContent(\n  descriptors: DescriptorsByComponentType,\n  elementTree: Documents.ElementData,\n): Record<string, Documents.Data> {\n  const translatableData: Record<string, Documents.Data> = {}\n\n  for (const element of ElementTrees.traverseElementTree(\n    elementTree,\n    descriptors,\n  )) {\n    if (Documents.isElementReference(element)) continue\n\n    const elementDescriptors = descriptors.get(element.type)\n    if (elementDescriptors == null) continue\n\n    Object.entries(elementDescriptors).forEach(([propName, descriptor]) => {\n      const translatablePropData = getTranslatableData(descriptor, element.props[propName])\n\n      if (translatablePropData != null) {\n        translatableData[`${element.key}:${propName}`] = translatablePropData\n      }\n    })\n  }\n\n  return translatableData\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,mBAA8B;AAC9B,qBAAoC;AAG7B,SAAS,uBACd,aACA,aACgC;AAChC,QAAM,mBAAmD,CAAC;AAE1D,aAAW,WAAW,aAAa;AAAA,IACjC;AAAA,IACA;AAAA,EACF,GAAG;AACD,QAAI,UAAU,mBAAmB,OAAO;AAAG;AAE3C,UAAM,qBAAqB,YAAY,IAAI,QAAQ,IAAI;AACvD,QAAI,sBAAsB;AAAM;AAEhC,WAAO,QAAQ,kBAAkB,EAAE,QAAQ,CAAC,CAAC,UAAU,UAAU,MAAM;AACrE,YAAM,2BAAuB,oCAAoB,YAAY,QAAQ,MAAM,QAAQ,CAAC;AAEpF,UAAI,wBAAwB,MAAM;AAChC,yBAAiB,GAAG,QAAQ,GAAG,IAAI,QAAQ,EAAE,IAAI;AAAA,MACnD;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/state/translations/get.ts"],"sourcesContent":["import * as Documents from '../modules/read-only-documents'\nimport * as ElementTrees from '../modules/element-trees'\nimport { getTranslatableData } from '../../controls/control'\nimport type { DescriptorsByComponentType } from '../modules/prop-controllers'\n\nexport function getTranslatableContent(\n  descriptors: DescriptorsByComponentType,\n  elementTree: Documents.ElementData,\n): Record<string, Documents.Data> {\n  const translatableData: Record<string, Documents.Data> = {}\n\n  for (const element of ElementTrees.traverseElementTree(elementTree, descriptors)) {\n    if (Documents.isElementReference(element)) continue\n\n    const elementDescriptors = descriptors.get(element.type)\n    if (elementDescriptors == null) continue\n\n    Object.entries(elementDescriptors).forEach(([propName, descriptor]) => {\n      const translatablePropData = getTranslatableData(descriptor, element.props[propName])\n\n      if (translatablePropData != null) {\n        translatableData[`${element.key}:${propName}`] = translatablePropData\n      }\n    })\n  }\n\n  return translatableData\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,mBAA8B;AAC9B,qBAAoC;AAG7B,SAAS,uBACd,aACA,aACgC;AAChC,QAAM,mBAAmD,CAAC;AAE1D,aAAW,WAAW,aAAa,oBAAoB,aAAa,WAAW,GAAG;AAChF,QAAI,UAAU,mBAAmB,OAAO;AAAG;AAE3C,UAAM,qBAAqB,YAAY,IAAI,QAAQ,IAAI;AACvD,QAAI,sBAAsB;AAAM;AAEhC,WAAO,QAAQ,kBAAkB,EAAE,QAAQ,CAAC,CAAC,UAAU,UAAU,MAAM;AACrE,YAAM,2BAAuB,oCAAoB,YAAY,QAAQ,MAAM,QAAQ,CAAC;AAEpF,UAAI,wBAAwB,MAAM;AAChC,yBAAiB,GAAG,QAAQ,GAAG,IAAI,QAAQ,EAAE,IAAI;AAAA,MACnD;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;","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-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":[]}

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.4"
     });
   }
   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.4"
     });
     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.4",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

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.4",
         "content-type": "application/json"
       },
       body: JSON.stringify({ token }),

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":"AAuCI,cAqKM,YArKN;AA+KM;AAtNV;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAEnC,SAAS,YAAY;AACrB,OAAO,YAAY;AACnB,SAAS,iCAAiC;AAC1C,SAAS,IAAI,iBAAiB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB,8BAA8B;AAG3D,MAAM,uBAAuB;AAI7B,MAAM,4BAA4B;AASlC,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,YAAY,GAAsB;AAChF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM,aAAa,SAAS,IAAI;AAAA,UAChC,OAAO,aAAa,UAAU,IAAI;AAAA,UAClC,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,WAAW;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,SAAS;AAAA,QACX,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaf,MAAM,oBAAoB,WAAW,SAASA,mBAC5C,EAAE,WAAW,GAAG,YAAY,GAC5B,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,UACP,UAAU;AAAA,UACV,CAAC,YAAY,yBAAyB,EAAE,GAAG;AAAA,YACzC,SAAS;AAAA,YACT,WAAW,GAAG,MAAM;AAAA,UACtB;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAWD,SAAS,aAAa,EAAE,WAAW,OAAO,WAAW,GAAG,YAAY,GAAsB;AACxF,QAAM,YAAY,mBAAmB,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO;AAAA,UACP,iBAAiB;AAAA,UACjB,YAAY;AAAA,QACd,CAAC;AAAA,QACD,SAAS,uBAAuB,SAAS,CAAC;AAAA,QAC1C;AAAA,UACE,mBAAmB,CAAC,WAAW,SAAS,GAAY,CAAC,CAACC,QAAOC,aAAY,CAAC,CAAC,MAAM;AAC/E,kBAAM,WAAWA,WAAU,YAAY,EAAE,OAAO,IAAI,MAAM,KAAK;AAC/D,kBAAM,aAAaA,WAAU,cAAc,OAAO,WAAWA,WAAU;AACvE,kBAAM,YAAYA,WAAU,aAAa,CAAC;AAC1C,kBAAM,gBAAgBA,WAAU,iBAAiB,OAAO,OAAOA,WAAU;AACzE,kBAAM,gBAAgBA,WAAU,iBAAiB,CAAC;AAElD,mBAAO;AAAA,cACL,OAAOD,UAAS,OAAO,UAAU,cAAcA,MAAK;AAAA,cACpD,UAAU,GAAG,SAAS,KAAK,GAAG,SAAS,IAAI;AAAA,cAC3C;AAAA,cACA,WAAW,UAAU,SAAS,QAAQ,IAAI,WAAW;AAAA,cACrD,eAAe,iBAAiB,OAAO,WAAW,GAAG,aAAa;AAAA,cAClE,eAAe,cAAc,SAAS,WAAW,IAAI,cAAc;AAAA,YACrE;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,SAAS;AAAA,UACP,WAAW;AAAA,YACT,iBAAiB;AAAA,UACnB;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAgBe,SAAR,eAAgC;AAAA,EACrC;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,MAAM;AAEzD,4BAA0B,MAAM;AAC9B,QACE,UAAU,WACV,UAAU,QAAQ,cAAc,YAAa,aAC3C,UAAU,QAAQ,aAAa,sBACjC;AACA,kBAAY,OAAO;AAAA,IACrB,OAAO;AACL,kBAAY,MAAM;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,qBAAC,qBAAkB,KAAK,WACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,mBAAmB,SAAS;AAAA,QACvC,OAAO,mBAAmB,KAAK;AAAA,QAE/B,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,8BAAC,UAAK,OAAO,EAAE,aAAa,EAAE,GAAI,iBAAM;AAAA,UACxC,qBAAC,UAAK,OAAO,EAAE,SAAS,eAAe,MAAM,eAAe,GACzD;AAAA,sBAAU,WAAW,oBAAC,cAAW;AAAA,YACjC,UAAU,UAAU,oBAAC,SAAM;AAAA,YAC3B,UAAU,gBAAgB,oBAAC,cAAW;AAAA,YACtC,UAAU,kBAAkB,oBAAC,gBAAa;AAAA,aAC7C;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,gBAAa,UACX,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MACxB,8BAAC,gBAAc,GAAG,SAAS,KAAK,MAC7B,QAAQ,KACX,CACD,GACH;AAAA,KACF;AAEJ;","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":"AAaI,SAmFoC,UAnFpC,KAsFA,YAtFA;AAbJ,SAAS,UAAU;AACnB,SAAS,UAAU,QAAgD,kBAA6B;AAEhG,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAEzB,SAAS,iCAAiC;AAE1C,MAAM,YAAY,WAAW,SAASA,WACpC,EAAE,WAAW,GAAG,YAAY,GAC5B,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,eAAe;AAAA,UACf,UAAU;AAAA,QACZ,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,SAAS,UAAU,IAAI;AAAA,QACvB,YAAY;AAAA,MACd,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,WAAW,CAAC,SAAsB,aAAqB,SAAiB;AAC5E,QAAM,EAAE,aAAa,OAAO,cAAc,OAAO,IAAI;AACrD,QAAM,sBAAsB,QAAQ;AAEpC,SAAO,KAAK,IAAI,cAAc,qBAAqB,sBAAsB,WAAW,IAAI;AAC1F;AAUe,SAAR,gBAAiC;AAAA,EACtC,MAAM;AAAA,EACN,cAAc,KAAK;AAAA,EACnB,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,YAAY,OAAuB,IAAI;AAE7C,4BAA0B,MAAM;AAC9B,UAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,QAAI,CAAC;AAAa,aAAO;AAEzB,UAAM,EAAE,YAAY,IAAI,YAAY;AACpC,UAAM,eAAe,MAAM,SAAS,SAAS,aAAa,aAAa,IAAI,CAAC;AAE5E,iBAAa;AAEb,gBAAa,iBAAiB,UAAU,YAAY;AAEpD,WAAO,MAAM,YAAa,oBAAoB,UAAU,YAAY;AAAA,EACtE,GAAG,CAAC,aAAa,IAAI,CAAC;AAEtB,MAAI,CAAC,YAAY,QAAQ,GAAG;AAAG,WAAO,gCAAE;AAExC,SACE,qBAAC,aAAU,KAAK,WACb;AAAA,cAAU,WACT;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,UACN,OAAO,EAAE,eAAe,EAAE,YAAY,KAAK,EAAE;AAAA,UAC7C,SAAS;AAAA,YACP,YAAY;AAAA,cACV,QAAQ,UAAU,QAAQ,cAAc,aAAa,SAAS;AAAA,YAChE;AAAA,UACF;AAAA,UACA,QAAQ;AAAA,YACN,SAAS;AAAA,cACP,kBAAkB;AAAA,cAClB,qBAAqB;AAAA,cACrB,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,kBAAkB;AAAA,cAClB,OAAO;AAAA,YACT;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QACP,MAAI;AAAA,QACJ,OAAK;AAAA,QACL,aAAa;AAAA,QACb,UAAU;AAAA,QACV,SAAS,MAAM,SAAS,IAAI;AAAA,QAC5B,OAAO;AAAA,UACL,WAAW,WAAW,KAAK,KAAK,KAAK;AAAA,UACrC;AAAA,QACF;AAAA,QACA,OAAM;AAAA,QACN,QAAO;AAAA;AAAA,IACT;AAAA,IAEF,oBAAC,QAAK,iBAAiB,WAAW,SAAS,CAAC,OAAO;AAAA,KACrD;AAEJ;","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/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/runtimes/react/components/resolve-props.js

@@ -1,12 +1,19 @@
 import { useControlDefs } from "../hooks/use-control-defs";
 import { useResolvedProps } from "../hooks/use-resolved-props";
+import { useStylesheetFactory } from "../hooks/use-stylesheet-factory";
 import { resolveLegacyDescriptorProp } from "../legacy-controls";
 function ResolveProps({
   element,
   children: renderComponent
 }) {
   const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type });
-  const resolvedProps = useResolvedProps(definitions, element.props, element.key);
+  const stylesheetFactory = useStylesheetFactory();
+  const resolvedProps = useResolvedProps({
+    propDefs: definitions,
+    propData: element.props,
+    elementKey: element.key,
+    stylesheetFactory
+  });
   const renderFn = Object.entries(legacyDescriptors).reduceRight(
     (renderFn2, [propName, descriptor]) => (props) => resolveLegacyDescriptorProp(descriptor, propName, element.props[propName], props, renderFn2),
     renderComponent

package/dist/esm/runtimes/react/components/resolve-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/resolve-props.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useControlDefs } from '../hooks/use-control-defs'\nimport { useResolvedProps } from '../hooks/use-resolved-props'\n\nimport { resolveLegacyDescriptorProp } from '../legacy-controls'\n\nexport function ResolveProps({\n  element,\n  children: renderComponent,\n}: {\n  element: ElementData\n  children: (props: Record<string, unknown>) => ReactNode\n}): ReactNode {\n  const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type })\n\n  const resolvedProps = useResolvedProps(definitions, element.props, element.key)\n\n  const renderFn = Object.entries(legacyDescriptors).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      props =>\n        resolveLegacyDescriptorProp(descriptor, propName, element.props[propName], props, renderFn),\n    renderComponent,\n  )\n\n  return renderFn(resolvedProps)\n}\n"],"mappings":"AAIA,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAEjC,SAAS,mCAAmC;AAErC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,gBAAgB,iBAAiB,aAAa,QAAQ,OAAO,QAAQ,GAAG;AAE9E,QAAM,WAAW,OAAO,QAAQ,iBAAiB,EAAE;AAAA,IACjD,CAACA,WAAU,CAAC,UAAU,UAAU,MAC9B,WACE,4BAA4B,YAAY,UAAU,QAAQ,MAAM,QAAQ,GAAG,OAAOA,SAAQ;AAAA,IAC9F;AAAA,EACF;AAEA,SAAO,SAAS,aAAa;AAC/B;","names":["renderFn"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/resolve-props.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useControlDefs } from '../hooks/use-control-defs'\nimport { useResolvedProps } from '../hooks/use-resolved-props'\nimport { useStylesheetFactory } from '../hooks/use-stylesheet-factory'\n\nimport { resolveLegacyDescriptorProp } from '../legacy-controls'\n\nexport function ResolveProps({\n  element,\n  children: renderComponent,\n}: {\n  element: ElementData\n  children: (props: Record<string, unknown>) => ReactNode\n}): ReactNode {\n  const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type })\n\n  const stylesheetFactory = useStylesheetFactory()\n  const resolvedProps = useResolvedProps({\n    propDefs: definitions,\n    propData: element.props,\n    elementKey: element.key,\n    stylesheetFactory,\n  })\n\n  const renderFn = Object.entries(legacyDescriptors).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      props =>\n        resolveLegacyDescriptorProp(descriptor, propName, element.props[propName], props, renderFn),\n    renderComponent,\n  )\n\n  return renderFn(resolvedProps)\n}\n"],"mappings":"AAIA,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAErC,SAAS,mCAAmC;AAErC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,gBAAgB,iBAAiB;AAAA,IACrC,UAAU;AAAA,IACV,UAAU,QAAQ;AAAA,IAClB,YAAY,QAAQ;AAAA,IACpB;AAAA,EACF,CAAC;AAED,QAAM,WAAW,OAAO,QAAQ,iBAAiB,EAAE;AAAA,IACjD,CAACA,WAAU,CAAC,UAAU,UAAU,MAC9B,WACE,4BAA4B,YAAY,UAAU,QAAQ,MAAM,QAAQ,GAAG,OAAOA,SAAQ;AAAA,IAC9F;AAAA,EACF;AAEA,SAAO,SAAS,aAAa;AAC/B;","names":["renderFn"]}

package/dist/esm/runtimes/react/controls/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n  Style,\n  type StyleProperty,\n  type ResolvedBorderSideData,\n  type FontSizePropertyData,\n  type WidthPropertyData,\n  type ResolvedStyleData,\n} from '@makeswift/controls'\n\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\n\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { Breakpoints } from '../../../state/modules/breakpoints'\n\nconst defaultMargin = {\n  marginTop: 0,\n  marginRight: 'auto',\n  marginBottom: 0,\n  marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n}\n\nexport function styleV1Css(\n  breakpoints: Breakpoints,\n  style: ResolvedStyleData | undefined,\n  properties: StyleProperty[],\n): CSSObject {\n  return {\n    ...(properties.includes(Style.Width) && {\n      maxWidth: '100%',\n    }),\n    ...responsiveStyle(\n      breakpoints,\n      [\n        style?.width,\n        style?.margin,\n        style?.padding,\n        style?.border,\n        style?.borderRadius,\n        style?.textStyle,\n      ] as const,\n      ([width, margin, padding, border, borderRadius, textStyle]) => ({\n        ...(properties.includes(Style.Width) && {\n          width: widthToString(width) ?? '100%',\n        }),\n        ...(properties.includes(Style.Margin) &&\n          marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n        ...(properties.includes(Style.Padding) &&\n          paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n        ...(properties.includes(Style.Border) && {\n          borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n          borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n          borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n          borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n        }),\n        ...(properties.includes(Style.BorderRadius) && {\n          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n        }),\n        ...(properties.includes(Style.TextStyle) && {\n          ...(textStyle?.fontFamily && { \n            fontFamily: textStyle.fontFamily.toLowerCase().startsWith('var(') \n              ? textStyle.fontFamily \n              : `\"${textStyle.fontFamily}\"` \n          }),\n          ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n          ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n          ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n          textTransform: textStyle?.textTransform ?? [],\n          fontStyle: textStyle?.fontStyle ?? [],\n        }),\n      }),\n    ),\n  }\n\n  function widthToString(widthProperty: WidthPropertyData | undefined): string | null {\n    if (widthProperty == null) return null\n\n    return lengthPercentageDataToString(widthProperty)\n  }\n\n  function borderSideToString(\n    borderSide: ResolvedBorderSideData | null | undefined,\n  ): string | null {\n    if (borderSide == null) return null\n\n    const { width, color, style } = borderSide\n    return `${width != null ? width : 0}px ${style} ${\n      color != null ? colorToString(color) : 'black'\n    }`\n  }\n\n  function borderRadiusToString(\n    borderRadius: BorderRadiusLonghandPropertyData | null | undefined,\n  ): string | null {\n    if (borderRadius == null) return null\n\n    return lengthPercentageDataToString(borderRadius)\n  }\n\n  function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n    return `${fontSize.value}${fontSize.unit}`\n  }\n}\n"],"mappings":"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","names":["style"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n  Style,\n  type StyleProperty,\n  type ResolvedBorderSideData,\n  type FontSizePropertyData,\n  type WidthPropertyData,\n  type ResolvedStyleData,\n} from '@makeswift/controls'\n\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\n\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { Breakpoints } from '../../../state/modules/breakpoints'\n\nconst defaultMargin = {\n  marginTop: 0,\n  marginRight: 'auto',\n  marginBottom: 0,\n  marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n}\n\nexport function styleV1Css(\n  breakpoints: Breakpoints,\n  style: ResolvedStyleData | undefined,\n  properties: StyleProperty[],\n): CSSObject {\n  return {\n    ...(properties.includes(Style.Width) && {\n      maxWidth: '100%',\n    }),\n    ...responsiveStyle(\n      breakpoints,\n      [\n        style?.width,\n        style?.margin,\n        style?.padding,\n        style?.border,\n        style?.borderRadius,\n        style?.textStyle,\n      ] as const,\n      ([width, margin, padding, border, borderRadius, textStyle]) => ({\n        ...(properties.includes(Style.Width) && {\n          width: widthToString(width) ?? '100%',\n        }),\n        ...(properties.includes(Style.Margin) &&\n          marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n        ...(properties.includes(Style.Padding) &&\n          paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n        ...(properties.includes(Style.Border) && {\n          borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n          borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n          borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n          borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n        }),\n        ...(properties.includes(Style.BorderRadius) && {\n          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n        }),\n        ...(properties.includes(Style.TextStyle) && {\n          ...(textStyle?.fontFamily && {\n            fontFamily: textStyle.fontFamily.toLowerCase().startsWith('var(')\n              ? textStyle.fontFamily\n              : `\"${textStyle.fontFamily}\"`,\n          }),\n          ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n          ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n          ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n          textTransform: textStyle?.textTransform ?? [],\n          fontStyle: textStyle?.fontStyle ?? [],\n        }),\n      }),\n    ),\n  }\n\n  function widthToString(widthProperty: WidthPropertyData | undefined): string | null {\n    if (widthProperty == null) return null\n\n    return lengthPercentageDataToString(widthProperty)\n  }\n\n  function borderSideToString(\n    borderSide: ResolvedBorderSideData | null | undefined,\n  ): string | null {\n    if (borderSide == null) return null\n\n    const { width, color, style } = borderSide\n    return `${width != null ? width : 0}px ${style} ${\n      color != null ? colorToString(color) : 'black'\n    }`\n  }\n\n  function borderRadiusToString(\n    borderRadius: BorderRadiusLonghandPropertyData | null | undefined,\n  ): string | null {\n    if (borderRadius == null) return null\n\n    return lengthPercentageDataToString(borderRadius)\n  }\n\n  function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n    return `${fontSize.value}${fontSize.unit}`\n  }\n}\n"],"mappings":"AACA;AAAA,EACE;AAAA,OAMK;AAEP,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGhC,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAG3C,MAAM,gBAAgB;AAAA,EACpB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AACd;AAEA,MAAM,iBAAiB;AAAA,EACrB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AACf;AAEO,SAAS,WACd,aACA,OACA,YACW;AACX,SAAO;AAAA,IACL,GAAI,WAAW,SAAS,MAAM,KAAK,KAAK;AAAA,MACtC,UAAU;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,MACD;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,CAAC,CAAC,OAAO,QAAQ,SAAS,QAAQ,cAAc,SAAS,OAAO;AAAA,QAC9D,GAAI,WAAW,SAAS,MAAM,KAAK,KAAK;AAAA,UACtC,OAAO,cAAc,KAAK,KAAK;AAAA,QACjC;AAAA,QACA,GAAI,WAAW,SAAS,MAAM,MAAM,KAClC,0BAA0B,UAAU,eAAe,aAAa;AAAA,QAClE,GAAI,WAAW,SAAS,MAAM,OAAO,KACnC,2BAA2B,WAAW,gBAAgB,cAAc;AAAA,QACtE,GAAI,WAAW,SAAS,MAAM,MAAM,KAAK;AAAA,UACvC,WAAW,mBAAmB,QAAQ,SAAS,KAAK;AAAA,UACpD,aAAa,mBAAmB,QAAQ,WAAW,KAAK;AAAA,UACxD,cAAc,mBAAmB,QAAQ,YAAY,KAAK;AAAA,UAC1D,YAAY,mBAAmB,QAAQ,UAAU,KAAK;AAAA,QACxD;AAAA,QACA,GAAI,WAAW,SAAS,MAAM,YAAY,KAAK;AAAA,UAC7C,qBAAqB,qBAAqB,cAAc,mBAAmB,KAAK;AAAA,UAChF,sBAAsB,qBAAqB,cAAc,oBAAoB,KAAK;AAAA,UAClF,yBAAyB,qBAAqB,cAAc,uBAAuB,KAAK;AAAA,UACxF,wBAAwB,qBAAqB,cAAc,sBAAsB,KAAK;AAAA,QACxF;AAAA,QACA,GAAI,WAAW,SAAS,MAAM,SAAS,KAAK;AAAA,UAC1C,GAAI,WAAW,cAAc;AAAA,YAC3B,YAAY,UAAU,WAAW,YAAY,EAAE,WAAW,MAAM,IAC5D,UAAU,aACV,IAAI,UAAU,UAAU;AAAA,UAC9B;AAAA,UACA,GAAI,WAAW,iBAAiB,EAAE,eAAe,UAAU,cAAc;AAAA,UACzE,GAAI,WAAW,YAAY,EAAE,UAAU,iBAAiB,UAAU,QAAQ,EAAE;AAAA,UAC5E,GAAI,WAAW,cAAc,EAAE,YAAY,UAAU,WAAW;AAAA,UAChE,eAAe,WAAW,iBAAiB,CAAC;AAAA,UAC5C,WAAW,WAAW,aAAa,CAAC;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,WAAS,cAAc,eAA6D;AAClF,QAAI,iBAAiB;AAAM,aAAO;AAElC,WAAO,6BAA6B,aAAa;AAAA,EACnD;AAEA,WAAS,mBACP,YACe;AACf,QAAI,cAAc;AAAM,aAAO;AAE/B,UAAM,EAAE,OAAO,OAAO,OAAAA,OAAM,IAAI;AAChC,WAAO,GAAG,SAAS,OAAO,QAAQ,CAAC,MAAMA,MAAK,IAC5C,SAAS,OAAO,cAAc,KAAK,IAAI,OACzC;AAAA,EACF;AAEA,WAAS,qBACP,cACe;AACf,QAAI,gBAAgB;AAAM,aAAO;AAEjC,WAAO,6BAA6B,YAAY;AAAA,EAClD;AAEA,WAAS,iBAAiB,UAA6C;AACrE,WAAO,GAAG,SAAS,KAAK,GAAG,SAAS,IAAI;AAAA,EAC1C;AACF;","names":["style"]}

package/dist/esm/runtimes/react/hooks/use-control-instances.js

@@ -0,0 +1,15 @@
+import { getPropControllers } from "../../../state/read-only-state";
+import { useDocumentKey } from "./use-document-context";
+import { useSelector } from "./use-selector";
+function useControlInstances(elementKey) {
+  const documentKey = useDocumentKey();
+  return useSelector((state) => {
+    if (documentKey == null)
+      return null;
+    return getPropControllers(state, { documentKey, elementKey });
+  });
+}
+export {
+  useControlInstances
+};
+//# sourceMappingURL=use-control-instances.js.map

package/dist/esm/runtimes/react/hooks/use-control-instances.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-control-instances.ts"],"sourcesContent":["import { ControlInstance } from '@makeswift/controls'\n\nimport { getPropControllers } from '../../../state/read-only-state'\nimport { useDocumentKey } from './use-document-context'\nimport { useSelector } from './use-selector'\n\nexport function useControlInstances(elementKey: string): Record<string, ControlInstance> | null {\n  const documentKey = useDocumentKey()\n\n  return useSelector(state => {\n    if (documentKey == null) return null\n\n    return getPropControllers(state, { documentKey, elementKey })\n  })\n}\n"],"mappings":"AAEA,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAErB,SAAS,oBAAoB,YAA4D;AAC9F,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY,WAAS;AAC1B,QAAI,eAAe;AAAM,aAAO;AAEhC,WAAO,mBAAmB,OAAO,EAAE,aAAa,WAAW,CAAC;AAAA,EAC9D,CAAC;AACH;","names":[]}

package/dist/esm/runtimes/react/hooks/use-resolved-props.js

@@ -2,29 +2,22 @@ import { useMemo, useEffect, useRef, useSyncExternalStore, useCallback } from "r
 import {
   mapValues
 } from "@makeswift/controls";
-import * as ReactPage from "../../../state/read-only-state";
 import { useResourceResolver } from "./use-resource-resolver";
-import { useDocumentKey } from "./use-document-context";
-import { useSelector } from "./use-selector";
-import { useStylesheetFactory } from "./use-stylesheet-factory";
-import { useResolvableRecord } from "./use-resolvable-record";
 import { propErrorHandlingProxy } from "../utils/prop-error-handling-proxy";
-function useControlInstances(elementKey) {
-  const documentKey = useDocumentKey();
-  return useSelector((state) => {
-    if (documentKey == null)
-      return null;
-    return ReactPage.getPropControllers(state, { documentKey, elementKey });
-  });
-}
-function useResolvedProps(propDefs, elementData, elementKey) {
-  const stylesheetFactory = useStylesheetFactory();
+import { useControlInstances } from "./use-control-instances";
+import { useResolvableRecord } from "./use-resolvable-record";
+function useResolvedProps({
+  propDefs,
+  propData,
+  elementKey,
+  stylesheetFactory
+}) {
   const resourceResolver = useResourceResolver();
   const controls = useControlInstances(elementKey);
   const cache = useRef({}).current;
   const resolveProp = useCallback(
     (def, propName) => {
-      const data = elementData[propName];
+      const data = propData[propName];
       const control = controls?.[propName];
       if (cache[propName] != null && data === cache[propName].data && control === cache[propName].control) {
         return cache[propName].resolvedValue;
@@ -38,7 +31,7 @@ function useResolvedProps(propDefs, elementData, elementKey) {
       cache[propName] = { data, control, resolvedValue };
       return resolvedValue;
     },
-    [controls, elementData, resourceResolver, stylesheetFactory]
+    [controls, propData, resourceResolver, stylesheetFactory]
   );
   const resolvables = useMemo(
     () => mapValues(propDefs, (def, propName) => {

package/dist/esm/runtimes/react/hooks/use-resolved-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-props.ts"],"sourcesContent":["import { useMemo, useEffect, useRef, useSyncExternalStore, useCallback } from 'react'\nimport {\n  ControlDefinition,\n  ControlInstance,\n  mapValues,\n  type Data,\n  type Resolvable,\n} from '@makeswift/controls'\n\nimport * as ReactPage from '../../../state/read-only-state'\nimport { useResourceResolver } from './use-resource-resolver'\nimport { useDocumentKey } from './use-document-context'\nimport { useSelector } from './use-selector'\n\nimport { useStylesheetFactory } from './use-stylesheet-factory'\n\nimport { useResolvableRecord } from './use-resolvable-record'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nfunction useControlInstances(elementKey: string): Record<string, ControlInstance> | null {\n  const documentKey = useDocumentKey()\n\n  return useSelector(state => {\n    if (documentKey == null) return null\n\n    return ReactPage.getPropControllers(state, { documentKey, elementKey })\n  })\n}\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps(\n  propDefs: Record<string, ControlDefinition>,\n  elementData: Record<string, Data>,\n  elementKey: string,\n): Record<string, unknown> {\n  const stylesheetFactory = useStylesheetFactory()\n  const resourceResolver = useResourceResolver()\n  const controls = useControlInstances(elementKey)\n\n  const cache = useRef<Record<string, CacheItem>>({}).current\n  const resolveProp = useCallback(\n    (def: ControlDefinition, propName: string) => {\n      const data = elementData[propName]\n      const control = controls?.[propName]\n\n      if (\n        cache[propName] != null &&\n        data === cache[propName].data &&\n        control === cache[propName].control\n      ) {\n        return cache[propName].resolvedValue\n      }\n\n      const resolvedValue = def.resolveValue(\n        data,\n        resourceResolver,\n        stylesheetFactory.get(propName),\n        control,\n      )\n\n      cache[propName] = { data, control, resolvedValue }\n      return resolvedValue\n    },\n    [controls, elementData, resourceResolver, stylesheetFactory],\n  )\n\n  const resolvables = useMemo<Record<string, Resolvable<unknown>>>(\n    () =>\n      mapValues(propDefs, (def, propName) => {\n        const defaultValue = (def.config as any)?.defaultValue\n        return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, error => {\n          console.warn(\n            `Error reading value for prop \"${propName}\", falling back to \\`${defaultValue}\\`.`,\n            { control: def, error },\n          )\n        })\n      }),\n    [propDefs, resolveProp],\n  )\n\n  const props = useResolvableRecord(resolvables)\n\n  // no need to call `triggerResolve` on the server, all the resources should already be in\n  // the host API client's cache (populated from the snapshot's cache)\n  useEffect(() => {\n    props.triggerResolve()\n  }, [props])\n\n  // the order is important here, the styles are defined in the process of the props resolution,\n  // calling `useDefinedStyles` before the props are resolved would effectively be a noop\n  const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n\n  stylesheetFactory.useDefinedStyles()\n\n  return resolvedProps\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,YAAY,eAAe;AAC3B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B;AAErC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AAEvC,SAAS,oBAAoB,YAA4D;AACvF,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY,WAAS;AAC1B,QAAI,eAAe;AAAM,aAAO;AAEhC,WAAO,UAAU,mBAAmB,OAAO,EAAE,aAAa,WAAW,CAAC;AAAA,EACxE,CAAC;AACH;AAQO,SAAS,iBACd,UACA,aACA,YACyB;AACzB,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,WAAW,oBAAoB,UAAU;AAE/C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,YAAY,QAAQ;AACjC,YAAM,UAAU,WAAW,QAAQ;AAEnC,UACE,MAAM,QAAQ,KAAK,QACnB,SAAS,MAAM,QAAQ,EAAE,QACzB,YAAY,MAAM,QAAQ,EAAE,SAC5B;AACA,eAAO,MAAM,QAAQ,EAAE;AAAA,MACzB;AAEA,YAAM,gBAAgB,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA,kBAAkB,IAAI,QAAQ;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,EAAE,MAAM,SAAS,cAAc;AACjD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,aAAa,kBAAkB,iBAAiB;AAAA,EAC7D;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,UAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,aAAO,uBAAuB,YAAY,KAAK,QAAQ,GAAG,cAAc,WAAS;AAC/E,gBAAQ;AAAA,UACN,iCAAiC,QAAQ,wBAAwB,YAAY;AAAA,UAC7E,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,QAAQ,oBAAoB,WAAW;AAI7C,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAIV,QAAM,gBAAgB,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,oBAAkB,iBAAiB;AAEnC,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-props.ts"],"sourcesContent":["import { useMemo, useEffect, useRef, useSyncExternalStore, useCallback } from 'react'\nimport {\n  ControlDefinition,\n  ControlInstance,\n  mapValues,\n  type Data,\n  type Resolvable,\n} from '@makeswift/controls'\n\nimport { useResourceResolver } from './use-resource-resolver'\n\nimport { type StylesheetFactory } from '../stylesheet-factory'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nimport { useControlInstances } from './use-control-instances'\nimport { useResolvableRecord } from './use-resolvable-record'\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps({\n  propDefs,\n  propData,\n  elementKey,\n  stylesheetFactory,\n}: {\n  propDefs: Record<string, ControlDefinition>\n  propData: Record<string, Data>\n  elementKey: string\n  stylesheetFactory: StylesheetFactory\n}): Record<string, unknown> {\n  const resourceResolver = useResourceResolver()\n  const controls = useControlInstances(elementKey)\n\n  const cache = useRef<Record<string, CacheItem>>({}).current\n  const resolveProp = useCallback(\n    (def: ControlDefinition, propName: string) => {\n      const data = propData[propName]\n      const control = controls?.[propName]\n\n      if (\n        cache[propName] != null &&\n        data === cache[propName].data &&\n        control === cache[propName].control\n      ) {\n        return cache[propName].resolvedValue\n      }\n\n      const resolvedValue = def.resolveValue(\n        data,\n        resourceResolver,\n        stylesheetFactory.get(propName),\n        control,\n      )\n\n      cache[propName] = { data, control, resolvedValue }\n      return resolvedValue\n    },\n    [controls, propData, resourceResolver, stylesheetFactory],\n  )\n\n  const resolvables = useMemo<Record<string, Resolvable<unknown>>>(\n    () =>\n      mapValues(propDefs, (def, propName) => {\n        const defaultValue = (def.config as any)?.defaultValue\n        return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, error => {\n          console.warn(\n            `Error reading value for prop \"${propName}\", falling back to \\`${defaultValue}\\`.`,\n            { control: def, error },\n          )\n        })\n      }),\n    [propDefs, resolveProp],\n  )\n\n  const props = useResolvableRecord(resolvables)\n\n  // no need to call `triggerResolve` on the server, all the resources should already be in\n  // the host API client's cache (populated from the snapshot's cache)\n  useEffect(() => {\n    props.triggerResolve()\n  }, [props])\n\n  // the order is important here, the styles are defined in the process of the props resolution,\n  // calling `useDefinedStyles` before the props are resolved would effectively be a noop\n  const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n\n  stylesheetFactory.useDefinedStyles()\n\n  return resolvedProps\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,SAAS,2BAA2B;AAGpC,SAAS,8BAA8B;AAEvC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AAQ7B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK4B;AAC1B,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,WAAW,oBAAoB,UAAU;AAE/C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,SAAS,QAAQ;AAC9B,YAAM,UAAU,WAAW,QAAQ;AAEnC,UACE,MAAM,QAAQ,KAAK,QACnB,SAAS,MAAM,QAAQ,EAAE,QACzB,YAAY,MAAM,QAAQ,EAAE,SAC5B;AACA,eAAO,MAAM,QAAQ,EAAE;AAAA,MACzB;AAEA,YAAM,gBAAgB,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA,kBAAkB,IAAI,QAAQ;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,EAAE,MAAM,SAAS,cAAc;AACjD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,kBAAkB,iBAAiB;AAAA,EAC1D;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,UAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,aAAO,uBAAuB,YAAY,KAAK,QAAQ,GAAG,cAAc,WAAS;AAC/E,gBAAQ;AAAA,UACN,iCAAiC,QAAQ,wBAAwB,YAAY;AAAA,UAC7E,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,QAAQ,oBAAoB,WAAW;AAI7C,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAIV,QAAM,gBAAgB,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,oBAAkB,iBAAiB;AAEnC,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/hooks/use-stylesheet-factory.js

@@ -3,12 +3,12 @@ import { serializeStyles } from "@emotion/serialize";
 import {
   isNotNil
 } from "@makeswift/controls";
-import { useCache } from "../root-style-registry";
 import { resolvedStyleToCss } from "../lib/resolved-style-to-css";
+import { pollBoxModel } from "../poll-box-model";
+import { useCache } from "../root-style-registry";
+import { useStyles, serializedStyleClassName } from "../use-style";
 import { useBreakpoints } from "./use-breakpoints";
 import { useCssId } from "./use-css-id";
-import { useStyles, serializedStyleClassName } from "../use-style";
-import { pollBoxModel } from "../poll-box-model";
 function useStylesheetFactory() {
   const breakpoints = useBreakpoints();
   const cache = useCache();

package/dist/esm/runtimes/react/hooks/use-stylesheet-factory.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-stylesheet-factory.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react'\nimport { serializeStyles } from '@emotion/serialize'\nimport { type EmotionCache } from '@emotion/cache'\nimport { type SerializedStyles } from '@emotion/utils'\n\nimport {\n  type BoxDisplayModel,\n  type Breakpoints,\n  type Stylesheet,\n  type ResolvedStyle,\n  isNotNil,\n} from '@makeswift/controls'\n\nimport { useCache } from '../root-style-registry'\nimport { resolvedStyleToCss } from '../lib/resolved-style-to-css'\n\nimport { useBreakpoints } from './use-breakpoints'\nimport { useCssId } from './use-css-id'\nimport { useStyles, serializedStyleClassName } from '../use-style'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport type StylesheetFactory = {\n  get(propName: string): Stylesheet\n  useDefinedStyles(): void\n}\n\nexport function useStylesheetFactory(): StylesheetFactory {\n  const breakpoints = useBreakpoints()\n  const cache = useCache()\n  const componentUid = useCssId()\n\n  const computedStyles = useRef<Record<string, SerializedStyles>>({}).current\n  const boxModelCallbacks = useRef<Record<string, (boxModel: BoxDisplayModel | null) => void>>(\n    {},\n  ).current\n\n  return useMemo(() => {\n    const getStylesheet = (styleSheetId: string): Stylesheet => ({\n      breakpoints(): Breakpoints {\n        return breakpoints\n      },\n\n      defineStyle(\n        style: ResolvedStyle,\n        onBoxModelChange?: (boxModel: BoxDisplayModel | null) => void,\n      ): string {\n        const serialized = serializeStyle(breakpoints, style, cache)\n        const uid = `u-${componentUid}-${styleSheetId}`\n        computedStyles[uid] = serialized\n\n        const className = serializedStyleClassName(cache, serialized)\n        if (!onBoxModelChange) return className\n\n        boxModelCallbacks[uid] = onBoxModelChange\n        return `${className} ${uid}`\n      },\n\n      child(id: string): Stylesheet {\n        return getStylesheet(`${styleSheetId}-${id}`)\n      },\n    })\n\n    return {\n      get(propName: string): Stylesheet {\n        return getStylesheet(propName)\n      },\n\n      useDefinedStyles() {\n        useStyles(cache, Object.values(computedStyles))\n\n        useEffect(() => {\n          const unsubscribes = Object.entries(boxModelCallbacks)\n            .map(([uid, callback]) =>\n              callback != null\n                ? pollBoxModel({\n                    element: document.querySelector(`.${uid}`),\n                    onBoxModelChange: callback,\n                  })\n                : undefined,\n            )\n            .filter(isNotNil)\n\n          return () => unsubscribes.forEach(fn => fn())\n        }, [Object.keys(boxModelCallbacks).join(' ')])\n      },\n    }\n  }, [breakpoints, cache, componentUid])\n}\n\nfunction serializeStyle(\n  breakpoints: Breakpoints,\n  style: ResolvedStyle,\n  cache: EmotionCache,\n): SerializedStyles {\n  const css = resolvedStyleToCss(breakpoints, style)\n  return serializeStyles([css], cache.registered)\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,cAAc;AAC3C,SAAS,uBAAuB;AAIhC;AAAA,EAKE;AAAA,OACK;AAEP,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AAEnC,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,WAAW,gCAAgC;AACpD,SAAS,oBAAoB;AAOtB,SAAS,uBAA0C;AACxD,QAAM,cAAc,eAAe;AACnC,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,SAAS;AAE9B,QAAM,iBAAiB,OAAyC,CAAC,CAAC,EAAE;AACpE,QAAM,oBAAoB;AAAA,IACxB,CAAC;AAAA,EACH,EAAE;AAEF,SAAO,QAAQ,MAAM;AACnB,UAAM,gBAAgB,CAAC,kBAAsC;AAAA,MAC3D,cAA2B;AACzB,eAAO;AAAA,MACT;AAAA,MAEA,YACE,OACA,kBACQ;AACR,cAAM,aAAa,eAAe,aAAa,OAAO,KAAK;AAC3D,cAAM,MAAM,KAAK,YAAY,IAAI,YAAY;AAC7C,uBAAe,GAAG,IAAI;AAEtB,cAAM,YAAY,yBAAyB,OAAO,UAAU;AAC5D,YAAI,CAAC;AAAkB,iBAAO;AAE9B,0BAAkB,GAAG,IAAI;AACzB,eAAO,GAAG,SAAS,IAAI,GAAG;AAAA,MAC5B;AAAA,MAEA,MAAM,IAAwB;AAC5B,eAAO,cAAc,GAAG,YAAY,IAAI,EAAE,EAAE;AAAA,MAC9C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,IAAI,UAA8B;AAChC,eAAO,cAAc,QAAQ;AAAA,MAC/B;AAAA,MAEA,mBAAmB;AACjB,kBAAU,OAAO,OAAO,OAAO,cAAc,CAAC;AAE9C,kBAAU,MAAM;AACd,gBAAM,eAAe,OAAO,QAAQ,iBAAiB,EAClD;AAAA,YAAI,CAAC,CAAC,KAAK,QAAQ,MAClB,YAAY,OACR,aAAa;AAAA,cACX,SAAS,SAAS,cAAc,IAAI,GAAG,EAAE;AAAA,cACzC,kBAAkB;AAAA,YACpB,CAAC,IACD;AAAA,UACN,EACC,OAAO,QAAQ;AAElB,iBAAO,MAAM,aAAa,QAAQ,QAAM,GAAG,CAAC;AAAA,QAC9C,GAAG,CAAC,OAAO,KAAK,iBAAiB,EAAE,KAAK,GAAG,CAAC,CAAC;AAAA,MAC/C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,OAAO,YAAY,CAAC;AACvC;AAEA,SAAS,eACP,aACA,OACA,OACkB;AAClB,QAAM,MAAM,mBAAmB,aAAa,KAAK;AACjD,SAAO,gBAAgB,CAAC,GAAG,GAAG,MAAM,UAAU;AAChD;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-stylesheet-factory.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react'\nimport { serializeStyles } from '@emotion/serialize'\nimport { type EmotionCache } from '@emotion/cache'\nimport { type SerializedStyles } from '@emotion/utils'\n\nimport {\n  type BoxDisplayModel,\n  type Breakpoints,\n  type Stylesheet,\n  type ResolvedStyle,\n  isNotNil,\n} from '@makeswift/controls'\n\nimport { resolvedStyleToCss } from '../lib/resolved-style-to-css'\nimport { pollBoxModel } from '../poll-box-model'\nimport { useCache } from '../root-style-registry'\nimport { type StylesheetFactory } from '../stylesheet-factory'\nimport { useStyles, serializedStyleClassName } from '../use-style'\n\nimport { useBreakpoints } from './use-breakpoints'\nimport { useCssId } from './use-css-id'\n\nexport function useStylesheetFactory(): StylesheetFactory {\n  const breakpoints = useBreakpoints()\n  const cache = useCache()\n  const componentUid = useCssId()\n\n  const computedStyles = useRef<Record<string, SerializedStyles>>({}).current\n  const boxModelCallbacks = useRef<Record<string, (boxModel: BoxDisplayModel | null) => void>>(\n    {},\n  ).current\n\n  return useMemo(() => {\n    const getStylesheet = (styleSheetId: string): Stylesheet => ({\n      breakpoints(): Breakpoints {\n        return breakpoints\n      },\n\n      defineStyle(\n        style: ResolvedStyle,\n        onBoxModelChange?: (boxModel: BoxDisplayModel | null) => void,\n      ): string {\n        const serialized = serializeStyle(breakpoints, style, cache)\n        const uid = `u-${componentUid}-${styleSheetId}`\n        computedStyles[uid] = serialized\n\n        const className = serializedStyleClassName(cache, serialized)\n        if (!onBoxModelChange) return className\n\n        boxModelCallbacks[uid] = onBoxModelChange\n        return `${className} ${uid}`\n      },\n\n      child(id: string): Stylesheet {\n        return getStylesheet(`${styleSheetId}-${id}`)\n      },\n    })\n\n    return {\n      get(propName: string): Stylesheet {\n        return getStylesheet(propName)\n      },\n\n      useDefinedStyles() {\n        useStyles(cache, Object.values(computedStyles))\n\n        useEffect(() => {\n          const unsubscribes = Object.entries(boxModelCallbacks)\n            .map(([uid, callback]) =>\n              callback != null\n                ? pollBoxModel({\n                    element: document.querySelector(`.${uid}`),\n                    onBoxModelChange: callback,\n                  })\n                : undefined,\n            )\n            .filter(isNotNil)\n\n          return () => unsubscribes.forEach(fn => fn())\n        }, [Object.keys(boxModelCallbacks).join(' ')])\n      },\n    }\n  }, [breakpoints, cache, componentUid])\n}\n\nfunction serializeStyle(\n  breakpoints: Breakpoints,\n  style: ResolvedStyle,\n  cache: EmotionCache,\n): SerializedStyles {\n  const css = resolvedStyleToCss(breakpoints, style)\n  return serializeStyles([css], cache.registered)\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,cAAc;AAC3C,SAAS,uBAAuB;AAIhC;AAAA,EAKE;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAEzB,SAAS,WAAW,gCAAgC;AAEpD,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAElB,SAAS,uBAA0C;AACxD,QAAM,cAAc,eAAe;AACnC,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,SAAS;AAE9B,QAAM,iBAAiB,OAAyC,CAAC,CAAC,EAAE;AACpE,QAAM,oBAAoB;AAAA,IACxB,CAAC;AAAA,EACH,EAAE;AAEF,SAAO,QAAQ,MAAM;AACnB,UAAM,gBAAgB,CAAC,kBAAsC;AAAA,MAC3D,cAA2B;AACzB,eAAO;AAAA,MACT;AAAA,MAEA,YACE,OACA,kBACQ;AACR,cAAM,aAAa,eAAe,aAAa,OAAO,KAAK;AAC3D,cAAM,MAAM,KAAK,YAAY,IAAI,YAAY;AAC7C,uBAAe,GAAG,IAAI;AAEtB,cAAM,YAAY,yBAAyB,OAAO,UAAU;AAC5D,YAAI,CAAC;AAAkB,iBAAO;AAE9B,0BAAkB,GAAG,IAAI;AACzB,eAAO,GAAG,SAAS,IAAI,GAAG;AAAA,MAC5B;AAAA,MAEA,MAAM,IAAwB;AAC5B,eAAO,cAAc,GAAG,YAAY,IAAI,EAAE,EAAE;AAAA,MAC9C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,IAAI,UAA8B;AAChC,eAAO,cAAc,QAAQ;AAAA,MAC/B;AAAA,MAEA,mBAAmB;AACjB,kBAAU,OAAO,OAAO,OAAO,cAAc,CAAC;AAE9C,kBAAU,MAAM;AACd,gBAAM,eAAe,OAAO,QAAQ,iBAAiB,EAClD;AAAA,YAAI,CAAC,CAAC,KAAK,QAAQ,MAClB,YAAY,OACR,aAAa;AAAA,cACX,SAAS,SAAS,cAAc,IAAI,GAAG,EAAE;AAAA,cACzC,kBAAkB;AAAA,YACpB,CAAC,IACD;AAAA,UACN,EACC,OAAO,QAAQ;AAElB,iBAAO,MAAM,aAAa,QAAQ,QAAM,GAAG,CAAC;AAAA,QAC9C,GAAG,CAAC,OAAO,KAAK,iBAAiB,EAAE,KAAK,GAAG,CAAC,CAAC;AAAA,MAC/C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,OAAO,YAAY,CAAC;AACvC;AAEA,SAAS,eACP,aACA,OACA,OACkB;AAClB,QAAM,MAAM,mBAAmB,aAAa,KAAK;AACjD,SAAO,gBAAgB,CAAC,GAAG,GAAG,MAAM,UAAU;AAChD;","names":[]}

package/dist/esm/runtimes/react/stylesheet-factory.js

@@ -0,0 +1 @@
+//# sourceMappingURL=stylesheet-factory.js.map

package/dist/esm/runtimes/react/stylesheet-factory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/esm/slate/utils/toText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/slate/utils/toText.ts"],"sourcesContent":["import { type Descendant } from 'slate'\nimport { Slate } from '@makeswift/controls'\n\nimport { RichText, RichTextV2Mode } from '../../controls/rich-text-v2'\n\nfunction isBlock(descendant: Descendant): descendant is Slate.Block {\n  if (Slate.isText(descendant)) return false\n  return Slate.isBlock(descendant)\n}\n\nfunction getTextByDescendant(descendant: Descendant, mode: RichTextV2Mode): string {\n  if (Slate.isText(descendant)) {\n    return descendant.text ?? ''\n  }\n\n  if (Slate.isDefaultElement(descendant)) {\n    return mode === RichText.Mode.Inline\n      ? descendant.children.map(descendant => getTextByDescendant(descendant, mode)).join('') ?? ''\n      : descendant.children\n          .map(descendant => getTextByDescendant(descendant, mode))\n          .join(descendant.children.every(isBlock) ? '\\n' : '') ?? ''\n  }\n\n  if (Slate.isBlock(descendant)) {\n    return (\n      descendant.children\n        .map(descendant => getTextByDescendant(descendant, mode))\n        .join(descendant.children.every(isBlock) ? '\\n' : '') ?? ''\n    )\n  }\n\n  if (Slate.isInline(descendant)) {\n    return (\n      descendant.children.map(descendant => getTextByDescendant(descendant, mode)).join('') ?? ''\n    )\n  }\n\n  return ''\n}\n\nexport function toText(descendants: Descendant[], mode: RichTextV2Mode): string {\n  return descendants.map(node => getTextByDescendant(node, mode)).join('\\n')\n}\n"],"mappings":"AACA,SAAS,aAAa;AAEtB,SAAS,gBAAgC;AAEzC,SAAS,QAAQ,YAAmD;AAClE,MAAI,MAAM,OAAO,UAAU;AAAG,WAAO;AACrC,SAAO,MAAM,QAAQ,UAAU;AACjC;AAEA,SAAS,oBAAoB,YAAwB,MAA8B;AACjF,MAAI,MAAM,OAAO,UAAU,GAAG;AAC5B,WAAO,WAAW,QAAQ;AAAA,EAC5B;AAEA,MAAI,MAAM,iBAAiB,UAAU,GAAG;AACtC,WAAO,SAAS,SAAS,KAAK,SAC1B,WAAW,SAAS,IAAI,CAAAA,gBAAc,oBAAoBA,aAAY,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,KACzF,WAAW,SACR,IAAI,CAAAA,gBAAc,oBAAoBA,aAAY,IAAI,CAAC,EACvD,KAAK,WAAW,SAAS,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK;AAAA,EACjE;AAEA,MAAI,MAAM,QAAQ,UAAU,GAAG;AAC7B,WACE,WAAW,SACR,IAAI,CAAAA,gBAAc,oBAAoBA,aAAY,IAAI,CAAC,EACvD,KAAK,WAAW,SAAS,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK;AAAA,EAE/D;AAEA,MAAI,MAAM,SAAS,UAAU,GAAG;AAC9B,WACE,WAAW,SAAS,IAAI,CAAAA,gBAAc,oBAAoBA,aAAY,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK;AAAA,EAE7F;AAEA,SAAO;AACT;AAEO,SAAS,OAAO,aAA2B,MAA8B;AAC9E,SAAO,YAAY,IAAI,UAAQ,oBAAoB,MAAM,IAAI,CAAC,EAAE,KAAK,IAAI;AAC3E;","names":["descendant"]}
+{"version":3,"sources":["../../../../src/slate/utils/toText.ts"],"sourcesContent":["import { type Descendant } from 'slate'\nimport { Slate } from '@makeswift/controls'\n\nimport { RichText, RichTextV2Mode } from '../../controls/rich-text-v2'\n\nfunction isBlock(descendant: Descendant): descendant is Slate.Block {\n  if (Slate.isText(descendant)) return false\n  return Slate.isBlock(descendant)\n}\n\nfunction getTextByDescendant(descendant: Descendant, mode: RichTextV2Mode): string {\n  if (Slate.isText(descendant)) {\n    return descendant.text ?? ''\n  }\n\n  if (Slate.isDefaultElement(descendant)) {\n    return mode === RichText.Mode.Inline\n      ? (descendant.children.map(descendant => getTextByDescendant(descendant, mode)).join('') ??\n          '')\n      : (descendant.children\n          .map(descendant => getTextByDescendant(descendant, mode))\n          .join(descendant.children.every(isBlock) ? '\\n' : '') ?? '')\n  }\n\n  if (Slate.isBlock(descendant)) {\n    return (\n      descendant.children\n        .map(descendant => getTextByDescendant(descendant, mode))\n        .join(descendant.children.every(isBlock) ? '\\n' : '') ?? ''\n    )\n  }\n\n  if (Slate.isInline(descendant)) {\n    return (\n      descendant.children.map(descendant => getTextByDescendant(descendant, mode)).join('') ?? ''\n    )\n  }\n\n  return ''\n}\n\nexport function toText(descendants: Descendant[], mode: RichTextV2Mode): string {\n  return descendants.map(node => getTextByDescendant(node, mode)).join('\\n')\n}\n"],"mappings":"AACA,SAAS,aAAa;AAEtB,SAAS,gBAAgC;AAEzC,SAAS,QAAQ,YAAmD;AAClE,MAAI,MAAM,OAAO,UAAU;AAAG,WAAO;AACrC,SAAO,MAAM,QAAQ,UAAU;AACjC;AAEA,SAAS,oBAAoB,YAAwB,MAA8B;AACjF,MAAI,MAAM,OAAO,UAAU,GAAG;AAC5B,WAAO,WAAW,QAAQ;AAAA,EAC5B;AAEA,MAAI,MAAM,iBAAiB,UAAU,GAAG;AACtC,WAAO,SAAS,SAAS,KAAK,SACzB,WAAW,SAAS,IAAI,CAAAA,gBAAc,oBAAoBA,aAAY,IAAI,CAAC,EAAE,KAAK,EAAE,KACnF,KACD,WAAW,SACT,IAAI,CAAAA,gBAAc,oBAAoBA,aAAY,IAAI,CAAC,EACvD,KAAK,WAAW,SAAS,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK;AAAA,EACjE;AAEA,MAAI,MAAM,QAAQ,UAAU,GAAG;AAC7B,WACE,WAAW,SACR,IAAI,CAAAA,gBAAc,oBAAoBA,aAAY,IAAI,CAAC,EACvD,KAAK,WAAW,SAAS,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK;AAAA,EAE/D;AAEA,MAAI,MAAM,SAAS,UAAU,GAAG;AAC9B,WACE,WAAW,SAAS,IAAI,CAAAA,gBAAc,oBAAoBA,aAAY,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK;AAAA,EAE7F;AAEA,SAAO;AACT;AAEO,SAAS,OAAO,aAA2B,MAA8B;AAC9E,SAAO,YAAY,IAAI,UAAQ,oBAAoB,MAAM,IAAI,CAAC,EAAE,KAAK,IAAI;AAC3E;","names":["descendant"]}