experimental: Youtube animations (#5072)

## Description

### Not finished, should be merged as has small issues fixed

https://video-viking.wstd.work/
https://video-viking.wstd.work/entry

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -20,7 +20,11 @@ import {
   Separator,
 } from "@webstudio-is/design-system";
 import { compareMedia } from "@webstudio-is/css-engine";
-import { componentCategories, collectionComponent } from "@webstudio-is/sdk";
+import {
+  componentCategories,
+  collectionComponent,
+  parseComponentName,
+} from "@webstudio-is/sdk";
 import type { Breakpoint, Page } from "@webstudio-is/sdk";
 import type { TemplateMeta } from "@webstudio-is/template";
 import {
@@ -104,12 +108,24 @@ const $componentOptions = computed(
       if (category === "hidden" || category === "internal") {
         continue;
       }
+
       if (
         category === "animations" &&
         isFeatureEnabled("animation") === false
       ) {
         continue;
       }
+
+      const [namespace, shortName] = parseComponentName(name);
+
+      if (
+        isFeatureEnabled("videoAnimation") === false &&
+        namespace === "@webstudio-is/sdk-components-animation" &&
+        shortName === "VideoAnimation"
+      ) {
+        continue;
+      }
+
       // show only xml category and collection component in xml documents
       if (selectedPage?.meta.documentType === "xml") {
         if (category !== "xml" && name !== collectionComponent) {
@@ -136,6 +152,17 @@ const $componentOptions = computed(
       if (meta.category === "hidden" || meta.category === "internal") {
         continue;
       }
+
+      const [namespace, shortName] = parseComponentName(name);
+
+      if (
+        isFeatureEnabled("videoAnimation") === false &&
+        namespace === "@webstudio-is/sdk-components-animation" &&
+        shortName === "VideoAnimation"
+      ) {
+        continue;
+      }
+
       const componentMeta = metas.get(name);
       const label =
         meta.label ??

apps/builder/app/builder/features/components/components.tsx

@@ -60,14 +60,22 @@ const $metas = computed(
     const availableComponents = new Set<string>();
     const metas: Meta[] = [];
     for (const [name, componentMeta] of componentMetas) {
-      const [namespace] = parseComponentName(name);
+      const [namespace, shortName] = parseComponentName(name);
       if (
         isFeatureEnabled("animation") === false &&
         namespace === "@webstudio-is/sdk-components-animation"
       ) {
         continue;
       }
 
+      if (
+        isFeatureEnabled("videoAnimation") === false &&
+        namespace === "@webstudio-is/sdk-components-animation" &&
+        shortName === "VideoAnimation"
+      ) {
+        continue;
+      }
+
       // only set available components from component meta
       availableComponents.add(name);
       metas.push({
@@ -81,6 +89,15 @@ const $metas = computed(
     }
     for (const [name, templateMeta] of templates) {
       const componentMeta = componentMetas.get(name);
+      const [namespace, shortName] = parseComponentName(name);
+      if (
+        isFeatureEnabled("videoAnimation") === false &&
+        namespace === "@webstudio-is/sdk-components-animation" &&
+        shortName === "VideoAnimation"
+      ) {
+        continue;
+      }
+
       metas.push({
         name,
         category: templateMeta.category ?? "hidden",

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx

@@ -117,10 +117,12 @@ const RangeValueInput = ({
       onChange={(styleValue) => {
         setIntermediateValue(styleValue);
 
-        const parsedValue = rangeUnitValueSchema.safeParse(styleValue);
-        if (parsedValue.success) {
-          onChange(parsedValue.data, true);
-          return;
+        if (styleValue?.type !== "intermediate") {
+          const parsedValue = rangeUnitValueSchema.safeParse(styleValue);
+          if (parsedValue.success) {
+            onChange(parsedValue.data, true);
+            return;
+          }
         }
 
         onChange(undefined, true);

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx

@@ -156,7 +156,10 @@ const InsetValueInput = ({
       intermediateValue={intermediateValue}
       onChange={(styleValue) => {
         setIntermediateValue(styleValue);
-        handleEphemeralChange(styleValue);
+
+        if (styleValue?.type !== "intermediate") {
+          handleEphemeralChange(styleValue);
+        }
       }}
       getOptions={() => [
         {

https/README.md

@@ -34,4 +34,8 @@ sudo chown -R $USER:$(id -g) /tmp/letsencrypt
 
 cp /tmp/letsencrypt/data/live/wstd.dev/fullchain.pem ./https/fullchain.pem
 cp /tmp/letsencrypt/data/live/wstd.dev/privkey.pem ./https/privkey.pem
+
+# Haproxy key
+cd https
+cat ./fullchain.pem ./privkey.pem > ./haproxy.pem
 ```

https/haproxy.pem

@@ -0,0 +1,52 @@
+-----BEGIN CERTIFICATE-----
+MIIDfTCCAwOgAwIBAgISBGlZgTahbbnWR8+AkWolrm9LMAoGCCqGSM49BAMDMDIx
+CzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQDEwJF
+NTAeFw0yNTAyMTcxODI4MTVaFw0yNTA1MTgxODI4MTRaMBMxETAPBgNVBAMTCHdz
+dGQuZGV2MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAE58iEIOTmVWcpdfZ1LCUJ
+N9YCbBkyQWAoLBw8fGSHYDy6fuJk4nu6CezlbrtztxXwhE2F0mFC1Nt534oE/AM2
+N6OCAhYwggISMA4GA1UdDwEB/wQEAwIHgDAdBgNVHSUEFjAUBggrBgEFBQcDAQYI
+KwYBBQUHAwIwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQUqUg23PsUvozbnvwDeUnh
+H/y5tCEwHwYDVR0jBBgwFoAUnytfzzwhT50Et+0rLMTGcIvS1w0wVQYIKwYBBQUH
+AQEESTBHMCEGCCsGAQUFBzABhhVodHRwOi8vZTUuby5sZW5jci5vcmcwIgYIKwYB
+BQUHMAKGFmh0dHA6Ly9lNS5pLmxlbmNyLm9yZy8wHwYDVR0RBBgwFoIKKi53c3Rk
+LmRldoIId3N0ZC5kZXYwEwYDVR0gBAwwCjAIBgZngQwBAgEwggEEBgorBgEEAdZ5
+AgQCBIH1BIHyAPAAdgDPEVbu1S58r/OHW9lpLpvpGnFnSrAX7KwB0lt3zsw7CAAA
+AZUVYJRVAAAEAwBHMEUCIBo6ysjtpEwifx6nsCchTzFPgTH4y0bUnroPqRfeTlCW
+AiEA6l/rsOp+GO4IwK9kxsl9Vx4NANPd1e6MFUodif3SvGgAdgATSt8atZhCCXgM
+b+9MepGkFrcjSc5YV2rfrtqnwqvgIgAAAZUVYJVCAAAEAwBHMEUCIQC+MEiwIE/n
+CgObWyawZQxdRkz7mTbzfrdjGKig5CzzqwIgPG7LeDvi8+3g9fRCzMUqCul0/ZR/
+I5a0TZWnTLfpgZYwCgYIKoZIzj0EAwMDaAAwZQIweMMytJ56Hpk2K/2veAWGcYIE
+MhoarnMQ+SZgu+Quxa7NFnbbRJvoom+dcPxnIFqqAjEAlXhCSHLZLnnNJBVbxTu6
+DSNdjRiJpSXkJlsTFvCGGJ8Xy4vBAYlrz1KSyy4AWu0D
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIEVzCCAj+gAwIBAgIRAIOPbGPOsTmMYgZigxXJ/d4wDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMjQwMzEzMDAwMDAw
+WhcNMjcwMzEyMjM1OTU5WjAyMQswCQYDVQQGEwJVUzEWMBQGA1UEChMNTGV0J3Mg
+RW5jcnlwdDELMAkGA1UEAxMCRTUwdjAQBgcqhkjOPQIBBgUrgQQAIgNiAAQNCzqK
+a2GOtu/cX1jnxkJFVKtj9mZhSAouWXW0gQI3ULc/FnncmOyhKJdyIBwsz9V8UiBO
+VHhbhBRrwJCuhezAUUE8Wod/Bk3U/mDR+mwt4X2VEIiiCFQPmRpM5uoKrNijgfgw
+gfUwDgYDVR0PAQH/BAQDAgGGMB0GA1UdJQQWMBQGCCsGAQUFBwMCBggrBgEFBQcD
+ATASBgNVHRMBAf8ECDAGAQH/AgEAMB0GA1UdDgQWBBSfK1/PPCFPnQS37SssxMZw
+i9LXDTAfBgNVHSMEGDAWgBR5tFnme7bl5AFzgAiIyBpY9umbbjAyBggrBgEFBQcB
+AQQmMCQwIgYIKwYBBQUHMAKGFmh0dHA6Ly94MS5pLmxlbmNyLm9yZy8wEwYDVR0g
+BAwwCjAIBgZngQwBAgEwJwYDVR0fBCAwHjAcoBqgGIYWaHR0cDovL3gxLmMubGVu
+Y3Iub3JnLzANBgkqhkiG9w0BAQsFAAOCAgEAH3KdNEVCQdqk0LKyuNImTKdRJY1C
+2uw2SJajuhqkyGPY8C+zzsufZ+mgnhnq1A2KVQOSykOEnUbx1cy637rBAihx97r+
+bcwbZM6sTDIaEriR/PLk6LKs9Be0uoVxgOKDcpG9svD33J+G9Lcfv1K9luDmSTgG
+6XNFIN5vfI5gs/lMPyojEMdIzK9blcl2/1vKxO8WGCcjvsQ1nJ/Pwt8LQZBfOFyV
+XP8ubAp/au3dc4EKWG9MO5zcx1qT9+NXRGdVWxGvmBFRAajciMfXME1ZuGmk3/GO
+koAM7ZkjZmleyokP1LGzmfJcUd9s7eeu1/9/eg5XlXd/55GtYjAM+C4DG5i7eaNq
+cm2F+yxYIPt6cbbtYVNJCGfHWqHEQ4FYStUyFnv8sjyqU8ypgZaNJ9aVcWSICLOI
+E1/Qv/7oKsnZCWJ926wU6RqG1OYPGOi1zuABhLw61cuPVDT28nQS/e6z95cJXq0e
+K1BcaJ6fJZsmbjRgD5p3mvEf5vdQM7MCEvU0tHbsx2I5mHHJoABHb8KVBgWp/lcX
+GWiWaeOyB7RP+OfDtvi2OsapxXiV7vNVs7fMlrRjY1joKaqmmycnBvAq14AEbtyL
+sVfOS66B8apkeFX2NY4XPEYV4ZSCe8VHPrdrERk2wILG3T/EGmSIkCYVUMSnjmJd
+VQD9F6Na/+zmXCc=
+-----END CERTIFICATE-----
+-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgvt6DDpBvBQ2MIS0K
+JoESPznVFSHunvJfrATHECtBkAShRANCAATnyIQg5OZVZyl19nUsJQk31gJsGTJB
+YCgsHDx8ZIdgPLp+4mTie7oJ7OVuu3O3FfCETYXSYULU23nfigT8AzY3
+-----END PRIVATE KEY-----

https/haproxy.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Proxies https://wstd.dev:4001 to http://localhost:4002
+# Used for debugging when HTTPS is required
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PEM_PATH="$SCRIPT_DIR/haproxy.pem"
+TMP_CFG=$(mktemp /tmp/haproxy.XXXXXX)
+
+echo $TMP_CFG
+
+cat <<EOF > "$TMP_CFG"
+frontend proxy-https
+  bind *:4001 ssl crt ${PEM_PATH} alpn h2,http/1.1
+  default_backend proxy
+
+backend proxy
+  balance roundrobin
+  mode http
+  http-request set-header X-Forwarded-Host %[req.hdr(Host)]
+  server  rgw1 localhost:4002 check
+EOF
+
+exec haproxy -f "$TMP_CFG" -db

packages/feature-flags/src/flags.ts

@@ -3,4 +3,5 @@ export const internalComponents = false;
 export const unsupportedBrowsers = false;
 export const aiRadixComponents = false;
 export const animation = false;
+export const videoAnimation = false;
 export const resourceProp = false;

packages/generate-arg-types/src/arg-types.ts

@@ -16,6 +16,7 @@ export const propsToArgTypes = (
       // Exclude webstudio builder props see react-sdk/src/tree/webstudio-component.tsx
       .filter(([propName]) => propName.startsWith("data-ws-") === false)
       .filter(([propName]) => propName.startsWith("$webstudio") === false)
+      .filter(([propName]) => propName.startsWith("$") === false)
       // Exclude props that are in the exclude list
       .filter(([propName]) => exclude.includes(propName) === false)
       .map(([propName, propItem]) => {