@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/billing/SpendVsBudget/SpendVsBudget.tsx

@@ -0,0 +1,105 @@
+import { Badge, Card, cn } from '@gntik-ai/ui';
+import { LineChart } from '@gntik-ai/charts';
+import { formatMoney } from '../format';
+import { sampleBudget, sampleSpend } from './fixtures';
+
+export interface SpendPoint {
+  /** X-axis label, e.g. "May 12". */
+  label: string;
+  /** Cumulative actual spend; null after today. */
+  spend: number | null;
+  /** Cumulative forecast; null before today. Start it on the last actual point to join the lines. */
+  forecast?: number | null;
+}
+
+export interface SpendVsBudgetProps {
+  data?: SpendPoint[];
+  /** Budget cap for the period (drawn as a flat line). */
+  budget?: number;
+  currency?: string;
+  title?: string;
+  /** Period caption, e.g. "May cycle". */
+  period?: string;
+  /** Chart plot height in px. */
+  height?: number;
+  /** Heading level of the title, to fit the page outline (default h3). */
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+interface ChartRow {
+  day: string;
+  Spend: number | null;
+  Forecast: number | null;
+  Budget: number;
+}
+
+function lastValue(values: Array<number | null | undefined>): number | undefined {
+  for (let i = values.length - 1; i >= 0; i--) {
+    const v = values[i];
+    if (v != null) return v;
+  }
+  return undefined;
+}
+
+/** Cumulative spend against a budget cap, with the end-of-period forecast. */
+export function SpendVsBudget({
+  data = sampleSpend,
+  budget = sampleBudget,
+  currency = 'USD',
+  title = 'Spend vs budget',
+  period = 'May cycle',
+  height = 240,
+  titleAs: TitleTag = 'h3',
+  className,
+}: SpendVsBudgetProps) {
+  const toDate = lastValue(data.map((d) => d.spend)) ?? 0;
+  const forecast = lastValue(data.map((d) => d.forecast)) ?? toDate;
+  const over = forecast > budget;
+  const rows: ChartRow[] = data.map((d) => ({
+    day: d.label,
+    Spend: d.spend,
+    Forecast: d.forecast ?? null,
+    Budget: budget,
+  }));
+  const money = (n: number) => formatMoney(n, currency, true);
+  const stats = [
+    { label: 'Spend to date', value: formatMoney(toDate, currency) },
+    { label: 'Forecast', value: formatMoney(forecast, currency) },
+    { label: 'Budget', value: formatMoney(budget, currency) },
+  ];
+
+  return (
+    <Card className={cn('p-6', className)}>
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <TitleTag className="text-[15px] font-semibold tracking-tight text-foreground">{title}</TitleTag>
+          {period && <p className="mt-0.5 text-[12.5px] text-muted-foreground">{period}</p>}
+        </div>
+        <Badge tone={over ? 'warning' : 'success'} dot>
+          {over ? 'Forecast over budget' : 'Within budget'}
+        </Badge>
+      </div>
+      <dl className="mt-4 grid grid-cols-3 gap-4">
+        {stats.map((s) => (
+          <div key={s.label} className="min-w-0">
+            <dt className="text-[11.5px] text-muted-foreground">{s.label}</dt>
+            <dd className="mt-1 truncate font-mono text-[14px] font-semibold text-foreground tabular-nums">
+              {s.value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+      <LineChart
+        className="mt-5"
+        data={rows}
+        index="day"
+        categories={['Spend', 'Forecast', 'Budget']}
+        colors={['primary', 'cyan', 'amber']}
+        valueFormatter={money}
+        height={height}
+        aria-label={`${title}: ${formatMoney(toDate, currency)} spent, ${formatMoney(forecast, currency)} forecast against a ${formatMoney(budget, currency)} budget`}
+      />
+    </Card>
+  );
+}

package/src/billing/SpendVsBudget/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Spend vs budget',
+  family: 'billing',
+  status: 'beta',
+  description:
+    'Cumulative spend line with the end-of-period forecast and a flat budget line, a summary row and a within/over budget status.',
+  uses: ['Card', 'Badge', 'LineChart'],
+};

package/src/billing/SpendVsBudget/fixtures.ts

@@ -0,0 +1,18 @@
+import type { SpendPoint } from './SpendVsBudget';
+
+/**
+ * Sample cumulative spend for a 30-day cycle: actuals through day 18, forecast after.
+ * The forecast starts on the last actual point so the two lines join.
+ */
+export const sampleSpend: SpendPoint[] = Array.from({ length: 30 }, (_, i) => {
+  const day = i + 1;
+  const actual = Math.round(day * 64 + Math.sin(day / 2) * 22);
+  const lastActual = 18 * 64 + Math.round(Math.sin(9) * 22);
+  return {
+    label: `May ${day}`,
+    spend: day <= 18 ? actual : null,
+    forecast: day >= 18 ? Math.round(lastActual + (day - 18) * 46) : null,
+  };
+});
+
+export const sampleBudget = 2000;

package/src/billing/format.ts

@@ -0,0 +1,42 @@
+/** Shared formatting for the billing blocks (en-US, Intl). */
+
+/** A calendar date: a `Date` or an ISO `YYYY-MM-DD` string (read as a local date, no UTC shift). */
+export type DateInput = Date | string;
+
+export function toDate(value: DateInput): Date {
+  if (value instanceof Date) return value;
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return new Date(value);
+}
+
+const dateFmt = new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+const shortDateFmt = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+
+/** "June 1, 2026". */
+export function formatDate(value: DateInput): string {
+  return dateFmt.format(toDate(value));
+}
+
+/** "Jun 1, 2026". */
+export function formatShortDate(value: DateInput): string {
+  return shortDateFmt.format(toDate(value));
+}
+
+/** Money with the currency symbol: "$1,620.00" (or no decimals with `whole`). */
+export function formatMoney(amount: number, currency = 'USD', whole = false): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: whole ? 0 : 2,
+    maximumFractionDigits: whole ? 0 : 2,
+  }).format(amount);
+}
+
+/** Grouped number, compact above a million: "412,800", "78.4M". */
+export function formatQuantity(value: number): string {
+  if (Math.abs(value) >= 1_000_000) {
+    return new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 }).format(value);
+  }
+  return new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 }).format(value);
+}

