Add polyfill loader

Add test

Initial styles

Ranges support

Comments

Done

Fix type errors

Add comments

Fix

Do not load polyfill in chrome

Support range units not defined in polyfill

patch polyfill

Add progress and closest examples

Fix

Add elephants

Add submodules

Add branch

Test

Test

dd

Test private checkout

Try SSH

Test animate branch in submodule

Test local action

Check

Use submodules sh

Fix name

Fix

Check it fails

Test env

Check again

Test workflow call from env

fix

Test

Fix

Test

Pass secret

hack

Pass env as input too

Add comments etc

Check submodules

Test

Check

Improve

Move from the main repo

.github/actions/submodules-checkout/action.yml

@@ -0,0 +1,46 @@
+name: CI setup
+
+description: |
+  Sets up the CI environment for the project.
+
+inputs:
+  submodules-ssh-key:
+    description: "The SSH key to private submodules to use for the checkout"
+    required: true
+
+runs:
+  using: "composite"
+
+  steps:
+    - name: Set up SSH for Git
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        mkdir -p ~/.ssh
+        echo "${{ inputs.submodules-ssh-key }}" > ~/.ssh/id_ed25519
+        chmod 600 ~/.ssh/id_ed25519
+        ssh-keyscan github.com >> ~/.ssh/known_hosts
+      shell: bash
+
+    - name: Verify SSH Connection (Optional)
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        ssh -T [email protected] || true
+      shell: bash
+
+    - name: Verify SSH Connection (Optional)
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        echo Branch is ${{ github.event.pull_request.head.ref || github.ref_name }}
+      shell: bash
+
+    - name: Try checkout submodules to the same branch as main repo
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        ./submodules.sh ${{ github.event.pull_request.head.ref || github.ref_name }}
+      shell: bash
+
+    - name: Show main readme
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        cat ./packages/sdk-components-animation/private-src/README.md || echo "No README found"
+      shell: bash

.github/workflows/check-submodules.yml

@@ -0,0 +1,67 @@
+name: Check submodules
+
+on:
+  pull_request:
+
+# cancel in-progress runs on new commits to same PR (gitub.event.number)
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
+jobs:
+  checks:
+    timeout-minutes: 20
+
+    environment:
+      name: development
+
+    env:
+      DATABASE_URL: postgres://
+      AUTH_SECRET: test
+
+    runs-on: ubuntu-24.04-arm
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
+
+      - name: Check if any submodule branch matches github.ref_name
+        run: |
+          echo "C ${{ github.workflow }}-${{ github.event.number || github.sha }}"
+          # Get the current branch or tag name
+          REF_NAME="${{ github.event.pull_request.head.ref || github.ref_name }}"
+
+          echo "Branch is:" $REF_NAME
+
+          # List all submodule paths
+          SUBMODULES=$(git submodule status | awk '{print $2}')
+
+          # Check each submodule's branch
+          for SUBMODULE in $SUBMODULES; do
+            echo "Checking submodule: $SUBMODULE"
+            (
+              cd "$SUBMODULE"
+              # Get the current branch of the submodule
+              SUBMODULE_BRANCH=$(git rev-parse --abbrev-ref HEAD)
+              echo "Submodule branch: $SUBMODULE_BRANCH"
+
+              # Compare the submodule branch to the ref_name
+              if [ "$SUBMODULE_BRANCH" = "$REF_NAME" ]; then
+                echo "::error::Submodule '$SUBMODULE' is on branch '$SUBMODULE_BRANCH', which matches the current ref '$REF_NAME'."
+                exit 1
+              fi
+            )
+            if [ $? -ne 0 ]; then
+              exit 1 # Fail the workflow if any submodule branch matches
+            fi
+          done
+
+          echo "No submodule is on the same branch as the current ref '$REF_NAME'."

.github/workflows/chromatic.yml

@@ -20,12 +20,20 @@ jobs:
 
     runs-on: ubuntu-latest
 
+    environment:
+      name: development
+
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 2 # we need to fetch at least parent commit to satisfy Chromatic
           ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
 
+      # Storybook with submodules
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
+
       - uses: ./.github/actions/ci-setup
 
       - name: Chromatic

.github/workflows/cli-r2-static.yaml

@@ -30,6 +30,8 @@ jobs:
         with:
           ref: ${{ github.sha }} # HEAD commit instead of merge commit
 
+      # Do not checkout submodules, they are not needed for this workflow
+
       - uses: pnpm/action-setup@v4
 
       - uses: actions/setup-node@v4

.github/workflows/cli-r2.yaml

@@ -31,6 +31,11 @@ jobs:
         with:
           ref: ${{ github.sha }} # HEAD commit instead of merge commit
 
+      # We need submodules here as this is used for the cloudflare build
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
+
       - uses: pnpm/action-setup@v4
 
       - uses: actions/setup-node@v4

.github/workflows/fixtures-test.yml

@@ -9,6 +9,12 @@ on:
       builder-host:
         required: true
         type: string
+      environment:
+        required: true
+        type: string
+    secrets:
+      PRIVATE_GITHUB_DEPLOY_TOKEN:
+        required: true
 
 permissions:
   contents: read # to fetch code (actions/checkout)
@@ -23,6 +29,9 @@ jobs:
 
     runs-on: ${{ matrix.os }}
 
