@flesler/cursor-canvas-web 1.3.0 → 1.5.0

package/src/shim/ui/display.tsx

@@ -0,0 +1,83 @@
+import { Alert, Badge, Text as MantineText } from '@mantine/core'
+import type { CalloutProps, PillProps, StatProps } from '../../vendor/canvas-sdk/ui-primitives.js'
+import { toneColor, toneHex } from '../theme'
+import { useHostTheme } from '../use-tokens'
+
+export function Stat({ value, label, tone, style }: StatProps) {
+  const host = useHostTheme()
+  return (
+    <div style={style}>
+      <MantineText
+        fz={22}
+        fw={700}
+        lh={1.2}
+        style={{
+          color: tone ? toneHex[tone] : host.text.primary,
+          fontFamily: host.typography.fontFamily,
+        }}
+      >
+        {value}
+      </MantineText>
+      <MantineText
+        fz={12}
+        style={{
+          color: host.text.tertiary,
+          fontFamily: host.typography.fontFamily,
+        }}
+      >
+        {label}
+      </MantineText>
+    </div>
+  )
+}
+
+export function Pill({
+  children,
+  active,
+  tone = 'neutral',
+  size = 'md',
+  leadingContent,
+  keyboardHint,
+  title,
+  style,
+  onClick,
+}: PillProps) {
+  return (
+    <Badge
+      color={toneColor[tone]}
+      variant={active ? 'filled' : 'light'}
+      size={size === 'sm' ? 'sm' : 'md'}
+      leftSection={leadingContent}
+      rightSection={keyboardHint}
+      title={title}
+      onClick={onClick}
+      style={{
+        cursor: onClick ? 'pointer' : undefined,
+        textTransform: 'none',
+        ...style,
+      }}
+    >
+      {children}
+    </Badge>
+  )
+}
+
+export function Callout({
+  children,
+  tone = 'neutral',
+  title,
+  icon,
+  style,
+}: CalloutProps) {
+  return (
+    <Alert
+      color={toneColor[tone]}
+      title={title}
+      icon={icon}
+      variant="light"
+      style={style}
+    >
+      {children}
+    </Alert>
+  )
+}

package/src/shim/ui/form.tsx

@@ -0,0 +1,102 @@
+import { Checkbox as MantineCheckbox, Select as MantineSelect, Textarea as MantineTextarea, TextInput as MantineTextInput, Switch } from '@mantine/core'
+import type { CheckboxProps, SelectProps, TextAreaProps, TextInputProps, ToggleProps } from '../../vendor/canvas-sdk/form-primitives.js'
+
+export function Select({
+  value,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  style,
+}: SelectProps) {
+  return (
+    <MantineSelect
+      value={value}
+      data={options}
+      placeholder={placeholder}
+      disabled={disabled}
+      allowDeselect={false}
+      onChange={(next) => {
+        if (next !== null) onChange?.(next)
+      }}
+      style={style}
+    />
+  )
+}
+
+export function Checkbox({
+  checked,
+  onChange,
+  disabled,
+  label,
+  style,
+}: CheckboxProps) {
+  return (
+    <MantineCheckbox
+      checked={checked}
+      disabled={disabled}
+      label={label}
+      onChange={event => onChange?.(event.currentTarget.checked)}
+      style={style}
+    />
+  )
+}
+
+export function Toggle({
+  checked,
+  onChange,
+  disabled,
+  size = 'sm',
+  style,
+}: ToggleProps) {
+  return (
+    <Switch
+      checked={checked}
+      disabled={disabled}
+      size={size === 'sm' ? 'sm' : 'md'}
+      onChange={event => onChange?.(event.currentTarget.checked)}
+      style={style}
+    />
+  )
+}
+
+export function TextInput({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  type,
+  style,
+}: TextInputProps) {
+  return (
+    <MantineTextInput
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      type={type}
+      onChange={event => onChange?.(event.currentTarget.value)}
+      style={style}
+    />
+  )
+}
+
+export function TextArea({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  rows = 3,
+  style,
+}: TextAreaProps) {
+  return (
+    <MantineTextarea
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      autosize
+      minRows={rows}
+      onChange={event => onChange?.(event.currentTarget.value)}
+      style={style}
+    />
+  )
+}

package/src/shim/ui/layout.tsx

