@artkit-ai/react 0.0.0-stage → 0.1.0

package/src/index.ts

@@ -0,0 +1,160 @@
+export { ArtifactCache, type CacheEntry } from './cache.js';
+export {
+  type ApplyInput,
+  type ArtifactClient,
+  type ClientExportResult,
+  createHttpClient,
+  createServiceClient,
+  type ExportInput,
+  errorFromResponse,
+  filenameFromDisposition,
+  type HttpClientOptions,
+  type ReadOptions,
+  type RequestOptions,
+  STATUS_ACTIONS,
+  type StatusAction,
+} from './client.js';
+export {
+  ArtifactApproval,
+  type ArtifactApprovalPart,
+  type ArtifactApprovalProps,
+} from './components/approval.js';
+export { ArtifactCard, type ArtifactCardPart, type ArtifactCardProps } from './components/card.js';
+export {
+  ArtifactEditor,
+  type ArtifactEditorPart,
+  type ArtifactEditorProps,
+  type EditorPermission,
+} from './components/editor.js';
+export {
+  ArtifactPanel,
+  type ArtifactPanelPart,
+  type ArtifactPanelProps,
+  type PanelTab,
+} from './components/panel.js';
+export { type Slots, StatusBadge } from './components/shared.js';
+export {
+  ArtifactVersionDiff,
+  type ArtifactVersionDiffPart,
+  type ArtifactVersionDiffProps,
+  compareVersions,
+  type DiffLayout,
+  type VersionComparison,
+} from './components/version-diff.js';
+export {
+  ArtifactView,
+  type ArtifactViewPart,
+  type ArtifactViewProps,
+  KindRenderer,
+  previewContent,
+} from './components/view.js';
+export {
+  type ArtifactLoaders,
+  type ArtkitContextValue,
+  type ColorScheme,
+  type EditorModule,
+  type RendererModule,
+  type RendererProps,
+  useArtkit,
+  useOptionalArtkit,
+} from './context.js';
+export {
+  Button,
+  type ButtonProps,
+  ButtonRow,
+  ColorPicker,
+  type ColorPickerProps,
+  type ControlSize,
+  type ControlVariant,
+  controlsCss,
+  Field,
+  type FieldProps,
+  FieldRow,
+  Hint,
+  IconButton,
+  type IconButtonProps,
+  Inspector,
+  type InspectorProps,
+  InspectorSection,
+  type InspectorSectionProps,
+  NumberField,
+  type NumberFieldProps,
+  Segmented,
+  type SegmentedProps,
+  SelectField,
+  type SelectFieldProps,
+  Switch,
+  type SwitchProps,
+  TextField,
+  type TextFieldProps,
+  Toggle,
+  type ToggleProps,
+} from './controls.js';
+export { triggerDownload } from './download.js';
+export {
+  type ConflictChoice,
+  EditorSession,
+  type EditorSessionOptions,
+  type EditorSessionState,
+  type EnvelopeState,
+  envelopeOf,
+  operationsBetween,
+  type SendRequest,
+  type SessionConflict,
+  type SessionEvent,
+  type SessionStatus,
+} from './editor-session.js';
+export {
+  type ApplyConflict,
+  type ApplyOptions,
+  type ExportOptions,
+  type UseApplyOperationsResult,
+  type UseArtifactExportResult,
+  type UseArtifactHistoryResult,
+  type UseArtifactOptions,
+  type UseArtifactResult,
+  useApplyOperations,
+  useArtifact,
+  useArtifactExport,
+  useArtifactHistory,
+  useLatestVersion,
+} from './hooks.js';
+export {
+  createTranslator,
+  type Translate,
+  type UiMessageKey,
+  type UiMessageOverrides,
+  type UiMessages,
+  uiMessages,
+} from './i18n.js';
+export { kitCss } from './kit-css.js';
+export {
+  diffLines,
+  type LineDiffEntry,
+  type LineDiffOptions,
+  type LineDiffType,
+  type SplitRow,
+  toSplitRows,
+} from './line-diff.js';
+export { parsePartialJson } from './partial-json.js';
+export { ArtifactProvider, type ArtifactProviderProps } from './provider.js';
+export { artkitCss, darkTheme, mixColors, themeStyles } from './styles.js';
+export {
+  Toolbar,
+  ToolbarButton,
+  type ToolbarButtonProps,
+  ToolbarColor,
+  type ToolbarColorOption,
+  type ToolbarColorProps,
+  ToolbarGroup,
+  ToolbarMenu,
+  type ToolbarMenuItem,
+  type ToolbarMenuProps,
+  type ToolbarOption,
+  type ToolbarProps,
+  ToolbarSelect,
+  type ToolbarSelectProps,
+  ToolbarSpacer,
+  themeSwatches,
+  toolbarCss,
+} from './toolbar.js';

