fix(canvas): polish playground authoring affordances

Author: drewstone

playground/src/routes/CanvasRoute.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import { DesignCanvasEditor } from '@tangle-network/agent-app/design-canvas-react'
+import { CanvasInsertPanel, DesignCanvasEditor } from '@tangle-network/agent-app/design-canvas-react'
 import { applySceneOperations } from '@tangle-network/agent-app/design-canvas'
 import type { SceneOperation } from '@tangle-network/agent-app/design-canvas'
 import { lightTheme, darkTheme } from '@tangle-network/agent-app/theme'
@@ -60,6 +60,18 @@ export function CanvasRoute() {
         rev={rev}
         canWrite
         onApplyOperations={onApplyOperations}
+        renderSidePanel={({ activePage }) => (
+          <CanvasInsertPanel
+            canWrite
+            page={{
+              pageId: activePage.id,
+              width: activePage.width,
+              height: activePage.height,
+              background: activePage.background,
+            }}
+            onInsert={onApplyOperations}
+          />
+        )}
         render={isDark ? darkTheme.canvasRender : lightTheme.canvasRender}
       />
     </div>

src/design-canvas-react/components/CanvasInsertPanel.tsx

@@ -6,10 +6,10 @@
  *
  * Endpoints are per-app, so every I/O path is a callback — no product route is
  * hardcoded:
- *  - `onUploadImage(file) => Promise<url>` — the host stores the file and returns
- *    the src to insert. The url MUST be http(s) or a rooted `/api/` path
- *    (enforced by `assertSceneMediaSrc` before insertion); a `data:` url is
- *    rejected, matching the scene model's media boundary.
+ *  - `onUploadImage(file) => Promise<url>` — optional. When provided, the host
+ *    stores the file and returns the src to insert. The url MUST be http(s) or
+ *    a rooted `/api/` path (enforced by `assertSceneMediaSrc` before insertion);
+ *    a `data:` url is rejected, matching the scene model's media boundary.
  *  - `loadGenerations?()` — optional provider for "already generated in this
  *    workspace" images; omit to hide the tab.
  *  - `templates?` — optional template set; defaults to {@link DEFAULT_INSERT_TEMPLATES}.
@@ -50,7 +50,7 @@ export interface CanvasInsertPanelProps {
   /** Submit operations through the host's apply pipeline. */
   onInsert(operations: SceneOperation[]): Promise<unknown>
   /** Store an uploaded file and return its src (http(s) or rooted `/api/`). */
-  onUploadImage(file: File): Promise<string>
+  onUploadImage?(file: File): Promise<string>
   /** Optional provider for the Generations tab; omit to hide it. */
   loadGenerations?(): Promise<InsertGeneration[]>
   /** Drop-in templates; defaults to the built-in starter set. */
@@ -181,14 +181,26 @@ export function CanvasInsertPanel({
   accept = DEFAULT_ACCEPT,
   className,
 }: CanvasInsertPanelProps) {
-  const [tab, setTab] = useState<Tab>('uploads')
+  const [tab, setTab] = useState<Tab>(() => (templates.length > 0 ? 'templates' : 'uploads'))
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState('')
   const [dragOver, setDragOver] = useState(false)
   const [generations, setGenerations] = useState<InsertGeneration[]>([])
   const [generationsLoaded, setGenerationsLoaded] = useState(false)
   const fileInputRef = useRef<HTMLInputElement | null>(null)
 
+  useEffect(() => {
+    if (tab === 'uploads' && !onUploadImage) {
+      setTab(templates.length > 0 ? 'templates' : loadGenerations ? 'generations' : 'uploads')
+    }
+    if (tab === 'templates' && templates.length === 0) {
+      setTab(onUploadImage ? 'uploads' : loadGenerations ? 'generations' : 'uploads')
+    }
+    if (tab === 'generations' && !loadGenerations) {
+      setTab(templates.length > 0 ? 'templates' : onUploadImage ? 'uploads' : 'templates')
+    }
+  }, [tab, templates.length, onUploadImage, loadGenerations])
+
   useEffect(() => {
     if (tab !== 'generations' || generationsLoaded || !loadGenerations) return
     let cancelled = false
@@ -217,6 +229,7 @@ export function CanvasInsertPanel({
 
   async function handleFiles(files: FileList | File[]) {
     if (!canWrite || busy) return
+    if (!onUploadImage) return
     const list = Array.from(files).filter((f) => f.type.startsWith('image/'))
     if (list.length === 0) {
       setError('Only image files can be added to the canvas')
@@ -250,7 +263,7 @@ export function CanvasInsertPanel({
   }
 
   const tabs: Array<{ id: Tab; label: string; icon: (p: { className?: string }) => ReactElement; show: boolean }> = [
-    { id: 'uploads', label: 'Uploads', icon: ImageGlyph, show: true },
+    { id: 'uploads', label: 'Uploads', icon: ImageGlyph, show: !!onUploadImage },
     { id: 'templates', label: 'Templates', icon: ShapesGlyph, show: templates.length > 0 },
     { id: 'generations', label: 'Generations', icon: SparkleGlyph, show: !!loadGenerations },
   ]

src/design-canvas-react/components/DesignCanvas.tsx

@@ -542,7 +542,7 @@ export function DesignCanvas({
           surfaces regardless of what the integrator passes. */}
       {renderSidePanel && !review ? (
         <aside className="hidden w-64 shrink-0 flex-col overflow-hidden border-r border-[var(--border-default)] lg:flex">
-          {renderSidePanel()}
+          {renderSidePanel({ selectedElements, activePageId: activePage.id, activePage })}
         </aside>
       ) : null}
 

src/design-canvas-react/components/InlineTextEditor.tsx

@@ -81,6 +81,7 @@ export function InlineTextEditor({
       defaultValue={element.text}
       onKeyDown={handleKeyDown}
       onBlur={handleBlur}
+      className="agent-app-edit-selection"
       style={{
         position: 'absolute',
         left: pos.left,

src/design-canvas-react/components/PagesStrip.tsx

@@ -102,7 +102,7 @@ export function PagesStrip({
         </div>
       ) : null}
       <div
-        className="flex h-[84px] items-center gap-2 overflow-x-auto px-2 pb-1"
+        className="flex h-[92px] items-center gap-2 overflow-x-auto px-2 pb-2 pt-2"
         aria-label="Pages"
       >
       {pages.map((page, index) => {
@@ -160,7 +160,7 @@ export function PagesStrip({
                 <img
                   src={thumbUrl}
                   alt={page.name}
-                  className="h-full w-full object-cover"
+                  className="h-full w-full object-contain"
                   draggable={false}
                 />
               ) : (
@@ -178,7 +178,7 @@ export function PagesStrip({
 
             {/* Per-page action buttons — visible on hover or when active */}
             {canWrite && canManagePages ? (
-              <div className="pointer-events-none absolute -top-1 right-0 flex gap-0.5 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+              <div className="pointer-events-none absolute right-1 top-1 flex gap-0.5 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
                 <button
                   type="button"
                   aria-label={`Duplicate page ${page.name}`}

src/design-canvas-react/components/Toolbar.tsx

@@ -1009,7 +1009,7 @@ function BleedControls({ page, canWrite, onSetPageProps, enableBleedLabel = 'Sho
       {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
         <NumberInput
           key={side}
-          label={`Bleed ${side[0]!.toUpperCase()}`}
+          label={side[0]!.toUpperCase() + side.slice(1)}
           value={bleed[side]}
           min={0}
           onCommit={(v) => setBleedSide(side, v)}
@@ -1021,7 +1021,8 @@ function BleedControls({ page, canWrite, onSetPageProps, enableBleedLabel = 'Sho
         disabled={!canWrite}
         onClick={() => onSetPageProps({ bleed: null })}
         className={BTN}
-        title="Remove bleed"
+        title="Remove print bleed"
+        aria-label="Remove print bleed"
       >
         ×
       </button>

src/design-canvas-react/components/Workspace.tsx

@@ -550,12 +550,20 @@ export function WorkspaceView({
     if (!canWrite) return
     const template = DEFAULT_INSERT_TEMPLATES[0]
     if (!template) return
-    const ops = template.build({ pageId: activePageId, width: activePage.width, height: activePage.height })
+    const ops = template.build({
+      pageId: activePageId,
+      width: activePage.width,
+      height: activePage.height,
+      background: activePage.background,
+    })
+    const addedIds: string[] = []
     for (const op of ops) {
       if (op.type === 'add_element') {
         await persist(addElementCommand({ pageId: op.pageId, element: op.element }))
+        addedIds.push(op.element.id)
       }
     }
+    if (addedIds.length > 0) stack.setView({ selectedElementIds: addedIds })
   }
 
   async function handleAddElement() {

src/design-canvas-react/contracts.ts

@@ -11,7 +11,7 @@
  * never per-pixel.
  */
 
-import type { Bounds, SceneDocument, SceneElement } from '../design-canvas/model'
+import type { Bounds, SceneDocument, SceneElement, ScenePage } from '../design-canvas/model'
 import type { SceneOperation } from '../design-canvas/operations'
 import type { CanvasRenderPalette } from '../theme/theme'
 
@@ -187,7 +187,7 @@ export interface DesignCanvasProps {
   onSelectionChange?(elements: SceneElement[]): void
   /** Host panels: agent chat (right), asset/template browser (left). */
   renderAgentPanel?(ctx: { selectedElements: SceneElement[]; activePageId: string }): React.ReactNode
-  renderSidePanel?(): React.ReactNode
+  renderSidePanel?(ctx: { selectedElements: SceneElement[]; activePageId: string; activePage: ScenePage }): React.ReactNode
   /** Export hook — host persists the rendered blob (upload → asset row). */
   onExport?(result: { pageId: string; format: 'png' | 'jpeg'; dataUrl: string; pixelRatio: number }): Promise<void>
   /**

src/design-canvas-react/insert-builders.ts

@@ -31,6 +31,7 @@ export interface InsertPageGeometry {
   pageId: string
   width: number
   height: number
+  background?: string
 }
 
 /** Mint a DOM-safe element id. Prefers `crypto.randomUUID`; falls back to a
@@ -81,6 +82,31 @@ function addElementOp(pageId: string, element: SceneElement): SceneOperation {
   return { type: 'add_element', pageId, element }
 }
 
+function hexLuminance(color: string | undefined): number | null {
+  if (!color) return null
+  const raw = color.trim()
+  const hex = raw.startsWith('#') ? raw.slice(1) : ''
+  const full = hex.length === 3
+    ? hex.split('').map((ch) => ch + ch).join('')
+    : hex.length === 6
+      ? hex
+      : ''
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) return null
+  const channels = [0, 2, 4].map((start) => parseInt(full.slice(start, start + 2), 16) / 255)
+  const [r, g, b] = channels.map((value) => (
+    value <= 0.03928 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4)
+  ))
+  return 0.2126 * r! + 0.7152 * g! + 0.0722 * b!
+}
+
+function pageTextFill(page: InsertPageGeometry, tone: 'primary' | 'secondary'): string {
+  const luminance = hexLuminance(page.background)
+  if (luminance !== null && luminance < 0.35) {
+    return tone === 'primary' ? '#f8fafc' : '#cbd5e1'
+  }
+  return tone === 'primary' ? '#111827' : '#374151'
+}
+
 /**
  * Build an `add_element` op placing an image, fitted and centered on the page.
  * `naturalSize` is the probed image dimensions (the panel reads them in the
@@ -134,7 +160,7 @@ export const DEFAULT_INSERT_TEMPLATES: readonly InsertTemplate[] = [
         fontFamily: 'Inter',
         fontSize: 48,
         fontStyle: 'bold',
-        fill: '#111827',
+        fill: pageTextFill(page, 'primary'),
         align: 'left',
         lineHeight: 1.1,
         letterSpacing: 0,
@@ -156,7 +182,7 @@ export const DEFAULT_INSERT_TEMPLATES: readonly InsertTemplate[] = [
         fontFamily: 'Inter',
         fontSize: 20,
         fontStyle: 'normal',
-        fill: '#374151',
+        fill: pageTextFill(page, 'secondary'),
         align: 'left',
         lineHeight: 1.4,
         letterSpacing: 0,

src/sequences-react/components/TimelineClipChip.tsx

@@ -510,7 +510,7 @@ export function TimelineClipChip(props: TimelineClipChipProps) {
             event.stopPropagation()
           }}
           onBlur={commitText}
-          className="absolute inset-0 z-10 w-full bg-black/80 px-1.5 text-[11px] text-[var(--text-primary)] outline-none ring-1 ring-[var(--brand-primary)]"
+          className="agent-app-edit-selection absolute inset-0 z-10 w-full bg-black/80 px-1.5 text-[11px] text-[var(--text-primary)] outline-none ring-1 ring-[var(--brand-primary)]"
           aria-label="Caption text"
         />
       ) : null}