@@ -0,0 +1,67 @@
+import { Group, Divider as MantineDivider, Stack as MantineStack } from '@mantine/core'
+import type { DividerProps, GridProps, RowProps, StackProps } from '../../vendor/canvas-sdk/ui-primitives.js'
+
+export function Stack({ children, gap, style }: StackProps) {
+  return (
+    <MantineStack gap={gap} style={style}>
+      {children}
+    </MantineStack>
+  )
+}
+
+const FLEX: Record<string, string> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+  'space-between': 'space-between',
+}
+
+export function Row({
+  children,
+  gap,
+  align = 'center',
+  justify = 'start',
+  wrap = false,
+  style,
+}: RowProps) {
+  return (
+    <Group
+      gap={gap}
+      align={FLEX[align]}
+      justify={FLEX[justify]}
+      wrap={wrap ? 'wrap' : 'nowrap'}
+      style={style}
+    >
+      {children}
+    </Group>
+  )
+}
+
+export function Spacer() {
+  return <div style={{ flex: 1 }} />
+}
+
+export function Grid({ children, columns, gap = 16, align, style }: GridProps) {
+  const gridTemplateColumns =
+    typeof columns === 'number'
+      ? `repeat(${columns}, minmax(0, 1fr))`
+      : columns
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns,
+        gap,
+        alignItems: align,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function Divider({ style }: DividerProps) {
+  return <MantineDivider style={style} />
+}

package/src/shim/ui/rich.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react'
+import type { CollapsibleSectionProps } from '../../vendor/canvas-sdk/collapsible-section.js'
+import type { SwatchProps } from '../../vendor/canvas-sdk/swatch.js'
+import type { UsageBarProps } from '../../vendor/canvas-sdk/usage-bar.js'
+import { usageColorSequence } from '../theme'
+import { useHostTheme } from '../use-tokens'
+import { Chevron } from './chevron'
+
+export function Swatch({ color, style }: SwatchProps) {
+  const theme = useHostTheme()
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        width: 14,
+        height: 14,
+        borderRadius: 4,
+        background: theme.category[color],
+        flex: '0 0 auto',
+        ...style,
+      }}
+    />
+  )
+}
+
+export function UsageBar({
+  segments,
+  total,
+  topLeftLabel,
+  topRightLabel,
+  style,
+}: UsageBarProps) {
+  const theme = useHostTheme()
+  const safeTotal = total > 0 ? total : 1
+  const used = segments.reduce(
+    (sum, s) => sum + (Number.isFinite(s.value) && s.value > 0 ? s.value : 0),
+    0,
+  )
+  const remainder = Math.max(0, safeTotal - used)
+  return (
+    <div style={style}>
+      {(topLeftLabel != null || topRightLabel != null) && (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            fontSize: 12,
+            color: theme.text.secondary,
+            marginBottom: 6,
+          }}
+        >
+          <span>{topLeftLabel}</span>
+          <span>{topRightLabel}</span>
+        </div>
+      )}
+      <div style={{ display: 'flex', gap: 2, height: 8 }}>
+        {segments.map((segment, index) => {
+          const value =
+            Number.isFinite(segment.value) && segment.value > 0
+              ? segment.value
+              : 0
+          const color =
+            theme.category[
+              segment.color ??
+                usageColorSequence[index % usageColorSequence.length]
+            ]
+          return (
+            <div
+              key={segment.id}
+              style={{
+                width: `${(value / safeTotal) * 100}%`,
+                background: color,
+                borderRadius: 3,
+              }}
+            />
+          )
+        })}
+        {remainder > 0 && (
+          <div
+            style={{
+              width: `${(remainder / safeTotal) * 100}%`,
+              background: theme.fill.tertiary,
+              borderRadius: 3,
+            }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function CollapsibleSection({
+  title,
+  leading,
+  count,
+  trailing,
+  children,
+  defaultOpen = false,
+  style,
+}: CollapsibleSectionProps) {
+  const theme = useHostTheme()
+  const [open, setOpen] = useState(defaultOpen)
+  return (
+    <div style={style}>
+      <div
+        onClick={() => setOpen(o => !o)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          padding: '4px 0',
+          cursor: 'pointer',
+          userSelect: 'none',
+          color: theme.text.primary,
+          fontSize: 14,
+        }}
+      >
+        <Chevron expanded={open} />
+        {leading}
+        <span style={{ fontWeight: 500 }}>{title}</span>
+        {count != null && (
+          <span style={{ color: theme.text.tertiary, fontSize: 12 }}>
+            {count}
+          </span>
+        )}
+        <span style={{ flex: 1 }} />
+        {trailing != null && (
+          <span style={{ color: theme.text.tertiary }}>{trailing}</span>
+        )}
+      </div>
+      {open && (
+        <div style={{ paddingLeft: 18, paddingBottom: 4 }}>{children}</div>
+      )}
+    </div>
+  )
+}

package/src/shim/ui/table.tsx

@@ -0,0 +1,71 @@
+import { Table as MantineTable } from '@mantine/core'
+import type { TableProps, TableRowTone } from '../../vendor/canvas-sdk/ui-primitives.js'
+
+const ROW_TONE_BG: Record<TableRowTone, string> = {
+  success: 'rgba(31,138,101,0.12)',
+  danger: 'rgba(207,45,86,0.12)',
+  warning: 'rgba(232,163,61,0.14)',
+  info: 'rgba(46,121,181,0.12)',
+  neutral: 'rgba(136,136,168,0.12)',
+}
+
+export function Table({
+  headers,
+  rows,
+  columnAlign,
+  rowTone,
+  framed = true,
+  striped,
+  stickyHeader,
+  style,
+  emptyMessage,
+}: TableProps) {
+  return (
+    <MantineTable
+      withTableBorder={framed}
+      withColumnBorders={false}
+      striped={striped}
+      stickyHeader={stickyHeader}
+      highlightOnHover
+      style={style}
+    >
+      <MantineTable.Thead>
+        <MantineTable.Tr>
+          {headers.map((header, index) => (
+            <MantineTable.Th key={index} ta={columnAlign?.[index] ?? 'left'}>
+              {header}
+            </MantineTable.Th>
+          ))}
+        </MantineTable.Tr>
+      </MantineTable.Thead>
+      <MantineTable.Tbody>
+        {rows.length === 0 ? (
+          <MantineTable.Tr>
+            <MantineTable.Td colSpan={headers.length} ta="center" c="dimmed">
+              {emptyMessage ?? 'No data'}
+            </MantineTable.Td>
+          </MantineTable.Tr>
+        ) : (
+          rows.map((row, rowIndex) => {
+            const tone = rowTone?.[rowIndex]
+            return (
+              <MantineTable.Tr
+                key={rowIndex}
+                style={tone ? { background: ROW_TONE_BG[tone] } : undefined}
+              >
+                {headers.map((_, colIndex) => (
+                  <MantineTable.Td
+                    key={colIndex}
+                    ta={columnAlign?.[colIndex] ?? 'left'}
+                  >
+                    {row[colIndex]}
+                  </MantineTable.Td>
+                ))}
+              </MantineTable.Tr>
+            )
+          })
+        )}
+      </MantineTable.Tbody>
+    </MantineTable>
+  )
+}

package/src/shim/ui/typography.tsx

@@ -0,0 +1,129 @@
+import { Text as MantineText, Title } from '@mantine/core'
+import { createContext, useContext, type CSSProperties } from 'react'
+import type { CodeProps, H1Props, H2Props, H3Props, LinkProps, TextProps, TextWeight } from '../../vendor/canvas-sdk/ui-primitives.js'
+import { useHostTheme } from '../use-tokens'
+
+function headingStyle(
+  host: ReturnType<typeof useHostTheme>,
+  level: 'h1' | 'h2' | 'h3',
+  style?: CSSProperties,
+): CSSProperties {
+  const block = host.typography[level]
+  return {
+    fontFamily: host.typography.fontFamily,
+    fontSize: block.fontSize,
+    lineHeight: block.lineHeight,
+    fontWeight: block.fontWeight,
+    color: host.text.primary,
+    margin: 0,
+    ...style,
+  }
+}
+
+export function H1({ children, style }: H1Props) {
+  const host = useHostTheme()
+  return (
+    <Title order={1} style={headingStyle(host, 'h1', style)}>
+      {children}
+    </Title>
+  )
+}
+
+export function H2({ children, style }: H2Props) {
+  const host = useHostTheme()
+  return (
+    <Title order={2} style={headingStyle(host, 'h2', style)}>
+      {children}
+    </Title>
+  )
+}
+
+export function H3({ children, style }: H3Props) {
+  const host = useHostTheme()
+  return (
+    <Title order={3} style={headingStyle(host, 'h3', style)}>
+      {children}
+    </Title>
+  )
+}
+
+const TEXT_WEIGHT: Record<TextWeight, number> = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+}
+
+const TextParentContext = createContext(false)
+
+export function Text({
+  children,
+  tone = 'primary',
+  size = 'body',
+  as = 'p',
+  weight = 'normal',
+  italic,
+  truncate,
+  style,
+}: TextProps) {
+  const theme = useHostTheme()
+  const nestedInText = useContext(TextParentContext)
+  const component = nestedInText && as === 'p' ? 'span' : as
+  const blockParagraph = as === 'p'
+  return (
+    <TextParentContext.Provider value={true}>
+      <MantineText
+        component={component}
+        size={size === 'small' ? 'xs' : 'sm'}
+        fw={TEXT_WEIGHT[weight]}
+        c={tone === 'primary' ? undefined : theme.text[tone]}
+        truncate={truncate}
+        style={{
+          fontStyle: italic ? 'italic' : undefined,
+          ...(tone === 'primary' ? { color: theme.text.primary } : undefined),
+          ...(blockParagraph && component === 'span'
+            ? { display: 'block' }
+            : undefined),
+          fontFamily: theme.typography.fontFamily,
+          ...style,
+        }}
+      >
+        {children}
+      </MantineText>
+    </TextParentContext.Provider>
+  )
+}
+
+export function Code({ children, style }: CodeProps) {
+  const host = useHostTheme()
+  return (
+    <code
+      style={{
+        fontFamily:
+          'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace',
+        fontSize: '0.92em',
+        color: host.text.primary,
+        background: host.fill.secondary,
+        borderRadius: host.radius.sm,
+        padding: '1px 4px',
+        ...style,
+      }}
+    >
+      {children}
+    </code>
+  )
+}
+
+export function Link({ children, href, style }: LinkProps) {
+  const host = useHostTheme()
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      style={{ color: host.text.link, ...style }}
+    >
+      {children}
+    </a>
+  )
+}

