@erclx/canon 5.52.0 → 5.54.0

package/src/canvas/client/app.tsx

@@ -1,188 +0,0 @@
-/** @jsxImportSource preact */
-import { effect } from '@preact/signals'
-import type { JSX } from 'preact'
-import { useLayoutEffect, useRef } from 'preact/hooks'
-import { Inspector } from '@/canvas/client/inspector'
-import { PagesPanel } from '@/canvas/client/pages-panel'
-import { PanelHandle } from '@/canvas/client/panel-handle'
-import {
-  clampPanelWidth,
-  currentPage,
-  DEFAULT_PANEL_WIDTHS,
-  focusFrame,
-  type PanelWidths,
-  panelsHidden,
-  panelWidths,
-  tokens,
-} from '@/canvas/client/state'
-import { Surface } from '@/canvas/client/surface'
-
-const SOURCE_LABEL = {
-  toolkit: 'This toolkit',
-  installed: 'Installed design',
-  none: 'None',
-} as const
-
-function TokenDetails(): JSX.Element | null {
-  const value = tokens.value
-  if (!value) return null
-  return (
-    <section aria-labelledby="tokens-heading">
-      <h2 id="tokens-heading" class="section-label">
-        Tokens
-      </h2>
-      <p class="detail">{SOURCE_LABEL[value.source]}</p>
-      {value.files && value.files.length > 0 ? (
-        <ul class="files">
-          {value.files.map((file) => (
-            <li key={file} title={file}>
-              <code>{file}</code>
-            </li>
-          ))}
-        </ul>
-      ) : null}
-      {value.notice ? <p class="notice">{value.notice}</p> : null}
-    </section>
-  )
-}
-
-function PageDetails(): JSX.Element | null {
-  const page = currentPage.value
-  if (!page) return null
-  const unplaced = page.frames.filter((frame) => !frame.placed).length
-  return (
-    <section aria-labelledby="page-heading">
-      <h2 id="page-heading" class="section-label">
-        Page
-      </h2>
-      <p class="detail" title={page.name}>
-        {page.name}
-      </p>
-      <p class="detail-meta">
-        {page.frames.length} {page.frames.length === 1 ? 'frame' : 'frames'}
-      </p>
-      {unplaced > 0 ? (
-        <p class="notice">
-          {unplaced} {unplaced === 1 ? 'frame has' : 'frames have'} no box in
-          layout.json and sit in a default row.
-        </p>
-      ) : null}
-      {page.layoutIssue === 'malformed' ? (
-        <p class="notice" role="alert">
-          layout.json does not parse, so every frame sits in a default row. Fix
-          the file to restore their places.
-        </p>
-      ) : null}
-    </section>
-  )
-}
-
-const PANELS_KEY = 'canon-canvas-panels'
-
-interface StoredPanels extends PanelWidths {
-  readonly hidden: boolean
-}
-
-function storedWidth(value: unknown, fallback: number): number {
-  return typeof value === 'number' && Number.isFinite(value) ? value : fallback
-}
-
-/** What the last visit left, with anything unreadable read as the default. */
-function readStoredPanels(): StoredPanels {
-  const fallback = { hidden: false, ...DEFAULT_PANEL_WIDTHS }
-  try {
-    const parsed: unknown = JSON.parse(localStorage.getItem(PANELS_KEY) ?? '{}')
-    if (typeof parsed !== 'object' || parsed === null) return fallback
-    const record = parsed as Record<string, unknown>
-    return {
-      hidden: record.hidden === true,
-      left: storedWidth(record.left, fallback.left),
-      right: storedWidth(record.right, fallback.right),
-    }
-  } catch {
-    return fallback
-  }
-}
-
-function storePanels(panels: StoredPanels): void {
-  try {
-    localStorage.setItem(PANELS_KEY, JSON.stringify(panels))
-  } catch {
-    /* A blocked store costs the remembered layout, nothing else. */
-  }
-}
-
-/**
- * Holds both widths inside this window, the details panel giving way first,
- * since long layer names are what the pages panel widens for.
- */
-function fitWidths(widths: PanelWidths): PanelWidths {
-  const right = clampPanelWidth(
-    'right',
-    widths.right,
-    window.innerWidth,
-    widths,
-  )
-  const left = clampPanelWidth('left', widths.left, window.innerWidth, {
-    ...widths,
-    right,
-  })
-  return { left, right }
-}
-
-/**
- * Restores the panels the last visit left and stores each change, the way the
- * theme pick is kept. The read lands before the first paint, so a hidden
- * layout never flashes open. The widths are clamped on that read and on every
- * window resize, since a width kept from a wider window could squeeze the
- * surface out.
- */
-function usePanelPreference(): void {
-  useLayoutEffect(() => {
-    const stored = readStoredPanels()
-    panelsHidden.value = stored.hidden
-    panelWidths.value = fitWidths(stored)
-    const handleResize = () => {
-      const fitted = fitWidths(panelWidths.value)
-      const { left, right } = panelWidths.value
-      if (fitted.left !== left || fitted.right !== right) {
-        panelWidths.value = fitted
-      }
-    }
-    window.addEventListener('resize', handleResize)
-    const stopStoring = effect(() =>
-      storePanels({ hidden: panelsHidden.value, ...panelWidths.value }),
-    )
-    return () => {
-      window.removeEventListener('resize', handleResize)
-      stopStoring()
-    }
-  }, [])
-}
-
-export function App(): JSX.Element {
-  const viewportRef = useRef<HTMLDivElement>(null)
-  usePanelPreference()
-  const { left, right } = panelWidths.value
-  return (
-    <div
-      class={panelsHidden.value ? 'shell panels-hidden' : 'shell'}
-      style={{ '--panel-left': `${left}px`, '--panel-right': `${right}px` }}
-    >
-      <PagesPanel
-        onFocusFrame={(frame) => {
-          const rect = viewportRef.current?.getBoundingClientRect()
-          focusFrame(frame, rect?.width ?? 0, rect?.height ?? 0)
-        }}
-      />
-      <PanelHandle side="left" controls="pages-panel" />
-      <Surface viewportRef={viewportRef} />
-      <aside id="details-panel" class="panel panel-right" aria-label="Details">
-        <Inspector />
-        <PageDetails />
-        <TokenDetails />
-      </aside>
-      <PanelHandle side="right" controls="details-panel" />
-    </div>
-  )
-}