+    environment:
+      name: ${{ inputs.environment }}
+
     env:
       DATABASE_URL: postgres://
       AUTH_SECRET: test
@@ -32,7 +41,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+      # Test that everything is working with submodules
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
       - uses: ./.github/actions/ci-setup
 

.github/workflows/main.yml

@@ -18,6 +18,15 @@ jobs:
   checks:
     timeout-minutes: 20
 
+    strategy:
+      matrix:
+        environment:
+          - empty
+          - development
+
+    environment:
+      name: ${{ matrix.environment }}
+
     env:
       DATABASE_URL: postgres://
       AUTH_SECRET: test
@@ -27,7 +36,12 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+
+      # Will not checkout submodules on empty environment, and will on development
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
       - uses: ./.github/actions/ci-setup
 
@@ -41,21 +55,35 @@ jobs:
 
       - run: echo ===SHA USED=== ${{ github.event.pull_request.head.sha || github.sha }} # todo: remove after check whats happening on main
 
-      - run: pnpm prettier --cache --check "**/*.{js,md,ts,tsx}"
+      - run: |
+          pnpm prettier --cache --check "**/*.{js,md,ts,tsx}"
+
+      - name: Lint
+        run: |
+          pnpm lint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslint-cache
 
-      - run: pnpm lint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslint-cache
+      - name: Test
+        run: |
+          pnpm -r test
 
-      - run: pnpm -r test
-      - run: pnpm --filter=@webstudio-is/prisma-client build
-      - run: pnpm -r typecheck
+      - name: Typecheck
+        run: |
+          pnpm -r typecheck
 
   check-size:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
+
+    environment:
+      name: development
 
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
       - uses: ./.github/actions/ci-setup
 

.github/workflows/vercel-deploy-staging.yml

@@ -5,7 +5,7 @@ on:
 
 # cancel in-progress runs on new commits to same PR (gitub.event.number)
 concurrency:
-  group: vercel-deploy-${{ github.workflow }}-${{ github.event.number || github.sha }}
+  group: vercel-deploy-${{ github.workflow }}-${{ github.sha }}
   cancel-in-progress: true
 
 permissions:
@@ -38,9 +38,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
+          ref: ${{ github.sha }}
+
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
       - uses: pnpm/action-setup@v4
+
       - uses: actions/setup-node@v4
         with:
           node-version: 20
@@ -85,6 +90,11 @@ jobs:
     with:
       builder-url: ${{ needs.deployment.outputs.builder-url }}
       builder-host: ${{ needs.deployment.outputs.builder-host }}
+      environment: development
+    secrets:
+      # We are not passing the secret here (as it does not exist in the current environment).
+      # Instead, this serves as a signal to the calling workflow that it has permission to extract it from the environment.
+      PRIVATE_GITHUB_DEPLOY_TOKEN: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
   delete-github-deployments:
     needs: fixtures-test

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "packages/sdk-components-animation/private-src"]
+	path = packages/sdk-components-animation/private-src
+	url = [email protected]:webstudio-is/sdk-components-animation.git
+	branch = main

.storybook/main.ts

@@ -1,5 +1,19 @@
 import * as path from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
+import { existsSync, readdirSync } from "node:fs";
+
+const isFolderEmptyOrNotExists = (folderPath: string) => {
+  if (!existsSync(folderPath)) {
+    return true; // Folder does not exist
+  }
+  const contents = readdirSync(folderPath);
+
+  return contents.length === 0;
+};
+
+const hasPrivateFolders = !isFolderEmptyOrNotExists(
+  path.join(__dirname, "../../packages/sdk-components-animation/private-src")
+);
 
 const visualTestingStories: StorybookConfig["stories"] = [
   {
@@ -37,6 +51,10 @@ export default {
           directory: "../packages/sdk-components-react-radix",
           titlePrefix: "SDK Components React Radix",
         },
+        {
+          directory: "../packages/sdk-components-animation",
+          titlePrefix: "SDK Components Animation",
+        },
       ],
   framework: {
     name: "@storybook/react-vite",
@@ -50,6 +68,10 @@ export default {
   async viteFinal(config) {
     return {
       ...config,
+      optimizeDeps: {
+        exclude: ["scroll-timeline-polyfill"],
+      },
+
       define: {
         ...config.define,
         // storybook use "util" package internally which is bundled with stories
@@ -59,7 +81,17 @@ export default {
       },
       resolve: {
         ...config.resolve,
-        conditions: ["webstudio", "import", "module", "browser", "default"],
+        conditions: hasPrivateFolders
+          ? [
+              "webstudio-private",
+              "webstudio",
+              "import",
+              "module",
+              "browser",
+              "default",
+            ]
+          : ["webstudio", "import", "module", "browser", "default"],
+
         alias: [
           {
             find: "~",

@types/scroll-timeline.d.ts

@@ -0,0 +1,14 @@
+type ScrollAxis = "block" | "inline" | "x" | "y";
+
+interface ScrollTimelineOptions {
+  source?: Element | Document | null;
+  axis?: ScrollAxis;
+}
+
+declare class ScrollTimeline extends AnimationTimeline {
+  constructor(options?: ScrollTimelineOptions);
+}
+
+declare class ViewTimeline extends ScrollTimeline {
+  constructor(options?: ScrollTimelineOptions);
+}