package/src/billing/index.ts

@@ -0,0 +1,21 @@
+export * from './PlanCard/PlanCard';
+export { meta as planCardMeta } from './PlanCard/block.meta';
+export { samplePlan } from './PlanCard/fixtures';
+export * from './PlanDefinitionCard/PlanDefinitionCard';
+export { meta as planDefinitionCardMeta } from './PlanDefinitionCard/block.meta';
+export { samplePlanDefinition } from './PlanDefinitionCard/fixtures';
+export * from './QuotaMeters/QuotaMeters';
+export { meta as quotaMetersMeta } from './QuotaMeters/block.meta';
+export { sampleQuotas } from './QuotaMeters/fixtures';
+export * from './SpendVsBudget/SpendVsBudget';
+export { meta as spendVsBudgetMeta } from './SpendVsBudget/block.meta';
+export { sampleSpend, sampleBudget } from './SpendVsBudget/fixtures';
+export * from './InvoiceTable/InvoiceTable';
+export { meta as invoiceTableMeta } from './InvoiceTable/block.meta';
+export { sampleInvoices } from './InvoiceTable/fixtures';
+export * from './PaymentMethodCard/PaymentMethodCard';
+export { meta as paymentMethodCardMeta } from './PaymentMethodCard/block.meta';
+export { samplePaymentMethod } from './PaymentMethodCard/fixtures';
+export * from './CostBreakdown/CostBreakdown';
+export { meta as costBreakdownMeta } from './CostBreakdown/block.meta';
+export { sampleCosts } from './CostBreakdown/fixtures';

