feat(vectorizer): Headless ready and move into worker for demo purposes

.gitignore

@@ -7,3 +7,4 @@ examples/*/dist
 yarn-error.log
 
 .turbo
+.vercel

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

CONVENTIONS.md

@@ -0,0 +1,6 @@
+## Conventions
+
+- all exports from `commands.ts` are treated and registered as commands. The `id` is autogenerated from `${manifest.id}.commands.${exportname}
+- commands can be categorized by `_`. As such `block_bringToFront` belong to category `block` 
+- id and category can also be manually overwritten in the `manifest` 
+- translation keys are the id of the command. use `en.json`

LIST_OF_PLUGINS.md

@@ -0,0 +1,193 @@
+# Commands
+
+- [ ] Useful
+  - [ ] Background removal
+  - [ ] Segment everything: Sam based auto segmenter
+  - [ ] Bake image 
+  - [ ] Upscale image 
+
+
+- [ ] Convert to
+  - [ ] Convert to Vector
+  - [ ] Convert to Bitmap
+
+- [ ] Vector on Path: Convert any shape and bind to path. How do we keep the original block?
+
+- [ ] Turn into // Rethink Semantics This should change existing blocks without loss of date
+  - [ ] Turn into Image:  Turns a block into a graphics block with the image as fill, 
+  - [ ] Turn into Vector
+  - [ ] Turn into Graphics
+
+  - [ ] Turn into Group
+  - [ ] Turn into Page
+
+
+- [ ] Zoom
+  - [ ] Fit Page 
+  - [ ] Fit Selection
+  - [ ] Zoom to 100%
+
+- [ ] Block Lifecylce
+  -  [x] Duplicate Selected
+  -  [x] Delete Selected
+
+  -  [ ] Copy Selected
+  -  [ ] Paste Selected
+  -  [ ] Group Selected 
+  -  [ ] Frame Selected
+
+  -  [ ] Merge Selected (Union Boolean Op)
+  -  [ ] Subtract Selected (Difference Boolean Op)
+  -  [ ] Intersect Selected
+  -  [ ] Exclude Selected 
+
+- [ ] Copy Properties: Copies them only onces
+    - [ ] Copy Transform Properties to {Selected, Clipboard}
+      - [ ] Copy Position Properties to {Selected, Clipboard}
+      - [ ] Copy Rotation Properties to {Selected, Clipboard}
+      - [ ] Copy Size (Width, Height) Properties to {Selected, Clipboard}
+    - [ ] Copy Fill Content to {Selected, Clipboard}
+    - [ ] Copy Text Content to {Selected, Clipboard}
+    - [ ] Copy Appearance Properties to {Selected, Clipboard}
+      - [ ] Copy Stroke Properties to {Selected, Clipboard}
+      - [ ] Copy Adjustment properties to {Selected, Clipboard}
+      - [ ] Copy Filter Properties to {Selected, Clipboard}
+
+- [ ] Sync Properties: Sync keeps them sync and updates both in a two way fassion 
+  - [ ] Sync Transform Properties to {Selected, Clipboard}
+      - [ ] Sync Position Properties to {Selected, Clipboard}
+      - [ ] Sync Rotation Properties to {Selected, Clipboard}
+      - [ ] Sync Size (Width, Height) Properties to {Selected, Clipboard}
+    - [ ] Sync Fill Content to {Selected, Clipboard}
+    - [ ] Sync Text Content to {Selected, Clipboard}
+    - [ ] Sync Appearance Properties to {Selected, Clipboard}
+      - [ ] Sync Stroke Properties to {Selected, Clipboard}
+      - [ ] Sync Adjustment properties to {Selected, Clipboard}
+      - [ ] Sync Filter Properties to {Selected, Clipboard}
+
+
+- [ ] Block Editing
+  - [ ] Auto-Crop Image 
+  - [ ] Adjust Image
+  - [ ] Apply Filter 
+  - [ ] Apply Blur 
+  - [ ] Apply Effect 
+
+- [ ] Create New Block
+  - [ ] Create New Graphic
+  - [ ] Create New Text 
+  - [ ] Create New Shape
+
+  - [ ] Create New Group from Selection
+  - [ ] Create New Page from Selection
+  - [ ] Create new Scene from Selection
+
+
+- [ ] Add from Library
+  - [ ] Add Image from Library
+  - [ ] Add Text from Library
+  - [ ] Add Sticker from Library
+
+
+
+- [ ] Replace /Change
+  - [ ] Replace Image 
+  - [ ] Replace Shape
+  - [ ] Replace Font
+  - [ ] Replace Text
+
+  - [ ] Change Fill to Image
+  - [ ] Change Fill to Video
+  - [ ] Change Fill to Color
+  - [ ] Change Fill to Gradient 
+
+
+- [ ] Add: Open the libraries and choose 
+  - [ ] Add ${List all Asset Libraries}
+
+- [x] Save As
+  - [x] Save {Scene, Selected} As {SVG, PNG, JPEG, PDF, Component} to {Clipboard, File, Console, S3, Asset Library}
+
+
+- [ ] Share to
+  - [ ] Share to Zapier
+  - [ ] Share to LinkedIn 
+  - [ ] Share to Twitter/X 
+  - [ ]   
+
+- [ ] Auto-(mation)
+  - [ ] Auto-crop
+  - [ ] Auto-Adjust
+
+- [ ] Text
+  - [ ] Summarize Text
+  - [ ] Translate Text to {en,de}
+  - [ ] Correct Text Spelling
+
+- [ ] Effects
+    - [ ] Custom effect
+
+- [ ] Generators
+  - [ ] QR Code 
+  - [ ] Map 
+  - [ ] AI Image
+  - [ ] Star Rating
+
+- [ ] Uploader
+  - [ ] upload to S3
+  - [ ] upload to localStorage
+  - [ ] ...
+- [ ] Importer
+  - [ ] SVG Importer
+
+- [ ] Layouting
+  - [ ] Auto-Resize Parent: Parent block always resizes to the child block automatically
+  - [ ] Layout all in group in stack
+
+- [ ] Solutions
+  - [ ] Studio: Loads all plugins for a studio solution
+  - [ ] Photo 
+  - [ ] Video 
+
+
+## Asset Sources / Libraries
+- [ ] Assets  
+  - [ ] Giphy
+  - [ ] Unsplkash
+  - [ ] Getty 
+  - [ ] Soundstripe
+  - [ ] Pexels 
+  - [ ] Demo Images
+  - [ ] ...
+- [ ] Designer
+  - [ ] Component Library
+
+
+- [ ] Experimental/Fun
+
+- [ ] Import/Upload
+  - [ ] Import Design File
+  - [ ] Import Asset
+
+
+- [ ] Editor Functionality
+  - [ ] Component Library
+  - [ ] CommandPalette
+  - [ ] Layerlist 
+  - [ ] Metadata Editor
+
+
+
+## Debugging
+- [ ] Debugging
+  - [x] CommandPalette
+  - [ ] Print Metadata
+  - [ ] {Print, Save,, Meta}
+
+
+
+
+## Other
+- [ ] Reduce colors to 1...n 
+- [ ] Subtitle STR colors 
+- [ ] Upload scenes, Upload components

TODO.md

@@ -0,0 +1,61 @@
+- [ ] How can I list all plugins that are active
+- [ ] How can I deactivate a plugin later completely? `enableFeatures`, but this must be per "command". A plugin might contribute multiple features? 
+- [ ] we should pass the PluginContext with separate `imgly: {engine?: ImglyEngine, editor?: ImglyEditor, ui?: ImglyUI`
+- [ ] We can already establish the name 'imgly"  for the PLUGINS
+- [ ] `unstable_getCanvasMenuOrder` should maybe be called `unstable_getCanvasMenuEntries`
+- [ ] `unstable_setCanvasMenuOrder` should maybe be called `unstable_setCanvasMenuEntries`
+- [ ] `unstable_enableFeatures` what is it used for. the button is not displayed when I check it internally
+- [ ] `unstable_enableFeatures` should get the blocks it should evaluate it for. It's not always the selected ones in every scenario.
+- [ ] `enable_features` could probably better be named `enableFeatureInContext()`
+- [ ] What is the intention of the `builder.Button` first parameter, where is the id used later? 
+- [ ] (Exkurs) How can I change the type of a block to another. E.g. Change a Graphic Block into a Group Block for Vectorizer and the ID should stay the same and all properties that are relevant. "Turn into"
+- [ ] The separation of ui and engine is sometimes too hard to use. I propose not to make it dependent on initUI and init. But more like lifecycles in general and always pass {ui?, engine, editor}
+- [ ] `upload` should maybe be part of the asset sources and/or part of engine
+
+- [ ] `listPanels` function is missing to know which panels exists and are registers
+- [ ] `registerComponents` should get `cesdk` and not only `engine` 
+- [ ] **Naming correction** 
+  - [ ] IMGLY = { ui: IMGLYUI, engine: IMGLYEngine }
+  - [ ] CESDK = { ui: CESDKUI, engine: CESDKEngine }
+  - Get rid of high level functions maybe
+- [ ] SDK should use dynamic import internally to save space and also not load on non supported platforms
+- [ ] Commands should be define as should be `func params {context: {engine, ui}, params: any}` 
+- [ ] `hasMetadata` should be `hasMetaDataKey` because it's referring to an entry or item not if the whole metadata is existing
+- [ ] `lifetime/unsubscribe` is totally missing from plugin apu. E.g. VSCode offers a `subscribe` to register all that need to be called when the plugin is `unloaded`
+
+
+- [ ] Clarify semantics of `label`, `titel`, and `id`
+  - [ ] Label is used for translation  
+- it's `block.export` but not `scene.export` as I would expect
+- `pages` should have design units
+- `pages` should have their type e.g. video vs static
+- `docuements` are just groups and as such leverage multi-editing
+
+
+- How to work with `scopes` and `features`. Can I define custom scopes? Do we handle scopes in `enabledFeature
+- There seems to be no API like `findAllScopes()` to enumerate scopes
+- Is there an option to add customs scopes. 
+- `isEnableFeature` should be evaluated by the UI and the commands already?
+- I think scopes 
+- `block.ungroup(bId)` should return the Ids of the items in the group
+- block has no `getScope` and `setScope` to define the hierarchies. Here is an issue when dealing with hiearchies. We need to have the same thing available as with global scopes
+  - Editor : Allow, Defer, Deny
+    - Scene: Allow, Defer, Deny
+      - Collection: Allow, Defer, Deny
+        - Element: Allow, (Defer,) Deny
+
+
+- `getEffects` api seems unsimilar to all `findAllScopes` etc. Maybe
+- `UploadCallbackContext` not found in exports
+
+
+- `MultiSelection` across multiple pages does not work!!! 
+- `Engine disposed` is logged everytime
+
+
+- `Unsubribe` mechanism. We need to know and be able todo cleanup of commands. E.g. removeCommand and than also cleanup all dependencies
+- In VSCode every register function also returns the "unsubscribe" and "free" function. 
+
+
+- `stroke/join` properties are not exposed it seems if you list all properties
+- Default Stroke grey seems not a good choice as default

examples/web/package.json

@@ -5,11 +5,19 @@
   "type": "module",
   "scripts": {
     "dev": "vite --clearScreen=false",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@cesdk/cesdk-js": "^1.20.0",
+    "@cesdk/cesdk-js": "^1.21.0",
+    "@imgly/plugin-core": "*",
+    "@imgly/plugin-background-removal-web": "*",
+    "@imgly/plugin-vectorizer": "*",
+    "@imgly/plugin-design-essentials": "*",
+    "@imgly/plugin-documents": "*",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
+    "react-cmdk": "^1.3.9",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
@@ -22,6 +30,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.1.1"
   }
 }