@erclx/canon 5.53.0 → 5.54.0

package/src/canvas/client/theme-panel.tsx

@@ -1,55 +0,0 @@
-/** @jsxImportSource preact */
-import type { JSX } from 'preact'
-import { tokens } from '@/canvas/client/state'
-import type { Token, TokenKind } from '@/canvas/tokens'
-
-const KIND_LABEL: Record<TokenKind, string> = {
-  color: 'Color',
-  spacing: 'Spacing',
-  radius: 'Radius',
-  'font-family': 'Font family',
-  'font-size': 'Font size',
-  other: 'Other',
-}
-
-/**
- * A swatch paints the value in the chrome's document, where the frame's own
- * custom properties are not defined, so a value still naming one shows none.
- */
-function Swatch({ token }: { readonly token: Token }): JSX.Element | null {
-  const paint = token.resolved ?? token.value
-  if (paint.includes('var(')) return null
-  return (
-    <span class="swatch" aria-hidden="true" style={{ background: paint }} />
-  )
-}
-
-/** Read-only: the frames' tokens are edited in their stylesheet, not here. */
-export function ThemePanel(): JSX.Element {
-  const groups = tokens.value?.groups ?? []
-  return (
-    <section aria-label="Theme">
-      {groups.length === 0 ? (
-        <p class="empty">
-          No tokens resolve for this project, so there is nothing to list.{' '}
-          {tokens.value?.notice ?? ''}
-        </p>
-      ) : (
-        groups.map((group) => (
-          <div key={group.kind}>
-            <h2 class="section-label">{KIND_LABEL[group.kind]}</h2>
-            <ul class="tokens" aria-label={`${KIND_LABEL[group.kind]} tokens`}>
-              {group.tokens.map((token) => (
-                <li key={token.name} class="token" title={token.value}>
-                  {group.kind === 'color' ? <Swatch token={token} /> : null}
-                  <span class="row-label">{token.name}</span>
-                  <span class="row-meta token-value">{token.value}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))
-      )}
-    </section>
-  )
-}

package/src/canvas/client/tools.tsx

@@ -1,153 +0,0 @@
-/** @jsxImportSource preact */
-import type { JSX } from 'preact'
-import {
-  activeTool,
-  history,
-  panelsHidden,
-  redo,
-  shownTool,
-  type Tool,
-  togglePanels,
-  undo,
-} from '@/canvas/client/state'
-
-interface ToolButton {
-  readonly tool: Tool
-  readonly name: string
-  readonly key: string
-  readonly icon: JSX.Element
-}
-
-const TOOLS: readonly ToolButton[] = [
-  {
-    tool: 'move',
-    name: 'Move',
-    key: 'V',
-    icon: (
-      <svg viewBox="0 0 16 16" aria-hidden="true">
-        <path d="M3.5 2.5l9 4.2-3.9 1.2-1.4 3.8z" />
-      </svg>
-    ),
-  },
-  {
-    tool: 'pan',
-    name: 'Pan',
-    key: 'H',
-    icon: (
-      <svg viewBox="0 0 16 16" aria-hidden="true">
-        <path d="M5.5 8.5V4a1 1 0 0 1 2 0v3.5M7.5 7V2.8a1 1 0 0 1 2 0V7M9.5 7V3.6a1 1 0 0 1 2 0V8M11.5 7.5a1 1 0 0 1 2 0v2.2A4.8 4.8 0 0 1 8.7 14.5h-.6a4.3 4.3 0 0 1-3.2-1.4L2.6 10.6a1 1 0 0 1 1.5-1.4l1.4 1.3" />
-      </svg>
-    ),
-  },
-]
-
-interface HistoryButton {
-  readonly name: 'Undo' | 'Redo'
-  readonly shortcut: string
-  readonly keys: string
-  readonly run: () => Promise<void>
-  readonly icon: JSX.Element
-}
-
-/** The modifier the platform names for undo, Cmd on macOS and Ctrl elsewhere. */
-const MOD = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? '')
-  ? 'Cmd'
-  : 'Ctrl'
-
-const HISTORY_BUTTONS: readonly HistoryButton[] = [
-  {
-    name: 'Undo',
-    shortcut: `${MOD}+Z`,
-    keys: 'Control+Z Meta+Z',
-    run: () => undo(),
-    icon: (
-      <svg viewBox="0 0 16 16" aria-hidden="true">
-        <path d="M5.5 3.5L2.5 6.5l3 3M2.5 6.5h7a4 4 0 0 1 0 8H7" />
-      </svg>
-    ),
-  },
-  {
-    name: 'Redo',
-    shortcut: `${MOD}+Shift+Z`,
-    keys: 'Control+Shift+Z Meta+Shift+Z Control+Y',
-    run: () => redo(),
-    icon: (
-      <svg viewBox="0 0 16 16" aria-hidden="true">
-        <path d="M10.5 3.5l3 3-3 3M13.5 6.5h-7a4 4 0 0 0 0 8H9" />
-      </svg>
-    ),
-  },
-]
-
-/**
- * The tool strip floating at the surface's left edge, one button a tool, then
- * undo and redo, each disabled while the server holds nothing to step.
- */
-export function ToolStrip(): JSX.Element {
-  const shown = shownTool.value
-  const { canUndo, canRedo } = history.value
-  return (
-    <div
-      class="tools"
-      role="toolbar"
-      aria-label="Tools"
-      aria-orientation="vertical"
-    >
-      {TOOLS.map(({ tool, name, key, icon }) => (
-        <button
-          key={tool}
-          type="button"
-          class="tool-button"
-          aria-label={`${name} (${key})`}
-          aria-keyshortcuts={key}
-          aria-pressed={shown === tool ? 'true' : 'false'}
-          title={`${name} (${key})`}
-          data-tool={tool}
-          onClick={() => {
-            activeTool.value = tool
-          }}
-        >
-          {icon}
-        </button>
-      ))}
-      <span class="tools-divider" aria-hidden="true" />
-      {HISTORY_BUTTONS.map(({ name, shortcut, keys, run, icon }) => (
-        <button
-          key={name}
-          type="button"
-          class="tool-button"
-          aria-label={`${name} (${shortcut})`}
-          aria-keyshortcuts={keys}
-          title={`${name} (${shortcut})`}
-          disabled={name === 'Undo' ? !canUndo : !canRedo}
-          onClick={() => void run()}
-        >
-          {icon}
-        </button>
-      ))}
-      <span class="tools-divider" aria-hidden="true" />
-      <PanelsButton />
-    </div>
-  )
-}
-
-/** Named by what a press does now, so the panels come back by mouse too. */
-function PanelsButton(): JSX.Element {
-  const name = panelsHidden.value ? 'Show panels' : 'Hide panels'
-  return (
-    <button
-      type="button"
-      class="tool-button"
-      aria-label={`${name} (\\)`}
-      aria-keyshortcuts="\\"
-      title={`${name} (\\)`}
-      data-panels={panelsHidden.value ? 'hidden' : 'shown'}
-      onClick={togglePanels}
-    >
-      <svg viewBox="0 0 16 16" aria-hidden="true">
-        <rect x="2" y="3" width="12" height="10" rx="1.5" />
-        {panelsHidden.value ? null : <path d="M5.5 3v10M10.5 3v10" />}
-      </svg>
-    </button>
-  )
-}