package/src/builders/CodePanel/CodePanel.test.tsx

@@ -0,0 +1,280 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { MonacoLoader } from '@gntik-ai/editor';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { CodePanel } from './CodePanel';
+import ControlledCodePanel from './examples/controlled';
+
+/** Minimal Monaco stand-in (same approach as the @gntik-ai/editor tests). */
+function mockMonaco() {
+  const created: Array<{
+    value: string;
+    language?: string;
+    revealLineInCenter: ReturnType<typeof vi.fn>;
+  }> = [];
+  const markerListeners = new Set<() => void>();
+  let modelMarkers: Array<{
+    owner: string;
+    resource: { toString: () => string };
+    severity: number;
+    message: string;
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+  }> = [];
+  const resource = { toString: () => 'inmemory://test/1' };
+  const model = (value: string) => ({
+    uri: resource,
+    getValue: () => value,
+    setValue: vi.fn(),
+    onDidChangeContent: () => ({ dispose: vi.fn() }),
+    dispose: vi.fn(),
+  });
+  const editor = {
+    getModelMarkers: vi.fn(() => modelMarkers),
+    onDidChangeMarkers: (listener: () => void) => {
+      markerListeners.add(listener);
+      return { dispose: () => markerListeners.delete(listener) };
+    },
+    setModelMarkers: vi.fn((_model: unknown, owner: string, markers: typeof modelMarkers) => {
+      modelMarkers = [
+        ...modelMarkers.filter((m) => m.owner !== owner),
+        ...markers.map((m) => ({ ...m, owner, resource })),
+      ];
+      markerListeners.forEach((listener) => listener());
+    }),
+    defineTheme: vi.fn(),
+    setTheme: vi.fn(),
+    setModelLanguage: vi.fn(),
+    remeasureFonts: vi.fn(),
+    createModel: vi.fn((value: string) => model(value)),
+    create: vi.fn((_el: HTMLElement, opts: { value?: string; language?: string }) => {
+      const m = model(opts.value ?? '');
+      const ed = {
+        value: opts.value ?? '',
+        language: opts.language,
+        getModel: () => m,
+        getValue: () => m.getValue(),
+        setValue: vi.fn(),
+        onDidChangeModelContent: () => ({ dispose: vi.fn() }),
+        updateOptions: vi.fn(),
+        layout: vi.fn(),
+        dispose: vi.fn(),
+        setPosition: vi.fn(),
+        revealLineInCenter: vi.fn(),
+        focus: vi.fn(),
+      };
+      created.push(ed);
+      return ed;
+    }),
+    createDiffEditor: vi.fn(() => ({
+      setModel: vi.fn(),
+      getModel: () => null,
+      getModifiedEditor: () => ({
+        getModel: () => model('count: wrong'),
+        setPosition: vi.fn(),
+        revealLineInCenter: vi.fn(),
+        focus: vi.fn(),
+      }),
+      updateOptions: vi.fn(),
+      layout: vi.fn(),
+      dispose: vi.fn(),
+    })),
+  };
+  const loader = (() => Promise.resolve({ editor })) as unknown as MonacoLoader;
+  return {
+    editor,
+    loader,
+    created,
+    resource,
+    emitMarkers: (markers: typeof modelMarkers) => {
+      modelMarkers = markers;
+      markerListeners.forEach((listener) => listener());
+    },
+  };
+}
+
+describe('CodePanel', () => {
+  it('renders file tabs, the active editor and the problems list', async () => {
+    const m = mockMonaco();
+    render(<CodePanel loader={m.loader} />);
+    expect(screen.getByRole('tab', { name: /handler\.ts/ })).toHaveAttribute('aria-selected', 'true');
+    await waitFor(() => expect(m.editor.create).toHaveBeenCalledTimes(1));
+    expect(m.created[0]?.language).toBe('typescript');
+    expect(screen.getByRole('list', { name: 'Problems' }).children).toHaveLength(3);
+    expect(screen.getByText('1 error · 1 warning')).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('switches files, opens the diff view and jumps to a problem', async () => {
+    const user = userEvent.setup();
+    const m = mockMonaco();
+    const onProblemSelect = vi.fn();
+    render(<CodePanel loader={m.loader} onProblemSelect={onProblemSelect} />);
+    await waitFor(() => expect(m.editor.create).toHaveBeenCalledTimes(1));
+
+    await user.click(screen.getByRole('button', { name: 'Diff' }));
+    await waitFor(() => expect(m.editor.createDiffEditor).toHaveBeenCalledTimes(1));
+
+    await user.click(screen.getByRole('tab', { name: /deploy\.yaml/ }));
+    await waitFor(() => expect(m.created.at(-1)?.language).toBe('yaml'));
+    expect(screen.getByRole('button', { name: 'Diff' })).toBeDisabled();
+
+    await user.click(screen.getByRole('button', { name: /Expected 0 arguments/ }));
+    expect(onProblemSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 'p1' }));
+    expect(screen.getByRole('tab', { name: /handler\.ts/ })).toHaveAttribute('aria-selected', 'true');
+    await waitFor(() => expect(m.created.at(-1)?.revealLineInCenter).toHaveBeenCalledWith(5));
+  });
+
+  it('supports a controlled active file', async () => {
+    const user = userEvent.setup();
+    const m = mockMonaco();
+    const onActiveFileChange = vi.fn();
+    const { rerender } = render(
+      <CodePanel loader={m.loader} activeFile="deploy.yaml" onActiveFileChange={onActiveFileChange} />,
+    );
+    expect(screen.getByRole('tab', { name: /deploy\.yaml/ })).toHaveAttribute('aria-selected', 'true');
+    await user.click(screen.getByRole('tab', { name: /settings\.json/ }));
+    expect(onActiveFileChange).toHaveBeenLastCalledWith('settings.json');
+    // Stays on the controlled value until the parent updates it.
+    expect(screen.getByRole('tab', { name: /deploy\.yaml/ })).toHaveAttribute('aria-selected', 'true');
+    await user.click(screen.getByRole('button', { name: /Expected 0 arguments/ }));
+    expect(onActiveFileChange).toHaveBeenLastCalledWith('src/handler.ts');
+    rerender(<CodePanel loader={m.loader} activeFile="settings.json" onActiveFileChange={onActiveFileChange} />);
+    expect(screen.getByRole('tab', { name: /settings\.json/ })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('renders the problems heading at the requested level', async () => {
+    const m = mockMonaco();
+    const { unmount } = render(<CodePanel loader={m.loader} />);
+    expect(screen.getByRole('heading', { name: 'Problems' }).tagName).toBe('H3');
+    unmount();
+    render(<ControlledCodePanel />);
+    expect(screen.getByRole('heading', { name: 'Problems' }).tagName).toBe('H4');
+    expect(screen.getByRole('tab', { name: /deploy\.yaml/ })).toHaveAttribute('aria-selected', 'true');
+    await expectNoAxeViolations();
+  });
+});
+
+it('merges markers from all Monaco owners and consumer markers and reports only validity transitions', async () => {
+  const m = mockMonaco();
+  const validity = vi.fn();
+  const ready = vi.fn();
+  const files = [{ path: 'flow.yaml', language: 'yaml', content: 'count: wrong' }];
+  const semantic = [
+    {
+      id: 'semantic',
+      owner: 'semantic-worker',
+      file: 'flow.yaml',
+      line: 1,
+      severity: 'warning' as const,
+      message: 'Missing terminal step',
+    },
+  ];
+  const { rerender, unmount } = render(
+    <CodePanel
+      loader={m.loader}
+      files={files}
+      problems={[]}
+      markers={semantic}
+      onValidityChange={validity}
+      onMonacoReady={ready}
+      readOnly
+    />,
+  );
+  await waitFor(() => expect(m.editor.create).toHaveBeenCalledOnce());
+  expect(m.editor.create).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ readOnly: true }));
+  await waitFor(() => expect(ready).toHaveBeenCalledOnce());
+  expect(screen.getByRole('list', { name: 'Problems' })).toHaveTextContent('Missing terminal step');
+  validity.mockClear();
+  const error = {
+    owner: 'yaml',
+    resource: m.resource,
+    severity: 8,
+    message: 'Expected integer',
+    startLineNumber: 1,
+    startColumn: 8,
+    endLineNumber: 1,
+    endColumn: 13,
+  };
+  act(() => m.emitMarkers([error, { ...error, owner: 'other-worker', message: 'Invalid reference' }]));
+  expect(screen.getByRole('list', { name: 'Problems' })).toHaveTextContent('Expected integer');
+  expect(screen.getByRole('list', { name: 'Problems' })).toHaveTextContent('Invalid reference');
+  expect(validity).toHaveBeenCalledExactlyOnceWith(false);
+  act(() => m.emitMarkers([error]));
+  expect(validity).toHaveBeenCalledTimes(1);
+  act(() => m.emitMarkers([]));
+  expect(validity).toHaveBeenLastCalledWith(true);
+  expect(validity).toHaveBeenCalledTimes(2);
+  rerender(
+    <CodePanel
+      loader={m.loader}
+      files={files}
+      problems={[]}
+      markers={[]}
+      onValidityChange={validity}
+      onMonacoReady={ready}
+      readOnly
+    />,
+  );
+  expect(screen.getByText('No problems detected.')).toBeInTheDocument();
+  unmount();
+  expect(m.editor.setModelMarkers).toHaveBeenLastCalledWith(expect.anything(), 'semantic-worker', []);
+});
+
+it('collects worker markers and runs consumer setup when the panel opens in diff view', async () => {
+  const m = mockMonaco();
+  const ready = vi.fn();
+  render(
+    <CodePanel
+      loader={m.loader}
+      files={[{ path: 'flow.yaml', language: 'yaml', content: 'count: wrong', original: 'count: 1' }]}
+      problems={[]}
+      defaultView="diff"
+      onMonacoReady={ready}
+    />,
+  );
+  await waitFor(() => expect(m.editor.createDiffEditor).toHaveBeenCalledOnce());
+  await waitFor(() => expect(ready).toHaveBeenCalledOnce());
+  act(() =>
+    m.emitMarkers([
+      {
+        owner: 'yaml',
+        resource: m.resource,
+        severity: 8,
+        message: 'Expected integer',
+        startLineNumber: 1,
+        startColumn: 8,
+        endLineNumber: 1,
+        endColumn: 13,
+      },
+    ]),
+  );
+  expect(screen.getByRole('list', { name: 'Problems' })).toHaveTextContent('Expected integer');
+});
+
+it.each([undefined, true, false])(
+  'preserves caller-supplied problems with readOnly=%s and no diagnostics opt-in',
+  async (readOnly) => {
+    const m = mockMonaco();
+    render(<CodePanel loader={m.loader} readOnly={readOnly} />);
+    await waitFor(() => expect(m.editor.create).toHaveBeenCalledOnce());
+    await act(async () =>
+      m.emitMarkers([
+        {
+          owner: 'typescript',
+          resource: m.resource,
+          severity: 8,
+          message: 'A model-only error',
+          startLineNumber: 1,
+          startColumn: 1,
+          endLineNumber: 1,
+          endColumn: 2,
+        },
+      ]),
+    );
+    expect(screen.getByRole('list', { name: 'Problems' }).children).toHaveLength(3);
+    expect(screen.queryByText('A model-only error')).toBeNull();
+  },
+);