@weave-design-system/react 0.1.0

package/src/productivity/kanban-column/KanbanColumn.stories.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { arrayMove } from '@dnd-kit/sortable';
+import type { DragEndEvent, DragOverEvent } from '@dnd-kit/core';
+import { KanbanColumn } from './KanbanColumn';
+import { SortableTaskCard } from './SortableTaskCard';
+import { TaskCard } from '../task-card/TaskCard';
+import { KanbanBoard } from '../kanban-board/KanbanBoard';
+
+const meta: Meta<typeof KanbanColumn> = { title: 'Productivity/KanbanColumn', component: KanbanColumn, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof KanbanColumn>;
+
+interface Task {
+  id: string;
+  title: string;
+  priority: 'urgent' | 'high' | 'medium' | 'low';
+  assignee?: { name: string };
+  dueDate?: string;
+}
+
+const initialColumns: Record<string, Task[]> = {
+  todo: [
+    { id: 't1', title: 'Design landing page', priority: 'high', dueDate: 'Mar 22' },
+    { id: 't2', title: 'Write copy for about page', priority: 'medium' },
+    { id: 't3', title: 'Create icon set', priority: 'low' },
+  ],
+  progress: [
+    { id: 't4', title: 'Implement auth flow', priority: 'urgent', assignee: { name: 'Bob' } },
+  ],
+  done: [
+    { id: 't5', title: 'Set up CI/CD', priority: 'low', assignee: { name: 'Alice' } },
+  ],
+};
+
+function DragDropDemo() {
+  const [columns, setColumns] = useState(initialColumns);
+
+  const findColumn = (id: string) => {
+    for (const [col, tasks] of Object.entries(columns)) {
+      if (col === id) return col;
+      if (tasks.find((t) => t.id === id)) return col;
+    }
+    return null;
+  };
+
+  const handleDragOver = (event: DragOverEvent) => {
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeCol = findColumn(String(active.id));
+    const overCol = findColumn(String(over.id));
+    if (!activeCol || !overCol || activeCol === overCol) return;
+
+    setColumns((prev) => {
+      const activeItems = [...prev[activeCol]];
+      const overItems = [...prev[overCol]];
+      const activeIdx = activeItems.findIndex((t) => t.id === active.id);
+      const [moved] = activeItems.splice(activeIdx, 1);
+      overItems.push(moved);
+      return { ...prev, [activeCol]: activeItems, [overCol]: overItems };
+    });
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeCol = findColumn(String(active.id));
+    const overCol = findColumn(String(over.id));
+    if (!activeCol || !overCol || activeCol !== overCol) return;
+
+    const items = columns[activeCol];
+    const oldIndex = items.findIndex((t) => t.id === active.id);
+    const newIndex = items.findIndex((t) => t.id === over.id);
+    if (oldIndex !== newIndex) {
+      setColumns((prev) => ({
+        ...prev,
+        [activeCol]: arrayMove(prev[activeCol], oldIndex, newIndex),
+      }));
+    }
+  };
+
+  return (
+    <KanbanBoard
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
+    >
+      {Object.entries(columns).map(([colId, tasks]) => (
+        <KanbanColumn
+          key={colId}
+          id={colId}
+          title={colId === 'todo' ? 'To Do' : colId === 'progress' ? 'In Progress' : 'Done'}
+          count={tasks.length}
+          itemIds={tasks.map((t) => t.id)}
+          onAdd={() => {}}
+        >
+          {tasks.map((task) => (
+            <SortableTaskCard
+              key={task.id}
+              id={task.id}
+              title={task.title}
+              priority={task.priority}
+              assignee={task.assignee}
+              dueDate={task.dueDate}
+            />
+          ))}
+        </KanbanColumn>
+      ))}
+    </KanbanBoard>
+  );
+}
+
+export const WithDragDrop: Story = {
+  render: () => <DragDropDemo />,
+};
+
+export const Static: Story = {
+  name: 'Static (no DnD)',
+  render: () => (
+    <div className="flex gap-4 p-4 bg-bg">
+      <KanbanColumn id="todo" title="To Do" count={2} onAdd={() => {}}>
+        <TaskCard title="Design landing page" priority="high" />
+        <TaskCard title="Write copy" priority="medium" />
+      </KanbanColumn>
+      <KanbanColumn id="progress" title="In Progress" count={1}>
+        <TaskCard title="Implement auth" priority="urgent" assignee={{ name: 'Bob' }} />
+      </KanbanColumn>
+    </div>
+  ),
+};

package/src/productivity/kanban-column/KanbanColumn.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { KanbanColumn } from './KanbanColumn';
+
+describe('KanbanColumn', () => {
+  it('renders title and count', () => {
+    render(<KanbanColumn title="To Do" count={3}>Cards</KanbanColumn>);
+    expect(screen.getByText('To Do')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+  it('calls onAdd', async () => {
+    const onAdd = vi.fn();
+    render(<KanbanColumn title="To Do" onAdd={onAdd}>Cards</KanbanColumn>);
+    await userEvent.click(screen.getByRole('button', { name: 'Add to To Do' }));
+    expect(onAdd).toHaveBeenCalledOnce();
+  });
+});

package/src/productivity/kanban-column/KanbanColumn.tsx

@@ -0,0 +1,58 @@
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { Plus } from 'lucide-react';
+import { cn } from '../../utils/cn';
+
+export interface KanbanColumnProps {
+  /** Unique column identifier for drop targeting */
+  id: string;
+  title: string;
+  count?: number;
+  onAdd?: () => void;
+  /** Item IDs for sortable context */
+  itemIds?: string[];
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function KanbanColumn({ id, title, count, onAdd, itemIds = [], children, className }: KanbanColumnProps) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+
+  return (
+    <div className={cn('flex flex-col w-72 shrink-0', className)}>
+      <div className="flex items-center justify-between px-2 py-3">
+        <div className="flex items-center gap-2">
+          <h3 className="text-text-primary font-semibold" style={{ fontSize: 'var(--text-body-sm)' }}>{title}</h3>
+          {count !== undefined && (
+            <span className="px-1.5 py-0.5 rounded-full bg-surface text-text-secondary font-medium" style={{ fontSize: 'var(--text-caption)' }}>
+              {count}
+            </span>
+          )}
+        </div>
+        {onAdd && (
+          <button
+            type="button"
+            onClick={onAdd}
+            className="p-1 rounded-md text-text-secondary hover:bg-surface transition-colors"
+            aria-label={`Add to ${title}`}
+            style={{ transitionDuration: 'var(--duration-micro)' }}
+          >
+            <Plus size={16} />
+          </button>
+        )}
+      </div>
+      <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+        <div
+          ref={setNodeRef}
+          className={cn(
+            'flex flex-col gap-2 flex-1 rounded-lg p-2 min-h-25 transition-colors',
+            isOver ? 'bg-rust-light/30 border-2 border-dashed border-rust' : 'bg-bg border-2 border-transparent',
+          )}
+          style={{ transitionDuration: 'var(--duration-fast)' }}
+        >
+          {children}
+        </div>
+      </SortableContext>
+    </div>
+  );
+}

package/src/productivity/kanban-column/SortableTaskCard.tsx

@@ -0,0 +1,46 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '../../utils/cn';
+import { TaskCard, type TaskCardProps } from '../task-card/TaskCard';
+
+export interface SortableTaskCardProps extends TaskCardProps {
+  /** Unique sortable ID — required */
+  id: string;
+}
+
+export function SortableTaskCard({ id, className, ...props }: SortableTaskCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : undefined,
+    position: (isDragging ? 'relative' : undefined) as React.CSSProperties['position'],
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+    >
+      <TaskCard
+        {...props}
+        id={id}
+        draggable
+        dragHandleProps={listeners}
+        className={cn(
+          isDragging && 'shadow-4 scale-[1.02] opacity-90',
+          className,
+        )}
+      />
+    </div>
+  );
+}

package/src/productivity/kanban-column/index.ts

@@ -0,0 +1,4 @@
+export { KanbanColumn } from './KanbanColumn';
+export type { KanbanColumnProps } from './KanbanColumn';
+export { SortableTaskCard } from './SortableTaskCard';
+export type { SortableTaskCardProps } from './SortableTaskCard';

package/src/productivity/priority-selector/PrioritySelector.stories.tsx

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { PrioritySelector, type Priority } from './PrioritySelector';
+
+const meta: Meta<typeof PrioritySelector> = { title: 'Productivity/PrioritySelector', component: PrioritySelector, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof PrioritySelector>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState<Priority>('medium');
+    return <PrioritySelector value={value} onChange={setValue} />;
+  },
+};

package/src/productivity/priority-selector/PrioritySelector.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { PrioritySelector } from './PrioritySelector';
+
+describe('PrioritySelector', () => {
+  it('renders all priorities', () => {
+    render(<PrioritySelector />);
+    expect(screen.getByText('Urgent')).toBeInTheDocument();
+    expect(screen.getByText('Low')).toBeInTheDocument();
+  });
+  it('calls onChange', async () => {
+    const onChange = vi.fn();
+    render(<PrioritySelector onChange={onChange} />);
+    await userEvent.click(screen.getByText('High'));
+    expect(onChange).toHaveBeenCalledWith('high');
+  });
+});

package/src/productivity/priority-selector/PrioritySelector.tsx

@@ -0,0 +1,40 @@
+import { cn } from '../../utils/cn';
+
+export type Priority = 'urgent' | 'high' | 'medium' | 'low';
+
+export interface PrioritySelectorProps {
+  value?: Priority;
+  onChange?: (priority: Priority) => void;
+  className?: string;
+}
+
+const priorities: { value: Priority; label: string; color: string }[] = [
+  { value: 'urgent', label: 'Urgent', color: 'bg-error' },
+  { value: 'high', label: 'High', color: 'bg-warning' },
+  { value: 'medium', label: 'Medium', color: 'bg-rust' },
+  { value: 'low', label: 'Low', color: 'bg-border' },
+];
+
+export function PrioritySelector({ value, onChange, className }: PrioritySelectorProps) {
+  return (
+    <div className={cn('flex flex-col gap-1', className)} role="radiogroup" aria-label="Priority">
+      {priorities.map((p) => (
+        <button
+          key={p.value}
+          type="button"
+          role="radio"
+          aria-checked={value === p.value}
+          onClick={() => onChange?.(p.value)}
+          className={cn(
+            'flex items-center gap-2.5 px-3 py-2 rounded-md transition-colors text-left w-full',
+            value === p.value ? 'bg-surface font-medium' : 'hover:bg-surface/50',
+          )}
+          style={{ fontSize: 'var(--text-body-sm)', transitionDuration: 'var(--duration-micro)' }}
+        >
+          <div className={cn('w-2.5 h-2.5 rounded-full', p.color)} />
+          <span className="text-text-primary">{p.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/productivity/priority-selector/index.ts

@@ -0,0 +1,2 @@
+export { PrioritySelector } from './PrioritySelector';
+export type { PrioritySelectorProps, Priority } from './PrioritySelector';

package/src/productivity/rich-text-toolbar/RichTextToolbar.stories.tsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { RichTextToolbar } from './RichTextToolbar';
+
+const meta: Meta<typeof RichTextToolbar> = { title: 'Productivity/RichTextToolbar', component: RichTextToolbar, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof RichTextToolbar>;
+
+export const Default: Story = {
+  render: () => {
+    const [active, setActive] = useState<string[]>(['bold']);
+    return (
+      <RichTextToolbar
+        activeFormats={active}
+        onFormatToggle={(f) => setActive((prev) => prev.includes(f) ? prev.filter((x) => x !== f) : [...prev, f])}
+      />
+    );
+  },
+};

package/src/productivity/rich-text-toolbar/RichTextToolbar.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { RichTextToolbar } from './RichTextToolbar';
+
+describe('RichTextToolbar', () => {
+  it('renders toolbar', () => {
+    render(<RichTextToolbar />);
+    expect(screen.getByRole('toolbar')).toBeInTheDocument();
+  });
+  it('marks active formats', () => {
+    render(<RichTextToolbar activeFormats={['bold']} />);
+    expect(screen.getByRole('button', { name: 'bold' })).toHaveAttribute('aria-pressed', 'true');
+  });
+  it('calls onFormatToggle', async () => {
+    const onToggle = vi.fn();
+    render(<RichTextToolbar onFormatToggle={onToggle} />);
+    await userEvent.click(screen.getByRole('button', { name: 'italic' }));
+    expect(onToggle).toHaveBeenCalledWith('italic');
+  });
+});

package/src/productivity/rich-text-toolbar/RichTextToolbar.tsx

@@ -0,0 +1,50 @@
+import { Bold, Italic, Underline, List, ListOrdered, Link, Code, AtSign } from 'lucide-react';
+import { cn } from '../../utils/cn';
+
+export interface RichTextToolbarProps {
+  activeFormats?: string[];
+  onFormatToggle?: (format: string) => void;
+  className?: string;
+}
+
+const tools = [
+  { format: 'bold', icon: Bold },
+  { format: 'italic', icon: Italic },
+  { format: 'underline', icon: Underline },
+  { format: 'separator1', icon: null },
+  { format: 'list', icon: List },
+  { format: 'orderedList', icon: ListOrdered },
+  { format: 'separator2', icon: null },
+  { format: 'link', icon: Link },
+  { format: 'code', icon: Code },
+  { format: 'mention', icon: AtSign },
+];
+
+export function RichTextToolbar({ activeFormats = [], onFormatToggle, className }: RichTextToolbarProps) {
+  return (
+    <div className={cn('flex items-center gap-0.5 p-1 rounded-lg border border-border bg-white', className)} role="toolbar" aria-label="Text formatting">
+      {tools.map((tool, i) =>
+        tool.icon === null ? (
+          <div key={tool.format} className="w-px h-5 bg-border mx-1" role="separator" />
+        ) : (
+          <button
+            key={tool.format}
+            type="button"
+            onClick={() => onFormatToggle?.(tool.format)}
+            aria-pressed={activeFormats.includes(tool.format)}
+            className={cn(
+              'p-1.5 rounded-md transition-colors',
+              activeFormats.includes(tool.format)
+                ? 'bg-rust-light text-rust-dark'
+                : 'text-text-secondary hover:bg-surface',
+            )}
+            aria-label={tool.format}
+            style={{ transitionDuration: 'var(--duration-micro)' }}
+          >
+            <tool.icon size={16} />
+          </button>
+        ),
+      )}
+    </div>
+  );
+}

package/src/productivity/rich-text-toolbar/index.ts

@@ -0,0 +1,2 @@
+export { RichTextToolbar } from './RichTextToolbar';
+export type { RichTextToolbarProps } from './RichTextToolbar';

package/src/productivity/task-card/TaskCard.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TaskCard } from './TaskCard';
+
+const meta: Meta<typeof TaskCard> = { title: 'Productivity/TaskCard', component: TaskCard, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof TaskCard>;
+
+export const Default: Story = {
+  args: {
+    title: 'Design landing page hero section',
+    priority: 'high',
+    labels: [{ text: 'Design', variant: 'primary' }, { text: 'Frontend', variant: 'secondary' }],
+    assignee: { name: 'Alice Smith' },
+    dueDate: 'Mar 22',
+  },
+};
+
+export const Minimal: Story = {
+  args: { title: 'Fix navigation bug', priority: 'urgent' },
+};

package/src/productivity/task-card/TaskCard.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { TaskCard } from './TaskCard';
+
+describe('TaskCard', () => {
+  it('renders title', () => {
+    render(<TaskCard title="Fix bug" />);
+    expect(screen.getByText('Fix bug')).toBeInTheDocument();
+  });
+  it('renders labels', () => {
+    render(<TaskCard title="Task" labels={[{ text: 'Design' }]} />);
+    expect(screen.getByText('Design')).toBeInTheDocument();
+  });
+  it('calls onClick', async () => {
+    const onClick = vi.fn();
+    render(<TaskCard title="Task" onClick={onClick} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/productivity/task-card/TaskCard.tsx

@@ -0,0 +1,76 @@
+import { Calendar, GripVertical } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import { Avatar } from '../../primitives/avatar';
+import { Badge } from '../../primitives/badge';
+
+export interface TaskCardProps {
+  /** Unique identifier for drag-and-drop */
+  id?: string;
+  title: string;
+  priority?: 'urgent' | 'high' | 'medium' | 'low';
+  labels?: { text: string; variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' }[];
+  assignee?: { name: string; src?: string };
+  dueDate?: string;
+  className?: string;
+  onClick?: () => void;
+  /** Show drag grip handle */
+  draggable?: boolean;
+  /** Props spread from useSortable — used internally by KanbanBoard */
+  dragHandleProps?: Record<string, unknown>;
+}
+
+const priorityColors: Record<string, string> = {
+  urgent: 'bg-error',
+  high: 'bg-warning',
+  medium: 'bg-rust',
+  low: 'bg-border',
+};
+
+export function TaskCard({ title, priority, labels, assignee, dueDate, className, onClick, draggable, dragHandleProps }: TaskCardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg bg-white p-4 shadow-1 transition-all',
+        !draggable && 'cursor-pointer hover:shadow-2 hover:-translate-y-0.5',
+        draggable && 'cursor-default',
+        className,
+      )}
+      style={{ transitionDuration: 'var(--duration-fast)' }}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick?.(); } }}
+    >
+      <div className="flex items-start gap-2">
+        {draggable && (
+          <button
+            type="button"
+            className="mt-0.5 shrink-0 cursor-grab text-text-secondary hover:text-text-primary active:cursor-grabbing transition-colors rounded p-0.5 -ml-1"
+            style={{ transitionDuration: 'var(--duration-micro)' }}
+            aria-label="Drag to reorder"
+            {...dragHandleProps}
+          >
+            <GripVertical size={14} />
+          </button>
+        )}
+        {priority && <div className={cn('w-2 h-2 rounded-full mt-2 shrink-0', priorityColors[priority])} />}
+        <p className="text-text-primary font-medium flex-1" style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}>
+          {title}
+        </p>
+      </div>
+      {labels && labels.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mt-3">
+          {labels.map((l, i) => <Badge key={i} variant={l.variant}>{l.text}</Badge>)}
+        </div>
+      )}
+      <div className="flex items-center justify-between mt-3">
+        {dueDate && (
+          <span className="flex items-center gap-1 text-text-secondary" style={{ fontSize: 'var(--text-caption)' }}>
+            <Calendar size={12} />{dueDate}
+          </span>
+        )}
+        {assignee && <Avatar name={assignee.name} src={assignee.src} size="sm" />}
+      </div>
+    </div>
+  );
+}

package/src/productivity/task-card/index.ts

@@ -0,0 +1,2 @@
+export { TaskCard } from './TaskCard';
+export type { TaskCardProps } from './TaskCard';

package/src/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/src/tokens/index.ts

@@ -0,0 +1 @@
+export { colors, spacing, radii, shadows, durations, easings, typography } from './tokens';

package/src/tokens/tokens.ts

@@ -0,0 +1,71 @@
+export const colors = {
+  bg: '#FAF7F2',
+  surface: '#F0EBE3',
+  border: '#D9D2C7',
+  textPrimary: '#2C2825',
+  textSecondary: '#6B635A',
+  white: '#FFFFFF',
+  rust: '#B85C38',
+  rustLight: '#F0D5C5',
+  rustDark: '#8E4429',
+  forest: '#3D6B5E',
+  forestLight: '#D4E5DF',
+  success: '#5E8A6B',
+  successLight: '#DDE9E0',
+  warning: '#C49A3C',
+  warningLight: '#F5EDD4',
+  error: '#B84A3C',
+  errorLight: '#F3D9D5',
+  info: '#7A8A9A',
+  infoLight: '#E0E5EA',
+  saffron: '#D4923A',
+  saffronLight: '#F5E3C8',
+} as const;
+
+export const spacing = {
+  1: '4px',
+  2: '8px',
+  3: '12px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  8: '32px',
+  10: '40px',
+  12: '48px',
+  16: '64px',
+  20: '80px',
+  24: '96px',
+} as const;
+
+export const radii = {
+  sm: '6px',
+  md: '10px',
+  lg: '16px',
+  xl: '24px',
+  full: '9999px',
+} as const;
+
+export const shadows = {
+  1: '0 1px 3px rgba(44, 40, 37, 0.06)',
+  2: '0 4px 12px rgba(44, 40, 37, 0.08)',
+  3: '0 8px 24px rgba(44, 40, 37, 0.12)',
+  4: '0 16px 48px rgba(44, 40, 37, 0.16)',
+} as const;
+
+export const durations = {
+  micro: '100ms',
+  fast: '200ms',
+  normal: '350ms',
+  slow: '500ms',
+} as const;
+
+export const easings = {
+  out: 'cubic-bezier(0.22, 1, 0.36, 1)',
+  in: 'cubic-bezier(0.55, 0, 1, 0.45)',
+  spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+} as const;
+
+export const typography = {
+  fontSans: "'Satoshi', system-ui, -apple-system, sans-serif",
+  fontMono: "'JetBrains Mono', 'Fira Code', monospace",
+} as const;