@webstudio-is/react-sdk 0.64.0 → 0.66.0

package/lib/components/superscript.ws.js

@@ -1,4 +1,4 @@
-import { SuperscriptIcon } from "@webstudio-is/icons";
+import { SuperscriptIcon } from "@webstudio-is/icons/svg";
 import { sup } from "../css/normalize";
 import {
   defaultStates
@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
-  Icon: SuperscriptIcon,
+  icon: SuperscriptIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/text-block.ws.js

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -17,7 +17,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Text Block",
-  Icon: TextBlockIcon,
+  icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Block of text you can edit" }]

package/lib/components/textarea.ws.js

@@ -1,4 +1,4 @@
-import { FormTextAreaIcon } from "@webstudio-is/icons";
+import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
 import { textarea } from "../css/normalize";
 import {
   defaultStates
@@ -15,7 +15,7 @@ const meta = {
   category: "forms",
   type: "control",
   label: "Text Area",
-  Icon: FormTextAreaIcon,
+  icon: FormTextAreaIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/css/css.js

@@ -1,6 +1,4 @@
 import { createCssEngine } from "@webstudio-is/css-engine";
-import { getComponentNames } from "../components/components-utils";
-import { getComponentMeta } from "../components";
 import { idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
 import { getPresetStyleRules, getStyleRules } from "./style-rules";
@@ -37,9 +35,8 @@ const generateCssText = (data, options) => {
   for (const breakpoint of breakpoints.values()) {
     engine.addMediaRule(breakpoint.id, breakpoint);
   }
-  for (const component of getComponentNames()) {
-    const meta = getComponentMeta(component);
-    const presetStyle = meta?.presetStyle;
+  for (const [component, meta] of data.componentMetas) {
+    const presetStyle = meta.presetStyle;
     if (presetStyle === void 0) {
       continue;
     }

package/lib/css/normalize.js

@@ -1,9 +1,9 @@
-import { borders } from "./presets";
+import { borders, outline } from "./presets";
 const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
 };
-const baseStyle = [boxSizing, ...borders];
+const baseStyle = [boxSizing, ...borders, ...outline];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;

package/lib/css/presets.js

@@ -16,6 +16,13 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
+const outline = [
+  {
+    property: "outlineWidth",
+    value: { type: "unit", value: 1, unit: "px" }
+  }
+];
 export {
-  borders
+  borders,
+  outline
 };

package/lib/embed-template.js

@@ -36,6 +36,7 @@ const EmbedTemplateInstance = z.lazy(
   () => z.object({
     type: z.literal("instance"),
     component: z.string(),
+    label: z.optional(z.string()),
     props: z.optional(z.array(EmbedTemplateProp)),
     styles: z.optional(z.array(EmbedTemplateStyleDecl)),
     children: WsEmbedTemplate
@@ -81,6 +82,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, styleSource
       const instance = {
         type: "instance",
         id: instanceId,
+        label: item.label,
         component: item.component,
         children: []
       };

package/lib/tree/create-elements-tree.js

@@ -2,11 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import { ReactSdkContext } from "../context";
-import { SessionStoragePolyfill } from "./session-storage-polyfill";
 const createElementsTree = ({
+  renderer,
   instances,
   rootInstanceId,
-  sandbox,
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
@@ -32,7 +31,6 @@ const createElementsTree = ({
     children: [
       /* @__PURE__ */ jsxs(Fragment, { children: [
         children,
-        sandbox && /* @__PURE__ */ jsx(SessionStoragePolyfill, {}),
         /* @__PURE__ */ jsx(ScrollRestoration, {}),
         /* @__PURE__ */ jsx(Scripts, {})
       ] }, "children")
@@ -42,7 +40,7 @@ const createElementsTree = ({
   return /* @__PURE__ */ jsx(
     ReactSdkContext.Provider,
     {
-      value: { propsByInstanceIdStore, assetsStore, pagesStore },
+      value: { propsByInstanceIdStore, assetsStore, pagesStore, renderer },
       children: root
     }
   );

package/lib/types/app/params.d.ts

@@ -1,5 +1,26 @@
 export type Params = {
-    resizeOrigin?: string;
+    /**
+     * Base url ir base path for images with ending slash.
+     * Used for configuring image with different sizes.
+     * Concatinated with "name?width=&quality=&format=".
+     *
+     * For example
+     * /asset/image/ used by default in builder
+     * https://image-transform.wstd.io/cdn-cgi/image/
+     * https://webstudio.is/cdn-cgi/image/
+     */
+    imageBaseUrl: string;
+    /**
+     * Base url or base path for any asset with ending slash.
+     * Used to load assets like fonts or images in styles
+     * Concatinated with "name".
+     *
+     * For example
+     * /s/uploads/
+     * /asset/file/
+     * https://assets-dev.webstudio.is/
+     * https://assets.webstudio.is/
+     */
     assetBaseUrl: string;
 };
 export declare const getParams: () => Params;

package/lib/types/components/__generated__/html.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;