52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 70:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollArea"] 71:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollBar"] 53:T15e7,"use client"; import type { JSONSchema7 } from "json-schema"; import { useForm } from "react-hook-form"; import type { Source } from "@/lib/document-source"; import { FileViewerContent, FileViewerHeader, FileViewer, FileViewerProvider, FileViewerSidebar, FileViewerSidebarContent, FileViewerSidebarSection, FileViewerSidebarSectionContent, FileViewerSidebarSectionHeader, FileViewerSidebarSectionTitle, FileViewerSidebarTrigger, FileViewerInset, FileViewerViewport, } from "@/components/ui/file-viewer"; import { PdfViewerPages, PdfViewerProvider, type PdfDocumentSource, } from "@/components/ui/pdf-viewer"; import { SegmentedDocumentProvider, useSegmentedDocumentViewport, } from "@/components/ui/segmented-document-provider"; import { useSegmentedSourceFieldLink } from "@/components/ui/source-field-link"; import { SourceIndicator } from "@/components/ui/source-indicator"; import { createSourcesSegmentedDocumentModel } from "@/components/ui/source-segmented-document-model"; import { useSegmentedPdfSourceOverlay, useSegmentedPdfViewerHandle, } from "@/components/ui/source-segmented-document-overlays"; import { JsonForm } from "@/components/json-form/json-form"; import extractSample from "@/components/viewers/sample-data/extract.json"; const PDF_URL = "/samples/jane-doe-bank-statement-5-pages.pdf"; type ExtractField = { key: string; label: string; value: string; /** Where this value was found in the document (its source). */ source: Source; }; // Extracted values from the bank-statement sample with true text coordinates // (normalized pdf_bbox anchors), so each field's source highlight lands on the page. const FIELDS = extractSample as ExtractField[]; const schema: JSONSchema7 = { type: "object", properties: Object.fromEntries( FIELDS.map((field) => [ field.key, { type: "string", title: field.label, }, ]), ), }; const defaultValues = Object.fromEntries( FIELDS.map((field) => [field.key, field.value]), ) as Record; const PDF_SOURCE: PdfDocumentSource = { kind: "url", url: PDF_URL, fileName: "jane-doe-bank-statement-5-pages.pdf", }; const SOURCE_FIELDS = FIELDS.map((field) => ({ id: field.key, label: field.label, source: field.source, })); const SEGMENTED_DOCUMENT = createSourcesSegmentedDocumentModel(SOURCE_FIELDS); /** * Extract viewer block — extracted fields beside the source document, linked by * their sources. Hovering or selecting a field highlights where its value came * from in the PDF and scrolls it into view; selection persists, hover previews. * * A thin composition over the segmented-document abstraction: `JsonForm` is the * emitter, the segmented provider owns hover/selection and the PDF pages * register their document handle for navigation. */ export function ExtractViewerBlock() { return ( ); } function ExtractViewerContent() { const link = useSegmentedSourceFieldLink({ initialSourcePath: FIELDS[0]?.key, }); const setPdfViewerHandle = useSegmentedPdfViewerHandle(); const renderPageOverlay = useSegmentedPdfSourceOverlay(link); const { documentHandlers } = useSegmentedDocumentViewport(); const form = useForm>({ defaultValues }); return (

Extracted data

{FIELDS.length} fields Source fields ); } 54:T77a,[ { "key": "accountNumber", "label": "Account number", "value": "000009752", "source": { "content": "000009752", "anchor": { "kind": "pdf_bbox", "page": 1, "left": 0.8111, "top": 0.1772, "width": 0.0736, "height": 0.0127 } } }, { "key": "statementDate", "label": "Statement date", "value": "July 8, 2003", "source": { "content": "July 8, 2003", "anchor": { "kind": "pdf_bbox", "page": 1, "left": 0.8021, "top": 0.1933, "width": 0.0826, "height": 0.0127 } } }, { "key": "beginningBalance", "label": "Beginning balance", "value": "$10,959.87", "source": { "content": "$10,959.87", "anchor": { "kind": "pdf_bbox", "page": 1, "left": 0.8136, "top": 0.2964, "width": 0.0675, "height": 0.0116 } } }, { "key": "endingBalance", "label": "Ending balance", "value": "$6,046.95", "source": { "content": "$6,046.95", "anchor": { "kind": "pdf_bbox", "page": 1, "left": 0.8211, "top": 0.3466, "width": 0.06, "height": 0.0116 } } }, { "key": "totalDeposits", "label": "Total deposits & credits", "value": "$2,670.93", "source": { "content": "+2,670.93", "anchor": { "kind": "pdf_bbox", "page": 1, "left": 0.8207, "top": 0.3116, "width": 0.0603, "height": 0.0116 } } }, { "key": "atmWithdrawal", "label": "ATM withdrawal", "value": "$69.01", "source": { "content": "$69.01", "anchor": { "kind": "pdf_bbox", "page": 1, "left": 0.715, "top": 0.4839, "width": 0.0412, "height": 0.0116 } } } ] 55:T2188,"use client"; import * as React from "react"; import { Plus, X } from "lucide-react"; import { useFieldArray, useFormContext, useWatch } from "react-hook-form"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { DisclosureHeader } from "@/components/json-form/disclosure"; import type { RenderJsonFormField } from "@/components/json-form/field-renderer"; import { AUTO_COLLAPSE_DEPTH, CARD_VIRTUALIZE_THRESHOLD, LONG_ARRAY_THRESHOLD, } from "@/components/json-form/json-form-constants"; import { useJsonFormStartsOpen } from "@/components/json-form/open-paths"; import { emptyArrayItemFormValue, joinJsonFormPath, joinJsonSourcePath, } from "@/components/json-form/path-codec"; import type { JsonFormTextInput } from "@/components/json-form/scalar-control"; import { arrayItemSchemaAt, canAppendArrayItem, canRemoveArrayItem, hasDynamicObjectProperties, scalarObjectColumns, type Schema, } from "@/components/json-form/schema-model"; import { ArrayTable } from "@/components/json-form/table/array-table"; import { VirtualList } from "@/components/json-form/virtual-list"; export function JsonFormArray({ name, sourcePath, schema, label, textInput, className, depth, renderField, }: { name: string; sourcePath: string; schema: Schema; label: string; textInput?: JsonFormTextInput; className?: string; depth: number; renderField: RenderJsonFormField; }) { const { control, getValues, setValue, unregister } = useFormContext(); const { fields, append, remove } = useFieldArray({ control, name }); const arrayValue = useWatch({ control, name }); const renderedFields = React.useMemo(() => { // react-hook-form's useFieldArray compacts falsy primitive items (false, // 0, "") out of `fields`, so derive the rendered item count from the // watched array value instead of the compacted field list. if (!Array.isArray(arrayValue)) { return fields.map((field, index) => ({ id: field.id ?? `${name}.${index}`, })); } return arrayValue.map((_, index) => ({ id: fields[index]?.id ?? `${name}.${index}`, })); }, [arrayValue, fields, name]); const itemSchema = React.useMemo( () => arrayItemSchemaAt(schema, 0), [schema], ); const isTupleArray = Array.isArray(schema.items); const hasDynamicItemProperties = React.useMemo( () => hasDynamicObjectProperties(itemSchema), [itemSchema], ); const itemSchemaForIndex = React.useCallback( (index: number) => arrayItemSchemaAt(schema, index), [schema], ); const columns = React.useMemo( () => isTupleArray || hasDynamicItemProperties ? null : scalarObjectColumns(itemSchema), [hasDynamicItemProperties, isTupleArray, itemSchema], ); const startsOpen = useJsonFormStartsOpen( sourcePath, depth < AUTO_COLLAPSE_DEPTH && renderedFields.length <= LONG_ARRAY_THRESHOLD, ); const [open, setOpen] = React.useState(startsOpen); const canAddItem = canAppendArrayItem(schema, renderedFields.length); const canRemoveItem = canRemoveArrayItem(schema, renderedFields.length); const add = React.useCallback(() => { const current = getValues(name); const nextIndex = Array.isArray(current) ? current.length : renderedFields.length; if (!canAppendArrayItem(schema, nextIndex)) return; const nextSchema = arrayItemSchemaAt(schema, nextIndex); const nextItem = emptyArrayItemFormValue(nextSchema); append(nextItem as never); if (Array.isArray(current)) { setValue(name, [...current, nextItem], { shouldDirty: true }); } setOpen(true); }, [append, getValues, name, renderedFields.length, schema, setValue]); const removeAt = React.useCallback( (index: number) => { const current = getValues(name); if (Array.isArray(current)) { if (!canRemoveArrayItem(schema, current.length)) return; const next = current.slice(); next.splice(index, 1); remove(index); setValue(name, next, { shouldDirty: true }); unregister(`${name}.${next.length}`); return; } if (!canRemoveArrayItem(schema, renderedFields.length)) return; remove(index); }, [ getValues, name, remove, renderedFields.length, schema, setValue, unregister, ], ); return (

setOpen((o) => !o)} title={label} summary={`${renderedFields.length} item${renderedFields.length === 1 ? "" : "s"}`} description={schema.description} actions={ } /> {open ? (

{renderedFields.length === 0 ? (

No items.

) : columns ? ( ) : ( )}

) : null}

); } interface ArrayCardsProps { name: string; sourcePath: string; fields: { id: string }[]; remove: (index: number) => void; canRemove: boolean; itemSchemaForIndex: (index: number) => Schema; label: string; textInput?: JsonFormTextInput; depth: number; renderField: RenderJsonFormField; } function ArrayCards({ name, sourcePath, fields, remove, canRemove, itemSchemaForIndex, label, textInput, depth, renderField, }: ArrayCardsProps) { const renderCard = React.useCallback( (index: number) => ( ), [ name, sourcePath, remove, canRemove, itemSchemaForIndex, label, textInput, depth, renderField, ], ); if (fields.length > CARD_VIRTUALIZE_THRESHOLD) { return ( ); } return (

{fields.map((entry, index) => ( {renderCard(index)} ))}

); } const ArrayCard = React.memo(function ArrayCard({ name, sourcePath, index, remove, canRemove, itemSchema, label, textInput, depth, renderField, }: { name: string; sourcePath: string; index: number; remove: (index: number) => void; canRemove: boolean; itemSchema: Schema; label: string; textInput?: JsonFormTextInput; depth: number; renderField: RenderJsonFormField; }) { return (

{renderField({ name: joinJsonFormPath(name, index), sourcePath: joinJsonSourcePath(sourcePath, index), schema: itemSchema, label: `${label} ${index + 1}`, textInput, depth: depth + 1, })}

); }); 56:T709,"use client"; import * as React from "react"; import { ChevronRight } from "lucide-react"; import { cn } from "@/lib/utils"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; /** * Wraps a label element so a field description shows as a hover tooltip on the * label itself rather than a body-text block that changes row height. */ export function WithDescription({ text, children, }: { text?: string; children: React.ReactElement; }) { if (!text) return children; return ( {children} {text} ); } export function DisclosureHeader({ open, onToggle, title, summary, description, actions, }: { open: boolean; onToggle: () => void; title: string; summary?: string; description?: string; actions?: React.ReactNode; }) { return (

{actions}

); } 57:T153a,"use client"; import * as React from "react"; import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; import * as LabelPrimitive from "@radix-ui/react-label"; import { Slot } from "@radix-ui/react-slot"; import { CheckIcon } from "lucide-react"; import { Controller, FormProvider, useFormContext, useFormState, type ControllerProps, type FieldPath, type FieldValues, } from "react-hook-form"; import { cn } from "@/lib/utils"; export const Form = FormProvider; type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, > = { name: TName; }; const FormFieldContext = React.createContext( null, ); export function FormField< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, >(props: ControllerProps) { return ( ); } type FormItemContextValue = { id: string; }; const FormItemContext = React.createContext(null); function useFormField() { const fieldContext = React.useContext(FormFieldContext); const itemContext = React.useContext(FormItemContext); const { getFieldState } = useFormContext(); if (!fieldContext) { throw new Error("useFormField should be used within "); } if (!itemContext) { throw new Error("useFormField should be used within "); } const formState = useFormState({ name: fieldContext.name }); const fieldState = getFieldState(fieldContext.name, formState); const { id } = itemContext; return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, }; } export function FormItem({ className, ...props }: React.ComponentProps<"div">) { const id = React.useId(); return (

); } export function FormLabel({ className, ...props }: React.ComponentProps) { const { error, formItemId } = useFormField(); return ( ); } export function FormControl(props: React.ComponentProps) { const { error, formItemId, formDescriptionId, formMessageId } = useFormField(); const { children, ...controlProps } = props; const fieldProps = { "data-slot": "form-control", id: formItemId, "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`, "aria-invalid": !!error, ...controlProps, }; if (React.isValidElement(children)) { return React.cloneElement( children as React.ReactElement>, fieldProps, ); } return ; } export function FormMessage({ className, ...props }: React.ComponentProps<"p">) { const { error, formMessageId } = useFormField(); const body = error ? String(error.message ?? "") : props.children; if (!body) return null; return (

{body}

); } export function Checkbox({ className, ...props }: React.ComponentProps) { return ( ); } export function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { return (

);
}
58:T2743,"use client";

import * as React from "react";
import { type SubmitHandler, type UseFormReturn } from "react-hook-form";

import { cn } from "@/lib/utils";
import { JsonFormArray } from "@/components/json-form/array-fields";
import { WithDescription } from "@/components/json-form/disclosure";
import type { JsonFormFieldRenderProps } from "@/components/json-form/field-renderer";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/json-form/form-primitives";
import {
  JsonFormObject,
  JsonFormRootFields,
} from "@/components/json-form/object-fields";
import { JsonFormOpenPathsContext } from "@/components/json-form/open-paths";
import {
  decodeJsonFormValue,
  encodeJsonFormValue,
  schemaNeedsJsonFormPathEncoding,
} from "@/components/json-form/path-codec";
import {
  BooleanControl,
  NullableBooleanControl,
  ScalarControl,
  type JsonFormTextInput,
} from "@/components/json-form/scalar-control";
import {
  expandRefs,
  fieldKind,
  labelFor,
  unwrapNullable,
  type Schema,
} from "@/components/json-form/schema-model";
import {
  JsonFormSourceLinkProvider,
  SourceLinkShell,
  type JsonFormSourceLink,
} from "@/components/json-form/source-link";
import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";
import { joinEffectKey } from "@/lib/effect-key";

export type { JsonFormTextInput } from "@/components/json-form/scalar-control";