package/src/kit-css.ts

@@ -0,0 +1,5 @@
+import { controlsCss } from './controls.js';
+import { toolbarCss } from './toolbar.js';
+
+/** Toolbar and form control styles shared by every kind editor and viewer (include once per kind CSS). */
+export const kitCss = `${toolbarCss}${controlsCss}`;

package/src/line-diff.ts

@@ -0,0 +1,111 @@
+export type LineDiffType = 'equal' | 'insert' | 'delete';
+
+export interface LineDiffEntry {
+  type: LineDiffType;
+  text: string;
+  /** 1-based line number in the old text (equal and delete). */
+  oldLine?: number;
+  /** 1-based line number in the new text (equal and insert). */
+  newLine?: number;
+}
+
+export interface LineDiffOptions {
+  /**
+   * Upper bound for the LCS table (rows × columns) after trimming the common prefix and suffix.
+   * Above it the middle is reported as a block replacement, keeping memory bounded on huge projections.
+   */
+  maxCells?: number;
+}
+
+const splitLines = (text: string) => (text === '' ? [] : text.replace(/\r\n?/g, '\n').split('\n'));
+
+/** Line diff based on the longest common subsequence, with common prefix/suffix trimmed first. */
+export function diffLines(before: string, after: string, options: LineDiffOptions = {}): LineDiffEntry[] {
+  const a = splitLines(before);
+  const b = splitLines(after);
+  const maxCells = options.maxCells ?? 4_000_000;
+  let start = 0;
+  while (start < a.length && start < b.length && a[start] === b[start]) start++;
+  let endA = a.length;
+  let endB = b.length;
+  while (endA > start && endB > start && a[endA - 1] === b[endB - 1]) {
+    endA--;
+    endB--;
+  }
+
+  const out: LineDiffEntry[] = [];
+  for (let i = 0; i < start; i++) out.push({ type: 'equal', text: a[i]!, oldLine: i + 1, newLine: i + 1 });
+
+  const midA = a.slice(start, endA);
+  const midB = b.slice(start, endB);
+  const n = midA.length;
+  const m = midB.length;
+  if (n > 0 && m > 0 && n * m <= maxCells) {
+    // lengths[i][j] = LCS length of midA[i..] and midB[j..], stored flat.
+    const width = m + 1;
+    const lengths = new Uint32Array((n + 1) * width);
+    for (let i = n - 1; i >= 0; i--) {
+      for (let j = m - 1; j >= 0; j--) {
+        lengths[i * width + j] =
+          midA[i] === midB[j]
+            ? lengths[(i + 1) * width + j + 1]! + 1
+            : Math.max(lengths[(i + 1) * width + j]!, lengths[i * width + j + 1]!);
+      }
+    }
+    let i = 0;
+    let j = 0;
+    while (i < n && j < m) {
+      if (midA[i] === midB[j]) {
+        out.push({ type: 'equal', text: midA[i]!, oldLine: start + i + 1, newLine: start + j + 1 });
+        i++;
+        j++;
+      } else if (lengths[(i + 1) * width + j]! >= lengths[i * width + j + 1]!) {
+        out.push({ type: 'delete', text: midA[i]!, oldLine: start + i + 1 });
+        i++;
+      } else {
+        out.push({ type: 'insert', text: midB[j]!, newLine: start + j + 1 });
+        j++;
+      }
+    }
+    for (; i < n; i++) out.push({ type: 'delete', text: midA[i]!, oldLine: start + i + 1 });
+    for (; j < m; j++) out.push({ type: 'insert', text: midB[j]!, newLine: start + j + 1 });
+  } else {
+    for (let k = 0; k < n; k++) out.push({ type: 'delete', text: midA[k]!, oldLine: start + k + 1 });
+    for (let k = 0; k < m; k++) out.push({ type: 'insert', text: midB[k]!, newLine: start + k + 1 });
+  }
+
+  for (let k = 0; k < a.length - endA; k++) {
+    out.push({ type: 'equal', text: a[endA + k]!, oldLine: endA + k + 1, newLine: endB + k + 1 });
+  }
+  return out;
+}
+
+export interface SplitRow {
+  left?: LineDiffEntry;
+  right?: LineDiffEntry;
+}
+
+/** Pairs deletions with the insertions that follow them, for a side-by-side layout. */
+export function toSplitRows(entries: LineDiffEntry[]): SplitRow[] {
+  const rows: SplitRow[] = [];
+  let index = 0;
+  while (index < entries.length) {
+    const entry = entries[index]!;
+    if (entry.type === 'equal') {
+      rows.push({ left: entry, right: entry });
+      index++;
+      continue;
+    }
+    const deletes: LineDiffEntry[] = [];
+    const inserts: LineDiffEntry[] = [];
+    while (index < entries.length && entries[index]!.type === 'delete') deletes.push(entries[index++]!);
+    while (index < entries.length && entries[index]!.type === 'insert') inserts.push(entries[index++]!);
+    for (let k = 0; k < Math.max(deletes.length, inserts.length); k++) {
+      const row: SplitRow = {};
+      if (deletes[k]) row.left = deletes[k];
+      if (inserts[k]) row.right = inserts[k];
+      rows.push(row);
+    }
+  }
+  return rows;
+}

