@flesler/cursor-canvas-web 1.3.0 → 1.5.0

package/src/shim/pie-chart.tsx

@@ -0,0 +1,127 @@
+import { ChartLegend, PieChart as MantinePieChart } from '@mantine/charts'
+import '@mantine/charts/styles.css'
+import { lazy, Suspense, useState } from 'react'
+import type { PieChartProps } from '../vendor/canvas-sdk/chart-primitives.js'
+import { useSeriesColor } from './chart-shared'
+import { useHostTheme } from './use-tokens'
+
+const PieDonutChart = lazy(() =>
+  import('./pie-donut.js').then(m => ({ default: m.PieDonutChart })),
+)
+
+const PIE_START_ANGLE = 180
+const PIE_END_ANGLE = 540
+
+function formatPieSlicePercent(value: number, total: number): string {
+  if (total <= 0) {
+    return '0%'
+  }
+  const percent = (value / total) * 100
+  if (percent < 10 && Math.abs(percent - Math.round(percent)) > 0.05) {
+    return `${percent.toFixed(1)}%`
+  }
+  return `${Math.round(percent)}%`
+}
+
+function pieLegendPayload(
+  items: { name: string; color: string }[],
+): Record<string, unknown>[] {
+  return items.map(item => ({
+    dataKey: item.name,
+    value: item.name,
+    color: item.color,
+    type: 'circle',
+  }))
+}
+
+function pieLegendSeries(
+  items: { name: string; color: string; value: number }[],
+  total: number,
+) {
+  return items.map(item => ({
+    name: item.name,
+    color: item.color,
+    label: `${item.name} ${formatPieSlicePercent(item.value, total)}`,
+  }))
+}
+
+export function PieChart({ data, size = 200, donut, style }: PieChartProps) {
+  const [highlighted, setHighlighted] = useState<string | null>(null)
+  const theme = useHostTheme()
+  const seriesColor = useSeriesColor()
+  const mantineData = data.map((point, index) => ({
+    name: point.label,
+    value: point.value,
+    color: seriesColor(point.tone, index),
+  }))
+  const total = mantineData.reduce((sum, row) => sum + row.value, 0)
+  const pieAngles = {
+    startAngle: PIE_START_ANGLE,
+    endAngle: PIE_END_ANGLE,
+  }
+  const pieCellProps = (name: string) => ({
+    opacity:
+      highlighted === null || highlighted === name ? 1 : 0.35,
+  })
+  const chart = donut ? (
+    <Suspense fallback={null}>
+      <PieDonutChart
+        data={mantineData}
+        size={size}
+        highlighted={highlighted}
+      />
+    </Suspense>
+  ) : (
+    <MantinePieChart
+      data={mantineData}
+      size={size}
+      withTooltip
+      withLabelsLine={false}
+      cellProps={cell => pieCellProps(cell.name)}
+      {...pieAngles}
+    />
+  )
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          height: size,
+          minHeight: size,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {chart}
+      </div>
+      <ChartLegend
+        payload={pieLegendPayload(mantineData)}
+        series={pieLegendSeries(mantineData, total)}
+        legendPosition="bottom"
+        centered
+        onHighlight={setHighlighted}
+        mt="sm"
+        w="100%"
+        styles={{
+          legend: {
+            justifyContent: 'center',
+            gap: 12,
+            color: theme.text.primary,
+          },
+          legendItemName: {
+            color: theme.text.primary,
+          },
+        }}
+      />
+    </div>
+  )
+}

package/src/shim/pie-donut.tsx

