@webstudio-is/sdk-components-react 0.0.0-c575b54 → 0.0.0-ca00e2a

package/lib/subscript.ws.js

@@ -2,19 +2,18 @@ import { SubscriptIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
 import { sub as r } from "@webstudio-is/sdk/normalize.css";
 import { props as s } from "./__generated__/subscript.props.js";
-const e = {
+const p = {
   sub: r
-}, a = {
-  type: "rich-text-child",
+}, c = {
   label: "Subscript Text",
   icon: t,
   states: o,
-  presetStyle: e
+  presetStyle: p
 }, l = {
   props: s,
   initialProps: ["id", "className"]
 };
 export {
-  a as meta,
+  c as meta,
   l as propsMeta
 };

package/lib/superscript.ws.js

@@ -1,20 +1,19 @@
 import { SuperscriptIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as r } from "@webstudio-is/sdk";
-import { sup as o } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { sup as r } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/superscript.props.js";
-const e = {
-  sup: o
-}, a = {
-  type: "rich-text-child",
+const s = {
+  sup: r
+}, c = {
   label: "Superscript Text",
   icon: t,
-  states: r,
-  presetStyle: e
+  states: o,
+  presetStyle: s
 }, l = {
   props: p,
   initialProps: ["id", "className"]
 };
 export {
-  a as meta,
+  c as meta,
   l as propsMeta
 };

package/lib/text.js

@@ -1,10 +1,12 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-const m = "div", s = f(
-  ({ tag: t = m, children: o, ...r }, a) => /* @__PURE__ */ e(t, { ...r, ref: a, children: o })
+import { forwardRef as a, createElement as m } from "react";
+import { getTagFromProps as f } from "@webstudio-is/sdk/runtime";
+const g = "div", n = a(
+  ({ tag: e, ...t }, r) => {
+    const o = f(t) ?? e ?? g;
+    return m(o, { ...t, ref: r });
+  }
 );
-s.displayName = "Text";
+n.displayName = "Text";
 export {
-  s as Text,
-  m as defaultTag
+  n as Text
 };

package/lib/text.ws.js

@@ -1,25 +1,32 @@
 import { TextIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { div as o } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { div as e } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/text.props.js";
-const r = {
-  div: [
-    ...o,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "em", value: 1 }
-    }
-  ]
-}, n = {
-  type: "container",
+const n = {
   icon: t,
-  states: e,
-  presetStyle: r
-}, c = {
-  props: i,
-  initialProps: ["id", "className", "tag"]
+  states: o,
+  presetStyle: {
+    div: [
+      ...e,
+      {
+        property: "min-height",
+        value: { type: "unit", unit: "em", value: 1 }
+      }
+    ]
+  }
+}, m = {
+  props: {
+    ...i,
+    tag: {
+      required: !0,
+      control: "tag",
+      type: "string",
+      options: ["div", "cite", "figcaption", "span"]
+    }
+  },
+  initialProps: ["tag", "id", "className"]
 };
 export {
   n as meta,
-  c as propsMeta
+  m as propsMeta
 };

package/lib/textarea.ws.js

@@ -1,10 +1,10 @@
 import { FormTextAreaIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { textarea as t } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/textarea.props.js";
+import { defaultStates as r } from "@webstudio-is/sdk";
+import { textarea as o } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/textarea.props.js";
 const l = {
   textarea: [
-    ...t,
+    ...o,
     // resize doesn't work well while on canvas
     { property: "resize", value: { type: "keyword", value: "none" } },
     {
@@ -12,20 +12,19 @@ const l = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p = {
+}, n = {
   category: "forms",
-  type: "control",
   label: "Text Area",
   description: "A multi-line text input for collecting longer string data from your users.",
   icon: e,
   presetStyle: l,
   order: 4,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
+  contentModel: {
+    category: "instance",
+    children: []
   },
   states: [
-    ...o,
+    ...r,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },
@@ -37,8 +36,8 @@ const l = {
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
   ]
-}, c = {
-  props: r,
+}, p = {
+  props: t,
   initialProps: [
     "id",
     "className",
@@ -50,6 +49,6 @@ const l = {
   ]
 };
 export {
-  p as meta,
-  c as propsMeta
+  n as meta,
+  p as propsMeta
 };

package/lib/time.ws.js

@@ -6,16 +6,15 @@ const r = {
   time: a
 }, s = {
   category: "localization",
-  type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: t,
   states: e,
   presetStyle: r
-}, c = {
+}, l = {
   props: o,
   initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"]
 };
 export {
   s as meta,
-  c as propsMeta
+  l as propsMeta
 };

package/lib/types/box.d.ts

@@ -1,8 +1,7 @@
 import { type ComponentProps } from "react";
-export declare const defaultTag = "div";
+declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
-    /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
-    tag?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure";
+    tag?: string;
 };
 export declare const Box: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/components.d.ts

@@ -42,3 +42,4 @@ export { HeadSlot } from "./head-slot";
 export { HeadLink } from "./head-link";
 export { HeadMeta } from "./head-meta";
 export { HeadTitle } from "./head-title";
+export { Video } from "./video";

package/lib/types/head-title.ws.d.ts

@@ -1,3 +1,3 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/heading.d.ts

@@ -1,8 +1,7 @@
 import { type ComponentProps } from "react";
 declare const defaultTag = "h1";
 type Props = ComponentProps<typeof defaultTag> & {
-    /** Use HTML heading levels (h1-h6) to structure content hierarchically, with h1 as the main title and subsequent levels representing sub-sections. Maintain a logical order and avoid skipping levels to ensure consistent and meaningful organization. */
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    tag?: string;
 };
 export declare const Heading: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/types/html-embed.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/markdown-embed.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/metas.d.ts

@@ -42,3 +42,4 @@ export { meta as HeadSlot } from "./head-slot.ws";
 export { meta as HeadLink } from "./head-link.ws";
 export { meta as HeadMeta } from "./head-meta.ws";
 export { meta as HeadTitle } from "./head-title.ws";
+export { meta as Video } from "./video.ws";

package/lib/types/props.d.ts

@@ -42,3 +42,4 @@ export { propsMeta as HeadSlot } from "./head-slot.ws";
 export { propsMeta as HeadLink } from "./head-link.ws";
 export { propsMeta as HeadMeta } from "./head-meta.ws";
 export { propsMeta as HeadTitle } from "./head-title.ws";
+export { propsMeta as Video } from "./video.ws";

package/lib/types/shared/video.d.ts

@@ -0,0 +1,7 @@
+export declare const requestFullscreen: (element: HTMLIFrameElement) => void;
+export type PlayerStatus = "initial" | "loading" | "ready";
+export declare const VideoContext: import("react").Context<{
+    previewImageUrl?: URL;
+    onInitPlayer: () => void;
+    status: PlayerStatus;
+}>;

package/lib/types/text.d.ts

@@ -1,8 +1,7 @@
 import { type ComponentProps } from "react";
-export declare const defaultTag = "div";
+declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
-    /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
-    tag?: "div" | "span" | "figcaption" | "cite";
+    tag?: string;
 };
 export declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/video.d.ts

@@ -0,0 +1,9 @@
+import type { Atom } from "nanostores";
+export declare const defaultTag = "video";
+export declare const Video: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLVideoElement> & import("react").VideoHTMLAttributes<HTMLVideoElement> & {
+    $progress?: Atom<number | undefined>;
+    $visible?: Atom<boolean>;
+    $timeline?: boolean;
+} & {
+    $webstudio$canvasOnly$assetId?: string | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;

package/lib/types/video.ws.d.ts

@@ -0,0 +1,3 @@
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/vimeo.d.ts

@@ -66,12 +66,6 @@ export type VimeoOptions = Omit<VimeoPlayerOptions, "dnt" | "interactive_params"
     /** Whether to display the video owner's portrait. Only works if either title or byline are also enabled */
     showPortrait?: VimeoPlayerOptions["portrait"];
 };
-type PlayerStatus = "initial" | "loading" | "ready";
-export declare const VimeoContext: import("react").Context<{
-    previewImageUrl?: URL;
-    onInitPlayer: () => void;
-    status: PlayerStatus;
-}>;
 declare const defaultTag = "div";
 type Props = Omit<ComponentProps<typeof defaultTag>, keyof VimeoOptions> & VimeoOptions & {
     /**

package/lib/video.js

@@ -0,0 +1,53 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as V, useId as N, useContext as h, useEffect as x } from "react";
+import { ReactSdkContext as I } from "@webstudio-is/react-sdk/runtime";
+const c = "data-ws-video-id", S = {
+  HAVE_METADATA: 1
+}, _ = V(
+  ({
+    $progress: n,
+    $visible: r,
+    $timeline: f,
+    $webstudio$canvasOnly$assetId: p,
+    children: l,
+    src: s,
+    ...b
+  }, m) => {
+    const a = N(), A = {
+      [c]: a
+    }, { assetBaseUrl: d } = h(I), T = s != null && s.startsWith(d) ? `/cgi/video/${s.slice(d.length)}` : s;
+    return x(() => {
+      if (n === void 0 || r === void 0)
+        return;
+      const e = document.querySelector(`[${c}="${a}"]`);
+      if (e === null || !(e instanceof HTMLVideoElement))
+        return;
+      if (e.play().catch(() => {
+      }), e.pause(), f)
+        return n.subscribe((t) => {
+          if (e.readyState < S.HAVE_METADATA || (e.paused || e.pause(), e.seeking))
+            return;
+          let u = e.duration;
+          Number.isNaN(u) || (Number.isFinite(u) || (u = 60), e.currentTime = (t ?? 0) * u);
+        });
+      let i = !1, o = !1;
+      const v = r.subscribe((t) => {
+        o = t, o === !1 && i === !1 && !e.loop && (e.currentTime = 0);
+      }), E = n.subscribe((t) => {
+        if (i && (t === void 0 || t === 0 || t === 1)) {
+          i = !1, e.pause(), o === !1 && i === !1 && !e.loop && (e.currentTime = 0);
+          return;
+        }
+        i || (i = !0, e.ended || e.play().catch(() => {
+        }));
+      });
+      return () => {
+        E(), v();
+      };
+    }, [n, f, r, a]), /* @__PURE__ */ y("video", { src: T, ...b, ...A, ref: m, children: l });
+  }
+);
+_.displayName = "Video";
+export {
+  _ as Video
+};

package/lib/video.ws.js

@@ -0,0 +1,47 @@
+import { VideoIcon as e } from "@webstudio-is/icons/svg";
+import "@webstudio-is/sdk";
+import { props as o } from "./__generated__/video.props.js";
+const i = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
+  presetStyle: {
+    video: [
+      {
+        property: "max-width",
+        value: { type: "unit", unit: "%", value: 100 }
+      }
+    ]
+  }
+}, l = {
+  props: {
+    ...o,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1,
+      accept: ".mp4,.webm,.mpg,.mpeg,.mov"
+    }
+  },
+  initialProps: [
+    "id",
+    "className",
+    "width",
+    "height",
+    "src",
+    "autoPlay",
+    "controls",
+    "loop",
+    "muted",
+    "preload",
+    "playsInline"
+  ]
+};
+export {
+  i as meta,
+  l as propsMeta
+};

package/lib/vimeo-play-button.js

@@ -1,12 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as r, useContext as a, useCallback as m } from "react";
-import { VimeoContext as s } from "./vimeo.js";
+import s from "await-interaction-response";
 import { Button as l } from "./button.js";
-import c from "await-interaction-response";
+import { VideoContext as c } from "./shared/video.js";
 const f = r(
   (o, i) => {
-    const t = a(s), n = m(async () => {
-      await c(), t.onInitPlayer();
+    const t = a(c), n = m(async () => {
+      await s(), t.onInitPlayer();
     }, [t]);
     if (t.status === "initial")
       return /* @__PURE__ */ e(l, { ...o, onClick: n, ref: i });

package/lib/vimeo-play-button.ws.js

@@ -2,30 +2,23 @@ import { defaultStates as t } from "@webstudio-is/sdk";
 import { ButtonElementIcon as o } from "@webstudio-is/icons/svg";
 import { button as e } from "@webstudio-is/sdk/normalize.css";
 import { props as n } from "./__generated__/vimeo-play-button.props.js";
-const r = {
-  button: e
-}, p = {
+const m = {
   category: "hidden",
-  type: "container",
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $in: ["Vimeo", "YouTube"] }
-    },
-    {
-      relation: "ancestor",
-      component: { $neq: "Button" }
-    }
-  ],
   label: "Play Button",
   icon: o,
-  presetStyle: r,
-  states: t
-}, c = {
+  states: t,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    button: e
+  }
+}, p = {
   props: n,
   initialProps: ["id", "className"]
 };
 export {
-  p as meta,
-  c as propsMeta
+  m as meta,
+  p as propsMeta
 };

package/lib/vimeo-preview-image.js

@@ -1,10 +1,10 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as i, useContext as t } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m, useContext as t } from "react";
 import { Image as a } from "./image.js";
-import { VimeoContext as g } from "./vimeo.js";
-const n = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=", s = i(({ src: A, ...e }, o) => {
+import { VideoContext as g } from "./shared/video.js";
+const n = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=", s = m(({ src: A, ...e }, o) => {
   const r = t(g);
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ i(
     a,
     {
       ...e,

package/lib/vimeo-preview-image.ws.js

@@ -1,14 +1,14 @@
 import { meta as e, propsMeta as o } from "./image.ws.js";
 import { props as r } from "./__generated__/vimeo-preview-image.props.js";
-const i = {
+const p = {
   ...e,
   category: "hidden",
   label: "Preview Image",
-  constraints: {
-    relation: "ancestor",
-    component: { $in: ["Vimeo", "YouTube"] }
+  contentModel: {
+    category: "none",
+    children: []
   }
-}, p = {
+}, i = {
   props: {
     ...r,
     // Automatically generated props don't have the right control.
@@ -22,6 +22,6 @@ const i = {
   initialProps: o.initialProps
 };
 export {
-  i as meta,
-  p as propsMeta
+  p as meta,
+  i as propsMeta
 };

package/lib/vimeo-spinner.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as r, useContext as i } from "react";
-import { VimeoContext as n } from "./vimeo.js";
+import { VideoContext as n } from "./shared/video.js";
 const m = r(
   (o, t) => {
     if (i(n).status === "loading")

package/lib/vimeo-spinner.ws.js

@@ -2,24 +2,23 @@ import { defaultStates as o } from "@webstudio-is/sdk";
 import { div as t } from "@webstudio-is/sdk/normalize.css";
 import { BoxIcon as e } from "@webstudio-is/icons/svg";
 import { props as r } from "./__generated__/vimeo-spinner.props.js";
-const n = {
-  div: t
-}, m = {
-  type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $in: ["Vimeo", "YouTube"] }
-  },
+const s = {
   icon: e,
   states: o,
-  presetStyle: n,
   category: "hidden",
-  label: "Spinner"
+  label: "Spinner",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    div: t
+  }
 }, c = {
   props: r,
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
+  s as meta,
   c as propsMeta
 };