package/src/partial-json.ts

@@ -0,0 +1,160 @@
+const INCOMPLETE = Symbol('incomplete');
+const MAX_DEPTH = 200;
+
+class PartialJsonSyntaxError extends Error {}
+
+/**
+ * Best-effort parse of a JSON prefix streamed by a model (spec §13.4). Complete values are kept, a string
+ * value cut midway keeps the text received so far, and anything else unfinished at the end (a key, a
+ * number, a literal) is dropped. Returns undefined for text that is not a JSON prefix. The kind's
+ * `parsePartial` then decides which trailing items are complete enough to render.
+ */
+export function parsePartialJson(text: string): unknown {
+  try {
+    return JSON.parse(text);
+  } catch {
+    // Not complete yet: fall through to the tolerant parser.
+  }
+  let i = 0;
+  const length = text.length;
+
+  const skipWhitespace = () => {
+    while (i < length && (text[i] === ' ' || text[i] === '\n' || text[i] === '\r' || text[i] === '\t')) i++;
+  };
+
+  function parseString(): { value: string; complete: boolean } {
+    i++; // opening quote
+    let out = '';
+    while (i < length) {
+      const char = text[i]!;
+      if (char === '"') {
+        i++;
+        return { value: out, complete: true };
+      }
+      if (char === '\\') {
+        const next = text[i + 1];
+        if (next === undefined) break;
+        if (next === 'u') {
+          const hex = text.slice(i + 2, i + 6);
+          if (hex.length < 4) break;
+          if (!/^[0-9a-fA-F]{4}$/.test(hex)) throw new PartialJsonSyntaxError('bad escape');
+          out += String.fromCharCode(Number.parseInt(hex, 16));
+          i += 6;
+          continue;
+        }
+        const escapes: Record<string, string> = {
+          '"': '"',
+          '\\': '\\',
+          '/': '/',
+          b: '\b',
+          f: '\f',
+          n: '\n',
+          r: '\r',
+          t: '\t',
+        };
+        const mapped = escapes[next];
+        if (mapped === undefined) throw new PartialJsonSyntaxError('bad escape');
+        out += mapped;
+        i += 2;
+        continue;
+      }
+      out += char;
+      i++;
+    }
+    i = length;
+    return { value: out, complete: false };
+  }
+
+  function parseValue(depth: number): unknown {
+    if (depth > MAX_DEPTH) throw new PartialJsonSyntaxError('too deep');
+    skipWhitespace();
+    if (i >= length) return INCOMPLETE;
+    const char = text[i]!;
+    if (char === '{') return parseObject(depth);
+    if (char === '[') return parseArray(depth);
+    if (char === '"') return parseString().value;
+    for (const [literal, value] of [
+      ['true', true],
+      ['false', false],
+      ['null', null],
+    ] as const) {
+      if (text.startsWith(literal, i)) {
+        i += literal.length;
+        return value;
+      }
+      if (literal.startsWith(text.slice(i))) {
+        i = length;
+        return INCOMPLETE;
+      }
+    }
+    const rest = text.slice(i);
+    const numeric = /^[-+0-9.eE]*/.exec(rest)?.[0] ?? '';
+    if (numeric.length === 0) throw new PartialJsonSyntaxError('unexpected token');
+    // A number touching the end of the stream may still grow ("12" → "123", "1." → "1.5").
+    if (numeric.length === rest.length) {
+      i = length;
+      return INCOMPLETE;
+    }
+    if (!/^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/.test(numeric))
+      throw new PartialJsonSyntaxError('bad number');
+    i += numeric.length;
+    return Number(numeric);
+  }
+
+  function parseObject(depth: number): Record<string, unknown> {
+    i++;
+    const result: Record<string, unknown> = {};
+    for (;;) {
+      skipWhitespace();
+      if (i >= length) return result;
+      const char = text[i]!;
+      if (char === '}') {
+        i++;
+        return result;
+      }
+      if (char === ',') {
+        i++;
+        continue;
+      }
+      if (char !== '"') throw new PartialJsonSyntaxError('expected key');
+      const key = parseString();
+      if (!key.complete) return result;
+      skipWhitespace();
+      if (i >= length) return result;
+      if (text[i] !== ':') throw new PartialJsonSyntaxError('expected colon');
+      i++;
+      const value = parseValue(depth + 1);
+      if (value === INCOMPLETE) return result;
+      result[key.value] = value;
+    }
+  }
+
+  function parseArray(depth: number): unknown[] {
+    i++;
+    const result: unknown[] = [];
+    for (;;) {
+      skipWhitespace();
+      if (i >= length) return result;
+      const char = text[i]!;
+      if (char === ']') {
+        i++;
+        return result;
+      }
+      if (char === ',') {
+        i++;
+        continue;
+      }
+      const value = parseValue(depth + 1);
+      if (value === INCOMPLETE) return result;
+      result.push(value);
+    }
+  }
+
+  try {
+    const value = parseValue(0);
+    return value === INCOMPLETE ? undefined : value;
+  } catch (error) {
+    if (error instanceof PartialJsonSyntaxError) return undefined;
+    throw error;
+  }
+}

