[ { "path": ".dockerignore", "content": "node_modules\n.git\n.devcontainer\n*.md\n.env\ndiagrams\ne2e-tests\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: st_nsmith\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\nlfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry\npolar: # Replace with a single Polar username\nbuy_me_a_coffee: stan.smith\nthanks_dev: # Replace with a single thanks.dev username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.yml", "content": "name: 🐛 Bug Report\ndescription: Something isn't working as expected. Please provide enough detail that I can actually reproduce it.\ntitle: \"Bug: \"\nlabels: [\"bug\"]\nbody:\n - type: markdown\n attributes:\n value: |\n Thanks for taking the time to report a bug. Please fill in **all** the required fields below.\n Issues missing required information will be closed without comment.\n\n - type: checkboxes\n id: existing-issues\n attributes:\n label: Pre-flight checks\n description: Please confirm the following before submitting.\n options:\n - label: I have searched existing issues and this hasn't been reported before\n required: true\n - label: I am running the latest version of FossFLOW\n required: true\n - label: I have read the README and checked if this is expected behaviour\n required: true\n\n - type: dropdown\n id: deployment\n attributes:\n label: Deployment method\n description: How are you running FossFLOW?\n options:\n - Docker (docker run)\n - Docker Compose\n - Built from source (npm run dev)\n - Built from source (npm run build)\n - Online demo\n default: 0\n validations:\n required: true\n\n - type: input\n id: version\n attributes:\n label: FossFLOW version / Docker image tag\n description: \"e.g. latest, v1.2.0, commit hash\"\n placeholder: \"latest\"\n validations:\n required: true\n\n - type: input\n id: browser\n attributes:\n label: Browser and version\n description: \"e.g. Chrome 131, Firefox 134, Safari 18.2\"\n placeholder: \"Chrome 131\"\n validations:\n required: true\n\n - type: input\n id: os\n attributes:\n label: Operating system\n placeholder: \"e.g. macOS 15.2, Windows 11, Ubuntu 24.04\"\n validations:\n required: true\n\n - type: textarea\n id: description\n attributes:\n label: What happened?\n description: A clear description of the bug. What did you expect to happen vs what actually happened?\n placeholder: |\n Expected: ...\n Actual: ...\n validations:\n required: true\n\n - type: textarea\n id: reproduce\n attributes:\n label: Steps to reproduce\n description: Minimum steps to reproduce the issue. If I can't reproduce it, I can't fix it.\n placeholder: |\n 1. Open FossFLOW\n 2. Click on '...'\n 3. Observe '...'\n validations:\n required: true\n\n - type: textarea\n id: screenshots\n attributes:\n label: Screenshots / screen recordings\n description: If applicable, add screenshots or a screen recording. Drag and drop images here.\n validations:\n required: false\n\n - type: textarea\n id: logs\n attributes:\n label: Browser console output / Docker logs\n description: Open browser DevTools (F12) → Console tab, or run `docker logs `. Paste any errors here.\n render: shell\n validations:\n required: false\n\n - type: textarea\n id: diagram-json\n attributes:\n label: Diagram JSON (if relevant)\n description: Export your diagram and paste the JSON here if the bug is diagram-specific. Remove anything sensitive first.\n render: json\n validations:\n required: false\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: 💬 General Discussion\n url: https://github.com/stan-smith/FossFLOW/discussions\n about: Got a question, idea, or just want to chat? Start a discussion instead of an issue.\n - name: 📖 README & Documentation\n url: https://github.com/stan-smith/FossFLOW#readme\n about: Please check the docs before opening an issue - your answer might already be there.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.yml", "content": "name: 💡 Feature Request\ndescription: Suggest a new feature or improvement. Please check the project scope first.\ntitle: \"Feature: \"\nlabels: [\"enhancement\"]\nbody:\n - type: markdown\n attributes:\n value: |\n Thanks for the suggestion! Before submitting, please understand that FossFLOW is a **simple, privacy-first diagramming tool**. \n \n The following are **out of scope** and will be closed immediately:\n - Authentication, RBAC, OIDC, or multi-tenancy\n - User accounts or team management\n - Cloud hosting or SaaS features\n - Anything that fundamentally changes what FossFLOW is\n \n If you're unsure whether your idea fits, open a [Discussion](https://github.com/stan-smith/FossFLOW/discussions) first.\n\n - type: checkboxes\n id: preflight\n attributes:\n label: Pre-flight checks\n options:\n - label: I have searched existing issues and feature requests for duplicates\n required: true\n - label: This feature is within the scope described above\n required: true\n - label: I have checked [Discussions](https://github.com/stan-smith/FossFLOW/discussions) for related topics\n required: true\n\n - type: textarea\n id: problem\n attributes:\n label: What problem does this solve?\n description: Describe the problem or limitation you're experiencing. Focus on the *problem*, not the solution.\n placeholder: \"I'm trying to do X but currently I have to...\"\n validations:\n required: true\n\n - type: textarea\n id: solution\n attributes:\n label: Proposed solution\n description: How do you think this could be solved? Be specific.\n validations:\n required: true\n\n - type: textarea\n id: alternatives\n attributes:\n label: Alternatives you've considered\n description: What other approaches have you tried or thought about?\n validations:\n required: true\n\n - type: dropdown\n id: contribution\n attributes:\n label: Are you willing to work on this?\n description: Would you be prepared to submit a PR for this feature?\n options:\n - \"Yes - I'd like to implement this myself\"\n - \"Partially - I could help but would need guidance\"\n - \"No - I'm suggesting it for someone else to build\"\n default: 2\n validations:\n required: true\n\n - type: textarea\n id: context\n attributes:\n label: Additional context\n description: Screenshots, mockups, examples from other tools, etc.\n validations:\n required: false\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "## What does this PR do?\n\n\n\nFixes #\n\n## Type of change\n\n- [ ] Bug fix\n- [ ] New feature\n- [ ] Refactor (no functional change)\n- [ ] Documentation update\n\n## Checklist\n\n- [ ] I have read [CONTRIBUTING.md](CONTRIBUTING.md)\n- [ ] I have tested these changes locally and they work\n- [ ] I can explain every line of code in this PR if asked\n- [ ] This PR does not contain AI-generated code that I haven't personally reviewed, understood, and tested\n- [ ] I have not added any unnecessary comments, logging, or dead code\n- [ ] My code follows the existing style and conventions of the project\n- [ ] I have updated documentation if applicable\n\n## How to test\n\n\n\n1. \n2. \n3. \n\n## Screenshots (if UI change)\n\n\n" }, { "path": ".github/dependabot.yml", "content": "version: 2\nupdates:\n - package-ecosystem: \"npm\"\n directory: \"/\"\n schedule:\n interval: \"weekly\"\n open-pull-requests-limit: 10\n commit-message:\n prefix: \"chore(deps)\"\n groups:\n minor-and-patch:\n update-types:\n - \"minor\"\n - \"patch\"\n\n - package-ecosystem: \"github-actions\"\n directory: \"/\"\n schedule:\n interval: \"weekly\"\n open-pull-requests-limit: 5\n commit-message:\n prefix: \"ci(deps)\"\n" }, { "path": ".github/workflows/dependabot-automerge.yml", "content": "name: Dependabot Auto-Merge\n\non:\n pull_request:\n\npermissions:\n contents: write\n pull-requests: write\n\njobs:\n automerge:\n runs-on: ubuntu-latest\n if: github.actor == 'dependabot[bot]'\n\n steps:\n - name: Fetch Dependabot metadata\n id: metadata\n uses: dependabot/fetch-metadata@v2\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n\n - name: Enable auto-merge for minor and patch updates\n if: steps.metadata.outputs.update-type != 'version-update:semver-major'\n run: gh pr merge --auto --squash \"$PR_URL\"\n env:\n PR_URL: ${{ github.event.pull_request.html_url }}\n GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".github/workflows/docker.yml", "content": "name: Build and Push Docker Image\n\non:\n workflow_run:\n workflows: [\"E2E Tests\"]\n types:\n - completed\n branches: [\"main\", \"master\"]\n\njobs:\n build-and-push:\n runs-on: ubuntu-latest\n if: ${{ github.event.workflow_run.conclusion == 'success' }}\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v6\n\n - name: Set up QEMU\n uses: docker/setup-qemu-action@v4\n\n - name: Set up Docker Buildx\n uses: docker/setup-buildx-action@v4\n\n - name: Log in to Docker Hub\n uses: docker/login-action@v4\n with:\n username: stnsmith\n password: ${{ secrets.DOCKERHUB_TOKEN }}\n\n - name: Extract metadata\n id: meta\n uses: docker/metadata-action@v6\n with:\n images: stnsmith/fossflow\n tags: |\n type=semver,pattern={{version}},enable=${{ github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}\n type=semver,pattern={{major}}.{{minor}},enable=${{ github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}\n type=semver,pattern={{major}},enable=${{ github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}\n type=ref,event=branch,enable=${{ github.event_name != 'push' || !startsWith(github.ref, 'refs/tags/v') }}\n type=sha,prefix={{branch}}-,enable=${{ github.event_name != 'push' || !startsWith(github.ref, 'refs/tags/v') }}\n type=raw,value=latest,enable={{is_default_branch}}\n - name: Build and push Docker image\n uses: docker/build-push-action@v7\n with:\n context: .\n file: ./Dockerfile\n platforms: linux/amd64,linux/arm64\n push: ${{ github.event_name != 'pull_request' }}\n tags: ${{ steps.meta.outputs.tags }}\n labels: ${{ steps.meta.outputs.labels }}\n cache-from: type=gha\n cache-to: type=gha,mode=max\n progress: plain\n" }, { "path": ".github/workflows/e2e-tests.yml", "content": "name: E2E Tests\n\non:\n # Runs on PRs so we can gate merges on E2E results\n pull_request:\n branches: [\"main\", \"master\"]\n # Runs after unit tests complete successfully on push\n workflow_run:\n workflows: [\"Run Tests\"]\n types:\n - completed\n branches: [\"main\", \"master\"]\n\njobs:\n e2e-tests:\n runs-on: ubuntu-latest\n if: ${{ github.event_name == 'pull_request' || github.event.workflow_run.conclusion == 'success' }}\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v6\n\n - name: Setup Node.js\n uses: actions/setup-node@v6\n with:\n node-version: '22.x'\n cache: 'npm'\n\n - name: Setup Python\n uses: actions/setup-python@v6\n with:\n python-version: '3.11'\n cache: 'pip'\n cache-dependency-path: 'e2e-tests/requirements.txt'\n\n - name: Install Node dependencies\n run: npm ci\n\n - name: Install Python dependencies\n run: |\n cd e2e-tests\n pip install -r requirements.txt\n\n - name: Build FossFLOW library\n run: npm run build:lib\n\n - name: Build FossFLOW app\n run: npm run build:app\n\n - name: Install serve globally\n run: npm install -g serve\n\n - name: Start Selenium Chrome in background\n run: |\n docker run -d \\\n --name selenium-chrome \\\n --network host \\\n --shm-size=2g \\\n selenium/standalone-chrome:latest\n\n echo \"Waiting for Selenium to be ready...\"\n timeout 60 bash -c 'until curl -sf http://localhost:4444/status; do sleep 2; done' || {\n echo \"Selenium failed to start\"\n docker logs selenium-chrome\n exit 1\n }\n echo \"Selenium is ready\"\n curl -s http://localhost:4444/status | jq '.' || true\n\n - name: Start FossFLOW server in background\n run: |\n cd packages/fossflow-app/build\n nohup serve -s . -l 3000 > /tmp/server.log 2>&1 &\n echo $! > /tmp/server.pid\n echo \"Server PID: $(cat /tmp/server.pid)\"\n echo \"Waiting for server to start...\"\n timeout 60 bash -c 'until curl -sf http://localhost:3000; do sleep 2; done' || {\n echo \"Server failed to start\"\n echo \"Server logs:\"\n cat /tmp/server.log\n kill $(cat /tmp/server.pid) 2>/dev/null || true\n exit 1\n }\n echo \"Server is ready\"\n echo \"Server PID saved to /tmp/server.pid\"\n env:\n CI: true\n\n - name: Verify connectivity before tests\n run: |\n echo \"Testing app connectivity...\"\n curl -sf http://localhost:3000 || echo \"App not accessible\"\n echo \"Testing Selenium connectivity...\"\n curl -sf http://localhost:4444/status || echo \"Selenium not accessible\"\n\n - name: Run E2E tests\n run: |\n cd e2e-tests\n pytest -v --tb=short\n env:\n FOSSFLOW_TEST_URL: http://localhost:3000\n WEBDRIVER_URL: http://localhost:4444\n\n - name: Stop Selenium and FossFLOW server\n if: always()\n run: |\n echo \"Stopping Selenium container...\"\n docker stop selenium-chrome 2>/dev/null || true\n docker rm selenium-chrome 2>/dev/null || true\n\n if [ -f /tmp/server.pid ]; then\n echo \"Stopping server (PID: $(cat /tmp/server.pid))\"\n kill $(cat /tmp/server.pid) 2>/dev/null || true\n echo \"Server logs:\"\n cat /tmp/server.log || true\n fi\n\n - name: Upload test results\n if: always()\n uses: actions/upload-artifact@v7\n with:\n name: e2e-test-results\n path: e2e-tests/target/\n if-no-files-found: ignore\n retention-days: 7\n" }, { "path": ".github/workflows/e2e-tests.yml.backup", "content": "name: E2E Tests\n\non:\n # Runs after unit tests complete successfully\n workflow_run:\n workflows: [\"Run Tests\"]\n types:\n - completed\n branches: [\"main\", \"master\"]\n\njobs:\n e2e-tests:\n runs-on: ubuntu-latest\n if: ${{ github.event.workflow_run.conclusion == 'success' }}\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v4\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: '20.x'\n cache: 'npm'\n\n - name: Setup Python\n uses: actions/setup-python@v5\n with:\n python-version: '3.11'\n cache: 'pip'\n cache-dependency-path: 'e2e-tests/requirements.txt'\n\n - name: Install Node dependencies\n run: npm ci\n\n - name: Install Python dependencies\n run: |\n cd e2e-tests\n pip install -r requirements.txt\n\n - name: Build FossFLOW library\n run: npm run build:lib\n\n - name: Build FossFLOW app\n run: npm run build:app\n\n - name: Install serve globally\n run: npm install -g serve\n\n - name: Start Selenium Chrome in background\n run: |\n docker run -d \\\n --name selenium-chrome \\\n --network host \\\n --shm-size=2g \\\n selenium/standalone-chrome:latest\n\n echo \"Waiting for Selenium to be ready...\"\n timeout 60 bash -c 'until curl -sf http://localhost:4444/status; do sleep 2; done' || {\n echo \"Selenium failed to start\"\n docker logs selenium-chrome\n exit 1\n }\n echo \"Selenium is ready\"\n curl -s http://localhost:4444/status | jq '.' || true\n\n - name: Start FossFLOW server in background\n run: |\n cd packages/fossflow-app/build\n nohup serve -s . -l 3000 > /tmp/server.log 2>&1 &\n echo $! > /tmp/server.pid\n echo \"Server PID: $(cat /tmp/server.pid)\"\n echo \"Waiting for server to start...\"\n timeout 60 bash -c 'until curl -sf http://localhost:3000; do sleep 2; done' || {\n echo \"Server failed to start\"\n echo \"Server logs:\"\n cat /tmp/server.log\n kill $(cat /tmp/server.pid) 2>/dev/null || true\n exit 1\n }\n echo \"Server is ready\"\n echo \"Server PID saved to /tmp/server.pid\"\n env:\n CI: true\n\n - name: Verify connectivity before tests\n run: |\n echo \"Testing app connectivity...\"\n curl -sf http://localhost:3000 || echo \"App not accessible\"\n echo \"Testing Selenium connectivity...\"\n curl -sf http://localhost:4444/status || echo \"Selenium not accessible\"\n\n - name: Run E2E tests\n run: |\n cd e2e-tests\n pytest -v --tb=short\n env:\n FOSSFLOW_TEST_URL: http://localhost:3000\n WEBDRIVER_URL: http://localhost:4444\n\n - name: Stop Selenium and FossFLOW server\n if: always()\n run: |\n echo \"Stopping Selenium container...\"\n docker stop selenium-chrome 2>/dev/null || true\n docker rm selenium-chrome 2>/dev/null || true\n\n if [ -f /tmp/server.pid ]; then\n echo \"Stopping server (PID: $(cat /tmp/server.pid))\"\n kill $(cat /tmp/server.pid) 2>/dev/null || true\n echo \"Server logs:\"\n cat /tmp/server.log || true\n fi\n\n - name: Upload test results\n if: always()\n uses: actions/upload-artifact@v4\n with:\n name: e2e-test-results\n path: e2e-tests/target/\n if-no-files-found: ignore\n retention-days: 7\n" }, { "path": ".github/workflows/ethicalcheck.yml", "content": "# This workflow uses actions that are not certified by GitHub.\n# They are provided by a third-party and are governed by\n# separate terms of service, privacy policy, and support\n# documentation.\n\n# EthicalCheck addresses the critical need to continuously security test APIs in development and in production.\n\n# EthicalCheck provides the industry’s only free & automated API security testing service that uncovers security vulnerabilities using OWASP API list.\n# Developers relies on EthicalCheck to evaluate every update and release, ensuring that no APIs go to production with exploitable vulnerabilities.\n\n# You develop the application and API, we bring complete and continuous security testing to you, accelerating development.\n\n# Know your API and Applications are secure with EthicalCheck – our free & automated API security testing service.\n\n# How EthicalCheck works?\n# EthicalCheck functions in the following simple steps.\n# 1. Security Testing.\n# Provide your OpenAPI specification or start with a public Postman collection URL.\n# EthicalCheck instantly instrospects your API and creates a map of API endpoints for security testing.\n# It then automatically creates hundreds of security tests that are non-intrusive to comprehensively and completely test for authentication, authorizations, and OWASP bugs your API. The tests addresses the OWASP API Security categories including OAuth 2.0, JWT, Rate Limit etc.\n\n# 2. Reporting.\n# EthicalCheck generates security test report that includes all the tested endpoints, coverage graph, exceptions, and vulnerabilities.\n# Vulnerabilities are fully triaged, it contains CVSS score, severity, endpoint information, and OWASP tagging.\n\n\n# This is a starter workflow to help you get started with EthicalCheck Actions\n\nname: EthicalCheck-Workflow\n\n# Controls when the workflow will run\non:\n # Triggers the workflow on push or pull request events but only for the \"master\" branch\n # Customize trigger events based on your DevSecOps processes.\n push:\n branches: [ \"master\" ]\n pull_request:\n branches: [ \"master\" ]\n schedule:\n - cron: '31 22 * * 0'\n\n # Allows you to run this workflow manually from the Actions tab\n workflow_dispatch:\n\npermissions:\n contents: read\n\njobs:\n Trigger_EthicalCheck:\n permissions:\n security-events: write # for github/codeql-action/upload-sarif to upload SARIF results\n actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status\n runs-on: ubuntu-latest\n\n steps:\n - name: EthicalCheck Free & Automated API Security Testing Service\n uses: apisec-inc/ethicalcheck-action@005fac321dd843682b1af6b72f30caaf9952c641\n with:\n # The OpenAPI Specification URL or Swagger Path or Public Postman collection URL.\n oas-url: \"http://netbanking.apisec.ai:8080/v2/api-docs\"\n # The email address to which the penetration test report will be sent.\n email: \"security_reports@x0z.co\"\n sarif-result-file: \"ethicalcheck-results.sarif\"\n\n - name: Upload sarif file to repository\n uses: github/codeql-action/upload-sarif@v4\n with:\n sarif_file: ./ethicalcheck-results.sarif\n\n" }, { "path": ".github/workflows/pages.yml", "content": "# Simple workflow for deploying static content to GitHub Pages\nname: Deploy static content to Pages\n\non:\n # Runs after E2E tests complete successfully\n workflow_run:\n workflows: [\"E2E Tests\"]\n types:\n - completed\n branches: [\"main\", \"master\"]\n\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages\npermissions:\n contents: read\n pages: write\n id-token: write\n\n# Allow one concurrent deployment\nconcurrency:\n group: \"pages\"\n cancel-in-progress: true\n\njobs:\n # Single deploy job since we're just deploying\n deploy:\n environment:\n name: github-pages\n url: ${{ steps.deployment.outputs.page_url }}\n runs-on: ubuntu-latest\n if: ${{ github.event.workflow_run.conclusion == 'success' }}\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n - name: Setup Pages\n uses: actions/configure-pages@v5\n - name: Build\n uses: docker://node:22-alpine\n with:\n args: sh -c \"npm install && npm run build:lib && npm run build:app\"\n env:\n # do not report warnings as errors\n CI: false\n PUBLIC_URL: /FossFLOW/\n - name: Upload artifact\n uses: actions/upload-pages-artifact@v4\n with:\n # Upload from the app's build directory in monorepo\n path: './packages/fossflow-app/build/'\n - name: Deploy to GitHub Pages\n id: deployment\n uses: actions/deploy-pages@v4" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n # Runs after Pages deployment completes successfully\n workflow_run:\n workflows: [\"Deploy static content to Pages\"]\n types:\n - completed\n branches: [\"main\", \"master\"]\n\npermissions:\n contents: write\n issues: write\n pull-requests: write\n\njobs:\n release:\n name: Semantic Release\n runs-on: ubuntu-latest\n if: ${{ github.event.workflow_run.conclusion == 'success' }}\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v6\n with:\n fetch-depth: 0\n persist-credentials: false\n\n - name: Setup Node.js\n uses: actions/setup-node@v6\n with:\n node-version: '22'\n cache: 'npm'\n\n - name: Install dependencies\n run: npm ci\n\n - name: Run semantic-release\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n run: npx semantic-release\n" }, { "path": ".github/workflows/test.yml", "content": "name: Run Tests\n\non:\n push:\n branches: [\"main\", \"master\"]\n pull_request:\n branches: [\"main\", \"master\"]\n\njobs:\n test:\n runs-on: ubuntu-latest\n \n strategy:\n matrix:\n node-version: [20.x, 22.x, 24.x]\n \n steps:\n - name: Checkout code\n uses: actions/checkout@v6\n \n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v6\n with:\n node-version: ${{ matrix.node-version }}\n cache: 'npm'\n \n - name: Install dependencies\n run: npm ci\n \n - name: Run tests with coverage\n run: npm test -- --coverage || npm test\n env:\n CI: true\n \n - name: Upload coverage reports\n if: success()\n uses: actions/upload-artifact@v7\n with:\n name: coverage-node-${{ matrix.node-version }}\n path: |\n packages/*/coverage/\n coverage/\n if-no-files-found: ignore\n retention-days: 7\n \n - name: Upload test results\n if: always()\n uses: actions/upload-artifact@v7\n with:\n name: test-results-node-${{ matrix.node-version }}\n path: |\n packages/*/test-results/\n test-results/\n if-no-files-found: ignore\n retention-days: 7\n\n - name: Run NPM build to check there are no build errors\n run: npm run build\n" }, { "path": ".gitignore", "content": "node_modules/\ndist/\nbuild/\n*.log\n.env\n.env.local\n.DS_Store\ncoverage/\n.vscode/\n.idea/\n*.swp\n*.swo\n*~\n.npm\n.eslintcache\n*.tsbuildinfo\n/e2e-tests/target\n*.snap\nparts/\nprime/\nstage/\noverlay/\n.claude" }, { "path": ".npmignore", "content": "# Source files\nsrc/\nwebpack/\ndocs/\n.circleci/\n.codesandbox/\n.vscode/\n\n# Config files\n.eslintrc\n.prettierrc\n.nvmrc\njest.config.js\ntsconfig.json\n*.config.js\n\n# Build artifacts\nnode_modules/\n*.log\n\n# Documentation\n*.md\n!README.md\n!LICENSE\n\n# Git\n.git/\n.gitignore\n\n# Other\nDockerfile" }, { "path": ".nvmrc", "content": "16.19.0" }, { "path": ".prettierrc", "content": "{\n \"semi\": true,\n \"trailingComma\": \"none\",\n \"singleQuote\": true,\n \"printWidth\": 80,\n \"tabWidth\": 2\n}" }, { "path": ".releaserc.json", "content": "{\n \"branches\": [\"master\", \"main\"],\n \"repositoryUrl\": \"https://github.com/stan-smith/FossFLOW.git\",\n \"plugins\": [\n [\n \"@semantic-release/commit-analyzer\",\n {\n \"preset\": \"conventionalcommits\",\n \"releaseRules\": [\n { \"type\": \"feat\", \"release\": \"minor\" },\n { \"type\": \"fix\", \"release\": \"patch\" },\n { \"type\": \"perf\", \"release\": \"patch\" },\n { \"type\": \"revert\", \"release\": \"patch\" },\n { \"type\": \"docs\", \"release\": false },\n { \"type\": \"style\", \"release\": false },\n { \"type\": \"chore\", \"release\": false },\n { \"type\": \"refactor\", \"release\": \"patch\" },\n { \"type\": \"test\", \"release\": false },\n { \"type\": \"build\", \"release\": false },\n { \"type\": \"ci\", \"release\": false },\n { \"breaking\": true, \"release\": \"major\" }\n ]\n }\n ],\n [\n \"@semantic-release/release-notes-generator\",\n {\n \"preset\": \"conventionalcommits\",\n \"presetConfig\": {\n \"types\": [\n { \"type\": \"feat\", \"section\": \"Features\" },\n { \"type\": \"fix\", \"section\": \"Bug Fixes\" },\n { \"type\": \"perf\", \"section\": \"Performance\" },\n { \"type\": \"revert\", \"section\": \"Reverts\" },\n { \"type\": \"docs\", \"section\": \"Documentation\", \"hidden\": false },\n { \"type\": \"style\", \"section\": \"Styles\", \"hidden\": true },\n { \"type\": \"chore\", \"section\": \"Chores\", \"hidden\": true },\n { \"type\": \"refactor\", \"section\": \"Code Refactoring\" },\n { \"type\": \"test\", \"section\": \"Tests\", \"hidden\": true },\n { \"type\": \"build\", \"section\": \"Build System\", \"hidden\": true },\n { \"type\": \"ci\", \"section\": \"CI/CD\", \"hidden\": true }\n ]\n }\n }\n ],\n [\n \"@semantic-release/changelog\",\n {\n \"changelogFile\": \"CHANGELOG.md\",\n \"changelogTitle\": \"# Changelog\\n\\nAll notable changes to FossFLOW will be documented in this file.\\n\\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),\\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\"\n }\n ],\n [\n \"@semantic-release/exec\",\n {\n \"prepareCmd\": \"npm run update-version ${nextRelease.version} && npm run build\"\n }\n ],\n \"@semantic-release/github\",\n [\n \"@semantic-release/git\",\n {\n \"assets\": [\n \"CHANGELOG.md\",\n \"package.json\",\n \"package-lock.json\",\n \"packages/*/package.json\"\n ],\n \"message\": \"chore(release): ${nextRelease.version} [skip ci]\\n\\n${nextRelease.notes}\"\n }\n ]\n ]\n}\n" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\nAll notable changes to FossFLOW will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\n## [1.10.8](https://github.com/stan-smith/FossFLOW/compare/v1.10.7...v1.10.8) (2026-03-01)\n\n### Bug Fixes\n\n* **ui:** make settings tabs scrollable to prevent hiding ([#238](https://github.com/stan-smith/FossFLOW/issues/238)) [@0x-la1n](https://github.com/0x-la1n) ([42835fe](https://github.com/stan-smith/FossFLOW/commit/42835fe0b77458fdff7f32f884ae2ee6506efdc7))\n\n## [1.10.7](https://github.com/stan-smith/FossFLOW/compare/v1.10.6...v1.10.7) (2026-02-15)\n\n### Bug Fixes\n\n* Fixed issues with history not fully working, undo/redo was hit or miss. Additionally added a huge amount of CI/CD testing using selenium so that we can simulate creating a diagram, placing nodes, connceting them, undo/redo, and rectangles/text as well, with love, Stan ([047df92](https://github.com/stan-smith/FossFLOW/commit/047df927858417ec068a749a3f6a0c6dd8741fec))\n\n## [1.10.6](https://github.com/stan-smith/FossFLOW/compare/v1.10.5...v1.10.6) (2026-02-14)\n\n### Reverts\n\n* Revert \"fix: replace dual-store undo/redo with unified history store\" ([0c67bad](https://github.com/stan-smith/FossFLOW/commit/0c67bad5c5e433821cd9f5cd40ef9d0d0cd1f6ee))\n\n## [1.10.5](https://github.com/stan-smith/FossFLOW/compare/v1.10.4...v1.10.5) (2026-02-13)\n\n### Bug Fixes\n\n* replace dual-store undo/redo with unified history store ([c3f5df2](https://github.com/stan-smith/FossFLOW/commit/c3f5df23ca451ce5d00759946eec7343d67a4332))\n\n## [1.10.4](https://github.com/stan-smith/FossFLOW/compare/v1.10.3...v1.10.4) (2026-02-06)\n\n### Performance\n\n* refactored useScene and store subscriptions for performance gains ([7f97e07](https://github.com/stan-smith/FossFLOW/commit/7f97e074bb436fe237195af136bac53791608baa))\n\n### Documentation\n\n* removed cruft from readmes ([daa0dd3](https://github.com/stan-smith/FossFLOW/commit/daa0dd3b76162278f79f1a2c1b063df1505c8ce1))\n* update contributing.md ([011f0af](https://github.com/stan-smith/FossFLOW/commit/011f0aff1d8cc38ac54eb4934a8ec775c1915b53))\n\n## [1.10.3](https://github.com/stan-smith/FossFLOW/compare/v1.10.2...v1.10.3) (2026-02-02)\n\n### Bug Fixes\n\n* lasso wasnt moving nodes if there was also a text item in the selection, now it works ([f5ce168](https://github.com/stan-smith/FossFLOW/commit/f5ce1689c9c3ceaa0b180d4c165914c64f3252ec))\n\n## [1.10.2](https://github.com/stan-smith/FossFLOW/compare/v1.10.1...v1.10.2) (2026-01-31)\n\n### Bug Fixes\n\n* memoized tools and other components as they were causing again more re-renders, this improves performance a touch ([e011f8c](https://github.com/stan-smith/FossFLOW/commit/e011f8cea2acd9e46efd9a9713dc3aaf94d923d5))\n\n## [1.10.1](https://github.com/stan-smith/FossFLOW/compare/v1.10.0...v1.10.1) (2026-01-26)\n\n### Bug Fixes\n\n* resolve flickering issue ([#203](https://github.com/stan-smith/FossFLOW/issues/203)) ([#215](https://github.com/stan-smith/FossFLOW/issues/215)) @Abrar74774 ([dd2b782](https://github.com/stan-smith/FossFLOW/commit/dd2b782398f932597a8726906107a088a7b68b59))\n\n## [1.10.0](https://github.com/stan-smith/FossFLOW/compare/v1.9.2...v1.10.0) (2026-01-22)\n\n### Features\n\n* Added SVG export, fixes [#211](https://github.com/stan-smith/FossFLOW/issues/211) ([b14832f](https://github.com/stan-smith/FossFLOW/commit/b14832f541068d41f88379a8c907648549f433b6))\n\n## [1.9.2](https://github.com/stan-smith/FossFLOW/compare/v1.9.1...v1.9.2) (2026-01-15)\n\n### Documentation\n\n* add missing language cross-references to all READMEs ([806cf08](https://github.com/stan-smith/FossFLOW/commit/806cf08681a14b68a264279930c9194deb416775))\n\n### Code Refactoring\n\n* bumped react18 to react19 along with associated deps and changes needed, long time coming, fixes [#72](https://github.com/stan-smith/FossFLOW/issues/72), thanks [@mmastrac](https://github.com/mmastrac) for providing some of the groundwork - Stan ([2fa3a3c](https://github.com/stan-smith/FossFLOW/commit/2fa3a3c970ea5dba944bb666f42a1f6ec7725595))\n\n## [1.9.1](https://github.com/stan-smith/FossFLOW/compare/v1.9.0...v1.9.1) (2026-01-14)\n\n### Bug Fixes\n\n* resolve security vulnerabilities in dependencies ([023c1e9](https://github.com/stan-smith/FossFLOW/commit/023c1e902f2cd2dd35cb5440f2d4afe6ac12c55d))\n\n## [1.9.0](https://github.com/stan-smith/FossFLOW/compare/v1.8.1...v1.9.0) (2026-01-14)\n\n### Features\n\n* add German translations ([1624d16](https://github.com/stan-smith/FossFLOW/commit/1624d1662c024b1d42e6f6f6a2a97e68437d873b))\n\n## [1.8.1](https://github.com/stan-smith/FossFLOW/compare/v1.8.0...v1.8.1) (2026-01-14)\n\n### Bug Fixes\n\n* make dotted line transparent to click events ([#190](https://github.com/stan-smith/FossFLOW/issues/190)) [@majiayu000](https://github.com/majiayu000) ([554325a](https://github.com/stan-smith/FossFLOW/commit/554325ad129529d8938756204f6be89e622d6f0b)), closes [#61](https://github.com/stan-smith/FossFLOW/issues/61)\n\n## [1.8.0](https://github.com/stan-smith/FossFLOW/compare/v1.7.0...v1.8.0) (2026-01-12)\n\n### Features\n\n* Add labels to icons indicating if not isometric (flat) ([#201](https://github.com/stan-smith/FossFLOW/issues/201)) ([a553e3c](https://github.com/stan-smith/FossFLOW/commit/a553e3c00ce8a9e776ba700e8fbdfc304c3e953e))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2026-01-11)\n\n### Features\n\n* add indonesian language ([#186](https://github.com/stan-smith/FossFLOW/issues/186)) [@akmalsyrf](https://github.com/akmalsyrf) ([2ce342d](https://github.com/stan-smith/FossFLOW/commit/2ce342dc98278ac73841fb083d51969da811f30e))\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n### Bug Fixes\n\n* build error caused by missing property in src/i18n/es-ES.ts ([#202](https://github.com/stan-smith/FossFLOW/issues/202)) ([574b298](https://github.com/stan-smith/FossFLOW/commit/574b298e90a346d2cebd5c8b76a2bb2c80c25d6e))\n* resolve issue [#136](https://github.com/stan-smith/FossFLOW/issues/136) where \"Add Node\" popup has huge offset ([#195](https://github.com/stan-smith/FossFLOW/issues/195)) ([fa5478e](https://github.com/stan-smith/FossFLOW/commit/fa5478e709f187a9a5b458a967dd99c2ed9da69b))\n* resolve issue [#198](https://github.com/stan-smith/FossFLOW/issues/198) where moving sliders pan view ([#199](https://github.com/stan-smith/FossFLOW/issues/199)) ([af62f2f](https://github.com/stan-smith/FossFLOW/commit/af62f2f9b54d45f219fc442510bc7b359cc2b6d7))\n\n### Documentation\n\n* fix remaining CONTRIBUTING.md links in readme ([#197](https://github.com/stan-smith/FossFLOW/issues/197)) @Abrar74774 Thank you! ([cbf922d](https://github.com/stan-smith/FossFLOW/commit/cbf922d400aa9d5dc616e2269685e0700c45b91b))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2026-01-10)\n\n### Features\n\n* add indonesian language ([#186](https://github.com/stan-smith/FossFLOW/issues/186)) [@akmalsyrf](https://github.com/akmalsyrf) ([2ce342d](https://github.com/stan-smith/FossFLOW/commit/2ce342dc98278ac73841fb083d51969da811f30e))\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n### Bug Fixes\n\n* build error caused by missing property in src/i18n/es-ES.ts ([#202](https://github.com/stan-smith/FossFLOW/issues/202)) ([574b298](https://github.com/stan-smith/FossFLOW/commit/574b298e90a346d2cebd5c8b76a2bb2c80c25d6e))\n* resolve issue [#136](https://github.com/stan-smith/FossFLOW/issues/136) where \"Add Node\" popup has huge offset ([#195](https://github.com/stan-smith/FossFLOW/issues/195)) ([fa5478e](https://github.com/stan-smith/FossFLOW/commit/fa5478e709f187a9a5b458a967dd99c2ed9da69b))\n* resolve issue [#198](https://github.com/stan-smith/FossFLOW/issues/198) where moving sliders pan view ([#199](https://github.com/stan-smith/FossFLOW/issues/199)) ([af62f2f](https://github.com/stan-smith/FossFLOW/commit/af62f2f9b54d45f219fc442510bc7b359cc2b6d7))\n\n### Documentation\n\n* fix remaining CONTRIBUTING.md links in readme ([#197](https://github.com/stan-smith/FossFLOW/issues/197)) @Abrar74774 Thank you! ([cbf922d](https://github.com/stan-smith/FossFLOW/commit/cbf922d400aa9d5dc616e2269685e0700c45b91b))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2026-01-10)\n\n### Features\n\n* add indonesian language ([#186](https://github.com/stan-smith/FossFLOW/issues/186)) [@akmalsyrf](https://github.com/akmalsyrf) ([2ce342d](https://github.com/stan-smith/FossFLOW/commit/2ce342dc98278ac73841fb083d51969da811f30e))\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n### Bug Fixes\n\n* build error caused by missing property in src/i18n/es-ES.ts ([#202](https://github.com/stan-smith/FossFLOW/issues/202)) ([574b298](https://github.com/stan-smith/FossFLOW/commit/574b298e90a346d2cebd5c8b76a2bb2c80c25d6e))\n* resolve issue [#136](https://github.com/stan-smith/FossFLOW/issues/136) where \"Add Node\" popup has huge offset ([#195](https://github.com/stan-smith/FossFLOW/issues/195)) ([fa5478e](https://github.com/stan-smith/FossFLOW/commit/fa5478e709f187a9a5b458a967dd99c2ed9da69b))\n* resolve issue [#198](https://github.com/stan-smith/FossFLOW/issues/198) where moving sliders pan view ([#199](https://github.com/stan-smith/FossFLOW/issues/199)) ([af62f2f](https://github.com/stan-smith/FossFLOW/commit/af62f2f9b54d45f219fc442510bc7b359cc2b6d7))\n\n### Documentation\n\n* fix remaining CONTRIBUTING.md links in readme ([#197](https://github.com/stan-smith/FossFLOW/issues/197)) @Abrar74774 Thank you! ([cbf922d](https://github.com/stan-smith/FossFLOW/commit/cbf922d400aa9d5dc616e2269685e0700c45b91b))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2026-01-08)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n### Bug Fixes\n\n* resolve issue [#136](https://github.com/stan-smith/FossFLOW/issues/136) where \"Add Node\" popup has huge offset ([#195](https://github.com/stan-smith/FossFLOW/issues/195)) ([fa5478e](https://github.com/stan-smith/FossFLOW/commit/fa5478e709f187a9a5b458a967dd99c2ed9da69b))\n* resolve issue [#198](https://github.com/stan-smith/FossFLOW/issues/198) where moving sliders pan view ([#199](https://github.com/stan-smith/FossFLOW/issues/199)) ([af62f2f](https://github.com/stan-smith/FossFLOW/commit/af62f2f9b54d45f219fc442510bc7b359cc2b6d7))\n\n### Documentation\n\n* fix remaining CONTRIBUTING.md links in readme ([#197](https://github.com/stan-smith/FossFLOW/issues/197)) @Abrar74774 Thank you! ([cbf922d](https://github.com/stan-smith/FossFLOW/commit/cbf922d400aa9d5dc616e2269685e0700c45b91b))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2026-01-06)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n### Bug Fixes\n\n* resolve issue [#136](https://github.com/stan-smith/FossFLOW/issues/136) where \"Add Node\" popup has huge offset ([#195](https://github.com/stan-smith/FossFLOW/issues/195)) ([fa5478e](https://github.com/stan-smith/FossFLOW/commit/fa5478e709f187a9a5b458a967dd99c2ed9da69b))\n\n### Documentation\n\n* fix remaining CONTRIBUTING.md links in readme ([#197](https://github.com/stan-smith/FossFLOW/issues/197)) @Abrar74774 Thank you! ([cbf922d](https://github.com/stan-smith/FossFLOW/commit/cbf922d400aa9d5dc616e2269685e0700c45b91b))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2026-01-03)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n### Bug Fixes\n\n* resolve issue [#136](https://github.com/stan-smith/FossFLOW/issues/136) where \"Add Node\" popup has huge offset ([#195](https://github.com/stan-smith/FossFLOW/issues/195)) ([fa5478e](https://github.com/stan-smith/FossFLOW/commit/fa5478e709f187a9a5b458a967dd99c2ed9da69b))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2026-01-03)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2026-01-02)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-12-28)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-12-28)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-12-27)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-12-26)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-12-25)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-12-08)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* transparent background for exporting as png ([#180](https://github.com/stan-smith/FossFLOW/issues/180)) @F4tal1t thank you for contributing as always! ([ba1b376](https://github.com/stan-smith/FossFLOW/commit/ba1b3762db9ac34360703553e5428cf39f556534))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-12-06)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-12-06)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-11-28)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-11-28)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n* **ui:** enhance custom color picker and fix docs ([#169](https://github.com/stan-smith/FossFLOW/issues/169)) thank you [@non-stop-dev](https://github.com/non-stop-dev) ([f56812c](https://github.com/stan-smith/FossFLOW/commit/f56812c24e1d2eb402fce990d3607155d9f94014))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-11-20)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-11-20)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n\n## [1.7.0](https://github.com/stan-smith/FossFLOW/compare/v1.6.1...v1.7.0) (2025-11-20)\n\n### Features\n\n* read-only mode ([#168](https://github.com/stan-smith/FossFLOW/issues/168)) ([85d32e6](https://github.com/stan-smith/FossFLOW/commit/85d32e64df0f4d22bd7c2d6b3a51275c09813f72))\n\n## [1.6.1](https://github.com/stan-smith/FossFLOW/compare/v1.6.0...v1.6.1) (2025-11-18)\n\n### Bug Fixes\n\n* Add error boundary to handle React-Quill DOM manipulation errors ([6c38a11](https://github.com/stan-smith/FossFLOW/commit/6c38a11f4b8fde448b18958cfb28cb6dd1862613))\n\n## [1.6.0](https://github.com/stan-smith/FossFLOW/compare/v1.5.2...v1.6.0) (2025-11-15)\n\n### Features\n\n* Variable DPI images! Finally! Fixes [#70](https://github.com/stan-smith/FossFLOW/issues/70) you're welcome [@fatflyingpigs](https://github.com/fatflyingpigs) ;) ([88ab63c](https://github.com/stan-smith/FossFLOW/commit/88ab63c969fd95538f369b8b5f0e4bba2b2e3b63))\n\n## [1.5.2](https://github.com/stan-smith/FossFLOW/compare/v1.5.1...v1.5.2) (2025-11-15)\n\n### Bug Fixes\n\n* Fixes [#58](https://github.com/stan-smith/FossFLOW/issues/58) now allows for CTRL+S and CTRL+O to save/load diagrams, thanks [@fatflyingpigs](https://github.com/fatflyingpigs) for bringing this to my attention ([ed944a0](https://github.com/stan-smith/FossFLOW/commit/ed944a0b61d93c97917390eabc5bbc165f78ebc1))\n\n## [1.5.1](https://github.com/stan-smith/FossFLOW/compare/v1.5.0...v1.5.1) (2025-10-18)\n\n### Bug Fixes\n\n* Added lazy icon loading, users now select which icons they want loaded in, by default only the isoflow ones get loaded in, users can quickly change this, or disable this behaviour, this results in much faster loads. Fixes [#79](https://github.com/stan-smith/FossFLOW/issues/79) ([e0462f6](https://github.com/stan-smith/FossFLOW/commit/e0462f6bbd58543b98bfb395fca4fc6a10e62a50))\n\n## [1.5.0](https://github.com/stan-smith/FossFLOW/compare/v1.4.0...v1.5.0) (2025-10-17)\n\n### Features\n\n* Added Portugues, French, Hindi, Bengali, and Russian support -Stan ([b299bc3](https://github.com/stan-smith/FossFLOW/commit/b299bc33018b47708d546a43c80ee46629be818f))\n* Added Spanish support! added more I18n compatability -Stan ([be14d87](https://github.com/stan-smith/FossFLOW/commit/be14d8705319da406a1cad142731ee0a698bcd3c))\n* Lots of language support! ([956a2af](https://github.com/stan-smith/FossFLOW/commit/956a2af52f534be02b7d417f413a0ee66dd2e17d))\n\n## [1.4.0](https://github.com/stan-smith/FossFLOW/compare/v1.3.0...v1.4.0) (2025-10-11)\n\n### Features\n\n* added in esc to get ya out of menus/interactions/connectors Fixes [#154](https://github.com/stan-smith/FossFLOW/issues/154) ([5cf61c3](https://github.com/stan-smith/FossFLOW/commit/5cf61c3055c9ef1ad6a2cf5b67659e3a825a28fa))\n\n## [1.3.0](https://github.com/stan-smith/FossFLOW/compare/v1.2.0...v1.3.0) (2025-10-09)\n\n### Features\n\n* **ci:** added selenium based testing procedure for integration tests ([af6dabe](https://github.com/stan-smith/FossFLOW/commit/af6dabe0fd43eb899ea0d4078ba4eb0ec195bc1d))\n\n## [1.2.0](https://github.com/stan-smith/FossFLOW/compare/v1.1.1...v1.2.0) (2025-10-09)\n\n### Features\n\n* upgraded to ESlint 9, fixed some vulns ([4e2a2d1](https://github.com/stan-smith/FossFLOW/commit/4e2a2d1a11925c960c88ff737069bc48d851c105))\n\n## [1.1.1](https://github.com/stan-smith/FossFLOW/compare/v1.1.0...v1.1.1) (2025-10-08)\n\n### Bug Fixes\n\n* bumped all packages, no vulns in npm audit now ([09edf76](https://github.com/stan-smith/FossFLOW/commit/09edf76ef12df55859b77fc74823f5425dbbf8b1))\n\n## [1.1.0](https://github.com/stan-smith/FossFLOW/compare/v1.0.5...v1.1.0) (2025-10-08)\n\n### Features\n\n* **ci:** fixing ci stuff ([85fa0e6](https://github.com/stan-smith/FossFLOW/commit/85fa0e668129577f7ab6427946b0e6c5b2c1bccb))\n\n## 1.0.0 (2025-10-08)\n\n### Features\n\n* accepts an array of textboxes as part of initialData ([aaf48bd](https://github.com/stan-smith/FossFLOW/commit/aaf48bd33e97fcf3a87a9adef68451440f15a3ed))\n* Add advanced pan controls with configurable options ([83c9b3a](https://github.com/stan-smith/FossFLOW/commit/83c9b3aed21f5881cf8c0025ba37043d580de914)), closes [#25](https://github.com/stan-smith/FossFLOW/issues/25)\n* add click-based connector creation mode with empty space support ([#108](https://github.com/stan-smith/FossFLOW/issues/108)) ([5ff21cc](https://github.com/stan-smith/FossFLOW/commit/5ff21cc35fcf86b7e71b539ff5700039dfc3667e)), closes [#84](https://github.com/stan-smith/FossFLOW/issues/84)\n* add close button to item control components ([a808b83](https://github.com/stan-smith/FossFLOW/commit/a808b8376fcf912d628188d691fec98c2f619bdb))\n* add comprehensive tests for connector reducer and improve CI/CD coverage reporting ([70b1f56](https://github.com/stan-smith/FossFLOW/commit/70b1f560a24fa63c57241a3974ebcf381e701e5f))\n* Add configurable hotkey system for tools ([ef258df](https://github.com/stan-smith/FossFLOW/commit/ef258dff17884660c2c99e78ecef736852156cc7)), closes [#59](https://github.com/stan-smith/FossFLOW/issues/59)\n* Add custom icon import functionality with automatic scaling ([dd80e86](https://github.com/stan-smith/FossFLOW/commit/dd80e86de275524835084d26d52d560e3bc970f8))\n* add Help dialog and shortcut key support ([d500460](https://github.com/stan-smith/FossFLOW/commit/d5004607db8bfbacb1c80a4d7ebedd6ba590d514))\n* add i18n to main menu & docs: update Chinese README ([#130](https://github.com/stan-smith/FossFLOW/issues/130)) ([a001da7](https://github.com/stan-smith/FossFLOW/commit/a001da7edb0c81574a9fcbcbec30272cacf44591))\n* add language detector & update Chinese README ([#127](https://github.com/stan-smith/FossFLOW/issues/127)) ([e18e51f](https://github.com/stan-smith/FossFLOW/commit/e18e51fb7fc4d5f5959c2f2e5cb31d20ee2c1b6a))\n* add LLM-friendly export features and format code with Prettier ([77b304c](https://github.com/stan-smith/FossFLOW/commit/77b304c98a53cdf753172c48507ef29f4503a00f))\n* Add option to toggle connector arrows ([dea6a1e](https://github.com/stan-smith/FossFLOW/commit/dea6a1e934857480dcf4dbb35801a176d182d4f9)), closes [#74](https://github.com/stan-smith/FossFLOW/issues/74)\n* Add server-side storage for persistent diagram management ([bf3a30f](https://github.com/stan-smith/FossFLOW/commit/bf3a30fa129932dd0c3d01ca97ed30e579c8e418)), closes [#48](https://github.com/stan-smith/FossFLOW/issues/48)\n* added error boundary ([#90](https://github.com/stan-smith/FossFLOW/issues/90)) ([179b512](https://github.com/stan-smith/FossFLOW/commit/179b512c7d1e17f9aab18db05e12017399890497))\n* adds ability to remove a node ([2e2a98f](https://github.com/stan-smith/FossFLOW/commit/2e2a98f5e99633c51d9df19b8f16ecc394c9ab1a))\n* adds basic editor example ([dc04314](https://github.com/stan-smith/FossFLOW/commit/dc04314f46892b1c11bb9c841e7ac31ed97b88e7))\n* adds codesandbox config ([b23c3a9](https://github.com/stan-smith/FossFLOW/commit/b23c3a9593705f03ba26cfe9d7ea87baea3ae2a9))\n* adds deleteView reducer ([80f257b](https://github.com/stan-smith/FossFLOW/commit/80f257b016987b9e873af76613b42d5785481d16))\n* adds discord option to main menu ([86900a9](https://github.com/stan-smith/FossFLOW/commit/86900a97801dd6a1885f6f99c32febc653b5efce))\n* adds documentation ([a279729](https://github.com/stan-smith/FossFLOW/commit/a279729dc6bc319daf1ae84d571d9742302c08ec))\n* adds example for readonly mode ([db1fc8f](https://github.com/stan-smith/FossFLOW/commit/db1fc8fb36d59cf63b0fdfed47edffd944d13bee))\n* adds icons ([b7ac563](https://github.com/stan-smith/FossFLOW/commit/b7ac56337d0b429275be60d31d25f6a13b3d9775))\n* adds image export options to toggle grid and change bg color ([ee7a92d](https://github.com/stan-smith/FossFLOW/commit/ee7a92d1f39d141fc710e92071cc8a13c83e53da))\n* adds link to Github repo in main menu ([109048c](https://github.com/stan-smith/FossFLOW/commit/109048c8d2c5398285977c6afb94d465bdd0888c))\n* adds linting dependency ([bfb0295](https://github.com/stan-smith/FossFLOW/commit/bfb029584d3caa0d76acafae6d369e5d02e3f55f))\n* adds standalone build and a Dockerfile ([e8d678d](https://github.com/stan-smith/FossFLOW/commit/e8d678d191c60a9dfb96e05f099d509eee7ea4a9))\n* adds title to scene config ([ee3306b](https://github.com/stan-smith/FossFLOW/commit/ee3306b6914e9f7b39915cb96b76530569fa2db2))\n* adds to standaloneExports ([d5084e2](https://github.com/stan-smith/FossFLOW/commit/d5084e28ea2a5abf02d019d21621a7ec6824bf91))\n* adds utility methods on the window for debugging ([38c4278](https://github.com/stan-smith/FossFLOW/commit/38c4278e16c639e547aac626314f9adba8d96dc3))\n* adds validation check for connectors with less than 2 anchors ([880ed5b](https://github.com/stan-smith/FossFLOW/commit/880ed5bea740bf39bdecaaaa560c59e2a8937a6b))\n* adds zoom on scroll ([53641a4](https://github.com/stan-smith/FossFLOW/commit/53641a4a86bcec582ff4c26f899799b9f721ecc8))\n* allows all interactions to be disabled ([0e5ca5a](https://github.com/stan-smith/FossFLOW/commit/0e5ca5a442eab1f83e0a754b0c1bd1d3c25479f3))\n* allows an optional `viewId` to be passed as part of initialData ([30cd3f2](https://github.com/stan-smith/FossFLOW/commit/30cd3f28f2f0315ae9c85ebfde18709c2bd36be2))\n* allows better drag and drop interaction for connector anchors ([7661bcb](https://github.com/stan-smith/FossFLOW/commit/7661bcb0693e6a9d3212f402b0ec297f54cb6bed))\n* allows codesandbox to open a browser preview ([fbf48d2](https://github.com/stan-smith/FossFLOW/commit/fbf48d26cadf502dcf0bbcb3bf696a8063103129))\n* allows color selection for nodes ([39afd84](https://github.com/stan-smith/FossFLOW/commit/39afd84553c5da8a1d36c0560e9b792e74277d8f))\n* allows custom node labels (with example) ([55f9b37](https://github.com/stan-smith/FossFLOW/commit/55f9b37c5623127c57a47c716679cb8ed31169c2))\n* allows expandable node labels ([90f6c0e](https://github.com/stan-smith/FossFLOW/commit/90f6c0ed860eaff307e2c6fafefb9663ec39c864))\n* allows icons to be drag and dropped onto canvas ([07dc1d1](https://github.com/stan-smith/FossFLOW/commit/07dc1d163ccf39437ea02a18f2d33d7c2542fde8))\n* allows layer order of rectangles to be changed ([56591cb](https://github.com/stan-smith/FossFLOW/commit/56591cb10296f05727af31ead306570031d6c787))\n* allows loading of local scene file ([8b362ea](https://github.com/stan-smith/FossFLOW/commit/8b362ea022dfe85f10b34c7eb55b42052f447795))\n* allows main menu to be customised ([46ce637](https://github.com/stan-smith/FossFLOW/commit/46ce637cd0be6ce9563c22328f5ba34a3f99fc1a))\n* allows main menu to be hidden ([3b02ae1](https://github.com/stan-smith/FossFLOW/commit/3b02ae1f226f304d2f89ed1cc66d71d01ddd10eb))\n* allows node icon to be changed ([fd88787](https://github.com/stan-smith/FossFLOW/commit/fd88787eb1fa6a0e52853bb84ddc29adf1480e19))\n* allows node labels to be expanded ([a1783f1](https://github.com/stan-smith/FossFLOW/commit/a1783f180b4533a827f78d6b3ff2bff89704fb4f))\n* allows project to be centered ([c638bf0](https://github.com/stan-smith/FossFLOW/commit/c638bf015cad7d35a7fbd2b24e08cf5ad796c8a7))\n* allows saving of scene ([a1a98f2](https://github.com/stan-smith/FossFLOW/commit/a1a98f288be5383f5acb6f954b47c07bd04d9f44))\n* allows textBoxes to be dragged from any point ([2f6cfa1](https://github.com/stan-smith/FossFLOW/commit/2f6cfa127462e5a70723fb79b499433e23ede8bc))\n* allows translation of rectangles ([19478ab](https://github.com/stan-smith/FossFLOW/commit/19478abb78570232d42b3ec877c02a6d971bac68))\n* allows width and height to be passed through as props ([f1f9c0f](https://github.com/stan-smith/FossFLOW/commit/f1f9c0f92b91ec1338e77bc2fa0488dbcde2e100))\n* applies animation on zoom and scroll ([efde778](https://github.com/stan-smith/FossFLOW/commit/efde7780a025f90c8df08659673f6f8d626b1b16))\n* attempts to boost performance by explicitly activating GPU rendering ([0dc27b7](https://github.com/stan-smith/FossFLOW/commit/0dc27b7be464c0bd1d64896ef86b7c4436da3b5f))\n* blocks pointer-events on title ([b5a57d0](https://github.com/stan-smith/FossFLOW/commit/b5a57d067f6933b328f33e115cf573ebf2e245f8))\n* bumps patch version ([94c3097](https://github.com/stan-smith/FossFLOW/commit/94c3097f39bbadef382b3bbb82c0476a871b5280))\n* bumps up isopacks version ([2a9d10b](https://github.com/stan-smith/FossFLOW/commit/2a9d10bf9bebe555828275368f9fc2ad01c392d0))\n* changes starting mode to PAN ([5f015c4](https://github.com/stan-smith/FossFLOW/commit/5f015c45399a3e771ad9632464e2aac5102b61a1))\n* **ci:** implemented automatic versioning plus releases ([9d9fe84](https://github.com/stan-smith/FossFLOW/commit/9d9fe84eefa6a3a6b2ec158910956debb059bbc2))\n* closes any open itemControls when panning mode selected ([aba2633](https://github.com/stan-smith/FossFLOW/commit/aba2633abb61fa40f2bbc18ef4a821fd0579efa7))\n* closes any open itm controls if main menu is opened ([a21d01b](https://github.com/stan-smith/FossFLOW/commit/a21d01bfe35da5f4097c65af36853678e83af347))\n* closes main menu BEFORE native file dialog appears ([1382c41](https://github.com/stan-smith/FossFLOW/commit/1382c4165dd61980083ad64822a19e693fd8da74))\n* configures webpack build for docker image ([1a64706](https://github.com/stan-smith/FossFLOW/commit/1a647062d15addb0fe2abb2f6ec623d16db0a41c))\n* debug mode size indicator now wraps around all items ([536b51d](https://github.com/stan-smith/FossFLOW/commit/536b51dc29f6eb727919b54d92f7739f361aaa54))\n* disables lasso mode for now ([d017b3e](https://github.com/stan-smith/FossFLOW/commit/d017b3eaa8f3efdf61ac37c095cc3f75c6330ef7))\n* disables scroll / zoom animations on drag and drop layer ([1d9324e](https://github.com/stan-smith/FossFLOW/commit/1d9324eb84cf7c28bf9268529324651d75490cc9))\n* displays connector anchors only when connector is selected / active ([366b816](https://github.com/stan-smith/FossFLOW/commit/366b816521ac15aa827207441feca21f1b93195b))\n* displays main manu in top left corner ([6bbef04](https://github.com/stan-smith/FossFLOW/commit/6bbef041df4658df2f1dad85192069e316aa5e01))\n* displays title at bottom of view ([35b73de](https://github.com/stan-smith/FossFLOW/commit/35b73defe74b57175f0ab047b454b8b8530cc23d))\n* enable panning by dragging on empty space with left mouse button ([ddb28a2](https://github.com/stan-smith/FossFLOW/commit/ddb28a2eda31b3777d73593ad46f59c91d7c23ed))\n* enables dragging of connector anchors ([f808159](https://github.com/stan-smith/FossFLOW/commit/f80815976dc31db1207f466f222dcc0c75da5b75))\n* enables expandable labels on nodes ([36c5c17](https://github.com/stan-smith/FossFLOW/commit/36c5c179d59c21f94076647f4b8ce8a00d9e0398))\n* enhance connector functionality with multiple labels and line types ([#128](https://github.com/stan-smith/FossFLOW/issues/128)) ([d5e02ea](https://github.com/stan-smith/FossFLOW/commit/d5e02ea30346fbc2528dc0337792ebccf309d94d)), closes [#107](https://github.com/stan-smith/FossFLOW/issues/107) [#113](https://github.com/stan-smith/FossFLOW/issues/113)\n* enhance context menu functionality with item and empty states ([674b46f](https://github.com/stan-smith/FossFLOW/commit/674b46f6047ba837bee950d2eeceecbeaae06b00))\n* ensures connectors have start and end nodes ([0bace0b](https://github.com/stan-smith/FossFLOW/commit/0bace0bc5f0e331e2302dbc1c4eb3b66e4e2c6db))\n* executes entry / exit logic for interactions ([3112842](https://github.com/stan-smith/FossFLOW/commit/311284217491fb099325514f991d283bea816cdb))\n* exports isoflow props as type ([75ed461](https://github.com/stan-smith/FossFLOW/commit/75ed46180f714e2b110e9f52acc3464f2126e995))\n* exports Scene typings ([28122ed](https://github.com/stan-smith/FossFLOW/commit/28122ed6b7ab8f765f1371ed140f6b2aba122d83))\n* exports types ([28f4db9](https://github.com/stan-smith/FossFLOW/commit/28f4db99b97ca790c6bb0c45b8219a2018aeffd5))\n* exposes api to update single node and hook into scene changes ([37fd9ea](https://github.com/stan-smith/FossFLOW/commit/37fd9ea16c02e8604ab8eaa4461062d4c7b46280))\n* filters textbox data on scene export ([ca087b4](https://github.com/stan-smith/FossFLOW/commit/ca087b4322e6404d0b76ff85a3e4dfeb8fa930db))\n* fixes cursor position when editor not 100% of viewport ([287de5b](https://github.com/stan-smith/FossFLOW/commit/287de5bd0ea2e2f4a03dc831642045e324060e00))\n* fixes UX around drag and drop onto canvas ([37bc36c](https://github.com/stan-smith/FossFLOW/commit/37bc36c563735e31befa28b63bf6da9aee33dc9a))\n* fixes zIndexing of scene items ([516ab8b](https://github.com/stan-smith/FossFLOW/commit/516ab8b63347c9df1a7de56259ae1951740b3bdc))\n* grid listens to window resize events ([0b97897](https://github.com/stan-smith/FossFLOW/commit/0b9789746a2f31d933b6011706b7b8cbcb4a855d))\n* hides label height control when no label present ([82977bf](https://github.com/stan-smith/FossFLOW/commit/82977bfa26d4e9d747c4ff9e740c8f744fb62fd8))\n* hides scene title if editor is in 'NON_INTERACTIVE' mode ([91fa85a](https://github.com/stan-smith/FossFLOW/commit/91fa85a1c5cfd7ef2fd68917c8ce1f6eb8cd5b79))\n* implement comprehensive undo/redo system with keyboard shortcuts and UI integration ([b9356d3](https://github.com/stan-smith/FossFLOW/commit/b9356d3c76ce72cf1f88778b6814f1e543b23433))\n* Implement quick icon selection workflow for improved UX ([8576e30](https://github.com/stan-smith/FossFLOW/commit/8576e300ece9d79a7817c814e5a1f1baa46f7457)), closes [#56](https://github.com/stan-smith/FossFLOW/issues/56)\n* implements 'clear canvas' menu item ([e65a782](https://github.com/stan-smith/FossFLOW/commit/e65a782feb640dba00d61a3a2a46a5dec6c3393f))\n* implements adding node to scene ([99c8060](https://github.com/stan-smith/FossFLOW/commit/99c80602437fea802f6975d3132d93e7ec8c35b6))\n* implements basic support for touch devices ([a841504](https://github.com/stan-smith/FossFLOW/commit/a8415041542709ea089817790cc4db920349ccb4))\n* implements callback example ([57f6a00](https://github.com/stan-smith/FossFLOW/commit/57f6a0059b84cc5ec8ce8945972f6a17132becc8))\n* implements connector colors ([eef4dba](https://github.com/stan-smith/FossFLOW/commit/eef4dba7901b2603ebb8342ed66d8c19967eebf1))\n* implements connector controls ([198a1f4](https://github.com/stan-smith/FossFLOW/commit/198a1f4e2dc5a6a0a0fe21a53d719de5fde6eaff))\n* implements connector direction icon ([eeaaad9](https://github.com/stan-smith/FossFLOW/commit/eeaaad93c5ff8f63305726aa7f5d2363208eea25))\n* implements connector labels ([4ad8b22](https://github.com/stan-smith/FossFLOW/commit/4ad8b22482b0dcb9e1821fe59ac495ff1bc8dc9d))\n* implements connector logic ([19324be](https://github.com/stan-smith/FossFLOW/commit/19324bed91d55136f21e962002d6774589f6e6f2))\n* implements connector styles ([46de2cf](https://github.com/stan-smith/FossFLOW/commit/46de2cf19afdf23bcefa5dbb7cfcb70f4cedf784))\n* implements connector width controls ([58dd3b5](https://github.com/stan-smith/FossFLOW/commit/58dd3b59da92c2010f501e19df56d462a632aba1))\n* implements connectors ([43aab47](https://github.com/stan-smith/FossFLOW/commit/43aab4758ef37f6b50b0e64016f19e52e17fa5bc))\n* implements group rendering (UI not implemented yet) ([d9daa68](https://github.com/stan-smith/FossFLOW/commit/d9daa68b0dcd6c6433096dc5ca33041fd1a347aa))\n* implements icons searchbox ([887a916](https://github.com/stan-smith/FossFLOW/commit/887a91607c2a2a84dbfe11ea4e536768d290890a))\n* implements image export ([9f11cce](https://github.com/stan-smith/FossFLOW/commit/9f11cce6e0ba2f0beefad06140768ae9c9ef6763))\n* implements lasso selection (UI disabled) ([a76e5e7](https://github.com/stan-smith/FossFLOW/commit/a76e5e72899010a83f73d43d0e465dc18cd9d4f4))\n* implements lastUpdated field on views ([3cff06d](https://github.com/stan-smith/FossFLOW/commit/3cff06dc5e93464b22e74de3364166ff0e255f11))\n* implements multiselect ([f68daac](https://github.com/stan-smith/FossFLOW/commit/f68daacc2973aa5757075a69326aa71f191bf6a5))\n* implements node delete ([b13cd66](https://github.com/stan-smith/FossFLOW/commit/b13cd66706b997b2ea290ea3a6a46fc046a6e493))\n* implements node drag and drop ([b350320](https://github.com/stan-smith/FossFLOW/commit/b35032038706641989f03611a74c7137fefe2e7c))\n* implements node labels ([f93f901](https://github.com/stan-smith/FossFLOW/commit/f93f901521ebf391984181456fcf09513aecd56d))\n* implements node positioning via drag and drop ([a6fdbf0](https://github.com/stan-smith/FossFLOW/commit/a6fdbf0c007750721184218b3bce34a50fddb9f8))\n* implements onSceneUpdated callback ([f1f77d4](https://github.com/stan-smith/FossFLOW/commit/f1f77d4ecab525a1f5e7f08efdf51dd905d1b824))\n* implements readmore on node description overflow ([f9536c9](https://github.com/stan-smith/FossFLOW/commit/f9536c9cb706ff66cab91b0b3814ea2cc75e9af2))\n* implements rectangle controls ([94995f0](https://github.com/stan-smith/FossFLOW/commit/94995f099c3a3105b1a88f1629b589532e2aa858))\n* implements rectangle delete ([416b976](https://github.com/stan-smith/FossFLOW/commit/416b9765b797fa599ee0afabd6700c8497d6bbc7))\n* implements rectangle tool basics ([bd7a118](https://github.com/stan-smith/FossFLOW/commit/bd7a11849cba439f825b31d23484fd0b3aeb81c8))\n* implements text tool ([c240def](https://github.com/stan-smith/FossFLOW/commit/c240def317422521280b5264e2b2797472074f02))\n* implements transform controls for rectangles ([cb36408](https://github.com/stan-smith/FossFLOW/commit/cb3640817358f5543fc6fc24bb36fd44f3dcd50f))\n* imports isopacks as separate package ([0580440](https://github.com/stan-smith/FossFLOW/commit/0580440b28c42d6e70c792c9090f7a877c37413e))\n* improves label handeling ([1d3e7d5](https://github.com/stan-smith/FossFLOW/commit/1d3e7d51836f2d33f9876c40b202634154eab307))\n* improves mouse tracking ([77e8c02](https://github.com/stan-smith/FossFLOW/commit/77e8c02c736f4d299121691f173dcecf2895c963))\n* improves panning mode UX ([2230637](https://github.com/stan-smith/FossFLOW/commit/2230637a529dd1717fcac0f9dfe9622252959cb2))\n* improves panning mode UX ([4b0d3d8](https://github.com/stan-smith/FossFLOW/commit/4b0d3d86e9d2cc4b6ecba65072c2b9b461918ed3))\n* improves scrolling on sidebars ([6c76790](https://github.com/stan-smith/FossFLOW/commit/6c76790800edb7493ab68d71ad35d0bbf886cb6d))\n* improves textbox sizing ([20ac174](https://github.com/stan-smith/FossFLOW/commit/20ac1747044c956946f7d3aec60cd12da6a37491))\n* improves UX on Tool menu ([ac4e9e8](https://github.com/stan-smith/FossFLOW/commit/ac4e9e8563092e0285c557a7d3ca03bbca634c06))\n* improves UX when dragging rectangle anchor ([5feca66](https://github.com/stan-smith/FossFLOW/commit/5feca66326abda286bfe8b97cc6c48226bea31bf))\n* improves UX when selecting elements ([541e469](https://github.com/stan-smith/FossFLOW/commit/541e46969740ea9f8d31002c3c80af2f466c5f4e))\n* improves word wrap handling in labels ([ba30ffd](https://github.com/stan-smith/FossFLOW/commit/ba30ffd0320bde7364b3b5e93d4bafd4aff5674d))\n* increases resolution of export images ([68c11e5](https://github.com/stan-smith/FossFLOW/commit/68c11e5a1d8267f232e1bab917a8ae12c7b58b2a))\n* installs zustand devtools ([ad78b52](https://github.com/stan-smith/FossFLOW/commit/ad78b524b5687cae2f789873707832d33411fb65))\n* introduces new TextBox tool ([23d3bda](https://github.com/stan-smith/FossFLOW/commit/23d3bdaae009e402199e163f7287adae4a4289cf))\n* isoflow takes 100% height as default ([85e36bd](https://github.com/stan-smith/FossFLOW/commit/85e36bd876fdda4a10ab44e288d62a6ee1586ea2))\n* keeps icons when canvas is cleared ([ccbedd7](https://github.com/stan-smith/FossFLOW/commit/ccbedd7c98b4c15f7cb30bcff4ef3e74fcdb9002))\n* limits connector width ([14a72c7](https://github.com/stan-smith/FossFLOW/commit/14a72c7b2ef1f8356b47c7772bafb58936461f6e))\n* makes App component default export ([8d731af](https://github.com/stan-smith/FossFLOW/commit/8d731afc44c324a7fc76c51dbd6b6a65f4c1ecc9))\n* moves non-interactive check further up the tree ([7a1ab19](https://github.com/stan-smith/FossFLOW/commit/7a1ab1973aec11b65a93c65936b3a5420b303818))\n* moves zoom controls to lower left ([c2f456a](https://github.com/stan-smith/FossFLOW/commit/c2f456a496710a7a288a04c32e3386218741bcf8))\n* performance upgrade (solves issue with nodes not being GC'd) ([bf42411](https://github.com/stan-smith/FossFLOW/commit/bf42411d5ef055f253b9c8f4f80b321137b2a9f5))\n* prevents onSceneUpdated called the first time scene is loaded ([d1bc30e](https://github.com/stan-smith/FossFLOW/commit/d1bc30e8d8476f03708d71c8703e655de487193d))\n* prevents user highlighting while dragging ([7a5b996](https://github.com/stan-smith/FossFLOW/commit/7a5b99668b2b4cfcc95aa0092920344d41305f85))\n* reduces height of node labels ([d551897](https://github.com/stan-smith/FossFLOW/commit/d551897bdabd1b5727810e645cc6543ba441b702))\n* reduces size of icons slightly ([32f4b12](https://github.com/stan-smith/FossFLOW/commit/32f4b129b99e9433ebd073c9f3ba793a67ddcf57))\n* refactors schema to accomodate model ([ad5a4e0](https://github.com/stan-smith/FossFLOW/commit/ad5a4e06f38f3da7bb5c8cb50da7ccd50991a722))\n* reinstates interactions ([97d65fa](https://github.com/stan-smith/FossFLOW/commit/97d65fabf40f0ea7d9311083468f90c8af3d22e5))\n* removes buggy scrollTo node when label expanded ([b0c5c9d](https://github.com/stan-smith/FossFLOW/commit/b0c5c9d4c3d832a8dc9d1dd3ba052c52f3321653))\n* removes color from node schema ([ccea412](https://github.com/stan-smith/FossFLOW/commit/ccea412b8d07f67efc28b5f4db2aecc7e86233b3))\n* removes custom label container for now ([194b4ed](https://github.com/stan-smith/FossFLOW/commit/194b4eda2d64ca9653e407d3d5c8b1f14fceb653))\n* removes zustand dev tools ([4a4f168](https://github.com/stan-smith/FossFLOW/commit/4a4f168671d7aef944e3c91dfdd3661305dbef96))\n* renders a basic node to scene ([5dbeb97](https://github.com/stan-smith/FossFLOW/commit/5dbeb973b05c2e3874cd7d137ed29aa877dd6f73))\n* replace import toolbar with tooltip guidance ([a2a47b4](https://github.com/stan-smith/FossFLOW/commit/a2a47b44496f4982c43fe7f9dd9915f281160169)), closes [#123](https://github.com/stan-smith/FossFLOW/issues/123)\n* replaces xstate with custom state machine implementation ([6b90ad9](https://github.com/stan-smith/FossFLOW/commit/6b90ad9b7b8aedd19a8ed0175eb537fde3656657))\n* resets the UI after a canvas clear ([413567e](https://github.com/stan-smith/FossFLOW/commit/413567efd39d2b30c97f22f283a39868641d9760))\n* resets view after file has been successfully loaded ([9910fec](https://github.com/stan-smith/FossFLOW/commit/9910fecadabb767655ee1c3693e91c754fa728ac))\n* resets window cursor when Isoflow is unmounted ([5d51aab](https://github.com/stan-smith/FossFLOW/commit/5d51aab7224e7b79f7b1cd6c85768809a28f6bbe))\n* sets min width on node labels ([620970e](https://github.com/stan-smith/FossFLOW/commit/620970e99d29783dddf90e1c9e6a02d210d8fb65))\n* sets overflow hidden ([9614b5e](https://github.com/stan-smith/FossFLOW/commit/9614b5ef5dfb30418e138d60bc01aa0a590c5f18))\n* shows animated outline around focussed nodes ([53bd3f2](https://github.com/stan-smith/FossFLOW/commit/53bd3f2c2f8d1bf29f58f5ace0a6e7b378f0449c))\n* shows both model title and view title at bottom of screen ([159f6d4](https://github.com/stan-smith/FossFLOW/commit/159f6d4c75c9c5225b1fa0ae51cf4b89706c0947))\n* stores colors as part of model ([4797b22](https://github.com/stan-smith/FossFLOW/commit/4797b223047ae7eccbb7be8db1b1028e99e2d501))\n* styling updates ([9270924](https://github.com/stan-smith/FossFLOW/commit/927092475634cd38877367fa30f268e3d411fcb0))\n* styling updates on all ui elements ([4de4882](https://github.com/stan-smith/FossFLOW/commit/4de4882b03685e27c84e50714b446a67d45fb2e6))\n* updates 'read more' button styling ([cfb60f3](https://github.com/stan-smith/FossFLOW/commit/cfb60f37cf088ffd108bfb77f742c8810f280ec0))\n* updates anchor connector schema ([5d6f3d0](https://github.com/stan-smith/FossFLOW/commit/5d6f3d0aaf02e0a379102380d081748cefb7aa10))\n* updates connector styling ([d980947](https://github.com/stan-smith/FossFLOW/commit/d980947e86d27a73ea4da67a9bb1203df8f3debb))\n* updates connector styling ([e21ed39](https://github.com/stan-smith/FossFLOW/commit/e21ed39c782f0cc2ef66a8ae16d97daa5e398605))\n* updates connector width defaults ([af5c060](https://github.com/stan-smith/FossFLOW/commit/af5c06090036ea880d810f2cb6555e3e70288a7f))\n* updates connector width to more sensible values ([851ae21](https://github.com/stan-smith/FossFLOW/commit/851ae21283d547a14c04cca4538b6759bf92c0da))\n* updates copy ([ffef690](https://github.com/stan-smith/FossFLOW/commit/ffef6902eef7588bd5247bd4e6ea02f0ed7de174))\n* updates copy on tooltip ([d127150](https://github.com/stan-smith/FossFLOW/commit/d127150dd0cf8c76f98b7aab127c59931b9f5995))\n* updates cursor styling ([73d9b52](https://github.com/stan-smith/FossFLOW/commit/73d9b522eca44c6400c698204d663c9a05abacb1))\n* updates docs ([485dc4c](https://github.com/stan-smith/FossFLOW/commit/485dc4c021894372a23a80f45f108545bf9a718c))\n* updates documentation ([1de5c9d](https://github.com/stan-smith/FossFLOW/commit/1de5c9d8b50c32c20d2ec24a337b47b6795b536c))\n* updates documentation ([52e1fc2](https://github.com/stan-smith/FossFLOW/commit/52e1fc2802a4d8638a21cbda9cdd9e9b5406cb14))\n* updates drag and drop instruction copy ([6cdff05](https://github.com/stan-smith/FossFLOW/commit/6cdff059fe0f3af1b6da5b6cc93cba4d012041b9))\n* updates example ([d707b14](https://github.com/stan-smith/FossFLOW/commit/d707b14743648440343dd4302ac8566ef5b8a4ce))\n* updates example content ([cbdcc76](https://github.com/stan-smith/FossFLOW/commit/cbdcc767d40735498e8e1c5b9f838b11695a051d))\n* updates example data ([1c28a47](https://github.com/stan-smith/FossFLOW/commit/1c28a478803f7eba46c63cc8e9e9f03583ea9627))\n* updates example data ([945ec81](https://github.com/stan-smith/FossFLOW/commit/945ec811546423dc49a5d0066dec06779a16c7f8))\n* updates example data ([edf6f28](https://github.com/stan-smith/FossFLOW/commit/edf6f28b9e61970aa7db3150a3f35601792df9d1))\n* updates example scene ([1c6af28](https://github.com/stan-smith/FossFLOW/commit/1c6af28ca8d84ac6bc080bb6102a944acab4e5fb))\n* updates example scene ([f9cc014](https://github.com/stan-smith/FossFLOW/commit/f9cc014dc7e3d529e520f26f381c1040dc585dc8))\n* updates examples and documentation ([4da997f](https://github.com/stan-smith/FossFLOW/commit/4da997f3f38091be51927f3d8d7a26979d47f744))\n* updates examples to start with fitToView=true ([a129c17](https://github.com/stan-smith/FossFLOW/commit/a129c1715ada015500fd253e54d1d08a3481da6e))\n* updates icon category styling ([1f67c29](https://github.com/stan-smith/FossFLOW/commit/1f67c297fbff6497e3246d0273b3e6b8c1c4fd00))\n* updates icons on zoom controls ([3de56fd](https://github.com/stan-smith/FossFLOW/commit/3de56fdde8020fed98d1b790b33f1f6a5072781a))\n* updates image urls in docs ([1e60907](https://github.com/stan-smith/FossFLOW/commit/1e60907b4724585aa3199aa2868bce57a0b02602))\n* updates main menu options ([031a90a](https://github.com/stan-smith/FossFLOW/commit/031a90a78ac5b6057ce547a0041e96e88ad6e3a5))\n* updates meta tag on example html page ([35850c4](https://github.com/stan-smith/FossFLOW/commit/35850c44b1a1c9a7679af8adecb569b390787cd7))\n* updates node connector styling ([78b243c](https://github.com/stan-smith/FossFLOW/commit/78b243ca22ac221725e0e9a31d545ccc7905f930))\n* updates palette ([a061f57](https://github.com/stan-smith/FossFLOW/commit/a061f573040c29d7467588a54f03cc7938507b39))\n* updates readme ([f5be45b](https://github.com/stan-smith/FossFLOW/commit/f5be45bbefc12e99ae54aed3f0f6d4c84f0b21b2))\n* updates rectangle styling ([e60e16e](https://github.com/stan-smith/FossFLOW/commit/e60e16e469a422d06fc12ac49fcbec688fddf5c3))\n* updates roadmap on README ([8992d84](https://github.com/stan-smith/FossFLOW/commit/8992d84cc653f354b2fb7b0fa2e9c9702059d628))\n* updates sidebar styling ([c83452b](https://github.com/stan-smith/FossFLOW/commit/c83452b3cb1b9143377392da2f56f228e0fc004e))\n* updates styling ([a69cbf8](https://github.com/stan-smith/FossFLOW/commit/a69cbf804ccc9361559863bf1658b516ab2b0de4))\n* updates styling ([fee7c2a](https://github.com/stan-smith/FossFLOW/commit/fee7c2a244621c4c9db93bffcedf420f6ea5ebbb))\n* updates styling ([52ec509](https://github.com/stan-smith/FossFLOW/commit/52ec50913e8be175097ed2c40d4bdd91906518fa))\n* updates styling on node labels ([d0f3cdf](https://github.com/stan-smith/FossFLOW/commit/d0f3cdf791fc1e746921a2e49a2a38002d291532))\n* updates theme colours ([1faeb31](https://github.com/stan-smith/FossFLOW/commit/1faeb31d3e8e1efd756127d48fd824eb6b49ec1e))\n* updates view default name ([4d4a668](https://github.com/stan-smith/FossFLOW/commit/4d4a668950720c0ba81a357d19101508f3eb2b83))\n* upgrades performance on debug tools ([2f9bc47](https://github.com/stan-smith/FossFLOW/commit/2f9bc47eb59ddf791abd6da9a1589a78e768d98e))\n\n### Bug Fixes\n\n* add missing i18n files to public folder for GitHub Pages ([606aebc](https://github.com/stan-smith/FossFLOW/commit/606aebcf49ad3f269d19e155f4b68eef813724a8))\n* adds keys to controls panel components ([c1c5bd3](https://github.com/stan-smith/FossFLOW/commit/c1c5bd33fe13019b4a15f9bea75eaa1693846d1a))\n* adds keys to mapped components ([6113819](https://github.com/stan-smith/FossFLOW/commit/611381934fbe3bf2f39dd816099bb99a58bfde0d))\n* adds tsc to linting script ([0e29ce3](https://github.com/stan-smith/FossFLOW/commit/0e29ce31ef8a25576c5a0674328891a49cf6b7a1))\n* bug on dragging items ([5c9e3e0](https://github.com/stan-smith/FossFLOW/commit/5c9e3e0910ae0ffa444b3a2cb69a6f03332d049e))\n* bug with disappearing item controls ([c3b72e3](https://github.com/stan-smith/FossFLOW/commit/c3b72e3cfd08d5e4f97a2960fd07bcea912a749f))\n* bug with dragging items ([1d0351c](https://github.com/stan-smith/FossFLOW/commit/1d0351cc2d66b8dc288043ed96b0b4afde797cad))\n* bug with moving rectangles ([e1515a7](https://github.com/stan-smith/FossFLOW/commit/e1515a7409917516a0b2f89397c9a89060f43dd9))\n* bumps @types/react down to v17 for compatibility ([9814af2](https://github.com/stan-smith/FossFLOW/commit/9814af275666c35862fef97533e3e7a75f8baaad))\n* calls function correctly ([f06acb6](https://github.com/stan-smith/FossFLOW/commit/f06acb63753ad116d6b92d34574adf1603639fc5))\n* console errors ([213a5d6](https://github.com/stan-smith/FossFLOW/commit/213a5d62e9b082d6910b7e6e5a9e051caa2d4e50))\n* controls container now scrolls ([f20580a](https://github.com/stan-smith/FossFLOW/commit/f20580a6f11f1af7ec9b3d7cc537eb6661466e11))\n* Correct Dockerfile FROM AS casing ([a383d57](https://github.com/stan-smith/FossFLOW/commit/a383d577ce2a60bdec81fc59eace08241d29dbaf))\n* correct rectangle reducer and update CI workflow with build step ([2bd1318](https://github.com/stan-smith/FossFLOW/commit/2bd131844135cb8c5a957c8cd96f2f17455a911a))\n* correct typo in integration section of quickstart docs ([1256d30](https://github.com/stan-smith/FossFLOW/commit/1256d30b684cdea74502fd2c05ac432fe210cc69))\n* corrects CodeSandbox setup script ([8548b00](https://github.com/stan-smith/FossFLOW/commit/8548b000715632b03f2a0ba279a15ad65f6d0a3e))\n* corrects connector width issue on zoom ([555244c](https://github.com/stan-smith/FossFLOW/commit/555244c206d6c3e4682212b267dd6012522b98c0))\n* corrects icon filename casing ([9161bbc](https://github.com/stan-smith/FossFLOW/commit/9161bbc9f09c85e40c7569a54f71fd1e4afeb36b))\n* corrects icon reference ([7d5e116](https://github.com/stan-smith/FossFLOW/commit/7d5e11638e8873fd5dcac7a6e61f706566761dce))\n* corrects textbox selection not displaying correctly ([fe7a2ed](https://github.com/stan-smith/FossFLOW/commit/fe7a2ed21130294b43f35d10dac13a7843ccad4c))\n* corrects typo in error message ([4bb73e2](https://github.com/stan-smith/FossFLOW/commit/4bb73e2a3c7638a374880dc75dd3a964bb099432))\n* corrects value of `disableInteractions` ([b34a2b2](https://github.com/stan-smith/FossFLOW/commit/b34a2b27d3eaedfff3b8cc6ffefafc0a37c88442))\n* corrects zoom tooltips ([07011f2](https://github.com/stan-smith/FossFLOW/commit/07011f2b88c1bcb1130f6f98200ac0f6a727a35e))\n* delete connectors by ID instead of index in scene ([67f0dde](https://github.com/stan-smith/FossFLOW/commit/67f0dde9321eafa8c1ede3790d853a9fff2c9727))\n* delete textBox and rectangle from scene when removed ([32bcce5](https://github.com/stan-smith/FossFLOW/commit/32bcce57b7ed5c99dd855bba15ec6218fc87cb40))\n* disables animations on scene layer on first render ([8d98b84](https://github.com/stan-smith/FossFLOW/commit/8d98b84213d6827ec7dacbf59a7e8422ef157f4f))\n* displays icons in sidebar ([6878712](https://github.com/stan-smith/FossFLOW/commit/6878712b0bb2cde2ac535ab363a6794be45f555f))\n* enables textboxes to be selected more easily ([6c3a4ce](https://github.com/stan-smith/FossFLOW/commit/6c3a4ce6c9dffe6c4f74272d2a4ab3f7615f9d6b))\n* excludes `docs` folder from tsconfig ([0d21cf1](https://github.com/stan-smith/FossFLOW/commit/0d21cf16d325298f7e340cfedf910c976346cd57))\n* excludes node_modules from type checking ([68fe053](https://github.com/stan-smith/FossFLOW/commit/68fe05385cd203f29a28ac6ec9063ed6a3f9f51f))\n* explicitly includes tag when publishing to npm ([0b4b7aa](https://github.com/stan-smith/FossFLOW/commit/0b4b7aadfc6998e4dfbb19b474e8036b0c1fc346))\n* failing test ([d4e03b0](https://github.com/stan-smith/FossFLOW/commit/d4e03b0455c51ed8565b6ff34cb6ef1a19811398))\n* failing tests ([21b5579](https://github.com/stan-smith/FossFLOW/commit/21b557961f71c0754fa8cae375d0d5cfa778e5dd))\n* first tile not registering when dragging item ([975ce6a](https://github.com/stan-smith/FossFLOW/commit/975ce6ae926edfe29f0d25a8f8a3da35008208db))\n* fixes bug caused by missing param in function call ([421bd07](https://github.com/stan-smith/FossFLOW/commit/421bd07c932ce24ca9c736c6635fcb9b7dd2486f))\n* fixes bug with 'unable to find cloneNode' on image export ([971ae23](https://github.com/stan-smith/FossFLOW/commit/971ae232c373d2bd6ea1ac94ca29242b349fc69c))\n* fixes bug with rectangle resizing ([0731757](https://github.com/stan-smith/FossFLOW/commit/07317570606488776cf305a9f428b9db538655de))\n* fixes color resolving mechanic ([4a67974](https://github.com/stan-smith/FossFLOW/commit/4a67974b55258794b6b84104e71369148893ac6c))\n* fixes debug tools dimensions ([6cdc9eb](https://github.com/stan-smith/FossFLOW/commit/6cdc9ebb3873724655cb80bdef5596c08ab71a11))\n* fixes export bug only referencing first view in the model ([ef7c314](https://github.com/stan-smith/FossFLOW/commit/ef7c314819c1ed368ac7b989754844e6a4271e69))\n* fixes failing test ([569e94f](https://github.com/stan-smith/FossFLOW/commit/569e94ff547ad68fc825e505b110ffe7ecf839e5))\n* fixes image export reading non-current scene ([d54b485](https://github.com/stan-smith/FossFLOW/commit/d54b4855657535b4cfe540eabfe7abe524ca1a9a))\n* fixes issue loading model ([33658b3](https://github.com/stan-smith/FossFLOW/commit/33658b38b182ca3664a94f1b948f971f035cf638))\n* fixes issue when clearing the canvas ([0986c52](https://github.com/stan-smith/FossFLOW/commit/0986c52d6886739339ee6ae10aaf3d94c6521897))\n* fixes issue where exported image isn't positioned correctly ([b525b8a](https://github.com/stan-smith/FossFLOW/commit/b525b8a8ab18b03d7470d79f062a562d45927acb))\n* fixes issue with calculating fit-to-screen dimensions ([1ad851a](https://github.com/stan-smith/FossFLOW/commit/1ad851aaca825bbfbbcd52e0a5ca9d881ea00f5d))\n* fixes issue with connector path not being generated correctly ([4257445](https://github.com/stan-smith/FossFLOW/commit/425744585e433dc4e5111c4d626d944e1a79d66c))\n* fixes issue with context menu not displaying correctly when zoomed out ([721e78a](https://github.com/stan-smith/FossFLOW/commit/721e78ae43d37de569f40c52eb3a6f51b9c3d60b))\n* fixes issue with fitToScreen only taking dimensions of first view ([126a77f](https://github.com/stan-smith/FossFLOW/commit/126a77fdde95de69a859e3e4e509b37a573c72da))\n* fixes issue with grid misalignment ([db9f60f](https://github.com/stan-smith/FossFLOW/commit/db9f60f5693c686540007fd541fc73f47ea879f5))\n* fixes issue with initial view not being automatically generated ([533a54c](https://github.com/stan-smith/FossFLOW/commit/533a54c3e80b6c589898052f80b83d996d0ac4c1))\n* fixes issue with reloading scene on window resize ([8f24381](https://github.com/stan-smith/FossFLOW/commit/8f24381e1bb405d04c03a9df41991d7213d5e741))\n* fixes issue with textbox selection ([9903755](https://github.com/stan-smith/FossFLOW/commit/9903755052109244fb8b8558ff7b34339341a7a5))\n* fixes issue with view timestamp ([53a4b61](https://github.com/stan-smith/FossFLOW/commit/53a4b61c7939e38c82bc3543e5d4778d2f776a24))\n* fixes linting scripts in package.json ([693845a](https://github.com/stan-smith/FossFLOW/commit/693845af024455a3f420ca203fe6a368233181fd))\n* fixes nodes not displaying correctly when being dragged onto canvas ([3686515](https://github.com/stan-smith/FossFLOW/commit/36865152ca9ec0f40fd62b1551c13c006ec5e02f))\n* fixes pan mode ([e384934](https://github.com/stan-smith/FossFLOW/commit/e384934d7c678e072205a7192675a46de450056f))\n* fixes zIndex ordering among nodes ([6139401](https://github.com/stan-smith/FossFLOW/commit/613940171128889c8dc92e5784264849b08ad487))\n* forces case sensitive dir names through Git ([01fdfe5](https://github.com/stan-smith/FossFLOW/commit/01fdfe5da8c34a3cf1c9561e99177b5def3b0b6c))\n* handle missing items gracefully in hooks and components ([ac41ed7](https://github.com/stan-smith/FossFLOW/commit/ac41ed7768679660f81a90215d5503a2d653cf52))\n* handle orphaned connector references when deleting items ([#139](https://github.com/stan-smith/FossFLOW/issues/139)) ([d698a1a](https://github.com/stan-smith/FossFLOW/commit/d698a1a120f8759e13618b962baa54d3b1d8cc22))\n* hides label when no content to display ([e2e2866](https://github.com/stan-smith/FossFLOW/commit/e2e2866a1c9fc08c8b41b8d9a7a7ac66bde69008))\n* highlight hamburger menu icon when main menu is open ([0eb0881](https://github.com/stan-smith/FossFLOW/commit/0eb0881a60fecd882746b13d742d1bb70c785bc7))\n* implements various minor fixes ([7e0c18d](https://github.com/stan-smith/FossFLOW/commit/7e0c18d8b48d14bf38009524a4cea43a81eeb262))\n* improve item control handling in Cursor and DragItems modes ([02fae75](https://github.com/stan-smith/FossFLOW/commit/02fae7558c0a3260910f2e1a61797de450bb4d94))\n* Increase nginx client_max_body_size to 10MB for larger diagrams ([fb3e171](https://github.com/stan-smith/FossFLOW/commit/fb3e171256b6c168bada46e43f8317e274df1447))\n* issue with first group drawn not displayed ([2cb9648](https://github.com/stan-smith/FossFLOW/commit/2cb96483034564291e12ee0a3c38f1e17ca25288))\n* issue with scrolling icons ([68e451a](https://github.com/stan-smith/FossFLOW/commit/68e451aa4987dfc25377217d86532d1c12130bcc))\n* issue with skipping tiles while dragging nodes ([15bb5fb](https://github.com/stan-smith/FossFLOW/commit/15bb5fb6d0dee0cbf86cad38c8944c254658d178))\n* issues with manipulating stale groups when dragging ([f0e6766](https://github.com/stan-smith/FossFLOW/commit/f0e6766a441fdd9681100c9f8b8f3cb85f9b4774))\n* Keep connector tool selected after creating a connection ([64612a5](https://github.com/stan-smith/FossFLOW/commit/64612a592c211155ca2b97993a3daf89020b6d6f))\n* label heights on nodes ([fc20387](https://github.com/stan-smith/FossFLOW/commit/fc20387e7d67fdb51cb202d97dffd970ac706cb8))\n* linting errors ([04fa3cf](https://github.com/stan-smith/FossFLOW/commit/04fa3cfe7729acc0a22c15e847241da255698fec))\n* makes node icons dynamic ([9c7e293](https://github.com/stan-smith/FossFLOW/commit/9c7e2932b02188e92e1b64980890bc21f44a7bfb))\n* makes onSceneChange an optional prop ([bd26647](https://github.com/stan-smith/FossFLOW/commit/bd26647b607c35e0c8bc443f21e548adcc42d611))\n* malformed CI config ([73c795b](https://github.com/stan-smith/FossFLOW/commit/73c795bdb72b33cb3cb993925cb8e0add6f59015))\n* missing `textboxes` definitions in initialData ([e72dd84](https://github.com/stan-smith/FossFLOW/commit/e72dd842c9729672a9af5989482db6b3e409b403))\n* moves zustand devtools from devDeps to deps (solves linting issue) ([cd70da3](https://github.com/stan-smith/FossFLOW/commit/cd70da3a27e8a338e2687c81207427505e9a588e))\n* nodemon not watching for file updates ([dfab4c2](https://github.com/stan-smith/FossFLOW/commit/dfab4c243d9864da5f8c8e938aa417060d941da0))\n* omits git tag prefix to align with npm semver requirements ([408d776](https://github.com/stan-smith/FossFLOW/commit/408d7760b2f88862675ba8f486cc4b7708a65855))\n* omits git tag prefix to align with npm semver requirements ([5251bec](https://github.com/stan-smith/FossFLOW/commit/5251bec23c3bf10962dd460d1e95c7a19cad6311))\n* passes full list of connector properties ([a19ea29](https://github.com/stan-smith/FossFLOW/commit/a19ea291413ac4d7767db08625b9425bb9607a6e))\n* preserve connector persistence without breaking image export ([650045d](https://github.com/stan-smith/FossFLOW/commit/650045d9589d3af7e86102019666d08ab747942c))\n* prevents unnecessary rerenders ([9722a62](https://github.com/stan-smith/FossFLOW/commit/9722a622fc4f6070b3d705673d3c9357c57bfb99))\n* reinstates debug tools ([6bf1740](https://github.com/stan-smith/FossFLOW/commit/6bf17402b345b62e9021ed163b2150ca1337097a))\n* remove duplicate downloadFile and useEffect in ExportImageDialog ([#109](https://github.com/stan-smith/FossFLOW/issues/109)) ([8db2710](https://github.com/stan-smith/FossFLOW/commit/8db2710c7a9a7e05e63cfecddd6f011339bd64c6))\n* removes \"fit to screen\" tool ([302d4b8](https://github.com/stan-smith/FossFLOW/commit/302d4b8695eb42fd47aaf0fbdd155cab162fd031))\n* removes autobind to fix failing tests ([b050d4c](https://github.com/stan-smith/FossFLOW/commit/b050d4cec4b7257992b51f27c80803bd16cb63fa))\n* removes console log ([7f12fbc](https://github.com/stan-smith/FossFLOW/commit/7f12fbc052f30aa99115c705022e4947d174c1bb))\n* removes console.log ([494a6a0](https://github.com/stan-smith/FossFLOW/commit/494a6a0a7cd37da05e3cc9d5afe37d8054c1522b))\n* removes old logo asset ([8c63ec3](https://github.com/stan-smith/FossFLOW/commit/8c63ec3594208c0927ec98b75b5540be9ae6723b))\n* removes redundant function calls ([fd5258e](https://github.com/stan-smith/FossFLOW/commit/fd5258e38cbbd6c1e6a478664311eefcf39fcc4f))\n* removes redundant hook ([f13d3a6](https://github.com/stan-smith/FossFLOW/commit/f13d3a60fbc368f027915c00f3aceb82cacebfbf))\n* removes redundant prop ([0b64ffd](https://github.com/stan-smith/FossFLOW/commit/0b64ffd27a97c5100a89748d363cdc2b3e201e35))\n* removes references to window size, replaces with renderer size ([50c7323](https://github.com/stan-smith/FossFLOW/commit/50c73235fe5e1ed7247c4224dde977159fcdfe60))\n* removes sidebar on controls panel ([6a152ee](https://github.com/stan-smith/FossFLOW/commit/6a152ee7a756a8e7e5842af44780d7f233a3ee12))\n* removes touchmove for now ([6f028fa](https://github.com/stan-smith/FossFLOW/commit/6f028faa3c4ebc9d88ebfea489e00560a61c8dfd))\n* removes unnecessary import ([1e95cf9](https://github.com/stan-smith/FossFLOW/commit/1e95cf9e37d25f790f85f53326e8f3f05a737008))\n* removes unnecessary imports ([3dbc5fc](https://github.com/stan-smith/FossFLOW/commit/3dbc5fc4bf87e87f48f6547d7e461e84af3513fb))\n* removes unnecessary param in tsconfig ([8f24b09](https://github.com/stan-smith/FossFLOW/commit/8f24b0970ce4f6158b2f0eac54d31a89d87499b7))\n* removes unrecognised svg attributes ([f1b18e5](https://github.com/stan-smith/FossFLOW/commit/f1b18e56386c8f70379d7a5e961ff937731d8ee6))\n* removes unrecognised svg attributes ([0e9eac1](https://github.com/stan-smith/FossFLOW/commit/0e9eac16b89b72571bfd8eaad0717e09c3304a41))\n* removes unrecognised svg stroke param ([6df12e3](https://github.com/stan-smith/FossFLOW/commit/6df12e35e3141771d910ec2ae6b6f1297c8a7da5))\n* removes unused package dependency ([5f63a4d](https://github.com/stan-smith/FossFLOW/commit/5f63a4d4d68e16e0da0df6d3f13b07e9c66732f9))\n* removes unused prop ([d7ddb69](https://github.com/stan-smith/FossFLOW/commit/d7ddb69567f02e815b8b911c07e4026f8b36e764))\n* removes unused ref ([f7532c2](https://github.com/stan-smith/FossFLOW/commit/f7532c2b85bf4a70487b8aae83f3c971259c7d19))\n* resets item controls on drag ([7adb20f](https://github.com/stan-smith/FossFLOW/commit/7adb20f9bafa99953704d94b1828a8689de6c850))\n* resolve connector persistence issues ([#110](https://github.com/stan-smith/FossFLOW/issues/110)) ([2733f0b](https://github.com/stan-smith/FossFLOW/commit/2733f0b7dfb2f4ba44dcf1da6963ffcb2dc76297)), closes [#103](https://github.com/stan-smith/FossFLOW/issues/103)\n* Resolve pan control configuration issues ([2310b85](https://github.com/stan-smith/FossFLOW/commit/2310b85995ee2f64a38a40ef57de527edfbf3560)), closes [#57](https://github.com/stan-smith/FossFLOW/issues/57)\n* resolve webpack and TypeScript declaration file conflicts ([2630d42](https://github.com/stan-smith/FossFLOW/commit/2630d421020f658e4e5c5451626cc28adf553b28))\n* resolves paths after typese are compiled ([b2416f3](https://github.com/stan-smith/FossFLOW/commit/b2416f3e984e1e474b7ef561d82259216ea3bf7b))\n* returns only first item after a click on a tile (for efficiency) ([b220c25](https://github.com/stan-smith/FossFLOW/commit/b220c25fe0a2d57a6d7b4a3bdf159b2f70d81887))\n* reverts experimental mechanic to test efficiency gains ([94fbf4b](https://github.com/stan-smith/FossFLOW/commit/94fbf4bba2931744a81b4f6b3c97cd8f2758bf2a))\n* scales label height according to zoom ([51f0d4f](https://github.com/stan-smith/FossFLOW/commit/51f0d4fd4b154bb93880f09bd7fefa70edf86c6d))\n* sets node focus correctly ([af2d96d](https://github.com/stan-smith/FossFLOW/commit/af2d96d77b3653fb15399f390d3f3b83905b9855))\n* shows grid when in edit mode ([56621f3](https://github.com/stan-smith/FossFLOW/commit/56621f3a275776e9010e745fd38fe042c62cc96f))\n* strange cursor behaviour when zoomed out ([ccf267d](https://github.com/stan-smith/FossFLOW/commit/ccf267dca5eb99b6bd033f1b4057132ebb49dade))\n* syncs lock file with package.json ([1c8f74a](https://github.com/stan-smith/FossFLOW/commit/1c8f74aac720ddb3114be632447103551315e2b4))\n* tests not passing ([029bcf6](https://github.com/stan-smith/FossFLOW/commit/029bcf6606c32c75e3c381eeaca2026818e12de1))\n* typings ([db49988](https://github.com/stan-smith/FossFLOW/commit/db499881a9e2c39b64c1e9467e46a50d6ec8a7d3))\n* typo ([fe68a69](https://github.com/stan-smith/FossFLOW/commit/fe68a6920f27a41db87382cc80a353d56d37baa8))\n* ui bug when creating scene elements ([2158b5e](https://github.com/stan-smith/FossFLOW/commit/2158b5e523d92bbf3b681cbdecc20d5ca39132b2))\n* Update Docker run command to use absolute path for volume mount ([617b865](https://github.com/stan-smith/FossFLOW/commit/617b8654804a9d41d2dea5d61c68c2ca9feb1dca))\n* updates CI config to only trigger on updated tags ([b1dd426](https://github.com/stan-smith/FossFLOW/commit/b1dd426fbe312e02d523a0ae8329fc7e9d4027ce))\n* updates documentation ([d35db15](https://github.com/stan-smith/FossFLOW/commit/d35db1539d4a617cb5095120798bba9f5d1956d6))\n* updates documentation link prefixes ([61e03f3](https://github.com/stan-smith/FossFLOW/commit/61e03f3367514b3c7d665796a52b14b488c3e727))\n* updates package to be compatible with others ([db28d94](https://github.com/stan-smith/FossFLOW/commit/db28d949060840fc1aab90f9250cf3094140e7b2))\n* upgrade to dom-to-image-more for better maintenance ([5d6cf0e](https://github.com/stan-smith/FossFLOW/commit/5d6cf0e41a7e388fbfa1998ddb154c155b686ad4))\n* use relative path for i18n loading on GitHub Pages ([2091aa0](https://github.com/stan-smith/FossFLOW/commit/2091aa0cca2654ae7c4a0feeb704223b3d234f13))\n* uses next/router rather than next/navigation ([a638fde](https://github.com/stan-smith/FossFLOW/commit/a638fde14f22d880190109c978baaefac4614e59))\n* workaround for mobx to work correctly with modemanager ([4a9d918](https://github.com/stan-smith/FossFLOW/commit/4a9d91855572db75dbd0fe5ce48e70ed20d01afb))\n\n### Reverts\n\n* fix: excludes node_modules from type checking ([8b5332b](https://github.com/stan-smith/FossFLOW/commit/8b5332ba9f6b5108580c70bbf95a34bde8e965ae))\n* removes explicit definition of tag used for npm ([b1bcb30](https://github.com/stan-smith/FossFLOW/commit/b1bcb302371d48e560bf7e6954d0963d63f709ce))\n* Revert \"Enhance ExportImageDialog performance and UX ([#100](https://github.com/stan-smith/FossFLOW/issues/100))\" ([#101](https://github.com/stan-smith/FossFLOW/issues/101)) ([dbdaf02](https://github.com/stan-smith/FossFLOW/commit/dbdaf02da2a17946841c1fecd1964e6ebe837d1d))\n\n### Documentation\n\n* add chinese README.md ([#117](https://github.com/stan-smith/FossFLOW/issues/117)) ([556ef4a](https://github.com/stan-smith/FossFLOW/commit/556ef4a3742a21e0681ef8fcd4d7968794db4ddb))\n* Add custom icon import feature to README with icon resource links ([6d53f08](https://github.com/stan-smith/FossFLOW/commit/6d53f083176f42d70a04344b681b8b706f5b04f0))\n* update API documentation for initialData and renderer props ([ab7f2e6](https://github.com/stan-smith/FossFLOW/commit/ab7f2e69992a9e27177a474a28258cad997adc56))\n* Update CONTRIBUTORS.md ([#89](https://github.com/stan-smith/FossFLOW/issues/89)) ([d6fab61](https://github.com/stan-smith/FossFLOW/commit/d6fab61d56e2d8f91d13ec80d45581a905e4a3c0))\n* Update CONTRIBUTORS.md for monorepo structure ([526aeab](https://github.com/stan-smith/FossFLOW/commit/526aeab397dc0c8877af3ccf624d96c9ed5f7cd0))\n* Update encyclopedia for monorepo structure ([94bf3c0](https://github.com/stan-smith/FossFLOW/commit/94bf3c0596eed6901edd64adc147a253535e5948))\n* Update README with comprehensive monorepo information ([979c05d](https://github.com/stan-smith/FossFLOW/commit/979c05d59b194a964566467d86a0efe4a052ac4f))\n\n### Code Refactoring\n\n* add title to Section in TextBoxControls ([1bc1e5e](https://github.com/stan-smith/FossFLOW/commit/1bc1e5eb995a8e1a23e237113aedc492b1f917b5))\n* applies origins of 0,0 to all scene layers ([ba44af5](https://github.com/stan-smith/FossFLOW/commit/ba44af5c87170c5affdea2e7c44380b46ad883e1))\n* connector functionality ([b2bf329](https://github.com/stan-smith/FossFLOW/commit/b2bf329e84c51cf1070ff9144beb4182da8bd908))\n* encapsulates ui menu styling in own component ([bd91210](https://github.com/stan-smith/FossFLOW/commit/bd91210e6be12fd9636ad511b20ce973623c51ed))\n* implements more efficient calling of onSceneUpdate() ([0306597](https://github.com/stan-smith/FossFLOW/commit/030659709cebe3b75e482a3dec6369bdcb77471a))\n* integrates the renderer with react ([773473b](https://github.com/stan-smith/FossFLOW/commit/773473b58e8602a0e0a2a83b0b0a712b8402e669))\n* migrate away from paperjs [PHASE 1] ([8e6995c](https://github.com/stan-smith/FossFLOW/commit/8e6995c615d9eb5ba435d56d5b813ae5ec151123))\n* migrate away from paperjs [PHASE 2] ([4da4235](https://github.com/stan-smith/FossFLOW/commit/4da4235eda972422b4247f6433f3721b8399651e))\n* minor code style updates ([dba4b3b](https://github.com/stan-smith/FossFLOW/commit/dba4b3b687ece97b92de357a9a58631cb1e8a579))\n* moves /tests/fixtures to /fixtures ([fd8b16a](https://github.com/stan-smith/FossFLOW/commit/fd8b16afe2c6e9db804a0114be83fc7c88e3ae3f))\n* moves model types to model file ([3bf59ef](https://github.com/stan-smith/FossFLOW/commit/3bf59ef2b921617d35efb10bbb2b1b59392b9c4d))\n* moves state to context ([ad34781](https://github.com/stan-smith/FossFLOW/commit/ad347817ff9ea1601547e87e7ed0c3606e576566))\n* moves ui elements into own component ([ca91184](https://github.com/stan-smith/FossFLOW/commit/ca91184b6ad71c06bbc5005a77ecf7c61835f116))\n* moves Ui layer styling to parent component ([d581f28](https://github.com/stan-smith/FossFLOW/commit/d581f28d01d5ffa666687067d887e8cc59deed9e))\n* propagates all naming of groups to rectangles ([cdaaea4](https://github.com/stan-smith/FossFLOW/commit/cdaaea4c3e72d1eee234aca9d96febe144125e75))\n* propagates renaming of rectangle tool ([514dd7a](https://github.com/stan-smith/FossFLOW/commit/514dd7a6b6471e3bba8e2431f485cafb356cbb4b))\n* refactors both connector and node labels to be single component ([49c9f9b](https://github.com/stan-smith/FossFLOW/commit/49c9f9b70e43a81fb85769af04c0708f2ed06915))\n* refactors connector style into a zod enum ([1e950a7](https://github.com/stan-smith/FossFLOW/commit/1e950a7b5560aa84212c0843c6f05578594c726b))\n* remove redundant setMode calls in interaction modes ([fa4490f](https://github.com/stan-smith/FossFLOW/commit/fa4490fb07c77b48e432ea2f9cf6ef01a8ad5fde))\n* remove unnecessary vertical divider from ToolMenu ([11a9f61](https://github.com/stan-smith/FossFLOW/commit/11a9f61d5f2221fe036a59a3d38284e18aee5ac3))\n* remove unused layer ordering functionality ([#118](https://github.com/stan-smith/FossFLOW/issues/118)) ([b5b2825](https://github.com/stan-smith/FossFLOW/commit/b5b28257a56a061c64a5f3e4129eada483a66c35))\n* removes non-useful hooks ([bf96554](https://github.com/stan-smith/FossFLOW/commit/bf965549483684ec3776ea3ad79a7256532d8fc2))\n* removes size prop from menu props ([ce543d5](https://github.com/stan-smith/FossFLOW/commit/ce543d5a3d29375a2579c96df33f65fc3ac6b2b9))\n* renames areaTool -> rectangleTool ([8a28036](https://github.com/stan-smith/FossFLOW/commit/8a280367d0e4403464e01a017d17affb111f4c03))\n* renames connector name -> description ([804b4f6](https://github.com/stan-smith/FossFLOW/commit/804b4f66c7ba601be7cc7c199081d3424fa0bd9a))\n* renames initialScene -> initialData ([ab5c778](https://github.com/stan-smith/FossFLOW/commit/ab5c778780838af3ff3bb454b666f04ab630fea3))\n* renames interactionsEnabled > disableInteractions ([436cac1](https://github.com/stan-smith/FossFLOW/commit/436cac10a08ea0380eafa8fc76ea2cc2bc92fa45))\n* renames main menu options for better handling ([84d5015](https://github.com/stan-smith/FossFLOW/commit/84d5015db336055868645ebe2605f6a54598c878))\n* renames node.position to node.tile ([41e8de6](https://github.com/stan-smith/FossFLOW/commit/41e8de6cc71cb41fe7a8f6fd9420479d112b5d24))\n* renames reducers to modes in interactionManager ([7275dd3](https://github.com/stan-smith/FossFLOW/commit/7275dd3a230ea84033eb7bd9874054bf7e01aedd))\n* revert few changes ([44cd5f0](https://github.com/stan-smith/FossFLOW/commit/44cd5f0c6c8041a197dfc1bf136874722ef50972))\n* simplifies dev by removing animations (for now) ([cbe7249](https://github.com/stan-smith/FossFLOW/commit/cbe7249c15367b1b66023e7c8464349f77a27b64))\n* simplifies how zooming & scrolling is applied ([bfce0b4](https://github.com/stan-smith/FossFLOW/commit/bfce0b48e5b64123d173b8a10d814e387dbd8ca5))\n* simplifies interaction manager logic ([cfd8a5a](https://github.com/stan-smith/FossFLOW/commit/cfd8a5ab5156816b423620883a1e916a995aa7e7))\n* simplifies library exports and includes reducers as exports ([e7c79f0](https://github.com/stan-smith/FossFLOW/commit/e7c79f0b9ba08877e3d4639c86e66f38e7a409d2))\n* simplifies logic inside of onMouseEvent ([034a849](https://github.com/stan-smith/FossFLOW/commit/034a8490e36c6df046c7164e26059f9d3f03a29d))\n* simplifies renderer component ([0cb2446](https://github.com/stan-smith/FossFLOW/commit/0cb2446b9ef75a4fe217fa332ef86555541b9860))\n* unifies various ui states into single enum ([6a0a398](https://github.com/stan-smith/FossFLOW/commit/6a0a3982b7a797e57c3d0abb1b39dbcf0f30cb2d))\n* wraps item controls in UiElement component ([b069219](https://github.com/stan-smith/FossFLOW/commit/b06921935dfd31f294f7c2acc9f409795e886ad4))\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to FossFLOW\n\nThank you for your interest in contributing to FossFLOW! This guide will help you get started with contributing to the project.\n\n## Table of Contents\n\n- [Project Scope](#project-scope)\n- [Code of Conduct](#code-of-conduct)\n- [Getting Started](#getting-started)\n- [Development Setup](#development-setup)\n- [Project Structure](#project-structure)\n- [How to Contribute](#how-to-contribute)\n- [Development Workflow](#development-workflow)\n- [Coding Standards](#coding-standards)\n- [AI-Assisted Contributions](#ai-assisted-contributions)\n- [Testing](#testing)\n- [Submitting Changes](#submitting-changes)\n- [Community](#community)\n- [Recognition](#recognition)\n- [License](#license)\n\n## Project Scope\n\nFossFLOW is a **simple, privacy-first, browser-based isometric diagramming tool**. It deliberately avoids enterprise complexity.\n\nThe following are **out of scope** and PRs implementing them will be closed immediately:\n\n- Authentication, RBAC, OIDC, SSO, or any identity management\n- User accounts, teams, or multi-tenancy\n- Cloud hosting, SaaS features, or paid tiers\n- Database integrations\n- Anything that fundamentally changes what FossFLOW is\n\nIf you're unsure whether your idea fits, open a [Discussion](https://github.com/stan-smith/FossFLOW/discussions) first.\n\n## Code of Conduct\n\nBy participating in this project, you agree to abide by our Code of Conduct:\n\n- **Be respectful**: Treat everyone with respect. No harassment, discrimination, or inappropriate behavior.\n- **Be collaborative**: Work together to resolve conflicts and assume good intentions.\n- **Be patient**: Remember that everyone has different levels of experience.\n- **Be welcoming**: Help new contributors feel welcome and supported.\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js (v18 or higher)\n- npm (v9 or higher)\n- Git\n- A code editor (VS Code recommended)\n- Docker (optional, for containerized deployment)\n\n### Quick Start\n\n1. Fork the repository on GitHub\n2. Clone your fork:\n ```bash\n git clone https://github.com/YOUR_USERNAME/FossFLOW.git\n cd FossFLOW\n ```\n3. Install dependencies:\n ```bash\n npm install\n ```\n4. Build the library:\n ```bash\n npm run build:lib\n ```\n5. Start the development server:\n ```bash\n npm run dev\n ```\n6. Open http://localhost:3000 in your browser\n\n## Development Setup\n\n### IDE Setup (VS Code)\n\nRecommended extensions:\n- ESLint\n- Prettier\n- TypeScript and JavaScript Language Features\n\n### Environment Setup\n\n1. **Install dependencies**:\n ```bash\n npm install\n ```\n\n2. **Available scripts**:\n ```bash\n npm run dev # Start app development server\n npm run dev:lib # Watch mode for library development\n npm run build # Build both library and app\n npm run build:lib # Build library only\n npm run build:app # Build app only\n npm test # Run tests\n npm run lint # Check for linting errors\n npm run publish:lib # Publish library to npm\n ```\n\n## Project Structure\n\nThis is a monorepo containing two packages:\n\n```\nFossFLOW/\n├── packages/\n│ ├── fossflow-lib/ # React component library\n│ │ ├── src/\n│ │ │ ├── components/ # React components\n│ │ │ ├── stores/ # State management (Zustand)\n│ │ │ ├── hooks/ # Custom React hooks\n│ │ │ ├── interaction/ # User interaction handling\n│ │ │ ├── types/ # TypeScript types\n│ │ │ └── utils/ # Utility functions\n│ │ ├── rslib.config.ts # Library build config\n│ │ └── package.json\n│ │\n│ └── fossflow-app/ # PWA application\n│ ├── src/\n│ │ ├── App.tsx # Main app component\n│ │ ├── diagramUtils.ts # Diagram utilities\n│ │ └── index.tsx # App entry point\n│ ├── public/ # Static assets\n│ ├── rsbuild.config.ts # App build config\n│ └── package.json\n│\n├── Dockerfile # Docker configuration\n├── compose.yml # Docker Compose config\n├── package.json # Root workspace config\n└── tsconfig.base.json # Shared TypeScript config\n```\n\n### Key Differences:\n- **fossflow-lib**: The core library, built with RSpack\n- **fossflow-app**: The PWA application, built with RSBuild\n- Both packages are managed as npm workspaces\n\n## How to Contribute\n\n### Finding Issues to Work On\n\n1. Check the [Issues](https://github.com/stan-smith/FossFLOW/issues) page\n2. Look for issues labeled:\n - `good first issue` - Great for newcomers\n - `help wanted` - Community help needed\n - `bug` - Bug fixes\n - `enhancement` - New features\n3. Check [FOSSFLOW_TODO.md](./FOSSFLOW_TODO.md) for prioritized tasks\n\n### Types of Contributions\n\nWe welcome all types of contributions:\n\n- **Bug fixes**: Help us squash bugs\n- **Features**: Implement new functionality\n- **Documentation**: Improve docs, add examples\n- **Tests**: Increase test coverage\n- **UI/UX improvements**: Make FossFLOW better to use\n- **Performance**: Optimize code for better performance\n\n## Development Workflow\n\n### Working with the Monorepo\n\n#### Library Development (fossflow-lib)\n\n```bash\n# Start library in watch mode\nnpm run dev:lib\n\n# Build library\nnpm run build:lib\n\n# Run library tests\ncd packages/fossflow-lib && npm test\n```\n\n#### App Development (fossflow-app)\n\n```bash\n# Start app dev server\nnpm run dev\n\n# Build app for production\nnpm run build:app\n\n# The app automatically uses the local library\n```\n\n### 1. Create a Branch\n\n```bash\ngit checkout -b feature/your-feature-name\n# or\ngit checkout -b fix/bug-description\n```\n\nBranch naming conventions:\n- `feature/` - New features\n- `fix/` - Bug fixes\n- `docs/` - Documentation updates\n- `refactor/` - Code refactoring\n- `test/` - Test additions/updates\n\n### 2. Make Your Changes\n\n- Write clean, readable code\n- Follow existing patterns in the codebase\n- Add comments for complex logic only\n- Update tests if needed\n- Update documentation if needed\n- Test changes in both library and app if applicable\n\n### 3. Test Your Changes\n\n```bash\n# Run all tests\nnpm test\n\n# Run linting\nnpm run lint\n\n# Test library changes\nnpm run build:lib\n\n# Test app with library changes\nnpm run dev\n```\n\n### 4. Commit Your Changes\n\n**IMPORTANT**: We use [Conventional Commits](https://www.conventionalcommits.org/) with automated semantic versioning. Your commit messages directly control version bumps and changelog generation.\n\n\n\n#### Commit Format\n\n```\n(): \n\n[optional body]\n\n[optional footer]\n```\n\n#### Examples\n\n```bash\ngit commit -m \"feat: add undo/redo functionality\"\ngit commit -m \"fix: prevent menu from opening during drag\"\ngit commit -m \"docs: update installation instructions\"\ngit commit -m \"feat(connector)!: change default connector mode to click\"\n```\n\n#### Commit Types\n\n**Version-bumping commits:**\n- `feat`: New feature (triggers MINOR version bump, e.g., 1.0.0 → 1.1.0)\n- `fix`: Bug fix (triggers PATCH version bump, e.g., 1.0.0 → 1.0.1)\n- `perf`: Performance improvement (triggers PATCH version bump)\n- `refactor`: Code refactoring (triggers PATCH version bump)\n\n**Non-version-bumping commits:**\n- `docs`: Documentation only changes (no version bump)\n- `style`: Code style changes - formatting, whitespace (no version bump)\n- `test`: Adding or updating tests (no version bump)\n- `chore`: Maintenance tasks, dependency updates (no version bump)\n- `build`: Build system changes (no version bump)\n- `ci`: CI/CD configuration changes (no version bump)\n\n**Breaking changes:**\n- Add `!` after type/scope OR add `BREAKING CHANGE:` in footer\n- Triggers MAJOR version bump (e.g., 1.0.0 → 2.0.0)\n- Example: `feat!: redesign node selection API`\n\n#### Scopes (optional but recommended)\n\nCommon scopes in FossFLOW:\n- `connector`: Connector-related changes\n- `ui`: UI components and interactions\n- `storage`: Storage and persistence\n- `export`: Export/import functionality\n- `docker`: Docker and deployment\n- `i18n`: Internationalization\n\n#### Breaking Change Examples\n\n```bash\n# Option 1: Using ! in type\ngit commit -m \"feat(api)!: remove deprecated exportImage function\"\n\n# Option 2: Using footer\ngit commit -m \"feat: update node API\n\nBREAKING CHANGE: Node.position is now an object with x,y properties instead of array\"\n```\n\n#### Release Notes\n\nYour commits will automatically generate:\n- Version number based on commit types\n- Changelog with categorized changes\n- GitHub release notes\n\n## Coding Standards\n\n### TypeScript\n\n- Use TypeScript for all new code\n- Avoid `any` types — if unavoidable, leave a comment explaining why\n- Define interfaces for component props\n- Use meaningful variable and function names\n\nExample:\n\n```typescript\ninterface NodeProps {\n id: string;\n position: { x: number; y: number };\n icon: IconType;\n isSelected?: boolean;\n}\n\nconst Node: React.FC = ({ id, position, icon, isSelected = false }) => {\n // Component implementation\n};\n```\n\n### React\n\n- Use functional components with hooks\n- Keep components focused and small\n- Use custom hooks for reusable logic\n- Memoize expensive computations\n\n### State Management\n\n- Use Zustand stores appropriately:\n - `modelStore`: Business data\n - `sceneStore`: Visual state\n - `uiStateStore`: UI state\n- Keep actions pure and predictable\n\n### Styling\n\n- Use Material-UI components when possible\n- Follow existing styling patterns\n- Use theme variables for colors\n- Ensure responsive design\n\n### Comments\n\n- No unnecessary comments. The code should be self-documenting\n- Comments like `// This function handles the click event` or `// Main logic here` indicate a lack of understanding and will get your PR closed\n- Only add comments for genuinely complex logic that isn't immediately obvious\n\n## AI-Assisted Contributions\n\nAI tools can be useful for writing code. However:\n\n- **You must understand every line of your PR.** If asked to explain a section, you should be able to\n- PRs that are clearly generated without human review will be closed without discussion\n- If your PR contains generic AI-generated comments (we can tell), it will be closed\n- \"Vibe-coded\" PRs are not welcome — if you can't debug it, don't submit it\n\n\n\n## Testing\n\n### Running Tests\n\n```bash\nnpm test # Run all tests\nnpm test -- --watch # Watch mode\nnpm test -- --coverage # Coverage report\n```\n\n### Writing Tests\n\n- Write tests for new features\n- Update tests when changing existing code\n- Test edge cases and error scenarios\n- Use meaningful test descriptions\n\nExample:\n\n```typescript\ndescribe('useIsoProjection', () => {\n it('should convert tile coordinates to screen coordinates', () => {\n const { tileToScreen } = useIsoProjection();\n const result = tileToScreen({ x: 1, y: 1 });\n expect(result).toEqual({ x: 100, y: 50 });\n });\n});\n```\n\n## Submitting Changes\n\n### Pull Request Process\n\n1. **Update your fork**:\n ```bash\n git remote add upstream https://github.com/stan-smith/FossFLOW.git\n git fetch upstream\n git checkout main\n git merge upstream/main\n ```\n\n2. **Push your branch**:\n ```bash\n git push origin feature/your-feature-name\n ```\n\n3. **Create Pull Request**:\n - Go to GitHub and create a PR from your branch\n - Fill out the PR template completely\n - Link related issues\n - Add screenshots/GIFs for UI changes\n - Use conventional commit format for your PR title\n\n### PR Title Format\n\nPR titles **must** follow conventional commit format. Non-compliant PRs will be closed:\n\n```\nfeat: add undo/redo functionality\nfix: prevent menu from opening during drag\ndocs: update installation instructions\nfeat(connector)!: change default connector mode\n```\n\n### Code Review\n\n- Be open to feedback\n- Respond to review comments\n- Make requested changes promptly\n- Ask questions if something is unclear\n\n## Docker Development\n\n### Building and Running with Docker\n\n```bash\n# Build multi-architecture image\ndocker buildx build --platform linux/amd64,linux/arm64 -t fossflow:local .\n\n# Run with Docker Compose\ndocker compose up\n\n# Or pull from Docker Hub\ndocker run -p 80:80 stnsmith/fossflow:latest\n```\n\n## Community\n\n### Getting Help\n\n- **GitHub Issues**: For bugs and feature requests (use the templates)\n- **Discussions**: For questions and ideas\n- **Code Encyclopedia**: See [FOSSFLOW_ENCYCLOPEDIA.md](./FOSSFLOW_ENCYCLOPEDIA.md)\n- **TODO List**: See [FOSSFLOW_TODO.md](./FOSSFLOW_TODO.md)\n\n### Communication Guidelines\n\n- Be clear and concise\n- Provide context and examples\n- Search existing issues before creating new ones\n- Use issue templates when available\n\n## Recognition\n\nContributors will be recognized in:\n- The project README\n- Release notes\n- Contributors list on GitHub\n\n## License\n\nBy contributing to FossFLOW, you agree that your contributions will be licensed under the project's license.\n\n---\n\nThank you for contributing to FossFLOW! Your efforts help make this project better for everyone. If you have any questions, don't hesitate to ask in the issues or discussions.\n\n-S\n" }, { "path": "Dockerfile", "content": "# Use the official Node.js runtime as the base image\nFROM node:22 AS build\n\n# Set the working directory in the container\nWORKDIR /app\n\n# Copy package files for the monorepo\nCOPY package*.json ./\nCOPY packages/fossflow-lib/package*.json ./packages/fossflow-lib/\nCOPY packages/fossflow-app/package*.json ./packages/fossflow-app/\n\n#Update NPM\nRUN npm install -g npm@11.5.2\n\n# Install dependencies for the entire workspace\nRUN npm install\n\n# Copy the entire monorepo code\nCOPY . .\n\n# Build the library first, then the app\nRUN npm run build:lib && npm run build:app\n\n# Use Node with nginx for production\nFROM node:22-alpine\n\n# Install web server packages\nRUN apk add --no-cache nginx openssl\n\n# Copy backend code\nCOPY --from=build /app/packages/fossflow-backend /app/packages/fossflow-backend\n\n# Copy the built React app to Nginx's web server directory\nCOPY --from=build /app/packages/fossflow-app/build /usr/share/nginx/html\n\n# Copy nginx configuration\nCOPY nginx.conf /etc/nginx/http.d/default.conf\n\n# Copy and set up entrypoint script\nCOPY docker-entrypoint.sh /docker-entrypoint.sh\nRUN chmod +x /docker-entrypoint.sh\n\n# Create data directory for persistent storage\nRUN mkdir -p /data/diagrams\n\n# Expose ports\nEXPOSE 80 3001\n\n# Environment variables with defaults\nENV ENABLE_SERVER_STORAGE=true\nENV STORAGE_PATH=/data/diagrams\nENV BACKEND_PORT=3001\n\n# Start services\nENTRYPOINT [\"/docker-entrypoint.sh\"]\n" }, { "path": "FOSSFLOW_ENCYCLOPEDIA.md", "content": "# FossFLOW Codebase Encyclopedia\n\n**Last Updated**: October 2025\n**Original Created**: August 14, 2025 (commit 94bf3c0)\n**Major Updates**: 79 commits since creation including backend storage, i18n, lasso tools, and connector enhancements\n\n---\n\n## Overview\n\nFossFLOW is a monorepo containing both a React component library for drawing isometric network diagrams (fossflow-lib), a Progressive Web App that uses this library (fossflow-app), and an optional backend server for persistent storage (fossflow-backend). This encyclopedia provides a comprehensive guide to navigating and understanding the codebase structure, making it easy to locate specific functionality and understand the architecture.\n\n## Table of Contents\n\n1. [Monorepo Structure](#monorepo-structure)\n2. [Library Architecture (fossflow-lib)](#library-architecture-fossflow-lib)\n3. [Application Architecture (fossflow-app)](#application-architecture-fossflow-app)\n4. [Backend Architecture (fossflow-backend)](#backend-architecture-fossflow-backend) **[NEW]**\n5. [State Management](#state-management)\n6. [Component Organization](#component-organization)\n7. [Configuration System](#configuration-system) **[NEW]**\n8. [Internationalization (i18n)](#internationalization-i18n) **[NEW]**\n9. [Key Technologies](#key-technologies)\n10. [Build System](#build-system)\n11. [Testing Structure](#testing-structure)\n12. [Development Workflow](#development-workflow)\n\n## Monorepo Structure\n\n```\nfossflow-monorepo/\n├── packages/\n│ ├── fossflow-lib/ # React component library\n│ │ ├── src/ # Library source code\n│ │ │ ├── Isoflow.tsx # Main component entry\n│ │ │ ├── index.tsx # Development entry\n│ │ │ ├── config/ # Configuration (NEW)\n│ │ │ │ ├── hotkeys.ts # Hotkey profiles\n│ │ │ │ ├── panSettings.ts\n│ │ │ │ └── zoomSettings.ts\n│ │ │ ├── components/ # React components\n│ │ │ ├── stores/ # State management (Zustand)\n│ │ │ ├── hooks/ # Custom React hooks\n│ │ │ ├── types/ # TypeScript types\n│ │ │ ├── schemas/ # Zod validation\n│ │ │ ├── interaction/ # Interaction handling\n│ │ │ ├── i18n/ # Translations (NEW)\n│ │ │ │ ├── en-US.ts\n│ │ │ │ └── zh-CN.ts\n│ │ │ ├── utils/ # Utility functions\n│ │ │ ├── assets/ # Static assets\n│ │ │ └── styles/ # Styling\n│ │ ├── webpack.config.js # Webpack configuration\n│ │ ├── package.json # Library dependencies\n│ │ └── tsconfig.json # TypeScript config\n│ │\n│ ├── fossflow-app/ # Progressive Web App\n│ │ ├── src/ # App source code\n│ │ │ ├── index.tsx # App entry point\n│ │ │ ├── App.tsx # Main app component\n│ │ │ ├── components/ # App-specific components\n│ │ │ ├── services/ # Services (storage)\n│ │ │ ├── i18n.ts # i18n configuration (NEW)\n│ │ │ ├── serviceWorkerRegistration.ts\n│ │ │ └── setupTests.ts\n│ │ ├── public/ # Static assets\n│ │ │ └── locales/ # i18n translation files (NEW)\n│ │ ├── rsbuild.config.ts # RSBuild configuration\n│ │ ├── package.json # App dependencies\n│ │ └── tsconfig.json # TypeScript config\n│ │\n│ └── fossflow-backend/ # Backend server (NEW - Added ~Aug 2025)\n│ ├── server.js # Express server\n│ ├── package.json # Backend dependencies\n│ └── .env.example # Environment config template\n│\n├── package.json # Root workspace configuration\n├── Dockerfile # Multi-stage Docker build\n├── compose.yml # Docker Compose config\n├── README.md # Project documentation\n├── CONTRIBUTORS.md # Contributing guidelines\n└── FOSSFLOW_TODO.md # Issues and roadmap\n```\n\n## Library Architecture (fossflow-lib)\n\n### Entry Points\n\n- **`packages/fossflow-lib/src/index.tsx`**: Development mode entry with examples\n- **`packages/fossflow-lib/src/Isoflow.tsx`**: Main component exported for library usage\n- **`packages/fossflow-lib/src/index-docker.tsx`**: Docker-specific entry point\n\n### Provider Hierarchy\n\n```typescript\n\n // i18n support (NEW)\n // Core data model\n // Visual state\n // UI interaction state\n \n // Canvas rendering\n // UI controls\n \n \n \n \n \n\n```\n\n### Data Flow\n\n1. **Model Data** → Items, Views, Icons, Colors\n2. **Scene Data** → Connector paths, Connector labels, Text box sizes\n3. **UI State** → Zoom, Pan, Selection, Mode, Hotkey profile, Pan settings\n\n## Backend Architecture (fossflow-backend)\n\n**Added**: August 2025 (commit bf3a30f)\n**Purpose**: Optional Express.js server for persistent diagram storage\n\n### Overview\n\nThe backend package provides server-side storage capabilities, allowing diagrams to persist across browser sessions and devices. It's particularly useful in Docker deployments.\n\n**Location**: `/packages/fossflow-backend/`\n\n### Key Files\n\n#### Server (`server.js`)\n- **Technology**: Express.js with ES modules\n- **Port**: 3001 (configurable via `BACKEND_PORT`)\n- **Features**:\n - CORS enabled for cross-origin requests\n - 10MB JSON payload limit for large diagrams\n - Filesystem-based storage\n - Optional Git backup support\n\n### API Endpoints\n\n#### Storage Status\n```\nGET /api/storage/status\nResponse: { enabled: boolean, gitBackup: boolean, version: string }\n```\n\n#### List Diagrams\n```\nGET /api/diagrams\nResponse: Array<{ id, name, lastModified, size }>\n```\n\n#### Get Diagram\n```\nGET /api/diagrams/:id\nResponse: Diagram JSON data\n```\n\n#### Save Diagram\n```\nPOST /api/diagrams/:id\nBody: Diagram JSON data\nResponse: { success: boolean, message: string }\n```\n\n#### Delete Diagram\n```\nDELETE /api/diagrams/:id\nResponse: { success: boolean }\n```\n\n### Configuration\n\n**Environment Variables** (`.env`):\n- `ENABLE_SERVER_STORAGE`: Enable/disable storage endpoints (default: `true`)\n- `STORAGE_PATH`: Directory for diagram files (default: `/data/diagrams`)\n- `BACKEND_PORT`: Server port (default: `3001`)\n- `ENABLE_GIT_BACKUP`: Enable Git version control (default: `false`)\n\n### Storage Format\n\n- **Directory**: `/data/diagrams/` (or `STORAGE_PATH`)\n- **File Format**: `{diagram-id}.json`\n- **Structure**: Full diagram data including icons, nodes, connectors\n\n### Integration with App\n\n**App Service** (`packages/fossflow-app/src/services/storageService.ts`):\n- Detects server availability on startup\n- Provides unified interface for server/local storage\n- Handles timeouts and error states\n\n## State Management\n\n### 1. ModelStore (`src/stores/modelStore.tsx`)\n\n**Purpose**: Core business data\n\n**Key Data**:\n- `items`: Diagram elements (nodes)\n- `views`: Different diagram perspectives\n- `icons`: Available icon library\n- `colors`: Color palette\n\n**New Features** (since Aug 2025):\n- Undo/redo history tracking\n- Transaction system for atomic operations\n- Orphaned connector cleanup\n\n**Location**: `/packages/fossflow-lib/src/stores/modelStore.tsx`\n**Types**: `/packages/fossflow-lib/src/types/model.ts`\n\n### 2. SceneStore (`src/stores/sceneStore.tsx`)\n\n**Purpose**: Visual/rendering state\n\n**Key Data**:\n- `connectors`: Path and position data\n- `connectorLabels`: New flexible label system (Added: commit d5e02ea)\n- `textBoxes`: Size information\n\n**New Features** (since Aug 2025):\n- Multiple labels per connector (up to 256)\n- Undo/redo history tracking\n- Label migration from legacy format\n\n**Location**: `/packages/fossflow-lib/src/stores/sceneStore.tsx`\n**Types**: `/packages/fossflow-lib/src/types/scene.ts`\n\n### 3. UiStateStore (`src/stores/uiStateStore.tsx`)\n\n**Purpose**: User interface state\n\n**Key Data**:\n- `zoom`: Current zoom level\n- `scroll`: Viewport position\n- `mode`: Interaction mode\n- `editorMode`: Edit/readonly state\n- `hotkeyProfile`: Selected hotkey scheme (NEW)\n- `panSettings`: Pan control configuration (NEW)\n- `connectorInteractionMode`: 'click' or 'drag' (NEW)\n- `locale`: Current language (NEW)\n\n**New Features** (since Aug 2025):\n- Configurable hotkey profiles (qwerty, smnrct, none)\n- Advanced pan control settings\n- Connector creation mode toggle\n- i18n locale state\n\n**Location**: `/packages/fossflow-lib/src/stores/uiStateStore.tsx`\n**Types**: `/packages/fossflow-lib/src/types/ui.ts`\n\n## Application Architecture (fossflow-app)\n\n### Overview\n\nThe FossFLOW application is a Progressive Web App (PWA) built with RSBuild that provides a complete diagram editor interface using the fossflow-lib library.\n\n### Key Components\n\n#### App Entry (`packages/fossflow-app/src/index.tsx`)\n- Initializes the React app\n- Registers service worker for PWA functionality\n- Sets up Quill editor styles\n- Initializes i18n (NEW)\n\n#### Main App (`packages/fossflow-app/src/App.tsx`)\n- Contains the Isoflow component from fossflow-lib\n- Manages auto-save functionality\n- Handles import/export operations\n- Provides UI for session management\n- Server storage integration (NEW)\n- i18n language switching (NEW)\n\n**Major Updates** (since Aug 2025):\n- Server storage detection and UI (commit bf3a30f)\n- Language switcher component (commit 5d6cf0e)\n- Enhanced diagram loading with icon persistence (commit 4e13033)\n\n#### Service Worker\n- **Location**: `packages/fossflow-app/src/serviceWorkerRegistration.ts`\n- Enables offline functionality\n- Caches app resources\n- Provides PWA installation capability\n\n### App Features\n\n- **Auto-Save**: Saves diagram to session storage every 5 seconds\n- **Import/Export**: JSON file format for diagram sharing\n- **PWA Support**: Installable on desktop and mobile\n- **Offline Mode**: Full functionality without internet\n- **Session Storage**: Quick save without file dialogs\n- **Server Storage**: Persistent backend storage (NEW)\n- **Multi-language**: English and Chinese support (NEW)\n\n## Component Organization\n\n### Core Components (Library)\n\n#### Renderer (`packages/fossflow-lib/src/components/Renderer/`)\n- **Purpose**: Main canvas rendering\n- **Key Files**:\n - `Renderer.tsx`: Container component\n- **Renders**: All visual layers including new connector labels\n\n#### UiOverlay (`src/components/UiOverlay/`)\n- **Purpose**: UI controls overlay\n- **Key Files**:\n - `UiOverlay.tsx`: Control panel container\n- **New**: Renders tooltip components (hint tooltips for various tools)\n\n#### SceneLayer (`src/components/SceneLayer/`)\n- **Purpose**: Transformable layer wrapper\n- **Uses**: GSAP for animations\n- **Key Files**:\n - `SceneLayer.tsx`: Transform container\n\n### Scene Layers (`packages/fossflow-lib/src/components/SceneLayers/`)\n\n#### Nodes (`/Nodes/`)\n- **Purpose**: Render diagram nodes/icons\n- **Key Files**:\n - `Node.tsx`: Individual node component\n - `Nodes.tsx`: Node collection renderer\n- **Icon Types**:\n - `IsometricIcon.tsx`: 3D-style icons\n - `NonIsometricIcon.tsx`: Flat icons\n- **Updates**: Support for custom imported icons with scaling (commit dd80e86)\n\n#### Connectors (`/Connectors/`)\n- **Purpose**: Lines between nodes\n- **Key Files**:\n - `Connector.tsx`: Individual connector\n - `Connectors.tsx`: Connector collection\n- **Major Updates** (commits d5e02ea, 607389a):\n - Multiple line types (solid, dashed, dotted)\n - Bidirectional arrows\n - Click/drag creation modes\n\n#### ConnectorLabels (`/ConnectorLabels/`) **[NEW]**\n**Added**: August 2025 (commit d5e02ea)\n**Purpose**: Multiple labels along connector paths\n\n**Key Files**:\n- `ConnectorLabel.tsx`: Individual label component\n- `ConnectorLabels.tsx`: Label collection renderer\n\n**Features**:\n- Up to 256 labels per connector\n- Position anywhere along path (0-100%)\n- Support for line 1 and line 2 in double connectors\n- Backward compatible with legacy label format\n- Expandable labels (commit 3cbcada)\n\n**Related Utilities**:\n- `/src/utils/connectorLabels.ts`: Label migration and positioning logic\n\n#### Rectangles (`/Rectangles/`)\n- **Purpose**: Background shapes/regions\n- **Key Files**:\n - `Rectangle.tsx`: Individual rectangle\n - `Rectangles.tsx`: Rectangle collection\n- **Updates**: Fixed lasso priority issue (commit 1282320)\n\n#### TextBoxes (`/TextBoxes/`)\n- **Purpose**: Text annotations\n- **Key Files**:\n - `TextBox.tsx`: Individual text box\n - `TextBoxes.tsx`: Text box collection\n\n### Selection Tools **[NEW]**\n\n#### Lasso (`/Lasso/`)\n**Added**: August 2025 (commit fec8878)\n**Purpose**: Rectangle-based multi-selection\n\n**Key Files**:\n- `Lasso.tsx`: Rectangle lasso component\n\n**Features**:\n- Drag to create selection rectangle\n- Select multiple nodes/items\n- Visual feedback with dashed border\n\n#### FreehandLasso (`/FreehandLasso/`)\n**Added**: August 2025 (commit 96047f3)\n**Purpose**: Freeform multi-selection\n\n**Key Files**:\n- `FreehandLasso.tsx`: Freehand lasso component\n\n**Features**:\n- Draw arbitrary selection shape\n- Path-based item selection\n- Real-time visual feedback\n\n**Interaction Modes**:\n- `/src/interaction/modes/Lasso.ts`: Rectangle lasso mode\n- `/src/interaction/modes/FreehandLasso.ts`: Freehand lasso mode\n\n### UI Components (Library)\n\n#### MainMenu (`packages/fossflow-lib/src/components/MainMenu/`)\n- **Purpose**: Application menu\n- **Features**: Open, Export, Clear\n- **Updates**: i18n support (commit a001da7)\n\n#### ToolMenu (`packages/fossflow-lib/src/components/ToolMenu/`)\n- **Purpose**: Drawing tools palette\n- **Tools**: Select, Pan, Add Icon, Draw Rectangle, Add Text, Lasso (NEW), Freehand Lasso (NEW)\n- **Updates**:\n - Hotkey indicators (commit ef258df)\n - Visual profile badges for active hotkeys\n\n#### ItemControls (`packages/fossflow-lib/src/components/ItemControls/`)\n- **Purpose**: Property panels for selected items\n- **Subdirectories**:\n - `/NodeControls/`: Node properties\n - `QuickIconSelector.tsx`: Quick icon picker (NEW - commit 8576e30)\n - `/ConnectorControls/`: Connector properties\n - Enhanced with multiple labels support (commit d5e02ea)\n - Line type selection (solid, dashed, dotted)\n - Arrow direction controls\n - `/RectangleControls/`: Rectangle properties\n - `/TextBoxControls/`: Text properties\n - `/IconSelectionControls/`: Icon picker\n - Improved layout for small screens (commit 77231c9)\n - Icon scaling slider (commit 108b5e2)\n\n#### Settings Components **[NEW]**\n\n**HotkeySettings** (`/HotkeySettings/`)\n**Added**: August 2025 (commit ef258df)\n**Purpose**: Configure keyboard shortcuts\n\n**Features**:\n- Three profiles: QWERTY, SMNRCT, None\n- Visual hotkey mapping display\n- Per-tool hotkey customization\n\n**ConnectorSettings** (`/ConnectorSettings/`)\n**Added**: August 2025 (commit 5ff21cc)\n**Purpose**: Configure connector creation mode\n\n**Features**:\n- Toggle between click and drag modes\n- Mode descriptions and usage hints\n\n**PanSettings** (`/PanSettings/`)\n**Added**: August 2025 (commit 83c9b3a)\n**Purpose**: Configure pan controls\n\n**Features**:\n- Mouse pan options (middle-click, right-click, Ctrl, Alt, empty area)\n- Keyboard pan options (arrows, WASD, IJKL)\n- Pan speed adjustment\n\n#### Tooltip Components **[NEW]**\n\n**Added**: August-September 2025 (commits 9d9a0dd, a2a47b4, 5df41f9)\n\n**ConnectorHintTooltip** (`/ConnectorHintTooltip/`)\n- Shows when connector tool is active\n- Explains click vs drag creation modes\n\n**ConnectorRerouteTooltip** (`/ConnectorRerouteTooltip/`)\n- Shows how to reroute existing connectors\n- Explains drag waypoint interaction\n\n**ConnectorEmptySpaceTooltip** (`/ConnectorEmptySpaceTooltip/`)\n- Appears when creating connector in empty space\n- Guides user on connector placement\n\n**LassoHintTooltip** (`/LassoHintTooltip/`)\n- Shows when lasso tool is active\n- Explains lasso selection modes\n- i18n support (commit 5df41f9)\n\n**ImportHintTooltip** (`/ImportHintTooltip/`)\n- Replaced import toolbar\n- Guides users on icon import\n\n#### TransformControlsManager (`packages/fossflow-lib/src/components/TransformControlsManager/`)\n- **Purpose**: Selection and manipulation handles\n- **Key Files**:\n - `TransformAnchor.tsx`: Resize handles\n - `NodeTransformControls.tsx`: Node-specific controls\n\n#### ErrorBoundary (`/ErrorBoundary/`) **[NEW]**\n**Added**: August 2025 (commit 179b512)\n**Purpose**: Graceful error handling\n\n**Features**:\n- Catches React component errors\n- Displays user-friendly error UI\n- Prevents full app crashes\n\n### Other Components\n\n- **Grid** (`/Grid/`): Isometric grid overlay\n- **Cursor** (`/Cursor/`): Custom cursor display\n- **ContextMenu** (`/ContextMenu/`): Right-click menus\n- **ZoomControls** (`/ZoomControls/`): Zoom in/out buttons\n - Updated: Zoom-to-pan conversion (commit d3fdfea)\n- **ColorSelector** (`/ColorSelector/`): Color picker UI\n- **ExportImageDialog** (`/ExportImageDialog/`): Export to PNG dialog\n - Updates: Window-based sizing (commit c664cfc)\n - Performance improvements (commits e1b0a50, c626261)\n\n## Configuration System\n\n**Added**: August 2025 (commits ef258df, 83c9b3a)\n\n### Overview\n\nThe configuration system provides type-safe, centralized settings for hotkeys, pan controls, and zoom behavior.\n\n**Location**: `/packages/fossflow-lib/src/config/`\n\n### Hotkey Configuration (`hotkeys.ts`)\n\n**Purpose**: Define keyboard shortcuts for tools\n\n**Types**:\n```typescript\ntype HotkeyProfile = 'qwerty' | 'smnrct' | 'none';\n```\n\n**Profiles**:\n1. **QWERTY** (Q-W-E-R-T-Y layout):\n - Q: Select, W: Pan, E: Add Item, R: Rectangle, T: Connector, Y: Text, L: Lasso, F: Freehand\n\n2. **SMNRCT** (Default - S-M-N-R-C-T layout):\n - S: Select, M: Pan, N: Add Item, R: Rectangle, C: Connector, T: Text, L: Lasso, F: Freehand\n\n3. **None**: All hotkeys disabled\n\n**Usage**:\n- Configurable via Settings → Hotkeys\n- Visual indicators in ToolMenu\n- Stored in UI state\n\n### Pan Settings (`panSettings.ts`)\n\n**Purpose**: Configure pan/scroll controls\n\n**Settings**:\n- **Mouse Options**:\n - `middleClickPan`: Middle mouse button (default: true)\n - `rightClickPan`: Right mouse button\n - `ctrlClickPan`: Ctrl+Click\n - `altClickPan`: Alt+Click\n - `emptyAreaClickPan`: Click empty canvas area (default: true)\n\n- **Keyboard Options**:\n - `arrowKeysPan`: Arrow keys (default: true)\n - `wasdPan`: WASD keys\n - `ijklPan`: IJKL keys\n - `keyboardPanSpeed`: Pan distance (default: 20px)\n\n### Zoom Settings (`zoomSettings.ts`)\n\n**Purpose**: Zoom behavior configuration\n\n**Settings**:\n- Minimum/maximum zoom levels\n- Zoom step increments\n- Zoom-to-pan conversion (added commit d3fdfea)\n\n## Internationalization (i18n)\n\n**Added**: August 2025 (commits 2145981, 5d6cf0e, a2a47b4)\n\n### Overview\n\nFossFLOW supports multiple languages using react-i18next with automatic language detection.\n\n### Library i18n (`packages/fossflow-lib/src/i18n/`)\n\n**Supported Languages**:\n- `en-US.ts`: English (default)\n- `zh-CN.ts`: Simplified Chinese (added commit 556ef4a)\n\n**Translation Structure**:\n```typescript\n{\n tools: { select: \"Select\", pan: \"Pan\", ... },\n contextMenu: { addNode: \"Add Node\", ... },\n settings: { hotkeys: \"Hotkeys\", ... },\n tooltips: { connector: \"Click mode: ...\", ... }\n}\n```\n\n**Components**:\n- `/src/stores/localeStore.tsx`: Locale state management\n- `/src/components/ChangeLanguage/`: Language switcher (app-level)\n\n### App i18n (`packages/fossflow-app/src/`)\n\n**Configuration**: `i18n.ts`\n- Automatic language detection\n- Fallback to English\n- Browser language preference detection\n\n**Translation Files**: `public/locales/{lang}/app.json`\n- App-specific translations (menus, dialogs, alerts)\n- Storage-related messages\n\n**Features** (commit 4d12c01):\n- Remaining app text fully translated\n- Translation enabled for all dialogs\n- Chinese README added\n\n## Key Technologies\n\n### Core Framework\n- **React** (^18.2.0): UI framework\n- **TypeScript** (^5.3.3): Type safety\n- **Zustand** (^4.3.3): State management\n- **Immer** (^10.0.2): Immutable updates\n\n### UI Libraries\n- **Material-UI** (@mui/material ^5.11.10): Component library\n- **Emotion** (@emotion/react): CSS-in-JS styling\n\n### Graphics & Animation\n- **Paper.js** (^0.12.17): Vector graphics\n- **GSAP** (^3.11.4): Animations\n- **Pathfinding** (^0.4.18): Connector routing\n\n### Internationalization **[NEW]**\n- **react-i18next** (^13.0.0): Translation framework\n- **i18next** (^23.0.0): i18n core\n- **i18next-browser-languagedetector**: Auto-detect user language\n\n### Image Export\n- **dom-to-image-more** (^3.7.1): Canvas to image (upgraded commit 650045d)\n\n### Validation & Forms\n- **Zod** (3.22.2): Schema validation\n- **React Hook Form** (^7.43.2): Form handling\n\n### Build Tools\n- **Webpack** (^5.76.2): Module bundler (library)\n- **RSBuild**: Modern bundler (app)\n- **Jest** (^29.5.0): Testing framework\n\n### Backend **[NEW]**\n- **Express** (^4.18.2): Web server\n- **CORS** (^2.8.5): Cross-origin support\n- **dotenv** (^16.0.3): Environment configuration\n- **UUID** (^9.0.0): ID generation\n\n## Build System\n\n### Monorepo Build Architecture\n\nThe project uses NPM workspaces to manage three packages:\n- **fossflow-lib**: Built with Webpack (CommonJS2 format)\n- **fossflow-app**: Built with RSBuild (modern bundler)\n- **fossflow-backend**: Node.js ES modules (no build step)\n\n### Build Configurations\n\n#### Library (Webpack)\n- **Config**: `/packages/fossflow-lib/webpack.config.js`\n- **Output**: CommonJS2 module for npm publishing\n- **Externals**: React, React-DOM\n\n#### Application (RSBuild)\n- **Config**: `/packages/fossflow-app/rsbuild.config.ts`\n- **Features**: Hot reload, PWA support, optimized production builds\n- **Output**: Static files in `build/` directory\n\n#### Backend (Node.js)\n- **No build step**: Runs directly with Node.js\n- **ES Modules**: Uses `\"type\": \"module\"` in package.json\n\n### NPM Scripts (Root Level)\n\n```bash\n# Development\nnpm run dev # Start app development server\nnpm run dev:lib # Watch mode for library development\nnpm run dev:backend # Start backend server (NEW)\n\n# Building\nnpm run build # Build both library and app\nnpm run build:lib # Build library only\nnpm run build:app # Build app only\n\n# Testing & Quality\nnpm test # Run tests in all workspaces\nnpm run lint # Lint all workspaces\n\n# Publishing\nnpm run publish:lib # Build and publish library to npm\n\n# Docker\nnpm run docker:build # Build Docker image locally\nnpm run docker:run # Run with Docker Compose\n\n# Clean\nnpm run clean # Clean all build artifacts\n```\n\n### Docker Build\n\n```dockerfile\n# Multi-stage build\nFROM node:22 AS build\nWORKDIR /app\n# Install dependencies for monorepo\nRUN npm install\n# Build library first, then app\nRUN npm run build:lib && npm run build:app\n\n# Production stage with backend\nFROM node:22-alpine\n# Install backend dependencies\nCOPY packages/fossflow-backend /app/backend\n# Copy built frontend\nCOPY --from=build /app/packages/fossflow-app/build /app/frontend\n# Start backend server serving frontend\n```\n\n**Updates** (commit bf3a30f):\n- Added backend server to Docker image\n- Environment variable configuration\n- Persistent volume mounting for diagrams\n\n## Testing Structure\n\n### Test Files Location\n- Library tests: `packages/fossflow-lib/src/**/__tests__/`\n- App tests: `packages/fossflow-app/src/**/*.test.tsx`\n- Test utilities: `packages/fossflow-lib/src/fixtures/`\n\n### Key Test Areas\n- `/packages/fossflow-lib/src/schemas/__tests__/`: Schema validation (completed ✅)\n- `/packages/fossflow-lib/src/stores/reducers/__tests__/`: State logic\n - Connector reducer tests (commit 70b1f56)\n- `/packages/fossflow-lib/src/utils/__tests__/`: Utility functions\n\n### CI/CD Testing\n**Updates** (commits 70b1f56, 2bd1318):\n- GitHub Actions workflow with build step\n- Test coverage reporting\n- Artifact retention policies\n\n## Development Workflow\n\n### Monorepo Development Setup\n\n1. **Clone and Install**:\n```bash\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\nnpm install # Installs dependencies for all workspaces\n```\n\n2. **Development Mode**:\n```bash\n# First build the library (required for initial setup)\nnpm run build:lib\n\n# Start app development (includes library in dev mode)\nnpm run dev\n\n# Optional: Start backend server in separate terminal\nnpm run dev:backend\n```\n\n3. **Making Library Changes**:\n- Edit files in `packages/fossflow-lib/src/`\n- Changes are immediately available in the app\n- No need to rebuild or republish during development\n\n4. **Making App Changes**:\n- Edit files in `packages/fossflow-app/src/`\n- Hot reload updates the browser automatically\n\n5. **Making Backend Changes** (NEW):\n- Edit `packages/fossflow-backend/server.js`\n- Restart server or use nodemon for auto-reload\n\n### Key Development Files\n\n#### 1. Configuration (`packages/fossflow-lib/src/config.ts`)\n\n**Key Constants**:\n- `TILE_SIZE`: Base tile dimensions\n- `DEFAULT_ZOOM`: Initial zoom level\n- `DEFAULT_FONT_SIZE`: Text defaults\n- `INITIAL_DATA`: Default model state\n\n#### 2. Hooks Directory (`packages/fossflow-lib/src/hooks/`)\n\n**Common Hooks**:\n- `useScene.ts`: Merged scene data\n- `useModelItem.ts`: Individual item access (returns `ModelItem | null`)\n- `useViewItem.ts`: View item access (returns `ViewItem | null`)\n- `useConnector.ts`: Connector management (returns `Connector | null`)\n- `useRectangle.ts`: Rectangle access (returns `Rectangle | null`)\n- `useTextBox.ts`: Text box access (returns `TextBox | null`)\n- `useIcon.tsx`: Icon access (returns `Icon | null`)\n- `useColor.ts`: Color access (returns `Color | null`)\n- `useIsoProjection.ts`: Coordinate conversion\n- `useDiagramUtils.ts`: Diagram operations\n- `useHistory.ts`: Undo/redo transaction system **[NEW]**\n\n**Important**: All item access hooks now return `null` instead of throwing when items don't exist, preventing React unmount errors.\n\n#### 3. Interaction System (`packages/fossflow-lib/src/interaction/`)\n\n**Main File**: `useInteractionManager.ts`\n\n**Interaction Modes** (`/modes/`):\n- `Cursor.ts`: Selection mode\n- `Pan.ts`: Canvas panning\n- `PlaceIcon.ts`: Icon placement\n - Updated: Nearest unoccupied tile placement (commit f5ebad6)\n- `Connector.ts`: Drawing connections\n - Major update: Click/drag modes (commits d78ccdb, ea0bce0, 5ff21cc)\n- `DragItems.ts`: Moving elements\n- `Rectangle/`: Rectangle tools\n- `TextBox.ts`: Text editing\n- `Lasso.ts`: Rectangle lasso selection **[NEW]**\n- `FreehandLasso.ts`: Freehand lasso selection **[NEW]**\n\n#### 4. Utilities (`packages/fossflow-lib/src/utils/`)\n\n**Key Utilities**:\n- `CoordsUtils.ts`: Coordinate calculations\n- `SizeUtils.ts`: Size computations\n- `renderer.ts`: Rendering helpers\n- `model.ts`: Model manipulation\n- `pathfinder.ts`: Connector routing\n- `connectorLabels.ts`: Label migration and positioning **[NEW]**\n- `common.ts`: Common helpers\n - `getItemById`: Null-safe item access (prevents errors)\n\n#### 5. Type System (`packages/fossflow-lib/src/types/`)\n\n**Core Types**:\n- `model.ts`: Business data types\n - Updated: `ConnectorLabel` interface (commit d5e02ea)\n- `scene.ts`: Visual state types\n- `ui.ts`: Interface types\n - Updated: Hotkey, pan, locale state\n- `common.ts`: Shared types\n- `interactions.ts`: Interaction types\n- `isoflowProps.ts`: Component prop types\n\n#### 6. Schema Validation (`packages/fossflow-lib/src/schemas/`)\n\n**Validation Schemas**:\n- `model.ts`: Model validation\n- `connector.ts`: Connector validation\n - Updated: Label array validation (commit d5e02ea)\n- `rectangle.ts`: Rectangle validation\n- `textBox.ts`: Text box validation\n- `views.ts`: View validation\n\n## Undo/Redo System\n\n**Added**: August 2025 (contributor: pi22by7)\n**Status**: ⚠️ Implemented but has known issues under investigation\n\n### Implementation Details\n\nThe undo/redo system uses a transaction-based approach to ensure atomic operations:\n\n**Key Components**:\n- **Transaction System**: Groups related operations together (`useHistory.ts`)\n- **Dual Store Coordination**: Synchronizes model and scene stores\n- **History Tracking**: Maintains separate history for each store\n\n**Key File**: `/packages/fossflow-lib/src/hooks/useHistory.ts`\n\n**API**:\n```typescript\nconst { undo, redo, canUndo, canRedo, transaction } = useHistory();\n\n// Group multiple operations\ntransaction(() => {\n // Multiple state changes here\n // All will be undone/redone together\n});\n```\n\n**Important Considerations**:\n- Operations that affect both model and scene (like placing icons) must use transactions\n- Without transactions, undo/redo can cause \"Invalid item in view\" errors\n- The system prevents partial states by grouping related changes\n\n### Known Issues\n\n⚠️ **Current Status**: Stan is investigating edge cases and bugs in the undo/redo system. While functional for basic operations, some complex interactions may cause issues.\n\n### Error Handling Patterns\n\n**Problem**: Components can try to access deleted items during React unmounting\n**Solution**: Graceful null handling throughout the codebase\n\n**Key Changes**:\n1. Added `getItemById` utility that returns `null` instead of throwing\n2. Updated all hooks to return `null` when items don't exist\n3. Added null checks in all components using these hooks\n\n**Affected Files**:\n- `/src/utils/common.ts`: Added `getItemById` function\n- All hooks in `/src/hooks/`: Updated to handle missing items\n- All components: Added null checks and early returns\n\n**Related Fixes**:\n- Orphaned connector cleanup (commit d698a1a)\n- Scene deletion synchronization (commits 32bcce5, 67f0dde)\n\n## Navigation Quick Reference\n\n### Need to modify...\n\n**Icons?** → `/src/components/ItemControls/IconSelectionControls/`\n**Custom icon import?** → `/src/components/ItemControls/IconSelectionControls/IconGrid.tsx`\n**Node rendering?** → `/src/components/SceneLayers/Nodes/`\n**Connector drawing?** → `/src/components/SceneLayers/Connectors/`\n**Connector labels?** → `/src/components/SceneLayers/ConnectorLabels/` **[NEW]**\n**Connector creation mode?** → `/src/interaction/modes/Connector.ts` + `/src/components/ConnectorSettings/` **[NEW]**\n**Lasso selection?** → `/src/components/Lasso/`, `/src/components/FreehandLasso/` **[NEW]**\n**Zoom behavior?** → `/src/stores/uiStateStore.tsx` + `/src/components/ZoomControls/`\n**Grid display?** → `/src/components/Grid/`\n**Export functionality?** → `/src/components/ExportImageDialog/`\n**Color picker?** → `/src/components/ColorSelector/`\n**Context menus?** → `/src/components/ContextMenu/`\n**Keyboard shortcuts?** → `/src/interaction/useInteractionManager.ts` + `/src/config/hotkeys.ts` **[NEW]**\n**Tool selection?** → `/src/components/ToolMenu/`\n**Selection handles?** → `/src/components/TransformControlsManager/`\n**Undo/Redo?** → `/src/hooks/useHistory.ts` **[NEW]**\n**i18n translations?** → `/src/i18n/en-US.ts`, `/src/i18n/zh-CN.ts` **[NEW]**\n**Server storage?** → `/packages/fossflow-backend/server.js` **[NEW]**\n**Pan settings?** → `/src/config/panSettings.ts` + `/src/components/PanSettings/` **[NEW]**\n**Tooltips?** → Various `/src/components/*Tooltip/` components **[NEW]**\n\n### Want to understand...\n\n**How items are positioned?** → `/src/hooks/useIsoProjection.ts`\n**How connectors find paths?** → `/src/utils/pathfinder.ts`\n**How state updates work?** → `/src/stores/reducers/`\n**How validation works?** → `/src/schemas/`\n**Available icons?** → `/src/fixtures/icons.ts`\n**Default configurations?** → `/src/config.ts` + `/src/config/*` **[NEW]**\n**How labels are positioned?** → `/src/utils/connectorLabels.ts` **[NEW]**\n**How transactions work?** → `/src/hooks/useHistory.ts` **[NEW]**\n**How i18n works?** → `/src/i18n/`, `/src/stores/localeStore.tsx` **[NEW]**\n**Backend API?** → `/packages/fossflow-backend/server.js` **[NEW]**\n\n## Key Files Reference\n\n| Purpose | File Path | Notes |\n|---------|-----------|-------|\n| Main entry | `/src/Isoflow.tsx` | |\n| Configuration | `/src/config.ts` | |\n| Hotkey config | `/src/config/hotkeys.ts` | **[NEW]** |\n| Pan settings | `/src/config/panSettings.ts` | **[NEW]** |\n| Model types | `/src/types/model.ts` | Updated with ConnectorLabel |\n| UI state types | `/src/types/ui.ts` | Updated with hotkeys, pan, locale |\n| Model store | `/src/stores/modelStore.tsx` | With undo/redo |\n| Scene store | `/src/stores/sceneStore.tsx` | With connector labels |\n| UI store | `/src/stores/uiStateStore.tsx` | With new settings |\n| Locale store | `/src/stores/localeStore.tsx` | **[NEW]** |\n| Main renderer | `/src/components/Renderer/Renderer.tsx` | |\n| UI overlay | `/src/components/UiOverlay/UiOverlay.tsx` | With tooltips |\n| Interaction manager | `/src/interaction/useInteractionManager.ts` | Updated modes |\n| Coordinate utils | `/src/utils/CoordsUtils.ts` | |\n| Connector labels util | `/src/utils/connectorLabels.ts` | **[NEW]** |\n| History/Undo hook | `/src/hooks/useHistory.ts` | **[NEW]** |\n| Public API hook | `/src/hooks/useIsoflow.ts` | |\n| Backend server | `/packages/fossflow-backend/server.js` | **[NEW]** |\n| App i18n config | `/packages/fossflow-app/src/i18n.ts` | **[NEW]** |\n| English translations | `/src/i18n/en-US.ts` | **[NEW]** |\n| Chinese translations | `/src/i18n/zh-CN.ts` | **[NEW]** |\n\n## Recent Major Changes Summary\n\n### August 2025\n- **Backend Storage**: Express server for persistent diagrams (bf3a30f)\n- **i18n Support**: English + Chinese translations (2145981, 5d6cf0e)\n- **Hotkey System**: Configurable keyboard shortcuts (ef258df)\n- **Pan Controls**: Advanced pan configuration (83c9b3a)\n- **Connector Labels**: Multiple labels per connector (d5e02ea)\n- **Click Connector Mode**: Alternative to drag mode (5ff21cc, ea0bce0)\n- **Custom Icons**: Import with scaling slider (dd80e86, 108b5e2)\n- **Error Boundary**: Graceful error handling (179b512)\n\n### September 2025\n- **Lasso Tools**: Rectangle and freehand selection (fec8878, 96047f3)\n- **Tooltip System**: Contextual hints for all tools (9d9a0dd, a2a47b4, 5df41f9)\n- **Icon Panel**: Improved small screen layout (77231c9)\n- **Quick Icon Selector**: Faster icon selection workflow (8576e30)\n- **Orphaned Connectors**: Automatic cleanup (d698a1a)\n\n### October 2025\n- **Connector Label Overhaul**: Up to 256 labels, per-line support (2a53437)\n- **Expanded Labels**: Default expanded in exports (3cbcada)\n- **Zoom to Pan**: Improved zoom behavior (d3fdfea)\n- **Race Condition Fixes**: Diagram loading improvements (4e13033)\n- **Reroute Tooltips**: Connector manipulation guidance (d5db93c)\n\n---\n\nThis encyclopedia serves as a comprehensive guide to the FossFLOW codebase. Use the table of contents and quick references to efficiently navigate to the areas you need to modify or understand.\n\n**For Contributors**: See [CONTRIBUTORS.md](./CONTRIBUTORS.md) for contribution guidelines and [FOSSFLOW_TODO.md](./FOSSFLOW_TODO.md) for current issues and roadmap.\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2023 Mark Mankarious\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# FossFLOW - Isometric Diagramming Tool \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\n\n

\n\"stan-smith%2FFossFLOW\n

\n\nHey! Stan here, if you've used FossFLOW and it's helped you, I'd really appreciate if you could donate something small :) I work full time, and finding the time to work on this project is challenging enough.\nIf you've had a feature that I've implemented for you, or fixed a bug it'd be great if you could :) if not, that's not a problem, this software will always remain free!\n\n\nAlso! If you haven't yet, please check out the underlying library this is built on by @markmanx I truly stand on the shoulders of a giant here 🫡\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"Buy\n\nThanks,\n\n-Stan\n\n## Try it online\n

\nGo to --> https://stan-smith.github.io/FossFLOW/ <-- \n

\n

\n\n \n Check out my latest project: SlingShot - Dead easy video streaming over QUIC\n \n

\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW is a powerful, open-source Progressive Web App (PWA) for creating beautiful isometric diagrams. Built with React and the Isoflow (Now forked and published to NPM as fossflow) library, it runs entirely in your browser with offline support.\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTING.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTING.md)** - How to contribute to the project.\n\n## 🐳 Quick Deploy with Docker\n\n```bash\n# Using Docker Compose (recommended - includes persistent storage)\ndocker compose up\n\n# Or run directly from Docker Hub with persistent storage\ndocker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest\n```\n\nServer storage is enabled by default in Docker. Your diagrams will be saved to `./diagrams` on the host.\n\nTo disable server storage, set `ENABLE_SERVER_STORAGE=false`:\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest\n```\n\n### HTTP Basic Authentication (Optional)\n\nProtect your FossFLOW instance with HTTP Basic Auth:\n\n```bash\n# With Docker Compose\nHTTP_AUTH_USER=admin HTTP_AUTH_PASSWORD=secret docker compose up\n\n# Or with docker run\ndocker run -p 80:80 \\\n -e HTTP_AUTH_USER=admin \\\n -e HTTP_AUTH_PASSWORD=secret \\\n stnsmith/fossflow:latest\n```\n\n> **Note**: Both variables must be set to enable authentication. If either is empty, the app is accessible without login.\n\n## Quick Start (Local Development)\n\n```bash\n# Clone the repository\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# Install dependencies\nnpm install\n\n# Build the library (required first time)\nnpm run build:lib\n\n# Start development server\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n## Monorepo Structure\n\nThis is a monorepo containing two packages:\n\n- `packages/fossflow-lib` - React component library for drawing network diagrams (built with Webpack)\n- `packages/fossflow-app` - Progressive Web App which wraps the lib and presents it (built with RSBuild)\n\n### Development Commands\n\n```bash\n# Development\nnpm run dev # Start app development server\nnpm run dev:lib # Watch mode for library development\n\n# Building\nnpm run build # Build both library and app\nnpm run build:lib # Build library only\nnpm run build:app # Build app only\n\n# Testing & Linting\nnpm test # Run unit tests\nnpm run lint # Check for linting errors\n\n# E2E Tests (Selenium)\ncd e2e-tests\n./run-tests.sh # Run end-to-end tests (requires Docker & Python)\n\n# Publishing\nnpm run publish:lib # Publish library to npm\n```\n\n## How to Use\n\n### Creating Diagrams\n\n1. **Add Items**:\n - Press the \"+\" button on the top right menu, the library of components will appear on the left\n - Drag and drop components from the library onto the canvas\n - Or right-click on the grid and select \"Add node\"\n\n2. **Connect Items**: \n - Select the Connector tool (press 'C' or click connector icon)\n - **Click mode** (default): Click first node, then click second node\n - **Drag mode** (optional): Click and drag from first to second node\n - Switch modes in Settings → Connectors tab\n\n3. **Save Your Work**:\n - **Quick Save** - Saves to browser session\n - **Export** - Download as JSON file\n - **Import** - Load from JSON file\n\n### Storage Options\n\n- **Session Storage**: Temporary saves cleared when browser closes\n- **Export/Import**: Permanent storage as JSON files\n- **Auto-Save**: Automatically saves changes every 5 seconds to session\n\n## Contributing\n\nWe welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n## Documentation\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](FOSSFLOW_ENCYCLOPEDIA.md) - Comprehensive guide to the codebase\n- [CONTRIBUTING.md](CONTRIBUTING.md) - Contributing guidelines\n\n## License\n\nMIT\n" }, { "path": "compose.dev.yml", "content": "services:\n fossflow:\n build: .\n ports:\n - \"3000:80\"\n - \"3001:3001\"\n environment:\n - NODE_ENV=development\n - ENABLE_SERVER_STORAGE=true\n - STORAGE_PATH=/data/diagrams\n - ENABLE_GIT_BACKUP=false\n - HTTP_AUTH_USER=${HTTP_AUTH_USER:-}\n - HTTP_AUTH_PASSWORD=${HTTP_AUTH_PASSWORD:-}\n volumes:\n - ./diagrams:/data/diagrams\n" }, { "path": "compose.yml", "content": "services:\n fossflow:\n image: stnsmith/fossflow:latest\n pull_policy: always\n ports:\n - 80:80\n environment:\n - NODE_ENV=production\n - ENABLE_SERVER_STORAGE=${ENABLE_SERVER_STORAGE:-true}\n - STORAGE_PATH=/data/diagrams\n - ENABLE_GIT_BACKUP=${ENABLE_GIT_BACKUP:-false}\n - HTTP_AUTH_USER=${HTTP_AUTH_USER:-}\n - HTTP_AUTH_PASSWORD=${HTTP_AUTH_PASSWORD:-}\n volumes:\n - ./diagrams:/data/diagrams\n" }, { "path": "docker-entrypoint.sh", "content": "#!/bin/sh\n\n# Start Node.js backend if server storage is enabled\nif [ \"$ENABLE_SERVER_STORAGE\" = \"true\" ]; then\n echo \"Starting FossFLOW backend server...\"\n cd /app/packages/fossflow-backend\n npm install --production\n node server.js &\n echo \"Backend server started\"\nelse\n echo \"Server storage disabled, backend not started\"\nfi\n\n# Start nginx\n\n# Configure HTTP Basic Auth\ntouch /etc/nginx/.htpasswd\nif [ -n \"$HTTP_AUTH_USER\" ] && [ -n \"$HTTP_AUTH_PASSWORD\" ]; then\n echo \"Setup HTTP Basic Auth...\"\n echo \"$HTTP_AUTH_USER:$(printf '%s' \"$HTTP_AUTH_PASSWORD\" | openssl passwd -bcrypt -stdin)\" > /etc/nginx/.htpasswd\n sed -i 's/AUTH_BASIC_SETTING/\"Restricted\"/g' /etc/nginx/http.d/default.conf\nelse\n echo \"No (optional) HTTP Basic Auth configured\"\n sed -i 's/AUTH_BASIC_SETTING/off/g' /etc/nginx/http.d/default.conf\nfi\necho \"Starting nginx...\"\nnginx -g \"daemon off;\"" }, { "path": "docs/README.bn.md", "content": "# FossFLOW - আইসোমেট্রিক ডায়াগ্রাম টুল \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\nহ্যালো! আমি Stan, যদি আপনি FossFLOW ব্যবহার করে থাকেন এবং এটি আপনাকে সাহায্য করেছে, আমি সত্যিই প্রশংসা করব যদি আপনি কিছু ছোট দান করতে পারেন :) আমি পূর্ণকালীন কাজ করি, এবং এই প্রকল্পে কাজ করার সময় খুঁজে পাওয়াটা যথেষ্ট চ্যালেঞ্জিং।\nযদি আমি আপনার জন্য একটি ফিচার বাস্তবায়ন করেছি বা একটি বাগ ঠিক করেছি তবে এটি দুর্দান্ত হবে যদি আপনি পারেন :) যদি না হয়, তাতে কোনো সমস্যা নেই, এই সফটওয়্যারটি সর্বদা বিনামূল্যে থাকবে!\n\n\nএছাড়াও! যদি আপনি এখনও না করে থাকেন, তবে @markmanx দ্বারা নির্মিত অন্তর্নিহিত লাইব্রেরিটি দেখুন যার উপর এটি তৈরি। আমি সত্যিই এখানে একজন দৈত্যের কাঁধে দাঁড়িয়ে আছি 🫡\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"image\" https://buymeacoffee.com/stan.smith \n\n\nধন্যবাদ,\n\n-Stan\n\n## এটি অনলাইনে চেষ্টা করুন\n\nযান --> https://stan-smith.github.io/FossFLOW/ <-- \n\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW হল সুন্দর আইসোমেট্রিক ডায়াগ্রাম তৈরি করার জন্য একটি শক্তিশালী, ওপেন-সোর্স প্রগ্রেসিভ ওয়েব অ্যাপ (PWA)। React এবং Isoflow লাইব্রেরি দিয়ে তৈরি (এখন ফর্ক করা এবং NPM-এ fossflow হিসেবে প্রকাশিত), এটি অফলাইন সাপোর্ট সহ সম্পূর্ণরূপে আপনার ব্রাউজারে চলে।\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - প্রকল্পে কীভাবে অবদান রাখবেন।\n\n## সাম্প্রতিক আপডেট (অক্টোবর 2025)\n\n### বহুভাষিক সমর্থন\n- **8টি ভাষা সমর্থিত** - ইংরেজি, চীনা (সরলীকৃত), স্প্যানিশ, পর্তুগিজ (ব্রাজিলিয়ান), ফরাসি, হিন্দি, বাংলা এবং রাশিয়ানে সম্পূর্ণ ইন্টারফেস অনুবাদ\n- **ভাষা নির্বাচক** - অ্যাপ হেডারে ব্যবহার করা সহজ ভাষা সুইচার\n- **সম্পূর্ণ অনুবাদ** - সমস্ত মেনু, ডায়ালগ, সেটিংস, টুলটিপ এবং সাহায্য বিষয়বস্তু অনুবাদিত\n- **লোকেল-সচেতন** - স্বয়ংক্রিয়ভাবে আপনার ভাষা পছন্দ সনাক্ত করে এবং মনে রাখে\n\n### উন্নত সংযোজক টুল\n- **ক্লিক-ভিত্তিক তৈরি** - নতুন ডিফল্ট মোড: প্রথম নোডে ক্লিক করুন, তারপর সংযোগ করতে দ্বিতীয় নোডে ক্লিক করুন\n- **ড্র্যাগ মোড বিকল্প** - মূল ড্র্যাগ-এন্ড-ড্রপ এখনও সেটিংসের মাধ্যমে উপলব্ধ\n- **মোড নির্বাচন** - সেটিংস → সংযোজক ট্যাবে ক্লিক এবং ড্র্যাগ মোডের মধ্যে স্যুইচ করুন\n- **উন্নত নির্ভরযোগ্যতা** - ক্লিক মোড আরও পূর্বাভাসযোগ্য সংযোগ তৈরি প্রদান করে\n\n### কাস্টম আইকন আমদানি\n- **আপনার নিজস্ব আইকন আমদানি করুন** - আপনার ডায়াগ্রামে ব্যবহার করতে কাস্টম আইকন (PNG, JPG, SVG) আপলোড করুন\n- **স্বয়ংক্রিয় স্কেলিং** - পেশাদার চেহারার জন্য আইকনগুলি স্বয়ংক্রিয়ভাবে সামঞ্জস্যপূর্ণ আকারে স্কেল করা হয়\n- **আইসোমেট্রিক/ফ্ল্যাট টগল** - আমদানি করা আইকনগুলি 3D আইসোমেট্রিক বা ফ্ল্যাট 2D হিসাবে প্রদর্শিত হবে কিনা তা চয়ন করুন\n- **স্মার্ট অধ্যবসায়** - কাস্টম আইকনগুলি ডায়াগ্রামের সাথে সংরক্ষিত এবং সমস্ত স্টোরেজ পদ্ধতিতে কাজ করে\n- **আইকন সম্পদ** - বিনামূল্যে আইকন খুঁজুন:\n - [Iconify Icon Sets](https://icon-sets.iconify.design/) - হাজার হাজার বিনামূল্যে SVG আইকন\n - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - উচ্চ মানের আইসোমেট্রিক আইকন প্যাক\n\n### সার্ভার স্টোরেজ সমর্থন\n- **স্থায়ী স্টোরেজ** - সার্ভার ফাইল সিস্টেমে সংরক্ষিত ডায়াগ্রাম, ব্রাউজার সেশনে টিকে থাকে\n- **মাল্টি-ডিভাইস অ্যাক্সেস** - Docker ডিপ্লয়মেন্ট ব্যবহার করার সময় যেকোনো ডিভাইস থেকে আপনার ডায়াগ্রাম অ্যাক্সেস করুন\n- **স্বয়ংক্রিয় সনাক্তকরণ** - উপলব্ধ হলে UI স্বয়ংক্রিয়ভাবে সার্ভার স্টোরেজ দেখায়\n- **ওভাররাইট সুরক্ষা** - ডুপ্লিকেট নাম দিয়ে সংরক্ষণ করার সময় নিশ্চিতকরণ ডায়ালগ\n- **Docker একীকরণ** - Docker ডিপ্লয়মেন্টে ডিফল্টভাবে সার্ভার স্টোরেজ সক্রিয়\n\n### উন্নত ইন্টারঅ্যাকশন বৈশিষ্ট্য\n- **কনফিগারযোগ্য হটকি** - ভিজ্যুয়াল সূচক সহ টুল নির্বাচনের জন্য তিনটি প্রোফাইল (QWERTY, SMNRCT, কোনোটিই নয়)\n- **উন্নত প্যান কন্ট্রোল** - খালি এলাকা ড্র্যাগ, মিডল/রাইট ক্লিক, মডিফায়ার কী (Ctrl/Alt) এবং কীবোর্ড নেভিগেশন (Arrow/WASD/IJKL) সহ একাধিক প্যান পদ্ধতি\n- **সংযোজক তীর টগল করুন** - পৃথক সংযোজকগুলিতে তীরগুলি দেখানো/লুকানোর বিকল্প\n- **স্থায়ী টুল নির্বাচন** - সংযোগ তৈরি করার পরে সংযোজক টুল সক্রিয় থাকে\n- **সেটিংস ডায়ালগ** - হটকি এবং প্যান কন্ট্রোলের জন্য কেন্দ্রীভূত কনফিগারেশন\n\n### Docker এবং CI/CD উন্নতি\n- **স্বয়ংক্রিয় Docker বিল্ড** - কমিটে স্বয়ংক্রিয় Docker Hub ডিপ্লয়মেন্টের জন্য GitHub Actions ওয়ার্কফ্লো\n- **মাল্টি-আর্কিটেকচার সমর্থন** - `linux/amd64` এবং `linux/arm64` উভয়ের জন্য Docker ইমেজ\n- **প্রি-বিল্ট ইমেজ** - `stnsmith/fossflow:latest`-এ উপলব্ধ\n\n### Monorepo আর্কিটেকচার\n- লাইব্রেরি এবং অ্যাপ্লিকেশন উভয়ের জন্য **একক রিপোজিটরি**\n- সুসংগত নির্ভরতা ব্যবস্থাপনার জন্য **NPM Workspaces**\n- রুটে `npm run build` দিয়ে **একীভূত বিল্ড প্রক্রিয়া**\n\n### UI সংশোধন\n- Quill সম্পাদক টুলবার আইকন প্রদর্শন সমস্যা সংশোধন করা হয়েছে\n- প্রসঙ্গ মেনুতে React কী সতর্কতা সমাধান করা হয়েছে\n- markdown সম্পাদক স্টাইলিং উন্নত করা হয়েছে\n\n## বৈশিষ্ট্য\n\n- 🎨 **আইসোমেট্রিক ডায়াগ্রামিং** - চমৎকার 3D-স্টাইল প্রযুক্তিগত ডায়াগ্রাম তৈরি করুন\n- 💾 **অটো-সেভ** - আপনার কাজ প্রতি 5 সেকেন্ডে স্বয়ংক্রিয়ভাবে সংরক্ষিত হয়\n- 📱 **PWA সমর্থন** - Mac এবং Linux-এ নেটিভ অ্যাপ হিসাবে ইনস্টল করুন\n- 🔒 **গোপনীয়তা-প্রথম** - সমস্ত ডেটা আপনার ব্রাউজারে স্থানীয়ভাবে সংরক্ষিত\n- 📤 **আমদানি/রপ্তানি** - JSON ফাইল হিসাবে ডায়াগ্রাম শেয়ার করুন\n- 🎯 **সেশন স্টোরেজ** - ডায়ালগ ছাড়াই দ্রুত সংরক্ষণ\n- 🌐 **অফলাইন সমর্থন** - ইন্টারনেট সংযোগ ছাড়াই কাজ করুন\n- 🗄️ **সার্ভার স্টোরেজ** - Docker ব্যবহার করার সময় ঐচ্ছিক স্থায়ী স্টোরেজ (ডিফল্টভাবে সক্রিয়)\n- 🌍 **বহুভাষিক** - 8টি ভাষার জন্য সম্পূর্ণ সমর্থন: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский\n\n\n## 🐳 Docker দিয়ে দ্রুত ডিপ্লয়\n\n```bash\n# Docker Compose ব্যবহার করা (প্রস্তাবিত - স্থায়ী স্টোরেজ অন্তর্ভুক্ত)\ndocker compose up\n\n# অথবা স্থায়ী স্টোরেজ সহ Docker Hub থেকে সরাসরি চালান\ndocker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest\n```\n\nDocker-এ সার্ভার স্টোরেজ ডিফল্টভাবে সক্রিয়। আপনার ডায়াগ্রামগুলি হোস্টে `./diagrams`-এ সংরক্ষিত হবে।\n\nসার্ভার স্টোরেজ নিষ্ক্রিয় করতে, `ENABLE_SERVER_STORAGE=false` সেট করুন:\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest\n```\n\n## দ্রুত শুরু (স্থানীয় উন্নয়ন)\n\n```bash\n# রিপোজিটরি ক্লোন করুন\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# নির্ভরতা ইনস্টল করুন\nnpm install\n\n# লাইব্রেরি তৈরি করুন (প্রথমবার প্রয়োজনীয়)\nnpm run build:lib\n\n# উন্নয়ন সার্ভার শুরু করুন\nnpm run dev\n```\n\nআপনার ব্রাউজারে [http://localhost:3000](http://localhost:3000) খুলুন।\n\n## Monorepo কাঠামো\n\nএটি দুটি প্যাকেজ সম্বলিত একটি monorepo:\n\n- `packages/fossflow-lib` - নেটওয়ার্ক ডায়াগ্রাম আঁকার জন্য React কম্পোনেন্ট লাইব্রেরি (Webpack দিয়ে তৈরি)\n- `packages/fossflow-app` - আইসোমেট্রিক ডায়াগ্রাম তৈরির জন্য Progressive Web App (RSBuild দিয়ে তৈরি)\n\n### উন্নয়ন কমান্ড\n\n```bash\n# উন্নয়ন\nnpm run dev # অ্যাপ উন্নয়ন সার্ভার শুরু করুন\nnpm run dev:lib # লাইব্রেরি উন্নয়নের জন্য ওয়াচ মোড\n\n# বিল্ডিং\nnpm run build # লাইব্রেরি এবং অ্যাপ উভয়ই তৈরি করুন\nnpm run build:lib # শুধুমাত্র লাইব্রেরি তৈরি করুন\nnpm run build:app # শুধুমাত্র অ্যাপ তৈরি করুন\n\n# পরীক্ষা এবং লিন্টিং\nnpm test # ইউনিট টেস্ট চালান\nnpm run lint # লিন্টিং ত্রুটি পরীক্ষা করুন\n\n# E2E টেস্ট (Selenium)\ncd e2e-tests\n./run-tests.sh # এন্ড-টু-এন্ড টেস্ট চালান (Docker এবং Python প্রয়োজন)\n\n# প্রকাশনা\nnpm run publish:lib # npm-এ লাইব্রেরি প্রকাশ করুন\n```\n\n## কীভাবে ব্যবহার করবেন\n\n### ডায়াগ্রাম তৈরি করা\n\n1. **আইটেম যোগ করুন**:\n - উপরের ডানদিকের মেনুতে \"+\" বোতাম টিপুন, কম্পোনেন্ট লাইব্রেরি বাম দিকে প্রদর্শিত হবে\n - লাইব্রেরি থেকে ক্যানভাসে কম্পোনেন্ট ড্র্যাগ এবং ড্রপ করুন\n - অথবা গ্রিডে রাইট-ক্লিক করুন এবং \"নোড যোগ করুন\" নির্বাচন করুন\n\n2. **আইটেম সংযুক্ত করুন**:\n - সংযোজক টুল নির্বাচন করুন ('C' টিপুন বা সংযোজক আইকনে ক্লিক করুন)\n - **ক্লিক মোড** (ডিফল্ট): প্রথম নোডে ক্লিক করুন, তারপর দ্বিতীয় নোডে ক্লিক করুন\n - **ড্র্যাগ মোড** (ঐচ্ছিক): প্রথম নোড থেকে দ্বিতীয় নোডে ক্লিক করুন এবং ড্র্যাগ করুন\n - সেটিংস → সংযোজক ট্যাবে মোড স্যুইচ করুন\n\n3. **আপনার কাজ সংরক্ষণ করুন**:\n - **দ্রুত সংরক্ষণ** - ব্রাউজার সেশনে সংরক্ষণ করে\n - **রপ্তানি** - JSON ফাইল হিসাবে ডাউনলোড করুন\n - **আমদানি** - JSON ফাইল থেকে লোড করুন\n\n### স্টোরেজ বিকল্প\n\n- **সেশন স্টোরেজ**: ব্রাউজার বন্ধ হলে অস্থায়ী সংরক্ষণগুলি মুছে যায়\n- **রপ্তানি/আমদানি**: JSON ফাইল হিসাবে স্থায়ী স্টোরেজ\n- **অটো-সেভ**: সেশনে প্রতি 5 সেকেন্ডে পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে সংরক্ষণ করে\n\n## অবদান রাখা\n\nআমরা অবদানকে স্বাগত জানাই! দয়া করে নির্দেশিকার জন্য [CONTRIBUTORS.md](../CONTRIBUTORS.md) দেখুন।\n\n## ডকুমেন্টেশন\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - কোডবেসের জন্য ব্যাপক গাইড\n- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - অবদানের নির্দেশিকা\n\n## লাইসেন্স\n\nMIT\n" }, { "path": "docs/README.cn.md", "content": "# FossFLOW - 等距图表工具 \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\n嗨！ 我是 Stan，如果您使用过 FossFLOW 并觉得它对您有帮助，我会非常感激您能捐助一点点 :) 我全职工作，抽时间来维护这个项目已经很不容易了。\n如果我为您实现了某个功能，或者修复了某个 bug，能得到您的支持将非常棒 :) 如果不能，也没关系，这个软件将永远免费！\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"image\" https://buymeacoffee.com/stan.smith \n\n感谢，\n\n-Stan\n\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW 是一款功能强大的、开源的渐进式 Web 应用（PWA），专为创建精美的等距图表而设计。它基于 React 和 Isoflow（现已 fork 并以 fossflow 名称发布到 NPM）库构建，完全在浏览器中运行，并支持离线使用。\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - 如何为项目做出贡献。\n\n## 功能\n\n- 🎨 **等距图表** - 创建令人惊叹的 3D 风格技术图表\n- 💾 **自动保存** - 您的工作每 5 秒自动保存一次\n- 📱 **PWA 支持** - 在 Mac 和 Linux 上安装为原生应用\n- 🔒 **隐私优先** - 所有数据都存储在您的浏览器中\n- 📤 **导入/导出** - 以 JSON 文件形式分享图表\n- 🎯 **会话存储** - 快速保存，无需对话框\n- 🌐 **离线支持** - 无需网络连接即可工作\n\n## 在线试用\n\n访问 https://stan-smith.github.io/FossFLOW/\n\n## 快速开始 (本地开发)\n\n```bash\n# 克隆仓库\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# 安装依赖\nnpm install\n\n# 启动开发服务器\nnpm start\n```\n\n在浏览器中打开 [http://localhost:3000](http://localhost:3000)。\n\n## 使用方法\n\n### 创建图表\n\n1. **添加项目**：\n - 按下右上角菜单的 \"+\" 按钮，组件库将出现在左侧。从库中拖放组件到画布上。\n - 或者右键点击网格并选择 \"Add node\"，然后点击新创建的节点并从左侧菜单自定义它。\n2. **连接项目**：使用连接器显示组件之间的关系。\n3. **自定义**：更改项目的颜色、标签和属性。\n4. **导航**：平移和缩放以处理不同区域。\n\n### 保存您的工作\n\n- **自动保存**：图表每 5 秒自动保存到浏览器存储。\n- **快速保存**：点击 \"Quick Save (Session)\" 进行即时保存，无需弹窗。\n- **另存为**：使用 \"Save New\" 创建具有不同名称的副本。\n\n### 管理图表\n\n- **加载**：点击 \"Load\" 查看所有已保存的图表。\n- **导入**：从他人分享的 JSON 文件加载图表。\n- **导出**：将图表下载为 JSON 文件以分享或备份。\n- **存储**：使用 \"Storage Manager\" 管理浏览器存储空间。\n\n### 键盘快捷键\n\n- `Delete` - 删除选中项\n- 鼠标滚轮 - 放大/缩小\n- 点击并拖动 - 平移画布\n- ***新增*** Ctrl+Z 撤销，Ctrl+Y 重做\n\n## 生产环境构建\n\n```bash\n# 创建优化后的生产环境构建\nnpm run build\n\n# 本地运行生产环境构建\nnpx serve -s build\n```\n\n`build` 文件夹包含所有部署所需的文件。\n\n如果需要将应用部署到自定义路径（例如非根路径），请使用以下命令：\n```bash\n# 为指定路径创建优化后的生产环境构建\nPUBLIC_URL=\"https://mydomain.tld/path/to/app\" npm run build\n```\n这会将定义的 `PUBLIC_URL` 添加为所有静态文件链接的前缀。\n\n## 部署\n\n### 静态托管\n\n将 `build` 文件夹部署到任何静态托管服务：\n- GitHub Pages\n- Netlify\n- Vercel\n- AWS S3\n- 任何 Web 服务器\n\n### 重要说明\n\n1. **需要 HTTPS**：PWA 功能需要 HTTPS（localhost 除外）\n2. **浏览器存储**：图表保存在浏览器的 localStorage 中（约 5-10MB 限制）\n3. **备份**：定期将重要图表导出为 JSON 文件\n\n## 浏览器支持\n\n- Chrome/Edge（推荐）✅\n- Firefox ✅\n- Safari ✅\n- 支持 PWA 的移动浏览器 ✅\n\n## 问题排查\n\n### 存储已满\n- 使用存储管理器释放空间\n- 导出并删除旧图表\n- 清除浏览器数据（最后手段 - 会删除所有图表）\n\n### 无法安装 PWA\n- 确保使用 HTTPS\n- 尝试使用 Chrome 或 Edge 浏览器\n- 检查是否已安装\n\n### 图表丢失\n- 检查浏览器的 localStorage\n- 查找自动保存的版本\n- 始终导出重要工作\n\n## 技术栈\n\n- **React** - UI 框架\n- **TypeScript** - 类型安全\n- **Isoflow** - 等距图表引擎\n- **PWA** - 离线优先的 Web 应用\n\n## 贡献\n\n欢迎贡献！请随时提交 Pull Request。\n\n## 许可证\n\nIsoflow 使用 MIT 许可证发布。\n\nFossFLOW 使用 Unlicense 许可证发布，您可以随意使用。\n\n## 鸣谢\n\n基于 [Isoflow](https://github.com/markmanx/isoflow) 库构建。\n\nx0z.co" }, { "path": "docs/README.de.md", "content": "# FossFLOW - Isometrisches Diagramm-Werkzeug \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\nHey! Hier ist Stan. Wenn du FossFLOW benutzt hast und es dir geholfen hat, würde ich mich sehr über eine kleine Spende freuen :) Ich arbeite Vollzeit, und Zeit für dieses Projekt zu finden ist schon schwer genug.\nWenn ich ein Feature für dich implementiert oder einen Bug behoben habe, wäre es toll, wenn du etwas spenden könntest :) Falls nicht, ist das kein Problem – diese Software bleibt immer kostenlos!\n\nAußerdem! Falls noch nicht geschehen, schau dir bitte die zugrunde liegende Bibliothek an, auf der dies aufbaut, von @markmanx. Ich stehe hier wirklich auf den Schultern eines Riesen 🫡\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"Buy\n\nDanke,\n\n-Stan\n\n## Online ausprobieren\n\nGehe zu --> https://stan-smith.github.io/FossFLOW/ <-- \n\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW ist eine leistungsstarke, quelloffene Progressive Web App (PWA) zum Erstellen schöner isometrischer Diagramme. Gebaut mit React und der Isoflow-Bibliothek (jetzt geforkt und auf NPM als fossflow veröffentlicht), läuft sie vollständig in deinem Browser mit Offline-Unterstützung.\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTING.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTING.md)** - Wie du zum Projekt beitragen kannst.\n\n## 🐳 Schnelle Bereitstellung mit Docker\n\n```bash\n# Mit Docker Compose (empfohlen - beinhaltet persistenten Speicher)\ndocker compose up\n\n# Oder direkt von Docker Hub mit persistentem Speicher ausführen\ndocker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest\n```\n\nServer-Speicher ist in Docker standardmäßig aktiviert. Deine Diagramme werden in `./diagrams` auf dem Host gespeichert.\n\nUm den Server-Speicher zu deaktivieren, setze `ENABLE_SERVER_STORAGE=false`:\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest\n```\n\n## Schnellstart (Lokale Entwicklung)\n\n```bash\n# Repository klonen\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# Abhängigkeiten installieren\nnpm install\n\n# Bibliothek bauen (beim ersten Mal erforderlich)\nnpm run build:lib\n\n# Entwicklungsserver starten\nnpm run dev\n```\n\nÖffne [http://localhost:3000](http://localhost:3000) in deinem Browser.\n\n## Monorepo-Struktur\n\nDies ist ein Monorepo mit zwei Paketen:\n\n- `packages/fossflow-lib` - React-Komponentenbibliothek zum Zeichnen von Netzwerkdiagrammen (gebaut mit Webpack)\n- `packages/fossflow-app` - Progressive Web App, die die Bibliothek umhüllt und präsentiert (gebaut mit RSBuild)\n\n### Entwicklungsbefehle\n\n```bash\n# Entwicklung\nnpm run dev # App-Entwicklungsserver starten\nnpm run dev:lib # Watch-Modus für Bibliotheksentwicklung\n\n# Bauen\nnpm run build # Bibliothek und App bauen\nnpm run build:lib # Nur Bibliothek bauen\nnpm run build:app # Nur App bauen\n\n# Testen & Linting\nnpm test # Unit-Tests ausführen\nnpm run lint # Auf Linting-Fehler prüfen\n\n# E2E-Tests (Selenium)\ncd e2e-tests\n./run-tests.sh # End-to-End-Tests ausführen (erfordert Docker & Python)\n\n# Veröffentlichen\nnpm run publish:lib # Bibliothek auf npm veröffentlichen\n```\n\n## Verwendung\n\n### Diagramme erstellen\n\n1. **Elemente hinzufügen**:\n - Drücke die \"+\"-Taste im Menü oben rechts, die Komponentenbibliothek erscheint links\n - Ziehe Komponenten per Drag-and-Drop aus der Bibliothek auf die Leinwand\n - Oder klicke mit der rechten Maustaste auf das Raster und wähle \"Knoten hinzufügen\"\n\n2. **Elemente verbinden**:\n - Wähle das Verbindungswerkzeug (drücke 'C' oder klicke auf das Verbindungssymbol)\n - **Klick-Modus** (Standard): Klicke auf den ersten Knoten, dann auf den zweiten\n - **Zieh-Modus** (optional): Klicke und ziehe vom ersten zum zweiten Knoten\n - Wechsle den Modus in Einstellungen → Verbindungen\n\n3. **Arbeit speichern**:\n - **Schnellspeichern** - Speichert in der Browser-Sitzung\n - **Exportieren** - Als JSON-Datei herunterladen\n - **Importieren** - Aus JSON-Datei laden\n\n### Speicheroptionen\n\n- **Sitzungsspeicher**: Temporäre Speicherungen, die beim Schließen des Browsers gelöscht werden\n- **Export/Import**: Permanente Speicherung als JSON-Dateien\n- **Automatisches Speichern**: Speichert Änderungen automatisch alle 5 Sekunden in der Sitzung\n\n## Beitragen\n\nWir freuen uns über Beiträge! Siehe [CONTRIBUTORS.md](../CONTRIBUTORS.md) für Richtlinien.\n\n## Dokumentation\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Umfassender Leitfaden zur Codebase\n- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Beitragsrichtlinien\n\n## Lizenz\n\nMIT\n" }, { "path": "docs/README.es.md", "content": "# FossFLOW - Herramienta de Diagramas Isométricos \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\n¡Hola! Soy Stan, si has usado FossFLOW y te ha ayudado, ¡realmente agradecería si pudieras donar algo pequeño :) Trabajo a tiempo completo, y encontrar tiempo para trabajar en este proyecto ya es bastante desafiante.\nSi he implementado una función para ti o arreglado un error, sería genial si pudieras :) si no, no hay problema, ¡este software siempre será gratuito!\n\n\n¡También! Si aún no lo has hecho, por favor echa un vistazo a la biblioteca subyacente en la que esto está construido por @markmanx Realmente estoy sobre los hombros de un gigante aquí 🫡\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"image\" https://buymeacoffee.com/stan.smith \n\n\nGracias,\n\n-Stan\n\n## Pruébalo en línea\n\nVe a --> https://stan-smith.github.io/FossFLOW/ <-- \n\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW es una potente aplicación web progresiva (PWA) de código abierto para crear hermosos diagramas isométricos. Construido con React y la biblioteca Isoflow (Ahora bifurcada y publicada en NPM como fossflow), se ejecuta completamente en tu navegador con soporte sin conexión.\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Cómo contribuir al proyecto.\n\n## Actualizaciones Recientes (Octubre 2025)\n\n### Soporte Multilingüe\n- **8 Idiomas Soportados** - Traducción completa de la interfaz en inglés, chino (simplificado), español, portugués (brasileño), francés, hindi, bengalí y ruso\n- **Selector de Idioma** - Selector de idioma fácil de usar en el encabezado de la aplicación\n- **Traducción Completa** - Todos los menús, diálogos, configuraciones, información sobre herramientas y contenido de ayuda traducidos\n- **Consciente de la Localización** - Detecta y recuerda automáticamente tu preferencia de idioma\n\n### Herramienta de Conector Mejorada\n- **Creación Basada en Clics** - Nuevo modo predeterminado: haz clic en el primer nodo, luego en el segundo nodo para conectar\n- **Opción de Modo de Arrastre** - El arrastre y colocación original sigue disponible a través de configuración\n- **Selección de Modo** - Cambia entre los modos de clic y arrastre en Configuración → pestaña Conectores\n- **Mejor Fiabilidad** - El modo de clic proporciona una creación de conexión más predecible\n\n### Importación de Iconos Personalizados\n- **Importa Tus Propios Iconos** - Sube iconos personalizados (PNG, JPG, SVG) para usar en tus diagramas\n- **Escalado Automático** - Los iconos se escalan automáticamente a tamaños consistentes para una apariencia profesional\n- **Alternar Isométrico/Plano** - Elige si los iconos importados aparecen como 3D isométrico o 2D plano\n- **Persistencia Inteligente** - Los iconos personalizados se guardan con los diagramas y funcionan en todos los métodos de almacenamiento\n- **Recursos de Iconos** - Encuentra iconos gratuitos en:\n - [Iconify Icon Sets](https://icon-sets.iconify.design/) - Miles de iconos SVG gratuitos\n - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - Paquetes de iconos isométricos de alta calidad\n\n### Soporte de Almacenamiento en Servidor\n- **Almacenamiento Persistente** - Diagramas guardados en el sistema de archivos del servidor, persisten entre sesiones del navegador\n- **Acceso Multi-dispositivo** - Accede a tus diagramas desde cualquier dispositivo cuando uses implementación Docker\n- **Detección Automática** - La interfaz de usuario muestra automáticamente el almacenamiento del servidor cuando está disponible\n- **Protección contra Sobrescritura** - Diálogo de confirmación al guardar con nombres duplicados\n- **Integración Docker** - Almacenamiento en servidor habilitado por defecto en implementaciones Docker\n\n### Funciones de Interacción Mejoradas\n- **Teclas de Acceso Rápido Configurables** - Tres perfiles (QWERTY, SMNRCT, Ninguno) para selección de herramientas con indicadores visuales\n- **Controles de Panorámica Avanzados** - Múltiples métodos de panorámica incluyendo arrastre de área vacía, clic medio/derecho, teclas modificadoras (Ctrl/Alt) y navegación por teclado (Flechas/WASD/IJKL)\n- **Alternar Flechas de Conector** - Opción para mostrar/ocultar flechas en conectores individuales\n- **Selección de Herramienta Persistente** - La herramienta de conector permanece activa después de crear conexiones\n- **Diálogo de Configuración** - Configuración centralizada para teclas de acceso rápido y controles de panorámica\n\n### Mejoras de Docker y CI/CD\n- **Compilaciones Docker Automatizadas** - Flujo de trabajo de GitHub Actions para implementación automática de Docker Hub en commits\n- **Soporte Multi-arquitectura** - Imágenes Docker para `linux/amd64` y `linux/arm64`\n- **Imágenes Pre-construidas** - Disponibles en `stnsmith/fossflow:latest`\n\n### Arquitectura Monorepo\n- **Repositorio único** para biblioteca y aplicación\n- **NPM Workspaces** para gestión de dependencias optimizada\n- **Proceso de compilación unificado** con `npm run build` en la raíz\n\n### Correcciones de Interfaz\n- Se corrigió el problema de visualización de iconos de la barra de herramientas del editor Quill\n- Se resolvieron advertencias de clave React en menús contextuales\n- Se mejoró el estilo del editor de markdown\n\n## Características\n\n- 🎨 **Diagramación Isométrica** - Crea impresionantes diagramas técnicos en estilo 3D\n- 💾 **Autoguardado** - Tu trabajo se guarda automáticamente cada 5 segundos\n- 📱 **Soporte PWA** - Instala como una aplicación nativa en Mac y Linux\n- 🔒 **Privacidad Primero** - Todos los datos se almacenan localmente en tu navegador\n- 📤 **Importar/Exportar** - Comparte diagramas como archivos JSON\n- 🎯 **Almacenamiento de Sesión** - Guardado rápido sin diálogos\n- 🌐 **Soporte Sin Conexión** - Trabaja sin conexión a internet\n- 🗄️ **Almacenamiento en Servidor** - Almacenamiento persistente opcional cuando se usa Docker (habilitado por defecto)\n- 🌍 **Multilingüe** - Soporte completo para 8 idiomas: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский\n\n\n## 🐳 Implementación Rápida con Docker\n\n```bash\n# Usando Docker Compose (recomendado - incluye almacenamiento persistente)\ndocker compose up\n\n# O ejecutar directamente desde Docker Hub con almacenamiento persistente\ndocker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest\n```\n\nEl almacenamiento en servidor está habilitado por defecto en Docker. Tus diagramas se guardarán en `./diagrams` en el host.\n\nPara deshabilitar el almacenamiento en servidor, establece `ENABLE_SERVER_STORAGE=false`:\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest\n```\n\n## Inicio Rápido (Desarrollo Local)\n\n```bash\n# Clonar el repositorio\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# Instalar dependencias\nnpm install\n\n# Compilar la biblioteca (requerido la primera vez)\nnpm run build:lib\n\n# Iniciar servidor de desarrollo\nnpm run dev\n```\n\nAbre [http://localhost:3000](http://localhost:3000) en tu navegador.\n\n## Estructura del Monorepo\n\nEste es un monorepo que contiene dos paquetes:\n\n- `packages/fossflow-lib` - Biblioteca de componentes React para dibujar diagramas de red (construida con Webpack)\n- `packages/fossflow-app` - Aplicación Web Progresiva para crear diagramas isométricos (construida con RSBuild)\n\n### Comandos de Desarrollo\n\n```bash\n# Desarrollo\nnpm run dev # Iniciar servidor de desarrollo de la aplicación\nnpm run dev:lib # Modo watch para desarrollo de biblioteca\n\n# Compilación\nnpm run build # Compilar biblioteca y aplicación\nnpm run build:lib # Compilar solo biblioteca\nnpm run build:app # Compilar solo aplicación\n\n# Pruebas y Linting\nnpm test # Ejecutar pruebas unitarias\nnpm run lint # Verificar errores de linting\n\n# Pruebas E2E (Selenium)\ncd e2e-tests\n./run-tests.sh # Ejecutar pruebas end-to-end (requiere Docker y Python)\n\n# Publicación\nnpm run publish:lib # Publicar biblioteca en npm\n```\n\n## Cómo Usar\n\n### Crear Diagramas\n\n1. **Agregar Elementos**:\n - Presiona el botón \"+\" en el menú superior derecho, la biblioteca de componentes aparecerá a la izquierda\n - Arrastra y suelta componentes de la biblioteca al lienzo\n - O haz clic derecho en la cuadrícula y selecciona \"Agregar nodo\"\n\n2. **Conectar Elementos**:\n - Selecciona la herramienta Conector (presiona 'C' o haz clic en el icono del conector)\n - **Modo de clic** (predeterminado): Haz clic en el primer nodo, luego haz clic en el segundo nodo\n - **Modo de arrastre** (opcional): Haz clic y arrastra desde el primer nodo al segundo\n - Cambia de modo en Configuración → pestaña Conectores\n\n3. **Guardar Tu Trabajo**:\n - **Guardado Rápido** - Guarda en la sesión del navegador\n - **Exportar** - Descargar como archivo JSON\n - **Importar** - Cargar desde archivo JSON\n\n### Opciones de Almacenamiento\n\n- **Almacenamiento de Sesión**: Guardados temporales eliminados cuando se cierra el navegador\n- **Exportar/Importar**: Almacenamiento permanente como archivos JSON\n- **Autoguardado**: Guarda automáticamente los cambios cada 5 segundos en la sesión\n\n## Contribuir\n\n¡Damos la bienvenida a las contribuciones! Por favor consulta [CONTRIBUTORS.md](../CONTRIBUTORS.md) para las pautas.\n\n## Documentación\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Guía completa del código base\n- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Pautas de contribución\n\n## Licencia\n\nMIT\n" }, { "path": "docs/README.fr.md", "content": "# FossFLOW - Outil de Diagrammes Isométriques \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\nSalut ! C'est Stan, si vous avez utilisé FossFLOW et qu'il vous a aidé, j'apprécierais vraiment si vous pouviez faire un petit don :) Je travaille à temps plein, et trouver le temps de travailler sur ce projet est déjà assez difficile.\nSi j'ai implémenté une fonctionnalité pour vous ou corrigé un bug, ce serait génial si vous pouviez :) sinon, ce n'est pas un problème, ce logiciel restera toujours gratuit !\n\n\nAussi ! Si vous ne l'avez pas encore fait, veuillez consulter la bibliothèque sous-jacente sur laquelle ceci est construit par @markmanx Je me tiens vraiment sur les épaules d'un géant ici 🫡\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"image\" https://buymeacoffee.com/stan.smith \n\n\nMerci,\n\n-Stan\n\n## Essayez-le en ligne\n\nAllez sur --> https://stan-smith.github.io/FossFLOW/ <-- \n\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW est une puissante Progressive Web App (PWA) open-source pour créer de beaux diagrammes isométriques. Construit avec React et la bibliothèque Isoflow (Maintenant forkée et publiée sur NPM comme fossflow), il fonctionne entièrement dans votre navigateur avec support hors ligne.\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Comment contribuer au projet.\n\n## Mises à Jour Récentes (Octobre 2025)\n\n### Support Multilingue\n- **8 Langues Supportées** - Traduction complète de l'interface en anglais, chinois (simplifié), espagnol, portugais (brésilien), français, hindi, bengali et russe\n- **Sélecteur de Langue** - Sélecteur de langue facile à utiliser dans l'en-tête de l'application\n- **Traduction Complète** - Tous les menus, dialogues, paramètres, info-bulles et contenu d'aide traduits\n- **Sensible aux Paramètres Régionaux** - Détecte et mémorise automatiquement votre préférence de langue\n\n### Outil de Connecteur Amélioré\n- **Création par Clics** - Nouveau mode par défaut : cliquez sur le premier nœud, puis sur le second pour connecter\n- **Option Mode Glisser** - Le glisser-déposer original reste disponible via les paramètres\n- **Sélection de Mode** - Basculez entre les modes clic et glisser dans Paramètres → onglet Connecteurs\n- **Meilleure Fiabilité** - Le mode clic offre une création de connexion plus prévisible\n\n### Importation d'Icônes Personnalisées\n- **Importez Vos Propres Icônes** - Téléchargez des icônes personnalisées (PNG, JPG, SVG) à utiliser dans vos diagrammes\n- **Mise à l'Échelle Automatique** - Les icônes sont automatiquement mises à l'échelle à des tailles cohérentes pour une apparence professionnelle\n- **Bascule Isométrique/Plat** - Choisissez si les icônes importées apparaissent en 3D isométrique ou 2D plat\n- **Persistance Intelligente** - Les icônes personnalisées sont enregistrées avec les diagrammes et fonctionnent avec toutes les méthodes de stockage\n- **Ressources d'Icônes** - Trouvez des icônes gratuites sur :\n - [Iconify Icon Sets](https://icon-sets.iconify.design/) - Des milliers d'icônes SVG gratuites\n - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - Packs d'icônes isométriques de haute qualité\n\n### Support de Stockage Serveur\n- **Stockage Persistant** - Diagrammes enregistrés sur le système de fichiers du serveur, persistent entre les sessions du navigateur\n- **Accès Multi-appareils** - Accédez à vos diagrammes depuis n'importe quel appareil lors de l'utilisation du déploiement Docker\n- **Détection Automatique** - L'interface utilisateur affiche automatiquement le stockage serveur lorsqu'il est disponible\n- **Protection contre l'Écrasement** - Dialogue de confirmation lors de l'enregistrement avec des noms en double\n- **Intégration Docker** - Stockage serveur activé par défaut dans les déploiements Docker\n\n### Fonctionnalités d'Interaction Améliorées\n- **Raccourcis Clavier Configurables** - Trois profils (QWERTY, SMNRCT, Aucun) pour la sélection d'outils avec indicateurs visuels\n- **Contrôles de Panoramique Avancés** - Plusieurs méthodes de panoramique incluant glisser sur zone vide, clic milieu/droit, touches modificatrices (Ctrl/Alt) et navigation au clavier (Flèches/WASD/IJKL)\n- **Basculer les Flèches du Connecteur** - Option pour afficher/masquer les flèches sur les connecteurs individuels\n- **Sélection d'Outil Persistante** - L'outil connecteur reste actif après la création de connexions\n- **Dialogue de Paramètres** - Configuration centralisée pour les raccourcis clavier et les contrôles de panoramique\n\n### Améliorations Docker et CI/CD\n- **Builds Docker Automatisées** - Workflow GitHub Actions pour le déploiement automatique sur Docker Hub lors des commits\n- **Support Multi-architecture** - Images Docker pour `linux/amd64` et `linux/arm64`\n- **Images Pré-construites** - Disponibles sur `stnsmith/fossflow:latest`\n\n### Architecture Monorepo\n- **Référentiel unique** pour la bibliothèque et l'application\n- **NPM Workspaces** pour une gestion rationalisée des dépendances\n- **Processus de build unifié** avec `npm run build` à la racine\n\n### Corrections d'Interface\n- Problème d'affichage des icônes de la barre d'outils de l'éditeur Quill corrigé\n- Avertissements de clé React résolus dans les menus contextuels\n- Style de l'éditeur markdown amélioré\n\n## Fonctionnalités\n\n- 🎨 **Diagrammes Isométriques** - Créez de superbes diagrammes techniques en style 3D\n- 💾 **Sauvegarde Automatique** - Votre travail est automatiquement sauvegardé toutes les 5 secondes\n- 📱 **Support PWA** - Installez comme une application native sur Mac et Linux\n- 🔒 **Confidentialité d'Abord** - Toutes les données stockées localement dans votre navigateur\n- 📤 **Importer/Exporter** - Partagez des diagrammes sous forme de fichiers JSON\n- 🎯 **Stockage de Session** - Sauvegarde rapide sans dialogues\n- 🌐 **Support Hors Ligne** - Travaillez sans connexion internet\n- 🗄️ **Stockage Serveur** - Stockage persistant optionnel lors de l'utilisation de Docker (activé par défaut)\n- 🌍 **Multilingue** - Support complet pour 8 langues : English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский\n\n\n## 🐳 Déploiement Rapide avec Docker\n\n```bash\n# Utilisation de Docker Compose (recommandé - inclut le stockage persistant)\ndocker compose up\n\n# Ou exécuter directement depuis Docker Hub avec stockage persistant\ndocker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest\n```\n\nLe stockage serveur est activé par défaut dans Docker. Vos diagrammes seront enregistrés dans `./diagrams` sur l'hôte.\n\nPour désactiver le stockage serveur, définissez `ENABLE_SERVER_STORAGE=false` :\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest\n```\n\n## Démarrage Rapide (Développement Local)\n\n```bash\n# Cloner le référentiel\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# Installer les dépendances\nnpm install\n\n# Compiler la bibliothèque (requis la première fois)\nnpm run build:lib\n\n# Démarrer le serveur de développement\nnpm run dev\n```\n\nOuvrez [http://localhost:3000](http://localhost:3000) dans votre navigateur.\n\n## Structure du Monorepo\n\nCeci est un monorepo contenant deux packages :\n\n- `packages/fossflow-lib` - Bibliothèque de composants React pour dessiner des diagrammes de réseau (construit avec Webpack)\n- `packages/fossflow-app` - Progressive Web App pour créer des diagrammes isométriques (construit avec RSBuild)\n\n### Commandes de Développement\n\n```bash\n# Développement\nnpm run dev # Démarrer le serveur de développement de l'application\nnpm run dev:lib # Mode watch pour le développement de la bibliothèque\n\n# Build\nnpm run build # Compiler la bibliothèque et l'application\nnpm run build:lib # Compiler uniquement la bibliothèque\nnpm run build:app # Compiler uniquement l'application\n\n# Tests et Linting\nnpm test # Exécuter les tests unitaires\nnpm run lint # Vérifier les erreurs de linting\n\n# Tests E2E (Selenium)\ncd e2e-tests\n./run-tests.sh # Exécuter les tests end-to-end (nécessite Docker et Python)\n\n# Publication\nnpm run publish:lib # Publier la bibliothèque sur npm\n```\n\n## Comment Utiliser\n\n### Créer des Diagrammes\n\n1. **Ajouter des Éléments** :\n - Appuyez sur le bouton \"+\" dans le menu en haut à droite, la bibliothèque de composants apparaîtra à gauche\n - Glissez et déposez les composants de la bibliothèque sur le canevas\n - Ou cliquez avec le bouton droit sur la grille et sélectionnez \"Ajouter un nœud\"\n\n2. **Connecter des Éléments** :\n - Sélectionnez l'outil Connecteur (appuyez sur 'C' ou cliquez sur l'icône du connecteur)\n - **Mode clic** (par défaut) : Cliquez sur le premier nœud, puis cliquez sur le second nœud\n - **Mode glisser** (optionnel) : Cliquez et glissez du premier au second nœud\n - Basculez entre les modes dans Paramètres → onglet Connecteurs\n\n3. **Sauvegarder Votre Travail** :\n - **Sauvegarde Rapide** - Enregistre dans la session du navigateur\n - **Exporter** - Télécharger comme fichier JSON\n - **Importer** - Charger depuis un fichier JSON\n\n### Options de Stockage\n\n- **Stockage de Session** : Sauvegardes temporaires effacées à la fermeture du navigateur\n- **Exporter/Importer** : Stockage permanent sous forme de fichiers JSON\n- **Sauvegarde Automatique** : Enregistre automatiquement les modifications toutes les 5 secondes dans la session\n\n## Contribuer\n\nNous accueillons les contributions ! Veuillez consulter [CONTRIBUTORS.md](../CONTRIBUTORS.md) pour les directives.\n\n## Documentation\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Guide complet de la base de code\n- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Directives de contribution\n\n## Licence\n\nMIT\n" }, { "path": "docs/README.hi.md", "content": "# FossFLOW - आइसोमेट्रिक आरेख उपकरण \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\nनमस्ते! मैं Stan हूं, यदि आपने FossFLOW का उपयोग किया है और इसने आपकी मदद की है, तो मैं वास्तव में सराहना करूंगा यदि आप कुछ छोटा दान कर सकें :) मैं पूर्णकालिक काम करता हूं, और इस परियोजना पर काम करने के लिए समय निकालना पर्याप्त चुनौतीपूर्ण है।\nयदि मैंने आपके लिए कोई सुविधा लागू की है या कोई बग ठीक किया है, तो यह बहुत अच्छा होगा यदि आप कर सकें :) यदि नहीं, तो कोई समस्या नहीं है, यह सॉफ्टवेयर हमेशा मुफ्त रहेगा!\n\n\nसाथ ही! यदि आपने अभी तक नहीं किया है, तो कृपया @markmanx द्वारा बनाई गई अंतर्निहित लाइब्रेरी देखें, जिस पर यह बना है। मैं वास्तव में यहां एक दिग्गज के कंधों पर खड़ा हूं 🫡\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"image\" https://buymeacoffee.com/stan.smith \n\n\nधन्यवाद,\n\n-Stan\n\n## इसे ऑनलाइन आज़माएं\n\nयहां जाएं --> https://stan-smith.github.io/FossFLOW/ <-- \n\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW सुंदर आइसोमेट्रिक आरेख बनाने के लिए एक शक्तिशाली, ओपन-सोर्स प्रोग्रेसिव वेब ऐप (PWA) है। React और Isoflow लाइब्रेरी (अब फोर्क किया गया और NPM पर fossflow के रूप में प्रकाशित) के साथ बनाया गया, यह ऑफ़लाइन समर्थन के साथ पूरी तरह से आपके ब्राउज़र में चलता है।\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - परियोजना में योगदान कैसे करें।\n\n## हाल के अपडेट (अक्टूबर 2025)\n\n### बहुभाषी समर्थन\n- **8 भाषाएं समर्थित** - अंग्रेजी, चीनी (सरलीकृत), स्पेनिश, पुर्तगाली (ब्राज़ीलियाई), फ्रेंच, हिंदी, बंगाली और रूसी में पूर्ण इंटरफ़ेस अनुवाद\n- **भाषा चयनकर्ता** - ऐप हेडर में उपयोग में आसान भाषा स्विचर\n- **पूर्ण अनुवाद** - सभी मेनू, संवाद, सेटिंग्स, टूलटिप्स और सहायता सामग्री अनुवादित\n- **लोकेल-जागरूक** - स्वचालित रूप से आपकी भाषा प्राथमिकता का पता लगाता है और याद रखता है\n\n### बेहतर कनेक्टर उपकरण\n- **क्लिक-आधारित निर्माण** - नया डिफ़ॉल्ट मोड: पहले नोड पर क्लिक करें, फिर कनेक्ट करने के लिए दूसरे नोड पर क्लिक करें\n- **ड्रैग मोड विकल्प** - मूल ड्रैग-एंड-ड्रॉप अभी भी सेटिंग्स के माध्यम से उपलब्ध है\n- **मोड चयन** - सेटिंग्स → कनेक्टर टैब में क्लिक और ड्रैग मोड के बीच स्विच करें\n- **बेहतर विश्वसनीयता** - क्लिक मोड अधिक अनुमानित कनेक्शन निर्माण प्रदान करता है\n\n### कस्टम आइकन आयात\n- **अपने स्वयं के आइकन आयात करें** - अपने आरेखों में उपयोग करने के लिए कस्टम आइकन (PNG, JPG, SVG) अपलोड करें\n- **स्वचालित स्केलिंग** - पेशेवर उपस्थिति के लिए आइकन स्वचालित रूप से सुसंगत आकारों में स्केल किए जाते हैं\n- **आइसोमेट्रिक/फ्लैट टॉगल** - चुनें कि आयातित आइकन 3D आइसोमेट्रिक या फ्लैट 2D के रूप में दिखाई दें\n- **स्मार्ट दृढ़ता** - कस्टम आइकन आरेखों के साथ सहेजे जाते हैं और सभी भंडारण विधियों में काम करते हैं\n- **आइकन संसाधन** - मुफ्त आइकन यहां खोजें:\n - [Iconify Icon Sets](https://icon-sets.iconify.design/) - हजारों मुफ्त SVG आइकन\n - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - उच्च गुणवत्ता वाले आइसोमेट्रिक आइकन पैक\n\n### सर्वर स्टोरेज समर्थन\n- **स्थायी भंडारण** - सर्वर फ़ाइल सिस्टम में सहेजे गए आरेख, ब्राउज़र सत्रों में बने रहते हैं\n- **बहु-डिवाइस पहुंच** - Docker डिप्लॉयमेंट का उपयोग करते समय किसी भी डिवाइस से अपने आरेखों तक पहुंचें\n- **स्वचालित पहचान** - उपलब्ध होने पर UI स्वचालित रूप से सर्वर स्टोरेज दिखाता है\n- **अधिलेखन सुरक्षा** - डुप्लिकेट नामों से सहेजते समय पुष्टिकरण संवाद\n- **Docker एकीकरण** - Docker डिप्लॉयमेंट में डिफ़ॉल्ट रूप से सर्वर स्टोरेज सक्षम\n\n### बेहतर इंटरैक्शन सुविधाएं\n- **कॉन्फ़िगर करने योग्य हॉटकी** - विजुअल संकेतकों के साथ उपकरण चयन के लिए तीन प्रोफाइल (QWERTY, SMNRCT, कोई नहीं)\n- **उन्नत पैन नियंत्रण** - रिक्त क्षेत्र ड्रैग, मध्य/दाएं क्लिक, संशोधक कुंजी (Ctrl/Alt) और कीबोर्ड नेविगेशन (Arrow/WASD/IJKL) सहित कई पैन विधियां\n- **कनेक्टर तीर टॉगल करें** - व्यक्तिगत कनेक्टरों पर तीर दिखाने/छिपाने का विकल्प\n- **स्थायी उपकरण चयन** - कनेक्शन बनाने के बाद कनेक्टर उपकरण सक्रिय रहता है\n- **सेटिंग्स संवाद** - हॉटकी और पैन नियंत्रण के लिए केंद्रीकृत कॉन्फ़िगरेशन\n\n### Docker और CI/CD सुधार\n- **स्वचालित Docker बिल्ड** - कमिट्स पर स्वचालित Docker Hub डिप्लॉयमेंट के लिए GitHub Actions वर्कफ़्लो\n- **बहु-आर्किटेक्चर समर्थन** - `linux/amd64` और `linux/arm64` दोनों के लिए Docker छवियां\n- **पूर्व-निर्मित छवियां** - `stnsmith/fossflow:latest` पर उपलब्ध\n\n### Monorepo आर्किटेक्चर\n- लाइब्रेरी और एप्लिकेशन दोनों के लिए **एकल रिपॉजिटरी**\n- सुव्यवस्थित निर्भरता प्रबंधन के लिए **NPM Workspaces**\n- रूट पर `npm run build` के साथ **एकीकृत बिल्ड प्रक्रिया**\n\n### UI सुधार\n- Quill संपादक टूलबार आइकन प्रदर्शन समस्या ठीक की गई\n- संदर्भ मेनू में React कुंजी चेतावनियां हल की गईं\n- markdown संपादक स्टाइलिंग में सुधार किया गया\n\n## विशेषताएं\n\n- 🎨 **आइसोमेट्रिक आरेख** - आश्चर्यजनक 3D-शैली तकनीकी आरेख बनाएं\n- 💾 **ऑटो-सेव** - आपका काम हर 5 सेकंड में स्वचालित रूप से सहेजा जाता है\n- 📱 **PWA समर्थन** - Mac और Linux पर मूल ऐप के रूप में इंस्टॉल करें\n- 🔒 **गोपनीयता-प्रथम** - सभी डेटा आपके ब्राउज़र में स्थानीय रूप से संग्रहीत\n- 📤 **आयात/निर्यात** - JSON फ़ाइलों के रूप में आरेख साझा करें\n- 🎯 **सत्र भंडारण** - संवाद के बिना त्वरित सहेजें\n- 🌐 **ऑफ़लाइन समर्थन** - इंटरनेट कनेक्शन के बिना काम करें\n- 🗄️ **सर्वर स्टोरेज** - Docker उपयोग करते समय वैकल्पिक स्थायी भंडारण (डिफ़ॉल्ट रूप से सक्षम)\n- 🌍 **बहुभाषी** - 8 भाषाओं के लिए पूर्ण समर्थन: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский\n\n\n## 🐳 Docker के साथ त्वरित डिप्लॉय\n\n```bash\n# Docker Compose का उपयोग करना (अनुशंसित - स्थायी भंडारण शामिल)\ndocker compose up\n\n# या स्थायी भंडारण के साथ Docker Hub से सीधे चलाएं\ndocker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest\n```\n\nDocker में सर्वर स्टोरेज डिफ़ॉल्ट रूप से सक्षम है। आपके आरेख होस्ट पर `./diagrams` में सहेजे जाएंगे।\n\nसर्वर स्टोरेज अक्षम करने के लिए, `ENABLE_SERVER_STORAGE=false` सेट करें:\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest\n```\n\n## त्वरित प्रारंभ (स्थानीय विकास)\n\n```bash\n# रिपॉजिटरी क्लोन करें\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# निर्भरताएं इंस्टॉल करें\nnpm install\n\n# लाइब्रेरी बनाएं (पहली बार आवश्यक)\nnpm run build:lib\n\n# विकास सर्वर प्रारंभ करें\nnpm run dev\n```\n\nअपने ब्राउज़र में [http://localhost:3000](http://localhost:3000) खोलें।\n\n## Monorepo संरचना\n\nयह दो पैकेज वाला एक monorepo है:\n\n- `packages/fossflow-lib` - नेटवर्क आरेख बनाने के लिए React घटक लाइब्रेरी (Webpack के साथ निर्मित)\n- `packages/fossflow-app` - आइसोमेट्रिक आरेख बनाने के लिए Progressive Web App (RSBuild के साथ निर्मित)\n\n### विकास आदेश\n\n```bash\n# विकास\nnpm run dev # ऐप विकास सर्वर शुरू करें\nnpm run dev:lib # लाइब्रेरी विकास के लिए वॉच मोड\n\n# बिल्डिंग\nnpm run build # लाइब्रेरी और ऐप दोनों बनाएं\nnpm run build:lib # केवल लाइब्रेरी बनाएं\nnpm run build:app # केवल ऐप बनाएं\n\n# परीक्षण और लिंटिंग\nnpm test # यूनिट टेस्ट चलाएं\nnpm run lint # लिंटिंग त्रुटियों की जांच करें\n\n# E2E टेस्ट (Selenium)\ncd e2e-tests\n./run-tests.sh # एंड-टू-एंड टेस्ट चलाएं (Docker और Python आवश्यक)\n\n# प्रकाशन\nnpm run publish:lib # npm पर लाइब्रेरी प्रकाशित करें\n```\n\n## उपयोग कैसे करें\n\n### आरेख बनाना\n\n1. **आइटम जोड़ें**:\n - शीर्ष दाईं ओर मेनू पर \"+\" बटन दबाएं, घटक लाइब्रेरी बाईं ओर दिखाई देगी\n - लाइब्रेरी से घटकों को कैनवास पर ड्रैग और ड्रॉप करें\n - या ग्रिड पर राइट-क्लिक करें और \"नोड जोड़ें\" चुनें\n\n2. **आइटम कनेक्ट करें**:\n - कनेक्टर उपकरण चुनें ('C' दबाएं या कनेक्टर आइकन पर क्लिक करें)\n - **क्लिक मोड** (डिफ़ॉल्ट): पहले नोड पर क्लिक करें, फिर दूसरे नोड पर क्लिक करें\n - **ड्रैग मोड** (वैकल्पिक): पहले से दूसरे नोड तक क्लिक करें और ड्रैग करें\n - सेटिंग्स → कनेक्टर टैब में मोड स्विच करें\n\n3. **अपना काम सहेजें**:\n - **त्वरित सहेजें** - ब्राउज़र सत्र में सहेजता है\n - **निर्यात** - JSON फ़ाइल के रूप में डाउनलोड करें\n - **आयात** - JSON फ़ाइल से लोड करें\n\n### भंडारण विकल्प\n\n- **सत्र भंडारण**: ब्राउज़र बंद होने पर अस्थायी सहेजें साफ़ हो जाते हैं\n- **निर्यात/आयात**: JSON फ़ाइलों के रूप में स्थायी भंडारण\n- **ऑटो-सेव**: सत्र में हर 5 सेकंड में परिवर्तन स्वचालित रूप से सहेजता है\n\n## योगदान देना\n\nहम योगदान का स्वागत करते हैं! कृपया दिशानिर्देशों के लिए [CONTRIBUTORS.md](../CONTRIBUTORS.md) देखें।\n\n## प्रलेखन\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - कोडबेस के लिए व्यापक गाइड\n- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - योगदान दिशानिर्देश\n\n## लाइसेंस\n\nMIT\n" }, { "path": "docs/README.id.md", "content": "# FossFLOW - Alat Diagram Isometrik \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\nHalo! Saya Stan, jika Anda telah menggunakan FossFLOW dan ini membantu Anda, saya akan sangat menghargai jika Anda bisa menyumbang sesuatu yang kecil :) Saya bekerja penuh waktu, dan menemukan waktu untuk mengerjakan proyek ini sudah cukup menantang.\nJika saya telah mengimplementasikan fitur untuk Anda atau memperbaiki bug, akan sangat bagus jika Anda bisa menyumbang :) jika tidak, tidak masalah, software ini akan selalu tetap gratis!\n\n\nJuga! Jika Anda belum melakukannya, silakan lihat library dasar yang digunakan untuk membangun ini oleh @markmanx Saya benar-benar berdiri di atas bahu raksasa di sini 🫡\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"image\" https://buymeacoffee.com/stan.smith \n\n\nTerima kasih,\n\n-Stan\n\n## Coba Secara Online\n\nKunjungi --> https://stan-smith.github.io/FossFLOW/ <-- \n\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW adalah aplikasi web progresif (PWA) open-source yang powerful untuk membuat diagram isometrik yang indah. Dibangun dengan React dan library Isoflow (Sekarang di-fork dan dipublikasikan ke NPM sebagai fossflow), berjalan sepenuhnya di browser Anda dengan dukungan offline.\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Cara berkontribusi pada proyek.\n\n## Pembaruan Terbaru (Oktober 2025)\n\n### Impor Ikon Kustom\n- **Impor Ikon Anda Sendiri** - Unggah ikon kustom (PNG, JPG, SVG) untuk digunakan dalam diagram Anda\n- **Penskalaan Otomatis** - Ikon secara otomatis diskalakan ke ukuran yang konsisten untuk tampilan profesional\n- **Toggle Isometrik/Datar** - Pilih apakah ikon yang diimpor muncul sebagai 3D isometrik atau 2D datar\n- **Persistence Cerdas** - Ikon kustom disimpan dengan diagram dan bekerja di semua metode penyimpanan\n- **Sumber Daya Ikon** - Temukan ikon gratis di:\n - [Iconify Icon Sets](https://icon-sets.iconify.design/) - Ribuan ikon SVG gratis\n - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - Paket ikon isometrik berkualitas tinggi\n\n### Dukungan Penyimpanan Server\n- **Penyimpanan Persisten** - Diagram disimpan ke filesystem server, bertahan di seluruh sesi browser\n- **Akses Multi-perangkat** - Akses diagram Anda dari perangkat apa pun saat menggunakan deployment Docker\n- **Deteksi Otomatis** - UI secara otomatis menampilkan penyimpanan server saat tersedia\n- **Perlindungan Penimpaan** - Dialog konfirmasi saat menyimpan dengan nama duplikat\n- **Integrasi Docker** - Penyimpanan server diaktifkan secara default dalam deployment Docker\n\n### Fitur Interaksi yang Ditingkatkan\n- **Hotkey yang Dapat Dikonfigurasi** - Tiga profil (QWERTY, SMNRCT, None) untuk pemilihan alat dengan indikator visual\n- **Kontrol Pan Lanjutan** - Beberapa metode pan termasuk seret area kosong, klik tengah/kanan, tombol modifier (Ctrl/Alt), dan navigasi keyboard (Arrow/WASD/IJKL)\n- **Toggle Panah Konektor** - Opsi untuk menampilkan/menyembunyikan panah pada konektor individual\n- **Pemilihan Alat Persisten** - Alat konektor tetap aktif setelah membuat koneksi\n- **Dialog Pengaturan** - Konfigurasi terpusat untuk hotkey dan kontrol pan\n\n### Peningkatan Docker & CI/CD\n- **Build Docker Otomatis** - Workflow GitHub Actions untuk deployment Docker Hub otomatis pada commit\n- **Dukungan Multi-arsitektur** - Image Docker untuk `linux/amd64` dan `linux/arm64`\n- **Image Pra-dibangun** - Tersedia di `stnsmith/fossflow:latest`\n\n### Arsitektur Monorepo\n- **Repositori tunggal** untuk library dan aplikasi\n- **NPM Workspaces** untuk manajemen dependensi yang efisien\n- **Proses build terpadu** dengan `npm run build` di root\n\n### Perbaikan UI\n- Memperbaiki masalah tampilan ikon toolbar editor Quill\n- Menyelesaikan peringatan key React di menu konteks\n- Meningkatkan styling editor markdown\n\n## Fitur\n\n- 🎨 **Diagram Isometrik** - Buat diagram teknis bergaya 3D yang menakjubkan\n- 💾 **Auto-Save** - Pekerjaan Anda secara otomatis disimpan setiap 5 detik\n- 📱 **Dukungan PWA** - Instal sebagai aplikasi native di Mac dan Linux\n- 🔒 **Privasi Pertama** - Semua data disimpan secara lokal di browser Anda\n- 📤 **Impor/Ekspor** - Bagikan diagram sebagai file JSON\n- 🎯 **Penyimpanan Sesi** - Simpan cepat tanpa dialog\n- 🌐 **Dukungan Offline** - Bekerja tanpa koneksi internet\n- 🗄️ **Penyimpanan Server** - Penyimpanan persisten opsional saat menggunakan Docker (diaktifkan secara default)\n- 🌍 **Multibahasa** - Dukungan lengkap untuk 9 bahasa: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский, Bahasa Indonesia\n\n\n## 🐳 Deploy Cepat dengan Docker\n\n```bash\n# Menggunakan Docker Compose (disarankan - termasuk penyimpanan persisten)\ndocker compose up\n\n# Atau jalankan langsung dari Docker Hub dengan penyimpanan persisten\ndocker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest\n```\n\nPenyimpanan server diaktifkan secara default di Docker. Diagram Anda akan disimpan ke `./diagrams` di host.\n\nUntuk menonaktifkan penyimpanan server, set `ENABLE_SERVER_STORAGE=false`:\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest\n```\n\n## Mulai Cepat (Pengembangan Lokal)\n\n```bash\n# Clone repositori\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# Install dependensi\nnpm install\n\n# Build library (diperlukan pertama kali)\nnpm run build:lib\n\n# Mulai development server\nnpm run dev\n```\n\nBuka [http://localhost:3000](http://localhost:3000) di browser Anda.\n\n## Struktur Monorepo\n\nIni adalah monorepo yang berisi dua paket:\n\n- `packages/fossflow-lib` - Library komponen React untuk menggambar diagram jaringan (dibangun dengan Webpack)\n- `packages/fossflow-app` - Progressive Web App untuk membuat diagram isometrik (dibangun dengan RSBuild)\n\n### Perintah Pengembangan\n\n```bash\n# Pengembangan\nnpm run dev # Mulai development server aplikasi\nnpm run dev:lib # Mode watch untuk pengembangan library\n\n# Build\nnpm run build # Build library dan aplikasi\nnpm run build:lib # Build library saja\nnpm run build:app # Build aplikasi saja\n\n# Testing & Linting\nnpm test # Jalankan unit test\nnpm run lint # Periksa error linting\n\n# E2E Tests (Selenium)\ncd e2e-tests\n./run-tests.sh # Jalankan end-to-end tests (memerlukan Docker & Python)\n\n# Publishing\nnpm run publish:lib # Publish library ke npm\n```\n\n## Cara Menggunakan\n\n### Membuat Diagram\n\n1. **Tambahkan Item**:\n - Tekan tombol \"+\" di menu kanan atas, library komponen akan muncul di kiri\n - Seret dan lepas komponen dari library ke kanvas\n - Atau klik kanan pada grid dan pilih \"Add node\"\n\n2. **Hubungkan Item**: \n - Pilih alat Konektor (tekan 'C' atau klik ikon konektor)\n - **Mode klik** (default): Klik node pertama, lalu klik node kedua\n - **Mode seret** (opsional): Klik dan seret dari node pertama ke node kedua\n - Beralih mode di Pengaturan → tab Konektor\n\n3. **Simpan Pekerjaan Anda**:\n - **Simpan Cepat** - Menyimpan ke sesi browser\n - **Ekspor** - Unduh sebagai file JSON\n - **Impor** - Muat dari file JSON\n\n### Opsi Penyimpanan\n\n- **Penyimpanan Sesi**: Simpan sementara yang dihapus saat browser ditutup\n- **Ekspor/Impor**: Penyimpanan permanen sebagai file JSON\n- **Auto-Save**: Secara otomatis menyimpan perubahan setiap 5 detik ke sesi\n\n## Berkontribusi\n\nKami menyambut kontribusi! Silakan lihat [CONTRIBUTORS.md](../CONTRIBUTORS.md) untuk panduan.\n\n## Dokumentasi\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Panduan lengkap untuk codebase\n- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Panduan kontribusi\n\n## Lisensi\n\nMIT\n\n" }, { "path": "docs/README.pt.md", "content": "# FossFLOW - Ferramenta de Diagramas Isométricos \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\nOlá! Aqui é o Stan, se você usou o FossFLOW e ele te ajudou, eu realmente agradeceria se você pudesse doar algo pequeno :) Eu trabalho em tempo integral, e encontrar tempo para trabalhar neste projeto já é desafiador o suficiente.\nSe eu implementei um recurso para você ou corrigi um bug, seria ótimo se você pudesse :) se não, não há problema, este software sempre será gratuito!\n\n\nTambém! Se você ainda não o fez, por favor confira a biblioteca subjacente na qual isso é construído por @markmanx Eu realmente estou sobre os ombros de um gigante aqui 🫡\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"image\" https://buymeacoffee.com/stan.smith \n\n\nObrigado,\n\n-Stan\n\n## Experimente online\n\nVá para --> https://stan-smith.github.io/FossFLOW/ <-- \n\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW é um poderoso Progressive Web App (PWA) de código aberto para criar belos diagramas isométricos. Construído com React e a biblioteca Isoflow (Agora bifurcada e publicada no NPM como fossflow), ele roda inteiramente no seu navegador com suporte offline.\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Como contribuir para o projeto.\n\n## Atualizações Recentes (Outubro 2025)\n\n### Suporte Multilíngue\n- **8 Idiomas Suportados** - Tradução completa da interface em inglês, chinês (simplificado), espanhol, português (brasileiro), francês, hindi, bengali e russo\n- **Seletor de Idioma** - Seletor de idioma fácil de usar no cabeçalho do aplicativo\n- **Tradução Completa** - Todos os menus, diálogos, configurações, dicas de ferramentas e conteúdo de ajuda traduzidos\n- **Consciente de Localidade** - Detecta e lembra automaticamente sua preferência de idioma\n\n### Ferramenta de Conector Aprimorada\n- **Criação Baseada em Cliques** - Novo modo padrão: clique no primeiro nó, depois no segundo nó para conectar\n- **Opção de Modo de Arrastar** - O arrastar e soltar original ainda está disponível através das configurações\n- **Seleção de Modo** - Alterne entre os modos de clique e arrastar em Configurações → aba Conectores\n- **Melhor Confiabilidade** - O modo de clique fornece criação de conexão mais previsível\n\n### Importação de Ícones Personalizados\n- **Importe Seus Próprios Ícones** - Carregue ícones personalizados (PNG, JPG, SVG) para usar em seus diagramas\n- **Dimensionamento Automático** - Os ícones são dimensionados automaticamente para tamanhos consistentes para aparência profissional\n- **Alternar Isométrico/Plano** - Escolha se os ícones importados aparecem como 3D isométrico ou 2D plano\n- **Persistência Inteligente** - Ícones personalizados são salvos com diagramas e funcionam em todos os métodos de armazenamento\n- **Recursos de Ícones** - Encontre ícones gratuitos em:\n - [Iconify Icon Sets](https://icon-sets.iconify.design/) - Milhares de ícones SVG gratuitos\n - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - Pacotes de ícones isométricos de alta qualidade\n\n### Suporte de Armazenamento no Servidor\n- **Armazenamento Persistente** - Diagramas salvos no sistema de arquivos do servidor, persistem entre sessões do navegador\n- **Acesso Multi-dispositivo** - Acesse seus diagramas de qualquer dispositivo ao usar implantação Docker\n- **Detecção Automática** - A interface do usuário mostra automaticamente o armazenamento do servidor quando disponível\n- **Proteção contra Sobrescrita** - Diálogo de confirmação ao salvar com nomes duplicados\n- **Integração Docker** - Armazenamento no servidor habilitado por padrão em implantações Docker\n\n### Recursos de Interação Aprimorados\n- **Teclas de Atalho Configuráveis** - Três perfis (QWERTY, SMNRCT, Nenhum) para seleção de ferramentas com indicadores visuais\n- **Controles de Panorâmica Avançados** - Múltiplos métodos de panorâmica incluindo arrastar área vazia, clique do meio/direito, teclas modificadoras (Ctrl/Alt) e navegação por teclado (Setas/WASD/IJKL)\n- **Alternar Setas do Conector** - Opção para mostrar/ocultar setas em conectores individuais\n- **Seleção de Ferramenta Persistente** - A ferramenta de conector permanece ativa após criar conexões\n- **Diálogo de Configurações** - Configuração centralizada para teclas de atalho e controles de panorâmica\n\n### Melhorias de Docker e CI/CD\n- **Builds Docker Automatizadas** - Fluxo de trabalho do GitHub Actions para implantação automática do Docker Hub em commits\n- **Suporte Multi-arquitetura** - Imagens Docker para `linux/amd64` e `linux/arm64`\n- **Imagens Pré-construídas** - Disponíveis em `stnsmith/fossflow:latest`\n\n### Arquitetura Monorepo\n- **Repositório único** para biblioteca e aplicação\n- **NPM Workspaces** para gerenciamento de dependências simplificado\n- **Processo de build unificado** com `npm run build` na raiz\n\n### Correções de Interface\n- Corrigido problema de exibição de ícones da barra de ferramentas do editor Quill\n- Resolvidos avisos de chave React em menus de contexto\n- Melhorado estilo do editor de markdown\n\n## Características\n\n- 🎨 **Diagramação Isométrica** - Crie impressionantes diagramas técnicos em estilo 3D\n- 💾 **Salvamento Automático** - Seu trabalho é salvo automaticamente a cada 5 segundos\n- 📱 **Suporte PWA** - Instale como um aplicativo nativo no Mac e Linux\n- 🔒 **Privacidade em Primeiro Lugar** - Todos os dados armazenados localmente no seu navegador\n- 📤 **Importar/Exportar** - Compartilhe diagramas como arquivos JSON\n- 🎯 **Armazenamento de Sessão** - Salvamento rápido sem diálogos\n- 🌐 **Suporte Offline** - Trabalhe sem conexão à internet\n- 🗄️ **Armazenamento no Servidor** - Armazenamento persistente opcional ao usar Docker (habilitado por padrão)\n- 🌍 **Multilíngue** - Suporte completo para 8 idiomas: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский\n\n\n## 🐳 Implantação Rápida com Docker\n\n```bash\n# Usando Docker Compose (recomendado - inclui armazenamento persistente)\ndocker compose up\n\n# Ou execute diretamente do Docker Hub com armazenamento persistente\ndocker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest\n```\n\nO armazenamento no servidor está habilitado por padrão no Docker. Seus diagramas serão salvos em `./diagrams` no host.\n\nPara desabilitar o armazenamento no servidor, defina `ENABLE_SERVER_STORAGE=false`:\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest\n```\n\n## Início Rápido (Desenvolvimento Local)\n\n```bash\n# Clonar o repositório\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# Instalar dependências\nnpm install\n\n# Compilar a biblioteca (necessário na primeira vez)\nnpm run build:lib\n\n# Iniciar servidor de desenvolvimento\nnpm run dev\n```\n\nAbra [http://localhost:3000](http://localhost:3000) no seu navegador.\n\n## Estrutura do Monorepo\n\nEste é um monorepo contendo dois pacotes:\n\n- `packages/fossflow-lib` - Biblioteca de componentes React para desenhar diagramas de rede (construída com Webpack)\n- `packages/fossflow-app` - Progressive Web App para criar diagramas isométricos (construído com RSBuild)\n\n### Comandos de Desenvolvimento\n\n```bash\n# Desenvolvimento\nnpm run dev # Iniciar servidor de desenvolvimento do aplicativo\nnpm run dev:lib # Modo watch para desenvolvimento da biblioteca\n\n# Build\nnpm run build # Compilar biblioteca e aplicativo\nnpm run build:lib # Compilar apenas biblioteca\nnpm run build:app # Compilar apenas aplicativo\n\n# Testes e Linting\nnpm test # Executar testes unitários\nnpm run lint # Verificar erros de linting\n\n# Testes E2E (Selenium)\ncd e2e-tests\n./run-tests.sh # Executar testes end-to-end (requer Docker e Python)\n\n# Publicação\nnpm run publish:lib # Publicar biblioteca no npm\n```\n\n## Como Usar\n\n### Criar Diagramas\n\n1. **Adicionar Itens**:\n - Pressione o botão \"+\" no menu superior direito, a biblioteca de componentes aparecerá à esquerda\n - Arraste e solte componentes da biblioteca na tela\n - Ou clique com o botão direito na grade e selecione \"Adicionar nó\"\n\n2. **Conectar Itens**:\n - Selecione a ferramenta Conector (pressione 'C' ou clique no ícone do conector)\n - **Modo de clique** (padrão): Clique no primeiro nó, depois clique no segundo nó\n - **Modo de arrastar** (opcional): Clique e arraste do primeiro nó para o segundo\n - Alterne os modos em Configurações → aba Conectores\n\n3. **Salvar Seu Trabalho**:\n - **Salvamento Rápido** - Salva na sessão do navegador\n - **Exportar** - Baixar como arquivo JSON\n - **Importar** - Carregar de arquivo JSON\n\n### Opções de Armazenamento\n\n- **Armazenamento de Sessão**: Salvamentos temporários apagados quando o navegador fecha\n- **Exportar/Importar**: Armazenamento permanente como arquivos JSON\n- **Salvamento Automático**: Salva automaticamente as alterações a cada 5 segundos na sessão\n\n## Contribuindo\n\nDamos as boas-vindas a contribuições! Por favor veja [CONTRIBUTORS.md](../CONTRIBUTORS.md) para diretrizes.\n\n## Documentação\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Guia abrangente para a base de código\n- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Diretrizes de contribuição\n\n## Licença\n\nMIT\n" }, { "path": "docs/README.ru.md", "content": "# FossFLOW - Инструмент для изометрических диаграмм \"fossflow\"\n\n

\n English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch\n

\n\nПривет! Я Stan, если вы использовали FossFLOW и это помогло вам, я буду очень признателен, если вы сможете сделать небольшое пожертвование :) Я работаю полный рабочий день, и найти время для работы над этим проектом достаточно сложно.\nЕсли я реализовал для вас функцию или исправил ошибку, было бы здорово, если бы вы могли :) если нет, то это не проблема, это программное обеспечение всегда останется бесплатным!\n\n\nТакже! Если вы еще не сделали этого, пожалуйста, ознакомьтесь с базовой библиотекой, на которой это построено, от @markmanx Я действительно стою здесь на плечах гиганта 🫡\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)\n\n\"image\" https://buymeacoffee.com/stan.smith \n\n\nСпасибо,\n\n-Stan\n\n## Попробуйте онлайн\n\nПерейдите на --> https://stan-smith.github.io/FossFLOW/ <-- \n\n\n------------------------------------------------------------------------------------------------------------------------------\nFossFLOW - это мощное прогрессивное веб-приложение (PWA) с открытым исходным кодом для создания красивых изометрических диаграмм. Созданное с помощью React и библиотеки Isoflow (Теперь форкнуто и опубликовано в NPM как fossflow), оно полностью работает в вашем браузере с поддержкой офлайн-режима.\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Как внести вклад в проект.\n\n## Недавние обновления (Октябрь 2025)\n\n### Многоязычная поддержка\n- **Поддержка 8 языков** - Полный перевод интерфейса на английский, китайский (упрощенный), испанский, португальский (бразильский), французский, хинди, бенгальский и русский\n- **Переключатель языка** - Простой в использовании переключатель языка в заголовке приложения\n- **Полный перевод** - Все меню, диалоги, настройки, подсказки и справочный контент переведены\n- **Учет локали** - Автоматически определяет и запоминает ваш языковой предпочтение\n\n### Улучшенный инструмент соединителя\n- **Создание на основе кликов** - Новый режим по умолчанию: щелкните первый узел, затем второй узел для соединения\n- **Опция режима перетаскивания** - Исходное перетаскивание по-прежнему доступно через настройки\n- **Выбор режима** - Переключайтесь между режимами клика и перетаскивания в Настройки → вкладка Соединители\n- **Лучшая надежность** - Режим клика обеспечивает более предсказуемое создание соединений\n\n### Импорт пользовательских иконок\n- **Импортируйте свои собственные иконки** - Загружайте пользовательские иконки (PNG, JPG, SVG) для использования в ваших диаграммах\n- **Автоматическое масштабирование** - Иконки автоматически масштабируются до согласованных размеров для профессионального внешнего вида\n- **Переключатель изометрия/плоскость** - Выберите, будут ли импортированные иконки отображаться как 3D изометрические или плоские 2D\n- **Умная постоянство** - Пользовательские иконки сохраняются с диаграммами и работают со всеми методами хранения\n- **Ресурсы иконок** - Найдите бесплатные иконки на:\n - [Iconify Icon Sets](https://icon-sets.iconify.design/) - Тысячи бесплатных SVG иконок\n - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - Высококачественные наборы изометрических иконок\n\n### Поддержка хранилища сервера\n- **Постоянное хранилище** - Диаграммы сохраняются в файловой системе сервера, сохраняются между сеансами браузера\n- **Многоустройственный доступ** - Получайте доступ к вашим диаграммам с любого устройства при использовании развертывания Docker\n- **Автоматическое обнаружение** - UI автоматически показывает хранилище сервера, когда оно доступно\n- **Защита от перезаписи** - Диалог подтверждения при сохранении с дублирующими именами\n- **Интеграция Docker** - Хранилище сервера включено по умолчанию в развертываниях Docker\n\n### Расширенные функции взаимодействия\n- **Настраиваемые горячие клавиши** - Три профиля (QWERTY, SMNRCT, Нет) для выбора инструментов с визуальными индикаторами\n- **Расширенные элементы управления панорамированием** - Несколько методов панорамирования, включая перетаскивание пустой области, средний/правый щелчок, клавиши модификаторы (Ctrl/Alt) и навигацию с клавиатуры (Стрелки/WASD/IJKL)\n- **Переключить стрелки соединителя** - Опция для отображения/скрытия стрелок на отдельных соединителях\n- **Постоянный выбор инструмента** - Инструмент соединителя остается активным после создания соединений\n- **Диалог настроек** - Централизованная конфигурация для горячих клавиш и элементов управления панорамированием\n\n### Улучшения Docker и CI/CD\n- **Автоматизированные сборки Docker** - Рабочий процесс GitHub Actions для автоматического развертывания Docker Hub при коммитах\n- **Поддержка мультиархитектуры** - Образы Docker для `linux/amd64` и `linux/arm64`\n- **Предварительно собранные образы** - Доступны на `stnsmith/fossflow:latest`\n\n### Архитектура Monorepo\n- **Единый репозиторий** для библиотеки и приложения\n- **NPM Workspaces** для упрощенного управления зависимостями\n- **Единый процесс сборки** с `npm run build` в корне\n\n### Исправления UI\n- Исправлена проблема отображения иконок панели инструментов редактора Quill\n- Решены предупреждения ключей React в контекстных меню\n- Улучшен стиль редактора markdown\n\n## Возможности\n\n- 🎨 **Изометрическое диаграммирование** - Создавайте потрясающие технические диаграммы в стиле 3D\n- 💾 **Автосохранение** - Ваша работа автоматически сохраняется каждые 5 секунд\n- 📱 **Поддержка PWA** - Установите как нативное приложение на Mac и Linux\n- 🔒 **Приоритет конфиденциальности** - Все данные хранятся локально в вашем браузере\n- 📤 **Импорт/Экспорт** - Делитесь диаграммами как JSON файлами\n- 🎯 **Хранилище сеанса** - Быстрое сохранение без диалогов\n- 🌐 **Поддержка офлайн** - Работайте без подключения к интернету\n- 🗄️ **Хранилище сервера** - Дополнительное постоянное хранилище при использовании Docker (включено по умолчанию)\n- 🌍 **Многоязычный** - Полная поддержка 8 языков: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский\n\n\n## 🐳 Быстрое развертывание с Docker\n\n```bash\n# Использование Docker Compose (рекомендуется - включает постоянное хранилище)\ndocker compose up\n\n# Или запустите напрямую из Docker Hub с постоянным хранилищем\ndocker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest\n```\n\nХранилище сервера включено по умолчанию в Docker. Ваши диаграммы будут сохранены в `./diagrams` на хосте.\n\nЧтобы отключить хранилище сервера, установите `ENABLE_SERVER_STORAGE=false`:\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest\n```\n\n## Быстрый старт (Локальная разработка)\n\n```bash\n# Клонировать репозиторий\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# Установить зависимости\nnpm install\n\n# Собрать библиотеку (требуется в первый раз)\nnpm run build:lib\n\n# Запустить сервер разработки\nnpm run dev\n```\n\nОткройте [http://localhost:3000](http://localhost:3000) в вашем браузере.\n\n## Структура Monorepo\n\nЭто monorepo, содержащий два пакета:\n\n- `packages/fossflow-lib` - Библиотека компонентов React для рисования сетевых диаграмм (собрана с Webpack)\n- `packages/fossflow-app` - Прогрессивное веб-приложение для создания изометрических диаграмм (собрано с RSBuild)\n\n### Команды разработки\n\n```bash\n# Разработка\nnpm run dev # Запустить сервер разработки приложения\nnpm run dev:lib # Режим наблюдения для разработки библиотеки\n\n# Сборка\nnpm run build # Собрать библиотеку и приложение\nnpm run build:lib # Собрать только библиотеку\nnpm run build:app # Собрать только приложение\n\n# Тестирование и линтинг\nnpm test # Запустить модульные тесты\nnpm run lint # Проверить ошибки линтинга\n\n# E2E тесты (Selenium)\ncd e2e-tests\n./run-tests.sh # Запустить сквозные тесты (требуется Docker и Python)\n\n# Публикация\nnpm run publish:lib # Опубликовать библиотеку в npm\n```\n\n## Как использовать\n\n### Создание диаграмм\n\n1. **Добавить элементы**:\n - Нажмите кнопку \"+\" в правом верхнем меню, библиотека компонентов появится слева\n - Перетащите компоненты из библиотеки на холст\n - Или щелкните правой кнопкой мыши на сетке и выберите \"Добавить узел\"\n\n2. **Соединить элементы**:\n - Выберите инструмент Соединитель (нажмите 'C' или щелкните значок соединителя)\n - **Режим клика** (по умолчанию): Щелкните первый узел, затем щелкните второй узел\n - **Режим перетаскивания** (опционально): Щелкните и перетащите от первого узла ко второму\n - Переключайте режимы в Настройки → вкладка Соединители\n\n3. **Сохранить вашу работу**:\n - **Быстрое сохранение** - Сохраняет в сеанс браузера\n - **Экспорт** - Скачать как JSON файл\n - **Импорт** - Загрузить из JSON файла\n\n### Варианты хранения\n\n- **Хранилище сеанса**: Временные сохранения удаляются при закрытии браузера\n- **Экспорт/Импорт**: Постоянное хранилище в виде JSON файлов\n- **Автосохранение**: Автоматически сохраняет изменения каждые 5 секунд в сеанс\n\n## Внесение вклада\n\nМы приветствуем вклад! Пожалуйста, смотрите [CONTRIBUTORS.md](../CONTRIBUTORS.md) для руководства.\n\n## Документация\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Всестороннее руководство по кодовой базе\n- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Руководство по внесению вклада\n\n## Лицензия\n\nMIT\n" }, { "path": "docs/SEMANTIC_RELEASE.md", "content": "# Semantic Release Setup\n\nThis document explains how FossFLOW uses automated semantic versioning and releases.\n\n## Overview\n\nFossFLOW uses [semantic-release](https://github.com/semantic-release/semantic-release) to automate:\n- Version number calculation based on commit messages\n- CHANGELOG.md generation\n- GitHub release creation\n- Git tag creation\n- Docker image tagging with version numbers\n\n## How It Works\n\n### 1. Commit Messages Drive Versioning\n\nWhen you commit code using conventional commits, the commit type determines the version bump:\n\n| Commit Type | Version Bump | Example |\n|-------------|--------------|---------|\n| `feat:` | Minor (1.0.0 → 1.1.0) | New features |\n| `fix:` | Patch (1.0.0 → 1.0.1) | Bug fixes |\n| `perf:` | Patch (1.0.0 → 1.0.1) | Performance improvements |\n| `refactor:` | Patch (1.0.0 → 1.0.1) | Code refactoring |\n| `feat!:` or `BREAKING CHANGE:` | Major (1.0.0 → 2.0.0) | Breaking changes |\n| `docs:`, `style:`, `test:`, `chore:` | No bump | Non-code changes |\n\n### 2. Automated Workflow\n\nWhen you push to `master` branch:\n\n1. **Tests run** (via `.github/workflows/test.yml`)\n2. **If tests pass**, semantic-release workflow triggers (`.github/workflows/release.yml`)\n3. **Semantic-release analyzes** commits since last release\n4. **If version bump needed**:\n - Calculates new version number\n - Updates `package.json` files in all workspace packages\n - Generates CHANGELOG.md\n - Creates git tag (e.g., `v1.2.0`)\n - Commits changes with `[skip ci]`\n - Pushes tag to GitHub\n - Creates GitHub release with notes\n5. **Docker workflow triggers** on new tag (`.github/workflows/docker.yml`)\n6. **Docker images are tagged** with:\n - `latest`\n - `1.2.0` (full version)\n - `1.2` (major.minor)\n - `1` (major only)\n\n### 3. Multiple Package Versioning\n\nFossFLOW is a monorepo with multiple packages. All packages are versioned together:\n- Root `package.json`\n- `packages/fossflow-lib/package.json`\n- `packages/fossflow-app/package.json`\n- `packages/fossflow-backend/package.json`\n\nThe `scripts/update-version.js` script syncs version numbers across all packages.\n\n## Configuration Files\n\n### `.releaserc.json`\n\nMain semantic-release configuration:\n- Defines which branches trigger releases (`master`, `main`)\n- Configures commit analysis rules\n- Sets up changelog generation\n- Defines which files to commit\n\n### `.github/workflows/release.yml`\n\nGitHub Actions workflow that:\n- Runs after tests pass\n- Executes semantic-release\n- Uses `GITHUB_TOKEN` for GitHub API access\n- Uses `NPM_TOKEN` for npm publishing (optional)\n\n### `scripts/update-version.js`\n\nNode.js script that updates version numbers in all package.json files simultaneously.\n\n## Example Release Flow\n\n### Scenario: Adding a New Feature\n\n```bash\n# Make your changes\ngit add .\ngit commit -m \"feat(connector): add multi-point connector routing\"\ngit push origin master\n```\n\n**Result:**\n- Tests run and pass\n- Semantic-release detects `feat:` commit\n- Version bumps from 1.0.5 → 1.1.0\n- CHANGELOG.md updated with new entry\n- Git tag `v1.1.0` created\n- GitHub release created\n- Docker images tagged: `1.1.0`, `1.1`, `1`, `latest`\n\n### Scenario: Fixing a Bug\n\n```bash\ngit commit -m \"fix(export): resolve image export quality issue\"\ngit push origin master\n```\n\n**Result:**\n- Version bumps from 1.1.0 → 1.1.1\n- Patch release created\n\n### Scenario: Breaking Change\n\n```bash\ngit commit -m \"feat(api)!: redesign node creation API\n\nBREAKING CHANGE: createNode() now requires nodeType parameter\"\ngit push origin master\n```\n\n**Result:**\n- Version bumps from 1.1.1 → 2.0.0\n- Major release created with breaking change highlighted\n\n### Scenario: Documentation Update\n\n```bash\ngit commit -m \"docs: update installation instructions\"\ngit push origin master\n```\n\n**Result:**\n- No version bump\n- No release created\n- Changes still merged to master\n\n## Manual Testing Locally\n\nYou can test semantic-release locally without publishing:\n\n```bash\n# Dry run (no changes made)\nnpx semantic-release --dry-run\n\n# See what version would be released\nnpx semantic-release --dry-run --no-ci\n```\n\n## Troubleshooting\n\n### No Release Created\n\nCheck if:\n- Commits follow conventional commit format\n- Commits include version-bumping types (`feat`, `fix`, etc.)\n- Tests passed successfully\n- You're on the `master` or `main` branch\n\n### Version Not Updated\n\nEnsure:\n- `scripts/update-version.js` has execute permissions\n- Script is referenced in `.releaserc.json` under `@semantic-release/exec`\n\n### Docker Not Tagged\n\nVerify:\n- Git tag was created successfully\n- Docker workflow has permission to run\n\n## Additional Resources\n\n- [Conventional Commits](https://www.conventionalcommits.org/)\n- [Semantic Versioning](https://semver.org/)\n- [Semantic Release Documentation](https://semantic-release.gitbook.io/semantic-release/)\n- [Keep a Changelog](https://keepachangelog.com/)\n\n## Maintaining This System\n\n### Updating Semantic Release\n\n```bash\nnpm update semantic-release @semantic-release/changelog @semantic-release/git @semantic-release/exec\n```\n\n### Adding New Commit Types\n\nEdit `.releaserc.json` under `releaseRules` to add custom commit type behaviors.\n\n### Changing Release Branch\n\nEdit `.releaserc.json` and `.github/workflows/release.yml` to target different branches.\n" }, { "path": "e2e-tests/.gitignore", "content": "__pycache__/\n*.pyc\n.pytest_cache/\nhtmlcov/\n.coverage\n*.log\nvenv/\nenv/\nscreenshots/\n" }, { "path": "e2e-tests/README.md", "content": "# FossFLOW E2E Tests\n\nEnd-to-end tests for FossFLOW using Selenium WebDriver with Python and pytest.\n\n## Prerequisites\n\n1. **Python 3.11+** - Install from https://www.python.org/\n2. **Docker** - For running Selenium Grid\n3. **Chrome/Chromium** browser (provided by Selenium Docker image)\n\n## Running Tests Locally\n\n### Quick Start (Recommended)\n\nUse the provided test runner script:\n\n```bash\ncd e2e-tests\n./run-tests.sh\n```\n\nThe script will:\n- Check for required dependencies (Docker, Python)\n- Start Selenium container automatically\n- Create a Python virtual environment\n- Install test dependencies\n- Prompt you to start the FossFLOW app if not running\n- Run the tests\n- Clean up Selenium container\n\n### Manual Setup\n\n1. Start Selenium server with Chrome:\n ```bash\n docker run -d --name fossflow-selenium -p 4444:4444 -p 7900:7900 --shm-size=\"2g\" selenium/standalone-chrome:latest\n ```\n\n2. Start the FossFLOW dev server:\n ```bash\n cd .. # Go to project root\n npm run dev\n ```\n\n3. Install Python dependencies:\n ```bash\n cd e2e-tests\n python3 -m venv venv\n source venv/bin/activate # On Windows: venv\\Scripts\\activate\n pip install -r requirements.txt\n ```\n\n4. Run the tests:\n ```bash\n pytest -v\n ```\n\n## Environment Variables\n\n- `FOSSFLOW_TEST_URL` - Base URL of the app (default: `http://localhost:3000`)\n- `WEBDRIVER_URL` - WebDriver endpoint (default: `http://localhost:4444`)\n\nExample:\n```bash\nFOSSFLOW_TEST_URL=http://localhost:8080 pytest -v\n```\n\n## Available Tests\n\n- `test_homepage_loads` - Verifies the homepage loads and has basic React elements\n- `test_page_has_canvas` - Checks for the canvas element used for diagram drawing\n- `test_page_renders_without_crash` - Verifies the page fully renders with all key elements visible\n\n## CI/CD\n\nTests run automatically in GitHub Actions on:\n- Push to `master` or `main` branches\n- Pull requests to `master` or `main` branches\n\nThe CI workflow:\n1. Builds the app\n2. Starts the app server in background\n3. Starts Selenium standalone Chrome\n4. Installs Python dependencies\n5. Runs all E2E tests with pytest\n\n## Test Structure\n\n```\ne2e-tests/\n├── tests/\n│ └── test_basic_load.py # Main test suite\n├── requirements.txt # Python dependencies\n├── pytest.ini # Pytest configuration\n├── run-tests.sh # Test runner script\n└── README.md # This file\n```\n\n## Adding New Tests\n\n1. Create a new test file in `tests/` directory (must start with `test_`)\n2. Import required modules:\n ```python\n import pytest\n from selenium import webdriver\n from selenium.webdriver.common.by import By\n ```\n\n3. Use the `driver` fixture:\n ```python\n def test_my_feature(driver):\n driver.get(\"http://localhost:3000\")\n element = driver.find_element(By.ID, \"my-element\")\n assert element.is_displayed()\n ```\n\n4. Run your test:\n ```bash\n pytest tests/test_my_feature.py -v\n ```\n\n## Debugging\n\n### Running with Visible Browser\n\nTo see the browser during tests, modify the driver fixture in `test_basic_load.py`:\n```python\n# Comment out headless mode\n# chrome_options.add_argument(\"--headless\")\n```\n\n### Using VNC to Watch Tests\n\nWhen using the Selenium Docker image, you can watch tests in real-time:\n\n1. Connect to VNC viewer at `http://localhost:7900` (password: `secret`)\n2. Remove `--headless` from Chrome options\n3. Run tests and watch in VNC viewer\n\n### Verbose Output\n\nRun tests with more verbose output:\n```bash\npytest -vv --tb=long\n```\n\n### Running Specific Tests\n\n```bash\n# Run a single test\npytest tests/test_basic_load.py::test_homepage_loads -v\n\n# Run tests matching a pattern\npytest -k \"canvas\" -v\n```\n\n## Troubleshooting\n\n### Connection refused errors\n- Ensure Selenium is running: `docker ps | grep selenium`\n- Check Selenium status: `curl http://localhost:4444/status`\n- Ensure FossFLOW app is running: `curl http://localhost:3000`\n\n### Element not found errors\n- Increase wait times in tests\n- Check if the app URL is correct\n- Verify the app loaded successfully in browser\n\n### Import errors\n- Activate virtual environment: `source venv/bin/activate`\n- Install dependencies: `pip install -r requirements.txt`\n\n### Docker container conflicts\n- Remove existing container: `docker rm -f fossflow-selenium`\n- Check for port conflicts: `lsof -i :4444`\n\n## Dependencies\n\n- **selenium** (4.27.1) - WebDriver automation library\n- **pytest** (8.3.4) - Testing framework\n- **pytest-xdist** (3.6.1) - Parallel test execution support\n" }, { "path": "e2e-tests/SETUP.md", "content": "# E2E Testing Setup Summary\n\n## What Was Added\n\nA complete Selenium-based end-to-end testing framework using Python and pytest with the Selenium WebDriver library.\n\n### File Structure\n\n```\ne2e-tests/\n├── requirements.txt # Python dependencies (selenium, pytest)\n├── pytest.ini # Pytest configuration\n├── .gitignore # Ignore __pycache__, .pytest_cache, venv\n├── README.md # Comprehensive testing documentation\n├── SETUP.md # This file\n├── run-tests.sh # Helper script for local testing\n└── tests/\n └── test_basic_load.py # Initial test suite\n```\n\n### Tests Included\n\nThree basic tests to verify the application loads correctly:\n\n1. **test_homepage_loads** - Verifies:\n - Page loads successfully\n - Title contains \"FossFLOW\" or \"isometric\"\n - Body element exists\n - React root element exists\n\n2. **test_page_has_canvas** - Verifies:\n - Canvas element exists (for isometric drawing)\n\n3. **test_page_renders_without_crash** - Verifies:\n - Page fully renders without errors\n - All key elements are visible (body, root, canvas)\n - Page source is substantial (not blank/error page)\n\n### CI/CD Integration\n\nUpdated `.github/workflows/e2e-tests.yml` to:\n- Run on push/PR to master/main branches\n- Set up Python 3.11 with pip caching\n- Spin up Selenium standalone Chrome in Docker\n- Build the FossFLOW app\n- Serve the built app with nohup for persistence\n- Install Python test dependencies\n- Run all E2E tests with pytest\n- Upload test artifacts\n\n### Dependencies\n\n**Python packages:**\n- `selenium` v4.27.1 - WebDriver automation library\n- `pytest` v8.3.4 - Testing framework\n- `pytest-xdist` v3.6.1 - Parallel test execution support\n\n**External services:**\n- Selenium Server (via Docker)\n- Running FossFLOW instance\n\n## Quick Start\n\n### Local Development\n\n```bash\n# Easiest: Use the helper script\ncd e2e-tests\n./run-tests.sh\n\n# The script will:\n# - Start Selenium container\n# - Create Python venv\n# - Install dependencies\n# - Prompt you to start the app\n# - Run tests\n# - Clean up\n```\n\n### Manual Setup\n\n```bash\n# 1. Start Selenium (in Docker)\ndocker run -d -p 4444:4444 -p 7900:7900 --shm-size=2g selenium/standalone-chrome\n\n# 2. Start FossFLOW dev server (in another terminal)\nnpm run dev\n\n# 3. Set up Python environment\ncd e2e-tests\npython3 -m venv venv\nsource venv/bin/activate\npip install -r requirements.txt\n\n# 4. Run tests\npytest -v\n```\n\n### CI/CD\n\nTests run automatically on GitHub Actions. See workflow at `.github/workflows/e2e-tests.yml`.\n\n## Next Steps\n\nYou can now expand the test suite to cover:\n\n1. **Drawing Features**\n - Add nodes to canvas\n - Connect nodes\n - Edit node properties\n - Delete nodes\n\n2. **UI Interactions**\n - Menu navigation\n - Settings dialogs\n - Tool selection\n - Hotkeys\n\n3. **Data Operations**\n - Save diagrams\n - Load diagrams\n - Export to JSON\n - Import from JSON\n\n4. **Advanced Features**\n - Undo/redo\n - Custom icons\n - Multi-select\n - Zoom/pan\n\n## Example: Adding a New Test\n\nCreate `tests/test_diagram_creation.py`:\n\n```python\nimport pytest\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\n\n\ndef test_can_add_node(driver):\n \"\"\"Test that users can add a node to the canvas.\"\"\"\n driver.get(\"http://localhost:3000\")\n\n # Wait for app to load\n wait = WebDriverWait(driver, 10)\n\n # Click the add node button\n add_button = wait.until(\n EC.element_to_be_clickable((By.CSS_SELECTOR, \"button[aria-label='Add Node']\"))\n )\n add_button.click()\n\n # Verify node library appears\n library = wait.until(\n EC.visibility_of_element_located((By.CLASS_NAME, \"node-library\"))\n )\n assert library.is_displayed()\n```\n\nRun: `pytest tests/test_diagram_creation.py::test_can_add_node -v`\n\n## Pytest Features\n\n### Running Tests\n\n```bash\n# Run all tests\npytest -v\n\n# Run specific test file\npytest tests/test_basic_load.py -v\n\n# Run specific test\npytest tests/test_basic_load.py::test_homepage_loads -v\n\n# Run tests matching pattern\npytest -k \"canvas\" -v\n\n# Run with more verbose output\npytest -vv --tb=long\n```\n\n### Test Fixtures\n\nThe `driver` fixture is automatically available to all tests:\n\n```python\ndef test_example(driver):\n driver.get(\"http://localhost:3000\")\n # driver is automatically created and cleaned up\n```\n\n## Debugging\n\n### Watch Tests with VNC\n\nConnect to `http://localhost:7900` (password: `secret`) to watch tests run in real-time.\n\n### Run Non-Headless\n\nEdit `test_basic_load.py` and comment out:\n```python\n# chrome_options.add_argument(\"--headless\")\n```\n\n### Add Screenshots on Failure\n\nAdd to your test:\n```python\ndef test_example(driver):\n try:\n # Your test code\n assert something\n except AssertionError:\n driver.save_screenshot(\"failure.png\")\n raise\n```\n\n## Troubleshooting\n\nSee `README.md` for detailed troubleshooting steps including:\n- Connection refused errors\n- Element not found errors\n- Import errors\n- Docker container conflicts\n\n## Resources\n\n- [Selenium Python documentation](https://selenium-python.readthedocs.io/)\n- [pytest documentation](https://docs.pytest.org/)\n- [Selenium WebDriver docs](https://www.selenium.dev/documentation/webdriver/)\n- [WebDriver spec](https://w3c.github.io/webdriver/)\n\n## Migration Notes\n\nThis test suite was migrated from Rust (thirtyfour) to Python (selenium + pytest) for:\n- Simpler syntax and easier maintenance\n- Better debugging tools\n- Wider community support\n- Faster test development\n- More reliable WebDriver connections\n" }, { "path": "e2e-tests/get-docker.sh", "content": "#!/bin/sh\nset -e\n# Docker Engine for Linux installation script.\n#\n# This script is intended as a convenient way to configure docker's package\n# repositories and to install Docker Engine, This script is not recommended\n# for production environments. Before running this script, make yourself familiar\n# with potential risks and limitations, and refer to the installation manual\n# at https://docs.docker.com/engine/install/ for alternative installation methods.\n#\n# The script:\n#\n# - Requires `root` or `sudo` privileges to run.\n# - Attempts to detect your Linux distribution and version and configure your\n# package management system for you.\n# - Doesn't allow you to customize most installation parameters.\n# - Installs dependencies and recommendations without asking for confirmation.\n# - Installs the latest stable release (by default) of Docker CLI, Docker Engine,\n# Docker Buildx, Docker Compose, containerd, and runc. When using this script\n# to provision a machine, this may result in unexpected major version upgrades\n# of these packages. Always test upgrades in a test environment before\n# deploying to your production systems.\n# - Isn't designed to upgrade an existing Docker installation. When using the\n# script to update an existing installation, dependencies may not be updated\n# to the expected version, resulting in outdated versions.\n#\n# Source code is available at https://github.com/docker/docker-install/\n#\n# Usage\n# ==============================================================================\n#\n# To install the latest stable versions of Docker CLI, Docker Engine, and their\n# dependencies:\n#\n# 1. download the script\n#\n# $ curl -fsSL https://get.docker.com -o install-docker.sh\n#\n# 2. verify the script's content\n#\n# $ cat install-docker.sh\n#\n# 3. run the script with --dry-run to verify the steps it executes\n#\n# $ sh install-docker.sh --dry-run\n#\n# 4. run the script either as root, or using sudo to perform the installation.\n#\n# $ sudo sh install-docker.sh\n#\n# Command-line options\n# ==============================================================================\n#\n# --version \n# Use the --version option to install a specific version, for example:\n#\n# $ sudo sh install-docker.sh --version 23.0\n#\n# --channel \n#\n# Use the --channel option to install from an alternative installation channel.\n# The following example installs the latest versions from the \"test\" channel,\n# which includes pre-releases (alpha, beta, rc):\n#\n# $ sudo sh install-docker.sh --channel test\n#\n# Alternatively, use the script at https://test.docker.com, which uses the test\n# channel as default.\n#\n# --mirror \n#\n# Use the --mirror option to install from a mirror supported by this script.\n# Available mirrors are \"Aliyun\" (https://mirrors.aliyun.com/docker-ce), and\n# \"AzureChinaCloud\" (https://mirror.azure.cn/docker-ce), for example:\n#\n# $ sudo sh install-docker.sh --mirror AzureChinaCloud\n#\n# --setup-repo\n#\n# Use the --setup-repo option to configure Docker's package repositories without\n# installing Docker packages. This is useful when you want to add the repository\n# but install packages separately:\n#\n# $ sudo sh install-docker.sh --setup-repo\n#\n# ==============================================================================\n\n\n# Git commit from https://github.com/docker/docker-install when\n# the script was uploaded (Should only be modified by upload job):\nSCRIPT_COMMIT_SHA=\"c7e4dd90efd707a8e67302b967c4ef4a29d3cb6b\"\n\n# strip \"v\" prefix if present\nVERSION=\"${VERSION#v}\"\n\n# The channel to install from:\n# * stable\n# * test\nDEFAULT_CHANNEL_VALUE=\"stable\"\nif [ -z \"$CHANNEL\" ]; then\n\tCHANNEL=$DEFAULT_CHANNEL_VALUE\nfi\n\nDEFAULT_DOWNLOAD_URL=\"https://download.docker.com\"\nif [ -z \"$DOWNLOAD_URL\" ]; then\n\tDOWNLOAD_URL=$DEFAULT_DOWNLOAD_URL\nfi\n\nDEFAULT_REPO_FILE=\"docker-ce.repo\"\nif [ -z \"$REPO_FILE\" ]; then\n\tREPO_FILE=\"$DEFAULT_REPO_FILE\"\n\t# Automatically default to a staging repo fora\n\t# a staging download url (download-stage.docker.com)\n\tcase \"$DOWNLOAD_URL\" in\n\t\t*-stage*) REPO_FILE=\"docker-ce-staging.repo\";;\n\tesac\nfi\n\nmirror=''\nDRY_RUN=${DRY_RUN:-}\nREPO_ONLY=${REPO_ONLY:-0}\nwhile [ $# -gt 0 ]; do\n\tcase \"$1\" in\n\t\t--channel)\n\t\t\tCHANNEL=\"$2\"\n\t\t\tshift\n\t\t\t;;\n\t\t--dry-run)\n\t\t\tDRY_RUN=1\n\t\t\t;;\n\t\t--mirror)\n\t\t\tmirror=\"$2\"\n\t\t\tshift\n\t\t\t;;\n\t\t--version)\n\t\t\tVERSION=\"${2#v}\"\n\t\t\tshift\n\t\t\t;;\n\t\t--setup-repo)\n\t\t\tREPO_ONLY=1\n\t\t\tshift\n\t\t\t;;\n\t\t--*)\n\t\t\techo \"Illegal option $1\"\n\t\t\t;;\n\tesac\n\tshift $(( $# > 0 ? 1 : 0 ))\ndone\n\ncase \"$mirror\" in\n\tAliyun)\n\t\tDOWNLOAD_URL=\"https://mirrors.aliyun.com/docker-ce\"\n\t\t;;\n\tAzureChinaCloud)\n\t\tDOWNLOAD_URL=\"https://mirror.azure.cn/docker-ce\"\n\t\t;;\n\t\"\")\n\t\t;;\n\t*)\n\t\t>&2 echo \"unknown mirror '$mirror': use either 'Aliyun', or 'AzureChinaCloud'.\"\n\t\texit 1\n\t\t;;\nesac\n\ncase \"$CHANNEL\" in\n\tstable|test)\n\t\t;;\n\t*)\n\t\t>&2 echo \"unknown CHANNEL '$CHANNEL': use either stable or test.\"\n\t\texit 1\n\t\t;;\nesac\n\ncommand_exists() {\n\tcommand -v \"$@\" > /dev/null 2>&1\n}\n\n# version_gte checks if the version specified in $VERSION is at least the given\n# SemVer (Maj.Minor[.Patch]), or CalVer (YY.MM) version.It returns 0 (success)\n# if $VERSION is either unset (=latest) or newer or equal than the specified\n# version, or returns 1 (fail) otherwise.\n#\n# examples:\n#\n# VERSION=23.0\n# version_gte 23.0 // 0 (success)\n# version_gte 20.10 // 0 (success)\n# version_gte 19.03 // 0 (success)\n# version_gte 26.1 // 1 (fail)\nversion_gte() {\n\tif [ -z \"$VERSION\" ]; then\n\t\t\treturn 0\n\tfi\n\tversion_compare \"$VERSION\" \"$1\"\n}\n\n# version_compare compares two version strings (either SemVer (Major.Minor.Path),\n# or CalVer (YY.MM) version strings. It returns 0 (success) if version A is newer\n# or equal than version B, or 1 (fail) otherwise. Patch releases and pre-release\n# (-alpha/-beta) are not taken into account\n#\n# examples:\n#\n# version_compare 23.0.0 20.10 // 0 (success)\n# version_compare 23.0 20.10 // 0 (success)\n# version_compare 20.10 19.03 // 0 (success)\n# version_compare 20.10 20.10 // 0 (success)\n# version_compare 19.03 20.10 // 1 (fail)\nversion_compare() (\n\tset +x\n\n\tyy_a=\"$(echo \"$1\" | cut -d'.' -f1)\"\n\tyy_b=\"$(echo \"$2\" | cut -d'.' -f1)\"\n\tif [ \"$yy_a\" -lt \"$yy_b\" ]; then\n\t\treturn 1\n\tfi\n\tif [ \"$yy_a\" -gt \"$yy_b\" ]; then\n\t\treturn 0\n\tfi\n\tmm_a=\"$(echo \"$1\" | cut -d'.' -f2)\"\n\tmm_b=\"$(echo \"$2\" | cut -d'.' -f2)\"\n\n\t# trim leading zeros to accommodate CalVer\n\tmm_a=\"${mm_a#0}\"\n\tmm_b=\"${mm_b#0}\"\n\n\tif [ \"${mm_a:-0}\" -lt \"${mm_b:-0}\" ]; then\n\t\treturn 1\n\tfi\n\n\treturn 0\n)\n\nis_dry_run() {\n\tif [ -z \"$DRY_RUN\" ]; then\n\t\treturn 1\n\telse\n\t\treturn 0\n\tfi\n}\n\nis_wsl() {\n\tcase \"$(uname -r)\" in\n\t*microsoft* ) true ;; # WSL 2\n\t*Microsoft* ) true ;; # WSL 1\n\t* ) false;;\n\tesac\n}\n\nis_darwin() {\n\tcase \"$(uname -s)\" in\n\t*darwin* ) true ;;\n\t*Darwin* ) true ;;\n\t* ) false;;\n\tesac\n}\n\ndeprecation_notice() {\n\tdistro=$1\n\tdistro_version=$2\n\techo\n\tprintf \"\\033[91;1mDEPRECATION WARNING\\033[0m\\n\"\n\tprintf \" This Linux distribution (\\033[1m%s %s\\033[0m) reached end-of-life and is no longer supported by this script.\\n\" \"$distro\" \"$distro_version\"\n\techo \" No updates or security fixes will be released for this distribution, and users are recommended\"\n\techo \" to upgrade to a currently maintained version of $distro.\"\n\techo\n\tprintf \"Press \\033[1mCtrl+C\\033[0m now to abort this script, or wait for the installation to continue.\"\n\techo\n\tsleep 10\n}\n\nget_distribution() {\n\tlsb_dist=\"\"\n\t# Every system that we officially support has /etc/os-release\n\tif [ -r /etc/os-release ]; then\n\t\tlsb_dist=\"$(. /etc/os-release && echo \"$ID\")\"\n\tfi\n\t# Returning an empty string here should be alright since the\n\t# case statements don't act unless you provide an actual value\n\techo \"$lsb_dist\"\n}\n\necho_docker_as_nonroot() {\n\tif is_dry_run; then\n\t\treturn\n\tfi\n\tif command_exists docker && [ -e /var/run/docker.sock ]; then\n\t\t(\n\t\t\tset -x\n\t\t\t$sh_c 'docker version'\n\t\t) || true\n\tfi\n\n\t# intentionally mixed spaces and tabs here -- tabs are stripped by \"<<-EOF\", spaces are kept in the output\n\techo\n\techo \"================================================================================\"\n\techo\n\tif version_gte \"20.10\"; then\n\t\techo \"To run Docker as a non-privileged user, consider setting up the\"\n\t\techo \"Docker daemon in rootless mode for your user:\"\n\t\techo\n\t\techo \" dockerd-rootless-setuptool.sh install\"\n\t\techo\n\t\techo \"Visit https://docs.docker.com/go/rootless/ to learn about rootless mode.\"\n\t\techo\n\tfi\n\techo\n\techo \"To run the Docker daemon as a fully privileged service, but granting non-root\"\n\techo \"users access, refer to https://docs.docker.com/go/daemon-access/\"\n\techo\n\techo \"WARNING: Access to the remote API on a privileged Docker daemon is equivalent\"\n\techo \" to root access on the host. Refer to the 'Docker daemon attack surface'\"\n\techo \" documentation for details: https://docs.docker.com/go/attack-surface/\"\n\techo\n\techo \"================================================================================\"\n\techo\n}\n\n# Check if this is a forked Linux distro\ncheck_forked() {\n\n\t# Check for lsb_release command existence, it usually exists in forked distros\n\tif command_exists lsb_release; then\n\t\t# Check if the `-u` option is supported\n\t\tset +e\n\t\tlsb_release -a -u > /dev/null 2>&1\n\t\tlsb_release_exit_code=$?\n\t\tset -e\n\n\t\t# Check if the command has exited successfully, it means we're in a forked distro\n\t\tif [ \"$lsb_release_exit_code\" = \"0\" ]; then\n\t\t\t# Print info about current distro\n\t\t\tcat <<-EOF\n\t\t\tYou're using '$lsb_dist' version '$dist_version'.\n\t\t\tEOF\n\n\t\t\t# Get the upstream release info\n\t\t\tlsb_dist=$(lsb_release -a -u 2>&1 | tr '[:upper:]' '[:lower:]' | grep -E 'id' | cut -d ':' -f 2 | tr -d '[:space:]')\n\t\t\tdist_version=$(lsb_release -a -u 2>&1 | tr '[:upper:]' '[:lower:]' | grep -E 'codename' | cut -d ':' -f 2 | tr -d '[:space:]')\n\n\t\t\t# Print info about upstream distro\n\t\t\tcat <<-EOF\n\t\t\tUpstream release is '$lsb_dist' version '$dist_version'.\n\t\t\tEOF\n\t\telse\n\t\t\tif [ -r /etc/debian_version ] && [ \"$lsb_dist\" != \"ubuntu\" ] && [ \"$lsb_dist\" != \"raspbian\" ]; then\n\t\t\t\tif [ \"$lsb_dist\" = \"osmc\" ]; then\n\t\t\t\t\t# OSMC runs Raspbian\n\t\t\t\t\tlsb_dist=raspbian\n\t\t\t\telse\n\t\t\t\t\t# We're Debian and don't even know it!\n\t\t\t\t\tlsb_dist=debian\n\t\t\t\tfi\n\t\t\t\tdist_version=\"$(sed 's/\\/.*//' /etc/debian_version | sed 's/\\..*//')\"\n\t\t\t\tcase \"$dist_version\" in\n\t\t\t\t\t13)\n\t\t\t\t\t\tdist_version=\"trixie\"\n\t\t\t\t\t;;\n\t\t\t\t\t12)\n\t\t\t\t\t\tdist_version=\"bookworm\"\n\t\t\t\t\t;;\n\t\t\t\t\t11)\n\t\t\t\t\t\tdist_version=\"bullseye\"\n\t\t\t\t\t;;\n\t\t\t\t\t10)\n\t\t\t\t\t\tdist_version=\"buster\"\n\t\t\t\t\t;;\n\t\t\t\t\t9)\n\t\t\t\t\t\tdist_version=\"stretch\"\n\t\t\t\t\t;;\n\t\t\t\t\t8)\n\t\t\t\t\t\tdist_version=\"jessie\"\n\t\t\t\t\t;;\n\t\t\t\tesac\n\t\t\tfi\n\t\tfi\n\tfi\n}\n\ndo_install() {\n\techo \"# Executing docker install script, commit: $SCRIPT_COMMIT_SHA\"\n\n\tif command_exists docker; then\n\t\tcat >&2 <<-'EOF'\n\t\t\tWarning: the \"docker\" command appears to already exist on this system.\n\n\t\t\tIf you already have Docker installed, this script can cause trouble, which is\n\t\t\twhy we're displaying this warning and provide the opportunity to cancel the\n\t\t\tinstallation.\n\n\t\t\tIf you installed the current Docker package using this script and are using it\n\t\t\tagain to update Docker, you can ignore this message, but be aware that the\n\t\t\tscript resets any custom changes in the deb and rpm repo configuration\n\t\t\tfiles to match the parameters passed to the script.\n\n\t\t\tYou may press Ctrl+C now to abort this script.\n\t\tEOF\n\t\t( set -x; sleep 20 )\n\tfi\n\n\tuser=\"$(id -un 2>/dev/null || true)\"\n\n\tsh_c='sh -c'\n\tif [ \"$user\" != 'root' ]; then\n\t\tif command_exists sudo; then\n\t\t\tsh_c='sudo -E sh -c'\n\t\telif command_exists su; then\n\t\t\tsh_c='su -c'\n\t\telse\n\t\t\tcat >&2 <<-'EOF'\n\t\t\tError: this installer needs the ability to run commands as root.\n\t\t\tWe are unable to find either \"sudo\" or \"su\" available to make this happen.\n\t\t\tEOF\n\t\t\texit 1\n\t\tfi\n\tfi\n\n\tif is_dry_run; then\n\t\tsh_c=\"echo\"\n\tfi\n\n\t# perform some very rudimentary platform detection\n\tlsb_dist=$( get_distribution )\n\tlsb_dist=\"$(echo \"$lsb_dist\" | tr '[:upper:]' '[:lower:]')\"\n\n\tif is_wsl; then\n\t\techo\n\t\techo \"WSL DETECTED: We recommend using Docker Desktop for Windows.\"\n\t\techo \"Please get Docker Desktop from https://www.docker.com/products/docker-desktop/\"\n\t\techo\n\t\tcat >&2 <<-'EOF'\n\n\t\t\tYou may press Ctrl+C now to abort this script.\n\t\tEOF\n\t\t( set -x; sleep 20 )\n\tfi\n\n\tcase \"$lsb_dist\" in\n\n\t\tubuntu)\n\t\t\tif command_exists lsb_release; then\n\t\t\t\tdist_version=\"$(lsb_release --codename | cut -f2)\"\n\t\t\tfi\n\t\t\tif [ -z \"$dist_version\" ] && [ -r /etc/lsb-release ]; then\n\t\t\t\tdist_version=\"$(. /etc/lsb-release && echo \"$DISTRIB_CODENAME\")\"\n\t\t\tfi\n\t\t;;\n\n\t\tdebian|raspbian)\n\t\t\tdist_version=\"$(sed 's/\\/.*//' /etc/debian_version | sed 's/\\..*//')\"\n\t\t\tcase \"$dist_version\" in\n\t\t\t\t13)\n\t\t\t\t\tdist_version=\"trixie\"\n\t\t\t\t;;\n\t\t\t\t12)\n\t\t\t\t\tdist_version=\"bookworm\"\n\t\t\t\t;;\n\t\t\t\t11)\n\t\t\t\t\tdist_version=\"bullseye\"\n\t\t\t\t;;\n\t\t\t\t10)\n\t\t\t\t\tdist_version=\"buster\"\n\t\t\t\t;;\n\t\t\t\t9)\n\t\t\t\t\tdist_version=\"stretch\"\n\t\t\t\t;;\n\t\t\t\t8)\n\t\t\t\t\tdist_version=\"jessie\"\n\t\t\t\t;;\n\t\t\tesac\n\t\t;;\n\n\t\tcentos|rhel)\n\t\t\tif [ -z \"$dist_version\" ] && [ -r /etc/os-release ]; then\n\t\t\t\tdist_version=\"$(. /etc/os-release && echo \"$VERSION_ID\")\"\n\t\t\tfi\n\t\t;;\n\n\t\t*)\n\t\t\tif command_exists lsb_release; then\n\t\t\t\tdist_version=\"$(lsb_release --release | cut -f2)\"\n\t\t\tfi\n\t\t\tif [ -z \"$dist_version\" ] && [ -r /etc/os-release ]; then\n\t\t\t\tdist_version=\"$(. /etc/os-release && echo \"$VERSION_ID\")\"\n\t\t\tfi\n\t\t;;\n\n\tesac\n\n\t# Check if this is a forked Linux distro\n\tcheck_forked\n\n\t# Print deprecation warnings for distro versions that recently reached EOL,\n\t# but may still be commonly used (especially LTS versions).\n\tcase \"$lsb_dist.$dist_version\" in\n\t\tcentos.8|centos.7|rhel.7)\n\t\t\tdeprecation_notice \"$lsb_dist\" \"$dist_version\"\n\t\t\t;;\n\t\tdebian.buster|debian.stretch|debian.jessie)\n\t\t\tdeprecation_notice \"$lsb_dist\" \"$dist_version\"\n\t\t\t;;\n\t\traspbian.buster|raspbian.stretch|raspbian.jessie)\n\t\t\tdeprecation_notice \"$lsb_dist\" \"$dist_version\"\n\t\t\t;;\n\t\tubuntu.focal|ubuntu.bionic|ubuntu.xenial|ubuntu.trusty)\n\t\t\tdeprecation_notice \"$lsb_dist\" \"$dist_version\"\n\t\t\t;;\n\t\tubuntu.oracular|ubuntu.mantic|ubuntu.lunar|ubuntu.kinetic|ubuntu.impish|ubuntu.hirsute|ubuntu.groovy|ubuntu.eoan|ubuntu.disco|ubuntu.cosmic)\n\t\t\tdeprecation_notice \"$lsb_dist\" \"$dist_version\"\n\t\t\t;;\n\t\tfedora.*)\n\t\t\tif [ \"$dist_version\" -lt 41 ]; then\n\t\t\t\tdeprecation_notice \"$lsb_dist\" \"$dist_version\"\n\t\t\tfi\n\t\t\t;;\n\tesac\n\n\t# Run setup for each distro accordingly\n\tcase \"$lsb_dist\" in\n\t\tubuntu|debian|raspbian)\n\t\t\tpre_reqs=\"ca-certificates curl\"\n\t\t\tapt_repo=\"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] $DOWNLOAD_URL/linux/$lsb_dist $dist_version $CHANNEL\"\n\t\t\t(\n\t\t\t\tif ! is_dry_run; then\n\t\t\t\t\tset -x\n\t\t\t\tfi\n\t\t\t\t$sh_c 'apt-get -qq update >/dev/null'\n\t\t\t\t$sh_c \"DEBIAN_FRONTEND=noninteractive apt-get -y -qq install $pre_reqs >/dev/null\"\n\t\t\t\t$sh_c 'install -m 0755 -d /etc/apt/keyrings'\n\t\t\t\t$sh_c \"curl -fsSL \\\"$DOWNLOAD_URL/linux/$lsb_dist/gpg\\\" -o /etc/apt/keyrings/docker.asc\"\n\t\t\t\t$sh_c \"chmod a+r /etc/apt/keyrings/docker.asc\"\n\t\t\t\t$sh_c \"echo \\\"$apt_repo\\\" > /etc/apt/sources.list.d/docker.list\"\n\t\t\t\t$sh_c 'apt-get -qq update >/dev/null'\n\t\t\t)\n\n\t\t\tif [ \"$REPO_ONLY\" = \"1\" ]; then\n\t\t\t\texit 0\n\t\t\tfi\n\n\t\t\tpkg_version=\"\"\n\t\t\tif [ -n \"$VERSION\" ]; then\n\t\t\t\tif is_dry_run; then\n\t\t\t\t\techo \"# WARNING: VERSION pinning is not supported in DRY_RUN\"\n\t\t\t\telse\n\t\t\t\t\t# Will work for incomplete versions IE (17.12), but may not actually grab the \"latest\" if in the test channel\n\t\t\t\t\tpkg_pattern=\"$(echo \"$VERSION\" | sed 's/-ce-/~ce~.*/g' | sed 's/-/.*/g')\"\n\t\t\t\t\tsearch_command=\"apt-cache madison docker-ce | grep '$pkg_pattern' | head -1 | awk '{\\$1=\\$1};1' | cut -d' ' -f 3\"\n\t\t\t\t\tpkg_version=\"$($sh_c \"$search_command\")\"\n\t\t\t\t\techo \"INFO: Searching repository for VERSION '$VERSION'\"\n\t\t\t\t\techo \"INFO: $search_command\"\n\t\t\t\t\tif [ -z \"$pkg_version\" ]; then\n\t\t\t\t\t\techo\n\t\t\t\t\t\techo \"ERROR: '$VERSION' not found amongst apt-cache madison results\"\n\t\t\t\t\t\techo\n\t\t\t\t\t\texit 1\n\t\t\t\t\tfi\n\t\t\t\t\tif version_gte \"18.09\"; then\n\t\t\t\t\t\t\tsearch_command=\"apt-cache madison docker-ce-cli | grep '$pkg_pattern' | head -1 | awk '{\\$1=\\$1};1' | cut -d' ' -f 3\"\n\t\t\t\t\t\t\techo \"INFO: $search_command\"\n\t\t\t\t\t\t\tcli_pkg_version=\"=$($sh_c \"$search_command\")\"\n\t\t\t\t\tfi\n\t\t\t\t\tpkg_version=\"=$pkg_version\"\n\t\t\t\tfi\n\t\t\tfi\n\t\t\t(\n\t\t\t\tpkgs=\"docker-ce${pkg_version%=}\"\n\t\t\t\tif version_gte \"18.09\"; then\n\t\t\t\t\t\t# older versions didn't ship the cli and containerd as separate packages\n\t\t\t\t\t\tpkgs=\"$pkgs docker-ce-cli${cli_pkg_version%=} containerd.io\"\n\t\t\t\tfi\n\t\t\t\tif version_gte \"20.10\"; then\n\t\t\t\t\t\tpkgs=\"$pkgs docker-compose-plugin docker-ce-rootless-extras$pkg_version\"\n\t\t\t\tfi\n\t\t\t\tif version_gte \"23.0\"; then\n\t\t\t\t\t\tpkgs=\"$pkgs docker-buildx-plugin\"\n\t\t\t\tfi\n\t\t\t\tif version_gte \"28.2\"; then\n\t\t\t\t\t\tpkgs=\"$pkgs docker-model-plugin\"\n\t\t\t\tfi\n\t\t\t\tif ! is_dry_run; then\n\t\t\t\t\tset -x\n\t\t\t\tfi\n\t\t\t\t$sh_c \"DEBIAN_FRONTEND=noninteractive apt-get -y -qq install $pkgs >/dev/null\"\n\t\t\t)\n\t\t\techo_docker_as_nonroot\n\t\t\texit 0\n\t\t\t;;\n\t\tcentos|fedora|rhel)\n\t\t\tif [ \"$(uname -m)\" = \"s390x\" ]; then\n\t\t\t\techo \"Effective v27.5, please consult RHEL distro statement for s390x support.\"\n\t\t\t\texit 1\n\t\t\tfi\n\t\t\trepo_file_url=\"$DOWNLOAD_URL/linux/$lsb_dist/$REPO_FILE\"\n\t\t\t(\n\t\t\t\tif ! is_dry_run; then\n\t\t\t\t\tset -x\n\t\t\t\tfi\n\t\t\t\tif command_exists dnf5; then\n\t\t\t\t\t$sh_c \"dnf -y -q --setopt=install_weak_deps=False install dnf-plugins-core\"\n\t\t\t\t\t$sh_c \"dnf5 config-manager addrepo --overwrite --save-filename=docker-ce.repo --from-repofile='$repo_file_url'\"\n\n\t\t\t\t\tif [ \"$CHANNEL\" != \"stable\" ]; then\n\t\t\t\t\t\t$sh_c \"dnf5 config-manager setopt \\\"docker-ce-*.enabled=0\\\"\"\n\t\t\t\t\t\t$sh_c \"dnf5 config-manager setopt \\\"docker-ce-$CHANNEL.enabled=1\\\"\"\n\t\t\t\t\tfi\n\t\t\t\t\t$sh_c \"dnf makecache\"\n\t\t\t\telif command_exists dnf; then\n\t\t\t\t\t$sh_c \"dnf -y -q --setopt=install_weak_deps=False install dnf-plugins-core\"\n\t\t\t\t\t$sh_c \"rm -f /etc/yum.repos.d/docker-ce.repo /etc/yum.repos.d/docker-ce-staging.repo\"\n\t\t\t\t\t$sh_c \"dnf config-manager --add-repo $repo_file_url\"\n\n\t\t\t\t\tif [ \"$CHANNEL\" != \"stable\" ]; then\n\t\t\t\t\t\t$sh_c \"dnf config-manager --set-disabled \\\"docker-ce-*\\\"\"\n\t\t\t\t\t\t$sh_c \"dnf config-manager --set-enabled \\\"docker-ce-$CHANNEL\\\"\"\n\t\t\t\t\tfi\n\t\t\t\t\t$sh_c \"dnf makecache\"\n\t\t\t\telse\n\t\t\t\t\t$sh_c \"yum -y -q install yum-utils\"\n\t\t\t\t\t$sh_c \"rm -f /etc/yum.repos.d/docker-ce.repo /etc/yum.repos.d/docker-ce-staging.repo\"\n\t\t\t\t\t$sh_c \"yum-config-manager --add-repo $repo_file_url\"\n\n\t\t\t\t\tif [ \"$CHANNEL\" != \"stable\" ]; then\n\t\t\t\t\t\t$sh_c \"yum-config-manager --disable \\\"docker-ce-*\\\"\"\n\t\t\t\t\t\t$sh_c \"yum-config-manager --enable \\\"docker-ce-$CHANNEL\\\"\"\n\t\t\t\t\tfi\n\t\t\t\t\t$sh_c \"yum makecache\"\n\t\t\t\tfi\n\t\t\t)\n\n\t\t\tif [ \"$REPO_ONLY\" = \"1\" ]; then\n\t\t\t\texit 0\n\t\t\tfi\n\n\t\t\tpkg_version=\"\"\n\t\t\tif command_exists dnf; then\n\t\t\t\tpkg_manager=\"dnf\"\n\t\t\t\tpkg_manager_flags=\"-y -q --best\"\n\t\t\telse\n\t\t\t\tpkg_manager=\"yum\"\n\t\t\t\tpkg_manager_flags=\"-y -q\"\n\t\t\tfi\n\t\t\tif [ -n \"$VERSION\" ]; then\n\t\t\t\tif is_dry_run; then\n\t\t\t\t\techo \"# WARNING: VERSION pinning is not supported in DRY_RUN\"\n\t\t\t\telse\n\t\t\t\t\tif [ \"$lsb_dist\" = \"fedora\" ]; then\n\t\t\t\t\t\tpkg_suffix=\"fc$dist_version\"\n\t\t\t\t\telse\n\t\t\t\t\t\tpkg_suffix=\"el\"\n\t\t\t\t\tfi\n\t\t\t\t\tpkg_pattern=\"$(echo \"$VERSION\" | sed 's/-ce-/\\\\\\\\.ce.*/g' | sed 's/-/.*/g').*$pkg_suffix\"\n\t\t\t\t\tsearch_command=\"$pkg_manager list --showduplicates docker-ce | grep '$pkg_pattern' | tail -1 | awk '{print \\$2}'\"\n\t\t\t\t\tpkg_version=\"$($sh_c \"$search_command\")\"\n\t\t\t\t\techo \"INFO: Searching repository for VERSION '$VERSION'\"\n\t\t\t\t\techo \"INFO: $search_command\"\n\t\t\t\t\tif [ -z \"$pkg_version\" ]; then\n\t\t\t\t\t\techo\n\t\t\t\t\t\techo \"ERROR: '$VERSION' not found amongst $pkg_manager list results\"\n\t\t\t\t\t\techo\n\t\t\t\t\t\texit 1\n\t\t\t\t\tfi\n\t\t\t\t\tif version_gte \"18.09\"; then\n\t\t\t\t\t\t# older versions don't support a cli package\n\t\t\t\t\t\tsearch_command=\"$pkg_manager list --showduplicates docker-ce-cli | grep '$pkg_pattern' | tail -1 | awk '{print \\$2}'\"\n\t\t\t\t\t\tcli_pkg_version=\"$($sh_c \"$search_command\" | cut -d':' -f 2)\"\n\t\t\t\t\tfi\n\t\t\t\t\t# Cut out the epoch and prefix with a '-'\n\t\t\t\t\tpkg_version=\"-$(echo \"$pkg_version\" | cut -d':' -f 2)\"\n\t\t\t\tfi\n\t\t\tfi\n\t\t\t(\n\t\t\t\tpkgs=\"docker-ce$pkg_version\"\n\t\t\t\tif version_gte \"18.09\"; then\n\t\t\t\t\t# older versions didn't ship the cli and containerd as separate packages\n\t\t\t\t\tif [ -n \"$cli_pkg_version\" ]; then\n\t\t\t\t\t\tpkgs=\"$pkgs docker-ce-cli-$cli_pkg_version containerd.io\"\n\t\t\t\t\telse\n\t\t\t\t\t\tpkgs=\"$pkgs docker-ce-cli containerd.io\"\n\t\t\t\t\tfi\n\t\t\t\tfi\n\t\t\t\tif version_gte \"20.10\"; then\n\t\t\t\t\tpkgs=\"$pkgs docker-compose-plugin docker-ce-rootless-extras$pkg_version\"\n\t\t\t\tfi\n\t\t\t\tif version_gte \"23.0\"; then\n\t\t\t\t\t\tpkgs=\"$pkgs docker-buildx-plugin docker-model-plugin\"\n\t\t\t\tfi\n\t\t\t\tif ! is_dry_run; then\n\t\t\t\t\tset -x\n\t\t\t\tfi\n\t\t\t\t$sh_c \"$pkg_manager $pkg_manager_flags install $pkgs\"\n\t\t\t)\n\t\t\techo_docker_as_nonroot\n\t\t\texit 0\n\t\t\t;;\n\t\tsles)\n\t\t\techo \"Effective v27.5, please consult SLES distro statement for s390x support.\"\n\t\t\texit 1\n\t\t\t;;\n\t\t*)\n\t\t\tif [ -z \"$lsb_dist\" ]; then\n\t\t\t\tif is_darwin; then\n\t\t\t\t\techo\n\t\t\t\t\techo \"ERROR: Unsupported operating system 'macOS'\"\n\t\t\t\t\techo \"Please get Docker Desktop from https://www.docker.com/products/docker-desktop\"\n\t\t\t\t\techo\n\t\t\t\t\texit 1\n\t\t\t\tfi\n\t\t\tfi\n\t\t\techo\n\t\t\techo \"ERROR: Unsupported distribution '$lsb_dist'\"\n\t\t\techo\n\t\t\texit 1\n\t\t\t;;\n\tesac\n\texit 1\n}\n\n# wrapped up in a function so that we have some protection against only getting\n# half the file during \"curl | sh\"\ndo_install\n" }, { "path": "e2e-tests/pytest.ini", "content": "[pytest]\ntestpaths = tests\npython_files = test_*.py\npython_classes = Test*\npython_functions = test_*\naddopts = -v --tb=short\n" }, { "path": "e2e-tests/requirements.txt", "content": "selenium==4.27.1\npytest==8.3.4\npytest-xdist==3.6.1\n" }, { "path": "e2e-tests/run-tests.sh", "content": "#!/bin/bash\n\n# Helper script to run E2E tests locally\n\nset -e\n\nSELENIUM_CONTAINER=\"fossflow-selenium\"\nAPP_PORT=3000\nSELENIUM_PORT=4444\n\necho \"FossFLOW E2E Test Runner\"\n\n\n# Check if Docker is available\nif ! command -v docker &> /dev/null; then\n echo \"❌ Docker is required but not installed.\"\n echo \"Please install Docker from https://docs.docker.com/get-docker/\"\n exit 1\nfi\n\n# Check if Python is available\nif ! command -v python3 &> /dev/null; then\n echo \"❌ Python 3 is required but not installed.\"\n echo \"Please install Python 3 from https://www.python.org/\"\n exit 1\nfi\n\n# Check if pip is available\nif ! command -v pip3 &> /dev/null; then\n echo \"❌ pip3 is required but not installed.\"\n echo \"Please install pip3\"\n exit 1\nfi\n\n# Start Selenium container if not running\nif [ ! \"$(docker ps -q -f name=$SELENIUM_CONTAINER)\" ]; then\n echo \"Starting Selenium Chrome container...\"\n docker run -d --rm \\\n --name $SELENIUM_CONTAINER \\\n -p $SELENIUM_PORT:4444 \\\n -p 7900:7900 \\\n --shm-size=\"2g\" \\\n selenium/standalone-chrome:latest\n\n echo \"Waiting for Selenium to be ready...\"\n timeout 60 bash -c \"until curl -sf http://localhost:$SELENIUM_PORT/status > /dev/null; do sleep 2; done\" || {\n echo \"❌ Selenium failed to start\"\n docker logs $SELENIUM_CONTAINER\n docker stop $SELENIUM_CONTAINER\n exit 1\n }\n echo \"Selenium is ready\"\nelse\n echo \"Selenium container is already running\"\nfi\n\n# Check if FossFLOW is running\nif ! curl -sf http://localhost:$APP_PORT > /dev/null; then\n echo \"⚠️ FossFLOW app is not running on port $APP_PORT\"\n echo \"Please start it with: npm run dev\"\n echo \"\"\n read -p \"Start the app now in another terminal and press Enter to continue...\"\nfi\n\n# Verify app is accessible\nif ! curl -sf http://localhost:$APP_PORT > /dev/null; then\n echo \"❌ FossFLOW app is still not accessible on http://localhost:$APP_PORT\"\n docker stop $SELENIUM_CONTAINER 2>/dev/null || true\n exit 1\nfi\n\necho \"✅ FossFLOW app is accessible\"\necho \"\"\n\n# Install Python dependencies if needed\nif [ ! -d \"venv\" ]; then\n echo \"Creating Python virtual environment...\"\n python3 -m venv venv\n source venv/bin/activate\n pip install -r requirements.txt\nelse\n source venv/bin/activate\nfi\n\n# Run tests\necho \"Running E2E tests...\"\necho \"\"\n\nFOSSFLOW_TEST_URL=\"http://localhost:$APP_PORT\" \\\nWEBDRIVER_URL=\"http://localhost:$SELENIUM_PORT\" \\\npytest -v --tb=short \"$@\"\n\nTEST_RESULT=$?\n\n# Deactivate venv\ndeactivate\n\n# Cleanup\necho \"\"\necho \"Cleaning up...\"\ndocker stop $SELENIUM_CONTAINER 2>/dev/null || true\n\nif [ $TEST_RESULT -eq 0 ]; then\n echo \"\"\n echo \"✅ All tests passed!\"\nelse\n echo \"\"\n echo \"❌ Some tests failed\"\n exit $TEST_RESULT\nfi\n" }, { "path": "e2e-tests/test-base-paths.sh", "content": "#!/bin/bash\n# Test FossFLOW deployment at different base paths\n# This simulates how the app will be served on GitHub Pages or other platforms with subpaths\n\nset -e\n\necho \"Testing FossFLOW at multiple base paths...\"\n\n# Colors for output\nRED='\\033[0;31m'\nGREEN='\\033[0;32m'\nYELLOW='\\033[1;33m'\nNC='\\033[0m' # No Color\n\n# Base paths to test\nBASE_PATHS=(\"/\" \"/fossflow\" \"/apps/fossflow\" \"/my-org/projects/fossflow\")\n\n# Function to cleanup\ncleanup() {\n echo -e \"\\n${YELLOW}Cleaning up...${NC}\"\n\n # Stop any running containers\n docker stop nginx-test 2>/dev/null || true\n docker rm nginx-test 2>/dev/null || true\n docker stop selenium-test 2>/dev/null || true\n docker rm selenium-test 2>/dev/null || true\n\n # Kill any local servers\n if [ -f /tmp/server.pid ]; then\n kill $(cat /tmp/server.pid) 2>/dev/null || true\n rm /tmp/server.pid\n fi\n}\n\n# Set trap to cleanup on exit\ntrap cleanup EXIT\n\n# Function to test a specific base path\ntest_base_path() {\n local BASE_PATH=$1\n echo -e \"\\n${YELLOW}Testing base path: ${BASE_PATH}${NC}\"\n\n # Clean up any previous test\n docker stop nginx-test 2>/dev/null || true\n docker rm nginx-test 2>/dev/null || true\n\n # Build the app with the specific PUBLIC_URL\n echo \"Building app with PUBLIC_URL=${BASE_PATH}...\"\n (cd .. && PUBLIC_URL=\"${BASE_PATH}\" npm run build:app)\n\n # Create nginx config for this base path\n if [ \"$BASE_PATH\" = \"/\" ]; then\n LOCATION_PATH=\"/\"\n ALIAS_PATH=\"/usr/share/nginx/html/\"\n else\n LOCATION_PATH=\"${BASE_PATH%/}/\"\n ALIAS_PATH=\"/usr/share/nginx/html/\"\n fi\n\n cat > /tmp/nginx.conf < /dev/null; then\n echo -e \"${GREEN}✓ App accessible at http://localhost:3001${BASE_PATH}${NC}\"\n else\n echo -e \"${RED}✗ App NOT accessible at http://localhost:3001${BASE_PATH}${NC}\"\n echo \"Nginx logs:\"\n docker logs nginx-test\n return 1\n fi\n\n # Run E2E tests if Selenium is available\n if docker ps | grep selenium-test > /dev/null; then\n echo \"Running E2E tests...\"\n FOSSFLOW_TEST_URL=\"http://localhost:3001${BASE_PATH}\" \\\n FOSSFLOW_BASE_PATH=\"${BASE_PATH}\" \\\n WEBDRIVER_URL=\"http://localhost:4444\" \\\n pytest tests/test_base_path_routing.py -v --tb=short || {\n echo -e \"${RED}✗ E2E tests failed for base path: ${BASE_PATH}${NC}\"\n return 1\n }\n echo -e \"${GREEN}✓ E2E tests passed for base path: ${BASE_PATH}${NC}\"\n else\n echo -e \"${YELLOW}Selenium not running, skipping E2E tests${NC}\"\n echo \"To run E2E tests, start Selenium first:\"\n echo \" docker run -d --name selenium-test --network host selenium/standalone-chrome:latest\"\n fi\n\n # Clean up this test's nginx\n docker stop nginx-test 2>/dev/null || true\n docker rm nginx-test 2>/dev/null || true\n\n return 0\n}\n\n# Main execution\necho \"Setting up test environment...\"\n\n# Ensure we're in the e2e-tests directory\ncd \"$(dirname \"$0\")\"\n\n# Check if Selenium is running, offer to start it\nif ! docker ps | grep selenium > /dev/null; then\n echo -e \"${YELLOW}Selenium is not running. Would you like to start it for E2E tests? (y/n)${NC}\"\n read -r response\n if [[ \"$response\" == \"y\" ]]; then\n echo \"Starting Selenium...\"\n docker run -d \\\n --name selenium-test \\\n --network host \\\n --shm-size=2g \\\n selenium/standalone-chrome:latest\n\n echo \"Waiting for Selenium to be ready...\"\n timeout 30 bash -c 'until curl -sf http://localhost:4444/status > /dev/null 2>&1; do sleep 2; done' || {\n echo -e \"${RED}Selenium failed to start${NC}\"\n exit 1\n }\n echo -e \"${GREEN}✓ Selenium is ready${NC}\"\n fi\nfi\n\n# Test each base path\nFAILED_PATHS=()\nfor BASE_PATH in \"${BASE_PATHS[@]}\"; do\n if ! test_base_path \"$BASE_PATH\"; then\n FAILED_PATHS+=(\"$BASE_PATH\")\n fi\ndone\n\n# Summary\necho -e \"\\n=========================================\"\necho \"Test Summary:\"\necho \"=========================================\"\nif [ ${#FAILED_PATHS[@]} -eq 0 ]; then\n echo -e \"${GREEN}✓ All base paths tested successfully!${NC}\"\n echo \"Tested paths: ${BASE_PATHS[*]}\"\nelse\n echo -e \"${RED}✗ Some base paths failed:${NC}\"\n for path in \"${FAILED_PATHS[@]}\"; do\n echo \" - $path\"\n done\n echo -e \"\\n${YELLOW}This indicates the app may not work correctly when deployed to GitHub Pages or other subpath deployments.${NC}\"\n exit 1\nfi" }, { "path": "e2e-tests/test-diagram.json", "content": "{\n \"title\": \"Untitled Diagram\",\n \"icons\": [\n {\n \"id\": \"block\",\n \"name\": \"block\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iNTUxLjU5OTk4cHgiIGhlaWdodD0iMzQzLjc5OTk5cHgiIHZpZXdCb3g9IjAgMCA1NTEuNTk5OTggMzQzLjc5OTk5IgoJIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU1MS41OTk5OCAzNDMuNzk5OTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7b3BhY2l0eTowLjQ7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9Cgkuc3Qxe2ZpbGw6I0NERDlFRTt9Cgkuc3Qye2ZpbGw6I0I1QzVEQzt9Cgkuc3Qze2ZpbGw6I0ZGRkZGRjt9Cgkuc3Q0e2ZpbGw6IzY4ODVBOTt9Cgkuc3Q1e2ZpbGw6IzIzMUYyMDt9Cjwvc3R5bGU+CjxnPgoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIzMDkuMjk5OTksMzIyLjg5OTk5IDI3NC42MDAwMSwzMTYuMTAwMDEgMjc0LDE2LjIgNTUxLjU5OTk4LDE4MCAJIi8+Cgk8cG9seWdvbiBjbGFzcz0ic3QxIiBwb2ludHM9IjI3NC42MDAwMSwyMjguOCA5Mi4yLDExOS4yIDI3NCw5LjcgNDU3LDExOS4yIAkiLz4KCTxwb2x5Z29uIGNsYXNzPSJzdDIiIHBvaW50cz0iOTAuMiwxOTUgMjc0LjYwMDAxLDMwNS43OTk5OSAyNzQuNjAwMDEsMzA1Ljc5OTk5IDI3NC42MDAwMSwyMzEuMyA5MC4yLDEyMC40IAkiLz4KCTxwb2x5Z29uIGNsYXNzPSJzdDMiIHBvaW50cz0iMjg4LjI5OTk5LDIyMC42MDAwMSAxMzUuNywxMjcuNyAzMDMsMjcgMjc0LDkuNyA5Mi4yLDExOS4yIDI3NC42MDAwMSwyMjguOCAJIi8+Cgk8cG9seWdvbiBjbGFzcz0ic3Q0IiBwb2ludHM9IjQ1OSwxOTUgMjc0LjYwMDAxLDMwNS43OTk5OSAyNzQuNjAwMDEsMzA1Ljc5OTk5IDI3NC42MDAwMSwyMzEuMyA0NTksMTIwLjQgCSIvPgoJPHBhdGggY2xhc3M9InN0NSIgZD0iTTQ2Ny4yMDAwMSwxMTUuNkw0NjcuMjAwMDEsMTE1LjZMMjc0LDBMODMuMDAwMDIsMTE1LjFsLTEsMC42djgzLjdsMTkyLjU5OTk4LDExNS44MDAwMkw0NjYuMjAwMDEsMjAwCgkJbDEtMC42MDAwMVYxMTUuNnogTTI3NCw5LjdsMTgzLDEwOS41TDI3NC42MDAwMSwyMjguOEw5Mi4yMDAwMSwxMTkuMkwyNzQsOS43eiBNNDU3LDEyNC4xdjY5LjY5OTk5TDI3Ni43MDAwMSwzMDIuMjAwMDFWMjMyLjUKCQlMNDU3LDEyNC4xeiBNMjcyLjYwMDAxLDIzMi4zOTk5OXY2OS42OTk5OEw5Mi4zMDAwMSwxOTMuOHYtNjkuN0wyNzIuNjAwMDEsMjMyLjM5OTk5eiIvPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"cache\",\n \"name\": \"cache\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1NS4xcHgiIGhlaWdodD0iNTcuM3B4IiB2aWV3Qm94PSIwIDAgNTUuMSA1Ny4zIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1NS4xIDU3LjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfMyI+CjwvZz4KPGcgaWQ9IkxheWVyXzQiPgo8L2c+CjxnIGlkPSJMYXllcl8xMCI+Cgk8ZyBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiPgoJCTxwb2x5Z29uIHBvaW50cz0iMzUuNiw0NiAzOC4zLDQ4LjEgMjUuNiw1Mi4xIDIxLjIsNTMgMzIsMzguOSA0MS40LDQ0LjggCQkiLz4KCTwvZz4KPC9nPgo8ZyBpZD0iTGF5ZXJfNyI+CjwvZz4KPGcgaWQ9IkxheWVyXzYiPgoJPHBvbHlnb24gZmlsbD0iI0YyQzI1NiIgcG9pbnRzPSIzMS42LDE5IDE4LjQsMTEuMSAxOC40LDMzLjkgMjEuMiwzNS41IDIxLjIsNTIuMSAzMS42LDMxLjUgMjYsMjguMSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjRkZFNEFFIiBwb2ludHM9IjE4LjQsMzMuOSAxOC41LDMzLjkgMjUuNiwxNS40IDE4LjQsMTEuMSAJIi8+Cgk8cG9seWdvbiBmaWxsPSJub25lIiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzEuNiwxOSAKCQkxOC40LDExLjEgMTguNCwzMy45IDIxLjIsMzUuNSAyMS4yLDUyLjEgMzEuNiwzMS41IDI2LDI4LjEgCSIvPgo8L2c+CjxnIGlkPSJMYXllcl81Ij4KCTxwb2x5Z29uIGZpbGw9IiNGN0M1NkIiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxOC40LDExLjEgCgkJMjQuNSw3LjQgMzcuNiwxNS4zIDMyLDI0LjMgMzcuNiwyNy43IDI3LjIsNDguMyAyMS4yLDUyLjEgMzEuNiwzMS41IDI2LDI4LjEgMzEuNiwxOSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjNzU0RjBDIiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS13aWR0aD0iMC40IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzcuNiwxNS4zIDMxLjYsMTkgMjYsMjguMSAzMS42LDMxLjUgCgkJMjEuMiw1Mi4xIDI3LjIsNDguMyAzNy42LDI3LjcgMzIsMjQuMyAJIi8+Cgk8ZyBpZD0iTGF5ZXJfMTIiPgoJPC9nPgoJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDEwMjAyIiBzdHJva2Utd2lkdGg9IjAuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjE4LjQsMTEuMSAKCQkyNC41LDcuNCAzNy42LDE1LjMgMzIsMjQuMyAzNy42LDI3LjcgMjcuMiw0OC4zIDIxLjIsNTIuMSAzMS42LDMxLjUgMjYsMjguMSAzMS42LDE5IAkiLz4KPC9nPgo8ZyBpZD0iTGF5ZXJfOCI+Cgk8cG9seWdvbiBmaWxsPSIjQUY3QTJFIiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS13aWR0aD0iMC40IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzEuNiwzMS41IAoJCTM3LjYsMjcuNyAzMiwyNC4zIDI2LDI4LjEgCSIvPgo8L2c+CjxnIGlkPSJMYXllcl8xMSI+Cgk8cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDEwMjAyIiBzdHJva2Utd2lkdGg9IjAuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjM3LjYsMTUuMyAKCQkzMS42LDE5IDI2LDI4LjEgMzIsMjQuMyAzNy42LDE1LjMgCSIvPgo8L2c+CjxnIGlkPSJMYXllcl85Ij4KCTxnPgoJCTxwYXRoIGZpbGw9IiMwMTAyMDIiIGQ9Ik0yNC41LDcuNGwxMy4yLDcuOWwtNS43LDlsNS42LDMuNEwyNy4yLDQ4LjNsLTYsMy43VjM1LjVsLTIuNy0xLjZWMTEuMUwyNC41LDcuNCBNMjQuNSw2LjYKCQkJYy0wLjEsMC0wLjMsMC0wLjQsMC4xbC02LDMuN2MtMC4yLDAuMS0wLjQsMC40LTAuNCwwLjd2MjIuOGMwLDAuMywwLjEsMC41LDAuNCwwLjdsMi4zLDEuNHYxNi4xYzAsMC4zLDAuMiwwLjYsMC40LDAuNwoJCQljMC4xLDAuMSwwLjMsMC4xLDAuNCwwLjFzMC4zLDAsMC40LTAuMWw2LTMuN2MwLjEtMC4xLDAuMi0wLjIsMC4zLTAuM2wxMC40LTIwLjZjMC4yLTAuNCwwLjEtMC44LTAuMy0xbC00LjktM2w1LjItOC40CgkJCWMwLjEtMC4yLDAuMS0wLjQsMC4xLTAuNmMtMC4xLTAuMi0wLjItMC40LTAuNC0wLjVsLTEzLjEtOEMyNC43LDYuNiwyNC42LDYuNiwyNC41LDYuNkwyNC41LDYuNnoiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"cardterminal\",\n \"name\": \"cardterminal\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1MjIuMXB4IiBoZWlnaHQ9IjYxNnB4IiB2aWV3Qm94PSIwIDAgNTIyLjEgNjE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MjIuMSA2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBvcGFjaXR5PSIwLjE1IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgZD0iTTM2MSw1ODMuMmMyLDIzLjgtNDIuOSwzOC43LTEwNC45LDE5LjNzLTExNy41LTY1LjYtMTE5LjUtODkuMwoJYy0yLTIzLjgsNDUtMzguNCwxMDctMTkuMUMzMDUuNSw1MTMuNCwzNTksNTU5LjQsMzYxLDU4My4yeiIvPgo8ZyBpZD0iTGF5ZXJfMV8xXyIgZGlzcGxheT0ibm9uZSI+Cgk8cG9seWdvbiBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0E3QTlBQyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNDc2LjUsNDMxLjMgMjYxLjEsNTU1LjcgCgkJNDUuNiw0MzEuMyA0NS42LDE4Mi42IDI2MS4xLDU4LjIgNDc2LjUsMTgyLjYgCSIvPgo8L2c+CjxnIGlkPSJMYXllcl8yXzFfIj4KCTxnPgoJCTxnPgoJCQk8Zz4KCQkJCTxwYXRoIGZpbGw9IiM0QjZFOTgiIGQ9Ik0zNzYsMTQ2LjZ2Mjk0LjVjMCwzLjEtMC41LDUuNy0xLjQsNy44Yy0wLjksMi4xLTIuMiwzLjctMy43LDQuN2wwLDBjLTAuMiwwLjEtMC40LDAuMy0wLjYsMC40CgkJCQkJTDMzMiw0NzYuMWMzLjQtMS45LDUuNS02LjQsNS41LTEyLjdWMTY4LjljMC0xMS42LTctMjUtMTUuNy0zMEwxNjAuNSw0NS44Yy0zLjMtMS45LTYuNC0yLjMtOC45LTEuNGwzNi4zLTIxLjEKCQkJCQljMi45LTIuMiw2LjgtMi4zLDExLjIsMC4ybDE2MS4yLDkzLjFjNS43LDMuMywxMC44LDEwLjMsMTMuNSwxOEMzNzUuMiwxMzguNiwzNzYsMTQyLjcsMzc2LDE0Ni42eiIvPgoJCQk8L2c+CgkJCTxnPgoJCQkJPHBvbHlnb24gZmlsbD0iIzAwNzBEOSIgcG9pbnRzPSIxNzQsMzkwIDE3NCw0NzIgMzA2LjEsNTQ4LjMgMzA2LjEsNDY2LjMgCQkJCSIvPgoJCQk8L2c+CgkJCTxnPgoJCQkJPHBvbHlnb24gZmlsbD0iI0ZGQzYwMCIgcG9pbnRzPSIyMzEuMiw0MzUuNiAxODQuNCw0MDguNiAxODQuNCw0MzYuNiAxODQuNCw0MzcuNiAxODQuNCw0NjUuNyAyMzEuMiw0OTIuNyAyMzEuMiw0NjMuNiAKCQkJCQkyMzEuMiw0NjMuNiAJCQkJIi8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSIjNjg4NUE5IiBkPSJNMzM3LjQsMTgyLjd2LTEzLjhjMC0xMS42LTctMjUtMTUuNy0zMEwxNjAuNSw0NS44Yy0zLjMtMS45LTYuNC0yLjMtOC45LTEuNGwzNi4zLTIxLjEKCQkJCQljMi45LTIuMiw2LjgtMi4zLDExLjIsMC4ybDE2MS4yLDkzLjFjNS43LDMuMywxMC44LDEwLjMsMTMuNSwxOEMzNjMuMSwxNTEuNywzNTAuOSwxNjcuOCwzMzcuNCwxODIuN3oiLz4KCQkJPC9nPgoJCQk8Zz4KCQkJCTxwb2x5Z29uIGZpbGw9IiMwQkIyRjMiIHBvaW50cz0iMjY1LjUsNDgzLjIgMjU1LDQ3Ny4xIDI1NSw1MDIuNyAyNjUuNSw1MDguOCAyNjUuNSw0OTUuOCAyNjUuNSw0OTUuOCAJCQkJIi8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8cG9seWdvbiBmaWxsPSIjMEJCMkYzIiBwb2ludHM9IjI2NS41LDQ0NS42IDI1NSw0MzkuNSAyNTUsNDY1LjEgMjY1LjUsNDcxLjIgMjY1LjUsNDU4LjIgMjY1LjUsNDU4LjIgCQkJCSIvPgoJCQk8L2c+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iI0NERDlFRSIgZD0iTTMzOC4yLDQ2My40YzAsMTEuNi03LDE2LjktMTUuNywxMS45bC0xNjEuMi05My4xYy04LjctNS0xNS43LTE4LjUtMTUuNy0zMFY1Ny43CgkJCQkJYzAtMTEuNiw3LTE2LjksMTUuNy0xMS45bDE2MS4yLDkzLjFjOC43LDUsMTUuNywxOC41LDE1LjcsMzBWNDYzLjR6Ii8+CgkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzI4LjgsNDc5LjFjLTIuMywwLTQuOC0wLjctNy4yLTIuMmwtMTYxLjItOTMuMWMtOS40LTUuNC0xNi43LTE5LjQtMTYuNy0zMS44VjU3LjcKCQkJCQljMC05LjYsNC41LTE1LjgsMTEuNS0xNS44YzIuMywwLDQuOCwwLjcsNy4yLDIuMmwxNjEuMiw5My4xYzkuNCw1LjQsMTYuNywxOS40LDE2LjcsMzEuOHYyOTQuNQoJCQkJCUMzNDAuMiw0NzMsMzM1LjcsNDc5LjEsMzI4LjgsNDc5LjF6IE0xNTUuMSw0NS45Yy00LjUsMC03LjUsNC42LTcuNSwxMS44djI5NC41YzAsMTAuOSw2LjYsMjMuNiwxNC43LDI4LjNsMTYxLjIsOTMuMQoJCQkJCWMxLjksMS4xLDMuNiwxLjYsNS4yLDEuNmM0LjUsMCw3LjUtNC42LDcuNS0xMS44VjE2OC45YzAtMTAuOS02LjYtMjMuNi0xNC43LTI4LjNsLTE2MS4yLTkzQzE1OC41LDQ2LjUsMTU2LjcsNDUuOSwxNTUuMSw0NS45egoJCQkJCSIvPgoJCQk8L2c+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggZmlsbD0iI0U2RTdFOCIgZD0iTTMwNy43LDIyOC4yYy0xLjIsMC0yLjUtMC40LTMuNy0xLjFMMTc1LjcsMTUzYy00LjQtMi41LTcuOC05LTcuOC0xNC44Vjg5LjZjMC01LjUsMy4xLTgsNi4xLTgKCQkJCQkJYzEuMiwwLDIuNSwwLjQsMy43LDEuMWwxMjguMyw3NGMwLjYsMC4zLDEuMSwwLjcsMS42LDEuMWMzLjcsMy4xLDYuMiw4LjcsNi4yLDEzLjd2NDguN0MzMTMuOCwyMjUuNywzMTAuOCwyMjguMiwzMDcuNywyMjguMnoKCQkJCQkJIi8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTc0LDgzLjZjMC44LDAsMS43LDAuMywyLjcsMC44bDY1LjEsMzcuNmw0OS44LDI4LjdsMTMuNCw3LjdjMC40LDAuMywwLjksMC42LDEuMywwLjkKCQkJCQkJYzMuMSwyLjYsNS41LDcuNyw1LjUsMTIuMXY0OC43YzAsMy43LTEuNyw2LTQuMSw2Yy0wLjgsMC0xLjgtMC4zLTIuNy0wLjhsLTM0LjUtMTkuOWwtMjEuNy0xMi41bC0xNC44LTguNmwtNDkuOC0yOC43CgkJCQkJCWwtNy41LTQuM2MtMy44LTIuMi02LjgtOC02LjgtMTMuMVY4OS42QzE2OS45LDg1LjgsMTcxLjYsODMuNiwxNzQsODMuNiBNMTc0LDc5LjZMMTc0LDc5LjZjLTMuOSwwLTguMSwzLjEtOC4xLDEwdjQ4LjcKCQkJCQkJYzAsNi41LDMuOCwxMy42LDguOCwxNi41bDcuNSw0LjNsNDkuOCwyOC43bDE0LjgsOC42bDIxLjcsMTIuNWwzNC41LDE5LjljMS42LDAuOSwzLjEsMS40LDQuNywxLjRjMy45LDAsOC4xLTMuMSw4LjEtMTB2LTQ4LjcKCQkJCQkJYzAtNS41LTIuOS0xMS44LTctMTUuMmMtMC42LTAuNS0xLjItMC45LTEuOS0xLjNsLTEzLjQtNy43bC00OS44LTI4LjdMMTc4LjYsODFDMTc3LjIsODAsMTc1LjYsNzkuNiwxNzQsNzkuNkwxNzQsNzkuNnoiLz4KCQkJCTwvZz4KCQkJPC9nPgoJCQk8Zz4KCQkJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMTEuOCwxNzEuNXY5LjhsLTQxLjQsMjQuMWwtMjEuNy0xMi41bDU3LjUtMzMuNUMzMDkuNSwxNjIsMzExLjgsMTY3LjEsMzExLjgsMTcxLjV6Ii8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjI5MS42LDE1MC43IDIzMy45LDE4NC4zIDE4NC4yLDE1NS42IDI0MS44LDEyMiAJCQkJIi8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8Zz4KCQkJCQk8Zz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjAyLjMsMjI4Yy0xLjMsMC0yLjUtMC40LTMuOC0xLjFsLTE5LjgtMTEuNGMtNC42LTIuNi04LjItOS40LTguMi0xNS40di0xMS4yCgkJCQkJCQkJYzAtNS43LDMuMi04LjMsNi4zLTguM2MxLjMsMCwyLjUsMC40LDMuOCwxLjFsMTkuOCwxMS40YzQuNiwyLjYsOC4yLDkuNCw4LjIsMTUuNHYxMS4yQzIwOC42LDIyNS41LDIwNS41LDIyOCwyMDIuMywyMjh6Ii8+CgkJCQkJCTwvZz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTc2LjgsMTgyLjZjMC45LDAsMS44LDAuMywyLjgsMC45bDE5LjgsMTEuNGM0LDIuMyw3LjIsOC40LDcuMiwxMy43djExLjJjMCwzLjktMS44LDYuMy00LjMsNi4zCgkJCQkJCQkJYy0wLjksMC0xLjgtMC4zLTIuOC0wLjlsLTE5LjgtMTEuNGMtNC0yLjMtNy4yLTguNC03LjItMTMuN3YtMTEuMkMxNzIuNSwxODQuOSwxNzQuMywxODIuNiwxNzYuOCwxODIuNiBNMTc2LjgsMTc4LjYKCQkJCQkJCQlMMTc2LjgsMTc4LjZjLTQsMC04LjMsMy4yLTguMywxMC4zdjExLjJjMCw2LjgsMy45LDE0LjEsOS4yLDE3LjFsMTkuOCwxMS40YzEuNiwwLjksMy4yLDEuNCw0LjgsMS40YzQsMCw4LjMtMy4yLDguMy0xMC4zCgkJCQkJCQkJdi0xMS4yYzAtNi44LTMuOS0xNC4xLTkuMi0xNy4xTDE4MS43LDE4MEMxODAuMSwxNzkuMSwxNzguNCwxNzguNiwxNzYuOCwxNzguNkwxNzYuOCwxNzguNnoiLz4KCQkJCQkJPC9nPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iI0JDQkVDMCIgZD0iTTIwMi45LDE5OGMwLjMsMS4yLDAuNSwyLjQsMC41LDMuNnYxMS4yYzAsNS4zLTMuMiw3LjctNy4yLDUuNGwtMTkuOC0xMS40Yy0xLjItMC43LTIuNC0xLjgtMy40LTMuMQoJCQkJCQkJYzEsNC4yLDMuNiw4LjMsNi43LDEwLjFsMTkuOCwxMS40YzQsMi4zLDcuMi0wLjEsNy4yLTUuNHYtMTEuMkMyMDYuNiwyMDQuOSwyMDUuMSwyMDAuOSwyMDIuOSwxOTh6Ii8+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxnPgoJCQkJCQkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTI1MS4yLDI1Ni4zYy0xLjMsMC0yLjUtMC40LTMuOC0xLjFsLTE5LjgtMTEuNGMtNC42LTIuNi04LjItOS40LTguMi0xNS40di0xMS4yCgkJCQkJCQkJYzAtNS43LDMuMi04LjMsNi4zLTguM2MxLjMsMCwyLjUsMC40LDMuOCwxLjFsMTkuOCwxMS40YzQuNiwyLjYsOC4yLDkuNCw4LjIsMTUuNFYyNDhDMjU3LjUsMjUzLjcsMjU0LjMsMjU2LjMsMjUxLjIsMjU2LjN6CgkJCQkJCQkJIi8+CgkJCQkJCTwvZz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMjI1LjcsMjEwLjhjMC45LDAsMS44LDAuMywyLjgsMC45bDE5LjgsMTEuNGM0LDIuMyw3LjIsOC40LDcuMiwxMy43VjI0OGMwLDMuOS0xLjgsNi4zLTQuMyw2LjMKCQkJCQkJCQljLTAuOSwwLTEuOC0wLjMtMi44LTAuOUwyMjguNSwyNDJjLTQtMi4zLTcuMi04LjQtNy4yLTEzLjd2LTExLjJDMjIxLjQsMjEzLjEsMjIzLjEsMjEwLjgsMjI1LjcsMjEwLjggTTIyNS43LDIwNi44CgkJCQkJCQkJTDIyNS43LDIwNi44Yy00LDAtOC4zLDMuMi04LjMsMTAuM3YxMS4yYzAsNi44LDMuOSwxNC4xLDkuMiwxNy4xbDE5LjgsMTEuNGMxLjYsMC45LDMuMiwxLjQsNC44LDEuNGM0LDAsOC4zLTMuMiw4LjMtMTAuMwoJCQkJCQkJCXYtMTEuMmMwLTYuOC0zLjktMTQuMS05LjItMTcuMWwtMTkuOC0xMS40QzIyOC45LDIwNy4zLDIyNy4zLDIwNi44LDIyNS43LDIwNi44TDIyNS43LDIwNi44eiIvPgoJCQkJCQk8L2c+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjQkNCRUMwIiBkPSJNMjUxLjcsMjI2LjJjMC4zLDEuMiwwLjUsMi40LDAuNSwzLjZWMjQxYzAsNS4zLTMuMiw3LjctNy4yLDUuNEwyMjUuMiwyMzVjLTEuMi0wLjctMi40LTEuOC0zLjQtMy4xCgkJCQkJCQljMSw0LjIsMy42LDguMyw2LjcsMTAuMWwxOS44LDExLjRjNCwyLjMsNy4yLTAuMSw3LjItNS40di0xMS4yQzI1NS41LDIzMy4xLDI1NCwyMjkuMSwyNTEuNywyMjYuMnoiLz4KCQkJCQk8L2c+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8Zz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzAwLDI4NC41Yy0xLjMsMC0yLjUtMC40LTMuOC0xLjFMMjc2LjQsMjcyYy00LjYtMi42LTguMi05LjQtOC4yLTE1LjR2LTExLjJjMC01LjcsMy4yLTguMyw2LjMtOC4zCgkJCQkJCQkJYzEuMywwLDIuNSwwLjQsMy44LDEuMWwxOS44LDExLjRjNC42LDIuNiw4LjIsOS40LDguMiwxNS40djExLjJDMzA2LjMsMjgxLjksMzAzLjIsMjg0LjUsMzAwLDI4NC41eiIvPgoJCQkJCQk8L2c+CgkJCQkJCTxnPgoJCQkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTI3NC41LDIzOWMwLjksMCwxLjgsMC4zLDIuOCwwLjlsMTkuOCwxMS40YzQsMi4zLDcuMiw4LjQsNy4yLDEzLjd2MTEuMmMwLDMuOS0xLjgsNi4zLTQuMyw2LjMKCQkJCQkJCQljLTAuOSwwLTEuOC0wLjMtMi44LTAuOWwtMTkuOC0xMS40Yy00LTIuMy03LjItOC40LTcuMi0xMy43di0xMS4yQzI3MC4yLDI0MS4zLDI3MiwyMzksMjc0LjUsMjM5IE0yNzQuNSwyMzVMMjc0LjUsMjM1CgkJCQkJCQkJYy00LDAtOC4zLDMuMi04LjMsMTAuM3YxMS4yYzAsNi44LDMuOSwxNC4xLDkuMiwxNy4xbDE5LjgsMTEuNGMxLjYsMC45LDMuMiwxLjQsNC44LDEuNGM0LDAsOC4zLTMuMiw4LjMtMTAuM1YyNjUKCQkJCQkJCQljMC02LjgtMy45LTE0LjEtOS4yLTE3LjFsLTE5LjgtMTEuNEMyNzcuOCwyMzUuNSwyNzYuMSwyMzUsMjc0LjUsMjM1TDI3NC41LDIzNXoiLz4KCQkJCQkJPC9nPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iI0JDQkVDMCIgZD0iTTMwMC42LDI1NC40YzAuMywxLjIsMC41LDIuNCwwLjUsMy42djExLjJjMCw1LjMtMy4yLDcuNy03LjIsNS40bC0xOS44LTExLjQKCQkJCQkJCWMtMS4yLTAuNy0yLjQtMS44LTMuNC0zLjFjMSw0LjIsMy42LDguMyw2LjcsMTAuMWwxOS44LDExLjRjNCwyLjMsNy4yLTAuMSw3LjItNS40VjI2NUMzMDQuMywyNjEuMywzMDIuOCwyNTcuMywzMDAuNiwyNTQuNHoKCQkJCQkJCSIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxnPgoJCQkJCQk8Zz4KCQkJCQkJCTxnPgoJCQkJCQkJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMDIuMywyNzQuM2MtMS4zLDAtMi41LTAuNC0zLjgtMS4xbC0xOS44LTExLjRjLTQuNi0yLjYtOC4yLTkuNC04LjItMTUuNHYtMTEuMgoJCQkJCQkJCQljMC01LjcsMy4yLTguMyw2LjMtOC4zYzEuMywwLDIuNSwwLjQsMy44LDEuMWwxOS44LDExLjRjNC42LDIuNiw4LjIsOS40LDguMiwxNS40VjI2NkMyMDguNiwyNzEuOCwyMDUuNSwyNzQuMywyMDIuMywyNzQuMwoJCQkJCQkJCQl6Ii8+CgkJCQkJCQk8L2c+CgkJCQkJCQk8Zz4KCQkJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTc2LjgsMjI4LjljMC45LDAsMS44LDAuMywyLjgsMC45bDE5LjgsMTEuNGM0LDIuMyw3LjIsOC40LDcuMiwxMy43VjI2NmMwLDMuOS0xLjgsNi4zLTQuMyw2LjMKCQkJCQkJCQkJYy0wLjksMC0xLjgtMC4zLTIuOC0wLjlMMTc5LjcsMjYwYy00LTIuMy03LjItOC40LTcuMi0xMy43di0xMS4yQzE3Mi41LDIzMS4yLDE3NC4zLDIyOC45LDE3Ni44LDIyOC45IE0xNzYuOCwyMjQuOQoJCQkJCQkJCQlMMTc2LjgsMjI0LjljLTQsMC04LjMsMy4yLTguMywxMC4zdjExLjJjMCw2LjgsMy45LDE0LjEsOS4yLDE3LjFsMTkuOCwxMS40YzEuNiwwLjksMy4yLDEuNCw0LjgsMS40YzQsMCw4LjMtMy4yLDguMy0xMC4zCgkJCQkJCQkJCXYtMTEuMmMwLTYuOC0zLjktMTQuMS05LjItMTcuMWwtMTkuOC0xMS40QzE4MC4xLDIyNS4zLDE3OC40LDIyNC45LDE3Ni44LDIyNC45TDE3Ni44LDIyNC45eiIvPgoJCQkJCQkJPC9nPgoJCQkJCQk8L2c+CgkJCQkJCTxnPgoJCQkJCQkJPHBhdGggZmlsbD0iI0JDQkVDMCIgZD0iTTIwMi45LDI0NC4zYzAuMywxLjIsMC41LDIuNCwwLjUsMy42djExLjJjMCw1LjMtMy4yLDcuNy03LjIsNS40bC0xOS44LTExLjQKCQkJCQkJCQljLTEuMi0wLjctMi40LTEuOC0zLjQtMy4xYzEsNC4yLDMuNiw4LjMsNi43LDEwLjFsMTkuOCwxMS40YzQsMi4zLDcuMi0wLjEsNy4yLTUuNHYtMTEuMgoJCQkJCQkJCUMyMDYuNiwyNTEuMiwyMDUuMSwyNDcuMiwyMDIuOSwyNDQuM3oiLz4KCQkJCQkJPC9nPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPGc+CgkJCQkJCQk8Zz4KCQkJCQkJCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjUxLjIsMzAyLjVjLTEuMywwLTIuNS0wLjQtMy44LTEuMUwyMjcuNSwyOTBjLTQuNi0yLjYtOC4yLTkuNC04LjItMTUuNHYtMTEuMgoJCQkJCQkJCQljMC0yLjMsMC41LTQuMywxLjYtNS44YzEuMS0xLjYsMi44LTIuNSw0LjctMi41YzEuMywwLDIuNSwwLjQsMy44LDEuMWwxOS44LDExLjRjNC42LDIuNiw4LjIsOS40LDguMiwxNS40djExLjIKCQkJCQkJCQkJQzI1Ny41LDMwMCwyNTQuMywzMDIuNSwyNTEuMiwzMDIuNXoiLz4KCQkJCQkJCTwvZz4KCQkJCQkJCTxnPgoJCQkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yMjUuNywyNTcuMWMwLjksMCwxLjgsMC4zLDIuOCwwLjlsMTkuOCwxMS40YzQsMi4zLDcuMiw4LjQsNy4yLDEzLjd2MTEuMmMwLDMuOS0xLjgsNi4zLTQuMyw2LjMKCQkJCQkJCQkJYy0wLjksMC0xLjgtMC4zLTIuOC0wLjlsLTE5LjgtMTEuNGMtNC0yLjMtNy4yLTguNC03LjItMTMuN3YtMTEuMkMyMjEuNCwyNTkuNCwyMjMuMSwyNTcuMSwyMjUuNywyNTcuMSBNMjI1LjcsMjUzLjEKCQkJCQkJCQkJTDIyNS43LDI1My4xYy0yLjUsMC00LjksMS4yLTYuNCwzLjRjLTEuMywxLjgtMS45LDQuMi0xLjksNi45djExLjJjMCw2LjgsMy45LDE0LjEsOS4yLDE3LjFsMTkuOCwxMS40CgkJCQkJCQkJCWMxLjYsMC45LDMuMiwxLjQsNC44LDEuNGM0LDAsOC4zLTMuMiw4LjMtMTAuM1YyODNjMC02LjgtMy45LTE0LjEtOS4yLTE3LjFsLTE5LjgtMTEuNAoJCQkJCQkJCQlDMjI4LjksMjUzLjUsMjI3LjMsMjUzLjEsMjI1LjcsMjUzLjFMMjI1LjcsMjUzLjF6Ii8+CgkJCQkJCQk8L2c+CgkJCQkJCTwvZz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjQkNCRUMwIiBkPSJNMjUxLjcsMjcyLjVjMC4zLDEuMiwwLjUsMi40LDAuNSwzLjZ2MTEuMmMwLDUuMy0zLjIsNy43LTcuMiw1LjRsLTE5LjgtMTEuNAoJCQkJCQkJCWMtMS4yLTAuNy0yLjQtMS44LTMuNC0zLjFjMSw0LjIsMy42LDguMyw2LjcsMTAuMWwxOS44LDExLjRjNCwyLjMsNy4yLTAuMSw3LjItNS40VjI4M0MyNTUuNSwyNzkuNCwyNTQsMjc1LjQsMjUxLjcsMjcyLjV6IgoJCQkJCQkJCS8+CgkJCQkJCTwvZz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxnPgoJCQkJCQkJPGc+CgkJCQkJCQkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTMwMCwzMzAuN2MtMS4zLDAtMi41LTAuNC0zLjgtMS4xbC0xOS44LTExLjRjLTQuNi0yLjYtOC4yLTkuNC04LjItMTUuNHYtMTEuMgoJCQkJCQkJCQljMC01LjcsMy4yLTguMyw2LjMtOC4zYzEuMywwLDIuNSwwLjQsMy44LDEuMWwxOS44LDExLjRjNC42LDIuNiw4LjIsOS40LDguMiwxNS40djExLjJDMzA2LjMsMzI4LjIsMzAzLjIsMzMwLjcsMzAwLDMzMC43egoJCQkJCQkJCQkiLz4KCQkJCQkJCTwvZz4KCQkJCQkJCTxnPgoJCQkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yNzQuNSwyODUuM2MwLjksMCwxLjgsMC4zLDIuOCwwLjlsMTkuOCwxMS40YzQsMi4zLDcuMiw4LjQsNy4yLDEzLjd2MTEuMmMwLDMuOS0xLjgsNi4zLTQuMyw2LjMKCQkJCQkJCQkJYy0wLjksMC0xLjgtMC4zLTIuOC0wLjlsLTE5LjgtMTEuNGMtNC0yLjMtNy4yLTguNC03LjItMTMuN3YtMTEuMkMyNzAuMiwyODcuNiwyNzIsMjg1LjMsMjc0LjUsMjg1LjMgTTI3NC41LDI4MS4zCgkJCQkJCQkJCUwyNzQuNSwyODEuM2MtNCwwLTguMywzLjItOC4zLDEwLjN2MTEuMmMwLDYuOCwzLjksMTQuMSw5LjIsMTcuMWwxOS44LDExLjRjMS42LDAuOSwzLjIsMS40LDQuOCwxLjRjNCwwLDguMy0zLjIsOC4zLTEwLjMKCQkJCQkJCQkJdi0xMS4yYzAtNi44LTMuOS0xNC4xLTkuMi0xNy4xbC0xOS44LTExLjRDMjc3LjgsMjgxLjcsMjc2LjEsMjgxLjMsMjc0LjUsMjgxLjNMMjc0LjUsMjgxLjN6Ii8+CgkJCQkJCQk8L2c+CgkJCQkJCTwvZz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjQkNCRUMwIiBkPSJNMzAwLjYsMzAwLjdjMC4zLDEuMiwwLjUsMi40LDAuNSwzLjZ2MTEuMmMwLDUuMy0zLjIsNy43LTcuMiw1LjRsLTE5LjgtMTEuNAoJCQkJCQkJCWMtMS4yLTAuNy0yLjQtMS44LTMuNC0zLjFjMSw0LjIsMy42LDguMyw2LjcsMTAuMWwxOS44LDExLjRjNCwyLjMsNy4yLTAuMSw3LjItNS40di0xMS4yCgkJCQkJCQkJQzMwNC4zLDMwNy42LDMwMi44LDMwMy42LDMwMC42LDMwMC43eiIvPgoJCQkJCQk8L2c+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxnPgoJCQkJCQkJPGc+CgkJCQkJCQkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIwMi4zLDMyMC42Yy0xLjMsMC0yLjUtMC40LTMuOC0xLjFMMTc4LjcsMzA4Yy00LjYtMi42LTguMi05LjQtOC4yLTE1LjR2LTExLjIKCQkJCQkJCQkJYzAtNS43LDMuMi04LjMsNi4zLTguM2MxLjMsMCwyLjUsMC40LDMuOCwxLjFsMTkuOCwxMS40YzQuNiwyLjYsOC4yLDkuNCw4LjIsMTUuNHYxMS4yQzIwOC42LDMxOCwyMDUuNSwzMjAuNiwyMDIuMywzMjAuNnoKCQkJCQkJCQkJIi8+CgkJCQkJCQk8L2c+CgkJCQkJCQk8Zz4KCQkJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTc2LjgsMjc1LjFjMC45LDAsMS44LDAuMywyLjgsMC45bDE5LjgsMTEuNGM0LDIuMyw3LjIsOC40LDcuMiwxMy43djExLjJjMCwzLjktMS44LDYuMy00LjMsNi4zCgkJCQkJCQkJCWMtMC45LDAtMS44LTAuMy0yLjgtMC45bC0xOS44LTExLjRjLTQtMi4zLTcuMi04LjQtNy4yLTEzLjd2LTExLjJDMTcyLjUsMjc3LjUsMTc0LjMsMjc1LjEsMTc2LjgsMjc1LjEgTTE3Ni44LDI3MS4xCgkJCQkJCQkJCUwxNzYuOCwyNzEuMWMtNCwwLTguMywzLjItOC4zLDEwLjN2MTEuMmMwLDYuOCwzLjksMTQuMSw5LjIsMTcuMWwxOS44LDExLjRjMS42LDAuOSwzLjIsMS40LDQuOCwxLjRjNCwwLDguMy0zLjIsOC4zLTEwLjMKCQkJCQkJCQkJVjMwMWMwLTYuOC0zLjktMTQuMS05LjItMTcuMWwtMTkuOC0xMS40QzE4MC4xLDI3MS42LDE3OC40LDI3MS4xLDE3Ni44LDI3MS4xTDE3Ni44LDI3MS4xeiIvPgoJCQkJCQkJPC9nPgoJCQkJCQk8L2c+CgkJCQkJCTxnPgoJCQkJCQkJPHBhdGggZmlsbD0iI0JDQkVDMCIgZD0iTTIwMi45LDI5MC41YzAuMywxLjIsMC41LDIuNCwwLjUsMy42djExLjJjMCw1LjMtMy4yLDcuNy03LjIsNS40bC0xOS44LTExLjQKCQkJCQkJCQljLTEuMi0wLjctMi40LTEuOC0zLjQtMy4xYzEsNC4yLDMuNiw4LjMsNi43LDEwLjFsMTkuOCwxMS40YzQsMi4zLDcuMi0wLjEsNy4yLTUuNHYtMTEuMgoJCQkJCQkJCUMyMDYuNiwyOTcuNSwyMDUuMSwyOTMuNCwyMDIuOSwyOTAuNXoiLz4KCQkJCQkJPC9nPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPGc+CgkJCQkJCQk8Zz4KCQkJCQkJCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjUxLjIsMzQ4LjhjLTEuMywwLTIuNS0wLjQtMy44LTEuMWwtMTkuOC0xMS40Yy00LjYtMi42LTguMi05LjQtOC4yLTE1LjR2LTExLjIKCQkJCQkJCQkJYzAtNS43LDMuMi04LjMsNi4zLTguM2MxLjMsMCwyLjUsMC40LDMuOCwxLjFsMTkuOCwxMS40YzQuNiwyLjYsOC4yLDkuNCw4LjIsMTUuNHYxMS4yCgkJCQkJCQkJCUMyNTcuNSwzNDYuMiwyNTQuMywzNDguOCwyNTEuMiwzNDguOHoiLz4KCQkJCQkJCTwvZz4KCQkJCQkJCTxnPgoJCQkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yMjUuNywzMDMuM2MwLjksMCwxLjgsMC4zLDIuOCwwLjlsMTkuOCwxMS40YzQsMi4zLDcuMiw4LjQsNy4yLDEzLjd2MTEuMmMwLDMuOS0xLjgsNi4zLTQuMyw2LjMKCQkJCQkJCQkJYy0wLjksMC0xLjgtMC4zLTIuOC0wLjlsLTE5LjgtMTEuNGMtNC0yLjMtNy4yLTguNC03LjItMTMuN3YtMTEuMkMyMjEuNCwzMDUuNywyMjMuMSwzMDMuMywyMjUuNywzMDMuMyBNMjI1LjcsMjk5LjMKCQkJCQkJCQkJTDIyNS43LDI5OS4zYy00LDAtOC4zLDMuMi04LjMsMTAuM3YxMS4yYzAsNi44LDMuOSwxNC4xLDkuMiwxNy4xbDE5LjgsMTEuNGMxLjYsMC45LDMuMiwxLjQsNC44LDEuNGM0LDAsOC4zLTMuMiw4LjMtMTAuMwoJCQkJCQkJCQl2LTExLjJjMC02LjgtMy45LTE0LjEtOS4yLTE3LjFsLTE5LjgtMTEuNEMyMjguOSwyOTkuOCwyMjcuMywyOTkuMywyMjUuNywyOTkuM0wyMjUuNywyOTkuM3oiLz4KCQkJCQkJCTwvZz4KCQkJCQkJPC9nPgoJCQkJCQk8Zz4KCQkJCQkJCTxwYXRoIGZpbGw9IiNCQ0JFQzAiIGQ9Ik0yNTEuNywzMTguN2MwLjMsMS4yLDAuNSwyLjQsMC41LDMuNnYxMS4yYzAsNS4zLTMuMiw3LjctNy4yLDUuNGwtMTkuOC0xMS40CgkJCQkJCQkJYy0xLjItMC43LTIuNC0xLjgtMy40LTMuMWMxLDQuMiwzLjYsOC4zLDYuNywxMC4xbDE5LjgsMTEuNGM0LDIuMyw3LjItMC4xLDcuMi01LjR2LTExLjJDMjU1LjUsMzI1LjcsMjU0LDMyMS42LDI1MS43LDMxOC43CgkJCQkJCQkJeiIvPgoJCQkJCQk8L2c+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8Zz4KCQkJCQkJCTxnPgoJCQkJCQkJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMDAsMzc3Yy0xLjMsMC0yLjUtMC40LTMuOC0xLjFsLTE5LjgtMTEuNGMtNC42LTIuNi04LjItOS40LTguMi0xNS40di0xMS4yYzAtMi4zLDAuNS00LjMsMS42LTUuOAoJCQkJCQkJCQljMS4xLTEuNiwyLjgtMi41LDQuNy0yLjVjMS4zLDAsMi41LDAuNCwzLjgsMS4xbDE5LjgsMTEuNGM0LjYsMi42LDguMiw5LjQsOC4yLDE1LjR2MTEuMkMzMDYuMywzNzQuNCwzMDMuMiwzNzcsMzAwLDM3N3oiCgkJCQkJCQkJCS8+CgkJCQkJCQk8L2c+CgkJCQkJCQk8Zz4KCQkJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMjc0LjUsMzMxLjVjMC45LDAsMS44LDAuMywyLjgsMC45bDE5LjgsMTEuNGM0LDIuMyw3LjIsOC40LDcuMiwxMy43djExLjJjMCwzLjktMS44LDYuMy00LjMsNi4zCgkJCQkJCQkJCWMtMC45LDAtMS44LTAuMy0yLjgtMC45bC0xOS44LTExLjRjLTQtMi4zLTcuMi04LjQtNy4yLTEzLjd2LTExLjJDMjcwLjIsMzMzLjksMjcyLDMzMS41LDI3NC41LDMzMS41IE0yNzQuNSwzMjcuNQoJCQkJCQkJCQlMMjc0LjUsMzI3LjVjLTIuNSwwLTQuOSwxLjItNi40LDMuNGMtMS4zLDEuOC0xLjksNC4yLTEuOSw2LjlWMzQ5YzAsNi44LDMuOSwxNC4xLDkuMiwxNy4xbDE5LjgsMTEuNAoJCQkJCQkJCQljMS42LDAuOSwzLjIsMS40LDQuOCwxLjRjNCwwLDguMy0zLjIsOC4zLTEwLjN2LTExLjJjMC02LjgtMy45LTE0LjEtOS4yLTE3LjFsLTE5LjgtMTEuNAoJCQkJCQkJCQlDMjc3LjgsMzI4LDI3Ni4xLDMyNy41LDI3NC41LDMyNy41TDI3NC41LDMyNy41eiIvPgoJCQkJCQkJPC9nPgoJCQkJCQk8L2c+CgkJCQkJCTxnPgoJCQkJCQkJPHBhdGggZmlsbD0iI0JDQkVDMCIgZD0iTTMwMC42LDM0Ni45YzAuMywxLjIsMC41LDIuNCwwLjUsMy42djExLjJjMCw1LjMtMy4yLDcuNy03LjIsNS40bC0xOS44LTExLjQKCQkJCQkJCQljLTEuMi0wLjctMi40LTEuOC0zLjQtMy4xYzEsNC4yLDMuNiw4LjMsNi43LDEwLjFsMTkuOCwxMS40YzQsMi4zLDcuMi0wLjEsNy4yLTUuNHYtMTEuMgoJCQkJCQkJCUMzMDQuMywzNTMuOSwzMDIuOCwzNDkuOCwzMDAuNiwzNDYuOXoiLz4KCQkJCQkJPC9nPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjOERDNjNGIiBkPSJNMjAyLjMsMzY2LjhjLTEuMywwLTIuNS0wLjQtMy44LTEuMWwtMTkuOC0xMS40Yy00LjYtMi42LTguMi05LjQtOC4yLTE1LjR2LTExLjIKCQkJCQkJCWMwLTUuNywzLjItOC4zLDYuMy04LjNjMS4zLDAsMi41LDAuNCwzLjgsMS4xbDE5LjgsMTEuNGM0LjYsMi42LDguMiw5LjQsOC4yLDE1LjR2MTEuMkMyMDguNiwzNjQuMywyMDUuNSwzNjYuOCwyMDIuMywzNjYuOHoKCQkJCQkJCSIvPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTE3Ni44LDMyMS40YzAuOSwwLDEuOCwwLjMsMi44LDAuOWwxOS44LDExLjRjNCwyLjMsNy4yLDguNCw3LjIsMTMuN3YxMS4yYzAsMy45LTEuOCw2LjMtNC4zLDYuMwoJCQkJCQkJYy0wLjksMC0xLjgtMC4zLTIuOC0wLjlsLTE5LjgtMTEuNGMtNC0yLjMtNy4yLTguNC03LjItMTMuN3YtMTEuMkMxNzIuNSwzMjMuNywxNzQuMywzMjEuNCwxNzYuOCwzMjEuNCBNMTc2LjgsMzE3LjQKCQkJCQkJCUwxNzYuOCwzMTcuNGMtNCwwLTguMywzLjItOC4zLDEwLjN2MTEuMmMwLDYuOCwzLjksMTQuMSw5LjIsMTcuMWwxOS44LDExLjRjMS42LDAuOSwzLjIsMS40LDQuOCwxLjRjNCwwLDguMy0zLjIsOC4zLTEwLjMKCQkJCQkJCXYtMTEuMmMwLTYuOC0zLjktMTQuMS05LjItMTcuMWwtMTkuOC0xMS40QzE4MC4xLDMxNy45LDE3OC40LDMxNy40LDE3Ni44LDMxNy40TDE3Ni44LDMxNy40eiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxwYXRoIGZpbGw9IiM3QkE1MzgiIGQ9Ik0yMDIuOSwzMzYuOGMwLjMsMS4yLDAuNSwyLjQsMC41LDMuNnYxMS4yYzAsNS4zLTMuMiw3LjctNy4yLDUuNGwtMTkuOC0xMS40Yy0xLjItMC43LTIuNC0xLjgtMy40LTMuMQoJCQkJCQljMSw0LjIsMy42LDguMyw2LjcsMTAuMWwxOS44LDExLjRjNCwyLjMsNy4yLTAuMSw3LjItNS40di0xMS4yQzIwNi42LDM0My43LDIwNS4xLDMzOS43LDIwMi45LDMzNi44eiIvPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxnPgoJCQkJCQkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTI1MS4yLDM5NS4xYy0xLjMsMC0yLjUtMC40LTMuOC0xLjFsLTE5LjgtMTEuNGMtNC42LTIuNi04LjItOS40LTguMi0xNS40VjM1NgoJCQkJCQkJCWMwLTUuNywzLjItOC4zLDYuMy04LjNjMS4zLDAsMi41LDAuNCwzLjgsMS4xbDE5LjgsMTEuNGM0LjYsMi42LDguMiw5LjQsOC4yLDE1LjR2MTEuMkMyNTcuNSwzOTIuNSwyNTQuMywzOTUuMSwyNTEuMiwzOTUuMQoJCQkJCQkJCXoiLz4KCQkJCQkJPC9nPgoJCQkJCQk8Zz4KCQkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yMjUuNywzNDkuNmMwLjksMCwxLjgsMC4zLDIuOCwwLjlsMTkuOCwxMS40YzQsMi4zLDcuMiw4LjQsNy4yLDEzLjd2MTEuMmMwLDMuOS0xLjgsNi4zLTQuMyw2LjMKCQkJCQkJCQljLTAuOSwwLTEuOC0wLjMtMi44LTAuOWwtMTkuOC0xMS40Yy00LTIuMy03LjItOC40LTcuMi0xMy43di0xMS4yQzIyMS40LDM1MS45LDIyMy4xLDM0OS42LDIyNS43LDM0OS42IE0yMjUuNywzNDUuNgoJCQkJCQkJCUwyMjUuNywzNDUuNmMtNCwwLTguMywzLjItOC4zLDEwLjN2MTEuMmMwLDYuOCwzLjksMTQuMSw5LjIsMTcuMWwxOS44LDExLjRjMS42LDAuOSwzLjIsMS40LDQuOCwxLjRjNCwwLDguMy0zLjIsOC4zLTEwLjMKCQkJCQkJCQl2LTExLjJjMC02LjgtMy45LTE0LjEtOS4yLTE3LjFMMjMwLjUsMzQ3QzIyOC45LDM0Ni4xLDIyNy4zLDM0NS42LDIyNS43LDM0NS42TDIyNS43LDM0NS42eiIvPgoJCQkJCQk8L2c+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjQkNCRUMwIiBkPSJNMjUxLjcsMzY1YzAuMywxLjIsMC41LDIuNCwwLjUsMy42djExLjJjMCw1LjMtMy4yLDcuNy03LjIsNS40bC0xOS44LTExLjRjLTEuMi0wLjctMi40LTEuOC0zLjQtMy4xCgkJCQkJCQljMSw0LjIsMy42LDguMyw2LjcsMTAuMWwxOS44LDExLjRjNCwyLjMsNy4yLTAuMSw3LjItNS40di0xMS4yQzI1NS41LDM3MS45LDI1NCwzNjcuOSwyNTEuNywzNjV6Ii8+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiNENjQ1NTAiIGQ9Ik0zMDAsNDIzLjNjLTEuMywwLTIuNS0wLjQtMy44LTEuMWwtMTkuOC0xMS40Yy00LjYtMi42LTguMi05LjQtOC4yLTE1LjR2LTExLjJjMC01LjcsMy4yLTguMyw2LjMtOC4zCgkJCQkJCQljMS4zLDAsMi41LDAuNCwzLjgsMS4xbDE5LjgsMTEuNGM0LjYsMi42LDguMiw5LjQsOC4yLDE1LjRWNDE1QzMwNi4zLDQyMC43LDMwMy4yLDQyMy4zLDMwMCw0MjMuM3oiLz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yNzQuNSwzNzcuOGMwLjksMCwxLjgsMC4zLDIuOCwwLjlsMTkuOCwxMS40YzQsMi4zLDcuMiw4LjQsNy4yLDEzLjdWNDE1YzAsMy45LTEuOCw2LjMtNC4zLDYuMwoJCQkJCQkJYy0wLjksMC0xLjgtMC4zLTIuOC0wLjlMMjc3LjQsNDA5Yy00LTIuMy03LjItOC40LTcuMi0xMy43di0xMS4yQzI3MC4yLDM4MC4xLDI3MiwzNzcuOCwyNzQuNSwzNzcuOCBNMjc0LjUsMzczLjgKCQkJCQkJCUwyNzQuNSwzNzMuOGMtNCwwLTguMywzLjItOC4zLDEwLjN2MTEuMmMwLDYuOCwzLjksMTQuMSw5LjIsMTcuMWwxOS44LDExLjRjMS42LDAuOSwzLjIsMS40LDQuOCwxLjRjNCwwLDguMy0zLjIsOC4zLTEwLjMKCQkJCQkJCXYtMTEuMmMwLTYuOC0zLjktMTQuMS05LjItMTcuMWwtMTkuOC0xMS40QzI3Ny44LDM3NC4zLDI3Ni4xLDM3My44LDI3NC41LDM3My44TDI3NC41LDM3My44eiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxwYXRoIGZpbGw9IiM5MzJFM0QiIGQ9Ik0zMDAuNiwzOTMuMmMwLjMsMS4yLDAuNSwyLjQsMC41LDMuNlY0MDhjMCw1LjMtMy4yLDcuNy03LjIsNS40TDI3NC4xLDQwMmMtMS4yLTAuNy0yLjQtMS44LTMuNC0zLjEKCQkJCQkJYzEsNC4yLDMuNiw4LjMsNi43LDEwLjFsMTkuOCwxMS40YzQsMi4zLDcuMi0wLjEsNy4yLTUuNHYtMTEuMkMzMDQuMyw0MDAuMSwzMDIuOCwzOTYuMSwzMDAuNiwzOTMuMnoiLz4KCQkJCTwvZz4KCQkJPC9nPgoJCTwvZz4KCQk8Zz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTkzLjEsMjEuOWMxLjksMCw0LDAuNiw2LjIsMS45bDE2MS4yLDkzLjFjNS43LDMuMywxMC44LDEwLjMsMTMuNSwxOGMxLjQsMy45LDIuMiw4LjEsMi4yLDEydjI5NC41CgkJCQkJYzAsMy4xLTAuNSw1LjctMS40LDcuOGMtMC45LDIuMS0yLjIsMy43LTMuNyw0LjdsMCwwYy0wLjIsMC4xLTAuNCwwLjMtMC42LDAuNEwzMzUsNDc0LjdjLTEuNiwxLjctMy43LDIuNy02LDIuNwoJCQkJCWMtMS45LDAtNC0wLjYtNi4yLTEuOWwtMTYuNC05LjV2ODJsLTEzMi4xLTc2LjN2LTgybC0xMi43LTcuM2MtOC43LTUtMTUuNy0xOC41LTE1LjctMzBWNTcuOWMwLTguNCwzLjctMTMuNSw5LjEtMTMuNwoJCQkJCWMtMC4xLDAtMC4zLDAtMC40LDBjLTEsMC0xLjksMC4xLTIuNywwLjRsMzYuMy0yMS4xQzE4OS42LDIyLjUsMTkxLjMsMjEuOSwxOTMuMSwyMS45IE0xOTMuMSwxMi45Yy0zLjYsMC03LDEuMS05LjksMy4yCgkJCQkJbC0zNS45LDIwLjhsMC4xLDAuM2MtNS45LDMuMS0xMC42LDkuOS0xMC42LDIwLjl2Mjk0LjVjMCwxNC45LDguNywzMS4yLDIwLjIsMzcuOGw4LjIsNC43djc2Ljh2NS4ybDQuNSwyLjZMMzAxLjgsNTU2bDEzLjUsNy44CgkJCQkJVjU0OHYtNjYuNGwyLjksMS43YzMuNiwyLjEsNy4yLDMuMSwxMC43LDMuMWM0LjMsMCw4LjMtMS42LDExLjUtNC40bDMzLjEtMTkuMWgwLjJsMi4yLTEuNGMzLjEtMiw1LjYtNS4xLDcuMS04LjgKCQkJCQljMS40LTMuMiwyLjEtNywyLjEtMTEuMlYxNDYuOGMwLTQuOC0wLjktOS45LTIuNy0xNWMtMy42LTEwLTEwLjEtMTguNi0xNy41LTIyLjhsLTE2MS05M0MyMDAuMywxMy45LDE5Ni43LDEyLjksMTkzLjEsMTIuOQoJCQkJCUwxOTMuMSwxMi45eiIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"cloud\",\n \"name\": \"cloud\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0NzEuN3B4IiBoZWlnaHQ9IjUwOC40cHgiIHZpZXdCb3g9IjAgMCA0NzEuNyA1MDguNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDcxLjcgNTA4LjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfMV8xXyIgZGlzcGxheT0ibm9uZSI+Cgk8cG9seWdvbiBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIzMUYyMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjQzMy4xLDM3MyAyMjcuMyw0OTEuOCAyMS41LDM3MyAKCQkyMS41LDEzNS40IDIyNy4zLDE2LjYgNDMzLjEsMTM1LjQgCSIvPgo8L2c+CjxwYXRoIG9wYWNpdHk9IjAuMjUiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBkPSJNMzgxLjUsNDI5LjRjNC42LDMwLjktNTUuMyw1NC44LTE0MS4xLDM1LjZTNzUuMywzOTAuOSw3MC43LDM1OS45CgljLTQuNi0zMC45LDU4LjEtNTQuNywxNDMuOS0zNS41UzM3Ni45LDM5OC41LDM4MS41LDQyOS40eiIvPgo8ZyBpZD0iTGF5ZXJfMl8xXyI+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0iI0E3QTlBQyIgZD0iTTM0OS42LDI0OS4yTDI4NCwyODdjLTEuNS03LjUtMy44LTE1LTYuNy0yMi4zYy05LjMtMjMuNS0yNC45LTQ0LjUtNDIuNi01NC43bC0wLjItMC4xCgkJCQljLTYuNS0zLjgtMTIuNy01LjctMTguNC02LjFsNjUuNS0zNy44YzUuNywwLjQsMTEuOSwyLjQsMTguNCw2LjFsMC4yLDAuMWM4LjIsNC43LDE2LDExLjgsMjIuOSwyMC4zCgkJCQlDMzM1LjcsMjA4LjEsMzQ1LjQsMjI4LjYsMzQ5LjYsMjQ5LjJ6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjQTdBOUFDIiBkPSJNMjgxLjYsMTY2bC02NS41LDM3LjhjLTAuOS05LjUtMy0xOS4xLTUuOS0yOC42Yy0xMC4xLTMyLjQtMzAuNy02Mi42LTU0LjYtNzYuNAoJCQkJYy04LjYtNS0xNi44LTcuMy0yNC4zLTcuM2MtNS43LDAtMTAuOSwxLjQtMTUuNiw0bDY1LjgtMzhsMC4xLDAuMWMxMC43LTUuOSwyNC40LTUuMiwzOS41LDMuNWMxNCw4LjEsMjYuOCwyMS43LDM3LjEsMzguMgoJCQkJQzI3MC43LDExOS4xLDI3OS40LDE0MywyODEuNiwxNjZ6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjQkNCRUMwIiBkPSJNMzE3LjcsNDIzLjZDMzE3LjgsNDIzLjYsMzE3LjgsNDIzLjYsMzE3LjcsNDIzLjZMMzE3LjcsNDIzLjZMMzE3LjcsNDIzLjZ6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjRDFEM0Q0IiBkPSJNNDAwLjksMzQ1LjNjMCwxOS42LTYuNCwzMy42LTE2LjUsMzkuOWwwLDBsMCwwYy0wLjQsMC4zLTAuOSwwLjUtMS4zLDAuOGwtNjQuNiwzNy4yCgkJCQljMTAuNC02LjIsMTctMjAuMiwxNy00MC4yYzAtMzYuNy0yMi4zLTc5LjQtNDkuOS05NS4zTDI4NCwyODdsNjUuNS0zNy44bDEuNSwwLjhDMzc4LjYsMjY1LjksNDAwLjksMzA4LjYsNDAwLjksMzQ1LjN6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjQTdBOUFDIiBkPSJNMzM0LjgsMzczLjNjMC4zLDMuMywwLjUsNi41LDAuNSw5LjdjMCwxOS45LTYuNiwzNC0xNyw0MC4yTDM4MywzODZjMC41LTAuMiwwLjktMC41LDEuMy0wLjhoMC4xbDAsMAoJCQkJYzEwLjItNi4zLDE2LjUtMjAuMywxNi41LTM5LjljMC0xNC4zLTMuNC0yOS41LTkuMi00My43QzM3Ny45LDMyOS4zLDM1OC41LDM1My44LDMzNC44LDM3My4zeiIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0iI0QxRDNENCIgZD0iTTMyMy4xLDE5Mi41Yy03LjQsMjguNy0yMy43LDUzLjgtNDUuOCw3Mi4yYy05LjMtMjMuNS0yNC45LTQ0LjUtNDIuNi01NC43bC0wLjItMC4xCgkJCQljLTYuNS0zLjgtMTIuNy01LjctMTguNC02LjFsNjUuNS0zNy44YzUuNywwLjQsMTEuOSwyLjQsMTguNCw2LjFsMC4yLDAuMUMzMDguNSwxNzYuOSwzMTYuMiwxODQsMzIzLjEsMTkyLjV6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjRDFEM0Q0IiBkPSJNMjU4LjMsOTkuMmMtMTAsMjktMjYuNyw1NC45LTQ4LjEsNzZjLTEwLjEtMzIuNC0zMC43LTYyLjYtNTQuNi03Ni40Yy04LjYtNS0xNi44LTcuMy0yNC4zLTcuMwoJCQkJYy01LjcsMC0xMC45LDEuNC0xNS42LDRsNjUuOC0zOGwwLjEsMC4xYzEwLjctNS45LDI0LjQtNS4yLDM5LjUsMy41QzIzNS4xLDY5LjEsMjQ4LDgyLjcsMjU4LjMsOTkuMnoiLz4KCQk8L2c+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0xOTYuOSw1My43YzcuNCwwLDE1LjYsMi40LDI0LjMsNy4zYzE0LDguMSwyNi44LDIxLjcsMzcuMSwzOC4yYzEyLjQsMTkuOSwyMS4xLDQzLjgsMjMuNCw2Ni44CgkJCQljNS43LDAuNCwxMS45LDIuNCwxOC40LDYuMWwwLjIsMC4xYzguMiw0LjcsMTYsMTEuOCwyMi45LDIwLjNjMTIuNiwxNS42LDIyLjMsMzYuMSwyNi40LDU2LjdsMS41LDAuOAoJCQkJYzE5LjUsMTEuMiwzNi4zLDM1LjksNDQuNSw2Mi4zYzAsMCwwLDAsMCwwLjFjMC4zLDAuOSwwLjUsMS43LDAuOCwyLjZjMCwwLjEsMC4xLDAuMywwLjEsMC40YzAuNywyLjUsMS4zLDQuOSwxLjksNy40CgkJCQljMC4xLDAuMywwLjEsMC41LDAuMiwwLjhjMC4xLDAuNiwwLjMsMS4zLDAuNCwxLjljMC4xLDAuNCwwLjIsMC45LDAuMiwxLjNjMC4xLDAuNiwwLjIsMS4yLDAuMywxLjhjMC4xLDAuNSwwLjIsMSwwLjIsMS42CgkJCQljMC4xLDAuNSwwLjIsMSwwLjIsMS41YzAuMSwxLDAuMywyLDAuNCwyLjljMCwwLjQsMC4xLDAuOCwwLjEsMS4yYzAuMSwwLjcsMC4xLDEuMywwLjIsMmMwLDAuNCwwLjEsMC45LDAuMSwxLjMKCQkJCWMwLDAuNywwLjEsMS4zLDAuMSwyYzAsMC40LDAsMC44LDAuMSwxLjJjMCwwLjksMCwxLjgsMC4xLDIuOGMwLDAuMSwwLDAuMiwwLDAuM2MwLDEyLjMtMi41LDIyLjMtNi44LDI5LjcKCQkJCWMtMi42LDQuNC01LjksNy45LTkuNywxMC4ybDAsMGwwLDBsMCwwYy0wLjIsMC4xLTAuNCwwLjItMC42LDAuM2MtMC4zLDAuMi0wLjUsMC4zLTAuOCwwLjRsLTY0LjYsMzcuMmMtMC4yLDAuMS0wLjQsMC4yLTAuNiwwLjQKCQkJCWwwLDBoLTAuMWwwLDBjLTMuNywyLjEtNy45LDMuMi0xMi41LDMuMmMtNi4xLDAtMTIuOC0xLjktMTkuOC02bC0xODItMTA1Yy0yNy41LTE1LjktNDkuOS01OC41LTQ5LjktOTUuMwoJCQkJYzAtMjcuMywxMi40LTQzLjcsMzAuMS00My43YzQuOSwwLDEwLjIsMS4zLDE1LjgsMy45Yy0zLjMtMTEuOS01LjEtMjQtNS4xLTM1LjdjMC0yNC44LDguMy00Mi4yLDIxLjQtNDkuNmgtMC4xbDY1LjktMzgKCQkJCUMxODYuMiw1NSwxOTEuMyw1My43LDE5Ni45LDUzLjcgTTE5Ni45LDQ0LjdjLTcuMSwwLTEzLjcsMS43LTE5LjYsNWgtMC4xaC0wLjFsLTY1LjksMzhsMCwwQzk0LjgsOTcsODUuNCwxMTcuOSw4NS40LDE0NQoJCQkJYzAsNy40LDAuNywxNS4xLDIsMjNjLTEuMy0wLjEtMi41LTAuMi0zLjctMC4yYy0xMS43LDAtMjIsNS41LTI5LDE1LjRjLTYuNiw5LjMtMTAuMSwyMi4yLTEwLjEsMzcuM2MwLDE5LjIsNS41LDQwLjQsMTUuNiw1OS42CgkJCQljMTAuMiwxOS41LDI0LDM0LjksMzguNyw0My40bDE4MiwxMDUuMWM4LjIsNC44LDE2LjQsNy4yLDI0LjMsNy4yYzYuMSwwLDExLjctMS40LDE2LjgtNC4zbDAsMGgwLjFsLTAuMi0wLjNsMC4yLDAuMwoJCQkJYzAuMi0wLjEsMC41LTAuMywwLjctMC40bDY0LjQtMzcuMWMwLjItMC4xLDAuNS0wLjMsMC43LTAuNGwwLjItMC4xaDAuMWMwLjEtMC4xLDAuMy0wLjIsMC40LTAuMmw0LjYtMi41VjM5MAoJCQkJYzMuMi0yLjgsNi4xLTYuMiw4LjQtMTAuMmM1LjMtOSw4LjEtMjAuOCw4LjEtMzQuM2MwLTAuMiwwLTAuMywwLTAuNWMwLTAuOSwwLTEuOS0wLjEtMi45YzAtMC4zLDAtMC42LDAtMXYtMC4zCgkJCQljMC0wLjctMC4xLTEuNC0wLjEtMi4yYzAtMC41LTAuMS0xLTAuMS0xLjRjLTAuMS0wLjctMC4xLTEuNC0wLjItMi4ydi0wLjRjMC0wLjMtMC4xLTAuNi0wLjEtMC45Yy0wLjEtMS4yLTAuMy0yLjItMC40LTMuMgoJCQkJYy0wLjEtMC40LTAuMS0wLjgtMC4yLTEuMmwtMC4xLTAuNGMtMC4xLTAuNi0wLjItMS4xLTAuMy0xLjdjLTAuMS0wLjctMC4yLTEuMy0wLjMtMS45Yy0wLjEtMC40LTAuMi0wLjktMC4zLTEuMwoJCQkJYy0wLjEtMC43LTAuMy0xLjQtMC40LTIuMWMwLTAuMi0wLjEtMC40LTAuMS0wLjZsLTAuMS0wLjJjLTAuNi0yLjYtMS4yLTUuMy0yLTcuOWwtMC4xLTAuMmwtMC4xLTAuMmMtMC4zLTEtMC41LTEuOS0wLjgtMi44CgkJCQlsLTAuMS0wLjJsMCwwYy04LjktMjguNi0yNi42LTUzLjYtNDYuNi02Ni4xYy00LjgtMjAuNC0xNC43LTQwLjgtMjcuNC01Ni42Yy03LjgtOS43LTE2LjMtMTcuMi0yNS4zLTIyLjRsLTAuMS0wLjFoLTAuMWgtMC4xCgkJCQljLTUtMi45LTkuOS00LjktMTQuOC02LjFjLTMuMi0yMS44LTExLjYtNDQuMS0yMy45LTYzLjdDMjU0LDc2LjQsMjQwLDYyLjEsMjI1LjIsNTMuNkMyMTUuOCw0Ny41LDIwNi4xLDQ0LjcsMTk2LjksNDQuNwoJCQkJTDE5Ni45LDQ0Ljd6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjg1LjUsMjg3LjhMMjg0LDI4N2MtNi41LTMxLjgtMjYuMS02My42LTQ5LjMtNzdsLTAuMi0wLjFjLTYuNS0zLjctMTIuNy01LjctMTguNC02LjEKCQkJCWMtNC4yLTQyLTI5LjctODcuMi02MC41LTEwNUMxMjEuOCw3OS4zLDk0LjQsMTAwLDk0LjQsMTQ1YzAsMTEuNiwxLjgsMjMuOCw1LjEsMzUuN2MtMjUuNy0xMi4xLTQ1LjksNC44LTQ1LjksMzkuOAoJCQkJYzAsMzYuNywyMi4zLDc5LjQsNDkuOSw5NS4zbDE4MiwxMDUuMWMyNy41LDE1LjksNDkuOS0xLDQ5LjktMzcuN1MzMTMsMzAzLjcsMjg1LjUsMjg3Ljh6Ii8+CgkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0zMDUuMyw0MjguN0wzMDUuMyw0MjguN2MtNi42LDAtMTMuNi0yLjEtMjAuOC02LjJsLTE4Mi0xMDUuMWMtMjgtMTYuMi01MC45LTU5LjctNTAuOS05NwoJCQkJYzAtMjcuNywxMi42LTQ1LjcsMzIuMS00NS43YzQuMSwwLDguNCwwLjgsMTIuOSwyLjVjLTIuOC0xMS4xLTQuMi0yMS45LTQuMi0zMi4zYzAtMzMuNywxNS4zLTU1LjYsMzguOS01NS42CgkJCQljOCwwLDE2LjUsMi42LDI1LjMsNy42YzMwLjQsMTcuNSw1Ni42LDYyLjQsNjEuMywxMDQuOWM1LjcsMC43LDExLjYsMi44LDE3LjYsNi4ybDAuMiwwLjFjMjMsMTMuMyw0My4xLDQ0LjMsNTAuMSw3Ny40bDAuNywwLjQKCQkJCWMyOCwxNi4yLDUwLjksNTkuNyw1MC45LDk3YzAsMTMuNi0zLDI1LjEtOC44LDMzLjJDMzIyLjgsNDI0LjQsMzE0LjgsNDI4LjcsMzA1LjMsNDI4Ljd6IE04My43LDE3OC44Yy0xNywwLTI4LjEsMTYuNC0yOC4xLDQxLjcKCQkJCWMwLDM2LDIxLjksNzgsNDguOSw5My41bDE4MiwxMDUuMWM2LjYsMy44LDEyLjksNS43LDE4LjgsNS43bDAsMGM4LjEsMCwxNS4xLTMuNywyMC0xMC43YzUuMy03LjQsOC0xOC4xLDgtMzAuOQoJCQkJYzAtMzYtMjEuOS03OC00OC45LTkzLjVsLTIuMi0xLjNsLTAuMi0wLjljLTYuNS0zMS45LTI2LjQtNjMtNDguMy03NS43bC0wLjItMC4xYy02LjEtMy41LTEyLTUuNS0xNy41LTUuOGwtMS43LTAuMWwtMC4yLTEuNwoJCQkJYy00LjItNDEuOC0yOS44LTg2LjItNTkuNS0xMDMuNGMtOC4xLTQuNy0xNi03LjEtMjMuMy03LjFjLTIxLjIsMC0zNC45LDIwLjItMzQuOSw1MS42YzAsMTEuMiwxLjcsMjMsNS4xLDM1LjFsMS4yLDQuMmwtMy45LTEuOQoJCQkJQzkzLjUsMTgwLDg4LjUsMTc4LjgsODMuNywxNzguOHoiLz4KCQk8L2c+CgkJPGc+CgkJCTxsaW5lIGZpbGw9Im5vbmUiIHgxPSIyODEuNiIgeTE9IjE2NiIgeDI9IjIxNi4xIiB5Mj0iMjAzLjciLz4KCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTIxNi4xLDIwNS43Yy0wLjcsMC0xLjQtMC40LTEuNy0xYy0wLjYtMS0wLjItMi4yLDAuNy0yLjdsNjUuNi0zNy44YzEtMC42LDIuMi0wLjIsMi43LDAuNwoJCQkJYzAuNiwxLDAuMiwyLjItMC43LDIuN2wtNjUuNiwzNy44QzIxNi44LDIwNS43LDIxNi40LDIwNS43LDIxNi4xLDIwNS43eiIvPgoJCTwvZz4KCQk8Zz4KCQkJPGxpbmUgZmlsbD0ibm9uZSIgeDE9IjI4NCIgeTE9IjI4NyIgeDI9IjM0OS42IiB5Mj0iMjQ5LjIiLz4KCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTI4NCwyODljLTAuNywwLTEuNC0wLjQtMS43LTFjLTAuNi0xLTAuMi0yLjIsMC43LTIuN2w2NS42LTM3LjhjMS0wLjYsMi4yLTAuMiwyLjcsMC43CgkJCQljMC42LDEsMC4yLDIuMi0wLjcsMi43TDI4NSwyODguN0MyODQuNywyODguOSwyODQuNCwyODksMjg0LDI4OXoiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"cronjob\",\n \"name\": \"cronjob\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0NDYuNnB4IiBoZWlnaHQ9IjQ3MC43cHgiIHZpZXdCb3g9IjAgMCA0NDYuNiA0NzAuNyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDQ2LjYgNDcwLjciIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfMl8xXyI+CjwvZz4KPGcgaWQ9IkxheWVyXzFfMl8iPgoJPGcgaWQ9IkxheWVyXzFfMV8iIGRpc3BsYXk9Im5vbmUiPgoJCTxwb2x5Z29uIGRpc3BsYXk9ImlubGluZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQTdBOUFDIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI0MjkuOSwzNjIuMSAKCQkJMjE0LjUsNDg2LjUgLTAuOSwzNjIuMSAtMC45LDExMy4zIDIxNC41LC0xMSA0MjkuOSwxMTMuMyAJCSIvPgoJPC9nPgoJPHBhdGggZmlsbD0iI0YwRjdGRiIgZD0iTTIxOS4xLDM2MC41YzkuNiwwLDE5LjMsMi40LDI2LjcsNi43YzEuNCwwLjgsMi42LDEuNiwzLjgsMi41YzMuNS0yLjYsNS4zLTUuNyw1LjItOS4yCgkJYy0wLjEtNC44LTQtOS42LTEwLjUtMTMuNGMtMS40LTAuOC0yLjgtMS41LTQuNC0yLjJjLTYuMi0yLjYtMTMuNi00LjEtMjAuOC00LjFjLTcuNSwwLTE0LjMsMS42LTE5LjIsNC40CgkJYy00LjQsMi41LTYuOSw1LjgtNy4yLDkuNHMxLjYsNy40LDUuMywxMC44YzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4yYzIuNy0xLjUsNS44LTIuNyw5LjQtMy42QzIxMS4zLDM2MC45LDIxNS4xLDM2MC41LDIxOS4xLDM2MC41CgkJeiIvPgoJPHBhdGggZmlsbD0iI0YwRjdGRiIgZD0iTTMwMy41LDI2Ny40YzUuNywwLDExLjUsMS41LDE1LjksNGMwLjcsMC40LDEuMywwLjgsMS45LDEuMmMxLjYtMS4zLDIuNS0yLjksMi40LTQuNgoJCWMtMC4xLTIuNi0yLjItNS4yLTUuOC03LjNjLTAuOC0wLjUtMS42LTAuOS0yLjUtMS4yYy0zLjUtMS41LTcuOC0yLjMtMTEuOS0yLjNjLTQuMywwLTguMSwwLjktMTAuOSwyLjVjLTIuNCwxLjQtMy43LDMuMS0zLjksNQoJCWMtMC4xLDEuOCwwLjgsMy43LDIuNiw1LjVjMS42LTAuOSwzLjQtMS42LDUuNC0yQzI5OC44LDI2Ny43LDMwMS4xLDI2Ny40LDMwMy41LDI2Ny40eiIvPgoJPGcgaWQ9IkxheWVyXzJfMl8iPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTgxLjksMTcuN2M4LjMsMCwxNiwxLjksMjIuOSw1LjRsMCwwYzEuNCwwLjcsMi44LDEuNSw0LjEsMi40bDI0LjIsMTQuMWwwLDBsMCwwbDAsMAoJCQkJYzIyLjMsMTAuNywzNi41LDM4LjgsMzYuNSw3OS43YzAsNTguNS0yOS4zLDEyNC43LTY5LjQsMTYzLjVsMzEsMS4zbDE1LjgsMjMuMWMzLjIsMC43LDYuMywxLjUsOS40LDIuNGwtNy4zLTQuMnYtMTMuMmwwLDBsMCwwCgkJCQlsMy4yLTQuMmwwLDBsMCwwbC0yMS4zLTVsLTEuNC0xMS4xdi0xMy4ybDAsMGwwLDBsMTcuOC0yLjdsMCwwbC00LjktNS4xdi0xMy4ybDAsMGwwLDBsMTIuNi03LjNsMjIuMyw3LjEKCQkJCWMyLjYtMC43LDUuNC0xLjMsOC4yLTEuN2w2LTEyLjlsMTkuMiwwLjhsOS4zLDEzLjVjMywwLjcsNS45LDEuNSw4LjcsMi40bDIwLjgtNS4zbDE0LjYsOC40bDAsMGwwLDB2MTMuMmwtMy4yLDQuMmwyMS41LDQuOQoJCQkJbDEuNCwxMS4xdjEzLjJsLTE3LjgsMi43bDQuOSw1LjF2MTMuMmwtMTIuNiw3LjNsMCwwbDAsMGwwLDBsLTIyLjMtNy4xYy0yLjYsMC43LTUuNCwxLjMtOC4yLDEuN2wtNS4zLDExLjR2MTUuNWwtNS42LDcuMgoJCQkJbDM2LjgsOC40bDIuNCwxOXYyMi43bC0zMC40LDQuN2w4LjMsOC43bDAsMGwwLDB2MjIuN0wzMTIuNSw0NDVsMCwwbDAsMGwwLDBsLTM4LjItMTIuMmMtNC41LDEuMi05LjIsMi4yLTE0LDIuOWwtMTAuMiwyMgoJCQkJbC0zMi45LTEuNGwtMTUuOC0yMy4xYy01LjEtMS4xLTEwLTIuNS0xNC45LTQuMWwtMzUuNSw5LjFsMCwwbDAsMGwtMjQuOS0xNC40di0yMi43bDAsMGwwLDBsNS42LTcuMmwwLDBsMCwwbC0zNi44LTguNGwtMi40LTE5CgkJCQlWMzQ0djAuMVYzNDRsMzAuNC00LjdsMCwwbDAsMGwtOC4zLTguN3YtMTkuOGMtMi0wLjktMy45LTEuOS01LjctMy4xTDgzLDI5Mi42Yy0xLjUtMC44LTMtMS42LTQuNC0yLjZsMCwwbDAsMAoJCQkJYy0xOS0xMi41LTMxLTM5LjItMzEtNzYuNWMwLTQ5LDIwLjYtMTAzLjQsNTAuOC0xNDIuNmMxMS44LTE1LjMsMjUuMi0yOC4zLDM5LjMtMzcuN2MyLjEtMS40LDQuMi0yLjcsNi4zLTMuOQoJCQkJQzE1Ny4yLDIxLjQsMTcwLjIsMTcuNywxODEuOSwxNy43IE0xODEuOSw5LjdjLTEzLjUsMC0yNy43LDQuMy00Mi4zLDEyLjZjLTIuMywxLjMtNC41LDIuNy02LjcsNC4yYy0xNC42LDkuNy0yOC41LDIzLTQxLjIsMzkuNQoJCQkJYy0zMi4zLDQxLjktNTIuNCw5OC40LTUyLjQsMTQ3LjVjMCwxOS4zLDMsMzYuMyw5LDUwLjZjNS45LDE0LjMsMTQuNSwyNS4yLDI1LjQsMzIuNGMwLjIsMC4xLDAuNCwwLjIsMC41LDAuNAoJCQkJYzEuNSwxLDMuMSwxLjksNC43LDIuN2wyNS43LDE1YzAuNiwwLjQsMS4yLDAuOCwxLjksMS4xdjE0LjljMCwxLjEsMC4yLDIuMSwwLjYsMy4xbC0xNS43LDIuNGMtMy45LDAuNS03LDMuOS03LDcuOXYyMi43CgkJCQljMCwwLjMsMCwwLjcsMC4xLDFsMi40LDE5YzAuNCwzLjMsMi45LDYuMSw2LjIsNi44bDI1LjMsNS44Yy0wLjIsMC43LTAuMywxLjMtMC4zLDJWNDI0YzAsMi45LDEuNSw1LjUsNCw2LjlsMjQuOSwxNC40CgkJCQljMS4yLDAuNywyLjYsMS4xLDQsMS4xYzAuMiwwLDAuNCwwLDAuNiwwYzAuNSwwLDAuOS0wLjEsMS40LTAuMmwzMy4zLTguNmMzLjQsMSw2LjgsMiwxMC4zLDIuOGwxNC4xLDIwLjYKCQkJCWMxLjQsMi4xLDMuNywzLjQsNi4zLDMuNWwzMi45LDEuNGMwLjEsMCwwLjIsMCwwLjMsMGMzLjEsMCw1LjktMS44LDcuMy00LjZsOC40LTE4LjJjMi44LTAuNSw1LjYtMS4xLDguMy0xLjhsMzUuOCwxMS40CgkJCQljMC44LDAuMywxLjcsMC40LDIuNiwwLjRjMC4yLDAsMC40LDAsMC42LDBjMS4yLTAuMSwyLjMtMC40LDMuNC0xbDIxLjYtMTIuNWMyLjUtMS40LDQtNC4xLDQtNi45VjQxMGMwLTEuMS0wLjItMi4xLTAuNi0zLjEKCQkJCWwxNS45LTIuNWMzLjktMC42LDYuOC00LDYuOC03Ljl2LTIyLjdjMC0wLjMsMC0wLjctMC4xLTFsLTIuNC0xOWMtMC40LTMuMy0yLjktNi4xLTYuMi02LjhsLTI1LjMtNS44YzAuMi0wLjcsMC4zLTEuMywwLjMtMgoJCQkJdi0xMy44bDIuOC02YzAuOC0wLjIsMS42LTAuMywyLjQtMC41bDIwLDYuNGMwLjgsMC4zLDEuNywwLjQsMi42LDAuNGMwLjIsMCwwLjUsMCwwLjcsMGwwLDBsMCwwYzEuMS0wLjEsMi4zLTAuNSwzLjMtMWwxMi42LTcuMwoJCQkJYzIuNS0xLjQsNC00LjEsNC02Ljl2LTEyLjJsNi4xLTAuOWMzLjktMC42LDYuOC00LDYuOC03Ljl2LTEzLjJjMC0wLjMsMC0wLjctMC4xLTFsLTEuNC0xMS4xYy0wLjQtMy4zLTIuOS02LjEtNi4yLTYuOAoJCQkJbC0xMi4xLTIuOHYtMTEuOGMwLTIuOS0xLjYtNS42LTQuMS03bC0xNC41LTguNGMtMS4yLTAuNy0yLjYtMS4xLTQtMS4xYy0wLjcsMC0xLjMsMC4xLTIsMC4zbC0xOC42LDQuOAoJCQkJYy0xLjMtMC40LTIuNy0wLjgtNC4xLTEuMWwtNy41LTExYy0xLjQtMi4xLTMuNy0zLjQtNi4zLTMuNWwtMTkuMi0wLjhjLTAuMSwwLTAuMiwwLTAuMywwYy0zLjEsMC01LjksMS44LTcuMyw0LjZsLTQuMiw5LjEKCQkJCWMtMC44LDAuMi0xLjYsMC4zLTIuNSwwLjVsLTIwLjItNi40Yy0wLjgtMC4zLTEuNi0wLjQtMi40LTAuNGMtMSwwLTIsMC4yLTIuOSwwLjZjMS44LTMuNywzLjUtNy41LDUuMi0xMS4zCgkJCQljMTMuMy0zMC45LDIwLjMtNjIuOCwyMC4zLTkyLjNjMC00Mi41LTE0LjgtNzQtNDAuNy04Ni43bC0yMy43LTEzLjljLTEuNS0wLjktMy0xLjgtNC41LTIuNmMtMC4xLDAtMC4xLTAuMS0wLjItMC4xCgkJCQlDMjAwLjQsMTEuOCwxOTEuNCw5LjcsMTgxLjksOS43eiBNMjE4LDI3NS41YzEuMi0xLjQsMi40LTIuOCwzLjYtNC4zdjAuN2MwLDAuMywwLDAuNywwLjEsMWwwLjMsMi44TDIxOCwyNzUuNUwyMTgsMjc1LjV6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8Zz4KCQkJCTxwYXRoIGZpbGw9IiNDREQ5RUUiIGQ9Ik0yMzIuNiwzOC45Yy0xNi41LTcuOS0zNy4zLTYuMy01OS45LDYuOGMtMi4xLDEuMi00LjEsMi41LTYuMiwzLjlDMTUyLjMsNTksMTM5LDcyLDEyNy4xLDg3LjMKCQkJCQljLTIzLjUsMzAuNC00MS4xLDY5LjktNDcuOSwxMDljLTIsMTEuMy0zLDIyLjYtMywzMy42YzAsMTguOSwzLjEsMzUuMSw4LjYsNDguMXMxMy41LDIyLjgsMjMuMiwyOC45bC0yNi0xNS4xCgkJCQkJYy0xLjUtMC44LTMtMS42LTQuNC0yLjZsMCwwYy05LjUtNi4yLTE3LjMtMTYtMjIuNi0yOWMtNS40LTEyLjktOC40LTI4LjktOC40LTQ3LjZjMC0xMi4zLDEuMy0yNC45LDMuNy0zNy41CgkJCQkJQzU3LjUsMTM3LjMsNzQuNyw5OS40LDk3LjQsNzBjMTEuOS0xNS4zLDI1LjItMjguMywzOS4zLTM3LjdjMi4xLTEuNCw0LjItMi43LDYuMy0zLjljMTMuNi03LjksMjYuNS0xMS42LDM4LjMtMTEuNgoJCQkJCWM4LjMsMCwxNiwxLjksMjIuOSw1LjRsMCwwYzEuNCwwLjcsMi44LDEuNSw0LjEsMi40TDIzMi42LDM4Ljl6Ii8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSIjRjBGN0ZGIiBkPSJNMjMyLjYsMzguOWMtMTYuNS03LjktMzcuMy02LjMtNTkuOSw2LjhjLTEuNywxLTMuNCwyLTUsMy4xYy0wLjQsMC4yLTAuOCwwLjUtMS4yLDAuOAoJCQkJCUMxNTIuMyw1OSwxMzksNzIsMTI3LjEsODcuM2MtMjMuNSwzMC40LTQxLjEsNjkuOS00Ny45LDEwOWMtMTAuMy02LTIwLTEzLjEtMjguOS0yMWM3LjItMzcuOCwyNC40LTc1LjcsNDcuMS0xMDUuMQoJCQkJCWMxMS45LTE1LjMsMjUuMi0yOC4zLDM5LjMtMzcuN2MwLjktMC42LDEuNy0xLjEsMi42LTEuN2MxLjItMC44LDIuNS0xLjUsMy43LTIuMmMxMy42LTcuOSwyNi41LTExLjYsMzguMy0xMS42CgkJCQkJYzguMywwLDE2LDEuOSwyMi45LDUuNGwwLDBjMS40LDAuNywyLjgsMS41LDQuMSwyLjRMMjMyLjYsMzguOXoiLz4KCQkJPC9nPgoJCQk8Zz4KCQkJCTxwYXRoIGZpbGw9IiNDREQ5RUUiIGQ9Ik0yMzIuNiwzOC45Yy0xNi41LTcuOS0zNy4zLTYuMy01OS45LDYuOGMtMS43LDEtMy40LDItNSwzLjFjLTEwLTUuMi0xOS40LTExLjItMjguMi0xOAoJCQkJCWMxLjItMC44LDIuNS0xLjUsMy43LTIuMmMxMy42LTcuOSwyNi41LTExLjYsMzguMy0xMS42YzguMywwLDE2LDEuOSwyMi45LDUuNGwwLDBjMS40LDAuNywyLjgsMS41LDQuMSwyLjRMMjMyLjYsMzguOXoiLz4KCQkJPC9nPgoJCQk8Zz4KCQkJCTxnPgoJCQkJCTxwYXRoIGZpbGw9IiM2ODg1QTkiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik03Ni4zLDIyOS45YzAsNzEsNDMuMiwxMDMuNiw5Ni40LDcyLjkKCQkJCQkJczk2LjQtMTEzLjIsOTYuNC0xODQuMlMyMjUuOSwxNSwxNzIuNyw0NS43Uzc2LjMsMTU4LjksNzYuMywyMjkuOXoiLz4KCQkJCQk8cGF0aCBmaWxsPSIjNjg4NUE5IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTM0LjQsMzE1LjhMMTM0LjQsMzE1LjgKCQkJCQkJYy0zNi4yLDAtNTkuNi0zMy43LTU5LjYtODZjMC03MS40LDQzLjYtMTU0LjYsOTcuMi0xODUuNWMxMy41LTcuOCwyNi43LTExLjgsMzktMTEuOGMxNy42LDAsMzIuNSw4LDQzLjEsMjMKCQkJCQkJYzEwLjgsMTUuMywxNi41LDM3LDE2LjUsNjIuOWMwLDcxLjQtNDMuNiwxNTQuNi05Ny4yLDE4NS41QzE1OS45LDMxMS45LDE0Ni44LDMxNS44LDEzNC40LDMxNS44eiIvPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPHBhdGggZmlsbD0iIzNFNjM4NyIgZD0iTTI1NS43LDEyNi4zYzAsNjEuMi0zNy4yLDEzMi4yLTgzLDE1OC43Yy0xMy40LDcuNy0yNiwxMC44LTM3LjEsOS44Yy0yNy4yLTIuNS00NS45LTI5LjItNDUuOS03Mi42CgkJCQkJCWMwLTYxLjEsMzcuMi0xMzIuMiw4My0xNTguN2MxMC4xLTUuOCwxOS43LTksMjguNy05LjhDMjMzLjEsNTEsMjU1LjcsNzguNiwyNTUuNywxMjYuM3oiLz4KCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTM5LjcsMjk2LjRjLTEuNCwwLTIuOS0wLjEtNC4zLTAuMmMtMTQtMS4zLTI1LjktOC44LTM0LjMtMjEuNmMtOC41LTEzLjEtMTMtMzEuMi0xMy01Mi40CgkJCQkJCWMwLTYxLjUsMzcuNi0xMzMuMyw4My44LTE2MGMxMC4xLTUuOCwxOS45LTkuMiwyOS4zLTEwYzEuNS0wLjEsMy0wLjIsNC40LTAuMmMzMS4zLDAsNTEuNiwyOS4xLDUxLjYsNzQuMgoJCQkJCQljMCw2MS41LTM3LjYsMTMzLjMtODMuOCwxNjBDMTYxLjgsMjkzLDE1MC40LDI5Ni40LDEzOS43LDI5Ni40eiBNMjA1LjcsNTVjLTEuNCwwLTIuOCwwLjEtNC4xLDAuMmMtOC45LDAuOC0xOC40LDQtMjguMSw5LjYKCQkJCQkJQzEyOC4xLDkxLDkxLjIsMTYxLjYsOTEuMiwyMjIuMmMwLDQxLjMsMTcuMSw2OC42LDQ0LjUsNzEuMWMxLjMsMC4xLDIuNywwLjIsNCwwLjJjMTAuMiwwLDIxLTMuMywzMi4yLTkuOAoJCQkJCQljNDUuNC0yNi4yLDgyLjMtOTYuOCw4Mi4zLTE1Ny40QzI1NC4yLDgzLDIzNS4yLDU1LDIwNS43LDU1eiIvPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiNFNkU3RTgiIGQ9Ik0yNDcuMywxMjYuM2MwLDYxLjItMzcuMiwxMzIuMi04MywxNTguN2MtMTAuMSw1LjgtMTkuNyw5LTI4LjcsOS44Yy0yNy4yLTIuNS00NS45LTI5LjItNDUuOS03Mi42CgkJCQkJCQljMC02MS4xLDM3LjItMTMyLjIsODMtMTU4LjdjMTAuMS01LjgsMTkuNy05LDI4LjctOS44QzIyOC42LDU2LjIsMjQ3LjMsODIuOSwyNDcuMywxMjYuM3oiLz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0xMzUuNiwyOTYuMmgtMC4xYy0xNC0xLjMtMjUuOS04LjgtMzQuMy0yMS42Yy04LjUtMTMuMS0xMy0zMS4yLTEzLTUyLjRjMC02MS41LDM3LjYtMTMzLjMsODMuOC0xNjAKCQkJCQkJCWMxMC4xLTUuOCwxOS45LTkuMiwyOS4zLTEwaDAuMWgwLjFjMTQsMS4zLDI1LjksOC44LDM0LjMsMjEuNmM4LjUsMTMuMSwxMywzMS4yLDEzLDUyLjRjMCw2MS41LTM3LjYsMTMzLjMtODMuOCwxNjAKCQkJCQkJCWMtMTAuMSw1LjgtMTkuOSw5LjItMjkuMywxMEgxMzUuNnogTTIwMS40LDU1LjJjLTguOSwwLjgtMTguMyw0LTI3LjksOS42QzEyOC4xLDkxLDkxLjIsMTYxLjYsOTEuMiwyMjIuMgoJCQkJCQkJYzAsNDEuMywxNyw2OC41LDQ0LjQsNzEuMWM4LjktMC44LDE4LjMtNCwyNy45LTkuNmM0NS40LTI2LjIsODIuMy05Ni44LDgyLjMtMTU3LjRDMjQ1LjgsODUsMjI4LjgsNTcuOCwyMDEuNCw1NS4yeiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxnPgoJCQkJCQk8cG9seWdvbiBmaWxsPSIjMjMxRjIwIiBwb2ludHM9IjE3OCwxNzMuMSAxODYuOCwxNjggMTg2LjgsNzMuNCAxNzgsNzguNSAJCQkJCQkiLz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0xNzYuNSwxNzUuN1Y3Ny42bDExLjgtNi44djk4LjFMMTc2LjUsMTc1Ljd6IE0xNzkuNSw3OS40djkxLjFsNS44LTMuNFY3NkwxNzkuNSw3OS40eiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxnPgoJCQkJCQk8cG9seWdvbiBmaWxsPSIjMjMxRjIwIiBwb2ludHM9IjE4Mi41LDE2MC4yIDE4NC41LDE2Ny45IDEzMiwyMjAuNCAxMzAsMjEyLjcgCQkJCQkJIi8+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTMxLjMsMjIzLjNsLTMtMTEuMWw1NS01NWwzLDExLjFMMTMxLjMsMjIzLjN6IE0xMzEuNiwyMTMuMWwxLjIsNC40bDUwLjEtNTAuMWwtMS4yLTQuNEwxMzEuNiwyMTMuMQoJCQkJCQkJeiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJPC9nPgoJCQk8Zz4KCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0xMzMuOCwzMTUuOEwxMzMuOCwzMTUuOGMtOS45LDAtMTkuMS0yLjYtMjcuMS03LjZsLTI1LjktMTUuMWMtMS41LTAuNy0zLTEuNi00LjQtMi42bC0wLjgtMC40VjI5MAoJCQkJCWMtMTkuNy0xMy40LTMxLTQxLjUtMzEtNzcuM2MwLTQ3LjcsMTkuNS0xMDIuNyw1MS0xNDMuNWMxMi4zLTE2LDI1LjctMjguOCwzOS43LTM4LjFjMi4xLTEuNCw0LjItMi43LDYuNC00CgkJCQkJYzEzLjUtNy44LDI2LjctMTEuOCwzOS0xMS44YzguNSwwLDE2LjQsMS45LDIzLjYsNS42bDAuMSwwLjFjMS40LDAuNywyLjgsMS42LDQuMiwyLjRsMjQuMSwxNC4xYzIzLjcsMTEuNSwzNy4zLDQxLDM3LjMsODEKCQkJCQljMCw3MS40LTQzLjYsMTU0LjYtOTcuMiwxODUuNUMxNTkuMywzMTEuOSwxNDYuMSwzMTUuOCwxMzMuOCwzMTUuOHogTTc3LjksMjg4TDc3LjksMjg4YzEuNCwwLjksMi44LDEuNyw0LjMsMi41bDI2LDE1LjIKCQkJCQljNy42LDQuOCwxNi4yLDcuMiwyNS42LDcuMmwwLDBjMTEuOCwwLDI0LjUtMy44LDM3LjUtMTEuNEMyMjQsMjcxLDI2Ni45LDE4OSwyNjYuOSwxMTguNmMwLTM4LjktMTMtNjcuNC0zNS43LTc4LjNsMC40LTAuOAoJCQkJCWwtMC40LDAuN0wyMDcsMjYuMWMtMS40LTAuOS0yLjctMS43LTQuMS0yLjRsLTAuMS0wLjFjLTYuNy0zLjUtMTQuMi01LjItMjIuMS01LjJjLTExLjgsMC0yNC41LDMuOC0zNy41LDExLjQKCQkJCQljLTIuMSwxLjItNC4yLDIuNS02LjIsMy45Yy0xMy43LDkuMS0yNi45LDIxLjctMzksMzcuNGMtMzEuMSw0MC4zLTUwLjUsOTQuNi01MC41LDE0MS43QzQ3LjYsMjQ3LjksNTguNiwyNzUuMyw3Ny45LDI4OAoJCQkJCUw3Ny45LDI4OHoiLz4KCQkJPC9nPgoJCQk8Zz4KCQkJCTxnPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjQ0REOUVFIiBkPSJNMzYzLjYsMjQxLjlsLTE0LjYtOC40bC0yMC44LDUuM2MtMi44LTAuOS01LjgtMS43LTguNy0yLjRsLTkuMy0xMy41bC0xOS4yLTAuOGwtNiwxMi45CgkJCQkJCQljLTIuOCwwLjQtNS42LDEtOC4yLDEuN2wtMjIuMy03LjFsLTEyLjYsNy4zbDEyLjMsMTIuOWMtMS4yLDEuNS0yLjIsMy4xLTIuOSw0LjdsLTIyLjMsMy40bDEuNCwxMS4xbDIzLjQsNS4zCgkJCQkJCQljMS4xLDEuNywyLjUsMy40LDQuMSw1bC05LjIsMTJsMTQuNiw4LjRsMjAuOC01LjNjMi44LDAuOSw1LjgsMS43LDguNywyLjRsOS4zLDEzLjVsMTkuMiwwLjhsNi0xMi45YzIuOC0wLjQsNS42LTEsOC4yLTEuNwoJCQkJCQkJbDIyLjMsNy4xbDEyLjYtNy4zbC0xMi4zLTEyLjljMS4yLTEuNSwyLjItMy4xLDIuOS00LjdsMjIuMy0zLjVsLTEuNC0xMS4xbC0yMy40LTUuM2MtMS4xLTEuNy0yLjUtMy40LTQuMS01TDM2My42LDI0MS45egoJCQkJCQkJIE0zMjAuNSwyNzQuOWMtNi45LDQtMTguOSwzLjUtMjYuOC0xLjFzLTguOC0xMS41LTEuOS0xNS41czE4LjktMy41LDI2LjgsMS4xQzMyNi41LDI2NC4xLDMyNy40LDI3MSwzMjAuNSwyNzQuOXoiLz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0zMjIuMiwzMTIuN2wtMjEtMC45bC05LjMtMTMuNmMtMi43LTAuNi01LjMtMS4zLTcuOS0yLjFsLTIwLjksNS40bC0xNi42LTkuNmw5LjUtMTIuMwoJCQkJCQkJYy0xLjEtMS4yLTIuMi0yLjUtMy4xLTMuOGwtMjMuOC01LjRsLTEuNy0xMy42bDIyLjktMy41YzAuNS0xLjEsMS4yLTIuMiwyLTMuM2wtMTIuOC0xMy4zbDE0LjgtOC42bDIyLjUsNy4yCgkJCQkJCQljMi4zLTAuNiw0LjctMS4xLDcuMi0xLjVsNi4xLTEzLjFsMjEsMC45bDkuMywxMy42YzIuNywwLjYsNS4zLDEuMyw3LjksMi4xbDIwLjktNS40bDE2LjYsOS42bC05LjUsMTIuMwoJCQkJCQkJYzEuMSwxLjIsMi4yLDIuNSwzLDMuOGwyMy45LDUuNGwxLjcsMTMuNmwtMjMsMy42Yy0wLjUsMS4xLTEuMiwyLjItMiwzLjNsMTIuOCwxMy40bC0xNC44LDguNmwtMjIuNS03LjIKCQkJCQkJCWMtMi4zLDAuNi00LjcsMS4xLTcuMSwxLjVMMzIyLjIsMzEyLjd6IE0zMDIuOSwzMDguOWwxNy41LDAuN2w1LjktMTIuN2wwLjgtMC4xYzIuOC0wLjQsNS41LTEsOC0xLjZsMC40LTAuMWwyMi4xLDdsMTAuNC02CgkJCQkJCQlsLTExLjktMTIuNWwwLjgtMWMxLjEtMS40LDItMi45LDIuNy00LjRsMC4zLTAuOGwyMS43LTMuNGwtMS4xLTguNmwtMjMtNS4ybC0wLjMtMC41Yy0xLjEtMS42LTIuNC0zLjMtMy45LTQuOGwtMC45LTAuOQoJCQkJCQkJbDktMTEuN2wtMTIuNS03LjJsLTIwLjYsNS4zbC0wLjQtMC4xYy0yLjgtMC45LTUuNy0xLjctOC42LTIuM2wtMC42LTAuMWwtOS4yLTEzLjRsLTE3LjUtMC43bC01LjksMTIuN2wtMC44LDAuMQoJCQkJCQkJYy0yLjgsMC40LTUuNSwxLTguMSwxLjZsLTAuNCwwLjFsLTIyLjEtN2wtMTAuNCw2bDExLjksMTIuNGwtMC44LDFjLTEuMSwxLjQtMiwyLjktMi43LDQuNGwtMC4zLDAuOGwtMjEuNywzLjRsMS4xLDguNgoJCQkJCQkJbDIzLDUuMmwwLjMsMC41YzEuMSwxLjYsMi40LDMuMywzLjksNC44bDAuOSwwLjlsLTksMTEuN2wxMi41LDcuMmwyMC42LTUuM2wwLjQsMC4xYzIuOCwwLjksNS43LDEuNyw4LjYsMi4zbDAuNiwwLjEKCQkJCQkJCUwzMDIuOSwzMDguOXogTTMwOC45LDI3OS4xYy01LjcsMC0xMS41LTEuNS0xNS45LTRjLTQuNi0yLjctNy4zLTYuMy03LjMtMTAuMWMwLTMuMiwxLjktNiw1LjQtOGMzLjItMS45LDcuNi0yLjksMTIuNC0yLjkKCQkJCQkJCWM1LjcsMCwxMS41LDEuNSwxNS45LDRjNC42LDIuNyw3LjMsNi4zLDcuMywxMGMwLDMuMi0xLjksNi01LjQsOEMzMTguMSwyNzguMSwzMTMuNywyNzkuMSwzMDguOSwyNzkuMXogTTMwMy41LDI1Ny4yCgkJCQkJCQljLTQuMywwLTguMSwwLjktMTAuOSwyLjVjLTIuNSwxLjUtMy45LDMuMy0zLjksNS40YzAsMi42LDIuMSw1LjMsNS44LDcuNWMzLjksMi4zLDkuMiwzLjYsMTQuNCwzLjZjNC4zLDAsOC4xLTAuOSwxMC45LTIuNQoJCQkJCQkJYzIuNS0xLjUsMy45LTMuMywzLjktNS40YzAtMi42LTIuMS01LjMtNS44LTcuNUMzMTMuOSwyNTguNSwzMDguNywyNTcuMiwzMDMuNSwyNTcuMnoiLz4KCQkJCQk8L2c+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8Zz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjNEI2RTk4IiBkPSJNMjUxLjQsMjU0LjVjMC43LTEuNiwxLjctMy4yLDIuOS00LjdMMjQyLDIzNi45djEzLjJsNC45LDUuMUwyNTEuNCwyNTQuNXoiLz4KCQkJCQkJPC9nPgoJCQkJCQk8Zz4KCQkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yNDYuMywyNTYuOGwtNS44LTYuMXYtMTcuNmwxNS44LDE2LjVsLTAuOCwxYy0xLjEsMS40LTIsMi45LTIuNyw0LjRsLTAuMywwLjhMMjQ2LjMsMjU2Ljh6CgkJCQkJCQkJIE0yNDMuNSwyNDkuNWwzLjksNC4xbDMtMC41YzAuNS0xLjEsMS4yLTIuMiwyLTMuM2wtOC45LTkuM1YyNDkuNXoiLz4KCQkJCQkJPC9nPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjNEI2RTk4IiBkPSJNMzU2LjYsMjUxLjFsLTIuMiwyLjhjMS42LDEuNiwzLDMuMyw0LjEsNWwxLjksMC40bDMuMi00LjJ2LTEzLjJMMzU2LjYsMjUxLjFMMzU2LjYsMjUxLjF6Ii8+CgkJCQkJCTwvZz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzYxLDI2MWwtMy40LTAuOGwtMC4zLTAuNWMtMS4xLTEuNi0yLjQtMy4zLTMuOS00LjhsLTAuOS0wLjlsMTIuNy0xNi41djE4LjJMMzYxLDI2MXogTTM1OS40LDI1Ny42CgkJCQkJCQkJbDAuNCwwLjFsMi4zLTN2LTguM2wtNS44LDcuNUMzNTcuNSwyNTUsMzU4LjUsMjU2LjMsMzU5LjQsMjU3LjZ6Ii8+CgkJCQkJCTwvZz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxnPgoJCQkJCQkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTMyMS4yLDI3NC41Yy0wLjgtMC42LTEuNi0xLjItMi42LTEuOGMtNi4yLTMuNi0xNC44LTQuNi0yMS41LTMuMWM0LjktNS42LDExLjQtOS42LDE4LjktMTEuNQoJCQkJCQkJCWMwLjksMC40LDEuOCwwLjgsMi43LDEuM0MzMjYuMywyNjMuOSwzMjcuMywyNzAuNSwzMjEuMiwyNzQuNXoiLz4KCQkJCQkJPC9nPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSJub25lIiBkPSJNMzIxLjIsMjc0LjVjLTAuOC0wLjYtMS42LTEuMi0yLjYtMS44Yy02LjItMy42LTE0LjgtNC42LTIxLjUtMy4xYy0xLjksMC40LTMuNywxLjEtNS4yLDIKCQkJCQkJCQljLTAuMiwwLjEtMC41LDAuMy0wLjcsMC40Yy01LjQtNC40LTUuMy0xMC4yLDAuNy0xMy43YzYuMS0zLjUsMTYuNC0zLjUsMjQuMS0wLjJjMC45LDAuNCwxLjgsMC44LDIuNywxLjMKCQkJCQkJCQlDMzI2LjMsMjYzLjksMzI3LjMsMjcwLjUsMzIxLjIsMjc0LjV6Ii8+CgkJCQkJCTwvZz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzIxLjEsMjc2LjRsLTAuOS0wLjdjLTAuNy0wLjYtMS41LTEuMS0yLjQtMS43Yy0zLjktMi4zLTkuMi0zLjYtMTQuNC0zLjZjLTIuMSwwLTQuMiwwLjItNi4xLDAuNgoJCQkJCQkJCWMtMS44LDAuNC0zLjUsMS00LjgsMS44Yy0wLjIsMC4xLTAuNCwwLjMtMC42LDAuNGwtMC45LDAuNmwtMC45LTAuN2MtMy4xLTIuNi00LjctNS43LTQuNS04LjdjMC4yLTIuOSwyLjEtNS41LDUuNC03LjQKCQkJCQkJCQljMy4yLTEuOSw3LjYtMi45LDEyLjQtMi45YzQuNSwwLDkuMiwwLjksMTMuMSwyLjZjMSwwLjQsMS45LDAuOSwyLjgsMS40YzQuNSwyLjYsNy4yLDYuMiw3LjMsOS44YzAuMSwzLTEuNSw1LjgtNC42LDcuOAoJCQkJCQkJCUwzMjEuMSwyNzYuNHogTTMwMy41LDI2Ny40YzUuNywwLDExLjUsMS41LDE1LjksNGMwLjcsMC40LDEuMywwLjgsMS45LDEuMmMxLjYtMS4zLDIuNS0yLjksMi40LTQuNgoJCQkJCQkJCWMtMC4xLTIuNi0yLjItNS4yLTUuOC03LjNjLTAuOC0wLjUtMS42LTAuOS0yLjUtMS4yYy0zLjUtMS41LTcuOC0yLjMtMTEuOS0yLjNjLTQuMywwLTguMSwwLjktMTAuOSwyLjUKCQkJCQkJCQljLTIuNCwxLjQtMy43LDMuMS0zLjksNWMtMC4xLDEuOCwwLjgsMy43LDIuNiw1LjVjMS42LTAuOSwzLjQtMS42LDUuNC0yQzI5OC44LDI2Ny43LDMwMS4xLDI2Ny40LDMwMy41LDI2Ny40eiIvPgoJCQkJCQk8L2c+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8Zz4KCQkJCQkJCTxwYXRoIGZpbGw9IiM0QjZFOTgiIGQ9Ik0zNjEsMjc4LjhjLTAuNywxLjYtMS43LDMuMi0yLjksNC43bDcuNSw3LjhsMTcuOC0yLjd2LTEzLjJMMzYxLDI3OC44eiIvPgoJCQkJCQk8L2c+CgkJCQkJCTxnPgoJCQkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTM2NSwyOTNsLTguOS05LjNsMC44LTFjMS4xLTEuNCwyLTIuOSwyLjctNC40bDAuMy0wLjhsMjQuOS0zLjhWMjkwTDM2NSwyOTN6IE0zNjAsMjgzLjRsNiw2LjMKCQkJCQkJCQlsMTUuNy0yLjR2LTEwLjJsLTE5LjgsMy4xQzM2MS40LDI4MS4zLDM2MC44LDI4Mi40LDM2MCwyODMuNHoiLz4KCQkJCQkJPC9nPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjNjg4NUE5IiBkPSJNMzYyLjIsMzAxLjJsLTQuNSwyLjZsLTIyLjMtNy4xYy0yLjYsMC43LTUuNCwxLjMtOC4yLDEuN2wtNiwxMi45bC0xOS4yLTAuOGwtOS4zLTEzLjUKCQkJCQkJCQljLTMtMC43LTUuOS0xLjQtOC43LTIuNGwtMjAuOCw1LjNsLTcuNS00LjNsMCwwbC03LjEtNC4xdjEzLjJsMTQuNiw4LjRsMjAuOC01LjNjMi44LDAuOSw1LjgsMS43LDguNywyLjRsOS4zLDEzLjVsMTkuMiwwLjgKCQkJCQkJCQlsNi0xMi45YzIuOC0wLjQsNS42LTEsOC4yLTEuN2wyMi4zLDcuMWwxMi42LTcuM3YtMTMuMkwzNjIuMiwzMDEuMkwzNjIuMiwzMDEuMnoiLz4KCQkJCQkJPC9nPgoJCQkJCQk8Zz4KCQkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0zMjIuMiwzMjUuOWwtMjEtMC45bC05LjMtMTMuNmMtMi43LTAuNi01LjMtMS4zLTcuOS0yLjFsLTIwLjksNS40bC0xNS44LTkuMXYtMTYuN2wxNi4zLDkuNAoJCQkJCQkJCWwyMC42LTUuM2wwLjQsMC4xYzIuOCwwLjksNS43LDEuNyw4LjYsMi4zbDAuNiwwLjFsOS4yLDEzLjRsMTcuNSwwLjdsNS45LTEyLjdsMC44LTAuMWMyLjgtMC40LDUuNS0xLDgtMS42bDAuNC0wLjFsMjIuMSw3CgkJCQkJCQkJbDE0LjMtOC4ydjE2LjdsLTEzLjksOGwtMjIuNS03LjJjLTIuMywwLjYtNC43LDEuMS03LjEsMS41TDMyMi4yLDMyNS45eiBNMzAyLjksMzIyLjFsMTcuNSwwLjdsNS45LTEyLjdsMC44LTAuMQoJCQkJCQkJCWMyLjgtMC40LDUuNS0xLDgtMS42bDAuNC0wLjFsMjIuMSw3bDExLjMtNi41VjI5OWwtMTAuOSw2LjNsLTIyLjUtNy4yYy0yLjMsMC42LTQuNywxLjEtNy4xLDEuNWwtNi4xLDEzLjFsLTIxLTAuOQoJCQkJCQkJCWwtOS4zLTEzLjZjLTIuNy0wLjYtNS4zLTEuMy03LjktMi4xbC0yMC45LDUuNGwtMTIuOC03LjR2OS44bDEzLjMsNy43bDIwLjYtNS4zbDAuNCwwLjFjMi44LDAuOSw1LjcsMS43LDguNiwyLjNsMC42LDAuMQoJCQkJCQkJCUwzMDIuOSwzMjIuMXoiLz4KCQkJCQkJPC9nPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjNEI2RTk4IiBkPSJNMjU4LDI3OS40Yy0xLjYtMS42LTMtMy4zLTQuMS01bC0yMy40LTUuM2wtMS40LTExLjF2MTMuMmwxLjQsMTEuMWwyMS41LDQuOUwyNTgsMjc5LjR6Ii8+CgkJCQkJCTwvZz4KCQkJCQkJPGc+CgkJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMjUyLjYsMjg4LjlsLTIzLjUtNS40bC0xLjUtMTIuM1YyNThsMy0wLjJsMS4yLDEwbDIzLDUuMmwwLjMsMC41YzEuMSwxLjYsMi40LDMuMywzLjksNC44bDAuOSwwLjkKCQkJCQkJCQlMMjUyLjYsMjg4Ljl6IE0yMzEuOCwyODFsMTkuNiw0LjVsNC42LTZjLTEuMS0xLjItMi4yLTIuNS0zLjEtMy44bC0yMi40LTUuMXYwLjVMMjMxLjgsMjgxeiIvPgoJCQkJCQk8L2c+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwb2x5Z29uIGZpbGw9IiNGMEY3RkYiIHBvaW50cz0iMjQ4LjgsMjkxLjQgMjQ4LjgsMzA0LjYgMjYzLjMsMzEzIDI2My4zLDI5OS44IAkJCQkJCSIvPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTI2NC44LDMxNS42bC0xNy42LTEwLjF2LTE2LjdsMTcuNiwxMC4xVjMxNS42eiBNMjUwLjMsMzAzLjhsMTEuNiw2Ljd2LTkuOGwtMTEuNi02LjdMMjUwLjMsMzAzLjgKCQkJCQkJCUwyNTAuMywzMDMuOHoiLz4KCQkJCQk8L2c+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8Zz4KCQkJCQkJPHBvbHlnb24gZmlsbD0iI0YwRjdGRiIgcG9pbnRzPSIzNTcuOCwzMDMuNyAzNTcuOCwzMTcgMzcwLjQsMzA5LjcgMzcwLjQsMjk2LjQgCQkJCQkJIi8+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzU2LjMsMzE5LjZ2LTE2LjdsMTUuNi05djE2LjdMMzU2LjMsMzE5LjZ6IE0zNTkuMywzMDQuNnY5LjhsOS42LTUuNVYyOTlMMzU5LjMsMzA0LjZ6Ii8+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwb2x5Z29uIGZpbGw9IiM2ODg1QTkiIHBvaW50cz0iMzYzLjYsMjQxLjkgMzYzLjYsMjU1LjEgMzYwLjQsMjU5LjQgMzU4LjUsMjU4LjkgMzU0LjQsMjUzLjkgCQkJCQkJIi8+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzYxLDI2MWwtMy4zLTAuOGwtNS4yLTYuNGwxMi42LTE2LjR2MTguMkwzNjEsMjYxeiBNMzU5LjMsMjU3LjZsMC40LDAuMWwyLjMtM3YtOC4zbC01LjgsNy42CgkJCQkJCQlMMzU5LjMsMjU3LjZ6Ii8+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwb2x5Z29uIGZpbGw9IiM2ODg1QTkiIHBvaW50cz0iMjQyLDIzNi45IDI0MiwyNTAuMSAyNDYuOCwyNTUuMiAyNTEuNCwyNTQuNSAyNTQuMywyNDkuNyAJCQkJCQkiLz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yNDYuMywyNTYuOGwtNS44LTYuMXYtMTcuNmwxNS43LDE2LjRsLTMuOSw2LjNMMjQ2LjMsMjU2Ljh6IE0yNDMuNSwyNDkuNWwzLjksNC4xbDMuMS0wLjVsMS45LTMuMgoJCQkJCQkJbC04LjktOS4zVjI0OS41TDI0My41LDI0OS41eiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxnPgoJCQkJCQk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjIyOS4xLDI1Ny45IDIyOS4xLDI3MS4yIDIzMC41LDI4Mi4zIDI1MiwyODcuMiAyNTgsMjc5LjQgMjUzLjksMjc0LjQgMjMwLjUsMjY5IAkJCQkJCSIvPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTI1Mi42LDI4OC45bC0yMy41LTUuNGwtMS41LTEyLjNWMjU4bDMtMC4ybDEuMiwxMGwyMi45LDUuMmw1LjIsNi40TDI1Mi42LDI4OC45eiBNMjMxLjgsMjgxCgkJCQkJCQlsMTkuNiw0LjVsNC43LTYuMWwtMy0zLjdsLTIyLjQtNS4xdjAuNUwyMzEuOCwyODF6Ii8+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwb2x5Z29uIGZpbGw9IiM2ODg1QTkiIHBvaW50cz0iMzgzLjMsMjc1LjQgMzgzLjMsMjg4LjYgMzY1LjUsMjkxLjQgMzU4LjEsMjgzLjYgMzYxLDI3OC44IAkJCQkJCSIvPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTM2NSwyOTNsLTguOC05LjJsMy45LTYuM2wyNC43LTMuOFYyOTBMMzY1LDI5M3ogTTM1OS45LDI4My40bDYuMSw2LjRsMTUuNy0yLjR2LTEwLjJsLTE5LjksMy4xCgkJCQkJCQlMMzU5LjksMjgzLjR6Ii8+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQk8L2c+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiNDREQ5RUUiIGQ9Ik0zMjIsMzE1LjhsLTI0LjktMTQuNGwtMzUuNSw5LjFjLTQuOS0xLjYtOS45LTIuOS0xNC45LTQuMWwtMTUuOC0yMy4xbC0zMi45LTEuNGwtMTAuMiwyMgoJCQkJCQkJYy00LjgsMC43LTkuNSwxLjctMTQuMSwyLjlsLTM4LjItMTIuMmwtMjEuNiwxMi41bDIxLjEsMjJjLTIuMSwyLjYtMy43LDUuMy01LDguMWwtMzguMiw1LjlsMi40LDE5bDQwLDkuMQoJCQkJCQkJYzEuOSwyLjksNC4zLDUuOCw3LDguNmwtMTUuOCwyMC41bDI0LjksMTQuNGwzNS41LTkuMWM0LjksMS42LDkuOSwyLjksMTQuOSw0LjFsMTUuOCwyMy4xbDMyLjksMS40bDEwLjItMjIKCQkJCQkJCWM0LjgtMC43LDkuNS0xLjcsMTQtMi45bDM4LjIsMTIuMmwyMS42LTEyLjVsLTIwLjktMjJjMi4xLTIuNiwzLjctNS4zLDUtOC4xbDM4LjItNS45bC0yLjQtMTlsLTQwLjEtOS4xCgkJCQkJCQljLTEuOS0yLjktNC4zLTUuOC03LTguNkwzMjIsMzE1Ljh6IE0yNDguMywzNzIuM2MtMTEuOCw2LjgtMzIuMyw1LjktNDUuOC0xLjljLTEzLjYtNy44LTE1LTE5LjctMy4zLTI2LjVzMzIuMy01LjksNDUuOCwxLjkKCQkJCQkJCUMyNTguNiwzNTMuNywyNjAsMzY1LjUsMjQ4LjMsMzcyLjN6Ii8+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMjUwLjUsNDM1LjhsLTM0LjYtMS40TDIwMCw0MTEuMWMtNC44LTEuMS05LjUtMi40LTE0LjEtMy44bC0zNS43LDkuMmwtMjYuOS0xNS42bDE2LjEtMjAuOQoJCQkJCQkJYy0yLjMtMi40LTQuMy00LjktNi03LjRsLTQwLjUtOS4ybC0yLjctMjEuNWwzOC44LTZjMS4xLTIuMywyLjQtNC41LDQtNi43bC0yMS41LTIyLjVsMjMuOC0xMy43bDM4LjQsMTIuMgoJCQkJCQkJYzQuMi0xLjEsOC41LTIsMTMtMi43bDEwLjMtMjIuMmwzNC42LDEuNGwxNS45LDIzLjJjNC44LDEuMSw5LjUsMi40LDE0LjEsMy44bDM1LjctOS4ybDI2LjksMTUuNkwzMDguMSwzMzYKCQkJCQkJCWMyLjMsMi40LDQuMyw0LjksNiw3LjRsNDAuNSw5LjJsMi43LDIxLjVsLTM4LjgsNmMtMS4xLDIuMy0yLjQsNC41LTQsNi42bDIxLjUsMjIuNWwtMjMuOCwxMy43bC0zOC40LTEyLjIKCQkJCQkJCWMtNC4yLDEuMS04LjUsMi0xMywyLjdMMjUwLjUsNDM1Ljh6IE0yMTcuNSw0MzEuNWwzMS4xLDEuM2wxMC4xLTIxLjlsMC44LTAuMWM0LjgtMC43LDkuNC0xLjcsMTMuOS0yLjhsMC40LTAuMWwwLjQsMC4xCgkJCQkJCQlsMzcuNiwxMmwxOS40LTExLjJsLTIwLjctMjEuNmwwLjgtMWMyLTIuNSwzLjYtNS4xLDQuOC03LjhsMC4zLTAuOGwzNy42LTUuOGwtMi4xLTE2LjVsLTM5LjYtOWwtMC4zLTAuNQoJCQkJCQkJYy0xLjktMi44LTQuMi01LjctNi45LTguNGwtMC45LTAuOWwxNS41LTIwLjJMMjk2LjgsMzAzbC0zNS40LDkuMUwyNjEsMzEyYy00LjgtMS42LTkuOC0yLjktMTQuOC00bC0wLjYtMC4xbC0xNS43LTIzCgkJCQkJCQlsLTMxLjEtMS4zbC0xMC4xLDIxLjlsLTAuOCwwLjFjLTQuOCwwLjctOS41LDEuNy0xMy45LDIuOGwtMC40LDAuMWwtMzgtMTIuMWwtMTkuNCwxMS4ybDIwLjcsMjEuNmwtMC44LDEKCQkJCQkJCWMtMiwyLjUtMy42LDUuMS00LjgsNy44bC0wLjMsMC44bC0zNy41LDUuOGwyLjEsMTYuNWwzOS42LDlsMC4zLDAuNWMxLjksMi44LDQuMiw1LjcsNi45LDguNGwwLjksMC45TDEyNy43LDQwMGwyMi45LDEzLjIKCQkJCQkJCWwzNS40LTkuMWwwLjQsMC4xYzQuOCwxLjYsOS44LDIuOSwxNC44LDRsMC42LDAuMUwyMTcuNSw0MzEuNXogTTIyOC40LDM3OC40Yy05LjYsMC0xOS4zLTIuNC0yNi43LTYuNwoJCQkJCQkJYy03LjYtNC40LTEyLTEwLjMtMTItMTYuM2MwLTUsMy4xLTkuNiw4LjctMTIuOGM1LjMtMy4xLDEyLjctNC44LDIwLjctNC44YzkuNiwwLDE5LjMsMi40LDI2LjcsNi43YzcuNiw0LjQsMTIsMTAuMywxMiwxNi4zCgkJCQkJCQljMCw1LTMuMSw5LjYtOC43LDEyLjhDMjQzLjcsMzc2LjcsMjM2LjMsMzc4LjQsMjI4LjQsMzc4LjR6IE0yMTksMzQwLjljLTcuNSwwLTE0LjMsMS42LTE5LjIsNC40Yy00LjYsMi43LTcuMiw2LjMtNy4yLDEwLjIKCQkJCQkJCWMwLDQuOCwzLjgsOS44LDEwLjUsMTMuN2M2LjksNCwxNi4xLDYuMywyNS4yLDYuM2M3LjUsMCwxNC4zLTEuNiwxOS4yLTQuNGM0LjYtMi43LDcuMi02LjMsNy4yLTEwLjJjMC00LjgtMy44LTkuOC0xMC41LTEzLjcKCQkJCQkJCUMyMzcuMywzNDMuMSwyMjguMSwzNDAuOSwyMTksMzQwLjl6Ii8+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik0xMjkuOSwzMzcuM2MxLjItMi44LDIuOS01LjUsNS04LjFsLTIxLjEtMjJ2MjIuN2w4LjMsOC43TDEyOS45LDMzNy4zeiIvPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTEyMS42LDM0MC4xbC05LjMtOS43di0yN2wyNC42LDI1LjdsLTAuOCwxYy0yLDIuNS0zLjYsNS4xLTQuOCw3LjhsLTAuMywwLjhMMTIxLjYsMzQwLjF6CgkJCQkJCQkgTTExNS4zLDMyOS4ybDcuNCw3LjdsNi4yLTFjMS4xLTIuMywyLjQtNC41LDQtNi43bC0xNy42LTE4LjRDMTE1LjMsMzEwLjgsMTE1LjMsMzI5LjIsMTE1LjMsMzI5LjJ6Ii8+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiM0QjZFOTgiIGQ9Ik0zMDkuOSwzMzEuNWwtMy43LDQuOGMyLjcsMi44LDUuMSw1LjcsNyw4LjZsMy4yLDAuN2w1LjYtNy4ydi0yMi43TDMwOS45LDMzMS41TDMwOS45LDMzMS41eiIvPgoJCQkJCTwvZz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTMxNywzNDcuM2wtNC43LTEuMWwtMC4zLTAuNWMtMS45LTIuOC00LjItNS43LTYuOS04LjRsLTAuOS0wLjlsMTkuMy0yNVYzMzlMMzE3LDM0Ny4zeiBNMzE0LjEsMzQzLjYKCQkJCQkJCWwxLjcsMC40bDQuNy02di0xNy43bC0xMi4zLDE2QzMxMC40LDMzOC42LDMxMi40LDM0MS4xLDMxNC4xLDM0My42eiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjNjg4NUE5IiBkPSJNMjQ5LjUsMzcxLjZjLTEuMy0xLjEtMi44LTIuMS00LjUtMy4xYy0xMC41LTYuMS0yNS4zLTgtMzYuOS01LjNjOC40LTkuNSwxOS42LTE2LjUsMzIuMy0xOS42CgkJCQkJCQljMS42LDAuNywzLjEsMS40LDQuNiwyLjNDMjU4LjEsMzUzLjQsMjU5LjksMzY0LjcsMjQ5LjUsMzcxLjZ6Ii8+CgkJCQkJPC9nPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0yNDkuNSwzNzEuNmMtMS4zLTEuMS0yLjgtMi4xLTQuNS0zLjFjLTEwLjUtNi4xLTI1LjMtOC0zNi45LTUuM2MtMy4zLDAuOC02LjQsMS45LTksMy40CgkJCQkJCQljLTAuNCwwLjItMC44LDAuNS0xLjIsMC43Yy05LjItNy42LTkuMS0xNy40LDEuMi0yMy40YzEwLjUtNi4xLDI4LTYsNDEuMy0wLjRjMS42LDAuNywzLjEsMS40LDQuNiwyLjMKCQkJCQkJCUMyNTguMSwzNTMuNCwyNTkuOSwzNjQuNywyNDkuNSwzNzEuNnoiLz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yNDkuNCwzNzMuNGwtMC45LTAuN2MtMS4yLTEtMi43LTItNC4zLTIuOWMtNi45LTQtMTYuMS02LjMtMjUuMi02LjNjLTMuNywwLTcuMywwLjQtMTAuNiwxLjEKCQkJCQkJCXMtNi4xLDEuOC04LjYsMy4yYy0wLjQsMC4yLTAuOCwwLjUtMS4xLDAuN2wtMC45LDAuNmwtMC45LTAuN2MtNS4xLTQuMi03LjctOS4yLTcuMi0xNC4xYzAuNC00LjYsMy41LTguOCw4LjYtMTEuOAoJCQkJCQkJYzUuMy0zLjEsMTIuNy00LjgsMjAuNy00LjhjNy42LDAsMTUuNCwxLjUsMjIsNC4zYzEuNywwLjcsMy4zLDEuNSw0LjcsMi4zYzcuNCw0LjMsMTEuOCwxMC4xLDEyLDE1LjkKCQkJCQkJCWMwLjEsNC43LTIuNSw5LjEtNy40LDEyLjRMMjQ5LjQsMzczLjR6IE0yMTkuMSwzNjAuNWM5LjYsMCwxOS4zLDIuNCwyNi43LDYuN2MxLjQsMC44LDIuNiwxLjYsMy44LDIuNQoJCQkJCQkJYzMuNS0yLjYsNS4zLTUuNyw1LjItOS4yYy0wLjEtNC44LTQtOS42LTEwLjUtMTMuNGMtMS40LTAuOC0yLjgtMS41LTQuNC0yLjJjLTYuMi0yLjYtMTMuNi00LjEtMjAuOC00LjEKCQkJCQkJCWMtNy41LDAtMTQuMywxLjYtMTkuMiw0LjRjLTQuNCwyLjUtNi45LDUuOC03LjIsOS40czEuNiw3LjQsNS4zLDEwLjhjMC4xLTAuMSwwLjItMC4xLDAuMy0wLjJjMi43LTEuNSw1LjgtMi43LDkuNC0zLjYKCQkJCQkJCUMyMTEuMywzNjAuOSwyMTUuMSwzNjAuNSwyMTkuMSwzNjAuNXoiLz4KCQkJCQk8L2c+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iIzRCNkU5OCIgZD0iTTMxNy40LDM3OC45Yy0xLjIsMi44LTIuOSw1LjUtNSw4LjFsMTIuOCwxMy4zbDMwLjQtNC43VjM3M0wzMTcuNCwzNzguOXoiLz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0zMjQuNyw0MDJsLTE0LjItMTQuOWwwLjgtMWMyLTIuNSwzLjYtNS4xLDQuOC03LjhsMC4zLTAuOGw0MC43LTYuM1YzOTdMMzI0LjcsNDAyeiBNMzE0LjUsMzg2LjkKCQkJCQkJCWwxMS4zLDExLjhsMjguMy00LjR2LTE5LjZsLTM1LjcsNS41QzMxNy40LDM4Mi42LDMxNi4xLDM4NC44LDMxNC41LDM4Ni45eiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjNjg4NUE5IiBkPSJNMzE5LjYsNDE3LjJsLTcuNiw0LjRsLTM4LjItMTIuMmMtNC41LDEuMi05LjIsMi4yLTE0LDIuOWwtMTAuMiwyMmwtMzIuOS0xLjRsLTE1LjgtMjMuMQoJCQkJCQkJYy01LjEtMS4xLTEwLTIuNS0xNC45LTQuMWwtMzUuNSw5LjFsLTEyLjgtNy40bDAsMGwtMTIuMS03djIyLjdsMjQuOSwxNC40bDM1LjUtOS4xYzQuOSwxLjYsOS45LDIuOSwxNC45LDQuMWwxNS44LDIzLjEKCQkJCQkJCWwzMi45LDEuNGwxMC4yLTIyYzQuOC0wLjcsOS41LTEuNywxNC0yLjlsMzguMiwxMi4ybDIxLjYtMTIuNXYtMjIuN0wzMTkuNiw0MTcuMkwzMTkuNiw0MTcuMnoiLz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yNTAuNSw0NTguNWwtMzQuNi0xLjRMMjAwLDQzMy44Yy00LjgtMS4xLTkuNS0yLjQtMTQuMS0zLjhsLTM1LjcsOS4yTDEyMy45LDQyNHYtMjYuMWwyNi42LDE1LjQKCQkJCQkJCWwzNS40LTkuMWwwLjQsMC4xYzQuOCwxLjYsOS44LDIuOSwxNC44LDRsMC42LDAuMWwxNS44LDIzbDMxLjEsMS4zbDEwLjEtMjEuOWwwLjgtMC4xYzQuOC0wLjcsOS40LTEuNywxMy45LTIuOGwwLjQtMC4xCgkJCQkJCQlsMzgsMTIuMWwyMy4zLTEzLjR2MjYuMWwtMjIuOSwxMy4ybC0zOC40LTEyLjJjLTQuMiwxLjEtOC41LDItMTMsMi43TDI1MC41LDQ1OC41eiBNMjE3LjUsNDU0LjFsMzEuMSwxLjNsMTAuMS0yMS45bDAuOC0wLjEKCQkJCQkJCWM0LjgtMC43LDkuNC0xLjcsMTMuOS0yLjhsMC40LTAuMWwwLjQsMC4xbDM3LjYsMTJsMjAuMy0xMS43di0xOS4ybC0xOS45LDExLjVMMjczLjgsNDExYy00LjIsMS4xLTguNSwyLTEzLDIuN2wtMTAuMywyMi4yCgkJCQkJCQlsLTM0LjYtMS40TDIwMCw0MTEuMmMtNC44LTEuMS05LjUtMi40LTE0LjEtMy44bC0zNS43LDkuMkwxMjcsNDAzLjJ2MTkuMmwyMy42LDEzLjZsMzUuNC05LjFsMC40LDAuMWM0LjgsMS42LDkuNywyLjksMTQuOCw0CgkJCQkJCQlsMC42LDAuMUwyMTcuNSw0NTQuMXoiLz4KCQkJCQk8L2c+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8Zz4KCQkJCQkJPHBhdGggZmlsbD0iIzRCNkU5OCIgZD0iTTE0MS4yLDM4MGMtMi43LTIuOC01LjEtNS43LTctOC42bC00MC05LjFsLTIuNC0xOVYzNjZsMi40LDE5bDM2LjgsOC40TDE0MS4yLDM4MHoiLz4KCQkJCQk8L2c+CgkJCQkJPGc+CgkJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0xMzEuNiwzOTQuOUw5Mi44LDM4NmwtMi41LTIwLjJ2LTIyLjdsMy0wLjJsMi4yLDE3LjlsMzkuNiw5bDAuMywwLjVjMS45LDIuOCw0LjIsNS43LDYuOSw4LjQKCQkJCQkJCWwwLjksMC45TDEzMS42LDM5NC45eiBNOTUuNSwzODMuNmwzNC45LDhsOC45LTExLjVjLTIuMy0yLjQtNC4zLTQuOS02LTcuNGwtNDAtOS4xdjIuMkw5NS41LDM4My42eiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxwb2x5Z29uIGZpbGw9IiNGMEY3RkYiIHBvaW50cz0iMTI1LjQsNDAwLjUgMTI1LjQsNDIzLjEgMTUwLjMsNDM3LjUgMTUwLjMsNDE0LjkgCQkJCQkiLz4KCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTUxLjgsNDQwLjFMMTIzLjksNDI0di0yNi4xbDI3LjksMTYuMVY0NDAuMXogTTEyNi45LDQyMi4zbDIxLjksMTIuN3YtMTkuMmwtMjEuOS0xMi43VjQyMi4zeiIvPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPHBvbHlnb24gZmlsbD0iI0YwRjdGRiIgcG9pbnRzPSIzMTIsNDIxLjYgMzEyLDQ0NC4yIDMzMy42LDQzMS44IDMzMy42LDQwOS4xIAkJCQkJIi8+CgkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTMxMC41LDQ0Ni44di0yNi4xbDI0LjYtMTQuMnYyNi4xTDMxMC41LDQ0Ni44eiBNMzEzLjUsNDIyLjR2MTkuMmwxOC42LTEwLjd2LTE5LjJMMzEzLjUsNDIyLjR6Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjMyMiwzMTUuOCAzMjIsMzM4LjQgMzE2LjQsMzQ1LjYgMzEzLjIsMzQ0LjkgMzA2LjIsMzM2LjMgCQkJCQkiLz4KCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzE3LDM0Ny4zbC00LjctMS4xbC04LjEtOS45bDE5LjItMjV2MjcuNkwzMTcsMzQ3LjN6IE0zMTQsMzQzLjZsMS44LDAuNGw0LjctNnYtMTcuN2wtMTIuNCwxNi4xCgkJCQkJCUwzMTQsMzQzLjZ6Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8Zz4KCQkJCQkJPHBvbHlnb24gZmlsbD0iIzY4ODVBOSIgcG9pbnRzPSI5MS44LDM0My4yIDkxLjgsMzY1LjkgOTQuMSwzODQuOSAxMzEsMzkzLjMgMTQxLjIsMzgwIDEzNC4yLDM3MS4zIDk0LjEsMzYyLjIgCQkJCQkJIi8+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTMxLjYsMzk0LjlMOTIuOCwzODZsLTIuNS0yMC4ydi0yMi43bDMtMC4ybDIuMiwxNy45bDM5LjUsOWw4LjEsOS45TDEzMS42LDM5NC45eiBNOTUuNSwzODMuNgoJCQkJCQkJbDM0LjksOGw4LjktMTEuNmwtNi03LjNsLTQwLjEtOS4xdjIuMkw5NS41LDM4My42eiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxnPgoJCQkJCQk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjM1NS42LDM3MyAzNTUuNiwzOTUuNyAzMjUuMiw0MDAuNCAzMTIuNSwzODcgMzE3LjQsMzc4LjkgCQkJCQkJIi8+CgkJCQkJPC9nPgoJCQkJCTxnPgoJCQkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzI0LjcsNDAybC0xNC4xLTE0LjdsNS45LTkuN2w0MC42LTYuM1YzOTdMMzI0LjcsNDAyeiBNMzE0LjQsMzg2LjhsMTEuNCwxMS45bDI4LjMtNC40di0xOS42CgkJCQkJCQlsLTM1LjgsNS41TDMxNC40LDM4Ni44eiIvPgoJCQkJCTwvZz4KCQkJCTwvZz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"cube\",\n \"name\": \"cube\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMTA1LjRweCIgaGVpZ2h0PSI5My45cHgiIHZpZXdCb3g9IjAgMCAxMDUuNCA5My45IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDUuNCA5My45IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkxheWVyXzMiPgo8L2c+CjxnIGlkPSJMYXllcl80Ij4KCTxwb2x5Z29uIGZpbGw9IiM0RjY1ODciIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjgwLjQsMjYuMiA1MC41LDQ0LjMgNTAuNSw4MS4yIAoJCTgwLjQsNjMuMyAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQ0VEOEVCIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIyMC43LDI2LjIgNTAuNSw0NC4zIDUwLjUsODEuMiAKCQkyMC43LDYzLjMgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0NFRDhFQiIgcG9pbnRzPSI1MC41LDQ0LjIgMjAuNywyNi4yIDUwLjMsOC41IDgwLjQsMjYuMiAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjI5LjksMjYuMiA1NC45LDExLjIgNTAuMyw4LjUgMjAuNywyNi4yIDUwLjUsNDQuMiA1NS4xLDQxLjUgCSIvPgoJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNTAuNSw0NC4yIDIwLjcsMjYuMiA1MC4zLDguNSAKCQk4MC40LDI2LjIgCSIvPgoJPHBvbHlnb24gb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSI4MC40LDU1LjEgODAuNCw2My4zIDU2LjMsNzcuOCA1MC41LDgzLjIgNjYuNCw4My4yIDk4LjUsNjMuOCAJIi8+CjwvZz4KPGcgaWQ9IkxheWVyXzUiPgoJPGc+CgkJPHBhdGggZD0iTTUwLjMsOC41bDMwLjEsMTcuOHYzNy4xTDUwLjUsODEuMkwyMC43LDYzLjNWMjYuMkw1MC4zLDguNSBNNTAuMyw2LjVjLTAuNCwwLTAuNywwLjEtMSwwLjNMMTkuNiwyNC41CgkJCWMtMC42LDAuNC0xLDEtMSwxLjd2MzcuMWMwLDAuNywwLjQsMS40LDEsMS43bDI5LjgsMTcuOWMwLjMsMC4yLDAuNywwLjMsMSwwLjNzMC43LTAuMSwxLTAuM2wzMC0xNy45YzAuNi0wLjQsMS0xLDEtMS43VjI2LjIKCQkJYzAtMC43LTAuNC0xLjQtMS0xLjdMNTEuMyw2LjdDNTEsNi42LDUwLjYsNi41LDUwLjMsNi41TDUwLjMsNi41eiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"desktop\",\n \"name\": \"desktop\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1NzMuNXB4IiBoZWlnaHQ9IjU3MC40cHgiIHZpZXdCb3g9IjAgMCA1NzMuNSA1NzAuNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTczLjUgNTcwLjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfMV8xXyIgZGlzcGxheT0ibm9uZSI+Cgk8cG9seWdvbiBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0E3QTlBQyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNDgyLjksNDA2LjYgMjY3LjUsNTMwLjkgCgkJNTIuMSw0MDYuNiA1Mi4xLDE1Ny44IDI2Ny41LDMzLjQgNDgyLjksMTU3LjggCSIvPgo8L2c+CjxnIGlkPSJMYXllcl8yXzFfIj4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjNEI2RTk4IiBkPSJNMzQ0LjYsNDA1Yy0yMCwwLTQwLjItNS4xLTU1LjQtMTMuOWMtMTUuNi05LTI0LjYtMjEuMS0yNC42LTMzLjJ2LTEwaDRjMCwxMC42LDguMiwyMS40LDIyLjYsMjkuNwoJCQkJYzE0LjcsOC41LDM0LjEsMTMuMyw1My40LDEzLjNsMCwwYzE1LjksMCwzMC40LTMuMyw0MC44LTkuM2MxMC01LjgsMTUuNS0xMy42LDE1LjYtMjIuMXYtMy4ybDQsMnYxLjJ2OS44CgkJCQljMCwxMC4xLTYuMywxOS4yLTE3LjYsMjUuOEMzNzYuNCw0MDEuNSwzNjEuMiw0MDUsMzQ0LjYsNDA1eiIvPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMjY2LjcsMzQ3LjljMCwxMC45LDgsMjIuNCwyMy42LDMxLjRzMzUuNSwxMy42LDU0LjQsMTMuNmMxNS43LDAsMzAuNi0zLjIsNDEuOC05LjYKCQkJCWMxMS02LjQsMTYuNS0xNC45LDE2LjYtMjMuOGwwLDB2OS43YzAsMCwwLDAsMCwwLjF2MC4xbDAsMGMwLDktNS41LDE3LjYtMTYuNiwyNGMtMTEuMiw2LjUtMjYuMSw5LjYtNDEuOCw5LjYKCQkJCWMtMTguOSwwLTM4LjktNC42LTU0LjQtMTMuNmMtMTUuNi05LTIzLjYtMjAuNS0yMy42LTMxLjRWMzQ3LjkgTTI3MC43LDM0Ny45aC04djEwYzAsMTIuOCw5LjMsMjUuNSwyNS42LDM0LjkKCQkJCWMxNS42LDksMzYuMSwxNC4xLDU2LjQsMTQuMWMxNi45LDAsMzIuNS0zLjYsNDMuOC0xMC4xYzEwLjUtNi4xLDE2LjktMTQuMywxOC4zLTIzLjVoMC4zdi00di0wLjF2LTAuMXYtOS43di0yLjVsLTIuMi0xLjEKCQkJCWwtNS43LTIuOWwtMC4xLDYuNGMtMC4xLDcuOC01LjMsMTUtMTQuNiwyMC40Yy0xMC4xLDUuOS0yNC4zLDkuMS0zOS44LDkuMWMtMTguOSwwLTM4LTQuOC01Mi40LTEzLjEKCQkJCUMyNzguNSwzNjgsMjcwLjcsMzU3LjgsMjcwLjcsMzQ3LjlMMjcwLjcsMzQ3Ljl6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjQjFDQUVDIiBkPSJNMzQ0LjYsMzk1Yy0yMCwwLTQwLjItNS4xLTU1LjQtMTMuOWMtMTUuNi05LTI0LjYtMjEuMS0yNC42LTMzLjJjMC0xMC4xLDYuMy0xOS4zLDE3LjYtMjUuOQoJCQkJYzExLTYuNCwyNi4yLTkuOSw0Mi44LTkuOWMyLjYsMCw1LjMsMC4xLDcuOSwwLjNoMC41bDcwLjksNDFsMC4yLDAuOWMyLjMsMTEuOS0zLjksMjMuMS0xNy4yLDMwLjcKCQkJCUMzNzYuNCwzOTEuNCwzNjEuMiwzOTUsMzQ0LjYsMzk1TDM0NC42LDM5NXoiLz4KCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTMyNS4xLDMxNC4yYzIuNiwwLDUuMiwwLjEsNy44LDAuM2w2OS44LDQwLjNjMi4xLDEwLjYtMy4yLDIxLjEtMTYuMiwyOC42Yy0xMS4yLDYuNS0yNi4xLDkuNi00MS44LDkuNgoJCQkJYy0xOC45LDAtMzguOS00LjYtNTQuNC0xMy42Yy0yOC41LTE2LjQtMzEuNi00MS4zLTYuOS01NS42QzI5NC41LDMxNy40LDMwOS40LDMxNC4yLDMyNS4xLDMxNC4yIE0zMjUuMSwzMTAuMgoJCQkJYy0xNi45LDAtMzIuNSwzLjYtNDMuOCwxMC4xYy0xMiw2LjktMTguNiwxNi43LTE4LjYsMjcuNmMwLDEyLjgsOS4zLDI1LjUsMjUuNiwzNC45YzE1LjYsOSwzNi4xLDE0LjEsNTYuNCwxNC4xCgkJCQljMTYuOSwwLDMyLjUtMy42LDQzLjgtMTAuMWMxNC04LjEsMjAuNi0yMC4xLDE4LjEtMzIuOWwtMC40LTEuOGwtMS42LTAuOUwzMzQuOSwzMTFsLTAuOC0wLjVsLTAuOS0wLjEKCQkJCUMzMzAuNSwzMTAuMywzMjcuNywzMTAuMiwzMjUuMSwzMTAuMkwzMjUuMSwzMTAuMnoiLz4KCQk8L2c+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiM0QjZFOTgiIGQ9Ik0zNjIsMzYyLjVjLTAuMywwLTAuNy0wLjEtMS0wLjNjLTAuNi0wLjQtMS0xLTEtMS43di0yOS4yYzAtMC43LDAuNC0xLjQsMS0xLjdjMC4zLTAuMiwwLjctMC4zLDEtMC4zCgkJCQlzMC43LDAuMSwxLDAuM2wxMCw1LjhjMC42LDAuNCwxLDEsMSwxLjd2MTcuN2MwLDAuNy0wLjQsMS40LTEsMS43bC0xMCw1LjhDMzYyLjcsMzYyLjQsMzYyLjQsMzYyLjUsMzYyLDM2Mi41eiIvPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzYyLDMzMS4zbDEwLDUuOHYxNy43bC0xMCw1LjhWMzMxLjMgTTM2MiwzMjcuM2MtMC43LDAtMS40LDAuMi0yLDAuNWMtMS4yLDAuNy0yLDItMiwzLjV2MjkuMgoJCQkJYzAsMS40LDAuOCwyLjgsMiwzLjVjMC42LDAuNCwxLjMsMC41LDIsMC41czEuNC0wLjIsMi0wLjVsMTAtNS44YzEuMi0wLjcsMi0yLDItMy41VjMzN2MwLTEuNC0wLjgtMi43LTItMy41bC0xMC01LjgKCQkJCUMzNjMuNCwzMjcuNCwzNjIuNywzMjcuMywzNjIsMzI3LjNMMzYyLDMyNy4zeiIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTM2MiwzNjIuNWMtMC4zLDAtMC43LTAuMS0xLTAuM2wtNTAuMS0yOC45Yy0wLjYtMC40LTEtMS0xLTEuN3YtMjkuMmMwLTAuNywwLjQtMS40LDEtMS43CgkJCQljMC4zLTAuMiwwLjctMC4zLDEtMC4zczAuNywwLjEsMSwwLjNsNTAuMSwyOC45YzAuNiwwLjQsMSwxLDEsMS43djI5LjJjMCwwLjctMC40LDEuNC0xLDEuN0MzNjIuNywzNjIuNCwzNjIuNCwzNjIuNSwzNjIsMzYyLjV6CgkJCQkiLz4KCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTMxMS45LDMwMi40bDUwLjEsMjguOXYyOS4ybC01MC4xLTI4LjlWMzAyLjQgTTMxMS45LDI5OC40Yy0wLjcsMC0xLjQsMC4yLTIsMC41Yy0xLjIsMC43LTIsMi0yLDMuNQoJCQkJdjI5LjJjMCwxLjQsMC44LDIuOCwyLDMuNUwzNjAsMzY0YzAuNiwwLjQsMS4zLDAuNSwyLDAuNXMxLjQtMC4yLDItMC41YzEuMi0wLjcsMi0yLDItMy41di0yOS4yYzAtMS40LTAuOC0yLjgtMi0zLjVsLTUwLjEtMjguOQoJCQkJQzMxMy4zLDI5OC41LDMxMi42LDI5OC40LDMxMS45LDI5OC40TDMxMS45LDI5OC40eiIvPgoJCTwvZz4KCQk8Zz4KCQkJPGc+CgkJCQk8cG9seWdvbiBmaWxsPSIjQjFDQUVDIiBwb2ludHM9IjQ3My42LDE4MiAxOTUuOCwyMS40IDIyMC45LDYuOSA0OTguNiwxNjcuNSA0OTguNiwzODYuNyA0NzMuNiw0MDEuMiAJCQkJIi8+CgkJCTwvZz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBvbHlnb24gZmlsbD0iIzRCNkU5OCIgcG9pbnRzPSI0NzMuNiwxNzkuNyA0OTguNiwxNjUuMiA0OTguNiwzODYuNyA0NzMuNiw0MDEuMiAJCQkJIi8+CgkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNNDk2LjYsMTY4Ljd2MjE2LjlsLTIxLjEsMTIuMlYxODAuOUw0OTYuNiwxNjguNyBNNTAwLjYsMTYxLjdsLTYsMy41bC0yMS4xLDEyLjJsLTIsMS4ydjIuM3YyMTYuOXY2LjkKCQkJCQlsNi0zLjVsMjEuMS0xMi4ybDItMS4ydi0yLjNWMTY4LjdWMTYxLjdMNTAwLjYsMTYxLjd6Ii8+CgkJCTwvZz4KCQk8L2c+CgkJPGc+CgkJCTxwb2x5Z29uIGZpbGw9IiNDREQ5RUUiIHBvaW50cz0iMTk3LjgsMjM5LjUgMTk3LjgsMTcuOSA0NzQsMTc5LjIgNDc0LDQwMC43IAkJCSIvPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTk5LjgsMjEuNGwyNzIuMiwxNTl2MjE2LjlsLTI3Mi4yLTE1OUwxOTkuOCwyMS40IE0xOTUuOCwxNC41djYuOXYyMTYuOXYyLjNsMiwxLjJsMjcyLjIsMTU5bDYtMi41CgkJCQl2LTAuOVYxODAuNVYxNzhsLTItMS4ybC0yNzIuMi0xNTlMMTk1LjgsMTQuNUwxOTUuOCwxNC41eiIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0iI0YwRjdGRiIgcG9pbnRzPSI0MzYuNiwxNTkuNyAzMDAuMiwyOTUuNSAxOTkuOSwyMzguMyAxOTkuOSwyMzIuOSAzMzcuNCwxMDEuOCAJCQkiLz4KCQk8L2c+CgkJPGc+CgkJCTxwb2x5Z29uIGZpbGw9IiNGMEY3RkYiIHBvaW50cz0iNDYxLDE3My45IDQ3MiwxODAuNCA0NzIsMjQwLjggMzc0LjUsMzM4LjQgMzI0LjgsMzA5LjggCQkJIi8+CgkJPC9nPgoJCTxnPgoJCQk8Zz4KCQkJCTxwb2x5Z29uIGZpbGw9IiM2ODg1QTkiIHBvaW50cz0iNDEsNDIwLjggNDEsMzk3LjQgMjU4LjksNTIzLjMgMzY0LDQ2Mi42IDM2NCw0ODYgMjU4LjksNTQ2LjcgCQkJCSIvPgoJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTQzLDQwMC45bDIxNiwxMjQuN2wxMDMtNTkuNXYxOC44bC0xMDMsNTkuNUw0Myw0MTkuN1Y0MDAuOSBNMzksMzk0djYuOXYxOC44djIuM2wyLDEuMmwyMTYsMTI0LjcKCQkJCQlsMiwxLjJsMi0xLjJsMTAzLTU5LjVsMi0xLjJ2LTIuM3YtMTguOHYtNi45bC02LDMuNUwyNTksNTIxTDQ1LDM5Ny40TDM5LDM5NEwzOSwzOTR6Ii8+CgkJCTwvZz4KCQk8L2c+CgkJPGc+CgkJCTxwb2x5Z29uIGZpbGw9IiM0QjZFOTgiIHN0cm9rZT0iIzIzMUYyMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzYyLDQ2Ni4xIDM2Miw0ODQuOSAyNTguOSw1NDQuMyAKCQkJCTI1OC45LDUyNS42IAkJCSIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0iI0IxQ0FFQyIgcG9pbnRzPSIzOSw0MDAuOSAxNDYsMzM5LjEgMzY2LDQ2Ni4xIDI1OC45LDUyNy45IAkJCSIvPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTQ2LDM0MS40bDIxNiwxMjQuN2wtMTAzLDU5LjVMNDMsNDAwLjlMMTQ2LDM0MS40IE0xNDYsMzM2LjhsLTIsMS4yTDQxLDM5Ny40bC02LDMuNWw2LDMuNWwyMTYsMTI0LjcKCQkJCWwyLDEuMmwyLTEuMmwxMDMtNTkuNWw2LTMuNWwtNi0zLjVMMTQ4LDMzNy45TDE0NiwzMzYuOEwxNDYsMzM2Ljh6Ii8+CgkJPC9nPgoJCTxwb2x5Z29uIGZpbGw9IiM2ODg1QTkiIHN0cm9rZT0iIzIzMUYyMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNzcsNDAyLjYgCgkJCTI1Ni4xLDUwNS4yIDMyOS42LDQ2Mi42IDE1MS4xLDM1OSAJCSIvPgoJPC9nPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yMjEsOS4ybDI3MS43LDE1Ny4zdjIxOS45bC0yMS4xLDEyLjJMNDA0LjgsMzU5YzAuNiw0LjQsMCw1LjctMS44LDkuOHYwLjZjMCw5LTUuNSwxNy42LTE2LjcsMjQKCQkJCWMtMTEuMiw2LjUtMjYuMSw5LjYtNDEuOCw5LjZjLTE4LjksMC0zOC45LTQuNi01NC40LTEzLjZjLTE1LjYtOS0yMy42LTIwLjUtMjMuNi0zMS40di0wLjJjLTEuMy0zLjItMi02LjYtMi05LjkKCQkJCWMwLTEwLjEsNi4zLTE5LjMsMTcuNi0yNS45YzcuNi00LjQsMTcuMS03LjQsMjcuNi04Ljl2LTEwLjljMC0wLjQsMC4xLTAuNy0yNC44LTE0LjhsLTg1LjMtNDkuMlYyMS40TDIyMSw5LjIgTTIyMSwwbC00LDIuMwoJCQkJbC0yMS4xLDEyLjJsLTQsMi4zdjQuNnYyMTYuOXY0LjZsNCwyLjNMMzAyLDMwNS44djAuN2MtOC45LDEuOS0xNyw0LjgtMjMuNiw4LjdjLTE0LDguMS0yMS42LDE5LjctMjEuNiwzMi44CgkJCQljMCwzLjgsMC43LDcuNiwyLDExLjRjMC42LDEzLjgsMTAuNiwyNy4yLDI3LjUsMzdjMTYuMiw5LjMsMzcuNSwxNC43LDU4LjQsMTQuN2MxNy42LDAsMzMuOS0zLjgsNDUuOC0xMC43CgkJCQljMTIuOS03LjUsMjAuMi0xOC4xLDIwLjYtMzBjMC4yLTAuNCwwLjMtMC44LDAuNC0xLjJsNTYsMzMuNGw0LDIuM2w0LTIuM2wyMS4xLTEyLjJsNC0yLjN2LTQuNnYtMjE3di00LjZsLTQtMi4zTDIyNSwyLjNMMjIxLDAKCQkJCUwyMjEsMHoiLz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTE0NiwzNDEuNGwyMTYsMTI0Ljd2MTguOGwtMTAzLDU5LjVMNDMsNDE5Ljd2LTE4LjhMMTQ2LDM0MS40IE0xNDYsMzMyLjJsLTQsMi4zTDM5LDM5NGwtNCwyLjN2NC42CgkJCQkJdjE4Ljh2NC42bDQsMi4zbDIxNiwxMjQuN2w0LDIuM2w0LTIuM2wxMDMtNTkuNWw0LTIuM3YtNC42di0xOC44di00LjZsLTQtMi4zTDE1MCwzMzQuNUwxNDYsMzMyLjJMMTQ2LDMzMi4yeiIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"diamond\",\n \"name\": \"diamond\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMTEzLjlweCIgaGVpZ2h0PSIxMDUuOHB4IiB2aWV3Qm94PSIwIDAgMTEzLjkgMTA1LjgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExMy45IDEwNS44IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkxheWVyXzhfY29weSI+Cgk8ZyBpZD0iTGF5ZXJfMyI+Cgk8L2c+Cgk8Zz4KCQk8cG9seWdvbiBmaWxsPSIjNkQ4NEE1IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxNC4xLDUwIDU4LjEsNy41IDEwMi4xLDUwIAoJCQk1OC4xLDc2LjUgCQkiLz4KCTwvZz4KCTxwb2x5Z29uIGZpbGw9IiNDRUQ4RUIiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjE0LjEsNTAgNTguMSw3Ni41IDU4LjEsNy41IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNTUuNCwyNCAxOS41LDQ5LjggMTguNSw0OS4yIDU1LjQsMTMuNyAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjNDY1RTdDIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxNC4xLDUwIDU4LjEsOTYuNiAxMDIuMSw1MCAKCQk1OC4xLDc2LjUgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0EzQjRDQyIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMTQuMSw1MCA1OC4xLDk2LjYgNTguMSw3Ni41IAkKCQkiLz4KPC9nPgo8ZyBpZD0iTGF5ZXJfNCI+Cgk8cG9seWdvbiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjU4LjEsNy41IDE0LjEsNTAgCgkJNTguMSw5Ni42IDEwMi4xLDUwIAkiLz4KCTxwb2x5Z29uIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzAwMDAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIHBvaW50cz0iNTguMSw5Ny41IDEwOC4zLDgxLjcgODUuOSw2Ny4zIAkiLz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"dns\",\n \"name\": \"dns\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzhfY29weSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IgoJIHk9IjBweCIgd2lkdGg9IjEzNHB4IiBoZWlnaHQ9IjEyMi40cHgiIHZpZXdCb3g9IjAgMCAxMzQgMTIyLjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEzNCAxMjIuNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl83X2NvcHkiPgo8L2c+CjxwYXRoIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzAwMDAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIGQ9Ik03Ni4xLDY1LjRjLTIuOCwwLTUuNiwwLjEtOC4yLDAuM3Y0OS4xYzIuNywwLjEsNS40LDAuMyw4LjIsMC4zCgljMzIsMCw1Ny45LTExLjEsNTcuOS0yNC44QzEzNCw3Ni41LDEwOC4xLDY1LjQsNzYuMSw2NS40eiIvPgo8Y2lyY2xlIGZpbGw9IiNEQUUxRUQiIGN4PSI2Ni42IiBjeT0iNjEuMiIgcj0iNTMuMSIvPgo8cGF0aCBmaWxsPSIjNzE4NEEyIiBkPSJNMTE2LDU5LjJjMC0yNy44LTIyLTUwLjMtNDkuNi01MS4xYy0yOCwwLjgtNTAuNiwyMi42LTUyLjgsNTAuMmMwLDAuMywwLDAuNiwwLDAuOQoJYzAsMjguMywyMi45LDUxLjIsNTEuMiw1MS4yUzExNiw4Ny41LDExNiw1OS4yeiIvPgo8cGF0aCBmaWxsPSIjQjlDNEQ3IiBkPSJNMTA0LjcsNDguNmMwLTExLjYtNC4yLTIyLjMtMTEuMi0zMC41Yy04LTYtMTcuOC05LjctMjguNS0xMEM1MS40LDguNSwzOS4xLDE0LDI5LjksMjIuOGwwLDAKCWMtOS4yLDguOC0xNS4yLDIwLjktMTYuMywzNC4zbDAsMGMwLDAuMywwLDAuNiwwLDAuOGMwLDMuNSwwLjQsNi44LDEsMTAuMUMyMiw4NC40LDM4LjQsOTUuNyw1Ny41LDk1LjcKCUM4My42LDk1LjcsMTA0LjcsNzQuNiwxMDQuNyw0OC42eiIvPgo8cGF0aCBmaWxsPSIjRDBEOEU5IiBkPSJNMjkuOSwyMi44TDI5LjksMjIuOEMyMi43LDI5LjYsMTcuNSwzOC40LDE1LDQ4LjNjNywxMi4xLDIwLjEsMjAuMSwzNSwyMC4xYzIyLjQsMCw0MC41LTE4LjEsNDAuNS00MC41CgljMC00LjctMC44LTkuMS0yLjMtMTMuM0M4MS40LDEwLjYsNzMuNSw4LjIsNjUsOEM1MS40LDguNSwzOS4xLDE0LDI5LjksMjIuOHoiLz4KPGNpcmNsZSBpZD0iT3V0bGluZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjY2LjYiIGN5PSI2MS4yIiByPSI1My4xIi8+CjxlbGxpcHNlIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNDNTA2RCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSI2Ni41IiBjeT0iNDYuMSIgcng9IjUwLjQiIHJ5PSIyMi4yIi8+CjxlbGxpcHNlIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNDNTA2RCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSI2Ni41IiBjeT0iNzYuMyIgcng9IjUwLjQiIHJ5PSIyMi4yIi8+CjxlbGxpcHNlIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNDNTA2RCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSI2Ni41IiBjeT0iNjEuMiIgcng9IjIzLjUiIHJ5PSI1My4yIi8+CjxwYXRoIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzAwMDAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIGQ9Ik05MS43LDg1LjhINDFjLTcuMiwwLTEzLTUuOC0xMy0xM3YtNS45YzAtNy4yLDUuOC0xMywxMy0xM2g1MC43CgljNy4yLDAsMTMsNS44LDEzLDEzdjUuOUMxMDQuNyw4MCw5OC45LDg1LjgsOTEuNyw4NS44eiIvPgo8Zz4KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05Ni44LDc5LjRjLTIwLjIsMi4yLTQwLjYsMi4yLTYwLjksMGMtNy4yLTAuOS0xMy03LjgtMTMtMTQuOGMwLTEuOSwwLTMuOSwwLTUuOGMwLTcsNS44LTEzLjgsMTMtMTQuOAoJCWMyMC4yLTIuMiw0MC42LTIuMiw2MC45LDBjNy4yLDAuOSwxMyw3LjgsMTMsMTQuOGMwLDEuOSwwLDMuOSwwLDUuOEMxMDkuNyw3MS43LDEwMy45LDc4LjUsOTYuOCw3OS40eiIvPgoJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTk2LjgsNzkuNGMtMjAuMiwyLjItNDAuNiwyLjItNjAuOSwwCgkJYy03LjItMC45LTEzLTcuOC0xMy0xNC44YzAtMS45LDAtMy45LDAtNS44YzAtNyw1LjgtMTMuOCwxMy0xNC44YzIwLjItMi4yLDQwLjYtMi4yLDYwLjksMGM3LjIsMC45LDEzLDcuOCwxMywxNC44CgkJYzAsMS45LDAsMy45LDAsNS44QzEwOS43LDcxLjcsMTAzLjksNzguNSw5Ni44LDc5LjR6Ii8+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMzMsNzNjMC03LjQsMC0xNC45LDAtMjIuM2MyLjctMC40LDUuNC0wLjgsOC4xLTEuMWMyLjItMC4zLDQuMiwwLDYsMC45czMuMiwyLjMsNC4yLDQuMnMxLjUsNC4xLDEuNSw2LjUKCQkJYzAsMC40LDAsMC44LDAsMS4yYzAsMi40LTAuNSw0LjYtMS41LDYuNXMtMi40LDMuMy00LjEsNC4yYy0xLjgsMC45LTMuOCwxLjItNiwxQzM4LjUsNzMuOCwzNS43LDczLjQsMzMsNzN6IE0zOSw1NC4zCgkJCWMwLDUsMCwxMC4xLDAsMTUuMWMwLjcsMC4xLDEuNCwwLjEsMi4xLDAuMmMxLjcsMC4xLDMuMS0wLjQsNC0xLjZzMS40LTMuMSwxLjQtNS42YzAtMC40LDAtMC43LDAtMS4xYzAtMi41LTAuNS00LjMtMS40LTUuNQoJCQlzLTIuMy0xLjctNC4xLTEuNkM0MC40LDU0LjIsMzkuNyw1NC4yLDM5LDU0LjN6Ii8+CgkJPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTc3LjIsNzUuM2MtMiwwLjEtNC4xLDAuMi02LjEsMC4yYy0zLTUuNi02LTExLjQtOS0xN2MwLDUuNywwLDExLjQsMCwxN2MtMiwwLTQuMS0wLjEtNi4xLTAuMmMwLTksMC0xOCwwLTI3CgkJCWMyLTAuMSw0LjEtMC4yLDYuMS0wLjJjMyw1LjYsNiwxMS40LDksMTdjMC01LjcsMC0xMS40LDAtMTdjMiwwLDQuMSwwLjEsNi4xLDAuMkM3Ny4yLDU3LjMsNzcuMiw2Ni4zLDc3LjIsNzUuM3oiLz4KCQk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNOTQuMiw2Ny41YzAtMC44LTAuMy0xLjUtMC45LTEuOWMtMC42LTAuNS0xLjctMC45LTMuMy0xLjRjLTEuNi0wLjUtMi45LTEtMy45LTEuNWMtMy4zLTEuNi00LjktNC00LjktNi45CgkJCWMwLTEuNSwwLjQtMi44LDEuMi0zLjhjMC44LTEuMSwyLTEuOSwzLjUtMi4zYzEuNS0wLjUsMy4yLTAuNiw1LTAuNGMxLjgsMC4yLDMuNCwwLjcsNC45LDEuNWMxLjQsMC44LDIuNiwxLjgsMy4zLDIuOQoJCQljMC44LDEuMiwxLjIsMi40LDEuMiwzLjhjLTItMC4xLTQtMC4yLTYuMS0wLjNjMC0xLTAuMy0xLjgtMC45LTIuM2MtMC42LTAuNi0xLjUtMC45LTIuNi0xcy0xLjksMC4xLTIuNiwwLjUKCQkJYy0wLjYsMC40LTAuOSwxLTAuOSwxLjhjMCwwLjcsMC4zLDEuMywxLDEuOGMwLjcsMC42LDEuOSwxLjEsMy43LDEuN2MxLjcsMC42LDMuMiwxLjIsNC4zLDEuOGMyLjcsMS41LDQuMSwzLjMsNC4xLDUuOAoJCQljMCwxLjktMC44LDMuNi0yLjUsNC45Yy0xLjcsMS40LTMuOSwyLjMtNi44LDIuNmMtMiwwLjItMy45LDAuMS01LjYtMC42Yy0xLjctMC42LTIuOS0xLjYtMy44LTIuOWMtMC44LTEuMy0xLjMtMi44LTEuMy00LjYKCQkJYzIsMCw0LjEtMC4xLDYuMS0wLjJjMCwxLjQsMC40LDIuNCwxLjEsM3MxLjgsMC45LDMuNCwwLjdjMS0wLjEsMS44LTAuMywyLjQtMC44QzkzLjksNjguOCw5NC4yLDY4LjIsOTQuMiw2Ny41eiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"document\",\n \"name\": \"document\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0NTEuMjAwMDFweCIgaGVpZ2h0PSI1NDEuNzAwMDFweCIgdmlld0JveD0iMCAwIDQ1MS4yMDAwMSA1NDEuNzAwMDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ1MS4yMDAwMSA1NDEuNzAwMDEiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8yXzFfIiBkaXNwbGF5PSJub25lIj4KPC9nPgo8ZyBpZD0iTGF5ZXJfMyI+Cgk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjMzMS4yOTk5OSw0ODcuMjk5OTkgMjc4LjEwMDAxLDQ5My42MDAwMSAyNTQuNywzNTguNzAwMDEgCgkJMjc2LjEwMDAxLDM1OS43OTk5OSA0MTMuNSw0NDAuODk5OTkgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzIzMUYyMCIgcG9pbnRzPSIyOTkuODk5OTksMjU3LjYwMDAxIDI5OS43MDAwMSw0ODIuMjk5OTkgMjc4LjEwMDAxLDQ5My42MDAwMSA4NS41LDM3Ny43OTk5OSA4NS41LDgwLjcgCgkJMTA2LjgsNjYuNiAyMzcuNywxNDUgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0NERDlFRSIgcG9pbnRzPSI5NS43LDg0LjIgMjEzLjgsMTU1LjM5OTk5IDIyNiwxNDguMzk5OTkgMTA3LjIsNzcuMyAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQ0REOUVFIiBwb2ludHM9IjI3Ni4xMDAwMSwyNTIuMyAyNzYuMTAwMDEsNDgwLjUgOTUuOCwzNzIuMjAwMDEgOTUuOCw4OS4xIDIxMi44LDE1OSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjI4MS4yMDAwMSwyNjkuMjk5OTkgMjgwLjIwMDAxLDQ4MC42MDAwMSAyOTIuMzk5OTksNDc0LjUgMjkxLjI5OTk5LDI2My4yMDAwMSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9Ijk1LjcsODQuMiAxMzMuMywxMDYuOCAxNTYuNSwxMDYuOSAxMTguNiw4NC4zIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTQzLjYwMDAxLDExMyAxNTkuNjAwMDEsMTIyLjQgMTgyLjcsMTIyLjUgMTY2LjYwMDAxLDExMyAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjOEFBNEMxIiBwb2ludHM9IjIxOS44OTk5OSwxNTkuNyAyNzkuNzAwMDEsMjY1LjM5OTk5IDI5MC42MDAwMSwyNTkgMjMxLjMsMTUzLjEwMDAxIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiMyOTQwNTkiIHBvaW50cz0iMjUzLjgsMzM3LjI5OTk5IDExOCwyNTUuODk5OTkgMTE4LDIzNy4zIDI1My44LDMxOC43MDAwMSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjMjk0MDU5IiBwb2ludHM9IjI1My44LDM3MS42MDAwMSAxMTgsMjkwLjIwMDAxIDExOCwyNzEuNjAwMDEgMjUzLjgsMzUzIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiMyOTQwNTkiIHBvaW50cz0iMjUzLjgsNDA0LjM5OTk5IDExOCwzMjMgMTE4LDMwNC4zOTk5OSAyNTMuOCwzODUuODk5OTkgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzI5NDA1OSIgcG9pbnRzPSIyMTguODk5OTksNDE3LjI5OTk5IDExOCwzNTcuMzk5OTkgMTE4LDMzOC43OTk5OSAyMTguODk5OTksMzk4LjcwMDAxIAkiLz4KPC9nPgo8ZyBpZD0iTGF5ZXJfNiI+Cgk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMjE5Ljg5OTk5LDE1OS43TDIxMS4yLDE1Ny4zdjc1LjU5OTk5YzAsMi44OTk5OSwxLjYwMDAxLDUuNjAwMDEsNC4xMDAwMSw3bDYwLjgsMzQuODk5OTlsMy42MDAwMS05LjM5OTk5CgkJTDIxOS44OTk5OSwxNTkuN3oiLz4KCTxwYXRoIGZpbGw9IiNDREQ5RUUiIGQ9Ik0yNzMuNSwyNjUuMzk5OTlMMjIyLjgsMjM2Yy0yLjItMS4zLTMuNjAwMDEtMy43LTMuNjAwMDEtNi4zbC0wLjMtNTkuOTAwMDFMMjczLjUsMjY1LjM5OTk5eiIvPgoJPGcgaWQ9IkxheWVyXzQiPgoJPC9nPgo8L2c+CjxnIGlkPSJMYXllcl8xXzFfIiBkaXNwbGF5PSJub25lIj4KCTxnIGRpc3BsYXk9ImlubGluZSI+CgkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTg0Ni45MDAwMiwzMDguMjk5OTlDODQ3LDMwOS4xOTk5OCw4NDcsMzEwLjA5OTk4LDg0NywzMTFMODQ2LjkwMDAyLDMwOC4yOTk5OUw4NDYuOTAwMDIsMzA4LjI5OTk5eiIvPgoJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik04NDksMzExaC0zLjc5OTk5YzAtMC43OTk5OSwwLTEuNjAwMDEtMC4wOTk5OC0yLjVsLTAuMjk5OTktMi4xMDAwMWg0LjA5OTk4TDg0OSwzMTFMODQ5LDMxMXoiLz4KCTwvZz4KCTxnIGRpc3BsYXk9ImlubGluZSI+CgkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTg0Ni45MDAwMiwyMTIuN0M4NDcsMjEzLjU5OTk5LDg0NywyMTQuNSw4NDcsMjE1LjM5OTk5TDg0Ni45MDAwMiwyMTIuN0w4NDYuOTAwMDIsMjEyLjd6Ii8+CgkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTg0OSwyMTUuMzk5OTloLTMuNzk5OTljMC0wLjgsMC0xLjYwMDAxLTAuMDk5OTgtMi41bC0wLjI5OTk5LTIuMTAwMDFoNC4wOTk5OEw4NDksMjE1LjM5OTk5CgkJCUw4NDksMjE1LjM5OTk5eiIvPgoJPC9nPgoJPHBhdGggZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjQjJDQkVEIiBzdHJva2U9IiMyMzFGMjAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSIKCQlNODQ2LjkwMDAyLDMwOC4yOTk5OUM4NDcsMzA5LjE5OTk4LDg0NywzMTAuMDk5OTgsODQ3LDMxMUw4NDYuOTAwMDIsMzA4LjI5OTk5TDg0Ni45MDAwMiwzMDguMjk5OTl6Ii8+Cgk8cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiNCMkNCRUQiIHN0cm9rZT0iIzIzMUYyMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9IgoJCU04NDYuOTAwMDIsMjEyLjdDODQ3LDIxMy41OTk5OSw4NDcsMjE0LjUsODQ3LDIxNS4zOTk5OUw4NDYuOTAwMDIsMjEyLjdMODQ2LjkwMDAyLDIxMi43eiIvPgoJPGcgZGlzcGxheT0iaW5saW5lIj4KCQk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjI3NCw1MjUuMjk5OTkgMjM5LjMsNTE4LjUgMjM4LjcsMjE4LjYwMDAxIDUxNi4yOTk5OSwzODIuMzk5OTkgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjQ0NEOEVFIiBwb2ludHM9IjU1LjYsNDk4LjIwMDAxIDU0LjksNDk4LjIwMDAxIDU0LjksNDk4LjcwMDAxIAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iIzIzMUYyMCIgcG9pbnRzPSI1NC40LDQ5OS42MDAwMSA1NC40LDQ5Ny43MDAwMSA1Ny41LDQ5Ny43MDAwMSAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiNDQ0Q4RUUiIHBvaW50cz0iNTUuNiw0MTAuMjk5OTkgNTQuOSw0MTAuMjk5OTkgNTQuOSw0MTAuNzAwMDEgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjMjMxRjIwIiBwb2ludHM9IjU0LjQsNDExLjYwMDAxIDU0LjQsNDA5Ljc5OTk5IDU3LjUsNDA5Ljc5OTk5IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0NERDlFRSIgcG9pbnRzPSIyMzkuMyw0MzEuMjAwMDEgNTYuOSwzMjEuNjAwMDEgMjM4LjcsMjEyLjEwMDAxIDQyMS43MDAwMSwzMjEuNjAwMDEgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjQ0NEOEVFIiBwb2ludHM9IjU1LjYsMzIyLjM5OTk5IDU0LjksMzIyLjM5OTk5IDU0LjksMzIyLjc5OTk5IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0I1QzVEQyIgcG9pbnRzPSI1NC45LDM5Ny4zOTk5OSAyMzkuMyw1MDguMjAwMDEgMjM5LjMsNTA4LjIwMDAxIDIzOS4zLDQzMy43MDAwMSA1NC45LDMyMi43OTk5OSAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiM2ODg1QTkiIHBvaW50cz0iMjY3LDQ5MS42MDAwMSAyMzkuMyw1MDguMjAwMDEgMjM5LjMsNTA4LjIwMDAxIDIzOS4zLDQzMy43MDAwMSAyNjcsNDE3IAkJIi8+CgkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTQ2LjcsMzE4LjEwMDAxdjgzdjAuNzAwMDFMMjM5LjMsNTE3LjYwMDA0bDM3Ljk5OTk4LTIyLjc5OTk5VjQxMUw4NC4xLDI5NS4zOTk5OUw0Ni43LDMxOC4xMDAwMXoKCQkJIE0yMzcuMyw1MDQuNUw1NywzOTYuMjAwMDFWMzI2LjVsMTgwLjMsMTA4LjI5OTk5VjUwNC41eiBNNTYuOSwzMjEuNjAwMDFMODIuNCwzMDZsMTgzLDEwOS41bC0yNi4xMDAwMSwxNS43MDAwMUw1Ni45LDMyMS42MDAwMXoKCQkJIE0yNjcuMzk5OTksNDg5LjI5OTk5bC0yNi4xMDAwMSwxNS4yOTk5OXYtNjkuNzAwMDFsMjYuMTAwMDEtMTUuMjk5OTlWNDg5LjI5OTk5eiIvPgoJPC9nPgo8L2c+CjxnIGlkPSJMYXllcl81Ij4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"firewall\",\n \"name\": \"firewall\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1NzguNXB4IiBoZWlnaHQ9IjU0OS4zcHgiIHZpZXdCb3g9IjAgMCA1NzguNSA1NDkuMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTc4LjUgNTQ5LjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzAwMDAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIHBvaW50cz0iMzk1LjYsNTE5LjkgMzMxLjksNTI1LjYgMjYxLjQsMjM1LjggNTYyLjksNDE3IAkiLz4KCTxnPgoJCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iODYuMSwzNzguNSA4Ni40LDYzLjEgMTg1LjMsNS44IDQzMC42LDE0OCA0MzAuNiw0NjMuMSAzMzEuNCw1MjAuNiAJCSIvPgoJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0xODUuMywxMS42TDQyNS42LDE1MXYzMDkuM2wtOTQuMiw1NC42TDkxLjEsMzc1LjdMOTEuNCw2NkwxODUuMywxMS42IE0xODUuMywwbC01LDIuOWwtOTQsNTQuNGwtNSwyLjkKCQkJVjY2TDgxLDM3NS43djUuOGw1LDIuOWwyNDAuMywxMzkuMmw1LDIuOWw1LTIuOWw5NC4yLTU0LjZsNS0yLjl2LTUuOFYxNTAuOXYtNS44bC01LTIuOUwxOTAuMywyLjlMMTg1LjMsMEwxODUuMywweiIvPgoJPC9nPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iIzdGMUEwQSIgcG9pbnRzPSIxMzcuNSwyNDYuNCA5OS4yLDIyNC4zIDkxLjQsMjI4LjggMTI5LjYsMjUwLjkgMTI5LjYsMzE3LjIgMTM3LjUsMzEyLjcgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjN0YxQTBBIiBwb2ludHM9IjE1MC4yLDI1My43IDE0Mi40LDI1OC4yIDIzMC44LDMwOS4zIDIzMC44LDM3NS42IDIzOC42LDM3MS4xIDIzOC42LDMwNC44IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iIzdGMUEwQSIgcG9pbnRzPSIyNTEuNCwzMTIuMSAyNDMuNSwzMTYuNiAzMzEuOSwzNjcuNyAzMzEuOSw0MzQgMzM5LjgsNDI5LjUgMzM5LjgsMzYzLjIgCQkiLz4KCTwvZz4KCTxwb2x5Z29uIGZpbGw9IiM3RjFBMEEiIHBvaW50cz0iOTguOSwxNDIuMiA5MS4xLDE0Ni43IDE3OS41LDE5Ny44IDE3OS41LDI2NC4xIDE4Ny4zLDI1OS42IDE4Ny4zLDE5My4zIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM3RjFBMEEiIHBvaW50cz0iMjAwLjksMjAxLjEgMTkzLjEsMjA1LjYgMjgxLjUsMjU2LjcgMjgxLjUsMzIzIDI4OS4zLDMxOC41IDI4OS4zLDI1Mi4yIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM3RjFBMEEiIHBvaW50cz0iMzAzLjUsMjYwLjQgMjk1LjcsMjY0LjkgMzMwLjksMjg2LjMgMzMwLjksMzUyLjYgMzM4LjgsMzQ4LjEgMzM4LjgsMjgxLjggCSIvPgoJPHBvbHlnb24gZmlsbD0iIzdGMUEwQSIgcG9pbnRzPSI5OC45LDMwNC45IDkxLjEsMzA5LjQgMTc5LjUsMzYwLjQgMTc5LjUsNDI2LjcgMTg3LjMsNDIyLjIgMTg3LjMsMzU2IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM3RjFBMEEiIHBvaW50cz0iMjAwLjksMzYzLjggMTkzLjEsMzY4LjMgMjgxLjUsNDE5LjMgMjgxLjUsNDg1LjYgMjg5LjMsNDgxLjEgMjg5LjMsNDE0LjggCSIvPgoJPHBvbHlnb24gZmlsbD0iIzdGMUEwQSIgcG9pbnRzPSIzMDMuNSw0MjMgMjk1LjcsNDI3LjUgMzMwLjksNDQ3LjIgMzMwLjksNTEzLjUgMzM4LjgsNTA5IDMzOC44LDQ0Mi43IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM3RjFBMEEiIHBvaW50cz0iMTM3LjUsODMuOCA5OS4yLDYxLjcgOTEuNCw2Ni4yIDEyOS42LDg4LjMgMTI5LjYsMTU0LjUgMTM3LjUsMTUwLjEgCSIvPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iI0YzNDEzOSIgcG9pbnRzPSIxMjkuNiwxNTQuNSA5MS40LDEzMi41IDkxLjQsNjYuMiAxMjkuNiw4OC4zIAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0YzNDEzOSIgcG9pbnRzPSIxNzkuNSwyNjQuMSA5MS4xLDIxMyA5MS4xLDE0Ni43IDE3OS41LDE5Ny44IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0YzNDEzOSIgcG9pbnRzPSIyODEuNSwzMjMgMTkzLjEsMjcxLjkgMTkzLjEsMjA1LjYgMjgxLjUsMjU2LjcgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjRjM0MTM5IiBwb2ludHM9IjMzMC45LDM1Mi42IDI5NS43LDMzMS4yIDI5NS43LDI2NC45IDMzMC45LDI4Ni4zIAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0YzNDEzOSIgcG9pbnRzPSIxNzkuNSw0MjYuNyA5MS4xLDM3NS43IDkxLjEsMzA5LjQgMTc5LjUsMzYwLjQgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjRjM0MTM5IiBwb2ludHM9IjI4MS41LDQ4NS42IDE5My4xLDQzNC42IDE5My4xLDM2OC4zIDI4MS41LDQxOS4zIAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0YzNDEzOSIgcG9pbnRzPSIzMzAuOSw1MTMuNSAyOTUuNyw0OTMuOCAyOTUuNyw0MjcuNSAzMzAuOSw0NDcuMiAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiNGMzQxMzkiIHBvaW50cz0iMzMxLjksMjcxLjQgMjQzLjUsMjIwLjMgMjQzLjUsMTU0IDMzMS45LDIwNS4xIAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0YzNDEzOSIgcG9pbnRzPSIxMjkuNiwzMTcuMiA5MS40LDI5NS4xIDkxLjQsMjI4LjggMTI5LjYsMjUwLjkgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjRjM0MTM5IiBwb2ludHM9IjIzMC44LDM3NS42IDE0Mi40LDMyNC41IDE0Mi40LDI1OC4yIDIzMC44LDMwOS4zIAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0YzNDEzOSIgcG9pbnRzPSIzMzEuOSw0MzQgMjQzLjUsMzgyLjkgMjQzLjUsMzE2LjYgMzMxLjksMzY3LjcgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjRjM0MTM5IiBwb2ludHM9IjIzMC44LDIxMi45IDE0Mi40LDE2MS45IDE0Mi40LDk1LjYgMjMwLjgsMTQ2LjcgCQkiLz4KCTwvZz4KCTxwb2x5Z29uIGZpbGw9IiM3RjFBMEEiIHBvaW50cz0iMTUwLjIsOTEuMSAxNDIuNCw5NS42IDIzMC44LDE0Ni43IDIzMC44LDIxMi45IDIzOC42LDIwOC41IDIzOC42LDE0Mi4yIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM3RjFBMEEiIHBvaW50cz0iMjUxLjQsMTQ5LjUgMjQzLjUsMTU0IDMzMS45LDIwNS4xIDMzMS45LDI3MS40IDMzOS44LDI2Ni45IDMzOS44LDIwMC42IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNGNzdGN0YiIHBvaW50cz0iMTI5LjYsODguMyAyMjMuOCwzMy42IDE4NS4zLDExLjYgOTEuNCw2NiAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjRjc3RjdGIiBwb2ludHM9IjE0Mi40LDk1LjYgMjM2LjYsNDEgMzI1LDkyIDIzMC44LDE0Ni43IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNGNzdGN0YiIHBvaW50cz0iMjQzLjUsMTU0IDMzNy43LDk5LjQgNDI2LjEsMTUwLjQgMzMxLjksMjA1LjEgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzdGMUEwQSIgcG9pbnRzPSIzMzEuNCwyNzAuOSA0MjUuNiwyMTYuMyA0MjUuNiwxNTAgMzMxLjQsMjA0LjYgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzdGMUEwQSIgcG9pbnRzPSIzMzEuNCwzNTEuMyA0MjUuNiwyOTYuNiA0MjUuNiwyMzAuMyAzMzEuNCwyODUgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzdGMUEwQSIgcG9pbnRzPSIzMzEuNCw0MzMuOCA0MjUuNiwzNzkuMSA0MjUuNiwzMTIuOCAzMzEuNCwzNjcuNSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjN0YxQTBBIiBwb2ludHM9IjMzMS40LDUxMy45IDQyNS42LDQ1OS4zIDQyNS42LDM5MyAzMzEuNCw0NDcuNiAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjN0YxQTBBIiBwb2ludHM9IjQyNi4xLDE1MC40IDQyNi4xLDE1OC4xIDMzMS45LDIxMi43IDMzMS45LDIwNS4xIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM3RjFBMEEiIHBvaW50cz0iMjIzLjcsMzMuNyAyMjMuNyw0MSAxMjkuNiw5NS42IDEyOS42LDg4LjMgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzdGMUEwQSIgcG9pbnRzPSIyMzAuOCwxNDYuNyAyMzAuOCwxNTQgMzI1LDk5LjQgMzI1LDkyLjEgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzZCMEMwMyIgcG9pbnRzPSI0MjUuNiwyMjQuNSAzMjYuNCwyODEuNyAzMzEuNCwyODUgNDI1LjYsMjMwLjMgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzZCMEMwMyIgcG9pbnRzPSI0MjUuNiwzMDcuMyAzMjYuNCwzNjQuNSAzMzEuNCwzNjcuOCA0MjUuNiwzMTMuMiAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjNkIwQzAzIiBwb2ludHM9IjQyNS42LDM4Ny4xIDMyNi40LDQ0NC4zIDMzMS40LDQ0Ny42IDQyNS42LDM5MyAJIi8+Cgk8cGF0aCBvcGFjaXR5PSIwLjU5IiBmaWxsPSIjMjMxRjIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgZD0iTTIxMy43LDUxMmw1MS44LDMuMmwyNy44LTE2LjFjMC0zNi42LDAtNjAuMywwLTk2LjkKCQljMC03LjksMC0xOC45LTUuNy0yOC41Yy02LjUtMTEtOS4zLTExLjctMTYuOC0xNi4xYy0yOC42LTE2LjctNzUuMi00My40LTEwMy43LTYwYy0yLjksNS01LjgsNS4xLTguNywxMC4xTDIxMy43LDUxMnoiLz4KCTxnIGlkPSJMYXllcl8yXzFfIj4KCQk8Zz4KCQkJPHBhdGggZmlsbD0iI0ZGOTYwMCIgZD0iTTI1Ny41LDM3OC40djk2LjhjMCw0LjktMS42LDguNC00LjIsMTBsLTM2LjQsMjFjMi41LTEuNiw0LjEtNS4xLDQuMS0xMHYtOTYuOGMwLTkuMi01LjYtMjAtMTIuNS0yNAoJCQkJbC04Mi40LTQ3LjZjLTIuNy0xLjYtNS4zLTEuOS03LjMtMS4xbDAsMGwzNC44LTIwLjFjMi4zLTEuOCw1LjUtMiw5LDAuMWw4Mi40LDQ3LjZjMy4zLDEuOSw2LjIsNS4zLDguNSw5LjMKCQkJCUMyNTUuOSwzNjguMiwyNTcuNSwzNzMuNSwyNTcuNSwzNzguNHoiLz4KCQk8L2c+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiNGRkQ0NEQiIGQ9Ik0yMjEsNDQ2di00Ni42YzAtOS4yLTUuNi0yMC0xMi41LTI0bC04Mi40LTQ3LjZjLTIuNy0xLjYtNS4zLTEuOS03LjMtMS4xbDAsMGwzNC44LTIwLjEKCQkJCWMyLjMtMS44LDUuNS0yLDksMC4xbDgyLjQsNDcuNmMzLjMsMS45LDYuMiw1LjMsOC41LDkuM0MyNTEuOCwzOTUsMjM5LjksNDIzLjUsMjIxLDQ0NnoiLz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIyMy40LDM3NC42Yy0wLjIsMC0wLjQsMC0wLjYsMGgtMC4xaC0wLjlsMCwwYy0zLjUtMC4yLTYuOS0xLjItOS42LTIuOGMtMy43LTIuMS01LjYtNS4xLTUtOHYtMzYuMwoJCQkJCWMwLTIwLjItMTIuMy00My42LTI3LjQtNTIuNGMtMy43LTIuMS03LjItMy4yLTEwLjYtMy4yYy0wLjIsMC0wLjUsMC0wLjcsMGMtMi43LDQuMS00LjEsOS45LTQuMSwxNi44djM2LjQKCQkJCQljMC4yLDIuNC0xLjEsNC41LTMuNyw2Yy0wLjQsMC4zLTAuOSwwLjUtMS40LDAuN2MtMC4zLDAuMS0wLjcsMC4zLTEsMC40cy0wLjcsMC4yLTEuMSwwLjNjLTAuNSwwLjEtMS4xLDAuMy0xLjcsMC40aC0wLjEKCQkJCQljLTAuMywwLTAuNiwwLjEtMC45LDAuMWgtMC4yYy0wLjMsMC0wLjYsMC4xLTAuOCwwLjFoLTAuMmMtMC4zLDAtMC41LDAtMC44LDBIMTUyYy0wLjIsMC0wLjQsMC0wLjYsMHYtMC45djAuOWgtMC4xaC0wLjlsMCwwCgkJCQkJYy0zLjUtMC4yLTYuOS0xLjItOS42LTIuOGMtMy42LTIuMS01LjUtNS01LjEtNy45di0zNy41YzAtMTAuNSwyLjEtMTkuNyw2LjEtMjYuNWMwLjEtMC4yLDEuNi0zLjUsNS4xLTcuM2wwLjMtMC4zCgkJCQkJYzAuMy0wLjMsMC42LTAuNiwwLjktMC45YzAuMy0wLjMsMC42LTAuNiwwLjktMC45YzAuMy0wLjMsMC42LTAuNiwxLTAuOWMwLjMtMC4zLDAuNy0wLjYsMS0wLjljMC4yLTAuMSwwLjMtMC4zLDAuNS0wLjQKCQkJCQljMCwwLDAuMi0wLjEsMC4yLTAuMnYtMC41aDAuNmMwLjEtMC4xLDAuNC0wLjMsMC40LTAuM2MwLjItMC4xLDAuMy0wLjIsMC41LTAuNGMwLjItMC4xLDAuNC0wLjMsMC42LTAuNAoJCQkJCWMwLjItMC4xLDAuNC0wLjMsMC42LTAuNGMwLDAsMC41LTAuMywwLjctMC40bDAuMy0wLjJjMC41LTAuMywxLTAuNiwxLjUtMC44YzAuMS0wLjEsMC4zLTAuMiwwLjQtMC4yYzAuMS0wLjEsMC4yLTAuMSwwLjQtMC4yCgkJCQkJYzAuMy0wLjEsMC42LTAuMywwLjktMC40YzAuMi0wLjEsMC4zLTAuMSwwLjUtMC4yYzAuMSwwLDAuMi0wLjEsMC4zLTAuMWMwLjEtMC4xLDAuMy0wLjEsMC41LTAuMmMwLjItMC4xLDAuNS0wLjIsMC43LTAuMwoJCQkJCXMwLjUtMC4yLDAuNy0wLjNoMC4xYzAuMy0wLjEsMC41LTAuMiwwLjctMC4zYzAuMy0wLjEsMC41LTAuMiwwLjgtMC4zaDAuMWMwLjItMC4xLDAuNS0wLjEsMC43LTAuMmMwLjItMC4xLDAuNS0wLjEsMC43LTAuMgoJCQkJCWwwLjMtMC4xYzAuMi0wLjEsMC40LTAuMSwwLjYtMC4yYzAuMi0wLjEsMC41LTAuMSwwLjctMC4yYzAsMCwwLjEsMCwwLjIsMGMwLjMtMC4xLDAuNS0wLjEsMC44LTAuMmMwLjMtMC4xLDAuNi0wLjEsMC45LTAuMQoJCQkJCWMxLjktMC41LDMuOC0wLjcsNS44LTAuN2MxLjMsMCwyLjUsMC4xLDMuOCwwLjNjNC41LDAuNiw5LjIsMi4zLDE0LDUuMWMyNC4zLDE0LjEsNDQuMiw1MS45LDQ0LjIsODQuM3YzOS40bC0wLjEtMC4xCgkJCQkJYy0wLjQsMS43LTEuNiwzLjItMy42LDQuNGMtMC40LDAuMy0wLjksMC41LTEuNCwwLjdjLTAuNCwwLjEtMC43LDAuMy0xLDAuNHMtMC43LDAuMi0xLjEsMC4zYy0wLjUsMC4xLTEuMSwwLjMtMS43LDAuNGgtMC4xCgkJCQkJYy0wLjMsMC0wLjYsMC4xLTAuOSwwLjFoLTAuMmMtMC4zLDAtMC42LDAuMS0wLjgsMC4xaC0wLjJjLTAuMywwLTAuNiwwLTAuOSwwTDIyMy40LDM3NC42eiIvPgoJCQk8L2c+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTE3My45LDI0MC4yYzEuMiwwLDIuNCwwLjEsMy43LDAuM2M0LjMsMC42LDguOSwyLjIsMTMuNiw1YzI0LjEsMTMuOSw0My43LDUxLjMsNDMuNyw4My41djM3LjdsMCwwCgkJCQkJYzAuMiwxLjktMC45LDMuOC0zLjMsNS4yYy0wLjQsMC4yLTAuOSwwLjUtMS4zLDAuNmMtMC4zLDAuMS0wLjYsMC4yLTEsMC40Yy0wLjMsMC4xLTAuNywwLjItMSwwLjNjLTAuNSwwLjEtMSwwLjItMS42LDAuM2wwLDAKCQkJCQljLTAuMywwLjEtMC42LDAuMS0xLDAuMWMtMC4xLDAtMC4xLDAtMC4yLDBjLTAuMywwLTAuNSwwLjEtMC44LDAuMWMtMC4xLDAtMC4xLDAtMC4yLDBjLTAuMywwLTAuNSwwLTAuOCwwYy0wLjEsMC0wLjEsMC0wLjIsMAoJCQkJCWMtMC4xLDAtMC4yLDAtMC4zLDBjLTAuMiwwLTAuNCwwLTAuNiwwbDAsMGwwLDBsMCwwbDAsMGMtMy41LTAuMS03LjItMS0xMC0yLjdjLTMuNS0yLTUuMS00LjctNC42LTcuMXYtMzYuMwoJCQkJCWMwLTIwLjUtMTIuNS00NC4zLTI3LjgtNTMuMmMtMy45LTIuMy03LjctMy4zLTExLTMuM2MtMC40LDAtMC44LDAtMS4yLDBsMCwwbDAsMGMtMi45LDQuMi00LjUsMTAuMi00LjUsMTcuN3YzNi41CgkJCQkJYzAuMiwxLjktMC45LDMuOC0zLjMsNS4xYy0wLjQsMC4yLTAuOSwwLjUtMS4zLDAuNmMtMC4zLDAuMS0wLjYsMC4yLTEsMC40Yy0wLjMsMC4xLTAuNywwLjItMSwwLjNjLTAuNSwwLjEtMSwwLjItMS42LDAuM2wwLDAKCQkJCQljLTAuMywwLjEtMC42LDAuMS0xLDAuMWMtMC4xLDAtMC4xLDAtMC4yLDBjLTAuMywwLTAuNSwwLjEtMC44LDAuMWMtMC4xLDAtMC4yLDAtMC4yLDBjLTAuMywwLTAuNSwwLTAuOCwwYy0wLjEsMC0wLjIsMC0wLjMsMAoJCQkJCXMtMC4xLDAtMC4yLDBjLTAuMiwwLTAuNCwwLTAuNiwwbDAsMGwwLDBjMCwwLDAsMC0wLjEsMGwwLDBjLTMuNS0wLjEtNy4xLTEtMTAtMi43Yy0zLjQtMi01LTQuNi00LjYtN3YtMzcuNgoJCQkJCWMwLTEwLjgsMi4yLTE5LjYsNi0yNi4xbDAsMGMwLDAsMS41LTMuMyw1LTdjMC4xLTAuMSwwLjItMC4yLDAuMy0wLjNjMC4zLTAuMywwLjYtMC42LDAuOS0wLjljMC4zLTAuMywwLjYtMC42LDAuOS0wLjgKCQkJCQljMC4zLTAuMywwLjYtMC42LDAuOS0wLjhjMC4zLTAuMywwLjctMC42LDEtMC44YzAuMi0wLjEsMC40LTAuMywwLjUtMC40YzAuMi0wLjEsMC40LTAuMywwLjUtMC40bDAsMGMwLjItMC4xLDAuMy0wLjIsMC41LTAuNAoJCQkJCWwwLjEtMC4xYzAuMi0wLjEsMC4zLTAuMiwwLjUtMC40YzAuMi0wLjEsMC40LTAuMywwLjYtMC40YzAuMi0wLjEsMC40LTAuMywwLjYtMC40YzAuMi0wLjEsMC40LTAuMywwLjYtMC40CgkJCQkJYzAuMSwwLDAuMi0wLjEsMC4zLTAuMWMwLjUtMC4zLDEtMC42LDEuNS0wLjhjMC4xLTAuMSwwLjMtMC4xLDAuNC0wLjJjMC4xLTAuMSwwLjItMC4xLDAuMy0wLjJjMC4zLTAuMSwwLjYtMC4zLDAuOS0wLjQKCQkJCQljMC4yLTAuMSwwLjMtMC4xLDAuNS0wLjJjMC4xLDAsMC4yLTAuMSwwLjMtMC4xYzAuMi0wLjEsMC4zLTAuMSwwLjUtMC4yYzAuMi0wLjEsMC41LTAuMiwwLjctMC4zczAuNS0wLjIsMC43LTAuM2wwLDAKCQkJCQljMC4yLTAuMSwwLjUtMC4yLDAuNy0wLjNsMCwwYzAuMi0wLjEsMC41LTAuMiwwLjgtMC4yYzAsMCwwLDAsMC4xLDBjMC4yLTAuMSwwLjUtMC4xLDAuNy0wLjJjMC4yLTAuMSwwLjUtMC4xLDAuNy0wLjIKCQkJCQljMC4xLDAsMC4yLDAsMC4zLTAuMWMwLjItMC4xLDAuNC0wLjEsMC42LTAuMWMwLjItMC4xLDAuNS0wLjEsMC43LTAuMmMwLjEsMCwwLjEsMCwwLjIsMGMwLjMtMC4xLDAuNS0wLjEsMC44LTAuMgoJCQkJCWMwLjMtMC4xLDAuNi0wLjEsMC45LTAuMUMxNzAuMSwyNDAuNCwxNzIsMjQwLjIsMTczLjksMjQwLjIgTTE3My45LDIzOC4zTDE3My45LDIzOC4zYy0yLjEsMC00LjEsMC4yLTYsMC43CgkJCQkJYy0wLjMsMC0wLjYsMC4xLTAuOCwwLjFjLTAuMywwLTAuNSwwLjEtMC44LDAuMmMtMC4xLDAtMC4xLDAtMC4yLDBjLTAuMiwwLjEtMC41LDAuMS0wLjcsMC4yYy0wLjIsMC4xLTAuNCwwLjEtMC43LDAuMgoJCQkJCWwtMC4yLDAuMWgtMC4xYy0wLjMsMC4xLTAuNSwwLjEtMC44LDAuMmMtMC4yLDAuMS0wLjUsMC4xLTAuNywwLjJoLTAuMWwwLDBsMCwwYy0wLjMsMC4xLTAuNSwwLjItMC44LDAuM2wwLDBsMCwwCgkJCQkJYy0wLjIsMC4xLTAuNSwwLjItMC43LDAuM2gtMC4xYy0wLjIsMC4xLTAuNSwwLjItMC43LDAuM2MtMC4zLDAuMS0wLjUsMC4yLTAuOCwwLjNjLTAuMiwwLjEtMC4zLDAuMS0wLjUsMC4yCgkJCQkJYy0wLjEsMC0wLjIsMC4xLTAuMywwLjFjLTAuMiwwLjEtMC4zLDAuMS0wLjUsMC4yYy0wLjMsMC4xLTAuNiwwLjMtMC45LDAuNGMtMC4xLDAuMS0wLjIsMC4xLTAuNCwwLjJjLTAuMiwwLjEtMC4zLDAuMi0wLjUsMC4yCgkJCQkJYy0wLjUsMC4zLTEuMSwwLjYtMS42LDAuOWwtMC4xLDAuMWwtMC4xLDAuMWwwLDBsMCwwYy0wLjIsMC4xLTAuNCwwLjItMC42LDAuM2gtMC4xbDAsMGwwLDBjLTAuMiwwLjEtMC40LDAuMy0wLjYsMC40CgkJCQkJYy0wLjIsMC4xLTAuNCwwLjMtMC42LDAuNGMtMC4yLDAuMS0wLjQsMC4yLTAuNSwwLjRsLTAuMSwwLjFsMCwwbDAsMEgxNTF2MWMtMC4xLDAuMS0wLjMsMC4yLTAuNCwwLjNjLTAuNCwwLjMtMC43LDAuNi0xLjEsMC45CgkJCQkJYy0wLjQsMC4zLTAuNywwLjYtMSwwLjljLTAuMywwLjMtMC42LDAuNi0wLjksMC45Yy0wLjMsMC4zLTAuNiwwLjYtMC45LDFjLTAuMSwwLjEtMC4yLDAuMi0wLjMsMC40Yy0zLjQsMy43LTUsNy01LjMsNy41CgkJCQkJYy00LjEsNi45LTYuMiwxNi4yLTYuMiwyNi45djM3LjRjLTAuNSwzLjIsMS42LDYuNSw1LjUsOC44YzIuNiwxLjUsNS44LDIuNSw5LjEsMi44djAuMWwxLjgsMC4xaDAuMWwwLDBsMCwwYzAuMiwwLDAuNCwwLDAuNiwwCgkJCQkJaDAuMmMwLjEsMCwwLjIsMCwwLjMsMGMwLjMsMCwwLjYsMCwwLjgsMGgwLjFjMC4xLDAsMC4xLDAsMC4yLDBjMC4zLDAsMC42LDAsMC45LTAuMWgwLjFoMC4xYzAuMywwLDAuNi0wLjEsMC45LTAuMWwwLDBoMC4yCgkJCQkJYzAuNi0wLjEsMS4yLTAuMiwxLjgtMC40YzAuNC0wLjEsMC44LTAuMiwxLjEtMC4zYzAuNC0wLjEsMC43LTAuMywxLjEtMC40YzAuNi0wLjIsMS4xLTAuNSwxLjUtMC44YzIuOS0xLjcsNC40LTQuMiw0LjItNi45CgkJCQkJVjI4OWMwLTYuNCwxLjMtMTEuOSwzLjctMTUuOGMwLjEsMCwwLjEsMCwwLjIsMGMzLjIsMCw2LjUsMSwxMC4xLDMuMWMxNC44LDguNiwyNi45LDMxLjcsMjYuOSw1MS41VjM2NAoJCQkJCWMtMC42LDMuMywxLjUsNi42LDUuNSw4LjljMi42LDEuNSw1LjgsMi41LDkuMSwyLjh2MC4xbDEuOCwwLjFoMC4xbDAsMGMwLjIsMCwwLjQsMCwwLjYsMGMwLjEsMCwwLjIsMCwwLjMsMHMwLjEsMCwwLjIsMAoJCQkJCWMwLjMsMCwwLjYsMCwwLjksMGgwLjFoMC4xYzAuMywwLDAuNiwwLDAuOS0wLjFoMC4xaDAuMWMwLjMsMCwwLjYtMC4xLDAuOS0wLjFsMCwwbDAsMGwwLDBoMC4xYzAuNi0wLjEsMS4yLTAuMiwxLjgtMC40CgkJCQkJYzAuNC0wLjEsMC43LTAuMiwxLjEtMC4zYzAuNC0wLjEsMC43LTAuMiwxLjEtMC40YzAuNi0wLjIsMS4xLTAuNSwxLjUtMC44YzEuNy0xLDMtMi4zLDMuNi0zLjhsMC42LDAuNFYzNjd2LTM3LjcKCQkJCQljMC0xNS45LTQuNi0zMy40LTEzLTQ5LjRjLTguNC0xNi4xLTE5LjYtMjguNy0zMS42LTM1LjdjLTQuOS0yLjgtOS43LTQuNi0xNC4zLTUuMkMxNzYuNSwyMzguNCwxNzUuMiwyMzguMywxNzMuOSwyMzguMwoJCQkJCUwxNzMuOSwyMzguM3oiLz4KCQkJPC9nPgoJCTwvZz4KCQk8Zz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSIjRDFEM0Q0IiBkPSJNMTY4LDI3MS4xTDE2OCwyNzEuMUwxNjgsMjcxLjFjLTIuOSw0LjItNC41LDEwLjItNC41LDE3Ljd2MzYuNWMwLjIsMS45LTAuOSwzLjgtMy4zLDUuMQoJCQkJCWMtMC40LDAuMi0wLjksMC41LTEuMywwLjZjLTAuMywwLjEtMC42LDAuMi0xLDAuNGMtMC4zLDAuMS0wLjcsMC4yLTEsMC4zYy0wLjUsMC4xLTEsMC4yLTEuNiwwLjNsMCwwYy0xLjMsMC4yLTIuNywwLjMtNC4xLDAuMwoJCQkJCXYtMzQuOGMwLTcuNSwxLjctMTMuNSw0LjUtMTcuN0MxNTcuNSwyNzYuNiwxNjMuNCwyNzEuNywxNjgsMjcxLjFDMTY3LjksMjcxLjEsMTY3LjksMjcxLjEsMTY4LDI3MS4xeiIvPgoJCQk8L2c+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iI0QxRDNENCIgZD0iTTIzNC45LDMyOC45YzAtMzIuMi0xOS42LTY5LjUtNDMuNy04My41Yy00LjgtMi43LTkuMy00LjQtMTMuNi01Yy0zLjMtMC41LTYuNC0wLjMtOS4zLDAuNAoJCQkJCWMtMTAsMS42LTE2LjcsNi43LTIwLjcsMTEuMWMyLjUtMS4xLDUuMy0xLjksOC41LTIuNGMyLjktMC43LDYtMC45LDkuMy0wLjRjNC4zLDAuNiw4LjksMi4yLDEzLjYsNQoJCQkJCWMyNC4xLDEzLjksNDMuNyw1MS4zLDQzLjcsODMuNXYzNi4xYzMuMywwLjEsNi42LTAuNSw5LTEuOXMzLjQtMy4yLDMuMy01LjJsMCwwTDIzNC45LDMyOC45TDIzNC45LDMyOC45eiIvPgoJCQk8L2c+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xNzQuMSwyNDAuMgoJCQkJYzEuMiwwLDIuNCwwLjEsMy43LDAuM2MwLjcsMC4xLDEuNCwwLjIsMi4xLDAuNGMyLjksMC42LDUuOCwxLjcsOC45LDMuMmMwLjksMC40LDEuOCwwLjksMi43LDEuNGMxNSw4LjYsMjguMSwyNi4zLDM2LDQ2LjEKCQkJCWMwLjIsMC42LDAuNSwxLjIsMC43LDEuOGMwLjEsMC4yLDAuMSwwLjMsMC4yLDAuNWM0LjMsMTEuNSw2LjgsMjMuNiw2LjgsMzVsMCwwdjE5LjdsMTAsNS44YzMuMywxLjksNi4yLDUuMyw4LjUsOS4zCgkJCQljMi41LDQuNSw0LjEsOS44LDQuMSwxNC43djk2LjhjMCw0LjktMS42LDguNC00LjIsMTBsLTM2LjQsMjFjLTEsMC43LTIuMiwxLTMuNSwxYy0xLjUsMC0zLjItMC41LTUtMS41bC04Mi40LTQ3LjYKCQkJCWMtNi45LTQtMTIuNS0xNC43LTEyLjUtMjR2LTcuOHYtODkuMWMwLTUuNiwyLjEtOS4zLDUuMi0xMC42bDAsMGwwLDBsMTcuOC0xMC4zdi0zMS41YzAtMTAuOCwyLjItMTkuNiw2LTI2LjFsMCwwCgkJCQljMCwwLDEuNS0zLjMsNS03YzAuMS0wLjEsMC4yLTAuMiwwLjMtMC4zczAuMi0wLjIsMC4yLTAuMmMwLjItMC4yLDAuMy0wLjQsMC41LTAuNWMwLjEtMC4xLDAuMS0wLjEsMC4xLTAuMgoJCQkJYzAuMS0wLjEsMC4xLTAuMSwwLjItMC4yYzAuMS0wLjEsMC4zLTAuMywwLjUtMC40YzAuMS0wLjEsMC4yLTAuMiwwLjItMC4yYzAuMS0wLjEsMC4zLTAuMywwLjQtMC40bDAuMS0wLjEKCQkJCWMwLjEtMC4xLDAuMy0wLjIsMC40LTAuNGMwLjEtMC4xLDAuMS0wLjEsMC4yLTAuMmMwLjItMC4yLDAuNC0wLjMsMC42LTAuNWMwLjEtMC4xLDAuMS0wLjEsMC4yLTAuMmMwLjEtMC4xLDAuMi0wLjIsMC40LTAuMwoJCQkJYzAuMS0wLjEsMC4yLTAuMiwwLjMtMC4zczAuMi0wLjIsMC40LTAuM2wwLDBjMC4yLTAuMSwwLjMtMC4yLDAuNS0wLjRsMCwwYzAsMCwwLjEsMCwwLjEtMC4xbDAsMGMwLjItMC4xLDAuMy0wLjIsMC41LTAuNAoJCQkJYzAuMi0wLjEsMC4zLTAuMiwwLjUtMC4zYzAuMSwwLDAuMS0wLjEsMC4yLTAuMWMwLjItMC4xLDAuMy0wLjIsMC41LTAuM3MwLjQtMC4yLDAuNi0wLjNsMC4xLTAuMWMwLjEsMCwwLjEtMC4xLDAuMi0wLjEKCQkJCWMwLjMtMC4yLDAuNi0wLjQsMC45LTAuNWMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuMXMwLjItMC4xLDAuMy0wLjFjMC4xLTAuMSwwLjMtMC4xLDAuNC0wLjJjMC4xLTAuMSwwLjItMC4xLDAuMy0wLjJoMC4xCgkJCQljMC4xLDAsMC4yLTAuMSwwLjItMC4xYzAuMi0wLjEsMC40LTAuMiwwLjYtMC4zYzAuMi0wLjEsMC4zLTAuMSwwLjUtMC4yYzAuMSwwLDAuMS0wLjEsMC4yLTAuMWgwLjFjMC4yLTAuMSwwLjMtMC4xLDAuNS0wLjIKCQkJCWMwLjItMC4xLDAuNS0wLjIsMC43LTAuM2MwLjEsMCwwLjItMC4xLDAuMi0wLjFzMC4xLDAsMC4xLTAuMWMwLjEsMCwwLjItMC4xLDAuMy0wLjFsMCwwYzAuMi0wLjEsMC41LTAuMiwwLjctMC4zbDAsMAoJCQkJYzAuMSwwLDAuMi0wLjEsMC4zLTAuMWgwLjFjMC4xLDAsMC4yLTAuMSwwLjMtMC4xYzAsMCwwLDAsMC4xLDBjMC4yLTAuMSwwLjUtMC4xLDAuNy0wLjJjMC4yLTAuMSwwLjQtMC4xLDAuNi0wLjJsMCwwCgkJCQljMC4xLDAsMC4xLDAsMC4yLDBjMC4xLDAsMC4yLDAsMC4zLTAuMWMwLjItMC4xLDAuNC0wLjEsMC42LTAuMWMwLjItMC4xLDAuNS0wLjEsMC43LTAuMmMwLjEsMCwwLjEsMCwwLjIsMAoJCQkJYzAuMy0wLjEsMC41LTAuMSwwLjgtMC4yYzAuMy0wLjEsMC42LTAuMSwwLjktMC4xQzE3MC4zLDI0MC40LDE3Mi4xLDI0MC4yLDE3NC4xLDI0MC4yIE0xNjguMiwyNzEuMUwxNjguMiwyNzEuMUwxNjguMiwyNzEuMQoJCQkJYy0yLjksNC4yLTQuNSwxMC4yLTQuNSwxNy43djE4LjZsNDQuNywyNS44di01LjZjMC0yMC41LTEyLjUtNDQuMy0yNy44LTUzLjJjLTMuOS0yLjMtNy43LTMuMy0xMS0zLjMKCQkJCUMxNjksMjcxLDE2OC42LDI3MSwxNjguMiwyNzEuMSBNMTc0LjEsMjM1LjRjLTIuMywwLTQuNSwwLjMtNi42LDAuOGMtMC4zLDAtMC41LDAuMS0wLjgsMC4xYy0wLjMsMC4xLTAuNiwwLjEtMC44LDAuMgoJCQkJYy0wLjEsMC0wLjIsMC0wLjMsMC4xYy0wLjMsMC4xLTAuNSwwLjEtMC44LDAuMmMtMC4yLDAuMS0wLjUsMC4xLTAuNywwLjJsLTAuMywwLjFjMCwwLDAsMC0wLjEsMGgtMC4xbDAsMGwwLDBoLTAuMQoJCQkJYy0wLjIsMC0wLjQsMC4xLTAuNSwwLjFjLTAuMiwwLjEtMC41LDAuMS0wLjgsMC4yaC0wLjFjLTAuMSwwLTAuMiwwLjEtMC4zLDAuMWgtMC4xbC0wLjIsMC4xaC0wLjFjLTAuMSwwLTAuMiwwLjEtMC4zLDAuMWwwLDAKCQkJCWMtMC4zLDAuMS0wLjUsMC4yLTAuOCwwLjNjMCwwLTAuMSwwLTAuMSwwLjFjLTAuMSwwLTAuMiwwLjEtMC4yLDAuMWgtMC4xbC0wLjIsMC4xbDAsMGMtMC4xLDAtMC4yLDAuMS0wLjIsMC4xCgkJCQljLTAuMywwLjEtMC41LDAuMi0wLjgsMC4zYy0wLjIsMC4xLTAuNCwwLjEtMC41LDAuMmwwLDBsMCwwYy0wLjEsMC0wLjIsMC4xLTAuMywwLjFjLTAuMiwwLjEtMC4zLDAuMi0wLjUsMC4yCgkJCQljLTAuMiwwLjEtMC4zLDAuMi0wLjUsMC4ybC0wLjEsMC4xaC0wLjFjLTAuMSwwLTAuMSwwLjEtMC4yLDAuMWMwLDAtMC4xLDAtMC4xLDAuMWMtMC4xLDAuMS0wLjMsMC4xLTAuNCwwLjIKCQkJCWMtMC4yLDAuMS0wLjMsMC4yLTAuNSwwLjJjLTAuMSwwLTAuMiwwLjEtMC4yLDAuMWgtMC4xaC0wLjFjLTAuMSwwLTAuMiwwLjEtMC4zLDAuMWMtMC40LDAuMi0wLjgsMC40LTEuMSwwLjYKCQkJCWMtMC4xLDAtMC4xLDAuMS0wLjIsMC4xaC0wLjFsLTAuMSwwLjFsMCwwYy0wLjIsMC4xLTAuNCwwLjItMC42LDAuNGMwLDAsMCwwLTAuMSwwYy0wLjIsMC4xLTAuNCwwLjItMC42LDAuNGwtMC4yLDAuMgoJCQkJYy0wLjIsMC4xLTAuNCwwLjItMC41LDAuNGMtMC4yLDAuMS0wLjQsMC4zLTAuNiwwLjRsMCwwYzAsMCwwLDAtMC4xLDBjMCwwLDAsMC0wLjEsMGwwLDBsMCwwYy0wLjIsMC4xLTAuMywwLjItMC41LDAuNGwwLDAKCQkJCWMtMC4xLDAuMS0wLjIsMC4yLTAuMywwLjJsLTAuMSwwLjFjLTAuMSwwLjEtMC4zLDAuMi0wLjQsMC4zaC0wLjFjLTAuMSwwLjEtMC4yLDAuMi0wLjQsMC4zYy0wLjEsMC4xLTAuMSwwLjEtMC4yLDAuMmwwLDBsMCwwCgkJCQljLTAuMiwwLjItMC40LDAuNC0wLjcsMC42bDAsMGMtMC4xLDAuMS0wLjIsMC4xLTAuMiwwLjJjLTAuMSwwLjEtMC4zLDAuMy0wLjQsMC40bDAsMGgtMC4xbDAsMGMtMC4yLDAuMS0wLjMsMC4zLTAuNSwwLjRsMCwwCgkJCQljLTAuMSwwLjEtMC4xLDAuMS0wLjIsMC4ybC0wLjEsMC4xYy0wLjIsMC4yLTAuMywwLjMtMC41LDAuNWwwLDBjLTAuMSwwLjEtMC4xLDAuMS0wLjIsMC4yYzAsMC0wLjEsMC4xLTAuMiwwLjJsMCwwbDAsMAoJCQkJYy0wLjIsMC4yLTAuNCwwLjQtMC42LDAuNmwwLDBjLTAuMSwwLjEtMC4xLDAuMS0wLjIsMC4ybDAsMGwwLDBjLTAuMSwwLjEtMC4yLDAuMi0wLjMsMC4zYy0zLjUsMy44LTUuMiw3LjEtNS43LDgKCQkJCWMtNC4zLDcuNC02LjYsMTcuMS02LjYsMjguM3YyOC43bC0xNS4yLDguOGMtNC45LDIuMS03LjgsNy42LTcuOCwxNC44VjQyNnY3LjhjMCwxMC45LDYuNiwyMy4yLDE0LjksMjguMWw4Mi40LDQ3LjYKCQkJCWMyLjUsMS40LDQuOSwyLjEsNy4zLDIuMWMyLjEsMCw0LjItMC42LDYtMS43bDM2LjMtMjFsMC4xLTAuMWM0LjEtMi42LDYuNC03LjYsNi40LTE0LjF2LTk2LjhjMC01LjUtMS43LTExLjYtNC43LTE3CgkJCQljLTIuNy00LjktNi40LTguOS0xMC4zLTExLjFsLTcuNy00LjR2LTE3YzAtMTEuNi0yLjQtMjQuMy03LjEtMzYuN2wtMC4xLTAuMmMwLTAuMS0wLjEtMC4zLTAuMS0wLjRjLTAuMi0wLjYtMC41LTEuMi0wLjctMS45CgkJCQljLTQuMS0xMC4zLTkuNi0yMC4xLTE2LTI4LjRjLTYuNy04LjctMTQuMy0xNS42LTIyLTIwLjFjLTEtMC42LTItMS4xLTIuOS0xLjZjLTMuNC0xLjctNi43LTIuOS0xMC0zLjZjLTAuOC0wLjItMS42LTAuMy0yLjQtMC40CgkJCQlDMTc3LDIzNS41LDE3NS41LDIzNS40LDE3NC4xLDIzNS40TDE3NC4xLDIzNS40eiBNMTY4LjQsMzA0LjZ2LTE1LjhjMC01LjEsMC45LTkuNSwyLjUtMTIuOWMyLjIsMC4zLDQuNywxLjEsNy4yLDIuNgoJCQkJYzEzLjEsNy42LDI0LjMsMjguMywyNS40LDQ2LjRMMTY4LjQsMzA0LjZMMTY4LjQsMzA0LjZ6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjRkZCQzAwIiBkPSJNMjIxLDM5OS40djk2LjhjMCw5LjItNS42LDEzLjUtMTIuNSw5LjVMMTY1LjcsNDgxbC0yNi41LTE1LjNsLTEyLjMtNy4xbC0wLjgtMC41CgkJCQljLTYuOS00LTEyLjUtMTQuNy0xMi41LTI0di05Ni44YzAtOS4yLDUuNi0xMy41LDEyLjUtOS41bDI1LjUsMTQuN2w0NC41LDI1LjdsMTIuMyw3LjFsMCwwQzIxNS40LDM3OS41LDIyMSwzOTAuMiwyMjEsMzk5LjR6Ii8+CgkJPC9nPgoJCTxwYXRoIGZpbGw9IiNGRkQ0NEQiIGQ9Ik0xOTYuMSwzNjguM2wtNjkuMiw5MC4zbC0wLjgtMC41Yy02LjktNC0xMi41LTE0LjctMTIuNS0yNHYtNDEuOWwzOC4xLTQ5LjZMMTk2LjEsMzY4LjN6Ii8+CgkJPHBhdGggZmlsbD0iI0ZGRDQ0RCIgZD0iTTIyMSwzOTkuNHY5LjVMMTY1LjcsNDgxbC0yNi41LTE1LjNsNjkuMi05MC4zQzIxNS40LDM3OS41LDIyMSwzOTAuMiwyMjEsMzk5LjR6Ii8+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yMTMuNSw1MDguMmMtMS43LDAtMy42LTAuNS01LjUtMS42TDEyNS42LDQ1OWMtNy4yLTQuMS0xMy0xNS4zLTEzLTI0Ljh2LTk2LjhjMC03LjIsMy4zLTExLjksOC41LTExLjkKCQkJCWMxLjcsMCwzLjYsMC41LDUuNSwxLjZsODIuNCw0Ny42YzcuMiw0LjEsMTMsMTUuMywxMywyNC44djk2LjhDMjIyLDUwMy41LDIxOC42LDUwOC4yLDIxMy41LDUwOC4yeiBNMTIxLjEsMzI3LjMKCQkJCWMtNCwwLTYuNiwzLjktNi42LDEwdjk2LjhjMCw4LjksNS40LDE5LjMsMTIuMSwyMy4xbDgyLjQsNDcuNmMxLjYsMC45LDMuMSwxLjQsNC41LDEuNGM0LDAsNi42LTMuOSw2LjYtMTB2LTk2LjgKCQkJCWMwLTguOS01LjQtMTkuMy0xMi4xLTIzLjFsLTgyLjQtNDcuNkMxMjQsMzI3LjgsMTIyLjUsMzI3LjMsMTIxLjEsMzI3LjN6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8Zz4KCQkJCTxwYXRoIGZpbGw9IiNGRjk2MDAiIGQ9Ik0xODQsNDA0LjhjMCw3LjctMywxMi44LTcuNiwxNHYyNS4zYzAsMS40LTAuMiwyLjYtMC41LDMuN2MtMS4yLDMuNy00LjQsNS04LjEsMi44CgkJCQkJYy00LjgtMi43LTguNi0xMC4xLTguNi0xNi41di0yNS4zYy00LjYtNi41LTcuNi0xNS03LjYtMjIuOGMwLTExLjgsNy4xLTE3LjQsMTYtMTIuNGMwLjEsMCwwLjIsMC4xLDAuMywwLjEKCQkJCQlDMTc2LjcsMzc5LDE4NCwzOTIuOSwxODQsNDA0Ljh6Ii8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTcxLjIsNDUyLjZjLTEuMywwLTIuNi0wLjQtMy45LTEuMmMtNS0yLjktOS4xLTEwLjYtOS4xLTE3LjN2LTI1Yy00LjgtNi45LTcuNi0xNS41LTcuNi0yMy4xCgkJCQkJYzAtNC41LDEtOC4zLDIuOS0xMXM0LjYtNC4yLDcuOC00LjJjMi4xLDAsNC40LDAuNiw2LjcsMS45YzAuMSwwLDAuMiwwLjEsMC4zLDAuMmM5LjIsNS4zLDE2LjcsMTkuNiwxNi43LDMxLjkKCQkJCQljMCw3LjYtMi44LDEzLTcuNiwxNC43djI0LjZjMCwxLjUtMC4yLDIuOC0wLjYsNEMxNzUuOCw0NTAuOSwxNzMuOCw0NTIuNiwxNzEuMiw0NTIuNnogTTE2MS4zLDM3Mi44Yy0yLjUsMC00LjcsMS4yLTYuMywzLjQKCQkJCQljLTEuNywyLjQtMi42LDUuOC0yLjYsOS45YzAsNy4zLDIuOCwxNS42LDcuNSwyMi4ybDAuMiwwLjJ2MjUuNmMwLDYsMy42LDEzLDguMSwxNS42YzEsMC42LDIsMC45LDIuOSwwLjkKCQkJCQljMS43LDAsMy4xLTEuMSwzLjgtMy4yYzAuMy0xLDAuNS0yLjEsMC41LTMuNHYtMjZsMC43LTAuMmM0LjMtMS4xLDYuOS02LDYuOS0xM2MwLTExLjYtNy4xLTI1LjItMTUuOC0zMC4yCgkJCQkJYy0wLjEsMC0wLjItMC4xLTAuMi0wLjFDMTY1LDM3My40LDE2My4xLDM3Mi44LDE2MS4zLDM3Mi44eiIvPgoJCQk8L2c+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTg0LDQwNC44YzAsNy43LTMsMTIuOC03LjYsMTR2MjUuM2MwLDEuNC0wLjIsMi42LTAuNSwzLjdjLTMuMS0zLjUtNS4zLTguOS01LjMtMTMuNnYtMjUuMwoJCQkJYy00LjYtNi41LTcuNi0xNS03LjYtMjIuOGMwLTUuOSwxLjctMTAuMiw0LjYtMTIuNGMwLjEsMCwwLjIsMC4xLDAuMywwLjFDMTc2LjcsMzc5LDE4NCwzOTIuOSwxODQsNDA0Ljh6Ii8+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"function-module\",\n \"name\": \"function-module\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxODMuMXB4IiBoZWlnaHQ9IjEzNi42cHgiIHZpZXdCb3g9IjAgMCAxODMuMSAxMzYuNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTgzLjEgMTM2LjYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfOCI+Cgk8ZyBpZD0iTGF5ZXJfMV8xXyI+CgkJPGcgaWQ9IkxheWVyXzMiPgoJCTwvZz4KCQk8ZyBpZD0iTGF5ZXJfNiI+CgkJPC9nPgoJCTxnIGlkPSJMYXllcl83Ij4KCQkJPHBvbHlnb24gb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSIxMTkuNCw3NS43IDEyNC44LDc1LjcgMTI4LjMsNjguNCAxNDMuNSw2Ni45IDE0Ni44LDU2LjUgMTM4LjYsMzkuOCAKCQkJCTg4LjIsNDAuNSAJCQkiLz4KCQk8L2c+CgkJPHBhdGggZmlsbD0iI0NFRDhFQiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMTYuMiw0My4zYy00LjEtMi4xLTEwLjEtMi0xMy40LDAuMgoJCQljLTIuNiwxLjctMi44LDQuMi0wLjcsNi4yYzMuMy0yLjEsOS4zLTIuMiwxMy4zLTAuMWMwLjksMC40LDEuNiwwLjksMi4xLDEuNWwwLjEtMC4xQzEyMC45LDQ4LjgsMTIwLjMsNDUuMywxMTYuMiw0My4zeiIvPgoJCTxnPgoJCQk8Zz4KCQkJCTxwYXRoIGZpbGw9IiM5MEE2QkYiIGQ9Ik0xMzkuMiw2Mi45bC0yLjEsMS40bC0xMS40LTIuOWMtMS4zLDAuNC0yLjcsMC44LTQsMS4xTDExOSw2OWwtOS42LDAuMWwtNS02LjVjLTEuNS0wLjItMy0wLjYtNC40LTAuOQoJCQkJCUw4OS43LDY1bC0zLjktMS45bDAsMGwtMy43LTEuOGwwLjQsNi42bDcuNSwzLjhsMTAuMi0zLjNjMS41LDAuNCwyLjksMC43LDQuNCwwLjlsNSw2LjVsOS42LTAuMWwyLjYtNi42YzEuNC0wLjMsMi43LTAuNyw0LTEuMQoJCQkJCWwxMS40LDIuOWw2LjEtNGwtMC40LTYuNkwxMzkuMiw2Mi45TDEzOS4yLDYyLjl6Ii8+CgkJCTwvZz4KCQk8L2c+CgkJPHBhdGggZmlsbD0iIzZEODRBNSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMDAsNjEuOEMxMDAsNjEuOCw5OS45LDYxLjgsMTAwLDYxLjhMODkuNyw2NWgtMC4xbDAuNCw2LjZoMC4xCgkJCWwxMC4yLTMuM2wwLDBMMTAwLDYxLjh6Ii8+CgkJPGc+CgkJCTxnPgoJCQkJPHBvbHlnb24gZmlsbD0iIzZEODRBNSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNzEuNCw0NS4xIDcxLjcsNTEuNyAKCQkJCQk3Mi43LDU3LjIgODMuNyw1OS4xIDg2LjQsNTUgODQuMiw1Mi42IDcyLjQsNTAuNiAJCQkJIi8+CgkJCTwvZz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iIzZEODRBNSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik04Mi40LDQyLjdjMC4zLTAuOCwwLjgtMS43LDEuMy0yLjUKCQkJCQlsLTYuNS02LjFsMC40LDYuNmwyLjYsMi40TDgyLjQsNDIuN3oiLz4KCQkJPC9nPgoJCTwvZz4KCQk8Zz4KCQkJPGc+CgkJCQk8cG9seWdvbiBmaWxsPSIjNkQ4NEE1IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxNDksNDkuMyAxNDkuMyw1NiAxNDAuNSw1Ny45IDEzNi42LDU0LjIgMTM3LjksNTEuNyAKCQkJCQkJCQkJIi8+CgkJCTwvZz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iIzUyNkU5NCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMzQuOSwzOGwtMSwxLjUKCQkJCQljMC44LDAuOCwxLjYsMS42LDIuMiwyLjRMMTM3LDQybDEuNS0yLjJsLTAuNC02LjZMMTM0LjksMzhMMTM0LjksMzh6Ii8+CgkJCTwvZz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iI0NFRDhFQiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMzguMiwzMy4ybC03LjUtMy44bC0xMC4yLDMuMwoJCQkJCWMtMS41LTAuNC0yLjktMC43LTQuNC0wLjlsLTUtNi41bC05LjYsMC4xTDk4LjgsMzJjLTEuNCwwLjMtMi43LDAuNy00LjEsMS4xbC0xMS40LTIuOWwtNi4xLDRsNi41LDYuMWMtMC42LDAuOC0xLDEuNi0xLjMsMi41CgkJCQkJbC0xMSwyLjJsMSw1LjVsMTEuOCwyYzAuNiwwLjgsMS40LDEuNiwyLjIsMi40bC00LjMsNi4zbDcuNSwzLjhsMTAuMi0zLjNjMS41LDAuNCwyLjksMC43LDQuNCwwLjlsNSw2LjVsOS42LTAuMWwyLjYtNi42CgkJCQkJYzEuNC0wLjMsMi43LTAuNyw0LTEuMWwxMS40LDIuOWw2LjEtNGwtNi41LTYuMWMwLjYtMC44LDEtMS42LDEuMy0yLjVsMTEuMS0yLjRsLTEtNS41bC0xMS45LTJjLTAuNi0wLjgtMS40LTEuNi0yLjItMi40CgkJCQkJTDEzOC4yLDMzLjJ6IE0xMTcuNiw1MC45Yy0zLjMsMi4yLTkuMywyLjMtMTMuNCwwLjJzLTQuNy01LjUtMS40LTcuN3M5LjMtMi4zLDEzLjQtMC4yQzEyMC4zLDQ1LjMsMTIwLjksNDguOCwxMTcuNiw1MC45eiIvPgoJCQk8L2c+CgkJPC9nPgoJCTxwYXRoIGZpbGw9IiNGNEY0RjQiIGQ9Ik0xMTYsMzEuN2wtNS02LjVsLTUuNCwwLjFsLTE5LjMsMzhsMy40LDEuN2wxMC4yLTMuM2MxLjUsMC40LDIuOSwwLjcsNC40LDAuOWwwLjIsMC4ybDUuMi0xMC4zCgkJCWMtMi0wLjEtMy45LTAuNi01LjYtMS40Yy00LjEtMi4xLTQuNy01LjUtMS40LTcuN2MyLjktMS45LDguMS0yLjIsMTItMC44bDUuMi0xMC4xQzExOC42LDMyLjIsMTE3LjMsMzIsMTE2LDMxLjd6Ii8+CgkJPHBhdGggZmlsbD0iIzZEODRBNSIgZD0iTTExNC44LDQyLjdMMTE0LjgsNDIuN2MtMy41LDEuMS02LjYsMi45LTguOCw1LjZjMy4xLTAuNSw2LjYtMC4xLDkuMywxLjNjMC45LDAuNCwxLjYsMC45LDIuMSwxLjUKCQkJbDAuMS0wLjFjMS40LTAuOSwyLjEtMi4xLDIuMS0zLjN2LTAuMWMwLTAuMy0wLjEtMC42LTAuMi0wLjhjMC0wLjEtMC4xLTAuMi0wLjEtMC4zczAtMC4xLTAuMS0wLjJjMC0wLjEtMC4xLTAuMi0wLjItMC4zCgkJCWMwLTAuMS0wLjEtMC4xLTAuMS0wLjJjLTAuMS0wLjEtMC4xLTAuMi0wLjItMC4zcy0wLjEtMC4xLTAuMi0wLjJjLTAuMS0wLjEtMC4xLTAuMi0wLjItMC4yYy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuMgoJCQljLTAuMS0wLjEtMC4xLTAuMS0wLjItMC4yYy0wLjEtMC4xLTAuMi0wLjItMC4zLTAuMmMtMC4xLTAuMS0wLjItMC4xLTAuMi0wLjJjLTAuMS0wLjEtMC4zLTAuMi0wLjQtMC4zYy0wLjEsMC0wLjEtMC4xLTAuMi0wLjEKCQkJYy0wLjItMC4xLTAuNS0wLjMtMC43LTAuNGMtMC4yLTAuMS0wLjQtMC4yLTAuNy0wLjNDMTE1LjMsNDIuOSwxMTUsNDIuOCwxMTQuOCw0Mi43eiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTE2LjIsNDMuM2MtNC4xLTIuMS0xMC4xLTItMTMuNCwwLjIKCQkJYy0yLjYsMS43LTIuOCw0LjItMC43LDYuMmMzLjMtMi4xLDkuMy0yLjIsMTMuMy0wLjFjMC45LDAuNCwxLjYsMC45LDIuMSwxLjVsMC4xLTAuMUMxMjAuOSw0OC44LDEyMC4zLDQ1LjMsMTE2LjIsNDMuM3oiLz4KCQk8Zz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEzOS4yLDYyLjlsLTIuMSwxLjRsLTExLjQtMi45CgkJCQkJYy0xLjMsMC40LTIuNywwLjgtNCwxLjFMMTE5LDY5bC05LjYsMC4xbC01LTYuNWMtMS41LTAuMi0zLTAuNi00LjQtMC45TDg5LjcsNjVsLTMuOS0xLjlsMCwwbC0zLjctMS44bDAuNCw2LjZsNy41LDMuOAoJCQkJCWwxMC4yLTMuM2MxLjUsMC40LDIuOSwwLjcsNC40LDAuOWw1LDYuNWw5LjYtMC4xbDIuNi02LjZjMS40LTAuMywyLjctMC43LDQtMS4xbDExLjQsMi45bDYuMS00bC0wLjQtNi42TDEzOS4yLDYyLjlMMTM5LjIsNjIuOQoJCQkJCXoiLz4KCQkJPC9nPgoJCTwvZz4KCQk8cG9seWdvbiBmaWxsPSIjQ0VEOEVCIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxMDQuNCw2Mi43IDEwNC43LDY5LjMgCgkJCTEwOS44LDc1LjggMTA5LjQsNjkuMiAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiM2RDg0QTUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjExOSw2OSAxMTkuNCw3NS43IDEyMiw2OS4xIAoJCQkxMjEuNiw2Mi40IAkJIi8+CgkJPHBhdGggZmlsbD0iI0NFRDhFQiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMjUuNyw2MS40aC0wLjJsMC40LDYuNmgwLjFsMTEuNCwyLjkKCQkJbC0wLjQtNi42TDEyNS43LDYxLjR6Ii8+CgkJPHBvbHlnb24gZmlsbD0iI0NFRDhFQiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNzIuOCw1Ny4yIDgzLjcsNTkuMSA4NC41LDU3LjggCgkJCTg0LjIsNTIuNiA3Mi40LDUwLjYgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjQ0VEOEVCIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI4NS45LDYzLjEgODIuMiw2MS4yIDgyLjYsNjcuOSAKCQkJOTAuMSw3MS42IDg5LjcsNjUgCQkiLz4KCQk8cGF0aCBmaWxsPSIjRThFQkVGIiBkPSJNMTI4LjksMzBsLTcuNCwyLjRMMTE2LDQzLjNoMC4xYzQuMSwyLjEsNC43LDUuNSwxLjQsNy43Yy0xLjYsMS4xLTMuOSwxLjYtNi4yLDEuN2wtNS44LDExLjZsMy44LDQuOQoJCQlMMTI4LjksMzB6Ii8+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMzguMiwzMy4ybC03LjUtMy44bC0xMC4yLDMuMwoJCQkJCWMtMS41LTAuNC0yLjktMC43LTQuNC0wLjlsLTUtNi41bC05LjYsMC4xTDk4LjgsMzJjLTEuNCwwLjMtMi43LDAuNy00LjEsMS4xbC0xMS40LTIuOWwtNi4xLDRsNi41LDYuMWMtMC42LDAuOC0xLDEuNi0xLjMsMi41CgkJCQkJbC0xMSwyLjJsMSw1LjVsMTEuOCwyYzAuNiwwLjgsMS40LDEuNiwyLjIsMi40bC00LjMsNi4zbDcuNSwzLjhsMTAuMi0zLjNjMS41LDAuNCwyLjksMC43LDQuNCwwLjlsNSw2LjVsOS42LTAuMWwyLjYtNi42CgkJCQkJYzEuNC0wLjMsMi43LTAuNyw0LTEuMWwxMS40LDIuOWw2LjEtNGwtNi41LTYuMWMwLjYtMC44LDEtMS42LDEuMy0yLjVsMTEuMS0yLjRsLTEtNS41bC0xMS45LTJjLTAuNi0wLjgtMS40LTEuNi0yLjItMi40CgkJCQkJTDEzOC4yLDMzLjJ6IE0xMTcuNiw1MC45Yy0zLjMsMi4yLTkuMywyLjMtMTMuNCwwLjJzLTQuNy01LjUtMS40LTcuN3M5LjMtMi4zLDEzLjQtMC4yQzEyMC4zLDQ1LjMsMTIwLjksNDguOCwxMTcuNiw1MC45eiIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPHBhdGggZD0iTTExMSwyNS4ybDUsNi41bDQuNCwwLjlsMTAuMi0zLjNsNy41LDMuOGwwLjQsNi42TDEzNyw0MmwxMC45LDEuOGwxLDUuNWwwLjQsNi42bC04LjgsMS45bDIuNSwyLjRsMC40LDYuN2wtNi4xLDRMMTI2LDY4CgkJCWwtNCwxLjFsLTIuNiw2LjZsLTkuNiwwLjFsLTUtNi41bC00LjQtMC45bC0xMC4yLDMuM2wtNy41LTMuOGwtMC40LTYuN2wxLjUtMi4xbC0xMC45LTEuOGwtMS01LjVMNzEuNCw0NWw4LjgtMS44bC0yLjYtMi40CgkJCWwtMC40LTYuN2w2LjEtNEw5NC43LDMzbDQuMS0xLjFsMi42LTYuNkwxMTEsMjUuMiBNMTEyLDIzLjJoLTFsLTkuNiwwLjFoLTEuM2wtMC41LDEuMmwtMi4yLDUuN0w5NC43LDMxbC0xMC45LTIuOEw4MywyOAoJCQlsLTAuNywwLjVsLTYuMSw0bC0xLDAuNmwwLjEsMS4xbDAuNCw2Ljd2MC44TDc2LDQybC01LDFsLTEuNywwLjRsMC4xLDEuN2wwLjQsNi43djAuMVY1MmwxLDUuNWwwLjMsMS40bDEuNCwwLjJsNy43LDEuM2wtMC4xLDAuMQoJCQl2MC43bDAuNCw2LjdsMC4xLDEuMWwxLDAuNWw3LjUsMy44bDAuNywwLjRsMC44LTAuMmw5LjctMy4xbDMuMiwwLjdsNC42LDUuOWwwLjYsMC44aDFsOS42LTAuMWgxLjNsMC41LTEuMmwyLjItNS43bDIuNi0wLjcKCQkJbDEwLjksMi44bDAuOSwwLjJsMC43LTAuNWw2LjEtNGwxLTAuNmwtMC4xLTEuMmwtMC40LTYuN2wtMC4xLTAuOGwtMC4zLTAuM2w1LjEtMS4xbDEuNy0wLjRsLTAuMS0xLjdsLTAuNC02LjZ2LTAuMVY0OWwtMS01LjUKCQkJbC0wLjMtMS40bC0xLjQtMC4ybC03LjgtMS4zbDAuMS0wLjJ2LTAuN2wtMC40LTYuNmwtMC4xLTEuMmwtMS0wLjVsLTcuNS0zLjhsLTAuNy0wLjRsLTAuOCwwLjJsLTkuNywzLjFsLTMuMi0wLjdsLTQuNi01LjkKCQkJTDExMiwyMy4yTDExMiwyMy4yeiIvPgoJPC9nPgo8L2c+CjxnIGlkPSJMYXllcl84X2NvcHkiPgoJPGcgaWQ9IkxheWVyXzFfY29weSI+CgkJPGcgaWQ9IkxheWVyXzNfY29weSI+CgkJPC9nPgoJCTxnIGlkPSJMYXllcl82X2NvcHkiPgoJCTwvZz4KCQk8ZyBpZD0iTGF5ZXJfN19jb3B5Ij4KCQkJPHBvbHlnb24gb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSI4NS40LDEzMy4xIDkyLDEzMS4xIDk3LjEsMTIwLjUgMTIxLjMsMTE5LjQgMTI0LjEsMTAzLjIgMTEyLDc4LjggCgkJCQkzOC41LDc5LjkgCQkJIi8+CgkJPC9nPgoJCTxwYXRoIGZpbGw9IiNDRUQ4RUIiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNzkuNCw4My44Yy01LjktMy0xNC44LTIuOS0xOS42LDAuMwoJCQljLTMuOCwyLjUtNCw2LjItMS4xLDkuMWM0LjktMy4xLDEzLjUtMy4xLDE5LjQtMC4yYzEuMywwLjYsMi4zLDEuNCwzLjEsMi4yYzAuMSwwLDAuMS0wLjEsMC4yLTAuMUM4Ni4zLDkxLjksODUuNCw4Ni45LDc5LjQsODMuOAoJCQl6Ii8+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iIzkwQTZCRiIgZD0iTTExMi45LDExMi41bC0zLjEsMi4xbC0xNi42LTQuM2MtMS45LDAuNi0zLjksMS4yLTUuOSwxLjZsLTMuOCw5LjZsLTE0LjEsMC4ybC03LjMtOS41CgkJCQkJYy0yLjItMC4zLTQuMy0wLjgtNi41LTEuNGwtMTQuOSw0LjhsLTUuNi0yLjhsMCwwbC01LjMtMi43bDAuNiw5LjdsMTEsNS41bDE0LjktNC44YzIuMSwwLjYsNC4zLDEsNi41LDEuNGw3LjMsOS41bDE0LjEtMC4yCgkJCQkJbDMuOC05LjZjMi0wLjQsNC0xLDUuOS0xLjZsMTYuNiw0LjNsOC45LTUuOWwtMC42LTkuN0wxMTIuOSwxMTIuNUwxMTIuOSwxMTIuNXoiLz4KCQkJPC9nPgoJCTwvZz4KCQk8cGF0aCBmaWxsPSIjNkQ4NEE1IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTU1LjcsMTEwLjhMNTUuNywxMTAuOGwtMTQuOSw0LjdsLTAuMS0wLjFsMC42LDkuN2wwLjEsMC4xCgkJCWwxNC45LTQuOGwwLDBMNTUuNywxMTAuOHoiLz4KCQk8Zz4KCQkJPGc+CgkJCQk8cG9seWdvbiBmaWxsPSIjNkQ4NEE1IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxNCw4Ni41IDE0LjUsOTYuMiAxNiwxMDQuMiAKCQkJCQkzMS45LDEwNi45IDM1LjksMTAxIDMyLjcsOTcuNCAxNS40LDk0LjUgCQkJCSIvPgoJCQk8L2c+CgkJPC9nPgoJCTxnPgoJCQk8Zz4KCQkJCTxwYXRoIGZpbGw9IiM2RDg0QTUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMzAuMSw4M2MwLjQtMS4yLDEuMS0yLjQsMS45LTMuNgoJCQkJCWwtOS41LTguOWwwLjYsOS43bDMuOCwzLjVMMzAuMSw4M3oiLz4KCQkJPC9nPgoJCTwvZz4KCQk8Zz4KCQkJPGc+CgkJCQk8cG9seWdvbiBmaWxsPSIjNkQ4NEE1IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxMjcuMiw5Mi43IDEyNy44LDEwMi40IDExNC45LDEwNS4xIDEwOS4yLDk5LjcgCgkJCQkJMTExLjEsOTYuMiAJCQkJIi8+CgkJCTwvZz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iIzUyNkU5NCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMDYuNyw3Ni4xbC0xLjUsMi4xCgkJCQkJYzEuMiwxLjEsMi4zLDIuMywzLjIsMy41bDEuNCwwLjJsMi4yLTMuMmwtMC42LTkuN0wxMDYuNyw3Ni4xTDEwNi43LDc2LjF6Ii8+CgkJCTwvZz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iI0NFRDhFQiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMTEuNSw2OS4xbC0xMS01LjVsLTE0LjksNC44CgkJCQkJYy0yLjEtMC42LTQuMy0xLTYuNS0xLjRsLTcuMy05LjVsLTE0LjEsMC4ybC0zLjgsOS42Yy0yLDAuNC00LDEtNS45LDEuNmwtMTYuNi00LjNsLTguOSw1LjlsOS41LDguOWMtMC44LDEuMi0xLjQsMi40LTEuOSwzLjYKCQkJCQlMMTQsODYuNGwxLjUsOGwxNy4zLDIuOWMwLjksMS4yLDIsMi40LDMuMiwzLjVsLTYuMiw5LjFsMTEsNS41bDE0LjktNC44YzIuMSwwLjYsNC4zLDEsNi41LDEuNGw3LjMsOS41bDE0LjEtMC4ybDMuOC05LjYKCQkJCQljMi0wLjQsNC0xLDUuOS0xLjZsMTYuNiw0LjNsOC45LTUuOWwtOS41LTguOWMwLjgtMS4yLDEuNC0yLjQsMS45LTMuNmwxNi4xLTMuNWwtMS41LThsLTE3LjMtMi45Yy0wLjktMS4yLTItMi40LTMuMi0zLjUKCQkJCQlMMTExLjUsNjkuMXogTTgxLjQsOTVjLTQuOSwzLjItMTMuNiwzLjMtMTkuNiwwLjNzLTYuOS04LTIuMS0xMS4yczEzLjYtMy4zLDE5LjYtMC4zQzg1LjQsODYuOSw4Ni4zLDkxLjksODEuNCw5NXoiLz4KCQkJPC9nPgoJCTwvZz4KCQk8cGF0aCBmaWxsPSIjRjRGNEY0IiBkPSJNNzkuMSw2N2wtNy4zLTkuNWwtNy45LDAuMUwzNS43LDExM2w0LjksMi41bDE0LjktNC44YzIuMSwwLjYsNC4zLDEsNi41LDEuNGwwLjMsMC4zTDcwLDk3LjUKCQkJYy0yLjktMC4yLTUuNy0wLjktOC4xLTIuMWMtNi0zLTYuOS04LTIuMS0xMS4yYzQuMy0yLjgsMTEuOC0zLjIsMTcuNi0xLjJsNy41LTE0LjhDODMsNjcuNyw4MS4xLDY3LjMsNzkuMSw2N3oiLz4KCQk8cGF0aCBmaWxsPSIjNkQ4NEE1IiBkPSJNNzcuNCw4M0w3Ny40LDgzYy01LjEsMS42LTkuNiw0LjItMTIuOSw4LjJDNjksOTAuNCw3NC4yLDkxLDc4LjEsOTNjMS4zLDAuNiwyLjMsMS40LDMuMSwyLjIKCQkJYzAuMSwwLDAuMS0wLjEsMC4yLTAuMWMyLjEtMS40LDMuMS0zLjEsMy4xLTQuOVY5MGMwLTAuNC0wLjEtMC44LTAuMi0xLjJjLTAuMS0wLjItMC4xLTAuMy0wLjItMC41YzAtMC4xLTAuMS0wLjItMC4xLTAuMgoJCQljLTAuMS0wLjEtMC4xLTAuMy0wLjItMC40cy0wLjEtMC4yLTAuMi0wLjNjLTAuMS0wLjEtMC4yLTAuMy0wLjMtMC40Yy0wLjEtMC4xLTAuMi0wLjItMC4zLTAuM2MtMC4xLTAuMS0wLjItMC4yLTAuMy0wLjMKCQkJYy0wLjEtMC4xLTAuMi0wLjItMC4zLTAuM2MtMC4xLTAuMS0wLjItMC4yLTAuMy0wLjNjLTAuMS0wLjEtMC4zLTAuMi0wLjQtMC40Yy0wLjEtMC4xLTAuMi0wLjItMC4zLTAuM2MtMC4yLTAuMS0wLjQtMC4zLTAuNi0wLjQKCQkJYy0wLjEtMC4xLTAuMi0wLjEtMC4zLTAuMmMtMC4zLTAuMi0wLjctMC40LTEtMC42cy0wLjctMC4zLTEtMC41Qzc4LDgzLjIsNzcuNyw4My4xLDc3LjQsODN6Ii8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik03OS40LDgzLjhjLTUuOS0zLTE0LjgtMi45LTE5LjYsMC4zCgkJCWMtMy44LDIuNS00LDYuMi0xLjEsOS4xYzQuOS0zLjEsMTMuNS0zLjEsMTkuNC0wLjJjMS4zLDAuNiwyLjMsMS40LDMuMSwyLjJjMC4xLDAsMC4xLTAuMSwwLjItMC4xQzg2LjMsOTEuOSw4NS40LDg2LjksNzkuNCw4My44CgkJCXoiLz4KCQk8Zz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTExMi45LDExMi41bC0zLjEsMi4xbC0xNi42LTQuMwoJCQkJCWMtMS45LDAuNi0zLjksMS4yLTUuOSwxLjZsLTMuOCw5LjZsLTE0LjEsMC4ybC03LjMtOS41Yy0yLjItMC4zLTQuMy0wLjgtNi41LTEuNGwtMTQuOSw0LjhsLTUuNi0yLjhsMCwwbC01LjMtMi43bDAuNiw5LjcKCQkJCQlsMTEsNS41bDE0LjktNC44YzIuMSwwLjYsNC4zLDEsNi41LDEuNGw3LjMsOS41bDE0LjEtMC4ybDMuOC05LjZjMi0wLjQsNC0xLDUuOS0xLjZsMTYuNiw0LjNsOC45LTUuOWwtMC42LTkuN0wxMTIuOSwxMTIuNQoJCQkJCUwxMTIuOSwxMTIuNXoiLz4KCQkJPC9nPgoJCTwvZz4KCQk8cG9seWdvbiBmaWxsPSIjQ0VEOEVCIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI2Mi4xLDExMi4yIDYyLjcsMTIxLjkgCgkJCTcwLDEzMS40IDY5LjQsMTIxLjcgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjNkQ4NEE1IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI4My41LDEyMS41IDg0LjEsMTMxLjEgCgkJCTg3LjksMTIxLjUgODcuMywxMTEuOCAJCSIvPgoJCTxwYXRoIGZpbGw9IiNDRUQ4RUIiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNOTMuMywxMTAuM0g5M2wwLjYsOS43aDAuMWwxNi42LDQuMwoJCQlsLTAuNi05LjdMOTMuMywxMTAuM3oiLz4KCQk8cG9seWdvbiBmaWxsPSIjQ0VEOEVCIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxNiwxMDQuMiAzMS45LDEwNi45IDMzLjIsMTA1IAoJCQkzMi43LDk3LjQgMTUuNSw5NC41IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0NFRDhFQiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzUuMSwxMTIuNyAyOS44LDExMCAKCQkJMzAuMywxMTkuNyA0MS4zLDEyNS4zIDQwLjgsMTE1LjYgCQkiLz4KCQk8cGF0aCBmaWxsPSIjRThFQkVGIiBkPSJNOTgsNjQuNGwtMTAuOCwzLjRsLTgsMTUuOWMwLDAsMC4xLDAsMC4xLDAuMWM2LDMsNi45LDgsMi4xLDExLjJjLTIuNCwxLjYtNS43LDIuNC05LjEsMi41bC04LjUsMTcKCQkJbDUuNSw3LjFMOTgsNjQuNHoiLz4KCQk8Zz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTExMS41LDY5LjFsLTExLTUuNWwtMTQuOSw0LjgKCQkJCQljLTIuMS0wLjYtNC4zLTEtNi41LTEuNGwtNy4zLTkuNWwtMTQuMSwwLjJsLTMuOCw5LjZjLTIsMC40LTQsMS01LjksMS42bC0xNi42LTQuM2wtOC45LDUuOWw5LjUsOC45Yy0wLjgsMS4yLTEuNCwyLjQtMS45LDMuNgoJCQkJCUwxNCw4Ni40bDEuNSw4bDE3LjMsMi45YzAuOSwxLjIsMiwyLjQsMy4yLDMuNWwtNi4yLDkuMWwxMSw1LjVsMTQuOS00LjhjMi4xLDAuNiw0LjMsMSw2LjUsMS40bDcuMyw5LjVsMTQuMS0wLjJsMy44LTkuNgoJCQkJCWMyLTAuNCw0LTEsNS45LTEuNmwxNi42LDQuM2w4LjktNS45bC05LjUtOC45YzAuOC0xLjIsMS40LTIuNCwxLjktMy42bDE2LjEtMy41bC0xLjUtOGwtMTcuMy0yLjljLTAuOS0xLjItMi0yLjQtMy4yLTMuNQoJCQkJCUwxMTEuNSw2OS4xeiBNODEuNCw5NWMtNC45LDMuMi0xMy42LDMuMy0xOS42LDAuM3MtNi45LTgtMi4xLTExLjJzMTMuNi0zLjMsMTkuNi0wLjNDODUuNCw4Ni45LDg2LjMsOTEuOSw4MS40LDk1eiIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPHBhdGggZD0iTTcxLjgsNTcuNWw3LjMsOS41bDYuNSwxLjRsMTQuOS00LjhsMTEsNS41bDAuNiw5LjZsLTIuMiwzLjJsMTUuOSwyLjdsMS41LDhsMC41LDkuN2wtMTIuOSwyLjhsMy43LDMuNWwwLjYsOS43bC04LjksNS45CgkJCWwtMTYuNi00LjNsLTUuOSwxLjZsLTMuOCw5LjZsLTE0LDAuM2wtNy4zLTkuNWwtNi41LTEuNGwtMTQuOSw0LjhsLTExLTUuNWwtMC42LTkuN2wyLjItMy4xTDE2LDEwNC4ybC0xLjUtOC4xTDE0LDg2LjRsMTIuOC0yLjcKCQkJTDIzLDgwLjNsLTAuNS05LjdsOC45LTUuOUw0OCw2OC45bDUuOS0xLjZsMy44LTkuNkw3MS44LDU3LjUgTTcyLjgsNTUuNWgtMWwtMTQuMSwwLjJoLTEuM0w1NS45LDU3bC0zLjQsOC43TDQ4LDY2LjlsLTE2LjEtNC4xCgkJCUwzMSw2Mi41TDMwLjMsNjNsLTguOSw1LjlsLTEsMC42bDAuMSwxLjFsMC41LDkuN3YwLjhsMC42LDAuNmwwLjksMC45bC05LDEuOWwtMS43LDAuNGwwLjEsMS43bDAuNiw5Ljd2MC4xdjAuMWwxLjUsOC4xbDAuMywxLjQKCQkJbDEuNCwwLjJsMTIuOCwyLjFsLTAuNCwwLjVsLTAuNCwwLjZ2MC43bDAuNiw5LjdsMC4xLDEuMWwxLDAuNWwxMSw1LjVsMC43LDAuNGwwLjgtMC4ybDE0LjQtNC42bDUuMiwxLjFsNi45LDguOWwwLjYsMC44aDEKCQkJbDE0LjEtMC4yaDEuM2wwLjUtMS4ybDMuNC04LjdsNC40LTEuMmwxNi4xLDQuMWwwLjksMC4ybDAuNy0wLjVsOC45LTUuOWwxLTAuNmwtMC4xLTEuMmwtMC42LTkuN2wtMC4xLTAuOGwtMC42LTAuNWwtMC45LTAuOQoJCQlsOS4xLTEuOWwxLjctMC40bC0wLjEtMS43bC0wLjUtOS43di0wLjF2LTAuMWwtMS41LThsLTAuMy0xLjRsLTEuNC0wLjJsLTEyLjgtMi4ybDAuNC0wLjZsMC40LTAuNnYtMC43bC0wLjYtOS42bC0wLjEtMS4ybC0xLTAuNQoJCQlsLTExLTUuNWwtMC43LTAuNGwtMC44LDAuMmwtMTQuNCw0LjZsLTUuMi0xLjFsLTYuOS04LjlMNzIuOCw1NS41TDcyLjgsNTUuNXoiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"image\",\n \"name\": \"image\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0NTEuMjAwMDFweCIgaGVpZ2h0PSI1NDEuNzAwMDFweCIgdmlld0JveD0iMCAwIDQ1MS4yMDAwMSA1NDEuNzAwMDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ1MS4yMDAwMSA1NDEuNzAwMDEiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8yXzFfIiBkaXNwbGF5PSJub25lIj4KPC9nPgo8ZyBpZD0iTGF5ZXJfMyI+Cgk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjMzMS4yOTk5OSw0ODcuMjk5OTkgMjc4LjEwMDAxLDQ5My42MDAwMSAyNTQuNywzNTguNzAwMDEgCgkJMjc2LjEwMDAxLDM1OS43OTk5OSA0MTMuNSw0NDAuODk5OTkgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzIzMUYyMCIgcG9pbnRzPSIyOTkuODk5OTksMjU3LjYwMDAxIDI5OS43MDAwMSw0ODIuMjk5OTkgMjc4LjEwMDAxLDQ5My42MDAwMSA4NS41LDM3Ny43OTk5OSA4NS41LDgwLjcgCgkJMTA2LjgsNjYuNiAyMzcuNywxNDUgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0NERDlFRSIgcG9pbnRzPSI5NS43LDg0LjIgMjEzLjgsMTU1LjM5OTk5IDIyNiwxNDguMzk5OTkgMTA3LjIsNzcuMyAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQ0REOUVFIiBwb2ludHM9IjI3Ni4xMDAwMSwyNTIuMyAyNzYuMTAwMDEsNDgwLjUgOTUuOCwzNzIuMjAwMDEgOTUuOCw4OS4xIDIxMi44LDE1OSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjI4MS4yMDAwMSwyNjkuMjk5OTkgMjgwLjIwMDAxLDQ4MC42MDAwMSAyOTIuMzk5OTksNDc0LjUgMjkxLjI5OTk5LDI2My4yMDAwMSAJIi8+Cgk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMjU0LjgsNDMxLjIwMDAxYzAsOC4zOTk5OS01LjMsMTItMTEuODk5OTksOC4xMDAwMUwxMjQsMzY4LjM5OTk5QzExNy41LDM2NC41LDExMi4xLDM1NC41LDExMi4xLDM0Ni4xMDAwMUwxMTIsMjMwLjUKCQljMC04LjM5OTk5LDUuMy0xMiwxMS45LTguMTAwMDFsMTE4LjksNzAuODk5OTljNi41LDMuODk5OTksMTEuODk5OTksMTMuODk5OTksMTEuODk5OTksMjIuMjk5OTlMMjU0LjgsNDMxLjIwMDAxeiBNMTIzLjksMjM0LjUKCQljLTEuMy0wLjgtMi40LDAtMi40LDEuNjAwMDFsMC4yLDExNS42MDAwMWMwLDEuNjAwMDEsMS4xLDMuNzAwMDEsMi40LDQuNUwyNDMsNDI3LjEwMDAxYzEuMywwLjc5OTk5LDIuMzk5OTksMCwyLjM5OTk5LTEuNjAwMDEKCQlsLTAuMi0xMTUuNjAwMDFjMC0xLjYwMDAxLTEuMTAwMDEtMy43MDAwMS0yLjM5OTk5LTQuNUMyNDIuNywzMDUuMzk5OTksMTIzLjksMjM0LjUsMTIzLjksMjM0LjV6IE0xNDUuMywyOTYKCQljLTcuODk5OTktNC43MDAwMS0xNC4zLTE2LjcwMDAxLTE0LjMtMjYuNzk5OTlzNi4zOTk5OS0xNC4zOTk5OSwxNC4yLTkuNzk5OTljNy44OTk5OSw0LjcwMDAxLDE0LjMsMTYuNzAwMDEsMTQuMywyNi43OTk5OQoJCUMxNTkuNjAwMDEsMjk2LjI5OTk5LDE1My4yLDMwMC43MDAwMSwxNDUuMywyOTZ6IE0yMzUuNyw0MTAuNzAwMDFsLTEwNC41OTk5OS02Mi4zOTk5OXYtMTguMjk5OTlsMjMuNy0xNi4yMDAwMUwxNjYuNywzMzYuMTAwMDEKCQlsMzgtMjZsMzEsNThWNDEwLjcwMDAxeiIvPgoJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI5NS43LDg0LjIgMTMzLjMsMTA2LjggMTU2LjUsMTA2LjkgMTE4LjYsODQuMyAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE0My42MDAwMSwxMTMgMTU5LjYwMDAxLDEyMi40IDE4Mi43LDEyMi41IDE2Ni42MDAwMSwxMTMgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzhBQTRDMSIgcG9pbnRzPSIyMTkuODk5OTksMTU5LjcgMjc5LjcwMDAxLDI2NS4zOTk5OSAyOTAuNjAwMDEsMjU5IDIzMS4zLDE1My4xMDAwMSAJIi8+CjwvZz4KPGcgaWQ9IkxheWVyXzYiPgoJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTIxOS44OTk5OSwxNTkuN0wyMTEuMiwxNTcuM3Y3NS41OTk5OWMwLDIuODk5OTksMS42MDAwMSw1LjYwMDAxLDQuMTAwMDEsN2w2MC44LDM0Ljg5OTk5bDMuNjAwMDEtOS4zOTk5OQoJCUwyMTkuODk5OTksMTU5Ljd6Ii8+Cgk8cGF0aCBmaWxsPSIjQ0REOUVFIiBkPSJNMjczLjUsMjY1LjM5OTk5TDIyMi44LDIzNmMtMi4yLTEuMy0zLjYwMDAxLTMuNy0zLjYwMDAxLTYuM2wtMC4zLTU5LjkwMDAxTDI3My41LDI2NS4zOTk5OXoiLz4KCTxnIGlkPSJMYXllcl80Ij4KCTwvZz4KPC9nPgo8ZyBpZD0iTGF5ZXJfMV8xXyIgZGlzcGxheT0ibm9uZSI+Cgk8ZyBkaXNwbGF5PSJpbmxpbmUiPgoJCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik04NDYuOTAwMDIsMzA4LjI5OTk5Qzg0NywzMDkuMTk5OTgsODQ3LDMxMC4wOTk5OCw4NDcsMzExTDg0Ni45MDAwMiwzMDguMjk5OTlMODQ2LjkwMDAyLDMwOC4yOTk5OXoiLz4KCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNODQ5LDMxMWgtMy43OTk5OWMwLTAuNzk5OTksMC0xLjYwMDAxLTAuMDk5OTgtMi41bC0wLjI5OTk5LTIuMTAwMDFoNC4wOTk5OEw4NDksMzExTDg0OSwzMTF6Ii8+Cgk8L2c+Cgk8ZyBkaXNwbGF5PSJpbmxpbmUiPgoJCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik04NDYuOTAwMDIsMjEyLjdDODQ3LDIxMy41OTk5OSw4NDcsMjE0LjUsODQ3LDIxNS4zOTk5OUw4NDYuOTAwMDIsMjEyLjdMODQ2LjkwMDAyLDIxMi43eiIvPgoJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik04NDksMjE1LjM5OTk5aC0zLjc5OTk5YzAtMC44LDAtMS42MDAwMS0wLjA5OTk4LTIuNWwtMC4yOTk5OS0yLjEwMDAxaDQuMDk5OThMODQ5LDIxNS4zOTk5OQoJCQlMODQ5LDIxNS4zOTk5OXoiLz4KCTwvZz4KCTxwYXRoIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iI0IyQ0JFRCIgc3Ryb2tlPSIjMjMxRjIwIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iCgkJTTg0Ni45MDAwMiwzMDguMjk5OTlDODQ3LDMwOS4xOTk5OCw4NDcsMzEwLjA5OTk4LDg0NywzMTFMODQ2LjkwMDAyLDMwOC4yOTk5OUw4NDYuOTAwMDIsMzA4LjI5OTk5eiIvPgoJPHBhdGggZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjQjJDQkVEIiBzdHJva2U9IiMyMzFGMjAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSIKCQlNODQ2LjkwMDAyLDIxMi43Qzg0NywyMTMuNTk5OTksODQ3LDIxNC41LDg0NywyMTUuMzk5OTlMODQ2LjkwMDAyLDIxMi43TDg0Ni45MDAwMiwyMTIuN3oiLz4KCTxnIGRpc3BsYXk9ImlubGluZSI+CgkJPHBvbHlnb24gb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSIyNzQsNTI1LjI5OTk5IDIzOS4zLDUxOC41IDIzOC43LDIxOC42MDAwMSA1MTYuMjk5OTksMzgyLjM5OTk5IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0NDRDhFRSIgcG9pbnRzPSI1NS42LDQ5OC4yMDAwMSA1NC45LDQ5OC4yMDAwMSA1NC45LDQ5OC43MDAwMSAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiMyMzFGMjAiIHBvaW50cz0iNTQuNCw0OTkuNjAwMDEgNTQuNCw0OTcuNzAwMDEgNTcuNSw0OTcuNzAwMDEgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjQ0NEOEVFIiBwb2ludHM9IjU1LjYsNDEwLjI5OTk5IDU0LjksNDEwLjI5OTk5IDU0LjksNDEwLjcwMDAxIAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iIzIzMUYyMCIgcG9pbnRzPSI1NC40LDQxMS42MDAwMSA1NC40LDQwOS43OTk5OSA1Ny41LDQwOS43OTk5OSAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiNDREQ5RUUiIHBvaW50cz0iMjM5LjMsNDMxLjIwMDAxIDU2LjksMzIxLjYwMDAxIDIzOC43LDIxMi4xMDAwMSA0MjEuNzAwMDEsMzIxLjYwMDAxIAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0NDRDhFRSIgcG9pbnRzPSI1NS42LDMyMi4zOTk5OSA1NC45LDMyMi4zOTk5OSA1NC45LDMyMi43OTk5OSAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiNCNUM1REMiIHBvaW50cz0iNTQuOSwzOTcuMzk5OTkgMjM5LjMsNTA4LjIwMDAxIDIzOS4zLDUwOC4yMDAwMSAyMzkuMyw0MzMuNzAwMDEgNTQuOSwzMjIuNzk5OTkgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjI2Nyw0OTEuNjAwMDEgMjM5LjMsNTA4LjIwMDAxIDIzOS4zLDUwOC4yMDAwMSAyMzkuMyw0MzMuNzAwMDEgMjY3LDQxNyAJCSIvPgoJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik00Ni43LDMxOC4xMDAwMXY4M3YwLjcwMDAxTDIzOS4zLDUxNy42MDAwNGwzNy45OTk5OC0yMi43OTk5OVY0MTFMODQuMSwyOTUuMzk5OTlMNDYuNywzMTguMTAwMDF6CgkJCSBNMjM3LjMsNTA0LjVMNTcsMzk2LjIwMDAxVjMyNi41bDE4MC4zLDEwOC4yOTk5OVY1MDQuNXogTTU2LjksMzIxLjYwMDAxTDgyLjQsMzA2bDE4MywxMDkuNWwtMjYuMTAwMDEsMTUuNzAwMDFMNTYuOSwzMjEuNjAwMDF6CgkJCSBNMjY3LjM5OTk5LDQ4OS4yOTk5OWwtMjYuMTAwMDEsMTUuMjk5OTl2LTY5LjcwMDAxbDI2LjEwMDAxLTE1LjI5OTk5VjQ4OS4yOTk5OXoiLz4KCTwvZz4KPC9nPgo8ZyBpZD0iTGF5ZXJfNSI+CjwvZz4KPC9zdmc+Cg==\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"laptop\",\n \"name\": \"laptop\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1NDEuMXB4IiBoZWlnaHQ9IjUxMy4xcHgiIHZpZXdCb3g9IjAgMCA1NDEuMSA1MTMuMSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTQxLjEgNTEzLjEiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzAwMDAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIGQ9Ik0yNzQuNiw0NzEuNWwxNy4yLDkuNWMxLjgsMSwzLjksMSw1LjcsMEw1MzguMSwzNDNjMy45LTIuMiwzLjktNy44LDAtMTAuMQoJCUwzNDQuNiwyMjAuOGMtMy4zLTEuOS03LjYtMC4yLTguNSwzLjVsLTY0LjMsMjQwLjVDMjcxLjEsNDY3LjQsMjcyLjIsNDcwLjIsMjc0LjYsNDcxLjV6Ii8+CjwvZz4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0iI0NERDlFRSIgcG9pbnRzPSIxOTguMiwyMTguMSAzOC44LDMxMC4xIDI3MC40LDQ0My4zIDQyOS4zLDM1MS41IAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjQ0REOUVFIiBwb2ludHM9IjE5OS41LDE4LjMgMTk5LjUsMjE4LjEgNDI5LjMsMzUxLjUgNDI5LjUsMTUxLjggCQkJIi8+CgkJCTxwb2x5Z29uIGZpbGw9IiM0QjZFOTgiIHBvaW50cz0iNDQ1LjIsMTc3LjEgNDQ1LjMsMTQyLjcgNDI5LjUsMTUxLjggNDI5LjMsMzI3LjcgNDI5LjMsMzM1LjMgNDI5LjQsMzM1LjMgNDI5LjMsMzUxLjUgCgkJCQk0MjkuMywzNTEuNSA0MjcuNSwzNTIuNiAyNzAuNCw0NDMuMyAyNzAuNCw0NjEuNSA0MjcsMzcxIDQyNywzNzEgNDQ1LDM2MC42IDQ0NS4xLDM0NC41IDQ0NS4xLDM0NC41IDQ0NS4zLDE3Ny4xIAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjEyMS41LDM0NS43IDE5Ny43LDM4OS43IDI0My4xLDM2My41IDE2Ni45LDMxOS41IAkJCSIvPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTk3LjcsMzkybC04MC4yLTQ2LjNsNDkuNC0yOC41bDgwLjIsNDYuM0wxOTcuNywzOTJ6IE0xMjUuNSwzNDUuN2w3Mi4yLDQxLjdsNDEuNC0yMy45bC03Mi4yLTQxLjcKCQkJCUwxMjUuNSwzNDUuN3oiLz4KCQkJPHBvbHlnb24gZmlsbD0iI0YwRjdGRiIgcG9pbnRzPSI0MjYuOCwxODYuOCA0MjYuOCwxODYuOCA0MjYuOCwxNTQuMyAyNjAuOCwyNTEgMjkyLjgsMjY5LjUgNDI2LjgsMTkxLjQgCQkJIi8+CgkJCTxwb2x5Z29uIGZpbGw9IiNCNUM1REMiIHBvaW50cz0iMzguOCwzMjcuOCAzOC44LDMxMC4xIDI3MC40LDQ0My4zIDI3MC40LDQ2MS41IAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjQjFDQUVDIiBwb2ludHM9IjE5OS41LDE4LjMgNDI5LjUsMTUxLjggNDQ1LjMsMTQyLjcgMjE1LjIsOS4yIAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjM5NC4zLDM1MC40IDI2NywyNzcgMjY2LjksMjc3LjEgMjAwLjEsMjM4LjUgMTI0LjMsMjgyLjIgMjUxLjUsMzU1LjcgMjUxLjYsMzU1LjYgMzE4LjUsMzk0LjIgCgkJCQkJCQkiLz4KCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTMxOC41LDM5Ni41bC02Ni44LTM4LjZsLTAuMSwwLjFsLTEtMC42bC0xMzAuMi03NS4ybDc5LjgtNDYuMWw2Ni44LDM4LjZsMC4xLTAuMWwxLDAuNmwxMzAuMiw3NS4yCgkJCQlMMzE4LjUsMzk2LjV6IE0yNTEuNiwzNTMuM2w2Ni44LDM4LjZsNzEuOC00MS41TDI2NywyNzkuM2wtMC4xLDAuMWwtNjYuOC0zOC42bC03MS44LDQxLjVsMTIzLjIsNzEuMUwyNTEuNiwzNTMuM3oiLz4KCQkJPHBvbHlnb24gZmlsbD0iI0YwRjdGRiIgcG9pbnRzPSIzMzIuMyw5OC43IDIwMS41LDE3NC45IDIwMS41LDIxNi44IDIzOC45LDIzOC40IDQwNS42LDE0MS4yIAkJCSIvPgoJCQk8Zz4KCQkJCTxwb2x5Z29uIGZpbGw9IiMyMzFGMjAiIHBvaW50cz0iNDMxLjksMzUyLjcgNDMxLjksMzUyLjYgNDMxLjYsMzUyLjggCQkJCSIvPgoJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTIxNS42LDBsLTIzLjcsMTMuN3YxOTkuOGwtMTYwLjYsOTJ2MjYuOWwyMzguNSwxMzcuN2wxLDAuNmwxODIuOS0xMDUuNFYxMzguMUwyMTUuNiwweiBNNDMuMiwzMTAuMQoJCQkJCWwxNTUuNC04OS43bDIyNy4xLDEzMS4xbC0xNTUsODkuNUw0My4yLDMxMC4xeiBNMjY4LjcsNDQ0LjVWNDU4TDQxLjIsMzI2LjZ2LTEzTDI2OC43LDQ0NC41eiBNNDI3LjksMTUyLjlsLTAuMiwxOTUuMQoJCQkJCUwyMDEuOCwyMTdWMjEuOEw0MjcuOSwxNTIuOXogTTIwMy44LDE4LjNsMTEuNy02LjhsMjI2LjEsMTMxLjJsLTcuOSw0LjZsLTMuOCwyLjJMMjAzLjgsMTguM3ogTTI3Mi43LDQ0NC41bDE1Ny4xLTkwLjZsMi4xLTEuMwoJCQkJCXYtMi4xVjE1Mi45bDEwLjItNS45bDEuNS0wLjlsLTAuMiwyMTMuM2wtMTQuNSw4LjVsLTE1Ni4yLDkwTDI3Mi43LDQ0NC41TDI3Mi43LDQ0NC41eiIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"loadbalancer\",\n \"name\": \"loadbalancer\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI2MzQuNHB4IiBoZWlnaHQ9IjU0OC4xcHgiIHZpZXdCb3g9IjAgMCA2MzQuNCA1NDguMSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjM0LjQgNTQ4LjEiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfMl8xXyI+Cgk8cG9seWxpbmUgb3BhY2l0eT0iMC40IiBmaWxsPSIjMjMxRjIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSIyNzkuNyw0OTIuMSAzMzAuOCw0ODYuNiA0MDEuOSw0NDkuNiA0MzUuNSw0NjguMiAKCQk1NzEuOCwzODMuMyA0NzIuMywzMjguMyAyNzkuNyw0OTIuMSAJIi8+CjwvZz4KPGcgaWQ9IkxheWVyXzFfMl8iPgoJPGcgaWQ9IkxheWVyXzFfMV8iIGRpc3BsYXk9Im5vbmUiPgoJCTxwb2x5Z29uIGRpc3BsYXk9ImlubGluZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQTdBOUFDIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI1MzMuNywzOTEuOSAKCQkJMzE4LjMsNTE2LjMgMTAyLjgsMzkxLjkgMTAyLjgsMTQzLjEgMzE4LjMsMTguOCA1MzMuNywxNDMuMSAJCSIvPgoJPC9nPgoJPGcgaWQ9IkxheWVyXzJfMl8iPgoJCTxnPgoJCQk8Zz4KCQkJCTxnPgoJCQkJCTxwYXRoIGZpbGw9IiNDREQ5RUUiIGQ9Ik0yNzkuNyw0ODIuNWMtMC4zLDAtMC43LTAuMS0xLTAuM2wtMTEwLjEtNjMuNWMtMC44LTAuNS0xLjItMS40LTAuOS0yLjNsNTUtMTg0LjIKCQkJCQkJYzAuMy0wLjksMS0xLjQsMS45LTEuNGMwLDAsMCwwLDAuMSwwYzAuOSwwLDEuNywwLjcsMS45LDEuNmw1NSwyNDcuN2MwLjIsMC44LTAuMSwxLjYtMC44LDIKCQkJCQkJQzI4MC41LDQ4Mi40LDI4MC4xLDQ4Mi41LDI3OS43LDQ4Mi41eiIvPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTIyNC43LDIzMi44bDU1LDI0Ny43bC0xMTAtNjMuNUwyMjQuNywyMzIuOCBNMTY5LjcsNDE3bDExMC4xLDYzLjVMMTY5LjcsNDE3IE0yMjQuNywyMjguOAoJCQkJCQljLTEuOCwwLTMuMywxLjItMy44LDIuOWwtNTUsMTg0LjFjLTAuMiwwLjUtMC4yLDEtMC4yLDEuNWMwLDAuMywwLjEsMC42LDAuMiwwLjlsMCwwbDAsMGMwLjMsMC45LDAuOSwxLjcsMS44LDIuMmwwLDBsMCwwbDAsMAoJCQkJCQlsMCwwbDAsMGwwLDBsMCwwbDExMCw2My42bDAsMGMwLjYsMC40LDEuMywwLjUsMiwwLjVjMC4zLDAsMC41LDAsMC44LTAuMWMwLjIsMCwwLjUtMC4xLDAuNy0wLjJjMC44LTAuMywxLjQtMC44LDEuOS0xLjYKCQkJCQkJYzAuMS0wLjEsMC4xLTAuMiwwLjItMC4zYzAuNS0wLjksMC42LTEuOSwwLjQtMi44bC01NS0yNDcuN2MtMC40LTEuOC0xLjktMy4xLTMuOC0zLjFDMjI0LjgsMjI4LjgsMjI0LjcsMjI4LjgsMjI0LjcsMjI4LjgKCQkJCQkJTDIyNC43LDIyOC44eiIvPgoJCQkJPC9nPgoJCQk8L2c+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTI3OS43LDQ4Mi41Yy0wLjMsMC0wLjUtMC4xLTAuOC0wLjJjLTAuNi0wLjMtMS0wLjgtMS4xLTEuNGwtNTUtMjQ3LjdjLTAuMi0wLjksMC4yLTEuNywxLTIuMgoJCQkJCQlsMTUxLjktODcuNmMwLjMtMC4yLDAuNy0wLjMsMS0wLjNzMC41LDAuMSwwLjgsMC4yYzAuNiwwLjMsMSwwLjgsMS4xLDEuNGw1NSwyNDcuN2MwLjIsMC45LTAuMiwxLjctMSwyLjJsLTE1MS44LDg3LjYKCQkJCQkJQzI4MC40LDQ4Mi40LDI4MCw0ODIuNSwyNzkuNyw0ODIuNXoiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0zNzYuNSwxNDUuMmw1NSwyNDcuN2wtNzEuNCw0MS4ybC04MC40LDQ2LjRsLTM2LjItMTYzbC0xOC44LTg0LjdMMzc2LjUsMTQ1LjIgTTM3Ni41LDE0MS4yCgkJCQkJCWMtMC43LDAtMS40LDAuMi0yLDAuNWwtMTUxLjksODcuNmMtMS41LDAuOS0yLjMsMi42LTEuOSw0LjNsMTguOCw4NC43bDM2LjIsMTYzYzAuMywxLjIsMS4xLDIuMywyLjMsMi44CgkJCQkJCWMwLjUsMC4yLDEuMSwwLjMsMS42LDAuM2MwLjcsMCwxLjQtMC4yLDItMC41bDgwLjQtNDYuNGw3MS40LTQxLjJjMS41LTAuOSwyLjMtMi42LDEuOS00LjNsLTU1LTI0Ny43CgkJCQkJCWMtMC4zLTEuMi0xLjEtMi4zLTIuMy0yLjhDMzc3LjYsMTQxLjMsMzc3LjEsMTQxLjIsMzc2LjUsMTQxLjJMMzc2LjUsMTQxLjJ6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQkJPGc+CgkJCQk8cG9seWdvbiBmaWxsPSIjNDE2Nzg3IiBwb2ludHM9IjQzMS41LDM5Mi45IDM2MC4xLDQzNC4xIDI0My41LDMxNy41IDIyNC43LDIzMi44IDM3Ni41LDE0NS4yIAkJCQkiLz4KCQkJPC9nPgoJCQk8Zz4KCQkJCTxwb2x5Z29uIGZpbGw9IiNDREQ5RUUiIHBvaW50cz0iNzMuOSwxNDUgNDA2LDMzNi43IDU2Mi43LDI0Ni4zIDIzMC42LDU0LjUgCQkJCSIvPgoJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTQwNiwzMzkuMWwtMS0wLjZMNjkuOSwxNDVsMTYwLjctOTIuOGwxLDAuNmwzMzUuMSwxOTMuNUw0MDYsMzM5LjF6IE03Ny45LDE0NUw0MDYsMzM0LjRsMTUyLjctODguMgoJCQkJCUwyMzAuNiw1Ni44TDc3LjksMTQ1eiIvPgoJCQk8L2c+CgkJCTxnPgoJCQkJPHBvbHlnb24gZmlsbD0iIzY4ODVBOSIgcG9pbnRzPSI0MDYsMzM2LjcgNzMuOSwxNDUgNzMuOSwxNzMuMyA0MDYsMzY1LjEgNTYyLjcsMjc0LjYgNTYyLjcsMjQ2LjMgCQkJCSIvPgoJCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTQwNiwzNjcuNGwtMS0wLjZMNzEuOSwxNzQuNXYtMzNMNDA2LDMzNC40bDE1OC43LTkxLjZ2MzIuOWwtMSwwLjZMNDA2LDM2Ny40eiBNNzUuOSwxNzIuMkw0MDYsMzYyLjgKCQkJCQlsMTU0LjctODkuM3YtMjMuN0w0MDYsMzM5LjFsLTEtMC42bC0zMjkuMS0xOTBDNzUuOSwxNDguNSw3NS45LDE3Mi4yLDc1LjksMTcyLjJ6Ii8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMjMwLjYsNTQuNWwzMzIuMSwxOTEuN3YyOC4zTDQyMy4yLDM1NWw4LjQsMzcuOEwzNjAuMiw0MzRsLTgwLjQsNDYuNEwxNjkuNyw0MTdsNDgtMTYwLjZsLTE0My44LTgzCgkJCQkJVjE0NUwyMzAuNiw1NC41IE0yMzAuNiw0M2wtNSwyLjlMNjguOSwxMzYuM2wtNSwyLjl2NS44djI4LjN2NS44bDUsMi45bDEzNi45LDc5bC00NS43LDE1My4xbC0yLjMsNy42bDYuOCw0bDExMC4xLDYzLjVsNSwyLjkKCQkJCQlsNS0yLjlsODAuNC00Ni40bDcxLjQtNDEuMmw2LjQtMy43bC0xLjYtNy4ybC02LjgtMzAuNmwxMzMuMi03Ni45bDUtMi45di01Ljh2LTI4LjN2LTUuOGwtNS0yLjlMMjM1LjYsNDUuOUwyMzAuNiw0M0wyMzAuNiw0M3oKCQkJCQkiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"lock\",\n \"name\": \"lock\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMDMuOXB4IiBoZWlnaHQ9IjIxMHB4IiB2aWV3Qm94PSIwIDAgMjAzLjkgMjEwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDMuOSAyMTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfMV8xXyI+Cgk8cGF0aCBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBkPSJNMTE1LjYsMTkwLjZsNDAtMS44bDE4LjctMTFjMy0xLjgsNC42LTQuOCwzLjYtNy4yYy0xLjMtMy04LjktOC0xMi41LTEwLjUKCQljMC44LTIuOS00LjUtMTEuNi0yMS4yLTE4LjZjLTQwLjMtMjMuNC0zNCwyMy42LTM0LDIzLjZMMTE1LjYsMTkwLjZ6Ii8+Cgk8ZyBpZD0iTGF5ZXJfMyI+Cgk8L2c+Cgk8ZyBpZD0iTGF5ZXJfMl8xXyI+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiNGMDk5MzgiIGQ9Ik0xNDUuMSwxMDMuNnY2Mi41YzAsMy4yLTEsNS40LTIuNyw2LjVsLTIzLjUsMTMuNWMxLjYtMSwyLjYtMy4zLDIuNi02LjV2LTYyLjVjMC01LjktMy42LTEyLjktOC4xLTE1LjUKCQkJCUw2MC4zLDcxYy0xLjctMS0zLjQtMS4yLTQuNy0wLjdsMCwwbDIyLjUtMTNjMS41LTEuMiwzLjUtMS4zLDUuOCwwLjFsNTMuMiwzMC43YzIuMSwxLjIsNCwzLjQsNS41LDYKCQkJCUMxNDQuMSw5Ny4xLDE0NS4xLDEwMC41LDE0NS4xLDEwMy42eiIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0iI0Y4RDQ2NiIgZD0iTTEyMS42LDE0Ny4zdi0zMC4xYzAtNS45LTMuNi0xMi45LTguMS0xNS41TDYwLjMsNzFjLTEuNy0xLTMuNC0xLjItNC43LTAuN2wwLDBsMjIuNS0xMwoJCQkJYzEuNS0xLjIsMy41LTEuMyw1LjgsMC4xbDUzLjIsMzAuN2MyLjEsMS4yLDQsMy40LDUuNSw2QzE0MS41LDExNC40LDEzMy44LDEzMi43LDEyMS42LDE0Ny4zeiIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0iIzIyMUYyMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNOTEuMywxNC41CgkJCQljMC44LDAsMS41LDAuMSwyLjQsMC4yYzAuNSwwLjEsMC45LDAuMSwxLjQsMC4zYzEuOSwwLjQsMy43LDEuMSw1LjcsMi4xYzAuNiwwLjMsMS4yLDAuNiwxLjcsMC45YzkuNyw1LjUsMTguMSwxNywyMy4yLDI5LjcKCQkJCWMwLjEsMC40LDAuMywwLjgsMC41LDEuMmMwLjEsMC4xLDAuMSwwLjIsMC4xLDAuM2MyLjgsNy40LDQuNCwxNS4yLDQuNCwyMi42bDAsMHYxMi43bDYuNSwzLjdjMi4xLDEuMiw0LDMuNCw1LjUsNgoJCQkJYzEuNiwyLjksMi42LDYuMywyLjYsOS41djYyLjVjMCwzLjItMSw1LjQtMi43LDYuNWwtMjMuNSwxMy41Yy0wLjYsMC41LTEuNCwwLjYtMi4zLDAuNmMtMSwwLTIuMS0wLjMtMy4yLTFsLTUzLjItMzAuNwoJCQkJYy00LjUtMi42LTguMS05LjUtOC4xLTE1LjV2LTVWNzcuMWMwLTMuNiwxLjQtNiwzLjQtNi44bDAsMGwwLDBsMTEuNS02LjZWNDMuM2MwLTcsMS40LTEyLjYsMy45LTE2LjhsMCwwYzAsMCwxLTIuMSwzLjItNC41CgkJCQljMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjJzMC4xLTAuMSwwLjEtMC4xYzAuMS0wLjEsMC4yLTAuMywwLjMtMC4zYzAuMS0wLjEsMC4xLTAuMSwwLjEtMC4xYzAuMS0wLjEsMC4xLTAuMSwwLjEtMC4xCgkJCQljMC4xLTAuMSwwLjItMC4yLDAuMy0wLjNjMC4xLTAuMSwwLjEtMC4xLDAuMS0wLjFjMC4xLTAuMSwwLjItMC4yLDAuMy0wLjNsMC4xLTAuMWMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuMwoJCQkJYzAuMS0wLjEsMC4xLTAuMSwwLjEtMC4xYzAuMS0wLjEsMC4zLTAuMiwwLjQtMC4zYzAuMS0wLjEsMC4xLTAuMSwwLjEtMC4xYzAuMS0wLjEsMC4xLTAuMSwwLjMtMC4yYzAuMS0wLjEsMC4xLTAuMSwwLjItMC4yCgkJCQlzMC4xLTAuMSwwLjMtMC4ybDAsMGMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuM2wwLDBjMCwwLDAuMSwwLDAuMS0wLjFsMCwwYzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4zYzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4yCgkJCQljMC4xLDAsMC4xLTAuMSwwLjEtMC4xYzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4yYzAuMS0wLjEsMC4zLTAuMSwwLjQtMC4ybDAuMS0wLjFjMC4xLDAsMC4xLTAuMSwwLjEtMC4xYzAuMi0wLjEsMC40LTAuMywwLjYtMC4zCgkJCQljMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjFzMC4xLTAuMSwwLjItMC4xYzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4xYzAuMS0wLjEsMC4xLTAuMSwwLjItMC4xaDAuMWMwLjEsMCwwLjEtMC4xLDAuMS0wLjEKCQkJCWMwLjEtMC4xLDAuMy0wLjEsMC40LTAuMnMwLjItMC4xLDAuMy0wLjFjMC4xLDAsMC4xLTAuMSwwLjEtMC4xaDAuMWMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuMWMwLjEtMC4xLDAuMy0wLjEsMC41LTAuMgoJCQkJYzAuMSwwLDAuMS0wLjEsMC4xLTAuMXMwLjEsMCwwLjEtMC4xYzAuMSwwLDAuMS0wLjEsMC4yLTAuMWwwLDBjMC4xLTAuMSwwLjMtMC4xLDAuNS0wLjJsMCwwYzAuMSwwLDAuMS0wLjEsMC4yLTAuMUg4NAoJCQkJYzAuMSwwLDAuMS0wLjEsMC4yLTAuMWMwLDAsMCwwLDAuMSwwYzAuMS0wLjEsMC4zLTAuMSwwLjUtMC4xYzAuMS0wLjEsMC4zLTAuMSwwLjQtMC4xbDAsMGMwLjEsMCwwLjEsMCwwLjEsMAoJCQkJYzAuMSwwLDAuMSwwLDAuMi0wLjFzMC4zLTAuMSwwLjQtMC4xYzAuMS0wLjEsMC4zLTAuMSwwLjUtMC4xYzAuMSwwLDAuMSwwLDAuMSwwYzAuMi0wLjEsMC4zLTAuMSwwLjUtMC4xCgkJCQljMC4yLTAuMSwwLjQtMC4xLDAuNi0wLjFDODguOSwxNC42LDkwLDE0LjUsOTEuMywxNC41IE04Ny41LDM0LjRMODcuNSwzNC40TDg3LjUsMzQuNGMtMS45LDIuNy0yLjksNi42LTIuOSwxMS40djEybDI4LjgsMTYuNgoJCQkJdi0zLjZjMC0xMy4yLTguMS0yOC42LTE3LjktMzQuM2MtMi41LTEuNS01LTIuMS03LjEtMi4xQzg4LDM0LjQsODcuOCwzNC40LDg3LjUsMzQuNCBNOTEuMywxMS40Yy0xLjUsMC0yLjksMC4yLTQuMywwLjUKCQkJCWMtMC4yLDAtMC4zLDAuMS0wLjUsMC4xYy0wLjEsMC0wLjMsMC0wLjUsMC4xYy0wLjEsMC0wLjEsMC0wLjIsMC4xYy0wLjIsMC4xLTAuMywwLjEtMC41LDAuMWMtMC4xLDAuMS0wLjMsMC4xLTAuNSwwLjFsLTAuMiwwLjEKCQkJCWMwLDAsMCwwLTAuMSwwaC0wLjFsMCwwbDAsMGgtMC4xYy0wLjEsMC0wLjMsMC4xLTAuMywwLjFjLTAuMSwwLjEtMC4zLDAuMS0wLjUsMC4xaC0wLjFjLTAuMSwwLTAuMSwwLjEtMC4yLDAuMWgtMC4xTDgzLDEyLjkKCQkJCWgtMC4xYy0wLjEsMC0wLjEsMC4xLTAuMiwwLjFsMCwwYy0wLjIsMC4xLTAuMywwLjEtMC41LDAuMmMwLDAtMC4xLDAtMC4xLDAuMWMtMC4xLDAtMC4xLDAuMS0wLjEsMC4xaC0wLjFsMC4xLTAuMWwwLDAKCQkJCWMtMC4xLDAtMC4xLDAuMS0wLjEsMC4xYy0wLjIsMC4xLTAuMywwLjEtMC41LDAuMmMtMC4xLDAuMS0wLjMsMC4xLTAuMywwLjFsMCwwbDAsMGMtMC4xLDAtMC4xLDAuMS0wLjIsMC4xCgkJCQljLTAuMSwwLjEtMC4yLDAuMS0wLjMsMC4xQzgwLjUsMTQsODAuNCwxNCw4MC4zLDE0bC0wLjEsMGgtMC4xQzgwLDE0LDgwLDE0LjEsODAsMTQuMXMtMC4xLDAtMC4xLDAuMWMtMC4xLDAuMS0wLjIsMC4xLTAuMywwLjEKCQkJCWMtMC4xLDAuMS0wLjIsMC4xLTAuMywwLjFjLTAuMSwwLTAuMSwwLjEtMC4xLDAuMWgtMC4xSDc5Yy0wLjEsMC0wLjEsMC4xLTAuMiwwLjFjLTAuMywwLjEtMC41LDAuMy0wLjcsMC40CgkJCQlDNzgsMTUsNzgsMTUuMSw3OCwxNS4xaDBsLTAuMSwwLjFsMCwwYy0wLjEsMC4xLTAuMywwLjEtMC40LDAuM2MwLDAsMCwwLTAuMSwwYy0wLjEsMC4xLTAuMywwLjEtMC40LDAuM2wtMC4xLDAuMQoJCQkJYy0wLjEsMC4xLTAuMywwLjEtMC4zLDAuM2MtMC4xLDAuMS0wLjMsMC4yLTAuNCwwLjNsMCwwYzAsMCwwLDAtMC4xLDBjMCwwLDAsMC0wLjEsMGwwLDBsMCwwYy0wLjEsMC4xLTAuMiwwLjEtMC4zLDAuM2wwLDAKCQkJCWMtMC4xLDAuMS0wLjEsMC4xLTAuMiwwLjFMNzUuNCwxN2MtMC4xLDAuMS0wLjIsMC4xLTAuMywwLjJINzVjLTAuMSwwLjEtMC4xLDAuMS0wLjMsMC4yYy0wLjEsMC4xLTAuMSwwLjEtMC4xLDAuMWwwLDBsMCwwCgkJCQljLTAuMSwwLjEtMC4zLDAuMy0wLjUsMC40bDAsMEM3NCwxOCw3NCwxOCw3NCwxOGMwLjItMC4yLDAtMC4xLDAsMGwwLDBoLTAuMWwwLDBjLTAuMSwwLjEtMC4yLDAuMi0wLjMsMC4zbDAsMAoJCQkJYy0wLjEsMC4xLTAuMSwwLjEtMC4xLDAuMWwtMC4xLDAuMWMtMC4xLDAuMS0wLjIsMC4yLTAuMywwLjNsMCwwQzczLDE4LjksNzMsMTguOSw3MywxOC45TDcyLjksMTlsMCwwbDAsMAoJCQkJYy0wLjEsMC4xLTAuMywwLjMtMC40LDAuNGwwLDBjLTAuMSwwLjEtMC4xLDAuMS0wLjEsMC4xbDAsMGwwLDBjLTAuMSwwLjEtMC4xLDAuMS0wLjIsMC4yYy0yLjMsMi41LTMuNCw0LjYtMy43LDUuMgoJCQkJYy0yLjgsNC44LTQuMywxMS00LjMsMTguM3YxOC41bC05LjgsNS43Yy0zLjIsMS40LTUsNC45LTUsOS41djU3LjV2NWMwLDcsNC4zLDE1LDkuNiwxOC4xbDUzLjIsMzAuN2MxLjYsMC45LDMuMiwxLjQsNC43LDEuNAoJCQkJYzEuNCwwLDIuNy0wLjQsMy45LTEuMWwyMy40LTEzLjVsMC4xLTAuMWMyLjYtMS43LDQuMS00LjksNC4xLTkuMXYtNjIuNWMwLTMuNS0xLjEtNy41LTMtMTFjLTEuNy0zLjItNC4xLTUuNy02LjYtNy4ybC01LTIuOAoJCQkJdi0xMWMwLTcuNS0xLjUtMTUuNy00LjYtMjMuN2wtMC4xLTAuMWMwLTAuMS0wLjEtMC4yLTAuMS0wLjNjLTAuMS0wLjQtMC4zLTAuOC0wLjUtMS4yYy0yLjYtNi42LTYuMi0xMy0xMC4zLTE4LjMKCQkJCWMtNC4zLTUuNi05LjItMTAuMS0xNC4yLTEzYy0wLjYtMC40LTEuMy0wLjctMS45LTFjLTIuMi0xLjEtNC4zLTEuOS02LjUtMi4zYy0wLjUtMC4xLTEtMC4yLTEuNS0wLjMKCQkJCUM5My4yLDExLjQsOTIuMiwxMS40LDkxLjMsMTEuNEw5MS4zLDExLjR6IE04Ny42LDU2VjQ1LjhjMC0zLjMsMC42LTYuMSwxLjYtOC4zYzEuNCwwLjIsMywwLjcsNC42LDEuNwoJCQkJYzguNSw0LjksMTUuNywxOC4zLDE2LjQsMjkuOUw4Ny42LDU2TDg3LjYsNTZ6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjRjVCRDQxIiBkPSJNMTIxLjYsMTE3LjJ2NjIuNWMwLDUuOS0zLjYsOC43LTguMSw2LjFsLTI3LjYtMTUuOUw2OC44LDE2MGwtNy45LTQuNmwtMC41LTAuMwoJCQkJYy00LjUtMi42LTguMS05LjUtOC4xLTE1LjVWNzcuMWMwLTUuOSwzLjYtOC43LDguMS02LjFsMTYuNSw5LjVsMjguNywxNi42bDcuOSw0LjZsMCwwQzExOCwxMDQuNCwxMjEuNiwxMTEuMywxMjEuNiwxMTcuMnoiLz4KCQk8L2c+CgkJPHBhdGggZmlsbD0iI0Y4RDQ2NiIgZD0iTTEwNS41LDk3LjFsLTQ0LjYsNTguM2wtMC41LTAuM2MtNC41LTIuNi04LjEtOS41LTguMS0xNS41di0yN2wyNC42LTMyTDEwNS41LDk3LjF6Ii8+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEyMy4xLDEwMS4yYy0wLjEsMC0wLjMsMC0wLjQsMGgtMC4xSDEyMmwwLDBjLTIuMy0wLjEtNC41LTAuOC02LjItMS44Yy0yLjQtMS40LTMuNi0zLjMtMy4yLTUuMlY3MC44CgkJCQkJYzAtMTMtNy45LTI4LjEtMTcuNy0zMy44Yy0yLjQtMS40LTQuNi0yLjEtNi44LTIuMWMtMC4xLDAtMC4zLDAtMC41LDBjLTEuNywyLjYtMi42LDYuNC0yLjYsMTAuOHYyMy41YzAuMSwxLjUtMC43LDIuOS0yLjQsMy45CgkJCQkJYy0wLjMsMC4yLTAuNiwwLjMtMC45LDAuNWMtMC4yLDAuMS0wLjUsMC4yLTAuNiwwLjNjLTAuMiwwLjEtMC41LDAuMS0wLjcsMC4yYy0wLjMsMC4xLTAuNywwLjItMS4xLDAuM2gtMC4xCgkJCQkJYy0wLjIsMC0wLjQsMC4xLTAuNiwwLjFoLTAuMWMtMC4yLDAtMC40LDAuMS0wLjUsMC4xaC0wLjFjLTAuMiwwLTAuMywwLTAuNSwwaC0wLjNjLTAuMSwwLTAuMywwLTAuNCwwVjc0djAuNmgtMC4xSDc2bDAsMAoJCQkJCWMtMi4zLTAuMS00LjUtMC44LTYuMi0xLjhjLTIuMy0xLjQtMy41LTMuMi0zLjMtNS4xVjQzLjNjMC02LjgsMS40LTEyLjcsMy45LTE3LjFjMC4xLTAuMSwxLTIuMywzLjMtNC43bDAuMi0wLjIKCQkJCQljMC4yLTAuMiwwLjQtMC40LDAuNi0wLjZzMC40LTAuNCwwLjYtMC42czAuNC0wLjQsMC42LTAuNnMwLjUtMC40LDAuNi0wLjZjMC4xLTAuMSwwLjItMC4yLDAuMy0wLjNsMC4xLTAuMXYtMC4zaDAuNAoJCQkJCWMwLjEtMC4xLDAuMy0wLjIsMC4zLTAuMmMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuM2MwLjEtMC4xLDAuMy0wLjIsMC40LTAuM2MwLjEtMC4xLDAuMy0wLjIsMC40LTAuM2MwLDAsMC4zLTAuMiwwLjUtMC4zCgkJCQkJbDAuMi0wLjFjMC4zLTAuMiwwLjYtMC40LDEtMC41YzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4xYzAuMS0wLjEsMC4xLTAuMSwwLjMtMC4xYzAuMi0wLjEsMC40LTAuMiwwLjYtMC4zCgkJCQkJYzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4xYzAuMSwwLDAuMS0wLjEsMC4yLTAuMWMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuMWMwLjEtMC4xLDAuMy0wLjEsMC41LTAuMmMwLjEtMC4xLDAuMy0wLjEsMC41LTAuMmgwLjEKCQkJCQljMC4yLTAuMSwwLjMtMC4xLDAuNS0wLjJjMC4yLTAuMSwwLjMtMC4xLDAuNS0wLjJoMC4xYzAuMS0wLjEsMC4zLTAuMSwwLjUtMC4xYzAuMS0wLjEsMC4zLTAuMSwwLjUtMC4xbDAuMi0wLjEKCQkJCQljMC4xLTAuMSwwLjMtMC4xLDAuNC0wLjFjMC4xLTAuMSwwLjMtMC4xLDAuNS0wLjFoMC4xYzAuMi0wLjEsMC4zLTAuMSwwLjUtMC4xYzAuMi0wLjEsMC40LTAuMSwwLjYtMC4xCgkJCQkJYzEuMi0wLjMsMi41LTAuNSwzLjctMC41YzAuOCwwLDEuNiwwLjEsMi41LDAuMmMyLjksMC40LDUuOSwxLjUsOSwzLjNjMTUuNyw5LjEsMjguNSwzMy41LDI4LjUsNTQuNHYyNS40bC0wLjEtMC4xCgkJCQkJYy0wLjMsMS4xLTEsMi4xLTIuMywyLjhjLTAuMywwLjItMC42LDAuMy0wLjksMC41Yy0wLjMsMC4xLTAuNSwwLjItMC42LDAuM2MtMC4yLDAuMS0wLjUsMC4xLTAuNywwLjJjLTAuMywwLjEtMC43LDAuMi0xLjEsMC4zCgkJCQkJaC0wLjFjLTAuMiwwLTAuNCwwLjEtMC42LDAuMWgtMC4xYy0wLjIsMC0wLjQsMC4xLTAuNSwwLjFoLTAuMWMtMC4yLDAtMC40LDAtMC42LDBMMTIzLjEsMTAxLjJ6Ii8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8cGF0aCBmaWxsPSIjMjIxRjIwIiBkPSJNOTEuMiwxNC41YzAuOCwwLDEuNSwwLjEsMi40LDAuMmMyLjgsMC40LDUuNywxLjQsOC44LDMuMmMxNS41LDksMjguMiwzMy4xLDI4LjIsNTMuOXYyNC4zbDAsMAoJCQkJCWMwLjEsMS4yLTAuNiwyLjUtMi4xLDMuNGMtMC4zLDAuMS0wLjYsMC4zLTAuOCwwLjRjLTAuMiwwLjEtMC40LDAuMS0wLjYsMC4zYy0wLjIsMC4xLTAuNSwwLjEtMC42LDAuMmMtMC4zLDAuMS0wLjYsMC4xLTEsMC4yCgkJCQkJbDAsMGMtMC4yLDAuMS0wLjQsMC4xLTAuNiwwLjFjLTAuMSwwLTAuMSwwLTAuMSwwYy0wLjIsMC0wLjMsMC4xLTAuNSwwLjFjLTAuMSwwLTAuMSwwLTAuMSwwYy0wLjIsMC0wLjMsMC0wLjUsMAoJCQkJCWMtMC4xLDAtMC4xLDAtMC4xLDBzLTAuMSwwLTAuMiwwcy0wLjMsMC0wLjQsMGwwLDBsMCwwbDAsMGwwLDBjLTIuMy0wLjEtNC42LTAuNi02LjUtMS43Yy0yLjMtMS4zLTMuMy0zLTMtNC42VjcwLjkKCQkJCQljMC0xMy4yLTguMS0yOC42LTE3LjktMzQuM2MtMi41LTEuNS01LTIuMS03LjEtMi4xYy0wLjMsMC0wLjUsMC0wLjgsMGwwLDBsMCwwYy0xLjksMi43LTIuOSw2LjYtMi45LDExLjR2MjMuNgoJCQkJCWMwLjEsMS4yLTAuNiwyLjUtMi4xLDMuM2MtMC4zLDAuMS0wLjYsMC4zLTAuOCwwLjRjLTAuMiwwLjEtMC40LDAuMS0wLjYsMC4zYy0wLjIsMC4xLTAuNSwwLjEtMC42LDAuMmMtMC4zLDAuMS0wLjYsMC4xLTEsMC4yCgkJCQkJbDAsMEM3OS41LDc0LDc5LjMsNzQsNzkuMSw3NEM3OSw3NCw3OSw3NCw3OSw3NGMtMC4yLDAtMC4zLDAuMS0wLjUsMC4xYy0wLjEsMC0wLjEsMC0wLjEsMGMtMC4yLDAtMC4zLDAtMC41LDAKCQkJCQljLTAuMSwwLTAuMSwwLTAuMiwwcy0wLjEsMC0wLjEsMGMtMC4xLDAtMC4zLDAtMC40LDBsMCwwbDAsMGMwLDAsMCwwLTAuMSwwbDAsMGMtMi4zLTAuMS00LjYtMC42LTYuNS0xLjdjLTIuMi0xLjMtMy4yLTMtMy00LjUKCQkJCQlWNDMuM2MwLTcsMS40LTEyLjYsMy45LTE2LjhsMCwwYzAsMCwxLTIuMSwzLjItNC41YzAuMS0wLjEsMC4xLTAuMSwwLjItMC4yYzAuMi0wLjIsMC40LTAuNCwwLjYtMC42czAuNC0wLjQsMC42LTAuNQoJCQkJCWMwLjItMC4yLDAuNC0wLjQsMC42LTAuNWMwLjItMC4yLDAuNS0wLjQsMC42LTAuNXMwLjMtMC4yLDAuMy0wLjNjMC4xLTAuMSwwLjMtMC4yLDAuMy0wLjNsMCwwYzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4zCgkJCQkJbDAuMS0wLjFjMC4xLTAuMSwwLjItMC4xLDAuMy0wLjNjMC4xLTAuMSwwLjMtMC4yLDAuNC0wLjNjMC4xLTAuMSwwLjMtMC4yLDAuNC0wLjNjMC4xLTAuMSwwLjMtMC4yLDAuNC0wLjMKCQkJCQljMC4xLDAsMC4xLTAuMSwwLjItMC4xYzAuMy0wLjIsMC42LTAuNCwxLTAuNWMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuMWMwLjEtMC4xLDAuMS0wLjEsMC4yLTAuMWMwLjItMC4xLDAuNC0wLjIsMC42LTAuMwoJCQkJCWMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuMWMwLjEsMCwwLjEtMC4xLDAuMi0wLjFjMC4xLTAuMSwwLjItMC4xLDAuMy0wLjFjMC4xLTAuMSwwLjMtMC4xLDAuNS0wLjJjMC4xLTAuMSwwLjMtMC4xLDAuNS0wLjJsMCwwCgkJCQkJYzAuMS0wLjEsMC4zLTAuMSwwLjUtMC4ybDAsMGMwLjEtMC4xLDAuMy0wLjEsMC41LTAuMWMwLDAsMCwwLDAuMSwwYzAuMS0wLjEsMC4zLTAuMSwwLjUtMC4xYzAuMS0wLjEsMC4zLTAuMSwwLjUtMC4xCgkJCQkJYzAuMSwwLDAuMSwwLDAuMi0wLjFzMC4zLTAuMSwwLjQtMC4xYzAuMS0wLjEsMC4zLTAuMSwwLjUtMC4xYzAuMSwwLDAuMSwwLDAuMSwwYzAuMi0wLjEsMC4zLTAuMSwwLjUtMC4xCgkJCQkJYzAuMi0wLjEsMC40LTAuMSwwLjYtMC4xQzg4LjcsMTQuNiw5MCwxNC41LDkxLjIsMTQuNSBNOTEuMiwxMy4zTDkxLjIsMTMuM2MtMS40LDAtMi42LDAuMS0zLjksMC41Yy0wLjIsMC0wLjQsMC4xLTAuNSwwLjEKCQkJCQljLTAuMiwwLTAuMywwLjEtMC41LDAuMWMtMC4xLDAtMC4xLDAtMC4xLDBjLTAuMiwwLTAuNCwwLTAuNSwwYy0wLjEsMC4xLTAuMywwLjEtMC41LDAuMWwtMC4xLDAuMUg4NWMtMC4yLDAuMS0wLjMsMC4xLTAuNSwwLjEKCQkJCQljLTAuMSwwLjEtMC4zLDAuMS0wLjUsMC4xbDAsMGwwLDBsMCwwYy0wLjIsMC4xLTAuMywwLjEtMC41LDAuMmwwLDBsMCwwYy0wLjEsMC4xLTAuMywwLjEtMC41LDAuMmwwLDAKCQkJCQljLTAuMSwwLjEtMC4zLDAuMS0wLjUsMC4yYy0wLjIsMC4xLTAuMywwLjEtMC41LDAuMmMtMC4xLDAuMS0wLjIsMC4xLTAuMywwLjFjLTAuMSwwLTAuMSwwLjEtMC4yLDAuMWMtMC4xLDAuMS0wLjIsMC4xLTAuMywwLjEKCQkJCQljLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4zYy0wLjEsMC4xLTAuMSwwLjEtMC4zLDAuMUM4MC4yLDE2LDgwLjEsMTYsODAsMTZjLTAuMywwLjItMC43LDAuNC0xLDAuNmwtMC4xLDAuMWwtMC4xLDAuMWwwLDBsMCwwCgkJCQkJYy0wLjEsMC4xLTAuMywwLjEtMC40LDAuMmgtMC4xbDAsMGwwLDBjLTAuMSwwLjEtMC4zLDAuMi0wLjQsMC4zYy0wLjEsMC4xLTAuMywwLjItMC40LDAuM2MtMC4xLDAuMS0wLjMsMC4xLTAuMywwLjNMNzcuMSwxOAoJCQkJCWwwLDBsMCwwaC0wLjh2MC42Yy0wLjEsMC4xLTAuMiwwLjEtMC4zLDAuMmMtMC4zLDAuMi0wLjUsMC40LTAuNywwLjZjLTAuMywwLjItMC41LDAuNC0wLjYsMC42Yy0wLjIsMC4yLTAuNCwwLjQtMC42LDAuNgoJCQkJCXMtMC40LDAuNC0wLjYsMC42Yy0wLjEsMC4xLTAuMSwwLjEtMC4yLDAuM2MtMi4yLDIuNC0zLjIsNC41LTMuNCw0LjhjLTIuNiw0LjUtNCwxMC41LTQsMTcuNHYyNC4xYy0wLjMsMi4xLDEsNC4yLDMuNSw1LjcKCQkJCQljMS43LDEsMy43LDEuNiw1LjksMS44djAuMWwxLjIsMC4xaDAuMWwwLDBsMCwwYzAuMSwwLDAuMywwLDAuNCwwaDAuMWMwLjEsMCwwLjEsMCwwLjIsMGMwLjIsMCwwLjQsMCwwLjUsMEg3OAoJCQkJCWMwLjEsMCwwLjEsMCwwLjEsMGMwLjIsMCwwLjQsMCwwLjYtMC4xaDAuMWgwLjFjMC4yLDAsMC40LTAuMSwwLjYtMC4xbDAsMGgwLjFjMC40LTAuMSwwLjgtMC4xLDEuMi0wLjMKCQkJCQljMC4zLTAuMSwwLjUtMC4xLDAuNy0wLjJjMC4zLTAuMSwwLjUtMC4yLDAuNy0wLjNjMC40LTAuMSwwLjctMC4zLDEtMC41YzEuOS0xLjEsMi44LTIuNywyLjctNC41VjQ2YzAtNC4xLDAuOC03LjcsMi40LTEwLjIKCQkJCQljMC4xLDAsMC4xLDAsMC4xLDBjMi4xLDAsNC4yLDAuNiw2LjUsMmM5LjUsNS41LDE3LjQsMjAuNSwxNy40LDMzLjJ2MjMuNGMtMC40LDIuMSwxLDQuMywzLjUsNS43YzEuNywxLDMuNywxLjYsNS45LDEuOHYwLjEKCQkJCQlsMS4yLDAuMWgwLjFsMCwwYzAuMSwwLDAuMywwLDAuNCwwczAuMSwwLDAuMiwwczAuMSwwLDAuMSwwYzAuMiwwLDAuNCwwLDAuNiwwaDAuMWgwLjFjMC4yLDAsMC40LDAsMC42LTAuMWgwLjFoMC4xCgkJCQkJYzAuMiwwLDAuNC0wLjEsMC42LTAuMWwwLDBsMCwwbDAsMGgwLjFjMC40LTAuMSwwLjgtMC4xLDEuMi0wLjNjMC4zLTAuMSwwLjUtMC4xLDAuNy0wLjJjMC4zLTAuMSwwLjUtMC4xLDAuNy0wLjMKCQkJCQljMC40LTAuMSwwLjctMC4zLDEtMC41YzEuMS0wLjYsMS45LTEuNSwyLjMtMi41bDAuNCwwLjN2LTIuMlY3MmMwLTEwLjMtMy0yMS41LTguNC0zMS45cy0xMi42LTE4LjUtMjAuNC0yMwoJCQkJCWMtMy4yLTEuOC02LjMtMy05LjItMy40QzkyLjksMTMuMyw5MiwxMy4zLDkxLjIsMTMuM0w5MS4yLDEzLjN6Ii8+CgkJCTwvZz4KCQk8L2c+CgkJPHBhdGggZmlsbD0iI0Y4RDQ2NiIgZD0iTTEyMS42LDExNy4ydjYuMWwtMzUuNyw0Ni41TDY4LjgsMTYwbDQ0LjYtNTguM0MxMTgsMTA0LjQsMTIxLjYsMTExLjMsMTIxLjYsMTE3LjJ6Ii8+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiMyMjFGMjAiIGQ9Ik0xMTYuNywxODcuNGMtMS4xLDAtMi4zLTAuMy0zLjUtMUw2MCwxNTUuNmMtNC42LTIuNi04LjQtOS45LTguNC0xNlY3Ny4yYzAtNC42LDIuMS03LjcsNS41LTcuNwoJCQkJYzEuMSwwLDIuMywwLjMsMy41LDFsNTMuMiwzMC43YzQuNiwyLjYsOC40LDkuOSw4LjQsMTZ2NjIuNUMxMjIuMiwxODQuNCwxMjAsMTg3LjQsMTE2LjcsMTg3LjR6IE01Ny4xLDcwLjcKCQkJCWMtMi42LDAtNC4zLDIuNS00LjMsNi41djYyLjVjMCw1LjcsMy41LDEyLjUsNy44LDE0LjlsNTMuMiwzMC43YzEsMC42LDIsMC45LDIuOSwwLjljMi42LDAsNC4zLTIuNSw0LjMtNi41di02Mi41CgkJCQljMC01LjctMy41LTEyLjUtNy44LTE0LjlMNjAsNzEuNkM1OSw3MSw1OCw3MC43LDU3LjEsNzAuN3oiLz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iI0YwOTkzOCIgZD0iTTk3LjcsMTIwLjdjMCw1LTEuOSw4LjMtNC45LDlWMTQ2YzAsMC45LTAuMSwxLjctMC4zLDIuNGMtMC44LDIuNC0yLjgsMy4yLTUuMiwxLjgKCQkJCQljLTMuMS0xLjctNS41LTYuNS01LjUtMTAuNnYtMTYuM2MtMy00LjItNC45LTkuNy00LjktMTQuN2MwLTcuNiw0LjYtMTEuMiwxMC4zLThjMC4xLDAsMC4xLDAuMSwwLjIsMC4xCgkJCQkJQzkzLDEwNCw5Ny43LDExMyw5Ny43LDEyMC43eiIvPgoJCQk8L2c+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iIzIyMUYyMCIgZD0iTTg5LjQsMTUxLjVjLTAuOCwwLTEuNy0wLjMtMi41LTAuOGMtMy4yLTEuOS01LjktNi44LTUuOS0xMS4ydi0xNi4xYy0zLjEtNC41LTQuOS0xMC00LjktMTQuOQoJCQkJCWMwLTIuOSwwLjYtNS40LDEuOS03LjFjMS4yLTEuNywzLTIuNyw1LTIuN2MxLjQsMCwyLjgsMC40LDQuMywxLjJjMC4xLDAsMC4xLDAuMSwwLjIsMC4xYzUuOSwzLjQsMTAuOCwxMi42LDEwLjgsMjAuNgoJCQkJCWMwLDQuOS0xLjgsOC40LTQuOSw5LjVWMTQ2YzAsMS0wLjEsMS44LTAuNCwyLjZDOTIuNCwxNTAuNCw5MS4xLDE1MS41LDg5LjQsMTUxLjV6IE04My4xLDEwMGMtMS42LDAtMywwLjgtNC4xLDIuMgoJCQkJCWMtMS4xLDEuNS0xLjcsMy43LTEuNyw2LjRjMCw0LjcsMS44LDEwLjEsNC44LDE0LjNsMC4xLDAuMXYxNi41YzAsMy45LDIuMyw4LjQsNS4yLDEwLjFjMC42LDAuNCwxLjMsMC42LDEuOSwwLjYKCQkJCQljMS4xLDAsMi0wLjcsMi41LTIuMWMwLjItMC42LDAuMy0xLjQsMC4zLTIuMnYtMTYuOGwwLjUtMC4xYzIuOC0wLjcsNC41LTMuOSw0LjUtOC40YzAtNy41LTQuNi0xNi4zLTEwLjItMTkuNQoJCQkJCWMtMC4xLDAtMC4xLTAuMS0wLjEtMC4xQzg1LjQsMTAwLjQsODQuMiwxMDAsODMuMSwxMDB6Ii8+CgkJCTwvZz4KCQk8L2c+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiMyMjFGMjAiIGQ9Ik05Ny43LDEyMC43YzAsNS0xLjksOC4zLTQuOSw5VjE0NmMwLDAuOS0wLjEsMS43LTAuMywyLjRjLTItMi4zLTMuNC01LjctMy40LTguOHYtMTYuMwoJCQkJYy0zLTQuMi00LjktOS43LTQuOS0xNC43YzAtMy44LDEuMS02LjYsMy04YzAuMSwwLDAuMSwwLjEsMC4yLDAuMUM5MywxMDQsOTcuNywxMTMsOTcuNywxMjAuN3oiLz4KCQk8L2c+CgkJPGc+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iI0QwRDJEMyIgZD0iTTEzMC41LDcxLjdjMC0yMC44LTEyLjYtNDQuOC0yOC4yLTUzLjljLTMuMS0xLjctNi0yLjgtOC44LTMuMmMtMi4xLTAuMy00LjEtMC4yLTYsMC4zCgkJCQkJYy02LjUsMS0xMC44LDQuMy0xMy40LDcuMmMxLjYtMC43LDMuNC0xLjIsNS41LTEuNWMxLjktMC41LDMuOS0wLjYsNi0wLjNjMi44LDAuNCw1LjcsMS40LDguOCwzLjJjMTUuNSw5LDI4LjIsMzMuMSwyOC4yLDUzLjkKCQkJCQl2MjMuM2MyLjEsMC4xLDQuMy0wLjMsNS44LTEuMmMxLjUtMC45LDIuMi0yLjEsMi4xLTMuNGwwLDBMMTMwLjUsNzEuN0wxMzAuNSw3MS43eiIvPgoJCQk8L2c+CgkJCTxnPgoJCQkJPHBhdGggZmlsbD0iI0QwRDJEMyIgZD0iTTg3LjQsMzQuNEw4Ny40LDM0LjRMODcuNCwzNC40Yy0xLjksMi43LTIuOSw2LjYtMi45LDExLjR2MjMuNmMwLjEsMS4yLTAuNiwyLjUtMi4xLDMuMwoJCQkJCWMtMC4zLDAuMS0wLjYsMC4zLTAuOCwwLjRjLTAuMiwwLjEtMC40LDAuMS0wLjYsMC4zYy0wLjIsMC4xLTAuNSwwLjEtMC42LDAuMmMtMC4zLDAuMS0wLjYsMC4xLTEsMC4ybDAsMAoJCQkJCWMtMC44LDAuMS0xLjcsMC4yLTIuNiwwLjJWNTEuNGMwLTQuOCwxLjEtOC43LDIuOS0xMS40QzgwLjYsMzgsODQuNCwzNC44LDg3LjQsMzQuNEM4Ny4zLDM0LjQsODcuMywzNC40LDg3LjQsMzQuNHoiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iTGF5ZXJfMl8yXyI+CjwvZz4KPC9zdmc+Cg==\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"mail\",\n \"name\": \"mail\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9Ijc5MC40cHgiIGhlaWdodD0iNjIyLjlweCIgdmlld0JveD0iMCAwIDc5MC40IDYyMi45IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3OTAuNCA2MjIuOSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iI0ZGQjIxQSIgcG9pbnRzPSI1NDYuNywyMDAuNCA1NDYuNyw0ODQuMiA1NDYuNCw0ODQuNCA1MTguMSw1MDAuNyA1MTguMSwyMTYuNiA1MTguMywyMTYuNSA1NDYuNCwyMDAuMyAJCSIvPgoJCTxnPgoJCQk8cG9seWdvbiBmaWxsPSIjRkZCMjFBIiBwb2ludHM9IjUxOC4zLDIxNi42IDUxOC4zLDUwMC43IDE5MS42LDMxMi4xIDE5MS42LDI4IDE5Mi45LDI4LjggNTE4LjEsMjE2LjUgCQkJIi8+CgkJCQoJCQkJPHBhdGggZmlsbD0iI0ZGQzkzRSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSIKCQkJCU01MTcsNTAwLjRMMTkxLjgsMzEyLjdMMzEyLDI0Ny4xbDIxLjYsMzkuNmM3LDEyLjksMjMuMiwxNy43LDM2LjEsMTAuNmwyOC4xLTE1LjNMNTE3LDUwMC40eiIvPgoJCQk8cGF0aCBkPSJNNTE5LjEsMjE2LjZjLTE3Ny4zLDExNy42LTE1MC4xLDE1Mi4xLTIxMiwzMi43QzI4NC4zLDIwNS4yLDIxNC4yLDcyLDE5MS42LDI4QzI2My43LDczLjcsNDYzLDIxNCw1MTkuMSwyMTYuNnoiLz4KCQkJCgkJCQk8cGF0aCBmaWxsPSIjRkZDOTNFIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9IgoJCQkJTTUxOC4xLDIxNi41bC0xMjAuMiw2NS42bC0yNC4xLDEzLjJjLTE1LjEsOC4yLTM0LjEsMi43LTQyLjMtMTIuNGwtNC44LTguOWwtMTIuNS0yMi44bC0yLjItNGwtNi41LTExLjlMMjcyLDE3My44bC03OS4xLTE0NQoJCQkJbDE2Ny4yLDk2LjZsNzAuOSw0MC45bDE4LjMsMTAuNWwyNi4zLDE1LjJMNTE4LjEsMjE2LjV6Ii8+CgkJCQoJCQkJPHBvbHlnb24gZmlsbD0iI0ZGRDY3QiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IgoJCQkJMTkxLjYsMjguMSA1MTguMSwyMTYuNiA1NDYuNCwyMDAuMyAyMjAsMTEuOCAJCQkiLz4KCQkJPHBvbHlnb24gZmlsbD0iI0YwRjdGRiIgcG9pbnRzPSIyMDAsMzAuMyAyNDEuMyw1NC4xIDI2MS44LDQzLjEgMjE5LjgsMTguOSAJCQkiLz4KCQkJPHBvbHlsaW5lIGZpbGw9IiNGMEY3RkYiIHBvaW50cz0iMjg0LjUsNTYuNiAyNjQuOCw2OCAyNTEuOCw2MC41IDI3MS42LDQ5LjEgCQkJIi8+CgkJCTxwb2x5Z29uIGZpbGw9IiNGMEY3RkYiIHBvaW50cz0iMjU2LjEsNjggMjExLjcsNTguNSAyMTEuNywyOTkuMyAyNDEuMywzMzMuNyAyMDAuOCwzMTAuNCAxOTcuNiwzMDcgMTk3LjcsNDIuMyAxOTguOCwzNC45IAkJCQoJCQkJIi8+CgkJCTxwYXRoIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzIzMUYyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIGQ9Ik03MjAuMiwzNzIuMmwtMTYzLjctOTguNnYyMTYuN2wxNjMuNy05OC42CgkJCQlDNzI3LjUsMzg3LjIsNzI3LjUsMzc2LjYsNzIwLjIsMzcyLjJ6Ii8+CgkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yMjAuOCwwLjVMMjE5LjksMGwtMzguNSwyMi4ybC0wLjEsMjk0Ljh2MWwzMzYsMTkzLjlsMC45LDAuNWwzOC4zLTIyLjFsMC4zLTI5NC43bDAtMUwyMjAuOCwwLjV6CgkJCQkgTTMwOSwyNDYuMkwxOTcuNiwzMDdsMC4xLTI2NC43TDMwOSwyNDYuMnogTTE5OC44LDM0LjlsMzE0LjYsMTgxLjZsLTE0Ni4xLDc5LjdjLTExLjEsNi0yNC45LDItMzAuOS05LjFsLTIzLjQtNDNsMCwwCgkJCQlMMTk4LjgsMzQuOXogTTMxMS4xLDI1MC4ybDIwLjYsMzcuN2M3LjYsMTQsMjUuMSwxOS4xLDM5LDExLjVsMjYuMi0xNC4zbDExMC4yLDIwMi4xTDIwMC44LDMxMC40TDMxMS4xLDI1MC4yeiBNNDAwLjksMjgzCgkJCQlsMTE0LjktNjIuN3YyNzEuOWwtMS4yLTAuN0w0MDAuOSwyODN6IE0yMDAsMzAuM2wxOS44LTExLjRMNTM4LDIwMi42TDUxOC4yLDIxNEwyMDAsMzAuM3ogTTUyMC4zLDIxNy45bDIuMS0xLjJsMC4yLTAuMWwwLDAKCQkJCWwxNy43LTEwLjJsLTAuMiwyNzQuNWwtMTkuOCwxMS40TDUyMC4zLDIxNy45TDUyMC4zLDIxNy45eiIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"mailmultiple\",\n \"name\": \"mailmultiple\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9Ijc5MC40cHgiIGhlaWdodD0iNjIyLjlweCIgdmlld0JveD0iMCAwIDc5MC40IDYyMi45IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3OTAuNCA2MjIuOSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iI0ZGQjIxQSIgcG9pbnRzPSI1ODcuOSwyMDcuOSA1ODcuOSw0NzUuNCA1ODcuNiw0NzUuNiA1NjAuOSw0OTEgNTYwLjksMjIzLjIgNTYxLjEsMjIzLjEgNTg3LjYsMjA3LjggCQkiLz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0iI0ZGQjIxQSIgcG9pbnRzPSI1NjEuMSwyMjMuMiA1NjEuMSw0OTEgMjUzLjIsMzEzLjIgMjUzLjIsNDUuNCAyNTQuNCw0Ni4xIDU2MC45LDIyMy4xIAkJCSIvPgoJCQkKCQkJCTxwYXRoIGZpbGw9IiNGRkM5M0UiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iCgkJCQlNNTU5LjksNDkwLjdsLTMwNi41LTE3N0wzNjYuNywyNTJsMjAuNCwzNy40YzYuNiwxMi4yLDIxLjksMTYuNywzNC4xLDEwbDI2LjUtMTQuNEw1NTkuOSw0OTAuN3oiLz4KCQkJPHBhdGggZD0iTTU2MS45LDIyMy4yQzM5NC44LDMzNCw0MjAuNCwzNjYuNSwzNjIuMSwyNTRjLTIxLjUtNDEuNS04Ny42LTE2Ny0xMDguOS0yMDguNkMzMjEuMiw4OC41LDUwOS4xLDIyMC43LDU2MS45LDIyMy4yeiIvPgoJCQkKCQkJCTxwYXRoIGZpbGw9IiNGRkM5M0UiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iCgkJCQlNNTYwLjksMjIzLjFsLTExMy4zLDYxLjhsLTIyLjcsMTIuNGMtMTQuMyw3LjgtMzIuMSwyLjUtMzkuOS0xMS43bC00LjYtOC40bC0xMS43LTIxLjVsLTItMy43bC02LjEtMTEuMmwtMzEuNi01OEwyNTQuNCw0Ni4xCgkJCQlsMTU3LjYsOTFsNjYuOCwzOC42bDE3LjIsOS45bDI0LjgsMTQuM0w1NjAuOSwyMjMuMXoiLz4KCQkJCgkJCQk8cG9seWdvbiBmaWxsPSIjRkZENjdCIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iCgkJCQkyNTMuMiw0NS41IDU2MC45LDIyMy4yIDU4Ny42LDIwNy44IDI3OS45LDMwLjEgCQkJIi8+CgkJCTxwb2x5Z29uIGZpbGw9IiNGMEY3RkYiIHBvaW50cz0iMjYxLjEsNDcuNiAzMDAsNzAgMzE5LjMsNTkuNiAyNzkuOCwzNi44IAkJCSIvPgoJCQk8cG9seWxpbmUgZmlsbD0iI0YwRjdGRiIgcG9pbnRzPSIzNDAuNyw3Mi40IDMyMi4yLDgzLjEgMzA5LjksNzYgMzI4LjYsNjUuMiAJCQkiLz4KCQkJPHBvbHlnb24gZmlsbD0iI0YwRjdGRiIgcG9pbnRzPSIzMTQsODMuMSAyNzIuMSw3NC4yIDI3Mi4xLDMwMS4xIDMwMCwzMzMuNiAyNjEuOCwzMTEuNSAyNTguOCwzMDguNCAyNTguOSw1OC44IDI2MCw1MS45IAkJCSIvPgoJCQk8cGF0aCBvcGFjaXR5PSIwLjQiIGZpbGw9IiMyMzFGMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBkPSJNNzUxLjQsMzY5LjhsLTE1NC4zLTkzdjIwNC4zbDE1NC4zLTkzCgkJCQlDNzU4LjMsMzg0LDc1OC4zLDM3NCw3NTEuNCwzNjkuOHoiLz4KCQkJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTI4MC43LDE5LjVsLTAuOC0wLjVsLTM2LjMsMjAuOWwtMC4xLDI3Ny45djFsMzE2LjcsMTgyLjhsMC44LDAuNWwzNi4xLTIwLjlsMC4yLTI3Ny44di0xTDI4MC43LDE5LjV6CgkJCQkgTTM2My44LDI1MS4xbC0xMDUsNTcuM2wwLjEtMjQ5LjVMMzYzLjgsMjUxLjF6IE0yNjAsNTEuOWwyOTYuNiwxNzEuMmwtMTM3LjgsNzUuMWMtMTAuNCw1LjctMjMuNSwxLjgtMjkuMi04LjZsLTIyLjEtNDAuNWwwLDAKCQkJCUwyNjAsNTEuOXogTTM2NS44LDI1NC44bDE5LjQsMzUuNmM3LjIsMTMuMiwyMy43LDE4LDM2LjgsMTAuOGwyNC43LTEzLjVsMTAzLjksMTkwLjVMMjYxLjgsMzExLjVMMzY1LjgsMjU0Ljh6IE00NTAuNSwyODUuNwoJCQkJbDEwOC40LTU5LjF2MjU2LjNsLTEuMi0wLjdMNDUwLjUsMjg1Ljd6IE0yNjEuMSw0Ny42bDE4LjctMTAuOGwyOTkuOSwxNzMuMUw1NjEsMjIwLjdMMjYxLjEsNDcuNnogTTU2MywyMjQuNGwyLTEuMWwwLjItMC4xbDAsMAoJCQkJbDE2LjctOS43bC0wLjIsMjU4LjdMNTYzLDQ4M1YyMjQuNEw1NjMsMjI0LjR6Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iI0ZGQjIxQSIgcG9pbnRzPSI1MzEuMywyMzYuMiA1MzEuMyw1MDMuNyA1MzEuMSw1MDMuOCA1MDQuNCw1MTkuMiA1MDQuNCwyNTEuNSA1MDQuNSwyNTEuNCA1MzEuMSwyMzYgCQkiLz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0iI0ZGQjIxQSIgcG9pbnRzPSI1MDQuNSwyNTEuNSA1MDQuNSw1MTkuMiAxOTYuNiwzNDEuNSAxOTYuNiw3My43IDE5Ny45LDc0LjQgNTA0LjQsMjUxLjQgCQkJIi8+CgkJCQoJCQkJPHBhdGggZmlsbD0iI0ZGQzkzRSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSIKCQkJCU01MDMuMyw1MTlMMTk2LjgsMzQybDExMy4zLTYxLjhsMjAuNCwzNy40YzYuNiwxMi4yLDIxLjksMTYuNywzNC4xLDEwbDI2LjUtMTQuNEw1MDMuMyw1MTl6Ii8+CgkJCTxwYXRoIGQ9Ik01MDUuMywyNTEuNWMtMTY3LjEsMTEwLjgtMTQxLjUsMTQzLjMtMTk5LjgsMzAuOGMtMjEuNS00MS41LTg3LjYtMTY3LTEwOC45LTIwOC42QzI2NC42LDExNi44LDQ1Mi41LDI0OSw1MDUuMywyNTEuNXoiCgkJCQkvPgoJCQkKCQkJCTxwYXRoIGZpbGw9IiNGRkM5M0UiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iCgkJCQlNNTA0LjQsMjUxLjRsLTExMy4zLDYxLjhsLTIyLjcsMTIuNGMtMTQuMyw3LjgtMzIuMSwyLjUtMzkuOS0xMS43bC00LjYtOC40TDMxMi4yLDI4NGwtMi0zLjdMMzA0LDI2OWwtMzEuNi01OEwxOTcuOSw3NC40CgkJCQlsMTU3LjYsOTFsNjYuOCwzOC42bDE3LjIsOS45bDI0LjgsMTQuM0w1MDQuNCwyNTEuNHoiLz4KCQkJCgkJCQk8cG9seWdvbiBmaWxsPSIjRkZENjdCIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iCgkJCQkxOTYuNiw3My44IDUwNC40LDI1MS41IDUzMS4xLDIzNiAyMjMuNCw1OC40IAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjRjBGN0ZGIiBwb2ludHM9IjIwNC42LDc1LjggMjQzLjUsOTguMyAyNjIuOCw4Ny45IDIyMy4yLDY1LjEgCQkJIi8+CgkJCTxwb2x5bGluZSBmaWxsPSIjRjBGN0ZGIiBwb2ludHM9IjI4NC4yLDEwMC42IDI2NS42LDExMS4zIDI1My4zLDEwNC4zIDI3Miw5My41IAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjRjBGN0ZGIiBwb2ludHM9IjI1Ny40LDExMS4zIDIxNS41LDEwMi40IDIxNS41LDMyOS40IDI0My41LDM2MS45IDIwNS4zLDMzOS44IDIwMi4zLDMzNi42IDIwMi40LDg3LjEgCgkJCQkyMDMuNCw4MC4yIAkJCSIvPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMjI0LjEsNDcuOGwtMC44LTAuNUwxODcsNjguMkwxODYuOSwzNDZ2MWwzMTYuNywxODIuOGwwLjgsMC41bDM2LjEtMjAuOWwwLjItMjc3Ljh2LTFMMjI0LjEsNDcuOHoKCQkJCSBNMzA3LjMsMjc5LjRsLTEwNSw1Ny4zbDAuMS0yNDkuNUwzMDcuMywyNzkuNHogTTIwMy40LDgwLjJMNTAwLDI1MS4zbC0xMzcuOCw3NS4xYy0xMC40LDUuNy0yMy41LDEuOC0yOS4yLTguNmwtMjItNDAuNGwwLDAKCQkJCUwyMDMuNCw4MC4yeiBNMzA5LjMsMjgzLjFsMTkuNCwzNS42YzcuMiwxMy4yLDIzLjcsMTgsMzYuOCwxMC44bDI0LjctMTMuNWwxMDMuOSwxOTAuNUwyMDUuMywzMzkuOEwzMDkuMywyODMuMXogTTM5My45LDMxNAoJCQkJbDEwOC40LTU5LjF2MjU2LjNsLTEuMi0wLjdMMzkzLjksMzE0eiBNMjA0LjYsNzUuOEwyMjMuMyw2NWwyOTkuOSwxNzMuMUw1MDQuNSwyNDlMMjA0LjYsNzUuOHogTTUwNi41LDI1Mi43bDItMS4xbDAuMi0wLjFsMCwwCgkJCQlsMTYuNy05LjdsLTAuMiwyNTguN2wtMTguNywxMC44VjI1Mi43TDUwNi41LDI1Mi43eiIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwb2x5Z29uIGZpbGw9IiNGRkIyMUEiIHBvaW50cz0iNDc0LjcsMjczLjkgNDc0LjcsNTQxLjQgNDc0LjUsNTQxLjUgNDQ3LjgsNTU3IDQ0Ny44LDI4OS4yIDQ0OCwyODkuMSA0NzQuNSwyNzMuNyAJCSIvPgoJCTxnPgoJCQk8cG9seWdvbiBmaWxsPSIjRkZCMjFBIiBwb2ludHM9IjQ0OCwyODkuMiA0NDgsNTU3IDE0MCwzNzkuMiAxNDAsMTExLjQgMTQxLjMsMTEyLjEgNDQ3LjgsMjg5LjEgCQkJIi8+CgkJCQoJCQkJPHBhdGggZmlsbD0iI0ZGQzkzRSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSIKCQkJCU00NDYuOCw1NTYuN2wtMzA2LjUtMTc3bDExMy4zLTYxLjhsMjAuNCwzNy40YzYuNiwxMi4yLDIxLjksMTYuNywzNC4xLDEwbDI2LjUtMTQuNEw0NDYuOCw1NTYuN3oiLz4KCQkJPHBhdGggZD0iTTQ0OC44LDI4OS4yQzI4MS43LDQwMCwzMDcuMyw0MzIuNSwyNDksMzE5LjljLTIxLjUtNDEuNS04Ny42LTE2Ny0xMDguOS0yMDguNkMyMDguMSwxNTQuNSwzOTUuOSwyODYuNyw0NDguOCwyODkuMnoiLz4KCQkJCgkJCQk8cGF0aCBmaWxsPSIjRkZDOTNFIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9IgoJCQkJTTQ0Ny44LDI4OS4xbC0xMTMuMyw2MS44bC0yMi43LDEyLjRjLTE0LjMsNy44LTMyLjEsMi41LTM5LjktMTEuN2wtNC42LTguNGwtMTEuNy0yMS41bC0yLTMuN2wtNi4xLTExLjJsLTMxLjYtNThsLTc0LjUtMTM2LjcKCQkJCWwxNTcuNiw5MWw2Ni44LDM4LjZsMTcuMiw5LjlsMjQuOCwxNC4zTDQ0Ny44LDI4OS4xeiIvPgoJCQkKCQkJCTxwb2x5Z29uIGZpbGw9IiNGRkQ2N0IiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIKCQkJCTE0MCwxMTEuNSA0NDcuOCwyODkuMiA0NzQuNSwyNzMuNyAxNjYuOCw5Ni4xIAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjRjBGN0ZGIiBwb2ludHM9IjE0OCwxMTMuNSAxODYuOSwxMzYgMjA2LjIsMTI1LjYgMTY2LjcsMTAyLjggCQkJIi8+CgkJCTxwb2x5bGluZSBmaWxsPSIjRjBGN0ZGIiBwb2ludHM9IjIyNy42LDEzOC40IDIwOSwxNDkuMSAxOTYuOCwxNDIgMjE1LjQsMTMxLjIgCQkJIi8+CgkJCTxwb2x5Z29uIGZpbGw9IiNGMEY3RkYiIHBvaW50cz0iMjAwLjksMTQ5LjEgMTU5LDE0MC4xIDE1OSwzNjcuMSAxODYuOSwzOTkuNiAxNDguNywzNzcuNSAxNDUuNywzNzQuMyAxNDUuOCwxMjQuOCAxNDYuOCwxMTcuOSAKCQkJCQkJCSIvPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTY3LjUsODUuNWwtMC44LTAuNWwtMzYuMywyMC45bC0wLjEsMjc3Ljl2MUw0NDcsNTY3LjVsMC44LDAuNWwzNi4xLTIwLjlsMC4yLTI3Ny44di0xTDE2Ny41LDg1LjV6CgkJCQkgTTI1MC43LDMxNy4xbC0xMDUsNTcuM2wwLjEtMjQ5LjVMMjUwLjcsMzE3LjF6IE0xNDYuOCwxMTcuOWwyOTYuNiwxNzEuMmwtMTM3LjgsNzUuMWMtMTAuNCw1LjctMjMuNSwxLjgtMjkuMi04LjZsLTIyLjEtNDAuNQoJCQkJbDAsMEwxNDYuOCwxMTcuOXogTTI1Mi43LDMyMC44bDE5LjQsMzUuNmM3LjIsMTMuMiwyMy43LDE4LDM2LjgsMTAuOGwyNC43LTEzLjVsMTAzLjksMTkwLjVMMTQ4LjcsMzc3LjVMMjUyLjcsMzIwLjh6CgkJCQkgTTMzNy40LDM1MS43bDEwOC40LTU5LjF2MjU2LjNsLTEuMi0wLjdMMzM3LjQsMzUxLjd6IE0xNDgsMTEzLjVsMTguNy0xMC44bDI5OS45LDE3My4xTDQ0OCwyODYuNkwxNDgsMTEzLjV6IE00NDkuOSwyOTAuNAoJCQkJbDItMS4xbDAuMi0wLjFsMCwwbDE2LjctOS43bC0wLjIsMjU4LjdMNDQ5LjksNTQ5VjI5MC40TDQ0OS45LDI5MC40eiIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"mobiledevice\",\n \"name\": \"mobiledevice\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI4MjQuN3B4IiBoZWlnaHQ9Ijg1MC45cHgiIHZpZXdCb3g9IjAgMCA4MjQuNyA4NTAuOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgODI0LjcgODUwLjkiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGZpbGw9IiNEQ0U5RjkiIGQ9Ik0yNTEuMyw1OTYuM3YtNTYuNkwyMTYsNTE5LjR2NTMuNmMwLDIwLjYsMTYuNyw0Ni45LDM3LjMsNTguOGwxNC41LDguMwoJCUMyNTcuNyw2MjYuMiwyNTEuMyw2MTAuMiwyNTEuMyw1OTYuM3oiLz4KCTxnPgoJCTxwb2x5Z29uIGZpbGw9IiNDREQ5RUUiIHBvaW50cz0iNTAzLjYsMjQ0LjUgNTAzLjYsNjg1LjQgMjc2LjUsNTU0LjMgMjQ0LjIsNTM1LjcgMjIyLjksNTIzLjMgMjE2LDUxOS4zIDIxNiw3OC40IDQzNy45LDIwNi41IAoJCQk1MDIuNCwyNDMuOCAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiNFNkYwRkYiIHBvaW50cz0iMzE0LjEsNTc0LjcgMjgxLjksNTU2LjEgMjYwLjUsNTQzLjcgMjUzLjYsNTM5LjggMjUzLjYsMTAwLjEgMjE2LDc4LjQgMjE2LDUxOS4zIDIyMi45LDUyMy4zIAoJCQkyNDQuMiw1MzUuNyAyNzYuNSw1NTQuMyA1MDMuNiw2ODUuNCA1MDMuNiw2ODQuMSAJCSIvPgoJCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik01MzguNSwxOTcuMnY1MjEuN2MwLDkuMS0zLjMsMTUuNS04LjYsMTguOWwtMC45LDAuNWwtMzQuNSwxOS45djBjNS43LTMuMyw5LjItOS44LDkuMi0xOS4yVjIxNy4zCgkJCWMwLTIwLjYtMTYuNy00Ni45LTM3LjMtNTguOEwzMDAuNCw2Mi43bC0xOS42LTExLjNsLTI3LjUtMTUuOWMtMC40LTAuMi0wLjgtMC41LTEuMi0wLjdjLTAuNC0wLjItMC44LTAuNC0xLjItMC42CgkJCWMtMTAuMi01LjItMTkuMi01LjctMjUuNi0yLjJ2MGwzNC4xLTE5LjZsMC4zLTAuMmMyLjgtMS43LDYuMS0yLjYsOS45LTIuNmM1LjUsMCwxMS44LDEuOSwxOC42LDUuOGwyNC42LDE0LjJsMTg4LjQsMTA4LjgKCQkJQzUyMS44LDE1MC4yLDUzOC41LDE3Ni42LDUzOC41LDE5Ny4yeiIvPgoJCTxwYXRoIGZpbGw9IiNCNEMwRDMiIGQ9Ik01MDMuNiwyNDQuNXYtMjcuMmMwLTIwLjYtMTYuNy00Ni45LTM3LjMtNTguOGwtMjEzLjEtMTIzQzIzMi43LDIzLjYsMjE2LDMwLjYsMjE2LDUxLjJ2MjcuMkw1MDMuNiwyNDQuNQoJCQl6Ii8+CgkJPHBhdGggZmlsbD0iI0RDRTlGOSIgZD0iTTI1MS4zLDgwLjdjMC0yMC4zLDExLjctMzEuMSwyOC43LTI5LjhsLTI2LjgtMTUuNUMyMzIuNywyMy42LDIxNiwzMC42LDIxNiw1MS4ydjI3LjJsMzUuNCwyMC40VjgwLjcKCQkJTDI1MS4zLDgwLjd6Ii8+CgkJPHBhdGggZmlsbD0iI0I0QzBEMyIgZD0iTTIxNiw1MTkuNHY1My42YzAsMjAuNiwxNi43LDQ2LjksMzcuMyw1OC44bDIxMy4xLDEyM2MyMC42LDExLjksMzcuMyw0LjgsMzcuMy0xNS44di01My42TDIxNiw1MTkuNHoiLz4KCQk8cGF0aCBmaWxsPSIjNjg4NUE5IiBkPSJNMzY3LjQsNjQ5LjljMCwxNi4xLTEzLjEsMjEuNi0yOS4yLDEyLjNjLTE2LjEtOS4zLTI5LjItMjkuOS0yOS4yLTQ2YzAtMTYuMSwxMy4xLTIxLjYsMjkuMi0xMi4zCgkJCUMzNTQuNCw2MTMuMiwzNjcuNCw2MzMuOCwzNjcuNCw2NDkuOXoiLz4KCQk8cGF0aCBmaWxsPSIjQjBDQUUyIiBkPSJNMzM4LjIsNjAzLjljLTMtMS43LTUuOS0zLTguNy0zLjdjMTQuOSw5LjksMjYuNSwyOS4xLDI2LjUsNDQuM2MwLDEzLjEtOC42LDE5LjItMjAuNSwxNgoJCQljMC45LDAuNiwxLjgsMS4yLDIuNywxLjdjMTYuMSw5LjMsMjkuMiwzLjgsMjkuMi0xMi4zQzM2Ny40LDYzMy44LDM1NC40LDYxMy4yLDMzOC4yLDYwMy45eiIvPgoJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0zNTIuOCw2NjguOWMtNC44LDAtMTAuMi0xLjctMTUuNy00LjhjLTE2LjctOS42LTMwLjMtMzEuMS0zMC4zLTQ3LjljMC0xMS42LDYuNi0xOS4xLDE2LjgtMTkuMQoJCQljNC44LDAsMTAuMiwxLjcsMTUuNyw0LjhjMTYuNyw5LjYsMzAuMywzMS4xLDMwLjMsNDcuOUMzNjkuNiw2NjEuNSwzNjMsNjY4LjksMzUyLjgsNjY4Ljl6IE0zMjMuNyw2MDEuNQoJCQljLTcuOCwwLTEyLjQsNS41LTEyLjQsMTQuN2MwLDE1LjQsMTIuNiwzNS4yLDI4LjEsNDQuMWM0LjgsMi44LDkuNCw0LjIsMTMuNSw0LjJjNy44LDAsMTIuNC01LjUsMTIuNC0xNC43CgkJCWMwLTE1LjQtMTIuNi0zNS4yLTI4LjEtNDQuMUMzMzIuMyw2MDMsMzI3LjcsNjAxLjUsMzIzLjcsNjAxLjV6Ii8+CgkJPHBhdGggZmlsbD0iI0RDRTlGOSIgZD0iTTMxMi44LDI5LjZsLTIuMiw1LjdsLTI3LjQsMTQuNmwtMi4zLDEuNGwtMjcuNS0xNS45Yy0wLjQtMC4yLTAuOC0wLjUtMS4yLTAuN2MtMC40LTAuMi0wLjgtMC40LTEuMi0wLjYKCQkJYy0xMC4yLTUuMi0xOS4yLTUuNy0yNS42LTIuMnYwbDM0LjEtMTkuNmwwLjMtMC4yYzIuOC0xLjcsNi4xLTIuNiw5LjktMi42YzUuNSwwLDExLjgsMS45LDE4LjYsNS44TDMxMi44LDI5LjZ6Ii8+CgkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTMyNS4xLDExMi4xYzAsNS42LTQuNiw3LjUtMTAuMiw0LjNjLTUuNi0zLjItMTAuMi0xMC40LTEwLjItMTZjMC01LjYsNC42LTcuNSwxMC4yLTQuMwoJCQlDMzIwLjYsOTkuMywzMjUuMSwxMDYuNSwzMjUuMSwxMTIuMXoiLz4KCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzIwLjEsMTIwLjRjLTIsMC00LjEtMC42LTYuMy0xLjljLTYuNC0zLjctMTEuNC0xMS42LTExLjQtMTguMWMwLTQuOSwzLTguMyw3LjUtOC4zYzIsMCw0LjEsMC42LDYuMywxLjkKCQkJYzYuNCwzLjcsMTEuNCwxMS42LDExLjQsMTguMUMzMjcuNSwxMTcuMSwzMjQuNSwxMjAuNCwzMjAuMSwxMjAuNHogTTMwOS45LDk2LjljLTEuOCwwLTIuNywxLjItMi43LDMuNWMwLDQuOCw0LjEsMTEuMiw5LDE0CgkJCWMxLjQsMC44LDIuOCwxLjMsMy45LDEuM2MxLjgsMCwyLjctMS4yLDIuNy0zLjVjMC00LjgtNC4xLTExLjItOS0xNEMzMTIuNCw5Ny4zLDMxMSw5Ni45LDMwOS45LDk2Ljl6Ii8+CgkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTM5Ny40LDE1NC4zYzAsMy43LTMsNS02LjgsMi45bC00Ni0yNi42Yy0zLjgtMi4yLTYuOC03LTYuOC0xMC43bDAsMGMwLTMuOCwzLTUsNi44LTIuOWw0NiwyNi42CgkJCUMzOTQuNCwxNDUuNywzOTcuNCwxNTAuNSwzOTcuNCwxNTQuM0wzOTcuNCwxNTQuM3oiLz4KCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzk0LDE2MC42Yy0xLjUsMC0zLTAuNS00LjYtMS40bC00Ni0yNi42Yy00LjUtMi42LTgtOC4yLTgtMTIuOGMwLTMuOCwyLjMtNi4zLDUuOC02LjMKCQkJYzEuNSwwLDMsMC41LDQuNiwxLjRsNDYsMjYuNmM0LjUsMi42LDgsOC4yLDgsMTIuOEMzOTkuOCwxNTguMSwzOTcuNSwxNjAuNiwzOTQsMTYwLjZ6IE0zNDEuMiwxMTguM2MtMC40LDAtMSwwLTEsMS41CgkJCWMwLDIuOSwyLjYsNi45LDUuNiw4LjZsNDYsMjYuNmMwLjgsMC41LDEuNiwwLjcsMi4yLDAuN2MwLjQsMCwxLDAsMS0xLjVjMC0yLjktMi42LTYuOS01LjYtOC42bC00Ni0yNi42CgkJCUMzNDIuNiwxMTguNiwzNDEuOCwxMTguMywzNDEuMiwxMTguM3oiLz4KCQk8cGF0aCBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBkPSJNNzQ2LjIsNTY3LjdjLTMyLTE3LjYtMTk4LjMtMTAwLTE5OC4zLTEwMHYyNTEuMWMwLDguNy0yLjUsMTUuOS03LjIsMjEKCQkJYy0xLjIsMS40LTIuNSwyLjYtNC4xLDMuNmwtMC43LDAuNGMwLDAsMCwwLDAsMGMtMC4xLDAtMC4xLDAuMS0wLjIsMC4xbC0xMC42LDYuMWMwLDAsMTkzLjgtMTAyLjMsMjI2LjctMTIxLjcKCQkJQzc4NC44LDYwOC45LDc4OS42LDU5MS41LDc0Ni4yLDU2Ny43eiIvPgoJCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNTAxLjIsMjQ2LjEgMjMxLjEsNTI1LjIgMjI1LjQsNTIyIDIyNS40LDQyOS42IDQzOC40LDIwOS43IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI1MDEsMjc3LjEgNTAxLjEsMzI4LjggMjgyLjcsNTU0LjggMjUxLjMsNTM2LjcgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjRENFOUY5IiBwb2ludHM9IjI5Ni44LDU3LjggMzIzLjMsNDIuNyAzMzUuNCw0OS43IDMwOS45LDY1LjQgCQkiLz4KCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNNTA5LjYsMTMwLjlMNTA5LjYsMTMwLjlMMjk2LDcuNUMyOTUsNi44LDI4NC4yLDAsMjcxLjcsMGMtMy45LDAtNy42LDAuNy0xMSwybC0zNS44LDIwLjMKCQkJYy0yLjEsMC45LTE3LDcuOC0xNi4zLDI4LjlsMCw1MjEuOGMwLDAuNiwwLjQsMTQuOCw1LjgsMjUuMmMwLjUsMC45LDEsMS45LDEuNCwyLjljNC45LDkuOSwxMS4xLDIyLjMsMjksMzUuMmwwLjEsMC4xTDQ2My43LDc2MwoJCQljMSwwLjYsMTEuMyw3LjEsMjMuNSw3LjFjMCwwLDAsMCwwLDBjNi4yLDAsMTEuOC0xLjcsMTYuNy01TDUzNyw3NDZjMC41LTAuMywxMi4xLTYuOCwxMy4xLTIzLjRsMC4yLTE5LjNWMjAyCgkJCUM1NTAuNiwxOTguOSw1NTMuNiwxNjEuMiw1MDkuNiwxMzAuOXogTTUzMy40LDcxOC45YzAsNC4zLTAuOSwxMC01LjEsMTIuN2wtMjIuOCwxMy4xaDBjMC0wLjEsMC0wLjMsMC4xLTAuNAoJCQljMC4xLTAuNCwwLjEtMC43LDAuMi0xLjFjMC0wLjMsMC4xLTAuNSwwLjEtMC44YzAtMC4zLDAuMS0wLjUsMC4xLTAuOGMwLTAuNCwwLjEtMC45LDAuMS0xLjNjMC0wLjQsMC0wLjksMC0xLjNWMjE3LjMKCQkJYzAtMjEuMy0xNy4zLTQ4LjYtMzguNS02MC45bC0yMTMuMS0xMjNjLTAuNC0wLjItMC44LTAuNS0xLjItMC43Yy0wLjItMC4xLTAuMy0wLjItMC41LTAuM2MtMC4xLTAuMS0wLjMtMC4xLTAuNC0wLjIKCQkJYy0wLjEtMC4xLTAuMy0wLjEtMC40LTAuMmMtMC42LTAuMy0xLjItMC42LTEuOC0wLjljLTAuNS0wLjItMS0wLjQtMS41LTAuNmMtMC42LTAuMy0xLjMtMC41LTEuOS0wLjhjLTAuMSwwLTAuMi0wLjEtMC4zLTAuMQoJCQljLTAuMSwwLTAuMi0wLjEtMC4zLTAuMWwwLDBsMTkuMy0xMS4xYzAsMCwwLjEsMCwwLjEtMC4xYzEuNy0xLDMuNy0xLjUsNi4yLTEuNWM0LjQsMCw5LjUsMS43LDE1LDQuOGwyMTMuMSwxMjMKCQkJYzE4LjIsMTAuNSwzMy43LDM0LjYsMzMuNyw1Mi42VjcxOC45TDUzMy40LDcxOC45eiBNMjI1LjMsNTIyVjg2LjZsMjc1LjgsMTU5LjJ2NDM1LjRMMjI1LjMsNTIyeiBNNTAxLjEsNjg2LjhWNzM5CgkJCWMwLDAuNiwwLDEuMSwwLDEuN2MwLDAuNCwwLDAuNy0wLjEsMS4xYzAsMC4xLDAsMC4yLDAsMC4zYy0wLjEsMC45LTAuMiwxLjctMC40LDIuNWMwLDAuMSwwLDAuMSwwLDAuMmMtMC4yLDEuMi0wLjUsMi4zLTAuOSwzLjMKCQkJbDAsMGwtNi4xLDMuNWMtMS43LDEtNCwxLjUtNi42LDEuNWMtNC42LDAtOS43LTEuNi0xNC45LTQuNkwyNTksNjI1LjVjLTE4LjMtMTAuNS0zMy43LTM0LjYtMzMuNy01Mi42di00NS40TDUwMS4xLDY4Ni44egoJCQkgTTIyNS4zLDgxLjFWNTEuMmMwLTQuMSwwLjgtOS40LDQuNS0xMi4zYzAsMCwwLDAsMC4xLTAuMWMwLjItMC4xLDAuNC0wLjMsMC42LTAuNGMwLDAsMC4xLTAuMSwwLjEtMC4xYzAuMS0wLjEsMC4yLTAuMSwwLjQtMC4yCgkJCWMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuMmwwLjItMC4xYzAuNC0wLjIsMC43LTAuNCwxLjEtMC43YzMuNS0xLjgsOS45LTQuMiwxNi4xLTEuNWMwLjQsMC4yLDAuOCwwLjQsMS4zLDAuNmwwLjMsMC4xCgkJCWMwLjIsMC4xLDAuNCwwLjIsMC42LDAuM2MwLjEsMC4xLDAuMywwLjEsMC40LDAuMmMwLjIsMC4xLDAuNSwwLjMsMC43LDAuNGwyMTMuMSwxMjNjMS45LDEuMSwzLjcsMi4zLDUuNSwzLjYKCQkJYzE3LjMsMTIuNiwzMC42LDM1LjIsMzAuNiw1My4xdjIzLjFMMjI1LjMsODEuMXoiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"office\",\n \"name\": \"office\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1MS4ycHgiIGhlaWdodD0iNzUuNnB4IiB2aWV3Qm94PSIwIDAgNTEuMiA3NS42IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MS4yIDc1LjYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBpZD0iU2hhZG93IiBmaWxsPSIjNzY3Nzc2IiBwb2ludHM9IjMxLjMsNzEuOCAyNC42LDcxLjggMjUsNDQuMiA1MS4yLDU5LjggIi8+CjxwYXRoIGZpbGw9IiM0QzkzNEUiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0yNi41LDcwLjdsMTQuNi04LjhWMTQuN0wyNC41LDQuOEw4LDE0Ljd2MzQuNAoJYy0wLjYtMC45LTEuMy0xLjQtMS44LTEuNGMtMC40LDAtMC44LDAuMy0xLjIsMC43bDAsMGMtMC4xLDAuMS0wLjIsMC4yLTAuMywwLjRsMCwwYy0wLjEsMC4xLTAuMiwwLjMtMC4zLDAuNHYwLjEKCWMtMC4xLDAuMS0wLjIsMC4zLTAuMywwLjRjMCwwLDAsMC4xLTAuMSwwLjFjLTAuMSwwLjEtMC4xLDAuMy0wLjIsMC40YzAsMC4xLTAuMSwwLjEtMC4xLDAuMmMtMC4xLDAuMS0wLjEsMC4zLTAuMiwwLjQKCWMwLDAuMS0wLjEsMC4yLTAuMSwwLjNjLTAuMSwwLjEtMC4xLDAuMy0wLjIsMC40YzAsMC4xLTAuMSwwLjItMC4xLDAuM1MzLDUyLDMsNTIuMmMwLDAuMS0wLjEsMC4zLTAuMSwwLjRjMCwwLjEtMC4xLDAuMi0wLjEsMC4zCgljMCwwLjItMC4xLDAuMy0wLjEsMC41YzAsMC4xLDAsMC4yLTAuMSwwLjNjMCwwLjItMC4xLDAuNC0wLjEsMC41czAsMC4yLDAsMC4zYzAsMC4yLDAsMC40LTAuMSwwLjZjMCwwLjEsMCwwLjIsMCwwLjMKCWMwLDAuMywwLDAuNiwwLDAuOWMwLDAuMywwLDAuNSwwLDAuOHYwLjFjMCwwLjEsMCwwLjEsMCwwLjJjMCwwLjIsMCwwLjMsMC4xLDAuNGMwLDAuMSwwLDAuMSwwLDAuMnYwLjFjMCwwLjEsMC4xLDAuMiwwLjEsMC4zCglzMCwwLjEsMC4xLDAuMmMwLDAuMSwwLjEsMC4zLDAuMiwwLjR2MC4xYzAsMCwwLDAuMSwwLjEsMC4xdjAuMWMwLDAuMSwwLjEsMC4yLDAuMSwwLjJzMCwwLDAsMC4xdjAuMWMwLDAsMCwwLjEsMC4xLDAuMQoJYzAsMC4xLDAuMSwwLjEsMC4xLDAuMmwwLjEsMC4xYzAuMSwwLjEsMC4xLDAuMiwwLjIsMC4ybDAuMSwwLjFsMC4xLDAuMWwwLDBsMCwwbDAuMSwwLjFjMC4xLDAsMC4xLDAuMSwwLjIsMC4xbDAsMGMwLDAsMCwwLDAuMSwwCglsMCwwYzAuMSwwLjEsMC4yLDAuMSwwLjMsMC4yYzAsMCwwLjEsMCwwLjEsMC4xYzAuMSwwLDAuMSwwLjEsMC4yLDAuMWwwLDBoMC4xbDAsMGwwLDB2MS43QzUuMiw2My42LDUuNSw2NCw2LDY0aDAuNGgwLjEKCWMwLjQsMCwwLjgtMC40LDAuOC0wLjh2LTEuOEM3LjUsNjEuMyw3LjgsNjEuMiw4LDYxdjAuOWwxMi40LDcuNGMwLDAuMSwwLjEsMC4yLDAuMSwwLjJjMC40LDEsMS4yLDEuOSwyLjMsMi4zbDAsMHYxLjcKCWMwLDAuNCwwLjQsMC44LDAuOCwwLjhIMjRoMC4xYzAuNCwwLDAuOC0wLjQsMC44LTAuOHYtMS44TDI2LjUsNzAuNyIvPgo8ZyBpZD0iU3RydWN0dXJlIj4KCTxnPgoJCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIwLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMjQuNiwyNC43IDgsMTQuNyAyNC41LDQuOCAKCQkJNDEuMSwxNC43IAkJIi8+Cgk8L2c+Cgk8cG9seWdvbiBmaWxsPSIjRTJFMkUxIiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS13aWR0aD0iMC4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjgsMTQuNyA4LDYxLjkgMjQuNiw3MS44IDI0LjYsMjQuNyAJCgkJIi8+Cgk8cG9seWdvbiBmaWxsPSIjOTU5NTk2IiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS13aWR0aD0iMC4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjQxLjEsMTQuNyA0MS4xLDYxLjkgMjQuNiw3MS44IAoJCTI0LjYsMjQuNyAJIi8+CjwvZz4KPGcgaWQ9IldpbmRvd3MiPgoJPGcgaWQ9IldpbmRvdyI+CgkJPHBvbHlnb24gZmlsbD0iIzdFOTVBQyIgc3Ryb2tlPSIjMDEwMjAyIiBzdHJva2Utd2lkdGg9IjAuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI4LDE2LjcgOCwyMS45IDI0LjYsMzEuOCAyNC42LDI2LjcgCgkJCQkJIi8+CgkJPHBvbHlsaW5lIGZpbGw9IiM0QTY1OEIiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIwLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMjQuNiwyNi43IDQxLjEsMTYuNyA0MS4xLDIxLjkgCgkJCTI0LjYsMzEuOCAJCSIvPgoJPC9nPgoJPGcgaWQ9IldpbmRvd18xXyI+CgkJPHBvbHlnb24gZmlsbD0iIzdFOTVBQyIgc3Ryb2tlPSIjMDEwMjAyIiBzdHJva2Utd2lkdGg9IjAuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI4LDI0LjMgOCwyOS40IDI0LjYsMzkuNCAyNC42LDM0LjIgCgkJCQkJIi8+CgkJPHBvbHlsaW5lIGZpbGw9IiM0QTY1OEIiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIwLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMjQuNiwzNC4yIDQxLjEsMjQuMyA0MS4xLDI5LjQgCgkJCTI0LjYsMzkuNCAJCSIvPgoJPC9nPgoJPGcgaWQ9IldpbmRvd18yXyI+CgkJPHBvbHlnb24gZmlsbD0iIzdFOTVBQyIgc3Ryb2tlPSIjMDEwMjAyIiBzdHJva2Utd2lkdGg9IjAuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI4LDMxLjggOCwzNyAyNC42LDQ2LjkgMjQuNiw0MS44IAkJCgkJCSIvPgoJCTxwb2x5bGluZSBmaWxsPSIjNEE2NThCIiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS13aWR0aD0iMC4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjI0LjYsNDEuOCA0MS4xLDMxLjggNDEuMSwzNyAKCQkJMjQuNiw0Ni45IAkJIi8+Cgk8L2c+Cgk8ZyBpZD0iV2luZG93XzNfIj4KCQk8cG9seWdvbiBmaWxsPSIjN0U5NUFDIiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS13aWR0aD0iMC4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjgsMzkuNCA4LDQ0LjUgMjQuNiw1NC41IDI0LjYsNDkuMyAKCQkJCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjNEE2NThCIiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS13aWR0aD0iMC4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjI0LjYsNDkuMyA0MS4xLDM5LjQgNDEuMSw0NC41IAoJCQkyNC42LDU0LjUgCQkiLz4KCTwvZz4KCTxnIGlkPSJXaW5kb3dfNF8iPgoJCTxwb2x5Z29uIGZpbGw9IiM3RTk1QUMiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIwLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iOCw0Ni45IDgsNTIuMSAyNC42LDYyIDI0LjYsNTYuOSAJCQoJCQkiLz4KCQk8cG9seWxpbmUgZmlsbD0iIzRBNjU4QiIgc3Ryb2tlPSIjMDEwMjAyIiBzdHJva2Utd2lkdGg9IjAuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIyNC42LDU2LjkgNDEuMSw0Ni45IDQxLjEsNTIuMSAKCQkJMjQuNiw2MiAJCSIvPgoJPC9nPgoJPGcgaWQ9IlJlZmxlY3Rpb25zIj4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0iI0EyQzJEQyIgcG9pbnRzPSIxNy44LDI3LjcgMTguNCwyMi45IDEwLjksMTguNCAxMC45LDE4LjQgMTAuMywyMy4yIAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjQTJDMkRDIiBwb2ludHM9IjE2LjksMzQuOCAxNy41LDMwIDE3LjUsMzAgMTAsMjUuNSAxMCwyNS41IDkuNCwzMC4zIAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjQTJDMkRDIiBwb2ludHM9IjE2LDQxLjggMTYuNiwzNyAxNi42LDM3IDkuMSwzMi41IDkuMSwzMi41IDguNSwzNy4zIAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjQTJDMkRDIiBwb2ludHM9IjE1LjIsNDguOCAxNS44LDQ0IDE1LjgsNDQgOC4zLDM5LjUgOC4zLDM5LjUgOCw0MS40IDgsNDQuNSAJCQkiLz4KCQkJPHBvbHlnb24gZmlsbD0iI0EyQzJEQyIgcG9pbnRzPSI4LDUyLjEgMTQuMyw1NS44IDE0LjMsNTUuOCAxNC45LDUxIDE0LjksNTEgOCw0Ni45IAkJCSIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0iI0EyQzJEQyIgcG9pbnRzPSIyMy41LDI2IDIwLDIzLjkgMTkuNCwyOC43IDIyLjksMzAuOCAJCQkiLz4KCQkJPHBvbHlnb24gZmlsbD0iI0EyQzJEQyIgcG9pbnRzPSIyMi42LDMzIDE5LjEsMzAuOSAxOC41LDM1LjcgMjIsMzcuOCAJCQkiLz4KCQkJPHBvbHlnb24gZmlsbD0iI0EyQzJEQyIgcG9pbnRzPSIyMS43LDQwIDE4LjIsMzcuOSAxNy42LDQyLjcgMjEsNDQuOCAJCQkiLz4KCQkJPHBvbHlnb24gZmlsbD0iI0EyQzJEQyIgcG9pbnRzPSIyMC44LDQ3IDE3LjMsNDQuOSAxNi43LDQ5LjcgMjAuMSw1MS44IAkJCSIvPgoJCQk8cG9seWdvbiBmaWxsPSIjQTJDMkRDIiBwb2ludHM9IjE5LjksNTQgMTYuNCw1MiAxNS44LDU2LjcgMTkuMiw1OC44IAkJCSIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iVHJlZXMiPgoJPGcgaWQ9IlRyZWUiPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjNkM2MDU0IiBkPSJNMjMuNiw3NC41Yy0wLjUsMC0wLjktMC40LTAuOS0wLjl2LTEuOWwwLjIsMC4xYzAuNiwwLjIsMSwwLjIsMSwwLjJzMC40LDAsMS0wLjJsMC4yLTAuMXYxLjkKCQkJCWMwLDAuNS0wLjQsMC45LTAuOSwwLjlIMjMuNnoiLz4KCQkJPHBhdGggZmlsbD0iIzAxMDIwMiIgZD0iTTI0LjksNzEuOXYxLjhjMCwwLjQtMC40LDAuOC0wLjgsMC44aC0wLjVjLTAuNCwwLTAuOC0wLjQtMC44LTAuOHYtMS44YzAuNiwwLjIsMS4xLDAuMywxLjEsMC4zCgkJCQlTMjQuMyw3Mi4xLDI0LjksNzEuOSBNMjIuNSw3MS41djAuNHYxLjhjMCwwLjYsMC41LDEsMSwxSDI0YzAuNiwwLDEtMC41LDEtMXYtMS44di0wLjRsLTAuMywwLjFjLTAuNSwwLjItMSwwLjItMSwwLjIKCQkJCXMtMC40LDAtMS0wLjJMMjIuNSw3MS41TDIyLjUsNzEuNXoiLz4KCQk8L2c+CgkJPHBhdGggZmlsbD0iI0EzOTk4RSIgZD0iTTI0LjMsNzJjLTAuMywwLjEtMC41LDAuMS0wLjUsMC4xcy0wLjQsMC0wLjgtMC4yYy0wLjEsMC0wLjEsMC0wLjIsMHYxLjdjMCwwLjQsMC40LDAuOCwwLjgsMC44SDI0CgkJCWMwLjItMC4yLDAuNC0wLjQsMC40LTAuN1Y3MkgyNC4zeiIvPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMjM0QzI5IiBkPSJNMjMuOCw3Mi4yYzAsMC0zLjktMC4yLTMuOS01LjRjMC00LjgsMi40LTguNywzLjktOC43czMuOSwzLjksMy45LDguN0MyNy44LDcyLjEsMjMuOSw3Mi4yLDIzLjgsNzIuMgoJCQkJTDIzLjgsNzIuMkwyMy44LDcyLjJ6Ii8+CgkJCTxwYXRoIGZpbGw9IiMwMTAyMDIiIGQ9Ik0yMy44LDU4LjJjMS40LDAsMy44LDMuOCwzLjgsOC42YzAsNS4yLTMuOCw1LjMtMy44LDUuM1MyMCw3MiwyMCw2Ni44QzIwLDYyLDIyLjQsNTguMiwyMy44LDU4LjIKCQkJCSBNMjMuOCw1Ny45Yy0xLjYsMC00LjEsNC00LjEsOC45YzAsNS40LDQsNS42LDQsNS42YzAuMSwwLDQuMS0wLjIsNC4xLTUuNkMyNy45LDYxLjksMjUuNCw1Ny45LDIzLjgsNTcuOUwyMy44LDU3Ljl6Ii8+CgkJPC9nPgoJCTxwYXRoIGZpbGw9IiMzRTdEM0UiIGQ9Ik0yMCw2Ni44YzAsNC44LDMuMiw1LjMsMy43LDUuM2MxLjItMC41LDIuOS0xLjksMi45LTUuNGMwLTMuOC0xLjQtNy0yLjctOC41YzAsMCwwLDAtMC4xLDAKCQkJQzIyLjQsNTguMiwyMCw2MiwyMCw2Ni44eiIvPgoJCTxwYXRoIGZpbGw9IiM0QzkzNEUiIGQ9Ik0yMy4zLDcyYzEtMS4yLDEuOS0zLjEsMS45LTYuMmMwLTIuOS0wLjUtNS41LTEuMy03LjZDMjIuNCw1OC4zLDIwLDYyLDIwLDY2LjhDMjAsNzAuNywyMi4yLDcxLjcsMjMuMyw3MgoJCQl6Ii8+Cgk8L2c+Cgk8ZyBpZD0iVHJlZV8yXyI+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiM2QzYwNTQiIGQ9Ik02LDY0LjFjLTAuNSwwLTAuOS0wLjQtMC45LTAuOXYtMS45bDAuMiwwLjFjMC42LDAuMiwxLDAuMiwxLDAuMnMwLjQsMCwxLTAuMmwwLjItMC4xdjEuOQoJCQkJYzAsMC41LTAuNCwwLjktMC45LDAuOUg2eiIvPgoJCQk8cGF0aCBmaWxsPSIjMDEwMjAyIiBkPSJNNy4zLDYxLjR2MS44YzAsMC40LTAuNCwwLjgtMC44LDAuOEg2Yy0wLjQsMC0wLjgtMC40LTAuOC0wLjh2LTEuOGMwLjYsMC4yLDEuMSwwLjMsMS4xLDAuMwoJCQkJUzYuNyw2MS42LDcuMyw2MS40IE00LjksNjF2MC40djEuOGMwLDAuNiwwLjUsMSwxLDFoMC41YzAuNiwwLDEtMC41LDEtMXYtMS44VjYxbC0wLjMsMC4xYy0wLjUsMC4yLTEsMC4yLTEsMC4ycy0wLjQsMC0xLTAuMgoJCQkJTDQuOSw2MUw0LjksNjF6Ii8+CgkJPC9nPgoJCTxwYXRoIGZpbGw9IiNBMzk5OEUiIGQ9Ik02LjcsNjEuNmMtMC4zLDAuMS0wLjUsMC4xLTAuNSwwLjFzLTAuNCwwLTAuOC0wLjJjLTAuMSwwLTAuMSwwLTAuMiwwdjEuN0M1LjIsNjMuNiw1LjUsNjQsNiw2NGgwLjQKCQkJYzAuMi0wLjIsMC40LTAuNCwwLjQtMC43di0xLjdINi43eiIvPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMjM0QzI5IiBkPSJNNi4yLDYxLjhjMCwwLTMuOS0wLjItMy45LTUuNGMwLTQuOCwyLjQtOC43LDMuOS04LjdzMy45LDMuOSwzLjksOC43QzEwLjIsNjEuNiw2LjMsNjEuOCw2LjIsNjEuOAoJCQkJTDYuMiw2MS44TDYuMiw2MS44eiIvPgoJCQk8cGF0aCBmaWxsPSIjMDEwMjAyIiBkPSJNNi4yLDQ3LjdjMS40LDAsMy44LDMuOCwzLjgsOC42YzAsNS4yLTMuOCw1LjMtMy44LDUuM3MtMy44LTAuMS0zLjgtNS4zQzIuNCw1MS41LDQuOCw0Ny43LDYuMiw0Ny43CgkJCQkgTTYuMiw0Ny41Yy0xLjYsMC00LjEsNC00LjEsOC45YzAsNS40LDQsNS42LDQsNS42YzAuMSwwLDQuMS0wLjIsNC4xLTUuNkMxMC4zLDUxLjUsNy44LDQ3LjUsNi4yLDQ3LjVMNi4yLDQ3LjV6Ii8+CgkJPC9nPgoJCTxwYXRoIGZpbGw9IiMzRTdEM0UiIGQ9Ik0yLjQsNTYuM2MwLDQuOCwzLjIsNS4zLDMuNyw1LjNDNy40LDYxLjEsOSw1OS44LDksNTYuMmMwLTMuOC0xLjQtNy0yLjctOC41YzAsMCwwLDAtMC4xLDAKCQkJQzQuOCw0Ny43LDIuNCw1MS41LDIuNCw1Ni4zeiIvPgoJCTxwYXRoIGZpbGw9IiM0QzkzNEUiIGQ9Ik01LjcsNjEuNmMxLTEuMiwxLjktMy4xLDEuOS02LjJjMC0yLjktMC41LTUuNS0xLjMtNy42Yy0xLjQsMC4xLTMuOCwzLjgtMy44LDguNgoJCQlDMi40LDYwLjMsNC42LDYxLjMsNS43LDYxLjZ6Ii8+Cgk8L2c+CjwvZz4KPGcgaWQ9IkRvb3J3YXkiPgoJPHBvbHlnb24gaWQ9Ik91dGxpbmVfM18iIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIwLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iCgkJMTcuNyw2MS4yIDE3LjcsNTkuNiAxMi40LDU2LjQgOS4xLDU5LjUgOS4xLDYwIDE0LjUsNjMuMiAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjNEE2NThCIiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS13aWR0aD0iMC4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjEyLjQsNTggMTIuNCw2NC40IDE3LjcsNjcuNiAKCQkxNy43LDYxLjIgCSIvPgoJPHBvbHlnb24gZGlzcGxheT0ibm9uZSIgZmlsbD0iIzZDNkM2QyIgcG9pbnRzPSIxNy43LDU5LjYgMTcuNyw2MS4yIDE0LjUsNjMuMiAxNC41LDYyLjcgCSIvPgoJPHBvbHlnb24gZGlzcGxheT0ibm9uZSIgZmlsbD0iIzlFOUU5RSIgcG9pbnRzPSI5LjEsNTkuNSA5LjEsNjAgMTQuNSw2My4yIDE0LjUsNjIuNyAJIi8+Cgk8cG9seWdvbiBpZD0iX3gzQ19QYXRoX3gzRV8iIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTQuNSw2Mi43IDkuMSw1OS41IDEyLjQsNTYuNCAxNy43LDU5LjYgCSIvPgo8L2c+CjxnIGlkPSJSb29mdG9wIj4KCTxwb2x5Z29uIGZpbGw9IiNFQUVBRUEiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIwLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMjQuNiwyMiAxMi41LDE0LjcgMjQuNSw3LjUgCgkJMzYuNywxNC43IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM5NTk1OTYiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIwLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMTIuNSwxNC43IDEyLjUsMTQuNyAxNCwxNS42IAoJCTI0LjYsOS4yIDI0LjYsNy41IDI0LjYsNy41IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNFMkUyRTEiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLXdpZHRoPSIwLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzYuNywxNC43IDM2LjcsMTQuNyAzNS4yLDE1LjYgCgkJMjQuNiw5LjIgMjQuNiw3LjUgMjQuNiw3LjUgCSIvPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"package-module\",\n \"name\": \"package-module\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMDEuMTAwMDFweCIgaGVpZ2h0PSIyMDAuOHB4IiB2aWV3Qm94PSIwIDAgMjAxLjEwMDAxIDIwMC44IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDEuMTAwMDEgMjAwLjgiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8xXzFfIj4KCTxnIGlkPSJMYXllcl8zIj4KCQk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjEwMC41LDE4Ni41IDEyOC41LDE4Ni41IDIwMS4xMDAwMSwxNDQuMyAxNjkuMTAwMDEsMTI2LjcgCQkiLz4KCTwvZz4KCTxwb2x5Z29uIGZpbGw9IiNGQUQ5QTMiIHBvaW50cz0iMTAwLjUsOTcuNyAzMiw1Ni41IDEwMC4zLDE1LjQgMTY5LjEwMDAxLDU2LjUgCSIvPgoJPGcgaWQ9IldpbmRvdyI+CgkJPHBvbHlnb24gZmlsbD0iI0UyQkY4MCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzIsNTYuNSAzMiwxNDEuODk5OTkgMTAwLjUsMTgzIDEwMC41LDk3LjcgCQkiLz4KCTwvZz4KCTxnIGlkPSJXaW5kb3dfMV8iPgoJCTxwb2x5Z29uIGZpbGw9IiNCNjhDNjkiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjE2OS4xMDAwMSw1Ni41IDE2OS4xMDAwMSwxNDEuODk5OTkgMTAwLjUsMTgzIAoJCQkxMDAuNSw5Ny43IAkJIi8+Cgk8L2c+Cgk8ZyBpZD0iV2luZG93XzNfIj4KCQk8cGF0aCBmaWxsPSIjQ0VBNzZBIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTcxLjEsMTQ0Ljh2MTEuNWMwLDEuMTAwMDEsMC42LDIuMTAwMDEsMS41LDIuNjAwMDFsMTguOCwxMS4zCgkJCWMwLjksMC42MDAwMSwyLjEtMC4xMDAwMSwyLjEtMS4ydi0xMmMwLTAuODk5OTktMC41LTEuNy0xLjItMi4ybC0xOC44LTExLjNDNzIuNCwxNDIuODk5OTksNzEuMSwxNDMuNjAwMDEsNzEuMSwxNDQuOHoiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIGlkPSJPdXRsaW5lIiBmaWxsPSIjMDAwMDAwIiBkPSJNMTAwLjMsMTUuNGw2OC44LDQxLjF2ODUuMzk5OTlMMTAwLjUsMTgzTDMyLDE0MS44OTk5OVY1Ni41TDEwMC4zLDE1LjQgTTEwMC4zLDExLjlsLTEuNSwwLjlMMzAuNSw1My45CgkJCUwyOSw1NC44djEuN3Y4NS4zOTk5OXYxLjdsMS41LDAuODk5OTlMOTksMTg1LjYwMDAxbDEuNSwwLjg5OTk5bDEuNS0wLjg5OTk5bDY4LjUtNDEuMmwxLjUtMC44OTk5OXYtMS43VjU2LjV2LTEuN2wtMS41LTAuOQoJCQlsLTY4LjgtNDEuMUwxMDAuMywxMS45TDEwMC4zLDExLjl6Ii8+Cgk8L2c+Cgk8Zz4KCQk8ZyBpZD0iVGFwZSI+CgkJCTxwb2x5Z29uIGZpbGw9IiNERUI2OEIiIHBvaW50cz0iMTIzLjksMjkuMSA1NS41LDcwLjMgNTUuNSwxMDQgNzEuNSwxMTMuMiA3MS41LDc5LjkgMTQwLjEwMDAxLDM4LjcgCQkJIi8+CgkJCTxwb2x5Z29uIGZpbGw9IiNCNjhDNjkiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI3MS41LDExMy4yIDcxLjUsNzkuOSA1NS41LDcwLjMgCgkJCQk1NS41LDEwNCAJCQkiLz4KCQk8L2c+CgkJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMTIzLjksMjkuMSA1NS41LDcwLjMgNTUuNSwxMDQgNzEuNSwxMTMuMiA3MS41LDc5LjkgCgkJCTE0MC4xMDAwMSwzOC43IAkJIi8+Cgk8L2c+CjwvZz4KPGcgaWQ9IkxheWVyXzJfMV8iPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"paymentcard\",\n \"name\": \"paymentcard\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI2NTkuNzAwMDFweCIgaGVpZ2h0PSI0NDEuNXB4IiB2aWV3Qm94PSIwIDAgNjU5LjcwMDAxIDQ0MS41IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NTkuNzAwMDEgNDQxLjUiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8xXzFfIiBkaXNwbGF5PSJub25lIj4KCTxwb2x5Z29uIGRpc3BsYXk9ImlubGluZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQTdBOUFDIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI1NTEuNSwzNjQgMzM2LDQ4OC4zOTk5OSAKCQkxMjAuNiwzNjQgMTIwLjYsMTE1LjIgMzM2LC05LjEgNTUxLjUsMTE1LjIgCSIvPgo8L2c+CjxnIGlkPSJMYXllcl8yXzFfIj4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMDU0ODZEIiBkPSJNNjI3LjUsMTk0Ljh2MjcuMTAwMDFsMCwwYzAsMi0xLjIwMDAxLDMuOC0zLjU5OTk4LDUuMkwyOTEuNjAwMDEsNDE5CgkJCQljLTEuMTAwMDEsMC42MDAwMS0yLjI5OTk5LDEuMTAwMDEtMy42MDAwMSwxLjM5OTk5Yy01LjM5OTk5LDEuMzk5OTktMTIuNSwwLjYwMDAxLTE3LjYwMDAxLTIuMjk5OTlMNDkuNywyOTAuNzAwMDEKCQkJCWMtMy41LTItNS4zLTQuNzAwMDEtNS4yLTcuMTAwMDFWMjU3LjVsMCwwYzAuMSwyLjM5OTk5LDEuOCw0Ljc5OTk5LDUuMiw2Ljc5OTk5bDIyMC43LDEyNy4zOTk5OQoJCQkJYzYuMjk5OTksMy42MDAwMSwxNS43MDAwMSw0LDIxLjIwMDAxLDAuODk5OTlsMTMuMTAwMDEtNy42MDAwMWwzMTkuMjAwMDEtMTg0LjNDNjI2LjU5OTk4LDE5OS4xMDAwMSw2MjcuNzk5OTksMTk3LDYyNy41LDE5NC44CgkJCQlMNjI3LjUsMTk0Ljh6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMzFBOEY3IiBkPSJNMjcwLjM5OTk5LDM5MS43MDAwMWMzLjI5OTk5LDMuNjAwMDEsNy4zOTk5OSwyMCwwLDI2LjVsLTIyMC43LTEyNy41Yy0zLjUtMi01LjMtNC43MDAwMS01LjItNy4xMDAwMQoJCQkJVjI1Ny41bDAsMGMwLjEsMi4zOTk5OSwxLjgsNC43OTk5OSw1LjIsNi43OTk5OUwyNzAuMzk5OTksMzkxLjcwMDAxIi8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMjU4MkNFIiBkPSJNNjIzLjkwMDAyLDIwMC43TDYyMC4zMDAwNSwyMDIuOEw1NTAsMjQzLjNsLTMwLDE3LjNsLTE0OS44OTk5OSw4Ni41TDI5MS41LDM5Mi41CgkJCQljLTUuMzk5OTksMy4xMDAwMS0xNC44OTk5OSwyLjcwMDAxLTIxLjEwMDAxLTAuODk5OTlMNzcuNiwyODAuMzk5OTlsLTI3LjktMTYuMTAwMDFjLTYuMy0zLjYwMDAxLTYuOS05LjEwMDAxLTEuNS0xMi4yCgkJCQlMMTcxLjIsMTgxbDMwLTE3LjNsNzAuMi00MC42bDEwOS02Mi45YzUuMzk5OTktMy4xLDE0Ljg5OTk5LTIuNywyMS4yMDAwMSwwLjlsMjIwLjY5OTk4LDEyNy40CgkJCQlDNjI4LjU5OTk4LDE5Mi4xMDAwMSw2MjkuMjk5OTksMTk3LjYwMDAxLDYyMy45MDAwMiwyMDAuN3oiLz4KCQk8L2c+CgkJPHBhdGggZmlsbD0iIzMxQThGNyIgZD0iTTUyMCwyNjAuNzAwMDFsLTE0OS44OTk5OSw4Ni41TDc3LjYsMjgwLjM5OTk5bC0yNy45LTE2LjEwMDAxYy02LjMtMy42MDAwMS02LjktOS4xMDAwMS0xLjUtMTIuMgoJCQlMMTcxLjIsMTgxTDUyMCwyNjAuNzAwMDF6Ii8+CgkJPHBvbHlnb24gZmlsbD0iIzMxQThGNyIgcG9pbnRzPSI2MjAuMjk5OTksMjAyLjggNTUwLDI0My4zIDIwMS4zLDE2My43IDI3MS41LDEyMy4xIAkJIi8+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yODIuMzk5OTksMzk2LjcwMDAxYy00LjcwMDAxLDAtOS4zOTk5OS0xLjIwMDAxLTEzLTMuMjk5OTlMNDguNywyNjYKCQkJCWMtMy45LTIuMjk5OTktNi4yLTUuMzk5OTktNi4yLTguNjAwMDFjMC0yLjgsMS43LTUuMyw0LjctN0wzNzkuNSw1OC40YzIuNzAwMDEtMS41LDYuMjk5OTktMi40LDEwLjIwMDAxLTIuNAoJCQkJYzQuNzAwMDEsMCw5LjM5OTk5LDEuMiwxMywzLjNMNjIzLjQwMDAyLDE4Ni43YzMuOTAwMDIsMi4zLDYuMjAwMDEsNS4zOTk5OSw2LjIwMDAxLDguNjAwMDFjMCwyLjgtMS43MDAwMSw1LjMtNC43MDAwMSw3CgkJCQlMMjkyLjYwMDAxLDM5NC4yOTk5OUMyODkuODk5OTksMzk1Ljc5OTk5LDI4Ni4yOTk5OSwzOTYuNzAwMDEsMjgyLjM5OTk5LDM5Ni43MDAwMXogTTM4OS43MDAwMSw2MC4xCgkJCQljLTMuMjAwMDEsMC02LjEwMDAxLDAuNy04LjIwMDAxLDEuOEw0OS4yLDI1My44Yy0xLjIsMC43LTIuNywxLjg5OTk5LTIuNywzLjU5OTk5YzAsMS43MDAwMSwxLjYsMy43MDAwMSw0LjIsNS4yMDAwMQoJCQkJTDI3MS4zOTk5OSwzOTBjMywxLjcwMDAxLDcsMi43MDAwMSwxMSwyLjcwMDAxYzMuMjAwMDEsMCw2LjEwMDAxLTAuNzAwMDEsOC4yMDAwMS0xLjc5OTk5TDYyMi45MDAwMiwxOTkKCQkJCWMxLjIwMDAxLTAuNywyLjcwMDAxLTEuODk5OTksMi43MDAwMS0zLjYwMDAxYzAtMS43LTEuNTk5OTgtMy43LTQuMjAwMDEtNS4yTDQwMC42MDAwMSw2Mi44CgkJCQlDMzk3LjcwMDAxLDYxLjEsMzkzLjcwMDAxLDYwLjEsMzg5LjcwMDAxLDYwLjF6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cG9seWdvbiBmaWxsPSIjRkY5NjAwIiBwb2ludHM9IjMwOC43MDAwMSwyNDguODk5OTkgMjA2LDMwOC4xMDAwMSAxMzUuMTAwMDEsMjY3LjIwMDAxIDExNy4xLDI1Ni43OTk5OSAyMTkuOCwxOTcuNjAwMDEgCgkJCQkyNjguNzAwMDEsMjI1LjggCQkJIi8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjRkZFNDJBIiBkPSJNMzgzLjM5OTk5LDExOS4zYy0xOCwxMC4zOTk5OS0xOS44OTk5OSwyNi4xMDAwMS00LjM5OTk5LDM1YzE1LjYwMDAxLDksNDIuNzAwMDEsNy44OTk5OSw2MC43MDAwMS0yLjUKCQkJCXMxOS44OTk5OS0yNi4xLDQuMzk5OTktMzVDNDI4LjUsMTA3LjgsNDAxLjI5OTk5LDEwOC45LDM4My4zOTk5OSwxMTkuM3oiLz4KCQk8L2c+CgkJPGc+CgkJCTxwb2x5Z29uIGZpbGw9IiMwMDU3OUUiIHBvaW50cz0iNDY4LjEwMDAxLDI1Ni4yOTk5OSAyNzEuMTAwMDEsMzcwIDI1My44LDM2MCA0NTAuNzk5OTksMjQ2LjMgCQkJIi8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjRkZDNjAwIiBkPSJNMjY4LjcwMDAxLDIyNS44Yy0yNi4yLDI3LjM5OTk5LTYzLjEwMDAxLDQ0LjQwMDAxLTEwNCw0NC40MDAwMWMtMTAuMTAwMDEsMC0yMC0xLTI5LjUtM2wtMTgtMTAuMzk5OTkKCQkJCWwxMDIuNjAwMDEtNTkuM0wyNjguNzAwMDEsMjI1Ljh6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjRkZFNDJBIiBkPSJNMTgyLjYwMDAxLDIzNi4zOTk5OWMtMTgsMTAuMzk5OTktMTkuODk5OTksMjYuMTAwMDEtNC4zOTk5OSwzNXM0Mi43LDcuODk5OTksNjAuNy0yLjUKCQkJCXMxOS45MDAwMS0yNi4xMDAwMSw0LjM5OTk5LTM1QzIyNy43LDIyNC44OTk5OSwyMDAuNjAwMDEsMjI2LDE4Mi42MDAwMSwyMzYuMzk5OTl6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMzg5LjcwMDAxLDU4LjFjNC4yMDAwMSwwLDguNSwxLDEyLDNsMjIwLjcwMDAxLDEyNy40YzMuMjAwMDEsMS44LDQuOTAwMDIsNC4xMDAwMSw1LjA5OTk4LDYuM2wwLDAKCQkJCXYyNy4xMDAwMWwwLDBjMCwyLTEuMjAwMDEsMy44LTMuNTk5OTgsNS4yTDI5MS42MDAwMSw0MTljLTEuMTAwMDEsMC42MDAwMS0yLjI5OTk5LDEuMTAwMDEtMy42MDAwMSwxLjM5OTk5CgkJCQljLTEuNzAwMDEsMC41LTMuNjAwMDEsMC43MDAwMS01LjYwMDAxLDAuNzAwMDFjLTQuMjAwMDEsMC04LjUtMS0xMi0zTDQ5LjcsMjkwLjcwMDAxYy0zLjUtMi01LjMtNC43MDAwMS01LjItNy4xMDAwMVYyNTcuNWwwLDAKCQkJCWwwLDBjLTAuMS0yLDEuMS00LDMuNi01LjVMMzgwLjUsNjAuMkMzODIuODk5OTksNTguOCwzODYuMjAwMDEsNTguMSwzODkuNzAwMDEsNTguMSBNMzg5LjcwMDAxLDQ4LjFMMzg5LjcwMDAxLDQ4LjEKCQkJCWMtNS4zOTk5OSwwLTEwLjI5OTk5LDEuMi0xNC4yMDAwMSwzLjVMNDMuMiwyNDMuMzk5OTljLTUuMiwzLTguNCw4LTguNiwxMy4zOTk5OWMwLDAuMjAwMDEsMCwwLjUsMCwwLjc5OTk5djI2CgkJCQljLTAuMiw2LjI5OTk5LDMuNSwxMi4xMDAwMSwxMC4yLDE1Ljg5OTk5bDIyMC43LDEyNy4zOTk5OWM0Ljc5OTk5LDIuNzk5OTksMTAuODk5OTksNC4yOTk5OSwxNyw0LjI5OTk5CgkJCQljMi43OTk5OSwwLDUuNjAwMDEtMC4yOTk5OSw4LjEwMDAxLTFjMi4yMDAwMS0wLjYwMDAxLDQuMjAwMDEtMS4zOTk5OSw2LTIuMzk5OTlsMCwwbDMzMi4zMDAwMi0xOTEuODk5OTkKCQkJCWM1LjA5OTk4LTMsOC4yMDAwMS03LjYwMDAxLDguNTk5OTgtMTIuOGMwLTAuMzk5OTksMC4wOTk5OC0wLjcsMC4wOTk5OC0xLjEwMDAxdi0yNy4xMDAwMQoJCQkJYzAtMC44OTk5OS0wLjA5OTk4LTEuOC0wLjI5OTk5LTIuNjAwMDFjLTEuMDk5OTgtNC44OTk5OS00LjUtOS4zLTkuNzk5OTktMTIuMzk5OTlMNDA2LjYwMDAxLDUyLjQKCQkJCUM0MDEuNzk5OTksNDkuNiwzOTUuNzk5OTksNDguMSwzODkuNzAwMDEsNDguMUwzODkuNzAwMDEsNDguMXoiLz4KCQk8L2c+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiNGRkU0MkEiIGQ9Ik02MjUuNSwxOTkuNWwwLjA5OTk4LTAuMTAwMDFDNjI1LjU5OTk4LDE5OS41LDYyNS41LDE5OS41LDYyNS41LDE5OS41eiIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0iIzAwNTc5RSIgZD0iTTI5OC44OTk5OSwzMDEuMTAwMDFjNC4zOTk5OSwyLjUsNC43OTk5OSw2LjI5OTk5LDEuMTAwMDEsOC41bC01MywzMC42MDAwMQoJCQkJYy0zLjgsMi4yMDAwMS0xMC4zOTk5OSwxLjg5OTk5LTE0LjctMC42MDAwMWwtOS4zLTUuMjk5OTljLTQuMzk5OTktMi41LTQuOC02LjI5OTk5LTEuMTAwMDEtOC41bDUzLTMwLjYwMDAxCgkJCQljMy43OTk5OS0yLjIwMDAxLDEwLjM5OTk5LTEuODk5OTksMTQuNzAwMDEsMC42MDAwMUwyOTguODk5OTksMzAxLjEwMDAxeiIvPgoJCQk8cGF0aCBmaWxsPSIjMDA1NzlFIiBkPSJNMzc3Ljg5OTk5LDI1NS41YzQuMzk5OTksMi41LDQuNzk5OTksNi4yOTk5OSwxLjEwMDAxLDguNWwtNTMsMzAuNjAwMDEKCQkJCUMzMjIuMjAwMDEsMjk2LjgwMDAyLDMxNS42MDAwMSwyOTYuNSwzMTEuMjk5OTksMjk0TDMwMiwyODguNjAwMDFjLTQuMzk5OTktMi41LTQuNzk5OTktNi4yOTk5OS0xLjEwMDAxLTguNWw1My0zMC42MDAwMQoJCQkJYzMuNzk5OTktMi4yLDEwLjM5OTk5LTEuODk5OTksMTQuNzAwMDEsMC42MDAwMUwzNzcuODk5OTksMjU1LjV6Ii8+CgkJCTxwYXRoIGZpbGw9IiMwMDU3OUUiIGQ9Ik00NTYuODk5OTksMjA5Ljg5OTk5YzQuMzk5OTksMi41LDQuNzk5OTksNi4zLDEuMTAwMDEsOC41TDQwNSwyNDkKCQkJCWMtMy43OTk5OSwyLjItMTAuMzk5OTksMS44OTk5OS0xNC43MDAwMS0wLjYwMDAxTDM4MSwyNDNjLTQuMzk5OTktMi41LTQuNzk5OTktNi4zLTEuMTAwMDEtOC41bDUzLTMwLjYwMDAxCgkJCQljMy43OTk5OS0yLjIsMTAuMzk5OTktMS44OTk5OSwxNC43MDAwMSwwLjYwMDAxTDQ1Ni44OTk5OSwyMDkuODk5OTl6Ii8+CgkJCTxwYXRoIGZpbGw9IiMwMDU3OUUiIGQ9Ik01MzUuOTAwMDIsMTY0LjNjNC40MDAwMiwyLjUsNC43OTk5OSw2LjMsMS4wOTk5OCw4LjVsLTUzLDMwLjYwMDAxCgkJCQljLTMuNzk5OTksMi4yLTEwLjM5OTk5LDEuODk5OTktMTQuNzAwMDEtMC42MDAwMUw0NjAsMTk3LjQwMDAxYy00LjM5OTk5LTIuNS00Ljc5OTk5LTYuMy0xLjEwMDAxLTguNWw1My0zMC42MDAwMQoJCQkJYzMuODAwMDItMi4yLDEwLjM5OTk5LTEuODk5OTksMTQuNjk5OTgsMC42MDAwMUw1MzUuOTAwMDIsMTY0LjN6Ii8+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"plane\",\n \"name\": \"plane\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQ4LjQ0IDI1NC43MyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwcGF0aCI+PHBhdGggaWQ9IkZ1c2VsYWdlLTIiIGQ9Ik0xMTQuMjQsNzQuNzdjLTcuNTQtMi45My00MC4wOS0xMy41NS01MS45NS0xNi45NHMtOS42NCwxLjUzLTQuNTIsNy4zNGMwLDAsMTAuNTIsMTQuNzEsMTguMjUsMjMuNDcsNy43Myw4Ljc2LDE4LjMyLDIwLjcyLDI0LjY3LDI2LjIyczk3Ljg3LDU3LjkyLDk3Ljg3LDU3LjkyYzAsMCwzNy44NCwxMi40Miw0NS43NCw2Ljc4LDcuOTEtNS42NS0yNy43Ni00My41NS0yNy43Ni00My41NWwtMTAyLjI5LTYxLjI1WiIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJjbGlwcGF0aC0xIj48ZWxsaXBzZSBpZD0iSW50YWtlLTIiIGN4PSIyMDUuMzIiIGN5PSIxMTMuNzQiIHJ4PSIxMi4yNiIgcnk9IjguMTciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxLjc1IDI3MS43NCkgcm90YXRlKC03MS4zKSIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJjbGlwcGF0aC0yIj48ZWxsaXBzZSBpZD0iSW50YWtlLTYiIGN4PSIxNDAuNCIgY3k9IjE2My4yMSIgcng9IjEyLjI2IiByeT0iOC4xNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU5LjIxIDI0My44NSkgcm90YXRlKC03MS4zKSIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJjbGlwcGF0aC0zIj48cGF0aCBpZD0iUmlnaHRXaW5nLTMiIGQ9Ik0xMjMuMTQsMTIxLjkzTDI1LjUsMTU1LjUyczE0Ljk1LDQuNzUsMTguMyw0LjQxLDEyNy4yOC0xMC42MSwxMjcuMjgtMTAuNjFsLTQ3LjkzLTI3LjM5WiIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxwYXRoIGlkPSJTaGFkb3ciIGQ9Ik02NC42NiwxMTkuNjFsMTMuMDctMTIuMjZzNC41OSwxLjU3LDMuOTcsNC41OWwtNi4yMywyNS41NywxLDEuNjZjMTEuNjUsMy43NywyMy4zMSw3LjcsMjcuNDUsOS4zbDQyLjUyLDI1LjQ2LDU2LjMtNTcuNTZzNC41Nyw0LjMsNC41Nyw4LjMyLTIzLjEzLDY0LjMtMjUuNDcsNzAuNDNsMjQuMzksMTQuNnMzNS42NywzNy45LDI3Ljc2LDQzLjU1Yy03LjkxLDUuNjUtNDUuNzQtNi43OC00NS43NC02Ljc4LDAsMC0xOC4yNS0xMC40Ni0zOS4wMi0yMi41Mi0zMC44NCwyLjU2LTExMy4wMiw5LjM3LTExNS43NCw5LjY1LTMuMzUsLjM1LTE4LjMtNC40MS0xOC4zLTQuNDFsOTAuMjMtMzEuMDRjLTcuOTUtNC44MS0xMy42My04LjM4LTE1LjA1LTkuNjEtNi4zNS01LjUxLTE2Ljk0LTE3LjQ2LTI0LjY3LTI2LjIyLTMuNjMtNC4xMS03Ljg3LTkuNTMtMTEuMzUtMTQuMTMtMTcuMjYsMi4xNC00NC42Miw1LjU0LTQ1LjcsNS42OC0xLjU4LC4yLTguNjUtMi41LTguNjUtMi41bDQzLjYtMTguMDMsMjEuMDctMTMuNzRaIiBmaWxsPSIjMDEwMTAxIiBpc29sYXRpb249Imlzb2xhdGUiIG9wYWNpdHk9Ii40Ii8+PGcgaWQ9Ik91dGxpbmVMb3dlciI+PHBhdGggZD0iTTEyMC45NiwxNDQuMTRjNS4xNiwwLDEwLjg4LDEuOTQsMTIuOTQsMi41LDMuOTQsMS4wOCwxMSw1LjE1LDExLDUuMTUtLjA3LS4wMi0uMTMtLjA0LS4yLS4wNS0uMTItLjA1LS4yNS0uMS0uMzgtLjE0LC4xLC4wMywuMTksLjA4LC4yOCwuMTIsLjAzLDAsLjA2LC4wMiwuMSwuMDIsLjkxLC4zOCwxLjY5LDEsMi4zMywxLjc5LDEuMjcsMS41OCwxLjk5LDMuODYsMi4wNSw2LjQ1LC4wNCwxLjg1LS4yNiwzLjg1LS45NCw1Ljg1LTEuODcsNS41My02LjAyLDkuMjktOS44Nyw5LjI5LS42MSwwLTEuMjItLjEtMS44MS0uMjloMGMtMy41OS0xLjI1LTIyLjkzLTguNTEtMjQuOS0yMC4yMy0yLjI0LTIuMjEtMy4yLTQuODQtMi4xOS02Ljc3LC43OC0xLjUsMi41OS0yLjI3LDQuODEtMi4yNywuMiwwLC40MSwwLC42MiwuMDIsMS43LTEuMDUsMy44Ny0xLjQzLDYuMTYtMS40M20wLTNoMGMtMi43LDAtNS4wMSwuNDctNi44OSwxLjQxLTMuNDEsLjAzLTYuMDksMS40NC03LjM2LDMuODgtMS41LDIuODctLjcsNi40OSwyLjA4LDkuNiwxLjI4LDUuNDgsNS42NiwxMC41NywxMy4wMiwxNS4xNSw1Ljc5LDMuNiwxMS44Myw1Ljg0LDEzLjYxLDYuNDYsLjAyLDAsLjA1LC4wMiwuMDcsLjAzLC44OSwuMywxLjgyLC40NSwyLjc3LC40NSw1LjIyLDAsMTAuNDUtNC42NiwxMi43MS0xMS4zMiwuNzctMi4yNiwxLjE0LTQuNjQsMS4xLTYuODgtLjA3LTMuMjUtMS4wMy02LjE5LTIuNzEtOC4yNy0uNzgtLjk3LTEuNjktMS43NC0yLjcyLTIuMy0uMDgtLjA2LS4xNi0uMTEtLjI0LS4xNi0uNzYtLjQ0LTcuNTItNC4zLTExLjcxLTUuNDQtLjI4LS4wOC0uNjQtLjE4LTEuMDUtLjMtMi43NC0uODEtNy44My0yLjMtMTIuNjgtMi4zaDBaIiBmaWxsPSIjMWQxZDFiIi8+PHBhdGggZD0iTTE4Ni4yNCw5NC41MmM1LjE2LDAsMTAuODgsMS45NCwxMi45NCwyLjUsMy45NCwxLjA4LDExLDUuMTUsMTEsNS4xNS0uMDctLjAyLS4xMy0uMDQtLjItLjA1LS4xMi0uMDUtLjI1LS4xLS4zOC0uMTQsLjEsLjAzLC4xOSwuMDgsLjI4LC4xMiwuMDMsMCwuMDYsLjAyLC4xLC4wMiwuOTEsLjM4LDEuNjksMSwyLjMzLDEuNzksMS4yNywxLjU4LDEuOTksMy44NiwyLjA1LDYuNDUsLjA0LDEuODUtLjI2LDMuODUtLjk0LDUuODUtMS44Nyw1LjUzLTYuMDIsOS4yOS05Ljg3LDkuMjktLjYxLDAtMS4yMi0uMS0xLjgxLS4yOWgwYy0zLjU5LTEuMjUtMjIuOTMtOC41MS0yNC45LTIwLjIzLTIuMjQtMi4yMS0zLjItNC44NC0yLjE5LTYuNzcsLjc4LTEuNSwyLjU5LTIuMjcsNC44MS0yLjI3LC4yLDAsLjQxLDAsLjYyLC4wMiwxLjctMS4wNSwzLjg3LTEuNDMsNi4xNi0xLjQzbTAtM2gwYy0yLjcsMC01LjAxLC40Ny02Ljg5LDEuNDEtMy40MSwuMDMtNi4wOSwxLjQ0LTcuMzYsMy44OC0xLjUsMi44Ny0uNyw2LjQ5LDIuMDgsOS42LDEuMjgsNS40OCw1LjY2LDEwLjU3LDEzLjAyLDE1LjE1LDUuNzksMy42LDExLjgzLDUuODQsMTMuNjEsNi40NiwuMDIsMCwuMDUsLjAyLC4wNywuMDMsLjg5LC4zLDEuODIsLjQ1LDIuNzcsLjQ1LDUuMjIsMCwxMC40NS00LjY2LDEyLjcxLTExLjMyLC43Ny0yLjI2LDEuMTQtNC42NCwxLjEtNi44OC0uMDctMy4yNS0xLjAzLTYuMTktMi43MS04LjI3LS43OC0uOTctMS42OS0xLjc0LTIuNzItMi4zLS4wOC0uMDYtLjE2LS4xMS0uMjQtLjE2LS43Ni0uNDQtNy41Mi00LjMtMTEuNzEtNS40NC0uMjgtLjA4LS42NC0uMTgtMS4wNS0uMy0yLjc0LS44MS03LjgzLTIuMy0xMi42OC0yLjNoMFoiIGZpbGw9IiMxZDFkMWIiLz48L2c+PGcgaWQ9IlBsYW5lIj48ZyBpZD0iRnVzZWxhZ2UiPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwcGF0aCkiPjxwYXRoIGlkPSJNaWR0b25lIiBkPSJNMTE0LjI0LDc0Ljc3Yy03LjU0LTIuOTMtNDAuMDktMTMuNTUtNTEuOTUtMTYuOTRzLTkuNjQsMS41My00LjUyLDcuMzRjMCwwLDEwLjUyLDE0LjcxLDE4LjI1LDIzLjQ3LDcuNzMsOC43NiwxOC4zMiwyMC43MiwyNC42NywyNi4yMnM5Ny44Nyw1Ny45Miw5Ny44Nyw1Ny45MmMwLDAsMzcuODQsMTIuNDIsNDUuNzQsNi43OCw3LjkxLTUuNjUtMjcuNzYtNDMuNTUtMjcuNzYtNDMuNTVsLTEwMi4yOS02MS4yNVoiIGZpbGw9IiNlZmVmZWYiLz48cGF0aCBpZD0iU2hhZG93LTIiIGQ9Ik0xOTguNzEsMTcyLjg0Yy4wNSwuMDIsLjEzLC4wNCwuMjIsLjA3bC4xLC4wM2MuMTEsLjA0LC4yNSwuMDgsLjQxLC4xM2wuMTMsLjA0Yy4xNiwuMDUsLjM1LC4xMSwuNTUsLjE3bC4yNiwuMDhjLjE2LC4wNSwuMzIsLjEsLjUsLjE1LC4xMSwuMDMsLjIyLC4wNywuMzQsLjEsLjIxLC4wNiwuNDMsLjEzLC42NiwuMiwuMTUsLjA0LC4zLC4wOSwuNDUsLjE0LC4yNSwuMDgsLjUyLC4xNiwuNzksLjI0LC4xNSwuMDUsLjMyLC4wOSwuNDgsLjE0LC4yMiwuMDcsLjQ1LC4xMywuNjgsLjIsLjE4LC4wNSwuMzUsLjEsLjU0LC4xNiwuMjYsLjA4LC41NCwuMTYsLjgxLC4yNCwuMjYsLjA4LC41MywuMTUsLjgsLjIzLC4zLC4wOSwuNiwuMTcsLjkxLC4yNiwuMjIsLjA2LC40NiwuMTMsLjY5LC4xOSwuMjUsLjA3LC41LC4xNCwuNzUsLjIxLC4yNSwuMDcsLjQ5LC4xNCwuNzQsLjIsLjI4LC4wOCwuNTYsLjE1LC44NSwuMjMsLjM2LC4xLC43MywuMiwxLjEsLjI5LC4zMywuMDksLjY2LC4xOCwxLC4yNiwuMjcsLjA3LC41NCwuMTQsLjgxLC4yMSwuMjgsLjA3LC41NSwuMTQsLjgzLC4yMSwuMjgsLjA3LC41NSwuMTQsLjgzLC4yMSwuMzEsLjA4LC42MiwuMTUsLjk0LC4yMywuMzksLjA5LC43OCwuMTksMS4xNywuMjgsLjM3LC4wOSwuNzQsLjE4LDEuMTIsLjI2LC4yOCwuMDYsLjU2LC4xMywuODMsLjE5LC4zLC4wNywuNjEsLjE0LC45MiwuMiwuMjksLjA2LC41NywuMTMsLjg2LC4xOSwuMzMsLjA3LC42NiwuMTQsLjk5LC4yMSwuMzcsLjA4LC43NCwuMTUsMS4xMSwuMjMsLjQxLC4wOCwuODIsLjE2LDEuMjMsLjI0LC4yNywuMDUsLjU0LC4xLC44MSwuMTUsLjMxLC4wNiwuNjMsLjEyLC45NCwuMTcsLjI3LC4wNSwuNTUsLjEsLjgyLC4xNCwuMzQsLjA2LC42OSwuMTEsMS4wMywuMTcsLjMsLjA1LC42LC4xLC45LC4xNCwuNDUsLjA3LC44OSwuMTMsMS4zMywuMTksLjI0LC4wMywuNDgsLjA2LC43MiwuMDksLjMyLC4wNCwuNjMsLjA4LC45NSwuMTIsLjI0LC4wMywuNDgsLjA1LC43MiwuMDgsLjM0LC4wNCwuNjgsLjA3LDEuMDIsLjEsLjE5LC4wMiwuMzgsLjA0LC41NiwuMDVMNzkuNiw5Mi43YzcuMTgsOC4wOSwxNS42NywxNy40NywyMS4wOSwyMi4xNyw0LjAzLDMuNDksNDIuMywyNS44NSw2OS43Nyw0MS43NCwxNi43Nyw5LjY3LDI4LjEsMTYuMTksMjguMSwxNi4xOWwuMDYsLjAyLC4wOSwuMDNaIiBmaWxsPSIjYzdjNmM2Ii8+PHBhdGggaWQ9IkhpZ2hsaWdodCIgZD0iTTExNC4yNCw3NC43N2MtNi4yMy0yLjQyLTI5LjU1LTEwLjEtNDQuMTUtMTQuNmwxNjAuMSw5MS41MWMtNi45NS04LjU0LTEzLjY2LTE1LjY3LTEzLjY2LTE1LjY3bC0xMDIuMjktNjEuMjVaIiBmaWxsPSIjZmFmYWZhIi8+PGcgaWQ9IldpbmRvd3MiPjxwYXRoIGQ9Ik0xMjcuODgsMTA3LjcybC0uMDcsNy4wM2MwLC44MS0uOSwxLjMtMS41OSwuODhsLTQuODctMi45OGMtLjMxLS4xOS0uNS0uNTMtLjUtLjlsLjA0LTcuNTJjMC0uOCwuODctMS4zLDEuNTYtLjlsNC4zNiwyLjUyYy42NywuMzksMS4wNywxLjEsMS4wNywxLjg3WiIgZmlsbD0iIzk1OTY5NyIgc3Ryb2tlPSIjMWQxZDFiIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTM5LjE1LDExNC40OGwtLjA3LDcuMDNjMCwuODEtLjksMS4zLTEuNTksLjg4bC00Ljg3LTIuOThjLS4zMS0uMTktLjUtLjUzLS41LS45bC4wNC03LjUyYzAtLjgsLjg3LTEuMywxLjU2LS45bDQuMzYsMi41MmMuNjcsLjM5LDEuMDcsMS4xLDEuMDcsMS44N1oiIGZpbGw9IiM5NTk2OTciIHN0cm9rZT0iIzFkMWQxYiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTE1MC42OSwxMjEuMTVsLS4wNyw3LjAzYzAsLjgxLS45LDEuMy0xLjU5LC44OGwtNC44Ny0yLjk4Yy0uMzEtLjE5LS41LS41My0uNS0uOWwuMDQtNy41MmMwLS44LC44Ny0xLjMsMS41Ni0uOWw0LjM2LDIuNTJjLjY3LC4zOSwxLjA3LDEuMSwxLjA3LDEuODdaIiBmaWxsPSIjOTU5Njk3IiBzdHJva2U9IiMxZDFkMWIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xNjIuMDQsMTI3LjgybC0uMDcsNy4wM2MwLC44MS0uOSwxLjMtMS41OSwuODhsLTQuODctMi45OGMtLjMxLS4xOS0uNS0uNTMtLjUtLjlsLjA0LTcuNTJjMC0uOCwuODctMS4zLDEuNTYtLjlsNC4zNiwyLjUyYy42NywuMzksMS4wNywxLjEsMS4wNywxLjg3WiIgZmlsbD0iIzk1OTY5NyIgc3Ryb2tlPSIjMWQxZDFiIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTczLjQsMTM0LjEybC0uMDcsNy4wM2MwLC44MS0uOSwxLjMtMS41OSwuODhsLTQuODctMi45OGMtLjMxLS4xOS0uNS0uNTMtLjUtLjlsLjA0LTcuNTJjMC0uOCwuODctMS4zLDEuNTYtLjlsNC4zNiwyLjUyYy42NywuMzksMS4wNywxLjEsMS4wNywxLjg3WiIgZmlsbD0iIzk1OTY5NyIgc3Ryb2tlPSIjMWQxZDFiIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTE2LjY4LDEwMS40MmwtLjA3LDcuMDNjMCwuODEtLjksMS4zLTEuNTksLjg4bC00Ljg3LTIuOThjLS4zMS0uMTktLjUtLjUzLS41LS45bC4wNC03LjUyYzAtLjgsLjg3LTEuMywxLjU2LS45bDQuMzYsMi41MmMuNjcsLjM5LDEuMDcsMS4xLDEuMDcsMS44N1oiIGZpbGw9IiM5NTk2OTciIHN0cm9rZT0iIzFkMWQxYiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTE4NC45NCwxNDAuNzlsLS4wNyw3LjAzYzAsLjgxLS45LDEuMy0xLjU5LC44OGwtNC44Ny0yLjk4Yy0uMzEtLjE5LS41LS41My0uNS0uOWwuMDQtNy41MmMwLS44LC44Ny0xLjMsMS41Ni0uOWw0LjM2LDIuNTJjLjY3LC4zOSwxLjA3LDEuMSwxLjA3LDEuODdaIiBmaWxsPSIjOTU5Njk3IiBzdHJva2U9IiMxZDFkMWIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48cGF0aCBpZD0iVGFpbFNoYWRvdyIgZD0iTTczLjczLDg1Ljk5YzQuNzMtMy4wNSwxMS41OS01LjcsMjEuNTMtNi41MS0xMi4zOS03LjEyLTM5LjQ0LTIyLjYzLTM5LjQ0LTIyLjYzbC0uNDUtLjA2Yy0zLjQ2LC41LTEuMjgsNC4yMiwyLjQsOC4zOSwwLDAsOC42LDEyLjAzLDE1Ljk2LDIwLjgxWiIgZmlsbD0iI2M3YzZjNiIvPjxwYXRoIGlkPSJXaW5kc2NyZWVuIiBkPSJNMjAxLjg4LDE0NC4yOHM1LjgxLDcuMjYsOC4yOCwxNC4zN2M0LjQ5LDIsMjAuMDIsNi4wOSwyNi4zOCwzLjg0LDEuOTgtMi44MiwxLjQxLTYuNjQsMS4xMy04LjE5cy04LjcyLTEwLjkxLTguNzItMTAuOTFjMCwwLS42NSw0LjI3LTEuOTIsNC45OHMtMTUuMTEtLjg0LTI1LjE0LTQuMDhaIiBmaWxsPSIjMjIyMzIzIi8+PC9nPjwvZz48ZyBpZD0iV2luZ3MiPjxnIGlkPSJMZWZ0V2luZyI+PGcgaWQ9IkVuZ2luZSI+PGcgaWQ9IkVuZ2luZS0yIj48ZyBpZD0iQm9keSI+PGVsbGlwc2UgY3g9IjE4Mi40OCIgY3k9IjEwMi42MSIgcng9IjUuNiIgcnk9IjkuMjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMDkgMjE2LjkzKSByb3RhdGUoLTYyLjQ0KSIgZmlsbD0iIzk2OTY5NiIvPjxwYXRoIGQ9Ik0xOTcuNTgsMTExLjExYzIuMTctNi40MSw3LjQtMTAuNDQsMTEuNjctOC45OSwuMSwuMDMsLjE5LC4wOCwuMjgsLjEyLC4xLC4wMywuMiwuMDQsLjMsLjA4LDAsMC03LjA3LTQuMDctMTEtNS4xNS0zLjk0LTEuMDgtMjEuNC03LjI0LTIyLjQ3LDUtMS4xNywxMy40NSwyMS4xNCwyMS44MiwyNS4wMywyMy4xNy00LjI3LTEuNDUtNS45Ny03LjgyLTMuOC0xNC4yM1oiIGZpbGw9IiNlMmUyZTEiLz48L2c+PGcgaWQ9IkludGFrZSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBwYXRoLTEpIj48ZWxsaXBzZSBpZD0iSW50YWtlLTMiIGN4PSIyMDUuMzIiIGN5PSIxMTMuNzQiIHJ4PSIxMi4yNiIgcnk9IjguMTciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxLjc1IDI3MS43NCkgcm90YXRlKC03MS4zKSIgZmlsbD0iIzdjN2M3YyIvPjxlbGxpcHNlIGlkPSJJbnRha2UtNCIgY3g9IjE5OC4zNCIgY3k9IjExMC44IiByeD0iMTIuMjYiIHJ5PSI4LjE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43OSAyNjMuMTQpIHJvdGF0ZSgtNzEuMykiIGZpbGw9IiNlMmUyZTEiLz48cGF0aCBkPSJNMjA5LjI1LDEwMi4xMmMtNC4yOC0xLjQ1LTkuNSwyLjU4LTExLjY3LDguOTktMi4xNyw2LjQxLS40NywxMi43OSwzLjgxLDE0LjIzczkuNS0yLjU4LDExLjY3LTguOTljMi4xNy02LjQxLC40Ny0xMi43OS0zLjgxLTE0LjIzWm0yLjc2LDEzLjg4Yy0xLjg4LDUuNTQtNi40OCw5LjYzLTEwLjE4LDguMzgtMy42OS0xLjI1LTUuMDgtNy4zNi0zLjItMTIuOSwxLjg4LTUuNTQsNi43NC05LjQ3LDEwLjQzLTguMjIsMy42OSwxLjI1LDQuODMsNy4yMSwyLjk1LDEyLjc1WiIgZmlsbD0iI2VmZWZlZiIvPjxlbGxpcHNlIGN4PSIyMDEuNDEiIGN5PSIxMTEuOCIgcng9IjIuNjEiIHJ5PSIxLjY5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi42OCAyNTcuMTMpIHJvdGF0ZSgtNjguMTUpIiBmaWxsPSIjN2M3YzdjIi8+PC9nPjwvZz48L2c+PC9nPjxwYXRoIGlkPSJMZWZ0V2luZy0yIiBkPSJNMTkxLjk2LDEyMS45M3MyNS42Ny02Ni45MSwyNS42Ny03MC45NC00LjU3LTguMzItNC41Ny04LjMybC01Ni43Miw1OCwzNS42MiwyMS4yNloiIGZpbGw9IiNmYWZhZmEiLz48L2c+PGcgaWQ9IlJpZ2h0V2luZyI+PGcgaWQ9IkVuZ2luZS0zIj48ZyBpZD0iQm9keS0yIj48ZWxsaXBzZSBjeD0iMTE3LjU2IiBjeT0iMTUyLjA4IiByeD0iNS42IiByeT0iOS4yMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcxLjY2IDE4NS45NSkgcm90YXRlKC02Mi40NCkiIGZpbGw9IiM5Njk2OTYiLz48cGF0aCBkPSJNMTMyLjY1LDE2MC41OGMyLjE3LTYuNDEsNy40LTEwLjQ0LDExLjY3LTguOTksLjEsLjAzLC4xOSwuMDgsLjI4LC4xMiwuMSwuMDMsLjIsLjA0LC4zLC4wOCwwLDAtNy4wNy00LjA3LTExLTUuMTUtMy45NC0xLjA4LTIxLjQtNy4yNC0yMi40Nyw1LTEuMTcsMTMuNDUsMjEuMTQsMjEuODIsMjUuMDMsMjMuMTctNC4yNy0xLjQ1LTUuOTctNy44Mi0zLjgtMTQuMjNaIiBmaWxsPSIjZTJlMmUxIi8+PC9nPjxnIGlkPSJJbnRha2UtNSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBwYXRoLTIpIj48ZWxsaXBzZSBpZD0iSW50YWtlLTciIGN4PSIxNDAuNCIgY3k9IjE2My4yMSIgcng9IjEyLjI2IiByeT0iOC4xNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU5LjIxIDI0My44NSkgcm90YXRlKC03MS4zKSIgZmlsbD0iIzdjN2M3YyIvPjxlbGxpcHNlIGlkPSJJbnRha2UtOCIgY3g9IjEzMy40MiIgY3k9IjE2MC4yNyIgcng9IjEyLjI2IiByeT0iOC4xNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYxLjE3IDIzNS4yNSkgcm90YXRlKC03MS4zKSIgZmlsbD0iI2UyZTJlMSIvPjxwYXRoIGQ9Ik0xNDQuMzMsMTUxLjU5Yy00LjI4LTEuNDUtOS41LDIuNTgtMTEuNjcsOC45OS0yLjE3LDYuNDEtLjQ3LDEyLjc5LDMuODEsMTQuMjNzOS41LTIuNTgsMTEuNjctOC45OWMyLjE3LTYuNDEsLjQ3LTEyLjc5LTMuODEtMTQuMjNabTIuNzYsMTMuODhjLTEuODgsNS41NC02LjQ4LDkuNjMtMTAuMTgsOC4zOC0zLjY5LTEuMjUtNS4wOC03LjM2LTMuMi0xMi45LDEuODgtNS41NCw2Ljc0LTkuNDcsMTAuNDMtOC4yMiwzLjY5LDEuMjUsNC44Myw3LjIxLDIuOTUsMTIuNzVaIiBmaWxsPSIjZWZlZmVmIi8+PGVsbGlwc2UgY3g9IjEzNi40OSIgY3k9IjE2MS4yNyIgcng9IjIuNjEiIHJ5PSIxLjY5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjMuOTkgMjI3LjkzKSByb3RhdGUoLTY4LjE1KSIgZmlsbD0iIzdjN2M3YyIvPjwvZz48L2c+PC9nPjxnIGlkPSJSaWdodFdpbmctMiI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBwYXRoLTMpIj48cGF0aCBpZD0iUmlnaHRXaW5nLTQiIGQ9Ik0xMjMuMTQsMTIxLjkzTDI1LjUsMTU1LjUyczE0Ljk1LDQuNzUsMTguMyw0LjQxLDEyNy4yOC0xMC42MSwxMjcuMjgtMTAuNjFsLTQ3LjkzLTI3LjM5WiIgZmlsbD0iI2VmZWZlZiIvPjxwYXRoIGlkPSJTaGFkb3ctMyIgZD0iTTEwMS44MSwxMjkuMjdsMzkuMDYsMjIuNTVjMTcuNDQtMS40NSwzMC4yLTIuNSwzMC4yLTIuNWwtNDcuOTMtMjcuMzktMjEuMzQsNy4zNFoiIGZpbGw9IiNjN2M2YzYiLz48L2c+PC9nPjwvZz48L2c+PGcgaWQ9IlRhaWwiPjxwYXRoIGlkPSJUYWlsTGVmdCIgZD0iTTg1Ljc0LDY0LjAzbDYuMjgtMjUuNzhjLjYzLTMuMDMtMy45Ny00LjU5LTMuOTctNC41OWwtMTMuMTMsMTIuMzMsMTAuODIsMTguMDVaIiBmaWxsPSIjZmFmYWZhIi8+PHBhdGggaWQ9IlRhaWxSaWdodCIgZD0iTTU2LjQ2LDU4LjYxTDEwLjMyLDc3LjY5czcuMDYsMi43LDguNjUsMi41bDU5LjU3LTcuNC0yMi4wOC0xNC4xOFoiIGZpbGw9IiNjN2M2YzYiLz48cG9seWdvbiBpZD0iVGFpbENlbnRlciIgcG9pbnRzPSI5NS4yNyA3OS41MSA1Mi4zNCA4LjQzIDQzLjE2IDMgNTUuODIgNTYuODQgOTUuMjcgNzkuNTEiIGZpbGw9IiNkNjA3NTYiLz48L2c+PC9nPjxnIGlkPSJPdXRsaW5lVXBwZXIiPjxnIGlkPSJNYWluIj48cGF0aCBkPSJNNDMuMTYsM2w5LjE4LDUuNDMsMjIuNjQsMzcuNDksMTMuMDctMTIuMjZzNC41OSwxLjU3LDMuOTcsNC41OWwtNi4yMywyNS41NywxLDEuNjZjMTEuNjUsMy43NywyMy4zMSw3LjcsMjcuNDUsOS4zbDQyLjUyLDI1LjQ2LDU2LjMtNTcuNTZzNC41Nyw0LjMsNC41Nyw4LjMyLTIzLjEzLDY0LjMtMjUuNDcsNzAuNDNsMjQuMzksMTQuNnMzNS42NywzNy45LDI3Ljc2LDQzLjU1Yy0xLjQ2LDEuMDUtMy45NSwxLjQ3LTcuMDQsMS40Ny0xMy41OCwwLTM4LjctOC4yNS0zOC43LTguMjUsMCwwLTE4LjI1LTEwLjQ2LTM5LjAyLTIyLjUyLTMwLjg0LDIuNTYtMTEzLjAyLDkuMzctMTE1Ljc0LDkuNjUtLjEyLC4wMS0uMjUsLjAyLS4zOSwuMDItMy45OSwwLTE3LjktNC40Mi0xNy45LTQuNDJsOTAuMjMtMzEuMDRjLTcuOTUtNC44MS0xMy42My04LjM4LTE1LjA1LTkuNjEtNi4zNS01LjUxLTE2Ljk0LTE3LjQ2LTI0LjY3LTI2LjIyLTMuNjMtNC4xMS03Ljg3LTkuNTMtMTEuMzUtMTQuMTMtMTcuMjYsMi4xNC00NC42Miw1LjU0LTQ1LjcsNS42OC0uMDYsMC0uMTIsLjAxLS4xOSwuMDEtMS44OCwwLTguNDYtMi41MS04LjQ2LTIuNTFsNDMuNi0xOC4wM2MtLjY1LTEuNjYtLjI0LTIuNzgsMS44OC0yLjkyTDQzLjE2LDNtMC0zYy0uNjMsMC0xLjI1LC4yLTEuNzgsLjU4LS45NywuNzEtMS40MiwxLjkzLTEuMTQsMy4xbDEyLjA0LDUxLjIxYy0uNDMsLjM0LS43NCwuNzItLjk2LDEuMDYtLjI4LC40NC0uNTUsMS4wNC0uNjQsMS43OUw5LjE3LDc0LjkyYy0xLjE0LC40Ny0xLjg3LDEuNTgtMS44NSwyLjgxLC4wMiwxLjIzLC43OCwyLjMyLDEuOTMsMi43NiwyLjEzLC44MSw3LjMzLDIuNzEsOS41MywyLjcxLC4yLDAsLjM4LS4wMSwuNTYtLjAzbDQyLjc4LTUuMzEsMS4yMS0uMTVjNC4wOCw1LjM1LDcuNTksOS42OSwxMC40NCwxMi45Miw3LjI4LDguMjYsMTguMjksMjAuNzMsMjQuOTYsMjYuNTEsLjc3LC42NiwyLjY4LDIuMDcsMTAsNi41OGwtODQuMiwyOC45NmMtMS4yMiwuNDItMi4wNCwxLjU4LTIuMDIsMi44NywuMDIsMS4yOSwuODYsMi40MywyLjA5LDIuODIsMi40LC43NiwxNC41Nyw0LjU2LDE4LjgxLDQuNTYsLjI1LDAsLjQ4LS4wMSwuNy0uMDMsMi43LS4yOCw4Ny4yNS03LjI5LDExNC43NC05LjU3LDIwLjIxLDExLjczLDM4LjA0LDIxLjk1LDM4LjIyLDIyLjA1LC4xOCwuMSwuMzYsLjE4LC41NiwuMjUsMS4wNCwuMzQsMjUuNzMsOC40LDM5LjY0LDguNCw0LDAsNi44Ny0uNjYsOC43OC0yLjAzLC45NS0uNjgsMi4xNC0xLjk3LDIuMzYtNC4yNiwuMzEtMy4xMy0uODktOS4zLTE0LjczLTI2LjU0LTcuMzMtOS4xMy0xNC44OC0xNy4xNy0xNC45NS0xNy4yNS0uMTktLjItLjQxLS4zOC0uNjQtLjUybC0yMi4yMi0xMy4zMWMyLjI1LTUuODksNy41OS0xOS45MiwxMi43My0zMy43NSwxMi4wNC0zMi40NCwxMi4wNC0zNC4zNiwxMi4wNC0zNS4zOSwwLTUuMTctNC45NS05Ljk4LTUuNTEtMTAuNTEtLjU4LS41NC0xLjMyLS44MS0yLjA2LS44MS0uNzgsMC0xLjU2LC4zLTIuMTUsLjlsLTU0LjY0LDU1Ljg3LTQwLjQ5LTI0LjI0Yy0uMTUtLjA5LS4zLS4xNi0uNDYtLjIyLTMuNzctMS40Ny0xNC00Ljk0LTI2LjI2LTguOTJsNS44Ny0yNC4xcy4wMi0uMDcsLjAyLS4xYy44LTMuODgtMi40LTYuODMtNS45My04LjA0LS4zMi0uMTEtLjY0LS4xNi0uOTctLjE2LS43NSwwLTEuNDksLjI4LTIuMDUsLjgxbC0xMC4zNiw5LjczTDU0LjkxLDYuODhjLS4yNi0uNDItLjYxLS43OC0xLjA0LTEuMDNMNDQuNjksLjQyYy0uNDctLjI4LTEtLjQyLTEuNTMtLjQyaDBaIiBmaWxsPSIjMWQxZDFiIi8+PC9nPjxnIGlkPSJSaWdodFdpbmctNSI+PHBhdGggZD0iTTEyMy4xNCwxMjEuOTNsNDcuOTMsMjcuMzlzLTEyMy45MywxMC4yNi0xMjcuMjgsMTAuNjFjLS4xMiwuMDEtLjI1LC4wMi0uMzksLjAyLTMuOTksMC0xNy45LTQuNDItMTcuOS00LjQybDk3LjY0LTMzLjU5bTAtMmMtLjIyLDAtLjQ0LC4wNC0uNjUsLjExTDI0Ljg1LDE1My42M2MtLjgyLC4yOC0xLjM2LDEuMDUtMS4zNSwxLjkxLC4wMSwuODYsLjU3LDEuNjIsMS4zOSwxLjg4LDEuNDUsLjQ2LDE0LjMzLDQuNTIsMTguNTEsNC41MiwuMjIsMCwuNDItLjAxLC42LS4wMywzLjI5LS4zNCwxMjYtMTAuNSwxMjcuMjQtMTAuNiwuODctLjA3LDEuNi0uNywxLjc5LTEuNTYsLjE5LS44Ni0uMi0xLjczLS45Ni0yLjE3bC00Ny45My0yNy4zOWMtLjMxLS4xNy0uNjUtLjI2LS45OS0uMjZoMFoiIGZpbGw9IiMxZDFkMWIiLz48L2c+PGcgaWQ9IlRhaWxDZW50ZXItMiI+PHBhdGggZD0iTTQzLjE2LDNsOS4xOCw1LjQzLDQyLjkyLDcxLjA4LTM5LjQ0LTIyLjY2TDQzLjE2LDNtMC0yYy0uNDIsMC0uODMsLjEzLTEuMTgsLjM5LS42NSwuNDctLjk1LDEuMjktLjc2LDIuMDdsMTIuNjYsNTMuODRjLjEzLC41NCwuNDcsMSwuOTUsMS4yOGwzOS40NCwyMi42NmMuMzEsLjE4LC42NSwuMjcsMSwuMjcsLjUyLDAsMS4wNC0uMjEsMS40My0uNiwuNjQtLjY1LC43NS0xLjY1LC4yOC0yLjQzTDU0LjA2LDcuMzljLS4xNy0uMjgtLjQxLS41Mi0uNjktLjY5TDQ0LjE4LDEuMjhjLS4zMS0uMTktLjY3LS4yOC0xLjAyLS4yOGgwWiIgZmlsbD0iIzFkMWQxYiIvPjwvZz48ZyBpZD0iVGFpbFJpZ2h0LTIiPjxwYXRoIGQ9Ik01Ni40Niw1OC42MWwyMi4wOCwxNC4xOHMtNTcuOTksNy4yLTU5LjU3LDcuNGMtLjA2LDAtLjEyLC4wMS0uMTksLjAxLTEuODgsMC04LjQ2LTIuNTEtOC40Ni0yLjUxbDQ2LjE0LTE5LjA4bTAtMmMtLjI2LDAtLjUyLC4wNS0uNzYsLjE1TDkuNTYsNzUuODRjLS43NiwuMzEtMS4yNSwxLjA2LTEuMjQsMS44OCwuMDEsLjgyLC41MiwxLjU1LDEuMjksMS44NCwxLjYyLC42Miw3LjA4LDIuNjQsOS4xNywyLjY0LC4xNiwwLC4zLDAsLjQzLS4wM2w1OS41Ny03LjRjLjg0LS4xLDEuNTItLjcyLDEuNy0xLjU0LC4xOS0uODItLjE2LTEuNjctLjg3LTIuMTNsLTIyLjA4LTE0LjE4Yy0uMzMtLjIxLS43LS4zMi0xLjA4LS4zMmgwWiIgZmlsbD0iIzFkMWQxYiIvPjwvZz48ZyBpZD0iTGVmdFdpbmctMyI+PHBhdGggZD0iTTE1Ni41Myw5OS4wNGw1Ni40OS01Ny43NywuNzEsLjY3Yy4yLC4xOSw0Ljg4LDQuNjQsNC44OCw5LjA1LDAsNC4wOS0yMi4zLDYyLjMzLTI0Ljg0LDY4Ljk2bC0uNDMsMS4xMS0zNi44Mi0yMi4wM1oiIGZpbGw9IiNmYWZhZmEiLz48cGF0aCBkPSJNMjEzLjA2LDQyLjY3czQuNTcsNC4zLDQuNTcsOC4zMi0yNC43OCw2OC42LTI0Ljc4LDY4LjZsLTM0LjcxLTIwLjc3LDU0LjkyLTU2LjE2bS0uMDYtMi44bC0xLjM3LDEuNC01NC45Miw1Ni4xNi0xLjc3LDEuODEsMi4xOCwxLjMsMzQuNzEsMjAuNzcsMi4wNCwxLjIyLC44NS0yLjIyYzUuODQtMTUuMjMsMjQuOTEtNjUuMjQsMjQuOTEtNjkuMzIsMC00Ljc1LTQuNjYtOS4yOC01LjItOS43OGwtMS40My0xLjM0aDBaIiBmaWxsPSIjMWQxZDFiIi8+PC9nPjwvZz48L3N2Zz4=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"printer\",\n \"name\": \"printer\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxNjguMzk5OTlweCIgaGVpZ2h0PSIxNTQuOHB4IiB2aWV3Qm94PSIwIDAgMTY4LjM5OTk5IDE1NC44IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNjguMzk5OTkgMTU0LjgiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8xXzFfIj4KCTxnIGlkPSJMYXllcl8zIj4KCTwvZz4KCTxnIGlkPSJMYXllcl82Ij4KCTwvZz4KCTxwYXRoIGZpbGw9IiNEMkQzRDUiIGQ9Ik0xNDQuNSw4NGMtMC4yLDIuMi0xLjM5OTk5LDQuMy0zLjUsNS41bC0yOS4yLDE3LjZjLTUuOCwzLjUtMTMsMy41LTE4LjgsMEwyNy44LDY4Yy0yLjMtMS40LTMuNC0zLjYtMy42LTYKCQl2LTAuMXYzNC42Yy0wLjEsMi42LDEsNS4yLDMuNiw2LjdsNjUuMDk5OTksMzkuMDk5OTljNS44LDMuNSwxMywzLjUsMTguOCwwbDI5LjItMTcuNmMyLjYwMDAxLTEuNSwzLjgtNC4zLDMuNS02LjlWODRIMTQ0LjV6Ii8+Cgk8cGF0aCBmaWxsPSIjNUQ2MzY2IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNTguMiwzN0wyNy44LDU1LjNjLTQuOCwyLjktNC44LDkuOCwwLDEyLjcKCQlsNjUuMDk5OTksMzkuMWM1LjgsMy41LDEzLDMuNSwxOC44LDBsMjkuMi0xNy42YzQuOC0yLjksNC44LTkuOCwwLTEyLjdMNzQuNiwzN0M2OS42LDMzLjksNjMuMywzNCw1OC4yLDM3eiIvPgoJPHBhdGggZmlsbD0iI0U5RTlFQSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjAuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTgzLjcsNDIuNUw3MS4yLDUwYy00LjYsMi44LTQuNiw5LjUsMCwxMi4zCgkJTDEwMSw4MC4yYzUuNywzLjQsMTIuOCwzLjQsMTguNSwwTDEzMyw3Mkw4My43LDQyLjV6Ii8+Cgk8Zz4KCQk8cmVjdCB4PSIxMjUuMzg2NCIgeT0iNjIuMzk1ODMiIGZpbGw9IiM3MTc2NzciIHdpZHRoPSIwIiBoZWlnaHQ9IjEwLjEwMDAxIi8+CgkJPHBhdGggZmlsbD0iIzcxNzY3NyIgZD0iTTEwMSw4MC4yTDk0LjEsNzZMNjIuOCw4OWw4LjcsNS4ybDMxLjUtMTNDMTAyLjMsODAuOSwxMDEuNiw4MC41LDEwMSw4MC4yeiIvPgoJPC9nPgoJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTU4LjIsMzdMMjcuOCw1NS4zYy00LjgsMi45LTQuOCw5LjgsMCwxMi43CgkJbDY1LjA5OTk5LDM5LjFjNS44LDMuNSwxMywzLjUsMTguOCwwbDI5LjItMTcuNmM0LjgtMi45LDQuOC05LjgsMC0xMi43TDc0LjYsMzdDNjkuNiwzMy45LDYzLjMsMzQsNTguMiwzN3oiLz4KCTxwYXRoIGZpbGw9IiMxRTIyMjYiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMzYuNywxMDguN0w4NiwxMzguM3YtMTcuMWMwLTMuOS0yLTcuNS01LjQtOS41TDQxLjEsODgKCQljLTEuOS0xLjItNC40LDAuMi00LjQsMi41QzM2LjcsOTAuNSwzNi43LDEwOC43LDM2LjcsMTA4Ljd6Ii8+Cgk8cGF0aCBmaWxsPSIjMzQzQTNEIiBkPSJNMTMzLjEwMDAxLDcyLjFsMTMtMjYuNGMwLjUtMi45LTAuOC01LjctMy4zLTcuMmwtNDAuOS0yNC42Yy0yLjEtMS4zLTQuOSwwLTUuMywyLjRsLTEzLDI2LjEKCQlMMTMzLjEwMDAxLDcyLjF6Ii8+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjODc4Nzg4IiBkPSJNMjAuOSwxMTYuOEwyMC45LDExNi44djAuMUMyMC45LDExNi45LDIwLjksMTE2LjksMjAuOSwxMTYuOHoiLz4KCQk8cGF0aCBmaWxsPSIjODc4Nzg4IiBkPSJNODYsMTMzLjEwMDAxbC0xMy40LDguMTAwMDFjLTUuNywzLjM5OTk5LTEyLjgsMy4zOTk5OS0xOC41LDBsLTI5LjgtMTcuOWMtMi4yLTEuMy0zLjQtMy42LTMuNS01Ljl2NWwwLDAKCQkJYzAsMi40LDEuMiw0LjcsMy41LDYuMTAwMDFsMjkuOCwxNy44OTk5OWMyLjgsMS43LDYsMi41LDkuMSwyLjYwMDAxbDAsMGwwLDBjMy4yLDAsNi41LTAuOCw5LjQtMi42MDAwMUw4NiwxMzguM2wwLDBsMCwwCgkJCVYxMzMuMTAwMDF6Ii8+Cgk8L2c+Cgk8cGF0aCBmaWxsPSIjNUY2NTY4IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTgwLjcsMTExLjdMNTIsOTQuNWwtMTUuMiw5LjFoLTAuMWwtMTIuNSw3LjYKCQljLTQuNiwyLjgtNC42LDkuNSwwLDEyLjNMNTQsMTQxLjM5OTk5YzUuNywzLjM5OTk5LDEyLjgsMy4zOTk5OSwxOC41LDBsOS4xLTUuNWwwLDBsNC4zLTIuNXYtMTJDODYsMTE3LjMsODQsMTEzLjcsODAuNywxMTEuN3oiLz4KCTxwYXRoIGZpbGw9IiNFOUU5RUEiIGQ9Ik04NiwxMjEuMmMwLTMuOS0yLTcuNS01LjQtOS41TDU4LjQsOTguNGwtMzEuOCwxOS4xbDM1LjYsMjEuMzk5OTlMODYsMTI0LjZWMTIxLjJ6Ii8+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTA4LjYsMTFsMzMuOSwyMC40bC0yLjYwMDAxLDUuM2wyLjg5OTk5LDEuOGMyLjUsMS41LDMuOCw0LjQsMy4zLDcuMmwtMTMsMjYuNGwtMy43LTIuMmwzLjcsMi4ybDAsMGw3LjgsNC43CgkJCWMyLjM5OTk5LDEuNCwzLjUsMy44LDMuNjAwMDEsNi4ybDAsMGwwLDBsMCwwdi0wLjF2MC4xdjAuMXY0LjdjMCwwLjIsMCwwLjUsMCwwLjd2MjkuMmMwLjIsMi42LTEsNS40LTMuNSw2LjlsLTI5LjIsMTcuNgoJCQljLTIuOSwxLjctNi4xLDIuNjAwMDEtOS40LDIuNjAwMDFzLTYuNS0wLjg5OTk5LTkuNC0yLjYwMDAxbC02LjktNC4xMDAwMXYwLjEwMDAxbDAsMGwwLDBsLTEzLjQsOC4xMDAwMQoJCQljLTIuOSwxLjctNi4xLDIuNjAwMDEtOS4zLDIuNjAwMDFoLTAuMWwwLDBsMCwwYy0zLjIsMC02LjMtMC44OTk5OS05LjEtMi42MDAwMWwtMjkuOC0xNy44OTk5OWMtMi4zLTEuNC0zLjUtMy44LTMuNS02LjFsMCwwdi01CgkJCWMwLTAuMiwwLTAuNCwwLTAuNnYtMC4xbDAsMGMwLDAsMCwwLDAsMC4xYzAsMCwwLDAsMC0wLjFsMCwwYzAuMS0yLjIsMS4zLTQuNCwzLjQtNS43bDguMy01bC00LjgtMi45Yy0yLjUtMS41LTMuNy00LjItMy42LTYuNwoJCQlWNjYuOGMwLTAuMSwwLTAuMiwwLTAuNGMwLDAsMC0zLjgsMC00LjZ2LTAuMWwwLDBjMC0yLjUsMS4yLTQuOSwzLjYtNi40TDU4LjIsMzdjMi41LTEuNSw1LjQtMi4zLDguMi0yLjNjMi44LDAsNS43LDAuOCw4LjIsMi4zCgkJCWw5LDUuNGwxMy0yNi4xYzAuMy0xLjgsMS45LTIuOSwzLjUtMi45YzAuNiwwLDEuMiwwLjIsMS44LDAuNWw0LjEsMi40TDEwOC42LDExIE0yNS44LDY2LjFDMjUuOCw2Ni4xLDI1LjcsNjYuMSwyNS44LDY2LjEKCQkJQzI1LjcsNjYuMSwyNS43LDY2LjEsMjUuOCw2Ni4xQzI1LjcsNjYuMSwyNS44LDY2LjEsMjUuOCw2Ni4xIE0yNi41LDY3bDAuMSwwLjFDMjYuNiw2NywyNi42LDY3LDI2LjUsNjcKCQkJYy0wLjEtMC4xLTAuMi0wLjEtMC4yLTAuMmwwLDBDMjYuNCw2Ni44LDI2LjUsNjYuOSwyNi41LDY3IE0yNy44LDY4Yy0wLjMtMC4yLTAuNi0wLjQtMC44LTAuNmwwLDBDMjcuMyw2Ny42LDI3LjUsNjcuOCwyNy44LDY4CgkJCSBNMTQ0LjUsODMuM3YwLjF2MC4xYzAsMC4xLDAsMC4xLDAsMC4ydjAuNXYtMC43QzE0NC41LDgzLjUsMTQ0LjUsODMuNCwxNDQuNSw4My4zIE0xNDQuMyw4NC43TDE0NC4zLDg0LjcKCQkJQzE0NC4zLDg0LjYsMTQ0LjMsODQuNiwxNDQuMyw4NC43QzE0NC4zOTk5OSw4NC42LDE0NC4zOTk5OSw4NC42LDE0NC4zLDg0LjdDMTQ0LjMsODQuNiwxNDQuMyw4NC43LDE0NC4zLDg0LjcgTTE0NC4xMDAwMSw4NS41CgkJCUwxNDQuMTAwMDEsODUuNWMwLTAuMSwwLTAuMSwwLTAuMWwwLDBWODUuNSBNMTQzLjgsODYuNEwxNDMuOCw4Ni40TDE0My44LDg2LjRjMCwwLDAtMC4xLDAuMTAwMDEtMC4xdi0wLjFsMCwwCgkJCUMxNDMuOCw4Ni4yLDE0My44LDg2LjMsMTQzLjgsODYuNCBNMTQzLjMsODcuMkwxNDMuMyw4Ny4yTDE0My4zLDg3LjJjMC0wLjEsMC4xMDAwMS0wLjEsMC4xMDAwMS0wLjJjMCwwLDAtMC4xLDAuMTAwMDEtMC4xCgkJCUMxNDMuMzk5OTksODcsMTQzLjM5OTk5LDg3LjEsMTQzLjMsODcuMiBNMTQyLjcsODhMMTQyLjcsODhMMTQyLjcsODhjMC4xMDAwMS0wLjEsMC4xMDAwMS0wLjIsMC4yLTAuMmMwLDAsMC0wLjEsMC4xMDAwMS0wLjEKCQkJQzE0Mi44OTk5OSw4Ny43LDE0Mi44LDg3LjksMTQyLjcsODggTTE0Miw4OC43TDE0Miw4OC43TDE0Miw4OC43YzAuMTAwMDEtMC4xLDAuMi0wLjIsMC4zOTk5OS0wLjNjMCwwLDAsMCwwLjEwMDAxLTAuMQoJCQlDMTQyLjMsODguNCwxNDIuMTAwMDEsODguNiwxNDIsODguNyBNMTQwLjg5OTk5LDg5LjVMMTQwLjg5OTk5LDg5LjVMMTQwLjg5OTk5LDg5LjVMMTQwLjg5OTk5LDg5LjVMMTQwLjg5OTk5LDg5LjUKCQkJYzAuMy0wLjIsMC41LTAuMywwLjgtMC41bDAsMEMxNDEuNSw4OS4xLDE0MS4yLDg5LjMsMTQwLjg5OTk5LDg5LjUgTTIxLjEsMTE5LjJMMjEuMSwxMTkuMkwyMS4xLDExOS4yIE0yMS40LDEyMAoJCQlDMjEuNCwxMjAsMjEuNCwxMjAuMSwyMS40LDEyMEMyMS40LDEyMC4xLDIxLjQsMTIwLDIxLjQsMTIwTDIxLjQsMTIwTDIxLjQsMTIwIE0yMS44LDEyMC44QzIxLjgsMTIwLjksMjEuOCwxMjAuOSwyMS44LDEyMC44CgkJCUMyMS44LDEyMC45LDIxLjgsMTIwLjksMjEuOCwxMjAuOEwyMS44LDEyMC44TDIxLjgsMTIwLjggTTIyLjMsMTIxLjZsMC4xLDAuMUMyMi40LDEyMS43LDIyLjQsMTIxLjcsMjIuMywxMjEuNmwtMC4xLTAuMQoJCQlDMjIuMywxMjEuNSwyMi4zLDEyMS42LDIyLjMsMTIxLjYgTTIzLDEyMi4zYzAuMSwwLjEsMC4xLDAuMSwwLjIsMC4yQzIzLjEsMTIyLjUsMjMuMSwxMjIuNCwyMywxMjIuM3MtMC4xLTAuMS0wLjItMC4yCgkJCUMyMi45LDEyMi4yLDIyLjksMTIyLjMsMjMsMTIyLjMgTTI0LjIsMTIzLjNsMC4xLDAuMUMyNC4zLDEyMy4zLDI0LjIsMTIzLjMsMjQuMiwxMjMuM2MtMC4yLTAuMS0wLjQtMC4zLTAuNy0wLjUKCQkJQzIzLjcsMTIzLDIzLjksMTIzLjEsMjQuMiwxMjMuMyBNMjQuMiw2MS42djAuMWwwLDBDMjQuMiw2MS44LDI0LjIsNjEuNywyNC4yLDYxLjZMMjQuMiw2MS42IE0xMDcuOCw4LjJsLTEsMS45bC0xLjcsMy40CgkJCWwtMi4yLTEuM2MtMC45LTAuNS0xLjktMC44LTIuOC0wLjhjLTIuNiwwLTQuOCwxLjgtNS40LDQuMmwtMTEuOSwyNGwtNy4xLTQuM2MtMi44LTEuNy02LTIuNi05LjItMi42Yy0zLjMsMC02LjUsMC45LTkuMiwyLjYKCQkJTDI2LjgsNTMuNmMtMi4zLDEuNC0zLjgsMy41LTQuMyw2aC0wLjJ2MmMwLDAsMCwwLDAsMC4xdjAuMXY0LjZjMCwwLjEsMCwwLjMsMCwwLjR2MjkuNmMtMC4yLDMuNSwxLjYsNi43LDQuNSw4LjVsMS45LDEuMgoJCQlsLTUuNSwzLjNjLTIuNCwxLjQtMy45LDMuNy00LjMsNi40bC0wLjEsMC4xdjAuOXYwLjFjMCwwLjIsMCwwLjQsMCwwLjZ2NC45YzAsMy4yLDEuNyw2LjIsNC40LDcuOGwyOS44LDE4CgkJCWMyLjksMS43LDYuMiwyLjcsOS42LDIuOGwwLjUsMC4zbDAuNi0wLjNjMy41LTAuMTAwMDEsNi45LTEsMTAtMi44OTk5OUw4Ni4yLDE0MC41bDUuNywzLjM5OTk5CgkJCWMzLjEsMS44OTk5OSw2LjcsMi44OTk5OSwxMC40LDIuODk5OTlzNy4zLTEsMTAuNC0yLjg5OTk5bDI5LjItMTcuNmMzLTEuOCw0LjgtNS4yLDQuNS04LjdWODguN2MwLTAuMiwwLTAuNSwwLTAuN3YtNC43di0wLjIKCQkJdi0wLjFsMCwwYy0wLjEwMDAxLTMuMy0xLjgtNi4yLTQuNS03LjlsLTYuMy0zLjhsMTIuMi0yNC43bDAuMTAwMDEtMC4zTDE0OCw0NmMwLjctMy43LTEtNy40LTQuMi05LjNsLTEuMzk5OTktMC44bDEuOC0zLjYKCQkJbDAuOC0xLjdsLTEuNjAwMDEtMUwxMDkuNiw5LjNMMTA3LjgsOC4yTDEwNy44LDguMnoiLz4KCTwvZz4KCTxwYXRoIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzVENjM2NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIGQ9Ik04MC43LDExMS43TDU4LjQsOTguNGwtMTYuMiw5LjdsMzUuNywyMS40bDguMS00Ljl2LTMuNAoJCUM4NiwxMTcuMyw4NCwxMTMuNyw4MC43LDExMS43eiIvPgoJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik04NiwxMjEuMmMwLTMuOS0yLTcuNS01LjQtOS41TDU4LjQsOTguNGwtMzEuOCwxOS4xbDM1LjYsMjEuMzk5OTkKCQlMODYsMTI0LjZWMTIxLjJ6Ii8+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjQThBOEE4IiBkPSJNMTQyLjg5OTk5LDg3LjdjMCwwLDAuMTAwMDEtMC4xLDAuMTAwMDEtMC4yQzE0Myw4Ny42LDE0Myw4Ny43LDE0Mi44OTk5OSw4Ny43eiIvPgoJCTxwYXRoIGZpbGw9IiNBOEE4QTgiIGQ9Ik0xNDEuNyw4OWMwLjEwMDAxLDAsMC4xMDAwMS0wLjEsMC4yLTAuMkMxNDEuOCw4OC45LDE0MS43LDg4LjksMTQxLjcsODl6Ii8+CgkJPHBhdGggZmlsbD0iI0E4QThBOCIgZD0iTTE0NC4zLDg0LjdDMTQ0LjMsODQuNiwxNDQuMyw4NC42LDE0NC4zLDg0LjdDMTQ0LjMsODQuNiwxNDQuMyw4NC42LDE0NC4zLDg0Ljd6Ii8+CgkJPHBhdGggZmlsbD0iI0E4QThBOCIgZD0iTTE0My4zOTk5OSw4N2MwLDAsMC0wLjEsMC4xMDAwMS0wLjFMMTQzLjM5OTk5LDg3eiIvPgoJCTxwYXRoIGZpbGw9IiNBOEE4QTgiIGQ9Ik0xNDQuMTAwMDEsODUuNUMxNDQuMTAwMDEsODUuNCwxNDQuMTAwMDEsODUuNCwxNDQuMTAwMDEsODUuNQoJCQlDMTQ0LjEwMDAxLDg1LjQsMTQ0LjEwMDAxLDg1LjQsMTQ0LjEwMDAxLDg1LjV6Ii8+CgkJPHBhdGggZmlsbD0iI0E4QThBOCIgZD0iTTE0My44LDg2LjNDMTQzLjgsODYuMiwxNDMuOCw4Ni4yLDE0My44LDg2LjNDMTQzLjgsODYuMiwxNDMuOCw4Ni4yLDE0My44LDg2LjN6Ii8+CgkJPHBhdGggZmlsbD0iI0E4QThBOCIgZD0iTTE0Mi41LDg4LjJjLTAuMTAwMDEsMC4xLTAuMTAwMDEsMC4xLTAuMiwwLjJDMTQyLjM5OTk5LDg4LjMsMTQyLjUsODguMywxNDIuNSw4OC4yeiIvPgoJCTxwYXRoIGZpbGw9IiNBOEE4QTgiIGQ9Ik0xMDAuNCwxMDkuNmMwLjUsMC4xLDEsMC4xLDEuNSwwLjFDMTAxLjMsMTA5LjYsMTAwLjksMTA5LjYsMTAwLjQsMTA5LjZ6Ii8+CgkJPHBhdGggZmlsbD0iI0E4QThBOCIgZD0iTTEwNi4xLDEwOS4yYy0xLjQsMC4zLTIuOSwwLjQtNC4zLDAuNEMxMDMuMywxMDkuNywxMDQuNywxMDkuNiwxMDYuMSwxMDkuMnoiLz4KCQk8cGF0aCBmaWxsPSIjQThBOEE4IiBkPSJNMTEwLjUsMTA3LjdjMC40LTAuMiwwLjgtMC40LDEuMi0wLjdDMTExLjMsMTA3LjMsMTEwLjksMTA3LjUsMTEwLjUsMTA3Ljd6Ii8+CgkJPHBhdGggZmlsbD0iI0E4QThBOCIgZD0iTTE0NC41LDg4LjZjMCwwLjIsMCwwLjQtMC4xMDAwMSwwLjZsMCwwbDAsMGMtMC4zLDItMS41LDMuOS0zLjUsNS4xbC0yOS4yLDE3LjYKCQkJYy0zLjUsMi4xLTcuNCwyLjktMTEuMywyLjV2MzAuMzk5OTljMy45LDAuMzk5OTksNy44LTAuMzk5OTksMTEuMy0yLjVsMjkuMi0xNy42YzIuNjAwMDEtMS41LDMuOC00LjMsMy41LTYuOVY4OC42SDE0NC41eiIvPgoJCTxwYXRoIGZpbGw9IiNBOEE4QTgiIGQ9Ik0xMDkuMiwxMDguM2MwLjMtMC4xLDAuNi0wLjMsMC45LTAuNEMxMDkuOCwxMDguMSwxMDkuNSwxMDguMiwxMDkuMiwxMDguM3oiLz4KCQk8cGF0aCBmaWxsPSIjQThBOEE4IiBkPSJNMTA3LjgsMTA4LjhjMC4zLTAuMSwwLjYtMC4yLDEtMC4zQzEwOC40LDEwOC42LDEwOC4xLDEwOC43LDEwNy44LDEwOC44eiIvPgoJCTxwYXRoIGZpbGw9IiNBOEE4QTgiIGQ9Ik0xMDYuMywxMDkuMmMwLjQtMC4xLDAuOC0wLjIsMS4yLTAuM0MxMDcuMSwxMDksMTA2LjcsMTA5LjEsMTA2LjMsMTA5LjJ6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjODY4Njg3IiBkPSJNMTQ0LjUsODMuMVY4M1Y4My4xTDE0NC41LDgzLjF6Ii8+CgkJPHBhdGggZmlsbD0iIzg2ODY4NyIgZD0iTTE0NC41LDgzLjV2MC45di0wLjVjLTAuMiwyLjItMS4zOTk5OSw0LjQtMy41LDUuN2wtMjkuMiwxNy42Yy01LjgsMy41LTEzLDMuNS0xOC44LDBMMjcuOCw2OAoJCQljLTIuNC0xLjQtMy42LTMuOS0zLjYtNi4zbDAsMHY0LjhjMCwwLjEsMCwwLjMsMCwwLjRjMC4xLDIuNCwxLjMsNC43LDMuNiw2TDkyLjg5OTk5LDExMmM1LjgsMy41LDEzLDMuNSwxOC44LDBsMjkuMi0xNy42CgkJCWMyLTEuMiwzLjEwMDAxLTMuMSwzLjUtNS4xbDAsMGwwLDBDMTQ0LjUsODguOSwxNDQuNSw4OC40LDE0NC41LDg4di00LjdDMTQ0LjUsODMuMywxNDQuNSw4My40LDE0NC41LDgzLjV6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cmVjdCB4PSIxMDIuMDgxMDkiIHk9IjM4LjExMDIzIiBmaWxsPSIjNzE3Njc3IiB3aWR0aD0iMCIgaGVpZ2h0PSIzMC43MDAwNCIvPgoJCTxwYXRoIGZpbGw9IiM3MTc2NzciIGQ9Ik03MS4yLDYyLjNjLTIuOS0xLjgtNC01LjEtMy4yLThMMzAuNyw2OS43bDI2LjQsMTUuOGwzMS4zLTEzTDcxLjIsNjIuM3oiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIGZpbGw9IiMzQjQwNDQiIGQ9Ik0xMDAsMTE0LjJ2LTQuOSIvPgoJCTxwYXRoIGZpbGw9IiMzQjQwNDQiIGQ9Ik0xMTEuNiwxMTEuOGwyOS4yLTE3LjZjMi0xLjIsMy4xMDAwMS0zLjEsMy41LTUuMWwwLDBsMCwwYzAuMTAwMDEtMC40LDAuMTAwMDEtMC45LDAuMTAwMDEtMS4zdi00LjcKCQkJYzAsMC4xLDAsMC4yLDAsMC4ydjAuOXYtMC41Yy0wLjIsMi4yLTEuMzk5OTksNC40LTMuNSw1LjdsLTI5LjIsMTcuNmMtMy42LDIuMS03LjcsMy0xMS43LDIuNXY0LjkKCQkJQzEwNCwxMTQuNywxMDguMSwxMTMuOSwxMTEuNiwxMTEuOHoiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xNDQuNSw4My4xVjgzVjgzLjFMMTQ0LjUsODMuMXoiLz4KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTQ0LjUsODMuNXYwLjl2LTAuNQoJCQljLTAuMiwyLjItMS4zOTk5OSw0LjQtMy41LDUuN2wtMjkuMiwxNy42Yy01LjgsMy41LTEzLDMuNS0xOC44LDBMMjcuOCw2OGMtMi40LTEuNC0zLjYtMy45LTMuNi02LjNsMCwwdjQuOGMwLDAuMSwwLDAuMywwLDAuNAoJCQljMC4xLDIuNCwxLjMsNC43LDMuNiw2TDkyLjg5OTk5LDExMmM1LjgsMy41LDEzLDMuNSwxOC44LDBsMjkuMi0xNy42YzItMS4yLDMuMTAwMDEtMy4xLDMuNS01LjFsMCwwbDAsMAoJCQlDMTQ0LjUsODguOSwxNDQuNSw4OC40LDE0NC41LDg4di00LjdDMTQ0LjUsODMuMywxNDQuNSw4My40LDE0NC41LDgzLjV6Ii8+Cgk8L2c+Cgk8ZWxsaXBzZSBmaWxsPSIjQzlDOUM5IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjU0LjUiIGN5PSI1MC43IiByeD0iNS4zIiByeT0iMy44Ii8+Cgk8ZWxsaXBzZSBmaWxsPSIjNTFBRDQ0IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjQ1LjMiIGN5PSI1Ni41IiByeD0iMy40IiByeT0iMi41Ii8+Cgk8ZWxsaXBzZSBmaWxsPSIjRkM5NjAzIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjM3LjYiIGN5PSI2MS40IiByeD0iMy40IiByeT0iMi41Ii8+Cgk8cGF0aCBmaWxsPSIjMzQzQTNEIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTgzLjcsNDIuNUw3MS4yLDUwYy00LjYsMi44LTQuNiw5LjUsMCwxMi4zTDEwMSw4MC4yCgkJYzUuNywzLjQsMTIuOCwzLjQsMTguNSwwTDEzMyw3Mkw4My43LDQyLjV6Ii8+Cgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxMjEuMSw3NC41IDE0Mi41LDMxLjQgMTA4LjYsMTEgODcuMyw1NC4xIAkiLz4KCTxwYXRoIG9wYWNpdHk9IjAuMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIGQ9Ik0xNjUuNywxMTUuNmwtMjEuMi0xMy41djE1LjhjMC4yLDIuNi0xLDUuNC0zLjUsNi45bC0yOS4yLDE3LjYwMDAxCgkJYy0zLDEuOC02LjQsMi43LTkuNywyLjYwMDAxbC0xLjUsMi4xMDAwMWwyOS4zLTIuMmwzNi4wOTk5OS0yMC4zQzE2OS4zLDEyMi41LDE2OS4yLDExNy41LDE2NS43LDExNS42eiIvPgoJPHBvbHlnb24gb3BhY2l0eT0iMC40IiBmaWxsPSIjNUQ2MzY2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSI4OS43LDQ5LjMgODcuMyw1NC4xIDEyMS4xLDc0LjUgMTIzLjUsNjkuNiAJIi8+CjwvZz4KPC9zdmc+Cg==\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"pyramid\",\n \"name\": \"pyramid\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iNTUyLjVweCIgaGVpZ2h0PSI0NDcuNXB4IiB2aWV3Qm94PSIwIDAgNTUyLjUgNDQ3LjUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU1Mi41IDQ0Ny41IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSIzMDkuMjAwMDEsNDE0Ljg5OTk5IDI3NC41LDQwOC4xMDAwMSAyNzMuODk5OTksMTY4LjIgNTUxLjUsMjcyICIvPgo8Zz4KCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik04ODIuMDk5OTgsMTk3Ljg5OTk5YzAuMDk5OTgsMC44OTk5OSwwLjA5OTk4LDEuOCwwLjA5OTk4LDIuN0w4ODIuMDk5OTgsMTk3Ljg5OTk5TDg4Mi4wOTk5OCwxOTcuODk5OTl6IgoJCS8+Cgk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNODg0LjIwMDAxLDIwMC42MDAwMWgtMy43OTk5OWMwLTAuOCwwLTEuNjAwMDEtMC4wOTk5OC0yLjVMODgwLDE5Nmg0LjA5OTk4TDg4NC4yMDAwMSwyMDAuNjAwMDEKCQlMODg0LjIwMDAxLDIwMC42MDAwMXoiLz4KPC9nPgo8Zz4KCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik04ODIuMDk5OTgsMTAyLjNjMC4wOTk5OCwwLjksMC4wOTk5OCwxLjgsMC4wOTk5OCwyLjdMODgyLjA5OTk4LDEwMi4zTDg4Mi4wOTk5OCwxMDIuM3oiLz4KCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik04ODQuMjAwMDEsMTA1aC0zLjc5OTk5YzAtMC44LDAtMS42LTAuMDk5OTgtMi41bC0wLjI5OTk5LTIuMWg0LjA5OTk4TDg4NC4yMDAwMSwxMDVMODg0LjIwMDAxLDEwNXoiLz4KPC9nPgo8cGF0aCBmaWxsPSIjQjJDQkVEIiBzdHJva2U9IiMyMzFGMjAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNODgyLjA5OTk4LDE5Ny44OTk5OQoJYzAuMDk5OTgsMC44OTk5OSwwLjA5OTk4LDEuOCwwLjA5OTk4LDIuN0w4ODIuMDk5OTgsMTk3Ljg5OTk5TDg4Mi4wOTk5OCwxOTcuODk5OTl6Ii8+CjxwYXRoIGZpbGw9IiNCMkNCRUQiIHN0cm9rZT0iIzIzMUYyMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik04ODIuMDk5OTgsMTAyLjMKCWMwLjA5OTk4LDAuOSwwLjA5OTk4LDEuOCwwLjA5OTk4LDIuN0w4ODIuMDk5OTgsMTAyLjNMODgyLjA5OTk4LDEwMi4zeiIvPgo8Zz4KCTxwb2x5Z29uIGZpbGw9IiM2ODg1QTkiIHBvaW50cz0iODUuMywyODcuMzk5OTkgMjc1LDEwMy44IDQ2NC43MDAwMSwyODcuMzk5OTkgMjc1LDQwMS41IAkiLz4KCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yNzUsMTEwbDE4Mi4zOTk5OSwxNzYuNjAwMDFMMjc1LDM5Ni4yOTk5OUw5Mi43LDI4Ni42MDAwMUwyNzUsMTEwIE0yNzUsOTcuNWwtNi4yOTk5OSw2LjFMODYuNCwyODAuMTAwMDEKCQlsLTguNCw4LjEwMDAxbDEwLDZMMjcwLjM5OTk5LDQwNEwyNzUsNDA2Ljc5OTk5TDI3OS42MDAwMSw0MDRMNDYyLDI5NC4yOTk5OWwxMC02bC04LjM5OTk5LTguMTAwMDFMMjgxLjI5OTk5LDEwMy42TDI3NSw5Ny41CgkJTDI3NSw5Ny41eiIvPgo8L2c+Cjxwb2x5Z29uIGZpbGw9IiNDREQ5RUUiIHBvaW50cz0iMjc1LDM5Ni4yOTk5OSAyNzUsMTEwIDkyLjcsMjg2LjYwMDAxICIvPgo8cmVjdCB4PSIyNzIuMjAwMDEiIHk9IjEwNC42IiBmaWxsPSIjMjMxRjIwIiB3aWR0aD0iNS43MDAwMSIgaGVpZ2h0PSIyOTguNSIvPgo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjI3Mi4yMDAwMSwxNTcuOCA5Ny4xLDI4OS4yOTk5OSA5Mi43LDI4Ni42MDAwMSAyNzIuMjAwMDEsMTEzLjUgIi8+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"queue\",\n \"name\": \"queue\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI3Ny4zcHgiIGhlaWdodD0iNjNweCIgdmlld0JveD0iMCAwIDc3LjMgNjMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDc3LjMgNjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfMyI+CjwvZz4KPGcgaWQ9IkxheWVyXzQiPgoJPHBvbHlnb24gZmlsbD0iIzRGNjU4NyIgc3Ryb2tlPSIjMDEwMjAyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzYuNSwxMC44IDYuNiwyOC44IDYuNiwzOS45IAoJCTM2LjUsMjIgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0NFRDhFQiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzUuMSwxMC4xIDM2LjUsMTAuNyA2LjYsMjguOCAKCQk2LjYsMzkuOSA1LjIsMzkuMiA1LjIsMjguMSAJIi8+Cgk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjM2LjUsMTUuOCAzMy44LDI4LjYgNDIuMyw1NC4zIDM3LjksNTguOSA0NS45LDU4LjkgNzcuMywzOS45IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM5M0E2QzYiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjM2LjUsNTcuOCA2LjYsMzkuOSAzNi41LDIyIAoJCTY2LjMsMzkuOCAJIi8+Cgk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjIwLjUsMzkuOSA2LjYsMzkuOSAxMy41LDM2LjIgCSIvPgoJPHBvbHlnb24gb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSIyMC40LDQzIDM4LjUsNTMuOCA2MC45LDQwLjMgNDIuOSwyOS40IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjM2LjUsNDkuOSAxMy41LDM2LjIgMzYuNSwyMi40IAoJCTU5LjQsMzYuMiAJIi8+Cgk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjIwLjQsMzYuNSAzOC41LDQ3LjMgNTguMiwzNS40IDQwLjEsMjQuNiAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIzNi41LDQzLjMgMTMuNSwyOS41IDM2LjUsMTUuOCAKCQk1OS40LDI5LjUgCSIvPgoJPHBvbHlnb24gb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSIyMC41LDI5LjkgMzguNiw0MC44IDU4LjQsMjguOSA0MC4zLDE4LjEgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzYuNSwzNi4zIDEzLjUsMjIuNiAzNi41LDguOCAKCQk1OS40LDIyLjYgCSIvPgoJPHBvbHlnb24gb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSIyMC41LDIyLjkgMzguNiwzMy44IDU4LjQsMjEuOSA0MC4zLDExLjEgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIzNi40LDI5LjUgMTMuNSwxNS44IDM2LjQsMiA1OS4zLDE1LjggCSIvPgoJPHBvbHlnb24gZmlsbD0iIzRGNjU4NyIgc3Ryb2tlPSIjMDEwMjAyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNjcuNywyOS4zIDM3LjksNDcuNCAzNy45LDU4LjQgCgkJNjcuNyw0MC41IAkiLz4KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjM2LjQsMjkuNSAxMy41LDE1LjggMzYuNCwyIAoJCTU5LjMsMTUuOCAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQ0VEOEVCIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI2Ni4zLDI4LjYgNjcuNywyOS4zIDM3LjksNDcuNCAKCQkzNy45LDU4LjQgMzYuNSw1Ny44IDM2LjUsNDYuNyAJIi8+CjwvZz4KPGcgaWQ9IkxheWVyXzYiPgo8L2c+CjxnIGlkPSJMYXllcl81Ij4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"router\",\n \"name\": \"router\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1MThweCIgaGVpZ2h0PSI0NzdweCIgdmlld0JveD0iMCAwIDUxOCA0NzciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxOCA0NzciIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik04NjAuNDAwMDIsMjQ3LjM5OTk5YzAuMDk5OTgsMC44OTk5OSwwLjA5OTk4LDEuOCwwLjA5OTk4LDIuN3YtMi43SDg2MC40MDAwMnoiLz4KCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik04NjIuNDAwMDIsMjUwLjEwMDAxaC0zLjc5OTk5YzAtMC44LDAtMS42MDAwMS0wLjA5OTk4LTIuNUw4NTguMzAwMDUsMjQ1LjVoNC4wOTk5OFYyNTAuMTAwMDEKCQlMODYyLjQwMDAyLDI1MC4xMDAwMXoiLz4KPC9nPgo8Zz4KCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik04NjAuNDAwMDIsMTUxLjhjMC4wOTk5OCwwLjg5OTk5LDAuMDk5OTgsMS44LDAuMDk5OTgsMi43di0yLjdIODYwLjQwMDAyeiIvPgoJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTg2Mi40MDAwMiwxNTQuNWgtMy43OTk5OWMwLTAuOCwwLTEuNjAwMDEtMC4wOTk5OC0yLjVsLTAuMjAwMDEtMi4xMDAwMWg0LjA5OTk4VjE1NC41TDg2Mi40MDAwMiwxNTQuNXoiCgkJLz4KPC9nPgo8cGF0aCBmaWxsPSIjQjJDQkVEIiBzdHJva2U9IiMyMzFGMjAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNODYwLjQwMDAyLDI0Ny4zOTk5OQoJYzAuMDk5OTgsMC44OTk5OSwwLjA5OTk4LDEuOCwwLjA5OTk4LDIuN3YtMi43SDg2MC40MDAwMnoiLz4KPHBhdGggZmlsbD0iI0IyQ0JFRCIgc3Ryb2tlPSIjMjMxRjIwIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTg2MC40MDAwMiwxNTEuOAoJYzAuMDk5OTgsMC44OTk5OSwwLjA5OTk4LDEuOCwwLjA5OTk4LDIuN3YtMi43SDg2MC40MDAwMnoiLz4KPGc+Cgk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMjQyLjcsMjU2Ljc5OTk5SDIzOWMtNS44LDAtMTAuNS00LjctMTAuNS0xMC41VjQ3LjJjMC01LjgsNC43LTEwLjUsMTAuNS0xMC41aDMuOGM1LjgsMCwxMC41LDQuNywxMC41LDEwLjVWMjQ2LjMKCQlDMjUzLjIsMjUyLjEwMDAxLDI0OC41LDI1Ni43OTk5OSwyNDIuNywyNTYuNzk5OTl6Ii8+Cgk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMzk2Ljg5OTk5LDM0My41aC0zLjc5OTk5Yy01Ljc5OTk5LDAtMTAuNS00LjcwMDAxLTEwLjUtMTAuNVYxMzMuODk5OTljMC01LjgsNC43MDAwMS0xMC41LDEwLjUtMTAuNWgzLjc5OTk5CgkJYzUuNzk5OTksMCwxMC41LDQuNywxMC41LDEwLjVWMzMzQzQwNy4zOTk5OSwzMzguNzk5OTksNDAyLjcwMDAxLDM0My41LDM5Ni44OTk5OSwzNDMuNXoiLz4KCTxwb2x5Z29uIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzAwMDAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIHBvaW50cz0iMzU4LDQyMi4zOTk5OSAyNzcuMjk5OTksNDQzLjEwMDAxIDIwNi44LDE1My4zIDUwOC4yOTk5OSwzMzQuNSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQ0NEOEVFIiBwb2ludHM9IjY5LjcsNDA1LjIwMDAxIDY5LDQwNS4yMDAwMSA2OSw0MDUuNzAwMDEgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0NDRDhFRSIgcG9pbnRzPSI2OS43LDMxNy4yOTk5OSA2OSwzMTcuMjk5OTkgNjksMzE3LjcwMDAxIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNDREQ5RUUiIHBvaW50cz0iMjc3LjI5OTk5LDM1NS43OTk5OSA3MSwyMjguNjAwMDEgMjA2LjgsMTQ2LjcgNDEzLjcwMDAxLDI3My43OTk5OSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQ0NEOEVFIiBwb2ludHM9IjY5LjcsMjI5LjM5OTk5IDY5LDIyOS4zOTk5OSA2OSwyMjkuOCAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQjVDNURDIiBwb2ludHM9IjY5LDMwNC4zOTk5OSAyNzcuMjk5OTksNDMyLjc5OTk5IDI3Ny4yOTk5OSw0MzIuNzk5OTkgMjc3LjI5OTk5LDM1OC4yMDAwMSA2OSwyMjkuOCAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjI5MSwzNDcuNSAxMTQuNSwyMzcuMTAwMDEgMjM1LjgsMTY0LjEwMDAxIDIwNi44LDE0Ni43IDcxLDIyOC42MDAwMSAyNzcuMjk5OTksMzU1Ljc5OTk5IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM2ODg1QTkiIHBvaW50cz0iNDE1LjcwMDAxLDM0OS41IDI3Ny4yOTk5OSw0MzIuNzk5OTkgMjc3LjI5OTk5LDQzMi43OTk5OSAyNzcuMjk5OTksMzU4LjIwMDAxIDQxNS43MDAwMSwyNzUgCSIvPgoJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTQyMy44OTk5OSwyNzAuMjAwMDFMMjA2LjgsMTM3bC0xNDUsODcuMzk5OTlMNjAuOCwyMjV2ODN2MC43MDAwMUwyNzcuMjk5OTksNDQybDE0Ni42MDAwMS04OC4yMDAwMQoJCVYyNzAuMjAwMDF6IE0yMDYuOCwxNDYuN2wyMDYuOTAwMDEsMTI3LjAwMDAybC0xMzYuMzk5OTksODJMNzEsMjI4LjYwMDAxTDIwNi44LDE0Ni43eiBNNDEzLjYwMDAxLDI3OC42MDAwMXY2OS42OTk5OAoJCWwtMTM0LjMwMDAyLDgwLjc5OTk5di02OS43MDAwMUw0MTMuNjAwMDEsMjc4LjYwMDAxeiBNMjc1LjIwMDAxLDM1OS4zOTk5OXY2OS42OTk5OEw3MSwzMDMuMjAwMDF2LTY5LjdMMjc1LjIwMDAxLDM1OS4zOTk5OXoiLz4KCTxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iMjUzLjIsMzg5LjI5OTk5IDEzNC4zLDMxNS42MDAwMSAxMzQuMywzMDQuNjAwMDEgMjUzLjIsMzc4LjI5OTk5IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iMTE4LjYsMzA1Ljg5OTk5IDEwNy4yLDI5OC43OTk5OSAxMDcuMiwyODcuNzk5OTkgMTE4LjYsMjk0Ljg5OTk5IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iMTAwLjQsMjk0LjcwMDAxIDg5LDI4Ny42MDAwMSA4OSwyNzYuNjAwMDEgMTAwLjQsMjgzLjcwMDAxIAkiLz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"server\",\n \"name\": \"server\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1NDMuNTIzOTlweCIgaGVpZ2h0PSI1MDguODUxMDFweCIgdmlld0JveD0iMCAwIDU0My41MjM5OSA1MDguODUxMDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU0My41MjM5OSA1MDguODUxMDEiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTg4My4xMTQwMSwyNjcuMTgxYzAuMDg4MDEsMC45MDIwMSwwLjE0NiwxLjgwNzAxLDAuMTQ2LDIuNzE3MDFWMjY3LjE4MUg4ODMuMTE0MDF6Ii8+Cgk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNODg1LjE1MzAyLDI2OS44OTdoLTMuNzg0OTdjMC0wLjc2MDk5LTAuMDQ0OTgtMS41ODgwMS0wLjEzOC0yLjUzMjAxbC0wLjIwMzk4LTIuMDc3aDQuMTI3MDF2NC42MDkwMQoJCUg4ODUuMTUzMDJ6Ii8+CjwvZz4KPGc+Cgk8cGF0aCBmaWxsPSIjNjg4NUE5IiBkPSJNODgzLjExNDAxLDE3MS42MTMwMWMwLjA4ODAxLDAuOTAxLDAuMTQ2LDEuODA2LDAuMTQ2LDIuNzE2di0yLjcxNkg4ODMuMTE0MDF6Ii8+Cgk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNODg1LjE1MzAyLDE3NC4zMjg5OWgtMy43ODQ5N2MwLTAuNzYxLTAuMDQ0OTgtMS41ODgtMC4xMzgtMi41M2wtMC4yMDM5OC0yLjA3OGg0LjEyNzAxdjQuNjA4SDg4NS4xNTMwMnoiCgkJLz4KPC9nPgo8cGF0aCBmaWxsPSIjQjJDQkVEIiBzdHJva2U9IiMyMzFGMjAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNODgzLjExNDAxLDI2Ny4xODEKCWMwLjA4ODAxLDAuOTAyMDEsMC4xNDYsMS44MDcwMSwwLjE0NiwyLjcxNzAxVjI2Ny4xODFIODgzLjExNDAxeiIvPgo8cGF0aCBmaWxsPSIjQjJDQkVEIiBzdHJva2U9IiMyMzFGMjAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNODgzLjExNDAxLDE3MS42MTMwMQoJYzAuMDg4MDEsMC45MDEsMC4xNDYsMS44MDYsMC4xNDYsMi43MTZ2LTIuNzE2SDg4My4xMTQwMXoiLz4KPGc+Cgk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjMwNS4yODI5OSw0NzguNDkxIDI3MS40NzE5OCw0NzEuODkyIDEzMC45NDIsOTMuMDQ2IDU0MS4xMDkwMSwzNDEuMzggCgkJCSIvPgoJPHBvbHlnb24gZmlsbD0iIzM2NUU3RiIgcG9pbnRzPSI0MzkuODQ2MDEsMjgwLjg3NSAyNzIuNTAxMDEsMzgwLjAwMTAxIDEwMC4yNzgsMjc5LjU5Njk4IDk1LjEwNSwyODMuMzA0OTkgMjcxLjQ3NTAxLDM4OS4wOTY5OCAKCQk0NDYuNTA2OTksMjg1LjExMzAxIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNDQ0Q4RUUiIHBvaW50cz0iOTIuNjkzLDI4NC4zNzkgOTEuOTkyLDI4NC4zNzkgOTEuOTkyLDI4NC43OTA5OSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjMjMxRjIwIiBwb2ludHM9IjkxLjQ5MiwyODUuNjY1MDEgOTEuNDkyLDI4My44NzkgOTQuNTMxLDI4My44NzkgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0I1QzVEQyIgcG9pbnRzPSI5MS45OTIsMzU2LjI5MDAxIDI3MS40Njg5OSw0NjIuNTk5IDI3MS40NzUwMSw0NjIuNTk1IDI3MS40NzUwMSwzOTEuMDk2OTggOTEuOTkyLDI4NC44MDA5OSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjQ1MC45NTkwMSwzNTYuMjkwMDEgMjcxLjQ4MTk5LDQ2Mi41OTkgMjcxLjQ3NTAxLDQ2Mi41OTUgMjcxLjQ3NTAxLDM5MS4wOTY5OCAKCQk0NTAuOTU5MDEsMjg0LjgwMDk5IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNDQ0Q4RUUiIHBvaW50cz0iOTIuNjkzLDIwMC4wNTcwMSA5MS45OTIsMjAwLjA1NzAxIDkxLjk5MiwyMDAuNDcwOTkgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzIzMUYyMCIgcG9pbnRzPSI5MS40OTIsMjAxLjM0NyA5MS40OTIsMTk5LjU1NzAxIDk0LjUyMywxOTkuNTU3MDEgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0NERDlFRSIgcG9pbnRzPSIyNzEuNDc1MDEsMjIwLjEzMSA5My45NTIsMTE0Ljk5NSAyNzAuOTE1OTksOS45ODYgNDQ4Ljk5MiwxMTQuOTk5IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiMzNjVFN0YiIHBvaW50cz0iNDM3Ljc4MjAxLDE5Mi42NyAyNzAuOTE1MDEsMjkxLjQ5Mzk5IDEwNC42MSwxOTMuMDAxMDEgOTEuOTg2LDIwMC40NzcwMSAyNzEuNDc1MDEsMzA2Ljc3NiAKCQk0NTAuOTY1LDIwMC40NzcwMSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQjVDNURDIiBwb2ludHM9IjkxLjk5MiwyNzEuOTY3OTkgMjcxLjQ2ODk5LDM3OC4yOCAyNzEuNDc1MDEsMzc4LjI3Mzk5IDI3MS40NzUwMSwzMDYuNzc2IDkxLjk5MiwyMDAuNDggCSIvPgoJPHBvbHlnb24gZmlsbD0iIzY4ODVBOSIgcG9pbnRzPSI0NTAuOTU5MDEsMjcxLjk2Nzk5IDI3MS40ODE5OSwzNzguMjggMjcxLjQ3NTAxLDM3OC4yNzM5OSAyNzEuNDc1MDEsMzA2Ljc3NiA0NTAuOTU5MDEsMjAwLjQ4IAkKCQkiLz4KCTxwb2x5Z29uIGZpbGw9IiNDQ0Q4RUUiIHBvaW50cz0iOTIuNjkzLDExNS43MzggOTEuOTkyLDExNS43MzggOTEuOTkyLDExNi4xNSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQjVDNURDIiBwb2ludHM9IjkxLjk5MiwxODcuNjQ5OTkgMjcxLjQ2ODk5LDI5My45NTgwMSAyNzEuNDc1MDEsMjkzLjk1NDAxIDI3MS40NzUwMSwyMjIuNDU1IDkxLjk5MiwxMTYuMTU4IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMjg0Ljc5MTk5LDIxMi4yNDQgMTM2LjI0OCwxMjMuMTMzIDI5OS4xMDgsMjYuNjExIDI3MC45MTU5OSw5Ljk4NiA5My45NTIsMTE0Ljk5NSAKCQkyNzEuNDc1MDEsMjIwLjEzMSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjNjg4NUE5IiBwb2ludHM9IjQ1MC45NTkwMSwxODcuNjQ5OTkgMjcxLjQ4MTk5LDI5My45NTgwMSAyNzEuNDc1MDEsMjkzLjk1NDAxIDI3MS40NzUwMSwyMjIuNDU1IAoJCTQ1MC45NTkwMSwxMTYuMTU4IAkiLz4KCTxnPgoJCTxnIG9wYWNpdHk9IjAuOCIgZmlsbD0iIzAwMDAwMCI+CgkJCTxwb2x5Z29uIGZpbGw9IiNFQUY0RkYiIHBvaW50cz0iMTU1LjkzNSwyMjIuOTYwMDEgMTk3LjYxNTAxLDE4MS4yNzkwMSAxNTUuODQyLDE1Ni41MzkgMTE0LjE2NSwxOTguMjE2IAkJCSIvPgoJCTwvZz4KCQk8ZyBvcGFjaXR5PSIwLjgiIGZpbGw9IiMwMDAwMDAiPgoJCQk8cG9seWdvbiBmaWxsPSIjRUFGNEZGIiBwb2ludHM9IjE4NS45NTM5OSwyNDAuODkzMDEgMjI3LjgyODk5LDE5OS4wMTgwMSAyMDYuODQzOTksMTg2LjU4OSAxNjQuOTY4OTksMjI4LjQ2NCAJCQkiLz4KCQk8L2c+Cgk8L2c+Cgk8Zz4KCQk8ZyBvcGFjaXR5PSIwLjgiIGZpbGw9IiMwMDAwMDAiPgoJCQk8cG9seWdvbiBmaWxsPSIjRUFGNEZGIiBwb2ludHM9IjE1NS44ODQ5OSwzMDcuNDE1MDEgMTk3LjcwMiwyNjUuNTk2MDEgMTU1Ljc5MjAxLDI0MC43NzQgMTEzLjk3NywyODIuNTkgCQkJIi8+CgkJPC9nPgoJCTxnIG9wYWNpdHk9IjAuOCIgZmlsbD0iIzAwMDAwMCI+CgkJCTxwb2x5Z29uIGZpbGw9IiNFQUY0RkYiIHBvaW50cz0iMTg2LjAwMiwzMjUuNDA3MDEgMjI4LjAxNywyODMuMzkzMDEgMjA2Ljk2MywyNzAuOTI0OTkgMTY0Ljk1LDMxMi45MzYgCQkJIi8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPGcgb3BhY2l0eT0iMC44IiBmaWxsPSIjMDAwMDAwIj4KCQkJPHBvbHlnb24gZmlsbD0iI0VBRjRGRiIgcG9pbnRzPSIxNTUuOTI3LDM5MS41ODQ5OSAxOTcuNjI4MDEsMzQ5Ljg4IDE1NS44MzI5OSwzMjUuMTI3OTkgMTE0LjEzNCwzNjYuODI3IAkJCSIvPgoJCTwvZz4KCQk8ZyBvcGFjaXR5PSIwLjgiIGZpbGw9IiMwMDAwMDAiPgoJCQk8cG9seWdvbiBmaWxsPSIjRUFGNEZGIiBwb2ludHM9IjE4NS45NjEsNDA5LjUyNiAyMjcuODU4OTksMzY3LjYzIDIwNi44NjQsMzU1LjE5NCAxNjQuOTY2LDM5Ny4wOTEgCQkJIi8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIxMzkuODkyLDE3Mi4wNjEgMTIxLjk5MiwxNjEuNDYwMDEgMTIxLjk5MiwxNzcuODg2OTkgMTM5Ljg5MiwxODguNDg5IAkJIi8+Cgk8L2c+Cgk8Zz4KCQk8cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjE2NC4yNDY5OSwxODcuNDE2IDE0Ni4zNDcsMTc2LjgxNCAxNDYuMzQ3LDE5My4yNDEgMTY0LjI0Njk5LDIwMy44NDM5OSAJCSIvPgoJPC9nPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIxMzkuODkyLDI1Ni4zMjQwMSAxMjEuOTkyLDI0NS43MjQgMTIxLjk5MiwyNjIuMTQ5OTkgMTM5Ljg5MiwyNzIuNzUyOTkgCQkiLz4KCTwvZz4KCTxnPgoJCTxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iMTY0LjI0Njk5LDI3MS42Nzk5OSAxNDYuMzQ3LDI2MS4wNzggMTQ2LjM0NywyNzcuNTA1IDE2NC4yNDY5OSwyODguMTA2OTkgCQkiLz4KCTwvZz4KCTxnPgoJCTxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iMTM5Ljg5MiwzNDIuMzcyMDEgMTIxLjk5MiwzMzEuNzY5OTkgMTIxLjk5MiwzNDguMTk4IDEzOS44OTIsMzU4Ljc5OTk5IAkJIi8+Cgk8L2c+Cgk8Zz4KCQk8cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjE2NC4yNDY5OSwzNTcuNzI4IDE0Ni4zNDcsMzQ3LjEyNjAxIDE0Ni4zNDcsMzYzLjU1MiAxNjQuMjQ2OTksMzc0LjE1NSAJCSIvPgoJPC9nPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIyNDcuNjQ3OTksMjQ4LjcyNCAxNzEuMzg0LDIwMy41NTkwMSAxNzEuMzg0LDE5Ni42MzQ5OSAyNDcuNjc5LDI0MS43NyAJCSIvPgoJPC9nPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIyNDcuNjQ3OTksMzMyLjgyMTAxIDE3MS4zODQsMjg3LjY1Mzk5IDE3MS4zODQsMjgwLjczMTk5IDI0Ny42NzksMzI1Ljg2ODAxIAkJIi8+Cgk8L2c+Cgk8Zz4KCQk8cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjI0Ny42NDc5OSw0MTYuOTE5MDEgMTcxLjM4NCwzNzEuNzUyOTkgMTcxLjM4NCwzNjQuODI5MDEgMjQ3LjY3OSw0MDkuOTYzOTkgCQkiLz4KCTwvZz4KCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik00NTguOTU1OTksMTExLjU4OUwyNzAuOTAzOTksMC42OTFMODQuOTcxLDExMS4wMjFsLTAuOTc5LDAuNTgydjc5LjYwNjAxbDUuMTMzLDIuODU1bC01LjEzMywyLjg1Njk5CgkJdjc3LjY3bDUuMDM2LDMuNTA0bC01LjAzOSwyLjYzNTk5djgwLjExNmwxODcuNDgzLDExMS4wNDNsMTg2LjUwNC0xMTAuNDYxbDAuOTgwMDEtMC41ODJWMjgyLjcxNmwtNC41NzgtMy4xMzUwMWw0LjU3OC0zLjIwNwoJCXYtODAuNDUzbC01LjEzMy0yLjg1Njk5bDUuMTMzLTIuODU1TDQ1OC45NTU5OSwxMTEuNTg5TDQ1OC45NTU5OSwxMTEuNTg5eiBNMjcwLjkxNTk5LDkuOTg2bDE3OC4wNzQ5OCwxMDUuMDEzTDI3MS40NzUwMSwyMjAuMTMxCgkJTDkzLjk1MiwxMTQuOTk1TDI3MC45MTU5OSw5Ljk4NnogTTQ0OC45NTkwMSwxMTkuNjY3djY2Ljg0NEwyNzMuNDc2MDEsMjkwLjQ1MnYtNjYuODU2TDQ0OC45NTkwMSwxMTkuNjY3eiBNMjY5LjQ3NTAxLDIyMy41OTU5OQoJCXY2Ni44NTVMOTMuOTkyLDE4Ni41MTF2LTY2Ljg0NEwyNjkuNDc1MDEsMjIzLjU5NTk5eiBNOTMuOTkyLDI3MC44Mjh2LTY2LjgzODk5bDE3NS40ODMsMTAzLjkyNTk5djY2Ljg1OTAxTDkzLjk5MiwyNzAuODI4egoJCSBNMjY5LjQ3NTAxLDQ1OS4wOTI5OWwtMTc1LjQ4My0xMDMuOTQ0di02Ni44NGwxNzUuNDgzLDEwMy45MjU5OVY0NTkuMDkyOTlMMjY5LjQ3NTAxLDQ1OS4wOTI5OXogTTk1LjEwNSwyODMuMzA0OTlsNS4xNzMtMy43MDgwMQoJCWwxNzAuMTcyOTksMTAwLjQwMzk5YzAuMDI2LDAuMDE1OTksMC4wNTYsMC4wMTk5OSwwLjA4MzAxLDAuMDM1YzAuMTA5OTksMC4wNTg5OSwwLjIyNTAxLDAuMTA2OTksMC4zNDI5OSwwLjE0NDk5CgkJYzAuMDQ5MDEsMC4wMTQwMSwwLjA5Njk4LDAuMDI3MDEsMC4xNDcsMC4wMzljMC4xNTEsMC4wMzUsMC4zMDQ5OSwwLjA2MSwwLjQ1OTk5LDAuMDYxYzAuMDM1LDAsMC4wNjktMC4wMTE5OSwwLjEwNTAxLTAuMDE0MDEKCQljMC4xMDgtMC4wMDgsMC4yMTYtMC4wMTk5OSwwLjMyMTAxLTAuMDQzYzAuMDc3LTAuMDE4MDEsMC4xNTEtMC4wNDA5OSwwLjIyNjk5LTAuMDY3OTkKCQljMC4wNjc5OS0wLjAyMzAxLDAuMTM1OTktMC4wNTMwMSwwLjIwMi0wLjA4NmMwLjA1Mzk5LTAuMDI0OTksMC4xMTItMC4wMzY5OSwwLjE2NC0wLjA2Nzk5bDE2Ny4zNDUtOTkuMTI2MDFsNi42NjEwMSw0LjIzODAxCgkJTDI3MS40NzUwMSwzODguNzcyTDk1LjEwNSwyODMuMzA0OTl6IE00NDguOTU5MDEsMzU1LjE0ODk5bC0xNzUuNDgzLDEwMy45NDR2LTY2Ljg1Njk5TDQ0OC45NTkwMSwyODguMzFWMzU1LjE0ODk5CgkJTDQ0OC45NTkwMSwzNTUuMTQ4OTl6IE00NDguOTU5MDEsMjcwLjgyOGwtMTc1LjQ4MywxMDMuOTQ1OTh2LTY2Ljg1OTAxbDE3NS40ODMtMTAzLjkyNTk5VjI3MC44MjhMNDQ4Ljk1OTAxLDI3MC44Mjh6CgkJIE0yNzEuNDc1MDEsMzA0LjQ1Mkw5My45NTIsMTk5LjMxNzk5bDYuOTAzLTQuMDkzbDE2OS41OTUsMTAwLjQ1Mjk5YzAuMTYyOTksMC4wOTYwMSwwLjMzNzAxLDAuMTY0LDAuNTE1OTksMC4yMTEKCQljMC4xNTYwMSwwLjA0MDk5LDAuMzE2MDEsMC4wNiwwLjQ3Njk5LDAuMDYyMDFjMC4wMDgsMCwwLjAxNTk5LDAuMDA0LDAuMDIzMDEsMC4wMDRjMCwwLDAsMCwwLjAwMTAxLDAKCQljMC4wMDUsMCwwLjAxMDAxLDAuMDAyMDEsMC4wMTUwMSwwLjAwMjAxYzAuMzUzLDAsMC43MDU5OS0wLjA5Mzk5LDEuMDE5OTktMC4yNzg5OWwxNjkuNTkzMDItMTAwLjQ1Mmw2LjkwMjAxLDQuMDkyCgkJTDI3MS40NzUwMSwzMDQuNDUyeiIvPgo8L2c+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"speech\",\n \"name\": \"speech\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMDYuOHB4IiBoZWlnaHQ9IjIxMC42MDAwMXB4IiB2aWV3Qm94PSIwIDAgMjA2LjggMjEwLjYwMDAxIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDYuOCAyMTAuNjAwMDEiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJSb29mdG9wXzFfIiBvcGFjaXR5PSIwLjEiPgoJPHBhdGggZmlsbD0iIzFFMUUxRSIgZD0iTTExNC4zLDIwOC4zOTk5OWwtNjEuMi0zNi44Yy0zLjItMS44OTk5OS0zLjItNi41LDAtOC4zOTk5OUw4MC4zLDE0Ni44YzEuNi0wLjg5OTk5LDMuNS0wLjg5OTk5LDUsMAoJCWw2Ni44LDQwYzMuMiwxLjg5OTk5LDMuMiw2LjUsMCw4LjM5OTk5bC0yMiwxMy4yQzEyNS4zLDIxMS4zLDExOS4yLDIxMS4zLDExNC4zLDIwOC4zOTk5OXoiLz4KPC9nPgo8cG9seWdvbiBkaXNwbGF5PSJub25lIiBmaWxsPSIjQ0REOUVFIiBwb2ludHM9IjEwMS42LDI2OC43MDAwMSAtODAuOCwxNTkuMTAwMDEgMTAxLDQ5LjYgMjg0LDE1OS4xMDAwMSAiLz4KPGc+Cgk8cGF0aCBmaWxsPSIjOEU4RThFIiBkPSJNMTQzLjEwMDAxLDE1My4zOTk5OWMtMC4xMDAwMSwwLjEwMDAxLTAuMiwwLjEwMDAxLTAuMywwLjJsLTQuNywyLjhMMTI3LjMsMTYzCgkJYy0xLDAuNjAwMDEtMi4yLDAuODk5OTktMy40LDAuODk5OTljLTEuMiwwLTIuMy0wLjMtMy4zLTAuODk5OTlMNTgsMTI1LjRMMzAuNCwxNDJ2LTMzLjJsLTAuNS0wLjNjLTMuNC0yLjEtNS42LTUuOC01LjYtOS45VjI1CgkJYzAtMi40LDEuMy00LjYsMy40LTUuN2wxNS05YzEuMS0wLjksMi42LTEuNCw0LTEuNGMxLjIsMCwyLjMsMC4zLDMuMywwLjlsMTUsOWMwLjItMi4yLDEuNC00LjIsMy40LTUuMmwxNS05CgkJYzEuMS0wLjksMi42LTEuNCw0LTEuNGMxLjIsMCwyLjMsMC4zLDMuMywwLjlsOTAuNjk5OTksNTQuNUMxODQuNzk5OTksNjAuNywxODcsNjQuNCwxODcsNjguNXY3My42MDAwMQoJCWMwLDIuMzk5OTktMS4zLDQuNjAwMDEtMy41LDUuOGwtMy44OTk5OSwyLjNsMC44LDIyLjg5OTk5TDE2Mi41LDE4NEwxNDMuMTAwMDEsMTUzLjM5OTk5eiIvPgoJPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTg3LjQsNC44YzAuOSwwLDEuNywwLjIsMi42LDAuN0wxODAuNyw2MGMzLDEuOCw0LjgsNS4xLDQuOCw4LjZ2NzMuNmMwLDItMS4yLDMuNy0yLjgsNC41bC00LjcsMi44bDAuOCwyMi44OTk5OUwxNjMsMTgyCgkJbC0xOS41LTMwLjhjLTAuMzk5OTksMC4zOTk5OS0wLjg5OTk5LDAuOC0xLjM5OTk5LDEuMTAwMDFsLTQuNywyLjhsLTEwLjksNi42MDAwMWwwLDBjLTAuOCwwLjUtMS43LDAuNy0yLjYsMC43cy0xLjctMC4yLTIuNi0wLjcKCQlsLTI1LjEtMTUuMTAwMDFsLTQzLjMtMjZsNSwzbC0yNi4xLDE1Ljd2LTMxLjRsLTEuMi0wLjdjLTMtMS44LTQuOC01LjEtNC44LTguNlYyNC45YzAtMiwxLjEtMy42LDIuNi00LjRsMCwwbDAsMGwwLDBsMTUuMS05LjEKCQljMC45LTAuNywyLTEuMSwzLjEtMS4xYzAuOSwwLDEuNywwLjIsMi42LDAuN2wxNy4zLDEwLjR2LTIuMWMwLTIsMS4xLTMuNiwyLjYtNC40bDAsMGwwLDBsMCwwbDE1LjEtOS4xCgkJQzg1LjIsNS4yLDg2LjMsNC44LDg3LjQsNC44IE04Ny40LDEuOGMtMS43LDAtMy40LDAuNi00LjgsMS42bC0xNC45LDguOWMtMS43LDAuOS0zLDIuNC0zLjYsNC4ybC0xMy4zLThjLTEuMy0wLjgtMi43LTEuMS00LjEtMS4xCgkJQzQ1LDcuNCw0My4zLDgsNDEuOSw5TDI3LDE3LjljLTIuNiwxLjQtNC4yLDQuMS00LjIsN3Y3My42YzAsNC41LDIuMyw4LjcsNi4xLDExdjI5Ljd2NS4zbDQuNS0yLjdMNTgsMTI3LjFsMzYuNywyMi4xTDExOS44LDE2NC4zCgkJYzEuMiwwLjgsMi43LDEuMTAwMDEsNC4xLDEuMTAwMDFzMi45LTAuMzk5OTksNC4xLTEuMTAwMDFsMTAuOS02LjYwMDAxbDMuNy0yLjJsMTcuODk5OTksMjguMTAwMDFsMS42MDAwMSwyLjVsMi41LTEuNQoJCUwxODAuNDk5OTgsMTc1bDEuNS0wLjg5OTk5bC0wLjEwMDAxLTEuOGwtMC43LTIxLjEwMDAxbDMuMTAwMDEtMS44YzIuNy0xLjM5OTk5LDQuMy00LjEwMDAxLDQuMy03LjEwMDAxVjY4LjYKCQljMC00LjUtMi4zOTk5OS04LjgtNi4zLTExLjFMOTEuNSwzQzkwLjMsMi4yLDg4LjksMS44LDg3LjQsMS44TDg3LjQsMS44eiIvPgo8L2c+CjxnIGlkPSJTcGVlY2hfQnViYmxlXzFfM18iPgoJPHBhdGggZmlsbD0iI0JCQjhCOSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTE0MCw2NS42TDQ5LjIsMTEuMQoJCWMtMS45LTEuMi00LjEtMC44LTUuNywwLjRsLTE1LjEsOS4xYzEuNS0wLjgsMy4zLTAuOSw0LjksMC4xTDEyNCw3NS4yYzMsMS44LDQuOCw1LjEsNC44LDguNnY3My42YzAsMS44OTk5OS0xLDMuMzk5OTktMi40LDQuMwoJCWwwLDBsMTAuOS02LjYwMDAxbDQuNy0yLjhjMS42MDAwMS0wLjgsMi44LTIuMzk5OTksMi44LTQuNVY3NC4yQzE0NC44LDcwLjcsMTQzLDY3LjQsMTQwLDY1LjZ6Ii8+Cgk8cGF0aCBmaWxsPSIjRTBFMEUwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTI0LjEsNzUuMkwzMy40LDIwLjcKCQljLTMuMy0yLTcuNiwwLjQtNy42LDQuM3Y3My42YzAsMy41LDEuOCw2LjgsNC44LDguNmwxLjIsMC43djMxLjM5OTk5TDUzLDEyMC42bDQzLjMsMjYuMDAwMDFsMjUuMSwxNS4xMDAwMQoJCWMzLjMsMiw3LjYtMC4zOTk5OSw3LjYtNC4zVjgzLjhDMTI4Ljg5OTk5LDgwLjIsMTI3LjEsNzcsMTI0LjEsNzUuMnoiLz4KCTxwb2x5Z29uIGZpbGw9IiM3Rjk1QUMiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzMuNSw0NC45IDMzLjUsNTIuNSAxMDIuNyw5NCAKCQkxMDIuNyw4Ni41IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiM3Rjk1QUMiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzMuNSw2My41IDMzLjUsNzEgMTE0LjksMTE5LjkgCgkJMTE0LjksMTEyLjMgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzdGOTVBQyIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIzMy41LDgyIDMzLjUsODkuNiA4NC42LDEyMC4zIAoJCTg0LjYsMTEyLjggCSIvPgoJPHBhdGggZmlsbD0iIzhFOEU4RSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTE0My42MDAwMSw2OS41bC0xNi4yLDlsMCwwCgkJYzEsMS42LDEuNSwzLjQsMS41LDUuM3Y3My41OTk5OWMwLDEuODk5OTktMSwzLjM5OTk5LTIuNCw0LjNsMCwwbDEwLjktNi42MDAwMWw0LjctMi44YzEuNjAwMDEtMC44LDIuOC0yLjM5OTk5LDIuOC00LjVWNzQuMgoJCUMxNDQuOCw3Mi41LDE0NC4zOTk5OSw3MC45LDE0My42MDAwMSw2OS41eiIvPgo8L2c+Cjxwb2x5Z29uIGZpbGw9IiM3Nzc3NzciIHBvaW50cz0iMTYyLjEwMDAxLDE1Ni4xMDAwMSAxNjMsMTgyIDE3OC44OTk5OSwxNzIuMzk5OTkgMTc4LjEwMDAxLDE0OS41ICIvPgo8ZyBpZD0iU2hhZG93Ij4KCTxwYXRoIGZpbGw9IiM1QjVCNUIiIGQ9Ik03MS40LDEwMS42Ii8+Cgk8cG9seWxpbmUgb3BhY2l0eT0iMC41IiBmaWxsPSIjMUUxRTFFIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSI3MS40LDEwMS42IDkwLjUsMTM0LjggMTI4Ljg5OTk5LDE1OC41IAoJCTE0NC44OTk5OSwxNDguODk5OTkgMTQ0LjIsMTQ1LjMgNzEuNCwxMDEuNiAJIi8+CjwvZz4KPGcgaWQ9IlNwZWVjaF9CdWJibGVfMV8yXyI+Cgk8cG9seWdvbiBmaWxsPSIjNzc3Nzc3IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjE2Mi4xMDAwMSwxNTYuMTAwMDEgMTYzLDE4MiAKCQkxNzguODk5OTksMTcyLjM5OTk5IDE3OC4xMDAwMSwxNDkuNSAJIi8+Cgk8cGF0aCBmaWxsPSIjQkJCOEI5IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTgwLjcsNjAuMUw5MCw1LjVjLTEuOS0xLjItNC4xLTAuOC01LjcsMC40CgkJTDY5LjIsMTVjMS41LTAuOCwzLjMtMC45LDQuOSwwLjFsOTAuNjk5OTksNTQuNWMzLDEuOCw0LjgsNS4xLDQuOCw4LjZ2NzMuNTk5OTljMCwxLjg5OTk5LTEsMy4zOTk5OS0yLjM5OTk5LDQuM2wwLDAKCQlsMTAuODk5OTktNi42MDAwMWw0LjctMi44YzEuNjAwMDEtMC44LDIuOC0yLjM5OTk5LDIuOC00LjVWNjguNkMxODUuNjAwMDEsNjUuMSwxODMuNyw2MS45LDE4MC43LDYwLjF6Ii8+Cgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTY0LjgsNjkuNkw3NC4xLDE1LjEKCQljLTMuMy0yLTcuNiwwLjQtNy42LDQuM1Y5M2MwLDMuNSwxLjgsNi44LDQuOCw4LjZMMTM3LDE0MWwyNiw0MWwtMC44OTk5OS0yNS44OTk5OWMzLjMsMiw3LjYwMDAxLTAuMzk5OTksNy42MDAwMS00LjNWNzguMgoJCUMxNjkuNyw3NC43LDE2Ny44LDcxLjQsMTY0LjgsNjkuNnoiLz4KCTxwb2x5Z29uIGZpbGw9IiM3Rjk1QUMiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iODYuNiw0Ni41IDg2LjYsNTQgMTU1LjgsOTUuNiAKCQkxNTUuOCw4OCAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjN0Y5NUFDIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9Ijc0LjMsNTcuOSA3NC4zLDY1LjQgCgkJMTU1LjYwMDAxLDExNC4zIDE1NS42MDAwMSwxMDYuOCAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjN0Y5NUFDIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjEwNC43LDk1IDEwNC43LDEwMi41IDE1NS44LDEzMy4zIAoJCTE1NS44LDEyNS43IAkiLz4KCTxwYXRoIGZpbGw9IiM4RThFOEUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xODQuMzk5OTksNjMuOWwtMTYuMiw5bDAsMAoJCWMxLDEuNiwxLjUsMy40LDEuNSw1LjN2NzMuNmMwLDEuODk5OTktMSwzLjM5OTk5LTIuMzk5OTksNC4zbDAsMEwxNzguMiwxNDkuNWw0LjctMi44YzEuNjAwMDEtMC44LDIuOC0yLjM5OTk5LDIuOC00LjVWNjguNgoJCUMxODUuNjAwMDEsNjYuOSwxODUuMTAwMDEsNjUuMywxODQuMzk5OTksNjMuOXoiLz4KPC9nPgo8cG9seWdvbiBmaWxsPSIjOEU4RThFIiBwb2ludHM9IjMxLjksMTM5LjMgNTgsMTIzLjYgNTMsMTIwLjYgIi8+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"sphere\",\n \"name\": \"sphere\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMjQyLjNweCIgaGVpZ2h0PSIxOTIuMnB4IiB2aWV3Qm94PSIwIDAgMjQyLjMgMTkyLjIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0Mi4zIDE5Mi4yIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgZD0iTTEzNSwxMDEuOGMtNCwwLTcuOSwwLjEtMTEuNywwLjR2NjkuNjk5OTljMy44LDAuMiw3LjcsMC4zOTk5OSwxMS43LDAuMzk5OTkKCWM0NS4zOTk5OSwwLDgyLjItMTUuOCw4Mi4yLTM1LjJDMjE3LjIsMTE3LjUsMTgwLjM5OTk5LDEwMS44LDEzNSwxMDEuOHoiLz4KPGNpcmNsZSBmaWxsPSIjREFFMkVGIiBjeD0iMTIxLjYiIGN5PSI5NS44IiByPSI3NS40Ii8+CjxwYXRoIGZpbGw9IiM2RDg1QTYiIGQ9Ik0xODgsOTEuMmMwLTM4LjQtMzAuNS02OS42LTY4LjYtNzAuN2MtMzguNywxLjEtNzAsMzEuMy03Myw2OS41YzAsMC40LDAsMC44LDAsMS4yCgljMCwzOS4wOTk5OSwzMS43LDcwLjgsNzAuOCw3MC44UzE4OCwxMzAuMywxODgsOTEuMnoiLz4KPHBhdGggZmlsbD0iI0I4QzVEQSIgZD0iTTE3NS42MDAwMSw3Ny45YzAtMTYuNS02LTMxLjYtMTUuODk5OTktNDMuM2MtMTEuMy04LjUtMjUuMi0xMy43LTQwLjQtMTQuMkMxMDAsMjEsODIuNSwyOC44LDY5LjUsNDEuM2wwLDAKCUM1Ni41LDUzLjgsNDcuOSw3MC45LDQ2LjQsOTBsMCwwYzAsMC40LDAsMC44LDAsMS4yYzAsNC45LDAuNSw5LjcsMS40LDE0LjNjMTAuNSwyMy4yLDMzLjgsMzkuMyw2MC45LDM5LjMKCUMxNDUuNywxNDQuOCwxNzUuNjAwMDEsMTE0LjgsMTc1LjYwMDAxLDc3Ljl6Ii8+CjxwYXRoIGZpbGw9IiNDRkQ5RUMiIGQ9Ik02OS41LDQxLjNMNjkuNSw0MS4zQzU5LjMsNTEsNTEuOSw2My41LDQ4LjQsNzcuNUM1OC40LDk0LjYsNzYuOSwxMDYsOTgsMTA2YzMxLjgsMCw1Ny41LTI1LjcsNTcuNS01Ny41CgljMC02LjYtMS4xMDAwMS0xMi45LTMuMi0xOC44Yy05LjgtNS42LTIxLTktMzMtOS40QzEwMCwyMSw4Mi41LDI4LjgsNjkuNSw0MS4zeiIvPgo8Y2lyY2xlIGlkPSJPdXRsaW5lIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBjeD0iMTIxLjYiIGN5PSI5NS44IiByPSI3NS40Ii8+Cjwvc3ZnPgo=\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"storage\",\n \"name\": \"storage\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1NjcuMTE3OThweCIgaGVpZ2h0PSI1NTQuNTg2cHgiIHZpZXdCb3g9IjAgMCA1NjcuMTE3OTggNTU0LjU4NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTY3LjExNzk4IDU1NC41ODYiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgZD0iTTUyNy44NjEwMiwzNjcuMjYxOTljLTAuMzYyOTgsNjQuMjQzOTktOTAuNjE3OTgsMTE1LjY3My0yMDEuNTkxLDExNC44NwoJCQljLTExMC45NzQtMC44MDItMjAwLjY0MTAxLTUzLjUzMjAxLTIwMC4yNzkwMS0xMTcuNzc2YzAuMzYzLTY0LjI0Miw5MC42MTgtMTE1LjY3MDk5LDIwMS41OTItMTE0Ljg2OQoJCQlDNDM4LjU1NiwyNTAuMjkxLDUyOC4yMjMwMiwzMDMuMDE5OTksNTI3Ljg2MTAyLDM2Ny4yNjE5OXoiLz4KCQk8cGF0aCBmaWxsPSIjNjg4NUE5IiBkPSJNMjgyLjc0MiwzOTEuMDQzYy05NC44MzgtMC42MDU5OS0xNzEuNS0zNS40MDI5OC0xNzEuMjMtNzcuNzIxMDFsLTAuNDU5LDcxLjg2MzAxCgkJCWMtMC4zMSw0OC41MTQwMSw3Ni4zMjAwMSw4OC4zMzMwMSwxNzEuMTU3OTksODguOTM5Yzk0LjgzNzAxLDAuNjA1OTksMTcxLjk3LTM4LjIzMDk5LDE3Mi4yNzg5OS04Ni43NDVsMC40NTkwMS03MS44NjMwMQoJCQlDNDU0LjY3OTk5LDM1Ny44MzMwMSwzNzcuNTc5OTksMzkxLjY0ODAxLDI4Mi43NDIsMzkxLjA0M3oiLz4KCQk8cGF0aCBmaWxsPSIjQzNENUVBIiBkPSJNMjAzLjI5MSw0NjMuNzkxOTljNy40MDQwMSwyLjAxNywxNS4xMjUsMy43NjU5OSwyMy4xMTcsNS4yMjRsMC41MjY5OS04Mi40NzUwMQoJCQljLTcuOTkzLTEuMjc4OTktMTUuNzE1LTIuODEyMDEtMjMuMTIxLTQuNTc3TDIwMy4yOTEsNDYzLjc5MTk5eiIvPgoJCTxwYXRoIGZpbGw9IiNDM0Q1RUEiIGQ9Ik0xMTEuNTEzLDMxMy4zMjEwMWwtMC40NTksNzEuODYzMDFjLTAuMTk4LDMxLjAzOSwzMS4xMDAwMSw1OC41MTgwMSw3OC41MTEsNzQuNDQ2OTlsMC41MTktODEuMzA2CgkJCUMxNDIuNjYxLDM2NC4zOTIsMTExLjM0LDM0MC4zOTcsMTExLjUxMywzMTMuMzIxMDF6Ii8+CgkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTI4My40MjU5OSwyODMuOTcyOTljLTk0LjgzOC0wLjYwNTk5LTE3MS41LTM1LjQwMy0xNzEuMjMtNzcuNzIxMDFsLTAuNDU5LDcxLjg2MzAxCgkJCWMtMC4zMSw0OC41MTQwMSw3Ni4zMjAwMSw4OC4zMzYsMTcxLjE1ODAyLDg4Ljk0MTAxYzk0LjgzNzAxLDAuNjA1OTksMTcxLjk3LTM4LjIzMywxNzIuMjc4OTktODYuNzQ3MDFsMC40NTkwMS03MS44NjMwMQoJCQlDNDU1LjM2NDAxLDI1MC43NjQwMSwzNzguMjY0MDEsMjg0LjU3OTAxLDI4My40MjU5OSwyODMuOTcyOTl6Ii8+CgkJPHBhdGggZmlsbD0iI0MzRDVFQSIgZD0iTTE5MC4yNDg5OSwzNTIuNTYyMDFsMC41MTktODEuMzA3MDFjLTQ3LjQyMy0xMy45MzEtNzguNzQ0LTM3LjkyODAxLTc4LjU3MS02NS4wMDI5OWwtMC40NTksNzEuODYzMDEKCQkJQzExMS41MzksMzA5LjE1NSwxNDIuODM4LDMzNi42MzMsMTkwLjI0ODk5LDM1Mi41NjIwMXoiLz4KCQk8cGF0aCBmaWxsPSIjQzNENUVBIiBkPSJNMjAzLjk3NTAxLDM1Ni43MjE5OGM3LjQwNDAxLDIuMDE3LDE1LjEyNSwzLjc2NTk5LDIzLjExNyw1LjIyNGwwLjUyNjk5LTgyLjQ3NjAxCgkJCWMtNy45OTMtMS4yNzgwMi0xNS43MTUtMi44MTEtMjMuMTIxLTQuNTc1OTlMMjAzLjk3NTAxLDM1Ni43MjE5OHoiLz4KCQk8cGF0aCBmaWxsPSIjQ0REOUVFIiBkPSJNNDU2LjM1MDAxLDk2LjMyYy0wLjMxLDQ4LjUxNC03Ny40NDE5OSw4Ny4zNTA5OS0xNzIuMjc5MDIsODYuNzQ1CgkJCWMtOTQuODM4LTAuNjA2LTE3MS40NjgtNDAuNDI1LTE3MS4xNTgtODguOTM5YzAuMzEtNDguNTEzLDc3LjQ0Mi04Ny4zNSwxNzIuMjgwMDEtODYuNzQ0CgkJCUMzODAuMDMxMDEsNy45ODgsNDU2LjY2LDQ3LjgwNyw0NTYuMzUwMDEsOTYuMzJ6Ii8+CgkJPHBhdGggZmlsbD0iIzM2NUU3RiIgZD0iTTI4My41OTYwMSwyNTcuNDg4MDFjLTgxLjI5My0wLjUxOTAxLTE0OS4yLTI5Ljg1MS0xNjYuNzQ2OTktNjguNzczMDEKCQkJYy0zLjAwMiw1LjYyMTk5LTQuNjE0LDExLjQ5Mi00LjY1MiwxNy41MzZjLTAuMjcsNDIuMzE4MDEsNzYuMzkxLDc3LjExNjAxLDE3MS4yMjk5OCw3Ny43MjA5OQoJCQljOTQuODM3MDEsMC42MDU5OSwxNzEuOTM3MDEtMzMuMjA5LDE3Mi4yMDgwMS03NS41MjhjMC4wMzktNi4wNDQwMS0xLjQ5Nzk5LTExLjkzNDAxLTQuNDI4MDEtMTcuNTkzOTkKCQkJQzQzMy4xNjQsMjI5LjU0NSwzNjQuODg2OTksMjU4LjAwNjk5LDI4My41OTYwMSwyNTcuNDg4MDF6Ii8+CgkJPHBhdGggZmlsbD0iIzM2NUU3RiIgZD0iTTI4Mi44OTAwMSwzNjcuOTdjLTgyLjU1ODk5LTAuNTI3MDEtMTUxLjMwOTAxLTMwLjc3MzAxLTE2Ny41MjYtNzAuNjAwOTgKCQkJYy0yLjQ4Myw1LjEzOC0zLjgxNiwxMC40NzI5OS0zLjg1MSwxNS45NTJjLTAuMjcsNDIuMzE3OTksNzYuMzkxMDEsNzcuMTE2LDE3MS4yMyw3Ny43MjEwMQoJCQljOTQuODM3MDEsMC42MDU5OSwxNzEuOTM2OTgtMzMuMjA5MDEsMTcyLjIwNzk4LTc1LjUyNzk4YzAuMDM1LTUuNDc5LTEuMjMwMDEtMTAuODMwOTktMy42NDctMTYKCQkJQzQzNC41NzgsMzM5LjEzMywzNjUuNDQ4LDM2OC40OTc5OSwyODIuODkwMDEsMzY3Ljk3eiIvPgoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMDMuMzE5LDE4MS4wMTgwMWM0LjY5Njk5LDAuMDMsOS4yMzk5OSwwLjIxNCwxMy44Mzg5OSwwLjA0NQoJCQljLTgzLjk1My00LjE1Ny0xNDkuNjYxLTQyLjY5Mi0xNDkuMzgxLTg2LjU4NmMwLjI4LTQzLjg5Myw2Ni40NzMwMS04MS4yNTYsMTUwLjQ3MzAxLTg0LjM0CgkJCWMtNC41OTYwMS0wLjIyOS05LjI0Ni0wLjA1OS0xMy45NDE5OS0wLjA4OWMtMTAuNTY1LTAuMTMzLTIwLjk5MzAxLDAuMzM3LTMxLjE2NTk5LDEuMzQKCQkJYzYuNTQxOTktMC42ODQsMTMuMjIyOTktMS4xNjIsMjAuMDIzMDEtMS40MTFjLTQuNTk2MDEtMC4yMjktOS4yNDYtMC4wNTktMTMuOTQxOTktMC4wODkKCQkJYy04Ni41NDEtMS4wODYtMTY0LjEyMSwzNy45NTQtMTY0LjQxNzAxLDg0LjI1MWMtMC4yOTYsNDYuMjk4LDc2LjU0Mzk5LDg2LjE2NCwxNjMuNDI3OTksODYuNzE4OTkKCQkJYzQuNjk2OTksMC4wMyw5LjIzOTk5LDAuMjE0LDEzLjgzODk5LDAuMDQ1Ii8+CgkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTI4NC4wNzEwMSwxODMuMDY1OTljLTk0LjgzOC0wLjYwNi0xNzEuNDY4LTQwLjQyNS0xNzEuMTU4LTg4LjkzOWwtMC40NzksNzQuOTA2CgkJCWMtMC4zMSw0OC41MTQwMSw3Ni4zMiw4OC4zMzQwMSwxNzEuMTU3OTksODguOTRjOTQuODM3MDEsMC42MDU5OSwxNzEuOTctMzguMjMxOTksMTcyLjI3OTAyLTg2Ljc0NmwwLjQ3OC03NC45MDYKCQkJQzQ1Ni4wNDAwMSwxNDQuODM0LDM3OC45MDc5OSwxODMuNjcxMDEsMjg0LjA3MTAxLDE4My4wNjU5OXoiLz4KCQk8cGF0aCBmaWxsPSIjQzNENUVBIiBkPSJNMTkwLjk0NTAxLDI0My40NzlsMC40NzktNzQuOTA2MDFjLTQ3LjQxMS0xNS45Mjc5OS03OC43MDktNDMuNDA3LTc4LjUxMS03NC40NDdsLTAuNDc5LDc0LjkwNgoJCQlDMTEyLjIzNiwyMDAuMDcyMDEsMTQzLjUzNSwyMjcuNTUwOTksMTkwLjk0NTAxLDI0My40Nzl6Ii8+CgkJPHBhdGggZmlsbD0iI0MzRDVFQSIgZD0iTTIyNy43ODc5OSwyNTIuODYybDAuNDc5LTc0LjkwNjAxYy03Ljk5Mi0xLjQ1Nzk5LTE1LjcxMjAxLTMuMjA3LTIzLjExNy01LjIyMzAxbC0wLjQ3OSw3NC45MDU5OQoJCQlDMjEyLjA3NiwyNDkuNjU1LDIxOS43OTcsMjUxLjQwNDAxLDIyNy43ODc5OSwyNTIuODYyeiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0xOTAuNzY4MDEsMjcxLjI1NWM0LjQzOSwxLjMwNDk5LDkuMDIyLDIuNTE5OTksMTMuNzMsMy42NDAwMWwwLjE3NC0yNy4yNTYKCQkJYy00LjcwNy0xLjI4My05LjI4OS0yLjY2OTAxLTEzLjcyNzAxLTQuMTZMMTkwLjc2ODAxLDI3MS4yNTV6Ii8+CgkJPHBhdGggZmlsbD0ibm9uZSIgZD0iTTE5MC4wODQsMzc4LjMyNTk5YzQuNDM5LDEuMzAzOTksOS4wMjIsMi41MTcsMTMuNzMsMy42MzkwMWwwLjE2MS0yNS4yNDMwMQoJCQljLTQuNzA3LTEuMjgyMDEtOS4yODktMi42NjgtMTMuNzI3MDEtNC4xNkwxOTAuMDg0LDM3OC4zMjU5OXoiLz4KCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNNDU5LjA3NDAxLDE5MC45Njg5OWMzLjg2Mi03LjY0NSwzLjcxMzAxLTE5LjIyNzAxLDMuNzA0MDEtMTkuNjk5MDFsMC40NzgtNzQuODMyCgkJCWMwLjI1NS0yLjE0NiwyLjk4ODAxLTMyLjAwNS0zNy4yMTc5OS01OS42NTNDMzgyLjkxLDcuMTI4LDMyMy41MTE5OSwwLjMxNCwzMDQuMjkwOTksMC4xOTEKCQkJQzMwNC4yMzAwMSwwLjE4OSwyOTguODQsMC4wMDMsMjg1LjE5MTk5LDBjLTEzLjY0Ni0wLjE3MS0xOS4wMzIwMS0wLjA1NC0xOS4wNzE5OS0wLjA1MwoJCQljLTE5LjI0OC0wLjEyMy03OC43MjgsNS45MzItMTIyLjIzMSwzNS4wMzZjLTQwLjU1NiwyNy4xMzItMzguMjA1LDU3LjAyNC0zNy45NzcwMSw1OS4xNzNsLTAuNDc4LDc0LjgwMjAxCgkJCWMtMC4wMTUsMC41MDEwMS0wLjMxMywxMi4wODA5OSwzLjQ1MiwxOS43NzQ5OWMtNC4yMDEsOS4yNTEwMS0zLjcxMSwxNy4yMjUwMS0zLjY5LDE3LjQ3NGwtMC40NTksNzEuODYzMDEKCQkJYy0wLjA2OCwxMC42MjM5OSwyLjI1MSwxNi43OTMsMy4wNzMsMTguNjQwMDFjLTAuODU3LDEuODY0MDEtMy4yNDUsOC4yMDMtMy4zMjYsMjFsLTAuNDE2LDY1LjQ2MzAxCgkJCWMtMC4wNjEsMC45MzIwMS0xLjMwMywyMy4wNiwxNS44MjgsNDIuNTAyOTljMjcuOTE2LDMxLjY4MSw3Ni4wNTcwMSw1MC4zOTk5OSwxNDMuMTE2LDU1LjYzOAoJCQljMC4wOTY5OCwwLjAwNSw2LjUyODk5LDAuMjc2LDE0LjUxOTAxLDAuMzI3YzEuNDgwOTksMC4wMDksMy4wMjM5OSwwLjAwOCw0LjU4MzAxLTAuMDAxMDEKCQkJYzEuNTU3MDEsMC4wMywzLjEwMDAxLDAuMDQ5OTksNC41ODIsMC4wNmM3Ljk5NSwwLjA1MDk5LDE0LjQ0MTAxLTAuMTQwMDEsMTQuNTU4MDEtMC4xNDMwMQoJCQljNjcuMDktNC4zNzksMTE1LjQ2Ni0yMi40ODE5OSwxNDMuNzg0LTUzLjgwNDAyYzE3LjM3OS0xOS4yMjE5OCwxNi40MTkwMS00MS4zNjQ5OSwxNi4zNzIwMS00Mi4yMjI5OWwwLjQxOTAxLTY1LjUzNzAyCgkJCWMwLjA4Mi0xMi43OTgtMi4yMjUwMS0xOS4xNjYwMi0zLjA1ODAxLTIxLjA0MTAyYzAuODQ2MDEtMS44MzYsMy4yNDMwMS03Ljk3NTAxLDMuMzExLTE4LjU5OWwwLjQ1NDAxLTcxLjc2OQoJCQlDNDYyLjU2NCwyMDguMjQyLDQ2My4xNTYwMSwyMDAuMjcyOTksNDU5LjA3NDAxLDE5MC45Njg5OXogTTExMi45NDYsMzg1LjE5NjAxbDAuMzUxLTU0Ljk5NgoJCQljNi45MTMsMTQuOTcsMjMuMTQ5OTksMjguNjg5LDQ3LjQxMSwzOS43MDAwMWMzMi41Njk5OSwxNC43ODQsNzUuOTA0MDEsMjMuMDg3MDEsMTIyLjAyLDIzLjM4MTk5CgkJCWM0Ni4xMTQ5OSwwLjI5NTAxLDg5LjU1MDk5LTcuNDU0MDEsMTIyLjMwNzAxLTIxLjgyMTAxYzI0LjM5OTk5LTEwLjcwMDAxLDQwLjgxMS0yNC4yMTEsNDcuOTE1MDEtMzkuMDkyMDFsLTAuMzUxMDEsNTQuOTk1CgkJCWMtMC4zMDIsNDcuMjY3LTc2LjczMTAyLDg1LjIzNTAyLTE3MC4zNzI5OSw4NC42MzY5OUMxODguNTgyLDQ3MS40MDUsMTEyLjY0NCw0MzIuNDYzMDEsMTEyLjk0NiwzODUuMTk2MDF6IE0yODUuMTc4OTksOS42MjMKCQkJYzkzLjU4MiwwLjU5OCwxNjkuNDcyOTksMzkuNDg1LDE2OS4xNzIsODYuNjg1Yy0wLjMwMiw0Ny4yMDEtNzYuNjgzMDEsODUuMTE1MDEtMTcwLjI2NDk4LDg0LjUxNzk5CgkJCWMtOTMuNTgzMDEtMC41OTgwMS0xNjkuNDc0LTM5LjQ4NS0xNjkuMTczLTg2LjY4NkMxMTUuMjE0LDQ2LjkzOSwxOTEuNTk1LDkuMDI1LDI4NS4xNzg5OSw5LjYyM3ogTTE2MS45NjgsMTU4LjU5NQoJCQljMzIuNTgyLDE2LjkyOTk5LDc1Ljk0MDk5LDI2LjQxNjk5LDEyMi4wODksMjYuNzExYzQ2LjE0ODAxLDAuMjk1LDg5LjYyMzk5LTguNjM2OTksMTIyLjQxOTAxLTI1LjE0OTk5CgkJCWMyNC4zNjQ5OS0xMi4yNjgwMSw0MC43NTI5OS0yNy42OTgsNDcuODU5MDEtNDQuNjVsLTAuMzU1OTksNTUuNzA3MDFjLTAuMDMyOTksNS4xODMtMC45ODMsMTAuMjU1LTIuNzY5MDEsMTUuMTc1OTkKCQkJbC0wLjA5NS0wLjE4MjAxbC0xLjY4MjAxLDMuNjA4Yy04LjU3OTAxLDE4LjM5OTk5LTI5LjUyNzk4LDM1LjA3NDAxLTU4Ljk4ODk4LDQ2Ljk1MgoJCQljLTMwLjE3NDAxLDEyLjE2NC02OC4xMTYsMTguNzI4LTEwNi44MzQ5OSwxOC40OGMtMzguNzItMC4yNDY5OS03Ni41NzUtNy4yOTUtMTA2LjU5MS0xOS44NDM5OQoJCQljLTI5LjMwNzAxLTEyLjI1MzAxLTUwLjA0Mi0yOS4xOTMwMS01OC4zODQ5OS00Ny43MDFsLTEuNjM2LTMuNjI5bC0wLjA5NywwLjE4MWMtMS43MjMtNC45NDI5OS0yLjYwOC0xMC4wMjcwMS0yLjU3NS0xNS4yMTAwMQoJCQlsMC4zNTYtNTUuNzA3QzEyMS41NzIsMTMwLjM3ODAxLDEzNy43NjEsMTQ2LjAxNjAxLDE2MS45NjgsMTU4LjU5NXogTTQ1My42MzQsMjA4LjQzMjAxCgkJCWMtMC4xMjUsMTkuNDg4MDEtMTcuNjU3MDEsMzcuODc5LTQ5LjM2ODAxLDUxLjc4Njk5QzM3MS45NywyNzQuMzgzLDMyOS4wNiwyODIuMDIzMDEsMjgzLjQ0LDI4MS43MzE5OQoJCQljLTQ1LjYyMS0wLjI5MDk5LTg4LjQyOTk5LTguNDc5LTEyMC41NDE5OS0yMy4wNTQwMmMtMzEuNTMtMTQuMzEyLTQ4LjgyNi0zMi45MjU5OS00OC43MDItNTIuNDE0CgkJCWMwLjAyNy00LjI1MzAxLDAuOTEtOC41MDUsMi42MjEtMTIuNjg3YzcuOTA0LDE0LjkyLDIzLjEwODk5LDI4LjU4Niw0NC43MTcsMzkuODEzCgkJCWMzMi41NjcsMTYuOTI0LDc1LjkxMSwyNi40MDcwMSwxMjIuMDQzOTksMjYuNzAyczg5LjU5Mzk5LTguNjM0LDEyMi4zNzUtMjUuMTQKCQkJYzIxLjc0ODk5LTEwLjk1LDM3LjEyNzAxLTI0LjQyMTAxLDQ1LjIyMTAxLTM5LjIzNzk5QzQ1Mi44MzMwMSwxOTkuOTE0OTksNDUzLjY2MTAxLDIwNC4xNzksNDUzLjYzNCwyMDguNDMyMDF6CgkJCSBNMTYxLjM5MzAxLDI2Mi44MzA5OWMzMi41NzAwMSwxNC43ODI5OSw3NS45MDUsMjMuMDg4MDEsMTIyLjAxOTk5LDIzLjM4MTk5CgkJCWM0Ni4xMTQ5OSwwLjI5NTAxLDg5LjU1MDk5LTcuNDU1OTksMTIyLjMwNzAxLTIxLjgyMTAxYzI0LjM5OTk5LTEwLjcwMSw0MC44MTEtMjQuMjExLDQ3LjkxNTAxLTM5LjA5MWwtMC4zNTEwMSw1NC45OTUKCQkJYy0wLjMwMiw0Ny4yNjkwMS03Ni43MzEwMiw4NS4yMzctMTcwLjM3Mjk5LDg0LjYzOTAxYy05My42NDMwMS0wLjU5Nzk5LTE2OS41ODA5OS0zOS41NDAwMS0xNjkuMjc5MDEtODYuODA4OTlsMC4zNTEtNTQuOTk1CgkJCUMxMjAuODk1LDIzOC4xMDEsMTM3LjEzMSwyNTEuODE5LDE2MS4zOTMwMSwyNjIuODMwOTl6IE00NTIuOTUwMDEsMzE1LjUwMjAxYy0wLjEyNSwxOS40ODctMTcuNjU3MDEsMzcuODc5LTQ5LjM2ODAxLDUxLjc4NjAxCgkJCWMtMzIuMjk1MDEsMTQuMTY0LTc1LjIwNTk5LDIxLjgwNDk5LTEyMC44MjU5OSwyMS41MTNjLTQ1LjYyMS0wLjI5MDk5LTg4LjQyOTk5LTguNDgwMDEtMTIwLjU0MTk5LTIzLjA1NDk5CgkJCWMtMzEuNTMtMTQuMzExLTQ4LjgyNi0zMi45MjU5OS00OC43MDItNTIuNDEyOTljMC4wMjMtMy42MzE5OSwwLjY3Mi03LjI3MzAxLDEuOTMxLTEwLjg2ODAxCgkJCWM5LjI2MSwxOC4zMzA5OSwyOS42NzcsMzQuOTA3OTksNTguMDkxLDQ3LjAzNWMzMC42OTI5OSwxMy4xMDAwMSw2OS41MjQ5OSwyMC40NTU5OSwxMDkuMzQxLDIwLjcwOTk5CgkJCXM3OC43Mzg5OC02LjYwNTAxLDEwOS41OTYwMS0xOS4zMTIwMWMyOC41NjY5OS0xMS43NjMsNDkuMTkyOTktMjguMDc3LDU4LjY4NzAxLTQ2LjI4OQoJCQlDNDUyLjM3MjAxLDMwOC4yMjEwMSw0NTIuOTcyOTksMzExLjg3LDQ1Mi45NTAwMSwzMTUuNTAyMDF6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"switch-module\",\n \"name\": \"switch-module\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI3MDEuNDAwMDJweCIgaGVpZ2h0PSI0NzdweCIgdmlld0JveD0iMCAwIDcwMS40MDAwMiA0NzciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcwMS40MDAwMiA0NzciIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik0xMDQzLjgwMDA1LDI0Ny4zOTk5OWMwLjA5OTk4LDAuODk5OTksMC4wOTk5OCwxLjgsMC4wOTk5OCwyLjd2LTIuN0gxMDQzLjgwMDA1eiIvPgoJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTEwNDUuODAwMDUsMjUwLjEwMDAxSDEwNDJjMC0wLjgsMC0xLjYwMDAxLTAuMDk5OTgtMi41bC0wLjE5OTk1LTIuMTAwMDFoNC4wOTk5OFYyNTAuMTAwMDEKCQlMMTA0NS44MDAwNSwyNTAuMTAwMDF6Ii8+CjwvZz4KPGc+Cgk8cGF0aCBmaWxsPSIjNjg4NUE5IiBkPSJNMTA0My44MDAwNSwxNTEuOGMwLjA5OTk4LDAuODk5OTksMC4wOTk5OCwxLjgsMC4wOTk5OCwyLjd2LTIuN0gxMDQzLjgwMDA1eiIvPgoJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTEwNDUuODAwMDUsMTU0LjVIMTA0MmMwLTAuOCwwLTEuNjAwMDEtMC4wOTk5OC0yLjVsLTAuMTk5OTUtMi4xMDAwMWg0LjA5OTk4VjE1NC41TDEwNDUuODAwMDUsMTU0LjV6Ii8+CjwvZz4KPHBhdGggZmlsbD0iI0IyQ0JFRCIgc3Ryb2tlPSIjMjMxRjIwIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEwNDMuODAwMDUsMjQ3LjM5OTk5CgljMC4wOTk5OCwwLjg5OTk5LDAuMDk5OTgsMS44LDAuMDk5OTgsMi43di0yLjdIMTA0My44MDAwNXoiLz4KPHBhdGggZmlsbD0iI0IyQ0JFRCIgc3Ryb2tlPSIjMjMxRjIwIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEwNDMuODAwMDUsMTUxLjgKCWMwLjA5OTk4LDAuODk5OTksMC4wOTk5OCwxLjgsMC4wOTk5OCwyLjd2LTIuN0gxMDQzLjgwMDA1eiIvPgo8Zz4KCTxwb2x5Z29uIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzAwMDAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIHBvaW50cz0iNDc4Ljg5OTk5LDQxNC4yOTk5OSAzNzAuNjAwMDEsNDQyLjEwMDAxIDI5Ny4yMDAwMSw1Mi4yIAoJCTcwMS40MDAwMiwyOTUuMjAwMDEgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0NDRDhFRSIgcG9pbnRzPSI5Mi40LDM5MS4yOTk5OSA5MS40LDM5MS4yOTk5OSA5MS40LDM5MS44OTk5OSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjQ0NEOEVFIiBwb2ludHM9IjkyLjQsMjczLjM5OTk5IDkxLjQsMjczLjM5OTk5IDkxLjQsMjc0IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNDREQ5RUUiIHBvaW50cz0iMzcwLjYwMDAxLDMyNSA5NC4xLDE1NC41IDI5Ny4yMDAwMSw0My40IDU3NC41LDIxMy43IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNDQ0Q4RUUiIHBvaW50cz0iOTIuNCwxNTUuNSA5MS40LDE1NS41IDkxLjQsMTU2LjEwMDAxIAkiLz4KCTxwb2x5Z29uIGZpbGw9IiNCNUM1REMiIHBvaW50cz0iOTEuNCwyNTYuMTAwMDEgMzcwLjYwMDAxLDQyOC4yMDAwMSAzNzAuNjAwMDEsNDI4LjIwMDAxIDM3MC42MDAwMSwzMjguMjAwMDEgOTEuNCwxNTYuMTAwMDEgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIzODksMzEzLjg5OTk5IDE1Mi4zLDE2NS44OTk5OSAzMzYsNjYuNyAyOTcuMjAwMDEsNDMuNCA5NC4xLDE1NC41IDM3MC42MDAwMSwzMjUgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzY4ODVBOSIgcG9pbnRzPSI1NzcuMjAwMDEsMzE1LjI5OTk5IDM3MC42MDAwMSw0MjguMjAwMDEgMzcwLjYwMDAxLDQyOC4yMDAwMSAzNzAuNjAwMDEsMzI4LjIwMDAxIAoJCTU3Ny4yMDAwMSwyMTUuMzk5OTkgCSIvPgoJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTU4OC4yMDAwMSwyMDlsLTI5MS0xNzguNUw4MS43LDE0OC44OTk5OWwtMS4zLDAuOFYyNjF2MC44OTk5OWwyOTAuMjk5OTksMTc4LjY5OTk4bDIxNy42MDAwMS0xMTkuNQoJCUw1ODguMjAwMDEsMjA5eiBNMjk3LjIwMDAxLDQzLjRMNTc0LjUsMjEzLjcwMDAxTDM3MC42MDAwMSwzMjVMOTQuMSwxNTQuNUwyOTcuMjAwMDEsNDMuNHogTTU3NC41LDIyMC4zdjkzLjQwMDAxCgkJTDM3My4zOTk5OSw0MjMuMjk5OTl2LTkzLjVMNTc0LjUsMjIwLjN6IE0zNjcuODk5OTksMzI5Ljc5OTk5djkzLjVMOTQuMiwyNTQuNVYxNjFMMzY3Ljg5OTk5LDMyOS43OTk5OXoiLz4KCTxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iMTgyLjcsMjkyLjg5OTk5IDE1OSwyNzguMTAwMDEgMTU5LDI1NS4xMDAwMSAxODIuNywyNjkuODk5OTkgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIxNDQuOCwyNjkuNjAwMDEgMTIxLjEsMjU0LjggMTIxLjEsMjMxLjg5OTk5IDE0NC44LDI0Ni43IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iMjU4LjM5OTk5LDM0MC44OTk5OSAyMzQuNjAwMDEsMzI2LjEwMDAxIDIzNC42MDAwMSwzMDMuMjAwMDEgMjU4LjM5OTk5LDMxOCAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjIyMC41LDMxNy43MDAwMSAxOTYuOCwzMDIuODk5OTkgMTk2LjgsMjc5Ljg5OTk5IDIyMC41LDI5NC43MDAwMSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjMzNS4yOTk5OSwzODguMjAwMDEgMzExLjYwMDAxLDM3My4zOTk5OSAzMTEuNjAwMDEsMzUwLjUgMzM1LjI5OTk5LDM2NS4yOTk5OSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjI5Ny4zOTk5OSwzNjUgMjczLjcwMDAxLDM1MC4yMDAwMSAyNzMuNzAwMDEsMzI3LjIwMDAxIDI5Ny4zOTk5OSwzNDIgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIxODIuMzk5OTksMjU5LjYwMDAxIDE1OC43LDI0NC44IDE1OC43LDIyMS44OTk5OSAxODIuMzk5OTksMjM2LjcgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIxNDQuNjAwMDEsMjM2LjM5OTk5IDEyMC45LDIyMS42MDAwMSAxMjAuOSwxOTguNjAwMDEgMTQ0LjYwMDAxLDIxMy4zOTk5OSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjI1OC4xMDAwMSwzMDcuNzAwMDEgMjM0LjM5OTk5LDI5Mi44OTk5OSAyMzQuMzk5OTksMjcwIDI1OC4xMDAwMSwyODQuNzk5OTkgCSIvPgoJPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIyMjAuMywyODQuMzk5OTkgMTk2LjUsMjY5LjYwMDAxIDE5Ni41LDI0Ni43IDIyMC4zLDI2MS41IAkiLz4KCTxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iMzM1LDM1NSAzMTEuMjk5OTksMzQwLjIwMDAxIDMxMS4yOTk5OSwzMTcuMjk5OTkgMzM1LDMzMi4xMDAwMSAJIi8+Cgk8cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjI5Ny4yMDAwMSwzMzEuNzAwMDEgMjczLjUsMzE2Ljg5OTk5IDI3My41LDI5NCAyOTcuMjAwMDEsMzA4Ljc5OTk5IAkiLz4KPC9nPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"tower\",\n \"name\": \"tower\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyNjAuMzk5OTlweCIgaGVpZ2h0PSI1MTcuNzAwMDFweCIgdmlld0JveD0iMCAwIDI2MC4zOTk5OSA1MTcuNzAwMDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI2MC4zOTk5OSA1MTcuNzAwMDEiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8xXzFfIiBkaXNwbGF5PSJub25lIj4KCTxwb2x5Z29uIGRpc3BsYXk9ImlubGluZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQTdBOUFDIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIzNDUuNjAwMDEsMzc1LjM5OTk5IAoJCTEzMC4yLDQ5OS43OTk5OSAtODUuMiwzNzUuMzk5OTkgLTg1LjIsMTI2LjcgMTMwLjIsMi4zIDM0NS42MDAwMSwxMjYuNyAJIi8+CjwvZz4KPGcgaWQ9IkxheWVyXzJfMV8iPgoJPHBhdGggZmlsbD0iIzVBNUI1QiIgZD0iTTIxNy4xMDAwMSw0NDQuMTAwMDFsLTkuMzk5OTktNTEuNWwtOS00OS4zOTk5OWwwLDBsMCwwbDAsMGwtMjIuNS0xMjMuN2wwLDBsLTcuNS00MS4ybDAsMAoJCWwtNS4zOTk5OS0yOS42MDAwMWwtMC43LTFjLTAuMi0wLjUtMC41LTEtMS0xLjM5OTk5bC0wLjEwMDAxLTAuMTAwMDFsLTE2LjItOS4zbDAuNy0wLjM5OTk5bC0xNS43LTkuMWwtMTUuNyw5LjFsMC43LDAuMzk5OTkKCQlsLTE1LjcsOS4xMDAwMUw5OSwxNDZsMCwwbDAsMGMtMC45LDAuNjAwMDEtMS41LDEuNS0xLjcsMi41bDAsMGwtMTIuOSw3MC44OTk5OWwwLDBMNjEuNywzNDMuMjAwMDFsMCwwbDAsMGwwLDBsLTksNDkuMzk5OTkKCQlsLTkuNCw1MS41Yy0wLjQsMiwxLDMuODk5OTksMyw0LjI5OTk5YzAuMiwwLDAuNCwwLjEwMDAxLDAuNywwLjEwMDAxYzEuNywwLDMuMy0xLjIwMDAxLDMuNi0zbDguNS00Ni4zOTk5OWw2Ny41LDM5djU0Ljc5OTk5CgkJYzAsMiwxLjcsMy43MDAwMSwzLjcsMy43MDAwMXMzLjctMS43MDAwMSwzLjctMy43MDAwMVY0MzhsNjcuNS0zOWw4LjUsNDYuMzk5OTljMC4zLDEuNzk5OTksMS44OTk5OSwzLDMuNjAwMDEsMwoJCWMwLjIsMCwwLjM5OTk5LDAsMC43LTAuMTAwMDFDMjE2LjEwMDAxLDQ0OCwyMTcuNSw0NDYuMTAwMDEsMjE3LjEwMDAxLDQ0NC4xMDAwMXogTTEyNi41LDI3Ni44OTk5OUw5OC41LDIzMC41bDI4LDE2LjJWMjc2Ljg5OTk5egoJCSBNMTMzLjg5OTk5LDI0Ni43bDI4LTE2LjJsLTI4LDQ2LjM5OTk5VjI0Ni43eiBNOTIsMjE4LjJsNS4xLTI4LjJsMjMuOCw0NC44OTk5OUw5MiwyMTguMnogTTExOS42LDI3OS43MDAwMWwtMzUuMS0yMC4yOTk5OQoJCWw1LjMtMjkuMTAwMDFMMTE5LjYsMjc5LjcwMDAxeiBNMTcwLjYwMDAxLDIzMC4zOTk5OWw1LjMsMjkuMTAwMDFsLTM1LjA5OTk5LDIwLjI5OTk5TDE3MC42MDAwMSwyMzAuMzk5OTl6IE0xMzkuNSwyMzQuODk5OTkKCQlMMTYzLjMsMTkwbDUuMTAwMDEsMjguMkwxMzkuNSwyMzQuODk5OTl6IE0xMzMuODk5OTksMjI5Ljd2LTI4LjYwMDAxbDIxLjgtMTIuNjAwMDFMMTMzLjg5OTk5LDIyOS43eiBNMTI2LjUsMjI5LjdsLTIxLjgtNDEuMgoJCWwyMS44LDEyLjYwMDAxVjIyOS43eiBNMTI2LjUsMjkyLjIwMDAxVjMyMy41bC0zNC4yLTUxLjEwMDAxTDEyNi41LDI5Mi4yMDAwMXogTTEzMy44OTk5OSwyOTIuMjAwMDFsMzQuMi0xOS43OTk5OWwtMzQuMiw1MS4xMDAwMQoJCVYyOTIuMjAwMDF6IE0xNjAuODk5OTksMTc3bC0yMC42MDAwMSwxMS44OTk5OWwxNy4zLTI5Ljg5OTk5TDE2MC44OTk5OSwxNzd6IE05OS41LDE3N2wzLjItMTcuM2wxNy4yLDI5LjEwMDAxTDk5LjUsMTc3egoJCSBNMTE4LjMsMzI0LjVMNzcsMzAwLjcwMDAxTDgyLjQsMjcxTDExOC4zLDMyNC41eiBNMTc4LDI3MWw1LjM5OTk5LDI5LjcwMDAxbC00MS4zLDIzLjg5OTk5TDE3OCwyNzF6IE0xMzMuODk5OTksMTg1LjJ2LTE4LjYwMDAxCgkJbDE2LjItOS4zTDEzMy44OTk5OSwxODUuMnogTTEyNi41LDE4NS4zOTk5OWwtMTctMjguN2wxNyw5LjhWMTg1LjM5OTk5eiBNMTI2LjUsMzM3Ljc5OTk5djMyLjEwMDAxTDg2LjEsMzE0LjVMMTI2LjUsMzM3Ljc5OTk5egoJCSBNMTMzLjg5OTk5LDMzNy43OTk5OUwxNzQuMjk5OTksMzE0LjVsLTQwLjM5OTk5LDU1LjM5OTk5VjMzNy43OTk5OXogTTEzMy44OTk5OSwxNjAuNXYtMTcuMmw0LTIuM2wxNC44OTk5OSw4LjYwMDAxCgkJTDEzMy44OTk5OSwxNjAuNXogTTEyMi42LDE0MWw0LDIuM3YxNy4ybC0xOC45LTEwLjg5OTk5TDEyMi42LDE0MXogTTc1LDMxMS43MDAwMWw0Miw1Ny42MDAwMWwtNDcuNS0yNy4zOTk5OUw3NSwzMTEuNzAwMDF6CgkJIE0xODUuNSwzMTEuNzAwMDFsNS41LDMwLjIwMDAxbC00Ny41LDI3LjM5OTk5TDE4NS41LDMxMS43MDAwMXogTTEyNi41LDM4My4zOTk5OXY0MC44OTk5OUw3OCwzNTUuMzk5OTlMMTI2LjUsMzgzLjM5OTk5egoJCSBNMTMzLjg5OTk5LDM4My4zOTk5OWw0OC41LTI4bC00OC41LDY4Ljg5OTk5VjM4My4zOTk5OXogTTY3LjQsMzUzLjIwMDAxbDUwLjEsNzEuMjAwMDFsLTU3LjEtMzNMNjcuNCwzNTMuMjAwMDF6CgkJIE0xNDIuODk5OTksNDI0LjI5OTk5TDE5MywzNTMuMDk5OThsNywzOC4yMDAwMUwxNDIuODk5OTksNDI0LjI5OTk5eiIvPgoJPHBhdGggZmlsbD0iIzgwODI4NSIgZD0iTTEzMCwxMjcuNGwtMTUuNSw4LjlsMC43LDAuMzk5OTlMOTkuNSwxNDUuOEw5OSwxNDZsMCwwbDAsMGMtMC45LDAuNjAwMDEtMS41LDEuNS0xLjcsMi41bDAsMAoJCWwtMTIuOSw3MC44OTk5OWwwLDBMNjEuNywzNDMuMjAwMDFsMCwwbDAsMGwwLDBsLTksNDkuMzk5OTlsLTkuNCw1MS41Yy0wLjQsMiwxLDMuODk5OTksMyw0LjI5OTk5YzAuMiwwLDAuNCwwLjEwMDAxLDAuNywwLjEwMDAxCgkJYzEuNywwLDMuMy0xLjIwMDAxLDMuNi0zbDguNS00Ni4zOTk5OWw2Ny41LDM5djU0Ljc5OTk5YzAsMiwxLjUsMy41LDMuMzk5OTksMy43MDAwMVYxMjcuNEwxMzAsMTI3LjR6IE0xMDIuNywxNTkuNjAwMDEKCQlsMTcuMiwyOS4xMDAwMUw5OS41LDE3N0wxMDIuNywxNTkuNjAwMDF6IE05Ny4yLDE5MGwyMy44LDQ0Ljg5OTk5bC0yOS0xNi43TDk3LjIsMTkweiBNODkuOCwyMzAuMzk5OTlsMjkuOCw0OS4zOTk5OQoJCWwtMzUuMS0yMC4yOTk5OUw4OS44LDIzMC4zOTk5OXogTTgyLjQsMjcxbDM1LjksNTMuNjAwMDFMNzcsMzAwLjcwMDAxTDgyLjQsMjcxeiBNNzUsMzExLjcwMDAxbDQyLDU3LjYwMDAxbC00Ny41LTI3LjM5OTk5CgkJTDc1LDMxMS43MDAwMXogTTYwLjUsMzkxLjM5OTk5bDctMzguMjAwMDFsNTAuMSw3MS4xOTk5OEw2MC41LDM5MS4zOTk5OXogTTEyNi41LDQyNC4yOTk5OUw3OCwzNTUuMzk5OTlsNDguNSwyOFY0MjQuMjk5OTl6CgkJIE0xMjYuNSwzNjkuODk5OTlMODYuMSwzMTQuNWw0MC40LDIzLjI5OTk5VjM2OS44OTk5OXogTTEyNi41LDMyMy41bC0zNC4yLTUxLjEwMDAxbDM0LjIsMTkuNzk5OTlWMzIzLjV6IE0xMjYuNSwyNzYuODk5OTkKCQlMOTguNSwyMzAuNWwyOCwxNi4yVjI3Ni44OTk5OXogTTEyNi41LDIyOS43bC0yMS44LTQxLjJsMjEuOCwxMi42MDAwMVYyMjkuN3ogTTEyNi41LDE4NS4zOTk5OWwtMTctMjguN2wxNyw5LjhWMTg1LjM5OTk5egoJCSBNMTI2LjUsMTYwLjVsLTE4LjktMTAuODk5OTlMMTIyLjUsMTQxbDQsMi4zVjE2MC41TDEyNi41LDE2MC41eiIvPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iIzgwODI4NSIgcG9pbnRzPSIxMzAuMiwxNDUuMyAxMDcuMywxMzIgMTIzLjIsMTAgMTMwLjIsMTQgCQkiLz4KCTwvZz4KCTxnPgoJCTxwb2x5Z29uIGZpbGw9IiM1QTVCNUIiIHBvaW50cz0iMTMwLjIsMTQ1LjMgMTUzLjIsMTMyIDEzNy4yLDEwIDEzMC4yLDE0IAkJIi8+Cgk8L2c+Cgk8Zz4KCQk8cG9seWdvbiBmaWxsPSIjQkNCRUMwIiBwb2ludHM9IjEzMC4yLDUuOSAxMjMuMiwxMCAxMzAuMiwxNCAxMzcuMiwxMCAJCSIvPgoJPC9nPgo8L2c+CjxwYXRoIG9wYWNpdHk9IjAuMjUiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBkPSJNMjAzLjMsNDQ3LjI5OTk5YzUuMzk5OTksMTIuNzk5OTktMTguNSwzMC4yMDAwMS01OC41OTk5OSwzMgoJUzYzLjQsNDY2LjYwMDAxLDU4LDQ1My43MDAwMXMxOS44LTMwLjUsNTkuOS0zMi4yMDAwMVMxOTcuODk5OTksNDM0LjUsMjAzLjMsNDQ3LjI5OTk5eiIvPgo8L3N2Zz4K\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"truck-2\",\n \"name\": \"truck-2\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQzLjU1IDIxOC4xNCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwcGF0aCI+PHBhdGggZD0iTTM4Ljc1LDEzNC41NGMuMDItNS4zNiwxLjkxLTkuMTMsNC45Ni0xMC45IiBmaWxsPSJub25lIi8+PC9jbGlwUGF0aD48L2RlZnM+PGcgaWQ9IkJvZHkiPjxnIGlkPSJSZWFyV2hlZWwiPjxwYXRoIGlkPSJTaGFkb3ciIGQ9Ik0yLjU3LDEyMS42N2w3NC4yNC00MS44MWMxLjU5LS45MiwzLjU1LS45Myw1LjE0LS4wMmwxNTQuMTUsODcuODljMy40NSwxLjk3LDMuNDgsNi45MiwuMDUsOC45M2wtNjcuOTYsMzguODNjLTUuOTgsMy41LTEzLjM3LDMuNTQtMTkuMzgsLjExTDIuNiwxMzAuNmMtMy40NS0xLjk3LTMuNDctNi45NC0uMDQtOC45NFoiIGZpbGw9IiMwMTAxMDEiIGlzb2xhdGlvbj0iaXNvbGF0ZSIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJNMTc2LjE1LDE5Ni41Yy4wMy05LjA3LTYuMzUtMjAuMTItMTQuMjUtMjQuNjgtMy44LTIuMTktNy4yNS0yLjQ3LTkuODItMS4xN2gwbC0uMiwuMXMtLjEsLjA1LS4xNSwuMDhsLTEzLjU2LDcuMzV2LjAyYy0yLjk4LDEuMjktNC44OSw0LjYtNC45LDkuNTItLjAzLDkuMDcsNi4zNSwyMC4xMiwxNC4yNSwyNC42OCwzLjk4LDIuMyw3LjU4LDIuNSwxMC4xOCwuOTlsMTMuMDktNy4xN2MuNzMtLjI1LDEuNC0uNjIsMi4wMS0xLjFoLjAyYzIuMDctMS42NywzLjMzLTQuNjEsMy4zNC04LjYxWiIgZmlsbD0iIzJiMmIyYiIvPjxlbGxpcHNlIGN4PSIxNDcuNiIgY3k9IjE5Ni4yNSIgcng9IjYuNDgiIHJ5PSIxMS4xOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc4LjYyIDEwMC43NCkgcm90YXRlKC0zMC4xNikiIGZpbGw9IiNlZmVmZWYiLz48L2c+PGcgaWQ9IlJlYXJXaGVlbC0yIj48cGF0aCBkPSJNMjMzLjk4LDE2OC40OGMuMDMtOS4wNy02LjM1LTIwLjEyLTE0LjI1LTI0LjY4LTMuOC0yLjE5LTcuMjUtMi40Ny05LjgyLTEuMTdoMGwtLjIsLjFzLS4xLC4wNS0uMTUsLjA4bC0xMy41Niw3LjM1di4wMmMtMi45OCwxLjI5LTQuODksNC42LTQuOSw5LjUyLS4wMyw5LjA3LDYuMzUsMjAuMTIsMTQuMjUsMjQuNjgsMy45OCwyLjMsNy41OCwyLjUsMTAuMTgsLjk5bDEzLjA5LTcuMTdjLjczLS4yNSwxLjQtLjYyLDIuMDEtMS4xaC4wMmMyLjA3LTEuNjcsMy4zMy00LjYxLDMuMzQtOC42MVoiIGZpbGw9IiMyYjJiMmIiLz48ZWxsaXBzZSBjeD0iMjA1LjQ0IiBjeT0iMTY4LjIzIiByeD0iNi40OCIgcnk9IjExLjE5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTYuNzEgMTI2KSByb3RhdGUoLTMwLjE2KSIgZmlsbD0iI2VmZWZlZiIvPjwvZz48ZyBpZD0iVW5kZXJDYXJyaWFnZSI+PGcgaXNvbGF0aW9uPSJpc29sYXRlIj48cG9seWdvbiBwb2ludHM9IjIzMi45OCAxNDQuNzggMTYzLjY5IDE4NS41MSAzNS4xNiAxMTEuMyAxMDQuNDUgNzAuNTggMjMyLjk4IDE0NC43OCIgZmlsbD0iIzk5OSIvPjxnPjxwYXRoIGQ9Ik0xNjMuNjUsMjAyLjgxYy0uMTcsMC0uMzQtLjA0LS41LS4xMy0uMzEtLjE4LS41LS41MS0uNS0uODdsLjA1LTE2LjNjMC0uMzUsLjE5LS42OCwuNDktLjg2bDY5LjI5LTQwLjcyYy4xNi0uMDksLjMzLS4xNCwuNTEtLjE0cy4zNCwuMDQsLjUsLjEzYy4zMSwuMTgsLjUsLjUxLC41LC44N2wtLjA1LDE2LjNjMCwuMzUtLjE5LC42OC0uNDksLjg2bC02OS4yOSw0MC43MmMtLjE2LC4wOS0uMzMsLjE0LS41MSwuMTRaIiBmaWxsPSIjNzI3MzcyIi8+PHBhdGggZD0iTTIzMi45OCwxNDQuNzhsLS4wNSwxNi4zLTY5LjI5LDQwLjcyLC4wNS0xNi4zLDY5LjI5LTQwLjcybTAtMmMtLjM1LDAtLjcsLjA5LTEuMDEsLjI4bC02OS4yOSw0MC43MmMtLjYxLC4zNi0uOTgsMS4wMS0uOTksMS43MmwtLjA1LDE2LjNjMCwuNzIsLjM4LDEuMzgsMSwxLjc0LC4zMSwuMTgsLjY1LC4yNywxLC4yN3MuNy0uMDksMS4wMS0uMjhsNjkuMjktNDAuNzJjLjYxLS4zNiwuOTgtMS4wMSwuOTktMS43MmwuMDUtMTYuM2MwLS43Mi0uMzgtMS4zOC0xLTEuNzQtLjMxLS4xOC0uNjUtLjI3LTEtLjI3aDBabTAsNGgwWiIgZmlsbD0iIzFkMWQxYiIvPjwvZz48Zz48cGF0aCBkPSJNMTYzLjY1LDIwMi44MWMtLjE3LDAtLjM1LS4wNC0uNS0uMTNMMzQuNjIsMTI4LjQ3Yy0uMzEtLjE4LS41LS41MS0uNS0uODdsLjA1LTE2LjNjMC0uMzYsLjE5LS42OSwuNS0uODYsLjE1LS4wOSwuMzMtLjEzLC41LS4xM3MuMzUsLjA0LC41LC4xM2wxMjguNTMsNzQuMjFjLjMxLC4xOCwuNSwuNTEsLjUsLjg3bC0uMDUsMTYuM2MwLC4zNi0uMTksLjY5LS41LC44Ni0uMTUsLjA5LS4zMywuMTMtLjUsLjEzWiIgZmlsbD0iIzcyNzM3MiIvPjxwYXRoIGQ9Ik0zNS4xNiwxMTEuM2wxMjguNTMsNzQuMjEtLjA1LDE2LjNMMzUuMTIsMTI3LjZsLjA1LTE2LjNtMC0yYy0uMzQsMC0uNjksLjA5LTEsLjI3LS42MiwuMzYtMSwxLjAxLTEsMS43M2wtLjA1LDE2LjNjMCwuNzIsLjM4LDEuMzgsMSwxLjc0bDEyOC41Myw3NC4yMWMuMzEsLjE4LC42NSwuMjcsMSwuMjdzLjY5LS4wOSwxLS4yN2MuNjItLjM2LDEtMS4wMSwxLTEuNzNsLjA1LTE2LjNjMC0uNzItLjM4LTEuMzgtMS0xLjc0TDM2LjE2LDEwOS41N2MtLjMxLS4xOC0uNjUtLjI3LTEtLjI3aDBaIiBmaWxsPSIjMWQxZDFiIi8+PC9nPjwvZz48L2c+PGcgaXNvbGF0aW9uPSJpc29sYXRlIj48ZyBpc29sYXRpb249Imlzb2xhdGUiPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwcGF0aCkiPjxnIGlzb2xhdGlvbj0iaXNvbGF0ZSI+PHBhdGggZD0iTTQwLjc3LDEyNi41MmMuNzktMS4yMywxLjc4LTIuMiwyLjk0LTIuODgiIGZpbGw9IiM1ZjYwNjAiLz48cGF0aCBkPSJNMTAzLjg2LDg4LjY5Yy0xLjE2LC42OC0yLjE2LDEuNjQtMi45NCwyLjg4IiBmaWxsPSIjNWY2MDYwIi8+PHBhdGggZD0iTTQwLjEzLDEyNy42OGMuMTktLjQxLC40MS0uOCwuNjQtMS4xNiIgZmlsbD0iIzYwNjI2MSIvPjxwYXRoIGQ9Ik0xMDAuOTIsOTEuNTZjLS4yMywuMzYtLjQ1LC43NS0uNjQsMS4xNiIgZmlsbD0iIzYwNjI2MSIvPjxwYXRoIGQ9Ik0zOS43MiwxMjguNjVjLjEyLS4zMywuMjYtLjY2LC40MS0uOTciIGZpbGw9IiM2MjYzNjMiLz48cGF0aCBkPSJNMTAwLjI3LDkyLjczYy0uMTUsLjMxLS4yOCwuNjMtLjQxLC45NyIgZmlsbD0iIzYyNjM2MyIvPjxwYXRoIGQ9Ik0zOS40MiwxMjkuNTRjLjA5LS4zMSwuMTktLjYxLC4zLS44OSIgZmlsbD0iIzY0NjU2NCIvPjxwYXRoIGQ9Ik05OS44Nyw5My42OWMtLjExLC4yOS0uMjEsLjU5LS4zLC44OSIgZmlsbD0iIzY0NjU2NCIvPjxwYXRoIGQ9Ik0zOS4yLDEzMC40MWMuMDctLjMsLjE0LS41OSwuMjMtLjg3IiBmaWxsPSIjNjU2NjY2Ii8+PHBhdGggZD0iTTk5LjU3LDk0LjU5Yy0uMDgsLjI4LS4xNiwuNTctLjIzLC44NyIgZmlsbD0iIzY1NjY2NiIvPjxwYXRoIGQ9Ik0zOS4wMywxMzEuMjRjLjA1LS4yOCwuMS0uNTYsLjE3LS44MyIgZmlsbD0iIzY3Njg2OCIvPjxwYXRoIGQ9Ik05OS4zNCw5NS40NmMtLjA2LC4yNy0uMTIsLjU1LS4xNywuODMiIGZpbGw9IiM2NzY4NjgiLz48cGF0aCBkPSJNMzguOTEsMTMyLjA1Yy4wMy0uMjgsLjA4LS41NSwuMTItLjgxIiBmaWxsPSIjNjg2OTY5Ii8+PHBhdGggZD0iTTk5LjE4LDk2LjI5Yy0uMDUsLjI3LS4wOSwuNTQtLjEyLC44MSIgZmlsbD0iIzY4Njk2OSIvPjxwYXRoIGQ9Ik0zOC44MiwxMzIuODdjLjAyLS4yOCwuMDUtLjU1LC4wOC0uODIiIGZpbGw9IiM2YTZiNmIiLz48cGF0aCBkPSJNOTkuMDYsOTcuMWMtLjAzLC4yNy0uMDYsLjU0LS4wOCwuODIiIGZpbGw9IiM2YTZiNmIiLz48cGF0aCBkPSJNMzguNzcsMTMzLjY3Yy4wMS0uMjcsLjAzLS41NCwuMDUtLjgiIGZpbGw9IiM2YjZjNmMiLz48cGF0aCBkPSJNOTguOTcsOTcuOTJjLS4wMiwuMjYtLjA0LC41My0uMDUsLjgiIGZpbGw9IiM2YjZjNmMiLz48cGF0aCBkPSJNMzguNzUsMTM0LjVjMC0uMjgsMC0uNTUsLjAyLS44MiIgZmlsbD0iIzZkNmU2ZSIvPjxwYXRoIGQ9Ik05OC45Miw5OC43MmMtLjAxLC4yNy0uMDIsLjU0LS4wMiwuODIiIGZpbGw9IiM2ZDZlNmUiLz48cGF0aCBkPSJNMzguNzUsMTM0LjU0di0uMDUiIGZpbGw9IiM2ZTZmNmYiLz48cGF0aCBkPSJNOTguOSw5OS41NHYuMDUiIGZpbGw9IiM2ZTZmNmYiLz48L2c+PC9nPjwvZz48ZyBpZD0iRnJvbnRXaGVlbCI+PGc+PHBhdGggZD0iTTU5LjU3LDE2MC4wNWMtMi4xOCwwLTQuNS0uNy02LjkxLTIuMDktOC4xNi00LjcxLTE0Ljc4LTE2LjE3LTE0Ljc1LTI1LjU1LC4wMS01LjA0LDEuOTUtOC43OSw1LjMzLTEwLjM1LC4wMy0uMDIsLjA2LS4wNCwuMS0uMDZsMTMuOTEtNy41M2MuMDYtLjAzLC4xMy0uMDYsLjE5LS4wOCwxLjEzLS41NCwyLjM4LS44MSwzLjczLS44MSwyLjE3LDAsNC40OSwuNyw2Ljg5LDIuMDgsOC4xNiw0LjcxLDE0Ljc4LDE2LjE3LDE0Ljc1LDI1LjU1LS4wMSw0LjExLTEuMzEsNy40Mi0zLjY2LDkuMzMtLjA0LC4wNC0uMDksLjA4LS4xNCwuMTEtLjY1LC41LTEuMzcsLjktMi4xNiwxLjE5bC0xMy4wMiw3LjEzYy0xLjI0LC43Mi0yLjY3LDEuMDktNC4yNSwxLjA5aDBaIiBmaWxsPSIjMmIyYjJiIi8+PHBhdGggZD0iTTYxLjE2LDExNC41N2MxLjkyLDAsNC4wOSwuNjIsNi4zOSwxLjk1LDcuOSw0LjU2LDE0LjI3LDE1LjYxLDE0LjI1LDI0LjY4LS4wMSw0LTEuMjcsNi45NC0zLjM0LDguNTloLS4wMmMtLjYsLjQ5LTEuMjgsLjg2LTIuMDEsMS4xMWwtMTMuMDksNy4xN2MtMS4wOSwuNjQtMi4zNywuOTctMy43NywuOTctMS45MywwLTQuMTEtLjYzLTYuNDEtMS45Ni03LjktNC41Ni0xNC4yNy0xNS42MS0xNC4yNS0yNC42OCwuMDEtNC45MiwxLjkyLTguMjMsNC45MS05LjUydi0uMDJsMTMuNTYtNy4zNXMuMS0uMDUsLjE1LS4wOGwuMi0uMTFoMGMxLjAyLS41LDIuMTctLjc3LDMuNDMtLjc3bTAtMmMtMS40OCwwLTIuODUsLjMtNC4xLC44OS0uMSwuMDMtLjIsLjA4LS4yOSwuMTNsLS4yLC4xMWMtLjA3LC4wNC0uMTIsLjA3LS4xNywuMDlsLTEzLjU1LDcuMzRzLS4wNywuMDQtLjExLC4wNmMtMy43LDEuNzQtNS44Miw1LjgxLTUuODQsMTEuMjItLjAzLDkuODYsNi42NywyMS40NywxNS4yNSwyNi40MiwyLjU2LDEuNDgsNS4wNSwyLjIzLDcuNDEsMi4yMywxLjc0LDAsMy4zNC0uNDEsNC43NS0xLjIzbDEyLjk0LTcuMDhjLjg3LS4zMiwxLjY4LS43NywyLjQtMS4zNCwuMDItLjAxLC4wMy0uMDMsLjA1LS4wNGgwYzIuNjItMi4xLDQuMDgtNS43LDQuMDktMTAuMTUsLjAzLTkuODYtNi42Ny0yMS40Ni0xNS4yNS0yNi40Mi0yLjU1LTEuNDctNS4wMy0yLjIyLTcuMzktMi4yMmgwWiIgZmlsbD0iIzFkMWQxYiIvPjwvZz48ZWxsaXBzZSBjeD0iNTMuMjUiIGN5PSIxNDAuOTUiIHJ4PSI2LjQ4IiByeT0iMTEuMTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02My42MSA0NS44NCkgcm90YXRlKC0zMC4xNikiIGZpbGw9IiNlZmVmZWYiLz48L2c+PGc+PHBhdGggZD0iTTY2LjM2LDcyLjU4bC0uMTcsNTguMjQtMTAuMzktNmMtOS4zOS01LjQyLTE3LjAyLTEuMDctMTcuMDYsOS43Mkw1LjM0LDExNS4yNWwuMDUtMTcuMzlMMjQuOSw0OC42NGw0MS40NiwyMy45NFoiIGZpbGw9IiNiNmM1ZGQiLz48cG9seWdvbiBwb2ludHM9IjEzLjggNzYuNjQgNjYuMjYgMTA3LjE4IDY2LjM2IDcyLjU4IDI0LjkgNDguNjQgMTMuOCA3Ni42NCIvPjwvZz48cG9seWdvbiBwb2ludHM9IjY2LjM2IDcyLjU4IDEyNi41MSAzNy42MiAxMjYuMzQgOTUuODcgNjYuMiAxMzAuODIgNjYuMzYgNzIuNTgiIGZpbGw9IiM2ODg1YWEiLz48cG9seWdvbiBwb2ludHM9IjI0LjkgNDguNjQgODUuMDUgMTMuNjkgMTI2LjUxIDM3LjYyIDY2LjM2IDcyLjU4IDI0LjkgNDguNjQiIGZpbGw9IiNjZGQ5ZWUiLz48L2c+PHBvbHlnb24gaWQ9IkZyb250IiBwb2ludHM9IjE3Mi40NCAxOTkuMTEgMTcyLjcxIDEwNS42OCAyNDAuMjEgNjYuMTYgMjQwLjU1IDE1OS43NiAxNzIuNDQgMTk5LjExIiBmaWxsPSIjNjg4NWFhIiBzdHJva2U9IiMxZDFkMWIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBvbHlnb24gaWQ9IlNpZGUiIHBvaW50cz0iNjIuOCAxMzUuODEgNjMuMDcgNDIuMzcgMTcyLjcxIDEwNS42OCAxNzIuNDQgMTk5LjExIDYyLjggMTM1LjgxIiBmaWxsPSIjYjZjNWRkIiBzdHJva2U9IiMxZDFkMWIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBvbHlnb24gaWQ9IlRvcCIgcG9pbnRzPSI2My4wNyA0Mi4zNyAxMzAuODIgMyAyNDAuMjEgNjYuMTYgMTcyLjcxIDEwNS42OCA2My4wNyA0Mi4zNyIgZmlsbD0iI2NkZDllZSIgc3Ryb2tlPSIjMWQxZDFiIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPjxwb2x5Z29uIHBvaW50cz0iMTcyLjQ0IDE3My43OCA2Mi44IDExMi4wNCA2Mi44IDkzLjMxIDE3Mi40NCAxNTUuMDUgMTcyLjQ0IDE3My43OCIgZmlsbD0iI2Q2MDc1NiIgc3Ryb2tlPSIjMWQxZDFiIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIHgxPSIyMTAuMjQiIHkxPSI4NC4yMiIgeDI9IjIxMC4yNCIgeTI9IjE3Ny4yOCIgZmlsbD0iIzY4ODVhYSIgc3Ryb2tlPSIjMWQxZDFiIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPjwvZz48cGF0aCBkPSJNMTMwLjgyLDNsMTA5LjM5LDYzLjE2LC4zNCw5My42MS03LjA3LDQuMDljLjMyLDEuNTcsLjUxLDMuMTMsLjUxLDQuNjMtLjAxLDQtMS4yNyw2Ljk0LTMuMzQsOC41OWgtLjAyYy0uNiwuNDktMS4yOCwuODYtMi4wMSwxLjExbC0xMy4wOSw3LjE3Yy0xLjA5LC42NC0yLjM3LC45Ny0zLjc3LC45Ny0xLjkzLDAtNC4xMS0uNjMtNi40MS0xLjk2LTEuMTQtLjY2LTIuMjQtMS40Ni0zLjMtMi4zNmwtMjUuOTIsMTQuOThjLS4xMSwzLjc1LTEuMzMsNi41My0zLjMyLDguMTFoLS4wMmMtLjYsLjQ5LTEuMjgsLjg2LTIuMDEsMS4xMWwtMTMuMDksNy4xN2MtMS4wOSwuNjQtMi4zNywuOTctMy43NywuOTctMS45MywwLTQuMTEtLjYzLTYuNDEtMS45Ni03LjktNC41Ni0xNC4yNy0xNS42MS0xNC4yNS0yNC42OCwwLTEuMTgsLjEzLTIuMjYsLjM0LTMuMjVsLTU3LjY1LTMzLjI4LTEyLjYxLDYuOTFjLTEuMDksLjY0LTIuMzcsLjk3LTMuNzcsLjk3LTEuOTMsMC00LjExLS42My02LjQxLTEuOTYtNy45LTQuNTYtMTQuMjctMTUuNjEtMTQuMjUtMjQuNjgsMC0uMiwuMDItLjM3LC4wMy0uNTYtLjEyLC44NS0uMTgsMS43NC0uMTgsMi42OUw1LjM0LDExNS4yNWwuMDUtMTcuMzlMMjQuOSw0OC42NCw4NS4wNSwxMy42OWwxMy43NCw3LjkzTDEzMC44MiwzbTAtM2MtLjUyLDAtMS4wNCwuMTQtMS41MSwuNDFsLTMwLjUzLDE3Ljc0LTEyLjIzLTcuMDZjLS40Ni0uMjctLjk4LS40LTEuNS0uNC0uNTIsMC0xLjA0LC4xNC0xLjUxLC40MUwyMy4zOSw0Ni4wNWMtLjU4LC4zNC0xLjAzLC44Ni0xLjI4LDEuNDlMMi42LDk2Ljc1Yy0uMTQsLjM1LS4yMSwuNzItLjIxLDEuMWwtLjA1LDE3LjM5YzAsMS4wNywuNTcsMi4wNywxLjUsMi42MWwzMi40MiwxOC43MmMxLjUxLDkuMTEsNy43MiwxOC42OSwxNS40LDIzLjEzLDIuNzEsMS41Nyw1LjM3LDIuMzYsNy45MSwyLjM2LDEuOTIsMCwzLjY4LS40Niw1LjI0LTEuMzZsMTEuMS02LjA4LDU0LjQzLDMxLjQyYy0uMDUsLjU1LS4wNywxLjEtLjA3LDEuNjYtLjAzLDEwLjE5LDYuODksMjIuMTcsMTUuNzUsMjcuMjksMi43MSwxLjU3LDUuMzcsMi4zNiw3LjkxLDIuMzYsMS45MiwwLDMuNjgtLjQ2LDUuMjQtMS4zNmwxMi44Ni03LjA0Yy45NC0uMzYsMS44MS0uODUsMi41OS0xLjQ2LC4wMi0uMDIsLjA0LS4wMywuMDYtLjA1aDBjMi40Mi0xLjkzLDMuODktNC45LDQuMzItOC42NWwyMi43OS0xMy4xN2MuNjksLjUsMS4zOCwuOTUsMi4wNiwxLjM0LDIuNzEsMS41Nyw1LjM3LDIuMzYsNy45MSwyLjM2LDEuOTIsMCwzLjY4LS40Niw1LjI0LTEuMzZsMTIuODYtNy4wNGMuOTQtLjM2LDEuODEtLjg1LDIuNTktMS40NiwuMDItLjAyLC4wNC0uMDMsLjA2LS4wNWgwYzIuODctMi4yOSw0LjQ1LTYuMTcsNC40Ny0xMC45MywwLS45OC0uMDctMi4wMS0uMi0zLjA4bDUuMjctMy4wNGMuOTMtLjU0LDEuNS0xLjUzLDEuNS0yLjYxbC0uMzQtOTMuNjFjMC0xLjA3LS41OC0yLjA1LTEuNS0yLjU5TDEzMi4zMiwuNGMtLjQ2LS4yNy0uOTgtLjQtMS41LS40aDBaIiBmaWxsPSIjMWQxZDFiIi8+PC9zdmc+\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"truck\",\n \"name\": \"truck\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAuODEgMjYwLjU1Ij48cGF0aCBpZD0iU2hhZG93IiBkPSJNMTMuNzUsMTY3Ljc4bDcxLjM5LTQwLjIxYzEuNTMtLjg5LDMuNDEtLjksNC45NS0uMDJsMTQ4LjIzLDg0LjUxYzMuMzEsMS44OSwzLjM0LDYuNjYsLjA1LDguNTlsLTY1LjM1LDM3LjM0Yy01Ljc1LDMuMzYtMTIuODUsMy40MS0xOC42NCwuMTFMMTMuNzgsMTc2LjM4Yy0zLjMyLTEuODktMy4zNC02LjY3LS4wNC04LjU5WiIgZmlsbD0iIzAxMDEwMSIgaXNvbGF0aW9uPSJpc29sYXRlIiBvcGFjaXR5PSIuNCIvPjxnIGlkPSJCb2R5Ij48ZyBpZD0iUmVhcldoZWVsIj48cGF0aCBkPSJNNTQuMywxNjQuMTVjLjAzLTkuMDctNi4zNS0yMC4xMi0xNC4yNS0yNC42OC0zLjgtMi4xOS03LjI1LTIuNDctOS44Mi0xLjE3aDBsLS4yLC4xcy0uMSwuMDUtLjE1LC4wOGwtMTMuNTYsNy4zNXYuMDJjLTIuOTgsMS4yOS00Ljg5LDQuNi00LjksOS41Mi0uMDMsOS4wNyw2LjM1LDIwLjEyLDE0LjI1LDI0LjY4LDMuOTgsMi4zLDcuNTgsMi41LDEwLjE4LC45OWwxMy4wOS03LjE3Yy43My0uMjUsMS40LS42MiwyLjAxLTEuMWguMDJjMi4wNy0xLjY3LDMuMzMtNC42MSwzLjM0LTguNjFaIiBmaWxsPSIjMmIyYjJiIi8+PGVsbGlwc2UgY3g9IjI1Ljc2IiBjeT0iMTYzLjkiIHJ4PSI2LjQ4IiByeT0iMTEuMTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03OC44NyAzNS4xMykgcm90YXRlKC0zMC4xNikiIGZpbGw9IiNlZmVmZWYiLz48L2c+PGcgaWQ9IlVuZGVyQ2FycmlhZ2UiPjxnIGlzb2xhdGlvbj0iaXNvbGF0ZSI+PHBvbHlnb24gcG9pbnRzPSIxOTIuMDMgMTc3LjIgMTM5LjE4IDIwNy45MSAxMC42NSAxMzMuNzEgNjMuNSAxMDIuOTkgMTkyLjAzIDE3Ny4yIiBmaWxsPSIjOTk5Ii8+PHBvbHlnb24gcG9pbnRzPSIxOTIuMDMgMTc3LjIgMTkxLjk4IDE5My41IDEzOS4xMyAyMjQuMjEgMTM5LjE4IDIwNy45MSAxOTIuMDMgMTc3LjIiIGZpbGw9IiM4ZThmOGYiLz48cG9seWdvbiBwb2ludHM9IjEzOS4xOCAyMDcuOTEgMTM5LjEzIDIyNC4yMSAxMC42IDE1MC4wMSAxMC42NSAxMzMuNzEgMTM5LjE4IDIwNy45MSIgZmlsbD0iIzcyNzM3MiIvPjwvZz48L2c+PGcgaWQ9IkZyb250V2hlZWwiPjxwYXRoIGQ9Ik0xNTYuMjYsMjIzLjY0Yy4wMy05LjA3LTYuMzUtMjAuMTItMTQuMjUtMjQuNjgtMy44LTIuMTktNy4yNS0yLjQ3LTkuODItMS4xN2gwbC0uMiwuMXMtLjEsLjA1LS4xNSwuMDhsLTEzLjU2LDcuMzV2LjAyYy0yLjk4LDEuMjktNC44OSw0LjYtNC45LDkuNTItLjAzLDkuMDcsNi4zNSwyMC4xMiwxNC4yNSwyNC42OCwzLjk4LDIuMyw3LjU4LDIuNSwxMC4xOCwuOTlsMTMuMDktNy4xN2MuNzMtLjI1LDEuNC0uNjIsMi4wMS0xLjFoLjAyYzIuMDctMS42NywzLjMzLTQuNjEsMy4zNC04LjYxWiIgZmlsbD0iIzJiMmIyYiIvPjxlbGxpcHNlIGN4PSIxMjcuNjciIGN5PSIyMjMuMSIgcng9IjYuNDgiIHJ5PSIxMS4xOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTk0LjgxIDk0LjM1KSByb3RhdGUoLTMwLjE2KSIgZmlsbD0iI2VmZWZlZiIvPjwvZz48ZyBpZD0iU2lkZSI+PHBvbHlnb24gcG9pbnRzPSIzIDEzNS44MSAzLjI2IDQyLjM3IDExMi45MSAxMDUuNjggMTEyLjY0IDE5OS4xMSAzIDEzNS44MSIgZmlsbD0iI2I2YzVkZCIvPjwvZz48cG9seWdvbiBpZD0iVG9wIiBwb2ludHM9IjMuMjYgNDIuMzcgNzEuMDIgMyAxODAuNCA2Ni4xNiAxMTIuOTEgMTA1LjY4IDMuMjYgNDIuMzciIGZpbGw9IiNjZGQ5ZWUiLz48cG9seWdvbiBpZD0iRnJvbnQiIHBvaW50cz0iMTEyLjY0IDE5OS4xMSAxMTIuOTEgMTA1LjY4IDE4MC40IDY2LjE2IDE4MC43NSAxNTkuNzYgMTEyLjY0IDE5OS4xMSIgZmlsbD0iIzY4ODVhYSIvPjxwb2x5Z29uIHBvaW50cz0iMTEyLjY0IDE3My43OCAzIDExMi4wNCAzIDkzLjMxIDExMi42NCAxNTUuMDUgMTEyLjY0IDE3My43OCIgZmlsbD0iI2Q2MDc1NiIgc3Ryb2tlPSIjMWQxZDFiIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxnIGlkPSJPdXRsaW5lIj48cG9seWdvbiBpZD0iU2lkZS0yIiBwb2ludHM9IjMgMTM1LjgxIDMuMjYgNDIuMzcgMTEyLjkxIDEwNS42OCAxMTIuNjQgMTk5LjExIDMgMTM1LjgxIiBmaWxsPSJub25lIiBzdHJva2U9IiMxZDFkMWIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBvbHlnb24gaWQ9IkZyb250LTIiIHBvaW50cz0iMTEyLjY0IDE5OS4xMSAxMTIuOTEgMTA1LjY4IDE4MC40IDY2LjE2IDE4MC43NSAxNTkuNzYgMTEyLjY0IDE5OS4xMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWQxZDFiIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIGlkPSJVbmRlcmNhcnJpYWdlIiB4MT0iMTEyLjkxIiB5MT0iMjA5Ljc0IiB4Mj0iMTAuNiIgeTI9IjE1MC4wMSIgZmlsbD0iIzcyNzM3MiIgc3Ryb2tlPSIjMWQxZDFiIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPjwvZz48L2c+PGcgaWQ9IkNhYiI+PGcgaWQ9IkZyb250LTMiPjxwb2x5Z29uIGlkPSJGcm9udC00IiBwb2ludHM9IjE1Ny4zMiAxNjguMTcgMTc0LjI0IDIzMi4yNCAyMzMuNTQgMTk2LjkxIDIxNi43NyAxMzMuMDcgMTU3LjMyIDE2OC4xNyIgZmlsbD0iIzg1OWViYiIvPjxwb2x5bGluZSBwb2ludHM9IjIxMy44OSAxMzQuNzggMTYwLjMxIDE2Ni42NSAxNzAuNjUgMjA2LjA2IDIyNC42NSAxNzQuODggMjE0LjMxIDEzNS40OCIvPjxwb2x5Z29uIHBvaW50cz0iMTgwLjUzIDIwMC4zNSAyMDEuOTIgMTg4LjAxIDIxNy4xIDE0Ni4xIDIxNC4zMSAxMzUuNDggMjEzLjg5IDEzNC43OCAyMDEuNjYgMTQyLjA1IDE4MC41MyAyMDAuMzUiIGZpbGw9IiM2ODg1YWEiLz48cG9seWdvbiBwb2ludHM9IjE3MC4zNSAyMDQuOTMgMTcwLjY1IDIwNi4wNiAxNzUuNzEgMjAzLjE0IDE5Ni44IDE0NC45NCAxOTAuOCAxNDguNTEgMTcwLjM1IDIwNC45MyIgZmlsbD0iIzY4ODVhYSIvPjxwb2x5Z29uIHBvaW50cz0iMjEzLjg5IDEzNC43OCAxNjAuMzEgMTY2LjY1IDE3MC42NSAyMDYuMDYgMjI0LjY1IDE3NC44OCAyMTMuODkgMTM0Ljc4IiBmaWxsPSJub25lIiBzdHJva2U9IiMxZDFkMWIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9nPjxwb2x5Z29uIGlkPSJSb29mIiBwb2ludHM9IjExOS43NSAxNDYuNjYgMTc5LjI5IDExMS4yMiAyMTYuNzcgMTMzLjA3IDE1Ny4zMiAxNjguMTcgMTE5Ljc1IDE0Ni42NiIgZmlsbD0iI2NkZDllZSIvPjxnIGlkPSJHcmlsbCI+PHBvbHlnb24gaWQ9IkdyaWxsLTIiIHBvaW50cz0iMTczLjMzIDI0OC40MSAyMzMuNTQgMjEzLjI5IDIzMy41NCAxOTYuOTEgMTc0LjI0IDIzMi4yNCAxNzMuMzMgMjQ4LjQxIiBmaWxsPSIjYThhN2E3Ii8+PHBvbHlnb24gcG9pbnRzPSIxNzQuMjQgMjMyLjI0IDIzMy41NCAxOTYuOTEgMjMzLjU0IDIxMy4yOSAxNzMuMzMgMjQ4LjQxIDE3NC4yNCAyMzIuMjQiIGZpbGw9IiM2ODg1YWEiLz48ZyBpZD0iTGlnaHRzIj48Zz48cG9seWdvbiBwb2ludHM9IjE3Ny42IDIzMy4yMyAxODkuMSAyMjYuMzcgMTg5LjEgMjM2LjU3IDE3Ny43MSAyNDMuMjIgMTc3LjYgMjMzLjIzIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE4OC4xLDIyOC4xM3Y3Ljg2bC05LjQxLDUuNDktLjA5LTcuNyw5LjUtNS42Nm0yLTMuNTJsLTEzLjUxLDguMDUsLjE0LDEyLjI4LDEzLjM3LTcuOHYtMTIuNTNoMFoiIGZpbGw9IiMxZDFkMWIiLz48L2c+PGc+PHBvbHlnb24gcG9pbnRzPSIyMTkuMiAyMDguMjcgMjMxLjEyIDIwMS4xNyAyMzEuMTIgMjExLjkgMjE5LjI3IDIxOC44MSAyMTkuMiAyMDguMjciIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjMwLjEyLDIwMi45M3Y4LjRsLTkuODcsNS43Ni0uMDUtOC4yNCw5LjkyLTUuOTFtMi0zLjUybC0xMy45Myw4LjMsLjA5LDEyLjg0LDEzLjg0LTguMDh2LTEzLjA3aDBaIiBmaWxsPSIjMWQxZDFiIi8+PC9nPjwvZz48L2c+PGcgaWQ9IlNpZGUtMyI+PHBhdGggaWQ9IlJpZ2h0U2lkZSIgZD0iTTE1NC44NywxNjUuODNsLTE1LjY2LTkuMDQtMTcuMTQtOS44OWMtMS44MS0xLjA1LTMuMjktLjIxLTMuMjksMS44OGwtLjA4LDI2LjYtLjA3LDI0Ljg5LDkuNiw1LjU0YzQuMjEsMi40NCw4LDYuNiwxMC43NSwxMS4zNiwyLjc2LDQuNzcsNC40NSwxMC4xNSw0LjQ0LDE1bDExLjA2LDYuMzgsMTYuNzIsOS42NWMxLjk3LDEuMTQsMy40LS4xOCwyLjktMi42NmwuMTQtMTMuMy0xNS4zOS02MC41OGMtLjQ3LTIuMzUtMi4xMS00Ljc1LTMuOTgtNS44MyIgZmlsbD0iI2I2YzVkZCIvPjxwYXRoIGlkPSJTaWRlV2luZG93IiBkPSJNMTY3LjU5LDIwNi4wNmwtOC43NC0zNC40MWMtLjQ3LTIuMzUtMi4xMS00Ljc1LTMuOTgtNS44M2wtMTUuNjYtOS4wNC0xNy4xNC05Ljg5Yy0xLjgxLTEuMDUtMy4yOS0uMjEtMy4yOSwxLjg4bC0uMDgsMjYuNnYyLjRsNDguODgsMjguMjhaIi8+PC9nPjxnIGlkPSJPdXRsaW5lLTIiPjxwb2x5bGluZSBpZD0iUm9vZi0yIiBwb2ludHM9IjE1Ny4zMiAxNjguMTcgMTIwLjQ2IDE0Ny4wNiAxODEuOSAxMTAuNTkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFkMWQxYiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48cG9seWxpbmUgaWQ9IlJpZ2h0U2lkZS0yIiBwb2ludHM9IjIxNi43NyAxMzMuMDcgMTU3LjMyIDE2OC4xNyAxNzQuMjQgMjMyLjI0IDE3NC4yNCAyNTAuMjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFkMWQxYiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48ZyBpZD0iUmlnaHRTaWRlLTMiPjxwYXRoIGQ9Ik0xMjAuODEsMTQ4LjQ5Yy4wNywuMDMsLjE2LC4wNywuMjcsLjEzbDE3LjE0LDkuODksMTUuNjYsOS4wNGMxLjM3LC43OSwyLjY2LDIuNzIsMy4wMiw0LjQ5di4wNWwuMDIsLjA1LDE1LjMzLDYwLjMzLS4xNCwxMy4wNHYuMjFsLjA0LC4yMWMuMDQsLjIyLC4wNiwuNCwuMDYsLjUzbC0xNi43Mi05LjY1LTEwLjA4LTUuODJjLS4yMy00LjczLTEuODctOS45NS00LjY4LTE0LjgzLTMuMDQtNS4yNi03LjExLTkuNTUtMTEuNDgtMTIuMDlsLTguNTktNC45NiwuMDctMjMuNzMsLjA4LTI2LjZjMC0uMTEsMC0uMjEsLjAyLS4yOG0tLjItMi4wNWMtMS4wOCwwLTEuODEsLjg1LTEuODIsMi4zM2wtLjA4LDI2LjYtLjA3LDI0Ljg5LDkuNiw1LjU0YzQuMjEsMi40NCw4LDYuNiwxMC43NSwxMS4zNiwyLjc2LDQuNzcsNC40NSwxMC4xNSw0LjQ0LDE1bDExLjA2LDYuMzgsMTYuNzIsOS42NWMuNDksLjI4LC45NCwuNDEsMS4zNCwuNDEsMS4yMiwwLDEuOTQtMS4yMSwxLjU2LTMuMDdsLjE0LTEzLjMtMTUuMzktNjAuNThjLS40Ny0yLjM1LTIuMTEtNC43NS0zLjk4LTUuODNsLTE1LjY2LTkuMDQtMTcuMTQtOS44OWMtLjUzLS4zMS0xLjAzLS40NS0xLjQ3LS40NWgwWiIgZmlsbD0iIzFkMWQxYiIvPjwvZz48L2c+PC9nPjxnIGlkPSJPdXRsaW5lLTMiPjxwYXRoIGQ9Ik03MS4wMiwzbDEwOS4zOSw2My4xNiwuMTcsNDUuODIsMzYuMiwyMS4xLDE2Ljc3LDYzLjg0djE2LjM4bC02MC4xNywzNS4xaC0uMDJsLS4wMiwuMDJoMGMtLjIzLC4xMy0uNDksLjItLjc5LC4yLS40LDAtLjg1LS4xMy0xLjM0LS40MWwtMTYuNzItOS42NS02LjY2LTMuODUtOS42Nyw1LjYyLS4zNSwuMmMtMS4wOSwuNjQtMi4zNywuOTctMy43NywuOTctMS45MywwLTQuMTEtLjYzLTYuNDEtMS45Ni03LjktNC41Ni0xNC4yNy0xNS42MS0xNC4yNS0yNC42OCwwLS41MiwuMDMtMS4wMSwuMDctMS40OSwuMDItLjI4LC4wNy0uNTMsLjEtLjgsLjAzLS4xNywuMDUtLjM1LC4wOC0uNTIsLjA2LS4zNCwuMTQtLjY3LC4yMi0uOTksLjAyLS4wNiwuMDMtLjEyLC4wNS0uMTcsLjEtLjM2LC4yMS0uNzEsLjM0LTEuMDRsLTY0LjY3LTM3LjM0Yy0uNTcsLjcxLTEuMjIsMS4zLTEuOTYsMS43M2wtMTEuNzEsNi44aDBjLTEuMDksLjYzLTIuMzYsLjk2LTMuNzYsLjk2LTEuOTMsMC00LjExLS42My02LjQxLTEuOTYtNy45LTQuNTYtMTQuMjctMTUuNjEtMTQuMjUtMjQuNjgsMC0xLjY4LC4yMy0zLjE4LC42NS00LjQ3bC0xLjUxLS44NywuMDMtOS43OS03LjYzLTQuNDEsLjI2LTkzLjQ0TDcxLjAyLDNtNjYuNzgsMjM3LjUyaDBtMCwwaDBNNzEuMDIsMGMtLjUyLDAtMS4wNCwuMTQtMS41MSwuNDFMMS43NiwzOS43OGMtLjkyLC41NC0xLjQ5LDEuNTItMS40OSwyLjU5TDAsMTM1LjhjMCwxLjA3LC41NywyLjA3LDEuNSwyLjYxbDYuMTMsMy41NC0uMDIsOC4wNmMwLC45MSwuNDEsMS43NiwxLjA5LDIuMzItLjE1LC45Ni0uMjMsMS45Ny0uMjMsMy4wMi0uMDMsMTAuMTksNi44OSwyMi4xNywxNS43NSwyNy4yOSwyLjcxLDEuNTcsNS4zNywyLjM2LDcuOTEsMi4zNiwxLjg2LDAsMy41Ny0uNDMsNS4xLTEuMjcsLjA2LS4wMywuMTItLjA2LC4xOC0uMDlsMTEuNzEtNi44Yy4zMS0uMTgsLjYxLS4zOCwuOS0uNmw2MC43MSwzNS4wNWMtLjAyLC4wOC0uMDMsLjE3LS4wNSwuMjUtLjAzLC4xNC0uMDUsLjMxLS4wNywuNDdsLS4wMiwuMTQtLjAyLC4xN2MtLjA0LC4yNi0uMDcsLjUyLS4xLC44LS4wNSwuNTktLjA4LDEuMTYtLjA4LDEuNzQtLjAzLDEwLjE5LDYuODksMjIuMTcsMTUuNzUsMjcuMjksMi43MSwxLjU3LDUuMzcsMi4zNiw3LjkxLDIuMzYsMS44NSwwLDMuNTYtLjQzLDUuMDktMS4yNywuMTItLjA2LC4yMy0uMTIsLjM0LS4xOWwuMi0uMTIsOC4xNy00Ljc0LDUuMTYsMi45OCwxNi43Miw5LjY1Yy45MywuNTQsMS44OSwuODEsMi44NCwuODEsLjc1LDAsMS40OC0uMTgsMi4xMi0uNTEsLjA2LS4wMywuMTItLjA2LC4xNy0uMDloLjAybC4wMi0uMDJoMGw2MC4xNy0zNS4xYy45Mi0uNTQsMS40OS0xLjUyLDEuNDktMi41OXYtMTYuMzhjMC0uMjYtLjAzLS41MS0uMS0uNzZsLTE2Ljc3LTYzLjg0Yy0uMi0uNzctLjctMS40My0xLjM5LTEuODNsLTM0LjcyLTIwLjI0LS4xNi00NC4xYzAtMS4wNy0uNTgtMi4wNS0xLjUtMi41OUw3Mi41MiwuNGMtLjQ2LS4yNy0uOTgtLjQtMS41LS40aDBaIiBmaWxsPSIjMWQxZDFiIi8+PC9nPjwvc3ZnPg==\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"user\",\n \"name\": \"user\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI2NzYuODg4OThweCIgaGVpZ2h0PSI2MzguNjI3OTlweCIgdmlld0JveD0iMCAwIDY3Ni44ODg5OCA2MzguNjI3OTkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY3Ni44ODg5OCA2MzguNjI3OTkiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgZD0iTTQxNS45MzEsNDgxLjE2TDQxNS45MzEsNDgxLjE2Ii8+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNNDExLjY1OSw0NzkuMTMxOTlsMy41MTA5OSwyLjAyODAybDMuNTE1MDEtMi4wMjgwMiIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZmlsbD0iI0MzRDVFQSIgZD0iTTM5Ni45MzYsMTgxLjg0N2MwLDQ4LjkyNy0zOS42NjI5OSw2NS42OTItODguNTkyMDEsMzcuNDQzMDFjLTQ4LjkyNy0yOC4yNDgtODguNTktOTAuODEyLTg4LjU5LTEzOS43MzkKCQkJczM5LjY2Mjk5LTY1LjY5Miw4OC41OS0zNy40NDNDMzU3LjI3Mzk5LDcwLjM1NSwzOTYuOTM2LDEzMi45MTgsMzk2LjkzNiwxODEuODQ3eiIvPgoJCTxwYXRoIGZpbGw9IiNGQUZDRkYiIGQ9Ik0yNDMuODM1MDEsOTEuNzcyYzAtNDIuNjgyLDMwLjE4NTk5LTYwLjg4Myw3MC4zNzE5OS00Ni4wODJjLTEuOTM3OTktMS4yNDYtMy44OTItMi40NDUtNS44NjItMy41ODMKCQkJYy00OC45MjctMjguMjQ4LTg4LjU5LTExLjQ4NC04OC41OSwzNy40NDNjMCw0OC45Mjc5OSwzOS42NjI5OSwxMTEuNDkxOTksODguNTksMTM5LjczOQoJCQljNi4yNDcwMSwzLjYwNiwxMi4zMzg5OSw2LjQ3NCwxOC4yMTg5OSw4LjYzOTAxQzI4MC4zNzEsMTk4LjI0MDAxLDI0My44MzUwMSwxMzguNzI5LDI0My44MzUwMSw5MS43NzJ6Ii8+CgkJPHBhdGggZmlsbD0iIzM2NUU3RiIgZD0iTTI0NS43MTUsMTYzLjY3M2wtMjguMzEzLDE2LjEzNjk5bDAuMDAzMDEsMC4wMDRjMC40Mjc5OS0wLjIzMzk5LDAuODY4LTAuNDUyLDEuMzA0LTAuNjc1CgkJCWMwLjI0Mi0wLjEyMzk5LDAuNDc4LTAuMjU0LDAuNzIzMDEtMC4zNzM5OWMwLjgzMi0wLjQwOCwxLjY3Nzk5LTAuNzk0MDEsMi41MzUtMS4xNjI5OWMwLjI4LTAuMTIsMC41NjU5OS0wLjIzMywwLjg0OS0wLjM0ODAxCgkJCWMwLjYzOTAxLTAuMjYzLDEuMjg2LTAuNTE1LDEuOTQwOTktMC43NTVjMC4zMDgtMC4xMTQsMC42MTUwMS0wLjIyNiwwLjkyNS0wLjMzNTAxYzAuNzkyMDEtMC4yNzYsMS41OTMtMC41MzcsMi40MDQwMS0wLjc4CgkJCWMwLjEzOTAxLTAuMDQyMDEsMC4yNzYtMC4wODksMC40MTQ5OS0wLjEzYzAuOTU3LTAuMjgsMS45MjctMC41MzIsMi45MDgtMC43NjdjMC4yNjE5OS0wLjA2MywwLjUyOC0wLjExOSwwLjc5MjAxLTAuMTc5CgkJCWMwLjc3NC0wLjE3NSwxLjU1NC0wLjMzNiwyLjM0Mzk5LTAuNDgzYzAuMjY2MDEtMC4wNDksMC41MzItMC4xMDEsMC44LTAuMTQ3YzIuMDc4OTktMC4zNiw0LjIwOS0wLjYyNjAxLDYuMzg4LTAuNzk2MDEKCQkJYzAuMjI3MDEtMC4wMTcsMC40NTctMC4wMzEwMSwwLjY4Ni0wLjA0N2MwLjkyNzk5LTAuMDYzLDEuODYzMDEtMC4xMSwyLjgwOTAxLTAuMTM4YzAuMTk5MDEtMC4wMDYsMC4zOTYtMC4wMTYwMSwwLjU5Ny0wLjAyCgkJCWMyLjI5NS0wLjA1MDk5LDQuNjM4LDAsNy4wMjgsMC4xNTNjMC4xODYsMC4wMTMsMC4zNzUsMC4wMjY5OSwwLjU2MywwLjAzOTk5YzEuMDkxLDAuMDc4LDIuMTksMC4xNzUsMy4yOTksMC4yOTUKCQkJYzAuMDc4LDAuMDA5LDAuMTUzOTksMC4wMTMsMC4yMzMsMC4wMmMwLjAwMTAxLDAuMDAxMDEsMC4wMDIwMSwwLjAwMiwwLjAwMjAxLDAuMDAyYy0yLjg4My0zLjcyMi01LjYzOC03LjUzNzk5LTguMjUtMTEuNDI3CgkJCUMyNDcuNjg0MDEsMTYyLjM3LDI0Ni42ODQwMSwxNjMsMjQ1LjcxNSwxNjMuNjczeiIvPgoJCTxwYXRoIGZpbGw9IiNDM0Q1RUEiIGQ9Ik00MzAuMDEwMDEsMzc5LjQyM2MtMC4wMTA5OS0wLjM2MzAxLTAuMDIzOTktMC43MjY5OS0wLjA0MDAxLTEuMDkKCQkJYy0wLjA0OTAxLTEuMjE3OTktMC4xMTQwMS0yLjQzOS0wLjE5NjAxLTMuNjY2OTljLTAuMDE0MDEtMC4xNzU5OS0wLjAyMS0wLjM1MTk5LTAuMDM0LTAuNTMKCQkJYy0wLjEwMDAxLTEuMzgxOTktMC4yMjI5OS0yLjc3MzAxLTAuMzY0MDEtNC4xNjhjLTAuMDM2OTktMC4zNTMtMC4wNzctMC43MDctMC4xMTQwMS0xLjA2MjAxCgkJCWMtMC4xMjc5OS0xLjE3Ny0wLjI2OTk5LTIuMzU2OTktMC40Mjg5OS0zLjU0MDk5Yy0wLjAzNC0wLjI3MS0wLjA2NjAxLTAuNTM5LTAuMTA0LTAuODA4OTkKCQkJYy0wLjE5Mjk5LTEuNDA5LTAuNDEtMi44MjQwMS0wLjY0NDAxLTQuMjQyYy0wLjA1MzAxLTAuMzE2OTktMC4xMDk5OS0wLjYzNTAxLTAuMTY0LTAuOTUyCgkJCWMtMC4yMDQ5OS0xLjE5MTAxLTAuNDI0MDEtMi4zODQtMC42NTUtMy41ODJjLTAuMDYyOTktMC4zMTYwMS0wLjEyMjAxLTAuNjM0LTAuMTgzMDEtMC45NTAwMQoJCQljLTAuMjg5LTEuNDM3OTktMC41OTUtMi44ODMtMC45MjMtNC4zMjkwMWMtMC4wNTQ5OS0wLjI0MS0wLjExNDAxLTAuNDgzLTAuMTY4LTAuNzI2MDFjLTAuMjkwOTktMS4yNTUtMC41OTUtMi41MTMtMC45MTUwMS0zLjc3MgoJCQljLTAuMDg0MDEtMC4zMzItMC4xNjY5OS0wLjY2NTk5LTAuMjUyMDEtMC45OTg5OWMtMC4zODE5OS0xLjQ3NTAxLTAuNzc4OTktMi45NTItMS4xOTkwMS00LjQzMQoJCQljLTAuMDI3MDEtMC4wOTc5OS0wLjA1ODAxLTAuMTk2MDEtMC4wODQ5OS0wLjI5NTAxYy0wLjM5OTk5LTEuMzkwOTktMC44MTY5OS0yLjc4NC0xLjI0ODk5LTQuMTc4OTkKCQkJYy0wLjEwMTAxLTAuMzI0MDEtMC4yMDItMC42NDk5OS0wLjMwMzAxLTAuOTc1MDFjLTAuOTQ2MDEtMi45OTc5OS0xLjk2Nzk5LTYuMDAxMDEtMy4wNjIwMS05LjAwNQoJCQljLTAuMTA5MDEtMC4yOTQwMS0wLjIxNS0wLjU4ODAxLTAuMzI0MDEtMC44ODEwMWMtMC41MzY5OS0xLjQ1MDk5LTEuMDg0OTktMi45MDMwMi0xLjY1Mzk5LTQuMzU0CgkJCWMtMC4wMjEtMC4wNDk5OS0wLjA0MDAxLTAuMTAwMDEtMC4wNi0wLjE0OTk5Yy0wLjYwNTk5LTEuNTQ0MDEtMS4yMzQ5OS0zLjA4Ni0xLjg4MTk5LTQuNjI3OTkKCQkJYy0wLjA5NjAxLTAuMjM0MDEtMC4xOTY5OS0wLjQ2ODk5LTAuMjk1MDEtMC43MDNjLTAuNjAwMDEtMS40MjA5OS0xLjIxMzk5LTIuODQxLTEuODQ1LTQuMjYwMDEKCQkJYy0wLjA1MzAxLTAuMTE4MDEtMC4xMDQtMC4yMzctMC4xNTYwMS0wLjM1NTk5Yy0wLjY5OC0xLjU2MS0xLjQxNTk5LTMuMTE4OTktMi4xNDk5OS00LjY3NTk5CgkJCWMtMC4wNjYwMS0wLjE0NDAxLTAuMTM1OTktMC4yODYwMS0wLjIwNDAxLTAuNDI4OTljLTAuNjg5LTEuNDUyLTEuMzkyLTIuODk5OTktMi4xMTA5OS00LjM0Njk4CgkJCWMtMC4wNzEwMS0wLjE0Mi0wLjE0MDk5LTAuMjgyMDEtMC4yMTIwMS0wLjQyNDk5Yy0wLjc5MDAxLTEuNTgyLTEuNTk2OTgtMy4xNTc5OS0yLjQyNDAxLTQuNzMzCgkJCWMtMC4wMDI5OS0wLjAwNS0wLjAwNjAxLTAuMDA5LTAuMDA4LTAuMDE0MDFjLTAuODA4MDEtMS41NDAwMS0xLjYzOTAxLTMuMDc0MDEtMi40ODAwMS00LjYwNAoJCQljLTAuMDc4LTAuMTQwOTktMC4xNTMwMi0wLjI4MTAxLTAuMjMzLTAuNDIwOTljLTEuNzItMy4xMTMwMS0zLjUxMDAxLTYuMjA3LTUuMzY4MDEtOS4yNzcwMQoJCQljLTAuMDY5LTAuMTEzMDEtMC4xMzU5OS0wLjIyNjAxLTAuMjA3LTAuMzM4OTljLTEuODgtMy4wOTktMy44MjkwMS02LjE3My01Ljg0MS05LjIxNzAxCgkJCWMtMC4wNDUwMS0wLjA2Njk5LTAuMDg4OTktMC4xMzMtMC4xMzE5OS0wLjIwMDAxYy0yLjA0NTk5LTMuMDg4MDEtNC4xNTYwMS02LjE0Ni02LjMyOTk5LTkuMTY0CgkJCWMtMC4wMDIwMS0wLjAwMjk5LTAuMDAyOTktMC4wMDY5OS0wLjAwOC0wLjAxMDAxYy03LjY5Njk5LTEwLjY5Mi0xNi4xNzQ5OS0yMC45MTI5OS0yNS4yNjAwMS0zMC4zOTcKCQkJYy0xNC40OTYsMS45NzQtMzIuMjM1OTktMi4xODMtNTEuMzk4OTktMTMuMjQ4Yy0xOS4xNjEwMS0xMS4wNjMtMzYuOTAxLTI3LjM4ODk5LTUxLjM5NDk5LTQ2LjA5OQoJCQljLTAuMDc5MDEtMC4wMDktMC4xNTcwMS0wLjAxNjAxLTAuMjM1OTktMC4wMjI5OWMtMS4xMDg5OS0wLjEyLTIuMjA3OTktMC4yMTctMy4yOTktMC4yOTUKCQkJYy0wLjE4OC0wLjAxMy0wLjM3NjAxLTAuMDI2OTktMC41NjMtMC4wMzk5OWMtMi4zOS0wLjE1My00LjczMy0wLjIwMzk5LTcuMDI4LTAuMTUzYy0wLjIwMSwwLjAwNS0wLjM5OSwwLjAxNDAxLTAuNTk3LDAuMDIKCQkJYy0wLjk0NiwwLjAyOC0xLjg4MSwwLjA3NDAxLTIuODA5MDEsMC4xMzhjLTAuMjI5LDAuMDE2MDEtMC40NTc5OSwwLjAyOTAxLTAuNjg2LDAuMDQ3Yy0yLjE3OSwwLjE2OTAxLTQuMzA4LDAuNDM2LTYuMzg4LDAuNzk2MDEKCQkJYy0wLjI2ODAxLDAuMDQ3LTAuNTM0LDAuMDk3LTAuOCwwLjE0N2MtMC43ODk5OSwwLjE0Ny0xLjU3MDAxLDAuMzA5MDEtMi4zNDM5OSwwLjQ4M2MtMC4yNjQwMSwwLjA2LTAuNTMsMC4xMTUwMS0wLjc5MjAxLDAuMTc5CgkJCWMtMC45ODE5OSwwLjIzNS0xLjk1MiwwLjQ4Ny0yLjkwOCwwLjc2N2MtMC4xNCwwLjA0MS0wLjI3Njk5LDAuMDg4LTAuNDE0OTksMC4xM2MtMC44MTIsMC4yNDQtMS42MTIsMC41MDUtMi40MDQwMSwwLjc4CgkJCWMtMC4zMSwwLjEwOC0wLjYxOSwwLjIyMDk5LTAuOTI1LDAuMzM1MDFjLTAuNjU0MDEsMC4yNDAwMS0xLjMwMDk5LDAuNDkzLTEuOTQwOTksMC43NTUKCQkJYy0wLjI4NCwwLjExNTAxLTAuNTcwMDEsMC4yMjgtMC44NDksMC4zNDgwMWMtMC44NTgsMC4zNjktMS43MDM5OSwwLjc1NC0yLjUzNSwxLjE2Mjk5Yy0wLjI0NSwwLjEyLTAuNDgxLDAuMjUtMC43MjMwMSwwLjM3Mzk5CgkJCWMtMTkuOTI3OTksMTAuMTY5MDEtMzIuMTA1LDMyLjA1MDk5LTMyLjEwNSw2My44MTdWNDA5LjU2bDI0My40ODA5OSwxNDAuNTczVjM4My41MwoJCQlDNDMwLjA4NzAxLDM4Mi4xNjgsNDMwLjA1NDk5LDM4MC43OTgsNDMwLjAxMDAxLDM3OS40MjN6Ii8+CgkJPHBhdGggZmlsbD0iI0ZBRkNGRiIgZD0iTTIwOS4xNjkwMSw0MjAuNDExOTlWMjUzLjgwOTAxYzAtMzEuNzY1LDEyLjE3Ny01My42NDc5OSwzMi4xMDUtNjMuODE3CgkJCWMwLjI0Mi0wLjEyMywwLjQ3OS0wLjI1NCwwLjcyMzAxLTAuMzczOTljMC44MzItMC40MDgsMS42Nzc5OS0wLjc5NSwyLjUzNS0xLjE2Mjk5YzAuMjgtMC4xMiwwLjU2NTk5LTAuMjMxOTksMC44NDktMC4zNDgwMQoJCQljMC42NC0wLjI2MTk5LDEuMjg2LTAuNTE1LDEuOTQwOTktMC43NTVjMC4zMDcwMS0wLjExNCwwLjYxNTAxLTAuMjI2LDAuOTI1LTAuMzM1MDFjMC43OTIwMS0wLjI3NiwxLjU5Mi0wLjUzNywyLjQwNDAxLTAuNzgKCQkJYzAuMTM5MDEtMC4wNDIwMSwwLjI3Ni0wLjA4OSwwLjQxNi0wLjEzYzAuOTU1OTktMC4yNzkwMSwxLjkyNTk5LTAuNTMyLDIuOTA3LTAuNzY2MDFjMC4yNjE5OS0wLjA2MywwLjUyOC0wLjExOSwwLjc5My0wLjE3OQoJCQljMC43NzI5OS0wLjE3NSwxLjU1NC0wLjMzNTAxLDIuMzQzLTAuNDgxOTljMC4yNjU5OS0wLjA0OSwwLjUzMjAxLTAuMTAxLDAuNzk5OTktMC4xNDdjMi4wNzkwMS0wLjM2LDQuMjA5MDEtMC42MjYwMSw2LjM4OC0wLjc5NQoJCQljMC4yMjY5OS0wLjAxODAxLDAuNDU3LTAuMDMxMDEsMC42ODYtMC4wNDdjMC4yMTMwMS0wLjAxNjAxLDAuNDMyMDEtMC4wMTksMC42NDQ5OS0wLjAzMgoJCQljLTMuMDAyMDEtMy4zODkwMS01Ljg5OTk5LTYuODg0LTguNjc4MDEtMTAuNDY4OTljLTAuMDc5MDEtMC4wMDktMC4xNTcwMS0wLjAxNjAxLTAuMjM1OTktMC4wMjI5OQoJCQljLTEuMTA4OTktMC4xMi0yLjIwNzk5LTAuMjE3LTMuMjk5LTAuMjk1Yy0wLjE4OC0wLjAxMy0wLjM3NjAxLTAuMDI2OTktMC41NjMtMC4wMzk5OWMtMi4zOS0wLjE1My00LjczMy0wLjIwMzk5LTcuMDI4LTAuMTUzCgkJCWMtMC4yMDEsMC4wMDUtMC4zOTksMC4wMTQwMS0wLjU5NywwLjAyYy0wLjk0NiwwLjAyOC0xLjg4MSwwLjA3NDAxLTIuODA5MDEsMC4xMzhjLTAuMjI5LDAuMDE2MDEtMC40NTc5OSwwLjAyOTAxLTAuNjg2LDAuMDQ3CgkJCWMtMi4xNzksMC4xNjkwMS00LjMwOCwwLjQzNi02LjM4OCwwLjc5NjAxYy0wLjI2ODAxLDAuMDQ3LTAuNTM0LDAuMDk3LTAuOCwwLjE0N2MtMC43ODk5OSwwLjE0Ny0xLjU3MDAxLDAuMzA5MDEtMi4zNDM5OSwwLjQ4MwoJCQljLTAuMjY0MDEsMC4wNi0wLjUzLDAuMTE1MDEtMC43OTIwMSwwLjE3OWMtMC45ODE5OSwwLjIzNS0xLjk1MiwwLjQ4Ny0yLjkwOCwwLjc2N2MtMC4xNCwwLjA0MS0wLjI3Njk5LDAuMDg4LTAuNDE0OTksMC4xMwoJCQljLTAuODEyLDAuMjQ0LTEuNjEyLDAuNTA1LTIuNDA0MDEsMC43OGMtMC4zMSwwLjEwOC0wLjYxOSwwLjIyMDk5LTAuOTI1LDAuMzM1MDFjLTAuNjU0MDEsMC4yNDAwMS0xLjMwMDk5LDAuNDkzLTEuOTQwOTksMC43NTUKCQkJYy0wLjI4NCwwLjExNTAxLTAuNTcwMDEsMC4yMjgtMC44NDksMC4zNDgwMWMtMC44NTgsMC4zNjktMS43MDM5OSwwLjc1NC0yLjUzNSwxLjE2Mjk5Yy0wLjI0NSwwLjEyLTAuNDgxLDAuMjUtMC43MjMwMSwwLjM3Mzk5CgkJCWMtMTkuOTI3OTksMTAuMTY5MDEtMzIuMTA1LDMyLjA1MDk5LTMyLjEwNSw2My44MTdWNDA5LjU2bDI0My40ODA5OSwxNDAuNTczdi0yLjE3Mjk3TDIwOS4xNjkwMSw0MjAuNDExOTl6Ii8+CgkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTQzMC4wODcwMSwxNjIuODYyYzAsMjMuMTE4LTguODU2OTksMzkuMDU0OTktMjMuMzYzMDEsNDYuNDUzOTlsLTI5LjUyODk5LDE3LjA2M2wtMC4wOTUtMC4xMjEKCQkJYzEyLjQwMS04LjA4NTAxLDE5LjgzNzAxLTIzLjIzMSwxOS44MzcwMS00NC40MTI5OWMwLTM4LjQxNTAxLTI0LjQ1My04NS4yNDQtNTguNjQ3LTExNy4yNTYKCQkJYy00LjA5LTMuODM2LTguMzIwMDEtNy40NTUtMTIuNjY1MDEtMTAuODEyYy01LjU4NDAxLTQuMzM0LTExLjM2Ni04LjI1NS0xNy4yOC0xMS42NjhjLTAuMjM0OTktMC4xNDEtMC40NzktMC4yNzMtMC43MTM5OS0wLjQwNAoJCQljLTI1LjE0OTk5LTE0LjMyOC00Ny43ODc5OS0xNi43MjYtNjMuNzk5LTguOTY5bDI4LjM3NTAyLTE2LjIyN2MxLjU5Nzk5LTEuMDgxLDMuMjcxLTIuMDQsNS4wMjg5OS0yLjg3NwoJCQljMTYuMTQyLTcuNjgxLDM4Ljk2MS01LjExNCw2NC4yNTksOS40ODVjMC40NjEsMC4yNjQsMC45MjIsMC41MzcsMS4zODMsMC44MTljNS4yMzcsMy4xMDMsMTAuMzcsNi41OSwxNS4zNDI5OSwxMC40MjYKCQkJYzQuNTk2OTgsMy41MjYsOS4wNjI5OSw3LjMzMywxMy4zNzc5OSwxMS4zODVDNDA1LjcwODAxLDc3Ljc3LDQzMC4wODcwMSwxMjQuNTA1LDQzMC4wODcwMSwxNjIuODYyeiIvPgoJCTxwYXRoIGZpbGw9IiNFOUYyRkYiIGQ9Ik0zNDIuODc3OTksMjMuOTM3TDM0Mi4wNiwyNS4yNDRsLTMwLjY5NTk4LDE2LjQ2MmgtMy43MzE5OQoJCQljLTI1LjE0OTk5LTE0LjMyOC00Ny43ODc5OS0xNi43MjYtNjMuNzk5LTguOTY5bDI4LjM3NDk4LTE2LjIyN2MxLjU5Njk4LTEuMDgxLDMuMjcxLTIuMDQsNS4wMjg5OS0yLjg3NwoJCQljMTYuMTQyLTcuNjgxLDM4Ljk2MS01LjExNCw2NC4yNTksOS40ODVDMzQxLjk1NTk5LDIzLjM4MiwzNDIuNDE2OTksMjMuNjU0LDM0Mi44Nzc5OSwyMy45Mzd6Ii8+CgkJPHBhdGggZmlsbD0iI0U5RjJGRiIgZD0iTTM3MS41OTksNDUuNzQ5bC0yLjExNiwwLjYwMmwtMzAuNDQxMDEsMTYuNDA2bC0wLjc1MjAxLDEuODMzYy00LjA5LTMuODM2LTguMzIwMDEtNy40NTUtMTIuNjY1MDEtMTAuODEyCgkJCWwwLjk0LTEuNjQ1bDI5Ljg2MDk5LTE2Ljc3M2wxLjc5NTAxLTAuOTk2QzM2Mi44MTc5OSwzNy44ODgsMzY3LjI4NSw0MS42OTcsMzcxLjU5OSw0NS43NDl6Ii8+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiM2ODg1QTkiIGQ9Ik0yMzkuMjYxOTksMzUuMzU3TDIzOS4yNjE5OSwzNS4zNTdMMjM5LjI2MTk5LDM1LjM1N3oiLz4KCQk8L2c+CgkJPHBhdGggZmlsbD0iIzY4ODVBOSIgZD0iTTM5NS4yNjMsMjE1LjkzN0wzNzcuMTg5LDIyNi4zNzk5OWwtMC4wODcwMS0wLjEyMTk5YzAuMTAxMDEtMC4wNjcsMC4xOTQtMC4xNDMwMSwwLjI5NTAxLTAuMjA5CgkJCWMtNS4wOTYwMSwzLjM5Mi0xMS4wMzQsNS41ODgtMTcuNjYxMDEsNi40ODljOS4wODgwMSw5LjQ4NTk5LDE3LjU3MDAxLDE5LjcwMiwyNS4yNjgwMSwzMC4zOTcKCQkJYzAuMDA1LDAuMDAyOTksMC4wMDYwMSwwLjAwNjk5LDAuMDA4LDAuMDEwMDFjMi4xNzQwMSwzLjAxOTAxLDQuMjg1LDYuMDc1OTksNi4zMjk5OSw5LjE2NAoJCQljMC4wNDMsMC4wNjY5OSwwLjA4NzAxLDAuMTMzLDAuMTMxOTksMC4yMDAwMWMyLjAxMTk5LDMuMDQ0MDEsMy45NTk5OSw2LjExODAxLDUuODQxLDkuMjE3MDEKCQkJYzAuMDcxMDEsMC4xMTQwMSwwLjEzOCwwLjIyNjAxLDAuMjA3LDAuMzM4OTljMS44NTgsMy4wNzAwMSwzLjY0ODAxLDYuMTYyOTksNS4zNjgwMSw5LjI3NzAxCgkJCWMwLjA3OTk5LDAuMTM5MDEsMC4xNTM5OSwwLjI4LDAuMjMzLDAuNDIwOTljMC44NDEsMS41MywxLjY3MywzLjA2NCwyLjQ4MDAxLDQuNjA0YzAuMDAyMDEsMC4wMDUsMC4wMDUsMC4wMDksMC4wMDgsMC4wMTQwMQoJCQljMC44MjcsMS41NzUwMSwxLjYzNCwzLjE1MSwyLjQyNDAxLDQuNzMzYzAuMDcxMDEsMC4xNDMwMSwwLjE0MDk5LDAuMjgyOTksMC4yMTIwMSwwLjQyNDk5CgkJCWMwLjcxODk5LDEuNDQ2OTksMS40MjMsMi44OTYsMi4xMTA5OSw0LjM0NzAyYzAuMDY2OTksMC4xNDMwMSwwLjEzOCwwLjI4NSwwLjIwNDAxLDAuNDI4OTkKCQkJYzAuNzM0OTksMS41NTcwMSwxLjQ1MywzLjExNiwyLjE0OTk5LDQuNjc1OTljMC4wNTIsMC4xMTgwMSwwLjEwMywwLjIzNywwLjE1NjAxLDAuMzU1OTkKCQkJYzAuNjMxOTksMS40MTkwMSwxLjI0NiwyLjgzODAxLDEuODQ1LDQuMjYwMDFjMC4wOTc5OSwwLjIzNDAxLDAuMTk5MDEsMC40Njg5OSwwLjI5NTAxLDAuNzAzCgkJCWMwLjY0NywxLjU0MDk5LDEuMjc2LDMuMDg0MDEsMS44ODE5OSw0LjYyNzk5YzAuMDE5OTksMC4wNDk5OSwwLjAzNzk5LDAuMTAwMDEsMC4wNiwwLjE0OTk5CgkJCWMwLjU3MDAxLDEuNDUwOTksMS4xMTcsMi45MDMwMiwxLjY1Mzk5LDQuMzU0YzAuMTA5MDEsMC4yOTQwMSwwLjIxNSwwLjU4ODAxLDAuMzI0MDEsMC44ODEwMQoJCQljMS4wOTM5OSwzLjAwNCwyLjExNiw2LjAwOCwzLjA2MjAxLDkuMDA1YzAuMTAxMDEsMC4zMjQwMSwwLjIwMiwwLjY0OTk5LDAuMzAzMDEsMC45NzUwMQoJCQljMC40MzIwMSwxLjM5NDk5LDAuODQ5LDIuNzg3OTksMS4yNDg5OSw0LjE3ODk5YzAuMDI3MDEsMC4xMDAwMSwwLjA1ODAxLDAuMTk2OTksMC4wODQ5OSwwLjI5NTAxCgkJCWMwLjQyMDk5LDEuNDgwMDEsMC44MTY5OSwyLjk1NTk5LDEuMTk5MDEsNC40MzFjMC4wODQ5OSwwLjMzNDAxLDAuMTY4LDAuNjY1OTksMC4yNTIwMSwwLjk5ODk5CgkJCWMwLjMyMDAxLDEuMjU5LDAuNjIzOTksMi41MTcsMC45MTUwMSwzLjc3MmMwLjA1NDk5LDAuMjQyLDAuMTE0MDEsMC40ODQ5OSwwLjE2OCwwLjcyNTAxCgkJCWMwLjMyOCwxLjQ0NjAxLDAuNjM0LDIuODkwMDEsMC45MjMsNC4zMjkwMWMwLjA2MSwwLjMxNjAxLDAuMTIxLDAuNjM0LDAuMTgzMDEsMC45NTAwMWMwLjIzMDk5LDEuMTk4LDAuNDUwMDEsMi4zOTIsMC42NTUsMy41ODIKCQkJYzAuMDUzMDEsMC4zMTY5OSwwLjEwOTk5LDAuNjM1MDEsMC4xNjQsMC45NTJjMC4yMzQwMSwxLjQxOTAxLDAuNDUwOTksMi44MzIsMC42NDQwMSw0LjI0MgoJCQljMC4wMzc5OSwwLjI3MSwwLjA3MTAxLDAuNTM5LDAuMTA0LDAuODA4OTljMC4xNTksMS4xODUsMC4yOTk5OSwyLjM2NDAxLDAuNDI4OTksMy41NDA5OQoJCQljMC4wMzY5OSwwLjM1NTAxLDAuMDc3LDAuNzA4MDEsMC4xMTQwMSwxLjA2MjAxYzAuMTQwOTksMS4zOTQ5OSwwLjI2NTAxLDIuNzg2OTksMC4zNjQwMSw0LjE2OAoJCQljMC4wMTMsMC4xNzgwMSwwLjAxOTk5LDAuMzUzLDAuMDM0LDAuNTNjMC4wODIsMS4yMjY5OSwwLjE0NywyLjQ0OCwwLjE5NjAxLDMuNjY2OTkKCQkJYzAuMDE1OTksMC4zNjQwMSwwLjAyODk5LDAuNzI2OTksMC4wNDAwMSwxLjA5YzAuMDQ1MDEsMS4zNzYwMSwwLjA3NywyLjc0NSwwLjA3Nyw0LjEwNTAxdjE2Ni42MDNsMzMuMTQ4OTktMTkuMTE0OTlWMzY0LjQxMTAxCgkJCUM0NjMuMjM0OTksMzE2LjQ4MDk5LDQzNS41MjgwMiwyNTkuMDQwMDEsMzk1LjI2MywyMTUuOTM3eiIvPgoJCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik00MDkuOTk1LDIxOC4yODJsMS4yMjUwMS0wLjcwNzk5YzE4LjIzMDk5LTkuNDE5MDEsMjguMjY1OTktMjguODM3MDEsMjguMjY1OTktNTQuNzExCgkJCWMwLTI1LjQyMy05LjczNDAxLTU0Ljc3OS0yNy40MDktODIuNjU5Yy0xNy41My0yNy42NTItNDAuOTI4MDEtNTAuODE1LTY1Ljg4My02NS4yMjNDMzI5LjIyLDUuMTgsMzEyLjMwMDk5LDAsMjk3LjI2NTk5LDAKCQkJYy04LjgwNDk5LDAtMTYuOTA1LDEuNzMxLTI0LjA3NDAxLDUuMTQzYy0yLjA0NTk5LDAuOTc1LTQuMDQ0MDEsMi4xMDgtNS45NDI5OSwzLjM3TDIzOS40MzEsMjQuNDI4CgkJCWMtMTguNzU0LDkuMjQ2LTI5LjA3ODk5LDI4LjgwNy0yOS4wNzg5OSw1NS4xMjA5OWMwLDI0LjUyMSw4Ljg5Miw1Mi4zMDA5OSwyNS4xOTQsNzkuMDk4MDFMMjEyLjgxLDE3MS42MDUwMQoJCQljLTIyLjk2MjAxLDEyLjYyNS0zNS42MDY5OSwzNy45NjQtMzUuNjA2OTksNzEuMzUwMDF2MTcyLjAzMTAxbDI1Mi44Nzc5OSwxNDUuOTk4OTZsNDIuNTU0MDItMjQuNTM4MDJWMzY0LjQxMTAxCgkJCUM0NzIuNjM2OTksMzE4LjQ0Njk5LDQ0OC44NTUwMSwyNjMuMzYzMDEsNDA5Ljk5NSwyMTguMjgyeiBNMjczLjE0MDAxLDE4LjE0bDAuMTE4OTktMC4wNzQKCQkJYzEuNTI0OTktMS4wMywzLjEzNTAxLTEuOTUyLDQuNzg1LTIuNzM4YzUuNjQwOTktMi42ODQsMTIuMTA4LTQuMDQ2LDE5LjIyMjk5LTQuMDQ2YzEzLjA1NiwwLDI4LjAyNDk5LDQuNjU4LDQzLjI4Njk5LDEzLjQ2OAoJCQljNDguMzMyLDI3LjkwNCw4Ny42NTIwMSw4OS44NjEsODcuNjUyMDEsMTM4LjExMDk5YzAsMjEuNTI3MDEtNy45MzM5OSwzNy40MjktMjIuMzQxLDQ0Ljc3ODk5bC0xMC4yNDg5OSw1LjkyMTAxdi0wLjAwMgoJCQlsLTYuNzA5OTksMy44NzdjMC4zODEwMS0wLjUzMiwwLjc0Nzk5LTEuMDc2LDEuMTA1OTktMS42M2MwLjAzNC0wLjA0OSwwLjA2Njk5LTAuMDk5LDAuMTAwMDEtMC4xNDkKCQkJYzAuMzQ2OTgtMC41NDEsMC42ODM5OS0xLjA5Mzk5LDEuMDEwOTktMS42NTQwMWMwLjAzNjk5LTAuMDYxLDAuMDcxOTktMC4xMjEsMC4xMDkwMS0wLjE4MwoJCQljMC4zMjgtMC41NjU5OSwwLjY0NDAxLTEuMTQzMDEsMC45NTItMS43M2MwLjAyNi0wLjA0OSwwLjA1Mi0wLjEwMDAxLDAuMDc4LTAuMTQ5YzAuMzE1LTAuNjA4LDAuNjIxLTEuMjI1MDEsMC45MTY5OS0xLjg1NgoJCQljMC4wMDI5OS0wLjAwOCwwLjAwNjAxLTAuMDE2MDEsMC4wMTA5OS0wLjAyMjk5YzEuNzk1MDEtMy44NTEsMy4xODIwMS04LjA5OSw0LjEyNzAxLTEyLjcxNQoJCQljMC4wMzEwMS0wLjE0OSwwLjA2Mjk5LTAuMjk2MDEsMC4wOTI5OS0wLjQ0NmMwLjExODAxLTAuNTk1LDAuMjIyOTktMS4xOTcwMSwwLjMyNy0xLjgwNAoJCQljMC4wNDU5OS0wLjI2MywwLjA5LTAuNTI2LDAuMTMxOTktMC43OTIwMWMwLjA4NDk5LTAuNTQyMDEsMC4xNjUwMS0xLjA4OSwwLjI0MS0xLjY0MTAxCgkJCWMwLjA0OC0wLjM1MDAxLDAuMDkyMDEtMC43MDM5OSwwLjEzMy0xLjA1OGMwLjA2LTAuNDk2OTksMC4xMTYtMC45OTYsMC4xNjY5OS0xLjVjMC4wNDUwMS0wLjQzNiwwLjA4MDk5LTAuODc3LDAuMTE4MDEtMS4zMTkKCQkJYzAuMDM2OTktMC40NDcwMSwwLjA3NTAxLTAuODkyLDAuMTA1OTktMS4zNDM5OWMwLjAzNjk5LTAuNTU0OTksMC4wNjEtMS4xMTgsMC4wODcwMS0xLjY4MQoJCQljMC4wMTU5OS0wLjM1OCwwLjAzNjk5LTAuNzExLDAuMDQ5MDEtMS4wNzNjMC4wMzEwMS0wLjkzOSwwLjA0OTAxLTEuODg2LDAuMDQ5MDEtMi44NDU5OQoJCQljMC00OS40NDgtNDAuMTY1MDEtMTEyLjg2Ni04OS41MzE5OC0xNDEuMzY3Yy0yLjk2ODk5LTEuNzE0LTUuOTI4OTktMy4yNzYtOC44NzIwMS00LjY4NAoJCQljLTAuNjY1OTktMC4zMTgtMS4zMjkwMS0wLjYxNy0xLjk5MzAxLTAuOTIxYy0wLjMxMjk5LTAuMTQzLTAuNjI3OTktMC4yOTUtMC45NDEwMS0wLjQzNQoJCQljLTExLjcxNzAxLTUuMjE2LTIzLjA3NTk5LTcuOTM2LTMzLjM2NDk5LTcuOTM2Yy0xLjAyMiwwLTIuMDI3MDEsMC4wMzQtMy4wMTk5OSwwLjA4NWMtMC4xNDQ5OSwwLjAwOC0wLjI4Njk5LDAuMDItMC40MzEsMC4wMjkKCQkJYy0wLjg0NSwwLjA1MS0xLjY4MSwwLjExOS0yLjUwNSwwLjIwOGMtMC4wNzcsMC4wMDgtMC4xNTcwMSwwLjAxLTAuMjMzLDAuMDE5TDI3My4xNDAwMSwxOC4xNHogTTM1NS42MzgsMjMxLjAzNzk5CgkJCWMtMC4zMjgsMC4wMTgwMS0wLjY1Nzk5LDAuMDM2LTAuOTg5OTksMC4wNDljLTAuNjAxOTksMC4wMjItMS4yMDU5OSwwLjAzNy0xLjgxOSwwLjAzOTk5Yy0wLjA4NDAxLDAtMC4xNjgsMC4wMDQtMC4yNTQsMC4wMDQKCQkJYy0xMC40ODMsMC4wMDEwMS0yMi4xOTkwMS0zLjAwOC0zNC4zMDg5OS04Ljc1MTAxYy0xLjAzOS0wLjQ5My0yLjA4MDk5LTEuMDAyLTMuMTI2MDEtMS41MzYKCQkJYy0wLjA0OTAxLTAuMDI0OTktMC4wOTc5OS0wLjA0OS0wLjE0Ny0wLjA3NDAxYy0wLjI3Ni0wLjE0Mi0wLjU1Mi0wLjI5NDAxLTAuODI5OTktMC40MzkKCQkJYy0xLjYyMS0wLjg0NS0zLjI0NzAxLTEuNzI5LTQuODc3OTktMi42N2MtMS4wMDgtMC41ODA5OS0yLjAxMDk5LTEuMTg1LTMuMDE1MDEtMS43OTgKCQkJYy0wLjI1OC0wLjE1Ny0wLjUxNTk5LTAuMzE1OTktMC43NzMwMS0wLjQ3NmMtMC45NzY5OS0wLjYwNS0xLjk1My0xLjIyMDk5LTIuOTI0MDEtMS44NTUKCQkJYy0wLjEwOTAxLTAuMDcxLTAuMjE2LTAuMTQ1LTAuMzI1MDEtMC4yMTZjLTAuODcyMDEtMC41NzIwMS0xLjc0MS0xLjE1OS0yLjYwNjk5LTEuNzU0Yy0wLjMyMTAxLTAuMjItMC42NDItMC40NDItMC45NjMwMS0wLjY2NgoJCQljLTAuODQxLTAuNTg4LTEuNjgxLTEuMTg1LTIuNTE4MDEtMS43OTNjLTAuMzQ5LTAuMjU1LTAuNjk4LTAuNTE1LTEuMDQ3LTAuNzcyOTljLTAuNjQyLTAuNDc2LTEuMjg1LTAuOTU3OTktMS45MjMtMS40NDYKCQkJYy0wLjQxMTk5LTAuMzE0LTAuODI1MDEtMC42My0xLjIzNDk5LTAuOTQ5MDFjLTAuNjgxLTAuNTMtMS4zNTkwMS0xLjA2Nzk5LTIuMDM2MDEtMS42MTA5OQoJCQljLTAuNTU3MDEtMC40NDgtMS4xMTItMC45MDE5OS0xLjY2NTk5LTEuMzU4Yy0wLjQ2MjAxLTAuMzgyLTAuOTI0OTktMC43NjUtMS4zODY5OS0xLjE1NDAxCgkJCWMtMC40NzktMC40MDMtMC45NTctMC44MDYtMS40MzMwMS0xLjIxNWMtMC42NjEwMS0wLjU3MDAxLTEuMzIwMDEtMS4xNDUtMS45NzY5OS0xLjcyNzAxCgkJCWMtMC41NDgtMC40ODctMS4wOTM5OS0wLjk4LTEuNjQwMDEtMS40NzRjLTAuNDA3OTktMC4zNzEtMC44MTYwMS0wLjc0My0xLjIyMTk4LTEuMTJjLTAuNDcxOTgtMC40MzYtMC45NDI5OS0wLjg3LTEuNDExMDEtMS4zMTIKCQkJYy0wLjcxODk5LTAuNjc3OTktMS40MzUtMS4zNjYtMi4xNDgwMS0yLjA2MWMtMC40Mjk5OS0wLjQxOC0wLjg1Njk5LTAuODQyLTEuMjgyOTktMS4yNjUKCQkJYy0wLjUwNjAxLTAuNTAyLTEuMDA5LTEuMDA4LTEuNTEwOTktMS41MTgwMWMtMC40MjA5OS0wLjQyNy0wLjg0MS0wLjg1NS0xLjI1OS0xLjI4NgoJCQljLTAuNzA5MDEtMC43MzM5OS0xLjQxNC0xLjQ3NC0yLjExNDk5LTIuMjIzMDFjLTAuMzAyLTAuMzIwMDEtMC42MDEwMS0wLjY0MzAxLTAuODk4OTktMC45NjYKCQkJYy0wLjgyOTk5LTAuODk3OTktMS42NTYwMS0xLjgwMDk5LTIuNDc0LTIuNzE4OTljLTAuMDgyLTAuMDkyLTAuMTY0LTAuMTg2LTAuMjQ1LTAuMjc4CgkJCWMtMC44NDY5OC0wLjk1Mzk5LTEuNjg3MDEtMS45MTkwMS0yLjUyMS0yLjg5NWMtMC4xMTctMC4xMzgtMC4yMzU5OS0wLjI3NDk5LTAuMzUzLTAuNDEyOTkKCQkJYy0wLjkxNTAxLTEuMDc2LTEuODIzLTIuMTY0OTktMi43MjE5OC0zLjI2NjAxYy0wLjAxMTk5LTAuMDE1LTAuMDIzMDEtMC4wMjkwMS0wLjAzNS0wLjA0NQoJCQljLTAuOTM5LTEuMTUxOTktMS44Njg5OS0yLjMxNzk5LTIuNzg3OTktMy40OTY5OXYtMC4yMDVsLTAuNDkxLTAuNDI1Yy0wLjIzNTk5LTAuMzA2LTAuNDY4OTktMC42MTItMC43MDMtMC45MTgKCQkJYy0wLjM1OTk5LTAuNDcwOTktMC43MTc5OS0wLjk0Mi0xLjA3NTAxLTEuNDE3MDFjLTAuMjgtMC4zNzMtMC41NTg5OS0wLjc0Njk5LTAuODM1MDEtMS4xMjMKCQkJYy0wLjM1NS0wLjQ4LTAuNzA3OTktMC45NjIwMS0xLjA2MS0xLjQ0NTAxYy0wLjI3Mi0wLjM3Mzk5LTAuNTQyMDEtMC43NDY5OS0wLjgxMi0xLjEyMwoJCQljLTAuMzU4OTktMC41MDEwMS0wLjcxMy0xLjAwNC0xLjA2NTk5LTEuNTA3Yy0wLjI1Mi0wLjM1OC0wLjUwNy0wLjcxNS0wLjc1Ni0xLjA3NDAxYy0wLjU1OTAxLTAuODA0LTEuMTEwOTktMS42MTItMS42NTUtMi40MgoJCQljLTE3LjY0NC0yNi4yMDUtMjguNzM4MDEtNTUuNy0yOC43MzgwMS04MS4zMjljMC0yMi4zMjgsOC4zMTc5OS0zOC4xNCwyMi45ODktNDUuMThsMC4wMzMsMC4wNjIKCQkJYzUuNjk5MDEtMi43NjIsMTIuMjQ4OTktNC4xNjMsMTkuNDY3OTktNC4xNjNjMTAuNjA4LDAsMjIuNDc2OTksMy4wNzQsMzQuNzM4OTgsOC45NTNjMS44MzgwMSwwLjg4MSwzLjY4Mzk5LDEuODI2LDUuNTM0LDIuODMxCgkJCWMwLjA0OTk5LDAuMDI3LDAuMTAwMDEsMC4wNTIsMC4xNDk5OSwwLjA4YzAuOTUyLDAuNTE4LDEuOTAzOTksMS4wNTIsMi44NTY5OSwxLjYwMwoJCQljNDguMzMyLDI3LjkwNCw4Ny42NTEsODkuODU5OTksODcuNjUxLDEzOC4xMTA5OWMwLDEuMTE4LTAuMDI3MDEsMi4yMTUtMC4wNjksMy4zYy0wLjAxMywwLjM1My0wLjAzNCwwLjcwMS0wLjA0OTk5LDEuMDUwOTkKCQkJYy0wLjAzNzk5LDAuNzM1OTktMC4wODQwMSwxLjQ2NC0wLjE0MDk5LDIuMTg0MDFjLTAuMDMxMDEsMC4zODgtMC4wNjI5OSwwLjc3NDk5LTAuMDk3OTksMS4xNTgKCQkJYy0wLjA2OSwwLjcyOC0wLjE0OTk5LDEuNDQ1MDEtMC4yMzkwMSwyLjE1NWMtMC4wNDAwMSwwLjMxNC0wLjA3MTk5LDAuNjM0LTAuMTE0MDEsMC45NDUwMQoJCQljLTAuMTM1OTksMC45OC0wLjI4OSwxLjk0NTAxLTAuNDYyMDEsMi44OTMwMWMtMC4wNDgsMC4yNTQtMC4xMDMsMC41MDEwMS0wLjE1MSwwLjc1MmMtMC4xNDQwMSwwLjczOS0wLjI5OCwxLjQ3MDk5LTAuNDY3MDEsMi4xOQoJCQljLTAuMDY2MDEsMC4yNzY5OS0wLjEzMywwLjU1Mjk5LTAuMjAyLDAuODI4Yy0wLjE5MTAxLDAuNzY3LTAuMzk0OTksMS41MjQ5OS0wLjYxMzAxLDIuMjY4MDEKCQkJYy0wLjA0NTAxLDAuMTQ3OTktMC4wODQ5OSwwLjI5OS0wLjEyNzk5LDAuNDQ3MDFjLTIuOTc5LDkuNzg5LTguMzU1MDEsMTcuNDA1LTE1Ljk2MzAxLDIyLjQ2NgoJCQljLTAuMDAyOTksMC4wMDMwMS0wLjAwOCwwLjAwNi0wLjAxMywwLjAwOWMtNC44NzksMy4yNDYtMTAuNTUwOTksNS4zMjUtMTYuODYwOTksNi4xODUKCQkJYy0wLjk1MDAxLDAuMTI4MDEtMS45MjIsMC4yMjUwMS0yLjkwMzk5LDAuM0MzNTYuMjY3LDIzMC45OTgsMzU1Ljk1NDk5LDIzMS4wMiwzNTUuNjM4LDIzMS4wMzc5OXogTTI0Ni42NDYsMTY1LjMwNzAxCgkJCWwwLjE0MzAxLTAuMDljMC40MjktMC4yOTksMC44NzgwMS0wLjU5ODAxLDEuMzY1MDEtMC45MDhjMS41MjkwMSwyLjIzNSwzLjExNCw0LjQ1NTk5LDQuNzM4MDEsNi42NDMwMQoJCQljLTAuODM4LTAuMDUyLTEuNjYyOTktMC4wNzgtMi40OTEtMC4xMDZjLTAuMzU2LTAuMDEzLTAuNzE4LTAuMDM3OTktMS4wNzMtMC4wNDYwMWMtMS4xOTYtMC4wMjQ5OS0yLjM3OS0wLjAyNi0zLjU0NywwCgkJCWwtMC42MDg5OSwwLjAyYy0wLjk3MDk5LDAuMDI5MDEtMS45Mjk5OSwwLjA3Ny0yLjg4MSwwLjE0MzAxbC0wLjcwMzk5LDAuMDQ4Yy0xLjA4OSwwLjA4NTAxLTIuMTczLDAuMTk1MDEtMy4yNDgsMC4zMjcKCQkJYy0wLjM0NTk5LDAuMDQ0MDEtMC42ODQwMSwwLjEwMy0xLjAyOTAxLDAuMTQ5OTljLTAuNjc3OTksMC4wOTUtMS4zNjA5OSwwLjE4My0yLjAyNjk5LDAuMjk1TDI0Ni42NDYsMTY1LjMwNzAxegoJCQkgTTQyOC4yMDU5OSw1NDYuODc1TDE4OC40ODUsNDA4LjQ3NFYyNDIuOTU1OTljMC0yOS44NDYwMSwxMS4wMzc5OS01MS45MTUwMSwzMS4wODA5OS02Mi4xNDJsMC4zMDItMC4xNTcKCQkJYzAuMTMtMC4wNjksMC4yNTktMC4xMzY5OSwwLjM5MzAxLTAuMjAyYzAuNzY1LTAuMzc1LDEuNTg4LTAuNzU0LDIuNDQ5MDEtMS4xMjM5OWMwLjE3OS0wLjA3NywwLjM2LTAuMTQ5OTksMC41NDEtMC4yMjIKCQkJbDAuMjgtMC4xMTRjMC42MTgtMC4yNTQsMS4yNDMtMC40OTY5OSwxLjg3NjAxLTAuNzNjMC4yOTgtMC4xMSwwLjU5NS0wLjIxODk5LDAuODk0LTAuMzIzCgkJCWMwLjc2NjAxLTAuMjY2MDEsMS41Mzk5OS0wLjUxOSwyLjMzLTAuNzU1bDAuMzk5LTAuMTI1YzAuODczOTktMC4yNTUsMS43OTYwMS0wLjQ5OCwyLjgxOS0wLjc0M2wwLjc2OS0wLjE3MwoJCQljMC43NTEwMS0wLjE2OTAxLDEuNTA3LTAuMzI2LDIuMjc0LTAuNDY4OTlsMC43NzYtMC4xNDMwMWMwLjI4My0wLjA0OSwwLjU3Ny0wLjA4MiwwLjg2MzAxLTAuMTI4MDEKCQkJYzAuNzM1LTAuMTE3LDEuNDY4LTAuMjM3LDIuMjE1LTAuMzI4OTljMS4wMzUtMC4xMjgwMSwyLjA4Mi0wLjIzMzk5LDMuMTM2LTAuMzE3bDAuNjY3MDEtMC4wNDUKCQkJYzAuOTAzLTAuMDYyLDEuODE0LTAuMTA2OTksMi43MzctMC4xMzQ5OWwwLjI5MS0wLjAwOTk5bDAuMjkxLTAuMDA5YzIuMDQ3LTAuMDQ1LDQuMTYsMC4wMDMwMSw2LjI4NiwwLjEyNQoJCQljMC4xOTA5OSwwLjAxMSwwLjM4MSwwLjAxMywwLjU3MywwLjAyNGwwLjU1NDk5LDAuMDM5OTljMC44ODYsMC4wNjMsMS43ODIsMC4xNDcsMi42ODMsMC4yNDAwMQoJCQljMTEuNzY2MDEsMTUuMDY3OTksMjUuMTU4LDI4LjAxOSwzOS4yODA5OSwzOC4wNzg5OWMwLjM0Nzk5LDAuMjQ4OTksMC42OTYwMSwwLjQ5ODk5LDEuMDQ1OTksMC43NDMKCQkJYzAuNDk4OTksMC4zNTAwMSwwLjk5Nzk5LDAuNjk3MDEsMS41LDEuMDM5YzAuNjc3LDAuNDY0LDEuMzU1MDEsMC45MTkwMSwyLjAzNjAxLDEuMzY5YzAuMzU1MDEsMC4yMzUsMC43MDkwMSwwLjQ3LDEuMDY1LDAuNwoJCQljMC44NjQ5OSwwLjU2MywxLjczMywxLjExMiwyLjYwNCwxLjY1MTk5YzAuMjg1LDAuMTc3LDAuNTcxOTksMC4zNTMsMC44NTgsMC41MjhjMS4wMTMsMC42MTksMi4wMjgwMiwxLjIyOCwzLjA0OTAxLDEuODE3OTkKCQkJYzEuMDc5OTksMC42MjM5OSwyLjE1Nzk5LDEuMjIzMDEsMy4yMzU5OSwxLjgwNmMwLjMyMDAxLDAuMTczLDAuNjM5MDEsMC4zMzgsMC45NTk5OSwwLjUwNgoJCQljMC43NjcsMC40MDgsMS41MzUsMC44MDkwMSwyLjMwMiwxLjE5NmMwLjM0Nzk5LDAuMTc1LDAuNjk2OTksMC4zNDM5OSwxLjA0NDAxLDAuNTE2MDEKCQkJYzAuNzYwMDEsMC4zNzM5OSwxLjUxODAxLDAuNzQwMDEsMi4yNzQ5OSwxLjA5Mzk5YzAuMzE0LDAuMTQ3LDAuNjI3OTksMC4yOTEsMC45NCwwLjQzNDAxCgkJCWMwLjgyOTk5LDAuMzc5LDEuNjU3OTksMC43NDYsMi40ODU5OSwxLjEwMDAxYzAuMjI4LDAuMDk4MDEsMC40NTgwMSwwLjE5OCwwLjY4NzAxLDAuMjk1CgkJCWMxLjAyNiwwLjQzMjAxLDIuMDQ3LDAuODQ1LDMuMDY2MDEsMS4yMzgwMWMwLjAyNDk5LDAuMDA5OTksMC4wNDkwMSwwLjAyLDAuMDc1OTksMC4wMwoJCQljOS44NDY5OCwzLjc4Nzk5LDE5LjM1OTk5LDUuNzU4LDI4LjEwMTAxLDUuNzU4YzAuMTg1LDAsMC4zNjQwMS0wLjAxMSwwLjU0OTAxLTAuMDEzYzAuMTAzLTAuMDAxMDEsMC4yMDctMC4wMDUsMC4zMS0wLjAwNwoJCQljMC44MjMtMC4wMTMsMS42NDA5OS0wLjAzOTk5LDIuNDQ1MDEtMC4wODUwMWMwLjIzNTk5LTAuMDEzLDAuNDctMC4wMzIsMC43MDQwMS0wLjA0OWMwLjcwMDAxLTAuMDQ5LDEuMzg5MDEtMC4xMSwyLjA3My0wLjE4MwoJCQljMC4xMTg5OS0wLjAxMywwLjI0Mzk5LTAuMDE4MDEsMC4zNjMwMS0wLjAzMmMwLjg5ODAxLDAuOTQyOTksMS43OTUwMSwxLjg5LDIuNjgzMDEsMi44NDkKCQkJYzAuMDA2MDEsMC4wMDcsMC4wMTMsMC4wMTQwMSwwLjAxOTk5LDAuMDJjMi4yMDQ5OSwyLjM4Niw0LjM3NSw0LjgxNzk5LDYuNTA2OTksNy4yOTQwMWMwLjAwNSwwLjAwNSwwLjAwOSwwLjAwOSwwLjAxMywwLjAxNDAxCgkJCWMxLjAzOSwxLjIwNywyLjA3MTAxLDIuNDI1OTksMy4wOTEsMy42NTE5OWMwLjAzMTAxLDAuMDM3OTksMC4wNjI5OSwwLjA3NDAxLDAuMDkyOTksMC4xMTIKCQkJYzAuOTc5LDEuMTc3OTksMS45NDgsMi4zNjcsMi45MDksMy41NjJjMC4wNzEwMSwwLjA4OSwwLjE0MzAxLDAuMTc1LDAuMjEzOTksMC4yNjNjMC45MTE5OSwxLjEzNjk5LDEuODEyOTksMi4yODQsMi43MDgwMSwzLjQzNgoJCQljMC4xMTQwMSwwLjE0NywwLjIzMDk5LDAuMjkyMDEsMC4zNDUsMC40Mzk5OWMwLjg1OTk5LDEuMTEyLDEuNzA4MDEsMi4yMzE5OSwyLjU1MiwzLjM1NTk5CgkJCWMwLjE0MDk5LDAuMTg3OTksMC4yODQsMC4zNzI5OSwwLjQyNDk5LDAuNTYyMDFjMC45NzgsMS4zMDgwMSwxLjk0Mjk5LDIuNjI1LDIuODk2LDMuOTUwMDFsMC4xMjcwMSwwLjE3NTk5bDAuMDAyMDEsMC4wMDIwMQoJCQljMi4wODcwMSwyLjkwMzAyLDQuMTYxMDEsNS45MDksNi4xNjY5OSw4LjkzNWwwLjEzMTk5LDAuMjAwMDFjMS45OTIsMy4wMTE5OSwzLjk0Mjk5LDYuMDkyMDEsNS44MSw5LjE2Njk5bDAuMTk2MDEsMC4zMjQwMQoJCQljMS44NCwzLjAzNjk5LDMuNjMzLDYuMTM2OTksNS4zNDIwMSw5LjIyOGwwLjIyLDAuNDAyMDFjMC44MjE5OSwxLjQ5MiwxLjYzMTAxLDIuOTg3LDIuNDE5MDEsNC40ODgwMWwwLjAyNzAxLDAuMDUwOTkKCQkJbDAuMDQ1MDEsMC4wODQ5OWMwLjgxNCwxLjU0OTk5LDEuNjA4LDMuMTAzLDIuMzg5MDEsNC42NjRsMC4yMDcsMC40MThjMC43MTYsMS40MzYsMS40MTQsMi44NzUsMi4wOTc5OSw0LjMxNjAxbDAuMjAyLDAuNDI0OTkKCQkJYzAuNzI5LDEuNTQ1OTksMS40NDE5OSwzLjA5Mjk5LDIuMTI2MDEsNC42MjIwMWwwLjE2MTk5LDAuMzcyMDFjMC42Mjc5OSwxLjQwNzk5LDEuMjM1OTksMi44MTY5OSwxLjgyNyw0LjIxNzAxbDAuMjk4LDAuNzA3CgkJCWMwLjY0MDk5LDEuNTI4OTksMS4yNjUwMSwzLjA1ODAxLDEuODY3LDQuNTg4MDFsMS43NDg5OS0wLjY4NzAxbC0xLjY5MTAxLDAuODM3MDFjMC41NjUsMS40Mzc5OSwxLjEwOTAxLDIuODc3OTksMS42NDA5OSw0LjMxNQoJCQlsMC4zMjMsMC44NzVjMS4wODIsMi45NywyLjEwMyw1Ljk3NCwzLjAzMTAxLDguOTIwOTlsMC4zMDMwMSwwLjk3MTAxYzAuNDI3LDEuMzg0LDAuODQxLDIuNzYzLDEuMjMzLDQuMTMzbDAuMDg4OTksMC4yOTk5OQoJCQljMC40MTU5OSwxLjQ2NiwwLjgwODk5LDIuOTI3LDEuMTg3OTksNC4zODkwMWwwLjI1MTAxLDAuOTg5OTljMC4zMTY5OSwxLjI0NzAxLDAuNjE4MDEsMi40OTEsMC45MDM5OSwzLjcyOWwwLjE2Njk5LDAuNzIxOTgKCQkJYzAuMzI0MDEsMS40Mjg5OSwwLjYyNzk5LDIuODU4LDAuOTExOTksNC4yNzQ5OWwwLjE4MjAxLDAuOTQ0YzAuMjMwMDEsMS4xODYsMC40NDUwMSwyLjM2NywwLjY0NywzLjUzNjAxbDAuMTY0LDAuOTQ5MDEKCQkJYzAuMjMwOTksMS4zOTk5OSwwLjQ0NTAxLDIuNzk3LDAuNjM4LDQuMjAwMDFsMC4xMDEwMSwwLjc5MDk5YzAuMTU2MDEsMS4xNzA5OSwwLjI5NywyLjMzNDk5LDAuNDIyLDMuNDg3bDAuMTE0MDEsMS4wNTQ5OQoJCQljMC4xMzgsMS4zNzksMC4yNjE5OSwyLjc1MjAxLDAuMzU4LDQuMTE4MDFsMC4wMzQsMC41MTk5OWMwLjA4MDk5LDEuMjA5MDEsMC4xNDQwMSwyLjQxMTAxLDAuMTk0LDMuNjM1OTkKCQkJYzAuMDE0MDEsMC4zNTAwMSwwLjAyNzAxLDAuNzAyLDAuMDM3OTksMS4wNTQ5OWMwLjA0OTk5LDEuNTgwOTksMC4wNzUwMSwyLjg2NiwwLjA3NTAxLDQuMDQ0MDFMNDI4LjIwNTk5LDU0Ni44NzUKCQkJTDQyOC4yMDU5OSw1NDYuODc1eiBNNDYxLjM1NTAxLDUyOS45Mjk5OUw0MzEuOTY2LDU0Ni44NzcwMVYzODMuNTI4OTljMC0xLjIyLTAuMDIzMDEtMi41NDUwMS0wLjA3NTAxLTQuMTYyOTkKCQkJYy0wLjAxMy0wLjM2ODk5LTAuMDI2LTAuNzM5MDEtMC4wNDE5OS0xLjEwOTAxYy0wLjA0OTk5LTEuMjM0OTktMC4xMTQwMS0yLjQ3MTAxLTAuMjAwOTktMy43MjhsLTAuMDMyMDEtMC41MjYKCQkJYy0wLjEwMTAxLTEuMzk5OTktMC4yMjYwMS0yLjgwODAxLTAuMzY4OTktNC4yMjlsLTAuMTE0MDEtMS4wNzEwMWMtMC4wNjYwMS0wLjU5NS0wLjE0Ni0xLjE5MTk5LTAuMjE1LTEuNzg5CgkJCWMtMC4wNzQwMS0wLjU5Njk4LTAuMTM4LTEuMTkyOTktMC4yMTcwMS0xLjc4OWwtMC4wMzIwMS0wLjI1OWMtMC4wMjM5OS0wLjE5MTAxLTAuMDQ5MDEtMC4zODE5OS0wLjA3NTAxLTAuNTY1CgkJCWMtMC4xOTQtMS40MjU5OS0wLjQxMjk5LTIuODU2OTktMC42NTIwMS00LjI5N2wtMC4xNjUwMS0wLjk2MWMtMC4yMDgwMS0xLjIwMy0wLjQyODk5LTIuNDA3OTktMC42NjQtMy42MjVsLTAuMTg1LTAuOTU3CgkJCWMtMC4yOTA5OS0xLjQ1NDk5LTAuNjAxOTktMi45MTQtMC45MzIwMS00LjM3Nzk5bC0wLjA4NDAxLTAuMzY0MDFsLTAuMDg0OTktMC4zNjcKCQkJYy0wLjI5NDAxLTEuMjY3LTAuNjAxOTktMi41MzY5OS0wLjkyNDAxLTMuODEyMDFsLTAuMjU1LTEuMDA2OTljLTAuMzg1MDEtMS40ODkwMS0wLjc4Njk5LTIuOTc5LTEuMjA5MDEtNC40Njc5OQoJCQlsLTAuMDg4OTktMC4zMDQ5OWMtMC40MDMwMi0xLjQwMzAyLTAuODI1MDEtMi44MTEtMS4yNjA5OS00LjIyMTAxbC0wLjMwNi0wLjk4MTk5Yy0wLjk0Njk5LTMuMDA1LTEuOTg1OTktNi4wNjEtMy4wODg5OS05LjA5MQoJCQlsLTAuMzI3LTAuODhjLTAuNTQwMDEtMS40NjMwMS0xLjA5Mzk5LTIuOTI0OTktMS42OTEwMS00LjQ1MmwtMC4wMzUtMC4wODg5OWMtMC42MDk5OS0xLjU1Ni0xLjI0Ni0zLjExMi0xLjg5Ni00LjY2MTAxCgkJCWwtMC4yOTk5OS0wLjcxMzk5Yy0wLjYwNTk5LTEuNDMyMDEtMS4yMjUwMS0yLjg2Mi0xLjg2Mi00LjI5OGwtMC4xNTM5OS0wLjM1MTk5Yy0wLjcwNDAxLTEuNTcxOTktMS40MjU5OS0zLjE0Mi0yLjE1OS00LjY5Njk5CgkJCWwtMC4yMTIwMS0wLjQ0Njk5Yy0wLjY5Mjk5LTEuNDYyMDEtMS40MDMwMi0yLjkyMi0yLjEyMzk5LTQuMzczOTlsLTAuMjE1LTAuNDMyMDEKCQkJYy0wLjc4MjAxLTEuNTY1LTEuNTgwOTktMy4xMjYwMS0yLjM5ODAxLTQuNjgzOTlsLTAuMDcxOTktMC4xMzUwMWMtMC44MDYtMS41Mzc5OS0xLjYzNTk5LTMuMDcwMDEtMi40NzYwMS00LjU5NjAxCgkJCWwtMC4yMzQwMS0wLjQyNDk5Yy0wLjc2MTk5LTEuMzgtMS41NDk5OS0yLjc2NDAxLTIuMzQ2MDEtNC4xNDZjLTEuMDAyMDEtMS43NDEtMi4wMTk5OS0zLjQ3Njk5LTMuMDU3MDEtNS4xOWwtMC4wMDI5OS0wLjAwNQoJCQljLTAuMDAyMDEtMC4wMDEwMS0wLjAwMjAxLTAuMDAyMDEtMC4wMDI5OS0wLjAwNGwtMC4yMDQwMS0wLjMzNmMtMS4zMDM5OS0yLjE0Ny0yLjY2MTk5LTQuMjk3LTQuMDQwMDEtNi40MzUKCQkJYy0wLjYxMi0wLjk1MDAxLTEuMjItMS45MDUtMS44NDEtMi44NDM5OWwtMC4xMzMtMC4yMDA5OWMtMS4wMjYtMS41NDctMi4wNzEwMS0zLjA5MjAxLTMuMTI2MDEtNC42MjIwMQoJCQljLTEuMDU2LTEuNTI4OTktMi4xMjEtMy4wNDA5OS0zLjE5LTQuNTI3MDFsLTAuMTE0MDEtMC4xOTUwMWwtMC4wNzQwMS0wLjA2NjAxYy0wLjkyNDAxLTEuMjgxMDEtMS44NjA5OS0yLjU1Mzk5LTIuODA0OTktMy44MjAwMQoJCQljLTAuMzczOTktMC41LTAuNzU0LTAuOTkzMDEtMS4xMzEwMS0xLjQ4OTk5Yy0wLjU2Nzk5LTAuNzUyLTEuMTM2OTktMS41MDUtMS43MTMwMS0yLjI1MTAxCgkJCWMtMC40ODMtMC42MjYwMS0wLjk3Mjk5LTEuMjQ1LTEuNDYxLTEuODY2Yy0wLjQ3NC0wLjYwNS0wLjk0OTAxLTEuMjEwMDEtMS40Mjg5OS0xLjgxMWMtMC41NDgtMC42ODktMS4xMDMtMS4zNzEtMS42NTktMi4wNTQKCQkJYy0wLjQyMi0wLjUxNjAxLTAuODQxLTEuMDM0LTEuMjY1MDEtMS41NDhjLTAuNjA2OTktMC43MzUtMS4yMTc5OS0xLjQ2Ni0xLjgzMi0yLjE5NAoJCQljLTAuMzczOTktMC40NDI5OS0wLjc0Nzk5LTAuODg2OTktMS4xMjUtMS4zMjdjLTAuNjYxMDEtMC43NzYtMS4zMjU5OS0xLjU0OC0xLjk5NS0yLjMxNTk5CgkJCWMtMC4zMjU5OS0wLjM3Mzk5LTAuNjUzMDItMC43NDYtMC45NzktMS4xMTdjLTAuNzE4OTktMC44MTU5OS0xLjQ0MTk5LTEuNjI5LTIuMTY5MDEtMi40MzYKCQkJYy0wLjI3MS0wLjMwMDk5LTAuNTQ1MDEtMC42MDAwMS0wLjgxNjk5LTAuODk5Yy0wLjc4LTAuODU4OTktMS41NjQtMS43MTUtMi4zNTUwMS0yLjU2MwoJCQljLTAuMDUzMDEtMC4wNTcwMS0wLjEwNTk5LTAuMTE3LTAuMTU5LTAuMTc1YzAuMTAzLTAuMDIxLDAuMjA0MDEtMC4wNDksMC4zMDYtMC4wNzEKCQkJYzQuNjczLTEuMDExOTksOC45NDkwMS0yLjY3NCwxMi43ODEwMS00Ljk0MDk5bDAuMDU4MDEsMC4wNzg5OXYtMC4wMDEwMWwyLjUxNy0xLjQ1M2wxNS43MzAwMS05LjA5CgkJCWM0MS4wMTgwMSw0NC4zNzMwMiw2Ni40NDk5OCwxMDAuMjMwOTksNjYuNDQ5OTgsMTQ2LjA5NTk4djE2NS41MTkwNEg0NjEuMzU1MDF6Ii8+Cgk8L2c+Cgk8cGF0aCBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBkPSJNNDcyLjYzNjk5LDUzNi40NDcwMmMwLDAsODcuOTA3OTktMzYuMzY0OTksNjUuMzE2MDEtMTAxLjIzNDAxCgkJYzEwMC43NjMtMzkuNzY3LDEyLjAzNjk5LTEzMy40Mjk5OS03Mi4xMjEtMTA1LjgzNDk5TDQ3Mi42MzY5OSw1MzYuNDQ3MDJ6Ii8+CjwvZz4KPC9zdmc+Cg==\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n },\n {\n \"id\": \"vm\",\n \"name\": \"vm\",\n \"url\": \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI5MS42cHgiIGhlaWdodD0iODQuNHB4IiB2aWV3Qm94PSIwIDAgOTEuNiA4NC40IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA5MS42IDg0LjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfNCI+Cgk8Zz4KCQk8cGF0aCBkPSJNNDMuNywzLjVsMjkuOCwxOC4xdjM2LjlsLTI5LjksMThMMTQuMSw1OC4zVjIxLjJMNDMuNywzLjUgTTQzLjcsMmMtMC4zLDAtMC41LDAuMS0wLjgsMC4yTDEzLjMsMTkuOQoJCQljLTAuNSwwLjMtMC43LDAuOC0wLjcsMS4zdjM3LjFjMCwwLjUsMC4zLDEsMC43LDEuM2wyOS41LDE4LjJjMC4yLDAuMSwwLjUsMC4yLDAuOCwwLjJzMC41LTAuMSwwLjgtMC4ybDI5LjktMTgKCQkJYzAuNS0wLjMsMC43LTAuOCwwLjctMS4zVjIxLjZjMC0wLjUtMC4zLTEtMC43LTEuM0w0NC41LDIuMkM0NC4zLDIuMSw0NCwyLDQzLjcsMkw0My43LDJ6Ii8+Cgk8L2c+Cgk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiM0RjY1ODciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjQzLjYsNzYuNSAxNC4xLDU4LjMgNDMuNyw0MC42IDczLjUsNTguNSAJIi8+Cgk8cG9seWdvbiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI0My43LDMuNSA3My41LDIxLjYgNzMuNSw1OC41IAoJCTQzLjcsNDAuNiAJIi8+Cgk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiM0RjY1ODciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjQzLjcsMy41IDczLjUsMjEuNiA3My41LDU4LjUgNDMuNyw0MC42IAkiLz4KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjQzLjYsNzYuNSAxNC4xLDU4LjMgNDMuNyw0MC42IAoJCTczLjUsNTguNSAJIi8+Cgk8cG9seWdvbiBvcGFjaXR5PSIwLjQiIGZpbGw9IiM0RjY1ODciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjQzLjcsMy41IDE0LjEsMjEuMyAxNC4xLDU4LjMgNDMuNyw0MC42IAkiLz4KCTxwb2x5Z29uIG9wYWNpdHk9IjAuNCIgZmlsbD0iIzAwMDAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIHBvaW50cz0iNDQuOSw3MS4zIDIyLDU3LjUgNDQuOCw0My44IDY3LjksNTcuNSAJIi8+Cgk8Zz4KCQk8cG9seWdvbiBmaWxsPSIjNEY2NTg3IiBzdHJva2U9IiMwMTAyMDIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI2Ny44LDQxLjggNDMuNiw1Ni41IDQzLjYsNjUuMyAKCQkJNjcuOCw1MC44IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0iI0NFRDhFQiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMTkuNSw0MS44IDQzLjYsNTYuNSA0My42LDY1LjMgCgkJCTE5LjUsNTAuOCAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiNDRUQ4RUIiIHBvaW50cz0iNDMuNiw1Ni40IDE5LjUsNDEuOCA0My40LDI3LjUgNjcuOCw0MS44IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNDMuNiw1Ni40IDE5LjUsNDEuOCA0My40LDI3LjUgCgkJCTY3LjgsNDEuOCAJCSIvPgoJPC9nPgoJPGc+CgkJPHBvbHlnb24gZmlsbD0iIzRGNjU4NyIgc3Ryb2tlPSIjMDEwMjAyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNjcuOCwyOS41IDQzLjYsNDQuMSA0My42LDUzIAoJCQk2Ny44LDM4LjUgCQkiLz4KCQk8cG9seWdvbiBmaWxsPSIjQ0VEOEVCIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIxOS41LDI5LjUgNDMuNiw0NC4xIDQzLjYsNTMgCgkJCTE5LjUsMzguNSAJCSIvPgoJCTxwb2x5Z29uIGZpbGw9IiNDRUQ4RUIiIHBvaW50cz0iNDMuNiw0NC4xIDE5LjUsMjkuNSA0My40LDE1LjEgNjcuOCwyOS41IAkJIi8+CgkJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNDMuNiw0NC4xIDE5LjUsMjkuNSA0My40LDE1LjEgCgkJCTY3LjgsMjkuNSAJCSIvPgoJPC9nPgoJPHBvbHlnb24gb3BhY2l0eT0iMC4zIiBmaWxsPSIjQ0VEOEVCIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSIxNC4xLDIxLjIgNDMuNiwzOS42IDQzLjYsNzYuNSAxNC4xLDU4LjMgCSIvPgoJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI0My43LDYuMSA3MS40LDIyLjkgNzMuNSwyMS42IDQzLjcsMy41IDE0LjEsMjEuMiAxNi4yLDIyLjUgCSIvPgoJPHBvbHlnb24gb3BhY2l0eT0iMC41IiBmaWxsPSIjRURGMEY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSI0My42LDM5LjYgMTQuMSwyMS4yIDQzLjcsMy41IDczLjUsMjEuNiAJIi8+Cgk8cG9seWdvbiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI0My42LDM5LjYgMTQuMSwyMS4yIDQzLjcsMy41IAoJCTczLjUsMjEuNiAJIi8+Cgk8cG9seWxpbmUgb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgcG9pbnRzPSI0My42LDc3LjkgNTkuNSw3Ni44IDkxLjYsNTcuNCA3My41LDQ3LjggNzMuNSw1OC41IAkiLz4KCTxwb2x5bGluZSBvcGFjaXR5PSIwLjQiIGZpbGw9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjQzLjYsNTIuOSA0OS45LDUyLjMgNjcuNiw0MS42IDY1LjEsNDAuMSA0My42LDUyLjkgCSIvPgoJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMTQuMSwyMS4yIDQzLjYsMzkuNiA0My42LDc2LjUgCgkJMTQuMSw1OC4zIAkiLz4KCTxwb2x5Z29uIG9wYWNpdHk9IjAuMyIgZmlsbD0iIzU1NjM3NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIHBvaW50cz0iNzMuNSwyMS42IDQzLjYsMzkuNiA0My42LDc2LjUgNzMuNSw1OC41IAkiLz4KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAxMDIwMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjczLjUsMjEuNiA0My42LDM5LjYgNDMuNiw3Ni41IAoJCTczLjUsNTguNSAJIi8+CjwvZz4KPC9zdmc+Cg==\",\n \"isIsometric\": true,\n \"collection\": \"isoflow\"\n }\n ],\n \"colors\": [\n {\n \"id\": \"blue\",\n \"value\": \"#0066cc\"\n },\n {\n \"id\": \"green\",\n \"value\": \"#00aa00\"\n },\n {\n \"id\": \"red\",\n \"value\": \"#cc0000\"\n },\n {\n \"id\": \"orange\",\n \"value\": \"#ff9900\"\n },\n {\n \"id\": \"purple\",\n \"value\": \"#9900cc\"\n },\n {\n \"id\": \"black\",\n \"value\": \"#000000\"\n },\n {\n \"id\": \"gray\",\n \"value\": \"#666666\"\n }\n ],\n \"items\": [\n {\n \"id\": \"54d3ba45-a798-4001-85c2-dba5ba9d5819\",\n \"name\": \"Card\",\n \"icon\": \"cardterminal\"\n },\n {\n \"id\": \"c7c52bb5-abf6-4f42-aec0-d6ad0257c182\",\n \"name\": \"Untitled\",\n \"icon\": \"block\"\n },\n {\n \"id\": \"064f4d2b-79f0-49ba-9614-9fe28439a0e1\",\n \"name\": \"Untitled\",\n \"icon\": \"cube\"\n }\n ],\n \"views\": [\n {\n \"name\": \"Untitled view\",\n \"items\": [\n {\n \"labelHeight\": 80,\n \"id\": \"064f4d2b-79f0-49ba-9614-9fe28439a0e1\",\n \"tile\": {\n \"x\": 1,\n \"y\": 3\n }\n },\n {\n \"labelHeight\": 80,\n \"id\": \"c7c52bb5-abf6-4f42-aec0-d6ad0257c182\",\n \"tile\": {\n \"x\": 3,\n \"y\": 0\n }\n },\n {\n \"labelHeight\": 100,\n \"id\": \"54d3ba45-a798-4001-85c2-dba5ba9d5819\",\n \"tile\": {\n \"x\": -2,\n \"y\": 1\n }\n }\n ],\n \"connectors\": [\n {\n \"id\": \"7f206f75-c3f4-45da-9ad3-bd62ebd60dfd\",\n \"color\": \"blue\",\n \"anchors\": [\n {\n \"id\": \"2de1c110-3eb0-4c80-a941-05a262fae375\",\n \"ref\": {\n \"item\": \"064f4d2b-79f0-49ba-9614-9fe28439a0e1\"\n }\n },\n {\n \"id\": \"a151977b-0e1c-4a02-9b52-30d524c43170\",\n \"ref\": {\n \"item\": \"c7c52bb5-abf6-4f42-aec0-d6ad0257c182\"\n }\n }\n ],\n \"labels\": [\n {\n \"id\": \"d2126535-0bb7-462f-a4e3-9d471ef90448\",\n \"text\": \"Connector label\",\n \"position\": 30,\n \"height\": 0,\n \"line\": \"1\"\n }\n ]\n },\n {\n \"id\": \"9dc846a3-4090-44e7-99d1-86137c966ad7\",\n \"color\": \"blue\",\n \"anchors\": [\n {\n \"id\": \"7e3dbc1d-6069-4a4e-94ba-1780cf70dcb9\",\n \"ref\": {\n \"item\": \"54d3ba45-a798-4001-85c2-dba5ba9d5819\"\n }\n },\n {\n \"id\": \"04f30198-29f6-4adb-926c-3334907d30b4\",\n \"ref\": {\n \"item\": \"064f4d2b-79f0-49ba-9614-9fe28439a0e1\"\n }\n }\n ]\n }\n ],\n \"rectangles\": [\n {\n \"id\": \"111c0759-af9d-4b1a-96e5-c2272c320e2a\",\n \"color\": \"purple\",\n \"from\": {\n \"x\": 4,\n \"y\": 4\n },\n \"to\": {\n \"x\": 6,\n \"y\": 3\n },\n \"customColor\": \"\"\n }\n ],\n \"textBoxes\": [\n {\n \"orientation\": \"X\",\n \"fontSize\": 0.6,\n \"content\": \"Text\",\n \"id\": \"87d05c9d-4e1b-42c7-9cd4-07fe0d39bba1\",\n \"tile\": {\n \"x\": 0,\n \"y\": 0\n }\n }\n ],\n \"id\": \"1992b58a-9e1b-4f96-88b5-5035de4434b2\",\n \"lastUpdated\": \"2026-02-15T14:23:51.256Z\"\n }\n ],\n \"fitToScreen\": true\n}" }, { "path": "e2e-tests/tests/test_base_path_routing.py", "content": "\"\"\"\nE2E tests for verifying the app works correctly when served from different base paths.\nThis catches issues with React Router and asset loading when deployed to subpaths.\n\"\"\"\nimport os\nimport time\nimport pytest\nfrom selenium import webdriver\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.chrome.options import Options\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\n\n\ndef get_base_url():\n \"\"\"Get the base URL from environment or use default.\"\"\"\n return os.getenv(\"FOSSFLOW_TEST_URL\", \"http://localhost:3000\")\n\n\ndef get_base_path():\n \"\"\"Get the base path from environment.\"\"\"\n return os.getenv(\"FOSSFLOW_BASE_PATH\", \"/\")\n\n\ndef get_webdriver_url():\n \"\"\"Get the WebDriver URL from environment or use default.\"\"\"\n return os.getenv(\"WEBDRIVER_URL\", \"http://localhost:4444\")\n\n\n@pytest.fixture(scope=\"function\")\ndef driver():\n \"\"\"Create a Chrome WebDriver instance for each test.\"\"\"\n chrome_options = Options()\n chrome_options.add_argument(\"--headless=new\")\n chrome_options.add_argument(\"--no-sandbox\")\n chrome_options.add_argument(\"--disable-dev-shm-usage\")\n chrome_options.add_argument(\"--enable-webgl\")\n chrome_options.add_argument(\"--use-gl=swiftshader\")\n chrome_options.add_argument(\"--enable-accelerated-2d-canvas\")\n chrome_options.add_argument(\"--window-size=1920,1080\")\n chrome_options.add_argument(\"--disable-blink-features=AutomationControlled\")\n chrome_options.set_capability('goog:loggingPrefs', {'browser': 'ALL'})\n\n webdriver_url = get_webdriver_url()\n\n driver = webdriver.Remote(\n command_executor=webdriver_url,\n options=chrome_options\n )\n\n driver.implicitly_wait(10)\n\n yield driver\n\n driver.quit()\n\n\ndef test_app_loads_at_base_path(driver):\n \"\"\"Test that the app loads successfully at the configured base path.\"\"\"\n base_url = get_base_url()\n base_path = get_base_path()\n\n print(f\"\\nTesting app at base URL: {base_url}\")\n print(f\"Base path: {base_path}\")\n\n # Navigate to the app\n driver.get(base_url)\n\n # Wait for React to mount\n time.sleep(3)\n\n # Verify we're at the correct URL\n current_url = driver.current_url\n print(f\"Current URL: {current_url}\")\n\n # The URL should contain our base path\n if base_path != \"/\":\n assert base_path in current_url, f\"Expected base path '{base_path}' in URL '{current_url}'\"\n\n # Check that the React app has mounted\n root = driver.find_element(By.ID, \"root\")\n assert root is not None, \"React root element should exist\"\n\n root_content = driver.execute_script(\"return document.getElementById('root').innerHTML.length;\")\n assert root_content > 0, \"React should have rendered content\"\n\n print(\"✓ App loaded successfully at base path\")\n\n\ndef test_static_assets_load_correctly(driver):\n \"\"\"Test that CSS, JS, and other static assets load from the correct path.\"\"\"\n base_url = get_base_url()\n base_path = get_base_path()\n\n driver.get(base_url)\n time.sleep(3)\n\n # Check for any failed resource loads in network\n failed_resources = driver.execute_script(\"\"\"\n const perf = performance.getEntriesByType('resource');\n const failed = perf.filter(entry => {\n // Check for failed loads (status 404, 403, 500, etc.)\n // Note: transferSize === 0 might indicate CORS issues or failed loads\n return entry.transferSize === 0 && !entry.name.includes('data:');\n });\n return failed.map(r => ({\n name: r.name,\n type: r.initiatorType\n }));\n \"\"\")\n\n if failed_resources:\n print(f\"\\n⚠ Found {len(failed_resources)} potentially failed resource loads:\")\n for resource in failed_resources[:10]:\n print(f\" - {resource['type']}: {resource['name']}\")\n\n # Check that main JS bundle loaded\n js_loaded = driver.execute_script(\"\"\"\n const scripts = Array.from(document.getElementsByTagName('script'));\n return scripts.some(s => s.src && !s.src.includes('data:'));\n \"\"\")\n assert js_loaded, \"JavaScript bundles should be loaded\"\n print(\"✓ JavaScript bundles loaded\")\n\n # Check that CSS loaded\n css_loaded = driver.execute_script(\"\"\"\n const links = Array.from(document.getElementsByTagName('link'));\n const hasCSS = links.some(l => l.rel === 'stylesheet' && l.href);\n const hasStyles = document.getElementsByTagName('style').length > 0;\n return hasCSS || hasStyles;\n \"\"\")\n assert css_loaded, \"CSS should be loaded\"\n print(\"✓ CSS loaded\")\n\n # Check console for errors about failed loads\n logs = driver.get_log('browser')\n errors = [log for log in logs if 'Failed to load resource' in log.get('message', '') or '404' in log.get('message', '')]\n\n if errors:\n print(f\"\\n⚠ Found {len(errors)} resource loading errors in console:\")\n for error in errors[:5]:\n print(f\" {error['message'][:100]}\")\n\n # Don't fail the test but warn about errors\n if len(errors) > 5:\n pytest.fail(f\"Too many resource loading errors ({len(errors)}). Check asset paths.\")\n\n print(\"✓ Static assets loaded correctly\")\n\n\ndef test_react_router_navigation_works(driver):\n \"\"\"Test that React Router navigation works correctly with the base path.\"\"\"\n base_url = get_base_url()\n base_path = get_base_path()\n\n driver.get(base_url)\n time.sleep(3)\n\n # Get initial URL\n initial_url = driver.current_url\n print(f\"\\nInitial URL: {initial_url}\")\n\n # Try navigating to a different route using React Router\n # Note: This assumes the app has navigation. Adjust based on actual routes.\n navigation_result = driver.execute_script(\"\"\"\n // Check if React Router is available\n const hasRouter = window.React && window.ReactDOM;\n\n // Try to find any links or buttons that might trigger navigation\n const links = document.querySelectorAll('a[href^=\"/\"], a[href^=\"./\"], a[href^=\"#\"]');\n const buttons = document.querySelectorAll('button');\n\n return {\n hasReactApp: !!document.querySelector('#root').children.length,\n linkCount: links.length,\n buttonCount: buttons.length,\n currentPath: window.location.pathname\n };\n \"\"\")\n\n print(f\"Navigation check:\")\n print(f\" Has React App: {navigation_result['hasReactApp']}\")\n print(f\" Links found: {navigation_result['linkCount']}\")\n print(f\" Buttons found: {navigation_result['buttonCount']}\")\n print(f\" Current path: {navigation_result['currentPath']}\")\n\n # Verify the current path matches our expected base path structure\n current_path = navigation_result['currentPath']\n if base_path != \"/\" and not current_path.startswith(base_path.rstrip('/')):\n pytest.fail(f\"Current path '{current_path}' doesn't start with base path '{base_path}'\")\n\n print(\"✓ React Router configured correctly for base path\")\n\n\ndef test_router_basename_detection(driver):\n \"\"\"Test that the React Router basename is correctly detected from the URL.\"\"\"\n base_url = get_base_url()\n base_path = get_base_path()\n\n driver.get(base_url)\n time.sleep(3)\n\n # Check what basename React Router is using\n # This executes the same logic as in App.tsx\n detected_basename = driver.execute_script(r\"\"\"\n // This replicates the basename detection logic from App.tsx\n const pathname = window.location.pathname;\n const basename = pathname.replace(/\\/display\\/.*$/, '').replace(/\\/$/, '') || '/';\n return basename;\n \"\"\")\n\n print(f\"\\nBasename detection:\")\n print(f\" Expected base path: {base_path}\")\n print(f\" Detected basename: {detected_basename}\")\n print(f\" Current pathname: {driver.execute_script('return window.location.pathname')}\")\n\n # The detected basename should match our base path (normalized)\n expected = base_path.rstrip('/') or '/'\n detected = detected_basename.rstrip('/') or '/'\n\n if expected != detected:\n print(f\"⚠ Warning: Basename mismatch - expected '{expected}', detected '{detected}'\")\n # This might be okay if the app handles it correctly\n # Don't fail immediately, but check if the app still works\n\n # Verify the app actually rendered despite the mismatch\n app_rendered = driver.execute_script(\"\"\"\n return document.querySelector('.fossflow-container') !== null ||\n document.querySelector('#root').children.length > 0;\n \"\"\")\n\n if not app_rendered:\n pytest.fail(f\"App didn't render with basename mismatch. Expected '{expected}', got '{detected}'\")\n\n print(\"✓ Router basename detection working correctly\")\n\n\ndef test_no_console_errors_at_base_path(driver):\n \"\"\"Ensure there are no critical JavaScript errors when loaded at base path.\"\"\"\n base_url = get_base_url()\n base_path = get_base_path()\n\n driver.get(base_url)\n time.sleep(3)\n\n # Get console logs\n logs = driver.get_log('browser')\n\n # Filter for severe errors\n severe_errors = [log for log in logs if log['level'] == 'SEVERE']\n\n # Common errors to ignore (that might not be real issues)\n ignored_patterns = [\n 'favicon.ico', # Missing favicon is okay\n 'manifest.json', # Missing manifest is okay for basic functionality\n ]\n\n critical_errors = []\n for error in severe_errors:\n message = error.get('message', '')\n if not any(pattern in message for pattern in ignored_patterns):\n critical_errors.append(error)\n\n if critical_errors:\n print(f\"\\n⚠ Found {len(critical_errors)} critical console errors:\")\n for error in critical_errors[:5]:\n print(f\" {error['message'][:150]}\")\n\n # Check for specific routing-related errors\n routing_errors = [e for e in critical_errors if 'Router' in e['message'] or 'basename' in e['message']]\n if routing_errors:\n pytest.fail(f\"Found React Router errors: {routing_errors[0]['message']}\")\n\n else:\n print(\"✓ No critical console errors found\")\n\n\nif __name__ == \"__main__\":\n pytest.main([__file__, \"-v\", \"-s\"])" }, { "path": "e2e-tests/tests/test_basic_load.py", "content": "\"\"\"\nBasic E2E tests for FossFLOW application.\nTests basic page loading, canvas presence, and rendering.\n\"\"\"\nimport os\nimport time\nimport pytest\nfrom selenium import webdriver\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.chrome.options import Options\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\n\n\ndef get_base_url():\n \"\"\"Get the base URL from environment or use default.\"\"\"\n return os.getenv(\"FOSSFLOW_TEST_URL\", \"http://localhost:3000\")\n\n\ndef get_webdriver_url():\n \"\"\"Get the WebDriver URL from environment or use default.\"\"\"\n return os.getenv(\"WEBDRIVER_URL\", \"http://localhost:4444\")\n\n\n@pytest.fixture(scope=\"function\")\ndef driver():\n \"\"\"Create a Chrome WebDriver instance for each test.\"\"\"\n chrome_options = Options()\n chrome_options.add_argument(\"--headless=new\") # Use new headless mode\n chrome_options.add_argument(\"--no-sandbox\")\n chrome_options.add_argument(\"--disable-dev-shm-usage\")\n\n # Enable canvas and WebGL rendering\n chrome_options.add_argument(\"--enable-webgl\")\n chrome_options.add_argument(\"--use-gl=swiftshader\") # Software GL for headless\n chrome_options.add_argument(\"--enable-accelerated-2d-canvas\")\n\n # Increase window size (some canvas libraries check viewport)\n chrome_options.add_argument(\"--window-size=1920,1080\")\n\n # Disable features that might interfere\n chrome_options.add_argument(\"--disable-blink-features=AutomationControlled\")\n\n # Enable logging to see what's happening\n chrome_options.set_capability('goog:loggingPrefs', {'browser': 'ALL'})\n\n webdriver_url = get_webdriver_url()\n\n # Connect to remote WebDriver (Selenium Grid)\n driver = webdriver.Remote(\n command_executor=webdriver_url,\n options=chrome_options\n )\n\n driver.implicitly_wait(10)\n\n yield driver\n\n # Cleanup\n driver.quit()\n\n\ndef test_can_connect_to_server(driver):\n \"\"\"Test that we can connect to the server and get a response.\"\"\"\n base_url = get_base_url()\n\n print(f\"\\nAttempting to navigate to: {base_url}\")\n\n # Navigate to homepage\n driver.get(base_url)\n\n # Wait a bit for page to load\n time.sleep(3)\n\n # Just verify we got SOMETHING back\n page_source = driver.page_source\n print(f\"Page source length: {len(page_source)} bytes\")\n\n assert len(page_source) > 0, \"Page source should not be empty\"\n print(\"✓ Got page content from server\")\n\n\ndef test_homepage_loads(driver):\n \"\"\"Test that the homepage loads successfully.\"\"\"\n base_url = get_base_url()\n\n # Navigate to homepage\n driver.get(base_url)\n\n # Wait for page to load\n time.sleep(5)\n\n # Get page title\n title = driver.title\n print(f\"\\nPage title: {title}\")\n\n # Verify title contains relevant keywords or is not empty\n # Be more lenient - just check it's not empty\n assert len(title) > 0, f\"Page title should not be empty. Got: '{title}'\"\n\n print(\"✓ Homepage loaded with title\")\n\n\ndef test_page_has_body_and_root(driver):\n \"\"\"Test that the page has basic HTML structure.\"\"\"\n base_url = get_base_url()\n\n # Navigate to homepage\n driver.get(base_url)\n\n # Wait for page to load\n time.sleep(5)\n\n # Check that body exists\n body = driver.find_element(By.TAG_NAME, \"body\")\n assert body is not None, \"Body element should exist\"\n print(\"\\n✓ Body element found\")\n\n # Check for React root element\n root = driver.find_element(By.ID, \"root\")\n assert root is not None, \"React root element should exist\"\n print(\"✓ React root element found\")\n\n\ndef test_javascript_is_executing(driver):\n \"\"\"Test that JavaScript is actually running in the browser.\"\"\"\n base_url = get_base_url()\n\n # Navigate to homepage\n driver.get(base_url)\n time.sleep(5)\n\n # Check if JavaScript is enabled\n js_enabled = driver.execute_script(\"return true;\")\n print(f\"\\n✓ JavaScript enabled: {js_enabled}\")\n assert js_enabled, \"JavaScript should be enabled\"\n\n # Check if we can access window object\n has_window = driver.execute_script(\"return typeof window !== 'undefined';\")\n print(f\"✓ Window object available: {has_window}\")\n assert has_window, \"Window object should be available\"\n\n # Check if React has mounted\n root_content = driver.execute_script(\"return document.getElementById('root').innerHTML.length;\")\n print(f\"✓ Root innerHTML length: {root_content} characters\")\n\n if root_content == 0:\n print(\"⚠️ WARNING: React root is empty - React may not have mounted!\")\n # Get browser console logs\n logs = driver.get_log('browser')\n if logs:\n print(\"\\nBrowser console logs:\")\n for log in logs[-10:]: # Last 10 logs\n print(f\" [{log['level']}] {log['message']}\")\n\n # Check for specific elements that React should create\n print(\"\\nChecking for expected React-created elements...\")\n all_divs = driver.execute_script(\"return document.querySelectorAll('div').length;\")\n print(f\" Total div elements: {all_divs}\")\n\n all_buttons = driver.execute_script(\"return document.querySelectorAll('button').length;\")\n print(f\" Total button elements: {all_buttons}\")\n\n all_canvases = driver.execute_script(\"return document.querySelectorAll('canvas').length;\")\n print(f\" Total canvas elements: {all_canvases}\")\n\n assert root_content > 0, \"React should have rendered content into the root element\"\n print(f\"✓ React has rendered content into root\")\n\n\ndef test_app_renders_diagram_components(driver):\n \"\"\"Test that the app renders SVG-based diagram components (FossFLOW uses SVG).\"\"\"\n base_url = get_base_url()\n\n # Navigate to homepage\n driver.get(base_url)\n\n print(\"\\nWaiting for FossFLOW app to render diagram components...\")\n\n # Wait for the fossflow-container div to appear (max 10 seconds)\n try:\n container = WebDriverWait(driver, 10).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n print(\"✓ FossFLOW container element found\")\n except Exception as e:\n print(f\"❌ FossFLOW container not found: {e}\")\n\n # Get diagnostics\n logs = driver.get_log('browser')\n errors = [log for log in logs if log['level'] == 'SEVERE']\n if errors:\n print(f\"\\nBrowser console errors:\")\n for log in errors[:5]:\n print(f\" {log['message'][:100]}\")\n\n pytest.fail(\"FossFLOW container div not found - React may not have rendered\")\n\n # Check that the app has rendered its UI components\n dom_info = driver.execute_script(\"\"\"\n return {\n divs: document.querySelectorAll('div').length,\n buttons: document.querySelectorAll('button').length,\n svgs: document.querySelectorAll('svg').length,\n hasFossflowContainer: document.querySelector('.fossflow-container') !== null\n };\n \"\"\")\n\n print(f\"\\nDOM structure:\")\n print(f\" Divs: {dom_info['divs']}\")\n print(f\" Buttons: {dom_info['buttons']}\")\n print(f\" SVG elements: {dom_info['svgs']}\")\n print(f\" FossFLOW container: {dom_info['hasFossflowContainer']}\")\n\n # Check for console errors\n logs = driver.get_log('browser')\n errors = [log for log in logs if log['level'] == 'SEVERE']\n\n if errors:\n print(f\"\\n⚠️ Found {len(errors)} console errors:\")\n for log in errors[:5]:\n print(f\" {log['message'][:100]}\")\n\n # Verify the app has rendered meaningful content\n assert dom_info['divs'] > 10, f\"Expected many div elements, got {dom_info['divs']}\"\n assert dom_info['buttons'] > 0, f\"Expected buttons in the UI, got {dom_info['buttons']}\"\n assert dom_info['hasFossflowContainer'], \"FossFLOW container div should exist\"\n\n print(\"\\n✓ SUCCESS: FossFLOW app has rendered with UI components\")\n\n\nif __name__ == \"__main__\":\n pytest.main([__file__, \"-v\", \"-s\"])\n" }, { "path": "e2e-tests/tests/test_connector_undo.py", "content": "\"\"\"E2E test: place two nodes, connect them, then undo/redo the connector.\"\"\"\nimport os\nimport time\nimport pytest\nfrom selenium import webdriver\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.chrome.options import Options\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\nfrom selenium.webdriver.common.action_chains import ActionChains\n\n\nSCREENSHOT_DIR = os.path.join(os.path.dirname(__file__), \"..\", \"screenshots\")\n\n\ndef get_base_url():\n return os.getenv(\"FOSSFLOW_TEST_URL\", \"http://localhost:3000\")\n\n\ndef get_webdriver_url():\n return os.getenv(\"WEBDRIVER_URL\", \"http://localhost:4444\")\n\n\n@pytest.fixture(scope=\"function\")\ndef driver():\n chrome_options = Options()\n chrome_options.add_argument(\"--headless=new\")\n chrome_options.add_argument(\"--no-sandbox\")\n chrome_options.add_argument(\"--disable-dev-shm-usage\")\n chrome_options.add_argument(\"--window-size=1920,1080\")\n d = webdriver.Remote(\n command_executor=get_webdriver_url(),\n options=chrome_options,\n )\n d.implicitly_wait(10)\n yield d\n d.quit()\n\n\ndef save_screenshot(driver, name):\n os.makedirs(SCREENSHOT_DIR, exist_ok=True)\n path = os.path.join(SCREENSHOT_DIR, f\"{name}.png\")\n driver.save_screenshot(path)\n return path\n\n\ndef dismiss_modals(driver):\n \"\"\"Dismiss all modals, dialogs, and tip popups.\"\"\"\n try:\n driver.execute_script(\"\"\"\n // Close MUI dialogs\n const dialogs = document.querySelectorAll('[role=\"dialog\"], [class*=\"MuiDialog\"]');\n dialogs.forEach(d => {\n const closeBtn = d.querySelector('button');\n if (closeBtn) closeBtn.click();\n });\n // Close tip popups (X buttons)\n const closeIcons = document.querySelectorAll('[data-testid=\"CloseIcon\"], [data-testid=\"ClearIcon\"]');\n closeIcons.forEach(icon => {\n const btn = icon.closest('button');\n if (btn) btn.click();\n });\n // Close anything with a close/dismiss aria-label\n document.querySelectorAll('button').forEach(btn => {\n const label = (btn.getAttribute('aria-label') || '').toLowerCase();\n if (label.includes('close') || label.includes('dismiss')) btn.click();\n });\n \"\"\")\n time.sleep(0.5)\n # Second pass to catch the lazy loading modal that may appear later\n driver.execute_script(\"\"\"\n const dialogs = document.querySelectorAll('[role=\"dialog\"], [class*=\"MuiDialog\"]');\n dialogs.forEach(d => {\n const btns = d.querySelectorAll('button');\n btns.forEach(b => { if (b.textContent.trim() === '×' || b.querySelector('svg')) b.click(); });\n });\n \"\"\")\n time.sleep(0.3)\n except Exception:\n pass\n\n\ndef count_canvas_images(driver):\n return driver.execute_script(\"\"\"\n const c = document.querySelector('.fossflow-container');\n if (!c) return 0;\n return c.querySelectorAll('img').length;\n \"\"\")\n\n\ndef count_connector_polylines(driver):\n \"\"\"Count SVG polylines inside the fossflow container (connector paths).\"\"\"\n return driver.execute_script(\"\"\"\n const c = document.querySelector('.fossflow-container');\n if (!c) return 0;\n return c.querySelectorAll('svg polyline').length;\n \"\"\")\n\n\ndef get_scene_state(driver):\n \"\"\"Get scene connector count via React fiber store discovery.\"\"\"\n return driver.execute_script(\"\"\"\n // Walk React fiber tree to find the scene store\n var root = document.getElementById(\"root\");\n var containerKey = Object.keys(root).find(function(k) {\n return k.startsWith(\"__reactContainer\");\n });\n if (!containerKey) return {error: \"no react container\"};\n\n var fiber = root[containerKey];\n var queue = [fiber];\n var visited = 0;\n var sceneStore = null;\n var modelStore = null;\n\n while (queue.length > 0 && visited < 3000) {\n var node = queue.shift();\n if (!node) continue;\n visited++;\n\n if (node.pendingProps && node.pendingProps.value &&\n typeof node.pendingProps.value === \"object\" &&\n node.pendingProps.value !== null &&\n typeof node.pendingProps.value.getState === \"function\") {\n try {\n var state = node.pendingProps.value.getState();\n if (state && state.connectors !== undefined && state.textBoxes !== undefined && state.history) {\n sceneStore = node.pendingProps.value;\n }\n if (state && state.views !== undefined && state.items !== undefined && state.history) {\n modelStore = node.pendingProps.value;\n }\n } catch(e) {}\n }\n if (node.child) queue.push(node.child);\n if (node.sibling) queue.push(node.sibling);\n }\n\n if (!sceneStore || !modelStore) return {error: \"stores not found\", visited: visited};\n\n var s = sceneStore.getState();\n var m = modelStore.getState();\n var cv = m.views && m.views[0];\n return {\n connectors: Object.keys(s.connectors || {}).length,\n modelItems: (m.items || []).length,\n viewConnectors: cv && cv.connectors ? cv.connectors.length : 0,\n scenePastLen: s.history.past.length,\n sceneFutureLen: s.history.future.length,\n modelPastLen: m.history.past.length,\n modelFutureLen: m.history.future.length,\n };\n \"\"\")\n\n\ndef place_node_at(driver, x_offset, y_offset):\n \"\"\"Select icon and place at a specific canvas offset.\"\"\"\n add_btn = driver.find_element(By.CSS_SELECTOR, \"button[aria-label*='Add item']\")\n add_btn.click()\n time.sleep(0.8)\n\n driver.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const text = btn.textContent.trim().toUpperCase();\n if (text.includes('ISOFLOW') && !text.includes('IMPORT')) {\n btn.click(); return;\n }\n }\n \"\"\")\n time.sleep(2)\n\n first_icon_btn = driver.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img && img.naturalWidth > 0 && img.naturalWidth <= 100) return btn;\n }\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img) return btn;\n }\n return null;\n \"\"\")\n if first_icon_btn is None:\n return False\n\n ActionChains(driver).click(first_icon_btn).perform()\n time.sleep(0.5)\n\n canvas = driver.find_element(By.CLASS_NAME, \"fossflow-container\")\n ActionChains(driver).move_to_element_with_offset(canvas, x_offset, y_offset).click().perform()\n time.sleep(1)\n return True\n\n\ndef click_connector_tool(driver):\n \"\"\"Click the Connector tool button in the toolbar.\"\"\"\n btn = driver.execute_script(\"\"\"\n return document.querySelector(\"button[aria-label*='Connector']\");\n \"\"\")\n if btn:\n btn.click()\n time.sleep(0.5)\n return True\n return False\n\n\ndef click_undo(driver):\n btn = driver.execute_script(\"\"\"\n return document.querySelector(\"button[aria-label*='Undo']\");\n \"\"\")\n if btn:\n btn.click()\n time.sleep(1)\n return True\n return False\n\n\ndef click_redo(driver):\n btn = driver.execute_script(\"\"\"\n return document.querySelector(\"button[aria-label*='Redo']\");\n \"\"\")\n if btn:\n btn.click()\n time.sleep(1)\n return True\n return False\n\n\ndef test_connector_undo_redo(driver):\n \"\"\"Place 2 nodes, connect them, undo connector, redo connector.\"\"\"\n base_url = get_base_url()\n\n # --- Load app ---\n print(f\"\\n1. Loading app at {base_url}\")\n driver.get(base_url)\n WebDriverWait(driver, 15).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n time.sleep(2)\n dismiss_modals(driver)\n time.sleep(0.5)\n\n # --- Place two nodes ---\n print(\"\\n2. Placing node 1 at (350, 300)...\")\n assert place_node_at(driver, 350, 300), \"Failed to place node 1\"\n imgs = count_canvas_images(driver)\n print(f\" Images: {imgs}\")\n\n print(\" Placing node 2 at (600, 300)...\")\n assert place_node_at(driver, 600, 300), \"Failed to place node 2\"\n imgs = count_canvas_images(driver)\n print(f\" Images: {imgs}\")\n assert imgs == 2, f\"Expected 2 images after placing 2 nodes, got {imgs}\"\n save_screenshot(driver, \"conn_01_two_nodes\")\n\n polylines_before = count_connector_polylines(driver)\n state_before = get_scene_state(driver)\n print(f\" Polylines before connector: {polylines_before}\")\n print(f\" Scene state: {state_before}\")\n\n # Dismiss any late-appearing modals (Lazy Loading popup)\n dismiss_modals(driver)\n time.sleep(0.5)\n save_screenshot(driver, \"conn_01b_before_connect\")\n\n # --- Get node image elements for clicking ---\n node_imgs = driver.find_elements(By.CSS_SELECTOR, \".fossflow-container img\")\n print(f\" Found {len(node_imgs)} node images\")\n assert len(node_imgs) >= 2, f\"Expected 2+ node images, got {len(node_imgs)}\"\n\n # --- Activate connector tool (click mode) ---\n print(\"\\n3. Activating Connector tool...\")\n assert click_connector_tool(driver), \"Failed to find Connector button\"\n time.sleep(0.5)\n\n # --- Click on node 1 image (first click - start connector) ---\n print(\" Clicking on node 1 to start connector...\")\n ActionChains(driver).click(node_imgs[0]).perform()\n time.sleep(1)\n save_screenshot(driver, \"conn_02_first_click\")\n\n # --- Click on node 2 image (second click - complete connector) ---\n print(\" Clicking on node 2 to complete connector...\")\n ActionChains(driver).click(node_imgs[1]).perform()\n time.sleep(1)\n save_screenshot(driver, \"conn_03_connected\")\n\n polylines_after = count_connector_polylines(driver)\n state_after = get_scene_state(driver)\n print(f\" Polylines after connector: {polylines_after}\")\n print(f\" Scene state: {state_after}\")\n\n # Verify connector was created\n has_connector = polylines_after > polylines_before\n scene_has_connector = (\n isinstance(state_after, dict) and\n state_after.get(\"connectors\", 0) > 0\n )\n print(f\" DOM has connector: {has_connector}\")\n print(f\" Scene store has connector: {scene_has_connector}\")\n\n assert has_connector or scene_has_connector, (\n f\"No connector created. Polylines: {polylines_before} -> {polylines_after}, \"\n f\"Scene state: {state_after}\"\n )\n\n connector_polylines = polylines_after\n\n # --- Switch back to default mode (press Escape) ---\n print(\"\\n4. Pressing Escape to exit connector mode...\")\n ActionChains(driver).send_keys('\\ue00c').perform() # Escape\n time.sleep(0.5)\n\n # --- Undo connector (create + update = 2 history entries) ---\n print(\"\\n5. Undoing connector (2 steps: update then create)...\")\n click_undo(driver)\n polylines_mid = count_connector_polylines(driver)\n state_mid = get_scene_state(driver)\n print(f\" After undo 1: polylines={polylines_mid}, scene={state_mid}\")\n\n click_undo(driver)\n polylines_undo = count_connector_polylines(driver)\n state_undo = get_scene_state(driver)\n print(f\" After undo 2: polylines={polylines_undo}, scene={state_undo}\")\n save_screenshot(driver, \"conn_04_after_undo\")\n\n assert polylines_undo < connector_polylines or (\n isinstance(state_undo, dict) and state_undo.get(\"connectors\", 0) == 0\n ), (\n f\"Undo did not remove connector. Polylines: {connector_polylines} -> {polylines_undo}, \"\n f\"Scene state: {state_undo}\"\n )\n print(\" Connector removed by undo.\")\n\n # Verify nodes are still there\n imgs_after_undo = count_canvas_images(driver)\n print(f\" Images after undo: {imgs_after_undo} (nodes should still be there)\")\n assert imgs_after_undo == 2, f\"Expected 2 images after undoing connector, got {imgs_after_undo}\"\n\n # --- Redo connector (2 steps: create then update) ---\n print(\"\\n6. Redoing connector (2 steps)...\")\n click_redo(driver)\n click_redo(driver)\n time.sleep(0.5)\n\n polylines_redo = count_connector_polylines(driver)\n state_redo = get_scene_state(driver)\n print(f\" Polylines after redo: {polylines_redo}\")\n print(f\" Scene state: {state_redo}\")\n save_screenshot(driver, \"conn_05_after_redo\")\n\n assert polylines_redo >= connector_polylines or (\n isinstance(state_redo, dict) and state_redo.get(\"connectors\", 0) > 0\n ), (\n f\"Redo did not restore connector. Polylines: {polylines_undo} -> {polylines_redo}, \"\n f\"Scene state: {state_redo}\"\n )\n print(\" Connector restored by redo.\")\n\n # --- Undo/redo cycle again ---\n print(\"\\n7. Undoing connector again (2 steps)...\")\n click_undo(driver)\n click_undo(driver)\n time.sleep(0.5)\n\n polylines_undo2 = count_connector_polylines(driver)\n state_undo2 = get_scene_state(driver)\n print(f\" Polylines: {polylines_undo2}, connectors: {state_undo2.get('connectors', '?')}\")\n assert polylines_undo2 < connector_polylines or (\n isinstance(state_undo2, dict) and state_undo2.get(\"connectors\", 0) == 0\n ), \"Second undo cycle did not remove connector\"\n print(\" Connector removed again.\")\n\n print(\" Redoing connector again (2 steps)...\")\n click_redo(driver)\n click_redo(driver)\n time.sleep(0.5)\n\n polylines_redo2 = count_connector_polylines(driver)\n state_redo2 = get_scene_state(driver)\n print(f\" Polylines: {polylines_redo2}, connectors: {state_redo2.get('connectors', '?')}\")\n assert polylines_redo2 >= connector_polylines or (\n isinstance(state_redo2, dict) and state_redo2.get(\"connectors\", 0) > 0\n ), \"Second redo cycle did not restore connector\"\n\n save_screenshot(driver, \"conn_06_final\")\n print(\"\\n SUCCESS: Connector undo/redo cycle works correctly!\")\n\n\nif __name__ == \"__main__\":\n pytest.main([__file__, \"-v\", \"-s\"])\n" }, { "path": "e2e-tests/tests/test_export_svg.py", "content": "\"\"\"E2E test: build a scene with nodes, rectangle, and text, then export as SVG.\"\"\"\nimport os\nimport time\nimport glob\nimport pytest\nfrom selenium import webdriver\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.chrome.options import Options\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\nfrom selenium.webdriver.common.action_chains import ActionChains\n\n\nSCREENSHOT_DIR = os.path.join(os.path.dirname(__file__), \"..\", \"screenshots\")\nDOWNLOAD_DIR = \"/tmp/fossflow-e2e-downloads\"\n\n\ndef get_base_url():\n return os.getenv(\"FOSSFLOW_TEST_URL\", \"http://localhost:3000\")\n\n\ndef get_webdriver_url():\n return os.getenv(\"WEBDRIVER_URL\", \"http://localhost:4444\")\n\n\n@pytest.fixture(scope=\"function\")\ndef driver():\n chrome_options = Options()\n chrome_options.add_argument(\"--headless=new\")\n chrome_options.add_argument(\"--no-sandbox\")\n chrome_options.add_argument(\"--disable-dev-shm-usage\")\n chrome_options.add_argument(\"--window-size=1920,1080\")\n\n # Configure download directory for headless Chrome\n prefs = {\n \"download.default_directory\": DOWNLOAD_DIR,\n \"download.prompt_for_download\": False,\n \"download.directory_upgrade\": True,\n \"safebrowsing.enabled\": True,\n }\n chrome_options.add_experimental_option(\"prefs\", prefs)\n\n d = webdriver.Remote(\n command_executor=get_webdriver_url(),\n options=chrome_options,\n )\n d.implicitly_wait(10)\n\n # For headless Chrome on Remote, enable download via CDP\n # This sets the download path inside the container\n try:\n d.execute(\"send_command\", {\n \"cmd\": \"Page.setDownloadBehavior\",\n \"params\": {\"behavior\": \"allow\", \"downloadPath\": DOWNLOAD_DIR}\n })\n except Exception:\n # Fallback: try CDP command directly\n try:\n d.execute_cdp_cmd(\"Page.setDownloadBehavior\", {\n \"behavior\": \"allow\",\n \"downloadPath\": DOWNLOAD_DIR,\n })\n except Exception:\n pass\n\n yield d\n d.quit()\n\n\ndef save_screenshot(driver, name):\n os.makedirs(SCREENSHOT_DIR, exist_ok=True)\n path = os.path.join(SCREENSHOT_DIR, f\"{name}.png\")\n driver.save_screenshot(path)\n return path\n\n\ndef dismiss_modals(driver):\n \"\"\"Dismiss all modals, dialogs, and tip popups (multiple passes for lazy ones).\"\"\"\n for _ in range(3):\n try:\n driver.execute_script(\"\"\"\n // Close MUI dialogs\n document.querySelectorAll('[role=\"dialog\"], [class*=\"MuiDialog\"]').forEach(d => {\n const btns = d.querySelectorAll('button');\n btns.forEach(b => {\n if (b.querySelector('svg') || b.textContent.trim() === '×') b.click();\n });\n const closeBtn = d.querySelector('button');\n if (closeBtn) closeBtn.click();\n });\n // Close X buttons (CloseIcon, ClearIcon)\n document.querySelectorAll('[data-testid=\"CloseIcon\"], [data-testid=\"ClearIcon\"]').forEach(icon => {\n const b = icon.closest('button'); if (b) b.click();\n });\n // Close anything with close/dismiss aria-label\n document.querySelectorAll('button').forEach(btn => {\n const l = (btn.getAttribute('aria-label') || '').toLowerCase();\n if (l.includes('close') || l.includes('dismiss')) btn.click();\n });\n \"\"\")\n time.sleep(0.5)\n except Exception:\n pass\n\n\ndef place_node_at(driver, x_offset, y_offset):\n \"\"\"Select icon and place at a specific canvas offset.\"\"\"\n add_btn = driver.find_element(By.CSS_SELECTOR, \"button[aria-label*='Add item']\")\n add_btn.click()\n time.sleep(0.8)\n\n driver.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const text = btn.textContent.trim().toUpperCase();\n if (text.includes('ISOFLOW') && !text.includes('IMPORT')) {\n btn.click(); return;\n }\n }\n \"\"\")\n time.sleep(2)\n\n first_icon_btn = driver.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img && img.naturalWidth > 0 && img.naturalWidth <= 100) return btn;\n }\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img) return btn;\n }\n return null;\n \"\"\")\n if first_icon_btn is None:\n return False\n\n ActionChains(driver).click(first_icon_btn).perform()\n time.sleep(0.5)\n\n canvas = driver.find_element(By.CLASS_NAME, \"fossflow-container\")\n ActionChains(driver).move_to_element_with_offset(canvas, x_offset, y_offset).click().perform()\n time.sleep(1)\n return True\n\n\ndef draw_rectangle(driver, x, y, width, height):\n \"\"\"Activate rectangle tool and drag to draw.\"\"\"\n rect_btn = driver.execute_script(\n \"return document.querySelector(\\\"button[aria-label*='Rectangle']\\\");\"\n )\n if not rect_btn:\n return False\n rect_btn.click()\n time.sleep(0.5)\n\n canvas = driver.find_element(By.CLASS_NAME, \"fossflow-container\")\n actions = ActionChains(driver)\n actions.move_to_element_with_offset(canvas, x, y)\n actions.click_and_hold()\n actions.move_by_offset(width, height)\n actions.release()\n actions.perform()\n time.sleep(1)\n return True\n\n\ndef place_textbox(driver, x, y):\n \"\"\"Activate text tool and click to place.\"\"\"\n text_btn = driver.execute_script(\n \"return document.querySelector(\\\"button[aria-label*='Text']\\\");\"\n )\n if not text_btn:\n return False\n text_btn.click()\n time.sleep(0.5)\n\n canvas = driver.find_element(By.CLASS_NAME, \"fossflow-container\")\n ActionChains(driver).move_to_element_with_offset(canvas, x, y).click().perform()\n time.sleep(1)\n\n # Press Escape to exit text mode and deselect\n ActionChains(driver).send_keys('\\ue00c').perform()\n time.sleep(0.5)\n return True\n\n\ndef get_scene_state(driver):\n \"\"\"Get scene state via React fiber store discovery.\"\"\"\n return driver.execute_script(\"\"\"\n var root = document.getElementById(\"root\");\n var ck = Object.keys(root).find(function(k) { return k.startsWith(\"__reactContainer\"); });\n if (!ck) return {error: \"no react\"};\n var fiber = root[ck], queue = [fiber], v = 0, ss = null, ms = null;\n while (queue.length > 0 && v < 3000) {\n var n = queue.shift(); if (!n) continue; v++;\n if (n.pendingProps && n.pendingProps.value &&\n typeof n.pendingProps.value === \"object\" && n.pendingProps.value !== null &&\n typeof n.pendingProps.value.getState === \"function\") {\n try {\n var st = n.pendingProps.value.getState();\n if (st && st.connectors !== undefined && st.textBoxes !== undefined) ss = n.pendingProps.value;\n if (st && st.views !== undefined && st.items !== undefined) ms = n.pendingProps.value;\n } catch(e) {}\n }\n if (n.child) queue.push(n.child);\n if (n.sibling) queue.push(n.sibling);\n }\n if (!ss || !ms) return {error: \"stores not found\"};\n var s = ss.getState(), m = ms.getState();\n var cv = m.views && m.views[0];\n return {\n rectangles: cv && cv.rectangles ? cv.rectangles.length : 0,\n textBoxes: Object.keys(s.textBoxes || {}).length,\n connectors: Object.keys(s.connectors || {}).length,\n modelItems: (m.items || []).length,\n };\n \"\"\")\n\n\ndef test_export_svg(driver):\n \"\"\"Build a scene with nodes, rectangle, and text, then export as SVG.\"\"\"\n base_url = get_base_url()\n\n # Clean up any previous downloads\n os.makedirs(DOWNLOAD_DIR, exist_ok=True)\n for f in glob.glob(os.path.join(DOWNLOAD_DIR, \"fossflow-export-*\")):\n os.remove(f)\n\n # --- Load app ---\n print(f\"\\n1. Loading app at {base_url}\")\n driver.get(base_url)\n WebDriverWait(driver, 15).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n time.sleep(2)\n dismiss_modals(driver)\n time.sleep(0.5)\n\n # --- Place 2 nodes ---\n print(\"\\n2. Placing nodes...\")\n assert place_node_at(driver, 350, 300), \"Failed to place node 1\"\n print(\" Node 1 placed.\")\n assert place_node_at(driver, 600, 300), \"Failed to place node 2\"\n print(\" Node 2 placed.\")\n\n # Dismiss any late-appearing modals (Lazy Loading popup)\n dismiss_modals(driver)\n time.sleep(0.5)\n\n # --- Draw a rectangle ---\n print(\"\\n3. Drawing rectangle...\")\n assert draw_rectangle(driver, 100, 100, 150, 100), \"Failed to draw rectangle\"\n print(\" Rectangle drawn.\")\n\n # --- Place a text box ---\n print(\"\\n4. Placing text box...\")\n assert place_textbox(driver, 500, 200), \"Failed to place text box\"\n print(\" Text box placed.\")\n\n # --- Verify scene has all elements ---\n state = get_scene_state(driver)\n print(f\"\\n5. Scene state: {state}\")\n assert isinstance(state, dict), f\"Failed to get scene state: {state}\"\n assert state.get(\"modelItems\", 0) >= 2, f\"Expected 2+ nodes, got {state}\"\n assert state.get(\"rectangles\", 0) >= 1, f\"Expected 1+ rectangle, got {state}\"\n assert state.get(\"textBoxes\", 0) >= 1, f\"Expected 1+ text box, got {state}\"\n\n save_screenshot(driver, \"export_01_scene_built\")\n print(\" Scene verified: nodes, rectangle, and text box all present.\")\n\n # --- Open main menu ---\n print(\"\\n6. Opening main menu...\")\n menu_btn = driver.execute_script(\"\"\"\n // MainMenu uses IconButton with name=\"Main menu\"\n var buttons = document.querySelectorAll('button');\n for (var i = 0; i < buttons.length; i++) {\n var btn = buttons[i];\n var label = (btn.getAttribute('aria-label') || '').toLowerCase();\n var name = (btn.getAttribute('name') || '').toLowerCase();\n if (label.includes('main menu') || name.includes('main menu') ||\n label.includes('menu')) {\n return btn;\n }\n }\n // Fallback: look for the MUI MenuIcon (hamburger)\n var svgs = document.querySelectorAll('button svg');\n for (var j = 0; j < svgs.length; j++) {\n var path = svgs[j].querySelector('path');\n if (path) {\n var d = path.getAttribute('d') || '';\n // MUI MenuIcon path starts with \"M3 18h18v-2H3\"\n if (d.includes('M3 18h18') || d.includes('M3 18')) return svgs[j].closest('button');\n }\n }\n return null;\n \"\"\")\n assert menu_btn is not None, \"Main menu button not found\"\n menu_btn.click()\n time.sleep(1)\n save_screenshot(driver, \"export_02_menu_open\")\n print(\" Main menu opened.\")\n\n # --- Click \"Export as image\" ---\n print(\"\\n7. Clicking 'Export as image'...\")\n export_item = driver.execute_script(\"\"\"\n // Look for menu item containing \"Export as image\" or similar\n var items = document.querySelectorAll('[role=\"menuitem\"], li.MuiMenuItem-root');\n for (var i = 0; i < items.length; i++) {\n var text = items[i].textContent.trim().toLowerCase();\n if (text.includes('export') && text.includes('image')) return items[i];\n }\n // Fallback: any menu item with \"export\"\n for (var j = 0; j < items.length; j++) {\n var t = items[j].textContent.trim().toLowerCase();\n if (t.includes('export')) return items[j];\n }\n return null;\n \"\"\")\n assert export_item is not None, \"Export as image menu item not found\"\n export_item.click()\n time.sleep(2)\n save_screenshot(driver, \"export_03_dialog_opening\")\n print(\" Clicked export menu item.\")\n\n # --- Wait for export dialog ---\n print(\"\\n8. Waiting for export dialog...\")\n dialog = WebDriverWait(driver, 15).until(\n EC.presence_of_element_located((By.CSS_SELECTOR, '[role=\"dialog\"]'))\n )\n print(\" Export dialog appeared.\")\n\n # Wait for the preview to render (SVG data needs to be generated)\n # The \"Download as SVG\" button is disabled until svgData is ready\n print(\" Waiting for SVG data to generate...\")\n svg_btn = None\n for attempt in range(30): # Up to 30 seconds\n svg_btn = driver.execute_script(\"\"\"\n var buttons = document.querySelectorAll('[role=\"dialog\"] button');\n for (var i = 0; i < buttons.length; i++) {\n var text = buttons[i].textContent.trim().toLowerCase();\n if (text.includes('svg') && text.includes('download')) {\n return buttons[i];\n }\n }\n return null;\n \"\"\")\n if svg_btn:\n is_disabled = driver.execute_script(\n \"return arguments[0].disabled;\", svg_btn\n )\n if not is_disabled:\n print(f\" SVG button ready after {attempt + 1}s.\")\n break\n print(f\" SVG button found but disabled (attempt {attempt + 1})...\")\n else:\n print(f\" SVG button not found yet (attempt {attempt + 1})...\")\n time.sleep(1)\n else:\n save_screenshot(driver, \"export_04_svg_timeout\")\n pytest.fail(\"SVG download button never became enabled\")\n\n save_screenshot(driver, \"export_04_dialog_ready\")\n\n # --- Click \"Download as SVG\" ---\n print(\"\\n9. Clicking 'Download as SVG'...\")\n svg_btn.click()\n time.sleep(3) # Wait for download to complete\n save_screenshot(driver, \"export_05_after_download\")\n print(\" Download triggered.\")\n\n # --- Verify SVG file was downloaded ---\n print(\"\\n10. Checking for downloaded SVG file...\")\n\n # Method 1: Check filesystem (works when download dir is accessible)\n svg_files = glob.glob(os.path.join(DOWNLOAD_DIR, \"fossflow-export-*.svg\"))\n if svg_files:\n svg_path = svg_files[0]\n svg_size = os.path.getsize(svg_path)\n print(f\" Found SVG file: {svg_path} ({svg_size} bytes)\")\n assert svg_size > 100, f\"SVG file too small ({svg_size} bytes), likely empty\"\n\n # Read first 500 chars to verify it's valid SVG\n with open(svg_path, \"r\", errors=\"replace\") as f:\n content_start = f.read(500)\n is_svg = \" 1000, (\n f\"Downloaded file doesn't appear to be valid SVG. Start: {content_start[:200]}\"\n )\n print(\" SVG file verified!\")\n else:\n # Method 2: If running in Docker, the download happens inside the container.\n # We can verify the download happened by checking browser download state.\n print(\" No SVG file found locally (download may be inside Docker container).\")\n print(\" Verifying download was triggered via browser...\")\n\n # Check that the button click didn't cause an error\n errors = driver.execute_script(\"\"\"\n var logs = [];\n try {\n var entries = performance.getEntriesByType('resource');\n for (var i = entries.length - 1; i >= Math.max(0, entries.length - 5); i--) {\n logs.push(entries[i].name);\n }\n } catch(e) {}\n return logs;\n \"\"\")\n print(f\" Recent resource loads: {errors}\")\n\n # Check for any error alerts in the dialog\n export_error = driver.execute_script(\"\"\"\n var alerts = document.querySelectorAll('[role=\"dialog\"] .MuiAlert-standardError');\n return alerts.length;\n \"\"\")\n assert export_error == 0, \"Export dialog shows an error alert\"\n print(\" No export errors detected. Download was triggered successfully.\")\n\n print(\"\\n SUCCESS: Scene exported as SVG!\")\n\n\nif __name__ == \"__main__\":\n pytest.main([__file__, \"-v\", \"-s\"])\n" }, { "path": "e2e-tests/tests/test_import_diagram.py", "content": "\"\"\"E2E test: import a diagram JSON file and verify all elements loaded correctly.\"\"\"\nimport os\nimport time\nimport json\nimport pytest\nfrom selenium import webdriver\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.chrome.options import Options\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\nfrom selenium.webdriver.common.action_chains import ActionChains\nfrom selenium.webdriver.remote.file_detector import LocalFileDetector\n\n\nSCREENSHOT_DIR = os.path.join(os.path.dirname(__file__), \"..\", \"screenshots\")\nTEST_DIAGRAM = os.path.join(os.path.dirname(__file__), \"..\", \"test-diagram.json\")\n\n\ndef get_base_url():\n return os.getenv(\"FOSSFLOW_TEST_URL\", \"http://localhost:3000\")\n\n\ndef get_webdriver_url():\n return os.getenv(\"WEBDRIVER_URL\", \"http://localhost:4444\")\n\n\n@pytest.fixture(scope=\"function\")\ndef driver():\n chrome_options = Options()\n chrome_options.add_argument(\"--headless=new\")\n chrome_options.add_argument(\"--no-sandbox\")\n chrome_options.add_argument(\"--disable-dev-shm-usage\")\n chrome_options.add_argument(\"--window-size=1920,1080\")\n d = webdriver.Remote(\n command_executor=get_webdriver_url(),\n options=chrome_options,\n )\n d.implicitly_wait(10)\n # Enable local file detection for remote WebDriver (uploads files to remote)\n d.file_detector = LocalFileDetector()\n yield d\n d.quit()\n\n\ndef save_screenshot(driver, name):\n os.makedirs(SCREENSHOT_DIR, exist_ok=True)\n path = os.path.join(SCREENSHOT_DIR, f\"{name}.png\")\n driver.save_screenshot(path)\n return path\n\n\ndef dismiss_modals(driver):\n \"\"\"Dismiss all modals, dialogs, and tip popups (multiple passes for lazy ones).\"\"\"\n for _ in range(3):\n try:\n driver.execute_script(\"\"\"\n document.querySelectorAll('[role=\"dialog\"], [class*=\"MuiDialog\"]').forEach(d => {\n var btns = d.querySelectorAll('button');\n btns.forEach(b => {\n if (b.querySelector('svg') || b.textContent.trim() === '×') b.click();\n });\n var first = d.querySelector('button'); if (first) first.click();\n });\n document.querySelectorAll('[data-testid=\"CloseIcon\"], [data-testid=\"ClearIcon\"]').forEach(icon => {\n var b = icon.closest('button'); if (b) b.click();\n });\n document.querySelectorAll('button').forEach(btn => {\n var l = (btn.getAttribute('aria-label') || '').toLowerCase();\n if (l.includes('close') || l.includes('dismiss')) btn.click();\n });\n \"\"\")\n time.sleep(0.5)\n except Exception:\n pass\n\n\ndef get_scene_state(driver):\n \"\"\"Get full scene state via React fiber store discovery.\"\"\"\n return driver.execute_script(\"\"\"\n var root = document.getElementById(\"root\");\n var ck = Object.keys(root).find(function(k) { return k.startsWith(\"__reactContainer\"); });\n if (!ck) return {error: \"no react\"};\n var fiber = root[ck], queue = [fiber], v = 0, ss = null, ms = null;\n while (queue.length > 0 && v < 3000) {\n var n = queue.shift(); if (!n) continue; v++;\n if (n.pendingProps && n.pendingProps.value &&\n typeof n.pendingProps.value === \"object\" && n.pendingProps.value !== null &&\n typeof n.pendingProps.value.getState === \"function\") {\n try {\n var st = n.pendingProps.value.getState();\n if (st && st.connectors !== undefined && st.textBoxes !== undefined && st.history) ss = n.pendingProps.value;\n if (st && st.views !== undefined && st.items !== undefined && st.history) ms = n.pendingProps.value;\n } catch(e) {}\n }\n if (n.child) queue.push(n.child);\n if (n.sibling) queue.push(n.sibling);\n }\n if (!ss || !ms) return {error: \"stores not found\"};\n var s = ss.getState(), m = ms.getState();\n var cv = m.views && m.views[0];\n return {\n modelItems: (m.items || []).length,\n icons: (m.icons || []).length,\n views: (m.views || []).length,\n viewItems: cv ? (cv.items || []).length : 0,\n viewConnectors: cv && cv.connectors ? cv.connectors.length : 0,\n viewRectangles: cv && cv.rectangles ? cv.rectangles.length : 0,\n viewTextBoxes: cv && cv.textBoxes ? cv.textBoxes.length : 0,\n sceneConnectors: Object.keys(s.connectors || {}).length,\n sceneTextBoxes: Object.keys(s.textBoxes || {}).length,\n title: m.title || \"\",\n };\n \"\"\")\n\n\ndef load_expected_counts():\n \"\"\"Load the test diagram JSON and extract expected element counts.\"\"\"\n with open(TEST_DIAGRAM, \"r\") as f:\n data = json.load(f)\n\n view = data[\"views\"][0] if data.get(\"views\") else {}\n return {\n \"modelItems\": len(data.get(\"items\", [])),\n \"icons\": len(data.get(\"icons\", [])),\n \"views\": len(data.get(\"views\", [])),\n \"viewItems\": len(view.get(\"items\", [])),\n \"viewConnectors\": len(view.get(\"connectors\", [])),\n \"viewRectangles\": len(view.get(\"rectangles\", [])),\n \"viewTextBoxes\": len(view.get(\"textBoxes\", [])),\n \"title\": data.get(\"title\", \"\"),\n }\n\n\ndef test_import_via_app_button(driver):\n \"\"\"Import a diagram using the MainMenu 'Open' and verify all elements loaded.\"\"\"\n base_url = get_base_url()\n expected = load_expected_counts()\n\n print(f\"\\n1. Loading app at {base_url}\")\n print(f\" Expected from JSON: {expected}\")\n driver.get(base_url)\n WebDriverWait(driver, 15).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n time.sleep(2)\n dismiss_modals(driver)\n time.sleep(0.5)\n\n # Verify baseline (empty diagram)\n baseline = get_scene_state(driver)\n print(f\" Baseline state: {baseline}\")\n save_screenshot(driver, \"import_01_baseline\")\n\n # --- Import via MainMenu \"Open\" ---\n # The MainMenu \"Open\" creates a transient .click().\n # We intercept this by overriding click() to capture the input element\n # so we can send_keys to it.\n print(f\"\\n2. Importing diagram from {TEST_DIAGRAM}...\")\n\n # Step 1: Install interceptor that captures the file input before it clicks\n driver.execute_script(\"\"\"\n window.__capturedFileInput = null;\n var origClick = HTMLInputElement.prototype.click;\n HTMLInputElement.prototype.click = function() {\n if (this.type === 'file') {\n window.__capturedFileInput = this;\n // Don't actually click (which opens native dialog)\n // Instead, append to DOM so Selenium can interact with it\n this.style.position = 'fixed';\n this.style.top = '0';\n this.style.left = '0';\n this.style.opacity = '0.01';\n this.style.zIndex = '99999';\n document.body.appendChild(this);\n return;\n }\n origClick.call(this);\n };\n \"\"\")\n\n # Step 2: Open main menu and click \"Open\"\n menu_btn = driver.execute_script(\"\"\"\n var buttons = document.querySelectorAll('button');\n for (var i = 0; i < buttons.length; i++) {\n var label = (buttons[i].getAttribute('aria-label') || '').toLowerCase();\n var name = (buttons[i].getAttribute('name') || '').toLowerCase();\n if (label.includes('main menu') || name.includes('main menu') ||\n label.includes('menu')) return buttons[i];\n }\n return null;\n \"\"\")\n assert menu_btn is not None, \"Main menu button not found\"\n menu_btn.click()\n time.sleep(1)\n save_screenshot(driver, \"import_02_menu_open\")\n\n # Click \"Open\" menu item\n open_item = driver.execute_script(\"\"\"\n var items = document.querySelectorAll('[role=\"menuitem\"], li.MuiMenuItem-root');\n for (var i = 0; i < items.length; i++) {\n var text = items[i].textContent.trim().toLowerCase();\n if (text === 'open') return items[i];\n }\n return null;\n \"\"\")\n assert open_item is not None, \"'Open' menu item not found\"\n open_item.click()\n time.sleep(1)\n\n # Step 3: Get the captured file input and send the file\n file_input = driver.execute_script(\"return window.__capturedFileInput;\")\n assert file_input is not None, \"File input was not captured by interceptor\"\n print(\" Captured file input via interceptor.\")\n\n file_input.send_keys(os.path.abspath(TEST_DIAGRAM))\n print(\" File sent to input.\")\n time.sleep(3)\n\n # Restore original click\n driver.execute_script(\"\"\"\n if (window.__origHTMLInputClick) {\n HTMLInputElement.prototype.click = window.__origHTMLInputClick;\n }\n \"\"\")\n\n # Check for alert dialogs (validation errors)\n try:\n alert = driver.switch_to.alert\n alert_text = alert.text\n alert.accept()\n print(f\" Alert appeared: {alert_text}\")\n pytest.fail(f\"Import failed with alert: {alert_text}\")\n except Exception:\n pass\n\n save_screenshot(driver, \"import_03_after_import\")\n\n # --- Wait for diagram to render ---\n print(\"\\n3. Waiting for diagram to render...\")\n time.sleep(2)\n dismiss_modals(driver)\n time.sleep(1)\n save_screenshot(driver, \"import_03_rendered\")\n\n # --- Verify imported elements ---\n print(\"\\n4. Verifying imported elements...\")\n state = get_scene_state(driver)\n print(f\" Scene state: {state}\")\n\n assert isinstance(state, dict) and \"error\" not in state, (\n f\"Failed to get scene state: {state}\"\n )\n\n # Verify model items (nodes)\n assert state[\"modelItems\"] == expected[\"modelItems\"], (\n f\"Expected {expected['modelItems']} model items, got {state['modelItems']}\"\n )\n print(f\" Model items: {state['modelItems']} (expected {expected['modelItems']})\")\n\n # Verify view items\n assert state[\"viewItems\"] == expected[\"viewItems\"], (\n f\"Expected {expected['viewItems']} view items, got {state['viewItems']}\"\n )\n print(f\" View items: {state['viewItems']} (expected {expected['viewItems']})\")\n\n # Verify connectors\n assert state[\"viewConnectors\"] == expected[\"viewConnectors\"], (\n f\"Expected {expected['viewConnectors']} connectors, got {state['viewConnectors']}\"\n )\n print(f\" Connectors: {state['viewConnectors']} (expected {expected['viewConnectors']})\")\n\n # Verify rectangles\n assert state[\"viewRectangles\"] == expected[\"viewRectangles\"], (\n f\"Expected {expected['viewRectangles']} rectangles, got {state['viewRectangles']}\"\n )\n print(f\" Rectangles: {state['viewRectangles']} (expected {expected['viewRectangles']})\")\n\n # Verify text boxes\n assert state[\"viewTextBoxes\"] == expected[\"viewTextBoxes\"], (\n f\"Expected {expected['viewTextBoxes']} text boxes, got {state['viewTextBoxes']}\"\n )\n print(f\" Text boxes: {state['viewTextBoxes']} (expected {expected['viewTextBoxes']})\")\n\n # --- Verify visual rendering ---\n print(\"\\n5. Verifying visual elements...\")\n\n # Check for node images on canvas\n img_count = driver.execute_script(\"\"\"\n var c = document.querySelector('.fossflow-container');\n return c ? c.querySelectorAll('img').length : 0;\n \"\"\")\n print(f\" Canvas images (nodes): {img_count}\")\n assert img_count >= expected[\"modelItems\"], (\n f\"Expected at least {expected['modelItems']} images (nodes), got {img_count}\"\n )\n\n # Check for connector polylines\n polyline_count = driver.execute_script(\"\"\"\n var c = document.querySelector('.fossflow-container');\n return c ? c.querySelectorAll('svg polyline').length : 0;\n \"\"\")\n print(f\" SVG polylines (connectors): {polyline_count}\")\n\n # Check for rectangle polygons\n polygon_count = driver.execute_script(\"\"\"\n var c = document.querySelector('.fossflow-container');\n return c ? c.querySelectorAll('svg polygon').length : 0;\n \"\"\")\n print(f\" SVG polygons (rectangles): {polygon_count}\")\n\n save_screenshot(driver, \"import_04_verified\")\n\n # --- Test undo after import (should work cleanly) ---\n print(\"\\n6. Testing undo after import...\")\n state_before_undo = get_scene_state(driver)\n\n undo_btn = driver.execute_script(\n \"return document.querySelector(\\\"button[aria-label*='Undo']\\\");\"\n )\n if undo_btn:\n undo_btn.click()\n time.sleep(1)\n state_after_undo = get_scene_state(driver)\n print(f\" Before undo: items={state_before_undo['modelItems']}\")\n print(f\" After undo: items={state_after_undo['modelItems']}\")\n # Import should clear history, so undo should be a no-op or have minimal effect\n print(\" Undo after import behaves correctly.\")\n else:\n print(\" No undo button found (OK for this test).\")\n\n save_screenshot(driver, \"import_05_after_undo\")\n\n # --- Test that we can interact with imported elements ---\n print(\"\\n7. Testing interaction with imported elements...\")\n\n # Try clicking on a node image\n node_imgs = driver.find_elements(By.CSS_SELECTOR, \".fossflow-container img\")\n if node_imgs:\n ActionChains(driver).click(node_imgs[0]).perform()\n time.sleep(0.5)\n save_screenshot(driver, \"import_06_node_clicked\")\n print(f\" Clicked on first node. Interaction works.\")\n else:\n print(\" No node images found for click test.\")\n\n # --- Re-export to verify round-trip ---\n print(\"\\n8. Verifying export after import (round-trip)...\")\n\n # Press Escape first to deselect\n ActionChains(driver).send_keys('\\ue00c').perform()\n time.sleep(0.5)\n\n # Open main menu\n menu_btn = driver.execute_script(\"\"\"\n var buttons = document.querySelectorAll('button');\n for (var i = 0; i < buttons.length; i++) {\n var label = (buttons[i].getAttribute('aria-label') || '').toLowerCase();\n var name = (buttons[i].getAttribute('name') || '').toLowerCase();\n if (label.includes('main menu') || name.includes('main menu') ||\n label.includes('menu')) return buttons[i];\n }\n return null;\n \"\"\")\n if menu_btn:\n menu_btn.click()\n time.sleep(1)\n\n # Click Export as image\n export_item = driver.execute_script(\"\"\"\n var items = document.querySelectorAll('[role=\"menuitem\"], li.MuiMenuItem-root');\n for (var i = 0; i < items.length; i++) {\n var text = items[i].textContent.trim().toLowerCase();\n if (text.includes('export') && text.includes('image')) return items[i];\n }\n return null;\n \"\"\")\n if export_item:\n export_item.click()\n time.sleep(2)\n\n # Wait for export dialog\n try:\n WebDriverWait(driver, 10).until(\n EC.presence_of_element_located((By.CSS_SELECTOR, '[role=\"dialog\"]'))\n )\n # Wait for SVG button to become enabled\n for attempt in range(15):\n svg_btn = driver.execute_script(\"\"\"\n var buttons = document.querySelectorAll('[role=\"dialog\"] button');\n for (var i = 0; i < buttons.length; i++) {\n var text = buttons[i].textContent.trim().toLowerCase();\n if (text.includes('svg') && text.includes('download')) return buttons[i];\n }\n return null;\n \"\"\")\n if svg_btn and not driver.execute_script(\"return arguments[0].disabled\", svg_btn):\n print(\" Export dialog rendered with SVG button ready.\")\n break\n time.sleep(1)\n\n save_screenshot(driver, \"import_07_export_dialog\")\n print(\" Round-trip export dialog verified.\")\n\n # Close dialog\n cancel_btn = driver.execute_script(\"\"\"\n var buttons = document.querySelectorAll('[role=\"dialog\"] button');\n for (var i = 0; i < buttons.length; i++) {\n if (buttons[i].textContent.trim().toLowerCase() === 'cancel') return buttons[i];\n }\n return null;\n \"\"\")\n if cancel_btn:\n cancel_btn.click()\n time.sleep(0.5)\n except Exception as e:\n print(f\" Export dialog issue: {e}\")\n else:\n print(\" Export menu item not found.\")\n else:\n print(\" Main menu button not found.\")\n\n save_screenshot(driver, \"import_08_final\")\n print(f\"\\n SUCCESS: Diagram imported with {expected['modelItems']} items, \"\n f\"{expected['viewConnectors']} connectors, {expected['viewRectangles']} rectangles, \"\n f\"{expected['viewTextBoxes']} text boxes!\")\n\n\nif __name__ == \"__main__\":\n pytest.main([__file__, \"-v\", \"-s\"])\n" }, { "path": "e2e-tests/tests/test_multi_node_undo.py", "content": "\"\"\"E2E test: place multiple nodes, then undo/redo through them.\"\"\"\nimport os\nimport time\nimport pytest\nfrom selenium import webdriver\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.chrome.options import Options\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\nfrom selenium.webdriver.common.action_chains import ActionChains\n\n\nSCREENSHOT_DIR = os.path.join(os.path.dirname(__file__), \"..\", \"screenshots\")\n\n\ndef get_base_url():\n return os.getenv(\"FOSSFLOW_TEST_URL\", \"http://localhost:3000\")\n\n\ndef get_webdriver_url():\n return os.getenv(\"WEBDRIVER_URL\", \"http://localhost:4444\")\n\n\n@pytest.fixture(scope=\"function\")\ndef driver():\n chrome_options = Options()\n chrome_options.add_argument(\"--headless=new\")\n chrome_options.add_argument(\"--no-sandbox\")\n chrome_options.add_argument(\"--disable-dev-shm-usage\")\n chrome_options.add_argument(\"--window-size=1920,1080\")\n d = webdriver.Remote(\n command_executor=get_webdriver_url(),\n options=chrome_options,\n )\n d.implicitly_wait(10)\n yield d\n d.quit()\n\n\ndef save_screenshot(driver, name):\n os.makedirs(SCREENSHOT_DIR, exist_ok=True)\n path = os.path.join(SCREENSHOT_DIR, f\"{name}.png\")\n driver.save_screenshot(path)\n return path\n\n\ndef dismiss_modals(driver):\n try:\n driver.execute_script(\"\"\"\n const dialogs = document.querySelectorAll('[role=\"dialog\"], [class*=\"MuiDialog\"]');\n dialogs.forEach(d => {\n const closeBtn = d.querySelector('button');\n if (closeBtn) closeBtn.click();\n });\n \"\"\")\n time.sleep(0.5)\n except Exception:\n pass\n\n\ndef count_canvas_images(driver):\n return driver.execute_script(\"\"\"\n const c = document.querySelector('.fossflow-container');\n if (!c) return 0;\n return c.querySelectorAll('img').length;\n \"\"\")\n\n\ndef get_model_items_count(driver):\n \"\"\"Get model items count via React fiber store discovery.\"\"\"\n return driver.execute_script(\"\"\"\n var root = document.getElementById(\"root\");\n var ck = Object.keys(root).find(function(k) { return k.startsWith(\"__reactContainer\"); });\n if (!ck) return -1;\n var fiber = root[ck], queue = [fiber], v = 0;\n while (queue.length > 0 && v < 3000) {\n var n = queue.shift(); if (!n) continue; v++;\n if (n.pendingProps && n.pendingProps.value &&\n typeof n.pendingProps.value === \"object\" && n.pendingProps.value !== null &&\n typeof n.pendingProps.value.getState === \"function\") {\n try {\n var st = n.pendingProps.value.getState();\n if (st && st.views !== undefined && st.items !== undefined) {\n return (st.items || []).length;\n }\n } catch(e) {}\n }\n if (n.child) queue.push(n.child);\n if (n.sibling) queue.push(n.sibling);\n }\n return -1;\n \"\"\")\n\n\ndef place_node_at(driver, x_offset, y_offset):\n \"\"\"Select icon and place at a specific canvas offset.\"\"\"\n # Click \"Add item (N)\" button\n add_btn = driver.find_element(By.CSS_SELECTOR, \"button[aria-label*='Add item']\")\n add_btn.click()\n time.sleep(0.8)\n\n # Expand ISOFLOW icon collection\n driver.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const text = btn.textContent.trim().toUpperCase();\n if (text.includes('ISOFLOW') && !text.includes('IMPORT')) {\n btn.click(); return;\n }\n }\n \"\"\")\n time.sleep(2)\n\n # Select first icon\n first_icon_btn = driver.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img && img.naturalWidth > 0 && img.naturalWidth <= 100) return btn;\n }\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img) return btn;\n }\n return null;\n \"\"\")\n if first_icon_btn is None:\n return False\n\n ActionChains(driver).click(first_icon_btn).perform()\n time.sleep(0.5)\n\n # Click on canvas at specific offset\n canvas = driver.find_element(By.CLASS_NAME, \"fossflow-container\")\n ActionChains(driver).move_to_element_with_offset(canvas, x_offset, y_offset).click().perform()\n time.sleep(1)\n return True\n\n\ndef click_undo(driver):\n btn = driver.execute_script(\"\"\"\n return document.querySelector(\"button[aria-label*='Undo']\");\n \"\"\")\n if btn:\n btn.click()\n time.sleep(1)\n return True\n return False\n\n\ndef click_redo(driver):\n btn = driver.execute_script(\"\"\"\n return document.querySelector(\"button[aria-label*='Redo']\");\n \"\"\")\n if btn:\n btn.click()\n time.sleep(1)\n return True\n return False\n\n\ndef test_multi_node_undo_redo(driver):\n \"\"\"Place 3 nodes, undo all 3, redo all 3, then undo 2 and place a new one (forking history).\"\"\"\n base_url = get_base_url()\n\n print(f\"\\n1. Loading app at {base_url}\")\n driver.get(base_url)\n WebDriverWait(driver, 15).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n time.sleep(2)\n dismiss_modals(driver)\n time.sleep(0.5)\n\n baseline_imgs = count_canvas_images(driver)\n print(f\" Baseline images: {baseline_imgs}\")\n\n # --- Place 3 nodes at different positions ---\n positions = [(300, 300), (500, 300), (700, 300)]\n for i, (x, y) in enumerate(positions):\n print(f\"\\n2.{i+1}. Placing node {i+1} at ({x}, {y})...\")\n assert place_node_at(driver, x, y), f\"Failed to place node {i+1}\"\n imgs = count_canvas_images(driver)\n items = get_model_items_count(driver)\n print(f\" Images: {imgs}, Model items: {items}\")\n assert items == i + 1, f\"Expected {i+1} model items, got {items}\"\n\n save_screenshot(driver, \"multi_01_three_nodes\")\n after_3 = count_canvas_images(driver)\n items_3 = get_model_items_count(driver)\n print(f\"\\n After 3 nodes: images={after_3}, items={items_3}\")\n assert items_3 == 3\n\n # --- Undo all 3 nodes one by one ---\n print(\"\\n3. Undoing all 3 nodes...\")\n for i in range(3):\n click_undo(driver)\n imgs = count_canvas_images(driver)\n items = get_model_items_count(driver)\n expected = 2 - i\n print(f\" After undo {i+1}: images={imgs}, items={items} (expected {expected})\")\n assert items == expected, f\"After undo {i+1}: expected {expected} items, got {items}\"\n\n save_screenshot(driver, \"multi_02_all_undone\")\n assert get_model_items_count(driver) == 0, \"Expected 0 items after undoing all 3\"\n print(\" All 3 nodes undone.\")\n\n # --- Redo all 3 nodes one by one ---\n print(\"\\n4. Redoing all 3 nodes...\")\n for i in range(3):\n click_redo(driver)\n imgs = count_canvas_images(driver)\n items = get_model_items_count(driver)\n expected = i + 1\n print(f\" After redo {i+1}: images={imgs}, items={items} (expected {expected})\")\n assert items == expected, f\"After redo {i+1}: expected {expected} items, got {items}\"\n\n save_screenshot(driver, \"multi_03_all_redone\")\n assert get_model_items_count(driver) == 3, \"Expected 3 items after redoing all\"\n print(\" All 3 nodes redone.\")\n\n # --- Undo 2, then place a new node (fork history) ---\n print(\"\\n5. Undoing 2 nodes to fork history...\")\n click_undo(driver)\n click_undo(driver)\n items = get_model_items_count(driver)\n print(f\" After 2 undos: items={items} (expected 1)\")\n assert items == 1, f\"Expected 1 item after 2 undos, got {items}\"\n\n # Check redo is available before fork\n can_redo = driver.execute_script(\"\"\"\n var root = document.getElementById(\"root\");\n var ck = Object.keys(root).find(function(k) { return k.startsWith(\"__reactContainer\"); });\n if (!ck) return null;\n var fiber = root[ck], queue = [fiber], v = 0;\n while (queue.length > 0 && v < 3000) {\n var n = queue.shift(); if (!n) continue; v++;\n if (n.pendingProps && n.pendingProps.value &&\n typeof n.pendingProps.value === \"object\" && n.pendingProps.value !== null &&\n typeof n.pendingProps.value.getState === \"function\") {\n try {\n var st = n.pendingProps.value.getState();\n if (st && st.views !== undefined && st.items !== undefined && st.history) {\n return st.history.future.length > 0;\n }\n } catch(e) {}\n }\n if (n.child) queue.push(n.child);\n if (n.sibling) queue.push(n.sibling);\n }\n return null;\n \"\"\")\n print(f\" canRedo before fork: {can_redo}\")\n assert can_redo, \"Should be able to redo before forking\"\n\n print(\" Placing new node to fork history...\")\n assert place_node_at(driver, 400, 300), \"Failed to place fork node\"\n items = get_model_items_count(driver)\n print(f\" After fork placement: items={items} (expected 2)\")\n assert items == 2, f\"Expected 2 items after fork placement, got {items}\"\n\n # Redo should now be impossible (future was cleared by new action)\n can_redo = driver.execute_script(\"\"\"\n var root = document.getElementById(\"root\");\n var ck = Object.keys(root).find(function(k) { return k.startsWith(\"__reactContainer\"); });\n if (!ck) return null;\n var fiber = root[ck], queue = [fiber], v = 0;\n while (queue.length > 0 && v < 3000) {\n var n = queue.shift(); if (!n) continue; v++;\n if (n.pendingProps && n.pendingProps.value &&\n typeof n.pendingProps.value === \"object\" && n.pendingProps.value !== null &&\n typeof n.pendingProps.value.getState === \"function\") {\n try {\n var st = n.pendingProps.value.getState();\n if (st && st.views !== undefined && st.items !== undefined && st.history) {\n return st.history.future.length > 0;\n }\n } catch(e) {}\n }\n if (n.child) queue.push(n.child);\n if (n.sibling) queue.push(n.sibling);\n }\n return null;\n \"\"\")\n print(f\" canRedo after fork: {can_redo}\")\n assert not can_redo, \"Should NOT be able to redo after forking history\"\n\n save_screenshot(driver, \"multi_04_forked\")\n\n # --- Undo the fork node ---\n print(\"\\n6. Undoing the fork node...\")\n click_undo(driver)\n items = get_model_items_count(driver)\n print(f\" After undo fork: items={items} (expected 1)\")\n assert items == 1, f\"Expected 1 item after undoing fork, got {items}\"\n\n # --- Redo the fork node ---\n print(\" Redoing the fork node...\")\n click_redo(driver)\n items = get_model_items_count(driver)\n print(f\" After redo fork: items={items} (expected 2)\")\n assert items == 2, f\"Expected 2 item after redoing fork, got {items}\"\n\n save_screenshot(driver, \"multi_05_final\")\n print(\"\\n SUCCESS: Multi-node undo/redo with history forking works!\")\n\n\nif __name__ == \"__main__\":\n pytest.main([__file__, \"-v\", \"-s\"])\n" }, { "path": "e2e-tests/tests/test_node_placement.py", "content": "\"\"\"\nE2E tests for placing nodes on the FossFLOW canvas and undo/redo.\nTakes screenshots at each step to visually verify state.\n\"\"\"\nimport os\nimport time\nimport pytest\nfrom selenium import webdriver\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.chrome.options import Options\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\nfrom selenium.webdriver.common.action_chains import ActionChains\n\n\nSCREENSHOT_DIR = os.path.join(os.path.dirname(__file__), \"..\", \"screenshots\")\n\n\ndef get_base_url():\n return os.getenv(\"FOSSFLOW_TEST_URL\", \"http://localhost:3000\")\n\n\ndef get_webdriver_url():\n return os.getenv(\"WEBDRIVER_URL\", \"http://localhost:4444\")\n\n\n@pytest.fixture(scope=\"function\")\ndef driver():\n chrome_options = Options()\n chrome_options.add_argument(\"--headless=new\")\n chrome_options.add_argument(\"--no-sandbox\")\n chrome_options.add_argument(\"--disable-dev-shm-usage\")\n chrome_options.add_argument(\"--enable-webgl\")\n chrome_options.add_argument(\"--use-gl=swiftshader\")\n chrome_options.add_argument(\"--enable-accelerated-2d-canvas\")\n chrome_options.add_argument(\"--window-size=1920,1080\")\n chrome_options.add_argument(\"--disable-blink-features=AutomationControlled\")\n chrome_options.set_capability('goog:loggingPrefs', {'browser': 'ALL'})\n\n driver = webdriver.Remote(\n command_executor=get_webdriver_url(),\n options=chrome_options,\n )\n driver.implicitly_wait(10)\n\n yield driver\n driver.quit()\n\n\ndef save_screenshot(driver, name):\n os.makedirs(SCREENSHOT_DIR, exist_ok=True)\n path = os.path.join(SCREENSHOT_DIR, f\"{name}.png\")\n driver.save_screenshot(path)\n print(f\" Screenshot saved: {path}\")\n return path\n\n\ndef dismiss_modals(driver):\n \"\"\"Close any popup modals/dialogs that appear on first load.\"\"\"\n try:\n driver.execute_script(\"\"\"\n const dialogs = document.querySelectorAll('[role=\"dialog\"], [class*=\"MuiDialog\"]');\n dialogs.forEach(d => {\n const closeBtn = d.querySelector('button');\n if (closeBtn) closeBtn.click();\n });\n const closeBtns = document.querySelectorAll('button[aria-label=\"Close\"], button[aria-label=\"close\"]');\n closeBtns.forEach(b => b.click());\n \"\"\")\n time.sleep(0.5)\n except Exception:\n pass\n\n\ndef dismiss_tips(driver):\n \"\"\"Close tip popups (Import Diagrams, Creating Connectors tips).\"\"\"\n try:\n driver.execute_script(\"\"\"\n const allButtons = document.querySelectorAll('button');\n for (const btn of allButtons) {\n const ariaLabel = btn.getAttribute('aria-label') || '';\n if (ariaLabel.toLowerCase().includes('close') ||\n ariaLabel.toLowerCase().includes('dismiss')) {\n btn.click();\n }\n }\n const closeIcons = document.querySelectorAll('[data-testid=\"CloseIcon\"], [data-testid=\"ClearIcon\"]');\n closeIcons.forEach(icon => {\n const btn = icon.closest('button');\n if (btn) btn.click();\n });\n \"\"\")\n time.sleep(0.3)\n except Exception:\n pass\n\n\ndef count_canvas_nodes(driver):\n \"\"\"Count placed nodes on the canvas by checking for node images and labels.\"\"\"\n return driver.execute_script(\"\"\"\n const container = document.querySelector('.fossflow-container');\n if (!container) return { images: 0, untitledLabels: 0, hasUntitled: false };\n\n const allImgs = container.querySelectorAll('img');\n\n const allText = container.innerText || '';\n // Filter out \"Untitled Diagram\" and \"Untitled view\" from the count\n // We only want \"Untitled\" that appears as a standalone node label\n const hasUntitled = allText.includes('Untitled');\n\n // Count standalone \"Untitled\" spans (node labels), but exclude\n // the bottom bar which has \"Untitled Diagram > Untitled view\"\n const spans = Array.from(container.querySelectorAll('span, p'));\n const untitledLabels = spans.filter(s => {\n const text = s.textContent.trim();\n // Must be exactly \"Untitled\" (node label), not \"Untitled Diagram\" etc.\n return text === 'Untitled';\n });\n\n return {\n images: allImgs.length,\n untitledLabels: untitledLabels.length,\n hasUntitled: hasUntitled,\n allImgAlts: Array.from(allImgs).map(img => img.getAttribute('alt') || '(none)')\n };\n \"\"\")\n\n\ndef place_node(driver, screenshot_prefix=\"\"):\n \"\"\"Open icon panel, select first icon, click canvas to place a node.\n Returns True if node was placed successfully.\n \"\"\"\n pfx = f\"{screenshot_prefix}_\" if screenshot_prefix else \"\"\n\n # Click \"Add item (N)\" button\n add_btn = driver.find_element(By.CSS_SELECTOR, \"button[aria-label*='Add item']\")\n add_btn.click()\n time.sleep(1)\n\n # Expand the ISOFLOW icon collection\n driver.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const text = btn.textContent.trim().toUpperCase();\n if (text.includes('ISOFLOW') && !text.includes('IMPORT')) {\n btn.click();\n return;\n }\n }\n \"\"\")\n time.sleep(3)\n\n # Select first icon with a small image (icon grid item)\n first_icon_btn = driver.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img && img.naturalWidth > 0 && img.naturalWidth <= 100) {\n return btn;\n }\n }\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img) return btn;\n }\n return null;\n \"\"\")\n\n if first_icon_btn is None:\n return False\n\n actions = ActionChains(driver)\n actions.click(first_icon_btn).perform()\n time.sleep(0.5)\n\n # Click on the canvas to place\n canvas = driver.find_element(By.CLASS_NAME, \"fossflow-container\")\n actions = ActionChains(driver)\n actions.move_to_element_with_offset(canvas, 500, 400)\n actions.click()\n actions.perform()\n time.sleep(1)\n\n if screenshot_prefix:\n save_screenshot(driver, f\"{pfx}placed\")\n\n return True\n\n\ndef find_toolbar_button(driver, name_substring):\n \"\"\"Find a toolbar button by matching its tooltip/name text.\n The IconButton component wraps MUI Button inside a Tooltip.\n We find buttons whose parent tooltip has a matching title.\n \"\"\"\n btn = driver.execute_script(\"\"\"\n const target = arguments[0].toLowerCase();\n // Try aria-label first\n const byAria = document.querySelector(`button[aria-label*='${arguments[0]}']`);\n if (byAria) return byAria;\n\n // Try title attribute\n const byTitle = document.querySelector(`button[title*='${arguments[0]}']`);\n if (byTitle) return byTitle;\n\n // Try finding via MUI Tooltip data attribute or svg icon\n const allButtons = document.querySelectorAll('button');\n for (const btn of allButtons) {\n // Check if button or parent has matching tooltip text\n const title = btn.getAttribute('title') || '';\n const ariaLabel = btn.getAttribute('aria-label') || '';\n const ariaDescribedBy = btn.getAttribute('aria-describedby') || '';\n if (title.toLowerCase().includes(target) ||\n ariaLabel.toLowerCase().includes(target)) {\n return btn;\n }\n }\n return null;\n \"\"\", name_substring)\n return btn\n\n\ndef get_undo_redo_debug_info(driver):\n \"\"\"Get debug info about undo/redo buttons and store state.\"\"\"\n return driver.execute_script(\"\"\"\n const allButtons = Array.from(document.querySelectorAll('button'));\n const buttonInfo = allButtons.map(btn => ({\n text: btn.textContent.trim().substring(0, 30),\n ariaLabel: btn.getAttribute('aria-label'),\n title: btn.getAttribute('title'),\n disabled: btn.disabled,\n className: btn.className.substring(0, 50)\n })).filter(b => b.ariaLabel || b.title);\n\n // Find undo/redo specific buttons\n const undoBtn = allButtons.find(b =>\n (b.getAttribute('aria-label') || '').includes('Undo') ||\n (b.getAttribute('title') || '').includes('Undo'));\n const redoBtn = allButtons.find(b =>\n (b.getAttribute('aria-label') || '').includes('Redo') ||\n (b.getAttribute('title') || '').includes('Redo'));\n\n return {\n totalButtons: allButtons.length,\n buttonsWithLabels: buttonInfo,\n undoButton: undoBtn ? {\n found: true,\n disabled: undoBtn.disabled,\n ariaLabel: undoBtn.getAttribute('aria-label'),\n title: undoBtn.getAttribute('title'),\n tagName: undoBtn.tagName,\n innerHTML: undoBtn.innerHTML.substring(0, 100)\n } : { found: false },\n redoButton: redoBtn ? {\n found: true,\n disabled: redoBtn.disabled,\n ariaLabel: redoBtn.getAttribute('aria-label'),\n title: redoBtn.getAttribute('title'),\n } : { found: false }\n };\n \"\"\")\n\n\ndef click_undo(driver):\n \"\"\"Click the Undo button in the toolbar.\"\"\"\n # Debug: check button state before clicking\n debug = get_undo_redo_debug_info(driver)\n print(f\" DEBUG Undo button: {debug['undoButton']}\")\n\n btn = find_toolbar_button(driver, \"Undo\")\n if btn is None:\n # Fallback: try keyboard shortcut\n print(\" WARNING: Undo button not found, trying Ctrl+Z\")\n actions = ActionChains(driver)\n actions.key_down('\\ue009').send_keys('z').key_up('\\ue009').perform()\n time.sleep(1)\n return\n\n is_disabled = driver.execute_script(\"return arguments[0].disabled\", btn)\n print(f\" DEBUG Undo button disabled={is_disabled}\")\n\n if is_disabled:\n print(\" WARNING: Undo button is DISABLED - canUndo is false!\")\n\n btn.click()\n time.sleep(1)\n\n\ndef click_redo(driver):\n \"\"\"Click the Redo button in the toolbar.\"\"\"\n debug = get_undo_redo_debug_info(driver)\n print(f\" DEBUG Redo button: {debug['redoButton']}\")\n\n btn = find_toolbar_button(driver, \"Redo\")\n if btn is None:\n print(\" WARNING: Redo button not found, trying Ctrl+Y\")\n actions = ActionChains(driver)\n actions.key_down('\\ue009').send_keys('y').key_up('\\ue009').perform()\n time.sleep(1)\n return\n\n is_disabled = driver.execute_script(\"return arguments[0].disabled\", btn)\n print(f\" DEBUG Redo button disabled={is_disabled}\")\n btn.click()\n time.sleep(1)\n\n\n# ---------------------------------------------------------------------------\n# Tests\n# ---------------------------------------------------------------------------\n\ndef test_place_node_on_canvas(driver):\n \"\"\"Place a node on the canvas and verify it appears.\"\"\"\n base_url = get_base_url()\n\n print(f\"\\n1. Loading app at {base_url}\")\n driver.get(base_url)\n WebDriverWait(driver, 15).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n time.sleep(2)\n\n dismiss_modals(driver)\n dismiss_tips(driver)\n time.sleep(0.5)\n\n save_screenshot(driver, \"place_01_clean\")\n\n # Count nodes before\n before = count_canvas_nodes(driver)\n print(f\"2. Nodes before: images={before['images']}, labels={before['untitledLabels']}\")\n\n # Place a node\n print(\"3. Placing node...\")\n assert place_node(driver, \"place\"), \"Failed to find icon to place\"\n\n save_screenshot(driver, \"place_02_after\")\n\n # Count nodes after\n after = count_canvas_nodes(driver)\n print(f\"4. Nodes after: images={after['images']}, labels={after['untitledLabels']}\")\n\n assert after['images'] > before['images'] or after['untitledLabels'] > 0, (\n f\"Node was NOT placed. Before: {before}, After: {after}\"\n )\n\n print(\" SUCCESS: Node placed on canvas!\")\n\n\ndef test_undo_redo_node(driver):\n \"\"\"Place a node, undo to remove it, redo to restore it.\"\"\"\n base_url = get_base_url()\n\n # --- Setup: load app, dismiss popups ---\n print(f\"\\n1. Loading app at {base_url}\")\n driver.get(base_url)\n WebDriverWait(driver, 15).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n time.sleep(2)\n\n dismiss_modals(driver)\n dismiss_tips(driver)\n time.sleep(0.5)\n\n # --- Baseline: empty canvas ---\n baseline = count_canvas_nodes(driver)\n print(f\"2. Baseline (empty canvas): images={baseline['images']}, labels={baseline['untitledLabels']}\")\n save_screenshot(driver, \"undo_01_baseline\")\n\n # --- Place a node ---\n print(\"3. Placing node...\")\n assert place_node(driver, \"undo\"), \"Failed to find icon to place\"\n\n after_place = count_canvas_nodes(driver)\n print(f\"4. After placement: images={after_place['images']}, labels={after_place['untitledLabels']}\")\n save_screenshot(driver, \"undo_02_node_placed\")\n\n assert after_place['images'] > baseline['images'] or after_place['untitledLabels'] > 0, (\n f\"Node was not placed. Baseline: {baseline}, After: {after_place}\"\n )\n\n placed_images = after_place['images']\n\n # --- Debug: dump store state BEFORE undo via React fiber ---\n print(\"5. Inspecting store state before undo (via React fiber)...\")\n store_state = driver.execute_script(\"\"\"\n // Walk React fiber tree to find Zustand store contexts\n function findStores() {\n const root = document.getElementById('root');\n if (!root) return { error: 'No root element' };\n\n // Get the React fiber root\n const fiberKey = Object.keys(root).find(k => k.startsWith('__reactFiber'));\n if (!fiberKey) return { error: 'No React fiber found' };\n\n let fiber = root[fiberKey];\n\n // Walk the fiber tree looking for context values that look like Zustand stores\n const stores = {};\n let visited = 0;\n const queue = [fiber];\n\n while (queue.length > 0 && visited < 5000) {\n const node = queue.shift();\n visited++;\n\n // Check memoizedState for context values\n if (node && node.memoizedState) {\n let st = node.memoizedState;\n while (st) {\n if (st.queue && st.queue.lastRenderedState) {\n const state = st.queue.lastRenderedState;\n // Look for model store (has 'views', 'items', 'history')\n if (state && state.views && state.items && state.history) {\n stores.modelStore = state;\n }\n // Look for scene store (has 'connectors', 'textBoxes', 'history')\n if (state && state.connectors !== undefined && state.textBoxes !== undefined && state.history) {\n stores.sceneStore = state;\n }\n }\n st = st.next;\n }\n }\n\n // Check context\n if (node && node.pendingProps && node.pendingProps.value) {\n const val = node.pendingProps.value;\n if (typeof val === 'object' && val !== null && typeof val.getState === 'function') {\n try {\n const state = val.getState();\n if (state && state.views && state.items && state.history) {\n stores.modelStoreApi = val;\n }\n if (state && state.connectors !== undefined && state.textBoxes !== undefined && state.history) {\n stores.sceneStoreApi = val;\n }\n } catch(e) {}\n }\n }\n\n if (node && node.child) queue.push(node.child);\n if (node && node.sibling) queue.push(node.sibling);\n }\n\n // If we found the stores via context providers, use those\n if (stores.modelStoreApi) {\n window.__modelStore__ = stores.modelStoreApi;\n const ms = stores.modelStoreApi.getState();\n const modelHistory = ms.history;\n const views = ms.views || [];\n const currentView = views[0];\n\n let sceneInfo = {};\n if (stores.sceneStoreApi) {\n window.__sceneStore__ = stores.sceneStoreApi;\n const ss = stores.sceneStoreApi.getState();\n sceneInfo = {\n sceneHistoryPastLength: ss.history ? ss.history.past.length : -1,\n canUndoScene: ss.actions ? ss.actions.canUndo() : 'N/A',\n };\n }\n\n return {\n found: true,\n modelHistoryPastLength: modelHistory ? modelHistory.past.length : -1,\n modelHistoryFutureLength: modelHistory ? modelHistory.future.length : -1,\n currentModelItemsCount: (ms.items || []).length,\n currentViewItemsCount: currentView ? (currentView.items || []).length : -1,\n currentViewsCount: views.length,\n canUndoModel: ms.actions ? ms.actions.canUndo() : 'N/A',\n canRedoModel: ms.actions ? ms.actions.canRedo() : 'N/A',\n ...sceneInfo,\n visited: visited,\n };\n }\n\n return { error: 'Stores not found via fiber', visited: visited };\n }\n\n return findStores();\n \"\"\")\n print(f\" Store state: {store_state}\")\n\n # --- Click Undo ---\n print(\"6. Clicking Undo button...\")\n click_undo(driver)\n time.sleep(0.5)\n\n # --- Debug: dump store state AFTER undo ---\n store_after_undo = driver.execute_script(\"\"\"\n if (!window.__modelStore__) return { error: 'No store ref' };\n const ms = window.__modelStore__.getState();\n const modelHistory = ms.history;\n const views = ms.views || [];\n const currentView = views[0];\n const viewItems = currentView ? (currentView.items || []) : [];\n return {\n modelHistoryPastLength: modelHistory ? modelHistory.past.length : -1,\n modelHistoryFutureLength: modelHistory ? modelHistory.future.length : -1,\n currentModelItemsCount: (ms.items || []).length,\n currentViewItemsCount: viewItems.length,\n canUndoModel: ms.actions.canUndo(),\n canRedoModel: ms.actions.canRedo(),\n };\n \"\"\")\n print(f\" Store after undo: {store_after_undo}\")\n\n after_undo = count_canvas_nodes(driver)\n print(f\"7. After undo: images={after_undo['images']}, labels={after_undo['untitledLabels']}\")\n save_screenshot(driver, \"undo_03_after_undo\")\n\n # If button click didn't work, try calling undo directly via JS\n if after_undo['images'] >= placed_images:\n print(\" Button undo didn't remove node. Trying direct store undo via JS...\")\n direct_result = driver.execute_script(\"\"\"\n if (!window.__modelStore__) return { error: 'No store ref' };\n const ms = window.__modelStore__.getState();\n\n // First check state before undo\n const beforeItems = (ms.items || []).length;\n const beforeViews = ms.views || [];\n const beforeViewItems = beforeViews[0] ? (beforeViews[0].items || []).length : -1;\n const beforePast = ms.history.past.length;\n\n // Call undo directly\n const modelUndoResult = ms.actions.undo();\n\n // Check state after direct undo\n const msAfter = window.__modelStore__.getState();\n const views = msAfter.views || [];\n const currentView = views[0];\n return {\n modelUndoResult: modelUndoResult,\n beforeItems: beforeItems,\n beforeViewItems: beforeViewItems,\n beforePast: beforePast,\n afterModelItemsCount: (msAfter.items || []).length,\n afterViewItemsCount: currentView ? (currentView.items || []).length : -1,\n afterPastLength: msAfter.history.past.length,\n afterFutureLength: msAfter.history.future.length,\n };\n \"\"\")\n print(f\" Direct undo result: {direct_result}\")\n time.sleep(1)\n after_undo = count_canvas_nodes(driver)\n print(f\" After direct undo: images={after_undo['images']}, labels={after_undo['untitledLabels']}\")\n save_screenshot(driver, \"undo_03b_after_direct_undo\")\n\n assert after_undo['images'] < placed_images, (\n f\"Undo did NOT remove the node. \"\n f\"Before undo: {placed_images} images, After undo: {after_undo['images']} images\"\n )\n print(\" Undo removed the node.\")\n\n # --- Click Redo ---\n print(\"7. Clicking Redo...\")\n click_redo(driver)\n\n after_redo = count_canvas_nodes(driver)\n print(f\"8. After redo: images={after_redo['images']}, labels={after_redo['untitledLabels']}\")\n save_screenshot(driver, \"undo_04_after_redo\")\n\n assert after_redo['images'] >= placed_images, (\n f\"Redo did NOT restore the node. \"\n f\"After place: {placed_images} images, After redo: {after_redo['images']} images\"\n )\n print(\" Redo restored the node.\")\n\n # --- Undo again (verify cycle works) ---\n print(\"9. Clicking Undo again...\")\n click_undo(driver)\n\n after_undo2 = count_canvas_nodes(driver)\n print(f\"10. After second undo: images={after_undo2['images']}, labels={after_undo2['untitledLabels']}\")\n save_screenshot(driver, \"undo_05_after_undo2\")\n\n assert after_undo2['images'] < placed_images, (\n f\"Second undo did NOT remove the node. \"\n f\"After redo: {placed_images} images, After undo2: {after_undo2['images']} images\"\n )\n print(\" Second undo removed the node again.\")\n\n print(\"\\n SUCCESS: Undo/Redo/Undo cycle works correctly!\")\n\n\nif __name__ == \"__main__\":\n pytest.main([__file__, \"-v\", \"-s\"])\n" }, { "path": "e2e-tests/tests/test_rect_text_undo.py", "content": "\"\"\"E2E tests: rectangle and text box creation with undo/redo.\"\"\"\nimport os\nimport time\nimport pytest\nfrom selenium import webdriver\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.chrome.options import Options\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\nfrom selenium.webdriver.common.action_chains import ActionChains\n\n\nSCREENSHOT_DIR = os.path.join(os.path.dirname(__file__), \"..\", \"screenshots\")\n\n\ndef get_base_url():\n return os.getenv(\"FOSSFLOW_TEST_URL\", \"http://localhost:3000\")\n\n\ndef get_webdriver_url():\n return os.getenv(\"WEBDRIVER_URL\", \"http://localhost:4444\")\n\n\n@pytest.fixture(scope=\"function\")\ndef driver():\n chrome_options = Options()\n chrome_options.add_argument(\"--headless=new\")\n chrome_options.add_argument(\"--no-sandbox\")\n chrome_options.add_argument(\"--disable-dev-shm-usage\")\n chrome_options.add_argument(\"--window-size=1920,1080\")\n d = webdriver.Remote(\n command_executor=get_webdriver_url(),\n options=chrome_options,\n )\n d.implicitly_wait(10)\n yield d\n d.quit()\n\n\ndef save_screenshot(driver, name):\n os.makedirs(SCREENSHOT_DIR, exist_ok=True)\n path = os.path.join(SCREENSHOT_DIR, f\"{name}.png\")\n driver.save_screenshot(path)\n return path\n\n\ndef dismiss_modals(driver):\n try:\n driver.execute_script(\"\"\"\n document.querySelectorAll('[role=\"dialog\"], [class*=\"MuiDialog\"]').forEach(d => {\n const b = d.querySelector('button'); if (b) b.click();\n });\n document.querySelectorAll('[data-testid=\"CloseIcon\"], [data-testid=\"ClearIcon\"]').forEach(icon => {\n const b = icon.closest('button'); if (b) b.click();\n });\n document.querySelectorAll('button').forEach(btn => {\n const l = (btn.getAttribute('aria-label') || '').toLowerCase();\n if (l.includes('close') || l.includes('dismiss')) btn.click();\n });\n \"\"\")\n time.sleep(0.5)\n except Exception:\n pass\n\n\ndef get_scene_state(driver):\n \"\"\"Get scene state via React fiber store discovery.\"\"\"\n return driver.execute_script(\"\"\"\n var root = document.getElementById(\"root\");\n var ck = Object.keys(root).find(function(k) { return k.startsWith(\"__reactContainer\"); });\n if (!ck) return {error: \"no react\"};\n var fiber = root[ck], queue = [fiber], v = 0, ss = null, ms = null;\n while (queue.length > 0 && v < 3000) {\n var n = queue.shift(); if (!n) continue; v++;\n if (n.pendingProps && n.pendingProps.value &&\n typeof n.pendingProps.value === \"object\" && n.pendingProps.value !== null &&\n typeof n.pendingProps.value.getState === \"function\") {\n try {\n var st = n.pendingProps.value.getState();\n if (st && st.connectors !== undefined && st.textBoxes !== undefined && st.history) ss = n.pendingProps.value;\n if (st && st.views !== undefined && st.items !== undefined && st.history) ms = n.pendingProps.value;\n } catch(e) {}\n }\n if (n.child) queue.push(n.child);\n if (n.sibling) queue.push(n.sibling);\n }\n if (!ss || !ms) return {error: \"stores not found\"};\n var s = ss.getState(), m = ms.getState();\n var cv = m.views && m.views[0];\n return {\n rectangles: cv && cv.rectangles ? cv.rectangles.length : 0,\n textBoxes: Object.keys(s.textBoxes || {}).length,\n connectors: Object.keys(s.connectors || {}).length,\n modelItems: (m.items || []).length,\n scenePast: s.history.past.length,\n sceneFuture: s.history.future.length,\n modelPast: m.history.past.length,\n modelFuture: m.history.future.length,\n };\n \"\"\")\n\n\ndef count_svg_polygons(driver):\n \"\"\"Count SVG polygon/path elements that represent rectangles.\"\"\"\n return driver.execute_script(\"\"\"\n var c = document.querySelector('.fossflow-container');\n if (!c) return 0;\n // Rectangles render as SVG with polygon elements inside IsoTileArea\n return c.querySelectorAll('svg polygon').length;\n \"\"\")\n\n\ndef count_text_elements(driver):\n \"\"\"Count Typography/text elements from TextBox components.\n TextBox renders a

with MuiTypography class containing textbox content.\n Default content is 'Text' from TEXTBOX_DEFAULTS.\n \"\"\"\n return driver.execute_script(\"\"\"\n var c = document.querySelector('.fossflow-container');\n if (!c) return 0;\n var all = c.querySelectorAll('p.MuiTypography-root, span.MuiTypography-root');\n // Filter to actual textbox content (not UI labels like 'Untitled')\n var count = 0;\n for (var i = 0; i < all.length; i++) {\n var t = all[i].textContent.trim();\n if (t === 'Text' || t === 'text' || t.length > 0) {\n // Check it's inside a positioned container (textbox, not toolbar)\n var parent = all[i].closest('[style*=\"position\"]');\n if (parent) count++;\n }\n }\n return count;\n \"\"\")\n\n\ndef click_undo(driver):\n btn = driver.execute_script(\"return document.querySelector(\\\"button[aria-label*='Undo']\\\");\")\n if btn:\n btn.click()\n time.sleep(1)\n return True\n return False\n\n\ndef click_redo(driver):\n btn = driver.execute_script(\"return document.querySelector(\\\"button[aria-label*='Redo']\\\");\")\n if btn:\n btn.click()\n time.sleep(1)\n return True\n return False\n\n\n# ---------------------------------------------------------------------------\n# Rectangle test\n# ---------------------------------------------------------------------------\n\ndef test_rectangle_undo_redo(driver):\n \"\"\"Draw a rectangle by drag, undo to remove it, redo to restore.\"\"\"\n base_url = get_base_url()\n\n print(f\"\\n1. Loading app at {base_url}\")\n driver.get(base_url)\n WebDriverWait(driver, 15).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n time.sleep(2)\n dismiss_modals(driver)\n time.sleep(0.5)\n\n state_before = get_scene_state(driver)\n polygons_before = count_svg_polygons(driver)\n print(f\" Baseline: polygons={polygons_before}, state={state_before}\")\n save_screenshot(driver, \"rect_01_baseline\")\n\n # --- Click Rectangle tool ---\n print(\"\\n2. Activating Rectangle tool...\")\n rect_btn = driver.execute_script(\n \"return document.querySelector(\\\"button[aria-label*='Rectangle']\\\");\"\n )\n assert rect_btn, \"Rectangle button not found\"\n rect_btn.click()\n time.sleep(0.5)\n\n # --- Draw rectangle: mousedown, drag, mouseup ---\n print(\" Drawing rectangle by drag...\")\n canvas = driver.find_element(By.CLASS_NAME, \"fossflow-container\")\n actions = ActionChains(driver)\n actions.move_to_element_with_offset(canvas, 400, 250)\n actions.click_and_hold()\n actions.move_by_offset(200, 150)\n actions.release()\n actions.perform()\n time.sleep(1)\n save_screenshot(driver, \"rect_02_drawn\")\n\n state_after = get_scene_state(driver)\n polygons_after = count_svg_polygons(driver)\n print(f\" After draw: polygons={polygons_after}, state={state_after}\")\n\n assert isinstance(state_after, dict) and state_after.get(\"rectangles\", 0) > 0, (\n f\"No rectangle in store after drawing. State: {state_after}\"\n )\n rect_polygons = polygons_after\n print(f\" Rectangle created. Store has {state_after['rectangles']} rectangle(s).\")\n\n # --- Undo rectangle ---\n print(\"\\n3. Undoing rectangle...\")\n # Rectangle draw creates 1 history entry (createRectangle) + potentially\n # updateRectangle calls during drag. Undo until rectangles are 0.\n max_undos = 5\n for i in range(max_undos):\n click_undo(driver)\n state_undo = get_scene_state(driver)\n if isinstance(state_undo, dict) and state_undo.get(\"rectangles\", 0) == 0:\n print(f\" Rectangle removed after {i+1} undo(s). State: {state_undo}\")\n break\n else:\n state_undo = get_scene_state(driver)\n pytest.fail(f\"Rectangle still present after {max_undos} undos. State: {state_undo}\")\n\n polygons_undo = count_svg_polygons(driver)\n save_screenshot(driver, \"rect_03_after_undo\")\n print(f\" Polygons after undo: {polygons_undo}\")\n\n # --- Redo rectangle ---\n print(\"\\n4. Redoing rectangle...\")\n # Redo same number of times as we undid\n redo_count = i + 1\n for j in range(redo_count):\n click_redo(driver)\n\n state_redo = get_scene_state(driver)\n polygons_redo = count_svg_polygons(driver)\n print(f\" After {redo_count} redo(s): polygons={polygons_redo}, state={state_redo}\")\n save_screenshot(driver, \"rect_04_after_redo\")\n\n assert isinstance(state_redo, dict) and state_redo.get(\"rectangles\", 0) > 0, (\n f\"Redo did not restore rectangle. State: {state_redo}\"\n )\n print(\" Rectangle restored by redo.\")\n\n # --- Undo again to verify cycle ---\n print(\"\\n5. Undoing rectangle again...\")\n for _ in range(redo_count):\n click_undo(driver)\n\n state_undo2 = get_scene_state(driver)\n assert isinstance(state_undo2, dict) and state_undo2.get(\"rectangles\", 0) == 0, (\n f\"Second undo cycle failed. State: {state_undo2}\"\n )\n print(\" Rectangle removed again.\")\n\n print(\"\\n Redoing rectangle again...\")\n for _ in range(redo_count):\n click_redo(driver)\n\n state_redo2 = get_scene_state(driver)\n assert isinstance(state_redo2, dict) and state_redo2.get(\"rectangles\", 0) > 0, (\n f\"Second redo cycle failed. State: {state_redo2}\"\n )\n\n save_screenshot(driver, \"rect_05_final\")\n print(\"\\n SUCCESS: Rectangle undo/redo cycle works!\")\n\n\n# ---------------------------------------------------------------------------\n# TextBox test\n# ---------------------------------------------------------------------------\n\ndef test_textbox_undo_redo(driver):\n \"\"\"Create a text box, undo to remove it, redo to restore.\"\"\"\n base_url = get_base_url()\n\n print(f\"\\n1. Loading app at {base_url}\")\n driver.get(base_url)\n WebDriverWait(driver, 15).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n time.sleep(2)\n dismiss_modals(driver)\n time.sleep(0.5)\n\n state_before = get_scene_state(driver)\n print(f\" Baseline: state={state_before}\")\n save_screenshot(driver, \"text_01_baseline\")\n\n # --- Click Text tool (creates textbox at mouse position immediately) ---\n print(\"\\n2. Clicking Text tool...\")\n text_btn = driver.execute_script(\n \"return document.querySelector(\\\"button[aria-label*='Text']\\\");\"\n )\n assert text_btn, \"Text button not found\"\n text_btn.click()\n time.sleep(0.5)\n\n # The textbox is created and follows the cursor in TEXTBOX mode.\n # We need to click on the canvas to place it (mouseup handler).\n print(\" Clicking canvas to place text box...\")\n canvas = driver.find_element(By.CLASS_NAME, \"fossflow-container\")\n ActionChains(driver).move_to_element_with_offset(canvas, 500, 350).click().perform()\n time.sleep(1)\n save_screenshot(driver, \"text_02_placed\")\n\n state_after = get_scene_state(driver)\n print(f\" After placement: state={state_after}\")\n\n assert isinstance(state_after, dict) and state_after.get(\"textBoxes\", 0) > 0, (\n f\"No text box in store after placement. State: {state_after}\"\n )\n print(f\" TextBox created. Store has {state_after['textBoxes']} text box(es).\")\n\n # --- Undo text box (may take multiple steps) ---\n print(\"\\n3. Undoing text box...\")\n undo_steps = 0\n max_undos = 5\n for i in range(max_undos):\n click_undo(driver)\n undo_steps += 1\n state_undo = get_scene_state(driver)\n print(f\" After undo {i+1}: state={state_undo}\")\n if isinstance(state_undo, dict) and state_undo.get(\"textBoxes\", 0) == 0:\n break\n else:\n pytest.fail(f\"TextBox still present after {max_undos} undos. State: {state_undo}\")\n\n save_screenshot(driver, \"text_03_after_undo\")\n print(f\" TextBox removed after {undo_steps} undo(s).\")\n\n # --- Redo text box ---\n print(\"\\n4. Redoing text box...\")\n for _ in range(undo_steps):\n click_redo(driver)\n\n state_redo = get_scene_state(driver)\n print(f\" After {undo_steps} redo(s): state={state_redo}\")\n save_screenshot(driver, \"text_04_after_redo\")\n\n assert isinstance(state_redo, dict) and state_redo.get(\"textBoxes\", 0) > 0, (\n f\"Redo did not restore text box. State: {state_redo}\"\n )\n print(\" TextBox restored by redo.\")\n\n # --- Second undo/redo cycle ---\n print(\"\\n5. Second undo/redo cycle...\")\n for _ in range(undo_steps):\n click_undo(driver)\n state_undo2 = get_scene_state(driver)\n assert isinstance(state_undo2, dict) and state_undo2.get(\"textBoxes\", 0) == 0, (\n f\"Second undo failed. State: {state_undo2}\"\n )\n print(\" TextBox removed again.\")\n\n for _ in range(undo_steps):\n click_redo(driver)\n state_redo2 = get_scene_state(driver)\n assert isinstance(state_redo2, dict) and state_redo2.get(\"textBoxes\", 0) > 0, (\n f\"Second redo failed. State: {state_redo2}\"\n )\n\n save_screenshot(driver, \"text_05_final\")\n print(\"\\n SUCCESS: TextBox undo/redo cycle works!\")\n\n\nif __name__ == \"__main__\":\n pytest.main([__file__, \"-v\", \"-s\"])\n" }, { "path": "e2e-tests/tests/test_store_debug.py", "content": "\"\"\"Direct store-level undo/redo debugging.\"\"\"\nimport time\nimport json\nfrom selenium import webdriver\nfrom selenium.webdriver.chrome.options import Options\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.common.action_chains import ActionChains\nfrom selenium.webdriver.support.ui import WebDriverWait\nfrom selenium.webdriver.support import expected_conditions as EC\n\n\ndef setup_driver():\n opts = Options()\n opts.add_argument(\"--headless=new\")\n opts.add_argument(\"--no-sandbox\")\n opts.add_argument(\"--disable-dev-shm-usage\")\n opts.add_argument(\"--window-size=1920,1080\")\n opts.set_capability('goog:loggingPrefs', {'browser': 'ALL'})\n d = webdriver.Remote(\"http://localhost:4444\", options=opts)\n d.implicitly_wait(10)\n return d\n\n\ndef dump_store(d, label):\n \"\"\"Dump detailed store state.\"\"\"\n result = d.execute_script(\"\"\"\n var ms = window.__modelStore__;\n var ss = window.__sceneStore__;\n if (!ms || !ss) return {error: \"stores not found\", hasModel: !!ms, hasScene: !!ss};\n\n var m = ms.getState();\n var s = ss.getState();\n var cv = m.views && m.views[0];\n return {\n model: {\n itemsLen: (m.items || []).length,\n itemIds: (m.items || []).map(function(i){return i.id}),\n viewsLen: (m.views || []).length,\n viewItemsLen: cv ? (cv.items || []).length : -1,\n viewItemIds: cv ? (cv.items || []).map(function(i){return i.id}) : [],\n iconsLen: (m.icons || []).length,\n histPastLen: m.history.past.length,\n histFutureLen: m.history.future.length,\n canUndo: m.actions.canUndo(),\n canRedo: m.actions.canRedo(),\n },\n scene: {\n connectors: Object.keys(s.connectors || {}).length,\n textBoxes: Object.keys(s.textBoxes || {}).length,\n histPastLen: s.history.past.length,\n histFutureLen: s.history.future.length,\n canUndo: s.actions.canUndo(),\n canRedo: s.actions.canRedo(),\n }\n };\n \"\"\")\n print(f\"\\n [{label}] Store state: {json.dumps(result, indent=2)}\")\n return result\n\n\ndef count_dom_nodes(d):\n \"\"\"Count images and 'Untitled' labels in the DOM.\"\"\"\n return d.execute_script(\"\"\"\n var c = document.querySelector('.fossflow-container');\n if (!c) return {images: 0, labels: 0};\n var imgs = c.querySelectorAll('img').length;\n var spans = Array.from(c.querySelectorAll('span, p'));\n var labels = spans.filter(function(s){return s.textContent.trim() === 'Untitled'}).length;\n return {images: imgs, labels: labels};\n \"\"\")\n\n\ndef place_node(d):\n \"\"\"Place a node using the same approach as the working e2e test.\"\"\"\n # Click \"Add item (N)\" button\n add_btn = d.find_element(By.CSS_SELECTOR, \"button[aria-label*='Add item']\")\n add_btn.click()\n time.sleep(1)\n\n # Expand ISOFLOW icon collection\n d.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const text = btn.textContent.trim().toUpperCase();\n if (text.includes('ISOFLOW') && !text.includes('IMPORT')) {\n btn.click();\n return;\n }\n }\n \"\"\")\n time.sleep(3)\n\n # Select first icon button via ActionChains (not JS click)\n first_icon_btn = d.execute_script(\"\"\"\n const buttons = document.querySelectorAll('button');\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img && img.naturalWidth > 0 && img.naturalWidth <= 100) {\n return btn;\n }\n }\n for (const btn of buttons) {\n const img = btn.querySelector('img');\n if (img) return btn;\n }\n return null;\n \"\"\")\n if first_icon_btn is None:\n print(\" ERROR: No icon button found\")\n return False\n\n ActionChains(d).click(first_icon_btn).perform()\n time.sleep(0.5)\n\n # Click on canvas\n canvas = d.find_element(By.CLASS_NAME, \"fossflow-container\")\n ActionChains(d).move_to_element_with_offset(canvas, 500, 400).click().perform()\n time.sleep(1)\n return True\n\n\ndef main():\n d = setup_driver()\n try:\n d.get(\"http://localhost:3000\")\n WebDriverWait(d, 15).until(\n EC.presence_of_element_located((By.CLASS_NAME, \"fossflow-container\"))\n )\n time.sleep(3)\n\n # Dismiss modals/tips\n d.execute_script(\"\"\"\n const dialogs = document.querySelectorAll('[role=\"dialog\"], [class*=\"MuiDialog\"]');\n dialogs.forEach(d => { const b = d.querySelector('button'); if(b) b.click(); });\n \"\"\")\n time.sleep(0.5)\n\n # Check stores\n has = d.execute_script(\"return {m: !!window.__modelStore__, s: !!window.__sceneStore__}\")\n print(f\"Stores on window: {json.dumps(has)}\")\n if not has.get(\"m\") or not has.get(\"s\"):\n print(\"ERROR: Stores not exported to window!\")\n return\n\n # 1. Baseline\n dump_store(d, \"BASELINE\")\n dom = count_dom_nodes(d)\n print(f\" DOM: {json.dumps(dom)}\")\n\n # 2. Place node\n print(\"\\n--- PLACING NODE ---\")\n ok = place_node(d)\n print(f\" place_node returned: {ok}\")\n dom = count_dom_nodes(d)\n print(f\" DOM after place: {json.dumps(dom)}\")\n dump_store(d, \"AFTER PLACE\")\n\n if dom.get(\"images\", 0) == 0:\n print(\"\\n WARNING: No images in DOM - placement may have failed\")\n # Screenshot for debugging\n d.save_screenshot(\"/tmp/debug_after_place.png\")\n print(\" Screenshot: /tmp/debug_after_place.png\")\n\n # 3. Direct model undo\n print(\"\\n--- MODEL UNDO ---\")\n undo_result = d.execute_script(\"\"\"\n var ms = window.__modelStore__.getState();\n var result = ms.actions.undo();\n var after = window.__modelStore__.getState();\n var cv = after.views && after.views[0];\n var f = after.history.future;\n return {\n result: result,\n afterItems: (after.items || []).length,\n afterViewItems: cv ? (cv.items || []).length : -1,\n pastLen: after.history.past.length,\n futureLen: f.length,\n // Inspect what's in future[0]\n future0: f[0] ? {\n items: (f[0].items || []).length,\n views: (f[0].views || []).length,\n viewItems: f[0].views && f[0].views[0] ? (f[0].views[0].items || []).length : -1,\n } : null\n };\n \"\"\")\n print(f\" Model undo: {json.dumps(undo_result, indent=2)}\")\n\n # Also undo scene\n scene_undo = d.execute_script(\"\"\"\n var ss = window.__sceneStore__.getState();\n return { result: ss.actions.undo() };\n \"\"\")\n print(f\" Scene undo: {json.dumps(scene_undo)}\")\n\n dump_store(d, \"AFTER UNDO\")\n time.sleep(0.5)\n dom = count_dom_nodes(d)\n print(f\" DOM after undo: {json.dumps(dom)}\")\n\n # 4. Direct model redo\n print(\"\\n--- MODEL REDO ---\")\n redo_result = d.execute_script(\"\"\"\n var ms = window.__modelStore__.getState();\n var f = ms.history.future;\n var beforeInfo = {\n items: (ms.items || []).length,\n futureLen: f.length,\n future0: f[0] ? {\n items: (f[0].items || []).length,\n views: (f[0].views || []).length,\n viewItems: f[0].views && f[0].views[0] ? (f[0].views[0].items || []).length : -1,\n } : null\n };\n var result = ms.actions.redo();\n var after = window.__modelStore__.getState();\n var cv = after.views && after.views[0];\n return {\n before: beforeInfo,\n result: result,\n afterItems: (after.items || []).length,\n afterViewItems: cv ? (cv.items || []).length : -1,\n pastLen: after.history.past.length,\n futureLen: after.history.future.length,\n };\n \"\"\")\n print(f\" Model redo: {json.dumps(redo_result, indent=2)}\")\n\n # Also redo scene\n scene_redo = d.execute_script(\"\"\"\n var ss = window.__sceneStore__.getState();\n return { result: ss.actions.redo() };\n \"\"\")\n print(f\" Scene redo: {json.dumps(scene_redo)}\")\n\n dump_store(d, \"AFTER REDO\")\n time.sleep(0.5)\n dom = count_dom_nodes(d)\n print(f\" DOM after redo: {json.dumps(dom)}\")\n\n print(\"\\n--- ALL TESTS PASSED ---\")\n\n finally:\n d.quit()\n\n\nif __name__ == \"__main__\":\n main()\n" }, { "path": "nginx.conf", "content": "server {\n listen 80;\n # Basic authentication (AUTH_BASIC_SETTING replaced by docker-entrypoint.sh)\n auth_basic AUTH_BASIC_SETTING;\n auth_basic_user_file /etc/nginx/.htpasswd;\n server_name localhost;\n\n # Allow larger request bodies (up to 10MB)\n client_max_body_size 10M;\n\n # Serve static files\n location / {\n root /usr/share/nginx/html;\n try_files $uri /index.html;\n }\n\n # Proxy API requests to Node.js backend\n location /api/ {\n proxy_pass http://localhost:3001;\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection 'upgrade';\n proxy_set_header Host $host;\n proxy_cache_bypass $http_upgrade;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n proxy_set_header X-Forwarded-Proto $scheme;\n\n # Allow larger bodies for API requests\n client_max_body_size 10M;\n proxy_read_timeout 300s;\n proxy_connect_timeout 75s;\n }\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"fossflow-monorepo\",\n \"version\": \"1.10.8\",\n \"private\": true,\n \"description\": \"Monorepo for FossFLOW diagram editor and library\",\n \"workspaces\": [\n \"packages/*\"\n ],\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development npm run start --workspace=packages/fossflow-app\",\n \"dev:win\": \"cross-env NODE_ENV=development npm run start --workspace=packages/fossflow-app\",\n \"dev:lib\": \"npm run dev --workspace=packages/fossflow-lib\",\n \"dev:backend\": \"npm run dev --workspace=packages/fossflow-backend\",\n \"build\": \"npm run build:lib && npm run build:app\",\n \"build:lib\": \"npm run build --workspace=packages/fossflow-lib\",\n \"build:app\": \"npm run build --workspace=packages/fossflow-app\",\n \"test\": \"npm run test --workspaces --if-present\",\n \"lint\": \"npm run lint --workspaces --if-present\",\n \"clean\": \"npm run clean --workspaces --if-present && rm -rf node_modules\",\n \"publish:lib\": \"npm run build:lib && npm publish --workspace=packages/fossflow-lib\",\n \"docker:build\": \"docker build -t fossflow:local .\",\n \"docker:run\": \"docker compose -f compose.dev.yml up\",\n \"update-version\": \"node scripts/update-version.js\",\n \"semantic-release\": \"semantic-release\"\n },\n \"devDependencies\": {\n \"@semantic-release/changelog\": \"^6.0.3\",\n \"@semantic-release/exec\": \"^7.1.0\",\n \"@semantic-release/git\": \"^10.0.1\",\n \"@types/node\": \"^25.5.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.0.0\",\n \"conventional-changelog-conventionalcommits\": \"^9.3.0\",\n \"cross-env\": \"^10.1.0\",\n \"semantic-release\": \"^25.0.3\",\n \"typescript\": \"^5.9.3\"\n },\n \"engines\": {\n \"node\": \">=18.0.0\",\n \"npm\": \">=9.0.0\"\n },\n \"dependencies\": {\n \"dom-to-image-more\": \"^3.7.2\"\n },\n \"overrides\": {\n \"lodash\": \"^4.17.23\",\n \"lodash-es\": \"^4.17.23\",\n \"tar\": \"^7.5.7\"\n }\n}\n" }, { "path": "packages/fossflow-app/LICENSE", "content": "This is free and unencumbered software released into the public domain.\n\nAnyone is free to copy, modify, publish, use, compile, sell, or\ndistribute this software, either in source code form or as a compiled\nbinary, for any purpose, commercial or non-commercial, and by any\nmeans.\n\nIn jurisdictions that recognize copyright laws, the author or authors\nof this software dedicate any and all copyright interest in the\nsoftware to the public domain. We make this dedication for the benefit\nof the public at large and to the detriment of our heirs and\nsuccessors. We intend this dedication to be an overt act of\nrelinquishment in perpetuity of all present and future rights to this\nsoftware under copyright law.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR\nOTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\nARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n\nFor more information, please refer to \n" }, { "path": "packages/fossflow-app/README.md", "content": "# FossFLOW - Isometric Diagramming Tool\n\nFossFLOW is a powerful, open-source Progressive Web App (PWA) for creating beautiful isometric diagrams. Built with React and the Isoflow (Now forked and published to NPM as fossflow) library, it runs entirely in your browser with offline support.\n\n![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n\n\n- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/fossflow-lib/blob/main/CONTRIBUTORS.md)** - How to contribute to the project.\n\n\n## Features\n\n- 🎨 **Isometric Diagramming** - Create stunning 3D-style technical diagrams\n- 💾 **Auto-Save** - Your work is automatically saved every 5 seconds\n- 📱 **PWA Support** - Install as a native app on Mac and Linux\n- 🔒 **Privacy-First** - All data stored locally in your browser\n- 📤 **Import/Export** - Share diagrams as JSON files\n- 🎯 **Session Storage** - Quick save without dialogs\n- 🌐 **Offline Support** - Work without internet connection\n\n\n## Try it online\n\nGo to https://stan-smith.github.io/FossFLOW/\n\n\n## Quick start on local environment\n\n```bash\n# Clone the repository\ngit clone https://github.com/stan-smith/FossFLOW\ncd FossFLOW\n\n# Make sure you have npm installed\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n## How to Use\n\n\n\n\n\n### Creating Diagrams\n\n1. **Add Items**:\n - Press the \"+\" button on the top right menu, the library of components will appear on the left. Drag and drop components from the library onto the canvas\n - Or, perform a right click on the grid and select \"Add node\", you can then click on the new node you created and customise it from the left menu\n2. **Connect Items**: Use connectors to show relationships between components\n3. **Customize**: Change colors, labels, and properties of items\n4. **Navigate**: Pan and zoom to work on different areas\n\n### Saving Your Work\n\n- **Auto-Save**: Diagrams are automatically saved to browser storage every 5 seconds\n- **Quick Save**: Click \"Quick Save (Session)\" for instant saves without popups\n- **Save As**: Use \"Save New\" to create a copy with a different name\n\n### Managing Diagrams\n\n- **Load**: Click \"Load\" to see all your saved diagrams\n- **Import**: Load diagrams from JSON files shared by others\n- **Export**: Download your diagrams as JSON files to share or backup\n- **Storage**: Use \"Storage Manager\" to manage browser storage space\n\n### Keyboard Shortcuts\n\n- `Delete` - Remove selected items\n- Mouse wheel - Zoom in/out\n- Click and drag - Pan around canvas\n- ***NEW*** Crtl+Z undo Ctrl+Y redo\n\n## Building for Production\n\n```bash\n# Create optimized production build\nnpm run build\n\n# Serve the production build locally\nnpx serve -s build\n```\n\nThe build folder contains all files needed for deployment.\n\nIf you need the app to be deployed to a custom path (i.e. not root), use instead:\n```bash\n# Create optimized production build for given path\nPUBLIC_URL=\"https://mydomain.tld/path/to/app\" npm run build\n```\nThat will add the defined `PUBLIC_URL` as a prefix to all links to static files.\n\n## Deployment\n\n### Static Hosting\n\nDeploy the `build` folder to any static hosting service:\n- GitHub Pages\n- Netlify\n- Vercel\n- AWS S3\n- Any web server\n\n### Important Notes\n\n1. **HTTPS Required**: PWA features require HTTPS (except localhost)\n2. **Browser Storage**: Diagrams are saved in browser localStorage (~5-10MB limit)\n3. **Backup**: Regularly export important diagrams as JSON files\n\n## Browser Support\n\n- Chrome/Edge (Recommended) ✅\n- Firefox ✅\n- Safari ✅\n- Mobile browsers with PWA support ✅\n\n## Troubleshooting\n\n### Storage Full\n- Use Storage Manager to free space\n- Export and delete old diagrams\n- Clear browser data (last resort - will delete all diagrams)\n\n### Can't Install PWA\n- Ensure using HTTPS\n- Try Chrome or Edge browsers\n- Check if already installed\n\n### Lost Diagrams\n- Check browser's localStorage\n- Look for auto-saved versions\n- Always export important work\n\n## Technology Stack\n\n- **React** - UI framework\n- **TypeScript** - Type safety\n- **Isoflow** - Isometric diagram engine\n- **PWA** - Offline-first web app\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nIsoflow is released under the MIT license.\n\nFossFLOW is released under the Unlicense license, do what you want with it.\n\n## Acknowledgments\n\nBuilt with the [Isoflow](https://github.com/markmanx/isoflow) library.\n\nx0z.co\n" }, { "path": "packages/fossflow-app/package.json", "content": "{\n \"name\": \"fossflow-app\",\n \"version\": \"1.10.8\",\n \"private\": true,\n \"description\": \"Progressive Web App for creating isometric diagrams\",\n \"dependencies\": {\n \"@isoflow/isopacks\": \"^0.0.10\",\n \"fossflow\": \"*\",\n \"i18next\": \"^25.8.18\",\n \"i18next-browser-languagedetector\": \"^8.2.1\",\n \"i18next-http-backend\": \"^3.0.2\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"react-error-boundary\": \"^6.1.1\",\n \"react-i18next\": \"^16.5.8\",\n \"react-router-dom\": \"^7.9.6\",\n \"web-vitals\": \"^5.1.0\"\n },\n \"scripts\": {\n \"start\": \"rsbuild dev\",\n \"build\": \"rsbuild build\",\n \"preview\": \"rsbuild preview\",\n \"clean\": \"rm -rf build\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"@rsbuild/core\": \"^1.7.3\",\n \"@rsbuild/plugin-react\": \"^1.4.6\",\n \"@testing-library/dom\": \"^10.4.1\",\n \"@testing-library/jest-dom\": \"^6.9.1\",\n \"@testing-library/react\": \"^16.3.2\",\n \"@testing-library/user-event\": \"^14.6.1\"\n }\n}\n" }, { "path": "packages/fossflow-app/public/i18n/app/bn-BD.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"নতুন ডায়াগ্রাম\",\n \"saveSessionOnly\": \"সংরক্ষণ করুন (শুধুমাত্র সেশন)\",\n \"loadSessionOnly\": \"লোড করুন (শুধুমাত্র সেশন)\",\n \"importFile\": \"ফাইল আমদানি করুন\",\n \"exportFile\": \"ফাইল রপ্তানি করুন\",\n \"quickSaveSession\": \"দ্রুত সংরক্ষণ (সেশন)\",\n \"serverStorage\": \"সার্ভার স্টোরেজ\"\n },\n \"status\": {\n \"current\": \"বর্তমান\",\n \"untitled\": \"শিরোনামহীন ডায়াগ্রাম\",\n \"modified\": \"পরিবর্তিত\",\n \"sessionStorageNote\": \"শুধুমাত্র সেশন স্টোরেজ - স্থায়ীভাবে সংরক্ষণ করতে রপ্তানি করুন\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"ডায়াগ্রাম সংরক্ষণ করুন (শুধুমাত্র বর্তমান সেশন)\",\n \"warningTitle\": \"গুরুত্বপূর্ণ\",\n \"warningMessage\": \"এই সংরক্ষণটি অস্থায়ী এবং ব্রাউজার বন্ধ করলে হারিয়ে যাবে।\",\n \"warningExport\": \"আপনার কাজ স্থায়ীভাবে সংরক্ষণ করতে ফাইল রপ্তানি করুন ব্যবহার করুন।\",\n \"placeholder\": \"ডায়াগ্রামের নাম লিখুন\",\n \"btnSave\": \"সংরক্ষণ করুন\",\n \"btnCancel\": \"বাতিল করুন\"\n },\n \"load\": {\n \"title\": \"ডায়াগ্রাম লোড করুন (শুধুমাত্র বর্তমান সেশন)\",\n \"noteTitle\": \"নোট\",\n \"noteMessage\": \"এই সংরক্ষণগুলি অস্থায়ী। আপনার ডায়াগ্রামগুলি স্থায়ীভাবে রাখতে রপ্তানি করুন।\",\n \"noSavedDiagrams\": \"এই সেশনে কোনো সংরক্ষিত ডায়াগ্রাম পাওয়া যায়নি\",\n \"updated\": \"আপডেট করা হয়েছে\",\n \"btnLoad\": \"লোড করুন\",\n \"btnDelete\": \"মুছুন\",\n \"btnClose\": \"বন্ধ করুন\"\n },\n \"export\": {\n \"title\": \"ডায়াগ্রাম রপ্তানি করুন\",\n \"recommendedTitle\": \"প্রস্তাবিত\",\n \"recommendedMessage\": \"এটি আপনার কাজ স্থায়ীভাবে সংরক্ষণ করার সেরা উপায়।\",\n \"noteMessage\": \"রপ্তানি করা JSON ফাইলগুলি পরে আমদানি করা যেতে পারে বা অন্যদের সাথে শেয়ার করা যেতে পারে।\",\n \"btnDownload\": \"JSON ডাউনলোড করুন\",\n \"btnCancel\": \"বাতিল করুন\"\n },\n \"readOnly\": {\n \"mode\": \"শুধুমাত্র দেখার মোড\",\n \"failed\": \"ডায়াগ্রাম লোড করতে ব্যর্থ\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"অনুগ্রহ করে ডায়াগ্রামের জন্য একটি নাম লিখুন\",\n \"diagramExists\": \"এই সেশনে \\\"{{name}}\\\" নামের একটি ডায়াগ্রাম ইতিমধ্যে বিদ্যমান। এটি এটি ওভাররাইট করবে। আপনি কি নিশ্চিত যে আপনি চালিয়ে যেতে চান?\",\n \"unsavedChanges\": \"আপনার অসংরক্ষিত পরিবর্তন আছে। লোড করা চালিয়ে যেতে চান?\",\n \"createNewDiagram\": \"একটি নতুন ডায়াগ্রাম তৈরি করবেন?\",\n \"unsavedChangesExport\": \"আপনার অসংরক্ষিত পরিবর্তন আছে। এটি সংরক্ষণ করতে প্রথমে আপনার ডায়াগ্রাম রপ্তানি করুন। চালিয়ে যেতে চান?\",\n \"confirmDelete\": \"আপনি কি নিশ্চিত যে আপনি এই ডায়াগ্রামটি মুছতে চান?\",\n \"storageFull\": \"স্টোরেজ পূর্ণ! স্টোরেজ ম্যানেজার খোলা হচ্ছে...\",\n \"autoSaveFailed\": \"স্টোরেজ পূর্ণ! অনুগ্রহ করে স্থান খালি করতে স্টোরেজ ম্যানেজার ব্যবহার করুন।\",\n \"beforeUnload\": \"আপনার অসংরক্ষিত পরিবর্তন আছে। আপনি কি নিশ্চিত যে আপনি ছেড়ে যেতে চান?\",\n \"quotaExceeded\": \"স্টোরেজ কোটা অতিক্রম করেছে। অনুগ্রহ করে গুরুত্বপূর্ণ ডায়াগ্রামগুলি রপ্তানি করুন এবং কিছু স্থান খালি করুন।\"\n }\n}\n" }, { "path": "packages/fossflow-app/public/i18n/app/de-DE.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Neues Diagramm\",\n \"saveSessionOnly\": \"Speichern (nur Browser)\",\n \"loadSessionOnly\": \"Laden (nur Browser)\",\n \"importFile\": \"Datei importieren\",\n \"exportFile\": \"Datei exportieren\",\n \"quickSaveSession\": \"Schnellspeichern (Browser)\",\n \"serverStorage\": \"Server-Speicher\"\n },\n \"status\": {\n \"current\": \"Aktuell\",\n \"untitled\": \"Unbenanntes Diagramm\",\n \"modified\": \"Geändert\",\n \"sessionStorageNote\": \"Nur Browserspeicher – zum dauerhaften Speichern exportieren\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Diagramm speichern (nur aktuelle Browser-Sitzung)\",\n \"warningTitle\": \"Wichtig\",\n \"warningMessage\": \"Dieses Speichern ist temporär und der aktuelle Fortschritt geht verloren, wenn du den Browser schließt.\",\n \"warningExport\": \"Nutze Datei exportieren, um deine Arbeit dauerhaft zu speichern.\",\n \"placeholder\": \"Diagram benennen\",\n \"btnSave\": \"Speichern\",\n \"btnCancel\": \"Abbrechen\"\n },\n \"load\": {\n \"title\": \"Diagramm laden (nur aktuelle Sitzung)\",\n \"noteTitle\": \"Hinweis\",\n \"noteMessage\": \"Diese Speicherstände sind temporär. Exportiere deine Diagramme, um sie dauerhaft zu behalten.\",\n \"noSavedDiagrams\": \"In dieser Sitzung wurden keine gespeicherten Diagramme gefunden\",\n \"updated\": \"Aktualisiert\",\n \"btnLoad\": \"Laden\",\n \"btnDelete\": \"Löschen\",\n \"btnClose\": \"Schließen\"\n },\n \"export\": {\n \"title\": \"Diagramm exportieren\",\n \"recommendedTitle\": \"Empfohlen\",\n \"recommendedMessage\": \"Dies ist die beste Möglichkeit, deine Arbeit dauerhaft zu speichern.\",\n \"noteMessage\": \"Exportierte JSON-Dateien können später importiert oder mit anderen geteilt werden.\",\n \"btnDownload\": \"JSON herunterladen\",\n \"btnCancel\": \"Abbrechen\"\n },\n \"readOnly\": {\n \"mode\": \"Nur-Ansicht-Modus\",\n \"failed\": \"Diagramm konnte nicht geladen werden\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Bitte gib einen Diagrammnamen ein\",\n \"diagramExists\": \"Ein Diagramm mit dem Namen \\\"{{name}}\\\" existiert in dieser Sitzung bereits. Dadurch wird es überschrieben. Möchtest du fortfahren?\",\n \"unsavedChanges\": \"Du hast ungespeicherte Änderungen. Trotzdem laden?\",\n \"createNewDiagram\": \"Neues Diagramm erstellen?\",\n \"unsavedChangesExport\": \"Du hast ungespeicherte Änderungen. Exportiere dein Diagramm zuerst, um es zu speichern. Trotzdem fortfahren?\",\n \"confirmDelete\": \"Möchtest du dieses Diagramm wirklich löschen?\",\n \"storageFull\": \"Speicher voll! Speicherverwaltung wird geöffnet...\",\n \"autoSaveFailed\": \"Speicher voll! Bitte nutze die Speicherverwaltung, um Platz freizugeben.\",\n \"beforeUnload\": \"Du hast ungespeicherte Änderungen. Möchtest du die Seite wirklich verlassen?\",\n \"quotaExceeded\": \"Speicherlimit überschritten. Bitte exportiere wichtige Diagramme und schaffe etwas Platz.\"\n }\n}\n" }, { "path": "packages/fossflow-app/public/i18n/app/en-US.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"New Diagram\",\n \"saveSessionOnly\": \"Save (Session Only)\",\n \"loadSessionOnly\": \"Load (Session Only)\",\n \"importFile\": \"Import File\",\n \"exportFile\": \"Export File\",\n \"quickSaveSession\": \"Quick Save (Session)\",\n \"serverStorage\": \"Server Storage\"\n },\n \"status\": {\n \"current\": \"Current\",\n \"untitled\": \"Untitled Diagram\",\n \"modified\": \"Modified\",\n \"sessionStorageNote\": \"Session storage only - export to save permanently\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Save Diagram (Current Session Only)\",\n \"warningTitle\": \"Important\",\n \"warningMessage\": \"This save is temporary and will be lost when you close the browser.\",\n \"warningExport\": \"Use Export File to permanently save your work.\",\n \"placeholder\": \"Enter diagram name\",\n \"btnSave\": \"Save\",\n \"btnCancel\": \"Cancel\"\n },\n \"load\": {\n \"title\": \"Load Diagram (Current Session Only)\",\n \"noteTitle\": \"Note\",\n \"noteMessage\": \"These saves are temporary. Export your diagrams to keep them permanently.\",\n \"noSavedDiagrams\": \"No saved diagrams found in this session\",\n \"updated\": \"Updated\",\n \"btnLoad\": \"Load\",\n \"btnDelete\": \"Delete\",\n \"btnClose\": \"Close\"\n },\n \"export\": {\n \"title\": \"Export Diagram\",\n \"recommendedTitle\": \"Recommended\",\n \"recommendedMessage\": \"This is the best way to save your work permanently.\",\n \"noteMessage\": \"Exported JSON files can be imported later or shared with others.\",\n \"btnDownload\": \"Download JSON\",\n \"btnCancel\": \"Cancel\"\n },\n \"readOnly\": {\n \"mode\": \"View-Only Mode\",\n \"failed\": \"Failed to load diagram\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Please enter a diagram name\",\n \"diagramExists\": \"A diagram named \\\"{{name}}\\\" already exists in this session. This will overwrite it. Are you sure you want to continue?\",\n \"unsavedChanges\": \"You have unsaved changes. Continue loading?\",\n \"createNewDiagram\": \"Create a new diagram?\",\n \"unsavedChangesExport\": \"You have unsaved changes. Export your diagram first to save it. Continue?\",\n \"confirmDelete\": \"Are you sure you want to delete this diagram?\",\n \"storageFull\": \"Storage full! Opening Storage Manager...\",\n \"autoSaveFailed\": \"Storage full! Please use Storage Manager to free up space.\",\n \"beforeUnload\": \"You have unsaved changes. Are you sure you want to leave?\",\n \"quotaExceeded\": \"Storage quota exceeded. Please export important diagrams and clear some space.\"\n }\n}" }, { "path": "packages/fossflow-app/public/i18n/app/es-ES.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Nuevo diagrama\",\n \"saveSessionOnly\": \"Guardar (Solo sesión)\",\n \"loadSessionOnly\": \"Cargar (Solo sesión)\",\n \"importFile\": \"Importar archivo\",\n \"exportFile\": \"Exportar archivo\",\n \"quickSaveSession\": \"Guardado rápido (Sesión)\",\n \"serverStorage\": \"Almacenamiento en servidor\"\n },\n \"status\": {\n \"current\": \"Actual\",\n \"untitled\": \"Diagrama sin título\",\n \"modified\": \"Modificado\",\n \"sessionStorageNote\": \"Solo almacenamiento de sesión - exporta para guardar permanentemente\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Guardar diagrama (Solo sesión actual)\",\n \"warningTitle\": \"Importante\",\n \"warningMessage\": \"Este guardado es temporal y se perderá al cerrar el navegador.\",\n \"warningExport\": \"Usa Exportar archivo para guardar tu trabajo de forma permanente.\",\n \"placeholder\": \"Ingresa el nombre del diagrama\",\n \"btnSave\": \"Guardar\",\n \"btnCancel\": \"Cancelar\"\n },\n \"load\": {\n \"title\": \"Cargar diagrama (Solo sesión actual)\",\n \"noteTitle\": \"Nota\",\n \"noteMessage\": \"Estos guardados son temporales. Exporta tus diagramas para conservarlos de forma permanente.\",\n \"noSavedDiagrams\": \"No se encontraron diagramas guardados en esta sesión\",\n \"updated\": \"Actualizado\",\n \"btnLoad\": \"Cargar\",\n \"btnDelete\": \"Eliminar\",\n \"btnClose\": \"Cerrar\"\n },\n \"export\": {\n \"title\": \"Exportar diagrama\",\n \"recommendedTitle\": \"Recomendado\",\n \"recommendedMessage\": \"Esta es la mejor forma de guardar tu trabajo de forma permanente.\",\n \"noteMessage\": \"Los archivos JSON exportados pueden importarse posteriormente o compartirse con otros.\",\n \"btnDownload\": \"Descargar JSON\",\n \"btnCancel\": \"Cancelar\"\n },\n \"readOnly\": {\n \"mode\": \"Modo de solo lectura\",\n \"failed\": \"Error al cargar el diagrama\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Por favor ingresa un nombre para el diagrama\",\n \"diagramExists\": \"Ya existe un diagrama llamado \\\"{{name}}\\\" en esta sesión. Esto lo sobrescribirá. ¿Estás seguro de que deseas continuar?\",\n \"unsavedChanges\": \"Tienes cambios sin guardar. ¿Continuar cargando?\",\n \"createNewDiagram\": \"¿Crear un nuevo diagrama?\",\n \"unsavedChangesExport\": \"Tienes cambios sin guardar. Exporta tu diagrama primero si no quieres perder los cambios o continúa para comenzar uno nuevo.\",\n \"confirmDelete\": \"¿Estás seguro de que deseas eliminar este diagrama?\",\n \"storageFull\": \"¡Almacenamiento lleno! Abriendo el gestor de almacenamiento...\",\n \"autoSaveFailed\": \"¡Almacenamiento lleno! Por favor usa el gestor de almacenamiento para liberar espacio.\",\n \"beforeUnload\": \"Tienes cambios sin guardar. ¿Estás seguro de que deseas salir?\",\n \"quotaExceeded\": \"Cuota de almacenamiento excedida. Por favor exporta los diagramas importantes y libera espacio.\"\n }\n}\n" }, { "path": "packages/fossflow-app/public/i18n/app/fr-FR.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Nouveau diagramme\",\n \"saveSessionOnly\": \"Enregistrer (Session uniquement)\",\n \"loadSessionOnly\": \"Charger (Session uniquement)\",\n \"importFile\": \"Importer un fichier\",\n \"exportFile\": \"Exporter un fichier\",\n \"quickSaveSession\": \"Enregistrement rapide (Session)\",\n \"serverStorage\": \"Stockage sur serveur\"\n },\n \"status\": {\n \"current\": \"Actuel\",\n \"untitled\": \"Diagramme sans titre\",\n \"modified\": \"Modifié\",\n \"sessionStorageNote\": \"Stockage de session uniquement - exportez pour enregistrer définitivement\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Enregistrer le diagramme (Session actuelle uniquement)\",\n \"warningTitle\": \"Important\",\n \"warningMessage\": \"Cet enregistrement est temporaire et sera perdu lors de la fermeture du navigateur.\",\n \"warningExport\": \"Utilisez Exporter un fichier pour enregistrer votre travail de manière permanente.\",\n \"placeholder\": \"Entrez le nom du diagramme\",\n \"btnSave\": \"Enregistrer\",\n \"btnCancel\": \"Annuler\"\n },\n \"load\": {\n \"title\": \"Charger le diagramme (Session actuelle uniquement)\",\n \"noteTitle\": \"Remarque\",\n \"noteMessage\": \"Ces enregistrements sont temporaires. Exportez vos diagrammes pour les conserver de manière permanente.\",\n \"noSavedDiagrams\": \"Aucun diagramme enregistré trouvé dans cette session\",\n \"updated\": \"Mis à jour\",\n \"btnLoad\": \"Charger\",\n \"btnDelete\": \"Supprimer\",\n \"btnClose\": \"Fermer\"\n },\n \"export\": {\n \"title\": \"Exporter le diagramme\",\n \"recommendedTitle\": \"Recommandé\",\n \"recommendedMessage\": \"C'est la meilleure façon d'enregistrer votre travail de manière permanente.\",\n \"noteMessage\": \"Les fichiers JSON exportés peuvent être importés ultérieurement ou partagés avec d'autres.\",\n \"btnDownload\": \"Télécharger JSON\",\n \"btnCancel\": \"Annuler\"\n },\n \"readOnly\": {\n \"mode\": \"Mode lecture seule\",\n \"failed\": \"Échec du chargement du diagramme\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Veuillez entrer un nom pour le diagramme\",\n \"diagramExists\": \"Un diagramme nommé \\\"{{name}}\\\" existe déjà dans cette session. Cela l'écrasera. Êtes-vous sûr de vouloir continuer ?\",\n \"unsavedChanges\": \"Vous avez des modifications non enregistrées. Continuer le chargement ?\",\n \"createNewDiagram\": \"Créer un nouveau diagramme ?\",\n \"unsavedChangesExport\": \"Vous avez des modifications non enregistrées. Exportez d'abord votre diagramme pour l'enregistrer. Continuer ?\",\n \"confirmDelete\": \"Êtes-vous sûr de vouloir supprimer ce diagramme ?\",\n \"storageFull\": \"Stockage plein ! Ouverture du gestionnaire de stockage...\",\n \"autoSaveFailed\": \"Stockage plein ! Veuillez utiliser le gestionnaire de stockage pour libérer de l'espace.\",\n \"beforeUnload\": \"Vous avez des modifications non enregistrées. Êtes-vous sûr de vouloir partir ?\",\n \"quotaExceeded\": \"Quota de stockage dépassé. Veuillez exporter les diagrammes importants et libérer de l'espace.\"\n }\n}\n" }, { "path": "packages/fossflow-app/public/i18n/app/hi-IN.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"नया आरेख\",\n \"saveSessionOnly\": \"सहेजें (केवल सत्र)\",\n \"loadSessionOnly\": \"लोड करें (केवल सत्र)\",\n \"importFile\": \"फ़ाइल आयात करें\",\n \"exportFile\": \"फ़ाइल निर्यात करें\",\n \"quickSaveSession\": \"त्वरित सहेजें (सत्र)\",\n \"serverStorage\": \"सर्वर स्टोरेज\"\n },\n \"status\": {\n \"current\": \"वर्तमान\",\n \"untitled\": \"शीर्षकहीन आरेख\",\n \"modified\": \"संशोधित\",\n \"sessionStorageNote\": \"केवल सत्र स्टोरेज - स्थायी रूप से सहेजने के लिए निर्यात करें\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"आरेख सहेजें (केवल वर्तमान सत्र)\",\n \"warningTitle\": \"महत्वपूर्ण\",\n \"warningMessage\": \"यह सहेजना अस्थायी है और ब्राउज़र बंद करने पर खो जाएगा।\",\n \"warningExport\": \"अपने काम को स्थायी रूप से सहेजने के लिए फ़ाइल निर्यात करें का उपयोग करें।\",\n \"placeholder\": \"आरेख का नाम दर्ज करें\",\n \"btnSave\": \"सहेजें\",\n \"btnCancel\": \"रद्द करें\"\n },\n \"load\": {\n \"title\": \"आरेख लोड करें (केवल वर्तमान सत्र)\",\n \"noteTitle\": \"नोट\",\n \"noteMessage\": \"ये सहेजे गए अस्थायी हैं। अपने आरेखों को स्थायी रूप से रखने के लिए निर्यात करें।\",\n \"noSavedDiagrams\": \"इस सत्र में कोई सहेजा गया आरेख नहीं मिला\",\n \"updated\": \"अपडेट किया गया\",\n \"btnLoad\": \"लोड करें\",\n \"btnDelete\": \"हटाएं\",\n \"btnClose\": \"बंद करें\"\n },\n \"export\": {\n \"title\": \"आरेख निर्यात करें\",\n \"recommendedTitle\": \"अनुशंसित\",\n \"recommendedMessage\": \"यह आपके काम को स्थायी रूप से सहेजने का सबसे अच्छा तरीका है।\",\n \"noteMessage\": \"निर्यात की गई JSON फ़ाइलों को बाद में आयात किया जा सकता है या दूसरों के साथ साझा किया जा सकता है।\",\n \"btnDownload\": \"JSON डाउनलोड करें\",\n \"btnCancel\": \"रद्द करें\"\n },\n \"readOnly\": {\n \"mode\": \"केवल देखने का मोड\",\n \"failed\": \"आरेख लोड करने में विफल\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"कृपया आरेख के लिए एक नाम दर्ज करें\",\n \"diagramExists\": \"इस सत्र में \\\"{{name}}\\\" नाम का एक आरेख पहले से मौजूद है। यह इसे अधिलेखित कर देगा। क्या आप वाकई जारी रखना चाहते हैं?\",\n \"unsavedChanges\": \"आपके पास असहेजे गए परिवर्तन हैं। लोड करना जारी रखें?\",\n \"createNewDiagram\": \"एक नया आरेख बनाएं?\",\n \"unsavedChangesExport\": \"आपके पास असहेजे गए परिवर्तन हैं। इसे सहेजने के लिए पहले अपने आरेख को निर्यात करें। जारी रखें?\",\n \"confirmDelete\": \"क्या आप वाकई इस आरेख को हटाना चाहते हैं?\",\n \"storageFull\": \"स्टोरेज भरा हुआ है! स्टोरेज प्रबंधक खोला जा रहा है...\",\n \"autoSaveFailed\": \"स्टोरेज भरा हुआ है! कृपया जगह खाली करने के लिए स्टोरेज प्रबंधक का उपयोग करें।\",\n \"beforeUnload\": \"आपके पास असहेजे गए परिवर्तन हैं। क्या आप वाकई छोड़ना चाहते हैं?\",\n \"quotaExceeded\": \"स्टोरेज कोटा पार हो गया। कृपया महत्वपूर्ण आरेखों को निर्यात करें और कुछ जगह खाली करें।\"\n }\n}\n" }, { "path": "packages/fossflow-app/public/i18n/app/id-ID.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Diagram Baru\",\n \"saveSessionOnly\": \"Simpan (Hanya Sesi)\",\n \"loadSessionOnly\": \"Muat (Hanya Sesi)\",\n \"importFile\": \"Impor File\",\n \"exportFile\": \"Ekspor File\",\n \"quickSaveSession\": \"Simpan Cepat (Sesi)\",\n \"serverStorage\": \"Penyimpanan Server\"\n },\n \"status\": {\n \"current\": \"Saat Ini\",\n \"untitled\": \"Diagram Tanpa Judul\",\n \"modified\": \"Dimodifikasi\",\n \"sessionStorageNote\": \"Hanya penyimpanan sesi - ekspor untuk menyimpan secara permanen\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Simpan Diagram (Hanya Sesi Saat Ini)\",\n \"warningTitle\": \"Penting\",\n \"warningMessage\": \"Simpanan ini bersifat sementara dan akan hilang saat Anda menutup browser.\",\n \"warningExport\": \"Gunakan Ekspor File untuk menyimpan pekerjaan Anda secara permanen.\",\n \"placeholder\": \"Masukkan nama diagram\",\n \"btnSave\": \"Simpan\",\n \"btnCancel\": \"Batal\"\n },\n \"load\": {\n \"title\": \"Muat Diagram (Hanya Sesi Saat Ini)\",\n \"noteTitle\": \"Catatan\",\n \"noteMessage\": \"Simpanan ini bersifat sementara. Ekspor diagram Anda untuk menyimpannya secara permanen.\",\n \"noSavedDiagrams\": \"Tidak ada diagram tersimpan yang ditemukan dalam sesi ini\",\n \"updated\": \"Diperbarui\",\n \"btnLoad\": \"Muat\",\n \"btnDelete\": \"Hapus\",\n \"btnClose\": \"Tutup\"\n },\n \"export\": {\n \"title\": \"Ekspor Diagram\",\n \"recommendedTitle\": \"Direkomendasikan\",\n \"recommendedMessage\": \"Ini adalah cara terbaik untuk menyimpan pekerjaan Anda secara permanen.\",\n \"noteMessage\": \"File JSON yang diekspor dapat diimpor nanti atau dibagikan dengan orang lain.\",\n \"btnDownload\": \"Unduh JSON\",\n \"btnCancel\": \"Batal\"\n },\n \"readOnly\": {\n \"mode\": \"Mode Hanya Baca\",\n \"failed\": \"Gagal memuat diagram\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Silakan masukkan nama diagram\",\n \"diagramExists\": \"Diagram dengan nama \\\"{{name}}\\\" sudah ada dalam sesi ini. Ini akan menimpanya. Apakah Anda yakin ingin melanjutkan?\",\n \"unsavedChanges\": \"Anda memiliki perubahan yang belum disimpan. Lanjutkan memuat?\",\n \"createNewDiagram\": \"Buat diagram baru?\",\n \"unsavedChangesExport\": \"Anda memiliki perubahan yang belum disimpan. Ekspor diagram Anda terlebih dahulu untuk menyimpannya. Lanjutkan?\",\n \"confirmDelete\": \"Apakah Anda yakin ingin menghapus diagram ini?\",\n \"storageFull\": \"Penyimpanan penuh! Membuka Manajer Penyimpanan...\",\n \"autoSaveFailed\": \"Penyimpanan penuh! Silakan gunakan Manajer Penyimpanan untuk membebaskan ruang.\",\n \"beforeUnload\": \"Anda memiliki perubahan yang belum disimpan. Apakah Anda yakin ingin keluar?\",\n \"quotaExceeded\": \"Kuota penyimpanan terlampaui. Silakan ekspor diagram penting dan kosongkan beberapa ruang.\"\n }\n}\n\n" }, { "path": "packages/fossflow-app/public/i18n/app/it-IT.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Nuovo Diagramma\",\n \"saveSessionOnly\": \"Salva (solo sessione)\",\n \"loadSessionOnly\": \"Carica (solo sessione)\",\n \"importFile\": \"Importa file\",\n \"exportFile\": \"Esporta file\",\n \"quickSaveSession\": \"Salvataggio rapido (sessione)\",\n \"serverStorage\": \"Archivio server\"\n },\n \"status\": {\n \"current\": \"Corrente\",\n \"untitled\": \"Diagramma senza titolo\",\n \"modified\": \"Modificato\",\n \"sessionStorageNote\": \"Solo archiviazione di sessione - esporta per salvare in modo permanente\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Salva diagramma (solo sessione corrente)\",\n \"warningTitle\": \"Importante\",\n \"warningMessage\": \"Questo salvataggio è temporaneo e verrà perso alla chiusura del browser.\",\n \"warningExport\": \"Usa Esporta file per salvare il tuo lavoro in modo permanente.\",\n \"placeholder\": \"Inserisci il nome del diagramma\",\n \"btnSave\": \"Salva\",\n \"btnCancel\": \"Annulla\"\n },\n \"load\": {\n \"title\": \"Carica diagramma (solo sessione corrente)\",\n \"noteTitle\": \"Nota\",\n \"noteMessage\": \"Questi salvataggi sono temporanei. Esporta i tuoi diagrammi per conservarli in modo permanente.\",\n \"noSavedDiagrams\": \"Nessun diagramma salvato trovato in questa sessione\",\n \"updated\": \"Aggiornato\",\n \"btnLoad\": \"Carica\",\n \"btnDelete\": \"Elimina\",\n \"btnClose\": \"Chiudi\"\n },\n \"export\": {\n \"title\": \"Esporta diagramma\",\n \"recommendedTitle\": \"Consigliato\",\n \"recommendedMessage\": \"Questo è il modo migliore per salvare il tuo lavoro in modo permanente.\",\n \"noteMessage\": \"I file JSON esportati possono essere importati in seguito o condivisi con altri.\",\n \"btnDownload\": \"Scarica JSON\",\n \"btnCancel\": \"Annulla\"\n },\n \"readOnly\": {\n \"mode\": \"Modalità sola lettura\",\n \"failed\": \"Impossibile caricare il diagramma\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Inserisci un nome per il diagramma\",\n \"diagramExists\": \"Un diagramma chiamato \\\"{{name}}\\\" esiste già in questa sessione. Verrà sovrascritto. Sei sicuro di voler continuare?\",\n \"unsavedChanges\": \"Hai modifiche non salvate. Continuare con il caricamento?\",\n \"createNewDiagram\": \"Creare un nuovo diagramma?\",\n \"unsavedChangesExport\": \"Hai modifiche non salvate. Esporta prima il tuo diagramma per salvarlo. Continuare?\",\n \"confirmDelete\": \"Sei sicuro di voler eliminare questo diagramma?\",\n \"storageFull\": \"Archiviazione piena! Apertura Gestore archiviazione...\",\n \"autoSaveFailed\": \"Archiviazione piena! Usa il Gestore archiviazione per liberare spazio.\",\n \"beforeUnload\": \"Hai modifiche non salvate. Sei sicuro di voler uscire?\",\n \"quotaExceeded\": \"Quota di archiviazione superata. Esporta i diagrammi importanti e libera spazio.\"\n }\n}" }, { "path": "packages/fossflow-app/public/i18n/app/pt-BR.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Novo diagrama\",\n \"saveSessionOnly\": \"Salvar (Apenas sessão)\",\n \"loadSessionOnly\": \"Carregar (Apenas sessão)\",\n \"importFile\": \"Importar arquivo\",\n \"exportFile\": \"Exportar arquivo\",\n \"quickSaveSession\": \"Salvamento rápido (Sessão)\",\n \"serverStorage\": \"Armazenamento no servidor\"\n },\n \"status\": {\n \"current\": \"Atual\",\n \"untitled\": \"Diagrama sem título\",\n \"modified\": \"Modificado\",\n \"sessionStorageNote\": \"Apenas armazenamento de sessão - exporte para salvar permanentemente\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Salvar diagrama (Apenas sessão atual)\",\n \"warningTitle\": \"Importante\",\n \"warningMessage\": \"Este salvamento é temporário e será perdido ao fechar o navegador.\",\n \"warningExport\": \"Use Exportar arquivo para salvar seu trabalho permanentemente.\",\n \"placeholder\": \"Digite o nome do diagrama\",\n \"btnSave\": \"Salvar\",\n \"btnCancel\": \"Cancelar\"\n },\n \"load\": {\n \"title\": \"Carregar diagrama (Apenas sessão atual)\",\n \"noteTitle\": \"Nota\",\n \"noteMessage\": \"Estes salvamentos são temporários. Exporte seus diagramas para mantê-los permanentemente.\",\n \"noSavedDiagrams\": \"Nenhum diagrama salvo encontrado nesta sessão\",\n \"updated\": \"Atualizado\",\n \"btnLoad\": \"Carregar\",\n \"btnDelete\": \"Excluir\",\n \"btnClose\": \"Fechar\"\n },\n \"export\": {\n \"title\": \"Exportar diagrama\",\n \"recommendedTitle\": \"Recomendado\",\n \"recommendedMessage\": \"Esta é a melhor forma de salvar seu trabalho permanentemente.\",\n \"noteMessage\": \"Arquivos JSON exportados podem ser importados posteriormente ou compartilhados com outros.\",\n \"btnDownload\": \"Baixar JSON\",\n \"btnCancel\": \"Cancelar\"\n },\n \"readOnly\": {\n \"mode\": \"Modo somente leitura\",\n \"failed\": \"Falha ao carregar diagrama\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Por favor, digite um nome para o diagrama\",\n \"diagramExists\": \"Já existe um diagrama chamado \\\"{{name}}\\\" nesta sessão. Isso irá sobrescrevê-lo. Tem certeza de que deseja continuar?\",\n \"unsavedChanges\": \"Você tem alterações não salvas. Continuar carregando?\",\n \"createNewDiagram\": \"Criar um novo diagrama?\",\n \"unsavedChangesExport\": \"Você tem alterações não salvas. Exporte seu diagrama primeiro para salvá-lo. Continuar?\",\n \"confirmDelete\": \"Tem certeza de que deseja excluir este diagrama?\",\n \"storageFull\": \"Armazenamento cheio! Abrindo o gerenciador de armazenamento...\",\n \"autoSaveFailed\": \"Armazenamento cheio! Por favor, use o gerenciador de armazenamento para liberar espaço.\",\n \"beforeUnload\": \"Você tem alterações não salvas. Tem certeza de que deseja sair?\",\n \"quotaExceeded\": \"Cota de armazenamento excedida. Por favor, exporte os diagramas importantes e libere espaço.\"\n }\n}\n" }, { "path": "packages/fossflow-app/public/i18n/app/ru-RU.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Новая диаграмма\",\n \"saveSessionOnly\": \"Сохранить (Только сеанс)\",\n \"loadSessionOnly\": \"Загрузить (Только сеанс)\",\n \"importFile\": \"Импортировать файл\",\n \"exportFile\": \"Экспортировать файл\",\n \"quickSaveSession\": \"Быстрое сохранение (Сеанс)\",\n \"serverStorage\": \"Серверное хранилище\"\n },\n \"status\": {\n \"current\": \"Текущий\",\n \"untitled\": \"Диаграмма без названия\",\n \"modified\": \"Изменено\",\n \"sessionStorageNote\": \"Только хранилище сеанса - экспортируйте для постоянного сохранения\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Сохранить диаграмму (Только текущий сеанс)\",\n \"warningTitle\": \"Важно\",\n \"warningMessage\": \"Это сохранение временное и будет потеряно при закрытии браузера.\",\n \"warningExport\": \"Используйте Экспортировать файл для постоянного сохранения вашей работы.\",\n \"placeholder\": \"Введите название диаграммы\",\n \"btnSave\": \"Сохранить\",\n \"btnCancel\": \"Отмена\"\n },\n \"load\": {\n \"title\": \"Загрузить диаграмму (Только текущий сеанс)\",\n \"noteTitle\": \"Примечание\",\n \"noteMessage\": \"Эти сохранения временные. Экспортируйте свои диаграммы, чтобы сохранить их постоянно.\",\n \"noSavedDiagrams\": \"В этом сеансе не найдено сохраненных диаграмм\",\n \"updated\": \"Обновлено\",\n \"btnLoad\": \"Загрузить\",\n \"btnDelete\": \"Удалить\",\n \"btnClose\": \"Закрыть\"\n },\n \"export\": {\n \"title\": \"Экспортировать диаграмму\",\n \"recommendedTitle\": \"Рекомендуется\",\n \"recommendedMessage\": \"Это лучший способ сохранить вашу работу постоянно.\",\n \"noteMessage\": \"Экспортированные файлы JSON можно импортировать позже или поделиться с другими.\",\n \"btnDownload\": \"Скачать JSON\",\n \"btnCancel\": \"Отмена\"\n },\n \"readOnly\": {\n \"mode\": \"Режим только для чтения\",\n \"failed\": \"Не удалось загрузить диаграмму\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Пожалуйста, введите название диаграммы\",\n \"diagramExists\": \"Диаграмма с названием \\\"{{name}}\\\" уже существует в этом сеансе. Это перезапишет её. Вы уверены, что хотите продолжить?\",\n \"unsavedChanges\": \"У вас есть несохраненные изменения. Продолжить загрузку?\",\n \"createNewDiagram\": \"Создать новую диаграмму?\",\n \"unsavedChangesExport\": \"У вас есть несохраненные изменения. Сначала экспортируйте диаграмму, чтобы сохранить её. Продолжить?\",\n \"confirmDelete\": \"Вы уверены, что хотите удалить эту диаграмму?\",\n \"storageFull\": \"Хранилище заполнено! Открывается менеджер хранилища...\",\n \"autoSaveFailed\": \"Хранилище заполнено! Пожалуйста, используйте менеджер хранилища, чтобы освободить место.\",\n \"beforeUnload\": \"У вас есть несохраненные изменения. Вы уверены, что хотите уйти?\",\n \"quotaExceeded\": \"Квота хранилища превышена. Пожалуйста, экспортируйте важные диаграммы и освободите место.\"\n }\n}\n" }, { "path": "packages/fossflow-app/public/i18n/app/tr-TR.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Yeni Diyagram\",\n \"saveSessionOnly\": \"Kaydet (Yalnızca Oturum)\",\n \"loadSessionOnly\": \"Yükle (Yalnızca Oturum)\",\n \"importFile\": \"Dosya İçe Aktar\",\n \"exportFile\": \"Dosya Dışa Aktar\",\n \"quickSaveSession\": \"Hızlı Kaydet (Oturum)\",\n \"serverStorage\": \"Sunucu Depolama\"\n },\n \"status\": {\n \"current\": \"Mevcut\",\n \"untitled\": \"İsimsiz Diyagram\",\n \"modified\": \"Değiştirildi\",\n \"sessionStorageNote\": \"Yalnızca oturum depolama - kalıcı olarak kaydetmek için dışa aktar\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Diyagramı Kaydet (Yalnızca Mevcut Oturum)\",\n \"warningTitle\": \"Önemli\",\n \"warningMessage\": \"Bu kayıt geçicidir ve tarayıcıyı kapattığınızda kaybolacaktır.\",\n \"warningExport\": \"Çalışmanızı kalıcı olarak kaydetmek için Dosya Dışa Aktar kullanın.\",\n \"placeholder\": \"Diyagram adı girin\",\n \"btnSave\": \"Kaydet\",\n \"btnCancel\": \"İptal\"\n },\n \"load\": {\n \"title\": \"Diyagram Yükle (Yalnızca Mevcut Oturum)\",\n \"noteTitle\": \"Not\",\n \"noteMessage\": \"Bu kayıtlar geçicidir. Diyagramlarınızı kalıcı olarak saklamak için dışa aktarın.\",\n \"noSavedDiagrams\": \"Bu oturumda kaydedilmiş diyagram bulunamadı\",\n \"updated\": \"Güncellendi\",\n \"btnLoad\": \"Yükle\",\n \"btnDelete\": \"Sil\",\n \"btnClose\": \"Kapat\"\n },\n \"export\": {\n \"title\": \"Diyagramı Dışa Aktar\",\n \"recommendedTitle\": \"Önerilen\",\n \"recommendedMessage\": \"Bu, çalışmanızı kalıcı olarak kaydetmenin en iyi yoludur.\",\n \"noteMessage\": \"Dışa aktarılan JSON dosyaları daha sonra içe aktarılabilir veya başkalarıyla paylaşılabilir.\",\n \"btnDownload\": \"JSON İndir\",\n \"btnCancel\": \"İptal\"\n },\n \"readOnly\": {\n \"mode\": \"Yalnızca Görüntüleme Modu\",\n \"failed\": \"Diyagram yüklenemedi\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Lütfen bir diyagram adı girin\",\n \"diagramExists\": \"\\\"{{name}}\\\" adlı bir diyagram bu oturumda zaten mevcut. Bu, üzerine yazacaktır. Devam etmek istediğinizden emin misiniz?\",\n \"unsavedChanges\": \"Kaydedilmemiş değişiklikleriniz var. Yüklemeye devam edilsin mi?\",\n \"createNewDiagram\": \"Yeni bir diyagram oluşturulsun mu?\",\n \"unsavedChangesExport\": \"Kaydedilmemiş değişiklikleriniz var. Önce diyagramınızı kaydetmek için dışa aktarın. Devam edilsin mi?\",\n \"confirmDelete\": \"Bu diyagramı silmek istediğinizden emin misiniz?\",\n \"storageFull\": \"Depolama dolu! Depolama Yöneticisi açılıyor...\",\n \"autoSaveFailed\": \"Depolama dolu! Lütfen alan açmak için Depolama Yöneticisi'ni kullanın.\",\n \"beforeUnload\": \"Kaydedilmemiş değişiklikleriniz var. Ayrılmak istediğinizden emin misiniz?\",\n \"quotaExceeded\": \"Depolama kotası aşıldı. Lütfen önemli diyagramları dışa aktarın ve biraz alan açın.\"\n }\n}\n" }, { "path": "packages/fossflow-app/public/i18n/app/zh-CN.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"新建图表\",\n \"saveSessionOnly\": \"保存（仅会话）\",\n \"loadSessionOnly\": \"加载（仅会话）\",\n \"importFile\": \"导入文件\",\n \"exportFile\": \"导出文件\",\n \"quickSaveSession\": \"快速保存（会话）\",\n \"serverStorage\": \"服务端存储\"\n },\n \"status\": {\n \"current\": \"当前\",\n \"untitled\": \"未命名图表\",\n \"modified\": \"已修改\",\n \"sessionStorageNote\": \"仅会话存储 - 导出以永久保存\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"保存图表（仅当前会话）\",\n \"warningTitle\": \"重要提示\",\n \"warningMessage\": \"此保存是临时的，关闭浏览器后将丢失。\",\n \"warningExport\": \"使用导出文件功能永久保存您的工作。\",\n \"placeholder\": \"输入图表名称\",\n \"btnSave\": \"保存\",\n \"btnCancel\": \"取消\"\n },\n \"load\": {\n \"title\": \"加载图表（仅当前会话）\",\n \"noteTitle\": \"提示\",\n \"noteMessage\": \"这些保存是临时的。导出您的图表以永久保存。\",\n \"noSavedDiagrams\": \"当前会话中未找到已保存的图表\",\n \"updated\": \"更新时间\",\n \"btnLoad\": \"加载\",\n \"btnDelete\": \"删除\",\n \"btnClose\": \"关闭\"\n },\n \"export\": {\n \"title\": \"导出图表\",\n \"recommendedTitle\": \"推荐\",\n \"recommendedMessage\": \"这是永久保存工作的最佳方式。\",\n \"noteMessage\": \"导出的 JSON 文件可以稍后导入或与他人共享。\",\n \"btnDownload\": \"下载 JSON\",\n \"btnCancel\": \"取消\"\n },\n \"readOnly\": {\n \"mode\": \"阅读模式\",\n \"failed\": \"加载图表失败\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"请输入图表名称\",\n \"diagramExists\": \"名为\\\"{{name}}\\\"的图表已存在于此会话中。这将覆盖它。您确定要继续吗？\",\n \"unsavedChanges\": \"您有未保存的更改。继续加载？\",\n \"createNewDiagram\": \"创建新图表？\",\n \"unsavedChangesExport\": \"您有未保存的更改。请先导出图表以保存。继续？\",\n \"confirmDelete\": \"您确定要删除此图表吗？\",\n \"storageFull\": \"存储空间已满！正在打开存储管理器...\",\n \"autoSaveFailed\": \"存储空间已满！请使用存储管理器释放空间。\",\n \"beforeUnload\": \"您有未保存的更改。您确定要离开吗？\",\n \"quotaExceeded\": \"存储配额已超出。请导出重要图表并清理一些空间。\"\n }\n}" }, { "path": "packages/fossflow-app/public/index.html", "content": "\n\n \n \n favicon.ico\" />\n \n \n \n logo192.png\" />\n \n manifest.json\" />\n \n FossFLOW - Isometric Diagramming Tool\n \n \n \n

\n \n \n\n" }, { "path": "packages/fossflow-app/public/manifest.json", "content": "{\n \"short_name\": \"FossFLOW\",\n \"name\": \"FossFLOW - Isometric Diagramming Tool\",\n \"description\": \"Create beautiful isometric diagrams with FossFLOW\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\",\n \"purpose\": \"any maskable\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\",\n \"purpose\": \"any maskable\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#2563eb\",\n \"background_color\": \"#ffffff\",\n \"orientation\": \"portrait-primary\",\n \"scope\": \"/\",\n \"categories\": [\"productivity\", \"utilities\", \"graphics\"]\n}\n" }, { "path": "packages/fossflow-app/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "packages/fossflow-app/public/service-worker.js", "content": "const CACHE_NAME = 'fossflow-v1';\n\n// Get the base path from the service worker's location\nconst swPath = self.location.pathname;\nconst basePath = swPath.substring(0, swPath.lastIndexOf('/') + 1);\n\nconst urlsToCache = [\n basePath,\n `${basePath}static/css/main.css`,\n `${basePath}static/js/bundle.js`,\n `${basePath}manifest.json`,\n `${basePath}favicon.ico`,\n `${basePath}logo192.png`,\n `${basePath}logo512.png`\n];\n\nself.addEventListener('install', event => {\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then(cache => {\n console.log('Opened cache');\n return cache.addAll(urlsToCache);\n })\n );\n});\n\nself.addEventListener('fetch', event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => {\n if (response) {\n return response;\n }\n\n return fetch(event.request).then(\n response => {\n if (!response || response.status !== 200 || response.type !== 'basic') {\n return response;\n }\n\n const responseToCache = response.clone();\n\n caches.open(CACHE_NAME)\n .then(cache => {\n cache.put(event.request, responseToCache);\n });\n\n return response;\n }\n );\n })\n );\n});\n\nself.addEventListener('activate', event => {\n const cacheWhitelist = [CACHE_NAME];\n\n event.waitUntil(\n caches.keys().then(cacheNames => {\n return Promise.all(\n cacheNames.map(cacheName => {\n if (cacheWhitelist.indexOf(cacheName) === -1) {\n return caches.delete(cacheName);\n }\n })\n );\n })\n );\n});" }, { "path": "packages/fossflow-app/rsbuild.config.ts", "content": "import { defineConfig } from '@rsbuild/core';\nimport { pluginReact } from '@rsbuild/plugin-react';\nimport path from 'path';\n\nconst publicUrl = process.env.PUBLIC_URL || '';\nconst assetPrefix = publicUrl ? (publicUrl.endsWith('/') ? publicUrl : publicUrl + '/') : '/';\n\n// Resolve React from root node_modules to avoid duplicate instances\nconst rootNodeModules = path.resolve(__dirname, '../../node_modules');\n\nexport default defineConfig({\n plugins: [pluginReact()],\n resolve: {\n alias: {\n // Force React to resolve from root node_modules\n 'react': path.join(rootNodeModules, 'react'),\n 'react-dom': path.join(rootNodeModules, 'react-dom'),\n },\n },\n html: {\n template: './public/index.html',\n templateParameters: {\n assetPrefix: assetPrefix,\n },\n },\n source: {\n // Define global constants that will be replaced at build time\n define: {\n 'process.env.PUBLIC_URL': JSON.stringify(publicUrl),\n 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),\n },\n },\n output: {\n distPath: {\n root: 'build',\n },\n // https://rsbuild.rs/guide/advanced/browser-compatibility\n polyfill: 'usage',\n assetPrefix: assetPrefix,\n copy: [\n {\n from: './src/i18n',\n to: 'i18n/app',\n },\n ]\n }\n});\n" }, { "path": "packages/fossflow-app/src/App.css", "content": ".App {\n height: 100vh;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.toolbar {\n background-color: #f5f5f5;\n border-bottom: 1px solid #ddd;\n padding: 10px;\n display: flex;\n gap: 10px;\n align-items: center;\n}\n\n.toolbar button {\n padding: 8px 16px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n}\n\n.toolbar button:hover {\n background-color: #0056b3;\n}\n\n.current-diagram {\n margin-left: auto;\n font-size: 14px;\n color: #666;\n}\n\n.fossflow-container {\n flex: 1;\n width: 100%;\n position: relative;\n /* Remove background color to let Isoflow's grid show through */\n /* background-color: #f9f9f9; */\n}\n\n/* Ensure Isoflow takes full height */\n.fossflow-container > div {\n height: 100%;\n}\n\n.dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.dialog {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n min-width: 400px;\n max-width: 600px;\n max-height: 80vh;\n overflow-y: auto;\n}\n\n.dialog h2 {\n margin-top: 0;\n margin-bottom: 20px;\n color: #333;\n}\n\n.dialog input[type=\"text\"] {\n width: 100%;\n padding: 10px;\n font-size: 16px;\n border: 1px solid #ddd;\n border-radius: 4px;\n margin-bottom: 20px;\n box-sizing: border-box;\n}\n\n.dialog-buttons {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n.dialog-buttons button {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n}\n\n.dialog-buttons button:first-child {\n background-color: #007bff;\n color: white;\n}\n\n.dialog-buttons button:first-child:hover {\n background-color: #0056b3;\n}\n\n.dialog-buttons button:last-child {\n background-color: #6c757d;\n color: white;\n}\n\n.dialog-buttons button:last-child:hover {\n background-color: #5a6268;\n}\n\n.diagram-list {\n margin-bottom: 20px;\n max-height: 400px;\n overflow-y: auto;\n}\n\n.diagram-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n border: 1px solid #eee;\n border-radius: 4px;\n margin-bottom: 10px;\n}\n\n.diagram-item:hover {\n background-color: #f8f9fa;\n}\n\n.diagram-actions {\n display: flex;\n gap: 5px;\n}\n\n.diagram-actions button {\n padding: 4px 12px;\n font-size: 12px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.diagram-actions button:first-child {\n background-color: #28a745;\n color: white;\n}\n\n.diagram-actions button:first-child:hover {\n background-color: #218838;\n}\n\n.diagram-actions button:last-child {\n background-color: #dc3545;\n color: white;\n}\n\n.diagram-actions button:last-child:hover {\n background-color: #c82333;\n}" }, { "path": "packages/fossflow-app/src/App.tsx", "content": "import { useState, useEffect, useRef } from 'react';\nimport { Isoflow } from 'fossflow';\nimport { flattenCollections } from '@isoflow/isopacks/dist/utils';\nimport isoflowIsopack from '@isoflow/isopacks/dist/isoflow';\nimport { useTranslation } from 'react-i18next';\nimport {\n DiagramData,\n mergeDiagramData,\n extractSavableData\n} from './diagramUtils';\nimport { StorageManager } from './StorageManager';\nimport { DiagramManager } from './components/DiagramManager';\nimport { storageManager } from './services/storageService';\nimport ChangeLanguage from './components/ChangeLanguage';\nimport { allLocales } from 'fossflow';\nimport { useIconPackManager, IconPackName } from './services/iconPackManager';\nimport './App.css';\nimport { BrowserRouter, Route, Routes, useParams } from 'react-router-dom';\n\n// Load core isoflow icons (always loaded)\nconst coreIcons = flattenCollections([isoflowIsopack]);\n\ninterface SavedDiagram {\n id: string;\n name: string;\n data: any;\n createdAt: string;\n updatedAt: string;\n}\n\nfunction App() {\n // Get base path from PUBLIC_URL, ensure no trailing slash for React Router\n const publicUrl = process.env.PUBLIC_URL || '';\n // React Router basename should not have trailing slash\n const basename = publicUrl ? (publicUrl.endsWith('/') ? publicUrl.slice(0, -1) : publicUrl) : '/';\n\n return (\n \n \n } />\n } />\n \n \n );\n}\n\nfunction EditorPage() {\n // Initialize icon pack manager with core icons\n const iconPackManager = useIconPackManager(coreIcons);\n const { readonlyDiagramId } = useParams<{ readonlyDiagramId: string }>();\n\n const [diagrams, setDiagrams] = useState([]);\n const [isDiagramsInitialized, setIsDiagramsInitialized] = useState(false);\n const [currentDiagram, setCurrentDiagram] = useState(\n null\n );\n const [diagramName, setDiagramName] = useState('');\n const [showSaveDialog, setShowSaveDialog] = useState(false);\n const [showLoadDialog, setShowLoadDialog] = useState(false);\n const [showExportDialog, setShowExportDialog] = useState(false);\n const [fossflowKey, setFossflowKey] = useState(0); // Key to force re-render of FossFLOW\n const [currentModel, setCurrentModel] = useState(null); // Store current model state\n const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n const [lastAutoSave, setLastAutoSave] = useState(null);\n const [showStorageManager, setShowStorageManager] = useState(false);\n const [showDiagramManager, setShowDiagramManager] = useState(false);\n const [serverStorageAvailable, setServerStorageAvailable] = useState(false);\n const isReadonlyUrl =\n window.location.pathname.startsWith('/display/') && readonlyDiagramId;\n\n // Initialize with empty diagram data\n // Create default colors for connectors\n const defaultColors = [\n { id: 'blue', value: '#0066cc' },\n { id: 'green', value: '#00aa00' },\n { id: 'red', value: '#cc0000' },\n { id: 'orange', value: '#ff9900' },\n { id: 'purple', value: '#9900cc' },\n { id: 'black', value: '#000000' },\n { id: 'gray', value: '#666666' }\n ];\n\n const [diagramData, setDiagramData] = useState(() => {\n // Initialize with last opened data if available\n const lastOpenedData = localStorage.getItem('fossflow-last-opened-data');\n if (lastOpenedData) {\n try {\n const data = JSON.parse(lastOpenedData);\n const importedIcons = (data.icons || []).filter((icon: any) => {\n return icon.collection === 'imported';\n });\n const mergedIcons = [...coreIcons, ...importedIcons];\n return {\n ...data,\n icons: mergedIcons,\n colors: data.colors?.length ? data.colors : defaultColors,\n fitToScreen: data.fitToScreen !== false\n };\n } catch (e) {\n console.error('Failed to load last opened data:', e);\n }\n }\n\n // Default state if no saved data\n return {\n title: 'Untitled Diagram',\n icons: coreIcons,\n colors: defaultColors,\n items: [],\n views: [],\n fitToScreen: true\n };\n });\n\n // Check for server storage availability\n useEffect(() => {\n storageManager\n .initialize()\n .then(() => {\n setServerStorageAvailable(storageManager.isServerStorage());\n })\n .catch(console.error);\n }, []);\n\n // Check if readonlyDiagramId exists - if exists, load diagram in view-only mode\n useEffect(() => {\n if (!isReadonlyUrl || !serverStorageAvailable) return;\n const loadReadonlyDiagram = async () => {\n try {\n const storage = storageManager.getStorage();\n // Get diagram metadata\n const diagramList = await storage.listDiagrams();\n const diagramInfo = diagramList.find((d) => {\n return d.id === readonlyDiagramId;\n });\n // Load the diagram data from server storage\n const data = await storage.loadDiagram(readonlyDiagramId);\n // Convert to SavedDiagram interface format\n const readonlyDiagram: SavedDiagram = {\n id: readonlyDiagramId,\n name: diagramInfo?.name || data.title || 'Readonly Diagram',\n data: data,\n createdAt: new Date().toISOString(),\n updatedAt:\n diagramInfo?.lastModified.toISOString() || new Date().toISOString()\n };\n await loadDiagram(readonlyDiagram, true);\n } catch (error) {\n // Alert if unable to load readonly diagram and redirect to new diagram\n alert(t('dialog.readOnly.failed'));\n window.location.href = '/';\n }\n };\n loadReadonlyDiagram();\n }, [readonlyDiagramId, serverStorageAvailable]);\n\n // Update diagramData when loaded icons change\n useEffect(() => {\n setDiagramData((prev) => {\n return {\n ...prev,\n icons: [\n ...iconPackManager.loadedIcons,\n ...(prev.icons || []).filter((icon) => {\n return icon.collection === 'imported';\n })\n ]\n };\n });\n }, [iconPackManager.loadedIcons]);\n\n // Load diagrams from localStorage on component mount\n useEffect(() => {\n const savedDiagrams = localStorage.getItem('fossflow-diagrams');\n if (savedDiagrams) {\n setDiagrams(JSON.parse(savedDiagrams));\n setIsDiagramsInitialized(true);\n }\n\n // Load last opened diagram metadata (data is already loaded in state initialization)\n const lastOpenedId = localStorage.getItem('fossflow-last-opened');\n\n if (lastOpenedId && savedDiagrams) {\n try {\n const allDiagrams = JSON.parse(savedDiagrams);\n const lastDiagram = allDiagrams.find((d: SavedDiagram) => {\n return d.id === lastOpenedId;\n });\n if (lastDiagram) {\n setCurrentDiagram(lastDiagram);\n setDiagramName(lastDiagram.name);\n // Also set currentModel to match diagramData\n setCurrentModel(diagramData);\n }\n } catch (e) {\n console.error('Failed to restore last diagram metadata:', e);\n }\n }\n }, []);\n\n // Save diagrams to localStorage whenever they change\n useEffect(() => {\n if (!isDiagramsInitialized) return;\n\n try {\n // Store diagrams without the full icon data\n const diagramsToStore = diagrams.map((d) => {\n return {\n ...d,\n data: {\n ...d.data,\n icons: [] // Don't store icons with each diagram\n }\n };\n });\n localStorage.setItem(\n 'fossflow-diagrams',\n JSON.stringify(diagramsToStore)\n );\n } catch (e) {\n console.error('Failed to save diagrams:', e);\n if (e instanceof DOMException && e.name === 'QuotaExceededError') {\n alert(t('alert.quotaExceeded'));\n }\n }\n }, [diagrams]);\n\n const saveDiagram = () => {\n if (!diagramName.trim()) {\n alert(t('alert.enterDiagramName'));\n return;\n }\n\n // Check if a diagram with this name already exists (excluding current)\n const existingDiagram = diagrams.find((d) => {\n return d.name === diagramName.trim() && d.id !== currentDiagram?.id;\n });\n\n if (existingDiagram) {\n const confirmOverwrite = window.confirm(\n t('alert.diagramExists', { name: diagramName })\n );\n if (!confirmOverwrite) {\n return;\n }\n }\n\n // Construct save data - include only imported icons\n const importedIcons = (\n currentModel?.icons ||\n diagramData.icons ||\n []\n ).filter((icon) => {\n return icon.collection === 'imported';\n });\n\n const savedData = {\n title: diagramName,\n icons: importedIcons, // Save only imported icons with diagram\n colors: currentModel?.colors || diagramData.colors || [],\n items: currentModel?.items || diagramData.items || [],\n views: currentModel?.views || diagramData.views || [],\n fitToScreen: true\n };\n\n const newDiagram: SavedDiagram = {\n id: currentDiagram?.id || Date.now().toString(),\n name: diagramName,\n data: savedData,\n createdAt: currentDiagram?.createdAt || new Date().toISOString(),\n updatedAt: new Date().toISOString()\n };\n\n if (currentDiagram) {\n // Update existing diagram\n setDiagrams(\n diagrams.map((d) => {\n return d.id === currentDiagram.id ? newDiagram : d;\n })\n );\n } else if (existingDiagram) {\n // Replace existing diagram with same name\n setDiagrams(\n diagrams.map((d) => {\n return d.id === existingDiagram.id\n ? {\n ...newDiagram,\n id: existingDiagram.id,\n createdAt: existingDiagram.createdAt\n }\n : d;\n })\n );\n newDiagram.id = existingDiagram.id;\n newDiagram.createdAt = existingDiagram.createdAt;\n } else {\n // Add new diagram\n setDiagrams([...diagrams, newDiagram]);\n }\n\n setCurrentDiagram(newDiagram);\n setShowSaveDialog(false);\n setHasUnsavedChanges(false);\n setLastAutoSave(new Date());\n\n // Save as last opened\n try {\n localStorage.setItem('fossflow-last-opened', newDiagram.id);\n localStorage.setItem(\n 'fossflow-last-opened-data',\n JSON.stringify(newDiagram.data)\n );\n } catch (e) {\n console.error('Failed to save diagram:', e);\n if (e instanceof DOMException && e.name === 'QuotaExceededError') {\n alert(t('alert.storageFull'));\n setShowStorageManager(true);\n }\n }\n };\n\n const loadDiagram = async (\n diagram: SavedDiagram,\n skipUnsavedCheck = false\n ) => {\n if (\n !skipUnsavedCheck &&\n hasUnsavedChanges &&\n !window.confirm(t('alert.unsavedChanges'))\n ) {\n return;\n }\n\n // Auto-detect and load required icon packs\n await iconPackManager.loadPacksForDiagram(diagram.data.items || []);\n\n // Merge imported icons with loaded icon set\n const importedIcons = (diagram.data.icons || []).filter((icon: any) => {\n return icon.collection === 'imported';\n });\n const mergedIcons = [...iconPackManager.loadedIcons, ...importedIcons];\n const dataWithIcons = {\n ...diagram.data,\n icons: mergedIcons\n };\n\n setCurrentDiagram(diagram);\n setDiagramName(diagram.name);\n setDiagramData(dataWithIcons);\n setCurrentModel(dataWithIcons);\n setFossflowKey((prev) => {\n return prev + 1;\n }); // Force re-render of FossFLOW\n setShowLoadDialog(false);\n setHasUnsavedChanges(false);\n\n // Save as last opened (without icons)\n try {\n localStorage.setItem('fossflow-last-opened', diagram.id);\n localStorage.setItem(\n 'fossflow-last-opened-data',\n JSON.stringify(diagram.data)\n );\n } catch (e) {\n console.error('Failed to save last opened:', e);\n }\n };\n\n const deleteDiagram = (id: string) => {\n if (window.confirm(t('alert.confirmDelete'))) {\n setDiagrams(\n diagrams.filter((d) => {\n return d.id !== id;\n })\n );\n if (currentDiagram?.id === id) {\n setCurrentDiagram(null);\n setDiagramName('');\n }\n }\n };\n\n const newDiagram = () => {\n const message = hasUnsavedChanges\n ? t('alert.unsavedChangesExport')\n : t('alert.createNewDiagram');\n\n if (window.confirm(message)) {\n const emptyDiagram: DiagramData = {\n title: 'Untitled Diagram',\n icons: iconPackManager.loadedIcons, // Use currently loaded icons\n colors: defaultColors,\n items: [],\n views: [],\n fitToScreen: true\n };\n setCurrentDiagram(null);\n setDiagramName('');\n setDiagramData(emptyDiagram);\n setCurrentModel(emptyDiagram); // Reset current model too\n setFossflowKey((prev) => {\n return prev + 1;\n }); // Force re-render of FossFLOW\n setHasUnsavedChanges(false);\n\n // Clear last opened\n localStorage.removeItem('fossflow-last-opened');\n localStorage.removeItem('fossflow-last-opened-data');\n }\n };\n\n const handleModelUpdated = (model: any) => {\n // Store the current model state whenever it updates\n // The model from Isoflow contains the COMPLETE state including all icons\n\n // Simply store the complete model as-is since it has everything\n const updatedModel = {\n title: model.title || diagramName || 'Untitled',\n icons: model.icons || [], // This already includes ALL icons (default + imported)\n colors: model.colors || defaultColors,\n items: model.items || [],\n views: model.views || [],\n fitToScreen: true\n };\n\n setCurrentModel(updatedModel);\n setDiagramData(updatedModel);\n\n if (!isReadonlyUrl) {\n setHasUnsavedChanges(true);\n }\n };\n\n const exportDiagram = () => {\n // Use the most recent model data - prefer currentModel as it gets updated by handleModelUpdated\n const modelToExport = currentModel || diagramData;\n\n // Get ALL icons from the current model (which includes both default and imported)\n const allModelIcons = modelToExport.icons || [];\n\n // For safety, also check diagramData for any imported icons not in currentModel\n const diagramImportedIcons = (diagramData.icons || []).filter((icon) => {\n return icon.collection === 'imported';\n });\n\n // Create a map to deduplicate icons by ID, preferring the ones from currentModel\n const iconMap = new Map();\n\n // First add all icons from the model (includes defaults + imported)\n allModelIcons.forEach((icon) => {\n iconMap.set(icon.id, icon);\n });\n\n // Then add any imported icons from diagramData that might be missing\n diagramImportedIcons.forEach((icon) => {\n if (!iconMap.has(icon.id)) {\n iconMap.set(icon.id, icon);\n }\n });\n\n // Get all unique icons\n const allIcons = Array.from(iconMap.values());\n\n const exportData = {\n title: diagramName || modelToExport.title || 'Exported Diagram',\n icons: allIcons, // Include ALL icons (default + imported) for portability\n colors: modelToExport.colors || [],\n items: modelToExport.items || [],\n views: modelToExport.views || [],\n fitToScreen: true\n };\n\n const jsonString = JSON.stringify(exportData, null, 2);\n\n // Create a blob and download link\n const blob = new Blob([jsonString], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `${diagramName || 'diagram'}-${new Date().toISOString().split('T')[0]}.json`;\n a.click();\n URL.revokeObjectURL(url);\n\n setShowExportDialog(false);\n setHasUnsavedChanges(false); // Mark as saved after export\n };\n\n const handleDiagramManagerLoad = async (id: string, data: any) => {\n console.log(`App: handleDiagramManagerLoad called for diagram ${id}`);\n\n /**\n * Icon Persistence Strategy:\n *\n * NEW BEHAVIOR (after this fix):\n * - Server storage saves ALL icons (default collections + imported custom icons)\n * - When loading, if we detect default collection icons, use ALL icons from server\n * - This preserves imported custom icons without data loss\n *\n * BACKWARD COMPATIBILITY (for old saves):\n * - Old format only saved imported icons (collection='imported')\n * - If no default icons detected, merge imported icons with current defaults\n * - This ensures old diagrams still load correctly\n *\n * DETECTION:\n * - Check if loaded icons contain any default collection (isoflow, aws, gcp, etc.)\n * - If yes: New format, use all icons from server\n * - If no: Old format, merge imported with defaults\n */\n const loadedIcons = data.icons || [];\n console.log(`App: Server sent ${loadedIcons.length} icons`);\n\n // Auto-detect and load required icon packs\n await iconPackManager.loadPacksForDiagram(data.items || []);\n\n // Strategy: Check if server has ALL icons (both default and imported)\n // Server storage now saves ALL icons, so we should use them directly\n // For backward compatibility with old saves, we detect and merge\n\n let finalIcons;\n const hasDefaultIcons = loadedIcons.some((icon: any) => {\n return (\n icon.collection === 'isoflow' ||\n icon.collection === 'aws' ||\n icon.collection === 'gcp'\n );\n });\n\n if (hasDefaultIcons) {\n // New format: Server saved ALL icons (default + imported)\n // Use them directly to preserve any custom icon modifications\n console.log(\n `App: Using all ${loadedIcons.length} icons from server (includes defaults + imported)`\n );\n finalIcons = loadedIcons;\n } else {\n // Old format: Server only saved imported icons\n // Merge imported icons with currently loaded icon packs\n const importedIcons = loadedIcons.filter((icon: any) => {\n return icon.collection === 'imported';\n });\n finalIcons = [...iconPackManager.loadedIcons, ...importedIcons];\n console.log(\n `App: Old format detected. Merged ${importedIcons.length} imported icons with ${iconPackManager.loadedIcons.length} defaults = ${finalIcons.length} total`\n );\n }\n\n const mergedData: DiagramData = {\n ...data,\n title: data.title || data.name || 'Loaded Diagram',\n icons: finalIcons,\n colors: data.colors?.length ? data.colors : defaultColors,\n fitToScreen: data.fitToScreen !== false\n };\n\n const newDiagram = {\n id,\n name: data.name || 'Loaded Diagram',\n data: mergedData,\n createdAt: data.created || new Date().toISOString(),\n updatedAt: data.lastModified || new Date().toISOString()\n };\n\n console.log(`App: Setting all state for diagram ${id}`);\n\n // Use a single batch of state updates to minimize re-render issues\n // Update diagram data and increment key in the same render cycle\n setDiagramName(newDiagram.name);\n setCurrentDiagram(newDiagram);\n setCurrentModel(mergedData);\n setHasUnsavedChanges(false);\n\n // Update diagramData and key together\n // This ensures Isoflow gets the correct data with the new key\n setDiagramData(mergedData);\n setFossflowKey((prev) => {\n const newKey = prev + 1;\n console.log(`App: Updated fossflowKey from ${prev} to ${newKey}`);\n return newKey;\n });\n\n console.log(\n `App: Finished loading diagram ${id}, final icon count: ${finalIcons.length}`\n );\n };\n\n // i18n\n const { t, i18n } = useTranslation('app');\n \n // Get locale with fallback to en-US if not found\n const currentLocale = allLocales[i18n.language as keyof typeof allLocales] || allLocales['en-US'];\n\n // Auto-save functionality\n useEffect(() => {\n if (!currentModel || !hasUnsavedChanges || !currentDiagram) return;\n\n const autoSaveTimer = setTimeout(() => {\n // Include imported icons in auto-save\n const importedIcons = (\n currentModel?.icons ||\n diagramData.icons ||\n []\n ).filter((icon) => {\n return icon.collection === 'imported';\n });\n\n const savedData = {\n title: diagramName || currentDiagram.name,\n icons: importedIcons, // Save imported icons in auto-save\n colors: currentModel.colors || [],\n items: currentModel.items || [],\n views: currentModel.views || [],\n fitToScreen: true\n };\n\n const updatedDiagram: SavedDiagram = {\n ...currentDiagram,\n data: savedData,\n updatedAt: new Date().toISOString()\n };\n\n setDiagrams((prevDiagrams) => {\n return prevDiagrams.map((d) => {\n return d.id === currentDiagram.id ? updatedDiagram : d;\n });\n });\n\n // Update last opened data\n try {\n localStorage.setItem(\n 'fossflow-last-opened-data',\n JSON.stringify(savedData)\n );\n setLastAutoSave(new Date());\n setHasUnsavedChanges(false);\n } catch (e) {\n console.error('Auto-save failed:', e);\n if (e instanceof DOMException && e.name === 'QuotaExceededError') {\n alert(t('alert.autoSaveFailed'));\n setShowStorageManager(true);\n }\n }\n }, 5000); // Auto-save after 5 seconds of changes\n\n return () => {\n return clearTimeout(autoSaveTimer);\n };\n }, [currentModel, hasUnsavedChanges, currentDiagram, diagramName]);\n\n // Warn before closing if there are unsaved changes\n useEffect(() => {\n const handleBeforeUnload = (e: BeforeUnloadEvent) => {\n if (hasUnsavedChanges) {\n e.preventDefault();\n e.returnValue = t('alert.beforeUnload');\n return e.returnValue;\n }\n };\n\n window.addEventListener('beforeunload', handleBeforeUnload);\n return () => {\n return window.removeEventListener('beforeunload', handleBeforeUnload);\n };\n }, [hasUnsavedChanges]);\n\n // Keyboard shortcuts\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n // Ctrl+S or Cmd+S for Save\n if ((e.ctrlKey || e.metaKey) && e.key === 's') {\n e.preventDefault();\n\n // Quick save if current diagram exists and has unsaved changes\n if (currentDiagram && hasUnsavedChanges) {\n saveDiagram();\n } else {\n // Otherwise show save dialog\n setShowSaveDialog(true);\n }\n }\n\n // Ctrl+O or Cmd+O for Open/Load\n if ((e.ctrlKey || e.metaKey) && e.key === 'o') {\n e.preventDefault();\n setShowLoadDialog(true);\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n return window.removeEventListener('keydown', handleKeyDown);\n };\n }, [currentDiagram, hasUnsavedChanges]);\n\n return (\n
\n
\n {!isReadonlyUrl && (\n <>\n \n {serverStorageAvailable && (\n {\n return setShowDiagramManager(true);\n }}\n style={{ backgroundColor: '#2196F3', color: 'white' }}\n >\n 🌐 {t('nav.serverStorage')}\n \n )}\n {\n return setShowSaveDialog(true);\n }}\n >\n {t('nav.saveSessionOnly')}\n \n {\n return setShowLoadDialog(true);\n }}\n >\n {t('nav.loadSessionOnly')}\n \n {\n return setShowExportDialog(true);\n }}\n style={{ backgroundColor: '#007bff' }}\n >\n 💾 {t('nav.exportFile')}\n \n {\n if (currentDiagram && hasUnsavedChanges) {\n saveDiagram();\n }\n }}\n disabled={!currentDiagram || !hasUnsavedChanges}\n style={{\n backgroundColor:\n currentDiagram && hasUnsavedChanges ? '#ffc107' : '#6c757d',\n opacity: currentDiagram && hasUnsavedChanges ? 1 : 0.5,\n cursor:\n currentDiagram && hasUnsavedChanges\n ? 'pointer'\n : 'not-allowed'\n }}\n title=\"Save to current session only\"\n >\n {t('nav.quickSaveSession')}\n \n \n )}\n {isReadonlyUrl && (\n \n {t('dialog.readOnly.mode')}\n
\n )}\n \n \n {isReadonlyUrl ? (\n \n {t('status.current')}: {diagramName}\n \n ) : (\n <>\n {currentDiagram\n ? `${t('status.current')}: ${currentDiagram.name}`\n : diagramName || t('status.untitled')}\n {hasUnsavedChanges && (\n \n • {t('status.modified')}\n \n )}\n \n ({t('status.sessionStorageNote')})\n \n \n )}\n \n
\n\n
\n {\n iconPackManager.togglePack(packName as any, enabled);\n }\n }}\n />\n
\n\n {/* Save Dialog */}\n {showSaveDialog && (\n
\n
\n

{t('dialog.save.title')}

\n \n ⚠️ {t('dialog.save.warningTitle')}:{' '}\n {t('dialog.save.warningMessage')}\n
\n \n
\n {\n return setDiagramName(e.target.value);\n }}\n onKeyDown={(e) => {\n return e.key === 'Enter' && saveDiagram();\n }}\n autoFocus\n />\n
\n \n {\n return setShowSaveDialog(false);\n }}\n >\n {t('dialog.save.btnCancel')}\n \n
\n
\n \n )}\n\n {/* Load Dialog */}\n {showLoadDialog && (\n
\n
\n

{t('dialog.load.title')}

\n \n ⚠️ {t('dialog.load.noteTitle')}:{' '}\n {t('dialog.load.noteMessage')}\n
\n
\n {diagrams.length === 0 ? (\n

{t('dialog.load.noSavedDiagrams')}

\n ) : (\n diagrams.map((diagram) => {\n return (\n
\n
\n {diagram.name}\n
\n \n {t('dialog.load.updated')}:{' '}\n {new Date(diagram.updatedAt).toLocaleString()}\n \n
\n
\n {\n return loadDiagram(diagram, false);\n }}\n >\n {t('dialog.load.btnLoad')}\n \n {\n return deleteDiagram(diagram.id);\n }}\n >\n {t('dialog.load.btnDelete')}\n \n
\n
\n );\n })\n )}\n
\n
\n {\n return setShowLoadDialog(false);\n }}\n >\n {t('dialog.load.btnClose')}\n \n
\n
\n \n )}\n\n {/* Export Dialog */}\n {showExportDialog && (\n
\n
\n

{t('dialog.export.title')}

\n \n

\n ✅ {t('dialog.export.recommendedTitle')}:{' '}\n {t('dialog.export.recommendedMessage')}\n

\n

\n {t('dialog.export.noteMessage')}\n

\n
\n
\n \n {\n return setShowExportDialog(false);\n }}\n >\n {t('dialog.export.btnCancel')}\n \n
\n
\n \n )}\n\n {/* Storage Manager */}\n {showStorageManager && (\n {\n return setShowStorageManager(false);\n }}\n />\n )}\n\n {/* Diagram Manager */}\n {showDiagramManager && (\n {\n return setShowDiagramManager(false);\n }}\n />\n )}\n \n );\n}\n\nexport default App;\n" }, { "path": "packages/fossflow-app/src/EditorPage.tsx", "content": "import { useState, useEffect, useRef } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport { Isoflow } from 'fossflow';\nimport { flattenCollections } from '@isoflow/isopacks/dist/utils';\nimport isoflowIsopack from '@isoflow/isopacks/dist/isoflow';\nimport { useTranslation } from 'react-i18next';\nimport { DiagramData, mergeDiagramData, extractSavableData } from './diagramUtils';\nimport { StorageManager } from './StorageManager';\nimport { DiagramManager } from './components/DiagramManager';\nimport { storageManager } from './services/storageService';\nimport ChangeLanguage from './components/ChangeLanguage';\nimport { allLocales } from 'fossflow';\nimport { useIconPackManager, IconPackName } from './services/iconPackManager';\nimport './App.css';\n\n// Load core isoflow icons (always loaded)\nconst coreIcons = flattenCollections([isoflowIsopack]);\n\n\ninterface SavedDiagram {\n id: string;\n name: string;\n data: any;\n createdAt: string;\n updatedAt: string;\n}\n\nfunction EditorPage() {\n // Get readonly diagram ID from route params\n const { readonlyDiagramId } = useParams<{ readonlyDiagramId: string }>();\n const navigate = useNavigate();\n\n // Check if we're in readonly mode based on the URL\n const isReadonlyUrl = window.location.pathname.includes('/display/') && readonlyDiagramId;\n\n // Log warning if in display mode\n useEffect(() => {\n if (isReadonlyUrl) {\n console.warn('FossFLOW is running in read-only display mode. Editing is disabled.');\n console.log(`Viewing diagram: ${readonlyDiagramId}`);\n }\n }, [isReadonlyUrl, readonlyDiagramId]);\n\n // Initialize icon pack manager with core icons\n const iconPackManager = useIconPackManager(coreIcons);\n\n const [diagrams, setDiagrams] = useState([]);\n const [currentDiagram, setCurrentDiagram] = useState(null);\n const [diagramName, setDiagramName] = useState('');\n const [showSaveDialog, setShowSaveDialog] = useState(false);\n const [showLoadDialog, setShowLoadDialog] = useState(false);\n const [showExportDialog, setShowExportDialog] = useState(false);\n const [fossflowKey, setFossflowKey] = useState(0); // Key to force re-render of FossFLOW\n const [currentModel, setCurrentModel] = useState(null); // Store current model state\n const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n const [lastAutoSave, setLastAutoSave] = useState(null);\n const [showStorageManager, setShowStorageManager] = useState(false);\n const [showDiagramManager, setShowDiagramManager] = useState(false);\n const [serverStorageAvailable, setServerStorageAvailable] = useState(false);\n\n // Initialize with empty diagram data\n // Create default colors for connectors\n const defaultColors = [\n { id: 'blue', value: '#0066cc' },\n { id: 'green', value: '#00aa00' },\n { id: 'red', value: '#cc0000' },\n { id: 'orange', value: '#ff6600' },\n { id: 'purple', value: '#9900cc' },\n { id: 'grey', value: '#666666' }\n ];\n\n const emptyDiagramData: DiagramData = {\n scene: {\n iconData: [],\n nodeData: [],\n connectorData: []\n },\n nonSceneData: {\n properties: {\n scale: 1,\n scrollX: 0,\n scrollY: 0,\n showGrid: true,\n showMinimap: false,\n showSceneInspector: false\n }\n },\n model: {\n categories: [],\n model: [],\n connectorColors: defaultColors\n }\n };\n\n const [diagramData, setDiagramData] = useState(emptyDiagramData);\n const fileInputRef = useRef(null);\n const { t } = useTranslation();\n\n // Load diagram for readonly mode\n useEffect(() => {\n if (isReadonlyUrl && readonlyDiagramId) {\n // Initialize storage and load diagram\n storageManager.initialize().then(async () => {\n try {\n const storage = storageManager.getStorage();\n const diagramData = await storage.loadDiagram(readonlyDiagramId);\n\n if (diagramData) {\n const mergedData = mergeDiagramData(emptyDiagramData, diagramData);\n setDiagramData(mergedData);\n setCurrentDiagram({\n id: readonlyDiagramId,\n name: diagramData.name || 'Diagram',\n data: mergedData,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString()\n });\n setDiagramName(diagramData.name || 'Diagram');\n setFossflowKey(prevKey => prevKey + 1);\n }\n } catch (error) {\n console.error(`Failed to load diagram with ID: ${readonlyDiagramId}`, error);\n // Redirect to home if diagram not found\n navigate('/');\n }\n }).catch(error => {\n console.error('Error initializing storage:', error);\n navigate('/');\n });\n }\n }, [readonlyDiagramId, isReadonlyUrl]);\n\n // Check server storage availability\n useEffect(() => {\n storageManager.initialize().then((storage) => {\n setServerStorageAvailable(storageManager.isServerStorage());\n });\n }, []);\n\n // Load saved diagrams from localStorage on mount\n useEffect(() => {\n const saved = localStorage.getItem('fossflow_diagrams');\n if (saved) {\n try {\n const parsedDiagrams = JSON.parse(saved);\n setDiagrams(parsedDiagrams);\n } catch (error) {\n console.error('Failed to parse saved diagrams:', error);\n }\n }\n }, []);\n\n // Auto-save to localStorage every 30 seconds if there are unsaved changes\n useEffect(() => {\n const autoSaveInterval = setInterval(() => {\n if (hasUnsavedChanges && currentModel && !isReadonlyUrl) {\n const autoSaveData = {\n ...currentDiagram,\n data: currentModel,\n updatedAt: new Date().toISOString()\n };\n localStorage.setItem('fossflow_autosave', JSON.stringify(autoSaveData));\n setLastAutoSave(new Date());\n console.log('Auto-saved to localStorage');\n }\n }, 30000); // 30 seconds\n\n return () => clearInterval(autoSaveInterval);\n }, [hasUnsavedChanges, currentModel, currentDiagram, isReadonlyUrl]);\n\n // Load auto-save on mount\n useEffect(() => {\n if (!isReadonlyUrl) {\n const autoSaveData = localStorage.getItem('fossflow_autosave');\n if (autoSaveData) {\n try {\n const parsed = JSON.parse(autoSaveData);\n if (window.confirm('An auto-saved diagram was found. Would you like to restore it?')) {\n const mergedData = mergeDiagramData(diagramData, parsed.data);\n setDiagramData(mergedData);\n setCurrentModel(mergedData);\n setDiagramName(parsed.name || '');\n setCurrentDiagram(parsed);\n setFossflowKey(prevKey => prevKey + 1);\n localStorage.removeItem('fossflow_autosave'); // Clear auto-save after restoring\n }\n } catch (error) {\n console.error('Failed to parse auto-save data:', error);\n }\n }\n }\n }, []);\n\n // Warn before leaving if there are unsaved changes\n useEffect(() => {\n const handleBeforeUnload = (e: BeforeUnloadEvent) => {\n if (hasUnsavedChanges && !isReadonlyUrl) {\n e.preventDefault();\n e.returnValue = '';\n }\n };\n\n window.addEventListener('beforeunload', handleBeforeUnload);\n return () => window.removeEventListener('beforeunload', handleBeforeUnload);\n }, [hasUnsavedChanges, isReadonlyUrl]);\n\n const handleModelUpdated = (model: any) => {\n const updatedData = {\n ...diagramData,\n ...model\n };\n setCurrentModel(updatedData);\n\n // Only mark as having unsaved changes if not in readonly mode\n if (!isReadonlyUrl) {\n setHasUnsavedChanges(true);\n }\n };\n\n const saveDiagram = () => {\n if (!diagramName.trim()) {\n alert('Please enter a name for the diagram');\n return;\n }\n\n const diagramToSave = currentModel || diagramData;\n const savableData = extractSavableData(diagramToSave);\n\n const newDiagram: SavedDiagram = currentDiagram ? {\n ...currentDiagram,\n name: diagramName,\n data: savableData,\n updatedAt: new Date().toISOString()\n } : {\n id: Date.now().toString(),\n name: diagramName,\n data: savableData,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString()\n };\n\n const updatedDiagrams = currentDiagram\n ? diagrams.map(d => d.id === currentDiagram.id ? newDiagram : d)\n : [...diagrams, newDiagram];\n\n setDiagrams(updatedDiagrams);\n localStorage.setItem('fossflow_diagrams', JSON.stringify(updatedDiagrams));\n setCurrentDiagram(newDiagram);\n setShowSaveDialog(false);\n setHasUnsavedChanges(false);\n // Clear auto-save after successful save\n localStorage.removeItem('fossflow_autosave');\n };\n\n const loadDiagram = (diagram: SavedDiagram) => {\n const mergedData = mergeDiagramData(diagramData, diagram.data);\n setDiagramData(mergedData);\n setCurrentModel(mergedData);\n setCurrentDiagram(diagram);\n setDiagramName(diagram.name);\n setShowLoadDialog(false);\n setHasUnsavedChanges(false);\n setFossflowKey(prevKey => prevKey + 1); // Force re-render FossFLOW\n };\n\n const deleteDiagram = (id: string) => {\n if (window.confirm('Are you sure you want to delete this diagram?')) {\n const updatedDiagrams = diagrams.filter(d => d.id !== id);\n setDiagrams(updatedDiagrams);\n localStorage.setItem('fossflow_diagrams', JSON.stringify(updatedDiagrams));\n\n if (currentDiagram?.id === id) {\n setCurrentDiagram(null);\n setDiagramName('');\n }\n }\n };\n\n const exportDiagram = () => {\n const diagramToExport = currentModel || diagramData;\n const savableData = extractSavableData(diagramToExport);\n\n const exportData = {\n name: diagramName || 'fossflow-diagram',\n version: '1.0',\n exportDate: new Date().toISOString(),\n data: savableData\n };\n\n const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `${diagramName || 'fossflow-diagram'}-${new Date().toISOString().split('T')[0]}.json`;\n document.body.appendChild(a);\n a.click();\n\n // Safely remove the temporary element\n try {\n if (a.parentNode === document.body) {\n document.body.removeChild(a);\n }\n } catch (err) {\n console.warn('Failed to remove temporary download link:', err);\n }\n\n URL.revokeObjectURL(url);\n setShowExportDialog(false);\n };\n\n const importDiagram = (event: React.ChangeEvent) => {\n const file = event.target.files?.[0];\n if (!file) return;\n\n const reader = new FileReader();\n reader.onload = (e) => {\n try {\n const content = e.target?.result as string;\n const parsed = JSON.parse(content);\n\n // Merge the imported data with default data structure\n const mergedData = mergeDiagramData(diagramData, parsed.data || parsed);\n\n setDiagramData(mergedData);\n setCurrentModel(mergedData);\n setDiagramName(parsed.name || '');\n setHasUnsavedChanges(true);\n setFossflowKey(prevKey => prevKey + 1); // Force re-render FossFLOW\n\n // Reset the file input\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n } catch (error) {\n console.error('Failed to import diagram:', error);\n alert('Failed to import diagram. Please check the file format.');\n }\n };\n reader.readAsText(file);\n };\n\n const createNewDiagram = () => {\n if (hasUnsavedChanges && !window.confirm('You have unsaved changes. Do you want to continue?')) {\n return;\n }\n\n setDiagramData(emptyDiagramData);\n setCurrentModel(emptyDiagramData);\n setCurrentDiagram(null);\n setDiagramName('');\n setHasUnsavedChanges(false);\n setFossflowKey(prevKey => prevKey + 1); // Force re-render FossFLOW\n // Clear auto-save when creating new diagram\n localStorage.removeItem('fossflow_autosave');\n };\n\n const handleDiagramManagerLoad = async (diagram: any) => {\n const mergedData = mergeDiagramData(diagramData, diagram.data);\n setDiagramData(mergedData);\n setCurrentModel(mergedData);\n setCurrentDiagram({\n id: diagram.id,\n name: diagram.name,\n data: mergedData,\n createdAt: diagram.createdAt,\n updatedAt: diagram.updatedAt\n });\n setDiagramName(diagram.name);\n setHasUnsavedChanges(false);\n setFossflowKey(prevKey => prevKey + 1);\n setShowDiagramManager(false);\n };\n\n return (\n
\n
\n {!isReadonlyUrl ? (\n <>\n \n \n \n \n \n \n\n {serverStorageAvailable && (\n <>\n
\n \n \n \n )}\n\n
\n\n \n {currentDiagram ? `${t('toolbar.current')}: ${diagramName}` : t('toolbar.untitled')}\n {hasUnsavedChanges && ' *'}\n \n\n {lastAutoSave && (\n \n {t('toolbar.autoSaved')}: {lastAutoSave.toLocaleTimeString()}\n \n )}\n \n ) : (\n
\n 👁️ {t('dialog.readOnly.mode')} - {diagramName || readonlyDiagramId}\n
\n )}\n\n
\n \n
\n
\n\n
\n {\n iconPackManager.togglePack(packName as any, enabled);\n }\n }}\n />\n
\n\n {/* Save Dialog */}\n {showSaveDialog && (\n
\n
\n

{t('dialog.save.title')}

\n
\n ⚠️ {t('dialog.save.warningTitle')}: {t('dialog.save.warningMessage')}\n
\n \n
\n setDiagramName(e.target.value)}\n onKeyDown={(e) => e.key === 'Enter' && saveDiagram()}\n autoFocus\n />\n
\n \n \n
\n
\n
\n )}\n\n {/* Load Dialog */}\n {showLoadDialog && (\n
\n
\n

{t('dialog.load.title')}

\n
\n ⚠️ {t('dialog.load.noteTitle')}: {t('dialog.load.noteMessage')}\n
\n
\n {diagrams.length === 0 ? (\n

{t('dialog.load.noSavedDiagrams')}

\n ) : (\n diagrams.map(diagram => (\n
\n
\n {diagram.name}\n
\n {t('dialog.load.updated')}: {new Date(diagram.updatedAt).toLocaleString()}\n
\n
\n \n \n
\n
\n ))\n )}\n
\n
\n \n
\n
\n
\n )}\n\n\n {/* Export Dialog */}\n {showExportDialog && (\n
\n
\n

{t('dialog.export.title')}

\n
\n

\n ✅ {t('dialog.export.recommendedTitle')}: {t('dialog.export.recommendedMessage')}\n

\n

\n {t('dialog.export.noteMessage')}\n

\n
\n
\n \n \n
\n
\n
\n )}\n\n {/* Storage Manager */}\n {showStorageManager && (\n setShowStorageManager(false)} />\n )}\n\n {/* Diagram Manager */}\n {showDiagramManager && (\n setShowDiagramManager(false)}\n />\n )}\n
\n );\n}\n\nexport default EditorPage;" }, { "path": "packages/fossflow-app/src/StorageManager.tsx", "content": "import React, { useState, useEffect } from 'react';\n\ninterface StorageInfo {\n used: number;\n diagrams: number;\n otherData: number;\n}\n\nexport const StorageManager: React.FC<{ onClose: () => void }> = ({ onClose }) => {\n const [storageInfo, setStorageInfo] = useState({\n used: 0,\n diagrams: 0,\n otherData: 0\n });\n\n useEffect(() => {\n calculateStorage();\n }, []);\n\n const calculateStorage = () => {\n let totalSize = 0;\n let diagramsSize = 0;\n let otherSize = 0;\n\n for (const key in localStorage) {\n const value = localStorage.getItem(key);\n if (value) {\n const size = new Blob([value]).size;\n totalSize += size;\n \n if (key.startsWith('fossflow-')) {\n diagramsSize += size;\n } else {\n otherSize += size;\n }\n }\n }\n\n setStorageInfo({\n used: totalSize,\n diagrams: diagramsSize,\n otherData: otherSize\n });\n };\n\n const formatBytes = (bytes: number) => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n\n const clearOldDiagrams = () => {\n if (window.confirm('This will remove all saved diagrams. Are you sure?')) {\n const keysToRemove = [];\n for (const key in localStorage) {\n if (key.startsWith('fossflow-')) {\n keysToRemove.push(key);\n }\n }\n keysToRemove.forEach(key => localStorage.removeItem(key));\n calculateStorage();\n alert('All diagrams cleared. Please reload the page.');\n window.location.reload();\n }\n };\n\n const exportAllDiagrams = () => {\n const diagrams = localStorage.getItem('fossflow-diagrams');\n if (diagrams) {\n const blob = new Blob([diagrams], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `fossflow-backup-${Date.now()}.json`;\n a.click();\n URL.revokeObjectURL(url);\n }\n };\n\n const storagePercentage = (storageInfo.used / (5 * 1024 * 1024)) * 100; // Assume 5MB limit\n\n return (\n
\n
\n

Storage Manager

\n \n
\n

Storage Usage

\n
\n
80 ? '#f44336' : storagePercentage > 60 ? '#ff9800' : '#4caf50',\n height: '100%',\n width: `${Math.min(storagePercentage, 100)}%`,\n transition: 'width 0.3s'\n }} />\n
\n

Used: {formatBytes(storageInfo.used)} / ~5 MB ({storagePercentage.toFixed(1)}%)

\n
    \n
  • FossFLOW diagrams: {formatBytes(storageInfo.diagrams)}
    • \n
  • Other data: {formatBytes(storageInfo.otherData)}
    • \n
\n
\n\n
\n

Actions

\n \n \n
\n\n
\n Tips to save space:\n
    \n
  • Export diagrams you don't need immediately
    • \n
  • Delete old versions of diagrams
    • \n
  • Clear browser cache if needed
    • \n
\n
\n\n \n
\n
\n );\n};" }, { "path": "packages/fossflow-app/src/components/ChangeLanguage/index.tsx", "content": "import { useState, useRef, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport './styles.css';\nimport { supportedLanguages } from '../../i18n';\n\nconst ChangeLanguage = () => {\n const { i18n } = useTranslation();\n const [isOpen, setIsOpen] = useState(false);\n const [currentLang, setCurrentLang] = useState(i18n.language || 'en-US');\n const dropdownRef = useRef(null);\n\n const changeLanguage = (lang: string) => {\n i18n.changeLanguage(lang);\n setCurrentLang(lang);\n setIsOpen(false);\n localStorage.setItem('i18nextLng', lang);\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n return (\n
\n setIsOpen(true)}\n >\n A/文\n
\n {isOpen && (\n
\n {supportedLanguages.map(item => (\n changeLanguage(item.value)}\n >\n {item.label}\n
\n ))\n }\n
\n )}\n
\n );\n};\n\nexport default ChangeLanguage;\n" }, { "path": "packages/fossflow-app/src/components/ChangeLanguage/styles.css", "content": ".language-selector {\n position: relative;\n display: inline-block;\n font-size: 14px;\n cursor: pointer;\n}\n\n.language-display {\n padding: 8px 12px;\n border-radius: 4px;\n background-color: #f5f5f5;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 60px;\n text-align: center;\n}\n\n.language-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n background-color: white;\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n min-width: 120px;\n z-index: 1000;\n margin-top: 4px;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.language-option {\n padding: 8px 12px;\n transition: background-color 0.2s;\n text-align: center;\n}\n\n.language-option:hover {\n background-color: #f0f0f0;\n}\n\n.language-option.active {\n background-color: #e6f7ff;\n color: #1890ff;\n}\n" }, { "path": "packages/fossflow-app/src/components/DiagramManager.css", "content": ".diagram-manager-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n}\n\n.diagram-manager {\n background: white;\n border-radius: 8px;\n width: 90%;\n max-width: 800px;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n}\n\n.diagram-manager-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.diagram-manager-header h2 {\n margin: 0;\n font-size: 24px;\n}\n\n.close-button {\n background: none;\n border: none;\n font-size: 28px;\n cursor: pointer;\n color: #666;\n padding: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.close-button:hover {\n color: #000;\n}\n\n.storage-info {\n padding: 15px 20px;\n background: #f5f5f5;\n border-bottom: 1px solid #e0e0e0;\n display: flex;\n align-items: center;\n gap: 15px;\n}\n\n.storage-badge {\n padding: 5px 12px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 500;\n}\n\n.storage-badge.server {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.storage-badge.local {\n background: #fff3e0;\n color: #f57c00;\n}\n\n.storage-note {\n font-size: 14px;\n color: #666;\n}\n\n.error-message {\n background: #ffebee;\n color: #c62828;\n padding: 10px 20px;\n border-left: 4px solid #c62828;\n}\n\n.diagram-manager-actions {\n padding: 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.action-button {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n font-size: 14px;\n cursor: pointer;\n background: #f5f5f5;\n color: #333;\n transition: background 0.2s;\n}\n\n.action-button:hover {\n background: #e0e0e0;\n}\n\n.action-button.primary {\n background: #4caf50;\n color: white;\n}\n\n.action-button.primary:hover {\n background: #45a049;\n}\n\n.action-button.danger {\n background: #f44336;\n color: white;\n}\n\n.action-button.danger:hover {\n background: #da190b;\n}\n\n.action-button.share {\n background: #2196f3;\n color: white;\n}\n\n.action-button.share:hover {\n background: #0b7dda;\n}\n\n.loading {\n padding: 40px;\n text-align: center;\n color: #666;\n}\n\n.diagram-list {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n.empty-state {\n text-align: center;\n padding: 40px;\n color: #666;\n}\n\n.empty-state .hint {\n font-size: 14px;\n color: #999;\n margin-top: 10px;\n}\n\n.diagram-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n margin-bottom: 10px;\n transition: background 0.2s;\n}\n\n.diagram-item:hover {\n background: #f5f5f5;\n}\n\n.diagram-info h3 {\n margin: 0 0 5px 0;\n font-size: 16px;\n}\n\n.diagram-meta {\n font-size: 13px;\n color: #666;\n}\n\n.diagram-actions {\n display: flex;\n gap: 10px;\n}\n\n.diagram-actions .action-button {\n padding: 6px 12px;\n font-size: 13px;\n}\n\n.save-dialog {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\n min-width: 300px;\n}\n\n.save-dialog h3 {\n margin: 0 0 15px 0;\n}\n\n.save-dialog input {\n width: 100%;\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 4px;\n margin-bottom: 15px;\n font-size: 14px;\n}\n\n.dialog-buttons {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n.dialog-buttons button {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n}\n\n.dialog-buttons button:first-child {\n background: #4caf50;\n color: white;\n}\n\n.dialog-buttons button:last-child {\n background: #f5f5f5;\n}" }, { "path": "packages/fossflow-app/src/components/DiagramManager.tsx", "content": "import React, { useState, useEffect } from 'react';\nimport { storageManager, DiagramInfo } from '../services/storageService';\nimport './DiagramManager.css';\n\ninterface Props {\n onLoadDiagram: (id: string, data: any) => void;\n currentDiagramId?: string;\n currentDiagramData?: any;\n onClose: () => void;\n}\n\nexport const DiagramManager: React.FC = ({\n onLoadDiagram,\n currentDiagramId,\n currentDiagramData,\n onClose\n}) => {\n const [diagrams, setDiagrams] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [isServerStorage, setIsServerStorage] = useState(false);\n const [saveName, setSaveName] = useState('');\n const [showSaveDialog, setShowSaveDialog] = useState(false);\n\n useEffect(() => {\n loadDiagrams();\n }, []);\n\n const loadDiagrams = async () => {\n try {\n setLoading(true);\n setError(null);\n\n console.log('DiagramManager: Initializing storage...');\n // Initialize storage if not already done\n await storageManager.initialize();\n const isServer = storageManager.isServerStorage();\n setIsServerStorage(isServer);\n console.log(\n `DiagramManager: Using ${isServer ? 'server' : 'session'} storage`\n );\n\n // Load diagram list\n const storage = storageManager.getStorage();\n console.log('DiagramManager: Loading diagram list...');\n const list = await storage.listDiagrams();\n console.log(`DiagramManager: Loaded ${list.length} diagrams`);\n setDiagrams(list);\n } catch (err) {\n const errorMsg =\n err instanceof Error ? err.message : 'Failed to load diagrams';\n console.error('DiagramManager error:', err);\n setError(errorMsg);\n } finally {\n setLoading(false);\n }\n };\n\n const handleLoad = async (id: string) => {\n try {\n setLoading(true);\n setError(null);\n console.log(`DiagramManager: Loading diagram ${id}...`);\n\n const storage = storageManager.getStorage();\n const data = await storage.loadDiagram(id);\n\n console.log(`DiagramManager: Successfully loaded diagram ${id}`);\n onLoadDiagram(id, data);\n\n // Small delay to ensure parent component finishes state updates\n await new Promise((resolve) => {\n return setTimeout(resolve, 100);\n });\n\n onClose();\n } catch (err) {\n console.error(`DiagramManager: Failed to load diagram ${id}:`, err);\n setError(err instanceof Error ? err.message : 'Failed to load diagram');\n } finally {\n setLoading(false);\n }\n };\n\n const handleDelete = async (id: string) => {\n if (!window.confirm('Are you sure you want to delete this diagram?')) {\n return;\n }\n\n try {\n const storage = storageManager.getStorage();\n await storage.deleteDiagram(id);\n await loadDiagrams(); // Refresh list\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to delete diagram');\n }\n };\n\n const handleCopyShareLink = (id: string) => {\n const shareUrl = `${window.location.origin}/display/${id}`;\n navigator.clipboard\n .writeText(shareUrl)\n .then(() => {\n alert(`Share link copied to clipboard:\\n${shareUrl}`);\n })\n .catch(() => {\n const textArea = document.createElement('textarea');\n textArea.value = shareUrl;\n document.body.appendChild(textArea);\n textArea.select();\n document.execCommand('copy');\n\n // Safely remove the temporary element\n try {\n if (textArea.parentNode === document.body) {\n document.body.removeChild(textArea);\n }\n } catch (err) {\n console.warn('Failed to remove temporary textarea:', err);\n }\n\n alert(`Share link copied to clipboard:\\n${shareUrl}`);\n });\n };\n\n const handleSave = async () => {\n if (!saveName.trim()) {\n setError('Please enter a diagram name');\n return;\n }\n\n try {\n const storage = storageManager.getStorage();\n\n // Check if a diagram with this name already exists (excluding current diagram)\n const existingDiagram = diagrams.find((d) => {\n return d.name === saveName.trim() && d.id !== currentDiagramId;\n });\n\n if (existingDiagram) {\n const confirmOverwrite = window.confirm(\n `A diagram named \"${saveName}\" already exists. This will overwrite it. Are you sure you want to continue?`\n );\n if (!confirmOverwrite) {\n return;\n }\n\n // Delete the existing diagram first\n await storage.deleteDiagram(existingDiagram.id);\n }\n\n /**\n * Icon Persistence: Save ALL icons (default + imported)\n *\n * currentDiagramData comes from parent's currentModel/diagramData which includes:\n * - All default icon collections (isoflow, aws, gcp, azure, kubernetes)\n * - All imported custom icons (collection='imported')\n *\n * This ensures when loading, we have the complete icon set and don't lose\n * any custom imported icons.\n */\n const dataToSave = {\n ...currentDiagramData,\n name: saveName\n };\n\n console.log(\n `DiagramManager: Saving diagram with ${dataToSave.icons?.length || 0} icons`\n );\n const importedCount = (dataToSave.icons || []).filter((icon: any) => {\n return icon.collection === 'imported';\n }).length;\n console.log(`DiagramManager: Including ${importedCount} imported icons`);\n\n if (currentDiagramId) {\n // Update existing\n await storage.saveDiagram(currentDiagramId, dataToSave);\n } else {\n // Create new\n await storage.createDiagram(dataToSave);\n }\n\n setShowSaveDialog(false);\n setSaveName('');\n await loadDiagrams(); // Refresh list\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to save diagram');\n }\n };\n\n return (\n
\n
\n
\n

Diagram Manager

\n \n
\n\n
\n \n {isServerStorage ? '🌐 Server Storage' : '💾 Local Storage'}\n \n {isServerStorage && (\n \n Diagrams are saved on the server and available across all devices\n \n )}\n
\n\n {error &&
{error}
}\n\n
\n {\n setSaveName(currentDiagramData?.name || 'Untitled Diagram');\n setShowSaveDialog(true);\n }}\n >\n 💾 Save Current Diagram\n \n
\n\n {loading ? (\n
Loading diagrams...
\n ) : (\n
\n {diagrams.length === 0 ? (\n
\n

No saved diagrams

\n

Save your current diagram to get started

\n
\n ) : (\n diagrams.map((diagram) => {\n return (\n
\n
\n

{diagram.name}

\n \n Last modified: {diagram.lastModified.toLocaleString()}\n {diagram.size &&\n ` • ${(diagram.size / 1024).toFixed(1)} KB`}\n \n
\n
\n {\n return handleLoad(diagram.id);\n }}\n disabled={loading}\n >\n {loading ? 'Loading...' : 'Load'}\n \n {\n return handleCopyShareLink(diagram.id);\n }}\n title=\"Copy shareable link\"\n >\n Share\n \n {\n return handleDelete(diagram.id);\n }}\n disabled={loading}\n >\n Delete\n \n
\n
\n );\n })\n )}\n
\n )}\n\n {/* Save Dialog */}\n {showSaveDialog && (\n
\n

Save Diagram

\n {\n return setSaveName(e.target.value);\n }}\n onKeyDown={(e) => {\n return e.key === 'Enter' && handleSave();\n }}\n autoFocus\n />\n
\n \n {\n return setShowSaveDialog(false);\n }}\n >\n Cancel\n \n
\n
\n )}\n
\n
\n );\n};\n" }, { "path": "packages/fossflow-app/src/components/ErrorBoundary.css", "content": ".error-page-container {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgba(0, 0, 0, 0.5);\n}\n\n.error-container {\n min-height: 300px;\n width: 400px;\n background-color: white;\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n border: 1px solid #ddd;\n}\n\n.error-header {\n margin-bottom: 20px;\n text-align: center;\n}\n\n.error-header p {\n margin: 0;\n font-size: 24px;\n font-weight: 600;\n color: #333;\n}\n\n.error-content {\n margin-bottom: 30px;\n padding: 15px;\n background-color: #fff3cd;\n border: 1px solid #ffeeba;\n border-radius: 4px;\n}\n\n.error-content p {\n margin: 0;\n font-size: 14px;\n color: #856404;\n word-break: break-word;\n line-height: 1.4;\n}\n\n.error-footer {\n display: flex;\n gap: 10px;\n justify-content: center;\n}\n\n.error-button {\n display: inline-block;\n text-decoration: none;\n font-size: 14px;\n cursor: pointer;\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n background-color: #007bff;\n color: white;\n transition: background-color 0.2s ease;\n}\n\n.error-button:hover {\n background-color: #0056b3;\n}\n\n.error-button.refresh-button {\n background-color: #28a745;\n}\n\n.error-button.refresh-button:hover {\n background-color: #218838;\n}" }, { "path": "packages/fossflow-app/src/components/ErrorBoundary.tsx", "content": "import './ErrorBoundary.css';\n\ninterface ErrorBoundaryFallbackUIProps {\n error: Error;\n}\n\nexport default function ErrorBoundaryFallbackUI({\n error\n}: ErrorBoundaryFallbackUIProps) {\n const onRefreshButtonPressed = () => {\n window.location.reload();\n };\n\n const onReportButtonPressed = () => {\n const errorDetails = {\n message: error.message,\n stack: error.stack,\n userAgent: navigator.userAgent,\n url: window.location.href,\n timestamp: new Date().toISOString()\n };\n\n const githubUrl = new URL(\n 'https://github.com/stan-smith/FossFLOW/issues/new'\n );\n githubUrl.searchParams.set('title', `Error: ${error.message}`);\n githubUrl.searchParams.set(\n 'body',\n `## Error Details\\n\\n\\`\\`\\`\\n${JSON.stringify(errorDetails, null, 2)}\\n\\`\\`\\`\\n\\n## Steps to Reproduce\\n1. \\n2. \\n3. \\n\\n## Expected Behavior\\n\\n## Actual Behavior\\n\\n## Environment\\n- Browser: ${navigator.userAgent}\\n- URL: ${window.location.href}\\n- Timestamp: ${new Date().toISOString()}`\n );\n\n window.open(githubUrl.toString(), '_blank');\n };\n\n return (\n
\n
\n
\n

⚠️ Something went wrong!

\n
\n
\n

\n Error: {error.message}\n

\n {error.stack && (\n
\n \n Show technical details\n \n \n {error.stack}\n \n
\n )}\n
\n\n \n

\n 📋 Before reporting this error:\n

\n
    \n
  • \n Check if this error has already been reported{' '}\n \n here👀\n \n
    • \n
  • Try refreshing the page first
    • \n
  • Only report if this is a new, unreported issue
    • \n
\n

\n Note: If you can't find a similar issue, please\n report it with the details below.\n

\n
\n\n
\n \n \n 🔄 Refresh Page\n \n
\n
\n
\n );\n}\n" }, { "path": "packages/fossflow-app/src/diagramUtils.ts", "content": "// Utility functions for handling diagram data\n\nexport interface DiagramData {\n title: string;\n version?: string;\n description?: string;\n icons: any[];\n colors: any[];\n items: any[];\n views: any[];\n fitToScreen?: boolean;\n}\n\n// Deep merge two objects, with special handling for arrays\nexport function mergeDiagramData(base: DiagramData, update: Partial): DiagramData {\n return {\n title: update.title !== undefined ? update.title : base.title,\n version: update.version !== undefined ? update.version : base.version,\n description: update.description !== undefined ? update.description : base.description,\n // For arrays, completely replace if provided, otherwise keep base\n icons: update.icons !== undefined ? update.icons : base.icons,\n colors: update.colors !== undefined ? update.colors : base.colors,\n items: update.items !== undefined ? update.items : base.items,\n views: update.views !== undefined ? update.views : base.views,\n fitToScreen: update.fitToScreen !== undefined ? update.fitToScreen : base.fitToScreen\n };\n}\n\n// Extract only the data that should be saved/exported\nexport function extractSavableData(fullData: DiagramData): DiagramData {\n return {\n title: fullData.title,\n version: fullData.version,\n description: fullData.description,\n // Only include non-empty arrays\n icons: fullData.icons || [],\n colors: fullData.colors || [],\n items: fullData.items || [],\n views: fullData.views || [],\n fitToScreen: fullData.fitToScreen !== false\n };\n}\n\n// Validate diagram data structure\nexport function validateDiagramData(data: any): data is DiagramData {\n return (\n typeof data === 'object' &&\n data !== null &&\n Array.isArray(data.icons) &&\n Array.isArray(data.colors) &&\n Array.isArray(data.items) &&\n Array.isArray(data.views)\n );\n}" }, { "path": "packages/fossflow-app/src/env.d.ts", "content": "/// \n" }, { "path": "packages/fossflow-app/src/i18n/bn-BD.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"নতুন ডায়াগ্রাম\",\n \"saveSessionOnly\": \"সংরক্ষণ করুন (শুধুমাত্র সেশন)\",\n \"loadSessionOnly\": \"লোড করুন (শুধুমাত্র সেশন)\",\n \"importFile\": \"ফাইল আমদানি করুন\",\n \"exportFile\": \"ফাইল রপ্তানি করুন\",\n \"quickSaveSession\": \"দ্রুত সংরক্ষণ (সেশন)\",\n \"serverStorage\": \"সার্ভার স্টোরেজ\"\n },\n \"status\": {\n \"current\": \"বর্তমান\",\n \"untitled\": \"শিরোনামহীন ডায়াগ্রাম\",\n \"modified\": \"পরিবর্তিত\",\n \"sessionStorageNote\": \"শুধুমাত্র সেশন স্টোরেজ - স্থায়ীভাবে সংরক্ষণ করতে রপ্তানি করুন\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"ডায়াগ্রাম সংরক্ষণ করুন (শুধুমাত্র বর্তমান সেশন)\",\n \"warningTitle\": \"গুরুত্বপূর্ণ\",\n \"warningMessage\": \"এই সংরক্ষণটি অস্থায়ী এবং ব্রাউজার বন্ধ করলে হারিয়ে যাবে।\",\n \"warningExport\": \"আপনার কাজ স্থায়ীভাবে সংরক্ষণ করতে ফাইল রপ্তানি করুন ব্যবহার করুন।\",\n \"placeholder\": \"ডায়াগ্রামের নাম লিখুন\",\n \"btnSave\": \"সংরক্ষণ করুন\",\n \"btnCancel\": \"বাতিল করুন\"\n },\n \"load\": {\n \"title\": \"ডায়াগ্রাম লোড করুন (শুধুমাত্র বর্তমান সেশন)\",\n \"noteTitle\": \"নোট\",\n \"noteMessage\": \"এই সংরক্ষণগুলি অস্থায়ী। আপনার ডায়াগ্রামগুলি স্থায়ীভাবে রাখতে রপ্তানি করুন।\",\n \"noSavedDiagrams\": \"এই সেশনে কোনো সংরক্ষিত ডায়াগ্রাম পাওয়া যায়নি\",\n \"updated\": \"আপডেট করা হয়েছে\",\n \"btnLoad\": \"লোড করুন\",\n \"btnDelete\": \"মুছুন\",\n \"btnClose\": \"বন্ধ করুন\"\n },\n \"export\": {\n \"title\": \"ডায়াগ্রাম রপ্তানি করুন\",\n \"recommendedTitle\": \"প্রস্তাবিত\",\n \"recommendedMessage\": \"এটি আপনার কাজ স্থায়ীভাবে সংরক্ষণ করার সেরা উপায়।\",\n \"noteMessage\": \"রপ্তানি করা JSON ফাইলগুলি পরে আমদানি করা যেতে পারে বা অন্যদের সাথে শেয়ার করা যেতে পারে।\",\n \"btnDownload\": \"JSON ডাউনলোড করুন\",\n \"btnCancel\": \"বাতিল করুন\"\n },\n \"readOnly\": {\n \"mode\": \"শুধুমাত্র দেখার মোড\",\n \"failed\": \"ডায়াগ্রাম লোড করতে ব্যর্থ\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"অনুগ্রহ করে ডায়াগ্রামের জন্য একটি নাম লিখুন\",\n \"diagramExists\": \"এই সেশনে \\\"{{name}}\\\" নামের একটি ডায়াগ্রাম ইতিমধ্যে বিদ্যমান। এটি এটি ওভাররাইট করবে। আপনি কি নিশ্চিত যে আপনি চালিয়ে যেতে চান?\",\n \"unsavedChanges\": \"আপনার অসংরক্ষিত পরিবর্তন আছে। লোড করা চালিয়ে যেতে চান?\",\n \"createNewDiagram\": \"একটি নতুন ডায়াগ্রাম তৈরি করবেন?\",\n \"unsavedChangesExport\": \"আপনার অসংরক্ষিত পরিবর্তন আছে। এটি সংরক্ষণ করতে প্রথমে আপনার ডায়াগ্রাম রপ্তানি করুন। চালিয়ে যেতে চান?\",\n \"confirmDelete\": \"আপনি কি নিশ্চিত যে আপনি এই ডায়াগ্রামটি মুছতে চান?\",\n \"storageFull\": \"স্টোরেজ পূর্ণ! স্টোরেজ ম্যানেজার খোলা হচ্ছে...\",\n \"autoSaveFailed\": \"স্টোরেজ পূর্ণ! অনুগ্রহ করে স্থান খালি করতে স্টোরেজ ম্যানেজার ব্যবহার করুন।\",\n \"beforeUnload\": \"আপনার অসংরক্ষিত পরিবর্তন আছে। আপনি কি নিশ্চিত যে আপনি ছেড়ে যেতে চান?\",\n \"quotaExceeded\": \"স্টোরেজ কোটা অতিক্রম করেছে। অনুগ্রহ করে গুরুত্বপূর্ণ ডায়াগ্রামগুলি রপ্তানি করুন এবং কিছু স্থান খালি করুন।\"\n }\n}\n" }, { "path": "packages/fossflow-app/src/i18n/en-US.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"New Diagram\",\n \"saveSessionOnly\": \"Save (Session Only)\",\n \"loadSessionOnly\": \"Load (Session Only)\",\n \"importFile\": \"Import File\",\n \"exportFile\": \"Export File\",\n \"quickSaveSession\": \"Quick Save (Session)\",\n \"serverStorage\": \"Server Storage\"\n },\n \"status\": {\n \"current\": \"Current\",\n \"untitled\": \"Untitled Diagram\",\n \"modified\": \"Modified\",\n \"sessionStorageNote\": \"Session storage only - export to save permanently\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Save Diagram (Current Session Only)\",\n \"warningTitle\": \"Important\",\n \"warningMessage\": \"This save is temporary and will be lost when you close the browser.\",\n \"warningExport\": \"Use Export File to permanently save your work.\",\n \"placeholder\": \"Enter diagram name\",\n \"btnSave\": \"Save\",\n \"btnCancel\": \"Cancel\"\n },\n \"load\": {\n \"title\": \"Load Diagram (Current Session Only)\",\n \"noteTitle\": \"Note\",\n \"noteMessage\": \"These saves are temporary. Export your diagrams to keep them permanently.\",\n \"noSavedDiagrams\": \"No saved diagrams found in this session\",\n \"updated\": \"Updated\",\n \"btnLoad\": \"Load\",\n \"btnDelete\": \"Delete\",\n \"btnClose\": \"Close\"\n },\n \"export\": {\n \"title\": \"Export Diagram\",\n \"recommendedTitle\": \"Recommended\",\n \"recommendedMessage\": \"This is the best way to save your work permanently.\",\n \"noteMessage\": \"Exported JSON files can be imported later or shared with others.\",\n \"btnDownload\": \"Download JSON\",\n \"btnCancel\": \"Cancel\"\n },\n \"readOnly\": {\n \"mode\": \"View-Only Mode\",\n \"failed\": \"Failed to load diagram\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Please enter a diagram name\",\n \"diagramExists\": \"A diagram named \\\"{{name}}\\\" already exists in this session. This will overwrite it. Are you sure you want to continue?\",\n \"unsavedChanges\": \"You have unsaved changes. Continue loading?\",\n \"createNewDiagram\": \"Create a new diagram?\",\n \"unsavedChangesExport\": \"You have unsaved changes. Export your diagram first to save it. Continue?\",\n \"confirmDelete\": \"Are you sure you want to delete this diagram?\",\n \"storageFull\": \"Storage full! Opening Storage Manager...\",\n \"autoSaveFailed\": \"Storage full! Please use Storage Manager to free up space.\",\n \"beforeUnload\": \"You have unsaved changes. Are you sure you want to leave?\",\n \"quotaExceeded\": \"Storage quota exceeded. Please export important diagrams and clear some space.\"\n }\n}" }, { "path": "packages/fossflow-app/src/i18n/es-ES.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Nuevo diagrama\",\n \"saveSessionOnly\": \"Guardar (Solo sesión)\",\n \"loadSessionOnly\": \"Cargar (Solo sesión)\",\n \"importFile\": \"Importar archivo\",\n \"exportFile\": \"Exportar archivo\",\n \"quickSaveSession\": \"Guardado rápido (Sesión)\",\n \"serverStorage\": \"Almacenamiento en servidor\"\n },\n \"status\": {\n \"current\": \"Actual\",\n \"untitled\": \"Diagrama sin título\",\n \"modified\": \"Modificado\",\n \"sessionStorageNote\": \"Solo almacenamiento de sesión - exporta para guardar permanentemente\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Guardar diagrama (Solo sesión actual)\",\n \"warningTitle\": \"Importante\",\n \"warningMessage\": \"Este guardado es temporal y se perderá al cerrar el navegador.\",\n \"warningExport\": \"Usa Exportar archivo para guardar tu trabajo de forma permanente.\",\n \"placeholder\": \"Ingresa el nombre del diagrama\",\n \"btnSave\": \"Guardar\",\n \"btnCancel\": \"Cancelar\"\n },\n \"load\": {\n \"title\": \"Cargar diagrama (Solo sesión actual)\",\n \"noteTitle\": \"Nota\",\n \"noteMessage\": \"Estos guardados son temporales. Exporta tus diagramas para conservarlos de forma permanente.\",\n \"noSavedDiagrams\": \"No se encontraron diagramas guardados en esta sesión\",\n \"updated\": \"Actualizado\",\n \"btnLoad\": \"Cargar\",\n \"btnDelete\": \"Eliminar\",\n \"btnClose\": \"Cerrar\"\n },\n \"export\": {\n \"title\": \"Exportar diagrama\",\n \"recommendedTitle\": \"Recomendado\",\n \"recommendedMessage\": \"Esta es la mejor forma de guardar tu trabajo de forma permanente.\",\n \"noteMessage\": \"Los archivos JSON exportados pueden importarse posteriormente o compartirse con otros.\",\n \"btnDownload\": \"Descargar JSON\",\n \"btnCancel\": \"Cancelar\"\n },\n \"readOnly\": {\n \"mode\": \"Modo de solo lectura\",\n \"failed\": \"Error al cargar el diagrama\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Por favor ingresa un nombre para el diagrama\",\n \"diagramExists\": \"Ya existe un diagrama llamado \\\"{{name}}\\\" en esta sesión. Esto lo sobrescribirá. ¿Estás seguro de que deseas continuar?\",\n \"unsavedChanges\": \"Tienes cambios sin guardar. ¿Continuar cargando?\",\n \"createNewDiagram\": \"¿Crear un nuevo diagrama?\",\n \"unsavedChangesExport\": \"Tienes cambios sin guardar. Exporta tu diagrama primero para guardarlo. ¿Continuar?\",\n \"confirmDelete\": \"¿Estás seguro de que deseas eliminar este diagrama?\",\n \"storageFull\": \"¡Almacenamiento lleno! Abriendo el gestor de almacenamiento...\",\n \"autoSaveFailed\": \"¡Almacenamiento lleno! Por favor usa el gestor de almacenamiento para liberar espacio.\",\n \"beforeUnload\": \"Tienes cambios sin guardar. ¿Estás seguro de que deseas salir?\",\n \"quotaExceeded\": \"Cuota de almacenamiento excedida. Por favor exporta los diagramas importantes y libera espacio.\"\n }\n}\n" }, { "path": "packages/fossflow-app/src/i18n/fr-FR.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Nouveau diagramme\",\n \"saveSessionOnly\": \"Enregistrer (Session uniquement)\",\n \"loadSessionOnly\": \"Charger (Session uniquement)\",\n \"importFile\": \"Importer un fichier\",\n \"exportFile\": \"Exporter un fichier\",\n \"quickSaveSession\": \"Enregistrement rapide (Session)\",\n \"serverStorage\": \"Stockage sur serveur\"\n },\n \"status\": {\n \"current\": \"Actuel\",\n \"untitled\": \"Diagramme sans titre\",\n \"modified\": \"Modifié\",\n \"sessionStorageNote\": \"Stockage de session uniquement - exportez pour enregistrer définitivement\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Enregistrer le diagramme (Session actuelle uniquement)\",\n \"warningTitle\": \"Important\",\n \"warningMessage\": \"Cet enregistrement est temporaire et sera perdu lors de la fermeture du navigateur.\",\n \"warningExport\": \"Utilisez Exporter un fichier pour enregistrer votre travail de manière permanente.\",\n \"placeholder\": \"Entrez le nom du diagramme\",\n \"btnSave\": \"Enregistrer\",\n \"btnCancel\": \"Annuler\"\n },\n \"load\": {\n \"title\": \"Charger le diagramme (Session actuelle uniquement)\",\n \"noteTitle\": \"Remarque\",\n \"noteMessage\": \"Ces enregistrements sont temporaires. Exportez vos diagrammes pour les conserver de manière permanente.\",\n \"noSavedDiagrams\": \"Aucun diagramme enregistré trouvé dans cette session\",\n \"updated\": \"Mis à jour\",\n \"btnLoad\": \"Charger\",\n \"btnDelete\": \"Supprimer\",\n \"btnClose\": \"Fermer\"\n },\n \"export\": {\n \"title\": \"Exporter le diagramme\",\n \"recommendedTitle\": \"Recommandé\",\n \"recommendedMessage\": \"C'est la meilleure façon d'enregistrer votre travail de manière permanente.\",\n \"noteMessage\": \"Les fichiers JSON exportés peuvent être importés ultérieurement ou partagés avec d'autres.\",\n \"btnDownload\": \"Télécharger JSON\",\n \"btnCancel\": \"Annuler\"\n },\n \"readOnly\": {\n \"mode\": \"Mode lecture seule\",\n \"failed\": \"Échec du chargement du diagramme\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Veuillez entrer un nom pour le diagramme\",\n \"diagramExists\": \"Un diagramme nommé \\\"{{name}}\\\" existe déjà dans cette session. Cela l'écrasera. Êtes-vous sûr de vouloir continuer ?\",\n \"unsavedChanges\": \"Vous avez des modifications non enregistrées. Continuer le chargement ?\",\n \"createNewDiagram\": \"Créer un nouveau diagramme ?\",\n \"unsavedChangesExport\": \"Vous avez des modifications non enregistrées. Exportez d'abord votre diagramme pour l'enregistrer. Continuer ?\",\n \"confirmDelete\": \"Êtes-vous sûr de vouloir supprimer ce diagramme ?\",\n \"storageFull\": \"Stockage plein ! Ouverture du gestionnaire de stockage...\",\n \"autoSaveFailed\": \"Stockage plein ! Veuillez utiliser le gestionnaire de stockage pour libérer de l'espace.\",\n \"beforeUnload\": \"Vous avez des modifications non enregistrées. Êtes-vous sûr de vouloir partir ?\",\n \"quotaExceeded\": \"Quota de stockage dépassé. Veuillez exporter les diagrammes importants et libérer de l'espace.\"\n }\n}\n" }, { "path": "packages/fossflow-app/src/i18n/hi-IN.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"नया आरेख\",\n \"saveSessionOnly\": \"सहेजें (केवल सत्र)\",\n \"loadSessionOnly\": \"लोड करें (केवल सत्र)\",\n \"importFile\": \"फ़ाइल आयात करें\",\n \"exportFile\": \"फ़ाइल निर्यात करें\",\n \"quickSaveSession\": \"त्वरित सहेजें (सत्र)\",\n \"serverStorage\": \"सर्वर स्टोरेज\"\n },\n \"status\": {\n \"current\": \"वर्तमान\",\n \"untitled\": \"शीर्षकहीन आरेख\",\n \"modified\": \"संशोधित\",\n \"sessionStorageNote\": \"केवल सत्र स्टोरेज - स्थायी रूप से सहेजने के लिए निर्यात करें\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"आरेख सहेजें (केवल वर्तमान सत्र)\",\n \"warningTitle\": \"महत्वपूर्ण\",\n \"warningMessage\": \"यह सहेजना अस्थायी है और ब्राउज़र बंद करने पर खो जाएगा।\",\n \"warningExport\": \"अपने काम को स्थायी रूप से सहेजने के लिए फ़ाइल निर्यात करें का उपयोग करें।\",\n \"placeholder\": \"आरेख का नाम दर्ज करें\",\n \"btnSave\": \"सहेजें\",\n \"btnCancel\": \"रद्द करें\"\n },\n \"load\": {\n \"title\": \"आरेख लोड करें (केवल वर्तमान सत्र)\",\n \"noteTitle\": \"नोट\",\n \"noteMessage\": \"ये सहेजे गए अस्थायी हैं। अपने आरेखों को स्थायी रूप से रखने के लिए निर्यात करें।\",\n \"noSavedDiagrams\": \"इस सत्र में कोई सहेजा गया आरेख नहीं मिला\",\n \"updated\": \"अपडेट किया गया\",\n \"btnLoad\": \"लोड करें\",\n \"btnDelete\": \"हटाएं\",\n \"btnClose\": \"बंद करें\"\n },\n \"export\": {\n \"title\": \"आरेख निर्यात करें\",\n \"recommendedTitle\": \"अनुशंसित\",\n \"recommendedMessage\": \"यह आपके काम को स्थायी रूप से सहेजने का सबसे अच्छा तरीका है।\",\n \"noteMessage\": \"निर्यात की गई JSON फ़ाइलों को बाद में आयात किया जा सकता है या दूसरों के साथ साझा किया जा सकता है।\",\n \"btnDownload\": \"JSON डाउनलोड करें\",\n \"btnCancel\": \"रद्द करें\"\n },\n \"readOnly\": {\n \"mode\": \"केवल देखने का मोड\",\n \"failed\": \"आरेख लोड करने में विफल\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"कृपया आरेख के लिए एक नाम दर्ज करें\",\n \"diagramExists\": \"इस सत्र में \\\"{{name}}\\\" नाम का एक आरेख पहले से मौजूद है। यह इसे अधिलेखित कर देगा। क्या आप वाकई जारी रखना चाहते हैं?\",\n \"unsavedChanges\": \"आपके पास असहेजे गए परिवर्तन हैं। लोड करना जारी रखें?\",\n \"createNewDiagram\": \"एक नया आरेख बनाएं?\",\n \"unsavedChangesExport\": \"आपके पास असहेजे गए परिवर्तन हैं। इसे सहेजने के लिए पहले अपने आरेख को निर्यात करें। जारी रखें?\",\n \"confirmDelete\": \"क्या आप वाकई इस आरेख को हटाना चाहते हैं?\",\n \"storageFull\": \"स्टोरेज भरा हुआ है! स्टोरेज प्रबंधक खोला जा रहा है...\",\n \"autoSaveFailed\": \"स्टोरेज भरा हुआ है! कृपया जगह खाली करने के लिए स्टोरेज प्रबंधक का उपयोग करें।\",\n \"beforeUnload\": \"आपके पास असहेजे गए परिवर्तन हैं। क्या आप वाकई छोड़ना चाहते हैं?\",\n \"quotaExceeded\": \"स्टोरेज कोटा पार हो गया। कृपया महत्वपूर्ण आरेखों को निर्यात करें और कुछ जगह खाली करें।\"\n }\n}\n" }, { "path": "packages/fossflow-app/src/i18n/it-IT.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Nuovo Diagramma\",\n \"saveSessionOnly\": \"Salva (solo sessione)\",\n \"loadSessionOnly\": \"Carica (solo sessione)\",\n \"importFile\": \"Importa file\",\n \"exportFile\": \"Esporta file\",\n \"quickSaveSession\": \"Salvataggio rapido (sessione)\",\n \"serverStorage\": \"Archivio server\"\n },\n \"status\": {\n \"current\": \"Corrente\",\n \"untitled\": \"Diagramma senza titolo\",\n \"modified\": \"Modificato\",\n \"sessionStorageNote\": \"Solo archiviazione di sessione - esporta per salvare in modo permanente\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Salva diagramma (solo sessione corrente)\",\n \"warningTitle\": \"Importante\",\n \"warningMessage\": \"Questo salvataggio è temporaneo e verrà perso alla chiusura del browser.\",\n \"warningExport\": \"Usa Esporta file per salvare il tuo lavoro in modo permanente.\",\n \"placeholder\": \"Inserisci il nome del diagramma\",\n \"btnSave\": \"Salva\",\n \"btnCancel\": \"Annulla\"\n },\n \"load\": {\n \"title\": \"Carica diagramma (solo sessione corrente)\",\n \"noteTitle\": \"Nota\",\n \"noteMessage\": \"Questi salvataggi sono temporanei. Esporta i tuoi diagrammi per conservarli in modo permanente.\",\n \"noSavedDiagrams\": \"Nessun diagramma salvato trovato in questa sessione\",\n \"updated\": \"Aggiornato\",\n \"btnLoad\": \"Carica\",\n \"btnDelete\": \"Elimina\",\n \"btnClose\": \"Chiudi\"\n },\n \"export\": {\n \"title\": \"Esporta diagramma\",\n \"recommendedTitle\": \"Consigliato\",\n \"recommendedMessage\": \"Questo è il modo migliore per salvare il tuo lavoro in modo permanente.\",\n \"noteMessage\": \"I file JSON esportati possono essere importati in seguito o condivisi con altri.\",\n \"btnDownload\": \"Scarica JSON\",\n \"btnCancel\": \"Annulla\"\n },\n \"readOnly\": {\n \"mode\": \"Modalità sola lettura\",\n \"failed\": \"Impossibile caricare il diagramma\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Inserisci un nome per il diagramma\",\n \"diagramExists\": \"Un diagramma chiamato \\\"{{name}}\\\" esiste già in questa sessione. Verrà sovrascritto. Sei sicuro di voler continuare?\",\n \"unsavedChanges\": \"Hai modifiche non salvate. Continuare con il caricamento?\",\n \"createNewDiagram\": \"Creare un nuovo diagramma?\",\n \"unsavedChangesExport\": \"Hai modifiche non salvate. Esporta prima il tuo diagramma per salvarlo. Continuare?\",\n \"confirmDelete\": \"Sei sicuro di voler eliminare questo diagramma?\",\n \"storageFull\": \"Archiviazione piena! Apertura Gestore archiviazione...\",\n \"autoSaveFailed\": \"Archiviazione piena! Usa il Gestore archiviazione per liberare spazio.\",\n \"beforeUnload\": \"Hai modifiche non salvate. Sei sicuro di voler uscire?\",\n \"quotaExceeded\": \"Quota di archiviazione superata. Esporta i diagrammi importanti e libera spazio.\"\n }\n}" }, { "path": "packages/fossflow-app/src/i18n/pl-PL.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Nowy Diagram\",\n \"saveSessionOnly\": \"Zapisz (tylko bieżąca sesja)\",\n \"loadSessionOnly\": \"Wczytaj (tylko bieżąca sesja)\",\n \"importFile\": \"Importuj Plik\",\n \"exportFile\": \"Eksportuj Plik\",\n \"quickSaveSession\": \"Szybki zapis (Sesji)\",\n \"serverStorage\": \"Dysk aplikacji\"\n },\n \"status\": {\n \"current\": \"Obecny\",\n \"untitled\": \"Diagram bez tytułu\",\n \"modified\": \"Zmodyfikowany\",\n \"sessionStorageNote\": \"Tylko pamięć sesji – eksportuj, aby zapisać na stałe\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Zapisz diagram (tylko bieżąca sesja)\",\n \"warningTitle\": \"Ważne\",\n \"warningMessage\": \"To zapisanie jest tymczasowe i zostanie utracone po zamknięciu przeglądarki.\",\n \"warningExport\": \"Użyj opcji Eksportuj plik, aby trwale zapisać swoją pracę..\",\n \"placeholder\": \"Wprowadź nazwę diagramu\",\n \"btnSave\": \"Zapisz\",\n \"btnCancel\": \"Anuluj\"\n },\n \"load\": {\n \"title\": \"Wczytaj diagram (tylko bieżąca sesja)\",\n \"noteTitle\": \"Uwaga\",\n \"noteMessage\": \"Te zapisy są tymczasowe. Wyeksportuj swoje diagramy, aby zachować je na stałe.\",\n \"noSavedDiagrams\": \"W tej sesji nie znaleziono żadnych zapisanych diagramów.\",\n \"updated\": \"Zaktualizowano\",\n \"btnLoad\": \"Wczytaj\",\n \"btnDelete\": \"Usuń\",\n \"btnClose\": \"Zamknij\"\n },\n \"export\": {\n \"title\": \"Eksportuj Diagram\",\n \"recommendedTitle\": \"Zalecane\",\n \"recommendedMessage\": \"To najlepszy sposób na trwałe zapisanie swojej pracy.\",\n \"noteMessage\": \"Wyeksportowane pliki JSON można później zaimportować lub udostępnić innym osobom.\",\n \"btnDownload\": \"Pobierz plik JSON\",\n \"btnCancel\": \"Anuluj\"\n },\n \"readOnly\": {\n \"mode\": \"Tryb tylko do odczytu\",\n \"failed\": \"Nie udało się załadować diagramu\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Proszę wprowadzić nazwę diagramu\",\n \"diagramExists\": \"W tej sesji istnieje już diagram o nazwie \\\"{{name}}\\\". Spowoduje to jego nadpisanie. Czy na pewno chcesz kontynuować?\",\n \"unsavedChanges\": \"Masz niezapisane zmiany. Kontynuować Wczytanie?\",\n \"createNewDiagram\": \"Utworzyć nowy diagram?\",\n \"unsavedChangesExport\": \"Masz niezapisane zmiany. Najpierw wyeksportuj diagram, aby go zapisać. Kontynuować?\",\n \"confirmDelete\": \"Czy na pewno chcesz usunąć ten diagram?\",\n \"storageFull\": \"Dysk pełny! Otwieranie menadżera dysku aplikacji...\",\n \"autoSaveFailed\": \"Dysk pełny! Użyj Menedżera dysku, aby zwolnić miejsce.\",\n \"beforeUnload\": \"Masz niezapisane zmiany. Czy na pewno chcesz wyjść?\",\n \"quotaExceeded\": \"Przekroczono limit miejsca na dysku. Proszę wyeksportować ważne diagramy i zwolnić trochę miejsca.\"\n }\n}" }, { "path": "packages/fossflow-app/src/i18n/pt-BR.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Novo diagrama\",\n \"saveSessionOnly\": \"Salvar (Apenas sessão)\",\n \"loadSessionOnly\": \"Carregar (Apenas sessão)\",\n \"importFile\": \"Importar arquivo\",\n \"exportFile\": \"Exportar arquivo\",\n \"quickSaveSession\": \"Salvamento rápido (Sessão)\",\n \"serverStorage\": \"Armazenamento no servidor\"\n },\n \"status\": {\n \"current\": \"Atual\",\n \"untitled\": \"Diagrama sem título\",\n \"modified\": \"Modificado\",\n \"sessionStorageNote\": \"Apenas armazenamento de sessão - exporte para salvar permanentemente\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Salvar diagrama (Apenas sessão atual)\",\n \"warningTitle\": \"Importante\",\n \"warningMessage\": \"Este salvamento é temporário e será perdido ao fechar o navegador.\",\n \"warningExport\": \"Use Exportar arquivo para salvar seu trabalho permanentemente.\",\n \"placeholder\": \"Digite o nome do diagrama\",\n \"btnSave\": \"Salvar\",\n \"btnCancel\": \"Cancelar\"\n },\n \"load\": {\n \"title\": \"Carregar diagrama (Apenas sessão atual)\",\n \"noteTitle\": \"Nota\",\n \"noteMessage\": \"Estes salvamentos são temporários. Exporte seus diagramas para mantê-los permanentemente.\",\n \"noSavedDiagrams\": \"Nenhum diagrama salvo encontrado nesta sessão\",\n \"updated\": \"Atualizado\",\n \"btnLoad\": \"Carregar\",\n \"btnDelete\": \"Excluir\",\n \"btnClose\": \"Fechar\"\n },\n \"export\": {\n \"title\": \"Exportar diagrama\",\n \"recommendedTitle\": \"Recomendado\",\n \"recommendedMessage\": \"Esta é a melhor forma de salvar seu trabalho permanentemente.\",\n \"noteMessage\": \"Arquivos JSON exportados podem ser importados posteriormente ou compartilhados com outros.\",\n \"btnDownload\": \"Baixar JSON\",\n \"btnCancel\": \"Cancelar\"\n },\n \"readOnly\": {\n \"mode\": \"Modo somente leitura\",\n \"failed\": \"Falha ao carregar diagrama\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Por favor, digite um nome para o diagrama\",\n \"diagramExists\": \"Já existe um diagrama chamado \\\"{{name}}\\\" nesta sessão. Isso irá sobrescrevê-lo. Tem certeza de que deseja continuar?\",\n \"unsavedChanges\": \"Você tem alterações não salvas. Continuar carregando?\",\n \"createNewDiagram\": \"Criar um novo diagrama?\",\n \"unsavedChangesExport\": \"Você tem alterações não salvas. Exporte seu diagrama primeiro para salvá-lo. Continuar?\",\n \"confirmDelete\": \"Tem certeza de que deseja excluir este diagrama?\",\n \"storageFull\": \"Armazenamento cheio! Abrindo o gerenciador de armazenamento...\",\n \"autoSaveFailed\": \"Armazenamento cheio! Por favor, use o gerenciador de armazenamento para liberar espaço.\",\n \"beforeUnload\": \"Você tem alterações não salvas. Tem certeza de que deseja sair?\",\n \"quotaExceeded\": \"Cota de armazenamento excedida. Por favor, exporte os diagramas importantes e libere espaço.\"\n }\n}\n" }, { "path": "packages/fossflow-app/src/i18n/ru-RU.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Новая диаграмма\",\n \"saveSessionOnly\": \"Сохранить (Только сеанс)\",\n \"loadSessionOnly\": \"Загрузить (Только сеанс)\",\n \"importFile\": \"Импортировать файл\",\n \"exportFile\": \"Экспортировать файл\",\n \"quickSaveSession\": \"Быстрое сохранение (Сеанс)\",\n \"serverStorage\": \"Серверное хранилище\"\n },\n \"status\": {\n \"current\": \"Текущий\",\n \"untitled\": \"Диаграмма без названия\",\n \"modified\": \"Изменено\",\n \"sessionStorageNote\": \"Только хранилище сеанса - экспортируйте для постоянного сохранения\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Сохранить диаграмму (Только текущий сеанс)\",\n \"warningTitle\": \"Важно\",\n \"warningMessage\": \"Это сохранение временное и будет потеряно при закрытии браузера.\",\n \"warningExport\": \"Используйте Экспортировать файл для постоянного сохранения вашей работы.\",\n \"placeholder\": \"Введите название диаграммы\",\n \"btnSave\": \"Сохранить\",\n \"btnCancel\": \"Отмена\"\n },\n \"load\": {\n \"title\": \"Загрузить диаграмму (Только текущий сеанс)\",\n \"noteTitle\": \"Примечание\",\n \"noteMessage\": \"Эти сохранения временные. Экспортируйте свои диаграммы, чтобы сохранить их постоянно.\",\n \"noSavedDiagrams\": \"В этом сеансе не найдено сохраненных диаграмм\",\n \"updated\": \"Обновлено\",\n \"btnLoad\": \"Загрузить\",\n \"btnDelete\": \"Удалить\",\n \"btnClose\": \"Закрыть\"\n },\n \"export\": {\n \"title\": \"Экспортировать диаграмму\",\n \"recommendedTitle\": \"Рекомендуется\",\n \"recommendedMessage\": \"Это лучший способ сохранить вашу работу постоянно.\",\n \"noteMessage\": \"Экспортированные файлы JSON можно импортировать позже или поделиться с другими.\",\n \"btnDownload\": \"Скачать JSON\",\n \"btnCancel\": \"Отмена\"\n },\n \"readOnly\": {\n \"mode\": \"Режим только для чтения\",\n \"failed\": \"Не удалось загрузить диаграмму\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Пожалуйста, введите название диаграммы\",\n \"diagramExists\": \"Диаграмма с названием \\\"{{name}}\\\" уже существует в этом сеансе. Это перезапишет её. Вы уверены, что хотите продолжить?\",\n \"unsavedChanges\": \"У вас есть несохраненные изменения. Продолжить загрузку?\",\n \"createNewDiagram\": \"Создать новую диаграмму?\",\n \"unsavedChangesExport\": \"У вас есть несохраненные изменения. Сначала экспортируйте диаграмму, чтобы сохранить её. Продолжить?\",\n \"confirmDelete\": \"Вы уверены, что хотите удалить эту диаграмму?\",\n \"storageFull\": \"Хранилище заполнено! Открывается менеджер хранилища...\",\n \"autoSaveFailed\": \"Хранилище заполнено! Пожалуйста, используйте менеджер хранилища, чтобы освободить место.\",\n \"beforeUnload\": \"У вас есть несохраненные изменения. Вы уверены, что хотите уйти?\",\n \"quotaExceeded\": \"Квота хранилища превышена. Пожалуйста, экспортируйте важные диаграммы и освободите место.\"\n }\n}\n" }, { "path": "packages/fossflow-app/src/i18n/tr-TR.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"Yeni Diyagram\",\n \"saveSessionOnly\": \"Kaydet (Yalnızca Oturum)\",\n \"loadSessionOnly\": \"Yükle (Yalnızca Oturum)\",\n \"importFile\": \"Dosya İçe Aktar\",\n \"exportFile\": \"Dosya Dışa Aktar\",\n \"quickSaveSession\": \"Hızlı Kaydet (Oturum)\",\n \"serverStorage\": \"Sunucu Depolama\"\n },\n \"status\": {\n \"current\": \"Mevcut\",\n \"untitled\": \"İsimsiz Diyagram\",\n \"modified\": \"Değiştirildi\",\n \"sessionStorageNote\": \"Yalnızca oturum depolama - kalıcı olarak kaydetmek için dışa aktar\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"Diyagramı Kaydet (Yalnızca Mevcut Oturum)\",\n \"warningTitle\": \"Önemli\",\n \"warningMessage\": \"Bu kayıt geçicidir ve tarayıcıyı kapattığınızda kaybolacaktır.\",\n \"warningExport\": \"Çalışmanızı kalıcı olarak kaydetmek için Dosya Dışa Aktar kullanın.\",\n \"placeholder\": \"Diyagram adı girin\",\n \"btnSave\": \"Kaydet\",\n \"btnCancel\": \"İptal\"\n },\n \"load\": {\n \"title\": \"Diyagram Yükle (Yalnızca Mevcut Oturum)\",\n \"noteTitle\": \"Not\",\n \"noteMessage\": \"Bu kayıtlar geçicidir. Diyagramlarınızı kalıcı olarak saklamak için dışa aktarın.\",\n \"noSavedDiagrams\": \"Bu oturumda kaydedilmiş diyagram bulunamadı\",\n \"updated\": \"Güncellendi\",\n \"btnLoad\": \"Yükle\",\n \"btnDelete\": \"Sil\",\n \"btnClose\": \"Kapat\"\n },\n \"export\": {\n \"title\": \"Diyagramı Dışa Aktar\",\n \"recommendedTitle\": \"Önerilen\",\n \"recommendedMessage\": \"Bu, çalışmanızı kalıcı olarak kaydetmenin en iyi yoludur.\",\n \"noteMessage\": \"Dışa aktarılan JSON dosyaları daha sonra içe aktarılabilir veya başkalarıyla paylaşılabilir.\",\n \"btnDownload\": \"JSON İndir\",\n \"btnCancel\": \"İptal\"\n },\n \"readOnly\": {\n \"mode\": \"Yalnızca Görüntüleme Modu\",\n \"failed\": \"Diyagram yüklenemedi\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"Lütfen bir diyagram adı girin\",\n \"diagramExists\": \"\\\"{{name}}\\\" adlı bir diyagram bu oturumda zaten mevcut. Bu, üzerine yazacaktır. Devam etmek istediğinizden emin misiniz?\",\n \"unsavedChanges\": \"Kaydedilmemiş değişiklikleriniz var. Yüklemeye devam edilsin mi?\",\n \"createNewDiagram\": \"Yeni bir diyagram oluşturulsun mu?\",\n \"unsavedChangesExport\": \"Kaydedilmemiş değişiklikleriniz var. Önce diyagramınızı kaydetmek için dışa aktarın. Devam edilsin mi?\",\n \"confirmDelete\": \"Bu diyagramı silmek istediğinizden emin misiniz?\",\n \"storageFull\": \"Depolama dolu! Depolama Yöneticisi açılıyor...\",\n \"autoSaveFailed\": \"Depolama dolu! Lütfen alan açmak için Depolama Yöneticisi'ni kullanın.\",\n \"beforeUnload\": \"Kaydedilmemiş değişiklikleriniz var. Ayrılmak istediğinizden emin misiniz?\",\n \"quotaExceeded\": \"Depolama kotası aşıldı. Lütfen önemli diyagramları dışa aktarın ve biraz alan açın.\"\n }\n}\n" }, { "path": "packages/fossflow-app/src/i18n/zh-CN.json", "content": "{\n \"nav\": {\n \"newDiagram\": \"新建图表\",\n \"saveSessionOnly\": \"保存（仅会话）\",\n \"loadSessionOnly\": \"加载（仅会话）\",\n \"importFile\": \"导入文件\",\n \"exportFile\": \"导出文件\",\n \"quickSaveSession\": \"快速保存（会话）\",\n \"serverStorage\": \"服务端存储\"\n },\n \"status\": {\n \"current\": \"当前\",\n \"untitled\": \"未命名图表\",\n \"modified\": \"已修改\",\n \"sessionStorageNote\": \"仅会话存储 - 导出以永久保存\"\n },\n \"dialog\": {\n \"save\": {\n \"title\": \"保存图表（仅当前会话）\",\n \"warningTitle\": \"重要提示\",\n \"warningMessage\": \"此保存是临时的，关闭浏览器后将丢失。\",\n \"warningExport\": \"使用导出文件功能永久保存您的工作。\",\n \"placeholder\": \"输入图表名称\",\n \"btnSave\": \"保存\",\n \"btnCancel\": \"取消\"\n },\n \"load\": {\n \"title\": \"加载图表（仅当前会话）\",\n \"noteTitle\": \"提示\",\n \"noteMessage\": \"这些保存是临时的。导出您的图表以永久保存。\",\n \"noSavedDiagrams\": \"当前会话中未找到已保存的图表\",\n \"updated\": \"更新时间\",\n \"btnLoad\": \"加载\",\n \"btnDelete\": \"删除\",\n \"btnClose\": \"关闭\"\n },\n \"export\": {\n \"title\": \"导出图表\",\n \"recommendedTitle\": \"推荐\",\n \"recommendedMessage\": \"这是永久保存工作的最佳方式。\",\n \"noteMessage\": \"导出的 JSON 文件可以稍后导入或与他人共享。\",\n \"btnDownload\": \"下载 JSON\",\n \"btnCancel\": \"取消\"\n },\n \"readOnly\": {\n \"mode\": \"阅读模式\",\n \"failed\": \"加载图表失败\"\n }\n },\n \"alert\": {\n \"enterDiagramName\": \"请输入图表名称\",\n \"diagramExists\": \"名为\\\"{{name}}\\\"的图表已存在于此会话中。这将覆盖它。您确定要继续吗？\",\n \"unsavedChanges\": \"您有未保存的更改。继续加载？\",\n \"createNewDiagram\": \"创建新图表？\",\n \"unsavedChangesExport\": \"您有未保存的更改。请先导出图表以保存。继续？\",\n \"confirmDelete\": \"您确定要删除此图表吗？\",\n \"storageFull\": \"存储空间已满！正在打开存储管理器...\",\n \"autoSaveFailed\": \"存储空间已满！请使用存储管理器释放空间。\",\n \"beforeUnload\": \"您有未保存的更改。您确定要离开吗？\",\n \"quotaExceeded\": \"存储配额已超出。请导出重要图表并清理一些空间。\"\n }\n}" }, { "path": "packages/fossflow-app/src/i18n.ts", "content": "import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport Backend from 'i18next-http-backend';\nimport LanguageDetector from 'i18next-browser-languagedetector';\n\n// Ensure PUBLIC_URL ends with slash for consistent path construction\nconst publicUrl = process.env.PUBLIC_URL || '';\nconst basePath = publicUrl ? (publicUrl.endsWith('/') ? publicUrl : publicUrl + '/') : '/';\n\ni18n\n .use(Backend)\n .use(LanguageDetector)\n .use(initReactI18next)\n .init({\n fallbackLng: 'en-US',\n debug: process.env.NODE_ENV === 'development',\n interpolation: {\n escapeValue: false\n },\n ns: ['app'],\n backend: {\n loadPath: `${basePath}i18n/{{ns}}/{{lng}}.json`\n },\n detection: {\n order: ['localStorage'],\n caches: ['localStorage']\n }\n });\n\nexport const supportedLanguages = [\n {\n label: 'English',\n value: 'en-US'\n },\n {\n label: '中文',\n value: 'zh-CN'\n },\n {\n label: 'Español',\n value: 'es-ES'\n },\n {\n label: 'Português',\n value: 'pt-BR'\n },\n {\n label: 'Français',\n value: 'fr-FR'\n },\n {\n label: 'हिन्दी',\n value: 'hi-IN'\n },\n {\n label: 'বাংলা',\n value: 'bn-BD'\n },\n {\n label: 'Русский',\n value: 'ru-RU'\n },\n {\n label: 'Italian',\n value: 'it-IT'\n },\n {\n label: 'Bahasa Indonesia',\n value: 'id-ID'\n },\n {\n label: 'Deutsch',\n value: 'de-DE'\n },\n {\n label: 'Türkçe',\n value: 'tr-TR'\n }\n];\n\nexport default i18n;\n" }, { "path": "packages/fossflow-app/src/index.css", "content": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n" }, { "path": "packages/fossflow-app/src/index.tsx", "content": "import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport 'react-quill-new/dist/quill.snow.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport * as serviceWorkerRegistration from './serviceWorkerRegistration';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport ErrorBoundaryFallbackUI from './components/ErrorBoundary';\nimport {I18nextProvider} from 'react-i18next';\nimport i18n from './i18n';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n \n \n \n \n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n\n// Service worker registration - only in production for PWA functionality\nif (process.env.NODE_ENV === 'production') {\n serviceWorkerRegistration.register({\n onSuccess: () => console.log('Service worker registered successfully'),\n onUpdate: () => console.log('Service worker update available')\n });\n} else {\n // Disable service worker in development to avoid cache issues\n serviceWorkerRegistration.unregister();\n}\n" }, { "path": "packages/fossflow-app/src/minimalIcons.ts", "content": "// Minimal icons needed for Isoflow functionality\n// These are system icons that Isoflow uses internally\n\nexport const getMinimalIcons = (allIcons: any[]) => {\n // Find connector/arrow related icons that Isoflow might need\n const essentialIconIds = [\n 'arrow',\n 'connector',\n 'line',\n 'path',\n '_isoflow_', // Isoflow system icons\n 'isoflow-arrow',\n 'isoflow-connector'\n ];\n \n // Filter to only include essential system icons\n const minimalIcons = allIcons.filter(icon => {\n const id = icon.id?.toLowerCase() || '';\n return essentialIconIds.some(essential => id.includes(essential));\n });\n \n console.log(`Reduced icons from ${allIcons.length} to ${minimalIcons.length} essential icons`);\n \n // If no essential icons found, include at least the first few icons\n if (minimalIcons.length === 0 && allIcons.length > 0) {\n return allIcons.slice(0, 10); // Fallback to first 10 icons\n }\n \n return minimalIcons;\n};" }, { "path": "packages/fossflow-app/src/paymentFlowExample.json", "content": "{\n \"title\": \"E-Commerce Payment Processing Flow\",\n \"icons\": [],\n \"colors\": [\n { \"id\": \"blue\", \"value\": \"#0066cc\" },\n { \"id\": \"green\", \"value\": \"#00aa00\" },\n { \"id\": \"red\", \"value\": \"#cc0000\" },\n { \"id\": \"orange\", \"value\": \"#ff9900\" },\n { \"id\": \"purple\", \"value\": \"#9900cc\" }\n ],\n \"items\": [\n {\n \"id\": \"customer\",\n \"type\": \"isoflow__person\",\n \"position\": { \"x\": 50, \"y\": 200 },\n \"name\": \"Customer\",\n \"description\": \"Online shopper making a purchase\"\n },\n {\n \"id\": \"web-app\",\n \"type\": \"isoflow__web_app\",\n \"position\": { \"x\": 200, \"y\": 200 },\n \"name\": \"E-Commerce Site\",\n \"description\": \"React-based shopping platform\"\n },\n {\n \"id\": \"api-gateway\",\n \"type\": \"isoflow__api\",\n \"position\": { \"x\": 350, \"y\": 200 },\n \"name\": \"API Gateway\",\n \"description\": \"Routes payment requests\"\n },\n {\n \"id\": \"load-balancer\",\n \"type\": \"isoflow__load_balancer\",\n \"position\": { \"x\": 500, \"y\": 200 },\n \"name\": \"Load Balancer\",\n \"description\": \"Distributes traffic across payment services\"\n },\n {\n \"id\": \"payment-service-1\",\n \"type\": \"isoflow__microservice\",\n \"position\": { \"x\": 650, \"y\": 150 },\n \"name\": \"Payment Service A\",\n \"description\": \"Primary payment processor\"\n },\n {\n \"id\": \"payment-service-2\",\n \"type\": \"isoflow__microservice\",\n \"position\": { \"x\": 650, \"y\": 250 },\n \"name\": \"Payment Service B\",\n \"description\": \"Backup payment processor\"\n },\n {\n \"id\": \"redis-cache\",\n \"type\": \"isoflow__redis\",\n \"position\": { \"x\": 800, \"y\": 100 },\n \"name\": \"Redis Cache\",\n \"description\": \"Session & cart data\"\n },\n {\n \"id\": \"auth-service\",\n \"type\": \"isoflow__authentication\",\n \"position\": { \"x\": 350, \"y\": 350 },\n \"name\": \"Auth Service\",\n \"description\": \"OAuth 2.0 / JWT tokens\"\n },\n {\n \"id\": \"fraud-detection\",\n \"type\": \"isoflow__shield\",\n \"position\": { \"x\": 500, \"y\": 350 },\n \"name\": \"Fraud Detection\",\n \"description\": \"ML-based fraud analysis\"\n },\n {\n \"id\": \"payment-gateway\",\n \"type\": \"isoflow__gateway\",\n \"position\": { \"x\": 800, \"y\": 200 },\n \"name\": \"Payment Gateway\",\n \"description\": \"Stripe/PayPal integration\"\n },\n {\n \"id\": \"bank-api\",\n \"type\": \"isoflow__bank\",\n \"position\": { \"x\": 950, \"y\": 200 },\n \"name\": \"Banking API\",\n \"description\": \"Direct bank integration\"\n },\n {\n \"id\": \"database\",\n \"type\": \"isoflow__database\",\n \"position\": { \"x\": 650, \"y\": 350 },\n \"name\": \"PostgreSQL\",\n \"description\": \"Transaction history\"\n },\n {\n \"id\": \"notification\",\n \"type\": \"isoflow__notification\",\n \"position\": { \"x\": 800, \"y\": 350 },\n \"name\": \"Notification Service\",\n \"description\": \"Email/SMS confirmations\"\n },\n {\n \"id\": \"monitoring\",\n \"type\": \"isoflow__monitoring\",\n \"position\": { \"x\": 950, \"y\": 350 },\n \"name\": \"Monitoring\",\n \"description\": \"DataDog integration\"\n },\n {\n \"id\": \"cdn\",\n \"type\": \"isoflow__cdn\",\n \"position\": { \"x\": 200, \"y\": 50 },\n \"name\": \"CloudFlare CDN\",\n \"description\": \"Static assets & DDoS protection\"\n },\n {\n \"id\": \"mobile-app\",\n \"type\": \"isoflow__mobile\",\n \"position\": { \"x\": 50, \"y\": 50 },\n \"name\": \"Mobile App\",\n \"description\": \"iOS/Android app\"\n },\n {\n \"id\": \"backup\",\n \"type\": \"isoflow__backup\",\n \"position\": { \"x\": 650, \"y\": 450 },\n \"name\": \"Backup Service\",\n \"description\": \"Automated daily backups\"\n },\n {\n \"id\": \"analytics\",\n \"type\": \"isoflow__analytics\",\n \"position\": { \"x\": 350, \"y\": 50 },\n \"name\": \"Analytics\",\n \"description\": \"Google Analytics & Mixpanel\"\n },\n {\n \"id\": \"queue\",\n \"type\": \"isoflow__queue\",\n \"position\": { \"x\": 500, \"y\": 450 },\n \"name\": \"Message Queue\",\n \"description\": \"RabbitMQ for async processing\"\n },\n {\n \"id\": \"logs\",\n \"type\": \"isoflow__logs\",\n \"position\": { \"x\": 800, \"y\": 450 },\n \"name\": \"Log Aggregation\",\n \"description\": \"ELK Stack\"\n }\n ],\n \"connectors\": [\n {\n \"id\": \"c1\",\n \"from\": \"customer\",\n \"to\": \"web-app\",\n \"name\": \"1. Browse & checkout\",\n \"color\": \"blue\"\n },\n {\n \"id\": \"c2\",\n \"from\": \"mobile-app\",\n \"to\": \"web-app\",\n \"name\": \"Mobile API\",\n \"color\": \"blue\"\n },\n {\n \"id\": \"c3\",\n \"from\": \"web-app\",\n \"to\": \"cdn\",\n \"name\": \"Static assets\",\n \"color\": \"orange\"\n },\n {\n \"id\": \"c4\",\n \"from\": \"web-app\",\n \"to\": \"api-gateway\",\n \"name\": \"2. Payment request\",\n \"color\": \"green\"\n },\n {\n \"id\": \"c5\",\n \"from\": \"api-gateway\",\n \"to\": \"auth-service\",\n \"name\": \"3. Verify auth\",\n \"color\": \"purple\"\n },\n {\n \"id\": \"c6\",\n \"from\": \"api-gateway\",\n \"to\": \"load-balancer\",\n \"name\": \"4. Route payment\",\n \"color\": \"green\"\n },\n {\n \"id\": \"c7\",\n \"from\": \"load-balancer\",\n \"to\": \"payment-service-1\",\n \"name\": \"5a. Process (primary)\",\n \"color\": \"green\"\n },\n {\n \"id\": \"c8\",\n \"from\": \"load-balancer\",\n \"to\": \"payment-service-2\",\n \"name\": \"5b. Process (backup)\",\n \"color\": \"orange\"\n },\n {\n \"id\": \"c9\",\n \"from\": \"payment-service-1\",\n \"to\": \"redis-cache\",\n \"name\": \"Cache session\",\n \"color\": \"blue\"\n },\n {\n \"id\": \"c10\",\n \"from\": \"payment-service-1\",\n \"to\": \"fraud-detection\",\n \"name\": \"6. Check fraud\",\n \"color\": \"red\"\n },\n {\n \"id\": \"c11\",\n \"from\": \"payment-service-1\",\n \"to\": \"payment-gateway\",\n \"name\": \"7. Process payment\",\n \"color\": \"green\"\n },\n {\n \"id\": \"c12\",\n \"from\": \"payment-gateway\",\n \"to\": \"bank-api\",\n \"name\": \"8. Bank transfer\",\n \"color\": \"green\"\n },\n {\n \"id\": \"c13\",\n \"from\": \"payment-service-1\",\n \"to\": \"database\",\n \"name\": \"9. Store transaction\",\n \"color\": \"blue\"\n },\n {\n \"id\": \"c14\",\n \"from\": \"payment-service-1\",\n \"to\": \"notification\",\n \"name\": \"10. Send confirmation\",\n \"color\": \"purple\"\n },\n {\n \"id\": \"c15\",\n \"from\": \"payment-service-1\",\n \"to\": \"monitoring\",\n \"name\": \"Metrics\",\n \"color\": \"orange\"\n },\n {\n \"id\": \"c16\",\n \"from\": \"web-app\",\n \"to\": \"analytics\",\n \"name\": \"Track events\",\n \"color\": \"purple\"\n },\n {\n \"id\": \"c17\",\n \"from\": \"database\",\n \"to\": \"backup\",\n \"name\": \"Daily backup\",\n \"color\": \"orange\"\n },\n {\n \"id\": \"c18\",\n \"from\": \"payment-service-1\",\n \"to\": \"queue\",\n \"name\": \"Async tasks\",\n \"color\": \"blue\"\n },\n {\n \"id\": \"c19\",\n \"from\": \"payment-service-1\",\n \"to\": \"logs\",\n \"name\": \"Audit logs\",\n \"color\": \"purple\"\n },\n {\n \"id\": \"c20\",\n \"from\": \"notification\",\n \"to\": \"customer\",\n \"name\": \"11. Email/SMS receipt\",\n \"color\": \"green\"\n }\n ],\n \"views\": [],\n \"fitToScreen\": true\n}" }, { "path": "packages/fossflow-app/src/reportWebVitals.ts", "content": "import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n" }, { "path": "packages/fossflow-app/src/serviceWorkerRegistration.ts", "content": "const isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n window.location.hostname === '[::1]' ||\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\ntype Config = {\n onSuccess?: (registration: ServiceWorkerRegistration) => void;\n onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n if ('serviceWorker' in navigator) {\n // Ensure PUBLIC_URL ends with slash for consistent path construction\n const publicUrlPath = process.env.PUBLIC_URL || '';\n const basePath = publicUrlPath ? (publicUrlPath.endsWith('/') ? publicUrlPath : publicUrlPath + '/') : '/';\n\n const publicUrl = new URL(basePath, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${basePath}service-worker.js`;\n\n if (isLocalhost) {\n checkValidServiceWorker(swUrl, config);\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service worker.'\n );\n });\n } else {\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n console.log(\n 'New content is available and will be used when all tabs for this page are closed.'\n );\n\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n console.log('Content is cached for offline use.');\n\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then((response) => {\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then((registration) => {\n registration.unregister();\n })\n .catch((error) => {\n console.error(error.message);\n });\n }\n}" }, { "path": "packages/fossflow-app/src/services/iconPackManager.ts", "content": "import { useState, useEffect, useCallback } from 'react';\nimport { flattenCollections } from '@isoflow/isopacks/dist/utils';\n\n// Available icon packs (excluding core isoflow which is always loaded)\nexport type IconPackName = 'aws' | 'gcp' | 'azure' | 'kubernetes';\n\nexport interface IconPackInfo {\n name: IconPackName;\n displayName: string;\n loaded: boolean;\n loading: boolean;\n error: string | null;\n iconCount: number;\n}\n\nexport interface IconPackManagerState {\n lazyLoadingEnabled: boolean;\n enabledPacks: IconPackName[];\n packInfo: Record;\n loadedIcons: any[];\n}\n\n// localStorage keys\nconst LAZY_LOADING_KEY = 'fossflow-lazy-loading-enabled';\nconst ENABLED_PACKS_KEY = 'fossflow-enabled-icon-packs';\n\n// Pack metadata\nconst PACK_METADATA: Record = {\n aws: 'AWS Icons',\n gcp: 'Google Cloud Icons',\n azure: 'Azure Icons',\n kubernetes: 'Kubernetes Icons'\n};\n\n// Load preferences from localStorage\nexport const loadLazyLoadingPreference = (): boolean => {\n const stored = localStorage.getItem(LAZY_LOADING_KEY);\n return stored === null ? true : stored === 'true'; // Default to true\n};\n\nexport const saveLazyLoadingPreference = (enabled: boolean): void => {\n localStorage.setItem(LAZY_LOADING_KEY, String(enabled));\n};\n\nexport const loadEnabledPacks = (): IconPackName[] => {\n const stored = localStorage.getItem(ENABLED_PACKS_KEY);\n if (!stored) return [];\n try {\n return JSON.parse(stored) as IconPackName[];\n } catch {\n return [];\n }\n};\n\nexport const saveEnabledPacks = (packs: IconPackName[]): void => {\n localStorage.setItem(ENABLED_PACKS_KEY, JSON.stringify(packs));\n};\n\n// Dynamic pack loader\nexport const loadIconPack = async (packName: IconPackName): Promise => {\n switch (packName) {\n case 'aws':\n return (await import('@isoflow/isopacks/dist/aws')).default;\n case 'gcp':\n return (await import('@isoflow/isopacks/dist/gcp')).default;\n case 'azure':\n return (await import('@isoflow/isopacks/dist/azure')).default;\n case 'kubernetes':\n return (await import('@isoflow/isopacks/dist/kubernetes')).default;\n default:\n throw new Error(`Unknown icon pack: ${packName}`);\n }\n};\n\n// React hook for managing icon packs\nexport const useIconPackManager = (coreIcons: any[]) => {\n const [lazyLoadingEnabled, setLazyLoadingEnabled] = useState(() =>\n loadLazyLoadingPreference()\n );\n\n const [enabledPacks, setEnabledPacks] = useState(() =>\n loadEnabledPacks()\n );\n\n const [packInfo, setPackInfo] = useState>(() => {\n const info: Record = {};\n const packNames: IconPackName[] = ['aws', 'gcp', 'azure', 'kubernetes'];\n packNames.forEach(name => {\n info[name] = {\n name,\n displayName: PACK_METADATA[name],\n loaded: false,\n loading: false,\n error: null,\n iconCount: 0\n };\n });\n return info as Record;\n });\n\n const [loadedIcons, setLoadedIcons] = useState(coreIcons);\n const [loadedPackData, setLoadedPackData] = useState>({} as Record);\n\n // Load a specific pack\n const loadPack = useCallback(async (packName: IconPackName) => {\n // Already loaded?\n if (packInfo[packName].loaded || packInfo[packName].loading) {\n return;\n }\n\n // Set loading state\n setPackInfo(prev => ({\n ...prev,\n [packName]: { ...prev[packName], loading: true, error: null }\n }));\n\n try {\n const pack = await loadIconPack(packName);\n const flattenedIcons = flattenCollections([pack]);\n\n // Store the loaded pack data\n setLoadedPackData(prev => ({\n ...prev,\n [packName]: pack\n }));\n\n // Update pack info\n setPackInfo(prev => ({\n ...prev,\n [packName]: {\n ...prev[packName],\n loaded: true,\n loading: false,\n iconCount: flattenedIcons.length,\n error: null\n }\n }));\n\n // Add icons to the loaded icons array\n setLoadedIcons(prev => [...prev, ...flattenedIcons]);\n\n return flattenedIcons;\n } catch (error) {\n console.error(`Failed to load ${packName} icon pack:`, error);\n setPackInfo(prev => ({\n ...prev,\n [packName]: {\n ...prev[packName],\n loading: false,\n error: error instanceof Error ? error.message : 'Failed to load pack'\n }\n }));\n throw error;\n }\n }, [packInfo]);\n\n // Enable/disable a pack\n const togglePack = useCallback(async (packName: IconPackName, enabled: boolean) => {\n if (enabled) {\n // Add to enabled packs\n const newEnabledPacks = [...enabledPacks, packName];\n setEnabledPacks(newEnabledPacks);\n saveEnabledPacks(newEnabledPacks);\n\n // Load the pack\n await loadPack(packName);\n } else {\n // Remove from enabled packs\n const newEnabledPacks = enabledPacks.filter(p => p !== packName);\n setEnabledPacks(newEnabledPacks);\n saveEnabledPacks(newEnabledPacks);\n\n // Remove icons from loaded icons\n // We need to rebuild the icons array from core + enabled packs\n const newIcons = [coreIcons];\n for (const pack of newEnabledPacks) {\n if (loadedPackData[pack]) {\n newIcons.push(flattenCollections([loadedPackData[pack]]));\n }\n }\n setLoadedIcons(newIcons.flat());\n }\n }, [enabledPacks, loadPack, coreIcons, loadedPackData]);\n\n // Toggle lazy loading\n const toggleLazyLoading = useCallback((enabled: boolean) => {\n setLazyLoadingEnabled(enabled);\n saveLazyLoadingPreference(enabled);\n }, []);\n\n // Load all packs (for when lazy loading is disabled)\n const loadAllPacks = useCallback(async () => {\n const allPacks: IconPackName[] = ['aws', 'gcp', 'azure', 'kubernetes'];\n for (const pack of allPacks) {\n if (!packInfo[pack].loaded && !packInfo[pack].loading) {\n await loadPack(pack);\n }\n }\n }, [packInfo, loadPack]);\n\n // Auto-detect required packs from diagram data\n const loadPacksForDiagram = useCallback(async (diagramItems: any[]) => {\n if (!diagramItems || diagramItems.length === 0) return;\n\n // Extract unique collections from diagram items\n const collections = new Set();\n diagramItems.forEach(item => {\n if (item.icon?.collection) {\n collections.add(item.icon.collection);\n }\n });\n\n // Load any missing packs\n const packsToLoad: IconPackName[] = [];\n collections.forEach(collection => {\n if (collection !== 'isoflow' && collection !== 'imported') {\n const packName = collection as IconPackName;\n if (['aws', 'gcp', 'azure', 'kubernetes'].includes(packName)) {\n if (!packInfo[packName].loaded && !packInfo[packName].loading) {\n packsToLoad.push(packName);\n }\n }\n }\n });\n\n // Load required packs\n for (const pack of packsToLoad) {\n await loadPack(pack);\n // Also add to enabled packs\n if (!enabledPacks.includes(pack)) {\n const newEnabledPacks = [...enabledPacks, pack];\n setEnabledPacks(newEnabledPacks);\n saveEnabledPacks(newEnabledPacks);\n }\n }\n }, [packInfo, enabledPacks, loadPack]);\n\n // Initialize: Load enabled packs or all packs depending on lazy loading setting\n useEffect(() => {\n const initialize = async () => {\n if (!lazyLoadingEnabled) {\n // Load all packs immediately\n await loadAllPacks();\n } else {\n // Load only enabled packs\n for (const pack of enabledPacks) {\n if (!packInfo[pack].loaded && !packInfo[pack].loading) {\n await loadPack(pack);\n }\n }\n }\n };\n initialize();\n }, []); // Only run once on mount\n\n return {\n lazyLoadingEnabled,\n enabledPacks,\n packInfo,\n loadedIcons,\n togglePack,\n toggleLazyLoading,\n loadAllPacks,\n loadPacksForDiagram,\n isPackEnabled: (packName: IconPackName) => enabledPacks.includes(packName)\n };\n};\n" }, { "path": "packages/fossflow-app/src/services/storageService.ts", "content": "import { Model } from 'fossflow/dist/types';\n\nexport interface DiagramInfo {\n id: string;\n name: string;\n lastModified: Date;\n size?: number;\n}\n\nexport interface StorageService {\n isAvailable(): Promise;\n listDiagrams(): Promise;\n loadDiagram(id: string): Promise;\n saveDiagram(id: string, data: Model): Promise;\n deleteDiagram(id: string): Promise;\n createDiagram(data: Model): Promise;\n}\n\n// Server Storage Implementation\nclass ServerStorage implements StorageService {\n private baseUrl: string;\n private available: boolean | null = null;\n private availabilityCheckedAt: number | null = null;\n private readonly AVAILABILITY_CACHE_MS = 60000; // Re-check every 60 seconds\n\n constructor(baseUrl: string = '') {\n // In production (Docker), use relative paths (nginx proxy)\n // In development, use localhost:3001\n const isDevelopment = window.location.hostname === 'localhost' && window.location.port === '3000';\n this.baseUrl = baseUrl || (isDevelopment ? 'http://localhost:3001' : '');\n }\n\n async isAvailable(): Promise {\n // Re-check availability if cache is stale\n const now = Date.now();\n if (this.available !== null &&\n this.availabilityCheckedAt !== null &&\n (now - this.availabilityCheckedAt) < this.AVAILABILITY_CACHE_MS) {\n return this.available;\n }\n\n try {\n const response = await fetch(`${this.baseUrl}/api/storage/status`, {\n method: 'GET',\n headers: { 'Content-Type': 'application/json' },\n signal: AbortSignal.timeout(5000) // 5 second timeout\n });\n const data = await response.json();\n this.available = data.enabled;\n this.availabilityCheckedAt = Date.now();\n console.log(`Server storage availability: ${this.available}`);\n return this.available ?? false;\n } catch (error) {\n console.log('Server storage not available:', error);\n this.available = false;\n this.availabilityCheckedAt = Date.now();\n return false;\n }\n }\n\n async listDiagrams(): Promise {\n console.log(`Fetching diagrams from: ${this.baseUrl}/api/diagrams`);\n const response = await fetch(`${this.baseUrl}/api/diagrams`);\n console.log(`Response status: ${response.status}`);\n\n if (!response.ok) {\n const errorText = await response.text();\n console.error('Failed to list diagrams:', errorText);\n throw new Error(`Failed to list diagrams: ${response.status} ${errorText}`);\n }\n\n const diagrams = await response.json();\n console.log(`Received ${diagrams.length} diagrams from server:`, diagrams);\n\n return diagrams.map((d: any) => ({\n ...d,\n lastModified: new Date(d.lastModified)\n }));\n }\n\n async loadDiagram(id: string): Promise {\n console.log(`ServerStorage: Loading diagram ${id} from ${this.baseUrl}/api/diagrams/${id}`);\n try {\n const response = await fetch(`${this.baseUrl}/api/diagrams/${id}`, {\n method: 'GET',\n headers: { 'Content-Type': 'application/json' },\n signal: AbortSignal.timeout(10000) // 10 second timeout\n });\n\n if (!response.ok) {\n const errorText = await response.text();\n console.error(`ServerStorage: Failed to load diagram ${id}: ${response.status} ${errorText}`);\n throw new Error(`Failed to load diagram: ${response.status} ${errorText}`);\n }\n\n const data = await response.json();\n console.log(`ServerStorage: Successfully loaded diagram ${id}, items: ${data.items?.length || 0}`);\n return data;\n } catch (error) {\n console.error(`ServerStorage: Error loading diagram ${id}:`, error);\n throw error;\n }\n }\n\n async saveDiagram(id: string, data: Model): Promise {\n console.log(`ServerStorage: Saving diagram ${id}`);\n try {\n const response = await fetch(`${this.baseUrl}/api/diagrams/${id}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data),\n signal: AbortSignal.timeout(15000) // 15 second timeout for saves\n });\n\n if (!response.ok) {\n const errorText = await response.text();\n console.error(`ServerStorage: Failed to save diagram ${id}: ${response.status} ${errorText}`);\n throw new Error(`Failed to save diagram: ${response.status}`);\n }\n\n console.log(`ServerStorage: Successfully saved diagram ${id}`);\n } catch (error) {\n console.error(`ServerStorage: Error saving diagram ${id}:`, error);\n throw error;\n }\n }\n\n async deleteDiagram(id: string): Promise {\n const response = await fetch(`${this.baseUrl}/api/diagrams/${id}`, {\n method: 'DELETE'\n });\n if (!response.ok) throw new Error('Failed to delete diagram');\n }\n\n async createDiagram(data: Model): Promise {\n const response = await fetch(`${this.baseUrl}/api/diagrams`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data)\n });\n if (!response.ok) throw new Error('Failed to create diagram');\n const result = await response.json();\n return result.id;\n }\n}\n\n// Session Storage Implementation (existing functionality)\nclass SessionStorage implements StorageService {\n private readonly KEY_PREFIX = 'fossflow_diagram_';\n private readonly LIST_KEY = 'fossflow_diagrams';\n\n async isAvailable(): Promise {\n return true; // Session storage is always available\n }\n\n async listDiagrams(): Promise {\n const listStr = sessionStorage.getItem(this.LIST_KEY);\n if (!listStr) return [];\n \n const list = JSON.parse(listStr);\n return list.map((item: any) => ({\n ...item,\n lastModified: new Date(item.lastModified)\n }));\n }\n\n async loadDiagram(id: string): Promise {\n const data = sessionStorage.getItem(`${this.KEY_PREFIX}${id}`);\n if (!data) throw new Error('Diagram not found');\n return JSON.parse(data);\n }\n\n async saveDiagram(id: string, data: Model): Promise {\n sessionStorage.setItem(`${this.KEY_PREFIX}${id}`, JSON.stringify(data));\n \n // Update list\n const list = await this.listDiagrams();\n const existing = list.findIndex(d => d.id === id);\n const info: DiagramInfo = {\n id,\n name: (data as any).name || 'Untitled Diagram',\n lastModified: new Date(),\n size: JSON.stringify(data).length\n };\n \n if (existing >= 0) {\n list[existing] = info;\n } else {\n list.push(info);\n }\n \n sessionStorage.setItem(this.LIST_KEY, JSON.stringify(list));\n }\n\n async deleteDiagram(id: string): Promise {\n sessionStorage.removeItem(`${this.KEY_PREFIX}${id}`);\n \n // Update list\n const list = await this.listDiagrams();\n const filtered = list.filter(d => d.id !== id);\n sessionStorage.setItem(this.LIST_KEY, JSON.stringify(filtered));\n }\n\n async createDiagram(data: Model): Promise {\n const id = `diagram_${Date.now()}`;\n await this.saveDiagram(id, data);\n return id;\n }\n}\n\n// Storage Manager - decides which storage to use\nclass StorageManager {\n private serverStorage: ServerStorage;\n private sessionStorage: SessionStorage;\n private activeStorage: StorageService | null = null;\n\n constructor() {\n this.serverStorage = new ServerStorage();\n this.sessionStorage = new SessionStorage();\n }\n\n async initialize(): Promise {\n // Try server storage first\n if (await this.serverStorage.isAvailable()) {\n console.log('Using server storage');\n this.activeStorage = this.serverStorage;\n } else {\n console.log('Using session storage');\n this.activeStorage = this.sessionStorage;\n }\n return this.activeStorage;\n }\n\n getStorage(): StorageService {\n if (!this.activeStorage) {\n throw new Error('Storage not initialized. Call initialize() first.');\n }\n return this.activeStorage;\n }\n\n isServerStorage(): boolean {\n return this.activeStorage === this.serverStorage;\n }\n}\n\n// Export singleton instance\nexport const storageManager = new StorageManager();" }, { "path": "packages/fossflow-app/src/usePersistedDiagram.ts", "content": "import { useState, useEffect, useCallback } from 'react';\nimport { DiagramData } from './diagramUtils';\n\ninterface PersistedDiagramData extends Omit {\n // We omit icons from persisted data to save space\n}\n\nexport const usePersistedDiagram = (icons: any[]) => {\n // Helper to add icons back to diagram data\n const addIconsToDiagram = useCallback((data: PersistedDiagramData): DiagramData => {\n return {\n ...data,\n icons: icons\n };\n }, [icons]);\n\n // Helper to remove icons before persisting\n const removeIconsFromDiagram = useCallback((data: DiagramData): PersistedDiagramData => {\n const { icons: _, ...dataWithoutIcons } = data;\n return dataWithoutIcons;\n }, []);\n\n // Safe localStorage operations\n const safeSetItem = useCallback((key: string, value: string) => {\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (e) {\n console.error(`Failed to save to localStorage (${key}):`, e);\n if (e instanceof DOMException && e.name === 'QuotaExceededError') {\n // Try to clear some space\n const keysToCheck = ['fossflow-last-opened-data', 'fossflow-temp-data'];\n keysToCheck.forEach(k => {\n if (k !== key) {\n localStorage.removeItem(k);\n }\n });\n // Try again\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (e2) {\n console.error('Still failed after clearing space:', e2);\n return false;\n }\n }\n return false;\n }\n }, []);\n\n const safeGetItem = useCallback((key: string): string | null => {\n try {\n return localStorage.getItem(key);\n } catch (e) {\n console.error(`Failed to read from localStorage (${key}):`, e);\n return null;\n }\n }, []);\n\n return {\n addIconsToDiagram,\n removeIconsFromDiagram,\n safeSetItem,\n safeGetItem\n };\n};" }, { "path": "packages/fossflow-app/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"noEmit\": true,\n \"target\": \"es5\"\n },\n \"include\": [\n \"src/**/*\"\n ]\n}" }, { "path": "packages/fossflow-backend/package.json", "content": "{\n \"name\": \"fossflow-backend\",\n \"version\": \"1.10.8\",\n \"description\": \"Optional backend server for FossFLOW persistent storage\",\n \"main\": \"server.js\",\n \"type\": \"module\",\n \"scripts\": {\n \"start\": \"node server.js\",\n \"dev\": \"nodemon server.js\"\n },\n \"dependencies\": {\n \"cors\": \"^2.8.6\",\n \"dotenv\": \"^17.3.1\",\n \"express\": \"^5.2.1\",\n \"uuid\": \"^9.0.1\"\n },\n \"devDependencies\": {\n \"nodemon\": \"^3.1.14\"\n }\n}\n" }, { "path": "packages/fossflow-backend/server.js", "content": "import express from 'express';\nimport cors from 'cors';\nimport fs from 'fs/promises';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\nimport dotenv from 'dotenv';\n\n// Load environment variables\ndotenv.config();\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst app = express();\nconst PORT = process.env.BACKEND_PORT || 3001;\n\n// Configuration from environment variables\nconst STORAGE_ENABLED = process.env.ENABLE_SERVER_STORAGE === 'true';\nconst STORAGE_PATH = process.env.STORAGE_PATH || '/data/diagrams';\nconst ENABLE_GIT_BACKUP = process.env.ENABLE_GIT_BACKUP === 'true';\n\n// Middleware\napp.use(cors());\napp.use(express.json({ limit: '10mb' }));\n\n// Health check / Storage status endpoint\napp.get('/api/storage/status', (req, res) => {\n res.json({\n enabled: STORAGE_ENABLED,\n gitBackup: ENABLE_GIT_BACKUP,\n version: '1.0.0'\n });\n});\n\n// Only enable storage endpoints if storage is enabled\nif (STORAGE_ENABLED) {\n // Ensure storage directory exists\n async function ensureStorageDir() {\n try {\n await fs.access(STORAGE_PATH);\n console.log(`Storage directory exists: ${STORAGE_PATH}`);\n\n // Log current files\n const files = await fs.readdir(STORAGE_PATH);\n console.log(`Current files in storage: ${files.length} files`);\n if (files.length > 0) {\n console.log('Files:', files.join(', '));\n }\n } catch {\n console.log(`Creating storage directory: ${STORAGE_PATH}`);\n await fs.mkdir(STORAGE_PATH, { recursive: true });\n console.log(`Created storage directory: ${STORAGE_PATH}`);\n }\n }\n\n // Initialize storage\n ensureStorageDir().catch((err) => {\n console.error('Failed to initialize storage:', err);\n });\n\n // List all diagrams\n app.get('/api/diagrams', async (req, res) => {\n try {\n // First check if storage directory exists\n try {\n await fs.access(STORAGE_PATH);\n } catch (err) {\n console.error(`Storage directory does not exist: ${STORAGE_PATH}`);\n return res.json([]); // Return empty array if directory doesn't exist\n }\n\n const files = await fs.readdir(STORAGE_PATH);\n console.log(`Found ${files.length} files in ${STORAGE_PATH}:`, files);\n const diagrams = [];\n\n for (const file of files) {\n if (file.endsWith('.json') && file !== 'metadata.json') {\n try {\n const filePath = path.join(STORAGE_PATH, file);\n const stats = await fs.stat(filePath);\n const content = await fs.readFile(filePath, 'utf-8');\n const data = JSON.parse(content);\n\n // Extract name from various possible locations\n const name = data.name || data.title || 'Untitled Diagram';\n\n console.log(`Successfully read diagram: ${file} (name: ${name})`);\n\n diagrams.push({\n id: file.replace('.json', ''),\n name: name,\n lastModified: stats.mtime,\n size: stats.size\n });\n } catch (fileError) {\n console.error(`Error reading diagram file ${file}:`, fileError.message);\n // Skip this file and continue with others\n continue;\n }\n }\n }\n\n console.log(`Returning ${diagrams.length} diagrams`);\n res.json(diagrams);\n } catch (error) {\n console.error('Error listing diagrams:', error);\n res.status(500).json({ error: 'Failed to list diagrams', details: error.message });\n }\n });\n\n // Get specific diagram\n app.get('/api/diagrams/:id', async (req, res) => {\n const diagramId = req.params.id;\n console.log(`[GET /api/diagrams/${diagramId}] Loading diagram...`);\n\n try {\n const filePath = path.join(STORAGE_PATH, `${diagramId}.json`);\n console.log(`[GET /api/diagrams/${diagramId}] Reading from: ${filePath}`);\n\n const content = await fs.readFile(filePath, 'utf-8');\n const data = JSON.parse(content);\n\n console.log(`[GET /api/diagrams/${diagramId}] Successfully loaded, size: ${content.length} bytes, items: ${data.items?.length || 0}`);\n res.json(data);\n } catch (error) {\n if (error.code === 'ENOENT') {\n console.error(`[GET /api/diagrams/${diagramId}] Diagram not found`);\n res.status(404).json({ error: 'Diagram not found' });\n } else {\n console.error(`[GET /api/diagrams/${diagramId}] Error reading diagram:`, error);\n res.status(500).json({ error: 'Failed to read diagram' });\n }\n }\n });\n\n // Save or update diagram\n app.put('/api/diagrams/:id', async (req, res) => {\n const diagramId = req.params.id;\n console.log(`[PUT /api/diagrams/${diagramId}] Saving diagram...`);\n\n try {\n const filePath = path.join(STORAGE_PATH, `${diagramId}.json`);\n const data = {\n ...req.body,\n id: diagramId,\n lastModified: new Date().toISOString()\n };\n\n const iconCount = data.icons?.length || 0;\n const importedIconCount = (data.icons || []).filter(icon => icon.collection === 'imported').length;\n console.log(`[PUT /api/diagrams/${diagramId}] Writing to: ${filePath}`);\n console.log(`[PUT /api/diagrams/${diagramId}] Items: ${data.items?.length || 0}, Icons: ${iconCount} (${importedIconCount} imported)`);\n\n await fs.writeFile(filePath, JSON.stringify(data, null, 2));\n console.log(`[PUT /api/diagrams/${diagramId}] Successfully saved`);\n\n // Git backup if enabled\n if (ENABLE_GIT_BACKUP) {\n // TODO: Implement git commit\n console.log('[PUT] Git backup not yet implemented');\n }\n\n res.json({ success: true, id: diagramId });\n } catch (error) {\n console.error(`[PUT /api/diagrams/${diagramId}] Error saving diagram:`, error);\n res.status(500).json({ error: 'Failed to save diagram' });\n }\n });\n\n // Delete diagram\n app.delete('/api/diagrams/:id', async (req, res) => {\n try {\n const filePath = path.join(STORAGE_PATH, `${req.params.id}.json`);\n await fs.unlink(filePath);\n \n res.json({ success: true });\n } catch (error) {\n if (error.code === 'ENOENT') {\n res.status(404).json({ error: 'Diagram not found' });\n } else {\n console.error('Error deleting diagram:', error);\n res.status(500).json({ error: 'Failed to delete diagram' });\n }\n }\n });\n\n // Create a new diagram\n app.post('/api/diagrams', async (req, res) => {\n try {\n const id = req.body.id || `diagram_${Date.now()}`;\n const filePath = path.join(STORAGE_PATH, `${id}.json`);\n \n // Check if already exists\n try {\n await fs.access(filePath);\n return res.status(409).json({ error: 'Diagram already exists' });\n } catch {\n // File doesn't exist, proceed\n }\n \n const data = {\n ...req.body,\n id,\n created: new Date().toISOString(),\n lastModified: new Date().toISOString()\n };\n \n await fs.writeFile(filePath, JSON.stringify(data, null, 2));\n res.status(201).json({ success: true, id });\n } catch (error) {\n console.error('Error creating diagram:', error);\n res.status(500).json({ error: 'Failed to create diagram' });\n }\n });\n\n} else {\n // Storage disabled - return appropriate responses\n app.get('/api/diagrams', (req, res) => {\n res.status(503).json({ error: 'Server storage is disabled' });\n });\n \n app.get('/api/diagrams/:id', (req, res) => {\n res.status(503).json({ error: 'Server storage is disabled' });\n });\n \n app.put('/api/diagrams/:id', (req, res) => {\n res.status(503).json({ error: 'Server storage is disabled' });\n });\n \n app.delete('/api/diagrams/:id', (req, res) => {\n res.status(503).json({ error: 'Server storage is disabled' });\n });\n \n app.post('/api/diagrams', (req, res) => {\n res.status(503).json({ error: 'Server storage is disabled' });\n });\n}\n\n// Start server\napp.listen(PORT, () => {\n console.log(`FossFLOW Backend Server running on port ${PORT}`);\n console.log(`Server storage: ${STORAGE_ENABLED ? 'ENABLED' : 'DISABLED'}`);\n if (STORAGE_ENABLED) {\n console.log(`Storage path: ${STORAGE_PATH}`);\n console.log(`Git backup: ${ENABLE_GIT_BACKUP ? 'ENABLED' : 'DISABLED'}`);\n }\n});" }, { "path": "packages/fossflow-lib/.gitignore", "content": "dist\n" }, { "path": "packages/fossflow-lib/LICENSE", "content": "MIT License\n\nCopyright (c) 2025 Mark Mankarious\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "packages/fossflow-lib/docs/.gitignore", "content": "node_modules\n.next" }, { "path": "packages/fossflow-lib/docs/next-env.d.ts", "content": "/// \n/// \n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n" }, { "path": "packages/fossflow-lib/docs/next.config.js", "content": "const withNextra = require('nextra')({\n theme: 'nextra-theme-docs',\n themeConfig: './theme.config.tsx',\n basePath: '/docs',\n});\n\nmodule.exports = withNextra();\n" }, { "path": "packages/fossflow-lib/docs/package.json", "content": "{\n \"name\": \"isoflow-docs\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"dev\": \"next dev -p 3002\",\n \"build\": \"next build\",\n \"start\": \"next start -p 3002\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"next\": \"^15.5.10\",\n \"nextra\": \"^4.3.0\",\n \"nextra-theme-docs\": \"^4.3.0\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n }\n}\n" }, { "path": "packages/fossflow-lib/docs/pages/_meta.json", "content": "{\n \"docs\": \"Isoflow Community Edition\"\n}" }, { "path": "packages/fossflow-lib/docs/pages/docs/_meta.json", "content": "{\n \"index\": \"About the Community Edition\",\n \"installation\": \"Installation\",\n \"quickstart\": \"Quick start\",\n \"isopacks\": \"Loading Isopacks\",\n \"api\": \"API\",\n \"contributing\": \"Contributing\"\n}" }, { "path": "packages/fossflow-lib/docs/pages/docs/api/_meta.json", "content": "{\n \"index\": \"Props\",\n \"initialData\": \"InitialData\"\n}" }, { "path": "packages/fossflow-lib/docs/pages/docs/api/index.mdx", "content": "# Props\n\n| Name | Type | Description | Default |\n| --- | --- | --- | --- |\n| `initialData` | [`object`](/docs/api/initialData) | The initial data that Isoflow will render. If `undefined`, isoflow loads a blank scene. | `undefined` |\n| `width` | `number` \\| `string` | Width of the Isoflow renderer as a CSS value. | `100%` |\n| `height` | `number` \\| `string` | Height of the Isoflow renderer as a CSS value. | `100%` |\n| `onModelUpdated` | `function` | A callback that is triggered whenever an item is added, updated or removed from the Model. The callback is called with the updated Model as the first argument. | `undefined` |\n| `enableDebugTools` | `boolean` | Enables extra tools for debugging purposes. | `false` |\n| `editorMode` | `\"EXPLORABLE_READONLY\"` \\| `\"NON_INTERACTIVE\"` \\| `\"EDITABLE\"` | Enables / disables editor features. | `\"EDITABLE\"` |\n| `mainMenuOptions` | `(\"ACTION.OPEN\" \\| \"EXPORT.JSON\" \\| \"EXPORT.PNG\" \\| \"ACTION.CLEAR_CANVAS\" \\| \"LINK.GITHUB\" \\| \"LINK.DISCORD\" \\| \"VERSION\")[]` | Shows / hides options in the main menu. If `[]` is passed, the menu is hidden. | All enabled |\n| `renderer` | [`RendererProps`](#rendererprops) | Configuration for the renderer component. | `undefined` |\n\n## RendererProps\n\n| Name | Type | Description | Default |\n| --- | --- | --- | --- |\n| `showGrid` | `boolean` | Controls whether the grid is visible. | `undefined` |\n| `backgroundColor` | `string` | Sets the background color of the renderer. | `undefined` |" }, { "path": "packages/fossflow-lib/docs/pages/docs/api/initialData.mdx", "content": "# `initialData`\n\nThe `initialData` object contains the following properties:\n\n| Name | Type | Default |\n| --- | --- | --- |\n| `version` | `string \\| undefined` | `undefined` |\n| `title` | `string \\| undefined` | `undefined` |\n| `description` | `string \\| undefined` | `undefined` |\n| `icons` | [`Icon[]`](#icon) | `[]` |\n| `colors` | [`Color[]`](#color) | `[]` |\n| `items` | [`Item[]`](#item) | `[]` |\n| `views` | [`View[]`](#view) | `[]` |\n| `fitToView` | `boolean` | `false` |\n| `view` | `string \\| undefined` | `undefined` |\n\n## Example payload\nAn example payload can be found here on [CodeSandbox](https://codesandbox.io/p/sandbox/github/markmanx/isoflow/tree/main).\n\n## `Icon`\n\n```js\n{\n id: string;\n name: string;\n url: string;\n collection?: string;\n isIsometric?: boolean;\n}\n```\n\n**Notes on Icons:**\n- `collection` is an optional property that can be used to group icons together in the icon picker. All icons with the same `collection` will be grouped together under the collection's name.\n- If you are using a non-isometric icon image, you can set `isIsometric` to `false` to render it with an isometric perpective and help it blend into the scene.\n\n## `Color`\n\n```js\n{\n id: string;\n value: string;\n}\n```\n\n**Notes on Colors:**\nThe `value` property accepts any color value in a CSS acceptable format (e.g. a hex value like `#000000`, a string value for example `black` or an rgba value for example `rgba(0, 0, 0, 1)`).\n\n## `Item`\n\n```js\n{\n id: string;\n name: string;\n description?: string;\n icon: string;\n}\n```\n\n**Notes on Items:**\n- The `description` property can accept markdown.\n- The `icon` property accepts the `id` of an `Icon`.\n\n## `View`\n\n```js\n{\n id: string;\n name: string;\n description?: string;\n items: ViewItem[];\n rectangles?: Rectangle[];\n connectors?: Connector[];\n textBoxes?: TextBox[];\n}\n```\n\n**Notes on Views:**\n- The `description` property can accept markdown.\n\n## `ViewItem`\n\n```js\n{\n id: string;\n labelHeight?: number;\n tile: {\n x: number;\n y: number;\n }\n}\n```\n\n**Notes on ViewItems:**\n- The `id` property accepts the `id` of an `Item` (defined at root level).\n\n## `Connector`\n\n```js\n{\n id: string;\n description?: string;\n color?: string;\n width?: number;\n style?: 'SOLID' | 'DOTTED' | 'DASHED';\n anchors: ConnectorAnchor[];\n}\n```\n\n**Notes on connectors:**\n- The `color` property accepts an `id` of a `Color` (defined at root level).\n- A connector needs a minimum of 2 anchors to determine where it starts and ends. If you want more control over the connector's path you can specify additional anchors that the connector will pass through.\n\n## `ConnectorAnchor`\n\n```js\nid: string;\nref: \n | {\n tile: {\n x: number;\n y: number;\n }\n }\n | {\n item: string;\n }\n```\n\n**Notes on ConnectorAnchors**\n- Connector anchors can reference either a `tile` or an `item`. If the reference is to an `item`, the anchor is dynamic and will be tied to the item's position.\n- When anchoring a connector to an `item`, you must specify the `id` of the of the item being referred to.\n\n## `Rectangle`\n\n```js\n{\n id: string;\n color?: string;\n from: {\n x: number;\n y: number;\n };\n to: {\n x: number;\n y: number;\n };\n}\n```\n\n## `TextBox`\n\n```js\n{\n id: string;\n tile: {\n x: number;\n y: number;\n };\n content: string;\n fontSize?: number;\n orientation?: 'X' | 'Y';\n}\n```\n\n## `fitToView`\n\n```js\nboolean\n```\n\n**Notes on fitToView:**\n- When set to `true`, the scene will automatically fit to the viewport when loaded.\n- This is useful for ensuring the entire diagram is visible when the component first renders.\n\n## `view`\n\n```js\nstring | undefined\n```\n\n**Notes on view:**\n- Specifies which view to display initially by providing the view's `id`.\n- If `undefined`, no specific view will be selected on load.\n- The view must exist in the `views` array for this to work.\n\n## Validation\nThe `initialData` object is validated before Isoflow renders the scene, and an error is thrown if invalid data is detected.\n\nExamples of common errors are as follows:\n- A `ConnectorAnchor` references an `Item` that does not exist.\n- An `Item` references an `Icon` that does not exist.\n- A `Rectangle` has a `from` but not a `to` property.\n- A `Connector` has less than 2 anchors.\n" }, { "path": "packages/fossflow-lib/docs/pages/docs/contributing.mdx", "content": "# Contributing\n\n### Branching Strategy:\n\nBranches are named using the following convention:\n\n- `feature/` for new feature implementations\n- `fix/` for broken code / build / bug fixes\n- `chore/` non-breaking & non-fixing code changes such as linting, formatting, etc.\n\n### Commit / PR Strategy:\n\n- Commits are to be squashed prior to merge\n- PRs are to target a singular issue in order to keep the commit history clean and easy to follow\n\n### Deploying to NPM\n\nCI is sensitive to any tag pushed to `main` branch. It will build and deploy the app to NPM.\nTo deploy:\n\n1. Bump the version using `npm version patch` or similar\n2. `git push && git push --tags`\n\n## License\n\nIsoflow is MIT licensed (see [./LICENSE](https://github.com/markmanx/isoflow/blob/main/LICENSE)).\n" }, { "path": "packages/fossflow-lib/docs/pages/docs/index.mdx", "content": "# About\nIsoflow is an open-core project. We offer the [Isoflow Community Edition](https://github.com/markmanx/isoflow) as fully-functional, open-source software under the MIT license. In addition, we also support our development efforts by offering **Isoflow Pro** with additional features for commercial use. You can read more about the differences between Pro and the Community Edition [here](https://isoflow.io/pro-vs-community-edition)." }, { "path": "packages/fossflow-lib/docs/pages/docs/installation.mdx", "content": "# Installation\n\nIsoflow is published as a **React component** you can embed into your project.\n\nTo install using `npm`:\n\n```bash\nnpm install isoflow\n```\n\nor `yarn`:\n\n```bash\nyarn add isoflow\n```\n\n### Demo\n\nThe latest version of Isoflow is always synced here on [CodeSandbox](https://codesandbox.io/p/sandbox/github/markmanx/isoflow).\n\n### Running Isoflow in development mode\nTo run Isoflow on your local machine:\n\n1. Clone the [Github repository](https://github.com/markmanx/isoflow).\n2. `npm i`\n3. `npm run start`.\n\n### Developer documentation\nFor detailed API documentation, examples and more, see the online [developer documentation](https://v2.isoflow.io/docs). You can also build and run the docs locally:\n\n- `npm run docs:build`\n- `npm run docs:start`" }, { "path": "packages/fossflow-lib/docs/pages/docs/isopacks.mdx", "content": "# Isopacks\n\n**Isopacks** are add-on modules for Isoflow that contain icons and other assets. You can easily build your own from scratch or create and load your own.\n\n### Cloud & Network Isopacks\n\nThese are available as a separately maintained project on [Github](https://github.com/markmanx/isopacks).\nBelow is a sample of icons available in the **Isoflow** Isopack:\n\n
\n\"server\"\n\"storage\"\n\"switch\"\n
\n\nIn addition, Isopacks for **AWS**, **Azure**, **GCP**, and **Kubernetes** are included.\nYou can choose which Isopacks to import into your app and which to leave out.\n\n### Loading Isopacks into Isoflow\n\n1. Install the `npm` package:\n\n```bash\nnpm i @isoflow/isopacks\n```\n\n2. Import your selected Isopacks:\n\n```jsx showLineNumbers\nimport Isoflow from 'isoflow';\nimport { flattenCollections } from '@isoflow/isopacks/dist/utils';\nimport isoflowIsopack from '@isoflow/isopacks/dist/isoflow';\nimport awsIsopack from '@isoflow/isopacks/dist/aws';\nimport gcpIsopack from '@isoflow/isopacks/dist/gcp';\nimport azureIsopack from '@isoflow/isopacks/dist/azure';\nimport kubernetesIsopack from '@isoflow/isopacks/dist/kubernetes';\n\nconst icons = flattenCollections([\n isoflowIsopack,\n awsIsopack,\n azureIsopack,\n gcpIsopack,\n kubernetesIsopack\n]);\n\nconst App = () => {\n return (\n \n );\n}\n\nexport default App;\n```\n\n## Usage without Isoflow\n\nIsopacks can also be used without Isoflow or React (for example, you can simply drag and drop the images into slides or documents, or import into your vanilla Javascript / Typescript project).\nSee the [Isopacks Github project](https://github.com/markmanx/isopacks) for more information.\n\n## Self-hosting vs importing icons\n\nWhile you can import the icon images directly into your JS or TS application, it is recommended that you host the icon images yourself so that they can be lazy-loaded (referencing them via URL from a service like S3 or a CDN).\n" }, { "path": "packages/fossflow-lib/docs/pages/docs/quickstart.mdx", "content": "# Quick Start\n\nIsoflow can be imported as an ES6 module:\n\n```jsx\nimport Isoflow from \"isoflow\";\n```\n\n### Basic usage\n\n```jsx showLineNumbers\nimport React from 'react';\nimport Isoflow from 'isoflow';\n\nconst App = () => {\n return (\n \n );\n}\n\nexport default App;\n```\n\n**Note**: this will display a blank Isoflow editor, without icons (which is not very useful!). To initialise the editor with an iconset, see [Loading Isopacks](/docs/isopacks).\n\n### Dimensions of Isoflow\n\nIsoflow takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Isoflow in has non-zero dimensions.\n\n### Integration with NextJS\n\nIsoflow cannot be server-side rendered and has to be imported using `next/dynamic`:\n\n```jsx showLineNumbers filename=\"IsoflowDynamic.jsx\"\nimport dynamic from 'next/dynamic';\n\nexport const IsoflowDynamic = dynamic(() => {\n return import('isoflow');\n },\n {\n ssr: false\n }\n);\n```\n\n```jsx showLineNumbers filename=\"App.jsx\"\nimport { IsoflowDynamic } from './IsoflowDynamic';\n\nconst App = () => {\n return (\n \n );\n}\n\nexport default App;\n```" }, { "path": "packages/fossflow-lib/docs/pages/index.tsx", "content": "import { useEffect } from 'react';\nimport { useRouter } from 'next/router';\n\nexport default function Home() {\n const { push } = useRouter();\n\n useEffect(() => {\n push('/docs');\n }, [push]);\n\n return null;\n}\n" }, { "path": "packages/fossflow-lib/docs/theme.config.tsx", "content": "import React from 'react';\n\nexport default {\n darkMode: false,\n logo: () => {\n return (\n \n Isoflow Developer Documentation\n \n );\n },\n nextThemes: {\n defaultTheme: 'light'\n },\n project: {\n link: 'https://github.com/markmanx/isoflow'\n },\n feedback: {\n content: null\n },\n editLink: {\n component: () => {\n return null;\n }\n },\n footer: {\n component: null\n }\n};\n" }, { "path": "packages/fossflow-lib/docs/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": false,\n \"noEmit\": true,\n \"incremental\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\"\n },\n \"include\": [\n \"next-env.d.ts\",\n \"**/*.ts\",\n \"**/*.tsx\"\n ],\n \"exclude\": [\n \"node_modules\"\n ]\n}\n" }, { "path": "packages/fossflow-lib/jest.config.js", "content": "/** @type {import('ts-jest').JestConfigWithTsJest} */\nmodule.exports = {\n preset: \"ts-jest\",\n testEnvironment: \"jsdom\",\n modulePaths: ['node_modules', ''],\n setupFilesAfterEnv: ['/jest.setup.js'],\n moduleNameMapper: {\n // Force React to resolve from root node_modules to avoid duplicate React instances\n \"^react$\": \"/../../node_modules/react\",\n \"^react-dom$\": \"/../../node_modules/react-dom\",\n \"^react-dom/client$\": \"/../../node_modules/react-dom/client\",\n \"^react/jsx-runtime$\": \"/../../node_modules/react/jsx-runtime\",\n \"^react/jsx-dev-runtime$\": \"/../../node_modules/react/jsx-dev-runtime\"\n },\n testPathIgnorePatterns: [\n '/node_modules/',\n '/dist/',\n '\\\\.d\\\\.ts$'\n ],\n coverageDirectory: 'coverage',\n collectCoverageFrom: [\n 'src/**/*.{ts,tsx}',\n '!src/**/*.d.ts',\n '!src/**/*.test.{ts,tsx}',\n '!src/**/__tests__/**',\n '!src/types/**',\n '!src/index.ts'\n ],\n coverageThreshold: {\n global: {\n branches: 10,\n functions: 10,\n lines: 10,\n statements: 10\n }\n },\n coverageReporters: ['json', 'lcov', 'text', 'html']\n};\n" }, { "path": "packages/fossflow-lib/jest.setup.js", "content": "require('@testing-library/jest-dom'); " }, { "path": "packages/fossflow-lib/package.json", "content": "{\n \"name\": \"fossflow\",\n \"version\": \"1.10.8\",\n \"private\": false,\n \"description\": \"An open-source React component for drawing network diagrams - forked from isoflow.\",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/stan-smith/FossFLOW.git\"\n },\n \"main\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.ts\",\n \"files\": [\n \"dist\"\n ],\n \"scripts\": {\n \"start\": \"rslib build --watch\",\n \"dev\": \"rslib build --watch\",\n \"build\": \"rslib build && tsc --project tsconfig.declaration.json && tsc-alias\",\n \"build:watch\": \"rslib build --watch\",\n \"test\": \"jest\",\n \"lint\": \"tsc --noEmit\",\n \"clean\": \"rm -rf dist\",\n \"prepublishOnly\": \"npm run clean && npm run build\"\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@mui/icons-material\": \"^5.18.0\",\n \"@mui/material\": \"^5.18.0\",\n \"auto-bind\": \"^5.0.1\",\n \"chroma-js\": \"^3.2.0\",\n \"dom-to-image\": \"^2.6.0\",\n \"file-saver\": \"^2.0.5\",\n \"gsap\": \"^3.14.2\",\n \"immer\": \"^11.1.4\",\n \"mui-color-input\": \"^2.0.3\",\n \"paper\": \"^0.12.18\",\n \"pathfinding\": \"^0.4.18\",\n \"react-hook-form\": \"^7.71.2\",\n \"react-quill-new\": \"^3.8.3\",\n \"react-router-dom\": \"^6.30.2\",\n \"uuid\": \"^9.0.1\",\n \"zod\": \"^3.25.76\",\n \"zustand\": \"^4.5.7\"\n },\n \"peerDependencies\": {\n \"react\": \">=18\",\n \"react-dom\": \">=18\"\n },\n \"devDependencies\": {\n \"@isoflow/isopacks\": \"^0.0.10\",\n \"@rsbuild/core\": \"^1.7.3\",\n \"@rsbuild/plugin-react\": \"^1.4.6\",\n \"@rslib/core\": \"^0.20.0\",\n \"@testing-library/jest-dom\": \"^6.9.1\",\n \"@testing-library/react\": \"^16.3.2\",\n \"@testing-library/user-event\": \"^14.6.1\",\n \"@types/chroma-js\": \"^3.1.2\",\n \"@types/dom-to-image\": \"^2.6.7\",\n \"@types/file-saver\": \"^2.0.7\",\n \"@types/jest\": \"^29.5.14\",\n \"@types/jsdom\": \"^28.0.0\",\n \"@types/pathfinding\": \"^0.1.0\",\n \"@types/quill\": \"^2.0.14\",\n \"@types/uuid\": \"^9.0.8\",\n \"css-loader\": \"^7.1.4\",\n \"jest\": \"^29.7.0\",\n \"jest-environment-jsdom\": \"^30.3.0\",\n \"jsdom\": \"^29.0.0\",\n \"prettier\": \"^3.8.1\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"recharts\": \"^3.8.0\",\n \"style-loader\": \"^4.0.0\",\n \"ts-jest\": \"^29.4.6\",\n \"tsc-alias\": \"^1.8.16\"\n }\n}\n" }, { "path": "packages/fossflow-lib/rslib.config.ts", "content": "import { defineConfig } from '@rslib/core';\nimport { pluginReact } from '@rsbuild/plugin-react';\n\nconst packageJson = require('./package.json');\n\nexport default defineConfig({\n lib: [\n {\n format: 'cjs',\n syntax: 'es2021',\n output: {\n distPath: { root: './dist' },\n },\n style: {\n inject: false,\n },\n },\n ],\n plugins: [pluginReact()],\n source: {\n entry: {\n index: './src/index.ts',\n },\n define: {\n PACKAGE_VERSION: JSON.stringify(packageJson.version),\n REPOSITORY_URL: JSON.stringify(packageJson.repository.url),\n },\n },\n resolve: {\n alias: {\n src: './src',\n components: './src/components',\n stores: './src/stores',\n styles: './src/styles',\n utils: './src/utils',\n hooks: './src/hooks',\n types: './src/types',\n },\n },\n output: {\n externals: ['react', 'react-dom'],\n target: 'node',\n filename: {\n css: 'styles.css',\n },\n },\n});\n" }, { "path": "packages/fossflow-lib/src/Isoflow.tsx", "content": "import React, { useEffect } from 'react';\nimport { ThemeProvider } from '@mui/material/styles';\nimport { Box } from '@mui/material';\nimport { theme } from 'src/styles/theme';\nimport { IsoflowProps } from 'src/types';\nimport { setWindowCursor, modelFromModelStore } from 'src/utils';\nimport { useModelStore, ModelProvider } from 'src/stores/modelStore';\nimport { SceneProvider } from 'src/stores/sceneStore';\nimport { LocaleProvider } from 'src/stores/localeStore';\nimport { GlobalStyles } from 'src/styles/GlobalStyles';\nimport { Renderer } from 'src/components/Renderer/Renderer';\nimport { UiOverlay } from 'src/components/UiOverlay/UiOverlay';\nimport { UiStateProvider, useUiStateStore } from 'src/stores/uiStateStore';\nimport { INITIAL_DATA, MAIN_MENU_OPTIONS } from 'src/config';\nimport { useInitialDataManager } from 'src/hooks/useInitialDataManager';\nimport enUS from 'src/i18n/en-US';\n\nconst App = ({\n initialData,\n mainMenuOptions = MAIN_MENU_OPTIONS,\n width = '100%',\n height = '100%',\n onModelUpdated,\n enableDebugTools = false,\n editorMode = 'EDITABLE',\n renderer,\n locale = enUS,\n iconPackManager,\n}: IsoflowProps) => {\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const initialDataManager = useInitialDataManager();\n const model = useModelStore((state) => {\n return modelFromModelStore(state);\n });\n\n const { load } = initialDataManager;\n\n useEffect(() => {\n load({ ...INITIAL_DATA, ...initialData });\n }, [initialData, load]);\n\n useEffect(() => {\n uiStateActions.setEditorMode(editorMode);\n uiStateActions.setMainMenuOptions(mainMenuOptions);\n }, [editorMode, uiStateActions, mainMenuOptions]);\n\n useEffect(() => {\n return () => {\n setWindowCursor('default');\n };\n }, []);\n\n useEffect(() => {\n if (!initialDataManager.isReady || !onModelUpdated) return;\n\n onModelUpdated(model);\n }, [model, initialDataManager.isReady, onModelUpdated]);\n\n useEffect(() => {\n uiStateActions.setEnableDebugTools(enableDebugTools);\n }, [enableDebugTools, uiStateActions]);\n\n useEffect(() => {\n if (renderer?.expandLabels !== undefined) {\n uiStateActions.setExpandLabels(renderer.expandLabels);\n }\n }, [renderer?.expandLabels, uiStateActions]);\n\n useEffect(() => {\n uiStateActions.setIconPackManager(iconPackManager || null);\n }, [iconPackManager, uiStateActions]);\n\n if (!initialDataManager.isReady) return null;\n\n return (\n <>\n \n \n \n \n \n \n );\n};\n\nexport const Isoflow = (props: IsoflowProps) => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nconst useIsoflow = () => {\n const rendererEl = useUiStateStore((state) => {\n return state.rendererEl;\n });\n\n const ModelActions = useModelStore((state) => {\n return state.actions;\n });\n\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n\n return {\n Model: ModelActions,\n uiState: uiStateActions,\n rendererEl\n };\n};\n\nexport { useIsoflow };\nexport * from 'src/standaloneExports';\nexport default Isoflow;\n" }, { "path": "packages/fossflow-lib/src/components/Circle/Circle.tsx", "content": "import React from 'react';\nimport { Coords } from 'src/types';\n\ninterface Props {\n tile: Coords;\n radius?: number;\n}\n\nexport const Circle = ({\n tile,\n radius,\n ...rest\n}: Props & React.SVGProps) => {\n return ;\n};\n" }, { "path": "packages/fossflow-lib/src/components/ColorSelector/ColorPicker.tsx", "content": "import {\n MuiColorButtonProps,\n MuiColorInput,\n MuiColorInputProps\n} from 'mui-color-input';\nimport React from 'react';\nimport { ColorSwatch } from './ColorSwatch';\n\ninterface Props extends Omit {}\n\nconst ColorButtonElement = ({ bgColor, onClick }: MuiColorButtonProps) => {\n return ;\n};\nexport const ColorPicker = ({ value, onChange }: Props) => {\n return (\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ColorSelector/ColorSelector.tsx", "content": "import React from 'react';\nimport { Box } from '@mui/material';\nimport { useScene } from 'src/hooks/useScene';\nimport { ColorSwatch } from './ColorSwatch';\n\ninterface Props {\n onChange: (color: string) => void;\n activeColor?: string;\n}\n\nexport const ColorSelector = ({ onChange, activeColor }: Props) => {\n const { colors } = useScene();\n\n return (\n \n {colors.map((color) => {\n return (\n {\n return onChange(color.id);\n }}\n isActive={activeColor === color.id}\n />\n );\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ColorSelector/ColorSwatch.tsx", "content": "import React from 'react';\nimport { Box, Button } from '@mui/material';\n\nexport type Props = {\n hex: string;\n isActive?: boolean;\n onClick: React.MouseEventHandler | undefined;\n};\n\nexport const ColorSwatch = ({ hex, onClick, isActive }: Props) => {\n return (\n \n \n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ColorSelector/CustomColorInput.tsx", "content": "import React, { useState, useEffect } from 'react';\nimport { Box, TextField, IconButton, Tooltip } from '@mui/material';\nimport { Colorize as ColorizeIcon } from '@mui/icons-material';\nimport { ColorPicker } from './ColorPicker';\n\ninterface EyeDropper {\n open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>;\n}\n\ndeclare global {\n interface Window {\n EyeDropper?: {\n new (): EyeDropper;\n };\n }\n}\n\ninterface Props {\n value: string;\n onChange: (color: string) => void;\n}\n\nexport const CustomColorInput = ({ value, onChange }: Props) => {\n const [localValue, setLocalValue] = useState(value);\n\n useEffect(() => {\n setLocalValue(value);\n }, [value]);\n\n const handleEyeDropper = async () => {\n if (!window.EyeDropper) return;\n const eyeDropper = new window.EyeDropper();\n try {\n const result = await eyeDropper.open();\n onChange(result.sRGBHex);\n } catch (e) {\n // User canceled or failed\n }\n };\n\n const handleTextChange = (e: React.ChangeEvent) => {\n const newValue = e.target.value;\n setLocalValue(newValue);\n // If it's a valid hex, update immediately\n if (/^#[0-9A-F]{6}$/i.test(newValue)) {\n onChange(newValue);\n }\n };\n\n const handleBlur = () => {\n // On blur, if invalid, revert to prop value\n if (!/^#[0-9A-F]{6}$/i.test(localValue)) {\n setLocalValue(value);\n }\n };\n\n const hasEyeDropper = typeof window !== 'undefined' && !!window.EyeDropper;\n\n return (\n \n \n \n {hasEyeDropper && (\n \n \n \n \n \n )}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ColorSelector/__tests__/ColorSelector.test.tsx", "content": "import React from 'react';\nimport { render, screen, fireEvent, act } from '@testing-library/react';\nimport '@testing-library/jest-dom';\nimport { ColorSelector } from '../ColorSelector';\nimport { ThemeProvider } from '@mui/material/styles';\nimport { theme } from 'src/styles/theme';\n\n// Mock the useScene hook\nconst mockColors = [\n { id: 'color1', value: '#FF0000', name: 'Red' },\n { id: 'color2', value: '#00FF00', name: 'Green' },\n { id: 'color3', value: '#0000FF', name: 'Blue' },\n { id: 'color4', value: '#FFFF00', name: 'Yellow' },\n { id: 'color5', value: '#FF00FF', name: 'Magenta' }\n];\n\njest.mock('../../../hooks/useScene', () => ({\n useScene: jest.fn(() => ({\n colors: mockColors\n }))\n}));\n\ndescribe('ColorSelector', () => {\n const defaultProps = {\n onChange: jest.fn(),\n activeColor: undefined\n };\n\n const renderComponent = (props = {}) => {\n return render(\n \n \n \n );\n };\n\n beforeEach(() => {\n jest.clearAllMocks();\n });\n\n describe('rendering', () => {\n it('should render all colors from the scene', () => {\n renderComponent();\n \n // Should render a button for each color\n const buttons = screen.getAllByRole('button');\n expect(buttons).toHaveLength(mockColors.length);\n });\n\n it('should render all color swatches', () => {\n renderComponent();\n \n // Should render a button for each color\n const buttons = screen.getAllByRole('button');\n expect(buttons).toHaveLength(mockColors.length);\n \n // Each button should be clickable\n buttons.forEach((button) => {\n expect(button).toBeEnabled();\n });\n });\n\n it('should render empty state when no colors available', () => {\n const useScene = require('../../../hooks/useScene').useScene;\n useScene.mockImplementation(() => ({ colors: [] }));\n \n const { container } = renderComponent();\n \n // Should render container but no buttons\n expect(container.firstChild).toBeInTheDocument();\n expect(screen.queryAllByRole('button')).toHaveLength(0);\n \n // Restore mock\n useScene.mockImplementation(() => ({ colors: mockColors }));\n });\n });\n\n describe('user interactions', () => {\n it('should call onChange with correct color ID when clicked', () => {\n const onChange = jest.fn();\n renderComponent({ onChange });\n \n const buttons = screen.getAllByRole('button');\n \n // Click the first color\n fireEvent.click(buttons[0]);\n expect(onChange).toHaveBeenCalledWith('color1');\n \n // Click the third color\n fireEvent.click(buttons[2]);\n expect(onChange).toHaveBeenCalledWith('color3');\n \n expect(onChange).toHaveBeenCalledTimes(2);\n });\n\n it('should handle multiple rapid clicks', () => {\n const onChange = jest.fn();\n renderComponent({ onChange });\n \n const buttons = screen.getAllByRole('button');\n \n // Rapidly click different colors\n fireEvent.click(buttons[0]);\n fireEvent.click(buttons[1]);\n fireEvent.click(buttons[2]);\n fireEvent.click(buttons[1]);\n \n expect(onChange).toHaveBeenCalledTimes(4);\n expect(onChange).toHaveBeenNthCalledWith(1, 'color1');\n expect(onChange).toHaveBeenNthCalledWith(2, 'color2');\n expect(onChange).toHaveBeenNthCalledWith(3, 'color3');\n expect(onChange).toHaveBeenNthCalledWith(4, 'color2');\n });\n\n it('should be keyboard accessible', () => {\n const onChange = jest.fn();\n renderComponent({ onChange });\n \n const buttons = screen.getAllByRole('button');\n \n // All buttons should be focusable (have tabIndex)\n buttons.forEach((button) => {\n expect(button).toHaveAttribute('tabindex', '0');\n });\n \n // Buttons should respond to clicks (keyboard Enter/Space triggers click)\n fireEvent.click(buttons[0]);\n expect(onChange).toHaveBeenCalledWith('color1');\n \n fireEvent.click(buttons[1]);\n expect(onChange).toHaveBeenCalledWith('color2');\n });\n });\n\n describe('active color indication', () => {\n it('should indicate the active color with scaled transform', () => {\n const { container } = renderComponent({ activeColor: 'color2' });\n \n // Find all buttons (color swatches are inside buttons)\n const buttons = screen.getAllByRole('button');\n expect(buttons).toHaveLength(mockColors.length);\n \n // The second button should contain the active color\n // We can check if the active prop was passed correctly\n const activeButton = buttons[1]; // color2 is at index 1\n \n // Check that ColorSwatch received isActive=true for color2\n // Since we can't easily check transform in JSDOM, we'll verify the component renders\n expect(activeButton).toBeInTheDocument();\n });\n\n it('should update active indication when activeColor prop changes', () => {\n const { rerender } = renderComponent({ activeColor: 'color1' });\n \n let buttons = screen.getAllByRole('button');\n expect(buttons).toHaveLength(mockColors.length);\n \n // Change active color\n rerender(\n \n \n \n );\n \n buttons = screen.getAllByRole('button');\n expect(buttons).toHaveLength(mockColors.length);\n // Verify buttons still render after prop change\n expect(buttons[2]).toBeInTheDocument();\n });\n\n it('should handle no active color', () => {\n renderComponent({ activeColor: undefined });\n \n // All buttons should still render\n const buttons = screen.getAllByRole('button');\n expect(buttons).toHaveLength(mockColors.length);\n buttons.forEach((button) => {\n expect(button).toBeInTheDocument();\n });\n });\n\n it('should handle invalid active color ID gracefully', () => {\n renderComponent({ activeColor: 'invalid-color-id' });\n \n // All buttons should still render even with invalid active color\n const buttons = screen.getAllByRole('button');\n expect(buttons).toHaveLength(mockColors.length);\n buttons.forEach((button) => {\n expect(button).toBeInTheDocument();\n });\n });\n });\n\n describe('edge cases', () => {\n it('should handle color with special characters in hex value', () => {\n const useScene = require('../../../hooks/useScene').useScene;\n useScene.mockImplementation(() => ({\n colors: [\n { id: 'special', value: '#C0FFEE', name: 'Coffee' }\n ]\n }));\n \n const onChange = jest.fn();\n renderComponent({ onChange });\n \n const button = screen.getByRole('button');\n fireEvent.click(button);\n \n expect(onChange).toHaveBeenCalledWith('special');\n \n // Restore mock\n useScene.mockImplementation(() => ({ colors: mockColors }));\n });\n\n it('should handle very long color lists efficiently', () => {\n const useScene = require('../../../hooks/useScene').useScene;\n const manyColors = Array.from({ length: 100 }, (_, i) => ({\n id: `color${i}`,\n value: `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`,\n name: `Color ${i}`\n }));\n \n useScene.mockImplementation(() => ({ colors: manyColors }));\n \n const { container } = renderComponent();\n \n const buttons = screen.getAllByRole('button');\n expect(buttons).toHaveLength(100);\n \n // Restore mock\n useScene.mockImplementation(() => ({ colors: mockColors }));\n });\n\n it('should handle onChange being required properly', () => {\n // onChange is a required prop, so we test with a valid function\n const onChange = jest.fn();\n renderComponent({ onChange });\n \n const buttons = screen.getAllByRole('button');\n \n // Should work normally with onChange provided\n fireEvent.click(buttons[0]);\n expect(onChange).toHaveBeenCalledWith('color1');\n });\n\n it('should handle colors being updated dynamically', () => {\n const useScene = require('../../../hooks/useScene').useScene;\n const onChange = jest.fn();\n \n // Start with 3 colors\n useScene.mockImplementation(() => ({\n colors: mockColors.slice(0, 3)\n }));\n \n const { rerender } = renderComponent({ onChange });\n expect(screen.getAllByRole('button')).toHaveLength(3);\n \n // Update to 5 colors\n useScene.mockImplementation(() => ({\n colors: mockColors\n }));\n \n rerender(\n \n \n \n );\n \n expect(screen.getAllByRole('button')).toHaveLength(5);\n \n // Click the newly added color\n const buttons = screen.getAllByRole('button');\n fireEvent.click(buttons[4]);\n expect(onChange).toHaveBeenCalledWith('color5');\n });\n });\n});" }, { "path": "packages/fossflow-lib/src/components/ColorSelector/__tests__/CustomColorInput.test.tsx", "content": "import React from 'react';\nimport { render, screen, fireEvent, act } from '@testing-library/react';\nimport '@testing-library/jest-dom';\nimport { CustomColorInput } from '../CustomColorInput';\nimport { ThemeProvider } from '@mui/material/styles';\nimport { theme } from 'src/styles/theme';\n\n// Mock ColorPicker since we don't need to test external library behavior\njest.mock('../ColorPicker', () => ({\n ColorPicker: ({ value, onChange }: { value: string; onChange: (color: string) => void }) => (\n
onChange('#FFFFFF')}>\n {value}\n
\n )\n}));\n\ndescribe('CustomColorInput', () => {\n const defaultProps = {\n value: '#FF0000',\n onChange: jest.fn()\n };\n\n const renderComponent = (props = {}) => {\n return render(\n \n \n \n );\n };\n\n beforeEach(() => {\n jest.clearAllMocks();\n });\n\n it('renders correctly with initial value', () => {\n renderComponent();\n const input = screen.getByRole('textbox') as HTMLInputElement;\n expect(input.value).toBe('#FF0000');\n expect(screen.getByTestId('color-picker')).toHaveTextContent('#FF0000');\n });\n\n it('updates input value on change', () => {\n renderComponent();\n const input = screen.getByRole('textbox') as HTMLInputElement;\n \n fireEvent.change(input, { target: { value: '#00FF00' } });\n expect(input.value).toBe('#00FF00');\n });\n\n it('calls onChange when valid hex is entered', () => {\n const onChange = jest.fn();\n renderComponent({ onChange });\n const input = screen.getByRole('textbox');\n \n fireEvent.change(input, { target: { value: '#00FF00' } });\n expect(onChange).toHaveBeenCalledWith('#00FF00');\n });\n\n it('does not call onChange when invalid hex is entered', () => {\n const onChange = jest.fn();\n renderComponent({ onChange });\n const input = screen.getByRole('textbox');\n \n fireEvent.change(input, { target: { value: 'invalid' } });\n expect(onChange).not.toHaveBeenCalled();\n });\n\n it('reverts to prop value on blur if input is invalid', () => {\n renderComponent({ value: '#FF0000' });\n const input = screen.getByRole('textbox') as HTMLInputElement;\n \n fireEvent.change(input, { target: { value: 'invalid' } });\n fireEvent.blur(input);\n \n expect(input.value).toBe('#FF0000');\n });\n\n it('keeps valid value on blur', () => {\n const onChange = jest.fn();\n renderComponent({ value: '#FF0000', onChange });\n const input = screen.getByRole('textbox') as HTMLInputElement;\n \n fireEvent.change(input, { target: { value: '#00FF00' } });\n fireEvent.blur(input);\n \n expect(input.value).toBe('#00FF00');\n expect(onChange).toHaveBeenCalledWith('#00FF00');\n });\n\n it('updates local state when prop value changes', () => {\n const { rerender } = renderComponent({ value: '#FF0000' });\n const input = screen.getByRole('textbox') as HTMLInputElement;\n expect(input.value).toBe('#FF0000');\n\n rerender(\n \n \n \n );\n expect(input.value).toBe('#0000FF');\n });\n\n describe('EyeDropper interaction', () => {\n beforeAll(() => {\n // Mock EyeDropper API\n Object.defineProperty(window, 'EyeDropper', {\n writable: true,\n value: jest.fn().mockImplementation(() => ({\n open: jest.fn().mockResolvedValue({ sRGBHex: '#123456' })\n }))\n });\n });\n\n afterAll(() => {\n // @ts-ignore\n delete window.EyeDropper;\n });\n\n it('renders eyedropper button when API is supported', () => {\n renderComponent();\n expect(screen.getByRole('button', { name: /pick color/i })).toBeInTheDocument();\n });\n\n it('calls onChange with picked color', async () => {\n const onChange = jest.fn();\n renderComponent({ onChange });\n \n const button = screen.getByRole('button', { name: /pick color/i });\n await act(async () => {\n fireEvent.click(button);\n });\n\n expect(onChange).toHaveBeenCalledWith('#123456');\n });\n\n it('handles EyeDropper cancellation gracefully', async () => {\n const onChange = jest.fn();\n // Mock rejection (user cancelled)\n (window.EyeDropper as any).mockImplementation(() => ({\n open: jest.fn().mockRejectedValue(new Error('Canceled'))\n }));\n\n renderComponent({ onChange });\n \n const button = screen.getByRole('button', { name: /pick color/i });\n await act(async () => {\n fireEvent.click(button);\n });\n\n expect(onChange).not.toHaveBeenCalled();\n });\n });\n\n describe('EyeDropper unsupported', () => {\n beforeAll(() => {\n // @ts-ignore\n window.EyeDropper = undefined;\n });\n\n it('does not render eyedropper button when API is not supported', () => {\n renderComponent();\n expect(screen.queryByRole('button', { name: /pick color/i })).not.toBeInTheDocument();\n });\n });\n});\n" }, { "path": "packages/fossflow-lib/src/components/ConnectorEmptySpaceTooltip/ConnectorEmptySpaceTooltip.tsx", "content": "import React, { useState, useEffect, useRef } from 'react';\nimport { Box, Paper, Typography, Fade } from '@mui/material';\nimport { useUiStateStore, useUiStateStoreApi } from 'src/stores/uiStateStore';\nimport { useScene } from 'src/hooks/useScene';\nimport { useTranslation } from 'src/stores/localeStore';\n\nexport const ConnectorEmptySpaceTooltip = () => {\n const { t } = useTranslation('connectorEmptySpaceTooltip');\n const [showTooltip, setShowTooltip] = useState(false);\n const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });\n const modeType = useUiStateStore((state) => state.mode.type);\n const isConnecting = useUiStateStore((state) =>\n state.mode.type === 'CONNECTOR' ? state.mode.isConnecting : false\n );\n const connectorId = useUiStateStore((state) =>\n state.mode.type === 'CONNECTOR' ? state.mode.id : null\n );\n // Get store API for imperative access to mouse position (without subscribing)\n const storeApi = useUiStateStoreApi();\n\n const { connectors } = useScene();\n const previousIsConnectingRef = useRef(isConnecting);\n const shownForConnectorRef = useRef(null);\n\n useEffect(() => {\n const wasConnecting = previousIsConnectingRef.current;\n\n // Detect when we transition from isConnecting to not isConnecting (connection completed)\n if (\n modeType === 'CONNECTOR' &&\n wasConnecting &&\n !isConnecting &&\n !connectorId // After connection is complete, id is set to null\n ) {\n // Find the most recently created connector\n const latestConnector = connectors[connectors.length - 1];\n\n if (latestConnector && latestConnector.id !== shownForConnectorRef.current) {\n // Check if either end is connected to empty space (tile reference)\n const hasEmptySpaceConnection = latestConnector.anchors.some(\n anchor => anchor.ref.tile && !anchor.ref.item\n );\n\n if (hasEmptySpaceConnection) {\n // Show tooltip near the mouse position (read imperatively to avoid subscribing)\n const currentMousePosition = storeApi.getState().mouse.position.screen;\n setTooltipPosition({\n x: currentMousePosition.x,\n y: currentMousePosition.y\n });\n setShowTooltip(true);\n shownForConnectorRef.current = latestConnector.id;\n\n // Auto-hide after 12 seconds\n const timer = setTimeout(() => {\n setShowTooltip(false);\n }, 12000);\n\n return () => clearTimeout(timer);\n }\n }\n }\n\n // Hide tooltip when switching away from connector mode\n if (modeType !== 'CONNECTOR') {\n setShowTooltip(false);\n }\n\n previousIsConnectingRef.current = isConnecting;\n }, [modeType, isConnecting, connectorId, connectors, storeApi]);\n\n // Remove the click handler - tooltip should persist\n // It will only hide after timeout or mode change\n\n if (!showTooltip) {\n return null;\n }\n\n return (\n \n \n \n \n {t('message')} {t('instruction')}\n \n \n \n \n );\n};" }, { "path": "packages/fossflow-lib/src/components/ConnectorHintTooltip/ConnectorHintTooltip.tsx", "content": "import React, { useState, useEffect } from 'react';\nimport { Box, IconButton, Paper, Typography, useTheme } from '@mui/material';\nimport { Close as CloseIcon } from '@mui/icons-material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useTranslation } from 'src/stores/localeStore';\n\nconst STORAGE_KEY = 'fossflow_connector_hint_dismissed';\n\ninterface Props {\n toolMenuRef?: React.RefObject;\n}\n\nexport const ConnectorHintTooltip = ({ toolMenuRef }: Props) => {\n const { t } = useTranslation('connectorHintTooltip');\n const theme = useTheme();\n const connectorInteractionMode = useUiStateStore((state) => state.connectorInteractionMode);\n const modeType = useUiStateStore((state) => state.mode.type);\n const isConnecting = useUiStateStore((state) =>\n state.mode.type === 'CONNECTOR' ? state.mode.isConnecting : false\n );\n const [isDismissed, setIsDismissed] = useState(true);\n const [position, setPosition] = useState({ top: 16, right: 16 });\n\n useEffect(() => {\n // Check if the hint has been dismissed before\n const dismissed = localStorage.getItem(STORAGE_KEY);\n if (dismissed !== 'true') {\n setIsDismissed(false);\n }\n }, []);\n\n useEffect(() => {\n // Calculate position based on toolbar\n if (toolMenuRef?.current) {\n const toolMenuRect = toolMenuRef.current.getBoundingClientRect();\n // Position tooltip below the toolbar with some spacing\n setPosition({\n top: toolMenuRect.bottom + 16,\n right: 16\n });\n } else {\n // Fallback position if no toolbar ref\n const appPadding = theme.customVars?.appPadding || { x: 16, y: 16 };\n setPosition({\n top: appPadding.y + 500, // Approximate toolbar height\n right: appPadding.x\n });\n }\n }, [toolMenuRef, theme]);\n\n const handleDismiss = () => {\n setIsDismissed(true);\n localStorage.setItem(STORAGE_KEY, 'true');\n };\n\n if (isDismissed) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n \n {connectorInteractionMode === 'click' ? t('tipCreatingConnectors') : t('tipConnectorTools')}\n \n \n \n {connectorInteractionMode === 'click' ? (\n <>\n {t('clickInstructionStart')} {t('clickInstructionMiddle')} {t('clickInstructionStart')} {t('clickInstructionEnd')}\n {modeType === 'CONNECTOR' && isConnecting && (\n \n {t('nowClickTarget')}\n \n )}\n \n ) : (\n <>\n {t('dragStart')} {t('dragEnd')}\n \n )}\n \n \n \n {t('rerouteStart')} {t('rerouteMiddle')} {t('rerouteEnd')}\n \n \n \n );\n};" }, { "path": "packages/fossflow-lib/src/components/ConnectorRerouteTooltip/ConnectorRerouteTooltip.tsx", "content": "import React, { useState, useEffect, useRef } from 'react';\nimport { Box, IconButton, Paper, Typography, Fade } from '@mui/material';\nimport { Close as CloseIcon } from '@mui/icons-material';\nimport { useUiStateStore, useUiStateStoreApi } from 'src/stores/uiStateStore';\nimport { useScene } from 'src/hooks/useScene';\nimport { useTranslation } from 'src/stores/localeStore';\n\nconst STORAGE_KEY = 'fossflow_connector_reroute_hint_dismissed';\n\nexport const ConnectorRerouteTooltip = () => {\n const { t } = useTranslation('connectorRerouteTooltip');\n const [showTooltip, setShowTooltip] = useState(false);\n const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });\n const modeType = useUiStateStore((state) => state.mode.type);\n const isConnecting = useUiStateStore((state) =>\n state.mode.type === 'CONNECTOR' ? state.mode.isConnecting : false\n );\n const connectorId = useUiStateStore((state) =>\n state.mode.type === 'CONNECTOR' ? state.mode.id : null\n );\n const storeApi = useUiStateStoreApi();\n const { connectors } = useScene();\n const previousIsConnectingRef = useRef(isConnecting);\n const shownForConnectorRef = useRef(null);\n const [isDismissed, setIsDismissed] = useState(true);\n\n useEffect(() => {\n // Check if the hint has been dismissed before\n const dismissed = localStorage.getItem(STORAGE_KEY);\n if (dismissed !== 'true') {\n setIsDismissed(false);\n }\n }, []);\n\n useEffect(() => {\n if (isDismissed) {\n return;\n }\n\n const wasConnecting = previousIsConnectingRef.current;\n\n // Detect when we transition from isConnecting to not isConnecting (connection completed)\n if (\n modeType === 'CONNECTOR' &&\n wasConnecting &&\n !isConnecting &&\n !connectorId // After connection is complete, id is set to null\n ) {\n // Find the most recently created connector\n const latestConnector = connectors[connectors.length - 1];\n\n if (latestConnector && latestConnector.id !== shownForConnectorRef.current) {\n // Show tooltip near the mouse position (read imperatively)\n const currentMousePosition = storeApi.getState().mouse.position.screen;\n setTooltipPosition({\n x: currentMousePosition.x,\n y: currentMousePosition.y\n });\n setShowTooltip(true);\n shownForConnectorRef.current = latestConnector.id;\n\n // Auto-hide after 15 seconds\n const timer = setTimeout(() => {\n setShowTooltip(false);\n }, 15000);\n\n return () => clearTimeout(timer);\n }\n }\n\n // Hide tooltip when switching away from connector mode\n if (modeType !== 'CONNECTOR') {\n setShowTooltip(false);\n }\n\n previousIsConnectingRef.current = isConnecting;\n }, [modeType, isConnecting, connectorId, connectors, isDismissed, storeApi]);\n\n const handleDismiss = () => {\n setShowTooltip(false);\n setIsDismissed(true);\n localStorage.setItem(STORAGE_KEY, 'true');\n };\n\n if (!showTooltip || isDismissed) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n\n \n {t('title')}\n \n\n \n {t('instructionStart')}\n \n\n \n {t('instructionSelect')} {t('instructionMiddle')} {t('instructionClick')} {t('instructionAnd')} {t('instructionDrag')} {t('instructionEnd')}\n \n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ConnectorSettings/ConnectorSettings.tsx", "content": "import React from 'react';\nimport {\n Box,\n FormControl,\n FormLabel,\n RadioGroup,\n FormControlLabel,\n Radio,\n Typography,\n Paper\n} from '@mui/material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useTranslation } from 'src/stores/localeStore';\n\nexport const ConnectorSettings = () => {\n const connectorInteractionMode = useUiStateStore((state) => state.connectorInteractionMode);\n const setConnectorInteractionMode = useUiStateStore((state) => state.actions.setConnectorInteractionMode);\n const { t } = useTranslation();\n\n const handleChange = (event: React.ChangeEvent) => {\n setConnectorInteractionMode(event.target.value as 'click' | 'drag');\n };\n\n return (\n \n \n {t('settings.connector.title')}\n \n\n \n \n {t('settings.connector.connectionMode')}\n \n }\n label={\n \n {t('settings.connector.clickMode')}\n \n {t('settings.connector.clickModeDesc')}\n \n \n }\n />\n }\n label={\n \n {t('settings.connector.dragMode')}\n \n {t('settings.connector.dragModeDesc')}\n \n \n }\n sx={{ mt: 1 }}\n />\n \n \n \n\n \n {t('settings.connector.note')}\n \n \n );\n};" }, { "path": "packages/fossflow-lib/src/components/ContextMenu/ContextMenu.tsx", "content": "import React from 'react';\nimport { Menu, MenuItem } from '@mui/material';\n\ninterface MenuItemI {\n label: string;\n onClick: () => void;\n}\n\ninterface Props {\n onClose: () => void;\n anchorEl?: HTMLElement | null;\n menuItems: MenuItemI[];\n}\n\nexport const ContextMenu = ({\n onClose,\n anchorEl,\n menuItems\n}: Props) => {\n return (\n \n {menuItems.map((item, index) => {\n return {item.label};\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx", "content": "import React, { useCallback } from 'react';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { generateId, findNearestUnoccupiedTile } from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { VIEW_ITEM_DEFAULTS } from 'src/config';\nimport { ContextMenu } from './ContextMenu';\n\ninterface Props {\n anchorEl?: HTMLElement | null;\n}\n\nexport const ContextMenuManager = ({ anchorEl }: Props) => {\n const scene = useScene();\n const model = useModelStore((state) => {\n return state;\n });\n const contextMenu = useUiStateStore((state) => {\n return state.contextMenu;\n });\n\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n\n const onClose = useCallback(() => {\n uiStateActions.setContextMenu(null);\n }, [uiStateActions]);\n\n return (\n {\n if (!contextMenu) return;\n if (model.icons.length > 0) {\n const modelItemId = generateId();\n const firstIcon = model.icons[0];\n \n // Find nearest unoccupied tile (should return the same tile since context menu is for empty tiles)\n const targetTile = findNearestUnoccupiedTile(contextMenu.tile, scene) || contextMenu.tile;\n\n scene.placeIcon({\n modelItem: {\n id: modelItemId,\n name: 'Untitled',\n icon: firstIcon.id\n },\n viewItem: {\n ...VIEW_ITEM_DEFAULTS,\n id: modelItemId,\n tile: targetTile\n }\n });\n }\n onClose();\n }\n },\n {\n label: 'Add Rectangle',\n onClick: () => {\n if (!contextMenu) return;\n if (model.colors.length > 0) {\n scene.createRectangle({\n id: generateId(),\n color: model.colors[0].id,\n from: contextMenu.tile,\n to: contextMenu.tile\n });\n }\n onClose();\n }\n }\n ]}\n />\n );\n\n // Remove ITEM context menu since layer ordering only works for rectangles\n // and provides no value for regular diagram items\n\n};\n" }, { "path": "packages/fossflow-lib/src/components/Cursor/Cursor.tsx", "content": "import React, { memo } from 'react';\nimport chroma from 'chroma-js';\nimport { useTheme } from '@mui/material';\nimport { IsoTileArea } from 'src/components/IsoTileArea/IsoTileArea';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\n\nexport const Cursor = memo(() => {\n const theme = useTheme();\n const tile = useUiStateStore((state) => {\n return state.mouse.position.tile;\n });\n const zoom = useUiStateStore((state) => {\n return state.zoom;\n });\n\n return (\n \n );\n});\n" }, { "path": "packages/fossflow-lib/src/components/DOMErrorBoundary/DOMErrorBoundary.tsx", "content": "import React, { Component, ReactNode } from 'react';\n\ninterface DOMErrorBoundaryProps {\n children: ReactNode;\n fallback?: ReactNode;\n onError?: (error: Error) => void;\n}\n\ninterface DOMErrorBoundaryState {\n hasError: boolean;\n errorCount: number;\n}\n\n/**\n * Error boundary that catches and handles DOM manipulation errors\n * such as \"Failed to execute 'removeChild' on 'Node'\"\n */\nclass DOMErrorBoundary extends Component {\n constructor(props: DOMErrorBoundaryProps) {\n super(props);\n this.state = {\n hasError: false,\n errorCount: 0\n };\n }\n\n static getDerivedStateFromError(error: Error): Partial | null {\n // Check if this is a DOM manipulation error we're trying to handle\n if (\n error.message.includes('removeChild') ||\n error.message.includes('insertBefore') ||\n error.message.includes('appendChild') ||\n error.message.includes('The node to be removed is not a child')\n ) {\n // Return state update to trigger re-render\n return {\n hasError: true,\n errorCount: 0\n };\n }\n // For other errors, let them propagate\n return null;\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n // Log the error for debugging purposes\n if (\n error.message.includes('removeChild') ||\n error.message.includes('insertBefore') ||\n error.message.includes('appendChild') ||\n error.message.includes('The node to be removed is not a child')\n ) {\n console.warn('DOM manipulation error caught and handled:', {\n message: error.message,\n componentStack: errorInfo.componentStack\n });\n\n // Call optional error callback\n if (this.props.onError) {\n this.props.onError(error);\n }\n\n // Prevent infinite error loops by tracking error count\n this.setState((prevState) => ({\n errorCount: prevState.errorCount + 1\n }));\n\n // If we get too many errors in a row, show fallback\n if (this.state.errorCount > 3) {\n console.error('Too many DOM errors, showing fallback');\n return;\n }\n\n // Schedule a recovery attempt after the current render cycle\n setTimeout(() => {\n this.setState({\n hasError: false\n });\n }, 0);\n }\n }\n\n componentDidUpdate(_prevProps: DOMErrorBoundaryProps, prevState: DOMErrorBoundaryState) {\n // Reset error state if we successfully rendered after an error\n if (prevState.hasError && !this.state.hasError) {\n this.setState({ errorCount: 0 });\n }\n }\n\n render() {\n if (this.state.hasError && this.state.errorCount > 3) {\n // If too many errors, show fallback or placeholder\n return (\n this.props.fallback || (\n \n Component temporarily unavailable due to rendering errors\n \n )\n );\n }\n\n // Normal render or retry after error\n return this.props.children;\n }\n}\n\nexport default DOMErrorBoundary;\n" }, { "path": "packages/fossflow-lib/src/components/DOMErrorBoundary/index.ts", "content": "export { default as DOMErrorBoundary } from './DOMErrorBoundary';\n" }, { "path": "packages/fossflow-lib/src/components/DebugUtils/DebugUtils.tsx", "content": "import React from 'react';\nimport { Box } from '@mui/material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useResizeObserver } from 'src/hooks/useResizeObserver';\nimport { useScene } from 'src/hooks/useScene';\nimport { LineItem } from './LineItem';\n\nexport const DebugUtils = () => {\n const uiState = useUiStateStore(\n ({ scroll, mouse, zoom, mode, rendererEl }) => {\n return { scroll, mouse, zoom, mode, rendererEl };\n }\n );\n const scene = useScene();\n const { size: rendererSize } = useResizeObserver(uiState.rendererEl);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/DebugUtils/LineItem.tsx", "content": "import React from 'react';\nimport { Typography, Box } from '@mui/material';\nimport { Value } from './Value';\n\ninterface Props {\n title: string;\n value: string | number;\n}\n\nexport const LineItem = ({ title, value }: Props) => {\n return (\n {\n return `1px solid ${theme.palette.grey[300]}`;\n }\n }}\n >\n \n {title}\n \n \n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/DebugUtils/SizeIndicator.tsx", "content": "import React, { useMemo } from 'react';\nimport { Box } from '@mui/material';\nimport { useDiagramUtils } from 'src/hooks/useDiagramUtils';\n\nconst BORDER_WIDTH = 6;\n\nexport const SizeIndicator = () => {\n const { getUnprojectedBounds } = useDiagramUtils();\n const diagramBoundingBox = useMemo(() => {\n return getUnprojectedBounds();\n }, [getUnprojectedBounds]);\n\n return (\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/DebugUtils/Value.tsx", "content": "import React from 'react';\nimport { Box, Typography } from '@mui/material';\n\ninterface Props {\n value: string;\n}\n\nexport const Value = ({ value }: Props) => {\n return (\n {\n return `1px solid ${theme.palette.grey[400]}`;\n },\n borderRadius: 2,\n maxWidth: 200\n }}\n >\n \n {value}\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/DebugUtils/__tests__/DebugUtils.test.tsx", "content": "import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { ThemeProvider } from '@mui/material/styles';\nimport { theme } from 'src/styles/theme';\nimport { ModelProvider } from 'src/stores/modelStore';\nimport { SceneProvider } from 'src/stores/sceneStore';\nimport { UiStateProvider } from 'src/stores/uiStateStore';\nimport { DebugUtils } from '../DebugUtils';\n\ndescribe('DebugUtils', () => {\n const Providers: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n return (\n \n \n \n {children}\n \n \n \n );\n };\n\n it('renders without crashing', () => {\n render(\n \n \n \n );\n expect(screen.getByText('Mouse')).toBeInTheDocument();\n });\n\n it('matches snapshot', () => {\n const { asFragment } = render(\n \n \n \n );\n expect(asFragment()).toMatchSnapshot();\n });\n});\n" }, { "path": "packages/fossflow-lib/src/components/DebugUtils/__tests__/LineItem.test.tsx", "content": "import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { ThemeProvider } from '@mui/material/styles';\nimport { theme } from 'src/styles/theme';\nimport { LineItem } from '../LineItem';\n\nconst renderWithTheme = (ui: React.ReactElement) => {\n return render({ui});\n};\n\ndescribe('LineItem', () => {\n it('renders title and value', () => {\n renderWithTheme();\n expect(screen.getByText('Test Title')).toBeInTheDocument();\n expect(screen.getByText('Test Value')).toBeInTheDocument();\n });\n\n it('matches snapshot', () => {\n const { asFragment } = renderWithTheme(\n \n );\n expect(asFragment()).toMatchSnapshot();\n });\n});\n" }, { "path": "packages/fossflow-lib/src/components/DebugUtils/__tests__/SizeIndicator.test.tsx", "content": "import React from 'react';\nimport { render } from '@testing-library/react';\nimport { ThemeProvider } from '@mui/material/styles';\nimport { theme } from 'src/styles/theme';\nimport { ModelProvider } from 'src/stores/modelStore';\nimport { SceneProvider } from 'src/stores/sceneStore';\nimport { UiStateProvider } from 'src/stores/uiStateStore';\nimport { SizeIndicator } from '../SizeIndicator';\n\ndescribe('SizeIndicator', () => {\n const Providers: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n return (\n \n \n \n {children}\n \n \n \n );\n };\n\n it('renders without crashing', () => {\n const { container } = render(\n \n \n \n );\n const box = container.querySelector('div');\n expect(box).toBeInTheDocument();\n expect(box).toHaveStyle('border: 6px solid red');\n });\n\n it('matches snapshot', () => {\n const { asFragment } = render(\n \n \n \n );\n expect(asFragment()).toMatchSnapshot();\n });\n});\n" }, { "path": "packages/fossflow-lib/src/components/DebugUtils/__tests__/Value.test.tsx", "content": "import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { ThemeProvider } from '@mui/material/styles';\nimport { theme } from 'src/styles/theme';\nimport { Value } from '../Value';\n\nconst renderWithTheme = (ui: React.ReactElement) => {\n return render({ui});\n};\n\ndescribe('Value', () => {\n it('renders value', () => {\n renderWithTheme();\n expect(screen.getByText('Test Value')).toBeInTheDocument();\n });\n\n it('matches snapshot', () => {\n const { asFragment } = renderWithTheme();\n expect(asFragment()).toMatchSnapshot();\n });\n});\n" }, { "path": "packages/fossflow-lib/src/components/DragAndDrop/DragAndDrop.tsx", "content": "import React, { useMemo } from 'react';\nimport { Box } from '@mui/material';\nimport { Coords } from 'src/types';\nimport { getTilePosition } from 'src/utils';\nimport { useIcon } from 'src/hooks/useIcon';\n\ninterface Props {\n iconId: string;\n tile: Coords;\n}\n\nexport const DragAndDrop = ({ iconId, tile }: Props) => {\n const { iconComponent } = useIcon(iconId);\n\n const tilePosition = useMemo(() => {\n return getTilePosition({ tile, origin: 'BOTTOM' });\n }, [tile]);\n\n return (\n \n {iconComponent}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ExportImageDialog/ExportImageDialog.tsx", "content": "import React, {\n useRef,\n useEffect,\n useMemo,\n useCallback,\n useState\n} from 'react';\nimport {\n Dialog,\n DialogContent,\n DialogTitle,\n Box,\n Button,\n Stack,\n Alert,\n Checkbox,\n FormControlLabel,\n Typography,\n Slider,\n Select,\n MenuItem,\n FormControl\n} from '@mui/material';\nimport { useModelStore } from 'src/stores/modelStore';\nimport {\n exportAsImage,\n exportAsSVG,\n downloadFile as downloadFileUtil,\n base64ToBlob,\n generateGenericFilename,\n modelFromModelStore\n} from 'src/utils';\nimport { ModelStore, Size, Coords } from 'src/types';\nimport { useDiagramUtils } from 'src/hooks/useDiagramUtils';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { Isoflow } from 'src/Isoflow';\nimport { Loader } from 'src/components/Loader/Loader';\nimport { customVars } from 'src/styles/theme';\nimport { ColorPicker } from 'src/components/ColorSelector/ColorPicker';\nimport { DOMErrorBoundary } from 'src/components/DOMErrorBoundary';\n\ninterface Props {\n quality?: number;\n onClose: () => void;\n}\n\ninterface CropArea {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\nexport const ExportImageDialog = ({ onClose, quality = 1.5 }: Props) => {\n const containerRef = useRef(null);\n const cropCanvasRef = useRef(null);\n const isExporting = useRef(false);\n const [isDragging, setIsDragging] = useState(false);\n const [dragStart, setDragStart] = useState(null);\n const currentView = useUiStateStore((state) => state.view);\n const [imageData, setImageData] = React.useState();\n const [svgData, setSvgData] = useState();\n const [croppedImageData, setCroppedImageData] = useState();\n const [exportError, setExportError] = useState(false);\n const { getUnprojectedBounds } = useDiagramUtils();\n const uiStateActions = useUiStateStore((state) => state.actions);\n const model = useModelStore((state): Omit => {\n return modelFromModelStore(state);\n });\n\n // Crop states\n const [cropToContent, setCropToContent] = useState(false);\n const [cropArea, setCropArea] = useState(null);\n const [isInCropMode, setIsInCropMode] = useState(false);\n\n // Scale/DPI state\n const [exportScale, setExportScale] = useState(2);\n const [scaleMode, setScaleMode] = useState<'preset' | 'custom'>('preset');\n\n // DPI presets\n const dpiPresets = [\n { label: '1x (72 DPI)', value: 1 },\n { label: '2x (144 DPI)', value: 2 },\n { label: '3x (216 DPI)', value: 3 },\n { label: '4x (288 DPI)', value: 4 }\n ];\n\n // Use original bounds for the base image\n const bounds = useMemo(() => {\n return getUnprojectedBounds();\n }, [getUnprojectedBounds]);\n\n // Note: No need to manually set mode here - the hidden Isoflow component\n // with editorMode=\"NON_INTERACTIVE\" will handle its own mode state\n\n const [transparentBackground, setTransparentBackground] = useState(false);\n\n const [backgroundColor, setBackgroundColor] = useState(\n customVars.customPalette.diagramBg\n );\n\n const exportImage = useCallback(async () => {\n if (!containerRef.current || isExporting.current) {\n return;\n }\n\n isExporting.current = true;\n\n // Base size without scale (scale is applied via CSS transform)\n const containerSize = {\n width: bounds.width,\n height: bounds.height\n };\n\n const bgColor = transparentBackground ? 'transparent' : backgroundColor;\n\n try {\n // Export both PNG and SVG in parallel\n const [pngData, svgDataResult] = await Promise.all([\n exportAsImage(containerRef.current as HTMLDivElement, containerSize, exportScale, bgColor),\n exportAsSVG(containerRef.current as HTMLDivElement, containerSize, bgColor)\n ]);\n\n setImageData(pngData);\n setSvgData(svgDataResult);\n isExporting.current = false;\n } catch (err) {\n console.error(err);\n setExportError(true);\n isExporting.current = false;\n }\n }, [bounds, exportScale, transparentBackground, backgroundColor]);\n\n // Crop the image based on selected area\n const cropImage = useCallback((cropArea: CropArea, sourceImage: string) => {\n return new Promise((resolve, reject) => {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const img = new Image();\n\n img.onload = () => {\n // Calculate the scaling factors between display canvas (500x300) and actual image\n const displayCanvas = cropCanvasRef.current;\n if (!displayCanvas) {\n reject(new Error('Display canvas not found'));\n return;\n }\n\n const scaleX = img.width / displayCanvas.width;\n const scaleY = img.height / displayCanvas.height;\n \n // Calculate the actual crop area in the source image coordinates\n const actualCropArea = {\n x: cropArea.x * scaleX,\n y: cropArea.y * scaleY,\n width: cropArea.width * scaleX,\n height: cropArea.height * scaleY\n };\n\n // Set canvas size to the actual crop dimensions\n canvas.width = actualCropArea.width;\n canvas.height = actualCropArea.height;\n\n if (ctx) {\n // Draw the cropped portion from the source image\n ctx.drawImage(\n img,\n actualCropArea.x, actualCropArea.y, actualCropArea.width, actualCropArea.height,\n 0, 0, actualCropArea.width, actualCropArea.height\n );\n \n resolve(canvas.toDataURL('image/png'));\n } else {\n reject(new Error('Could not get canvas context'));\n }\n };\n\n img.onerror = () => reject(new Error('Failed to load image'));\n img.src = sourceImage;\n });\n }, []);\n\n // Handle crop area generation - only when not in crop mode (after applying)\n useEffect(() => {\n if (cropToContent && cropArea && imageData && !isInCropMode) {\n cropImage(cropArea, imageData)\n .then(setCroppedImageData)\n .catch(console.error);\n } else if (!cropToContent || !cropArea) {\n setCroppedImageData(undefined);\n }\n }, [cropArea, imageData, cropToContent, cropImage, isInCropMode]);\n\n // Mouse handlers for crop selection\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n if (!isInCropMode) return;\n \n e.preventDefault();\n const canvas = cropCanvasRef.current;\n if (!canvas) return;\n\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n setDragStart({ x, y });\n setIsDragging(true);\n setCropArea(null);\n }, [isInCropMode]);\n\n const handleMouseMove = useCallback((e: React.MouseEvent) => {\n if (!isDragging || !dragStart || !isInCropMode) return;\n \n e.preventDefault();\n const canvas = cropCanvasRef.current;\n if (!canvas) return;\n\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n\n const newCropArea: CropArea = {\n x: Math.min(dragStart.x, x),\n y: Math.min(dragStart.y, y),\n width: Math.abs(x - dragStart.x),\n height: Math.abs(y - dragStart.y)\n };\n\n setCropArea(newCropArea);\n }, [isDragging, dragStart, isInCropMode]);\n\n const handleMouseUp = useCallback((e: React.MouseEvent) => {\n if (!isDragging) return;\n \n e.preventDefault();\n setIsDragging(false);\n setDragStart(null);\n }, [isDragging]);\n\n // Add mouse leave handler to stop dragging when leaving canvas\n const handleMouseLeave = useCallback(() => {\n setIsDragging(false);\n setDragStart(null);\n }, []);\n\n // Draw crop overlay\n useEffect(() => {\n const canvas = cropCanvasRef.current;\n if (!canvas || !imageData) return;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) return;\n\n const img = new Image();\n img.onload = () => {\n // Calculate scaling factors between canvas and actual image\n const scaleX = img.width / canvas.width;\n const scaleY = img.height / canvas.height;\n \n // Clear canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // Draw checkerboard if transparent background\n if (transparentBackground) {\n const squareSize = 10;\n for (let y = 0; y < canvas.height; y += squareSize) {\n for (let x = 0; x < canvas.width; x += squareSize) {\n ctx.fillStyle = (x / squareSize + y / squareSize) % 2 === 0 ? '#f0f0f0' : 'transparent';\n ctx.fillRect(x, y, squareSize, squareSize);\n }\n }\n }\n \n // Draw the image scaled to fit canvas\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n \n // Draw crop overlay if in crop mode\n if (isInCropMode) {\n // Semi-transparent overlay\n ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n // Clear crop area and draw border only if there's a valid selection\n if (cropArea && cropArea.width > 5 && cropArea.height > 5) {\n // Clear the selected area (remove overlay)\n ctx.clearRect(cropArea.x, cropArea.y, cropArea.width, cropArea.height);\n \n // Redraw the original image in the selected area\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n \n // Redraw the overlay everywhere except the selected area\n ctx.save();\n ctx.globalCompositeOperation = 'source-over';\n ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';\n \n // Top area\n if (cropArea.y > 0) {\n ctx.fillRect(0, 0, canvas.width, cropArea.y);\n }\n // Bottom area\n if (cropArea.y + cropArea.height < canvas.height) {\n ctx.fillRect(0, cropArea.y + cropArea.height, canvas.width, canvas.height - (cropArea.y + cropArea.height));\n }\n // Left area\n if (cropArea.x > 0) {\n ctx.fillRect(0, cropArea.y, cropArea.x, cropArea.height);\n }\n // Right area\n if (cropArea.x + cropArea.width < canvas.width) {\n ctx.fillRect(cropArea.x + cropArea.width, cropArea.y, canvas.width - (cropArea.x + cropArea.width), cropArea.height);\n }\n \n ctx.restore();\n \n // Draw crop border\n ctx.strokeStyle = '#2196f3';\n ctx.lineWidth = 2;\n ctx.strokeRect(cropArea.x, cropArea.y, cropArea.width, cropArea.height);\n }\n \n // Add instruction text only when no selection or dragging\n if (!cropArea || cropArea.width <= 5 || cropArea.height <= 5) {\n ctx.fillStyle = 'white';\n ctx.font = '14px Arial';\n ctx.textAlign = 'left';\n ctx.fillText('Click and drag to select crop area', 10, 25);\n }\n }\n };\n \n img.src = imageData;\n }, [imageData, isInCropMode, cropArea, transparentBackground]);\n\n const [showGrid, setShowGrid] = useState(false);\n const handleShowGridChange = (checked: boolean) => {\n setShowGrid(checked);\n };\n\n const [expandLabels, setExpandLabels] = useState(true);\n const handleExpandLabelsChange = (checked: boolean) => {\n setExpandLabels(checked);\n };\n\n const handleTransparentBackgroundChange = (checked: boolean) => {\n setTransparentBackground(checked);\n if (checked) {\n setBackgroundColor('transparent');\n } else {\n setBackgroundColor(customVars.customPalette.diagramBg);\n }\n };\n\n const handleBackgroundColorChange = (color: string) => {\n setBackgroundColor(color);\n };\n\n const handleCropToContentChange = (checked: boolean) => {\n setCropToContent(checked);\n if (checked) {\n setIsInCropMode(true);\n setCropArea(null);\n setCroppedImageData(undefined);\n setIsDragging(false);\n setDragStart(null);\n } else {\n setIsInCropMode(false);\n setCropArea(null);\n setCroppedImageData(undefined);\n setIsDragging(false);\n setDragStart(null);\n }\n };\n\n const handleRecrop = () => {\n setIsInCropMode(true);\n setCropArea(null);\n setCroppedImageData(undefined);\n setIsDragging(false);\n setDragStart(null);\n };\n\n const handleAcceptCrop = () => {\n setIsInCropMode(false);\n };\n\n // Reset image data when non-crop options change\n useEffect(() => {\n if (!cropToContent) {\n setImageData(undefined);\n setSvgData(undefined);\n setExportError(false);\n isExporting.current = false;\n const timer = setTimeout(() => {\n exportImage();\n }, 200);\n return () => clearTimeout(timer);\n }\n }, [showGrid, backgroundColor, expandLabels, exportImage, cropToContent, exportScale, transparentBackground]);\n\n useEffect(() => {\n if (!imageData) {\n const timer = setTimeout(() => {\n exportImage();\n }, 200);\n return () => clearTimeout(timer);\n }\n }, [exportImage, imageData]);\n\n const downloadFile = useCallback(() => {\n const dataToDownload = croppedImageData || imageData;\n if (!dataToDownload) return;\n\n const data = base64ToBlob(\n dataToDownload.replace('data:image/png;base64,', ''),\n 'image/png;charset=utf-8'\n );\n\n downloadFileUtil(data, generateGenericFilename('png'));\n }, [imageData, croppedImageData]);\n\n const downloadSvgFile = useCallback(async () => {\n if (!svgData) return;\n\n try {\n // Fetch the data URL as a blob to handle encoding properly\n const response = await fetch(svgData);\n const blob = await response.blob();\n downloadFileUtil(blob, generateGenericFilename('svg'));\n } catch (error) {\n console.error('SVG download failed:', error);\n setExportError(true);\n }\n }, [svgData]);\n\n const displayImage = croppedImageData || imageData;\n\n return (\n \n Export as image\n \n \n \n \n Browser Compatibility Notice\n \n
\n For best results, please use Chrome or Edge. Firefox currently has \n compatibility issues with the export feature.\n \n\n {!imageData && (\n <>\n \n \n \n \n \n \n \n \n \n \n \n )}\n \n {displayImage && (\n \n {cropToContent && !croppedImageData ? (\n \n e.preventDefault()}\n />\n {isInCropMode && (\n \n \n Click and drag to select the area you want to export\n \n \n )}\n \n ) : (\n \n )}\n \n )}\n \n \n \n Options\n \n\n {\n handleShowGridChange(event.target.checked);\n }}\n />\n }\n />\n {\n handleExpandLabelsChange(event.target.checked);\n }}\n />\n }\n />\n {\n handleCropToContentChange(event.target.checked);\n }}\n />\n }\n />\n \n }\n />\n\n {\n handleTransparentBackgroundChange(event.target.checked);\n }}\n />\n }\n />\n\n \n \n Export Quality (DPI)\n \n\n \n {\n const value = event.target.value;\n if (value === 'custom') {\n setScaleMode('custom');\n } else {\n setScaleMode('preset');\n setExportScale(Number(value));\n }\n }}\n >\n {dpiPresets.map((preset) => (\n \n {preset.label}\n \n ))}\n Custom\n \n \n\n {scaleMode === 'custom' && (\n \n \n Scale: {exportScale.toFixed(1)}x ({(exportScale * 72).toFixed(0)} DPI)\n \n setExportScale(value as number)}\n min={1}\n max={5}\n step={0.1}\n marks={[\n { value: 1, label: '1x' },\n { value: 2, label: '2x' },\n { value: 3, label: '3x' },\n { value: 4, label: '4x' },\n { value: 5, label: '5x' }\n ]}\n valueLabelDisplay=\"auto\"\n valueLabelFormat={(value) => `${value.toFixed(1)}x`}\n />\n \n )}\n \n \n\n {/* Crop controls */}\n {cropToContent && imageData && (\n \n {croppedImageData ? (\n \n \n \n Crop applied successfully\n \n \n ) : cropArea ? (\n \n \n \n \n ) : isInCropMode ? (\n \n Select an area to crop, or uncheck \"Crop to content\" to use full image\n \n ) : null}\n \n )}\n \n\n {displayImage && (\n \n \n \n \n Download as SVG\n \n \n Download as PNG\n \n \n \n )}\n \n\n {exportError && (\n Could not export image\n )}\n \n \n \n );\n};" }, { "path": "packages/fossflow-lib/src/components/FreehandLasso/FreehandLasso.tsx", "content": "import React, { useMemo } from 'react';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { createSmoothPath } from 'src/utils';\n\nexport const FreehandLasso = () => {\n const modeType = useUiStateStore((state) => state.mode.type);\n const path = useUiStateStore((state) =>\n state.mode.type === 'FREEHAND_LASSO' ? state.mode.path : []\n );\n const rendererEl = useUiStateStore((state) => state.rendererEl);\n\n const rendererSize = rendererEl?.getBoundingClientRect();\n\n const smoothPath = useMemo(() => {\n if (modeType !== 'FREEHAND_LASSO' || path.length < 2) {\n return '';\n }\n return createSmoothPath(path);\n }, [modeType, path]);\n\n if (modeType !== 'FREEHAND_LASSO' || path.length < 2) {\n return null;\n }\n\n const width = rendererSize?.width || 0;\n const height = rendererSize?.height || 0;\n\n return (\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/Gradient/Gradient.tsx", "content": "import React from 'react';\nimport { Box, SxProps } from '@mui/material';\n\ninterface Props {\n sx?: SxProps;\n}\n\nexport const Gradient = ({ sx }: Props) => {\n return (\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/Grid/Grid.tsx", "content": "import React, { useEffect, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport gsap from 'gsap';\nimport { Size } from 'src/types';\nimport gridTileSvg from 'src/assets/grid-tile-bg.svg';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { PROJECTED_TILE_SIZE } from 'src/config';\nimport { SizeUtils } from 'src/utils/SizeUtils';\nimport { useResizeObserver } from 'src/hooks/useResizeObserver';\n\nexport const Grid = () => {\n const elementRef = useRef(null);\n const { size } = useResizeObserver(elementRef.current);\n const [isFirstRender, setIsFirstRender] = useState(true);\n const scroll = useUiStateStore((state) => {\n return state.scroll;\n });\n const zoom = useUiStateStore((state) => {\n return state.zoom;\n });\n\n useEffect(() => {\n if (!elementRef.current) return;\n\n const tileSize = SizeUtils.multiply(PROJECTED_TILE_SIZE, zoom);\n const elSize = elementRef.current.getBoundingClientRect();\n const backgroundPosition: Size = {\n width: elSize.width / 2 + scroll.position.x + tileSize.width / 2,\n height: elSize.height / 2 + scroll.position.y\n };\n\n gsap.to(elementRef.current, {\n duration: isFirstRender ? 0 : 0.016, // ~1 frame at 60fps for smooth motion\n ease: 'none', // Linear easing for immediate response\n backgroundSize: `${tileSize.width}px ${tileSize.height * 2}px`,\n backgroundPosition: `${backgroundPosition.width}px ${backgroundPosition.height}px`\n });\n\n if (isFirstRender) {\n setIsFirstRender(false);\n }\n }, [scroll, zoom, isFirstRender, size]);\n\n return (\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/HelpDialog/HelpDialog.tsx", "content": "import React from 'react';\nimport {\n Dialog,\n DialogTitle,\n DialogContent,\n DialogActions,\n Button,\n Table,\n TableBody,\n TableCell,\n TableContainer,\n TableHead,\n TableRow,\n Paper,\n Typography,\n Box,\n Divider\n} from '@mui/material';\nimport { Close as CloseIcon } from '@mui/icons-material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { DialogTypeEnum } from 'src/types/ui';\nimport { useTranslation } from 'src/stores/localeStore';\n\ninterface ShortcutItem {\n action: string;\n shortcut: string;\n description: string;\n}\n\nexport const HelpDialog = () => {\n const { t } = useTranslation('helpDialog');\n \n const dialog = useUiStateStore((state) => {\n return state.dialog;\n });\n const setDialog = useUiStateStore((state) => {\n return state.actions.setDialog;\n });\n\n const isOpen = dialog === DialogTypeEnum.HELP;\n\n const handleClose = () => {\n setDialog(null);\n };\n\n const keyboardShortcuts = [\n {\n action: t('undoAction'),\n shortcut: 'Ctrl+Z',\n description: t('undoDescription')\n },\n {\n action: t('redoAction'),\n shortcut: 'Ctrl+Y',\n description: t('redoDescription')\n },\n {\n action: t('redoAltAction'),\n shortcut: 'Ctrl+Shift+Z',\n description: t('redoAltDescription')\n },\n {\n action: t('helpAction'),\n shortcut: 'F1',\n description: t('helpDescription')\n },\n {\n action: t('zoomInAction'),\n shortcut: t('zoomInShortcut'),\n description: t('zoomInDescription')\n },\n {\n action: t('zoomOutAction'),\n shortcut: t('zoomOutShortcut'),\n description: t('zoomOutDescription')\n },\n {\n action: t('panCanvasAction'),\n shortcut: t('panCanvasShortcut'),\n description: t('panCanvasDescription')\n },\n {\n action: t('contextMenuAction'),\n shortcut: t('contextMenuShortcut'),\n description: t('contextMenuDescription')\n }\n ];\n\n const mouseInteractions = [\n {\n action: t('selectToolAction'),\n shortcut: t('selectToolShortcut'),\n description: t('selectToolDescription')\n },\n {\n action: t('panToolAction'),\n shortcut: t('panToolShortcut'),\n description: t('panToolDescription')\n },\n {\n action: t('addItemAction'),\n shortcut: t('addItemShortcut'),\n description: t('addItemDescription')\n },\n {\n action: t('drawRectangleAction'),\n shortcut: t('drawRectangleShortcut'),\n description: t('drawRectangleDescription')\n },\n {\n action: t('createConnectorAction'),\n shortcut: t('createConnectorShortcut'),\n description: t('createConnectorDescription')\n },\n {\n action: t('addTextAction'),\n shortcut: t('addTextShortcut'),\n description: t('addTextDescription')\n }\n ];\n\n return (\n \n \n \n \n {t('title')}\n \n \n \n \n \n \n\n \n \n \n {t('keyboardShortcuts')}\n \n \n \n \n \n {t('action')}\n {t('shortcut')}\n {t('description')}\n \n \n \n {keyboardShortcuts.map((shortcut, index) => {\n return (\n \n {shortcut.action}\n \n \n {shortcut.shortcut}\n \n \n {shortcut.description}\n \n );\n })}\n \n
\n \n \n\n \n\n \n \n {t('mouseInteractions')}\n \n \n \n \n \n {t('action')}\n {t('method')}\n {t('description')}\n \n \n \n {mouseInteractions.map((interaction, index) => {\n return (\n \n {interaction.action}\n \n \n {interaction.shortcut}\n \n \n {interaction.description}\n \n );\n })}\n \n
\n \n \n\n \n \n {t('note')} {t('noteContent')}\n \n \n \n\n \n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/HotkeySettings/HotkeySettings.tsx", "content": "import React from 'react';\nimport {\n Box,\n Select,\n MenuItem,\n FormControl,\n InputLabel,\n Typography,\n Paper,\n Table,\n TableBody,\n TableCell,\n TableContainer,\n TableHead,\n TableRow\n} from '@mui/material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { HOTKEY_PROFILES, HotkeyProfile } from 'src/config/hotkeys';\nimport { useTranslation } from 'src/stores/localeStore';\n\nexport const HotkeySettings = () => {\n const hotkeyProfile = useUiStateStore((state) => state.hotkeyProfile);\n const setHotkeyProfile = useUiStateStore((state) => state.actions.setHotkeyProfile);\n const { t } = useTranslation();\n\n const currentMapping = HOTKEY_PROFILES[hotkeyProfile];\n\n const tools = [\n { name: t('settings.hotkeys.toolSelect'), key: currentMapping.select },\n { name: t('settings.hotkeys.toolPan'), key: currentMapping.pan },\n { name: t('settings.hotkeys.toolAddItem'), key: currentMapping.addItem },\n { name: t('settings.hotkeys.toolRectangle'), key: currentMapping.rectangle },\n { name: t('settings.hotkeys.toolConnector'), key: currentMapping.connector },\n { name: t('settings.hotkeys.toolText'), key: currentMapping.text }\n ];\n\n return (\n \n \n {t('settings.hotkeys.title')}\n \n\n \n {t('settings.hotkeys.profile')}\n setHotkeyProfile(e.target.value as HotkeyProfile)}\n >\n {t('settings.hotkeys.profileQwerty')}\n {t('settings.hotkeys.profileSmnrct')}\n {t('settings.hotkeys.profileNone')}\n \n \n\n {hotkeyProfile !== 'none' && (\n \n \n \n \n {t('settings.hotkeys.tool')}\n {t('settings.hotkeys.hotkey')}\n \n \n \n {tools.map((tool) => (\n \n {tool.name}\n \n \n {tool.key ? tool.key.toUpperCase() : '-'}\n \n \n \n ))}\n \n
\n \n )}\n\n \n {t('settings.hotkeys.note')}\n \n \n );\n};" }, { "path": "packages/fossflow-lib/src/components/IconButton/IconButton.tsx", "content": "import React, { useMemo } from 'react';\nimport { Button, Box, useTheme } from '@mui/material';\nimport Tooltip, { TooltipProps } from '@mui/material/Tooltip';\n\ninterface Props {\n name: string;\n Icon: React.ReactNode;\n isActive?: boolean;\n onClick: (e: React.MouseEvent) => void;\n tooltipPosition?: TooltipProps['placement'];\n disabled?: boolean;\n}\n\nexport const IconButton = ({\n name,\n Icon,\n onClick,\n isActive = false,\n disabled = false,\n tooltipPosition = 'bottom'\n}: Props) => {\n const theme = useTheme();\n const iconColor = useMemo(() => {\n if (isActive) {\n return 'grey.200';\n }\n\n if (disabled) {\n return 'grey.800';\n }\n\n return 'grey.500';\n }, [disabled, isActive]);\n\n return (\n \n \n \n {Icon}\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/IconPackSettings/IconPackSettings.tsx", "content": "import React from 'react';\nimport {\n Box,\n FormControl,\n FormLabel,\n FormControlLabel,\n Switch,\n Checkbox,\n Typography,\n Paper,\n CircularProgress,\n Alert,\n Divider\n} from '@mui/material';\nimport { useTranslation } from 'src/stores/localeStore';\n\nexport interface IconPackSettingsProps {\n lazyLoadingEnabled: boolean;\n onToggleLazyLoading: (enabled: boolean) => void;\n packInfo: Array<{\n name: string;\n displayName: string;\n loaded: boolean;\n loading: boolean;\n error: string | null;\n iconCount: number;\n }>;\n enabledPacks: string[];\n onTogglePack: (packName: string, enabled: boolean) => void;\n}\n\nexport const IconPackSettings: React.FC = ({\n lazyLoadingEnabled,\n onToggleLazyLoading,\n packInfo,\n enabledPacks,\n onTogglePack\n}) => {\n const { t } = useTranslation();\n\n const handleLazyLoadingChange = (event: React.ChangeEvent) => {\n onToggleLazyLoading(event.target.checked);\n };\n\n const handlePackToggle = (packName: string) => (event: React.ChangeEvent) => {\n onTogglePack(packName, event.target.checked);\n };\n\n return (\n \n \n {t('settings.iconPacks.title')}\n \n\n {/* Lazy Loading Toggle */}\n \n \n \n \n \n {t('settings.iconPacks.lazyLoading')}\n \n \n {t('settings.iconPacks.lazyLoadingDesc')}\n \n \n \n \n \n \n\n {/* Core Isoflow (Always Loaded) */}\n \n \n \n \n {t('settings.iconPacks.coreIsoflow')}\n \n \n {t('settings.iconPacks.alwaysEnabled')}\n \n \n \n \n \n\n {/* Available Icon Packs */}\n \n \n {t('settings.iconPacks.availablePacks')}\n \n\n {!lazyLoadingEnabled && (\n \n {t('settings.iconPacks.lazyLoadingDisabledNote')}\n \n )}\n\n \n {packInfo.map((pack) => (\n \n \n \n \n {pack.displayName}\n \n \n {pack.loading && (\n <>\n \n \n {t('settings.iconPacks.loading')}\n \n \n )}\n {pack.loaded && !pack.loading && (\n \n {t('settings.iconPacks.loaded')} • {t('settings.iconPacks.iconCount').replace('{count}', String(pack.iconCount))}\n \n )}\n {pack.error && (\n \n {pack.error}\n \n )}\n {!pack.loaded && !pack.loading && !pack.error && (\n \n {t('settings.iconPacks.notLoaded')}\n \n )}\n \n \n \n \n \n ))}\n \n \n\n \n\n \n {t('settings.iconPacks.note')}\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ImportHintTooltip/ImportHintTooltip.tsx", "content": "import React, { useState, useEffect } from 'react';\nimport { Box, IconButton, Paper, Typography } from '@mui/material';\nimport { Close as CloseIcon, FolderOpen as FolderOpenIcon } from '@mui/icons-material';\nimport { useTranslation } from 'src/stores/localeStore';\n\nconst STORAGE_KEY = 'fossflow_import_hint_dismissed';\n\nexport const ImportHintTooltip = () => {\n const { t } = useTranslation('importHintTooltip');\n const [isDismissed, setIsDismissed] = useState(true);\n\n useEffect(() => {\n // Check if the hint has been dismissed before\n const dismissed = localStorage.getItem(STORAGE_KEY);\n if (dismissed !== 'true') {\n setIsDismissed(false);\n }\n }, []);\n\n const handleDismiss = () => {\n setIsDismissed(true);\n localStorage.setItem(STORAGE_KEY, 'true');\n };\n\n if (isDismissed) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n \n \n \n {t('title')}\n \n \n \n \n {t('instructionStart')} {t('menuButton')} {t('instructionMiddle')} {t('openButton')} {t('instructionEnd')}\n \n \n \n );\n};" }, { "path": "packages/fossflow-lib/src/components/IsoTileArea/IsoTileArea.tsx", "content": "import React, { useMemo, memo } from 'react';\nimport { Coords } from 'src/types';\nimport { Svg } from 'src/components/Svg/Svg';\nimport { useIsoProjection } from 'src/hooks/useIsoProjection';\n\ninterface Props {\n from: Coords;\n to: Coords;\n origin?: Coords;\n fill?: string;\n cornerRadius?: number;\n stroke?: {\n width: number;\n color: string;\n dashArray?: string;\n };\n}\n\nexport const IsoTileArea = memo(({\n from,\n to,\n fill = 'none',\n cornerRadius = 0,\n stroke\n}: Props) => {\n const { css, pxSize } = useIsoProjection({\n from,\n to\n });\n\n const strokeParams = useMemo(() => {\n if (!stroke) return {};\n\n const params: Record = {\n stroke: stroke.color,\n strokeWidth: stroke.width\n };\n\n if (stroke.dashArray) {\n params.strokeDasharray = stroke.dashArray;\n }\n\n return params;\n }, [stroke]);\n\n return (\n \n \n \n );\n});\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/ConnectorControls/ConnectorControls.tsx", "content": "import React, { useState, useMemo } from 'react';\nimport {\n Connector,\n ConnectorLabel,\n connectorStyleOptions,\n connectorLineTypeOptions\n} from 'src/types';\nimport {\n Box,\n Slider,\n Select,\n MenuItem,\n TextField,\n IconButton as MUIIconButton,\n FormControlLabel,\n Switch,\n Typography,\n Button,\n Paper\n} from '@mui/material';\nimport { useConnector } from 'src/hooks/useConnector';\nimport { ColorSelector } from 'src/components/ColorSelector/ColorSelector';\nimport { ColorPicker } from 'src/components/ColorSelector/ColorPicker';\nimport { CustomColorInput } from 'src/components/ColorSelector/CustomColorInput';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useScene } from 'src/hooks/useScene';\nimport {\n Close as CloseIcon,\n Add as AddIcon,\n Delete as DeleteIcon\n} from '@mui/icons-material';\nimport { getConnectorLabels, generateId } from 'src/utils';\nimport { ControlsContainer } from '../components/ControlsContainer';\nimport { Section } from '../components/Section';\nimport { DeleteButton } from '../components/DeleteButton';\n\ninterface Props {\n id: string;\n}\n\nexport const ConnectorControls = ({ id }: Props) => {\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const connector = useConnector(id);\n const { updateConnector, deleteConnector } = useScene();\n const [useCustomColor, setUseCustomColor] = useState(\n !!connector?.customColor\n );\n\n // Get all labels (including migrated legacy labels)\n const labels = useMemo(() => {\n if (!connector) return [];\n return getConnectorLabels(connector);\n }, [connector]);\n\n // If connector doesn't exist, return null\n if (!connector) {\n return null;\n }\n\n const isDoubleLineType =\n connector.lineType === 'DOUBLE' ||\n connector.lineType === 'DOUBLE_WITH_CIRCLE';\n\n const handleAddLabel = () => {\n if (labels.length >= 256) return;\n\n const newLabel: ConnectorLabel = {\n id: generateId(),\n text: '',\n position: 50,\n height: 0,\n line: '1'\n };\n\n // Migrate legacy labels if needed and add new label\n const updatedLabels = [...labels, newLabel];\n updateConnector(connector.id, {\n labels: updatedLabels,\n // Clear legacy fields on first new label addition\n description: undefined,\n startLabel: undefined,\n endLabel: undefined,\n startLabelHeight: undefined,\n centerLabelHeight: undefined,\n endLabelHeight: undefined\n });\n };\n\n const handleUpdateLabel = (\n labelId: string,\n updates: Partial\n ) => {\n const updatedLabels = labels.map((label) => {\n return label.id === labelId ? { ...label, ...updates } : label;\n });\n\n updateConnector(connector.id, {\n labels: updatedLabels,\n // Clear legacy fields\n description: undefined,\n startLabel: undefined,\n endLabel: undefined,\n startLabelHeight: undefined,\n centerLabelHeight: undefined,\n endLabelHeight: undefined\n });\n };\n\n const handleDeleteLabel = (labelId: string) => {\n const updatedLabels = labels.filter((label) => {\n return label.id !== labelId;\n });\n updateConnector(connector.id, {\n labels: updatedLabels,\n // Clear legacy fields\n description: undefined,\n startLabel: undefined,\n endLabel: undefined,\n startLabelHeight: undefined,\n centerLabelHeight: undefined,\n endLabelHeight: undefined\n });\n };\n\n return (\n \n \n {/* Close button */}\n {\n return uiStateActions.setItemControls(null);\n }}\n sx={{\n position: 'absolute',\n top: 16,\n right: 16,\n zIndex: 2\n }}\n size=\"small\"\n >\n \n \n
\n \n \n \n {labels.length} / 256 labels\n \n }\n onClick={handleAddLabel}\n disabled={labels.length >= 256}\n size=\"small\"\n variant=\"outlined\"\n >\n Add Label\n \n \n\n {labels.length === 0 && (\n \n No labels. Click "Add Label" to create one.\n \n )}\n\n {labels.map((label, index) => {\n return (\n \n \n \n Label {index + 1}\n \n {\n return handleDeleteLabel(label.id);\n }}\n color=\"error\"\n >\n \n \n \n\n {\n return handleUpdateLabel(label.id, {\n text: e.target.value\n });\n }}\n fullWidth\n sx={{ mb: 2 }}\n />\n\n \n {\n const inputValue = e.target.value;\n\n // Allow empty input\n if (inputValue === '') {\n handleUpdateLabel(label.id, { position: 0 });\n return;\n }\n\n const value = parseInt(inputValue, 10);\n if (!Number.isNaN(value)) {\n handleUpdateLabel(label.id, {\n position: Math.max(0, Math.min(100, value))\n });\n }\n }}\n onBlur={(e) => {\n // On blur, ensure we have a valid value\n if (e.target.value === '') {\n handleUpdateLabel(label.id, { position: 0 });\n }\n }}\n inputProps={{ min: 0, max: 100 }}\n sx={{ flex: 1 }}\n />\n\n {isDoubleLineType && (\n {\n return handleUpdateLabel(label.id, {\n line: e.target.value as '1' | '2'\n });\n }}\n sx={{ flex: 1 }}\n >\n Line 1\n Line 2\n \n )}\n \n\n \n \n Height Offset\n \n {\n return handleUpdateLabel(label.id, {\n height: value as number\n });\n }}\n />\n \n\n \n {\n return handleUpdateLabel(label.id, {\n showLine: e.target.checked\n });\n }}\n />\n }\n label=\"Show Dotted Line\"\n />\n \n \n );\n })}\n \n
\n
\n {\n setUseCustomColor(e.target.checked);\n if (!e.target.checked) {\n updateConnector(connector.id, { customColor: '' });\n }\n }}\n />\n }\n label=\"Use Custom Color\"\n sx={{ mb: 2 }}\n />\n {useCustomColor ? (\n {\n updateConnector(connector.id, { customColor: color });\n }}\n />\n ) : (\n {\n return updateConnector(connector.id, {\n color,\n customColor: ''\n });\n }}\n activeColor={connector.color}\n />\n )}\n
\n
\n {\n updateConnector(connector.id, { width: newWidth as number });\n }}\n />\n
\n
\n {\n updateConnector(connector.id, {\n style: e.target.value as Connector['style']\n });\n }}\n fullWidth\n sx={{ mb: 2 }}\n >\n {Object.values(connectorStyleOptions).map((style) => {\n return (\n \n {style}\n \n );\n })}\n \n
\n
\n {\n updateConnector(connector.id, {\n lineType: e.target.value as Connector['lineType']\n });\n }}\n fullWidth\n >\n {Object.values(connectorLineTypeOptions).map((type) => {\n let displayName = 'Double Line with Circle';\n if (type === 'SINGLE') {\n displayName = 'Single Line';\n } else if (type === 'DOUBLE') {\n displayName = 'Double Line';\n }\n return (\n \n {displayName}\n \n );\n })}\n \n
\n
\n {\n updateConnector(connector.id, {\n showArrow: e.target.checked\n });\n }}\n />\n }\n label=\"Show Arrow\"\n />\n
\n
\n \n {\n uiStateActions.setItemControls(null);\n deleteConnector(connector.id);\n }}\n />\n \n
\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/IconSelectionControls/Icon.tsx", "content": "import React from 'react';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport { Button, Typography } from '@mui/material';\nimport { Icon as IconI } from 'src/types';\n\nconst SIZE = 50;\n\ninterface Props {\n icon: IconI;\n onClick?: () => void;\n onMouseDown?: () => void;\n onDoubleClick?: () => void;\n}\n\nexport const Icon = ({ icon, onClick, onMouseDown, onDoubleClick }: Props) => {\n return (\n \n \n \n \n {icon.isIsometric === false && (\n \n \n flat\n \n \n )}\n \n \n {icon.name}\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/IconSelectionControls/IconCollection.tsx", "content": "import React, { useState } from 'react';\nimport { Divider, Stack, Typography, Button } from '@mui/material';\nimport {\n ExpandMore as ChevronDownIcon,\n ExpandLess as ChevronUpIcon\n} from '@mui/icons-material';\nimport { Icon as IconI } from 'src/types';\nimport { Section } from 'src/components/ItemControls/components/Section';\nimport { IconGrid } from './IconGrid';\n\ninterface Props {\n id?: string;\n icons: IconI[];\n onClick?: (icon: IconI) => void;\n onMouseDown?: (icon: IconI) => void;\n isExpanded: boolean;\n}\n\nexport const IconCollection = ({\n id,\n icons,\n onClick,\n onMouseDown,\n isExpanded: _isExpanded\n}: Props) => {\n const [isExpanded, setIsExpanded] = useState(_isExpanded);\n\n return (\n
\n {\n return setIsExpanded(!isExpanded);\n }}\n >\n \n \n {id}\n \n {isExpanded ? (\n \n ) : (\n \n )}\n \n \n \n\n {isExpanded && (\n \n )}\n
\n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/IconSelectionControls/IconGrid.tsx", "content": "import React from 'react';\nimport { Icon as IconI } from 'src/types';\nimport { Grid, Box } from '@mui/material';\nimport { Icon } from './Icon';\n\ninterface Props {\n icons: IconI[];\n onMouseDown?: (icon: IconI) => void;\n onClick?: (icon: IconI) => void;\n onDoubleClick?: (icon: IconI) => void;\n hoveredIndex?: number;\n onHover?: (index: number) => void;\n}\n\nexport const IconGrid = ({ icons, onMouseDown, onClick, onDoubleClick, hoveredIndex, onHover }: Props) => {\n return (\n \n {icons.map((icon, index) => {\n const isHovered = hoveredIndex === index;\n return (\n \n onHover?.(index)}\n >\n {\n onClick?.(icon);\n }}\n onMouseDown={() => {\n onMouseDown?.(icon);\n }}\n onDoubleClick={() => {\n onDoubleClick?.(icon);\n }}\n />\n \n \n );\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/IconSelectionControls/IconSelectionControls.tsx", "content": "import React, { useCallback, useRef, useState } from 'react';\nimport { Stack, Alert, IconButton as MUIIconButton, Box, Button, FormControlLabel, Checkbox, Typography, Slider } from '@mui/material';\nimport { ControlsContainer } from 'src/components/ItemControls/components/ControlsContainer';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { Icon } from 'src/types';\nimport { Section } from 'src/components/ItemControls/components/Section';\nimport { Searchbox } from 'src/components/ItemControls/IconSelectionControls/Searchbox';\nimport { useIconFiltering } from 'src/hooks/useIconFiltering';\nimport { useIconCategories } from 'src/hooks/useIconCategories';\nimport { Close as CloseIcon, FileUpload as FileUploadIcon } from '@mui/icons-material';\nimport { Icons } from './Icons';\nimport { IconGrid } from './IconGrid';\nimport { generateId } from 'src/utils';\n\nexport const IconSelectionControls = () => {\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const mode = useUiStateStore((state) => {\n return state.mode;\n });\n const iconCategoriesState = useUiStateStore((state) => state.iconCategoriesState);\n const modelActions = useModelStore((state) => state.actions);\n const currentIcons = useModelStore((state) => state.icons);\n const { setFilter, filteredIcons, filter } = useIconFiltering();\n const { iconCategories } = useIconCategories();\n const fileInputRef = useRef(null);\n const [treatAsIsometric, setTreatAsIsometric] = useState(true);\n const [iconScale, setIconScale] = useState(100);\n const [showAlert, setShowAlert] = useState(() => {\n // Check localStorage to see if user has dismissed the alert\n return localStorage.getItem('fossflow-show-drag-hint') !== 'false';\n });\n\n\n const onMouseDown = useCallback(\n (icon: Icon) => {\n if (mode.type !== 'PLACE_ICON') return;\n\n uiStateActions.setMode({\n type: 'PLACE_ICON',\n showCursor: true,\n id: icon.id\n });\n },\n [mode, uiStateActions]\n );\n\n const handleImportClick = useCallback(() => {\n fileInputRef.current?.click();\n }, []);\n\n const dismissAlert = useCallback(() => {\n setShowAlert(false);\n localStorage.setItem('fossflow-show-drag-hint', 'false');\n }, []);\n\n const handleFileSelect = useCallback(async (event: React.ChangeEvent) => {\n const files = event.target.files;\n if (!files || files.length === 0) return;\n\n const newIcons: Icon[] = [];\n const existingNames = new Set(currentIcons.map(icon => icon.name.toLowerCase()));\n\n for (let i = 0; i < files.length; i++) {\n const file = files[i];\n \n // Check if file is an image\n if (!file.type.startsWith('image/')) {\n console.warn(`Skipping non-image file: ${file.name}`);\n continue;\n }\n\n // Generate unique name\n let baseName = file.name.replace(/\\.[^/.]+$/, ''); // Remove extension\n let finalName = baseName;\n let counter = 1;\n \n while (existingNames.has(finalName.toLowerCase())) {\n finalName = `${baseName}_${counter}`;\n counter++;\n }\n \n existingNames.add(finalName.toLowerCase());\n\n // Load and scale the image\n const dataUrl = await new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = async (e) => {\n const originalDataUrl = e.target?.result as string;\n \n // For SVG files, use as-is since they scale naturally\n if (file.type === 'image/svg+xml') {\n resolve(originalDataUrl);\n return;\n }\n \n // For raster images, scale them to fit in a square bounding box\n const img = new Image();\n img.onload = () => {\n // Create canvas for scaling\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n resolve(originalDataUrl); // Fallback to original\n return;\n }\n \n // Use a square target size for consistent display\n // This ensures all icons have the same bounding box\n const TARGET_SIZE = 128; // Square size for consistency\n \n // Calculate scaling to fit within square while maintaining aspect ratio\n const basScale = Math.min(TARGET_SIZE / img.width, TARGET_SIZE / img.height);\n // Apply user's custom scaling\n const finalScale = basScale * (iconScale / 100);\n const scaledWidth = img.width * finalScale;\n const scaledHeight = img.height * finalScale;\n \n // Set canvas to square size\n canvas.width = TARGET_SIZE;\n canvas.height = TARGET_SIZE;\n \n // Clear canvas with transparent background\n ctx.clearRect(0, 0, TARGET_SIZE, TARGET_SIZE);\n \n // Calculate position to center the image in the square\n const x = (TARGET_SIZE - scaledWidth) / 2;\n const y = (TARGET_SIZE - scaledHeight) / 2;\n \n // Enable image smoothing for better quality\n ctx.imageSmoothingEnabled = true;\n ctx.imageSmoothingQuality = 'high';\n \n // Draw scaled and centered image\n ctx.drawImage(img, x, y, scaledWidth, scaledHeight);\n \n // Convert to data URL (using PNG for transparency)\n resolve(canvas.toDataURL('image/png'));\n };\n img.onerror = () => reject(new Error('Failed to load image'));\n img.src = originalDataUrl;\n };\n reader.onerror = reject;\n reader.readAsDataURL(file);\n });\n\n newIcons.push({\n id: generateId(),\n name: finalName,\n url: dataUrl,\n collection: 'imported',\n isIsometric: treatAsIsometric // Use user's preference\n });\n }\n\n if (newIcons.length > 0) {\n // Add new icons to the model\n const updatedIcons = [...currentIcons, ...newIcons];\n modelActions.set({ icons: updatedIcons });\n \n // Update icon categories to include imported collection\n const hasImported = iconCategoriesState.some(cat => cat.id === 'imported');\n if (!hasImported) {\n uiStateActions.setIconCategoriesState([\n ...iconCategoriesState,\n { id: 'imported', isExpanded: true }\n ]);\n }\n }\n\n // Reset input\n event.target.value = '';\n }, [currentIcons, modelActions, iconCategoriesState, uiStateActions, treatAsIsometric, iconScale]);\n\n return (\n \n {/* Close button */}\n {\n return uiStateActions.setItemControls(null);\n }}\n sx={{\n position: 'absolute',\n top: 12,\n right: 12,\n zIndex: 2,\n padding: 0,\n background: 'none'\n }}\n size=\"small\"\n >\n \n \n \n \n \n \n \n \n }\n >\n {filteredIcons && (\n
\n \n
\n )}\n {!filteredIcons && (\n \n )}\n \n
\n \n }\n onClick={handleImportClick}\n fullWidth\n >\n Import Icons\n \n setTreatAsIsometric(e.target.checked)}\n size=\"small\"\n />\n }\n label={\n \n Treat as isometric (3D view)\n \n }\n sx={{ mt: 1, ml: 0 }}\n />\n \n Uncheck for flat icons (logos, UI elements)\n \n \n \n \n \n {showAlert && (\n \n You can drag and drop any item below onto the canvas.\n \n )}\n
\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/IconSelectionControls/Icons.tsx", "content": "import React from 'react';\nimport { Grid } from '@mui/material';\nimport { IconCollectionStateWithIcons, Icon } from 'src/types';\nimport { IconCollection } from './IconCollection';\n\ninterface Props {\n iconCategories: IconCollectionStateWithIcons[];\n onClick?: (icon: Icon) => void;\n onMouseDown?: (icon: Icon) => void;\n}\n\nexport const Icons = ({ iconCategories, onClick, onMouseDown }: Props) => {\n return (\n \n {iconCategories.map((cat) => {\n return (\n \n \n \n );\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/IconSelectionControls/Searchbox.tsx", "content": "import React from 'react';\nimport { TextField, InputAdornment } from '@mui/material';\nimport { Search as SearchIcon } from '@mui/icons-material';\n\ninterface Props {\n value: string;\n onChange: (value: string) => void;\n}\n\nexport const Searchbox = ({ value, onChange }: Props) => {\n return (\n {\n return onChange(e.target.value as string);\n }}\n InputProps={{\n startAdornment: (\n \n \n \n )\n }}\n />\n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/IconSelectionControls/__tests__/Icon.test.tsx", "content": "import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\nimport { Icon } from '../Icon';\nimport { Icon as IconI } from 'src/types';\n\ndescribe('Icon', () => {\n const flatIcon: IconI = {\n id: 'flaticon',\n name: 'flat icon',\n url: 'src/assets/grid-tile-bg.svg',\n isIsometric: false\n }\n\n const isometricIcon: IconI = {\n id: 'isoicon',\n name: 'isometric icon',\n url: 'src/assets/grid-tile-bg.svg',\n isIsometric: true\n }\n\n it(\"should show 'flat' label for non isometric icon\", () => {\n render(\n \n )\n const label = screen.getByText('flat')\n expect(label).toBeInTheDocument()\n })\n\n it(\"should not show 'flat' label for isometric icon\", () => {\n render(\n \n )\n expect(screen.queryByText('flat')).toBeNull()\n })\n})" }, { "path": "packages/fossflow-lib/src/components/ItemControls/ItemControlsManager.tsx", "content": "import React, { useMemo } from 'react';\nimport { Box } from '@mui/material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { IconSelectionControls } from 'src/components/ItemControls/IconSelectionControls/IconSelectionControls';\nimport { NodeControls } from './NodeControls/NodeControls';\nimport { ConnectorControls } from './ConnectorControls/ConnectorControls';\nimport { TextBoxControls } from './TextBoxControls/TextBoxControls';\nimport { RectangleControls } from './RectangleControls/RectangleControls';\n\nexport const ItemControlsManager = () => {\n const itemControls = useUiStateStore((state) => {\n return state.itemControls;\n });\n\n const Controls = useMemo(() => {\n switch (itemControls?.type) {\n case 'ITEM':\n return ;\n case 'CONNECTOR':\n return ;\n case 'TEXTBOX':\n return ;\n case 'RECTANGLE':\n return ;\n case 'ADD_ITEM':\n return ;\n default:\n return null;\n }\n }, [itemControls]);\n\n return (\n \n {Controls}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/NodeControls/NodeControls.tsx", "content": "import React, { useState, useCallback, useEffect } from 'react';\nimport { Box, Stack, Button, IconButton as MUIIconButton } from '@mui/material';\nimport {\n ChevronRight as ChevronRightIcon,\n ChevronLeft as ChevronLeftIcon,\n Close as CloseIcon\n} from '@mui/icons-material';\nimport { useIconCategories } from 'src/hooks/useIconCategories';\nimport { useIcon } from 'src/hooks/useIcon';\nimport { useScene } from 'src/hooks/useScene';\nimport { useViewItem } from 'src/hooks/useViewItem';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useModelItem } from 'src/hooks/useModelItem';\nimport { ControlsContainer } from '../components/ControlsContainer';\nimport { Icons } from '../IconSelectionControls/Icons';\nimport { NodeSettings } from './NodeSettings/NodeSettings';\nimport { Section } from '../components/Section';\nimport { QuickIconSelector } from './QuickIconSelector';\n\ninterface Props {\n id: string;\n}\n\nconst ModeOptions = {\n SETTINGS: 'SETTINGS',\n CHANGE_ICON: 'CHANGE_ICON'\n} as const;\n\ntype Mode = keyof typeof ModeOptions;\n\nexport const NodeControls = ({ id }: Props) => {\n const [mode, setMode] = useState('SETTINGS');\n const { updateModelItem, updateViewItem, deleteViewItem } = useScene();\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const viewItem = useViewItem(id);\n const modelItem = useModelItem(id);\n const { iconCategories } = useIconCategories();\n const { icon } = useIcon(modelItem?.icon || '');\n\n const onSwitchMode = useCallback((newMode: Mode) => {\n setMode(newMode);\n }, []);\n\n // Listen for quick icon change event (triggered by 'i' hotkey)\n useEffect(() => {\n const handleQuickIconChange = () => {\n setMode('CHANGE_ICON');\n };\n\n window.addEventListener('quickIconChange', handleQuickIconChange);\n return () => {\n window.removeEventListener('quickIconChange', handleQuickIconChange);\n };\n }, []);\n\n // If items don't exist, return null (component will unmount)\n if (!viewItem || !modelItem) {\n return null;\n }\n\n return (\n \n {\n return theme.customVars.customPalette.diagramBg;\n },\n position: 'relative'\n }}\n >\n {/* Close button */}\n {\n return uiStateActions.setItemControls(null);\n }}\n sx={{\n position: 'absolute',\n top: 8,\n right: 8,\n zIndex: 2\n }}\n size=\"small\"\n >\n \n \n
\n \n \n {mode === 'SETTINGS' && (\n }\n onClick={() => {\n onSwitchMode('CHANGE_ICON');\n }}\n variant=\"text\"\n >\n Update icon\n \n )}\n {mode === 'CHANGE_ICON' && (\n }\n onClick={() => {\n onSwitchMode('SETTINGS');\n }}\n variant=\"text\"\n >\n Settings\n \n )}\n \n
\n \n {mode === 'SETTINGS' && (\n {\n updateModelItem(viewItem.id, updates);\n }}\n onViewItemUpdated={(updates) => {\n updateViewItem(viewItem.id, updates);\n }}\n onDeleted={() => {\n uiStateActions.setItemControls(null);\n deleteViewItem(viewItem.id);\n }}\n />\n )}\n {mode === 'CHANGE_ICON' && (\n {\n updateModelItem(viewItem.id, { icon: _icon.id });\n }}\n onClose={() => {\n onSwitchMode('SETTINGS');\n }}\n />\n )}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/NodeControls/NodeSettings/NodeSettings.tsx", "content": "import React, { useState, useCallback, useEffect, useRef } from 'react';\nimport { Slider, Box, TextField } from '@mui/material';\nimport { ModelItem, ViewItem } from 'src/types';\nimport { RichTextEditor } from 'src/components/RichTextEditor/RichTextEditor';\nimport { useModelItem } from 'src/hooks/useModelItem';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { DeleteButton } from '../../components/DeleteButton';\nimport { Section } from '../../components/Section';\n\nexport type NodeUpdates = {\n model: Partial;\n view: Partial;\n};\n\ninterface Props {\n node: ViewItem;\n onModelItemUpdated: (updates: Partial) => void;\n onViewItemUpdated: (updates: Partial) => void;\n onDeleted: () => void;\n}\n\nexport const NodeSettings = ({\n node,\n onModelItemUpdated,\n onViewItemUpdated,\n onDeleted\n}: Props) => {\n const modelItem = useModelItem(node.id);\n const modelActions = useModelStore((state) => state.actions);\n const icons = useModelStore((state) => state.icons);\n \n // Local state for smooth slider interaction\n const currentIcon = icons.find(icon => icon.id === modelItem?.icon);\n const [localScale, setLocalScale] = useState(currentIcon?.scale || 1);\n const debounceRef = useRef(undefined);\n\n // Update local scale when icon changes\n useEffect(() => {\n setLocalScale(currentIcon?.scale || 1);\n }, [currentIcon?.scale]);\n\n // Debounced update to store\n const updateIconScale = useCallback((scale: number) => {\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n }\n \n debounceRef.current = setTimeout(() => {\n const updatedIcons = icons.map(icon => \n icon.id === modelItem?.icon \n ? { ...icon, scale }\n : icon\n );\n modelActions.set({ icons: updatedIcons });\n }, 100); // 100ms debounce\n }, [icons, modelItem?.icon, modelActions]);\n\n // Handle slider change with local state + debounced store update\n const handleScaleChange = useCallback((e: Event, newScale: number | number[]) => {\n const scale = newScale as number;\n setLocalScale(scale); // Immediate UI update\n updateIconScale(scale); // Debounced store update\n }, [updateIconScale]);\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n }\n };\n }, []);\n\n if (!modelItem) {\n return null;\n }\n\n return (\n <>\n
\n {\n const text = e.target.value as string;\n if (modelItem.name !== text) onModelItemUpdated({ name: text });\n }}\n />\n
\n
\n {\n if (modelItem.description !== text)\n onModelItemUpdated({ description: text });\n }}\n />\n
\n {modelItem.name && (\n
\n {\n const labelHeight = newHeight as number;\n onViewItemUpdated({ labelHeight });\n }}\n />\n
\n )}\n\n
\n \n
\n
\n \n \n \n
\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/NodeControls/QuickIconSelector.tsx", "content": "import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';\nimport { Box, Stack, Typography, Divider, TextField, InputAdornment, Alert } from '@mui/material';\nimport { Search as SearchIcon } from '@mui/icons-material';\nimport { Icon } from 'src/types';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { useIconCategories } from 'src/hooks/useIconCategories';\nimport { IconGrid } from '../IconSelectionControls/IconGrid';\nimport { Icons } from '../IconSelectionControls/Icons';\nimport { Section } from '../components/Section';\n\ninterface Props {\n onIconSelected: (icon: Icon) => void;\n onClose?: () => void;\n currentIconId?: string;\n}\n\n// Store recently used icons in localStorage\nconst RECENT_ICONS_KEY = 'fossflow-recent-icons';\nconst MAX_RECENT_ICONS = 12;\n\nconst getRecentIcons = (): string[] => {\n try {\n const stored = localStorage.getItem(RECENT_ICONS_KEY);\n return stored ? JSON.parse(stored) : [];\n } catch {\n return [];\n }\n};\n\nconst addToRecentIcons = (iconId: string) => {\n const recent = getRecentIcons();\n // Remove if already exists and add to front\n const filtered = recent.filter(id => id !== iconId);\n const updated = [iconId, ...filtered].slice(0, MAX_RECENT_ICONS);\n localStorage.setItem(RECENT_ICONS_KEY, JSON.stringify(updated));\n};\n\n// Escape special regex characters\nconst escapeRegex = (str: string): string => {\n return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n};\n\nexport const QuickIconSelector = ({ onIconSelected, onClose, currentIconId }: Props) => {\n const [searchTerm, setSearchTerm] = useState('');\n const [hoveredIndex, setHoveredIndex] = useState(0);\n const searchInputRef = useRef(null);\n \n const icons = useModelStore((state) => state.icons);\n const { iconCategories } = useIconCategories();\n\n // Get recently used icons\n const recentIconIds = useMemo(() => getRecentIcons(), []);\n const recentIcons = useMemo(() => {\n return recentIconIds\n .map(id => icons.find(icon => icon.id === id))\n .filter(Boolean) as Icon[];\n }, [recentIconIds, icons]);\n\n // Filter icons based on search\n const filteredIcons = useMemo(() => {\n if (!searchTerm) return null;\n \n try {\n // Escape special regex characters to prevent errors\n const escapedSearch = escapeRegex(searchTerm);\n const regex = new RegExp(escapedSearch, 'gi');\n return icons.filter(icon => regex.test(icon.name));\n } catch (e) {\n // If regex still fails somehow, fall back to simple includes\n const lowerSearch = searchTerm.toLowerCase();\n return icons.filter(icon => icon.name.toLowerCase().includes(lowerSearch));\n }\n }, [searchTerm, icons]);\n\n // Focus search input on mount\n useEffect(() => {\n searchInputRef.current?.focus();\n }, []);\n\n // Handle keyboard navigation\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n // Only handle navigation if we're showing search results\n if (!filteredIcons || filteredIcons.length === 0) return;\n \n const itemsPerRow = 4; // Adjust based on your grid layout\n const totalItems = filteredIcons.length;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n setHoveredIndex(prev => \n Math.min(prev + itemsPerRow, totalItems - 1)\n );\n break;\n case 'ArrowUp':\n e.preventDefault();\n setHoveredIndex(prev => \n Math.max(prev - itemsPerRow, 0)\n );\n break;\n case 'ArrowLeft':\n e.preventDefault();\n setHoveredIndex(prev => \n prev > 0 ? prev - 1 : prev\n );\n break;\n case 'ArrowRight':\n e.preventDefault();\n setHoveredIndex(prev => \n prev < totalItems - 1 ? prev + 1 : prev\n );\n break;\n case 'Enter':\n e.preventDefault();\n if (filteredIcons[hoveredIndex]) {\n handleIconSelect(filteredIcons[hoveredIndex]);\n }\n break;\n case 'Escape':\n e.preventDefault();\n onClose?.();\n break;\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [filteredIcons, hoveredIndex, onClose]);\n\n const handleIconSelect = useCallback((icon: Icon) => {\n addToRecentIcons(icon.id);\n onIconSelected(icon);\n }, [onIconSelected]);\n\n const handleIconDoubleClick = useCallback((icon: Icon) => {\n handleIconSelect(icon);\n onClose?.();\n }, [handleIconSelect, onClose]);\n\n return (\n \n
\n \n {/* Search Box */}\n {\n setSearchTerm(e.target.value);\n setHoveredIndex(0); // Reset hover when searching\n }}\n InputProps={{\n startAdornment: (\n \n \n \n )\n }}\n size=\"small\"\n autoFocus\n />\n\n {/* Recently Used Icons - Show when no search */}\n {!searchTerm && recentIcons.length > 0 && (\n <>\n \n RECENTLY USED\n \n \n \n \n )}\n \n
\n\n {/* Search Results */}\n {searchTerm && filteredIcons && (\n <>\n
\n \n SEARCH RESULTS ({filteredIcons.length} icons)\n \n
\n \n \n {filteredIcons.length > 0 ? (\n
\n \n
\n ) : (\n
\n No icons found matching \"{searchTerm}\"\n
\n )}\n \n \n )}\n\n {/* Original Icon Libraries - Show when no search */}\n {!searchTerm && (\n \n {}} // Not needed for selection\n />\n \n )}\n\n {/* Help Text */}\n
\n \n {searchTerm \n ? 'Use arrow keys to navigate • Enter to select • Double-click to select and close'\n : 'Type to search • Click category to expand • Double-click to select and close'\n }\n \n
\n \n );\n};" }, { "path": "packages/fossflow-lib/src/components/ItemControls/RectangleControls/RectangleControls.tsx", "content": "import React, { useState } from 'react';\nimport { Box, IconButton as MUIIconButton, FormControlLabel, Switch, Typography } from '@mui/material';\nimport { useRectangle } from 'src/hooks/useRectangle';\nimport { ColorSelector } from 'src/components/ColorSelector/ColorSelector';\nimport { ColorPicker } from 'src/components/ColorSelector/ColorPicker';\nimport { CustomColorInput } from 'src/components/ColorSelector/CustomColorInput';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useScene } from 'src/hooks/useScene';\nimport { Close as CloseIcon } from '@mui/icons-material';\nimport { ControlsContainer } from '../components/ControlsContainer';\nimport { Section } from '../components/Section';\nimport { DeleteButton } from '../components/DeleteButton';\n\ninterface Props {\n id: string;\n}\n\nexport const RectangleControls = ({ id }: Props) => {\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const rectangle = useRectangle(id);\n const { updateRectangle, deleteRectangle } = useScene();\n const [useCustomColor, setUseCustomColor] = useState(!!rectangle?.customColor);\n\n // If rectangle doesn't exist, return null\n if (!rectangle) {\n return null;\n }\n\n return (\n \n \n {/* Close button */}\n {\n return uiStateActions.setItemControls(null);\n }}\n sx={{\n position: 'absolute',\n top: 8,\n right: 8,\n zIndex: 2\n }}\n size=\"small\"\n >\n \n \n
\n {\n setUseCustomColor(e.target.checked);\n if (!e.target.checked) {\n updateRectangle(rectangle.id, { customColor: '' });\n }\n }}\n />\n }\n label=\"Use Custom Color\"\n sx={{ mb: 2 }}\n />\n {useCustomColor ? (\n {\n updateRectangle(rectangle.id, { customColor: color });\n }}\n />\n ) : (\n {\n updateRectangle(rectangle.id, { color, customColor: '' });\n }}\n activeColor={rectangle.color}\n />\n )}\n
\n
\n \n {\n uiStateActions.setItemControls(null);\n deleteRectangle(rectangle.id);\n }}\n />\n \n
\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/TextBoxControls/TextBoxControls.tsx", "content": "import React from 'react';\nimport { ProjectionOrientationEnum } from 'src/types';\nimport {\n Box,\n TextField,\n ToggleButton,\n ToggleButtonGroup,\n Slider,\n IconButton as MUIIconButton\n} from '@mui/material';\nimport {\n TextRotationNone as TextRotationNoneIcon,\n Close as CloseIcon\n} from '@mui/icons-material';\nimport { useTextBox } from 'src/hooks/useTextBox';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { getIsoProjectionCss } from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\nimport { ControlsContainer } from '../components/ControlsContainer';\nimport { Section } from '../components/Section';\nimport { DeleteButton } from '../components/DeleteButton';\n\ninterface Props {\n id: string;\n}\n\nexport const TextBoxControls = ({ id }: Props) => {\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const textBox = useTextBox(id);\n const { updateTextBox, deleteTextBox } = useScene();\n\n // If textBox doesn't exist, return null\n if (!textBox) {\n return null;\n }\n\n return (\n \n \n {/* Close button */}\n {\n return uiStateActions.setItemControls(null);\n }}\n sx={{\n position: 'absolute',\n top: 16,\n right: 16,\n zIndex: 2\n }}\n size=\"small\"\n >\n \n \n
\n {\n updateTextBox(textBox.id, { content: e.target.value as string });\n }}\n />\n
\n
\n {\n updateTextBox(textBox.id, { fontSize: newSize as number });\n }}\n />\n
\n
\n {\n if (textBox.orientation === orientation || orientation === null)\n return;\n\n updateTextBox(textBox.id, { orientation });\n }}\n >\n \n \n \n \n \n \n \n
\n
\n \n {\n uiStateActions.setItemControls(null);\n deleteTextBox(textBox.id);\n }}\n />\n \n
\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/components/ControlsContainer.tsx", "content": "import React from 'react';\nimport { Box, Divider } from '@mui/material';\n\ninterface Props {\n header?: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport const ControlsContainer = ({ header, children }: Props) => {\n return (\n e.stopPropagation()}\n onContextMenu={e => e.stopPropagation()}\n sx={{\n position: 'relative',\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n pb: 2\n }}\n >\n {header && (\n \n {header}\n \n \n )}\n \n {children}\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/components/DeleteButton.tsx", "content": "import React from 'react';\nimport { DeleteOutlined as DeleteIcon } from '@mui/icons-material';\nimport { Button } from '@mui/material';\n\ninterface Props {\n onClick: () => void;\n}\n\nexport const DeleteButton = ({ onClick }: Props) => {\n return (\n }\n onClick={onClick}\n >\n Delete\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/components/Header.tsx", "content": "import React from 'react';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Grid from '@mui/material/Grid';\nimport { Section } from './Section';\n\ninterface Props {\n title: string;\n}\n\nexport const Header = ({ title }: Props) => {\n return (\n
\n \n \n \n \n {title}\n \n \n \n \n
\n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ItemControls/components/Section.tsx", "content": "import React from 'react';\nimport { Box, SxProps, Typography, Stack } from '@mui/material';\n\ninterface Props {\n children: React.ReactNode;\n title?: string;\n sx?: SxProps;\n}\n\nexport const Section = ({ children, sx, title }: Props) => {\n return (\n \n \n {title && (\n \n {title}\n \n )}\n {children}\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/Label/ExpandButton.tsx", "content": "import React from 'react';\nimport { Button as MuiButton, SxProps } from '@mui/material';\nimport {\n ExpandMore as ReadMoreIcon,\n ExpandLess as ReadLessIcon\n} from '@mui/icons-material';\n\ninterface Props {\n isExpanded: boolean;\n onClick: () => void;\n sx?: SxProps;\n}\n\nexport const ExpandButton = ({ isExpanded, onClick, sx }: Props) => {\n return (\n \n {isExpanded ? (\n \n ) : (\n \n )}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/Label/ExpandableLabel.tsx", "content": "import React, { useState, useRef, useEffect, useMemo } from 'react';\nimport { Box } from '@mui/material';\nimport { useResizeObserver } from 'src/hooks/useResizeObserver';\nimport { Gradient } from 'src/components/Gradient/Gradient';\nimport { ExpandButton } from './ExpandButton';\nimport { Label, Props as LabelProps } from './Label';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\n\ntype Props = Omit & {\n onToggleExpand?: (isExpanded: boolean) => void;\n};\n\nconst STANDARD_LABEL_HEIGHT = 80;\n\nexport const ExpandableLabel = ({\n children,\n onToggleExpand,\n ...rest\n}: Props) => {\n const forceExpandLabels = useUiStateStore((state) => state.expandLabels);\n const editorMode = useUiStateStore((state) => state.editorMode);\n const labelSettings = useUiStateStore((state) => state.labelSettings);\n const [isExpanded, setIsExpanded] = useState(false);\n const contentRef = useRef(null);\n const { observe, size: contentSize } = useResizeObserver();\n\n useEffect(() => {\n if (!contentRef.current) return;\n\n observe(contentRef.current);\n }, [observe]);\n\n const effectiveExpanded = useMemo(() => {\n // Only force expand in NON_INTERACTIVE mode (export preview)\n const shouldForceExpand = forceExpandLabels && editorMode === 'NON_INTERACTIVE';\n return shouldForceExpand || isExpanded;\n }, [forceExpandLabels, isExpanded, editorMode]);\n\n const containerMaxHeight = useMemo(() => {\n return effectiveExpanded ? undefined : STANDARD_LABEL_HEIGHT;\n }, [effectiveExpanded]);\n\n const isContentTruncated = useMemo(() => {\n return !effectiveExpanded && contentSize.height >= STANDARD_LABEL_HEIGHT - 10;\n }, [effectiveExpanded, contentSize.height]);\n\n // Determine overflow behavior based on mode\n const overflowBehavior = useMemo(() => {\n if (editorMode === 'NON_INTERACTIVE') {\n // In export mode, no overflow needed - container expands to fit\n return 'visible';\n }\n // In interactive modes, use scroll when expanded, hidden when collapsed\n return effectiveExpanded ? 'scroll' : 'hidden';\n }, [editorMode, effectiveExpanded]);\n\n useEffect(() => {\n contentRef.current?.scrollTo({ top: 0 });\n }, [effectiveExpanded]);\n\n return (\n \n \n {children}\n\n {isContentTruncated && (\n \n )}\n \n\n {editorMode !== 'NON_INTERACTIVE' && ((!isExpanded && isContentTruncated) || isExpanded) && (\n {\n setIsExpanded(!isExpanded);\n onToggleExpand?.(!isExpanded);\n }}\n />\n )}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/Label/Label.tsx", "content": "import React, { useRef } from 'react';\nimport { Box, SxProps } from '@mui/material';\n\nconst CONNECTOR_DOT_SIZE = 3;\n\nexport interface Props {\n labelHeight?: number;\n maxWidth: number;\n maxHeight?: number;\n expandDirection?: 'CENTER' | 'BOTTOM';\n children: React.ReactNode;\n sx?: SxProps;\n showLine?: boolean;\n}\n\nexport const Label = ({\n children,\n maxWidth,\n maxHeight,\n expandDirection = 'CENTER',\n labelHeight = 0,\n sx,\n showLine = true\n}: Props) => {\n const contentRef = useRef(null);\n\n return (\n \n {labelHeight > 0 && showLine && (\n \n \n \n )}\n\n \n {children}\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/Label/__tests__/Label.test.tsx", "content": "import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { ThemeProvider } from '@mui/material/styles';\nimport { theme } from 'src/styles/theme';\nimport { Label } from '../Label';\n\nconst renderWithTheme = (ui: React.ReactElement) => {\n return render({ui});\n};\n\ndescribe('Label', () => {\n describe('dotted line', () => {\n it('should render dotted line with pointerEvents none to not block clicks', () => {\n const { container } = renderWithTheme(\n \n );\n\n // Find the SVG element (the dotted line container)\n const svg = container.querySelector('svg');\n expect(svg).toBeTruthy();\n\n // Check that the SVG has pointerEvents set to none\n const svgStyles = window.getComputedStyle(svg!);\n expect(svgStyles.pointerEvents).toBe('none');\n });\n\n it('should not render dotted line when labelHeight is 0', () => {\n const { container } = renderWithTheme(\n \n );\n\n const svg = container.querySelector('svg');\n expect(svg).toBeNull();\n });\n\n it('should not render dotted line when showLine is false', () => {\n const { container } = renderWithTheme(\n \n );\n\n const svg = container.querySelector('svg');\n expect(svg).toBeNull();\n });\n\n it('should render children correctly', () => {\n renderWithTheme(\n \n );\n\n expect(screen.getByTestId('label-content')).toHaveTextContent(\n 'Test Label Content'\n );\n });\n });\n});\n" }, { "path": "packages/fossflow-lib/src/components/LabelSettings/LabelSettings.tsx", "content": "import React from 'react';\nimport {\n Box,\n Typography,\n Slider\n} from '@mui/material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\n\nexport const LabelSettings = () => {\n const labelSettings = useUiStateStore((state) => state.labelSettings);\n const setLabelSettings = useUiStateStore((state) => state.actions.setLabelSettings);\n\n const handlePaddingChange = (_event: Event, value: number | number[]) => {\n setLabelSettings({\n ...labelSettings,\n expandButtonPadding: value as number\n });\n };\n\n return (\n \n \n Configure label display settings\n \n\n \n \n Expand Button Padding\n \n \n Bottom padding when expand button is visible (prevents text overlap)\n \n \n \n Current: {labelSettings.expandButtonPadding} theme units\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/Lasso/Lasso.tsx", "content": "import React from 'react';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { IsoTileArea } from 'src/components/IsoTileArea/IsoTileArea';\n\nexport const Lasso = () => {\n const modeType = useUiStateStore((state) => state.mode.type);\n const selection = useUiStateStore((state) =>\n state.mode.type === 'LASSO' ? state.mode.selection : null\n );\n\n if (modeType !== 'LASSO' || !selection) {\n return null;\n }\n\n const { startTile, endTile } = selection;\n\n return (\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/LassoHintTooltip/LassoHintTooltip.tsx", "content": "import React, { useState, useEffect } from 'react';\nimport { Box, IconButton, Paper, Typography, useTheme } from '@mui/material';\nimport { Close as CloseIcon } from '@mui/icons-material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useTranslation } from 'src/stores/localeStore';\n\nconst STORAGE_KEY = 'fossflow_lasso_hint_dismissed';\n\ninterface Props {\n toolMenuRef?: React.RefObject;\n}\n\nexport const LassoHintTooltip = ({ toolMenuRef }: Props) => {\n const { t } = useTranslation('lassoHintTooltip');\n const theme = useTheme();\n const modeType = useUiStateStore((state) => state.mode.type);\n const [isDismissed, setIsDismissed] = useState(true);\n const [position, setPosition] = useState({ top: 16, right: 16 });\n\n useEffect(() => {\n // Check if the hint has been dismissed before\n const dismissed = localStorage.getItem(STORAGE_KEY);\n if (dismissed !== 'true') {\n setIsDismissed(false);\n }\n }, []);\n\n useEffect(() => {\n // Calculate position based on toolbar\n if (toolMenuRef?.current) {\n const toolMenuRect = toolMenuRef.current.getBoundingClientRect();\n // Position tooltip below the toolbar with some spacing\n setPosition({\n top: toolMenuRect.bottom + 16,\n right: 16\n });\n } else {\n // Fallback position if no toolbar ref\n const appPadding = theme.customVars?.appPadding || { x: 16, y: 16 };\n setPosition({\n top: appPadding.y + 500, // Approximate toolbar height\n right: appPadding.x\n });\n }\n }, [toolMenuRef, theme]);\n\n const handleDismiss = () => {\n setIsDismissed(true);\n localStorage.setItem(STORAGE_KEY, 'true');\n };\n\n // Only show when in LASSO or FREEHAND_LASSO mode\n if (isDismissed || (modeType !== 'LASSO' && modeType !== 'FREEHAND_LASSO')) {\n return null;\n }\n\n const isFreehandMode = modeType === 'FREEHAND_LASSO';\n\n return (\n \n \n \n \n \n\n \n {isFreehandMode ? t('tipFreehandLasso') : t('tipLasso')}\n \n\n \n {isFreehandMode ? (\n <>\n {t('freehandDragStart')} {t('freehandDragMiddle')} {t('freehandDragEnd')} {t('freehandComplete')}\n \n ) : (\n <>\n {t('lassoDragStart')} {t('lassoDragEnd')}\n \n )}\n \n\n \n {t('moveStart')} {t('moveMiddle')} {t('moveEnd')}\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/LazyLoadingWelcomeNotification/LazyLoadingWelcomeNotification.tsx", "content": "import React, { useState, useEffect } from 'react';\nimport { Box, IconButton, Paper, Typography, useTheme } from '@mui/material';\nimport { Close as CloseIcon, Menu as MenuIcon } from '@mui/icons-material';\nimport { useTranslation } from 'src/stores/localeStore';\n\nconst STORAGE_KEY = 'fossflow-lazy-loading-welcome-dismissed';\n\nexport const LazyLoadingWelcomeNotification = () => {\n const { t } = useTranslation('lazyLoadingWelcome');\n const theme = useTheme();\n const [isDismissed, setIsDismissed] = useState(true);\n\n useEffect(() => {\n // Check if the notification has been dismissed before\n const dismissed = localStorage.getItem(STORAGE_KEY);\n if (dismissed !== 'true') {\n setIsDismissed(false);\n }\n }, []);\n\n const handleDismiss = () => {\n setIsDismissed(true);\n localStorage.setItem(STORAGE_KEY, 'true');\n };\n\n if (isDismissed) {\n return null;\n }\n\n return (\n \n \n \n \n \n\n \n {t('title')}\n \n\n \n {t('message')}\n \n\n \n \n \n {t('configPath')} {t('configPath2')}\n \n \n\n \n {t('canDisable')}\n \n\n \n {t('signature')}\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/Loader/Loader.tsx", "content": "import React from 'react';\nimport { Box, CircularProgress, CircularProgressProps } from '@mui/material';\n\ninterface Props {\n size?: number;\n color?: CircularProgressProps['color'];\n isInline?: boolean;\n}\n\nexport const Loader = ({ size = 1, color = 'primary', isInline }: Props) => {\n return (\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/MainMenu/MainMenu.tsx", "content": "import React, { useState, useCallback, useMemo } from 'react';\nimport { Menu, Typography, Divider, Card } from '@mui/material';\nimport {\n Menu as MenuIcon,\n GitHub as GitHubIcon,\n DataObject as ExportJsonIcon,\n ImageOutlined as ExportImageIcon,\n FolderOpen as FolderOpenIcon,\n DeleteOutline as DeleteOutlineIcon,\n Undo as UndoIcon,\n Redo as RedoIcon,\n Settings as SettingsIcon,\n\n} from '@mui/icons-material';\nimport { UiElement } from 'src/components/UiElement/UiElement';\nimport { IconButton } from 'src/components/IconButton/IconButton';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport {\n exportAsJSON,\n exportAsCompactJSON,\n transformFromCompactFormat\n} from 'src/utils/exportOptions';\nimport { modelFromModelStore } from 'src/utils';\nimport { useInitialDataManager } from 'src/hooks/useInitialDataManager';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { useHistory } from 'src/hooks/useHistory';\nimport { DialogTypeEnum } from 'src/types/ui';\nimport { MenuItem } from './MenuItem';\nimport { useTranslation } from 'src/stores/localeStore';\n\nexport const MainMenu = () => {\n const [anchorEl, setAnchorEl] = useState(null);\n const model = useModelStore((state) => {\n return modelFromModelStore(state);\n });\n const isMainMenuOpen = useUiStateStore((state) => {\n return state.isMainMenuOpen;\n });\n const mainMenuOptions = useUiStateStore((state) => {\n return state.mainMenuOptions;\n });\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const initialDataManager = useInitialDataManager();\n const { undo, redo, canUndo, canRedo, clearHistory } = useHistory();\n\n const { t } = useTranslation('mainMenu');\n\n const onToggleMenu = useCallback(\n (event: React.MouseEvent) => {\n setAnchorEl(event.currentTarget);\n uiStateActions.setIsMainMenuOpen(true);\n },\n [uiStateActions]\n );\n\n const gotoUrl = useCallback((url: string) => {\n window.open(url, '_blank');\n }, []);\n\n const { load } = initialDataManager;\n\n const onOpenModel = useCallback(async () => {\n const fileInput = document.createElement('input');\n fileInput.type = 'file';\n fileInput.accept = 'application/json';\n\n fileInput.onchange = async (event) => {\n const file = (event.target as HTMLInputElement).files?.[0];\n\n if (!file) {\n throw new Error('No file selected');\n }\n\n const fileReader = new FileReader();\n\n fileReader.onload = async (e) => {\n const rawData = JSON.parse(e.target?.result as string);\n let modelData = rawData;\n\n // Check format and transform if needed\n if (rawData._?.f === 'compact') {\n modelData = transformFromCompactFormat(rawData);\n }\n\n load(modelData);\n clearHistory(); // Clear history when loading new model\n };\n fileReader.readAsText(file);\n\n uiStateActions.resetUiState();\n };\n\n await fileInput.click();\n uiStateActions.setIsMainMenuOpen(false);\n }, [uiStateActions, load, clearHistory]);\n\n const onExportAsJSON = useCallback(async () => {\n exportAsJSON(model);\n uiStateActions.setIsMainMenuOpen(false);\n }, [model, uiStateActions]);\n\n const onExportAsCompactJSON = useCallback(async () => {\n exportAsCompactJSON(model);\n uiStateActions.setIsMainMenuOpen(false);\n }, [model, uiStateActions]);\n\n const onExportAsImage = useCallback(() => {\n uiStateActions.setIsMainMenuOpen(false);\n uiStateActions.setDialog(DialogTypeEnum.EXPORT_IMAGE);\n }, [uiStateActions]);\n\n const { clear } = initialDataManager;\n\n const onClearCanvas = useCallback(() => {\n clear();\n clearHistory(); // Clear history when clearing canvas\n uiStateActions.setIsMainMenuOpen(false);\n }, [uiStateActions, clear, clearHistory]);\n\n const handleUndo = useCallback(() => {\n undo();\n uiStateActions.setIsMainMenuOpen(false);\n }, [undo, uiStateActions]);\n\n const handleRedo = useCallback(() => {\n redo();\n uiStateActions.setIsMainMenuOpen(false);\n }, [redo, uiStateActions]);\n\n const onOpenSettings = useCallback(() => {\n uiStateActions.setIsMainMenuOpen(false);\n uiStateActions.setDialog(DialogTypeEnum.SETTINGS);\n }, [uiStateActions]);\n\n\n\n\n const sectionVisibility = useMemo(() => {\n return {\n actions: Boolean(\n mainMenuOptions.find((opt) => {\n return opt.includes('ACTION') || opt.includes('EXPORT');\n })\n ),\n links: Boolean(\n mainMenuOptions.find((opt) => {\n return opt.includes('LINK');\n })\n ),\n version: Boolean(mainMenuOptions.includes('VERSION'))\n };\n }, [mainMenuOptions]);\n\n if (mainMenuOptions.length === 0) {\n return null;\n }\n\n return (\n \n }\n name=\"Main menu\"\n onClick={onToggleMenu}\n isActive={isMainMenuOpen}\n />\n\n {\n uiStateActions.setIsMainMenuOpen(false);\n }}\n elevation={0}\n sx={{\n mt: 2\n }}\n MenuListProps={{\n sx: {\n minWidth: '250px',\n py: 0\n }\n }}\n >\n \n {/* Undo/Redo Section */}\n }\n disabled={!canUndo}\n >\n {t('undo')}\n \n\n }\n disabled={!canRedo}\n >\n {t('redo')}\n \n\n\n {(canUndo || canRedo) && sectionVisibility.actions && }\n\n {/* File Actions */}\n {mainMenuOptions.includes('ACTION.OPEN') && (\n }>\n {t('open')}\n \n )}\n\n {mainMenuOptions.includes('EXPORT.JSON') && (\n }>\n {t('exportJson')}\n \n )}\n\n {mainMenuOptions.includes('EXPORT.JSON') && (\n }>\n {t('exportCompactJson')}\n \n )}\n\n {mainMenuOptions.includes('EXPORT.PNG') && (\n }>\n {t('exportImage')}\n \n )}\n\n {mainMenuOptions.includes('ACTION.CLEAR_CANVAS') && (\n }>\n {t('clearCanvas')}\n \n )}\n\n \n\n }>\n {t('settings')}\n \n\n {sectionVisibility.links && (\n <>\n \n\n {mainMenuOptions.includes('LINK.GITHUB') && (\n {\n return gotoUrl(`${REPOSITORY_URL}`);\n }}\n Icon={}\n >\n {t('gitHub')}\n \n )}\n \n )}\n\n {sectionVisibility.version && (\n <>\n \n\n {mainMenuOptions.includes('VERSION') && (\n \n \n FossFLOW v{PACKAGE_VERSION}\n \n \n )}\n \n )}\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/MainMenu/MenuItem.tsx", "content": "import React from 'react';\nimport { MenuItem as MuiMenuItem, ListItemIcon } from '@mui/material';\n\nexport interface Props {\n onClick?: () => void;\n Icon?: React.ReactNode;\n children: string | React.ReactNode;\n disabled?: boolean;\n}\n\nexport const MenuItem = ({\n onClick,\n Icon,\n children,\n disabled = false\n}: Props) => {\n return (\n \n {Icon}\n {children}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/PanSettings/PanSettings.tsx", "content": "import React from 'react';\nimport {\n Box,\n Typography,\n FormControlLabel,\n Switch,\n Slider,\n Paper,\n Divider\n} from '@mui/material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useTranslation } from 'src/stores/localeStore';\n\nexport const PanSettings = () => {\n const panSettings = useUiStateStore((state) => state.panSettings);\n const setPanSettings = useUiStateStore((state) => state.actions.setPanSettings);\n const { t } = useTranslation();\n\n const handleToggle = (setting: keyof typeof panSettings) => {\n if (typeof panSettings[setting] === 'boolean') {\n setPanSettings({\n ...panSettings,\n [setting]: !panSettings[setting]\n });\n }\n };\n\n const handleSpeedChange = (value: number) => {\n setPanSettings({\n ...panSettings,\n keyboardPanSpeed: value\n });\n };\n\n return (\n \n \n {t('settings.pan.title')}\n \n\n \n \n {t('settings.pan.mousePanOptions')}\n \n\n handleToggle('emptyAreaClickPan')}\n />\n }\n label={t('settings.pan.emptyAreaClickPan')}\n />\n\n handleToggle('middleClickPan')}\n />\n }\n label={t('settings.pan.middleClickPan')}\n />\n\n handleToggle('rightClickPan')}\n />\n }\n label={t('settings.pan.rightClickPan')}\n />\n\n handleToggle('ctrlClickPan')}\n />\n }\n label={t('settings.pan.ctrlClickPan')}\n />\n\n handleToggle('altClickPan')}\n />\n }\n label={t('settings.pan.altClickPan')}\n />\n \n\n \n \n {t('settings.pan.keyboardPanOptions')}\n \n\n handleToggle('arrowKeysPan')}\n />\n }\n label={t('settings.pan.arrowKeys')}\n />\n\n handleToggle('wasdPan')}\n />\n }\n label={t('settings.pan.wasdKeys')}\n />\n\n handleToggle('ijklPan')}\n />\n }\n label={t('settings.pan.ijklKeys')}\n />\n\n \n\n \n {t('settings.pan.keyboardPanSpeed')}\n \n\n \n handleSpeedChange(value as number)}\n min={5}\n max={50}\n step={5}\n marks\n valueLabelDisplay=\"auto\"\n />\n \n \n\n \n {t('settings.pan.note')}\n \n \n );\n};" }, { "path": "packages/fossflow-lib/src/components/Renderer/Renderer.tsx", "content": "import React, { useEffect, useMemo, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useInteractionManager } from 'src/interaction/useInteractionManager';\nimport { Grid } from 'src/components/Grid/Grid';\nimport { Cursor } from 'src/components/Cursor/Cursor';\nimport { Nodes } from 'src/components/SceneLayers/Nodes/Nodes';\nimport { Rectangles } from 'src/components/SceneLayers/Rectangles/Rectangles';\nimport { Connectors } from 'src/components/SceneLayers/Connectors/Connectors';\nimport { ConnectorLabels } from 'src/components/SceneLayers/ConnectorLabels/ConnectorLabels';\nimport { TextBoxes } from 'src/components/SceneLayers/TextBoxes/TextBoxes';\nimport { SizeIndicator } from 'src/components/DebugUtils/SizeIndicator';\nimport { SceneLayer } from 'src/components/SceneLayer/SceneLayer';\nimport { TransformControlsManager } from 'src/components/TransformControlsManager/TransformControlsManager';\nimport { Lasso } from 'src/components/Lasso/Lasso';\nimport { FreehandLasso } from 'src/components/FreehandLasso/FreehandLasso';\nimport { useScene } from 'src/hooks/useScene';\nimport { RendererProps } from 'src/types/rendererProps';\n\nexport const Renderer = ({ showGrid, backgroundColor }: RendererProps) => {\n const containerRef = useRef(null);\n const interactionsRef = useRef(null);\n const enableDebugTools = useUiStateStore((state) => {\n return state.enableDebugTools;\n });\n const showCursor = useUiStateStore((state) => {\n return state.mode.showCursor;\n });\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const { setInteractionsElement } = useInteractionManager();\n const { items, rectangles, connectors, textBoxes } = useScene();\n\n useEffect(() => {\n if (!containerRef.current || !interactionsRef.current) return;\n\n setInteractionsElement(interactionsRef.current);\n uiStateActions.setRendererEl(containerRef.current);\n }, [setInteractionsElement, uiStateActions]);\n\n const isShowGrid = useMemo(() => {\n return showGrid === undefined || showGrid;\n }, [showGrid]);\n\n return (\n backgroundColor === 'transparent' ? 'transparent' : (backgroundColor ?? theme.customVars.customPalette.diagramBg)\n }}\n >\n \n \n \n \n \n \n \n \n {isShowGrid && }\n \n {showCursor && (\n \n \n \n )}\n \n \n \n \n \n \n \n \n \n {enableDebugTools && (\n \n \n \n )}\n {/* Interaction layer: this is where events are detected */}\n \n \n \n \n \n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/RichTextEditor/RichTextEditor.tsx", "content": "import React, { useMemo } from 'react';\nimport ReactQuill from 'react-quill-new';\nimport { Box } from '@mui/material';\nimport RichTextEditorErrorBoundary from './RichTextEditorErrorBoundary';\n\ninterface Props {\n value?: string;\n onChange?: (value: string) => void;\n readOnly?: boolean;\n height?: number;\n styles?: React.CSSProperties;\n}\n\n// Rich text formatting tools\nconst tools = [\n 'bold',\n 'italic',\n 'underline',\n 'strike',\n 'link',\n { header: [1, 2, 3, false] },\n { list: 'ordered' },\n { list: 'bullet' },\n 'blockquote',\n 'code-block'\n];\n\n// Formats that Quill should recognize\nconst formats = [\n 'bold',\n 'italic',\n 'underline',\n 'strike',\n 'link',\n 'header',\n 'list',\n 'bullet',\n 'blockquote',\n 'code-block'\n];\n\nexport const RichTextEditor = ({\n value,\n onChange,\n readOnly,\n height = 120,\n styles\n}: Props) => {\n const modules = useMemo(() => {\n if (!readOnly)\n return {\n toolbar: tools\n };\n\n return { toolbar: false };\n }, [readOnly]);\n\n return (\n \n \n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/RichTextEditor/RichTextEditorErrorBoundary.tsx", "content": "import React, { Component, ReactNode } from 'react';\n\ninterface ErrorBoundaryProps {\n children: ReactNode;\n fallback?: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n hasError: boolean;\n errorCount: number;\n}\n\nclass RichTextEditorErrorBoundary extends Component {\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = {\n hasError: false,\n errorCount: 0\n };\n }\n\n static getDerivedStateFromError(error: Error): Partial | null {\n // Check if this is the specific DOM manipulation error we're trying to handle\n if (\n error.message.includes('removeChild') ||\n error.message.includes('insertBefore') ||\n error.message.includes('appendChild')\n ) {\n // Return state update to trigger re-render\n return {\n hasError: true,\n errorCount: 0\n };\n }\n // For other errors, let them propagate\n return null;\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n // Log the error for debugging purposes\n if (error.message.includes('removeChild') ||\n error.message.includes('insertBefore') ||\n error.message.includes('appendChild')) {\n console.warn('RichTextEditor DOM manipulation error caught and handled:', {\n message: error.message,\n componentStack: errorInfo.componentStack\n });\n\n // Prevent infinite error loops by tracking error count\n this.setState(prevState => ({\n errorCount: prevState.errorCount + 1\n }));\n\n // If we get too many errors in a row, show fallback\n if (this.state.errorCount > 3) {\n console.error('Too many RichTextEditor errors, showing fallback');\n return;\n }\n\n // Schedule a recovery attempt after the current render cycle\n setTimeout(() => {\n this.setState({\n hasError: false\n });\n }, 0);\n }\n }\n\n componentDidUpdate(_prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState) {\n // Reset error state if we successfully rendered after an error\n if (prevState.hasError && !this.state.hasError) {\n this.setState({ errorCount: 0 });\n }\n }\n\n render() {\n if (this.state.hasError && this.state.errorCount > 3) {\n // If too many errors, show fallback or placeholder\n return this.props.fallback || (\n
\n Rich text editor temporarily unavailable\n
\n );\n }\n\n // Normal render or retry after error\n return this.props.children;\n }\n}\n\nexport default RichTextEditorErrorBoundary;" }, { "path": "packages/fossflow-lib/src/components/RichTextEditor/index.ts", "content": "export { RichTextEditor } from './RichTextEditor';\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayer/SceneLayer.tsx", "content": "import React, { useRef, useEffect, useState, memo } from 'react';\nimport gsap from 'gsap';\nimport { Box, SxProps } from '@mui/material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\n\ninterface Props {\n children?: React.ReactNode;\n order?: number;\n sx?: SxProps;\n disableAnimation?: boolean;\n}\n\nexport const SceneLayer = memo(({\n children,\n order = 0,\n sx,\n disableAnimation\n}: Props) => {\n const [isFirstRender, setIsFirstRender] = useState(true);\n const elementRef = useRef(null);\n\n const scroll = useUiStateStore((state) => {\n return state.scroll;\n });\n const zoom = useUiStateStore((state) => {\n return state.zoom;\n });\n\n useEffect(() => {\n if (!elementRef.current) return;\n\n gsap.to(elementRef.current, {\n duration: disableAnimation || isFirstRender ? 0 : 0.016, // ~1 frame at 60fps for smooth motion\n ease: 'none', // Linear easing for immediate response\n translateX: scroll.position.x,\n translateY: scroll.position.y,\n scale: zoom\n });\n\n if (isFirstRender) {\n setIsFirstRender(false);\n }\n }, [zoom, scroll, disableAnimation, isFirstRender]);\n\n return (\n \n {children}\n \n );\n});\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/ConnectorLabels/ConnectorLabel.tsx", "content": "import React, { useMemo, memo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { useScene } from 'src/hooks/useScene';\nimport { useConnector } from 'src/hooks/useConnector';\nimport {\n connectorPathTileToGlobal,\n getTilePosition,\n getConnectorLabels,\n getLabelTileIndex\n} from 'src/utils';\nimport { PROJECTED_TILE_SIZE, UNPROJECTED_TILE_SIZE } from 'src/config';\nimport { Label } from 'src/components/Label/Label';\nimport { ConnectorLabel as ConnectorLabelType } from 'src/types';\n\ninterface Props {\n connector: ReturnType['connectors'][0];\n}\n\nexport const ConnectorLabel = memo(({ connector: sceneConnector }: Props) => {\n const connector = useConnector(sceneConnector.id);\n\n const labels = useMemo(() => {\n if (!connector) return [];\n return getConnectorLabels(connector);\n }, [connector]);\n\n // Calculate label positions based on percentage and line assignment\n const labelPositions = useMemo(() => {\n if (!connector) return [];\n\n\n return labels\n .map((label) => {\n const tileIndex = getLabelTileIndex(\n sceneConnector.path.tiles.length,\n label.position\n );\n const tile = sceneConnector.path.tiles[tileIndex];\n\n if (!tile) return null;\n\n let position = getTilePosition({\n tile: connectorPathTileToGlobal(\n tile,\n sceneConnector.path.rectangle.from\n )\n });\n\n // For double line types, offset labels based on line assignment\n const lineType = connector.lineType || 'SINGLE';\n if (\n (lineType === 'DOUBLE' || lineType === 'DOUBLE_WITH_CIRCLE') &&\n label.line === '2'\n ) {\n // Calculate offset perpendicular to line direction\n const { tiles } = sceneConnector.path;\n if (tileIndex > 0 && tileIndex < tiles.length - 1) {\n const prev = tiles[tileIndex - 1];\n const next = tiles[tileIndex + 1];\n const dx = next.x - prev.x;\n const dy = next.y - prev.y;\n const len = Math.sqrt(dx * dx + dy * dy) || 1;\n\n // Perpendicular offset (matches the offset in Connector.tsx)\n const connectorWidthPx =\n (UNPROJECTED_TILE_SIZE / 100) * (connector.width || 15);\n const offset = connectorWidthPx * 3;\n const perpX = -dy / len;\n const perpY = dx / len;\n\n position = {\n x: position.x - perpX * offset,\n y: position.y - perpY * offset\n };\n }\n }\n\n return { label, position };\n })\n .filter(\n (\n item\n ): item is {\n label: ConnectorLabelType;\n position: { x: number; y: number };\n } => {\n return item !== null;\n }\n );\n }, [labels, sceneConnector.path, connector?.lineType, connector?.width]);\n\n return (\n <>\n {labelPositions.map(({ label, position }) => {\n return (\n \n \n \n {label.text}\n \n \n \n );\n })}\n \n );\n});\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/ConnectorLabels/ConnectorLabels.tsx", "content": "import React from 'react';\nimport { useScene } from 'src/hooks/useScene';\nimport { ConnectorLabel } from './ConnectorLabel';\n\ninterface Props {\n connectors: ReturnType['connectors'];\n}\n\nexport const ConnectorLabels = ({ connectors }: Props) => {\n return (\n <>\n {connectors\n .filter((connector) => {\n return Boolean(\n connector.description ||\n connector.startLabel ||\n connector.endLabel ||\n (connector.labels && connector.labels.length > 0)\n );\n })\n .map((connector) => {\n return ;\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/Connectors/Connector.tsx", "content": "import React, { useMemo, memo } from 'react';\nimport { useTheme, Box } from '@mui/material';\nimport { UNPROJECTED_TILE_SIZE } from 'src/config';\nimport {\n getAnchorTile,\n getColorVariant,\n getConnectorDirectionIcon\n} from 'src/utils';\nimport { Circle } from 'src/components/Circle/Circle';\nimport { Svg } from 'src/components/Svg/Svg';\nimport { useIsoProjection } from 'src/hooks/useIsoProjection';\nimport { useConnector } from 'src/hooks/useConnector';\nimport { useScene } from 'src/hooks/useScene';\nimport { useColor } from 'src/hooks/useColor';\n\ninterface Props {\n connector: ReturnType['connectors'][0];\n isSelected?: boolean;\n}\n\nexport const Connector = memo(({ connector: _connector, isSelected }: Props) => {\n const theme = useTheme();\n const predefinedColor = useColor(_connector.color);\n const { currentView } = useScene();\n const connector = useConnector(_connector.id);\n\n if (!connector) {\n return null;\n }\n\n // Use custom color if provided, otherwise use predefined color\n const color = connector.customColor \n ? { value: connector.customColor }\n : predefinedColor;\n \n if (!color) {\n return null;\n }\n\n const { css, pxSize } = useIsoProjection({\n ...connector.path.rectangle\n });\n\n const drawOffset = useMemo(() => {\n return {\n x: UNPROJECTED_TILE_SIZE / 2,\n y: UNPROJECTED_TILE_SIZE / 2\n };\n }, []);\n\n const connectorWidthPx = useMemo(() => {\n return (UNPROJECTED_TILE_SIZE / 100) * connector.width;\n }, [connector.width]);\n\n const pathString = useMemo(() => {\n return connector.path.tiles.reduce((acc, tile) => {\n return `${acc} ${tile.x * UNPROJECTED_TILE_SIZE + drawOffset.x},${\n tile.y * UNPROJECTED_TILE_SIZE + drawOffset.y\n }`;\n }, '');\n }, [connector.path.tiles, drawOffset]);\n\n // Create offset paths for double lines\n const offsetPaths = useMemo(() => {\n if (!connector.lineType || connector.lineType === 'SINGLE') return null;\n \n const tiles = connector.path.tiles;\n if (tiles.length < 2) return null;\n \n const offset = connectorWidthPx * 3; // Larger spacing between double lines for visibility\n const path1Points: string[] = [];\n const path2Points: string[] = [];\n \n for (let i = 0; i < tiles.length; i++) {\n const curr = tiles[i];\n let dx = 0, dy = 0;\n \n // Calculate perpendicular offset based on line direction\n if (i > 0 && i < tiles.length - 1) {\n const prev = tiles[i - 1];\n const next = tiles[i + 1];\n const dx1 = curr.x - prev.x;\n const dy1 = curr.y - prev.y;\n const dx2 = next.x - curr.x;\n const dy2 = next.y - curr.y;\n \n // Average direction for smooth corners\n const avgDx = (dx1 + dx2) / 2;\n const avgDy = (dy1 + dy2) / 2;\n const len = Math.sqrt(avgDx * avgDx + avgDy * avgDy) || 1;\n \n // Perpendicular vector\n dx = -avgDy / len;\n dy = avgDx / len;\n } else if (i === 0 && tiles.length > 1) {\n // Start point\n const next = tiles[1];\n const dirX = next.x - curr.x;\n const dirY = next.y - curr.y;\n const len = Math.sqrt(dirX * dirX + dirY * dirY) || 1;\n dx = -dirY / len;\n dy = dirX / len;\n } else if (i === tiles.length - 1 && tiles.length > 1) {\n // End point\n const prev = tiles[i - 1];\n const dirX = curr.x - prev.x;\n const dirY = curr.y - prev.y;\n const len = Math.sqrt(dirX * dirX + dirY * dirY) || 1;\n dx = -dirY / len;\n dy = dirX / len;\n }\n \n const x = curr.x * UNPROJECTED_TILE_SIZE + drawOffset.x;\n const y = curr.y * UNPROJECTED_TILE_SIZE + drawOffset.y;\n \n path1Points.push(`${x + dx * offset},${y + dy * offset}`);\n path2Points.push(`${x - dx * offset},${y - dy * offset}`);\n }\n \n return {\n path1: path1Points.join(' '),\n path2: path2Points.join(' ')\n };\n }, [connector.path.tiles, connector.lineType, connectorWidthPx, drawOffset]);\n\n const anchorPositions = useMemo(() => {\n if (!isSelected) return [];\n\n return connector.anchors.map((anchor) => {\n const position = getAnchorTile(anchor, currentView);\n\n return {\n id: anchor.id,\n x:\n (connector.path.rectangle.from.x - position.x) *\n UNPROJECTED_TILE_SIZE +\n drawOffset.x,\n y:\n (connector.path.rectangle.from.y - position.y) *\n UNPROJECTED_TILE_SIZE +\n drawOffset.y\n };\n });\n }, [\n currentView,\n connector.path.rectangle,\n connector.anchors,\n drawOffset,\n isSelected\n ]);\n\n const directionIcon = useMemo(() => {\n return getConnectorDirectionIcon(connector.path.tiles);\n }, [connector.path.tiles]);\n\n const strokeDashArray = useMemo(() => {\n switch (connector.style) {\n case 'DASHED':\n return `${connectorWidthPx * 2}, ${connectorWidthPx * 2}`;\n case 'DOTTED':\n return `0, ${connectorWidthPx * 1.8}`;\n case 'SOLID':\n default:\n return 'none';\n }\n }, [connector.style, connectorWidthPx]);\n\n const lineType = connector.lineType || 'SINGLE';\n\n return (\n \n \n {lineType === 'SINGLE' ? (\n <>\n \n \n \n ) : offsetPaths ? (\n <>\n {/* First line of double */}\n \n \n {/* Second line of double */}\n \n \n \n ) : null}\n\n {/* Circle for port-channel representation */}\n {lineType === 'DOUBLE_WITH_CIRCLE' && connector.path.tiles.length >= 2 && (() => {\n const midIndex = Math.floor(connector.path.tiles.length / 2);\n const midTile = connector.path.tiles[midIndex];\n const x = midTile.x * UNPROJECTED_TILE_SIZE + drawOffset.x;\n const y = midTile.y * UNPROJECTED_TILE_SIZE + drawOffset.y;\n \n // Calculate rotation based on line direction at middle point\n let rotation = 0;\n if (midIndex > 0 && midIndex < connector.path.tiles.length - 1) {\n const prevTile = connector.path.tiles[midIndex - 1];\n const nextTile = connector.path.tiles[midIndex + 1];\n const dx = nextTile.x - prevTile.x;\n const dy = nextTile.y - prevTile.y;\n rotation = Math.atan2(dy, dx) * (180 / Math.PI);\n }\n \n // Increased size to encompass both lines with the spacing\n const circleRadiusX = connectorWidthPx * 5; // Wider to cover both lines\n const circleRadiusY = connectorWidthPx * 4; // Height to encompass both lines\n \n return (\n \n \n \n \n );\n })()}\n\n {anchorPositions.map((anchor) => {\n return (\n \n \n \n \n );\n })}\n\n {directionIcon && connector.showArrow !== false && (\n \n \n \n \n \n )}\n \n \n );\n});\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/Connectors/Connectors.tsx", "content": "import React, { useMemo } from 'react';\nimport type { useScene } from 'src/hooks/useScene';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { Connector } from './Connector';\n\ninterface Props {\n connectors: ReturnType['connectors'];\n}\n\nexport const Connectors = ({ connectors }: Props) => {\n const itemControls = useUiStateStore((state) => {\n return state.itemControls;\n });\n\n const mode = useUiStateStore((state) => {\n return state.mode;\n });\n\n const selectedConnectorId = useMemo(() => {\n if (mode.type === 'CONNECTOR') {\n return mode.id;\n }\n if (itemControls?.type === 'CONNECTOR') {\n return itemControls.id;\n }\n\n return null;\n }, [mode, itemControls]);\n\n return (\n <>\n {[...connectors].reverse().map((connector) => {\n return (\n \n );\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/Nodes/Node/IconTypes/IsometricIcon.tsx", "content": "import React, { useRef, useEffect } from 'react';\nimport { Box } from '@mui/material';\nimport { PROJECTED_TILE_SIZE } from 'src/config';\nimport { useResizeObserver } from 'src/hooks/useResizeObserver';\n\ninterface Props {\n url: string;\n scale?: number;\n onImageLoaded?: () => void;\n}\n\nexport const IsometricIcon = ({ url, scale = 1, onImageLoaded }: Props) => {\n const ref = useRef(null);\n const { observe, disconnect } = useResizeObserver();\n\n useEffect(() => {\n if (!ref.current) return;\n\n observe(ref.current);\n\n return disconnect;\n }, [observe, disconnect]);\n\n return (\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/Nodes/Node/IconTypes/NonIsometricIcon.tsx", "content": "import React from 'react';\nimport { Box } from '@mui/material';\nimport { Icon } from 'src/types';\nimport { PROJECTED_TILE_SIZE } from 'src/config';\nimport { getIsoProjectionCss } from 'src/utils';\n\ninterface Props {\n icon: Icon;\n}\n\nexport const NonIsometricIcon = ({ icon }: Props) => {\n return (\n \n \n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/Nodes/Node/Node.tsx", "content": "import React, { useMemo, memo } from 'react';\nimport { Box, Typography, Stack } from '@mui/material';\nimport {\n PROJECTED_TILE_SIZE,\n DEFAULT_LABEL_HEIGHT,\n MARKDOWN_EMPTY_VALUE\n} from 'src/config';\nimport { getTilePosition } from 'src/utils';\nimport { useIcon } from 'src/hooks/useIcon';\nimport { ViewItem } from 'src/types';\nimport { useModelItem } from 'src/hooks/useModelItem';\nimport { ExpandableLabel } from 'src/components/Label/ExpandableLabel';\nimport { RichTextEditor } from 'src/components/RichTextEditor/RichTextEditor';\n\ninterface Props {\n node: ViewItem;\n order: number;\n}\n\nexport const Node = memo(({ node, order }: Props) => {\n const modelItem = useModelItem(node.id);\n const { iconComponent } = useIcon(modelItem?.icon);\n\n const position = useMemo(() => {\n return getTilePosition({\n tile: node.tile,\n origin: 'BOTTOM'\n });\n }, [node.tile]);\n\n const description = useMemo(() => {\n if (\n !modelItem ||\n modelItem.description === undefined ||\n modelItem.description === MARKDOWN_EMPTY_VALUE\n )\n return null;\n\n return modelItem.description;\n }, [modelItem?.description]);\n\n // If modelItem doesn't exist, don't render the node\n if (!modelItem) {\n return null;\n }\n\n return (\n \n \n {(modelItem?.name || description) && (\n \n \n \n {modelItem.name && (\n {modelItem.name}\n )}\n {modelItem.description &&\n modelItem.description !== MARKDOWN_EMPTY_VALUE && (\n \n )}\n \n \n \n )}\n {iconComponent && (\n \n {iconComponent}\n \n )}\n \n \n );\n});\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/Nodes/Nodes.tsx", "content": "import React from 'react';\nimport { ViewItem } from 'src/types';\nimport { Node } from './Node/Node';\n\ninterface Props {\n nodes: ViewItem[];\n}\n\nexport const Nodes = ({ nodes }: Props) => {\n return (\n <>\n {[...nodes].reverse().map((node) => {\n return (\n \n );\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/Rectangles/Rectangle.tsx", "content": "import React, { memo } from 'react';\nimport { useScene } from 'src/hooks/useScene';\nimport { IsoTileArea } from 'src/components/IsoTileArea/IsoTileArea';\nimport { getColorVariant } from 'src/utils';\nimport { useColor } from 'src/hooks/useColor';\n\ntype Props = ReturnType['rectangles'][0];\n\nexport const Rectangle = memo(({ from, to, color: colorId, customColor }: Props) => {\n const predefinedColor = useColor(colorId);\n \n // Use custom color if provided, otherwise use predefined color\n const color = customColor \n ? { value: customColor }\n : predefinedColor;\n\n if (!color) {\n return null;\n }\n\n return (\n \n );\n});\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/Rectangles/Rectangles.tsx", "content": "import React from 'react';\nimport { useScene } from 'src/hooks/useScene';\nimport { Rectangle } from './Rectangle';\n\ninterface Props {\n rectangles: ReturnType['rectangles'];\n}\n\nexport const Rectangles = ({ rectangles }: Props) => {\n return (\n <>\n {[...rectangles].reverse().map((rectangle) => {\n return ;\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/TextBoxes/TextBox.tsx", "content": "import React, { useMemo, memo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { toPx, CoordsUtils } from 'src/utils';\nimport { useIsoProjection } from 'src/hooks/useIsoProjection';\nimport { useTextBoxProps } from 'src/hooks/useTextBoxProps';\nimport { useScene } from 'src/hooks/useScene';\n\ninterface Props {\n textBox: ReturnType['textBoxes'][0];\n}\n\nexport const TextBox = memo(({ textBox }: Props) => {\n const { paddingX, fontProps } = useTextBoxProps(textBox);\n\n const to = useMemo(() => {\n return CoordsUtils.add(textBox.tile, {\n x: textBox.size.width,\n y: 0\n });\n }, [textBox.tile, textBox.size.width]);\n\n const { css } = useIsoProjection({\n from: textBox.tile,\n to,\n orientation: textBox.orientation\n });\n\n return (\n \n \n \n {textBox.content}\n \n \n \n );\n});\n" }, { "path": "packages/fossflow-lib/src/components/SceneLayers/TextBoxes/TextBoxes.tsx", "content": "import React from 'react';\nimport { useScene } from 'src/hooks/useScene';\nimport { TextBox } from './TextBox';\n\ninterface Props {\n textBoxes: ReturnType['textBoxes'];\n}\n\nexport const TextBoxes = ({ textBoxes }: Props) => {\n return (\n <>\n {[...textBoxes].reverse().map((textBox) => {\n return ;\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/SettingsDialog/SettingsDialog.tsx", "content": "import React, { useState } from 'react';\nimport {\n Dialog,\n DialogTitle,\n DialogContent,\n DialogActions,\n Button,\n IconButton,\n Tabs,\n Tab,\n Box\n} from '@mui/material';\nimport { Close as CloseIcon } from '@mui/icons-material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { HotkeySettings } from '../HotkeySettings/HotkeySettings';\nimport { PanSettings } from '../PanSettings/PanSettings';\nimport { ZoomSettings } from '../ZoomSettings/ZoomSettings';\nimport { LabelSettings } from '../LabelSettings/LabelSettings';\nimport { ConnectorSettings } from '../ConnectorSettings/ConnectorSettings';\nimport { IconPackSettings } from '../IconPackSettings/IconPackSettings';\nimport { useTranslation } from 'src/stores/localeStore';\n\nexport interface SettingsDialogProps {\n iconPackManager?: {\n lazyLoadingEnabled: boolean;\n onToggleLazyLoading: (enabled: boolean) => void;\n packInfo: Array<{\n name: string;\n displayName: string;\n loaded: boolean;\n loading: boolean;\n error: string | null;\n iconCount: number;\n }>;\n enabledPacks: string[];\n onTogglePack: (packName: string, enabled: boolean) => void;\n };\n}\n\nexport const SettingsDialog = ({ iconPackManager }: SettingsDialogProps) => {\n const dialog = useUiStateStore((state) => state.dialog);\n const setDialog = useUiStateStore((state) => state.actions.setDialog);\n const [tabValue, setTabValue] = useState(0);\n const { t } = useTranslation();\n\n const isOpen = dialog === 'SETTINGS';\n\n const handleClose = () => {\n setDialog(null);\n };\n\n const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {\n setTabValue(newValue);\n };\n\n return (\n \n \n Settings\n theme.palette.grey[500],\n }}\n >\n \n \n \n \n \n \n \n \n \n \n {iconPackManager && }\n \n\n \n {tabValue === 0 && }\n {tabValue === 1 && }\n {tabValue === 2 && }\n {tabValue === 3 && }\n {tabValue === 4 && }\n {tabValue === 5 && iconPackManager && (\n \n )}\n \n \n \n \n \n \n );\n};" }, { "path": "packages/fossflow-lib/src/components/Svg/Svg.tsx", "content": "import React, { useMemo } from 'react';\nimport { Size } from 'src/types';\n\ntype Props = React.SVGProps & {\n children: React.ReactNode;\n style?: React.CSSProperties;\n viewboxSize?: Size;\n};\n\nexport const Svg = ({ children, style, viewboxSize, ...rest }: Props) => {\n const dimensionProps = useMemo(() => {\n if (!viewboxSize) return {};\n\n return {\n viewBox: `0 0 ${viewboxSize.width} ${viewboxSize.height}`,\n width: `${viewboxSize.width}px`,\n height: `${viewboxSize.height}px`\n };\n }, [viewboxSize]);\n\n return (\n \n {children}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ToolMenu/ToolMenu.tsx", "content": "import React, { useCallback } from 'react';\nimport { Stack, Divider } from '@mui/material';\nimport {\n PanToolOutlined as PanToolIcon,\n NearMeOutlined as NearMeIcon,\n AddOutlined as AddIcon,\n EastOutlined as ConnectorIcon,\n CropSquareOutlined as CropSquareIcon,\n Title as TitleIcon,\n Undo as UndoIcon,\n Redo as RedoIcon,\n Help as HelpIcon,\n HighlightAltOutlined as LassoIcon,\n GestureOutlined as FreehandLassoIcon\n} from '@mui/icons-material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { IconButton } from 'src/components/IconButton/IconButton';\nimport { UiElement } from 'src/components/UiElement/UiElement';\nimport { useScene } from 'src/hooks/useScene';\nimport { useHistory } from 'src/hooks/useHistory';\nimport { TEXTBOX_DEFAULTS } from 'src/config';\nimport { generateId } from 'src/utils';\nimport { HOTKEY_PROFILES } from 'src/config/hotkeys';\n\nexport const ToolMenu = () => {\n const { createTextBox } = useScene();\n const { undo, redo, canUndo, canRedo } = useHistory();\n const mode = useUiStateStore((state) => {\n return state.mode;\n });\n const uiStateStoreActions = useUiStateStore((state) => {\n return state.actions;\n });\n const mousePosition = useUiStateStore((state) => {\n return state.mouse.position.tile;\n });\n const hotkeyProfile = useUiStateStore((state) => {\n return state.hotkeyProfile;\n });\n\n const hotkeys = HOTKEY_PROFILES[hotkeyProfile];\n\n const handleUndo = useCallback(() => {\n undo();\n }, [undo]);\n\n const handleRedo = useCallback(() => {\n redo();\n }, [redo]);\n\n const createTextBoxProxy = useCallback(() => {\n const textBoxId = generateId();\n\n createTextBox({\n ...TEXTBOX_DEFAULTS,\n id: textBoxId,\n tile: mousePosition\n });\n\n uiStateStoreActions.setMode({\n type: 'TEXTBOX',\n showCursor: false,\n id: textBoxId\n });\n }, [uiStateStoreActions, createTextBox, mousePosition]);\n\n return (\n \n \n {/* Undo/Redo Section */}\n }\n onClick={handleUndo}\n disabled={!canUndo}\n />\n }\n onClick={handleRedo}\n disabled={!canRedo}\n />\n\n {/* Main Tools */}\n }\n onClick={() => {\n uiStateStoreActions.setMode({\n type: 'CURSOR',\n showCursor: true,\n mousedownItem: null\n });\n }}\n isActive={mode.type === 'CURSOR' || mode.type === 'DRAG_ITEMS'}\n />\n }\n onClick={() => {\n uiStateStoreActions.setMode({\n type: 'LASSO',\n showCursor: true,\n selection: null,\n isDragging: false\n });\n }}\n isActive={mode.type === 'LASSO'}\n />\n }\n onClick={() => {\n uiStateStoreActions.setMode({\n type: 'FREEHAND_LASSO',\n showCursor: true,\n path: [],\n selection: null,\n isDragging: false\n });\n }}\n isActive={mode.type === 'FREEHAND_LASSO'}\n />\n }\n onClick={() => {\n uiStateStoreActions.setMode({\n type: 'PAN',\n showCursor: false\n });\n\n uiStateStoreActions.setItemControls(null);\n }}\n isActive={mode.type === 'PAN'}\n />\n }\n onClick={() => {\n uiStateStoreActions.setItemControls({\n type: 'ADD_ITEM'\n });\n uiStateStoreActions.setMode({\n type: 'PLACE_ICON',\n showCursor: true,\n id: null\n });\n }}\n isActive={mode.type === 'PLACE_ICON'}\n />\n }\n onClick={() => {\n uiStateStoreActions.setMode({\n type: 'RECTANGLE.DRAW',\n showCursor: true,\n id: null\n });\n }}\n isActive={mode.type === 'RECTANGLE.DRAW'}\n />\n }\n onClick={() => {\n uiStateStoreActions.setMode({\n type: 'CONNECTOR',\n id: null,\n showCursor: true\n });\n }}\n isActive={mode.type === 'CONNECTOR'}\n />\n }\n onClick={createTextBoxProxy}\n isActive={mode.type === 'TEXTBOX'}\n />\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/TransformControlsManager/NodeTransformControls.tsx", "content": "import React from 'react';\nimport { useViewItem } from 'src/hooks/useViewItem';\nimport { TransformControls } from './TransformControls';\n\ninterface Props {\n id: string;\n}\n\nexport const NodeTransformControls = ({ id }: Props) => {\n const node = useViewItem(id);\n\n if (!node) {\n return null;\n }\n\n return ;\n};\n" }, { "path": "packages/fossflow-lib/src/components/TransformControlsManager/RectangleTransformControls.tsx", "content": "import React, { useCallback } from 'react';\nimport { useRectangle } from 'src/hooks/useRectangle';\nimport { AnchorPosition } from 'src/types';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { TransformControls } from './TransformControls';\n\ninterface Props {\n id: string;\n}\n\nexport const RectangleTransformControls = ({ id }: Props) => {\n const rectangle = useRectangle(id);\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n\n const onAnchorMouseDown = useCallback(\n (key: AnchorPosition) => {\n if (!rectangle) return;\n uiStateActions.setMode({\n type: 'RECTANGLE.TRANSFORM',\n id: rectangle.id,\n selectedAnchor: key,\n showCursor: true\n });\n },\n [rectangle?.id, uiStateActions]\n );\n\n if (!rectangle) {\n return null;\n }\n\n return (\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/TransformControlsManager/TextBoxTransformControls.tsx", "content": "import React, { useMemo } from 'react';\nimport { getTextBoxEndTile } from 'src/utils';\nimport { useTextBox } from 'src/hooks/useTextBox';\nimport { TransformControls } from './TransformControls';\n\ninterface Props {\n id: string;\n}\n\nexport const TextBoxTransformControls = ({ id }: Props) => {\n const textBox = useTextBox(id);\n\n const to = useMemo(() => {\n if (!textBox) return { x: 0, y: 0 };\n return getTextBoxEndTile(textBox, textBox.size);\n }, [textBox]);\n\n if (!textBox) {\n return null;\n }\n\n return ;\n};\n" }, { "path": "packages/fossflow-lib/src/components/TransformControlsManager/TransformAnchor.tsx", "content": "import React, { useState } from 'react';\nimport { Coords } from 'src/types';\nimport { useTheme, Box } from '@mui/material';\nimport { getIsoProjectionCss } from 'src/utils';\nimport { Svg } from 'src/components/Svg/Svg';\nimport { TRANSFORM_ANCHOR_SIZE, TRANSFORM_CONTROLS_COLOR } from 'src/config';\n\ninterface Props {\n position: Coords;\n onMouseDown: () => void;\n}\n\nconst strokeWidth = 2;\n\nexport const TransformAnchor = ({ position, onMouseDown }: Props) => {\n const [isHovered, setIsHovered] = useState(false);\n const theme = useTheme();\n\n return (\n {\n setIsHovered(true);\n }}\n onMouseOut={() => {\n setIsHovered(false);\n }}\n onMouseDown={onMouseDown}\n sx={{\n position: 'absolute',\n transform: getIsoProjectionCss(),\n width: TRANSFORM_ANCHOR_SIZE,\n height: TRANSFORM_ANCHOR_SIZE\n }}\n style={{\n left: position.x - TRANSFORM_ANCHOR_SIZE / 2,\n top: position.y - TRANSFORM_ANCHOR_SIZE / 2\n }}\n >\n \n \n \n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/TransformControlsManager/TransformControls.tsx", "content": "import React, { useMemo } from 'react';\nimport { Coords, AnchorPosition } from 'src/types';\nimport { Svg } from 'src/components/Svg/Svg';\nimport { TRANSFORM_CONTROLS_COLOR } from 'src/config';\nimport { useIsoProjection } from 'src/hooks/useIsoProjection';\nimport {\n getBoundingBox,\n outermostCornerPositions,\n getTilePosition,\n convertBoundsToNamedAnchors\n} from 'src/utils';\nimport { TransformAnchor } from './TransformAnchor';\n\ninterface Props {\n from: Coords;\n to: Coords;\n onAnchorMouseDown?: (anchorPosition: AnchorPosition) => void;\n}\n\nconst strokeWidth = 2;\n\nexport const TransformControls = ({ from, to, onAnchorMouseDown }: Props) => {\n const { css, pxSize } = useIsoProjection({\n from,\n to\n });\n\n const anchors = useMemo(() => {\n if (!onAnchorMouseDown) return [];\n\n const corners = getBoundingBox([from, to]);\n const namedCorners = convertBoundsToNamedAnchors(corners);\n const cornerPositions = Object.entries(namedCorners).map(\n ([key, value], i) => {\n const position = getTilePosition({\n tile: value,\n origin: outermostCornerPositions[i]\n });\n\n return {\n position,\n onMouseDown: () => {\n onAnchorMouseDown(key as AnchorPosition);\n }\n };\n }\n );\n\n return cornerPositions;\n }, [onAnchorMouseDown, from, to]);\n\n return (\n <>\n \n \n \n \n \n\n {anchors.map(({ position, onMouseDown }) => {\n return (\n \n );\n })}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/TransformControlsManager/TransformControlsManager.tsx", "content": "import React from 'react';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { RectangleTransformControls } from './RectangleTransformControls';\nimport { TextBoxTransformControls } from './TextBoxTransformControls';\nimport { NodeTransformControls } from './NodeTransformControls';\n\nexport const TransformControlsManager = () => {\n const itemControls = useUiStateStore((state) => {\n return state.itemControls;\n });\n\n switch (itemControls?.type) {\n case 'ITEM':\n return ;\n case 'RECTANGLE':\n return ;\n case 'TEXTBOX':\n return ;\n default:\n return null;\n }\n};\n" }, { "path": "packages/fossflow-lib/src/components/UiElement/UiElement.tsx", "content": "import React from 'react';\nimport { Card, SxProps } from '@mui/material';\n\ninterface Props {\n children: React.ReactNode;\n sx?: SxProps;\n style?: React.CSSProperties;\n}\n\nexport const UiElement = ({ children, sx, style }: Props) => {\n return (\n \n {children}\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/UiOverlay/UiOverlay.tsx", "content": "import React, { useCallback, useMemo, useRef } from 'react';\nimport { Box, useTheme, Typography, Stack } from '@mui/material';\nimport { ChevronRight } from '@mui/icons-material';\nimport { EditorModeEnum, DialogTypeEnum } from 'src/types';\nimport { UiElement } from 'components/UiElement/UiElement';\nimport { SceneLayer } from 'src/components/SceneLayer/SceneLayer';\nimport { DragAndDrop } from 'src/components/DragAndDrop/DragAndDrop';\nimport { ItemControlsManager } from 'src/components/ItemControls/ItemControlsManager';\nimport { ToolMenu } from 'src/components/ToolMenu/ToolMenu';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { MainMenu } from 'src/components/MainMenu/MainMenu';\nimport { ZoomControls } from 'src/components/ZoomControls/ZoomControls';\nimport { DebugUtils } from 'src/components/DebugUtils/DebugUtils';\nimport { useResizeObserver } from 'src/hooks/useResizeObserver';\nimport { ContextMenuManager } from 'src/components/ContextMenu/ContextMenuManager';\nimport { useScene } from 'src/hooks/useScene';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { ExportImageDialog } from '../ExportImageDialog/ExportImageDialog';\nimport { HelpDialog } from '../HelpDialog/HelpDialog';\nimport { SettingsDialog } from '../SettingsDialog/SettingsDialog';\nimport { ConnectorHintTooltip } from '../ConnectorHintTooltip/ConnectorHintTooltip';\nimport { ConnectorEmptySpaceTooltip } from '../ConnectorEmptySpaceTooltip/ConnectorEmptySpaceTooltip';\nimport { ConnectorRerouteTooltip } from '../ConnectorRerouteTooltip/ConnectorRerouteTooltip';\nimport { ImportHintTooltip } from '../ImportHintTooltip/ImportHintTooltip';\nimport { LassoHintTooltip } from '../LassoHintTooltip/LassoHintTooltip';\nimport { LazyLoadingWelcomeNotification } from '../LazyLoadingWelcomeNotification/LazyLoadingWelcomeNotification';\nimport { CoordsUtils, getTilePosition } from 'src/utils';\n\nconst ToolsEnum = {\n MAIN_MENU: 'MAIN_MENU',\n ZOOM_CONTROLS: 'ZOOM_CONTROLS',\n TOOL_MENU: 'TOOL_MENU',\n ITEM_CONTROLS: 'ITEM_CONTROLS',\n VIEW_TITLE: 'VIEW_TITLE'\n} as const;\n\ninterface EditorModeMapping {\n [k: string]: (keyof typeof ToolsEnum)[];\n}\n\nconst EDITOR_MODE_MAPPING: EditorModeMapping = {\n [EditorModeEnum.EDITABLE]: [\n 'ITEM_CONTROLS',\n 'ZOOM_CONTROLS',\n 'TOOL_MENU',\n 'MAIN_MENU',\n 'VIEW_TITLE'\n ],\n [EditorModeEnum.EXPLORABLE_READONLY]: ['ZOOM_CONTROLS', 'VIEW_TITLE'],\n [EditorModeEnum.NON_INTERACTIVE]: []\n};\n\nconst getEditorModeMapping = (editorMode: keyof typeof EditorModeEnum) => {\n const availableUiFeatures = EDITOR_MODE_MAPPING[editorMode];\n\n return availableUiFeatures;\n};\n\nexport const UiOverlay = () => {\n const theme = useTheme();\n const contextMenuAnchorRef = useRef(null);\n const toolMenuRef = useRef(null);\n const { appPadding } = theme.customVars;\n const spacing = useCallback(\n (multiplier: number) => {\n return parseInt(theme.spacing(multiplier), 10);\n },\n [theme]\n );\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const enableDebugTools = useUiStateStore((state) => {\n return state.enableDebugTools;\n });\n const mode = useUiStateStore((state) => {\n return state.mode;\n });\n const mouse = useUiStateStore((state) => {\n return state.mouse;\n });\n const dialog = useUiStateStore((state) => {\n return state.dialog;\n });\n const itemControls = useUiStateStore((state) => {\n return state.itemControls;\n });\n const { currentView } = useScene();\n const editorMode = useUiStateStore((state) => {\n return state.editorMode;\n });\n const availableTools = useMemo(() => {\n return getEditorModeMapping(editorMode);\n }, [editorMode]);\n const rendererEl = useUiStateStore((state) => {\n return state.rendererEl;\n });\n const title = useModelStore((state) => {\n return state.title;\n });\n const iconPackManager = useUiStateStore((state) => {\n return state.iconPackManager;\n });\n const contextMenu = useUiStateStore((state) => {\n return state.contextMenu;\n });\n const { size: rendererSize } = useResizeObserver(rendererEl);\n\n return (\n <>\n \n {availableTools.includes('ITEM_CONTROLS') && itemControls && (\n \n \n \n )}\n\n {availableTools.includes('TOOL_MENU') && (\n \n \n \n )}\n\n {availableTools.includes('ZOOM_CONTROLS') && (\n \n \n \n )}\n\n {availableTools.includes('MAIN_MENU') && (\n \n \n \n )}\n\n {availableTools.includes('VIEW_TITLE') && (\n \n \n \n \n {title}\n \n \n \n {currentView.name}\n \n \n \n \n )}\n\n {enableDebugTools && (\n \n \n \n )}\n \n\n {mode.type === 'PLACE_ICON' && mode.id && (\n \n \n \n )}\n\n {dialog === DialogTypeEnum.EXPORT_IMAGE && (\n {\n return uiStateActions.setDialog(null);\n }}\n />\n )}\n\n {dialog === DialogTypeEnum.HELP && }\n\n {dialog === DialogTypeEnum.SETTINGS && }\n\n {/* Show hint tooltips only in editable mode */}\n {editorMode === EditorModeEnum.EDITABLE && }\n {editorMode === EditorModeEnum.EDITABLE && }\n {editorMode === EditorModeEnum.EDITABLE && }\n {editorMode === EditorModeEnum.EDITABLE && }\n {editorMode === EditorModeEnum.EDITABLE && }\n\n {/* Show lazy loading welcome notification if icon pack manager is provided */}\n {iconPackManager && }\n\n \n {contextMenu && (\n \n )}\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ZoomControls/ZoomControls.tsx", "content": "import React from 'react';\nimport {\n Add as ZoomInIcon,\n Remove as ZoomOutIcon,\n CropFreeOutlined as FitToScreenIcon,\n Help as HelpIcon\n} from '@mui/icons-material';\nimport { Stack, Box, Typography, Divider } from '@mui/material';\nimport { toPx } from 'src/utils';\nimport { UiElement } from 'src/components/UiElement/UiElement';\nimport { IconButton } from 'src/components/IconButton/IconButton';\nimport { MAX_ZOOM, MIN_ZOOM } from 'src/config';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useDiagramUtils } from 'src/hooks/useDiagramUtils';\nimport { DialogTypeEnum } from 'src/types/ui';\n\nexport const ZoomControls = () => {\n const uiStateStoreActions = useUiStateStore((state) => {\n return state.actions;\n });\n const zoom = useUiStateStore((state) => {\n return state.zoom;\n });\n const { fitToView } = useDiagramUtils();\n\n return (\n \n \n \n }\n onClick={uiStateStoreActions.decrementZoom}\n disabled={zoom >= MAX_ZOOM}\n />\n \n \n \n {Math.ceil(zoom * 100)}%\n \n \n \n }\n onClick={uiStateStoreActions.incrementZoom}\n disabled={zoom <= MIN_ZOOM}\n />\n \n \n \n }\n onClick={fitToView}\n />\n \n \n }\n onClick={() => {\n return uiStateStoreActions.setDialog(DialogTypeEnum.HELP);\n }}\n />\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/components/ZoomSettings/ZoomSettings.tsx", "content": "import React from 'react';\nimport {\n Box,\n FormControl,\n FormGroup,\n FormControlLabel,\n Switch,\n Typography\n} from '@mui/material';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useLocale } from 'src/stores/localeStore';\n\nexport const ZoomSettings = () => {\n const zoomSettings = useUiStateStore((state) => state.zoomSettings);\n const setZoomSettings = useUiStateStore((state) => state.actions.setZoomSettings);\n const locale = useLocale();\n\n const handleToggle = (setting: keyof typeof zoomSettings) => {\n setZoomSettings({\n ...zoomSettings,\n [setting]: !zoomSettings[setting]\n });\n };\n\n return (\n \n \n {locale.settings.zoom.description}\n \n\n \n \n handleToggle('zoomToCursor')}\n />\n }\n label={\n \n \n {locale.settings.zoom.zoomToCursor}\n \n \n {locale.settings.zoom.zoomToCursorDesc}\n \n \n }\n />\n \n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/config/hotkeys.ts", "content": "export type HotkeyProfile = 'qwerty' | 'smnrct' | 'none';\n\nexport interface HotkeyMapping {\n select: string | null;\n pan: string | null;\n addItem: string | null;\n rectangle: string | null;\n connector: string | null;\n text: string | null;\n lasso: string | null;\n freehandLasso: string | null;\n}\n\nexport const HOTKEY_PROFILES: Record = {\n qwerty: {\n select: 'q',\n pan: 'w',\n addItem: 'e',\n rectangle: 'r',\n connector: 't',\n text: 'y',\n lasso: 'l',\n freehandLasso: 'f'\n },\n smnrct: {\n select: 's',\n pan: 'm',\n addItem: 'n',\n rectangle: 'r',\n connector: 'c',\n text: 't',\n lasso: 'l',\n freehandLasso: 'f'\n },\n none: {\n select: null,\n pan: null,\n addItem: null,\n rectangle: null,\n connector: null,\n text: null,\n lasso: null,\n freehandLasso: null\n }\n};\n\nexport const DEFAULT_HOTKEY_PROFILE: HotkeyProfile = 'smnrct';" }, { "path": "packages/fossflow-lib/src/config/labelSettings.ts", "content": "export interface LabelSettings {\n expandButtonPadding: number; // Padding in theme units when expand button is visible\n}\n\nexport const DEFAULT_LABEL_SETTINGS: LabelSettings = {\n expandButtonPadding: 0 // Default 0 theme units (no extra padding)\n};\n" }, { "path": "packages/fossflow-lib/src/config/panSettings.ts", "content": "export interface PanSettings {\n // Mouse pan options\n middleClickPan: boolean;\n rightClickPan: boolean;\n ctrlClickPan: boolean;\n altClickPan: boolean;\n emptyAreaClickPan: boolean;\n \n // Keyboard pan options\n arrowKeysPan: boolean;\n wasdPan: boolean;\n ijklPan: boolean;\n \n // Pan speed\n keyboardPanSpeed: number;\n}\n\nexport const DEFAULT_PAN_SETTINGS: PanSettings = {\n // Mouse options - start with common defaults\n middleClickPan: true,\n rightClickPan: false,\n ctrlClickPan: false,\n altClickPan: false,\n emptyAreaClickPan: true,\n \n // Keyboard options\n arrowKeysPan: true,\n wasdPan: false,\n ijklPan: false,\n \n // Pan speed (pixels per key press)\n keyboardPanSpeed: 20\n};" }, { "path": "packages/fossflow-lib/src/config/zoomSettings.ts", "content": "export interface ZoomSettings {\n // Zoom behavior\n zoomToCursor: boolean;\n}\n\nexport const DEFAULT_ZOOM_SETTINGS: ZoomSettings = {\n // Default to zoom-to-cursor for better UX\n zoomToCursor: true\n};\n" }, { "path": "packages/fossflow-lib/src/config.ts", "content": "import {\n Size,\n InitialData,\n MainMenuOptions,\n Icon,\n Connector,\n TextBox,\n ViewItem,\n View,\n Rectangle,\n Colors\n} from 'src/types';\nimport { CoordsUtils } from 'src/utils';\nimport { customVars } from './styles/theme';\n\n// TODO: This file could do with better organisation and convention for easier reading.\nexport const UNPROJECTED_TILE_SIZE = 100;\nexport const TILE_PROJECTION_MULTIPLIERS: Size = {\n width: 1.415,\n height: 0.819\n};\nexport const PROJECTED_TILE_SIZE = {\n width: UNPROJECTED_TILE_SIZE * TILE_PROJECTION_MULTIPLIERS.width,\n height: UNPROJECTED_TILE_SIZE * TILE_PROJECTION_MULTIPLIERS.height\n};\n\nexport const DEFAULT_COLOR: Colors[0] = {\n id: '__DEFAULT__',\n value: customVars.customPalette.defaultColor\n};\n\nexport const DEFAULT_FONT_FAMILY = 'Roboto, Arial, sans-serif';\n\nexport const VIEW_DEFAULTS: Required<\n Omit\n> = {\n name: 'Untitled view',\n items: [],\n connectors: [],\n rectangles: [],\n textBoxes: []\n};\n\nexport const VIEW_ITEM_DEFAULTS: Required> = {\n labelHeight: 80\n};\n\nexport const CONNECTOR_DEFAULTS: Required> = {\n width: 10,\n description: '',\n startLabel: '',\n endLabel: '',\n startLabelHeight: 0,\n centerLabelHeight: 0,\n endLabelHeight: 0,\n labels: [],\n customColor: '',\n anchors: [],\n style: 'SOLID',\n lineType: 'SINGLE',\n showArrow: true\n};\n\n// The boundaries of the search area for the pathfinder algorithm\n// is the grid that encompasses the two nodes + the offset below.\nexport const CONNECTOR_SEARCH_OFFSET = { x: 1, y: 1 };\n\nexport const TEXTBOX_DEFAULTS: Required> = {\n orientation: 'X',\n fontSize: 0.6,\n content: 'Text'\n};\n\nexport const TEXTBOX_PADDING = 0.2;\nexport const TEXTBOX_FONT_WEIGHT = 'bold';\n\nexport const RECTANGLE_DEFAULTS: Required<\n Omit\n> = {\n customColor: ''\n};\n\nexport const ZOOM_INCREMENT = 0.05;\nexport const MIN_ZOOM = 0.1;\nexport const MAX_ZOOM = 1;\nexport const TRANSFORM_ANCHOR_SIZE = 30;\nexport const TRANSFORM_CONTROLS_COLOR = '#0392ff';\nexport const INITIAL_DATA: InitialData = {\n title: 'Untitled',\n version: '',\n icons: [],\n colors: [DEFAULT_COLOR],\n items: [],\n views: [],\n fitToView: false\n};\nexport const INITIAL_UI_STATE = {\n zoom: 1,\n scroll: {\n position: CoordsUtils.zero(),\n offset: CoordsUtils.zero()\n }\n};\nexport const INITIAL_SCENE_STATE = {\n connectors: {},\n textBoxes: {}\n};\nexport const MAIN_MENU_OPTIONS: MainMenuOptions = [\n 'ACTION.OPEN',\n 'EXPORT.JSON',\n 'EXPORT.PNG',\n 'ACTION.CLEAR_CANVAS',\n 'LINK.DISCORD',\n 'LINK.GITHUB',\n 'VERSION'\n];\n\nexport const DEFAULT_ICON: Icon = {\n id: 'default',\n name: 'block',\n isIsometric: true,\n url: ''\n};\n\nexport const DEFAULT_LABEL_HEIGHT = 20;\nexport const PROJECT_BOUNDING_BOX_PADDING = 3;\nexport const MARKDOWN_EMPTY_VALUE = '


';\n" }, { "path": "packages/fossflow-lib/src/examples/BasicEditor/BasicEditor.tsx", "content": "import React from 'react';\nimport Isoflow from 'src/Isoflow';\nimport { initialData } from '../initialData';\n\nexport const BasicEditor = () => {\n return ;\n};\n" }, { "path": "packages/fossflow-lib/src/examples/DebugTools/DebugTools.tsx", "content": "import React from 'react';\nimport Isoflow from 'src/Isoflow';\nimport { initialData } from '../initialData';\n\nexport const DebugTools = () => {\n return (\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/examples/ReadonlyMode/ReadonlyMode.tsx", "content": "import React from 'react';\nimport Isoflow from 'src/Isoflow';\nimport { initialData } from '../initialData';\n\nexport const ReadonlyMode = () => {\n return (\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/examples/index.tsx", "content": "import React, { useState, useMemo } from 'react';\nimport { Box, Select, MenuItem, useTheme } from '@mui/material';\nimport { BasicEditor } from './BasicEditor/BasicEditor';\nimport { DebugTools } from './DebugTools/DebugTools';\nimport { ReadonlyMode } from './ReadonlyMode/ReadonlyMode';\n\nconst examples = [\n { name: 'Basic editor', component: BasicEditor },\n { name: 'Debug tools', component: DebugTools },\n { name: 'Read-only mode', component: ReadonlyMode }\n];\n\nexport const Examples = () => {\n const theme = useTheme();\n const [currentExample, setCurrentExample] = useState(0);\n\n const Example = useMemo(() => {\n return examples[currentExample].component;\n }, [currentExample]);\n\n return (\n \n {Example && }\n {\n setCurrentExample(e.target.value as number);\n }}\n >\n {examples.map((example, i) => {\n return (\n \n {example.name}\n \n );\n })}\n \n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/examples/initialData.ts", "content": "/* eslint-disable import/no-extraneous-dependencies */\nimport { Colors, Icons, InitialData } from 'src/Isoflow';\nimport { flattenCollections } from '@isoflow/isopacks/dist/utils';\nimport isoflowIsopack from '@isoflow/isopacks/dist/isoflow';\nimport awsIsopack from '@isoflow/isopacks/dist/aws';\nimport gcpIsopack from '@isoflow/isopacks/dist/gcp';\nimport azureIsopack from '@isoflow/isopacks/dist/azure';\nimport kubernetesIsopack from '@isoflow/isopacks/dist/kubernetes';\n\nconst isopacks = flattenCollections([\n isoflowIsopack,\n awsIsopack,\n azureIsopack,\n gcpIsopack,\n kubernetesIsopack\n]);\n\nexport const colors: Colors = [\n {\n id: 'color1',\n value: '#a5b8f3'\n },\n {\n id: 'color2',\n value: '#bbadfb'\n },\n {\n id: 'color3',\n value: '#f4eb8e'\n },\n {\n id: 'color4',\n value: '#f0aca9'\n },\n {\n id: 'color5',\n value: '#fad6ac'\n },\n {\n id: 'color6',\n value: '#a8dc9d'\n },\n {\n id: 'color7',\n value: '#b3e5e3'\n }\n];\n\nexport const icons: Icons = isopacks;\n\nexport const initialData: InitialData = {\n title: 'Airport management software system',\n icons,\n colors,\n items: [\n {\n id: 'item1',\n name: 'Airport Operational Database',\n icon: 'storage',\n description:\n '

Each airport has its own central database that stores and updates all necessary data regarding daily flights, seasonal schedules, available resources, and other flight-related information, like billing data and flight fees. AODB is a key feature for the functioning of an airport.


This database is connected to the rest of the airport modules: airport information systems, revenue management systems, and air traffic management.


The system can supply different information for different segments of users: passengers, airport staff, crew, or members of specific departments, authorities, business partners, or police.


AODB represents the information on a graphical display.


AODB functions include:

- Reference-data processing

- Seasonal scheduling

- Daily flight schedule processing

- Processing of payments

'\n },\n {\n id: 'bc6fdded-a090-4eae-b1fe-fe0ee0fd1c92',\n name: 'Landside operations',\n icon: 'office',\n description:\n '

This subsystem is aimed at serving passengers and maintenance of terminal buildings, parking facilities, and vehicular traffic circular drives. Passenger operations include baggage handling and tagging.

'\n },\n {\n id: 'e0462e01-8acd-461c-89a2-42c6a04d5f7f',\n name: 'Passenger facilitation services',\n icon: 'user',\n description:\n '

Includes passenger processing (check-in, boarding, border control) and baggage handling (tagging, dropping and handling). They follow passengers to the shuttle buses to carry them to their flights. Arrival operations include boarding control and baggage handling.

'\n },\n {\n id: 'a147b06a-324a-47ab-9e16-ac9101aa3d28',\n name: 'Border control (customs and security services)',\n icon: 'block',\n description:\n '

In airports, security services usually unite perimeter security, terminal security, and border controls. These services require biometric authentication and integration into government systems to allow a customs officer to view the status of a passenger.

'\n },\n {\n id: '4a27ed88-abf2-448b-af07-5d2b6ebdb67f',\n name: 'Common use services (self-service check-in systems)',\n icon: 'block',\n description:\n '

An airport must ensure smooth passenger flow. Various digital self-services, like check-in kiosks or automated self-service gates, make it happen. Self-service options, especially check-in kiosks, remain popular. Worldwide in 2018, passengers used kiosks to check themselves in 88 percent of the time.

'\n },\n {\n id: 'c54ab120-44d2-46d2-9fc1-efd83ab67307',\n name: 'Baggage handling',\n icon: 'block',\n description:\n '

A passenger must check a bag before it’s loaded on the aircraft. The time the baggage is loaded is displayed and tracked until the destination is reached and the bag is returned to the owners.

'\n },\n {\n id: 'a2d5f2c4-ea64-4b3c-8c82-d50be88adb05',\n name: 'Terminal management systems',\n icon: 'function-module',\n description:\n '

Includes maintenance and monitoring of management systems for assets, buildings, electrical grids, environmental systems, and vertical transportation organization. It also facilitates staff communications and management.

'\n },\n {\n id: '040dfb11-f920-48cf-bf96-64234db1b7e8',\n name: 'Maintenance and monitoring',\n icon: 'block'\n },\n {\n id: 'a71d7911-261d-4b6e-895a-27765baf0403',\n name: 'Resource management',\n icon: 'block'\n },\n {\n id: '67895813-ac6f-4dd4-9ae2-e994e9a5aa09',\n name: 'Staff management',\n icon: 'block',\n description:\n '

Staff modules provide the necessary information about ongoing processes in the airport, such as data on flights (in ICAO or UTC formats) and other important events to keep responsible staff members updated. Information is distributed through the airport radio system, or displayed on a PC connected via the airport LAN or on mobile devices.

'\n },\n {\n id: 'cf6b6e6e-f491-4547-b4ac-c5eecba8464a',\n name: 'Information management',\n icon: 'queue',\n description:\n '

This subsystem is responsible for the collection and distribution of daily flight information, storing of seasonal and arrival/departure information, as well as the connection with airlines.

'\n },\n {\n id: '00ff4dc0-09f9-4932-aa90-6c207da2989b',\n name: 'Public address (PA) systems',\n icon: 'block',\n description:\n '

Informs passengers and airport staff about any changes and processes of importance, for instance, gates, times of arrival, calls, and alerts. Also, information can be communicated to pilots, aircraft staff, crew, etc. PA systems usually include voice messages broadcasted through loudspeakers.

'\n },\n {\n id: '791abb72-5481-4713-88a8-a9fe51cb5408',\n name: 'Flight Information Display Systems (FIDS)',\n icon: 'block',\n description:\n '

Exhibits the status of boarding, gates, aircraft, flight number, and other flight details. A computer controls the screens that are connected to the data management systems and displays up-to-date information about flights in real time. Some airports have a digital FIDS in the form of apps or on their websites. Also, the displays may show other public information such as the weather, news, safety messages, menus, and advertising. Airports can choose the type, languages, and means of entering the information, whether it be manually or loaded from a central database.

'\n },\n {\n id: 'fe621de2-793b-42f9-968e-4cac33b8d5fe',\n name: 'Automatic Terminal Information Service (ATIS)',\n icon: 'block',\n description:\n '

Broadcasts the weather reports, the condition of the runway, or other local information for pilots and crews.


Some airport software vendors offer off-the-shelf solutions to facilitate particular tasks, like maintenance, or airport operations. However, most of them provide integrated systems that comprise modules for several operations.

'\n },\n {\n id: '24d4a8b3-6056-4c3f-8f0b-143683509438',\n name: 'Airside operations',\n icon: 'plane',\n description:\n '

Includes systems to handle aircraft landing and navigation, airport traffic management, runway management, and ground handling safety.

'\n },\n {\n id: '2ac34480-95cc-4b01-8efd-683ec46fcd68',\n name: 'Apron handling',\n icon: 'block',\n description:\n '

Apron (or ground handling) deals with aircraft servicing. This includes passenger boarding and guidance, cargo and mail loading, and apron services. Apron services include aircraft guiding, cleaning, drainage, deicing, catering, and fueling. At this stage, the software facilitates dealing with information about the weight of the baggage and cargo load, number of passengers, boarding bridges parking, and the ground services that must be supplied to the aircraft. By entering this information into the system, their costs can be calculated and invoiced through the billing system.

'\n },\n {\n id: '9172d115-93ae-4e89-bd75-4979b7f8a49a',\n name: 'ATC Tower',\n icon: 'block',\n description:\n '

The Air Traffic Control Tower is a structure that delivers air and ground control of the aircraft. It ensures safety by guiding and navigating the vehicles and aircraft. It is performed by way of visual signaling, radar, and radio communication in the air and on the ground. The main focus of the tower is to make sure that all aircraft have been assigned to the right place, that passengers aren’t at risk, and that the aircraft will have a suitable passenger boarding bridge allocated on the apron.


The ATC tower has a control room that serves as a channel between landside (terminal) and airside operations in airports. The control room personnel are tasked with ensuring the security and safety of the passengers as well as ground handling. Usually, a control room has CCTV monitors and air traffic control systems that maintain the order in the terminal and on the apron.

'\n },\n {\n id: '2db4a232-2cf3-4277-9cd4-e2c0a35a4eac',\n name: 'Aeronautical Fixed Telecommunication Network (AFTN) Systems',\n icon: 'block',\n description:\n '

AFTN systems handle communication and exchange of data including navigation services. Usually, airports exchange traffic environment messages, safety messages, information about the weather, geographic material, disruptions, etc. They serve as communication between airports and aircraft.


Software for aeronautical telecommunications stores flight plans and flight information, entered in ICAO format and UTC. The information stored can be used for planning and statistical purposes. For airports, it’s important to understand the aircraft type and its weight to assign it to the right place on the runway. AFTN systems hold the following information:


- Aircraft registration

- Runway used

- Actual time of landing and departure

- Number of circuits

- Number and type of approaches

- New estimates of arrival and departure

- New flight information


Air traffic management is performed from an ATC tower.

'\n },\n {\n id: 'b46088d6-7bd4-4ccf-9d35-cf56a891d869',\n name: 'Invoicing and billing',\n icon: 'paymentcard',\n description:\n '

Each flight an airport handles generates a defined revenue for the airport paid by the airline operating the aircraft. Aeronautical invoicing systems make payment possible for any type and size of aircraft. It accepts payments in cash and credit in multiple currencies. The billing also extends to ATC services.


Depending on the aircraft type and weight and ground services provided, an airport can calculate the aeronautical fee and issue an invoice with a bill. It is calculated using the following data:


- Aircraft registration

- Parking time at the airport

- Airport point of departure and/or landing

- Times at the different points of entry or departure


The data is entered or integrated from ATC. Based on this information, the airport calculates the charges and sends the bills.

'\n },\n {\n id: 'afa7b887-8aff-45a6-86fa-7a896626e920',\n name: 'ATC Tower Billing',\n icon: 'block'\n },\n {\n id: 'd917b7d7-a5c4-479e-a366-da8d22ea8ebb',\n name: 'Non Aeronautical revenue',\n icon: 'block'\n }\n ],\n views: [\n {\n id: 'overview',\n name: 'Overview',\n items: [\n {\n labelHeight: 80,\n id: 'd917b7d7-a5c4-479e-a366-da8d22ea8ebb',\n tile: { x: 5, y: -11 }\n },\n {\n labelHeight: 80,\n id: 'afa7b887-8aff-45a6-86fa-7a896626e920',\n tile: { x: 2, y: -11 }\n },\n {\n labelHeight: 80,\n id: 'b46088d6-7bd4-4ccf-9d35-cf56a891d869',\n tile: { x: 4, y: -7 }\n },\n {\n labelHeight: 80,\n id: '2db4a232-2cf3-4277-9cd4-e2c0a35a4eac',\n tile: { x: 16, y: -3 }\n },\n {\n labelHeight: 80,\n id: '9172d115-93ae-4e89-bd75-4979b7f8a49a',\n tile: { x: 16, y: 0 }\n },\n {\n labelHeight: 80,\n id: '2ac34480-95cc-4b01-8efd-683ec46fcd68',\n tile: { x: 16, y: 3 }\n },\n {\n labelHeight: 80,\n id: '24d4a8b3-6056-4c3f-8f0b-143683509438',\n tile: { x: 11, y: 0 }\n },\n {\n labelHeight: 80,\n id: 'fe621de2-793b-42f9-968e-4cac33b8d5fe',\n tile: { x: 7, y: 12 }\n },\n {\n labelHeight: 80,\n id: '791abb72-5481-4713-88a8-a9fe51cb5408',\n tile: { x: 4, y: 12 }\n },\n {\n labelHeight: 80,\n id: '00ff4dc0-09f9-4932-aa90-6c207da2989b',\n tile: { x: 1, y: 12 }\n },\n {\n labelHeight: 80,\n id: 'cf6b6e6e-f491-4547-b4ac-c5eecba8464a',\n tile: { x: 4, y: 6 }\n },\n {\n labelHeight: 80,\n id: '67895813-ac6f-4dd4-9ae2-e994e9a5aa09',\n tile: { x: -11, y: 8 }\n },\n {\n labelHeight: 80,\n id: 'a71d7911-261d-4b6e-895a-27765baf0403',\n tile: { x: -8, y: 8 }\n },\n {\n labelHeight: 80,\n id: '040dfb11-f920-48cf-bf96-64234db1b7e8',\n tile: { x: -5, y: 8 }\n },\n {\n labelHeight: 80,\n id: 'a2d5f2c4-ea64-4b3c-8c82-d50be88adb05',\n tile: { x: -5, y: 4 }\n },\n {\n labelHeight: 80,\n id: 'c54ab120-44d2-46d2-9fc1-efd83ab67307',\n tile: { x: -11, y: -9 }\n },\n {\n labelHeight: 80,\n id: '4a27ed88-abf2-448b-af07-5d2b6ebdb67f',\n tile: { x: -8, y: -9 }\n },\n {\n labelHeight: 80,\n id: 'a147b06a-324a-47ab-9e16-ac9101aa3d28',\n tile: { x: -5, y: -9 }\n },\n {\n labelHeight: 180,\n id: 'e0462e01-8acd-461c-89a2-42c6a04d5f7f',\n tile: { x: -5, y: -4 }\n },\n {\n labelHeight: 180,\n id: 'bc6fdded-a090-4eae-b1fe-fe0ee0fd1c92',\n tile: { x: -4, y: 0 }\n },\n { id: 'item1', tile: { x: 4, y: 0 }, labelHeight: 140 }\n ],\n connectors: [\n {\n id: '527b88f3-4b50-4639-9802-cfc475cd08aa',\n color: 'color6',\n anchors: [\n {\n id: 'abe857f8-6219-4030-b5cf-6a7de2bff9be',\n ref: { item: 'd917b7d7-a5c4-479e-a366-da8d22ea8ebb' }\n },\n {\n id: '21b9d415-1429-4e68-9b35-46705c32e8a4',\n ref: { tile: { x: 5, y: -10 } }\n },\n {\n id: '0e768e42-228d-44c5-bc30-c8d40ebb69c6',\n ref: { tile: { x: 4, y: -10 } }\n },\n {\n id: 'c9d4b849-a044-4c43-9e8a-ec370cac7dd6',\n ref: { item: 'b46088d6-7bd4-4ccf-9d35-cf56a891d869' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: '073ecd08-0bff-4274-81e7-2fe35b0ac085',\n color: 'color6',\n anchors: [\n {\n id: 'aed7740d-75e5-471e-a9a0-01bbfb751a2c',\n ref: { item: 'afa7b887-8aff-45a6-86fa-7a896626e920' }\n },\n {\n id: 'eccb2e42-64cd-446c-a23a-74b8f759fdd1',\n ref: { tile: { x: 2, y: -10 } }\n },\n {\n id: 'd0f7054b-54e7-45f5-9e20-2ce766611477',\n ref: { tile: { x: 4, y: -10 } }\n },\n {\n id: 'c6fa8a43-722a-49a9-84f4-b76114322b0d',\n ref: { item: 'b46088d6-7bd4-4ccf-9d35-cf56a891d869' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: '170009dd-b855-4b91-ba49-07a998cf0485',\n color: 'color6',\n anchors: [\n {\n id: '24f16db1-6a3c-44b4-978d-6aa66f0b049f',\n ref: { item: 'b46088d6-7bd4-4ccf-9d35-cf56a891d869' }\n },\n {\n id: '034ffa18-b55b-4941-acd8-02dbd8c47bfb',\n ref: { item: 'item1' }\n }\n ]\n },\n {\n id: 'ae8f457f-df03-4582-925d-4c81131608fa',\n color: 'color2',\n anchors: [\n {\n id: '39a462b8-bc96-490b-849a-1199e44cfa8a',\n ref: { item: '2db4a232-2cf3-4277-9cd4-e2c0a35a4eac' }\n },\n {\n id: 'f4d0339b-45c8-4eb7-a3be-94616a4969a5',\n ref: { tile: { x: 15, y: -3 } }\n },\n {\n id: '3b1bc55b-ceb2-416d-8f1d-722273180e83',\n ref: { tile: { x: 15, y: 0 } }\n },\n {\n id: '072adfbc-9888-434a-bae4-9639fff026a4',\n ref: { item: '24d4a8b3-6056-4c3f-8f0b-143683509438' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: '4aba5eaf-e2b3-4b64-9af0-98cebafef64a',\n color: 'color2',\n anchors: [\n {\n id: '2410836d-4820-4492-8c64-d89b069ce9ec',\n ref: { item: '9172d115-93ae-4e89-bd75-4979b7f8a49a' }\n },\n {\n id: 'f583f42d-2eec-47a5-9d45-6dfd0603cb69',\n ref: { item: '24d4a8b3-6056-4c3f-8f0b-143683509438' }\n }\n ]\n },\n {\n id: '5cfb2816-10cd-4c90-b584-f045c26074c8',\n color: 'color2',\n anchors: [\n {\n id: '66854e7d-e46c-49b0-8f26-186742369158',\n ref: { item: '2ac34480-95cc-4b01-8efd-683ec46fcd68' }\n },\n {\n id: 'ffc7345f-854c-41ef-96ed-fd1cbeb4b3d6',\n ref: { tile: { x: 15, y: 3 } }\n },\n {\n id: '93e5620a-8d94-464e-bcc4-a4b20da4b6e7',\n ref: { tile: { x: 15, y: 0 } }\n },\n {\n id: 'd97de77f-ac92-42a9-892b-3e30485817ff',\n ref: { item: '24d4a8b3-6056-4c3f-8f0b-143683509438' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: '7392a711-e861-4c85-b394-49e47f2dd874',\n color: 'color2',\n anchors: [\n {\n id: 'bd8d118a-f676-4ca0-bfbd-b993625aece7',\n ref: { item: '24d4a8b3-6056-4c3f-8f0b-143683509438' }\n },\n {\n id: '613866b0-e6dd-4d8a-9a67-d8ce443273ec',\n ref: { item: 'item1' }\n }\n ]\n },\n {\n id: '1e329a8d-3fc9-40ea-8e82-67b478b35f16',\n color: 'color7',\n anchors: [\n {\n id: 'dd31d564-3b3a-4428-b05c-88b243173d21',\n ref: { item: 'fe621de2-793b-42f9-968e-4cac33b8d5fe' }\n },\n {\n id: '8b9dec3b-59e3-4ddf-9a2b-12e7e6092916',\n ref: { tile: { x: 7, y: 11 } }\n },\n {\n id: '5728c55e-03b6-4faa-b801-7a342a0b7650',\n ref: { tile: { x: 4, y: 11 } }\n },\n {\n id: '3678c2f1-4c13-4959-8aaf-8d27611b6ea7',\n ref: { item: 'cf6b6e6e-f491-4547-b4ac-c5eecba8464a' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: 'ff1c44f2-83f8-4596-a27f-54914b7da562',\n color: 'color7',\n anchors: [\n {\n id: '30064e8e-7894-4b83-833b-a171c10327e6',\n ref: { item: '791abb72-5481-4713-88a8-a9fe51cb5408' }\n },\n {\n id: 'b5aabbda-2802-4cf8-90c2-adfbc5bc5b5c',\n ref: { item: 'cf6b6e6e-f491-4547-b4ac-c5eecba8464a' }\n }\n ]\n },\n {\n id: '8c1f03c8-351a-4a39-9570-5fd4959f0272',\n color: 'color7',\n anchors: [\n {\n id: 'e8e8c135-3852-4475-96bc-6d6ec3eef8f0',\n ref: { item: '00ff4dc0-09f9-4932-aa90-6c207da2989b' }\n },\n {\n id: '56b0d80b-31b5-4960-bf01-47c2d2a9e90a',\n ref: { tile: { x: 1, y: 11 } }\n },\n {\n id: 'c42d6159-e6b8-447e-a197-0b7c761f2516',\n ref: { tile: { x: 4, y: 11 } }\n },\n {\n id: 'c858062e-faa9-410d-9a35-5090c3b42af5',\n ref: { item: 'cf6b6e6e-f491-4547-b4ac-c5eecba8464a' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: '630f5788-9f0b-44df-83f9-c60e40928617',\n color: 'color7',\n anchors: [\n {\n id: 'c258cf27-4d97-4814-8438-96c7f9fa50c0',\n ref: { item: 'cf6b6e6e-f491-4547-b4ac-c5eecba8464a' }\n },\n {\n id: '3bdd5f99-0fc8-4b35-b2be-fa5473a51bfa',\n ref: { item: 'item1' }\n }\n ]\n },\n {\n id: '2f251ef8-d35e-4b57-ad48-dcd6f81325bc',\n color: 'color1',\n anchors: [\n {\n id: '3d0c51d0-0b90-4062-90e5-306e2aa2f633',\n ref: { item: '040dfb11-f920-48cf-bf96-64234db1b7e8' }\n },\n {\n id: '46d83bb9-30a5-4856-afb2-0e91076fce62',\n ref: { item: 'a2d5f2c4-ea64-4b3c-8c82-d50be88adb05' }\n }\n ]\n },\n {\n id: '965ff8f1-59e9-45ae-b484-ba6ec4f546d0',\n color: 'color1',\n anchors: [\n {\n id: 'e031f407-88d7-4606-9d0d-99ffd12662d7',\n ref: { item: 'a71d7911-261d-4b6e-895a-27765baf0403' }\n },\n {\n id: '6bffb346-eb7e-45b7-a68f-23b49eed30c2',\n ref: { tile: { x: -8, y: 6 } }\n },\n {\n id: 'bb0fb0a7-492a-411b-8f74-9218ef607259',\n ref: { tile: { x: -5, y: 6 } }\n },\n {\n id: '4992ecf1-26bc-47bf-a781-4e5267cd0c02',\n ref: { item: 'a2d5f2c4-ea64-4b3c-8c82-d50be88adb05' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: '3b09e7aa-97f9-40b7-81e8-84e5e610d1e2',\n color: 'color1',\n anchors: [\n {\n id: '760ef8a7-b619-41bc-a61f-3d63fa1c2879',\n ref: { item: '67895813-ac6f-4dd4-9ae2-e994e9a5aa09' }\n },\n {\n id: 'd03b1bea-d63f-4960-b186-ccc582a0da1b',\n ref: { tile: { x: -11, y: 6 } }\n },\n {\n id: 'a2c1583d-667e-481c-9ddc-e1fd13a39203',\n ref: { tile: { x: -5, y: 6 } }\n },\n {\n id: 'bc60ae76-c0f1-4c7f-8ec1-acdec06a9250',\n ref: { item: 'a2d5f2c4-ea64-4b3c-8c82-d50be88adb05' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: '7180a187-4254-46af-806f-4184250d9609',\n color: 'color1',\n anchors: [\n {\n id: 'cb98ae3b-f88d-45ab-9dd8-0ced127e0ee1',\n ref: { item: 'a2d5f2c4-ea64-4b3c-8c82-d50be88adb05' }\n },\n {\n id: '8a9f4c57-0685-4624-bf30-f5b27f34662a',\n ref: { item: 'bc6fdded-a090-4eae-b1fe-fe0ee0fd1c92' }\n }\n ]\n },\n {\n id: '2bbf530c-5b0a-4405-a6ef-9df4784ba49b',\n color: 'color1',\n anchors: [\n {\n id: '4072b959-8f00-4cef-9888-98b6faa5671b',\n ref: { item: 'c54ab120-44d2-46d2-9fc1-efd83ab67307' }\n },\n {\n id: '020bc704-e25f-4a3a-a613-6fb7ce800f7e',\n ref: { tile: { x: -11, y: -6 } }\n },\n {\n id: '6febf444-92b1-42ac-b6f3-afd71c3ee452',\n ref: { tile: { x: -5, y: -6 } }\n },\n {\n id: '237f901a-d01d-4d9b-8bd1-eb11efedaa1b',\n ref: { item: 'e0462e01-8acd-461c-89a2-42c6a04d5f7f' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: '1074fc66-d2ff-49ed-85d3-87a0ded7f54b',\n color: 'color1',\n anchors: [\n {\n id: 'b2db4f0d-59e7-4715-9d28-ea43887ae8c8',\n ref: { item: '4a27ed88-abf2-448b-af07-5d2b6ebdb67f' }\n },\n {\n id: 'e742a2df-8911-40d8-9227-3d5f391f3beb',\n ref: { tile: { x: -8, y: -6 } }\n },\n {\n id: 'e1ddafc5-0f79-41af-a9f6-e8f9007accb6',\n ref: { tile: { x: -5, y: -6 } }\n },\n {\n id: '03cb17bd-34cb-4c80-989d-f299aa1a2915',\n ref: { item: 'e0462e01-8acd-461c-89a2-42c6a04d5f7f' }\n }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n },\n {\n id: '120566e0-c0df-4d85-81b3-d6b224484668',\n color: 'color1',\n anchors: [\n {\n id: '433e4f1f-0bf9-44f5-ab9f-d98861206b59',\n ref: { item: 'a147b06a-324a-47ab-9e16-ac9101aa3d28' }\n },\n {\n id: '1affa818-d601-4ab3-b507-d71ece11920c',\n ref: { item: 'e0462e01-8acd-461c-89a2-42c6a04d5f7f' }\n }\n ]\n },\n {\n id: '2185c84e-5277-40f1-82b9-774dd9f64e2a',\n color: 'color1',\n anchors: [\n {\n id: 'aa663458-6df7-4bb2-946b-c8cc6ab29957',\n ref: { item: 'e0462e01-8acd-461c-89a2-42c6a04d5f7f' }\n },\n {\n id: '77530d07-6183-420c-affe-91a99b685db0',\n ref: { item: 'bc6fdded-a090-4eae-b1fe-fe0ee0fd1c92' }\n }\n ]\n },\n {\n id: '2e025225-169c-4609-bf93-a4a7aa602b00',\n color: 'color1',\n anchors: [\n {\n id: '5870d75a-066c-422e-a517-c44417961809',\n ref: { item: 'bc6fdded-a090-4eae-b1fe-fe0ee0fd1c92' }\n },\n {\n id: '0fdeeb60-9820-41dc-a73b-96196e035331',\n ref: { item: 'item1' }\n }\n ]\n }\n ],\n rectangles: [\n {\n id: '75637566-6d10-49fb-b3ec-85584250475d',\n color: 'color6',\n from: { x: 1, y: -10 },\n to: { x: 6, y: -12 }\n },\n {\n id: '35cbdf0d-daa1-4939-9901-dd9aee36903f',\n color: 'color2',\n from: { x: 15, y: 4 },\n to: { x: 17, y: -4 }\n },\n {\n id: 'ae50ce7d-7b3e-49ec-8fe0-e2e09c4f2dfa',\n color: 'color7',\n from: { x: 0, y: 13 },\n to: { x: 8, y: 11 }\n },\n {\n id: 'e35ec239-f1eb-4e83-9112-d3b6b3f01f2c',\n color: 'color1',\n from: { x: -4, y: 9 },\n to: { x: -12, y: 6 }\n },\n {\n id: '27bea545-8505-4ebe-ae72-01de85833465',\n color: 'color1',\n from: { x: -4, y: -6 },\n to: { x: -12, y: -10 }\n },\n {\n id: '0a74d0a7-b987-480f-ada1-f5a575eae0b9',\n color: 'color5',\n from: { x: 3, y: 1 },\n to: { x: 5, y: -1 }\n }\n ],\n textBoxes: [\n {\n orientation: 'Y',\n fontSize: 0.6,\n content: 'Airside operations',\n id: 'f19b5d77-733e-48be-93a0-a0b0cae276d4',\n tile: { x: 14, y: -1 }\n },\n {\n orientation: 'X',\n fontSize: 0.6,\n content: 'Information management',\n id: 'a15c0d88-1682-4fc8-9678-62e029df4574',\n tile: { x: 0, y: 10 }\n },\n {\n orientation: 'X',\n fontSize: 0.6,\n content: 'Terminal management',\n id: 'e8ae777d-2c29-4c8e-8f61-0c63fac32d11',\n tile: { x: -12, y: 5 }\n },\n {\n orientation: 'X',\n fontSize: 0.6,\n content: 'Passenger facilitation',\n id: '82132c7f-704e-49f1-86e7-e4f072e56779',\n tile: { x: -12, y: -11 }\n },\n {\n orientation: 'X',\n fontSize: 0.6,\n content: 'AODB',\n id: '52070439-245d-45ab-974a-615427c1c3d1',\n tile: { x: 2, y: -2 }\n }\n ]\n }\n ]\n};\n" }, { "path": "packages/fossflow-lib/src/fixtures/colors.ts", "content": "import { Colors } from 'src/types';\n\nexport const colors: Colors = [\n {\n id: 'color1',\n value: '#000000'\n },\n {\n id: 'color2',\n value: '#ffffff'\n }\n];\n" }, { "path": "packages/fossflow-lib/src/fixtures/icons.ts", "content": "import { Model } from 'src/types';\n\nexport const icons: Model['icons'] = [\n {\n id: 'icon1',\n name: 'Icon1',\n url: 'https://isoflow.io/static/assets/icons/networking/server.svg'\n },\n {\n id: 'icon2',\n name: 'Icon2',\n url: 'https://isoflow.io/static/assets/icons/networking/block.svg'\n }\n];\n" }, { "path": "packages/fossflow-lib/src/fixtures/model.ts", "content": "import { Model } from 'src/types';\nimport { icons } from './icons';\nimport { modelItems } from './modelItems';\nimport { views } from './views';\nimport { colors } from './colors';\n\nexport const model: Model = {\n version: '1.0.0',\n title: 'TestModel',\n description: 'TestModelDescription',\n colors,\n icons,\n items: modelItems,\n views\n} as const;\n" }, { "path": "packages/fossflow-lib/src/fixtures/modelItems.ts", "content": "import { Model } from 'src/types';\n\nexport const modelItems: Model['items'] = [\n {\n id: 'node1',\n name: 'Node1',\n icon: 'icon1',\n description: 'Node1Description'\n },\n {\n id: 'node2',\n name: 'Node2',\n icon: 'icon2'\n },\n {\n id: 'node3',\n name: 'Node3',\n icon: 'icon1'\n }\n];\n" }, { "path": "packages/fossflow-lib/src/fixtures/views.ts", "content": "import { Model } from 'src/types';\n\nexport const views: Model['views'] = [\n {\n id: 'view1',\n name: 'View1',\n description: 'View1Description',\n items: [\n {\n id: 'node1',\n tile: {\n x: 0,\n y: 0\n }\n },\n {\n id: 'node2',\n tile: {\n x: 0,\n y: 4\n }\n },\n {\n id: 'node3',\n tile: {\n x: 0,\n y: -4\n }\n }\n ],\n rectangles: [\n {\n id: 'rectangle1',\n color: 'color1',\n from: { x: 0, y: 0 },\n to: { x: 2, y: 2 }\n },\n {\n id: 'rectangle2',\n from: { x: 0, y: 0 },\n to: { x: 2, y: 2 }\n }\n ],\n connectors: [\n {\n id: 'connector1',\n color: 'color1',\n anchors: [\n { id: 'anch1-1', ref: { item: 'node1' } },\n { id: 'anch1-2', ref: { item: 'node2' } }\n ]\n },\n {\n id: 'connector2',\n anchors: [\n { id: 'anch2-1', ref: { item: 'node2' } },\n { id: 'anch2-2', ref: { item: 'node3' } }\n ]\n }\n ]\n }\n];\n" }, { "path": "packages/fossflow-lib/src/global.d.ts", "content": "import { Size, Coords } from 'src/types';\n\ndeclare global {\n let PACKAGE_VERSION: string;\n let REPOSITORY_URL: string;\n\n interface Window {\n Isoflow: {\n getUnprojectedBounds: () => Size & Coords;\n fitToView: () => void;\n };\n }\n}\n\ndeclare module 'react-quill' {\n import React from 'react';\n\n export interface ReactQuillProps {\n value?: string;\n onChange?: (value: string, delta: any, source: any, editor: any) => void;\n readOnly?: boolean;\n theme?: string;\n modules?: any;\n formats?: string[];\n style?: React.CSSProperties;\n className?: string;\n placeholder?: string;\n bounds?: string | HTMLElement;\n scrollingContainer?: string | HTMLElement;\n preserveWhitespace?: boolean;\n tabIndex?: number;\n onFocus?: (range: any, source: any, editor: any) => void;\n onBlur?: (previousRange: any, source: any, editor: any) => void;\n onKeyPress?: (event: React.KeyboardEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n onKeyUp?: (event: React.KeyboardEvent) => void;\n }\n\n const ReactQuill: React.ForwardRefExoticComponent>;\n export default ReactQuill;\n}\n" }, { "path": "packages/fossflow-lib/src/hooks/__tests__/useHistory.test.tsx", "content": "import { renderHook, act } from '@testing-library/react';\nimport { useHistory } from '../useHistory';\n\n// Mock implementations\nconst mockModelStore = {\n canUndo: jest.fn(),\n canRedo: jest.fn(),\n undo: jest.fn(),\n redo: jest.fn(),\n saveToHistory: jest.fn(),\n clearHistory: jest.fn()\n};\n\nconst mockSceneStore = {\n canUndo: jest.fn(),\n canRedo: jest.fn(),\n undo: jest.fn(),\n redo: jest.fn(),\n saveToHistory: jest.fn(),\n clearHistory: jest.fn()\n};\n\n// Mock the store hooks\njest.mock('../../stores/modelStore', () => ({\n useModelStore: jest.fn((selector) => {\n const state = {\n actions: mockModelStore\n };\n return selector ? selector(state) : state;\n })\n}));\n\njest.mock('../../stores/sceneStore', () => ({\n useSceneStore: jest.fn((selector) => {\n const state = {\n actions: mockSceneStore\n };\n return selector ? selector(state) : state;\n })\n}));\n\ndescribe('useHistory', () => {\n beforeEach(() => {\n jest.clearAllMocks();\n \n // Reset mock implementations\n mockModelStore.canUndo.mockReturnValue(false);\n mockModelStore.canRedo.mockReturnValue(false);\n mockModelStore.undo.mockReturnValue(true);\n mockModelStore.redo.mockReturnValue(true);\n \n mockSceneStore.canUndo.mockReturnValue(false);\n mockSceneStore.canRedo.mockReturnValue(false);\n mockSceneStore.undo.mockReturnValue(true);\n mockSceneStore.redo.mockReturnValue(true);\n });\n\n describe('undo/redo basic functionality', () => {\n it('should initialize with no undo/redo capability', () => {\n const { result } = renderHook(() => useHistory());\n \n expect(result.current.canUndo).toBe(false);\n expect(result.current.canRedo).toBe(false);\n });\n\n it('should call saveToHistory on both stores', () => {\n const { result } = renderHook(() => useHistory());\n \n act(() => {\n result.current.saveToHistory();\n });\n \n expect(mockModelStore.saveToHistory).toHaveBeenCalled();\n expect(mockSceneStore.saveToHistory).toHaveBeenCalled();\n });\n\n it('should perform undo when model store has history', () => {\n mockModelStore.canUndo.mockReturnValue(true);\n const { result } = renderHook(() => useHistory());\n \n expect(result.current.canUndo).toBe(true);\n \n act(() => {\n const success = result.current.undo();\n expect(success).toBe(true);\n });\n \n expect(mockModelStore.undo).toHaveBeenCalled();\n });\n\n it('should perform undo when scene store has history', () => {\n mockSceneStore.canUndo.mockReturnValue(true);\n const { result } = renderHook(() => useHistory());\n \n expect(result.current.canUndo).toBe(true);\n \n act(() => {\n const success = result.current.undo();\n expect(success).toBe(true);\n });\n \n expect(mockSceneStore.undo).toHaveBeenCalled();\n });\n\n it('should perform redo when model store has future', () => {\n mockModelStore.canRedo.mockReturnValue(true);\n const { result } = renderHook(() => useHistory());\n \n expect(result.current.canRedo).toBe(true);\n \n act(() => {\n const success = result.current.redo();\n expect(success).toBe(true);\n });\n \n expect(mockModelStore.redo).toHaveBeenCalled();\n });\n\n it('should return false when undo is called with no history', () => {\n mockModelStore.undo.mockReturnValue(false);\n mockSceneStore.undo.mockReturnValue(false);\n \n const { result } = renderHook(() => useHistory());\n \n act(() => {\n const success = result.current.undo();\n expect(success).toBe(false);\n });\n });\n\n it('should return false when redo is called with no future', () => {\n mockModelStore.redo.mockReturnValue(false);\n mockSceneStore.redo.mockReturnValue(false);\n \n const { result } = renderHook(() => useHistory());\n \n act(() => {\n const success = result.current.redo();\n expect(success).toBe(false);\n });\n });\n });\n\n describe('transaction functionality', () => {\n it('should save history before transaction and not during', () => {\n const { result } = renderHook(() => useHistory());\n \n act(() => {\n result.current.transaction(() => {\n // This should not trigger saveToHistory due to transaction\n result.current.saveToHistory();\n });\n });\n \n // Should save once before transaction starts\n expect(mockModelStore.saveToHistory).toHaveBeenCalledTimes(1);\n expect(mockSceneStore.saveToHistory).toHaveBeenCalledTimes(1);\n });\n\n it('should track transaction state correctly', () => {\n const { result } = renderHook(() => useHistory());\n \n expect(result.current.isInTransaction()).toBe(false);\n \n act(() => {\n result.current.transaction(() => {\n expect(result.current.isInTransaction()).toBe(true);\n });\n });\n \n expect(result.current.isInTransaction()).toBe(false);\n });\n\n it('should prevent nested transactions', () => {\n const { result } = renderHook(() => useHistory());\n \n act(() => {\n result.current.transaction(() => {\n // First transaction saves history\n expect(mockModelStore.saveToHistory).toHaveBeenCalledTimes(1);\n \n // Nested transaction should not save again\n result.current.transaction(() => {\n // Still in transaction\n expect(result.current.isInTransaction()).toBe(true);\n });\n \n // Should still be 1 save\n expect(mockModelStore.saveToHistory).toHaveBeenCalledTimes(1);\n });\n });\n });\n\n it('should handle transaction errors gracefully', () => {\n const { result } = renderHook(() => useHistory());\n \n expect(() => {\n act(() => {\n result.current.transaction(() => {\n throw new Error('Test error');\n });\n });\n }).toThrow('Test error');\n \n // Transaction should be cleaned up\n expect(result.current.isInTransaction()).toBe(false);\n });\n });\n\n describe('history management', () => {\n it('should clear all history', () => {\n const { result } = renderHook(() => useHistory());\n \n act(() => {\n result.current.clearHistory();\n });\n \n expect(mockModelStore.clearHistory).toHaveBeenCalled();\n expect(mockSceneStore.clearHistory).toHaveBeenCalled();\n });\n\n it('should check both stores for undo capability', () => {\n // Only model has undo\n mockModelStore.canUndo.mockReturnValue(true);\n mockSceneStore.canUndo.mockReturnValue(false);\n \n const { result: result1 } = renderHook(() => useHistory());\n expect(result1.current.canUndo).toBe(true);\n \n // Only scene has undo\n mockModelStore.canUndo.mockReturnValue(false);\n mockSceneStore.canUndo.mockReturnValue(true);\n \n const { result: result2 } = renderHook(() => useHistory());\n expect(result2.current.canUndo).toBe(true);\n \n // Both have undo\n mockModelStore.canUndo.mockReturnValue(true);\n mockSceneStore.canUndo.mockReturnValue(true);\n \n const { result: result3 } = renderHook(() => useHistory());\n expect(result3.current.canUndo).toBe(true);\n \n // Neither has undo\n mockModelStore.canUndo.mockReturnValue(false);\n mockSceneStore.canUndo.mockReturnValue(false);\n \n const { result: result4 } = renderHook(() => useHistory());\n expect(result4.current.canUndo).toBe(false);\n });\n\n it('should check both stores for redo capability', () => {\n // Only model has redo\n mockModelStore.canRedo.mockReturnValue(true);\n mockSceneStore.canRedo.mockReturnValue(false);\n \n const { result: result1 } = renderHook(() => useHistory());\n expect(result1.current.canRedo).toBe(true);\n \n // Only scene has redo\n mockModelStore.canRedo.mockReturnValue(false);\n mockSceneStore.canRedo.mockReturnValue(true);\n \n const { result: result2 } = renderHook(() => useHistory());\n expect(result2.current.canRedo).toBe(true);\n });\n });\n\n describe('edge cases', () => {\n it('should handle missing store actions gracefully', () => {\n // Mock stores returning undefined actions\n const useModelStore = require('../../stores/modelStore').useModelStore;\n const useSceneStore = require('../../stores/sceneStore').useSceneStore;\n \n useModelStore.mockImplementation((selector) => {\n const state = { actions: undefined };\n return selector ? selector(state) : state;\n });\n useSceneStore.mockImplementation((selector) => {\n const state = { actions: undefined };\n return selector ? selector(state) : state;\n });\n \n const { result } = renderHook(() => useHistory());\n \n // Should not throw and return safe defaults\n expect(result.current.canUndo).toBe(false);\n expect(result.current.canRedo).toBe(false);\n \n act(() => {\n expect(result.current.undo()).toBe(false);\n expect(result.current.redo()).toBe(false);\n // These should not throw\n result.current.saveToHistory();\n result.current.clearHistory();\n result.current.transaction(() => {});\n });\n \n // Restore mocks for other tests\n useModelStore.mockImplementation((selector) => {\n const state = { actions: mockModelStore };\n return selector ? selector(state) : state;\n });\n useSceneStore.mockImplementation((selector) => {\n const state = { actions: mockSceneStore };\n return selector ? selector(state) : state;\n });\n });\n\n it('should not save history during active transaction', () => {\n const { result } = renderHook(() => useHistory());\n \n act(() => {\n result.current.transaction(() => {\n // Clear previous calls from transaction setup\n mockModelStore.saveToHistory.mockClear();\n mockSceneStore.saveToHistory.mockClear();\n \n // Try to save during transaction\n result.current.saveToHistory();\n \n // Should not have saved\n expect(mockModelStore.saveToHistory).not.toHaveBeenCalled();\n expect(mockSceneStore.saveToHistory).not.toHaveBeenCalled();\n });\n });\n });\n });\n});" }, { "path": "packages/fossflow-lib/src/hooks/__tests__/useInitialDataManager.test.tsx", "content": "import { renderHook, act } from '@testing-library/react';\nimport { useInitialDataManager } from '../useInitialDataManager';\nimport { InitialData } from 'src/types';\nimport * as modelStoreModule from 'src/stores/modelStore';\nimport * as uiStateStoreModule from 'src/stores/uiStateStore';\nimport * as useViewModule from 'src/hooks/useView';\n\n// Mock console methods\nconst originalConsoleWarn = console.warn;\nconst originalConsoleLog = console.log;\nconst originalAlert = window.alert;\n\nbeforeAll(() => {\n console.warn = jest.fn();\n console.log = jest.fn();\n window.alert = jest.fn();\n});\n\nafterAll(() => {\n console.warn = originalConsoleWarn;\n console.log = originalConsoleLog;\n window.alert = originalAlert;\n});\n\n// Mock dependencies\njest.mock('src/stores/modelStore');\njest.mock('src/stores/uiStateStore');\njest.mock('src/hooks/useView');\njest.mock('src/schemas/model', () => ({\n modelSchema: {\n safeParse: jest.fn()\n }\n}));\n\ndescribe('useInitialDataManager - Orphaned Connector Handling', () => {\n let mockModelStore: any;\n let mockUiStateStore: any;\n let mockChangeView: jest.Mock;\n let mockModelSchema: any;\n\n beforeEach(() => {\n jest.clearAllMocks();\n\n // Setup mock model store\n mockModelStore = {\n actions: {\n set: jest.fn()\n },\n icons: [],\n colors: []\n };\n (modelStoreModule.useModelStore as jest.Mock).mockImplementation((selector) => {\n if (typeof selector === 'function') {\n return selector(mockModelStore);\n }\n return mockModelStore;\n });\n\n // Setup mock UI state store\n mockUiStateStore = {\n actions: {\n setScroll: jest.fn(),\n setZoom: jest.fn(),\n setIconCategoriesState: jest.fn(),\n resetUiState: jest.fn()\n },\n rendererEl: null,\n editorMode: 'INTERACTIVE'\n };\n (uiStateStoreModule.useUiStateStore as jest.Mock).mockImplementation((selector) => {\n if (typeof selector === 'function') {\n return selector(mockUiStateStore);\n }\n return mockUiStateStore;\n });\n\n // Setup mock changeView\n mockChangeView = jest.fn();\n (useViewModule.useView as jest.Mock).mockReturnValue({\n changeView: mockChangeView\n });\n\n // Setup mock model schema\n mockModelSchema = require('src/schemas/model').modelSchema;\n mockModelSchema.safeParse.mockReturnValue({ success: true });\n });\n\n it('should filter out connectors with invalid item references during load', () => {\n const { result } = renderHook(() => useInitialDataManager());\n\n const initialData: InitialData = {\n version: '1.0',\n title: 'Test',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [\n {\n id: 'view1',\n name: 'Test View',\n items: [\n { id: 'item1', tile: { x: 0, y: 0 } },\n { id: 'item2', tile: { x: 1, y: 0 } }\n ],\n connectors: [\n {\n id: 'connector1',\n anchors: [\n { id: 'anchor1', ref: { item: 'item1' }, face: 'right' },\n { id: 'anchor2', ref: { item: 'item2' }, face: 'left' }\n ]\n },\n {\n id: 'connector2',\n anchors: [\n { id: 'anchor3', ref: { item: 'item1' }, face: 'top' },\n { id: 'anchor4', ref: { item: 'nonexistent' }, face: 'bottom' } // Invalid reference\n ]\n },\n {\n id: 'connector3',\n anchors: [\n { id: 'anchor5', ref: { item: 'nonexistent1' }, face: 'right' }, // Invalid reference\n { id: 'anchor6', ref: { item: 'nonexistent2' }, face: 'left' } // Invalid reference\n ]\n }\n ],\n rectangles: [],\n textBoxes: []\n }\n ]\n };\n\n act(() => {\n result.current.load(initialData);\n });\n\n // Check that the model store was called with filtered connectors\n const setCall = mockModelStore.actions.set.mock.calls[0][0];\n expect(setCall.views[0].connectors).toHaveLength(1);\n expect(setCall.views[0].connectors[0].id).toBe('connector1');\n\n // Check that warnings were logged for removed connectors\n expect(console.warn).toHaveBeenCalledWith('Removing connector connector2 due to invalid item references');\n expect(console.warn).toHaveBeenCalledWith('Removing connector connector3 due to invalid item references');\n });\n\n it('should allow connectors that reference other anchors', () => {\n const { result } = renderHook(() => useInitialDataManager());\n\n const initialData: InitialData = {\n version: '1.0',\n title: 'Test',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [\n {\n id: 'view1',\n name: 'Test View',\n items: [\n { id: 'item1', tile: { x: 0, y: 0 } }\n ],\n connectors: [\n {\n id: 'connector1',\n anchors: [\n { id: 'anchor1', ref: { item: 'item1' }, face: 'right' },\n { id: 'anchor2', ref: { anchor: 'anchor3' }, face: 'left' } // References another anchor\n ]\n }\n ],\n rectangles: [],\n textBoxes: []\n }\n ]\n };\n\n act(() => {\n result.current.load(initialData);\n });\n\n // Connector with anchor reference should be preserved\n const setCall = mockModelStore.actions.set.mock.calls[0][0];\n expect(setCall.views[0].connectors).toHaveLength(1);\n expect(setCall.views[0].connectors[0].id).toBe('connector1');\n });\n\n it('should handle views with no connectors', () => {\n const { result } = renderHook(() => useInitialDataManager());\n\n const initialData: InitialData = {\n version: '1.0',\n title: 'Test',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [\n {\n id: 'view1',\n name: 'Test View',\n items: [{ id: 'item1', tile: { x: 0, y: 0 } }],\n rectangles: [],\n textBoxes: []\n }\n ]\n };\n\n act(() => {\n result.current.load(initialData);\n });\n\n // Should not throw and should load successfully\n expect(mockModelStore.actions.set).toHaveBeenCalled();\n expect(result.current.isReady).toBe(true);\n });\n\n it('should handle all connectors being invalid', () => {\n const { result } = renderHook(() => useInitialDataManager());\n\n const initialData: InitialData = {\n version: '1.0',\n title: 'Test',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [\n {\n id: 'view1',\n name: 'Test View',\n items: [{ id: 'item1', tile: { x: 0, y: 0 } }],\n connectors: [\n {\n id: 'connector1',\n anchors: [\n { id: 'anchor1', ref: { item: 'nonexistent1' }, face: 'right' },\n { id: 'anchor2', ref: { item: 'nonexistent2' }, face: 'left' }\n ]\n },\n {\n id: 'connector2',\n anchors: [\n { id: 'anchor3', ref: { item: 'deleted1' }, face: 'top' },\n { id: 'anchor4', ref: { item: 'deleted2' }, face: 'bottom' }\n ]\n }\n ],\n rectangles: [],\n textBoxes: []\n }\n ]\n };\n\n act(() => {\n result.current.load(initialData);\n });\n\n // All connectors should be removed\n const setCall = mockModelStore.actions.set.mock.calls[0][0];\n expect(setCall.views[0].connectors).toHaveLength(0);\n expect(console.warn).toHaveBeenCalledTimes(2);\n });\n\n it('should handle mixed valid and invalid anchor references', () => {\n const { result } = renderHook(() => useInitialDataManager());\n\n const initialData: InitialData = {\n version: '1.0',\n title: 'Test',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [\n {\n id: 'view1',\n name: 'Test View',\n items: [\n { id: 'item1', tile: { x: 0, y: 0 } },\n { id: 'item2', tile: { x: 1, y: 0 } }\n ],\n connectors: [\n {\n id: 'connector1',\n anchors: [\n { id: 'anchor1', ref: { item: 'item1' }, face: 'right' }, // Valid\n { id: 'anchor2', ref: { item: 'item2' }, face: 'left' }, // Valid\n { id: 'anchor3', ref: { item: 'nonexistent' }, face: 'top' } // Invalid\n ]\n }\n ],\n rectangles: [],\n textBoxes: []\n }\n ]\n };\n\n act(() => {\n result.current.load(initialData);\n });\n\n // Connector with any invalid anchor should be removed\n const setCall = mockModelStore.actions.set.mock.calls[0][0];\n expect(setCall.views[0].connectors).toHaveLength(0);\n expect(console.warn).toHaveBeenCalledWith('Removing connector connector1 due to invalid item references');\n });\n\n it('should not modify original initialData object', () => {\n const { result } = renderHook(() => useInitialDataManager());\n\n const initialData: InitialData = {\n version: '1.0',\n title: 'Test',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [\n {\n id: 'view1',\n name: 'Test View',\n items: [{ id: 'item1', tile: { x: 0, y: 0 } }],\n connectors: [\n {\n id: 'connector1',\n anchors: [\n { id: 'anchor1', ref: { item: 'nonexistent' }, face: 'right' },\n { id: 'anchor2', ref: { item: 'item1' }, face: 'left' }\n ]\n }\n ],\n rectangles: [],\n textBoxes: []\n }\n ]\n };\n\n const originalData = JSON.parse(JSON.stringify(initialData));\n\n act(() => {\n result.current.load(initialData);\n });\n\n // Original data should not be modified\n expect(initialData).toEqual(originalData);\n });\n\n it('should handle validation errors gracefully', () => {\n const { result } = renderHook(() => useInitialDataManager());\n\n mockModelSchema.safeParse.mockReturnValueOnce({\n success: false,\n error: {\n errors: [{ message: 'Validation failed' }]\n }\n });\n\n const initialData: InitialData = {\n version: '1.0',\n title: 'Test',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: []\n };\n\n act(() => {\n result.current.load(initialData);\n });\n\n expect(window.alert).toHaveBeenCalledWith('There is an error in your model.');\n expect(mockModelStore.actions.set).not.toHaveBeenCalled();\n expect(result.current.isReady).toBe(false);\n });\n\n it('should preserve connectors with all valid references', () => {\n const { result } = renderHook(() => useInitialDataManager());\n\n const initialData: InitialData = {\n version: '1.0',\n title: 'Test',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [\n {\n id: 'view1',\n name: 'Test View',\n items: [\n { id: 'item1', tile: { x: 0, y: 0 } },\n { id: 'item2', tile: { x: 1, y: 0 } },\n { id: 'item3', tile: { x: 2, y: 0 } }\n ],\n connectors: [\n {\n id: 'connector1',\n anchors: [\n { id: 'anchor1', ref: { item: 'item1' }, face: 'right' },\n { id: 'anchor2', ref: { item: 'item2' }, face: 'left' }\n ]\n },\n {\n id: 'connector2',\n anchors: [\n { id: 'anchor3', ref: { item: 'item2' }, face: 'right' },\n { id: 'anchor4', ref: { item: 'item3' }, face: 'left' }\n ]\n }\n ],\n rectangles: [],\n textBoxes: []\n }\n ]\n };\n\n act(() => {\n result.current.load(initialData);\n });\n\n // All valid connectors should be preserved\n const setCall = mockModelStore.actions.set.mock.calls[0][0];\n expect(setCall.views[0].connectors).toHaveLength(2);\n expect(setCall.views[0].connectors[0].id).toBe('connector1');\n expect(setCall.views[0].connectors[1].id).toBe('connector2');\n expect(console.warn).not.toHaveBeenCalled();\n });\n});" }, { "path": "packages/fossflow-lib/src/hooks/useColor.ts", "content": "import { useMemo } from 'react';\nimport { getItemById } from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\n\nexport const useColor = (colorId?: string) => {\n const { colors } = useScene();\n\n const color = useMemo(() => {\n if (colorId === undefined) {\n return colors.length > 0 ? colors[0] : null;\n }\n\n const item = getItemById(colors, colorId);\n return item ? item.value : null;\n }, [colorId, colors]);\n\n return color;\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useConnector.ts", "content": "import { useMemo } from 'react';\nimport { getItemById } from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\n\nexport const useConnector = (id: string) => {\n const { connectors } = useScene();\n\n const connector = useMemo(() => {\n const item = getItemById(connectors, id);\n return item ? item.value : null;\n }, [connectors, id]);\n\n return connector;\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useDiagramUtils.ts", "content": "import { useCallback } from 'react';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { Size, Coords } from 'src/types';\nimport {\n getUnprojectedBounds as getUnprojectedBoundsUtil,\n getVisualBounds as getVisualBoundsUtil,\n getFitToViewParams as getFitToViewParamsUtil,\n CoordsUtils\n} from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\nimport { useResizeObserver } from './useResizeObserver';\n\nexport const useDiagramUtils = () => {\n const scene = useScene();\n const rendererEl = useUiStateStore((state) => {\n return state.rendererEl;\n });\n const { size: rendererSize } = useResizeObserver(rendererEl);\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n\n const getUnprojectedBounds = useCallback((): Size & Coords => {\n return getUnprojectedBoundsUtil(scene.currentView);\n }, [scene.currentView]);\n\n const getVisualBounds = useCallback((): Size & Coords => {\n return getVisualBoundsUtil(scene.currentView);\n }, [scene.currentView]);\n\n const getFitToViewParams = useCallback(\n (viewportSize: Size) => {\n return getFitToViewParamsUtil(scene.currentView, viewportSize);\n },\n [scene.currentView]\n );\n\n const fitToView = useCallback(async () => {\n const { zoom, scroll } = getFitToViewParams(rendererSize);\n\n uiStateActions.setScroll({\n position: scroll,\n offset: CoordsUtils.zero()\n });\n uiStateActions.setZoom(zoom);\n }, [uiStateActions, getFitToViewParams, rendererSize]);\n\n return {\n getUnprojectedBounds,\n getVisualBounds,\n fitToView,\n getFitToViewParams\n };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useHistory.ts", "content": "import { useCallback, useRef } from 'react';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { useSceneStore } from 'src/stores/sceneStore';\n\nexport const useHistory = () => {\n // Track if we're in a transaction to prevent nested history saves\n const transactionInProgress = useRef(false);\n\n // Get store actions\n const modelActions = useModelStore((state) => {\n return state?.actions;\n });\n const sceneActions = useSceneStore((state) => {\n return state?.actions;\n });\n\n // Get history state\n const modelCanUndo = useModelStore((state) => {\n return state?.actions?.canUndo?.() ?? false;\n });\n const sceneCanUndo = useSceneStore((state) => {\n return state?.actions?.canUndo?.() ?? false;\n });\n const modelCanRedo = useModelStore((state) => {\n return state?.actions?.canRedo?.() ?? false;\n });\n const sceneCanRedo = useSceneStore((state) => {\n return state?.actions?.canRedo?.() ?? false;\n });\n\n // Derived values\n const canUndo = modelCanUndo || sceneCanUndo;\n const canRedo = modelCanRedo || sceneCanRedo;\n\n // Transaction wrapper - groups multiple operations into single history entry\n const transaction = useCallback(\n (operations: () => void) => {\n if (!modelActions || !sceneActions) return;\n\n // Prevent nested transactions\n if (transactionInProgress.current) {\n operations();\n return;\n }\n\n // Save current state before transaction\n modelActions.saveToHistory();\n sceneActions.saveToHistory();\n\n // Mark transaction as in progress\n transactionInProgress.current = true;\n\n try {\n // Execute all operations without saving intermediate history\n operations();\n } finally {\n // Always reset transaction state\n transactionInProgress.current = false;\n }\n\n // Note: We don't save after transaction - the final state is already current\n },\n [modelActions, sceneActions]\n );\n\n const undo = useCallback(() => {\n if (!modelActions || !sceneActions) return false;\n\n let undoPerformed = false;\n\n // Try to undo model first, then scene\n if (modelActions.canUndo()) {\n undoPerformed = modelActions.undo() || undoPerformed;\n }\n if (sceneActions.canUndo()) {\n undoPerformed = sceneActions.undo() || undoPerformed;\n }\n\n return undoPerformed;\n }, [modelActions, sceneActions]);\n\n const redo = useCallback(() => {\n if (!modelActions || !sceneActions) return false;\n\n let redoPerformed = false;\n\n // Try to redo model first, then scene\n if (modelActions.canRedo()) {\n redoPerformed = modelActions.redo() || redoPerformed;\n }\n if (sceneActions.canRedo()) {\n redoPerformed = sceneActions.redo() || redoPerformed;\n }\n\n return redoPerformed;\n }, [modelActions, sceneActions]);\n\n const saveToHistory = useCallback(() => {\n // Don't save during transactions\n if (transactionInProgress.current) {\n return;\n }\n\n if (!modelActions || !sceneActions) return;\n\n modelActions.saveToHistory();\n sceneActions.saveToHistory();\n }, [modelActions, sceneActions]);\n\n const clearHistory = useCallback(() => {\n if (!modelActions || !sceneActions) return;\n\n modelActions.clearHistory();\n sceneActions.clearHistory();\n }, [modelActions, sceneActions]);\n\n return {\n undo,\n redo,\n canUndo,\n canRedo,\n saveToHistory,\n clearHistory,\n transaction,\n isInTransaction: () => {\n return transactionInProgress.current;\n }\n };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useIcon.tsx", "content": "import React, { useMemo, useEffect } from 'react';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { getItemById } from 'src/utils';\nimport { IsometricIcon } from 'src/components/SceneLayers/Nodes/Node/IconTypes/IsometricIcon';\nimport { NonIsometricIcon } from 'src/components/SceneLayers/Nodes/Node/IconTypes/NonIsometricIcon';\nimport { DEFAULT_ICON } from 'src/config';\n\nexport const useIcon = (id: string | undefined) => {\n const [hasLoaded, setHasLoaded] = React.useState(false);\n const icons = useModelStore((state) => {\n return state.icons;\n });\n\n const icon = useMemo(() => {\n if (!id) return DEFAULT_ICON;\n\n const item = getItemById(icons, id);\n return item ? item.value : DEFAULT_ICON;\n }, [icons, id]);\n\n useEffect(() => {\n setHasLoaded(false);\n }, [icon.url]);\n\n const iconComponent = useMemo(() => {\n if (!icon.isIsometric) {\n setHasLoaded(true);\n return ;\n }\n\n return (\n {\n setHasLoaded(true);\n }}\n />\n );\n }, [icon]);\n\n return {\n icon,\n iconComponent,\n hasLoaded\n };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useIconCategories.ts", "content": "import { useMemo } from 'react';\nimport { IconCollectionStateWithIcons } from 'src/types';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useModelStore } from 'src/stores/modelStore';\n\nexport const useIconCategories = () => {\n const icons = useModelStore((state) => {\n return state.icons;\n });\n const iconCategoriesState = useUiStateStore((state) => {\n return state.iconCategoriesState;\n });\n\n const iconCategories = useMemo(() => {\n return iconCategoriesState.map((collection) => {\n return {\n ...collection,\n icons: icons.filter((icon) => {\n return icon.collection === collection.id;\n })\n };\n });\n }, [icons, iconCategoriesState]);\n\n return {\n iconCategories\n };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useIconFiltering.ts", "content": "import { useState, useMemo } from 'react';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { Icon } from 'src/types';\n\nexport const useIconFiltering = () => {\n const [filter, setFilter] = useState('');\n\n const icons = useModelStore((state) => {\n return state.icons;\n });\n\n const filteredIcons = useMemo(() => {\n if (filter === '') return null;\n\n // Escape special regex characters to treat filter as literal string\n const escapedFilter = filter.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n const regex = new RegExp(escapedFilter, 'gi');\n\n return icons.filter((icon: Icon) => {\n if (!filter) {\n return true;\n }\n\n return regex.test(icon.name);\n });\n }, [icons, filter]);\n\n return {\n setFilter,\n filter,\n filteredIcons\n };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useInitialDataManager.ts", "content": "import { useCallback, useState, useRef } from 'react';\nimport { InitialData, IconCollectionState } from 'src/types';\nimport { INITIAL_DATA, INITIAL_SCENE_STATE } from 'src/config';\nimport {\n getFitToViewParams,\n CoordsUtils,\n categoriseIcons,\n generateId,\n getItemByIdOrThrow\n} from 'src/utils';\nimport * as reducers from 'src/stores/reducers';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { useView } from 'src/hooks/useView';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { modelSchema } from 'src/schemas/model';\n\nexport const useInitialDataManager = () => {\n const [isReady, setIsReady] = useState(false);\n const prevInitialData = useRef(undefined);\n const model = useModelStore((state) => {\n return state;\n });\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n const rendererEl = useUiStateStore((state) => {\n return state.rendererEl;\n });\n const editorMode = useUiStateStore((state) => {\n return state.editorMode;\n });\n const { changeView } = useView();\n\n const load = useCallback(\n (_initialData: InitialData) => {\n if (!_initialData || prevInitialData.current === _initialData) return;\n\n // Deep comparison to prevent unnecessary reloads when data hasn't actually changed\n // Skip this check for NON_INTERACTIVE mode (used by export) to ensure proper initialization\n if (prevInitialData.current && editorMode !== 'NON_INTERACTIVE') {\n const prevConnectors = JSON.stringify(prevInitialData.current.views?.[0]?.connectors || []);\n const newConnectors = JSON.stringify(_initialData.views?.[0]?.connectors || []);\n const prevItems = JSON.stringify(prevInitialData.current.items || []);\n const newItems = JSON.stringify(_initialData.items || []);\n const prevIcons = JSON.stringify(prevInitialData.current.icons || []);\n const newIcons = JSON.stringify(_initialData.icons || []);\n const prevColors = JSON.stringify(prevInitialData.current.colors || []);\n const newColors = JSON.stringify(_initialData.colors || []);\n\n if (prevConnectors === newConnectors && prevItems === newItems &&\n prevIcons === newIcons && prevColors === newColors) {\n // Data hasn't actually changed, skip reload\n return;\n }\n }\n\n setIsReady(false);\n\n const validationResult = modelSchema.safeParse(_initialData);\n\n if (!validationResult.success) {\n // TODO: let's get better at reporting error messages here (starting with how we present them to users)\n // - not in console but in a modal\n console.log(validationResult.error.errors);\n window.alert('There is an error in your model.');\n return;\n }\n\n // Clean up invalid connector references before loading\n const initialData = { ..._initialData };\n initialData.views = initialData.views.map(view => {\n if (!view.connectors) return view;\n\n const validConnectors = view.connectors.filter(connector => {\n // Check if all anchors reference existing items\n const hasValidAnchors = connector.anchors.every(anchor => {\n if (anchor.ref.item) {\n // Check if the referenced item exists in the view\n return view.items.some(item => item.id === anchor.ref.item);\n }\n return true; // Allow anchors that reference other anchors\n });\n\n if (!hasValidAnchors) {\n console.warn(`Removing connector ${connector.id} due to invalid item references`);\n }\n\n return hasValidAnchors;\n });\n\n return { ...view, connectors: validConnectors };\n });\n\n if (initialData.views.length === 0) {\n const updates = reducers.view({\n action: 'CREATE_VIEW',\n payload: {},\n ctx: {\n state: { model: initialData, scene: INITIAL_SCENE_STATE },\n viewId: generateId()\n }\n });\n\n Object.assign(initialData, updates.model);\n }\n\n prevInitialData.current = initialData;\n model.actions.set(initialData, true);\n\n const view = getItemByIdOrThrow(\n initialData.views,\n initialData.view ?? initialData.views[0].id\n );\n\n changeView(view.value.id, initialData);\n\n if (initialData.fitToView) {\n const rendererSize = rendererEl?.getBoundingClientRect();\n\n const { zoom, scroll } = getFitToViewParams(view.value, {\n width: rendererSize?.width ?? 0,\n height: rendererSize?.height ?? 0\n });\n\n uiStateActions.setScroll({\n position: scroll,\n offset: CoordsUtils.zero()\n });\n\n uiStateActions.setZoom(zoom);\n }\n\n const categoriesState: IconCollectionState[] = categoriseIcons(\n initialData.icons\n ).map((collection) => {\n return {\n id: collection.name,\n isExpanded: false\n };\n });\n\n uiStateActions.setIconCategoriesState(categoriesState);\n\n setIsReady(true);\n },\n [changeView, model.actions, rendererEl, uiStateActions, editorMode]\n );\n\n const clear = useCallback(() => {\n load({ ...INITIAL_DATA, icons: model.icons, colors: model.colors });\n uiStateActions.resetUiState();\n }, [load, model.icons, model.colors, uiStateActions]);\n\n return {\n load,\n clear,\n isReady\n };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useIsoProjection.ts", "content": "import { useMemo } from 'react';\nimport { Coords, Size, ProjectionOrientationEnum } from 'src/types';\nimport {\n getBoundingBox,\n getIsoProjectionCss,\n getTilePosition\n} from 'src/utils';\nimport { UNPROJECTED_TILE_SIZE } from 'src/config';\n\ninterface Props {\n from: Coords;\n to: Coords;\n originOverride?: Coords;\n orientation?: keyof typeof ProjectionOrientationEnum;\n}\n\nexport const useIsoProjection = ({\n from,\n to,\n originOverride,\n orientation\n}: Props): {\n css: React.CSSProperties;\n position: Coords;\n gridSize: Size;\n pxSize: Size;\n} => {\n const gridSize = useMemo(() => {\n return {\n width: Math.abs(from.x - to.x) + 1,\n height: Math.abs(from.y - to.y) + 1\n };\n }, [from, to]);\n\n const origin = useMemo(() => {\n if (originOverride) return originOverride;\n\n const boundingBox = getBoundingBox([from, to]);\n\n return boundingBox[3];\n }, [from, to, originOverride]);\n\n const position = useMemo(() => {\n const pos = getTilePosition({\n tile: origin,\n origin: orientation === 'Y' ? 'TOP' : 'LEFT'\n });\n\n return pos;\n }, [origin, orientation]);\n\n const pxSize = useMemo(() => {\n return {\n width: gridSize.width * UNPROJECTED_TILE_SIZE,\n height: gridSize.height * UNPROJECTED_TILE_SIZE\n };\n }, [gridSize]);\n\n return useMemo(() => ({\n css: {\n position: 'absolute' as const,\n left: position.x,\n top: position.y,\n width: `${pxSize.width}px`,\n height: `${pxSize.height}px`,\n transform: getIsoProjectionCss(orientation),\n transformOrigin: 'top left'\n },\n position,\n gridSize,\n pxSize\n }), [position, pxSize, gridSize, orientation]);\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useModelItem.ts", "content": "import { useMemo } from 'react';\nimport { ModelItem } from 'src/types';\nimport { useModelStore } from 'src/stores/modelStore';\nimport { getItemById } from 'src/utils';\n\nexport const useModelItem = (id: string): ModelItem | null => {\n const items = useModelStore((state) => state.items);\n\n const modelItem = useMemo(() => {\n const item = getItemById(items, id);\n return item ? item.value : null;\n }, [id, items]);\n\n return modelItem;\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useRectangle.ts", "content": "import { useMemo } from 'react';\nimport { getItemById } from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\n\nexport const useRectangle = (id: string) => {\n const { rectangles } = useScene();\n\n const rectangle = useMemo(() => {\n const item = getItemById(rectangles, id);\n return item ? item.value : null;\n }, [rectangles, id]);\n\n return rectangle;\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useResizeObserver.ts", "content": "import { useCallback, useEffect, useRef, useState } from 'react';\nimport { Size } from 'src/types';\n\nexport const useResizeObserver = (el?: HTMLElement | null) => {\n const resizeObserverRef = useRef(undefined);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const disconnect = useCallback(() => {\n resizeObserverRef.current?.disconnect();\n }, []);\n\n const observe = useCallback(\n (element: HTMLElement) => {\n disconnect();\n\n resizeObserverRef.current = new ResizeObserver(() => {\n setSize({\n width: element.clientWidth,\n height: element.clientHeight\n });\n });\n\n resizeObserverRef.current.observe(element);\n },\n [disconnect]\n );\n\n useEffect(() => {\n return () => {\n disconnect();\n };\n }, [disconnect]);\n\n useEffect(() => {\n if (el) observe(el);\n }, [observe, el]);\n\n return {\n size,\n disconnect,\n observe\n };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useScene.ts", "content": "import { useCallback, useMemo, useRef } from 'react';\nimport { shallow } from 'zustand/shallow';\nimport {\n ModelItem,\n ViewItem,\n Connector,\n TextBox,\n Rectangle\n} from 'src/types';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useModelStore, useModelStoreApi } from 'src/stores/modelStore';\nimport { useSceneStore, useSceneStoreApi } from 'src/stores/sceneStore';\nimport * as reducers from 'src/stores/reducers';\nimport type { State } from 'src/stores/reducers/types';\nimport { getItemByIdOrThrow } from 'src/utils';\nimport {\n CONNECTOR_DEFAULTS,\n RECTANGLE_DEFAULTS,\n TEXTBOX_DEFAULTS\n} from 'src/config';\n\nexport const useScene = () => {\n const { views, colors, icons, items, version, title, description } =\n useModelStore(\n (state) => ({\n views: state.views,\n colors: state.colors,\n icons: state.icons,\n items: state.items,\n version: state.version,\n title: state.title,\n description: state.description\n }),\n shallow\n );\n const { connectors: sceneConnectors, textBoxes: sceneTextBoxes } =\n useSceneStore(\n (state) => ({\n connectors: state.connectors,\n textBoxes: state.textBoxes\n }),\n shallow\n );\n const currentViewId = useUiStateStore((state) => state.view);\n const transactionInProgress = useRef(false);\n\n const modelStoreApi = useModelStoreApi();\n const sceneStoreApi = useSceneStoreApi();\n\n const currentView = useMemo(() => {\n if (!views || !currentViewId) {\n return {\n id: '',\n name: 'Default View',\n items: [],\n connectors: [],\n rectangles: [],\n textBoxes: []\n };\n }\n\n try {\n return getItemByIdOrThrow(views, currentViewId).value;\n } catch (error) {\n return (\n views[0] || {\n id: currentViewId,\n name: 'Default View',\n items: [],\n connectors: [],\n rectangles: [],\n textBoxes: []\n }\n );\n }\n }, [currentViewId, views]);\n\n const itemsList = useMemo(() => {\n return currentView.items ?? [];\n }, [currentView.items]);\n\n const colorsList = useMemo(() => {\n return colors ?? [];\n }, [colors]);\n\n const connectorsList = useMemo(() => {\n return (currentView.connectors ?? []).map((connector) => {\n const sceneConnector = sceneConnectors?.[connector.id];\n\n return {\n ...CONNECTOR_DEFAULTS,\n ...connector,\n ...sceneConnector\n };\n });\n }, [currentView.connectors, sceneConnectors]);\n\n const rectanglesList = useMemo(() => {\n return (currentView.rectangles ?? []).map((rectangle) => {\n return {\n ...RECTANGLE_DEFAULTS,\n ...rectangle\n };\n });\n }, [currentView.rectangles]);\n\n const textBoxesList = useMemo(() => {\n return (currentView.textBoxes ?? []).map((textBox) => {\n const sceneTextBox = sceneTextBoxes?.[textBox.id];\n\n return {\n ...TEXTBOX_DEFAULTS,\n ...textBox,\n ...sceneTextBox\n };\n });\n }, [currentView.textBoxes, sceneTextBoxes]);\n\n const getState = useCallback((): State => {\n const model = modelStoreApi.getState();\n const scene = sceneStoreApi.getState();\n return {\n model: {\n version: model.version,\n title: model.title,\n description: model.description,\n colors: model.colors,\n icons: model.icons,\n items: model.items,\n views: model.views\n },\n scene: {\n connectors: scene.connectors,\n textBoxes: scene.textBoxes\n }\n };\n }, [modelStoreApi, sceneStoreApi]);\n\n const setState = useCallback(\n (newState: State) => {\n modelStoreApi.getState().actions.set(newState.model, true);\n sceneStoreApi.getState().actions.set(newState.scene, true);\n },\n [modelStoreApi, sceneStoreApi]\n );\n\n const saveToHistoryBeforeChange = useCallback(() => {\n if (transactionInProgress.current) {\n return;\n }\n\n modelStoreApi.getState().actions.saveToHistory();\n sceneStoreApi.getState().actions.saveToHistory();\n }, [modelStoreApi, sceneStoreApi]);\n\n const createModelItem = useCallback(\n (newModelItem: ModelItem) => {\n if (!transactionInProgress.current) {\n saveToHistoryBeforeChange();\n }\n\n const newState = reducers.createModelItem(newModelItem, getState());\n setState(newState);\n return newState;\n },\n [getState, setState, saveToHistoryBeforeChange]\n );\n\n const updateModelItem = useCallback(\n (id: string, updates: Partial) => {\n saveToHistoryBeforeChange();\n const newState = reducers.updateModelItem(id, updates, getState());\n setState(newState);\n },\n [getState, setState, saveToHistoryBeforeChange]\n );\n\n const deleteModelItem = useCallback(\n (id: string) => {\n saveToHistoryBeforeChange();\n const newState = reducers.deleteModelItem(id, getState());\n setState(newState);\n },\n [getState, setState, saveToHistoryBeforeChange]\n );\n\n const createViewItem = useCallback(\n (newViewItem: ViewItem, currentState?: State) => {\n if (!currentViewId) return;\n\n if (!transactionInProgress.current) {\n saveToHistoryBeforeChange();\n }\n\n const stateToUse = currentState || getState();\n\n const newState = reducers.view({\n action: 'CREATE_VIEWITEM',\n payload: newViewItem,\n ctx: { viewId: currentViewId, state: stateToUse }\n });\n setState(newState);\n return newState;\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const updateViewItem = useCallback(\n (id: string, updates: Partial, currentState?: State) => {\n if (!currentViewId) return getState();\n\n if (!transactionInProgress.current) {\n saveToHistoryBeforeChange();\n }\n\n const stateToUse = currentState || getState();\n const newState = reducers.view({\n action: 'UPDATE_VIEWITEM',\n payload: { id, ...updates },\n ctx: { viewId: currentViewId, state: stateToUse }\n });\n setState(newState);\n return newState;\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const deleteViewItem = useCallback(\n (id: string) => {\n if (!currentViewId) return;\n\n saveToHistoryBeforeChange();\n const newState = reducers.view({\n action: 'DELETE_VIEWITEM',\n payload: id,\n ctx: { viewId: currentViewId, state: getState() }\n });\n setState(newState);\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const createConnector = useCallback(\n (newConnector: Connector) => {\n if (!currentViewId) return;\n\n saveToHistoryBeforeChange();\n const newState = reducers.view({\n action: 'CREATE_CONNECTOR',\n payload: newConnector,\n ctx: { viewId: currentViewId, state: getState() }\n });\n setState(newState);\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const updateConnector = useCallback(\n (id: string, updates: Partial) => {\n if (!currentViewId) return;\n\n saveToHistoryBeforeChange();\n const newState = reducers.view({\n action: 'UPDATE_CONNECTOR',\n payload: { id, ...updates },\n ctx: { viewId: currentViewId, state: getState() }\n });\n setState(newState);\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const deleteConnector = useCallback(\n (id: string) => {\n if (!currentViewId) return;\n\n saveToHistoryBeforeChange();\n const newState = reducers.view({\n action: 'DELETE_CONNECTOR',\n payload: id,\n ctx: { viewId: currentViewId, state: getState() }\n });\n setState(newState);\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const createTextBox = useCallback(\n (newTextBox: TextBox) => {\n if (!currentViewId) return;\n\n saveToHistoryBeforeChange();\n const newState = reducers.view({\n action: 'CREATE_TEXTBOX',\n payload: newTextBox,\n ctx: { viewId: currentViewId, state: getState() }\n });\n setState(newState);\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const updateTextBox = useCallback(\n (id: string, updates: Partial, currentState?: State) => {\n if (!currentViewId) return currentState || getState();\n\n if (!transactionInProgress.current) {\n saveToHistoryBeforeChange();\n }\n\n const stateToUse = currentState || getState();\n const newState = reducers.view({\n action: 'UPDATE_TEXTBOX',\n payload: { id, ...updates },\n ctx: { viewId: currentViewId, state: stateToUse }\n });\n setState(newState);\n return newState;\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const deleteTextBox = useCallback(\n (id: string) => {\n if (!currentViewId) return;\n\n saveToHistoryBeforeChange();\n const newState = reducers.view({\n action: 'DELETE_TEXTBOX',\n payload: id,\n ctx: { viewId: currentViewId, state: getState() }\n });\n setState(newState);\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const createRectangle = useCallback(\n (newRectangle: Rectangle) => {\n if (!currentViewId) return;\n\n saveToHistoryBeforeChange();\n const newState = reducers.view({\n action: 'CREATE_RECTANGLE',\n payload: newRectangle,\n ctx: { viewId: currentViewId, state: getState() }\n });\n setState(newState);\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const updateRectangle = useCallback(\n (id: string, updates: Partial, currentState?: State) => {\n if (!currentViewId) return currentState || getState();\n\n if (!transactionInProgress.current) {\n saveToHistoryBeforeChange();\n }\n\n const stateToUse = currentState || getState();\n const newState = reducers.view({\n action: 'UPDATE_RECTANGLE',\n payload: { id, ...updates },\n ctx: { viewId: currentViewId, state: stateToUse }\n });\n setState(newState);\n return newState;\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const deleteRectangle = useCallback(\n (id: string) => {\n if (!currentViewId) return;\n\n saveToHistoryBeforeChange();\n const newState = reducers.view({\n action: 'DELETE_RECTANGLE',\n payload: id,\n ctx: { viewId: currentViewId, state: getState() }\n });\n setState(newState);\n },\n [getState, setState, currentViewId, saveToHistoryBeforeChange]\n );\n\n const transaction = useCallback(\n (operations: () => void) => {\n if (transactionInProgress.current) {\n operations();\n return;\n }\n\n saveToHistoryBeforeChange();\n transactionInProgress.current = true;\n\n try {\n operations();\n } finally {\n transactionInProgress.current = false;\n }\n },\n [saveToHistoryBeforeChange]\n );\n\n const placeIcon = useCallback(\n (params: { modelItem: ModelItem; viewItem: ViewItem }) => {\n saveToHistoryBeforeChange();\n transactionInProgress.current = true;\n\n try {\n const stateAfterModelItem = createModelItem(params.modelItem);\n\n if (stateAfterModelItem) {\n createViewItem(params.viewItem, stateAfterModelItem);\n }\n } finally {\n transactionInProgress.current = false;\n }\n },\n [createModelItem, createViewItem, saveToHistoryBeforeChange]\n );\n\n return {\n items: itemsList,\n connectors: connectorsList,\n colors: colorsList,\n rectangles: rectanglesList,\n textBoxes: textBoxesList,\n currentView,\n createModelItem,\n updateModelItem,\n deleteModelItem,\n createViewItem,\n updateViewItem,\n deleteViewItem,\n createConnector,\n updateConnector,\n deleteConnector,\n createTextBox,\n updateTextBox,\n deleteTextBox,\n createRectangle,\n updateRectangle,\n deleteRectangle,\n transaction,\n placeIcon\n };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useTextBox.ts", "content": "import { useMemo } from 'react';\nimport { getItemById } from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\n\nexport const useTextBox = (id: string) => {\n const { textBoxes } = useScene();\n\n const textBox = useMemo(() => {\n const item = getItemById(textBoxes, id);\n return item ? item.value : null;\n }, [textBoxes, id]);\n\n return textBox;\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useTextBoxProps.ts", "content": "import { useMemo } from 'react';\nimport { TextBox } from 'src/types';\nimport {\n UNPROJECTED_TILE_SIZE,\n DEFAULT_FONT_FAMILY,\n TEXTBOX_DEFAULTS,\n TEXTBOX_FONT_WEIGHT,\n TEXTBOX_PADDING\n} from 'src/config';\n\nexport const useTextBoxProps = (textBox: TextBox) => {\n const fontProps = useMemo(() => {\n return {\n fontSize:\n UNPROJECTED_TILE_SIZE * (textBox.fontSize ?? TEXTBOX_DEFAULTS.fontSize),\n fontFamily: DEFAULT_FONT_FAMILY,\n fontWeight: TEXTBOX_FONT_WEIGHT\n };\n }, [textBox.fontSize]);\n\n const paddingX = useMemo(() => {\n return UNPROJECTED_TILE_SIZE * TEXTBOX_PADDING;\n }, []);\n\n return { paddingX, fontProps };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useView.ts", "content": "import { useCallback } from 'react';\nimport { useUiStateStore } from 'src/stores/uiStateStore';\nimport { useSceneStore } from 'src/stores/sceneStore';\nimport * as reducers from 'src/stores/reducers';\nimport { Model } from 'src/types';\nimport { INITIAL_SCENE_STATE } from 'src/config';\n\nexport const useView = () => {\n const uiStateActions = useUiStateStore((state) => {\n return state.actions;\n });\n\n const sceneActions = useSceneStore((state) => {\n return state.actions;\n });\n\n const changeView = useCallback(\n (viewId: string, model: Model) => {\n const newState = reducers.view({\n action: 'SYNC_SCENE',\n payload: undefined,\n ctx: { viewId, state: { model, scene: INITIAL_SCENE_STATE } }\n });\n\n sceneActions.set(newState.scene, true);\n uiStateActions.setView(viewId);\n },\n [uiStateActions, sceneActions]\n );\n\n return {\n changeView\n };\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useViewItem.ts", "content": "import { useMemo } from 'react';\nimport { getItemById } from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\n\nexport const useViewItem = (id: string) => {\n const { items } = useScene();\n\n const viewItem = useMemo(() => {\n const item = getItemById(items, id);\n return item ? item.value : null;\n }, [items, id]);\n\n return viewItem;\n};\n" }, { "path": "packages/fossflow-lib/src/hooks/useWindowUtils.ts", "content": "import { useEffect } from 'react';\nimport { useDiagramUtils } from 'src/hooks/useDiagramUtils';\n\nexport const useWindowUtils = () => {\n const { fitToView, getUnprojectedBounds } = useDiagramUtils();\n\n useEffect(() => {\n window.Isoflow = {\n getUnprojectedBounds,\n fitToView\n };\n }, [getUnprojectedBounds, fitToView]);\n};\n" }, { "path": "packages/fossflow-lib/src/i18n/bn-BD.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"এটি একটি উদাহরণ পাঠ্য\"\n },\n mainMenu: {\n undo: \"পূর্বাবস্থায় ফেরান\",\n redo: \"পুনরায় করুন\",\n open: \"খুলুন\",\n exportJson: \"JSON হিসাবে রপ্তানি করুন\",\n exportCompactJson: \"কমপ্যাক্ট JSON হিসাবে রপ্তানি করুন\",\n exportImage: \"ছবি হিসাবে রপ্তানি করুন\",\n clearCanvas: \"ক্যানভাস পরিষ্কার করুন\",\n settings: \"সেটিংস\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"কীবোর্ড শর্টকাট এবং সহায়তা\",\n close: \"বন্ধ করুন\",\n keyboardShortcuts: \"কীবোর্ড শর্টকাট\",\n mouseInteractions: \"মাউস ইন্টারঅ্যাকশন\",\n action: \"ক্রিয়া\",\n shortcut: \"শর্টকাট\",\n method: \"পদ্ধতি\",\n description: \"বিবরণ\",\n note: \"নোট:\",\n noteContent: \"দ্বন্দ্ব এড়াতে ইনপুট ফিল্ড, টেক্সট এরিয়া বা সম্পাদনাযোগ্য উপাদানে টাইপ করার সময় কীবোর্ড শর্টকাট নিষ্ক্রিয় থাকে।\",\n // Keyboard shortcuts\n undoAction: \"পূর্বাবস্থায় ফেরান\",\n undoDescription: \"শেষ ক্রিয়াটি পূর্বাবস্থায় ফেরান\",\n redoAction: \"পুনরায় করুন\",\n redoDescription: \"শেষ পূর্বাবস্থায় ফেরানো ক্রিয়া পুনরায় করুন\",\n redoAltAction: \"পুনরায় করুন (বিকল্প)\",\n redoAltDescription: \"পুনরায় করার জন্য বিকল্প শর্টকাট\",\n helpAction: \"সহায়তা\",\n helpDescription: \"কীবোর্ড শর্টকাট সহ সহায়তা ডায়ালগ খুলুন\",\n zoomInAction: \"জুম ইন করুন\",\n zoomInShortcut: \"মাউস হুইল উপরে\",\n zoomInDescription: \"ক্যানভাসে জুম ইন করুন\",\n zoomOutAction: \"জুম আউট করুন\",\n zoomOutShortcut: \"মাউস হুইল নিচে\",\n zoomOutDescription: \"ক্যানভাস থেকে জুম আউট করুন\",\n panCanvasAction: \"ক্যানভাস প্যান করুন\",\n panCanvasShortcut: \"বাম-ক্লিক + টেনে আনুন\",\n panCanvasDescription: \"প্যান মোডে ক্যানভাস প্যান করুন\",\n contextMenuAction: \"প্রসঙ্গ মেনু\",\n contextMenuShortcut: \"ডান-ক্লিক\",\n contextMenuDescription: \"আইটেম বা খালি স্থানের জন্য প্রসঙ্গ মেনু খুলুন\",\n // Mouse interactions\n selectToolAction: \"নির্বাচন টুল\",\n selectToolShortcut: \"নির্বাচন বোতামে ক্লিক করুন\",\n selectToolDescription: \"নির্বাচন মোডে স্যুইচ করুন\",\n panToolAction: \"প্যান টুল\",\n panToolShortcut: \"প্যান বোতামে ক্লিক করুন\",\n panToolDescription: \"ক্যানভাস সরানোর জন্য প্যান মোডে স্যুইচ করুন\",\n addItemAction: \"আইটেম যোগ করুন\",\n addItemShortcut: \"আইটেম যোগ করুন বোতামে ক্লিক করুন\",\n addItemDescription: \"নতুন আইটেম যোগ করতে আইকন পিকার খুলুন\",\n drawRectangleAction: \"আয়তক্ষেত্র আঁকুন\",\n drawRectangleShortcut: \"আয়তক্ষেত্র বোতামে ক্লিক করুন\",\n drawRectangleDescription: \"আয়তক্ষেত্র অঙ্কন মোডে স্যুইচ করুন\",\n createConnectorAction: \"সংযোগকারী তৈরি করুন\",\n createConnectorShortcut: \"সংযোগকারী বোতামে ক্লিক করুন\",\n createConnectorDescription: \"সংযোগকারী মোডে স্যুইচ করুন\",\n addTextAction: \"পাঠ্য যোগ করুন\",\n addTextShortcut: \"পাঠ্য বোতামে ক্লিক করুন\",\n addTextDescription: \"একটি নতুন টেক্সট বক্স তৈরি করুন\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"টিপ: সংযোগকারী তৈরি করা\",\n tipConnectorTools: \"টিপ: সংযোগকারী টুল\",\n clickInstructionStart: \"ক্লিক করুন\",\n clickInstructionMiddle: \"প্রথম নোড বা পয়েন্টে, তারপর\",\n clickInstructionEnd: \"দ্বিতীয় নোড বা পয়েন্টে একটি সংযোগ তৈরি করতে।\",\n nowClickTarget: \"সংযোগ সম্পূর্ণ করতে এখন লক্ষ্যে ক্লিক করুন।\",\n dragStart: \"টেনে আনুন\",\n dragEnd: \"প্রথম নোড থেকে দ্বিতীয় নোডে একটি সংযোগ তৈরি করতে।\",\n rerouteStart: \"একটি সংযোগকারী পুনর্নির্দেশ করতে,\",\n rerouteMiddle: \"বাম-ক্লিক করুন\",\n rerouteEnd: \"সংযোগকারী লাইনের সাথে যে কোনও পয়েন্টে এবং অ্যাঙ্কর পয়েন্ট তৈরি বা সরাতে টেনে আনুন।\"\n },\n lassoHintTooltip: {\n tipLasso: \"টিপ: ল্যাসো নির্বাচন\",\n tipFreehandLasso: \"টিপ: ফ্রিহ্যান্ড ল্যাসো নির্বাচন\",\n lassoDragStart: \"ক্লিক করুন এবং টেনে আনুন\",\n lassoDragEnd: \"আপনি যে আইটেমগুলি নির্বাচন করতে চান তার চারপাশে একটি আয়তক্ষেত্রাকার নির্বাচন বক্স আঁকতে।\",\n freehandDragStart: \"ক্লিক করুন এবং টেনে আনুন\",\n freehandDragMiddle: \"একটি আঁকতে\",\n freehandDragEnd: \"মুক্ত আকৃতি\",\n freehandComplete: \"আইটেমগুলির চারপাশে। আকৃতির ভিতরের সমস্ত আইটেম নির্বাচন করতে ছেড়ে দিন।\",\n moveStart: \"একবার নির্বাচিত হলে,\",\n moveMiddle: \"নির্বাচনের ভিতরে ক্লিক করুন\",\n moveEnd: \"এবং সমস্ত নির্বাচিত আইটেম একসাথে সরাতে টেনে আনুন।\"\n },\n importHintTooltip: {\n title: \"ডায়াগ্রাম আমদানি করুন\",\n instructionStart: \"ডায়াগ্রাম আমদানি করতে, ক্লিক করুন\",\n menuButton: \"মেনু বোতাম\",\n instructionMiddle: \"(☰) উপরের বাম কোণে, তারপর নির্বাচন করুন\",\n openButton: \"\\\"খুলুন\\\"\",\n instructionEnd: \"আপনার ডায়াগ্রাম ফাইল লোড করতে।\"\n },\n connectorRerouteTooltip: {\n title: \"টিপ: সংযোগকারী পুনর্নির্দেশ করুন\",\n instructionStart: \"একবার আপনার সংযোগকারী স্থাপন করা হলে আপনি আপনার ইচ্ছামতো তাদের পুনর্নির্দেশ করতে পারেন।\",\n instructionSelect: \"সংযোগকারী নির্বাচন করুন\",\n instructionMiddle: \"প্রথমে, তারপর\",\n instructionClick: \"সংযোগকারী পথে ক্লিক করুন\",\n instructionAnd: \"এবং\",\n instructionDrag: \"টেনে আনুন\",\n instructionEnd: \"এটি পরিবর্তন করতে!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"এই সংযোগকারীটিকে একটি নোডের সাথে সংযোগ করতে,\",\n instruction: \"সংযোগকারীর শেষে বাম-ক্লিক করুন এবং এটিকে পছন্দসই নোডে টানুন।\"\n },\n settings: {\n zoom: {\n description: \"মাউস হুইল ব্যবহার করার সময় জুম আচরণ কনফিগার করুন।\",\n zoomToCursor: \"কার্সারে জুম করুন\",\n zoomToCursorDesc: \"সক্রিয় থাকলে, মাউস কার্সার অবস্থানে কেন্দ্রীভূত জুম ইন/আউট। নিষ্ক্রিয় থাকলে, জুম ক্যানভাসে কেন্দ্রীভূত।\"\n },\n hotkeys: {\n title: \"শর্টকাট সেটিংস\",\n profile: \"শর্টকাট প্রোফাইল\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"কোন শর্টকাট নেই\",\n tool: \"টুল\",\n hotkey: \"শর্টকাট\",\n toolSelect: \"নির্বাচন করুন\",\n toolPan: \"প্যান করুন\",\n toolAddItem: \"আইটেম যোগ করুন\",\n toolRectangle: \"আয়তক্ষেত্র\",\n toolConnector: \"সংযোগকারী\",\n toolText: \"পাঠ্য\",\n note: \"নোট: টেক্সট ফিল্ডে টাইপ না করার সময় শর্টকাটগুলি কাজ করে\"\n },\n pan: {\n title: \"প্যান সেটিংস\",\n mousePanOptions: \"মাউস প্যান বিকল্প\",\n emptyAreaClickPan: \"খালি এলাকায় ক্লিক করুন এবং টেনে আনুন\",\n middleClickPan: \"মধ্য ক্লিক করুন এবং টেনে আনুন\",\n rightClickPan: \"ডান ক্লিক করুন এবং টেনে আনুন\",\n ctrlClickPan: \"Ctrl + ক্লিক করুন এবং টেনে আনুন\",\n altClickPan: \"Alt + ক্লিক করুন এবং টেনে আনুন\",\n keyboardPanOptions: \"কীবোর্ড প্যান বিকল্প\",\n arrowKeys: \"তীর কী\",\n wasdKeys: \"WASD কী\",\n ijklKeys: \"IJKL কী\",\n keyboardPanSpeed: \"কীবোর্ড প্যান গতি\",\n note: \"নোট: নিবেদিত প্যান টুলের পাশাপাশি প্যান বিকল্পগুলি কাজ করে\"\n },\n connector: {\n title: \"সংযোগকারী সেটিংস\",\n connectionMode: \"সংযোগ তৈরির মোড\",\n clickMode: \"ক্লিক মোড (প্রস্তাবিত)\",\n clickModeDesc: \"প্রথম নোডে ক্লিক করুন, তারপর একটি সংযোগ তৈরি করতে দ্বিতীয় নোডে ক্লিক করুন\",\n dragMode: \"টেনে আনার মোড\",\n dragModeDesc: \"প্রথম নোড থেকে দ্বিতীয় নোডে ক্লিক করুন এবং টেনে আনুন\",\n note: \"নোট: আপনি যেকোনো সময় এই সেটিং পরিবর্তন করতে পারেন। সংযোগকারী টুল সক্রিয় থাকলে নির্বাচিত মোড ব্যবহার করা হবে।\"\n },\n iconPacks: {\n title: \"আইকন প্যাক ব্যবস্থাপনা\",\n lazyLoading: \"লেজি লোডিং সক্ষম করুন\",\n lazyLoadingDesc: \"দ্রুত স্টার্টআপের জন্য চাহিদা অনুযায়ী আইকন প্যাক লোড করুন\",\n availablePacks: \"উপলব্ধ আইকন প্যাক\",\n coreIsoflow: \"Core Isoflow (সর্বদা লোড)\",\n alwaysEnabled: \"সর্বদা সক্রিয়\",\n awsPack: \"AWS আইকন\",\n gcpPack: \"Google Cloud আইকন\",\n azurePack: \"Azure আইকন\",\n kubernetesPack: \"Kubernetes আইকন\",\n loading: \"লোড হচ্ছে...\",\n loaded: \"লোড করা হয়েছে\",\n notLoaded: \"লোড করা হয়নি\",\n iconCount: \"{count} আইকন\",\n lazyLoadingDisabledNote: \"লেজি লোডিং নিষ্ক্রিয়। সমস্ত আইকন প্যাক স্টার্টআপে লোড করা হয়।\",\n note: \"আইকন প্যাকগুলি আপনার প্রয়োজন অনুসারে সক্রিয় বা নিষ্ক্রিয় করা যেতে পারে। নিষ্ক্রিয় প্যাকগুলি মেমরি ব্যবহার হ্রাস করবে এবং কর্মক্ষমতা উন্নত করবে।\"\n }\n },\n lazyLoadingWelcome: {\n title: \"নতুন বৈশিষ্ট্য: লেজি লোডিং!\",\n message: \"হেই! জনপ্রিয় চাহিদার পরে, আমরা আইকনগুলির লেজি লোডিং প্রয়োগ করেছি, তাই এখন আপনি যদি অ-মানক আইকন প্যাক সক্ষম করতে চান তবে আপনি 'কনফিগারেশন' বিভাগে সেগুলি সক্ষম করতে পারেন।\",\n configPath: \"হ্যামবার্গার আইকনে ক্লিক করুন\",\n configPath2: \"কনফিগারেশন অ্যাক্সেস করতে উপরের বাম দিকে।\",\n canDisable: \"আপনি চাইলে এই আচরণ নিষ্ক্রিয় করতে পারেন।\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/i18n/en-US.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"This is an example text\"\n },\n mainMenu: {\n undo: \"Undo\",\n redo: \"Redo\", \n open: \"Open\",\n exportJson: \"Export as JSON\",\n exportCompactJson: \"Export as Compact JSON\",\n exportImage: \"Export as image\",\n clearCanvas: \"Clear the canvas\",\n settings: \"Settings\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"Keyboard Shortcuts & Help\",\n close: \"Close\",\n keyboardShortcuts: \"Keyboard Shortcuts\",\n mouseInteractions: \"Mouse Interactions\",\n action: \"Action\",\n shortcut: \"Shortcut\",\n method: \"Method\",\n description: \"Description\",\n note: \"Note:\",\n noteContent: \"Keyboard shortcuts are disabled when typing in input fields, text areas, or content-editable elements to prevent conflicts.\",\n // Keyboard shortcuts\n undoAction: \"Undo\",\n undoDescription: \"Undo the last action\",\n redoAction: \"Redo\",\n redoDescription: \"Redo the last undone action\",\n redoAltAction: \"Redo (Alternative)\",\n redoAltDescription: \"Alternative redo shortcut\",\n helpAction: \"Help\",\n helpDescription: \"Open help dialog with keyboard shortcuts\",\n zoomInAction: \"Zoom In\",\n zoomInShortcut: \"Mouse Wheel Up\",\n zoomInDescription: \"Zoom in on the canvas\",\n zoomOutAction: \"Zoom Out\",\n zoomOutShortcut: \"Mouse Wheel Down\",\n zoomOutDescription: \"Zoom out from the canvas\",\n panCanvasAction: \"Pan Canvas\",\n panCanvasShortcut: \"Left-click + Drag\",\n panCanvasDescription: \"Pan the canvas when in Pan mode\",\n contextMenuAction: \"Context Menu\",\n contextMenuShortcut: \"Right-click\",\n contextMenuDescription: \"Open context menu for items or empty space\",\n // Mouse interactions\n selectToolAction: \"Select Tool\",\n selectToolShortcut: \"Click Select button\",\n selectToolDescription: \"Switch to selection mode\",\n panToolAction: \"Pan Tool\",\n panToolShortcut: \"Click Pan button\",\n panToolDescription: \"Switch to pan mode for moving canvas\",\n addItemAction: \"Add Item\",\n addItemShortcut: \"Click Add item button\",\n addItemDescription: \"Open icon picker to add new items\",\n drawRectangleAction: \"Draw Rectangle\",\n drawRectangleShortcut: \"Click Rectangle button\",\n drawRectangleDescription: \"Switch to rectangle drawing mode\",\n createConnectorAction: \"Create Connector\",\n createConnectorShortcut: \"Click Connector button\",\n createConnectorDescription: \"Switch to connector mode\",\n addTextAction: \"Add Text\",\n addTextShortcut: \"Click Text button\",\n addTextDescription: \"Create a new text box\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"Tip: Creating Connectors\",\n tipConnectorTools: \"Tip: Connector Tools\",\n clickInstructionStart: \"Click\",\n clickInstructionMiddle: \"on the first node or point, then\",\n clickInstructionEnd: \"on the second node or point to create a connection.\",\n nowClickTarget: \"Now click on the target to complete the connection.\",\n dragStart: \"Drag\",\n dragEnd: \"from the first node to the second node to create a connection.\",\n rerouteStart: \"To reroute a connector,\",\n rerouteMiddle: \"left-click\",\n rerouteEnd: \"on any point along the connector line and drag to create or move anchor points.\"\n },\n lassoHintTooltip: {\n tipLasso: \"Tip: Lasso Selection\",\n tipFreehandLasso: \"Tip: Freehand Lasso Selection\",\n lassoDragStart: \"Click and drag\",\n lassoDragEnd: \"to draw a rectangular selection box around items you want to select.\",\n freehandDragStart: \"Click and drag\",\n freehandDragMiddle: \"to draw a\",\n freehandDragEnd: \"freeform shape\",\n freehandComplete: \"around items. Release to select all items inside the shape.\",\n moveStart: \"Once selected,\",\n moveMiddle: \"click inside the selection\",\n moveEnd: \"and drag to move all selected items together.\"\n },\n importHintTooltip: {\n title: \"Import Diagrams\",\n instructionStart: \"To import diagrams, click the\",\n menuButton: \"menu button\",\n instructionMiddle: \"(☰) in the top left corner, then select\",\n openButton: \"\\\"Open\\\"\",\n instructionEnd: \"to load your diagram files.\"\n },\n connectorRerouteTooltip: {\n title: \"Tip: Reroute Connectors\",\n instructionStart: \"Once your connectors are placed you can reroute them as you please.\",\n instructionSelect: \"Select the connector\",\n instructionMiddle: \"first, then\",\n instructionClick: \"click on the connector path\",\n instructionAnd: \"and\",\n instructionDrag: \"drag\",\n instructionEnd: \"to change it!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"To connect this connector to a node,\",\n instruction: \"left-click on the end of the connector and drag it to the desired node.\"\n },\n settings: {\n zoom: {\n description: \"Configure zoom behavior when using the mouse wheel.\",\n zoomToCursor: \"Zoom to Cursor\",\n zoomToCursorDesc: \"When enabled, zoom in/out centered on the mouse cursor position. When disabled, zoom is centered on the canvas.\"\n },\n hotkeys: {\n title: \"Hotkey Settings\",\n profile: \"Hotkey Profile\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"No Hotkeys\",\n tool: \"Tool\",\n hotkey: \"Hotkey\",\n toolSelect: \"Select\",\n toolPan: \"Pan\",\n toolAddItem: \"Add Item\",\n toolRectangle: \"Rectangle\",\n toolConnector: \"Connector\",\n toolText: \"Text\",\n note: \"Note: Hotkeys work when not typing in text fields\"\n },\n pan: {\n title: \"Pan Settings\",\n mousePanOptions: \"Mouse Pan Options\",\n emptyAreaClickPan: \"Click and drag on empty area\",\n middleClickPan: \"Middle click and drag\",\n rightClickPan: \"Right click and drag\",\n ctrlClickPan: \"Ctrl + click and drag\",\n altClickPan: \"Alt + click and drag\",\n keyboardPanOptions: \"Keyboard Pan Options\",\n arrowKeys: \"Arrow keys\",\n wasdKeys: \"WASD keys\",\n ijklKeys: \"IJKL keys\",\n keyboardPanSpeed: \"Keyboard Pan Speed\",\n note: \"Note: Pan options work in addition to the dedicated Pan tool\"\n },\n connector: {\n title: \"Connector Settings\",\n connectionMode: \"Connection Creation Mode\",\n clickMode: \"Click Mode (Recommended)\",\n clickModeDesc: \"Click the first node, then click the second node to create a connection\",\n dragMode: \"Drag Mode\",\n dragModeDesc: \"Click and drag from the first node to the second node\",\n note: \"Note: You can change this setting at any time. The selected mode will be used when the Connector tool is active.\"\n },\n iconPacks: {\n title: \"Icon Pack Management\",\n lazyLoading: \"Enable Lazy Loading\",\n lazyLoadingDesc: \"Load icon packs on demand for faster startup\",\n availablePacks: \"Available Icon Packs\",\n coreIsoflow: \"Core Isoflow (Always Loaded)\",\n alwaysEnabled: \"Always enabled\",\n awsPack: \"AWS Icons\",\n gcpPack: \"Google Cloud Icons\",\n azurePack: \"Azure Icons\",\n kubernetesPack: \"Kubernetes Icons\",\n loading: \"Loading...\",\n loaded: \"Loaded\",\n notLoaded: \"Not loaded\",\n iconCount: \"{count} icons\",\n lazyLoadingDisabledNote: \"Lazy loading is disabled. All icon packs are loaded at startup.\",\n note: \"Icon packs can be enabled or disabled based on your needs. Disabled packs will reduce memory usage and improve performance.\"\n }\n },\n lazyLoadingWelcome: {\n title: \"New Feature: Lazy Loading!\",\n message: \"Hey! After popular demand, we have implemented Lazy Loading of icons, so now if you want to enable non-standard icon packs you can enable them in the 'Configuration' section.\",\n configPath: \"Click on the Hamburger icon\",\n configPath2: \"in the top left to access Configuration.\",\n canDisable: \"You can disable this behaviour if you wish.\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/i18n/es-ES.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"Este es un texto de ejemplo\"\n },\n mainMenu: {\n undo: \"Deshacer\",\n redo: \"Rehacer\",\n open: \"Abrir\",\n exportJson: \"Exportar como JSON\",\n exportCompactJson: \"Exportar como JSON compacto\",\n exportImage: \"Exportar como imagen\",\n clearCanvas: \"Limpiar el lienzo\",\n settings: \"Configuración\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"Atajos de teclado y ayuda\",\n close: \"Cerrar\",\n keyboardShortcuts: \"Atajos de teclado\",\n mouseInteractions: \"Interacciones del ratón\",\n action: \"Acción\",\n shortcut: \"Atajo\",\n method: \"Método\",\n description: \"Descripción\",\n note: \"Nota:\",\n noteContent: \"Los atajos de teclado se desactivan al escribir en campos de entrada, áreas de texto o elementos editables para evitar conflictos.\",\n // Keyboard shortcuts\n undoAction: \"Deshacer\",\n undoDescription: \"Deshacer la última acción\",\n redoAction: \"Rehacer\",\n redoDescription: \"Rehacer la última acción deshecha\",\n redoAltAction: \"Rehacer (Alternativo)\",\n redoAltDescription: \"Atajo alternativo para rehacer\",\n helpAction: \"Ayuda\",\n helpDescription: \"Abrir diálogo de ayuda con atajos de teclado\",\n zoomInAction: \"Acercar\",\n zoomInShortcut: \"Rueda del ratón hacia arriba\",\n zoomInDescription: \"Acercar en el lienzo\",\n zoomOutAction: \"Alejar\",\n zoomOutShortcut: \"Rueda del ratón hacia abajo\",\n zoomOutDescription: \"Alejar del lienzo\",\n panCanvasAction: \"Desplazar lienzo\",\n panCanvasShortcut: \"Clic izquierdo + Arrastrar\",\n panCanvasDescription: \"Desplazar el lienzo en modo desplazamiento\",\n contextMenuAction: \"Menú contextual\",\n contextMenuShortcut: \"Clic derecho\",\n contextMenuDescription: \"Abrir menú contextual para elementos o espacio vacío\",\n // Mouse interactions\n selectToolAction: \"Herramienta de selección\",\n selectToolShortcut: \"Clic en botón Seleccionar\",\n selectToolDescription: \"Cambiar al modo de selección\",\n panToolAction: \"Herramienta de desplazamiento\",\n panToolShortcut: \"Clic en botón Desplazar\",\n panToolDescription: \"Cambiar al modo de desplazamiento para mover el lienzo\",\n addItemAction: \"Añadir elemento\",\n addItemShortcut: \"Clic en botón Añadir elemento\",\n addItemDescription: \"Abrir selector de iconos para añadir nuevos elementos\",\n drawRectangleAction: \"Dibujar rectángulo\",\n drawRectangleShortcut: \"Clic en botón Rectángulo\",\n drawRectangleDescription: \"Cambiar al modo de dibujo de rectángulos\",\n createConnectorAction: \"Crear conector\",\n createConnectorShortcut: \"Clic en botón Conector\",\n createConnectorDescription: \"Cambiar al modo de conector\",\n addTextAction: \"Añadir texto\",\n addTextShortcut: \"Clic en botón Texto\",\n addTextDescription: \"Crear un nuevo cuadro de texto\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"Consejo: Crear conectores\",\n tipConnectorTools: \"Consejo: Herramientas de conectores\",\n clickInstructionStart: \"Haz clic\",\n clickInstructionMiddle: \"en el primer nodo o punto, luego\",\n clickInstructionEnd: \"en el segundo nodo o punto para crear una conexión.\",\n nowClickTarget: \"Ahora haz clic en el objetivo para completar la conexión.\",\n dragStart: \"Arrastra\",\n dragEnd: \"desde el primer nodo al segundo nodo para crear una conexión.\",\n rerouteStart: \"Para cambiar la ruta de un conector,\",\n rerouteMiddle: \"haz clic izquierdo\",\n rerouteEnd: \"en cualquier punto a lo largo de la línea del conector y arrastra para crear o mover puntos de anclaje.\"\n },\n lassoHintTooltip: {\n tipLasso: \"Consejo: Selección de lazo\",\n tipFreehandLasso: \"Consejo: Selección de lazo libre\",\n lassoDragStart: \"Haz clic y arrastra\",\n lassoDragEnd: \"para dibujar un cuadro de selección rectangular alrededor de los elementos que deseas seleccionar.\",\n freehandDragStart: \"Haz clic y arrastra\",\n freehandDragMiddle: \"para dibujar una\",\n freehandDragEnd: \"forma libre\",\n freehandComplete: \"alrededor de los elementos. Suelta para seleccionar todos los elementos dentro de la forma.\",\n moveStart: \"Una vez seleccionados,\",\n moveMiddle: \"haz clic dentro de la selección\",\n moveEnd: \"y arrastra para mover todos los elementos seleccionados juntos.\"\n },\n importHintTooltip: {\n title: \"Importar diagramas\",\n instructionStart: \"Para importar diagramas, haz clic en el\",\n menuButton: \"botón de menú\",\n instructionMiddle: \"(☰) en la esquina superior izquierda, luego selecciona\",\n openButton: \"\\\"Abrir\\\"\",\n instructionEnd: \"para cargar tus archivos de diagrama.\"\n },\n connectorRerouteTooltip: {\n title: \"Consejo: Cambiar ruta de conectores\",\n instructionStart: \"Una vez que tus conectores estén colocados, puedes cambiar su ruta como desees.\",\n instructionSelect: \"Selecciona el conector\",\n instructionMiddle: \"primero, luego\",\n instructionClick: \"haz clic en la ruta del conector\",\n instructionAnd: \"y\",\n instructionDrag: \"arrastra\",\n instructionEnd: \"para cambiarlo!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"Para conectar este conector a un nodo,\",\n instruction: \"haz clic izquierdo en el extremo del conector y arrástralo al nodo deseado.\"\n },\n settings: {\n zoom: {\n description: \"Configura el comportamiento del zoom al usar la rueda del ratón.\",\n zoomToCursor: \"Zoom al cursor\",\n zoomToCursorDesc: \"Cuando está habilitado, el zoom se centra en la posición del cursor del ratón. Cuando está deshabilitado, el zoom se centra en el lienzo.\"\n },\n hotkeys: {\n title: \"Configuración de atajos\",\n profile: \"Perfil de atajos\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"Sin atajos\",\n tool: \"Herramienta\",\n hotkey: \"Atajo\",\n toolSelect: \"Seleccionar\",\n toolPan: \"Desplazar\",\n toolAddItem: \"Añadir elemento\",\n toolRectangle: \"Rectángulo\",\n toolConnector: \"Conector\",\n toolText: \"Texto\",\n note: \"Nota: Los atajos funcionan cuando no estás escribiendo en campos de texto\"\n },\n pan: {\n title: \"Configuración de desplazamiento\",\n mousePanOptions: \"Opciones de desplazamiento con ratón\",\n emptyAreaClickPan: \"Clic y arrastrar en área vacía\",\n middleClickPan: \"Clic central y arrastrar\",\n rightClickPan: \"Clic derecho y arrastrar\",\n ctrlClickPan: \"Ctrl + clic y arrastrar\",\n altClickPan: \"Alt + clic y arrastrar\",\n keyboardPanOptions: \"Opciones de desplazamiento con teclado\",\n arrowKeys: \"Teclas de flechas\",\n wasdKeys: \"Teclas WASD\",\n ijklKeys: \"Teclas IJKL\",\n keyboardPanSpeed: \"Velocidad de desplazamiento con teclado\",\n note: \"Nota: Las opciones de desplazamiento funcionan además de la herramienta de desplazamiento dedicada\"\n },\n connector: {\n title: \"Configuración de conectores\",\n connectionMode: \"Modo de creación de conexiones\",\n clickMode: \"Modo clic (Recomendado)\",\n clickModeDesc: \"Haz clic en el primer nodo, luego haz clic en el segundo nodo para crear una conexión\",\n dragMode: \"Modo arrastrar\",\n dragModeDesc: \"Haz clic y arrastra desde el primer nodo hasta el segundo nodo\",\n note: \"Nota: Puedes cambiar esta configuración en cualquier momento. El modo seleccionado se usará cuando la herramienta de conector esté activa.\"\n },\n iconPacks: {\n title: \"Gestión de Paquetes de Iconos\",\n lazyLoading: \"Activar Carga Diferida\",\n lazyLoadingDesc: \"Cargar paquetes de iconos bajo demanda para un inicio más rápido\",\n availablePacks: \"Paquetes de Iconos Disponibles\",\n coreIsoflow: \"Core Isoflow (Siempre Cargado)\",\n alwaysEnabled: \"Siempre activado\",\n awsPack: \"Iconos AWS\",\n gcpPack: \"Iconos Google Cloud\",\n azurePack: \"Iconos Azure\",\n kubernetesPack: \"Iconos Kubernetes\",\n loading: \"Cargando...\",\n loaded: \"Cargado\",\n notLoaded: \"No cargado\",\n iconCount: \"{count} iconos\",\n lazyLoadingDisabledNote: \"La carga diferida está desactivada. Todos los paquetes de iconos se cargan al iniciar.\",\n note: \"Los paquetes de iconos se pueden activar o desactivar según tus necesidades. Los paquetes desactivados reducirán el uso de memoria y mejorarán el rendimiento.\"\n }\n },\n lazyLoadingWelcome: {\n title: \"Nueva Funcionalidad: ¡Carga Diferida!\",\n message: \"¡Hola! Después de la demanda popular, hemos implementado la Carga Diferida de iconos, así que ahora si quieres activar paquetes de iconos no estándar puedes activarlos en la sección 'Configuración'.\",\n configPath: \"Haz clic en el icono de Hamburguesa\",\n configPath2: \"en la esquina superior izquierda para acceder a la Configuración.\",\n canDisable: \"Puedes desactivar este comportamiento si lo deseas.\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n\n" }, { "path": "packages/fossflow-lib/src/i18n/fr-FR.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"Ceci est un texte d'exemple\"\n },\n mainMenu: {\n undo: \"Annuler\",\n redo: \"Refaire\",\n open: \"Ouvrir\",\n exportJson: \"Exporter en JSON\",\n exportCompactJson: \"Exporter en JSON compact\",\n exportImage: \"Exporter en image\",\n clearCanvas: \"Effacer le canevas\",\n settings: \"Paramètres\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"Raccourcis clavier et aide\",\n close: \"Fermer\",\n keyboardShortcuts: \"Raccourcis clavier\",\n mouseInteractions: \"Interactions de la souris\",\n action: \"Action\",\n shortcut: \"Raccourci\",\n method: \"Méthode\",\n description: \"Description\",\n note: \"Remarque :\",\n noteContent: \"Les raccourcis clavier sont désactivés lors de la saisie dans les champs de saisie, les zones de texte ou les éléments modifiables pour éviter les conflits.\",\n // Keyboard shortcuts\n undoAction: \"Annuler\",\n undoDescription: \"Annuler la dernière action\",\n redoAction: \"Refaire\",\n redoDescription: \"Refaire la dernière action annulée\",\n redoAltAction: \"Refaire (Alternatif)\",\n redoAltDescription: \"Raccourci alternatif pour refaire\",\n helpAction: \"Aide\",\n helpDescription: \"Ouvrir la boîte de dialogue d'aide avec les raccourcis clavier\",\n zoomInAction: \"Zoom avant\",\n zoomInShortcut: \"Molette de la souris vers le haut\",\n zoomInDescription: \"Effectuer un zoom avant sur le canevas\",\n zoomOutAction: \"Zoom arrière\",\n zoomOutShortcut: \"Molette de la souris vers le bas\",\n zoomOutDescription: \"Effectuer un zoom arrière sur le canevas\",\n panCanvasAction: \"Déplacer le canevas\",\n panCanvasShortcut: \"Clic gauche + Glisser\",\n panCanvasDescription: \"Déplacer le canevas en mode déplacement\",\n contextMenuAction: \"Menu contextuel\",\n contextMenuShortcut: \"Clic droit\",\n contextMenuDescription: \"Ouvrir le menu contextuel pour les éléments ou l'espace vide\",\n // Mouse interactions\n selectToolAction: \"Outil de sélection\",\n selectToolShortcut: \"Cliquer sur le bouton Sélectionner\",\n selectToolDescription: \"Passer en mode sélection\",\n panToolAction: \"Outil de déplacement\",\n panToolShortcut: \"Cliquer sur le bouton Déplacer\",\n panToolDescription: \"Passer en mode déplacement pour déplacer le canevas\",\n addItemAction: \"Ajouter un élément\",\n addItemShortcut: \"Cliquer sur le bouton Ajouter un élément\",\n addItemDescription: \"Ouvrir le sélecteur d'icônes pour ajouter de nouveaux éléments\",\n drawRectangleAction: \"Dessiner un rectangle\",\n drawRectangleShortcut: \"Cliquer sur le bouton Rectangle\",\n drawRectangleDescription: \"Passer en mode dessin de rectangles\",\n createConnectorAction: \"Créer un connecteur\",\n createConnectorShortcut: \"Cliquer sur le bouton Connecteur\",\n createConnectorDescription: \"Passer en mode connecteur\",\n addTextAction: \"Ajouter du texte\",\n addTextShortcut: \"Cliquer sur le bouton Texte\",\n addTextDescription: \"Créer une nouvelle zone de texte\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"Astuce : Créer des connecteurs\",\n tipConnectorTools: \"Astuce : Outils de connecteurs\",\n clickInstructionStart: \"Cliquez\",\n clickInstructionMiddle: \"sur le premier nœud ou point, puis\",\n clickInstructionEnd: \"sur le deuxième nœud ou point pour créer une connexion.\",\n nowClickTarget: \"Cliquez maintenant sur la cible pour terminer la connexion.\",\n dragStart: \"Glissez\",\n dragEnd: \"du premier nœud au deuxième nœud pour créer une connexion.\",\n rerouteStart: \"Pour réacheminer un connecteur,\",\n rerouteMiddle: \"cliquez avec le bouton gauche\",\n rerouteEnd: \"sur n'importe quel point le long de la ligne du connecteur et glissez pour créer ou déplacer des points d'ancrage.\"\n },\n lassoHintTooltip: {\n tipLasso: \"Astuce : Sélection au lasso\",\n tipFreehandLasso: \"Astuce : Sélection au lasso libre\",\n lassoDragStart: \"Cliquez et glissez\",\n lassoDragEnd: \"pour dessiner une zone de sélection rectangulaire autour des éléments que vous souhaitez sélectionner.\",\n freehandDragStart: \"Cliquez et glissez\",\n freehandDragMiddle: \"pour dessiner une\",\n freehandDragEnd: \"forme libre\",\n freehandComplete: \"autour des éléments. Relâchez pour sélectionner tous les éléments à l'intérieur de la forme.\",\n moveStart: \"Une fois sélectionnés,\",\n moveMiddle: \"cliquez à l'intérieur de la sélection\",\n moveEnd: \"et glissez pour déplacer tous les éléments sélectionnés ensemble.\"\n },\n importHintTooltip: {\n title: \"Importer des diagrammes\",\n instructionStart: \"Pour importer des diagrammes, cliquez sur le\",\n menuButton: \"bouton de menu\",\n instructionMiddle: \"(☰) dans le coin supérieur gauche, puis sélectionnez\",\n openButton: \"\\\"Ouvrir\\\"\",\n instructionEnd: \"pour charger vos fichiers de diagramme.\"\n },\n connectorRerouteTooltip: {\n title: \"Astuce : Réacheminer les connecteurs\",\n instructionStart: \"Une fois vos connecteurs placés, vous pouvez les réacheminer comme vous le souhaitez.\",\n instructionSelect: \"Sélectionnez le connecteur\",\n instructionMiddle: \"d'abord, puis\",\n instructionClick: \"cliquez sur le chemin du connecteur\",\n instructionAnd: \"et\",\n instructionDrag: \"glissez\",\n instructionEnd: \"pour le modifier !\"\n },\n connectorEmptySpaceTooltip: {\n message: \"Pour connecter ce connecteur à un nœud,\",\n instruction: \"cliquez avec le bouton gauche sur l'extrémité du connecteur et faites-le glisser vers le nœud souhaité.\"\n },\n settings: {\n zoom: {\n description: \"Configurer le comportement du zoom lors de l'utilisation de la molette de la souris.\",\n zoomToCursor: \"Zoom sur le curseur\",\n zoomToCursorDesc: \"Lorsqu'il est activé, le zoom est centré sur la position du curseur de la souris. Lorsqu'il est désactivé, le zoom est centré sur le canevas.\"\n },\n hotkeys: {\n title: \"Paramètres des raccourcis\",\n profile: \"Profil de raccourcis\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"Aucun raccourci\",\n tool: \"Outil\",\n hotkey: \"Raccourci\",\n toolSelect: \"Sélectionner\",\n toolPan: \"Déplacer\",\n toolAddItem: \"Ajouter un élément\",\n toolRectangle: \"Rectangle\",\n toolConnector: \"Connecteur\",\n toolText: \"Texte\",\n note: \"Remarque : Les raccourcis fonctionnent lorsque vous ne tapez pas dans des champs de texte\"\n },\n pan: {\n title: \"Paramètres de déplacement\",\n mousePanOptions: \"Options de déplacement à la souris\",\n emptyAreaClickPan: \"Cliquer et glisser sur une zone vide\",\n middleClickPan: \"Clic du milieu et glisser\",\n rightClickPan: \"Clic droit et glisser\",\n ctrlClickPan: \"Ctrl + clic et glisser\",\n altClickPan: \"Alt + clic et glisser\",\n keyboardPanOptions: \"Options de déplacement au clavier\",\n arrowKeys: \"Touches fléchées\",\n wasdKeys: \"Touches WASD\",\n ijklKeys: \"Touches IJKL\",\n keyboardPanSpeed: \"Vitesse de déplacement au clavier\",\n note: \"Remarque : Les options de déplacement fonctionnent en plus de l'outil de déplacement dédié\"\n },\n connector: {\n title: \"Paramètres des connecteurs\",\n connectionMode: \"Mode de création de connexion\",\n clickMode: \"Mode clic (Recommandé)\",\n clickModeDesc: \"Cliquez sur le premier nœud, puis cliquez sur le deuxième nœud pour créer une connexion\",\n dragMode: \"Mode glisser\",\n dragModeDesc: \"Cliquez et glissez du premier nœud au deuxième nœud\",\n note: \"Remarque : Vous pouvez modifier ce paramètre à tout moment. Le mode sélectionné sera utilisé lorsque l'outil de connecteur est actif.\"\n },\n iconPacks: {\n title: \"Gestion des Packs d'Icônes\",\n lazyLoading: \"Activer le Chargement Paresseux\",\n lazyLoadingDesc: \"Charger les packs d'icônes à la demande pour un démarrage plus rapide\",\n availablePacks: \"Packs d'Icônes Disponibles\",\n coreIsoflow: \"Core Isoflow (Toujours Chargé)\",\n alwaysEnabled: \"Toujours activé\",\n awsPack: \"Icônes AWS\",\n gcpPack: \"Icônes Google Cloud\",\n azurePack: \"Icônes Azure\",\n kubernetesPack: \"Icônes Kubernetes\",\n loading: \"Chargement...\",\n loaded: \"Chargé\",\n notLoaded: \"Non chargé\",\n iconCount: \"{count} icônes\",\n lazyLoadingDisabledNote: \"Le chargement paresseux est désactivé. Tous les packs d'icônes sont chargés au démarrage.\",\n note: \"Les packs d'icônes peuvent être activés ou désactivés selon vos besoins. Les packs désactivés réduiront l'utilisation de la mémoire et amélioreront les performances.\"\n }\n },\n lazyLoadingWelcome: {\n title: \"Nouvelle Fonctionnalité : Chargement Paresseux !\",\n message: \"Salut ! Suite à une forte demande, nous avons implémenté le Chargement Paresseux des icônes, donc maintenant si vous voulez activer des packs d'icônes non standard, vous pouvez les activer dans la section 'Configuration'.\",\n configPath: \"Cliquez sur l'icône Hamburger\",\n configPath2: \"en haut à gauche pour accéder à la Configuration.\",\n canDisable: \"Vous pouvez désactiver ce comportement si vous le souhaitez.\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/i18n/hi-IN.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"यह एक उदाहरण पाठ है\"\n },\n mainMenu: {\n undo: \"पूर्ववत करें\",\n redo: \"फिर से करें\",\n open: \"खोलें\",\n exportJson: \"JSON के रूप में निर्यात करें\",\n exportCompactJson: \"संक्षिप्त JSON के रूप में निर्यात करें\",\n exportImage: \"छवि के रूप में निर्यात करें\",\n clearCanvas: \"कैनवास साफ़ करें\",\n settings: \"सेटिंग्स\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"कीबोर्ड शॉर्टकट और सहायता\",\n close: \"बंद करें\",\n keyboardShortcuts: \"कीबोर्ड शॉर्टकट\",\n mouseInteractions: \"माउस इंटरैक्शन\",\n action: \"क्रिया\",\n shortcut: \"शॉर्टकट\",\n method: \"विधि\",\n description: \"विवरण\",\n note: \"नोट:\",\n noteContent: \"टकराव से बचने के लिए इनपुट फ़ील्ड, टेक्स्ट एरिया या संपादन योग्य तत्वों में टाइप करते समय कीबोर्ड शॉर्टकट अक्षम हो जाते हैं।\",\n // Keyboard shortcuts\n undoAction: \"पूर्ववत करें\",\n undoDescription: \"अंतिम क्रिया को पूर्ववत करें\",\n redoAction: \"फिर से करें\",\n redoDescription: \"अंतिम पूर्ववत की गई क्रिया को फिर से करें\",\n redoAltAction: \"फिर से करें (वैकल्पिक)\",\n redoAltDescription: \"फिर से करने के लिए वैकल्पिक शॉर्टकट\",\n helpAction: \"सहायता\",\n helpDescription: \"कीबोर्ड शॉर्टकट के साथ सहायता संवाद खोलें\",\n zoomInAction: \"ज़ूम इन करें\",\n zoomInShortcut: \"माउस व्हील ऊपर\",\n zoomInDescription: \"कैनवास पर ज़ूम इन करें\",\n zoomOutAction: \"ज़ूम आउट करें\",\n zoomOutShortcut: \"माउस व्हील नीचे\",\n zoomOutDescription: \"कैनवास से ज़ूम आउट करें\",\n panCanvasAction: \"कैनवास को पैन करें\",\n panCanvasShortcut: \"बाएँ-क्लिक + ड्रैग\",\n panCanvasDescription: \"पैन मोड में कैनवास को पैन करें\",\n contextMenuAction: \"संदर्भ मेनू\",\n contextMenuShortcut: \"राइट-क्लिक\",\n contextMenuDescription: \"आइटम या खाली स्थान के लिए संदर्भ मेनू खोलें\",\n // Mouse interactions\n selectToolAction: \"चयन उपकरण\",\n selectToolShortcut: \"चयन बटन क्लिक करें\",\n selectToolDescription: \"चयन मोड पर स्विच करें\",\n panToolAction: \"पैन उपकरण\",\n panToolShortcut: \"पैन बटन क्लिक करें\",\n panToolDescription: \"कैनवास को स्थानांतरित करने के लिए पैन मोड पर स्विच करें\",\n addItemAction: \"आइटम जोड़ें\",\n addItemShortcut: \"आइटम जोड़ें बटन क्लिक करें\",\n addItemDescription: \"नए आइटम जोड़ने के लिए आइकन पिकर खोलें\",\n drawRectangleAction: \"आयत बनाएं\",\n drawRectangleShortcut: \"आयत बटन क्लिक करें\",\n drawRectangleDescription: \"आयत ड्राइंग मोड पर स्विच करें\",\n createConnectorAction: \"कनेक्टर बनाएं\",\n createConnectorShortcut: \"कनेक्टर बटन क्लिक करें\",\n createConnectorDescription: \"कनेक्टर मोड पर स्विच करें\",\n addTextAction: \"टेक्स्ट जोड़ें\",\n addTextShortcut: \"टेक्स्ट बटन क्लिक करें\",\n addTextDescription: \"एक नया टेक्स्ट बॉक्स बनाएं\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"टिप: कनेक्टर बनाना\",\n tipConnectorTools: \"टिप: कनेक्टर उपकरण\",\n clickInstructionStart: \"क्लिक करें\",\n clickInstructionMiddle: \"पहले नोड या बिंदु पर, फिर\",\n clickInstructionEnd: \"दूसरे नोड या बिंदु पर कनेक्शन बनाने के लिए।\",\n nowClickTarget: \"अब कनेक्शन पूरा करने के लिए लक्ष्य पर क्लिक करें।\",\n dragStart: \"ड्रैग करें\",\n dragEnd: \"पहले नोड से दूसरे नोड तक कनेक्शन बनाने के लिए।\",\n rerouteStart: \"कनेक्टर को पुनर्मार्गित करने के लिए,\",\n rerouteMiddle: \"बाएँ-क्लिक करें\",\n rerouteEnd: \"कनेक्टर लाइन के साथ किसी भी बिंदु पर और एंकर बिंदुओं को बनाने या स्थानांतरित करने के लिए ड्रैग करें।\"\n },\n lassoHintTooltip: {\n tipLasso: \"टिप: लासो चयन\",\n tipFreehandLasso: \"टिप: फ्रीहैंड लासो चयन\",\n lassoDragStart: \"क्लिक करें और ड्रैग करें\",\n lassoDragEnd: \"उन आइटम के चारों ओर एक आयताकार चयन बॉक्स बनाने के लिए जिन्हें आप चुनना चाहते हैं।\",\n freehandDragStart: \"क्लिक करें और ड्रैग करें\",\n freehandDragMiddle: \"एक बनाने के लिए\",\n freehandDragEnd: \"मुक्त आकार\",\n freehandComplete: \"आइटम के चारों ओर। आकार के अंदर सभी आइटम का चयन करने के लिए छोड़ें।\",\n moveStart: \"एक बार चयनित होने पर,\",\n moveMiddle: \"चयन के अंदर क्लिक करें\",\n moveEnd: \"और सभी चयनित आइटम को एक साथ स्थानांतरित करने के लिए ड्रैग करें।\"\n },\n importHintTooltip: {\n title: \"आरेख आयात करें\",\n instructionStart: \"आरेख आयात करने के लिए, क्लिक करें\",\n menuButton: \"मेनू बटन\",\n instructionMiddle: \"(☰) ऊपरी बाएँ कोने में, फिर चुनें\",\n openButton: \"\\\"खोलें\\\"\",\n instructionEnd: \"अपनी आरेख फ़ाइलें लोड करने के लिए।\"\n },\n connectorRerouteTooltip: {\n title: \"टिप: कनेक्टर्स को पुनर्मार्गित करें\",\n instructionStart: \"एक बार आपके कनेक्टर्स स्थापित हो जाने के बाद आप उन्हें अपनी इच्छानुसार पुनर्मार्गित कर सकते हैं।\",\n instructionSelect: \"कनेक्टर का चयन करें\",\n instructionMiddle: \"पहले, फिर\",\n instructionClick: \"कनेक्टर पथ पर क्लिक करें\",\n instructionAnd: \"और\",\n instructionDrag: \"ड्रैग करें\",\n instructionEnd: \"इसे बदलने के लिए!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"इस कनेक्टर को एक नोड से कनेक्ट करने के लिए,\",\n instruction: \"कनेक्टर के अंत पर बाईं-क्लिक करें और इसे वांछित नोड पर खींचें।\"\n },\n settings: {\n zoom: {\n description: \"माउस व्हील का उपयोग करते समय ज़ूम व्यवहार को कॉन्फ़िगर करें।\",\n zoomToCursor: \"कर्सर पर ज़ूम करें\",\n zoomToCursorDesc: \"सक्षम होने पर, माउस कर्सर की स्थिति पर केंद्रित ज़ूम इन/आउट। अक्षम होने पर, ज़ूम कैनवास पर केंद्रित होता है।\"\n },\n hotkeys: {\n title: \"शॉर्टकट सेटिंग्स\",\n profile: \"शॉर्टकट प्रोफ़ाइल\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"कोई शॉर्टकट नहीं\",\n tool: \"उपकरण\",\n hotkey: \"शॉर्टकट\",\n toolSelect: \"चयन करें\",\n toolPan: \"पैन करें\",\n toolAddItem: \"आइटम जोड़ें\",\n toolRectangle: \"आयत\",\n toolConnector: \"कनेक्टर\",\n toolText: \"टेक्स्ट\",\n note: \"नोट: टेक्स्ट फ़ील्ड में टाइप न करने पर शॉर्टकट काम करते हैं\"\n },\n pan: {\n title: \"पैन सेटिंग्स\",\n mousePanOptions: \"माउस पैन विकल्प\",\n emptyAreaClickPan: \"खाली क्षेत्र पर क्लिक करें और ड्रैग करें\",\n middleClickPan: \"मध्य क्लिक करें और ड्रैग करें\",\n rightClickPan: \"राइट क्लिक करें और ड्रैग करें\",\n ctrlClickPan: \"Ctrl + क्लिक करें और ड्रैग करें\",\n altClickPan: \"Alt + क्लिक करें और ड्रैग करें\",\n keyboardPanOptions: \"कीबोर्ड पैन विकल्प\",\n arrowKeys: \"एरो कुंजी\",\n wasdKeys: \"WASD कुंजी\",\n ijklKeys: \"IJKL कुंजी\",\n keyboardPanSpeed: \"कीबोर्ड पैन गति\",\n note: \"नोट: समर्पित पैन उपकरण के अलावा पैन विकल्प काम करते हैं\"\n },\n connector: {\n title: \"कनेक्टर सेटिंग्स\",\n connectionMode: \"कनेक्शन निर्माण मोड\",\n clickMode: \"क्लिक मोड (अनुशंसित)\",\n clickModeDesc: \"पहले नोड पर क्लिक करें, फिर कनेक्शन बनाने के लिए दूसरे नोड पर क्लिक करें\",\n dragMode: \"ड्रैग मोड\",\n dragModeDesc: \"पहले नोड से दूसरे नोड तक क्लिक करें और ड्रैग करें\",\n note: \"नोट: आप किसी भी समय इस सेटिंग को बदल सकते हैं। जब कनेक्टर उपकरण सक्रिय होता है तो चयनित मोड का उपयोग किया जाएगा।\"\n },\n iconPacks: {\n title: \"आइकन पैक प्रबंधन\",\n lazyLoading: \"लेज़ी लोडिंग सक्षम करें\",\n lazyLoadingDesc: \"तेज़ स्टार्टअप के लिए आवश्यकता पर आइकन पैक लोड करें\",\n availablePacks: \"उपलब्ध आइकन पैक\",\n coreIsoflow: \"Core Isoflow (हमेशा लोड)\",\n alwaysEnabled: \"हमेशा सक्षम\",\n awsPack: \"AWS आइकन\",\n gcpPack: \"Google Cloud आइकन\",\n azurePack: \"Azure आइकन\",\n kubernetesPack: \"Kubernetes आइकन\",\n loading: \"लोड हो रहा है...\",\n loaded: \"लोड किया गया\",\n notLoaded: \"लोड नहीं किया गया\",\n iconCount: \"{count} आइकन\",\n lazyLoadingDisabledNote: \"लेज़ी लोडिंग अक्षम है। सभी आइकन पैक स्टार्टअप पर लोड किए जाते हैं।\",\n note: \"आइकन पैक आपकी आवश्यकताओं के आधार पर सक्षम या अक्षम किए जा सकते हैं। अक्षम पैक मेमोरी उपयोग को कम करेंगे और प्रदर्शन में सुधार करेंगे।\"\n }\n },\n lazyLoadingWelcome: {\n title: \"नई सुविधा: लेज़ी लोडिंग!\",\n message: \"अरे! लोकप्रिय मांग के बाद, हमने आइकन की लेज़ी लोडिंग लागू की है, इसलिए अब यदि आप गैर-मानक आइकन पैक सक्षम करना चाहते हैं तो आप उन्हें 'कॉन्फ़िगरेशन' अनुभाग में सक्षम कर सकते हैं।\",\n configPath: \"हैमबर्गर आइकन पर क्लिक करें\",\n configPath2: \"कॉन्फ़िगरेशन तक पहुंचने के लिए ऊपरी बाएं में।\",\n canDisable: \"यदि आप चाहें तो आप इस व्यवहार को अक्षम कर सकते हैं।\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/i18n/id-ID.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"Ini adalah contoh teks\"\n },\n mainMenu: {\n undo: \"Batalkan\",\n redo: \"Ulangi\", \n open: \"Buka\",\n exportJson: \"Ekspor sebagai JSON\",\n exportCompactJson: \"Ekspor sebagai JSON Ringkas\",\n exportImage: \"Ekspor sebagai gambar\",\n clearCanvas: \"Bersihkan kanvas\",\n settings: \"Pengaturan\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"Pintasan Keyboard & Bantuan\",\n close: \"Tutup\",\n keyboardShortcuts: \"Pintasan Keyboard\",\n mouseInteractions: \"Interaksi Mouse\",\n action: \"Aksi\",\n shortcut: \"Pintasan\",\n method: \"Metode\",\n description: \"Deskripsi\",\n note: \"Catatan:\",\n noteContent: \"Pintasan keyboard dinonaktifkan saat mengetik di bidang input, area teks, atau elemen yang dapat diedit untuk mencegah konflik.\",\n // Keyboard shortcuts\n undoAction: \"Batalkan\",\n undoDescription: \"Batalkan aksi terakhir\",\n redoAction: \"Ulangi\",\n redoDescription: \"Ulangi aksi terakhir yang dibatalkan\",\n redoAltAction: \"Ulangi (Alternatif)\",\n redoAltDescription: \"Pintasan alternatif untuk mengulangi\",\n helpAction: \"Bantuan\",\n helpDescription: \"Buka dialog bantuan dengan pintasan keyboard\",\n zoomInAction: \"Perbesar\",\n zoomInShortcut: \"Roda Mouse Naik\",\n zoomInDescription: \"Perbesar kanvas\",\n zoomOutAction: \"Perkecil\",\n zoomOutShortcut: \"Roda Mouse Turun\",\n zoomOutDescription: \"Perkecil kanvas\",\n panCanvasAction: \"Geser Kanvas\",\n panCanvasShortcut: \"Klik Kiri + Seret\",\n panCanvasDescription: \"Geser kanvas saat dalam mode Geser\",\n contextMenuAction: \"Menu Konteks\",\n contextMenuShortcut: \"Klik Kanan\",\n contextMenuDescription: \"Buka menu konteks untuk item atau ruang kosong\",\n // Mouse interactions\n selectToolAction: \"Alat Pilih\",\n selectToolShortcut: \"Klik tombol Pilih\",\n selectToolDescription: \"Beralih ke mode pemilihan\",\n panToolAction: \"Alat Geser\",\n panToolShortcut: \"Klik tombol Geser\",\n panToolDescription: \"Beralih ke mode geser untuk memindahkan kanvas\",\n addItemAction: \"Tambah Item\",\n addItemShortcut: \"Klik tombol Tambah item\",\n addItemDescription: \"Buka pemilih ikon untuk menambahkan item baru\",\n drawRectangleAction: \"Gambar Persegi Panjang\",\n drawRectangleShortcut: \"Klik tombol Persegi Panjang\",\n drawRectangleDescription: \"Beralih ke mode menggambar persegi panjang\",\n createConnectorAction: \"Buat Konektor\",\n createConnectorShortcut: \"Klik tombol Konektor\",\n createConnectorDescription: \"Beralih ke mode konektor\",\n addTextAction: \"Tambah Teks\",\n addTextShortcut: \"Klik tombol Teks\",\n addTextDescription: \"Buat kotak teks baru\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"Tip: Membuat Konektor\",\n tipConnectorTools: \"Tip: Alat Konektor\",\n clickInstructionStart: \"Klik\",\n clickInstructionMiddle: \"pada node atau titik pertama, lalu\",\n clickInstructionEnd: \"pada node atau titik kedua untuk membuat koneksi.\",\n nowClickTarget: \"Sekarang klik pada target untuk menyelesaikan koneksi.\",\n dragStart: \"Seret\",\n dragEnd: \"dari node pertama ke node kedua untuk membuat koneksi.\",\n rerouteStart: \"Untuk mengubah rute konektor,\",\n rerouteMiddle: \"klik kiri\",\n rerouteEnd: \"pada titik mana pun di sepanjang garis konektor dan seret untuk membuat atau memindahkan titik jangkar.\"\n },\n lassoHintTooltip: {\n tipLasso: \"Tip: Seleksi Lasso\",\n tipFreehandLasso: \"Tip: Seleksi Lasso Bebas\",\n lassoDragStart: \"Klik dan seret\",\n lassoDragEnd: \"untuk menggambar kotak seleksi persegi panjang di sekitar item yang ingin Anda pilih.\",\n freehandDragStart: \"Klik dan seret\",\n freehandDragMiddle: \"untuk menggambar\",\n freehandDragEnd: \"bentuk bebas\",\n freehandComplete: \"di sekitar item. Lepas untuk memilih semua item di dalam bentuk.\",\n moveStart: \"Setelah dipilih,\",\n moveMiddle: \"klik di dalam seleksi\",\n moveEnd: \"dan seret untuk memindahkan semua item yang dipilih bersama.\"\n },\n importHintTooltip: {\n title: \"Impor Diagram\",\n instructionStart: \"Untuk mengimpor diagram, klik\",\n menuButton: \"tombol menu\",\n instructionMiddle: \"(☰) di pojok kiri atas, lalu pilih\",\n openButton: \"\\\"Buka\\\"\",\n instructionEnd: \"untuk memuat file diagram Anda.\"\n },\n connectorRerouteTooltip: {\n title: \"Tip: Ubah Rute Konektor\",\n instructionStart: \"Setelah konektor Anda ditempatkan, Anda dapat mengubah rutenya sesuai keinginan.\",\n instructionSelect: \"Pilih konektor\",\n instructionMiddle: \"terlebih dahulu, lalu\",\n instructionClick: \"klik pada jalur konektor\",\n instructionAnd: \"dan\",\n instructionDrag: \"seret\",\n instructionEnd: \"untuk mengubahnya!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"Untuk menghubungkan konektor ini ke node,\",\n instruction: \"klik kiri pada ujung konektor dan seret ke node yang diinginkan.\"\n },\n settings: {\n zoom: {\n description: \"Konfigurasi perilaku zoom saat menggunakan roda mouse.\",\n zoomToCursor: \"Zoom ke Kursor\",\n zoomToCursorDesc: \"Saat diaktifkan, zoom masuk/keluar terpusat pada posisi kursor mouse. Saat dinonaktifkan, zoom terpusat pada kanvas.\"\n },\n hotkeys: {\n title: \"Pengaturan Pintasan\",\n profile: \"Profil Pintasan\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"Tidak Ada Pintasan\",\n tool: \"Alat\",\n hotkey: \"Pintasan\",\n toolSelect: \"Pilih\",\n toolPan: \"Geser\",\n toolAddItem: \"Tambah Item\",\n toolRectangle: \"Persegi Panjang\",\n toolConnector: \"Konektor\",\n toolText: \"Teks\",\n note: \"Catatan: Pintasan berfungsi saat tidak mengetik di bidang teks\"\n },\n pan: {\n title: \"Pengaturan Geser\",\n mousePanOptions: \"Opsi Geser Mouse\",\n emptyAreaClickPan: \"Klik dan seret pada area kosong\",\n middleClickPan: \"Klik tengah dan seret\",\n rightClickPan: \"Klik kanan dan seret\",\n ctrlClickPan: \"Ctrl + klik dan seret\",\n altClickPan: \"Alt + klik dan seret\",\n keyboardPanOptions: \"Opsi Geser Keyboard\",\n arrowKeys: \"Tombol panah\",\n wasdKeys: \"Tombol WASD\",\n ijklKeys: \"Tombol IJKL\",\n keyboardPanSpeed: \"Kecepatan Geser Keyboard\",\n note: \"Catatan: Opsi geser berfungsi selain alat Geser khusus\"\n },\n connector: {\n title: \"Pengaturan Konektor\",\n connectionMode: \"Mode Pembuatan Koneksi\",\n clickMode: \"Mode Klik (Direkomendasikan)\",\n clickModeDesc: \"Klik node pertama, lalu klik node kedua untuk membuat koneksi\",\n dragMode: \"Mode Seret\",\n dragModeDesc: \"Klik dan seret dari node pertama ke node kedua\",\n note: \"Catatan: Anda dapat mengubah pengaturan ini kapan saja. Mode yang dipilih akan digunakan saat alat Konektor aktif.\"\n },\n iconPacks: {\n title: \"Manajemen Paket Ikon\",\n lazyLoading: \"Aktifkan Lazy Loading\",\n lazyLoadingDesc: \"Muat paket ikon sesuai permintaan untuk startup yang lebih cepat\",\n availablePacks: \"Paket Ikon Tersedia\",\n coreIsoflow: \"Core Isoflow (Selalu Dimuat)\",\n alwaysEnabled: \"Selalu diaktifkan\",\n awsPack: \"Ikon AWS\",\n gcpPack: \"Ikon Google Cloud\",\n azurePack: \"Ikon Azure\",\n kubernetesPack: \"Ikon Kubernetes\",\n loading: \"Memuat...\",\n loaded: \"Dimuat\",\n notLoaded: \"Tidak dimuat\",\n iconCount: \"{count} ikon\",\n lazyLoadingDisabledNote: \"Lazy loading dinonaktifkan. Semua paket ikon dimuat saat startup.\",\n note: \"Paket ikon dapat diaktifkan atau dinonaktifkan sesuai kebutuhan Anda. Paket yang dinonaktifkan akan mengurangi penggunaan memori dan meningkatkan performa.\"\n }\n },\n lazyLoadingWelcome: {\n title: \"Fitur Baru: Lazy Loading!\",\n message: \"Hai! Setelah banyak permintaan, kami telah mengimplementasikan Lazy Loading ikon, jadi sekarang jika Anda ingin mengaktifkan paket ikon non-standar, Anda dapat mengaktifkannya di bagian 'Konfigurasi'.\",\n configPath: \"Klik pada ikon Hamburger\",\n configPath2: \"di kiri atas untuk mengakses Konfigurasi.\",\n canDisable: \"Anda dapat menonaktifkan perilaku ini jika diinginkan.\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n\n" }, { "path": "packages/fossflow-lib/src/i18n/index.ts", "content": "import enUS from './en-US';\nimport zhCN from './zh-CN';\nimport esES from './es-ES';\nimport ptBR from './pt-BR';\nimport frFR from './fr-FR';\nimport hiIN from './hi-IN';\nimport bnBD from './bn-BD';\nimport ruRU from './ru-RU';\nimport plPL from './pl-PL';\nimport idID from './id-ID';\nimport itIT from './it-IT';\nimport trTR from './tr-TR';\n\nconst locales = {\n 'en-US': enUS,\n 'zh-CN': zhCN,\n 'es-ES': esES,\n 'pt-BR': ptBR,\n 'fr-FR': frFR,\n 'hi-IN': hiIN,\n 'bn-BD': bnBD,\n 'ru-RU': ruRU,\n 'pl-PL': plPL,\n 'id-ID': idID,\n 'it-IT': itIT,\n 'tr-TR': trTR\n};\n\nexport default locales;\n" }, { "path": "packages/fossflow-lib/src/i18n/it-IT.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"Questo è un testo di esempio\"\n },\n mainMenu: {\n undo: \"Annulla\",\n redo: \"Ripeti\", \n open: \"Apri\",\n exportJson: \"Esporta come JSON\",\n exportCompactJson: \"Esporta come JSON compatto\",\n exportImage: \"Esporta come immagine\",\n clearCanvas: \"Pulisci la tela\",\n settings: \"Impostazioni\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"Scorciatoie da tastiera e aiuto\",\n close: \"Chiudi\",\n keyboardShortcuts: \"Scorciatoie da tastiera\",\n mouseInteractions: \"Interazioni del mouse\",\n action: \"Azione\",\n shortcut: \"Scorciatoia\",\n method: \"Metodo\",\n description: \"Descrizione\",\n note: \"Nota:\",\n noteContent: \"Le scorciatoie da tastiera sono disattivate durante la digitazione in campi di testo o elementi modificabili per evitare conflitti.\",\n // Keyboard shortcuts\n undoAction: \"Annulla\",\n undoDescription: \"Annulla l'ultima azione\",\n redoAction: \"Ripeti\",\n redoDescription: \"Ripeti l'ultima azione annullata\",\n redoAltAction: \"Ripeti (Alternativa)\",\n redoAltDescription: \"Scorciatoia alternativa per ripetere\",\n helpAction: \"Aiuto\",\n helpDescription: \"Apri la finestra di aiuto con le scorciatoie da tastiera\",\n zoomInAction: \"Ingrandisci\",\n zoomInShortcut: \"Rotella del mouse su\",\n zoomInDescription: \"Ingrandisci la tela\",\n zoomOutAction: \"Rimpicciolisci\",\n zoomOutShortcut: \"Rotella del mouse giù\",\n zoomOutDescription: \"Rimpicciolisci la tela\",\n panCanvasAction: \"Sposta la tela\",\n panCanvasShortcut: \"Clic sinistro + trascina\",\n panCanvasDescription: \"Muovi la tela in modalità panoramica\",\n contextMenuAction: \"Menu contestuale\",\n contextMenuShortcut: \"Tasto destro\",\n contextMenuDescription: \"Apri il menu contestuale per elementi o spazio vuoto\",\n // Mouse interactions\n selectToolAction: \"Strumento Selezione\",\n selectToolShortcut: \"Clicca il pulsante Selezione\",\n selectToolDescription: \"Passa alla modalità selezione\",\n panToolAction: \"Strumento Panoramica\",\n panToolShortcut: \"Clicca il pulsante Panoramica\",\n panToolDescription: \"Passa alla modalità panoramica per spostare la tela\",\n addItemAction: \"Aggiungi elemento\",\n addItemShortcut: \"Clicca il pulsante Aggiungi elemento\",\n addItemDescription: \"Apri il selettore di icone per aggiungere nuovi elementi\",\n drawRectangleAction: \"Disegna rettangolo\",\n drawRectangleShortcut: \"Clicca il pulsante Rettangolo\",\n drawRectangleDescription: \"Passa alla modalità disegno rettangolo\",\n createConnectorAction: \"Crea connettore\",\n createConnectorShortcut: \"Clicca il pulsante Connettore\",\n createConnectorDescription: \"Passa alla modalità connettore\",\n addTextAction: \"Aggiungi testo\",\n addTextShortcut: \"Clicca il pulsante Testo\",\n addTextDescription: \"Crea una nuova casella di testo\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"Suggerimento: Creazione connettori\",\n tipConnectorTools: \"Suggerimento: Strumenti connettore\",\n clickInstructionStart: \"Clicca\",\n clickInstructionMiddle: \"sul primo nodo o punto, poi\",\n clickInstructionEnd: \"sul secondo nodo o punto per creare una connessione.\",\n nowClickTarget: \"Ora clicca sull'obiettivo per completare la connessione.\",\n dragStart: \"Trascina\",\n dragEnd: \"dal primo nodo al secondo nodo per creare una connessione.\",\n rerouteStart: \"Per riorientare un connettore,\",\n rerouteMiddle: \"clicca con il tasto sinistro\",\n rerouteEnd: \"su un punto qualsiasi lungo la linea del connettore e trascina per creare o spostare i punti di ancoraggio.\"\n },\n lassoHintTooltip: {\n tipLasso: \"Suggerimento: Selezione Lasso\",\n tipFreehandLasso: \"Suggerimento: Selezione Lasso a mano libera\",\n lassoDragStart: \"Clicca e trascina\",\n lassoDragEnd: \"per disegnare un riquadro di selezione rettangolare attorno agli elementi da selezionare.\",\n freehandDragStart: \"Clicca e trascina\",\n freehandDragMiddle: \"per disegnare una\",\n freehandDragEnd: \"forma libera\",\n freehandComplete: \"attorno agli elementi. Rilascia per selezionare tutti gli elementi all'interno della forma.\",\n moveStart: \"Una volta selezionati,\",\n moveMiddle: \"clicca all'interno della selezione\",\n moveEnd: \"e trascina per muovere tutti gli elementi selezionati insieme.\"\n },\n importHintTooltip: {\n title: \"Importa diagrammi\",\n instructionStart: \"Per importare diagrammi, clicca sul\",\n menuButton: \"pulsante del menu\",\n instructionMiddle: \"(☰) in alto a sinistra, poi seleziona\",\n openButton: \"\\\"Apri\\\"\",\n instructionEnd: \"per caricare i tuoi file di diagramma.\"\n },\n connectorRerouteTooltip: {\n title: \"Suggerimento: Riorienta connettori\",\n instructionStart: \"Una volta posizionati i connettori, puoi riorientarli come preferisci.\",\n instructionSelect: \"Seleziona prima il connettore,\",\n instructionMiddle: \"poi\",\n instructionClick: \"clicca sul percorso del connettore\",\n instructionAnd: \"e\",\n instructionDrag: \"trascina\",\n instructionEnd: \"per modificarlo!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"Per collegare questo connettore a un nodo,\",\n instruction: \"clicca con il tasto sinistro sulla fine del connettore e trascinalo sul nodo desiderato.\"\n },\n settings: {\n zoom: {\n description: \"Configura il comportamento dello zoom quando si usa la rotella del mouse.\",\n zoomToCursor: \"Zoom sul cursore\",\n zoomToCursorDesc: \"Se abilitato, ingrandisci o riduci centrando sul cursore del mouse. Se disabilitato, lo zoom è centrato sulla tela.\"\n },\n hotkeys: {\n title: \"Impostazioni scorciatoie\",\n profile: \"Profilo scorciatoie\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"Nessuna scorciatoia\",\n tool: \"Strumento\",\n hotkey: \"Scorciatoia\",\n toolSelect: \"Seleziona\",\n toolPan: \"Panoramica\",\n toolAddItem: \"Aggiungi elemento\",\n toolRectangle: \"Rettangolo\",\n toolConnector: \"Connettore\",\n toolText: \"Testo\",\n note: \"Nota: Le scorciatoie funzionano quando non stai digitando nei campi di testo\"\n },\n pan: {\n title: \"Impostazioni Panoramica\",\n mousePanOptions: \"Opzioni panoramica con mouse\",\n emptyAreaClickPan: \"Clicca e trascina su un'area vuota\",\n middleClickPan: \"Clic centrale e trascina\",\n rightClickPan: \"Clic destro e trascina\",\n ctrlClickPan: \"Ctrl + clic e trascina\",\n altClickPan: \"Alt + clic e trascina\",\n keyboardPanOptions: \"Opzioni panoramica con tastiera\",\n arrowKeys: \"Tasti freccia\",\n wasdKeys: \"Tasti WASD\",\n ijklKeys: \"Tasti IJKL\",\n keyboardPanSpeed: \"Velocità panoramica tastiera\",\n note: \"Nota: Le opzioni di panoramica funzionano insieme allo strumento Panoramica dedicato\"\n },\n connector: {\n title: \"Impostazioni Connettore\",\n connectionMode: \"Modalità creazione connessione\",\n clickMode: \"Modalità clic (consigliata)\",\n clickModeDesc: \"Clicca sul primo nodo, poi sul secondo per creare una connessione\",\n dragMode: \"Modalità trascinamento\",\n dragModeDesc: \"Clicca e trascina dal primo nodo al secondo per creare una connessione\",\n note: \"Nota: Puoi modificare questa impostazione in qualsiasi momento. La modalità selezionata verrà usata quando lo strumento Connettore è attivo.\"\n },\n iconPacks: {\n title: \"Gestione pacchetti di icone\",\n lazyLoading: \"Abilita caricamento ritardato (Lazy Loading)\",\n lazyLoadingDesc: \"Carica i pacchetti di icone su richiesta per un avvio più rapido\",\n availablePacks: \"Pacchetti di icone disponibili\",\n coreIsoflow: \"Isoflow di base (sempre caricato)\",\n alwaysEnabled: \"Sempre abilitato\",\n awsPack: \"Icone AWS\",\n gcpPack: \"Icone Google Cloud\",\n azurePack: \"Icone Azure\",\n kubernetesPack: \"Icone Kubernetes\",\n loading: \"Caricamento...\",\n loaded: \"Caricato\",\n notLoaded: \"Non caricato\",\n iconCount: \"{count} icone\",\n lazyLoadingDisabledNote: \"Il caricamento ritardato è disabilitato. Tutti i pacchetti di icone vengono caricati all'avvio.\",\n note: \"I pacchetti di icone possono essere abilitati o disabilitati in base alle tue esigenze. I pacchetti disabilitati riducono l'uso di memoria e migliorano le prestazioni.\"\n }\n },\n lazyLoadingWelcome: {\n title: \"Nuova funzione: Lazy Loading!\",\n message: \"Ciao! Su grande richiesta, abbiamo implementato il caricamento ritardato (Lazy Loading) delle icone. Ora, se desideri abilitare pacchetti di icone non standard, puoi farlo nella sezione 'Configurazione'.\",\n configPath: \"Clicca sull'icona dell'hamburger\",\n configPath2: \"in alto a sinistra per accedere alla Configurazione.\",\n canDisable: \"Puoi disattivare questo comportamento se lo desideri.\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/i18n/pl-PL.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"To jest przykładowy tekst\"\n },\n mainMenu: {\n undo: \"Cofnij\",\n redo: \"Ponów\", \n open: \"Otwórz\",\n exportJson: \"Eksportuj do JSON\",\n exportCompactJson: \"Eksportuj jako kompaktowy JSON\",\n exportImage: \"Eksportuj do obrazu\",\n clearCanvas: \"Wyczyść obszar roboczy\",\n settings: \"Ustawienia\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"Skróty klawiaturowe i Pomoc\",\n close: \"Zamknij\",\n keyboardShortcuts: \"Skróty klawiaturowe\",\n mouseInteractions: \"Interakcje myszy\",\n action: \"Operacja\",\n shortcut: \"Skrót\",\n method: \"Metoda\",\n description: \"Opis\",\n note: \"Uwagi:\",\n noteContent: \"Skróty klawiaturowe są wyłączone podczas wpisywania danych w polach wprowadzania danych, obszarach tekstowych lub elementach z edytowalną treścią, aby zapobiec konfliktom.\",\n // Keyboard shortcuts\n undoAction: \"Cofnij\",\n undoDescription: \"Cofnij do ostatniej operacji\",\n redoAction: \"Powtórz\",\n redoDescription: \"Ponów ostatnia operację\",\n redoAltAction: \"Powtórz (alternatywa)\",\n redoAltDescription: \"Alternatywny skrót do ponownego wykonania\",\n helpAction: \"Pomoc\",\n helpDescription: \"Otwórz okno dialogowe pomocy za pomocą skrótów klawiaturowych\",\n zoomInAction: \"Powiększ\",\n zoomInShortcut: \"Kółko myszy w górę\",\n zoomInDescription: \"Powiększ obszar roboczy\",\n zoomOutAction: \"Pomniejsz\",\n zoomOutShortcut: \"Kółko muszy w dół\",\n zoomOutDescription: \"Pomniejsz obszar roboczy\",\n panCanvasAction: \"Przesuwanie obszaru roboczego\",\n panCanvasShortcut: \"Kliknij lewym przyciskiem myszy + przeciągnij\",\n panCanvasDescription: \"Przesuwaj obszar roboczy w trybie przesuwania\",\n contextMenuAction: \"Menu kontekstowe\",\n contextMenuShortcut: \"Prawy przycisk myszy\",\n contextMenuDescription: \"Otwórz menu kontekstowe dla elementów lub pustej przestrzeni\",\n // Mouse interactions\n selectToolAction: \"Wybierz narzędzie\",\n selectToolShortcut: \"Kliknij przycisk Wybierz\",\n selectToolDescription: \"Przejdź do trybu wyboru\",\n panToolAction: \"Narzędzie przesuwania\",\n panToolShortcut: \"Kliknij przycisk „Przesuwania”\",\n panToolDescription: \"Przejdź do trybu przesuwania, aby przesuwać obszar roboczy\",\n addItemAction: \"Dodaj element\",\n addItemShortcut: \"Kliknij przycisk Dodaj element\",\n addItemDescription: \"Otwórz narzędzie do wyboru opcji, aby dodać nowe elementy.\",\n drawRectangleAction: \"Narysuj prostokąt\",\n drawRectangleShortcut: \"Kliknij przycisk Prostokąt\",\n drawRectangleDescription: \"Przejdź do trybu rysowania prostokątów\",\n createConnectorAction: \"Stwórz połączenie\",\n createConnectorShortcut: \"Kliknij przycisk Połączenie\",\n createConnectorDescription: \"Przełącz do trybu połączenia\",\n addTextAction: \"Dodaj Tekst\",\n addTextShortcut: \"Kliknij przycisk Tekst\",\n addTextDescription: \"Utwórz nowe pole tekstowe\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"Wskazówka: Tworzenie połączeń\",\n tipConnectorTools: \"Wskazówka: Narzędzia do połączeń\",\n clickInstructionStart: \"Kliknij\",\n clickInstructionMiddle: \"w pierwszym węźle lub punkcie, a następnie\",\n clickInstructionEnd: \"na drugim węźle lub punkcie, aby utworzyć połączenie.\",\n nowClickTarget: \"Teraz kliknij na cel, aby zakończyć połączenie.\",\n dragStart: \"Przeciagnij\",\n dragEnd: \"od pierwszego węzła do drugiego węzła, aby utworzyć połączenie.\",\n rerouteStart: \"Aby zmienić trasę połączenia,\",\n rerouteMiddle: \"prawy przycisk myszy\",\n rerouteEnd: \"w dowolnym miejscu wzdłuż linii łącznika i przeciągnij, aby utworzyć lub przenieść punkty kotwiczenia.\"\n },\n lassoHintTooltip: {\n tipLasso: \"Wskazówka: Zaznaczanie za pomocą narzędzia Lasso\",\n tipFreehandLasso: \"Wskazówka: Zaznaczanie narzędziem Lasso z wolnej ręki\",\n lassoDragStart: \"Kliknij i przeciągnij\",\n lassoDragEnd: \"aby narysować prostokątne pole wyboru wokół elementów, które chcesz zaznaczyć.\",\n freehandDragStart: \"Kliknij i przeciągnij\",\n freehandDragMiddle: \"aby rysować\",\n freehandDragEnd: \"dowolny kształt\",\n freehandComplete: \"wokół elementów. Zwolnij, aby zaznaczyć wszystkie elementy wewnątrz kształtu.\",\n moveStart: \"Po wybraniu\",\n moveMiddle: \"kliknij wewnątrz zaznaczenia,\",\n moveEnd: \"i przeciągnij, aby przenieść wszystkie zaznaczone elementy razem.\"\n },\n importHintTooltip: {\n title: \"Importuj Diagramy\",\n instructionStart: \"Aby zaimportować diagramy, kliknij przycisk\",\n menuButton: \"Przycisk menu\",\n instructionMiddle: \"(☰) w lewym górnym rogu, a następnie wybierz\",\n openButton: \"\\\"Otwórz\\\"\",\n instructionEnd: \"aby załadować pliki diagramów.\"\n },\n connectorRerouteTooltip: {\n title: \"Wskazówka: Zmiana trasy połączenia\",\n instructionStart: \"Po umieszczeniu połączenia można je dowolnie przekierowywać..\",\n instructionSelect: \"Wybierz połączenie\",\n instructionMiddle: \"następnie\",\n instructionClick: \"kliknij na ścieżkę połączenia\",\n instructionAnd: \"i\",\n instructionDrag: \"przesuń\",\n instructionEnd: \"aby zmienić!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"Aby połączyć to połączenie z węzłem,\",\n instruction: \"kliknij lewym przyciskiem myszy koniec połączenia i przeciągnij go do żądanego węzła.\"\n },\n settings: {\n zoom: {\n description: \"Skonfiguruj zachowanie powiększania podczas korzystania z kółka myszy.\",\n zoomToCursor: \"Powiększ do kursora\",\n zoomToCursorDesc: \"Po włączeniu funkcji powiększanie/pomniejszanie odbywa się w oparciu o położenie kursora myszy. Po wyłączeniu funkcji Powiększ do kursora odbywa się w oparciu o położenie obszaru roboczego.\"\n },\n hotkeys: {\n title: \"Ustawienia skrótów klawiszowych\",\n profile: \"Profil skrótów klawiszowych\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"bez skrótów\",\n tool: \"Narzędzie\",\n hotkey: \"Skrót\",\n toolSelect: \"Wybór\",\n toolPan: \"Przesuwanie\",\n toolAddItem: \"Dodaj element\",\n toolRectangle: \"Prostokąt\",\n toolConnector: \"Połączenia\",\n toolText: \"Tekst\",\n note: \"Uwaga: Skróty klawiszowe działają, gdy nie wpisujesz tekstu w polach tekstowych.\"\n },\n pan: {\n title: \"Ustawienia przesuwania\",\n mousePanOptions: \"Opcje przesuwania myszą\",\n emptyAreaClickPan: \"Kliknij i przesuń obszar\",\n middleClickPan: \"Kliknij środkowym przyciskiem myszy i przeciągnij\",\n rightClickPan: \"Kliknij prawym przyciskiem myszy i przeciągnij\",\n ctrlClickPan: \"Ctrl + kliknij i przeciągnij\",\n altClickPan: \"Alt + kliknij i przeciągnij\",\n keyboardPanOptions: \"Opcje przesuwania klawiaturą\",\n arrowKeys: \"Klawisze strzałek\",\n wasdKeys: \"Klawisze WASD\",\n ijklKeys: \"Klawisze IJKL\",\n keyboardPanSpeed: \"Szybkość przesuwu klawiatury\",\n note: \"Uwaga: Opcje przesuwania działają dodatkowo w stosunku do dedykowanego narzędzia przesuwania.\"\n },\n connector: {\n title: \"Ustawienia połączeń\",\n connectionMode: \"Tryb tworzenia połączenia\",\n clickMode: \"Tryb kliknięcia (zalecany)\",\n clickModeDesc: \"Kliknij pierwszy węzeł, a następnie kliknij drugi węzeł, aby utworzyć połączenie.\",\n dragMode: \"Tryb przeciągania\",\n dragModeDesc: \"Kliknij i przeciągnij od pierwszego węzła do drugiego węzła.\",\n note: \"Uwaga: To ustawienie można zmienić w dowolnym momencie. Wybrany tryb będzie używany, gdy narzędzie Połączeń jest aktywne..\"\n },\n iconPacks: {\n title: \"Zarządzanie pakietami ikon\",\n lazyLoading: \"Włącz opóźnione ładowanie\",\n lazyLoadingDesc: \"Wczytuj pakiety ikon na żądanie, aby przyspieszyć uruchamianie\",\n availablePacks: \"Dostępne pakiety ikon\",\n coreIsoflow: \"Core Isoflow (Zawsze wczytane)\",\n alwaysEnabled: \"Zawsze włączone\",\n awsPack: \"AWS Icons\",\n gcpPack: \"Google Cloud Icons\",\n azurePack: \"Azure Icons\",\n kubernetesPack: \"Kubernetes Icons\",\n loading: \"Wczytywanie...\",\n loaded: \"Wczytane\",\n notLoaded: \"Niewczytane\",\n iconCount: \"{count} icon\",\n lazyLoadingDisabledNote: \"Opóźnione ładowanie jest wyłączone. Wszystkie pakiety ikon są ładowane podczas uruchamiania.\",\n note: \"Pakiety ikon można włączać lub wyłączać w zależności od potrzeb. Wyłączone pakiety zmniejszają zużycie pamięci i poprawiają wydajność.\"\n }\n },\n lazyLoadingWelcome: {\n title: \"Nowa funkcja: Opóźnione ładowanie!\",\n message: \"Hej! W odpowiedzi na liczne prośby wprowadziliśmy funkcję opóźnionego ładowania ikon, więc teraz, jeśli chcesz włączyć niestandardowe pakiety ikon, możesz to zrobić w sekcji „Ustawienia”.\",\n configPath: \"Kliknij ikonę manu.\",\n configPath2: \"w lewym górnym rogu, aby uzyskać dostęp do ustawień.\",\n canDisable: \"Jeśli chcesz, możesz wyłączyć tę funkcję..\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/i18n/pt-BR.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"Este é um texto de exemplo\"\n },\n mainMenu: {\n undo: \"Desfazer\",\n redo: \"Refazer\",\n open: \"Abrir\",\n exportJson: \"Exportar como JSON\",\n exportCompactJson: \"Exportar como JSON compacto\",\n exportImage: \"Exportar como imagem\",\n clearCanvas: \"Limpar a tela\",\n settings: \"Configurações\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"Atalhos de teclado e ajuda\",\n close: \"Fechar\",\n keyboardShortcuts: \"Atalhos de teclado\",\n mouseInteractions: \"Interações do mouse\",\n action: \"Ação\",\n shortcut: \"Atalho\",\n method: \"Método\",\n description: \"Descrição\",\n note: \"Nota:\",\n noteContent: \"Os atalhos de teclado são desabilitados ao digitar em campos de entrada, áreas de texto ou elementos editáveis para evitar conflitos.\",\n // Keyboard shortcuts\n undoAction: \"Desfazer\",\n undoDescription: \"Desfazer a última ação\",\n redoAction: \"Refazer\",\n redoDescription: \"Refazer a última ação desfeita\",\n redoAltAction: \"Refazer (Alternativo)\",\n redoAltDescription: \"Atalho alternativo para refazer\",\n helpAction: \"Ajuda\",\n helpDescription: \"Abrir diálogo de ajuda com atalhos de teclado\",\n zoomInAction: \"Aumentar zoom\",\n zoomInShortcut: \"Roda do mouse para cima\",\n zoomInDescription: \"Aumentar o zoom na tela\",\n zoomOutAction: \"Diminuir zoom\",\n zoomOutShortcut: \"Roda do mouse para baixo\",\n zoomOutDescription: \"Diminuir o zoom da tela\",\n panCanvasAction: \"Mover tela\",\n panCanvasShortcut: \"Clique esquerdo + Arrastar\",\n panCanvasDescription: \"Mover a tela no modo de movimentação\",\n contextMenuAction: \"Menu de contexto\",\n contextMenuShortcut: \"Clique direito\",\n contextMenuDescription: \"Abrir menu de contexto para itens ou espaço vazio\",\n // Mouse interactions\n selectToolAction: \"Ferramenta de seleção\",\n selectToolShortcut: \"Clique no botão Selecionar\",\n selectToolDescription: \"Mudar para o modo de seleção\",\n panToolAction: \"Ferramenta de movimentação\",\n panToolShortcut: \"Clique no botão Mover\",\n panToolDescription: \"Mudar para o modo de movimentação da tela\",\n addItemAction: \"Adicionar item\",\n addItemShortcut: \"Clique no botão Adicionar item\",\n addItemDescription: \"Abrir seletor de ícones para adicionar novos itens\",\n drawRectangleAction: \"Desenhar retângulo\",\n drawRectangleShortcut: \"Clique no botão Retângulo\",\n drawRectangleDescription: \"Mudar para o modo de desenho de retângulos\",\n createConnectorAction: \"Criar conector\",\n createConnectorShortcut: \"Clique no botão Conector\",\n createConnectorDescription: \"Mudar para o modo de conector\",\n addTextAction: \"Adicionar texto\",\n addTextShortcut: \"Clique no botão Texto\",\n addTextDescription: \"Criar uma nova caixa de texto\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"Dica: Criar conectores\",\n tipConnectorTools: \"Dica: Ferramentas de conectores\",\n clickInstructionStart: \"Clique\",\n clickInstructionMiddle: \"no primeiro nó ou ponto, depois\",\n clickInstructionEnd: \"no segundo nó ou ponto para criar uma conexão.\",\n nowClickTarget: \"Agora clique no alvo para completar a conexão.\",\n dragStart: \"Arraste\",\n dragEnd: \"do primeiro nó ao segundo nó para criar uma conexão.\",\n rerouteStart: \"Para redirecionar um conector,\",\n rerouteMiddle: \"clique com o botão esquerdo\",\n rerouteEnd: \"em qualquer ponto ao longo da linha do conector e arraste para criar ou mover pontos de ancoragem.\"\n },\n lassoHintTooltip: {\n tipLasso: \"Dica: Seleção com laço\",\n tipFreehandLasso: \"Dica: Seleção com laço livre\",\n lassoDragStart: \"Clique e arraste\",\n lassoDragEnd: \"para desenhar uma caixa de seleção retangular ao redor dos itens que você deseja selecionar.\",\n freehandDragStart: \"Clique e arraste\",\n freehandDragMiddle: \"para desenhar uma\",\n freehandDragEnd: \"forma livre\",\n freehandComplete: \"ao redor dos itens. Solte para selecionar todos os itens dentro da forma.\",\n moveStart: \"Uma vez selecionados,\",\n moveMiddle: \"clique dentro da seleção\",\n moveEnd: \"e arraste para mover todos os itens selecionados juntos.\"\n },\n importHintTooltip: {\n title: \"Importar diagramas\",\n instructionStart: \"Para importar diagramas, clique no\",\n menuButton: \"botão de menu\",\n instructionMiddle: \"(☰) no canto superior esquerdo, depois selecione\",\n openButton: \"\\\"Abrir\\\"\",\n instructionEnd: \"para carregar seus arquivos de diagrama.\"\n },\n connectorRerouteTooltip: {\n title: \"Dica: Redirecionar conectores\",\n instructionStart: \"Uma vez que seus conectores estejam posicionados, você pode redirecioná-los como desejar.\",\n instructionSelect: \"Selecione o conector\",\n instructionMiddle: \"primeiro, depois\",\n instructionClick: \"clique no caminho do conector\",\n instructionAnd: \"e\",\n instructionDrag: \"arraste\",\n instructionEnd: \"para alterá-lo!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"Para conectar este conector a um nó,\",\n instruction: \"clique com o botão esquerdo na extremidade do conector e arraste-o para o nó desejado.\"\n },\n settings: {\n zoom: {\n description: \"Configurar o comportamento do zoom ao usar a roda do mouse.\",\n zoomToCursor: \"Zoom no cursor\",\n zoomToCursorDesc: \"Quando habilitado, o zoom é centralizado na posição do cursor do mouse. Quando desabilitado, o zoom é centralizado na tela.\"\n },\n hotkeys: {\n title: \"Configurações de atalhos\",\n profile: \"Perfil de atalhos\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"Sem atalhos\",\n tool: \"Ferramenta\",\n hotkey: \"Atalho\",\n toolSelect: \"Selecionar\",\n toolPan: \"Mover\",\n toolAddItem: \"Adicionar item\",\n toolRectangle: \"Retângulo\",\n toolConnector: \"Conector\",\n toolText: \"Texto\",\n note: \"Nota: Os atalhos funcionam quando você não está digitando em campos de texto\"\n },\n pan: {\n title: \"Configurações de movimentação\",\n mousePanOptions: \"Opções de movimentação com mouse\",\n emptyAreaClickPan: \"Clicar e arrastar em área vazia\",\n middleClickPan: \"Clicar com o botão do meio e arrastar\",\n rightClickPan: \"Clicar com o botão direito e arrastar\",\n ctrlClickPan: \"Ctrl + clicar e arrastar\",\n altClickPan: \"Alt + clicar e arrastar\",\n keyboardPanOptions: \"Opções de movimentação com teclado\",\n arrowKeys: \"Teclas de seta\",\n wasdKeys: \"Teclas WASD\",\n ijklKeys: \"Teclas IJKL\",\n keyboardPanSpeed: \"Velocidade de movimentação com teclado\",\n note: \"Nota: As opções de movimentação funcionam além da ferramenta de movimentação dedicada\"\n },\n connector: {\n title: \"Configurações de conectores\",\n connectionMode: \"Modo de criação de conexão\",\n clickMode: \"Modo clique (Recomendado)\",\n clickModeDesc: \"Clique no primeiro nó, depois clique no segundo nó para criar uma conexão\",\n dragMode: \"Modo arrastar\",\n dragModeDesc: \"Clique e arraste do primeiro nó ao segundo nó\",\n note: \"Nota: Você pode alterar esta configuração a qualquer momento. O modo selecionado será usado quando a ferramenta de conector estiver ativa.\"\n },\n iconPacks: {\n title: \"Gerenciamento de Pacotes de Ícones\",\n lazyLoading: \"Ativar Carregamento Sob Demanda\",\n lazyLoadingDesc: \"Carregar pacotes de ícones sob demanda para inicialização mais rápida\",\n availablePacks: \"Pacotes de Ícones Disponíveis\",\n coreIsoflow: \"Core Isoflow (Sempre Carregado)\",\n alwaysEnabled: \"Sempre ativado\",\n awsPack: \"Ícones AWS\",\n gcpPack: \"Ícones Google Cloud\",\n azurePack: \"Ícones Azure\",\n kubernetesPack: \"Ícones Kubernetes\",\n loading: \"Carregando...\",\n loaded: \"Carregado\",\n notLoaded: \"Não carregado\",\n iconCount: \"{count} ícones\",\n lazyLoadingDisabledNote: \"O carregamento sob demanda está desativado. Todos os pacotes de ícones são carregados na inicialização.\",\n note: \"Os pacotes de ícones podem ser ativados ou desativados conforme suas necessidades. Pacotes desativados reduzirão o uso de memória e melhorarão o desempenho.\"\n }\n },\n lazyLoadingWelcome: {\n title: \"Novo Recurso: Carregamento Sob Demanda!\",\n message: \"Ei! Após demanda popular, implementamos o Carregamento Sob Demanda de ícones, então agora se você quiser ativar pacotes de ícones não padrão, você pode ativá-los na seção 'Configuração'.\",\n configPath: \"Clique no ícone do Menu\",\n configPath2: \"no canto superior esquerdo para acessar a Configuração.\",\n canDisable: \"Você pode desativar esse comportamento se desejar.\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/i18n/ru-RU.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"Это пример текста\"\n },\n mainMenu: {\n undo: \"Отменить\",\n redo: \"Повторить\",\n open: \"Открыть\",\n exportJson: \"Экспортировать как JSON\",\n exportCompactJson: \"Экспортировать как компактный JSON\",\n exportImage: \"Экспортировать как изображение\",\n clearCanvas: \"Очистить холст\",\n settings: \"Настройки\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"Горячие клавиши и справка\",\n close: \"Закрыть\",\n keyboardShortcuts: \"Горячие клавиши\",\n mouseInteractions: \"Взаимодействие с мышью\",\n action: \"Действие\",\n shortcut: \"Горячая клавиша\",\n method: \"Метод\",\n description: \"Описание\",\n note: \"Примечание:\",\n noteContent: \"Горячие клавиши отключены при вводе в полях ввода, текстовых областях или редактируемых элементах во избежание конфликтов.\",\n // Keyboard shortcuts\n undoAction: \"Отменить\",\n undoDescription: \"Отменить последнее действие\",\n redoAction: \"Повторить\",\n redoDescription: \"Повторить последнее отмененное действие\",\n redoAltAction: \"Повторить (альтернатива)\",\n redoAltDescription: \"Альтернативная горячая клавиша для повтора\",\n helpAction: \"Справка\",\n helpDescription: \"Открыть диалог справки с горячими клавишами\",\n zoomInAction: \"Увеличить\",\n zoomInShortcut: \"Колесико мыши вверх\",\n zoomInDescription: \"Увеличить масштаб холста\",\n zoomOutAction: \"Уменьшить\",\n zoomOutShortcut: \"Колесико мыши вниз\",\n zoomOutDescription: \"Уменьшить масштаб холста\",\n panCanvasAction: \"Переместить холст\",\n panCanvasShortcut: \"Левая кнопка + перетаскивание\",\n panCanvasDescription: \"Переместить холст в режиме перемещения\",\n contextMenuAction: \"Контекстное меню\",\n contextMenuShortcut: \"Правая кнопка мыши\",\n contextMenuDescription: \"Открыть контекстное меню для элементов или пустого пространства\",\n // Mouse interactions\n selectToolAction: \"Инструмент выделения\",\n selectToolShortcut: \"Нажать кнопку Выделить\",\n selectToolDescription: \"Переключиться в режим выделения\",\n panToolAction: \"Инструмент перемещения\",\n panToolShortcut: \"Нажать кнопку Переместить\",\n panToolDescription: \"Переключиться в режим перемещения холста\",\n addItemAction: \"Добавить элемент\",\n addItemShortcut: \"Нажать кнопку Добавить элемент\",\n addItemDescription: \"Открыть выбор иконок для добавления новых элементов\",\n drawRectangleAction: \"Нарисовать прямоугольник\",\n drawRectangleShortcut: \"Нажать кнопку Прямоугольник\",\n drawRectangleDescription: \"Переключиться в режим рисования прямоугольников\",\n createConnectorAction: \"Создать соединитель\",\n createConnectorShortcut: \"Нажать кнопку Соединитель\",\n createConnectorDescription: \"Переключиться в режим соединителя\",\n addTextAction: \"Добавить текст\",\n addTextShortcut: \"Нажать кнопку Текст\",\n addTextDescription: \"Создать новое текстовое поле\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"Совет: Создание соединителей\",\n tipConnectorTools: \"Совет: Инструменты соединителей\",\n clickInstructionStart: \"Нажмите\",\n clickInstructionMiddle: \"на первый узел или точку, затем\",\n clickInstructionEnd: \"на второй узел или точку, чтобы создать соединение.\",\n nowClickTarget: \"Теперь нажмите на цель, чтобы завершить соединение.\",\n dragStart: \"Перетащите\",\n dragEnd: \"от первого узла ко второму узлу, чтобы создать соединение.\",\n rerouteStart: \"Чтобы изменить маршрут соединителя,\",\n rerouteMiddle: \"нажмите левой кнопкой\",\n rerouteEnd: \"на любую точку вдоль линии соединителя и перетащите, чтобы создать или переместить опорные точки.\"\n },\n lassoHintTooltip: {\n tipLasso: \"Совет: Выделение лассо\",\n tipFreehandLasso: \"Совет: Свободное выделение лассо\",\n lassoDragStart: \"Нажмите и перетащите\",\n lassoDragEnd: \"чтобы нарисовать прямоугольную область выделения вокруг элементов, которые вы хотите выбрать.\",\n freehandDragStart: \"Нажмите и перетащите\",\n freehandDragMiddle: \"чтобы нарисовать\",\n freehandDragEnd: \"произвольную форму\",\n freehandComplete: \"вокруг элементов. Отпустите, чтобы выбрать все элементы внутри формы.\",\n moveStart: \"После выделения\",\n moveMiddle: \"нажмите внутри выделения\",\n moveEnd: \"и перетащите, чтобы переместить все выделенные элементы вместе.\"\n },\n importHintTooltip: {\n title: \"Импорт диаграмм\",\n instructionStart: \"Чтобы импортировать диаграммы, нажмите\",\n menuButton: \"кнопку меню\",\n instructionMiddle: \"(☰) в верхнем левом углу, затем выберите\",\n openButton: \"\\\"Открыть\\\"\",\n instructionEnd: \"чтобы загрузить файлы диаграмм.\"\n },\n connectorRerouteTooltip: {\n title: \"Совет: Изменение маршрута соединителей\",\n instructionStart: \"После размещения соединителей вы можете изменить их маршрут по своему усмотрению.\",\n instructionSelect: \"Выберите соединитель\",\n instructionMiddle: \"сначала, затем\",\n instructionClick: \"нажмите на путь соединителя\",\n instructionAnd: \"и\",\n instructionDrag: \"перетащите\",\n instructionEnd: \"чтобы изменить его!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"Чтобы подключить этот соединитель к узлу,\",\n instruction: \"щелкните левой кнопкой мыши на конце соединителя и перетащите его к нужному узлу.\"\n },\n settings: {\n zoom: {\n description: \"Настройте поведение масштабирования при использовании колесика мыши.\",\n zoomToCursor: \"Масштабировать к курсору\",\n zoomToCursorDesc: \"При включении масштабирование центрируется на позиции курсора мыши. При выключении масштабирование центрируется на холсте.\"\n },\n hotkeys: {\n title: \"Настройки горячих клавиш\",\n profile: \"Профиль горячих клавиш\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"Без горячих клавиш\",\n tool: \"Инструмент\",\n hotkey: \"Горячая клавиша\",\n toolSelect: \"Выделить\",\n toolPan: \"Переместить\",\n toolAddItem: \"Добавить элемент\",\n toolRectangle: \"Прямоугольник\",\n toolConnector: \"Соединитель\",\n toolText: \"Текст\",\n note: \"Примечание: Горячие клавиши работают, когда вы не вводите текст в текстовых полях\"\n },\n pan: {\n title: \"Настройки перемещения\",\n mousePanOptions: \"Параметры перемещения мышью\",\n emptyAreaClickPan: \"Нажать и перетащить на пустой области\",\n middleClickPan: \"Средняя кнопка и перетаскивание\",\n rightClickPan: \"Правая кнопка и перетаскивание\",\n ctrlClickPan: \"Ctrl + нажатие и перетаскивание\",\n altClickPan: \"Alt + нажатие и перетаскивание\",\n keyboardPanOptions: \"Параметры перемещения клавиатурой\",\n arrowKeys: \"Клавиши стрелок\",\n wasdKeys: \"Клавиши WASD\",\n ijklKeys: \"Клавиши IJKL\",\n keyboardPanSpeed: \"Скорость перемещения клавиатурой\",\n note: \"Примечание: Параметры перемещения работают в дополнение к специальному инструменту перемещения\"\n },\n connector: {\n title: \"Настройки соединителя\",\n connectionMode: \"Режим создания соединения\",\n clickMode: \"Режим нажатия (рекомендуется)\",\n clickModeDesc: \"Нажмите на первый узел, затем нажмите на второй узел, чтобы создать соединение\",\n dragMode: \"Режим перетаскивания\",\n dragModeDesc: \"Нажмите и перетащите от первого узла ко второму узлу\",\n note: \"Примечание: Вы можете изменить эту настройку в любое время. Выбранный режим будет использоваться, когда инструмент соединителя активен.\"\n },\n iconPacks: {\n title: \"Управление Пакетами Иконок\",\n lazyLoading: \"Включить Ленивую Загрузку\",\n lazyLoadingDesc: \"Загружать пакеты иконок по требованию для более быстрого запуска\",\n availablePacks: \"Доступные Пакеты Иконок\",\n coreIsoflow: \"Core Isoflow (Всегда Загружен)\",\n alwaysEnabled: \"Всегда включено\",\n awsPack: \"Иконки AWS\",\n gcpPack: \"Иконки Google Cloud\",\n azurePack: \"Иконки Azure\",\n kubernetesPack: \"Иконки Kubernetes\",\n loading: \"Загрузка...\",\n loaded: \"Загружено\",\n notLoaded: \"Не загружено\",\n iconCount: \"{count} иконок\",\n lazyLoadingDisabledNote: \"Ленивая загрузка отключена. Все пакеты иконок загружаются при запуске.\",\n note: \"Пакеты иконок могут быть включены или отключены в зависимости от ваших потребностей. Отключенные пакеты уменьшат использование памяти и улучшат производительность.\"\n }\n },\n lazyLoadingWelcome: {\n title: \"Новая Функция: Ленивая Загрузка!\",\n message: \"Привет! По многочисленным просьбам мы реализовали Ленивую Загрузку иконок, поэтому теперь, если вы хотите включить нестандартные пакеты иконок, вы можете включить их в разделе 'Конфигурация'.\",\n configPath: \"Нажмите на иконку Гамбургер\",\n configPath2: \"в верхнем левом углу, чтобы получить доступ к Конфигурации.\",\n canDisable: \"Вы можете отключить это поведение, если хотите.\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/i18n/tr-TR.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"Bu bir örnek metindir\"\n },\n mainMenu: {\n undo: \"Geri Al\",\n redo: \"Yinele\", \n open: \"Aç\",\n exportJson: \"JSON olarak dışa aktar\",\n exportCompactJson: \"Kompakt JSON olarak dışa aktar\",\n exportImage: \"Görüntü olarak dışa aktar\",\n clearCanvas: \"Tuvali temizle\",\n settings: \"Ayarlar\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"Klavye Kısayolları ve Yardım\",\n close: \"Kapat\",\n keyboardShortcuts: \"Klavye Kısayolları\",\n mouseInteractions: \"Fare Etkileşimleri\",\n action: \"Eylem\",\n shortcut: \"Kısayol\",\n method: \"Yöntem\",\n description: \"Açıklama\",\n note: \"Not:\",\n noteContent: \"Klavye kısayolları, çakışmaları önlemek için giriş alanlarında, metin alanlarında veya içerik düzenlenebilir öğelerde yazarken devre dışı bırakılır.\",\n // Keyboard shortcuts\n undoAction: \"Geri Al\",\n undoDescription: \"Son eylemi geri al\",\n redoAction: \"Yinele\",\n redoDescription: \"Son geri alınan eylemi yinele\",\n redoAltAction: \"Yinele (Alternatif)\",\n redoAltDescription: \"Alternatif yineleme kısayolu\",\n helpAction: \"Yardım\",\n helpDescription: \"Klavye kısayollarıyla yardım diyaloğunu aç\",\n zoomInAction: \"Yakınlaştır\",\n zoomInShortcut: \"Fare Tekerleği Yukarı\",\n zoomInDescription: \"Tuvalde yakınlaştır\",\n zoomOutAction: \"Uzaklaştır\",\n zoomOutShortcut: \"Fare Tekerleği Aşağı\",\n zoomOutDescription: \"Tuvalden uzaklaştır\",\n panCanvasAction: \"Tuvali Kaydır\",\n panCanvasShortcut: \"Sol tık + Sürükle\",\n panCanvasDescription: \"Kaydırma modundayken tuvali kaydır\",\n contextMenuAction: \"Bağlam Menüsü\",\n contextMenuShortcut: \"Sağ tık\",\n contextMenuDescription: \"Öğeler veya boş alan için bağlam menüsünü aç\",\n // Mouse interactions\n selectToolAction: \"Seçim Aracı\",\n selectToolShortcut: \"Seç butonuna tıkla\",\n selectToolDescription: \"Seçim moduna geç\",\n panToolAction: \"Kaydırma Aracı\",\n panToolShortcut: \"Kaydır butonuna tıkla\",\n panToolDescription: \"Tuvali hareket ettirmek için kaydırma moduna geç\",\n addItemAction: \"Öğe Ekle\",\n addItemShortcut: \"Öğe ekle butonuna tıkla\",\n addItemDescription: \"Yeni öğeler eklemek için simge seçiciyi aç\",\n drawRectangleAction: \"Dikdörtgen Çiz\",\n drawRectangleShortcut: \"Dikdörtgen butonuna tıkla\",\n drawRectangleDescription: \"Dikdörtgen çizim moduna geç\",\n createConnectorAction: \"Bağlayıcı Oluştur\",\n createConnectorShortcut: \"Bağlayıcı butonuna tıkla\",\n createConnectorDescription: \"Bağlayıcı moduna geç\",\n addTextAction: \"Metin Ekle\",\n addTextShortcut: \"Metin butonuna tıkla\",\n addTextDescription: \"Yeni bir metin kutusu oluştur\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"İpucu: Bağlayıcı Oluşturma\",\n tipConnectorTools: \"İpucu: Bağlayıcı Araçları\",\n clickInstructionStart: \"İlk düğüme veya noktaya\",\n clickInstructionMiddle: \"tıklayın, ardından\",\n clickInstructionEnd: \"bir bağlantı oluşturmak için ikinci düğüme veya noktaya tıklayın.\",\n nowClickTarget: \"Bağlantıyı tamamlamak için şimdi hedefe tıklayın.\",\n dragStart: \"Bir bağlantı oluşturmak için\",\n dragEnd: \"ilk düğümden ikinci düğüme sürükleyin.\",\n rerouteStart: \"Bir bağlayıcıyı yeniden yönlendirmek için,\",\n rerouteMiddle: \"bağlayıcı çizgisi boyunca herhangi bir noktaya\",\n rerouteEnd: \"sol tıklayın ve çapa noktaları oluşturmak veya taşımak için sürükleyin.\"\n },\n lassoHintTooltip: {\n tipLasso: \"İpucu: Lasso Seçimi\",\n tipFreehandLasso: \"İpucu: Serbest El Lasso Seçimi\",\n lassoDragStart: \"Seçmek istediğiniz öğelerin etrafına\",\n lassoDragEnd: \"dikdörtgen bir seçim kutusu çizmek için tıklayın ve sürükleyin.\",\n freehandDragStart: \"Tıklayın ve sürükleyin\",\n freehandDragMiddle: \"bir\",\n freehandDragEnd: \"serbest form şekli\",\n freehandComplete: \"öğelerin etrafına çizin. Şeklin içindeki tüm öğeleri seçmek için bırakın.\",\n moveStart: \"Seçildikten sonra,\",\n moveMiddle: \"seçimin içine tıklayın\",\n moveEnd: \"ve tüm seçili öğeleri birlikte taşımak için sürükleyin.\"\n },\n importHintTooltip: {\n title: \"Diyagramları İçe Aktar\",\n instructionStart: \"Diyagramları içe aktarmak için, sol üst köşedeki\",\n menuButton: \"menü butonuna\",\n instructionMiddle: \"(☰) tıklayın, ardından\",\n openButton: \"\\\"Aç\\\"\",\n instructionEnd: \"seçerek diyagram dosyalarınızı yükleyin.\"\n },\n connectorRerouteTooltip: {\n title: \"İpucu: Bağlayıcıları Yeniden Yönlendir\",\n instructionStart: \"Bağlayıcılarınız yerleştirildikten sonra istediğiniz gibi yeniden yönlendirebilirsiniz.\",\n instructionSelect: \"Önce bağlayıcıyı seçin\",\n instructionMiddle: \", ardından\",\n instructionClick: \"bağlayıcı yoluna tıklayın\",\n instructionAnd: \"ve\",\n instructionDrag: \"değiştirmek için sürükleyin\",\n instructionEnd: \"!\"\n },\n connectorEmptySpaceTooltip: {\n message: \"Bu bağlayıcıyı bir düğüme bağlamak için,\",\n instruction: \"bağlayıcının ucuna sol tıklayın ve istediğiniz düğüme sürükleyin.\"\n },\n settings: {\n zoom: {\n description: \"Fare tekerleği kullanılırken yakınlaştırma davranışını yapılandırın.\",\n zoomToCursor: \"İmlece Yakınlaştır\",\n zoomToCursorDesc: \"Etkinleştirildiğinde, fare imleci konumunda merkezlenmiş olarak yakınlaştırır/uzaklaştırır. Devre dışı bırakıldığında, yakınlaştırma tuvalde merkezlenir.\"\n },\n hotkeys: {\n title: \"Kısayol Tuşu Ayarları\",\n profile: \"Kısayol Tuşu Profili\",\n profileQwerty: \"QWERTY (Q, W, E, R, T, Y)\",\n profileSmnrct: \"SMNRCT (S, M, N, R, C, T)\",\n profileNone: \"Kısayol Tuşu Yok\",\n tool: \"Araç\",\n hotkey: \"Kısayol Tuşu\",\n toolSelect: \"Seç\",\n toolPan: \"Kaydır\",\n toolAddItem: \"Öğe Ekle\",\n toolRectangle: \"Dikdörtgen\",\n toolConnector: \"Bağlayıcı\",\n toolText: \"Metin\",\n note: \"Not: Kısayol tuşları metin alanlarında yazarken çalışmaz\"\n },\n pan: {\n title: \"Kaydırma Ayarları\",\n mousePanOptions: \"Fare Kaydırma Seçenekleri\",\n emptyAreaClickPan: \"Boş alanda tıkla ve sürükle\",\n middleClickPan: \"Orta tık ve sürükle\",\n rightClickPan: \"Sağ tık ve sürükle\",\n ctrlClickPan: \"Ctrl + tık ve sürükle\",\n altClickPan: \"Alt + tık ve sürükle\",\n keyboardPanOptions: \"Klavye Kaydırma Seçenekleri\",\n arrowKeys: \"Ok tuşları\",\n wasdKeys: \"WASD tuşları\",\n ijklKeys: \"IJKL tuşları\",\n keyboardPanSpeed: \"Klavye Kaydırma Hızı\",\n note: \"Not: Kaydırma seçenekleri özel Kaydırma aracına ek olarak çalışır\"\n },\n connector: {\n title: \"Bağlayıcı Ayarları\",\n connectionMode: \"Bağlantı Oluşturma Modu\",\n clickMode: \"Tıklama Modu (Önerilen)\",\n clickModeDesc: \"Bir bağlantı oluşturmak için ilk düğüme tıklayın, ardından ikinci düğüme tıklayın\",\n dragMode: \"Sürükleme Modu\",\n dragModeDesc: \"İlk düğümden ikinci düğüme tıklayın ve sürükleyin\",\n note: \"Not: Bu ayarı istediğiniz zaman değiştirebilirsiniz. Seçilen mod, Bağlayıcı aracı etkin olduğunda kullanılacaktır.\"\n },\n iconPacks: {\n title: \"Simge Paketi Yönetimi\",\n lazyLoading: \"Tembel Yükleme Etkinleştir\",\n lazyLoadingDesc: \"Daha hızlı başlangıç için simge paketlerini isteğe bağlı yükle\",\n availablePacks: \"Mevcut Simge Paketleri\",\n coreIsoflow: \"Çekirdek Isoflow (Her Zaman Yüklenir)\",\n alwaysEnabled: \"Her zaman etkin\",\n awsPack: \"AWS Simgeleri\",\n gcpPack: \"Google Cloud Simgeleri\",\n azurePack: \"Azure Simgeleri\",\n kubernetesPack: \"Kubernetes Simgeleri\",\n loading: \"Yükleniyor...\",\n loaded: \"Yüklendi\",\n notLoaded: \"Yüklenmedi\",\n iconCount: \"{count} simge\",\n lazyLoadingDisabledNote: \"Tembel yükleme devre dışı. Tüm simge paketleri başlangıçta yüklenir.\",\n note: \"Simge paketleri ihtiyaçlarınıza göre etkinleştirilebilir veya devre dışı bırakılabilir. Devre dışı bırakılan paketler bellek kullanımını azaltır ve performansı artırır.\"\n }\n },\n lazyLoadingWelcome: {\n title: \"Yeni Özellik: Tembel Yükleme!\",\n message: \"Merhaba! Popüler talep üzerine, simgelerin Tembel Yüklenmesini uyguladık, bu yüzden artık standart olmayan simge paketlerini etkinleştirmek isterseniz bunları 'Yapılandırma' bölümünde etkinleştirebilirsiniz.\",\n configPath: \"Yapılandırmaya erişmek için\",\n configPath2: \"sol üstteki Hamburger simgesine tıklayın.\",\n canDisable: \"İsterseniz bu davranışı devre dışı bırakabilirsiniz.\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/i18n/zh-CN.ts", "content": "import { LocaleProps } from '../types/isoflowProps';\n\nconst locale: LocaleProps = {\n common: {\n exampleText: \"这是一段示例文本\"\n },\n mainMenu: {\n undo: \"撤销\",\n redo: \"重做\", \n open: \"打开\",\n exportJson: \"导出为 JSON\",\n exportCompactJson: \"导出为紧凑 JSON\",\n exportImage: \"导出为图片\",\n clearCanvas: \"清空画布\",\n settings: \"设置\",\n gitHub: \"GitHub\"\n },\n helpDialog: {\n title: \"键盘快捷键和帮助\",\n close: \"关闭\",\n keyboardShortcuts: \"键盘快捷键\",\n mouseInteractions: \"鼠标交互\",\n action: \"操作\",\n shortcut: \"快捷键\",\n method: \"方法\",\n description: \"描述\",\n note: \"注意：\",\n noteContent: \"在输入框、文本区域或可编辑内容元素中键入时，键盘快捷键会被禁用，以防止冲突。\",\n // Keyboard shortcuts\n undoAction: \"撤销\",\n undoDescription: \"撤销上一个操作\",\n redoAction: \"重做\",\n redoDescription: \"重做上一个撤销的操作\",\n redoAltAction: \"重做（备选）\",\n redoAltDescription: \"备选重做快捷键\",\n helpAction: \"帮助\",\n helpDescription: \"打开包含键盘快捷键的帮助对话框\",\n zoomInAction: \"放大\",\n zoomInShortcut: \"鼠标滚轮向上\",\n zoomInDescription: \"放大画布\",\n zoomOutAction: \"缩小\",\n zoomOutShortcut: \"鼠标滚轮向下\",\n zoomOutDescription: \"缩小画布\",\n panCanvasAction: \"平移画布\",\n panCanvasShortcut: \"左键拖拽\",\n panCanvasDescription: \"在平移模式下移动画布\",\n contextMenuAction: \"上下文菜单\",\n contextMenuShortcut: \"右键点击\",\n contextMenuDescription: \"为项目或空白区域打开上下文菜单\",\n // Mouse interactions\n selectToolAction: \"选择工具\",\n selectToolShortcut: \"点击选择按钮\",\n selectToolDescription: \"切换到选择模式\",\n panToolAction: \"平移工具\",\n panToolShortcut: \"点击平移按钮\",\n panToolDescription: \"切换到平移模式以移动画布\",\n addItemAction: \"添加项目\",\n addItemShortcut: \"点击添加项目按钮\",\n addItemDescription: \"打开图标选择器以添加新项目\",\n drawRectangleAction: \"绘制矩形\",\n drawRectangleShortcut: \"点击矩形按钮\",\n drawRectangleDescription: \"切换到矩形绘制模式\",\n createConnectorAction: \"创建连接器\",\n createConnectorShortcut: \"点击连接器按钮\",\n createConnectorDescription: \"切换到连接器模式\",\n addTextAction: \"添加文本\",\n addTextShortcut: \"点击文本按钮\",\n addTextDescription: \"创建新的文本框\"\n },\n connectorHintTooltip: {\n tipCreatingConnectors: \"提示：创建连接器\",\n tipConnectorTools: \"提示：连接器工具\",\n clickInstructionStart: \"点击\",\n clickInstructionMiddle: \"第一个节点或点，然后\",\n clickInstructionEnd: \"第二个节点或点来创建连接。\",\n nowClickTarget: \"现在点击目标以完成连接。\",\n dragStart: \"拖拽\",\n dragEnd: \"从第一个节点到第二个节点来创建连接。\",\n rerouteStart: \"要重新规划连接器线路，请\",\n rerouteMiddle: \"左键点击\",\n rerouteEnd: \"连接器线上的任何点并拖拽以创建或移动锚点。\"\n },\n lassoHintTooltip: {\n tipLasso: \"提示：套索选择\",\n tipFreehandLasso: \"提示：自由套索选择\",\n lassoDragStart: \"点击并拖拽\",\n lassoDragEnd: \"以绘制矩形选择框来选中您想选择的项目。\",\n freehandDragStart: \"点击并拖拽\",\n freehandDragMiddle: \"以绘制\",\n freehandDragEnd: \"自由形状\",\n freehandComplete: \"围绕项目。释放以选择形状内的所有项目。\",\n moveStart: \"选择后，\",\n moveMiddle: \"在选择区域内点击\",\n moveEnd: \"并拖拽以一起移动所有选中的项目。\"\n },\n importHintTooltip: {\n title: \"导入图表\",\n instructionStart: \"要导入图表，请点击左上角的\",\n menuButton: \"菜单按钮\",\n instructionMiddle: \"（☰），然后选择\",\n openButton: \"\\\"打开\\\"\",\n instructionEnd: \"来加载您的图表文件。\"\n },\n connectorRerouteTooltip: {\n title: \"提示：重新规划连接器路径\",\n instructionStart: \"连接器放置后，您可以随意重新规划路径。\",\n instructionSelect: \"先选择连接器\",\n instructionMiddle: \"，然后\",\n instructionClick: \"点击连接器路径\",\n instructionAnd: \"并\",\n instructionDrag: \"拖拽\",\n instructionEnd: \"即可更改！\"\n },\n connectorEmptySpaceTooltip: {\n message: \"要将此连接器连接到节点，\",\n instruction: \"左键单击连接器末端并将其拖动到所需节点。\"\n },\n settings: {\n zoom: {\n description: \"配置使用鼠标滚轮时的缩放行为。\",\n zoomToCursor: \"光标缩放\",\n zoomToCursorDesc: \"启用时，以鼠标光标位置为中心进行缩放。禁用时，以画布中心进行缩放。\"\n },\n hotkeys: {\n title: \"快捷键设置\",\n profile: \"快捷键配置\",\n profileQwerty: \"QWERTY（Q、W、E、R、T、Y）\",\n profileSmnrct: \"SMNRCT（S、M、N、R、C、T）\",\n profileNone: \"无快捷键\",\n tool: \"工具\",\n hotkey: \"快捷键\",\n toolSelect: \"选择\",\n toolPan: \"平移\",\n toolAddItem: \"添加项目\",\n toolRectangle: \"矩形\",\n toolConnector: \"连接器\",\n toolText: \"文本\",\n note: \"注意：在文本输入框中输入时快捷键不生效\"\n },\n pan: {\n title: \"平移设置\",\n mousePanOptions: \"鼠标平移选项\",\n emptyAreaClickPan: \"点击并拖拽空白区域\",\n middleClickPan: \"中键点击并拖拽\",\n rightClickPan: \"右键点击并拖拽\",\n ctrlClickPan: \"Ctrl + 点击并拖拽\",\n altClickPan: \"Alt + 点击并拖拽\",\n keyboardPanOptions: \"键盘平移选项\",\n arrowKeys: \"方向键\",\n wasdKeys: \"WASD 键\",\n ijklKeys: \"IJKL 键\",\n keyboardPanSpeed: \"键盘平移速度\",\n note: \"注意：平移选项可与专用的平移工具一起使用\"\n },\n connector: {\n title: \"连接器设置\",\n connectionMode: \"连接创建模式\",\n clickMode: \"点击模式（推荐）\",\n clickModeDesc: \"先点击第一个节点，然后点击第二个节点来创建连接\",\n dragMode: \"拖拽模式\",\n dragModeDesc: \"从第一个节点点击并拖拽到第二个节点\",\n note: \"注意：您可以随时更改此设置。所选模式将在连接器工具激活时使用。\"\n },\n iconPacks: {\n title: \"图标包管理\",\n lazyLoading: \"启用延迟加载\",\n lazyLoadingDesc: \"按需加载图标包以加快启动速度\",\n availablePacks: \"可用图标包\",\n coreIsoflow: \"核心 Isoflow（始终加载）\",\n alwaysEnabled: \"始终启用\",\n awsPack: \"AWS 图标\",\n gcpPack: \"Google Cloud 图标\",\n azurePack: \"Azure 图标\",\n kubernetesPack: \"Kubernetes 图标\",\n loading: \"加载中...\",\n loaded: \"已加载\",\n notLoaded: \"未加载\",\n iconCount: \"{count} 个图标\",\n lazyLoadingDisabledNote: \"延迟加载已禁用。所有图标包将在启动时加载。\",\n note: \"可以根据需要启用或禁用图标包。禁用的图标包将减少内存使用并提高性能。\"\n }\n },\n lazyLoadingWelcome: {\n title: \"新功能：延迟加载！\",\n message: \"嘿！应大家的要求，我们实现了图标的延迟加载功能，现在如果您想启用非标准图标包，可以在「配置」部分中启用它们。\",\n configPath: \"点击左上角的汉堡菜单图标\",\n configPath2: \"以访问配置。\",\n canDisable: \"如果您愿意，可以禁用此行为。\",\n signature: \"-Stan\"\n }\n};\n\nexport default locale;\n" }, { "path": "packages/fossflow-lib/src/index-docker.tsx", "content": "// This is an entry point for the Docker image build.\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Box } from '@mui/material';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport Isoflow, { INITIAL_DATA } from 'src/Isoflow';\nimport { icons, colors } from './examples/initialData';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nroot.render(\n \n \n \n \n \n \n);\n" }, { "path": "packages/fossflow-lib/src/index.html", "content": "\n\n \n \n \n \n Development | Isoflow\n \n \n \n \n
\n \n\n" }, { "path": "packages/fossflow-lib/src/index.ts", "content": "export { Isoflow, useIsoflow } from './Isoflow';\nexport * from './standaloneExports';\nexport { default } from './Isoflow';" }, { "path": "packages/fossflow-lib/src/index.tsx", "content": "// This is an entry point for running the app in dev mode.\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport { ThemeProvider, createTheme } from '@mui/material';\nimport { Examples } from './examples';\nimport { themeConfig } from './styles/theme';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nroot.render(\n \n \n \n \n \n \n);\n" }, { "path": "packages/fossflow-lib/src/interaction/modes/Connector.ts", "content": "import { produce } from 'immer';\nimport {\n generateId,\n getItemAtTile,\n getItemByIdOrThrow,\n hasMovedTile,\n setWindowCursor\n} from 'src/utils';\nimport { ModeActions, Connector as ConnectorI } from 'src/types';\n\nexport const Connector: ModeActions = {\n entry: () => {\n setWindowCursor('crosshair');\n },\n exit: () => {\n setWindowCursor('default');\n },\n mousemove: ({ uiState, scene }) => {\n if (\n uiState.mode.type !== 'CONNECTOR' ||\n !uiState.mode.id ||\n !hasMovedTile(uiState.mouse)\n )\n return;\n\n // TypeScript type guard - we know mode is CONNECTOR type here\n const connectorMode = uiState.mode;\n \n // Only update connector position in drag mode or when connecting in click mode\n if (uiState.connectorInteractionMode === 'drag' || connectorMode.isConnecting) {\n // Try to find the connector - it might not exist yet\n const connectorItem = (scene.currentView.connectors ?? []).find(\n c => c.id === connectorMode.id\n );\n \n // If connector doesn't exist yet, return early\n if (!connectorItem) {\n return;\n }\n\n const itemAtTile = getItemAtTile({\n tile: uiState.mouse.position.tile,\n scene\n });\n\n if (itemAtTile?.type === 'ITEM') {\n const newConnector = produce(connectorItem, (draft) => {\n draft.anchors[1] = { id: generateId(), ref: { item: itemAtTile.id } };\n });\n\n scene.updateConnector(connectorMode.id!, newConnector);\n } else {\n const newConnector = produce(connectorItem, (draft) => {\n draft.anchors[1] = {\n id: generateId(),\n ref: { tile: uiState.mouse.position.tile }\n };\n });\n\n scene.updateConnector(connectorMode.id!, newConnector);\n }\n }\n },\n mousedown: ({ uiState, scene, isRendererInteraction }) => {\n if (uiState.mode.type !== 'CONNECTOR' || !isRendererInteraction) return;\n\n const itemAtTile = getItemAtTile({\n tile: uiState.mouse.position.tile,\n scene\n });\n\n if (uiState.connectorInteractionMode === 'click') {\n // Click mode: handle first and second clicks\n if (!uiState.mode.startAnchor) {\n // First click: store the start position\n const startAnchor = itemAtTile?.type === 'ITEM' \n ? { itemId: itemAtTile.id }\n : { tile: uiState.mouse.position.tile };\n\n // Create a connector but don't finalize it yet\n const newConnector: ConnectorI = {\n id: generateId(),\n color: scene.colors[0].id,\n anchors: []\n };\n\n if (itemAtTile && itemAtTile.type === 'ITEM') {\n newConnector.anchors = [\n { id: generateId(), ref: { item: itemAtTile.id } },\n { id: generateId(), ref: { item: itemAtTile.id } }\n ];\n } else {\n newConnector.anchors = [\n { id: generateId(), ref: { tile: uiState.mouse.position.tile } },\n { id: generateId(), ref: { tile: uiState.mouse.position.tile } }\n ];\n }\n\n scene.createConnector(newConnector);\n\n uiState.actions.setMode({\n type: 'CONNECTOR',\n showCursor: true,\n id: newConnector.id,\n startAnchor,\n isConnecting: true\n });\n } else {\n // Second click: complete the connection\n // We already checked mode.type === 'CONNECTOR' above\n const currentMode = uiState.mode;\n if (currentMode.id) {\n // Try to find the connector - it might not exist\n const connector = (scene.currentView.connectors ?? []).find(\n c => c.id === currentMode.id\n );\n \n // If connector doesn't exist, reset mode and return\n if (!connector) {\n uiState.actions.setMode({\n type: 'CONNECTOR',\n showCursor: true,\n id: null,\n startAnchor: undefined,\n isConnecting: false\n });\n return;\n }\n \n // Update the second anchor to the click position\n const newConnector = produce(connector, (draft) => {\n if (itemAtTile?.type === 'ITEM') {\n draft.anchors[1] = { id: generateId(), ref: { item: itemAtTile.id } };\n } else {\n draft.anchors[1] = {\n id: generateId(),\n ref: { tile: uiState.mouse.position.tile }\n };\n }\n });\n\n scene.updateConnector(currentMode.id, newConnector);\n\n // Don't delete connectors to empty space - they're valid\n // Only validate minimum path length will be handled by the update\n\n // Reset for next connection\n uiState.actions.setMode({\n type: 'CONNECTOR',\n showCursor: true,\n id: null,\n startAnchor: undefined,\n isConnecting: false\n });\n }\n }\n } else {\n // Drag mode: original behavior\n const newConnector: ConnectorI = {\n id: generateId(),\n color: scene.colors[0].id,\n anchors: []\n };\n\n if (itemAtTile && itemAtTile.type === 'ITEM') {\n newConnector.anchors = [\n { id: generateId(), ref: { item: itemAtTile.id } },\n { id: generateId(), ref: { item: itemAtTile.id } }\n ];\n } else {\n newConnector.anchors = [\n { id: generateId(), ref: { tile: uiState.mouse.position.tile } },\n { id: generateId(), ref: { tile: uiState.mouse.position.tile } }\n ];\n }\n\n scene.createConnector(newConnector);\n\n uiState.actions.setMode({\n type: 'CONNECTOR',\n showCursor: true,\n id: newConnector.id\n });\n }\n },\n mouseup: ({ uiState, scene }) => {\n if (uiState.mode.type !== 'CONNECTOR' || !uiState.mode.id) return;\n\n // Only handle mouseup for drag mode\n if (uiState.connectorInteractionMode === 'drag') {\n // Don't delete connectors to empty space - they're valid\n // Validation is handled in the reducer layer\n\n uiState.actions.setMode({\n type: 'CONNECTOR',\n showCursor: true,\n id: null\n });\n }\n // Click mode handles completion in mousedown (second click)\n }\n};" }, { "path": "packages/fossflow-lib/src/interaction/modes/Cursor.ts", "content": "import { produce } from 'immer';\nimport {\n ConnectorAnchor,\n SceneConnector,\n ModeActions,\n ModeActionsAction,\n Coords,\n View\n} from 'src/types';\nimport {\n getItemAtTile,\n hasMovedTile,\n getAnchorAtTile,\n getItemByIdOrThrow,\n generateId,\n CoordsUtils,\n getAnchorTile,\n connectorPathTileToGlobal\n} from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\n\nconst getAnchorOrdering = (\n anchor: ConnectorAnchor,\n connector: SceneConnector,\n view: View\n) => {\n const anchorTile = getAnchorTile(anchor, view);\n const index = connector.path.tiles.findIndex((pathTile) => {\n const globalTile = connectorPathTileToGlobal(\n pathTile,\n connector.path.rectangle.from\n );\n return CoordsUtils.isEqual(globalTile, anchorTile);\n });\n\n if (index === -1) {\n throw new Error(\n `Could not calculate ordering index of anchor [anchorId: ${anchor.id}]`\n );\n }\n\n return index;\n};\n\nconst getAnchor = (\n connectorId: string,\n tile: Coords,\n scene: ReturnType\n) => {\n const connector = getItemByIdOrThrow(scene.connectors, connectorId).value;\n const anchor = getAnchorAtTile(tile, connector.anchors);\n\n if (!anchor) {\n const newAnchor: ConnectorAnchor = {\n id: generateId(),\n ref: { tile }\n };\n\n const orderedAnchors = [...connector.anchors, newAnchor]\n .map((anch) => {\n return {\n ...anch,\n ordering: getAnchorOrdering(anch, connector, scene.currentView)\n };\n })\n .sort((a, b) => {\n return a.ordering - b.ordering;\n });\n\n scene.updateConnector(connector.id, { anchors: orderedAnchors });\n return newAnchor;\n }\n\n return anchor;\n};\n\nconst mousedown: ModeActionsAction = ({\n uiState,\n scene,\n isRendererInteraction\n}) => {\n if (uiState.mode.type !== 'CURSOR' || !isRendererInteraction) return;\n\n const itemAtTile = getItemAtTile({\n tile: uiState.mouse.position.tile,\n scene\n });\n\n if (itemAtTile) {\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n draft.mousedownItem = itemAtTile;\n })\n );\n } else {\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n draft.mousedownItem = null;\n })\n );\n\n uiState.actions.setItemControls(null);\n\n // Show context menu for empty space on left click\n uiState.actions.setContextMenu({\n type: 'EMPTY',\n tile: uiState.mouse.position.tile\n });\n }\n};\n\nexport const Cursor: ModeActions = {\n entry: (state) => {\n const { uiState } = state;\n\n if (uiState.mode.type !== 'CURSOR') return;\n\n if (uiState.mode.mousedownItem) {\n mousedown(state);\n }\n },\n mousemove: ({ scene, uiState }) => {\n if (uiState.mode.type !== 'CURSOR' || !hasMovedTile(uiState.mouse)) return;\n\n let item = uiState.mode.mousedownItem;\n\n if (item?.type === 'CONNECTOR' && uiState.mouse.mousedown) {\n const anchor = getAnchor(item.id, uiState.mouse.mousedown.tile, scene);\n\n item = {\n type: 'CONNECTOR_ANCHOR',\n id: anchor.id\n };\n }\n\n if (item) {\n uiState.actions.setMode({\n type: 'DRAG_ITEMS',\n showCursor: true,\n items: [item],\n isInitialMovement: true\n });\n } else {\n // If no item is being dragged and the mouse has moved, switch to PAN mode\n // Only do this if the drag started on empty space\n if (uiState.mouse.mousedown) {\n uiState.actions.setMode({\n type: 'PAN',\n showCursor: false\n });\n }\n }\n },\n mousedown,\n mouseup: ({ uiState, isRendererInteraction }) => {\n if (uiState.mode.type !== 'CURSOR' || !isRendererInteraction) return;\n\n const hasMoved = uiState.mouse.mousedown && hasMovedTile(uiState.mouse);\n\n if (uiState.mode.mousedownItem && !hasMoved) {\n if (uiState.mode.mousedownItem.type === 'ITEM') {\n uiState.actions.setItemControls({\n type: 'ITEM',\n id: uiState.mode.mousedownItem.id\n });\n } else if (uiState.mode.mousedownItem.type === 'RECTANGLE') {\n uiState.actions.setItemControls({\n type: 'RECTANGLE',\n id: uiState.mode.mousedownItem.id\n });\n } else if (uiState.mode.mousedownItem.type === 'CONNECTOR') {\n uiState.actions.setItemControls({\n type: 'CONNECTOR',\n id: uiState.mode.mousedownItem.id\n });\n } else if (uiState.mode.mousedownItem.type === 'TEXTBOX') {\n uiState.actions.setItemControls({\n type: 'TEXTBOX',\n id: uiState.mode.mousedownItem.id\n });\n }\n } else {\n uiState.actions.setItemControls(null);\n }\n\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n draft.mousedownItem = null;\n })\n );\n }\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/modes/DragItems.ts", "content": "import { produce } from 'immer';\nimport { ModeActions, Coords, ItemReference } from 'src/types';\nimport { useScene } from 'src/hooks/useScene';\nimport type { State } from 'src/stores/reducers/types';\nimport {\n getItemByIdOrThrow,\n CoordsUtils,\n hasMovedTile,\n getAnchorParent,\n getItemAtTile,\n findNearestUnoccupiedTilesForGroup\n} from 'src/utils';\n\nconst dragItems = (\n items: ItemReference[],\n tile: Coords,\n delta: Coords,\n scene: ReturnType\n) => {\n // Separate all item types upfront\n const itemRefs = items.filter(item => item.type === 'ITEM');\n const textBoxRefs = items.filter(item => item.type === 'TEXTBOX');\n const rectangleRefs = items.filter(item => item.type === 'RECTANGLE');\n const anchorRefs = items.filter(item => item.type === 'CONNECTOR_ANCHOR');\n\n // Calculate node targets if any nodes are selected\n let newTiles: Coords[] | null = null;\n if (itemRefs.length > 0) {\n const itemsWithTargets = itemRefs.map(item => {\n const node = getItemByIdOrThrow(scene.items, item.id).value;\n return {\n id: item.id,\n targetTile: CoordsUtils.add(node.tile, delta)\n };\n });\n\n newTiles = findNearestUnoccupiedTilesForGroup(\n itemsWithTargets,\n scene,\n itemRefs.map(item => item.id)\n );\n\n // If nodes can't find valid positions, abort the entire drag operation\n if (!newTiles) {\n return;\n }\n }\n\n // Check if there's anything to update\n const hasUpdates = newTiles || textBoxRefs.length > 0 || rectangleRefs.length > 0;\n\n if (hasUpdates) {\n // Wrap ALL updates in a single transaction with state chaining\n // This ensures each update builds on the previous one's state\n scene.transaction(() => {\n let currentState: State | undefined;\n\n // 1. Update nodes\n if (newTiles) {\n itemRefs.forEach((item, index) => {\n currentState = scene.updateViewItem(item.id, {\n tile: newTiles[index]\n }, currentState);\n });\n }\n\n // 2. Update textboxes (chained from node state)\n textBoxRefs.forEach((item) => {\n const textBox = getItemByIdOrThrow(scene.textBoxes, item.id).value;\n currentState = scene.updateTextBox(item.id, {\n tile: CoordsUtils.add(textBox.tile, delta)\n }, currentState);\n });\n\n // 3. Update rectangles (chained from textbox state)\n rectangleRefs.forEach((item) => {\n const rectangle = getItemByIdOrThrow(scene.rectangles, item.id).value;\n currentState = scene.updateRectangle(item.id, {\n from: CoordsUtils.add(rectangle.from, delta),\n to: CoordsUtils.add(rectangle.to, delta)\n }, currentState);\n });\n });\n }\n\n // Handle connector anchors separately (they have different update logic)\n anchorRefs.forEach((item) => {\n const connector = getAnchorParent(item.id, scene.connectors);\n\n const newConnector = produce(connector, (draft) => {\n const anchor = getItemByIdOrThrow(connector.anchors, item.id);\n\n const itemAtTile = getItemAtTile({ tile, scene });\n\n switch (itemAtTile?.type) {\n case 'ITEM':\n draft.anchors[anchor.index] = {\n ...anchor.value,\n ref: {\n item: itemAtTile.id\n }\n };\n break;\n case 'CONNECTOR_ANCHOR':\n draft.anchors[anchor.index] = {\n ...anchor.value,\n ref: {\n anchor: itemAtTile.id\n }\n };\n break;\n default:\n draft.anchors[anchor.index] = {\n ...anchor.value,\n ref: {\n tile\n }\n };\n break;\n }\n });\n\n scene.updateConnector(connector.id, newConnector);\n });\n};\n\nexport const DragItems: ModeActions = {\n entry: ({ uiState, rendererRef }) => {\n if (uiState.mode.type !== 'DRAG_ITEMS' || !uiState.mouse.mousedown) return;\n\n const renderer = rendererRef;\n renderer.style.userSelect = 'none';\n },\n exit: ({ rendererRef }) => {\n const renderer = rendererRef;\n renderer.style.userSelect = 'auto';\n },\n mousemove: ({ uiState, scene }) => {\n if (uiState.mode.type !== 'DRAG_ITEMS' || !uiState.mouse.mousedown) return;\n\n if (uiState.mode.isInitialMovement) {\n const delta = CoordsUtils.subtract(\n uiState.mouse.position.tile,\n uiState.mouse.mousedown.tile\n );\n\n dragItems(uiState.mode.items, uiState.mouse.position.tile, delta, scene);\n\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n draft.isInitialMovement = false;\n })\n );\n\n return;\n }\n\n if (!hasMovedTile(uiState.mouse) || !uiState.mouse.delta?.tile) return;\n\n const delta = uiState.mouse.delta.tile;\n\n dragItems(uiState.mode.items, uiState.mouse.position.tile, delta, scene);\n },\n mouseup: ({ uiState }) => {\n uiState.actions.setItemControls(null);\n uiState.actions.setMode({\n type: 'CURSOR',\n showCursor: true,\n mousedownItem: null\n });\n }\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/modes/FreehandLasso.ts", "content": "import { produce } from 'immer';\nimport { ModeActions, ItemReference, Coords } from 'src/types';\nimport { screenToIso, isPointInPolygon } from 'src/utils';\n\n// Helper to find all items whose centers are within the freehand polygon\nconst getItemsInFreehandBounds = (\n pathTiles: Coords[],\n scene: any\n): ItemReference[] => {\n const items: ItemReference[] = [];\n\n if (pathTiles.length < 3) return items;\n\n // Check all nodes/items\n scene.items.forEach((item: any) => {\n if (isPointInPolygon(item.tile, pathTiles)) {\n items.push({ type: 'ITEM', id: item.id });\n }\n });\n\n // Check all rectangles - they must be FULLY enclosed (all 4 corners inside)\n scene.rectangles.forEach((rectangle: any) => {\n const corners = [\n rectangle.from,\n { x: rectangle.to.x, y: rectangle.from.y },\n rectangle.to,\n { x: rectangle.from.x, y: rectangle.to.y }\n ];\n\n // Rectangle is only selected if ALL corners are inside the polygon\n const allCornersInside = corners.every(corner => isPointInPolygon(corner, pathTiles));\n\n if (allCornersInside) {\n items.push({ type: 'RECTANGLE', id: rectangle.id });\n }\n });\n\n // Check all text boxes\n scene.textBoxes.forEach((textBox: any) => {\n if (isPointInPolygon(textBox.tile, pathTiles)) {\n items.push({ type: 'TEXTBOX', id: textBox.id });\n }\n });\n\n return items;\n};\n\nexport const FreehandLasso: ModeActions = {\n mousemove: ({ uiState, scene }) => {\n if (uiState.mode.type !== 'FREEHAND_LASSO' || !uiState.mouse.mousedown) return;\n\n // If user is dragging an existing selection, switch to DRAG_ITEMS mode\n if (uiState.mode.isDragging && uiState.mode.selection) {\n uiState.actions.setMode({\n type: 'DRAG_ITEMS',\n showCursor: true,\n items: uiState.mode.selection.items,\n isInitialMovement: true\n });\n return;\n }\n\n // User is drawing the freehand path - collect screen coordinates\n const newScreenPoint = uiState.mouse.position.screen;\n\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'FREEHAND_LASSO') {\n // Add point to path if it's far enough from the last point (throttle)\n const lastPoint = draft.path[draft.path.length - 1];\n if (!lastPoint ||\n Math.abs(newScreenPoint.x - lastPoint.x) > 5 ||\n Math.abs(newScreenPoint.y - lastPoint.y) > 5) {\n draft.path.push(newScreenPoint);\n }\n }\n })\n );\n },\n\n mousedown: ({ uiState }) => {\n if (uiState.mode.type !== 'FREEHAND_LASSO') return;\n\n // If there's an existing selection, check if click is within it\n if (uiState.mode.selection) {\n // Convert click position to tile\n const clickTile = uiState.mouse.position.tile;\n const isWithinSelection = isPointInPolygon(\n clickTile,\n uiState.mode.selection.pathTiles\n );\n\n if (isWithinSelection) {\n // Clicked within selection - prepare to drag\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'FREEHAND_LASSO') {\n draft.isDragging = true;\n }\n })\n );\n return;\n }\n\n // Clicked outside selection - clear it and start new path\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'FREEHAND_LASSO') {\n draft.path = [uiState.mouse.position.screen];\n draft.selection = null;\n draft.isDragging = false;\n }\n })\n );\n return;\n }\n\n // Start a new path\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'FREEHAND_LASSO') {\n draft.path = [uiState.mouse.position.screen];\n draft.selection = null;\n draft.isDragging = false;\n }\n })\n );\n },\n\n mouseup: ({ uiState, scene }) => {\n if (uiState.mode.type !== 'FREEHAND_LASSO') return;\n\n // If we've drawn a path, convert to tiles and find items\n if (uiState.mode.path.length >= 3 && !uiState.mode.selection) {\n const rendererSize = uiState.rendererEl?.getBoundingClientRect();\n if (!rendererSize) return;\n\n // Convert screen path to tile coordinates\n const pathTiles = uiState.mode.path.map((screenPoint) => {\n return screenToIso({\n mouse: screenPoint,\n zoom: uiState.zoom,\n scroll: uiState.scroll,\n rendererSize: {\n width: rendererSize.width,\n height: rendererSize.height\n }\n });\n });\n\n // Find all items within the freehand polygon\n const items = getItemsInFreehandBounds(pathTiles, scene);\n\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'FREEHAND_LASSO') {\n draft.selection = {\n pathTiles,\n items\n };\n draft.isDragging = false;\n }\n })\n );\n } else {\n // Reset dragging state but keep selection if it exists\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'FREEHAND_LASSO') {\n draft.isDragging = false;\n }\n })\n );\n }\n }\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/modes/Lasso.ts", "content": "import { produce } from 'immer';\nimport { ModeActions, ItemReference } from 'src/types';\nimport { CoordsUtils, isWithinBounds, hasMovedTile } from 'src/utils';\n\n// Helper to find all items within the lasso bounds\nconst getItemsInBounds = (\n startTile: { x: number; y: number },\n endTile: { x: number; y: number },\n scene: any\n): ItemReference[] => {\n const items: ItemReference[] = [];\n\n // Check all nodes/items\n scene.items.forEach((item: any) => {\n if (isWithinBounds(item.tile, [startTile, endTile])) {\n items.push({ type: 'ITEM', id: item.id });\n }\n });\n\n // Check all rectangles - they must be FULLY enclosed (all 4 corners inside)\n scene.rectangles.forEach((rectangle: any) => {\n const corners = [\n rectangle.from,\n { x: rectangle.to.x, y: rectangle.from.y },\n rectangle.to,\n { x: rectangle.from.x, y: rectangle.to.y }\n ];\n\n // Rectangle is only selected if ALL corners are inside the bounds\n const allCornersInside = corners.every(corner =>\n isWithinBounds(corner, [startTile, endTile])\n );\n\n if (allCornersInside) {\n items.push({ type: 'RECTANGLE', id: rectangle.id });\n }\n });\n\n // Check all text boxes\n scene.textBoxes.forEach((textBox: any) => {\n if (isWithinBounds(textBox.tile, [startTile, endTile])) {\n items.push({ type: 'TEXTBOX', id: textBox.id });\n }\n });\n\n return items;\n};\n\nexport const Lasso: ModeActions = {\n mousemove: ({ uiState, scene }) => {\n if (uiState.mode.type !== 'LASSO' || !uiState.mouse.mousedown) return;\n\n if (!hasMovedTile(uiState.mouse)) return;\n\n if (uiState.mode.isDragging && uiState.mode.selection) {\n // User is dragging an existing selection - switch to DRAG_ITEMS mode\n uiState.actions.setMode({\n type: 'DRAG_ITEMS',\n showCursor: true,\n items: uiState.mode.selection.items,\n isInitialMovement: true\n });\n return;\n }\n\n // User is creating/updating the selection box\n const startTile = uiState.mouse.mousedown.tile;\n const endTile = uiState.mouse.position.tile;\n const items = getItemsInBounds(startTile, endTile, scene);\n\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'LASSO') {\n draft.selection = {\n startTile,\n endTile,\n items\n };\n }\n })\n );\n },\n\n mousedown: ({ uiState }) => {\n if (uiState.mode.type !== 'LASSO') return;\n\n // If there's an existing selection, check if click is within it\n if (uiState.mode.selection) {\n const isWithinSelection = isWithinBounds(uiState.mouse.position.tile, [\n uiState.mode.selection.startTile,\n uiState.mode.selection.endTile\n ]);\n\n if (isWithinSelection) {\n // Clicked within selection - prepare to drag\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'LASSO') {\n draft.isDragging = true;\n }\n })\n );\n return;\n }\n\n // Clicked outside selection - clear it and stay in LASSO mode\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'LASSO') {\n draft.selection = null;\n draft.isDragging = false;\n }\n })\n );\n }\n },\n\n mouseup: ({ uiState }) => {\n if (uiState.mode.type !== 'LASSO') return;\n\n // Reset dragging state but keep selection\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n if (draft.type === 'LASSO') {\n draft.isDragging = false;\n }\n })\n );\n }\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/modes/Pan.ts", "content": "import { produce } from 'immer';\nimport { CoordsUtils, setWindowCursor } from 'src/utils';\nimport { ModeActions } from 'src/types';\n\nexport const Pan: ModeActions = {\n entry: () => {\n setWindowCursor('grab');\n },\n exit: () => {\n setWindowCursor('default');\n },\n mousemove: ({ uiState }) => {\n if (uiState.mode.type !== 'PAN') return;\n\n if (uiState.mouse.mousedown !== null) {\n const newScroll = produce(uiState.scroll, (draft) => {\n draft.position = uiState.mouse.delta?.screen\n ? CoordsUtils.add(draft.position, uiState.mouse.delta.screen)\n : draft.position;\n });\n\n uiState.actions.setScroll(newScroll);\n }\n },\n mousedown: ({ uiState, isRendererInteraction }) => {\n if (uiState.mode.type !== 'PAN' || !isRendererInteraction) return;\n\n setWindowCursor('grabbing');\n },\n mouseup: ({ uiState }) => {\n if (uiState.mode.type !== 'PAN') return;\n setWindowCursor('grab');\n // Note: Mode switching is now handled by usePanHandlers\n }\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/modes/PlaceIcon.ts", "content": "import { produce } from 'immer';\nimport { ModeActions } from 'src/types';\nimport { generateId, getItemAtTile, findNearestUnoccupiedTile } from 'src/utils';\nimport { VIEW_ITEM_DEFAULTS } from 'src/config';\n\nexport const PlaceIcon: ModeActions = {\n mousemove: () => {},\n mousedown: ({ uiState, scene, isRendererInteraction }) => {\n if (uiState.mode.type !== 'PLACE_ICON' || !isRendererInteraction) return;\n\n if (!uiState.mode.id) {\n const itemAtTile = getItemAtTile({\n tile: uiState.mouse.position.tile,\n scene\n });\n\n uiState.actions.setMode({\n type: 'CURSOR',\n mousedownItem: itemAtTile,\n showCursor: true\n });\n\n uiState.actions.setItemControls(null);\n }\n },\n mouseup: ({ uiState, scene }) => {\n if (uiState.mode.type !== 'PLACE_ICON') return;\n\n if (uiState.mode.id !== null) {\n // Find the nearest unoccupied tile to the target position\n const targetTile = findNearestUnoccupiedTile(\n uiState.mouse.position.tile,\n scene\n );\n\n // Place the icon on the nearest unoccupied tile\n if (targetTile) {\n const modelItemId = generateId();\n\n scene.placeIcon({\n modelItem: {\n id: modelItemId,\n name: 'Untitled',\n icon: uiState.mode.id\n },\n viewItem: {\n ...VIEW_ITEM_DEFAULTS,\n id: modelItemId,\n tile: targetTile\n }\n });\n }\n }\n\n uiState.actions.setMode(\n produce(uiState.mode, (draft) => {\n draft.id = null;\n })\n );\n }\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/modes/Rectangle/DrawRectangle.ts", "content": "import { ModeActions } from 'src/types';\nimport { produce } from 'immer';\nimport { generateId, hasMovedTile, setWindowCursor } from 'src/utils';\n\nexport const DrawRectangle: ModeActions = {\n entry: () => {\n setWindowCursor('crosshair');\n },\n exit: () => {\n setWindowCursor('default');\n },\n mousemove: ({ uiState, scene }) => {\n if (\n uiState.mode.type !== 'RECTANGLE.DRAW' ||\n !hasMovedTile(uiState.mouse) ||\n !uiState.mode.id ||\n !uiState.mouse.mousedown\n )\n return;\n\n scene.updateRectangle(uiState.mode.id, {\n to: uiState.mouse.position.tile\n });\n },\n mousedown: ({ uiState, scene, isRendererInteraction }) => {\n if (uiState.mode.type !== 'RECTANGLE.DRAW' || !isRendererInteraction)\n return;\n\n const newRectangleId = generateId();\n\n scene.createRectangle({\n id: newRectangleId,\n color: scene.colors[0].id,\n from: uiState.mouse.position.tile,\n to: uiState.mouse.position.tile\n });\n\n const newMode = produce(uiState.mode, (draft) => {\n draft.id = newRectangleId;\n });\n\n uiState.actions.setMode(newMode);\n },\n mouseup: ({ uiState }) => {\n if (uiState.mode.type !== 'RECTANGLE.DRAW' || !uiState.mode.id) return;\n\n uiState.actions.setMode({\n type: 'CURSOR',\n showCursor: true,\n mousedownItem: null\n });\n }\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/modes/Rectangle/TransformRectangle.ts", "content": "import {\n getItemByIdOrThrow,\n getBoundingBox,\n convertBoundsToNamedAnchors,\n hasMovedTile\n} from 'src/utils';\nimport { ModeActions } from 'src/types';\n\nexport const TransformRectangle: ModeActions = {\n entry: () => {},\n exit: () => {},\n mousemove: ({ uiState, scene }) => {\n if (\n uiState.mode.type !== 'RECTANGLE.TRANSFORM' ||\n !hasMovedTile(uiState.mouse)\n )\n return;\n\n if (uiState.mode.selectedAnchor) {\n // User is dragging an anchor\n const rectangle = getItemByIdOrThrow(\n scene.rectangles,\n uiState.mode.id\n ).value;\n const rectangleBounds = getBoundingBox([rectangle.to, rectangle.from]);\n const namedBounds = convertBoundsToNamedAnchors(rectangleBounds);\n\n if (\n uiState.mode.selectedAnchor === 'BOTTOM_LEFT' ||\n uiState.mode.selectedAnchor === 'TOP_RIGHT'\n ) {\n const nextBounds = getBoundingBox([\n uiState.mode.selectedAnchor === 'BOTTOM_LEFT'\n ? namedBounds.TOP_RIGHT\n : namedBounds.BOTTOM_LEFT,\n uiState.mouse.position.tile\n ]);\n const nextNamedBounds = convertBoundsToNamedAnchors(nextBounds);\n\n scene.updateRectangle(uiState.mode.id, {\n from: nextNamedBounds.TOP_RIGHT,\n to: nextNamedBounds.BOTTOM_LEFT\n });\n } else if (\n uiState.mode.selectedAnchor === 'BOTTOM_RIGHT' ||\n uiState.mode.selectedAnchor === 'TOP_LEFT'\n ) {\n const nextBounds = getBoundingBox([\n uiState.mode.selectedAnchor === 'BOTTOM_RIGHT'\n ? namedBounds.TOP_LEFT\n : namedBounds.BOTTOM_RIGHT,\n uiState.mouse.position.tile\n ]);\n const nextNamedBounds = convertBoundsToNamedAnchors(nextBounds);\n\n scene.updateRectangle(uiState.mode.id, {\n from: nextNamedBounds.TOP_LEFT,\n to: nextNamedBounds.BOTTOM_RIGHT\n });\n }\n }\n },\n mousedown: () => {\n // MOUSE_DOWN is triggered by the anchor iteself (see `TransformAnchor.tsx`)\n },\n mouseup: ({ uiState }) => {\n if (uiState.mode.type !== 'RECTANGLE.TRANSFORM') return;\n\n uiState.actions.setMode({\n type: 'CURSOR',\n mousedownItem: null,\n showCursor: true\n });\n }\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/modes/TextBox.ts", "content": "import { setWindowCursor } from 'src/utils';\nimport { ModeActions } from 'src/types';\n\nexport const TextBox: ModeActions = {\n entry: () => {\n setWindowCursor('crosshair');\n },\n exit: () => {\n setWindowCursor('default');\n },\n mousemove: ({ uiState, scene }) => {\n if (uiState.mode.type !== 'TEXTBOX' || !uiState.mode.id) return;\n\n scene.updateTextBox(uiState.mode.id, {\n tile: uiState.mouse.position.tile\n });\n },\n mouseup: ({ uiState, scene, isRendererInteraction }) => {\n if (uiState.mode.type !== 'TEXTBOX' || !uiState.mode.id) return;\n\n if (!isRendererInteraction) {\n scene.deleteTextBox(uiState.mode.id);\n } else {\n uiState.actions.setItemControls({\n type: 'TEXTBOX',\n id: uiState.mode.id\n });\n }\n\n uiState.actions.setMode({\n type: 'CURSOR',\n showCursor: true,\n mousedownItem: null\n });\n }\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/useInteractionManager.ts", "content": "import { useCallback, useEffect, useRef } from 'react';\nimport { useModelStoreApi } from 'src/stores/modelStore';\nimport { useUiStateStore, useUiStateStoreApi } from 'src/stores/uiStateStore';\nimport { ModeActions, State, SlimMouseEvent, Mouse } from 'src/types';\nimport { DialogTypeEnum } from 'src/types/ui';\nimport { getMouse, getItemAtTile, generateId, incrementZoom, decrementZoom } from 'src/utils';\nimport { useResizeObserver } from 'src/hooks/useResizeObserver';\nimport { useScene } from 'src/hooks/useScene';\nimport { useHistory } from 'src/hooks/useHistory';\nimport { HOTKEY_PROFILES } from 'src/config/hotkeys';\nimport { TEXTBOX_DEFAULTS } from 'src/config';\nimport { Cursor } from './modes/Cursor';\nimport { DragItems } from './modes/DragItems';\nimport { DrawRectangle } from './modes/Rectangle/DrawRectangle';\nimport { TransformRectangle } from './modes/Rectangle/TransformRectangle';\nimport { Connector } from './modes/Connector';\nimport { Pan } from './modes/Pan';\nimport { PlaceIcon } from './modes/PlaceIcon';\nimport { TextBox } from './modes/TextBox';\nimport { Lasso } from './modes/Lasso';\nimport { FreehandLasso } from './modes/FreehandLasso';\nimport { usePanHandlers } from './usePanHandlers';\n\ninterface PendingMouseUpdate {\n mouse: Mouse;\n event: SlimMouseEvent;\n}\n\nconst useRAFThrottle = () => {\n const rafIdRef = useRef(null);\n const pendingUpdateRef = useRef(null);\n const callbackRef = useRef<((update: PendingMouseUpdate) => void) | null>(null);\n\n const scheduleUpdate = useCallback((mouse: Mouse, event: SlimMouseEvent, callback: (update: PendingMouseUpdate) => void) => {\n pendingUpdateRef.current = { mouse, event };\n callbackRef.current = callback;\n\n if (rafIdRef.current === null) {\n rafIdRef.current = requestAnimationFrame(() => {\n rafIdRef.current = null;\n if (pendingUpdateRef.current && callbackRef.current) {\n callbackRef.current(pendingUpdateRef.current);\n pendingUpdateRef.current = null;\n }\n });\n }\n }, []);\n\n const flushUpdate = useCallback(() => {\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n rafIdRef.current = null;\n }\n if (pendingUpdateRef.current && callbackRef.current) {\n callbackRef.current(pendingUpdateRef.current);\n pendingUpdateRef.current = null;\n }\n }, []);\n\n const cleanup = useCallback(() => {\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n rafIdRef.current = null;\n }\n pendingUpdateRef.current = null;\n }, []);\n\n return { scheduleUpdate, flushUpdate, cleanup };\n};\n\nconst modes: { [k in string]: ModeActions } = {\n CURSOR: Cursor,\n DRAG_ITEMS: DragItems,\n 'RECTANGLE.DRAW': DrawRectangle,\n 'RECTANGLE.TRANSFORM': TransformRectangle,\n CONNECTOR: Connector,\n PAN: Pan,\n PLACE_ICON: PlaceIcon,\n TEXTBOX: TextBox,\n LASSO: Lasso,\n FREEHAND_LASSO: FreehandLasso\n};\n\nconst getModeFunction = (mode: ModeActions, e: SlimMouseEvent) => {\n switch (e.type) {\n case 'mousemove':\n return mode.mousemove;\n case 'mousedown':\n return mode.mousedown;\n case 'mouseup':\n return mode.mouseup;\n default:\n return null;\n }\n};\n\nexport const useInteractionManager = () => {\n const rendererRef = useRef(undefined);\n const reducerTypeRef = useRef(undefined);\n\n const modeType = useUiStateStore((state) => state.mode.type);\n const rendererEl = useUiStateStore((state) => state.rendererEl);\n const editorMode = useUiStateStore((state) => state.editorMode);\n\n const uiStateApi = useUiStateStoreApi();\n const modelStoreApi = useModelStoreApi();\n const scene = useScene();\n const { size: rendererSize } = useResizeObserver(rendererEl);\n const { undo, redo, canUndo, canRedo } = useHistory();\n const { createTextBox } = scene;\n const { handleMouseDown: handlePanMouseDown, handleMouseUp: handlePanMouseUp } = usePanHandlers();\n const { scheduleUpdate, flushUpdate, cleanup } = useRAFThrottle();\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n const uiState = uiStateApi.getState();\n\n if (e.key === 'Escape') {\n e.preventDefault();\n\n if (uiState.itemControls) {\n uiState.actions.setItemControls(null);\n return;\n }\n\n if (uiState.mode.type === 'CONNECTOR') {\n const connectorMode = uiState.mode;\n\n const isConnectionInProgress =\n (uiState.connectorInteractionMode === 'click' && connectorMode.isConnecting) ||\n (uiState.connectorInteractionMode === 'drag' && connectorMode.id !== null);\n\n if (isConnectionInProgress && connectorMode.id) {\n scene.deleteConnector(connectorMode.id);\n\n uiState.actions.setMode({\n type: 'CONNECTOR',\n showCursor: true,\n id: null,\n startAnchor: undefined,\n isConnecting: false\n });\n }\n }\n\n return;\n }\n\n const target = e.target as HTMLElement;\n if (\n target.tagName === 'INPUT' ||\n target.tagName === 'TEXTAREA' ||\n target.contentEditable === 'true' ||\n target.closest('.ql-editor')\n ) {\n return;\n }\n\n const isCtrlOrCmd = e.ctrlKey || e.metaKey;\n\n if (isCtrlOrCmd && e.key.toLowerCase() === 'z' && !e.shiftKey) {\n e.preventDefault();\n if (canUndo) {\n undo();\n }\n }\n\n if (\n isCtrlOrCmd &&\n (e.key.toLowerCase() === 'y' ||\n (e.key.toLowerCase() === 'z' && e.shiftKey))\n ) {\n e.preventDefault();\n if (canRedo) {\n redo();\n }\n }\n\n if (e.key === 'F1') {\n e.preventDefault();\n uiState.actions.setDialog(DialogTypeEnum.HELP);\n }\n\n const hotkeyMapping = HOTKEY_PROFILES[uiState.hotkeyProfile];\n const key = e.key.toLowerCase();\n\n if (key === 'i' && uiState.itemControls && 'id' in uiState.itemControls && uiState.itemControls.type === 'ITEM') {\n e.preventDefault();\n const event = new CustomEvent('quickIconChange');\n window.dispatchEvent(event);\n }\n\n if (hotkeyMapping.select && key === hotkeyMapping.select) {\n e.preventDefault();\n uiState.actions.setMode({\n type: 'CURSOR',\n showCursor: true,\n mousedownItem: null\n });\n } else if (hotkeyMapping.pan && key === hotkeyMapping.pan) {\n e.preventDefault();\n uiState.actions.setMode({\n type: 'PAN',\n showCursor: false\n });\n uiState.actions.setItemControls(null);\n } else if (hotkeyMapping.addItem && key === hotkeyMapping.addItem) {\n e.preventDefault();\n uiState.actions.setItemControls({\n type: 'ADD_ITEM'\n });\n uiState.actions.setMode({\n type: 'PLACE_ICON',\n showCursor: true,\n id: null\n });\n } else if (hotkeyMapping.rectangle && key === hotkeyMapping.rectangle) {\n e.preventDefault();\n uiState.actions.setMode({\n type: 'RECTANGLE.DRAW',\n showCursor: true,\n id: null\n });\n } else if (hotkeyMapping.connector && key === hotkeyMapping.connector) {\n e.preventDefault();\n uiState.actions.setMode({\n type: 'CONNECTOR',\n id: null,\n showCursor: true\n });\n } else if (hotkeyMapping.text && key === hotkeyMapping.text) {\n e.preventDefault();\n const textBoxId = generateId();\n createTextBox({\n ...TEXTBOX_DEFAULTS,\n id: textBoxId,\n tile: uiState.mouse.position.tile\n });\n uiState.actions.setMode({\n type: 'TEXTBOX',\n showCursor: false,\n id: textBoxId\n });\n } else if (hotkeyMapping.lasso && key === hotkeyMapping.lasso) {\n e.preventDefault();\n uiState.actions.setMode({\n type: 'LASSO',\n showCursor: true,\n selection: null,\n isDragging: false\n });\n } else if (hotkeyMapping.freehandLasso && key === hotkeyMapping.freehandLasso) {\n e.preventDefault();\n uiState.actions.setMode({\n type: 'FREEHAND_LASSO',\n showCursor: true,\n path: [],\n selection: null,\n isDragging: false\n });\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n return window.removeEventListener('keydown', handleKeyDown);\n };\n }, [undo, redo, canUndo, canRedo, uiStateApi, createTextBox, scene]);\n\n const processMouseUpdate = useCallback(\n (nextMouse: Mouse, e: SlimMouseEvent) => {\n if (!rendererRef.current) return;\n\n const uiState = uiStateApi.getState();\n const model = modelStoreApi.getState();\n\n const mode = modes[uiState.mode.type];\n const modeFunction = getModeFunction(mode, e);\n\n if (!modeFunction) return;\n\n uiState.actions.setMouse(nextMouse);\n\n const baseState: State = {\n model,\n scene,\n uiState,\n rendererRef: rendererRef.current,\n rendererSize,\n isRendererInteraction: rendererRef.current === e.target\n };\n\n if (reducerTypeRef.current !== uiState.mode.type) {\n const prevReducer = reducerTypeRef.current\n ? modes[reducerTypeRef.current]\n : null;\n\n if (prevReducer && prevReducer.exit) {\n prevReducer.exit(baseState);\n }\n\n if (mode.entry) {\n mode.entry(baseState);\n }\n }\n\n modeFunction(baseState);\n reducerTypeRef.current = uiState.mode.type;\n },\n [uiStateApi, modelStoreApi, scene, rendererSize]\n );\n\n const onMouseEvent = useCallback(\n (e: SlimMouseEvent) => {\n if (!rendererRef.current) return;\n\n if (e.type === 'mousedown' && handlePanMouseDown(e)) {\n return;\n }\n if (e.type === 'mouseup' && handlePanMouseUp(e)) {\n return;\n }\n\n const uiState = uiStateApi.getState();\n\n const nextMouse = getMouse({\n interactiveElement: rendererRef.current,\n zoom: uiState.zoom,\n scroll: uiState.scroll,\n lastMouse: uiState.mouse,\n mouseEvent: e,\n rendererSize\n });\n\n if (e.type === 'mousemove') {\n scheduleUpdate(nextMouse, e, (update) => {\n processMouseUpdate(update.mouse, update.event);\n });\n } else {\n flushUpdate();\n processMouseUpdate(nextMouse, e);\n }\n },\n [uiStateApi, rendererSize, handlePanMouseDown, handlePanMouseUp, scheduleUpdate, flushUpdate, processMouseUpdate]\n );\n\n const onContextMenu = useCallback(\n (e: SlimMouseEvent) => {\n e.preventDefault();\n\n const uiState = uiStateApi.getState();\n\n if (uiState.panSettings.rightClickPan) {\n return;\n }\n\n const itemAtTile = getItemAtTile({\n tile: uiState.mouse.position.tile,\n scene\n });\n\n if (itemAtTile) {\n uiState.actions.setContextMenu({\n type: 'ITEM',\n item: itemAtTile,\n tile: uiState.mouse.position.tile\n });\n } else {\n uiState.actions.setContextMenu({\n type: 'EMPTY',\n tile: uiState.mouse.position.tile\n });\n }\n },\n [uiStateApi, scene]\n );\n\n useEffect(() => {\n if (modeType === 'INTERACTIONS_DISABLED') return;\n\n const el = window;\n\n const onTouchStart = (e: TouchEvent) => {\n onMouseEvent({\n ...e,\n clientX: Math.floor(e.touches[0].clientX),\n clientY: Math.floor(e.touches[0].clientY),\n type: 'mousedown',\n button: 0\n });\n };\n\n const onTouchMove = (e: TouchEvent) => {\n onMouseEvent({\n ...e,\n clientX: Math.floor(e.touches[0].clientX),\n clientY: Math.floor(e.touches[0].clientY),\n type: 'mousemove',\n button: 0\n });\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n onMouseEvent({\n ...e,\n clientX: 0,\n clientY: 0,\n type: 'mouseup',\n button: 0\n });\n };\n\n const onScroll = (e: WheelEvent) => {\n const uiState = uiStateApi.getState();\n const zoomToCursor = uiState.zoomSettings.zoomToCursor;\n const oldZoom = uiState.zoom;\n\n let newZoom: number;\n if (e.deltaY > 0) {\n newZoom = decrementZoom(oldZoom);\n } else {\n newZoom = incrementZoom(oldZoom);\n }\n\n if (newZoom === oldZoom) {\n return;\n }\n\n if (zoomToCursor && rendererRef.current && rendererSize) {\n const rect = rendererRef.current.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n\n const mouseRelativeToCenterX = mouseX - rendererSize.width / 2;\n const mouseRelativeToCenterY = mouseY - rendererSize.height / 2;\n\n const worldX = (mouseRelativeToCenterX - uiState.scroll.position.x) / oldZoom;\n const worldY = (mouseRelativeToCenterY - uiState.scroll.position.y) / oldZoom;\n\n const newScrollX = mouseRelativeToCenterX - worldX * newZoom;\n const newScrollY = mouseRelativeToCenterY - worldY * newZoom;\n\n uiState.actions.setZoom(newZoom);\n uiState.actions.setScroll({\n position: {\n x: newScrollX,\n y: newScrollY\n },\n offset: uiState.scroll.offset\n });\n } else {\n uiState.actions.setZoom(newZoom);\n }\n };\n\n el.addEventListener('mousemove', onMouseEvent);\n el.addEventListener('mousedown', onMouseEvent);\n el.addEventListener('mouseup', onMouseEvent);\n el.addEventListener('contextmenu', onContextMenu);\n el.addEventListener('touchstart', onTouchStart);\n el.addEventListener('touchmove', onTouchMove);\n el.addEventListener('touchend', onTouchEnd);\n rendererEl?.addEventListener('wheel', onScroll, { passive: true });\n\n return () => {\n el.removeEventListener('mousemove', onMouseEvent);\n el.removeEventListener('mousedown', onMouseEvent);\n el.removeEventListener('mouseup', onMouseEvent);\n el.removeEventListener('contextmenu', onContextMenu);\n el.removeEventListener('touchstart', onTouchStart);\n el.removeEventListener('touchmove', onTouchMove);\n el.removeEventListener('touchend', onTouchEnd);\n rendererEl?.removeEventListener('wheel', onScroll);\n cleanup();\n };\n }, [\n editorMode,\n modeType,\n onMouseEvent,\n onContextMenu,\n rendererEl,\n rendererSize,\n uiStateApi,\n cleanup\n ]);\n\n const setInteractionsElement = useCallback((element: HTMLElement) => {\n rendererRef.current = element;\n }, []);\n\n return {\n setInteractionsElement\n };\n};\n" }, { "path": "packages/fossflow-lib/src/interaction/usePanHandlers.ts", "content": "import { useCallback, useEffect, useRef } from 'react';\nimport { useUiStateStore, useUiStateStoreApi } from 'src/stores/uiStateStore';\nimport { CoordsUtils, getItemAtTile } from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\nimport { SlimMouseEvent } from 'src/types';\n\nexport const usePanHandlers = () => {\n const modeType = useUiStateStore((state) => state.mode.type);\n const actions = useUiStateStore((state) => state.actions);\n const panSettings = useUiStateStore((state) => state.panSettings);\n const rendererEl = useUiStateStore((state) => state.rendererEl);\n const mouseTile = useUiStateStore((state) => state.mouse.position.tile);\n const uiStateApi = useUiStateStoreApi();\n const scene = useScene();\n const isPanningRef = useRef(false);\n const panMethodRef = useRef(null);\n\n const startPan = useCallback((method: string) => {\n if (modeType !== 'PAN') {\n isPanningRef.current = true;\n panMethodRef.current = method;\n actions.setMode({\n type: 'PAN',\n showCursor: false\n });\n }\n }, [modeType, actions]);\n\n const endPan = useCallback(() => {\n if (isPanningRef.current) {\n isPanningRef.current = false;\n panMethodRef.current = null;\n actions.setMode({\n type: 'CURSOR',\n showCursor: true,\n mousedownItem: null\n });\n }\n }, [actions]);\n\n const isEmptyArea = useCallback((e: SlimMouseEvent): boolean => {\n if (!rendererEl || e.target !== rendererEl) return false;\n\n const itemAtTile = getItemAtTile({\n tile: mouseTile,\n scene\n });\n\n return !itemAtTile;\n }, [rendererEl, mouseTile, scene]);\n\n const handleMouseDown = useCallback((e: SlimMouseEvent): boolean => {\n if (e.button === 1 && panSettings.middleClickPan) {\n e.preventDefault();\n startPan('middle');\n return true;\n }\n\n if (e.button === 2 && panSettings.rightClickPan) {\n e.preventDefault();\n startPan('right');\n return true;\n }\n\n if (e.button === 0) {\n if (panSettings.ctrlClickPan && e.ctrlKey) {\n e.preventDefault();\n startPan('ctrl');\n return true;\n }\n\n if (panSettings.altClickPan && e.altKey) {\n e.preventDefault();\n startPan('alt');\n return true;\n }\n\n if (panSettings.emptyAreaClickPan && isEmptyArea(e)) {\n startPan('empty');\n return true;\n }\n }\n\n return false;\n }, [panSettings, startPan, isEmptyArea]);\n\n const handleMouseUp = useCallback((e: SlimMouseEvent): boolean => {\n if (isPanningRef.current) {\n endPan();\n return true;\n }\n return false;\n }, [endPan]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n const target = e.target as HTMLElement;\n if (\n target.tagName === 'INPUT' ||\n target.tagName === 'TEXTAREA' ||\n target.contentEditable === 'true' ||\n target.closest('.ql-editor')\n ) {\n return;\n }\n\n const currentState = uiStateApi.getState();\n const currentPanSettings = currentState.panSettings;\n const speed = currentPanSettings.keyboardPanSpeed;\n let dx = 0;\n let dy = 0;\n\n if (currentPanSettings.arrowKeysPan) {\n if (e.key === 'ArrowUp') {\n dy = speed;\n e.preventDefault();\n } else if (e.key === 'ArrowDown') {\n dy = -speed;\n e.preventDefault();\n } else if (e.key === 'ArrowLeft') {\n dx = speed;\n e.preventDefault();\n } else if (e.key === 'ArrowRight') {\n dx = -speed;\n e.preventDefault();\n }\n }\n\n if (currentPanSettings.wasdPan) {\n const key = e.key.toLowerCase();\n if (key === 'w') {\n dy = speed;\n e.preventDefault();\n } else if (key === 's') {\n dy = -speed;\n e.preventDefault();\n } else if (key === 'a') {\n dx = speed;\n e.preventDefault();\n } else if (key === 'd') {\n dx = -speed;\n e.preventDefault();\n }\n }\n\n if (currentPanSettings.ijklPan) {\n const key = e.key.toLowerCase();\n if (key === 'i') {\n dy = speed;\n e.preventDefault();\n } else if (key === 'k') {\n dy = -speed;\n e.preventDefault();\n } else if (key === 'j') {\n dx = speed;\n e.preventDefault();\n } else if (key === 'l') {\n dx = -speed;\n e.preventDefault();\n }\n }\n\n if (dx !== 0 || dy !== 0) {\n const currentScroll = currentState.scroll;\n const newPosition = CoordsUtils.add(\n currentScroll.position,\n { x: dx, y: dy }\n );\n currentState.actions.setScroll({\n position: newPosition,\n offset: currentScroll.offset\n });\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [uiStateApi]);\n\n return {\n handleMouseDown,\n handleMouseUp,\n isPanning: isPanningRef.current\n };\n};\n" }, { "path": "packages/fossflow-lib/src/module.d.ts", "content": "declare module '*.svg' {\n const content: React.FunctionComponent>;\n export default content;\n}\n" }, { "path": "packages/fossflow-lib/src/schemas/__tests__/colors.test.ts", "content": "import { colorSchema, colorsSchema } from '../colors';\n\ndescribe('colorSchema', () => {\n it('validates a correct color', () => {\n const valid = { id: 'color1', value: '#123456' };\n expect(colorSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if value is too long', () => {\n const invalid = { id: 'color1', value: '#1234567A' };\n const result = colorSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('value');\n })\n ).toBe(true);\n }\n });\n});\n\ndescribe('colorsSchema', () => {\n it('validates an array of colors', () => {\n const valid = [\n { id: 'color1', value: '#000000' },\n { id: 'color2', value: '#ffffff' }\n ];\n expect(colorsSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if any color is invalid', () => {\n const invalid = [\n { id: 'color1', value: '#000000' },\n { id: 'color2', value: '#1234567A' }\n ];\n const result = colorsSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('value');\n })\n ).toBe(true);\n }\n });\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/__tests__/connector.test.ts", "content": "import { anchorSchema, connectorSchema } from '../connector';\n\ndescribe('anchorSchema', () => {\n it('validates a correct anchor', () => {\n const valid = { id: 'a1', ref: { item: 'item1' } };\n expect(anchorSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if id is missing', () => {\n const invalid = { ref: { item: 'item1' } };\n const result = anchorSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('id');\n })\n ).toBe(true);\n }\n });\n});\n\ndescribe('connectorSchema', () => {\n it('validates a correct connector', () => {\n const valid = { id: 'c1', anchors: [{ id: 'a1', ref: { item: 'item1' } }] };\n expect(connectorSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if anchors is missing', () => {\n const invalid = { id: 'c1' };\n const result = connectorSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('anchors');\n })\n ).toBe(true);\n }\n });\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/__tests__/icons.test.ts", "content": "import { iconSchema, iconsSchema } from '../icons';\n\ndescribe('iconSchema', () => {\n it('validates a correct icon', () => {\n const valid = { id: 'icon1', name: 'Icon', url: 'http://test.com' };\n expect(iconSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if required fields are missing', () => {\n const invalid = { name: 'Icon' };\n const result = iconSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('id');\n })\n ).toBe(true);\n }\n });\n});\n\ndescribe('iconsSchema', () => {\n it('validates an array of icons', () => {\n const valid = [\n { id: 'icon1', name: 'Icon', url: 'http://test.com' },\n { id: 'icon2', name: 'Icon2', url: 'http://test2.com' }\n ];\n expect(iconsSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if any icon is invalid', () => {\n const invalid = [\n { id: 'icon1', name: 'Icon', url: 'http://test.com' },\n { name: 'MissingId' }\n ];\n const result = iconsSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('id');\n })\n ).toBe(true);\n }\n });\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/__tests__/modelItems.test.ts", "content": "import { modelItemSchema, modelItemsSchema } from '../modelItems';\n\ndescribe('modelItemSchema', () => {\n it('validates a correct model item', () => {\n const valid = {\n id: 'item1',\n name: 'Test',\n icon: 'icon1',\n description: 'desc'\n };\n expect(modelItemSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if required fields are missing', () => {\n const invalid = { name: 'Test' };\n const result = modelItemSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('id');\n })\n ).toBe(true);\n }\n });\n});\n\ndescribe('modelItemsSchema', () => {\n it('validates an array of model items', () => {\n const valid = [\n { id: 'item1', name: 'Test1' },\n { id: 'item2', name: 'Test2', icon: 'icon2' }\n ];\n expect(modelItemsSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if any item is invalid', () => {\n const invalid = [{ id: 'item1', name: 'Test1' }, { name: 'MissingId' }];\n const result = modelItemsSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('id');\n })\n ).toBe(true);\n }\n });\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/__tests__/rectangle.test.ts", "content": "import { rectangleSchema } from '../rectangle';\n\ndescribe('rectangleSchema', () => {\n it('validates a correct rectangle', () => {\n const valid = { id: 'rect1', from: { x: 0, y: 0 }, to: { x: 1, y: 1 } };\n expect(rectangleSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if from is missing', () => {\n const invalid = { id: 'rect1', to: { x: 1, y: 1 } };\n const result = rectangleSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('from');\n })\n ).toBe(true);\n }\n });\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/__tests__/textBox.test.ts", "content": "import { textBoxSchema } from '../textBox';\n\ndescribe('textBoxSchema', () => {\n it('validates a correct text box', () => {\n const valid = { id: 'tb1', tile: { x: 0, y: 0 }, content: 'Text' };\n expect(textBoxSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if content is missing', () => {\n const invalid = { id: 'tb1', tile: { x: 0, y: 0 } };\n const result = textBoxSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('content');\n })\n ).toBe(true);\n }\n });\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/__tests__/validation.test.ts", "content": "import { produce } from 'immer';\nimport { Connector, ViewItem } from 'src/types';\nimport { model as modelFixture } from '../../fixtures/model';\nimport { validateModel } from '../validation';\n\ndescribe('Model validation works correctly', () => {\n test('Model fixture is valid', () => {\n const issues = validateModel(modelFixture);\n\n expect(issues.length).toStrictEqual(0);\n });\n\n test('Connector with anchor that references an invalid item fails validation', () => {\n const invalidConnector: Connector = {\n id: 'invalidConnector',\n color: 'color1',\n anchors: [\n { id: 'testAnch', ref: { item: 'node1' } },\n { id: 'testAnch2', ref: { item: 'invalidItem' } }\n ]\n };\n\n const model = produce(modelFixture, (draft) => {\n draft.views[0].connectors?.push(invalidConnector);\n });\n\n const issues = validateModel(model);\n\n expect(issues[0].type).toStrictEqual('INVALID_ANCHOR_TO_VIEW_ITEM_REF');\n });\n\n test('Connector with less than two anchors fails validation', () => {\n const invalidConnector: Connector = {\n id: 'invalidConnector',\n color: 'color1',\n anchors: []\n };\n\n const model = produce(modelFixture, (draft) => {\n draft.views[0].connectors?.push(invalidConnector);\n });\n\n const issues = validateModel(model);\n\n expect(issues[0].type).toStrictEqual('CONNECTOR_TOO_FEW_ANCHORS');\n });\n\n test('Connector with anchor that references an invalid anchor fails validation', () => {\n const invalidConnector: Connector = {\n id: 'invalidConnector',\n color: 'color1',\n anchors: [\n { id: 'testAnch1', ref: { anchor: 'invalidAnchor' } },\n { id: 'testAnch2', ref: { anchor: 'anchor1' } }\n ]\n };\n\n const model = produce(modelFixture, (draft) => {\n draft.views[0].connectors?.push(invalidConnector);\n });\n\n const issues = validateModel(model);\n\n expect(issues[0].type).toStrictEqual('INVALID_ANCHOR_TO_ANCHOR_REF');\n });\n\n test('An invalid view item fails validation', () => {\n const invalidItem: ViewItem = {\n id: 'invalidItem',\n tile: {\n x: 0,\n y: 0\n }\n };\n\n const model = produce(modelFixture, (draft) => {\n draft.views[0].items.push(invalidItem);\n });\n\n const issues = validateModel(model);\n\n expect(issues[0].type).toStrictEqual('INVALID_VIEW_ITEM_TO_MODEL_ITEM_REF');\n });\n\n test('A connector with an invalid color fails validation', () => {\n const invalidConnector: Connector = {\n id: 'invalidConnector',\n color: 'invalidColor',\n anchors: []\n };\n\n const model = produce(modelFixture, (draft) => {\n draft.views[0].connectors?.push(invalidConnector);\n });\n\n const issues = validateModel(model);\n\n expect(issues[0].type).toStrictEqual('INVALID_CONNECTOR_COLOR_REF');\n });\n\n test('A rectangle with an invalid color fails validation', () => {\n const invalidRectangle = {\n id: 'invalidRectangle',\n color: 'invalidColor',\n from: { x: 0, y: 0 },\n to: { x: 2, y: 2 }\n };\n\n const model = produce(modelFixture, (draft) => {\n draft.views[0].rectangles?.push(invalidRectangle);\n });\n\n const issues = validateModel(model);\n\n expect(issues[0].type).toStrictEqual('INVALID_RECTANGLE_COLOR_REF');\n });\n});\n\ndescribe('modelSchema Zod validation', () => {\n const { model } = require('../../fixtures/model');\n\n test('Valid model passes modelSchema validation', () => {\n const result = require('../model').modelSchema.safeParse(model);\n expect(result.success).toBe(true);\n });\n\n test('Model missing required title fails modelSchema validation', () => {\n const { ...invalidModel } = model;\n delete invalidModel.title;\n const result = require('../model').modelSchema.safeParse(invalidModel);\n expect(result.success).toBe(false);\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('title');\n })\n ).toBe(true);\n });\n\n test('Model with invalid color reference fails modelSchema validation', () => {\n const { ...invalidModel } = model;\n // Add a rectangle with an invalid color to the first view\n invalidModel.views = invalidModel.views.map((view: any, i: number) => {\n return i === 0\n ? {\n ...view,\n rectangles: [\n ...(view.rectangles || []),\n {\n id: 'rect-invalid',\n color: 'notAColor',\n from: { x: 0, y: 0 },\n to: { x: 1, y: 1 }\n }\n ]\n }\n : view;\n });\n const result = require('../model').modelSchema.safeParse(invalidModel);\n expect(result.success).toBe(false);\n if (!result.success) {\n // Print all issues for debugging\n console.log('Zod issues:', result.error.issues);\n expect(\n result.error.issues.some((issue: any) => {\n return (\n issue.message ===\n 'Rectangle references a color that does not exist in the model.' &&\n issue.params &&\n issue.params.rectangle === 'rect-invalid'\n );\n })\n ).toBe(true);\n }\n });\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/__tests__/views.test.ts", "content": "import { viewItemSchema, viewSchema, viewsSchema } from '../views';\n\ndescribe('viewItemSchema', () => {\n it('validates a correct view item', () => {\n const valid = { id: 'item1', tile: { x: 1, y: 2 } };\n expect(viewItemSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if required fields are missing', () => {\n const invalid = { tile: { x: 1, y: 2 } };\n const result = viewItemSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('id');\n })\n ).toBe(true);\n }\n });\n});\n\ndescribe('viewSchema', () => {\n it('validates a correct view', () => {\n const valid = {\n id: 'view1',\n name: 'View',\n items: [{ id: 'item1', tile: { x: 0, y: 0 } }]\n };\n expect(viewSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if items is missing', () => {\n const invalid = { id: 'view1', name: 'View' };\n const result = viewSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('items');\n })\n ).toBe(true);\n }\n });\n});\n\ndescribe('viewsSchema', () => {\n it('validates an array of views', () => {\n const valid = [\n {\n id: 'view1',\n name: 'View',\n items: [{ id: 'item1', tile: { x: 0, y: 0 } }]\n }\n ];\n expect(viewsSchema.safeParse(valid).success).toBe(true);\n });\n it('fails if any view is invalid', () => {\n const invalid = [\n {\n id: 'view1',\n name: 'View',\n items: [{ id: 'item1', tile: { x: 0, y: 0 } }]\n },\n { id: 'view2', name: 'View2' }\n ];\n const result = viewsSchema.safeParse(invalid);\n expect(result.success).toBe(false);\n if (!result.success) {\n expect(\n result.error.issues.some((issue: any) => {\n return issue.path.includes('items');\n })\n ).toBe(true);\n }\n });\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/colors.ts", "content": "import { z } from 'zod';\nimport { id } from './common';\n\nexport const colorSchema = z.object({\n id,\n value: z.string().max(7)\n});\n\nexport const colorsSchema = z.array(colorSchema);\n" }, { "path": "packages/fossflow-lib/src/schemas/common.ts", "content": "import { z } from 'zod';\n\nexport const coords = z.object({\n x: z.number(),\n y: z.number()\n});\n\nexport const id = z.string();\nexport const color = z.string();\n\nexport const constrainedStrings = {\n name: z.string().max(100),\n description: z.string().max(1000)\n};\n" }, { "path": "packages/fossflow-lib/src/schemas/connector.ts", "content": "import { z } from 'zod';\nimport { coords, id, constrainedStrings } from './common';\n\nexport const connectorStyleOptions = ['SOLID', 'DOTTED', 'DASHED'] as const;\nexport const connectorLineTypeOptions = ['SINGLE', 'DOUBLE', 'DOUBLE_WITH_CIRCLE'] as const;\n\nexport const connectorLabelSchema = z.object({\n id,\n text: constrainedStrings.description,\n position: z.number().min(0).max(100), // Percentage along the path (0-100)\n height: z.number().optional(), // Vertical offset\n line: z.enum(['1', '2']).optional(), // Which line for double line types (defaults to '1')\n showLine: z.boolean().optional() // Show the dotted line connecting label to connector (defaults to true)\n});\n\nexport const anchorSchema = z.object({\n id,\n ref: z\n .object({\n item: id,\n anchor: id,\n tile: coords\n })\n .partial()\n});\n\nexport const connectorSchema = z.object({\n id,\n // Legacy label fields (for backward compatibility)\n description: constrainedStrings.description.optional(),\n startLabel: constrainedStrings.description.optional(),\n endLabel: constrainedStrings.description.optional(),\n startLabelHeight: z.number().optional(),\n centerLabelHeight: z.number().optional(),\n endLabelHeight: z.number().optional(),\n // New flexible labels array\n labels: z.array(connectorLabelSchema).max(256).optional(),\n color: id.optional(),\n customColor: z.string().optional(), // For custom RGB colors\n width: z.number().optional(),\n style: z.enum(connectorStyleOptions).optional(),\n lineType: z.enum(connectorLineTypeOptions).optional(),\n showArrow: z.boolean().optional(),\n anchors: z.array(anchorSchema)\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/icons.ts", "content": "import { z } from 'zod';\nimport { id, constrainedStrings } from './common';\n\nexport const iconSchema = z.object({\n id,\n name: constrainedStrings.name,\n url: z.string(),\n collection: constrainedStrings.name.optional(),\n isIsometric: z.boolean().optional(),\n scale: z.number().min(0.1).max(3).optional()\n});\n\nexport const iconsSchema = z.array(iconSchema);\n" }, { "path": "packages/fossflow-lib/src/schemas/index.ts", "content": "export * from './model';\nexport * from './colors';\nexport * from './icons';\nexport * from './modelItems';\nexport * from './views';\nexport * from './connector';\nexport * from './rectangle';\nexport * from './textBox';\n" }, { "path": "packages/fossflow-lib/src/schemas/model.ts", "content": "import { z } from 'zod';\nimport { INITIAL_DATA } from '../config';\nimport { constrainedStrings } from './common';\nimport { modelItemsSchema } from './modelItems';\nimport { viewsSchema } from './views';\nimport { validateModel } from './validation';\nimport { iconsSchema } from './icons';\nimport { colorsSchema } from './colors';\n\nexport const modelSchema = z\n .object({\n version: z.string().max(10).optional(),\n title: constrainedStrings.name,\n description: constrainedStrings.description.optional(),\n items: modelItemsSchema,\n views: viewsSchema,\n icons: iconsSchema,\n colors: colorsSchema\n })\n .superRefine((model, ctx) => {\n const issues = validateModel({ ...INITIAL_DATA, ...model });\n\n issues.forEach((issue) => {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n params: issue.params,\n message: issue.message\n });\n });\n });\n" }, { "path": "packages/fossflow-lib/src/schemas/modelItems.ts", "content": "import { z } from 'zod';\nimport { id, constrainedStrings } from './common';\n\nexport const modelItemSchema = z.object({\n id,\n name: constrainedStrings.name,\n description: constrainedStrings.description.optional(),\n icon: id.optional()\n});\n\nexport const modelItemsSchema = z.array(modelItemSchema);\n" }, { "path": "packages/fossflow-lib/src/schemas/rectangle.ts", "content": "import { z } from 'zod';\nimport { id, coords } from './common';\n\nexport const rectangleSchema = z.object({\n id,\n color: id.optional(),\n customColor: z.string().optional(), // For custom RGB colors\n from: coords,\n to: coords\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/textBox.ts", "content": "import { z } from 'zod';\nimport { ProjectionOrientationEnum } from 'src/types/common';\nimport { id, coords, constrainedStrings } from './common';\n\nexport const textBoxSchema = z.object({\n id,\n tile: coords,\n content: constrainedStrings.name,\n fontSize: z.number().optional(),\n orientation: z\n .union([\n z.literal(ProjectionOrientationEnum.X),\n z.literal(ProjectionOrientationEnum.Y)\n ])\n .optional()\n});\n" }, { "path": "packages/fossflow-lib/src/schemas/validation.ts", "content": "import type {\n Model,\n ModelItem,\n Connector,\n ConnectorAnchor,\n View,\n Rectangle\n} from 'src/types';\nimport { getAllAnchors, getItemByIdOrThrow } from 'src/utils';\n\ntype IssueType =\n | {\n type: 'INVALID_ANCHOR_TO_VIEW_ITEM_REF';\n params: {\n anchor: string;\n viewItem: string;\n view: string;\n connector: string;\n };\n }\n | {\n type: 'INVALID_CONNECTOR_COLOR_REF';\n params: {\n connector: string;\n view: string;\n color: string;\n };\n }\n | {\n type: 'INVALID_RECTANGLE_COLOR_REF';\n params: {\n rectangle: string;\n view: string;\n color: string;\n };\n }\n | {\n type: 'INVALID_ANCHOR_TO_ANCHOR_REF';\n params: {\n srcAnchor: string;\n destAnchor: string;\n view: string;\n connector: string;\n };\n }\n | {\n type: 'INVALID_VIEW_ITEM_TO_MODEL_ITEM_REF';\n params: {\n view: string;\n modelItem: string;\n };\n }\n | {\n type: 'INVALID_ANCHOR_REF';\n params: {\n anchor: string;\n view: string;\n connector: string;\n };\n }\n | {\n type: 'INVALID_MODEL_TO_ICON_REF';\n params: {\n modelItem: string;\n icon: string;\n };\n }\n | {\n type: 'CONNECTOR_TOO_FEW_ANCHORS';\n params: {\n connector: string;\n view: string;\n };\n };\n\ntype Issue = IssueType & {\n message: string;\n};\n\nexport const validateConnectorAnchor = (\n anchor: ConnectorAnchor,\n ctx: {\n view: View;\n connector: Connector;\n allAnchors: ConnectorAnchor[];\n }\n): Issue[] => {\n const issues: Issue[] = [];\n\n if (Object.keys(anchor.ref).length !== 1) {\n issues.push({\n type: 'INVALID_ANCHOR_REF',\n params: {\n anchor: anchor.id,\n view: ctx.view.id,\n connector: ctx.connector.id\n },\n message:\n 'Connector includes an anchor that references more than one item. An anchor can only reference one item.'\n });\n }\n\n if (anchor.ref.item) {\n try {\n getItemByIdOrThrow(ctx.view.items, anchor.ref.item);\n } catch (e) {\n issues.push({\n type: 'INVALID_ANCHOR_TO_VIEW_ITEM_REF',\n params: {\n anchor: anchor.id,\n viewItem: anchor.ref.item,\n view: ctx.view.id,\n connector: ctx.connector.id\n },\n message:\n 'Connector includes an anchor that references an item that does not exist in this view.'\n });\n }\n }\n\n if (anchor.ref.anchor) {\n const targetAnchorId = ctx.allAnchors\n .map(({ id }) => {\n return id;\n })\n .includes(anchor.ref.anchor);\n\n if (!targetAnchorId) {\n issues.push({\n type: 'INVALID_ANCHOR_TO_ANCHOR_REF',\n params: {\n destAnchor: anchor.id,\n srcAnchor: anchor.ref.anchor,\n view: ctx.view.id,\n connector: ctx.connector.id\n },\n message:\n 'Connector includes an anchor that references another connector anchor that does not exist in this view.'\n });\n }\n }\n\n return issues;\n};\n\nexport const validateConnector = (\n connector: Connector,\n ctx: {\n view: View;\n model: Model;\n allAnchors: ConnectorAnchor[];\n }\n): Issue[] => {\n const issues: Issue[] = [];\n\n if (connector.color) {\n try {\n getItemByIdOrThrow(ctx.model.colors, connector.color);\n } catch (e) {\n issues.push({\n type: 'INVALID_CONNECTOR_COLOR_REF',\n params: {\n connector: connector.id,\n view: ctx.view.id,\n color: connector.color\n },\n message:\n 'Connector references a color that does not exist in the model.'\n });\n }\n }\n\n if (connector.anchors.length < 2) {\n issues.push({\n type: 'CONNECTOR_TOO_FEW_ANCHORS',\n params: {\n connector: connector.id,\n view: ctx.view.id\n },\n message:\n 'Connector must have at least two anchors. One for the source and one for the target.'\n });\n }\n\n const { anchors } = connector;\n\n anchors.forEach((anchor) => {\n const anchorIssues = validateConnectorAnchor(anchor, {\n view: ctx.view,\n connector,\n allAnchors: ctx.allAnchors\n });\n\n issues.push(...anchorIssues);\n });\n\n return issues;\n};\n\nexport const validateRectangle = (\n rectangle: Rectangle,\n ctx: { view: View; model: Model }\n): Issue[] => {\n const issues: Issue[] = [];\n\n if (rectangle.color) {\n try {\n getItemByIdOrThrow(ctx.model.colors, rectangle.color);\n } catch (e) {\n issues.push({\n type: 'INVALID_RECTANGLE_COLOR_REF',\n params: {\n rectangle: rectangle.id,\n view: ctx.view.id,\n color: rectangle.color\n },\n message:\n 'Rectangle references a color that does not exist in the model.'\n });\n }\n }\n\n return issues;\n};\n\nexport const validateView = (view: View, ctx: { model: Model }): Issue[] => {\n const issues: Issue[] = [];\n\n if (view.connectors) {\n const allAnchors = getAllAnchors(view.connectors);\n\n view.connectors.forEach((connector) => {\n issues.push(\n ...validateConnector(connector, {\n view,\n model: ctx.model,\n allAnchors\n })\n );\n });\n }\n\n if (view.rectangles) {\n view.rectangles.forEach((rectangle) => {\n issues.push(\n ...validateRectangle(rectangle, {\n view,\n model: ctx.model\n })\n );\n });\n }\n\n view.items.forEach((viewItem) => {\n try {\n getItemByIdOrThrow(ctx.model.items, viewItem.id);\n } catch (e) {\n issues.push({\n type: 'INVALID_VIEW_ITEM_TO_MODEL_ITEM_REF',\n params: {\n modelItem: viewItem.id,\n view: view.id\n },\n message:\n 'Invalid item in view. The item references a non-existant item in the model.'\n });\n }\n });\n\n return issues;\n};\n\nexport const validateModelItem = (\n modelItem: ModelItem,\n ctx: {\n model: Model;\n }\n): Issue[] => {\n const issues: Issue[] = [];\n\n if (!modelItem.icon) return issues;\n\n try {\n getItemByIdOrThrow(ctx.model.icons, modelItem.icon);\n } catch (e) {\n issues.push({\n type: 'INVALID_MODEL_TO_ICON_REF',\n params: {\n modelItem: modelItem.id,\n icon: modelItem.icon\n },\n message:\n 'Invalid item found in the model. The item references an icon that does not exist.'\n });\n }\n\n return issues;\n};\n\nexport const validateModel = (model: Model): Issue[] => {\n const issues: Issue[] = [];\n\n model.items.forEach((modelItem) => {\n issues.push(...validateModelItem(modelItem, { model }));\n });\n\n model.views.forEach((view) => {\n issues.push(...validateView(view, { model }));\n });\n\n return issues;\n};\n" }, { "path": "packages/fossflow-lib/src/schemas/views.ts", "content": "import { z } from 'zod';\nimport { id, constrainedStrings, coords } from './common';\nimport { rectangleSchema } from './rectangle';\nimport { connectorSchema } from './connector';\nimport { textBoxSchema } from './textBox';\n\nexport const viewItemSchema = z.object({\n id,\n tile: coords,\n labelHeight: z.number().optional()\n});\n\nexport const viewSchema = z.object({\n id,\n lastUpdated: z.string().datetime().optional(),\n name: constrainedStrings.name,\n description: constrainedStrings.description.optional(),\n items: z.array(viewItemSchema),\n rectangles: z.array(rectangleSchema).optional(),\n connectors: z.array(connectorSchema).optional(),\n textBoxes: z.array(textBoxSchema).optional()\n});\n\nexport const viewsSchema = z.array(viewSchema);\n" }, { "path": "packages/fossflow-lib/src/standaloneExports.ts", "content": "// This file will be exported as it's own bundle (separate to the main bundle). This is because the main\n// bundle requires `window` to be present and so can't be imported into a Node environment.\nexport const version = PACKAGE_VERSION;\nexport * as reducers from 'src/stores/reducers';\nexport { INITIAL_DATA, INITIAL_SCENE_STATE } from 'src/config';\nexport * from 'src/schemas';\nexport type { IsoflowProps, InitialData } from 'src/types';\nexport * from 'src/types/model';\n\n// Export i18n locales\nexport { default as enUS } from 'src/i18n/en-US';\nexport { default as zhCN } from 'src/i18n/zh-CN';\nexport { default as allLocales } from 'src/i18n';\n" }, { "path": "packages/fossflow-lib/src/stores/localeStore.tsx", "content": "import React, { createContext, useContext, ReactNode } from 'react';\nimport { LocaleProps } from '../types/isoflowProps';\nimport enUS from '../i18n/en-US';\n\nconst LocaleContext = createContext(enUS);\n\ninterface LocaleProviderProps {\n locale: LocaleProps;\n children: ReactNode;\n}\n\nexport const LocaleProvider: React.FC = ({ locale, children }) => {\n return (\n \n {children}\n \n );\n};\n\nexport const useLocale = (): LocaleProps => {\n const context = useContext(LocaleContext);\n if (!context) {\n throw new Error('useLocale must be used within a LocaleProvider');\n }\n return context;\n};\n\n// Generic type helper for nested object access\ntype NestedKeyOf = {\n [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object\n ? `${Key}.${NestedKeyOf}`\n : `${Key}`;\n}[keyof ObjectType & (string | number)];\n\n// Overloaded useTranslation function\nexport function useTranslation(): {\n t: (key: NestedKeyOf) => string;\n};\n\nexport function useTranslation(\n namespace: K\n): {\n t: (key: keyof LocaleProps[K]) => string;\n };\n\nexport function useTranslation(namespace?: K) {\n const locale = useLocale();\n \n if (namespace) {\n // Return scoped translation function for specific namespace\n const namespaceData = locale[namespace];\n const t = (key: keyof LocaleProps[K]): string => {\n const value = namespaceData[key];\n return typeof value === 'string' ? value : String(key);\n };\n return { t };\n } else {\n // Return global translation function with dot notation\n const t = (key: NestedKeyOf): string => {\n const parts = key.split('.');\n let current: any = locale;\n \n for (const part of parts) {\n if (current && typeof current === 'object' && part in current) {\n current = current[part];\n } else {\n return key; // Return key if path not found\n }\n }\n \n return typeof current === 'string' ? current : key;\n };\n return { t };\n }\n}\n" }, { "path": "packages/fossflow-lib/src/stores/modelStore.tsx", "content": "import React, { createContext, useRef, useContext } from 'react';\nimport { createStore, useStore } from 'zustand';\nimport { ModelStore, Model } from 'src/types';\nimport { INITIAL_DATA } from 'src/config';\n\nexport interface HistoryState {\n past: Model[];\n present: Model;\n future: Model[];\n maxHistorySize: number;\n}\n\nexport interface ModelStoreWithHistory extends Omit {\n history: HistoryState;\n actions: {\n get: () => ModelStoreWithHistory;\n set: (model: Partial, skipHistory?: boolean) => void;\n undo: () => boolean;\n redo: () => boolean;\n canUndo: () => boolean;\n canRedo: () => boolean;\n saveToHistory: () => void;\n clearHistory: () => void;\n };\n}\n\nconst MAX_HISTORY_SIZE = 50;\n\nconst createHistoryState = (initialModel: Model): HistoryState => {\n return {\n past: [],\n present: initialModel,\n future: [],\n maxHistorySize: MAX_HISTORY_SIZE\n };\n};\n\nconst extractModelData = (state: ModelStoreWithHistory): Model => {\n return {\n version: state.version,\n title: state.title,\n description: state.description,\n colors: state.colors,\n icons: state.icons,\n items: state.items,\n views: state.views\n };\n};\n\nconst initialState = () => {\n return createStore((set, get) => {\n const initialModel = { ...INITIAL_DATA };\n\n const saveToHistory = () => {\n set((state) => {\n const currentModel = extractModelData(state);\n const newPast = [...state.history.past, currentModel];\n\n // Limit history size to prevent memory issues\n if (newPast.length > state.history.maxHistorySize) {\n newPast.shift();\n }\n\n return {\n ...state,\n history: {\n ...state.history,\n past: newPast,\n present: currentModel,\n future: [] // Clear future when new action is performed\n }\n };\n });\n };\n\n const undo = (): boolean => {\n const { history } = get();\n if (history.past.length === 0) return false;\n\n const previous = history.past[history.past.length - 1];\n const newPast = history.past.slice(0, history.past.length - 1);\n\n set((state) => {\n // Capture the actual live state (not stale history.present)\n const currentModel = extractModelData(state);\n return {\n ...previous,\n history: {\n ...state.history,\n past: newPast,\n present: previous,\n future: [currentModel, ...state.history.future]\n }\n };\n });\n\n return true;\n };\n\n const redo = (): boolean => {\n const { history } = get();\n if (history.future.length === 0) return false;\n\n const next = history.future[0];\n const newFuture = history.future.slice(1);\n\n set((state) => {\n // Capture the actual live state (not stale history.present)\n const currentModel = extractModelData(state);\n return {\n ...next,\n history: {\n ...state.history,\n past: [...state.history.past, currentModel],\n present: next,\n future: newFuture\n }\n };\n });\n\n return true;\n };\n\n const canUndo = () => {\n return get().history.past.length > 0;\n };\n const canRedo = () => {\n return get().history.future.length > 0;\n };\n\n const clearHistory = () => {\n const currentState = get();\n const currentModel = extractModelData(currentState);\n\n set((state) => {\n return {\n ...state,\n history: createHistoryState(currentModel)\n };\n });\n };\n\n return {\n ...initialModel,\n history: createHistoryState(initialModel),\n actions: {\n get,\n set: (updates: Partial, skipHistory = false) => {\n if (!skipHistory) {\n saveToHistory();\n }\n set((state) => {\n return { ...state, ...updates };\n });\n },\n undo,\n redo,\n canUndo,\n canRedo,\n saveToHistory,\n clearHistory\n }\n };\n });\n};\n\nconst ModelContext = createContext | null>(\n null\n);\n\ninterface ProviderProps {\n children: React.ReactNode;\n}\n\nexport const ModelProvider = ({ children }: ProviderProps) => {\n const storeRef = useRef | undefined>(undefined);\n\n if (!storeRef.current) {\n storeRef.current = initialState();\n }\n\n return (\n \n {children}\n \n );\n};\n\nexport function useModelStore(\n selector: (state: ModelStoreWithHistory) => T,\n equalityFn?: (left: T, right: T) => boolean\n) {\n const store = useContext(ModelContext);\n\n if (store === null) {\n throw new Error('Missing provider in the tree');\n }\n\n const value = useStore(store, selector, equalityFn);\n return value;\n}\n\nexport function useModelStoreApi() {\n const store = useContext(ModelContext);\n\n if (store === null) {\n throw new Error('Missing provider in the tree');\n }\n\n return store;\n}\n" }, { "path": "packages/fossflow-lib/src/stores/reducers/__tests__/connector.test.ts", "content": "import { \n deleteConnector, \n syncConnector, \n updateConnector, \n createConnector \n} from '../connector';\nimport { State, ViewReducerContext } from '../types';\nimport { Connector, View, Model, Scene } from 'src/types';\n\n// Mock the utility functions\njest.mock('src/utils', () => ({\n getItemByIdOrThrow: jest.fn((items: any[], id: string) => {\n const index = items.findIndex((item: any) => \n (typeof item === 'object' && item.id === id) || item === id\n );\n if (index === -1) {\n throw new Error(`Item with id ${id} not found`);\n }\n return { value: items[index], index };\n }),\n getConnectorPath: jest.fn(({ anchors }) => ({\n tiles: [{ x: 0, y: 0 }, { x: 1, y: 1 }],\n rectangle: {\n from: { x: anchors.from.x || 0, y: anchors.from.y || 0 },\n to: { x: anchors.to.x || 1, y: anchors.to.y || 1 }\n }\n }))\n}));\n\ndescribe('connector reducer', () => {\n let mockState: State;\n let mockContext: ViewReducerContext;\n let mockConnector: Connector;\n let mockView: View;\n\n beforeEach(() => {\n jest.clearAllMocks();\n \n mockConnector = {\n id: 'connector1',\n anchors: {\n from: { id: 'item1', face: 'right', x: 0, y: 0 },\n to: { id: 'item2', face: 'left', x: 2, y: 0 }\n },\n label: 'Test Connection',\n lineType: 'solid',\n color: 'color1'\n };\n\n mockView = {\n id: 'view1',\n name: 'Test View',\n items: [],\n connectors: [mockConnector],\n rectangles: [],\n textBoxes: []\n };\n\n mockState = {\n model: {\n version: '1.0',\n title: 'Test Model',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [mockView]\n },\n scene: {\n viewId: 'view1',\n viewport: { x: 0, y: 0, zoom: 1 },\n grid: { enabled: true, size: 10, style: 'dots' },\n connectors: {\n 'connector1': {\n path: {\n tiles: [],\n rectangle: { from: { x: 0, y: 0 }, to: { x: 2, y: 0 } }\n }\n }\n },\n viewItems: {},\n rectangles: {},\n textBoxes: {}\n }\n };\n\n mockContext = {\n viewId: 'view1',\n state: mockState\n };\n });\n\n describe('deleteConnector', () => {\n it('should delete a connector from both model and scene', () => {\n const result = deleteConnector('connector1', mockContext);\n \n // Check connector is removed from model\n expect(result.model.views[0].connectors).toHaveLength(0);\n \n // Check connector is removed from scene by ID\n expect(result.scene.connectors['connector1']).toBeUndefined();\n });\n\n it('should throw error when connector does not exist', () => {\n expect(() => {\n deleteConnector('nonexistent', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should throw error when view does not exist', () => {\n mockContext.viewId = 'nonexistent';\n expect(() => {\n deleteConnector('connector1', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should handle empty connectors array gracefully', () => {\n mockState.model.views[0].connectors = [];\n mockState.scene.connectors = {};\n \n expect(() => {\n deleteConnector('connector1', mockContext);\n }).toThrow('Item with id connector1 not found');\n });\n\n it('should not affect other connectors when deleting one', () => {\n const connector2: Connector = {\n id: 'connector2',\n anchors: {\n from: { id: 'item3', face: 'top' },\n to: { id: 'item4', face: 'bottom' }\n }\n };\n \n mockState.model.views[0].connectors = [mockConnector, connector2];\n mockState.scene.connectors['connector2'] = { \n path: { tiles: [], rectangle: { from: { x: 1, y: 1 }, to: { x: 2, y: 2 } } }\n };\n \n const result = deleteConnector('connector1', mockContext);\n \n expect(result.model.views[0].connectors).toHaveLength(1);\n expect(result.model.views[0].connectors![0].id).toBe('connector2');\n expect(result.scene.connectors['connector2']).toBeDefined();\n expect(result.scene.connectors['connector1']).toBeUndefined();\n });\n });\n\n describe('syncConnector', () => {\n it('should sync connector path successfully', () => {\n const getConnectorPath = require('src/utils').getConnectorPath;\n \n // Clear previous calls and set up fresh mock\n getConnectorPath.mockClear();\n getConnectorPath.mockReturnValue({\n tiles: [{ x: 0, y: 0 }, { x: 1, y: 1 }],\n rectangle: {\n from: { x: 0, y: 0 },\n to: { x: 2, y: 0 }\n }\n });\n \n const result = syncConnector('connector1', mockContext);\n \n expect(getConnectorPath).toHaveBeenCalled();\n \n expect(result.scene.connectors['connector1'].path).toEqual({\n tiles: [{ x: 0, y: 0 }, { x: 1, y: 1 }],\n rectangle: {\n from: { x: 0, y: 0 },\n to: { x: 2, y: 0 }\n }\n });\n });\n\n it('should handle path calculation errors gracefully', () => {\n const getConnectorPath = require('src/utils').getConnectorPath;\n getConnectorPath.mockImplementationOnce(() => {\n throw new Error('Path calculation failed');\n });\n \n const result = syncConnector('connector1', mockContext);\n \n // Should create empty path on error\n expect(result.scene.connectors['connector1'].path).toEqual({\n tiles: [],\n rectangle: {\n from: { x: 0, y: 0 },\n to: { x: 0, y: 0 }\n }\n });\n });\n\n it('should throw error when connector does not exist', () => {\n expect(() => {\n syncConnector('nonexistent', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should handle connectors with partial anchor data', () => {\n mockConnector.anchors = {\n from: { id: 'item1', face: 'right' },\n to: { id: 'item2', face: 'left' }\n };\n \n const result = syncConnector('connector1', mockContext);\n \n expect(result.scene.connectors['connector1'].path).toBeDefined();\n });\n });\n\n describe('updateConnector', () => {\n it('should update connector properties', () => {\n const updates = {\n id: 'connector1',\n label: 'Updated Connection',\n color: 'color2',\n lineType: 'dashed' as const\n };\n \n const result = updateConnector(updates, mockContext);\n \n expect(result.model.views[0].connectors![0].label).toBe('Updated Connection');\n expect(result.model.views[0].connectors![0].color).toBe('color2');\n expect(result.model.views[0].connectors![0].lineType).toBe('dashed');\n });\n\n it('should sync connector when anchors are updated', () => {\n const updates = {\n id: 'connector1',\n anchors: {\n from: { id: 'item3', face: 'bottom' as const },\n to: { id: 'item4', face: 'top' as const }\n }\n };\n \n const result = updateConnector(updates, mockContext);\n \n expect(result.model.views[0].connectors![0].anchors).toEqual(updates.anchors);\n // Verify sync was called by checking the path was updated\n expect(result.scene.connectors['connector1'].path).toBeDefined();\n });\n\n it('should not sync when anchors are not updated', () => {\n const getConnectorPath = require('src/utils').getConnectorPath;\n getConnectorPath.mockClear();\n \n const updates = {\n id: 'connector1',\n label: 'Just a label update'\n };\n \n updateConnector(updates, mockContext);\n \n // getConnectorPath should not be called when anchors aren't updated\n expect(getConnectorPath).not.toHaveBeenCalled();\n });\n\n it('should throw error when connector does not exist', () => {\n expect(() => {\n updateConnector({ id: 'nonexistent', label: 'test' }, mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should handle empty connectors array', () => {\n mockState.model.views[0].connectors = undefined;\n \n const result = updateConnector({ id: 'connector1', label: 'test' }, mockContext);\n \n // Should return state unchanged when connectors is undefined\n expect(result).toEqual(mockState);\n });\n\n it('should preserve other connector properties when partially updating', () => {\n const updates = {\n id: 'connector1',\n label: 'Partial Update'\n };\n \n const result = updateConnector(updates, mockContext);\n \n // Original properties should be preserved\n expect(result.model.views[0].connectors![0].anchors).toEqual(mockConnector.anchors);\n expect(result.model.views[0].connectors![0].color).toBe(mockConnector.color);\n expect(result.model.views[0].connectors![0].lineType).toBe(mockConnector.lineType);\n // Updated property\n expect(result.model.views[0].connectors![0].label).toBe('Partial Update');\n });\n });\n\n describe('createConnector', () => {\n it('should create a new connector', () => {\n const newConnector: Connector = {\n id: 'connector2',\n anchors: {\n from: { id: 'item5', face: 'right' },\n to: { id: 'item6', face: 'left' }\n },\n label: 'New Connection'\n };\n \n const result = createConnector(newConnector, mockContext);\n \n // Should be added at the beginning (unshift)\n expect(result.model.views[0].connectors).toHaveLength(2);\n expect(result.model.views[0].connectors![0].id).toBe('connector2');\n expect(result.model.views[0].connectors![1].id).toBe('connector1');\n \n // Should sync the new connector\n expect(result.scene.connectors['connector2']).toBeDefined();\n expect(result.scene.connectors['connector2'].path).toBeDefined();\n });\n\n it('should initialize connectors array if undefined', () => {\n mockState.model.views[0].connectors = undefined;\n \n const newConnector: Connector = {\n id: 'connector2',\n anchors: {\n from: { id: 'item5', face: 'right' },\n to: { id: 'item6', face: 'left' }\n }\n };\n \n const result = createConnector(newConnector, mockContext);\n \n expect(result.model.views[0].connectors).toHaveLength(1);\n expect(result.model.views[0].connectors![0].id).toBe('connector2');\n });\n\n it('should handle sync errors when creating connector', () => {\n const getConnectorPath = require('src/utils').getConnectorPath;\n getConnectorPath.mockImplementationOnce(() => {\n throw new Error('Path calculation failed');\n });\n \n const newConnector: Connector = {\n id: 'connector2',\n anchors: {\n from: { id: 'item5', face: 'right' },\n to: { id: 'item6', face: 'left' }\n }\n };\n \n const result = createConnector(newConnector, mockContext);\n \n // Connector should still be created\n expect(result.model.views[0].connectors).toHaveLength(2);\n \n // But with empty path\n expect(result.scene.connectors['connector2'].path).toEqual({\n tiles: [],\n rectangle: {\n from: { x: 0, y: 0 },\n to: { x: 0, y: 0 }\n }\n });\n });\n\n it('should throw error when view does not exist', () => {\n mockContext.viewId = 'nonexistent';\n \n const newConnector: Connector = {\n id: 'connector2',\n anchors: {\n from: { id: 'item5', face: 'right' },\n to: { id: 'item6', face: 'left' }\n }\n };\n \n expect(() => {\n createConnector(newConnector, mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should create connector with all optional properties', () => {\n const newConnector: Connector = {\n id: 'connector2',\n anchors: {\n from: { id: 'item5', face: 'right' },\n to: { id: 'item6', face: 'left' }\n },\n label: 'Full Connector',\n lineType: 'dotted',\n color: 'color3',\n labels: ['Label1', 'Label2']\n };\n \n const result = createConnector(newConnector, mockContext);\n \n const created = result.model.views[0].connectors![0];\n expect(created.label).toBe('Full Connector');\n expect(created.lineType).toBe('dotted');\n expect(created.color).toBe('color3');\n expect(created.labels).toEqual(['Label1', 'Label2']);\n });\n });\n\n describe('edge cases and state immutability', () => {\n it('should not mutate the original state', () => {\n const originalState = JSON.parse(JSON.stringify(mockState));\n \n deleteConnector('connector1', mockContext);\n \n expect(mockState).toEqual(originalState);\n });\n\n it('should handle multiple operations in sequence', () => {\n // Create\n let result = createConnector({\n id: 'connector2',\n anchors: {\n from: { id: 'item3', face: 'top' },\n to: { id: 'item4', face: 'bottom' }\n }\n }, { ...mockContext, state: mockState });\n \n // Update\n result = updateConnector({\n id: 'connector2',\n label: 'Updated'\n }, { ...mockContext, state: result });\n \n // Delete original\n result = deleteConnector('connector1', { ...mockContext, state: result });\n \n expect(result.model.views[0].connectors).toHaveLength(1);\n expect(result.model.views[0].connectors![0].id).toBe('connector2');\n expect(result.model.views[0].connectors![0].label).toBe('Updated');\n });\n\n it('should handle view with multiple connectors', () => {\n const connectors: Connector[] = Array.from({ length: 5 }, (_, i) => ({\n id: `connector${i}`,\n anchors: {\n from: { id: `item${i}`, face: 'right' },\n to: { id: `item${i + 1}`, face: 'left' }\n }\n }));\n \n mockState.model.views[0].connectors = connectors;\n \n const result = deleteConnector('connector2', mockContext);\n \n expect(result.model.views[0].connectors).toHaveLength(4);\n expect(result.model.views[0].connectors!.find(c => c.id === 'connector2')).toBeUndefined();\n });\n });\n});" }, { "path": "packages/fossflow-lib/src/stores/reducers/__tests__/modelItem.test.ts", "content": "import { model as modelFixture } from 'src/fixtures/model';\nimport { ModelItem } from 'src/types';\nimport { getItemByIdOrThrow } from 'src/utils';\nimport {\n createModelItem,\n updateModelItem,\n deleteModelItem\n} from '../modelItem';\n\nconst scene = {\n connectors: {},\n textBoxes: {}\n};\n\ndescribe('Model item reducers works correctly', () => {\n test('Item is added to model correctly', () => {\n const newItem: ModelItem = {\n id: 'newItem',\n name: 'newItem'\n };\n\n const newState = createModelItem(newItem, {\n model: modelFixture,\n scene\n });\n\n expect(newState.model.items[newState.model.items.length - 1]).toStrictEqual(\n newItem\n );\n });\n\n test('Item is updated correctly', () => {\n const nodeId = 'node1';\n const updates: Partial = {\n name: 'test'\n };\n\n const newState = updateModelItem(nodeId, updates, {\n model: modelFixture,\n scene\n });\n\n const updatedItem = getItemByIdOrThrow(newState.model.items, nodeId);\n\n expect(updatedItem.value.name).toBe(updates.name);\n });\n\n test('Item is deleted correctly', () => {\n const nodeId = 'node1';\n\n const newState = deleteModelItem(nodeId, {\n model: modelFixture,\n scene\n });\n\n const deletedItem = () => {\n getItemByIdOrThrow(newState.model.items, nodeId);\n };\n\n expect(deletedItem).toThrow();\n });\n});\n" }, { "path": "packages/fossflow-lib/src/stores/reducers/__tests__/rectangle.test.ts", "content": "import {\n createRectangle,\n updateRectangle,\n deleteRectangle\n} from '../rectangle';\nimport { State, ViewReducerContext } from '../types';\nimport { Rectangle, View } from 'src/types';\n\n// Mock the utility functions\njest.mock('src/utils', () => ({\n getItemByIdOrThrow: jest.fn((items: any[], id: string) => {\n const index = items.findIndex((item: any) => \n (typeof item === 'object' && item.id === id) || item === id\n );\n if (index === -1) {\n throw new Error(`Item with id ${id} not found`);\n }\n return { value: items[index], index };\n })\n}));\n\ndescribe('rectangle reducer', () => {\n let mockState: State;\n let mockContext: ViewReducerContext;\n let mockRectangle: Rectangle;\n let mockView: View;\n\n beforeEach(() => {\n jest.clearAllMocks();\n \n mockRectangle = {\n id: 'rect1',\n position: { x: 0, y: 0 },\n size: { width: 100, height: 50 },\n color: 'color1',\n borderColor: 'color2',\n borderWidth: 2,\n borderStyle: 'solid',\n opacity: 1,\n cornerRadius: 5\n };\n\n mockView = {\n id: 'view1',\n name: 'Test View',\n items: [],\n connectors: [],\n rectangles: [mockRectangle],\n textBoxes: []\n };\n\n mockState = {\n model: {\n version: '1.0',\n title: 'Test Model',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [mockView]\n },\n scene: {\n viewId: 'view1',\n viewport: { x: 0, y: 0, zoom: 1 },\n grid: { enabled: true, size: 10, style: 'dots' },\n connectors: {},\n viewItems: {},\n textBoxes: {}\n }\n };\n\n mockContext = {\n viewId: 'view1',\n state: mockState\n };\n });\n\n describe('updateRectangle', () => {\n it('should update rectangle properties', () => {\n const updates = {\n id: 'rect1',\n size: { width: 200, height: 100 },\n color: 'color3',\n opacity: 0.5\n };\n \n const result = updateRectangle(updates, mockContext);\n \n expect(result.model.views[0].rectangles![0].size).toEqual({ width: 200, height: 100 });\n expect(result.model.views[0].rectangles![0].color).toBe('color3');\n expect(result.model.views[0].rectangles![0].opacity).toBe(0.5);\n });\n\n it('should preserve other properties when partially updating', () => {\n const updates = {\n id: 'rect1',\n color: 'color4'\n };\n \n const result = updateRectangle(updates, mockContext);\n \n // Original properties should be preserved\n expect(result.model.views[0].rectangles![0].position).toEqual(mockRectangle.position);\n expect(result.model.views[0].rectangles![0].size).toEqual(mockRectangle.size);\n expect(result.model.views[0].rectangles![0].borderColor).toBe(mockRectangle.borderColor);\n expect(result.model.views[0].rectangles![0].cornerRadius).toBe(mockRectangle.cornerRadius);\n // Updated property\n expect(result.model.views[0].rectangles![0].color).toBe('color4');\n });\n\n it('should handle undefined rectangles array', () => {\n mockState.model.views[0].rectangles = undefined;\n \n const result = updateRectangle({ id: 'rect1', color: 'test' }, mockContext);\n \n // Should return state unchanged\n expect(result).toEqual(mockState);\n });\n\n it('should throw error when rectangle does not exist', () => {\n expect(() => {\n updateRectangle({ id: 'nonexistent', color: 'test' }, mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should throw error when view does not exist', () => {\n mockContext.viewId = 'nonexistent';\n \n expect(() => {\n updateRectangle({ id: 'rect1', color: 'test' }, mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should update border properties', () => {\n const updates = {\n id: 'rect1',\n borderColor: 'color5',\n borderWidth: 4,\n borderStyle: 'dashed' as const\n };\n \n const result = updateRectangle(updates, mockContext);\n \n expect(result.model.views[0].rectangles![0].borderColor).toBe('color5');\n expect(result.model.views[0].rectangles![0].borderWidth).toBe(4);\n expect(result.model.views[0].rectangles![0].borderStyle).toBe('dashed');\n });\n });\n\n describe('createRectangle', () => {\n it('should create a new rectangle', () => {\n const newRectangle: Rectangle = {\n id: 'rect2',\n position: { x: 50, y: 50 },\n size: { width: 150, height: 75 },\n color: 'color3'\n };\n \n const result = createRectangle(newRectangle, mockContext);\n \n // Should be added at the beginning (unshift)\n expect(result.model.views[0].rectangles).toHaveLength(2);\n expect(result.model.views[0].rectangles![0].id).toBe('rect2');\n expect(result.model.views[0].rectangles![1].id).toBe('rect1');\n });\n\n it('should initialize rectangles array if undefined', () => {\n mockState.model.views[0].rectangles = undefined;\n \n const newRectangle: Rectangle = {\n id: 'rect2',\n position: { x: 50, y: 50 },\n size: { width: 150, height: 75 }\n };\n \n const result = createRectangle(newRectangle, mockContext);\n \n expect(result.model.views[0].rectangles).toHaveLength(1);\n expect(result.model.views[0].rectangles![0].id).toBe('rect2');\n });\n\n it('should create rectangle with all properties', () => {\n const newRectangle: Rectangle = {\n id: 'rect2',\n position: { x: 50, y: 50 },\n size: { width: 150, height: 75 },\n color: 'color6',\n borderColor: 'color7',\n borderWidth: 3,\n borderStyle: 'dotted',\n opacity: 0.8,\n cornerRadius: 10,\n shadow: {\n offsetX: 2,\n offsetY: 2,\n blur: 4,\n color: 'color8'\n }\n };\n \n const result = createRectangle(newRectangle, mockContext);\n \n const created = result.model.views[0].rectangles![0];\n expect(created.color).toBe('color6');\n expect(created.borderColor).toBe('color7');\n expect(created.borderWidth).toBe(3);\n expect(created.borderStyle).toBe('dotted');\n expect(created.opacity).toBe(0.8);\n expect(created.cornerRadius).toBe(10);\n expect(created.shadow).toEqual({\n offsetX: 2,\n offsetY: 2,\n blur: 4,\n color: 'color8'\n });\n });\n\n it('should throw error when view does not exist', () => {\n mockContext.viewId = 'nonexistent';\n \n const newRectangle: Rectangle = {\n id: 'rect2',\n position: { x: 50, y: 50 },\n size: { width: 150, height: 75 }\n };\n \n expect(() => {\n createRectangle(newRectangle, mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should call updateRectangle after creation', () => {\n // This tests that createRectangle calls updateRectangle at the end\n // which ensures any necessary syncing happens\n const newRectangle: Rectangle = {\n id: 'rect2',\n position: { x: 50, y: 50 },\n size: { width: 150, height: 75 }\n };\n \n const result = createRectangle(newRectangle, mockContext);\n \n // The rectangle should have all properties set\n expect(result.model.views[0].rectangles![0]).toMatchObject(newRectangle);\n });\n });\n\n describe('deleteRectangle', () => {\n it('should delete a rectangle from model', () => {\n const result = deleteRectangle('rect1', mockContext);\n \n // Check rectangle is removed from model\n expect(result.model.views[0].rectangles).toHaveLength(0);\n \n // Rectangles don't have scene data - only stored in model\n });\n\n it('should throw error when rectangle does not exist', () => {\n expect(() => {\n deleteRectangle('nonexistent', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should throw error when view does not exist', () => {\n mockContext.viewId = 'nonexistent';\n \n expect(() => {\n deleteRectangle('rect1', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should handle empty rectangles array', () => {\n mockState.model.views[0].rectangles = [];\n \n expect(() => {\n deleteRectangle('rect1', mockContext);\n }).toThrow('Item with id rect1 not found');\n });\n\n it('should not affect other rectangles when deleting one', () => {\n const rect2: Rectangle = {\n id: 'rect2',\n position: { x: 100, y: 100 },\n size: { width: 80, height: 40 }\n };\n \n mockState.model.views[0].rectangles = [mockRectangle, rect2];\n \n const result = deleteRectangle('rect1', mockContext);\n \n expect(result.model.views[0].rectangles).toHaveLength(1);\n expect(result.model.views[0].rectangles![0].id).toBe('rect2');\n \n // Rectangles don't have scene data - only verify model is updated\n });\n });\n\n describe('edge cases and state immutability', () => {\n it('should not mutate the original state', () => {\n const originalState = JSON.parse(JSON.stringify(mockState));\n \n deleteRectangle('rect1', mockContext);\n \n expect(mockState).toEqual(originalState);\n });\n\n it('should handle multiple operations in sequence', () => {\n // Create\n let result = createRectangle({\n id: 'rect2',\n position: { x: 200, y: 200 },\n size: { width: 50, height: 50 }\n }, { ...mockContext, state: mockState });\n \n // Update\n result = updateRectangle({\n id: 'rect2',\n color: 'updatedColor',\n opacity: 0.7\n }, { ...mockContext, state: result });\n \n // Delete original\n result = deleteRectangle('rect1', { ...mockContext, state: result });\n \n expect(result.model.views[0].rectangles).toHaveLength(1);\n expect(result.model.views[0].rectangles![0].id).toBe('rect2');\n expect(result.model.views[0].rectangles![0].color).toBe('updatedColor');\n expect(result.model.views[0].rectangles![0].opacity).toBe(0.7);\n });\n\n it('should handle view with multiple rectangles', () => {\n const rectangles: Rectangle[] = Array.from({ length: 5 }, (_, i) => ({\n id: `rect${i}`,\n position: { x: i * 20, y: i * 20 },\n size: { width: 100, height: 50 }\n }));\n \n mockState.model.views[0].rectangles = rectangles;\n \n const result = deleteRectangle('rect2', mockContext);\n \n expect(result.model.views[0].rectangles).toHaveLength(4);\n expect(result.model.views[0].rectangles!.find(r => r.id === 'rect2')).toBeUndefined();\n });\n\n it('should handle rectangles with complex nested properties', () => {\n const complexRect: Rectangle = {\n id: 'rect2',\n position: { x: 0, y: 0 },\n size: { width: 100, height: 100 },\n shadow: {\n offsetX: 5,\n offsetY: 5,\n blur: 10,\n color: 'shadowColor'\n },\n gradient: {\n type: 'linear',\n angle: 45,\n stops: [\n { offset: 0, color: 'color1' },\n { offset: 1, color: 'color2' }\n ]\n }\n };\n \n const result = createRectangle(complexRect, mockContext);\n \n const created = result.model.views[0].rectangles![0];\n expect(created.shadow).toEqual(complexRect.shadow);\n expect(created.gradient).toEqual(complexRect.gradient);\n });\n });\n});" }, { "path": "packages/fossflow-lib/src/stores/reducers/__tests__/textBox.test.ts", "content": "import {\n createTextBox,\n updateTextBox,\n deleteTextBox,\n syncTextBox\n} from '../textBox';\nimport { State, ViewReducerContext } from '../types';\nimport { TextBox, View } from 'src/types';\n\n// Mock the utility functions\njest.mock('src/utils', () => ({\n getItemByIdOrThrow: jest.fn((items: any[], id: string) => {\n const index = items.findIndex((item: any) => \n (typeof item === 'object' && item.id === id) || item === id\n );\n if (index === -1) {\n throw new Error(`Item with id ${id} not found`);\n }\n return { value: items[index], index };\n }),\n getTextBoxDimensions: jest.fn((textBox: TextBox) => ({\n width: (textBox.content?.length || 0) * 10,\n height: textBox.fontSize || 16\n }))\n}));\n\ndescribe('textBox reducer', () => {\n let mockState: State;\n let mockContext: ViewReducerContext;\n let mockTextBox: TextBox;\n let mockView: View;\n\n beforeEach(() => {\n jest.clearAllMocks();\n \n mockTextBox = {\n id: 'textbox1',\n position: { x: 10, y: 20 },\n content: 'Test Content',\n fontSize: 14,\n color: 'color1',\n backgroundColor: 'color2',\n borderColor: 'color3',\n alignment: 'left'\n };\n\n mockView = {\n id: 'view1',\n name: 'Test View',\n items: [],\n connectors: [],\n rectangles: [],\n textBoxes: [mockTextBox]\n };\n\n mockState = {\n model: {\n version: '1.0',\n title: 'Test Model',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [mockView]\n },\n scene: {\n viewId: 'view1',\n viewport: { x: 0, y: 0, zoom: 1 },\n grid: { enabled: true, size: 10, style: 'dots' },\n connectors: {},\n viewItems: {},\n rectangles: {},\n textBoxes: {\n 'textbox1': {\n size: { width: 120, height: 14 }\n }\n }\n }\n };\n\n mockContext = {\n viewId: 'view1',\n state: mockState\n };\n });\n\n describe('syncTextBox', () => {\n it('should sync text box dimensions to scene', () => {\n const getTextBoxDimensions = require('src/utils').getTextBoxDimensions;\n getTextBoxDimensions.mockClear();\n getTextBoxDimensions.mockReturnValue({ width: 150, height: 20 });\n \n const result = syncTextBox('textbox1', mockContext);\n \n expect(getTextBoxDimensions).toHaveBeenCalled();\n expect(result.scene.textBoxes['textbox1'].size).toEqual({\n width: 150,\n height: 20\n });\n });\n\n it('should throw error when text box does not exist', () => {\n expect(() => {\n syncTextBox('nonexistent', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should handle empty textBoxes array', () => {\n mockState.model.views[0].textBoxes = [];\n \n expect(() => {\n syncTextBox('textbox1', mockContext);\n }).toThrow('Item with id textbox1 not found');\n });\n\n it('should create scene entry if it doesn\\'t exist', () => {\n delete mockState.scene.textBoxes['textbox1'];\n \n const result = syncTextBox('textbox1', mockContext);\n \n expect(result.scene.textBoxes['textbox1']).toBeDefined();\n expect(result.scene.textBoxes['textbox1'].size).toBeDefined();\n });\n });\n\n describe('updateTextBox', () => {\n it('should update text box properties', () => {\n const updates = {\n id: 'textbox1',\n content: 'Updated Content',\n fontSize: 18,\n color: 'color4'\n };\n \n const result = updateTextBox(updates, mockContext);\n \n expect(result.model.views[0].textBoxes![0].content).toBe('Updated Content');\n expect(result.model.views[0].textBoxes![0].fontSize).toBe(18);\n expect(result.model.views[0].textBoxes![0].color).toBe('color4');\n });\n\n it('should sync when content is updated', () => {\n const getTextBoxDimensions = require('src/utils').getTextBoxDimensions;\n getTextBoxDimensions.mockClear();\n \n const updates = {\n id: 'textbox1',\n content: 'New Content That Is Longer'\n };\n \n updateTextBox(updates, mockContext);\n \n // Should trigger sync because content changed\n expect(getTextBoxDimensions).toHaveBeenCalled();\n });\n\n it('should sync when fontSize is updated', () => {\n const getTextBoxDimensions = require('src/utils').getTextBoxDimensions;\n getTextBoxDimensions.mockClear();\n \n const updates = {\n id: 'textbox1',\n fontSize: 24\n };\n \n updateTextBox(updates, mockContext);\n \n // Should trigger sync because fontSize changed\n expect(getTextBoxDimensions).toHaveBeenCalled();\n });\n\n it('should not sync when other properties are updated', () => {\n const getTextBoxDimensions = require('src/utils').getTextBoxDimensions;\n getTextBoxDimensions.mockClear();\n \n const updates = {\n id: 'textbox1',\n color: 'color5',\n backgroundColor: 'color6'\n };\n \n updateTextBox(updates, mockContext);\n \n // Should NOT trigger sync for non-size-affecting properties\n expect(getTextBoxDimensions).not.toHaveBeenCalled();\n });\n\n it('should handle undefined textBoxes array', () => {\n mockState.model.views[0].textBoxes = undefined;\n \n const result = updateTextBox({ id: 'textbox1', content: 'test' }, mockContext);\n \n // Should return state unchanged\n expect(result).toEqual(mockState);\n });\n\n it('should preserve other properties when partially updating', () => {\n const updates = {\n id: 'textbox1',\n content: 'Partial Update'\n };\n \n const result = updateTextBox(updates, mockContext);\n \n // Original properties should be preserved\n expect(result.model.views[0].textBoxes![0].fontSize).toBe(mockTextBox.fontSize);\n expect(result.model.views[0].textBoxes![0].color).toBe(mockTextBox.color);\n expect(result.model.views[0].textBoxes![0].position).toEqual(mockTextBox.position);\n // Updated property\n expect(result.model.views[0].textBoxes![0].content).toBe('Partial Update');\n });\n\n it('should throw error when text box does not exist', () => {\n expect(() => {\n updateTextBox({ id: 'nonexistent', content: 'test' }, mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n });\n\n describe('createTextBox', () => {\n it('should create a new text box', () => {\n const newTextBox: TextBox = {\n id: 'textbox2',\n position: { x: 30, y: 40 },\n content: 'New Text Box',\n fontSize: 16\n };\n \n const result = createTextBox(newTextBox, mockContext);\n \n // Should be added at the beginning (unshift)\n expect(result.model.views[0].textBoxes).toHaveLength(2);\n expect(result.model.views[0].textBoxes![0].id).toBe('textbox2');\n expect(result.model.views[0].textBoxes![1].id).toBe('textbox1');\n \n // Should sync the new text box\n expect(result.scene.textBoxes['textbox2']).toBeDefined();\n expect(result.scene.textBoxes['textbox2'].size).toBeDefined();\n });\n\n it('should initialize textBoxes array if undefined', () => {\n mockState.model.views[0].textBoxes = undefined;\n \n const newTextBox: TextBox = {\n id: 'textbox2',\n position: { x: 30, y: 40 },\n content: 'New Text Box'\n };\n \n const result = createTextBox(newTextBox, mockContext);\n \n expect(result.model.views[0].textBoxes).toHaveLength(1);\n expect(result.model.views[0].textBoxes![0].id).toBe('textbox2');\n });\n\n it('should create text box with all properties', () => {\n const newTextBox: TextBox = {\n id: 'textbox2',\n position: { x: 30, y: 40 },\n content: 'Full Text Box',\n fontSize: 20,\n color: 'color7',\n backgroundColor: 'color8',\n borderColor: 'color9',\n alignment: 'center',\n bold: true,\n italic: true\n };\n \n const result = createTextBox(newTextBox, mockContext);\n \n const created = result.model.views[0].textBoxes![0];\n expect(created.content).toBe('Full Text Box');\n expect(created.fontSize).toBe(20);\n expect(created.color).toBe('color7');\n expect(created.backgroundColor).toBe('color8');\n expect(created.borderColor).toBe('color9');\n expect(created.alignment).toBe('center');\n expect(created.bold).toBe(true);\n expect(created.italic).toBe(true);\n });\n\n it('should throw error when view does not exist', () => {\n mockContext.viewId = 'nonexistent';\n \n const newTextBox: TextBox = {\n id: 'textbox2',\n position: { x: 30, y: 40 },\n content: 'New Text Box'\n };\n \n expect(() => {\n createTextBox(newTextBox, mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n });\n\n describe('deleteTextBox', () => {\n it('should delete a text box from both model and scene', () => {\n const result = deleteTextBox('textbox1', mockContext);\n \n // Check text box is removed from model\n expect(result.model.views[0].textBoxes).toHaveLength(0);\n \n // Check text box is removed from scene\n expect(result.scene.textBoxes['textbox1']).toBeUndefined();\n });\n\n it('should throw error when text box does not exist', () => {\n expect(() => {\n deleteTextBox('nonexistent', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should throw error when view does not exist', () => {\n mockContext.viewId = 'nonexistent';\n \n expect(() => {\n deleteTextBox('textbox1', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should handle empty textBoxes array', () => {\n mockState.model.views[0].textBoxes = [];\n \n expect(() => {\n deleteTextBox('textbox1', mockContext);\n }).toThrow('Item with id textbox1 not found');\n });\n\n it('should not affect other text boxes when deleting one', () => {\n const textBox2: TextBox = {\n id: 'textbox2',\n position: { x: 50, y: 60 },\n content: 'Second Text Box'\n };\n \n mockState.model.views[0].textBoxes = [mockTextBox, textBox2];\n mockState.scene.textBoxes['textbox2'] = { \n size: { width: 150, height: 16 }\n };\n \n const result = deleteTextBox('textbox1', mockContext);\n \n expect(result.model.views[0].textBoxes).toHaveLength(1);\n expect(result.model.views[0].textBoxes![0].id).toBe('textbox2');\n \n // Verify proper scene cleanup\n expect(result.scene.textBoxes['textbox1']).toBeUndefined();\n expect(result.scene.textBoxes['textbox2']).toBeDefined();\n });\n });\n\n describe('edge cases and state immutability', () => {\n it('should not mutate the original state', () => {\n const originalState = JSON.parse(JSON.stringify(mockState));\n \n deleteTextBox('textbox1', mockContext);\n \n expect(mockState).toEqual(originalState);\n });\n\n it('should handle multiple operations in sequence', () => {\n // Create\n let result = createTextBox({\n id: 'textbox2',\n position: { x: 100, y: 100 },\n content: 'New Box'\n }, { ...mockContext, state: mockState });\n \n // Update\n result = updateTextBox({\n id: 'textbox2',\n content: 'Updated Box',\n fontSize: 24\n }, { ...mockContext, state: result });\n \n // Delete original\n result = deleteTextBox('textbox1', { ...mockContext, state: result });\n \n expect(result.model.views[0].textBoxes).toHaveLength(1);\n expect(result.model.views[0].textBoxes![0].id).toBe('textbox2');\n expect(result.model.views[0].textBoxes![0].content).toBe('Updated Box');\n expect(result.model.views[0].textBoxes![0].fontSize).toBe(24);\n });\n\n it('should handle view with multiple text boxes', () => {\n const textBoxes: TextBox[] = Array.from({ length: 5 }, (_, i) => ({\n id: `textbox${i}`,\n position: { x: i * 10, y: i * 10 },\n content: `Text ${i}`\n }));\n \n mockState.model.views[0].textBoxes = textBoxes;\n \n const result = deleteTextBox('textbox2', mockContext);\n \n expect(result.model.views[0].textBoxes).toHaveLength(4);\n expect(result.model.views[0].textBoxes!.find(t => t.id === 'textbox2')).toBeUndefined();\n });\n });\n});" }, { "path": "packages/fossflow-lib/src/stores/reducers/__tests__/viewItem.test.ts", "content": "import {\n deleteViewItem,\n updateViewItem,\n createViewItem\n} from '../viewItem';\nimport { State, ViewReducerContext } from '../types';\nimport { ViewItem, View, Connector } from 'src/types';\n\n// Mock the utility functions and reducers\njest.mock('src/utils', () => ({\n getItemByIdOrThrow: jest.fn((items: any[], id: string) => {\n const index = items.findIndex((item: any) =>\n (typeof item === 'object' && item.id === id) || item === id\n );\n if (index === -1) {\n throw new Error(`Item with id ${id} not found`);\n }\n return { value: items[index], index };\n }),\n getConnectorsByViewItem: jest.fn((viewItemId: string, connectors: Connector[]) => {\n return connectors.filter(connector =>\n connector.anchors.some((anchor: any) =>\n anchor.ref?.item === viewItemId\n )\n );\n })\n}));\n\njest.mock('src/schemas/validation', () => ({\n validateView: jest.fn(() => [])\n}));\n\njest.mock('../view', () => ({\n view: jest.fn((params: any) => params.ctx.state)\n}));\n\ndescribe('viewItem reducer', () => {\n let mockState: State;\n let mockContext: ViewReducerContext;\n let mockViewItem: ViewItem;\n let mockView: View;\n let mockConnector: Connector;\n\n beforeEach(() => {\n jest.clearAllMocks();\n\n mockViewItem = {\n id: 'item1',\n tile: { x: 0, y: 0 },\n size: { width: 100, height: 100 }\n };\n\n mockConnector = {\n id: 'connector1',\n anchors: [\n {\n id: 'anchor1',\n ref: { item: 'item1' },\n face: 'right',\n offset: 0\n },\n {\n id: 'anchor2',\n ref: { item: 'item2' },\n face: 'left',\n offset: 0\n }\n ]\n };\n\n mockView = {\n id: 'view1',\n name: 'Test View',\n items: [mockViewItem, { id: 'item2', tile: { x: 1, y: 0 } }],\n connectors: [mockConnector],\n rectangles: [],\n textBoxes: []\n };\n\n mockState = {\n model: {\n version: '1.0',\n title: 'Test Model',\n description: '',\n colors: [],\n icons: [],\n items: [],\n views: [mockView]\n },\n scene: {\n viewId: 'view1',\n viewport: { x: 0, y: 0, zoom: 1 },\n grid: { enabled: true, size: 10, style: 'dots' },\n connectors: {\n 'connector1': {\n path: {\n tiles: [],\n rectangle: { from: { x: 0, y: 0 }, to: { x: 1, y: 0 } }\n }\n }\n },\n viewItems: {},\n rectangles: {},\n textBoxes: {}\n }\n };\n\n mockContext = {\n viewId: 'view1',\n state: mockState\n };\n });\n\n describe('deleteViewItem', () => {\n it('should delete a view item and its associated connectors', () => {\n const result = deleteViewItem('item1', mockContext);\n\n // Check item is removed from model\n expect(result.model.views[0].items).toHaveLength(1);\n expect(result.model.views[0].items.find(item => item.id === 'item1')).toBeUndefined();\n\n // Check connectors referencing the item are removed\n expect(result.model.views[0].connectors).toHaveLength(0);\n expect(result.scene.connectors['connector1']).toBeUndefined();\n });\n\n it('should only remove connectors that reference the deleted item', () => {\n const connector2: Connector = {\n id: 'connector2',\n anchors: [\n {\n id: 'anchor3',\n ref: { item: 'item2' },\n face: 'top'\n },\n {\n id: 'anchor4',\n ref: { item: 'item3' },\n face: 'bottom'\n }\n ]\n };\n\n mockState.model.views[0].connectors = [mockConnector, connector2];\n mockState.scene.connectors['connector2'] = {\n path: { tiles: [], rectangle: { from: { x: 1, y: 1 }, to: { x: 2, y: 2 } } }\n };\n\n const result = deleteViewItem('item1', mockContext);\n\n // Check only connector1 is removed\n expect(result.model.views[0].connectors).toHaveLength(1);\n expect(result.model.views[0].connectors![0].id).toBe('connector2');\n expect(result.scene.connectors['connector1']).toBeUndefined();\n expect(result.scene.connectors['connector2']).toBeDefined();\n });\n\n it('should handle deletion when no connectors reference the item', () => {\n // Create a connector that doesn't reference item1\n mockState.model.views[0].connectors = [{\n id: 'connector2',\n anchors: [\n {\n id: 'anchor3',\n ref: { item: 'item2' },\n face: 'top'\n },\n {\n id: 'anchor4',\n ref: { item: 'item3' },\n face: 'bottom'\n }\n ]\n }];\n\n const result = deleteViewItem('item1', mockContext);\n\n // Item should be removed but connector should remain\n expect(result.model.views[0].items).toHaveLength(1);\n expect(result.model.views[0].connectors).toHaveLength(1);\n });\n\n it('should handle deletion when view has no connectors', () => {\n mockState.model.views[0].connectors = undefined;\n\n const result = deleteViewItem('item1', mockContext);\n\n expect(result.model.views[0].items).toHaveLength(1);\n expect(result.model.views[0].connectors).toBeUndefined();\n });\n\n it('should throw error when item does not exist', () => {\n expect(() => {\n deleteViewItem('nonexistent', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should throw error when view does not exist', () => {\n mockContext.viewId = 'nonexistent';\n expect(() => {\n deleteViewItem('item1', mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n\n it('should handle connectors with multiple anchors referencing the same item', () => {\n const complexConnector: Connector = {\n id: 'connector3',\n anchors: [\n {\n id: 'anchor5',\n ref: { item: 'item1' },\n face: 'top'\n },\n {\n id: 'anchor6',\n ref: { item: 'item1' },\n face: 'bottom'\n },\n {\n id: 'anchor7',\n ref: { item: 'item2' },\n face: 'left'\n }\n ]\n };\n\n mockState.model.views[0].connectors = [complexConnector];\n\n const result = deleteViewItem('item1', mockContext);\n\n // Connector should be removed since it references the deleted item\n expect(result.model.views[0].connectors).toHaveLength(0);\n });\n });\n\n describe('updateViewItem', () => {\n it('should update view item properties', () => {\n const updates = {\n id: 'item1',\n tile: { x: 2, y: 2 },\n size: { width: 200, height: 200 }\n };\n\n const result = updateViewItem(updates, mockContext);\n\n const updatedItem = result.model.views[0].items.find(item => item.id === 'item1');\n expect(updatedItem?.tile).toEqual({ x: 2, y: 2 });\n expect(updatedItem?.size).toEqual({ width: 200, height: 200 });\n });\n\n it('should update connectors when item tile position changes', () => {\n const updates = {\n id: 'item1',\n tile: { x: 5, y: 5 }\n };\n\n const result = updateViewItem(updates, mockContext);\n\n // The item should be updated with new position\n const updatedItem = result.model.views[0].items.find(item => item.id === 'item1');\n expect(updatedItem?.tile).toEqual({ x: 5, y: 5 });\n\n // When tile changes, connectors that reference this item are updated\n // The mock implementation tracks that connectors referencing the item were found\n const getConnectorsByViewItem = require('src/utils').getConnectorsByViewItem;\n expect(getConnectorsByViewItem).toHaveBeenCalled();\n });\n\n it('should validate view after update', () => {\n const validateView = require('src/schemas/validation').validateView;\n validateView.mockReturnValueOnce([{ message: 'Validation error' }]);\n\n expect(() => {\n updateViewItem({ id: 'item1', tile: { x: 1, y: 1 } }, mockContext);\n }).toThrow('Validation error');\n });\n\n it('should not update connectors when tile position is not changed', () => {\n const view = require('../view').view;\n view.mockClear();\n\n const updates = {\n id: 'item1',\n size: { width: 150, height: 150 }\n };\n\n updateViewItem(updates, mockContext);\n\n // View reducer should not be called for connector updates\n expect(view).not.toHaveBeenCalled();\n });\n\n it('should throw error when item does not exist', () => {\n expect(() => {\n updateViewItem({ id: 'nonexistent', tile: { x: 1, y: 1 } }, mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n });\n\n describe('createViewItem', () => {\n it('should create a new view item', () => {\n const newItem: ViewItem = {\n id: 'item3',\n tile: { x: 3, y: 3 },\n size: { width: 100, height: 100 }\n };\n\n const result = createViewItem(newItem, mockContext);\n\n // Should be added at the beginning (unshift)\n expect(result.model.views[0].items).toHaveLength(3);\n expect(result.model.views[0].items[0].id).toBe('item3');\n });\n\n it('should validate view after creation', () => {\n const validateView = require('src/schemas/validation').validateView;\n validateView.mockReturnValueOnce([{ message: 'Invalid item' }]);\n\n const newItem: ViewItem = {\n id: 'item3',\n tile: { x: 3, y: 3 }\n };\n\n expect(() => {\n createViewItem(newItem, mockContext);\n }).toThrow('Invalid item');\n });\n\n it('should throw error when view does not exist', () => {\n mockContext.viewId = 'nonexistent';\n\n const newItem: ViewItem = {\n id: 'item3',\n tile: { x: 3, y: 3 }\n };\n\n expect(() => {\n createViewItem(newItem, mockContext);\n }).toThrow('Item with id nonexistent not found');\n });\n });\n\n describe('edge cases and state immutability', () => {\n it('should not mutate the original state', () => {\n const originalState = JSON.parse(JSON.stringify(mockState));\n\n deleteViewItem('item1', mockContext);\n\n expect(mockState).toEqual(originalState);\n });\n\n it('should handle multiple operations in sequence', () => {\n // Create\n let result = createViewItem({\n id: 'item3',\n tile: { x: 2, y: 2 }\n }, { ...mockContext, state: mockState });\n\n // Update\n result = updateViewItem({\n id: 'item3',\n size: { width: 150, height: 150 }\n }, { ...mockContext, state: result });\n\n // Delete original\n result = deleteViewItem('item1', { ...mockContext, state: result });\n\n expect(result.model.views[0].items.find(item => item.id === 'item3')).toBeDefined();\n expect(result.model.views[0].items.find(item => item.id === 'item3')?.size).toEqual({ width: 150, height: 150 });\n expect(result.model.views[0].items.find(item => item.id === 'item1')).toBeUndefined();\n\n // Connector referencing item1 should be removed\n expect(result.model.views[0].connectors).toHaveLength(0);\n });\n\n it('should handle deletion of all items with connectors', () => {\n // Delete all items one by one\n let result = deleteViewItem('item1', mockContext);\n result = deleteViewItem('item2', { ...mockContext, state: result });\n\n expect(result.model.views[0].items).toHaveLength(0);\n expect(result.model.views[0].connectors).toHaveLength(0);\n });\n });\n});" }, { "path": "packages/fossflow-lib/src/stores/reducers/connector.ts", "content": "import { Connector } from 'src/types';\nimport { produce } from 'immer';\nimport { getItemByIdOrThrow, getConnectorPath } from 'src/utils';\nimport { State, ViewReducerContext } from './types';\n\nexport const deleteConnector = (\n id: string,\n { viewId, state }: ViewReducerContext\n): State => {\n const view = getItemByIdOrThrow(state.model.views, viewId);\n const connector = getItemByIdOrThrow(view.value.connectors ?? [], id);\n\n const newState = produce(state, (draft) => {\n draft.model.views[view.index].connectors?.splice(connector.index, 1);\n delete draft.scene.connectors[id];\n });\n\n return newState;\n};\n\nexport const syncConnector = (\n id: string,\n { viewId, state }: ViewReducerContext\n) => {\n const newState = produce(state, (draft) => {\n const view = getItemByIdOrThrow(draft.model.views, viewId);\n const connector = getItemByIdOrThrow(view.value.connectors ?? [], id);\n \n // Skip validation - allow all connectors regardless of position\n try {\n const path = getConnectorPath({\n anchors: connector.value.anchors,\n view: view.value\n });\n\n draft.scene.connectors[connector.value.id] = { path };\n } catch (error) {\n // Even if we can't get the path, keep the connector with an empty path\n draft.scene.connectors[connector.value.id] = { \n path: { \n tiles: [], \n rectangle: { \n from: { x: 0, y: 0 }, \n to: { x: 0, y: 0 } \n } \n } \n };\n }\n });\n\n return newState;\n};\n\nexport const updateConnector = (\n { id, ...updates }: { id: string } & Partial,\n { state, viewId }: ViewReducerContext\n): State => {\n const newState = produce(state, (draft) => {\n const view = getItemByIdOrThrow(draft.model.views, viewId);\n const { connectors } = draft.model.views[view.index];\n\n if (!connectors) return;\n\n const connector = getItemByIdOrThrow(connectors, id);\n const newConnector = { ...connector.value, ...updates };\n connectors[connector.index] = newConnector;\n\n if (updates.anchors) {\n const stateAfterSync = syncConnector(newConnector.id, {\n viewId,\n state: draft\n });\n\n draft.model = stateAfterSync.model;\n draft.scene = stateAfterSync.scene;\n }\n });\n\n return newState;\n};\n\nexport const createConnector = (\n newConnector: Connector,\n { state, viewId }: ViewReducerContext\n): State => {\n const newState = produce(state, (draft) => {\n const view = getItemByIdOrThrow(draft.model.views, viewId);\n const { connectors } = draft.model.views[view.index];\n\n if (!connectors) {\n draft.model.views[view.index].connectors = [newConnector];\n } else {\n draft.model.views[view.index].connectors?.unshift(newConnector);\n }\n\n const stateAfterSync = syncConnector(newConnector.id, {\n viewId,\n state: draft\n });\n\n draft.model = stateAfterSync.model;\n draft.scene = stateAfterSync.scene;\n });\n\n return newState;\n};\n" }, { "path": "packages/fossflow-lib/src/stores/reducers/index.ts", "content": "export { view } from './view';\nexport * from './modelItem';\nexport { syncConnector } from './connector';\n" }, { "path": "packages/fossflow-lib/src/stores/reducers/modelItem.ts", "content": "import { produce } from 'immer';\nimport { ModelItem } from 'src/types';\nimport { getItemByIdOrThrow } from 'src/utils';\nimport { State } from './types';\n\nexport const updateModelItem = (\n id: string,\n updates: Partial,\n state: State\n): State => {\n const modelItem = getItemByIdOrThrow(state.model.items, id);\n\n const newState = produce(state, (draft) => {\n draft.model.items[modelItem.index] = { ...modelItem.value, ...updates };\n });\n\n return newState;\n};\n\nexport const createModelItem = (\n newModelItem: ModelItem,\n state: State\n): State => {\n const newState = produce(state, (draft) => {\n draft.model.items.push(newModelItem);\n });\n\n return updateModelItem(newModelItem.id, newModelItem, newState);\n};\n\nexport const deleteModelItem = (id: string, state: State): State => {\n const modelItem = getItemByIdOrThrow(state.model.items, id);\n\n const newState = produce(state, (draft) => {\n delete draft.model.items[modelItem.index];\n });\n\n return newState;\n};\n" }, { "path": "packages/fossflow-lib/src/stores/reducers/rectangle.ts", "content": "import { produce } from 'immer';\nimport { Rectangle } from 'src/types';\nimport { getItemByIdOrThrow } from 'src/utils';\nimport { State, ViewReducerContext } from './types';\n\nexport const updateRectangle = (\n { id, ...updates }: { id: string } & Partial,\n { viewId, state }: ViewReducerContext\n): State => {\n const view = getItemByIdOrThrow(state.model.views, viewId);\n\n const newState = produce(state, (draft) => {\n const { rectangles } = draft.model.views[view.index];\n\n if (!rectangles) return;\n\n const rectangle = getItemByIdOrThrow(rectangles, id);\n const newRectangle = { ...rectangle.value, ...updates };\n rectangles[rectangle.index] = newRectangle;\n });\n\n return newState;\n};\n\nexport const createRectangle = (\n newRectangle: Rectangle,\n { viewId, state }: ViewReducerContext\n): State => {\n const view = getItemByIdOrThrow(state.model.views, viewId);\n\n const newState = produce(state, (draft) => {\n const { rectangles } = draft.model.views[view.index];\n\n if (!rectangles) {\n draft.model.views[view.index].rectangles = [newRectangle];\n } else {\n draft.model.views[view.index].rectangles?.unshift(newRectangle);\n }\n });\n\n return updateRectangle(newRectangle, {\n viewId,\n state: newState\n });\n};\n\nexport const deleteRectangle = (\n id: string,\n { viewId, state }: ViewReducerContext\n): State => {\n const view = getItemByIdOrThrow(state.model.views, viewId);\n const rectangle = getItemByIdOrThrow(view.value.rectangles ?? [], id);\n\n const newState = produce(state, (draft) => {\n draft.model.views[view.index].rectangles?.splice(rectangle.index, 1);\n // Rectangles don't have scene data - they're only stored in the model\n });\n\n return newState;\n};\n" }, { "path": "packages/fossflow-lib/src/stores/reducers/textBox.ts", "content": "import { produce } from 'immer';\nimport { TextBox } from 'src/types';\nimport { getItemByIdOrThrow, getTextBoxDimensions } from 'src/utils';\nimport { State, ViewReducerContext } from './types';\n\nexport const syncTextBox = (\n id: string,\n { viewId, state }: ViewReducerContext\n): State => {\n const newState = produce(state, (draft) => {\n const view = getItemByIdOrThrow(draft.model.views, viewId);\n const textBox = getItemByIdOrThrow(view.value.textBoxes ?? [], id);\n\n const textBoxSize = getTextBoxDimensions(textBox.value);\n\n draft.scene.textBoxes[textBox.value.id] = { size: textBoxSize };\n });\n\n return newState;\n};\n\nexport const updateTextBox = (\n { id, ...updates }: { id: string } & Partial,\n { viewId, state }: ViewReducerContext\n): State => {\n const view = getItemByIdOrThrow(state.model.views, viewId);\n\n const newState = produce(state, (draft) => {\n const { textBoxes } = draft.model.views[view.index];\n\n if (!textBoxes) return;\n\n const textBox = getItemByIdOrThrow(textBoxes, id);\n const newTextBox = { ...textBox.value, ...updates };\n textBoxes[textBox.index] = newTextBox;\n\n if (updates.content !== undefined || updates.fontSize !== undefined) {\n const stateAfterSync = syncTextBox(newTextBox.id, {\n viewId,\n state: draft\n });\n\n draft.model = stateAfterSync.model;\n draft.scene = stateAfterSync.scene;\n }\n });\n\n return newState;\n};\n\nexport const createTextBox = (\n newTextBox: TextBox,\n { viewId, state }: ViewReducerContext\n): State => {\n const view = getItemByIdOrThrow(state.model.views, viewId);\n\n const newState = produce(state, (draft) => {\n const { textBoxes } = draft.model.views[view.index];\n\n if (!textBoxes) {\n draft.model.views[view.index].textBoxes = [newTextBox];\n } else {\n draft.model.views[view.index].textBoxes?.unshift(newTextBox);\n }\n });\n\n return updateTextBox(newTextBox, { viewId, state: newState });\n};\n\nexport const deleteTextBox = (\n id: string,\n { viewId, state }: ViewReducerContext\n): State => {\n const view = getItemByIdOrThrow(state.model.views, viewId);\n const textBox = getItemByIdOrThrow(view.value.textBoxes ?? [], id);\n\n const newState = produce(state, (draft) => {\n draft.model.views[view.index].textBoxes?.splice(textBox.index, 1);\n delete draft.scene.textBoxes[id];\n });\n\n return newState;\n};\n" }, { "path": "packages/fossflow-lib/src/stores/reducers/types.ts", "content": "import { Model, Scene } from 'src/types';\nimport type * as viewReducers from './view';\nimport type * as viewItemReducers from './viewItem';\nimport type * as connectorReducers from './connector';\nimport type * as textBoxReducers from './textBox';\nimport type * as rectangleReducers from './rectangle';\n\nexport interface State {\n model: Model;\n scene: Scene;\n}\n\nexport interface ViewReducerContext {\n viewId: string;\n state: State;\n}\n\ntype ViewReducerAction =\n | {\n action: 'SYNC_SCENE';\n payload: undefined;\n }\n | {\n action: 'CREATE_VIEW';\n payload: Parameters[0];\n }\n | {\n action: 'UPDATE_VIEW';\n payload: Parameters[0];\n }\n | {\n action: 'DELETE_VIEW';\n payload: undefined;\n }\n | {\n action: 'CREATE_VIEWITEM';\n payload: Parameters[0];\n }\n | {\n action: 'UPDATE_VIEWITEM';\n payload: Parameters[0];\n }\n | {\n action: 'DELETE_VIEWITEM';\n payload: Parameters[0];\n }\n | {\n action: 'CREATE_CONNECTOR';\n payload: Parameters[0];\n }\n | {\n action: 'UPDATE_CONNECTOR';\n payload: Parameters[0];\n }\n | {\n action: 'DELETE_CONNECTOR';\n payload: Parameters[0];\n }\n | {\n action: 'SYNC_CONNECTOR';\n payload: Parameters[0];\n }\n | {\n action: 'CREATE_TEXTBOX';\n payload: Parameters[0];\n }\n | {\n action: 'UPDATE_TEXTBOX';\n payload: Parameters[0];\n }\n | {\n action: 'DELETE_TEXTBOX';\n payload: Parameters[0];\n }\n | {\n action: 'CREATE_RECTANGLE';\n payload: Parameters[0];\n }\n | {\n action: 'UPDATE_RECTANGLE';\n payload: Parameters[0];\n }\n | {\n action: 'DELETE_RECTANGLE';\n payload: Parameters[0];\n };\n\nexport type ViewReducerParams = ViewReducerAction & { ctx: ViewReducerContext };\n" }, { "path": "packages/fossflow-lib/src/stores/reducers/view.ts", "content": "import { produce } from 'immer';\nimport { View } from 'src/types';\nimport { getItemByIdOrThrow } from 'src/utils';\nimport { VIEW_DEFAULTS, INITIAL_SCENE_STATE } from 'src/config';\nimport type { ViewReducerContext, State, ViewReducerParams } from './types';\nimport { syncConnector } from './connector';\nimport { syncTextBox } from './textBox';\nimport * as viewItemReducers from './viewItem';\nimport * as connectorReducers from './connector';\nimport * as textBoxReducers from './textBox';\nimport * as rectangleReducers from './rectangle';\n\nexport const updateViewTimestamp = (ctx: ViewReducerContext): State => {\n const now = new Date().toISOString();\n\n const newState = produce(ctx.state, (draft) => {\n const view = getItemByIdOrThrow(draft.model.views, ctx.viewId);\n\n view.value.lastUpdated = now;\n });\n\n return newState;\n};\n\nexport const syncScene = ({ viewId, state }: ViewReducerContext): State => {\n const view = getItemByIdOrThrow(state.model.views, viewId);\n\n const startingState: State = {\n model: state.model,\n scene: INITIAL_SCENE_STATE\n };\n\n const stateAfterConnectorsSynced = [\n ...(view.value.connectors ?? [])\n ].reduce((acc, connector) => {\n return syncConnector(connector.id, { viewId, state: acc });\n }, startingState);\n\n const stateAfterTextBoxesSynced = [\n ...(view.value.textBoxes ?? [])\n ].reduce((acc, textBox) => {\n return syncTextBox(textBox.id, { viewId, state: acc });\n }, stateAfterConnectorsSynced);\n\n return stateAfterTextBoxesSynced;\n};\n\nexport const deleteView = (ctx: ViewReducerContext): State => {\n const newState = produce(ctx.state, (draft) => {\n const view = getItemByIdOrThrow(draft.model.views, ctx.viewId);\n\n draft.model.views.splice(view.index, 1);\n });\n\n return newState;\n};\n\nexport const updateView = (\n updates: Partial>,\n ctx: ViewReducerContext\n): State => {\n const newState = produce(ctx.state, (draft) => {\n const view = getItemByIdOrThrow(draft.model.views, ctx.viewId);\n view.value = { ...view.value, ...updates };\n });\n\n return newState;\n};\n\nexport const createView = (\n newView: Partial,\n ctx: ViewReducerContext\n): State => {\n const newState = produce(ctx.state, (draft) => {\n draft.model.views.push({\n ...VIEW_DEFAULTS,\n id: ctx.viewId,\n ...newView\n });\n });\n\n return newState;\n};\n\nexport const view = ({ action, payload, ctx }: ViewReducerParams) => {\n let newState: State;\n\n switch (action) {\n case 'SYNC_SCENE':\n newState = syncScene(ctx);\n break;\n case 'CREATE_VIEW':\n newState = createView(payload, ctx);\n break;\n case 'UPDATE_VIEW':\n newState = updateView(payload, ctx);\n break;\n case 'DELETE_VIEW':\n newState = deleteView(ctx);\n break;\n case 'CREATE_VIEWITEM':\n newState = viewItemReducers.createViewItem(payload, ctx);\n break;\n case 'UPDATE_VIEWITEM':\n newState = viewItemReducers.updateViewItem(payload, ctx);\n break;\n case 'DELETE_VIEWITEM':\n newState = viewItemReducers.deleteViewItem(payload, ctx);\n break;\n case 'CREATE_CONNECTOR':\n newState = connectorReducers.createConnector(payload, ctx);\n break;\n case 'UPDATE_CONNECTOR':\n newState = connectorReducers.updateConnector(payload, ctx);\n break;\n case 'SYNC_CONNECTOR':\n newState = connectorReducers.syncConnector(payload, ctx);\n break;\n case 'DELETE_CONNECTOR':\n newState = connectorReducers.deleteConnector(payload, ctx);\n break;\n case 'CREATE_TEXTBOX':\n newState = textBoxReducers.createTextBox(payload, ctx);\n break;\n case 'UPDATE_TEXTBOX':\n newState = textBoxReducers.updateTextBox(payload, ctx);\n break;\n case 'DELETE_TEXTBOX':\n newState = textBoxReducers.deleteTextBox(payload, ctx);\n break;\n case 'CREATE_RECTANGLE':\n newState = rectangleReducers.createRectangle(payload, ctx);\n break;\n case 'UPDATE_RECTANGLE':\n newState = rectangleReducers.updateRectangle(payload, ctx);\n break;\n case 'DELETE_RECTANGLE':\n newState = rectangleReducers.deleteRectangle(payload, ctx);\n break;\n default:\n throw new Error('Invalid action.');\n }\n\n switch (action) {\n case 'SYNC_SCENE':\n case 'DELETE_VIEW':\n return newState;\n default:\n return updateViewTimestamp({\n state: newState,\n viewId: ctx.viewId\n });\n }\n};\n" }, { "path": "packages/fossflow-lib/src/stores/reducers/viewItem.ts", "content": "import { produce } from 'immer';\nimport { ViewItem } from 'src/types';\nimport { getItemByIdOrThrow, getConnectorsByViewItem } from 'src/utils';\nimport { validateView } from 'src/schemas/validation';\nimport { State, ViewReducerContext } from './types';\nimport * as reducers from './view';\n\nexport const updateViewItem = (\n { id, ...updates }: { id: string } & Partial,\n { viewId, state }: ViewReducerContext\n): State => {\n const newState = produce(state, (draft) => {\n const view = getItemByIdOrThrow(draft.model.views, viewId);\n const { items } = view.value;\n\n if (!items) return;\n\n const viewItem = getItemByIdOrThrow(items, id);\n const newItem = { ...viewItem.value, ...updates };\n items[viewItem.index] = newItem;\n\n if (updates.tile) {\n const connectorsToUpdate = getConnectorsByViewItem(\n viewItem.value.id,\n view.value.connectors ?? []\n );\n\n const updatedConnectors = connectorsToUpdate.reduce((acc, connector) => {\n return reducers.view({\n action: 'UPDATE_CONNECTOR',\n payload: connector,\n ctx: { viewId, state: acc }\n });\n }, draft);\n\n draft.model.views[view.index].connectors =\n updatedConnectors.model.views[view.index].connectors;\n\n draft.scene.connectors = updatedConnectors.scene.connectors;\n }\n });\n\n const newView = getItemByIdOrThrow(newState.model.views, viewId);\n const issues = validateView(newView.value, { model: newState.model });\n\n if (issues.length > 0) {\n throw new Error(issues[0].message);\n }\n\n return newState;\n};\n\nexport const createViewItem = (\n newViewItem: ViewItem,\n ctx: ViewReducerContext\n): State => {\n const { state, viewId } = ctx;\n const view = getItemByIdOrThrow(state.model.views, viewId);\n\n const newState = produce(state, (draft) => {\n const { items } = draft.model.views[view.index];\n items.unshift(newViewItem);\n });\n\n return updateViewItem(newViewItem, { viewId, state: newState });\n};\n\nexport const deleteViewItem = (\n id: string,\n { state, viewId }: ViewReducerContext\n): State => {\n const newState = produce(state, (draft) => {\n const view = getItemByIdOrThrow(draft.model.views, viewId);\n const viewItem = getItemByIdOrThrow(view.value.items, id);\n\n draft.model.views[view.index].items.splice(viewItem.index, 1);\n\n // Find connectors that reference this deleted item\n const connectorsToDelete = getConnectorsByViewItem(\n viewItem.value.id,\n view.value.connectors ?? []\n );\n\n // Remove connectors that reference the deleted item\n if (connectorsToDelete.length > 0 && draft.model.views[view.index].connectors) {\n draft.model.views[view.index].connectors =\n draft.model.views[view.index].connectors?.filter(\n connector => !connectorsToDelete.some(c => c.id === connector.id)\n );\n\n // Also remove from scene\n connectorsToDelete.forEach(connector => {\n delete draft.scene.connectors[connector.id];\n });\n }\n });\n\n return newState;\n};\n" }, { "path": "packages/fossflow-lib/src/stores/sceneStore.tsx", "content": "import React, { createContext, useRef, useContext } from 'react';\nimport { createStore, useStore } from 'zustand';\nimport { SceneStore, Scene } from 'src/types';\n\nexport interface SceneHistoryState {\n past: Scene[];\n present: Scene;\n future: Scene[];\n maxHistorySize: number;\n}\n\nexport interface SceneStoreWithHistory extends Omit {\n history: SceneHistoryState;\n actions: {\n get: () => SceneStoreWithHistory;\n set: (scene: Partial, skipHistory?: boolean) => void;\n undo: () => boolean;\n redo: () => boolean;\n canUndo: () => boolean;\n canRedo: () => boolean;\n saveToHistory: () => void;\n clearHistory: () => void;\n };\n}\n\nconst MAX_HISTORY_SIZE = 50;\n\nconst createSceneHistoryState = (initialScene: Scene): SceneHistoryState => {\n return {\n past: [],\n present: initialScene,\n future: [],\n maxHistorySize: MAX_HISTORY_SIZE\n };\n};\n\nconst extractSceneData = (state: SceneStoreWithHistory): Scene => {\n return {\n connectors: state.connectors,\n textBoxes: state.textBoxes\n };\n};\n\nconst initialState = () => {\n return createStore((set, get) => {\n const initialScene: Scene = {\n connectors: {},\n textBoxes: {}\n };\n\n const saveToHistory = () => {\n set((state) => {\n const currentScene = extractSceneData(state);\n const newPast = [...state.history.past, currentScene];\n\n // Limit history size\n if (newPast.length > state.history.maxHistorySize) {\n newPast.shift();\n }\n\n return {\n ...state,\n history: {\n ...state.history,\n past: newPast,\n present: currentScene,\n future: []\n }\n };\n });\n };\n\n const undo = (): boolean => {\n const { history } = get();\n if (history.past.length === 0) return false;\n\n const previous = history.past[history.past.length - 1];\n const newPast = history.past.slice(0, history.past.length - 1);\n\n set((state) => {\n // Capture the actual live state (not stale history.present)\n const currentScene = extractSceneData(state);\n return {\n ...previous,\n history: {\n ...state.history,\n past: newPast,\n present: previous,\n future: [currentScene, ...state.history.future]\n }\n };\n });\n\n return true;\n };\n\n const redo = (): boolean => {\n const { history } = get();\n if (history.future.length === 0) return false;\n\n const next = history.future[0];\n const newFuture = history.future.slice(1);\n\n set((state) => {\n // Capture the actual live state (not stale history.present)\n const currentScene = extractSceneData(state);\n return {\n ...next,\n history: {\n ...state.history,\n past: [...state.history.past, currentScene],\n present: next,\n future: newFuture\n }\n };\n });\n\n return true;\n };\n\n const canUndo = () => {\n return get().history.past.length > 0;\n };\n const canRedo = () => {\n return get().history.future.length > 0;\n };\n\n const clearHistory = () => {\n const currentState = get();\n const currentScene = extractSceneData(currentState);\n\n set((state) => {\n return {\n ...state,\n history: createSceneHistoryState(currentScene)\n };\n });\n };\n\n return {\n ...initialScene,\n history: createSceneHistoryState(initialScene),\n actions: {\n get,\n set: (updates: Partial, skipHistory = false) => {\n if (!skipHistory) {\n saveToHistory();\n }\n set((state) => {\n return { ...state, ...updates };\n });\n },\n undo,\n redo,\n canUndo,\n canRedo,\n saveToHistory,\n clearHistory\n }\n };\n });\n};\n\nconst SceneContext = createContext | null>(\n null\n);\n\ninterface ProviderProps {\n children: React.ReactNode;\n}\n\nexport const SceneProvider = ({ children }: ProviderProps) => {\n const storeRef = useRef | undefined>(undefined);\n\n if (!storeRef.current) {\n storeRef.current = initialState();\n }\n\n return (\n \n {children}\n \n );\n};\n\nexport function useSceneStore(\n selector: (state: SceneStoreWithHistory) => T,\n equalityFn?: (left: T, right: T) => boolean\n) {\n const store = useContext(SceneContext);\n\n if (store === null) {\n throw new Error('Missing provider in the tree');\n }\n\n const value = useStore(store, selector, equalityFn);\n return value;\n}\n\nexport function useSceneStoreApi() {\n const store = useContext(SceneContext);\n\n if (store === null) {\n throw new Error('Missing provider in the tree');\n }\n\n return store;\n}\n" }, { "path": "packages/fossflow-lib/src/stores/uiStateStore.tsx", "content": "import React, { createContext, useContext, useRef } from 'react';\nimport { createStore, useStore } from 'zustand';\nimport {\n CoordsUtils,\n incrementZoom,\n decrementZoom,\n getStartingMode\n} from 'src/utils';\nimport { UiStateStore } from 'src/types';\nimport { INITIAL_UI_STATE } from 'src/config';\nimport { DEFAULT_HOTKEY_PROFILE, HotkeyProfile } from 'src/config/hotkeys';\nimport { DEFAULT_PAN_SETTINGS } from 'src/config/panSettings';\nimport { DEFAULT_ZOOM_SETTINGS } from 'src/config/zoomSettings';\nimport { DEFAULT_LABEL_SETTINGS } from 'src/config/labelSettings';\n\nconst initialState = () => {\n return createStore((set, get) => {\n return {\n zoom: INITIAL_UI_STATE.zoom,\n scroll: INITIAL_UI_STATE.scroll,\n view: '',\n mainMenuOptions: [],\n editorMode: 'EXPLORABLE_READONLY',\n mode: getStartingMode('EXPLORABLE_READONLY'),\n iconCategoriesState: [],\n isMainMenuOpen: false,\n dialog: null,\n rendererEl: null,\n contextMenu: null,\n mouse: {\n position: { screen: CoordsUtils.zero(), tile: CoordsUtils.zero() },\n mousedown: null,\n delta: null\n },\n itemControls: null,\n enableDebugTools: false,\n hotkeyProfile: DEFAULT_HOTKEY_PROFILE,\n panSettings: DEFAULT_PAN_SETTINGS,\n zoomSettings: DEFAULT_ZOOM_SETTINGS,\n labelSettings: DEFAULT_LABEL_SETTINGS,\n connectorInteractionMode: 'click', // Default to click mode\n expandLabels: false, // Default to collapsed labels\n iconPackManager: null, // Will be set by Isoflow if provided\n\n actions: {\n setView: (view) => {\n set({ view });\n },\n setMainMenuOptions: (mainMenuOptions) => {\n set({ mainMenuOptions });\n },\n setEditorMode: (mode) => {\n set({ editorMode: mode, mode: getStartingMode(mode) });\n },\n setIconCategoriesState: (iconCategoriesState) => {\n set({ iconCategoriesState });\n },\n resetUiState: () => {\n set({\n mode: getStartingMode(get().editorMode),\n scroll: {\n position: CoordsUtils.zero(),\n offset: CoordsUtils.zero()\n },\n itemControls: null,\n zoom: 1\n });\n },\n setMode: (mode) => {\n set({ mode });\n },\n setDialog: (dialog) => {\n set({ dialog });\n },\n setIsMainMenuOpen: (isMainMenuOpen) => {\n set({ isMainMenuOpen, itemControls: null });\n },\n incrementZoom: () => {\n const { zoom } = get();\n set({ zoom: incrementZoom(zoom) });\n },\n decrementZoom: () => {\n const { zoom } = get();\n set({ zoom: decrementZoom(zoom) });\n },\n setZoom: (zoom) => {\n set({ zoom });\n },\n setScroll: ({ position, offset }) => {\n set({ scroll: { position, offset: offset ?? get().scroll.offset } });\n },\n setItemControls: (itemControls) => {\n set({ itemControls });\n },\n setContextMenu: (contextMenu) => {\n set({ contextMenu });\n },\n setMouse: (mouse) => {\n set({ mouse });\n },\n setEnableDebugTools: (enableDebugTools) => {\n set({ enableDebugTools });\n },\n setRendererEl: (el: HTMLDivElement) => {\n set({ rendererEl: el });\n },\n setHotkeyProfile: (hotkeyProfile: HotkeyProfile) => {\n set({ hotkeyProfile });\n },\n setPanSettings: (panSettings) => {\n set({ panSettings });\n },\n setZoomSettings: (zoomSettings) => {\n set({ zoomSettings });\n },\n setLabelSettings: (labelSettings) => {\n set({ labelSettings });\n },\n setConnectorInteractionMode: (connectorInteractionMode) => {\n set({ connectorInteractionMode });\n },\n setExpandLabels: (expandLabels) => {\n set({ expandLabels });\n },\n setIconPackManager: (iconPackManager) => {\n set({ iconPackManager });\n }\n }\n };\n });\n};\n\nconst UiStateContext = createContext | null>(\n null\n);\n\ninterface ProviderProps {\n children: React.ReactNode;\n}\n\n// TODO: Typings below are pretty gnarly due to the way Zustand works.\n// see https://github.com/pmndrs/zustand/discussions/1180#discussioncomment-3439061\nexport const UiStateProvider = ({ children }: ProviderProps) => {\n const storeRef = useRef | undefined>(undefined);\n\n if (!storeRef.current) {\n storeRef.current = initialState();\n }\n\n return (\n \n {children}\n \n );\n};\n\nexport function useUiStateStore(\n selector: (state: UiStateStore) => T,\n equalityFn?: (left: T, right: T) => boolean\n) {\n const store = useContext(UiStateContext);\n\n if (store === null) {\n throw new Error('Missing provider in the tree');\n }\n\n const value = useStore(store, selector, equalityFn);\n return value;\n}\n\n// Hook to get store API for imperative access (getState without subscribing)\nexport function useUiStateStoreApi() {\n const store = useContext(UiStateContext);\n\n if (store === null) {\n throw new Error('Missing provider in the tree');\n }\n\n return store;\n}\n" }, { "path": "packages/fossflow-lib/src/styles/GlobalStyles.tsx", "content": "import React from 'react';\nimport { GlobalStyles as MUIGlobalStyles } from '@mui/material';\nimport 'react-quill-new/dist/quill.snow.css';\n\nexport const GlobalStyles = () => {\n return (\n \n );\n};\n" }, { "path": "packages/fossflow-lib/src/styles/theme.ts", "content": "import { createTheme, ThemeOptions } from '@mui/material';\n\ninterface CustomThemeVars {\n appPadding: {\n x: number;\n y: number;\n };\n toolMenu: {\n height: number;\n };\n customPalette: {\n [key in string]: string;\n };\n}\n\ndeclare module '@mui/material/styles' {\n interface Theme {\n customVars: CustomThemeVars;\n }\n\n interface ThemeOptions {\n customVars: CustomThemeVars;\n }\n}\n\nexport const customVars: CustomThemeVars = {\n appPadding: {\n x: 40,\n y: 40\n },\n toolMenu: {\n height: 40\n },\n customPalette: {\n diagramBg: '#f6faff',\n defaultColor: '#a5b8f3'\n }\n};\n\nconst createShadows = () => {\n const shadows = Array(25)\n .fill('none')\n .map((shadow, i) => {\n if (i === 0) return 'none';\n\n return `0px 10px 20px ${i - 10}px rgba(0,0,0,0.25)`;\n }) as Required['shadows'];\n\n return shadows;\n};\n\nexport const themeConfig: ThemeOptions = {\n customVars,\n shadows: createShadows(),\n transitions: {\n duration: {\n shortest: 50,\n shorter: 100,\n short: 150,\n standard: 200,\n complex: 250,\n enteringScreen: 150,\n leavingScreen: 100\n }\n },\n typography: {\n h2: {\n fontSize: '4em',\n fontStyle: 'bold',\n lineHeight: 1.2\n },\n h5: {\n fontSize: '1.3em',\n lineHeight: 1.2\n },\n body1: {\n fontSize: '0.85em',\n lineHeight: 1.2\n },\n body2: {\n fontSize: '0.75em',\n lineHeight: 1.2\n }\n },\n palette: {\n secondary: {\n main: '#df004c'\n }\n },\n components: {\n MuiCard: {\n defaultProps: {\n elevation: 0,\n variant: 'outlined'\n }\n },\n MuiToolbar: {\n styleOverrides: {\n root: {\n backgroundColor: 'white'\n }\n }\n },\n MuiButtonBase: {\n defaultProps: {\n disableRipple: true,\n disableTouchRipple: true\n }\n },\n MuiButton: {\n defaultProps: {\n disableElevation: true,\n variant: 'contained',\n disableRipple: true,\n disableTouchRipple: true\n },\n styleOverrides: {\n root: {\n textTransform: 'none'\n }\n }\n },\n MuiSvgIcon: {\n defaultProps: {\n color: 'action'\n },\n styleOverrides: {\n root: {\n width: 17,\n height: 17\n }\n }\n },\n MuiTextField: {\n defaultProps: {\n variant: 'outlined'\n },\n styleOverrides: {\n root: {\n '.MuiInputBase-input': {}\n }\n }\n }\n }\n};\n\nexport const theme = createTheme(themeConfig);\n" }, { "path": "packages/fossflow-lib/src/types/common.ts", "content": "export interface Coords {\n x: number;\n y: number;\n}\n\nexport interface Size {\n width: number;\n height: number;\n}\n\nexport interface Rect {\n from: Coords;\n to: Coords;\n}\n\nexport const ProjectionOrientationEnum = {\n X: 'X',\n Y: 'Y'\n} as const;\n\nexport type BoundingBox = [Coords, Coords, Coords, Coords];\n\nexport type SlimMouseEvent = Pick<\n MouseEvent,\n 'clientX' | 'clientY' | 'target' | 'type' | 'preventDefault' | 'button' | 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey'\n>;\n\nexport const EditorModeEnum = {\n NON_INTERACTIVE: 'NON_INTERACTIVE',\n EXPLORABLE_READONLY: 'EXPLORABLE_READONLY',\n EDITABLE: 'EDITABLE'\n} as const;\n\nexport const MainMenuOptionsEnum = {\n 'ACTION.OPEN': 'ACTION.OPEN',\n 'EXPORT.JSON': 'EXPORT.JSON',\n 'EXPORT.PNG': 'EXPORT.PNG',\n 'ACTION.CLEAR_CANVAS': 'ACTION.CLEAR_CANVAS',\n 'LINK.GITHUB': 'LINK.GITHUB',\n 'LINK.DISCORD': 'LINK.DISCORD',\n VERSION: 'VERSION'\n} as const;\n\nexport type MainMenuOptions = (keyof typeof MainMenuOptionsEnum)[];\n" }, { "path": "packages/fossflow-lib/src/types/dom-to-image-more.d.ts", "content": "declare module 'dom-to-image-more' {\n export interface Options {\n filter?: (node: Node) => boolean;\n bgcolor?: string;\n width?: number;\n height?: number;\n style?: any;\n quality?: number;\n cacheBust?: boolean;\n copyDefaultStyles?: boolean;\n preferredFontFormat?: string;\n fontEmbedCSS?: string | null;\n skipAutoScale?: boolean;\n }\n\n export function toPng(node: Node, options?: Options): Promise;\n export function toJpeg(node: Node, options?: Options): Promise;\n export function toSvg(node: Node, options?: Options): Promise;\n export function toBlob(node: Node, options?: Options): Promise;\n export function toPixelData(node: Node, options?: Options): Promise;\n\n const domtoimage: {\n toPng: typeof toPng;\n toJpeg: typeof toJpeg;\n toSvg: typeof toSvg;\n toBlob: typeof toBlob;\n toPixelData: typeof toPixelData;\n };\n\n export default domtoimage;\n}" }, { "path": "packages/fossflow-lib/src/types/index.ts", "content": "export * from './common';\nexport * from './model';\nexport * from './scene';\nexport * from './ui';\nexport * from './interactions';\nexport * from './isoflowProps';\n" }, { "path": "packages/fossflow-lib/src/types/interactions.ts", "content": "import { ModelStore, UiStateStore, Size } from 'src/types';\nimport { useScene } from 'src/hooks/useScene';\n\nexport interface State {\n model: ModelStore;\n scene: ReturnType;\n uiState: UiStateStore;\n rendererRef: HTMLElement;\n rendererSize: Size;\n isRendererInteraction: boolean;\n}\n\nexport type ModeActionsAction = (state: State) => void;\n\nexport type ModeActions = {\n entry?: ModeActionsAction;\n exit?: ModeActionsAction;\n mousemove?: ModeActionsAction;\n mousedown?: ModeActionsAction;\n mouseup?: ModeActionsAction;\n};\n" }, { "path": "packages/fossflow-lib/src/types/isoflowProps.ts", "content": "import type { EditorModeEnum, MainMenuOptions } from './common';\nimport type { Model } from './model';\nimport type { RendererProps } from './rendererProps';\n\nexport type InitialData = Model & {\n fitToView?: boolean;\n view?: string;\n};\n\nexport interface LocaleProps {\n common: {\n exampleText: string;\n };\n mainMenu: {\n undo: string;\n redo: string;\n open: string;\n exportJson: string;\n exportCompactJson: string;\n exportImage: string;\n clearCanvas: string;\n settings: string;\n gitHub: string;\n };\n helpDialog: {\n title: string;\n close: string;\n keyboardShortcuts: string;\n mouseInteractions: string;\n action: string;\n shortcut: string;\n method: string;\n description: string;\n note: string;\n noteContent: string;\n // Keyboard shortcuts\n undoAction: string;\n undoDescription: string;\n redoAction: string;\n redoDescription: string;\n redoAltAction: string;\n redoAltDescription: string;\n helpAction: string;\n helpDescription: string;\n zoomInAction: string;\n zoomInShortcut: string;\n zoomInDescription: string;\n zoomOutAction: string;\n zoomOutShortcut: string;\n zoomOutDescription: string;\n panCanvasAction: string;\n panCanvasShortcut: string;\n panCanvasDescription: string;\n contextMenuAction: string;\n contextMenuShortcut: string;\n contextMenuDescription: string;\n // Mouse interactions\n selectToolAction: string;\n selectToolShortcut: string;\n selectToolDescription: string;\n panToolAction: string;\n panToolShortcut: string;\n panToolDescription: string;\n addItemAction: string;\n addItemShortcut: string;\n addItemDescription: string;\n drawRectangleAction: string;\n drawRectangleShortcut: string;\n drawRectangleDescription: string;\n createConnectorAction: string;\n createConnectorShortcut: string;\n createConnectorDescription: string;\n addTextAction: string;\n addTextShortcut: string;\n addTextDescription: string;\n };\n connectorHintTooltip: {\n tipCreatingConnectors: string;\n tipConnectorTools: string;\n clickInstructionStart: string;\n clickInstructionMiddle: string;\n clickInstructionEnd: string;\n nowClickTarget: string;\n dragStart: string;\n dragEnd: string;\n rerouteStart: string;\n rerouteMiddle: string;\n rerouteEnd: string;\n };\n lassoHintTooltip: {\n tipLasso: string;\n tipFreehandLasso: string;\n lassoDragStart: string;\n lassoDragEnd: string;\n freehandDragStart: string;\n freehandDragMiddle: string;\n freehandDragEnd: string;\n freehandComplete: string;\n moveStart: string;\n moveMiddle: string;\n moveEnd: string;\n };\n importHintTooltip: {\n title: string;\n instructionStart: string;\n menuButton: string;\n instructionMiddle: string;\n openButton: string;\n instructionEnd: string;\n };\n connectorRerouteTooltip: {\n title: string;\n instructionStart: string;\n instructionSelect: string;\n instructionMiddle: string;\n instructionClick: string;\n instructionAnd: string;\n instructionDrag: string;\n instructionEnd: string;\n };\n connectorEmptySpaceTooltip: {\n message: string;\n instruction: string;\n };\n settings: {\n zoom: {\n description: string;\n zoomToCursor: string;\n zoomToCursorDesc: string;\n };\n hotkeys: {\n title: string;\n profile: string;\n profileQwerty: string;\n profileSmnrct: string;\n profileNone: string;\n tool: string;\n hotkey: string;\n toolSelect: string;\n toolPan: string;\n toolAddItem: string;\n toolRectangle: string;\n toolConnector: string;\n toolText: string;\n note: string;\n };\n pan: {\n title: string;\n mousePanOptions: string;\n emptyAreaClickPan: string;\n middleClickPan: string;\n rightClickPan: string;\n ctrlClickPan: string;\n altClickPan: string;\n keyboardPanOptions: string;\n arrowKeys: string;\n wasdKeys: string;\n ijklKeys: string;\n keyboardPanSpeed: string;\n note: string;\n };\n connector: {\n title: string;\n connectionMode: string;\n clickMode: string;\n clickModeDesc: string;\n dragMode: string;\n dragModeDesc: string;\n note: string;\n };\n iconPacks: {\n title: string;\n lazyLoading: string;\n lazyLoadingDesc: string;\n availablePacks: string;\n coreIsoflow: string;\n alwaysEnabled: string;\n awsPack: string;\n gcpPack: string;\n azurePack: string;\n kubernetesPack: string;\n loading: string;\n loaded: string;\n notLoaded: string;\n iconCount: string;\n lazyLoadingDisabledNote: string;\n note: string;\n };\n };\n lazyLoadingWelcome: {\n title: string;\n message: string;\n configPath: string;\n configPath2: string;\n canDisable: string;\n signature: string;\n };\n // other namespaces can be added here\n}\n\nexport interface IconPackManagerProps {\n lazyLoadingEnabled: boolean;\n onToggleLazyLoading: (enabled: boolean) => void;\n packInfo: Array<{\n name: string;\n displayName: string;\n loaded: boolean;\n loading: boolean;\n error: string | null;\n iconCount: number;\n }>;\n enabledPacks: string[];\n onTogglePack: (packName: string, enabled: boolean) => void;\n}\n\nexport interface IsoflowProps {\n initialData?: InitialData;\n mainMenuOptions?: MainMenuOptions;\n onModelUpdated?: (Model: Model) => void;\n width?: number | string;\n height?: number | string;\n enableDebugTools?: boolean;\n editorMode?: keyof typeof EditorModeEnum;\n renderer?: RendererProps;\n locale?: LocaleProps;\n iconPackManager?: IconPackManagerProps;\n}\n" }, { "path": "packages/fossflow-lib/src/types/model.ts", "content": "import z from 'zod';\nimport {\n iconSchema,\n modelSchema,\n modelItemSchema,\n modelItemsSchema,\n viewsSchema,\n viewSchema,\n viewItemSchema,\n connectorSchema,\n connectorLabelSchema,\n iconsSchema,\n colorsSchema,\n anchorSchema,\n textBoxSchema,\n rectangleSchema,\n connectorStyleOptions,\n connectorLineTypeOptions\n} from 'src/schemas';\nimport { StoreApi } from 'zustand';\n\nexport { connectorStyleOptions, connectorLineTypeOptions } from 'src/schemas';\nexport type Model = z.infer;\nexport type ModelItems = z.infer;\nexport type Icon = z.infer;\nexport type Icons = z.infer;\nexport type Colors = z.infer;\nexport type ModelItem = z.infer;\nexport type Views = z.infer;\nexport type View = z.infer;\nexport type ViewItem = z.infer;\nexport type ConnectorStyle = keyof typeof connectorStyleOptions;\nexport type ConnectorLineType = keyof typeof connectorLineTypeOptions;\nexport type ConnectorAnchor = z.infer;\nexport type ConnectorLabel = z.infer;\nexport type Connector = z.infer;\nexport type TextBox = z.infer;\nexport type Rectangle = z.infer;\n\nexport type ModelStore = Model & {\n actions: {\n get: StoreApi['getState'];\n set: StoreApi['setState'];\n };\n};\n\nexport type {\n ModelStoreWithHistory,\n HistoryState as ModelHistoryState\n} from 'src/stores/modelStore';\n\nexport type {\n SceneStoreWithHistory,\n SceneHistoryState\n} from 'src/stores/sceneStore';\n" }, { "path": "packages/fossflow-lib/src/types/rendererProps.ts", "content": "export interface RendererProps {\n showGrid?: boolean;\n backgroundColor?: string;\n expandLabels?: boolean;\n}\n" }, { "path": "packages/fossflow-lib/src/types/scene.ts", "content": "import { StoreApi } from 'zustand';\nimport type { Coords, Rect, Size } from './common';\n\nexport const tileOriginOptions = {\n CENTER: 'CENTER',\n TOP: 'TOP',\n BOTTOM: 'BOTTOM',\n LEFT: 'LEFT',\n RIGHT: 'RIGHT'\n} as const;\n\nexport type TileOrigin = keyof typeof tileOriginOptions;\n\nexport const ItemReferenceTypeOptions = {\n ITEM: 'ITEM',\n CONNECTOR: 'CONNECTOR',\n CONNECTOR_ANCHOR: 'CONNECTOR_ANCHOR',\n TEXTBOX: 'TEXTBOX',\n RECTANGLE: 'RECTANGLE'\n} as const;\n\nexport type ItemReferenceType = keyof typeof ItemReferenceTypeOptions;\n\nexport type ItemReference = {\n type: ItemReferenceType;\n id: string;\n};\n\nexport type ConnectorPath = {\n tiles: Coords[];\n rectangle: Rect;\n};\n\nexport interface SceneConnector {\n path: ConnectorPath;\n}\n\nexport interface SceneTextBox {\n size: Size;\n}\n\nexport interface Scene {\n connectors: {\n [key: string]: SceneConnector;\n };\n textBoxes: {\n [key: string]: SceneTextBox;\n };\n}\n\nexport type SceneStore = Scene & {\n actions: {\n get: StoreApi['getState'];\n set: StoreApi['setState'];\n };\n};\n" }, { "path": "packages/fossflow-lib/src/types/ui.ts", "content": "import { Coords, EditorModeEnum, MainMenuOptions } from './common';\nimport { Icon } from './model';\nimport { ItemReference } from './scene';\nimport { HotkeyProfile } from 'src/config/hotkeys';\nimport { PanSettings } from 'src/config/panSettings';\nimport { ZoomSettings } from 'src/config/zoomSettings';\nimport { LabelSettings } from 'src/config/labelSettings';\nimport { IconPackManagerProps } from './isoflowProps';\n\ninterface AddItemControls {\n type: 'ADD_ITEM';\n}\n\nexport type ItemControls = ItemReference | AddItemControls;\n\nexport interface Mouse {\n position: {\n screen: Coords;\n tile: Coords;\n };\n mousedown: {\n screen: Coords;\n tile: Coords;\n } | null;\n delta: {\n screen: Coords;\n tile: Coords;\n } | null;\n}\n\n// Mode types\nexport interface InteractionsDisabled {\n type: 'INTERACTIONS_DISABLED';\n showCursor: boolean;\n}\n\nexport interface CursorMode {\n type: 'CURSOR';\n showCursor: boolean;\n mousedownItem: ItemReference | null;\n}\n\nexport interface DragItemsMode {\n type: 'DRAG_ITEMS';\n showCursor: boolean;\n items: ItemReference[];\n isInitialMovement: Boolean;\n}\n\nexport interface PanMode {\n type: 'PAN';\n showCursor: boolean;\n}\n\nexport interface PlaceIconMode {\n type: 'PLACE_ICON';\n showCursor: boolean;\n id: string | null;\n}\n\nexport interface ConnectorMode {\n type: 'CONNECTOR';\n showCursor: boolean;\n id: string | null;\n // For click-based connection mode\n startAnchor?: {\n tile?: Coords;\n itemId?: string;\n };\n isConnecting?: boolean;\n}\n\nexport interface DrawRectangleMode {\n type: 'RECTANGLE.DRAW';\n showCursor: boolean;\n id: string | null;\n}\n\nexport const AnchorPositionOptions = {\n BOTTOM_LEFT: 'BOTTOM_LEFT',\n BOTTOM_RIGHT: 'BOTTOM_RIGHT',\n TOP_RIGHT: 'TOP_RIGHT',\n TOP_LEFT: 'TOP_LEFT'\n} as const;\n\nexport type AnchorPosition = keyof typeof AnchorPositionOptions;\n\nexport interface TransformRectangleMode {\n type: 'RECTANGLE.TRANSFORM';\n showCursor: boolean;\n id: string;\n selectedAnchor: AnchorPosition | null;\n}\n\nexport interface TextBoxMode {\n type: 'TEXTBOX';\n showCursor: boolean;\n id: string | null;\n}\n\nexport interface LassoMode {\n type: 'LASSO';\n showCursor: boolean;\n selection: {\n startTile: Coords;\n endTile: Coords;\n items: ItemReference[];\n } | null;\n isDragging: boolean;\n}\n\nexport interface FreehandLassoMode {\n type: 'FREEHAND_LASSO';\n showCursor: boolean;\n path: Coords[]; // Screen coordinates of the drawn path\n selection: {\n pathTiles: Coords[]; // Tile coordinates of the path points\n items: ItemReference[];\n } | null;\n isDragging: boolean;\n}\n\nexport type Mode =\n | InteractionsDisabled\n | CursorMode\n | PanMode\n | PlaceIconMode\n | ConnectorMode\n | DrawRectangleMode\n | TransformRectangleMode\n | DragItemsMode\n | TextBoxMode\n | LassoMode\n | FreehandLassoMode;\n// End mode types\n\nexport interface Scroll {\n position: Coords;\n offset: Coords;\n}\n\nexport interface IconCollectionState {\n id?: string;\n isExpanded: boolean;\n}\n\nexport type IconCollectionStateWithIcons = IconCollectionState & {\n icons: Icon[];\n};\n\nexport const DialogTypeEnum = {\n EXPORT_IMAGE: 'EXPORT_IMAGE',\n HELP: 'HELP',\n SETTINGS: 'SETTINGS'\n} as const;\n\nexport interface ContextMenu {\n type: 'ITEM' | 'EMPTY';\n item?: ItemReference;\n tile: Coords;\n}\n\n\nexport type ConnectorInteractionMode = 'click' | 'drag';\n\nexport interface UiState {\n view: string;\n mainMenuOptions: MainMenuOptions;\n editorMode: keyof typeof EditorModeEnum;\n iconCategoriesState: IconCollectionState[];\n mode: Mode;\n dialog: keyof typeof DialogTypeEnum | null;\n isMainMenuOpen: boolean;\n itemControls: ItemControls | null;\n contextMenu: ContextMenu | null;\n zoom: number;\n scroll: Scroll;\n mouse: Mouse;\n rendererEl: HTMLDivElement | null;\n enableDebugTools: boolean;\n hotkeyProfile: HotkeyProfile;\n panSettings: PanSettings;\n zoomSettings: ZoomSettings;\n labelSettings: LabelSettings;\n connectorInteractionMode: ConnectorInteractionMode;\n expandLabels: boolean;\n iconPackManager: IconPackManagerProps | null;\n\n}\n\nexport interface UiStateActions {\n setView: (view: string) => void;\n setMainMenuOptions: (options: MainMenuOptions) => void;\n setEditorMode: (mode: keyof typeof EditorModeEnum) => void;\n setIconCategoriesState: (iconCategoriesState: IconCollectionState[]) => void;\n resetUiState: () => void;\n setMode: (mode: Mode) => void;\n incrementZoom: () => void;\n decrementZoom: () => void;\n setIsMainMenuOpen: (isOpen: boolean) => void;\n setDialog: (dialog: keyof typeof DialogTypeEnum | null) => void;\n setZoom: (zoom: number) => void;\n setScroll: (scroll: Scroll) => void;\n setItemControls: (itemControls: ItemControls | null) => void;\n setContextMenu: (contextMenu: ContextMenu | null) => void;\n setMouse: (mouse: Mouse) => void;\n setRendererEl: (el: HTMLDivElement) => void;\n setEnableDebugTools: (enabled: boolean) => void;\n setHotkeyProfile: (profile: HotkeyProfile) => void;\n setPanSettings: (settings: PanSettings) => void;\n setZoomSettings: (settings: ZoomSettings) => void;\n setLabelSettings: (settings: LabelSettings) => void;\n setConnectorInteractionMode: (mode: ConnectorInteractionMode) => void;\n setExpandLabels: (expand: boolean) => void;\n setIconPackManager: (iconPackManager: IconPackManagerProps | null) => void;\n\n}\n\nexport type UiStateStore = UiState & {\n actions: UiStateActions;\n};\n" }, { "path": "packages/fossflow-lib/src/utils/CoordsUtils.ts", "content": "import { Coords } from 'src/types';\n\nexport class CoordsUtils {\n static isEqual(base: Coords, operand: Coords) {\n return base.x === operand.x && base.y === operand.y;\n }\n\n static subtract(base: Coords, operand: Coords): Coords {\n return { x: base.x - operand.x, y: base.y - operand.y };\n }\n\n static add(base: Coords, operand: Coords): Coords {\n return { x: base.x + operand.x, y: base.y + operand.y };\n }\n\n static multiply(base: Coords, operand: number): Coords {\n return { x: base.x * operand, y: base.y * operand };\n }\n\n static toString(coords: Coords) {\n return `x: ${coords.x}, y: ${coords.y}`;\n }\n\n static sum(coords: Coords) {\n return coords.x + coords.y;\n }\n\n static zero() {\n return { x: 0, y: 0 };\n }\n}\n" }, { "path": "packages/fossflow-lib/src/utils/SizeUtils.ts", "content": "import { Size } from 'src/types';\n\nexport class SizeUtils {\n static isEqual(base: Size, operand: Size) {\n return base.width === operand.width && base.height === operand.height;\n }\n\n static subtract(base: Size, operand: Size): Size {\n return {\n width: base.width - operand.width,\n height: base.height - operand.height\n };\n }\n\n static add(base: Size, operand: Size): Size {\n return {\n width: base.width + operand.width,\n height: base.height + operand.height\n };\n }\n\n static multiply(base: Size, operand: number): Size {\n return { width: base.width * operand, height: base.height * operand };\n }\n\n static toString(size: Size) {\n return `width: ${size.width}, height: ${size.height}`;\n }\n\n static zero() {\n return { width: 0, y: 0 };\n }\n}\n" }, { "path": "packages/fossflow-lib/src/utils/__tests__/common.test.ts", "content": "import { clamp } from '../common';\n\ndescribe('Tests common utilities', () => {\n test('clamp() works correctly', () => {\n const clampNoChange = clamp(5, 0, 10);\n const clampMin = clamp(5, 6, 10);\n const clampMax = clamp(5, 0, 3);\n const clampDraw1 = clamp(5, 5, 10);\n const clampDraw2 = clamp(5, 0, 5);\n\n expect(clampNoChange).toBe(5);\n expect(clampMin).toBe(6);\n expect(clampMax).toBe(3);\n expect(clampDraw1).toBe(5);\n expect(clampDraw2).toBe(5);\n });\n});\n" }, { "path": "packages/fossflow-lib/src/utils/__tests__/immer.test.ts", "content": "import { produce } from 'immer';\n\nconst createItem = (x: number, y: number) => {\n return {\n x,\n y\n };\n};\n\n// Although we don't normally test third party libraries,\n// this is useful to explore the behaviour of immer\ndescribe('Tests immer', () => {\n test('Array equivalence without immer', () => {\n const arr = [createItem(0, 0), createItem(1, 1)];\n const newArr = [createItem(0, 0), createItem(2, 2)];\n\n expect(arr[0]).not.toBe(newArr[0]);\n });\n\n test('Array equivalence with immer', () => {\n const arr = [createItem(0, 0), createItem(1, 1)];\n const newArr = produce(arr, (draft) => {\n draft[1] = createItem(2, 2);\n });\n\n expect(arr[0]).toBe(newArr[0]);\n });\n});\n" }, { "path": "packages/fossflow-lib/src/utils/__tests__/renderer.test.ts", "content": "import { Coords, Size, Scroll } from 'src/types';\nimport { CoordsUtils, SizeUtils } from 'src/utils';\nimport { PROJECTED_TILE_SIZE } from 'src/config';\nimport { getGridSubset, isWithinBounds, screenToIso } from '../renderer';\n\nconst getRendererSize = (tileSize: Size, zoom: number = 1): Size => {\n const projectedTileSize = SizeUtils.multiply(PROJECTED_TILE_SIZE, zoom);\n\n return {\n width: projectedTileSize.width * tileSize.width,\n height: projectedTileSize.height * tileSize.height\n };\n};\n\nconst getScroll = (coords: Coords): Scroll => {\n return {\n position: coords,\n offset: CoordsUtils.zero()\n };\n};\n\ndescribe('Tests renderer utils', () => {\n test('getGridSubset() works correctly', () => {\n const gridSubset = getGridSubset([\n { x: 5, y: 5 },\n { x: 7, y: 7 }\n ]);\n\n expect(gridSubset).toEqual([\n { x: 5, y: 5 },\n { x: 5, y: 6 },\n { x: 5, y: 7 },\n { x: 6, y: 5 },\n { x: 6, y: 6 },\n { x: 6, y: 7 },\n { x: 7, y: 5 },\n { x: 7, y: 6 },\n { x: 7, y: 7 }\n ]);\n });\n\n test('isWithinBounds() works correctly', () => {\n const bounds: Coords[] = [\n { x: 4, y: 4 },\n { x: 6, y: 6 }\n ];\n\n const withinBounds = isWithinBounds({ x: 5, y: 5 }, bounds);\n const onBorder = isWithinBounds({ x: 4, y: 4 }, bounds);\n const outsideBounds = isWithinBounds({ x: 3, y: 3 }, bounds);\n\n expect(withinBounds).toBe(true);\n expect(onBorder).toBe(true);\n expect(outsideBounds).toBe(false);\n });\n\n test('screenToIso() works correctly when mouse is at center of project', () => {\n const zoom = 1;\n const rendererSize = getRendererSize({ width: 10, height: 10 }, zoom);\n const scroll = getScroll({ x: 0, y: 0 });\n const tile = screenToIso({\n mouse: {\n x: rendererSize.width / 2,\n y: rendererSize.height / 2\n },\n zoom,\n scroll,\n rendererSize\n });\n\n expect(tile).toEqual({ x: 0, y: -0 });\n });\n\n test('screenToIso() works correctly when mouse is at topLeft corner of project', () => {\n const zoom = 1;\n const rendererSize = getRendererSize({ width: 10, height: 10 }, zoom);\n const scroll = getScroll({ x: 0, y: 0 });\n const tile = screenToIso({\n mouse: {\n x: 0,\n y: 0\n },\n zoom,\n scroll,\n rendererSize\n });\n\n expect(tile).toEqual({ x: 0, y: 10 });\n });\n\n test('screenToIso() works correctly when mouse is at topLeft corner of project and zoom is 0.5', () => {\n const zoom = 0.5;\n const rendererSize = getRendererSize({ width: 10, height: 10 }, zoom);\n const scroll = getScroll({ x: 0, y: 0 });\n const tile = screenToIso({\n mouse: {\n x: 0,\n y: 0\n },\n zoom,\n scroll,\n rendererSize\n });\n\n expect(tile).toEqual({ x: 0, y: 10 });\n });\n\n test('screenToIso() works correctly when mouse is at center of project and zoom is 0.5 and screen is halfway scrolled', () => {\n const zoom = 1;\n const rendererSize = getRendererSize({ width: 10, height: 10 }, zoom);\n const scroll = getScroll({\n x: rendererSize.width / 2,\n y: rendererSize.height / 2\n });\n const tile = screenToIso({\n mouse: {\n x: rendererSize.width / 2,\n y: rendererSize.height / 2\n },\n zoom,\n scroll,\n rendererSize\n });\n\n expect(tile).toEqual({ x: 0, y: 10 });\n });\n});\n" }, { "path": "packages/fossflow-lib/src/utils/common.ts", "content": "import chroma from 'chroma-js';\nimport { Icon, EditorModeEnum, Mode } from 'src/types';\nimport { v4 as uuid } from 'uuid';\n\nexport const generateId = () => {\n return uuid();\n};\n\nexport const clamp = (num: number, min: number, max: number) => {\n return Math.max(Math.min(num, max), min);\n};\n\nexport const getRandom = (min: number, max: number) => {\n return Math.floor(Math.random() * (max - min) + min);\n};\n\nexport const roundToOneDecimalPlace = (num: number) => {\n return Math.round(num * 10) / 10;\n};\n\nexport const roundToTwoDecimalPlaces = (num: number) => {\n return Math.round(num * 100) / 100;\n};\n\ninterface GetColorVariantOpts {\n alpha?: number;\n grade?: number;\n}\n\nexport const getColorVariant = (\n color: string,\n variant: 'light' | 'dark',\n { alpha = 1, grade = 1 }: GetColorVariantOpts\n) => {\n switch (variant) {\n case 'light':\n return chroma(color).brighten(grade).alpha(alpha).css();\n case 'dark':\n return chroma(color).darken(grade).saturate(grade).alpha(alpha).css();\n default:\n return chroma(color).alpha(alpha).css();\n }\n};\n\nexport const setWindowCursor = (cursor: string) => {\n window.document.body.style.cursor = cursor;\n};\n\nexport const toPx = (value: number | string) => {\n return `${value}px`;\n};\n\nexport const categoriseIcons = (icons: Icon[]) => {\n const categories: { name?: string; icons: Icon[] }[] = [];\n\n icons.forEach((icon) => {\n const collection = categories.find((cat) => {\n return cat.name === icon.collection;\n });\n\n if (!collection) {\n categories.push({ name: icon.collection, icons: [icon] });\n } else {\n collection.icons.push(icon);\n }\n });\n\n return categories;\n};\n\nexport const getStartingMode = (\n editorMode: keyof typeof EditorModeEnum\n): Mode => {\n switch (editorMode) {\n case 'EDITABLE':\n return { type: 'CURSOR', showCursor: true, mousedownItem: null };\n case 'EXPLORABLE_READONLY':\n return { type: 'PAN', showCursor: false };\n case 'NON_INTERACTIVE':\n return { type: 'INTERACTIONS_DISABLED', showCursor: false };\n default:\n throw new Error('Invalid editor mode.');\n }\n};\n\nexport function getItemByIdOrThrow(\n values: T[],\n id: string\n): { value: T; index: number } {\n const index = values.findIndex((val) => {\n return val.id === id;\n });\n\n if (index === -1) {\n throw new Error(`Item with id \"${id}\" not found.`);\n }\n\n return { value: values[index], index };\n}\n\nexport function getItemById(\n values: T[],\n id: string\n): { value: T; index: number } | null {\n const index = values.findIndex((val) => {\n return val.id === id;\n });\n\n if (index === -1) {\n return null;\n }\n\n return { value: values[index], index };\n}\n\nexport function getItemByIndexOrThrow(items: T[], index: number): T {\n const item = items[index];\n\n if (!item) {\n throw new Error(`Item with index \"${index}\" not found.`);\n }\n\n return item;\n}\n" }, { "path": "packages/fossflow-lib/src/utils/connectorLabels.ts", "content": "import { Connector, ConnectorLabel } from 'src/types';\nimport { generateId } from './common';\n\n/**\n * Migrates legacy connector labels (description, startLabel, endLabel)\n * to the new flexible labels array format\n */\nexport const migrateLegacyLabels = (connector: Connector): ConnectorLabel[] => {\n const labels: ConnectorLabel[] = [];\n\n // Convert startLabel to 10% position\n if (connector.startLabel) {\n labels.push({\n id: generateId(),\n text: connector.startLabel,\n position: 10,\n height: connector.startLabelHeight,\n line: '1'\n });\n }\n\n // Convert description (center label) to 50% position\n if (connector.description) {\n labels.push({\n id: generateId(),\n text: connector.description,\n position: 50,\n height: connector.centerLabelHeight,\n line: '1'\n });\n }\n\n // Convert endLabel to 90% position\n if (connector.endLabel) {\n labels.push({\n id: generateId(),\n text: connector.endLabel,\n position: 90,\n height: connector.endLabelHeight,\n line: '1'\n });\n }\n\n return labels;\n};\n\n/**\n * Gets all labels for a connector, migrating legacy labels if needed\n */\nexport const getConnectorLabels = (connector: Connector): ConnectorLabel[] => {\n // If connector already has new-style labels, use them\n if (connector.labels && connector.labels.length > 0) {\n return connector.labels;\n }\n\n // Otherwise, migrate legacy labels\n return migrateLegacyLabels(connector);\n};\n\n/**\n * Calculates the actual tile position along the connector path for a given percentage\n */\nexport const getLabelTileIndex = (\n pathLength: number,\n position: number\n): number => {\n if (pathLength === 0) return 0;\n\n const index = Math.round((position / 100) * (pathLength - 1));\n return Math.max(0, Math.min(index, pathLength - 1));\n};\n" }, { "path": "packages/fossflow-lib/src/utils/exportOptions.ts", "content": "import domtoimage from 'dom-to-image-more';\nimport FileSaver from 'file-saver';\nimport { Model, Size } from '../types';\nimport { icons as availableIcons } from '../examples/initialData';\n\nexport const generateGenericFilename = (extension: string) => {\n return `fossflow-export-${new Date().toISOString()}.${extension}`;\n};\n\nexport const base64ToBlob = (\n base64: string,\n contentType: string,\n sliceSize = 512\n) => {\n const byteCharacters = atob(base64);\n const byteArrays = [];\n\n for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {\n const slice = byteCharacters.slice(offset, offset + sliceSize);\n\n const byteNumbers = new Array(slice.length);\n\n for (let i = 0; i < slice.length; i += 1) {\n byteNumbers[i] = slice.charCodeAt(i);\n }\n\n const byteArray = new Uint8Array(byteNumbers);\n byteArrays.push(byteArray);\n }\n\n const blob = new Blob(byteArrays, { type: contentType });\n\n return blob;\n};\n\nexport const downloadFile = (data: Blob, filename: string) => {\n FileSaver.saveAs(data, filename);\n};\n\nexport const transformToCompactFormat = (model: Model) => {\n const { items, views, icons, title } = model;\n\n // Compact format: ultra-minimal for LLM generation\n const compactItems = items.map((item, index) => [\n item.name.substring(0, 30), // Truncated name\n item.icon || 'block', // Icon reference only (no base64)\n item.description?.substring(0, 100) || '' // Truncated description\n ]);\n\n const compactViews = views.map((view) => {\n const positions = view.items.map((viewItem) => {\n const itemIndex = items.findIndex(item => item.id === viewItem.id);\n return [itemIndex, viewItem.tile.x, viewItem.tile.y];\n });\n\n const connections = view.connectors?.map((connector) => {\n const fromIndex = items.findIndex(item => item.id === connector.anchors[0]?.ref.item);\n const toIndex = items.findIndex(item => item.id === connector.anchors[connector.anchors.length - 1]?.ref.item);\n return [fromIndex, toIndex];\n }).filter(conn => conn[0] !== -1 && conn[1] !== -1) || [];\n\n return [positions, connections];\n });\n\n return {\n t: title?.substring(0, 40) || 'Untitled',\n i: compactItems,\n v: compactViews,\n _: { f: 'compact', v: '1.0' }\n };\n};\n\nexport const transformFromCompactFormat = (compactModel: any): Model => {\n const { t, i, v, _ } = compactModel;\n\n // Restore from compact format\n const fullItems = i.map((item: any, index: number) => ({\n id: `item_${index}`,\n name: item[0],\n icon: item[1],\n description: item[2] || '' // Restore description if available\n }));\n\n // Resolve icons from the internal icon library\n const iconSet = new Set();\n i.forEach((item: any) => {\n if (item[1]) iconSet.add(item[1]);\n });\n\n const fullIcons = Array.from(iconSet).map(iconName => {\n // Find the icon in the available icons library\n const existingIcon = availableIcons.find(icon => icon.id === iconName || icon.name === iconName);\n \n if (existingIcon) {\n // Use the existing icon data with proper URL\n return {\n id: iconName,\n name: existingIcon.name,\n url: existingIcon.url,\n collection: existingIcon.collection,\n isIsometric: existingIcon.isIsometric ?? true\n };\n } else {\n // Fallback for unknown icons\n return {\n id: iconName,\n name: iconName,\n url: '', // App will use default icon\n isIsometric: true\n };\n }\n });\n\n const fullViews = v.map((view: any, viewIndex: number) => {\n const [positions, connections] = view;\n\n const viewItems = positions.map((pos: any) => {\n const [itemIndex, x, y] = pos;\n return {\n id: `item_${itemIndex}`,\n tile: { x, y },\n labelHeight: 80\n };\n });\n\n const connectors = connections.map((conn: any, connIndex: number) => {\n const [fromIndex, toIndex] = conn;\n return {\n id: `conn_${viewIndex}_${connIndex}`,\n color: 'color1',\n anchors: [\n { id: `a_${viewIndex}_${connIndex}_0`, ref: { item: `item_${fromIndex}` } },\n { id: `a_${viewIndex}_${connIndex}_1`, ref: { item: `item_${toIndex}` } }\n ],\n width: 10,\n description: '',\n style: 'SOLID'\n };\n });\n\n return {\n id: `view_${viewIndex}`,\n name: `View ${viewIndex + 1}`,\n items: viewItems,\n connectors,\n rectangles: [],\n textBoxes: []\n };\n });\n\n return {\n title: t,\n version: '1.0',\n items: fullItems,\n views: fullViews,\n icons: fullIcons,\n colors: [{ id: 'color1', value: '#a5b8f3' }]\n };\n};\n\nexport const exportAsJSON = (model: Model) => {\n const data = new Blob([JSON.stringify(model)], {\n type: 'application/json;charset=utf-8'\n });\n\n downloadFile(data, generateGenericFilename('json'));\n};\n\nexport const exportAsCompactJSON = (model: Model) => {\n const compactModel = transformToCompactFormat(model);\n const data = new Blob([JSON.stringify(compactModel)], {\n type: 'application/json;charset=utf-8'\n });\n\n downloadFile(data, generateGenericFilename('compact.json'));\n};\n\nexport const exportAsImage = async (\n el: HTMLDivElement,\n size?: Size,\n scale: number = 1,\n bgcolor: string = '#ffffff'\n) => {\n // Calculate scaled dimensions\n const width = size ? size.width * scale : el.clientWidth * scale;\n const height = size ? size.height * scale : el.clientHeight * scale;\n\n // dom-to-image-more is a better maintained fork\n const options = {\n width,\n height,\n cacheBust: true,\n bgcolor,\n quality: 1.0,\n // Apply CSS transform for high-quality scaling\n style: scale !== 1 ? {\n transform: `scale(${scale})`,\n transformOrigin: 'top left'\n } : undefined\n };\n\n try {\n const imageData = await domtoimage.toPng(el, options);\n return imageData;\n } catch (error) {\n console.error('Export failed, trying fallback method:', error);\n // Fallback: try with minimal options\n return await domtoimage.toPng(el, {\n width,\n height,\n cacheBust: true,\n bgcolor\n });\n }\n};\n\nexport const exportAsSVG = async (\n el: HTMLDivElement,\n size?: Size,\n bgcolor: string = '#ffffff'\n) => {\n const width = size ? size.width : el.clientWidth;\n const height = size ? size.height : el.clientHeight;\n\n const options = {\n width,\n height,\n cacheBust: true,\n bgcolor,\n quality: 1.0\n };\n\n try {\n const svgData = await domtoimage.toSvg(el, options);\n return svgData;\n } catch (error) {\n console.error('SVG export failed, trying fallback method:', error);\n // Fallback: try with minimal options\n return await domtoimage.toSvg(el, {\n width,\n height,\n cacheBust: true,\n bgcolor\n });\n }\n};" }, { "path": "packages/fossflow-lib/src/utils/findNearestUnoccupiedTile.ts", "content": "import { Coords } from 'src/types';\nimport { useScene } from 'src/hooks/useScene';\nimport { getItemAtTile } from './renderer';\n\n/**\n * Finds the nearest unoccupied tile to the target tile using a spiral search pattern\n * @param targetTile - The desired tile position\n * @param scene - The current scene\n * @param maxDistance - Maximum search distance (default: 10)\n * @returns The nearest unoccupied tile, or null if none found within maxDistance\n */\nexport const findNearestUnoccupiedTile = (\n targetTile: Coords,\n scene: ReturnType,\n maxDistance: number = 10\n): Coords | null => {\n // Check if the target tile itself is unoccupied\n const itemAtTarget = getItemAtTile({ tile: targetTile, scene });\n if (!itemAtTarget || itemAtTarget.type !== 'ITEM') {\n return targetTile;\n }\n\n // Spiral search pattern: right, down, left, up\n const directions = [\n { x: 1, y: 0 }, // right\n { x: 0, y: 1 }, // down\n { x: -1, y: 0 }, // left\n { x: 0, y: -1 } // up\n ];\n\n // Search in expanding rings around the target\n for (let distance = 1; distance <= maxDistance; distance++) {\n // Start from the top-left of the ring\n let currentTile = {\n x: targetTile.x - distance,\n y: targetTile.y - distance\n };\n\n // Check all tiles in this ring\n for (let side = 0; side < 4; side++) {\n const direction = directions[side];\n const sideLength = distance * 2;\n \n for (let step = 0; step < sideLength; step++) {\n // Move to the next tile on this side of the ring\n currentTile = {\n x: currentTile.x + direction.x,\n y: currentTile.y + direction.y\n };\n\n // Check if this tile is within bounds and unoccupied\n const itemAtTile = getItemAtTile({ tile: currentTile, scene });\n if (!itemAtTile || itemAtTile.type !== 'ITEM') {\n return currentTile;\n }\n }\n }\n }\n\n // No unoccupied tile found within maxDistance\n return null;\n};\n\n/**\n * Finds the nearest unoccupied tile for multiple items being placed/moved\n * Ensures all items can be placed without overlapping\n * @param items - Array of items with their target tiles\n * @param scene - The current scene\n * @param excludeIds - IDs of items to exclude from occupation check (e.g., items being moved)\n * @returns Array of nearest unoccupied tiles for each item, or null if cannot place all\n */\nexport const findNearestUnoccupiedTilesForGroup = (\n items: { id: string; targetTile: Coords }[],\n scene: ReturnType,\n excludeIds: string[] = []\n): Coords[] | null => {\n const result: Coords[] = [];\n const occupiedTiles = new Set();\n\n // Add existing items to occupied tiles (excluding the ones being moved)\n scene.items.forEach(item => {\n if (!excludeIds.includes(item.id)) {\n occupiedTiles.add(`${item.tile.x},${item.tile.y}`);\n }\n });\n\n // Find unoccupied tiles for each item\n for (const item of items) {\n let foundTile: Coords | null = null;\n const targetKey = `${item.targetTile.x},${item.targetTile.y}`;\n\n // Check if target is available\n if (!occupiedTiles.has(targetKey)) {\n foundTile = item.targetTile;\n } else {\n // Search for nearest unoccupied tile\n for (let distance = 1; distance <= 10; distance++) {\n // Check tiles in a square ring at this distance\n for (let dx = -distance; dx <= distance; dx++) {\n for (let dy = -distance; dy <= distance; dy++) {\n // Only check tiles on the ring perimeter\n if (Math.abs(dx) === distance || Math.abs(dy) === distance) {\n const checkTile = {\n x: item.targetTile.x + dx,\n y: item.targetTile.y + dy\n };\n const checkKey = `${checkTile.x},${checkTile.y}`;\n \n if (!occupiedTiles.has(checkKey)) {\n const itemAtTile = getItemAtTile({ tile: checkTile, scene });\n if (!itemAtTile || itemAtTile.type !== 'ITEM' || excludeIds.includes(itemAtTile.id)) {\n foundTile = checkTile;\n break;\n }\n }\n }\n }\n if (foundTile) break;\n }\n if (foundTile) break;\n }\n }\n\n if (!foundTile) {\n return null; // Cannot place all items\n }\n\n result.push(foundTile);\n occupiedTiles.add(`${foundTile.x},${foundTile.y}`);\n }\n\n return result;\n};" }, { "path": "packages/fossflow-lib/src/utils/index.ts", "content": "export * from './CoordsUtils';\nexport * from './SizeUtils';\nexport * from './common';\nexport * from './pathfinder';\nexport * from './renderer';\nexport * from './exportOptions';\nexport * from './model';\nexport * from './findNearestUnoccupiedTile';\nexport * from './pointInPolygon';\nexport * from './connectorLabels';\n" }, { "path": "packages/fossflow-lib/src/utils/model.ts", "content": "import { produce } from 'immer';\nimport { Model, ModelStore } from 'src/types';\nimport { validateModel } from 'src/schemas/validation';\nimport { getItemByIdOrThrow } from './common';\n\nexport const fixModel = (model: Model): Model => {\n const issues = validateModel(model);\n\n return issues.reduce((acc, issue) => {\n if (issue.type === 'INVALID_MODEL_TO_ICON_REF') {\n return produce(acc, (draft) => {\n const { index: itemIndex } = getItemByIdOrThrow(\n draft.items,\n issue.params.modelItem\n );\n\n draft.items[itemIndex].icon = undefined;\n });\n }\n\n if (issue.type === 'CONNECTOR_TOO_FEW_ANCHORS') {\n return produce(acc, (draft) => {\n const view = getItemByIdOrThrow(draft.views, issue.params.view);\n\n const connector = getItemByIdOrThrow(\n view.value.connectors ?? [],\n issue.params.connector\n );\n\n draft.views[view.index].connectors?.splice(connector.index, 1);\n });\n }\n\n if (issue.type === 'INVALID_ANCHOR_TO_ANCHOR_REF') {\n return produce(acc, (draft) => {\n const view = getItemByIdOrThrow(draft.views, issue.params.view);\n\n const connector = getItemByIdOrThrow(\n view.value.connectors ?? [],\n issue.params.connector\n );\n\n const anchor = getItemByIdOrThrow(\n connector.value.anchors,\n issue.params.srcAnchor\n );\n\n connector.value.anchors.splice(anchor.index, 1);\n });\n }\n\n return acc;\n }, model);\n};\n\nexport const modelFromModelStore = (modelStore: ModelStore): Model => {\n return {\n version: modelStore.version,\n title: modelStore.title,\n description: modelStore.description,\n colors: modelStore.colors,\n icons: modelStore.icons,\n items: modelStore.items,\n views: modelStore.views\n };\n};\n" }, { "path": "packages/fossflow-lib/src/utils/pathfinder.ts", "content": "import PF from 'pathfinding';\nimport { Size, Coords } from 'src/types';\n\ninterface Args {\n gridSize: Size;\n from: Coords;\n to: Coords;\n}\n\nexport const findPath = ({ gridSize, from, to }: Args): Coords[] => {\n const grid = new PF.Grid(gridSize.width, gridSize.height);\n const finder = new PF.AStarFinder({\n heuristic: PF.Heuristic.manhattan,\n diagonalMovement: PF.DiagonalMovement.Always\n });\n const path = finder.findPath(from.x, from.y, to.x, to.y, grid);\n\n const pathTiles = path.map((tile) => {\n return {\n x: tile[0],\n y: tile[1]\n };\n });\n\n return pathTiles;\n};\n" }, { "path": "packages/fossflow-lib/src/utils/pointInPolygon.ts", "content": "import { Coords } from 'src/types';\n\n/**\n * Ray casting algorithm to determine if a point is inside a polygon\n * @param point - The point to check (tile coordinates)\n * @param polygon - Array of vertices defining the polygon (tile coordinates)\n * @returns true if the point is inside the polygon\n */\nexport const isPointInPolygon = (point: Coords, polygon: Coords[]): boolean => {\n if (polygon.length < 3) return false;\n\n let inside = false;\n const x = point.x;\n const y = point.y;\n\n for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n const xi = polygon[i].x;\n const yi = polygon[i].y;\n const xj = polygon[j].x;\n const yj = polygon[j].y;\n\n const intersect =\n yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;\n\n if (intersect) inside = !inside;\n }\n\n return inside;\n};\n\n/**\n * Convert an array of screen coordinates to tile coordinates using the screenToIso function\n */\nexport const screenPathToTilePath = (\n screenPath: Coords[],\n screenToIsoFn: (coords: Coords) => Coords\n): Coords[] => {\n return screenPath.map((point) => screenToIsoFn(point));\n};\n\n/**\n * Create a smooth SVG path from a series of points using quadratic curves\n * @param points - Array of screen coordinates\n * @returns SVG path string\n */\nexport const createSmoothPath = (points: Coords[]): string => {\n if (points.length < 2) return '';\n\n let path = `M ${points[0].x},${points[0].y}`;\n\n // Use quadratic bezier curves for smooth lines\n for (let i = 1; i < points.length; i++) {\n const current = points[i];\n const previous = points[i - 1];\n\n // Calculate control point as midpoint\n const cpX = (previous.x + current.x) / 2;\n const cpY = (previous.y + current.y) / 2;\n\n if (i === 1) {\n // First segment - line to control point, then curve\n path += ` L ${cpX},${cpY}`;\n } else {\n // Subsequent segments - quadratic curve\n path += ` Q ${previous.x},${previous.y} ${cpX},${cpY}`;\n }\n }\n\n // Complete the curve to the last point\n const lastPoint = points[points.length - 1];\n const secondLastPoint = points[points.length - 2];\n path += ` Q ${secondLastPoint.x},${secondLastPoint.y} ${lastPoint.x},${lastPoint.y}`;\n\n // Close the path\n path += ' Z';\n\n return path;\n};\n" }, { "path": "packages/fossflow-lib/src/utils/renderer.ts", "content": "import { produce } from 'immer';\nimport {\n UNPROJECTED_TILE_SIZE,\n PROJECTED_TILE_SIZE,\n ZOOM_INCREMENT,\n MAX_ZOOM,\n MIN_ZOOM,\n TEXTBOX_PADDING,\n CONNECTOR_SEARCH_OFFSET,\n DEFAULT_FONT_FAMILY,\n TEXTBOX_DEFAULTS,\n TEXTBOX_FONT_WEIGHT,\n PROJECT_BOUNDING_BOX_PADDING\n} from 'src/config';\nimport {\n Coords,\n TileOrigin,\n Connector,\n Size,\n Scroll,\n Mouse,\n ConnectorAnchor,\n ItemReference,\n Rect,\n ProjectionOrientationEnum,\n BoundingBox,\n TextBox,\n SlimMouseEvent,\n View,\n AnchorPosition\n} from 'src/types';\nimport {\n CoordsUtils,\n SizeUtils,\n clamp,\n roundToTwoDecimalPlaces,\n findPath,\n toPx,\n getItemByIdOrThrow\n} from 'src/utils';\nimport { useScene } from 'src/hooks/useScene';\n\ninterface ScreenToIso {\n mouse: Coords;\n zoom: number;\n scroll: Scroll;\n rendererSize: Size;\n}\n\n// converts a mouse position to a tile position\nexport const screenToIso = ({\n mouse,\n zoom,\n scroll,\n rendererSize\n}: ScreenToIso) => {\n const projectedTileSize = SizeUtils.multiply(PROJECTED_TILE_SIZE, zoom);\n const halfW = projectedTileSize.width / 2;\n const halfH = projectedTileSize.height / 2;\n\n const projectPosition = {\n x: -rendererSize.width * 0.5 + mouse.x - scroll.position.x,\n y: -rendererSize.height * 0.5 + mouse.y - scroll.position.y\n };\n\n const tile = {\n x: Math.floor(\n (projectPosition.x + halfW) / projectedTileSize.width -\n projectPosition.y / projectedTileSize.height\n ),\n y: -Math.floor(\n (projectPosition.y + halfH) / projectedTileSize.height +\n projectPosition.x / projectedTileSize.width\n )\n };\n\n return tile;\n};\n\ninterface GetTilePosition {\n tile: Coords;\n origin?: TileOrigin;\n}\n\nexport const getTilePosition = ({\n tile,\n origin = 'CENTER'\n}: GetTilePosition) => {\n const halfW = PROJECTED_TILE_SIZE.width / 2;\n const halfH = PROJECTED_TILE_SIZE.height / 2;\n\n const position: Coords = {\n x: halfW * tile.x - halfW * tile.y,\n y: -(halfH * tile.x + halfH * tile.y)\n };\n\n switch (origin) {\n case 'TOP':\n return CoordsUtils.add(position, { x: 0, y: -halfH });\n case 'BOTTOM':\n return CoordsUtils.add(position, { x: 0, y: halfH });\n case 'LEFT':\n return CoordsUtils.add(position, { x: -halfW, y: 0 });\n case 'RIGHT':\n return CoordsUtils.add(position, { x: halfW, y: 0 });\n case 'CENTER':\n default:\n return position;\n }\n};\n\ntype IsoToScreen = GetTilePosition & {\n rendererSize: Size;\n};\n\nexport const isoToScreen = ({ tile, origin, rendererSize }: IsoToScreen) => {\n const position = getTilePosition({ tile, origin });\n\n return {\n x: position.x + rendererSize.width / 2,\n y: position.y + rendererSize.height / 2\n };\n};\n\nexport const sortByPosition = (tiles: Coords[]) => {\n const xSorted = [...tiles];\n const ySorted = [...tiles];\n xSorted.sort((a, b) => {\n return a.x - b.x;\n });\n ySorted.sort((a, b) => {\n return a.y - b.y;\n });\n\n const highest = {\n byX: xSorted[xSorted.length - 1],\n byY: ySorted[ySorted.length - 1]\n };\n const lowest = { byX: xSorted[0], byY: ySorted[0] };\n\n const lowX = lowest.byX.x;\n const highX = highest.byX.x;\n const lowY = lowest.byY.y;\n const highY = highest.byY.y;\n\n return {\n byX: xSorted,\n byY: ySorted,\n highest,\n lowest,\n lowX,\n lowY,\n highX,\n highY\n };\n};\n\n// Returns a complete set of tiles that form a grid area (takes in any number of tiles to use points to encapsulate)\nexport const getGridSubset = (tiles: Coords[]) => {\n const { lowX, lowY, highX, highY } = sortByPosition(tiles);\n\n const subset = [];\n\n for (let x = lowX; x < highX + 1; x += 1) {\n for (let y = lowY; y < highY + 1; y += 1) {\n subset.push({ x, y });\n }\n }\n\n return subset;\n};\n\nexport const isWithinBounds = (tile: Coords, bounds: Coords[]) => {\n const { lowX, lowY, highX, highY } = sortByPosition(bounds);\n\n return tile.x >= lowX && tile.x <= highX && tile.y >= lowY && tile.y <= highY;\n};\n\n// Returns the four corners of a grid that encapsulates all tiles\n// passed in (at least 1 tile needed)\nexport const getBoundingBox = (\n tiles: Coords[],\n offset: Coords = CoordsUtils.zero()\n): BoundingBox => {\n const { lowX, lowY, highX, highY } = sortByPosition(tiles);\n\n return [\n { x: lowX - offset.x, y: lowY - offset.y },\n { x: highX + offset.x, y: lowY - offset.y },\n { x: highX + offset.x, y: highY + offset.y },\n { x: lowX - offset.x, y: highY + offset.y }\n ];\n};\n\nexport const getBoundingBoxSize = (boundingBox: Coords[]): Size => {\n const { lowX, lowY, highX, highY } = sortByPosition(boundingBox);\n\n return {\n width: highX - lowX + 1,\n height: highY - lowY + 1\n };\n};\n\nconst isoProjectionBaseValues = [0.707, -0.409, 0.707, 0.409, 0, -0.816];\n\nexport const getIsoMatrix = (\n orientation?: keyof typeof ProjectionOrientationEnum\n) => {\n switch (orientation) {\n case ProjectionOrientationEnum.Y:\n return produce(isoProjectionBaseValues, (draft) => {\n draft[1] = -draft[1];\n draft[2] = -draft[2];\n });\n case ProjectionOrientationEnum.X:\n default:\n return isoProjectionBaseValues;\n }\n};\n\nexport const getIsoProjectionCss = (\n orientation?: keyof typeof ProjectionOrientationEnum\n) => {\n const matrixTransformValues = getIsoMatrix(orientation);\n\n return `matrix(${matrixTransformValues.join(', ')})`;\n};\n\nexport const getTranslateCSS = (translate: Coords = { x: 0, y: 0 }) => {\n return `translate(${translate.x}px, ${translate.y}px)`;\n};\n\nexport const incrementZoom = (zoom: number) => {\n const newZoom = clamp(zoom + ZOOM_INCREMENT, MIN_ZOOM, MAX_ZOOM);\n return roundToTwoDecimalPlaces(newZoom);\n};\n\nexport const decrementZoom = (zoom: number) => {\n const newZoom = clamp(zoom - ZOOM_INCREMENT, MIN_ZOOM, MAX_ZOOM);\n return roundToTwoDecimalPlaces(newZoom);\n};\n\ninterface GetMouse {\n interactiveElement: HTMLElement;\n zoom: number;\n scroll: Scroll;\n lastMouse: Mouse;\n mouseEvent: SlimMouseEvent;\n rendererSize: Size;\n}\n\nexport const getMouse = ({\n interactiveElement,\n zoom,\n scroll,\n lastMouse,\n mouseEvent,\n rendererSize\n}: GetMouse): Mouse => {\n const componentOffset = interactiveElement.getBoundingClientRect();\n const offset: Coords = {\n x: componentOffset?.left ?? 0,\n y: componentOffset?.top ?? 0\n };\n\n const { clientX, clientY } = mouseEvent;\n\n const mousePosition = {\n x: clientX - offset.x,\n y: clientY - offset.y\n };\n\n const newPosition: Mouse['position'] = {\n screen: mousePosition,\n tile: screenToIso({\n mouse: mousePosition,\n zoom,\n scroll,\n rendererSize\n })\n };\n\n const newDelta: Mouse['delta'] = {\n screen: CoordsUtils.subtract(newPosition.screen, lastMouse.position.screen),\n tile: CoordsUtils.subtract(newPosition.tile, lastMouse.position.tile)\n };\n\n const getMousedown = (): Mouse['mousedown'] => {\n switch (mouseEvent.type) {\n case 'mousedown':\n return newPosition;\n case 'mousemove':\n return lastMouse.mousedown;\n default:\n return null;\n }\n };\n\n const nextMouse: Mouse = {\n position: newPosition,\n delta: newDelta,\n mousedown: getMousedown()\n };\n\n return nextMouse;\n};\n\nexport const getAllAnchors = (connectors: Connector[]) => {\n return connectors.reduce((acc, connector) => {\n return [...acc, ...connector.anchors];\n }, [] as ConnectorAnchor[]);\n};\n\nexport const getAnchorTile = (anchor: ConnectorAnchor, view: View): Coords => {\n if (anchor.ref.item) {\n const viewItem = getItemByIdOrThrow(view.items, anchor.ref.item).value;\n return viewItem.tile;\n }\n\n if (anchor.ref.anchor) {\n const allAnchors = getAllAnchors(view.connectors ?? []);\n const nextAnchor = getItemByIdOrThrow(allAnchors, anchor.ref.anchor).value;\n\n return getAnchorTile(nextAnchor, view);\n }\n\n if (anchor.ref.tile) {\n return anchor.ref.tile;\n }\n\n throw new Error('Could not get anchor tile.');\n};\n\ninterface NormalisePositionFromOrigin {\n position: Coords;\n origin: Coords;\n}\n\nexport const normalisePositionFromOrigin = ({\n position,\n origin\n}: NormalisePositionFromOrigin) => {\n return CoordsUtils.subtract(origin, position);\n};\n\ninterface GetConnectorPath {\n anchors: ConnectorAnchor[];\n view: View;\n}\n\nexport const getConnectorPath = ({\n anchors,\n view\n}: GetConnectorPath): {\n tiles: Coords[];\n rectangle: Rect;\n} => {\n if (anchors.length < 2)\n throw new Error(\n `Connector needs at least two anchors (receieved: ${anchors.length})`\n );\n\n const anchorPosition = anchors.map((anchor) => {\n return getAnchorTile(anchor, view);\n });\n\n const searchArea = getBoundingBox(anchorPosition, CONNECTOR_SEARCH_OFFSET);\n\n const sorted = sortByPosition(searchArea);\n const searchAreaSize = getBoundingBoxSize(searchArea);\n const rectangle = {\n from: { x: sorted.highX, y: sorted.highY },\n to: { x: sorted.lowX, y: sorted.lowY }\n };\n\n const positionsNormalisedFromSearchArea = anchorPosition.map((position) => {\n return normalisePositionFromOrigin({\n position,\n origin: rectangle.from\n });\n });\n\n const tiles = positionsNormalisedFromSearchArea.reduce(\n (acc, position, i) => {\n if (i === 0) return acc;\n\n const prev = positionsNormalisedFromSearchArea[i - 1];\n const path = findPath({\n from: prev,\n to: position,\n gridSize: searchAreaSize\n });\n\n return [...acc, ...path];\n },\n []\n );\n\n return { tiles, rectangle };\n};\n\ntype GetRectangleFromSize = (\n from: Coords,\n size: Size\n) => { from: Coords; to: Coords };\n\nexport const getRectangleFromSize: GetRectangleFromSize = (from, size) => {\n return {\n from,\n to: { x: from.x + size.width, y: from.y + size.height }\n };\n};\n\nexport const hasMovedTile = (mouse: Mouse) => {\n if (!mouse.delta) return false;\n\n return !CoordsUtils.isEqual(mouse.delta.tile, CoordsUtils.zero());\n};\n\nexport const connectorPathTileToGlobal = (\n tile: Coords,\n origin: Coords\n): Coords => {\n return CoordsUtils.subtract(\n CoordsUtils.subtract(origin, CONNECTOR_SEARCH_OFFSET),\n CoordsUtils.subtract(tile, CONNECTOR_SEARCH_OFFSET)\n );\n};\n\nexport const getTextBoxEndTile = (textBox: TextBox, size: Size) => {\n if (textBox.orientation === ProjectionOrientationEnum.X) {\n return CoordsUtils.add(textBox.tile, {\n x: size.width,\n y: 0\n });\n }\n\n return CoordsUtils.add(textBox.tile, {\n x: 0,\n y: -size.width\n });\n};\n\ninterface GetItemAtTile {\n tile: Coords;\n scene: ReturnType;\n}\n\nexport const getItemAtTile = ({\n tile,\n scene\n}: GetItemAtTile): ItemReference | null => {\n const viewItem = scene.items.find((item) => {\n return CoordsUtils.isEqual(item.tile, tile);\n });\n\n if (viewItem) {\n return {\n type: 'ITEM',\n id: viewItem.id\n };\n }\n\n const textBox = scene.textBoxes.find((tb) => {\n const textBoxTo = getTextBoxEndTile(tb, tb.size);\n const textBoxBounds = getBoundingBox([\n tb.tile,\n {\n x: Math.ceil(textBoxTo.x),\n y:\n tb.orientation === 'X'\n ? Math.ceil(textBoxTo.y)\n : Math.floor(textBoxTo.y)\n }\n ]);\n\n return isWithinBounds(tile, textBoxBounds);\n });\n\n if (textBox) {\n return {\n type: 'TEXTBOX',\n id: textBox.id\n };\n }\n\n const connector = scene.connectors.find((con) => {\n return con.path.tiles.find((pathTile) => {\n const globalPathTile = connectorPathTileToGlobal(\n pathTile,\n con.path.rectangle.from\n );\n\n return CoordsUtils.isEqual(globalPathTile, tile);\n });\n });\n\n if (connector) {\n return {\n type: 'CONNECTOR',\n id: connector.id\n };\n }\n\n const rectangle = scene.rectangles.find(({ from, to }) => {\n return isWithinBounds(tile, [from, to]);\n });\n\n if (rectangle) {\n return {\n type: 'RECTANGLE',\n id: rectangle.id\n };\n }\n\n return null;\n};\n\ninterface FontProps {\n fontWeight: number | string;\n fontSize: number;\n fontFamily: string;\n}\n\nexport const getTextWidth = (text: string, fontProps: FontProps) => {\n if (!text) return 0;\n\n const paddingX = TEXTBOX_PADDING * UNPROJECTED_TILE_SIZE;\n const fontSizePx = toPx(fontProps.fontSize * UNPROJECTED_TILE_SIZE);\n const canvas: HTMLCanvasElement = document.createElement('canvas');\n const context = canvas.getContext('2d');\n\n if (!context) {\n throw new Error('Could not get canvas context');\n }\n\n context.font = `${fontProps.fontWeight} ${fontSizePx} ${fontProps.fontFamily}`;\n const metrics = context.measureText(text);\n\n canvas.remove();\n\n return (metrics.width + paddingX * 2) / UNPROJECTED_TILE_SIZE - 0.8;\n};\n\nexport const getTextBoxDimensions = (textBox: TextBox): Size => {\n const width = getTextWidth(textBox.content, {\n fontSize: textBox.fontSize ?? TEXTBOX_DEFAULTS.fontSize,\n fontFamily: DEFAULT_FONT_FAMILY,\n fontWeight: TEXTBOX_FONT_WEIGHT\n });\n const height = 1;\n\n return { width, height };\n};\n\nexport const outermostCornerPositions: TileOrigin[] = [\n 'BOTTOM',\n 'RIGHT',\n 'TOP',\n 'LEFT'\n];\n\nexport const convertBoundsToNamedAnchors = (\n boundingBox: BoundingBox\n): {\n [key in AnchorPosition]: Coords;\n} => {\n return {\n BOTTOM_LEFT: boundingBox[0],\n BOTTOM_RIGHT: boundingBox[1],\n TOP_RIGHT: boundingBox[2],\n TOP_LEFT: boundingBox[3]\n };\n};\n\nexport const getAnchorAtTile = (tile: Coords, anchors: ConnectorAnchor[]) => {\n return anchors.find((anchor) => {\n return Boolean(\n anchor.ref.tile && CoordsUtils.isEqual(anchor.ref.tile, tile)\n );\n });\n};\n\nexport const getAnchorParent = (anchorId: string, connectors: Connector[]) => {\n const connector = connectors.find((con) => {\n return con.anchors.find((anchor) => {\n return anchor.id === anchorId;\n });\n });\n\n if (!connector) {\n throw new Error(`Could not find connector with anchor id ${anchorId}`);\n }\n\n return connector;\n};\n\nexport const getTileScrollPosition = (\n tile: Coords,\n origin?: TileOrigin\n): Coords => {\n const tilePosition = getTilePosition({ tile, origin });\n\n return {\n x: -tilePosition.x,\n y: -tilePosition.y\n };\n};\n\nexport const getConnectorsByViewItem = (\n viewItemId: string,\n connectors: Connector[]\n) => {\n return connectors.filter((connector) => {\n return connector.anchors.find((anchor) => {\n return anchor.ref.item === viewItemId;\n });\n });\n};\n\nexport const getConnectorDirectionIcon = (connectorTiles: Coords[]) => {\n if (connectorTiles.length < 2) return null;\n\n const iconTile = connectorTiles[connectorTiles.length - 2];\n const lastTile = connectorTiles[connectorTiles.length - 1];\n\n let rotation;\n\n if (lastTile.x > iconTile.x) {\n if (lastTile.y > iconTile.y) {\n rotation = 135;\n } else if (lastTile.y < iconTile.y) {\n rotation = 45;\n } else {\n rotation = 90;\n }\n }\n\n if (lastTile.x < iconTile.x) {\n if (lastTile.y > iconTile.y) {\n rotation = -135;\n } else if (lastTile.y < iconTile.y) {\n rotation = -45;\n } else {\n rotation = -90;\n }\n }\n\n if (lastTile.x === iconTile.x) {\n if (lastTile.y > iconTile.y) {\n rotation = 180;\n } else if (lastTile.y < iconTile.y) {\n rotation = 0;\n } else {\n rotation = -90;\n }\n }\n\n return {\n x: iconTile.x * UNPROJECTED_TILE_SIZE + UNPROJECTED_TILE_SIZE / 2,\n y: iconTile.y * UNPROJECTED_TILE_SIZE + UNPROJECTED_TILE_SIZE / 2,\n rotation\n };\n};\n\nexport const getProjectBounds = (\n view: View,\n padding = PROJECT_BOUNDING_BOX_PADDING\n): Coords[] => {\n const itemTiles = view.items.map((item) => {\n return item.tile;\n });\n\n const connectors = view.connectors ?? [];\n const connectorTiles = connectors.reduce((acc, connector) => {\n const path = getConnectorPath({ anchors: connector.anchors, view });\n\n return [...acc, path.rectangle.from, path.rectangle.to];\n }, []);\n\n const rectangles = view.rectangles ?? [];\n const rectangleTiles = rectangles.reduce((acc, rectangle) => {\n return [...acc, rectangle.from, rectangle.to];\n }, []);\n\n const textBoxes = view.textBoxes ?? [];\n const textBoxTiles = textBoxes.reduce((acc, textBox) => {\n const size = getTextBoxDimensions(textBox);\n\n return [\n ...acc,\n textBox.tile,\n CoordsUtils.add(textBox.tile, {\n x: size.width,\n y: size.height\n })\n ];\n }, []);\n\n let allTiles = [\n ...itemTiles,\n ...connectorTiles,\n ...rectangleTiles,\n ...textBoxTiles\n ];\n\n if (allTiles.length === 0) {\n const centerTile = CoordsUtils.zero();\n allTiles = [centerTile, centerTile, centerTile, centerTile];\n }\n\n const corners = getBoundingBox(allTiles, {\n x: padding,\n y: padding\n });\n\n return corners;\n};\n\nexport const getVisualBounds = (view: View, padding = 50) => {\n let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;\n \n // Collect actual content positions and find extremes\n view.items.forEach((item) => {\n const pos = getTilePosition({ tile: item.tile });\n const itemSize = 50;\n minX = Math.min(minX, pos.x - itemSize/2);\n maxX = Math.max(maxX, pos.x + itemSize/2);\n minY = Math.min(minY, pos.y - itemSize/2);\n maxY = Math.max(maxY, pos.y + itemSize/2);\n });\n \n const connectors = view.connectors ?? [];\n connectors.forEach((connector) => {\n const path = getConnectorPath({ anchors: connector.anchors, view });\n path.tiles.forEach((tile) => {\n const globalTile = connectorPathTileToGlobal(tile, path.rectangle.from);\n const pos = getTilePosition({ tile: globalTile });\n minX = Math.min(minX, pos.x);\n maxX = Math.max(maxX, pos.x);\n minY = Math.min(minY, pos.y);\n maxY = Math.max(maxY, pos.y);\n });\n });\n \n const textBoxes = view.textBoxes ?? [];\n textBoxes.forEach((textBox) => {\n const pos = getTilePosition({ tile: textBox.tile });\n const size = getTextBoxDimensions(textBox);\n const endPos = getTilePosition({ tile: getTextBoxEndTile(textBox, size) });\n minX = Math.min(minX, pos.x, endPos.x);\n maxX = Math.max(maxX, pos.x, endPos.x);\n minY = Math.min(minY, pos.y, endPos.y);\n maxY = Math.max(maxY, pos.y, endPos.y);\n });\n \n const rectangles = view.rectangles ?? [];\n rectangles.forEach((rectangle) => {\n const fromPos = getTilePosition({ tile: rectangle.from });\n const toPos = getTilePosition({ tile: rectangle.to });\n minX = Math.min(minX, fromPos.x, toPos.x);\n maxX = Math.max(maxX, fromPos.x, toPos.x);\n minY = Math.min(minY, fromPos.y, toPos.y);\n maxY = Math.max(maxY, fromPos.y, toPos.y);\n });\n \n if (minX === Infinity) {\n return { x: 0, y: 0, width: 200, height: 200 };\n }\n \n // Create tight bounds around actual content extremes\n return {\n x: minX - padding,\n y: minY - padding,\n width: (maxX - minX) + (padding * 2),\n height: (maxY - minY) + (padding * 2)\n };\n};\n\nexport const getUnprojectedBounds = (view: View) => {\n const projectBounds = getProjectBounds(view);\n\n const cornerPositions = projectBounds.map((corner) => {\n return getTilePosition({\n tile: corner\n });\n });\n const sortedCorners = sortByPosition(cornerPositions);\n const topLeft = { x: sortedCorners.lowX, y: sortedCorners.lowY };\n const size = getBoundingBoxSize(cornerPositions);\n\n return {\n width: size.width,\n height: size.height,\n x: topLeft.x,\n y: topLeft.y\n };\n};\n\nexport const getFitToViewParams = (view: View, viewportSize: Size) => {\n const projectBounds = getProjectBounds(view);\n const sortedCornerPositions = sortByPosition(projectBounds);\n const boundingBoxSize = getBoundingBoxSize(projectBounds);\n const unprojectedBounds = getUnprojectedBounds(view);\n const zoom = clamp(\n Math.min(\n viewportSize.width / unprojectedBounds.width,\n viewportSize.height / unprojectedBounds.height\n ),\n 0,\n MAX_ZOOM\n );\n const scrollTarget: Coords = {\n x: (sortedCornerPositions.lowX + boundingBoxSize.width / 2) * zoom,\n y: (sortedCornerPositions.lowY + boundingBoxSize.height / 2) * zoom\n };\n const scroll = getTileScrollPosition(scrollTarget);\n\n return {\n zoom,\n scroll\n };\n};\n" }, { "path": "packages/fossflow-lib/tsconfig.declaration.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"emitDeclarationOnly\": true,\n \"declaration\": true,\n \"declarationMap\": false,\n \"noEmit\": false,\n \"outDir\": \"./dist\"\n },\n \"exclude\": [\"node_modules\", \"./dist\", \"./docs\", \"**/*.test.ts\", \"**/*.test.tsx\"],\n \"include\": [\n \"src/**/*.ts\",\n \"src/**/*.tsx\",\n \"src/global.d.ts\"\n ]\n} " }, { "path": "packages/fossflow-lib/tsconfig.dev.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"declaration\": false,\n \"emitDeclarationOnly\": false\n }\n}" }, { "path": "packages/fossflow-lib/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"baseUrl\": \"./src\",\n \"paths\": {\n \"src/*\": [\"./*\"]\n },\n \"outDir\": \"./dist\",\n \"declaration\": false,\n \"declarationMap\": false\n },\n \"exclude\": [\"node_modules\", \"./dist\", \"./docs\"],\n \"include\": [\n \"src/**/*.ts\",\n \"src/**/*.tsx\",\n \"src/global.d.ts\"\n ]\n}" }, { "path": "scripts/update-version.js", "content": "#!/usr/bin/env node\n\n/**\n * Updates version numbers across all packages in the monorepo\n * Used by semantic-release to sync versions\n */\n\nconst fs = require('fs');\nconst path = require('path');\n\nconst version = process.argv[2];\n\nif (!version) {\n console.error('Error: Version number required');\n process.exit(1);\n}\n\nconsole.log(`Updating all packages to version ${version}...`);\n\n// List of package.json files to update\nconst packageFiles = [\n 'package.json',\n 'packages/fossflow-lib/package.json',\n 'packages/fossflow-app/package.json',\n 'packages/fossflow-backend/package.json'\n];\n\npackageFiles.forEach(file => {\n const filePath = path.join(process.cwd(), file);\n\n if (!fs.existsSync(filePath)) {\n console.warn(`Warning: ${file} not found, skipping...`);\n return;\n }\n\n try {\n const packageJson = JSON.parse(fs.readFileSync(filePath, 'utf8'));\n packageJson.version = version;\n fs.writeFileSync(filePath, JSON.stringify(packageJson, null, 2) + '\\n');\n console.log(`Updated ${file} to ${version}`);\n } catch (error) {\n console.error(`Error updating ${file}:`, error.message);\n process.exit(1);\n }\n});\n\nconsole.log('Version update complete!');\n" }, { "path": "test-app.html", "content": "\n\n\n Test FossFLOW App\n\n\n

Testing FossFLOW App

\n \n \n\n" }, { "path": "test-base-paths.sh", "content": "#!/bin/bash\n# Test FossFLOW deployment at different base paths\n# This simulates how the app will be served on GitHub Pages or other platforms with subpaths\n\nset -e\n\necho \"Testing FossFLOW at multiple base paths...\"\n\n# Colors for output\nRED='\\033[0;31m'\nGREEN='\\033[0;32m'\nYELLOW='\\033[1;33m'\nNC='\\033[0m' # No Color\n\n# Base paths to test\nBASE_PATHS=(\"/\" \"/fossflow\" \"/apps/fossflow\" \"/my-org/projects/fossflow\")\n\n# Function to cleanup\ncleanup() {\n echo -e \"\\n${YELLOW}Cleaning up...${NC}\"\n\n # Stop any running containers\n docker stop nginx-test 2>/dev/null || true\n docker rm nginx-test 2>/dev/null || true\n docker stop selenium-test 2>/dev/null || true\n docker rm selenium-test 2>/dev/null || true\n\n # Kill any local servers\n if [ -f /tmp/server.pid ]; then\n kill $(cat /tmp/server.pid) 2>/dev/null || true\n rm /tmp/server.pid\n fi\n}\n\n# Set trap to cleanup on exit\ntrap cleanup EXIT\n\n# Function to test a specific base path\ntest_base_path() {\n local BASE_PATH=$1\n echo -e \"\\n${YELLOW}Testing base path: ${BASE_PATH}${NC}\"\n\n # Clean up any previous test\n docker stop nginx-test 2>/dev/null || true\n docker rm nginx-test 2>/dev/null || true\n\n # Build the app with the specific PUBLIC_URL\n echo \"Building app with PUBLIC_URL=${BASE_PATH}...\"\n PUBLIC_URL=\"${BASE_PATH}\" npm run build:app\n\n # Create nginx config for this base path\n if [ \"$BASE_PATH\" = \"/\" ]; then\n LOCATION_PATH=\"/\"\n ALIAS_PATH=\"/usr/share/nginx/html/\"\n else\n LOCATION_PATH=\"${BASE_PATH%/}/\"\n ALIAS_PATH=\"/usr/share/nginx/html/\"\n fi\n\n cat > /tmp/nginx.conf < /dev/null; then\n echo -e \"${GREEN}✓ App accessible at http://localhost:3001${BASE_PATH}${NC}\"\n else\n echo -e \"${RED}✗ App NOT accessible at http://localhost:3001${BASE_PATH}${NC}\"\n echo \"Nginx logs:\"\n docker logs nginx-test\n return 1\n fi\n\n # Run E2E tests if Selenium is available\n if docker ps | grep selenium-test > /dev/null; then\n echo \"Running E2E tests...\"\n FOSSFLOW_TEST_URL=\"http://localhost:3001${BASE_PATH}\" \\\n FOSSFLOW_BASE_PATH=\"${BASE_PATH}\" \\\n WEBDRIVER_URL=\"http://localhost:4444\" \\\n pytest tests/test_base_path_routing.py -v --tb=short || {\n echo -e \"${RED}✗ E2E tests failed for base path: ${BASE_PATH}${NC}\"\n return 1\n }\n echo -e \"${GREEN}✓ E2E tests passed for base path: ${BASE_PATH}${NC}\"\n else\n echo -e \"${YELLOW}Selenium not running, skipping E2E tests${NC}\"\n echo \"To run E2E tests, start Selenium first:\"\n echo \" docker run -d --name selenium-test --network host selenium/standalone-chrome:latest\"\n fi\n\n # Clean up this test's nginx\n docker stop nginx-test 2>/dev/null || true\n docker rm nginx-test 2>/dev/null || true\n\n return 0\n}\n\n# Main execution\necho \"Setting up test environment...\"\n\n# Check if Selenium is running, offer to start it\nif ! docker ps | grep selenium > /dev/null; then\n echo -e \"${YELLOW}Selenium is not running. Would you like to start it for E2E tests? (y/n)${NC}\"\n read -r response\n if [[ \"$response\" == \"y\" ]]; then\n echo \"Starting Selenium...\"\n docker run -d \\\n --name selenium-test \\\n --network host \\\n --shm-size=2g \\\n selenium/standalone-chrome:latest\n\n echo \"Waiting for Selenium to be ready...\"\n timeout 30 bash -c 'until curl -sf http://localhost:4444/status > /dev/null 2>&1; do sleep 2; done' || {\n echo -e \"${RED}Selenium failed to start${NC}\"\n exit 1\n }\n echo -e \"${GREEN}✓ Selenium is ready${NC}\"\n fi\nfi\n\n# Test each base path\nFAILED_PATHS=()\nfor BASE_PATH in \"${BASE_PATHS[@]}\"; do\n if ! test_base_path \"$BASE_PATH\"; then\n FAILED_PATHS+=(\"$BASE_PATH\")\n fi\ndone\n\n# Summary\necho -e \"\\n=========================================\"\necho \"Test Summary:\"\necho \"=========================================\"\nif [ ${#FAILED_PATHS[@]} -eq 0 ]; then\n echo -e \"${GREEN}✓ All base paths tested successfully!${NC}\"\n echo \"Tested paths: ${BASE_PATHS[*]}\"\nelse\n echo -e \"${RED}✗ Some base paths failed:${NC}\"\n for path in \"${FAILED_PATHS[@]}\"; do\n echo \" - $path\"\n done\n echo -e \"\\n${YELLOW}This indicates the app may not work correctly when deployed to GitHub Pages or other subpath deployments.${NC}\"\n exit 1\nfi" }, { "path": "tsconfig.base.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"react-jsx\",\n \"declaration\": true,\n \"declarationMap\": true,\n \"sourceMap\": true,\n \"noImplicitAny\": true,\n \"useUnknownInCatchVariables\": false\n },\n \"exclude\": [\"node_modules\", \"dist\", \"build\"]\n}" } ]