package/src/shim/use-tokens.ts

@@ -0,0 +1,13 @@
+import { useComputedColorScheme } from '@mantine/core'
+import { resolveThemeForColorScheme, type ShimHostTheme } from './host-tokens'
+
+/**
+ * Returns the host theme tokens for the active color scheme. Reads
+ * `window.__cursorCanvas.state.theme` when present (IDE bridge); otherwise
+ * Mantine color scheme + `prefers-color-scheme` defaults.
+ */
+export function useHostTheme(): ShimHostTheme {
+  const scheme = useComputedColorScheme('light')
+  const polarity = scheme === 'dark' ? 'dark' : 'light'
+  return resolveThemeForColorScheme(polarity)
+}

package/src/superset/chart-extra.d.ts

@@ -12,7 +12,7 @@ export type CanvasChartScale = NonNullable<YAxisProps['scale']>
  * horizontal bar charts. Non-linear scales default `domain` to `[1, 'dataMax']`.
  */
 export type CanvasChartValueAxisExtra = Pick<
-	Omit<YAxisProps, 'ref'>,
+  Omit<YAxisProps, 'ref'>,
   | 'scale'
   | 'domain'
   | 'type'
@@ -26,14 +26,20 @@ export type CanvasChartValueAxisExtra = Pick<
 >
 
 export type CanvasChartExtra = {
-	valueAxis?: CanvasChartValueAxisExtra
+  valueAxis?: CanvasChartValueAxisExtra
 }
 
