[
{
"path": ".editorconfig",
"content": "root = true\r\n\r\n[*]\r\nend_of_line = crlf\r\ninsert_final_newline = false\r\nindent_style = space\r\nindent_size = 2"
},
{
"path": ".github/FUNDING.yml",
"content": "# These are supported funding model platforms\n\ngithub: jogibear9988\npatreon: jogibear9988\n"
},
{
"path": ".github/copilot-instructions.md",
"content": "## Project Agent Instructions\n\n- Before starting work, read [AGENTS.md](../AGENTS.md) and follow its guidance.\n- Treat [AGENTS.md](../AGENTS.md) as the canonical agent behavior file for this repository.\n"
},
{
"path": ".gitignore",
"content": "node_modules/\r\ndist/\r\n/.vs\r\ndebug.log\r\n/.vscode\r\n*.tsbuildinfo\r\n"
},
{
"path": "ACKNOWLEDGMENTS",
"content": "# Acknowledgments\r\n\r\n- Thanks to @notwaldorf who created the original `wizzywid` project (MIT License).\r\n https://github.com/PolymerLabs/wizzywid\r\n This was a start for this whole project (even if mostly nothing of the original code is left)\r\n- Thanks to @chdh for plain-scrollbar component\r\n https://github.com/chdh/plain-scrollbar\r\n- Thanks to @m-thalmann for contextmenujs\r\n https://github.com/m-thalmann/contextmenujs (also we have heavily modified it)\r\n- Levi Cole for parts of the cssUnits conversion code\r\n https://stackoverflow.com/a/66569574/579623\r\n- Domi for text-width code\r\n https://stackoverflow.com/a/21015393\r\n- gwwar for getClosestStackingContext\r\n https://github.com/gwwar/z-context\r\n- google icons\r\n https://fonts.google.com/icons"
},
{
"path": "AGENTS.md",
"content": "## Project Agent Instructions\n\n- AI agents must store memories under the repository [memories/](memories) directory.\n\n## Why These Guidelines Exist\n\n- Agents may make unchecked assumptions, hide confusion, and skip clarifications.\n- Agents may overengineer solutions with unnecessary abstractions and code bloat.\n- Agents may accidentally modify unrelated code or comments as side effects.\n\n## Core Principles\n\n### 1. Think Before Coding\n\n- State assumptions explicitly; if uncertain, ask instead of guessing.\n- Surface ambiguity and tradeoffs rather than silently choosing one interpretation.\n- Push back when a simpler and safer approach exists.\n- Stop and ask for clarification when confusion remains.\n\n### 2. Simplicity First\n\n- Implement the minimum code needed to solve the requested problem.\n- Do not add speculative features, configurability, or abstractions not requested.\n- Avoid handling impossible scenarios just to look complete.\n- If a solution can be significantly simpler, prefer the simpler version.\n\n### 3. Surgical Changes\n\n- Touch only code required by the task.\n- Do not refactor or restyle adjacent code that is unrelated to the request.\n- Match existing project style and patterns.\n- If you see unrelated dead code, mention it; do not remove it unless asked.\n- Remove only unused artifacts created by your own changes.\n\n### 4. Goal-Driven Execution\n\n- Define concrete success criteria before implementation.\n- Prefer verifiable outcomes, usually with tests or explicit checks.\n- For multi-step tasks, use a short plan where each step includes a verification check.\n- Continue iterating until criteria are met or a real blocker is identified.\n\n## Success Signals\n\n- Diffs contain only requested changes.\n- Solutions are simple and avoid unnecessary rewrites.\n- Clarifying questions happen before implementation when needed.\n- Pull requests stay minimal and focused.\n\n## Tradeoff\n\n- These rules prioritize caution and correctness over raw speed on non-trivial tasks.\n- For obvious small changes, use proportional rigor."
},
{
"path": "CLAUDE.md",
"content": "## Project Agent Instructions\n\n- Before starting work, read [AGENTS.md](AGENTS.md) and follow its guidance.\n- Treat [AGENTS.md](AGENTS.md) as the canonical agent behavior file for this repository.\n"
},
{
"path": "COMPARISON.md",
"content": "## Similar Frameworks\r\n\r\n| Name | Licence | Edit Source | Split View | Zooming | Resize Transformed | No Iframe | Iframe | Iframe isolation | Modifies Dom | Multiplayer | URL |\r\n|-------------------------|----------|-------------|------------|---------|--------------------| ----------|--------|------------------|--------------|-------------|----------------------------------------|\r\n| web-component-designer | MIT | yes | yes | yes | yes | yes | yes | allow-same-origin| no | yes no | |\r\n| GrapeJS | BSD-3 | yes | no | no | broken | no | yes | no | yes | no | https://grapesjs.com/ |\r\n| CraftJS | MIT | no | no | no | | no | yes | no | yes | no | https://craft.js.org/ |\r\n| raisins | MIT | - | no | no | | no | yes | yes | yes | no | https://github.com/saasquatch/raisins |\r\n\r\n\r\n### Description\r\n- Zooming => can zoom Designer Canvas\r\n- No iframe => can Design in a Shadow Root (No Iframe, all Components already loaded are usable)\r\n- Iframe => can Design inside of an Iframe\r\n- Iframe Isolation => iframe can be isolated (against XSS attacks)\r\n- Modifies DOM => inserts it's overlays directly into edited DOM (this could be Bad, when a Component depends on the DOM or css classes collide)\r\n- Multiplayer => Multiple Users can design a document at the same time"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2021 node-projects \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": "# web-component-designer\r\n\r\nA HTML web component for designing web components and HTML pages based on PolymerLabs wizzywid which can easily be integrated in your own software.\r\nMeanwhile polymer is not used anymore.\r\n\r\n\r\n\r\nThere is also a preview VSCode addon using the designer: https://github.com/node-projects/vs-code-designer-addon\r\n\r\n## NPM Package\r\n\r\nhttps://www.npmjs.com/package/@node-projects/web-component-designer\r\n\r\n## Comparison\r\n\r\n[Comparison of Designer Frameworks](COMPARISON.md)\r\n\r\n## Additional NPM Packages\r\n\r\nAll Modules which need an external dependency are now extracted to extra NPM packges.\r\nSo the designer now should work with bundlers.\r\n\r\n| Name | Description |\r\n| ---------------------------------------------------------------------- | -------------------------------------------- |\r\n| web-component-designer-codeview-ace | |\r\n| web-component-designer-codeview-codemirror | |\r\n| web-component-designer-codeview-codemirror5 | |\r\n| web-component-designer-codeview-monaco | atm. stuck at monaco 0.50.0 (webcomp supp) |\r\n| web-component-designer-collaboration-service | |\r\n| web-component-designer-htmlparserservice-base-custom-webcomponent | |\r\n| web-component-designer-htmlparserservice-lit-element | |\r\n| web-component-designer-htmlparserservice-nodehtmlparser | |\r\n| ~~web-component-designer-miniatureview-html2canvas~~ | never worked correctly |\r\n| web-component-designer-stylesheetservice-css-parser | |\r\n| ~~web-component-designer-stylesheetservice-css-tools~~ | deprecated - switched to css-parser |\r\n| ~~web-component-designer-stylesheetservice-css-tree~~ | deprecated - did never work very well |\r\n| web-component-designer-visualization-addons | |\r\n| ~~web-component-designer-texteditextension-stylo~~ | deprecated - stylo is deprecated |\r\n| ~~web-component-designer-widgets-fancytree~~ | deprecated - replaced by widgets-wunderbaum |\r\n| web-component-designer-widgets-wunderbaum | |\r\n\r\n## Browser support\r\n\r\n - Chrome, Firefox and Safari\r\n \r\n## Projects using it\r\n\r\nA ZPL-Label Designer:\r\n(https://github.com/node-projects/web-component-designer-zpl-demo)\r\n\r\n\r\n\r\nA material flow layout editor in a comercial application:\r\n\r\n\r\nA flow chart editor\r\n\r\n\r\n## Demo\r\n\r\nlook at: https://node-projects.github.io/web-component-designer-demo/index.html\r\nrepository: https://github.com/node-projects/web-component-designer-demo\r\n\r\nor a simple one: https://node-projects.github.io/web-component-designer-simple-demo/index.html\r\nrepository: https://github.com/node-projects/web-component-designer-simple-demo\r\n\r\n## What is needed\r\n\r\n- @node-projects/base-custom-webcomponent a very small basic webcomponent library (maybe this will be included directly later, to be dependecy free)\r\n- optional - ace code editor\r\n- optional - monaco code editor (if you use code-view-monaco)\r\n- optional - code mirror code editor (if you use code-view-codemirror) (workin but buggy)\r\n- optional - fancytree (if you use tree-view-extended, palette-tree-view or bindable-objects-browser)\r\n\r\n## Features we are working on\r\n\r\nhttps://github.com/node-projects/web-component-designer/issues\r\n\r\n## Developing\r\n\r\n * This will install all required packages, link all the npm packages and build everyone once. (in mac or linux you need to run the script with sudo, or the \"npm link\" will not work)\r\n\r\n```\r\n $ npm run develop\r\n```\r\n\r\n## Using\r\n\r\nAt first you have to setup a service container providing services for history, properties, elements, ...\r\n\r\n## Code Editor\r\n\r\nYou can select to use one of 3 code editors available (ACE, CodeMirrow, Monaco).\r\nIf you use one of the widgets, you need to include the JS lib in your index.html and then use the specific widget.\r\n\r\n## TreeView\r\n\r\nWe have 2 tree components. One independent and one feature rich which uses FancyTree (and cause of this it needs JQuery and JqueryUI).\r\n\r\n## DragDrop\r\n\r\nIf you'd like to use the designer on mobile, you need the mobile-drag-drop npm library.\r\nYour index.html should be extended as follows:\r\n\r\n \r\n \r\n\r\n## Copyright notice\r\n\r\nThe Library uses Images from the Chrome Dev Tools, see\r\nhttps://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src\r\nand\r\nhttps://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE\r\n\r\n"
},
{
"path": "editor.code-workspace",
"content": "{\n\t\"folders\": [\n\t\t{\n\t\t\t\"path\": \".\"\n\t\t},\n\t\t{\n\t\t\t\"path\": \"../web-component-designer-demo\"\n\t\t}\n\t],\n\t\"settings\": {\n\t\t\"jestrunner.debugOptions\": {\n\t\t\t\"runtimeArgs\": [\n\t\t\t\t\"--experimental-vm-modules\", \"--enable-source-maps\"\n\t\t\t]\n\t\t}\n\t}\n}"
},
{
"path": "jest.config.js",
"content": "export default {\n testMatch: ['**/?(*.)+(spec|test).+(mts|ts|tsx|mjs|js)'],\n preset: \"ts-jest/presets/default-esm\",\n testEnvironment: \"node\",\n extensionsToTreatAsEsm: ['.ts', '.mts'],\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1'\n },\n transform: {\n '^.+\\\\.(mts|ts|tsx|mjs|js)$': [\n \"ts-jest\",\n {\n \"useESM\": true,\n \"tsconfig\": {\n \"allowJs\": true\n }\n }\n ]\n },\n transformIgnorePatterns: [\n '/node_modules/(?!(?:@node-projects/base-custom-webcomponent)(?:/|$))'\n ]\n}"
},
{
"path": "memories/attribute-source-part-jump-note.md",
"content": "Attribute property-grid source navigation uses `attribute:${attributeName}` source\nparts generated by `AbstractHtmlWriterService`. Set the design item selection\nfirst if needed, then call `selectionService.setSelectedPart(sourcePart)`; the\ndocument container must listen to selection refresh events as well as full\nselection changes so same-element source-part jumps update the code selection.\n"
},
{
"path": "memories/default-html-parser-source-parts-note.md",
"content": "DefaultHtmlParserService cannot read original source ranges from DOMParser nodes.\nAfter full parses, run the HTML writer with `updatePositions=true` on the created\ndesign items so attribute/source-part navigation works immediately from the\nnormalized designer HTML, matching what code view receives after switching back.\n"
},
{
"path": "memories/freehand-path-interpolation-note.md",
"content": "Freehand `DrawPathTool` can interpolate linear path points during drag with `interpolatePoints: true` and an optional `interpolationDistance`; the stock default tool opts in with 5px maximum spacing. Keep point-to-point path mode separate so its shift/angle snapping behavior stays unchanged.\n"
},
{
"path": "memories/getboxquads-svg-fast-path-removal.md",
"content": "# getBoxQuads SVG visual boxes\n\nSVGGraphicsElement quads should be built from a local SVG visual box, then transformed into the requested coordinate system. A viewport `getBoundingClientRect()` shortcut is not generally correct because it is already post-transform and loses orientation under rotated/3D HTML ancestors. A raw `getBBox()` is also not enough because native Firefox includes stroke bounds for SVG lines and paths.\n\nThe current polyfill computes a local visual box from `getBBox()` plus stroke inflation, uses `getScreenCTM()` when there is no transformed HTML ancestor, and otherwise uses the existing accumulated transform matrix. This covers plain lines, nested SVG-in-SVG lines, CSS-transformed SVGs, and the i14 stroke-bound path sample.\n"
},
{
"path": "memories/mermaid-diagram-support-plan.md",
"content": "# Mermaid diagram support rollout\n\nGoal: extend the Mermaid package from a flowchart-first designer into a Mermaid designer that can preview every Mermaid diagram and progressively offer structured visual editing for each diagram type.\n\nPhases:\n1. Flowchart: finish directions, labels, full shape syntax, markdown labels, edge movement, selection mapping, and Mermaid-layout import.\n2. Sequence: participants, messages, activations, notes, loops/alt/opt blocks, writer/parser selection mapping.\n3. Class: classes/interfaces, members, methods, relationships, annotations, namespaces.\n4. State: states, transitions, composite states, notes, forks/joins.\n5. ER: entities, attributes, relationship cardinalities.\n6. Remaining text-first diagrams: Gantt, journey, pie, quadrant, requirement, gitgraph, mindmap, timeline.\n7. Newer visual diagrams: sankey, xy chart, block, packet, kanban, architecture, radar, treemap, venn, ishikawa, wardley, treeview.\n\nPrinciple: every diagram type should first render in preview through Mermaid, then gain a typed parser/model/writer only when its visual editing semantics are defined.\n\nCurrent document metadata:\n- Root design item attributes store the current editable family: `data-mermaid-diagram-type` and, for flowcharts, `data-mermaid-flowchart-direction`.\n- The Mermaid package installs a root property group named `mermaid` so these values are editable when the root item is selected.\n- The writer honors root metadata only when doing so will not drop incompatible existing widgets; actual conversion between diagram families is still a separate future task.\n- The Mermaid writer opts into root-item serialization so root-only documents can still write `title`, diagram type, and flowchart direction even when there are no child design items.\n- Palette entries are filtered by root `diagramType`: flowchart shows flowchart nodes only, sequence shows sequence controls. Flowchart edges are intentionally not in the palette because they are created by the connector tool.\n- Mindmap is now a root `diagramType` with a filtered palette entry, root title support, indentation parser/writer, and a visual `mermaid-mindmap-node` widget. Mindmap nodes are real containers: parsed child lines become nested design items, and the writer emits indentation by walking `item.children()`. Import asks Mermaid to render the mindmap SVG first and maps `g.node.mindmap-node` positions back into the designer; the simple hierarchical placement is only a fallback when SVG layout extraction is unavailable. Direct parent nodes automatically draw curved child connection lines with depth-based stroke thickness. Icons/classes/config layout are still future mindmap property work.\n- Requirement diagram is now a root `diagramType` with requirement/element palette entries, direction property, block parser/writer, Mermaid-rendered node positioning, editable `mermaid-requirement-node` widgets, and relationship widgets for `contains`, `copies`, `derives`, `satisfies`, `verifies`, `refines`, and `traces` in both forward and reverse syntax forms. Styling/class syntax is still future requirement property work.\n- Flowchart frontmatter now preserves non-title content such as `config: htmlLabels: false`; flowchart labels with Markdown markers or embedded newlines are written as Mermaid markdown strings.\n- Flowchart support now covers Mermaid v11 expanded `@{ shape: ... }` nodes for the documented shape aliases, subgraph containers with nested node writing, special edge connectors including circle/cross/multidirectional/invisible/min-length forms, edge ids, and raw flowchart directives for `style`, `classDef`, `class`, `click`, and `linkStyle` so styles/classes/animation definitions round-trip. Node rendering is still an editable approximation of Mermaid's SVG, not pixel-identical for every exotic shape.\n- Mermaid node widgets render inline Markdown safely in the designer for bold/italic markers and multiline labels, using DOM nodes rather than raw HTML injection.\n"
},
{
"path": "memories/monaco-selection-coalesce-note.md",
"content": "# Monaco selection coalescing\n\nWhen designer selection changes are mirrored into split/code view, the same source range can be requested more than once around a designer content update. `DocumentContainer` now coalesces identical source-range selections before calling the active code view.\n\n`CodeViewMonaco` also tracks the delayed native Monaco selection call. Pending identical selections are ignored, and pending delayed selections are cleared when the model is updated, so a selection queued against the old model is not applied after the refreshed model and followed by the same fresh selection.\n"
},
{
"path": "memories/node-html-parser-source-parts-note.md",
"content": "The node-html-parser parser service must populate designItemDocumentPositionService\nsource parts during parse, not only element positions. Code-to-design transitions\ndo not run the writer first, so attribute jumps need parser-generated\n`attribute:${name}` and `attribute:${name}/value` source parts immediately after\n`parseDesignerHTML`.\n"
},
{
"path": "memories/source-part-selection-coalesce-note.md",
"content": "When selecting a source part on a design item that may not already be primary,\npass the source part into `selectionService.setSelectedElements(..., sourcePart)`\ninstead of calling `setSelectedElements()` and then `setSelectedPart()`. Splitting\nthose calls emits two code-view selections (element range, then source-part range)\nand makes the text editor jump.\n"
},
{
"path": "memories/svg-affine-overlay-point-conversion-note.md",
"content": "For the getBoxQuads polyfill SVG graphics fast path, diagonal SVG lines need\nstroke expansion along the normal vector (`strokeWidth / 2 * abs(dy|dx) / length`)\ninstead of the generic `strokeWidth * 2` inflation. Keep the legacy generic SVG\ninflation for non-line graphics unless replacing it with a fully native-compatible\nstroke bbox calculation; the existing path fixture relies on that behavior.\n"
},
{
"path": "memories/svg-geometry-placement-transform-offset-note.md",
"content": "- SVG geometry drag commit receives the live preview translation in visual/container\n coordinates. Before writing geometry attributes (`x`, `y`, path points, etc.) for\n elements that already have a CSS `transform`, map that offset through the inverse\n 2D linear part of the original transform; otherwise rotated/scaled/skewed SVG\n shapes preview correctly but jump on mouseup.\n- The conversion intentionally uses only `a/b/c/d` and ignores translation, because\n it is transforming an offset vector, not an absolute point.\n"
},
{
"path": "memories/unified-geometry-click-selection-no-commit.md",
"content": "# Unified geometry click selection\n\n`UnifiedGeometryExtension` creates drag state on handle pointer-down so it can keep pointer capture and support immediate dragging. A plain click on a handle must not commit geometry on pointer-up. Track `geometryChanged` in the drag state, set it only after a non-zero pointer movement has updated geometry, and commit on pointer-up only when that flag is true.\n"
},
{
"path": "memory/context-menu-copy-paste-pattern.md",
"content": "- Designer context menus are registered centrally in DefaultServiceBootstrap and grouped with ChildContextMenu plus SeperatorContextMenu.\n- ContextMenu renders an item with title '-' as a divider, so submenu spacers should use that sentinel item.\n- Clipboard-derived features can either write richer clipboard formats in copyItems or parse the current clipboard payload on demand; prefer the on-demand path when the behavior should work across browser instances without service-local state.\n- For paste-format style transfer, prefer calling getPasteItems() and reading styles() from the first parsed design item instead of adding clipboard-specific methods to copy-paste services.\n\n"
},
{
"path": "memory/context-menu-popover-anchor-note.md",
"content": "- In ContextMenu, popover top-layer rendering becomes non-interactive when combined with CSS anchor positioning in the demo browser check.\n- For the popover path, use explicit fixed left/top placement with viewport fallbacks; reserve anchor positioning for non-popover fallback paths only.\n- Deferred registration of global mousedown/contextmenu close listeners avoids immediately closing menus opened from mousedown-based triggers like undo/redo hold menus.\n"
},
{
"path": "memory/css-numeric-percent-measured-size-note.md",
"content": "- For CSS numeric size properties, `to %` conversion should prefer the element's measured box size (`getBoundingClientRect`) over the raw numeric text value so the unit switch preserves the current rendered size.\n- Keep `% -> px` on the normal reference-size path unless a concrete regression shows otherwise.\n- Numeric scrub drag is more reliable in the property grid with window-level pointer move/up/cancel listeners than element-local move/up listeners.\n"
},
{
"path": "memory/css-numeric-preview-lock-shadow-host-note.md",
"content": "- NumericStyleInput should own its preview display lock internally; editor-level refresh suppression alone is not enough because property-grid refreshes can still race during drag/hold preview.\n- Clear the display lock when an explicit new value arrives that differs from the current underlying `_value`; keep it only across repeated stale refreshes.\n- Percent conversion for root elements must look past `parentElement` and fall back across shadow boundaries via `getRootNode().host`, then `ownerDocument.body/documentElement`.\n- Interactive drag/step changes should snap to step increments and format to step precision, not just use a generic 4-decimal formatter.\n"
},
{
"path": "memory/css-zoom-placement-preview-note.md",
"content": "- Drag preview transforms in DefaultPlacementService and AbsolutePlacementService must divide the visual movement by the dragged element's CSS `zoom` factor before composing `translate(...)`.\n- `getBoxQuads` must wrap the element transform with the zoom matrix (`zoom * transform`, not `transform * zoom`) so overlay geometry sees the same zoom-scaled translation the browser renders.\n- TransformOriginExtension should draw its marker with `getResultingTransformationBetweenElementAndAllAncestors(..., canvas)` so the overlay includes self zoom, but it should keep using `element.convertPointFromNode(..., canvas)` for pointer-up commits so authored `transform-origin` stays in local element units.\n\n- `zoom` scales transform translation during preview, but the final `placeDesignItem(..., 'position')` commit path should stay in layout units.\n"
},
{
"path": "memory/cssom-shorthand-test-note.md",
"content": "- Jest node/jsdom in this repo is not reliable for CSS shorthand serialization checks.\n- For CssCombiner tests, fake document.createElement/style before importing the module because it creates a helper element at module load.\n- Prefer focused fake CSSOM tests or real-browser validation when changing cssText/shorthand behavior.\n"
},
{
"path": "memory/jest-esm-validation-note.md",
"content": "- In packages/web-component-designer, Jest currently has unrelated ESM/module-resolution issues for tests that import dist ESM output or dependencies like @node-projects/base-custom-webcomponent from node_modules.\n- For new service wiring in this package, npm run tsc is the reliable validation path unless Jest config is widened on purpose.\n\n- For isolated DOM-focused tests, replacing a single `css` helper import with a local `CSSStyleSheet` creator can avoid the Jest ESM boundary without widening package-level Jest transforms.\n- For custom-element or editor work in this package, extracting pure parsing/configuration helpers into source files without DOM or @node-projects/base-custom-webcomponent imports gives Jest a stable focused validation target without changing package-wide ESM transforms.\n\n"
},
{
"path": "memory/jest-source-import-style-note.md",
"content": "- In packages/web-component-designer Jest tests, import source modules with the package's existing ts-jest style (for example '../src/.../Module' without a '.js' suffix); using '.js' can fail module resolution in focused test runs.\n"
},
{
"path": "memory/linked-package-type-compat-note.md",
"content": "- In this repo's linked-package setup, widening exported structural types like ServiceContainer or InstanceServiceContainer can break demo/package compatibility because helper packages resolve their own nested @node-projects/web-component-designer types.\n- Prefer optional public properties or internal `as any` registration for new cross-cutting services when the demo consumes linked packages compiled against older type surfaces.\n- The demo HTML loads dist/appShell.js, so when normal demo tsc is blocked by the linked-package type mismatch, `npx tsc --noCheck` is the pragmatic way to refresh runtime artifacts for UI changes.\n\n- In web-component-designer-demo, running `npm i` can replace the local linked `@node-projects/web-component-designer` package with the published node_modules copy; if browser behavior disagrees with passing source/tests, rebuild the package, run `npm link`, then rerun `npm run linkAll` in the demo before debugging further.\n\n"
},
{
"path": "memory/manual-collab-snapshot-request.md",
"content": "- For manual copy/paste WebRTC signaling, do not infer initial snapshot ownership from receiving `hello`; the copied direction can be opposite of the joining direction.\n- Carry an explicit `requestInitialSnapshot` flag in `hello` / `hello-ack`, and decide it from the local document state so the empty peer asks for content instead of sending an empty snapshot back.\n"
},
{
"path": "memory/overlay-refresh-pattern.md",
"content": "- Designer extensions should prefer passing existing SVG nodes back into _drawLine/_drawCircle/_drawPath and gate refresh work with _valuesHaveChanges.\n- Only rebuild overlays when geometry structure changes (segment count/type or control-point presence), otherwise update positions/styles in place to preserve pointer capture and avoid stale handles.\n"
},
{
"path": "memory/pointertool-selected-quad-drag-note.md",
"content": "- PointerTool drag start must distinguish click target from drag source.\n- After alt-selecting an element underneath another, a plain click should still reselect the topmost hit element.\n- A plain drag should move the selected underlying item when the pointer is inside that item's border quad; recompute initial drag offset from the chosen drag source element.\n"
},
{
"path": "memory/property-grid-designitem-cache-sync-note.md",
"content": "- PropertyGrid refresh can run correctly while editors still show stale values if external DOM changes bypass DesignItem APIs; properties services read DesignItem `_attributes`/`_styles` caches.\n- Fix: add `IDesignItem.refreshAttributesAndStylesFromElement()` and call it before PropertyGrid/PropertyGridWithHeader refresh or rebuild work so `getValue`, `isSet`, `attributes()`, and `getAllStyles()` see live DOM state.\n"
},
{
"path": "memory/property-grid-preview-recreation-fix.md",
"content": "# Property Grid Preview Element Recreation Fix\n\n## Root Cause\n`CssCurrentPropertiesService.getRefreshMode()` returns `RefreshMode.fullOnValueChange` (value 2).\nWhen NumericStyleInput's preview sets `element.style.setProperty(...)`, the MutationObserver fires \n`PropertyGrid._mutationOccured()`, which calls `createElements()` for tabs with `fullOnValueChange`.\nThis DESTROYS and RECREATES all editors (including the active NumericStyleInput) mid-preview.\n\n## Fix\n- PropertyGrid keeps a single `MutationObserver` with `attributeOldValue: true`.\n- `IPropertiesService` now has an optional `shouldRecreatePropertyListOnMutation(...)` hook.\n- `AbstractPropertiesService` defaults to recreating only when an attribute is added or removed.\n- `CssCurrentPropertiesService` and `CssCustomPropertiesService` override that hook to compare old/new inline style declaration names, so value-only style changes refresh editors but declaration add/remove still rebuilds.\n- PropertyGrid also needs `designerCanvas.onContentChanged` and relevant `contentService.onContentChanged` subscriptions, because external property changes can arrive through undo/content notifications without a direct selected-element attribute mutation.\n\n- `hasEditorInPreview()` and the schema-signature recreation path were removed.\n\n\n## Key Enum Values (IPropertiesService.ts)\n```\nRefreshMode { none=0, full=1, fullOnValueChange=2, fullOnClassChange=3 }\n```\n- CssCurrentPropertiesService: fullOnValueChange (2) - the \"styles\" tab\n- CssPropertiesService: none (0) - the \"layout\" tab\n- AttributesPropertiesService: fullOnValueChange (2)\n- NativeElementsPropertiesService: full (1)\n"
},
{
"path": "memory/resize-left-top-initial-local-axis-note.md",
"content": "- Left/top resize handles cannot derive drag deltas by converting the current pointer into the element's current local space, because the element origin moves during the resize and cancels part of the delta.\n- Compute resize deltas from the pointer's movement in the initial local-axis basis (initial element-local-to-canvas matrix, translation removed), then apply opposite-corner correction from the current local border-box anchor converted back to canvas/parent space.\n- Rereading live getBoxQuads() during the same pointermove turn can add jitter; prefer current local anchor geometry plus convertPointFromNode()."
},
{
"path": "memory/straighten-line-screen-y-note.md",
"content": "- PathDataPolyfill.straightenLine uses calculateAlpha's clockwise screen-space angle; reconstruct snapped points with `y - Math.sin(rad) * length` or vertical directions invert.\n- Added PathDataPolyfill.test.ts with stubbed SVG globals because the helper module patches SVG element prototypes at import time."
},
{
"path": "memory/svg-getctm-double-transform-note.md",
"content": "- In the getBoxQuads transform walk, do not seed SVGGraphicsElement (non-root SVG) with getElementTransformWithZoom for self transforms when the loop also multiplies getCTM(); getCTM already includes the element's local SVG/CSS transform and double-applies rotate/scale otherwise.\n- A rotated CSS-sized SVG rect can expose this immediately: 90deg rotate produced a 180deg-style quad until the self CSS transform was skipped and getCTM handled it alone.\n- For SVG geometry placement commit, the drag preview translation extracted from element.style.transform is already in local geometry coordinates; do not rotate it again before calling placeDesignItem, or rotated shapes jump on mouseup.\n"
},
{
"path": "memory/svg-rect-style-geometry-write-note.md",
"content": "- For SVG rect editing in the unified geometry path, read rendered geometry from getBBox() instead of rect.x/rect.width baseVal values when CSS width/height may be the source of truth.\n- Preserve style-backed SVG geometry on write by carrying per-property serialization hints (style vs attribute, unit) through the geometry model, then applying writes with setStyle/style.setProperty instead of always setAttribute.\n- This avoids stacked rect corner handles for CSS-sized rects and prevents drag/resize from injecting width/height attributes when those properties were authored in inline style.\n"
},
{
"path": "memory/transform-preview-sync-pattern.md",
"content": "- When previewing transform edits via direct writes to element.style.transform, always sync or clear that inline transform after commit.\n- If the persisted transform stays local, restore the local style value; if it is stylesheet-backed, clear the inline preview so it does not override the stylesheet declaration.\n"
},
{
"path": "memory/transformed-resize-grid-local-point-pattern.md",
"content": "- For resize and grid interactions under transformed elements or transformed ancestors, do not derive local deltas from axis-aligned rects or an element-only inverse matrix.\n- Convert canvas/overlay points back into element-local coordinates with convertPointFromNode (via the getBoxQuads polyfill), then compute size deltas, grid cell hits, and grid track drags from those local points.\n- Grid helpers should expose local cell/gap coordinates separately from overlay coordinates so placement, hover, and resize logic all share the same transform-safe hit-testing path.\n- During live resize, getBoxQuads can still reflect the pre-resize box inside the same pointermove turn; for opposite-corner correction, convert the current local fixed-anchor point back to canvas instead of rereading the current quad.\n\n"
},
{
"path": "memory/undo-group-content-changed-commit-note.md",
"content": "- In packages/web-component-designer, grouped undo operations should not emit instanceServiceContainer.onContentChanged from UndoService.execute while a ChangeGroup is open.\n- ChangeGroup now accumulates IContentChanged payloads from execute calls and committed subgroups, and UndoService emits them once from commitTransactionItem on the outermost commit.\n- This keeps documentContainer, treeView, and propertyGrid from reacting to intermediate states during grouped edits.\n"
},
{
"path": "memory/webrtc-cross-machine-ice-config-note.md",
"content": "- Manual WebRTC signaling in collaboration-service worked on the same machine but failed across machines until the transport exposed optional `rtcConfiguration`.\n- Root cause: the transport created `RTCPeerConnection()` with no configurable STUN/TURN servers, so cross-machine connections depended only on local host candidates.\n- Demo support was added via `collabIceServer` query params and optional JSON `collabRtcConfiguration`; when the demo compiles against an older published package, pass the new option object as `any` at the constructor call site to stay compatible.\n- Cloudflare TURN should be integrated through the official server-side `generate-ice-servers` flow from `https://developers.cloudflare.com/realtime/turn/generate-credentials/`; a direct public `https://speed.cloudflare.com/turn-creds` link is not the supported integration path even though the speed test site can fetch credentials internally.\n- Cloudflare's official TURN API endpoint at `https://rtc.live.cloudflare.com/v1/turn/keys/{TURN_KEY_ID}/credentials/generate-ice-servers` is callable from the browser with user-supplied key id and API token; for the demo this is acceptable as a dev/test convenience, but it still exposes the long-lived API token to the browser.\n\n- Older static gist TURN hosts like `numb.viagenie.ca`, `turn.bistri.com`, `turn.anyfirewall.com`, and the raw gist `hubl.in` entries did not verify and should not be exposed as presets.\n- OpenRelay is still live as a free-tier provider, but it needs signup/API credentials or auth-secret integration, so expose it as a manual provider workflow rather than an unauthenticated preset.\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"@node-projects/monorepo\",\n \"private\": true,\n \"type\": \"module\",\n \"workspaces\": [\n \"packages/*\"\n ],\n \"scripts\": {\n \"test\": \"node --experimental-vm-modules node_modules/jest/bin/jest.js\",\n \"develop\": \"npm i && npm run link && npm run build\",\n \"link\": \"npm run link --workspaces\",\n \"watch\": \"npm run watch --workspaces\",\n \"build\": \"npm run build --workspaces\",\n \"prepublishOnly\": \"npm run build\"\n },\n \"devDependencies\": {\n \"@blockly/zoom-to-fit\": \"^6.0.9\",\n \"@node-projects/base-custom-webcomponent\": \">=0.27.8\",\n \"@node-projects/css-parser\": \"^5.0.0\",\n \"@node-projects/lean-he-esm\": \"^3.3.0\",\n \"@node-projects/node-html-parser-esm\": \"^6.2.0\",\n \"@node-projects/propertygrid.webcomponent\": \"^1.2.3\",\n \"@types/codemirror\": \"^5.60.15\",\n \"@types/css-tree\": \"^2.3.8\",\n \"@types/jest\": \"^29.5.14\",\n \"@types/jquery\": \"^3.5.32\",\n \"@types/jquery.fancytree\": \"0.0.11\",\n \"@types/node\": \"^22.8.6\",\n \"ace-builds\": \"^1.36.3\",\n \"blockly\": \"^11.1.1\",\n \"codemirror\": \"^6.0.1\",\n \"codemirror5\": \"npm:codemirror@^5.0.0\",\n \"css-tree\": \"^3.0.0\",\n \"esprima-next\": \"^6.0.3\",\n \"html2canvas\": \"*\",\n \"jest\": \"^29.7.0\",\n \"jest-environment-jsdom\": \"^30.3.0\",\n \"jquery\": \"^3.7.1\",\n \"jquery.fancytree\": \"^2.38.3\",\n \"jsbarcode\": \"^3.11.6\",\n \"long\": \"^5.2.3\",\n \"mdn-data\": \"^2.12.1\",\n \"monaco-editor\": \"^0.52.0\",\n \"ts-jest\": \"^29.2.5\",\n \"typescript\": \"^5.8.3\",\n \"typescript-lit-html-plugin\": \"^0.9.0\",\n \"wunderbaum\": \">=0.13.0\"\n }\n}\n"
},
{
"path": "packages/web-component-designer/.npmignore",
"content": "src/\r\ntest/\r\ntests/\r\nnode_modules/\r\ntsconfig.json\r\ntsconfig.tsbuildinfo\r\n!dist"
},
{
"path": "packages/web-component-designer/README.md",
"content": "# web-component-designer\r\n\r\n```It's now considered beta. It works, we use it in production, but there are many more features to come```\r\n\r\nA HTML web component for designing web components and HTML pages based on PolymerLabs wizzywid which can easily be integrated in your own software.\r\nMeanwhile polymer is not used anymore.\r\n\r\n\r\n\r\n\r\n## NPM Package\r\n\r\nhttps://www.npmjs.com/package/@node-projects/web-component-designer\r\n\r\n npm i @node-projects/web-component-designer\r\n\r\n## Browser support\r\n\r\n - Chrome/Firefox & Safari\r\n\r\n## Developing\r\n\r\n * Install dependencies\r\n```\r\n $ npm install\r\n```\r\n\r\n * Compile typescript after doing changes\r\n```\r\n $ npm run build (if you use Visual Studio Code, you can also run the build task via Ctrl + Shift + B > tsc:build - tsconfig.json)\r\n```\r\n\r\n * *Link node module* \r\n```\r\n $ npm link \r\n```\r\n\r\n## Using\r\n\r\nAt first you have to setup a service container providing services for history, properties, elements, ...\r\n\r\n## Code Editor\r\n\r\nYou can select to use one of 3 code editors available (ACE, CodeMirrow, Monaco).\r\nIf you use one of the widgets, you need to include the JS lib in your index.html and then use the specific widget.\r\n\r\n## TreeView\r\n\r\nWe have 2 tree components. One independent and one feature rich which uses FancyTree (and cause of this it needs JQuery and JqueryUI).\r\n\r\n## DragDrop\r\n\r\nIf you'd like to use the designer on mobile, you need the mobile-drag-drop npm library.\r\nYour index.html should be extended as follows:\r\n\r\n \r\n \r\n\r\n## Keys\r\n\r\nPointer Tool:\r\nalt: select element behind\r\nshift: draw selection rect\r\nctrl: add/remove from selection\r\nctrl+shift: pan\r\n\r\n## Copyright notice\r\n\r\nThe Library uses Images from the Chrome Dev Tools, see\r\nhttps://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src\r\nand\r\nhttps://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE\r\n"
},
{
"path": "packages/web-component-designer/_esbuild.js",
"content": "import * as esbuild from 'esbuild';\nimport { minifyHTMLLiteralsPlugin } from 'esbuild-plugin-minify-html-literals';\n\nawait esbuild.build({\n entryPoints: ['./dist/index-all.js'],\n outfile: './dist/index-min.js',\n\n bundle: true,\n format: 'esm',\n minify: true,\n sourcemap: true,\n platform: 'neutral',\n\n external: ['@node-projects/base-custom-webcomponent', './NpmPackageHacks.json' ],\n\n plugins: [\n minifyHTMLLiteralsPlugin()\n ]\n}).catch(() => process.exit(1));\n"
},
{
"path": "packages/web-component-designer/assets/designerCanvasIframe.html",
"content": "\n\n\n \n\n\n\n\n"
},
{
"path": "packages/web-component-designer/assets/images/chromeDevtools/LICENSE",
"content": "// Copyright 2014 The Chromium Authors. All rights reserved.\r\n//\r\n// Redistribution and use in source and binary forms, with or without\r\n// modification, are permitted provided that the following conditions are\r\n// met:\r\n//\r\n// * Redistributions of source code must retain the above copyright\r\n// notice, this list of conditions and the following disclaimer.\r\n// * Redistributions in binary form must reproduce the above\r\n// copyright notice, this list of conditions and the following disclaimer\r\n// in the documentation and/or other materials provided with the\r\n// distribution.\r\n// * Neither the name of Google Inc. nor the names of its\r\n// contributors may be used to endorse or promote products derived from\r\n// this software without specific prior written permission.\r\n//\r\n// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS\r\n// \"AS IS\" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT\r\n// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR\r\n// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT\r\n// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,\r\n// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT\r\n// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,\r\n// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY\r\n// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\r\n// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\r\n// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
},
{
"path": "packages/web-component-designer/assets/images/chromeDevtools/info.txt",
"content": "Images from\r\nhttps://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src"
},
{
"path": "packages/web-component-designer/assets/images/treeview/license.txt",
"content": "WPF Designer Icons are taken from\nFugue Icons Library:\nLicense: Creative Commons Attribution 3.0 License\nhttp://p.yusukekamiyamane.com/\n\nCopied from the Fugue Icon Library and left unmodified:\n\n - Icons.16x16.WpfOutline.Eye.png => eyeopen.png\n - Icons.16x16.WpfOutline.EyeClosed.png => eyeclosed.png\n - lock.png"
},
{
"path": "packages/web-component-designer/config/elements-native.json",
"content": "{\r\n \"elements\":\r\n [\r\n \"div\",\r\n \"label\",\r\n \"input\",\r\n \"textarea\",\r\n \"select\",\r\n {\"tag\" : \"button\", \"defaultWidth\": \"80px\", \"defaultHeight\": \"30px\", \"defaultContent\": \"Button\" },\r\n \"img\",\r\n \"iframe\",\r\n {\"tag\" : \"a\" },\r\n \"p\",\r\n \"span\",\r\n \"b\",\r\n \"i\",\r\n \"u\",\r\n \"br\",\r\n \"em\",\r\n \"q\",\r\n \"small\",\r\n \"strong\",\r\n \"form\",\r\n \"h1\",\r\n \"h2\",\r\n \"h3\",\r\n \"h4\",\r\n \"h5\",\r\n \"h6\",\r\n \"ol\",\r\n \"ul\",\r\n \"li\",\r\n \"pre\",\r\n \"table\",\r\n \"caption\",\r\n \"colgroup\",\r\n \"col\",\r\n \"thead\",\r\n \"th\",\r\n \"tbody\",\r\n \"tr\",\r\n \"td\",\r\n \"tfoot\"\r\n ]\r\n}\r\n"
},
{
"path": "packages/web-component-designer/jest.config.js",
"content": "export default {\n roots: ['/tests'],\n testMatch: ['**/?(*.)+(spec|test).+(mts|ts|tsx|mjs|js)'],\n preset: \"ts-jest/presets/default-esm\",\n testEnvironment: \"node\",\n extensionsToTreatAsEsm: ['.ts', '.mts'],\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1'\n },\n transform: {\n '^.+\\\\.(mts|ts|tsx|mjs|js)$': [\n \"ts-jest\",\n {\n \"useESM\": true,\n \"tsconfig\": {\n \"allowJs\": true\n }\n }\n ]\n },\n transformIgnorePatterns: [\n '/node_modules/(?!(?:@node-projects/base-custom-webcomponent)(?:/|$))'\n ]\n}"
},
{
"path": "packages/web-component-designer/jsr.json",
"content": "{\n \"name\": \"@node-projects/web-component-designer\",\n \"version\": \"0.1.180\",\n \"exports\": \"./src/index.ts\"\n}"
},
{
"path": "packages/web-component-designer/package.json",
"content": "{\r\n \"description\": \"A WYSIWYG designer webcomponent for html components\",\r\n \"name\": \"@node-projects/web-component-designer\",\r\n \"version\": \"0.2.24\",\r\n \"type\": \"module\",\r\n \"main\": \"./dist/index.js\",\r\n \"author\": \"jochen.kuehner@gmx.de\",\r\n \"license\": \"MIT\",\r\n \"scripts\": {\r\n \"test\": \"node --experimental-vm-modules ../../node_modules/jest/bin/jest.js\",\r\n \"tsc\": \"tsc\",\r\n \"build\": \"tsc\",\r\n \"link\": \"npm link\",\r\n \"watch\": \"pm2 start tsc --watch\",\r\n \"prepublishOnly\": \"npm run build && npm run bundle\",\r\n \"bundle\": \"node _esbuild.js\"\r\n },\r\n \"dependencies\": {\r\n \"@node-projects/base-custom-webcomponent\": \">=0.27.8\"\r\n },\r\n \"devDependencies\": {\r\n \"@types/node\": \"^22.8.6\",\r\n \"esbuild\": \"^0.25.10\",\r\n \"esbuild-plugin-minify-html-literals\": \"^3.0.0\",\r\n \"mdn-data\": \"^2.4.2\"\r\n },\r\n \"repository\": {\r\n \"type\": \"git\",\r\n \"url\": \"git+https://github.com/node-projects/web-component-designer.git\"\r\n }\r\n}\r\n"
},
{
"path": "packages/web-component-designer/src/Constants.ts",
"content": "export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';\r\nexport const dragDropFormatNameBindingObject = 'text/json/bindingobject';\r\nexport const dragDropFormatNamePropertyGrid = 'text/json/propertydrop';\r\n\r\nlet imporUrl = new URL((import.meta.url));\r\nexport var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';"
},
{
"path": "packages/web-component-designer/src/commandHandling/CommandType.ts",
"content": "export enum CommandType {\r\n 'copy' = 'copy',\r\n 'paste' = 'paste',\r\n 'cut' = 'cut',\r\n 'delete' = 'delete',\r\n 'undo' = 'undo',\r\n 'redo' = 'redo',\r\n\r\n 'holdUndo' = 'holdUndo',\r\n 'holdRedo' = 'holdRedo',\r\n\r\n 'rotateCounterClockwise' = 'rotateCounterClockwise',\r\n 'rotateClockwise' = 'rotateClockwise',\r\n 'mirrorHorizontal' = 'mirrorHorizontal',\r\n 'mirrorVertical' = 'mirrorVertical',\r\n\r\n 'selectAll' = 'selectAll',\r\n\r\n 'moveToFront' = 'moveToFront',\r\n 'moveForward' = 'moveForward',\r\n 'moveBackward' = 'moveBackward',\r\n 'moveToBack' = 'moveToBack',\r\n\r\n 'arrangeLeft' = 'arrangeLeft',\r\n 'arrangeCenter' = 'arrangeCenter',\r\n 'arrangeRight' = 'arrangeRight',\r\n 'arrangeTop' = 'arrangeTop',\r\n 'arrangeMiddle' = 'arrangeMiddle',\r\n 'arrangeBottom' = 'arrangeBottom',\r\n\r\n 'unifyWidth' = 'unifyWidth',\r\n 'unifyHeight' = 'unifyHeight',\r\n\r\n 'distributeHorizontal' = 'distributeHorizontaly',\r\n 'distributeVertical' = 'distributeVertical',\r\n\r\n 'setTool' = 'setTool',\r\n\r\n 'setStrokeColor' = 'setStrokeColor',\r\n 'setFillBrush' = 'setFillBrush',\r\n 'setStrokeThickness' = 'setStrokeThickness',\r\n \r\n 'screenshot' = 'screenshot',\r\n}"
},
{
"path": "packages/web-component-designer/src/commandHandling/IUiCommand.ts",
"content": "import { CommandType } from './CommandType.js';\r\n\r\nexport interface IUiCommand {\r\n type: CommandType;\r\n event?: Event;\r\n special?: string;\r\n parameter?: any;\r\n\r\n altKey?: boolean;\r\n ctrlKey?: boolean;\r\n metaKey?: boolean;\r\n shiftKey?: boolean;\r\n}\r\n"
},
{
"path": "packages/web-component-designer/src/commandHandling/IUiCommandHandler.ts",
"content": "import { IUiCommand } from './IUiCommand.js';\r\n\r\nexport interface IUiCommandHandler {\r\n executeCommand: (command: IUiCommand) => void;\r\n canExecuteCommand: (command: IUiCommand) => boolean;\r\n}\r\n"
},
{
"path": "packages/web-component-designer/src/elements/controls/ColorEditor.ts",
"content": "import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';\nimport { w3color } from '../helper/w3color.js';\n\nexport type ColorEditorMode = 'rgb' | 'hsl' | 'cmyk' | 'oklab' | 'oklch';\nexport type ColorEditorValueChangedEventArgs = { newValue?: string, oldValue?: string };\n\ntype RgbaColor = { r: number, g: number, b: number, a: number };\ntype HsvColor = { h: number, s: number, v: number };\n\nconst modes: ColorEditorMode[] = ['rgb', 'hsl', 'cmyk', 'oklab', 'oklch'];\nconst epsilon = 0.000001;\n\nexport class ColorEditor extends BaseCustomWebComponentConstructorAppend {\n\n public static override readonly style = css`\n :host {\n display: block;\n box-sizing: border-box;\n width: 280px;\n color: var(--property-grid-text-color, #e8edf2);\n font: 12px system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n }\n\n #editor {\n display: grid;\n gap: 10px;\n box-sizing: border-box;\n padding: 12px;\n border: 1px solid rgba(255, 255, 255, .14);\n border-radius: 8px;\n background: var(--color-editor-background, #20252b);\n box-shadow: 0 14px 38px rgba(0, 0, 0, .36);\n }\n\n #plane {\n position: relative;\n height: 150px;\n border-radius: 6px;\n overflow: hidden;\n cursor: crosshair;\n background:\n linear-gradient(to top, #000, transparent),\n linear-gradient(to right, #fff, transparent),\n hsl(var(--hue, 0) 100% 50%);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);\n touch-action: none;\n }\n\n #plane-handle {\n position: absolute;\n width: 12px;\n height: 12px;\n box-sizing: border-box;\n border: 2px solid white;\n border-radius: 50%;\n transform: translate(-6px, -6px);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), 0 1px 4px rgba(0, 0, 0, .55);\n pointer-events: none;\n }\n\n .slider-row {\n display: grid;\n grid-template-columns: 18px minmax(0, 1fr) 42px;\n gap: 8px;\n align-items: center;\n }\n\n .slider-row span {\n color: rgba(232, 237, 242, .68);\n font-size: 11px;\n text-transform: uppercase;\n }\n\n input[type=\"range\"] {\n --slider-background: #79b8ff;\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 16px;\n margin: 0;\n background: transparent;\n outline: none;\n }\n\n #hue {\n --slider-background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);\n }\n\n #alpha {\n --slider-background:\n linear-gradient(to right, rgba(var(--rgb-color, 0, 0, 0), 0), var(--opaque-color, #000)),\n linear-gradient(45deg, rgba(255, 255, 255, .24) 25%, transparent 25% 75%, rgba(255, 255, 255, .24) 75%),\n linear-gradient(45deg, rgba(255, 255, 255, .24) 25%, transparent 25% 75%, rgba(255, 255, 255, .24) 75%),\n #2a3037;\n --slider-background-position: 0 0, 0 0, 5px 5px, 0 0;\n --slider-background-size: auto, 10px 10px, 10px 10px, auto;\n }\n\n input[type=\"range\"]::-webkit-slider-runnable-track {\n height: 7px;\n border-radius: 999px;\n background: var(--slider-background);\n background-position: var(--slider-background-position, 0 0);\n background-size: var(--slider-background-size, auto);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);\n }\n\n input[type=\"range\"]::-moz-range-track {\n height: 7px;\n border-radius: 999px;\n background: var(--slider-background);\n background-position: var(--slider-background-position, 0 0);\n background-size: var(--slider-background-size, auto);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n margin-top: -3.5px;\n border: 2px solid white;\n border-radius: 50%;\n background: hsl(var(--hue, 0) 100% 50%);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .45);\n }\n\n input[type=\"range\"]::-moz-range-thumb {\n width: 10px;\n height: 10px;\n border: 2px solid white;\n border-radius: 50%;\n background: hsl(var(--hue, 0) 100% 50%);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .45);\n }\n\n #alpha::-webkit-slider-thumb {\n background: var(--color, #000);\n }\n\n #alpha::-moz-range-thumb {\n background: var(--color, #000);\n }\n\n .swatch {\n width: 42px;\n height: 22px;\n border-radius: 5px;\n background:\n linear-gradient(var(--color, #000), var(--color, #000)),\n linear-gradient(45deg, rgba(255, 255, 255, .22) 25%, transparent 25% 75%, rgba(255, 255, 255, .22) 75%),\n linear-gradient(45deg, rgba(255, 255, 255, .22) 25%, transparent 25% 75%, rgba(255, 255, 255, .22) 75%);\n background-position: 0 0, 0 0, 5px 5px;\n background-size: auto, 10px 10px, 10px 10px;\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);\n }\n\n #mode {\n height: 26px;\n min-width: 0;\n border: 1px solid rgba(255, 255, 255, .14);\n border-radius: 5px;\n background: #161a1f;\n color: inherit;\n font: inherit;\n outline: none;\n }\n\n #channels {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 6px;\n }\n\n label {\n display: grid;\n gap: 3px;\n min-width: 0;\n color: rgba(232, 237, 242, .68);\n font-size: 10px;\n text-transform: uppercase;\n }\n\n input[type=\"number\"],\n #text {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 26px;\n border: 1px solid rgba(255, 255, 255, .14);\n border-radius: 5px;\n background: #161a1f;\n color: inherit;\n font: inherit;\n outline: none;\n }\n\n input[type=\"number\"] {\n padding: 0 4px;\n }\n\n #text {\n padding: 0 8px;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n text-transform: none;\n }\n\n #text.invalid {\n border-color: #e66b6b;\n box-shadow: 0 0 0 1px rgba(230, 107, 107, .35);\n }\n\n input:focus,\n select:focus {\n border-color: #79b8ff;\n box-shadow: 0 0 0 1px rgba(121, 184, 255, .28);\n }\n\n :host([readonly]) input,\n :host([readonly]) select,\n :host([readonly]) #plane,\n :host([disabled]) input,\n :host([disabled]) select,\n :host([disabled]) #plane {\n opacity: .65;\n pointer-events: none;\n }\n `;\n\n public static override readonly template = html`\n