@webstudio-is/react-sdk 0.63.0 → 0.65.0

package/lib/app/custom-components/__generated__/form.props.js

@@ -3,10 +3,8 @@ const props = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   acceptCharset: { required: false, control: "text", type: "string" },
-  action: { required: false, control: "text", type: "string" },
   autoComplete: { required: false, control: "text", type: "string" },
   encType: { required: false, control: "text", type: "string" },
-  method: { required: false, control: "text", type: "string" },
   name: { required: false, control: "text", type: "string" },
   noValidate: { required: false, control: "boolean", type: "boolean" },
   target: { required: false, control: "text", type: "string" },
@@ -404,6 +402,7 @@ const props = {
     required: false,
     control: "radio",
     type: "string",
+    defaultValue: "initial",
     options: ["initial", "success", "error"]
   }
 };

package/lib/app/custom-components/form.js

@@ -1,9 +1,12 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFetcher } from "@remix-run/react";
+import { formIdFieldName } from "@webstudio-is/form-handlers";
 import {
   Children,
   cloneElement,
   forwardRef
 } from "react";
+import { getInstanceIdFromComponentProps } from "../../props";
 const defaultTag = "form";
 const isComponentNode = (component, node) => "props" in node && node.props.instance?.component === component;
 const onlyErrorMessage = (children) => Children.map(children, (child) => {
@@ -46,7 +49,15 @@ const withoutMessages = (children) => Children.map(children, (child) => {
   }
   return withoutMessages(child);
 });
-const Form = forwardRef(({ children, initialState = "initial", ...props }, ref) => /* @__PURE__ */ jsx("form", { ...props, "data-state": initialState, ref, children: initialState === "success" ? onlySuccessMessage(children) : initialState === "error" ? onlyErrorMessage(children) : withoutMessages(children) }));
+const Form = forwardRef(({ children, initialState = "initial", ...props }, ref) => {
+  const fetcher = useFetcher();
+  const state = fetcher.type === "done" ? fetcher.data?.success === true ? "success" : "error" : initialState;
+  const instanceId = getInstanceIdFromComponentProps(props);
+  return /* @__PURE__ */ jsxs(fetcher.Form, { ...props, method: "post", "data-state": state, ref, children: [
+    /* @__PURE__ */ jsx("input", { type: "hidden", name: formIdFieldName, value: instanceId }),
+    state === "success" ? onlySuccessMessage(children) : state === "error" ? onlyErrorMessage(children) : withoutMessages(children)
+  ] });
+});
 Form.displayName = "Form";
 export {
   Form,

package/lib/app/custom-components/form.ws.js

@@ -37,7 +37,7 @@ const meta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: []
     },
     {

package/lib/cjs/app/custom-components/__generated__/form.props.js

@@ -26,10 +26,8 @@ const props = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   acceptCharset: { required: false, control: "text", type: "string" },
-  action: { required: false, control: "text", type: "string" },
   autoComplete: { required: false, control: "text", type: "string" },
   encType: { required: false, control: "text", type: "string" },
-  method: { required: false, control: "text", type: "string" },
   name: { required: false, control: "text", type: "string" },
   noValidate: { required: false, control: "boolean", type: "boolean" },
   target: { required: false, control: "text", type: "string" },
@@ -427,6 +425,7 @@ const props = {
     required: false,
     control: "radio",
     type: "string",
+    defaultValue: "initial",
     options: ["initial", "success", "error"]
   }
 };

package/lib/cjs/app/custom-components/form.js

@@ -23,10 +23,13 @@ __export(form_exports, {
 });
 module.exports = __toCommonJS(form_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = require("@remix-run/react");
+var import_form_handlers = require("@webstudio-is/form-handlers");
+var import_react2 = require("react");
+var import_props = require("../../props");
 const defaultTag = "form";
 const isComponentNode = (component, node) => "props" in node && node.props.instance?.component === component;
-const onlyErrorMessage = (children) => import_react.Children.map(children, (child) => {
+const onlyErrorMessage = (children) => import_react2.Children.map(children, (child) => {
   if (typeof child !== "object" || child === null) {
     return null;
   }
@@ -35,11 +38,11 @@ const onlyErrorMessage = (children) => import_react.Children.map(children, (chil
   }
   if ("props" in child) {
     const newChildren = onlyErrorMessage(child.props.children);
-    return import_react.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react.cloneElement)(child, { children: newChildren }) : null;
+    return import_react2.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react2.cloneElement)(child, { children: newChildren }) : null;
   }
   return onlyErrorMessage(child);
 });
-const onlySuccessMessage = (children) => import_react.Children.map(children, (child) => {
+const onlySuccessMessage = (children) => import_react2.Children.map(children, (child) => {
   if (typeof child !== "object" || child === null) {
     return null;
   }
@@ -48,11 +51,11 @@ const onlySuccessMessage = (children) => import_react.Children.map(children, (ch
   }
   if ("props" in child) {
     const newChildren = onlySuccessMessage(child.props.children);
-    return import_react.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react.cloneElement)(child, { children: newChildren }) : null;
+    return import_react2.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react2.cloneElement)(child, { children: newChildren }) : null;
   }
   return onlySuccessMessage(child);
 });
-const withoutMessages = (children) => import_react.Children.map(children, (child) => {
+const withoutMessages = (children) => import_react2.Children.map(children, (child) => {
   if (typeof child !== "object" || child === null) {
     return child;
   }
@@ -60,11 +63,19 @@ const withoutMessages = (children) => import_react.Children.map(children, (child
     return null;
   }
   if ("props" in child) {
-    return (0, import_react.cloneElement)(child, {
+    return (0, import_react2.cloneElement)(child, {
       children: withoutMessages(child.props.children)
     });
   }
   return withoutMessages(child);
 });
-const Form = (0, import_react.forwardRef)(({ children, initialState = "initial", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { ...props, "data-state": initialState, ref, children: initialState === "success" ? onlySuccessMessage(children) : initialState === "error" ? onlyErrorMessage(children) : withoutMessages(children) }));
+const Form = (0, import_react2.forwardRef)(({ children, initialState = "initial", ...props }, ref) => {
+  const fetcher = (0, import_react.useFetcher)();
+  const state = fetcher.type === "done" ? fetcher.data?.success === true ? "success" : "error" : initialState;
+  const instanceId = (0, import_props.getInstanceIdFromComponentProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(fetcher.Form, { ...props, method: "post", "data-state": state, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", name: import_form_handlers.formIdFieldName, value: instanceId }),
+    state === "success" ? onlySuccessMessage(children) : state === "error" ? onlyErrorMessage(children) : withoutMessages(children)
+  ] });
+});
 Form.displayName = "Form";

package/lib/cjs/app/custom-components/form.ws.js

@@ -61,7 +61,7 @@ const meta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: []
     },
     {

package/lib/cjs/components/button.ws.js

@@ -30,7 +30,7 @@ const presetStyle = {
   button: import_normalize.button
 };
 const meta = {
-  category: "general",
+  category: "forms",
   type: "container",
   label: "Button",
   Icon: import_icons.ButtonElementIcon,

package/lib/cjs/components/checkbox-field.ws.js

@@ -35,7 +35,7 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "container",
-  label: "Checkbox Field",
+  label: "Checkbox",
   Icon: import_icons.CheckboxCheckedIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
@@ -44,6 +44,7 @@ const meta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Checkbox Label",
       props: [],
       children: [{ type: "text", value: "Checkbox" }]
     }

package/lib/cjs/components/checkbox.ws.js

@@ -37,7 +37,7 @@ const presetStyle = {
 };
 const meta = {
   type: "control",
-  label: "Checkbox",
+  label: "Checkbox Input",
   Icon: import_icons.CheckboxCheckedIcon,
   presetStyle,
   states: [

package/lib/cjs/components/form.ws.js

@@ -59,7 +59,7 @@ const meta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: []
     },
     {

package/lib/cjs/components/input.ws.js

@@ -32,7 +32,7 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "control",
-  label: "Text Field",
+  label: "Text Input",
   Icon: import_icons.FormTextFieldIcon,
   presetStyle,
   states: [

package/lib/cjs/components/radio-button-field.ws.js

@@ -35,7 +35,7 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "container",
-  label: "Radio Button Field",
+  label: "Radio",
   Icon: import_icons.RadioCheckedIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
@@ -44,6 +44,7 @@ const meta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Radio Label",
       props: [],
       children: [{ type: "text", value: "Radio" }]
     }

package/lib/cjs/components/radio-button.ws.js

@@ -37,7 +37,7 @@ const presetStyle = {
 };
 const meta = {
   type: "control",
-  label: "Radio Button",
+  label: "Radio Input",
   Icon: import_icons.RadioCheckedIcon,
   presetStyle,
   states: [

package/lib/cjs/css/normalize.js

@@ -93,7 +93,7 @@ const h5 = baseStyle;
 const h6 = baseStyle;
 const i = baseStyle;
 const img = baseStyle;
-const a = [boxSizing, ...import_presets.borders, ...import_presets.linkColors];
+const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;

package/lib/cjs/css/presets.js

@@ -18,8 +18,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var presets_exports = {};
 __export(presets_exports, {
-  borders: () => borders,
-  linkColors: () => linkColors
+  borders: () => borders
 });
 module.exports = __toCommonJS(presets_exports);
 const borders = [
@@ -40,20 +39,3 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
-const linkColors = [
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
-  },
-  {
-    state: ":active",
-    property: "color",
-    // chrome and safari use rgb(255, 0, 0)
-    value: { type: "rgb", r: 238, g: 0, b: 0, alpha: 1 }
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
-  }
-];

package/lib/cjs/embed-template.js

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

package/lib/components/button.ws.js

@@ -8,7 +8,7 @@ const presetStyle = {
   button
 };
 const meta = {
-  category: "general",
+  category: "forms",
   type: "container",
   label: "Button",
   Icon: ButtonElementIcon,

package/lib/components/checkbox-field.ws.js

@@ -13,7 +13,7 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "container",
-  label: "Checkbox Field",
+  label: "Checkbox",
   Icon: CheckboxCheckedIcon,
   states: defaultStates,
   presetStyle,
@@ -22,6 +22,7 @@ const meta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Checkbox Label",
       props: [],
       children: [{ type: "text", value: "Checkbox" }]
     }

package/lib/components/checkbox.ws.js

@@ -15,7 +15,7 @@ const presetStyle = {
 };
 const meta = {
   type: "control",
-  label: "Checkbox",
+  label: "Checkbox Input",
   Icon: CheckboxCheckedIcon,
   presetStyle,
   states: [

package/lib/components/form.ws.js

@@ -37,7 +37,7 @@ const meta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: []
     },
     {

package/lib/components/input.ws.js

@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "control",
-  label: "Text Field",
+  label: "Text Input",
   Icon: FormTextFieldIcon,
   presetStyle,
   states: [

package/lib/components/radio-button-field.ws.js

@@ -13,7 +13,7 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "container",
-  label: "Radio Button Field",
+  label: "Radio",
   Icon: RadioCheckedIcon,
   states: defaultStates,
   presetStyle,
@@ -22,6 +22,7 @@ const meta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Radio Label",
       props: [],
       children: [{ type: "text", value: "Radio" }]
     }

package/lib/components/radio-button.ws.js

@@ -15,7 +15,7 @@ const presetStyle = {
 };
 const meta = {
   type: "control",
-  label: "Radio Button",
+  label: "Radio Input",
   Icon: RadioCheckedIcon,
   presetStyle,
   states: [

package/lib/css/normalize.js

@@ -1,4 +1,4 @@
-import { borders, linkColors } from "./presets";
+import { borders } from "./presets";
 const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
@@ -24,7 +24,7 @@ const h5 = baseStyle;
 const h6 = baseStyle;
 const i = baseStyle;
 const img = baseStyle;
-const a = [boxSizing, ...borders, ...linkColors];
+const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;

package/lib/css/presets.js

@@ -16,24 +16,6 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
-const linkColors = [
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
-  },
-  {
-    state: ":active",
-    property: "color",
-    // chrome and safari use rgb(255, 0, 0)
-    value: { type: "rgb", r: 238, g: 0, b: 0, alpha: 1 }
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
-  }
-];
 export {
-  borders,
-  linkColors
+  borders
 };

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/types/app/custom-components/form.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const defaultTag = "form";
-export declare const Form: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLFormElement> & import("react").FormHTMLAttributes<HTMLFormElement> & {
+export declare const Form: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "action" | "method"> & {
     initialState?: "error" | "initial" | "success" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLFormElement>>;

package/lib/types/app/custom-components/index.d.ts

@@ -21,7 +21,7 @@ export declare const customComponents: {
         target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
         prefetch?: "none" | "intent" | "render" | undefined;
     }, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
-    Form: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLFormElement> & import("react").FormHTMLAttributes<HTMLFormElement> & {
+    Form: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "action" | "method"> & {
         initialState?: "error" | "initial" | "success" | undefined;
     }, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
 };

package/lib/types/css/presets.d.ts

@@ -1,3 +1,2 @@
 import type { Styles } from "./normalize";
 export declare const borders: Styles;
-export declare const linkColors: Styles;

package/lib/types/embed-template.d.ts

@@ -1436,6 +1436,7 @@ export type EmbedTemplateStyleDecl = z.infer<typeof EmbedTemplateStyleDecl>;
 export type EmbedTemplateInstance = {
     type: "instance";
     component: string;
+    label?: string;
     props?: EmbedTemplateProp[];
     styles?: EmbedTemplateStyleDecl[];
     children: Array<EmbedTemplateInstance | EmbedTemplateText>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.63.0",
+  "version": "0.65.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -35,16 +35,17 @@
     "nanoevents": "^7.0.1",
     "nanoid": "^3.2.0",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.63.0",
-    "@webstudio-is/css-data": "^0.63.0",
-    "@webstudio-is/css-engine": "^0.63.0",
-    "@webstudio-is/css-vars": "^0.63.0",
-    "@webstudio-is/fonts": "^0.63.0",
-    "@webstudio-is/generate-arg-types": "^0.63.0",
-    "@webstudio-is/icons": "^0.63.0",
-    "@webstudio-is/image": "^0.63.0",
-    "@webstudio-is/prisma-client": "^0.63.0",
-    "@webstudio-is/project-build": "^0.63.0"
+    "@webstudio-is/asset-uploader": "^0.65.0",
+    "@webstudio-is/css-data": "^0.65.0",
+    "@webstudio-is/css-engine": "^0.65.0",
+    "@webstudio-is/css-vars": "^0.65.0",
+    "@webstudio-is/fonts": "^0.65.0",
+    "@webstudio-is/generate-arg-types": "^0.65.0",
+    "@webstudio-is/icons": "^0.65.0",
+    "@webstudio-is/image": "^0.65.0",
+    "@webstudio-is/prisma-client": "^0.65.0",
+    "@webstudio-is/project-build": "^0.65.0",
+    "@webstudio-is/form-handlers": "^0.65.0"
   },
   "exports": {
     ".": {

package/src/app/custom-components/__generated__/form.props.ts

@@ -5,10 +5,8 @@ export const props: Record<string, PropMeta> = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   acceptCharset: { required: false, control: "text", type: "string" },
-  action: { required: false, control: "text", type: "string" },
   autoComplete: { required: false, control: "text", type: "string" },
   encType: { required: false, control: "text", type: "string" },
-  method: { required: false, control: "text", type: "string" },
   name: { required: false, control: "text", type: "string" },
   noValidate: { required: false, control: "boolean", type: "boolean" },
   target: { required: false, control: "text", type: "string" },
@@ -452,6 +450,7 @@ export const props: Record<string, PropMeta> = {
     required: false,
     control: "radio",
     type: "string",
+    defaultValue: "initial",
     options: ["initial", "success", "error"],
   },
 };

package/src/app/custom-components/form.tsx

@@ -1,3 +1,5 @@
+import { useFetcher } from "@remix-run/react";
+import { formIdFieldName } from "@webstudio-is/form-handlers";
 import {
   Children,
   cloneElement,
@@ -6,6 +8,7 @@ import {
   type ElementRef,
   type ComponentProps,
 } from "react";
+import { getInstanceIdFromComponentProps } from "../../props";
 
 export const defaultTag = "form";
 
@@ -78,17 +81,31 @@ const withoutMessages = (children: ReactNode) =>
 
 export const Form = forwardRef<
   ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag> & {
+  Omit<ComponentProps<typeof defaultTag>, "method" | "action"> & {
     initialState?: "initial" | "success" | "error";
   }
->(({ children, initialState = "initial", ...props }, ref) => (
-  <form {...props} data-state={initialState} ref={ref}>
-    {initialState === "success"
-      ? onlySuccessMessage(children)
-      : initialState === "error"
-      ? onlyErrorMessage(children)
-      : withoutMessages(children)}
-  </form>
-));
+>(({ children, initialState = "initial", ...props }, ref) => {
+  const fetcher = useFetcher();
+
+  const state =
+    fetcher.type === "done"
+      ? fetcher.data?.success === true
+        ? "success"
+        : "error"
+      : initialState;
+
+  const instanceId = getInstanceIdFromComponentProps(props);
+
+  return (
+    <fetcher.Form {...props} method="post" data-state={state} ref={ref}>
+      <input type="hidden" name={formIdFieldName} value={instanceId} />
+      {state === "success"
+        ? onlySuccessMessage(children)
+        : state === "error"
+        ? onlyErrorMessage(children)
+        : withoutMessages(children)}
+    </fetcher.Form>
+  );
+});
 
 Form.displayName = "Form";

package/src/app/custom-components/form.ws.tsx

@@ -45,7 +45,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: [],
     },
     {

package/src/components/button.ws.tsx

@@ -14,7 +14,7 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "general",
+  category: "forms",
   type: "container",
   label: "Button",
   Icon: ButtonElementIcon,

package/src/components/checkbox-field.ws.tsx

@@ -19,7 +19,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
-  label: "Checkbox Field",
+  label: "Checkbox",
   Icon: CheckboxCheckedIcon,
   states: defaultStates,
   presetStyle,
@@ -28,6 +28,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Checkbox Label",
       props: [],
       children: [{ type: "text", value: "Checkbox" }],
     },

package/src/components/checkbox.ws.tsx

@@ -21,7 +21,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   type: "control",
-  label: "Checkbox",
+  label: "Checkbox Input",
   Icon: CheckboxCheckedIcon,
   presetStyle,
   states: [

package/src/components/form.ws.tsx

@@ -43,7 +43,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: [],
     },
     {

package/src/components/input.ws.tsx

@@ -16,7 +16,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "control",
-  label: "Text Field",
+  label: "Text Input",
   Icon: FormTextFieldIcon,
   presetStyle,
   states: [

package/src/components/radio-button-field.ws.tsx

@@ -19,7 +19,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
-  label: "Radio Button Field",
+  label: "Radio",
   Icon: RadioCheckedIcon,
   states: defaultStates,
   presetStyle,
@@ -28,6 +28,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Radio Label",
       props: [],
       children: [{ type: "text", value: "Radio" }],
     },

package/src/components/radio-button.ws.tsx

@@ -21,7 +21,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   type: "control",
-  label: "Radio Button",
+  label: "Radio Input",
   Icon: RadioCheckedIcon,
   presetStyle,
   states: [

package/src/css/normalize.ts

@@ -16,7 +16,7 @@
  */
 
 // webstudio custom opinionated presets
-import { borders, linkColors } from "./presets";
+import { borders } from "./presets";
 import type { EmbedTemplateStyleDecl } from "../embed-template";
 
 export type Styles = EmbedTemplateStyleDecl[];
@@ -63,7 +63,7 @@ export const i = baseStyle;
 
 export const img = baseStyle;
 
-export const a = [boxSizing, ...borders, ...linkColors];
+export const a = baseStyle;
 export const li = baseStyle;
 export const ul = baseStyle;
 export const ol = baseStyle;

package/src/css/presets.ts

@@ -18,21 +18,3 @@ export const borders: Styles = [
     value: { type: "unit", value: 1, unit: "px" },
   },
 ];
-
-export const linkColors: Styles = [
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 },
-  },
-  {
-    state: ":active",
-    property: "color",
-    // chrome and safari use rgb(255, 0, 0)
-    value: { type: "rgb", r: 238, g: 0, b: 0, alpha: 1 },
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 },
-  },
-];

package/src/embed-template.ts

@@ -54,6 +54,7 @@ export type EmbedTemplateStyleDecl = z.infer<typeof EmbedTemplateStyleDecl>;
 export type EmbedTemplateInstance = {
   type: "instance";
   component: string;
+  label?: string;
   props?: EmbedTemplateProp[];
   styles?: EmbedTemplateStyleDecl[];
   children: Array<EmbedTemplateInstance | EmbedTemplateText>;
@@ -64,6 +65,7 @@ export const EmbedTemplateInstance: z.ZodType<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,
@@ -127,6 +129,7 @@ const createInstancesFromTemplate = (
       const instance: Instance = {
         type: "instance",
         id: instanceId,
+        label: item.label,
         component: item.component,
         children: [],
       };