@vivix-labs/magic-edit 0.0.0-stage → 1.0.0-beta

package/HTML-TO-IMAGE-LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-2025 W.Y.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,45 @@
-# Temporary Holding Version
+# Magic Edit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Magic Edit captures a visible page element or media frame. Select a target,
+mark the image, describe the change, and choose **Copy for Chat**. Paste the instruction and
+marked image into the Agent conversation. When a destination accepts only one format, use
+**Copy instruction** and **Download marked PNG**.
+
+The copied instruction includes the project, target label, visible text when available, the source time
+for video, and numbered marks. The Agent uses that information and its own project tools to
+identify the target and carry out the request.
+
+Studio Home mounts one user-scoped toolbar. It can select content in Home and in the
+active same-origin project frame. Embedded frontends can publish precise targets with
+`publishMagicEditSource`. Ordinary text, cards, and media remain selectable on project
+pages that do not publish targets.
+
+A standalone frontend can mount the component through a configured Studio client
+dependency. An embedded frontend that also supports standalone can use
+`hasGlobalMagicEdit()` to leave the toolbar to Home when it is available.
+
+```tsx
+import type { MagicEditProps } from '@vivix-labs/magic-edit/shared';
+
+// magicEditInstance is the declared same-page dependency ID.
+const MagicEdit = client.resolveUI<MagicEditProps>({
+  plugin: magicEditInstance,
+  id: 'magic-edit.panel',
+})?.component;
+
+// Mount inside the frontend's StudioTheme.
+{
+  MagicEdit && <MagicEdit />;
+}
+```
+
+The optional `targets` callback supplies more precise labels, stable asset versions, or
+business context where the frontend already knows them.
+
+The frontend can pass configured toolbar contributions in `tools`. Each entry has a
+stable `id` and a component receiving `MagicEditToolProps`. The component renders when
+the toolbar is open and receives the captured target metadata, region count, and busy
+state. There is no target while choosing or before capture.
+
+Copying runs entirely in the browser. Closing Magic Edit clears the current selection
+and instruction.

package/dist/UI-SYSTEM-LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 VIVIX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/assets/toolbar-divider-DHGQDOLY.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 2147226224">
+<line id="Line 1" x1="4.5" y1="2.18557e-08" x2="4.5" y2="16" stroke="white" stroke-opacity="0.4"/>
+</g>
+</svg>

package/dist/client-code.css

