npm - @makeswift/runtime - Versions diffs - 0.28.8-canary.3 → 0.28.8-canary.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/dist/cjs/api/graphql-api-client.js CHANGED Viewed

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

package/dist/cjs/api/rest-api-client.js CHANGED Viewed

@@ -147,7 +147,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.3"
+      "makeswift-runtime-version": "0.28.8-canary.4"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

package/dist/cjs/api-handler/handlers/manifest.js CHANGED Viewed

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

package/dist/cjs/client/index.js CHANGED Viewed

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

package/dist/cjs/components/builtin/Navigation/components/DropDownButton/index.js.map CHANGED Viewed

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

package/dist/cjs/components/shared/BackgroundsContainer/components/BackgroundVideo/index.js.map CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAaI~~;~~AAbJ~~,iBAAmB;AACnB,~~mBAAgG~~;~~AAEhG~~,0BAA4B;AAC5B,uBAAyB;AAEzB,uCAA0C;AAE1C,MAAM,gBAAY,yBAAW,SAASA,WACpC,EAAE,WAAW,GAAG,YAAY,GAC5B,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,YACT,2BAAS;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,eAAW,2BAAS;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,QAAI,uBAAS,KAAK;AACxC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AACpC,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,kEAA0B,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,gCAAY,QAAQ,GAAG;AAAG,WAAO,2EAAE;AAExC,SACE,6CAAC,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,4CAAC,QAAK,iBAAiB,WAAW,SAAS,CAAC,OAAO;AAAA,KACrD;AAEJ;","names":["Container"]}
1	+ {"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/cjs/controls/link.js.map CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wCAA2B;AAE3B,sBAIO;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,gBAAAA,eAAmC;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,8CAAAC,SAAe,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":["BaseLinkDefinition","scrollIntoView"]}
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wCAA2B;AAE3B,sBAIO;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,gBAAAA,eAAmC;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,8CAAAC,SAAe,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":["BaseLinkDefinition","scrollIntoView"]}

package/dist/cjs/runtimes/react/controls/style.js.map CHANGED Viewed

	@@ -1 +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"]}
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"]}

package/dist/cjs/slate/utils/toText.js.map CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAAsB;AAEtB,0BAAyC;AAEzC,SAAS,QAAQ,YAAmD;AAClE,MAAI,sBAAM,OAAO,UAAU;AAAG,WAAO;AACrC,SAAO,sBAAM,QAAQ,UAAU;AACjC;AAEA,SAAS,oBAAoB,YAAwB,MAA8B;AACjF,MAAI,sBAAM,OAAO,UAAU,GAAG;AAC5B,WAAO,WAAW,QAAQ;AAAA,EAC5B;AAEA,MAAI,sBAAM,iBAAiB,UAAU,GAAG;AACtC,WAAO,SAAS,6BAAS,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,sBAAM,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,sBAAM,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"]}
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 '')\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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAAsB;AAEtB,0BAAyC;AAEzC,SAAS,QAAQ,YAAmD;AAClE,MAAI,sBAAM,OAAO,UAAU;AAAG,WAAO;AACrC,SAAO,sBAAM,QAAQ,UAAU;AACjC;AAEA,SAAS,oBAAoB,YAAwB,MAA8B;AACjF,MAAI,sBAAM,OAAO,UAAU,GAAG;AAC5B,WAAO,WAAW,QAAQ;AAAA,EAC5B;AAEA,MAAI,sBAAM,iBAAiB,UAAU,GAAG;AACtC,WAAO,SAAS,6BAAS,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,sBAAM,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,sBAAM,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"]}

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

@@ -199,32 +199,60 @@ function updateParentElements(elements, elementPaths, rootElement) {
       elements.set(element.key, element);
   });
 }