package/src/provider.tsx

@@ -0,0 +1,176 @@
+import { type ArtifactRegistry, type AssetResolver, defaultTheme, type Theme } from '@artkit-ai/core';
+import { soraFontFaceCss } from '@artkit-ai/core/fonts';
+import { type ReactNode, useMemo, useRef } from 'react';
+import { cacheFor } from './cache.js';
+import type { ArtifactClient } from './client.js';
+import {
+  type ArtifactLoaders,
+  ArtkitContext,
+  type ArtkitContextValue,
+  type ColorScheme,
+  type EditorModule,
+  type RendererModule,
+} from './context.js';
+import { createTranslator, type UiMessageOverrides } from './i18n.js';
+import { artkitCss, hashString, themeStyles } from './styles.js';
+
+export interface ArtifactProviderProps {
+  /** Core registry with the kinds the app shows (parsePartial, apply, project, diff, lint). */
+  registry: ArtifactRegistry;
+  client: ArtifactClient;
+  /** Lazy renderers, editors and exporters per kind. Read once per kind: later changes are ignored. */
+  loaders?: ArtifactLoaders;
+  /** UI locale (pt-BR or en built in). Artifacts keep their own locale for content formatting. */
+  locale?: string;
+  /** Extra or overriding UI strings, keyed by locale. */
+  messages?: UiMessageOverrides;
+  /** Application theme (object or registered id), used by the host chrome and as fallback. */
+  theme?: Theme | string;
+  /** Extra artifact themes, looked up by `artifact.themeId` before the registry. */
+  themes?: Theme[];
+  /** Dark variants keyed by theme id; others are derived automatically. */
+  darkThemes?: Record<string, Theme>;
+  /** `system` follows `prefers-color-scheme`; `data-theme` on an ancestor also works. */
+  colorScheme?: ColorScheme;
+  /** Synchronous `asset://` lookup for renderers. */
+  resolveAssetUrl?: (ref: string) => string | undefined;
+  /** Asset access for exports that run in the browser. */
+  assets?: AssetResolver;
+  /** Formats the server can export, per kind (merged with exporters available in the browser). */
+  exportFormats?: Record<string, readonly string[]>;
+  /** Set false when the app ships `artkitCss` itself. */
+  injectStyles?: boolean;
+  /** CSP nonce for the injected `<style>` elements. */
+  nonce?: string;
+  /**
+   * Inject the embedded Sora font (Mouts design system) when a theme uses it. Default true; set false
+   * when the app already serves Sora (e.g. through @fontsource).
+   */
+  injectFont?: boolean;
+  children?: ReactNode;
+}
+
+type LoadKey = `${'renderer' | 'editor' | 'exporters'}:${string}`;
+
+export function ArtifactProvider(props: ArtifactProviderProps) {
+  const {
+    registry,
+    client,
+    loaders,
+    locale = 'en',
+    messages,
+    colorScheme = 'system',
+    injectStyles = true,
+    injectFont = true,
+    nonce,
+  } = props;
+  const loads = useRef(new Map<LoadKey, Promise<unknown>>());
+  const loadersRef = useRef(loaders);
+  loadersRef.current = loaders;
+
+  const appTheme = useMemo<Theme>(() => {
+    if (typeof props.theme === 'object') return props.theme;
+    if (typeof props.theme === 'string') {
+      const found = props.themes?.find((theme) => theme.id === props.theme);
+      if (found) return found;
+      if (registry.hasTheme(props.theme)) return registry.theme(props.theme);
+    }
+    return registry.hasTheme('default') ? registry.theme('default') : defaultTheme;
+  }, [props.theme, props.themes, registry]);
+
+  const themeList = useMemo(() => {
+    const byId = new Map<string, Theme>();
+    for (const theme of registry.themes()) byId.set(theme.id, theme);
+    for (const theme of props.themes ?? []) byId.set(theme.id, theme);
+    return [...byId.values()];
+  }, [registry, props.themes]);
+
+  const css = useMemo(
+    () => themeStyles(appTheme, themeList, new Map(Object.entries(props.darkThemes ?? {}))),
+    [appTheme, themeList, props.darkThemes],
+  );
+
+  const value = useMemo<ArtkitContextValue>(() => {
+    const byId = new Map(themeList.map((theme) => [theme.id, theme]));
+    function load<T>(type: 'renderer' | 'editor' | 'exporters', kind: string): Promise<T> {
+      const key: LoadKey = `${type}:${kind}`;
+      let promise = loads.current.get(key) as Promise<T> | undefined;
+      if (!promise) {
+        const group =
+          type === 'renderer'
+            ? loadersRef.current?.renderers
+            : type === 'editor'
+              ? loadersRef.current?.editors
+              : loadersRef.current?.exporters;
+        const loader = group?.[kind];
+        promise = loader
+          ? (loader() as Promise<T>)
+          : Promise.reject(new Error(`No ${type} loader registered for kind "${kind}".`));
+        loads.current.set(key, promise);
+      }
+      return promise;
+    }
+    return {
+      registry,
+      client,
+      cache: cacheFor(client),
+      locale,
+      t: createTranslator(locale, messages),
+      appTheme,
+      colorScheme,
+      themeFor: (themeId) => (themeId ? byId.get(themeId) : undefined) ?? appTheme,
+      ...(props.resolveAssetUrl ? { resolveAssetUrl: props.resolveAssetUrl } : {}),
+      ...(props.assets ? { assets: props.assets } : {}),
+      exportFormats: props.exportFormats ?? {},
+      hasRenderer: (kind) => Boolean(loadersRef.current?.renderers?.[kind]),
+      hasEditor: (kind) => Boolean(loadersRef.current?.editors?.[kind]),
+      hasExporters: (kind) => Boolean(loadersRef.current?.exporters?.[kind]),
+      loadRenderer: (kind) => load<RendererModule>('renderer', kind),
+      loadEditor: (kind) => load<EditorModule>('editor', kind),
+      loadExporters: (kind) => load('exporters', kind),
+      resetLoad: (type, kind) => {
+        loads.current.delete(`${type}:${kind}`);
+      },
+      ...(nonce ? { nonce } : {}),
+    };
+  }, [
+    registry,
+    client,
+    locale,
+    messages,
+    appTheme,
+    colorScheme,
+    themeList,
+    props.resolveAssetUrl,
+    props.assets,
+    props.exportFormats,
+    nonce,
+  ]);
+
+  return (
+    <ArtkitContext.Provider value={value}>
+      {injectStyles ? (
+        <>
+          {injectFont && usesSora(appTheme, themeList) ? (
+            <style href="artkit-font-sora" precedence="artkit" nonce={nonce}>
+              {soraFontFaceCss()}
+            </style>
+          ) : null}
+          <style href="artkit-base" precedence="artkit" nonce={nonce}>
+            {artkitCss}
+          </style>
+          <style href={`artkit-theme-${hashString(css)}`} precedence="artkit" nonce={nonce}>
+            {css}
+          </style>
+        </>
+      ) : null}
+      {props.children}
+    </ArtkitContext.Provider>
+  );
+}
+
+function usesSora(appTheme: Theme, themes: Theme[]): boolean {
+  return [appTheme, ...themes].some((theme) =>
+    [theme.fonts.heading, theme.fonts.body].some((font) => font.trim().toLowerCase() === 'sora'),
+  );
+}