/**
 * A JSON-Schema-driven form built entirely on shadcn's `FormField` abstraction.
 *
 * Each schema property is rendered through `<FormField>` →
 * `<FormItem>/<FormLabel>/<FormControl>/<FormDescription>/<FormMessage>`, so it
 * inherits shadcn's react-hook-form wiring, accessibility, and error display
 * with zero bespoke styling. Objects nest, arrays repeat, and scalars map to the
 * matching control. Drop it inside your own `useForm()` instance.
 *
 * Built to scale to deep, repetitive documents (e.g. an extraction with
 * `properties[] → production[] → line_items[]`):
 *
 *  - **Lazy mount.** Nested objects and arrays are collapsible; their children
 *    are only mounted in the DOM while expanded, so a 5,000-field tree boots as
 *    a handful of summary rows.
 *  - **Table mode.** An array whose items are flat objects of scalars renders as
 *    a dense editable table (one row per item, one column per field) instead of
 *    a stack of bordered cards.
 *  - **Virtualization.** Long arrays (card *or* table mode) window their rows
 *    through local row virtualizers, so only the visible items are in the DOM.
 *  - **Isolated re-renders.** Each row subscribes to its own field state, so a
 *    keystroke in one item never re-renders its siblings.
 */

// ---------------------------------------------------------------------------
// JsonFormField — the unit of composition
// ---------------------------------------------------------------------------

export type JsonFormFieldProps = JsonFormFieldRenderProps;

