npm - @makeswift/runtime - Versions diffs - 0.28.10-canary.9 → 0.29.0-canary.19 - Mend

@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.19

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 (678) 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.10-canary.9"
+      "makeswift-runtime-version": "0.29.0-canary.19"
     });
   }
   async getUnversionedResources({

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

@@ -52,7 +52,7 @@ class MakeswiftRestAPIClient {
       fetch,
       timeout: false,
       retry: {
-        statusCodes: [429],
+        statusCodes: [408, 429, 500, 502, 503, 504],
         limit: RetryBackoffConfig.MaxAttempts,
         backoffLimit: RetryBackoffConfig.MaxDelayMs,
         delay: (attemptCount) => 2 ** (attemptCount - 1) * 1e3,
@@ -198,7 +198,7 @@ class MakeswiftRestAPIClient {
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.28.10-canary.9"
+      "makeswift-runtime-version": "0.29.0-canary.19"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/api/rest-api-client.ts"],"sourcesContent":["import ky, { HTTPError, isHTTPError, type KyInstance } from './ky'\n\nimport {\n type File,\n type GlobalElement,\n type LocalizedGlobalElement,\n type PagePathnameSlice,\n type Swatch,\n type Table,\n type Typography,\n type HttpFetch,\n} from './types'\n\nimport { type SiteVersion } from './site-version'\nimport * as Schema from './schema'\n\nconst RetryBackoffConfig = {\n MaxAttempts: 3,\n MaxDelayMs: 5_000,\n}\n\nexport class MakeswiftRestAPIClient {\n private _fetch: KyInstance\n\n readonly apiKey: string\n readonly apiOrigin: string\n\n constructor({\n fetch,\n apiKey,\n apiOrigin,\n }: {\n fetch: HttpFetch\n apiKey: string\n apiOrigin: string\n }) {\n this._fetch = ky.create({\n fetch,\n timeout: false,\n retry: {\n statusCodes: [429],\n limit: RetryBackoffConfig.MaxAttempts,\n backoffLimit: RetryBackoffConfig.MaxDelayMs,\n delay: attemptCount => 2 ** (attemptCount - 1) * 1000,\n jitter: true,\n },\n hooks: {\n beforeRetry: [\n async ({ request, error, retryCount }) => {\n console.warn(\n `Request to ${request.url} failed with ${error}. Retrying (${retryCount}/${RetryBackoffConfig.MaxAttempts})`,\n )\n // Drain the response body before retrying so we don't leak unconsumed\n // response bodies (see the comment on `failedResponseBody` below).\n if (isHTTPError(error)) await failedResponseBody(error.response)\n },\n ],\n },\n })\n\n this.apiKey = apiKey\n this.apiOrigin = apiOrigin\n }\n\n async getSwatch(swatchId: string, siteVersion: SiteVersion \| null): Promise<Swatch \| null> {\n const response = await this.fetch(`v3/swatches/${swatchId}`, siteVersion)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get swatch '${swatchId}'`, response, {\n body: failedBody,\n siteVersion,\n })\n }\n\n const swatch = await response.json()\n\n return swatch\n }\n\n async getFile(fileId: string): Promise<File \| null> {\n const response = await this.fetch(`v1/files/${fileId}`, null)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get file '${fileId}'`, response, {\n body: failedBody,\n })\n }\n\n const file = await response.json()\n\n return file\n }\n\n async getTypography(\n typographyId: string,\n siteVersion: SiteVersion \| null,\n ): Promise<Typography \| null> {\n const response = await this.fetch(`v3/typographies/${typographyId}`, siteVersion)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get typography '${typographyId}'`, response, {\n body: failedBody,\n siteVersion,\n })\n }\n\n const typography = await response.json()\n\n return typography\n }\n\n async getGlobalElement(\n globalElementId: string,\n siteVersion: SiteVersion \| null,\n ): Promise<GlobalElement \| null> {\n const response = await this.fetch(`v3/global-elements/${globalElementId}`, siteVersion)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get global element '${globalElementId}'`, response, {\n body: failedBody,\n siteVersion,\n })\n }\n\n const globalElement = await response.json()\n\n return globalElement\n }\n\n async getLocalizedGlobalElement(\n globalElementId: string,\n locale: string,\n siteVersion: SiteVersion \| null,\n ): Promise<LocalizedGlobalElement \| null> {\n const response = await this.fetch(\n `v3/localized-global-elements/${globalElementId}?locale=${locale}`,\n siteVersion,\n )\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(\n `Failed to get localized global element '${globalElementId}'`,\n response,\n { body: failedBody, siteVersion, locale },\n )\n }\n\n const localizedGlobalElement = await response.json()\n\n return localizedGlobalElement\n }\n\n async getTable(tableId: string): Promise<Table \| null> {\n const response = await this.fetch(`v1/tables/${tableId}`, null)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get table '${tableId}'`, response, {\n body: failedBody,\n })\n }\n\n const table = await response.json()\n\n return table\n }\n\n async getPagePathnameSlices(\n pageIds: string[],\n siteVersion: SiteVersion \| null,\n { locale }: { locale?: string \| null },\n ): Promise<(PagePathnameSlice \| null)[]> {\n if (pageIds.length === 0) return []\n\n const url = new URL(`v3/page-pathname-slices/bulk`, this.apiOrigin)\n\n pageIds.forEach(id => url.searchParams.append('ids', id))\n if (locale != null) url.searchParams.set('locale', locale)\n\n const response = await this.fetch(url.pathname + url.search, siteVersion)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return []\n\n throw new RestApiClientError(\n `Failed to get page pathname slice(s) for ${pageIds.join(', ')}`,\n response,\n { body: failedBody, siteVersion, locale },\n )\n }\n\n const json = await response.json()\n\n const pagePathnameSlices = Schema.pagePathnameSlices.parse(json)\n\n // We're mapping the basePageId to be the id, because we're still using the GraphQL\n // fragment as our APIResource. The id on the APIResource needs to match the pageId\n // so that we can find the corresponding page pathname slice when we call getPagePathnameSlice(pageId).\n // TODO: Update this once we move away from the GraphQL fragments.\n return pagePathnameSlices.map(pagePathnameSlice => {\n if (pagePathnameSlice == null) return null\n\n return {\n ...pagePathnameSlice,\n id: pagePathnameSlice.basePageId,\n localizedPathname: pagePathnameSlice.localizedPathname ?? null,\n }\n })\n }\n\n async getPagePathnameSlice(\n pageId: string,\n siteVersion: SiteVersion \| null,\n { locale }: { locale?: string \| null } = {},\n ): Promise<PagePathnameSlice \| null> {\n const pagePathnameSlices = await this.getPagePathnameSlices([pageId], siteVersion, { locale })\n\n return pagePathnameSlices.at(0) ?? null\n }\n\n protected async fetch(\n path: string,\n siteVersion: SiteVersion \| null,\n init?: RequestInit,\n ): Promise<Response> {\n const requestUrl = new URL(path, this.apiOrigin)\n\n const requestHeaders = new Headers({\n 'x-api-key': this.apiKey,\n 'makeswift-site-api-key': this.apiKey,\n 'makeswift-runtime-version': PACKAGE_VERSION,\n })\n\n if (siteVersion?.token) {\n requestUrl.searchParams.set('version', siteVersion.version)\n requestHeaders.set('makeswift-preview-token', siteVersion.token)\n }\n\n if (init?.headers) {\n new Headers(init.headers).forEach((value, key) => {\n requestHeaders.set(key, value)\n })\n }\n\n try {\n return await this._fetch(requestUrl.toString(), {\n ...init,\n headers: requestHeaders,\n ...(siteVersion != null ? { cache: 'no-store' } : {}),\n })\n } catch (error) {\n if (error instanceof HTTPError) return error.response\n throw error\n }\n }\n}\n\n// This function attempts to consume the response body of a failed response, and\n// returns either the parsed JSON or raw text. This is useful for logging more\n// detailed error information when an API request fails.\n//\n// Cloudflare Worker Note: The Cloudflare Worker runtime has automatic deadlock\n// prevention (in the form of auto-cancelling responses) that triggers when too\n// many response bodies are unconsumed. This applies for error responses as\n// well. As such, in this client we use this function to consume the response\n// body whenever the request fails, even if we don't end up logging the body\n// itself, to avoid hitting the deadlock prevention.\nexport async function failedResponseBody(response: Response): Promise<unknown> {\n try {\n const text = await response.text()\n try {\n return JSON.parse(text)\n } catch {\n return text\n }\n } catch (e) {\n return `Failed to extract response body: ${e}`\n }\n}\n\nfunction responseError(response: Response): string {\n return `${response.status} ${response.statusText}`\n}\n\nexport class RestApiClientError extends Error {\n readonly status: number\n\n constructor(message: string, response: Response, cause: Record<string, unknown>) {\n super(`${message}: ${responseError(response)}`, { cause })\n\n this.name = 'RestApiClientError'\n this.status = response.status\n }\n}\n"],"mappings":"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","names":["ky"]}
1	+ {"version":3,"sources":["../../../src/api/rest-api-client.ts"],"sourcesContent":["import ky, { HTTPError, isHTTPError, type KyInstance } from './ky'\n\nimport {\n type File,\n type GlobalElement,\n type LocalizedGlobalElement,\n type PagePathnameSlice,\n type Swatch,\n type Table,\n type Typography,\n type HttpFetch,\n} from './types'\n\nimport { type SiteVersion } from './site-version'\nimport * as Schema from './schema'\n\nconst RetryBackoffConfig = {\n MaxAttempts: 3,\n MaxDelayMs: 5_000,\n}\n\nexport class MakeswiftRestAPIClient {\n private _fetch: KyInstance\n\n readonly apiKey: string\n readonly apiOrigin: string\n\n constructor({\n fetch,\n apiKey,\n apiOrigin,\n }: {\n fetch: HttpFetch\n apiKey: string\n apiOrigin: string\n }) {\n this._fetch = ky.create({\n fetch,\n timeout: false,\n retry: {\n statusCodes: [408, 429, 500, 502, 503, 504],\n limit: RetryBackoffConfig.MaxAttempts,\n backoffLimit: RetryBackoffConfig.MaxDelayMs,\n delay: attemptCount => 2 ** (attemptCount - 1) * 1000,\n jitter: true,\n },\n hooks: {\n beforeRetry: [\n async ({ request, error, retryCount }) => {\n console.warn(\n `Request to ${request.url} failed with ${error}. Retrying (${retryCount}/${RetryBackoffConfig.MaxAttempts})`,\n )\n // Drain the response body before retrying so we don't leak unconsumed\n // response bodies (see the comment on `failedResponseBody` below).\n if (isHTTPError(error)) await failedResponseBody(error.response)\n },\n ],\n },\n })\n\n this.apiKey = apiKey\n this.apiOrigin = apiOrigin\n }\n\n async getSwatch(swatchId: string, siteVersion: SiteVersion \| null): Promise<Swatch \| null> {\n const response = await this.fetch(`v3/swatches/${swatchId}`, siteVersion)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get swatch '${swatchId}'`, response, {\n body: failedBody,\n siteVersion,\n })\n }\n\n const swatch = await response.json()\n\n return swatch\n }\n\n async getFile(fileId: string): Promise<File \| null> {\n const response = await this.fetch(`v1/files/${fileId}`, null)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get file '${fileId}'`, response, {\n body: failedBody,\n })\n }\n\n const file = await response.json()\n\n return file\n }\n\n async getTypography(\n typographyId: string,\n siteVersion: SiteVersion \| null,\n ): Promise<Typography \| null> {\n const response = await this.fetch(`v3/typographies/${typographyId}`, siteVersion)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get typography '${typographyId}'`, response, {\n body: failedBody,\n siteVersion,\n })\n }\n\n const typography = await response.json()\n\n return typography\n }\n\n async getGlobalElement(\n globalElementId: string,\n siteVersion: SiteVersion \| null,\n ): Promise<GlobalElement \| null> {\n const response = await this.fetch(`v3/global-elements/${globalElementId}`, siteVersion)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get global element '${globalElementId}'`, response, {\n body: failedBody,\n siteVersion,\n })\n }\n\n const globalElement = await response.json()\n\n return globalElement\n }\n\n async getLocalizedGlobalElement(\n globalElementId: string,\n locale: string,\n siteVersion: SiteVersion \| null,\n ): Promise<LocalizedGlobalElement \| null> {\n const response = await this.fetch(\n `v3/localized-global-elements/${globalElementId}?locale=${locale}`,\n siteVersion,\n )\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(\n `Failed to get localized global element '${globalElementId}'`,\n response,\n { body: failedBody, siteVersion, locale },\n )\n }\n\n const localizedGlobalElement = await response.json()\n\n return localizedGlobalElement\n }\n\n async getTable(tableId: string): Promise<Table \| null> {\n const response = await this.fetch(`v1/tables/${tableId}`, null)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return null\n\n throw new RestApiClientError(`Failed to get table '${tableId}'`, response, {\n body: failedBody,\n })\n }\n\n const table = await response.json()\n\n return table\n }\n\n async getPagePathnameSlices(\n pageIds: string[],\n siteVersion: SiteVersion \| null,\n { locale }: { locale?: string \| null },\n ): Promise<(PagePathnameSlice \| null)[]> {\n if (pageIds.length === 0) return []\n\n const url = new URL(`v3/page-pathname-slices/bulk`, this.apiOrigin)\n\n pageIds.forEach(id => url.searchParams.append('ids', id))\n if (locale != null) url.searchParams.set('locale', locale)\n\n const response = await this.fetch(url.pathname + url.search, siteVersion)\n\n if (!response.ok) {\n const failedBody = await failedResponseBody(response)\n if (response.status === 404) return []\n\n throw new RestApiClientError(\n `Failed to get page pathname slice(s) for ${pageIds.join(', ')}`,\n response,\n { body: failedBody, siteVersion, locale },\n )\n }\n\n const json = await response.json()\n\n const pagePathnameSlices = Schema.pagePathnameSlices.parse(json)\n\n // We're mapping the basePageId to be the id, because we're still using the GraphQL\n // fragment as our APIResource. The id on the APIResource needs to match the pageId\n // so that we can find the corresponding page pathname slice when we call getPagePathnameSlice(pageId).\n // TODO: Update this once we move away from the GraphQL fragments.\n return pagePathnameSlices.map(pagePathnameSlice => {\n if (pagePathnameSlice == null) return null\n\n return {\n ...pagePathnameSlice,\n id: pagePathnameSlice.basePageId,\n localizedPathname: pagePathnameSlice.localizedPathname ?? null,\n }\n })\n }\n\n async getPagePathnameSlice(\n pageId: string,\n siteVersion: SiteVersion \| null,\n { locale }: { locale?: string \| null } = {},\n ): Promise<PagePathnameSlice \| null> {\n const pagePathnameSlices = await this.getPagePathnameSlices([pageId], siteVersion, { locale })\n\n return pagePathnameSlices.at(0) ?? null\n }\n\n protected async fetch(\n path: string,\n siteVersion: SiteVersion \| null,\n init?: RequestInit,\n ): Promise<Response> {\n const requestUrl = new URL(path, this.apiOrigin)\n\n const requestHeaders = new Headers({\n 'x-api-key': this.apiKey,\n 'makeswift-site-api-key': this.apiKey,\n 'makeswift-runtime-version': PACKAGE_VERSION,\n })\n\n if (siteVersion?.token) {\n requestUrl.searchParams.set('version', siteVersion.version)\n requestHeaders.set('makeswift-preview-token', siteVersion.token)\n }\n\n if (init?.headers) {\n new Headers(init.headers).forEach((value, key) => {\n requestHeaders.set(key, value)\n })\n }\n\n try {\n return await this._fetch(requestUrl.toString(), {\n ...init,\n headers: requestHeaders,\n ...(siteVersion != null ? { cache: 'no-store' } : {}),\n })\n } catch (error) {\n if (error instanceof HTTPError) return error.response\n throw error\n }\n }\n}\n\n// This function attempts to consume the response body of a failed response, and\n// returns either the parsed JSON or raw text. This is useful for logging more\n// detailed error information when an API request fails.\n//\n// Cloudflare Worker Note: The Cloudflare Worker runtime has automatic deadlock\n// prevention (in the form of auto-cancelling responses) that triggers when too\n// many response bodies are unconsumed. This applies for error responses as\n// well. As such, in this client we use this function to consume the response\n// body whenever the request fails, even if we don't end up logging the body\n// itself, to avoid hitting the deadlock prevention.\nexport async function failedResponseBody(response: Response): Promise<unknown> {\n try {\n const text = await response.text()\n try {\n return JSON.parse(text)\n } catch {\n return text\n }\n } catch (e) {\n return `Failed to extract response body: ${e}`\n }\n}\n\nfunction responseError(response: Response): string {\n return `${response.status} ${response.statusText}`\n}\n\nexport class RestApiClientError extends Error {\n readonly status: number\n\n constructor(message: string, response: Response, cause: Record<string, unknown>) {\n super(`${message}: ${responseError(response)}`, { cause })\n\n this.name = 'RestApiClientError'\n this.status = response.status\n }\n}\n"],"mappings":"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","names":["ky"]}

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.10-canary.9",
+    version: "0.29.0-canary.19",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/cjs/components/builtin/Box/Box.js CHANGED Viewed

@@ -34,7 +34,6 @@ __export(Box_exports, {
 module.exports = __toCommonJS(Box_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_css = require("@emotion/css");
 var import_uuid = require("uuid");
 var import_react2 = require("../../../runtimes/react");
 var import_Placeholder = __toESM(require("./components/Placeholder"));
@@ -43,7 +42,7 @@ var import_box_models = require("../../../state/modules/read-write/box-models");
 var import_BackgroundsContainer = __toESM(require("../../shared/BackgroundsContainer"));
 var import_responsive_style = require("../../utils/responsive-style");
 var import_grid_item = require("../../shared/grid-item");
-var import_use_style = require("../../../runtimes/react/use-style");
+var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
 const Box = (0, import_react.forwardRef)(function Box2({
   id,
   backgrounds,
@@ -69,7 +68,7 @@ const Box = (0, import_react.forwardRef)(function Box2({
 }, ref) {
   const innerRef = (0, import_react.useRef)(null);
   const boxElementObjectRef = (0, import_react.useRef)(null);
-  const [animationClassName, replayAnimation, setElement] = (0, import_animations.useBoxAnimation)(
+  const [animationClassName, animationStyle, replayAnimation, setElement] = (0, import_animations.useBoxAnimation)(
     boxAnimateType,
     boxAnimateDuration,
     boxAnimateDelay,
@@ -117,9 +116,10 @@ const Box = (0, import_react.forwardRef)(function Box2({
     }),
     []
   );
-  const gridItemClassName = (0, import_use_style.useStyle)(
-    (0, import_responsive_style.useResponsiveStyle)([verticalAlign], ([alignItems = "flex-start"]) => ({ alignItems }))
-  );
+  const gridItemCss = (0, import_responsive_style.useResponsiveStyle)([verticalAlign], ([alignItems = "flex-start"]) => ({
+    alignItems
+  }));
+  const { className: gridItemClassName, styleElement: gridItemStyleElement } = (0, import_use_style.useStyle)(gridItemCss);
   const [key, setKey] = (0, import_react.useState)(() => (0, import_uuid.v4)());
   const animationProps = {
     boxAnimateType,
@@ -138,55 +138,59 @@ const Box = (0, import_react.forwardRef)(function Box2({
       prevAnimationProps.current = animationProps;
     }
   }, [replayAnimation, animationProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_BackgroundsContainer.default,
-    {
-      ref: boxElementCallbackRef,
-      id,
-      className: (0, import_css.cx)(
-        width,
-        margin,
-        borderRadius,
-        (0, import_use_style.useStyle)({ display: "flex" }),
-        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveStyle)([height], ([alignSelf = "auto"]) => ({ alignSelf }))),
-        animationClassName
-      ),
-      backgrounds,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          ref: innerRef,
-          className: (0, import_css.cx)(
-            padding,
-            boxShadow,
-            border,
-            (0, import_use_style.useStyle)({ display: "flex", flexWrap: "wrap", width: "100%" }),
-            (0, import_use_style.useStyle)(
-              (0, import_responsive_style.useResponsiveStyle)([verticalAlign], ([alignContent = "flex-start"]) => ({
-                alignContent
-              }))
-            )
-          ),
-          children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_grid_item.GridItem,
-            {
-              className: gridItemClassName,
-              grid: children.columns,
-              index,
-              itemAnimateDuration,
-              itemAnimateDelay,
-              itemStaggerDuration,
-              columnGap,
-              rowGap,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Element, { element: child })
-            },
-            child.key
-          )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Placeholder.default, { hide: hidePlaceholder })
-        },
-        key
-      )
-    }
+  const containerStyles = (0, import_use_style.composeStyles)(
+    width,
+    margin,
+    borderRadius,
+    (0, import_use_style.useStyle)({ display: "flex" }),
+    (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveStyle)([height], ([alignSelf = "auto"]) => ({ alignSelf }))),
+    animationClassName
   );
+  const innerStyles = (0, import_use_style.composeStyles)(
+    padding,
+    boxShadow,
+    border,
+    (0, import_use_style.useStyle)({ display: "flex", flexWrap: "wrap", width: "100%" }),
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)([verticalAlign], ([alignContent = "flex-start"]) => ({
+        alignContent
+      }))
+    )
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    containerStyles.styleElements,
+    animationStyle,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_BackgroundsContainer.default,
+      {
+        ref: boxElementCallbackRef,
+        id,
+        className: containerStyles.className,
+        backgrounds,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          innerStyles.styleElements,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: innerRef, className: innerStyles.className, children: children && children.elements.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            gridItemStyleElement,
+            children.elements.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_grid_item.GridItem,
+              {
+                className: gridItemClassName,
+                grid: children.columns,
+                index,
+                itemAnimateDuration,
+                itemAnimateDelay,
+                itemStaggerDuration,
+                columnGap,
+                rowGap,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Element, { element: child })
+              },
+              child.key
+            ))
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Placeholder.default, { hide: hidePlaceholder }) }, key)
+        ] })
+      }
+    )
+  ] });
 });
 var Box_default = Box;
 //# sourceMappingURL=Box.js.map

package/dist/cjs/components/builtin/Box/Box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Box/Box.tsx"],"sourcesContent":["'use client'\n\nimport {\n forwardRef,\n Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n parse,\n createBox,\n isElementVisible,\n type BoxModelHandle,\n} from '../../../state/modules/read-write/box-models'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport {\n type GridData,\n type ResponsiveBackgroundsData,\n type ResponsiveGapData,\n type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\n\ntype Props = {\n id?: string\n backgrounds?: ResponsiveBackgroundsData\n width?: string\n height?: ResponsiveIconRadioGroupValue<'auto' \| 'stretch'>\n verticalAlign?: ResponsiveIconRadioGroupValue<\n 'flex-start' \| 'center' \| 'flex-end' \| 'space-between'\n >\n margin?: string\n padding?: string\n border?: string\n borderRadius?: string\n boxShadow?: string\n rowGap?: ResponsiveGapData\n columnGap?: ResponsiveGapData\n hidePlaceholder?: boolean\n children?: GridData\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n {\n id,\n backgrounds,\n width,\n height,\n margin,\n padding,\n border,\n children,\n borderRadius,\n boxShadow,\n rowGap,\n columnGap,\n hidePlaceholder,\n verticalAlign,\n boxAnimateType,\n boxAnimateDuration,\n boxAnimateDelay,\n itemAnimateDelay,\n itemAnimateType,\n itemAnimateDuration,\n itemStaggerDuration,\n }: Props,\n ref: Ref<BoxModelHandle>,\n) {\n const innerRef = useRef<HTMLDivElement \| null>(null)\n const boxElementObjectRef = useRef<HTMLElement \| null>(null)\n const [animationClassName, replayAnimation, setElement] = useBoxAnimation(\n boxAnimateType,\n boxAnimateDuration,\n boxAnimateDelay,\n itemAnimateType,\n )\n const boxElementCallbackRef = useCallback((current: HTMLElement \| null) => {\n boxElementObjectRef.current = current\n\n setElement(current)\n }, [])\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return boxElementObjectRef.current\n },\n getBoxModel() {\n const paddingBoxElement = innerRef.current\n const borderBoxElement = innerRef.current\n const marginBoxElement = boxElementObjectRef.current\n const borderBox = innerRef.current?.getBoundingClientRect()\n const paddingBoxComputedStyle =\n paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n const borderBoxComputedStyle =\n borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n const marginBoxComputedStyle =\n marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n const padding = paddingBoxComputedStyle && {\n top: parse(paddingBoxComputedStyle.paddingTop),\n right: parse(paddingBoxComputedStyle.paddingRight),\n bottom: parse(paddingBoxComputedStyle.paddingBottom),\n left: parse(paddingBoxComputedStyle.paddingLeft),\n }\n const border = borderBoxComputedStyle && {\n top: parse(borderBoxComputedStyle.borderTopWidth),\n right: parse(borderBoxComputedStyle.borderRightWidth),\n bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n left: parse(borderBoxComputedStyle.borderLeftWidth),\n }\n const margin = marginBoxComputedStyle && {\n top: parse(marginBoxComputedStyle.marginTop),\n right: parse(marginBoxComputedStyle.marginRight),\n bottom: parse(marginBoxComputedStyle.marginBottom),\n left: parse(marginBoxComputedStyle.marginLeft),\n }\n\n const visible = marginBoxElement ? isElementVisible(marginBoxElement) : undefined\n\n return borderBox ? createBox({ borderBox, padding, border, margin, visible }) : null\n },\n }),\n [],\n )\n\n const gridItemClassName = useStyle(\n useResponsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n )\n\n const [key, setKey] = useState(() => uuid())\n\n const animationProps = {\n boxAnimateType,\n boxAnimateDuration,\n boxAnimateDelay,\n itemAnimateType,\n itemAnimateDuration,\n itemAnimateDelay,\n itemStaggerDuration,\n }\n\n const prevAnimationProps = useRef(animationProps)\n useEffect(() => {\n if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n replayAnimation()\n setKey(uuid())\n prevAnimationProps.current = animationProps\n }\n }, [replayAnimation, animationProps])\n\n return (\n <BackgroundsContainer\n ref={boxElementCallbackRef}\n id={id}\n className={cx(\n width,\n margin,\n borderRadius,\n useStyle({ display: 'flex' }),\n useStyle(useResponsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n animationClassName,\n )}\n backgrounds={backgrounds}\n >\n <div\n ref={innerRef}\n key={key}\n className={cx(\n padding,\n boxShadow,\n border,\n useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n useStyle(\n useResponsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({\n alignContent,\n })),\n ),\n )}\n >\n {children && children.elements.length > 0 ? (\n children.elements.map((child, index) => (\n <GridItem\n key={child.key}\n className={gridItemClassName}\n grid={children.columns}\n index={index}\n itemAnimateDuration={itemAnimateDuration}\n itemAnimateDelay={itemAnimateDelay}\n itemStaggerDuration={itemStaggerDuration}\n columnGap={columnGap}\n rowGap={rowGap}\n >\n <Element element={child} />\n </GridItem>\n ))\n ) : (\n <Placeholder hide={hidePlaceholder} />\n )}\n </div>\n </BackgroundsContainer>\n )\n})\n\nexport default Box\n"],"mappings":"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","names":["import_react","Box","padding","border","margin","uuid","BackgroundsContainer","Placeholder"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Box/Box.tsx"],"sourcesContent":["'use client'\n\nimport {\n forwardRef,\n Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n parse,\n createBox,\n isElementVisible,\n type BoxModelHandle,\n} from '../../../state/modules/read-write/box-models'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport {\n type GridData,\n type ResponsiveBackgroundsData,\n type ResponsiveGapData,\n type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n id?: string\n backgrounds?: ResponsiveBackgroundsData\n width?: string\n height?: ResponsiveIconRadioGroupValue<'auto' \| 'stretch'>\n verticalAlign?: ResponsiveIconRadioGroupValue<\n 'flex-start' \| 'center' \| 'flex-end' \| 'space-between'\n >\n margin?: string\n padding?: string\n border?: string\n borderRadius?: string\n boxShadow?: string\n rowGap?: ResponsiveGapData\n columnGap?: ResponsiveGapData\n hidePlaceholder?: boolean\n children?: GridData\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n {\n id,\n backgrounds,\n width,\n height,\n margin,\n padding,\n border,\n children,\n borderRadius,\n boxShadow,\n rowGap,\n columnGap,\n hidePlaceholder,\n verticalAlign,\n boxAnimateType,\n boxAnimateDuration,\n boxAnimateDelay,\n itemAnimateDelay,\n itemAnimateType,\n itemAnimateDuration,\n itemStaggerDuration,\n }: Props,\n ref: Ref<BoxModelHandle>,\n) {\n const innerRef = useRef<HTMLDivElement \| null>(null)\n const boxElementObjectRef = useRef<HTMLElement \| null>(null)\n const [animationClassName, animationStyle, replayAnimation, setElement] = useBoxAnimation(\n boxAnimateType,\n boxAnimateDuration,\n boxAnimateDelay,\n itemAnimateType,\n )\n const boxElementCallbackRef = useCallback((current: HTMLElement \| null) => {\n boxElementObjectRef.current = current\n\n setElement(current)\n }, [])\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return boxElementObjectRef.current\n },\n getBoxModel() {\n const paddingBoxElement = innerRef.current\n const borderBoxElement = innerRef.current\n const marginBoxElement = boxElementObjectRef.current\n const borderBox = innerRef.current?.getBoundingClientRect()\n const paddingBoxComputedStyle =\n paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n const borderBoxComputedStyle =\n borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n const marginBoxComputedStyle =\n marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n const padding = paddingBoxComputedStyle && {\n top: parse(paddingBoxComputedStyle.paddingTop),\n right: parse(paddingBoxComputedStyle.paddingRight),\n bottom: parse(paddingBoxComputedStyle.paddingBottom),\n left: parse(paddingBoxComputedStyle.paddingLeft),\n }\n const border = borderBoxComputedStyle && {\n top: parse(borderBoxComputedStyle.borderTopWidth),\n right: parse(borderBoxComputedStyle.borderRightWidth),\n bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n left: parse(borderBoxComputedStyle.borderLeftWidth),\n }\n const margin = marginBoxComputedStyle && {\n top: parse(marginBoxComputedStyle.marginTop),\n right: parse(marginBoxComputedStyle.marginRight),\n bottom: parse(marginBoxComputedStyle.marginBottom),\n left: parse(marginBoxComputedStyle.marginLeft),\n }\n\n const visible = marginBoxElement ? isElementVisible(marginBoxElement) : undefined\n\n return borderBox ? createBox({ borderBox, padding, border, margin, visible }) : null\n },\n }),\n [],\n )\n\n const gridItemCss = useResponsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({\n alignItems,\n }))\n const { className: gridItemClassName, styleElement: gridItemStyleElement } = useStyle(gridItemCss)\n\n const [key, setKey] = useState(() => uuid())\n\n const animationProps = {\n boxAnimateType,\n boxAnimateDuration,\n boxAnimateDelay,\n itemAnimateType,\n itemAnimateDuration,\n itemAnimateDelay,\n itemStaggerDuration,\n }\n\n const prevAnimationProps = useRef(animationProps)\n useEffect(() => {\n if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n replayAnimation()\n setKey(uuid())\n prevAnimationProps.current = animationProps\n }\n }, [replayAnimation, animationProps])\n\n const containerStyles = composeStyles(\n width,\n margin,\n borderRadius,\n useStyle({ display: 'flex' }),\n useStyle(useResponsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n animationClassName,\n )\n\n const innerStyles = composeStyles(\n padding,\n boxShadow,\n border,\n useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n useStyle(\n useResponsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({\n alignContent,\n })),\n ),\n )\n\n return (\n <>\n {containerStyles.styleElements}\n {animationStyle}\n <BackgroundsContainer\n ref={boxElementCallbackRef}\n id={id}\n className={containerStyles.className}\n backgrounds={backgrounds}\n >\n <>\n {innerStyles.styleElements}\n <div ref={innerRef} key={key} className={innerStyles.className}>\n {children && children.elements.length > 0 ? (\n <>\n {gridItemStyleElement}\n {children.elements.map((child, index) => (\n <GridItem\n key={child.key}\n className={gridItemClassName}\n grid={children.columns}\n index={index}\n itemAnimateDuration={itemAnimateDuration}\n itemAnimateDelay={itemAnimateDelay}\n itemStaggerDuration={itemStaggerDuration}\n columnGap={columnGap}\n rowGap={rowGap}\n >\n <Element element={child} />\n </GridItem>\n ))}\n </>\n ) : (\n <Placeholder hide={hidePlaceholder} />\n )}\n </div>\n </>\n </BackgroundsContainer>\n </>\n )\n})\n\nexport default Box\n"],"mappings":"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","names":["import_react","Box","padding","border","margin","uuid","BackgroundsContainer","Placeholder"]}