@@ -0,0 +1,79 @@
+import { DonutChart } from '@mantine/charts'
+import { useHostTheme } from './use-tokens'
+
+const PIE_START_ANGLE = 180
+const PIE_END_ANGLE = 540
+
+function pieDonutThickness(size: number): number {
+  return Math.max(28, Math.round(size * 0.22))
+}
+
+function DonutCenterLabel({
+  total,
+  family,
+  primary,
+  subtitle,
+}: {
+  total: number;
+  family: string;
+  primary: string;
+  subtitle: string
+}) {
+  return (
+    <text
+      x="50%"
+      y="50%"
+      textAnchor="middle"
+      dominantBaseline="central"
+      fontFamily={family}
+    >
+      <tspan x="50%" dy="-0.4em" fontSize={20} fontWeight={600} fill={primary}>
+        {total}
+      </tspan>
+      <tspan x="50%" dy="1.55em" fontSize={16} fontWeight={500} fill={subtitle}>
+        Total
+      </tspan>
+    </text>
+  )
+}
+
+type DonutSlice = { name: string; value: number; color: string }
+
+export function PieDonutChart({
+  data,
+  size,
+  highlighted,
+}: {
+  data: DonutSlice[];
+  size: number;
+  highlighted: string | null
+}) {
+  const theme = useHostTheme()
+  const total = data.reduce((sum, row) => sum + row.value, 0)
+  const pieAngles = {
+    startAngle: PIE_START_ANGLE,
+    endAngle: PIE_END_ANGLE,
+  }
+  const pieCellProps = (name: string) => ({
+    opacity: highlighted === null || highlighted === name ? 1 : 0.35,
+  })
+  return (
+    <DonutChart
+      data={data}
+      size={size}
+      thickness={pieDonutThickness(size)}
+      withTooltip
+      cellProps={cell => pieCellProps(cell.name)}
+      {...pieAngles}
+    >
+      <DonutCenterLabel
+        total={total}
+        family={theme.typography.fontFamily}
+        primary={theme.text.primary}
+        subtitle={theme.text.secondary}
+      />
+    </DonutChart>
+  )
+}
+
+export type { DonutSlice }

package/src/shim/theme.ts

@@ -0,0 +1,77 @@
+/**
+ * Design tokens + tone mappings for the shim (re-exports host token runtime).
+ */
+
+export {
+  applyPrimaryColor,
+  applyWorkbenchSurfaces,
+  buildHostTokens,
+  canvasFontFamilyCursor,
+  canvasFontFamilyGrok,
+  canvasPaletteDark,
+  canvasPaletteGrokDark,
+  canvasPaletteGrokLight,
+  canvasPaletteLight,
+  canvasRadius,
+  canvasRadiusForBrand,
+  canvasRadiusGrok,
+  canvasSpacing,
+  canvasTokens,
+  canvasTokensLight,
+  canvasTypography,
+  canvasTypographyForBrand,
+  canvasTypographyGrok,
+  categoryPaletteDark,
+  categoryPaletteGrokDark,
+  categoryPaletteGrokLight,
+  categoryPaletteLight,
+  chartColorSequence,
+  chartColorSequenceGrok,
+  chartPalette,
+  chartPaletteGrok,
+  chartThemeForBrand,
+  colorPalette,
+  parseCanvasHostThemeBrand,
+  parseHexColor,
+  resolveTheme,
+  resolveThemeForColorScheme,
+  usageColorSequence,
+} from './host-tokens'
+
+export type {
+  CanvasHostThemeBrand,
+  CanvasHostThemeOverrides,
+  CanvasPalette,
+  CanvasTokens,
+  CategoryPalette,
+  ChartPalette,
+  Color,
+  ShimHostTheme,
+} from './host-tokens'
+
+/**
+ * Maps every semantic tone literal used across primitives to a hex color, so
+ * a `Stat tone="success"` and a `ChartSeries tone="success"` match.
+ */
+export const toneHex: Record<string, string> = {
+  success: '#1F8A65',
+  danger: '#CF2D56',
+  warning: '#E8A33D',
+  info: '#2E79B5',
+  neutral: '#8888A8',
+  added: '#1F8A65',
+  deleted: '#CF2D56',
+  renamed: '#5A6CC0',
+}
+
+/** Maps a semantic tone to a Mantine color name (for components that use it). */
+export const toneColor: Record<string, string> = {
+  success: 'green',
+  danger: 'red',
+  warning: 'orange',
+  info: 'blue',
+  neutral: 'gray',
+  added: 'green',
+  deleted: 'red',
+  renamed: 'indigo',
+}

package/src/shim/todo.tsx