export function JsonFormField({
  name,
  sourcePath,
  schema: rawSchema,
  required = false,
  label,
  textInput,
  className,
  depth = 0,
}: JsonFormFieldProps) {
  const expandedSchema = React.useMemo(
    () => expandRefs(rawSchema),
    [rawSchema],
  );
  const { schema, nullable } = unwrapNullable(expandedSchema);
  const kind = fieldKind(schema);
  const heading = labelFor(name, schema, label);
  const resolvedSourcePath = sourcePath ?? name;

if (kind === "object") {
    return (
      <JsonFormObject
        name={name}
        sourcePath={resolvedSourcePath}
        schema={schema}
        label={heading}
        textInput={textInput}
        className={className}
        depth={depth}
        renderField={renderJsonFormField}
      />
    );
  }

if (kind === "array") {
    return (
      <JsonFormArray
        name={name}
        sourcePath={resolvedSourcePath}
        schema={schema}
        label={heading}
        textInput={textInput}
        className={className}
        depth={depth}
        renderField={renderJsonFormField}
      />
    );
  }

if (kind === "boolean") {
    if (nullable) {
      return (
        <SourceLinkShell sourcePath={resolvedSourcePath}>
          <FormField
            name={name}
            render={({ field }) => (
              <FormItem className={className}>
                <WithDescription text={schema.description}>
                  <FormLabel>
                    {heading}
                    {required ? (
                      <span className="text-destructive"> *</span>
                    ) : null}
                  </FormLabel>
                </WithDescription>
                <FormControl>
                  <NullableBooleanControl
                    field={field}
                    label={`${heading}${required ? " *" : ""}`}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </SourceLinkShell>
      );
    }

return (
      <SourceLinkShell sourcePath={resolvedSourcePath}>
        <FormField
          name={name}
          render={({ field }) => (
            <FormItem className={className}>
              <WithDescription text={schema.description}>
                <FormLabel>
                  {heading}
                  {required ? (
                    <span className="text-destructive"> *</span>
                  ) : null}
                </FormLabel>
              </WithDescription>
              <FormControl>
                <BooleanControl
                  field={field}
                  label={`${heading}${required ? " *" : ""}`}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </SourceLinkShell>
    );
  }

return (
    <SourceLinkShell sourcePath={resolvedSourcePath}>
      <FormField
        name={name}
        render={({ field }) => (
          <FormItem className={className}>
            <WithDescription text={schema.description}>
              <FormLabel>
                {heading}
                {required ? <span className="text-destructive"> *</span> : null}
              </FormLabel>
            </WithDescription>
            <FormControl>
              <ScalarControl
                kind={kind}
                schema={schema}
                field={field}
                textInput={textInput}
                nullable={nullable}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </SourceLinkShell>
  );
}

function renderJsonFormField(props: JsonFormFieldRenderProps) {
  return <JsonFormField {...props} />;
}

// ---------------------------------------------------------------------------
// JsonForm — convenience wrapper over a whole schema
// ---------------------------------------------------------------------------

export interface JsonFormProps {
  form: UseFormReturn<Record<string, unknown>>;
  schema: Schema;
  onSubmit?: SubmitHandler<Record<string, unknown>>;
  className?: string;
  /** Force plain string fields to render as single-line inputs or textareas. */
  textInput?: JsonFormTextInput;
  /**
   * Opt into field-level source linking. When set, every scalar field becomes a
   * hoverable card that reports its path and highlights when active — wire it
   * straight from a source field link.
   */
  sourceLink?: JsonFormSourceLink;
  /**
   * Source/logical paths that should start expanded. Intended for controlled
   * demos and benchmarks that need a deep virtualized body mounted immediately.
   */
  defaultOpenPaths?: readonly string[];
  /** Rendered after the fields, e.g. a submit button. */
  children?: React.ReactNode;
}

export function JsonForm({
  form,
  schema,
  onSubmit,
  className,
  textInput,
  sourceLink,
  defaultOpenPaths,
  children,
}: JsonFormProps) {
  const expandedSchema = React.useMemo(() => expandRefs(schema), [schema]);
  const usesEncodedPaths = React.useMemo(
    () => schemaNeedsJsonFormPathEncoding(expandedSchema),
    [expandedSchema],
  );
  const defaultOpenPathSet = React.useMemo(
    () =>
      defaultOpenPaths && defaultOpenPaths.length > 0
        ? new Set(defaultOpenPaths)
        : null,
    [defaultOpenPaths],
  );
  const hasEncodedInitialValuesRef = React.useRef(false);

useKeyedMountEffect(
    joinEffectKey([expandedSchema, form, usesEncodedPaths]),
    () => {
      if (!usesEncodedPaths || hasEncodedInitialValuesRef.current) {
        return;
      }
      hasEncodedInitialValuesRef.current = true;
      form.reset(
        encodeJsonFormValue(expandedSchema, form.getValues()) as Record<
          string,
          unknown
        >,
      );
    },
  );

return (
    <JsonFormSourceLinkProvider sourceLink={sourceLink}>
      <JsonFormOpenPathsContext.Provider value={defaultOpenPathSet}>
        <Form {...form}>
          <form onSubmit={handleSubmit} className={cn("space-y-4", className)}>
            <JsonFormRootFields
              schema={expandedSchema}
              textInput={textInput}
              renderField={renderJsonFormField}
            />
            {children}
          </form>
        </Form>
      </JsonFormOpenPathsContext.Provider>
    </JsonFormSourceLinkProvider>
  );
}
59:T12ff,"use client";

import * as React from "react";
import { useFormContext, useWatch } from "react-hook-form";

import { cn } from "@/lib/utils";
import { DisclosureHeader } from "@/components/json-form/disclosure";
import type { RenderJsonFormField } from "@/components/json-form/field-renderer";
import { AUTO_COLLAPSE_DEPTH } from "@/components/json-form/json-form-constants";
import { useJsonFormStartsOpen } from "@/components/json-form/open-paths";
import {
  dynamicPropertyEntries,
  joinJsonFormPath,
  joinJsonSourcePath,
  staticPropertyKeys,
} from "@/components/json-form/path-codec";
import type { JsonFormTextInput } from "@/components/json-form/scalar-control";
import {
  labelFor,
  schemaProperties,
  type Schema,
} from "@/components/json-form/schema-model";

export function JsonFormObject({
  name,
  sourcePath,
  schema,
  label,
  textInput,
  className,
  depth,
  renderField,
}: {
  name: string;
  sourcePath: string;
  schema: Schema;
  label: string;
  textInput?: JsonFormTextInput;
  className?: string;
  depth: number;
  renderField: RenderJsonFormField;
}) {
  const { control, getValues } = useFormContext();
  const properties = React.useMemo(() => schemaProperties(schema), [schema]);
  const required = React.useMemo(
    () => new Set(schema.required ?? []),
    [schema],
  );
  const entries = React.useMemo(() => Object.entries(properties), [properties]);
  const currentValue = useWatch({
    control,
    name,
    defaultValue: getValues(name),
  }) as unknown;
  const staticKeys = React.useMemo(() => staticPropertyKeys(schema), [schema]);
  const dynamicEntries = React.useMemo(
    () => dynamicPropertyEntries(schema, currentValue, staticKeys),
    [currentValue, schema, staticKeys],
  );
  const fieldCount = entries.length + dynamicEntries.length;
  const startsOpen = useJsonFormStartsOpen(
    sourcePath,
    depth < AUTO_COLLAPSE_DEPTH,
  );
  const [open, setOpen] = React.useState(startsOpen);

return (
    <div className={cn("rounded-lg border", className)}>
      <DisclosureHeader
        open={open}
        onToggle={() => setOpen((o) => !o)}
        title={label}
        summary={`${fieldCount} field${fieldCount === 1 ? "" : "s"}`}
        description={schema.description}
      />
      {open ? (
        <div className="space-y-3 border-t p-3">
          {entries.map(([key, child]) =>
            typeof child === "object" ? (
              <React.Fragment key={key}>
                {renderField({
                  name: joinJsonFormPath(name, key),
                  sourcePath: joinJsonSourcePath(sourcePath, key),
                  schema: child,
                  required: required.has(key),
                  label: labelFor(key, child),
                  textInput,
                  depth: depth + 1,
                })}
              </React.Fragment>
            ) : null,
          )}
          {dynamicEntries.map(({ key, schema: child }) => (
            <React.Fragment key={key}>
              {renderField({
                name: joinJsonFormPath(name, key),
                sourcePath: joinJsonSourcePath(sourcePath, key),
                schema: child,
                label: key,
                textInput,
                depth: depth + 1,
              })}
            </React.Fragment>
          ))}
        </div>
      ) : null}
    </div>
  );
}

export function JsonFormRootFields({
  schema,
  textInput,
  renderField,
}: {
  schema: Schema;
  textInput?: JsonFormTextInput;
  renderField: RenderJsonFormField;
}) {
  const { control, getValues } = useFormContext();
  const properties = schemaProperties(schema);
  const required = new Set(schema.required ?? []);
  const entries = Object.entries(properties);
  const currentValue = useWatch({
    control,
    defaultValue: getValues(),
  }) as unknown;
  const staticKeys = React.useMemo(() => staticPropertyKeys(schema), [schema]);
  const dynamicEntries = React.useMemo(
    () => dynamicPropertyEntries(schema, currentValue, staticKeys),
    [currentValue, schema, staticKeys],
  );

return (
    <>
      {entries.map(([key, child]) =>
        typeof child === "object" ? (
          <React.Fragment key={key}>
            {renderField({
              name: joinJsonFormPath("", key),
              sourcePath: key,
              schema: child,
              required: required.has(key),
              label: labelFor(key, child),
              textInput,
              depth: 0,
            })}
          </React.Fragment>
        ) : null,
      )}
      {dynamicEntries.map(({ key, schema: child }) => (
        <React.Fragment key={key}>
          {renderField({
            name: joinJsonFormPath("", key),
            sourcePath: key,
            schema: child,
            label: key,
            textInput,
            depth: 0,
          })}
        </React.Fragment>
      ))}
    </>
  );
}
5a:T1911,import {
  arrayItemSchemaAt,
  dynamicPropertySchemaFor,
  emptyValueFor,
  fieldKind,
  isRecordValue,
  schemaPatternProperties,
  schemaProperties,
  unwrapNullable,
  type Schema,
} from "@/components/json-form/schema-model";

export function encodeJsonFormKey(segment: string): string {
  return encodeURIComponent(segment)
    .replace(
      /[!'()*]/g,
      (char) => `%${char.charCodeAt(0).toString(16).toUpperCase()}`,
    )
    .replace(
      /[.[\]'"]/g,
      (char) => `%${char.charCodeAt(0).toString(16).toUpperCase()}`,
    );
}

export function decodeJsonFormKey(segment: string): string {
  try {
    return decodeURIComponent(segment);
  } catch {
    return segment;
  }
}

export function joinJsonFormPath(parent: string, key: string | number): string {
  const segment =
    typeof key === "number" ? String(key) : encodeJsonFormKey(key);
  return parent ? `${parent}.${segment}` : segment;
}

export function joinJsonSourcePath(
  parent: string,
  key: string | number,
): string {
  const segment = String(key);
  return parent ? `${parent}.${segment}` : segment;
}

export function staticPropertyKeys(schema: Schema): Set<string> {
  return new Set(
    Object.keys(schemaProperties(schema)).flatMap((key) => [
      key,
      encodeJsonFormKey(key),
    ]),
  );
}

export function dynamicPropertyEntries(
  schema: Schema,
  currentValue: unknown,
  staticKeys: Set<string>,
): Array<{ key: string; schema: Schema }> {
  if (!isRecordValue(currentValue)) return [];
  return Object.keys(currentValue).flatMap((key) => {
    if (staticKeys.has(key)) return [];
    const decodedKey = decodeJsonFormKey(key);
    if (staticKeys.has(decodedKey)) return [];
    const childSchema = dynamicPropertySchemaFor(schema, decodedKey);
    return childSchema ? [{ key: decodedKey, schema: childSchema }] : [];
  });
}

export function schemaNeedsJsonFormPathEncoding(schema: Schema): boolean {
  const { schema: inner } = unwrapNullable(schema);
  const kind = fieldKind(inner);
  if (kind === "object") {
    const properties = schemaProperties(inner);
    const patternProperties = schemaPatternProperties(inner);
    return (
      isRecordValue(inner.additionalProperties) ||
      Object.values(patternProperties).some(isRecordValue) ||
      Object.entries(properties).some(([key, child]) => {
        return (
          encodeJsonFormKey(key) !== key ||
          (typeof child === "object" &&
            child !== null &&
            schemaNeedsJsonFormPathEncoding(child))
        );
      })
    );
  }
  if (kind === "array" && typeof inner.items === "object" && inner.items) {
    if (Array.isArray(inner.items)) {
      return inner.items.some((item) =>
        isRecordValue(item)
          ? schemaNeedsJsonFormPathEncoding(item as Schema)
          : false,
      );
    }
    return schemaNeedsJsonFormPathEncoding(inner.items as Schema);
  }
  return false;
}

export function encodeJsonFormValue(schema: Schema, value: unknown): unknown {
  const { schema: inner } = unwrapNullable(schema);
  const kind = fieldKind(inner);

if (kind === "array") {
    if (!Array.isArray(value)) return value;
    return value.map((item, index) =>
      encodeJsonFormValue(arrayItemSchemaAt(inner, index), item),
    );
  }

if (kind !== "object" || !isRecordValue(value)) return value;

export function decodeJsonFormValue(schema: Schema, value: unknown): unknown {
  const { schema: inner } = unwrapNullable(schema);
  const kind = fieldKind(inner);

if (kind === "array") {
    if (!Array.isArray(value)) return value;
    return value.map((item, index) =>
      decodeJsonFormValue(arrayItemSchemaAt(inner, index), item),
    );
  }

if (kind !== "object" || !isRecordValue(value)) return value;

export function emptyArrayItemFormValue(schema: Schema): unknown {
  const { schema: inner, nullable } = unwrapNullable(schema);
  if (nullable) return null;
  if (fieldKind(inner) !== "object") return emptyValueFor(inner);

const value: Record<string, unknown> = {};
  const shouldEncodeKeys = schemaNeedsJsonFormPathEncoding(inner);
  for (const [key, child] of Object.entries(schemaProperties(inner))) {
    if (typeof child === "object" && child !== null) {
      value[shouldEncodeKeys ? encodeJsonFormKey(key) : key] =
        emptyValueFor(child);
    }
  }
  return value;
}
5b:T93d,"use client";

import {
  BooleanControl,
  NullableBooleanControl,
} from "@/components/json-form/scalar/boolean-control";
import {
  datetimeLocalInputValue,
  DateTimeScalarControl,
} from "@/components/json-form/scalar/date-time-control";
import {
  EnumControl,
  enumLabel,
  enumValueEquals,
} from "@/components/json-form/scalar/enum-control";
import {
  dataCellNumberValue,
  NumberControl,
} from "@/components/json-form/scalar/number-control";
import {
  dataCellTextValue,
  TextControl,
} from "@/components/json-form/scalar/text-control";
import type {
  ControlFieldApi,
  DateTimeControlKind,
  JsonFormTextInput,
  ScalarControlDomProps,
} from "@/components/json-form/scalar/types";
import type { FieldKind, Schema } from "@/components/json-form/schema-model";

export type {
  ControlFieldApi,
  JsonFormTextInput,
  ScalarControlDomProps,
} from "@/components/json-form/scalar/types";
export {
  BooleanControl,
  dataCellNumberValue,
  dataCellTextValue,
  datetimeLocalInputValue,
  enumLabel,
  enumValueEquals,
  NullableBooleanControl,
};

export function ScalarControl({
  kind,
  schema,
  field,
  textInput,
  compact = false,
  nullable = false,
  ...controlProps
}: {
  kind: FieldKind;
  schema: Schema;
  field: ControlFieldApi;
  textInput?: JsonFormTextInput;
  /** Dense, single-line variant for table cells. */
  compact?: boolean;
  nullable?: boolean;
} & ScalarControlDomProps) {
  if (kind === "enum") {
    return (
      <EnumControl
        {...controlProps}
        schema={schema}
        field={field}
        compact={compact}
        nullable={nullable}
      />
    );
  }

if (kind === "number" || kind === "integer") {
    return (
      <NumberControl
        {...controlProps}
        kind={kind}
        field={field}
        compact={compact}
        nullable={nullable}
      />
    );
  }

if (
    schema.format === "date" ||
    schema.format === "time" ||
    schema.format === "date-time"
  ) {
    return (
      <DateTimeScalarControl
        {...controlProps}
        kind={schema.format as DateTimeControlKind}
        field={field}
        compact={compact}
        nullable={nullable}
      />
    );
  }

return (
    <TextControl
      {...controlProps}
      schema={schema}
      field={field}
      textInput={textInput}
      compact={compact}
      nullable={nullable}
    />
  );
}
5c:T71e,"use client";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/json-form/form-primitives";
import { NULL_SELECT_VALUE } from "@/components/json-form/scalar/enum-control";
import {
  type ControlFieldApi,
  type ScalarControlDomProps,
} from "@/components/json-form/scalar/types";

export function BooleanControl({
  field,
  label,
}: {
  field: ControlFieldApi;
  label: string;
}) {
  return (
    <Checkbox
      checked={Boolean(field.value)}
      aria-label={label}
      onCheckedChange={(value) => field.onChange(value === true)}
      onBlur={field.onBlur}
    />
  );
}

export function NullableBooleanControl({
  field,
  label,
  ...controlProps
}: {
  field: ControlFieldApi;
  label: string;
} & ScalarControlDomProps) {
  const selectValue =
    field.value === true
      ? "true"
      : field.value === false
        ? "false"
        : NULL_SELECT_VALUE;
  const displayValue =
    field.value === true
      ? "True"
      : field.value === false
        ? "False"
        : "No value";

return (
    <Select
      value={selectValue}
      onValueChange={(value) => {
        if (value === "true") {
          field.onChange(true);
          return;
        }
        if (value === "false") {
          field.onChange(false);
          return;
        }
        field.onChange(null);
      }}
    >
      <SelectTrigger {...controlProps} aria-label={label}>
        <SelectValue placeholder="Select...">{displayValue}</SelectValue>
      </SelectTrigger>
      <SelectContent>
        <SelectItem value={NULL_SELECT_VALUE}>No value</SelectItem>
        <SelectItem value="true">True</SelectItem>
        <SelectItem value="false">False</SelectItem>
      </SelectContent>
    </Select>
  );
}
5d:T1f42,"use client";

import * as React from "react";
import { CalendarIcon, ClockIcon } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  DataCell,
  formatDataCellDisplayValue,
} from "@/components/ui/data-cell";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  compactJsonFormDataCellClass,
  type ControlFieldApi,
  type DateTimeControlKind,
  type ScalarControlDomProps,
} from "@/components/json-form/scalar/types";

export function datetimeLocalInputValue(value: string): string {
  const withoutTimezone = value.trim().replace(/(?:Z|[+-]\d{2}:\d{2})$/, "");
  return withoutTimezone.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/)?.[0] ?? value;
}

export function DateTimeScalarControl({
  kind,
  field,
  compact,
  nullable,
  ...controlProps
}: {
  kind: DateTimeControlKind;
  field: ControlFieldApi;
  compact: boolean;
  nullable: boolean;
} & ScalarControlDomProps) {
  const value = field.value == null ? "" : String(field.value);
  if (!compact) {
    return (
      <DateTimePickerControl
        {...controlProps}
        kind={kind}
        field={field}
        nullable={nullable}
      />
    );
  }

return (
    <DataCell
      {...controlProps}
      kind={kind}
      active
      value={field.value == null ? null : value}
      dateTimeZone={kind === "date-time" ? "preserve" : undefined}
      draftValue={kind === "date-time" ? datetimeLocalInputValue(value) : value}
      className={compactJsonFormDataCellClass}
      onDraftValueChange={(nextValue) =>
        field.onChange(nextValue === "" && nullable ? null : nextValue)
      }
      onCommit={(nextValue) =>
        field.onChange(nextValue === "" && nullable ? null : nextValue)
      }
      onBlur={field.onBlur}
      name={field.name}
    />
  );
}

function pickerPlaceholder(kind: DateTimeControlKind): string {
  if (kind === "time") return "Pick a time";
  if (kind === "date-time") return "Pick a date and time";
  return "Pick a date";
}

function pickerTime(kind: DateTimeControlKind, value: string): string {
  if (kind === "date") return "";
  return value.match(/\d{2}:\d{2}(?::\d{2})?/)?.[0] ?? "";
}

function DateTimePickerControl({
  kind,
  field,
  nullable,
  ...controlProps
}: {
  kind: DateTimeControlKind;
  field: ControlFieldApi;
  nullable: boolean;
} & ScalarControlDomProps) {
  const [open, setOpen] = React.useState(false);
  const value = field.value == null ? "" : String(field.value);
  const pickerValue = pickerEditValue(kind, value);
  const selectedDate = pickerDate(kind, pickerValue);
  const timeValue = pickerTime(kind, pickerValue);
  const displayValue = formatDataCellDisplayValue(kind, value);
  const isEmpty = displayValue === "";

const commitPickerValue = (nextValue: string) => {
    field.onChange(nextValue === "" && nullable ? null : nextValue);
  };

const setDate = (date: Date) => {
    const nextValue = pickerValueWithDate(kind, pickerValue, date);
    commitPickerValue(nextValue);
    if (kind === "date") setOpen(false);
  };

const setTime = (time: string) => {
    commitPickerValue(pickerValueWithTime(kind, pickerValue, time));
  };

const setToday = () => {
    commitPickerValue(pickerValueWithDate(kind, pickerValue, new Date()));
    if (kind === "date") setOpen(false);
  };

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          {...controlProps}
          type="button"
          data-empty={isEmpty || undefined}
          className="border-input bg-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 inline-flex h-8.5 w-full min-w-0 items-center justify-between gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-left text-base font-normal shadow-xs/5 transition-shadow outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 sm:h-7.5 sm:text-sm"
          onBlur={field.onBlur}
        >
          <span className={cn("truncate", isEmpty && "text-muted-foreground")}>
            {isEmpty ? pickerPlaceholder(kind) : displayValue}
          </span>
          {kind === "time" ? (
            <ClockIcon className="size-4.5 shrink-0 opacity-80 sm:size-4" />
          ) : (
            <CalendarIcon className="size-4.5 shrink-0 opacity-80 sm:size-4" />
          )}
        </button>
      </PopoverTrigger>
      <PopoverContent
        align="start"
        className="w-auto rounded-xl p-2 before:rounded-[calc(var(--radius-xl)-1px)]"
      >
        {(kind === "date" || kind === "date-time") && (
          <Calendar
            mode="single"
            selected={selectedDate}
            defaultMonth={selectedDate}
            onSelect={(date) => {
              if (date) setDate(date);
            }}
          />
        )}
        {(kind === "time" || kind === "date-time") && (
          <div className="border-t p-3 first:border-t-0">
            <Input
              nativeInput
              type="time"
              step={1}
              value={timeValue}
              onChange={(event) => setTime(event.currentTarget.value)}
            />
          </div>
        )}
        <div className="flex items-center justify-between gap-2 border-t p-2">
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => commitPickerValue("")}
          >
            Clear
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={kind === "time" ? setNow : setToday}
          >
            {kind === "time" ? "Now" : "Today"}
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}
5e:Td5f,"use client";

import * as React from "react";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  compactJsonFormSelectDataCellClass,
  type ControlFieldApi,
  type ScalarControlDomProps,
} from "@/components/json-form/scalar/types";
import {
  isRecordValue,
  type Schema,
} from "@/components/json-form/schema-model";

export const NULL_SELECT_VALUE = "__json-form-null__";

function enumOptionValue(index: number): string {
  return `enum:${index}`;
}

export function enumLabel(value: unknown): string {
  if (value === null) return "No value";
  if (typeof value === "string") return value;
  return JSON.stringify(value);
}

function hasOwnRecordValue(
  value: Record<string, unknown>,
  key: string,
): boolean {
  return Object.prototype.hasOwnProperty.call(value, key);
}

export function enumValueEquals(a: unknown, b: unknown): boolean {
  if (Object.is(a, b)) return true;
  if (Array.isArray(a) || Array.isArray(b)) {
    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
      return false;
    }
    return a.every((item, index) => enumValueEquals(item, b[index]));
  }
  if (!isRecordValue(a) || !isRecordValue(b)) {
    return false;
  }

const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length !== bKeys.length) return false;
  return aKeys.every(
    (key) => hasOwnRecordValue(b, key) && enumValueEquals(a[key], b[key]),
  );
}

export function EnumControl({
  schema,
  field,
  compact,
  nullable,
  ...controlProps
}: {
  schema: Schema;
  field: ControlFieldApi;
  compact: boolean;
  nullable: boolean;
} & ScalarControlDomProps) {
  const enumValues = schema.enum ?? [];
  const hasNullEnumValue = enumValues.some((value) => value === null);
  const currentIndex = enumValues.findIndex((value) =>
    enumValueEquals(value, field.value),
  );
  const selectValue =
    currentIndex >= 0
      ? enumOptionValue(currentIndex)
      : field.value === null && nullable
        ? NULL_SELECT_VALUE
        : undefined;
  const displayValue =
    currentIndex >= 0
      ? enumLabel(enumValues[currentIndex])
      : field.value === null && nullable
        ? "No value"
        : undefined;

return (
    <Select
      value={selectValue}
      onValueChange={(value) => {
        if (typeof value !== "string") return;
        if (value === NULL_SELECT_VALUE) {
          field.onChange(null);
          return;
        }
        const index = Number(value.replace("enum:", ""));
        field.onChange(enumValues[index]);
      }}
    >
      <SelectTrigger
        {...controlProps}
        {...(compact
          ? {
              "data-slot": "data-cell",
              "data-kind": "text",
              "data-mode": "edit",
            }
          : {})}
        className={compact ? compactJsonFormSelectDataCellClass : undefined}
      >
        <SelectValue placeholder="Select...">{displayValue}</SelectValue>
      </SelectTrigger>
      <SelectContent>
        {nullable && !hasNullEnumValue ? (
          <SelectItem value={NULL_SELECT_VALUE}>No value</SelectItem>
        ) : null}
        {enumValues.map((option, index) => (
          <SelectItem
            key={enumOptionValue(index)}
            value={enumOptionValue(index)}
          >
            {enumLabel(option)}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
5f:T921,"use client";

import {
  DataCell,
  parseDataCellNumberInput,
  type DataCellCommitValue,
  type DataCellValueMeta,
} from "@/components/ui/data-cell";
import { Input } from "@/components/ui/input";
import {
  compactJsonFormDataCellClass,
  type ControlFieldApi,
  type ScalarControlDomProps,
} from "@/components/json-form/scalar/types";

export function NumberControl({
  kind,
  field,
  compact,
  nullable,
  ...controlProps
}: {
  kind: "number" | "integer";
  field: ControlFieldApi;
  compact: boolean;
  nullable: boolean;
} & ScalarControlDomProps) {
  if (!compact) {
    return (
      <Input
        {...controlProps}
        nativeInput
        type="number"
        inputMode={kind === "integer" ? "numeric" : "decimal"}
        step={kind === "integer" ? 1 : "any"}
        value={field.value == null ? "" : String(field.value)}
        onChange={(event) =>
          updateNumberValue({
            kind,
            value: event.currentTarget.value,
            nullable,
            field,
          })
        }
        onBlur={field.onBlur}
        name={field.name}
      />
    );
  }

return (
    <DataCell
      {...controlProps}
      kind={kind}
      active
      value={dataCellNumberValue(field.value)}
      draftValue={field.value == null ? "" : String(field.value)}
      className={compactJsonFormDataCellClass}
      onDraftValueChange={(value, meta) =>
        updateNumberValue({ kind, value, meta, nullable, field })
      }
      onCommit={(value, meta) =>
        updateNumberValue({ kind, value, meta, nullable, field })
      }
      onBlur={field.onBlur}
      name={field.name}
    />
  );
}

if (!parsed.isValid) return;
  if (parsed.isEmpty) {
    field.onChange(nullable ? null : undefined);
    return;
  }
  field.onChange(parsed.value);
}

export function dataCellNumberValue(value: unknown): string | number | null {
  return typeof value === "number" || typeof value === "string" ? value : null;
}
60:T937,"use client";

import { DataCell } from "@/components/ui/data-cell";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/json-form/form-primitives";
import {
  compactJsonFormDataCellClass,
  type ControlFieldApi,
  type JsonFormTextInput,
  type ScalarControlDomProps,
} from "@/components/json-form/scalar/types";
import type { Schema } from "@/components/json-form/schema-model";

export function TextControl({
  schema,
  field,
  textInput,
  compact,
  nullable,
  ...controlProps
}: {
  schema: Schema;
  field: ControlFieldApi;
  textInput?: JsonFormTextInput;
  compact: boolean;
  nullable: boolean;
} & ScalarControlDomProps) {
  const value = field.value == null ? "" : String(field.value);

if (!compact && shouldRenderTextarea(schema, textInput)) {
    return (
      <Textarea
        {...controlProps}
        value={value}
        onChange={(event) =>
          field.onChange(
            event.target.value === "" && nullable ? null : event.target.value,
          )
        }
        onBlur={field.onBlur}
        name={field.name}
      />
    );
  }

if (!compact) {
    return (
      <Input
        {...controlProps}
        value={value}
        onChange={(event) => {
          const nextValue = event.currentTarget.value;
          field.onChange(nextValue === "" && nullable ? null : nextValue);
        }}
        onBlur={field.onBlur}
        name={field.name}
      />
    );
  }

return (
    <DataCell
      {...controlProps}
      kind="text"
      active
      value={field.value == null ? null : value}
      draftValue={value}
      className={compactJsonFormDataCellClass}
      onDraftValueChange={(nextValue) =>
        field.onChange(nextValue === "" && nullable ? null : nextValue)
      }
      onCommit={(nextValue) =>
        field.onChange(nextValue === "" && nullable ? null : nextValue)
      }
      onBlur={field.onBlur}
      name={field.name}
    />
  );
}

function shouldRenderTextarea(
  schema: Schema,
  textInput: JsonFormTextInput | undefined,
): boolean {
  if (textInput === "input") return false;
  if (textInput === "textarea") return true;
  return schema.format === "textarea" || (schema.maxLength ?? 0) > 120;
}

export function dataCellTextValue(value: unknown): string | null {
  return value === null || value === undefined ? null : String(value);
}
61:T40b,import type * as React from "react";

export type JsonFormTextInput = "input" | "textarea";
export type DateTimeControlKind = "date" | "time" | "date-time";

export interface ControlFieldApi {
  value: unknown;
  onChange: (value: unknown) => void;
  onBlur: () => void;
  name: string;
  ref?: React.Ref<HTMLElement>;
}

export type ScalarControlDomProps = {
  id?: string;
  "aria-describedby"?: string;
  "aria-invalid"?: boolean;
  "data-slot"?: string;
};

export const compactJsonFormDataCellClass =
  "h-8 rounded-md border-transparent bg-transparent px-2 text-sm shadow-none transition-colors hover:border-border hover:bg-background focus-visible:border-ring focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring/30";

export const compactJsonFormSelectDataCellClass =
  "h-8 rounded-md border-transparent bg-transparent px-2 text-sm shadow-none transition-colors hover:border-border hover:bg-background focus-visible:border-ring focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring/30";
62:T2dbf,import type { JSONSchema7, JSONSchema7Definition } from "json-schema";

export type Schema = JSONSchema7;
export type JsonFormSchemaNode = Schema;

export type JsonFormFieldKind = FieldKind;

export interface NormalizedSchema {
  schema: Schema;
  nullable: boolean;
}

export interface Column {
  key: string;
  schema: Schema;
  kind: FieldKind;
  required: boolean;
  nullable: boolean;
}

export type JsonFormColumn = Column;

export function isSchema(
  value: JSONSchema7Definition | unknown,
): value is Schema {
  return typeof value === "object" && value !== null;
}

export function isRecordValue(
  value: unknown,
): value is Record<string, unknown> {
  return typeof value === "object" && value !== null && !Array.isArray(value);
}

function cloneSchema(schema: Schema): Schema {
  return JSON.parse(JSON.stringify(schema)) as Schema;
}

function definitionsFrom(
  schema: Schema,
): Record<string, JSONSchema7Definition> {
  return {
    ...((schema.definitions ?? {}) as Record<string, JSONSchema7Definition>),
    ...((schema.$defs ?? {}) as Record<string, JSONSchema7Definition>),
  };
}

function decodePointerSegment(segment: string): string {
  return segment.replace(/~1/g, "/").replace(/~0/g, "~");
}

function resolveLocalPointer(
  schema: Schema,
  ref: string,
): JSONSchema7Definition | undefined {
  if (!ref.startsWith("#/")) return undefined;

let current: unknown = schema;
  for (const segment of ref.slice(2).split("/").map(decodePointerSegment)) {
    if (!isSchema(current) && !Array.isArray(current)) return undefined;
    current = (current as Record<string, unknown>)[segment];
  }
  return current as JSONSchema7Definition | undefined;
}

function resolveRef(
  ref: string,
  rootSchema: Schema,
  definitions: Record<string, JSONSchema7Definition>,
): JSONSchema7Definition | undefined {
  return resolveLocalPointer(rootSchema, ref) ?? definitions[refKey(ref) ?? ""];
}

export function normalizeJsonFormSchema(schema: Schema): JsonFormSchemaNode {
  return expandRefs(schema);
}

export function expandRefs(
  schema: Schema,
  definitions: Record<string, JSONSchema7Definition> = definitionsFrom(schema),
  visited: Set<string> = new Set(),
  rootSchema: Schema = schema,
): Schema {
  const working = cloneSchema(schema);

if (typeof working.$ref === "string") {
    const ref = working.$ref;
    const target = resolveRef(ref, rootSchema, definitions);
    if (!isSchema(target) || visited.has(ref)) return working;

const nextVisited = new Set(visited);
    nextVisited.add(ref);
    const { $ref: _ref, ...overrides } = working;
    return expandRefs(
      mergeSchemas(
        expandRefs(target, definitions, nextVisited, rootSchema),
        overrides,
      ),
      definitions,
      nextVisited,
      rootSchema,
    );
  }

let normalized = working;
  if (Array.isArray(normalized.allOf)) {
    const allOf = normalized.allOf;
    delete normalized.allOf;
    normalized = allOf.reduce<Schema>((merged, branch) => {
      return isSchema(branch)
        ? mergeSchemas(
            merged,
            expandRefs(branch, definitions, visited, rootSchema),
          )
        : merged;
    }, normalized);
  }

for (const key of ["anyOf", "oneOf"] as const) {
    const branches = normalized[key];
    if (Array.isArray(branches)) {
      normalized[key] = branches.map((branch) =>
        isSchema(branch)
          ? expandRefs(branch, definitions, visited, rootSchema)
          : branch,
      );
    }
  }

if (normalized.properties) {
    const properties: Record<string, JSONSchema7Definition> = {};
    for (const [key, value] of Object.entries(normalized.properties)) {
      properties[key] = isSchema(value)
        ? expandRefs(value, definitions, visited, rootSchema)
        : value;
    }
    normalized.properties = properties;
  }

if (isSchema(normalized.items)) {
    normalized.items = expandRefs(
      normalized.items,
      definitions,
      visited,
      rootSchema,
    );
  } else if (Array.isArray(normalized.items)) {
    normalized.items = normalized.items.map((item) =>
      isSchema(item)
        ? expandRefs(item, definitions, visited, rootSchema)
        : item,
    );
  }

if (isSchema(normalized.additionalProperties)) {
    normalized.additionalProperties = expandRefs(
      normalized.additionalProperties,
      definitions,
      visited,
      rootSchema,
    );
  }

if (normalized.patternProperties) {
    const patternProperties: Record<string, JSONSchema7Definition> = {};
    for (const [key, value] of Object.entries(normalized.patternProperties)) {
      patternProperties[key] = isSchema(value)
        ? expandRefs(value, definitions, visited, rootSchema)
        : value;
    }
    normalized.patternProperties = patternProperties;
  }

return normalized;
}

/** Resolve nullable unions like `["string","null"]` or `anyOf:[X,{type:"null"}]`. */
export function unwrapNullable(schema: Schema): NormalizedSchema {
  if (Array.isArray(schema.type)) {
    const nonNull = schema.type.filter((type) => type !== "null");
    return {
      schema: {
        ...schema,
        type: nonNull.length === 1 ? nonNull[0] : nonNull,
      },
      nullable: schema.type.includes("null"),
    };
  }

for (const key of ["anyOf", "oneOf"] as const) {
    const branches = schema[key];
    if (!Array.isArray(branches)) continue;

return { schema, nullable: false };
}

export function fieldKind(schema: Schema): FieldKind {
  if (Array.isArray(schema.enum)) return "enum";
  const type = Array.isArray(schema.type)
    ? schema.type.find((item) => item !== "null")
    : schema.type;
  switch (type) {
    case "number":
      return "number";
    case "integer":
      return "integer";
    case "boolean":
      return "boolean";
    case "object":
      return "object";
    case "array":
      return "array";
    default:
      return "string";
  }
}

export const jsonFormFieldKind = fieldKind;

export function labelFor(
  name: string,
  schema: Schema,
  explicit?: string,
): string {
  if (explicit) return explicit;
  if (schema.title) return schema.title;
  const leaf = name.split(".").pop() ?? name;
  return leaf
    .replace(/[_-]+/g, " ")
    .replace(/\b\w/g, (char) => char.toUpperCase())
    .trim();
}

export function emptyValueFor(schema: Schema): unknown {
  const { schema: inner, nullable } = unwrapNullable(schema);
  if (nullable) return null;
  switch (fieldKind(inner)) {
    case "boolean":
      return false;
    case "object":
      return {};
    case "array":
      return [];
    case "number":
    case "integer":
      return undefined;
    default:
      return "";
  }
}

export const emptyJsonFormValue = emptyValueFor;

export function isScalarKind(kind: FieldKind): boolean {
  return kind !== "object" && kind !== "array";
}

export function schemaProperties(
  schema: Schema,
): Record<string, JSONSchema7Definition> {
  return (schema.properties ?? {}) as Record<string, JSONSchema7Definition>;
}

export function schemaPatternProperties(
  schema: Schema,
): Record<string, JSONSchema7Definition> {
  return (schema.patternProperties ?? {}) as Record<
    string,
    JSONSchema7Definition
  >;
}

function additionalPropertySchemaFor(schema: Schema): Schema | null {
  return isRecordValue(schema.additionalProperties)
    ? (schema.additionalProperties as Schema)
    : null;
}

export function dynamicPropertySchemaFor(
  schema: Schema,
  key: string,
): Schema | null {
  return (
    patternPropertySchemaFor(schema, key) ?? additionalPropertySchemaFor(schema)
  );
}

export function hasDynamicObjectProperties(schema: Schema): boolean {
  const { schema: inner } = unwrapNullable(schema);
  if (fieldKind(inner) !== "object") return false;
  return (
    isRecordValue(inner.additionalProperties) ||
    Object.values(schemaPatternProperties(inner)).some(isRecordValue)
  );
}

export function scalarObjectColumns(itemSchema: Schema): Column[] | null {
  const { schema } = unwrapNullable(itemSchema);
  if (fieldKind(schema) !== "object") return null;
  const properties = schemaProperties(schema);
  const required = new Set(schema.required ?? []);
  const columns: Column[] = [];
  for (const [key, child] of Object.entries(properties)) {
    if (!isSchema(child)) return null;
    const { schema: inner, nullable } = unwrapNullable(child);
    const kind = fieldKind(inner);
    if (!isScalarKind(kind)) return null;
    columns.push({
      key,
      schema: inner,
      kind,
      required: required.has(key),
      nullable,
    });
  }
  return columns.length > 0 ? columns : null;
}

export function jsonFormTableColumns(itemSchema: Schema): Column[] | null {
  return scalarObjectColumns(itemSchema);
}

export function arrayItemSchemaAt(schema: Schema, index: number): Schema {
  const items = schema.items;
  if (Array.isArray(items)) {
    const item = items[index];
    if (isRecordValue(item)) return item as Schema;
    if (isRecordValue(schema.additionalItems)) {
      return schema.additionalItems as Schema;
    }
    return { type: "string" };
  }
  return isRecordValue(items) ? (items as Schema) : { type: "string" };
}

export const jsonFormArrayItemNode = arrayItemSchemaAt;

export function canAppendArrayItem(schema: Schema, length: number): boolean {
  if (typeof schema.maxItems === "number" && length >= schema.maxItems) {
    return false;
  }
  if (
    Array.isArray(schema.items) &&
    schema.additionalItems === false &&
    length >= schema.items.length
  ) {
    return false;
  }
  return true;
}

export function canRemoveArrayItem(schema: Schema, length: number): boolean {
  return typeof schema.minItems !== "number" || length > schema.minItems;
}
63:T276f,"use client";

import * as React from "react";

import type { SourceFieldLink } from "@/components/ui/source-field-link";
import { useSourceLinkFocusPreviewIntent } from "@/components/json-form/source-link-focus-intent";
import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";
import { joinEffectKey } from "@/lib/effect-key";

export type JsonFormSourceLinkActions = Omit<
  SourceFieldLink,
  "activeSourcePath"
>;

type SourceTableCell = HTMLElement;
type SourcePointerPoint = { x: number; y: number };
type TableSourceHoverState = {
  phase: "idle" | "focusing" | "hovering" | "scrolling";
  pointerPoint: SourcePointerPoint | null;
  sourcePath: string | null;
};

const SOURCE_PATH_ATTRIBUTE = "data-source-path";
const SOURCE_ACTIVE_ATTRIBUTE = "data-source-active";
const SOURCE_CELL_SELECTOR = `[${SOURCE_PATH_ATTRIBUTE}]`;
const TABLE_CELL_SELECTOR = "[data-table-cell]";
const SCROLL_SOURCE_HOVER_INTERVAL_MS = 32;

export function useSourceTableHoverController({
  tableRef,
  activeSourcePath,
  sourceLinkActions,
  refreshKey,
}: {
  tableRef: React.RefObject<HTMLElement | null>;
  activeSourcePath: string | null;
  sourceLinkActions: JsonFormSourceLinkActions | null;
  refreshKey: unknown;
}) {
  const sourceLinked = Boolean(sourceLinkActions);
  const activeSourceCellRef = React.useRef<Element | null>(null);
  const hoverStateRef = React.useRef<TableSourceHoverState>({
    phase: "idle",
    pointerPoint: null,
    sourcePath: null,
  });
  const pendingHoverPathRef = React.useRef<string | null>(null);
  const pendingHoverFrameRef = React.useRef<number | null>(null);
  const pendingScrollHoverFrameRef = React.useRef<number | null>(null);
  const latestScrollHoverAtRef = React.useRef(Number.NEGATIVE_INFINITY);
  const shouldPreviewFocus = useSourceLinkFocusPreviewIntent();

const setActiveSourceCell = React.useCallback((cell: Element | null) => {
    if (activeSourceCellRef.current === cell) return;
    activeSourceCellRef.current?.removeAttribute(SOURCE_ACTIVE_ATTRIBUTE);
    if (cell) cell.setAttribute(SOURCE_ACTIVE_ATTRIBUTE, "true");
    activeSourceCellRef.current = cell;
  }, []);

const sourcePathForCell = React.useCallback(
    (cell: Element | null): string | null =>
      cell?.getAttribute(SOURCE_PATH_ATTRIBUTE) ?? null,
    [],
  );

useKeyedMountEffect(
    joinEffectKey([
      activeSourcePath,
      sourceLinked,
      refreshKey,
      setActiveSourceCell,
      tableRef,
    ]),
    () => {
      if (!sourceLinked || !activeSourcePath) {
        setActiveSourceCell(null);
        return;
      }
      if (
        hoverStateRef.current.sourcePath === activeSourcePath &&
        activeSourceCellRef.current?.getAttribute(SOURCE_PATH_ATTRIBUTE) ===
          activeSourcePath
      ) {
        return;
      }

const table = tableRef.current;
      if (!table) return;
      for (const cell of table.querySelectorAll(SOURCE_CELL_SELECTOR)) {
        if (cell.getAttribute(SOURCE_PATH_ATTRIBUTE) === activeSourcePath) {
          setActiveSourceCell(cell);
          return;
        }
      }
      setActiveSourceCell(null);
    },
  );

const getCellFromTarget = React.useCallback(
    (target: EventTarget | null): SourceTableCell | null => {
      if (!(target instanceof Element)) return null;
      const cell = target.closest<SourceTableCell>(TABLE_CELL_SELECTOR);
      return cell && tableRef.current?.contains(cell) ? cell : null;
    },
    [tableRef],
  );

const cancelPendingHover = React.useCallback(() => {
    if (pendingHoverFrameRef.current === null) return;
    cancelAnimationFrame(pendingHoverFrameRef.current);
    pendingHoverFrameRef.current = null;
  }, []);

const cancelPendingScrollHover = React.useCallback(() => {
    if (pendingScrollHoverFrameRef.current === null) return;
    cancelAnimationFrame(pendingScrollHoverFrameRef.current);
    pendingScrollHoverFrameRef.current = null;
  }, []);

const reportHoverSourcePath = React.useCallback(
    (path: string | null) => {
      if (!sourceLinkActions) return;
      pendingHoverPathRef.current = path;
      if (pendingHoverFrameRef.current !== null) return;
      pendingHoverFrameRef.current = requestAnimationFrame(() => {
        pendingHoverFrameRef.current = null;
        sourceLinkActions.onSourceHover(pendingHoverPathRef.current);
      });
    },
    [sourceLinkActions],
  );

const setHoverSourcePath = React.useCallback(
    (path: string | null, cell: Element | null) => {
      if (!sourceLinkActions) return;
      const currentState = hoverStateRef.current;
      if (currentState.sourcePath === path) return;
      hoverStateRef.current = {
        phase:
          currentState.phase === "scrolling"
            ? "scrolling"
            : path
              ? "hovering"
              : "idle",
        pointerPoint: currentState.pointerPoint,
        sourcePath: path,
      };
      setActiveSourceCell(cell);
      reportHoverSourcePath(path);
    },
    [sourceLinkActions, reportHoverSourcePath, setActiveSourceCell],
  );

useKeyedMountEffect(
    joinEffectKey([cancelPendingHover, cancelPendingScrollHover]),
    () => () => {
      cancelPendingHover();
      cancelPendingScrollHover();
    },
  );

const selectCellSource = React.useCallback(
    (cell: HTMLElement | null) => {
      const sourcePath = sourcePathForCell(cell);
      if (!sourcePath) return false;
      cancelPendingHover();
      sourceLinkActions?.selectSourcePath?.(sourcePath);
      return true;
    },
    [cancelPendingHover, sourceLinkActions, sourcePathForCell],
  );

const handleScrollStart = React.useCallback(() => {
    hoverStateRef.current = {
      phase: "scrolling",
      pointerPoint: hoverStateRef.current.pointerPoint,
      sourcePath: hoverStateRef.current.sourcePath,
    };
  }, []);

const restoreHoverSourceAtPointer = React.useCallback(() => {
    if (!sourceLinkActions) return;
    const point = hoverStateRef.current.pointerPoint;
    if (!point) return;
    const ownerDocument = tableRef.current?.ownerDocument;
    if (!ownerDocument) return;
    const element = ownerDocument.elementFromPoint(point.x, point.y);
    const cell = getCellFromTarget(element);
    setHoverSourcePath(sourcePathForCell(cell), cell);
  }, [
    sourceLinkActions,
    tableRef,
    getCellFromTarget,
    setHoverSourcePath,
    sourcePathForCell,
  ]);

const handleScrollEnd = React.useCallback(() => {
    hoverStateRef.current = {
      phase: hoverStateRef.current.sourcePath ? "hovering" : "idle",
      pointerPoint: hoverStateRef.current.pointerPoint,
      sourcePath: hoverStateRef.current.sourcePath,
    };
    cancelPendingScrollHover();
    latestScrollHoverAtRef.current = Number.NEGATIVE_INFINITY;
    restoreHoverSourceAtPointer();
  }, [cancelPendingScrollHover, restoreHoverSourceAtPointer]);

const handleFocus = React.useCallback(
    (event: React.FocusEvent<HTMLElement>) => {
      if (!sourceLinkActions) return;
      if (!shouldPreviewFocus(event)) return;
      const cell = getCellFromTarget(event.target);
      if (!cell) return;
      const sourcePath = sourcePathForCell(cell);
      hoverStateRef.current = {
        phase: sourcePath ? "focusing" : "idle",
        pointerPoint: hoverStateRef.current.pointerPoint,
        sourcePath,
      };
      setActiveSourceCell(cell);
      sourceLinkActions.onSourceHover(sourcePath);
    },
    [
      sourceLinkActions,
      shouldPreviewFocus,
      getCellFromTarget,
      setActiveSourceCell,
      sourcePathForCell,
    ],
  );

return {
    sourceLinked,
    getCellFromTarget,
    selectCellSource,
    handlePointerMove,
    handlePointerLeave,
    handleFocus,
    handleBlur,
    handleScrollStart,
    handleScrollMove,
    handleScrollEnd,
  };
}
64:T1166,"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import type { SourceFieldLink } from "@/components/ui/source-field-link";
import { useSourceLinkFocusPreviewIntent } from "@/components/json-form/source-link-focus-intent";
import {
  useSourceTableHoverController,
  type JsonFormSourceLinkActions,
} from "@/components/json-form/source-link-table-hover";

export type JsonFormSourceLink = SourceFieldLink;

const ActiveSourcePathContext = React.createContext<string | null>(null);
const SourceLinkActionsContext =
  React.createContext<JsonFormSourceLinkActions | null>(null);

export function JsonFormSourceLinkProvider({
  sourceLink,
  children,
}: {
  sourceLink?: JsonFormSourceLink;
  children: React.ReactNode;
}) {
  const onSourceHover = sourceLink?.onSourceHover;
  const selectSourcePath = sourceLink?.selectSourcePath;
  const sourceLinkActions = React.useMemo<JsonFormSourceLinkActions | null>(
    () => (onSourceHover ? { onSourceHover, selectSourcePath } : null),
    [onSourceHover, selectSourcePath],
  );

return (
    <SourceLinkActionsContext.Provider value={sourceLinkActions}>
      <ActiveSourcePathContext.Provider
        value={sourceLink?.activeSourcePath ?? null}
      >
        {children}
      </ActiveSourcePathContext.Provider>
    </SourceLinkActionsContext.Provider>
  );
}

export function useActiveSourcePath(): string | null {
  return React.useContext(ActiveSourcePathContext);
}

export function useSourceLinkActions(): JsonFormSourceLinkActions | null {
  return React.useContext(SourceLinkActionsContext);
}

export function useSourceLinkedTableCells({
  tableRef,
  refreshKey,
}: {
  tableRef: React.RefObject<HTMLElement | null>;
  refreshKey: unknown;
}) {
  return useSourceTableHoverController({
    activeSourcePath: useActiveSourcePath(),
    refreshKey,
    sourceLinkActions: useSourceLinkActions(),
    tableRef,
  });
}

function shouldSelectSourceFromKeyDown(event: React.KeyboardEvent): boolean {
  if (event.defaultPrevented || event.key !== "Enter") return false;
  return !(event.target instanceof HTMLTextAreaElement);
}

function shouldPreviewSourceFromPointerMove(
  event: React.PointerEvent,
): boolean {
  return !event.defaultPrevented && event.pointerType !== "touch";
}

/**
 * Wraps a scalar leaf so it reports its source path from explicit pointer or
 * keyboard intent. Without a source link, it renders children unchanged.
 */
export function SourceLinkShell({
  sourcePath,
  children,
}: {
  sourcePath: string;
  children: React.ReactNode;
}) {
  const activeSourcePath = useActiveSourcePath();
  const sourceLinkActions = useSourceLinkActions();
  const shouldPreviewFocus = useSourceLinkFocusPreviewIntent();
  const focusPreviewedRef = React.useRef(false);
  const pointerPreviewedRef = React.useRef(false);
  if (!sourceLinkActions) return <>{children}</>;
  const active = activeSourcePath === sourcePath;

const clearPreviewIfIdle = () => {
    if (focusPreviewedRef.current || pointerPreviewedRef.current) return;
    sourceLinkActions.onSourceHover(null);
  };

return (
    <div
      data-source-active={active ? "true" : "false"}
      data-source-path={sourcePath}
      onPointerMove={(event) => {
        if (
          pointerPreviewedRef.current ||
          !shouldPreviewSourceFromPointerMove(event)
        ) {
          return;
        }
        pointerPreviewedRef.current = true;
        sourceLinkActions.onSourceHover(sourcePath);
      }}
      onPointerLeave={() => {
        if (!pointerPreviewedRef.current) return;
        pointerPreviewedRef.current = false;
        clearPreviewIfIdle();
      }}
      onFocus={(event) => {
        if (!shouldPreviewFocus(event)) return;
        focusPreviewedRef.current = true;
        sourceLinkActions.onSourceHover(sourcePath);
      }}
      onBlur={() => {
        if (!focusPreviewedRef.current) return;
        focusPreviewedRef.current = false;
        clearPreviewIfIdle();
      }}
      onClick={() => sourceLinkActions.selectSourcePath?.(sourcePath)}
      onKeyDownCapture={(event) => {
        if (shouldSelectSourceFromKeyDown(event)) {
          sourceLinkActions.selectSourcePath?.(sourcePath);
        }
      }}
      className={cn(
        "rounded-md border px-3 py-2 transition-colors",
        active
          ? "border-primary/40 bg-primary/5"
          : "hover:bg-muted/60 border-transparent",
      )}
    >
      {children}
    </div>
  );
}
65:Ta69,"use client";

import * as React from "react";

import { FixedGridRowWindow } from "@/components/ui/fixed-grid-row-window";
import { useFixedRowVirtualization } from "@/components/ui/fixed-grid-virtualization";
import {
  TABLE_JUMP_ROW_OVERSCAN,
  TABLE_MAX_HEIGHT,
  TABLE_ROW_HEIGHT,
  TABLE_ROW_OVERSCAN,
} from "@/components/json-form/table/array-table-config";
import {
  useArrayTableScrollActivity,
  type ArrayTableScrollHandlers,
} from "@/components/json-form/table/array-table-scroll";

type ArrayTableField = { id: string };

export function StaticArrayTableBody({
  fields,
  scrollHandlers,
  renderItem,
}: {
  fields: ArrayTableField[];
  scrollHandlers: ArrayTableScrollHandlers;
  renderItem: (index: number) => React.ReactNode;
}) {
  const scrollRef = React.useRef<HTMLDivElement>(null);
  useArrayTableScrollActivity(scrollRef, scrollHandlers);

return (
    <div
      ref={scrollRef}
      data-slot="json-form-table-scroll"
      className="overflow-y-auto"
      style={{ maxHeight: TABLE_MAX_HEIGHT }}
    >
      <div className="[contain:layout_paint_style]">
        {fields.map((entry, index) => (
          <React.Fragment key={entry.id}>{renderItem(index)}</React.Fragment>
        ))}
      </div>
    </div>
  );
}

export function FixedArrayTableBody({
  fields,
  scrollHandlers,
  renderItem,
}: {
  fields: ArrayTableField[];
  scrollHandlers: ArrayTableScrollHandlers;
  renderItem: (index: number, rowTopPx: number) => React.ReactNode;
}) {
  const scrollRef = React.useRef<HTMLDivElement>(null);
  const { virtualRowWindow, totalRowSize, viewportClientHeight } =
    useFixedRowVirtualization({
      rowCount: fields.length,
      rowSize: TABLE_ROW_HEIGHT,
      rowOverscan: TABLE_ROW_OVERSCAN,
      jumpRowOverscan: TABLE_JUMP_ROW_OVERSCAN,
      scrollRef,
    });
  useArrayTableScrollActivity(scrollRef, scrollHandlers);

return (
    <div
      ref={scrollRef}
      data-slot="json-form-table-scroll"
      className="overflow-y-auto"
      style={{ maxHeight: TABLE_MAX_HEIGHT }}
    >
      <FixedGridRowWindow
        totalSize={totalRowSize}
        minWidth="100%"
        rowMinWidth="100%"
        virtualRowWindow={virtualRowWindow}
        viewportHeight={viewportClientHeight}
        offsetDataSlot="json-form-table-row-offset"
        windowDataSlot="json-form-table-row-window"
        className="[contain:layout_paint_style]"
      >
        {virtualRowWindow.items.map((virtualRow) => (
          <React.Fragment key={fields[virtualRow.index].id}>
            {renderItem(virtualRow.index, virtualRow.start)}
          </React.Fragment>
        ))}
      </FixedGridRowWindow>
    </div>
  );
}
66:Ta7d,import { type DataCellValueMeta } from "@/components/ui/data-cell";
import { datetimeLocalInputValue } from "@/components/json-form/scalar-control";
import type { Column } from "@/components/json-form/schema-model";

export type SetArrayTableCellValue = (
  path: string,
  value: unknown,
  options: {
    shouldDirty: true;
    shouldTouch: true;
    shouldValidate: true;
  },
) => void;

export type CommitArrayTableCellValue = (
  value: unknown,
  meta?: DataCellValueMeta,
) => void;

export const NO_ARRAY_TABLE_CELL_COMMIT = Symbol("NO_ARRAY_TABLE_CELL_COMMIT");

export function normalizeArrayTableCellValue({
  column,
  currentValue,
  nextValue,
  meta,
}: {
    column: Column;
    currentValue: unknown;
    nextValue: unknown;
    meta?: DataCellValueMeta;
}): unknown | typeof NO_ARRAY_TABLE_CELL_COMMIT {
  let normalizedValue: unknown;
  if (column.kind === "enum") {
    normalizedValue = nextValue;
  } else if (column.kind === "number" || column.kind === "integer") {
    if (meta && !meta.isValid) return NO_ARRAY_TABLE_CELL_COMMIT;
    normalizedValue =
      typeof nextValue === "number"
        ? nextValue
        : nextValue === null && column.nullable && meta?.isEmpty !== false
          ? null
          : undefined;
    if (normalizedValue === undefined) return NO_ARRAY_TABLE_CELL_COMMIT;
  } else if (column.kind === "boolean") {
    normalizedValue = Boolean(nextValue);
  } else {
    const currentText = currentValue == null ? "" : String(currentValue);
    const currentDisplay =
      column.schema.format === "date-time"
        ? datetimeLocalInputValue(currentText)
        : currentText;
    const nextText = typeof nextValue === "string" ? nextValue : "";
    const nextDisplay =
      column.schema.format === "date-time"
        ? datetimeLocalInputValue(nextText)
        : nextText;

if (nextDisplay === currentDisplay) return NO_ARRAY_TABLE_CELL_COMMIT;
    normalizedValue =
      nextDisplay === "" && column.nullable ? null : nextDisplay;
  }

return Object.is(currentValue, normalizedValue)
    ? NO_ARRAY_TABLE_CELL_COMMIT
    : normalizedValue;
}

export function commitArrayTableCellValue({
  column,
  currentValue,
  meta,
  nextValue,
  path,
  setValue,
}: {
    column: Column;
    currentValue: unknown;
    meta?: DataCellValueMeta;
    nextValue: unknown;
    path: string;
    setValue: SetArrayTableCellValue;
}) {
  const normalizedValue = normalizeArrayTableCellValue({
    column,
    currentValue,
    nextValue,
    meta,
  });

if (normalizedValue === NO_ARRAY_TABLE_CELL_COMMIT) return;
  setValue(path, normalizedValue, {
    shouldDirty: true,
    shouldTouch: true,
    shouldValidate: true,
  });
}
67:T8fe,"use client";

import * as React from "react";

import { DataCell } from "@/components/ui/data-cell";
import type { Column } from "@/components/json-form/schema-model";
import {
  useArrayTableCellActive,
  type ArrayTableActiveCellStore,
} from "@/components/json-form/table/array-table-active-cell-store";
import {
  commitArrayTableCellValue,
  type CommitArrayTableCellValue,
  type SetArrayTableCellValue,
} from "@/components/json-form/table/array-table-cell-commit";
import { createArrayTableDataCellProps } from "@/components/json-form/table/array-table-data-cell-props";
import type { ArrayTableCellModel } from "@/components/json-form/table/array-table-cell-model";

return (
    <DataCell
      {...createArrayTableDataCellProps({
        column,
        commitValue,
        isEditing,
        model,
        onEditingEnd: closeEditor,
      })}
    />
  );
}

export const ArrayTableCell = React.memo(
  ArrayTableCellContent,
  (previous, next) =>
    previous.model.path === next.model.path &&
    previous.model.sourcePath === next.model.sourcePath &&
    previous.model.label === next.model.label &&
    previous.model.displayText === next.model.displayText &&
    previous.model.kind === next.model.kind &&
    Object.is(previous.model.value, next.model.value) &&
    previous.model.isEnum === next.model.isEnum &&
    previous.model.sourceLinked === next.model.sourceLinked &&
    previous.column === next.column &&
    previous.activeCellStore === next.activeCellStore &&
    previous.setValue === next.setValue &&
    previous.closeEditor === next.closeEditor,
);
ArrayTableCell.displayName = "ArrayTableCell";
68:T51e,import {
  enumLabel,
  enumValueEquals,
} from "@/components/json-form/scalar-control";
import type { Column } from "@/components/json-form/schema-model";

export function formatArrayTableCellValue({
  value,
  column,
}: {
  value: unknown;
  column: Column;
}) {
  if (value == null || value === "") return "—";
  if (column.kind === "enum") {
    const option = column.schema.enum?.find((candidate) =>
      enumValueEquals(candidate, value),
    );
    return option === undefined ? enumLabel(value) : enumLabel(option);
  }
  if (typeof value === "number")
    return Number.isFinite(value) ? String(value) : "—";
  if (typeof value === "boolean") return value ? "True" : "False";
  return String(value);
}

export function dataCellKindForColumn(column: Column): ArrayTableDataCellKind {
  if (column.kind === "enum") return "select";
  if (column.kind === "number" || column.kind === "integer") return column.kind;
  if (column.kind === "boolean") return "boolean";
  if (column.schema.format === "date-time") return "date-time";
  if (column.schema.format === "date") return "date";
  if (column.schema.format === "time") return "time";
  return "text";
}
69:Tdb7,"use client";

import * as React from "react";
import { X } from "lucide-react";
import { useFormContext, useWatch } from "react-hook-form";

import { cn } from "@/lib/utils";
import { getFixedGridRowStyle } from "@/components/ui/fixed-grid-row-style";
import {
  encodeJsonFormKey,
  joinJsonFormPath,
  joinJsonSourcePath,
} from "@/components/json-form/path-codec";
import type { Column } from "@/components/json-form/schema-model";
import type { ArrayTableActiveCellStore } from "@/components/json-form/table/array-table-active-cell-store";
import { ArrayTableCell } from "@/components/json-form/table/array-table-cell";
import { createArrayTableCellModel } from "@/components/json-form/table/array-table-cell-model";
import { TABLE_ROW_HEIGHT } from "@/components/json-form/table/array-table-config";

export const ArrayTableRow = React.memo(function ArrayTableRow({
  name,
  sourcePath,
  index,
  isLastRow,
  columns,
  remove,
  canRemove,
  sourceLinked,
  template,
  rowTopPx,
  activeCellStore,
}: {
  name: string;
  sourcePath: string;
  index: number;
  isLastRow: boolean;
  columns: Column[];
  remove: (index: number) => void;
  canRemove: boolean;
  sourceLinked: boolean;
  template: string;
  rowTopPx?: number;
  activeCellStore: ArrayTableActiveCellStore;
}) {
  const { control, getValues, setValue } = useFormContext();
  const rowPath = joinJsonFormPath(name, index);
  const rowSourcePath = joinJsonSourcePath(sourcePath, index);
  const watchedRowValue = useWatch({
    control,
    name: rowPath,
  }) as Record<string, unknown> | undefined;
  const rowValue = (watchedRowValue ?? getValues(rowPath)) as
    | Record<string, unknown>
    | undefined;
  const rowStyle = React.useMemo(
    () =>
      rowTopPx === undefined
        ? { gridTemplateColumns: template }
        : getFixedGridRowStyle({
            gridTemplate: template,
            rowHeight: TABLE_ROW_HEIGHT,
            top: rowTopPx,
          }),
    [rowTopPx, template],
  );
  const closeEditor = React.useCallback(
    () => activeCellStore.setActivePath(null),
    [activeCellStore],
  );

return (
    <div
      data-index={index}
      className={cn(
        "hover:bg-muted/25 grid items-center gap-1 border-b px-2 py-1 [contain:layout_paint_style]",
        isLastRow && "border-b-0",
      )}
      style={rowStyle}
    >
      {columns.map((column) => {
        const path = joinJsonFormPath(rowPath, column.key);
        const value = rowValue?.[encodeJsonFormKey(column.key)];

return (
          <ArrayTableCell
            key={column.key}
            model={createArrayTableCellModel({
              path,
              sourcePath: joinJsonSourcePath(rowSourcePath, column.key),
              column,
              value,
              sourceLinked,
            })}
            column={column}
            activeCellStore={activeCellStore}
            setValue={setValue}
            closeEditor={closeEditor}
          />
        );
      })}
      <button
        type="button"
        className="text-muted-foreground hover:border-border hover:text-destructive focus-visible:ring-ring flex size-8 items-center justify-center rounded-md border border-transparent text-base leading-none transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
        onClick={() => remove(index)}
        aria-label="Remove row"
        disabled={!canRemove}
      >
        <X className="size-4" />
      </button>
    </div>
  );
});
6a:T59f,"use client";

import * as React from "react";

import { useMountEffect } from "@/hooks/use-mount-effect";

export type ArrayTableScrollHandlers = {
  onScrollStart: () => void;
  onScrollMove: () => void;
  onScrollEnd: () => void;
};

export function useArrayTableScrollActivity(
  scrollRef: React.RefObject<HTMLElement | null>,
  { onScrollStart, onScrollMove, onScrollEnd }: ArrayTableScrollHandlers,
) {
  const isScrollingRef = React.useRef(false);
  const scrollEndTimeoutRef = React.useRef(0);
  const callbacksRef = React.useRef({
    onScrollStart,
    onScrollMove,
    onScrollEnd,
  });
  callbacksRef.current = { onScrollStart, onScrollMove, onScrollEnd };

useMountEffect(() => {
    const scrollElement = scrollRef.current;
    if (!scrollElement) return;
    scrollElement.addEventListener("scroll", handleScroll, { passive: true });
    return () => {
      window.clearTimeout(scrollEndTimeoutRef.current);
      scrollElement.removeEventListener("scroll", handleScroll);
    };
  });
}
6b:T1778,"use client";

import * as React from "react";

import { getFixedGridCanvasStyle } from "@/components/ui/fixed-grid-layout";
import { WithDescription } from "@/components/json-form/disclosure";
import { labelFor, type Column } from "@/components/json-form/schema-model";
import { useSourceLinkedTableCells } from "@/components/json-form/source-link";
import {
  createArrayTableActiveCellStore,
  type ArrayTableActiveCellStore,
} from "@/components/json-form/table/array-table-active-cell-store";
import {
  FixedArrayTableBody,
  StaticArrayTableBody,
} from "@/components/json-form/table/array-table-body";
import {
  TABLE_SCROLL_THRESHOLD,
  TABLE_VIRTUALIZE_THRESHOLD,
} from "@/components/json-form/table/array-table-config";
import { ArrayTableRow } from "@/components/json-form/table/array-table-row";

export function ArrayTable({
  name,
  sourcePath,
  fields,
  remove,
  canRemove,
  columns,
}: {
  name: string;
  sourcePath: string;
  fields: { id: string }[];
  remove: (index: number) => void;
  canRemove: boolean;
  columns: Column[];
}) {
  const template = `${columns.map(() => "minmax(9rem, 1fr)").join(" ")} 2.25rem`;
  const minWidth = columns.length * 150 + 36;
  const activeCellStoreRef = React.useRef<ArrayTableActiveCellStore | null>(null);
  if (!activeCellStoreRef.current) {
    activeCellStoreRef.current = createArrayTableActiveCellStore();
  }
  const activeCellStore = activeCellStoreRef.current;
  const tableRef = React.useRef<HTMLDivElement>(null);
  const sourceTable = useSourceLinkedTableCells({
    tableRef,
    refreshKey: fields.length,
  });
  const sourceLinked = sourceTable.sourceLinked;
  const virtualize = fields.length > TABLE_VIRTUALIZE_THRESHOLD;
  const scrollHandlers = React.useMemo(
    () => ({
      onScrollStart: sourceTable.handleScrollStart,
      onScrollMove: sourceTable.handleScrollMove,
      onScrollEnd: sourceTable.handleScrollEnd,
    }),
    [sourceTable],
  );

const handleTableClickCapture = React.useCallback(
    (event: React.MouseEvent<HTMLDivElement>) => {
      const table = tableRef.current;
      const activeElement = table?.ownerDocument.activeElement;
      if (
        !(activeElement instanceof HTMLElement) ||
        activeElement.dataset.tableCellEditor !== "true" ||
        !table?.contains(activeElement) ||
        activeElement === event.target ||
        activeElement.contains(event.target as Node)
      ) {
        return;
      }
      activeElement.blur();
    },
    [],
  );

const handleTableClick = React.useCallback(
    (event: React.MouseEvent<HTMLDivElement>) => {
      const cell = sourceTable.getCellFromTarget(event.target);
      if (!cell) return;
      sourceTable.selectCellSource(cell);
      if (cell.dataset.tableCellEditable !== "true") return;
      const path = cell.dataset.tableCellPath;
      if (path) activeCellStore.setActivePath(path);
    },
    [activeCellStore, sourceTable],
  );

const handleTableKeyDown = React.useCallback(
    (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key !== "Enter" && event.key !== " ") return;
      const cell = sourceTable.getCellFromTarget(event.target);
      if (!cell || cell.dataset.tableCellEditable !== "true") return;
      const path = cell.dataset.tableCellPath;
      if (!path) return;
      sourceTable.selectCellSource(cell);
      event.preventDefault();
      activeCellStore.setActivePath(path);
    },
    [activeCellStore, sourceTable],
  );

const renderRow = React.useCallback(
    (index: number, rowTopPx?: number) => (
      <ArrayTableRow
        name={name}
        sourcePath={sourcePath}
        index={index}
        isLastRow={index === fields.length - 1}
        columns={columns}
        remove={remove}
        canRemove={canRemove}
        sourceLinked={sourceLinked}
        template={template}
        rowTopPx={rowTopPx}
        activeCellStore={activeCellStore}
      />
    ),
    [
      activeCellStore,
      name,
      sourcePath,
      fields.length,
      columns,
      remove,
      canRemove,
      sourceLinked,
      template,
    ],
  );

return (
    <div
      ref={tableRef}
      onClickCapture={handleTableClickCapture}
      onClick={handleTableClick}
      onKeyDown={handleTableKeyDown}
      onPointerMove={sourceLinked ? sourceTable.handlePointerMove : undefined}
      onPointerLeave={sourceLinked ? sourceTable.handlePointerLeave : undefined}
      onFocus={sourceTable.handleFocus}
      onBlur={sourceTable.handleBlur}
      className="bg-background overflow-x-auto"
    >
      <div style={getFixedGridCanvasStyle({ minWidth })}>
        <div
          className="bg-muted/35 grid h-9 items-center gap-1 border-b px-2"
          style={{ gridTemplateColumns: template }}
        >
          {columns.map((column) => (
            <div
              key={column.key}
              className="text-muted-foreground flex min-w-0 items-center gap-1 px-2 text-xs font-medium"
            >
              <WithDescription text={column.schema.description}>
                <span className="truncate">
                  {labelFor(column.key, column.schema)}
                </span>
              </WithDescription>
              {column.required ? (
                <span className="text-destructive">*</span>
              ) : null}
            </div>
          ))}
          <span className="sr-only">Actions</span>
        </div>
        {virtualize ? (
          <FixedArrayTableBody
            fields={fields}
            scrollHandlers={scrollHandlers}
            renderItem={renderRow}
          />
        ) : fields.length > TABLE_SCROLL_THRESHOLD ? (
          <StaticArrayTableBody
            fields={fields}
            scrollHandlers={scrollHandlers}
            renderItem={renderRow}
          />
        ) : (
          <div>
            {fields.map((entry, index) => (
              <React.Fragment key={entry.id}>{renderRow(index)}</React.Fragment>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
6c:T758,"use client";

import * as React from "react";

import { FixedGridRowWindow } from "@/components/ui/fixed-grid-row-window";
import { useMeasuredRowVirtualization } from "@/components/ui/measured-row-virtualization";

export function VirtualList({
  fields,
  estimateSize,
  renderItem,
  maxHeight = 480,
  gap = 0,
}: {
  fields: { id: string }[];
  estimateSize: number;
  renderItem: (index: number) => React.ReactNode;
  maxHeight?: number;
  gap?: number;
}) {
  const parentRef = React.useRef<HTMLDivElement>(null);
  const getItemKey = React.useCallback(
    (index: number) => fields[index]?.id ?? index,
    [fields],
  );
  const { measureRow, totalSize, viewportClientHeight, virtualRowWindow } =
    useMeasuredRowVirtualization({
      count: fields.length,
      estimateSize: estimateSize + gap,
      getItemKey,
      overscan: 8,
      scrollRef: parentRef,
    });

return (
    <div ref={parentRef} style={{ maxHeight }} className="overflow-y-auto">
      <FixedGridRowWindow
        data-slot="json-form-virtual-list-spacer"
        totalSize={totalSize}
        virtualRowWindow={virtualRowWindow}
        viewportHeight={viewportClientHeight}
        offsetDataSlot="json-form-virtual-list-row-offset"
        windowDataSlot="json-form-virtual-list-row-window"
      >
        {virtualRowWindow.items.map((virtualRow) => (
          <div
            key={virtualRow.key}
            data-index={virtualRow.index}
            ref={(element) => measureRow(virtualRow.index, element)}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              width: "100%",
              transform: `translateY(${virtualRow.start}px)`,
              paddingBottom: gap,
            }}
          >
            {renderItem(virtualRow.index)}
          </div>
        ))}
      </FixedGridRowWindow>
    </div>
  );
}
6d:T3ca6,"use client";

import * as React from "react";

import { useKeyedLayoutEffect } from "@/hooks/use-keyed-layout-effect";
import { joinEffectKey } from "@/lib/effect-key";

const DEFAULT_INITIAL_VIEWPORT_HEIGHT = 600;
const DEFAULT_OVERSCAN = 6;
const MAX_VIRTUAL_ITEMS = 1_000;

export interface MeasuredRowVirtualItem {
  index: number;
  key: React.Key;
  start: number;
  size: number;
  end: number;
}

export interface MeasuredRowVirtualItemWindow {
  end: number;
  items: MeasuredRowVirtualItem[];
  size: number;
  start: number;
}

export interface MeasuredRowOffsets {
  starts: number[];
  totalSize: number;
}

export interface MeasuredRowScrollTarget {
  align?: "start" | "center" | "end";
  behavior?: ScrollBehavior;
}

export function buildMeasuredRowOffsets({
  rowSizes,
  paddingStart = 0,
  paddingEnd = 0,
}: {
  rowSizes: readonly number[];
  paddingStart?: number;
  paddingEnd?: number;
}): MeasuredRowOffsets {
  const starts: number[] = [];
  let offset = safeSize(paddingStart);

for (const rowSize of rowSizes) {
    starts.push(offset);
    offset += safeSize(rowSize);
  }

return {
    starts,
    totalSize: offset + safeSize(paddingEnd),
  };
}

export function getMeasuredRowVirtualItems({
  getItemKey,
  maxItems = MAX_VIRTUAL_ITEMS,
  offsets,
  overscan = DEFAULT_OVERSCAN,
  rowSizes,
  scrollTop,
  viewportHeight,
}: {
  getItemKey?: (index: number) => React.Key;
  maxItems?: number;
  offsets: MeasuredRowOffsets;
  overscan?: number;
  rowSizes: readonly number[];
  scrollTop: number;
  viewportHeight: number;
}): MeasuredRowVirtualItem[] {
  const count = rowSizes.length;
  if (count === 0) return [];

return Array.from({ length: cappedEnd - cappedStart }, (_, offset) => {
    const index = cappedStart + offset;
    const rowStart = offsets.starts[index] ?? 0;
    const size = safeSize(rowSizes[index]);
    return {
      index,
      key: getItemKey?.(index) ?? index,
      start: rowStart,
      size,
      end: rowStart + size,
    };
  });
}

export function measuredRowVirtualItemWindow(
  items: readonly MeasuredRowVirtualItem[],
): MeasuredRowVirtualItemWindow {
  const start = items[0]?.start ?? 0;
  const end = items.length ? items[items.length - 1]!.end : start;

return {
    end,
    items: items.map((item) => ({
      ...item,
      start: item.start - start,
      end: item.end - start,
    })),
    size: Math.max(0, end - start),
    start,
  };
}

export function measuredRowScrollTopForIndex({
  align = "center",
  index,
  offsets,
  rowSizes,
  viewportHeight,
}: {
  align?: NonNullable<MeasuredRowScrollTarget["align"]>;
  index: number;
  offsets: MeasuredRowOffsets;
  rowSizes: readonly number[];
  viewportHeight: number;
}) {
  if (!Number.isSafeInteger(index) || index < 0) return 0;

const rowStart = offsets.starts[index];
  if (rowStart == null) return 0;

const rowSize = safeSize(rowSizes[index]);
  const safeViewportHeight = safeSize(viewportHeight);

if (align === "end")
    return Math.max(0, rowStart - safeViewportHeight + rowSize);
  if (align === "center") {
    return Math.max(0, rowStart - safeViewportHeight / 2 + rowSize / 2);
  }
  return Math.max(0, rowStart);
}

export function useMeasuredRowVirtualization({
  count,
  estimateSize,
  getItemKey,
  initialViewportHeight = DEFAULT_INITIAL_VIEWPORT_HEIGHT,
  overscan = DEFAULT_OVERSCAN,
  paddingEnd = 0,
  paddingStart = 0,
  scrollRef,
}: {
  count: number;
  estimateSize: number;
  getItemKey?: (index: number) => React.Key;
  initialViewportHeight?: number;
  overscan?: number;
  paddingEnd?: number;
  paddingStart?: number;
  scrollRef: React.RefObject<HTMLElement | null>;
}) {
  const safeCount = measuredRowCount(count);
  const safeEstimateSize = Math.max(1, safeSize(estimateSize));
  const [version, forceVersion] = React.useReducer(
    (current: number) => current + 1,
    0,
  );
  const [scrollElement, setScrollElement] = React.useState<HTMLElement | null>(
    scrollRef.current,
  );
  const [viewport, setViewport] = React.useState({
    clientHeight: 0,
    scrollTop: 0,
  });
  const measuredSizesRef = React.useRef(new Map<number, number>());
  const rowElementsRef = React.useRef(new Map<number, HTMLElement>());
  const observedIndexesRef = React.useRef(new Map<HTMLElement, number>());
  const rowObserverRef = React.useRef<ResizeObserver | null>(null);
  const offsetsRef = React.useRef<MeasuredRowOffsets>({
    starts: [],
    totalSize: 0,
  });
  const rowSizesRef = React.useRef<number[]>([]);
  const viewportRef = React.useRef(viewport);

viewportRef.current = viewport;

const updateMeasuredSize = React.useCallback(
    (index: number, nextSize: number | null) => {
      if (!Number.isSafeInteger(index) || index < 0 || index >= safeCount) {
        return;
      }
      if (nextSize == null) return;

const safeNextSize = safeSize(nextSize);
      if (safeNextSize <= 0) return;

const measuredSizes = measuredSizesRef.current;
      const previousSize = measuredSizes.get(index) ?? safeEstimateSize;
      if (previousSize === safeNextSize) return;

const previousOffsets = offsetsRef.current;
      const previousStart = previousOffsets.starts[index] ?? 0;
      const previousEnd = previousStart + previousSize;
      const delta = safeNextSize - previousSize;
      const currentScrollTop = viewportRef.current.scrollTop;

measuredSizes.set(index, safeNextSize);

const currentScrollElement = scrollRef.current;
      if (
        currentScrollElement &&
        previousEnd <= currentScrollTop &&
        delta !== 0
      ) {
        currentScrollElement.scrollTop = Math.max(
          0,
          currentScrollElement.scrollTop + delta,
        );
        setViewport((current) => ({
          ...current,
          scrollTop: safeOffset(currentScrollElement.scrollTop),
        }));
      }

forceVersion();
    },
    [safeCount, safeEstimateSize, scrollRef],
  );

const measureRow = React.useCallback(
    (index: number, element: HTMLElement | null) => {
      if (!Number.isSafeInteger(index) || index < 0) return;

const rowElements = rowElementsRef.current;
      const previousElement = rowElements.get(index);
      if (previousElement && previousElement !== element) {
        rowObserverRef.current?.unobserve(previousElement);
        observedIndexesRef.current.delete(previousElement);
        rowElements.delete(index);
      }

if (!element) return;

rowElements.set(index, element);
      observedIndexesRef.current.set(element, index);
      rowObserverRef.current?.observe(element);
      updateMeasuredSize(index, readElementHeight(element));
    },
    [updateMeasuredSize],
  );

useKeyedLayoutEffect(
    joinEffectKey([scrollRef, scrollRef.current, scrollElement]),
    () => {
      const nextScrollElement = scrollRef.current;
      if (nextScrollElement !== scrollElement) {
        setScrollElement(nextScrollElement);
      }
    },
  );

useKeyedLayoutEffect(
    joinEffectKey([scrollElement, updateMeasuredSize]),
    () => {
      if (typeof ResizeObserver === "undefined") return;

const observer = new ResizeObserver((entries) => {
        for (const entry of entries) {
          const index = observedIndexesRef.current.get(
            entry.target as HTMLElement,
          );
          if (index == null) continue;
          updateMeasuredSize(index, readResizeEntryHeight(entry));
        }
      });

rowObserverRef.current = observer;
      for (const element of rowElementsRef.current.values()) {
        observer.observe(element);
      }

return () => {
        observer.disconnect();
        if (rowObserverRef.current === observer) rowObserverRef.current = null;
      };
    },
  );

useKeyedLayoutEffect(
    joinEffectKey([scrollElement, initialViewportHeight]),
    () => {
      if (!scrollElement) {
        setViewport({ clientHeight: 0, scrollTop: 0 });
        return;
      }

readViewport();
      scrollElement.addEventListener("scroll", scheduleRead, { passive: true });
      const observer =
        typeof ResizeObserver !== "undefined"
          ? new ResizeObserver(scheduleRead)
          : null;
      observer?.observe(scrollElement);

return () => {
        if (frame) cancelFrame(frame);
        scrollElement.removeEventListener("scroll", scheduleRead);
        observer?.disconnect();
      };
    },
  );

offsetsRef.current = offsets;
  rowSizesRef.current = rowSizes;

return {
    measureRow,
    scrollToIndex,
    totalSize: offsets.totalSize,
    viewportClientHeight: viewportHeight,
    virtualRowWindow,
    virtualRows,
  };
}

function capMeasuredRowRange({
  count,
  end,
  maxItems,
  start,
  visibleEnd,
  visibleStart,
}: {
  count: number;
  end: number;
  maxItems: number;
  start: number;
  visibleEnd: number;
  visibleStart: number;
}) {
  const safeMaxItems = Math.max(1, safeCount(maxItems));
  if (end - start <= safeMaxItems) return [start, end] as const;

const visibleCount = Math.min(
    safeMaxItems,
    Math.max(1, visibleEnd - visibleStart),
  );
  const leadingBudget = Math.floor((safeMaxItems - visibleCount) / 2);
  let cappedStart = Math.max(start, visibleStart - leadingBudget);
  let cappedEnd = Math.min(end, cappedStart + safeMaxItems);

if (cappedEnd - cappedStart < safeMaxItems) {
    cappedStart = Math.max(start, cappedEnd - safeMaxItems);
  }
  if (cappedEnd < visibleEnd) {
    cappedEnd = Math.min(end, visibleEnd);
    cappedStart = Math.max(start, cappedEnd - safeMaxItems);
  }
  cappedEnd = Math.min(count, cappedEnd);

return [cappedStart, cappedEnd] as const;
}

function findFirstRowEndingAfter({
  offset,
  rowSizes,
  starts,
}: {
  offset: number;
  rowSizes: readonly number[];
  starts: readonly number[];
}) {
  let low = 0;
  let high = rowSizes.length - 1;
  let result = rowSizes.length - 1;

while (low <= high) {
    const middle = Math.floor((low + high) / 2);
    const end = (starts[middle] ?? 0) + safeSize(rowSizes[middle]);
    if (end > offset) {
      result = middle;
      high = middle - 1;
    } else {
      low = middle + 1;
    }
  }

return result;
}

function findFirstRowStartingAtOrAfter({
  offset,
  starts,
}: {
  offset: number;
  starts: readonly number[];
}) {
  let low = 0;
  let high = starts.length - 1;
  let result = starts.length;

while (low <= high) {
    const middle = Math.floor((low + high) / 2);
    if ((starts[middle] ?? 0) >= offset) {
      result = middle;
      high = middle - 1;
    } else {
      low = middle + 1;
    }
  }

return result;
}

function readElementHeight(element: HTMLElement) {
  const rectHeight = element.getBoundingClientRect().height;
  if (Number.isFinite(rectHeight) && rectHeight > 0) return rectHeight;
  return element.offsetHeight;
}

function requestFrame(callback: FrameRequestCallback) {
  if (typeof window !== "undefined" && window.requestAnimationFrame) {
    return window.requestAnimationFrame(callback);
  }
  return setTimeout(() => callback(performance.now()), 0) as unknown as number;
}

function cancelFrame(frame: number) {
  if (typeof window !== "undefined" && window.cancelAnimationFrame) {
    window.cancelAnimationFrame(frame);
    return;
  }
  clearTimeout(frame);
}

function measuredRowCount(count: number) {
  return Number.isFinite(count) && count > 0 ? Math.floor(count) : 0;
}

function safeCount(value: number) {
  return Number.isFinite(value) && value > 0 ? Math.floor(value) : 0;
}

function safeOffset(value: number) {
  return Number.isFinite(value) && value > 0 ? value : 0;
}

type ArrayTableDataCellSharedProps = {
  active: boolean;
  autoFocus: boolean;
  editable: boolean;
  name: string;
  onCommit: CommitArrayTableCellValue;
  onEditingEnd: () => void;
  role?: "button";
  tabIndex: 0;
  "aria-label": string;
  "data-table-cell-editable"?: "true";
  "data-table-cell-editor"?: "true";
  "data-table-cell-path"?: string;
};

export function createArrayTableDataCellProps({
  column,
  commitValue,
  isEditing,
  model,
  onEditingEnd,
}: {
  column: Column;
  commitValue: CommitArrayTableCellValue;
  isEditing: boolean;
  model: ArrayTableCellModel;
  onEditingEnd: () => void;
}): DataCellProps {
  const sharedProps = arrayTableDataCellSharedProps({
    commitValue,
    isEditing,
    model,
    onEditingEnd,
  });

if (column.kind === "enum") {
    return arrayTableSelectDataCellProps({
      column,
      commitValue,
      model,
      sharedProps,
    });
  }

if (model.kind === "number" || model.kind === "integer") {
    return {
      ...arrayTableCellProps(model, { isEditing }),
      ...sharedProps,
      kind: model.kind,
      value: dataCellNumberValue(model.value),
      formatValue: () => model.displayText,
      placeholder: "",
    };
  }

if (model.kind === "boolean") {
    return {
      ...arrayTableCellProps(model, { isEditing }),
      ...sharedProps,
      kind: "boolean",
      value:
        model.value === null || model.value === undefined
          ? null
          : Boolean(model.value),
    };
  }

if (model.kind === "date") {
    return {
      ...arrayTableCellProps(model, { isEditing }),
      ...sharedProps,
      kind: "date",
      value: dataCellTextValue(model.value),
      formatValue: () => model.displayText,
      placeholder: "",
    };
  }

if (model.kind === "time") {
    return {
      ...arrayTableCellProps(model, { isEditing }),
      ...sharedProps,
      kind: "time",
      value: dataCellTextValue(model.value),
      formatValue: () => model.displayText,
      placeholder: "",
    };
  }

if (model.kind === "date-time") {
    return {
      ...arrayTableCellProps(model, { isEditing }),
      ...sharedProps,
      kind: "date-time",
      value: dataCellTextValue(model.value),
      formatValue: () => model.displayText,
      placeholder: "",
    };
  }

return {
    ...arrayTableCellProps(model, { isEditing }),
    ...sharedProps,
    kind: "text",
    value: dataCellTextValue(model.value),
    formatValue: () => model.displayText,
    placeholder: "",
  };
}

function enumOptionValue(index: number): string {
  return `enum:${index}`;
}

function arrayTableSelectOptions(column: Column): DataCellSelectOption[] {
  const enumValues = column.schema.enum ?? [];
  const hasNullEnumValue = enumValues.some((value) => value === null);
  const nullableOptions: DataCellSelectOption[] =
    column.nullable && !hasNullEnumValue
      ? [{ value: NULL_SELECT_VALUE, label: "No value" }]
      : [];

return [
    ...nullableOptions,
    ...enumValues.map((value, index) => ({
      value: enumOptionValue(index),
      label: enumLabel(value),
    })),
  ];
}

function arrayTableSelectValue({
  column,
  value,
}: {
  column: Column;
  value: unknown;
}): string | null {
  const enumIndex =
    column.schema.enum?.findIndex((candidate) =>
      enumValueEquals(candidate, value),
    ) ?? -1;

if (enumIndex >= 0) return enumOptionValue(enumIndex);
  if (value === null && column.nullable) return NULL_SELECT_VALUE;
  return null;
}

import * as React from "react";

import { useMountEffect } from "@/hooks/use-mount-effect";

type SourceLinkFocusModality = "none" | "keyboard" | "pointer";
type SourceLinkFocusIntentState = {
  modality: SourceLinkFocusModality;
};

const sourceLinkFocusIntentByDocument = new WeakMap<
  Document,
  SourceLinkFocusIntentState
>();

function isKeyboardFocusNavigation(event: KeyboardEvent): boolean {
  if (
    event.defaultPrevented ||
    event.altKey ||
    event.ctrlKey ||
    event.metaKey
  ) {
    return false;
  }
  return (
    event.key === "Tab" ||
    event.key === "ArrowDown" ||
    event.key === "ArrowLeft" ||
    event.key === "ArrowRight" ||
    event.key === "ArrowUp" ||
    event.key === "End" ||
    event.key === "Home" ||
    event.key === "PageDown" ||
    event.key === "PageUp"
  );
}

function getSourceLinkFocusIntentState(
  ownerDocument: Document,
): SourceLinkFocusIntentState {
  const existingState = sourceLinkFocusIntentByDocument.get(ownerDocument);
  if (existingState) return existingState;

const state: SourceLinkFocusIntentState = { modality: "none" };
  sourceLinkFocusIntentByDocument.set(ownerDocument, state);

ownerDocument.addEventListener(
    "keydown",
    (event) => {
      if (isKeyboardFocusNavigation(event)) state.modality = "keyboard";
    },
    true,
  );
  ownerDocument.addEventListener(
    "pointerdown",
    () => {
      state.modality = "pointer";
    },
    true,
  );
  ownerDocument.addEventListener(
    "mousedown",
    () => {
      state.modality = "pointer";
    },
    true,
  );
  ownerDocument.addEventListener(
    "touchstart",
    () => {
      state.modality = "pointer";
    },
    true,
  );

return state;
}

export function useSourceLinkFocusPreviewIntent() {
  useMountEffect(() => {
    getSourceLinkFocusIntentState(document).modality = "none";
  });

return React.useCallback((event: React.FocusEvent<HTMLElement>): boolean => {
    if (event.defaultPrevented) return false;
    return (
      getSourceLinkFocusIntentState(event.currentTarget.ownerDocument)
        .modality === "keyboard"
    );
  }, []);
}
50:["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/new-york-v4/blocks/extract-viewer-block.tsx","content":"$53","type":"registry:component","target":"@components/blocks/extract-viewer-block.tsx"},{"path":"components/viewers/sample-data/extract.json","content":"$54","type":"registry:file","target":"@components/viewers/sample-data/extract.json"},{"path":"components/json-form/array-fields.tsx","content":"$55","type":"registry:component","target":"@components/json-form/array-fields.tsx"},{"path":"components/json-form/disclosure.tsx","content":"$56","type":"registry:component","target":"@components/json-form/disclosure.tsx"},{"path":"components/json-form/field-renderer.ts","content":"import type * as React from \"react\";\n\nimport type { JsonFormTextInput } from \"@/components/json-form/scalar-control\";\nimport type { Schema } from \"@/components/json-form/schema-model\";\n\nexport interface JsonFormFieldRenderProps {\n  name: string;\n  sourcePath?: string;\n  schema: Schema;\n  required?: boolean;\n  label?: string;\n  textInput?: JsonFormTextInput;\n  className?: string;\n  depth?: number;\n}\n\nexport type RenderJsonFormField = (\n  props: JsonFormFieldRenderProps,\n) => React.ReactNode;\n","type":"registry:component","target":"@components/json-form/field-renderer.ts"},{"path":"components/json-form/form-primitives.tsx","content":"$57","type":"registry:component","target":"@components/json-form/form-primitives.tsx"},{"path":"components/json-form/json-form-constants.ts","content":"export const AUTO_COLLAPSE_DEPTH = 1;\nexport const CARD_VIRTUALIZE_THRESHOLD = 30;\nexport const LONG_ARRAY_THRESHOLD = 8;\n","type":"registry:component","target":"@components/json-form/json-form-constants.ts"},{"path":"components/json-form/json-form.tsx","content":"$58","type":"registry:component","target":"@components/json-form/json-form.tsx"},{"path":"components/json-form/object-fields.tsx","content":"$59","type":"registry:component","target":"@components/json-form/object-fields.tsx"},{"path":"components/json-form/open-paths.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\n\nexport const JsonFormOpenPathsContext =\n  React.createContext<ReadonlySet<string> | null>(null);\n\nexport function useJsonFormStartsOpen(sourcePath: string, fallback: boolean) {\n  return (\n    React.useContext(JsonFormOpenPathsContext)?.has(sourcePath) ?? fallback\n  );\n}\n","type":"registry:component","target":"@components/json-form/open-paths.tsx"},{"path":"components/json-form/path-codec.ts","content":"$5a","type":"registry:component","target":"@components/json-form/path-codec.ts"},{"path":"components/json-form/scalar-control.tsx","content":"$5b","type":"registry:component","target":"@components/json-form/scalar-control.tsx"},{"path":"components/json-form/scalar/boolean-control.tsx","content":"$5c","type":"registry:component","target":"@components/json-form/scalar/boolean-control.tsx"},{"path":"components/json-form/scalar/date-time-control.tsx","content":"$5d","type":"registry:component","target":"@components/json-form/scalar/date-time-control.tsx"},{"path":"components/json-form/scalar/enum-control.tsx","content":"$5e","type":"registry:component","target":"@components/json-form/scalar/enum-control.tsx"},{"path":"components/json-form/scalar/number-control.tsx","content":"$5f","type":"registry:component","target":"@components/json-form/scalar/number-control.tsx"},{"path":"components/json-form/scalar/text-control.tsx","content":"$60","type":"registry:component","target":"@components/json-form/scalar/text-control.tsx"},{"path":"components/json-form/scalar/types.ts","content":"$61","type":"registry:component","target":"@components/json-form/scalar/types.ts"},{"path":"components/json-form/schema-model.ts","content":"$62","type":"registry:component","target":"@components/json-form/schema-model.ts"},{"path":"components/json-form/source-link-table-hover.ts","content":"$63","type":"registry:component","target":"@components/json-form/source-link-table-hover.ts"},{"path":"components/json-form/source-link.tsx","content":"$64","type":"registry:component","target":"@components/json-form/source-link.tsx"},{"path":"components/json-form/table/array-table-body.tsx","content":"$65","type":"registry:component","target":"@components/json-form/table/array-table-body.tsx"},{"path":"components/json-form/table/array-table-cell-commit.ts","content":"$66","type":"registry:component","target":"@components/json-form/table/array-table-cell-commit.ts"},{"path":"components/json-form/table/array-table-cell-model.ts","content":"import { labelFor, type Column } from \"@/components/json-form/schema-model\";\nimport {\n  dataCellKindForColumn,\n  formatArrayTableCellValue,\n  type ArrayTableDataCellKind,\n} from \"@/components/json-form/table/array-table-format\";\n\nexport type ArrayTableCellModel = {\n  path: string;\n  sourcePath: string;\n  label: string;\n  displayText: string;\n  kind: ArrayTableDataCellKind;\n  value: unknown;\n  isEnum: boolean;\n  sourceLinked: boolean;\n};\n\nexport function createArrayTableCellModel({\n  path,\n  sourcePath,\n  column,\n  value,\n  sourceLinked,\n}: {\n  path: string;\n  sourcePath: string;\n  column: Column;\n  value: unknown;\n  sourceLinked: boolean;\n}): ArrayTableCellModel {\n  const isEnum = column.kind === \"enum\";\n\n  return {\n    path,\n    sourcePath,\n    label: labelFor(column.key, column.schema),\n    displayText: formatArrayTableCellValue({ value, column }),\n    kind: dataCellKindForColumn(column),\n    value,\n    isEnum,\n    sourceLinked,\n  };\n}\n","type":"registry:component","target":"@components/json-form/table/array-table-cell-model.ts"},{"path":"components/json-form/table/array-table-cell-props.ts","content":"import { cn } from \"@/lib/utils\";\nimport type { ArrayTableCellModel } from \"@/components/json-form/table/array-table-cell-model\";\n\nexport function arrayTableCellClassName({\n  isEditing,\n  model,\n}: {\n  isEditing: boolean;\n  model: ArrayTableCellModel;\n}): string {\n  return cn(\n    \"min-w-0 rounded text-sm data-[source-active=true]:bg-primary/5 data-[source-active=true]:ring-1 data-[source-active=true]:ring-primary/30\",\n    !isEditing\n      ? \"hover:bg-background focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring/30\"\n      : \"px-1 py-0.5\",\n    model.sourceLinked && isEditing && \"hover:bg-muted/55\",\n  );\n}\n\nexport function arrayTableCellProps(\n  model: ArrayTableCellModel,\n  { isEditing = false }: { isEditing?: boolean } = {},\n) {\n  return {\n    \"data-slot\": \"data-cell\",\n    \"data-table-cell\": \"\",\n    \"data-source-path\": model.sourceLinked ? model.sourcePath : undefined,\n    className: arrayTableCellClassName({ isEditing, model }),\n  };\n}\n","type":"registry:component","target":"@components/json-form/table/array-table-cell-props.ts"},{"path":"components/json-form/table/array-table-cell.tsx","content":"$67","type":"registry:component","target":"@components/json-form/table/array-table-cell.tsx"},{"path":"components/json-form/table/array-table-config.ts","content":"export const TABLE_MAX_HEIGHT = 420;\nexport const TABLE_ROW_HEIGHT = 44;\nexport const TABLE_SCROLL_THRESHOLD = Math.floor(\n  TABLE_MAX_HEIGHT / TABLE_ROW_HEIGHT,\n);\nexport const TABLE_VIRTUALIZE_THRESHOLD = TABLE_SCROLL_THRESHOLD * 3;\nexport const TABLE_ROW_OVERSCAN = 3;\nexport const TABLE_JUMP_ROW_OVERSCAN = 6;\n","type":"registry:component","target":"@components/json-form/table/array-table-config.ts"},{"path":"components/json-form/table/array-table-format.ts","content":"$68","type":"registry:component","target":"@components/json-form/table/array-table-format.ts"},{"path":"components/json-form/table/array-table-row.tsx","content":"$69","type":"registry:component","target":"@components/json-form/table/array-table-row.tsx"},{"path":"components/json-form/table/array-table-scroll.ts","content":"$6a","type":"registry:component","target":"@components/json-form/table/array-table-scroll.ts"},{"path":"components/json-form/table/array-table.tsx","content":"$6b","type":"registry:component","target":"@components/json-form/table/array-table.tsx"},{"path":"components/json-form/virtual-list.tsx","content":"$6c","type":"registry:component","target":"@components/json-form/virtual-list.tsx"},{"path":"registry/new-york-v4/ui/measured-row-virtualization.ts","content":"$6d","type":"registry:ui","target":"@ui/measured-row-virtualization.ts"},{"path":"components/json-form/table/array-table-active-cell-store.ts","content":"\"use client\";\n\nimport * as React from \"react\";\n\nexport type ArrayTableActiveCellStore = {\n  getSnapshot: () => string | null;\n  setActivePath: (path: string | null) => void;\n  subscribe: (listener: () => void) => () => void;\n};\n\nexport function createArrayTableActiveCellStore(): ArrayTableActiveCellStore {\n  let activePath: string | null = null;\n  const listeners = new Set<() => void>();\n\n  return {\n    getSnapshot: () => activePath,\n    setActivePath: (path) => {\n      if (activePath === path) return;\n      activePath = path;\n      listeners.forEach((listener) => listener());\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n  };\n}\n\nexport function useArrayTableCellActive(\n  store: ArrayTableActiveCellStore,\n  path: string,\n): boolean {\n  return React.useSyncExternalStore(\n    store.subscribe,\n    () => store.getSnapshot() === path,\n    () => false,\n  );\n}\n","type":"registry:component","target":"@components/json-form/table/array-table-active-cell-store.ts"},{"path":"components/json-form/table/array-table-data-cell-props.ts","content":"$6e","type":"registry:component","target":"@components/json-form/table/array-table-data-cell-props.ts"},{"path":"components/json-form/source-link-focus-intent.ts","content":"$6f","type":"registry:component","target":"@components/json-form/source-link-focus-intent.ts"}]}]]}]
51:["$","section",null,{"className":"flex flex-col gap-4","id":"styles","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Styles"}],["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @4xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L70",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L71",null,{"orientation":"vertical"}],["$","$L71",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L70",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L71",null,{"orientation":"vertical"}],["$","$L71",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L70",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L71",null,{"orientation":"vertical"}],["$","$L71",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","p",null,{"className":"text-sm text-foreground/70 py-2 px-2","children":"No CSS found."}]}]]}]]}]}]]}]
</article></body></html>

Extract Viewer

Installation

Files

@components

@ui

Styles