[ { "path": ".devcontainer/.gitignore", "content": ".local" }, { "path": ".devcontainer/Dockerfile", "content": "FROM mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm\n\nENV PATH=/usr/local/bin:${PATH}\n# Install latest pnpm\n# RUN npm install -g pnpm@9.0.2\n\n# [Optional] Uncomment this section to install additional OS packages.\n# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \\\n# && apt-get -y install --no-install-recommends \n\n# [Optional] Uncomment if you want to install an additional version of node using nvm\n# ARG EXTRA_NODE_VERSION=10\n# RUN su node -c \"source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}\"\n\n# [Optional] Uncomment if you want to install more global node modules\n# RUN su node -c \"npm install -g \"\n\nCOPY library-scripts/*.sh /tmp/library-scripts/\n\nENV DOCKER_BUILDKIT=1\nRUN apt-get update\nRUN /bin/bash /tmp/library-scripts/docker-in-docker-debian.sh\n" }, { "path": ".devcontainer/devcontainer.json", "content": "// For format details, see https://aka.ms/devcontainer.json. For config options, see the\n// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node-postgres\n{\n \"name\": \"Node.js & PostgreSQL\",\n \"dockerComposeFile\": \"docker-compose.yml\",\n \"service\": \"app\",\n \"workspaceFolder\": \"/workspaces/webstudio\",\n \"features\": {\n \"ghcr.io/robbert229/devcontainer-features/postgresql-client:1\": {\n \"version\": \"15\"\n }\n },\n\n // Features to add to the dev container. More info: https://containers.dev/features.\n // \"features\": {},\n\n // Use 'forwardPorts' to make a list of ports inside the container available locally.\n // This can be used to network with other containers or with the host.\n // \"forwardPorts\": [3000, 5432],\n \"forwardPorts\": [5173],\n\n // Use 'postCreateCommand' to run commands after the container is created.\n\n \"postCreateCommand\": \".devcontainer/postinstall.sh\",\n // \"postStartCommand\": \"git config --global --add safe.directory ${containerWorkspaceFolder}\",\n \"customizations\": {\n \"vscode\": {\n \"extensions\": [\n \"esbenp.prettier-vscode\",\n \"redhat.vscode-yaml\",\n \"me-dutour-mathieu.vscode-github-actions\",\n \"eamodio.gitlens\",\n \"bradymholt.pgformatter\",\n \"YoavBls.pretty-ts-errors\",\n \"typescriptteam.native-preview\"\n ]\n }\n }\n\n // Configure tool-specific properties.\n // \"customizations\": {},\n\n // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.\n // \"remoteUser\": \"root\"\n}\n" }, { "path": ".devcontainer/docker-compose.yml", "content": "version: \"3.8\"\n\nservices:\n app:\n init: true\n privileged: true\n build:\n context: .\n dockerfile: Dockerfile\n\n volumes:\n - ..:/workspaces/webstudio:cached\n # preserve history\n - ./.local:/home/node/.local\n - docker-data:/var/lib/docker\n - ${HOME}/.github/instructions:/home/node/.github/instructions\n\n entrypoint: [\"/usr/local/share/docker-init.sh\"]\n # Overrides default command so things don't shut down after the process ends.\n command: sleep infinity\n # Runs app on the same network as the database container, allows \"forwardPorts\" in devcontainer.json function.\n network_mode: service:db\n\n depends_on:\n db:\n condition: service_healthy\n\n db:\n image: ghcr.io/supabase/postgres:15.1.1.55\n # Uncomment to log all queries\n command: [\"postgres\", \"-c\", \"log_statement=all\", \"-c\", \"listen_addresses=*\"]\n restart: unless-stopped\n volumes:\n - postgres-data:/var/lib/postgresql/data\n environment:\n POSTGRES_PASSWORD: pass\n POSTGRES_DB: webstudio\n\n ports:\n - ${PGPORT:-5432}:5432\n - 3000:3000\n\n healthcheck:\n test: [\"CMD-SHELL\", \"pg_isready -U postgres -d webstudio\"]\n interval: 10s\n timeout: 5s\n retries: 25\n\n rest:\n container_name: supabase-rest\n image: postgrest/postgrest:v12.2.0\n depends_on:\n db:\n # Disable this if you are using an external Postgres database\n condition: service_healthy\n restart: unless-stopped\n environment:\n PGRST_DB_URI: postgresql://postgres:pass@localhost/webstudio\n PGRST_DB_SCHEMAS: ${PGRST_DB_SCHEMAS:-public}\n PGRST_DB_ANON_ROLE: anon\n PGRST_JWT_SECRET: ${JWT_SECRET:-jwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecret}\n PGRST_DB_USE_LEGACY_GUCS: \"false\"\n PGRST_APP_SETTINGS_JWT_SECRET: ${JWT_SECRET:-jwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecret}\n PGRST_APP_SETTINGS_JWT_EXP: ${JWT_EXPIRY}\n command: \"postgrest\"\n\n # Runs app on the same network as the database container, allows \"forwardPorts\" in devcontainer.json function.\n network_mode: service:db\n\nvolumes:\n postgres-data:\n docker-data:\n" }, { "path": ".devcontainer/library-scripts/docker-in-docker-debian.sh", "content": "#!/usr/bin/env bash\n#-------------------------------------------------------------------------------------------------------------\n# Copyright (c) Microsoft Corporation. All rights reserved.\n# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.\n#-------------------------------------------------------------------------------------------------------------\n#\n# Docs: https://github.com/microsoft/vscode-dev-containers/blob/main/script-library/docs/docker-in-docker.md\n# Maintainer: The Dev Container spec maintainers\n\n\nDOCKER_VERSION=\"${VERSION:-\"latest\"}\" # The Docker/Moby Engine + CLI should match in version\nUSE_MOBY=\"${MOBY:-\"true\"}\"\nMOBY_BUILDX_VERSION=\"${MOBYBUILDXVERSION:-\"latest\"}\"\nDOCKER_DASH_COMPOSE_VERSION=\"${DOCKERDASHCOMPOSEVERSION:-\"latest\"}\" #latest, v2 or none\nAZURE_DNS_AUTO_DETECTION=\"${AZUREDNSAUTODETECTION:-\"true\"}\"\nDOCKER_DEFAULT_ADDRESS_POOL=\"${DOCKERDEFAULTADDRESSPOOL:-\"\"}\"\nUSERNAME=\"${USERNAME:-\"${_REMOTE_USER:-\"automatic\"}\"}\"\nINSTALL_DOCKER_BUILDX=\"${INSTALLDOCKERBUILDX:-\"true\"}\"\nINSTALL_DOCKER_COMPOSE_SWITCH=\"${INSTALLDOCKERCOMPOSESWITCH:-\"true\"}\"\nMICROSOFT_GPG_KEYS_URI=\"https://packages.microsoft.com/keys/microsoft.asc\"\nDOCKER_MOBY_ARCHIVE_VERSION_CODENAMES=\"bookworm buster bullseye bionic focal jammy noble\"\nDOCKER_LICENSED_ARCHIVE_VERSION_CODENAMES=\"bookworm buster bullseye bionic focal hirsute impish jammy noble\"\n\n# Default: Exit on any failure.\nset -e\n\n# Clean up\nrm -rf /var/lib/apt/lists/*\n\n# Setup STDERR.\nerr() {\n echo \"(!) $*\" >&2\n}\n\nif [ \"$(id -u)\" -ne 0 ]; then\n err 'Script must be run as root. Use sudo, su, or add \"USER root\" to your Dockerfile before running this script.'\n exit 1\nfi\n\n###################\n# Helper Functions\n# See: https://github.com/microsoft/vscode-dev-containers/blob/main/script-library/shared/utils.sh\n###################\n\n# Determine the appropriate non-root user\nif [ \"${USERNAME}\" = \"auto\" ] || [ \"${USERNAME}\" = \"automatic\" ]; then\n USERNAME=\"\"\n POSSIBLE_USERS=(\"vscode\" \"node\" \"codespace\" \"$(awk -v val=1000 -F \":\" '$3==val{print $1}' /etc/passwd)\")\n for CURRENT_USER in \"${POSSIBLE_USERS[@]}\"; do\n if id -u ${CURRENT_USER} > /dev/null 2>&1; then\n USERNAME=${CURRENT_USER}\n break\n fi\n done\n if [ \"${USERNAME}\" = \"\" ]; then\n USERNAME=root\n fi\nelif [ \"${USERNAME}\" = \"none\" ] || ! id -u ${USERNAME} > /dev/null 2>&1; then\n USERNAME=root\nfi\n\napt_get_update()\n{\n if [ \"$(find /var/lib/apt/lists/* | wc -l)\" = \"0\" ]; then\n echo \"Running apt-get update...\"\n apt-get update -y\n fi\n}\n\n# Checks if packages are installed and installs them if not\ncheck_packages() {\n if ! dpkg -s \"$@\" > /dev/null 2>&1; then\n apt_get_update\n apt-get -y install --no-install-recommends \"$@\"\n fi\n}\n\n# Figure out correct version of a three part version number is not passed\nfind_version_from_git_tags() {\n local variable_name=$1\n local requested_version=${!variable_name}\n if [ \"${requested_version}\" = \"none\" ]; then return; fi\n local repository=$2\n local prefix=${3:-\"tags/v\"}\n local separator=${4:-\".\"}\n local last_part_optional=${5:-\"false\"}\n if [ \"$(echo \"${requested_version}\" | grep -o \".\" | wc -l)\" != \"2\" ]; then\n local escaped_separator=${separator//./\\\\.}\n local last_part\n if [ \"${last_part_optional}\" = \"true\" ]; then\n last_part=\"(${escaped_separator}[0-9]+)?\"\n else\n last_part=\"${escaped_separator}[0-9]+\"\n fi\n local regex=\"${prefix}\\\\K[0-9]+${escaped_separator}[0-9]+${last_part}$\"\n local version_list=\"$(git ls-remote --tags ${repository} | grep -oP \"${regex}\" | tr -d ' ' | tr \"${separator}\" \".\" | sort -rV)\"\n if [ \"${requested_version}\" = \"latest\" ] || [ \"${requested_version}\" = \"current\" ] || [ \"${requested_version}\" = \"lts\" ]; then\n declare -g ${variable_name}=\"$(echo \"${version_list}\" | head -n 1)\"\n else\n set +e\n declare -g ${variable_name}=\"$(echo \"${version_list}\" | grep -E -m 1 \"^${requested_version//./\\\\.}([\\\\.\\\\s]|$)\")\"\n set -e\n fi\n fi\n if [ -z \"${!variable_name}\" ] || ! echo \"${version_list}\" | grep \"^${!variable_name//./\\\\.}$\" > /dev/null 2>&1; then\n err \"Invalid ${variable_name} value: ${requested_version}\\nValid values:\\n${version_list}\" >&2\n exit 1\n fi\n echo \"${variable_name}=${!variable_name}\"\n}\n\n# Use semver logic to decrement a version number then look for the closest match\nfind_prev_version_from_git_tags() {\n local variable_name=$1\n local current_version=${!variable_name}\n local repository=$2\n # Normally a \"v\" is used before the version number, but support alternate cases\n local prefix=${3:-\"tags/v\"}\n # Some repositories use \"_\" instead of \".\" for version number part separation, support that\n local separator=${4:-\".\"}\n # Some tools release versions that omit the last digit (e.g. go)\n local last_part_optional=${5:-\"false\"}\n # Some repositories may have tags that include a suffix (e.g. actions/node-versions)\n local version_suffix_regex=$6\n # Try one break fix version number less if we get a failure. Use \"set +e\" since \"set -e\" can cause failures in valid scenarios.\n set +e\n major=\"$(echo \"${current_version}\" | grep -oE '^[0-9]+' || echo '')\"\n minor=\"$(echo \"${current_version}\" | grep -oP '^[0-9]+\\.\\K[0-9]+' || echo '')\"\n breakfix=\"$(echo \"${current_version}\" | grep -oP '^[0-9]+\\.[0-9]+\\.\\K[0-9]+' 2>/dev/null || echo '')\"\n\n if [ \"${minor}\" = \"0\" ] && [ \"${breakfix}\" = \"0\" ]; then\n ((major=major-1))\n declare -g ${variable_name}=\"${major}\"\n # Look for latest version from previous major release\n find_version_from_git_tags \"${variable_name}\" \"${repository}\" \"${prefix}\" \"${separator}\" \"${last_part_optional}\"\n # Handle situations like Go's odd version pattern where \"0\" releases omit the last part\n elif [ \"${breakfix}\" = \"\" ] || [ \"${breakfix}\" = \"0\" ]; then\n ((minor=minor-1))\n declare -g ${variable_name}=\"${major}.${minor}\"\n # Look for latest version from previous minor release\n find_version_from_git_tags \"${variable_name}\" \"${repository}\" \"${prefix}\" \"${separator}\" \"${last_part_optional}\"\n else\n ((breakfix=breakfix-1))\n if [ \"${breakfix}\" = \"0\" ] && [ \"${last_part_optional}\" = \"true\" ]; then\n declare -g ${variable_name}=\"${major}.${minor}\"\n else\n declare -g ${variable_name}=\"${major}.${minor}.${breakfix}\"\n fi\n fi\n set -e\n}\n\n# Function to fetch the version released prior to the latest version\nget_previous_version() {\n local url=$1\n local repo_url=$2\n local variable_name=$3\n prev_version=${!variable_name}\n\n output=$(curl -s \"$repo_url\");\n message=$(echo \"$output\" | jq -r '.message')\n\n if [[ $message == \"API rate limit exceeded\"* ]]; then\n echo -e \"\\nAn attempt to find latest version using GitHub Api Failed... \\nReason: ${message}\"\n echo -e \"\\nAttempting to find latest version using GitHub tags.\"\n find_prev_version_from_git_tags prev_version \"$url\" \"tags/v\"\n declare -g ${variable_name}=\"${prev_version}\"\n else\n echo -e \"\\nAttempting to find latest version using GitHub Api.\"\n version=$(echo \"$output\" | jq -r '.tag_name')\n declare -g ${variable_name}=\"${version#v}\"\n fi\n echo \"${variable_name}=${!variable_name}\"\n}\n\nget_github_api_repo_url() {\n local url=$1\n echo \"${url/https:\\/\\/github.com/https:\\/\\/api.github.com\\/repos}/releases/latest\"\n}\n\n###########################################\n# Start docker-in-docker installation\n###########################################\n\n# Ensure apt is in non-interactive to avoid prompts\nexport DEBIAN_FRONTEND=noninteractive\n\n\n# Source /etc/os-release to get OS info\n. /etc/os-release\n# Fetch host/container arch.\narchitecture=\"$(dpkg --print-architecture)\"\n\n# Check if distro is supported\nif [ \"${USE_MOBY}\" = \"true\" ]; then\n if [[ \"${DOCKER_MOBY_ARCHIVE_VERSION_CODENAMES}\" != *\"${VERSION_CODENAME}\"* ]]; then\n err \"Unsupported distribution version '${VERSION_CODENAME}'. To resolve, either: (1) set feature option '\\\"moby\\\": false' , or (2) choose a compatible OS distribution\"\n err \"Support distributions include: ${DOCKER_MOBY_ARCHIVE_VERSION_CODENAMES}\"\n exit 1\n fi\n echo \"Distro codename '${VERSION_CODENAME}' matched filter '${DOCKER_MOBY_ARCHIVE_VERSION_CODENAMES}'\"\nelse\n if [[ \"${DOCKER_LICENSED_ARCHIVE_VERSION_CODENAMES}\" != *\"${VERSION_CODENAME}\"* ]]; then\n err \"Unsupported distribution version '${VERSION_CODENAME}'. To resolve, please choose a compatible OS distribution\"\n err \"Support distributions include: ${DOCKER_LICENSED_ARCHIVE_VERSION_CODENAMES}\"\n exit 1\n fi\n echo \"Distro codename '${VERSION_CODENAME}' matched filter '${DOCKER_LICENSED_ARCHIVE_VERSION_CODENAMES}'\"\nfi\n\n# Install dependencies\ncheck_packages apt-transport-https curl ca-certificates pigz iptables gnupg2 dirmngr wget jq\nif ! type git > /dev/null 2>&1; then\n check_packages git\nfi\n\n# Swap to legacy iptables for compatibility\nif type iptables-legacy > /dev/null 2>&1; then\n update-alternatives --set iptables /usr/sbin/iptables-legacy\n update-alternatives --set ip6tables /usr/sbin/ip6tables-legacy\nfi\n\n\n\n# Set up the necessary apt repos (either Microsoft's or Docker's)\nif [ \"${USE_MOBY}\" = \"true\" ]; then\n\n # Name of open source engine/cli\n engine_package_name=\"moby-engine\"\n cli_package_name=\"moby-cli\"\n\n # Import key safely and import Microsoft apt repo\n curl -sSL ${MICROSOFT_GPG_KEYS_URI} | gpg --dearmor > /usr/share/keyrings/microsoft-archive-keyring.gpg\n echo \"deb [arch=${architecture} signed-by=/usr/share/keyrings/microsoft-archive-keyring.gpg] https://packages.microsoft.com/repos/microsoft-${ID}-${VERSION_CODENAME}-prod ${VERSION_CODENAME} main\" > /etc/apt/sources.list.d/microsoft.list\nelse\n # Name of licensed engine/cli\n engine_package_name=\"docker-ce\"\n cli_package_name=\"docker-ce-cli\"\n\n # Import key safely and import Docker apt repo\n curl -fsSL https://download.docker.com/linux/${ID}/gpg | gpg --dearmor > /usr/share/keyrings/docker-archive-keyring.gpg\n echo \"deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/${ID} ${VERSION_CODENAME} stable\" > /etc/apt/sources.list.d/docker.list\nfi\n\n# Refresh apt lists\napt-get update\n\n# Soft version matching\nif [ \"${DOCKER_VERSION}\" = \"latest\" ] || [ \"${DOCKER_VERSION}\" = \"lts\" ] || [ \"${DOCKER_VERSION}\" = \"stable\" ]; then\n # Empty, meaning grab whatever \"latest\" is in apt repo\n engine_version_suffix=\"\"\n cli_version_suffix=\"\"\nelse\n # Fetch a valid version from the apt-cache (eg: the Microsoft repo appends +azure, breakfix, etc...)\n docker_version_dot_escaped=\"${DOCKER_VERSION//./\\\\.}\"\n docker_version_dot_plus_escaped=\"${docker_version_dot_escaped//+/\\\\+}\"\n # Regex needs to handle debian package version number format: https://www.systutorials.com/docs/linux/man/5-deb-version/\n docker_version_regex=\"^(.+:)?${docker_version_dot_plus_escaped}([\\\\.\\\\+ ~:-]|$)\"\n set +e # Don't exit if finding version fails - will handle gracefully\n cli_version_suffix=\"=$(apt-cache madison ${cli_package_name} | awk -F\"|\" '{print $2}' | sed -e 's/^[ \\t]*//' | grep -E -m 1 \"${docker_version_regex}\")\"\n engine_version_suffix=\"=$(apt-cache madison ${engine_package_name} | awk -F\"|\" '{print $2}' | sed -e 's/^[ \\t]*//' | grep -E -m 1 \"${docker_version_regex}\")\"\n set -e\n if [ -z \"${engine_version_suffix}\" ] || [ \"${engine_version_suffix}\" = \"=\" ] || [ -z \"${cli_version_suffix}\" ] || [ \"${cli_version_suffix}\" = \"=\" ] ; then\n err \"No full or partial Docker / Moby version match found for \\\"${DOCKER_VERSION}\\\" on OS ${ID} ${VERSION_CODENAME} (${architecture}). Available versions:\"\n apt-cache madison ${cli_package_name} | awk -F\"|\" '{print $2}' | grep -oP '^(.+:)?\\K.+'\n exit 1\n fi\n echo \"engine_version_suffix ${engine_version_suffix}\"\n echo \"cli_version_suffix ${cli_version_suffix}\"\nfi\n\n# Version matching for moby-buildx\nif [ \"${USE_MOBY}\" = \"true\" ]; then\n if [ \"${MOBY_BUILDX_VERSION}\" = \"latest\" ]; then\n # Empty, meaning grab whatever \"latest\" is in apt repo\n buildx_version_suffix=\"\"\n else\n buildx_version_dot_escaped=\"${MOBY_BUILDX_VERSION//./\\\\.}\"\n buildx_version_dot_plus_escaped=\"${buildx_version_dot_escaped//+/\\\\+}\"\n buildx_version_regex=\"^(.+:)?${buildx_version_dot_plus_escaped}([\\\\.\\\\+ ~:-]|$)\"\n set +e\n buildx_version_suffix=\"=$(apt-cache madison moby-buildx | awk -F\"|\" '{print $2}' | sed -e 's/^[ \\t]*//' | grep -E -m 1 \"${buildx_version_regex}\")\"\n set -e\n if [ -z \"${buildx_version_suffix}\" ] || [ \"${buildx_version_suffix}\" = \"=\" ]; then\n err \"No full or partial moby-buildx version match found for \\\"${MOBY_BUILDX_VERSION}\\\" on OS ${ID} ${VERSION_CODENAME} (${architecture}). Available versions:\"\n apt-cache madison moby-buildx | awk -F\"|\" '{print $2}' | grep -oP '^(.+:)?\\K.+'\n exit 1\n fi\n echo \"buildx_version_suffix ${buildx_version_suffix}\"\n fi\nfi\n\n# Install Docker / Moby CLI if not already installed\nif type docker > /dev/null 2>&1 && type dockerd > /dev/null 2>&1; then\n echo \"Docker / Moby CLI and Engine already installed.\"\nelse\n if [ \"${USE_MOBY}\" = \"true\" ]; then\n # Install engine\n set +e # Handle error gracefully\n apt-get -y install --no-install-recommends moby-cli${cli_version_suffix} moby-buildx${buildx_version_suffix} moby-engine${engine_version_suffix}\n exit_code=$?\n set -e\n\n if [ ${exit_code} -ne 0 ]; then\n err \"Packages for moby not available in OS ${ID} ${VERSION_CODENAME} (${architecture}). To resolve, either: (1) set feature option '\\\"moby\\\": false' , or (2) choose a compatible OS version (eg: 'ubuntu-20.04').\"\n exit 1\n fi\n\n # Install compose\n apt-get -y install --no-install-recommends moby-compose || err \"Package moby-compose (Docker Compose v2) not available for OS ${ID} ${VERSION_CODENAME} (${architecture}). Skipping.\"\n else\n apt-get -y install --no-install-recommends docker-ce-cli${cli_version_suffix} docker-ce${engine_version_suffix}\n # Install compose\n apt-get -y install --no-install-recommends docker-compose-plugin || echo \"(*) Package docker-compose-plugin (Docker Compose v2) not available for OS ${ID} ${VERSION_CODENAME} (${architecture}). Skipping.\"\n fi\nfi\n\necho \"Finished installing docker / moby!\"\n\ndocker_home=\"/usr/libexec/docker\"\ncli_plugins_dir=\"${docker_home}/cli-plugins\"\n\n# fallback for docker-compose\nfallback_compose(){\n local url=$1\n local repo_url=$(get_github_api_repo_url \"$url\")\n echo -e \"\\n(!) Failed to fetch the latest artifacts for docker-compose v${compose_version}...\"\n get_previous_version \"${url}\" \"${repo_url}\" compose_version\n echo -e \"\\nAttempting to install v${compose_version}\"\n curl -fsSL \"https://github.com/docker/compose/releases/download/v${compose_version}/docker-compose-linux-${target_compose_arch}\" -o ${docker_compose_path}\n}\n\n# If 'docker-compose' command is to be included\nif [ \"${DOCKER_DASH_COMPOSE_VERSION}\" != \"none\" ]; then\n case \"${architecture}\" in\n amd64) target_compose_arch=x86_64 ;;\n arm64) target_compose_arch=aarch64 ;;\n *)\n echo \"(!) Docker in docker does not support machine architecture '$architecture'. Please use an x86-64 or ARM64 machine.\"\n exit 1\n esac\n\n docker_compose_path=\"/usr/local/bin/docker-compose\"\n if [ \"${DOCKER_DASH_COMPOSE_VERSION}\" = \"v1\" ]; then\n err \"The final Compose V1 release, version 1.29.2, was May 10, 2021. These packages haven't received any security updates since then. Use at your own risk.\"\n INSTALL_DOCKER_COMPOSE_SWITCH=\"false\"\n\n if [ \"${target_compose_arch}\" = \"x86_64\" ]; then\n echo \"(*) Installing docker compose v1...\"\n curl -fsSL \"https://github.com/docker/compose/releases/download/1.29.2/docker-compose-Linux-x86_64\" -o ${docker_compose_path}\n chmod +x ${docker_compose_path}\n\n # Download the SHA256 checksum\n DOCKER_COMPOSE_SHA256=\"$(curl -sSL \"https://github.com/docker/compose/releases/download/1.29.2/docker-compose-Linux-x86_64.sha256\" | awk '{print $1}')\"\n echo \"${DOCKER_COMPOSE_SHA256} ${docker_compose_path}\" > docker-compose.sha256sum\n sha256sum -c docker-compose.sha256sum --ignore-missing\n elif [ \"${VERSION_CODENAME}\" = \"bookworm\" ]; then\n err \"Docker compose v1 is unavailable for 'bookworm' on Arm64. Kindly switch to use v2\"\n exit 1\n else\n # Use pip to get a version that runs on this architecture\n check_packages python3-minimal python3-pip libffi-dev python3-venv\n echo \"(*) Installing docker compose v1 via pip...\"\n export PYTHONUSERBASE=/usr/local\n pip3 install --disable-pip-version-check --no-cache-dir --user \"Cython<3.0\" pyyaml wheel docker-compose --no-build-isolation\n fi\n else\n compose_version=${DOCKER_DASH_COMPOSE_VERSION#v}\n docker_compose_url=\"https://github.com/docker/compose\"\n find_version_from_git_tags compose_version \"$docker_compose_url\" \"tags/v\"\n echo \"(*) Installing docker-compose ${compose_version}...\"\n curl -fsSL \"https://github.com/docker/compose/releases/download/v${compose_version}/docker-compose-linux-${target_compose_arch}\" -o ${docker_compose_path} || {\n if [[ $DOCKER_DASH_COMPOSE_VERSION == \"latest\" ]]; then\n fallback_compose \"$docker_compose_url\"\n else\n echo -e \"Error: Failed to install docker-compose v${compose_version}\"\n fi\n }\n\n chmod +x ${docker_compose_path}\n\n # Download the SHA256 checksum\n DOCKER_COMPOSE_SHA256=\"$(curl -sSL \"https://github.com/docker/compose/releases/download/v${compose_version}/docker-compose-linux-${target_compose_arch}.sha256\" | awk '{print $1}')\"\n echo \"${DOCKER_COMPOSE_SHA256} ${docker_compose_path}\" > docker-compose.sha256sum\n sha256sum -c docker-compose.sha256sum --ignore-missing\n\n mkdir -p ${cli_plugins_dir}\n cp ${docker_compose_path} ${cli_plugins_dir}\n fi\nfi\n\n# fallback method for compose-switch\nfallback_compose-switch() {\n local url=$1\n local repo_url=$(get_github_api_repo_url \"$url\")\n echo -e \"\\n(!) Failed to fetch the latest artifacts for compose-switch v${compose_switch_version}...\"\n get_previous_version \"$url\" \"$repo_url\" compose_switch_version\n echo -e \"\\nAttempting to install v${compose_switch_version}\"\n curl -fsSL \"https://github.com/docker/compose-switch/releases/download/v${compose_switch_version}/docker-compose-linux-${architecture}\" -o /usr/local/bin/compose-switch\n}\n\n# Install docker-compose switch if not already installed - https://github.com/docker/compose-switch#manual-installation\nif [ \"${INSTALL_DOCKER_COMPOSE_SWITCH}\" = \"true\" ] && ! type compose-switch > /dev/null 2>&1; then\n if type docker-compose > /dev/null 2>&1; then\n echo \"(*) Installing compose-switch...\"\n current_compose_path=\"$(which docker-compose)\"\n target_compose_path=\"$(dirname \"${current_compose_path}\")/docker-compose-v1\"\n compose_switch_version=\"latest\"\n compose_switch_url=\"https://github.com/docker/compose-switch\"\n find_version_from_git_tags compose_switch_version \"$compose_switch_url\"\n curl -fsSL \"https://github.com/docker/compose-switch/releases/download/v${compose_switch_version}/docker-compose-linux-${architecture}\" -o /usr/local/bin/compose-switch || fallback_compose-switch \"$compose_switch_url\"\n chmod +x /usr/local/bin/compose-switch\n # TODO: Verify checksum once available: https://github.com/docker/compose-switch/issues/11\n # Setup v1 CLI as alternative in addition to compose-switch (which maps to v2)\n mv \"${current_compose_path}\" \"${target_compose_path}\"\n update-alternatives --install ${docker_compose_path} docker-compose /usr/local/bin/compose-switch 99\n update-alternatives --install ${docker_compose_path} docker-compose \"${target_compose_path}\" 1\n else\n err \"Skipping installation of compose-switch as docker compose is unavailable...\"\n fi\nfi\n\n# If init file already exists, exit\nif [ -f \"/usr/local/share/docker-init.sh\" ]; then\n echo \"/usr/local/share/docker-init.sh already exists, so exiting.\"\n # Clean up\n rm -rf /var/lib/apt/lists/*\n exit 0\nfi\necho \"docker-init doesn't exist, adding...\"\n\nif ! cat /etc/group | grep -e \"^docker:\" > /dev/null 2>&1; then\n groupadd -r docker\nfi\n\nusermod -aG docker ${USERNAME}\n\n# fallback for docker/buildx\nfallback_buildx() {\n local url=$1\n local repo_url=$(get_github_api_repo_url \"$url\")\n echo -e \"\\n(!) Failed to fetch the latest artifacts for docker buildx v${buildx_version}...\"\n get_previous_version \"$url\" \"$repo_url\" buildx_version\n buildx_file_name=\"buildx-v${buildx_version}.linux-${architecture}\"\n echo -e \"\\nAttempting to install v${buildx_version}\"\n wget https://github.com/docker/buildx/releases/download/v${buildx_version}/${buildx_file_name}\n}\n\nif [ \"${INSTALL_DOCKER_BUILDX}\" = \"true\" ]; then\n buildx_version=\"latest\"\n docker_buildx_url=\"https://github.com/docker/buildx\"\n find_version_from_git_tags buildx_version \"$docker_buildx_url\" \"refs/tags/v\"\n echo \"(*) Installing buildx ${buildx_version}...\"\n buildx_file_name=\"buildx-v${buildx_version}.linux-${architecture}\"\n\n cd /tmp\n wget https://github.com/docker/buildx/releases/download/v${buildx_version}/${buildx_file_name} || fallback_buildx \"$docker_buildx_url\"\n\n docker_home=\"/usr/libexec/docker\"\n cli_plugins_dir=\"${docker_home}/cli-plugins\"\n\n mkdir -p ${cli_plugins_dir}\n mv ${buildx_file_name} ${cli_plugins_dir}/docker-buildx\n chmod +x ${cli_plugins_dir}/docker-buildx\n\n chown -R \"${USERNAME}:docker\" \"${docker_home}\"\n chmod -R g+r+w \"${docker_home}\"\n find \"${docker_home}\" -type d -print0 | xargs -n 1 -0 chmod g+s\nfi\n\ntee /usr/local/share/docker-init.sh > /dev/null \\\n<< EOF\n#!/bin/sh\n#-------------------------------------------------------------------------------------------------------------\n# Copyright (c) Microsoft Corporation. All rights reserved.\n# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.\n#-------------------------------------------------------------------------------------------------------------\n\nset -e\n\nAZURE_DNS_AUTO_DETECTION=${AZURE_DNS_AUTO_DETECTION}\nDOCKER_DEFAULT_ADDRESS_POOL=${DOCKER_DEFAULT_ADDRESS_POOL}\nEOF\n\ntee -a /usr/local/share/docker-init.sh > /dev/null \\\n<< 'EOF'\ndockerd_start=\"AZURE_DNS_AUTO_DETECTION=${AZURE_DNS_AUTO_DETECTION} DOCKER_DEFAULT_ADDRESS_POOL=${DOCKER_DEFAULT_ADDRESS_POOL} $(cat << 'INNEREOF'\n # explicitly remove dockerd and containerd PID file to ensure that it can start properly if it was stopped uncleanly\n find /run /var/run -iname 'docker*.pid' -delete || :\n find /run /var/run -iname 'container*.pid' -delete || :\n\n # -- Start: dind wrapper script --\n # Maintained: https://github.com/moby/moby/blob/master/hack/dind\n\n export container=docker\n\n if [ -d /sys/kernel/security ] && ! mountpoint -q /sys/kernel/security; then\n mount -t securityfs none /sys/kernel/security || {\n echo >&2 'Could not mount /sys/kernel/security.'\n echo >&2 'AppArmor detection and --privileged mode might break.'\n }\n fi\n\n # Mount /tmp (conditionally)\n if ! mountpoint -q /tmp; then\n mount -t tmpfs none /tmp\n fi\n\n set_cgroup_nesting()\n {\n # cgroup v2: enable nesting\n if [ -f /sys/fs/cgroup/cgroup.controllers ]; then\n # move the processes from the root group to the /init group,\n # otherwise writing subtree_control fails with EBUSY.\n # An error during moving non-existent process (i.e., \"cat\") is ignored.\n mkdir -p /sys/fs/cgroup/init\n xargs -rn1 < /sys/fs/cgroup/cgroup.procs > /sys/fs/cgroup/init/cgroup.procs || :\n # enable controllers\n sed -e 's/ / +/g' -e 's/^/+/' < /sys/fs/cgroup/cgroup.controllers \\\n > /sys/fs/cgroup/cgroup.subtree_control\n fi\n }\n\n # Set cgroup nesting, retrying if necessary\n retry_cgroup_nesting=0\n\n until [ \"${retry_cgroup_nesting}\" -eq \"5\" ];\n do\n set +e\n set_cgroup_nesting\n\n if [ $? -ne 0 ]; then\n echo \"(*) cgroup v2: Failed to enable nesting, retrying...\"\n else\n break\n fi\n\n retry_cgroup_nesting=`expr $retry_cgroup_nesting + 1`\n set -e\n done\n\n # -- End: dind wrapper script --\n\n # Handle DNS\n set +e\n cat /etc/resolv.conf | grep -i 'internal.cloudapp.net' > /dev/null 2>&1\n if [ $? -eq 0 ] && [ \"${AZURE_DNS_AUTO_DETECTION}\" = \"true\" ]\n then\n echo \"Setting dockerd Azure DNS.\"\n CUSTOMDNS=\"--dns 168.63.129.16\"\n else\n echo \"Not setting dockerd DNS manually.\"\n CUSTOMDNS=\"\"\n fi\n set -e\n\n if [ -z \"$DOCKER_DEFAULT_ADDRESS_POOL\" ]\n then\n DEFAULT_ADDRESS_POOL=\"\"\n else\n DEFAULT_ADDRESS_POOL=\"--default-address-pool $DOCKER_DEFAULT_ADDRESS_POOL\"\n fi\n\n # Start docker/moby engine\n ( dockerd $CUSTOMDNS $DEFAULT_ADDRESS_POOL > /tmp/dockerd.log 2>&1 ) &\nINNEREOF\n)\"\n\nsudo_if() {\n COMMAND=\"$*\"\n\n if [ \"$(id -u)\" -ne 0 ]; then\n sudo $COMMAND\n else\n $COMMAND\n fi\n}\n\nretry_docker_start_count=0\ndocker_ok=\"false\"\n\nuntil [ \"${docker_ok}\" = \"true\" ] || [ \"${retry_docker_start_count}\" -eq \"5\" ];\ndo\n # Start using sudo if not invoked as root\n if [ \"$(id -u)\" -ne 0 ]; then\n sudo /bin/sh -c \"${dockerd_start}\"\n else\n eval \"${dockerd_start}\"\n fi\n\n retry_count=0\n until [ \"${docker_ok}\" = \"true\" ] || [ \"${retry_count}\" -eq \"5\" ];\n do\n sleep 1s\n set +e\n docker info > /dev/null 2>&1 && docker_ok=\"true\"\n set -e\n\n retry_count=`expr $retry_count + 1`\n done\n\n if [ \"${docker_ok}\" != \"true\" ] && [ \"${retry_docker_start_count}\" != \"4\" ]; then\n echo \"(*) Failed to start docker, retrying...\"\n set +e\n sudo_if pkill dockerd\n sudo_if pkill containerd\n set -e\n fi\n\n retry_docker_start_count=`expr $retry_docker_start_count + 1`\ndone\n\n# Execute whatever commands were passed in (if any). This allows us\n# to set this script to ENTRYPOINT while still executing the default CMD.\nexec \"$@\"\nEOF\n\nchmod +x /usr/local/share/docker-init.sh\nchown ${USERNAME}:root /usr/local/share/docker-init.sh\n\n# Clean up\nrm -rf /var/lib/apt/lists/*\n\necho 'docker-in-docker-debian script has completed!'" }, { "path": ".devcontainer/postinstall.sh", "content": "#!/bin/bash\n\necho \"Running postinstall.sh\"\n\n# Aggressively clean npm and corepack caches\nnpm cache clean -f\nsudo rm -rf /tmp/corepack-cache\nsudo rm -rf /usr/local/lib/node_modules/corepack # Manually remove global corepack\n\n# Reinstall corepack globally via npm\nnpm install -g corepack@latest --force # Install latest corepack version\nsudo corepack enable # Re-enable corepack\n\n# Check corepack version after reinstall\ncorepack --version\n\n# Prepare pnpm (again, after corepack reinstall)\ncorepack prepare pnpm@9.14.4 --activate\n\n# Go to workspace directory\ncd /workspaces/webstudio\n\n# Configure pnpm store directory\npnpm config set store-dir $HOME/.pnpm-store\n\n# Clean up directories (optional)\nfind . -name 'node_modules' -type d -prune -exec rm -rf '{}' +\nfind . -name 'lib' -type d -prune -exec rm -rf '{}' +\nfind . -name 'build' -type d -prune -exec rm -rf '{}' +\nfind . -name 'dist' -type d -prune -exec rm -rf '{}' +\nfind . -name '.cache' -type d -prune -exec rm -rf '{}' +\nfind . -name '.pnpm-store' -type d -prune -exec rm -rf '{}' +\n\n# Install dependencies, build, and migrate\npnpm install\npnpm build\npnpm migrations migrate\n\n# Add git aliases\ncat << 'EOF' >> /home/node/.bashrc\nalias gitclean=\"(git remote | xargs git remote prune) && git branch -vv | egrep '('\\$(git remote | xargs | sed -e 's/ /|/g')')/.*: gone]' | awk '{print \\$1}' | xargs -r git branch -D\"\nalias gitrebase=\"git rebase --interactive main\"\nEOF\n\n# Symlink workspace GitHub instructions to mounted user instructions (for Copilot)\nif [ -d \"/home/node/.github/instructions\" ]; then\n mkdir -p /workspaces/webstudio/.github\n ln -sfn /home/node/.github/instructions /workspaces/webstudio/.github/instructions\nfi\n\n\necho \"postinstall.sh finished\"\n" }, { "path": ".editorconfig", "content": "root = true\n\n[*]\nend_of_line = lf\n" }, { "path": ".github/actions/add-status/action.yaml", "content": "name: Add status to commit\ndescription: Add status to commit\ninputs:\n url:\n description: \"URL\"\n required: true\n title:\n description: \"Title\"\n required: true\n description:\n description: \"Description\"\n required: true\n\nruns:\n using: \"composite\"\n steps:\n - name: Add URL to vercel deployment through *.prs.webstudio.is\n uses: actions/github-script@v7\n with:\n script: |\n const branch = context.payload.pull_request?.head?.ref ?? context.payload.ref?.replace('refs/heads/', '')\n const sha = context.payload.pull_request?.head?.sha ?? context.sha;\n\n const status = {\n state: 'success',\n target_url: '${{ inputs.url }}',\n description: '${{ inputs.description }}',\n context: '${{ inputs.title }}'\n };\n\n github.rest.repos.createCommitStatus({\n ...context.repo,\n sha,\n ...status\n });\n" }, { "path": ".github/actions/ci-setup/action.yml", "content": "name: CI setup\n\ndescription: |\n Sets up the CI environment for the project.\n\nruns:\n using: \"composite\"\n\n steps:\n - uses: pnpm/action-setup@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: pnpm\n - run: pnpm install --frozen-lockfile --ignore-scripts\n shell: bash\n" }, { "path": ".github/actions/submodules-checkout/action.yml", "content": "name: CI setup\n\ndescription: |\n Sets up the CI environment for the project.\n\ninputs:\n submodules-ssh-key:\n description: \"The SSH key to private submodules to use for the checkout\"\n required: true\n\nruns:\n using: \"composite\"\n\n steps:\n - name: Set up SSH for Git\n if: ${{ inputs.submodules-ssh-key }}\n run: |\n mkdir -p ~/.ssh\n echo \"${{ inputs.submodules-ssh-key }}\" > ~/.ssh/id_ed25519\n chmod 600 ~/.ssh/id_ed25519\n ssh-keyscan github.com >> ~/.ssh/known_hosts\n shell: bash\n\n - name: Verify SSH Connection (Optional)\n if: ${{ inputs.submodules-ssh-key }}\n run: |\n ssh -T git@github.com || true\n shell: bash\n\n - name: Verify SSH Connection (Optional)\n if: ${{ inputs.submodules-ssh-key }}\n run: |\n echo Branch is ${{ github.event.pull_request.head.ref || github.ref_name }}\n shell: bash\n\n - name: Try checkout submodules to the same branch as main repo\n if: ${{ inputs.submodules-ssh-key }}\n run: |\n ./submodules.sh ${{ github.event.pull_request.head.ref || github.ref_name }}\n shell: bash\n\n - name: Show main readme\n if: ${{ inputs.submodules-ssh-key }}\n run: |\n cat ./packages/sdk-components-animation/private-src/README.md || echo \"No README found\"\n shell: bash\n" }, { "path": ".github/actions/vercel/action.yaml", "content": "name: \"VERCEL BUILD AND DEPLOY\"\ndescription: \"Builds and deploy vercel project\"\n\ninputs:\n vercel-token:\n description: \"Vercel token\"\n required: true\n vercel-org-id:\n description: \"Vercel Organization ID\"\n required: true\n vercel-project-id:\n description: \"Vercel Project ID\"\n required: true\n ref-name:\n description: \"Branch\"\n required: true\n sha:\n description: \"Sha\"\n required: true\n environment:\n description: \"Sha\"\n required: true\n\noutputs:\n domain:\n description: \"Domain\"\n value: ${{ steps.deploy.outputs.domain }}\n inspect-url:\n description: \"Inspect URL\"\n value: ${{ steps.deploy.outputs.inspect-url }}\n alias:\n description: \"Alias\"\n value: ${{ steps.alias.outputs.value }}\n\nruns:\n using: \"composite\"\n steps:\n - id: branch\n run: |\n CLEAN_NAME=\"${REF_NAME/.staging/}\"\n CLEAN_NAME=$( echo \"${CLEAN_NAME}\" | sed 's/[^a-zA-Z0-9_-]//g' | tr A-Z a-z | tr _ - | sed 's/-\\{2,\\}/-/g' )\n echo \"value=${CLEAN_NAME}\" >> $GITHUB_OUTPUT\n shell: bash\n env:\n REF_NAME: ${{ inputs.ref-name }}\n\n - id: short_sha\n run: |\n SHORT_SHA=$( echo \"value=$(echo ${{ inputs.sha }} | cut -c1-7)\" )\n echo \"value=${SHORT_SHA}\" >> $GITHUB_OUTPUT\n shell: bash\n\n - name: CREATE VERCEL PROJECT FILE\n run: |\n mkdir -p .vercel\n cat <<\"EOF\" > .vercel/project.json\n {\n \"projectId\": \"${{ inputs.vercel-project-id }}\",\n \"orgId\": \"${{ inputs.vercel-org-id }}\",\n \"settings\": {\n \"framework\": \"remix\",\n \"devCommand\": \"pnpm dev\",\n \"installCommand\": \"pnpm install\",\n \"buildCommand\": \"pnpm --filter=@webstudio-is/http-client build && pnpm --filter=@webstudio-is/builder build\",\n \"outputDirectory\": null,\n \"rootDirectory\": \"apps/builder\",\n \"directoryListing\": false,\n \"nodeVersion\": \"20.x\"\n }\n }\n EOF\n shell: bash\n\n - name: Build\n run: |\n export GITHUB_SHA=${{ inputs.sha }}\n export GITHUB_REF_NAME=${{ inputs.ref-name }}\n\n pnpx vercel build\n shell: bash\n\n - name: Patch\n run: |\n # When we deploy on Vercel, it generates a URL like webstudio-saas-mahqcavgo-getwebstudio.vercel.app.\n # We use the alias oauth-wstd-00-staging.vercel.app for routing, which maps to oauth.staging.webstudio.is on the worker.\n # Issue: Vercel proxies also set x-forwarded-host, which overrides our header.\n # We are adding x-forwarded-ws-host on the worker as a workaround, but issues with request.url persist.\n # Remix and the Vercel adapter lack support for header selection https://github.com/vercel/vercel/blob/9d4d4b6deb6294506016106f78e71f1984adcc7f/packages/remix/defaults/server-node.mjs#L44\n # Patching server-node.mjs directly without installing Vercel CLI was unsuccessful, so we are using string replacement instead.\n\n mapfile -t matching_files < <(grep -rl \"req\\.headers\\['x-forwarded-host'\\] || req\\.headers\\.host\" \"./apps/builder/build\")\n if [ ${#matching_files[@]} -eq 0 ]; then\n echo \"No files found containing the specified string.\"\n exit 1\n fi\n\n echo \"Files containing 'req.headers['x-forwarded-host'] || req.headers.host':\"\n printf '%s\\n' \"${matching_files[@]}\"\n\n find ./apps/builder/build -type f -exec sed -i \"s/req\\.headers\\['x-forwarded-host'\\] || req\\.headers\\.host/req.headers['x-forwarded-ws-host'] || req.headers['x-forwarded-host'] || req.headers.host/g\" {} +\n shell: bash\n\n - name: Deploy\n id: deploy\n run: |\n pnpx vercel deploy \\\n --prebuilt \\\n --token ${{ inputs.vercel-token }} \\\n 2> >(tee info.txt >&2) | tee domain.txt\n\n echo \"domain=$(cat ./domain.txt)\" >> $GITHUB_OUTPUT\n echo \"inspect-url=$(cat info.txt | grep 'Inspect:' | awk '{print $2}')\" >> $GITHUB_OUTPUT\n\n shell: bash\n\n - name: Set Alias\n id: alias\n run: |\n ALIAS=\"${{ steps.branch.outputs.value }}\"\n\n pnpx vercel alias set \\\n \"${{ steps.deploy.outputs.domain }}\" \\\n \"${ALIAS}-wstd-00-${{ inputs.environment }}\" \\\n --token ${{ inputs.vercel-token }} \\\n --scope getwebstudio\n\n echo \"value=${ALIAS}\" >> $GITHUB_OUTPUT\n shell: bash\n" }, { "path": ".github/dependabot.yml", "content": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where the package manifests are located.\n# Please see the documentation for more information:\n# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates\n# https://containers.dev/guide/dependabot\n\nversion: 2\nupdates:\n - package-ecosystem: \"devcontainers\"\n directory: \"/\"\n schedule:\n interval: weekly\n" }, { "path": ".github/pull_request_template.md", "content": "## Description\n\n1. What is this PR about (link the issue and add a short description)\n\n## Steps for reproduction\n\n1. click button\n2. expect xyz\n\n## Code Review\n\n- [ ] hi @kof, I need you to do\n - conceptual review (architecture, feature-correctness)\n - detailed review (read every line)\n - test it on preview\n\n## Before requesting a review\n\n- [ ] made a self-review\n- [ ] added inline comments where things may be not obvious (the \"why\", not \"what\")\n\n## Before merging\n\n- [ ] tested locally and on preview environment (preview dev login: 0000)\n- [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document\n- [ ] added tests\n- [ ] if any new env variables are added, added them to `.env` file\n" }, { "path": ".github/workflows/build-figma-tokens.yml", "content": "name: Build and commit Figma tokens\n\non:\n push:\n branches:\n - figma-tokens\n paths:\n - packages/design-system/src/__generated__/figma-design-tokens.json\n\njobs:\n main:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v4\n with:\n # We don't need a token to push from an action,\n # but we need it if want the commit to trigger other workflows as normal\n token: ${{ secrets.ACCESS_TOKEN_FOR_FIGMA_TOKENS }}\n\n - uses: ./.github/actions/ci-setup\n\n - name: Configure git\n run: |\n git config --global user.name 'Bot (build-figma-tokens.yml)'\n git config --global user.email 'bot@localhost'\n\n - name: Switch branch\n run: git checkout figma-tokens\n\n - name: Build tokens\n run: pnpm build-figma-tokens\n\n - name: Commit and push\n run: |\n [[ -z `git status | grep figma-design-tokens.ts` ]] || git commit -m \"Update figma-design-tokens.ts\" packages/design-system/src/__generated__/figma-design-tokens.ts\n git push\n" }, { "path": ".github/workflows/check-submodules.yml", "content": "name: Check submodules\n\non:\n pull_request:\n\n# cancel in-progress runs on new commits to same PR (gitub.event.number)\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.sha }}\n cancel-in-progress: true\n\npermissions:\n contents: read # to fetch code (actions/checkout)\n\njobs:\n checks:\n timeout-minutes: 20\n\n environment:\n name: development\n\n env:\n DATABASE_URL: postgres://\n AUTH_SECRET: test\n\n runs-on: ubuntu-24.04-arm\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.event.pull_request.head.sha || github.sha }}\n\n - uses: ./.github/actions/submodules-checkout\n with:\n submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n - name: Check if any submodule branch matches github.ref_name\n run: |\n echo \"C ${{ github.workflow }}-${{ github.event.number || github.sha }}\"\n # Get the current branch or tag name\n REF_NAME=\"${{ github.event.pull_request.head.ref || github.ref_name }}\"\n\n echo \"Branch is:\" $REF_NAME\n\n # List all submodule paths\n SUBMODULES=$(git submodule status | awk '{print $2}')\n\n # Check each submodule's branch\n for SUBMODULE in $SUBMODULES; do\n echo \"Checking submodule: $SUBMODULE\"\n (\n cd \"$SUBMODULE\"\n # Get the current branch of the submodule\n SUBMODULE_BRANCH=$(git rev-parse --abbrev-ref HEAD)\n echo \"Submodule branch: $SUBMODULE_BRANCH\"\n\n # Compare the submodule branch to the ref_name\n if [ \"$SUBMODULE_BRANCH\" = \"$REF_NAME\" ]; then\n echo \"::error::Submodule '$SUBMODULE' is on branch '$SUBMODULE_BRANCH', which matches the current ref '$REF_NAME'.\"\n exit 1\n fi\n )\n if [ $? -ne 0 ]; then\n exit 1 # Fail the workflow if any submodule branch matches\n fi\n done\n\n echo \"No submodule is on the same branch as the current ref '$REF_NAME'.\"\n" }, { "path": ".github/workflows/chromatic.yml", "content": "name: Chromatic\n\non:\n push:\n branches:\n - main\n pull_request:\n pull_request_target:\n types: [labeled]\n\n# cancel in-progress runs on new commits to same PR (gitub.event.number)\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.sha }}\n cancel-in-progress: true\n\npermissions:\n contents: read # to fetch code (actions/checkout)\n\njobs:\n chromatic:\n # Run on push, regular PR (for repo branches), or labeled PR with safe-to-deploy (for forks)\n if: |\n github.event_name == 'push' ||\n github.event_name == 'pull_request' ||\n (github.event_name == 'pull_request_target' && github.event.label.name == 'safe-to-deploy')\n \n timeout-minutes: 20\n\n runs-on: ubuntu-latest\n\n environment:\n name: development\n\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 2 # we need to fetch at least parent commit to satisfy Chromatic\n ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit\n\n # Storybook with submodules\n - uses: ./.github/actions/submodules-checkout\n with:\n submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n - uses: ./.github/actions/ci-setup\n\n - name: Chromatic\n id: chromatic\n uses: chromaui/action@v11.3.0\n with:\n projectToken: bea8dc1981d4\n buildScriptName: storybook:build\n" }, { "path": ".github/workflows/cli-r2-static.yaml", "content": "name: CLI R2 SSG\n\non:\n push:\n branches:\n - \"*.staging\"\n\n# cancel in-progress runs on new commits to same PR (gitub.event.number)\nconcurrency:\n group: vercel-cli-r2-static-${{ github.workflow }}-${{ github.event.number || github.sha }}\n cancel-in-progress: true\n\npermissions:\n contents: read # to fetch code (actions/checkout)\n statuses: write # This is required for the GitHub Script createCommitStatus to work\n packages: write\n\njobs:\n build:\n env:\n COMPATIBILITY_DATE: 2024-04-10\n\n environment:\n name: \"staging\"\n\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.sha }} # HEAD commit instead of merge commit\n\n # We need submodules here as this is used for the cloudflare build\n - uses: ./.github/actions/submodules-checkout\n with:\n submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n - uses: pnpm/action-setup@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: pnpm\n\n # TRY FIX cloudlare incident\n - uses: unfor19/install-aws-cli-action@v1\n with:\n version: \"2.22.35\"\n verbose: false\n arch: amd64\n\n - name: pnpm instal\n run: pnpm install --ignore-scripts\n\n - name: pnpm build\n run: pnpm --filter 'ssg^...' run build\n\n # Ideally, execute 'pnpm deploy --prod', but @remix-run/dev doesn't support this flag.\n # Despite being listed as a dependency, @remix-run/dev does not install the remix cli.\n # TODO: Minimize artefact size due to frequent downloads on each publish.\n - name: pnpm deploy\n run: pnpm --filter 'ssg' deploy \"${{ github.workspace }}/../ssg-template\"\n\n - name: Make archive\n run: |\n tar --use-compress-program=\"zstd -19\" -cf ssg-template.tar.zst ssg-template\n working-directory: ${{ github.workspace }}/..\n\n - name: Copy artifact\n run: |\n # For staging\n aws s3 cp ssg-template.tar.zst \"s3://${ARTEFACT_BUCKET_NAME}/public/ssg-template/${{ github.ref_name }}.tar.zst\"\n\n # For production can be cached forever\n aws s3 cp \\\n --metadata-directive REPLACE --cache-control \"public,max-age=31536102,immutable\" \\\n ssg-template.tar.zst \"s3://${ARTEFACT_BUCKET_NAME}/public/ssg-template/${{ github.sha }}.tar.zst\"\n\n working-directory: ${{ github.workspace }}/..\n env:\n AWS_ENDPOINT_URL_S3: ${{ secrets.AWS_ENDPOINT_URL_S3 }}\n AWS_REGION: ${{ secrets.AWS_REGION }}\n AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}\n AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n ARTEFACT_BUCKET_NAME: ${{ secrets.ARTEFACT_BUCKET_NAME }}\n\n checks:\n environment:\n name: \"staging\"\n\n runs-on: ubuntu-latest\n\n needs: build\n\n steps:\n - uses: pnpm/action-setup@v4\n with:\n version: \"9\"\n\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n\n - name: Copy atrifact via http\n run: curl -o ssg-template.tar.zst ${{ secrets.ARTEFACT_BUCKET_URL }}/public/ssg-template/${{ github.ref_name }}.tar.zst\n\n - name: Extract archive\n run: tar --use-compress-program=\"zstd -d\" -xf ssg-template.tar.zst -C .\n\n - name: Webstudio Build\n run: pnpm webstudio build --template ssg --template internal\n working-directory: ${{ github.workspace }}/ssg-template\n\n - name: Build\n run: pnpm build\n working-directory: ${{ github.workspace }}/ssg-template\n" }, { "path": ".github/workflows/cli-r2.yaml", "content": "name: CLI R2\n\non:\n push:\n branches:\n - \"*.staging\"\n\n# cancel in-progress runs on new commits to same PR (gitub.event.number)\nconcurrency:\n group: vercel-cli-r2-${{ github.workflow }}-${{ github.event.number || github.sha }}\n cancel-in-progress: true\n\npermissions:\n contents: read # to fetch code (actions/checkout)\n statuses: write # This is required for the GitHub Script createCommitStatus to work\n packages: write\n deployments: write\n\njobs:\n build:\n env:\n COMPATIBILITY_DATE: 2024-04-10\n\n environment:\n name: \"staging\"\n\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.sha }} # HEAD commit instead of merge commit\n\n # We need submodules here as this is used for the cloudflare build\n - uses: ./.github/actions/submodules-checkout\n with:\n submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n - uses: pnpm/action-setup@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: pnpm\n\n # TRY FIX cloudlare incident\n - uses: unfor19/install-aws-cli-action@v1\n with:\n version: \"2.22.35\"\n verbose: false\n arch: amd64\n\n - name: pnpm instal\n run: pnpm install --ignore-scripts\n\n - name: pnpm build\n run: pnpm --filter 'webstudio-cloudflare-template^...' run build\n\n # Ideally, execute 'pnpm deploy --prod', but @remix-run/dev doesn't support this flag.\n # Despite being listed as a dependency, @remix-run/dev does not install the remix cli.\n # TODO: Minimize artefact size due to frequent downloads on each publish.\n - name: pnpm deploy\n run: pnpm --filter 'webstudio-cloudflare-template' deploy \"${{ github.workspace }}/../cloudflare-template\"\n\n - name: Make archive\n run: |\n tar --use-compress-program=\"zstd -19\" -cf cloudflare-template.tar.zst cloudflare-template\n working-directory: ${{ github.workspace }}/..\n\n - name: Copy artifact\n run: |\n # For staging\n aws s3 cp cloudflare-template.tar.zst \"s3://${ARTEFACT_BUCKET_NAME}/public/cloudflare-template/${{ github.ref_name }}.tar.zst\"\n\n # For production can be cached forever\n aws s3 cp \\\n --metadata-directive REPLACE --cache-control \"public,max-age=31536102,immutable\" \\\n cloudflare-template.tar.zst \"s3://${ARTEFACT_BUCKET_NAME}/public/cloudflare-template/${{ github.sha }}.tar.zst\"\n\n working-directory: ${{ github.workspace }}/..\n env:\n AWS_ENDPOINT_URL_S3: ${{ secrets.AWS_ENDPOINT_URL_S3 }}\n AWS_REGION: ${{ secrets.AWS_REGION }}\n AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}\n AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n ARTEFACT_BUCKET_NAME: ${{ secrets.ARTEFACT_BUCKET_NAME }}\n\n checks:\n environment:\n name: \"staging\"\n\n runs-on: ubuntu-latest\n\n needs: build\n\n steps:\n - uses: pnpm/action-setup@v4\n with:\n version: \"9\"\n\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n\n - name: Copy atrifact via http\n run: curl -o cloudflare-template.tar.zst ${{ secrets.ARTEFACT_BUCKET_URL }}/public/cloudflare-template/${{ github.ref_name }}.tar.zst\n\n - name: Extract archive\n run: tar --use-compress-program=\"zstd -d\" -xf cloudflare-template.tar.zst -C .\n\n - name: Webstudio Build\n run: pnpm webstudio build --template internal --template saas-helpers --template cloudflare --assets false\n working-directory: ${{ github.workspace }}/cloudflare-template\n\n - name: Remix Build\n run: pnpm build\n working-directory: ${{ github.workspace }}/cloudflare-template\n\n - name: WRANGLER Build\n run: |\n NODE_ENV=production pnpm wrangler deploy \\\n --name build \\\n --compatibility-date '${COMPATIBILITY_DATE}' \\\n --minify true \\\n --logpush true \\\n --dry-run \\\n --outdir dist \\\n './functions/[[path]].ts'\n\n working-directory: ${{ github.workspace }}/cloudflare-template\n\n delete-github-deployments:\n needs: checks\n uses: ./.github/workflows/delete-github-deployments.yml\n with:\n ref: ${{ github.ref_name }}\n" }, { "path": ".github/workflows/delete-github-deployments.yml", "content": "# https://github.com/orgs/community/discussions/36919\nname: Delete github deployments\n\non:\n workflow_call:\n inputs:\n ref:\n type: string\n required: true\n\npermissions:\n deployments: write\n\njobs:\n delete_github_deployments:\n runs-on: ubuntu-latest\n if: ${{ always() }}\n steps:\n - name: Delete Previous deployments\n uses: actions/github-script@v7\n env:\n REF: ${{ inputs.ref }}\n with:\n script: |\n const { REF } = process.env;\n\n console.log(REF);\n\n const deployments = await github.rest.repos.listDeployments({\n owner: context.repo.owner,\n repo: context.repo.repo,\n ref: REF,\n per_page: 100\n });\n\n console.log(deployments);\n\n await Promise.allSettled(\n deployments.data.map(async (deployment) => {\n await github.rest.repos.createDeploymentStatus({\n owner: context.repo.owner,\n repo: context.repo.repo,\n deployment_id: deployment.id,\n state: 'inactive'\n });\n return github.rest.repos.deleteDeployment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n deployment_id: deployment.id\n });\n })\n );\n" }, { "path": ".github/workflows/fixtures-test.yml", "content": "name: Fixtures tests\n\non:\n workflow_call:\n inputs:\n builder-url:\n required: true\n type: string\n builder-host:\n required: true\n type: string\n environment:\n required: true\n type: string\n secrets:\n PRIVATE_GITHUB_DEPLOY_TOKEN:\n required: true\n\npermissions:\n contents: read # to fetch code (actions/checkout)\n\njobs:\n checks:\n timeout-minutes: 20\n\n strategy:\n matrix:\n os: [ubuntu-latest, windows-latest]\n\n runs-on: ${{ matrix.os }}\n\n environment:\n name: ${{ inputs.environment }}\n\n env:\n DATABASE_URL: postgres://\n AUTH_SECRET: test\n BUILDER_URL_DEPRECATED: ${{ inputs.builder-url }}\n BUILDER_HOST: ${{ inputs.builder-host }}\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.event.pull_request.head.sha || github.sha }}\n # Test that everything is working with submodules\n - uses: ./.github/actions/submodules-checkout\n with:\n submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n - uses: ./.github/actions/ci-setup\n\n # Testing fixtures for vercel template\n - name: Test cli --help flag\n working-directory: ./fixtures/webstudio-features\n run: pnpm cli --help\n\n - name: Testing cli link command\n run: pnpm --filter='./fixtures/*' --sequential run fixtures:link\n\n - name: Testing cli sync command\n run: pnpm --filter='./fixtures/*' run --parallel fixtures:sync\n\n - name: Testing cli build command\n run: pnpm --filter='./fixtures/*' run --parallel fixtures:build\n\n - name: Prepare for diffing\n shell: bash\n run: |\n find . -type f -path \"./fixtures/*/.webstudio/data.json\" -exec sed -i 's|\"origin\": \".*\"|\"origin\": \"https://main.development.webstudio.is\"|g' {} +\n\n - name: Test git diff\n # This command will fail if there are uncommitted changes, i.e something has broken\n run: git diff --name-only HEAD --exit-code\n\n - name: Show changed files and diff\n if: ${{ failure() }}\n run: |\n echo \"Changed files are:\"\n git diff --name-only HEAD\n git diff HEAD | head -n 1000\n" }, { "path": ".github/workflows/lint-pull-request.yaml", "content": "name: \"Lint PR\"\n\non:\n pull_request:\n types:\n - opened\n - edited\n - synchronize\n\n pull_request_target:\n types:\n - opened\n - edited\n - synchronize\n\npermissions:\n pull-requests: write\n\njobs:\n main:\n name: Validate PR title\n runs-on: ubuntu-latest\n steps:\n - uses: amannn/action-semantic-pull-request@v5\n id: lint_pr_title\n with:\n # Configure which types are allowed (newline-delimited).\n # Default: https://github.com/commitizen/conventional-commit-types\n types: |\n feat\n fix\n docs\n style\n refactor\n perf\n test\n build\n ci\n chore\n revert\n experimental\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n\n - if: always() && (steps.lint_pr_title.outputs.error_message != null)\n uses: marocchino/sticky-pull-request-comment@v2\n # When the previous steps fails, the workflow would stop. By adding this\n # condition you can continue the execution with the populated error message.\n\n with:\n header: pr-title-lint-error\n message: |\n Hey there and thank you for opening this pull request! 👋🏼\n\n We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.\n\n Details:\n\n ```\n ${{ steps.lint_pr_title.outputs.error_message }}\n ```\n
\n Release types\n\n - **feat** - A new feature\n - **fix** - A bug fix\n - **docs** - Documentation only changes\n - **style** - Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n - **refactor** - A code change that neither fixes a bug nor adds a feature\n - **perf** - A code change that improves performance\n - **test** - Adding missing tests or correcting existing tests\n - **build** - Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n - **ci** - Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n - **chore** - Other changes that don't modify src or test files\n - **revert** - Reverts a previous commit\n - **experimental** - Flagged feature\n\n
\n\n # Delete a previous comment when the issue has been resolved\n - if: ${{ steps.lint_pr_title.outputs.error_message == null }}\n uses: marocchino/sticky-pull-request-comment@v2\n with:\n header: pr-title-lint-error\n delete: true\n" }, { "path": ".github/workflows/main.yml", "content": "name: Main workflow\n\non:\n push:\n branches:\n - main\n pull_request:\n pull_request_target:\n types: [labeled]\n\n# cancel in-progress runs on new commits to same PR (gitub.event.number)\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.sha }}\n cancel-in-progress: true\n\npermissions:\n contents: read # to fetch code (actions/checkout)\n\njobs:\n checks:\n # Run on push, regular PR (for repo branches), or labeled PR with safe-to-deploy (for forks)\n if: |\n github.event_name == 'push' ||\n github.event_name == 'pull_request' ||\n (github.event_name == 'pull_request_target' && github.event.label.name == 'safe-to-deploy')\n \n timeout-minutes: 20\n\n strategy:\n matrix:\n environment:\n - empty\n - development\n\n environment:\n name: ${{ matrix.environment }}\n\n env:\n DATABASE_URL: postgres://\n AUTH_SECRET: test\n\n runs-on: ubuntu-24.04-arm\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.event.pull_request.head.sha || github.sha }}\n\n # Will not checkout submodules on empty environment, and will on development\n - uses: ./.github/actions/submodules-checkout\n with:\n submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n - uses: pnpm/action-setup@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: 22\n cache: pnpm\n\n - name: Pnpm install\n run: |\n pnpm install\n\n - uses: actions/cache@v4\n with:\n path: |\n ./node_modules/.cache/prettier/.prettier-cache\n key: checks-${{ github.sha }}\n restore-keys: checks-\n\n - run: echo ===SHA USED=== ${{ github.event.pull_request.head.sha || github.sha }} # todo: remove after check whats happening on main\n\n - run: |\n pnpm prettier --cache --check \"**/*.{js,md,ts,tsx}\"\n\n - name: Lint\n run: |\n pnpm lint\n\n - name: Cache Playwright browsers\n uses: actions/cache@v4\n with:\n path: ~/.cache/ms-playwright\n key: playwright-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n playwright-${{ runner.os }}-\n\n - name: Playwright init\n run: |\n pnpm playwright install\n working-directory: packages/sdk-components-animation\n\n - name: Test\n run: |\n pnpm -r test\n\n - name: Typecheck\n run: |\n pnpm -r typecheck\n\n check-size:\n runs-on: ubuntu-24.04-arm\n\n environment:\n name: development\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.event.pull_request.head.sha || github.sha }}\n\n - uses: ./.github/actions/submodules-checkout\n with:\n submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n - uses: ./.github/actions/ci-setup\n\n - run: pnpm --filter \"{./fixtures/*}...\" build\n\n - uses: actions/github-script@v7\n with:\n script: |\n const assertSize = async (directory, maxSize) => {\n let result = ''\n await exec.exec('du', ['-sk', directory], {\n silent: true,\n listeners: {\n stdout: (data) => {\n result += data.toString()\n }\n }\n })\n const size = Number.parseInt(result, 10)\n return {\n passed: size <= maxSize,\n size,\n diff: size - maxSize,\n directory,\n }\n }\n const results = [\n await assertSize('./fixtures/ssg/dist/client', 356),\n await assertSize('./fixtures/react-router-netlify/build/client', 376),\n await assertSize('./fixtures/webstudio-features/build/client', 3312),\n ]\n for (const result of results) {\n if (result.passed) {\n console.info(`${result.directory}: ${result.size}kB (${result.diff}kB)`)\n } else {\n console.info('')\n console.error(`${result.directory}: ${result.size}kB (+${result.diff}kB)`)\n }\n }\n if (results.some(result => result.passed === false)) {\n console.error('Some fixtures exceeded limits')\n process.exit(1)\n }\n" }, { "path": ".github/workflows/migrate.yaml", "content": "name: Migrate\n\non:\n push:\n branches:\n - \"migrate\"\n - \"main\"\n - \"*.staging\"\n - \"*.migrate\"\n\n# Pending if other migration from the same branch is running\nconcurrency: migrate-${{ github.ref_name }}\n\npermissions:\n contents: read # to fetch code (actions/checkout)\n statuses: write # This is required for the GitHub Script createCommitStatus to work\n\njobs:\n migrate:\n # This workflow is triggered only on pushes to the `main`, `*.staging` or 'migrate' branches.\n # For `*.staging` and `migrate` it specifically checks if the commit message starts with `::migrate::`,\n # indicating a migration-related change.\n #\n # Example usage:\n # Execute a commit with a migration flag using:\n # git commit --allow-empty -m \"::migrate::test description\"\n # Note:\n # This setup is a temporary measure. The intention is to transition to a fully automated publish and release process via GitHub Actions in the future.\n if: (github.ref_name == 'main') || ((github.ref_name == 'migrate' || endsWith(github.ref_name, '.migrate') || endsWith(github.ref_name, '.staging')) && startsWith(github.event.head_commit.message, '::migrate::'))\n\n runs-on: ubuntu-latest\n\n environment:\n name: ${{ (startsWith(github.ref_name, 'release') && endsWith(github.ref_name, '.staging')) && 'postgres_production' || 'postgres_development' }}\n\n timeout-minutes: 20\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.sha }} # HEAD commit instead of merge commit\n\n - uses: pnpm/action-setup@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: pnpm\n\n - name: pnpm instal\n run: pnpm install --ignore-scripts\n\n - name: generate prisma\n run: pnpm --filter=@webstudio-is/prisma-client generate\n\n - name: execute migration\n run: pnpm --filter '@webstudio-is/prisma-client' run migrations migrate\n env:\n DIRECT_URL: ${{ secrets.DIRECT_URL }}\n\n # Execute db tests (runs after migrations, even if they fail)\n db-tests:\n # Always run tests to see failures on CI, but only after migrate job completes\n if: always()\n\n needs: [migrate]\n\n runs-on: ubuntu-latest\n\n environment:\n name: ${{ (startsWith(github.ref_name, 'release') && endsWith(github.ref_name, '.staging')) && 'postgres_production' || 'postgres_development' }}\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.sha }} # HEAD commit instead of merge commit\n\n - uses: pnpm/action-setup@v4\n\n - name: Run database tests\n run: pnpm -r db-test\n env:\n DIRECT_URL: ${{ secrets.DIRECT_URL }}\n\n # Prints pending migrations\n pending:\n if: always()\n\n needs: [migrate]\n\n runs-on: ubuntu-latest\n\n environment:\n name: ${{ (startsWith(github.ref_name, 'release') && endsWith(github.ref_name, '.staging')) && 'postgres_production' || 'postgres_development' }}\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.sha }} # HEAD commit instead of merge commit\n\n - uses: pnpm/action-setup@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: pnpm\n\n - name: pnpm instal\n run: pnpm install --ignore-scripts\n\n - name: generate prisma\n run: pnpm --filter=@webstudio-is/prisma-client generate\n\n - name: get pending\n id: pending\n run: |\n echo \"value=$(pnpm --filter '@webstudio-is/prisma-client' run migrations pending-count | grep ::pending-count::)\" >> $GITHUB_OUTPUT\n env:\n DIRECT_URL: ${{ secrets.DIRECT_URL }}\n\n - uses: ./.github/actions/add-status\n with:\n title: \"⭕ Pending Migrations\"\n description: ${{ steps.pending.outputs.value }}\n url: \"https://webstudio.is\"\n" }, { "path": ".github/workflows/publish-beta.yml", "content": "name: Publish beta packages on NPM 📦\n\non:\n pull_request:\n types:\n - labeled\n\njobs:\n publish:\n # prevents this action from running on forks\n if: |\n github.repository_owner == 'webstudio-is' &&\n startsWith(github.event.label.name, 'publish:')\n\n timeout-minutes: 20\n\n runs-on: ubuntu-latest\n\n env:\n DATABASE_URL: postgres://\n AUTH_SECRET: test\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit\n\n - uses: pnpm/action-setup@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 22\n cache: pnpm\n\n - name: Creating .npmrc\n run: |\n cat << EOF > \"$HOME/.npmrc\"\n //registry.npmjs.org/:_authToken=$NPM_TOKEN\n EOF\n env:\n NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n\n # compute short sha\n - id: short_sha\n run: echo \"value=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)\" >> $GITHUB_OUTPUT\n\n - id: tag\n run: echo \"value=$(echo ${{ github.event.label.name }} | cut -d ':' -f2)\" >> $GITHUB_OUTPUT\n\n - name: bump version to 0.0.0-${{ steps.short_sha.outputs.value }}\n run: |\n pnpx replace-in-files-cli \\\n --string=\"0.0.0-webstudio-version\" \\\n --replacement=\"0.0.0-${{ steps.short_sha.outputs.value }}\" \\\n \"**/package.json\"\n\n - run: pnpm install --ignore-scripts\n - run: pnpm --filter=\"webstudio...\" build\n - run: pnpm --filter=\"webstudio...\" dts\n\n - name: Publishing ${{ steps.tag.outputs.value }} tag with sha ${{ steps.short_sha.outputs.value }}\n run: pnpm -r publish --tag \"${{ steps.tag.outputs.value }}\" --no-git-checks --access public\n" }, { "path": ".github/workflows/re-create-figma-tokens-branch.yml", "content": "name: Re-create branch for Figma tokens\n\non: delete\n\npermissions:\n contents: write\n\njobs:\n main:\n runs-on: ubuntu-latest\n\n # run if figma-tokens was deleted\n if: ${{ github.event.ref == 'figma-tokens'}}\n\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Re-create branch\n run: |\n git checkout main\n git checkout -b figma-tokens\n git push --set-upstream origin figma-tokens\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n push:\n tags:\n - '[0-9]+.[0-9]+.[0-9]+'\n\njobs:\n release:\n runs-on: ubuntu-latest\n permissions:\n contents: write\n steps:\n - uses: actions/github-script@v7\n with:\n script: |\n const latestRelease = await github.rest.repos.getLatestRelease({\n owner: context.repo.owner,\n repo: context.repo.repo,\n })\n const commits = await github.rest.repos.compareCommitsWithBasehead({\n owner: context.repo.owner,\n repo: context.repo.repo,\n basehead: `refs/tags/${latestRelease.data.tag_name}...${context.ref}`,\n })\n\n const groups = {\n feat: [`## Features\\n`],\n fix: [`## Fixes\\n`],\n docs: [`## Documentation\\n`],\n experimental: [`## Experimental\\n`],\n other: [`## Other changes\\n`],\n }\n for (const commit of commits.data.commits) {\n const match = commit.commit.message.match(/^(?\\w+)\\s*:\\s*(?.+)\\n*/)\n const type = match?.groups?.type\n const message = match?.groups?.message\n if (type && message) {\n const availableType = type in groups ? type : 'other'\n const capitalized = message[0].toLocaleUpperCase() + message.slice(1)\n groups[availableType].push(`- ${capitalized} by @${commit.author.login}`)\n }\n }\n\n const tag_name = context.ref.slice('refs/tags/'.length)\n const fullChangelog = `**Full Changelog**: https://github.com/${context.repo.owner}/${context.repo.repo}/compare/${latestRelease.data.tag_name}...${tag_name}`\n const changelog = Object.values(groups)\n .filter(lines => lines.length > 1)\n .map(lines => lines.join('\\n'))\n .concat(fullChangelog)\n .join('\\n\\n')\n console.info(changelog)\n\n await github.rest.repos.createRelease({\n owner: context.repo.owner,\n repo: context.repo.repo,\n tag_name,\n name: tag_name,\n body: changelog,\n })\n\n publish:\n runs-on: ubuntu-latest\n permissions:\n contents: write\n environment:\n name: development\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.ref }} # tag name\n - uses: ./.github/actions/submodules-checkout\n with:\n submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n - uses: pnpm/action-setup@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 22\n cache: pnpm\n\n - id: version\n run: echo \"value=$(echo ${{ github.ref }} | sed 's/refs\\/tags\\///')\" >> $GITHUB_OUTPUT\n - name: bump version to ${{ steps.version.outputs.value }}\n run: |\n pnpx replace-in-files-cli \\\n --string=\"0.0.0-webstudio-version\" \\\n --replacement=\"${{ steps.version.outputs.value }}\" \\\n \"**/package.json\"\n\n - name: pnpm instal\n run: pnpm install --ignore-scripts\n - run: pnpm --filter=\"webstudio...\" build\n - run: pnpm --filter=\"webstudio...\" dts\n\n - name: Creating .npmrc\n run: |\n cat << EOF > \"$HOME/.npmrc\"\n //registry.npmjs.org/:_authToken=$NPM_TOKEN\n EOF\n env:\n NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n - run: pnpm -r publish --access public --no-git-checks\n" }, { "path": ".github/workflows/vercel-deploy-staging.yml", "content": "name: Vercel Deploy Staging\n\non:\n push:\n pull_request_target:\n types: [labeled, synchronize]\n\n# cancel in-progress runs on new commits to same PR (gitub.event.number)\nconcurrency:\n group: vercel-deploy-${{ github.workflow }}-${{ github.event.pull_request.number || github.sha }}\n cancel-in-progress: true\n\npermissions:\n contents: read # to fetch code (actions/checkout)\n statuses: write # This is required for the GitHub Script createCommitStatus to work\n deployments: write\n pull-requests: write # needed to remove labels and comment\n\njobs:\n # Remove the safe-to-deploy label when new commits are pushed to a PR (requires re-review)\n remove-label-on-update:\n if: github.event_name == 'pull_request_target' && github.event.action == 'synchronize'\n runs-on: ubuntu-latest\n steps:\n - name: Remove safe-to-deploy label\n uses: actions/github-script@v7\n with:\n script: |\n await github.rest.issues.removeLabel({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: context.issue.number,\n name: 'safe-to-deploy'\n }).catch(() => {});\n console.log('Removed safe-to-deploy label due to new commits. Re-review required.');\n\n deployment:\n # Run on push (for repo branches) OR on labeled event with safe-to-deploy label (for fork PRs)\n if: |\n github.event_name == 'push' ||\n (github.event_name == 'pull_request_target' && github.event.action == 'labeled' && github.event.label.name == 'safe-to-deploy')\n \n # Execute development and staging on staging branches\n # Execute only development on all other branches\n strategy:\n matrix:\n environment:\n - staging\n - development\n is-staging:\n - ${{ github.event_name == 'push' && endsWith(github.ref_name, '.staging') }}\n exclude:\n - environment: staging\n is-staging: false\n\n environment:\n name: ${{ matrix.environment }}\n\n timeout-minutes: 20\n\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.event_name == 'pull_request_target' && github.event.pull_request.head.sha || github.sha }}\n\n - uses: ./.github/actions/submodules-checkout\n with:\n submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n - uses: pnpm/action-setup@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: 22\n cache: pnpm\n\n - uses: ./.github/actions/vercel\n id: vercel\n name: Deploy to Vercel\n with:\n vercel-token: ${{ secrets.VERCEL_TOKEN }}\n vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}\n vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}\n ref-name: ${{ github.event_name == 'pull_request_target' && format('pr-{0}', github.event.pull_request.number) || github.ref_name }}\n sha: ${{ github.event_name == 'pull_request_target' && github.event.pull_request.head.sha || github.sha }}\n environment: ${{ matrix.environment }}\n\n - name: Debug Vercel Outputs\n run: |\n echo \"domain=${{ steps.vercel.outputs.domain }}\"\n echo \"inspect-url=${{ steps.vercel.outputs.inspect-url }}\"\n echo \"alias=${{ steps.vercel.outputs.alias }}\"\n\n - uses: ./.github/actions/add-status\n with:\n title: \"⏰ [${{ matrix.environment }}] Vercel Inspection\"\n description: \"[${{ matrix.environment }}] Vercel logs\"\n url: \"${{ steps.vercel.outputs.inspect-url }}\"\n\n - uses: ./.github/actions/add-status\n with:\n title: \"⭐ [${{ matrix.environment }}] Apps Webstudio URL\"\n description: \"[${{ matrix.environment }}] Site url\"\n url: \"https://${{ steps.vercel.outputs.alias }}.${{ matrix.environment }}.webstudio.is\"\n\n - name: Comment on PR with deployment URL\n if: github.event_name == 'pull_request_target' && matrix.environment == 'development'\n uses: actions/github-script@v7\n with:\n script: |\n const deployUrl = 'https://${{ steps.vercel.outputs.alias }}.${{ matrix.environment }}.webstudio.is';\n await github.rest.issues.createComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: context.issue.number,\n body: `🚀 **Deployed!**\\n\\n📍 Preview: ${deployUrl}\\n\\n_Note: Adding new commits will remove the \\`safe-to-deploy\\` label and require re-approval._`\n });\n\n outputs:\n builder-url: \"https://${{ steps.vercel.outputs.alias }}.${{ matrix.environment }}.webstudio.is\"\n builder-host: \"${{ steps.vercel.outputs.alias }}.${{ matrix.environment }}.webstudio.is\"\n\n fixtures-test:\n needs: deployment\n uses: ./.github/workflows/fixtures-test.yml\n with:\n builder-url: ${{ needs.deployment.outputs.builder-url }}\n builder-host: ${{ needs.deployment.outputs.builder-host }}\n environment: development\n secrets:\n # We are not passing the secret here (as it does not exist in the current environment).\n # Instead, this serves as a signal to the calling workflow that it has permission to extract it from the environment.\n PRIVATE_GITHUB_DEPLOY_TOKEN: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}\n\n delete-github-deployments:\n needs: fixtures-test\n uses: ./.github/workflows/delete-github-deployments.yml\n with:\n ref: ${{ github.event_name == 'pull_request_target' && format('pr-{0}', github.event.pull_request.number) || github.ref_name }}\n" }, { "path": ".github/workflows/vis-reg-tests.yml", "content": "name: Visual Regression Tests\n\non:\n push:\n branches:\n - main\n pull_request:\n pull_request_target:\n types: [labeled]\n\n# cancel in-progress runs on new commits to same PR (gitub.event.number)\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.sha }}\n cancel-in-progress: true\n\npermissions:\n contents: read # to fetch code (actions/checkout)\n\njobs:\n lost-pixel:\n # Run on push, regular PR (for repo branches), or labeled PR with safe-to-deploy (for forks)\n if: |\n github.event_name == 'push' ||\n github.event_name == 'pull_request' ||\n (github.event_name == 'pull_request_target' && github.event.label.name == 'safe-to-deploy')\n \n timeout-minutes: 20\n runs-on: ubuntu-latest\n env:\n DATABASE_URL: postgres://\n AUTH_SECRET: test\n steps:\n - uses: actions/checkout@v4\n with:\n ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit\n\n - uses: ./.github/actions/ci-setup\n\n - run: VISUAL_TESTING=true pnpm storybook:build\n\n - name: Lost Pixel\n uses: lost-pixel/lost-pixel@v3.16.0\n env:\n LOST_PIXEL_API_KEY: 8b76db6c-b9f0-46d1-982f-70900a02690a\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n.pnp\n.pnp.js\nyarn.lock\n\n# testing\ncoverage\n\n# remix\nbuild\n_build\n.cache\n.vercel\n.output\n.netlify\n\n# misc\n.DS_Store\n*.pem\n!https/*.pem\n/.idea\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n# .env\n.env.development\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# data\n/data\n*.db\n*.db-journal\n\n# migrations\n**/prisma/migrations/lockfile\n**/prisma/migrations/*/client\n\n# builds\npackages/**/lib\ngenerated\nstorybook-static\ntsconfig.tsbuildinfo\n\n# to save thunder https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client files\n.thunder\n.env*.local\n\n# wrangler builds\ndist\n\n# should be here otherwise if placed inside prisma-client pnpm deploy doesn't copy it\npackages/prisma-client/src/__generated__\n\n.temp\n*.timestamp-*.mjs\n\n# copilot instructions\n.github/instructions\n" }, { "path": ".gitmodules", "content": "[submodule \"packages/sdk-components-animation/private-src\"]\n\tpath = packages/sdk-components-animation/private-src\n\turl = git@github.com:webstudio-is/sdk-components-animation.git\n\tbranch = main\n" }, { "path": ".nvmrc", "content": "22\n" }, { "path": ".oxlintrc.json", "content": "{\n \"$schema\": \"https://raw.githubusercontent.com/oxc-project/oxc/main/npm/oxlint/configuration_schema.json\",\n \"plugins\": [\"react\", \"unicorn\", \"typescript\"],\n \"categories\": {\n \"correctness\": \"off\"\n },\n \"rules\": {\n \"no-console\": [\n \"error\",\n { \"allow\": [\"info\", \"warn\", \"error\", \"time\", \"timeEnd\"] }\n ],\n \"func-style\": [\"error\", \"expression\", { \"allowArrowFunctions\": true }],\n \"curly\": \"error\",\n \"eqeqeq\": [\"error\", \"always\", { \"null\": \"ignore\" }],\n \"radix\": \"error\",\n \"react/rules-of-hooks\": \"error\",\n \"react/exhaustive-deps\": \"warn\",\n \"typescript/no-explicit-any\": \"error\",\n \"unicorn/filename-case\": [\"error\", { \"case\": \"kebabCase\" }],\n \"unicorn/prefer-node-protocol\": \"error\"\n },\n \"ignorePatterns\": [\n \"**/*.js\",\n \"**/*.d.ts\",\n \"**/__generated__/**\",\n \"codemod/**\",\n \"packages/*/lib/**\",\n \"packages/prisma-client/prisma/migrations/**\",\n \"packages/cli/templates/**\",\n \"fixtures/**\",\n \"packages/sdk-components-animation/private-src/polyfill/**\",\n \"packages/sdk-components-animation/private-src/perf/**\"\n ]\n}\n" }, { "path": ".prettierignore", "content": "pnpm-lock.yaml\npackages/prisma-client/prisma/migrations/*/client\npackages/prisma-client/**/*.d.ts" }, { "path": ".storybook/main.ts", "content": "import * as path from \"node:path\";\nimport { existsSync, readdirSync } from \"node:fs\";\nimport { defaultClientConditions } from \"vite\";\nimport type { StorybookConfig } from \"@storybook/react-vite\";\n\nconst isFolderEmpty = (folderPath: string) => {\n if (!existsSync(folderPath)) {\n return true; // Folder does not exist\n }\n const contents = readdirSync(folderPath);\n\n return contents.length === 0;\n};\n\nconst hasPrivateFolders = !isFolderEmpty(\n path.join(__dirname, \"../../packages/sdk-components-animation/private-src\")\n);\n\nconst visualTestingStories: StorybookConfig[\"stories\"] = [\n {\n directory: \"../apps/builder\",\n titlePrefix: \"Builder\",\n files: \"**/*.stories.tsx\",\n },\n {\n directory: \"../packages/design-system/src/components\",\n titlePrefix: \"Design system\",\n files: \"**/*.stories.tsx\",\n },\n];\n\nexport default {\n stories: process.env.VISUAL_TESTING\n ? visualTestingStories\n : [\n ...visualTestingStories,\n {\n directory: \"../packages/css-engine/src\",\n titlePrefix: \"CSS engine\",\n files: \"**/*.stories.tsx\",\n },\n {\n directory: \"../packages/image/src\",\n titlePrefix: \"Image\",\n files: \"**/*.stories.tsx\",\n },\n {\n directory: \"../packages/icons\",\n titlePrefix: \"Icons\",\n files: \"**/*.stories.tsx\",\n },\n {\n directory: \"../packages/sdk-components-react\",\n titlePrefix: \"SDK components React\",\n files: \"**/*.stories.tsx\",\n },\n {\n directory: \"../packages/sdk-components-react-radix\",\n titlePrefix: \"SDK components React Radix\",\n files: \"**/*.stories.tsx\",\n },\n {\n directory: \"../packages/sdk-components-animation\",\n titlePrefix: \"SDK components animation\",\n files: \"**/*.stories.tsx\",\n },\n ],\n framework: {\n name: \"@storybook/react-vite\",\n options: {},\n },\n addons: [\n \"@storybook/addon-controls\",\n \"@storybook/addon-actions\",\n \"@storybook/addon-backgrounds\",\n ],\n async viteFinal(config) {\n return {\n ...config,\n optimizeDeps: {\n exclude: [\"scroll-timeline-polyfill\"],\n },\n\n define: {\n ...config.define,\n // storybook use \"util\" package internally which is bundled with stories\n // and gives an error that process is undefined\n \"process.env.NODE_DEBUG\": \"undefined\",\n \"process.env.IS_STROYBOOK\": \"true\",\n },\n resolve: {\n ...config.resolve,\n conditions: hasPrivateFolders\n ? [\"webstudio-private\", \"webstudio\", ...defaultClientConditions]\n : [\"webstudio\", ...defaultClientConditions],\n\n alias: [\n {\n find: \"~\",\n replacement: path.resolve(\"./apps/builder/app\"),\n },\n ],\n },\n };\n },\n} satisfies StorybookConfig;\n" }, { "path": ".storybook/preview-body.html", "content": "\n" }, { "path": ".storybook/preview.tsx", "content": "import type { Preview } from \"@storybook/react\";\nimport * as React from \"react\";\nimport { useEffect } from \"react\";\nimport { TooltipProvider } from \"@radix-ui/react-tooltip\";\nimport { setEnv } from \"../packages/feature-flags/src/index\";\nimport { theme, globalCss } from \"../packages/design-system/src/index\";\nimport { color } from \"../packages/design-system/src/__generated__/figma-design-tokens\";\n\n// this adds \n);\n\nconst angleKeyframes = keyframes({\n to: {\n [angleVar]: \"360deg\",\n },\n});\n\nconst baseOutlineStyle = css({\n borderWidth: 1,\n variants: {\n variant: {\n default: {\n borderStyle: \"solid\",\n borderColor: `oklch(from ${theme.colors.backgroundPrimary} l c h / 0.7)`,\n },\n collaboration: {\n [angleVar]: `0deg`,\n borderStyle: \"solid\",\n borderImage: `conic-gradient(from var(${angleVar}), #39FBBB 0%, #4A4EFA 12.5%, #E63CFE 25%, #FFAE3C 37.5%, #39FBBB 50%, #4A4EFA 62.5%, #E63CFE 75%, #FFAE3C 87.5%) 1`,\n animation: `2s ${angleKeyframes} linear infinite`,\n },\n slot: {\n borderStyle: \"solid\",\n borderColor: theme.colors.foregroundReusable,\n },\n },\n\n isLeftClamped: {\n true: {\n borderLeftWidth: 0,\n },\n },\n isRightClamped: {\n true: {\n borderRightWidth: 0,\n },\n },\n isBottomClamped: {\n true: {\n borderBottomWidth: 0,\n },\n },\n isTopClamped: {\n true: {\n borderTopWidth: 0,\n },\n },\n },\n defaultVariants: { variant: \"default\" },\n});\n\nconst baseStyle = css({\n boxSizing: \"border-box\",\n position: \"absolute\",\n display: \"grid\",\n pointerEvents: \"none\",\n top: 0,\n left: 0,\n});\n\nconst useDynamicStyle = (rect?: Rect) => {\n return useMemo(() => {\n if (rect === undefined) {\n return;\n }\n return {\n transform: `translate3d(${rect.left}px, ${rect.top}px, 0)`,\n width: rect.width,\n height: rect.height,\n };\n }, [rect]);\n};\n\ntype OutlineProps = {\n children?: ReactNode;\n rect: Rect;\n clampingRect: Rect;\n variant?: \"default\" | \"collaboration\" | \"slot\";\n};\n\nexport const Outline = ({\n children,\n rect,\n clampingRect,\n variant,\n}: OutlineProps) => {\n const outlineRect = {\n top: Math.max(rect.top, clampingRect.top),\n height:\n Math.min(rect.top + rect.height, clampingRect.top + clampingRect.height) -\n Math.max(rect.top, clampingRect.top),\n\n left: Math.max(rect.left, clampingRect.left),\n width:\n Math.min(rect.left + rect.width, clampingRect.left + clampingRect.width) -\n Math.max(rect.left, clampingRect.left),\n };\n const dynamicStyle = useDynamicStyle(outlineRect);\n if (outlineRect.width <= 0 || outlineRect.height <= 0) {\n return;\n }\n\n const isLeftClamped = rect.left < outlineRect.left;\n const isTopClamped = rect.top < outlineRect.top;\n\n const isRightClamped =\n Math.round(rect.left + rect.width) > Math.round(clampingRect.width);\n\n const isBottomClamped =\n Math.round(rect.top + rect.height) > Math.round(clampingRect.height);\n\n return (\n <>\n {propertyStyle}\n \n {children}\n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/features/workspace/canvas-tools/outline/selected-instance-outline.tsx", "content": "import { useStore } from \"@nanostores/react\";\nimport {\n $instances,\n $selectedInstanceOutlineAndInstance,\n $selectedInstanceSelector,\n} from \"~/shared/nano-states\";\nimport { $textEditingInstanceSelector } from \"~/shared/nano-states\";\nimport { isDescendantOrSelf } from \"~/shared/tree-utils\";\nimport { Outline } from \"./outline\";\nimport { applyScale } from \"../apply-scale\";\nimport { $clampingRect, $scale } from \"~/builder/shared/nano-states\";\nimport { findClosestSlot } from \"~/shared/instance-utils\";\nimport { $ephemeralStyles } from \"~/canvas/stores\";\n\nexport const SelectedInstanceOutline = () => {\n const instances = useStore($instances);\n const selectedInstanceSelector = useStore($selectedInstanceSelector);\n const textEditingInstanceSelector = useStore($textEditingInstanceSelector);\n const outline = useStore($selectedInstanceOutlineAndInstance);\n const scale = useStore($scale);\n const ephemeralStyles = useStore($ephemeralStyles);\n const clampingRect = useStore($clampingRect);\n\n if (selectedInstanceSelector === undefined) {\n return;\n }\n\n if (clampingRect === undefined) {\n return;\n }\n\n const isEditingCurrentInstance =\n textEditingInstanceSelector !== undefined &&\n isDescendantOrSelf(\n selectedInstanceSelector,\n textEditingInstanceSelector.selector\n );\n\n if (\n isEditingCurrentInstance ||\n outline === undefined ||\n ephemeralStyles.length !== 0\n ) {\n return;\n }\n\n const variant = findClosestSlot(instances, selectedInstanceSelector)\n ? \"slot\"\n : \"default\";\n const rect = applyScale(outline.rect, scale);\n\n return ;\n};\n" }, { "path": "apps/builder/app/builder/features/workspace/canvas-tools/resize-handles.tsx", "content": "import { useStore } from \"@nanostores/react\";\nimport { findApplicableMedia } from \"@webstudio-is/css-engine\";\nimport {\n css,\n disableCanvasPointerEvents,\n numericScrubControl,\n theme,\n} from \"@webstudio-is/design-system\";\nimport { useEffect, useRef } from \"react\";\nimport { $canvasWidth } from \"~/builder/shared/nano-states\";\nimport { minCanvasWidth } from \"~/shared/breakpoints\";\nimport {\n $breakpoints,\n $isResizingCanvas,\n $selectedBreakpointId,\n} from \"~/shared/nano-states\";\n\nconst handlesContainerStyle = css({\n position: \"absolute\",\n top: 0,\n width: 5,\n bottom: 0,\n cursor: \"col-resize\",\n pointerEvents: \"auto\",\n color: \"transparent\",\n \"&::before\": {\n position: \"absolute\",\n content: '\"\"',\n inset: 0,\n background: \"currentColor\",\n },\n \"& svg\": {\n position: \"absolute\",\n top: \"50%\",\n right: 0,\n transform: \"translateX(100%)\",\n color: theme.colors.foregroundSubtle,\n },\n \"&[data-align=left]\": {\n left: 0,\n },\n \"&[data-align=right]\": {\n right: 0,\n },\n \"&[data-state=resizing]::before\": {\n display: \"none\",\n },\n \"&:hover, &:has(+ &:hover), &:hover+&\": {\n \"&::before, & svg\": {\n color: theme.colors.backgroundPrimaryLight,\n },\n },\n // A little specificity hack to override the previou selector\n \"&&[data-state=resizing] svg\": {\n color: theme.colors.foregroundSubtle,\n },\n});\n\nconst handleIcon = (\n \n \n \n \n \n);\n\nconst updateBreakpoint = (width: number) => {\n const applicableBreakpoint = findApplicableMedia(\n Array.from($breakpoints.get().values()),\n width\n );\n if (applicableBreakpoint) {\n $selectedBreakpointId.set(applicableBreakpoint.id);\n }\n};\n\nconst useScrub = ({ side }: { side: \"right\" | \"left\" }) => {\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current === null) {\n return;\n }\n\n let enableCanvasPointerEvents: (() => void) | undefined;\n\n const disposeScrubControl = numericScrubControl(ref.current, {\n getInitialValue() {\n return $canvasWidth.get() ?? 0;\n },\n getValue(state, movement) {\n const value =\n side === \"left\"\n ? // * 2 is a compensation for the fact that canvas is centered, so when we scrub, width has to change twice faster,\n // otherwise cursor will be faster than the edge movement\n state.value - movement * 2\n : state.value + movement * 2;\n return Math.max(value, minCanvasWidth);\n },\n onStatusChange(status) {\n if (status === \"scrubbing\") {\n enableCanvasPointerEvents?.();\n enableCanvasPointerEvents = disableCanvasPointerEvents();\n $isResizingCanvas.set(true);\n return;\n }\n enableCanvasPointerEvents?.();\n\n $isResizingCanvas.set(false);\n },\n onValueInput(event) {\n $canvasWidth.set(event.value);\n updateBreakpoint(event.value);\n },\n });\n\n return () => {\n enableCanvasPointerEvents?.();\n disposeScrubControl();\n };\n }, [side]);\n\n return ref;\n};\n\nexport const ResizeHandles = () => {\n const isResizing = useStore($isResizingCanvas);\n const leftRef = useScrub({ side: \"left\" });\n const rightRef = useScrub({ side: \"right\" });\n const state = isResizing ? \"resizing\" : \"idle\";\n\n return (\n <>\n \n \n {handleIcon}\n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/features/workspace/canvas-tools/text-toolbar.tsx", "content": "import { useRef, useEffect } from \"react\";\nimport { computed } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport { computePosition, flip, offset, shift } from \"@floating-ui/dom\";\nimport { theme, Flex, IconButton, Tooltip } from \"@webstudio-is/design-system\";\nimport {\n SuperscriptIcon,\n SubscriptIcon,\n XSmallIcon,\n BoldIcon,\n TextItalicIcon,\n LinkIcon,\n PaintBrushIcon,\n} from \"@webstudio-is/icons\";\nimport { $selectedInstanceSelector } from \"~/shared/nano-states\";\nimport { type TextToolbarState, $textToolbar } from \"~/shared/nano-states\";\nimport { $scale } from \"~/builder/shared/nano-states\";\nimport { emitCommand } from \"~/builder/shared/commands\";\nimport { $instanceTags } from \"../../style-panel/shared/model\";\n\nconst getRectForRelativeRect = (\n parent: DOMRect,\n rel: DOMRect,\n scale: number\n) => {\n const scaleRatio = scale / 100;\n return {\n x: parent.x + rel.x * scaleRatio,\n y: parent.y + rel.y * scaleRatio,\n width: rel.width * scaleRatio,\n height: rel.height * scaleRatio,\n top: parent.top + rel.top * scaleRatio,\n left: parent.left + rel.left * scaleRatio,\n bottom: parent.top + rel.bottom * scaleRatio,\n right: parent.left + rel.right * scaleRatio,\n };\n};\n\nconst $isWithinLink = computed(\n [$selectedInstanceSelector, $instanceTags],\n (selectedInstanceSelector, instanceTags) => {\n if (selectedInstanceSelector === undefined) {\n return false;\n }\n for (const instanceId of selectedInstanceSelector) {\n const tag = instanceTags.get(instanceId);\n if (tag === \"a\") {\n return true;\n }\n }\n return false;\n }\n);\n\ntype ToolbarProps = {\n state: TextToolbarState;\n scale: number;\n};\n\nconst Toolbar = ({ state, scale }: ToolbarProps) => {\n const isWithinLink = useStore($isWithinLink);\n\n const rootRef = useRef(null);\n\n useEffect(() => {\n if (state.selectionRect === undefined) {\n return;\n }\n if (rootRef.current?.parentElement) {\n const floating = rootRef.current;\n const parent = rootRef.current.parentElement;\n const newRect = getRectForRelativeRect(\n parent.getBoundingClientRect(),\n state.selectionRect,\n scale\n );\n const reference = {\n getBoundingClientRect: () => newRect,\n };\n computePosition(reference, floating, {\n placement: \"top\",\n // offset should be first for shift and flip\n // to consider it while detecting overflow\n middleware: [offset(12), shift({ padding: 4 }), flip()],\n }).then(({ x, y }) => {\n floating.style.transform = `translate(${x}px, ${y}px)`;\n });\n }\n }, [state.selectionRect, scale]);\n\n const isCleared =\n state.isBold === false &&\n state.isItalic === false &&\n state.isSuperscript === false &&\n state.isSubscript === false &&\n state.isLink === false &&\n state.isSpan === false;\n\n return (\n {\n event.stopPropagation();\n }}\n // We use onPointerDown here to prevent the canvas from being inert (see builder.tsx for more details)\n onPointerDown={(event) => {\n // We don't want the logic in the builder to make canvas inert to be triggered\n event.preventDefault();\n }}\n >\n \n emitCommand(\"formatClear\")}\n >\n \n \n \n\n \n emitCommand(\"formatBold\")}\n >\n \n \n \n\n \n emitCommand(\"formatItalic\")}\n >\n \n \n \n\n \n emitCommand(\"formatSuperscript\")}\n >\n \n \n \n\n \n emitCommand(\"formatSubscript\")}\n >\n \n \n \n\n {isWithinLink === false && (\n \n emitCommand(\"formatLink\")}\n >\n \n \n \n )}\n\n \n emitCommand(\"formatSpan\")}\n >\n \n \n \n \n );\n};\n\nexport const TextToolbar = () => {\n const textToolbar = useStore($textToolbar);\n const scale = useStore($scale);\n const selectedInstanceSelector = useStore($selectedInstanceSelector);\n\n if (\n textToolbar?.selectionRect === undefined ||\n selectedInstanceSelector === undefined\n ) {\n return null;\n }\n\n return ;\n};\n" }, { "path": "apps/builder/app/builder/features/workspace/canvas-tools/use-subscribe-drag-drop-state.ts", "content": "import { useSubscribe } from \"~/shared/pubsub\";\nimport { $dragAndDropState } from \"~/shared/nano-states\";\n\nexport const useSubscribeDragAndDropState = () => {\n useSubscribe(\"dragStart\", (dragPayload) => {\n // It's possible that dropTargetChange comes before dragStart.\n // So it's important to spread the current ...state here.\n $dragAndDropState.set({\n ...$dragAndDropState.get(),\n isDragging: true,\n dragPayload,\n });\n });\n\n useSubscribe(\"dropTargetChange\", (dropTarget) => {\n $dragAndDropState.set({ ...$dragAndDropState.get(), dropTarget });\n });\n\n useSubscribe(\"dragEnd\", () => {\n $dragAndDropState.set({ isDragging: false });\n });\n};\n" }, { "path": "apps/builder/app/builder/features/workspace/index.ts", "content": "export * from \"./workspace\";\nexport * from \"./canvas-iframe\";\n" }, { "path": "apps/builder/app/builder/features/workspace/workspace.tsx", "content": "import { useEffect, useRef, type ReactNode } from \"react\";\nimport { useStore } from \"@nanostores/react\";\nimport { theme, css } from \"@webstudio-is/design-system\";\nimport {\n $canvasWidth,\n $scale,\n $workspaceRect,\n} from \"~/builder/shared/nano-states\";\nimport { $textEditingInstanceSelector } from \"~/shared/nano-states\";\nimport { CanvasTools } from \"./canvas-tools\";\nimport { selectInstance } from \"~/shared/awareness\";\nimport { ResizeHandles } from \"./canvas-tools/resize-handles\";\nimport { MediaBadge } from \"./canvas-tools/media-badge\";\nimport { useSetCanvasWidth } from \"~/builder/shared/calc-canvas-width\";\n\nconst workspaceStyle = css({\n flexGrow: 1,\n background: theme.colors.backgroundCanvas,\n position: \"relative\",\n // Prevent scrollIntoView from scrolling the whole page\n // Commented to see what it will break\n // overflow: \"clip\",\n});\n\nconst canvasContainerStyle = css({\n position: \"absolute\",\n transformOrigin: \"0 0\",\n // We had a case where some Windows 10 + Chrome 129 users couldn't scroll iframe canvas.\n willChange: \"transform\",\n});\n\nconst useMeasureWorkspace = () => {\n const ref = useRef(null);\n\n useEffect(() => {\n const element = ref.current;\n if (element === null) {\n return;\n }\n const observer = new ResizeObserver((entries) => {\n $workspaceRect.set(entries[0].contentRect);\n });\n observer.observe(element);\n return () => {\n observer.disconnect();\n };\n }, []);\n\n return ref;\n};\n\nconst getCanvasStyle = (\n scale: number,\n workspaceRect?: DOMRect,\n canvasWidth?: number\n) => {\n let canvasHeight;\n\n // For some reason scale is 0 in chrome dev tools mobile touch simulated vervsion.\n if (workspaceRect?.height && scale !== 0) {\n canvasHeight = workspaceRect.height / (scale / 100);\n }\n\n return {\n width: canvasWidth ?? \"100%\",\n height: canvasHeight ?? \"100%\",\n left: \"50%\",\n transform: `scale(${scale}%) translateX(-50%)`,\n };\n};\n\nconst useCanvasStyle = () => {\n const scale = useStore($scale);\n const workspaceRect = useStore($workspaceRect);\n const canvasWidth = useStore($canvasWidth);\n\n return getCanvasStyle(scale, workspaceRect, canvasWidth);\n};\n\nconst useOutlineStyle = () => {\n const scale = useStore($scale);\n const workspaceRect = useStore($workspaceRect);\n const canvasWidth = useStore($canvasWidth);\n const style = getCanvasStyle(100, workspaceRect, canvasWidth);\n\n return {\n ...style,\n width:\n canvasWidth === undefined ? \"100%\" : (canvasWidth ?? 0) * (scale / 100),\n } as const;\n};\n\ntype WorkspaceProps = {\n children: ReactNode;\n};\n\nexport const Workspace = ({ children }: WorkspaceProps) => {\n const canvasStyle = useCanvasStyle();\n const workspaceRef = useMeasureWorkspace();\n useSetCanvasWidth();\n const handleWorkspaceClick = () => {\n selectInstance(undefined);\n $textEditingInstanceSelector.set(undefined);\n };\n const outlineStyle = useOutlineStyle();\n\n return (\n <>\n \n
\n {children}\n
\n \n \n \n \n \n \n );\n};\n\nexport const CanvasToolsContainer = () => {\n const outlineStyle = useOutlineStyle();\n\n return (\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/index.client.ts", "content": "export * from \"./builder\";\n" }, { "path": "apps/builder/app/builder/inspector.tsx", "content": "import { useRef } from \"react\";\nimport { computed } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport type { Instance } from \"@webstudio-is/sdk\";\nimport {\n theme,\n PanelTabs,\n PanelTabsList,\n PanelTabsTrigger,\n PanelTabsContent,\n Card,\n Text,\n EnhancedTooltipProvider,\n Flex,\n ScrollArea,\n Separator,\n Tooltip,\n Kbd,\n} from \"@webstudio-is/design-system\";\nimport { ModeMenu, StylePanel } from \"~/builder/features/style-panel\";\nimport { SettingsPanel } from \"~/builder/features/settings-panel\";\nimport {\n $registeredComponentMetas,\n $dragAndDropState,\n $isDesignMode,\n} from \"~/shared/nano-states\";\nimport { NavigatorTree } from \"~/builder/features/navigator\";\nimport type { Settings } from \"~/builder/shared/client-settings\";\nimport { $activeInspectorPanel } from \"~/builder/shared/nano-states\";\nimport {\n $selectedInstance,\n $selectedInstanceKey,\n $selectedPage,\n} from \"~/shared/awareness\";\nimport { InstanceIcon, getInstanceLabel } from \"./shared/instance-label\";\n\nconst InstanceInfo = ({ instance }: { instance: Instance }) => {\n return (\n \n \n \n \n \n {getInstanceLabel(instance)}\n \n \n );\n};\n\ntype InspectorProps = {\n navigatorLayout: Settings[\"navigatorLayout\"];\n};\n\nconst contentStyle = {\n display: \"flex\",\n flexDirection: \"column\",\n overflow: \"auto\",\n};\n\nconst $isDragging = computed([$dragAndDropState], (state) => state.isDragging);\n\nexport const Inspector = ({ navigatorLayout }: InspectorProps) => {\n const selectedInstance = useStore($selectedInstance);\n const selectedInstanceKey = useStore($selectedInstanceKey);\n const tabsRef = useRef(null);\n const isDragging = useStore($isDragging);\n const metas = useStore($registeredComponentMetas);\n const selectedPage = useStore($selectedPage);\n const activeInspectorPanel = useStore($activeInspectorPanel);\n const isDesignMode = useStore($isDesignMode);\n\n if (navigatorLayout === \"docked\" && isDragging) {\n return ;\n }\n\n if (selectedInstance === undefined || selectedInstanceKey === undefined) {\n return (\n \n {/* @todo: use this space for something more usefull: a-la figma's no instance selected sate, maybe create an issue with a more specific proposal? */}\n \n Select an instance on the canvas\n \n \n );\n }\n\n const meta = metas.get(selectedInstance.component);\n const documentType = selectedPage?.meta.documentType ?? \"html\";\n\n type PanelName = \"style\" | \"settings\";\n\n const availablePanels = new Set();\n availablePanels.add(\"settings\");\n if (\n // forbid styling body in xml document\n documentType === \"html\" &&\n // forbid styling components without preset\n meta?.presetStyle !== undefined &&\n isDesignMode\n ) {\n availablePanels.add(\"style\");\n }\n\n return (\n \n {\n $activeInspectorPanel.set(panel as PanelName);\n }}\n asChild\n >\n \n \n {availablePanels.has(\"style\") && (\n \n CSS for the selected instance  \n \n \n }\n >\n
\n Style\n
\n \n )}\n {availablePanels.has(\"settings\") && (\n \n Settings, properties and attributes of the selected\n instance  \n \n \n }\n >\n
\n Settings\n
\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/asset-filters.tsx", "content": "import { useMemo } from \"react\";\nimport { Select } from \"@webstudio-is/design-system\";\nimport type { AllowedFileExtension } from \"@webstudio-is/sdk\";\n\nconst CATEGORY_ALL = \"All\" as const;\n\n/**\n * Display categories for file types in the UI\n * These match the comment sections in ALLOWED_FILE_TYPES\n */\nconst DISPLAY_CATEGORIES = [\n CATEGORY_ALL,\n \"Images\",\n \"Documents\",\n \"Video\",\n \"Audio\",\n \"Code\",\n \"Archives\",\n \"Fonts\",\n] as const;\n\ntype DisplayCategory = (typeof DISPLAY_CATEGORIES)[number];\n\n/**\n * Type-safe mapping of file extensions to display categories.\n *\n * TypeScript enforces that:\n * 1. All keys must be valid extensions from ALLOWED_FILE_TYPES\n * 2. All extensions from ALLOWED_FILE_TYPES must be included (completeness check)\n * 3. All values must be valid DisplayCategory types\n *\n * When adding a new file extension to ALLOWED_FILE_TYPES, TypeScript will\n * produce a compile error until that extension is also added to this mapping.\n */\nconst EXTENSION_TO_DISPLAY_CATEGORY: Record<\n AllowedFileExtension,\n DisplayCategory\n> = {\n // Documents\n pdf: \"Documents\",\n doc: \"Documents\",\n docx: \"Documents\",\n xls: \"Documents\",\n xlsx: \"Documents\",\n csv: \"Documents\",\n ppt: \"Documents\",\n pptx: \"Documents\",\n\n // Code\n txt: \"Code\",\n md: \"Code\",\n js: \"Code\",\n css: \"Code\",\n json: \"Code\",\n html: \"Code\",\n xml: \"Code\",\n\n // Archives\n zip: \"Archives\",\n rar: \"Archives\",\n\n // Audio\n mp3: \"Audio\",\n wav: \"Audio\",\n ogg: \"Audio\",\n m4a: \"Audio\",\n\n // Video\n mp4: \"Video\",\n mov: \"Video\",\n avi: \"Video\",\n webm: \"Video\",\n\n // Images\n jpg: \"Images\",\n jpeg: \"Images\",\n png: \"Images\",\n gif: \"Images\",\n svg: \"Images\",\n webp: \"Images\",\n avif: \"Images\",\n ico: \"Images\",\n bmp: \"Images\",\n tif: \"Images\",\n tiff: \"Images\",\n\n // Fonts\n woff: \"Fonts\",\n woff2: \"Fonts\",\n ttf: \"Fonts\",\n otf: \"Fonts\",\n};\n\n/**\n * Get array of extensions for a given display category\n */\nconst getExtensionsForCategory = (\n category: DisplayCategory\n): AllowedFileExtension[] | \"*\" => {\n if (category === CATEGORY_ALL) {\n return \"*\";\n }\n return Object.entries(EXTENSION_TO_DISPLAY_CATEGORY)\n .filter(([, cat]) => cat === category)\n .map(([ext]) => ext as AllowedFileExtension);\n};\n\ntype AssetFiltersProps = {\n formatCounts: Partial>;\n value: AllowedFileExtension[] | \"*\";\n onChange: (extensions: AllowedFileExtension[] | \"*\") => void;\n};\n\nexport const AssetFilters = ({\n formatCounts,\n value,\n onChange,\n}: AssetFiltersProps) => {\n // Aggregate extension counts by display category\n const categoryCounts = useMemo(() => {\n const counts: Record = {\n [CATEGORY_ALL]: 0,\n Images: 0,\n Documents: 0,\n Video: 0,\n Audio: 0,\n Code: 0,\n Archives: 0,\n Fonts: 0,\n };\n\n Object.entries(formatCounts).forEach(([ext, count]) => {\n const category =\n EXTENSION_TO_DISPLAY_CATEGORY[ext as AllowedFileExtension];\n if (category && count !== undefined) {\n counts[category] += count;\n counts[CATEGORY_ALL] += count;\n }\n });\n\n return counts;\n }, [formatCounts]);\n\n // Compute display category from extensions array\n const selectedCategory: DisplayCategory =\n value === \"*\"\n ? CATEGORY_ALL\n : (EXTENSION_TO_DISPLAY_CATEGORY[value[0]] as\n | DisplayCategory\n | undefined) || CATEGORY_ALL;\n\n const options = DISPLAY_CATEGORIES.map((category) => ({\n label: `${category} (${categoryCounts[category] || 0})`,\n value: category,\n }));\n\n const selectedOption = options.find((opt) => opt.value === selectedCategory);\n\n return (\n {\n onChange(getExtensionsForCategory(option.value));\n }}\n getLabel={(option) => option.label}\n getValue={(option) => option.value}\n css={{ flexGrow: 1 }}\n />\n );\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/asset-info.test.ts", "content": "import { describe, test, expect } from \"vitest\";\nimport type { Pages, Props, Styles, Asset } from \"@webstudio-is/sdk\";\nimport type {\n ImageValue,\n FontFamilyValue,\n StyleValue,\n} from \"@webstudio-is/css-engine\";\nimport { __testing__ } from \"./asset-info\";\n\nconst { traverseStyleValue, calculateUsagesByAssetId } = __testing__;\n\ndescribe(\"asset-info\", () => {\n describe(\"traverseStyleValue\", () => {\n test(\"calls callback for image values\", () => {\n const imageValue: ImageValue = {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-1\" },\n };\n const results: (ImageValue | FontFamilyValue)[] = [];\n traverseStyleValue(imageValue, (value) => results.push(value));\n expect(results).toEqual([imageValue]);\n });\n\n test(\"traverses tuple values\", () => {\n const imageValue1: ImageValue = {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-1\" },\n };\n const imageValue2: ImageValue = {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-2\" },\n };\n const tupleValue: StyleValue = {\n type: \"tuple\",\n value: [imageValue1, imageValue2],\n };\n const results: (ImageValue | FontFamilyValue)[] = [];\n traverseStyleValue(tupleValue, (value) => results.push(value));\n expect(results).toEqual([imageValue1, imageValue2]);\n });\n\n test(\"traverses layers values\", () => {\n const imageValue1: ImageValue = {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-1\" },\n };\n const imageValue2: ImageValue = {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-2\" },\n };\n const layersValue: StyleValue = {\n type: \"layers\",\n value: [imageValue1, imageValue2],\n };\n const results: (ImageValue | FontFamilyValue)[] = [];\n traverseStyleValue(layersValue, (value) => results.push(value));\n expect(results).toEqual([imageValue1, imageValue2]);\n });\n\n test(\"does not call callback for other value types\", () => {\n const keywordValue: StyleValue = {\n type: \"keyword\",\n value: \"auto\",\n };\n const results: (ImageValue | FontFamilyValue)[] = [];\n traverseStyleValue(keywordValue, (value) => results.push(value));\n expect(results).toEqual([]);\n });\n\n test(\"traverses nested tuple and layers\", () => {\n const imageValue: ImageValue = {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-1\" },\n };\n const nestedTuple: StyleValue = {\n type: \"tuple\",\n value: [imageValue],\n };\n const layersValue: StyleValue = {\n type: \"layers\",\n value: [nestedTuple],\n };\n const results: (ImageValue | FontFamilyValue)[] = [];\n traverseStyleValue(layersValue, (value) => results.push(value));\n expect(results).toEqual([imageValue]);\n });\n\n test(\"calls callback for fontFamily values\", () => {\n const fontFamilyValue: FontFamilyValue = {\n type: \"fontFamily\",\n value: [\"CustomFont\", \"Arial\", \"sans-serif\"],\n };\n const results: (ImageValue | FontFamilyValue)[] = [];\n traverseStyleValue(fontFamilyValue, (value) => results.push(value));\n expect(results).toEqual([fontFamilyValue]);\n });\n });\n\n describe(\"calculateUsagesByAssetId\", () => {\n test(\"tracks favicon asset usage\", () => {\n const pages: Pages = {\n meta: { faviconAssetId: \"favicon-asset\" },\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map();\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"favicon-asset\")).toEqual([{ type: \"favicon\" }]);\n });\n\n test(\"tracks social image asset usage\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: { socialImageAssetId: \"social-asset\" },\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map();\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"social-asset\")).toEqual([\n { type: \"socialImage\", pageId: \"home\" },\n ]);\n });\n\n test(\"tracks marketplace thumbnail asset usage\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [\n {\n id: \"page-1\",\n name: \"Page 1\",\n path: \"/page-1\",\n title: \"Page 1\",\n meta: {},\n rootInstanceId: \"root-1\",\n marketplace: { thumbnailAssetId: \"thumbnail-asset\" },\n },\n ],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map();\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"thumbnail-asset\")).toEqual([\n { type: \"marketplaceThumbnail\", pageId: \"page-1\" },\n ]);\n });\n\n test(\"tracks prop asset usage\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map([\n [\n \"prop-1\",\n {\n id: \"prop-1\",\n instanceId: \"instance-1\",\n type: \"asset\",\n name: \"src\",\n value: \"asset-1\",\n },\n ],\n ]);\n const styles: Styles = new Map();\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"asset-1\")).toEqual([\n { type: \"prop\", propId: \"prop-1\" },\n ]);\n });\n\n test(\"ignores width and height props\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map([\n [\n \"prop-width\",\n {\n id: \"prop-width\",\n instanceId: \"instance-1\",\n type: \"asset\",\n name: \"width\",\n value: \"asset-1\",\n },\n ],\n [\n \"prop-height\",\n {\n id: \"prop-height\",\n instanceId: \"instance-1\",\n type: \"asset\",\n name: \"height\",\n value: \"asset-1\",\n },\n ],\n ]);\n const styles: Styles = new Map();\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"asset-1\")).toBeUndefined();\n });\n\n test(\"tracks image asset usage in styles\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map([\n [\n \"style-1:breakpoint-1:property\",\n {\n breakpointId: \"breakpoint-1\",\n styleSourceId: \"style-1\",\n property: \"backgroundImage\",\n value: {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-1\" },\n },\n },\n ],\n ]);\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"asset-1\")).toEqual([\n { type: \"style\", styleDeclKey: \"style-1:breakpoint-1:property\" },\n ]);\n });\n\n test(\"returns empty map when no usages\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map();\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.size).toBe(0);\n });\n\n test(\"aggregates multiple usages for same asset\", () => {\n const pages: Pages = {\n meta: { faviconAssetId: \"asset-1\" },\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: { socialImageAssetId: \"asset-1\" },\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map([\n [\n \"prop-1\",\n {\n id: \"prop-1\",\n instanceId: \"instance-1\",\n type: \"asset\",\n name: \"src\",\n value: \"asset-1\",\n },\n ],\n ]);\n const styles: Styles = new Map([\n [\n \"style-1:breakpoint-1:property\",\n {\n breakpointId: \"breakpoint-1\",\n styleSourceId: \"style-1\",\n property: \"backgroundImage\",\n value: {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-1\" },\n },\n },\n ],\n ]);\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"asset-1\")).toHaveLength(4);\n expect(usages.get(\"asset-1\")).toEqual([\n { type: \"favicon\" },\n { type: \"socialImage\", pageId: \"home\" },\n { type: \"prop\", propId: \"prop-1\" },\n { type: \"style\", styleDeclKey: \"style-1:breakpoint-1:property\" },\n ]);\n });\n\n test(\"handles undefined pages\", () => {\n const pages = undefined;\n const props: Props = new Map();\n const styles: Styles = new Map();\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.size).toBe(0);\n });\n\n test(\"tracks multiple assets in tuple style value\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map([\n [\n \"style-1:breakpoint-1:property\",\n {\n breakpointId: \"breakpoint-1\",\n styleSourceId: \"style-1\",\n property: \"backgroundImage\",\n value: {\n type: \"tuple\",\n value: [\n {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-1\" },\n },\n {\n type: \"image\",\n value: { type: \"asset\", value: \"asset-2\" },\n },\n ],\n },\n },\n ],\n ]);\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"asset-1\")).toEqual([\n { type: \"style\", styleDeclKey: \"style-1:breakpoint-1:property\" },\n ]);\n expect(usages.get(\"asset-2\")).toEqual([\n { type: \"style\", styleDeclKey: \"style-1:breakpoint-1:property\" },\n ]);\n });\n\n test(\"tracks font asset usage in fontFamily styles\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map([\n [\n \"style-1:breakpoint-1:fontFamily\",\n {\n breakpointId: \"breakpoint-1\",\n styleSourceId: \"style-1\",\n property: \"fontFamily\",\n value: {\n type: \"fontFamily\",\n value: [\"CustomFont\", \"Arial\", \"sans-serif\"],\n },\n },\n ],\n ]);\n const assets = new Map([\n [\n \"font-asset-1\",\n {\n id: \"font-asset-1\",\n type: \"font\",\n name: \"CustomFont\",\n format: \"woff2\",\n size: 5000,\n meta: { family: \"CustomFont\", style: \"normal\", weight: 400 },\n createdAt: \"2024-01-01\",\n projectId: \"project-id\",\n },\n ],\n ]);\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"font-asset-1\")).toEqual([\n { type: \"style\", styleDeclKey: \"style-1:breakpoint-1:fontFamily\" },\n ]);\n });\n\n test(\"tracks multiple font assets in same fontFamily style\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map([\n [\n \"style-1:breakpoint-1:fontFamily\",\n {\n breakpointId: \"breakpoint-1\",\n styleSourceId: \"style-1\",\n property: \"fontFamily\",\n value: {\n type: \"fontFamily\",\n value: [\"CustomFont\", \"AnotherFont\"],\n },\n },\n ],\n ]);\n const assets = new Map([\n [\n \"font-asset-1\",\n {\n id: \"font-asset-1\",\n type: \"font\",\n name: \"CustomFont\",\n format: \"woff2\",\n size: 5000,\n meta: { family: \"CustomFont\", style: \"normal\", weight: 400 },\n createdAt: \"2024-01-01\",\n projectId: \"project-id\",\n },\n ],\n [\n \"font-asset-2\",\n {\n id: \"font-asset-2\",\n type: \"font\",\n name: \"AnotherFont\",\n format: \"woff2\",\n size: 6000,\n meta: { family: \"AnotherFont\", style: \"normal\", weight: 400 },\n createdAt: \"2024-01-01\",\n projectId: \"project-id\",\n },\n ],\n ]);\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"font-asset-1\")).toEqual([\n { type: \"style\", styleDeclKey: \"style-1:breakpoint-1:fontFamily\" },\n ]);\n expect(usages.get(\"font-asset-2\")).toEqual([\n { type: \"style\", styleDeclKey: \"style-1:breakpoint-1:fontFamily\" },\n ]);\n });\n\n test(\"ignores font families without matching assets\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map([\n [\n \"style-1:breakpoint-1:fontFamily\",\n {\n breakpointId: \"breakpoint-1\",\n styleSourceId: \"style-1\",\n property: \"fontFamily\",\n value: {\n type: \"fontFamily\",\n value: [\"Arial\", \"sans-serif\"],\n },\n },\n ],\n ]);\n const assets = new Map();\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.size).toBe(0);\n });\n\n test(\"tracks same font used in multiple styles\", () => {\n const pages: Pages = {\n meta: {},\n homePage: {\n id: \"home\",\n name: \"Home\",\n path: \"\",\n title: \"Home\",\n meta: {},\n rootInstanceId: \"root\",\n },\n pages: [],\n folders: [],\n };\n const props: Props = new Map();\n const styles: Styles = new Map([\n [\n \"style-1:breakpoint-1:fontFamily\",\n {\n breakpointId: \"breakpoint-1\",\n styleSourceId: \"style-1\",\n property: \"fontFamily\",\n value: {\n type: \"fontFamily\",\n value: [\"CustomFont\"],\n },\n },\n ],\n [\n \"style-2:breakpoint-1:fontFamily\",\n {\n breakpointId: \"breakpoint-1\",\n styleSourceId: \"style-2\",\n property: \"fontFamily\",\n value: {\n type: \"fontFamily\",\n value: [\"CustomFont\"],\n },\n },\n ],\n ]);\n const assets = new Map([\n [\n \"font-asset-1\",\n {\n id: \"font-asset-1\",\n type: \"font\",\n name: \"CustomFont\",\n format: \"woff2\",\n size: 5000,\n meta: { family: \"CustomFont\", style: \"normal\", weight: 400 },\n createdAt: \"2024-01-01\",\n projectId: \"project-id\",\n },\n ],\n ]);\n\n const usages = calculateUsagesByAssetId({ pages, props, styles, assets });\n\n expect(usages.get(\"font-asset-1\")).toEqual([\n { type: \"style\", styleDeclKey: \"style-1:breakpoint-1:fontFamily\" },\n { type: \"style\", styleDeclKey: \"style-2:breakpoint-1:fontFamily\" },\n ]);\n });\n });\n});\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/asset-info.tsx", "content": "import isValidFilename from \"valid-filename\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport prettyBytes from \"pretty-bytes\";\nimport { computed } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport { getMimeTypeByExtension } from \"@webstudio-is/sdk\";\nimport type { Asset, Pages, Props, Styles, Instance } from \"@webstudio-is/sdk\";\nimport type {\n ImageValue,\n FontFamilyValue,\n StyleValue,\n} from \"@webstudio-is/css-engine\";\nimport { mapGetOrInsert } from \"~/shared/shim\";\nimport {\n Box,\n Button,\n css,\n Dialog,\n DialogContent,\n DialogTitle,\n DialogTrigger,\n Flex,\n Grid,\n IconButton,\n InputErrorsTooltip,\n InputField,\n Label,\n Popover,\n PopoverContent,\n PopoverTitle,\n PopoverTrigger,\n SmallIconButton,\n styled,\n Text,\n textVariants,\n theme,\n Tooltip,\n} from \"@webstudio-is/design-system\";\nimport {\n AspectRatioIcon,\n CloudIcon,\n CopyIcon,\n DimensionsIcon,\n DownloadIcon,\n GearIcon,\n InfoCircleIcon,\n PageIcon,\n TrashIcon,\n} from \"@webstudio-is/icons\";\nimport { hyphenateProperty } from \"@webstudio-is/css-engine\";\nimport {\n $assets,\n $authPermit,\n $editingPageId,\n $instances,\n $pages,\n $props,\n $styles,\n $styleSourceSelections,\n $userPlanFeatures,\n} from \"~/shared/nano-states\";\nimport { $openProjectSettings } from \"~/shared/nano-states/project-settings\";\nimport {\n $awareness,\n findAwarenessByInstanceId,\n selectPage,\n} from \"~/shared/awareness\";\nimport { updateWebstudioData } from \"~/shared/instance-utils\";\nimport { deleteAssets } from \"~/builder/shared/assets\";\nimport {\n $activeInspectorPanel,\n setActiveSidebarPanel,\n} from \"~/builder/shared/nano-states\";\nimport {\n formatAssetName,\n parseAssetName,\n getAssetUrl,\n} from \"~/builder/shared/assets/asset-utils\";\nimport { getFormattedAspectRatio } from \"./utils\";\nimport { CopyToClipboard } from \"~/shared/copy-to-clipboard\";\n\ntype AssetUsage =\n | { type: \"favicon\" }\n | { type: \"socialImage\"; pageId: string }\n | { type: \"marketplaceThumbnail\"; pageId: string }\n | { type: \"prop\"; propId: string }\n | { type: \"style\"; styleDeclKey: string };\n\nconst traverseStyleValue = (\n styleValue: StyleValue,\n callback: (value: ImageValue | FontFamilyValue) => void\n) => {\n if (styleValue.type === \"image\") {\n callback(styleValue);\n }\n if (styleValue.type === \"fontFamily\") {\n callback(styleValue);\n }\n if (styleValue.type === \"tuple\") {\n for (const item of styleValue.value) {\n traverseStyleValue(item, callback);\n }\n }\n if (styleValue.type === \"layers\") {\n for (const item of styleValue.value) {\n traverseStyleValue(item, callback);\n }\n }\n};\n\nexport const calculateUsagesByAssetId = ({\n pages,\n props,\n styles,\n assets,\n}: {\n pages: Pages | undefined;\n props: Props;\n styles: Styles;\n assets: Map;\n}): Map => {\n const usagesByAsset = new Map();\n\n // Build font family to asset ID map once for O(1) lookups\n const fontFamilyToAssetId = new Map();\n for (const asset of assets.values()) {\n if (asset.type === \"font\") {\n fontFamilyToAssetId.set(asset.meta.family, asset.id);\n }\n }\n\n if (pages?.meta?.faviconAssetId) {\n const usages = mapGetOrInsert(usagesByAsset, pages.meta.faviconAssetId, []);\n usages.push({ type: \"favicon\" });\n }\n if (pages) {\n for (const page of [pages.homePage, ...pages.pages]) {\n if (page.meta.socialImageAssetId) {\n const usages = mapGetOrInsert(\n usagesByAsset,\n page.meta.socialImageAssetId,\n []\n );\n usages.push({ type: \"socialImage\", pageId: page.id });\n }\n if (page.marketplace?.thumbnailAssetId) {\n const usages = mapGetOrInsert(\n usagesByAsset,\n page.marketplace.thumbnailAssetId,\n []\n );\n usages.push({ type: \"marketplaceThumbnail\", pageId: page.id });\n }\n }\n }\n for (const prop of props.values()) {\n if (\n prop.type === \"asset\" &&\n // ignore width and height properties which are specific to size\n prop.name !== \"width\" &&\n prop.name !== \"height\"\n ) {\n const usages = mapGetOrInsert(usagesByAsset, prop.value, []);\n usages.push({ type: \"prop\", propId: prop.id });\n }\n }\n for (const [styleDeclKey, styleDecl] of styles) {\n traverseStyleValue(styleDecl.value, (value) => {\n if (value.type === \"image\" && value.value.type === \"asset\") {\n const usages = mapGetOrInsert(usagesByAsset, value.value.value, []);\n usages.push({ type: \"style\", styleDeclKey });\n }\n if (value.type === \"fontFamily\") {\n // Match each font family name to its asset ID\n for (const fontFamily of value.value) {\n const assetId = fontFamilyToAssetId.get(fontFamily);\n if (assetId !== undefined) {\n const usages = mapGetOrInsert(usagesByAsset, assetId, []);\n usages.push({ type: \"style\", styleDeclKey });\n }\n }\n }\n });\n }\n return usagesByAsset;\n};\n\nconst $usagesByAssetId = computed(\n [$pages, $props, $styles, $assets],\n (pages, props, styles, assets) => {\n return calculateUsagesByAssetId({ pages, props, styles, assets });\n }\n);\n\nconst buttonLinkClass = css({\n all: \"unset\",\n cursor: \"pointer\",\n ...textVariants.link,\n}).toString();\n\nconst AssetUsagesList = ({ usages }: { usages: AssetUsage[] }) => {\n const props = useStore($props);\n const styles = useStore($styles);\n return (\n \n {usages.map((usage, index) => {\n if (usage.type === \"favicon\") {\n return (\n
  • \n {\n $openProjectSettings.set(\"general\");\n setActiveSidebarPanel(\"auto\");\n }}\n >\n Favicon\n \n
    • \n );\n }\n if (usage.type === \"socialImage\") {\n return (\n
  • \n {\n selectPage(usage.pageId);\n setActiveSidebarPanel(\"pages\");\n $editingPageId.set(usage.pageId);\n }}\n >\n Page social image\n \n
    • \n );\n }\n if (usage.type === \"marketplaceThumbnail\") {\n return (\n
  • \n {\n selectPage(usage.pageId);\n setActiveSidebarPanel(\"pages\");\n $editingPageId.set(usage.pageId);\n }}\n >\n Marketplace page thumbnail\n \n
    • \n );\n }\n if (usage.type === \"prop\") {\n return (\n
  • \n {\n const pages = $pages.get();\n const instances = $instances.get();\n const prop = $props.get().get(usage.propId);\n if (!prop || !pages) {\n return;\n }\n const awareness = findAwarenessByInstanceId(\n pages,\n instances,\n prop.instanceId\n );\n $awareness.set(awareness);\n setActiveSidebarPanel(\"auto\");\n $activeInspectorPanel.set(\"settings\");\n }}\n >\n \"{props.get(usage.propId)?.name}\" property\n \n
    • \n );\n }\n if (usage.type === \"style\") {\n const styleDecl = styles.get(usage.styleDeclKey);\n const property = styleDecl\n ? hyphenateProperty(styleDecl.property)\n : undefined;\n return (\n
  • \n {\n const pages = $pages.get();\n const instances = $instances.get();\n const styleDecl = $styles.get().get(usage.styleDeclKey);\n const styleSourceSelections = $styleSourceSelections.get();\n if (!styleDecl) {\n return;\n }\n let styleInstanceId: undefined | Instance[\"id\"];\n for (const {\n instanceId,\n values,\n } of styleSourceSelections.values()) {\n if (values.includes(styleDecl.styleSourceId)) {\n styleInstanceId = instanceId;\n break;\n }\n }\n if (!styleInstanceId || !pages) {\n return;\n }\n const awareness = findAwarenessByInstanceId(\n pages,\n instances,\n styleInstanceId\n );\n $awareness.set(awareness);\n setActiveSidebarPanel(\"auto\");\n $activeInspectorPanel.set(\"style\");\n }}\n >\n \"{property}\" style\n \n
    • \n );\n }\n usage satisfies never;\n })}\n     \n );\n};\n\nconst UsageDot = styled(Box, {\n width: 6,\n height: 6,\n backgroundColor: \"#000\",\n border: \"1px solid white\",\n boxShadow: \"0 0 3px rgb(0, 0, 0)\",\n borderRadius: \"50%\",\n pointerEvents: \"none\",\n});\n\nconst useLocalValue = (\n savedValue: Type,\n onSave: (value: Type) => void\n) => {\n const [localValue, setLocalValue] = useState(savedValue);\n\n const save = () => {\n if (localValue !== savedValue) {\n // To synchronize with setState immediately followed by save\n onSave(localValue);\n }\n };\n\n const saveDebounced = useDebouncedCallback(save, 500);\n const updateLocalValue = (value: Type) => {\n setLocalValue(value);\n saveDebounced();\n };\n\n // onBlur will not trigger if control is unmounted when props panel is closed or similar.\n // So we're saving at the unmount\n // store save in ref to access latest saved value from render\n // instead of stale one\n const saveRef = useRef(save);\n saveRef.current = save;\n useEffect(() => {\n // access ref in the moment of unmount\n return () => saveRef.current();\n }, []);\n\n return [\n /**\n * Contains:\n * - either the latest `savedValue`\n * - or the latest value set via `set()`\n * (whichever changed most recently)\n */\n localValue,\n updateLocalValue,\n ] as const;\n};\n\nconst AssetInfoContent = ({\n asset,\n usages,\n}: {\n asset: Asset;\n usages: AssetUsage[];\n}) => {\n const userPlanFeatures = useStore($userPlanFeatures);\n const hasPaidPlan = userPlanFeatures.purchases.length > 0;\n const { size, meta, id, name } = asset;\n const { basename, ext } = parseAssetName(name);\n const [filenameError, setFilenameError] = useState();\n const [filename, setFilename] = useLocalValue(\n asset.filename ?? basename,\n (newFilename) => {\n const assetId = asset.id;\n // validate filename\n if (!isValidFilename(newFilename)) {\n setFilenameError(\"Invalid filename\");\n return;\n }\n // validate duplicates\n for (const asset of $assets.get().values()) {\n if (asset.id !== assetId) {\n const filename =\n asset.filename ?? parseAssetName(asset.name).basename;\n if (newFilename === filename) {\n setFilenameError(\"Filename already used\");\n return;\n }\n }\n }\n updateWebstudioData((data) => {\n const asset = data.assets.get(assetId);\n if (asset) {\n asset.filename = newFilename;\n }\n });\n }\n );\n const [description, setDescription] = useLocalValue(\n asset.description ?? \"\",\n (newDescription) => {\n const assetId = asset.id;\n updateWebstudioData((data) => {\n const asset = data.assets.get(assetId);\n if (asset) {\n asset.description = newDescription;\n }\n });\n }\n );\n\n const authPermit = useStore($authPermit);\n\n let downloadError: undefined | string;\n if (authPermit === \"view\") {\n downloadError =\n \"Unavailable in View mode. Switch to Edit to download assets.\";\n } else if (!hasPaidPlan) {\n downloadError = \"Upgrade to Pro to download assets.\";\n }\n\n return (\n <>\n \n \n \n \n {prettyBytes(size)}\n \n \n \n \n {getMimeTypeByExtension(ext) ?? \"unknown\"}\n \n \n {\"width\" in meta && \"height\" in meta && (\n <>\n \n \n \n {meta.width} x {meta.height}\n \n \n \n \n {getFormattedAspectRatio(meta)}\n \n \n )}\n \n \n \n \n {usages.length} uses\n \n \n \n\n \n \n \n {\n setFilename(event.target.value);\n setFilenameError(undefined);\n }}\n />\n \n \n\n \n \n Description\n \n \n \n \n setDescription(event.target.value)}\n />\n \n\n \n \n \n \n } />\n \n \n }\n />\n \n\n \n {authPermit === \"view\" ? (\n \n \n \n ) : usages.length === 0 ? (\n deleteAssets([id])}\n prefix={}\n >\n Delete\n \n ) : (\n \n \n \n \n \n Delete asset?\n \n \n This asset is used in following places:\n \n \n \n }\n onClick={() => deleteAssets([id])}\n >\n Delete\n \n \n \n \n \n )}\n\n {downloadError ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n )}\n \n \n );\n};\n\nconst triggerVisibilityVar = `--ws-asset-info-trigger-visibility`;\n\nexport const assetInfoCssVars = ({ show }: { show: boolean }) => ({\n [triggerVisibilityVar]: show ? \"visible\" : \"hidden\",\n});\n\nexport const AssetInfo = ({ asset }: { asset: Asset }) => {\n const usagesByAssetId = useStore($usagesByAssetId);\n const usages = usagesByAssetId.get(asset.id) ?? [];\n return (\n <>\n \n \n }\n />\n \n \n Asset details\n \n \n \n {usages.length === 0 && (\n \n )}\n \n );\n};\n\nexport const __testing__ = {\n traverseStyleValue,\n calculateUsagesByAssetId,\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/asset-manager.stories.tsx", "content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport { StorySection } from \"@webstudio-is/design-system\";\nimport { AssetManager as AssetManagerComponent } from \"./asset-manager\";\nimport {\n ALLOWED_FILE_TYPES,\n IMAGE_EXTENSIONS,\n VIDEO_EXTENSIONS,\n} from \"@webstudio-is/sdk\";\nimport type { Asset, AllowedFileExtension } from \"@webstudio-is/sdk\";\nimport { $assets } from \"~/shared/nano-states\";\nimport { useEffect } from \"react\";\n\n// Create mock assets for every file type\nconst createMockAssets = (): Asset[] => {\n const extensions = Object.keys(ALLOWED_FILE_TYPES).filter(\n (ext) =>\n !IMAGE_EXTENSIONS.includes(ext as AllowedFileExtension) &&\n !VIDEO_EXTENSIONS.includes(ext as AllowedFileExtension)\n );\n const assets: Asset[] = [];\n\n extensions.forEach((ext, index) => {\n assets.push({\n id: `asset-${index}`,\n name: `example-file.${ext}`,\n type: \"file\" as const, // Use \"file\" type to show icons instead of trying to load images\n format: ext,\n size: 1024 * (index + 1),\n meta: { width: 0, height: 0 },\n createdAt: new Date().toISOString(),\n projectId: \"mock-project\",\n description: `Example ${ext.toUpperCase()} file`,\n });\n });\n\n return assets;\n};\n\nexport default {\n title: \"Asset Manager\",\n component: AssetManagerComponent,\n} satisfies Meta;\n\nconst AssetManagerStory = () => {\n useEffect(() => {\n const assets = createMockAssets();\n $assets.set(new Map(assets.map((asset) => [asset.id, asset])));\n }, []);\n\n return (\n \n
    \n \n
    \n     \n );\n};\n\nexport const AssetManager: StoryObj = {\n render: () => ,\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/asset-manager.tsx", "content": "import { useState, useMemo } from \"react\";\nimport {\n Flex,\n Grid,\n findNextListItemIndex,\n theme,\n useSearchFieldKeys,\n} from \"@webstudio-is/design-system\";\nimport type { Asset, AllowedFileExtension } from \"@webstudio-is/sdk\";\nimport { AssetsShell, type AssetContainer, useAssets } from \"../assets\";\nimport { AssetThumbnail } from \"./asset-thumbnail\";\nimport { AssetFilters } from \"./asset-filters\";\nimport { AssetSortSelect } from \"./asset-sort\";\nimport {\n getInitialExtensions,\n calculateFormatCounts,\n filterAndSortAssets,\n findAssetIndex,\n type SortState,\n} from \"./utils\";\n\ntype AssetManagerProps = {\n onChange?: (assetId: Asset[\"id\"]) => void;\n /** acceptable file types in the `` attribute format */\n accept?: string;\n};\n\nexport const AssetManager = ({ accept = \"*\", onChange }: AssetManagerProps) => {\n const { assetContainers } = useAssets();\n\n const [selectedIndex, setSelectedIndex] = useState(-1);\n\n const [selectedExtensions, setSelectedExtensions] = useState<\n AllowedFileExtension[] | \"*\"\n >(() => getInitialExtensions(accept, assetContainers));\n\n const [sortState, setSortState] = useState({\n sortBy: \"createdAt\",\n order: \"desc\",\n });\n\n const formatCounts = useMemo(\n () => calculateFormatCounts(assetContainers),\n [assetContainers]\n );\n\n const searchProps = useSearchFieldKeys({\n onMove({ direction }) {\n if (direction === \"current\") {\n const assetContainer = filteredItems[selectedIndex];\n if (assetContainer?.status === \"uploaded\") {\n onChange?.(assetContainer.asset.id);\n }\n return;\n }\n const nextIndex = findNextListItemIndex(\n selectedIndex,\n filteredItems.length,\n direction\n );\n setSelectedIndex(nextIndex);\n },\n });\n\n const filteredItems = useMemo(\n () =>\n filterAndSortAssets({\n assetContainers,\n selectedExtensions,\n searchQuery: searchProps.value,\n sortState,\n }),\n [assetContainers, selectedExtensions, searchProps.value, sortState]\n );\n\n const handleSelect = (assetContainer?: AssetContainer) => {\n setSelectedIndex(findAssetIndex(filteredItems, assetContainer?.asset.id));\n };\n\n return (\n \n \n \n \n }\n searchProps={searchProps}\n isEmpty={filteredItems.length === 0}\n type=\"file\"\n accept={accept}\n >\n <>\n \n {filteredItems.map((assetContainer, index) => (\n {\n onChange?.(assetContainer.asset.id);\n }}\n state={index === selectedIndex ? \"selected\" : undefined}\n />\n ))}\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/asset-sort.tsx", "content": "import {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuLabel,\n Button,\n MenuCheckedIcon,\n} from \"@webstudio-is/design-system\";\nimport {\n ChevronDownIcon,\n CalendarIcon,\n ArrowDownAZIcon,\n ArrowDownZAIcon,\n ArrowDownWideNarrowIcon,\n ArrowDownNarrowWideIcon,\n} from \"@webstudio-is/icons\";\nimport type { SortState, SortField, SortOrder } from \"./utils\";\n\ntype AssetSortSelectProps = {\n value: SortState;\n onValueChange: (value: SortState) => void;\n};\n\nexport const AssetSortSelect = ({\n value,\n onValueChange,\n}: AssetSortSelectProps) => {\n const { sortBy, order } = value;\n\n const sortLabel =\n sortBy === \"name\"\n ? \"Alphabetical\"\n : sortBy === \"size\"\n ? \"File size\"\n : \"Date created\";\n\n const sortIcon =\n sortBy === \"name\" ? (\n order === \"asc\" ? (\n \n ) : (\n \n )\n ) : sortBy === \"size\" ? (\n order === \"desc\" ? (\n \n ) : (\n \n )\n ) : (\n \n );\n\n const handleSortChange = (newSortBy: SortField, newOrder: SortOrder) => {\n // When switching to alphabetical sorting, default to A→Z (asc)\n // When switching to date/size sorting, default to newest/largest first (desc)\n if (newSortBy !== sortBy) {\n onValueChange({\n sortBy: newSortBy,\n order: newSortBy === \"name\" ? \"asc\" : \"desc\",\n });\n } else {\n onValueChange({ sortBy: newSortBy, order: newOrder });\n }\n };\n\n return (\n \n \n \n \n \n Sort\n handleSortChange(value as SortField, order)}\n >\n }>\n Alphabetical\n \n }>\n Date created\n \n }>\n File size\n \n \n \n Order\n \n handleSortChange(sortBy, value as SortOrder)\n }\n >\n {sortBy === \"name\" ? (\n <>\n }>\n A→Z\n \n }>\n Z→A\n \n \n ) : sortBy === \"size\" ? (\n <>\n }>\n Largest first\n \n }>\n Smallest first\n \n \n ) : (\n <>\n }>\n Newest first\n \n }>\n Oldest first\n \n \n )}\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/asset-thumbnail.tsx", "content": "import type { KeyboardEvent, FocusEvent } from \"react\";\nimport { Box, Flex, styled, Text } from \"@webstudio-is/design-system\";\nimport { PageIcon, TextCapitalizeIcon } from \"@webstudio-is/icons\";\nimport { wsVideoLoader } from \"@webstudio-is/image\";\nimport { UploadingAnimation } from \"./uploading-animation\";\nimport { AssetInfo, assetInfoCssVars } from \"./asset-info\";\nimport type { AssetContainer } from \"~/builder/shared/assets\";\nimport { Image } from \"./image\";\nimport brokenImage from \"~/shared/images/broken-image-placeholder.svg\";\nimport { theme } from \"@webstudio-is/design-system\";\nimport {\n formatAssetName,\n parseAssetName,\n} from \"~/builder/shared/assets/asset-utils\";\nimport type { IconComponent } from \"@webstudio-is/icons\";\nimport type { AllowedFileExtension } from \"@webstudio-is/sdk\";\nimport {\n FILE_EXTENSIONS_BY_CATEGORY,\n detectAssetType,\n} from \"@webstudio-is/sdk\";\nimport type { MimeCategory } from \"@webstudio-is/sdk\";\n\nconst FORMAT_CATEGORIES = FILE_EXTENSIONS_BY_CATEGORY;\n\nconst CATEGORY_ICON_MAP: Partial> = {\n font: TextCapitalizeIcon,\n};\n\nconst getFileIcon = (format: string): IconComponent => {\n const lowerFormat = format.toLowerCase();\n\n // Check which category this format belongs to\n for (const [category, extensions] of Object.entries(FORMAT_CATEGORIES)) {\n if (extensions.includes(lowerFormat as AllowedFileExtension)) {\n return CATEGORY_ICON_MAP[category as MimeCategory] ?? PageIcon;\n }\n }\n\n // Default to PageIcon if not found in any category\n return PageIcon;\n};\n\nconst StyledWebstudioImage = styled(Image, {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n objectFit: \"contain\",\n\n // This is shown only if an image was not loaded and broken\n // From the spec:\n // - The pseudo-elements generated by ::before and ::after are contained by the element's formatting box,\n // and thus don't apply to \"replaced\" elements such as , or to
    elements\n // Not in spec but supported by all browsers:\n // - broken image is not a \"replaced\" element so this style is applied\n \"&::after\": {\n content: \"' '\",\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n left: 0,\n top: 0,\n backgroundSize: \"contain\",\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"center\",\n backgroundImage: `url(${brokenImage})`,\n },\n});\n\nconst StyledWebstudioVideo = styled(\"video\", {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n objectFit: \"contain\",\n\n // This is shown only if an image was not loaded and broken\n // From the spec:\n // - The pseudo-elements generated by ::before and ::after are contained by the element's formatting box,\n // and thus don't apply to \"replaced\" elements such as , or to
    elements\n // Not in spec but supported by all browsers:\n // - broken image is not a \"replaced\" element so this style is applied\n \"&::after\": {\n content: \"' '\",\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n left: 0,\n top: 0,\n backgroundSize: \"contain\",\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"center\",\n backgroundImage: `url(${brokenImage})`,\n },\n});\n\nconst ThumbnailContainer = styled(Box, {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n flexDirection: \"column\",\n borderRadius: theme.borderRadius[4],\n outline: \"none\",\n gap: theme.spacing[3],\n overflow: \"hidden\",\n padding: 2,\n \"&:hover\": {\n ...assetInfoCssVars({ show: true }),\n backgroundColor: theme.colors.backgroundAssetcardHover,\n },\n variants: {\n status: {\n uploading: {},\n uploaded: {},\n deleting: {},\n },\n state: {\n selected: {\n outline: `1px solid ${theme.colors.borderFocus}`,\n outlineOffset: -1,\n backgroundColor: theme.colors.backgroundAssetcardHover,\n ...assetInfoCssVars({ show: true }),\n },\n },\n },\n});\n\nconst Thumbnail = styled(Box, {\n width: \"100%\",\n height: theme.spacing[19],\n flexShrink: 0,\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n});\n\nconst GenericFilePreview = ({\n ext,\n format,\n}: {\n ext: string;\n format: string;\n}) => {\n const Icon = getFileIcon(format);\n const showExtension = Icon === PageIcon;\n\n return (\n \n \n {showExtension && (\n \n {ext.toUpperCase()}\n \n )}\n \n );\n};\n\ntype AssetThumbnailProps = {\n assetContainer: AssetContainer;\n onSelect: (assetContainer?: AssetContainer) => void;\n onChange?: (assetContainer: AssetContainer) => void;\n state?: \"selected\";\n};\n\nexport const AssetThumbnail = ({\n assetContainer,\n onSelect,\n onChange,\n state,\n}: AssetThumbnailProps) => {\n const { asset } = assetContainer;\n const { basename, ext } = parseAssetName(asset.name);\n const alt = asset.description ?? formatAssetName(asset);\n const isUploading = assetContainer.status === \"uploading\";\n const assetType = detectAssetType(asset.name);\n\n return (\n {\n onSelect?.(assetContainer);\n }}\n onBlur={(event: FocusEvent) => {\n const isFocusWithin = event.currentTarget.contains(event.relatedTarget);\n if (isFocusWithin === false) {\n onSelect();\n }\n }}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.code === \"Enter\") {\n onChange?.(assetContainer);\n }\n }}\n >\n {\n onChange?.(assetContainer);\n }}\n >\n {assetType === \"image\" ? (\n // Image files - show preview\n \n ) : assetType === \"video\" ? (\n // Video files - show video thumbnail (first frame)\n \n ) : (\n // Other files - show icon based on category\n \n )}\n \n \n \n {asset.filename ?? basename}\n \n .{ext}\n \n {assetContainer.status === \"uploaded\" && (\n \n )}\n {isUploading && }\n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/delete-unused-assets.tsx", "content": "import { atom } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport {\n Dialog,\n DialogContent,\n DialogTitle,\n DialogClose,\n ScrollArea,\n Button,\n Text,\n Flex,\n theme,\n toast,\n Box,\n} from \"@webstudio-is/design-system\";\nimport type { Asset } from \"@webstudio-is/sdk\";\nimport { $assets, $pages, $props, $styles } from \"~/shared/nano-states\";\nimport { deleteAssets } from \"~/builder/shared/assets\";\nimport { formatAssetName } from \"~/builder/shared/assets/asset-utils\";\nimport { calculateUsagesByAssetId } from \"./asset-info\";\n\nconst $isDeleteUnusedAssetsDialogOpen = atom(false);\n\nexport const openDeleteUnusedAssetsDialog = () => {\n $isDeleteUnusedAssetsDialogOpen.set(true);\n};\n\nconst getUnusedAssets = () => {\n const assets = $assets.get();\n const usagesByAssetId = calculateUsagesByAssetId({\n pages: $pages.get(),\n props: $props.get(),\n styles: $styles.get(),\n assets,\n });\n const unusedAssets: Asset[] = [];\n for (const asset of assets.values()) {\n const usages = usagesByAssetId.get(asset.id);\n if (usages === undefined || usages.length === 0) {\n unusedAssets.push(asset);\n }\n }\n return unusedAssets;\n};\n\nconst DeleteUnusedAssetsDialogContent = ({\n onClose,\n}: {\n onClose: () => void;\n}) => {\n const unusedAssets = getUnusedAssets();\n\n return (\n \n {unusedAssets.length === 0 ? (\n There are no unused assets to delete.\n ) : (\n <>\n \n Delete {unusedAssets.length} unused{\" \"}\n {unusedAssets.length === 1 ? \"asset\" : \"assets\"} from the project?\n \n\n \n \n \n {unusedAssets.map((asset) => (\n \n {formatAssetName(asset)}\n \n ))}\n \n \n \n \n )}\n \n {unusedAssets.length > 0 && (\n {\n const count = unusedAssets.length;\n deleteAssets(unusedAssets.map((asset) => asset.id));\n onClose();\n toast.success(\n `Deleted ${count} unused ${count === 1 ? \"asset\" : \"assets\"}`\n );\n }}\n autoFocus\n >\n Delete\n \n )}\n \n \n \n \n \n );\n};\n\nexport const DeleteUnusedAssetsDialog = () => {\n const open = useStore($isDeleteUnusedAssetsDialogOpen);\n const handleClose = () => {\n $isDeleteUnusedAssetsDialogOpen.set(false);\n };\n\n return (\n {\n if (isOpen === false) {\n handleClose();\n }\n }}\n >\n {\n event.stopPropagation();\n }}\n >\n Delete unused assets\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/image.tsx", "content": "import { Image as WebstudioImage, wsImageLoader } from \"@webstudio-is/image\";\n\ntype ImageProps = {\n assetId: string;\n objectURL: string | undefined;\n name: string;\n alt: string;\n width: number;\n className?: string;\n};\n\nexport const Image = ({\n className,\n objectURL,\n assetId,\n name,\n alt,\n width,\n}: ImageProps) => {\n const optimize = objectURL === undefined;\n\n // Avoid image flickering on switching from preview to asset (during upload)\n // Possible optimisation, we can set it to \"sync\" only if asset.path has changed or add isNew prop to UploadedAssetContainer\n const decoding = \"sync\";\n\n const src = objectURL ?? name;\n\n return (\n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/index.ts", "content": "export * from \"./asset-manager\";\nexport { getFormattedAspectRatio } from \"./utils\";\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/uploading-animation.tsx", "content": "import { rawTheme, styled } from \"@webstudio-is/design-system\";\nimport { SpinnerIcon } from \"@webstudio-is/icons\";\n\nconst AnimationContainer = styled(\"div\", {\n position: \"absolute\",\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n pointerEvents: \"none\",\n});\n\nexport const UploadingAnimation = () => {\n return (\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/utils.test.ts", "content": "import { describe, test, expect } from \"vitest\";\nimport type { AssetContainer } from \"../assets\";\nimport type { Asset } from \"@webstudio-is/sdk\";\nimport {\n getInitialExtensions,\n calculateFormatCounts,\n filterAndSortAssets,\n findAssetIndex,\n sortAssets,\n getAssetFormat,\n type SortState,\n} from \"./utils\";\n\nconst createAssetContainer = (\n id: string,\n name: string,\n format: string,\n type: string,\n createdAt: string\n): AssetContainer =>\n ({\n status: \"uploaded\" as const,\n asset: {\n id,\n name,\n format,\n type,\n createdAt,\n projectId: \"test-project\",\n size: 1000,\n },\n }) as AssetContainer;\n\ndescribe(\"getAssetFormat\", () => {\n test(\"returns lowercase format\", () => {\n const asset = { format: \"JPEG\" } as Pick;\n expect(getAssetFormat(asset)).toBe(\"jpeg\");\n });\n\n test(\"handles already lowercase format\", () => {\n const asset = { format: \"png\" } as Pick;\n expect(getAssetFormat(asset)).toBe(\"png\");\n });\n\n test(\"handles mixed case format\", () => {\n const asset = { format: \"WoFf2\" } as Pick;\n expect(getAssetFormat(asset)).toBe(\"woff2\");\n });\n\n test(\"returns undefined for undefined format\", () => {\n const asset = { format: undefined } as unknown as Pick;\n expect(getAssetFormat(asset)).toBeUndefined();\n });\n\n test(\"handles empty string format\", () => {\n const asset = { format: \"\" } as Pick;\n expect(getAssetFormat(asset)).toBe(\"\");\n });\n});\n\ndescribe(\"getInitialExtensions\", () => {\n test(\"returns * for wildcard accept\", () => {\n const containers: AssetContainer[] = [];\n expect(getInitialExtensions(\"*\", containers)).toBe(\"*\");\n });\n\n test(\"returns * for empty accept\", () => {\n const containers: AssetContainer[] = [];\n expect(getInitialExtensions(\"\", containers)).toBe(\"*\");\n });\n\n test(\"extracts extensions from containers matching accept pattern\", () => {\n const containers = [\n createAssetContainer(\"1\", \"image.jpg\", \"jpeg\", \"image\", \"2024-01-01\"),\n createAssetContainer(\"2\", \"image.png\", \"png\", \"image\", \"2024-01-02\"),\n createAssetContainer(\"3\", \"font.woff2\", \"woff2\", \"font\", \"2024-01-03\"),\n ];\n const result = getInitialExtensions(\"image/*\", containers);\n expect(result).toEqual([\"jpeg\", \"png\"]);\n });\n\n test(\"does not include duplicate extensions\", () => {\n const containers = [\n createAssetContainer(\"1\", \"image1.jpg\", \"jpeg\", \"image\", \"2024-01-01\"),\n createAssetContainer(\"2\", \"image2.jpg\", \"jpeg\", \"image\", \"2024-01-02\"),\n ];\n const result = getInitialExtensions(\"image/*\", containers);\n expect(result).toEqual([\"jpeg\"]);\n });\n\n test(\"returns * when no containers match\", () => {\n const containers = [\n createAssetContainer(\"1\", \"font.woff2\", \"woff2\", \"font\", \"2024-01-01\"),\n ];\n const result = getInitialExtensions(\"image/*\", containers);\n expect(result).toBe(\"*\");\n });\n});\n\ndescribe(\"calculateFormatCounts\", () => {\n test(\"counts formats correctly\", () => {\n const containers = [\n createAssetContainer(\"1\", \"image1.jpg\", \"jpeg\", \"image\", \"2024-01-01\"),\n createAssetContainer(\"2\", \"image2.jpg\", \"jpeg\", \"image\", \"2024-01-02\"),\n createAssetContainer(\"3\", \"image.png\", \"png\", \"image\", \"2024-01-03\"),\n createAssetContainer(\"4\", \"font.woff2\", \"woff2\", \"font\", \"2024-01-04\"),\n ];\n const counts = calculateFormatCounts(containers);\n expect(counts).toEqual({\n jpeg: 2,\n png: 1,\n woff2: 1,\n });\n });\n\n test(\"returns empty object for empty containers\", () => {\n const counts = calculateFormatCounts([]);\n expect(counts).toEqual({});\n });\n\n test(\"skips assets with undefined format\", () => {\n const containers = [\n createAssetContainer(\"1\", \"image.jpg\", \"jpeg\", \"image\", \"2024-01-01\"),\n {\n status: \"uploaded\" as const,\n asset: {\n id: \"2\",\n name: \"no-format\",\n format: undefined,\n type: \"file\",\n createdAt: \"2024-01-02\",\n projectId: \"test-project\",\n size: 1000,\n },\n } as unknown as AssetContainer,\n ];\n const counts = calculateFormatCounts(containers);\n expect(counts).toEqual({ jpeg: 1 });\n });\n});\n\ndescribe(\"filterAndSortAssets\", () => {\n const containers = [\n createAssetContainer(\"1\", \"apple.jpg\", \"jpeg\", \"image\", \"2024-01-01\"),\n createAssetContainer(\"2\", \"banana.png\", \"png\", \"image\", \"2024-01-02\"),\n createAssetContainer(\"3\", \"cherry.jpg\", \"jpeg\", \"image\", \"2024-01-03\"),\n createAssetContainer(\"4\", \"date.woff2\", \"woff2\", \"font\", \"2024-01-04\"),\n ];\n\n test(\"returns all assets when selectedExtensions is *\", () => {\n const sortState: SortState = { sortBy: \"createdAt\", order: \"asc\" };\n const result = filterAndSortAssets({\n assetContainers: containers,\n selectedExtensions: \"*\",\n searchQuery: \"\",\n sortState,\n });\n expect(result).toHaveLength(4);\n });\n\n test(\"filters by selected extensions\", () => {\n const sortState: SortState = { sortBy: \"createdAt\", order: \"asc\" };\n const result = filterAndSortAssets({\n assetContainers: containers,\n selectedExtensions: [\"jpeg\"],\n searchQuery: \"\",\n sortState,\n });\n expect(result).toHaveLength(2);\n expect(result.every((c) => c.asset.format === \"jpeg\")).toBe(true);\n });\n\n test(\"filters by search query\", () => {\n const sortState: SortState = { sortBy: \"createdAt\", order: \"asc\" };\n const result = filterAndSortAssets({\n assetContainers: containers,\n selectedExtensions: \"*\",\n searchQuery: \"apple\",\n sortState,\n });\n expect(result).toHaveLength(1);\n expect(result[0].asset.name).toBe(\"apple.jpg\");\n });\n\n test(\"applies both extension filter and search\", () => {\n const sortState: SortState = { sortBy: \"createdAt\", order: \"asc\" };\n const result = filterAndSortAssets({\n assetContainers: containers,\n selectedExtensions: [\"jpeg\", \"png\"],\n searchQuery: \"a\",\n sortState,\n });\n expect(result).toHaveLength(2);\n expect(result.map((c) => c.asset.name)).toEqual([\n \"apple.jpg\",\n \"banana.png\",\n ]);\n });\n\n test(\"returns empty array when no matches\", () => {\n const sortState: SortState = { sortBy: \"createdAt\", order: \"asc\" };\n const result = filterAndSortAssets({\n assetContainers: containers,\n selectedExtensions: [\"jpeg\"],\n searchQuery: \"xyz\",\n sortState,\n });\n expect(result).toHaveLength(0);\n });\n});\n\ndescribe(\"findAssetIndex\", () => {\n const containers = [\n createAssetContainer(\"1\", \"apple.jpg\", \"jpeg\", \"image\", \"2024-01-01\"),\n createAssetContainer(\"2\", \"banana.png\", \"png\", \"image\", \"2024-01-02\"),\n createAssetContainer(\"3\", \"cherry.jpg\", \"jpeg\", \"image\", \"2024-01-03\"),\n ];\n\n test(\"finds asset index by id\", () => {\n expect(findAssetIndex(containers, \"2\")).toBe(1);\n });\n\n test(\"returns -1 for non-existent id\", () => {\n expect(findAssetIndex(containers, \"999\")).toBe(-1);\n });\n\n test(\"returns -1 for undefined id\", () => {\n expect(findAssetIndex(containers, undefined)).toBe(-1);\n });\n\n test(\"finds first asset\", () => {\n expect(findAssetIndex(containers, \"1\")).toBe(0);\n });\n\n test(\"finds last asset\", () => {\n expect(findAssetIndex(containers, \"3\")).toBe(2);\n });\n});\n\ndescribe(\"sortAssets\", () => {\n const containers = [\n createAssetContainer(\"1\", \"zebra.jpg\", \"jpeg\", \"image\", \"2024-01-03\"),\n createAssetContainer(\"2\", \"apple.png\", \"png\", \"image\", \"2024-01-01\"),\n createAssetContainer(\"3\", \"mango.jpg\", \"jpeg\", \"image\", \"2024-01-02\"),\n ];\n\n test(\"sorts by name ascending\", () => {\n const result = sortAssets(containers, { sortBy: \"name\", order: \"asc\" });\n expect(result.map((c) => c.asset.name)).toEqual([\n \"apple.png\",\n \"mango.jpg\",\n \"zebra.jpg\",\n ]);\n });\n\n test(\"sorts by name descending\", () => {\n const result = sortAssets(containers, { sortBy: \"name\", order: \"desc\" });\n expect(result.map((c) => c.asset.name)).toEqual([\n \"zebra.jpg\",\n \"mango.jpg\",\n \"apple.png\",\n ]);\n });\n\n test(\"sorts by createdAt ascending\", () => {\n const result = sortAssets(containers, {\n sortBy: \"createdAt\",\n order: \"asc\",\n });\n expect(result.map((c) => c.asset.id)).toEqual([\"2\", \"3\", \"1\"]);\n });\n\n test(\"sorts by createdAt descending\", () => {\n const result = sortAssets(containers, {\n sortBy: \"createdAt\",\n order: \"desc\",\n });\n expect(result.map((c) => c.asset.id)).toEqual([\"1\", \"3\", \"2\"]);\n });\n\n test(\"sorts by size ascending\", () => {\n const smallFile = {\n status: \"uploaded\" as const,\n asset: {\n id: \"small\",\n name: \"small.jpg\",\n format: \"jpeg\",\n type: \"image\",\n createdAt: \"2024-01-01\",\n projectId: \"test-project\",\n size: 100,\n },\n } as AssetContainer;\n\n const largeFile = {\n status: \"uploaded\" as const,\n asset: {\n id: \"large\",\n name: \"large.jpg\",\n format: \"jpeg\",\n type: \"image\",\n createdAt: \"2024-01-02\",\n projectId: \"test-project\",\n size: 1000,\n },\n } as AssetContainer;\n\n const result = sortAssets([largeFile, smallFile], {\n sortBy: \"size\",\n order: \"asc\",\n });\n expect(result.map((c) => c.asset.id)).toEqual([\"small\", \"large\"]);\n });\n\n test(\"sorts by size descending\", () => {\n const smallFile = {\n status: \"uploaded\" as const,\n asset: {\n id: \"small\",\n name: \"small.jpg\",\n format: \"jpeg\",\n type: \"image\",\n createdAt: \"2024-01-01\",\n projectId: \"test-project\",\n size: 100,\n },\n } as AssetContainer;\n\n const largeFile = {\n status: \"uploaded\" as const,\n asset: {\n id: \"large\",\n name: \"large.jpg\",\n format: \"jpeg\",\n type: \"image\",\n createdAt: \"2024-01-02\",\n projectId: \"test-project\",\n size: 1000,\n },\n } as AssetContainer;\n\n const result = sortAssets([smallFile, largeFile], {\n sortBy: \"size\",\n order: \"desc\",\n });\n expect(result.map((c) => c.asset.id)).toEqual([\"large\", \"small\"]);\n });\n\n test(\"puts uploading assets at the end when sorting by size\", () => {\n const uploadedFile = {\n status: \"uploaded\" as const,\n asset: {\n id: \"uploaded\",\n name: \"uploaded.jpg\",\n format: \"jpeg\",\n type: \"image\",\n createdAt: \"2024-01-01\",\n projectId: \"test-project\",\n size: 500,\n },\n } as AssetContainer;\n\n const uploadingFile = {\n status: \"uploading\" as const,\n asset: {\n id: \"uploading\",\n name: \"uploading.jpg\",\n format: \"jpeg\",\n type: \"image\",\n projectId: \"test-project\",\n },\n objectURL: \"blob:...\",\n } as AssetContainer;\n\n const result = sortAssets([uploadingFile, uploadedFile], {\n sortBy: \"size\",\n order: \"asc\",\n });\n expect(result.map((c) => c.asset.id)).toEqual([\"uploaded\", \"uploading\"]);\n });\n\n test(\"is case-insensitive when sorting by name\", () => {\n const containers = [\n createAssetContainer(\"1\", \"Zebra.jpg\", \"jpeg\", \"image\", \"2024-01-01\"),\n createAssetContainer(\"2\", \"apple.png\", \"png\", \"image\", \"2024-01-02\"),\n createAssetContainer(\"3\", \"MANGO.jpg\", \"jpeg\", \"image\", \"2024-01-03\"),\n ];\n\n const result = sortAssets(containers, { sortBy: \"name\", order: \"asc\" });\n expect(result.map((c) => c.asset.name)).toEqual([\n \"apple.png\",\n \"MANGO.jpg\",\n \"Zebra.jpg\",\n ]);\n });\n\n test(\"does not mutate original array\", () => {\n const original = [...containers];\n sortAssets(containers, { sortBy: \"name\", order: \"asc\" });\n expect(containers).toEqual(original);\n });\n});\n" }, { "path": "apps/builder/app/builder/shared/asset-manager/utils.ts", "content": "import { matchSorter } from \"match-sorter\";\nimport type { AllowedFileExtension, Asset } from \"@webstudio-is/sdk\";\nimport {\n acceptToMimePatterns,\n doesAssetMatchMimePatterns,\n} from \"@webstudio-is/sdk\";\nimport type { AssetContainer } from \"../assets\";\n\nexport type SortField = \"name\" | \"size\" | \"createdAt\";\nexport type SortOrder = \"asc\" | \"desc\";\n\nexport type SortState = {\n sortBy: SortField;\n order: SortOrder;\n};\n\n/**\n * Safely gets the asset format as a lowercase extension.\n */\nexport const getAssetFormat = (\n asset: Pick\n): AllowedFileExtension | undefined => {\n return asset.format?.toLowerCase() as AllowedFileExtension | undefined;\n};\n\nconst gcd = (a: number, b: number): number => {\n return b ? gcd(b, a % b) : a;\n};\n\nexport const getFormattedAspectRatio = ({\n width,\n height,\n}: {\n width?: number;\n height?: number;\n}): string => {\n if (width === undefined || height === undefined) {\n return \"\";\n }\n const divisor = gcd(width, height);\n\n return `${width / divisor}:${height / divisor}`;\n};\n\n/**\n * Sort asset containers by field and order\n */\nexport const sortAssets = (\n assetContainers: AssetContainer[],\n sortState: SortState\n): AssetContainer[] => {\n const { sortBy, order } = sortState;\n const sorted = [...assetContainers];\n\n sorted.sort((a, b) => {\n let comparison = 0;\n\n if (sortBy === \"name\") {\n const aName = a.asset.name.toLowerCase();\n const bName = b.asset.name.toLowerCase();\n comparison = aName.localeCompare(bName);\n } else if (sortBy === \"size\") {\n const aSize =\n a.status === \"uploaded\" ? a.asset.size : Number.MAX_SAFE_INTEGER;\n const bSize =\n b.status === \"uploaded\" ? b.asset.size : Number.MAX_SAFE_INTEGER;\n comparison = aSize - bSize;\n } else if (sortBy === \"createdAt\") {\n const aCreated = a.status === \"uploaded\" ? a.asset.createdAt || \"\" : \"\";\n const bCreated = b.status === \"uploaded\" ? b.asset.createdAt || \"\" : \"\";\n comparison = new Date(aCreated).getTime() - new Date(bCreated).getTime();\n }\n\n return order === \"asc\" ? comparison : -comparison;\n });\n\n return sorted;\n};\n\n/**\n * Get initial selected extensions based on accept pattern\n */\nexport const getInitialExtensions = (\n accept: string,\n assetContainers: AssetContainer[]\n): AllowedFileExtension[] | \"*\" => {\n const patterns = acceptToMimePatterns(accept);\n if (patterns === \"*\") {\n return \"*\";\n }\n const extensions: AllowedFileExtension[] = [];\n assetContainers.forEach((container) => {\n if (doesAssetMatchMimePatterns(container.asset, patterns)) {\n const ext = getAssetFormat(container.asset);\n if (ext !== undefined && !extensions.includes(ext)) {\n extensions.push(ext);\n }\n }\n });\n return extensions.length > 0 ? extensions : \"*\";\n};\n\n/**\n * Calculate format counts for all assets\n */\nexport const calculateFormatCounts = (\n assetContainers: AssetContainer[]\n): Partial> => {\n const counts: Partial> = {};\n assetContainers.forEach((container) => {\n const ext = getAssetFormat(container.asset);\n if (ext !== undefined) {\n counts[ext] = (counts[ext] || 0) + 1;\n }\n });\n return counts;\n};\n\n/**\n * Filter and sort asset containers\n */\nexport const filterAndSortAssets = ({\n assetContainers,\n selectedExtensions,\n searchQuery,\n sortState,\n}: {\n assetContainers: AssetContainer[];\n selectedExtensions: AllowedFileExtension[] | \"*\";\n searchQuery: string;\n sortState: SortState;\n}): AssetContainer[] => {\n // Filter by selected extensions\n let filtered = assetContainers;\n if (selectedExtensions !== \"*\") {\n filtered = assetContainers.filter((item) => {\n const ext = getAssetFormat(item.asset);\n return ext !== undefined && selectedExtensions.includes(ext);\n });\n }\n\n // Apply search\n if (searchQuery !== \"\") {\n filtered = matchSorter(filtered, searchQuery, {\n keys: [(item) => item.asset.name],\n });\n }\n\n // Apply sorting\n return sortAssets(filtered, sortState);\n};\n\n/**\n * Find index of asset container by asset id\n */\nexport const findAssetIndex = (\n assetContainers: AssetContainer[],\n assetId?: string\n): number => {\n if (assetId === undefined) {\n return -1;\n }\n return assetContainers.findIndex((item) => item.asset.id === assetId);\n};\n" }, { "path": "apps/builder/app/builder/shared/assets/asset-upload.test.ts", "content": "import { describe, test, expect, vi, afterEach } from \"vitest\";\nimport {\n acceptFileTypeSpecifier,\n validateFiles,\n acceptUploadType,\n} from \"./asset-upload\";\n\nconst mockToast = vi.hoisted(() => ({\n error: vi.fn(),\n}));\n\nvi.mock(\"@webstudio-is/design-system\", async (importOriginal) => {\n const actual =\n await importOriginal();\n return {\n ...actual,\n toast: mockToast,\n };\n});\n\ndescribe(\"validateFiles\", () => {\n afterEach(() => {\n vi.clearAllMocks();\n });\n\n test(\"returns all files when under size limit\", () => {\n const smallFile1 = new File([\"a\".repeat(1000)], \"small1.jpg\", {\n type: \"image/jpeg\",\n });\n const smallFile2 = new File([\"b\".repeat(2000)], \"small2.jpg\", {\n type: \"image/jpeg\",\n });\n\n const result = validateFiles([smallFile1, smallFile2]);\n\n expect(result).toHaveLength(2);\n expect(result).toContain(smallFile1);\n expect(result).toContain(smallFile2);\n expect(mockToast.error).not.toHaveBeenCalled();\n });\n\n test(\"filters out files exceeding size limit and shows toast error\", () => {\n const smallFile = new File([\"a\".repeat(1000)], \"small.jpg\", {\n type: \"image/jpeg\",\n });\n // Create a file object with a large size property (without actually creating the data)\n const largeFile = new File([\"content\"], \"large.jpg\", {\n type: \"image/jpeg\",\n });\n Object.defineProperty(largeFile, \"size\", {\n value: 5 * 1024 * 1024, // 5MB (exceeds 4.5MB limit)\n });\n\n const result = validateFiles([smallFile, largeFile]);\n\n expect(result).toHaveLength(1);\n expect(result).toContain(smallFile);\n expect(mockToast.error).toHaveBeenCalledWith(\n 'Asset \"large.jpg\" cannot be bigger than 4.5MB'\n );\n });\n\n test(\"shows multiple toast errors for multiple large files\", () => {\n const largeFile1 = new File([\"content1\"], \"large1.jpg\", {\n type: \"image/jpeg\",\n });\n Object.defineProperty(largeFile1, \"size\", {\n value: 5 * 1024 * 1024, // 5MB\n });\n\n const largeFile2 = new File([\"content2\"], \"large2.jpg\", {\n type: \"image/jpeg\",\n });\n Object.defineProperty(largeFile2, \"size\", {\n value: 5 * 1024 * 1024, // 5MB\n });\n\n const result = validateFiles([largeFile1, largeFile2]);\n\n expect(result).toHaveLength(0);\n expect(mockToast.error).toHaveBeenCalledTimes(2);\n expect(mockToast.error).toHaveBeenCalledWith(\n 'Asset \"large1.jpg\" cannot be bigger than 4.5MB'\n );\n expect(mockToast.error).toHaveBeenCalledWith(\n 'Asset \"large2.jpg\" cannot be bigger than 4.5MB'\n );\n });\n});\n\ndescribe(\"acceptFileTypeSpecifier\", () => {\n test(\"accepts wildcard *\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n const pdfFile = new File([], \"document.pdf\", { type: \"application/pdf\" });\n\n expect(acceptFileTypeSpecifier(\"*\", jpegFile)).toBe(true);\n expect(acceptFileTypeSpecifier(\"*\", pdfFile)).toBe(true);\n });\n\n test(\"accepts mime type wildcards like image/*\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n const pngFile = new File([], \"image.png\", { type: \"image/png\" });\n const pdfFile = new File([], \"document.pdf\", { type: \"application/pdf\" });\n\n expect(acceptFileTypeSpecifier(\"image/*\", jpegFile)).toBe(true);\n expect(acceptFileTypeSpecifier(\"image/*\", pngFile)).toBe(true);\n expect(acceptFileTypeSpecifier(\"image/*\", pdfFile)).toBe(false);\n });\n\n test(\"accepts specific mime types\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n const pngFile = new File([], \"image.png\", { type: \"image/png\" });\n\n expect(acceptFileTypeSpecifier(\"image/jpeg\", jpegFile)).toBe(true);\n expect(acceptFileTypeSpecifier(\"image/jpeg\", pngFile)).toBe(false);\n });\n\n test(\"accepts file extensions\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n const pngFile = new File([], \"image.png\", { type: \"image/png\" });\n\n expect(acceptFileTypeSpecifier(\".jpg\", jpegFile)).toBe(true);\n expect(acceptFileTypeSpecifier(\".jpg\", pngFile)).toBe(false);\n });\n\n test(\"accepts multiple specifiers\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n const pngFile = new File([], \"image.png\", { type: \"image/png\" });\n const pdfFile = new File([], \"document.pdf\", { type: \"application/pdf\" });\n\n expect(acceptFileTypeSpecifier(\"image/jpeg, image/png\", jpegFile)).toBe(\n true\n );\n expect(acceptFileTypeSpecifier(\"image/jpeg, image/png\", pngFile)).toBe(\n true\n );\n expect(acceptFileTypeSpecifier(\"image/jpeg, image/png\", pdfFile)).toBe(\n false\n );\n });\n\n test(\"handles mixed specifiers\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n const pngFile = new File([], \"image.png\", { type: \"image/png\" });\n const pdfFile = new File([], \"document.pdf\", { type: \"application/pdf\" });\n\n expect(acceptFileTypeSpecifier(\".jpg, image/png\", jpegFile)).toBe(true);\n expect(acceptFileTypeSpecifier(\".jpg, image/png\", pngFile)).toBe(true);\n expect(acceptFileTypeSpecifier(\".jpg, image/png\", pdfFile)).toBe(false);\n });\n\n test(\"handles whitespace in specifiers\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n\n expect(acceptFileTypeSpecifier(\" image/jpeg , image/png \", jpegFile)).toBe(\n true\n );\n });\n});\n\ndescribe(\"acceptUploadType\", () => {\n test(\"uses custom accept string when provided\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n const pdfFile = new File([], \"document.pdf\", { type: \"application/pdf\" });\n\n expect(acceptUploadType(\"file\", \"image/*\", jpegFile)).toBe(true);\n expect(acceptUploadType(\"file\", \"image/*\", pdfFile)).toBe(false);\n });\n\n test(\"uses acceptMap for asset type when accept is undefined\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n const pdfFile = new File([], \"document.pdf\", { type: \"application/pdf\" });\n\n expect(acceptUploadType(\"image\", undefined, jpegFile)).toBe(true);\n expect(acceptUploadType(\"image\", undefined, pdfFile)).toBe(false);\n });\n\n test(\"accepts all files when acceptMap has undefined for type\", () => {\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n const pdfFile = new File([], \"document.pdf\", { type: \"application/pdf\" });\n\n expect(acceptUploadType(\"file\", undefined, jpegFile)).toBe(true);\n expect(acceptUploadType(\"file\", undefined, pdfFile)).toBe(true);\n });\n\n test(\"accepts font files for font type\", () => {\n const woffFile = new File([], \"font.woff\", { type: \"font/woff\" });\n const jpegFile = new File([], \"image.jpg\", { type: \"image/jpeg\" });\n\n expect(acceptUploadType(\"font\", undefined, woffFile)).toBe(true);\n expect(acceptUploadType(\"font\", undefined, jpegFile)).toBe(false);\n });\n\n test(\"respects custom accept over default type mapping\", () => {\n const pdfFile = new File([], \"document.pdf\", { type: \"application/pdf\" });\n\n // Even though type is \"image\", custom accept=\"*\" should allow PDF\n expect(acceptUploadType(\"image\", \"*\", pdfFile)).toBe(true);\n });\n});\n" }, { "path": "apps/builder/app/builder/shared/assets/asset-upload.tsx", "content": "import { type ChangeEvent, useRef } from \"react\";\nimport { useStore } from \"@nanostores/react\";\nimport { Button, Flex, Tooltip, toast } from \"@webstudio-is/design-system\";\nimport { UploadIcon } from \"@webstudio-is/icons\";\nimport { IMAGE_MIME_TYPES, detectAssetType } from \"@webstudio-is/sdk\";\nimport { MAX_UPLOAD_SIZE, toBytes } from \"@webstudio-is/asset-uploader\";\nimport type { AssetType } from \"@webstudio-is/asset-uploader\";\nimport { FONT_MIME_TYPES } from \"@webstudio-is/fonts\";\nimport { uploadAssets } from \"./upload-assets\";\nimport { $authPermit } from \"~/shared/nano-states\";\n\nconst maxSize = toBytes(MAX_UPLOAD_SIZE);\n\nexport const validateFiles = (files: File[]) => {\n const exceedSizeFiles = files.filter((file) => file.size > maxSize);\n for (const file of exceedSizeFiles) {\n toast.error(\n `Asset \"${file.name}\" cannot be bigger than ${MAX_UPLOAD_SIZE}MB`\n );\n }\n return files.filter((file) => file.size <= maxSize);\n};\n\nconst useUpload = () => {\n const inputRef = useRef(null);\n\n const onChange = (event: ChangeEvent) => {\n const form = event.currentTarget;\n const input = inputRef.current;\n if (input === null) {\n return;\n }\n const files = validateFiles(Array.from(input?.files ?? []));\n\n // Group files by their detected type\n const filesByType = new Map();\n for (const file of files) {\n const detectedType = detectAssetType(file.name);\n if (!filesByType.has(detectedType)) {\n filesByType.set(detectedType, []);\n }\n filesByType.get(detectedType)!.push(file);\n }\n\n // Upload each group with the correct type\n for (const [detectedType, filesOfType] of filesByType) {\n uploadAssets(detectedType, filesOfType);\n }\n\n form.reset();\n };\n\n return { inputRef, onChange };\n};\n\nconst acceptMap = {\n image: IMAGE_MIME_TYPES.join(\", \"),\n font: FONT_MIME_TYPES,\n video: undefined, // Videos can be uploaded through file type\n // We allow everything by default for files, specific validation happens serverside\n file: undefined,\n};\n\n// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers\nexport const acceptFileTypeSpecifier = (specifiers: string, file: File) => {\n const specifierArray = specifiers\n .split(\",\")\n .map((specifier) => specifier.trim());\n\n return specifierArray.some((specifier) => {\n if (specifier === \"*\") {\n return true;\n }\n\n if (specifier.startsWith(\".\")) {\n return file.name.endsWith(specifier);\n }\n\n if (specifier.endsWith(\"/*\")) {\n const mimeCategory = specifier.slice(0, -2);\n return file.type.startsWith(mimeCategory + \"/\");\n }\n\n return specifier === file.type;\n });\n};\n\nexport const acceptUploadType = (\n assetType: AssetType,\n accept: string | undefined,\n file: File\n) => {\n if (accept !== undefined) {\n return acceptFileTypeSpecifier(accept, file);\n }\n\n const accepted = acceptMap[assetType];\n if (accepted === undefined) {\n return true;\n }\n\n return acceptFileTypeSpecifier(accepted, file);\n};\n\ntype AssetUploadProps = {\n type: AssetType;\n accept?: string;\n};\n\nconst EnabledAssetUpload = ({ accept, type }: AssetUploadProps) => {\n const { inputRef, onChange } = useUpload();\n\n return (\n
    \n \n inputRef?.current?.click()}\n prefix={}\n >\n \n );\n};\n\nexport const AssetUpload = ({ type, accept }: AssetUploadProps) => {\n const authPermit = useStore($authPermit);\n\n if (authPermit !== \"view\") {\n // Split into a separate component to avoid using `useUpload` hook unnecessarily\n // (It's hard to mock this hook in storybook)\n return ;\n }\n\n return (\n \n \n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/assets/asset-utils.test.ts", "content": "import { expect, test, describe } from \"vitest\";\nimport {\n parseAssetName,\n formatAssetName,\n getImageNameAndType,\n getSha256Hash,\n detectAssetType,\n uploadingFileDataToAsset,\n} from \"./asset-utils\";\nimport type { Asset } from \"@webstudio-is/sdk\";\n\ndescribe(\"parseAssetName\", () => {\n test(\"parses name with hash and extension\", () => {\n expect(parseAssetName(\"hello_hash.ext\")).toEqual({\n basename: \"hello\",\n hash: \"hash\",\n ext: \"ext\",\n });\n });\n\n test(\"parses name without hash\", () => {\n expect(parseAssetName(\"hello.ext\")).toEqual({\n basename: \"hello\",\n hash: \"\",\n ext: \"ext\",\n });\n });\n\n test(\"parses name with multiple underscores\", () => {\n expect(parseAssetName(\"hello_hash1.ext_hash2\")).toEqual({\n basename: \"hello\",\n hash: \"hash1\",\n ext: \"ext_hash2\",\n });\n });\n\n test(\"parses name with hash but no extension\", () => {\n expect(parseAssetName(\"hello_hash1_hash2\")).toEqual({\n basename: \"hello_hash1\",\n hash: \"hash2\",\n ext: \"\",\n });\n });\n});\n\ndescribe(\"formatAssetName\", () => {\n test(\"formats asset with filename\", () => {\n const asset: Pick = {\n name: \"uploaded_abc123.jpg\",\n filename: \"myimage\",\n };\n expect(formatAssetName(asset)).toBe(\"myimage.jpg\");\n });\n\n test(\"formats asset without filename\", () => {\n const asset: Pick = {\n name: \"uploaded_abc123.jpg\",\n filename: undefined,\n };\n expect(formatAssetName(asset)).toBe(\"uploaded.jpg\");\n });\n\n test(\"formats asset with no extension\", () => {\n const asset: Pick = {\n name: \"uploaded_abc123\",\n filename: \"document\",\n };\n expect(formatAssetName(asset)).toBe(\"document.\");\n });\n});\n\ndescribe(\"getImageNameAndType\", () => {\n test(\"returns MIME type and filename for valid image\", () => {\n const result = getImageNameAndType(\"photo.jpg\");\n expect(result).toEqual([\"image/jpeg\", \"photo.jpg\"]);\n });\n\n test(\"handles different image extensions\", () => {\n expect(getImageNameAndType(\"image.png\")).toEqual([\n \"image/png\",\n \"image.png\",\n ]);\n expect(getImageNameAndType(\"graphic.gif\")).toEqual([\n \"image/gif\",\n \"graphic.gif\",\n ]);\n expect(getImageNameAndType(\"vector.svg\")).toEqual([\n \"image/svg+xml\",\n \"vector.svg\",\n ]);\n });\n\n test(\"is case-insensitive\", () => {\n const result = getImageNameAndType(\"PHOTO.JPG\");\n expect(result).toEqual([\"image/jpeg\", \"PHOTO.JPG\"]);\n });\n\n test(\"returns undefined for non-image files\", () => {\n expect(getImageNameAndType(\"document.pdf\")).toBeUndefined();\n expect(getImageNameAndType(\"video.mp4\")).toBeUndefined();\n expect(getImageNameAndType(\"audio.mp3\")).toBeUndefined();\n });\n\n test(\"returns undefined for files without extension\", () => {\n expect(getImageNameAndType(\"filename\")).toBeUndefined();\n });\n\n test(\"handles files with multiple dots\", () => {\n const result = getImageNameAndType(\"my.photo.file.png\");\n expect(result).toEqual([\"image/png\", \"my.photo.file.png\"]);\n });\n});\n\ndescribe(\"getSha256Hash\", () => {\n test(\"generates consistent hash for same input\", async () => {\n const hash1 = await getSha256Hash(\"test string\");\n const hash2 = await getSha256Hash(\"test string\");\n expect(hash1).toBe(hash2);\n });\n\n test(\"generates different hashes for different inputs\", async () => {\n const hash1 = await getSha256Hash(\"string1\");\n const hash2 = await getSha256Hash(\"string2\");\n expect(hash1).not.toBe(hash2);\n });\n\n test(\"generates 64 character hex string\", async () => {\n const hash = await getSha256Hash(\"test\");\n expect(hash).toMatch(/^[0-9a-f]{64}$/);\n });\n\n test(\"handles empty string\", async () => {\n const hash = await getSha256Hash(\"\");\n expect(hash).toMatch(/^[0-9a-f]{64}$/);\n });\n\n test(\"generates expected hash for known input\", async () => {\n // SHA-256 of \"hello\" is known\n const hash = await getSha256Hash(\"hello\");\n expect(hash).toBe(\n \"2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824\"\n );\n });\n});\n\ndescribe(\"detectAssetType\", () => {\n test(\"detects image files\", () => {\n expect(detectAssetType(\"photo.jpg\")).toBe(\"image\");\n expect(detectAssetType(\"image.png\")).toBe(\"image\");\n expect(detectAssetType(\"graphic.gif\")).toBe(\"image\");\n expect(detectAssetType(\"vector.svg\")).toBe(\"image\");\n expect(detectAssetType(\"picture.webp\")).toBe(\"image\");\n });\n\n test(\"detects font files\", () => {\n expect(detectAssetType(\"font.woff\")).toBe(\"font\");\n expect(detectAssetType(\"font.woff2\")).toBe(\"font\");\n expect(detectAssetType(\"font.ttf\")).toBe(\"font\");\n expect(detectAssetType(\"font.otf\")).toBe(\"font\");\n });\n\n test(\"detects video files\", () => {\n expect(detectAssetType(\"video.mp4\")).toBe(\"video\");\n expect(detectAssetType(\"video.webm\")).toBe(\"video\");\n expect(detectAssetType(\"video.mov\")).toBe(\"video\");\n expect(detectAssetType(\"video.avi\")).toBe(\"video\");\n });\n\n test(\"returns file for other types\", () => {\n expect(detectAssetType(\"document.pdf\")).toBe(\"file\");\n expect(detectAssetType(\"audio.mp3\")).toBe(\"file\");\n expect(detectAssetType(\"data.json\")).toBe(\"file\");\n expect(detectAssetType(\"doc.docx\")).toBe(\"file\");\n });\n\n test(\"is case-insensitive\", () => {\n expect(detectAssetType(\"PHOTO.JPG\")).toBe(\"image\");\n expect(detectAssetType(\"FONT.WOFF2\")).toBe(\"font\");\n expect(detectAssetType(\"VIDEO.MP4\")).toBe(\"video\");\n expect(detectAssetType(\"DOC.PDF\")).toBe(\"file\");\n });\n\n test(\"handles files without extension\", () => {\n expect(detectAssetType(\"filename\")).toBe(\"file\");\n });\n\n test(\"handles files with multiple dots\", () => {\n expect(detectAssetType(\"my.photo.file.png\")).toBe(\"image\");\n expect(detectAssetType(\"my.font.file.woff2\")).toBe(\"font\");\n expect(detectAssetType(\"my.video.file.mp4\")).toBe(\"video\");\n expect(detectAssetType(\"my.doc.file.pdf\")).toBe(\"file\");\n });\n});\n\ndescribe(\"uploadingFileDataToAsset\", () => {\n test(\"extracts format from MIME type for font with valid MIME\", () => {\n const file = new File([\"content\"], \"InterVariable.woff2\", {\n type: \"font/woff2\",\n });\n const result = uploadingFileDataToAsset({\n source: \"file\",\n file,\n assetId: \"test-id\",\n type: \"font\",\n objectURL: \"blob:test\",\n });\n\n expect(result).toMatchObject({\n id: \"test-id\",\n name: \"InterVariable.woff2\",\n format: \"woff2\",\n type: \"font\",\n });\n });\n\n test(\"falls back to filename extension when MIME type is missing\", () => {\n const file = new File([\"content\"], \"InterVariable.woff2\", {\n type: \"\", // Empty MIME type\n });\n const result = uploadingFileDataToAsset({\n source: \"file\",\n file,\n assetId: \"test-id\",\n type: \"font\",\n objectURL: \"blob:test\",\n });\n\n expect(result).toMatchObject({\n id: \"test-id\",\n name: \"InterVariable.woff2\",\n format: \"woff2\",\n type: \"font\",\n });\n });\n\n test(\"handles image files with valid MIME type\", () => {\n const file = new File([\"content\"], \"photo.jpg\", {\n type: \"image/jpeg\",\n });\n const result = uploadingFileDataToAsset({\n source: \"file\",\n file,\n assetId: \"test-id\",\n type: \"image\",\n objectURL: \"blob:test\",\n });\n\n expect(result).toMatchObject({\n id: \"test-id\",\n name: \"photo.jpg\",\n format: \"jpeg\",\n type: \"image\",\n });\n });\n\n test(\"handles video files\", () => {\n const file = new File([\"content\"], \"video.mp4\", {\n type: \"video/mp4\",\n });\n const result = uploadingFileDataToAsset({\n source: \"file\",\n file,\n assetId: \"test-id\",\n type: \"video\",\n objectURL: \"blob:test\",\n });\n\n expect(result).toMatchObject({\n id: \"test-id\",\n name: \"video.mp4\",\n format: \"mp4\",\n type: \"file\",\n });\n });\n\n test(\"handles generic file types\", () => {\n const file = new File([\"content\"], \"document.pdf\", {\n type: \"application/pdf\",\n });\n const result = uploadingFileDataToAsset({\n source: \"file\",\n file,\n assetId: \"test-id\",\n type: \"file\",\n objectURL: \"blob:test\",\n });\n\n expect(result).toMatchObject({\n id: \"test-id\",\n name: \"document.pdf\",\n format: \"pdf\",\n type: \"file\",\n });\n });\n\n test(\"extracts format from filename when MIME type has no subtype\", () => {\n const file = new File([\"content\"], \"font.ttf\", {\n type: \"font\",\n });\n const result = uploadingFileDataToAsset({\n source: \"file\",\n file,\n assetId: \"test-id\",\n type: \"font\",\n objectURL: \"blob:test\",\n });\n\n expect(result).toMatchObject({\n id: \"test-id\",\n name: \"font.ttf\",\n format: \"ttf\",\n type: \"font\",\n });\n });\n\n test(\"handles files with no extension\", () => {\n const file = new File([\"content\"], \"README\", {\n type: \"\",\n });\n const result = uploadingFileDataToAsset({\n source: \"file\",\n file,\n assetId: \"test-id\",\n type: \"file\",\n objectURL: \"blob:test\",\n });\n\n expect(result).toMatchObject({\n id: \"test-id\",\n name: \"README\",\n format: \"\",\n type: \"file\",\n });\n });\n});\n" }, { "path": "apps/builder/app/builder/shared/assets/asset-utils.ts", "content": "import type {\n Asset,\n FontAsset,\n ImageAsset,\n AllowedFileExtension,\n} from \"@webstudio-is/sdk\";\nimport { nanoid } from \"nanoid\";\nimport {\n getMimeTypeByExtension,\n IMAGE_EXTENSIONS,\n detectAssetType,\n getAssetUrl,\n} from \"@webstudio-is/sdk\";\nimport type { UploadingFileData } from \"~/shared/nano-states\";\n\nexport { detectAssetType, getAssetUrl };\n\nexport const getImageNameAndType = (fileName: string) => {\n // Extract extension from filename\n const extractedExt = fileName.split(\".\").pop()?.toLowerCase();\n\n if (!extractedExt) {\n return;\n }\n\n // Check if it's a valid image extension\n if (!IMAGE_EXTENSIONS.includes(extractedExt as AllowedFileExtension)) {\n return;\n }\n\n return [getMimeTypeByExtension(extractedExt)!, fileName] as const;\n};\n\nconst extractImageNameAndMimeTypeFromUrl = (url: URL) => {\n const nameFromPath = url.pathname\n .split(\"/\")\n .map(getImageNameAndType)\n .filter(Boolean)[0];\n\n if (nameFromPath != null) {\n return nameFromPath;\n }\n\n const nameFromSearchParams = [...url.searchParams.values()]\n .map(getImageNameAndType)\n .filter(Boolean)[0];\n\n if (nameFromSearchParams != null) {\n return nameFromSearchParams;\n }\n\n // Any image format is suitable\n const FALLBACK_URL_TYPE = \"image/png\";\n\n return [FALLBACK_URL_TYPE, `${nanoid()}.png`] as const;\n};\n\nconst bufferToHex = (buffer: ArrayBuffer) => {\n const byteArray = new Uint8Array(buffer);\n return Array.from(byteArray, (byte) =>\n byte.toString(16).padStart(2, \"0\")\n ).join(\"\");\n};\n\nexport const getSha256Hash = async (data: string) => {\n const encoder = new TextEncoder();\n const dataBuffer = encoder.encode(data);\n const hashBuffer = await crypto.subtle.digest(\"SHA-256\", dataBuffer);\n return bufferToHex(hashBuffer);\n};\n\nconst readFileAsArrayBuffer = (file: File): Promise =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(reader.result as ArrayBuffer);\n reader.onerror = () => reject(reader.error);\n reader.readAsArrayBuffer(file);\n });\n\nexport const getSha256HashOfFile = async (file: File) => {\n const arrayBuffer = await readFileAsArrayBuffer(file);\n const hashBuffer = await crypto.subtle.digest(\"SHA-256\", arrayBuffer);\n return bufferToHex(hashBuffer);\n};\n\nexport const getMimeType = (file: File | URL) => {\n if (file instanceof File) {\n return file.type;\n }\n\n return extractImageNameAndMimeTypeFromUrl(file)[0];\n};\n\nexport const getFileName = (file: File | URL) => {\n if (file instanceof File) {\n return file.name;\n }\n\n return extractImageNameAndMimeTypeFromUrl(file)[1];\n};\n\nexport const uploadingFileDataToAsset = (\n fileData: UploadingFileData\n): Asset => {\n const fileOrUrl =\n fileData.source === \"file\" ? fileData.file : new URL(fileData.url);\n const fileName = getFileName(fileOrUrl);\n const mimeType = getMimeType(fileOrUrl);\n\n // Extract format from MIME type if available, otherwise from filename extension\n let format = mimeType.split(\"/\")[1];\n if (!format) {\n // Fallback to file extension if MIME type doesn't provide format\n const match = fileName.match(/\\.([^.]+)$/);\n format = match ? match[1].toLowerCase() : \"\";\n }\n\n const assetType = detectAssetType(fileName);\n\n if (assetType === \"video\") {\n // Videos should be file type, not image type\n const asset: Asset = {\n id: fileData.assetId,\n name: fileName,\n format,\n type: \"file\",\n description: \"\",\n createdAt: \"\",\n projectId: \"\",\n size: 0,\n meta: {},\n };\n\n return asset;\n }\n\n if (assetType === \"image\") {\n const asset: ImageAsset = {\n id: fileData.assetId,\n name: fileName,\n format,\n type: \"image\",\n description: \"\",\n createdAt: \"\",\n projectId: \"\",\n size: 0,\n\n meta: {\n width: Number.NaN,\n height: Number.NaN,\n },\n };\n\n return asset;\n }\n\n if (assetType === \"font\") {\n const asset: FontAsset = {\n id: fileData.assetId,\n name: fileName,\n format: format as FontAsset[\"format\"],\n type: \"font\",\n description: \"\",\n createdAt: \"\",\n projectId: \"\",\n size: 0,\n meta: {\n family: \"system\",\n style: \"normal\",\n weight: 400,\n },\n };\n\n return asset;\n }\n\n // Default to file type for all other types (documents, code, audio, etc.)\n const asset: Asset = {\n id: fileData.assetId,\n name: fileName,\n format,\n type: \"file\",\n description: \"\",\n createdAt: \"\",\n projectId: \"\",\n size: 0,\n meta: {},\n };\n\n return asset;\n};\n\ntype ParsedAssetName = {\n basename: string;\n hash: string;\n ext: string;\n};\n\nexport const parseAssetName = (name: string): ParsedAssetName => {\n let hash = \"\";\n let ext = \"\";\n const lastDotAt = name.lastIndexOf(\".\");\n if (lastDotAt > -1) {\n ext = name.slice(lastDotAt + 1);\n name = name.slice(0, lastDotAt);\n }\n const lastUnderscoreAt = name.lastIndexOf(\"_\");\n if (lastUnderscoreAt > -1) {\n hash = name.slice(lastUnderscoreAt + 1);\n name = name.slice(0, lastUnderscoreAt);\n }\n return { basename: name, hash, ext };\n};\n\nexport const formatAssetName = (asset: Pick) => {\n const { basename, ext } = parseAssetName(asset.name);\n const formattedName = `${asset.filename ?? basename}.${ext}`;\n return formattedName;\n};\n" }, { "path": "apps/builder/app/builder/shared/assets/assets-shell.tsx", "content": "import {\n useEffect,\n useRef,\n useState,\n type ComponentProps,\n type JSX,\n} from \"react\";\nimport type { AssetType } from \"@webstudio-is/asset-uploader\";\nimport {\n Flex,\n ScrollArea,\n SearchField,\n Text,\n theme,\n} from \"@webstudio-is/design-system\";\nimport { acceptUploadType, validateFiles } from \"./asset-upload\";\nimport { detectAssetType } from \"@webstudio-is/sdk\";\nimport { NotFound } from \"./not-found\";\nimport { Separator } from \"./separator\";\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\nimport {\n containsFiles,\n getFiles,\n} from \"@atlaskit/pragmatic-drag-and-drop/external/file\";\nimport { dropTargetForExternal } from \"@atlaskit/pragmatic-drag-and-drop/external/adapter\";\nimport invariant from \"tiny-invariant\";\nimport type { ContainsSource } from \"@atlaskit/pragmatic-drag-and-drop/dist/types/public-utils/external/native-types\";\nimport { uploadAssets } from \"./upload-assets\";\nimport { UploadIcon } from \"@webstudio-is/icons\";\nimport {\n IDLE,\n isBlockedByBackdrop,\n registerDrop,\n useExternalDragStateEffect,\n type ExternalMonitorDragState,\n} from \"./drag-monitor\";\n\ntype AssetsShellProps = {\n filters?: JSX.Element;\n searchProps: ComponentProps;\n children: JSX.Element;\n type: AssetType;\n accept?: string;\n isEmpty: boolean;\n};\n\nconst containsFilesOrUri = (parameter: ContainsSource) => {\n return (\n containsFiles(parameter) || parameter.source.types.includes(\"text/uri-list\")\n );\n};\n\nconst OVER = 2;\ntype DropTargetState = typeof IDLE | typeof OVER;\n\nexport const AssetsShell = ({\n filters,\n searchProps,\n isEmpty,\n children,\n type,\n accept,\n}: AssetsShellProps) => {\n const ref = useRef(null);\n const [monitorState, setMonitorState] =\n useState(IDLE);\n\n const [dropTargetState, setDropTargetState] = useState(IDLE);\n\n useExternalDragStateEffect((state) => {\n const element = ref.current;\n\n if (element == null) {\n return;\n }\n\n if (state === IDLE) {\n setMonitorState(IDLE);\n return;\n }\n\n if (isBlockedByBackdrop(element)) {\n setMonitorState(IDLE);\n return;\n }\n\n setMonitorState(state);\n });\n\n /**\n * Allow URL drop for images only\n */\n const containsByType = type === \"image\" ? containsFilesOrUri : containsFiles;\n\n useEffect(() => {\n const element = ref.current;\n\n invariant(element);\n\n // Do not react if any dialog is opened above\n const isBlockedByBackdropCallback = (\n blocked: typeof containsByType,\n notBlocked: typeof containsByType\n ) => {\n return (parameter: ContainsSource) => {\n // Check if this element is the original element or its descendant\n return isBlockedByBackdrop(element)\n ? blocked(parameter)\n : notBlocked(parameter);\n };\n };\n\n return combine(\n dropTargetForExternal({\n element: element,\n canDrop: isBlockedByBackdropCallback(() => false, containsByType),\n onDragEnter: () => setDropTargetState(OVER),\n onDragLeave: () => setDropTargetState(IDLE),\n onDrop: async ({ source }) => {\n registerDrop();\n setMonitorState(IDLE);\n setDropTargetState(IDLE);\n\n const droppedUrls = await Promise.all(\n source.items\n .filter((item) => item.type === \"text/uri-list\")\n .map(\n (item) =>\n new Promise((resolve) =>\n item.getAsString((str) => resolve(new URL(str)))\n )\n )\n );\n\n const droppedFiles = validateFiles(getFiles({ source }));\n\n const files = droppedFiles\n .filter((file) => file != null)\n .filter((file) => {\n if (acceptUploadType(type, accept, file)) {\n return true;\n }\n\n console.warn(\n `Unsupported file dropped for type=${type}, accept=${accept} and file.type=${file.type}, file.name=${file.name}`\n );\n return false;\n });\n\n // Group files by their detected type\n const filesByType = new Map();\n for (const file of files) {\n const detectedType = detectAssetType(file.name);\n if (!filesByType.has(detectedType)) {\n filesByType.set(detectedType, []);\n }\n filesByType.get(detectedType)!.push(file);\n }\n\n // Upload each group with the correct type\n for (const [detectedType, filesOfType] of filesByType) {\n uploadAssets(detectedType as AssetType, filesOfType);\n }\n\n uploadAssets(type, droppedUrls);\n },\n })\n );\n }, [accept, containsByType, type]);\n\n const dragState = Math.max(monitorState, dropTargetState);\n\n return (\n \n \n \n {filters}\n \n \n {isEmpty && }\n \n {children}\n \n \n \n \n \n\n Drop files here\n \n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/assets/delete-assets.ts", "content": "import type { Asset } from \"@webstudio-is/sdk\";\nimport { $assets } from \"~/shared/nano-states\";\nimport { serverSyncStore } from \"~/shared/sync/sync-stores\";\nimport { onNextTransactionComplete } from \"~/shared/sync/project-queue\";\nimport { invalidateAssets } from \"~/shared/resources\";\n\nexport const deleteAssets = (assetIds: Asset[\"id\"][]) => {\n serverSyncStore.createTransaction([$assets], (assets) => {\n for (const assetId of assetIds) {\n assets.delete(assetId);\n }\n });\n\n // Wait for server to confirm transaction, then invalidate cache\n onNextTransactionComplete(() => {\n invalidateAssets();\n });\n};\n" }, { "path": "apps/builder/app/builder/shared/assets/drag-monitor.tsx", "content": "import { atom, computed } from \"nanostores\";\nimport { useEffect, useState } from \"react\";\nimport { monitorForExternal } from \"@atlaskit/pragmatic-drag-and-drop/external/adapter\";\nimport { preventUnhandled } from \"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled\";\nimport { containsFiles } from \"@atlaskit/pragmatic-drag-and-drop/external/file\";\nimport type { ContainsSource } from \"@atlaskit/pragmatic-drag-and-drop/dist/types/public-utils/external/native-types\";\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\nimport { canvasApi } from \"~/shared/canvas-api\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\nimport { $canvasIframeState } from \"~/shared/nano-states\";\nimport invariant from \"tiny-invariant\";\nimport { getAllElementsBoundingBox } from \"~/shared/dom-utils\";\nimport { useEffectEvent } from \"~/shared/hook-utils/effect-event\";\n\nexport const IDLE = 0;\nexport const POTENTIAL = 1;\n\nexport type ExternalMonitorDragState = typeof IDLE | typeof POTENTIAL;\n\nconst $monitorDragState = atom(IDLE);\nconst $monitorCanvasDragState = atom(IDLE);\n\nconst $externalDragState = computed(\n [$monitorDragState, $monitorCanvasDragState],\n (monitorDragState, monitorCanvasDragState) => {\n return Math.max(\n monitorDragState,\n monitorCanvasDragState\n ) as ExternalMonitorDragState;\n }\n);\n\nconst containsFilesOrUri = (parameter: ContainsSource) => {\n return (\n containsFiles(parameter) || parameter.source.types.includes(\"text/uri-list\")\n );\n};\n\nlet usageCounter = 0;\n\nexport const ExternalDragDropMonitor = () => {\n const [refresh, setRefresh] = useState(0);\n\n const handleBuilderOnDrop = useDebouncedCallback(() => {\n $monitorDragState.set(IDLE);\n }, 300);\n\n const handleCanvasOnDrop = useDebouncedCallback(() => {\n $monitorCanvasDragState.set(IDLE);\n }, 300);\n\n const preventUnhandledStop = useDebouncedCallback(() => {\n preventUnhandled.stop();\n canvasApi.preventUnhandled.stop();\n }, 300);\n\n useEffect(() => {\n usageCounter += 1;\n\n invariant(usageCounter === 1, \"Monitor can be used only once per app\");\n\n return () => {\n usageCounter -= 1;\n };\n }, []);\n\n useEffect(() => {\n if (false === canvasApi.isInitialized()) {\n return $canvasIframeState.listen((state) => {\n if (state === \"ready\") {\n setRefresh((prev) => prev + 1);\n }\n });\n }\n\n const preventUnhandledStart = () => {\n preventUnhandled.start();\n canvasApi.preventUnhandled.start();\n };\n\n return combine(\n monitorForExternal({\n canMonitor: containsFilesOrUri,\n onDragStart: () => {\n preventUnhandledStart();\n $monitorDragState.set(POTENTIAL);\n handleBuilderOnDrop.cancel();\n preventUnhandledStop.cancel();\n },\n onDrop: () => {\n handleBuilderOnDrop();\n preventUnhandledStop();\n },\n }),\n canvasApi.monitorForExternal({\n canMonitor: containsFilesOrUri,\n onDragStart: () => {\n preventUnhandledStart();\n $monitorCanvasDragState.set(POTENTIAL);\n handleCanvasOnDrop.cancel();\n preventUnhandledStop.cancel();\n },\n onDrop: () => {\n handleCanvasOnDrop();\n preventUnhandledStop();\n },\n }),\n () => {\n return () => {\n handleBuilderOnDrop.cancel();\n preventUnhandledStop.cancel();\n\n preventUnhandled.stop();\n canvasApi.preventUnhandled.stop();\n $monitorDragState.set(IDLE);\n $monitorCanvasDragState.set(IDLE);\n };\n }\n );\n }, [handleBuilderOnDrop, handleCanvasOnDrop, preventUnhandledStop, refresh]);\n\n return null;\n};\n\nexport const useExternalDragStateEffect = (\n callback: (state: ExternalMonitorDragState) => void\n) => {\n const handleCallback = useEffectEvent(callback);\n\n useEffect(() => {\n return $externalDragState.subscribe(handleCallback);\n }, []);\n};\n\nconst dropCount = atom(0);\n\nexport const registerDrop = () => {\n dropCount.set(dropCount.get() + 1);\n};\n\nexport const useOnDropEffect = (callback: () => void) => {\n const handleCallback = useEffectEvent(callback);\n\n useEffect(() => {\n return dropCount.listen(handleCallback);\n }, []);\n};\n\nexport const isBlockedByBackdrop = (element: Element) => {\n const elementRect = getAllElementsBoundingBox([element]);\n const centerX = elementRect.left + elementRect.width / 2;\n const centerY = elementRect.top + elementRect.height / 2;\n\n // Get the element directly under the center of the target element\n const topElement = document.elementFromPoint(centerX, centerY);\n const isNotBlocked = element.contains(topElement) || topElement === element;\n\n return false === isNotBlocked;\n};\n" }, { "path": "apps/builder/app/builder/shared/assets/index.ts", "content": "export { useAssets } from \"./use-assets\";\nexport * from \"./delete-assets\";\nexport { uploadAssets } from \"./upload-assets\";\nexport * from \"./types\";\nexport * from \"./separator\";\nexport * from \"./assets-shell\";\nexport * from \"./asset-upload\";\n" }, { "path": "apps/builder/app/builder/shared/assets/not-found.tsx", "content": "import { Flex, Text } from \"@webstudio-is/design-system\";\n\nexport const NotFound = () => {\n return (\n \n No matching assets\n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/assets/separator.tsx", "content": "import {\n Separator as SeparatorPrimitive,\n styled,\n} from \"@webstudio-is/design-system\";\nimport { theme } from \"@webstudio-is/design-system\";\n\nexport const Separator = styled(SeparatorPrimitive, {\n marginTop: theme.spacing[3],\n marginBottom: theme.spacing[5],\n});\n" }, { "path": "apps/builder/app/builder/shared/assets/types.ts", "content": "import type { Asset } from \"@webstudio-is/sdk\";\n\ntype PreviewAsset = Pick<\n Asset,\n \"name\" | \"filename\" | \"id\" | \"format\" | \"description\" | \"type\"\n>;\n\nexport type UploadedAssetContainer = {\n status: \"uploaded\";\n asset: Asset;\n};\n\nexport type UploadingAssetContainer = {\n status: \"uploading\";\n objectURL: string;\n asset: PreviewAsset;\n};\n\n/**\n * Assets that can be shown in the UI\n */\nexport type AssetContainer = UploadedAssetContainer | UploadingAssetContainer;\n\nexport type AssetActionResponse = {\n uploadedAssets?: Array;\n deletedAssets?: Array;\n errors?: string;\n};\n" }, { "path": "apps/builder/app/builder/shared/assets/upload-assets.test.ts", "content": "import { describe, test, expect } from \"vitest\";\nimport { __testing__ } from \"./upload-assets\";\n\nconst { deduplicateAssetName } = __testing__;\n\ndescribe(\"upload-assets\", () => {\n describe(\"deduplicateAssetName\", () => {\n test(\"returns original name when no duplicates exist\", () => {\n const existingNames = new Set([\"other-file.png\", \"another-file.jpg\"]);\n const result = deduplicateAssetName(\"unique-file.png\", existingNames);\n expect(result).toBe(\"unique-file.png\");\n });\n\n test(\"adds suffix when duplicate exists\", () => {\n const existingNames = new Set([\"duplicate.png\"]);\n const result = deduplicateAssetName(\"duplicate.png\", existingNames);\n expect(result).toBe(\"duplicate_1.png\");\n });\n\n test(\"increments suffix for multiple duplicates\", () => {\n const existingNames = new Set([\"file.png\", \"file_1.png\", \"file_2.png\"]);\n const result = deduplicateAssetName(\"file.png\", existingNames);\n expect(result).toBe(\"file_3.png\");\n });\n\n test(\"handles names without extension\", () => {\n const existingNames = new Set();\n const result = deduplicateAssetName(\"no-extension\", existingNames);\n expect(result).toBe(\"no-extension\");\n });\n\n test(\"handles empty existing names set\", () => {\n const existingNames = new Set();\n const result = deduplicateAssetName(\"file.jpg\", existingNames);\n expect(result).toBe(\"file.jpg\");\n });\n\n test(\"handles complex file extensions\", () => {\n const existingNames = new Set([\"archive.tar.gz\"]);\n const result = deduplicateAssetName(\"archive.tar.gz\", existingNames);\n expect(result).toBe(\"archive.tar_1.gz\");\n });\n\n test(\"finds first available suffix with gaps\", () => {\n const existingNames = new Set([\"file.png\", \"file_2.png\", \"file_3.png\"]);\n const result = deduplicateAssetName(\"file.png\", existingNames);\n expect(result).toBe(\"file_1.png\");\n });\n });\n});\n" }, { "path": "apps/builder/app/builder/shared/assets/upload-assets.tsx", "content": "import warnOnce from \"warn-once\";\nimport invariant from \"tiny-invariant\";\nimport type { Asset } from \"@webstudio-is/sdk\";\nimport type { AssetType } from \"@webstudio-is/asset-uploader\";\nimport { Box, toast, css, theme } from \"@webstudio-is/design-system\";\nimport { sanitizeS3Key } from \"@webstudio-is/asset-uploader\";\nimport { Image, wsImageLoader } from \"@webstudio-is/image\";\nimport { restAssetsUploadPath, restAssetsPath } from \"~/shared/router-utils\";\nimport { fetch } from \"~/shared/fetch.client\";\nimport type { AssetActionResponse } from \"~/builder/shared/assets\";\nimport {\n $assets,\n $authToken,\n $project,\n $uploadingFilesDataStore,\n type UploadingFileData,\n} from \"~/shared/nano-states\";\nimport { serverSyncStore } from \"~/shared/sync/sync-stores\";\nimport { onNextTransactionComplete } from \"~/shared/sync/project-queue\";\nimport { invalidateAssets } from \"~/shared/resources\";\nimport {\n formatAssetName,\n getFileName,\n getMimeType,\n getSha256Hash,\n getSha256HashOfFile,\n} from \"./asset-utils\";\n\nconst safeDeleteAssets = (assetIds: Asset[\"id\"][], projectId: string) => {\n const currentProjectId = $project.get()?.id;\n\n if (currentProjectId !== projectId) {\n toast.error(\"Project has been changed, files will not be uploaded\");\n // Can cause data corruption\n return;\n }\n\n serverSyncStore.createTransaction([$assets], (assets) => {\n for (const assetId of assetIds) {\n assets.delete(assetId);\n }\n });\n\n onNextTransactionComplete(() => {\n invalidateAssets();\n });\n};\n\nconst safeSetAsset = (asset: Asset, projectId: string) => {\n const currentProjectId = $project.get()?.id;\n\n if (currentProjectId !== projectId) {\n toast.error(\"Project has been changed, files will not be uploaded\");\n // Can cause data corrupiton\n return;\n }\n\n serverSyncStore.createTransaction([$assets], (assets) => {\n assets.set(asset.id, asset);\n });\n\n onNextTransactionComplete(() => {\n invalidateAssets();\n });\n};\n\nconst getFilesData = async (\n type: AssetType,\n filesOrUrls: T[]\n): Promise => {\n const filesData: UploadingFileData[] = [];\n for (const fileOrUrl of filesOrUrls) {\n if (fileOrUrl instanceof File) {\n const assetId = await getSha256HashOfFile(fileOrUrl);\n filesData.push({\n source: \"file\" as const,\n assetId: assetId,\n type,\n file: fileOrUrl,\n objectURL: URL.createObjectURL(fileOrUrl),\n });\n continue;\n }\n\n const assetId = await getSha256Hash(fileOrUrl.href);\n filesData.push({\n source: \"url\" as const,\n assetId,\n type,\n url: fileOrUrl.href,\n objectURL: fileOrUrl.href,\n });\n }\n\n return filesData;\n};\n\nconst addUploadingFilesData = (filesData: UploadingFileData[]) => {\n const uploadingFilesData = $uploadingFilesDataStore.get();\n $uploadingFilesDataStore.set([...uploadingFilesData, ...filesData]);\n};\n\nconst deleteUploadingFileData = (id: UploadingFileData[\"assetId\"]) => {\n const uploadingFilesData = $uploadingFilesDataStore.get();\n $uploadingFilesDataStore.set(\n uploadingFilesData.filter((fileData) => fileData.assetId !== id)\n );\n};\n\nconst getVideoDimensions = async (file: File) => {\n return new Promise<{ width: number; height: number }>((resolve, reject) => {\n const url = URL.createObjectURL(file);\n const vid = document.createElement(\"video\");\n vid.preload = \"metadata\";\n vid.src = url;\n\n vid.onloadedmetadata = () => {\n URL.revokeObjectURL(url);\n resolve({ width: vid.videoWidth, height: vid.videoHeight });\n };\n vid.onerror = () => {\n URL.revokeObjectURL(url);\n reject(new Error(\"Invalid video file\"));\n };\n });\n};\n\nconst deduplicateAssetName = (name: string, existingNames: Set) => {\n // eslint-disable-next-line no-constant-condition\n for (let index = 0; true; index += 1) {\n const suffix = index === 0 ? \"\" : `_${index}`;\n const lastDotAt = name.lastIndexOf(\".\");\n if (lastDotAt === -1) {\n return name;\n }\n const basename = name.slice(0, lastDotAt);\n const ext = name.slice(lastDotAt);\n const nameWithSuffix = basename + suffix + ext;\n if (!existingNames.has(nameWithSuffix)) {\n return nameWithSuffix;\n }\n }\n};\n\nconst uploadAsset = async ({\n authToken,\n projectId,\n fileOrUrl,\n assetType,\n onCompleted,\n onError,\n}: {\n authToken: undefined | string;\n projectId: string;\n fileOrUrl: File | URL;\n assetType: AssetType;\n onCompleted: (data: AssetActionResponse) => void;\n onError: (error: string) => void;\n}) => {\n try {\n const mimeType = getMimeType(fileOrUrl);\n const fileName = getFileName(fileOrUrl);\n\n const metaFormData = new FormData();\n metaFormData.append(\"projectId\", projectId);\n metaFormData.append(\"type\", assetType);\n // sanitizeS3Key here is just because of https://github.com/remix-run/remix/issues/4443\n // should be removed after fix\n const existingNames = new Set();\n for (const asset of $assets.get().values()) {\n existingNames.add(formatAssetName(asset));\n }\n metaFormData.append(\n \"filename\",\n deduplicateAssetName(sanitizeS3Key(fileName), existingNames)\n );\n\n const authHeaders = new Headers();\n if (authToken !== undefined) {\n authHeaders.set(\"x-auth-token\", authToken);\n }\n\n const metaResponse = await fetch(restAssetsPath(), {\n method: \"POST\",\n body: metaFormData,\n headers: authHeaders,\n });\n\n const metaData: { name: string } | { errors: string } =\n await metaResponse.json();\n\n if (\"errors\" in metaData) {\n throw Error(metaData.errors);\n }\n\n const body =\n fileOrUrl instanceof File\n ? fileOrUrl\n : JSON.stringify({ url: fileOrUrl.href });\n\n const headers = new Headers(authHeaders);\n\n if (fileOrUrl instanceof URL) {\n headers.set(\"Content-Type\", \"application/json\");\n }\n\n let width = undefined;\n let height = undefined;\n\n if (mimeType.startsWith(\"video/\") && fileOrUrl instanceof File) {\n const videoSize = await getVideoDimensions(fileOrUrl);\n width = videoSize.width;\n height = videoSize.height;\n }\n\n const uploadResponse = await fetch(\n restAssetsUploadPath({ name: metaData.name, width, height }),\n {\n method: \"POST\",\n body,\n headers,\n }\n );\n\n const uploadData: AssetActionResponse = await uploadResponse.json();\n\n if (\"errors\" in uploadData) {\n throw Error(uploadData.errors);\n }\n\n onCompleted(uploadData);\n } catch (error) {\n if (error instanceof Error) {\n onError(error.message);\n }\n }\n};\n\nconst handleAfterSubmit = (\n assetId: string,\n data: AssetActionResponse,\n projectId: string\n) => {\n warnOnce(\n data.uploadedAssets?.length !== 1,\n \"Expected exactly 1 uploaded asset\"\n );\n\n const uploadedAsset = data.uploadedAssets?.[0];\n\n if (uploadedAsset === undefined) {\n warnOnce(true, \"An uploaded asset is undefined\");\n toast.error(\"Could not upload an asset\");\n safeDeleteAssets([assetId], projectId);\n return;\n }\n\n // update store with new asset and set current id\n safeSetAsset({ ...uploadedAsset, id: assetId }, projectId);\n};\n\nconst imageWidth = css({\n maxWidth: \"100%\",\n});\n\nconst ToastImageInfo = ({ objectURL }: { objectURL: string }) => {\n return (\n \n \n \n );\n};\n\nconst processingQueue: [\n filesData: UploadingFileData[],\n projectId: string,\n authToken: string | undefined,\n][] = [];\n\nconst processUpload = async (\n filesData: UploadingFileData[],\n projectId: string,\n authToken: string | undefined\n) => {\n processingQueue.push([filesData, projectId, authToken]);\n\n if (processingQueue.length > 1) {\n return;\n }\n\n while (processingQueue.length > 0) {\n const [filesData, projectId, authToken] = processingQueue.shift()!;\n\n const currentProjectId = $project.get()?.id;\n if (currentProjectId !== projectId) {\n toast.error(\"Project has been changed, files will not be uploaded\");\n // Can cause data corrupiton\n continue;\n }\n\n for (const fileData of filesData) {\n const assetId = fileData.assetId;\n\n if ($assets.get().has(assetId)) {\n toast.info(\"Asset already exists\", {\n icon: ,\n });\n\n deleteUploadingFileData(assetId);\n continue;\n }\n\n await uploadAsset({\n authToken,\n projectId,\n fileOrUrl:\n fileData.source === \"file\" ? fileData.file : new URL(fileData.url),\n assetType: fileData.type,\n onCompleted: (data) => {\n URL.revokeObjectURL(fileData.objectURL);\n deleteUploadingFileData(assetId);\n handleAfterSubmit(assetId, data, projectId);\n },\n onError: (error) => {\n deleteUploadingFileData(assetId);\n toast.error(error, {\n icon: ,\n });\n\n safeDeleteAssets([assetId], projectId);\n },\n });\n }\n }\n};\n\nexport const uploadAssets = async (\n type: AssetType,\n filesOrUrls: T[]\n): Promise> => {\n const projectId = $project.get()?.id;\n const authToken = $authToken.get();\n if (projectId === undefined) {\n return new Map();\n }\n\n const filesData = await getFilesData(type, filesOrUrls);\n\n // Filter out duplicates inside filesData\n const uniqFilesDataMap = new Map(\n filesData.map((fileData) => [fileData.assetId, fileData])\n );\n\n // Filter out duplicates existing in assets or uploading files\n const existingIds = [\n ...$assets.get().keys(),\n ...$uploadingFilesDataStore.get().map((fileData) => fileData.assetId),\n ];\n\n for (const existingAssetId of existingIds) {\n if (uniqFilesDataMap.has(existingAssetId)) {\n const fileData = uniqFilesDataMap.get(existingAssetId)!;\n uniqFilesDataMap.delete(existingAssetId);\n toast.info(\"Asset already exists\", {\n icon: ,\n });\n }\n }\n\n const uniqFilesData = [...uniqFilesDataMap.values()];\n\n addUploadingFilesData(uniqFilesData);\n\n processUpload(uniqFilesData, projectId, authToken);\n\n const res = new Map();\n\n for (let i = 0; i < filesData.length; ++i) {\n const fileOrUrl = filesOrUrls[i];\n const fileData = filesData[i];\n\n invariant(\n fileOrUrl instanceof URL ||\n (fileOrUrl instanceof File &&\n fileData.source === \"file\" &&\n fileData.file === fileOrUrl)\n );\n invariant(\n fileOrUrl instanceof File ||\n (fileOrUrl instanceof URL &&\n fileData.source === \"url\" &&\n fileData.url === fileOrUrl.href)\n );\n\n res.set(filesOrUrls[i], filesData[i].assetId);\n }\n\n return res;\n};\n\nexport const __testing__ = {\n deduplicateAssetName,\n};\n" }, { "path": "apps/builder/app/builder/shared/assets/use-assets.test.ts", "content": "import { describe, test, expect } from \"vitest\";\nimport type { AssetContainer, UploadedAssetContainer } from \"./types\";\nimport type { Asset } from \"@webstudio-is/sdk\";\nimport { __testing__ } from \"./use-assets\";\n\nconst { filterByType } = __testing__;\n\ndescribe(\"use-assets\", () => {\n describe(\"filterByType\", () => {\n const createImageAsset = (): Asset => ({\n id: \"image-id\",\n type: \"image\",\n name: \"image-name\",\n format: \"png\",\n size: 1000,\n meta: { width: 100, height: 100 },\n createdAt: \"2024-01-01\",\n projectId: \"project-id\",\n });\n\n const createFontAsset = (): Asset => ({\n id: \"font-id\",\n type: \"font\",\n name: \"font-name\",\n format: \"woff2\",\n size: 1000,\n meta: { family: \"TestFont\", style: \"normal\", weight: 400 },\n createdAt: \"2024-01-01\",\n projectId: \"project-id\",\n });\n\n const createFileAsset = (): Asset => ({\n id: \"file-id\",\n type: \"file\",\n name: \"file-name\",\n format: \"pdf\",\n size: 1000,\n meta: {},\n createdAt: \"2024-01-01\",\n projectId: \"project-id\",\n });\n\n const createUploadedContainer = (asset: Asset): UploadedAssetContainer => ({\n status: \"uploaded\",\n asset,\n });\n\n test(\"returns all containers when type is undefined\", () => {\n const containers: AssetContainer[] = [\n createUploadedContainer(createImageAsset()),\n createUploadedContainer(createFontAsset()),\n createUploadedContainer(createFileAsset()),\n ];\n\n const result = filterByType(containers, undefined);\n\n expect(result).toEqual(containers);\n expect(result).toHaveLength(3);\n });\n\n test(\"filters containers by image type\", () => {\n const imageContainer = createUploadedContainer(createImageAsset());\n const fontContainer = createUploadedContainer(createFontAsset());\n const fileContainer = createUploadedContainer(createFileAsset());\n const containers: AssetContainer[] = [\n imageContainer,\n fontContainer,\n fileContainer,\n ];\n\n const result = filterByType(containers, \"image\");\n\n expect(result).toEqual([imageContainer]);\n expect(result).toHaveLength(1);\n });\n\n test(\"filters containers by font type\", () => {\n const imageContainer = createUploadedContainer(createImageAsset());\n const fontContainer = createUploadedContainer(createFontAsset());\n const containers: AssetContainer[] = [imageContainer, fontContainer];\n\n const result = filterByType(containers, \"font\");\n\n expect(result).toEqual([fontContainer]);\n expect(result).toHaveLength(1);\n });\n\n test(\"returns empty array when no containers match type\", () => {\n const imageContainer = createUploadedContainer(createImageAsset());\n const containers: AssetContainer[] = [imageContainer];\n\n const result = filterByType(containers, \"font\");\n\n expect(result).toEqual([]);\n expect(result).toHaveLength(0);\n });\n\n test(\"returns empty array when given empty array\", () => {\n const result = filterByType([], \"image\");\n\n expect(result).toEqual([]);\n expect(result).toHaveLength(0);\n });\n\n test(\"filters multiple containers of same type\", () => {\n const imageContainer1 = createUploadedContainer(createImageAsset());\n const imageAsset2: Asset = {\n ...createImageAsset(),\n id: \"image-id-2\",\n };\n const imageContainer2 = createUploadedContainer(imageAsset2);\n const fontContainer = createUploadedContainer(createFontAsset());\n const containers: AssetContainer[] = [\n imageContainer1,\n fontContainer,\n imageContainer2,\n ];\n\n const result = filterByType(containers, \"image\");\n\n expect(result).toHaveLength(2);\n expect(result).toEqual([imageContainer1, imageContainer2]);\n });\n });\n});\n" }, { "path": "apps/builder/app/builder/shared/assets/use-assets.tsx", "content": "import { useMemo } from \"react\";\nimport { computed } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport type { Asset } from \"@webstudio-is/sdk\";\nimport { $assets, $uploadingFilesDataStore } from \"~/shared/nano-states\";\nimport type {\n AssetContainer,\n UploadedAssetContainer,\n UploadingAssetContainer,\n} from \"./types\";\nimport { uploadingFileDataToAsset } from \"./asset-utils\";\n\nconst $assetContainers = computed(\n [$assets, $uploadingFilesDataStore],\n (assets, uploadingFilesData) => {\n const uploadingContainers: UploadingAssetContainer[] = [];\n\n for (const uploadingFile of uploadingFilesData) {\n uploadingContainers.push({\n status: \"uploading\",\n objectURL: uploadingFile.objectURL,\n asset: uploadingFileDataToAsset(uploadingFile),\n });\n }\n\n const uploadedContainers: UploadedAssetContainer[] = [];\n\n for (const asset of assets.values()) {\n uploadedContainers.push({\n status: \"uploaded\",\n asset,\n });\n }\n\n // sort newest uploaded assets first\n uploadedContainers.sort(\n (leftContainer, rightContainer) =>\n new Date(rightContainer.asset.createdAt).getTime() -\n new Date(leftContainer.asset.createdAt).getTime()\n );\n\n // put uploading assets first\n return [...uploadingContainers, ...uploadedContainers];\n }\n);\n\nconst filterByType = (\n assetContainers: AssetContainer[],\n type: Asset[\"type\"] | undefined\n) => {\n if (type === undefined) {\n return assetContainers;\n }\n return assetContainers.filter((assetContainer) => {\n return assetContainer.asset.type === type;\n });\n};\n\nexport const useAssets = (type?: Asset[\"type\"]) => {\n const assetContainers = useStore($assetContainers);\n\n const assetsByType = useMemo(() => {\n return filterByType(assetContainers, type);\n }, [assetContainers, type]);\n\n return {\n /**\n * Already loaded assets or assets that are being uploaded\n */\n assetContainers: assetsByType,\n };\n};\n\nexport const __testing__ = {\n filterByType,\n};\n" }, { "path": "apps/builder/app/builder/shared/binding-popover.test.ts", "content": "import { expect, test } from \"vitest\";\nimport { encodeDataSourceVariable } from \"@webstudio-is/sdk\";\nimport { evaluateExpressionWithinScope } from \"./binding-popover\";\n\ntest(\"evaluateExpressionWithinScope works\", () => {\n const variableName = \"jsonVariable\";\n const encVariableName = encodeDataSourceVariable(variableName);\n const variableValue = 1;\n\n expect(\n evaluateExpressionWithinScope(`${encVariableName} + ${encVariableName}`, {\n [encVariableName]: variableValue,\n })\n ).toEqual(2);\n});\n" }, { "path": "apps/builder/app/builder/shared/binding-popover.tsx", "content": "import {\n type ButtonHTMLAttributes,\n forwardRef,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport { useStore } from \"@nanostores/react\";\nimport {\n DotIcon,\n InfoCircleIcon,\n PlusIcon,\n ResetIcon,\n TrashIcon,\n} from \"@webstudio-is/icons\";\nimport {\n Box,\n Button,\n CssValueListArrowFocus,\n CssValueListItem,\n DialogTitleActions,\n DialogClose,\n DialogTitle,\n Flex,\n FloatingPanel,\n Label,\n ScrollArea,\n SmallIconButton,\n Text,\n Tooltip,\n theme,\n} from \"@webstudio-is/design-system\";\nimport {\n decodeDataSourceVariable,\n getExpressionIdentifiers,\n lintExpression,\n} from \"@webstudio-is/sdk\";\nimport { $dataSourceVariables, $isDesignMode } from \"~/shared/nano-states\";\nimport {\n computeExpression,\n encodeDataVariableName,\n} from \"~/shared/data-variables\";\nimport {\n ExpressionEditor,\n formatValuePreview,\n type EditorApi,\n} from \"./expression-editor\";\n\n/**\n * Check if a value is a primitive that can be safely stringified.\n * Allows: string, number, boolean, null, undefined\n * Rejects: object, array, function, symbol\n */\nexport const isPrimitiveValue = (value: unknown): boolean => {\n if (value === null || value === undefined) {\n return true;\n }\n const type = typeof value;\n return type === \"string\" || type === \"number\" || type === \"boolean\";\n};\n\n/**\n * Generate a validation error message for non-primitive values.\n * @param label - The control label (e.g., \"Title\", \"URL\")\n * @returns Error message or undefined if value is valid\n */\nexport const validatePrimitiveValue = (\n value: unknown,\n label: string\n): string | undefined => {\n if (!isPrimitiveValue(value)) {\n return `${label} expects a primitive value (string, number, boolean, null, or undefined), not an object, array, or function`;\n }\n};\n\nexport const evaluateExpressionWithinScope = (\n expression: string,\n scope: Record\n) => {\n const variables = new Map();\n for (const [name, value] of Object.entries(scope)) {\n const decodedName = decodeDataSourceVariable(name);\n if (decodedName) {\n variables.set(decodedName, value);\n }\n }\n\n return computeExpression(expression, variables);\n};\n\nconst BindingPanel = ({\n scope,\n aliases,\n valueError,\n value,\n onChange,\n onSave,\n}: {\n scope: Record;\n aliases: Map;\n valueError?: string;\n value: string;\n onChange: () => void;\n onSave: (value: string, invalid: boolean) => void;\n}) => {\n const editorApiRef = useRef(undefined);\n const [expression, setExpression] = useState(value);\n const usedIdentifiers = useMemo(\n () => getExpressionIdentifiers(value),\n [value]\n );\n const [errorsCount, setErrorsCount] = useState(0);\n const [touched, setTouched] = useState(false);\n const scopeEntries = Object.entries(scope);\n\n const validate = (expression: string) => {\n const diagnostics = lintExpression({\n expression,\n availableVariables: new Set(aliases.keys()),\n });\n // prevent saving expression only with syntax error\n const errors = diagnostics.filter((item) => item.severity === \"error\");\n setErrorsCount(errors.length);\n };\n\n const updateExpression = (newExpression: string) => {\n setExpression(newExpression);\n onChange();\n validate(newExpression);\n };\n\n return (\n \n \n \n Variables\n \n \n \n \n {scopeEntries.length === 0 && (\n \n \n No variables available\n \n \n )}\n \n {scopeEntries.map(([identifier, value], index) => {\n const name = aliases.get(identifier);\n const label =\n value === undefined\n ? name\n : `${name}: ${formatValuePreview(value)}`;\n return (\n {label}}\n // mark all variables used in expression as selected\n active={usedIdentifiers.has(identifier)}\n // convert variable to expression\n onClick={() => {\n if (name) {\n const nameIdentifier = encodeDataVariableName(name);\n editorApiRef.current?.replaceSelection(nameIdentifier);\n }\n }}\n // expression editor blur is fired after pointer down even\n // preventing it allows to not trigger validation\n // and flickering error tooltip\n onPointerDown={(event) => {\n event.preventDefault();\n }}\n />\n );\n })}\n \n \n \n Expression editor\n \n Use JavaScript syntax to access variables along with comparison\n and arithmetic operators.\n
    \n Use the dot notation to access nested object values:\n Variable.nested.value\n \n }\n >\n \n \n     \n \n 0) || valueError !== undefined\n ? \"error\"\n : undefined\n }\n autoFocus={true}\n value={expression}\n onChange={(value) => {\n updateExpression(value);\n setTouched(false);\n }}\n onChangeComplete={() => {\n onSave(expression, errorsCount > 0);\n setTouched(true);\n }}\n />\n \n \n );\n};\n\nconst bindingOpacityProperty = \"--ws-binding-opacity\";\n\nexport const BindingControl = ({ children }: { children: ReactNode }) => {\n return (\n \n {children}\n \n );\n};\n\nexport type BindingVariant = \"default\" | \"bound\" | \"overwritten\";\n\nconst BindingButton = forwardRef<\n HTMLButtonElement,\n ButtonHTMLAttributes & {\n variant: BindingVariant;\n error?: string;\n value: string;\n }\n>(({ variant, error, value, ...props }, ref) => {\n const expanded = props[\"aria-expanded\"];\n const overwrittenMessage =\n variant === \"overwritten\" ? (\n \n Bound variable is overwritten with temporary value\n }\n css={{ flexGrow: 1 }}\n onClick={() => {\n const potentialVariableId = decodeDataSourceVariable(value);\n const dataSourceVariables = new Map($dataSourceVariables.get());\n if (potentialVariableId !== undefined) {\n dataSourceVariables.delete(potentialVariableId);\n $dataSourceVariables.set(dataSourceVariables);\n }\n }}\n >\n Reset value\n \n \n ) : undefined;\n const tooltipContent = error ?? overwrittenMessage;\n return (\n // prevent giving content to tooltip when popover is open\n // to avoid button remounting and popover flickering\n // when switch between valid and error value\n \n \n \n \n \n }\n />\n \n );\n});\nBindingButton.displayName = \"BindingButton\";\n\nexport const BindingPopover = ({\n scope,\n aliases,\n variant,\n validate,\n value,\n onChange,\n onRemove,\n}: {\n scope: Record;\n aliases: Map;\n variant: BindingVariant;\n validate?: (value: unknown) => undefined | string;\n value: string;\n onChange: (newValue: string) => void;\n onRemove: (evaluatedValue: unknown) => void;\n}) => {\n const [isOpen, onOpenChange] = useState(false);\n const hasUnsavedChange = useRef(false);\n const preventedClosing = useRef(false);\n const isDesignMode = useStore($isDesignMode);\n\n if (!isDesignMode) {\n return;\n }\n\n const valueError = validate?.(evaluateExpressionWithinScope(value, scope));\n return (\n {\n // handle special case for popover close\n if (newOpen === false) {\n // prevent saving when changes are not saved or validated\n if (hasUnsavedChange.current) {\n // schedule closing after saving\n preventedClosing.current = true;\n return;\n }\n preventedClosing.current = false;\n }\n onOpenChange(newOpen);\n }}\n title={\n \n \n {/* automatically close popover when remove expression */}\n \n }\n color=\"ghost\"\n disabled={variant === \"default\"}\n onClick={(event) => {\n event.preventDefault();\n // inline variables and close dialog\n const evaluatedValue = evaluateExpressionWithinScope(\n value,\n scope\n );\n\n onRemove(evaluatedValue);\n preventedClosing.current = false;\n hasUnsavedChange.current = false;\n onOpenChange(false);\n }}\n />\n \n \n \n \n }\n >\n Binding\n \n }\n content={\n {\n hasUnsavedChange.current = true;\n }}\n onSave={(value, invalid) => {\n // avoid saving without changes\n if (hasUnsavedChange.current === false) {\n return;\n }\n // let user see the error and let close popover after\n hasUnsavedChange.current = false;\n if (invalid) {\n return;\n }\n // save value and close popover\n onChange(value);\n if (preventedClosing.current) {\n preventedClosing.current = false;\n onOpenChange(false);\n }\n }}\n />\n }\n >\n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/calc-canvas-width.test.ts", "content": "import { test, expect, describe, beforeEach } from \"vitest\";\nimport { calcCanvasWidth, setCanvasWidth } from \"./calc-canvas-width\";\nimport { $workspaceRect, $canvasWidth } from \"~/builder/shared/nano-states\";\nimport { $breakpoints } from \"~/shared/sync/data-stores\";\n\n// Helper to create a DOMRect-like object for testing\nconst createRect = (width: number, height: number): DOMRect => ({\n width,\n height,\n x: 0,\n y: 0,\n top: 0,\n right: width,\n bottom: height,\n left: 0,\n toJSON: () => ({\n width,\n height,\n x: 0,\n y: 0,\n top: 0,\n right: width,\n bottom: height,\n left: 0,\n }),\n});\n\nconst breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"1\", label: \"Tablet\", maxWidth: 991 },\n { id: \"2\", label: \"Mobile landscape\", maxWidth: 767 },\n { id: \"3\", label: \"Mobile portrait\", maxWidth: 479 },\n { id: \"4\", label: \"Large\", minWidth: 1280 },\n { id: \"5\", label: \"Extra Large\", minWidth: 1440 },\n];\n\ndescribe(\"base breakpoint\", () => {\n test(\"without canvas width\", () => {\n const workspaceWidth = 1000;\n const breakpoints = [{ id: \"0\", label: \"Base\" }];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n })\n ).toStrictEqual(workspaceWidth);\n });\n\n test(\"canvas width bigger than workspace\", () => {\n const workspaceWidth = 1000;\n const breakpoints = [{ id: \"0\", label: \"Base\" }];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n canvasWidth: 1200,\n })\n ).toStrictEqual(workspaceWidth);\n });\n\n test(\"canvas width smaller than workspace\", () => {\n const workspaceWidth = 1000;\n const breakpoints = [{ id: \"0\", label: \"Base\" }];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n canvasWidth: 900,\n })\n ).toStrictEqual(workspaceWidth);\n });\n\n test(\"keep current canvas width when there is min-width breakpoint\", () => {\n const workspaceWidth = 1200;\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n canvasWidth: 1000,\n })\n ).toStrictEqual(1000);\n });\n\n test(\"keep a custom canvas width when there is no min-width breakpoint\", () => {\n const workspaceWidth = 1000;\n const breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"1\", label: \"Tablet\", maxWidth: 991 },\n ];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[1],\n workspaceWidth,\n canvasWidth: 993,\n })\n ).toStrictEqual(993);\n });\n\n test(\"using maximum available workspace while not entering any of the breakpoints\", () => {\n const workspaceWidth = 1000;\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n })\n ).toStrictEqual(workspaceWidth);\n });\n\n test(\"workspace is smaller than the base breakpoint range, so we need to use minimum available\", () => {\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth: 500,\n })\n ).toStrictEqual(992);\n });\n\n test(\"min-width only\", () => {\n const workspaceWidth = 1000;\n\n const breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"4\", label: \"Large\", minWidth: 1280 },\n { id: \"5\", label: \"Extra Large\", minWidth: 1440 },\n ];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n })\n ).toStrictEqual(workspaceWidth);\n });\n\n test(\"max-width only\", () => {\n const workspaceWidth = 1000;\n\n const breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"1\", label: \"Tablet\", maxWidth: 991 },\n { id: \"2\", label: \"Mobile landscape\", maxWidth: 767 },\n { id: \"3\", label: \"Mobile portrait\", maxWidth: 479 },\n ];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n })\n ).toStrictEqual(workspaceWidth);\n });\n});\n\ndescribe(\"other breakpoints\", () => {\n test(\"tablet\", () => {\n const workspaceWidth = 1000;\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[1],\n workspaceWidth,\n })\n ).toStrictEqual(768);\n });\n\n test(\"tablet - keep the custom width\", () => {\n const workspaceWidth = 1000;\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[1],\n workspaceWidth,\n canvasWidth: 993,\n })\n ).toStrictEqual(993);\n });\n\n test(\"mobile landscape\", () => {\n const workspaceWidth = 1000;\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[2],\n workspaceWidth,\n })\n ).toStrictEqual(480);\n });\n\n test(\"mobile portrait\", () => {\n const workspaceWidth = 1000;\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[3],\n workspaceWidth,\n })\n ).toStrictEqual(320);\n });\n\n test(\"large\", () => {\n const workspaceWidth = 1000;\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[4],\n workspaceWidth,\n })\n ).toStrictEqual(1280);\n });\n\n test(\"extra large\", () => {\n const workspaceWidth = 1000;\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[5],\n workspaceWidth,\n })\n ).toStrictEqual(1440);\n });\n\n test(\"0 min-width\", () => {\n const workspaceWidth = 1000;\n const breakpoints = [{ id: \"0\", label: \"x\", minWidth: 0 }];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n })\n ).toStrictEqual(320);\n });\n\n test(\"low min-width\", () => {\n const workspaceWidth = 1000;\n const breakpoints = [{ id: \"0\", label: \"x\", minWidth: 123 }];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n })\n ).toStrictEqual(123);\n });\n\n test(\"no previous max-width\", () => {\n const workspaceWidth = 1000;\n const breakpoints = [{ id: \"0\", label: \"x\", maxWidth: 100 }];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n })\n ).toStrictEqual(320);\n });\n});\n\ndescribe(\"custom condition breakpoints\", () => {\n test(\"returns undefined for custom condition breakpoint\", () => {\n const workspaceWidth = 1200;\n const breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"1\", label: \"Portrait\", condition: \"orientation:portrait\" },\n ];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[1],\n workspaceWidth,\n })\n ).toBeUndefined();\n });\n\n test(\"returns undefined for hover condition\", () => {\n const workspaceWidth = 1200;\n const breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"1\", label: \"Hover\", condition: \"hover:hover\" },\n ];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[1],\n workspaceWidth,\n })\n ).toBeUndefined();\n });\n\n test(\"returns undefined for prefers-color-scheme\", () => {\n const workspaceWidth = 1200;\n const breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"1\", label: \"Dark\", condition: \"prefers-color-scheme:dark\" },\n ];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[1],\n workspaceWidth,\n })\n ).toBeUndefined();\n });\n\n test(\"returns undefined regardless of custom canvasWidth for condition breakpoints\", () => {\n const workspaceWidth = 1200;\n const breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"1\", label: \"Portrait\", condition: \"orientation:portrait\" },\n ];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[1],\n workspaceWidth,\n canvasWidth: 800, // Should be ignored\n })\n ).toBeUndefined();\n });\n\n test(\"base breakpoint ignores custom condition breakpoints when calculating width\", () => {\n const workspaceWidth = 1200;\n const breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"1\", label: \"Tablet\", minWidth: 768 },\n { id: \"2\", label: \"Portrait\", condition: \"orientation:portrait\" },\n { id: \"3\", label: \"Hover\", condition: \"hover:hover\" },\n ];\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n })\n ).toStrictEqual(767); // minWidth - 1, ignoring condition breakpoints\n });\n\n test(\"handles mix of width-based and condition breakpoints\", () => {\n const workspaceWidth = 1200;\n const breakpoints = [\n { id: \"0\", label: \"Base\" },\n { id: \"1\", label: \"Tablet\", minWidth: 768 },\n { id: \"2\", label: \"Portrait\", condition: \"orientation:portrait\" },\n { id: \"3\", label: \"Desktop\", minWidth: 1024 },\n { id: \"4\", label: \"Hover\", condition: \"hover:hover\" },\n ];\n\n // Width-based breakpoint works normally\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[1],\n workspaceWidth,\n })\n ).toStrictEqual(768);\n\n // Condition breakpoint returns undefined\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[2],\n workspaceWidth,\n })\n ).toBeUndefined();\n\n // Base calculates correctly ignoring condition breakpoints\n expect(\n calcCanvasWidth({\n breakpoints,\n selectedBreakpoint: breakpoints[0],\n workspaceWidth,\n })\n ).toStrictEqual(767);\n });\n});\n\ndescribe(\"setCanvasWidth\", () => {\n beforeEach(() => {\n // Reset stores before each test\n $canvasWidth.set(0);\n $breakpoints.set(new Map());\n $workspaceRect.set(undefined);\n });\n\n test(\"returns false when workspaceRect is undefined\", () => {\n const breakpoints = new Map([[\"0\", { id: \"0\", label: \"Base\" }]]);\n $breakpoints.set(breakpoints);\n $workspaceRect.set(undefined);\n\n expect(setCanvasWidth(\"0\")).toBe(false);\n });\n\n test(\"returns false when selectedBreakpoint is not found\", () => {\n $workspaceRect.set(createRect(1000, 800));\n $breakpoints.set(new Map([[\"0\", { id: \"0\", label: \"Base\" }]]));\n\n expect(setCanvasWidth(\"nonexistent\")).toBe(false);\n });\n\n test(\"sets canvas width for base breakpoint\", () => {\n const workspaceWidth = 1200;\n $workspaceRect.set(createRect(workspaceWidth, 800));\n $breakpoints.set(new Map([[\"0\", { id: \"0\", label: \"Base\" }]]));\n\n const result = setCanvasWidth(\"0\");\n\n expect(result).toBe(true);\n expect($canvasWidth.get()).toBe(workspaceWidth);\n });\n\n test(\"sets canvas width for max-width breakpoint\", () => {\n $workspaceRect.set(createRect(1200, 800));\n $breakpoints.set(\n new Map([\n [\"0\", { id: \"0\", label: \"Base\" }],\n [\"1\", { id: \"1\", label: \"Tablet\", maxWidth: 991 }],\n [\"2\", { id: \"2\", label: \"Mobile\", maxWidth: 767 }],\n ])\n );\n\n const result = setCanvasWidth(\"1\");\n\n expect(result).toBe(true);\n expect($canvasWidth.get()).toBe(768); // maxWidth of previous breakpoint + 1\n });\n\n test(\"sets canvas width for min-width breakpoint\", () => {\n $workspaceRect.set(createRect(1000, 800));\n $breakpoints.set(\n new Map([\n [\"0\", { id: \"0\", label: \"Base\" }],\n [\"1\", { id: \"1\", label: \"Large\", minWidth: 1280 }],\n ])\n );\n\n const result = setCanvasWidth(\"1\");\n\n expect(result).toBe(true);\n expect($canvasWidth.get()).toBe(1280);\n });\n\n test(\"updates canvas width when called multiple times\", () => {\n $workspaceRect.set(createRect(1500, 800));\n $breakpoints.set(\n new Map([\n [\"0\", { id: \"0\", label: \"Base\" }],\n [\"1\", { id: \"1\", label: \"Tablet\", maxWidth: 991 }],\n [\"2\", { id: \"2\", label: \"Mobile\", maxWidth: 767 }],\n ])\n );\n\n setCanvasWidth(\"1\");\n expect($canvasWidth.get()).toBe(768); // Previous breakpoint maxWidth (767) + 1\n\n setCanvasWidth(\"0\");\n expect($canvasWidth.get()).toBe(1500);\n });\n\n test(\"returns undefined for custom condition breakpoint in setCanvasWidth\", () => {\n $workspaceRect.set(createRect(1200, 800));\n $breakpoints.set(\n new Map([\n [\"0\", { id: \"0\", label: \"Base\" }],\n [\n \"1\",\n { id: \"1\", label: \"Portrait\", condition: \"orientation:portrait\" },\n ],\n ])\n );\n\n const result = setCanvasWidth(\"1\");\n\n expect(result).toBe(true);\n expect($canvasWidth.get()).toBeUndefined(); // Undefined for condition breakpoints\n });\n\n test(\"returns undefined for hover condition breakpoint in setCanvasWidth\", () => {\n $workspaceRect.set(createRect(1500, 800));\n $breakpoints.set(\n new Map([\n [\"0\", { id: \"0\", label: \"Base\" }],\n [\"1\", { id: \"1\", label: \"Hover\", condition: \"hover:hover\" }],\n ])\n );\n\n const result = setCanvasWidth(\"1\");\n\n expect(result).toBe(true);\n expect($canvasWidth.get()).toBeUndefined();\n });\n});\n\n// Note: useSetCanvasWidth is a React hook with complex side effects (multiple store subscriptions\n// and cleanup logic). It's primarily tested through integration tests and component tests rather\n// than unit tests, as it orchestrates calls to setCanvasWidth which is fully unit tested above.\n" }, { "path": "apps/builder/app/builder/shared/calc-canvas-width.ts", "content": "import { useEffect } from \"react\";\nimport { compareMedia } from \"@webstudio-is/css-engine\";\nimport type { Breakpoint } from \"@webstudio-is/sdk\";\nimport {\n groupBreakpoints,\n isBaseBreakpoint,\n minCanvasWidth,\n} from \"~/shared/breakpoints-utils\";\nimport { $workspaceRect, $canvasWidth } from \"~/builder/shared/nano-states\";\nimport {\n $breakpoints,\n $isPreviewMode,\n $selectedBreakpoint,\n} from \"~/shared/nano-states\";\n\nconst defaultWidth = 320;\n\n// We want to know if user resized the canvas to a custom value.\nconst isCustomCanvasWidth = (\n breakpoints: Array,\n selectedBreakpoint: Breakpoint,\n canvasWidth?: number\n) => {\n if (canvasWidth === undefined) {\n return false;\n }\n const hasMinWidth = breakpoints.some(\n (breakpoint) => breakpoint.minWidth !== undefined\n );\n\n // Only in case of base breakpoint and whithout min-width breakpoint, we ignore the custom width,\n // because we want it to go full viewport width\n if (isBaseBreakpoint(selectedBreakpoint) && hasMinWidth === false) {\n return false;\n }\n\n for (const breakpoint of breakpoints) {\n if (\n breakpoint.minWidth !== undefined &&\n canvasWidth === breakpoint.minWidth\n ) {\n return false;\n }\n if (\n breakpoint.maxWidth !== undefined &&\n canvasWidth === breakpoint.maxWidth + 1\n ) {\n return false;\n }\n }\n return true;\n};\n\n// Find a canvas width that is within the selected breakpoint's range, but is at it's minimum.\n// Goal is to allow user to consistently know the direction they want to resize to after they switched to a breakpoint.\n// In this case they will want to always increase the width after switching.\nexport const calcCanvasWidth = ({\n breakpoints,\n selectedBreakpoint,\n workspaceWidth,\n canvasWidth,\n}: {\n breakpoints: Array;\n selectedBreakpoint: Breakpoint;\n workspaceWidth: number;\n canvasWidth?: number;\n}) => {\n // Condition-based breakpoints (e.g., orientation:portrait, hover:hover) don't have width ranges\n // Return undefined so the width will be defined by current canvas width\n if (selectedBreakpoint.condition !== undefined) {\n return;\n }\n\n // When user has resized the canvas to a custom value, we want to keep it.\n if (isCustomCanvasWidth(breakpoints, selectedBreakpoint, canvasWidth)) {\n return canvasWidth;\n }\n\n // Finding the canvas width when user selects base breakpoint is a bit more complicated.\n // We want to find the lowest possible size that is bigger than all max breakpoints and smaller than all min breakpoints.\n // Note: it is still possible to get intersecting min and max breakpoints.\n if (isBaseBreakpoint(selectedBreakpoint)) {\n // Base is the only breakpoint\n if (breakpoints.length === 1) {\n return workspaceWidth;\n }\n\n const grouped = groupBreakpoints(breakpoints);\n // Only consider width-based breakpoints for canvas sizing\n const filtered = grouped.widthBased.filter(({ minWidth, maxWidth }) => {\n // We don't want to grow the canvas beyond the workspace width.\n if (minWidth && minWidth < workspaceWidth) {\n return true;\n }\n // Max width can not be smaller than the minimum canvas width.\n if (maxWidth && maxWidth > minCanvasWidth) {\n return true;\n }\n });\n let lowestMinWidth = filtered\n .filter(({ minWidth }) => minWidth !== undefined)\n .at(-1)?.minWidth;\n\n lowestMinWidth =\n lowestMinWidth === undefined ? workspaceWidth : lowestMinWidth - 1;\n\n let highestMaxWidth = filtered\n .filter(({ maxWidth }) => maxWidth !== undefined)\n .at(0)?.maxWidth;\n\n highestMaxWidth =\n highestMaxWidth === undefined ? minCanvasWidth : highestMaxWidth + 1;\n\n return Math.max(lowestMinWidth, highestMaxWidth);\n }\n\n if (selectedBreakpoint.minWidth !== undefined) {\n if (selectedBreakpoint.minWidth === 0) {\n return defaultWidth;\n }\n return selectedBreakpoint.minWidth;\n }\n\n const sorted = breakpoints\n .filter((breakpoint) => breakpoint.maxWidth !== undefined)\n .sort(compareMedia)\n .reverse();\n\n const index = sorted.findIndex(\n (breakpoint) => breakpoint.id === selectedBreakpoint.id\n );\n const previousBreakpointMaxWidth = sorted[index - 1]?.maxWidth;\n if (previousBreakpointMaxWidth === undefined) {\n return defaultWidth;\n }\n return previousBreakpointMaxWidth + 1;\n};\n\nexport const setCanvasWidth = (breakpointId: Breakpoint[\"id\"]) => {\n const workspaceRect = $workspaceRect.get();\n const breakpoints = $breakpoints.get();\n const selectedBreakpoint = breakpoints.get(breakpointId);\n\n if (workspaceRect === undefined || selectedBreakpoint === undefined) {\n return false;\n }\n\n const width = calcCanvasWidth({\n breakpoints: Array.from(breakpoints.values()),\n selectedBreakpoint,\n workspaceWidth: workspaceRect.width,\n });\n\n $canvasWidth.set(width);\n return true;\n};\n\n/**\n * Update canvas width initially and on breakpoint change\n **/\nexport const useSetCanvasWidth = () => {\n useEffect(() => {\n const update = () => {\n const selectedBreakpoint = $selectedBreakpoint.get();\n if (selectedBreakpoint) {\n // When there is selected breakpoint, we want to find the smallest possible size\n // that is bigger than any max-width breakpoints and smaller than any min-width breakpoints.\n // When on base breakpoint it will be the biggest possible but smaller than the workspace.\n setCanvasWidth(selectedBreakpoint.id);\n }\n };\n\n const unsubscribeBreakpoints = $breakpoints.subscribe(update);\n const unsubscribeRect = $workspaceRect.listen(update);\n const unsubscribeIsPreviewMode = $isPreviewMode.listen((isPreviewMode) => {\n if (isPreviewMode) {\n update();\n }\n });\n const unsubscribeSelectedBreakpoint = $selectedBreakpoint.listen(\n (selectedBreakpoint) => {\n // This will set initial width of the canvas once the initial selected breakpoint is known.\n if (selectedBreakpoint) {\n update();\n // We can unsubscribe right away as we only need this once.\n unsubscribeSelectedBreakpoint();\n }\n }\n );\n\n return () => {\n unsubscribeBreakpoints();\n unsubscribeRect();\n unsubscribeIsPreviewMode();\n unsubscribeSelectedBreakpoint();\n };\n }, []);\n};\n" }, { "path": "apps/builder/app/builder/shared/client-settings/index.ts", "content": "export * from \"./settings\";\n" }, { "path": "apps/builder/app/builder/shared/client-settings/settings.ts", "content": "import { atom } from \"nanostores\";\nimport { z } from \"zod\";\nimport { sidebarPanelNames } from \"~/builder/sidebar-left/types\";\n\nconst Settings = z.object({\n navigatorLayout: z.enum([\"docked\", \"undocked\"]).default(\"undocked\"),\n stylePanelMode: z.enum([\"default\", \"focus\", \"advanced\"]).default(\"default\"),\n sidebarPanelWidths: z\n .record(z.enum(sidebarPanelNames), z.number())\n .default({}),\n});\n\nexport type Settings = z.infer;\n\nconst defaultSettings = Settings.parse({});\n\nconst namespace = \"__webstudio_user_settings__\";\n\nconst read = (): Settings => {\n let settingsString;\n try {\n settingsString = localStorage.getItem(namespace);\n } catch {\n // We don't need to handle this one.\n }\n\n if (settingsString == null) {\n return defaultSettings;\n }\n\n try {\n return Settings.parse(JSON.parse(settingsString));\n } catch (error) {\n if (error instanceof Error) {\n console.error({\n message: \"Bad user settings in local storage\",\n extras: {\n error: error.message,\n },\n });\n }\n }\n return defaultSettings;\n};\n\nconst write = (settings: Settings) => {\n localStorage.setItem(namespace, JSON.stringify(settings));\n};\n\nconst initialSettings = read();\n\nexport const $settings = atom(initialSettings);\n\nexport const setSetting = (\n name: Name,\n value: Settings[Name]\n) => {\n const settings = $settings.get();\n if (settings[name] === value) {\n return;\n }\n const nextSettings = { ...settings, [name]: value };\n $settings.set(nextSettings);\n write(nextSettings);\n};\n\nexport const getSetting = (name: Name) => {\n return $settings.get()[name];\n};\n" }, { "path": "apps/builder/app/builder/shared/collapsible-section.stories.tsx", "content": "import { Flex, StorySection, Text } from \"@webstudio-is/design-system\";\nimport {\n CollapsibleSectionRoot,\n CollapsibleSection,\n CollapsibleSectionWithAddButton,\n CollapsibleProvider,\n} from \"./collapsible-section\";\n\nexport default {\n title: \"Builder/Shared/Collapsible section\",\n component: CollapsibleSection,\n};\n\nexport const CollapsibleSections = () => (\n \n \n \n \n Independent sections\n \n \n Content inside a root section.\n \n\n \n This section uses persisted open/close state.\n \n\n {}}\n hasItems\n >\n Section with an add button in the title.\n \n\n {}}\n hasItems={false}\n >\n This won't appear because hasItems is false.\n \n \n\n \n \n \n Accordion mode\n \n \n First section content.\n \n \n Second section content.\n \n \n Third section content.\n \n \n \n \n \n);\n" }, { "path": "apps/builder/app/builder/shared/collapsible-section.tsx", "content": "import { atom } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport {\n Flex,\n Collapsible,\n SectionTitle,\n SectionTitleLabel,\n SectionTitleButton,\n Separator,\n theme,\n} from \"@webstudio-is/design-system\";\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useState,\n type ComponentProps,\n type ReactNode,\n} from \"react\";\nimport { PlusIcon } from \"@webstudio-is/icons\";\nimport type { Simplify } from \"type-fest\";\n\ntype Label = string;\n\ntype State = {\n [label: string]: boolean;\n};\n\n// Preserves the open/close state even when component gets unmounted\nconst $state = atom({});\n\ntype HandleOpenState = (\n label: Label,\n isOpenForced?: boolean\n) => [boolean, (value: boolean) => void];\n\nconst CollapsibleSectionContext = createContext<\n | undefined\n | {\n handleOpenState: HandleOpenState;\n }\n>(undefined);\n\nexport const CollapsibleProvider = ({\n children,\n accordion,\n initialOpen,\n}: {\n children: ReactNode;\n accordion?: boolean;\n initialOpen?: Label;\n}) => {\n const state = useStore($state);\n useEffect(() => {\n const nextState = { ...$state.get() };\n\n if (initialOpen === \"*\") {\n for (const key in nextState) {\n nextState[key] = true;\n }\n $state.set(nextState);\n return;\n }\n\n if (accordion) {\n for (const key in nextState) {\n nextState[key] = false;\n }\n }\n\n if (initialOpen) {\n nextState[initialOpen] = true;\n }\n $state.set(nextState);\n }, [accordion, initialOpen]);\n\n const handleOpenState: HandleOpenState = useCallback(\n (label, isOpenForced) => {\n const nextState = { ...state };\n if (nextState[label] === undefined) {\n nextState[label] = accordion ? false : true;\n }\n\n const setIsOpen = (isOpen: boolean) => {\n if (accordion) {\n for (const key in nextState) {\n nextState[key] = false;\n }\n }\n nextState[label] = isOpen;\n $state.set(nextState);\n };\n\n return [isOpenForced ?? nextState[label], setIsOpen];\n },\n [state, accordion]\n );\n\n return (\n \n {children}\n \n );\n};\n\nexport const useOpenState: HandleOpenState = (label, isOpen) => {\n const context = useContext(CollapsibleSectionContext);\n const localState = useState(isOpen ?? true);\n if (context === undefined) {\n return localState;\n }\n return context.handleOpenState(label, isOpen);\n};\n\ntype CollapsibleSectionBaseProps = {\n trigger?: ReactNode;\n children: ReactNode;\n fullWidth?: boolean;\n label?: string;\n isOpen?: boolean;\n onOpenChange?: (value: boolean) => void;\n};\n\nexport const CollapsibleSectionRoot = ({\n label,\n trigger,\n children,\n fullWidth = false,\n isOpen,\n onOpenChange,\n}: CollapsibleSectionBaseProps) => {\n return (\n \n \n {trigger ?? (\n \n {label ?? \"\"}\n \n )}\n \n\n \n \n {children}\n \n \n \n \n );\n};\n\ntype CollapsibleSectionProps = Simplify<\n Omit & {\n label: Label;\n }\n>;\n\nexport const CollapsibleSection = (props: CollapsibleSectionProps) => {\n const { label, trigger, children, fullWidth } = props;\n const [isOpen, setIsOpen] = useOpenState(label, props.isOpen);\n return (\n \n {children}\n \n );\n};\n\nexport const CollapsibleSectionWithAddButton = ({\n onAdd,\n hasItems = true,\n ...props\n}: Omit & {\n onAdd?: () => void;\n\n /**\n * If set to `true`, dots aren't shown,\n * but still affects how isOpen is treated and whether onAdd is called on open.\n */\n hasItems?: boolean | ComponentProps[\"dots\"];\n}) => {\n const { label, children } = props;\n const [isOpen, setIsOpen] = useOpenState(label, props.isOpen);\n\n const isEmpty =\n hasItems === false || (Array.isArray(hasItems) && hasItems.length === 0);\n\n // If it's open but empty, we want it to look as closed\n const isOpenFinal = isOpen && isEmpty === false;\n\n return (\n {\n setIsOpen(nextIsOpen);\n if (isEmpty) {\n onAdd?.();\n }\n }}\n trigger={\n }\n onClick={() => {\n if (isOpenFinal === false) {\n setIsOpen(true);\n }\n onAdd();\n }}\n />\n ) : undefined\n }\n >\n {props.label}\n \n }\n >\n {children}\n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/commands.ts", "content": "import { toast } from \"@webstudio-is/design-system\";\nimport type { WebstudioFragment } from \"@webstudio-is/sdk\";\nimport {\n isAutoGridPlacement,\n resetGridChildPlacement,\n} from \"~/builder/features/style-panel/sections/layout/shared/grid-utils\";\nimport { createCommandsEmitter, type Command } from \"~/shared/commands-emitter\";\nimport {\n $editingItemSelector,\n $isDesignMode,\n toggleBuilderMode,\n $project,\n} from \"~/shared/nano-states\";\n\n// Declare command for type safety\ndeclare module \"~/shared/pubsub\" {\n interface CommandRegistry {\n focusStyleSourceInput: undefined;\n }\n}\n\nimport {\n $breakpointsMenuView,\n selectBreakpointByOrder,\n} from \"~/shared/breakpoints\";\nimport {\n updateWebstudioData,\n unwrapInstance,\n deleteSelectedInstance,\n extractWebstudioFragment,\n insertWebstudioFragmentAt,\n insertWebstudioFragmentCopy,\n} from \"~/shared/instance-utils\";\nimport { serverSyncStore } from \"~/shared/sync/sync-stores\";\nimport { $publisher } from \"~/shared/pubsub\";\nimport {\n $activeInspectorPanel,\n $publishDialog,\n setActiveSidebarPanel,\n toggleActiveSidebarPanel,\n} from \"./nano-states\";\nimport { $selectedInstancePath, selectInstance } from \"~/shared/awareness\";\nimport { openCommandPanel } from \"../features/command-panel\";\nimport { showWrapComponentsList } from \"../features/command-panel/groups/wrap-group\";\nimport { showConvertComponentsList } from \"../features/command-panel/groups/convert-group\";\nimport { builderApi } from \"~/shared/builder-api\";\nimport { getSetting, setSetting } from \"./client-settings\";\nimport { findAvailableVariables } from \"~/shared/data-variables\";\nimport { generateFragmentFromHtml } from \"~/shared/html\";\nimport { generateFragmentFromTailwind } from \"~/shared/tailwind/tailwind\";\nimport { denormalizeSrcProps } from \"~/shared/copy-paste/asset-upload\";\nimport { isSyncIdle } from \"~/shared/sync/project-queue\";\nimport { openDeleteUnusedTokensDialog } from \"~/builder/shared/style-source-actions\";\nimport { openDeleteUnusedDataVariablesDialog } from \"~/builder/shared/data-variable-utils\";\nimport { openDeleteUnusedCssVariablesDialog } from \"~/builder/shared/css-variable-utils\";\nimport { openDeleteUnusedAssetsDialog } from \"~/builder/shared/asset-manager/delete-unused-assets\";\nimport { openKeyboardShortcutsDialog } from \"~/builder/features/keyboard-shortcuts-dialog\";\nimport {\n copyInstance,\n emitPaste,\n cutInstance,\n} from \"~/shared/copy-paste/init-copy-paste\";\nimport { toggleInstanceShow } from \"~/shared/instance-utils\";\n\nconst makeBreakpointCommand = (\n name: CommandName,\n number: number\n): Command => ({\n name,\n hidden: true,\n defaultHotkeys: [`${number}`],\n disableOnInputLikeControls: true,\n handler: () => {\n selectBreakpointByOrder(number);\n },\n});\n\nexport const { emitCommand, subscribeCommands } = createCommandsEmitter({\n source: \"builder\",\n externalCommands: [\n \"editInstanceText\",\n \"formatBold\",\n \"formatItalic\",\n \"formatSuperscript\",\n \"formatSubscript\",\n \"formatLink\",\n \"formatSpan\",\n \"formatClear\",\n ],\n commands: [\n // system\n\n {\n name: \"cancelCurrentDrag\",\n label: \"Deselect\",\n description: \"Cancel drag or deselect\",\n hidden: true,\n category: \"General\",\n defaultHotkeys: [\"escape\"],\n // radix check event.defaultPrevented before invoking callbacks\n preventDefault: false,\n handler: () => {\n const { publish } = $publisher.get();\n publish?.({ type: \"cancelCurrentDrag\" });\n },\n },\n {\n name: \"clickCanvas\",\n description: \"Click on canvas\",\n hidden: true,\n handler: () => {\n $breakpointsMenuView.set(undefined);\n setActiveSidebarPanel(\"auto\");\n },\n },\n\n // ui\n\n {\n name: \"togglePreviewMode\",\n description: \"Preview mode\",\n category: \"Top bar\",\n defaultHotkeys: [\"meta+shift+p\", \"ctrl+shift+p\"],\n handler: () => {\n setActiveSidebarPanel(\"auto\");\n toggleBuilderMode(\"preview\");\n },\n },\n {\n name: \"toggleDesignMode\",\n description: \"Toggle design mode\",\n category: \"Top bar\",\n defaultHotkeys: [\"meta+shift+d\", \"ctrl+shift+d\"],\n handler: () => {\n setActiveSidebarPanel(\"auto\");\n toggleBuilderMode(\"design\");\n },\n },\n {\n name: \"toggleContentMode\",\n description: \"Toggle content mode\",\n category: \"Top bar\",\n defaultHotkeys: [\"meta+shift+c\", \"ctrl+shift+c\"],\n handler: () => {\n setActiveSidebarPanel(\"auto\");\n toggleBuilderMode(\"content\");\n },\n },\n {\n name: \"openBreakpointsMenu\",\n description: \"Manage responsive breakpoints\",\n handler: () => {\n $breakpointsMenuView.set(\"initial\");\n },\n },\n {\n name: \"openPublishDialog\",\n description: \"Deploy your project\",\n category: \"Top bar\",\n defaultHotkeys: [\"shift+P\"],\n handler: () => {\n $publishDialog.set(\"publish\");\n },\n disableOnInputLikeControls: true,\n },\n {\n name: \"openExportDialog\",\n description: \"Export project code\",\n category: \"General\",\n defaultHotkeys: [\"shift+E\"],\n handler: () => {\n $publishDialog.set(\"export\");\n },\n disableOnInputLikeControls: true,\n },\n {\n name: \"toggleComponentsPanel\",\n description: \"Toggle components panel\",\n category: \"Panels\",\n defaultHotkeys: [\"a\"],\n handler: () => {\n if ($isDesignMode.get() === false) {\n builderApi.toast.info(\n \"Components panel is only available in design mode.\"\n );\n return;\n }\n toggleActiveSidebarPanel(\"components\");\n },\n disableOnInputLikeControls: true,\n },\n {\n name: \"toggleNavigatorPanel\",\n description: \"Toggle navigator panel\",\n category: \"Panels\",\n defaultHotkeys: [\"z\"],\n handler: () => {\n toggleActiveSidebarPanel(\"navigator\");\n },\n disableOnInputLikeControls: true,\n },\n {\n name: \"openStylePanel\",\n description: \"Open style panel\",\n category: \"Panels\",\n defaultHotkeys: [\"s\"],\n handler: () => {\n if ($isDesignMode.get() === false) {\n builderApi.toast.info(\n \"Style panel is only available in design mode.\"\n );\n return;\n }\n $activeInspectorPanel.set(\"style\");\n },\n disableOnInputLikeControls: true,\n },\n {\n name: \"focusStyleSources\",\n description: \"Focus style sources input\",\n category: \"Style panel\",\n defaultHotkeys: [\"meta+enter\", \"ctrl+enter\"],\n handler: () => {\n if ($isDesignMode.get() === false) {\n builderApi.toast.info(\n \"Style panel is only available in design mode.\"\n );\n return;\n }\n $activeInspectorPanel.set(\"style\");\n requestAnimationFrame(() => {\n emitCommand(\"focusStyleSourceInput\");\n });\n },\n disableOnInputLikeControls: true,\n },\n {\n name: \"focusStyleSourceInput\",\n description: \"Focus style source input\",\n hidden: true,\n handler: () => {\n // This command is handled by the style panel component\n // It's emitted by openStylePanel command\n },\n },\n {\n name: \"toggleStylePanelFocusMode\",\n description: \"Toggle style panel focus mode\",\n category: \"Style panel\",\n defaultHotkeys: [\"alt+shift+s\"],\n handler: () => {\n setSetting(\n \"stylePanelMode\",\n getSetting(\"stylePanelMode\") === \"focus\" ? \"default\" : \"focus\"\n );\n },\n disableOnInputLikeControls: true,\n },\n {\n name: \"toggleStylePanelAdvancedMode\",\n description: \"Toggle style panel advanced mode\",\n category: \"Style panel\",\n defaultHotkeys: [\"alt+shift+a\"],\n handler: () => {\n setSetting(\n \"stylePanelMode\",\n getSetting(\"stylePanelMode\") === \"advanced\" ? \"default\" : \"advanced\"\n );\n },\n disableOnInputLikeControls: true,\n },\n {\n name: \"openSettingsPanel\",\n description: \"Open settings panel\",\n category: \"Panels\",\n defaultHotkeys: [\"d\"],\n handler: () => {\n $activeInspectorPanel.set(\"settings\");\n },\n disableOnInputLikeControls: true,\n },\n makeBreakpointCommand(\"selectBreakpoint1\", 1),\n makeBreakpointCommand(\"selectBreakpoint2\", 2),\n makeBreakpointCommand(\"selectBreakpoint3\", 3),\n makeBreakpointCommand(\"selectBreakpoint4\", 4),\n makeBreakpointCommand(\"selectBreakpoint5\", 5),\n makeBreakpointCommand(\"selectBreakpoint6\", 6),\n makeBreakpointCommand(\"selectBreakpoint7\", 7),\n makeBreakpointCommand(\"selectBreakpoint8\", 8),\n makeBreakpointCommand(\"selectBreakpoint9\", 9),\n {\n name: \"copy\",\n description: \"Copy selected instance\",\n category: \"Navigator\",\n handler: copyInstance,\n },\n {\n name: \"paste\",\n description: \"Paste copied instance\",\n category: \"Navigator\",\n handler: emitPaste,\n },\n {\n name: \"cut\",\n description: \"Cut selected instance\",\n category: \"Navigator\",\n handler: cutInstance,\n },\n {\n name: \"toggleShow\",\n description: \"Toggle instance visibility\",\n category: \"Navigator\",\n handler: () => {\n const instancePath = $selectedInstancePath.get();\n if (instancePath?.[0]) {\n toggleInstanceShow(instancePath[0].instance.id);\n }\n },\n },\n {\n name: \"deleteInstanceBuilder\",\n label: \"Delete Instance\",\n description: \"Delete selected instance\",\n category: \"Navigator\",\n defaultHotkeys: [\"backspace\", \"delete\"],\n // See \"deleteInstanceCanvas\" for details on why the command is separated for the canvas and builder.\n disableHotkeyOutsideApp: true,\n disableOnInputLikeControls: true,\n handler: deleteSelectedInstance,\n },\n {\n name: \"duplicateInstance\",\n description: \"Duplicate selected instance\",\n category: \"Navigator\",\n defaultHotkeys: [\"meta+d\", \"ctrl+d\"],\n handler: () => {\n const project = $project.get();\n if (project === undefined) {\n return;\n }\n if ($isDesignMode.get() === false) {\n builderApi.toast.info(\"Duplicating is only allowed in design mode.\");\n return;\n }\n const instancePath = $selectedInstancePath.get();\n // global root or body are selected\n if (instancePath === undefined || instancePath.length === 1) {\n return;\n }\n const [selectedItem, parentItem] = instancePath;\n\n updateWebstudioData((data) => {\n const fragment = extractWebstudioFragment(\n data,\n selectedItem.instance.id\n );\n const { newInstanceIds } = insertWebstudioFragmentCopy({\n data,\n fragment,\n availableVariables: findAvailableVariables({\n ...data,\n startingInstanceId: parentItem.instanceSelector[0],\n }),\n projectId: project.id,\n });\n const newRootInstanceId = newInstanceIds.get(\n selectedItem.instance.id\n );\n if (newRootInstanceId === undefined) {\n return;\n }\n\n // When the original child is auto-placed in a grid, ensure the\n // duplicate is also auto-placed to prevent overlapping items.\n // Manually positioned children keep their exact grid position.\n if (\n isAutoGridPlacement({\n styles: data.styles,\n styleSources: data.styleSources,\n styleSourceSelections: data.styleSourceSelections,\n instanceId: selectedItem.instance.id,\n })\n ) {\n resetGridChildPlacement({\n styles: data.styles,\n styleSources: data.styleSources,\n styleSourceSelections: data.styleSourceSelections,\n instanceId: newRootInstanceId,\n });\n }\n\n const parentInstance = data.instances.get(parentItem.instance.id);\n if (parentInstance === undefined) {\n return;\n }\n // put after current instance\n const indexWithinChildren = parentInstance.children.findIndex(\n (child) =>\n child.type === \"id\" && child.value === selectedItem.instance.id\n );\n const position = indexWithinChildren + 1;\n parentInstance.children.splice(position, 0, {\n type: \"id\",\n value: newRootInstanceId,\n });\n // select new instance\n selectInstance([newRootInstanceId, ...parentItem.instanceSelector]);\n });\n },\n },\n {\n name: \"editInstanceLabel\",\n description: \"Edit instance label\",\n category: \"Navigator\",\n defaultHotkeys: [\"meta+e\", \"ctrl+e\"],\n handler: () => {\n const instancePath = $selectedInstancePath.get();\n if (instancePath === undefined) {\n return;\n }\n const [selectedItem] = instancePath;\n $editingItemSelector.set(selectedItem.instanceSelector);\n },\n },\n {\n name: \"wrap\",\n label: \"Wrap\",\n description: \"Wrap\",\n category: \"Navigator\",\n defaultHotkeys: [\"meta+alt+g\", \"ctrl+alt+g\"],\n keepCommandPanelOpen: true,\n handler: () => {\n showWrapComponentsList();\n },\n },\n {\n name: \"unwrap\",\n description: \"Remove parent wrapper\",\n category: \"Navigator\",\n defaultHotkeys: [\"meta+shift+g\", \"ctrl+shift+g\"],\n handler: () => unwrapInstance(),\n },\n {\n name: \"convert\",\n label: \"Convert\",\n description: \"Convert component\",\n category: \"Navigator\",\n keepCommandPanelOpen: true,\n handler: () => {\n showConvertComponentsList();\n },\n },\n\n {\n name: \"pasteTailwind\",\n label: \"Paste HTML with Tailwind classes\",\n description: \"Convert Tailwind to CSS\",\n handler: async () => {\n const html = await navigator.clipboard.readText();\n const parseResult = generateFragmentFromHtml(html);\n const { skippedSelectors } = parseResult;\n let fragment: WebstudioFragment = parseResult;\n fragment = await denormalizeSrcProps(fragment);\n fragment = await generateFragmentFromTailwind(fragment);\n const result = insertWebstudioFragmentAt(fragment);\n if (skippedSelectors.length > 0) {\n builderApi.toast.info(\n `Skipped nested selectors (no matching elements): ${skippedSelectors.join(\", \")}`\n );\n }\n return result;\n },\n },\n\n // history\n\n {\n name: \"undo\",\n description: \"Undo last action\",\n category: \"General\",\n // safari use meta+z to reopen closed tabs, here added ctrl as alternative\n defaultHotkeys: [\"meta+z\", \"ctrl+z\"],\n disableOnInputLikeControls: true,\n handler: () => {\n serverSyncStore.undo();\n },\n },\n {\n name: \"redo\",\n description: \"Redo last action\",\n category: \"General\",\n // safari use meta+z to reopen closed tabs, here added ctrl as alternative\n defaultHotkeys: [\"meta+shift+z\", \"ctrl+shift+z\"],\n disableOnInputLikeControls: true,\n handler: () => {\n serverSyncStore.redo();\n },\n },\n\n {\n name: \"save\",\n description: \"Save project\",\n category: \"General\",\n defaultHotkeys: [\"meta+s\", \"ctrl+s\"],\n handler: async () => {\n toast.dismiss(\"save-success\");\n try {\n await isSyncIdle();\n toast.success(\"Project saved successfully\", { id: \"save-success\" });\n } catch (error) {\n if (error instanceof Error) {\n toast.error(error.message);\n }\n }\n },\n },\n\n {\n name: \"openCommandPanel\",\n description: \"Open command panel\",\n category: \"General\",\n defaultHotkeys: [\"meta+k\", \"ctrl+k\"],\n handler: () => {\n if ($isDesignMode.get()) {\n openCommandPanel();\n }\n },\n },\n\n {\n name: \"deleteUnusedTokens\",\n label: \"Delete unused tokens\",\n description: \"Remove unused tokens\",\n handler: () => {\n openDeleteUnusedTokensDialog();\n },\n },\n\n {\n name: \"findDuplicateTokens\",\n label: \"Find duplicate tokens\",\n description: \"Find tokens with identical styles or names\",\n handler: () => {\n // Import needed to avoid circular dependency\n import(\n \"~/builder/features/command-panel/groups/duplicate-tokens-group\"\n ).then(({ showDuplicateTokensView }) => {\n showDuplicateTokensView();\n });\n },\n },\n\n {\n name: \"deleteUnusedDataVariables\",\n label: \"Delete unused data variables\",\n description: \"Remove unused data variables\",\n handler: () => {\n openDeleteUnusedDataVariablesDialog();\n },\n },\n\n {\n name: \"deleteUnusedCssVariables\",\n label: \"Delete unused CSS variables\",\n description: \"Remove unused CSS variables\",\n handler: () => {\n openDeleteUnusedCssVariablesDialog();\n },\n },\n\n {\n name: \"deleteUnusedAssets\",\n label: \"Delete unused assets\",\n description: \"Remove unused assets\",\n handler: () => {\n openDeleteUnusedAssetsDialog();\n },\n },\n\n {\n name: \"openKeyboardShortcuts\",\n description: \"View keyboard shortcuts\",\n category: \"General\",\n defaultHotkeys: [\"shift+?\"],\n disableOnInputLikeControls: true,\n handler: () => {\n openKeyboardShortcutsDialog();\n },\n },\n ],\n});\n" }, { "path": "apps/builder/app/builder/shared/css-editor/add-style-input.tsx", "content": "import { forwardRef, useRef, useState, type KeyboardEvent } from \"react\";\nimport { matchSorter } from \"match-sorter\";\nimport {\n Box,\n ComboboxAnchor,\n ComboboxContent,\n ComboboxItemDescription,\n ComboboxListbox,\n ComboboxListboxItem,\n ComboboxRoot,\n ComboboxScrollArea,\n InputField,\n NestedInputButton,\n Text,\n theme,\n useCombobox,\n} from \"@webstudio-is/design-system\";\nimport {\n propertiesData,\n shorthandProperties,\n keywordValues,\n propertyDescriptions,\n parseCssValue,\n} from \"@webstudio-is/css-data\";\nimport {\n cssWideKeywords,\n generateStyleMap,\n mergeStyles,\n toValue,\n type CssProperty,\n} from \"@webstudio-is/css-engine\";\nimport { composeEventHandlers } from \"~/shared/event-utils\";\nimport {\n deleteProperty,\n setProperty,\n} from \"~/builder/features/style-panel/shared/use-style-data\";\nimport { $availableVariables } from \"~/builder/features/style-panel/shared/model\";\nimport { parseStyleInput } from \"./parse-style-input\";\nimport { validateCssVariableName } from \"~/builder/shared/css-variable-utils\";\nimport { toast } from \"@webstudio-is/design-system\";\n\ntype SearchItem = {\n property: string;\n label: string;\n value?: string;\n key: string;\n};\n\nconst getNewPropertyDescription = (item: null | SearchItem) => {\n let description: string | undefined = \"Add CSS property.\";\n if (item?.property.startsWith(\"--\")) {\n description = \"Create CSS variable.\";\n }\n if (item && propertyDescriptions[item.property]) {\n description = propertyDescriptions[item.property];\n }\n return {description};\n};\n\nconst getAutocompleteItems = () => {\n const autoCompleteItems: SearchItem[] = [];\n for (const varValue of $availableVariables.get()) {\n const property = `--${varValue.value}`;\n autoCompleteItems.push({\n // consider additional properties to be custom properties\n key: property,\n property,\n label: property,\n });\n }\n for (const property in propertiesData) {\n autoCompleteItems.push({\n // Allow matching \"gr te co\" -> \"grid-template-columns\"\n key: property.replaceAll(\"-\", \" \"),\n property,\n label: property,\n });\n }\n\n for (const property of shorthandProperties) {\n autoCompleteItems.push({\n // Allow matching \"gr te co\" -> \"grid-template-columns\"\n key: property.replaceAll(\"-\", \" \"),\n property,\n label: property,\n });\n }\n\n const ignoreValues = new Set([...cssWideKeywords, ...keywordValues.color]);\n\n for (const [property, values] of Object.entries(keywordValues)) {\n for (const value of values ?? []) {\n if (ignoreValues.has(value)) {\n continue;\n }\n autoCompleteItems.push({\n // Allow matching \"gr te co\" -> \"grid-template-columns\"\n key: `${property.replaceAll(\"-\", \" \")} ${value}`,\n property,\n value,\n label: `${property}: ${value}`,\n });\n }\n }\n\n autoCompleteItems.sort((a, b) =>\n Intl.Collator().compare(a.property, b.property)\n );\n\n return autoCompleteItems;\n};\n\nconst matchOrSuggestToCreate = (search: string, items: Array) => {\n const searchWithSpaces = search.startsWith(\"--\")\n ? search\n : search.replaceAll(\"-\", \" \");\n const matched = matchSorter(items, searchWithSpaces, {\n keys: [\"key\"],\n });\n\n // Limit the array to 100 elements\n matched.length = Math.min(matched.length, 100);\n\n if (matched.length === 0) {\n const parsedStyleMap = parseStyleInput(search);\n const styleMap = mergeStyles(parsedStyleMap);\n\n // When parsedStyles is more than one, user entered a shorthand.\n // We will suggest to insert their shorthand first.\n if (styleMap.size > 1) {\n matched.push({\n key: \"\",\n property: search,\n label: `Create \"${search}\"`,\n });\n }\n // Now we will suggest to insert each longhand separately.\n for (const [property, value] of styleMap) {\n matched.push({\n key: \"\",\n property,\n value: toValue(value),\n label: `Create \"${generateStyleMap(new Map([[property, value]]))}\"`,\n });\n }\n }\n\n return matched;\n};\n\n/**\n * Advanced search control supports following interactions\n *\n * - find property\n * - create custom property\n * - submit css declarations\n * - paste css declarations\n *\n */\nexport const AddStyleInput = forwardRef<\n HTMLInputElement,\n {\n onClose: () => void;\n onSubmit: (css: string) => void;\n onFocus: () => void;\n onBlur: () => void;\n }\n>(({ onClose, onSubmit, onFocus, onBlur }, forwardedRef) => {\n const [item, setItem] = useState({\n property: \"\",\n label: \"\",\n key: \"\",\n });\n const highlightedItemRef = useRef();\n\n const combobox = useCombobox({\n getItems: getAutocompleteItems,\n itemToString: (item) => item?.label ?? \"\",\n value: item,\n getItemProps: () => ({ text: \"sentence\" }),\n match: matchOrSuggestToCreate,\n onChange: (input) => {\n return setItem({\n property: input ?? \"\",\n label: input ?? \"\",\n key: input ?? \"\",\n });\n },\n onItemSelect: (item) => {\n clear();\n // When there is no value, property can be:\n // - property without value: gap\n // - declaration with value: gap: 10px\n // - block: gap: 10px; margin: 20px;\n if (item.value === undefined) {\n return onSubmit(item.property);\n }\n onSubmit(`${item.property}: ${item.value}`);\n },\n onItemHighlight: (item) => {\n const previousHighlightedItem = highlightedItemRef.current;\n if (item?.value === undefined && previousHighlightedItem) {\n deleteProperty(previousHighlightedItem.property as CssProperty, {\n isEphemeral: true,\n });\n highlightedItemRef.current = undefined;\n return;\n }\n\n if (item?.value) {\n const value = parseCssValue(item.property as CssProperty, item.value);\n setProperty(item.property as CssProperty)(value, {\n isEphemeral: true,\n });\n highlightedItemRef.current = item;\n }\n },\n });\n\n const descriptionItem = combobox.items[combobox.highlightedIndex];\n const description = getNewPropertyDescription(descriptionItem);\n const descriptions = combobox.items.map(getNewPropertyDescription);\n const inputProps = combobox.getInputProps();\n\n const clear = () => {\n setItem({ property: \"\", label: \"\", key: \"\" });\n };\n\n const handleEnter = (event: KeyboardEvent) => {\n if (event.key === \"Enter\") {\n const property = item.property.split(\":\")[0].trim();\n\n // Validate CSS variable names before creating them\n if (property.startsWith(\"--\")) {\n const error = validateCssVariableName(property);\n if (error) {\n // For duplicate variables, show warning and continue updating the values\n if (error.type === \"duplicate\") {\n toast.warn(\n `CSS variable \"${property}\" already exists. Its value will be updated.`\n );\n } else {\n // Show error via toast and block submission\n toast.error(error.message);\n return;\n }\n }\n }\n\n clear();\n onSubmit(item.property);\n }\n };\n\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n clear();\n onClose();\n }\n };\n\n const handleDelete = (event: KeyboardEvent) => {\n // When user hits backspace and there is nothing in the input - we hide the input\n if (event.key === \"Backspace\" && combobox.inputValue === \"\") {\n clear();\n onClose();\n }\n };\n\n const handleKeyDown = composeEventHandlers([\n inputProps.onKeyDown,\n handleEnter,\n handleEscape,\n handleDelete,\n ]);\n\n const handleBlur = composeEventHandlers([\n inputProps.onBlur,\n () => {\n // When user clicks on a combobox item, input will receive blur event,\n // but we don't want that to be handled upstream because input may get hidden without click getting handled.\n if (combobox.isOpen === false) {\n onBlur();\n }\n },\n ]);\n\n return (\n \n
    \n \n }\n />\n \n \n \n \n {combobox.items.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n {description && (\n \n {description}\n \n )}\n \n \n
    \n     \n );\n});\n" }, { "path": "apps/builder/app/builder/shared/css-editor/css-editor-context-menu.tsx", "content": "import { useRef, type ReactNode } from \"react\";\nimport {\n ContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuTrigger,\n theme,\n} from \"@webstudio-is/design-system\";\nimport {\n generateStyleMap,\n mergeStyles,\n toValue,\n type CssProperty,\n type CssStyleMap,\n} from \"@webstudio-is/css-engine\";\nimport type { ComputedStyleDecl } from \"~/shared/style-object-model\";\n\nexport const copyAttribute = \"data-declaration\";\n\nexport const CssEditorContextMenu = ({\n children,\n foundProperties,\n declarations,\n onPaste,\n onDeleteProperty,\n onDeleteAllDeclarations,\n}: {\n children: ReactNode;\n foundProperties: Array;\n declarations: Array;\n onPaste: (cssText: string) => void;\n onDeleteProperty: (property: CssProperty) => void;\n onDeleteAllDeclarations: (styleMap: CssStyleMap) => void;\n}) => {\n const lastClickedProperty = useRef();\n\n const handlePaste = () => {\n navigator.clipboard.readText().then(onPaste);\n };\n\n // Gets all currently visible declarations based on what's in the search or filters.\n const getAllDeclarations = () => {\n // We want to only copy properties that are currently in front of the user.\n // That includes search or any future filters.\n const currentStyleMap: CssStyleMap = new Map();\n\n for (const styleDecl of declarations) {\n const isEmpty = toValue(styleDecl.cascadedValue) === \"\";\n if (foundProperties.includes(styleDecl.property) && isEmpty === false) {\n currentStyleMap.set(styleDecl.property, styleDecl.cascadedValue);\n }\n }\n return currentStyleMap;\n };\n\n const handleCopyAll = () => {\n const styleMap = getAllDeclarations();\n const css = generateStyleMap(mergeStyles(styleMap));\n navigator.clipboard.writeText(css);\n };\n\n const handleCopy = () => {\n const property = lastClickedProperty.current as CssProperty;\n\n if (property === undefined) {\n return;\n }\n const styleDecl = declarations.find(\n (styleDecl) => styleDecl.property === property\n );\n\n if (styleDecl === undefined) {\n return;\n }\n\n const css = generateStyleMap(\n new Map([[styleDecl.property, styleDecl.cascadedValue]])\n );\n navigator.clipboard.writeText(css);\n };\n\n const handleDelete = () => {\n const property = lastClickedProperty.current as CssProperty;\n const styleDecl = declarations.find(\n (styleDecl) => styleDecl.property === property\n );\n if (styleDecl === undefined) {\n return;\n }\n onDeleteProperty(property);\n };\n\n const handleDeleteAllDeclarations = () => {\n const styleMap = getAllDeclarations();\n onDeleteAllDeclarations(styleMap);\n };\n\n return (\n \n {\n if (!(event.target instanceof HTMLElement)) {\n return;\n }\n const property =\n event.target\n .closest(`[${copyAttribute}]`)\n ?.getAttribute(copyAttribute) ?? undefined;\n\n lastClickedProperty.current = property;\n }}\n >\n {children}\n \n \n \n Copy declaration\n \n \n Copy all declarations\n \n \n Paste declarations\n \n \n Delete declaration\n \n \n Delete all declarations\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/css-editor/css-editor.stories.tsx", "content": "import { StorySection } from \"@webstudio-is/design-system\";\nimport { CssEditor as CssEditorComponent } from \"./css-editor\";\nimport type { ComputedStyleDecl } from \"~/shared/style-object-model\";\n\nexport const CSSEditor = () => {\n const declarations = [\n [\n \"background-image\",\n {\n type: \"layers\",\n value: [{ type: \"keyword\", value: \"none\" }],\n },\n ],\n [\"accent-color\", { type: \"keyword\", value: \"red\" }],\n [\"align-content\", { type: \"keyword\", value: \"normal\" }],\n [\"opacity\", { type: \"unit\", unit: \"number\", value: 11.2 }],\n ].map(([property, value]) => {\n return {\n property,\n source: { name: \"local\" },\n cascadedValue: value,\n computedValue: value,\n usedValue: value,\n } as ComputedStyleDecl;\n });\n\n return (\n \n undefined}\n onSetProperty={() => () => undefined}\n onAddDeclarations={() => undefined}\n onDeleteAllDeclarations={() => undefined}\n />\n \n );\n};\n\nexport default {\n title: \"Style panel/CSS Editor\",\n component: CSSEditor,\n};\n" }, { "path": "apps/builder/app/builder/shared/css-editor/css-editor.tsx", "content": "import { mergeRefs } from \"@react-aria/utils\";\nimport * as colorjs from \"colorjs.io/fn\";\nimport {\n memo,\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type ComponentProps,\n type RefObject,\n} from \"react\";\nimport { matchSorter } from \"match-sorter\";\nimport {\n Box,\n Flex,\n Label,\n SearchField,\n Separator,\n Text,\n theme,\n Tooltip,\n} from \"@webstudio-is/design-system\";\nimport {\n camelCaseProperty,\n keywordValues,\n propertiesData,\n propertyDescriptions,\n} from \"@webstudio-is/css-data\";\nimport {\n toValue,\n type CssProperty,\n type CssStyleMap,\n} from \"@webstudio-is/css-engine\";\n// @todo all style panel stuff needs to be moved to shared and/or decoupled from style panel\nimport { CssValueInputContainer } from \"../../features/style-panel/shared/css-value-input\";\nimport { $availableVariables } from \"../../features/style-panel/shared/model\";\nimport { PropertyInfo } from \"../../features/style-panel/property-label\";\nimport { ColorPickerPopover } from \"@webstudio-is/design-system\";\nimport { useClientSupports } from \"~/shared/client-supports\";\nimport { CssEditorContextMenu, copyAttribute } from \"./css-editor-context-menu\";\nimport { AddStyleInput } from \"./add-style-input\";\nimport { parseStyleInput } from \"./parse-style-input\";\nimport type {\n DeleteProperty,\n SetProperty,\n} from \"../../features/style-panel/shared/use-style-data\";\nimport type { ComputedStyleDecl } from \"~/shared/style-object-model\";\n\n// Used to indent the values when they are on the next line. This way its easier to see\n// where the property ends and value begins, especially in case of presets.\nconst initialIndentation = `20px`;\n\nconst AdvancedPropertyLabel = ({\n styleDecl,\n onReset,\n onDeleteProperty,\n}: {\n styleDecl: ComputedStyleDecl;\n onReset?: () => void;\n onDeleteProperty: DeleteProperty;\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const description =\n propertyDescriptions[camelCaseProperty(styleDecl.property)];\n\n return (\n event.preventDefault()}\n triggerProps={{\n onClick: (event) => {\n if (event.altKey) {\n event.preventDefault();\n onDeleteProperty(styleDecl.property);\n onReset?.();\n return;\n }\n setIsOpen(true);\n },\n }}\n content={\n {\n onDeleteProperty(styleDecl.property);\n setIsOpen(false);\n onReset?.();\n }}\n resetType=\"delete\"\n link={propertiesData[styleDecl.property]?.mdnUrl}\n />\n }\n >\n \n {styleDecl.property}\n \n \n );\n};\n\nconst AdvancedPropertyValue = ({\n styleDecl,\n onDeleteProperty,\n onSetProperty,\n onChangeComplete,\n onReset,\n inputRef: inputRefProp,\n}: {\n styleDecl: ComputedStyleDecl;\n onDeleteProperty: DeleteProperty;\n onSetProperty: SetProperty;\n onChangeComplete: ComponentProps<\n typeof CssValueInputContainer\n >[\"onChangeComplete\"];\n onReset: ComponentProps[\"onReset\"];\n inputRef?: RefObject;\n}) => {\n const inputRef = useRef(null);\n let isColor = false;\n try {\n colorjs.parse(toValue(styleDecl.usedValue));\n isColor = true;\n } catch {\n isColor = false;\n }\n\n return (\n {\n const options = { isEphemeral: true, listed: true };\n if (styleValue) {\n onSetProperty(styleDecl.property)(styleValue, options);\n } else {\n onDeleteProperty(styleDecl.property, options);\n }\n }}\n onChangeComplete={(styleValue) => {\n onSetProperty(styleDecl.property)(styleValue, { listed: true });\n }}\n />\n )\n }\n property={styleDecl.property}\n styleSource={styleDecl.source.name}\n getOptions={() => [\n ...(keywordValues[styleDecl.property] ?? []).map((value) => ({\n type: \"keyword\" as const,\n value,\n })),\n ...$availableVariables.get(),\n ]}\n value={styleDecl.cascadedValue}\n onUpdate={(styleValue, options) => {\n if (\n styleValue.type === \"keyword\" &&\n styleValue.value.startsWith(\"--\")\n ) {\n onSetProperty(styleDecl.property)(\n { type: \"var\", value: styleValue.value.slice(2) },\n { ...options, listed: true }\n );\n } else {\n onSetProperty(styleDecl.property)(styleValue, {\n ...options,\n listed: true,\n });\n }\n }}\n onDelete={(options) => onDeleteProperty(styleDecl.property, options)}\n onChangeComplete={onChangeComplete}\n onReset={onReset}\n />\n );\n};\n\n/**\n * The Advanced section in the Style Panel on Global root has performance issues.\n * To fix this, we skip rendering properties not visible in the viewport using the contentvisibilityautostatechange event,\n * and the contentVisibility and containIntrinsicSize CSS properties.\n */\nconst LazyRender = ({ children }: ComponentProps<\"div\">) => {\n const visibilityChangeEventSupported = useClientSupports(\n () => \"oncontentvisibilityautostatechange\" in document.body\n );\n const ref = useRef(null);\n const [isVisible, setIsVisible] = useState(!visibilityChangeEventSupported);\n\n useEffect(() => {\n if (!visibilityChangeEventSupported) {\n return;\n }\n\n if (ref.current == null) {\n return;\n }\n\n const controller = new AbortController();\n\n ref.current.addEventListener(\n \"contentvisibilityautostatechange\",\n (event) => {\n setIsVisible(!event.skipped);\n },\n {\n signal: controller.signal,\n }\n );\n\n return () => {\n controller.abort();\n };\n }, [visibilityChangeEventSupported]);\n\n return (\n \n {isVisible ? children : undefined}\n \n );\n};\n\nconst AdvancedDeclarationLonghand = memo(\n ({\n styleDecl,\n onChangeComplete,\n onDeleteProperty,\n onSetProperty,\n onReset,\n valueInputRef,\n indentation = initialIndentation,\n }: {\n styleDecl: ComputedStyleDecl;\n indentation?: string;\n onReset?: () => void;\n onSetProperty: SetProperty;\n onDeleteProperty: DeleteProperty;\n onChangeComplete?: ComponentProps<\n typeof CssValueInputContainer\n >[\"onChangeComplete\"];\n valueInputRef?: RefObject;\n }) => {\n return (\n \n \n \n :\n \n \n \n );\n }\n);\n\nexport const CssEditor = ({\n onDeleteProperty,\n onSetProperty,\n onAddDeclarations,\n onDeleteAllDeclarations,\n declarations,\n showSearch = true,\n virtualize = true,\n propertiesPosition = \"bottom\",\n recentProperties = [],\n showAddStyleInput,\n onToggleAddStyleInput,\n}: {\n declarations: Array;\n onDeleteProperty: DeleteProperty;\n onSetProperty: SetProperty;\n onAddDeclarations: (styleMap: CssStyleMap) => void;\n onDeleteAllDeclarations: (styleMap: CssStyleMap) => void;\n showSearch?: boolean;\n propertiesPosition?: \"top\" | \"bottom\";\n virtualize?: boolean;\n recentProperties?: Array;\n showAddStyleInput?: boolean;\n onToggleAddStyleInput?: (show: boolean) => void;\n}) => {\n const addPropertyInputRef = useRef(null);\n const lastRecentValueInputRef = useRef(null);\n const lastRegularValueInputRef = useRef(null);\n const searchInputRef = useRef(null);\n const [searchProperties, setSearchProperties] =\n useState>();\n const containerRef = useRef(null);\n\n useEffect(() => {\n if (showAddStyleInput) {\n addPropertyInputRef.current?.focus();\n }\n }, [showAddStyleInput]);\n\n const declarationsMap = new Map(\n declarations.map((decl) => [decl.property, decl])\n );\n\n const advancedProperties = declarations.map(({ property }) => property);\n\n const currentProperties =\n searchProperties ??\n advancedProperties.filter(\n (property) => recentProperties.includes(property) === false\n );\n\n const showRecentProperties =\n recentProperties.length > 0 && searchProperties === undefined;\n\n const handleInsertStyles = (cssText: string) => {\n const styleMap = parseStyleInput(cssText);\n if (styleMap.size === 0) {\n return new Map();\n }\n onAddDeclarations(styleMap);\n return styleMap;\n };\n\n const handleAbortSearch = () => {\n if (containerRef.current) {\n containerRef.current.style.minHeight = \"auto\";\n }\n setSearchProperties(undefined);\n };\n\n const handleSearch = (event: ChangeEvent) => {\n const search = event.target.value.trim().replaceAll(\"-\", \" \");\n\n if (search === \"\") {\n return handleAbortSearch();\n }\n // This keeps container height big enough to avoid scroll position jumping around while user types.\n if (containerRef.current) {\n containerRef.current.style.height = `${window.innerHeight}px`;\n // Min height is needed as long as the search is active.\n containerRef.current.style.minHeight = `${window.innerHeight}px`;\n requestAnimationFrame(() => {\n // We can't keep it permanently because we need user to see all of the content.\n // Fixed height only needed temporarily while react rerenders the tree to avoid jumps.\n if (containerRef.current) {\n containerRef.current.style.height = \"auto\";\n }\n });\n }\n\n const styles = declarations.map(({ property, cascadedValue }) => {\n return {\n key: `${property.replaceAll(\"-\", \" \")} ${toValue(cascadedValue)}`,\n property,\n };\n });\n\n const matched = matchSorter(styles, search, {\n keys: [\"key\"],\n }).map(({ property }) => property);\n\n setSearchProperties(matched);\n };\n\n const afterChangingStyles = () => {\n onToggleAddStyleInput?.(false);\n requestAnimationFrame(() => {\n // We are either focusing the last value input from the recent list if available or the search input.\n const element =\n lastRecentValueInputRef.current ??\n lastRegularValueInputRef.current ??\n searchInputRef.current;\n\n element?.focus();\n element?.select();\n });\n };\n\n const handleDeleteProperty: DeleteProperty = (property, options = {}) => {\n onDeleteProperty(property, options);\n if (options.isEphemeral === true) {\n return;\n }\n setSearchProperties(\n searchProperties?.filter((searchProperty) => searchProperty !== property)\n );\n };\n\n const handleDeleteAllDeclarations = (styleMap: CssStyleMap) => {\n setSearchProperties(\n searchProperties?.filter(\n (searchProperty) => styleMap.has(searchProperty) === false\n )\n );\n onDeleteAllDeclarations(styleMap);\n };\n\n const recentPropertiesAndAddStyleInput = (\n \n {showRecentProperties &&\n recentProperties.map((property) => {\n const styleDecl = declarationsMap.get(property);\n if (styleDecl === undefined) {\n return;\n }\n return (\n {\n if (event.type === \"enter\") {\n onToggleAddStyleInput?.(true);\n }\n }}\n onReset={afterChangingStyles}\n onDeleteProperty={handleDeleteProperty}\n onSetProperty={onSetProperty}\n />\n );\n })}\n \n {\n const styles = handleInsertStyles(cssText);\n if (styles.size > 0) {\n afterChangingStyles();\n }\n }}\n onClose={afterChangingStyles}\n onFocus={() => {\n onToggleAddStyleInput?.(true);\n }}\n onBlur={() => {\n onToggleAddStyleInput?.(false);\n }}\n ref={addPropertyInputRef}\n />\n \n \n );\n\n return (\n \n {showSearch && (\n \n \n \n )}\n \n \n {propertiesPosition === \"bottom\" && (\n <>\n {recentPropertiesAndAddStyleInput}\n {showRecentProperties && }\n \n )}\n \n {currentProperties.map((property) => {\n const styleDecl = declarationsMap.get(property);\n if (styleDecl === undefined) {\n return;\n }\n\n const declarationElement = (\n \n );\n // When using it in keyframes with layout where delcarations are on top of add input button,\n // we need to focus last added value, but the logic for waiting for the last rendered event would add up complexity.\n // For now we just manually avoid virtualization in this layout.\n if (virtualize) {\n return (\n {declarationElement}\n );\n }\n return declarationElement;\n })}\n \n {propertiesPosition === \"top\" && (\n <>\n {showRecentProperties && }\n {recentPropertiesAndAddStyleInput}\n \n )}\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/css-editor/index.ts", "content": "export { CssEditor } from \"./css-editor\";\n" }, { "path": "apps/builder/app/builder/shared/css-editor/parse-style-input.test.ts", "content": "import { describe, test, expect } from \"vitest\";\nimport { parseStyleInput } from \"./parse-style-input\";\n\ndescribe(\"parseStyleInput\", () => {\n test(\"parses custom property\", () => {\n const result = parseStyleInput(\"--custom-color\");\n expect(result).toEqual(\n new Map([[\"--custom-color\", { type: \"unparsed\", value: \"\" }]])\n );\n });\n\n test(\"parses longhand property\", () => {\n const result = parseStyleInput(\"color\");\n expect(result).toEqual(\n new Map([[\"color\", { type: \"keyword\", value: \"unset\" }]])\n );\n });\n\n test(\"parses shorthand property\", () => {\n const result = parseStyleInput(\"margin\");\n expect(result).toEqual(\n new Map([\n [\"margin-top\", { type: \"keyword\", value: \"unset\" }],\n [\"margin-right\", { type: \"keyword\", value: \"unset\" }],\n [\"margin-bottom\", { type: \"keyword\", value: \"unset\" }],\n [\"margin-left\", { type: \"keyword\", value: \"unset\" }],\n ])\n );\n });\n\n test(\"trims whitespace\", () => {\n const result = parseStyleInput(\" color \");\n expect(result).toEqual(\n new Map([[\"color\", { type: \"keyword\", value: \"unset\" }]])\n );\n });\n\n test(\"handles unparsable regular property\", () => {\n const result = parseStyleInput(\"notapro perty\");\n expect(result).toEqual(new Map());\n });\n\n test(\"converts unknown property to custom property assuming user forgot to add --\", () => {\n const result = parseStyleInput(\"notaproperty\");\n expect(result).toEqual(\n new Map([[\"--notaproperty\", { type: \"unparsed\", value: \"\" }]])\n );\n });\n\n test(\"parses single property-value pair\", () => {\n const result = parseStyleInput(\"color: red\");\n expect(result).toEqual(\n new Map([[\"color\", { type: \"keyword\", value: \"red\" }]])\n );\n });\n\n test(\"parses multiple property-value pairs\", () => {\n const result = parseStyleInput(\"color: red; display: block\");\n expect(result).toEqual(\n new Map([\n [\"color\", { type: \"keyword\", value: \"red\" }],\n [\"display\", { type: \"keyword\", value: \"block\" }],\n ])\n );\n });\n\n test(\"parses multiple property-value pairs, one is invalid\", () => {\n const result = parseStyleInput(\"color: red; somethinginvalid: block\");\n expect(result).toEqual(\n new Map([\n [\"color\", { type: \"keyword\", value: \"red\" }],\n [\"--somethinginvalid\", { type: \"unparsed\", value: \"block\" }],\n ])\n );\n });\n\n test(\"parses custom property with value\", () => {\n const result = parseStyleInput(\"--custom-color: red\");\n expect(result).toEqual(\n new Map([[\"--custom-color\", { type: \"unparsed\", value: \"red\" }]])\n );\n });\n\n test(\"handles malformed style block\", () => {\n const result = parseStyleInput(\"color: red; invalid;\");\n expect(result).toEqual(\n new Map([[\"color\", { type: \"keyword\", value: \"red\" }]])\n );\n });\n\n test(\"output property with invalid value\", () => {\n const result = parseStyleInput(\"rotate: z 0;\");\n expect(result).toEqual(\n new Map([[\"rotate\", { type: \"invalid\", value: \"z 0\" }]])\n );\n });\n\n test(\"preserves -webkit-text-stroke as shorthand property, not as CSS variable\", () => {\n const result = parseStyleInput(\"-webkit-text-stroke: 1px red\");\n expect(result).toEqual(\n new Map([\n [\n \"-webkit-text-stroke\",\n {\n type: \"tuple\",\n value: [\n { type: \"unit\", unit: \"px\", value: 1 },\n { type: \"keyword\", value: \"red\" },\n ],\n },\n ],\n ])\n );\n });\n});\n" }, { "path": "apps/builder/app/builder/shared/css-editor/parse-style-input.ts", "content": "import {\n propertiesData,\n parseCss,\n shorthandProperties,\n} from \"@webstudio-is/css-data\";\nimport { type CssProperty, type CssStyleMap } from \"@webstudio-is/css-engine\";\nimport { lexer } from \"css-tree\";\n\n// When user provides only a property name, we need to make it `property:;` to be able to parse it.\nconst ensureValue = (css: string) => {\n css = css.trim();\n\n // Is it a custom property \"--foo\"?\n if (css.startsWith(\"--\") && lexer.match(\"\", css).matched) {\n return `${css}:;`;\n }\n // Is it a known longhand property?\n if (propertiesData[css as CssProperty]) {\n return `${css}:;`;\n }\n // Is it a known shorthand property?\n if (\n shorthandProperties.includes(css as (typeof shorthandProperties)[number])\n ) {\n return `${css}:;`;\n }\n // Is it a custom property without dashes \"--foo\"?\n if (lexer.match(\"\", `--${css}`).matched) {\n return `--${css}:;`;\n }\n\n return css;\n};\n\n/**\n * Does several attempts to parse:\n * - Custom property \"--foo\"\n * - Known regular property \"color\"\n * - Custom property without -- (user forgot to add)\n * - Custom property and value: --foo: red\n * - Property and value: color: red\n * - Multiple properties: color: red; background: blue\n */\nexport const parseStyleInput = (css: string): CssStyleMap => {\n css = ensureValue(css);\n const styles = parseCss(`selector{${css}}`);\n const styleMap: CssStyleMap = new Map();\n for (const { property, value } of styles) {\n if (property.startsWith(\"--\")) {\n styleMap.set(property, value);\n continue;\n }\n // somethingunknown: red; -> --somethingunknown: red;\n // but keep known shorthands like -webkit-text-stroke as-is\n if (\n propertiesData[property] === undefined &&\n shorthandProperties.includes(\n property as (typeof shorthandProperties)[number]\n ) === false\n ) {\n styleMap.set(`--${property}`, value);\n continue;\n }\n // @todo This should be returning { type: \"guaranteedInvalid\" }\n styleMap.set(property, value);\n }\n return styleMap;\n};\n" }, { "path": "apps/builder/app/builder/shared/css-variable-utils.test.tsx", "content": "import { test, expect, describe } from \"vitest\";\nimport { atom } from \"nanostores\";\nimport type { StyleDecl, Styles, Prop } from \"@webstudio-is/sdk\";\nimport type { StyleProperty, StyleValue } from \"@webstudio-is/css-engine\";\nimport { parseCssValue } from \"@webstudio-is/css-data\";\nimport { $styles } from \"~/shared/sync/data-stores\";\nimport {\n findCssVariableUsagesByInstance,\n validateCssVariableName,\n performCssVariableRename,\n updateVarReferencesInProps,\n} from \"./css-variable-utils\";\n\n// Mock the nano-states module\nconst mockStyles = atom(new Map());\n\n// Replace the actual store with our mock\nObject.defineProperty($styles, \"get\", {\n value: () => mockStyles.get(),\n});\n\n// Helper to create a StyleDecl\nconst createStyleDecl = (\n styleSourceId: string,\n breakpointId: string,\n property: string,\n value: string\n): StyleDecl => ({\n styleSourceId,\n breakpointId,\n property: property as StyleProperty,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value: parseCssValue(property as any, value),\n});\n\ndescribe(\"validateCssVariableName\", () => {\n test(\"returns required error for empty name\", () => {\n mockStyles.set(new Map());\n\n const error = validateCssVariableName(\"\");\n expect(error).toEqual({\n type: \"required\",\n message: \"CSS variable name cannot be empty\",\n });\n });\n\n test(\"returns required error for whitespace-only name\", () => {\n mockStyles.set(new Map());\n\n const error = validateCssVariableName(\" \");\n expect(error).toEqual({\n type: \"required\",\n message: \"CSS variable name cannot be empty\",\n });\n });\n\n test(\"returns invalid error for name without --\", () => {\n mockStyles.set(new Map());\n\n const error = validateCssVariableName(\"my-color\");\n expect(error).toEqual({\n type: \"invalid\",\n message: 'CSS variable name must start with \"--\"',\n });\n });\n\n test(\"returns undefined for valid unique name\", () => {\n const styles = new Map([\n [\n \"local1:base:--existing::\",\n createStyleDecl(\"local1\", \"base\", \"--existing\", \"red\"),\n ],\n ]);\n mockStyles.set(styles);\n\n const error = validateCssVariableName(\"--new-color\");\n expect(error).toBeUndefined();\n });\n\n test(\"returns duplicate error for existing name\", () => {\n const styles = new Map([\n [\n \"local1:base:--my-color::\",\n createStyleDecl(\"local1\", \"base\", \"--my-color\", \"red\"),\n ],\n ]);\n mockStyles.set(styles);\n\n const error = validateCssVariableName(\"--my-color\");\n expect(error).toEqual({\n type: \"duplicate\",\n message: 'CSS variable \"--my-color\" already exists',\n });\n });\n\n test(\"allows renaming variable to same name\", () => {\n const styles = new Map([\n [\n \"local1:base:--my-color::\",\n createStyleDecl(\"local1\", \"base\", \"--my-color\", \"red\"),\n ],\n ]);\n mockStyles.set(styles);\n\n const error = validateCssVariableName(\"--my-color\", \"--my-color\");\n expect(error).toBeUndefined();\n });\n});\n\ndescribe(\"findCssVariableUsagesByInstance\", () => {\n test(\"does not track definitions\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--my-color::\",\n createStyleDecl(\"local1\", \"base\", \"--my-color\", \"red\"),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Should not track definitions, only var() references\n expect(counts.size).toBe(0);\n expect(instances.size).toBe(0);\n });\n\n test(\"tracks var() references\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n [\n \"box2\",\n {\n instanceId: \"box2\",\n values: [\"local2\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--primary-color::\",\n createStyleDecl(\"local1\", \"base\", \"--primary-color\", \"blue\"),\n ],\n [\n \"local2:base:color::\",\n createStyleDecl(\"local2\", \"base\", \"color\", \"var(--primary-color)\"),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.size).toBe(1);\n expect(counts.get(\"--primary-color\")).toBe(1);\n expect(instances.get(\"--primary-color\")).toEqual(new Set([\"box2\"]));\n });\n\n test(\"tracks only var() references not definitions\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n [\n \"box2\",\n {\n instanceId: \"box2\",\n values: [\"local2\"],\n },\n ],\n [\n \"box3\",\n {\n instanceId: \"box3\",\n values: [\"local3\"],\n },\n ],\n ]);\n\n const styles = new Map([\n // box1 defines --color\n [\n \"local1:base:--color::\",\n createStyleDecl(\"local1\", \"base\", \"--color\", \"red\"),\n ],\n // box2 uses --color\n [\n \"local2:base:backgroundColor::\",\n createStyleDecl(\"local2\", \"base\", \"backgroundColor\", \"var(--color)\"),\n ],\n // box3 defines and uses --color\n [\n \"local3:base:--color::\",\n createStyleDecl(\"local3\", \"base\", \"--color\", \"blue\"),\n ],\n [\n \"local3:base:color::\",\n createStyleDecl(\"local3\", \"base\", \"color\", \"var(--color)\"),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.size).toBe(1);\n expect(counts.get(\"--color\")).toBe(2);\n // Only box2 and box3 use var(--color), box1 only defines it\n expect(instances.get(\"--color\")).toEqual(new Set([\"box2\", \"box3\"]));\n });\n\n test(\"handles multiple variables\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--color::\",\n createStyleDecl(\"local1\", \"base\", \"--color\", \"red\"),\n ],\n [\n \"local1:base:--size::\",\n createStyleDecl(\"local1\", \"base\", \"--size\", \"16px\"),\n ],\n [\n \"local1:base:fontSize::\",\n createStyleDecl(\"local1\", \"base\", \"fontSize\", \"var(--size)\"),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.size).toBe(1);\n // --color is only defined, not used\n expect(counts.get(\"--color\")).toBeUndefined();\n // --size is used via var()\n expect(counts.get(\"--size\")).toBe(1);\n expect(instances.get(\"--size\")).toEqual(new Set([\"box1\"]));\n });\n\n test(\"distinguishes between definition and usage\", () => {\n const styleSourceSelections = new Map([\n [\n \"definer\",\n {\n instanceId: \"definer\",\n values: [\"definerLocal\"],\n },\n ],\n [\n \"user\",\n {\n instanceId: \"user\",\n values: [\"userLocal\"],\n },\n ],\n ]);\n\n const styles = new Map([\n // definer instance defines the variable\n [\n \"definerLocal:base:--theme-color::\",\n createStyleDecl(\"definerLocal\", \"base\", \"--theme-color\", \"blue\"),\n ],\n // user instance uses the variable\n [\n \"userLocal:base:color::\",\n createStyleDecl(\"userLocal\", \"base\", \"color\", \"var(--theme-color)\"),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.size).toBe(1);\n expect(counts.get(\"--theme-color\")).toBe(1);\n // Should only track the user, not the definer\n expect(instances.get(\"--theme-color\")).toEqual(new Set([\"user\"]));\n expect(instances.get(\"--theme-color\")?.has(\"definer\")).toBe(false);\n });\n\n test(\"counts multiple references on same instance\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--spacing::\",\n createStyleDecl(\"local1\", \"base\", \"--spacing\", \"16px\"),\n ],\n // Same instance uses the variable three times\n [\n \"local1:base:marginTop::\",\n createStyleDecl(\"local1\", \"base\", \"marginTop\", \"var(--spacing)\"),\n ],\n [\n \"local1:base:marginBottom::\",\n createStyleDecl(\"local1\", \"base\", \"marginBottom\", \"var(--spacing)\"),\n ],\n [\n \"local1:base:padding::\",\n createStyleDecl(\"local1\", \"base\", \"padding\", \"var(--spacing)\"),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.size).toBe(1);\n // Should count all 3 usages, not just 1\n expect(counts.get(\"--spacing\")).toBe(3);\n // But only 1 instance\n expect(instances.get(\"--spacing\")).toEqual(new Set([\"box1\"]));\n });\n\n test(\"handles unparsed values with var()\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n // parseCssValue returns unparsed type for calc() expressions\n // Now we DO track var() inside unparsed strings\n const styles = new Map([\n [\n \"local1:base:--spacing::\",\n createStyleDecl(\"local1\", \"base\", \"--spacing\", \"16px\"),\n ],\n [\n \"local1:base:width::\",\n createStyleDecl(\"local1\", \"base\", \"width\", \"calc(var(--spacing) * 2)\"),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Should track var() references inside unparsed calc() expressions\n expect(counts.size).toBe(1);\n expect(counts.get(\"--spacing\")).toBe(1);\n expect(instances.get(\"--spacing\")).toEqual(new Set([\"box1\"]));\n });\n\n test(\"tracks var() inside calc() function\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--test1::\",\n createStyleDecl(\"local1\", \"base\", \"--test1\", \"10px\"),\n ],\n [\n \"local1:base:width::\",\n createStyleDecl(\"local1\", \"base\", \"width\", \"calc(var(--test1))\"),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Should track var() references inside calc() expressions\n expect(counts.size).toBe(1);\n expect(counts.get(\"--test1\")).toBe(1);\n expect(instances.get(\"--test1\")).toEqual(new Set([\"box1\"]));\n });\n\n test(\"tracks var() inside complex calc() with multiple variables\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--spacing::\",\n createStyleDecl(\"local1\", \"base\", \"--spacing\", \"10px\"),\n ],\n [\n \"local1:base:--multiplier::\",\n createStyleDecl(\"local1\", \"base\", \"--multiplier\", \"2\"),\n ],\n [\n \"local1:base:width::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"width\",\n \"calc(var(--spacing) * var(--multiplier))\"\n ),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.size).toBe(2);\n expect(counts.get(\"--spacing\")).toBe(1);\n expect(counts.get(\"--multiplier\")).toBe(1);\n expect(instances.get(\"--spacing\")).toEqual(new Set([\"box1\"]));\n expect(instances.get(\"--multiplier\")).toEqual(new Set([\"box1\"]));\n });\n\n test(\"tracks var() with fallback values\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--primary-color::\",\n createStyleDecl(\"local1\", \"base\", \"--primary-color\", \"red\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"color\",\n \"var(--primary-color, blue)\"\n ),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--primary-color\")).toBe(1);\n expect(instances.get(\"--primary-color\")).toEqual(new Set([\"box1\"]));\n });\n\n test(\"tracks var() with nested fallbacks\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--primary::\",\n createStyleDecl(\"local1\", \"base\", \"--primary\", \"blue\"),\n ],\n [\n \"local1:base:--secondary::\",\n createStyleDecl(\"local1\", \"base\", \"--secondary\", \"green\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"color\",\n \"var(--primary, var(--secondary, red))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--primary\")).toBe(1);\n expect(counts.get(\"--secondary\")).toBe(1);\n });\n\n test(\"tracks var() with CSS variable as fallback (var(--primary, --fallback))\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--primary::\",\n createStyleDecl(\"local1\", \"base\", \"--primary\", \"blue\"),\n ],\n [\n \"local1:base:--fallback::\",\n createStyleDecl(\"local1\", \"base\", \"--fallback\", \"red\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"color\",\n \"var(--primary, --fallback)\"\n ),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Both the primary and fallback variable should be tracked\n expect(counts.get(\"--primary\")).toBe(1);\n expect(counts.get(\"--fallback\")).toBe(1);\n expect(instances.get(\"--primary\")).toEqual(new Set([\"box1\"]));\n expect(instances.get(\"--fallback\")).toEqual(new Set([\"box1\"]));\n });\n\n test(\"tracks multiple var() with variable fallbacks in same value\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--color1::\",\n createStyleDecl(\"local1\", \"base\", \"--color1\", \"red\"),\n ],\n [\n \"local1:base:--color2::\",\n createStyleDecl(\"local1\", \"base\", \"--color2\", \"blue\"),\n ],\n [\n \"local1:base:--fallback1::\",\n createStyleDecl(\"local1\", \"base\", \"--fallback1\", \"yellow\"),\n ],\n [\n \"local1:base:--fallback2::\",\n createStyleDecl(\"local1\", \"base\", \"--fallback2\", \"green\"),\n ],\n [\n \"local1:base:background::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"background\",\n \"linear-gradient(var(--color1, --fallback1), var(--color2, --fallback2))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--color1\")).toBe(1);\n expect(counts.get(\"--color2\")).toBe(1);\n expect(counts.get(\"--fallback1\")).toBe(1);\n expect(counts.get(\"--fallback2\")).toBe(1);\n });\n\n test(\"tracks deeply nested var() with variable fallbacks\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--first::\",\n createStyleDecl(\"local1\", \"base\", \"--first\", \"value\"),\n ],\n [\n \"local1:base:--second::\",\n createStyleDecl(\"local1\", \"base\", \"--second\", \"value\"),\n ],\n [\n \"local1:base:--third::\",\n createStyleDecl(\"local1\", \"base\", \"--third\", \"value\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"color\",\n \"var(--first, var(--second, --third))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--first\")).toBe(1);\n expect(counts.get(\"--second\")).toBe(1);\n expect(counts.get(\"--third\")).toBe(1);\n });\n\n test(\"tracks variables in gradient\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--angle::\",\n createStyleDecl(\"local1\", \"base\", \"--angle\", \"45deg\"),\n ],\n [\n \"local1:base:--color1::\",\n createStyleDecl(\"local1\", \"base\", \"--color1\", \"red\"),\n ],\n [\n \"local1:base:--color2::\",\n createStyleDecl(\"local1\", \"base\", \"--color2\", \"blue\"),\n ],\n [\n \"local1:base:backgroundImage::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"backgroundImage\",\n \"linear-gradient(var(--angle), var(--color1), var(--color2))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--angle\")).toBe(1);\n expect(counts.get(\"--color1\")).toBe(1);\n expect(counts.get(\"--color2\")).toBe(1);\n });\n\n test(\"tracks variables with hyphens and numbers\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--spacing-level-1::\",\n createStyleDecl(\"local1\", \"base\", \"--spacing-level-1\", \"10px\"),\n ],\n [\n \"local1:base:padding::\",\n createStyleDecl(\"local1\", \"base\", \"padding\", \"var(--spacing-level-1)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--spacing-level-1\")).toBe(1);\n });\n\n test(\"does not track variable definitions as usages\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--primary-color::\",\n createStyleDecl(\"local1\", \"base\", \"--primary-color\", \"blue\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Defining --primary-color should not count as using it\n expect(counts.size).toBe(0);\n });\n\n test(\"tracks var() in HTML Embed code\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--primary-color::\",\n createStyleDecl(\"local1\", \"base\", \"--primary-color\", \"blue\"),\n ],\n [\n \"local1:base:--bg-color::\",\n createStyleDecl(\"local1\", \"base\", \"--bg-color\", \"white\"),\n ],\n ]);\n\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"box1\",\n type: \"string\" as const,\n name: \"code\",\n value: ``,\n },\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props,\n });\n\n expect(counts.get(\"--primary-color\")).toBe(1);\n expect(counts.get(\"--bg-color\")).toBe(1);\n expect(instances.get(\"--primary-color\")?.has(\"box1\")).toBe(true);\n expect(instances.get(\"--bg-color\")?.has(\"box1\")).toBe(true);\n });\n});\n\ndescribe(\"performCssVariableRename\", () => {\n test(\"updates property declarations\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:--my-color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--my-color\" as StyleProperty,\n value: { type: \"keyword\", value: \"red\" },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--my-color\",\n \"--new-color\"\n );\n\n expect(result.size).toBe(1);\n const [decl] = Array.from(result.values());\n expect(decl.property).toBe(\"--new-color\");\n expect(decl.value).toEqual({ type: \"keyword\", value: \"red\" });\n });\n\n test(\"updates var() references\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:--my-color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--my-color\" as StyleProperty,\n value: { type: \"keyword\", value: \"red\" },\n },\n ],\n [\n \"styleSourceId:base:color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"color\" as StyleProperty,\n value: { type: \"var\", value: \"my-color\" },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--my-color\",\n \"--new-color\"\n );\n\n expect(result.size).toBe(2);\n const colorDecl = Array.from(result.values()).find(\n (d) => d.property === \"color\"\n );\n expect(colorDecl?.value).toEqual({ type: \"var\", value: \"new-color\" });\n });\n\n test(\"updates nested var() references\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:transform\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"transform\" as StyleProperty,\n value: {\n type: \"function\",\n name: \"rotate\",\n args: {\n type: \"var\",\n value: \"rotation-angle\",\n },\n } as StyleValue,\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--rotation-angle\",\n \"--angle\"\n );\n\n const transformDecl = Array.from(result.values())[0];\n expect(transformDecl.value).toMatchObject({\n type: \"function\",\n name: \"rotate\",\n args: {\n type: \"var\",\n value: \"angle\",\n },\n });\n });\n\n test(\"updates array of var() references\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:boxShadow\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"boxShadow\" as StyleProperty,\n value: {\n type: \"tuple\",\n value: [\n { type: \"var\", value: \"shadow-x\" },\n { type: \"var\", value: \"shadow-y\" },\n { type: \"var\", value: \"shadow-color\" },\n ],\n },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--shadow-color\",\n \"--color-shadow\"\n );\n\n const shadowDecl = Array.from(result.values())[0];\n expect(shadowDecl.value).toMatchObject({\n type: \"tuple\",\n value: [\n { type: \"var\", value: \"shadow-x\" },\n { type: \"var\", value: \"shadow-y\" },\n { type: \"var\", value: \"color-shadow\" },\n ],\n });\n });\n\n test(\"updates var() with keyword fallback (fallback unchanged)\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"color\" as StyleProperty,\n value: {\n type: \"var\",\n value: \"primary\",\n fallback: { type: \"keyword\", value: \"blue\" },\n },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--primary\",\n \"--primary-color\"\n );\n\n const colorDecl = Array.from(result.values())[0];\n expect(colorDecl.value).toMatchObject({\n type: \"var\",\n value: \"primary-color\",\n fallback: { type: \"keyword\", value: \"blue\" },\n });\n });\n\n test(\"updates primary variable when it has a fallback\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"color\" as StyleProperty,\n value: {\n type: \"var\",\n value: \"old-primary\",\n fallback: { type: \"keyword\", value: \"blue\" },\n } as StyleValue,\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--old-primary\",\n \"--new-primary\"\n );\n\n const colorDecl = Array.from(result.values())[0];\n expect(colorDecl.value).toMatchObject({\n type: \"var\",\n value: \"new-primary\",\n fallback: { type: \"keyword\", value: \"blue\" },\n });\n });\n\n test(\"updates var() primary value when it has a keyword fallback\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"color\" as StyleProperty,\n value: {\n type: \"var\",\n value: \"theme-color\",\n fallback: { type: \"keyword\", value: \"blue\" },\n },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--theme-color\",\n \"--brand-color\"\n );\n\n const colorDecl = Array.from(result.values())[0];\n expect(colorDecl.value).toMatchObject({\n type: \"var\",\n value: \"brand-color\",\n fallback: { type: \"keyword\", value: \"blue\" },\n });\n });\n\n test(\"handles multiple declarations of same variable\", () => {\n const styles = new Map([\n [\n \"styleSourceId1:base:--my-var\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId1\",\n property: \"--my-var\" as StyleProperty,\n value: { type: \"keyword\", value: \"value1\" },\n },\n ],\n [\n \"styleSourceId2:base:--my-var\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId2\",\n property: \"--my-var\" as StyleProperty,\n value: { type: \"keyword\", value: \"value2\" },\n },\n ],\n ]);\n\n const result = performCssVariableRename(styles, \"--my-var\", \"--renamed\");\n\n expect(result.size).toBe(2);\n const decls = Array.from(result.values());\n expect(decls.every((d) => d.property === \"--renamed\")).toBe(true);\n });\n\n test(\"does not modify unrelated variables\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:--my-color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--my-color\" as StyleProperty,\n value: { type: \"keyword\", value: \"red\" },\n },\n ],\n [\n \"styleSourceId:base:--other-color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--other-color\" as StyleProperty,\n value: { type: \"keyword\", value: \"blue\" },\n },\n ],\n [\n \"styleSourceId:base:color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"color\" as StyleProperty,\n value: { type: \"var\", value: \"other-color\" },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--my-color\",\n \"--new-color\"\n );\n\n expect(result.size).toBe(3);\n const otherColorDecl = Array.from(result.values()).find(\n (d) => d.property === \"--other-color\"\n );\n expect(otherColorDecl?.property).toBe(\"--other-color\");\n\n const colorDecl = Array.from(result.values()).find(\n (d) => d.property === \"color\"\n );\n expect(colorDecl?.value).toEqual({ type: \"var\", value: \"other-color\" });\n });\n\n test(\"handles values with no references\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:--my-color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--my-color\" as StyleProperty,\n value: { type: \"keyword\", value: \"red\" },\n },\n ],\n [\n \"styleSourceId:base:fontSize\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"fontSize\" as StyleProperty,\n value: { type: \"unit\", value: 16, unit: \"px\" },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--my-color\",\n \"--new-color\"\n );\n\n expect(result.size).toBe(2);\n const fontSizeDecl = Array.from(result.values()).find(\n (d) => d.property === \"fontSize\"\n );\n // Value should be unchanged\n expect(fontSizeDecl?.value).toEqual({\n type: \"unit\",\n value: 16,\n unit: \"px\",\n });\n });\n});\n\ndescribe(\"renameCssVariable\", () => {\n test(\"updates var() references in HTML Embed code\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"embed1\",\n name: \"code\",\n type: \"string\" as const,\n value: ``,\n },\n ],\n ]);\n\n const oldProperty = \"--theme-color\";\n const newProperty = \"--brand-color\";\n\n // Simulate the rename logic for props\n const regex = new RegExp(\n `var\\\\(\\\\s*${oldProperty.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")}\\\\b`,\n \"g\"\n );\n const prop = props.get(\"prop1\");\n const updatedValue = prop!.value.replace(regex, `var(${newProperty}`);\n\n // Verify both occurrences were replaced\n expect(updatedValue).toContain(\"var(--brand-color)\");\n expect(updatedValue).not.toContain(\"var(--theme-color)\");\n expect(updatedValue).toContain(\"var(--brand-color, blue)\");\n\n // Verify the original had the old name\n expect(prop!.value).toContain(\"var(--theme-color)\");\n });\n});\n\ndescribe(\"updateVarReferencesInProps\", () => {\n test(\"updates single var() reference in HTML Embed code\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: '
    Text
    ',\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(\n props,\n \"--primary\",\n \"--main-color\"\n );\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\n '
    Text
    '\n );\n expect(prop!.value).not.toContain(\"--primary\");\n });\n\n test(\"updates multiple occurrences in same prop\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"var(--color) and var(--color, red)\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--color\", \"--new-color\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\"var(--new-color) and var(--new-color, red)\");\n expect(prop!.value).not.toContain(\"var(--color\");\n });\n\n test(\"preserves fallback values\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"var(--bg, #fff)\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--bg\", \"--background\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\"var(--background, #fff)\");\n });\n\n test(\"updates var() with CSS variable fallback\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"color: var(--primary, --fallback);\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--fallback\", \"--default\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\"color: var(--primary, --default);\");\n });\n\n test(\"updates primary in var() with CSS variable fallback\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"color: var(--primary, --fallback);\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--primary\", \"--main\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\"color: var(--main, --fallback);\");\n });\n\n test(\"updates multiple variables in var() with multiple fallbacks\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value:\n \"background: linear-gradient(var(--color1, --fb1), var(--color2, --fb2));\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--color1\", \"--primary\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\n \"background: linear-gradient(var(--primary, --fb1), var(--color2, --fb2));\"\n );\n });\n\n test(\"updates nested var() with variable fallbacks\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"color: var(--first, var(--second, --third));\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--second\", \"--backup\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\"color: var(--first, var(--backup, --third));\");\n });\n\n test(\"handles special regex characters in variable name\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"var(--color-$special)\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(\n props,\n \"--color-$special\",\n \"--normal\"\n );\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\"var(--normal)\");\n });\n\n test(\"does not update when no matches found\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"var(--other)\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--primary\", \"--main\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\"var(--other)\");\n });\n\n test(\"ignores non-code props\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"className\",\n type: \"string\",\n value: \"var(--color)\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--color\", \"--new-color\");\n const prop = result.get(\"prop1\");\n\n // Should not be updated because name is not \"code\"\n expect(prop!.value).toBe(\"var(--color)\");\n });\n\n test(\"handles empty props map\", () => {\n const props = new Map();\n\n const result = updateVarReferencesInProps(props, \"--primary\", \"--main\");\n\n expect(result.size).toBe(0);\n });\n\n test(\"handles prop with empty value\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--color\", \"--new-color\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\"\");\n });\n\n test(\"handles whitespace variations in var()\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"var( --spacing ) and var( --spacing, 10px)\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(\n props,\n \"--spacing\",\n \"--new-spacing\"\n );\n const prop = result.get(\"prop1\");\n\n // Simple regex replacement preserves whitespace\n expect(prop!.value).toBe(\n \"var( --new-spacing ) and var( --new-spacing, 10px)\"\n );\n });\n\n test(\"uses lookahead to avoid partial matches\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \"var(--color) and var(--color-dark)\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--color\", \"--primary\");\n const prop = result.get(\"prop1\");\n\n // Only --color should be updated, not --color-dark (lookahead ensures complete match)\n expect(prop!.value).toBe(\"var(--primary) and var(--color-dark)\");\n });\n});\n\ndescribe(\"findCssVariableUsagesByInstance - edge cases and malformed syntax\", () => {\n test(\"tracks variables with extra whitespace\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--spacing::\",\n createStyleDecl(\"local1\", \"base\", \"--spacing\", \"10px\"),\n ],\n [\n \"local1:base:padding::\",\n createStyleDecl(\"local1\", \"base\", \"padding\", \"var( --spacing )\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--spacing\")).toBe(1);\n });\n\n test(\"tracks variables without spaces after var(\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--color::\",\n createStyleDecl(\"local1\", \"base\", \"--color\", \"red\"),\n ],\n [\n \"local1:base:backgroundColor::\",\n createStyleDecl(\"local1\", \"base\", \"backgroundColor\", \"var(--color)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--color\")).toBe(1);\n });\n\n test(\"tracks variables in uppercase VAR()\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--size::\",\n createStyleDecl(\"local1\", \"base\", \"--size\", \"20px\"),\n ],\n [\n \"local1:base:width::\",\n createStyleDecl(\"local1\", \"base\", \"width\", \"VAR(--size)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--size\")).toBe(1);\n });\n\n test(\"tracks variables with underscores\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--my_variable::\",\n createStyleDecl(\"local1\", \"base\", \"--my_variable\", \"value\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\"local1\", \"base\", \"color\", \"var(--my_variable)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--my_variable\")).toBe(1);\n });\n\n test(\"tracks variables in nested calc expressions\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--base::\",\n createStyleDecl(\"local1\", \"base\", \"--base\", \"10px\"),\n ],\n [\n \"local1:base:--multiplier::\",\n createStyleDecl(\"local1\", \"base\", \"--multiplier\", \"2\"),\n ],\n [\n \"local1:base:width::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"width\",\n \"calc(calc(var(--base) * var(--multiplier)) + 5px)\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--base\")).toBe(1);\n expect(counts.get(\"--multiplier\")).toBe(1);\n });\n\n test(\"tracks variables in clamp()\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--min::\",\n createStyleDecl(\"local1\", \"base\", \"--min\", \"10px\"),\n ],\n [\n \"local1:base:--preferred::\",\n createStyleDecl(\"local1\", \"base\", \"--preferred\", \"5vw\"),\n ],\n [\n \"local1:base:--max::\",\n createStyleDecl(\"local1\", \"base\", \"--max\", \"50px\"),\n ],\n [\n \"local1:base:fontSize::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"fontSize\",\n \"clamp(var(--min), var(--preferred), var(--max))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--min\")).toBe(1);\n expect(counts.get(\"--preferred\")).toBe(1);\n expect(counts.get(\"--max\")).toBe(1);\n });\n\n test(\"tracks variables in min() and max()\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--size-a::\",\n createStyleDecl(\"local1\", \"base\", \"--size-a\", \"100px\"),\n ],\n [\n \"local1:base:--size-b::\",\n createStyleDecl(\"local1\", \"base\", \"--size-b\", \"50vw\"),\n ],\n [\n \"local1:base:width::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"width\",\n \"min(var(--size-a), var(--size-b))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--size-a\")).toBe(1);\n expect(counts.get(\"--size-b\")).toBe(1);\n });\n\n test(\"tracks variables in rgba()\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--red::\",\n createStyleDecl(\"local1\", \"base\", \"--red\", \"255\"),\n ],\n [\n \"local1:base:--alpha::\",\n createStyleDecl(\"local1\", \"base\", \"--alpha\", \"0.5\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"color\",\n \"rgba(var(--red), 0, 0, var(--alpha))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--red\")).toBe(1);\n expect(counts.get(\"--alpha\")).toBe(1);\n });\n\n test(\"tracks variables in transform functions\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--rotate::\",\n createStyleDecl(\"local1\", \"base\", \"--rotate\", \"45deg\"),\n ],\n [\n \"local1:base:--scale::\",\n createStyleDecl(\"local1\", \"base\", \"--scale\", \"1.5\"),\n ],\n [\n \"local1:base:transform::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"transform\",\n \"rotate(var(--rotate)) scale(var(--scale))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--rotate\")).toBe(1);\n expect(counts.get(\"--scale\")).toBe(1);\n });\n\n test(\"tracks variables in filter functions\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--blur-amount::\",\n createStyleDecl(\"local1\", \"base\", \"--blur-amount\", \"5px\"),\n ],\n [\n \"local1:base:filter::\",\n createStyleDecl(\"local1\", \"base\", \"filter\", \"blur(var(--blur-amount))\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--blur-amount\")).toBe(1);\n });\n\n test(\"tracks variables in url() with concatenation\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--image-path::\",\n createStyleDecl(\"local1\", \"base\", \"--image-path\", \"/images/bg.jpg\"),\n ],\n [\n \"local1:base:backgroundImage::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"backgroundImage\",\n \"url(var(--image-path))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--image-path\")).toBe(1);\n });\n\n test(\"tracks variables with very long names\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const longVarName =\n \"--this-is-a-very-long-variable-name-with-many-hyphens-and-words\";\n\n const styles = new Map([\n [\n `local1:base:${longVarName}::`,\n createStyleDecl(\"local1\", \"base\", longVarName, \"value\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\"local1\", \"base\", \"color\", `var(${longVarName})`),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(longVarName)).toBe(1);\n });\n\n test(\"tracks variables in custom properties with var()\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--base-color::\",\n createStyleDecl(\"local1\", \"base\", \"--base-color\", \"blue\"),\n ],\n [\n \"local1:base:--derived-color::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"--derived-color\",\n \"var(--base-color)\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--base-color\")).toBe(1);\n });\n\n test(\"tracks same variable used multiple times in one value\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--spacing::\",\n createStyleDecl(\"local1\", \"base\", \"--spacing\", \"10px\"),\n ],\n [\n \"local1:base:padding::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"padding\",\n \"var(--spacing) var(--spacing) var(--spacing) var(--spacing)\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Should count as 1 usage since it's the same property\n expect(counts.get(\"--spacing\")).toBe(1);\n });\n\n test(\"handles variables that look like numbers\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--100::\",\n createStyleDecl(\"local1\", \"base\", \"--100\", \"value\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\"local1\", \"base\", \"color\", \"var(--100)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--100\")).toBe(1);\n });\n\n test(\"tracks variables with emoji (technically valid CSS)\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--😀::\",\n createStyleDecl(\"local1\", \"base\", \"--😀\", \"happy\"),\n ],\n [\n \"local1:base:content::\",\n createStyleDecl(\"local1\", \"base\", \"content\", \"var(--😀)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--😀\")).toBe(1);\n });\n\n test(\"tracks variables in grid-template-* properties\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--col-width::\",\n createStyleDecl(\"local1\", \"base\", \"--col-width\", \"1fr\"),\n ],\n [\n \"local1:base:gridTemplateColumns::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"gridTemplateColumns\",\n \"var(--col-width) var(--col-width) var(--col-width)\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--col-width\")).toBe(1);\n });\n\n test(\"tracks variables in animation properties\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--duration::\",\n createStyleDecl(\"local1\", \"base\", \"--duration\", \"2s\"),\n ],\n [\n \"local1:base:animationDuration::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"animationDuration\",\n \"var(--duration)\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--duration\")).toBe(1);\n });\n\n test(\"tracks variables in box-shadow with multiple shadows\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--shadow-color::\",\n createStyleDecl(\"local1\", \"base\", \"--shadow-color\", \"rgba(0,0,0,0.2)\"),\n ],\n [\n \"local1:base:boxShadow::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"boxShadow\",\n \"0 2px 4px var(--shadow-color), 0 4px 8px var(--shadow-color)\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--shadow-color\")).toBe(1);\n });\n\n test(\"tracks variables in incorrect syntax (missing closing paren)\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--color::\",\n createStyleDecl(\"local1\", \"base\", \"--color\", \"red\"),\n ],\n [\n \"local1:base:backgroundColor::\",\n // Malformed - missing closing paren\n createStyleDecl(\"local1\", \"base\", \"backgroundColor\", \"var(--color\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Should still track it because we're just searching for the string\n expect(counts.get(\"--color\")).toBe(1);\n });\n\n test(\"tracks variables in string concatenation syntax (invalid but user might try)\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--prefix::\",\n createStyleDecl(\"local1\", \"base\", \"--prefix\", \"hello\"),\n ],\n [\n \"local1:base:content::\",\n // Invalid syntax but user might try it\n createStyleDecl(\"local1\", \"base\", \"content\", \"var(--prefix) + world\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--prefix\")).toBe(1);\n });\n\n test(\"tracks variables with spaces in names (technically invalid)\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--my color::\",\n createStyleDecl(\"local1\", \"base\", \"--my color\", \"red\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\"local1\", \"base\", \"color\", \"var(--my color)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Should track it even though it's invalid CSS\n expect(counts.get(\"--my color\")).toBe(1);\n });\n\n test(\"distinguishes between similar variable names\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--color::\",\n createStyleDecl(\"local1\", \"base\", \"--color\", \"red\"),\n ],\n [\n \"local1:base:--color-dark::\",\n createStyleDecl(\"local1\", \"base\", \"--color-dark\", \"darkred\"),\n ],\n [\n \"local1:base:--color-darker::\",\n createStyleDecl(\"local1\", \"base\", \"--color-darker\", \"maroon\"),\n ],\n [\n \"local1:base:backgroundColor::\",\n createStyleDecl(\"local1\", \"base\", \"backgroundColor\", \"var(--color)\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\"local1\", \"base\", \"color\", \"var(--color-dark)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--color\")).toBe(1);\n expect(counts.get(\"--color-dark\")).toBe(1);\n expect(counts.get(\"--color-darker\")).toBeUndefined();\n });\n});\n\ndescribe(\"Word boundary edge cases - no-space contexts\", () => {\n test(\"tracks variable followed by percentage without space\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--opacity::\",\n createStyleDecl(\"local1\", \"base\", \"--opacity\", \"50\"),\n ],\n [\n \"local1:base:background::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"background\",\n \"linear-gradient(90deg, red var(--opacity)%)\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--opacity\")).toBe(1);\n });\n\n test(\"tracks variable in tight arithmetic without spaces\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--size::\",\n createStyleDecl(\"local1\", \"base\", \"--size\", \"100px\"),\n ],\n [\n \"local1:base:width::\",\n createStyleDecl(\"local1\", \"base\", \"width\", \"calc(var(--size)-10px)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--size\")).toBe(1);\n });\n\n test(\"tracks variable followed by closing paren then another function\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--blur::\",\n createStyleDecl(\"local1\", \"base\", \"--blur\", \"5px\"),\n ],\n [\n \"local1:base:--brightness::\",\n createStyleDecl(\"local1\", \"base\", \"--brightness\", \"1.2\"),\n ],\n [\n \"local1:base:filter::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"filter\",\n \"blur(var(--blur))brightness(var(--brightness))\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--blur\")).toBe(1);\n expect(counts.get(\"--brightness\")).toBe(1);\n });\n\n test(\"tracks variable in malformed concatenation\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--value::\",\n createStyleDecl(\"local1\", \"base\", \"--value\", \"10\"),\n ],\n [\n \"local1:base:content::\",\n // Malformed but user might try it\n createStyleDecl(\"local1\", \"base\", \"content\", \"var(--value)px\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--value\")).toBe(1);\n });\n});\n\ndescribe(\"Renaming with potential interference\", () => {\n test(\"renames --color to --color-new without breaking\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:--color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--color\" as StyleProperty,\n value: { type: \"keyword\", value: \"red\" },\n },\n ],\n [\n \"styleSourceId:base:backgroundColor\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"backgroundColor\" as StyleProperty,\n value: { type: \"var\", value: \"color\" },\n },\n ],\n ]);\n\n const result = performCssVariableRename(styles, \"--color\", \"--color-new\");\n\n const bgDecl = Array.from(result.values()).find(\n (d) => d.property === \"backgroundColor\"\n );\n expect(bgDecl?.value).toEqual({ type: \"var\", value: \"color-new\" });\n\n const colorDef = Array.from(result.values()).find(\n (d) => d.property === \"--color-new\"\n );\n expect(colorDef).toBeDefined();\n expect(colorDef?.value).toEqual({ type: \"keyword\", value: \"red\" });\n });\n\n test(\"renames --x to --xx without affecting --xxx\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:--x\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--x\" as StyleProperty,\n value: { type: \"keyword\", value: \"value1\" },\n },\n ],\n [\n \"styleSourceId:base:--xxx\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--xxx\" as StyleProperty,\n value: { type: \"keyword\", value: \"value2\" },\n },\n ],\n [\n \"styleSourceId:base:width\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"width\" as StyleProperty,\n value: { type: \"var\", value: \"x\" },\n },\n ],\n [\n \"styleSourceId:base:height\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"height\" as StyleProperty,\n value: { type: \"var\", value: \"xxx\" },\n },\n ],\n ]);\n\n const result = performCssVariableRename(styles, \"--x\", \"--xx\");\n\n const widthDecl = Array.from(result.values()).find(\n (d) => d.property === \"width\"\n );\n expect(widthDecl?.value).toEqual({ type: \"var\", value: \"xx\" });\n\n const heightDecl = Array.from(result.values()).find(\n (d) => d.property === \"height\"\n );\n // Should NOT be affected\n expect(heightDecl?.value).toEqual({ type: \"var\", value: \"xxx\" });\n });\n\n test(\"handles variable in both var type and unparsed string\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:--spacing\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--spacing\" as StyleProperty,\n value: { type: \"keyword\", value: \"10px\" },\n },\n ],\n [\n \"styleSourceId:base:padding\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"padding\" as StyleProperty,\n value: { type: \"var\", value: \"spacing\" },\n },\n ],\n [\n \"styleSourceId:base:width\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"width\" as StyleProperty,\n value: {\n type: \"unparsed\",\n value: \"calc(100% - var(--spacing))\",\n },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--spacing\",\n \"--new-spacing\"\n );\n\n const paddingDecl = Array.from(result.values()).find(\n (d) => (d.property as string) === \"padding\"\n );\n expect(paddingDecl?.value).toEqual({ type: \"var\", value: \"new-spacing\" });\n\n const widthDecl = Array.from(result.values()).find(\n (d) => (d.property as string) === \"width\"\n );\n expect(widthDecl?.value).toEqual({\n type: \"unparsed\",\n value: \"calc(100% - var(--new-spacing))\",\n });\n });\n});\n\ndescribe(\"HTML Embed edge cases\", () => {\n test(\"tracks variables in minified CSS\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--primary::\",\n createStyleDecl(\"local1\", \"base\", \"--primary\", \"blue\"),\n ],\n [\n \"local1:base:--secondary::\",\n createStyleDecl(\"local1\", \"base\", \"--secondary\", \"red\"),\n ],\n ]);\n\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"box1\",\n type: \"string\" as const,\n name: \"code\",\n value:\n \"\",\n },\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props,\n });\n\n expect(counts.get(\"--primary\")).toBe(1);\n expect(counts.get(\"--secondary\")).toBe(1);\n });\n\n test(\"tracks variables in inline styles within HTML\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--text-color::\",\n createStyleDecl(\"local1\", \"base\", \"--text-color\", \"navy\"),\n ],\n [\n \"local1:base:--bg-color::\",\n createStyleDecl(\"local1\", \"base\", \"--bg-color\", \"white\"),\n ],\n ]);\n\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"box1\",\n type: \"string\" as const,\n name: \"code\",\n value: `\n
    \n Text\n
    \n `,\n },\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props,\n });\n\n expect(counts.get(\"--text-color\")).toBe(1);\n expect(counts.get(\"--bg-color\")).toBe(1);\n });\n\n test(\"tracks variables with multiple HTML elements\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--spacing::\",\n createStyleDecl(\"local1\", \"base\", \"--spacing\", \"1rem\"),\n ],\n ]);\n\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"box1\",\n type: \"string\" as const,\n name: \"code\",\n value: `\n
    \n

    Content

    \n More\n
    \n `,\n },\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props,\n });\n\n // Should count as 1 usage (same instance, even if multiple occurrences)\n expect(counts.get(\"--spacing\")).toBe(1);\n });\n\n test(\"updates variables in minified CSS\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value: \".x{color:var(--old);background:var(--old)}\",\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--old\", \"--new\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\".x{color:var(--new);background:var(--new)}\");\n });\n\n test(\"updates variables in inline styles\", () => {\n const props = new Map([\n [\n \"prop1\",\n {\n id: \"prop1\",\n instanceId: \"instance1\",\n name: \"code\",\n type: \"string\",\n value:\n '
    Text
    ',\n },\n ],\n ]);\n\n const result = updateVarReferencesInProps(props, \"--theme\", \"--brand\");\n const prop = result.get(\"prop1\");\n\n expect(prop!.value).toBe(\n '
    Text
    '\n );\n });\n});\n\ndescribe(\"Deeply nested structures\", () => {\n test(\"preserves deeply nested var in layers > function > tuple\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:filter\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"filter\" as StyleProperty,\n value: {\n type: \"layers\",\n value: [\n {\n type: \"function\",\n name: \"drop-shadow\",\n args: {\n type: \"tuple\",\n value: [\n { type: \"unit\", value: 0, unit: \"px\" },\n { type: \"unit\", value: 0, unit: \"px\" },\n { type: \"var\", value: \"shadow-blur\" },\n { type: \"var\", value: \"shadow-color\" },\n ],\n },\n } as StyleValue,\n ],\n } as StyleValue,\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--shadow-blur\",\n \"--blur-amount\"\n );\n\n const filterDecl = Array.from(result.values())[0];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const filterValue = filterDecl.value as any;\n\n expect(filterValue.type).toBe(\"layers\");\n expect(filterValue.value[0].type).toBe(\"function\");\n expect(filterValue.value[0].args.type).toBe(\"tuple\");\n expect(filterValue.value[0].args.value[2]).toEqual({\n type: \"var\",\n value: \"blur-amount\",\n });\n expect(filterValue.value[0].args.value[3]).toEqual({\n type: \"var\",\n value: \"shadow-color\",\n });\n });\n\n test(\"handles shadow with var in all fields\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:boxShadow\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"boxShadow\" as StyleProperty,\n value: {\n type: \"layers\",\n value: [\n {\n type: \"shadow\",\n offsetX: { type: \"var\", value: \"offset-x\" },\n offsetY: { type: \"var\", value: \"offset-y\" },\n blur: { type: \"var\", value: \"blur-size\" },\n spread: { type: \"var\", value: \"spread-size\" },\n color: { type: \"var\", value: \"shadow-color\" },\n },\n ],\n } as StyleValue,\n },\n ],\n ]);\n\n // Test renaming each field independently\n let result = performCssVariableRename(styles, \"--offset-x\", \"--x\");\n let shadowDecl = Array.from(result.values())[0];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let shadowValue = (shadowDecl.value as any).value[0];\n expect(shadowValue.offsetX).toEqual({ type: \"var\", value: \"x\" });\n\n result = performCssVariableRename(styles, \"--blur-size\", \"--blur\");\n shadowDecl = Array.from(result.values())[0];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n shadowValue = (shadowDecl.value as any).value[0];\n expect(shadowValue.blur).toEqual({ type: \"var\", value: \"blur\" });\n\n result = performCssVariableRename(styles, \"--shadow-color\", \"--color\");\n shadowDecl = Array.from(result.values())[0];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n shadowValue = (shadowDecl.value as any).value[0];\n expect(shadowValue.color).toEqual({ type: \"var\", value: \"color\" });\n });\n\n test(\"preserves 5-level nested structure\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:filter\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"filter\" as StyleProperty,\n value: {\n type: \"layers\",\n value: [\n {\n type: \"function\",\n name: \"drop-shadow\",\n args: {\n type: \"tuple\",\n value: [\n {\n type: \"function\",\n name: \"calc\",\n args: {\n type: \"unparsed\",\n value: \"var(--deep-var) * 2\",\n },\n } as StyleValue,\n ],\n },\n } as StyleValue,\n ],\n } as StyleValue,\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--deep-var\",\n \"--renamed-deep\"\n );\n\n const filterDecl = Array.from(result.values())[0];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const filterValue = filterDecl.value as any;\n\n expect(filterValue.value[0].args.value[0].args.value).toBe(\n \"var(--renamed-deep) * 2\"\n );\n });\n});\n\ndescribe(\"Special character variable names\", () => {\n test(\"handles variables with special regex chars in complex values\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--color-$special::\",\n createStyleDecl(\"local1\", \"base\", \"--color-$special\", \"red\"),\n ],\n [\n \"local1:base:width::\",\n createStyleDecl(\n \"local1\",\n \"base\",\n \"width\",\n \"calc(var(--color-$special) * 2)\"\n ),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--color-$special\")).toBe(1);\n });\n\n test(\"renames variables with special regex chars\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:--var-$test\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--var-$test\" as StyleProperty,\n value: { type: \"keyword\", value: \"value\" },\n },\n ],\n [\n \"styleSourceId:base:color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"color\" as StyleProperty,\n value: { type: \"var\", value: \"var-$test\" },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--var-$test\",\n \"--var-$new\"\n );\n\n const colorDecl = Array.from(result.values()).find(\n (d) => d.property === \"color\"\n );\n expect(colorDecl?.value).toEqual({ type: \"var\", value: \"var-$new\" });\n });\n\n test(\"handles variables with dots\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--version-1.0::\",\n createStyleDecl(\"local1\", \"base\", \"--version-1.0\", \"value\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\"local1\", \"base\", \"color\", \"var(--version-1.0)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n expect(counts.get(\"--version-1.0\")).toBe(1);\n });\n\n test(\"handles variables with parentheses in name\", () => {\n const styles = new Map([\n [\n \"styleSourceId:base:--var(test)\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"--var(test)\" as StyleProperty,\n value: { type: \"keyword\", value: \"value\" },\n },\n ],\n [\n \"styleSourceId:base:color\",\n {\n breakpointId: \"base\",\n styleSourceId: \"styleSourceId\",\n property: \"color\" as StyleProperty,\n value: { type: \"var\", value: \"var(test)\" },\n },\n ],\n ]);\n\n const result = performCssVariableRename(\n styles,\n \"--var(test)\",\n \"--var-test\"\n );\n\n const colorDecl = Array.from(result.values()).find(\n (d) => d.property === \"color\"\n );\n expect(colorDecl?.value).toEqual({ type: \"var\", value: \"var-test\" });\n });\n});\n\ndescribe(\"Performance and optimization validation\", () => {\n test(\"only tracks defined variables, not undefined ones\", () => {\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--defined::\",\n createStyleDecl(\"local1\", \"base\", \"--defined\", \"value\"),\n ],\n [\n \"local1:base:color::\",\n // References undefined variable\n createStyleDecl(\"local1\", \"base\", \"color\", \"var(--undefined)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Should not track --undefined since it's not defined\n expect(counts.get(\"--undefined\")).toBeUndefined();\n expect(counts.size).toBe(0);\n });\n\n test(\"breaks early when finding referenced variables\", () => {\n // This test validates the optimization in $referencedCssVariables\n const styleSourceSelections = new Map([\n [\n \"box1\",\n {\n instanceId: \"box1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--used::\",\n createStyleDecl(\"local1\", \"base\", \"--used\", \"value\"),\n ],\n [\n \"local1:base:color1::\",\n createStyleDecl(\"local1\", \"base\", \"color1\", \"var(--used)\"),\n ],\n [\n \"local1:base:color2::\",\n // Another reference to same variable - should not increase processing\n createStyleDecl(\"local1\", \"base\", \"color2\", \"var(--used)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Both usages should be counted\n expect(counts.get(\"--used\")).toBe(2);\n });\n});\n\ndescribe(\"$unusedCssVariables and deleteUnusedCssVariables\", () => {\n test(\"identifies unused variables correctly\", () => {\n const styleSourceSelections = new Map([\n [\n \"root\",\n {\n instanceId: \"root\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--used::\",\n createStyleDecl(\"local1\", \"base\", \"--used\", \"red\"),\n ],\n [\n \"local1:base:--unused::\",\n createStyleDecl(\"local1\", \"base\", \"--unused\", \"blue\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\"local1\", \"base\", \"color\", \"var(--used)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // --used should have 1 usage, --unused should have 0\n expect(counts.get(\"--used\")).toBe(1);\n expect(counts.get(\"--unused\")).toBeUndefined();\n });\n\n test(\"only considers variables associated with instances\", () => {\n const styleSourceSelections = new Map([\n [\n \"root\",\n {\n instanceId: \"root\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n // orphaned-source is not in styleSourceSelections\n const styles = new Map([\n [\n \"local1:base:--visible::\",\n createStyleDecl(\"local1\", \"base\", \"--visible\", \"red\"),\n ],\n [\n \"orphaned-source:base:--orphaned::\",\n createStyleDecl(\"orphaned-source\", \"base\", \"--orphaned\", \"blue\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // --visible should be tracked (no usages, so undefined)\n // --orphaned should not be tracked at all\n expect(counts.has(\"--visible\")).toBe(false);\n expect(counts.has(\"--orphaned\")).toBe(false);\n });\n\n test(\"detects variables used in HTML Embed code props\", () => {\n const styleSourceSelections = new Map([\n [\n \"root\",\n {\n instanceId: \"root\",\n values: [\"local1\"],\n },\n ],\n [\n \"embed\",\n {\n instanceId: \"embed\",\n values: [\"local2\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--used-in-embed::\",\n createStyleDecl(\"local1\", \"base\", \"--used-in-embed\", \"red\"),\n ],\n [\n \"local1:base:--unused::\",\n createStyleDecl(\"local1\", \"base\", \"--unused\", \"blue\"),\n ],\n ]);\n\n const props = new Map([\n [\n \"embed-code\",\n {\n id: \"embed-code\",\n instanceId: \"embed\",\n type: \"string\" as const,\n name: \"code\",\n value: \"\",\n },\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props,\n });\n\n // --used-in-embed should have 1 usage\n expect(counts.get(\"--used-in-embed\")).toBe(1);\n expect(counts.get(\"--unused\")).toBeUndefined();\n });\n\n test(\"handles variables on root instance\", () => {\n const styleSourceSelections = new Map([\n [\n \"root\",\n {\n instanceId: \"root\",\n values: [\"root-local\"],\n },\n ],\n [\n \"child\",\n {\n instanceId: \"child\",\n values: [\"child-local\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"root-local:base:--root-var::\",\n createStyleDecl(\"root-local\", \"base\", \"--root-var\", \"red\"),\n ],\n [\n \"child-local:base:color::\",\n createStyleDecl(\"child-local\", \"base\", \"color\", \"var(--root-var)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // --root-var should be used by child\n expect(counts.get(\"--root-var\")).toBe(1);\n });\n\n test(\"distinguishes between similar variable names\", () => {\n const styleSourceSelections = new Map([\n [\n \"root\",\n {\n instanceId: \"root\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--color::\",\n createStyleDecl(\"local1\", \"base\", \"--color\", \"red\"),\n ],\n [\n \"local1:base:--color-dark::\",\n createStyleDecl(\"local1\", \"base\", \"--color-dark\", \"darkred\"),\n ],\n [\n \"local1:base:background::\",\n // Uses --color but not --color-dark\n createStyleDecl(\"local1\", \"base\", \"background\", \"var(--color)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // --color should be used, --color-dark should not\n expect(counts.get(\"--color\")).toBe(1);\n expect(counts.get(\"--color-dark\")).toBeUndefined();\n });\n\n test(\"handles multiple instances defining the same variable\", () => {\n const styleSourceSelections = new Map([\n [\n \"instance1\",\n {\n instanceId: \"instance1\",\n values: [\"local1\"],\n },\n ],\n [\n \"instance2\",\n {\n instanceId: \"instance2\",\n values: [\"local2\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--shared::\",\n createStyleDecl(\"local1\", \"base\", \"--shared\", \"value1\"),\n ],\n [\n \"local2:base:--shared::\",\n createStyleDecl(\"local2\", \"base\", \"--shared\", \"value2\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\"local1\", \"base\", \"color\", \"var(--shared)\"),\n ],\n ]);\n\n const { counts, instances } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // --shared should be used once\n expect(counts.get(\"--shared\")).toBe(1);\n // Usage is from instance1\n expect(instances.get(\"--shared\")).toEqual(new Set([\"instance1\"]));\n });\n\n test(\"variables used only within same instance are counted\", () => {\n const styleSourceSelections = new Map([\n [\n \"instance1\",\n {\n instanceId: \"instance1\",\n values: [\"local1\"],\n },\n ],\n ]);\n\n const styles = new Map([\n [\n \"local1:base:--primary::\",\n createStyleDecl(\"local1\", \"base\", \"--primary\", \"blue\"),\n ],\n [\n \"local1:base:color::\",\n createStyleDecl(\"local1\", \"base\", \"color\", \"var(--primary)\"),\n ],\n ]);\n\n const { counts } = findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props: new Map(),\n });\n\n // Variable defined and used in same instance\n expect(counts.get(\"--primary\")).toBe(1);\n });\n});\n" }, { "path": "apps/builder/app/builder/shared/css-variable-utils.tsx", "content": "import { useState, useEffect } from \"react\";\nimport { atom, computed } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport {\n Dialog,\n DialogContent,\n DialogTitle,\n DialogClose,\n Button,\n Text,\n Flex,\n theme,\n InputField,\n toast,\n} from \"@webstudio-is/design-system\";\nimport type {\n Instance,\n StyleDecl,\n StyleSourceSelections,\n Props,\n} from \"@webstudio-is/sdk\";\nimport type {\n StyleValue,\n StyleProperty,\n CustomProperty,\n} from \"@webstudio-is/css-engine\";\nimport { toValue } from \"@webstudio-is/css-engine\";\nimport {\n $styles,\n $styleSourceSelections,\n $props,\n} from \"~/shared/sync/data-stores\";\nimport { serverSyncStore } from \"~/shared/sync/sync-stores\";\nimport { getStyleDeclKey } from \"@webstudio-is/sdk\";\n\nconst $isDeleteUnusedCssVariablesDialogOpen = atom(false);\n\nexport const openDeleteUnusedCssVariablesDialog = () => {\n $isDeleteUnusedCssVariablesDialogOpen.set(true);\n};\n\n// Utility: Escape regex special characters\nconst escapeRegex = (str: string): string => {\n return str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n// Utility: Create regex to match variable name with word boundary\n// This avoids matching --color inside --color-dark\n// Uses negative lookahead (?![\\\\w-]) to ensure variable name doesn't continue\n// with word characters or hyphens, preventing partial matches.\nconst createVarNameRegex = (varName: string): RegExp => {\n return new RegExp(`${escapeRegex(varName)}(?![\\\\w-])`, \"g\");\n};\n\n// Traverse a StyleValue to find all var() references\nconst findVarReferences = (value: StyleValue, varName: string): boolean => {\n const valueStr = toValue(value);\n return createVarNameRegex(varName).test(valueStr);\n};\n\n// Find all CSS variable references in HTML Embed code props\nconst findVarReferencesInProps = (props: Props, varName: string): boolean => {\n const regex = createVarNameRegex(varName);\n for (const prop of props.values()) {\n if (prop.type === \"string\" && prop.name === \"code\" && prop.value) {\n if (regex.test(prop.value)) {\n return true;\n }\n }\n }\n return false;\n};\n\n// Find CSS variable usage counts (how many times each variable is referenced via var())\nexport const findCssVariableUsagesByInstance = ({\n styleSourceSelections,\n styles,\n props,\n}: {\n styleSourceSelections: StyleSourceSelections;\n styles: Map;\n props: Props;\n}): {\n counts: Map;\n instances: Map>;\n} => {\n const usageCounts = new Map();\n const usageInstances = new Map>();\n\n // Track which style sources belong to which instances\n const instancesByStyleSource = new Map();\n for (const { instanceId, values } of styleSourceSelections.values()) {\n for (const styleSourceId of values) {\n instancesByStyleSource.set(styleSourceId, instanceId);\n }\n }\n\n // Helper to add a var reference\n const addVarReference = (varName: string, instanceId: Instance[\"id\"]) => {\n const count = usageCounts.get(varName) ?? 0;\n usageCounts.set(varName, count + 1);\n\n let instances = usageInstances.get(varName);\n if (instances === undefined) {\n instances = new Set();\n usageInstances.set(varName, instances);\n }\n instances.add(instanceId);\n };\n\n // Collect all defined variables\n // Performance optimization: Only check variables that are defined\n // instead of searching for all possible var() patterns.\n // This is O(defined_vars × styles) instead of O(all_patterns × styles).\n const definedVariables = new Set();\n for (const styleDecl of styles.values()) {\n if (styleDecl.property.startsWith(\"--\")) {\n definedVariables.add(styleDecl.property);\n }\n }\n\n // Track CSS variable references in StyleDecl values\n for (const styleDecl of styles.values()) {\n const instanceId = instancesByStyleSource.get(styleDecl.styleSourceId);\n if (!instanceId) {\n continue;\n }\n\n // Check each defined variable if it's used in this style\n for (const varName of definedVariables) {\n if (findVarReferences(styleDecl.value, varName)) {\n addVarReference(varName, instanceId);\n }\n }\n }\n\n // Track CSS variable references in HTML Embed code props\n for (const varName of definedVariables) {\n if (findVarReferencesInProps(props, varName)) {\n // Find which instance this belongs to\n for (const prop of props.values()) {\n if (prop.type === \"string\" && prop.name === \"code\" && prop.value) {\n const regex = createVarNameRegex(varName);\n if (regex.test(prop.value)) {\n addVarReference(varName, prop.instanceId);\n }\n }\n }\n }\n }\n\n return { counts: usageCounts, instances: usageInstances };\n};\n\nconst $cssVariableUsageData = computed(\n [$styleSourceSelections, $styles, $props],\n (styleSourceSelections, styles, props) => {\n return findCssVariableUsagesByInstance({\n styleSourceSelections,\n styles,\n props,\n });\n }\n);\n\nexport const $usedCssVariablesInInstances = computed(\n $cssVariableUsageData,\n (data) => data.counts\n);\n\nexport const $cssVariableInstancesByVariable = computed(\n $cssVariableUsageData,\n (data) => data.instances\n);\n\n// Get all defined CSS variables (unique properties that start with --)\nexport const $definedCssVariables = computed($styles, (styles) => {\n const definedVariables = new Set();\n for (const styleDecl of styles.values()) {\n if (styleDecl.property.startsWith(\"--\")) {\n definedVariables.add(styleDecl.property as CustomProperty);\n }\n }\n return definedVariables;\n});\n\n// Map CSS variables to the instances where they are defined\nexport const $cssVariableDefinitionsByVariable = computed(\n [$styleSourceSelections, $styles],\n (styleSourceSelections, styles) => {\n const definitionsByVariable = new Map>();\n\n // Build map of styleSourceId to instanceId\n const instancesByStyleSource = new Map();\n for (const { instanceId, values } of styleSourceSelections.values()) {\n for (const styleSourceId of values) {\n instancesByStyleSource.set(styleSourceId, instanceId);\n }\n }\n\n // Find all CSS variable definitions\n for (const styleDecl of styles.values()) {\n if (styleDecl.property.startsWith(\"--\")) {\n const instanceId = instancesByStyleSource.get(styleDecl.styleSourceId);\n if (instanceId) {\n let instances = definitionsByVariable.get(styleDecl.property);\n if (instances === undefined) {\n instances = new Set();\n definitionsByVariable.set(styleDecl.property, instances);\n }\n instances.add(instanceId);\n }\n }\n }\n\n return definitionsByVariable;\n }\n);\n\n// Get all referenced CSS variables (from both styles and HTML Embed code props)\nexport const $referencedCssVariables = computed(\n [$styles, $props],\n (styles, props) => {\n const referencedVariables = new Set();\n\n // Collect all defined variables first\n const definedVariables = new Set();\n for (const styleDecl of styles.values()) {\n if (styleDecl.property.startsWith(\"--\")) {\n definedVariables.add(styleDecl.property);\n }\n }\n\n // Check which defined variables are referenced\n for (const varName of definedVariables) {\n // Check in styles\n // Performance optimization: We only need to know IF a variable is used (boolean),\n // not HOW MANY times, so we break on first match.\n for (const styleDecl of styles.values()) {\n if (findVarReferences(styleDecl.value, varName)) {\n referencedVariables.add(varName);\n break;\n }\n }\n\n // Check in props if not already found\n if (\n !referencedVariables.has(varName) &&\n findVarReferencesInProps(props, varName)\n ) {\n referencedVariables.add(varName);\n }\n }\n\n return referencedVariables;\n }\n);\n\n// Get all unused CSS variables (defined in instances but not referenced)\nexport const $unusedCssVariables = computed(\n [$cssVariableDefinitionsByVariable, $referencedCssVariables],\n (definitionsByVariable, referencedVariables) => {\n const unusedVariables = new Set();\n for (const varName of definitionsByVariable.keys()) {\n if (!referencedVariables.has(varName)) {\n unusedVariables.add(varName);\n }\n }\n return unusedVariables;\n }\n);\n\ntype CssVariableError =\n | { type: \"required\"; message: string }\n | { type: \"invalid\"; message: string }\n | { type: \"duplicate\"; message: string };\n\nexport const validateCssVariableName = (\n name: string,\n currentProperty?: string\n): CssVariableError | undefined => {\n // Check if name is required\n if (name.trim().length === 0) {\n return {\n type: \"required\",\n message: \"CSS variable name cannot be empty\",\n };\n }\n\n // Ensure name starts with --\n if (!name.startsWith(\"--\")) {\n return {\n type: \"invalid\",\n message: 'CSS variable name must start with \"--\"',\n };\n }\n\n // Check for duplicates within the same style source + breakpoint + state\n const styles = $styles.get();\n for (const styleDecl of styles.values()) {\n if (\n styleDecl.property === name &&\n styleDecl.property !== currentProperty &&\n styleDecl.property.startsWith(\"--\")\n ) {\n return {\n type: \"duplicate\",\n message: `CSS variable \"${name}\" already exists`,\n };\n }\n }\n};\n\n// Update all var() references in a StyleValue\nconst updateVarReferences = (\n value: StyleValue,\n oldProperty: string,\n newProperty: string\n): StyleValue => {\n // For simple replacement, use JSON stringify/parse approach\n // since toValue produces CSS string which is harder to parse back\n let valueStr = JSON.stringify(value);\n\n // Handle two patterns:\n // 1. In var type objects: \"value\":\"variable-name\" (without --)\n // StyleValue stores var without -- prefix in \"value\" field\n // 2. In literal strings: \"--variable-name\" (with --)\n // Unparsed strings contain full --variable-name syntax\n // Both patterns are needed because StyleValue can contain both structured\n // var types and unparsed CSS strings with var() references\n\n // Strip -- prefix for var type replacement\n const oldVarName = oldProperty.startsWith(\"--\")\n ? oldProperty.slice(2)\n : oldProperty;\n const newVarName = newProperty.startsWith(\"--\")\n ? newProperty.slice(2)\n : newProperty;\n\n // Replace in var type value fields: \"value\":\"old-name\" -> \"value\":\"new-name\"\n // Use word boundary to avoid replacing \"color\" in \"color-dark\"\n const varTypeRegex = new RegExp(\n `(\"value\":\")${escapeRegex(oldVarName)}(?![\\\\w-])`,\n \"g\"\n );\n valueStr = valueStr.replace(varTypeRegex, `$1${newVarName}`);\n\n // Also replace literal --variable-name in unparsed strings\n valueStr = valueStr.replace(createVarNameRegex(oldProperty), newProperty);\n\n return JSON.parse(valueStr) as StyleValue;\n};\n\n// Core rename logic without transaction wrapper (for testing)\nexport const performCssVariableRename = (\n styles: Map,\n oldProperty: string,\n newProperty: string\n): Map => {\n const updatedStyles = new Map(styles);\n\n // Update all StyleDecl with the old property name\n const styleDeclsToUpdate: Array<{ key: string; decl: StyleDecl }> = [];\n for (const [key, styleDecl] of updatedStyles) {\n if (styleDecl.property === oldProperty) {\n styleDeclsToUpdate.push({ key, decl: styleDecl });\n }\n }\n\n for (const { key, decl } of styleDeclsToUpdate) {\n updatedStyles.delete(key);\n const newDecl = { ...decl, property: newProperty as StyleProperty };\n updatedStyles.set(getStyleDeclKey(newDecl), newDecl);\n }\n\n // Update all var() references in StyleValue\n const styleDeclsToUpdateRefs: Array<{ key: string; decl: StyleDecl }> = [];\n for (const [key, styleDecl] of updatedStyles) {\n styleDeclsToUpdateRefs.push({ key, decl: styleDecl });\n }\n\n for (const { key, decl } of styleDeclsToUpdateRefs) {\n const newValue = updateVarReferences(decl.value, oldProperty, newProperty);\n if (newValue !== decl.value) {\n updatedStyles.set(key, { ...decl, value: newValue });\n }\n }\n\n return updatedStyles;\n};\n\n// Update var() references in HTML Embed code props (pure function for testing)\nexport const updateVarReferencesInProps = (\n props: Props,\n oldProperty: string,\n newProperty: string\n): Props => {\n const updatedProps = new Map(props);\n const regex = createVarNameRegex(oldProperty);\n\n for (const [key, prop] of updatedProps) {\n if (prop.type === \"string\" && prop.name === \"code\" && prop.value) {\n const updatedValue = prop.value.replace(regex, newProperty);\n if (updatedValue !== prop.value) {\n updatedProps.set(key, { ...prop, value: updatedValue });\n }\n }\n }\n\n return updatedProps;\n};\n\nexport const renameCssVariable = (\n oldProperty: string,\n newProperty: string\n): CssVariableError | undefined => {\n const validationError = validateCssVariableName(newProperty, oldProperty);\n if (validationError) {\n return validationError;\n }\n\n serverSyncStore.createTransaction([$styles, $props], (styles, props) => {\n const updatedStyles = performCssVariableRename(\n styles,\n oldProperty,\n newProperty\n );\n\n // Clear and repopulate the styles map\n styles.clear();\n for (const [key, value] of updatedStyles) {\n styles.set(key, value);\n }\n\n // Update var() references in HTML Embed code props\n const updatedProps = updateVarReferencesInProps(\n props,\n oldProperty,\n newProperty\n );\n props.clear();\n for (const [key, value] of updatedProps) {\n props.set(key, value);\n }\n });\n\n return;\n};\n\nexport const deleteUnusedCssVariables = () => {\n const unusedVariables = $unusedCssVariables.get();\n\n if (unusedVariables.size === 0) {\n return 0;\n }\n\n // Delete all unused variable declarations\n serverSyncStore.createTransaction([$styles], (styles) => {\n const keysToDelete: string[] = [];\n\n for (const [key, styleDecl] of styles) {\n if (unusedVariables.has(styleDecl.property)) {\n keysToDelete.push(key);\n }\n }\n\n for (const key of keysToDelete) {\n styles.delete(key);\n }\n });\n\n return unusedVariables.size;\n};\n\ntype DeleteCssVariableDialogProps = {\n cssVariable?: { property: string };\n onClose: () => void;\n onConfirm: (property: string) => void;\n};\n\nexport const DeleteCssVariableDialog = ({\n cssVariable,\n onClose,\n onConfirm,\n}: DeleteCssVariableDialogProps) => {\n return (\n {\n if (isOpen === false) {\n onClose();\n }\n }}\n >\n {\n // Prevent command panel from handling keyboard events\n event.stopPropagation();\n }}\n >\n Delete confirmation\n \n {`Delete CSS variable \"${cssVariable?.property}\" from the project?`}\n \n {\n onConfirm(cssVariable!.property);\n onClose();\n }}\n >\n Delete\n \n \n \n \n \n \n \n \n );\n};\n\ntype RenameCssVariableDialogProps = {\n cssVariable?: { property: string };\n onClose: () => void;\n onConfirm: (oldProperty: string, newProperty: string) => void;\n};\n\nexport const RenameCssVariableDialog = ({\n cssVariable,\n onClose,\n onConfirm,\n}: RenameCssVariableDialogProps) => {\n const [name, setName] = useState(\"\");\n const [error, setError] = useState();\n\n // Reset name and clear error when cssVariable changes\n useEffect(() => {\n if (cssVariable?.property !== undefined) {\n setName(cssVariable.property);\n setError(undefined);\n }\n }, [cssVariable?.property]);\n\n const handleConfirm = () => {\n const renameError = renameCssVariable(cssVariable!.property, name);\n if (renameError) {\n setError(renameError.message);\n return;\n }\n onConfirm(cssVariable!.property, name);\n onClose();\n };\n\n return (\n {\n if (isOpen === false) {\n onClose();\n }\n }}\n >\n {\n // Prevent command panel from handling keyboard events\n event.stopPropagation();\n if (event.key === \"Enter\" && !error) {\n handleConfirm();\n }\n }}\n >\n Rename CSS Variable\n \n \n {\n setName(event.target.value);\n setError(undefined);\n }}\n color={error ? \"error\" : undefined}\n />\n {error && (\n \n {error}\n \n )}\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nconst DeleteUnusedCssVariablesDialogContent = ({\n onClose,\n}: {\n onClose: () => void;\n}) => {\n const unusedVariables = useStore($unusedCssVariables);\n // Convert Set to Array for display\n const unusedVariablesArray = Array.from(unusedVariables);\n\n return (\n \n {unusedVariablesArray.length === 0 ? (\n There are no unused CSS variables to delete.\n ) : (\n <>\n \n Delete {unusedVariablesArray.length} unused CSS{\" \"}\n {unusedVariablesArray.length === 1 ? \"variable\" : \"variables\"} from\n the project?\n \n \n {unusedVariablesArray.join(\", \")}\n \n \n )}\n \n {unusedVariablesArray.length > 0 && (\n {\n const deletedCount = deleteUnusedCssVariables();\n onClose();\n if (deletedCount === 0) {\n toast.info(\"No unused CSS variables to delete\");\n } else {\n toast.success(\n `Deleted ${deletedCount} unused CSS ${deletedCount === 1 ? \"variable\" : \"variables\"}`\n );\n }\n }}\n >\n Delete\n \n )}\n \n \n \n \n \n );\n};\n\nexport const DeleteUnusedCssVariablesDialog = () => {\n const open = useStore($isDeleteUnusedCssVariablesDialogOpen);\n const handleClose = () => {\n $isDeleteUnusedCssVariablesDialogOpen.set(false);\n };\n\n return (\n {\n if (isOpen === false) {\n handleClose();\n }\n }}\n >\n {\n event.stopPropagation();\n }}\n >\n Delete unused CSS variables\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/data-variable-utils.test.tsx", "content": "import { expect, test } from \"vitest\";\nimport { atom } from \"nanostores\";\nimport { $dataSources } from \"~/shared/sync/data-stores\";\nimport { validateDataVariableName } from \"./data-variable-utils\";\nimport type { DataSources, DataSource } from \"@webstudio-is/sdk\";\n\n// Mock the nano-states module\nconst mockDataSources = atom(new Map());\n\n// Replace the actual store with our mock\nObject.defineProperty($dataSources, \"get\", {\n value: () => mockDataSources.get(),\n});\n\n// Helper to create a minimal variable data source for testing\nconst createVariable = (\n id: string,\n name: string,\n scopeInstanceId?: string\n): DataSource => ({\n id,\n scopeInstanceId,\n name,\n type: \"variable\",\n value: { type: \"string\", value: \"\" },\n});\n\ntest(\"validateDataVariableName returns required error for empty name\", () => {\n mockDataSources.set(new Map());\n\n const error = validateDataVariableName(\"\");\n expect(error?.type).toBe(\"required\");\n expect(error?.message).toBe(\"Variable name is required\");\n});\n\ntest(\"validateDataVariableName returns required error for whitespace-only name\", () => {\n mockDataSources.set(new Map());\n\n const error = validateDataVariableName(\" \");\n expect(error?.type).toBe(\"required\");\n});\n\ntest(\"validateDataVariableName returns undefined for valid unique name\", () => {\n mockDataSources.set(\n new Map([[\"var1\", createVariable(\"var1\", \"existingVariable\", \"instance1\")]])\n );\n\n const error = validateDataVariableName(\"newVariable\");\n expect(error).toBeUndefined();\n});\n\ntest(\"validateDataVariableName returns duplicate error when name exists on same instance\", () => {\n mockDataSources.set(\n new Map([\n [\"var1\", createVariable(\"var1\", \"myVariable\", \"instance1\")],\n [\"var2\", createVariable(\"var2\", \"otherVariable\", \"instance1\")],\n ])\n );\n\n // Creating a new variable with existing name on same instance\n const error = validateDataVariableName(\"myVariable\", \"var2\");\n expect(error?.type).toBe(\"duplicate\");\n});\n\ntest(\"validateDataVariableName allows same name on different instances\", () => {\n mockDataSources.set(\n new Map([\n [\"var1\", createVariable(\"var1\", \"myVariable\", \"instance1\")],\n [\"var2\", createVariable(\"var2\", \"otherVariable\", \"instance2\")],\n ])\n );\n\n // Creating a variable on instance2 with name that exists on instance1\n const error = validateDataVariableName(\"myVariable\", \"var2\");\n expect(error).toBeUndefined();\n});\n\ntest(\"validateDataVariableName allows renaming variable to same name\", () => {\n mockDataSources.set(\n new Map([[\"var1\", createVariable(\"var1\", \"myVariable\", \"instance1\")]])\n );\n\n // Renaming var1 to its current name\n const error = validateDataVariableName(\"myVariable\", \"var1\");\n expect(error).toBeUndefined();\n});\n\ntest(\"validateDataVariableName returns duplicate error when renaming to existing name on same instance\", () => {\n mockDataSources.set(\n new Map([\n [\"var1\", createVariable(\"var1\", \"firstVariable\", \"instance1\")],\n [\"var2\", createVariable(\"var2\", \"secondVariable\", \"instance1\")],\n ])\n );\n\n // Renaming var2 to var1's name on same instance\n const error = validateDataVariableName(\"firstVariable\", \"var2\");\n expect(error?.type).toBe(\"duplicate\");\n});\n\ntest(\"validateDataVariableName ignores non-variable data sources\", () => {\n mockDataSources.set(\n new Map([\n [\"var1\", createVariable(\"var1\", \"myVariable\", \"instance1\")],\n [\n \"resource1\",\n {\n id: \"resource1\",\n scopeInstanceId: \"instance1\",\n name: \"myResource\",\n type: \"resource\",\n resourceId: \"res1\",\n },\n ],\n ])\n );\n\n // Creating a variable with same name as resource should be allowed\n const error = validateDataVariableName(\"myResource\");\n expect(error).toBeUndefined();\n});\n\ntest(\"validateDataVariableName validates for new variables without variableId\", () => {\n mockDataSources.set(\n new Map([[\"var1\", createVariable(\"var1\", \"existingVariable\", \"instance1\")]])\n );\n\n // Creating a new variable (no variableId) with existing name on same instance\n const error = validateDataVariableName(\n \"existingVariable\",\n undefined,\n \"instance1\"\n );\n expect(error?.type).toBe(\"duplicate\");\n});\n\ntest(\"validateDataVariableName handles undefined scopeInstanceId correctly\", () => {\n mockDataSources.set(\n new Map([[\"var1\", createVariable(\"var1\", \"globalVariable\", undefined)]])\n );\n\n // Creating a variable with same name but undefined scope\n const error = validateDataVariableName(\"globalVariable\");\n expect(error?.type).toBe(\"duplicate\");\n});\n" }, { "path": "apps/builder/app/builder/shared/data-variable-utils.tsx", "content": "import { useState, useEffect } from \"react\";\nimport { atom, computed } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport { toast } from \"@webstudio-is/design-system\";\nimport {\n Dialog,\n DialogContent,\n DialogTitle,\n DialogClose,\n Flex,\n Text,\n Button,\n theme,\n InputField,\n} from \"@webstudio-is/design-system\";\nimport type { DataSource, Instance } from \"@webstudio-is/sdk\";\nimport { ROOT_INSTANCE_ID } from \"@webstudio-is/sdk\";\nimport {\n $pages,\n $instances,\n $props,\n $dataSources,\n $resources,\n} from \"~/shared/nano-states\";\nimport { serverSyncStore } from \"~/shared/sync/sync-stores\";\nimport { findVariableUsagesByInstance } from \"~/shared/data-variables\";\n\nconst $isDeleteUnusedDataVariablesDialogOpen = atom(false);\n\nexport const openDeleteUnusedDataVariablesDialog = () => {\n $isDeleteUnusedDataVariablesDialogOpen.set(true);\n};\n\nexport type DataVariableError = {\n type: \"required\" | \"duplicate\";\n message: string;\n};\n\n/**\n * Computed store that tracks which instances use each variable\n * Returns a Map of variable ID to Set of instance IDs\n */\nexport const $usedVariablesInInstances = computed(\n [$pages, $instances, $props, $dataSources, $resources],\n (pages, instances, props, dataSources, resources) => {\n return findVariableUsagesByInstance({\n startingInstanceId: ROOT_INSTANCE_ID,\n pages,\n instances,\n props,\n dataSources,\n resources,\n });\n }\n);\n\ntype DeleteDataVariableDialogProps = {\n variable?: { id: DataSource[\"id\"]; name: string; usages: number };\n onClose: () => void;\n onConfirm: (variableId: DataSource[\"id\"]) => void;\n};\n\nexport const DeleteDataVariableDialog = ({\n variable,\n onClose,\n onConfirm,\n}: DeleteDataVariableDialogProps) => {\n return (\n {\n if (isOpen === false) {\n onClose();\n }\n }}\n >\n {\n // Prevent command panel from handling keyboard events\n event.stopPropagation();\n }}\n >\n Delete confirmation\n \n \n {variable &&\n (variable.usages > 0\n ? `Delete \"${variable.name}\" variable from the project? It is used in ${variable.usages} ${variable.usages === 1 ? \"expression\" : \"expressions\"}.`\n : `Delete \"${variable.name}\" variable from the project?`)}\n \n \n {\n onConfirm(variable!.id);\n onClose();\n }}\n >\n Delete\n \n \n \n \n \n \n \n \n );\n};\n\nexport const deleteUnusedDataVariables = () => {\n const dataSources = $dataSources.get();\n const usedVariablesInInstances = $usedVariablesInInstances.get();\n const unusedVariableIds: DataSource[\"id\"][] = [];\n\n for (const dataSource of dataSources.values()) {\n if (dataSource.type === \"variable\") {\n const usages = usedVariablesInInstances.get(dataSource.id);\n if (usages === undefined || usages.size === 0) {\n unusedVariableIds.push(dataSource.id);\n }\n }\n }\n\n if (unusedVariableIds.length === 0) {\n return 0;\n }\n\n serverSyncStore.createTransaction(\n [$dataSources, $resources],\n (dataSources, resources) => {\n for (const variableId of unusedVariableIds) {\n const dataSource = dataSources.get(variableId);\n // Cleanup resource when variable is deleted\n if (dataSource?.type === \"resource\") {\n resources.delete(dataSource.resourceId);\n }\n dataSources.delete(variableId);\n }\n }\n );\n\n return unusedVariableIds.length;\n};\n\nexport const validateDataVariableName = (\n name: string,\n variableId?: DataSource[\"id\"],\n scopeInstanceId?: Instance[\"id\"]\n): DataVariableError | undefined => {\n if (name.trim().length === 0) {\n return {\n type: \"required\",\n message: \"Variable name is required\",\n };\n }\n\n const dataSources = $dataSources.get();\n const currentVariable = variableId ? dataSources.get(variableId) : undefined;\n const actualScopeInstanceId =\n scopeInstanceId ??\n (currentVariable?.type === \"variable\"\n ? currentVariable.scopeInstanceId\n : undefined);\n\n for (const dataSource of dataSources.values()) {\n if (\n dataSource.type === \"variable\" &&\n dataSource.scopeInstanceId === actualScopeInstanceId &&\n dataSource.name === name &&\n dataSource.id !== variableId\n ) {\n return {\n type: \"duplicate\",\n message: \"Name is already used by another variable on this instance\",\n };\n }\n }\n};\n\nexport const renameDataVariable = (\n id: DataSource[\"id\"],\n name: string\n): DataVariableError | undefined => {\n const validationError = validateDataVariableName(name, id);\n if (validationError) {\n return validationError;\n }\n\n serverSyncStore.createTransaction([$dataSources], (dataSources) => {\n const dataSource = dataSources.get(id);\n if (dataSource?.type === \"variable\") {\n dataSource.name = name;\n }\n });\n};\n\ntype RenameDataVariableDialogProps = {\n variable?: { id: DataSource[\"id\"]; name: string };\n onClose: () => void;\n onConfirm: (variableId: DataSource[\"id\"], newName: string) => void;\n};\n\nexport const RenameDataVariableDialog = ({\n variable,\n onClose,\n onConfirm,\n}: RenameDataVariableDialogProps) => {\n const [name, setName] = useState(\"\");\n const [error, setError] = useState();\n\n // Reset name and clear error when variable changes\n useEffect(() => {\n if (variable?.name !== undefined) {\n setName(variable.name);\n setError(undefined);\n }\n }, [variable?.id, variable?.name]);\n\n const handleConfirm = () => {\n const renameError = renameDataVariable(variable!.id, name);\n if (renameError) {\n setError(renameError.message);\n return;\n }\n onConfirm(variable!.id, name);\n onClose();\n };\n\n return (\n {\n if (isOpen === false) {\n onClose();\n }\n }}\n >\n {\n // Prevent command panel from handling keyboard events\n event.stopPropagation();\n if (event.key === \"Enter\" && !error) {\n handleConfirm();\n }\n }}\n >\n Rename variable\n \n \n {\n setName(event.target.value);\n setError(undefined);\n }}\n color={error ? \"error\" : undefined}\n />\n {error && (\n \n {error}\n \n )}\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport const DeleteUnusedDataVariablesDialog = () => {\n const open = useStore($isDeleteUnusedDataVariablesDialogOpen);\n const usedVariablesInInstances = useStore($usedVariablesInInstances);\n const dataSources = useStore($dataSources);\n\n const handleClose = () => {\n $isDeleteUnusedDataVariablesDialogOpen.set(false);\n };\n\n const unusedVariables: Array<{ id: string; name: string }> = [];\n for (const dataSource of dataSources.values()) {\n if (dataSource.type === \"variable\") {\n const usages = usedVariablesInInstances.get(dataSource.id);\n if (usages === undefined || usages.size === 0) {\n unusedVariables.push({ id: dataSource.id, name: dataSource.name });\n }\n }\n }\n\n return (\n {\n if (isOpen === false) {\n handleClose();\n }\n }}\n >\n {\n event.stopPropagation();\n }}\n >\n Delete unused data variables\n \n {unusedVariables.length === 0 ? (\n There are no unused data variables to delete.\n ) : (\n <>\n \n Delete {unusedVariables.length} unused data{\" \"}\n {unusedVariables.length === 1 ? \"variable\" : \"variables\"} from\n the project?\n \n \n {unusedVariables.map((variable) => variable.name).join(\", \")}\n \n \n )}\n \n {unusedVariables.length > 0 && (\n {\n const deletedCount = deleteUnusedDataVariables();\n handleClose();\n if (deletedCount === 0) {\n toast.info(\"No unused data variables to delete\");\n } else {\n toast.success(\n `Deleted ${deletedCount} unused data ${deletedCount === 1 ? \"variable\" : \"variables\"}`\n );\n }\n }}\n >\n Delete\n \n )}\n \n \n \n \n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/expression-editor.stories.tsx", "content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport { StorySection } from \"@webstudio-is/design-system\";\nimport { ExpressionEditor as ExpressionEditorComponent } from \"./expression-editor\";\nimport { useState } from \"react\";\n\nexport default {\n title: \"Expression Editor\",\n component: ExpressionEditorComponent,\n} satisfies Meta;\n\nconst scope = {\n $ws$dataSource$123: {\n long: \"!s fb skffsjdfksjdlkjslkkjlkj sjf lsdjsskljl kjsf\",\n array: [],\n number: 0,\n boolean: true,\n object: { param: \"value\" },\n },\n $ws$dataSource$321: { my: \"god\" },\n $ws$dataSource$computed: [\n // 0-11 keys\n { \"with space\": 0 },\n { \"0_numeric\": 0 },\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n ],\n};\nconst aliases = new Map([\n [\"$ws$dataSource$123\", \"Hello world\"],\n [\"$ws$dataSource$321\", \"oh\"],\n [\"$ws$dataSource$computed\", \"computed\"],\n]);\n\nconst ExpressionStory = () => {\n const [value, setValue] = useState(\"$ws$dataSource$123.world\");\n return (\n \n );\n};\n\nexport const ExpressionEditor: StoryObj = {\n render: () => (\n \n

    \n {`Start typing \"h\" or \"o\" or press \"Tab\" to start variables completion`}\n

    \n \n     \n ),\n};\n" }, { "path": "apps/builder/app/builder/shared/expression-editor.test.ts", "content": "import { describe, test, expect } from \"vitest\";\nimport { generateCompletionOptions } from \"./expression-editor\";\n\ndescribe(\"generateCompletionOptions\", () => {\n describe(\"object properties\", () => {\n test(\"returns object properties with preview values\", () => {\n const target = { name: \"John\", age: 30, email: \"john@example.com\" };\n const options = generateCompletionOptions({\n target,\n pathName: \"\",\n pathLength: 1,\n });\n\n expect(options).toEqual([\n { label: \"name\", detail: `\"John\"` },\n { label: \"age\", detail: \"30\" },\n { label: \"email\", detail: `\"john@example.com\"` },\n ]);\n });\n\n test(\"returns all properties regardless of pathName (filtering happens in CodeMirror layer)\", () => {\n const target = { name: \"John\", age: 30, email: \"john@example.com\" };\n const options = generateCompletionOptions({\n target,\n pathName: \"na\",\n pathLength: 1,\n });\n\n // generateCompletionOptions doesn't filter - that's done by matchSorter in scopeCompletionSource\n expect(options).toEqual([\n { label: \"name\", detail: `\"John\"` },\n { label: \"age\", detail: \"30\" },\n { label: \"email\", detail: `\"john@example.com\"` },\n ]);\n });\n\n test(\"handles properties with special characters\", () => {\n const target = { \"prop with spaces\": \"value\", \"123\": \"numeric key\" };\n const options = generateCompletionOptions({\n target,\n pathName: \"\",\n pathLength: 1,\n });\n\n // Object.entries order for number-like keys may vary\n const labels = options.map((o) => o.label);\n expect(labels).toContain(\"prop with spaces\");\n expect(labels).toContain(\"123\");\n });\n });\n\n describe(\"array properties and methods\", () => {\n test(\"returns array indices, length property, and methods\", () => {\n const target = [\"apple\", \"banana\", \"cherry\"];\n const options = generateCompletionOptions({\n target,\n pathName: \"\",\n pathLength: 1,\n });\n\n // Should include indices, length, and all array methods\n const labels = options.map((o) => o.label);\n expect(labels).toContain(\"0\");\n expect(labels).toContain(\"1\");\n expect(labels).toContain(\"2\");\n expect(labels).toContain(\"length\");\n expect(labels).toContain(\"slice()\");\n\n // Check specific values\n const lengthOption = options.find((o) => o.label === \"length\");\n expect(lengthOption).toEqual({\n label: \"length\",\n detail: \"3\",\n type: \"property\",\n });\n });\n\n test(\"filters length property by pathName\", () => {\n const target = [1, 2, 3, 4, 5];\n const options = generateCompletionOptions({\n target,\n pathName: \"len\",\n pathLength: 1,\n });\n\n expect(options).toContainEqual({\n label: \"length\",\n detail: \"5\",\n type: \"property\",\n });\n });\n });\n\n describe(\"string methods\", () => {\n test(\"returns string methods when target is a string\", () => {\n const target = \"hello world\";\n const options = generateCompletionOptions({\n target,\n pathName: \"\",\n pathLength: 1,\n });\n\n const methodLabels = options.map((o) => o.label);\n expect(methodLabels).toContain(\"toUpperCase()\");\n expect(methodLabels).toContain(\"toLowerCase()\");\n expect(methodLabels).toContain(\"replace()\");\n });\n\n test(\"filters string methods by pathName\", () => {\n const target = \"test string\";\n const options = generateCompletionOptions({\n target,\n pathName: \"upper\",\n pathLength: 1,\n });\n\n // Should include both toUpperCase and toLocaleUpperCase\n const labels = options.map((o) => o.label);\n expect(labels).toContain(\"toUpperCase()\");\n expect(labels).toContain(\"toLocaleUpperCase()\");\n });\n\n test(\"does not return string methods for non-string targets\", () => {\n const target = { name: \"test\" };\n const options = generateCompletionOptions({\n target,\n pathName: \"upper\",\n pathLength: 1,\n });\n\n // Should only return object properties, no string methods\n const methodOptions = options.filter((o) => o.type === \"method\");\n expect(methodOptions).toEqual([]);\n });\n });\n\n describe(\"pathLength === 0 (top-level variables)\", () => {\n test(\"does not include methods for top-level variables\", () => {\n const target = \"hello\";\n const options = generateCompletionOptions({\n target,\n pathName: \"\",\n pathLength: 0,\n });\n\n expect(options).toEqual([]);\n });\n\n test(\"returns array indices for top-level arrays (but no methods)\", () => {\n const target = [1, 2, 3];\n const options = generateCompletionOptions({\n target,\n pathName: \"\",\n pathLength: 0,\n });\n\n // At pathLength === 0, we get array indices but no length/methods\n expect(options).toEqual([\n { label: \"0\", detail: \"1\" },\n { label: \"1\", detail: \"2\" },\n { label: \"2\", detail: \"3\" },\n ]);\n });\n });\n\n describe(\"non-object targets\", () => {\n test(\"returns empty array for null\", () => {\n const options = generateCompletionOptions({\n target: null,\n pathName: \"\",\n pathLength: 1,\n });\n\n expect(options).toEqual([]);\n });\n\n test(\"returns empty array for undefined\", () => {\n const options = generateCompletionOptions({\n target: undefined,\n pathName: \"\",\n pathLength: 1,\n });\n\n expect(options).toEqual([]);\n });\n\n test(\"returns empty array for primitive numbers\", () => {\n const options = generateCompletionOptions({\n target: 42,\n pathName: \"\",\n pathLength: 1,\n });\n\n expect(options).toEqual([]);\n });\n });\n\n describe(\"edge cases\", () => {\n test(\"handles empty object\", () => {\n const options = generateCompletionOptions({\n target: {},\n pathName: \"\",\n pathLength: 1,\n });\n\n expect(options).toEqual([]);\n });\n\n test(\"handles empty array\", () => {\n const options = generateCompletionOptions({\n target: [],\n pathName: \"\",\n pathLength: 1,\n });\n\n // Empty array has length and all array methods\n const labels = options.map((o) => o.label);\n expect(labels).toContain(\"length\");\n expect(labels).toContain(\"slice()\");\n\n const lengthOption = options.find((o) => o.label === \"length\");\n expect(lengthOption).toEqual({\n label: \"length\",\n detail: \"0\",\n type: \"property\",\n });\n });\n\n test(\"handles nested values in preview\", () => {\n const target = {\n nested: { inner: \"value\" },\n arr: [1, 2, 3],\n };\n const options = generateCompletionOptions({\n target,\n pathName: \"\",\n pathLength: 1,\n });\n\n // formatValuePreview returns \"JSON\" for complex objects\n expect(options).toEqual([\n { label: \"nested\", detail: \"JSON\" },\n { label: \"arr\", detail: \"JSON\" },\n ]);\n });\n });\n});\n" }, { "path": "apps/builder/app/builder/shared/expression-editor.tsx", "content": "import { useEffect, useMemo, type RefObject } from \"react\";\nimport { matchSorter } from \"match-sorter\";\nimport type { SyntaxNode } from \"@lezer/common\";\nimport { Facet, RangeSetBuilder } from \"@codemirror/state\";\nimport {\n type DecorationSet,\n type ViewUpdate,\n Decoration,\n WidgetType,\n ViewPlugin,\n keymap,\n EditorView,\n tooltips,\n} from \"@codemirror/view\";\nimport { bracketMatching, syntaxTree } from \"@codemirror/language\";\nimport { linter } from \"@codemirror/lint\";\nimport {\n type Completion,\n type CompletionSource,\n autocompletion,\n closeBrackets,\n closeBracketsKeymap,\n completionKeymap,\n CompletionContext,\n insertCompletionText,\n pickedCompletion,\n} from \"@codemirror/autocomplete\";\nimport { javascript } from \"@codemirror/lang-javascript\";\nimport { textVariants, css, rawTheme } from \"@webstudio-is/design-system\";\nimport {\n decodeDataVariableId,\n lintExpression,\n allowedStringMethods,\n allowedArrayMethods,\n} from \"@webstudio-is/sdk\";\nimport {\n EditorContent,\n EditorDialog,\n EditorDialogButton,\n EditorDialogControl,\n type EditorApi,\n} from \"~/shared/code-editor-base\";\nimport {\n decodeDataVariableName,\n encodeDataVariableName,\n restoreExpressionVariables,\n unsetExpressionVariables,\n} from \"~/shared/data-variables\";\n\nexport type { EditorApi };\n\nexport const formatValue = (value: unknown) => {\n try {\n if (Array.isArray(value)) {\n // format arrays as multiline\n return JSON.stringify(value, null, 2);\n }\n if (typeof value === \"object\" && value !== null) {\n // format objects with parentheses to enforce correct\n // syntax highlighting as expression instead of block\n return `(${JSON.stringify(value, null, 2)})`;\n }\n return JSON.stringify(value);\n } catch {\n // show nothing when value is invalid\n return \"\";\n }\n};\n\nexport const formatValuePreview = (value: unknown) => {\n if (typeof value === \"string\") {\n return JSON.stringify(value);\n }\n if (Number.isNaN(value)) {\n return \"nan\";\n }\n if (typeof value === \"number\") {\n return value.toString();\n }\n if (typeof value === \"boolean\") {\n return value.toString();\n }\n if (value === undefined) {\n return \"\";\n }\n if (value === null) {\n return \"null\";\n }\n return \"JSON\";\n};\n\ntype Scope = Record;\n\ntype Aliases = Map;\n\nconst VariablesData = Facet.define<{\n scope: Scope;\n aliases: Aliases;\n}>();\n\n// completion based on\n// https://github.com/codemirror/lang-javascript/blob/4dcee95aee9386fd2c8ad55f93e587b39d968489/src/complete.ts\n\nconst Identifier = /^[\\p{L}$][\\p{L}\\p{N}$]*$/u;\n\nconst pathFor = (\n read: (node: SyntaxNode) => string,\n member: SyntaxNode,\n name: string\n) => {\n const path: string[] = [];\n // traverse from current node to the root variable\n for (;;) {\n const object = member.firstChild;\n if (object?.name === \"VariableName\") {\n path.push(read(object));\n return { path: path.reverse(), name };\n }\n if (object?.name === \"MemberExpression\") {\n // MemberExpression(SyntaxNode PropertyName)\n if (object.lastChild?.name === \"PropertyName\") {\n path.push(read(object.lastChild!));\n member = object;\n continue;\n }\n // MemberExpression(SyntaxNode [ SyntaxNode ])\n if (object.lastChild?.name === \"]\") {\n const computed = object.lastChild.prevSibling;\n if (computed?.name === \"Number\") {\n path.push(read(computed));\n member = object;\n continue;\n }\n if (computed?.name === \"String\") {\n // trim quotes from string literal\n path.push(read(computed).slice(1, -1));\n member = object;\n continue;\n }\n }\n }\n // unexpected case\n break;\n }\n};\n\n/// Helper function for defining JavaScript completion sources. It\n/// returns the completable name and object path for a completion\n/// context, or undefined if no name/property completion should happen at\n/// that position. For example, when completing after `a.b.c` it will\n/// return `{path: [\"a\", \"b\"], name: \"c\"}`. When completing after `x`\n/// it will return `{path: [], name: \"x\"}`. When not in a property or\n/// name, it will return undefined if `context.explicit` is false, and\n/// `{path: [], name: \"\"}` otherwise.\nconst completionPath = (\n context: CompletionContext\n): { path: string[]; name: string } | undefined => {\n const read = (node: SyntaxNode) =>\n context.state.doc.sliceString(node.from, node.to);\n const inner = syntaxTree(context.state).resolveInner(context.pos, -1);\n // suggest global variable name when user start completion explicitly\n if (inner.name === \"Script\") {\n if (context.explicit) {\n return { path: [], name: \"\" };\n }\n return;\n }\n // complete variable name when start entering\n if (inner.name === \"VariableName\") {\n return { path: [], name: read(inner) };\n }\n // suggest property name when enter `object.`\n if (inner.name === \".\" && inner.parent?.name === \"MemberExpression\") {\n return pathFor(read, inner.parent, \"\");\n }\n // complete property when enter \"object.prope\"\n if (\n inner.name === \"PropertyName\" &&\n inner.parent?.name === \"MemberExpression\"\n ) {\n return pathFor(read, inner.parent, read(inner));\n }\n return;\n};\n\n/**\n * Generate completion options for object properties and array/string methods.\n * Exported for testing.\n */\nexport const generateCompletionOptions = ({\n target,\n pathName,\n pathLength,\n}: {\n target: unknown;\n pathName: string;\n pathLength: number;\n}): Array<{ label: string; detail: string; type?: string }> => {\n const options: Array<{ label: string; detail: string; type?: string }> = [];\n\n // Add object properties\n if (typeof target === \"object\" && target !== null) {\n for (const [name, value] of Object.entries(target)) {\n options.push({\n label: name,\n detail: formatValuePreview(value),\n });\n }\n }\n\n // Add string/array methods and properties for nested paths\n if (pathLength > 0) {\n const isString = typeof target === \"string\";\n const isArray = Array.isArray(target);\n\n if (isString) {\n for (const method of allowedStringMethods) {\n if (method.toLowerCase().includes(pathName.toLowerCase())) {\n options.push({\n label: `${method}()`,\n detail: \"string method\",\n type: \"method\",\n });\n }\n }\n }\n\n if (isArray) {\n // Add length property\n if (\"length\".toLowerCase().includes(pathName.toLowerCase())) {\n options.push({\n label: \"length\",\n detail: `${target.length}`,\n type: \"property\",\n });\n }\n\n for (const method of allowedArrayMethods) {\n if (method.toLowerCase().includes(pathName.toLowerCase())) {\n options.push({\n label: `${method}()`,\n detail: \"array method\",\n type: \"method\",\n });\n }\n }\n }\n }\n\n return options;\n};\n\n// Defines a completion source that completes from the given scope\n// object (for example `globalThis`). Will enter properties\n// of the object when completing properties on a directly-named path.\nconst scopeCompletionSource: CompletionSource = (context) => {\n const [{ scope }] = context.state.facet(VariablesData);\n const path = completionPath(context);\n if (path === undefined) {\n return null;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let target: any = scope;\n for (const step of path.path) {\n target = target?.[step];\n if (target == null) {\n return null;\n }\n }\n\n // Generate base completion options using exported function\n const baseOptions = generateCompletionOptions({\n target,\n pathName: path.name,\n pathLength: path.path.length,\n });\n\n // Convert to CodeMirror Completion format with apply functions\n let options: Completion[] = baseOptions.map((option) => {\n const name = option.label;\n return {\n label: name,\n displayLabel: decodeDataVariableName(name),\n detail: option.detail,\n type: option.type,\n apply: (view, completion, from, to) => {\n const textToInsert = name;\n // complete valid js identifier or top level variable without quotes\n if (Identifier.test(textToInsert) || path.path.length === 0) {\n // complete with dot\n view.dispatch({\n ...insertCompletionText(view.state, textToInsert, from, to),\n annotations: pickedCompletion.of(completion),\n });\n } else {\n // complete with computed member expression\n view.dispatch({\n ...insertCompletionText(\n view.state,\n // `param with spaces` -> [\"param with spaces\"]\n // `0` -> [0]\n `[${/^\\d+$/.test(textToInsert) ? textToInsert : JSON.stringify(textToInsert)}]`,\n // remove dot when autocomplete computed member expression\n // variable.\n // variable[\"name\"]\n from - 1,\n to\n ),\n annotations: pickedCompletion.of(completion),\n });\n }\n },\n };\n });\n\n // Sort options if target is an object\n if (typeof target === \"object\" && target !== null) {\n options = matchSorter(options, path.name, {\n keys: [(option) => option.displayLabel ?? option.label],\n baseSort: (left, right) => {\n const leftName = left.item.label;\n const rightName = right.item.label;\n const leftIndex = Number(leftName);\n const rightIndex = Number(rightName);\n // sort string fields\n if (Number.isNaN(leftIndex) || Number.isNaN(rightIndex)) {\n return leftName.localeCompare(rightName);\n }\n // sort indexes if both numbers\n return leftIndex - rightIndex;\n },\n });\n }\n\n return {\n from: context.pos - path.name.length,\n filter: false,\n options,\n };\n};\n\n/**\n * Highlight variables and replace their $ws$dataSource$name like labels\n * with user names\n *\n * https://codemirror.net/examples/decoration/#atomic-ranges\n */\n\nclass VariableWidget extends WidgetType {\n text: string;\n constructor(text: string) {\n super();\n this.text = text;\n }\n toDOM(): HTMLElement {\n const span = document.createElement(\"span\");\n span.style.backgroundColor = \"rgba(24, 119, 232, 0.2)\";\n span.textContent = this.text;\n return span;\n }\n}\n\nconst getVariableDecorations = (view: EditorView) => {\n const builder = new RangeSetBuilder();\n syntaxTree(view.state).iterate({\n from: 0,\n to: view.state.doc.length,\n enter: (node) => {\n if (node.name === \"VariableName\") {\n const [{ scope }] = view.state.facet(VariablesData);\n const identifier = view.state.doc.sliceString(node.from, node.to);\n const variableName = decodeDataVariableName(identifier);\n if (identifier in scope) {\n builder.add(\n node.from,\n node.to,\n Decoration.replace({\n widget: new VariableWidget(variableName!),\n })\n );\n }\n }\n },\n });\n return builder.finish();\n};\n\nconst variablesPlugin = ViewPlugin.fromClass(\n class {\n decorations: DecorationSet;\n constructor(view: EditorView) {\n this.decorations = getVariableDecorations(view);\n }\n update(update: ViewUpdate) {\n if (update.docChanged) {\n this.decorations = getVariableDecorations(update.view);\n }\n }\n },\n {\n decorations: (instance) => instance.decorations,\n provide: (plugin) =>\n EditorView.atomicRanges.of((view) => {\n return view.plugin(plugin)?.decorations || Decoration.none;\n }),\n }\n);\n\nconst emptyScope: Scope = {};\nconst emptyAliases: Aliases = new Map();\n\nconst wrapperStyle = css({\n // 1 line is 16px\n // set and max 20 lines\n \"--ws-code-editor-max-height\": \"320px\",\n});\n\nconst linterTooltipTheme = EditorView.theme({\n \".cm-tooltip:has(.cm-tooltip-lint)\": {\n backgroundColor: \"transparent\",\n borderWidth: 0,\n paddingTop: rawTheme.spacing[5],\n paddingBottom: rawTheme.spacing[5],\n pointerEvents: \"none\",\n },\n \".cm-tooltip-lint\": {\n backgroundColor: rawTheme.colors.backgroundTooltipMain,\n color: rawTheme.colors.foregroundContrastMain,\n borderRadius: rawTheme.borderRadius[7],\n padding: rawTheme.spacing[5],\n },\n \".cm-tooltip-lint .cm-diagnostic\": {\n borderWidth: 0,\n padding: 0,\n margin: 0,\n ...textVariants.regular,\n },\n});\n\nconst expressionLinter = linter((view) => {\n const [{ scope }] = view.state.facet(VariablesData);\n return lintExpression({\n expression: view.state.doc.toString(),\n availableVariables: new Set(Object.keys(scope)),\n });\n});\n\nexport const ExpressionEditor = ({\n editorApiRef,\n scope = emptyScope,\n aliases = emptyAliases,\n color,\n autoFocus = false,\n readOnly = false,\n value,\n onChange,\n onChangeComplete,\n}: {\n editorApiRef?: RefObject;\n /**\n * object with variables and their data to autocomplete\n */\n scope?: Scope;\n /**\n * variable aliases to show instead of $ws$dataSource$id\n */\n aliases?: Aliases;\n color?: \"error\";\n autoFocus?: boolean;\n readOnly?: boolean;\n value: string;\n onChange: (value: string) => void;\n onChangeComplete: (value: string) => void;\n}) => {\n const { nameById, idByName } = useMemo(() => {\n const nameById = new Map();\n const idByName = new Map();\n for (const [identifier, name] of aliases) {\n const id = decodeDataVariableId(identifier);\n if (id) {\n nameById.set(id, name);\n idByName.set(name, id);\n }\n }\n return { nameById, idByName };\n }, [aliases]);\n const expressionWithUnsetVariables = useMemo(() => {\n return unsetExpressionVariables({\n expression: value,\n unsetNameById: nameById,\n });\n }, [value, nameById]);\n const scopeWithUnsetVariables = useMemo(() => {\n const newScope: typeof scope = {};\n for (const [identifier, value] of Object.entries(scope)) {\n const name = aliases.get(identifier);\n if (name) {\n newScope[encodeDataVariableName(name)] = value;\n }\n }\n return newScope;\n }, [scope, aliases]);\n const aliasesWithUnsetVariables = useMemo(() => {\n const newAliases: typeof aliases = new Map();\n for (const [_identifier, name] of aliases) {\n newAliases.set(encodeDataVariableName(name), name);\n }\n return newAliases;\n }, [aliases]);\n\n const extensions = useMemo(\n () => [\n bracketMatching(),\n closeBrackets(),\n javascript({}),\n VariablesData.of({\n scope: scopeWithUnsetVariables,\n aliases: aliasesWithUnsetVariables,\n }),\n // render autocomplete in body\n // to prevent popover scroll overflow\n tooltips({ parent: document.body }),\n autocompletion({\n override: [scopeCompletionSource],\n icons: false,\n }),\n variablesPlugin,\n keymap.of([...closeBracketsKeymap, ...completionKeymap]),\n expressionLinter,\n linterTooltipTheme,\n ],\n [scopeWithUnsetVariables, aliasesWithUnsetVariables]\n );\n\n // prevent clicking on autocomplete options propagating to body\n // and closing dialogs and popovers\n useEffect(() => {\n const handlePointerDown = (event: PointerEvent) => {\n if (\n event.target instanceof HTMLElement &&\n event.target.closest(\".cm-tooltip-autocomplete\")\n ) {\n event.stopPropagation();\n }\n };\n const options = { capture: true };\n document.addEventListener(\"pointerdown\", handlePointerDown, options);\n return () => {\n document.removeEventListener(\"pointerdown\", handlePointerDown, options);\n };\n }, []);\n\n const content = (\n {\n const expressionWithRestoredVariables = restoreExpressionVariables({\n expression: newValue,\n maskedIdByName: idByName,\n });\n onChange(expressionWithRestoredVariables);\n }}\n onChangeComplete={(newValue: string) => {\n const expressionWithRestoredVariables = restoreExpressionVariables({\n expression: newValue,\n maskedIdByName: idByName,\n });\n onChangeComplete(expressionWithRestoredVariables);\n }}\n />\n );\n\n return (\n
    \n \n {content}\n \n \n \n \n
    \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/fonts-manager/fonts-manager.tsx", "content": "import {\n DeprecatedList,\n DeprecatedListItem,\n useDeprecatedList,\n theme,\n useSearchFieldKeys,\n findNextListItemIndex,\n Tooltip,\n Text,\n rawTheme,\n Link,\n Flex,\n} from \"@webstudio-is/design-system\";\nimport {\n AssetsShell,\n deleteAssets,\n Separator,\n useAssets,\n} from \"~/builder/shared/assets\";\nimport { useMemo, useState } from \"react\";\nimport { useMenu } from \"./item-menu\";\nimport { CheckMarkIcon, InfoCircleIcon } from \"@webstudio-is/icons\";\nimport {\n type Item,\n filterIdsByFamily,\n filterItems,\n groupItemsByType,\n toItems,\n} from \"./item-utils\";\nimport type { FontFamilyValue } from \"@webstudio-is/css-engine\";\n\nconst useLogic = ({ onChange, value }: FontsManagerProps) => {\n const { assetContainers } = useAssets(\"font\");\n const [selectedIndex, setSelectedIndex] = useState(-1);\n const fontItems = useMemo(() => toItems(assetContainers), [assetContainers]);\n\n const searchProps = useSearchFieldKeys({\n onMove({ direction }) {\n if (direction === \"current\") {\n handleChangeCurrent(selectedIndex);\n return;\n }\n const nextIndex = findNextListItemIndex(\n selectedIndex,\n groupedItems.length,\n direction\n );\n setSelectedIndex(nextIndex);\n },\n });\n\n const filteredItems = useMemo(\n () =>\n searchProps.value === \"\"\n ? fontItems\n : filterItems(searchProps.value, fontItems),\n [fontItems, searchProps.value]\n );\n\n const { uploadedItems, systemItems, groupedItems } = useMemo(\n () => groupItemsByType(filteredItems),\n [filteredItems]\n );\n\n const currentIndex = useMemo(() => {\n return groupedItems.findIndex((item) => item.label === value?.value[0]);\n }, [groupedItems, value]);\n\n const handleChangeCurrent = (nextCurrentIndex: number) => {\n const item = groupedItems[nextCurrentIndex];\n if (item !== undefined) {\n onChange(item.label);\n }\n };\n\n const { getItemProps, getListProps } = useDeprecatedList({\n items: groupedItems,\n selectedIndex,\n currentIndex,\n onSelect: setSelectedIndex,\n onChangeCurrent: handleChangeCurrent,\n });\n\n const handleDelete = (index: number) => {\n const family = groupedItems[index].label;\n const ids = filterIdsByFamily(family, assetContainers);\n deleteAssets(ids);\n if (index === currentIndex) {\n onChange(undefined);\n }\n };\n\n return {\n groupedItems,\n uploadedItems,\n systemItems,\n selectedIndex,\n handleDelete,\n handleSelect: setSelectedIndex,\n getItemProps,\n getListProps,\n searchProps,\n };\n};\n\ntype FontsManagerProps = {\n value?: FontFamilyValue;\n onChange: (value?: string) => void;\n};\n\nexport const FontsManager = ({ value, onChange }: FontsManagerProps) => {\n const {\n groupedItems,\n uploadedItems,\n systemItems,\n handleDelete,\n handleSelect,\n selectedIndex,\n getListProps,\n getItemProps,\n searchProps,\n } = useLogic({ onChange, value });\n\n const listProps = getListProps();\n const { render: renderMenu, isOpen: isMenuOpen } = useMenu({\n selectedIndex,\n onSelect: handleSelect,\n onDelete: handleDelete,\n });\n\n const renderItem = (item: Item, index: number) => {\n const { key, ...itemProps } = getItemProps({ index });\n return (\n : undefined}\n suffix={\n item.type === \"uploaded\" ? (\n renderMenu(index)\n ) : itemProps.state === \"selected\" && item.description ? (\n \n {item.label}\n \n {`font-family: ${item.stack.join(\", \")};`}\n \n {item.description}\n \n }\n >\n \n \n ) : undefined\n }\n >\n {item.label}\n \n );\n };\n\n return (\n \n {\n if (isMenuOpen === false) {\n listProps.onBlur(event);\n }\n }}\n >\n {uploadedItems.length !== 0 && (\n {\"Uploaded\"}\n )}\n {uploadedItems.map(renderItem)}\n {systemItems.length !== 0 && (\n <>\n {uploadedItems.length !== 0 && }\n \n {\n \"System font stack CSS organized by typeface classification for every modern OS. No downloading, no layout shifts, no flashes— just instant renders. Learn more about \"\n }\n \n modern font stacks\n \n .\n \n }\n >\n \n \n }\n >\n System\n \n \n )}\n {systemItems.map((item, index) =>\n renderItem(item, index + uploadedItems.length)\n )}\n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/fonts-manager/index.ts", "content": "export * from \"./fonts-manager\";\nexport { toItems } from \"./item-utils\";\n" }, { "path": "apps/builder/app/builder/shared/fonts-manager/item-menu.tsx", "content": "import { useStore } from \"@nanostores/react\";\nimport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n Text,\n styled,\n Tooltip,\n SmallIconButton,\n} from \"@webstudio-is/design-system\";\nimport { EllipsesIcon } from \"@webstudio-is/icons\";\nimport { type FocusEventHandler, useState, useRef, useEffect } from \"react\";\nimport { theme } from \"@webstudio-is/design-system\";\nimport { $authPermit } from \"~/shared/nano-states\";\n\nconst MenuButton = styled(SmallIconButton, {\n \"&:hover, &:focus-visible\": {\n color: theme.colors.foregroundMain,\n },\n});\n\ntype ItemMenuProps = {\n onDelete: () => void;\n onOpenChange: (open: boolean) => void;\n onFocusTrigger?: FocusEventHandler;\n onBlurTrigger?: FocusEventHandler;\n};\n\nconst ItemMenu = ({\n onDelete,\n onOpenChange,\n onFocusTrigger,\n onBlurTrigger,\n}: ItemMenuProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const isMounted = useRef(false);\n\n useEffect(() => {\n isMounted.current = true;\n return () => {\n isMounted.current = false;\n };\n }, []);\n\n const authPermit = useStore($authPermit);\n\n const isDeleteDisabled = authPermit === \"view\";\n const tooltipContent = isDeleteDisabled\n ? \"View mode. You can't delete assets.\"\n : undefined;\n\n return (\n {\n // Apparently onOpenChange can be called after component was unmounted and results in warning.\n // Use case: deleting list item removes the item itself while menu is open.\n if (isMounted.current) {\n setIsOpen(open);\n }\n onOpenChange(open);\n }}\n >\n \n {\n // Prevent setting the current font to the item.\n event.stopPropagation();\n }}\n icon={}\n />\n \n \n \n {\n // Prevent setting the current font to the item.\n event.stopPropagation();\n }}\n onSelect={() => {\n onDelete();\n }}\n >\n Delete font\n \n \n \n \n );\n};\n\ntype UseMenu = {\n selectedIndex: number;\n onSelect: (index: number) => void;\n onDelete: (index: number) => void;\n};\n\nexport const useMenu = ({ selectedIndex, onSelect, onDelete }: UseMenu) => {\n const openMenu = useRef(-1);\n const focusedMenuTrigger = useRef(-1);\n\n const render = (index: number) => {\n const show =\n selectedIndex === index ||\n openMenu.current === index ||\n focusedMenuTrigger.current === index;\n\n if (show === false) {\n return;\n }\n\n return (\n {\n openMenu.current = open === true ? index : -1;\n onSelect(index);\n }}\n onDelete={() => {\n onDelete(index);\n }}\n onFocusTrigger={() => {\n focusedMenuTrigger.current = index;\n onSelect(-1);\n }}\n onBlurTrigger={() => {\n focusedMenuTrigger.current = -1;\n }}\n />\n );\n };\n\n return {\n render,\n isOpen: openMenu.current !== -1,\n };\n};\n" }, { "path": "apps/builder/app/builder/shared/fonts-manager/item-utils.ts", "content": "import { SYSTEM_FONTS } from \"@webstudio-is/fonts\";\nimport { matchSorter } from \"match-sorter\";\nimport type { AssetContainer } from \"../assets\";\n\nexport type Item = {\n label: string;\n type: \"uploaded\" | \"system\";\n description?: string;\n stack: Array;\n};\n\nexport const toItems = (\n assetContainers: Array\n): Array => {\n // We can have 2+ assets with the same family name, so we use a map to dedupe.\n const uploaded = new Map();\n for (const assetContainer of assetContainers) {\n if (assetContainer.status !== \"uploaded\") {\n continue;\n }\n\n const { asset } = assetContainer;\n // @todo need to teach ts the right type from useAssets\n if (\"meta\" in asset && \"family\" in asset.meta) {\n uploaded.set(asset.meta.family, {\n label: asset.meta.family,\n type: \"uploaded\",\n });\n }\n }\n\n const system = [];\n for (const [label, config] of SYSTEM_FONTS) {\n system.push({\n label,\n type: \"system\",\n description: config.description,\n stack: config.stack,\n });\n }\n return [...uploaded.values(), ...system];\n};\n\nexport const filterIdsByFamily = (\n family: string,\n assetContainers: Array\n) => {\n // One family may have multiple assets for different formats, so we need to find them all.\n return assetContainers\n .filter((assetContainer) => {\n if (assetContainer.status !== \"uploaded\") {\n return false;\n }\n const { asset } = assetContainer;\n // @todo need to teach TS the right type from useAssets\n return (\n \"meta\" in asset &&\n \"family\" in asset.meta &&\n asset.meta.family === family\n );\n })\n .map((assetContainer) => assetContainer.asset!.id);\n};\n\nexport const groupItemsByType = (items: Array) => {\n const uploadedItems = items.filter((item) => item.type === \"uploaded\");\n const systemItems = items.filter((item) => item.type === \"system\");\n const groupedItems = [...uploadedItems, ...systemItems];\n return { uploadedItems, systemItems, groupedItems };\n};\n\nexport const filterItems = (search: string, items: Array) => {\n return matchSorter(items, search, {\n keys: [(item) => item.label],\n });\n};\n" }, { "path": "apps/builder/app/builder/shared/inert-handlers.ts", "content": "import { useCallback } from \"react\";\nimport { canvasApi } from \"~/shared/canvas-api\";\nimport { $textEditingInstanceSelector } from \"~/shared/nano-states\";\n\nexport const skipInertHandlersAttribute = \"data-ws-skip-inert-handlers\";\n\nexport const useInertHandlers = () => {\n /**\n * Prevents Lexical text editor from stealing focus during rendering.\n * Sets the inert attribute on the canvas body element and disables the text editor.\n *\n * This must be done synchronously to avoid the following issue:\n *\n * 1. Text editor is in edit state.\n * 2. User focuses on the builder (e.g., clicks any input).\n * 3. The text editor blur event triggers, causing a rerender on data change (data saved in onBlur).\n * 4. Text editor rerenders, stealing focus from the builder.\n * 5. Inert attribute is set asynchronously, but focus is already lost.\n *\n * Synchronous focusing and setInert prevent the text editor from focusing on render.\n * This cannot be handled inside the canvas because the text editor toolbar is in the builder and focus events in the canvas should be ignored.\n *\n * Use onPointerDown instead of onFocus because Radix focus lock triggers on text edit blur\n * before the focusin event when editing text inside a Radix dialog.\n */\n const onPointerDown = useCallback((event: React.PointerEvent) => {\n if (\n event.target instanceof Element &&\n event.target.closest(`[${skipInertHandlersAttribute}]`)\n ) {\n return;\n }\n\n // Ignore toolbar focus events. See the onFocus handler in text-toolbar.tsx\n if (false === event.defaultPrevented) {\n canvasApi.setInert();\n $textEditingInstanceSelector.set(undefined);\n }\n }, []);\n\n /**\n * Prevent Radix from stealing focus during editing in the style sources\n * For example, when the user select or create new style source item inside a dialog.\n */\n const onKeyDown = useCallback((event: React.KeyboardEvent) => {\n if (\n event.target instanceof Element &&\n event.target.closest(`[${skipInertHandlersAttribute}]`)\n ) {\n return;\n }\n\n if (event.target instanceof HTMLInputElement) {\n canvasApi.setInert();\n }\n }, []);\n\n /**\n * Prevent Radix from stealing focus during editing in the settings panel.\n * For example, when the user modifies the text content of an H1 element inside a dialog.\n */\n const onInput = useCallback((event: React.FormEvent) => {\n if (\n event.target instanceof Element &&\n event.target.closest(`[${skipInertHandlersAttribute}]`)\n ) {\n return;\n }\n\n canvasApi.setInert();\n }, []);\n\n return {\n onInput,\n onKeyDown,\n onPointerDown,\n };\n};\n" }, { "path": "apps/builder/app/builder/shared/instance-context-menu.tsx", "content": "import type { ReactNode } from \"react\";\nimport { useStore } from \"@nanostores/react\";\nimport {\n ContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuItemRightSlot,\n ContextMenuSeparator,\n ContextMenuTrigger,\n theme,\n Kbd,\n Box,\n} from \"@webstudio-is/design-system\";\nimport { showAttribute } from \"@webstudio-is/react-sdk\";\nimport { emitCommand } from \"./commands\";\nimport {\n $selectedInstancePath,\n $selectedPage,\n getInstanceKey,\n} from \"~/shared/awareness\";\nimport { canUnwrapInstance } from \"~/shared/instance-utils\";\nimport { $propValuesByInstanceSelector } from \"~/shared/nano-states\";\nimport { ROOT_INSTANCE_ID } from \"@webstudio-is/sdk\";\nimport type { InstancePath } from \"~/shared/awareness\";\n\nconst getMenuPermissions = (instancePath: InstancePath | undefined) => {\n const instanceId = instancePath?.[0]?.instance.id;\n const rootInstanceId = $selectedPage.get()?.rootInstanceId;\n\n const isRoot = instanceId === ROOT_INSTANCE_ID;\n const isBody = instanceId === rootInstanceId;\n const isRootOrBody = isRoot || isBody;\n const canUnwrap = instancePath ? canUnwrapInstance(instancePath) : false;\n\n return {\n canCopy: !isRootOrBody,\n canPaste: !isRoot,\n canCut: !isRootOrBody,\n canDuplicate: !isRootOrBody,\n canHide: !isRoot,\n canRename: !isRoot,\n canWrap: !isRootOrBody,\n canUnwrap,\n canConvert: !isRootOrBody,\n canDelete: !isRootOrBody,\n };\n};\n\nexport const MenuItems = () => {\n const instancePath = useStore($selectedInstancePath);\n const propValues = useStore($propValuesByInstanceSelector);\n\n const instanceSelector = instancePath?.[0]?.instanceSelector;\n\n const show = instanceSelector\n ? Boolean(\n propValues.get(getInstanceKey(instanceSelector))?.get(showAttribute) ??\n true\n )\n : true;\n\n const permissions = getMenuPermissions(instancePath);\n\n return (\n \n {\n emitCommand(\"copy\");\n }}\n >\n Copy\n \n \n \n \n {\n emitCommand(\"paste\");\n }}\n >\n Paste\n \n \n \n \n {\n emitCommand(\"cut\");\n }}\n >\n Cut\n \n \n \n \n {\n emitCommand(\"duplicateInstance\");\n }}\n >\n Duplicate\n \n \n \n \n \n {\n emitCommand(\"toggleShow\");\n }}\n >\n {show ? \"Hide\" : \"Show\"}\n \n {\n emitCommand(\"editInstanceLabel\");\n }}\n >\n Rename\n \n \n \n \n {\n emitCommand(\"wrap\");\n }}\n >\n Wrap\n \n \n \n \n {\n emitCommand(\"unwrap\");\n }}\n >\n Unwrap\n \n \n \n \n {\n emitCommand(\"convert\");\n }}\n >\n Convert\n \n \n {\n emitCommand(\"focusStyleSources\");\n }}\n >\n Add token\n \n \n \n \n {\n emitCommand(\"openSettingsPanel\");\n }}\n >\n Open settings\n \n \n \n \n \n {\n emitCommand(\"deleteInstanceBuilder\");\n }}\n >\n Delete\n \n \n \n \n \n );\n};\n\nexport const InstanceContextMenu = ({ children }: { children: ReactNode }) => {\n return (\n \n {\n if (!(event.target instanceof HTMLElement)) {\n return;\n }\n event.target.closest(\"[data-tree-button]\")?.click();\n }}\n >\n {children}\n \n \n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/instance-label.tsx", "content": "import type { HtmlTags } from \"html-tags\";\nimport { useStore } from \"@nanostores/react\";\nimport {\n BlockquoteIcon,\n BodyIcon,\n BoldIcon,\n BoxIcon,\n BracesIcon,\n ButtonElementIcon,\n CalendarIcon,\n FormIcon,\n FormTextAreaIcon,\n FormTextFieldIcon,\n HeadingIcon,\n ImageIcon,\n ItemIcon,\n LabelIcon,\n LinkIcon,\n ListIcon,\n ListItemIcon,\n MinusIcon,\n SelectIcon,\n SubscriptIcon,\n SuperscriptIcon,\n TextAlignLeftIcon,\n TextItalicIcon,\n} from \"@webstudio-is/icons/svg\";\nimport {\n elementComponent,\n parseComponentName,\n ROOT_INSTANCE_ID,\n type Instance,\n} from \"@webstudio-is/sdk\";\nimport { $instances } from \"~/shared/sync/data-stores\";\nimport { $registeredComponentMetas } from \"~/shared/nano-states\";\nimport { humanizeString } from \"~/shared/string-utils\";\n\nconst htmlIcons: Record = {\n // typography\n h1: HeadingIcon,\n h2: HeadingIcon,\n h3: HeadingIcon,\n h4: HeadingIcon,\n h5: HeadingIcon,\n h6: HeadingIcon,\n p: TextAlignLeftIcon,\n blockquote: BlockquoteIcon,\n code: BracesIcon,\n ul: ListIcon,\n ol: ListIcon,\n li: ListItemIcon,\n hr: MinusIcon,\n // rich text\n b: BoldIcon,\n strong: BoldIcon,\n i: TextItalicIcon,\n em: TextItalicIcon,\n sub: SubscriptIcon,\n sup: SuperscriptIcon,\n a: LinkIcon,\n // form\n form: FormIcon,\n textarea: FormTextAreaIcon,\n button: ButtonElementIcon,\n input: FormTextFieldIcon,\n label: LabelIcon,\n select: SelectIcon,\n option: ItemIcon,\n // misc\n body: BodyIcon,\n time: CalendarIcon,\n img: ImageIcon,\n} satisfies Partial>;\n\ntype InstanceLike = {\n component: string;\n label?: string;\n tag?: string;\n};\n\ntype Props = {\n size?: number | string;\n instance: InstanceLike;\n icon?: string;\n};\n\nexport const InstanceIcon = ({ size = 16, instance, icon }: Props) => {\n const metas = useStore($registeredComponentMetas);\n const meta = metas.get(instance.component);\n // element component should be treated as div when no tag specified\n const elementTag =\n instance.component === elementComponent ? \"div\" : undefined;\n const tag =\n instance.tag ?? elementTag ?? Object.keys(meta?.presetStyle ?? {})[0];\n const computedIcon = icon ?? meta?.icon ?? htmlIcons[tag] ?? BoxIcon;\n return (\n \n );\n};\n\nconst getLabelFromComponentName = (component: Instance[\"component\"]) => {\n const [_namespace, componentName] = parseComponentName(component);\n return humanizeString(componentName);\n};\n\nexport const getInstanceLabel = (\n instanceOrInstanceId: InstanceLike | string\n): string => {\n if (typeof instanceOrInstanceId === \"string\") {\n if (instanceOrInstanceId === ROOT_INSTANCE_ID) {\n return \"Root\";\n }\n const instance = $instances.get().get(instanceOrInstanceId);\n if (instance) {\n return getInstanceLabel(instance);\n }\n return \"Unknown\";\n }\n\n if (instanceOrInstanceId.label) {\n return instanceOrInstanceId.label;\n }\n if (\n instanceOrInstanceId.component === elementComponent &&\n instanceOrInstanceId.tag\n ) {\n return `<${instanceOrInstanceId.tag}>`;\n }\n const meta = $registeredComponentMetas\n .get()\n .get(instanceOrInstanceId.component);\n return (\n meta?.label || getLabelFromComponentName(instanceOrInstanceId.component)\n );\n};\n" }, { "path": "apps/builder/app/builder/shared/loading.stories.tsx", "content": "import { Flex, StorySection, Text, theme } from \"@webstudio-is/design-system\";\nimport { Loading as LoadingComponent, LoadingBackground } from \"./loading\";\n\nexport default {\n title: \"Builder/Shared/Loading\",\n component: LoadingComponent,\n};\n\nexport const Loading = () => (\n \n \n Loading at 30%\n \n \n \n\n Loading at 80%\n \n \n \n\n Background overlay (visible)\n \n \n \n \n \n);\n" }, { "path": "apps/builder/app/builder/shared/loading.tsx", "content": "import { useState } from \"react\";\nimport { Box, Flex, Progress, theme } from \"@webstudio-is/design-system\";\nimport { WebstudioIcon } from \"@webstudio-is/icons\";\nimport { useInterval } from \"~/shared/hook-utils/use-interval\";\n\nexport const LoadingBackground = ({\n show,\n onTransitionEnd,\n}: {\n show: boolean;\n onTransitionEnd?: () => void;\n}) => {\n const [transitionEnded, setTransitionEnded] = useState(false);\n\n if (transitionEnded) {\n return;\n }\n\n return (\n {\n setTransitionEnded(true);\n onTransitionEnd?.();\n }}\n />\n );\n};\n\ntype LoadingState = {\n state: \"ready\" | \"loading\";\n progress: number;\n readyStates: Map<\n \"dataLoadingState\" | \"selectedInstanceRenderState\" | \"canvasIframeState\",\n boolean\n >;\n};\n\nexport const Loading = ({ state }: { state: LoadingState }) => {\n const [fakeProgress, setFakeProgress] = useState(state.progress);\n const [transitionEnded, setTransitionEnded] = useState(false);\n\n useInterval((intervalId) => {\n setFakeProgress((previousFakeValue) => {\n // Makeing sure fake value is not higher than real value to prevent jumping back\n let nextFakeValue = Math.max(previousFakeValue + 1, state.progress);\n // Make sure fake value is not lower than 10 to avoid showing empty progress.\n nextFakeValue = Math.max(nextFakeValue, 10);\n // Making sure fake value can't get bigger than 100, now that it reached 100 we can stop faking it.\n if (nextFakeValue >= 100) {\n clearInterval(intervalId);\n return previousFakeValue;\n }\n return nextFakeValue;\n });\n }, 100);\n\n if (state.state === \"ready\" && transitionEnded) {\n return;\n }\n\n return (\n \n {\n setTransitionEnded(true);\n }}\n />\n {state.state !== \"ready\" && (\n \n \n \n \n )}\n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/nano-states.ts", "content": "import { atom, computed } from \"nanostores\";\nimport {\n $isPreviewMode,\n $selectedInstanceRenderState,\n} from \"~/shared/nano-states/misc\";\nimport { $canvasIframeState } from \"~/shared/nano-states/canvas\";\nimport type { SidebarPanelName } from \"~/builder/sidebar-left/types\";\nimport { $settings, getSetting } from \"./client-settings\";\n\nexport const $isShareDialogOpen = atom(false);\n\nexport const $publishDialog = atom<\"none\" | \"publish\" | \"export\">(\"none\");\n\nexport const $canvasWidth = atom();\n\nexport const $isCloneDialogOpen = atom(false);\n\nexport const $canvasRect = atom();\n\nexport const $workspaceRect = atom();\n\nexport const $canvasScrollbarSize = atom<\n { width: number; height: number } | undefined\n>();\n\nexport const $scale = computed(\n [$canvasWidth, $workspaceRect],\n (canvasWidth, workspaceRect) => {\n if (\n canvasWidth === undefined ||\n workspaceRect === undefined ||\n canvasWidth <= workspaceRect.width\n ) {\n return 100;\n }\n return Number.parseFloat(\n ((workspaceRect.width / canvasWidth) * 100).toFixed(2)\n );\n }\n);\n\nexport const $clampingRect = computed(\n [$workspaceRect, $canvasRect, $canvasScrollbarSize, $scale],\n (workspaceRect, canvasRect, canvasScrollbarSize, scale) => {\n if (\n workspaceRect === undefined ||\n canvasRect === undefined ||\n canvasScrollbarSize === undefined\n ) {\n return;\n }\n\n const scrollbarWidthScaled = Math.round(\n (canvasScrollbarSize.width * scale) / 100\n );\n\n const scrollbarHeightScaled = Math.round(\n (canvasScrollbarSize.height * scale) / 100\n );\n\n if (canvasRect.width >= workspaceRect.width) {\n return {\n left: 0,\n top: 0,\n width: workspaceRect.width - scrollbarWidthScaled,\n height: workspaceRect.height - scrollbarHeightScaled,\n };\n }\n\n return {\n left: 0,\n top: 0,\n width: canvasRect.width - scrollbarWidthScaled,\n height: canvasRect.height - scrollbarHeightScaled,\n };\n }\n);\n\nexport const $activeInspectorPanel = atom<\"style\" | \"settings\">(\"style\");\n\nexport const $dataLoadingState = atom<\"idle\" | \"loading\" | \"loaded\">(\"idle\");\n\nexport const $loadingState = computed(\n [$dataLoadingState, $selectedInstanceRenderState, $canvasIframeState],\n (dataLoadingState, selectedInstanceRenderState, canvasIframeState) => {\n const readyStates = new Map<\n \"dataLoadingState\" | \"selectedInstanceRenderState\" | \"canvasIframeState\",\n boolean\n >([\n [\"dataLoadingState\", dataLoadingState === \"loaded\"],\n [\n \"selectedInstanceRenderState\",\n selectedInstanceRenderState !== \"pending\",\n ],\n [\"canvasIframeState\", canvasIframeState === \"ready\"],\n ]);\n\n const readyCount = Array.from(readyStates.values()).filter(Boolean).length;\n const progress = Math.round((readyCount / readyStates.size) * 100);\n const state: \"ready\" | \"loading\" =\n readyCount === readyStates.size ? \"ready\" : \"loading\";\n\n return { state, progress, readyStates };\n }\n);\n\n// Only used internally to avoid directly setting the value without using setActiveSidebarPanel.\nconst $activeSidebarPanel_ = atom();\n\nexport const $activeSidebarPanel = computed(\n [$activeSidebarPanel_, $isPreviewMode, $loadingState, $settings],\n (currentPanel, isPreviewMode, loadingState, { navigatorLayout }) => {\n if (loadingState.state !== \"ready\") {\n return \"none\";\n }\n if (isPreviewMode) {\n return currentPanel === \"pages\" ? \"pages\" : \"none\";\n }\n if (currentPanel === undefined) {\n return navigatorLayout === \"undocked\" ? \"navigator\" : \"none\";\n }\n return currentPanel;\n }\n);\n\n/**\n * auto shows default panel when sidepanel is undocked and hides when docked\n */\nexport const setActiveSidebarPanel = (nextPanel: \"auto\" | SidebarPanelName) => {\n const currentPanel = $activeSidebarPanel.get();\n // - When navigator is open, user is trying to close the navigator.\n // - Navigator is closed, user is trying to close some other panel, and if navigator is undocked, it needs to be opened.\n if (nextPanel === \"none\") {\n if (currentPanel === \"navigator\") {\n $activeSidebarPanel_.set(\"none\");\n return;\n }\n if (getSetting(\"navigatorLayout\") === \"undocked\") {\n $activeSidebarPanel_.set(\"navigator\");\n return;\n }\n }\n $activeSidebarPanel_.set(nextPanel === \"auto\" ? undefined : nextPanel);\n};\n\nexport const toggleActiveSidebarPanel = (panel: SidebarPanelName) => {\n const currentPanel = $activeSidebarPanel.get();\n setActiveSidebarPanel(panel === currentPanel ? \"none\" : panel);\n};\n\nexport const $remoteDialog = atom<{ title: string; url: string } | undefined>();\n\n// Track which grid track (column/row) is being edited in the style panel\nexport type GridEditingTrack = {\n type: \"column\" | \"row\";\n index: number;\n};\n\nexport const $gridEditingTrack = atom(undefined);\n\n// Track which grid area is being edited in the style panel\nexport type GridEditingArea = {\n columnStart: number;\n columnEnd: number;\n rowStart: number;\n rowEnd: number;\n};\n\nexport const $gridEditingArea = atom(undefined);\n\n// Whether a grid-related section is visible in the style panel.\n// Grid guides are shown on the canvas when true.\nexport const $isStylePanelGridVisible = atom(false);\n" }, { "path": "apps/builder/app/builder/shared/relative-time.stories.tsx", "content": "import { Flex, StorySection, Text } from \"@webstudio-is/design-system\";\nimport { RelativeTime as RelativeTimeComponent } from \"./relative-time\";\n\nexport default {\n title: \"Builder/Shared/Relative Time\",\n component: RelativeTimeComponent,\n};\n\nexport const RelativeTime = () => {\n const now = Date.now();\n const times = [\n { label: \"Just now\", date: new Date(now - 10_000) },\n { label: \"5 minutes ago\", date: new Date(now - 5 * 60_000) },\n { label: \"1 hour ago\", date: new Date(now - 60 * 60_000) },\n { label: \"Yesterday\", date: new Date(now - 24 * 60 * 60_000) },\n { label: \"Last week\", date: new Date(now - 7 * 24 * 60 * 60_000) },\n ];\n\n return (\n \n \n {times.map(({ label, date }) => (\n \n \n {label}:\n \n \n \n \n \n ))}\n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/relative-time.tsx", "content": "import useRelativeTime from \"@nkzw/use-relative-time\";\n\nexport const RelativeTime = ({ time }: { time: Date }) => {\n return useRelativeTime(time.getTime());\n};\n" }, { "path": "apps/builder/app/builder/shared/style-source-actions.tsx", "content": "import { useState, useEffect } from \"react\";\nimport { atom, computed } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport {\n Dialog,\n DialogContent,\n DialogTitle,\n DialogClose,\n Button,\n Text,\n Flex,\n theme,\n InputField,\n toast,\n} from \"@webstudio-is/design-system\";\nimport type { Instance, StyleSource } from \"@webstudio-is/sdk\";\nimport {\n $styleSources,\n $styleSourceSelections,\n $styles,\n $selectedStyleSources,\n $selectedStyleState,\n} from \"~/shared/nano-states\";\nimport {\n deleteStyleSourceMutable,\n findUnusedTokens,\n deleteStyleSourcesMutable,\n validateAndRenameStyleSource,\n renameStyleSourceMutable,\n type RenameStyleSourceError,\n} from \"~/shared/style-source-utils\";\nimport { serverSyncStore } from \"~/shared/sync/sync-stores\";\nimport { $selectedInstance } from \"~/shared/awareness\";\n\n// Re-export the type for convenience\nexport type { RenameStyleSourceError };\n\nconst $isDeleteUnusedTokensDialogOpen = atom(false);\n\nexport const openDeleteUnusedTokensDialog = () => {\n $isDeleteUnusedTokensDialogOpen.set(true);\n};\n\nexport const $styleSourceUsages = computed(\n $styleSourceSelections,\n (styleSourceSelections) => {\n const styleSourceUsages = new Map>();\n for (const { instanceId, values } of styleSourceSelections.values()) {\n for (const styleSourceId of values) {\n let usages = styleSourceUsages.get(styleSourceId);\n if (usages === undefined) {\n usages = new Set();\n styleSourceUsages.set(styleSourceId, usages);\n }\n usages.add(instanceId);\n }\n }\n return styleSourceUsages;\n }\n);\n\nconst deselectMatchingStyleSource = (styleSourceId: StyleSource[\"id\"]) => {\n const instanceId = $selectedInstance.get()?.id;\n if (instanceId === undefined) {\n return;\n }\n const selectedStyleSources = new Map($selectedStyleSources.get());\n if (selectedStyleSources.get(instanceId) === styleSourceId) {\n selectedStyleSources.delete(instanceId);\n $selectedStyleSources.set(selectedStyleSources);\n $selectedStyleState.set(undefined);\n }\n};\n\nexport const deleteStyleSource = (styleSourceId: StyleSource[\"id\"]) => {\n serverSyncStore.createTransaction(\n [$styleSources, $styleSourceSelections, $styles],\n (styleSources, styleSourceSelections, styles) => {\n deleteStyleSourceMutable({\n styleSourceId,\n styleSources,\n styleSourceSelections,\n styles,\n });\n }\n );\n // reset selected style source if necessary\n deselectMatchingStyleSource(styleSourceId);\n};\n\nexport const deleteUnusedTokens = () => {\n const styleSources = $styleSources.get();\n const styleSourceUsages = $styleSourceUsages.get();\n const unusedTokenIds = findUnusedTokens({ styleSources, styleSourceUsages });\n\n if (unusedTokenIds.length === 0) {\n return 0;\n }\n\n serverSyncStore.createTransaction(\n [$styleSources, $styleSourceSelections, $styles],\n (styleSources, styleSourceSelections, styles) => {\n deleteStyleSourcesMutable({\n styleSourceIds: unusedTokenIds,\n styleSources,\n styleSourceSelections,\n styles,\n });\n }\n );\n\n return unusedTokenIds.length;\n};\n\nexport const renameStyleSource = (\n id: StyleSource[\"id\"],\n name: string\n): RenameStyleSourceError | undefined => {\n const styleSources = $styleSources.get();\n const validationError = validateAndRenameStyleSource({\n id,\n name,\n styleSources,\n });\n if (validationError) {\n return validationError;\n }\n serverSyncStore.createTransaction([$styleSources], (styleSources) => {\n renameStyleSourceMutable({ id, name, styleSources });\n });\n};\n\ntype DeleteStyleSourceDialogProps = {\n styleSource?: { id: StyleSource[\"id\"]; name: string };\n onClose: () => void;\n onConfirm: (styleSourceId: StyleSource[\"id\"]) => void;\n};\n\nexport const DeleteStyleSourceDialog = ({\n styleSource,\n onClose,\n onConfirm,\n}: DeleteStyleSourceDialogProps) => {\n return (\n {\n if (isOpen === false) {\n onClose();\n }\n }}\n >\n {\n // Prevent command panel from handling keyboard events\n event.stopPropagation();\n }}\n >\n Delete confirmation\n \n {`Delete \"${styleSource?.name}\" token from the project including all of its styles?`}\n \n {\n onConfirm(styleSource!.id);\n onClose();\n }}\n >\n Delete\n \n \n \n \n \n \n \n \n );\n};\n\ntype RenameStyleSourceDialogProps = {\n styleSource?: { id: StyleSource[\"id\"]; name: string };\n onClose: () => void;\n onConfirm: (styleSourceId: StyleSource[\"id\"], newName: string) => void;\n};\n\nexport const RenameStyleSourceDialog = ({\n styleSource,\n onClose,\n onConfirm,\n}: RenameStyleSourceDialogProps) => {\n const [name, setName] = useState(\"\");\n const [error, setError] = useState();\n\n // Reset name and clear error when styleSource changes\n useEffect(() => {\n if (styleSource?.name !== undefined) {\n setName(styleSource.name);\n setError(undefined);\n }\n }, [styleSource?.id, styleSource?.name]);\n\n const handleConfirm = () => {\n const renameError = renameStyleSource(styleSource!.id, name);\n if (renameError) {\n if (renameError.type === \"minlength\") {\n setError(\"Token name cannot be empty\");\n } else if (renameError.type === \"duplicate\") {\n setError(\"A token with this name already exists\");\n }\n return;\n }\n onConfirm(styleSource!.id, name);\n onClose();\n };\n\n return (\n {\n if (isOpen === false) {\n onClose();\n }\n }}\n >\n {\n // Prevent command panel from handling keyboard events\n event.stopPropagation();\n if (event.key === \"Enter\" && !error) {\n handleConfirm();\n }\n }}\n >\n Rename token\n \n \n {\n setName(event.target.value);\n setError(undefined);\n }}\n color={error ? \"error\" : undefined}\n />\n {error && (\n \n {error}\n \n )}\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport const DeleteUnusedTokensDialog = () => {\n const open = useStore($isDeleteUnusedTokensDialogOpen);\n const styleSourceUsages = useStore($styleSourceUsages);\n const styleSources = useStore($styleSources);\n\n const handleClose = () => {\n $isDeleteUnusedTokensDialogOpen.set(false);\n };\n\n const unusedTokenIds = findUnusedTokens({ styleSources, styleSourceUsages });\n const unusedTokens: Array<{ id: string; name: string }> = unusedTokenIds\n .map((id) => {\n const styleSource = styleSources.get(id);\n return styleSource?.type === \"token\"\n ? { id, name: styleSource.name }\n : null;\n })\n .filter((token): token is { id: string; name: string } => token !== null);\n\n return (\n {\n if (isOpen === false) {\n handleClose();\n }\n }}\n >\n {\n event.stopPropagation();\n }}\n >\n Delete unused tokens\n \n {unusedTokens.length === 0 ? (\n There are no unused tokens to delete.\n ) : (\n <>\n \n Delete {unusedTokens.length} unused{\" \"}\n {unusedTokens.length === 1 ? \"token\" : \"tokens\"} from the\n project?\n \n \n {unusedTokens.map((token) => token.name).join(\", \")}\n \n \n )}\n \n {unusedTokens.length > 0 && (\n {\n const deletedCount = deleteUnusedTokens();\n handleClose();\n if (deletedCount === 0) {\n toast.info(\"No unused tokens to delete\");\n } else {\n toast.success(\n `Deleted ${deletedCount} unused ${deletedCount === 1 ? \"token\" : \"tokens\"}`\n );\n }\n }}\n >\n Delete\n \n )}\n \n \n \n \n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/topbar-layout.stories.tsx", "content": "import {\n Button,\n Flex,\n rawTheme,\n StorySection,\n theme,\n ToolbarButton,\n Text,\n buttonStyle,\n Link,\n} from \"@webstudio-is/design-system\";\nimport {\n CloudIcon,\n OfflineIcon,\n ShieldIcon,\n WebstudioIcon,\n} from \"@webstudio-is/icons\";\nimport { $queueStatus } from \"~/shared/sync/project-queue\";\nimport { $authPermit } from \"~/shared/nano-states\";\nimport { SyncStatus } from \"~/builder/features/sync-status\";\nimport { ViewMode } from \"~/builder/features/view-mode\";\nimport { TopbarLayout } from \"./topbar-layout\";\n\nexport default {\n title: \"Topbar layout\",\n component: TopbarLayout,\n};\n\nconst MenuPlaceholder = () => (\n \n \n \n);\n\nconst PagePlaceholder = () => (\n \n \n Home\n \n \n);\n\nconst BreakpointsPlaceholder = () => (\n \n Base\n \n);\n\nconst SyncErrorIndicator = () => (\n \n \n \n);\n\nconst ViewModeIndicator = () => (\n \n \n \n);\n\nconst SafeModeIndicator = () => (\n \n \n \n);\n\nexport const TopbarLayouts = () => {\n $queueStatus.set({ status: \"failed\" });\n $authPermit.set(\"view\");\n return (\n \n \n Default\n }\n left={}\n center={}\n right={\n <>\n \n \n \n }\n />\n With indicators\n }\n left={}\n center={}\n right={\n <>\n \n \n \n \n \n \n Clone\n \n \n }\n />\n Menu only\n } />\n Sync failed\n }\n left={}\n center={}\n right={\n <>\n \n \n \n \n }\n />\n View mode\n }\n left={}\n center={}\n right={\n <>\n \n \n \n \n }\n />\n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/shared/topbar-layout.tsx", "content": "import type { ReactNode } from \"react\";\nimport {\n theme,\n css,\n Flex,\n Toolbar,\n ToolbarToggleGroup,\n type CSS,\n} from \"@webstudio-is/design-system\";\n\nconst topbarContainerStyle = css({\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"space-between\",\n background: theme.colors.backgroundTopbar,\n height: theme.spacing[15],\n paddingRight: theme.panel.paddingInline,\n color: theme.colors.foregroundContrastMain,\n});\n\ntype TopbarLayoutProps = {\n menu: ReactNode;\n left?: ReactNode;\n center?: ReactNode;\n right?: ReactNode;\n loading?: ReactNode;\n css?: CSS;\n};\n\nexport const TopbarLayout = ({\n menu,\n left,\n center,\n right,\n loading,\n css,\n}: TopbarLayoutProps) => (\n \n);\n" }, { "path": "apps/builder/app/builder/shared/topbar.tsx", "content": "import { useStore } from \"@nanostores/react\";\nimport {\n theme,\n ToolbarButton,\n Text,\n type CSS,\n Tooltip,\n Kbd,\n} from \"@webstudio-is/design-system\";\nimport type { Project } from \"@webstudio-is/project\";\nimport { $pages } from \"~/shared/sync/data-stores\";\nimport { $editingPageId } from \"~/shared/nano-states\";\n\nimport { ShareButton } from \"~/builder/features/share\";\nimport { PublishButton } from \"~/builder/features/publish\";\nimport { SyncStatus } from \"~/builder/features/sync-status\";\nimport { Menu } from \"~/builder/features/menu\";\nimport { BreakpointsContainer } from \"~/builder/features/breakpoints\";\nimport { ViewMode } from \"~/builder/features/view-mode\";\nimport { AddressBarPopover } from \"~/builder/features/address-bar\";\nimport { toggleActiveSidebarPanel } from \"~/builder/shared/nano-states\";\nimport type { ReactNode } from \"react\";\nimport { CloneButton } from \"~/builder/features/clone\";\nimport { $selectedPage } from \"~/shared/awareness\";\nimport { BuilderModeDropDown } from \"~/builder/features/builder-mode\";\nimport { SafeModeButton } from \"~/builder/features/safe-mode\";\nimport { TopbarLayout } from \"./topbar-layout\";\n\nconst PagesButton = () => {\n const page = useStore($selectedPage);\n if (page === undefined) {\n return;\n }\n\n return (\n \n {\"Pages or page settings \"}\n \n \n }\n >\n {\n $editingPageId.set(event.altKey ? page.id : undefined);\n toggleActiveSidebarPanel(\"pages\");\n }}\n tabIndex={0}\n >\n \n {page.name}\n \n \n \n );\n};\n\ntype TopbarProps = {\n project: Project;\n loading: ReactNode;\n css: CSS;\n};\n\nexport const Topbar = ({ project, css, loading }: TopbarProps) => {\n const pages = useStore($pages);\n return (\n }\n left={\n pages ? (\n <>\n \n \n \n ) : undefined\n }\n center={}\n right={\n <>\n \n \n \n \n \n \n \n \n }\n loading={loading}\n />\n );\n};\n" }, { "path": "apps/builder/app/builder/shared/url-pattern.test.ts", "content": "import { expect, test, describe } from \"vitest\";\nimport {\n compilePathnamePattern,\n isPathnamePattern,\n matchPathnamePattern,\n tokenizePathnamePattern,\n validatePathnamePattern,\n} from \"./url-pattern\";\nimport { VALID_URLPATTERN_PATHS } from \"@webstudio-is/sdk/router-paths.test\";\n\n/**\n * These tests use the shared test data from @webstudio-is/sdk to ensure\n * URLPattern matching is consistent with schema validation.\n */\ndescribe(\"Shared router path tests - URLPattern matching\", () => {\n describe(\"all valid paths can be used as URLPattern patterns\", () => {\n test.each(VALID_URLPATTERN_PATHS)(\"accepts pattern: %s\", (pattern) => {\n // Pattern should be valid for URLPattern\n // Some patterns may have validation errors due to our custom rules\n // but they should still work with URLPattern itself\n expect(() => matchPathnamePattern(pattern, pattern)).not.toThrow();\n });\n });\n\n describe(\"all valid static paths can be matched exactly\", () => {\n // Filter out patterns (those with : or *)\n const staticPaths = VALID_URLPATTERN_PATHS.filter(\n (p) => !p.includes(\":\") && !p.includes(\"*\")\n );\n\n test.each(staticPaths)(\"matches exactly: %s\", (path) => {\n const result = matchPathnamePattern(path, path);\n expect(result).toEqual({});\n });\n });\n});\n\ntest(\"decode matched params\", () => {\n expect(matchPathnamePattern(\"/blog/:slug\", \"/blog/привет\")).toEqual({\n slug: \"привет\",\n });\n expect(\n matchPathnamePattern(\n \"/blog/:slug\",\n \"/blog/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82\"\n )\n ).toEqual({\n slug: \"привет\",\n });\n});\n\ndescribe(\"URLPattern Unicode/non-Latin character support\", () => {\n // These tests verify that the URLPattern-based router properly handles\n // non-Latin characters in redirect paths, which is important for\n // international websites (Chinese, Japanese, Korean, etc.)\n\n describe(\"exact path matching with non-Latin characters\", () => {\n test(\"matches Chinese Simplified paths\", () => {\n expect(matchPathnamePattern(\"/关于我们\", \"/关于我们\")).toEqual({});\n expect(matchPathnamePattern(\"/产品/手机\", \"/产品/手机\")).toEqual({});\n });\n\n test(\"matches Chinese Traditional paths\", () => {\n expect(matchPathnamePattern(\"/關於我們\", \"/關於我們\")).toEqual({});\n expect(matchPathnamePattern(\"/港聞\", \"/港聞\")).toEqual({});\n });\n\n test(\"matches Japanese paths (Hiragana, Katakana, Kanji)\", () => {\n expect(matchPathnamePattern(\"/こんにちは\", \"/こんにちは\")).toEqual({});\n expect(matchPathnamePattern(\"/カテゴリ\", \"/カテゴリ\")).toEqual({});\n expect(matchPathnamePattern(\"/日本語\", \"/日本語\")).toEqual({});\n });\n\n test(\"matches Korean paths (Hangul)\", () => {\n expect(matchPathnamePattern(\"/한국어\", \"/한국어\")).toEqual({});\n expect(matchPathnamePattern(\"/블로그/포스트\", \"/블로그/포스트\")).toEqual(\n {}\n );\n });\n\n test(\"matches Cyrillic paths\", () => {\n expect(matchPathnamePattern(\"/о-нас\", \"/о-нас\")).toEqual({});\n expect(matchPathnamePattern(\"/блог/статья\", \"/блог/статья\")).toEqual({});\n });\n\n test(\"matches Arabic paths\", () => {\n expect(matchPathnamePattern(\"/مرحبا\", \"/مرحبا\")).toEqual({});\n });\n\n test(\"matches Hebrew paths\", () => {\n expect(matchPathnamePattern(\"/שלום\", \"/שלום\")).toEqual({});\n });\n\n test(\"matches Greek paths\", () => {\n expect(matchPathnamePattern(\"/σχετικά\", \"/σχετικά\")).toEqual({});\n });\n\n test(\"matches European diacritics\", () => {\n expect(matchPathnamePattern(\"/über-uns\", \"/über-uns\")).toEqual({});\n expect(matchPathnamePattern(\"/café\", \"/café\")).toEqual({});\n expect(matchPathnamePattern(\"/niño\", \"/niño\")).toEqual({});\n });\n });\n\n describe(\"dynamic segments with non-Latin characters\", () => {\n test(\"captures Chinese characters in :slug parameter\", () => {\n expect(matchPathnamePattern(\"/:slug\", \"/关于我们\")).toEqual({\n slug: \"关于我们\",\n });\n });\n\n test(\"captures Japanese characters in :slug parameter\", () => {\n expect(matchPathnamePattern(\"/blog/:slug\", \"/blog/日本語\")).toEqual({\n slug: \"日本語\",\n });\n });\n\n test(\"captures Korean characters in :slug parameter\", () => {\n expect(\n matchPathnamePattern(\"/:category/:post\", \"/블로그/포스트\")\n ).toEqual({\n category: \"블로그\",\n post: \"포스트\",\n });\n });\n });\n\n describe(\"wildcard patterns with non-Latin characters\", () => {\n test(\"matches wildcard with Chinese paths\", () => {\n expect(matchPathnamePattern(\"/blog/*\", \"/blog/中文/测试\")).toEqual({\n 0: \"中文/测试\",\n });\n });\n\n test(\"matches wildcard with Japanese paths\", () => {\n expect(\n matchPathnamePattern(\"/カテゴリ/*\", \"/カテゴリ/記事/詳細\")\n ).toEqual({\n 0: \"記事/詳細\",\n });\n });\n });\n\n describe(\"URL-encoded vs literal matching\", () => {\n test(\"matches URL-encoded paths and decodes them\", () => {\n // %E6%B8%AF%E8%81%9E is URL-encoded 港聞\n expect(matchPathnamePattern(\"/:slug\", \"/%E6%B8%AF%E8%81%9E\")).toEqual({\n slug: \"港聞\",\n });\n });\n\n test(\"matches mixed Latin and non-Latin paths\", () => {\n expect(matchPathnamePattern(\"/blog/关于\", \"/blog/关于\")).toEqual({});\n expect(matchPathnamePattern(\"/news/:slug\", \"/news/港聞\")).toEqual({\n slug: \"港聞\",\n });\n });\n });\n});\n\ntest(\"check pathname is pattern\", () => {\n expect(isPathnamePattern(\"/:name\")).toEqual(true);\n expect(isPathnamePattern(\"/:slug*\")).toEqual(true);\n expect(isPathnamePattern(\"/:id?\")).toEqual(true);\n expect(isPathnamePattern(\"/*\")).toEqual(true);\n\n expect(isPathnamePattern(\"\")).toEqual(false);\n expect(isPathnamePattern(\"/\")).toEqual(false);\n expect(isPathnamePattern(\"/blog\")).toEqual(false);\n expect(isPathnamePattern(\"/blog/post-name\")).toEqual(false);\n});\n\ntest(\"tokenize named params in pathname pattern\", () => {\n expect(tokenizePathnamePattern(\"/blog/:id\")).toEqual([\n { type: \"fragment\", value: \"/blog/\" },\n { type: \"param\", name: \"id\", optional: false, splat: false },\n ]);\n expect(tokenizePathnamePattern(\"/blog/:slug*\")).toEqual([\n { type: \"fragment\", value: \"/blog/\" },\n { type: \"param\", name: \"slug\", optional: false, splat: true },\n ]);\n expect(tokenizePathnamePattern(\"/blog/:name?\")).toEqual([\n { type: \"fragment\", value: \"/blog/\" },\n { type: \"param\", name: \"name\", optional: true, splat: false },\n ]);\n expect(tokenizePathnamePattern(\"/blog/*\")).toEqual([\n { type: \"fragment\", value: \"/blog/\" },\n { type: \"param\", name: \"0\", optional: false, splat: true },\n ]);\n});\n\ntest(\"tokenize complex pathname pattern\", () => {\n expect(tokenizePathnamePattern(\"/blog/:date/:slug*\")).toEqual([\n { type: \"fragment\", value: \"/blog/\" },\n { type: \"param\", name: \"date\", optional: false, splat: false },\n { type: \"fragment\", value: \"/\" },\n { type: \"param\", name: \"slug\", optional: false, splat: true },\n ]);\n});\n\ntest(\"tokenize trailing fragment\", () => {\n expect(tokenizePathnamePattern(\"/blog/:name/profile\")).toEqual([\n { type: \"fragment\", value: \"/blog/\" },\n { type: \"param\", name: \"name\", optional: false, splat: false },\n { type: \"fragment\", value: \"/profile\" },\n ]);\n});\n\ntest(\"tokenize pathname without params\", () => {\n expect(tokenizePathnamePattern(\"/blog/post\")).toEqual([\n { type: \"fragment\", value: \"/blog/post\" },\n ]);\n});\n\ntest(\"tokenize empty pathname\", () => {\n expect(tokenizePathnamePattern(\"\")).toEqual([\n { type: \"fragment\", value: \"\" },\n ]);\n});\n\ntest(\"compile pathname pattern with named values\", () => {\n expect(\n compilePathnamePattern(tokenizePathnamePattern(\"/blog/:id/:date\"), {\n id: \"my-id\",\n date: \"my-date\",\n })\n ).toEqual(\"/blog/my-id/my-date\");\n});\n\ntest(\"compile pathname pattern with named values\", () => {\n expect(\n compilePathnamePattern(tokenizePathnamePattern(\"/blog/:id/:date\"), {\n id: \"my-id\",\n date: \"my-date\",\n })\n ).toEqual(\"/blog/my-id/my-date\");\n});\n\ntest(\"compile pathname pattern with named wildcard\", () => {\n expect(\n compilePathnamePattern(tokenizePathnamePattern(\"/blog/:slug*/:date*\"), {\n slug: \"my-slug\",\n date: \"my-date\",\n })\n ).toEqual(\"/blog/my-slug/my-date\");\n});\n\ntest(\"compile pathname pattern with indexed wildcard\", () => {\n expect(\n compilePathnamePattern(tokenizePathnamePattern(\"/blog/*/:slug*/*\"), {\n // use random order\n 1: \"one\",\n slug: \"my-slug\",\n 0: \"zero\",\n })\n ).toEqual(\"/blog/zero/my-slug/one\");\n});\n\ntest(\"compile pathname pattern with many indexed wildcards (more than 10)\", () => {\n expect(\n compilePathnamePattern(\n tokenizePathnamePattern(\"/blog/*/*/*/*/*/*/*/*/*/*/*/*\"),\n {\n // use random order\n 11: \"eleven\",\n 10: \"ten\",\n 9: \"nine\",\n 8: \"eight\",\n 7: \"seven\",\n 6: \"six\",\n 5: \"five\",\n 4: \"four\",\n 3: \"three\",\n 2: \"two\",\n 1: \"one\",\n 0: \"zero\",\n }\n )\n ).toEqual(\n \"/blog/zero/one/two/three/four/five/six/seven/eight/nine/ten/eleven\"\n );\n});\n\ntest(\"collapse empty values\", () => {\n expect(\n compilePathnamePattern(tokenizePathnamePattern(\"/blog/*/:slug\"), {\n // use random order\n slug: \"\",\n 0: \"\",\n })\n ).toEqual(\"/blog//\");\n});\n\ntest(\"collapse optional values with preceding slash\", () => {\n expect(\n compilePathnamePattern(tokenizePathnamePattern(\"/blog/:slug?/:name?\"), {\n slug: \"\",\n })\n ).toEqual(\"/blog\");\n});\n\ntest(\"validate invalid pattern\", () => {\n expect(validatePathnamePattern(\"/:name*?\")).toEqual([\n `Invalid path pattern '/:name*?'`,\n ]);\n});\n\ntest(\"validate named groups\", () => {\n expect(validatePathnamePattern(\"/:name\")).toEqual([]);\n expect(validatePathnamePattern(\"/:name/last\")).toEqual([]);\n});\n\ntest(\"validate named groups with optional modifier\", () => {\n expect(validatePathnamePattern(\"/:name?\")).toEqual([]);\n expect(validatePathnamePattern(\"/:name?/last\")).toEqual([]);\n});\n\ntest('validate \"one or more\" named group modifier', () => {\n expect(validatePathnamePattern(\"/:name+/:slug+\")).toEqual([\n \"Dynamic parameters ':name+', ':slug+' shouldn't have the + modifier.\",\n ]);\n});\n\ntest('validate \"zero or more\" named group modifier', () => {\n expect(validatePathnamePattern(\"/:name*\")).toEqual([]);\n expect(validatePathnamePattern(\"/:name*/:another*/:slug*\")).toEqual([\n \"':name*', ':another*' should end the path.\",\n ]);\n});\n\ntest(\"validate wildcard groups\", () => {\n expect(validatePathnamePattern(\"/*\")).toEqual([]);\n expect(validatePathnamePattern(\"/*?/*?\")).toEqual([\n `Optional wildcard '*?' is not allowed.`,\n ]);\n expect(validatePathnamePattern(\"/*/*\")).toEqual([\n `Wildcard '*' should end the path.`,\n ]);\n expect(validatePathnamePattern(\"/*/last\")).toEqual([\n `Wildcard '*' should end the path.`,\n ]);\n expect(validatePathnamePattern(\"/*?/*/last\")).toEqual([\n `Optional wildcard '*?' is not allowed.`,\n `Wildcard '*' should end the path.`,\n ]);\n});\n\ntest(\"forbid wildcard group with static parts before\", () => {\n expect(validatePathnamePattern(\"/blog-*\")).toEqual([\n `Static parts cannot be mixed with dynamic parameters at 'blog-*'.`,\n ]);\n});\n\ntest(`forbid named group with \"zero or more\" modifier and static parts before`, () => {\n expect(validatePathnamePattern(\"/blog-:slug*\")).toEqual([\n `Static parts cannot be mixed with dynamic parameters at 'blog-:slug*'.`,\n ]);\n});\n\ntest(`forbid named group with static parts before or after`, () => {\n expect(validatePathnamePattern(\"/prefix-:id\")).toEqual([\n `Static parts cannot be mixed with dynamic parameters at 'prefix-:id'.`,\n ]);\n expect(validatePathnamePattern(\"/:id-suffix\")).toEqual([\n `Static parts cannot be mixed with dynamic parameters at ':id-suffix'.`,\n ]);\n expect(validatePathnamePattern(\"/prefix-:id-suffix\")).toEqual([\n `Static parts cannot be mixed with dynamic parameters at 'prefix-:id-suffix'.`,\n ]);\n});\n\ntest(`? should be allowed in named groups only`, () => {\n expect(validatePathnamePattern(\"/name?\")).toEqual([\n `Optional parameter indicator ? must be at the end of the named parameter. Correct usage: /:param?`,\n ]);\n});\n" }, { "path": "apps/builder/app/builder/shared/url-pattern.ts", "content": "import { matchPathnameParams } from \"@webstudio-is/sdk\";\nimport { URLPattern } from \"urlpattern-polyfill\";\n\nexport { isPathnamePattern } from \"@webstudio-is/sdk\";\n\nconst baseUrl = \"http://url\";\n\nconst tryDecode = (encoded: string) => {\n try {\n return decodeURIComponent(encoded);\n } catch {\n return encoded;\n }\n};\n\nexport const matchPathnamePattern = (pattern: string, pathname: string) => {\n try {\n const groups = new URLPattern({ pathname: pattern }).exec({ pathname })\n ?.pathname.groups;\n if (groups) {\n const decodedGroups: Record = {};\n for (const [name, value] of Object.entries(groups)) {\n if (value) {\n decodedGroups[name] = tryDecode(value);\n }\n }\n return decodedGroups;\n }\n } catch {\n // empty block\n }\n};\n\n// allowed syntax\n// :name - group without modifiers\n// :name? - group with optional modifier\n// :name* - group with zero or more modifier in the end\n// * - wildcard group in the end\n\ntype Token =\n | { type: \"fragment\"; value: string }\n | { type: \"param\"; name: string; optional: boolean; splat: boolean };\n\nexport const tokenizePathnamePattern = (pathname: string) => {\n const tokens: Token[] = [];\n let lastCursor = 0;\n let lastWildcard = -1;\n\n for (const match of matchPathnameParams(pathname)) {\n const cursor = match.index ?? 0;\n if (lastCursor < cursor) {\n tokens.push({\n type: \"fragment\",\n value: pathname.slice(lastCursor, cursor),\n });\n }\n lastCursor = cursor + match[0].length;\n if (match.groups?.name) {\n const optional = match.groups.modifier === \"?\";\n const splat = match.groups.modifier === \"*\";\n\n tokens.push({ type: \"param\", name: match.groups.name, optional, splat });\n }\n if (match.groups?.wildcard) {\n lastWildcard += 1;\n tokens.push({\n type: \"param\",\n name: lastWildcard.toString(),\n splat: true,\n optional: false,\n });\n }\n }\n if (lastCursor < pathname.length || tokens.length === 0) {\n tokens.push({\n type: \"fragment\",\n value: pathname.slice(lastCursor),\n });\n }\n return tokens;\n};\n\nexport const compilePathnamePattern = (\n tokens: Token[],\n values: Record\n) => {\n let compiledPathname = \"\";\n for (const token of tokens) {\n if (token.type === \"fragment\") {\n compiledPathname += token.value;\n }\n if (token.type === \"param\") {\n const value = values[token.name] ?? \"\";\n // remove preceding slash\n if (token.optional && value.length === 0) {\n compiledPathname = compiledPathname.slice(0, -1);\n }\n compiledPathname += value;\n }\n }\n return compiledPathname;\n};\n\nexport const validatePathnamePattern = (pathname: string) => {\n try {\n new URLPattern(pathname, baseUrl);\n } catch {\n return [`Invalid path pattern '${pathname}'`];\n }\n\n const messages: string[] = [];\n\n // fobid :name+ everywhere\n const namedGroupsWithPlus = Array.from(pathname.matchAll(/:\\w+\\+/g)).flat();\n if (namedGroupsWithPlus.length > 0) {\n const list = namedGroupsWithPlus.map((item) => `'${item}'`).join(\", \");\n messages.push(`Dynamic parameters ${list} shouldn't have the + modifier.`);\n }\n\n // :name* in the middle\n const namedGroupsWithAsterisk = Array.from(\n // skip matching in the end of string\n pathname.matchAll(/:\\w+\\*(?!$)/g)\n ).flat();\n if (namedGroupsWithAsterisk.length > 0) {\n const list = namedGroupsWithAsterisk.map((item) => `'${item}'`).join(\", \");\n messages.push(`${list} should end the path.`);\n }\n\n // *? everywhere\n const wildcardGroupsWithQuestion = Array.from(\n pathname.matchAll(/\\*\\?/g)\n ).flat();\n if (wildcardGroupsWithQuestion.length > 0) {\n messages.push(`Optional wildcard '*?' is not allowed.`);\n }\n\n // * in the middle\n const wildcardGroups = Array.from(\n // skip matching with :name before *\n // skip matching with ? after *\n // skip matching with * in the end\n pathname.matchAll(/(? 0) {\n messages.push(`Wildcard '*' should end the path.`);\n }\n\n // show segment errors only when syntax is valid\n if (messages.length > 0) {\n return messages;\n }\n\n for (const segment of pathname.split(\"/\")) {\n const group = segment.match(/(?:\\w+(\\*|\\?)?)/)?.groups?.group;\n if (group) {\n if (group.length !== segment.length) {\n messages.push(\n `Static parts cannot be mixed with dynamic parameters at '${segment}'.`\n );\n }\n } else if (segment.includes(\"*\")) {\n if (segment.length > 1) {\n messages.push(\n `Static parts cannot be mixed with dynamic parameters at '${segment}'.`\n );\n }\n } else if (segment.includes(\"?\")) {\n messages.push(\n `Optional parameter indicator ? must be at the end of the named parameter. Correct usage: /:param?`\n );\n }\n }\n\n return messages;\n};\n" }, { "path": "apps/builder/app/builder/shared/use-disable-context-menu.ts", "content": "import { useEffect } from \"react\";\n\n/**\n * Disables the default browser context menu throughout the application,\n * except for interactive elements like links, inputs, textareas, etc.\n *\n * Users expect to see Webstudio's custom context menu when right-clicking,\n * not the browser's default menu. This hook prevents confusion by ensuring\n * only the application's context menu appears, while still allowing the\n * browser menu for interactive elements where it's useful (e.g., copy/paste\n * in inputs, open link in new tab).\n */\nexport const useDisableContextMenu = () => {\n useEffect(() => {\n const handleContextMenu = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n\n // Allow context menu for interactive elements\n const interactiveSelectors = [\n \"input\",\n \"textarea\",\n \"select\",\n \"a[href]\",\n '[contenteditable=\"true\"]',\n \"pre\",\n ];\n\n const isInteractive = interactiveSelectors.some((selector) =>\n target.closest(selector)\n );\n\n if (!isInteractive) {\n event.preventDefault();\n }\n };\n\n document.addEventListener(\"contextmenu\", handleContextMenu);\n return () => {\n document.removeEventListener(\"contextmenu\", handleContextMenu);\n };\n }, []);\n};\n" }, { "path": "apps/builder/app/builder/sidebar-left/sidebar-left.tsx", "content": "import { useRef, useState, type ReactNode } from \"react\";\nimport { Kbd, rawTheme, Text } from \"@webstudio-is/design-system\";\nimport { useSubscribe, type Publish } from \"~/shared/pubsub\";\nimport {\n $dragAndDropState,\n $isContentMode,\n $isPreviewMode,\n} from \"~/shared/nano-states\";\nimport { Flex } from \"@webstudio-is/design-system\";\nimport { theme } from \"@webstudio-is/design-system\";\nimport {\n ExtensionIcon,\n HelpIcon,\n ImageIcon,\n NavigatorIcon,\n PageIcon,\n PlusIcon,\n type IconComponent,\n} from \"@webstudio-is/icons\";\nimport { HelpCenter } from \"../features/help/help-center\";\nimport { useStore } from \"@nanostores/react\";\nimport {\n $activeSidebarPanel,\n setActiveSidebarPanel,\n toggleActiveSidebarPanel,\n} from \"~/builder/shared/nano-states\";\nimport {\n SidebarButton,\n SidebarTabs,\n SidebarTabsContent,\n SidebarTabsList,\n SidebarTabsTrigger,\n} from \"./sidebar-tabs\";\nimport {\n ExternalDragDropMonitor,\n POTENTIAL,\n isBlockedByBackdrop,\n useOnDropEffect,\n useExternalDragStateEffect,\n} from \"~/builder/shared/assets/drag-monitor\";\nimport { getSetting, setSetting } from \"~/builder/shared/client-settings\";\nimport { ComponentsPanel } from \"~/builder/features/components\";\nimport { PagesPanel } from \"~/builder/features/pages\";\nimport { NavigatorPanel } from \"~/builder/features/navigator\";\nimport { AssetsPanel } from \"~/builder/features/assets\";\nimport { MarketplacePanel } from \"~/builder/features/marketplace\";\nimport type { SidebarPanelName } from \"./types\";\n\nconst none = { Panel: () => null };\n\nconst HelpTabTrigger = () => {\n const [helpIsOpen, setHelpIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n \n );\n};\n\ntype PanelConfig = {\n name: SidebarPanelName;\n label: ReactNode;\n Icon: IconComponent;\n Panel: (props: { publish: Publish; onClose: () => void }) => ReactNode;\n visibility?: {\n content?: boolean; // if set, controls visibility in edit mode, if not the panel is visible\n // Probably other modes\n };\n};\n\nconst isPanelVisible = (\n panel: Pick,\n {\n isPreviewMode,\n isContentMode,\n }: { isPreviewMode: boolean; isContentMode: boolean }\n) => {\n if (isPreviewMode) {\n return false;\n }\n\n const { visibility } = panel;\n\n // If visibility is not defined, the panel is always visible\n if (visibility === undefined) {\n return true;\n }\n\n if (isContentMode) {\n // If visibility.edit is not defined, the panel is visible\n return visibility.content ?? true;\n }\n\n return true;\n};\n\nconst panels: PanelConfig[] = [\n {\n name: \"components\",\n label: (\n \n Components  \n \n \n ),\n Icon: PlusIcon,\n Panel: ComponentsPanel,\n visibility: {\n content: false,\n },\n },\n {\n name: \"pages\",\n label: \"Pages\",\n Icon: PageIcon,\n Panel: PagesPanel,\n },\n {\n name: \"navigator\",\n label: (\n \n Navigator  \n \n \n ),\n Icon: NavigatorIcon,\n Panel: NavigatorPanel,\n },\n {\n name: \"assets\",\n label: \"Assets\",\n Icon: ImageIcon,\n Panel: AssetsPanel,\n },\n {\n name: \"marketplace\",\n label: \"Marketplace\",\n Icon: ExtensionIcon,\n Panel: MarketplacePanel,\n visibility: {\n content: false,\n },\n },\n];\n\nconst setSidebarPanelWidth = (panelName: string, width: number) => {\n const widths = getSetting(\"sidebarPanelWidths\");\n setSetting(\"sidebarPanelWidths\", { ...widths, [panelName]: width });\n};\n\nconst getSidebarPanelWidth = (panelName: SidebarPanelName) => {\n if (panelName === \"none\") {\n return theme.sizes.sidebarWidth;\n }\n const width = getSetting(\"sidebarPanelWidths\")[panelName];\n if (width === undefined) {\n return theme.sizes.sidebarWidth;\n }\n return width + \"px\";\n};\n\ntype SidebarLeftProps = {\n publish: Publish;\n};\n\nexport const SidebarLeft = ({ publish }: SidebarLeftProps) => {\n const activePanel = useStore($activeSidebarPanel);\n const dragAndDropState = useStore($dragAndDropState);\n const { Panel } = panels.find((item) => item.name === activePanel) ?? none;\n const isPreviewMode = useStore($isPreviewMode);\n const isContentMode = useStore($isContentMode);\n const tabsWrapperRef = useRef(null);\n const returnTabRef = useRef(undefined);\n\n useSubscribe(\"dragEnd\", () => {\n setActiveSidebarPanel(\"auto\");\n });\n\n useOnDropEffect(() => {\n const element = tabsWrapperRef.current;\n\n if (element == null) {\n return;\n }\n\n if (isBlockedByBackdrop(element)) {\n return;\n }\n\n returnTabRef.current = undefined;\n });\n\n useExternalDragStateEffect((state) => {\n if (state !== POTENTIAL) {\n if (returnTabRef.current !== undefined) {\n setActiveSidebarPanel(returnTabRef.current);\n }\n returnTabRef.current = undefined;\n return;\n }\n\n const element = tabsWrapperRef.current;\n\n if (element == null) {\n return;\n }\n\n if (isBlockedByBackdrop(element)) {\n return;\n }\n\n returnTabRef.current = activePanel;\n // Save prevous state\n setActiveSidebarPanel(\"assets\");\n });\n\n const modes = { isContentMode, isPreviewMode };\n\n return (\n \n {\n // In preview mode, we don't show left sidebar, but we want to allow pages panel to be open in the preview mode.\n // This way user can switch pages without exiting preview mode.\n }\n {isPreviewMode === false && (\n \n \n
    \n \n {panels\n .filter((panel) => isPanelVisible(panel, modes))\n .map(({ name, Icon, label }) => {\n return (\n {\n toggleActiveSidebarPanel(name);\n }}\n >\n \n \n );\n })}\n \n
    \n\n \n \n )}\n\n {\n if (activePanel !== \"none\") {\n setSidebarPanelWidth(activePanel, width);\n }\n }}\n onKeyDown={(event) => {\n if (event.key === \"Escape\") {\n setActiveSidebarPanel(\"none\");\n }\n }}\n resizable\n css={{\n \"--sidebar-left-panel-width\": `${getSidebarPanelWidth(activePanel)}`,\n width: \"var(--sidebar-left-panel-width)\",\n minWidth: theme.sizes.sidebarWidth,\n maxWidth: theme.spacing[35],\n // We need the node to be rendered but hidden\n // to keep receiving the drag events.\n visibility:\n dragAndDropState.isDragging &&\n dragAndDropState.dragPayload?.origin === \"panel\" &&\n getSetting(\"navigatorLayout\") !== \"undocked\"\n ? \"hidden\"\n : \"visible\",\n }}\n >\n \n setActiveSidebarPanel(\"none\")}\n />\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx", "content": "import {\n Box,\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n Tooltip,\n css,\n focusRingStyle,\n styled,\n theme,\n useResize,\n type CSS,\n} from \"@webstudio-is/design-system\";\nimport {\n forwardRef,\n useEffect,\n useRef,\n type ComponentProps,\n type ReactNode,\n} from \"react\";\n\nexport const SidebarTabs = styled(Tabs, {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n position: \"relative\",\n boxSizing: \"border-box\",\n flexGrow: 1,\n});\n\nconst triggerFocusRing = focusRingStyle();\n\nconst buttonStyle = css({\n position: \"relative\",\n boxSizing: \"border-box\",\n flexShrink: 0,\n display: \"flex\",\n size: theme.spacing[15],\n m: 0,\n userSelect: \"none\",\n outline: \"none\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: theme.colors.foregroundIconMain,\n backgroundColor: theme.colors.backgroundPanel,\n border: \"none\",\n \"&:focus-visible\": triggerFocusRing,\n \"@hover\": {\n \"&:hover\": {\n backgroundColor: theme.colors.backgroundHover,\n },\n },\n\n '&[data-state=\"active\"]': {\n backgroundColor: theme.colors.backgroundHover,\n },\n});\n\nexport const SidebarButton = forwardRef<\n HTMLButtonElement,\n ComponentProps<\"button\"> & { label: string }\n>(({ label, ...props }, ref) => {\n return (\n \n \n \n );\n});\n\nexport const SidebarTabsTrigger = forwardRef<\n HTMLButtonElement,\n ComponentProps & { label: ReactNode | string }\n>(({ label, children, ...props }, ref) => {\n return (\n \n \n \n {children}\n \n \n \n );\n});\n\nexport const SidebarTabsList = styled(TabsList, {\n boxSizing: \"border-box\",\n flexShrink: 0,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n outline: \"none\",\n flexGrow: 1,\n backgroundColor: theme.colors.backgroundPanel,\n});\n\nconst sidebarTabsContentStyle = css({\n flexGrow: 1,\n position: \"absolute\",\n top: 0,\n left: \"100%\",\n height: \"100%\",\n backgroundColor: theme.colors.backgroundPanel,\n outline: \"none\",\n // Drawing border this way to ensure content still has full width, avoid subpixels and give layout round numbers\n \"&::after\": {\n content: \"''\",\n position: \"absolute\",\n top: 0,\n right: 0,\n bottom: 0,\n width: 1,\n background: theme.colors.borderMain,\n },\n variants: {\n resizable: {\n true: {\n overflow: \"auto\",\n resize: \"horizontal\",\n },\n },\n },\n});\n\ntype SidebarTabsContentProps = Omit<\n ComponentProps,\n \"onResize\"\n> & {\n css?: CSS;\n resizable?: boolean;\n onResize?: (size: { width: number; height: number }) => void;\n};\n\nexport const SidebarTabsContent = ({\n resizable,\n css,\n onResize,\n ...props\n}: SidebarTabsContentProps) => {\n const onResizeRef = useRef(onResize);\n onResizeRef.current = onResize;\n\n const [element, setElement] = useResize({\n onResizeEnd: (entries) => {\n if (entries[0] && onResizeRef.current) {\n onResizeRef.current({\n width: entries[0].contentRect.width,\n height: entries[0].contentRect.height,\n });\n }\n element?.style.removeProperty(\"width\");\n },\n });\n\n useEffect(() => {\n if (element && onResizeRef.current) {\n const rect = element.getBoundingClientRect();\n onResizeRef.current({ width: rect.width, height: rect.height });\n }\n }, [element]);\n\n return (\n \n );\n};\n" }, { "path": "apps/builder/app/builder/sidebar-left/types.ts", "content": "export const sidebarPanelNames = [\n \"assets\",\n \"components\",\n \"navigator\",\n \"pages\",\n \"marketplace\",\n] as const;\n\nexport type SidebarPanelName = (typeof sidebarPanelNames)[number] | \"none\";\n" }, { "path": "apps/builder/app/canvas/canvas.tsx", "content": "import { useMemo, useEffect, useState, useLayoutEffect, useRef } from \"react\";\nimport { ErrorBoundary, type FallbackProps } from \"react-error-boundary\";\nimport { useStore } from \"@nanostores/react\";\nimport { type Instances, coreMetas } from \"@webstudio-is/sdk\";\nimport { coreTemplates } from \"@webstudio-is/sdk/core-templates\";\nimport type { Components } from \"@webstudio-is/react-sdk\";\nimport { wsImageLoader, wsVideoLoader } from \"@webstudio-is/image\";\nimport { ReactSdkContext } from \"@webstudio-is/react-sdk/runtime\";\nimport * as baseComponents from \"@webstudio-is/sdk-components-react\";\nimport * as baseComponentMetas from \"@webstudio-is/sdk-components-react/metas\";\nimport { hooks as baseComponentHooks } from \"@webstudio-is/sdk-components-react/hooks\";\nimport * as baseComponentTemplates from \"@webstudio-is/sdk-components-react/templates\";\nimport * as animationComponents from \"@webstudio-is/sdk-components-animation\";\nimport * as animationComponentMetas from \"@webstudio-is/sdk-components-animation/metas\";\nimport * as animationTemplates from \"@webstudio-is/sdk-components-animation/templates\";\nimport { hooks as animationComponentHooks } from \"@webstudio-is/sdk-components-animation/hooks\";\nimport * as radixComponents from \"@webstudio-is/sdk-components-react-radix\";\nimport * as radixComponentMetas from \"@webstudio-is/sdk-components-react-radix/metas\";\nimport * as radixTemplates from \"@webstudio-is/sdk-components-react-radix/templates\";\nimport { hooks as radixComponentHooks } from \"@webstudio-is/sdk-components-react-radix/hooks\";\nimport { ErrorMessage } from \"~/shared/error\";\nimport { $publisher, publish } from \"~/shared/pubsub\";\nimport {\n registerContainers,\n serverSyncStore,\n useCanvasStore,\n} from \"~/shared/sync/sync-stores\";\nimport {\n GlobalStyles,\n subscribeStyles,\n mountStyles,\n manageDesignModeStyles,\n manageContentEditModeStyles,\n} from \"./shared/styles\";\nimport {\n WebstudioComponentCanvas,\n WebstudioComponentPreview,\n} from \"./features/webstudio-component\";\nimport {\n $assets,\n $pages,\n $instances,\n registerComponentLibrary,\n $registeredComponents,\n subscribeComponentHooks,\n $isPreviewMode,\n $isDesignMode,\n $isContentMode,\n subscribeModifierKeys,\n assetBaseUrl,\n $breakpoints,\n} from \"~/shared/nano-states\";\nimport { useDragAndDrop } from \"./shared/use-drag-drop\";\nimport {\n initCopyPaste,\n initCopyPasteForContentEditMode,\n} from \"~/shared/copy-paste/init-copy-paste\";\nimport { inflateInstance, subscribeInflator } from \"./inflator\";\nimport { useWindowResizeDebounced } from \"~/shared/dom-hooks\";\nimport { subscribeInstanceSelection } from \"./instance-selection\";\nimport { subscribeInstanceHovering } from \"./instance-hovering\";\nimport { useHashLinkSync } from \"~/shared/pages\";\nimport { useMount } from \"~/shared/hook-utils/use-mount\";\nimport { subscribeInterceptedEvents } from \"./interceptor\";\nimport { subscribeCommands } from \"~/canvas/shared/commands\";\nimport { updateCollaborativeInstanceRect } from \"./collaborative-instance\";\nimport { initCanvasApi } from \"~/shared/canvas-api\";\nimport { subscribeFontLoadingDone } from \"./shared/font-weight-support\";\nimport { subscribeSelected } from \"./instance-selected\";\nimport { subscribeGridGuidesOnSelected } from \"./grid-guide-utils\";\nimport { subscribeScrollNewInstanceIntoView } from \"./shared/scroll-new-instance-into-view\";\nimport { $selectedPage } from \"~/shared/awareness\";\nimport { createInstanceElement } from \"./elements\";\nimport { subscribeScrollbarSize } from \"./scrollbar-width\";\nimport { compareMedia } from \"@webstudio-is/css-engine\";\nimport { builderApi } from \"~/shared/builder-api\";\nimport { useDebounceEffect } from \"@webstudio-is/design-system\";\nimport { subscribeInstanceContextMenu } from \"./instance-context-menu\";\n\nregisterContainers();\n\nconst FallbackComponent = ({ error, resetErrorBoundary }: FallbackProps) => {\n // try to recover from error when webstudio data is changed again\n useEffect(() => {\n return serverSyncStore.subscribe(resetErrorBoundary);\n }, [resetErrorBoundary]);\n return (\n // body is required to prevent breaking collapsed instances logic\n \n \n \n );\n};\n\nconst handleError = (error: unknown) => {\n if (error instanceof Error) {\n builderApi.toast.error(error.message);\n return;\n }\n\n builderApi.toast.error(`Unknown error: ${String(error)}`);\n console.error(error);\n};\n\nconst useElementsTree = (components: Components, instances: Instances) => {\n const isSafeMode = builderApi.isSafeMode();\n const page = useStore($selectedPage);\n const isPreviewMode = useStore($isPreviewMode);\n const breakpointsMap = useStore($breakpoints);\n const rootInstanceId = page?.rootInstanceId ?? \"\";\n\n if (typeof window === \"undefined\") {\n // @todo remove after https://github.com/webstudio-is/webstudio/issues/1313 now its needed to be sure that no leaks exists\n\n console.info({\n $assets: $assets.get().size,\n $pages: $pages.get()?.pages.length ?? 0,\n $instances: $instances.get().size,\n });\n }\n\n const breakpoints = useMemo(\n () => [...breakpointsMap.values()].sort(compareMedia),\n [breakpointsMap]\n );\n\n return useMemo(() => {\n return (\n \n {createInstanceElement({\n instances,\n instanceId: rootInstanceId,\n instanceSelector: [rootInstanceId],\n Component: isPreviewMode\n ? WebstudioComponentPreview\n : WebstudioComponentCanvas,\n components,\n })}\n \n );\n }, [\n instances,\n rootInstanceId,\n components,\n isPreviewMode,\n breakpoints,\n isSafeMode,\n ]);\n};\n\nconst DesignMode = () => {\n const debounceEffect = useDebounceEffect();\n const ref = useRef(undefined);\n\n useDragAndDrop();\n\n useEffect(() => {\n const abortController = new AbortController();\n subscribeScrollNewInstanceIntoView(\n debounceEffect,\n ref,\n abortController.signal\n );\n const unsubscribeSelected = subscribeSelected(debounceEffect);\n const unsubscribeGridGuides = subscribeGridGuidesOnSelected();\n return () => {\n unsubscribeSelected();\n unsubscribeGridGuides();\n abortController.abort();\n };\n }, [debounceEffect]);\n\n useEffect(() => {\n const abortController = new AbortController();\n const options = { signal: abortController.signal };\n // We need to initialize this in both canvas and builder,\n // because the events will fire in either one, depending on where the focus is\n // @todo we need to forward the events from canvas to builder and avoid importing this\n // in both places\n initCopyPaste(options);\n manageDesignModeStyles(options);\n subscribeScrollbarSize(options);\n updateCollaborativeInstanceRect(options);\n subscribeInstanceSelection(options);\n subscribeInstanceHovering(options);\n subscribeFontLoadingDone(options);\n subscribeModifierKeys(options);\n return () => {\n abortController.abort();\n };\n }, []);\n return null;\n};\n\nconst ContentEditMode = () => {\n const debounceEffect = useDebounceEffect();\n const ref = useRef(undefined);\n\n useEffect(() => {\n const abortController = new AbortController();\n subscribeScrollNewInstanceIntoView(\n debounceEffect,\n ref,\n abortController.signal\n );\n const unsubscribeSelected = subscribeSelected(debounceEffect);\n const unsubscribeGridGuides = subscribeGridGuidesOnSelected();\n return () => {\n unsubscribeSelected();\n unsubscribeGridGuides();\n abortController.abort();\n };\n }, [debounceEffect]);\n\n useEffect(() => {\n const abortController = new AbortController();\n const options = { signal: abortController.signal };\n manageContentEditModeStyles(options);\n subscribeScrollbarSize(options);\n subscribeInstanceSelection(options);\n subscribeInstanceHovering(options);\n subscribeFontLoadingDone(options);\n initCopyPasteForContentEditMode(options);\n subscribeModifierKeys(options);\n return () => {\n abortController.abort();\n };\n }, []);\n return null;\n};\n\nexport const Canvas = () => {\n useCanvasStore();\n const isDesignMode = useStore($isDesignMode);\n const isContentMode = useStore($isContentMode);\n\n useMount(() => {\n registerComponentLibrary({\n components: {},\n metas: coreMetas,\n templates: coreTemplates,\n });\n registerComponentLibrary({\n components: baseComponents,\n metas: baseComponentMetas,\n hooks: baseComponentHooks,\n templates: baseComponentTemplates,\n });\n registerComponentLibrary({\n namespace: \"@webstudio-is/sdk-components-react-radix\",\n components: radixComponents,\n metas: radixComponentMetas,\n hooks: radixComponentHooks,\n templates: radixTemplates,\n });\n registerComponentLibrary({\n namespace: \"@webstudio-is/sdk-components-animation\",\n components: animationComponents,\n metas: animationComponentMetas,\n hooks: animationComponentHooks,\n templates: animationTemplates,\n });\n });\n\n useMount(initCanvasApi);\n\n useLayoutEffect(() => {\n mountStyles();\n }, []);\n\n useEffect(subscribeStyles, []);\n\n useEffect(subscribeComponentHooks, []);\n\n useEffect(subscribeCommands, []);\n\n useEffect(() => {\n $publisher.set({ publish });\n }, []);\n\n const selectedPage = useStore($selectedPage);\n\n useEffect(() => {\n const rootInstanceId = selectedPage?.rootInstanceId;\n if (rootInstanceId !== undefined) {\n inflateInstance(rootInstanceId);\n }\n });\n\n useWindowResizeDebounced(() => {\n const rootInstanceId = selectedPage?.rootInstanceId;\n if (rootInstanceId !== undefined) {\n inflateInstance(rootInstanceId);\n }\n });\n\n useEffect(subscribeInflator, []);\n\n useHashLinkSync();\n\n useEffect(subscribeInterceptedEvents, []);\n\n useEffect(subscribeInstanceContextMenu, []);\n\n const components = useStore($registeredComponents);\n const instances = useStore($instances);\n const elements = useElementsTree(components, instances);\n\n const [isInitialized, setInitialized] = useState(false);\n useEffect(() => {\n setInitialized(true);\n }, []);\n\n if (components.size === 0 || instances.size === 0) {\n return;\n }\n\n return (\n <>\n \n {/* catch all errors in rendered components */}\n \n {elements}\n \n {\n // Call hooks after render to ensure effects are last.\n // Helps improve outline calculations as all styles are then applied.\n }\n {isDesignMode && isInitialized && }\n {isContentMode && isInitialized && }\n \n );\n};\n" }, { "path": "apps/builder/app/canvas/collaborative-instance.ts", "content": "import {\n getAllElementsBoundingBox,\n getVisibleElementsByInstanceSelector,\n} from \"~/shared/dom-utils\";\nimport {\n $collaborativeInstanceSelector,\n $collaborativeInstanceRect,\n} from \"~/shared/nano-states\";\n\nexport const updateCollaborativeInstanceRect = ({\n signal,\n}: {\n signal: AbortSignal;\n}) => {\n let frameHandler: number = -1;\n let elements: HTMLElement[] = [];\n\n const frameLoop = () => {\n const newRect = getAllElementsBoundingBox(elements);\n const prevRect = $collaborativeInstanceRect.get();\n\n if (\n newRect.x !== prevRect?.x ||\n newRect.y !== prevRect?.y ||\n newRect.width !== prevRect?.width ||\n newRect.height !== prevRect?.height\n ) {\n $collaborativeInstanceRect.set(newRect);\n }\n\n frameHandler = requestAnimationFrame(frameLoop);\n };\n\n const unsubscribe = $collaborativeInstanceSelector.subscribe((selector) => {\n if (selector === undefined) {\n cancelAnimationFrame(frameHandler);\n $collaborativeInstanceRect.set(undefined);\n elements = [];\n return;\n }\n\n elements = getVisibleElementsByInstanceSelector(selector);\n\n if (elements.length > 0) {\n cancelAnimationFrame(frameHandler);\n frameLoop();\n }\n });\n\n signal.addEventListener(\"abort\", () => {\n unsubscribe();\n cancelAnimationFrame(frameHandler);\n });\n};\n" }, { "path": "apps/builder/app/canvas/elements.tsx", "content": "import {\n Fragment,\n type ForwardRefExoticComponent,\n type JSX,\n type RefAttributes,\n type RefObject,\n} from \"react\";\nimport type { Instance, Instances } from \"@webstudio-is/sdk\";\nimport type { Components } from \"@webstudio-is/react-sdk\";\nimport type { InstanceSelector } from \"~/shared/tree-utils\";\n\nexport type WebstudioComponentProps = {\n instance: Instance;\n instanceSelector: Instance[\"id\"][];\n components: Components;\n};\n\nexport const createInstanceElement = ({\n instances,\n instanceId,\n instanceSelector,\n Component,\n components,\n ref,\n}: {\n instances: Instances;\n instanceId: Instance[\"id\"];\n instanceSelector: InstanceSelector;\n Component: ForwardRefExoticComponent<\n WebstudioComponentProps & RefAttributes\n >;\n components: Components;\n ref?: RefObject;\n}) => {\n const instance = instances.get(instanceId);\n if (instance === undefined) {\n return null;\n }\n return (\n \n );\n};\n\nconst renderText = (text: string): Array => {\n const lines = text.split(\"\\n\");\n return lines.map((line, index) => (\n \n {line}\n {index < lines.length - 1 &&
    }\n     \n ));\n};\n\nexport const createInstanceChildrenElements = ({\n instances,\n instanceSelector,\n children,\n Component,\n components,\n}: {\n instances: Instances;\n instanceSelector: InstanceSelector;\n children: Instance[\"children\"][0][];\n Component: ForwardRefExoticComponent<\n WebstudioComponentProps & RefAttributes\n >;\n components: Components;\n}) => {\n const elements = children.map((child) => {\n if (child.type === \"text\") {\n return renderText(child.value);\n }\n if (child.type === \"expression\") {\n return;\n }\n if (child.type === \"id\") {\n return createInstanceElement({\n instances,\n instanceId: child.value,\n instanceSelector: [child.value, ...instanceSelector],\n Component,\n components,\n });\n }\n\n child satisfies never;\n });\n // let empty children be coalesced with fallback\n if (elements.length === 0) {\n return;\n }\n return elements;\n};\n" }, { "path": "apps/builder/app/canvas/features/build-mode/block-template.tsx", "content": "import { useStore } from \"@nanostores/react\";\nimport {\n selectorIdAttribute,\n type AnyComponent,\n type WebstudioComponentSystemProps,\n} from \"@webstudio-is/react-sdk\";\nimport * as React from \"react\";\nimport { $isDesignMode, $selectedInstanceSelector } from \"~/shared/nano-states\";\n\nexport const BlockTemplate = React.forwardRef<\n HTMLDivElement,\n WebstudioComponentSystemProps & { children: React.ReactNode }\n>(({ ...props }, ref) => {\n const isDesignMode = useStore($isDesignMode);\n const selectedInstanceSelector = useStore($selectedInstanceSelector);\n const templateInstanceStringSelector = props[selectorIdAttribute];\n\n if (!isDesignMode) {\n return;\n }\n\n if (selectedInstanceSelector === undefined) {\n return;\n }\n\n if (selectedInstanceSelector.length === 0) {\n return;\n }\n\n const selectedSelector = selectedInstanceSelector.join(\",\");\n\n // Exclude all selected ancestors\n if (!selectedSelector.endsWith(templateInstanceStringSelector)) {\n return;\n }\n\n const childrenCount = React.Children.count(props.children);\n\n return (\n \n );\n}) as AnyComponent;\n" }, { "path": "apps/builder/app/canvas/features/build-mode/block.tsx", "content": "import { useStore } from \"@nanostores/react\";\nimport { blockTemplateComponent } from \"@webstudio-is/sdk\";\nimport {\n idAttribute,\n selectorIdAttribute,\n type AnyComponent,\n type WebstudioComponentSystemProps,\n} from \"@webstudio-is/react-sdk\";\n\nimport * as React from \"react\";\nimport {\n $instances,\n $isDesignMode,\n $isPreviewMode,\n $selectedInstanceSelector,\n} from \"~/shared/nano-states\";\n\nexport const Block = React.forwardRef<\n HTMLDivElement,\n { children: React.ReactNode } & WebstudioComponentSystemProps\n>(({ children, ...props }, ref) => {\n const instances = useStore($instances);\n const isDesignMode = useStore($isDesignMode);\n const isPreviewMode = useStore($isPreviewMode);\n const instanceId = props[idAttribute];\n const instance = instances.get(instanceId);\n const selectedInstanceSelector = useStore($selectedInstanceSelector);\n\n const childArray = React.Children.toArray(children).filter((child) =>\n React.isValidElement(child)\n );\n\n if (instance === undefined) {\n return
    Content Block instance is undefined
    ;\n }\n\n const templateInstanceId = instance.children.find(\n (child) =>\n child.type === \"id\" &&\n instances.get(child.value)?.component === blockTemplateComponent\n )?.value;\n\n if (templateInstanceId === undefined) {\n return
    Content Block template child is not found
    ;\n }\n\n const templateInstance = instances.get(templateInstanceId);\n\n if (templateInstance === undefined) {\n return
    Content Block template instance is not found
    ;\n }\n\n if (isDesignMode) {\n if (selectedInstanceSelector !== undefined) {\n const selectedSelector = selectedInstanceSelector.join(\",\");\n // If any template child is selected then render only template\n const stringSelector = props[selectorIdAttribute];\n const templateSelector = `${templateInstanceId},${stringSelector}`;\n\n if (selectedSelector.endsWith(templateSelector)) {\n return (\n
    \n {childArray.filter((child) => {\n const { instanceSelector } = child.props;\n\n return instanceSelector[0] === templateInstanceId;\n })}\n
    \n );\n }\n }\n }\n\n const hasContent = childArray.length > 1;\n const hasTemplates = templateInstance.children.length > 0;\n\n if (!isDesignMode && !hasContent && !hasTemplates) {\n return <>;\n }\n\n const editableBlockStyle = hasContent ? { display: \"contents\" } : {};\n\n return (\n
    \n {childArray}\n {hasContent || isPreviewMode ? null : (\n
    Editable block you can edit
    \n )}\n
    \n );\n}) as AnyComponent;\n" }, { "path": "apps/builder/app/canvas/features/text-editor/index.ts", "content": "export { TextEditor } from \"./text-editor\";\n" }, { "path": "apps/builder/app/canvas/features/text-editor/interop.test.tsx", "content": "import { test, expect } from \"vitest\";\nimport { createHeadlessEditor } from \"@lexical/headless\";\nimport { LinkNode } from \"@lexical/link\";\nimport { $, renderData, renderTemplate, ws } from \"@webstudio-is/template\";\nimport { $convertToLexical, $convertToUpdates, type Refs } from \"./interop\";\n\nconst { instances } = renderData(\n <$.Body ws:id=\"bodyId\">\n <$.Box ws:id=\"emptyBoxId\">\n <$.Box ws:id=\"textBoxId\">\n Hello{\"\\n\"}\n <$.Bold ws:id=\"boldId\">\n <$.Italic ws:id=\"italicId\">world\n \n {\"\\n\"}\n <$.Span ws:id=\"spanId\">and\n {\"\\n\"}\n <$.RichTextLink ws:id=\"linkId\" href=\"/my-url\">\n other realms\n \n \n \n Hello{\"\\n\"}\n \n \n world\n \n \n {\"\\n\"}\n \n and\n \n {\"\\n\"}\n \n other realms\n \n \n \n);\n\nconst expectedState = {\n root: expect.objectContaining({\n type: \"root\",\n children: [\n expect.objectContaining({\n type: \"paragraph\",\n children: [\n expect.objectContaining({\n type: \"text\",\n format: 0,\n style: \"\",\n text: \"Hello\",\n }),\n expect.objectContaining({ type: \"linebreak\" }),\n expect.objectContaining({\n type: \"text\",\n format: 3,\n style: \"\",\n text: \"world\",\n }),\n expect.objectContaining({ type: \"linebreak\" }),\n expect.objectContaining({\n type: \"text\",\n format: 0,\n style: \"--style-node-trigger: 1;\",\n text: \"and\",\n }),\n expect.objectContaining({ type: \"linebreak\" }),\n expect.objectContaining({\n type: \"link\",\n format: \"\",\n rel: null,\n target: null,\n title: null,\n url: \"\",\n children: [\n expect.objectContaining({\n type: \"text\",\n format: 0,\n style: \"\",\n text: \"other realms\",\n }),\n ],\n }),\n ],\n }),\n ],\n }),\n};\n\ntest(\"convert legacy instances to lexical\", async () => {\n const refs: Refs = new Map();\n const editor = createHeadlessEditor({\n nodes: [LinkNode],\n });\n await new Promise((resolve) => {\n editor.update(\n () => {\n $convertToLexical(instances, \"textBoxId\", refs);\n },\n { onUpdate: resolve }\n );\n });\n expect(editor.getEditorState().toJSON()).toEqual(expectedState);\n expect(refs).toEqual(\n new Map([\n [\"4:bold\", \"boldId\"],\n [\"4:italic\", \"italicId\"],\n [\"6:span\", \"spanId\"],\n [\"8\", \"linkId\"],\n ])\n );\n});\n\ntest(\"convert element instances to lexical\", async () => {\n const refs: Refs = new Map();\n const editor = createHeadlessEditor({\n nodes: [LinkNode],\n });\n await new Promise((resolve) => {\n editor.update(\n () => {\n $convertToLexical(instances, \"textElementId\", refs);\n },\n { onUpdate: resolve }\n );\n });\n expect(editor.getEditorState().toJSON()).toEqual(expectedState);\n expect(refs).toEqual(\n new Map([\n [\"13:bold\", \"boldElementId\"],\n [\"13:italic\", \"italicElementId\"],\n [\"15:span\", \"spanElementId\"],\n [\"17\", \"linkElementId\"],\n ])\n );\n});\n\ntest(\"convert lexical to element instances updates\", async () => {\n const refs: Refs = new Map();\n const editor = createHeadlessEditor({\n nodes: [LinkNode],\n });\n await new Promise((resolve) => {\n editor.update(\n () => {\n $convertToLexical(instances, \"textElementId\", refs);\n },\n { onUpdate: resolve }\n );\n });\n const treeRootInstance = instances.get(\"textElementId\");\n if (treeRootInstance === undefined) {\n throw Error(\"Tree root instance should be in test data\");\n }\n const updates = editor.getEditorState().read(() => {\n return $convertToUpdates(treeRootInstance, refs, new Map());\n });\n expect(updates).toEqual(\n renderTemplate(\n \n Hello{\"\\n\"}\n \n \n world\n \n \n {\"\\n\"}\n \n and\n \n {\"\\n\"}\n \n other realms\n \n \n ).instances\n );\n});\n" }, { "path": "apps/builder/app/canvas/features/text-editor/interop.ts", "content": "import { nanoid } from \"nanoid\";\nimport {\n type TextNode,\n type ElementNode,\n $getRoot,\n $createTextNode,\n $createParagraphNode,\n $createLineBreakNode,\n $isTextNode,\n $isElementNode,\n $isParagraphNode,\n $isLineBreakNode,\n} from \"lexical\";\nimport { $createLinkNode, $isLinkNode } from \"@lexical/link\";\nimport {\n elementComponent,\n type Instance,\n type Instances,\n} from \"@webstudio-is/sdk\";\nimport { $isSpanNode, $setNodeSpan } from \"./toolbar-connector\";\n\n// Map\nexport type Refs = Map;\n\nconst legacyLexicalFormats = [\n [\"bold\", \"Bold\"],\n [\"italic\", \"Italic\"],\n [\"superscript\", \"Superscript\"],\n [\"subscript\", \"Subscript\"],\n] as const;\n\nconst elementLexicalFormats = [\n [\"bold\", \"b\"],\n [\"italic\", \"i\"],\n [\"superscript\", \"sup\"],\n [\"subscript\", \"sub\"],\n] as const;\n\nconst $writeUpdates = (\n node: ElementNode,\n instanceChildren: Instance[\"children\"],\n instancesList: Instance[],\n refs: Refs,\n newLinkKeyToInstanceId: Refs\n) => {\n const children = node.getChildren();\n for (const child of children) {\n if ($isParagraphNode(child)) {\n $writeUpdates(\n child,\n instanceChildren,\n instancesList,\n refs,\n newLinkKeyToInstanceId\n );\n }\n if ($isLineBreakNode(child)) {\n instanceChildren.push({ type: \"text\", value: \"\\n\" });\n }\n if ($isLinkNode(child)) {\n const key = child.getKey();\n const id = refs.get(key) ?? newLinkKeyToInstanceId.get(key) ?? nanoid();\n refs.set(key, id);\n instanceChildren.push({\n type: \"id\",\n value: id,\n });\n const childChildren: Instance[\"children\"] = [];\n $writeUpdates(\n child,\n childChildren,\n instancesList,\n refs,\n newLinkKeyToInstanceId\n );\n instancesList.push({\n type: \"instance\",\n id,\n component: elementComponent,\n tag: \"a\",\n children: childChildren,\n });\n }\n if ($isTextNode(child)) {\n // support nesting bold into italic and vice versa\n // considering lexical represents both as single node\n // and add ref suffix to distinct styling on one node key\n const text = child.getTextContent();\n let parentUpdates = instanceChildren;\n if ($isSpanNode(child)) {\n // prematurely generate span id to select it right after applying\n const key = `${child.getKey()}:span`;\n const id = refs.get(key) ?? nanoid();\n refs.set(key, id);\n const childChildren: Instance[\"children\"] = [];\n instancesList.push({\n type: \"instance\",\n id,\n component: elementComponent,\n tag: \"span\",\n children: childChildren,\n });\n parentUpdates.push({ type: \"id\", value: id });\n parentUpdates = childChildren;\n }\n // convert all lexical formats\n for (const [format, tag] of elementLexicalFormats) {\n if (child.hasFormat(format)) {\n const key = `${child.getKey()}:${format}`;\n const id = refs.get(key) ?? nanoid();\n refs.set(key, id);\n const childInstance: Instance = {\n type: \"instance\",\n id,\n component: elementComponent,\n tag,\n children: [],\n };\n instancesList.push(childInstance);\n parentUpdates.push({ type: \"id\", value: id });\n parentUpdates = childInstance.children;\n }\n }\n parentUpdates.push({ type: \"text\", value: text });\n }\n }\n};\n\nexport const $convertToUpdates = (\n treeRootInstance: Instance,\n refs: Refs,\n newLinkKeyToInstanceId: Refs\n) => {\n const treeRootInstanceChildren: Instance[\"children\"] = [];\n const instancesList: Instance[] = [\n {\n ...treeRootInstance,\n children: treeRootInstanceChildren,\n },\n ];\n const root = $getRoot();\n $writeUpdates(\n root,\n treeRootInstanceChildren,\n instancesList,\n refs,\n newLinkKeyToInstanceId\n );\n return instancesList;\n};\n\nconst $writeLexical = (\n parent: ElementNode | TextNode,\n children: Instance[\"children\"],\n instances: Instances,\n refs: Refs\n) => {\n for (const child of children) {\n if (child.type === \"text\") {\n // convert text\n if (child.value === \"\\n\" && $isElementNode(parent)) {\n const lineBreakNode = $createLineBreakNode();\n parent.append(lineBreakNode);\n continue;\n }\n if ($isTextNode(parent)) {\n parent.setTextContent(child.value);\n } else {\n const textNode = $createTextNode(child.value);\n parent.append(textNode);\n }\n continue;\n }\n\n const instance = instances.get(child.value);\n if (instance === undefined) {\n continue;\n }\n\n // convert instances\n const isLinkInstance =\n instance.component === \"RichTextLink\" ||\n (instance.component === elementComponent && instance.tag === \"a\");\n if (isLinkInstance && $isElementNode(parent)) {\n const linkNode = $createLinkNode(\"\");\n refs.set(linkNode.getKey(), instance.id);\n parent.append(linkNode);\n $writeLexical(linkNode, instance.children, instances, refs);\n }\n if (\n instance.component === \"Span\" ||\n (instance.component === elementComponent && instance.tag === \"span\")\n ) {\n let textNode;\n if ($isTextNode(parent)) {\n textNode = parent;\n } else {\n textNode = $createTextNode(\"\");\n parent.append(textNode);\n }\n $setNodeSpan(textNode);\n refs.set(`${textNode.getKey()}:span`, instance.id);\n $writeLexical(textNode, instance.children, instances, refs);\n }\n // convert all lexical formats\n for (const [format, component] of legacyLexicalFormats) {\n if (instance.component === component) {\n let textNode;\n if ($isTextNode(parent)) {\n textNode = parent;\n } else {\n textNode = $createTextNode(\"\");\n parent.append(textNode);\n }\n textNode.toggleFormat(format);\n refs.set(`${textNode.getKey()}:${format}`, instance.id);\n $writeLexical(textNode, instance.children, instances, refs);\n }\n }\n // convert all lexical formats\n for (const [format, tag] of elementLexicalFormats) {\n if (instance.component === elementComponent && instance.tag === tag) {\n let textNode;\n if ($isTextNode(parent)) {\n textNode = parent;\n } else {\n textNode = $createTextNode(\"\");\n parent.append(textNode);\n }\n textNode.toggleFormat(format);\n refs.set(`${textNode.getKey()}:${format}`, instance.id);\n $writeLexical(textNode, instance.children, instances, refs);\n }\n }\n }\n};\n\nexport const $convertToLexical = (\n instances: Instances,\n rootInstanceId: Instance[\"id\"],\n refs: Refs\n) => {\n const root = $getRoot();\n const p = $createParagraphNode();\n root.append(p);\n const rootInstance = instances.get(rootInstanceId);\n if (rootInstance) {\n $writeLexical(p, rootInstance.children, instances, refs);\n }\n};\n" }, { "path": "apps/builder/app/canvas/features/text-editor/text-editor.stories.tsx", "content": "import { useEffect, useState } from \"react\";\nimport { useStore } from \"@nanostores/react\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport type { StoryFn, Meta } from \"@storybook/react\";\nimport { action } from \"@storybook/addon-actions\";\nimport { Box, Button, Flex, StorySection } from \"@webstudio-is/design-system\";\nimport { theme } from \"@webstudio-is/design-system\";\nimport type { Instance, Instances, Props } from \"@webstudio-is/sdk\";\nimport { $, renderData } from \"@webstudio-is/template\";\nimport {\n $instances,\n $pages,\n $registeredComponentMetas,\n $textEditingInstanceSelector,\n $textToolbar,\n} from \"~/shared/nano-states\";\nimport { TextEditor } from \"./text-editor\";\nimport { emitCommand, subscribeCommands } from \"~/canvas/shared/commands\";\nimport { $awareness } from \"~/shared/awareness\";\n\nexport default {\n component: TextEditor,\n title: \"Canvas/Text editor\",\n} satisfies Meta;\n\nconst createInstancePair = (\n id: Instance[\"id\"],\n component: string,\n children: Instance[\"children\"]\n): [Instance[\"id\"], Instance] => {\n return [\n id,\n {\n type: \"instance\",\n id,\n component,\n children,\n },\n ];\n};\n\nconst instances: Instances = new Map([\n createInstancePair(\"1\", \"Text\", [\n { type: \"text\", value: \"Paragraph you can edit Blabla \" },\n { type: \"id\", value: \"2\" },\n { type: \"id\", value: \"3\" },\n { type: \"id\", value: \"5\" },\n ]),\n createInstancePair(\"2\", \"Bold\", [\n { type: \"text\", value: \"Very Very very bold text \" },\n ]),\n createInstancePair(\"3\", \"Bold\", [{ type: \"id\", value: \"4\" }]),\n createInstancePair(\"4\", \"Italic\", [\n { type: \"text\", value: \"And Bold Small with small italic\" },\n ]),\n createInstancePair(\"5\", \"Bold\", [\n { type: \"text\", value: \" la la la subtext\" },\n ]),\n]);\n\nconst props: Props = new Map();\n\nexport const Basic: StoryFn = () => {\n const state = useStore($textToolbar);\n\n useEffect(subscribeCommands, []);\n\n return (\n \n
    \n {\n event.preventDefault();\n emitCommand(\"formatBold\");\n }}\n >\n Bold\n \n emitCommand(\"formatItalic\")}\n >\n Italic\n \n emitCommand(\"formatSuperscript\")}\n >\n Superscript\n \n emitCommand(\"formatSubscript\")}\n >\n Subscript\n \n emitCommand(\"formatLink\")}\n >\n Link\n \n emitCommand(\"formatSpan\")}\n >\n Span\n \n emitCommand(\"formatClear\")}\n >\n Clear\n \n div\": {\n padding: `0 ${theme.spacing[5]}`,\n border: \"1px solid #999\",\n color: \"black\",\n },\n }}\n >\n }\n onChange={action(\"onChange\")}\n onSelectInstance={(instanceId) =>\n console.info(\"select instance\", instanceId)\n }\n />\n \n
    \n     \n );\n};\n\nexport const CursorPositioning: StoryFn = () => {\n const textEditingInstanceSelector = useStore($textEditingInstanceSelector);\n\n return (\n \n div\": {\n padding: 40,\n backgroundColor: textEditingInstanceSelector\n ? \"unset\"\n : \"rgba(0,0,0,0.1)\",\n },\n border: \"1px solid #999\",\n color: \"black\",\n \" *\": {\n outline: \"none\",\n },\n }}\n onClick={(event) => {\n if (textEditingInstanceSelector !== undefined) {\n return;\n }\n $textEditingInstanceSelector.set({\n selector: [\"1\"],\n reason: \"click\",\n mouseX: event.clientX,\n mouseY: event.clientY,\n });\n }}\n >\n {textEditingInstanceSelector && (\n }\n onChange={action(\"onChange\")}\n onSelectInstance={(instanceId) =>\n console.info(\"select instance\", instanceId)\n }\n />\n )}\n\n {!textEditingInstanceSelector && (\n
    \n Paragraph you can edit Blabla \n Very Very very bold text \n \n And Bold Small with small italic\n \n la la la subtext\n
    \n )}\n \n
    \n
    \n Click on text above, see cursor position and start editing text\n
    \n {textEditingInstanceSelector && (\n {\n $textEditingInstanceSelector.set(undefined);\n }}\n >\n Reset\n \n )}\n     \n );\n};\n\nexport const CursorPositioningUpDown: StoryFn = () => {\n const [{ instances }, setState] = useState(() => {\n $pages.set({\n folders: [],\n homePage: {\n id: \"homePageId\",\n rootInstanceId: \"bodyId\",\n meta: {},\n path: \"\",\n title: \"\",\n name: \"\",\n },\n pages: [\n {\n id: \"pageId\",\n rootInstanceId: \"bodyId\",\n path: \"\",\n title: \"\",\n name: \"\",\n meta: {},\n },\n ],\n });\n\n $awareness.set({ pageId: \"pageId\" });\n\n $registeredComponentMetas.set(\n new Map([\n [\"Box\", { icon: \"icon\" }],\n [\"Bold\", { icon: \"icon\" }],\n ])\n );\n\n return renderData(\n <$.Body ws:id=\"bodyId\">\n <$.Box ws:id=\"boxAId\">\n Hello world <$.Bold ws:id=\"boldA\">Hello world Hello world\n world Hello worldsdsdj skdk ls dk jslkdjklsjdkl sdk jskdj ksjd lksdj\n dsj\n \n <$.Box ws:id=\"boxBId\">\n Let it be Let it be <$.Bold ws:id=\"boldB\">Let it be Let Let\n it be Let it be Let it be Let it be Let it be Let it be\n \n \n );\n });\n\n useEffect(() => {\n $instances.set(instances);\n }, [instances]);\n\n const textEditingInstanceSelector = useStore($textEditingInstanceSelector);\n\n return (\n \n div > div\": {\n padding: 5,\n border: \"1px solid #999\",\n },\n \"& *[aria-readonly]\": {\n backgroundColor: \"rgba(0,0,0,0.02)\",\n },\n \"& strong\": {\n fontSize: \"1.5em\",\n },\n\n color: \"black\",\n \" *\": {\n outline: \"none\",\n },\n }}\n >\n
    \n }\n onChange={(data) => {\n setState((prev) => {\n for (const instance of data) {\n prev.instances.set(instance.id, instance);\n }\n return prev;\n });\n }}\n onSelectInstance={(instanceId) =>\n console.info(\"select instance\", instanceId)\n }\n />\n
    \n\n \n }\n onChange={(data) => {\n setState((prev) => {\n for (const instance of data) {\n prev.instances.set(instance.id, instance);\n }\n return prev;\n });\n }}\n onSelectInstance={(instanceId) =>\n console.info(\"select instance\", instanceId)\n }\n />\n \n \n
    \n Use arrows to move between editors, clicks are not working\n     \n );\n};\n" }, { "path": "apps/builder/app/canvas/features/text-editor/text-editor.tsx", "content": "import * as colorjs from \"colorjs.io/fn\";\nimport {\n useState,\n useEffect,\n useLayoutEffect,\n useCallback,\n useRef,\n type JSX,\n} from \"react\";\nimport {\n KEY_ENTER_COMMAND,\n INSERT_LINE_BREAK_COMMAND,\n COMMAND_PRIORITY_EDITOR,\n RootNode,\n ElementNode,\n $createLineBreakNode,\n $getSelection,\n $isRangeSelection,\n type EditorState,\n $isLineBreakNode,\n COMMAND_PRIORITY_LOW,\n $setSelection,\n $getRoot,\n $isTextNode,\n $isElementNode,\n KEY_ARROW_DOWN_COMMAND,\n KEY_ARROW_UP_COMMAND,\n KEY_ARROW_RIGHT_COMMAND,\n KEY_ARROW_LEFT_COMMAND,\n $createRangeSelection,\n COMMAND_PRIORITY_CRITICAL,\n $getNearestNodeFromDOMNode,\n // eslint-disable-next-line camelcase\n $normalizeSelection__EXPERIMENTAL,\n type LexicalEditor,\n type SerializedEditorState,\n $createTextNode,\n KEY_DOWN_COMMAND,\n COMMAND_PRIORITY_NORMAL,\n type NodeKey,\n $getNodeByKey,\n SELECTION_CHANGE_COMMAND,\n $selectAll,\n} from \"lexical\";\nimport { LinkNode } from \"@lexical/link\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\n\nimport { nanoid } from \"nanoid\";\nimport { createRegularStyleSheet } from \"@webstudio-is/css-engine\";\nimport type { Instance, Instances, Props } from \"@webstudio-is/sdk\";\nimport {\n inflatedAttribute,\n idAttribute,\n selectorIdAttribute,\n} from \"@webstudio-is/react-sdk\";\nimport { isDescendantOrSelf, type InstanceSelector } from \"~/shared/tree-utils\";\nimport { ToolbarConnectorPlugin } from \"./toolbar-connector\";\nimport { type Refs, $convertToLexical, $convertToUpdates } from \"./interop\";\nimport { useEffectEvent } from \"~/shared/hook-utils/effect-event\";\nimport {\n deleteInstanceMutable,\n findAllEditableInstanceSelector,\n updateWebstudioData,\n} from \"~/shared/instance-utils\";\nimport {\n $blockChildOutline,\n $hoveredInstanceOutline,\n $hoveredInstanceSelector,\n $instances,\n $registeredComponentMetas,\n $selectedInstanceSelector,\n $textEditingInstanceSelector,\n $textEditorContextMenu,\n execTextEditorContextMenuCommand,\n findBlockChildSelector,\n findTemplates,\n} from \"~/shared/nano-states\";\nimport {\n getElementByInstanceSelector,\n getVisibleElementsByInstanceSelector,\n} from \"~/shared/dom-utils\";\nimport deepEqual from \"fast-deep-equal\";\nimport { inflateInstance } from \"~/canvas/inflator\";\nimport {\n $selectedPage,\n addTemporaryInstance,\n getInstancePath,\n selectInstance,\n} from \"~/shared/awareness\";\nimport { shallowEqual } from \"shallow-equal\";\nimport {\n insertListItemAt,\n insertTemplateAt,\n} from \"~/builder/features/workspace/canvas-tools/outline/block-utils\";\nimport { richTextPlaceholders } from \"~/shared/content-model\";\n\nconst BindInstanceToNodePlugin = ({\n refs,\n rootInstanceSelector,\n}: {\n refs: Refs;\n rootInstanceSelector: InstanceSelector;\n}) => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n for (const [nodeKey, instanceId] of refs) {\n // extract key from stored key:style format\n const [key] = nodeKey.split(\":\");\n const element = editor.getElementByKey(key);\n if (element) {\n element.setAttribute(idAttribute, instanceId);\n // We set id + root selector here, for simplicity\n // This solves hover behavior during mouseMove for editable child outline\n // @todo: A normal selector must be used, but it would require significantly more code to detect the tree structure.\n element.setAttribute(\n selectorIdAttribute,\n [instanceId, ...rootInstanceSelector].join(\",\")\n );\n }\n }\n }, [editor, refs, rootInstanceSelector]);\n return null;\n};\n\n/**\n * In case of text color is near transparent, make caret visible with color animation between #666 and #999\n */\nconst CaretColorPlugin = () => {\n const [editor] = useLexicalComposerContext();\n const caretClassName = useState(() => `a${nanoid()}`)[0];\n\n useEffect(() => {\n const rootElement = editor.getRootElement();\n\n if (rootElement === null) {\n return;\n }\n\n const elementColor = window.getComputedStyle(rootElement).color;\n\n let isLightBackground = false;\n try {\n const color = colorjs.parse(elementColor);\n const alpha = color.alpha ?? 1;\n isLightBackground = alpha < 0.1;\n } catch {\n // If we can't parse the color, assume it's not light\n }\n\n if (isLightBackground) {\n // Apply caret color with animated color\n const sheet = createRegularStyleSheet({ name: \"text-editor-caret\" });\n\n // Animation on cursor needed to make it visible on any background\n sheet.addPlaintextRule(`\n\n @keyframes ${caretClassName}-keyframes {\n from {caret-color: #666;}\n to {caret-color: #999;}\n }\n\n .${caretClassName} {\n animation-name: ${caretClassName}-keyframes;\n animation-duration: 0.5s;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n }\n `);\n\n rootElement.classList.add(caretClassName);\n sheet.render();\n\n return () => {\n rootElement.classList.remove(caretClassName);\n sheet.unmount();\n };\n }\n }, [caretClassName, editor]);\n\n return null;\n};\n\nconst isChrome = () =>\n navigator.userAgentData?.brands.some(\n (brand) => brand.brand === \"Google Chrome\"\n );\n\nconst OnChangeOnBlurPlugin = ({\n onChange,\n}: {\n onChange: (editorState: EditorState, reason: \"blur\" | \"unmount\") => void;\n}) => {\n const [editor] = useLexicalComposerContext();\n const handleChange = useEffectEvent(onChange);\n\n useEffect(\n () => () => {\n // Ensures editable content is saved if no blur event occurs before unmount.\n // This can happen in Firefox and Safari.\n // To reproduce: create a Content Block, edit a paragraph, then type `/` and select Heading or Paragraph from the menu.\n // Without this, changes may be lost on unmount in FF and Safari.\n\n if (isChrome()) {\n // Fixes an issue in DEV MODE where, if text is center-aligned inside Flex/Grid,\n // the code below causes Chrome to scroll the editable text block to the center of the view.\n return;\n }\n // The issue is related to React’s development mode.\n // When we set the initial selection in the Editor, we disable Lexical’s internal\n // scrolling using the update operation tag tag: \"skip-scroll-into-view\".\n // The problem is that a read operation forces all pending update operations to commit,\n // and for some reason, this forced commit does not respect tags.\n // In React’s development mode, useEffect runs twice, which causes scrollIntoView\n // to be called during the first read.\n // To prevent this, we disconnect the editor from the DOM\n // by setting editor._rootElement = null;.\n // This makes Lexical assume it’s in headless mode,\n // preventing it from executing DOM operations.\n editor._rootElement = null;\n\n // Safari and FF support as no blur event is triggered in some cases\n editor.read(() => {\n handleChange(editor.getEditorState(), \"unmount\");\n });\n },\n [editor]\n );\n\n useEffect(() => {\n const handleBlur = () => {\n // force read to get the latest state\n editor.read(() => {\n handleChange(editor.getEditorState(), \"blur\");\n });\n };\n\n // https://github.com/facebook/lexical/blob/867d449b2a6497ff9b1fbdbd70724c74a1044d8b/packages/lexical-react/src/LexicalNodeEventPlugin.ts#L59C12-L67C8\n return editor.registerRootListener((rootElement, prevRootElement) => {\n rootElement?.addEventListener(\"blur\", handleBlur);\n prevRootElement?.removeEventListener(\"blur\", handleBlur);\n });\n }, [editor]);\n\n return null;\n};\n\nconst getNodeKeyFromDOMNode = (\n dom: Node,\n editor: LexicalEditor\n): NodeKey | undefined => {\n const prop = `__lexicalKey_${editor._key}`;\n return (dom as Node & Record)[prop];\n};\n\nconst LinkSelectionPlugin = ({\n rootInstanceSelector,\n registerNewLink,\n}: {\n rootInstanceSelector: InstanceSelector;\n registerNewLink: (key: NodeKey, instanceId: string) => void;\n}) => {\n const [editor] = useLexicalComposerContext();\n const [preservedSelection] = useState(rootInstanceSelector);\n\n useEffect(() => {\n if (!editor.isEditable()) {\n return;\n }\n\n const removeUpdateListener = editor.registerUpdateListener(\n ({ editorState }) => {\n editorState.read(() => {\n const selectedInstanceSelector = $selectedInstanceSelector.get();\n\n if (selectedInstanceSelector === undefined) {\n return;\n }\n\n if (\n !isDescendantOrSelf(selectedInstanceSelector, preservedSelection)\n ) {\n return;\n }\n\n const selection = $getSelection();\n if (!$isRangeSelection(selection)) {\n return false;\n }\n const key = selection.anchor.getNode().getKey();\n\n const elt = editor.getElementByKey(key);\n let link = elt?.closest(`a[${selectorIdAttribute}]`);\n const newLink = elt?.closest(`a`);\n\n while (newLink != null && link == null) {\n // new link detected\n\n // https://github.com/facebook/lexical/blob/b7fa4cf673869dac0c2e0c1fe667e71e72ff6adb/packages/lexical/src/LexicalUtils.ts#L465\n const key = getNodeKeyFromDOMNode(newLink, editor);\n if (key === undefined) {\n console.error(\"Key not found for node\", newLink);\n break;\n }\n\n // Register new link\n const instanceId = nanoid();\n\n newLink.setAttribute(idAttribute, instanceId);\n // We set id + root selector here, for simplicity\n // This solves hover behavior during mouseMove for editable child outline\n // @todo: A normal selector must be used, but it would require significantly more code to detect the tree structure.\n newLink.setAttribute(\n selectorIdAttribute,\n [instanceId, ...rootInstanceSelector].join(\",\")\n );\n\n registerNewLink(key, instanceId);\n\n link = newLink;\n\n break;\n }\n\n if (link == null) {\n if (\n shallowEqual(preservedSelection, $selectedInstanceSelector.get())\n ) {\n return false;\n }\n\n selectInstance(preservedSelection);\n\n return false;\n }\n\n const selectorAttribute = link\n .getAttribute(selectorIdAttribute)\n ?.split(\",\");\n\n if (selectorAttribute === undefined) {\n return false;\n }\n\n if (\n shallowEqual(selectorAttribute, $selectedInstanceSelector.get())\n ) {\n return false;\n }\n\n selectInstance(selectorAttribute);\n });\n }\n );\n\n return () => {\n removeUpdateListener();\n };\n }, [editor, preservedSelection, registerNewLink, rootInstanceSelector]);\n\n return null;\n};\n\nconst RemoveParagaphsPlugin = () => {\n const [editor] = useLexicalComposerContext();\n\n // register own commands before RichTextPlugin\n // to stop propagation\n useLayoutEffect(() => {\n const removeCommand = editor.registerCommand(\n KEY_ENTER_COMMAND,\n (event) => {\n const selection = $getSelection();\n if (!$isRangeSelection(selection)) {\n return false;\n }\n event?.preventDefault();\n // returns true which stops propagation\n return editor.dispatchCommand(INSERT_LINE_BREAK_COMMAND, false);\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n // merge pasted paragraphs into single one\n // and separate lines with line breaks\n const removeNodeTransform = editor.registerNodeTransform(\n RootNode,\n (node) => {\n // merge paragraphs into first with line breaks between\n if (node.getChildrenSize() > 1) {\n const children = node.getChildren();\n let first;\n for (let index = 0; index < children.length; index += 1) {\n const paragraph = children[index];\n // With default configuration root contains only paragraphs.\n // Lexical converts headings to paragraphs on paste for example.\n // So he we just check root children which are all paragraphs.\n if (paragraph instanceof ElementNode) {\n if (index === 0) {\n first = paragraph;\n } else if (first) {\n first.append($createLineBreakNode());\n for (const child of paragraph.getChildren()) {\n first.append(child);\n }\n paragraph.remove();\n }\n }\n }\n }\n }\n );\n\n return () => {\n removeCommand();\n removeNodeTransform();\n };\n }, [editor]);\n\n return null;\n};\n\nconst isSelectionLastNode = () => {\n const selection = $getSelection();\n\n if (!$isRangeSelection(selection)) {\n return false;\n }\n\n const rootNode = $getRoot();\n const lastNode = rootNode.getLastDescendant();\n const anchor = selection.anchor;\n\n if ($isLineBreakNode(lastNode)) {\n const anchorNode = anchor.getNode();\n return (\n $isElementNode(anchorNode) &&\n anchorNode.getLastDescendant() === lastNode &&\n anchor.offset === anchorNode.getChildrenSize()\n );\n } else if ($isTextNode(lastNode)) {\n return (\n anchor.offset === lastNode.getTextContentSize() &&\n anchor.getNode() === lastNode\n );\n } else if ($isElementNode(lastNode)) {\n return (\n anchor.offset === lastNode.getChildrenSize() &&\n anchor.getNode() === lastNode\n );\n }\n\n return false;\n};\n\nconst isSelectionFirstNode = () => {\n const selection = $getSelection();\n\n if (!$isRangeSelection(selection)) {\n return false;\n }\n\n const rootNode = $getRoot();\n const firstNode = rootNode.getFirstDescendant();\n const anchor = selection.anchor;\n\n if ($isLineBreakNode(firstNode)) {\n const anchorNode = anchor.getNode();\n return (\n $isElementNode(anchorNode) &&\n anchorNode.getFirstDescendant() === firstNode &&\n anchor.offset === 0\n );\n } else if ($isTextNode(firstNode)) {\n return anchor.offset === 0 && anchor.getNode() === firstNode;\n } else if ($isElementNode(firstNode)) {\n return anchor.offset === 0 && anchor.getNode() === firstNode;\n }\n\n return false;\n};\n\nconst getDomSelectionRect = () => {\n const domSelection = window.getSelection();\n if (!domSelection || !domSelection.focusNode) {\n return;\n }\n\n // Get current line position\n const range = domSelection.getRangeAt(0);\n\n // The cursor position at the beginning of a line is technically associated with both:\n // The end of the previous line\n // The beginning of the current line\n // Select the rectangle for the current line. It typically appears as the last rect in the list.\n const rects = range.getClientRects();\n const currentRect = rects[rects.length - 1] ?? undefined;\n\n return currentRect;\n};\n\nconst getVerticalIntersectionRatio = (rectA: DOMRect, rectB: DOMRect) => {\n const topIntersection = Math.max(rectA.top, rectB.top);\n const bottomIntersection = Math.min(rectA.bottom, rectB.bottom);\n const intersectionHeight = Math.max(0, bottomIntersection - topIntersection);\n const minHeight = Math.min(rectA.height, rectB.height);\n return minHeight === 0 ? 0 : intersectionHeight / minHeight;\n};\n\nconst caretFromPoint = (\n x: number,\n y: number\n): null | {\n offset: number;\n node: Node;\n} => {\n if (typeof document.caretRangeFromPoint !== \"undefined\") {\n const range = document.caretRangeFromPoint(x, y);\n if (range === null) {\n return null;\n }\n return {\n node: range.startContainer,\n offset: range.startOffset,\n };\n } else if (typeof document.caretPositionFromPoint !== \"undefined\") {\n const range = document.caretPositionFromPoint(x, y);\n if (range === null) {\n return null;\n }\n return {\n node: range.offsetNode,\n offset: range.offset,\n };\n } else {\n // Gracefully handle IE\n return null;\n }\n};\n\n/**\n * Select all TEXT nodes inside editor root, then find the top and bottom rects\n */\nconst getTopBottomRects = (\n editor: LexicalEditor\n): [topRects: DOMRect[], bottomRects: DOMRect[]] => {\n const rootElement = editor.getElementByKey($getRoot().getKey());\n if (rootElement == null) {\n return [[], []];\n }\n\n const walker = document.createTreeWalker(\n rootElement,\n NodeFilter.SHOW_TEXT,\n null\n );\n\n const allRects: DOMRect[] = [];\n\n while (walker.nextNode()) {\n const range = document.createRange();\n range.selectNodeContents(walker.currentNode);\n const rects = range.getClientRects();\n allRects.push(...Array.from(rects));\n }\n\n if (allRects.length === 0) {\n return [[], []];\n }\n\n const topRect = Array.from(allRects).sort((a, b) => a.top - b.top)[0];\n\n const bottomRect = Array.from(allRects).sort(\n (a, b) => b.bottom - a.bottom\n )[0];\n\n const topRects = allRects.filter(\n (rect) => getVerticalIntersectionRatio(rect, topRect) > 0.5\n );\n const bottomRects = allRects.filter(\n (rect) => getVerticalIntersectionRatio(rect, bottomRect) > 0.5\n );\n\n return [topRects, bottomRects];\n};\n\nconst InitCursorPlugin = () => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n if (!editor.isEditable()) {\n return;\n }\n\n editor.update(\n () => {\n const textEditingInstanceSelector = $textEditingInstanceSelector.get();\n if (textEditingInstanceSelector === undefined) {\n return;\n }\n\n const { reason } = textEditingInstanceSelector;\n\n if (reason === undefined) {\n return;\n }\n\n if (reason === \"click\") {\n const { mouseX, mouseY } = textEditingInstanceSelector;\n\n const eventRange = caretFromPoint(mouseX, mouseY);\n\n if (eventRange !== null) {\n const { offset: domOffset, node: domNode } = eventRange;\n const node = $getNearestNodeFromDOMNode(domNode);\n\n if (node !== null) {\n const selection = $createRangeSelection();\n if ($isTextNode(node)) {\n selection.anchor.set(node.getKey(), domOffset, \"text\");\n selection.focus.set(node.getKey(), domOffset, \"text\");\n const normalizedSelection =\n $normalizeSelection__EXPERIMENTAL(selection);\n\n $setSelection(normalizedSelection);\n return;\n }\n }\n\n if (domNode instanceof Element) {\n const rect = domNode.getBoundingClientRect();\n if (mouseX > rect.right) {\n const selection = $getRoot().selectEnd();\n $setSelection(selection);\n return;\n }\n }\n }\n }\n\n while (reason === \"down\" || reason === \"up\") {\n const { cursorX } = textEditingInstanceSelector;\n\n const [topRects, bottomRects] = getTopBottomRects(editor);\n\n // Smoodge the cursor a little to the left and right to find the nearest text node\n const smoodgeOffsets = [1, 2, 4];\n const maxOffset = Math.max(...smoodgeOffsets);\n\n const rects = reason === \"down\" ? topRects : bottomRects;\n\n rects.sort((a, b) => a.left - b.left);\n\n const rectWithText = rects.find(\n (rect, index) =>\n rect.left - (index === 0 ? maxOffset : 0) <= cursorX &&\n cursorX <=\n rect.right + (index === rects.length - 1 ? maxOffset : 0)\n );\n\n if (rectWithText === undefined) {\n break;\n }\n\n const newCursorY = rectWithText.top + rectWithText.height / 2;\n\n const eventRanges = [caretFromPoint(cursorX, newCursorY)];\n for (const offset of smoodgeOffsets) {\n eventRanges.push(caretFromPoint(cursorX - offset, newCursorY));\n eventRanges.push(caretFromPoint(cursorX + offset, newCursorY));\n }\n\n for (const eventRange of eventRanges) {\n if (eventRange === null) {\n continue;\n }\n\n const { offset: domOffset, node: domNode } = eventRange;\n const node = $getNearestNodeFromDOMNode(domNode);\n\n if (node !== null && $isTextNode(node)) {\n const selection = $createRangeSelection();\n selection.anchor.set(node.getKey(), domOffset, \"text\");\n selection.focus.set(node.getKey(), domOffset, \"text\");\n const normalizedSelection =\n $normalizeSelection__EXPERIMENTAL(selection);\n $setSelection(normalizedSelection);\n\n return;\n }\n }\n\n break;\n }\n\n if (\n reason === \"down\" ||\n reason === \"right\" ||\n reason === \"enter\" ||\n reason === \"click\"\n ) {\n const firstNode = $getRoot().getFirstDescendant();\n\n if (firstNode === null) {\n return;\n }\n\n if ($isTextNode(firstNode)) {\n const selection = $createRangeSelection();\n selection.anchor.set(firstNode.getKey(), 0, \"text\");\n selection.focus.set(firstNode.getKey(), 0, \"text\");\n $setSelection(selection);\n }\n\n if ($isElementNode(firstNode)) {\n // e.g. Box is empty\n const selection = $createRangeSelection();\n selection.anchor.set(firstNode.getKey(), 0, \"element\");\n selection.focus.set(firstNode.getKey(), 0, \"element\");\n $setSelection(selection);\n }\n\n if ($isLineBreakNode(firstNode)) {\n // e.g. Box contains 2+ empty lines\n const selection = $createRangeSelection();\n $setSelection(selection);\n }\n\n return;\n }\n\n if (reason === \"up\" || reason === \"left\") {\n const selection = $createRangeSelection();\n const lastNode = $getRoot().getLastDescendant();\n\n if (lastNode === null) {\n return;\n }\n\n if ($isTextNode(lastNode)) {\n const contentSize = lastNode.getTextContentSize();\n selection.anchor.set(lastNode.getKey(), contentSize, \"text\");\n selection.focus.set(lastNode.getKey(), contentSize, \"text\");\n $setSelection(selection);\n }\n\n if ($isElementNode(lastNode)) {\n // e.g. Box is empty\n const selection = $createRangeSelection();\n selection.anchor.set(lastNode.getKey(), 0, \"element\");\n selection.focus.set(lastNode.getKey(), 0, \"element\");\n $setSelection(selection);\n }\n\n if ($isLineBreakNode(lastNode)) {\n // e.g. Box contains 2+ empty lines\n const parent = lastNode.getParent();\n if ($isElementNode(parent)) {\n const selection = $createRangeSelection();\n selection.anchor.set(\n parent.getKey(),\n parent.getChildrenSize(),\n \"element\"\n );\n selection.focus.set(\n parent.getKey(),\n parent.getChildrenSize(),\n \"element\"\n );\n $setSelection(selection);\n }\n }\n\n return;\n }\n if (reason === \"new\") {\n $selectAll();\n return;\n }\n\n reason satisfies never;\n },\n {\n // We are controlling scroll ourself in instance-selected.ts see updateScroll.\n // Without skipping we are getting side effects of composition in scrollBy, scrollIntoView calls\n tag: \"skip-scroll-into-view\",\n }\n );\n }, [editor]);\n\n return null;\n};\n\ntype HandleNextParams =\n | {\n reason: \"up\" | \"down\";\n cursorX: number;\n }\n | {\n reason: \"right\" | \"left\";\n };\n\ntype SwitchBlockPluginProps = {\n onNext: (editorState: EditorState, params: HandleNextParams) => void;\n};\n\nconst isSingleCursorSelection = () => {\n const selection = $getSelection();\n\n if (!$isRangeSelection(selection)) {\n return false;\n }\n const isCaret =\n selection.anchor.offset === selection.focus.offset &&\n selection.anchor.key === selection.focus.key;\n\n if (!isCaret) {\n return false;\n }\n\n return true;\n};\n\nconst SwitchBlockPlugin = ({ onNext }: SwitchBlockPluginProps) => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n // The right arrow key should move the cursor to the next block only if it is at the end of the current block.\n return editor.registerCommand(\n KEY_ARROW_RIGHT_COMMAND,\n (event) => {\n if (!isSingleCursorSelection()) {\n return false;\n }\n\n const isLast = isSelectionLastNode();\n\n if (isLast) {\n const state = editor.getEditorState();\n onNext(state, { reason: \"right\" });\n event?.preventDefault();\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onNext]);\n\n useEffect(() => {\n // The left arrow key should move the cursor to the previous block only if it is at the start of the current block.\n return editor.registerCommand(\n KEY_ARROW_LEFT_COMMAND,\n (event) => {\n if (!isSingleCursorSelection()) {\n return false;\n }\n\n const isFirst = isSelectionFirstNode();\n\n if (isFirst) {\n const state = editor.getEditorState();\n onNext(state, { reason: \"left\" });\n event?.preventDefault();\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onNext]);\n\n useEffect(() => {\n // The down arrow key should move the cursor to the next block if:\n // - it is at the end of the current block\n // - the cursor is at the last line of the current block\n return editor.registerCommand(\n KEY_ARROW_DOWN_COMMAND,\n (event) => {\n if (!isSingleCursorSelection()) {\n return false;\n }\n\n const isLast = isSelectionLastNode();\n\n const rect = getDomSelectionRect();\n\n if (isLast) {\n const state = editor.getEditorState();\n onNext(state, { reason: \"down\", cursorX: rect?.x ?? 0 });\n event?.preventDefault();\n return true;\n }\n\n // Check if the cursor is inside a rectangle on the last line\n if (rect === undefined) {\n return false;\n }\n\n const rootNode = $getRoot();\n const lastNode = rootNode.getLastDescendant();\n if ($isLineBreakNode(lastNode)) {\n return false;\n }\n\n const [, lineRects] = getTopBottomRects(editor);\n\n const cursorY = rect.y + rect.height / 2;\n\n if (\n lineRects.some(\n (lineRect) =>\n lineRect.left <= rect.x &&\n rect.x <= lineRect.right &&\n lineRect.top <= cursorY &&\n cursorY <= lineRect.bottom\n )\n ) {\n const state = editor.getEditorState();\n onNext(state, { reason: \"down\", cursorX: rect?.x ?? 0 });\n event?.preventDefault();\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n );\n }, [editor, onNext]);\n\n useEffect(() => {\n // The up arrow key should move the cursor to the previous block if:\n // - it is at the start of the current block\n // - the cursor is at the first line of the current block\n return editor.registerCommand(\n KEY_ARROW_UP_COMMAND,\n (event) => {\n if (!isSingleCursorSelection()) {\n return false;\n }\n\n const isFirst = isSelectionFirstNode();\n const rect = getDomSelectionRect();\n\n if (isFirst) {\n const state = editor.getEditorState();\n onNext(state, { reason: \"up\", cursorX: rect?.x ?? 0 });\n event?.preventDefault();\n return true;\n }\n\n if (rect === undefined) {\n return false;\n }\n\n const rootNode = $getRoot();\n const lastNode = rootNode.getFirstDescendant();\n\n if ($isLineBreakNode(lastNode)) {\n return false;\n }\n\n const [lineRects] = getTopBottomRects(editor);\n\n const cursorY = rect.y + rect.height / 2;\n\n if (\n lineRects.some(\n (lineRect) =>\n lineRect.left <= rect.x &&\n rect.x <= lineRect.right &&\n lineRect.top <= cursorY &&\n cursorY <= lineRect.bottom\n )\n ) {\n const state = editor.getEditorState();\n onNext(state, { reason: \"up\", cursorX: rect?.x ?? 0 });\n event?.preventDefault();\n return true;\n }\n\n // Lexical has a bug where the cursor sometimes stops moving up.\n // Slight adjustments fix this issue.\n const selection = $getSelection();\n if (!$isRangeSelection(selection)) {\n return false;\n }\n selection.modify(\"move\", false, \"character\");\n selection.modify(\"move\", true, \"character\");\n\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n );\n }, [editor, onNext]);\n\n return null;\n};\n\ntype ContextMenuParams = {\n cursorRect: DOMRect;\n};\n\ntype RichTextContentPluginProps = {\n rootInstanceSelector: InstanceSelector;\n onOpen: (\n editorState: EditorState,\n params: undefined | ContextMenuParams\n ) => void;\n onNext: (editorState: EditorState, params: HandleNextParams) => void;\n};\n\nconst RichTextContentPlugin = (props: RichTextContentPluginProps) => {\n const [templates] = useState(() =>\n findTemplates(props.rootInstanceSelector, $instances.get())\n );\n\n if (templates === undefined) {\n return;\n }\n\n if (templates.length === 0) {\n return;\n }\n\n return ;\n};\n\nconst getTag = (instanceId: Instance[\"id\"]) => {\n const instances = $instances.get();\n const metas = $registeredComponentMetas.get();\n const instance = instances.get(instanceId);\n if (instance === undefined) {\n return;\n }\n const meta = metas.get(instance.component);\n const tags = Object.keys(meta?.presetStyle ?? {});\n return instance.tag ?? tags[0];\n};\n\nconst RichTextContentPluginInternal = ({\n rootInstanceSelector,\n onOpen,\n templates,\n onNext,\n}: RichTextContentPluginProps & {\n templates: [instance: Instance, instanceSelector: InstanceSelector][];\n}) => {\n const [editor] = useLexicalComposerContext();\n const [preservedSelection] = useState(rootInstanceSelector);\n\n const handleOpen = useEffectEvent(onOpen);\n\n useEffect(() => {\n if (!editor.isEditable()) {\n return;\n }\n\n let menuState: \"closed\" | \"opening\" | \"opened\" = \"closed\";\n\n let slashNodeKey: NodeKey | undefined = undefined;\n\n const closeMenu = () => {\n if (menuState === \"closed\") {\n return;\n }\n\n menuState = \"closed\";\n\n handleOpen(editor.getEditorState(), undefined);\n\n if (slashNodeKey === undefined) {\n return;\n }\n\n const node = $getNodeByKey(slashNodeKey);\n\n if ($isTextNode(node)) {\n node.setStyle(\"\");\n }\n\n const selectedInstanceSelector = $selectedInstanceSelector.get();\n\n const isSelectionInSameComponent = selectedInstanceSelector\n ? isDescendantOrSelf(selectedInstanceSelector, preservedSelection)\n : false;\n\n if (!isSelectionInSameComponent) {\n node?.remove();\n\n // Delete current\n if ($getRoot().getTextContentSize() === 0) {\n const blockChildSelector =\n findBlockChildSelector(rootInstanceSelector);\n\n if (blockChildSelector) {\n updateWebstudioData((data) => {\n deleteInstanceMutable(\n data,\n getInstancePath(rootInstanceSelector, data.instances)\n );\n });\n }\n }\n }\n\n // if selection changed, remove the slash node\n\n const selection = $getSelection();\n\n if (!$isRangeSelection(selection)) {\n return;\n }\n\n selection.setStyle(\"\");\n };\n\n const unsubscibeSelectionChange = editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n if (menuState !== \"opened\") {\n return false;\n }\n\n const selection = $getSelection();\n\n if (!$isRangeSelection(selection)) {\n closeMenu();\n return false;\n }\n\n if (selection.anchor.key !== slashNodeKey) {\n closeMenu();\n return false;\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n );\n\n const unsubscibeKeyDown = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event) => {\n const selection = $getSelection();\n\n if (!$isRangeSelection(selection)) {\n return false;\n }\n\n if (event.key === \"Backspace\" || event.key === \"Delete\") {\n if ($getRoot().getTextContentSize() === 0) {\n const tag = getTag(rootInstanceSelector[0]);\n if (tag === \"li\") {\n onNext(editor.getEditorState(), { reason: \"left\" });\n const parentInstanceSelector = rootInstanceSelector.slice(1);\n const parentInstance = $instances\n .get()\n .get(parentInstanceSelector[0]);\n const isLastChild = parentInstance?.children.length === 1;\n updateWebstudioData((data) => {\n deleteInstanceMutable(\n data,\n getInstancePath(\n isLastChild ? parentInstanceSelector : rootInstanceSelector,\n data.instances\n )\n );\n });\n event.preventDefault();\n return true;\n }\n\n const blockChildSelector =\n findBlockChildSelector(rootInstanceSelector);\n\n if (blockChildSelector) {\n onNext(editor.getEditorState(), { reason: \"left\" });\n\n updateWebstudioData((data) => {\n deleteInstanceMutable(\n data,\n getInstancePath(blockChildSelector, data.instances)\n );\n });\n\n event.preventDefault();\n return true;\n }\n }\n }\n\n if (menuState === \"closed\") {\n if (event.key === \"Enter\" && !event.shiftKey) {\n // Custom logic if we are editing list item\n const tag = getTag(rootInstanceSelector[0]);\n if (tag === \"li\" && $getRoot().getTextContentSize() > 0) {\n // Instead of creating block component we need to add a new list item\n insertListItemAt(rootInstanceSelector);\n event.preventDefault();\n return true;\n }\n\n // Check if it pressed on the last line, last symbol\n\n const allowedTags = [\"p\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"];\n\n for (const tag of allowedTags) {\n const templateSelector = templates.find(\n ([instance]) => getTag(instance.id) === tag\n )?.[1];\n\n if (templateSelector === undefined) {\n continue;\n }\n\n /*\n @todo Split logic idea\n // clone root node then\n\n // getPreviousSibling\n const removeNextSiblings = (node: LexicalNode) => {\n let current: LexicalNode | null = node;\n while (current) {\n const next = current.getNextSibling();\n if (next) {\n next.remove();\n continue;\n }\n // Move up to parent and continue removing siblings\n\n current = current.getParent();\n\n if ($isRootNode(current)) {\n break;\n }\n }\n };\n\n const anchorNode = selection.anchor.getNode();\n const anchorOffset = selection.anchor.offset;\n\n if (!$isTextNode(anchorNode)) {\n continue;\n }\n anchorNode.splitText(anchorOffset);\n removeNextSiblings(anchorNode);\n\n */\n\n insertTemplateAt(templateSelector, rootInstanceSelector, false);\n\n if (tag === \"li\" && $getRoot().getTextContentSize() === 0) {\n const parentInstanceSelector = rootInstanceSelector.slice(1);\n const parentInstance = $instances\n .get()\n .get(parentInstanceSelector[0]);\n\n const isLastChild = parentInstance?.children.length === 1;\n\n // Pressing Enter within an empty list item deletes the empty item\n updateWebstudioData((data) => {\n deleteInstanceMutable(\n data,\n getInstancePath(\n isLastChild\n ? parentInstanceSelector\n : rootInstanceSelector,\n data.instances\n )\n );\n });\n }\n\n event.preventDefault();\n return true;\n }\n }\n }\n\n if (menuState === \"opened\") {\n if (event.key === \"Escape\") {\n closeMenu();\n event.preventDefault();\n return true;\n }\n\n if (event.key === \" \") {\n closeMenu();\n }\n\n if (event.key === \"/\") {\n closeMenu();\n }\n\n if (event.key === \"Enter\") {\n execTextEditorContextMenuCommand({\n type: \"enter\",\n });\n\n event.preventDefault();\n return true;\n }\n\n if (event.key === \"ArrowUp\") {\n execTextEditorContextMenuCommand({\n type: \"selectPrevious\",\n });\n\n event.preventDefault();\n return true;\n }\n\n if (event.key === \"ArrowDown\") {\n execTextEditorContextMenuCommand({\n type: \"selectNext\",\n });\n\n event.preventDefault();\n return true;\n }\n }\n\n if (menuState === \"closed\") {\n if (event.key !== \"/\") {\n return false;\n }\n\n const slashNode = $createTextNode(\"/\");\n slashNodeKey = slashNode.getKey();\n menuState = \"opening\";\n\n slashNode.setStyle(\"background-color: rgba(127, 127, 127, 0.2);\");\n selection.setStyle(\"background-color: rgba(127, 127, 127, 0.2);\");\n selection.insertNodes([slashNode]);\n\n event.preventDefault();\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n const closeMenuWithUpdate = () => {\n if (menuState === \"closed\") {\n return;\n }\n\n editor.update(() => {\n closeMenu();\n });\n };\n\n const unsubscribeUpdateListener = editor.registerUpdateListener(\n ({ editorState }) => {\n if (menuState === \"opened\") {\n editorState.read(() => {\n if (slashNodeKey === undefined) {\n closeMenu();\n return;\n }\n const node = $getNodeByKey(slashNodeKey);\n\n if (node === null) {\n closeMenuWithUpdate();\n return;\n }\n const content = node.getTextContent();\n\n const filter = content.slice(1);\n\n execTextEditorContextMenuCommand({\n type: \"filter\",\n value: filter,\n });\n });\n }\n\n if (menuState === \"opening\") {\n editorState.read(() => {\n if (slashNodeKey === undefined) {\n closeMenu();\n return;\n }\n\n const slashNode = editor.getElementByKey(slashNodeKey);\n\n if (slashNode === null) {\n closeMenu();\n return;\n }\n\n const rect = slashNode.getBoundingClientRect();\n\n menuState = \"opened\";\n\n handleOpen(editor.getEditorState(), {\n cursorRect: rect,\n });\n });\n }\n }\n );\n\n const unsubscribeBlurListener = editor.registerRootListener(\n (rootElement, prevRootElement) => {\n rootElement?.addEventListener(\"blur\", closeMenuWithUpdate);\n prevRootElement?.removeEventListener(\"blur\", closeMenuWithUpdate);\n }\n );\n\n return () => {\n unsubscibeKeyDown();\n unsubscribeUpdateListener();\n unsubscibeSelectionChange();\n unsubscribeBlurListener();\n // Safari and FF support as no blur event is triggered in some cases\n closeMenuWithUpdate();\n };\n }, [editor, onNext, preservedSelection, rootInstanceSelector, templates]);\n\n return null;\n};\n\nconst onError = (error: Error) => {\n throw error;\n};\n\ntype TextEditorProps = {\n rootInstanceSelector: InstanceSelector;\n instances: Instances;\n props: Props;\n contentEditable: JSX.Element;\n editable?: boolean;\n onChange: (instancesList: Instance[]) => void;\n onSelectInstance: (instanceId: Instance[\"id\"]) => void;\n};\n\nconst mod = (n: number, m: number) => {\n return ((n % m) + m) % m;\n};\n\nconst InitialJSONStatePlugin = ({\n onInitialState,\n}: {\n onInitialState: (json: SerializedEditorState) => void;\n}) => {\n const [editor] = useLexicalComposerContext();\n const handleInitialState = useEffectEvent(onInitialState);\n\n useEffect(() => {\n handleInitialState(editor.getEditorState().toJSON());\n }, [editor]);\n\n return null;\n};\n\n/**\n * Removes link nodes and converts them to text nodes inside elements.\n * Solves the issue with pasting from external sources that contain links.\n */\nconst LinkSanitizePlugin = (): null => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n const rootElement = editor.getRootElement();\n if (rootElement === null) {\n return;\n }\n\n if (!(rootElement instanceof HTMLAnchorElement)) {\n return;\n }\n\n return editor.registerNodeTransform(LinkNode, (linkNode) => {\n linkNode.insertBefore($createTextNode(linkNode.getTextContent()));\n linkNode.remove();\n });\n }, [editor]);\n\n return null;\n};\n\nconst AnyKeyDownPlugin = ({\n onKeyDown,\n}: {\n onKeyDown: (event: KeyboardEvent) => void;\n}) => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n return editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event) => {\n const selection = $getSelection();\n if (!$isRangeSelection(selection)) {\n return false;\n }\n\n onKeyDown(event);\n return false;\n },\n COMMAND_PRIORITY_NORMAL\n );\n }, [editor, onKeyDown]);\n\n return null;\n};\n\nexport const TextEditor = ({\n rootInstanceSelector: rootInstanceSelectorUnstable,\n instances,\n props,\n contentEditable,\n editable,\n onChange,\n onSelectInstance,\n}: TextEditorProps) => {\n const [rootInstanceSelector] = useState(() => rootInstanceSelectorUnstable);\n // class names must be started with letter so we add a prefix\n const [paragraphClassName] = useState(() => `a${nanoid()}`);\n const [italicClassName] = useState(() => `a${nanoid()}`);\n const lastSavedStateJsonRef = useRef(null);\n const [newLinkKeyToInstanceId] = useState(() => new Map());\n\n const handleChange = useEffectEvent(\n (editorState: EditorState, reason: \"blur\" | \"unmount\" | \"next\") => {\n editorState.read(() => {\n const treeRootInstance = instances.get(rootInstanceSelector[0]);\n if (treeRootInstance) {\n const jsonState = editorState.toJSON();\n if (deepEqual(jsonState, lastSavedStateJsonRef.current)) {\n inflateInstance(rootInstanceSelector[0], false);\n return;\n }\n\n onChange(\n $convertToUpdates(treeRootInstance, refs, newLinkKeyToInstanceId)\n );\n newLinkKeyToInstanceId.clear();\n lastSavedStateJsonRef.current = jsonState;\n }\n\n inflateInstance(rootInstanceSelector[0], false);\n });\n\n const textEditingSelector = $textEditingInstanceSelector.get()?.selector;\n if (textEditingSelector === undefined) {\n return;\n }\n\n if (reason === \"blur\") {\n if (shallowEqual(textEditingSelector, rootInstanceSelector)) {\n $textEditingInstanceSelector.set(undefined);\n }\n }\n }\n );\n\n useLayoutEffect(() => {\n const sheet = createRegularStyleSheet({ name: \"text-editor\" });\n\n // reset paragraph styles and make it work inside \n sheet.addPlaintextRule(`\n .${paragraphClassName} { display: inline-block; margin: 0; }\n `);\n\n // fixes the bug on canvas that cursor is not shown on empty elements\n sheet.addPlaintextRule(`\n .${paragraphClassName}:has(br):not(:has(:not(br))) { min-width: 1px; }\n `);\n\n /// set italic style for bold italic combination on the same element\n sheet.addPlaintextRule(`\n .${italicClassName} { font-style: italic; }\n `);\n sheet.render();\n return () => {\n sheet.unmount();\n };\n }, [paragraphClassName, italicClassName]);\n\n // store references separately because lexical nodes\n // cannot store custom data\n // Map\n const [refs] = useState(() => new Map());\n const initialConfig = {\n namespace: \"WsTextEditor\",\n theme: {\n paragraph: paragraphClassName,\n text: {\n italic: italicClassName,\n },\n },\n editable,\n editorState: () => {\n const [rootInstanceId] = rootInstanceSelector;\n // text editor is unmounted when change properties in side panel\n // so assume new nodes don't need to preserve instance id\n // and store only initial references\n $convertToLexical(instances, rootInstanceId, refs);\n },\n nodes: [LinkNode],\n onError,\n };\n\n const handleNext = useEffectEvent(\n (state: EditorState, args: HandleNextParams) => {\n const rootInstanceId = $selectedPage.get()?.rootInstanceId;\n const metas = $registeredComponentMetas.get();\n\n if (rootInstanceId === undefined) {\n return;\n }\n\n const editableInstanceSelectors: InstanceSelector[] = [];\n findAllEditableInstanceSelector({\n instanceSelector: [rootInstanceId],\n instances,\n props,\n metas,\n results: editableInstanceSelectors,\n });\n\n const currentIndex = editableInstanceSelectors.findIndex(\n (instanceSelector) => {\n return (\n instanceSelector[0] === rootInstanceSelector[0] &&\n instanceSelector.join(\",\") === rootInstanceSelector.join(\",\")\n );\n }\n );\n\n if (currentIndex === -1) {\n return;\n }\n\n for (let i = 1; i < editableInstanceSelectors.length; i++) {\n const nextIndex =\n args.reason === \"down\" || args.reason === \"right\"\n ? mod(currentIndex + i, editableInstanceSelectors.length)\n : mod(currentIndex - i, editableInstanceSelectors.length);\n\n const nextSelector = editableInstanceSelectors[nextIndex];\n\n const nextInstance = instances.get(nextSelector[0]);\n if (nextInstance === undefined) {\n continue;\n }\n\n const hasExpressionChildren = nextInstance.children.some(\n (child) => child.type === \"expression\"\n );\n\n // opinionated: Skip if binded (double click is working)\n if (hasExpressionChildren) {\n continue;\n }\n\n // Skip invisible elements\n if (getVisibleElementsByInstanceSelector(nextSelector).length === 0) {\n continue;\n }\n\n const instance = instances.get(nextSelector[0]);\n\n if (instance === undefined) {\n continue;\n }\n const meta = metas.get(instance.component);\n const tags = Object.keys(meta?.presetStyle ?? {});\n const tag = instance.tag ?? tags[0];\n\n // opinionated: Non-collapsed elements without children can act as spacers (they have size for some reason).\n if (\n // Components with pseudo-elements (e.g., ::marker) that prevent content from collapsing\n richTextPlaceholders.has(tag) === false &&\n instance?.children.length === 0\n ) {\n const elt = getElementByInstanceSelector(nextSelector);\n\n if (elt === undefined) {\n continue;\n }\n\n if (!elt.hasAttribute(inflatedAttribute)) {\n continue;\n }\n }\n\n handleChange(state, \"next\");\n\n $textEditingInstanceSelector.set({\n selector: nextSelector,\n ...args,\n });\n\n selectInstance(nextSelector);\n\n break;\n }\n }\n );\n\n const handleAnyKeydown = useCallback((event: KeyboardEvent) => {\n // Skip alt as Block outline depends on Alt key press\n if (event.key === \"Alt\") {\n return;\n }\n\n $blockChildOutline.set(undefined);\n $hoveredInstanceOutline.set(undefined);\n $hoveredInstanceSelector.set(undefined);\n }, []);\n\n const registerNewLink = useCallback(\n (key: NodeKey, instanceId: string) => {\n newLinkKeyToInstanceId.set(key, instanceId);\n addTemporaryInstance({\n id: instanceId,\n component: \"RichTextLink\",\n type: \"instance\",\n children: [],\n });\n },\n [newLinkKeyToInstanceId]\n );\n\n const handleContextMenuOpen = useCallback(\n (_editorState: EditorState, params: undefined | ContextMenuParams) => {\n $textEditorContextMenu.set(params);\n },\n []\n );\n\n return (\n \n \n \n {\n const instanceId = refs.get(`${nodeKey}:span`);\n if (instanceId !== undefined) {\n onSelectInstance(instanceId);\n }\n }}\n />\n \n \n \n\n \n \n\n \n \n \n \n \n \n {\n lastSavedStateJsonRef.current = json;\n }}\n />\n \n );\n};\n" }, { "path": "apps/builder/app/canvas/features/text-editor/toolbar-connector.tsx", "content": "import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n type RangeSelection,\n type TextNode,\n type LexicalEditor,\n $getSelection,\n $isRangeSelection,\n $isTextNode,\n SELECTION_CHANGE_COMMAND,\n COMMAND_PRIORITY_LOW,\n type TextFormatType,\n createCommand,\n COMMAND_PRIORITY_EDITOR,\n} from \"lexical\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport { $patchStyleText } from \"@lexical/selection\";\nimport { LinkNode } from \"@lexical/link\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $textToolbar } from \"~/shared/nano-states\";\nimport { subscribeScrollState } from \"~/canvas/shared/scroll-state\";\n\nlet activeEditor: undefined | LexicalEditor;\n\nexport const getActiveEditor = () => {\n return activeEditor;\n};\n\nexport const TOGGLE_SPAN_COMMAND = createCommand();\nexport const CLEAR_FORMAT_COMMAND = createCommand();\n\nconst spanTriggerName = \"--style-node-trigger\";\n\nexport const $isSpanNode = (node: TextNode) => {\n return node.getStyle().includes(spanTriggerName);\n};\n\nexport const $setNodeSpan = (node: TextNode) => {\n return node.setStyle(`${spanTriggerName}: 1;`);\n};\n\nconst $getSpanNodes = (selection: RangeSelection) => {\n const nodes = selection.getNodes();\n const spans: TextNode[] = [];\n // check each TextNode within selection for existing span nodes\n for (const node of nodes) {\n if ($isTextNode(node) && $isSpanNode(node)) {\n spans.push(node);\n }\n }\n return spans;\n};\n\nconst $toggleSpan = () => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const spans = $getSpanNodes(selection);\n if (spans.length === 0) {\n // lexical creates separate text node when style property do not match\n $patchStyleText(selection, {\n [spanTriggerName]: \"1\",\n });\n } else {\n // clear span nodes style\n for (const node of spans) {\n node.setStyle(\"\");\n }\n }\n }\n};\n\nconst $clearText = () => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n // split nodes by selection and mark with style\n $patchStyleText(selection, {\n \"--clear-selection-trigger\": \"1\",\n });\n // recompute selection to get new splitted nodes\n const newSelection = $getSelection();\n if ($isRangeSelection(newSelection)) {\n // update both nodes and selection\n newSelection.format = 0;\n for (const node of selection.getNodes()) {\n if ($isTextNode(node)) {\n node.setFormat(0);\n node.setStyle(\"\");\n }\n }\n }\n }\n};\n\nconst $isSelectedLink = (selection: RangeSelection) => {\n const [selectedNode] = selection.getNodes();\n return $getNearestNodeOfType(selectedNode, LinkNode) != null;\n};\n\nexport const hasSelectionFormat = (formatType: TextFormatType | \"link\") => {\n return activeEditor?.getEditorState().read(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n if (formatType === \"link\") {\n return $isSelectedLink(selection);\n }\n return selection.hasFormat(formatType);\n }\n });\n};\n\nconst getSelectionClienRect = () => {\n const nativeSelection = window.getSelection();\n if (nativeSelection === null) {\n return;\n }\n\n if (nativeSelection.rangeCount === 0) {\n return;\n }\n\n const domRange = nativeSelection.getRangeAt(0);\n return domRange.getBoundingClientRect();\n};\n\nconst ToolbarConnectorPluginInternal = ({\n onSelectNode,\n}: {\n onSelectNode: (nodeKey: string) => void;\n}) => {\n const [editor] = useLexicalComposerContext();\n\n const isMouseDownRef = useRef(false);\n // control toolbar state on data or selection updates\n const updateToolbar = useCallback(() => {\n const selection = $getSelection();\n if (\n $isRangeSelection(selection) &&\n selection.getTextContent().length !== 0 &&\n isMouseDownRef.current === false\n ) {\n const selectionRect = getSelectionClienRect();\n const isBold = selection.hasFormat(\"bold\");\n const isItalic = selection.hasFormat(\"italic\");\n const isSuperscript = selection.hasFormat(\"superscript\");\n const isSubscript = selection.hasFormat(\"subscript\");\n const isLink = $isSelectedLink(selection);\n const isSpan = $getSpanNodes(selection).length !== 0;\n $textToolbar.set({\n selectionRect,\n isBold,\n isItalic,\n isSuperscript,\n isSubscript,\n isLink,\n isSpan,\n });\n } else {\n $textToolbar.set(undefined);\n }\n }, []);\n\n useEffect(() => {\n return subscribeScrollState({\n onScrollStart: () => {\n // hide toolbar on scroll start preserving all data\n const textToolbar = $textToolbar.get();\n if (textToolbar) {\n $textToolbar.set({\n ...textToolbar,\n selectionRect: undefined,\n });\n }\n },\n onScrollEnd: () => {\n // restore toolbar with new position\n const textToolbar = $textToolbar.get();\n if (textToolbar) {\n $textToolbar.set({\n ...textToolbar,\n selectionRect: getSelectionClienRect(),\n });\n }\n },\n });\n }, []);\n\n // prevent showing toolbar when select with mouse\n useEffect(() => {\n const onMouseDown = () => {\n isMouseDownRef.current = true;\n };\n const onMouseUp = () => {\n isMouseDownRef.current = false;\n const editorState = editor.getEditorState();\n editorState.read(() => {\n updateToolbar();\n });\n };\n document.addEventListener(\"mousedown\", onMouseDown);\n document.addEventListener(\"mouseup\", onMouseUp);\n return () => {\n document.removeEventListener(\"mousedown\", onMouseDown);\n document.removeEventListener(\"mouseup\", onMouseUp);\n };\n }, [editor, updateToolbar]);\n\n useEffect(() => {\n // hide toolbar when editor is unmounted\n return () => {\n $textToolbar.set(undefined);\n };\n }, []);\n\n useEffect(() => {\n return editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n updateToolbar();\n return false;\n },\n COMMAND_PRIORITY_LOW\n );\n }, [editor, updateToolbar]);\n\n useEffect(() => {\n return editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateToolbar();\n });\n });\n }, [editor, updateToolbar]);\n\n useEffect(() => {\n return editor.registerCommand(\n TOGGLE_SPAN_COMMAND,\n () => {\n editor.update(\n () => {\n $toggleSpan();\n },\n {\n onUpdate: () => {\n const editorState = editor.getEditorState();\n editorState.read(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const spans = $getSpanNodes(selection);\n if (spans.length !== 0) {\n const [node] = spans;\n onSelectNode(node.getKey());\n }\n }\n });\n },\n }\n );\n return true;\n },\n COMMAND_PRIORITY_EDITOR\n );\n }, [editor, onSelectNode]);\n\n useEffect(() => {\n return editor.registerCommand(\n CLEAR_FORMAT_COMMAND,\n () => {\n editor.update(() => {\n $clearText();\n });\n return true;\n },\n COMMAND_PRIORITY_EDITOR\n );\n }, [editor]);\n\n return null;\n};\n\nexport const ToolbarConnectorPlugin = ({\n onSelectNode,\n}: {\n onSelectNode: (nodeKey: string) => void;\n}) => {\n const [editor] = useLexicalComposerContext();\n const [hasRootElement, setHasRootElement] = useState(false);\n\n useEffect(() => {\n const rootElement = editor.getRootElement();\n\n /**\n * We don't set root element for VisuallyHidden nodes\n * and need to prevent Toolbar events in this case\n */\n if (rootElement === null) {\n return;\n }\n\n setHasRootElement(true);\n\n activeEditor = editor;\n }, [editor]);\n\n if (hasRootElement === false) {\n return null;\n }\n\n return ;\n};\n" }, { "path": "apps/builder/app/canvas/features/webstudio-component/index.ts", "content": "export * from \"./webstudio-component\";\n" }, { "path": "apps/builder/app/canvas/features/webstudio-component/webstudio-component.test.tsx", "content": "/**\n * @vitest-environment jsdom\n */\nimport { describe, test, expect } from \"vitest\";\nimport { __testing__ } from \"./webstudio-component\";\n\nconst { computeComponentKey } = __testing__;\n\ndescribe(\"computeComponentKey - key generation logic\", () => {\n test(\"prioritizes assetId over other props\", () => {\n expect(\n computeComponentKey({\n $webstudio$canvasOnly$assetId: \"asset-123\",\n src: \"/image.jpg\",\n defaultValue: \"default\",\n })\n ).toBe(\"asset-123\");\n });\n\n test(\"falls back to defaultValue when no assetId\", () => {\n expect(\n computeComponentKey({\n src: \"/image.jpg\",\n defaultValue: \"default-value\",\n })\n ).toBe(\"default-value\");\n });\n\n test(\"uses src when no assetId or defaultValue\", () => {\n expect(\n computeComponentKey({\n src: \"/path/to/video.mp4\",\n })\n ).toBe(\"/path/to/video.mp4\");\n });\n\n test(\"returns undefined when no relevant props\", () => {\n expect(computeComponentKey({})).toBeUndefined();\n });\n\n test(\"handles null and undefined values\", () => {\n expect(\n computeComponentKey({\n src: null,\n defaultValue: undefined,\n })\n ).toBeUndefined();\n });\n\n test(\"coerces defaultValue to string\", () => {\n expect(computeComponentKey({ defaultValue: 42 })).toBe(\"42\");\n expect(computeComponentKey({ defaultValue: true })).toBe(\"true\");\n expect(computeComponentKey({ defaultValue: 0 })).toBe(\"0\");\n });\n\n test(\"coerces src to string\", () => {\n expect(computeComponentKey({ src: \"string-src\" })).toBe(\"string-src\");\n expect(computeComponentKey({ src: 123 })).toBe(\"123\");\n expect(computeComponentKey({ src: undefined })).toBeUndefined();\n });\n\n test(\"different assetIds produce different keys\", () => {\n const key1 = computeComponentKey({\n $webstudio$canvasOnly$assetId: \"asset-123\",\n src: \"/image.jpg\",\n });\n const key2 = computeComponentKey({\n $webstudio$canvasOnly$assetId: \"asset-456\",\n src: \"/image.jpg\",\n });\n\n expect(key1).not.toBe(key2);\n });\n\n test(\"different src values produce different keys\", () => {\n const key1 = computeComponentKey({ src: \"/assets/video1.mp4\" });\n const key2 = computeComponentKey({ src: \"/assets/video2.mp4\" });\n\n expect(key1).not.toBe(key2);\n });\n});\n" }, { "path": "apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx", "content": "import {\n useEffect,\n forwardRef,\n type ForwardedRef,\n useRef,\n useLayoutEffect,\n useMemo,\n Fragment,\n type ReactNode,\n type JSX,\n} from \"react\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { computed } from \"nanostores\";\nimport { useStore } from \"@nanostores/react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type {\n Instance,\n Instances,\n Prop,\n WsComponentMeta,\n} from \"@webstudio-is/sdk\";\nimport {\n findTreeInstanceIds,\n collectionComponent,\n descendantComponent,\n blockComponent,\n blockTemplateComponent,\n getIndexesWithinAncestors,\n elementComponent,\n} from \"@webstudio-is/sdk\";\nimport { indexProperty, tagProperty } from \"@webstudio-is/sdk/runtime\";\nimport {\n idAttribute,\n componentAttribute,\n showAttribute,\n selectorIdAttribute,\n type AnyComponent,\n textContentAttribute,\n standardAttributesToReactProps,\n getCollectionEntries,\n} from \"@webstudio-is/react-sdk\";\nimport { rawTheme } from \"@webstudio-is/design-system\";\nimport { Input, Select, Textarea } from \"@webstudio-is/sdk-components-react\";\n\nconst computeComponentKey = (props: Record) => {\n const assetId = props.$webstudio$canvasOnly$assetId;\n const src = props.src;\n const defaultValue = props.defaultValue;\n\n return (\n (typeof assetId === \"string\" ? assetId : undefined) ??\n (defaultValue != null ? String(defaultValue) : undefined) ??\n (src != null ? String(src) : undefined)\n );\n};\n\nexport const __testing__ = { computeComponentKey };\n\nimport {\n $propValuesByInstanceSelectorWithMemoryProps,\n getIndexedInstanceId,\n $instances,\n $registeredComponentMetas,\n $selectedInstanceRenderState,\n findBlockSelector,\n $props,\n} from \"~/shared/nano-states\";\nimport { $textEditingInstanceSelector } from \"~/shared/nano-states\";\nimport {\n type InstanceSelector,\n areInstanceSelectorsEqual,\n} from \"~/shared/tree-utils\";\nimport { inflateInstance } from \"~/canvas/inflator\";\nimport { getIsVisuallyHidden } from \"~/shared/visually-hidden\";\nimport { serverSyncStore } from \"~/shared/sync/sync-stores\";\nimport { TextEditor } from \"../text-editor\";\nimport {\n $selectedPage,\n getInstanceKey,\n selectInstance,\n} from \"~/shared/awareness\";\nimport {\n createInstanceChildrenElements,\n type WebstudioComponentProps,\n} from \"~/canvas/elements\";\nimport { Block } from \"../build-mode/block\";\nimport { BlockTemplate } from \"../build-mode/block-template\";\nimport {\n editablePlaceholderAttribute,\n editingPlaceholderVariable,\n} from \"~/canvas/shared/styles\";\nimport { richTextPlaceholders } from \"~/shared/content-model\";\n\nconst ContentEditable = ({\n placeholder,\n renderComponentWithRef,\n}: {\n placeholder: string | undefined;\n renderComponentWithRef: (\n elementRef: ForwardedRef\n ) => JSX.Element;\n}) => {\n const [editor] = useLexicalComposerContext();\n\n const ref = useRef(null);\n\n /**\n * useLayoutEffect to be sure that editor plugins on useEffect would have access to rootElement\n */\n useLayoutEffect(() => {\n const rootElement = ref.current;\n\n if (rootElement == null) {\n return;\n }\n\n if (getIsVisuallyHidden(rootElement)) {\n return;\n }\n\n if (rootElement.tagName === \"A\") {\n if (window.getComputedStyle(rootElement).display === \"inline-flex\") {\n // Issue: tag doesn't work with inline-flex when the cursor is at the start or end of the text.\n // Solution: Inline-flex is not supported by Lexical. Use \"inline\" during editing.\n rootElement.style.display = \"inline\";\n }\n }\n\n // Issue: \n );\n});\n\nexport const ProfileMenu = ({\n user,\n userPlanFeatures,\n}: {\n user: User;\n userPlanFeatures: UserPlanFeatures;\n}) => {\n const navigate = useNavigate();\n const nameOrEmail = user.username ?? user.email ?? defaultUserName;\n const purchases = userPlanFeatures.purchases;\n const hasPaidPlan = purchases.length > 0;\n return (\n \n \n \n \n \n \n {user.username ?? defaultUserName}\n {user.email}\n \n {purchases.length > 0 && (\n <>\n \n Purchases\n \n )}\n {purchases.map((purchase, index) =>\n purchase.subscriptionId ? (\n \n navigate(userPlanSubscriptionPath(purchase.subscriptionId))\n }\n >\n {purchase.planName}\n \n ) : (\n \n {purchase.planName}\n \n )\n )}\n {hasPaidPlan === false && (\n {\n window.open(\"https://webstudio.is/pricing\");\n }}\n css={{ gap: theme.spacing[3] }}\n >\n \n
    Upgrade
    \n \n )}\n \n navigate(logoutPath())}>\n Sign Out\n \n     \n     \n );\n};\n" }, { "path": "apps/builder/app/dashboard/projects/colors.ts", "content": "export const colors = Array.from({ length: 50 }, (_, i) => {\n const l = 55 + (i % 3) * 3; // Reduced variation in lightness (55-61%) to lower contrast\n const c = 0.14 + (i % 2) * 0.02; // Reduced variation in chroma (0.14-0.16) for balance\n const h = (i * 137.5) % 360; // Golden angle for pleasing hue distribution\n return `oklch(${l}% ${c.toFixed(2)} ${h.toFixed(1)})`;\n});\n" }, { "path": "apps/builder/app/dashboard/projects/project-card.tsx", "content": "import { useEffect, useState } from \"react\";\nimport {\n css,\n Flex,\n Text,\n truncate,\n theme,\n Tooltip,\n rawTheme,\n Link,\n Box,\n} from \"@webstudio-is/design-system\";\nimport { InfoCircleIcon } from \"@webstudio-is/icons\";\nimport type { DashboardProject } from \"@webstudio-is/dashboard\";\nimport { builderUrl } from \"~/shared/router-utils\";\nimport { ProjectDialogs, type DialogType } from \"./project-dialogs\";\nimport {\n ThumbnailLinkWithAbbr,\n ThumbnailLinkWithImage,\n} from \"../shared/thumbnail\";\nimport { Spinner } from \"../shared/spinner\";\nimport { Card, CardContent, CardFooter } from \"../shared/card\";\nimport type { User } from \"~/shared/db/user.server\";\nimport type { UserPlanFeatures } from \"~/shared/db/user-plan-features.server\";\nimport { ProjectMenu } from \"./project-menu\";\nimport { formatDate } from \"./utils\";\n\nconst infoIconStyle = css({ flexShrink: 0 });\n\nconst PublishedLink = ({\n domain,\n tabIndex,\n}: {\n domain: string;\n tabIndex: number;\n}) => {\n const publishedOrigin = `https://${domain}`;\n return (\n \n {new URL(publishedOrigin).host}\n \n );\n};\n\ntype ProjectCardProps = {\n project: DashboardProject;\n userPlanFeatures: UserPlanFeatures;\n publisherHost: string;\n projectsTags: User[\"projectsTags\"];\n};\n\nexport const ProjectCard = ({\n project: {\n id,\n title,\n domain,\n isPublished,\n createdAt,\n latestBuildVirtual,\n previewImageAsset,\n tags,\n domainsVirtual,\n },\n userPlanFeatures,\n publisherHost,\n projectsTags,\n ...props\n}: ProjectCardProps) => {\n // Determine which domain to display: custom domain if available, otherwise wstd subdomain\n const customDomain = domainsVirtual?.find(\n (d: { domain: string; status: string; verified: boolean }) =>\n d.status === \"ACTIVE\" && d.verified\n )?.domain;\n const displayDomain = customDomain ?? `${domain}.${publisherHost}`;\n const [openDialog, setOpenDialog] = useState();\n const [isHidden, setIsHidden] = useState(false);\n const [isTransitioning, setIsTransitioning] = useState(false);\n\n // Makes sure there are no project tags that reference deleted User tags.\n // We are not deleting project tag from project.tags when deleting User tags.\n const projectTagsIds = (tags || [])\n .map((tagId) => {\n const tag = projectsTags.find((tag) => tag.id === tagId);\n return tag ? tag.id : undefined;\n })\n .filter(Boolean) as string[];\n\n useEffect(() => {\n const linkPath = builderUrl({ origin: window.origin, projectId: id });\n\n const handleNavigate = (event: NavigateEvent) => {\n if (event.destination.url === linkPath) {\n setIsTransitioning(true);\n }\n };\n\n if (window.navigation === undefined) {\n return;\n }\n\n window.navigation.addEventListener(\"navigate\", handleNavigate);\n\n return () => {\n window.navigation.removeEventListener(\"navigate\", handleNavigate);\n };\n }, [id]);\n\n const linkPath = builderUrl({ origin: window.origin, projectId: id });\n\n return (\n \n );\n};\n" }, { "path": "apps/builder/app/dashboard/projects/project-dialogs.tsx", "content": "import { useRevalidator } from \"@remix-run/react\";\nimport { useEffect, useState, type JSX } from \"react\";\nimport {\n Box,\n Button,\n Flex,\n Label,\n Text,\n InputField,\n DialogActions,\n Dialog as BaseDialog,\n DialogTrigger,\n DialogContent as DialogContentBase,\n DialogTitle,\n DialogClose,\n DialogDescription,\n theme,\n} from \"@webstudio-is/design-system\";\nimport { PlusIcon } from \"@webstudio-is/icons\";\nimport { Title } from \"@webstudio-is/project\";\nimport { builderUrl } from \"~/shared/router-utils\";\nimport { ShareProjectContainer } from \"~/shared/share-project\";\nimport { trpcClient } from \"~/shared/trpc/trpc-client\";\nimport type { DashboardProject } from \"@webstudio-is/dashboard\";\nimport {\n ProjectSettingsDialog,\n type SectionName,\n} from \"~/shared/project-settings\";\nimport type { User } from \"~/shared/db/user.server\";\nimport type { UserPlanFeatures } from \"~/shared/db/user-plan-features.server\";\nimport { TagsDialog } from \"./tags\";\nimport {\n destroyClientSync,\n initializeClientSync,\n} from \"~/shared/sync/sync-client\";\nimport { $userPlanFeatures } from \"~/shared/nano-states\";\n\nexport type DialogType = \"rename\" | \"delete\" | \"share\" | \"tags\" | \"settings\";\n\ntype DialogProps = {\n title: string;\n children: JSX.Element | Array;\n trigger?: JSX.Element;\n onOpenChange?: (open: boolean) => void;\n isOpen?: boolean;\n};\n\nconst Dialog = ({\n title,\n children,\n trigger,\n onOpenChange,\n isOpen,\n}: DialogProps) => {\n return (\n \n {trigger && {trigger}}\n \n {children}\n {title}\n \n \n );\n};\n\nconst DialogContent = ({\n onSubmit,\n onChange,\n placeholder,\n errors,\n primaryButton,\n title,\n description,\n label,\n width,\n}: {\n onSubmit: (data: { title: string }) => void;\n onChange?: (data: { title: string }) => void;\n errors?: string;\n placeholder?: string;\n title?: string;\n label: string | JSX.Element;\n description?: string;\n primaryButton: JSX.Element;\n width?: string;\n}) => {\n return (\n {\n event.preventDefault();\n const formData = new FormData(event.currentTarget as HTMLFormElement);\n const title = String(formData.get(\"title\") ?? \"\").trim();\n onSubmit({ title });\n }}\n >\n \n {description && (\n \n {description}\n \n )}\n {typeof label === \"string\" ? : label}\n {\n onChange?.({ title: event.currentTarget.value });\n }}\n />\n \n {errors && {errors}}\n \n \n \n {primaryButton}\n \n \n \n \n \n );\n};\n\nconst useCreateProject = () => {\n const { send, state } = trpcClient.dashboardProject.create.useMutation();\n const [errors, setErrors] = useState();\n\n const handleSubmit = ({ title }: { title: string }) => {\n const parsed = Title.safeParse(title);\n const errors =\n \"error\" in parsed\n ? parsed.error?.issues.map((issue) => issue.message).join(\"\\n\")\n : undefined;\n setErrors(errors);\n if (parsed.success) {\n send({ title }, (data) => {\n if (data?.id) {\n window.location.href = builderUrl({\n origin: window.origin,\n projectId: data.id,\n });\n }\n });\n }\n };\n\n const handleOpenChange = () => {\n setErrors(undefined);\n };\n\n return {\n handleSubmit,\n handleOpenChange,\n state,\n errors,\n };\n};\n\nexport const CreateProject = ({\n buttonText = \"New blank project\",\n}: {\n buttonText?: string;\n}) => {\n const { handleSubmit, handleOpenChange, state, errors } = useCreateProject();\n\n return (\n }>{buttonText}}\n onOpenChange={handleOpenChange}\n >\n \n Create Project\n \n }\n />\n \n );\n};\n\nconst useRenameProject = ({\n projectId,\n onOpenChange,\n}: {\n projectId: string;\n onOpenChange: (isOpen: boolean) => void;\n}) => {\n const { send, state } = trpcClient.dashboardProject.rename.useMutation();\n const [errors, setErrors] = useState();\n const revalidator = useRevalidator();\n\n const handleSubmit = ({ title }: { title: string }) => {\n const parsed = Title.safeParse(title);\n const errors =\n \"error\" in parsed\n ? parsed.error?.issues.map((issue) => issue.message).join(\"\\n\")\n : undefined;\n setErrors(errors);\n if (parsed.success) {\n send({ projectId, title }, () => {\n revalidator.revalidate();\n });\n onOpenChange(false);\n }\n };\n\n return {\n handleSubmit,\n errors,\n state,\n };\n};\n\nexport const RenameProjectDialog = ({\n isOpen,\n title,\n projectId,\n onOpenChange,\n}: {\n isOpen: boolean;\n title: string;\n projectId: string;\n onOpenChange: (isOpen: boolean) => void;\n}) => {\n const { handleSubmit, errors, state } = useRenameProject({\n projectId,\n onOpenChange,\n });\n return (\n \n \n Rename Project\n \n }\n />\n \n );\n};\n\nconst useDeleteProject = ({\n projectId,\n title,\n onOpenChange,\n onHiddenChange,\n}: {\n projectId: string;\n title: string;\n onOpenChange: (isOpen: boolean) => void;\n onHiddenChange: (isHidden: boolean) => void;\n}) => {\n const { send, data, state } =\n trpcClient.dashboardProject.delete.useMutation();\n const [isMatch, setIsMatch] = useState(false);\n const errors = data && \"errors\" in data ? data.errors : undefined;\n const revalidator = useRevalidator();\n\n useEffect(() => {\n if (errors) {\n onOpenChange(true);\n onHiddenChange(false);\n }\n }, [errors, onOpenChange, onHiddenChange]);\n\n const handleSubmit = () => {\n send({ projectId }, () => {\n revalidator.revalidate();\n });\n onHiddenChange(true);\n onOpenChange(false);\n };\n\n const handleChange = ({ title: currentTitle }: { title: string }) => {\n setIsMatch(\n currentTitle.trim().toLocaleLowerCase() ===\n title.trim().toLocaleLowerCase()\n );\n };\n\n return {\n handleSubmit,\n handleChange,\n errors,\n isMatch,\n state,\n };\n};\n\nexport const DeleteProjectDialog = ({\n isOpen,\n title,\n projectId,\n onOpenChange,\n onHiddenChange,\n}: {\n isOpen: boolean;\n title: string;\n projectId: string;\n onOpenChange: (isOpen: boolean) => void;\n onHiddenChange: (isHidden: boolean) => void;\n}) => {\n const { handleSubmit, handleChange, errors, isMatch, state } =\n useDeleteProject({\n projectId,\n title,\n onOpenChange,\n onHiddenChange,\n });\n return (\n \n \n Confirm by typing\n \n {` ${title} `}\n \n below.\n \n }\n description=\"This project and its styles, pages and images will be deleted permanently.\"\n primaryButton={\n \n Delete Forever\n \n }\n width={theme.spacing[\"33\"]}\n />\n \n );\n};\n\nexport const useDuplicateProject = (projectId: string) => {\n const { send } = trpcClient.dashboardProject.clone.useMutation();\n const revalidator = useRevalidator();\n\n return () => {\n send({ projectId }, () => {\n revalidator.revalidate();\n });\n };\n};\n\nexport const ShareProjectDialog = ({\n isOpen,\n onOpenChange,\n projectId,\n}: {\n isOpen: boolean;\n onOpenChange: (isOpen: boolean) => void;\n projectId: string;\n}) => {\n return (\n \n \n \n );\n};\n\n/**\n * Container component that manages data loading for ProjectSettingsDialog.\n * Handles sync initialization when the dialog is opened from the dashboard.\n */\nconst ProjectSettingsDialogContainer = ({\n projectId,\n onOpenChange,\n isOpen,\n userPlanFeatures,\n}: {\n projectId: string;\n onOpenChange: (isOpen: boolean) => void;\n isOpen: boolean;\n userPlanFeatures: UserPlanFeatures;\n}) => {\n const [currentSection, setCurrentSection] = useState<\n SectionName | undefined\n >();\n const [loadingState, setLoadingState] = useState<\n \"idle\" | \"loading\" | \"loaded\"\n >(\"idle\");\n\n // Set section and user plan features when dialog opens\n useEffect(() => {\n if (isOpen) {\n setCurrentSection(\"general\");\n $userPlanFeatures.set(userPlanFeatures);\n setLoadingState(\"loading\");\n } else {\n setCurrentSection(undefined);\n setLoadingState(\"idle\");\n // Reset data stores and stop sync when dialog closes\n destroyClientSync();\n }\n }, [isOpen, userPlanFeatures]);\n\n // Initialize sync when settings dialog is opened\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n\n // Initialize sync which will load data, start project sync, and start polling\n const controller = new AbortController();\n\n initializeClientSync({\n projectId,\n authPermit: \"own\", // Dashboard projects are always owned by the current user\n signal: controller.signal,\n onReady() {\n setLoadingState(\"loaded\");\n },\n });\n\n return () => {\n controller.abort(\"settings-closed\");\n };\n }, [isOpen, projectId]);\n\n return (\n \n );\n};\n\ntype ProjectDialogsProps = {\n projectId: string;\n title: string;\n tags: DashboardProject[\"tags\"];\n openDialog: DialogType | undefined;\n onOpenDialogChange: (dialog: DialogType | undefined) => void;\n onHiddenChange: (isHidden: boolean) => void;\n userPlanFeatures: UserPlanFeatures;\n projectsTags: User[\"projectsTags\"];\n};\n\n/**\n * Shared component that handles all project dialogs.\n */\nexport const ProjectDialogs = ({\n projectId,\n title,\n tags,\n openDialog,\n onOpenDialogChange,\n onHiddenChange,\n userPlanFeatures,\n projectsTags,\n}: ProjectDialogsProps) => {\n const projectTagsIds = (tags || [])\n .map((tagId) => {\n const tag = projectsTags.find((tag) => tag.id === tagId);\n return tag ? tag.id : undefined;\n })\n .filter(Boolean) as string[];\n\n return (\n <>\n onOpenDialogChange(open ? \"rename\" : undefined)}\n title={title}\n projectId={projectId}\n />\n onOpenDialogChange(open ? \"delete\" : undefined)}\n onHiddenChange={onHiddenChange}\n title={title}\n projectId={projectId}\n />\n onOpenDialogChange(open ? \"share\" : undefined)}\n projectId={projectId}\n />\n onOpenDialogChange(open ? \"tags\" : undefined)}\n />\n \n onOpenDialogChange(open ? \"settings\" : undefined)\n }\n isOpen={openDialog === \"settings\"}\n userPlanFeatures={userPlanFeatures}\n />\n \n );\n};\n" }, { "path": "apps/builder/app/dashboard/projects/project-menu.tsx", "content": "import { useState } from \"react\";\nimport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n IconButton,\n theme,\n} from \"@webstudio-is/design-system\";\nimport { EllipsesIcon } from \"@webstudio-is/icons\";\nimport type { DialogType } from \"./project-dialogs\";\nimport { useDuplicateProject } from \"./project-dialogs\";\nimport { builderUrl } from \"~/shared/router-utils\";\n\ntype ProjectMenuProps = {\n projectId: string;\n onOpenChange: (dialog: DialogType) => void;\n};\n\nexport const ProjectMenu = ({ projectId, onOpenChange }: ProjectMenuProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const handleDuplicateProject = useDuplicateProject(projectId);\n\n const handleOpenInSafeMode = () => {\n window.location.href = builderUrl({\n origin: window.origin,\n projectId,\n safemode: true,\n });\n };\n\n return (\n \n \n \n \n \n \n \n \n Duplicate\n \n onOpenChange(\"rename\")}>\n Rename\n \n onOpenChange(\"share\")}>\n Share\n \n onOpenChange(\"delete\")}>\n Delete\n \n onOpenChange(\"tags\")}>\n Tags\n \n onOpenChange(\"settings\")}>\n Settings\n \n \n Open in safe mode\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/dashboard/projects/projects-list.tsx", "content": "import { useState } from \"react\";\nimport {\n Flex,\n Text,\n theme,\n Link,\n css,\n List,\n ListItem,\n IconButton,\n} from \"@webstudio-is/design-system\";\nimport { ChevronUpIcon, ChevronDownIcon } from \"@webstudio-is/icons\";\nimport type { DashboardProject } from \"@webstudio-is/dashboard\";\nimport { builderUrl } from \"~/shared/router-utils\";\nimport { ProjectDialogs, type DialogType } from \"./project-dialogs\";\nimport type { User } from \"~/shared/db/user.server\";\nimport type { UserPlanFeatures } from \"~/shared/db/user-plan-features.server\";\nimport { ProjectMenu } from \"./project-menu\";\nimport { formatDate } from \"./utils\";\nimport type { SortField, SortOrder } from \"./sort\";\n\nconst tableStyles = css({\n display: \"table\",\n width: \"100%\",\n tableLayout: \"fixed\",\n borderCollapse: \"collapse\",\n marginBottom: theme.spacing[13],\n minWidth: 550,\n flexGrow: 1,\n\n '& [role=\"rowgroup\"]': {\n display: \"table-row-group\",\n },\n\n '& [role=\"row\"]': {\n display: \"table-row\",\n position: \"relative\",\n \"&:focus-visible\": {\n outline: `1px solid ${theme.colors.borderFocus}`,\n },\n '&:has([role=\"cell\"]):hover': {\n background: theme.colors.backgroundHover,\n },\n },\n\n '& [role=\"columnheader\"]': {\n display: \"table-cell\",\n padding: theme.spacing[5],\n paddingBottom: theme.spacing[3],\n textAlign: \"left\",\n borderBottom: `1px solid ${theme.colors.borderMain}`,\n \"&:first-child\": {\n width: \"35%\",\n },\n \"&:nth-child(2), &:nth-child(3), &:nth-child(4)\": {\n width: \"20%\",\n },\n \"&:last-child\": {\n width: \"5%\",\n },\n },\n\n '& [role=\"cell\"]': {\n display: \"table-cell\",\n padding: theme.spacing[5],\n verticalAlign: \"middle\",\n },\n});\n\ntype ProjectsListItemProps = {\n project: DashboardProject;\n userPlanFeatures: UserPlanFeatures;\n publisherHost: string;\n projectsTags: User[\"projectsTags\"];\n};\n\nexport const ProjectsListItem = ({\n project: {\n id,\n title,\n domain,\n isPublished,\n createdAt,\n latestBuildVirtual,\n tags,\n domainsVirtual,\n },\n userPlanFeatures,\n publisherHost,\n projectsTags,\n}: ProjectsListItemProps) => {\n const customDomain = domainsVirtual?.find(\n (d: { domain: string; status: string; verified: boolean }) =>\n d.status === \"ACTIVE\" && d.verified\n )?.domain;\n const displayDomain = customDomain ?? `${domain}.${publisherHost}`;\n const [openDialog, setOpenDialog] = useState();\n const [isHidden, setIsHidden] = useState(false);\n\n if (isHidden) {\n return;\n }\n\n const linkPath = builderUrl({ origin: window.origin, projectId: id });\n\n return (\n <>\n \n
    \n
    \n \n \n {title}\n \n {isPublished && (\n \n {displayDomain}\n \n )}\n \n
    \n\n
    \n \n {latestBuildVirtual?.updatedAt\n ? formatDate(latestBuildVirtual.updatedAt)\n : formatDate(createdAt)}\n \n
    \n\n
    \n \n {isPublished && latestBuildVirtual\n ? formatDate(latestBuildVirtual.createdAt)\n : \"Not published\"}\n \n
    \n\n
    \n {formatDate(createdAt)}\n
    \n\n
    \n \n
    \n
    \n     \n\n \n \n );\n};\n\ntype ProjectsListProps = {\n projects: Array;\n userPlanFeatures: UserPlanFeatures;\n publisherHost: string;\n projectsTags: User[\"projectsTags\"];\n sortBy?: SortField;\n sortOrder?: SortOrder;\n onSortChange: (field: SortField) => void;\n};\n\nconst columns: Array<{ field: SortField; label: string } | null> = [\n { field: \"title\", label: \"Name\" },\n { field: \"updatedAt\", label: \"Last modified\" },\n { field: \"publishedAt\", label: \"Last published\" },\n { field: \"createdAt\", label: \"Date created\" },\n null, // Actions column (no sorting)\n];\n\nexport const ProjectsList = ({\n projects,\n userPlanFeatures,\n publisherHost,\n projectsTags,\n sortBy,\n sortOrder,\n onSortChange,\n}: ProjectsListProps) => {\n return (\n
    \n \n
    \n \n
    \n {columns.map((column, index) => (\n
    \n {column ? (\n \n \n {column.label}\n \n onSortChange(column.field)}\n css={{ opacity: sortBy === column.field ? 1 : 0.5 }}\n aria-label={`Sort by ${column.label}${\n sortBy === column.field\n ? sortOrder === \"asc\"\n ? \", sorted ascending\"\n : \", sorted descending\"\n : \", not sorted\"\n }`}\n aria-describedby={`sort-${column.field}-label`}\n tabIndex={-1}\n >\n {sortBy === column.field && sortOrder === \"asc\" ? (\n \n ) : (\n \n )}\n \n \n ) : undefined}\n
    \n ))}\n
    \n     \n
    \n     \n\n \n
    \n {projects.map((project) => (\n \n ))}\n
    \n     \n
    \n );\n};\n" }, { "path": "apps/builder/app/dashboard/projects/projects.tsx", "content": "import {\n Flex,\n Grid,\n List,\n ListItem,\n Text,\n rawTheme,\n theme,\n ToggleGroup,\n ToggleGroupButton,\n} from \"@webstudio-is/design-system\";\nimport { RepeatGridIcon, ListViewIcon } from \"@webstudio-is/icons\";\nimport type { DashboardProject } from \"@webstudio-is/dashboard\";\nimport { ProjectCard } from \"./project-card\";\nimport { CreateProject } from \"./project-dialogs\";\nimport { Header, Main } from \"../shared/layout\";\nimport { useSearchParams } from \"react-router-dom\";\nimport { setIsSubsetOf } from \"~/shared/shim\";\nimport type { User } from \"~/shared/db/user.server\";\nimport type { UserPlanFeatures } from \"~/shared/db/user-plan-features.server\";\nimport { Tag } from \"./tags\";\nimport {\n SortSelect,\n sortProjects,\n type SortState,\n type SortField,\n} from \"./sort\";\nimport { ProjectsList } from \"./projects-list\";\n\nexport const ProjectsGrid = ({\n projects,\n userPlanFeatures,\n publisherHost,\n projectsTags,\n}: ProjectsProps) => {\n return (\n \n \n {projects.map((project) => {\n return (\n \n \n \n );\n })}\n \n \n );\n};\n\ntype ProjectsProps = {\n projects: Array;\n userPlanFeatures: UserPlanFeatures;\n publisherHost: string;\n projectsTags: User[\"projectsTags\"];\n};\n\nexport const Projects = (props: ProjectsProps) => {\n const [searchParams, setSearchParams] = useSearchParams();\n const selectedTags = searchParams.getAll(\"tag\");\n const viewMode = (searchParams.get(\"view\") as \"grid\" | \"list\") ?? \"grid\";\n\n const sortState: SortState = {\n sortBy: searchParams.get(\"sortBy\") as SortState[\"sortBy\"],\n order: searchParams.get(\"order\") as SortState[\"order\"],\n };\n\n const handleSortChange = (newSortState: Required) => {\n const newParams = new URLSearchParams(searchParams);\n newParams.set(\"sortBy\", newSortState.sortBy);\n newParams.set(\"order\", newSortState.order);\n setSearchParams(newParams);\n };\n\n const handleTableSort = (field: SortField) => {\n const currentSortBy = sortState.sortBy ?? \"updatedAt\";\n const currentOrder = sortState.order ?? \"desc\";\n\n // If clicking the same field, toggle the order\n if (field === currentSortBy) {\n const newOrder = currentOrder === \"asc\" ? \"desc\" : \"asc\";\n handleSortChange({ sortBy: field, order: newOrder });\n } else {\n // When switching to a new field, use smart defaults\n const newOrder = field === \"title\" ? \"asc\" : \"desc\";\n handleSortChange({ sortBy: field, order: newOrder });\n }\n };\n\n const handleViewChange = (value: string) => {\n const newParams = new URLSearchParams(searchParams);\n if (value === \"grid\") {\n newParams.delete(\"view\");\n } else {\n newParams.set(\"view\", value);\n }\n setSearchParams(newParams);\n };\n\n // Filter by tags\n let projects = props.projects;\n if (selectedTags.length > 0) {\n projects = projects.filter((project) =>\n setIsSubsetOf(new Set(selectedTags), new Set(project.tags))\n );\n }\n projects = sortProjects(projects, sortState);\n\n return (\n
    \n
    \n \n Projects\n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n \n \n {props.projectsTags.map((tag, index) => {\n return (\n \n {tag.label}\n \n );\n })}\n \n \n \n {projects.length === 0 ? (\n \n No projects found\n \n ) : viewMode === \"grid\" ? (\n \n ) : (\n \n )}\n \n
    \n );\n};\n" }, { "path": "apps/builder/app/dashboard/projects/sort.test.ts", "content": "/**\n * Tests for the sortProjects function and sort order semantics.\n *\n * This test suite covers:\n * 1. All sort fields (title, createdAt, updatedAt, publishedAt)\n * 2. Both sort orders (asc, desc)\n * 3. Special cases (unpublished projects, fallback to createdAt)\n * 4. Immutability guarantees\n * 5. Edge cases (empty arrays, single items, identical values)\n * 6. Order semantics:\n * - Alphabetical: asc = A→Z, desc = Z→A\n * - Dates: asc = Oldest first, desc = Newest first\n */\n\nimport { describe, test, expect } from \"vitest\";\nimport { sortProjects } from \"./sort\";\nimport type { DashboardProject } from \"@webstudio-is/dashboard\";\n\ntype LatestBuildVirtual = NonNullable;\n\nconst createMockProject = (\n overrides: Partial\n): DashboardProject => {\n return {\n id: \"project-1\",\n title: \"Test Project\",\n domain: \"test\",\n isDeleted: false,\n createdAt: \"2024-01-01T00:00:00.000Z\",\n marketplaceApprovalStatus: \"UNLISTED\",\n latestBuildVirtual: null,\n previewImageAsset: null,\n tags: [],\n isPublished: false,\n ...overrides,\n } as DashboardProject;\n};\n\ndescribe(\"sortProjects\", () => {\n describe(\"sort by title\", () => {\n test(\"sorts alphabetically in ascending order\", () => {\n const projects = [\n createMockProject({ id: \"1\", title: \"Zebra\" }),\n createMockProject({ id: \"2\", title: \"Apple\" }),\n createMockProject({ id: \"3\", title: \"Mango\" }),\n ];\n\n const sorted = sortProjects(projects, { sortBy: \"title\", order: \"asc\" });\n\n expect(sorted.map((p) => p.title)).toEqual([\"Apple\", \"Mango\", \"Zebra\"]);\n });\n\n test(\"sorts alphabetically in descending order\", () => {\n const projects = [\n createMockProject({ id: \"1\", title: \"Apple\" }),\n createMockProject({ id: \"2\", title: \"Zebra\" }),\n createMockProject({ id: \"3\", title: \"Mango\" }),\n ];\n\n const sorted = sortProjects(projects, { sortBy: \"title\", order: \"desc\" });\n\n expect(sorted.map((p) => p.title)).toEqual([\"Zebra\", \"Mango\", \"Apple\"]);\n });\n\n test(\"handles case-insensitive sorting\", () => {\n const projects = [\n createMockProject({ id: \"1\", title: \"zebra\" }),\n createMockProject({ id: \"2\", title: \"Apple\" }),\n createMockProject({ id: \"3\", title: \"MANGO\" }),\n ];\n\n const sorted = sortProjects(projects, { sortBy: \"title\", order: \"asc\" });\n\n expect(sorted.map((p) => p.title)).toEqual([\"Apple\", \"MANGO\", \"zebra\"]);\n });\n });\n\n describe(\"sort by createdAt\", () => {\n test(\"sorts by creation date in ascending order (oldest first)\", () => {\n const projects = [\n createMockProject({ id: \"1\", createdAt: \"2024-03-01T00:00:00.000Z\" }),\n createMockProject({ id: \"2\", createdAt: \"2024-01-01T00:00:00.000Z\" }),\n createMockProject({ id: \"3\", createdAt: \"2024-02-01T00:00:00.000Z\" }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"createdAt\",\n order: \"asc\",\n });\n\n expect(sorted.map((p) => p.id)).toEqual([\"2\", \"3\", \"1\"]);\n });\n\n test(\"sorts by creation date in descending order (newest first)\", () => {\n const projects = [\n createMockProject({ id: \"1\", createdAt: \"2024-01-01T00:00:00.000Z\" }),\n createMockProject({ id: \"2\", createdAt: \"2024-03-01T00:00:00.000Z\" }),\n createMockProject({ id: \"3\", createdAt: \"2024-02-01T00:00:00.000Z\" }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"createdAt\",\n order: \"desc\",\n });\n\n expect(sorted.map((p) => p.id)).toEqual([\"2\", \"3\", \"1\"]);\n });\n });\n\n describe(\"sort by updatedAt (last modified)\", () => {\n test(\"sorts by latest build updatedAt when available\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n buildId: \"build1\",\n projectId: \"1\",\n domainsVirtualId: \"\",\n domain: \"test\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n updatedAt: \"2024-03-01T00:00:00.000Z\",\n publishStatus: \"PUBLISHED\",\n },\n }),\n createMockProject({\n id: \"2\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n buildId: \"build2\",\n projectId: \"2\",\n domainsVirtualId: \"\",\n domain: \"test\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n updatedAt: \"2024-01-15T00:00:00.000Z\",\n publishStatus: \"PUBLISHED\",\n },\n }),\n createMockProject({\n id: \"3\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n buildId: \"build3\",\n projectId: \"3\",\n domainsVirtualId: \"\",\n domain: \"test\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n updatedAt: \"2024-02-01T00:00:00.000Z\",\n publishStatus: \"PUBLISHED\",\n },\n }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"updatedAt\",\n order: \"desc\",\n });\n\n expect(sorted.map((p) => p.id)).toEqual([\"1\", \"3\", \"2\"]);\n });\n\n test(\"falls back to createdAt when latestBuildVirtual is null\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n createdAt: \"2024-03-01T00:00:00.000Z\",\n latestBuildVirtual: null,\n }),\n createMockProject({\n id: \"2\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n buildId: \"build2\",\n projectId: \"2\",\n domainsVirtualId: \"\",\n domain: \"test\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n updatedAt: \"2024-02-01T00:00:00.000Z\",\n publishStatus: \"PUBLISHED\",\n },\n }),\n createMockProject({\n id: \"3\",\n createdAt: \"2024-02-01T00:00:00.000Z\",\n latestBuildVirtual: null,\n }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"updatedAt\",\n order: \"desc\",\n });\n\n // Project 1: March 1 (createdAt fallback)\n // Project 2: Feb 1 (latestBuildVirtual.updatedAt)\n // Project 3: Feb 1 (createdAt fallback)\n expect(sorted.map((p) => p.id)).toEqual([\"1\", \"2\", \"3\"]);\n });\n\n test(\"sorts in ascending order (oldest first)\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n buildId: \"build1\",\n projectId: \"1\",\n domainsVirtualId: \"\",\n domain: \"test\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n updatedAt: \"2024-03-01T00:00:00.000Z\",\n publishStatus: \"PUBLISHED\",\n },\n }),\n createMockProject({\n id: \"2\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n buildId: \"build2\",\n projectId: \"2\",\n domainsVirtualId: \"\",\n domain: \"test\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n updatedAt: \"2024-01-15T00:00:00.000Z\",\n publishStatus: \"PUBLISHED\",\n },\n }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"updatedAt\",\n order: \"asc\",\n });\n\n expect(sorted.map((p) => p.id)).toEqual([\"2\", \"1\"]);\n });\n });\n\n describe(\"sort by publishedAt (date published)\", () => {\n test(\"sorts published projects by publish date\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n isPublished: true,\n latestBuildVirtual: {\n publishStatus: \"PUBLISHED\",\n createdAt: \"2024-03-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"2\",\n isPublished: true,\n latestBuildVirtual: {\n publishStatus: \"PUBLISHED\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"3\",\n isPublished: true,\n latestBuildVirtual: {\n publishStatus: \"PUBLISHED\",\n createdAt: \"2024-02-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"publishedAt\",\n order: \"desc\",\n });\n\n expect(sorted.map((p) => p.id)).toEqual([\"1\", \"3\", \"2\"]);\n });\n\n test(\"puts unpublished projects at the end in descending order\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n isPublished: true,\n latestBuildVirtual: {\n publishStatus: \"PUBLISHED\",\n createdAt: \"2024-02-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"2\",\n isPublished: false,\n latestBuildVirtual: null,\n }),\n createMockProject({\n id: \"3\",\n isPublished: false,\n latestBuildVirtual: {\n publishStatus: \"PENDING\",\n createdAt: \"2024-03-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"4\",\n isPublished: true,\n latestBuildVirtual: {\n publishStatus: \"PUBLISHED\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"publishedAt\",\n order: \"desc\",\n });\n\n // Unpublished projects (isPublished: false) come at the end\n // Published projects sorted by date descending\n expect(sorted.map((p) => p.id)).toEqual([\"1\", \"4\", \"2\", \"3\"]);\n });\n\n test(\"puts unpublished projects at the end in ascending order\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n isPublished: true,\n latestBuildVirtual: {\n publishStatus: \"PUBLISHED\",\n createdAt: \"2024-02-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"2\",\n isPublished: false,\n latestBuildVirtual: null,\n }),\n createMockProject({\n id: \"3\",\n isPublished: true,\n latestBuildVirtual: {\n publishStatus: \"PUBLISHED\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"publishedAt\",\n order: \"asc\",\n });\n\n // Published projects first (sorted by date ascending), then unpublished\n expect(sorted.map((p) => p.id)).toEqual([\"3\", \"1\", \"2\"]);\n });\n\n test(\"maintains order for multiple unpublished projects\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n isPublished: false,\n latestBuildVirtual: null,\n }),\n createMockProject({\n id: \"2\",\n isPublished: false,\n latestBuildVirtual: {\n publishStatus: \"PENDING\",\n } as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"3\",\n isPublished: false,\n latestBuildVirtual: null,\n }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"publishedAt\",\n order: \"desc\",\n });\n\n expect(sorted.map((p) => p.id)).toEqual([\"1\", \"2\", \"3\"]);\n });\n });\n\n describe(\"immutability\", () => {\n test(\"does not mutate the original array\", () => {\n const projects = [\n createMockProject({ id: \"1\", title: \"B\" }),\n createMockProject({ id: \"2\", title: \"A\" }),\n ];\n\n const originalOrder = projects.map((p) => p.id);\n sortProjects(projects, { sortBy: \"title\", order: \"asc\" });\n\n expect(projects.map((p) => p.id)).toEqual(originalOrder);\n });\n\n test(\"returns a new array\", () => {\n const projects = [\n createMockProject({ id: \"1\", title: \"A\" }),\n createMockProject({ id: \"2\", title: \"B\" }),\n ];\n\n const sorted = sortProjects(projects, { sortBy: \"title\", order: \"asc\" });\n\n expect(sorted).not.toBe(projects);\n });\n });\n\n describe(\"edge cases\", () => {\n test(\"handles empty array\", () => {\n const sorted = sortProjects([], { sortBy: \"title\", order: \"asc\" });\n expect(sorted).toEqual([]);\n });\n\n test(\"handles single project\", () => {\n const projects = [createMockProject({ id: \"1\", title: \"Only\" })];\n const sorted = sortProjects(projects, { sortBy: \"title\", order: \"asc\" });\n expect(sorted).toHaveLength(1);\n expect(sorted[0].id).toBe(\"1\");\n });\n\n test(\"handles projects with identical values\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n title: \"Same\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n }),\n createMockProject({\n id: \"2\",\n title: \"Same\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n }),\n createMockProject({\n id: \"3\",\n title: \"Same\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n }),\n ];\n\n const sorted = sortProjects(projects, { sortBy: \"title\", order: \"asc\" });\n expect(sorted).toHaveLength(3);\n });\n });\n\n describe(\"default sort options\", () => {\n test(\"defaults to updatedAt desc when no sort state provided\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n updatedAt: \"2024-01-15T00:00:00.000Z\",\n } as unknown as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"2\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n updatedAt: \"2024-03-01T00:00:00.000Z\",\n } as unknown as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"3\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n updatedAt: \"2024-02-01T00:00:00.000Z\",\n } as unknown as LatestBuildVirtual,\n }),\n ];\n\n const sorted = sortProjects(projects);\n\n // Default: updatedAt desc (newest first)\n expect(sorted.map((p) => p.id)).toEqual([\"2\", \"3\", \"1\"]);\n });\n\n test(\"defaults to updatedAt when only order is provided\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n updatedAt: \"2024-01-15T00:00:00.000Z\",\n } as unknown as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"2\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n updatedAt: \"2024-03-01T00:00:00.000Z\",\n } as unknown as LatestBuildVirtual,\n }),\n ];\n\n const sorted = sortProjects(projects, { order: \"asc\" });\n\n // updatedAt asc (oldest first)\n expect(sorted.map((p) => p.id)).toEqual([\"1\", \"2\"]);\n });\n\n test(\"defaults to desc order when only sortBy is provided\", () => {\n const projects = [\n createMockProject({ id: \"1\", title: \"Apple\" }),\n createMockProject({ id: \"2\", title: \"Zebra\" }),\n createMockProject({ id: \"3\", title: \"Mango\" }),\n ];\n\n const sorted = sortProjects(projects, { sortBy: \"title\" });\n\n // title desc (Z→A)\n expect(sorted.map((p) => p.title)).toEqual([\"Zebra\", \"Mango\", \"Apple\"]);\n });\n\n test(\"uses provided sortBy and order when both are specified\", () => {\n const projects = [\n createMockProject({ id: \"1\", title: \"Zebra\" }),\n createMockProject({ id: \"2\", title: \"Apple\" }),\n createMockProject({ id: \"3\", title: \"Mango\" }),\n ];\n\n const sorted = sortProjects(projects, { sortBy: \"title\", order: \"asc\" });\n\n // title asc (A→Z)\n expect(sorted.map((p) => p.title)).toEqual([\"Apple\", \"Mango\", \"Zebra\"]);\n });\n\n test(\"handles empty sort state object\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n updatedAt: \"2024-01-15T00:00:00.000Z\",\n } as unknown as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"2\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n updatedAt: \"2024-03-01T00:00:00.000Z\",\n } as unknown as LatestBuildVirtual,\n }),\n ];\n\n const sorted = sortProjects(projects, {});\n\n // Default: updatedAt desc\n expect(sorted.map((p) => p.id)).toEqual([\"2\", \"1\"]);\n });\n });\n\n describe(\"order semantics\", () => {\n describe(\"alphabetical sorting\", () => {\n test(\"asc order produces A→Z sorting\", () => {\n const projects = [\n createMockProject({ id: \"1\", title: \"Zebra\" }),\n createMockProject({ id: \"2\", title: \"Apple\" }),\n createMockProject({ id: \"3\", title: \"Mango\" }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"title\",\n order: \"asc\",\n });\n\n // A→Z: Apple, Mango, Zebra\n expect(sorted.map((p) => p.title)).toEqual([\"Apple\", \"Mango\", \"Zebra\"]);\n });\n\n test(\"desc order produces Z→A sorting\", () => {\n const projects = [\n createMockProject({ id: \"1\", title: \"Apple\" }),\n createMockProject({ id: \"2\", title: \"Zebra\" }),\n createMockProject({ id: \"3\", title: \"Mango\" }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"title\",\n order: \"desc\",\n });\n\n // Z→A: Zebra, Mango, Apple\n expect(sorted.map((p) => p.title)).toEqual([\"Zebra\", \"Mango\", \"Apple\"]);\n });\n });\n\n describe(\"date sorting\", () => {\n test(\"desc order produces newest first for createdAt\", () => {\n const projects = [\n createMockProject({ id: \"1\", createdAt: \"2024-01-01T00:00:00.000Z\" }),\n createMockProject({ id: \"2\", createdAt: \"2024-03-01T00:00:00.000Z\" }),\n createMockProject({ id: \"3\", createdAt: \"2024-02-01T00:00:00.000Z\" }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"createdAt\",\n order: \"desc\",\n });\n\n // Newest first: March, February, January\n expect(sorted.map((p) => p.id)).toEqual([\"2\", \"3\", \"1\"]);\n });\n\n test(\"asc order produces oldest first for createdAt\", () => {\n const projects = [\n createMockProject({ id: \"1\", createdAt: \"2024-03-01T00:00:00.000Z\" }),\n createMockProject({ id: \"2\", createdAt: \"2024-01-01T00:00:00.000Z\" }),\n createMockProject({ id: \"3\", createdAt: \"2024-02-01T00:00:00.000Z\" }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"createdAt\",\n order: \"asc\",\n });\n\n // Oldest first: January, February, March\n expect(sorted.map((p) => p.id)).toEqual([\"2\", \"3\", \"1\"]);\n });\n\n test(\"desc order produces newest first for updatedAt\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n updatedAt: \"2024-01-15T00:00:00.000Z\",\n } as unknown as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"2\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n latestBuildVirtual: {\n updatedAt: \"2024-03-01T00:00:00.000Z\",\n } as unknown as LatestBuildVirtual,\n }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"updatedAt\",\n order: \"desc\",\n });\n\n // Newest first: March update, January update\n expect(sorted.map((p) => p.id)).toEqual([\"2\", \"1\"]);\n });\n\n test(\"desc order produces newest first for publishedAt\", () => {\n const projects = [\n createMockProject({\n id: \"1\",\n isPublished: true,\n latestBuildVirtual: {\n publishStatus: \"PUBLISHED\",\n createdAt: \"2024-01-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n createMockProject({\n id: \"2\",\n isPublished: true,\n latestBuildVirtual: {\n publishStatus: \"PUBLISHED\",\n createdAt: \"2024-03-01T00:00:00.000Z\",\n } as LatestBuildVirtual,\n }),\n ];\n\n const sorted = sortProjects(projects, {\n sortBy: \"publishedAt\",\n order: \"desc\",\n });\n\n // Newest first: March publish, January publish\n expect(sorted.map((p) => p.id)).toEqual([\"2\", \"1\"]);\n });\n });\n });\n});\n" }, { "path": "apps/builder/app/dashboard/projects/sort.tsx", "content": "import {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuLabel,\n Button,\n MenuCheckedIcon,\n} from \"@webstudio-is/design-system\";\nimport {\n ChevronDownIcon,\n CalendarIcon,\n UploadIcon,\n ArrowDownAZIcon,\n ArrowDownZAIcon,\n} from \"@webstudio-is/icons\";\nimport type { DashboardProject } from \"@webstudio-is/dashboard\";\n\nexport type SortField = \"createdAt\" | \"title\" | \"updatedAt\" | \"publishedAt\";\nexport type SortOrder = \"asc\" | \"desc\";\n\nexport type SortState = {\n sortBy?: SortField;\n order?: SortOrder;\n};\n\nexport const sortProjects = (\n projects: Array,\n sortState: SortState = {}\n) => {\n const sortBy = sortState.sortBy ?? \"updatedAt\";\n const order = sortState.order ?? \"desc\";\n\n const sorted = [...projects];\n\n sorted.sort((a, b) => {\n let comparison = 0;\n\n if (sortBy === \"title\") {\n const aTitle = a.title ?? \"\";\n const bTitle = b.title ?? \"\";\n comparison = aTitle.localeCompare(bTitle);\n } else if (sortBy === \"createdAt\") {\n const aCreated = a.createdAt ?? \"\";\n const bCreated = b.createdAt ?? \"\";\n comparison = new Date(aCreated).getTime() - new Date(bCreated).getTime();\n } else if (sortBy === \"updatedAt\") {\n // Uses Build's updatedAt field from latestBuildVirtual view, falls back to project createdAt\n const aUpdated = a.latestBuildVirtual?.updatedAt || a.createdAt || \"\";\n const bUpdated = b.latestBuildVirtual?.updatedAt || b.createdAt || \"\";\n comparison = new Date(aUpdated).getTime() - new Date(bUpdated).getTime();\n } else if (sortBy === \"publishedAt\") {\n // Sort by published date, putting unpublished projects at the end\n const aPublished = a.isPublished\n ? a.latestBuildVirtual?.createdAt\n : undefined;\n const bPublished = b.isPublished\n ? b.latestBuildVirtual?.createdAt\n : undefined;\n\n // If both are published, compare dates normally (will be reversed by order)\n if (aPublished && bPublished) {\n comparison =\n new Date(aPublished).getTime() - new Date(bPublished).getTime();\n } else if (aPublished && !bPublished) {\n // Published should always come before unpublished, regardless of order\n // In asc: -1 means a before b (correct)\n // In desc: we return -(-1) = 1, meaning a after b (wrong!)\n // So we need to account for the order reversal\n comparison = order === \"asc\" ? -1 : 1;\n } else if (!aPublished && bPublished) {\n // Unpublished should always come after published, regardless of order\n comparison = order === \"asc\" ? 1 : -1;\n } else {\n comparison = 0; // both unpublished, maintain order\n }\n }\n\n return order === \"asc\" ? comparison : -comparison;\n });\n\n return sorted;\n};\n\ntype SortSelectProps = {\n value: SortState;\n onValueChange: (value: Required) => void;\n};\n\nexport const SortSelect = ({ value, onValueChange }: SortSelectProps) => {\n const sortBy = value.sortBy ?? \"updatedAt\";\n const order = value.order ?? \"desc\";\n\n const sortLabel =\n sortBy === \"createdAt\"\n ? \"Date created\"\n : sortBy === \"title\"\n ? \"Alphabetical\"\n : sortBy === \"publishedAt\"\n ? \"Date published\"\n : \"Last modified\";\n\n const sortIcon =\n sortBy === \"createdAt\" ? (\n \n ) : sortBy === \"title\" ? (\n order === \"asc\" ? (\n \n ) : (\n \n )\n ) : sortBy === \"publishedAt\" ? (\n \n ) : (\n \n );\n\n const handleSortChange = (newSortBy: SortField, newOrder: SortOrder) => {\n // When switching to alphabetical sorting, default to A→Z (asc)\n // When switching to date sorting, default to newest first (desc)\n if (newSortBy !== sortBy) {\n onValueChange({\n sortBy: newSortBy,\n order: newSortBy === \"title\" ? \"asc\" : \"desc\",\n });\n } else {\n onValueChange({ sortBy: newSortBy, order: newOrder });\n }\n };\n\n return (\n \n \n \n \n \n Sort\n handleSortChange(value as SortField, order)}\n >\n }>\n Alphabetical\n \n }>\n Date created\n \n }>\n Last modified\n \n }>\n Date published\n \n \n \n Order\n \n handleSortChange(sortBy, value as SortOrder)\n }\n >\n {sortBy === \"title\" ? (\n <>\n }>\n A→Z\n \n }>\n Z→A\n \n \n ) : (\n <>\n }>\n Newest first\n \n }>\n Oldest first\n \n \n )}\n \n \n \n );\n};\n" }, { "path": "apps/builder/app/dashboard/projects/tags.tsx", "content": "import { useRevalidator, useSearchParams } from \"react-router-dom\";\nimport { useState, type ComponentProps } from \"react\";\nimport {\n Text,\n theme,\n Dialog,\n DialogContent,\n DialogTitle,\n Button,\n DialogActions,\n DialogClose,\n Checkbox,\n CheckboxAndLabel,\n Label,\n InputField,\n DialogTitleActions,\n Grid,\n List,\n ListItem,\n Flex,\n DropdownMenu,\n DropdownMenuTrigger,\n SmallIconButton,\n DropdownMenuContent,\n DropdownMenuItem,\n} from \"@webstudio-is/design-system\";\nimport { nativeClient } from \"~/shared/trpc/trpc-client\";\nimport type { User } from \"~/shared/db/user.server\";\nimport { nanoid } from \"nanoid\";\nimport { EllipsesIcon, SpinnerIcon } from \"@webstudio-is/icons\";\nimport { colors } from \"./colors\";\n\ntype DeleteConfirmationDialogProps = {\n onClose: () => void;\n onConfirm: () => void;\n question: string;\n};\n\nconst DeleteConfirmationDialog = ({\n onClose,\n onConfirm,\n question,\n}: DeleteConfirmationDialogProps) => {\n return (\n {\n if (isOpen === false) {\n onClose();\n }\n }}\n >\n \n \n {question}\n \n \n {\n onConfirm();\n }}\n >\n Delete\n \n \n \n \n \n \n \n Delete confirmation\n \n \n );\n};\n\nconst TagsList = ({\n projectId,\n projectsTags,\n projectTagsIds,\n onEdit,\n}: {\n projectId: string;\n projectsTags: User[\"projectsTags\"];\n projectTagsIds: string[];\n onEdit: (tagId: string) => void;\n}) => {\n const revalidator = useRevalidator();\n const [deleteConfirmationTagId, setDeleteConfirmationTagId] =\n useState();\n\n return (\n {\n event.preventDefault();\n const formData = new FormData(event.currentTarget);\n const tagsIds = formData.getAll(\"tagId\") as string[];\n await nativeClient.project.updateTags.mutate({\n projectId,\n tags: tagsIds,\n });\n revalidator.revalidate();\n }}\n >\n \n \n {projectsTags\n .sort((a, b) => a.label.localeCompare(b.label))\n .map((tag, index) => (\n {}} index={index} key={tag.id}>\n \n \n \n \n \n \n \n {/* a11y is completely broken here\n focus is not restored to button invoker\n @todo fix it eventually and consider restoring from closed value preview dialog\n */}\n }\n />\n \n event.preventDefault()}\n align=\"end\"\n >\n {\n onEdit(tag.id);\n }}\n >\n Edit\n \n {\n setDeleteConfirmationTagId(tag.id);\n }}\n >\n Delete\n \n \n \n \n \n ))}\n {projectsTags.length === 0 && (\n No tags found\n )}\n {deleteConfirmationTagId && (\n setDeleteConfirmationTagId(undefined)}\n onConfirm={async () => {\n setDeleteConfirmationTagId(undefined);\n const updatedTags = projectsTags.filter(\n (tag) => tag.id !== deleteConfirmationTagId\n );\n await nativeClient.user.updateProjectsTags.mutate({\n tags: updatedTags,\n });\n revalidator.revalidate();\n }}\n />\n )}\n \n \n \n );\n};\n\nconst TagEdit = ({\n projectsTags,\n tag,\n onComplete,\n}: {\n projectsTags: User[\"projectsTags\"];\n tag: User[\"projectsTags\"][number];\n onComplete: () => void;\n}) => {\n const revalidator = useRevalidator();\n const isExisting = projectsTags.some(({ id }) => id === tag.id);\n\n return (\n {\n event.preventDefault();\n const formData = new FormData(event.currentTarget);\n const label = ((formData.get(\"tag\") as string) || \"\").trim();\n if (tag.label === label || !label) {\n return;\n }\n let updatedTags = [];\n if (isExisting) {\n updatedTags = projectsTags.map((availableTag) => {\n if (availableTag.id === tag.id) {\n return { ...availableTag, label };\n }\n return availableTag;\n });\n } else {\n updatedTags = [...projectsTags, { id: tag.id, label }];\n }\n\n await nativeClient.user.updateProjectsTags.mutate({\n tags: updatedTags,\n });\n revalidator.revalidate();\n onComplete();\n }}\n >\n \n \n \n \n \n {\n onComplete();\n }}\n >\n Cancel\n \n \n \n );\n};\n\nexport const TagsDialog = ({\n projectId,\n projectsTags,\n projectTagsIds,\n isOpen,\n onOpenChange,\n}: {\n projectId: string;\n projectsTags: User[\"projectsTags\"];\n projectTagsIds: string[];\n isOpen: boolean;\n onOpenChange: (isOpen: boolean) => void;\n}) => {\n const [editingTag, setEditingTag] = useState<\n User[\"projectsTags\"][number] | undefined\n >();\n const revalidator = useRevalidator();\n return (\n \n \n \n {revalidator.state === \"loading\" && }\n \n \n }\n >\n Project tags\n \n {!editingTag && (\n <>\n {\n setEditingTag(projectsTags.find((tag) => tag.id === tagId));\n }}\n />\n \n setEditingTag({ id: nanoid(5), label: \"\" })}\n >\n Create tag\n \n \n \n )}\n {editingTag && (\n setEditingTag(undefined)}\n />\n )}\n \n \n );\n};\n\nexport const Tag = ({\n index,\n tag,\n ...props\n}: { index: number; tag: User[\"projectsTags\"][number] } & ComponentProps<\n typeof Button\n>) => {\n const [searchParams, setSearchParams] = useSearchParams();\n const selectedTagsIds = searchParams.getAll(\"tag\");\n const color = colors[index] ?? theme.colors.backgroundNeutralDark;\n return (\n {\n const newSearchParams = new URLSearchParams(searchParams);\n newSearchParams.delete(\"tag\");\n if (!selectedTagsIds.includes(tag.id)) {\n newSearchParams.append(\"tag\", tag.id);\n }\n for (const item of selectedTagsIds) {\n if (item !== tag.id) {\n newSearchParams.append(\"tag\", item);\n }\n }\n setSearchParams(newSearchParams);\n }}\n {...props}\n />\n );\n};\n" }, { "path": "apps/builder/app/dashboard/projects/utils.ts", "content": "export const formatDate = (date: string) => {\n return new Date(date).toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n};\n" }, { "path": "apps/builder/app/dashboard/search/nothing-found.tsx", "content": "import { Flex, Text } from \"@webstudio-is/design-system\";\n\nexport const NothingFound = () => (\n \n \n Nothing found 🙁\n \n \n);\n" }, { "path": "apps/builder/app/dashboard/search/search-field.tsx", "content": "import { SearchField } from \"@webstudio-is/design-system\";\nimport { useLocation, useNavigate, useSearchParams } from \"react-router-dom\";\nimport { dashboardPath } from \"~/shared/router-utils\";\n\nexport const Search = () => {\n const navigate = useNavigate();\n const [searchParams, setSearchParams] = useSearchParams();\n const location = useLocation();\n const handleAbortSearch = () => {\n // When user cancels the search, we try to return to the last path they were on.\n if (location.state?.previousPathname) {\n return navigate(location.state.previousPathname);\n }\n navigate(dashboardPath(\"projects\"));\n };\n const isSearchRoute = location.pathname === dashboardPath(\"search\");\n\n return (\n {\n const value = event.currentTarget.value.trim();\n if (value === \"\") {\n handleAbortSearch();\n return;\n }\n if (isSearchRoute === false) {\n navigate(\n {\n pathname: dashboardPath(\"search\"),\n search: `?q=${value}`,\n },\n // Remember the last path to return to on abort\n {\n state: { previousPathname: location.pathname },\n }\n );\n return;\n }\n setSearchParams({ q: value }, { replace: true });\n }}\n onAbort={handleAbortSearch}\n autoFocus\n placeholder=\"Search for anything\"\n />\n );\n};\n" }, { "path": "apps/builder/app/dashboard/search/search-results.tsx", "content": "import { useMemo } from \"react\";\nimport { matchSorter } from \"match-sorter\";\nimport { useSearchParams } from \"react-router-dom\";\nimport { Flex, Separator, Text, theme } from \"@webstudio-is/design-system\";\nimport type { DashboardProject } from \"@webstudio-is/dashboard\";\nimport { ProjectsGrid } from \"../projects/projects\";\nimport { Header, Main } from \"../shared/layout\";\nimport type { DashboardData } from \"../shared/types\";\nimport { NothingFound } from \"./nothing-found\";\nimport { TemplatesGrid } from \"../templates/templates\";\n\ntype SearchResults = {\n projects: Array;\n templates: Array;\n};\n\nconst initialSearchResults: SearchResults = {\n templates: [],\n projects: [],\n} as const;\n\nexport const SearchResults = (props: DashboardData) => {\n const [searchParams] = useSearchParams();\n const { projects, templates, publisherHost, userPlanFeatures } = props;\n const search = searchParams.get(\"q\");\n\n const results = useMemo(() => {\n if (!search || !projects || !templates) {\n return initialSearchResults;\n }\n const keys = [\"title\", \"domain\"];\n return {\n projects: matchSorter(projects, search, { keys }),\n templates: matchSorter(templates, search, { keys }),\n };\n }, [projects, templates, search]);\n\n const nothingFound =\n results.projects.length === 0 && results.templates.length === 0;\n\n return (\n
    \n
    \n \n Search results for \"{search}\"\n \n
    \n \n {nothingFound && }\n {results.projects.length > 0 && (\n <>\n \n Projects\n \n \n \n )}\n {results.templates.length > 0 && (\n <>\n \n \n Templates\n \n \n \n )}\n \n
    \n );\n};\n" }, { "path": "apps/builder/app/dashboard/shared/card.tsx", "content": "import {\n Flex,\n theme,\n Box,\n Grid,\n styled,\n css,\n Slot,\n type SlotProps,\n} from \"@webstudio-is/design-system\";\nimport { forwardRef, type ComponentProps } from \"react\";\n\nconst borderColorVar = \"--ws-dashboard-card-border-color\";\n\nconst cardStyle = css({\n position: \"relative\",\n isolation: \"isolate\",\n display: \"flex\",\n padding: 0,\n height: \"100%\",\n flexDirection: \"column\",\n alignItems: \"center\",\n flexShrink: 0,\n outline: \"none\",\n \"&:focus-within, &[aria-selected=true]\": {\n [borderColorVar]: theme.colors.borderFocus,\n },\n});\n\ntype CardProps = ComponentProps<\"div\"> & {\n asChild?: boolean;\n} & SlotProps;\n\nexport const Card = forwardRef(\n ({ asChild, ...props }, ref) => {\n const Component = asChild ? Slot : Box;\n return ;\n }\n);\nCard.displayName = \"Card\";\n\nexport const CardContent = styled(Grid, {\n position: \"relative\",\n overflow: \"hidden\",\n width: \"100%\",\n aspectRatio: \"1.91/1\",\n borderRadius: theme.borderRadius[5],\n \"&::after\": {\n content: '\"\"',\n position: \"absolute\",\n inset: 0,\n border: `1px solid var(${borderColorVar}, transparent)`,\n borderRadius: theme.borderRadius[5],\n pointerEvents: \"none\",\n },\n});\n\nexport const CardFooter = styled(Flex, {\n justifyContent: \"space-between\",\n flexShrink: 0,\n alignSelf: \"stretch\",\n flexGap: theme.spacing[3],\n background: theme.colors.brandBackgroundProjectCardTextArea,\n height: theme.spacing[17],\n paddingBlock: theme.panel.paddingBlock,\n});\n" }, { "path": "apps/builder/app/dashboard/shared/layout.tsx", "content": "import type { ComponentProps } from \"react\";\nimport { Flex, theme } from \"@webstudio-is/design-system\";\n\nexport const Header = ({\n variant,\n ...props\n}: { variant: \"aside\" | \"main\" } & ComponentProps) => {\n return (\n \n );\n};\n\nexport const Main = (props: ComponentProps) => {\n return (\n \n );\n};\n" }, { "path": "apps/builder/app/dashboard/shared/spinner.tsx", "content": "import { css } from \"@webstudio-is/design-system\";\nimport { useDebounce } from \"use-debounce\";\nimport { SpinnerIcon } from \"@webstudio-is/icons\";\nimport { useEffect } from \"react\";\n\nconst containerStyle = css({\n position: \"absolute\",\n inset: 0,\n background:\n \"radial-gradient(34.37% 50% at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(248, 248, 248, 0.5) 100%);\",\n backdropFilter: \"blur(8px)\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n});\n\nexport const Spinner = ({\n delay = 600,\n size = 64,\n}: {\n delay?: number;\n size?: number;\n}) => {\n const [isVisible, setIsVisible] = useDebounce(false, delay);\n\n useEffect(() => {\n setIsVisible(true);\n }, [setIsVisible]);\n\n if (isVisible === false) {\n return;\n }\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "apps/builder/app/dashboard/shared/thumbnail.tsx", "content": "import { forwardRef } from \"react\";\nimport { Image, wsImageLoader } from \"@webstudio-is/image\";\nimport { css, theme, textVariants } from \"@webstudio-is/design-system\";\n\nconst abbrStyle = css(textVariants.brandThumbnailLargeDefault, {\n display: \"flex\",\n alignItems: \"center\",\n alignSelf: \"center\",\n minHeight: 0,\n background: theme.colors.brandBackgroundProjectCardFront,\n WebkitBackgroundClip: \"text\",\n backgroundClip: \"text\",\n color: \"transparent\",\n outline: \"none\",\n transition: \"100ms\",\n \"&:hover, &:focus\": textVariants.brandThumbnailLargeHover,\n});\n\n// My Next Project > MN\nconst getThumbnailAbbreviation = (title: string) =>\n title\n .split(/\\s+/)\n .slice(0, 2)\n .map((word) => word.charAt(0).toUpperCase())\n .join(\"\");\n\nexport const ThumbnailLinkWithAbbr = forwardRef<\n HTMLAnchorElement,\n { title: string; to: string }\n>(({ title, to }, ref) => {\n return (\n \n {getThumbnailAbbreviation(title)}\n \n );\n});\nThumbnailLinkWithAbbr.displayName = \"ThumbnailLinkWithAbbr\";\n\nexport const ThumbnailWithAbbr = forwardRef<\n HTMLDivElement,\n { title: string; onClick: React.MouseEventHandler }\n>(({ title, onClick }, ref) => {\n return (\n
    \n {getThumbnailAbbreviation(title)}\n
    \n );\n});\n\nThumbnailWithAbbr.displayName = \"ThumbnailWithAbbr\";\n\nconst imageContainerStyle = css({\n position: \"relative\",\n background: theme.colors.brandBackgroundProjectCardFront,\n outline: \"none\",\n overflow: \"hidden\",\n transition: \"scale 100ms\",\n \"&:hover, &:focus\": {\n scale: \"1.1\",\n },\n});\n\nconst imageStyle = css({\n position: \"absolute\",\n top: 0,\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n});\n\nexport const ThumbnailLinkWithImage = forwardRef<\n HTMLAnchorElement,\n { name: string; to: string }\n>(({ name, to }, ref) => {\n return (\n \n \n \n );\n});\nThumbnailLinkWithImage.displayName = \"ThumbnailLinkWithImage\";\n\nexport const ThumbnailWithImage = forwardRef<\n HTMLDivElement,\n {\n name: string;\n onClick: React.MouseEventHandler;\n }\n>(({ name, onClick }, ref) => {\n return (\n \n \n \n );\n});\n\nThumbnailWithImage.displayName = \"ThumbnailWithImage\";\n" }, { "path": "apps/builder/app/dashboard/shared/types.ts", "content": "import type { DashboardProject } from \"@webstudio-is/dashboard\";\nimport type { User } from \"~/shared/db/user.server\";\nimport type { UserPlanFeatures } from \"~/shared/db/user-plan-features.server\";\n\nexport type DashboardData = {\n user: User;\n projects: Array;\n templates: Array;\n userPlanFeatures: UserPlanFeatures;\n publisherHost: string;\n projectToClone?: {\n authToken: string;\n id: string;\n title: string;\n };\n};\n" }, { "path": "apps/builder/app/dashboard/templates/template-card.tsx", "content": "import { useState } from \"react\";\nimport { Flex, Text, theme } from \"@webstudio-is/design-system\";\nimport type { DashboardProject } from \"@webstudio-is/dashboard\";\nimport { builderUrl } from \"~/shared/router-utils\";\nimport { Card, CardContent, CardFooter } from \"../shared/card\";\nimport { ThumbnailWithAbbr, ThumbnailWithImage } from \"../shared/thumbnail\";\nimport { CloneProjectDialog } from \"~/shared/clone-project\";\n\ntype TemplateCardProps = {\n project: DashboardProject;\n};\n\nexport const TemplateCard = ({ project, ...props }: TemplateCardProps) => {\n const [isDuplicateDialogOpen, setIsDuplicateDialogOpen] = useState(false);\n const { title, previewImageAsset } = project;\n return (\n \n \n {previewImageAsset ? (\n {\n setIsDuplicateDialogOpen(true);\n }}\n />\n ) : (\n {\n setIsDuplicateDialogOpen(true);\n }}\n />\n )}\n \n \n \n \n {title}\n \n \n \n {\n window.location.href = builderUrl({\n origin: window.origin,\n projectId: projectId,\n });\n }}\n />\n \n );\n};\n" }, { "path": "apps/builder/app/dashboard/templates/templates.tsx", "content": "import {\n Flex,\n Grid,\n List,\n ListItem,\n Text,\n rawTheme,\n theme,\n} from \"@webstudio-is/design-system\";\nimport type { DashboardProject } from \"@webstudio-is/dashboard\";\nimport { Header, Main } from \"../shared/layout\";\nimport { CreateProject } from \"../projects/project-dialogs\";\nimport { TemplateCard } from \"./template-card\";\n\nexport const TemplatesGrid = ({\n projects,\n}: {\n projects: Array;\n}) => {\n return (\n \n \n {projects.map((project) => {\n return (\n \n \n \n );\n })}\n \n \n );\n};\n\ntype ProjectsProps = {\n projects: Array;\n welcome?: boolean;\n};\n\nexport const Templates = ({ projects, welcome = false }: ProjectsProps) => {\n return (\n
    \n
    \n \n {welcome ? \"What will you create?\" : \"Starter templates\"}\n \n \n \n \n
    \n \n \n \n
    \n );\n};\n" }, { "path": "apps/builder/app/env/env.server.ts", "content": "// @todo zod parse env, make explicit types i.e\nconst env = {\n // Authentication\n DEV_LOGIN: process.env.DEV_LOGIN,\n GH_CLIENT_ID: process.env.GH_CLIENT_ID,\n GH_CLIENT_SECRET: process.env.GH_CLIENT_SECRET,\n GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,\n GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,\n\n // Secret session key, context encode\n AUTH_SECRET: process.env.AUTH_SECRET,\n\n // DEPLOYMENT_ENVIRONMENT development | preview | production\n DEPLOYMENT_ENVIRONMENT: process.env.DEPLOYMENT_ENVIRONMENT,\n DEPLOYMENT_URL: process.env.DEPLOYMENT_URL,\n\n // Trpc on SaaS\n TRPC_SERVER_URL: process.env.TRPC_SERVER_URL,\n TRPC_SERVER_API_TOKEN: process.env.TRPC_SERVER_API_TOKEN,\n\n PORT: process.env.PORT,\n\n // Assets\n MAX_UPLOAD_SIZE: process.env.MAX_UPLOAD_SIZE,\n MAX_ASSETS_PER_PROJECT: process.env.MAX_ASSETS_PER_PROJECT,\n\n // Remote assets\n S3_ENDPOINT: process.env.S3_ENDPOINT,\n S3_REGION: process.env.S3_REGION,\n S3_ACCESS_KEY_ID: process.env.S3_ACCESS_KEY_ID,\n S3_SECRET_ACCESS_KEY: process.env.S3_SECRET_ACCESS_KEY,\n S3_BUCKET: process.env.S3_BUCKET,\n S3_ACL: process.env.S3_ACL,\n /**\n * Origin of service implementing /cdn-cgi/image/ cloudflare endpoint\n * without ending slash\n */\n RESIZE_ORIGIN: process.env.RESIZE_ORIGIN,\n\n /**\n * Entri API credentials\n */\n ENTRI_APPLICATION_ID: process.env.ENTRI_APPLICATION_ID ?? \"webstudio\",\n ENTRI_SECRET: process.env.ENTRI_SECRET,\n\n /**\n * Projects as templates in dashboard\n */\n PROJECT_TEMPLATES:\n process.env.PROJECT_TEMPLATES?.split(\",\").map((projectId) =>\n projectId.trim()\n ) ?? [],\n\n N8N_WEBHOOK_URL: process.env.N8N_WEBHOOK_URL,\n N8N_WEBHOOK_TOKEN: process.env.N8N_WEBHOOK_TOKEN,\n\n PUBLISHER_HOST: process.env.PUBLISHER_HOST || \"wstd.work\",\n\n STAGING_USERNAME: process.env.STAGING_USERNAME ?? \"admin\",\n STAGING_PASSWORD: process.env.STAGING_PASSWORD ?? \"webstudio\",\n\n FEATURES: process.env.FEATURES ?? \"\",\n\n // current user plan features (default)\n USER_PLAN: process.env.USER_PLAN ?? \"\",\n\n POSTGREST_URL: process.env.POSTGREST_URL ?? \"http://localhost:3000\",\n POSTGREST_API_KEY: process.env.POSTGREST_API_KEY ?? \"\",\n\n SECURE_COOKIE: true,\n\n // Used for project oauth login flow @todo remove ??\n AUTH_WS_CLIENT_ID: process.env.AUTH_WS_CLIENT_ID ?? \"12345\",\n AUTH_WS_CLIENT_SECRET: process.env.AUTH_WS_CLIENT_SECRET ?? \"12345678\",\n};\n\nexport type ServerEnv = typeof env;\n\n// https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables\nif (process.env.VERCEL !== undefined) {\n if (env.DEPLOYMENT_ENVIRONMENT === undefined) {\n env.DEPLOYMENT_ENVIRONMENT = process.env.VERCEL_ENV;\n }\n if (env.DEPLOYMENT_URL === undefined) {\n env.DEPLOYMENT_URL = process.env.VERCEL_URL;\n }\n}\n\nexport default env;\n" }, { "path": "apps/builder/app/env/env.static.server.ts", "content": "/**\n * Build-time Environment Variables\n *\n * These variables are injected into your bundle at build time based on the environment settings.\n * - Configuration: See envPrefix in [vite.config.ts](../../vite.config.ts) (GITHUB_)\n * - Documentation: Refer to the [Vite documentation](https://vitejs.dev/guide/env-and-mode)\n * - Type Definitions: See [vite-env.d.ts](./vite-env.d.ts) in this directory\n */\nexport const staticEnv = {\n GITHUB_REF_NAME: import.meta.env.GITHUB_REF_NAME,\n GITHUB_SHA: import.meta.env.GITHUB_SHA,\n};\n" }, { "path": "apps/builder/app/env/env.static.ts", "content": "/**\n * Public Build-time Environment Variables\n *\n * These variables are injected into your bundle at build time based on the environment settings.\n * - Configuration: See envPrefix in [vite.config.ts](../../vite.config.ts) (GITHUB_)\n * - Documentation: Refer to the [Vite documentation](https://vitejs.dev/guide/env-and-mode)\n * - Type Definitions: See [vite-env.d.ts](./vite-env.d.ts) in this directory\n */\n\nexport const publicStaticEnv = {\n VERSION: import.meta.env.GITHUB_SHA ?? \"local\",\n};\n" }, { "path": "apps/builder/app/env/vite-env.d.ts", "content": "interface ImportMetaEnv {\n readonly GITHUB_REF_NAME: string | undefined;\n readonly GITHUB_SHA: string | undefined;\n}\n" }, { "path": "apps/builder/app/root.tsx", "content": "// Our root outlet doesn't contain a layout because we have 2 types of documents: canvas and builder and we need to decide down the line which one to render, thre is no single root document.\nimport {\n Outlet,\n json,\n useLoaderData,\n type ShouldRevalidateFunction,\n} from \"@remix-run/react\";\nimport { setEnv } from \"@webstudio-is/feature-flags\";\nimport env from \"./env/env.server\";\nimport { useSetFeatures } from \"./shared/use-set-features\";\n\nexport const loader = () => {\n return json({\n features: env.FEATURES,\n });\n};\n\nexport default function App() {\n const { features } = useLoaderData();\n setEnv(features);\n useSetFeatures();\n\n return ;\n}\n\nexport const shouldRevalidate: ShouldRevalidateFunction = () => {\n return false;\n};\n" }, { "path": "apps/builder/app/routes/_canvas.canvas.tsx", "content": "import { lazy } from \"react\";\nimport type { LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport { Scripts, ScrollRestoration } from \"@remix-run/react\";\nimport { isCanvas } from \"~/shared/router-utils\";\nimport { ClientOnly } from \"~/shared/client-only\";\n\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n if (isCanvas(request) === false) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n return {};\n};\n\nconst Canvas = lazy(async () => {\n const { Canvas } = await import(\"~/canvas/index.client\");\n return { default: Canvas };\n});\n\nconst CanvasRoute = () => {\n return (\n // this setup remix scripts on canvas and after rendering a website\n // scripts will continue to work even though removed from dom\n \n \n \n \n }\n >\n \n \n );\n};\n\nexport default CanvasRoute;\n" }, { "path": "apps/builder/app/routes/_canvas.tsx", "content": "import { Links, Meta, Outlet } from \"@remix-run/react\";\nimport { ErrorBoundary as ErrorBoundaryComponent } from \"~/shared/error/error-boundary\";\n\nconst Document = (props: { children: React.ReactNode }) => {\n return (\n \n \n \n \n \n \n \n {props.children}\n \n );\n};\n\nexport const ErrorBoundary = () => {\n return (\n \n \n \n );\n};\n\nexport default function CanvasLayout() {\n return (\n \n \n \n );\n}\n" }, { "path": "apps/builder/app/routes/_ui.$.tsx", "content": "import {\n type HeadersFunction,\n type LoaderFunctionArgs,\n} from \"@remix-run/server-runtime\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n preventCrossOriginCookie(request);\n\n // No data to protect with CSRF token\n\n const url = new URL(request.url);\n\n // Redirecting asset files (e.g., .js, .css) to the dashboard should be avoided.\n // This is because immutable caching rules apply to redirects, causing these files\n // to become permanently inaccessible. Ensure asset files are served correctly\n // without redirects to maintain availability and proper caching behavior.\n const publicPaths = [\"/cgi/\", \"/assets/\", \"/apple-touch-icon-\"];\n\n // In case of 404 on static assets, this route will be executed\n if (publicPaths.some((publicPath) => url.pathname.startsWith(publicPath))) {\n throw new Response(\"Not found\", {\n status: 404,\n headers: {\n \"Cache-Control\": \"public, max-age=0, must-revalidate\",\n },\n });\n }\n\n const contentType = request.headers.get(\"Content-Type\");\n\n if (contentType?.includes(\"application/json\")) {\n // Return an error to not trigger the ErrorBoundary rendering (api request)\n throw new Response(\"Not found\", {\n status: 404,\n });\n }\n\n // Throw an error to trigger the ErrorBoundary rendering\n throw new Response(\"Not found\", {\n status: 404,\n });\n};\n\nexport default function NotFound() {\n // Placeholder component to prevent Remix warning:\n // \"Matched leaf route at location '/{SOME_LOCATION}' does not have an element or Component.\"\n // Without this, an with a null value would render an empty page.\n return (\n
    \n

    Not Found

    \n

    The page you requested could not be found.

    \n
    \n );\n}\n\nexport const headers: HeadersFunction = ({ errorHeaders, loaderHeaders }) => {\n // !!!! VERY IMPORTANT !!!\n // Vercel sets Cache-Control: public, max-age=31536000, immutable for all /assets/* paths,\n // even when a 404 error occurs during deployment.\n // This causes 404 errors on assets to be cached permanently, preventing updates.\n // To prevent this, we set \"Cache-Control\": \"public, max-age=0, must-revalidate\" when an asset is not found.\n const cacheControl = errorHeaders?.get(\"Cache-Control\");\n\n if (cacheControl) {\n return {\n \"Cache-Control\": cacheControl,\n };\n }\n return loaderHeaders;\n};\n" }, { "path": "apps/builder/app/routes/_ui.(builder).tsx", "content": "/**\n * The file is named _ui.(builder) instead of _ui._index due to an issue with Vercel.\n * The _ui._index route isn’t recognized on Vercel, even though it works perfectly in other environments.\n */\n\nimport { lazy } from \"react\";\nimport { useLoaderData } from \"@remix-run/react\";\nimport type { MetaFunction, ShouldRevalidateFunction } from \"@remix-run/react\";\nimport {\n json,\n type HeadersArgs,\n type LoaderFunctionArgs,\n} from \"@remix-run/server-runtime\";\nimport * as projectApi from \"@webstudio-is/project/index.server\";\nimport { db as authDb } from \"@webstudio-is/authorization-token/index.server\";\n\nimport {\n AuthorizationError,\n authorizeProject,\n} from \"@webstudio-is/trpc-interface/index.server\";\nimport { createContext } from \"~/shared/context.server\";\nimport { dashboardPath, isBuilder, isDashboard } from \"~/shared/router-utils\";\n\nimport env from \"~/env/env.server\";\n\nimport builderStyles from \"~/builder/builder.css?url\";\nimport { ClientOnly } from \"~/shared/client-only\";\nimport { parseBuilderUrl } from \"@webstudio-is/http-client\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { redirect } from \"~/services/no-store-redirect\";\nimport { builderSessionStorage } from \"~/services/builder-session.server\";\nimport {\n allowedDestinations,\n isFetchDestination,\n} from \"~/services/destinations.server\";\nimport { loader as authWsLoader } from \"./auth.ws\";\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\n\nexport const links = () => {\n return [{ rel: \"stylesheet\", href: builderStyles }];\n};\n\nexport const meta: MetaFunction = ({ data }) => {\n const metas: ReturnType = [];\n\n if (data === undefined) {\n return metas;\n }\n\n // Project title will be set dynamically after data loads\n return metas;\n};\n\nexport const loader = async (loaderArgs: LoaderFunctionArgs) => {\n const { request } = loaderArgs;\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\", \"empty\"]);\n\n if (isDashboard(request)) {\n throw redirect(dashboardPath());\n }\n\n if (false === isBuilder(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n if (isFetchDestination(request)) {\n // Remix does not provide a built-in way to add CSRF tokens to data fetches,\n // such as client-side navigation or data refreshes.\n // Therefore, ensure that all data fetched here is not sensitive and does not require CSRF protection.\n // await checkCsrf(request);\n }\n\n const context = await createContext(request);\n\n if (context.authorization.type === \"service\") {\n throw new AuthorizationError(\"Service calls are not allowed\");\n }\n\n if (context.authorization.type === \"anonymous\") {\n throw await authWsLoader(loaderArgs); // redirect(\"/auth/ws\");\n }\n\n if (\n context.authorization.type === \"user\" &&\n request.headers.get(\"sec-fetch-mode\") === \"navigate\"\n ) {\n // If logout fails, or the session cookie in the dashboard is deleted or expired,\n // enforce reauthorization on builder reload or navigation (sec-fetch-mode === 'navigate') after a timeout.\n const RELOAD_ON_NAVIGATE_TIMEOUT =\n env.DEPLOYMENT_ENVIRONMENT === \"production\"\n ? 1000 * 60 * 60 * 24 * 7 // 1 week\n : 1000 * 60 * 60 * 1; // 1 hour\n\n if (\n Date.now() - context.authorization.sessionCreatedAt >\n RELOAD_ON_NAVIGATE_TIMEOUT\n ) {\n throw await authWsLoader(loaderArgs); // start immediately instead of redirect(\"/auth/ws\");\n }\n }\n\n try {\n const url = new URL(request.url);\n\n const { projectId } = parseBuilderUrl(request.url);\n\n if (projectId === undefined) {\n throw new Response(\"Project ID is not defined\", {\n status: 404,\n });\n }\n\n const start = Date.now();\n const project = await projectApi.loadById(projectId, context);\n\n if (project === null) {\n throw new Response(`Project \"${projectId}\" not found`, {\n status: 404,\n });\n }\n\n const authPermit =\n (await authorizeProject.getProjectPermit(\n {\n projectId: project.id,\n // At this point we already knew that if project loaded we have at least \"view\" permit\n // having that getProjectPermit is heavy operation we can skip check \"view\" permit\n permits: [\"own\", \"admin\", \"build\", \"edit\"] as const,\n },\n context\n )) ?? \"view\";\n\n const end = Date.now();\n\n const diff = end - start;\n\n // we need to log timings to figure out how to speed up loading\n\n console.info(`Project ${project.id} is loaded in ${diff}ms`);\n\n const authToken = url.searchParams.get(\"authToken\") ?? undefined;\n\n const authTokenPermissions =\n authPermit !== \"own\" && authToken !== undefined\n ? await authDb.getTokenPermissions(\n {\n projectId: project.id,\n token: authToken,\n },\n context\n )\n : authDb.tokenDefaultPermissions;\n\n const { userPlanFeatures } = context;\n if (userPlanFeatures === undefined) {\n throw new Response(\"User plan features are not defined\", {\n status: 404,\n });\n }\n\n if (project.userId === null) {\n throw new AuthorizationError(\"Project must have project userId defined\");\n }\n\n const headers = new Headers();\n\n if (context.authorization.type === \"token\") {\n // To protect against cookie overwrites, we set a null session cookie if a user is using an authToken.\n // This ensures that any existing HttpOnly, secure session cookies cannot be overwritten by client-side scripts\n\n // See Storage model https://datatracker.ietf.org/doc/html/rfc6265#section-5.3\n // If the cookie store contains a cookie with the same name,\n // domain, and path as the newly created cookie:\n // ...\n // If the newly created cookie was received from a \"non-HTTP\"\n // API and the old-cookie's http-only-flag is set, abort these\n // steps and ignore the newly created cookie entirely.\n const builderSession = await builderSessionStorage.getSession(null);\n headers.set(\n \"Set-Cookie\",\n await builderSessionStorage.commitSession(builderSession)\n );\n }\n\n headers.set(\n // Disallowing iframes from loading any content except the canvas\n // Still possible create iframes on canvas itself (but we use credentialless attribute)\n // Still possible create iframe without src attribute\n // Disable workers on builder\n \"Content-Security-Policy\",\n `frame-src ${url.origin}/canvas https://app.goentri.com/ https://help.webstudio.is/; worker-src 'none'`\n );\n\n return json(\n {\n projectId: project.id,\n authToken,\n authTokenPermissions,\n authPermit,\n userPlanFeatures,\n stagingUsername: env.STAGING_USERNAME,\n stagingPassword: env.STAGING_PASSWORD,\n } as const,\n {\n headers,\n }\n );\n } catch (error) {\n if (error instanceof AuthorizationError) {\n // try to re-login user if he has no access to the project\n throw redirect(`/auth/ws`);\n }\n\n throw error;\n }\n};\n\n/**\n * When doing changes in a project, then navigating to a dashboard then pressing the back button,\n * the builder page may display stale data because it’s being retrieved from the browser’s back/forward cache (bfcache).\n *\n * https://web.dev/articles/bfcache\n *\n */\nexport const headers = ({ loaderHeaders }: HeadersArgs) => {\n return {\n \"Cache-Control\": \"no-store\",\n \"Content-Security-Policy\": loaderHeaders.get(\"Content-Security-Policy\"),\n };\n};\n\nconst Builder = lazy(async () => {\n const { Builder } = await import(\"~/builder/index.client\");\n return { default: Builder };\n});\n\nconst BuilderRoute = () => {\n const data = useLoaderData();\n\n return (\n \n {/* Using a key here ensures that certain effects are re-executed inside the builder,\n especially in cases like cloning a project */}\n \n \n );\n};\n\n/**\n * We do not want trpc and other mutations that use the Remix useFetcher hook\n * to cause a reload of all builder data.\n */\nexport const shouldRevalidate: ShouldRevalidateFunction = ({\n currentUrl,\n nextUrl,\n defaultShouldRevalidate,\n}) => {\n const currentUrlCopy = new URL(currentUrl);\n const nextUrlCopy = new URL(nextUrl);\n // prevent revalidating data when pageId changes\n // to not regenerate auth token and preserve canvas url\n currentUrlCopy.searchParams.delete(\"pageId\");\n nextUrlCopy.searchParams.delete(\"pageId\");\n\n currentUrlCopy.searchParams.delete(\"mode\");\n nextUrlCopy.searchParams.delete(\"mode\");\n\n currentUrlCopy.searchParams.delete(\"pageHash\");\n nextUrlCopy.searchParams.delete(\"pageHash\");\n\n return currentUrlCopy.href === nextUrlCopy.href\n ? false\n : defaultShouldRevalidate;\n};\n\nexport default BuilderRoute;\n" }, { "path": "apps/builder/app/routes/_ui.dashboard._index.tsx", "content": "import { lazy } from \"react\";\nimport { ClientOnly } from \"~/shared/client-only\";\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\n\nconst Dashboard = lazy(async () => {\n const { Dashboard } = await import(\"~/dashboard/index.client\");\n return { default: Dashboard };\n});\n\nconst DashboardRoute = () => {\n return (\n \n \n \n );\n};\n\nexport default DashboardRoute;\n" }, { "path": "apps/builder/app/routes/_ui.dashboard.search.tsx", "content": "import { lazy } from \"react\";\nimport { type MetaFunction } from \"@remix-run/react\";\nimport { ClientOnly } from \"~/shared/client-only\";\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\n\nexport const meta = () => {\n const metas: ReturnType = [];\n\n metas.push({ title: \"Webstudio Dashboard | Search\" });\n\n return metas;\n};\n\nconst Dashboard = lazy(async () => {\n const { Dashboard } = await import(\"~/dashboard/index.client\");\n return { default: Dashboard };\n});\n\nconst DashboardRoute = () => {\n return (\n \n \n \n );\n};\n\nexport default DashboardRoute;\n" }, { "path": "apps/builder/app/routes/_ui.dashboard.templates.tsx", "content": "import { lazy } from \"react\";\nimport { type MetaFunction } from \"@remix-run/react\";\nimport { ClientOnly } from \"~/shared/client-only\";\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\n\nexport const meta = () => {\n const metas: ReturnType = [];\n\n metas.push({ title: \"Webstudio Dashboard | Templates\" });\n\n return metas;\n};\n\nconst Dashboard = lazy(async () => {\n const { Dashboard } = await import(\"~/dashboard/index.client\");\n return { default: Dashboard };\n});\n\nconst DashboardRoute = () => {\n return (\n \n \n \n );\n};\n\nexport default DashboardRoute;\n" }, { "path": "apps/builder/app/routes/_ui.dashboard.tsx", "content": "import { lazy } from \"react\";\nimport { preconnect, prefetchDNS } from \"react-dom\";\nimport {\n Outlet,\n redirect,\n type ShouldRevalidateFunction,\n} from \"react-router-dom\";\nimport { useLoaderData, type MetaFunction } from \"@remix-run/react\";\nimport { type LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport {\n createCallerFactory,\n AuthorizationError,\n type AppContext,\n} from \"@webstudio-is/trpc-interface/index.server\";\nimport { db as authDb } from \"@webstudio-is/authorization-token/index.server\";\nimport * as projectApi from \"@webstudio-is/project/index.server\";\nimport { parseBuilderUrl } from \"@webstudio-is/http-client\";\nimport { dashboardProjectRouter } from \"@webstudio-is/dashboard/index.server\";\nimport { builderUrl, isDashboard, loginPath } from \"~/shared/router-utils\";\nimport env from \"~/env/env.server\";\nimport { ClientOnly } from \"~/shared/client-only\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\nimport { findAuthenticatedUser } from \"~/services/auth.server\";\nimport { createContext } from \"~/shared/context.server\";\n\nexport const meta = () => {\n const metas: ReturnType = [];\n\n metas.push({ title: \"Webstudio Dashboard | Projects\" });\n\n return metas;\n};\n\n/**\n * When deleting/adding a project, then navigating to a new project and pressing the back button,\n * the dashboard page may display stale data because it’s being retrieved from the browser’s back/forward cache (bfcache).\n *\n * https://web.dev/articles/bfcache\n *\n */\nexport const headers = () => {\n return {\n \"Cache-Control\": \"no-store\",\n };\n};\n\nconst dashboardProjectCaller = createCallerFactory(dashboardProjectRouter);\n\nconst loadDashboardData = async (request: Request) => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n const user = await findAuthenticatedUser(request);\n\n const url = new URL(request.url);\n\n if (user === null) {\n throw redirect(\n loginPath({\n returnTo: `${url.pathname}${url.search}`,\n })\n );\n }\n\n const context = await createContext(request);\n\n if (context.authorization.type !== \"user\") {\n throw new AuthorizationError(\"You must be logged in to access this page\");\n }\n\n const { userPlanFeatures } = context;\n\n if (userPlanFeatures === undefined) {\n throw new Response(\"User plan features are not defined\", {\n status: 404,\n });\n }\n\n const { sourceOrigin } = parseBuilderUrl(request.url);\n\n const projects = await dashboardProjectCaller(context).findMany({\n userId: user.id,\n });\n\n const templates = await dashboardProjectCaller(context).findManyByIds({\n projectIds: env.PROJECT_TEMPLATES,\n });\n\n return {\n context,\n user,\n origin: sourceOrigin,\n userPlanFeatures,\n projects,\n templates,\n };\n};\n\nconst getProjectToClone = async (request: Request, context: AppContext) => {\n const url = new URL(request.url);\n const projectToCloneAuthToken = url.searchParams.get(\n \"projectToCloneAuthToken\"\n );\n\n if (\n // Only on navigation requests\n request.headers.get(\"sec-fetch-mode\") !== \"navigate\" ||\n projectToCloneAuthToken === null\n ) {\n return;\n }\n\n // Clone project\n const token = await authDb.getTokenInfo(projectToCloneAuthToken, context);\n if (token.canClone === false) {\n throw new AuthorizationError(\"You don't have access to clone this project\");\n }\n\n const project = await projectApi.loadById(\n token.projectId,\n await context.createTokenContext(projectToCloneAuthToken)\n );\n\n return {\n id: token.projectId,\n authToken: projectToCloneAuthToken,\n title: project.title,\n };\n};\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n // CSRF token checks are not necessary for dashboard-only pages.\n // All requests from the builder or canvas app are safeguarded either by preventCrossOriginCookie for fetch requests\n // or by allowedDestinations for iframe requests.\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\", \"empty\"]);\n\n const { context, user, userPlanFeatures, origin, projects, templates } =\n await loadDashboardData(request);\n\n const projectToClone = await getProjectToClone(request, context);\n\n return {\n user,\n projects,\n templates,\n userPlanFeatures,\n publisherHost: env.PUBLISHER_HOST,\n origin,\n projectToClone,\n };\n};\n\nexport const shouldRevalidate: ShouldRevalidateFunction = ({\n defaultShouldRevalidate,\n currentUrl,\n nextUrl,\n}) => {\n // We have the entire data on the client, so we don't need to revalidate when\n // URL is changing.\n if (currentUrl.href !== nextUrl.href) {\n return false;\n }\n // When .revalidate() was called explicitely without chaning the URL,\n // `defaultShouldRevalidate` will be true\n return defaultShouldRevalidate;\n};\n\nconst DashboardSetup = lazy(async () => {\n const { DashboardSetup } = await import(\"~/dashboard/index.client\");\n return { default: DashboardSetup };\n});\n\nconst DashboardRoute = () => {\n const data = useLoaderData();\n\n data.projects.slice(0, 5).forEach((project) => {\n prefetchDNS(builderUrl({ projectId: project.id, origin: data.origin }));\n });\n data.projects.slice(0, 5).forEach((project) => {\n preconnect(builderUrl({ projectId: project.id, origin: data.origin }));\n });\n\n return (\n \n \n \n \n );\n};\n\nexport default DashboardRoute;\n" }, { "path": "apps/builder/app/routes/_ui.error.tsx", "content": "import { type LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport { type MetaFunction } from \"@remix-run/react\";\nimport { builderSessionStorage } from \"~/services/builder-session.server\";\nimport { sessionStorage } from \"~/services/session.server\";\nimport { authenticator } from \"~/services/auth.server\";\nimport { builderAuthenticator } from \"~/services/builder-auth.server\";\nimport { z } from \"zod\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { isBuilder } from \"~/shared/router-utils\";\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\n\nconst SessionError = z.object({\n message: z.string(),\n description: z.string().optional(),\n});\n\nexport const meta: MetaFunction = () => {\n const metas: ReturnType = [];\n\n metas.push({ title: \"Webstudio Error\" });\n\n return metas;\n};\n\nconst developmentErrors = [\n {\n message: \"Unknown error\",\n description: undefined,\n },\n\n {\n message:\n \"Unknown error Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\",\n description: undefined,\n },\n\n {\n message: \"Unknown error\",\n description:\n \"Unknown error Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\",\n },\n {\n message:\n \"Unknown error Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\",\n description:\n \"Unknown error Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\",\n },\n {\n message:\n \"UnknownerrorLoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.Itwaspopularisedinthe1960swiththereleaseofLetrasetsheetscontainingLoremIpsumpassages,andmorerecentlywithdesktoppublishingsoftwarelikeAldusPageMakerincludingversionsofLoremIpsum.\",\n description:\n \"UnknownerrorLoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.Itwaspopularisedinthe1960swiththereleaseofLetrasetsheetscontainingLoremIpsumpassages,andmorerecentlywithdesktoppublishingsoftwarelikeAldusPageMakerincludingversionsofLoremIpsum.\",\n },\n];\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n preventCrossOriginCookie(request);\n\n // We leave it here because production errors in remix has a different behavior\n // https://wstd.dev:5173/error?development-error=0\n // https://wstd.dev:5173/error?development-error=1\n // ...\n const url = new URL(request.url);\n if (url.searchParams.has(\"development-error\")) {\n const index = Number(url.searchParams.get(\"development-error\"));\n if (index >= 0 && index < developmentErrors.length) {\n throw new Response(JSON.stringify(developmentErrors[index]), {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n }\n }\n\n const storage = isBuilder(request) ? builderSessionStorage : sessionStorage;\n const sessionErrorKey = isBuilder(request)\n ? builderAuthenticator.sessionErrorKey\n : authenticator.sessionErrorKey;\n\n const session = await storage.getSession(request.headers.get(\"Cookie\"));\n\n const rawError = session.get(sessionErrorKey);\n\n const parsedError = SessionError.safeParse(rawError);\n\n const error = parsedError.success\n ? parsedError.data\n : {\n message: \"Unknown error\",\n description: \"\",\n };\n\n throw new Response(JSON.stringify(error), {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n // Clear the error from the session\n \"Set-Cookie\": await storage.commitSession(session),\n },\n });\n};\n\nexport default function Error() {\n // Placeholder component to prevent Remix warning:\n // \"Matched leaf route at location '/{SOME_LOCATION}' does not have an element or Component.\"\n // Without this, an with a null value would render an empty page.\n return (\n
    \n

    Error

    \n

    Unknown error.

    \n
    \n );\n}\n" }, { "path": "apps/builder/app/routes/_ui.login._index.tsx", "content": "import {\n type LinksFunction,\n type LoaderFunctionArgs,\n type TypedResponse,\n json,\n} from \"@remix-run/server-runtime\";\nimport { useLoaderData, type MetaFunction } from \"@remix-run/react\";\nimport { findAuthenticatedUser } from \"~/services/auth.server\";\nimport env from \"~/env/env.server\";\nimport type { LoginProps } from \"~/auth/index.client\";\nimport { useLoginErrorMessage } from \"~/shared/session\";\nimport {\n comparePathnames,\n dashboardPath,\n isDashboard,\n} from \"~/shared/router-utils\";\nimport { returnToCookie } from \"~/services/cookie.server\";\nimport { ClientOnly } from \"~/shared/client-only\";\nimport { lazy } from \"react\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { redirect } from \"~/services/no-store-redirect\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\n\nexport const links: LinksFunction = () => {\n return [\n {\n rel: \"canonical\",\n href: \"https://apps.webstudio.is/login\",\n },\n ];\n};\n\nexport const meta: MetaFunction = () => {\n const metas: ReturnType = [\n {\n name: \"title\",\n content: \"Webstudio Login\",\n },\n {\n name: \"description\",\n content: \"Log in to Webstudio to start creating websites.\",\n },\n { name: \"robots\", content: \"index, follow\" },\n ];\n\n metas.push({ title: \"Webstudio Login\" });\n\n return metas;\n};\n\nexport const loader = async ({\n request,\n}: LoaderFunctionArgs): Promise> => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\", \"empty\"]);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All requests from the builder or canvas app are safeguarded either by preventCrossOriginCookie for fetch requests\n // or by allowedDestinations for iframe requests.\n\n const user = await findAuthenticatedUser(request);\n\n const url = new URL(request.url);\n let returnTo = url.searchParams.get(\"returnTo\");\n\n if (user) {\n returnTo = returnTo ?? dashboardPath();\n // Avoid loops\n if (comparePathnames(returnTo, request.url)) {\n returnTo = dashboardPath();\n }\n\n throw redirect(returnTo);\n }\n\n const headers = new Headers();\n\n headers.append(\"Set-Cookie\", await returnToCookie.serialize(returnTo));\n\n return json(\n {\n isSecretLoginEnabled: env.DEV_LOGIN === \"true\",\n isGithubEnabled: Boolean(env.GH_CLIENT_ID && env.GH_CLIENT_SECRET),\n isGoogleEnabled: Boolean(\n env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET\n ),\n },\n { headers }\n );\n};\n\nconst Login = lazy(async () => {\n const { Login } = await import(\"~/auth/index.client\");\n return { default: Login };\n});\n\nconst LoginRoute = () => {\n const errorMessage = useLoginErrorMessage();\n const data = useLoaderData();\n return (\n \n \n \n );\n};\n\nexport default LoginRoute;\n" }, { "path": "apps/builder/app/routes/_ui.logout.tsx", "content": "import { json, type LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport { createDebug } from \"~/shared/debug\";\nimport { builderUrl, isDashboard, loginPath } from \"~/shared/router-utils\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { createCallerFactory } from \"@webstudio-is/trpc-interface/index.server\";\nimport { logoutRouter } from \"~/services/logout-router.server\";\nimport { createContext } from \"~/shared/context.server\";\nimport { redirect } from \"react-router-dom\";\nimport { ClientOnly } from \"~/shared/client-only\";\nimport { useLoaderData, type MetaFunction } from \"@remix-run/react\";\nimport { lazy } from \"react\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\nexport { ErrorBoundary } from \"~/shared/error/error-boundary\";\n\nconst logoutCaller = createCallerFactory(logoutRouter);\n\nconst debug = createDebug(import.meta.url);\n\nexport const meta: MetaFunction = () => {\n const metas: ReturnType = [];\n\n metas.push({ title: \"Webstudio Logout\" });\n\n return metas;\n};\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\", \"empty\"]);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All requests from the builder or canvas app are safeguarded either by preventCrossOriginCookie for fetch requests\n // or by allowedDestinations for iframe requests.\n\n const context = await createContext(request);\n\n const redirectTo = loginPath({});\n\n if (context.authorization.type !== \"user\") {\n debug(\"User is not logged in, redirecting to\", redirectTo);\n throw redirect(redirectTo);\n }\n\n try {\n const buildProjectIdsToLogout =\n await logoutCaller(context).getLoggedInProjectIds();\n\n debug(\"buildProjectIdsToLogout\", buildProjectIdsToLogout);\n\n const url = new URL(request.url);\n const logoutUrls = buildProjectIdsToLogout.map(\n (projectId) =>\n `${builderUrl({ projectId, origin: url.origin })}builder-logout`\n );\n\n return json({\n redirectTo,\n logoutUrls,\n });\n } catch (error) {\n if (error instanceof Response) {\n throw error;\n }\n\n console.error(error);\n throw error;\n }\n};\n\nconst LogoutPage = lazy(async () => {\n const { LogoutPage } = await import(\"~/shared/logout.client\");\n return { default: LogoutPage };\n});\n\nexport default function Logout() {\n const data = useLoaderData();\n\n return (\n \n \n \n );\n}\n" }, { "path": "apps/builder/app/routes/_ui.tsx", "content": "import {\n Links,\n Meta,\n Outlet,\n Scripts,\n ScrollRestoration,\n type ClientLoaderFunctionArgs,\n type ShouldRevalidateFunction,\n} from \"@remix-run/react\";\nimport interFont from \"@fontsource-variable/inter/index.css?url\";\nimport manropeVariableFont from \"@fontsource-variable/manrope/index.css?url\";\nimport robotoMonoFont from \"@fontsource/roboto-mono/index.css?url\";\nimport appCss from \"../shared/app.css?url\";\nimport {\n json,\n type LinksFunction,\n type LoaderFunctionArgs,\n} from \"@remix-run/server-runtime\";\nimport { ErrorBoundary as ErrorBoundaryComponent } from \"~/shared/error/error-boundary\";\nimport { getCsrfTokenAndCookie } from \"~/services/csrf-session.server\";\nimport invariant from \"tiny-invariant\";\nimport {\n csrfToken as clientCsrfToken,\n updateCsrfToken,\n} from \"~/shared/csrf.client\";\n\nexport const links: LinksFunction = () => {\n // `links` returns an array of objects whose\n // properties map to the `` component props\n return [\n { rel: \"stylesheet\", href: interFont },\n { rel: \"stylesheet\", href: manropeVariableFont },\n { rel: \"stylesheet\", href: robotoMonoFont },\n { rel: \"stylesheet\", href: appCss },\n ];\n};\n\nconst Document = (props: { children: React.ReactNode }) => {\n return (\n \n \n \n \n \n \n \n \n {props.children}\n \n \n \n \n );\n};\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n const [csrfToken, setCookieValue] = await getCsrfTokenAndCookie(request);\n\n if (request.headers.get(\"sec-fetch-mode\") !== \"navigate\") {\n return json({ csrfToken: \"\" });\n }\n\n const headers = new Headers();\n\n if (setCookieValue !== undefined) {\n headers.set(\"Set-Cookie\", setCookieValue);\n }\n\n return json(\n { csrfToken },\n {\n headers,\n }\n );\n};\n\nexport const clientLoader = async ({\n serverLoader,\n}: ClientLoaderFunctionArgs) => {\n const serverData = await serverLoader();\n\n if (clientCsrfToken === undefined) {\n const { csrfToken } = serverData;\n invariant(csrfToken !== \"\", \"CSRF token is empty\");\n updateCsrfToken(csrfToken);\n }\n\n // Hide real CSRF token from window.__remixContext\n serverData.csrfToken = \"\";\n return serverData;\n};\n\nclientLoader.hydrate = true;\n\nexport const ErrorBoundary = () => {\n return (\n \n \n \n );\n};\n\nexport default function Layout() {\n return (\n \n \n \n );\n}\n\nexport const shouldRevalidate: ShouldRevalidateFunction = () => {\n return false;\n};\n" }, { "path": "apps/builder/app/routes/auth.dev.tsx", "content": "import { type ActionFunctionArgs } from \"@remix-run/server-runtime\";\nimport { authenticator } from \"~/services/auth.server\";\nimport { dashboardPath, isDashboard, loginPath } from \"~/shared/router-utils\";\nimport { AUTH_PROVIDERS } from \"~/shared/session\";\nimport { clearReturnToCookie, returnToPath } from \"~/services/cookie.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { redirect, setNoStoreToRedirect } from \"~/services/no-store-redirect\";\n\nexport default function Dev() {\n return null;\n}\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n preventCrossOriginCookie(request);\n\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n const returnTo = (await returnToPath(request)) ?? dashboardPath();\n\n try {\n await authenticator.authenticate(\"dev\", request, {\n successRedirect: returnTo,\n throwOnError: true,\n });\n } catch (error: unknown) {\n // all redirects are basically errors and in that case we don't want to catch it\n if (error instanceof Response) {\n return setNoStoreToRedirect(await clearReturnToCookie(request, error));\n }\n\n if (error instanceof Error) {\n console.error(\"Error authenticating with dev\", error);\n return redirect(\n loginPath({\n error: AUTH_PROVIDERS.LOGIN_DEV,\n message: error?.message,\n returnTo,\n })\n );\n }\n }\n};\n" }, { "path": "apps/builder/app/routes/auth.github.tsx", "content": "import { type ActionFunctionArgs } from \"@remix-run/server-runtime\";\nimport { authenticator } from \"~/services/auth.server\";\nimport { dashboardPath, isDashboard, loginPath } from \"~/shared/router-utils\";\nimport { AUTH_PROVIDERS } from \"~/shared/session\";\nimport { clearReturnToCookie, returnToPath } from \"~/services/cookie.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { redirect, setNoStoreToRedirect } from \"~/services/no-store-redirect\";\n\nexport default function GH() {\n return null;\n}\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All POST requests from the builder or canvas app are safeguarded by preventCrossOriginCookie\n\n const returnTo = (await returnToPath(request)) ?? dashboardPath();\n\n try {\n return await authenticator.authenticate(\"github\", request, {\n successRedirect: returnTo,\n throwOnError: true,\n });\n } catch (error) {\n // all redirects are basically errors and in that case we don't want to catch it\n if (error instanceof Response) {\n return setNoStoreToRedirect(await clearReturnToCookie(request, error));\n }\n\n const message = error instanceof Error ? error?.message : \"unknown error\";\n\n console.error({\n error,\n extras: {\n loginMethod: AUTH_PROVIDERS.LOGIN_GITHUB,\n },\n });\n\n return redirect(\n loginPath({\n error: AUTH_PROVIDERS.LOGIN_GITHUB,\n message: message,\n returnTo,\n })\n );\n }\n};\n" }, { "path": "apps/builder/app/routes/auth.github_.callback.tsx", "content": "import { type LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport { authenticator } from \"~/services/auth.server\";\nimport { dashboardPath, isDashboard, loginPath } from \"~/shared/router-utils\";\nimport { AUTH_PROVIDERS } from \"~/shared/session\";\nimport { clearReturnToCookie, returnToPath } from \"~/services/cookie.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { redirect, setNoStoreToRedirect } from \"~/services/no-store-redirect\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n preventCrossOriginCookie(request);\n\n allowedDestinations(request, [\"document\"]);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All requests from the builder or canvas app are safeguarded either by preventCrossOriginCookie for fetch requests\n // or by allowedDestinations for iframe requests.\n\n const returnTo = (await returnToPath(request)) ?? dashboardPath();\n\n try {\n await authenticator.authenticate(\"github\", request, {\n successRedirect: returnTo,\n throwOnError: true,\n });\n } catch (error) {\n // all redirects are basically errors and in that case we don't want to catch it\n if (error instanceof Response) {\n return setNoStoreToRedirect(await clearReturnToCookie(request, error));\n }\n\n const message = error instanceof Error ? error?.message : \"unknown error\";\n\n console.error({\n error,\n extras: {\n loginMethod: AUTH_PROVIDERS.LOGIN_GITHUB,\n },\n });\n\n return redirect(\n loginPath({\n error: AUTH_PROVIDERS.LOGIN_GITHUB,\n message,\n returnTo,\n })\n );\n }\n};\n" }, { "path": "apps/builder/app/routes/auth.google.tsx", "content": "import {\n type ActionFunctionArgs,\n type LoaderFunctionArgs,\n} from \"@remix-run/server-runtime\";\nimport { authenticator } from \"~/services/auth.server\";\nimport { dashboardPath, isDashboard, loginPath } from \"~/shared/router-utils\";\nimport { AUTH_PROVIDERS } from \"~/shared/session\";\nimport { clearReturnToCookie, returnToPath } from \"~/services/cookie.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { redirect, setNoStoreToRedirect } from \"~/services/no-store-redirect\";\n\nexport default function Google() {\n return null;\n}\n\nexport const loader = (_args: LoaderFunctionArgs) => redirect(\"/login\");\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All POST requests from the builder or canvas app are safeguarded by preventCrossOriginCookie\n\n const returnTo = (await returnToPath(request)) ?? dashboardPath();\n\n try {\n return await authenticator.authenticate(\"google\", request, {\n successRedirect: returnTo,\n throwOnError: true,\n });\n } catch (error) {\n // all redirects are basically errors and in that case we don't want to catch it\n if (error instanceof Response) {\n return setNoStoreToRedirect(await clearReturnToCookie(request, error));\n }\n\n const message = error instanceof Error ? error?.message : \"unknown error\";\n\n console.error({\n error,\n extras: {\n loginMethod: AUTH_PROVIDERS.LOGIN_GOOGLE,\n },\n });\n return redirect(\n loginPath({\n error: AUTH_PROVIDERS.LOGIN_GOOGLE,\n message: message,\n returnTo,\n })\n );\n }\n};\n" }, { "path": "apps/builder/app/routes/auth.google_.callback.tsx", "content": "import { type LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport { authenticator } from \"~/services/auth.server\";\nimport { dashboardPath, isDashboard, loginPath } from \"~/shared/router-utils\";\nimport { clearReturnToCookie, returnToPath } from \"~/services/cookie.server\";\nimport { AUTH_PROVIDERS } from \"~/shared/session\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { redirect, setNoStoreToRedirect } from \"~/services/no-store-redirect\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\"]);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All requests from the builder or canvas app are safeguarded either by preventCrossOriginCookie for fetch requests\n // or by allowedDestinations for iframe requests.\n\n const returnTo = (await returnToPath(request)) ?? dashboardPath();\n\n try {\n await authenticator.authenticate(\"google\", request, {\n successRedirect: returnTo,\n throwOnError: true,\n });\n } catch (error) {\n // all redirects are basically errors and in that case we don't want to catch it\n if (error instanceof Response) {\n return setNoStoreToRedirect(await clearReturnToCookie(request, error));\n }\n\n const message = error instanceof Error ? error?.message : \"unknown error\";\n\n console.error({\n error,\n extras: {\n loginMethod: AUTH_PROVIDERS.LOGIN_GOOGLE,\n },\n });\n return redirect(\n loginPath({\n error: AUTH_PROVIDERS.LOGIN_GOOGLE,\n message,\n returnTo,\n })\n );\n }\n};\n" }, { "path": "apps/builder/app/routes/auth.ws.ts", "content": "import type { LoaderFunction } from \"@remix-run/node\";\nimport { createDebug } from \"~/shared/debug\";\nimport { builderAuthenticator } from \"~/services/builder-auth.server\";\nimport { comparePathnames, isBuilder } from \"~/shared/router-utils\";\nimport { isRedirectResponse, returnToCookie } from \"~/services/cookie.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { setNoStoreToRedirect } from \"~/services/no-store-redirect\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\n\nconst debug = createDebug(import.meta.url);\n\n// Endpoint to force user relogin\nexport const loader: LoaderFunction = async ({ request }) => {\n if (false === isBuilder(request)) {\n debug(`Request url is not the builder URL ${request.url}`);\n\n return new Response(\"Only builder URL is allowed\", {\n status: 404,\n });\n }\n\n try {\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\"]);\n // CSRF is not needed for document only routes\n\n debug(\n \"Authenticate request received, starting authentication and authorization process\"\n );\n\n return await builderAuthenticator.authenticate(\"ws\", request, {\n throwOnError: true,\n });\n } catch (error) {\n // all redirects are basically errors and in that case we don't want to catch it\n if (error instanceof Response) {\n if (isRedirectResponse(error)) {\n const noStoreResponse = setNoStoreToRedirect(error);\n const response = new Response(noStoreResponse.body, noStoreResponse);\n\n const url = new URL(request.url);\n let returnTo = url.searchParams.get(\"returnTo\");\n\n if (returnTo !== null) {\n if (comparePathnames(returnTo, request.url)) {\n // avoid loops\n returnTo = \"/\";\n }\n\n // Do not allow absolute URLs\n if (URL.canParse(returnTo)) {\n returnTo = \"/\";\n }\n }\n\n const options = returnTo === null ? { maxAge: -1 } : {};\n\n response.headers.append(\n \"Set-Cookie\",\n await returnToCookie.serialize(returnTo, options)\n );\n\n return response;\n }\n\n return error;\n }\n\n debug(\"error\", error);\n\n console.error(\"error\", error);\n throw error;\n }\n};\n" }, { "path": "apps/builder/app/routes/auth.ws_.callback.ts", "content": "import { type LoaderFunction } from \"@remix-run/server-runtime\";\nimport { AuthorizationError } from \"remix-auth\";\nimport { createDebug } from \"~/shared/debug\";\nimport { clearReturnToCookie, returnToPath } from \"~/services/cookie.server\";\nimport { builderAuthenticator } from \"~/services/builder-auth.server\";\nimport { OAuth2Error } from \"remix-auth-oauth2\";\nimport { builderSessionStorage } from \"~/services/builder-session.server\";\nimport { builderPath, isBuilder } from \"~/shared/router-utils\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { redirect, setNoStoreToRedirect } from \"~/services/no-store-redirect\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\n\nconst debug = createDebug(import.meta.url);\n\nexport const loader: LoaderFunction = async ({ request }) => {\n if (false === isBuilder(request)) {\n debug(`Request url is not the builder URL ${request.url}`);\n\n return new Response(\"Only builder URL is allowed\", {\n status: 404,\n });\n }\n\n try {\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\"]);\n // CSRF is not needed for document only routes\n\n const returnTo = (await returnToPath(request)) ?? builderPath();\n\n debug(\"Start exchanging the code for the access token\");\n\n await builderAuthenticator.authenticate(\"ws\", request, {\n throwOnError: true,\n successRedirect: returnTo,\n });\n } catch (error) {\n // all redirects are basically errors and in that case we don't want to catch it\n if (error instanceof Response) {\n debug(\"Response with Cookie\");\n\n const session = await builderSessionStorage.getSession(\n error.headers.get(\"Set-Cookie\")\n );\n\n // Cleanup due to a bug in remix-auth-oauth2: https://github.com/sergiodxa/remix-auth-oauth2/issues/122\n const sessionStateKey = \"oauth2:state\";\n const sessionCodeVerifierKey = \"oauth2:codeVerifier\";\n session.unset(sessionStateKey);\n session.unset(sessionCodeVerifierKey);\n\n const response = new Response(error.body, error);\n // Use set instead of append to overwrite the cookie\n response.headers.set(\n \"Set-Cookie\",\n await builderSessionStorage.commitSession(session)\n );\n\n return setNoStoreToRedirect(await clearReturnToCookie(request, response));\n }\n\n if (error instanceof AuthorizationError) {\n debug(\"Authorization error\", error.message, error.cause?.message);\n\n const sessionError = {\n message: error.message,\n description: \"\",\n };\n\n if (error.cause instanceof OAuth2Error) {\n debug(\n \"OAuth2Error error\",\n error.cause?.message,\n error.cause?.description\n );\n sessionError.description = error.cause.description ?? \"\";\n }\n\n const session = await builderSessionStorage.getSession(\n request.headers.get(\"Cookie\")\n );\n session.flash(builderAuthenticator.sessionErrorKey, sessionError);\n\n throw redirect(\"/error\", {\n headers: {\n \"Set-Cookie\": await builderSessionStorage.commitSession(session),\n },\n });\n }\n\n debug(\"error\", error);\n console.error(\"error\", error);\n throw error;\n }\n};\n" }, { "path": "apps/builder/app/routes/builder-logout.ts", "content": "import { json, type ActionFunctionArgs } from \"@remix-run/server-runtime\";\nimport { createDebug } from \"~/shared/debug\";\nimport { builderAuthenticator } from \"~/services/builder-auth.server\";\nimport { getAuthorizationServerOrigin } from \"~/shared/router-utils/origins\";\nimport { isBuilder, loginPath } from \"~/shared/router-utils\";\nimport { isRedirectResponse } from \"~/services/cookie.server\";\n\nconst debug = createDebug(import.meta.url);\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n // IMPORTANT: This route allows cross-origin cookies to enable dashboard logout from builders.\n // Enforcing preflight by checking Content-Type to be application/json.\n // At the SaaS proxy side, only the allowed \"access-control-allow-origin\" header is set for OPTIONS requests.\n\n if (false === isBuilder(request)) {\n throw new Response(\"Not found\", {\n status: 404,\n });\n }\n\n if (request.method !== \"POST\") {\n return json(\n { message: \"Method not allowed\" },\n {\n status: 405,\n }\n );\n }\n\n if (request.headers.get(\"sec-fetch-site\") === \"same-origin\") {\n // To prevent logout initiated from the builder iframe\n\n throw new Response(\"Only cross-origin requests are allowed\", {\n status: 403,\n });\n }\n\n if (\n false === request.headers.get(\"Content-Type\")?.includes(\"application/json\")\n ) {\n // Enforce preflight request, preflight is checked on allowed origin\n\n throw new Response(\n \"Invalid content type, only application/json is allowed\",\n {\n status: 415,\n }\n );\n }\n\n const redirectTo = `${getAuthorizationServerOrigin(request.url)}${loginPath({})}`;\n\n try {\n debug(\"Logging out\");\n\n await builderAuthenticator.logout(request, {\n redirectTo,\n });\n } catch (error) {\n if (error instanceof Response) {\n if (isRedirectResponse(error)) {\n return new Response(null, {\n status: 204,\n headers: error.headers,\n });\n }\n\n return error;\n }\n\n console.error(error);\n throw error;\n }\n\n throw new Response(\"Should not reach this point\", {\n status: 500,\n });\n};\n" }, { "path": "apps/builder/app/routes/cgi.asset.$.ts", "content": "import { createReadStream, existsSync } from \"node:fs\";\nimport { join } from \"node:path\";\nimport { createReadableStreamFromReadable } from \"@remix-run/node\";\nimport type { LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport {\n getMimeTypeByFilename,\n isAllowedExtension,\n decodePathFragment,\n} from \"@webstudio-is/sdk\";\nimport { fileUploadPath } from \"~/shared/asset-client\";\n\n// This route serves generic assets without processing\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n const basePath = `/cgi/asset/`;\n\n const url = new URL(request.url);\n const name = decodePathFragment(url.pathname.slice(basePath.length));\n\n // Allow direct asset access, and from the same origin\n const refererRawUrl = request.headers.get(\"referer\");\n const refererUrl = refererRawUrl === null ? url : new URL(refererRawUrl);\n if (refererUrl.host !== url.host) {\n throw new Response(\"Forbidden\", {\n status: 403,\n });\n }\n\n // Support absolute urls locally\n if (URL.canParse(name)) {\n return fetch(name);\n }\n\n const filePath = join(process.cwd(), fileUploadPath, name);\n\n if (existsSync(filePath) === false) {\n throw new Response(\"Not found\", {\n status: 404,\n });\n }\n\n // Validate file extension against allowed types\n const extension = name.split(\".\").pop()?.toLowerCase();\n const contentType = getMimeTypeByFilename(name);\n\n // Reject files with disallowed extensions or MIME types\n if (\n contentType === \"application/octet-stream\" ||\n !extension ||\n !isAllowedExtension(extension)\n ) {\n throw new Response(\"File type not allowed\", {\n status: 403,\n });\n }\n\n return new Response(\n createReadableStreamFromReadable(createReadStream(filePath)),\n {\n headers: {\n \"content-type\": contentType,\n \"Access-Control-Allow-Origin\": url.origin,\n },\n }\n );\n};\n" }, { "path": "apps/builder/app/routes/cgi.empty[.]gif.ts", "content": "// For development purposes only\n// Exists on saas worker\nexport const loader = async () => {\n const emptyGif = \"R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=\";\n\n return new Response(\n Uint8Array.from(atob(emptyGif), (c) => c.charCodeAt(0)).buffer,\n {\n headers: {\n \"Content-Type\": \"image/gif\",\n \"Cache-Control\": \"public, max-age=10\",\n },\n }\n );\n};\n" }, { "path": "apps/builder/app/routes/cgi.image.$.ts", "content": "import { createReadStream, existsSync } from \"node:fs\";\nimport { join } from \"node:path\";\nimport { z } from \"zod\";\nimport { createReadableStreamFromReadable } from \"@remix-run/node\";\nimport type { LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport { wsImageLoader } from \"@webstudio-is/image\";\nimport { decodePathFragment } from \"@webstudio-is/sdk\";\nimport env from \"~/env/env.server\";\nimport { getImageNameAndType } from \"~/builder/shared/assets/asset-utils\";\nimport { fileUploadPath } from \"~/shared/asset-client\";\n\nconst ImageParams = z.object({\n width: z.string().transform((value) => Math.round(parseFloat(value))),\n height: z.optional(\n z.string().transform((value) => Math.round(parseFloat(value)))\n ),\n fit: z.optional(z.literal(\"pad\")),\n background: z.optional(z.string()),\n\n quality: z.string().transform((value) => Math.round(parseFloat(value))),\n\n format: z.union([\n z.literal(\"auto\"),\n z.literal(\"avif\"),\n z.literal(\"webp\"),\n z.literal(\"json\"),\n z.literal(\"jpeg\"),\n z.literal(\"png\"),\n z.literal(\"raw\"),\n ]),\n});\n\n// this route used as proxy for images to cloudflare endpoint\n// https://developers.cloudflare.com/fundamentals/get-started/reference/cdn-cgi-endpoint/\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n const basePath = `/cgi/image/`;\n\n const url = new URL(request.url);\n const name = decodePathFragment(url.pathname.slice(basePath.length));\n\n // The code should be +- same as here https://github.com/webstudio-is/webstudio-saas/blob/6c9a3bfb67cf5a221c20666de34bd20dc14bd558/packages/assets-proxy/src/image-transform.ts#L68\n const rawParameters: Record = {\n format: url.searchParams.get(\"format\") ?? \"auto\",\n width: url.searchParams.get(\"width\") ?? \"0\",\n quality: url.searchParams.get(\"quality\") ?? \"80\",\n };\n\n const height = url.searchParams.get(\"height\");\n\n if (height != null) {\n rawParameters.height = height;\n }\n\n const fit = url.searchParams.get(\"fit\");\n\n if (fit != null) {\n rawParameters.fit = fit;\n }\n\n const imageParameters = ImageParams.parse(rawParameters);\n\n // Allow direct image access, and from the same origin\n const refererRawUrl = request.headers.get(\"referer\");\n const refererUrl = refererRawUrl === null ? url : new URL(refererRawUrl);\n if (refererUrl.host !== url.host) {\n throw new Response(\"Forbidden\", {\n status: 403,\n });\n }\n\n if (env.RESIZE_ORIGIN !== undefined) {\n const imgHref = wsImageLoader({\n src: name,\n ...imageParameters,\n format: \"auto\",\n });\n\n const imgUrl = new URL(env.RESIZE_ORIGIN + imgHref);\n imgUrl.search = url.search;\n\n const response = await fetch(imgUrl.href, {\n headers: {\n accept: request.headers.get(\"accept\") ?? \"\",\n \"accept-encoding\": request.headers.get(\"accept-encoding\") ?? \"\",\n },\n });\n\n const responseWHeaders = new Response(response.body, response);\n\n if (false === responseWHeaders.ok) {\n console.error(\n `Request to Image url ${imgUrl.href} responded with status = ${responseWHeaders.status}`\n );\n }\n\n responseWHeaders.headers.set(\"Access-Control-Allow-Origin\", url.origin);\n\n return responseWHeaders;\n }\n\n // support absolute urls locally\n if (URL.canParse(name)) {\n return fetch(name);\n }\n const filePath = join(process.cwd(), fileUploadPath, name);\n\n if (existsSync(filePath) === false) {\n throw new Response(\"Not found\", {\n status: 404,\n });\n }\n\n const [contentType] = getImageNameAndType(name) ?? [\"image/png\"];\n\n return new Response(\n createReadableStreamFromReadable(createReadStream(filePath)),\n {\n headers: {\n \"content-type\": contentType,\n },\n }\n );\n};\n" }, { "path": "apps/builder/app/routes/cgi.video.$.ts", "content": "import { createReadStream, existsSync } from \"node:fs\";\nimport { join } from \"node:path\";\nimport { createReadableStreamFromReadable } from \"@remix-run/node\";\nimport type { LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport env from \"~/env/env.server\";\nimport { getMimeTypeByFilename, decodePathFragment } from \"@webstudio-is/sdk\";\nimport { fileUploadPath } from \"~/shared/asset-client\";\n\n// this route used as proxy for videos to cloudflare endpoint or serve local files\n// https://developers.cloudflare.com/fundamentals/get-started/reference/cdn-cgi-endpoint/\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n const basePath = `/cgi/video/`;\n const url = new URL(request.url);\n const name = decodePathFragment(url.pathname.slice(basePath.length));\n\n if (env.RESIZE_ORIGIN !== undefined) {\n const videoUrl = new URL(env.RESIZE_ORIGIN + url.pathname);\n videoUrl.search = url.search;\n\n const response = await fetch(videoUrl.href, {\n headers: {\n accept: request.headers.get(\"accept\") ?? \"\",\n \"accept-encoding\": request.headers.get(\"accept-encoding\") ?? \"\",\n range: request.headers.get(\"range\") ?? \"\",\n },\n });\n\n const responseWHeaders = new Response(response.body, response);\n\n if (false === responseWHeaders.ok) {\n console.error(\n `Request to Video url ${videoUrl.href} responded with status = ${responseWHeaders.status}`\n );\n }\n\n responseWHeaders.headers.set(\"Access-Control-Allow-Origin\", url.origin);\n\n return responseWHeaders;\n }\n\n // support absolute urls locally\n if (URL.canParse(name)) {\n return fetch(name);\n }\n\n const filePath = join(process.cwd(), fileUploadPath, name);\n\n if (existsSync(filePath) === false) {\n throw new Response(\"Not found\", {\n status: 404,\n });\n }\n\n const contentType = getMimeTypeByFilename(name);\n\n return new Response(\n createReadableStreamFromReadable(createReadStream(filePath)),\n {\n headers: {\n \"content-type\": contentType,\n \"accept-ranges\": \"bytes\",\n },\n }\n );\n};\n" }, { "path": "apps/builder/app/routes/dashboard-logout.ts", "content": "import { json } from \"@remix-run/server-runtime\";\nimport { authenticator } from \"~/services/auth.server\";\nimport { isDashboard, loginPath } from \"~/shared/router-utils\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { type ActionFunctionArgs } from \"react-router-dom\";\nimport { checkCsrf } from \"~/services/csrf-session.server\";\nimport { isRedirectResponse } from \"@remix-run/server-runtime/dist/responses\";\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n try {\n if (false === isDashboard(request)) {\n throw new Response(\"Not found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n await checkCsrf(request);\n\n const redirectTo = loginPath({});\n\n await authenticator.logout(request, {\n redirectTo,\n });\n } catch (error) {\n if (error instanceof Response && isRedirectResponse(error)) {\n const headers = new Headers();\n\n if (error.headers.get(\"Set-Cookie\")) {\n headers.set(\"Set-Cookie\", error.headers.get(\"Set-Cookie\")!);\n }\n\n headers.set(\"Content-Type\", \"application/json\");\n\n return json(\n {\n redirectTo: error.headers.get(\"Location\"),\n },\n {\n headers,\n }\n );\n }\n\n return error;\n }\n};\n" }, { "path": "apps/builder/app/routes/n8n.$.tsx", "content": "import { type LoaderFunctionArgs, json } from \"@remix-run/server-runtime\";\nimport { isRouteErrorResponse, useRouteError } from \"@remix-run/react\";\nimport { z } from \"zod\";\nimport { findAuthenticatedUser } from \"~/services/auth.server\";\nimport { isDashboard, loginPath } from \"~/shared/router-utils\";\nimport env from \"~/env/env.server\";\nimport cookie from \"cookie\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { redirect } from \"~/services/no-store-redirect\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\n\nconst zN8NResponse = z.union([\n z.object({\n type: z.literal(\"error\"),\n error: z.string(),\n }),\n\n z.object({\n type: z.literal(\"redirect\"),\n to: z.string(),\n }),\n]);\nconst zWebhookEnv = z.object({\n N8N_WEBHOOK_URL: z.string(),\n N8N_WEBHOOK_TOKEN: z.string(),\n});\n\nexport const loader = async ({ request, params }: LoaderFunctionArgs) => {\n if (isDashboard(request) === false) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\", \"empty\"]);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All requests from the builder or canvas app are safeguarded either by preventCrossOriginCookie for fetch requests\n // or by allowedDestinations for iframe requests.\n\n const user = await findAuthenticatedUser(request);\n\n if (user === null) {\n const url = new URL(request.url);\n throw redirect(\n loginPath({\n returnTo: `${url.pathname}?${url.searchParams.toString()}`,\n })\n );\n }\n\n const webhookEnvParsed = zWebhookEnv.safeParse(env);\n if (webhookEnvParsed.success === false) {\n throw new Response(webhookEnvParsed.error.message, {\n status: 400,\n });\n }\n\n const webhookEnv = webhookEnvParsed.data;\n\n const n8nWebhookUrl = new URL(webhookEnv.N8N_WEBHOOK_URL);\n n8nWebhookUrl.pathname = `${n8nWebhookUrl.pathname}/${\n env.DEPLOYMENT_ENVIRONMENT ?? \"local\"\n }/${params[\"*\"]}`\n .split(\"/\")\n .filter(Boolean)\n .join(\"/\");\n n8nWebhookUrl.search = new URL(request.url).search;\n\n const requestUrl = new URL(request.url);\n\n const response = await fetch(n8nWebhookUrl.href, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${webhookEnv.N8N_WEBHOOK_TOKEN}`,\n },\n body: JSON.stringify({\n userId: user.id,\n // For anonymous tracking like posthog\n cookies: cookie.parse(request.headers.get(\"cookie\") ?? \"\"),\n requestUrl: requestUrl.href,\n }),\n });\n\n if (response.ok === false) {\n const text = await response.text();\n\n throw new Response(\n `Fetch error status=\"${response.status}\"\\nMessage:\\n${text.slice(\n 0,\n 1000\n )}\"`,\n {\n status: response.status,\n }\n );\n }\n const responseJson = await response.json();\n const n8nResponseParsed = zN8NResponse.safeParse(responseJson);\n\n if (n8nResponseParsed.success === false) {\n throw new Response(n8nResponseParsed.error.message, {\n status: 400,\n });\n }\n\n const n8nResponse = n8nResponseParsed.data;\n\n if (n8nResponse.type === \"error\") {\n throw new Response(n8nResponse.error, {\n status: 400,\n });\n }\n\n if (n8nResponse.type === \"redirect\") {\n throw redirect(n8nResponse.to);\n }\n\n n8nResponse satisfies never;\n\n return json({});\n};\n\nexport const ErrorBoundary = () => {\n const error = useRouteError();\n\n if (isRouteErrorResponse(error)) {\n return
    {error.data}
    ;\n }\n\n if (error instanceof Error) {\n return
    {error.message}
    ;\n }\n\n return
    {String(error)}
    ;\n};\n" }, { "path": "apps/builder/app/routes/oauth.ws.authorize.tsx", "content": "import { json, type LoaderFunction } from \"@remix-run/server-runtime\";\nimport { z } from \"zod\";\nimport { createDebug } from \"~/shared/debug\";\nimport { fromError } from \"zod-validation-error\";\nimport {\n getAuthorizationServerOrigin,\n isBuilderUrl,\n} from \"~/shared/router-utils/origins\";\nimport env from \"~/env/env.server\";\nimport { authenticator } from \"~/services/auth.server\";\nimport { createCodeToken } from \"~/services/token.server\";\nimport { isUserAuthorizedForProject } from \"~/services/builder-access.server\";\nimport {\n builderUrl,\n compareUrls,\n isDashboard,\n loginPath,\n} from \"~/shared/router-utils\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport * as session from \"~/services/session.server\";\nimport { redirect } from \"~/services/no-store-redirect\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\n\nconst debug = createDebug(import.meta.url);\n\n// https://datatracker.ietf.org/doc/html/rfc6749#section-4.1.2.1\nconst createOauthError =\n (redirectUri: string, state: string) =>\n (\n error: \"invalid_request\" | \"invalid_scope\" | \"unauthorized_client\",\n errorDescription: string\n ) => {\n const url = new URL(redirectUri);\n url.search = \"\";\n\n url.searchParams.set(\"error\", error);\n url.searchParams.set(\"error_description\", errorDescription);\n if (state) {\n url.searchParams.set(\"state\", state);\n }\n\n return redirect(url.href, { status: 302 });\n };\n\n/**\n * OAuth 2.0 Authorization Request\n *\n * https://datatracker.ietf.org/doc/html/rfc7636#section-4.3\n *\n * https://datatracker.ietf.org/doc/html/rfc6749#section-4.1.1\n */\nconst OAuthParams = z.object({\n // Ensure that the response_type is valid and supported by the authorization server (e.g., code for the authorization code grant type).\n response_type: z.literal(\"code\"),\n redirect_uri: z.string().url(),\n\n client_id: z.string(),\n state: z.string(),\n scope: z\n .string()\n .refine((str) => str.startsWith(\"project:\"), {\n message: \"Only 'project:' scopes are allowed\",\n })\n .transform((scope) => ({\n projectId: scope.split(\":\")[1],\n })),\n code_challenge: z.string(),\n code_challenge_method: z.literal(\"S256\"),\n});\n\nconst OAuthRedirectUri = z.object({\n redirect_uri: z.string().url(),\n});\n\n/**\n * Based RFC 6749 and RFC 7636\n *\n * https://datatracker.ietf.org/doc/html/rfc6749\n *\n * https://datatracker.ietf.org/doc/html/rfc7636\n */\nexport const loader: LoaderFunction = async ({ request }) => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\"]);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All requests from the builder or canvas app are safeguarded either by preventCrossOriginCookie for fetch requests\n // or by allowedDestinations for iframe requests.\n\n try {\n debug(\"Authorize request received\", request.url);\n\n const url = new URL(request.url);\n const searchParams = Object.fromEntries(url.searchParams);\n\n const parsedRedirect = OAuthRedirectUri.safeParse(searchParams);\n\n if (false === parsedRedirect.success) {\n debug(\"redirect_uri not provided in query params\");\n\n return json(\n {\n error: \"invalid_request\",\n error_description: \"No redirect_uri provided\",\n error_uri: \"https://tools.ietf.org/html/rfc6749#section-3.1.2\",\n },\n { status: 400 }\n );\n }\n\n // eslint-disable-next-line camelcase\n const { redirect_uri } = parsedRedirect.data;\n\n // Validate the redirect_uri\n // It is not pre-registered but it must match the AuthorizationServerOrigin\n if (\n getAuthorizationServerOrigin(request.url) !==\n getAuthorizationServerOrigin(redirect_uri) ||\n new URL(redirect_uri).pathname !== \"/auth/ws/callback\" ||\n false === isBuilderUrl(redirect_uri)\n ) {\n debug(\"redirect_uri does not match the registered redirect URIs\");\n\n return json(\n {\n error: \"invalid_request\",\n error_description:\n \"The redirect_uri provided does not match the registered redirect URIs.\",\n error_uri: \"https://tools.ietf.org/html/rfc6749#section-3.1.2\",\n },\n { status: 400 }\n );\n }\n\n let oauthError = createOauthError(redirect_uri, searchParams.state);\n\n const parsedOAuthParams = OAuthParams.safeParse(searchParams);\n\n if (false === parsedOAuthParams.success) {\n debug(fromError(parsedOAuthParams.error).toString());\n\n return oauthError(\n \"invalid_request\",\n fromError(parsedOAuthParams.error).toString()\n );\n }\n\n // Reinit with parsed state\n oauthError = createOauthError(redirect_uri, parsedOAuthParams.data.state);\n\n // client_id: Verify that the client_id is valid and corresponds to a registered client.\n if (parsedOAuthParams.data.client_id !== env.AUTH_WS_CLIENT_ID) {\n debug(\"Client is not registered\");\n\n return oauthError(\"unauthorized_client\", \"Client is not registered\");\n }\n\n const oAuthParams = parsedOAuthParams.data;\n\n const sessionData = await authenticator.isAuthenticated(request);\n\n if (sessionData) {\n debug(`User id=${sessionData.userId} is authenticated`);\n\n const isAuthorized = await isUserAuthorizedForProject(\n sessionData.userId,\n oAuthParams.scope.projectId\n );\n\n // scope: Ensure the requested scope is valid, authorized, and within the permissions granted to the client.\n if (false === isAuthorized) {\n debug(\n `User ${sessionData.userId} is not the owner of ${oAuthParams.scope.projectId}, denying access`\n );\n return oauthError(\n \"unauthorized_client\",\n \"User does not have access to the project\"\n );\n }\n\n // redirect_uri: Ensure the redirect_uri parameter value is valid and authorized\n if (\n false ===\n compareUrls(\n new URL(redirect_uri).origin,\n builderUrl({\n projectId: oAuthParams.scope.projectId,\n origin: getAuthorizationServerOrigin(request.url),\n })\n )\n ) {\n debug(\"redirect_uri does not match the registered redirect URIs\");\n\n return json(\n {\n error: \"invalid_request\",\n error_description:\n \"The redirect_uri provided does not match the registered redirect URIs.\",\n error_uri: \"https://tools.ietf.org/html/rfc6749#section-3.1.2\",\n },\n { status: 400 }\n );\n }\n\n debug(\n `User ${sessionData.userId} is the owner of ${oAuthParams.scope.projectId}, creating token`\n );\n\n // We do not use database now.\n // https://datatracker.ietf.org/doc/html/rfc7636#section-4.4\n const code = await createCodeToken(\n {\n userId: sessionData.userId,\n projectId: oAuthParams.scope.projectId,\n codeChallenge: oAuthParams.code_challenge,\n },\n env.AUTH_WS_CLIENT_SECRET,\n { maxAge: 1000 * 60 * 5 }\n );\n\n const redirectUri = new URL(oAuthParams.redirect_uri);\n redirectUri.search = \"\";\n\n redirectUri.searchParams.set(\"code\", code);\n // state: If present, store the state parameter to return it unchanged in the response\n redirectUri.searchParams.set(\"state\", oAuthParams.state);\n\n debug(\n `Code ${code} created, redirecting to redirect_uri: ${redirectUri.href}`\n );\n\n const bloomFilter = await session.readLoginSessionBloomFilter(request);\n\n bloomFilter.add(oAuthParams.scope.projectId);\n\n return session.writeLoginSessionBloomFilter(\n request,\n redirect(redirectUri.href),\n bloomFilter\n );\n }\n\n sessionData satisfies null;\n\n debug(\n \"User is not authenticated, saving current url to returnTo cookie and redirecting to login\"\n );\n\n return redirect(loginPath({ returnTo: request.url }));\n } catch (error) {\n if (error instanceof Response) {\n return error;\n }\n\n console.error(\"error\", error);\n debug(\"error\", error);\n\n throw json(\n {\n error: \"server_error\",\n error_description:\n error instanceof Error ? error.message : \"Unknown error\",\n error_uri: \"\",\n },\n { status: 500 }\n );\n }\n};\n" }, { "path": "apps/builder/app/routes/oauth.ws.token.ts", "content": "import { type ActionFunctionArgs, json } from \"@remix-run/server-runtime\";\nimport { z } from \"zod\";\n\nimport { createDebug } from \"~/shared/debug\";\nimport { fromError } from \"zod-validation-error\";\nimport env from \"~/env/env.server\";\nimport {\n createAccessToken,\n readAccessToken,\n readCodeToken,\n verifyChallenge,\n} from \"~/services/token.server\";\nimport { isUserAuthorizedForProject } from \"~/services/builder-access.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { isDashboard } from \"~/shared/router-utils\";\n\n/**\n * OAuth 2.0 Token Request\n *\n * https://datatracker.ietf.org/doc/html/rfc7636#section-4.5\n *\n * https://datatracker.ietf.org/doc/html/rfc6749#section-4.1.3\n */\nconst TokenRequest = z.object({\n // Check that the grant_type parameter is present and is one of the supported values\n grant_type: z.literal(\"authorization_code\"),\n code: z.string(),\n redirect_uri: z.string().url(),\n code_verifier: z.string(),\n});\n\nconst debug = createDebug(import.meta.url);\n\n/**\n * OAuth 2.0 Token Request\n *\n * https://datatracker.ietf.org/doc/html/rfc7636\n *\n * https://datatracker.ietf.org/doc/html/rfc6749\n */\nexport const action = async ({ request }: ActionFunctionArgs) => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All POST requests from the builder or canvas app are safeguarded by preventCrossOriginCookie\n\n debug(\"Token request received\");\n\n const authorizationHeader = request.headers.get(\"Authorization\");\n\n if (authorizationHeader === null) {\n return json(\n {\n error: \"invalid_request\",\n error_description: \"missing client credentials\",\n error_uri: \"https://tools.ietf.org/html/rfc6749#section-5.2\",\n },\n { status: 401 }\n );\n }\n\n const basicAuth = authorizationHeader.split(\" \")[1] ?? \"\";\n\n const [clientId, clientSecret]: (string | undefined)[] = Buffer.from(\n basicAuth,\n \"base64\"\n )\n .toString(\"utf-8\")\n .split(\":\");\n\n // Validate the client’s credentials (e.g., client_id and client_secret) using HTTP Basic Authentication or form-encoded parameters.\n if (\n clientId !== env.AUTH_WS_CLIENT_ID ||\n clientSecret !== env.AUTH_WS_CLIENT_SECRET\n ) {\n debug(\"client_id and client_secret do not match\", clientId, clientSecret);\n return json(\n {\n error: \"invalid_client\",\n error_description: \"invalid client credentials\",\n error_uri: \"https://tools.ietf.org/html/rfc6749#section-5.2\",\n },\n { status: 401 }\n );\n }\n\n const jsonBody = Object.fromEntries((await request.formData()).entries());\n debug(\"Token request received\", jsonBody);\n\n const parsedBody = TokenRequest.safeParse(jsonBody);\n\n if (false === parsedBody.success) {\n debug(fromError(parsedBody.error).toString());\n\n return json(\n {\n error: \"invalid_request\",\n error_description: fromError(parsedBody.error).toString(),\n error_uri: \"https://tools.ietf.org/html/rfc6749#section-5.2\",\n },\n { status: 400 }\n );\n }\n\n const body = parsedBody.data;\n\n // Ensure the code parameter is present and valid.\n const codeToken = await readCodeToken(body.code, env.AUTH_WS_CLIENT_SECRET);\n\n if (codeToken === undefined) {\n debug(\"Code can not be read\", body.code);\n return json(\n {\n error: \"invalid_grant\",\n error_description: \"invalid code\",\n error_uri: \"https://tools.ietf.org/html/rfc6749#section-5.2\",\n },\n { status: 400 }\n );\n }\n\n // verify the code_verifier against the stored code_challenge\n const isChallengeVerified = await verifyChallenge(\n body.code_verifier,\n codeToken.codeChallenge\n );\n if (false === isChallengeVerified) {\n debug(\n \"Code verifier does not match\",\n body.code_verifier,\n codeToken.codeChallenge\n );\n return json(\n {\n error: \"invalid_grant\",\n error_description: \"invalid code_verifier\",\n error_uri: \"https://tools.ietf.org/html/rfc6749#section-5.2\",\n },\n { status: 400 }\n );\n }\n\n const { projectId, userId } = codeToken;\n\n const isAuthorized = await isUserAuthorizedForProject(userId, projectId);\n\n if (false === isAuthorized) {\n debug(\"User does not have access to the project\", userId, projectId);\n return json(\n {\n error: \"invalid_grant\",\n error_description: \"user does not have access to the project\",\n error_uri: \"https://tools.ietf.org/html/rfc6749#section-5.2\",\n },\n { status: 400 }\n );\n }\n\n const maxAge = 1000 * 60;\n\n // Generate a short-lived token, as its sole purpose is to log the user in.\n const accessToken = await createAccessToken(\n { userId, projectId },\n env.AUTH_WS_CLIENT_SECRET,\n {\n maxAge,\n }\n );\n\n debug(\"Token created\", accessToken);\n\n debug(\n \"readAccessToken\",\n await readAccessToken(accessToken, env.AUTH_WS_CLIENT_SECRET)\n );\n\n return json(\n {\n access_token: accessToken,\n token_type: \"Bearer\",\n expires_in: Date.now() + maxAge,\n },\n { status: 200 }\n );\n};\n" }, { "path": "apps/builder/app/routes/rest.assets.tsx", "content": "import type {\n ActionFunctionArgs,\n LoaderFunctionArgs,\n} from \"@remix-run/server-runtime\";\nimport type { Asset } from \"@webstudio-is/sdk\";\nimport { MaxAssets } from \"@webstudio-is/asset-uploader\";\nimport {\n loadAssetsByProject,\n createUploadName,\n} from \"@webstudio-is/asset-uploader/index.server\";\nimport { createContext } from \"~/shared/context.server\";\nimport env from \"~/env/env.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { checkCsrf } from \"~/services/csrf-session.server\";\nimport { parseError } from \"~/shared/error/error-parse\";\n\nexport const loader = async ({\n params,\n request,\n}: LoaderFunctionArgs): Promise> => {\n if (params.projectId === undefined) {\n throw new Error(\"Project id undefined\");\n }\n const context = await createContext(request);\n return await loadAssetsByProject(params.projectId, context);\n};\n\nexport const action = async (props: ActionFunctionArgs) => {\n try {\n preventCrossOriginCookie(props.request);\n await checkCsrf(props.request);\n\n const { request } = props;\n\n const context = await createContext(request);\n\n if (request.method === \"POST\") {\n const formData = await request.formData();\n const projectId = formData.get(\"projectId\") as string;\n const type = formData.get(\"type\") as string;\n const filename = formData.get(\"filename\") as string;\n if (projectId === null || type === null || filename === null) {\n throw Error(\"Project id, asset id or filename are missing\");\n }\n const name = await createUploadName(\n {\n projectId,\n type,\n filename,\n maxAssetsPerProject: MaxAssets.parse(env.MAX_ASSETS_PER_PROJECT),\n },\n context\n );\n return {\n name,\n };\n }\n } catch (error) {\n console.error(error);\n\n return {\n errors: parseError(error).message,\n };\n }\n};\n" }, { "path": "apps/builder/app/routes/rest.assets_.$name.tsx", "content": "import { z } from \"zod\";\nimport type { ActionFunctionArgs } from \"@remix-run/server-runtime\";\nimport { uploadFile } from \"@webstudio-is/asset-uploader/index.server\";\nimport {\n isAllowedMimeCategory,\n RESIZABLE_IMAGE_MIME_TYPES,\n ALLOWED_FILE_TYPES,\n} from \"@webstudio-is/sdk\";\nimport type { AssetActionResponse } from \"~/builder/shared/assets\";\nimport { createAssetClient } from \"~/shared/asset-client\";\nimport { createContext } from \"~/shared/context.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { checkCsrf } from \"~/services/csrf-session.server\";\nimport { parseError } from \"~/shared/error/error-parse\";\n\nconst UrlBody = z.object({\n url: z.string(),\n});\n\nexport const action = async (\n props: ActionFunctionArgs\n): Promise => {\n preventCrossOriginCookie(props.request);\n await checkCsrf(props.request);\n\n const { request, params } = props;\n\n // await new Promise((resolve) => setTimeout(resolve, 20000));\n\n if (params.name === undefined) {\n throw new Error(\"Name is undefined\");\n }\n\n try {\n if (request.method === \"POST\" && request.body !== null) {\n let body = request.body;\n\n const contentType = request.headers.get(\"Content-Type\");\n\n // Check if this is a request to download from URL (has url field in JSON body)\n // vs uploading a JSON file directly (JSON file content in body)\n if (contentType?.includes(\"application/json\")) {\n const jsonBody = await request.json();\n const urlParse = UrlBody.safeParse(jsonBody);\n\n // Only fetch from URL if the body has a valid url field\n if (urlParse.success) {\n const { url } = urlParse.data;\n\n const imageRequest = await fetch(url, {\n method: \"GET\",\n headers: {\n Accept: RESIZABLE_IMAGE_MIME_TYPES.join(\",\"),\n },\n });\n\n if (false === imageRequest.ok) {\n const error = await imageRequest.text();\n const errors = `An error occurred while fetching the image at ${url}: ${error.slice(0, 500)}`;\n throw new Error(errors);\n }\n\n if (imageRequest.body === null) {\n throw new Error(\n `An error occurred while fetching the image at ${url}: Image body is null`\n );\n }\n\n body = imageRequest.body;\n } else {\n // This is a JSON file being uploaded, use the JSON content as body\n body = new Blob([JSON.stringify(jsonBody)], {\n type: \"application/json\",\n }).stream();\n }\n }\n\n const url = new URL(request.url);\n\n // Get file extension from filename\n const fileExtension = params.name.split(\".\").pop()?.toLowerCase();\n\n // Use the file extension to determine the correct MIME type\n // This handles cases where browsers send legacy MIME types (e.g., application/font-woff instead of font/woff)\n const correctMimeType = fileExtension\n ? ALLOWED_FILE_TYPES[fileExtension as keyof typeof ALLOWED_FILE_TYPES]\n : contentType?.split(\";\")[0];\n\n const contentTypeArr = correctMimeType?.split(\"/\") ?? [];\n\n // Validate MIME type against allowed categories\n const mimeCategory = contentTypeArr[0];\n if (\n mimeCategory &&\n correctMimeType &&\n !isAllowedMimeCategory(mimeCategory)\n ) {\n throw new Error(`MIME type \"${mimeCategory}/*\" is not allowed`);\n }\n\n const format =\n contentTypeArr[0] === \"video\" ? contentTypeArr[1] : undefined;\n\n const width = url.searchParams.has(\"width\")\n ? Number.parseInt(url.searchParams.get(\"width\")!, 10)\n : undefined;\n const height = url.searchParams.has(\"height\")\n ? Number.parseInt(url.searchParams.get(\"height\")!, 10)\n : undefined;\n\n const assetInfoFallback =\n height !== undefined && width !== undefined && format !== undefined\n ? { width, height, format }\n : undefined;\n\n const context = await createContext(request);\n const asset = await uploadFile(\n params.name,\n body,\n createAssetClient(),\n context,\n assetInfoFallback\n );\n return {\n uploadedAssets: [asset],\n };\n }\n } catch (error) {\n console.error(error);\n\n return {\n errors: parseError(error).message,\n };\n }\n\n return {\n errors: \"Method not allowed\",\n };\n};\n" }, { "path": "apps/builder/app/routes/rest.build.$buildId.tsx", "content": "import {\n json,\n type LoaderFunctionArgs,\n type TypedResponse,\n} from \"@remix-run/server-runtime\";\nimport type { Data } from \"@webstudio-is/http-client\";\nimport * as projectApi from \"@webstudio-is/project/index.server\";\nimport { loadProductionCanvasData } from \"~/shared/db\";\nimport { createContext } from \"~/shared/context.server\";\nimport { getUserById, type User } from \"~/shared/db/user.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\nimport { isDashboard } from \"~/shared/router-utils\";\nimport { parseError } from \"~/shared/error/error-parse\";\n\nexport const loader = async ({\n params,\n request,\n}: LoaderFunctionArgs): Promise<\n | (Data & { user: { email: User[\"email\"] } | undefined } & {\n projectDomain: string;\n projectTitle: string;\n })\n | TypedResponse<{ error: string; message: string }>\n> => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\", \"empty\"]);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All requests from the builder or canvas app are safeguarded either by preventCrossOriginCookie for fetch requests\n // or by allowedDestinations for iframe requests.\n\n try {\n const buildId = params.buildId;\n\n if (buildId === undefined) {\n throw json(\"Required build id\", { status: 400 });\n }\n\n const context = await createContext(request);\n\n const pagesCanvasData = await loadProductionCanvasData(buildId, context);\n\n const project = await projectApi.loadById(\n pagesCanvasData.build.projectId,\n context\n );\n\n const user =\n project === null || project.userId === null\n ? undefined\n : await getUserById(context, project.userId);\n\n return {\n ...pagesCanvasData,\n user: user ? { email: user.email } : undefined,\n projectDomain: project.domain,\n projectTitle: project.title,\n };\n } catch (error) {\n // If a Response is thrown, we're rethrowing it for Remix to handle.\n // https://remix.run/docs/en/v1/api/conventions#throwing-responses-in-loaders\n if (error instanceof Response) {\n throw error;\n }\n\n console.error(error);\n\n // We have no idea what happened, so we'll return a 500 error.\n throw json(parseError(error), {\n status: 500,\n });\n }\n};\n" }, { "path": "apps/builder/app/routes/rest.buildId.$projectId.tsx", "content": "import {\n json,\n type LoaderFunctionArgs,\n type TypedResponse,\n} from \"@remix-run/server-runtime\";\nimport * as projectApi from \"@webstudio-is/project/index.server\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { createContext } from \"~/shared/context.server\";\nimport { parseError } from \"~/shared/error/error-parse\";\nimport { isDashboard } from \"~/shared/router-utils\";\n\n// This loader is only accessible from the dashboard origin\n// and is used exclusively for the CLI.\nexport const loader = async ({\n params,\n request,\n}: LoaderFunctionArgs): Promise<\n { buildId: string | null } | TypedResponse<{ error: string; message: string }>\n> => {\n if (false === isDashboard(request)) {\n throw new Response(\"Not Found\", {\n status: 404,\n });\n }\n\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\", \"empty\"]);\n // CSRF token checks are not necessary for dashboard-only pages.\n // All requests from the builder or canvas app are safeguarded either by preventCrossOriginCookie for fetch requests\n // or by allowedDestinations for iframe requests.\n\n try {\n const projectId = params.projectId;\n\n if (projectId === undefined) {\n throw json(\"Required project id\", { status: 400 });\n }\n\n // @todo Create a context without user authentication information.\n const context = await createContext(request);\n\n const project = await projectApi.loadById(projectId, context);\n const buildId = project.latestBuildVirtual?.buildId ?? null;\n\n return {\n buildId,\n };\n } catch (error) {\n // If a Response is thrown, we're rethrowing it for Remix to handle.\n // https://remix.run/docs/en/v1/api/conventions#throwing-responses-in-loaders\n if (error instanceof Response) {\n throw error;\n }\n\n console.error(error);\n\n throw json(parseError(error), {\n status: 500,\n });\n }\n};\n" }, { "path": "apps/builder/app/routes/rest.data.$projectId.ts", "content": "import type { LoaderFunctionArgs } from \"@remix-run/server-runtime\";\nimport * as projectApi from \"@webstudio-is/project/index.server\";\nimport { loadDevBuildByProjectId } from \"@webstudio-is/project-build/index.server\";\nimport { loadAssetsByProject } from \"@webstudio-is/asset-uploader/index.server\";\nimport { createContext } from \"~/shared/context.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { checkCsrf } from \"~/services/csrf-session.server\";\nimport { allowedDestinations } from \"~/services/destinations.server\";\nimport env from \"~/env/env.server\";\n\nexport const loader = async ({ params, request }: LoaderFunctionArgs) => {\n preventCrossOriginCookie(request);\n allowedDestinations(request, [\"document\", \"empty\"]);\n await checkCsrf(request);\n\n if (params.projectId === undefined) {\n throw new Error(\"Project id undefined\");\n }\n const context = await createContext(request);\n const project = await projectApi.loadById(params.projectId, context);\n if (project === null) {\n throw new Error(`Project \"${params.projectId}\" not found`);\n }\n if (project.userId === null) {\n throw new Error(\"Project must have project userId defined\");\n }\n const build = await loadDevBuildByProjectId(context, project.id);\n const assets = await loadAssetsByProject(project.id, context);\n return {\n ...build,\n assets,\n project,\n publisherHost: env.PUBLISHER_HOST,\n };\n};\n" }, { "path": "apps/builder/app/routes/rest.patch.ts", "content": "import { applyPatches, enableMapSet, enablePatches, type Patch } from \"immer\";\nimport type { ActionFunctionArgs } from \"@remix-run/server-runtime\";\nimport {\n Breakpoints,\n Breakpoint,\n Instances,\n Instance,\n Pages,\n Props,\n Prop,\n DataSources,\n DataSource,\n StyleSourceSelections,\n StyleSources,\n StyleSource,\n Styles,\n Resources,\n Resource,\n} from \"@webstudio-is/sdk\";\nimport {\n type Build,\n findCycles,\n MarketplaceProduct,\n} from \"@webstudio-is/project-build\";\nimport {\n parsePages,\n parseStyleSourceSelections,\n parseStyles,\n serializePages,\n serializeStyleSourceSelections,\n serializeStyles,\n parseData,\n serializeData,\n parseConfig,\n serializeConfig,\n loadRawBuildById,\n parseInstanceData,\n} from \"@webstudio-is/project-build/index.server\";\nimport { patchAssets } from \"@webstudio-is/asset-uploader/index.server\";\nimport type { Project } from \"@webstudio-is/project\";\nimport {\n AuthorizationError,\n authorizeProject,\n} from \"@webstudio-is/trpc-interface/index.server\";\nimport { createContext } from \"~/shared/context.server\";\nimport * as projectApi from \"@webstudio-is/project/index.server\";\nimport type { Database } from \"@webstudio-is/postgrest/index.server\";\nimport { publicStaticEnv } from \"~/env/env.static\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { checkCsrf } from \"~/services/csrf-session.server\";\nimport type { Transaction } from \"~/shared/sync-client\";\n\ntype Change = {\n namespace: string;\n patches: Array;\n};\n\ntype PatchData = {\n transactions: Transaction[];\n buildId: Build[\"id\"];\n projectId: Project[\"id\"];\n version: number;\n};\n\nexport const action = async ({\n request,\n}: ActionFunctionArgs): Promise<\n | { status: \"ok\" }\n | { status: \"version_mismatched\"; errors: string }\n | { status: \"authorization_error\"; errors: string }\n | { status: \"error\"; errors: string }\n> => {\n try {\n preventCrossOriginCookie(request);\n\n enableMapSet();\n enablePatches();\n\n await checkCsrf(request);\n\n const {\n buildId,\n projectId,\n transactions,\n version: clientVersion,\n }: PatchData = await request.json();\n\n const version = new URL(request.url).searchParams.get(\"client-version\");\n\n if (publicStaticEnv.VERSION !== version) {\n return {\n status: \"version_mismatched\",\n errors: `The client and server versions do not match. Please reload to continue.`,\n };\n }\n\n if (buildId === undefined) {\n return { status: \"error\", errors: \"Build id required\" };\n }\n if (projectId === undefined) {\n return { status: \"error\", errors: \"Project id required\" };\n }\n\n const lastTransactionId = transactions.at(-1)?.id;\n\n if (lastTransactionId === undefined) {\n return {\n status: \"error\",\n errors: \"Transaction array must not be empty.\",\n };\n }\n\n const context = await createContext(request);\n\n if (context.authorization.type === \"service\") {\n throw new AuthorizationError(\"Service calls are not allowed\");\n }\n\n if (context.authorization.type === \"anonymous\") {\n return {\n status: \"authorization_error\",\n errors:\n \"Due to a recent update or a possible logout, you may need to log in again. Please reload the page and sign in to continue.\",\n };\n }\n\n // @todo: Commented until better Content Edit mode checks are implemented\n const [canEditContent /* canEdit */] = await Promise.all([\n authorizeProject.hasProjectPermit({ projectId, permit: \"edit\" }, context),\n /*\n authorizeProject.hasProjectPermit(\n { projectId, permit: \"build\" },\n context\n ),\n */\n ]);\n\n if (canEditContent === false) {\n return {\n status: \"authorization_error\",\n errors: \"You don't have permission to edit this project.\",\n };\n }\n\n // const isContentEditMode = canEditContent && !canEdit;\n\n const build = await loadRawBuildById(context, buildId);\n\n const serverVersion = build.version;\n if (clientVersion !== serverVersion) {\n // Check if a retry attempt is made with a previously successful transaction.\n // This can occur if the connection was lost or an error occurred post-transaction completion,\n // leaving the client in an erroneous state and prompting a retry.\n if (lastTransactionId === build.lastTransactionId) {\n return { status: \"ok\" };\n }\n\n return {\n status: \"version_mismatched\",\n errors: `You are currently in single-player mode. The project has been edited in a different tab, browser, or by another user. Please reload the page to get the latest version.`,\n };\n }\n\n const buildData: {\n pages?: Pages;\n breakpoints?: Breakpoints;\n instances?: Instances;\n props?: Props;\n dataSources?: DataSources;\n resources?: Resources;\n styleSources?: StyleSources;\n styleSourceSelections?: StyleSourceSelections;\n styles?: Styles;\n marketplaceProduct?: MarketplaceProduct;\n } = {};\n\n let previewImageAssetId: string | null | undefined = undefined;\n\n // Used to optimize by validating only changed styles, as they accounted for 99% of validation time\n const patchedStyleDeclKeysSet = new Set();\n\n for await (const transaction of transactions) {\n for await (const change of transaction.payload) {\n const { namespace, patches } = change;\n if (patches.length === 0) {\n continue;\n }\n\n if (namespace === \"pages\") {\n // lazily parse build data before patching\n const pages = buildData.pages ?? parsePages(build.pages);\n const currentSocialImageAssetId =\n pages.homePage.meta.socialImageAssetId;\n buildData.pages = applyPatches(pages, patches);\n const newSocialImageAssetId =\n buildData.pages.homePage.meta.socialImageAssetId;\n if (currentSocialImageAssetId !== newSocialImageAssetId) {\n previewImageAssetId = newSocialImageAssetId || null;\n }\n continue;\n }\n\n if (namespace === \"instances\") {\n const instances =\n buildData.instances ?? parseInstanceData(build.instances);\n\n buildData.instances = applyPatches(instances, patches);\n\n // Detect cycles\n const cycles = findCycles(buildData.instances.values());\n if (cycles.length > 0) {\n console.error(\n \"Cycles detected in the instance tree after patching\",\n cycles\n );\n\n return {\n status: \"error\",\n errors: \"Cycles detected in the instance tree\",\n };\n }\n\n continue;\n }\n\n if (namespace === \"props\") {\n const props = buildData.props ?? parseData(build.props);\n buildData.props = applyPatches(props, patches);\n continue;\n }\n\n if (namespace === \"assets\") {\n // assets implements own patching\n // @todo parallelize the updates\n // currently not possible because we fetch the entire tree\n // and parallelized updates will cause unpredictable side effects\n await patchAssets({ projectId }, patches, context);\n continue;\n }\n\n // This is super simple and naive implementation of permissions checks for Content Edit mode\n // @todo: Implement proper permissions checks, one of idea is to allow any changes to the new instances\n /*\n if (isContentEditMode) {\n return {\n status: \"error\",\n errors: `You don't have permission to patch namespace ${namespace}`,\n };\n }*/\n\n if (namespace === \"styleSourceSelections\") {\n const styleSourceSelections =\n buildData.styleSourceSelections ??\n parseStyleSourceSelections(build.styleSourceSelections);\n buildData.styleSourceSelections = applyPatches(\n styleSourceSelections,\n patches\n );\n continue;\n }\n\n if (namespace === \"styleSources\") {\n const styleSources =\n buildData.styleSources ??\n parseData(build.styleSources);\n buildData.styleSources = applyPatches(styleSources, patches);\n continue;\n }\n\n if (namespace === \"styles\") {\n // It's somehow implementation detail leak, as we use the fact that styles patches has ids in path\n for (const patch of patches) {\n patchedStyleDeclKeysSet.add(`${patch.path[0]}`);\n }\n\n const styles = buildData.styles ?? parseStyles(build.styles);\n buildData.styles = applyPatches(styles, patches);\n continue;\n }\n\n if (namespace === \"dataSources\") {\n const dataSources =\n buildData.dataSources ?? parseData(build.dataSources);\n buildData.dataSources = applyPatches(dataSources, patches);\n continue;\n }\n\n if (namespace === \"resources\") {\n const resources =\n buildData.resources ?? parseData(build.resources);\n buildData.resources = applyPatches(resources, patches);\n continue;\n }\n\n if (namespace === \"breakpoints\") {\n const breakpoints =\n buildData.breakpoints ?? parseData(build.breakpoints);\n buildData.breakpoints = applyPatches(breakpoints, patches);\n continue;\n }\n\n if (namespace === \"marketplaceProduct\") {\n const marketplaceProduct =\n buildData.marketplaceProduct ??\n parseConfig(build.marketplaceProduct);\n\n buildData.marketplaceProduct = applyPatches(\n marketplaceProduct,\n patches\n );\n\n continue;\n }\n\n return { status: \"error\", errors: `Unknown namespace \"${namespace}\"` };\n }\n }\n\n // save build data when all patches applied\n const dbBuildData: Database[\"public\"][\"Tables\"][\"Build\"][\"Update\"] = {\n version: clientVersion + 1,\n lastTransactionId,\n updatedAt: new Date().toISOString(),\n };\n\n if (buildData.pages) {\n // parse with zod before serialization to avoid saving invalid data\n dbBuildData.pages = serializePages(Pages.parse(buildData.pages));\n }\n\n if (buildData.breakpoints) {\n dbBuildData.breakpoints = serializeData(\n Breakpoints.parse(buildData.breakpoints)\n );\n }\n\n if (buildData.instances) {\n dbBuildData.instances = serializeData(\n Instances.parse(buildData.instances)\n );\n }\n\n if (buildData.props) {\n dbBuildData.props = serializeData(Props.parse(buildData.props));\n }\n\n if (buildData.dataSources) {\n dbBuildData.dataSources = serializeData(\n DataSources.parse(buildData.dataSources)\n );\n }\n\n if (buildData.resources) {\n dbBuildData.resources = serializeData(\n Resources.parse(buildData.resources)\n );\n }\n\n if (buildData.styleSources) {\n dbBuildData.styleSources = serializeData(\n StyleSources.parse(buildData.styleSources)\n );\n }\n if (buildData.styleSourceSelections) {\n dbBuildData.styleSourceSelections = serializeStyleSourceSelections(\n StyleSourceSelections.parse(buildData.styleSourceSelections)\n );\n }\n\n if (buildData.styles) {\n // Optimize by validating only changed styles, as they accounted for 99% of validation time\n const stylesToValidate: Styles = new Map();\n for (const styleId of patchedStyleDeclKeysSet) {\n const style = buildData.styles.get(styleId);\n // In case of deletion style could be undefined\n if (style === undefined) {\n continue;\n }\n\n stylesToValidate.set(styleId, style);\n }\n\n Styles.parse(stylesToValidate);\n\n dbBuildData.styles = serializeStyles(buildData.styles);\n }\n\n if (buildData.marketplaceProduct) {\n dbBuildData.marketplaceProduct = serializeConfig(\n MarketplaceProduct.parse(buildData.marketplaceProduct)\n );\n }\n\n const update = await context.postgrest.client\n .from(\"Build\")\n .update(dbBuildData, { count: \"exact\" })\n .match({\n id: buildId,\n projectId,\n version: clientVersion,\n });\n\n if (update.error) {\n console.error(update.error);\n throw update.error;\n }\n if (update.count == null) {\n console.error(\"Update count is null\");\n throw new Error(\"Update count is null\");\n }\n\n // ensure only build with client version is updated\n // to avoid race conditions\n if (update.count === 0) {\n // We don't validate if lastTransactionId matches the user's transaction ID here, as we've already done so earlier.\n // Given the sequential nature of messages from a single client, this situation is deemed improbable.\n return {\n status: \"version_mismatched\",\n errors: `You are currently in single-player mode. The project has been edited in a different tab, browser, or by another user. Please reload the page to get the latest version.`,\n };\n }\n\n if (previewImageAssetId !== undefined) {\n await projectApi.updatePreviewImage(\n { assetId: previewImageAssetId, projectId },\n context\n );\n }\n\n return { status: \"ok\" };\n } catch (error) {\n if (error instanceof AuthorizationError) {\n return {\n status: \"authorization_error\",\n errors: error.message,\n };\n }\n\n if (error instanceof Response && error.ok === false) {\n return {\n status: \"authorization_error\",\n errors: error.statusText,\n };\n }\n\n if (error instanceof Response) {\n return {\n status: \"error\",\n errors: await error.text(),\n };\n }\n\n console.error(error);\n return {\n status: \"error\",\n errors: error instanceof Error ? error.message : JSON.stringify(error),\n };\n }\n};\n" }, { "path": "apps/builder/app/routes/rest.resources-loader.ts", "content": "import { z } from \"zod\";\nimport { type ActionFunctionArgs, data } from \"@remix-run/server-runtime\";\nimport { ResourceRequest } from \"@webstudio-is/sdk\";\nimport { isLocalResource, loadResource } from \"@webstudio-is/sdk/runtime\";\nimport { loader as siteMapLoader } from \"../shared/$resources/sitemap.xml.server\";\nimport { loader as currentDateLoader } from \"../shared/$resources/current-date.server\";\nimport { loader as assetsLoader } from \"../shared/$resources/assets.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { checkCsrf } from \"~/services/csrf-session.server\";\nimport { getResourceKey } from \"~/shared/resources\";\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n preventCrossOriginCookie(request);\n await checkCsrf(request);\n\n // Hope Remix will have customFetch by default, see https://kit.svelte.dev/docs/load#making-fetch-requests\n const customFetch: typeof fetch = (input, init) => {\n if (typeof input !== \"string\") {\n return fetch(input, init);\n }\n\n if (isLocalResource(input, \"sitemap.xml\")) {\n return siteMapLoader({ request });\n }\n\n if (isLocalResource(input, \"current-date\")) {\n return currentDateLoader({ request });\n }\n\n if (isLocalResource(input, \"assets\")) {\n return assetsLoader({ request });\n }\n\n return fetch(input, init);\n };\n\n const requestJson = await request.json();\n const requestList = z.array(z.unknown()).safeParse(requestJson);\n\n if (requestList.success === false) {\n console.error(\"data:\", requestJson);\n throw data(requestList.error, {\n status: 400,\n });\n }\n\n const output = await Promise.all(\n requestList.data.map(async (item) => {\n const resource = ResourceRequest.safeParse(item);\n if (resource.success === false) {\n return [\n getResourceKey(item as ResourceRequest),\n {\n ok: false,\n data: resource.error.format(),\n status: 403,\n statusText: \"Resource validation error\",\n },\n ];\n }\n return [\n getResourceKey(resource.data),\n await loadResource(customFetch, resource.data),\n ];\n })\n );\n\n return output;\n};\n" }, { "path": "apps/builder/app/routes/trpc.$.ts", "content": "import { fetchRequestHandler } from \"@trpc/server/adapters/fetch\";\nimport type { ActionFunctionArgs } from \"@remix-run/server-runtime\";\nimport { createContext } from \"~/shared/context.server\";\nimport { appRouter } from \"~/services/trcp-router.server\";\nimport { preventCrossOriginCookie } from \"~/services/no-cross-origin-cookie\";\nimport { checkCsrf } from \"~/services/csrf-session.server\";\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n preventCrossOriginCookie(request);\n await checkCsrf(request);\n\n // https://trpc.io/docs/server/adapters/fetch\n const response = await fetchRequestHandler({\n req: request,\n router: appRouter,\n endpoint: \"/trpc\",\n batching: { enabled: true },\n responseMeta(opts) {\n // Disable trpc cache\n if (process.env.NODE_ENV !== \"production\") {\n return {};\n }\n\n // tRPC batches multiple requests into a single network call.\n // The `paths` array lists all request paths included in the batch.\n const { paths, errors, type, ctx } = opts;\n\n if (paths === undefined) {\n return {};\n }\n\n if (type !== \"query\") {\n // Only queries can be cached\n return {};\n }\n\n if (errors.length > 0) {\n // Errors should not be cached\n return {};\n }\n\n // To enable efficient batching of tRPC requests,\n // adopt the least max age among all paths for caching, or disable caching entirely if no max-age is set.\n let minMaxAge = Number.MAX_SAFE_INTEGER;\n for (const path of paths) {\n const maxAge = ctx?.trpcCache.getMaxAge(path);\n\n if (maxAge === undefined) {\n return {};\n }\n\n minMaxAge = Math.min(minMaxAge, maxAge);\n }\n\n // Cap the max age at 1 hour\n minMaxAge = Math.min(minMaxAge, 60 * 60);\n\n return {\n headers: {\n \"Cache-Control\": `public, max-age=${minMaxAge}, s-maxage=${minMaxAge}`,\n },\n };\n },\n async createContext(opts) {\n return await createContext(opts.req);\n },\n });\n\n return response;\n};\n\nexport const loader = action;\n" }, { "path": "apps/builder/app/services/auth-strategy/ws.server.ts", "content": "import type { StrategyVerifyCallback } from \"remix-auth\";\nimport {\n OAuth2Strategy,\n type OAuth2Profile,\n type OAuth2StrategyOptions,\n type OAuth2StrategyVerifyParams,\n} from \"remix-auth-oauth2\";\nimport { AsyncLocalStorage } from \"node:async_hooks\";\n\ntype DynamicProps = \"authorizationEndpoint\" | \"tokenEndpoint\" | \"redirectURI\";\n\nexport type OAuth2StrategyOptionsOverrides = Partial &\n Pick;\n\nconst asyncLocalStorage = new AsyncLocalStorage<\n Partial\n>();\n\n/**\n * The main issue with OAuth2Strategy is that it forces us to define authorizationEndpoint, tokenEndpoint, and redirectURI\n * at the time of constructing the instance.\n * However, in our case, these values are dynamic because we use multiple domains, such as development, staging, and production.\n * The solution is to wrap the options object with a proxy, retrieving the necessary options from localAsyncStorage and proxying\n * all requests through asyncLocalStorage.run\n */\nexport class WsStrategy<\n User,\n Profile extends OAuth2Profile = { provider: string },\n ExtraParams extends Record = Record,\n> extends OAuth2Strategy {\n constructor(\n options: OAuth2StrategyOptions,\n verify: StrategyVerifyCallback<\n User,\n OAuth2StrategyVerifyParams\n >,\n overrideOptions: (request: Request) => OAuth2StrategyOptionsOverrides\n ) {\n super(options, verify);\n\n this.options = new Proxy(this.options, {\n get: (target, property, receiver) => {\n const store = asyncLocalStorage.getStore();\n return (\n store?.[property as keyof OAuth2StrategyOptions] ??\n Reflect.get(target, property, receiver)\n );\n },\n });\n\n return new Proxy(this, {\n get: function (target, property, receiver) {\n const targetProp = target[property as keyof typeof target];\n if (\n typeof targetProp === \"function\" &&\n // do not wrap if already wrapped\n asyncLocalStorage.getStore() === undefined\n ) {\n return (...args: unknown[]) => {\n const request = args.find((arg) => arg instanceof Request);\n\n return asyncLocalStorage.run(\n request ? overrideOptions(request) : {},\n () => {\n return Reflect.apply(targetProp, receiver, args);\n }\n );\n };\n }\n\n return Reflect.get(target, property, receiver);\n },\n });\n }\n}\n" }, { "path": "apps/builder/app/services/auth.server.ts", "content": "import { Authenticator } from \"remix-auth\";\nimport { FormStrategy } from \"remix-auth-form\";\nimport { GitHubStrategy, type GitHubProfile } from \"remix-auth-github\";\nimport { GoogleStrategy, type GoogleProfile } from \"remix-auth-google\";\nimport * as db from \"~/shared/db\";\nimport { sessionStorage } from \"~/services/session.server\";\nimport { AUTH_PROVIDERS } from \"~/shared/session\";\nimport { authCallbackPath, isBuilder } from \"~/shared/router-utils\";\nimport { getUserById } from \"~/shared/db/user.server\";\nimport env from \"~/env/env.server\";\nimport { builderAuthenticator } from \"./builder-auth.server\";\nimport { staticEnv } from \"~/env/env.static.server\";\nimport type { SessionData } from \"./auth.server.utils\";\nimport { createContext } from \"~/shared/context.server\";\n\nconst transformRefToAlias = (input: string) => {\n const rawAlias = input.endsWith(\".staging\") ? input.slice(0, -8) : input;\n\n return rawAlias\n .replace(/[^a-zA-Z0-9_-]/g, \"\") // Remove all characters except a-z, A-Z, 0-9, _ and -\n .toLowerCase() // Convert to lowercase\n .replace(/_/g, \"-\") // Replace underscores with hyphens\n .replace(/-+/g, \"-\"); // Replace multiple hyphens with a single hyphen\n};\n\nexport const callbackOrigin =\n env.DEPLOYMENT_ENVIRONMENT === \"production\"\n ? env.DEPLOYMENT_URL\n : env.DEPLOYMENT_ENVIRONMENT === \"staging\" ||\n env.DEPLOYMENT_ENVIRONMENT === \"development\"\n ? `https://${transformRefToAlias(staticEnv.GITHUB_REF_NAME ?? \"main\")}.${env.DEPLOYMENT_ENVIRONMENT}.webstudio.is`\n : `https://wstd.dev:${env.PORT || 5173}`;\n\nconst strategyCallback = async ({\n profile,\n request,\n}: {\n profile: GitHubProfile | GoogleProfile;\n request: Request;\n}) => {\n const context = await createContext(request);\n\n try {\n const user = await db.user.createOrLoginWithOAuth(context, profile);\n return { userId: user.id, createdAt: Date.now() };\n } catch (error) {\n if (error instanceof Error) {\n console.error({\n error,\n extras: {\n loginMethod: AUTH_PROVIDERS.LOGIN_DEV,\n },\n });\n }\n throw error;\n }\n};\n\n// Create an instance of the authenticator, pass a generic with what\n// strategies will return and will store in the session\nexport const authenticator = new Authenticator(sessionStorage, {\n throwOnError: true,\n});\n\nif (env.GH_CLIENT_ID && env.GH_CLIENT_SECRET) {\n const github = new GitHubStrategy(\n {\n clientID: env.GH_CLIENT_ID,\n clientSecret: env.GH_CLIENT_SECRET,\n callbackURL: `${callbackOrigin}${authCallbackPath({ provider: \"github\" })}`,\n },\n strategyCallback\n );\n authenticator.use(github, \"github\");\n}\n\nif (env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET) {\n const google = new GoogleStrategy(\n {\n clientID: env.GOOGLE_CLIENT_ID,\n clientSecret: env.GOOGLE_CLIENT_SECRET,\n callbackURL: `${callbackOrigin}${authCallbackPath({ provider: \"google\" })}`,\n },\n strategyCallback\n );\n authenticator.use(google, \"google\");\n}\n\nif (env.DEV_LOGIN === \"true\") {\n authenticator.use(\n new FormStrategy(async ({ form, request }) => {\n const secretValue = form.get(\"secret\");\n\n if (secretValue == null) {\n throw new Error(\"Secret is required\");\n }\n\n const [secret, email = \"hello@webstudio.is\"] = secretValue\n .toString()\n .split(\":\");\n\n if (secret === env.AUTH_SECRET) {\n try {\n const context = await createContext(request);\n\n const user = await db.user.createOrLoginWithDev(context, email);\n return {\n userId: user.id,\n createdAt: Date.now(),\n };\n } catch (error) {\n if (error instanceof Error) {\n console.error({\n error,\n extras: {\n loginMethod: AUTH_PROVIDERS.LOGIN_DEV,\n },\n });\n }\n throw error;\n }\n }\n\n throw new Error(\"Secret is incorrect\");\n }),\n \"dev\"\n );\n}\n\nexport const findAuthenticatedUser = async (request: Request) => {\n const user = isBuilder(request)\n ? await builderAuthenticator.isAuthenticated(request)\n : await authenticator.isAuthenticated(request);\n\n if (user == null) {\n return null;\n }\n const context = await createContext(request);\n\n try {\n return await getUserById(context, user.userId);\n } catch (error) {\n return null;\n }\n};\n" }, { "path": "apps/builder/app/services/auth.server.utils.ts", "content": "export type SessionData = {\n userId: string;\n createdAt: number;\n};\n\nexport const getSessionCookieNameVersion = () => {\n // IMPORTANT: If you see an error here, you need to increase the version number.\n // Explanation:\n // Changing the SessionData type will cause all existing user sessions to not work as expected.\n // There is no logic to validate or clean up sessions, so we avoid session migration issues by changing the session cookie name.\n // This ensures that old sessions are invalidated and new sessions are created with the updated structure.\n const obj: SessionData = { userId: \"\", createdAt: 0 };\n obj.userId = \"\";\n\n // IMPORTANT: Change version in the SaaS platform as well!\n // IMPORTANT: Changing the version will cause all users to be logged out.\n return \"3\";\n};\n" }, { "path": "apps/builder/app/services/bloom-filter.server.test.ts", "content": "import { test, expect, describe, beforeEach } from \"vitest\";\nimport { BloomFilter } from \"./bloom-filter.server\";\n\ndescribe(\"BloomFilter add/has\", () => {\n let bloomFilter: BloomFilter;\n\n beforeEach(() => {\n bloomFilter = new BloomFilter(100, 0.01);\n });\n\n test(\"should initialize correctly\", () => {\n expect(bloomFilter.numHashes).toBeGreaterThan(0);\n expect(bloomFilter.bitArray.length).toBeGreaterThan(0);\n });\n\n test(\"should add an item and check its existence\", () => {\n const item = \"test-item\";\n bloomFilter.add(item);\n const hasItem = bloomFilter.has(item);\n expect(hasItem).toBe(true);\n });\n\n test(\"should return false for non-existent items\", () => {\n const item = \"non-existent-item\";\n const hasItem = bloomFilter.has(item);\n expect(hasItem).toBe(false);\n });\n\n test(\"should handle adding the same item multiple times\", () => {\n const item = \"duplicate-item\";\n bloomFilter.add(item);\n bloomFilter.add(item);\n const hasItem = bloomFilter.has(item);\n expect(hasItem).toBe(true);\n });\n\n test(\"should handle multiple items\", () => {\n const items = [\"item1\", \"item2\", \"item3\"];\n for (const item of items) {\n bloomFilter.add(item);\n }\n\n for (const item of items) {\n const hasItem = bloomFilter.has(item);\n expect(hasItem).toBe(true);\n }\n\n const notExistedItems = [\"na-item1\", \"na-item2\", \"na-item3\"];\n for (const item of notExistedItems) {\n const hasItem = bloomFilter.has(item);\n expect(hasItem).toBe(false);\n }\n });\n});\n\ndescribe(\"BloomFilter serialize/deserialize\", () => {\n let bloomFilter: BloomFilter;\n\n beforeEach(() => {\n bloomFilter = new BloomFilter(100, 0.01);\n });\n\n test(\"should serialize and deserialize correctly\", () => {\n const items = [\"item1\", \"item2\", \"item3\", \"item4\", \"item5\"];\n\n for (const item of items) {\n bloomFilter.add(item);\n }\n\n const serialized = bloomFilter.serialize();\n const deserialized = BloomFilter.deserialize(serialized);\n\n expect(deserialized.numHashes).toBe(bloomFilter.numHashes);\n expect(deserialized.bitArray).toEqual(bloomFilter.bitArray);\n });\n});\n\ndescribe(\"BloomFilter size\", () => {\n test(\"Visual test bloom filter size\", () => {\n const bloomFilter = new BloomFilter(100, 0.02);\n for (let i = 0; i < 20; i++) {\n bloomFilter.add(i.toString());\n }\n\n const serialized = bloomFilter.serialize();\n expect(serialized).toMatchInlineSnapshot(\n `\"AAABKACCAIQICCAAFFIAEUAEKANBBoAJEAGAAAGAgIgAAIGCAIwCAABBIAgEgBBAAIAAUEAAQRAAiCAAEgAAEggAEkMgEAECAAjAAABighAAgEoAEEDEJGAgQAABATgIAEAQCAAQBg\"`\n );\n });\n\n test(\"Visual test bloom filter size\", () => {\n const bloomFilter = new BloomFilter(50, 0.02);\n for (let i = 0; i < 20; i++) {\n bloomFilter.add(i.toString());\n }\n\n const serialized = bloomFilter.serialize();\n expect(serialized).toMatchInlineSnapshot(\n `\"UEABaRCCiKQIGiAAFloAE0MkOANDBojJEAHighGAgMoAEMHGJOwiQABBITgMgFBQCIAQBg\"`\n );\n });\n});\n\ndescribe(\"real life test\", () => {\n test.each([50, 100])(\"should work with real life data\", (maxItems) => {\n const falsePositiveProbability = 0.02;\n\n const bloomFilter = new BloomFilter(maxItems, falsePositiveProbability);\n\n // Fill with maxItems with 2/3\n const uuids = Array.from(Array(Math.ceil((maxItems * 2) / 3)), () =>\n crypto.randomUUID()\n );\n for (const uuid of uuids) {\n bloomFilter.add(uuid);\n }\n\n for (const uuid of uuids) {\n expect(bloomFilter.has(uuid)).toBe(true);\n }\n\n let falsePositives = 0;\n\n const notInSetCount = 1000;\n\n const notInSetUuid = Array.from(Array(notInSetCount), () =>\n crypto.randomUUID()\n );\n\n for (const uuid of notInSetUuid) {\n const isInSet = bloomFilter.has(uuid);\n falsePositives += isInSet ? 1 : 0;\n }\n\n /*\n // Uncomment to play with parameters\n console.info(\n \"False positives\",\n falsePositives,\n \"of\",\n notInSetUuid.length,\n bloomFilter.serialize().length\n );\n */\n\n expect(falsePositives).toBeLessThan(\n notInSetCount * falsePositiveProbability\n );\n });\n});\n" }, { "path": "apps/builder/app/services/bloom-filter.server.ts", "content": "const fnv1a = (input: string): number => {\n const prime = 0x01000193;\n let hash = 0x811c9dc5;\n\n for (let i = 0; i < input.length; i++) {\n hash ^= input.charCodeAt(i);\n hash = Math.imul(hash, prime);\n }\n\n return hash >>> 0; // Convert to 32-bit unsigned integer\n};\n\nconst getBit = (arr: Uint8Array, i: number) => (arr[i >> 3] >> (i & 7)) & 1;\n\nconst setBit = (arr: Uint8Array, i: number) => {\n arr[i >> 3] = arr[i >> 3] | (1 << (i & 7));\n};\n\nexport class BloomFilter {\n numHashes: number;\n bitArray: Uint8Array;\n\n constructor(maxItems: number, falsePositiveProbability: number) {\n if (maxItems === 0) {\n this.numHashes = 0;\n this.bitArray = new Uint8Array(0);\n return;\n }\n\n const bitSize = Math.ceil(\n (maxItems * Math.log(falsePositiveProbability)) /\n Math.log(1 / Math.pow(2, Math.log(2)))\n );\n\n this.numHashes = Math.round((bitSize / maxItems) * Math.log(2));\n\n const size = Math.ceil(bitSize / 8);\n\n this.bitArray = new Uint8Array(size);\n }\n\n add(item: string) {\n const hashes = this.#getHashes(item);\n const size = this.bitArray.length * 8;\n\n for (const hash of hashes) {\n setBit(this.bitArray, hash % size);\n }\n }\n\n has(item: string) {\n const hashes = this.#getHashes(item);\n const size = this.bitArray.length * 8;\n\n return hashes.every((hash) => getBit(this.bitArray, hash % size) === 1);\n }\n\n #getHashes(item: string): number[] {\n const hashes: number[] = [];\n let value = item;\n for (let i = 0; i < this.numHashes; i++) {\n const hashValue = fnv1a(value);\n value = hashValue.toString();\n\n hashes.push(hashValue);\n }\n\n return hashes;\n }\n\n serialize(): string {\n return Buffer.concat([\n Buffer.from(this.bitArray),\n Buffer.from([this.numHashes]),\n ]).toString(\"base64url\");\n }\n\n static deserialize(serialized: string): BloomFilter {\n const buffer = Buffer.from(serialized, \"base64url\");\n const numHashes = buffer[buffer.length - 1];\n const bitArray = buffer.subarray(0, buffer.length - 1);\n\n const filter = new BloomFilter(0, 0);\n filter.numHashes = numHashes;\n filter.bitArray = new Uint8Array(bitArray);\n\n return filter;\n }\n}\n" }, { "path": "apps/builder/app/services/builder-access.server.ts", "content": "import { authorizeProject } from \"@webstudio-is/trpc-interface/index.server\";\nimport { createPostgrestContext } from \"~/shared/context.server\";\n\n/**\n * Check if a user is authorized to access a project during the Builder authentication process.\n */\nexport const isUserAuthorizedForProject = async (\n userId: string,\n projectId: string\n) => {\n const postgrestContext = createPostgrestContext();\n\n // Only the project owner can access the Builder URL with authentication credentials (session).\n const isProjectOwner = await authorizeProject.checkProjectPermit(\n projectId,\n \"own\",\n { type: \"user\", userId },\n postgrestContext.client\n );\n\n return isProjectOwner;\n};\n" }, { "path": "apps/builder/app/services/builder-auth.server.ts", "content": "import { Authenticator, AuthorizationError } from \"remix-auth\";\nimport { builderSessionStorage } from \"./builder-session.server\";\nimport env from \"~/env/env.server\";\n\nimport {\n type OAuth2StrategyOptionsOverrides,\n WsStrategy,\n} from \"./auth-strategy/ws.server\";\nimport {\n getAuthorizationServerOrigin,\n getRequestOrigin,\n} from \"~/shared/router-utils/origins\";\nimport { parseBuilderUrl } from \"@webstudio-is/http-client\";\nimport { createDebug } from \"~/shared/debug\";\nimport { readAccessToken } from \"./token.server\";\nimport { isUserAuthorizedForProject } from \"./builder-access.server\";\nimport type { SessionData } from \"./auth.server.utils\";\n\nconst debug = createDebug(import.meta.url);\n\nexport const builderAuthenticator = new Authenticator(\n builderSessionStorage,\n {\n throwOnError: true,\n }\n);\n\nbuilderAuthenticator.use(\n new WsStrategy(\n {\n clientId: env.AUTH_WS_CLIENT_ID,\n clientSecret: env.AUTH_WS_CLIENT_SECRET,\n authorizationEndpoint: \"https://OVERRIDDEN_ENDPOINT/oauth2/authorize\",\n tokenEndpoint: \"https://OVERRIDDEN_ENDPOINT/oauth2/token\",\n redirectURI: \"https://OVERRIDDEN_ENDPOINT/auth/callback\",\n codeChallengeMethod: \"S256\",\n // use http_basic_auth to bypass no-cross-origin-cookie.ts/preventCrossOriginCookie\n authenticateWith: \"http_basic_auth\",\n },\n async ({ tokens, request }) => {\n const accessToken = await readAccessToken(\n tokens.access_token,\n env.AUTH_WS_CLIENT_SECRET\n );\n\n if (accessToken === undefined) {\n debug(\"Invalid or expired access token\", tokens.access_token);\n\n throw new AuthorizationError(\"Invalid or expired access token\");\n }\n\n const { projectId } = parseBuilderUrl(request.url);\n\n if (accessToken.projectId !== projectId) {\n throw new AuthorizationError(\n \"Token projectId and request projectId do not match\"\n );\n }\n\n const isAuthorized = await isUserAuthorizedForProject(\n accessToken.userId,\n projectId\n );\n\n // We don't need this check because the token is already verified, anyway let's keep it for now\n if (false === isAuthorized) {\n throw new AuthorizationError(\n \"User does not have access to this project\"\n );\n }\n\n debug(\"User authenticated\", accessToken.userId);\n\n return await { userId: accessToken.userId, createdAt: Date.now() };\n },\n (request: Request): OAuth2StrategyOptionsOverrides => {\n const origin = getRequestOrigin(request.url);\n const authOrigin = getAuthorizationServerOrigin(request.url);\n const { projectId } = parseBuilderUrl(request.url);\n\n if (origin === authOrigin) {\n throw new Error(\"Origin and authOrigin cannot be same\");\n }\n\n return {\n authorizationEndpoint: `${authOrigin}/oauth/ws/authorize`,\n tokenEndpoint: `${authOrigin}/oauth/ws/token`,\n redirectURI: `${origin}/auth/ws/callback`,\n scopes: [`project:${projectId}`],\n };\n }\n ),\n \"ws\"\n);\n" }, { "path": "apps/builder/app/services/builder-session.server.ts", "content": "import { createCookieSessionStorage } from \"@remix-run/node\";\nimport env from \"~/env/env.server\";\nimport { getSessionCookieNameVersion } from \"./auth.server.utils\";\n\nexport const builderSessionStorage = createCookieSessionStorage({\n cookie: {\n // Using the __Host- prefix to prevent a malicious user from setting another person's session cookie\n // on all subdomains of apps.webstudio.is, e.g., setting Domain=.apps.webstudio.is.\n // For more information, see: https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name\n name: `__Host-_session_builder_session_${getSessionCookieNameVersion()}`,\n sameSite: \"lax\",\n path: \"/\",\n httpOnly: true,\n secrets: env.AUTH_SECRET ? [env.AUTH_SECRET] : undefined,\n secure: true,\n },\n});\n" }, { "path": "apps/builder/app/services/cookie.server.ts", "content": "import { createCookie } from \"@remix-run/node\";\nimport { compareUrls } from \"~/shared/router-utils\";\n\n// https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name\nexport const returnToCookie = createCookie(\"__Host-_returnTo\", {\n path: \"/\",\n httpOnly: true,\n sameSite: \"lax\",\n // Set the expiration to 5 minutes as it is unnecessary to retain the cookie for a longer duration.\n maxAge: 60 * 5,\n secure: true,\n});\n\nexport const returnToPath = async (\n request: Request\n): Promise => {\n const returnTo = await returnToCookie.parse(request.headers.get(\"Cookie\"));\n\n if (returnTo === null || typeof returnTo === \"string\") {\n return returnTo;\n }\n return null;\n};\n\nexport const isRedirectResponse = (response: Response) => {\n return (\n response.status >= 300 &&\n response.status < 400 &&\n response.headers.get(\"Location\") !== null\n );\n};\n\nexport const clearReturnToCookie = async (\n request: Request,\n response: Response\n) => {\n const returnTo = await returnToPath(request);\n\n if (returnTo === null) {\n return response;\n }\n\n if (false === isRedirectResponse(response)) {\n return response;\n }\n\n if (false === compareUrls(returnTo, response.headers.get(\"Location\")!)) {\n return response;\n }\n\n const resultResponse = new Response(response.body, response);\n resultResponse.headers.append(\n \"Set-Cookie\",\n await returnToCookie.serialize(null, { maxAge: -1 })\n );\n return resultResponse;\n};\n" }, { "path": "apps/builder/app/services/csrf-session.server.ts", "content": "import { createCookieSessionStorage } from \"@remix-run/node\";\nimport env from \"~/env/env.server\";\nimport { extractAuthFromRequest } from \"~/shared/context.server\";\nimport { allowedDestinations } from \"./destinations.server\";\n\ntype CsrfSessionData = {\n hash: string;\n token: string;\n};\n\nconst getCsrfSessionCookieNameVersion = () => {\n // IMPORTANT: If you see an error here, you need to increase the version number.\n // Explanation:\n // Changing the CsrfSessionData type will cause all existing user sessions to not work as expected.\n // There is no logic to validate or clean up sessions, so we avoid session migration issues by changing the session cookie name.\n // This ensures that old sessions are invalidated and new sessions are created with the updated structure.\n const obj: CsrfSessionData = { token: \"\", hash: \"\" };\n obj.hash = \"\";\n\n // IMPORTANT: Change version in the SaaS platform as well!\n // IMPORTANT: Changing the version will cause all users to be logged out.\n return \"1\";\n};\n\nconst csrfSessionStorage = createCookieSessionStorage({\n cookie: {\n // Using the __Host- prefix to prevent a malicious user from setting another person's session cookie\n // on all subdomains of apps.webstudio.is, e.g., setting Domain=.apps.webstudio.is.\n // For more information, see: https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name\n name: `__Host-_csrf_${getCsrfSessionCookieNameVersion()}`,\n sameSite: \"lax\",\n path: \"/\",\n httpOnly: true,\n secrets: env.AUTH_WS_CLIENT_SECRET\n ? [env.AUTH_WS_CLIENT_SECRET]\n : undefined,\n secure: true,\n },\n});\n\nconst toBase64Url = (buffer: ArrayBuffer | ArrayBufferView) => {\n return Buffer.from(\n buffer instanceof ArrayBuffer ? buffer : buffer.buffer\n ).toString(\"base64url\");\n};\n\nexport const getRequestAuthHash = async (request: Request) => {\n const data = await extractAuthFromRequest(request);\n\n if (data.isServiceCall) {\n throw new Error(\"Service calls are not allowed to use CSRF tokens.\");\n }\n\n // Because of cookie session we don't have session id in the request, so we derive it from the auth credentials data.\n const sessionId = data.authToken ?? data.sessionData?.userId ?? \"anonymous\";\n\n const encoder = new TextEncoder();\n const dataBuffer = encoder.encode(sessionId);\n const hashBuffer = await crypto.subtle.digest(\"SHA-256\", dataBuffer);\n return toBase64Url(hashBuffer.slice(0, 16));\n};\n\n/**\n * We use a hash to ensure that any change in authentication credentials also changes the CSRF token.\n *\n * If setCookieValue is defined, it means that we need to set the cookie.\n */\nexport const getCsrfTokenAndCookie = async (\n request: Request\n): Promise<[csrfToken: string, setCookieValue: string | undefined]> => {\n const hash = await getRequestAuthHash(request);\n\n const csrfSession = await csrfSessionStorage.getSession(\n request.headers.get(\"Cookie\")\n );\n\n let sessionCreateCookieValue: string | undefined = undefined;\n\n if (csrfSession.get(\"hash\") !== hash) {\n const csrfTokenLength = 16;\n const array = new Uint8Array(csrfTokenLength);\n crypto.getRandomValues(array);\n const token = toBase64Url(array);\n\n csrfSession.set(\"hash\", hash);\n csrfSession.set(\"token\", token);\n sessionCreateCookieValue =\n await csrfSessionStorage.commitSession(csrfSession);\n }\n\n return [csrfSession.get(\"token\"), sessionCreateCookieValue];\n};\n\nexport const checkCsrf = async (request: Request) => {\n if (\n request.headers.get(\"sec-fetch-mode\") === \"navigate\" &&\n request.method === \"GET\"\n ) {\n // Do not check CSRF for GET navigation requests to allow logged-in users to view the data.\n // However, prevent loading the data from an iframe.\n allowedDestinations(request, [\"document\"]);\n return;\n }\n\n const [token, setCookieValue] = await getCsrfTokenAndCookie(request);\n\n if (setCookieValue) {\n throw new Response(\n \"Authentication credentials have changed. Please reload and try again.\",\n {\n status: 403,\n statusText:\n \"Authentication credentials have changed. Please reload and try again.\",\n }\n );\n }\n\n const csrfToken = request.headers.get(\"X-CSRF-Token\");\n\n if (token !== csrfToken) {\n throw new Response(\n `Forbidden: \"The CSRF token is invalid. Please reload and try again.`,\n {\n status: 403,\n statusText: `Forbidden: \"The CSRF token is invalid. Please reload and try again.`,\n }\n );\n }\n};\n" }, { "path": "apps/builder/app/services/destinations.server.ts", "content": "type Destinations = RequestDestination | \"empty\";\n\n/**\n * Prevent loaders of iframe injections like `