-function hasChildren(element, propName, descriptors) {
+function getPropChildren(element, propName, descriptors) {
   if ((0, import_controls.isElementReference)(element))
-    return false;
+    return null;
   const propDescriptor = descriptors.get(element.type)?.[propName];
   if (propDescriptor == null)
-    return false;
-  const children = Introspection.getElementChildren(propDescriptor, element.props[propName]);
-  return children.length > 0;
+    return null;
+  return Introspection.getElementChildren(propDescriptor, element.props[propName]);
 }
-function deleteElement({ elements, elementIds }, deletedElement, propName, descriptors) {
-  if (propName == null || hasChildren(deletedElement, propName, descriptors)) {
-    for (const element of traverseElementTree(deletedElement, descriptors)) {
-      elements.delete(element.key);
-      elementIds.delete(element.key);
-    }
-  } else {
-    elements.delete(deletedElement.key);
-    elementIds.delete(deletedElement.key);
+function isChildrenProp(element, propName, descriptors) {
+  const children = getPropChildren(element, propName, descriptors);
+  return children != null;
+}
+function deleteElement({ elements, elementIds }, elementToDelete, descriptors) {
+  for (const element of traverseElementTree(elementToDelete, descriptors)) {
+    elements.delete(element.key);
+    elementIds.delete(element.key);
+  }
+}
+function deleteChildrenInProp(elementTree, parentElement, propName, descriptors) {
+  const childrenInProp = getPropChildren(parentElement, propName, descriptors);
+  if (childrenInProp == null) {
+    return;
+  }
+  for (const child of childrenInProp) {
+    deleteElement(elementTree, child, descriptors);
+  }
+}
+function deleteElementOrProp({ elements, elementIds }, targetElement, propName, descriptors) {
+  if (propName == null) {
+    deleteElement({ elements, elementIds }, targetElement, descriptors);
+    return;
+  }
+  if (isChildrenProp(targetElement, propName, descriptors)) {
+    deleteChildrenInProp({ elements, elementIds }, targetElement, propName, descriptors);
+  }
+  const elementInTree = elements.get(targetElement.key);
+  if (!elementInTree) {
+    console.error(
+      `Attempting to remove prop ${propName} from element ${targetElement.key} not found in tree`
+    );
+    return;
+  }
+  if (!(0, import_controls.isElementReference)(elementInTree)) {
+    const newProps = { ...elementInTree.props };
+    delete newProps[propName];
+    elements.set(targetElement.key, { ...elementInTree, props: newProps });
   }
 }
 function applyDelete(elementTree, descriptors, rootElements, path) {
-  const [deleteElementPath, ...parentElementPaths] = getChangedElementsPaths(path);
-  const [deletedElement, propName] = getElementAndPropName(rootElements.before, deleteElementPath);
+  const [targetElementPath, ...parentElementPaths] = getChangedElementsPaths(path);
+  const [targetElement, propName] = getElementAndPropName(rootElements.before, targetElementPath);
   const elements = new Map(elementTree.elements);
   const elementIds = new Map(elementTree.elementIds);
-  deleteElement({ elements, elementIds }, deletedElement, propName, descriptors);
+  deleteElementOrProp({ elements, elementIds }, targetElement, propName, descriptors);
   updateParentElements(elements, parentElementPaths, rootElements.after);
   return {
     elements,
@@ -232,7 +260,7 @@ function applyDelete(elementTree, descriptors, rootElements, path) {
   };
 }
 function insertElement({ elements, elementIds }, insertedElement, propName, descriptors) {
-  if (propName == null || hasChildren(insertedElement, propName, descriptors)) {
+  if (propName == null || isChildrenProp(insertedElement, propName, descriptors)) {
     for (const element of traverseElementTree(insertedElement, descriptors)) {
       elements.set(element.key, element);
       if (!(0, import_controls.isElementReference)(element)) {
@@ -264,11 +292,11 @@ function applyInsert(elementTree, descriptors, rootElements, path) {
 }
 function applyUpdate(elementTree, descriptors, rootElements, path) {
   const [updateElementPath, ...parentElementPaths] = getChangedElementsPaths(path);
-  const [deletedElement, propName] = getElementAndPropName(rootElements.before, updateElementPath);
+  const [targetElement, propName] = getElementAndPropName(rootElements.before, updateElementPath);
   const [insertedElement, _] = getElementAndPropName(rootElements.after, updateElementPath);
   const elements = new Map(elementTree.elements);
   const elementIds = new Map(elementTree.elementIds);
-  deleteElement({ elements, elementIds }, deletedElement, propName, descriptors);
+  deleteElementOrProp({ elements, elementIds }, targetElement, propName, descriptors);
   insertElement({ elements, elementIds }, insertedElement, propName, descriptors);
   updateParentElements(elements, parentElementPaths, rootElements.after);
   return {

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

	@@ -1 +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"]}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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(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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

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

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

@@ -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.3"
+      "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 CHANGED Viewed

@@ -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.3",
+    version: "0.28.8-canary.4",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/esm/client/index.js CHANGED Viewed

@@ -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.3",
+        "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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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"]}