@@ -0,0 +1,184 @@
+/**
+ * Todo primitives. `TodoList` renders clickable status rows; `TodoListCard`
+ * wraps them in a bordered, collapsible surface with an "N of M Done" summary.
+ */
+import { useState } from 'react'
+import { toneHex } from './theme'
+import { useHostTheme } from './use-tokens'
+
+export type {
+  TodoItem,
+  TodoListCardProps,
+  TodoListProps,
+  TodoStatus,
+} from '../vendor/canvas-sdk/todo-list.js'
+
+import type { TodoListCardProps, TodoListProps, TodoStatus } from '../vendor/canvas-sdk/todo-list.js'
+
+function StatusIcon({ status }: { status: TodoStatus }) {
+  const theme = useHostTheme()
+  const stroke =
+    status === 'completed'
+      ? toneHex.success
+      : status === 'in_progress'
+        ? theme.accent.primary
+        : status === 'cancelled'
+          ? toneHex.danger
+          : theme.text.tertiary
+  return (
+    <svg
+      width={14}
+      height={14}
+      viewBox="0 0 14 14"
+      fill="none"
+      style={{ flex: '0 0 auto', marginTop: 3 }}
+      aria-hidden
+    >
+      <circle cx={7} cy={7} r={6} stroke={stroke} strokeWidth={1.4} />
+      {status === 'completed' && (
+        <path
+          d="M4 7.2l2 2 4-4.4"
+          stroke={stroke}
+          strokeWidth={1.4}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      )}
+      {status === 'in_progress' && <circle cx={7} cy={7} r={3} fill={stroke} />}
+      {status === 'cancelled' && (
+        <path
+          d="M4.8 4.8l4.4 4.4M9.2 4.8l-4.4 4.4"
+          stroke={stroke}
+          strokeWidth={1.4}
+          strokeLinecap="round"
+        />
+      )}
+    </svg>
+  )
+}
+
+export function TodoList({
+  todos,
+  dimmedTodoIds,
+  onTodoClick,
+  style,
+}: TodoListProps) {
+  const theme = useHostTheme()
+  if (todos.length === 0) return null
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', ...style }}>
+      {todos.map((todo) => {
+        const dimmed = dimmedTodoIds?.has(todo.id)
+        return (
+          <button
+            key={todo.id}
+            type="button"
+            onClick={() => onTodoClick?.(todo)}
+            style={{
+              display: 'flex',
+              gap: 8,
+              alignItems: 'flex-start',
+              width: '100%',
+              textAlign: 'left',
+              padding: '4px 6px',
+              background: 'transparent',
+              border: 'none',
+              cursor: onTodoClick ? 'pointer' : 'default',
+              color: theme.text.primary,
+              fontSize: 14,
+              lineHeight: '20px',
+              opacity: dimmed ? 0.45 : 1,
+            }}
+          >
+            <StatusIcon status={todo.status} />
+            <span
+              style={{
+                textDecoration:
+                  todo.status === 'cancelled' ? 'line-through' : undefined,
+                color:
+                  todo.status === 'cancelled' ? theme.text.tertiary : undefined,
+              }}
+            >
+              {todo.content}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export function TodoListCard({
+  todos,
+  dimmedTodoIds,
+  defaultExpanded = false,
+  onTodoClick,
+  style,
+}: TodoListCardProps) {
+  const theme = useHostTheme()
+  const [open, setOpen] = useState(defaultExpanded)
+  if (todos.length === 0) return null
+  const done = todos.filter(t => t.status === 'completed').length
+  return (
+    <div
+      style={{
+        border: `1px solid ${theme.stroke.primary}`,
+        borderRadius: 6,
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen(o => !o)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          width: '100%',
+          padding: '6px 10px',
+          background: theme.fill.secondary,
+          border: 'none',
+          cursor: 'pointer',
+          color: theme.text.secondary,
+          fontSize: 12,
+          fontWeight: 600,
+        }}
+      >
+        <svg
+          width={12}
+          height={12}
+          viewBox="0 0 12 12"
+          fill="none"
+          style={{
+            transform: open ? 'rotate(90deg)' : 'none',
+            transition: 'transform 120ms',
+          }}
+          aria-hidden
+        >
+          <path
+            d="M4 2.5L8 6l-4 3.5"
+            stroke="currentColor"
+            strokeWidth={1.4}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <span>Todos</span>
+        <span style={{ flex: 1 }} />
+        <span>
+          {done} of {todos.length} Done
+        </span>
+      </button>
+      {open && (
+        <div style={{ padding: 6 }}>
+          <TodoList
+            todos={todos}
+            dimmedTodoIds={dimmedTodoIds}
+            onTodoClick={onTodoClick}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/shim/ui/actions.tsx

@@ -0,0 +1,58 @@
+import { ActionIcon, Button as MantineButton } from '@mantine/core'
+import type { IconButtonProps } from '../../vendor/canvas-sdk/form-primitives.js'
+import type { ButtonProps } from '../../vendor/canvas-sdk/ui-primitives.js'
+
+const BUTTON_VARIANT = {
+  primary: 'filled',
+  secondary: 'default',
+  ghost: 'subtle',
+} as const
+
+export function Button({
+  children,
+  variant = 'secondary',
+  disabled,
+  type = 'button',
+  style,
+  onClick,
+}: ButtonProps) {
+  return (
+    <MantineButton
+      variant={BUTTON_VARIANT[variant]}
+      color={variant === 'primary' ? 'accent' : undefined}
+      size="xs"
+      disabled={disabled}
+      type={type}
+      onClick={onClick}
+      style={style}
+    >
+      {children}
+    </MantineButton>
+  )
+}
+
+export function IconButton({
+  children,
+  onClick,
+  disabled,
+  title,
+  variant = 'default',
+  size = 'md',
+  style,
+}: IconButtonProps) {
+  return (
+    <ActionIcon
+      variant={variant === 'circle' ? 'light' : 'subtle'}
+      radius={variant === 'circle' ? 'xl' : 'sm'}
+      size={size === 'sm' ? 'sm' : 'md'}
+      color="gray"
+      disabled={disabled}
+      title={title}
+      aria-label={title}
+      onClick={onClick}
+      style={style}
+    >
+      {children}
+    </ActionIcon>
+  )
+}

package/src/shim/ui/card-context.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react'
+
+export const CardContext = createContext<{
+  collapsible: boolean;
+  open: boolean;
+  toggle: () => void
+}>({
+  collapsible: false,
+  open: true,
+  toggle: () => {},
+})

package/src/shim/ui/card.tsx

@@ -0,0 +1,79 @@
+import { Card as MantineCard } from '@mantine/core'
+import { useCallback, useContext, useState } from 'react'
+import type { CardBodyProps, CardHeaderProps, CardProps } from '../../vendor/canvas-sdk/ui-primitives.js'
+import { useHostTheme } from '../use-tokens'
+import { CardContext } from './card-context'
+import { Chevron } from './chevron'
+
+export function Card({
+  children,
+  variant = 'default',
+  collapsible = false,
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  style,
+}: CardProps) {
+  const host = useHostTheme()
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const open = openProp ?? internalOpen
+  const toggle = useCallback(() => {
+    const next = !open
+    if (openProp === undefined) setInternalOpen(next)
+    onOpenChange?.(next)
+  }, [open, openProp, onOpenChange])
+
+  return (
+    <MantineCard
+      withBorder={variant !== 'borderless'}
+      radius={host.radius.md}
+      padding={0}
+      style={{
+        background: host.bg.elevated,
+        borderColor: host.stroke.secondary,
+        ...style,
+      }}
+    >
+      <CardContext.Provider value={{ collapsible, open, toggle }}>
+        {children}
+      </CardContext.Provider>
+    </MantineCard>
+  )
+}
+
+export function CardHeader({ children, trailing, style }: CardHeaderProps) {
+  const host = useHostTheme()
+  const { collapsible, open, toggle } = useContext(CardContext)
+  return (
+    <div
+      onClick={collapsible ? toggle : undefined}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+        padding: '8px 14px',
+        borderBottom: `1px solid ${host.stroke.secondary}`,
+        fontSize: host.typography.small.fontSize,
+        fontWeight: host.typography.h3.fontWeight,
+        color: host.text.primary,
+        fontFamily: host.typography.fontFamily,
+        cursor: collapsible ? 'pointer' : undefined,
+        userSelect: collapsible ? 'none' : undefined,
+        ...style,
+      }}
+    >
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+        {collapsible && <Chevron expanded={open} />}
+        {children}
+      </span>
+      {trailing != null && <span>{trailing}</span>}
+    </div>
+  )
+}
+
+export function CardBody({ children, style }: CardBodyProps) {
+  const { collapsible, open } = useContext(CardContext)
+  if (collapsible && !open) return null
+  return <div style={{ padding: 14, ...style }}>{children}</div>
+}

package/src/shim/ui/chevron.tsx

@@ -0,0 +1,23 @@
+export function Chevron({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      width={12}
+      height={12}
+      viewBox="0 0 12 12"
+      fill="none"
+      style={{
+        transform: expanded ? 'rotate(90deg)' : 'none',
+        transition: 'transform 120ms',
+      }}
+      aria-hidden
+    >
+      <path
+        d="M4 2.5L8 6l-4 3.5"
+        stroke="currentColor"
+        strokeWidth={1.4}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}