@elixpo/lixsketch 5.5.23 → 5.6.2

package/src/mcp/templates.js

@@ -0,0 +1,51 @@
+const DEFAULT_MARKETPLACE_URL = 'https://sketch.elixpo.com';
+
+function decodeBase64Url(value) {
+  const base64 = String(value).replaceAll('-', '+').replaceAll('_', '/');
+  const padded = base64 + '='.repeat((4 - base64.length % 4) % 4);
+  const binary = atob(padded);
+  return Uint8Array.from(binary, (character) => character.charCodeAt(0));
+}
+
+export async function decryptPublicTemplate(ciphertext, keyValue) {
+  const keyBytes = decodeBase64Url(keyValue);
+  if (keyBytes.byteLength !== 32) throw new Error('Template key is not AES-256');
+  const combined = decodeBase64Url(ciphertext);
+  if (combined.byteLength < 28) throw new Error('Template ciphertext is invalid');
+  const key = await crypto.subtle.importKey('raw', keyBytes, { name: 'AES-GCM', length: 256 }, false, ['decrypt']);
+  const plaintext = await crypto.subtle.decrypt({ name: 'AES-GCM', iv: combined.slice(0, 12) }, key, combined.slice(12));
+  return JSON.parse(new TextDecoder().decode(plaintext));
+}
+
+export class MarketplaceTemplateProvider {
+  constructor({ baseUrl = DEFAULT_MARKETPLACE_URL, fetchImpl = globalThis.fetch } = {}) {
+    if (typeof fetchImpl !== 'function') throw new Error('MarketplaceTemplateProvider requires fetch');
+    this.baseUrl = String(baseUrl).replace(/\/$/, '');
+    this.fetch = fetchImpl;
+  }
+
+  async search({ query = '', tag = '', limit = 12 } = {}) {
+    const url = new URL('/api/templates', this.baseUrl);
+    if (query) url.searchParams.set('q', String(query).slice(0, 80));
+    if (tag) url.searchParams.set('tag', String(tag).slice(0, 24));
+    url.searchParams.set('limit', String(Math.min(24, Math.max(1, Number(limit) || 12))));
+    const response = await this.fetch(url, { headers: { accept: 'application/json' } });
+    const body = await response.json();
+    if (!response.ok) throw new Error(body.error || `Marketplace request failed (${response.status})`);
+    return body.templates || [];
+  }
+
+  async load(slug) {
+    const safeSlug = String(slug || '').trim();
+    if (!/^[a-z0-9-]{1,80}$/.test(safeSlug)) throw new Error('Template slug is invalid');
+    const url = new URL(`/api/templates/${encodeURIComponent(safeSlug)}`, this.baseUrl);
+    url.searchParams.set('snapshot', '1');
+    const response = await this.fetch(url, { headers: { accept: 'application/json' } });
+    const body = await response.json();
+    if (!response.ok) throw new Error(body.error || `Template request failed (${response.status})`);
+    const template = body.template;
+    if (!template?.encryptedData || !template?.publicKey) throw new Error('Template snapshot is unavailable');
+    return { metadata: { ...template, encryptedData: undefined, publicKey: undefined, encryptedDocData: undefined }, scene: await decryptPublicTemplate(template.encryptedData, template.publicKey) };
+  }
+}
+

package/src/react/LixSketchCanvas.jsx

@@ -19,6 +19,7 @@ import Footer from './components/Footer.jsx';
 import AppMenu from './components/AppMenu.jsx';
 import RectangleSidebar from './components/sidebars/RectangleSidebar.jsx';
 import CircleSidebar from './components/sidebars/CircleSidebar.jsx';
+import PaintBucketSidebar from './components/sidebars/PaintBucketSidebar.jsx';
 import LineSidebar from './components/sidebars/LineSidebar.jsx';
 import ArrowSidebar from './components/sidebars/ArrowSidebar.jsx';
 import PaintbrushSidebar from './components/sidebars/PaintbrushSidebar.jsx';
@@ -35,6 +36,7 @@ import CommandPalette from './components/modals/CommandPalette.jsx';
 import ExportImageModal from './components/modals/ExportImageModal.jsx';
 import LixScriptModal from './components/modals/LixScriptModal.jsx';
 import GraphModal from './components/modals/GraphModal.jsx';