-export type CanvasBarChartExtra = CanvasChartExtra
+export type CanvasBarChartExtra = CanvasChartExtra & {
+  /** Category (y) axis on `horizontal` bar charts. */
+  categoryAxis?: {
+    /** Label column width in px; labels truncate to fit. Default 96. */
+    width?: number
+  }
+}
 
 export type CanvasLineChartExtra = CanvasChartExtra & {
-	/** Curved (`monotone`) segments; the IDE draws straight segments. */
-	smooth?: boolean;
-	/** Stack the filled areas. Requires `fill`. */
-	stacked?: boolean
+  /** Curved (`monotone`) segments; the IDE draws straight segments. */
+  smooth?: boolean;
+  /** Stack the filled areas. Requires `fill`. */
+  stacked?: boolean
 }

package/src/superset/index.d.ts

@@ -12,13 +12,13 @@ export * from '../vendor/canvas-sdk/index.js'
 export type * from './chart-extra.js'
 
 export type BarChartProps = SdkBarChartProps & {
-	extra?: CanvasBarChartExtra
+  extra?: CanvasBarChartExtra
 }
 
 export type LineChartProps = SdkLineChartProps & {
-	extra?: CanvasLineChartExtra;
-	/** @deprecated Use `extra.smooth`. */
-	smooth?: boolean
+  extra?: CanvasLineChartExtra;
+  /** @deprecated Use `extra.smooth`. */
+  smooth?: boolean
 }
 
 export declare function BarChart(props: BarChartProps): JSX.Element