package/src/canvas/client/inspector/align-grid.tsx

@@ -1,162 +0,0 @@
-/** @jsxImportSource preact */
-import type { JSX } from 'preact'
-import { useRef, useState } from 'preact/hooks'
-
-/** The value each third of an axis writes, start to end as the axis runs. */
-const POSITIONS = ['flex-start', 'center', 'flex-end'] as const
-
-const ROWS = ['top', 'middle', 'bottom'] as const
-const COLUMNS = ['left', 'center', 'right'] as const
-
-/**
- * Computed values that read as one of the three positions. A container left
- * at its defaults packs from the start, and stretched children do too, so
- * both show the start cell without stating it.
- */
-const READS: Readonly<Record<string, number>> = {
-  normal: 0,
-  stretch: 0,
-  'flex-start': 0,
-  start: 0,
-  'self-start': 0,
-  left: 0,
-  center: 1,
-  'flex-end': 2,
-  end: 2,
-  'self-end': 2,
-  right: 2,
-}
-
-/** Values a container takes without stating a position, which a pick pins. */
-const IMPLIED = new Set(['normal', 'stretch'])
-
-export interface Alignment {
-  readonly justifyContent: string
-  readonly alignItems: string
-}
-
-interface AlignGridProps {
-  /** The container's computed `flex-direction`, which decides the axes. */
-  readonly direction: string
-  readonly justifyContent: string
-  readonly alignItems: string
-  readonly isBusy: boolean
-  readonly onPick: (alignment: Alignment) => void
-}
-
-function isRow(direction: string): boolean {
-  return !direction.startsWith('column')
-}
-
-/**
- * The cell, as row then column on screen, that a container's alignment puts
- * its children in. A reversed main axis runs from the far edge, so its start
- * is the right or the bottom.
- */
-function cellOf(
-  direction: string,
-  justifyContent: string,
-  alignItems: string,
-): readonly [number, number] | undefined {
-  const main = READS[justifyContent.trim()]
-  const cross = READS[alignItems.trim()]
-  if (main === undefined || cross === undefined) return undefined
-  const along = direction.endsWith('reverse') ? 2 - main : main
-  return isRow(direction) ? [cross, along] : [along, cross]
-}
-
-function alignmentOf(
-  direction: string,
-  row: number,
-  column: number,
-): Alignment {
-  const [main, cross] = isRow(direction) ? [column, row] : [row, column]
-  const along = direction.endsWith('reverse') ? 2 - main : main
-  return {
-    justifyContent: POSITIONS[along],
-    alignItems: POSITIONS[cross],
-  }
-}
-
-const KEY_STEPS: Readonly<Record<string, readonly [number, number]>> = {
-  ArrowUp: [-1, 0],
-  ArrowDown: [1, 0],
-  ArrowLeft: [0, -1],
-  ArrowRight: [0, 1],
-}
-
-/**
- * Nine cells placing a flex container's children, one radio group. The
- * arrow keys move focus inside the grid and stop at its edges, and a press
- * or Enter or Space picks, since each pick writes the frame twice.
- */
-export function AlignGrid({
-  direction,
-  justifyContent,
-  alignItems,
-  isBusy,
-  onPick,
-}: AlignGridProps): JSX.Element {
-  const checked = cellOf(direction, justifyContent, alignItems)
-  const isImplied =
-    IMPLIED.has(justifyContent.trim()) || IMPLIED.has(alignItems.trim())
-  const [focus, setFocus] = useState<readonly [number, number]>(
-    checked ?? [0, 0],
-  )
-  const cells = useRef<(HTMLButtonElement | null)[]>([])
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    const step = KEY_STEPS[event.key]
-    if (!step) return
-    event.preventDefault()
-    const next = [
-      Math.min(2, Math.max(0, focus[0] + step[0])),
-      Math.min(2, Math.max(0, focus[1] + step[1])),
-    ] as const
-    setFocus(next)
-    cells.current[next[0] * 3 + next[1]]?.focus()
-  }
-
-  return (
-    <div
-      class="align-grid"
-      role="radiogroup"
-      aria-label="Alignment"
-      onKeyDown={handleKeyDown}
-    >
-      {ROWS.map((rowName, row) =>
-        COLUMNS.map((columnName, column) => {
-          const isChecked = checked?.[0] === row && checked[1] === column
-          const isFocusable = focus[0] === row && focus[1] === column
-          const name =
-            rowName === 'middle' && columnName === 'center'
-              ? 'center'
-              : `${rowName} ${columnName}`
-          return (
-            <button
-              key={name}
-              ref={(node) => {
-                cells.current[row * 3 + column] = node
-              }}
-              type="button"
-              class="align-cell"
-              role="radio"
-              aria-label={name}
-              aria-checked={isChecked}
-              tabIndex={isFocusable ? 0 : -1}
-              disabled={isBusy}
-              onFocus={() => setFocus([row, column])}
-              onClick={() => {
-                if (!isChecked || isImplied) {
-                  onPick(alignmentOf(direction, row, column))
-                }
-              }}
-            >
-              <span class="align-dot" aria-hidden="true" />
-            </button>
-          )
-        }),
-      )}
-    </div>
-  )
-}