@@ -0,0 +1,423 @@
+/* packages/magic-edit/src/activation.css */
+@property --vx-magic-edit-beam-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
+.magic-edit-effects {
+  --vx-media-selection-color: var(--vx-green-dark);
+  --vx-magic-edit-glow:
+    inset 0 0 0 1px color-mix(in srgb, var(--vx-media-selection-color) 65%, transparent),
+    inset 0 0 32px 6px color-mix(in srgb, var(--vx-media-selection-color) 36%, transparent),
+    inset 0 0 72px 12px color-mix(in srgb, var(--vx-state-success) 14%, transparent);
+  --vx-magic-edit-beam-blue: var(--vx-blue-beam);
+  --vx-magic-edit-beam-width: 2px;
+  --vx-magic-edit-beam-glow-width: 32px;
+  --vx-magic-edit-beam-glow-blur: 12px;
+  --vx-magic-edit-wave-glint: light-dark(var(--vx-white-white-6a), var(--vx-white-white-2a));
+  --vx-magic-edit-wave-blue: light-dark(rgb(110 150 255 / 22%), rgb(80 140 255 / 35%));
+  --vx-magic-edit-wave-green: light-dark( color-mix(in srgb, var(--vx-media-selection-color) 22%, transparent), color-mix(in srgb, var(--vx-media-selection-color) 34%, transparent) );
+  --vx-magic-edit-wave-orange: light-dark( color-mix(in srgb, var(--vx-orange-light) 24%, transparent), color-mix(in srgb, var(--vx-orange-dark) 39%, transparent) );
+  --vx-magic-edit-wave-peach: light-dark(rgb(255 180 120 / 18%), rgb(255 190 140 / 26%));
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+.magic-edit-wave {
+  --vx-wave-x: 50%;
+  --vx-wave-y: 50%;
+  --vx-wave-radius: 1px;
+  --vx-wave-opacity: 1;
+  --vx-wave-front: circle var(--vx-wave-radius) at var(--vx-wave-x) var(--vx-wave-y);
+  position: absolute;
+  overflow: hidden;
+}
+.magic-edit-wave::before,
+.magic-edit-wave::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: var(--vx-wave-opacity);
+}
+.magic-edit-wave::before {
+  background:
+    radial-gradient(
+      var(--vx-wave-front),
+      transparent 62%,
+      var(--vx-magic-edit-wave-glint) 79%,
+      transparent 96%);
+  mask:
+    linear-gradient(
+      to bottom,
+      black,
+      transparent) top / 100% 8px no-repeat,
+    linear-gradient(
+      to top,
+      black,
+      transparent) bottom / 100% 8px no-repeat,
+    linear-gradient(
+      to right,
+      black,
+      transparent) left / 8px 100% no-repeat,
+    linear-gradient(
+      to left,
+      black,
+      transparent) right / 8px 100% no-repeat;
+}
+.magic-edit-wave::after {
+  background:
+    radial-gradient(
+      var(--vx-wave-front),
+      transparent 57%,
+      var(--vx-magic-edit-wave-blue) 67%,
+      var(--vx-magic-edit-wave-green) 74%,
+      var(--vx-magic-edit-wave-orange) 81%,
+      var(--vx-magic-edit-wave-peach) 88%,
+      transparent 99%);
+  mix-blend-mode: multiply;
+}
+[data-vx-theme=dark] .magic-edit-wave::after {
+  mix-blend-mode: screen;
+}
+.magic-edit-glow {
+  --vx-magic-edit-beam-angle: 0deg;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  opacity: 0;
+  box-shadow: var(--vx-magic-edit-glow);
+}
+.magic-edit-glow::before,
+.magic-edit-glow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: var(--vx-magic-edit-beam-width);
+  background:
+    conic-gradient(
+      from var(--vx-magic-edit-beam-angle),
+      transparent 0% 2%,
+      var(--vx-magic-edit-beam-blue) 7%,
+      color-mix(in srgb, var(--vx-magic-edit-beam-blue) 30%, var(--vx-white-white)) 12.5%,
+      var(--vx-magic-edit-beam-blue) 18%,
+      transparent 25% 27%,
+      var(--vx-media-selection-color) 32%,
+      color-mix(in srgb, var(--vx-media-selection-color) 30%, var(--vx-white-white)) 37.5%,
+      var(--vx-media-selection-color) 43%,
+      transparent 50% 52%,
+      var(--vx-magic-edit-beam-blue) 57%,
+      color-mix(in srgb, var(--vx-magic-edit-beam-blue) 30%, var(--vx-white-white)) 62.5%,
+      var(--vx-magic-edit-beam-blue) 68%,
+      transparent 75% 77%,
+      var(--vx-media-selection-color) 82%,
+      color-mix(in srgb, var(--vx-media-selection-color) 30%, var(--vx-white-white)) 87.5%,
+      var(--vx-media-selection-color) 93%,
+      transparent 100%);
+  mask: linear-gradient(var(--vx-white-white) 0 0) content-box, linear-gradient(var(--vx-white-white) 0 0);
+  mask-composite: exclude;
+}
+.magic-edit-glow::after {
+  padding: 0;
+  filter: blur(var(--vx-magic-edit-beam-glow-blur));
+  mask:
+    linear-gradient(
+      to bottom,
+      var(--vx-white-white),
+      transparent) top / 100% var(--vx-magic-edit-beam-glow-width) no-repeat,
+    linear-gradient(
+      to top,
+      var(--vx-white-white),
+      transparent) bottom / 100% var(--vx-magic-edit-beam-glow-width) no-repeat,
+    linear-gradient(
+      to right,
+      var(--vx-white-white),
+      transparent) left / var(--vx-magic-edit-beam-glow-width) 100% no-repeat,
+    linear-gradient(
+      to left,
+      var(--vx-white-white),
+      transparent) right / var(--vx-magic-edit-beam-glow-width) 100% no-repeat;
+  mask-composite: add;
+}
+.magic-edit-effects[data-active=true]:not(:has(> .magic-edit-wave)) .magic-edit-glow {
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .magic-edit-wave ~ .magic-edit-glow {
+    transition: none;
+  }
+  .magic-edit-glow {
+    transition: opacity var(--vx-motion-duration-enter) var(--vx-motion-easing-standard);
+    animation: vx-magic-edit-beam var(--vx-motion-duration-ambient) linear infinite paused;
+  }
+  .magic-edit-effects[data-active=true]:not(:has(> .magic-edit-wave)) .magic-edit-glow {
+    animation-play-state: running;
+  }
+}
+@keyframes vx-magic-edit-beam {
+  to {
+    --vx-magic-edit-beam-angle: 360deg;
+  }
+}
+
+/* packages/magic-edit/src/client.css */
+.magic-edit {
+  position: fixed;
+  z-index: 4;
+  inset-inline-end: var(--vx-space-16);
+  inset-block-end: var(--vx-space-16);
+}
+.magic-edit > .vx-annotation-tools {
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: 2px;
+  background: var(--vx-green-green);
+  color: var(--vx-text-on-content-primary);
+}
+.magic-edit > .vx-annotation-tools[role=toolbar] {
+  border: 0;
+  background: var(--vx-green-green);
+  color: var(--vx-text-on-content-primary);
+  box-shadow: none;
+  max-width: calc(100vw - 32px);
+  flex-wrap: wrap;
+}
+.magic-edit-project-tools {
+  display: contents;
+}
+.magic-edit > .vx-annotation-tools[role=toolbar] > .vx-button {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--vx-radius-full);
+}
+.magic-edit > .vx-annotation-tools[role=toolbar] > .vx-button[aria-pressed=true] {
+  background: rgb(255 255 255 / 20%);
+}
+.magic-edit > .vx-annotation-tools[role=toolbar] > .vx-button:hover:not(:disabled, [aria-pressed=true]) {
+  background: rgb(255 255 255 / 10%);
+}
+.magic-edit > .vx-annotation-tools[role=toolbar] > .vx-button:focus-visible {
+  outline-color: currentColor;
+}
+.magic-edit > .vx-annotation-tools .vx-icon {
+  --vx-icon-size: 18px;
+}
+.magic-edit > .vx-annotation-tools[role=toolbar] .vx-icon::before {
+  mask-size: auto;
+}
+.magic-edit > .vx-annotation-tools > .vx-divider {
+  flex: 0 0 8px;
+  height: 16px;
+  margin: 0;
+  background: url("./assets/toolbar-divider-DHGQDOLY.svg") center no-repeat;
+}
+.magic-edit > .vx-annotation-tools:not([role]) {
+  padding: 0;
+}
+.magic-edit > .vx-annotation-tools:not([role]) .vx-button {
+  width: max-content;
+  height: 40px;
+  padding-inline: var(--vx-space-24);
+  border-radius: var(--vx-radius-full);
+  gap: var(--vx-space-6);
+  font: var(--vx-typography-inter-16-semi-bold);
+}
+.magic-edit > .vx-annotation-tools:not([role]) .vx-button-content {
+  flex: none;
+  gap: var(--vx-space-6);
+}
+.magic-edit > .vx-annotation-tools:not([role]) .vx-button::after {
+  content: "C";
+  display: grid;
+  place-items: center;
+  height: 16px;
+  padding: 0 var(--vx-space-4);
+  border-radius: var(--vx-radius-sm);
+  background: var(--vx-overlay-tag);
+  font: var(--vx-typography-inter-10-semi-bold);
+}
+.magic-edit-highlight {
+  position: fixed;
+  box-sizing: border-box;
+  pointer-events: none;
+  border-radius: var(--vx-radius-sm);
+  background: color-mix(in srgb, var(--vx-state-success) 16%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-state-success) 50%, transparent);
+}
+.magic-edit-content {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-end: calc(100% + var(--vx-space-8));
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--vx-space-8);
+  width: min(460px, calc(100vw - 32px));
+  max-height: calc(100dvh - 88px);
+  padding: var(--vx-space-12);
+  overflow: auto;
+  border: 1px solid var(--vx-border-secondary);
+  border-radius: var(--vx-radius-lg);
+  background: var(--vx-background-dialog);
+  box-shadow: var(--vx-shadow-annotation);
+}
+.magic-edit-content[data-picking]:not(:focus-within) {
+  clip-path: inset(50%);
+  pointer-events: none;
+}
+.magic-edit-content[data-anchored] {
+  position: fixed;
+  inset: auto;
+  width: min(460px, calc(100vw - 16px));
+}
+.magic-edit-content[data-anchored]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  background: inherit;
+  pointer-events: none;
+}
+.magic-edit-content[data-gesture] {
+  visibility: hidden;
+}
+.magic-edit-content[data-gesture] canvas[data-on-target] {
+  visibility: visible;
+}
+.magic-edit-actions,
+.magic-edit-prompt {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--vx-space-8);
+}
+.magic-edit-target {
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+.magic-edit-target > span {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.magic-edit-target > .vx-button {
+  flex: none;
+}
+.magic-edit-content :is(select, textarea) {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  border: 1px solid var(--vx-border-secondary);
+  border-radius: var(--vx-radius-md);
+  background: var(--vx-background-page);
+  color: var(--vx-text-primary);
+  font: var(--vx-typography-inter-14-regular);
+  padding: var(--vx-space-8);
+}
+.magic-edit-prompt {
+  flex-wrap: nowrap;
+  gap: var(--vx-space-8);
+  padding: var(--vx-space-4) var(--vx-space-4) var(--vx-space-4) var(--vx-space-8);
+  border-radius: var(--vx-radius-full);
+  background: var(--vx-text-subtle-black);
+  color: var(--vx-text-on-content-primary);
+}
+.magic-edit-prompt:focus-within {
+  outline: 1px solid var(--vx-state-success);
+}
+.magic-edit-prompt-tag {
+  flex: none;
+  padding: 0 var(--vx-space-4);
+  border-radius: var(--vx-radius-sm);
+  background: var(--vx-overlay-tag);
+  font: var(--vx-typography-inter-10-semi-bold);
+}
+.magic-edit-prompt input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  padding: var(--vx-space-4) 0;
+  background: transparent;
+  color: inherit;
+  font: var(--vx-typography-inter-14-regular);
+}
+.magic-edit-prompt input::placeholder {
+  color: var(--vx-text-on-content-secondary);
+}
+.magic-edit-prompt .vx-button {
+  flex: none;
+  border-radius: var(--vx-radius-full);
+  background: var(--vx-green-green);
+  color: var(--vx-text-on-content-primary);
+}
+.magic-edit-instruction {
+  width: 100%;
+}
+.magic-edit-annotation canvas {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: min(36vh, 280px);
+  margin-inline: auto;
+  border-radius: var(--vx-radius-sm);
+  background: var(--vx-background-page);
+  cursor: crosshair;
+  touch-action: none;
+}
+.magic-edit-annotation canvas[data-on-target] {
+  position: fixed;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  background: transparent;
+}
+.magic-edit-annotation canvas[data-on-target][data-tool=select] {
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .magic-edit-highlight,
+  .magic-edit-annotation canvas[data-on-target][data-tool=select] {
+    animation: magic-edit-mark-enter var(--vx-motion-duration-fast) var(--vx-motion-easing-enter);
+  }
+}
+@keyframes magic-edit-mark-enter {
+  from {
+    opacity: 0;
+  }
+}
+.magic-edit-prompt,
+.magic-edit-target,
+.magic-edit-annotation .magic-edit-actions,
+.magic-edit-content > .magic-edit-error {
+  position: relative;
+  z-index: 1;
+}
+.magic-edit-annotation canvas[data-tool=select] {
+  cursor: pointer;
+}
+.magic-edit-feedback {
+  margin: 0;
+}
+.magic-edit-error {
+  color: var(--vx-state-danger);
+}
+.magic-edit-marking {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.magic-edit-marking:disabled {
+  pointer-events: none;
+}
+@media (max-width: 400px) {
+  .magic-edit-prompt {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    border-radius: var(--vx-radius-lg);
+    padding: var(--vx-space-8);
+  }
+  .magic-edit-prompt > .vx-button {
+    grid-column: 2;
+    justify-self: end;
+  }
+}