+import WebEmbedModal from './components/modals/WebEmbedModal.jsx';
 
 const SAVE_DEBOUNCE_MS = 1500;
 
@@ -221,6 +223,7 @@ export default function LixSketchCanvas({
       <AppMenu />
       <RectangleSidebar />
       <CircleSidebar />
+      <PaintBucketSidebar />
       <LineSidebar />
       <ArrowSidebar />
       <PaintbrushSidebar />
@@ -233,6 +236,7 @@ export default function LixSketchCanvas({
       <ExportImageModal />
       <LixScriptModal />
       <GraphModal />
+      <WebEmbedModal />
       <ContextMenu />
       <FindBar />
       <ImageSourcePicker />

package/src/react/components/Toolbar.jsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useRef, useState } from 'react'
 import useSketchStore, { TOOLS } from '../store/useSketchStore'
 import useUIStore from '../store/useUIStore'
 
@@ -11,6 +12,17 @@ function getViewModeItems() {
   ]
 }
 
+function getMoreToolItems() {
+  return [
+    { tool: TOOLS.DRAW_SHAPE, icon: 'draw-shape', title: 'Draw to shape', key: 'D' },
+    { tool: TOOLS.PAINT_BUCKET, icon: 'bxs-color-fill', title: 'Paint bucket', key: 'B' },
+    { tool: TOOLS.FRAME, icon: 'bx-crop', title: 'Frame', key: 'F' },
+    { tool: TOOLS.LASER, icon: 'bxs-magic-wand', title: 'Laser', key: 'K' },
+    { tool: TOOLS.LASSO, icon: 'bx-shape-polygon', title: 'Lasso selection', key: 'S' },
+    { tool: TOOLS.WEB_EMBED, icon: 'bx-globe', title: 'Web embed', key: 'W' },
+  ]
+}
+
 function getToolItems() {
   return [
   { tool: TOOLS.PAN, icon: 'bxs-hand', title: 'Pan (H)', key: 'H' },
@@ -25,15 +37,27 @@ function getToolItems() {
   { tool: TOOLS.IMAGE, icon: 'bx-image-alt', title: 'Image (9)', key: '9' },
   { tool: TOOLS.ICON, icon: 'bx-wink-smile', title: 'Icon (I)', key: 'I' },
   'spacer',
-  { tool: TOOLS.FRAME, icon: 'bx-crop', title: 'Frame (F)', key: 'F' },
-  { tool: TOOLS.LASER, icon: 'bxs-magic-wand', title: 'Laser (K)', key: 'K' },
   { tool: TOOLS.ERASER, icon: 'bxs-eraser', title: 'Eraser (E)', key: 'E' },
+  'more',
   // AI tool entry removed while the assistant is coming-soon.
   // Restore `{ tool: 'ai', icon: null, title: 'AI', isAI: true }` here
   // when the modal becomes a real feature again.
   ]
 }
 
+function ToolIcon({ item, className = 'h-5 w-5' }) {
+  if (item.icon === 'draw-shape') {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M2.5 16.5c2.2-5.8 4.5 3.5 7-2.5 1.1-2.7 2.2-3.8 3.4-3.9" />
+        <path d="M15 4.5h6v6h-6z" />
+        <path d="m12.5 8 2.5-.5" />
+      </svg>
+    )
+  }
+  return <i className={`bx ${item.icon} text-xl`} />
+}
+
 export default function Toolbar() {
   const activeTool = useSketchStore((s) => s.activeTool)
   const setActiveTool = useSketchStore((s) => s.setActiveTool)
@@ -41,12 +65,36 @@ export default function Toolbar() {
   const toolLock = useSketchStore((s) => s.toolLock)
   const toggleToolLock = useSketchStore((s) => s.toggleToolLock)
   const toggleAIModal = useUIStore((s) => s.toggleAIModal)
+  const [moreOpen, setMoreOpen] = useState(false)
+  const [lastMoreItem, setLastMoreItem] = useState(null)
+  const moreRef = useRef(null)
 
   const items = viewMode ? getViewModeItems() : getToolItems()
+  const moreItems = getMoreToolItems()
+  const activeMoreItem = moreItems.find((item) => item.tool === activeTool)
+  const moreActive = Boolean(activeMoreItem)
+  const shownMoreItem = activeMoreItem || lastMoreItem
+
+  useEffect(() => {
+    if (!moreOpen) return undefined
+    const close = (event) => {
+      if (event.key === 'Escape' || (event.type === 'pointerdown' && !moreRef.current?.contains(event.target))) setMoreOpen(false)
+    }
+    document.addEventListener('pointerdown', close)
+    document.addEventListener('keydown', close)
+    return () => {
+      document.removeEventListener('pointerdown', close)
+      document.removeEventListener('keydown', close)
+    }
+  }, [moreOpen])
+
+  useEffect(() => {
+    setMoreOpen(false)
+  }, [activeTool, viewMode])
 
   return (
     <>
-    <div data-canvas-toolbar className={`absolute left-2.5 top-1/2 -translate-y-1/2 w-[46px] rounded-xl bg-surface z-[1000] flex flex-col items-center py-1.5 gap-0.5 font-[lixFont] max-h-[calc(100vh-120px)] overflow-y-auto no-scrollbar`}>
+    <div data-canvas-toolbar className={`absolute left-2.5 top-1/2 -translate-y-1/2 w-[46px] rounded-xl bg-surface z-[1000] flex flex-col items-center py-1.5 gap-0.5 font-[lixFont] max-h-[calc(100vh-120px)] overflow-visible`}>
       {/* Tool lock button at the top */}
       {!viewMode && (
         <>
@@ -76,6 +124,38 @@ export default function Toolbar() {
           )
         }
 
+        if (item === 'more') {
+          return (
+            <div key="more" ref={moreRef} className="relative">
+              <button
+                type="button"
+                title={shownMoreItem ? `${shownMoreItem.title} — More tools` : 'More tools'}
+                aria-label="More tools"
+                aria-expanded={moreOpen}
+                onClick={() => setMoreOpen((open) => !open)}
+                className={`relative flex h-[31px] w-[33px] cursor-pointer items-center justify-center rounded-lg transition-all duration-200 ${moreOpen || moreActive ? 'bg-accent/20 text-accent' : 'text-text-muted hover:bg-surface-hover hover:text-text-primary'}`}
+              >
+                {shownMoreItem ? <ToolIcon item={shownMoreItem} className="h-[18px] w-[18px]" /> : <i className="bx bx-dots-horizontal-rounded text-xl" />}
+              </button>
+              {moreOpen && (
+                <div className="absolute left-[calc(100%+10px)] top-1/2 z-[1100] w-[190px] -translate-y-1/2 rounded-xl border border-border-light bg-surface-card/95 p-1.5 shadow-xl shadow-black/25 backdrop-blur-lg">
+                  <p className="px-2 py-1 text-[10px] uppercase tracking-[0.14em] text-text-dim">More tools</p>
+                  {moreItems.map((moreItem) => {
+                    const selected = activeTool === moreItem.tool
+                    return (
+                      <button key={moreItem.tool} type="button" title={`${moreItem.title} (${moreItem.key})`} onClick={() => { setLastMoreItem(moreItem); setActiveTool(moreItem.tool); setMoreOpen(false) }} className={`flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 text-left text-xs transition ${selected ? 'bg-accent/20 text-accent' : 'text-text-muted hover:bg-surface-hover hover:text-text-primary'}`}>
+                        <span className="flex h-5 w-5 items-center justify-center"><ToolIcon item={moreItem} className="h-[18px] w-[18px]" /></span>
+                        <span className="flex-1">{moreItem.title}</span>
+                        <span className="text-[10px] text-text-dim">{moreItem.key}</span>
+                      </button>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )
+        }
+
         const isActive = activeTool === item.tool
 
         if (item.isAI) {
@@ -114,10 +194,7 @@ export default function Toolbar() {
                 : 'text-text-muted hover:text-text-primary hover:bg-surface-hover'
             }`}
           >
-            <i
-              className={`bx ${item.icon} text-xl`}
-              style={item.rotate ? { transform: 'rotate(-45deg)' } : undefined}
-            />
+            <span style={item.rotate ? { transform: 'rotate(-45deg)' } : undefined}><ToolIcon item={item} /></span>
             {item.key && (
               <span className={`absolute bottom-0.5 right-[-1px] text-[10px] leading-none ${isActive ? 'opacity-60' : 'opacity-35'}`}>
                 {item.key}

package/src/react/components/modals/CommandPalette.jsx

@@ -41,11 +41,15 @@ const CANVAS_COMMANDS = [
   { label: 'Arrow', icon: 'bx-right-arrow-alt', section: 'Tools', shortcut: 'A / 5', action: 'tool:arrow' },
   { label: 'Line', icon: 'bx-minus', section: 'Tools', shortcut: 'L / 6', action: 'tool:line' },
   { label: 'Freehand', icon: 'bx-pencil', section: 'Tools', shortcut: 'P / 7', action: 'tool:freehand' },
+  { label: 'Draw to shape', icon: 'bx-vector', section: 'Tools', shortcut: 'D', action: 'tool:drawShape' },
+  { label: 'Paint bucket', icon: 'bxs-color-fill', section: 'Tools', shortcut: 'B', action: 'tool:paintBucket' },
   { label: 'Text', icon: 'bx-text', section: 'Tools', shortcut: 'T / 8', action: 'tool:text' },
   { label: 'Insert image', icon: 'bx-image-add', section: 'Tools', shortcut: '9', action: 'tool:image' },
   { label: 'Eraser', icon: 'bx-eraser', section: 'Tools', shortcut: 'E / 0', action: 'tool:eraser' },
   { label: 'Laser pointer', icon: 'bxs-magic-wand', section: 'Tools', shortcut: 'K', action: 'tool:laser' },
   { label: 'Frame tool', icon: 'bx-border-all', section: 'Tools', shortcut: 'F', action: 'tool:frame' },
+  { label: 'Lasso selection', icon: 'bx-shape-polygon', section: 'Tools', shortcut: 'S', action: 'tool:lasso' },
+  { label: 'Web embed', icon: 'bx-globe', section: 'Tools', shortcut: 'W', action: 'tool:webEmbed' },
   // AI entries removed — feature is hidden behind a coming-soon screen.
   // Restore "Text to diagram..." / "Mermaid to diagram..." here when the
   // assistant ships.
@@ -103,6 +107,10 @@ const TOOL_ACTION_MAP = {
   'tool:arrow': TOOLS.ARROW,
   'tool:line': TOOLS.LINE,
   'tool:freehand': TOOLS.FREEHAND,
+  'tool:drawShape': TOOLS.DRAW_SHAPE,
+  'tool:paintBucket': TOOLS.PAINT_BUCKET,
+  'tool:lasso': TOOLS.LASSO,
+  'tool:webEmbed': TOOLS.WEB_EMBED,
   'tool:text': TOOLS.TEXT,
   'tool:image': TOOLS.IMAGE,
   'tool:eraser': TOOLS.ERASER,

package/src/react/components/modals/WebEmbedModal.jsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { normalizeWebEmbedUrl } from '../../../core/WebEmbedPolicy.js';
+import useSketchStore, { TOOLS } from '../../store/useSketchStore.js';
+
+export default function WebEmbedModal() {
+  const [open, setOpen] = useState(false), [url, setUrl] = useState(''), [error, setError] = useState('');
+  const inputRef = useRef(null);
+  useEffect(() => {
+    const show = () => { setOpen(true); setError(''); requestAnimationFrame(() => inputRef.current?.focus()); };
+    window.__showWebEmbedModal = show; window.addEventListener('lixsketch:open-web-embed', show);
+    return () => { delete window.__showWebEmbedModal; window.removeEventListener('lixsketch:open-web-embed', show); };
+  }, []);
+  useEffect(() => {
+    if (!open) return undefined;
+    const escape = (event) => {
+      if (event.key === 'Escape') { setOpen(false); useSketchStore.getState().setActiveTool(TOOLS.SELECT); }
+    };
+    window.addEventListener('keydown', escape);
+    return () => window.removeEventListener('keydown', escape);
+  }, [open]);
+  if (!open) return null;
+  let requestedHostname = '';
+  try { requestedHostname = new URL(url).hostname; } catch {}
+  const whitelistRequestUrl = `https://github.com/elixpo/sketch.elixpo/issues/new?template=web-embed-whitelist.yml&title=${encodeURIComponent(`[Web embed whitelist] ${requestedHostname || 'New hostname'}`)}`;
+  const submit = (e) => {
+    e.preventDefault(); const normalized = normalizeWebEmbedUrl(url);
+    if (!normalized) { setError('This site is not currently supported for web embeds.'); return; }
+    window.__placeWebEmbed?.(normalized); setOpen(false); setUrl('');
+  };
+  return <div className="fixed inset-0 z-[12000] flex items-center justify-center bg-black/55 p-4 backdrop-blur-sm">
+    <form onSubmit={submit} className="w-full max-w-xl rounded-2xl border border-border-light bg-surface-card p-6 font-[lixFont] shadow-2xl">
+      <div className="mb-5 flex justify-between"><div><h2 className="text-lg text-text-primary">Embed a website</h2><p className="mt-1 text-xs text-text-muted">One secure embed in a movable, resizable frame.</p></div><button type="button" onClick={() => { setOpen(false); useSketchStore.getState().setActiveTool(TOOLS.SELECT); }}><i className="bx bx-x text-2xl" /></button></div>
+      <input ref={inputRef} value={url} onChange={(e) => { setUrl(e.target.value); setError(''); }} placeholder="https://www.youtube.com/watch?v=..." className="w-full rounded-xl border border-border-light bg-surface px-4 py-3 text-sm text-text-primary outline-none focus:border-accent" />
+      {error && <div className="mt-3 flex items-center justify-between gap-3 rounded-xl border border-border-light bg-surface/60 px-3 py-2.5"><p className="text-xs text-text-muted"><i className="bx bx-info-circle mr-1" />{error}</p><a href={whitelistRequestUrl} target="_blank" rel="noreferrer" className="shrink-0 rounded-lg border border-accent/50 px-3 py-1.5 text-xs text-accent">Request whitelist</a></div>}
+      <button type="submit" className="mt-5 w-full rounded-xl bg-accent px-4 py-3 text-sm text-white">Place on canvas</button>
+    </form>
+  </div>;
+}

package/src/react/components/sidebars/PaintBucketSidebar.jsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useCallback, useEffect, useState } from 'react'
+import useSketchStore, { TOOLS } from '../../store/useSketchStore'
+import ShapeSidebar, { Divider, ToolbarButton } from './ShapeSidebar'
+
+const COLORS = ['#f0f0f0', '#ffcccb', '#90ee90', '#add8e6', '#FFE4B5', '#DDA0DD', '#A98DEB', '#2d2d2d']
+const FILLS = [
+  { value: 'solid', label: 'Solid' },
+  { value: 'hachure', label: 'Hachure' },
+  { value: 'cross-hatch', label: 'Cross-hatch' },
+  { value: 'dots', label: 'Dots' },
+  { value: 'none', label: 'Clear fill' },
+]
+
+export default function PaintBucketSidebar() {
+  const activeTool = useSketchStore((state) => state.activeTool)
+  const [fillColor, setFillColor] = useState('#A98DEB')
+  const [fillStyle, setFillStyle] = useState('solid')
+  const sync = useCallback((color, style) => {
+    window.paintBucketSettings = window.paintBucketSettings || {}
+    window.paintBucketSettings.fillColor = color
+    window.paintBucketSettings.fillStyle = style
+  }, [])
+  useEffect(() => sync(fillColor, fillStyle), [fillColor, fillStyle, sync])
+
+  return (
+    <ShapeSidebar visible={activeTool === TOOLS.PAINT_BUCKET}>
+      <ToolbarButton tooltip="Fill color" preview={<span className="h-4 w-4 rounded-md border border-border-light" style={{ backgroundColor: fillColor }} />}>
+        <p className="mb-2 text-xs uppercase tracking-wider text-text-muted">Fill color</p>
+        <div className="grid grid-cols-4 gap-1.5">
+          {COLORS.map((color) => <button key={color} type="button" aria-label={`Use ${color}`} onClick={() => setFillColor(color)} className={`h-7 w-7 cursor-pointer rounded-md border-[1.5px] transition ${fillColor === color ? 'scale-110 border-accent' : 'border-border-light hover:border-text-dim'}`} style={{ backgroundColor: color }} />)}
+        </div>
+        <label className="mt-2 flex cursor-pointer items-center gap-2 text-xs text-text-muted">
+          <input type="color" value={fillColor} onChange={(event) => setFillColor(event.target.value)} className="h-7 w-9 cursor-pointer rounded border-0 bg-transparent" />
+          Custom color
+        </label>
+      </ToolbarButton>
+      <Divider />
+      <ToolbarButton icon="bxs-brush" tooltip="Fill style">
+        <p className="mb-2 text-xs uppercase tracking-wider text-text-muted">Fill style</p>
+        <div className="flex flex-col gap-0.5">
+          {FILLS.map((fill) => <button key={fill.value} type="button" onClick={() => setFillStyle(fill.value)} className={`flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition ${fillStyle === fill.value ? 'bg-accent text-white' : 'text-text-secondary hover:bg-surface-hover'}`}><span className="h-1.5 w-1.5 rounded-full bg-current" />{fill.label}</button>)}
+        </div>
+      </ToolbarButton>
+      <div className="max-w-[185px] px-2 text-[10px] leading-4 text-text-dim">Click a rectangle or circle to apply the selected fill.</div>
+    </ShapeSidebar>
+  )
+}

package/src/react/components/sidebars/PaintbrushSidebar.jsx

@@ -41,7 +41,7 @@ export default function PaintbrushSidebar() {
   const updateOpacity = useCallback((v) => { setOpacity(v); if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ opacity: v }) }, [])
 
   return (
-    <ShapeSidebar visible={activeTool === TOOLS.FREEHAND || selectedShapeSidebar === 'paintbrush'}>
+    <ShapeSidebar visible={activeTool === TOOLS.FREEHAND || activeTool === TOOLS.DRAW_SHAPE || selectedShapeSidebar === 'paintbrush'}>
       <ToolbarButton tooltip={t('sidebar.strokeColor')}
         preview={<span className="w-4 h-4 rounded-md border border-white/20" style={{ backgroundColor: strokeColor }} />}
       >

package/src/react/store/useSketchStore.js

@@ -19,6 +19,10 @@ export const TOOLS = {
   IMAGE: 'image',
   FRAME: 'frame',
   ICON: 'icon',
+  DRAW_SHAPE: 'draw-shape',
+  PAINT_BUCKET: 'paint-bucket',
+  LASSO: 'lasso',
+  WEB_EMBED: 'web-embed',
 }
 
 // Action types for undo/redo
@@ -44,6 +48,10 @@ const TOOL_CURSORS = {
   [TOOLS.IMAGE]: 'crosshair',
   [TOOLS.FRAME]: 'crosshair',
   [TOOLS.ICON]: 'crosshair',
+  [TOOLS.DRAW_SHAPE]: 'crosshair',
+  [TOOLS.PAINT_BUCKET]: 'cell',
+  [TOOLS.LASSO]: 'crosshair',
+  [TOOLS.WEB_EMBED]: 'crosshair',
 }
 
 // Tool -> sidebar mapping
@@ -56,6 +64,7 @@ const TOOL_SIDEBARS = {
   [TOOLS.TEXT]: 'text',
   [TOOLS.CODE]: 'text',
   [TOOLS.FRAME]: 'frame',
+  [TOOLS.DRAW_SHAPE]: 'paintbrush',
 }
 
 // Keyboard shortcut -> tool mapping
@@ -81,6 +90,10 @@ export const SHORTCUT_MAP = {
   i: TOOLS.ICON,
   f: TOOLS.FRAME,
   k: TOOLS.LASER,
+  d: TOOLS.DRAW_SHAPE,
+  b: TOOLS.PAINT_BUCKET,
+  s: TOOLS.LASSO,
+  w: TOOLS.WEB_EMBED,
 }
 
 const useSketchStore = create((set, get) => ({

package/src/react/toolsEnum.js

@@ -17,4 +17,8 @@ export const TOOLS = {
   IMAGE: 'image',
   FRAME: 'frame',
   ICON: 'icon',
+  DRAW_SHAPE: 'draw-shape',
+  PAINT_BUCKET: 'paint-bucket',
+  LASSO: 'lasso',
+  WEB_EMBED: 'web-embed',
 };

package/src/shapes/Frame.js

@@ -25,6 +25,10 @@ class Frame {
         this.height = height;
         this.rotation = options.rotation || 0;
         this.frameName = options.frameName || "Frame";
+        this._frameType = options.frameType || null;
+        this._webEmbedURL = options.webEmbedURL || null;
+        this._webEmbedForeignObject = null;
+        this._webEmbedElement = null;
         this.fillStyle = options.fillStyle || "transparent"; // 'transparent' | 'solid' | 'grid'
         this.fillColor = options.fillColor || "#1e1e28";
         this.gridSize = options.gridSize || 20;
@@ -81,9 +85,9 @@ class Frame {
 
     draw() {
         // Clear previous elements
-        while (this.group.firstChild) {
-            this.group.removeChild(this.group.firstChild);
-        }
+        Array.from(this.group.children).forEach((child) => {
+            if (child !== this._webEmbedForeignObject) this.group.removeChild(child);
+        });
         this.anchors = [];
 
         // Ensure defs exists for grid pattern
@@ -153,6 +157,12 @@ class Frame {
         this.element = frameRect;
         this.group.appendChild(this.element);
 
+        if (this._frameType === 'web-embed' && this._webEmbedURL) {
+            this._updateWebEmbed();
+            // Keep the frame outline above the embedded document so it remains selectable.
+            this.group.appendChild(this.element);
+        }
+
         // Add label
         this.addFrameLabel();
 
@@ -208,7 +218,39 @@ class Frame {
         }
     }
 
+    setWebEmbedURL(url) {
+        this._webEmbedURL = url;
+        this._frameType = 'web-embed';
+        this._updateWebEmbed();
+    }
+
+    _updateWebEmbed() {
+        if (!this._webEmbedURL) return;
+        if (!this._webEmbedForeignObject) {
+            const foreign = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+            const host = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
+            const embed = document.createElementNS('http://www.w3.org/1999/xhtml', 'embed');
+            host.style.cssText = 'width:100%;height:100%;overflow:hidden;background:#fff;border-radius:4px';
+            embed.setAttribute('type', 'text/html'); embed.setAttribute('width', '100%'); embed.setAttribute('height', '100%');
+            embed.setAttribute('src', this._webEmbedURL); embed.setAttribute('title', this.frameName || 'Web embed');
+            host.appendChild(embed); foreign.appendChild(host);
+            this._webEmbedForeignObject = foreign; this._webEmbedElement = embed;
+            this.group.insertBefore(foreign, this.element || null);
+        } else if (this._webEmbedElement?.getAttribute('src') !== this._webEmbedURL) {
+            this._webEmbedElement.setAttribute('src', this._webEmbedURL);
+        }
+        const inset = 2;
+        this._webEmbedForeignObject.setAttribute('x', this.x + inset);
+        this._webEmbedForeignObject.setAttribute('y', this.y + inset);
+        this._webEmbedForeignObject.setAttribute('width', Math.max(0, this.width - inset * 2));
+        this._webEmbedForeignObject.setAttribute('height', Math.max(0, this.height - inset * 2));
+        if (this.rotation) {
+            this._webEmbedForeignObject.setAttribute('transform', `rotate(${this.rotation}, ${this.x + this.width / 2}, ${this.y + this.height / 2})`);
+        } else this._webEmbedForeignObject.removeAttribute('transform');
+    }
+
     addShapeToFrame(shape) {
+    if (this._frameType === 'web-embed') return;
     if (shape && !this.containedShapes.includes(shape)) {
         const oldFrame = shape.parentFrame;
 
@@ -275,7 +317,7 @@ class Frame {
 
     // Check if a shape overlaps with this frame
     isShapeInFrame(shape) {
-    if (!shape || shape === this) return false;
+    if (this._frameType === 'web-embed' || !shape || shape === this) return false;
     
     const shapeX = shape.x || 0;
     const shapeY = shape.y || 0;
@@ -291,6 +333,7 @@ class Frame {
 }
 
 updateContainedShapes(applyClipping = true) {
+    if (this._frameType === 'web-embed') return;
     // Check all shapes to see if they should be in this frame
     if (typeof shapes === 'undefined' || !Array.isArray(shapes)) return;
     shapes.forEach(shape => {

package/src/shapes/ImageShape.js

@@ -38,6 +38,8 @@ class ImageShape {
         }
         this.group.appendChild(this.element);
         this._aiBadge = null;
+        this._aiBadgeBackground = null;
+        this._aiBadgeLabel = null;
         this._aiBadgeObserver = null;
         if (this.isAIGenerated) this.showAIBadge();
         svg.appendChild(this.group);
@@ -48,8 +50,19 @@ class ImageShape {
         const ns = 'http://www.w3.org/2000/svg';
         const badge = document.createElementNS(ns, 'g');
         badge.setAttribute('class', 'ai-image-badge');
-        badge.setAttribute('aria-label', 'AI generated image');
-        badge.style.pointerEvents = 'none';
+        badge.setAttribute('aria-label', 'This is synthetic media generated by AI.');
+        badge.style.pointerEvents = 'all';
+        badge.style.cursor = 'help';
+
+        const title = document.createElementNS(ns, 'title');
+        title.textContent = 'This is synthetic media generated by AI.';
+        badge.appendChild(title);
+
+        badge.addEventListener('pointerenter', () => {
+            if (typeof window.__showToast === 'function') {
+                window.__showToast('This is synthetic media generated by AI.', { duration: 2200 });
+            }
+        });
 
         const background = document.createElementNS(ns, 'rect');
         background.setAttribute('width', '32');
@@ -73,6 +86,8 @@ class ImageShape {
 
         this.group.appendChild(badge);
         this._aiBadge = badge;
+        this._aiBadgeBackground = background;
+        this._aiBadgeLabel = label;
         this.updateAIBadgePosition();
 
         if (typeof MutationObserver !== 'undefined') {
@@ -86,12 +101,40 @@ class ImageShape {
 
     updateAIBadgePosition() {
         if (!this._aiBadge) return;
-        const x = Number.isFinite(this.x) ? this.x + 6 : 6;
-        const y = Number.isFinite(this.y) ? this.y + 6 : 6;
-        this._aiBadge.setAttribute('transform', `translate(${x}, ${y})`);
+        const imageWidth = Number.isFinite(this.width) ? Math.abs(this.width) : 32;
+        const imageHeight = Number.isFinite(this.height) ? Math.abs(this.height) : 18;
+        const inset = Math.max(1, Math.min(6, imageWidth * 0.12, imageHeight * 0.12));
+        const x = Number.isFinite(this.x) ? this.x + inset : inset;
+        const y = Number.isFinite(this.y) ? this.y + inset : inset;
+        const availableScale = Math.min(
+            1,
+            Math.max(0, imageWidth - inset * 2) / 32,
+            Math.max(0, imageHeight - inset * 2) / 18,
+        );
+        const useDot = availableScale <= 0.75;
+        let badgeTransform;
+
+        if (useDot) {
+            const dotSize = Math.max(2, Math.min(8, imageWidth * 0.28, imageHeight * 0.28));
+            this._aiBadge.setAttribute('data-variant', 'dot');
+            this._aiBadgeBackground?.setAttribute('width', String(dotSize));
+            this._aiBadgeBackground?.setAttribute('height', String(dotSize));
+            this._aiBadgeBackground?.setAttribute('rx', String(dotSize / 2));
+            this._aiBadgeLabel?.setAttribute('display', 'none');
+            badgeTransform = `translate(${x}, ${y})`;
+        } else {
+            this._aiBadge.setAttribute('data-variant', 'label');
+            this._aiBadgeBackground?.setAttribute('width', '32');
+            this._aiBadgeBackground?.setAttribute('height', '18');
+            this._aiBadgeBackground?.setAttribute('rx', '6');
+            this._aiBadgeLabel?.removeAttribute('display');
+            badgeTransform = `translate(${x}, ${y}) scale(${availableScale})`;
+        }
+
+        this._aiBadge.setAttribute('transform', badgeTransform);
         const imageTransform = this.element.getAttribute('transform');
         if (imageTransform) {
-            this._aiBadge.setAttribute('transform', `${imageTransform} translate(${x}, ${y})`);
+            this._aiBadge.setAttribute('transform', `${imageTransform} ${badgeTransform}`);
         }
     }