Rendering System

import type { RenderFamily } from "@sprinterai/core";

const family: RenderFamily = "card";

// Custom card for "opportunity" entity type
import type { RendererDescriptor } from "@sprinterai/core";

const opportunityCard: RendererDescriptor = {
  id: "opportunity-card",
  family: "card",
  label: "Opportunity Card",
  match: { entityTypeSlug: "opportunity" },
};

import type { UIIntent } from "@sprinterai/core";

// "Show me opportunities as a kanban board"
const intent: UIIntent = {
  family: "card",
  entityTypeSlug: "opportunity",
  layout: "kanban",
};

// "Show me company details"
const detailIntent: UIIntent = {
  family: "block",
  entityTypeSlug: "company",
  entityId: "uuid-here",
  layout: "bento",
};

// "Show me a revenue chart"
const chartIntent: UIIntent = {
  family: "chart",
  params: { metric: "revenue", groupBy: "sector" },
};

interface RendererDescriptor {
  /** Unique renderer identifier. */
  id: string;
  /** What family of rendering this handles. */
  family: RenderFamily;
  /** Human-readable name for admin UI. */
  label: string;
  /** When this renderer should be used. */
  match?: {
    entityTypeSlug?: string;
    blockType?: string;
    viewLayout?: string;
  };
}

# Install a card component
npx shadcn@latest add https://ui.sprinterai.dev/r/entity-card.json

# Install a chart block
npx shadcn@latest add https://ui.sprinterai.dev/r/chart-block.json

npx shadcn@latest add https://ui.sprinterai.dev/r/render-registry.json

import { FieldInput, FieldDisplay } from "@/blocks/render-registry/field-renderer-dispatch";

// Read-only display
<FieldDisplay
  field={field}
  value={entity[field.key]}
  mode="card"
  context={ctx}
/>

// Editable input
<FieldInput
  field={field}
  value={formState[field.key]}
  onChange={(next) => setField(field.key, next)}
  mode="full"
  context={ctx}
  error={errors[field.key]}
/>

interface FieldRenderContext {
  surface?: "form" | "bento" | "table" | "card" | "kanban" | "canvas" | "chat";
  viewId?: string;
  entityId?: string;
  isDraft?: boolean;
  /** PATCH-style write sink. The host routes writes through its own transport. */
  onPatch?: (patch: { key: string; value: unknown }) => void;
  /** Upload a File, return the CDN URL. Required for MediaInput file uploads. */
  onUpload?: (file: File) => Promise<string>;
  /** Search related entities by type slug and query string. Required for RelationInput suggestions. */
  onSearchRelations?: (
    typeSlug: string,
    query: string,
  ) => Promise<Array<{ id: string; title: string }>>;
}

// Host wires its own transport
const ctx: FieldRenderContext = {
  surface: "form",
  entityId: entity.id,
  onUpload: async (file) => {
    const { data } = await supabase.storage
      .from("attachments")
      .upload(`${tenantId}/${file.name}`, file);
    return supabase.storage.from("attachments").getPublicUrl(data.path).data.publicUrl;
  },
  onSearchRelations: async (typeSlug, query) => {
    const { data } = await supabase
      .from("entities")
      .select("id, title")
      .eq("entity_type_slug", typeSlug)
      .ilike("title", `%${query}%`)
      .limit(10);
    return data ?? [];
  },
};

<FieldInput field={field} value={value} onChange={onChange} context={ctx} />

interface FieldInputProps<T = unknown> {
  field: FieldDefinition;
  value: T | undefined;
  onChange: (next: T | null | undefined) => void;
  mode?: FieldRenderMode;        // default "full"
  disabled?: boolean;
  error?: string;
  context?: FieldRenderContext;
  onBlur?: () => void;
  onFocus?: () => void;
  name?: string;
}

interface FieldDisplayProps<T = unknown> {
  field: FieldDefinition;
  value: T | undefined;
  mode?: FieldRenderMode;        // default "full"
  context?: FieldRenderContext;
  className?: string;
}

import { FieldDefinitionForm } from "@/blocks/render-registry/field-definition-form";

<FieldDefinitionForm
  initialField={draft}
  onSubmit={(field) => save(field)}
  onCancel={() => setOpen(false)}
  typeSlugOptions={["company", "contact", "deal"]}
/>

// The dispatcher does this automatically — you do not need to pass renderItem yourself
// when using FieldInput / FieldDisplay. This is only relevant if you import
// ArrayInput or ObjectInput directly.
<ArrayInput
  field={arrayField}
  value={values}
  onChange={setValues}
  renderItem={({ field, value, onChange, mode, disabled, context }) => (
    <FieldInput field={field} value={value} onChange={onChange}
                mode={mode} disabled={disabled} context={context} />
  )}
/>