package/dist/cjs/components/builtin/Box/animations.js CHANGED Viewed

@@ -25,10 +25,10 @@ __export(animations_exports, {
 });
 module.exports = __toCommonJS(animations_exports);
 var import_react = require("react");
-var import_use_style = require("../../../runtimes/react/use-style");
 var import_hooks = require("../../hooks");
 var import_grid_item = require("../../shared/grid-item");
 var import_constants = require("./constants");
+var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
 function useElementOnScreen(options) {
   const [isVisible, setIsVisible] = (0, import_react.useState)(false);
   const intersectionObserverRef = (0, import_react.useRef)(null);
@@ -138,13 +138,10 @@ function useBoxAnimation(responsiveAnimationType, responsiveDuration, responisve
   const replayAnimation = (0, import_react.useCallback)(() => {
     setEntered(false);
   }, []);
-  return [
-    (0, import_use_style.useStyle)({
-      "@media (prefers-reduced-motion: no-preference)": isEntered ? entered : exited
-    }),
-    replayAnimation,
-    setElement
-  ];
+  const { className: animationClassName, styleElement: animationStyleElement } = (0, import_use_style.useStyle)({
+    "@media (prefers-reduced-motion: no-preference)": isEntered ? entered : exited
+  });
+  return [animationClassName, animationStyleElement, replayAnimation, setElement];
 }
 function useItemAnimation(responsiveDuration, responisveDelay, responsiveStagger, index) {
   const duration = (0, import_hooks.useMediaQuery)(responsiveDuration) || import_constants.DEFAULT_BOX_ANIMATE_DURATION;
@@ -153,11 +150,12 @@ function useItemAnimation(responsiveDuration, responisveDelay, responsiveStagger
   const delayFromStagger = responsiveStagger == null || index == null ? 0 : stagger * index;
   const actualDelay = (delay + delayFromStagger) * 1e3;
   const actualDuration = duration * 1e3;
-  return (0, import_use_style.useStyle)({
+  const { className, styleElement } = (0, import_use_style.useStyle)({
     "@media (prefers-reduced-motion: no-preference)": {
       transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`
     }
   });
+  return [className, styleElement];
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/builtin/Box/animations.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Box/animations.tsx"],"sourcesContent":["'use client'\n\nimport { type CSSObject } from '@emotion/serialize'\nimport { useState, useEffect, useCallback, useRef } from 'react'\nimport { type ResponsiveValue } from '@makeswift/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useMediaQuery } from '../../hooks'\nimport { gridItemIdentifierClassName } from '../../shared/grid-item'\nimport {\n BoxAnimateIn,\n DEFAULT_BOX_ANIMATE_DELAY,\n DEFAULT_BOX_ANIMATE_DURATION,\n DEFAULT_BOX_ANIMATE_TYPE,\n DEFAULT_ITEM_ANIMATE_TYPE,\n DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { type ResponsiveNumberValue, type ResponsiveSelectValue } from '@makeswift/prop-controllers'\n\nfunction useElementOnScreen(\n options: IntersectionObserverInit,\n): [boolean, (element: HTMLElement \| null) => void] {\n const [isVisible, setIsVisible] = useState(false)\n const intersectionObserverRef = useRef<IntersectionObserver \| null>(null)\n\n const setElement = useCallback((element: HTMLElement \| null) => {\n if (element != null) {\n const observer = new IntersectionObserver(([entry]) => {\n if (entry?.isIntersecting) setIsVisible(true)\n }, options)\n\n observer.observe(element)\n\n intersectionObserverRef.current = observer\n } else {\n intersectionObserverRef.current?.disconnect()\n\n intersectionObserverRef.current = null\n }\n }, [])\n\n return [isVisible, setElement]\n}\n\nexport type BoxAnimationProps = {\n boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n boxAnimateDuration?: ResponsiveNumberValue\n boxAnimateDelay?: ResponsiveNumberValue\n itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n itemAnimateDuration?: ResponsiveNumberValue\n itemAnimateDelay?: ResponsiveNumberValue\n itemStaggerDuration?: ResponsiveNumberValue\n}\n\nfunction compareResponsiveValues<T>(a?: ResponsiveValue<T>, b?: ResponsiveValue<T>) {\n if (a == null && b == null) {\n return true\n }\n if (a != null && b != null) {\n let isEqual = true\n a.forEach((currentA, index) => {\n const currentB = b.at(index)\n if (currentB == null) {\n isEqual = false\n return\n }\n\n if (currentA.deviceId != currentB?.deviceId \|\| currentA.value != currentB.value) {\n isEqual = false\n }\n })\n return isEqual\n }\n\n return false\n}\n\nexport function areBoxAnimationPropsEqual(prevProps: BoxAnimationProps, props: BoxAnimationProps) {\n return (\n compareResponsiveValues(prevProps.boxAnimateType, props.boxAnimateType) &&\n compareResponsiveValues(prevProps.boxAnimateDuration, props.boxAnimateDuration) &&\n compareResponsiveValues(prevProps.boxAnimateDelay, props.boxAnimateDelay) &&\n compareResponsiveValues(prevProps.itemAnimateType, props.itemAnimateType) &&\n compareResponsiveValues(prevProps.itemAnimateDuration, props.itemAnimateDuration) &&\n compareResponsiveValues(prevProps.itemAnimateDelay, props.itemAnimateDelay) &&\n compareResponsiveValues(prevProps.itemStaggerDuration, props.itemStaggerDuration)\n )\n}\n\nconst exitedBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n none: { opacity: 1 },\n fadeIn: { opacity: 0 },\n fadeLeft: { transform: 'translate3d(60px,0,0)', opacity: 0 },\n fadeRight: { transform: 'translate3d(-60px,0,0)', opacity: 0 },\n fadeDown: { transform: 'translate3d(0,-80px,0)', opacity: 0 },\n fadeUp: { transform: 'translate3d(0,80px,0)', opacity: 0 },\n blurIn: { filter: 'blur(20px)', opacity: 0 },\n scaleDown: {\n transform: 'scale(1.2)',\n opacity: 0,\n },\n scaleUp: {\n transform: 'scale(.75)',\n opacity: 0,\n },\n}\n\nconst enteredBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n none: { opacity: 1 },\n fadeIn: { opacity: 1 },\n fadeLeft: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n fadeRight: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n fadeDown: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n fadeUp: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n blurIn: { filter: 'blur(0px)', opacity: 1 },\n scaleDown: {\n transform: 'scale(1)',\n opacity: 1,\n },\n scaleUp: {\n transform: 'scale(1)',\n opacity: 1,\n },\n}\n\nexport function useBoxAnimation(\n responsiveAnimationType: ResponsiveValue<BoxAnimateIn> \| undefined,\n responsiveDuration: ResponsiveValue<number> \| undefined,\n responisveDelay: ResponsiveValue<number> \| undefined,\n itemResponsiveAnimationType: ResponsiveValue<BoxAnimateIn> \| undefined,\n): [string, () => void, (element: HTMLElement \| null) => void] {\n const [isVisible, setElement] = useElementOnScreen({\n root: null,\n rootMargin: `0px 0px -10% 0px`,\n threshold: 0.2,\n })\n const animationType = useMediaQuery(responsiveAnimationType) \|\| DEFAULT_BOX_ANIMATE_TYPE\n const itemAnimationType = useMediaQuery(itemResponsiveAnimationType) \|\| DEFAULT_ITEM_ANIMATE_TYPE\n const duration = useMediaQuery(responsiveDuration) \|\| DEFAULT_BOX_ANIMATE_DURATION\n const delay = useMediaQuery(responisveDelay) \|\| DEFAULT_BOX_ANIMATE_DELAY\n const actualDelay = delay * 1000\n const actualDuration = duration * 1000\n\n const entered = {\n ...enteredBoxAnimationProperties[animationType],\n transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n [`& > div > .${gridItemIdentifierClassName}`]: {\n ...enteredBoxAnimationProperties[itemAnimationType],\n },\n }\n\n const exited = {\n ...exitedBoxAnimationProperties[animationType],\n transition: `all 0ms`,\n [`& > div > .${gridItemIdentifierClassName}`]: {\n ...exitedBoxAnimationProperties[itemAnimationType],\n },\n }\n\n const [isEntered, setEntered] = useState(false)\n\n useEffect(() => {\n if (isVisible && !isEntered) setEntered(true)\n }, [isVisible, entered])\n\n const replayAnimation = useCallback(() => {\n setEntered(false)\n }, [])\n\n return [\n useStyle({\n '@media (prefers-reduced-motion: no-preference)': isEntered ? entered : exited,\n }),\n replayAnimation,\n setElement,\n ]\n}\n\nexport function useItemAnimation(\n responsiveDuration: ResponsiveValue<number> \| undefined,\n responisveDelay: ResponsiveValue<number> \| undefined,\n responsiveStagger: ResponsiveValue<number> \| undefined,\n index: number,\n) {\n const duration = useMediaQuery(responsiveDuration) \|\| DEFAULT_BOX_ANIMATE_DURATION\n const delay = useMediaQuery(responisveDelay) \|\| DEFAULT_BOX_ANIMATE_DELAY\n const stagger = useMediaQuery(responsiveStagger) \|\| DEFAULT_ITEM_STAGGER_DURATION\n const delayFromStagger = responsiveStagger == null \|\| index == null ? 0 : stagger * index\n const actualDelay = (delay + delayFromStagger) * 1000\n const actualDuration = duration * 1000\n\n return useStyle({\n '@media (prefers-reduced-motion: no-preference)': {\n transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n },\n })\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Box/animations.tsx"],"sourcesContent":["'use client'\n\nimport { type CSSObject } from '@emotion/serialize'\nimport React, { useState, useEffect, useCallback, useRef } from 'react'\nimport { type ResponsiveValue } from '@makeswift/controls'\nimport { useMediaQuery } from '../../hooks'\nimport { gridItemIdentifierClassName } from '../../shared/grid-item'\nimport {\n BoxAnimateIn,\n DEFAULT_BOX_ANIMATE_DELAY,\n DEFAULT_BOX_ANIMATE_DURATION,\n DEFAULT_BOX_ANIMATE_TYPE,\n DEFAULT_ITEM_ANIMATE_TYPE,\n DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { type ResponsiveNumberValue, type ResponsiveSelectValue } from '@makeswift/prop-controllers'\nimport { useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\nfunction useElementOnScreen(\n options: IntersectionObserverInit,\n): [boolean, (element: HTMLElement \| null) => void] {\n const [isVisible, setIsVisible] = useState(false)\n const intersectionObserverRef = useRef<IntersectionObserver \| null>(null)\n\n const setElement = useCallback((element: HTMLElement \| null) => {\n if (element != null) {\n const observer = new IntersectionObserver(([entry]) => {\n if (entry?.isIntersecting) setIsVisible(true)\n }, options)\n\n observer.observe(element)\n\n intersectionObserverRef.current = observer\n } else {\n intersectionObserverRef.current?.disconnect()\n\n intersectionObserverRef.current = null\n }\n }, [])\n\n return [isVisible, setElement]\n}\n\nexport type BoxAnimationProps = {\n boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n boxAnimateDuration?: ResponsiveNumberValue\n boxAnimateDelay?: ResponsiveNumberValue\n itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n itemAnimateDuration?: ResponsiveNumberValue\n itemAnimateDelay?: ResponsiveNumberValue\n itemStaggerDuration?: ResponsiveNumberValue\n}\n\nfunction compareResponsiveValues<T>(a?: ResponsiveValue<T>, b?: ResponsiveValue<T>) {\n if (a == null && b == null) {\n return true\n }\n if (a != null && b != null) {\n let isEqual = true\n a.forEach((currentA, index) => {\n const currentB = b.at(index)\n if (currentB == null) {\n isEqual = false\n return\n }\n\n if (currentA.deviceId != currentB?.deviceId \|\| currentA.value != currentB.value) {\n isEqual = false\n }\n })\n return isEqual\n }\n\n return false\n}\n\nexport function areBoxAnimationPropsEqual(prevProps: BoxAnimationProps, props: BoxAnimationProps) {\n return (\n compareResponsiveValues(prevProps.boxAnimateType, props.boxAnimateType) &&\n compareResponsiveValues(prevProps.boxAnimateDuration, props.boxAnimateDuration) &&\n compareResponsiveValues(prevProps.boxAnimateDelay, props.boxAnimateDelay) &&\n compareResponsiveValues(prevProps.itemAnimateType, props.itemAnimateType) &&\n compareResponsiveValues(prevProps.itemAnimateDuration, props.itemAnimateDuration) &&\n compareResponsiveValues(prevProps.itemAnimateDelay, props.itemAnimateDelay) &&\n compareResponsiveValues(prevProps.itemStaggerDuration, props.itemStaggerDuration)\n )\n}\n\nconst exitedBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n none: { opacity: 1 },\n fadeIn: { opacity: 0 },\n fadeLeft: { transform: 'translate3d(60px,0,0)', opacity: 0 },\n fadeRight: { transform: 'translate3d(-60px,0,0)', opacity: 0 },\n fadeDown: { transform: 'translate3d(0,-80px,0)', opacity: 0 },\n fadeUp: { transform: 'translate3d(0,80px,0)', opacity: 0 },\n blurIn: { filter: 'blur(20px)', opacity: 0 },\n scaleDown: {\n transform: 'scale(1.2)',\n opacity: 0,\n },\n scaleUp: {\n transform: 'scale(.75)',\n opacity: 0,\n },\n}\n\nconst enteredBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n none: { opacity: 1 },\n fadeIn: { opacity: 1 },\n fadeLeft: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n fadeRight: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n fadeDown: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n fadeUp: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n blurIn: { filter: 'blur(0px)', opacity: 1 },\n scaleDown: {\n transform: 'scale(1)',\n opacity: 1,\n },\n scaleUp: {\n transform: 'scale(1)',\n opacity: 1,\n },\n}\n\nexport function useBoxAnimation(\n responsiveAnimationType: ResponsiveValue<BoxAnimateIn> \| undefined,\n responsiveDuration: ResponsiveValue<number> \| undefined,\n responisveDelay: ResponsiveValue<number> \| undefined,\n itemResponsiveAnimationType: ResponsiveValue<BoxAnimateIn> \| undefined,\n): [string, React.ReactNode, () => void, (element: HTMLElement \| null) => void] {\n const [isVisible, setElement] = useElementOnScreen({\n root: null,\n rootMargin: `0px 0px -10% 0px`,\n threshold: 0.2,\n })\n const animationType = useMediaQuery(responsiveAnimationType) \|\| DEFAULT_BOX_ANIMATE_TYPE\n const itemAnimationType = useMediaQuery(itemResponsiveAnimationType) \|\| DEFAULT_ITEM_ANIMATE_TYPE\n const duration = useMediaQuery(responsiveDuration) \|\| DEFAULT_BOX_ANIMATE_DURATION\n const delay = useMediaQuery(responisveDelay) \|\| DEFAULT_BOX_ANIMATE_DELAY\n const actualDelay = delay * 1000\n const actualDuration = duration * 1000\n\n const entered = {\n ...enteredBoxAnimationProperties[animationType],\n transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n [`& > div > .${gridItemIdentifierClassName}`]: {\n ...enteredBoxAnimationProperties[itemAnimationType],\n },\n }\n\n const exited = {\n ...exitedBoxAnimationProperties[animationType],\n transition: `all 0ms`,\n [`& > div > .${gridItemIdentifierClassName}`]: {\n ...exitedBoxAnimationProperties[itemAnimationType],\n },\n }\n\n const [isEntered, setEntered] = useState(false)\n\n useEffect(() => {\n if (isVisible && !isEntered) setEntered(true)\n }, [isVisible, entered])\n\n const replayAnimation = useCallback(() => {\n setEntered(false)\n }, [])\n\n const { className: animationClassName, styleElement: animationStyleElement } = useStyle({\n '@media (prefers-reduced-motion: no-preference)': isEntered ? entered : exited,\n })\n\n return [animationClassName, animationStyleElement, replayAnimation, setElement]\n}\n\nexport function useItemAnimation(\n responsiveDuration: ResponsiveValue<number> \| undefined,\n responisveDelay: ResponsiveValue<number> \| undefined,\n responsiveStagger: ResponsiveValue<number> \| undefined,\n index: number,\n): [string, React.ReactNode] {\n const duration = useMediaQuery(responsiveDuration) \|\| DEFAULT_BOX_ANIMATE_DURATION\n const delay = useMediaQuery(responisveDelay) \|\| DEFAULT_BOX_ANIMATE_DELAY\n const stagger = useMediaQuery(responsiveStagger) \|\| DEFAULT_ITEM_STAGGER_DURATION\n const delayFromStagger = responsiveStagger == null \|\| index == null ? 0 : stagger * index\n const actualDelay = (delay + delayFromStagger) * 1000\n const actualDuration = duration * 1000\n\n const { className, styleElement } = useStyle({\n '@media (prefers-reduced-motion: no-preference)': {\n transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n },\n })\n\n return [className, styleElement]\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/components/builtin/Box/components/Placeholder/index.js CHANGED Viewed

@@ -23,45 +23,49 @@ __export(Placeholder_exports, {
 module.exports = __toCommonJS(Placeholder_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_use_style = require("../../../../../runtimes/react/use-style");
+var import_use_style = require("../../../../../runtimes/react/css-runtime/hooks/use-style");
 var Placeholder_default = (0, import_react.forwardRef)(function Placeholder({ hide = false, ...restOfProps }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...restOfProps,
-      ref,
-      style: { visibility: hide ? "hidden" : "initial" },
-      className: (0, import_use_style.useStyle)({
-        width: "100%",
-        background: "rgba(161, 168, 194, 0.18)",
-        height: 80,
-        padding: 8
-      }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "100%",
-          height: "100%",
-          style: { overflow: "visible" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "rect",
-            {
-              x: 0,
-              y: 0,
-              width: "100%",
-              height: "100%",
-              strokeWidth: 2,
-              strokeDasharray: "4 2",
-              fill: "none",
-              stroke: "rgba(161, 168, 194, 0.40)",
-              rx: "4",
-              ry: "4"
-            }
-          )
-        }
-      )
-    }
-  );
+  const { className, styleElement } = (0, import_use_style.useStyle)({
+    width: "100%",
+    background: "rgba(161, 168, 194, 0.18)",
+    height: 80,
+    padding: 8
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...restOfProps,
+        ref,
+        style: { visibility: hide ? "hidden" : "initial" },
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "100%",
+            height: "100%",
+            style: { overflow: "visible" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "rect",
+              {
+                x: 0,
+                y: 0,
+                width: "100%",
+                height: "100%",
+                strokeWidth: 2,
+                strokeDasharray: "4 2",
+                fill: "none",
+                stroke: "rgba(161, 168, 194, 0.40)",
+                rx: "4",
+                ry: "4"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Box/components/Placeholder/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../src/components/builtin/Box/components/Placeholder/index.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n { hide = false, ...restOfProps }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n ~~return~~ ~~(\n <div\n~~ {~~...restOfProps}\n ref={ref}\n style={{~~ ~~visibility:~~ ~~hide~~ ? ~~'hidden'~~ ~~: 'initial' }}\n className={~~useStyle({\n width: '100%',\n background: 'rgba(161, 168, 194, 0.18)',\n height: 80,\n padding: 8,\n })}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n height=\"100%\"\n style={{ overflow: 'visible' }}\n >\n <rect\n x={0}\n y={0}\n width=\"100%\"\n height=\"100%\"\n strokeWidth={2}\n strokeDasharray=\"4 2\"\n fill=\"none\"\n stroke=\"rgba(161, 168, 194, 0.40)\"\n rx=\"4\"\n ry=\"4\"\n />\n </svg>\n </div>\n )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;~~AA2BQ~~;~~AA3BR~~,mBAAgC;AAChC,uBAAyB;AAIzB,IAAO,0BAAQ,yBAAW,SAAS,YACjC,EAAE,OAAO,OAAO,GAAG,YAAY,GAC/B,KACA;AACA,~~SACE~~;AAAA,~~IAAC~~;AAAA;AAAA,~~MACE~~,~~GAAG~~;AAAA,~~MACJ~~;AAAA,~~MACA~~,~~OAAO~~,~~EAAE~~,~~YAAY~~,~~OAAO~~,~~WAAW,UAAU~~;AAAA,~~MACjD~~,~~eAAW~~,~~2BAAS~~;AAAA,~~QAClB~~,OAAO~~;AAAA~~,~~QACP~~,YAAY~~;AAAA~~,~~QACZ~~,~~QAAQ;AAAA~~,~~QACR,SAAS~~;AAAA,~~MACX,CAAC~~;AAAA,~~MAED~~;AAAA,~~QAAC~~;AAAA;AAAA,~~UACC~~,OAAM;AAAA,~~UACN~~,OAAM;AAAA,~~UACN~~,QAAO;AAAA,~~UACP~~,OAAO,EAAE,UAAU,UAAU;AAAA,~~UAE7B~~;AAAA,~~YAAC~~;AAAA;AAAA,~~cACC~~,GAAG;AAAA,~~cACH~~,GAAG;AAAA,~~cACH~~,OAAM;AAAA,~~cACN~~,QAAO;AAAA,~~cACP~~,aAAa;AAAA,~~cACb~~,iBAAgB;AAAA,~~cAChB~~,MAAK;AAAA,~~cACL~~,QAAO;AAAA,~~cACP~~,IAAG;AAAA,~~cACH~~,IAAG;AAAA;AAAA,~~UACL~~;AAAA;AAAA,~~MACF~~;AAAA;AAAA,~~EACF~~;AAEJ,CAAC;","names":[]}
1	+ {"version":3,"sources":["../../../../../../../src/components/builtin/Box/components/Placeholder/index.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n { hide = false, ...restOfProps }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n const { className, styleElement } = useStyle({\n width: '100%',\n background: 'rgba(161, 168, 194, 0.18)',\n height: 80,\n padding: 8,\n })\n return (\n <>\n {styleElement}\n <div\n {...restOfProps}\n ref={ref}\n style={{ visibility: hide ? 'hidden' : 'initial' }}\n className={className}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n height=\"100%\"\n style={{ overflow: 'visible' }}\n >\n <rect\n x={0}\n y={0}\n width=\"100%\"\n height=\"100%\"\n strokeWidth={2}\n strokeDasharray=\"4 2\"\n fill=\"none\"\n stroke=\"rgba(161, 168, 194, 0.40)\"\n rx=\"4\"\n ry=\"4\"\n />\n </svg>\n </div>\n </>\n )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBI;AAhBJ,mBAAgC;AAChC,uBAAyB;AAIzB,IAAO,0BAAQ,yBAAW,SAAS,YACjC,EAAE,OAAO,OAAO,GAAG,YAAY,GAC/B,KACA;AACA,QAAM,EAAE,WAAW,aAAa,QAAI,2BAAS;AAAA,IAC3C,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,CAAC;AACD,SACE,4EACG;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,OAAO,EAAE,YAAY,OAAO,WAAW,UAAU;AAAA,QACjD;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,YACP,OAAO,EAAE,UAAU,UAAU;AAAA,YAE7B;AAAA,cAAC;AAAA;AAAA,gBACC,GAAG;AAAA,gBACH,GAAG;AAAA,gBACH,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,IAAG;AAAA,gBACH,IAAG;AAAA;AAAA,YACL;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":[]}