@snackbit/opendil 0.1.0 → 0.2.0

package/dist/styles.css

@@ -317,6 +317,9 @@
 :where(.dil-scope) .animate-pulse {
   animation: var(--animate-pulse);
 }
+:where(.dil-scope) .cursor-default {
+  cursor: default;
+}
 :where(.dil-scope) .cursor-pointer {
   cursor: pointer;
 }
@@ -413,6 +416,9 @@
 :where(.dil-scope) .rounded-none {
   border-radius: 0;
 }
+:where(.dil-scope) .rounded-sm {
+  border-radius: calc(var(--radius) - 4px);
+}
 :where(.dil-scope) .rounded-xl {
   border-radius: calc(var(--radius) + 4px);
 }
@@ -572,12 +578,18 @@
 :where(.dil-scope) .pt-4 {
   padding-top: calc(var(--spacing) * 4);
 }
+:where(.dil-scope) .pr-2 {
+  padding-right: calc(var(--spacing) * 2);
+}
 :where(.dil-scope) .pb-3 {
   padding-bottom: calc(var(--spacing) * 3);
 }
 :where(.dil-scope) .pl-4 {
   padding-left: calc(var(--spacing) * 4);
 }
+:where(.dil-scope) .pl-8 {
+  padding-left: calc(var(--spacing) * 8);
+}
 :where(.dil-scope) .text-left {
   text-align: left;
 }
@@ -648,6 +660,9 @@
 :where(.dil-scope) .text-white {
   color: var(--color-white);
 }
+:where(.dil-scope) .lowercase {
+  text-transform: lowercase;
+}
 :where(.dil-scope) .tabular-nums {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -655,6 +670,9 @@
 :where(.dil-scope) .line-through {
   text-decoration-line: line-through;
 }
+:where(.dil-scope) .underline {
+  text-decoration-line: underline;
+}
 :where(.dil-scope) .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -917,9 +935,15 @@
     --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
   }
 }
+:where(.dil-scope) .data-\[disabled\]\:pointer-events-none[data-disabled] {
+  pointer-events: none;
+}
 :where(.dil-scope) .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 50%;
 }
+:where(.dil-scope) .data-\[highlighted\]\:bg-accent[data-highlighted] {
+  background-color: var(--accent);
+}
 :where(.dil-scope) .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
   height: calc(var(--spacing) * 1.5);
 }
@@ -953,6 +977,16 @@
 :where(.dil-scope) .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
   flex-direction: column;
 }
+:where(.dil-scope) .data-\[size\=sm\]\:px-2[data-size="sm"] {
+  padding-inline: calc(var(--spacing) * 2);
+}
+:where(.dil-scope) .data-\[state\=active\]\:bg-background[data-state="active"] {
+  background-color: var(--background);
+}
+:where(.dil-scope) .data-\[state\=active\]\:shadow-sm[data-state="active"] {
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
 :where(.dil-scope) .data-\[state\=checked\]\:border-primary[data-state="checked"] {
   border-color: var(--primary);
 }
@@ -988,60 +1022,54 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 }
-@media (prefers-color-scheme: dark) {
-  :where(.dil-scope) .dark\:border-input {
-    border-color: var(--input);
-  }
-  :where(.dil-scope) .dark\:bg-destructive\/60 {
-    background-color: var(--destructive);
+.dil-dark\:border-input:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *) {
+  border-color: var(--input);
+}
+.dil-dark\:bg-destructive\/60:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *) {
+  background-color: var(--destructive);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
   }
+}
+.dil-dark\:bg-input\/30:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *) {
+  background-color: var(--input);
   @supports (color: color-mix(in lab, red, red)) {
-    :where(.dil-scope) .dark\:bg-destructive\/60 {
-      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
-    }
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
   }
-  :where(.dil-scope) .dark\:bg-input\/30 {
-    background-color: var(--input);
+}
+@media (hover: hover) {
+  .dil-dark\:hover\:bg-accent\/50:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):hover {
+    background-color: var(--accent);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where(.dil-scope) .dark\:bg-input\/30 {
-      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    .dil-dark\:hover\:bg-accent\/50:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):hover {
+      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
     }
   }
-  @media (hover: hover) {
-    :where(.dil-scope) .dark\:hover\:bg-accent\/50:hover {
-      background-color: var(--accent);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.dil-scope) .dark\:hover\:bg-accent\/50:hover {
-        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
-      }
-    }
-    :where(.dil-scope) .dark\:hover\:bg-input\/50:hover {
-      background-color: var(--input);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.dil-scope) .dark\:hover\:bg-input\/50:hover {
-        background-color: color-mix(in oklab, var(--input) 50%, transparent);
-      }
-    }
+  .dil-dark\:hover\:bg-input\/50:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):hover {
+    background-color: var(--input);
   }
-  :where(.dil-scope) .dark\:focus-visible\:ring-destructive\/40:focus-visible {
-    --tw-ring-color: var(--destructive);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    .dil-dark\:hover\:bg-input\/50:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):hover {
+      background-color: color-mix(in oklab, var(--input) 50%, transparent);
     }
   }
-  :where(.dil-scope) .dark\:aria-invalid\:ring-destructive\/40[aria-invalid="true"] {
-    --tw-ring-color: var(--destructive);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
-    }
+}
+.dil-dark\:focus-visible\:ring-destructive\/40:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):focus-visible {
+  --tw-ring-color: var(--destructive);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
   }
-  :where(.dil-scope) .dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"] {
-    background-color: var(--primary);
+}
+.dil-dark\:aria-invalid\:ring-destructive\/40:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *)[aria-invalid="true"] {
+  --tw-ring-color: var(--destructive);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
   }
 }
+.dil-dark\:data-\[state\=checked\]\:bg-primary:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *)[data-state="checked"] {
+  background-color: var(--primary);
+}
 :where(.dil-scope) .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
   fill: var(--muted-foreground);
 }
@@ -1732,6 +1760,9 @@
   --dil-item-radius: 8px;
   --dil-success: #22825e;
   --dil-warning: #ad751a;
+  --dil-success-surface: #e5f5ee;
+  --dil-warning-surface: #fff2d9;
+  --dil-danger-surface: #fee8e8;
   --dil-tertiary: #8f8f8f;
   --dil-node-selected: #343d75;
   --dil-node-surface: #2a303b;
@@ -1772,6 +1803,9 @@
   --chart-5: #d78675;
 }
 @layer base {
+  .dil-scope {
+    position: relative;
+  }
   .dil-scope *,
   .dil-scope *::before,
   .dil-scope *::after {
@@ -1784,8 +1818,13 @@
   .dil-scope p {
     margin: 0;
   }
+  .dil-scope :is(button, input, select, textarea) {
+    color: inherit;
+    background-color: transparent;
+  }
 }
 .dil-scope {
+  color-scheme: light;
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-dil);
@@ -1802,6 +1841,7 @@
   font: inherit;
 }
 .dil-scope[data-theme="dark"] {
+  color-scheme: dark;
   --background: #171717;
   --foreground: #fafafa;
   --dil-text-color: #fafafa;
@@ -1820,6 +1860,11 @@
   --accent-foreground: #fafafa;
   --border: #454545;
   --input: #505050;
+  --dil-success: #5cc59a;
+  --dil-warning: #e2ad55;
+  --dil-success-surface: #1d3a2f;
+  --dil-warning-surface: #3d3020;
+  --dil-danger-surface: #432526;
 }
 :where(.dil-scope) .dil-document {
   overflow-wrap: anywhere;
@@ -1847,6 +1892,28 @@
 :where(.dil-scope) .dil-markdown strong {
   font-weight: 600;
 }
+:where(.dil-scope) .dil-markdown :where(ul, ol) {
+  margin-block: 1em;
+  padding-inline-start: 40px;
+}
+:where(.dil-scope) .dil-markdown :where(ul, ol) :where(ul, ol) {
+  margin-block: 0;
+}
+:where(.dil-scope) .dil-markdown ul {
+  list-style-type: disc;
+}
+:where(.dil-scope) .dil-markdown :where(ul, ol) ul {
+  list-style-type: circle;
+}
+:where(.dil-scope) .dil-markdown :where(ul, ol) :where(ul, ol) ul {
+  list-style-type: square;
+}
+:where(.dil-scope) .dil-markdown ol {
+  list-style-type: decimal;
+}
+:where(.dil-scope) .dil-markdown blockquote {
+  margin: 1em 40px;
+}
 :where(.dil-scope) .dil-markdown table {
   width: 100%;
   border-collapse: collapse;
@@ -1937,7 +2004,6 @@
 }
 :where(.dil-scope) .dil-legend-item[data-hidden="true"] {
   opacity: 0.45;
-  text-decoration: line-through;
 }
 :where(.dil-scope) .dil-legend-swatch {
   width: 11px;
@@ -1948,6 +2014,10 @@
 :where(.dil-scope) .dil-chart-series {
   transition: opacity 150ms ease;
 }
+:where(.dil-scope) .dil-chart-pie:has(.dil-chart-series:hover, .dil-chart-series:focus-visible)
+  .dil-chart-series:not(:hover, :focus-visible) {
+  opacity: 0.625;
+}
 :where(.dil-scope) .dil-tooltip {
   z-index: 60;
   max-width: min(24rem, calc(100vw - 16px));
@@ -1962,6 +2032,9 @@
 :where(.dil-scope) .dil-snap-tooltip {
   pointer-events: none;
 }
+:where(.dil-scope) .dil-snap-tooltip [data-emphasized="true"] span {
+  font-weight: 700;
+}
 :where(.dil-scope) .dil-code-block textarea {
   font-family: var(--font-mono, monospace);
   font-size: var(--text-xs, 0.75rem);

package/dist/types/agent-spec.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Primary DIL authoring instructions (genui.agent.md). Put this in the system
+ * prompt of the model that writes documents for this renderer version.
+ */
+export declare const agentSpec: string;
+/**
+ * Complete component and property reference (genui.agent.full.md) for
+ * targeted lookups, such as a retrieval tool or a larger context budget.
+ */
+export declare const agentSpecFull: string;
+/** Executable example catalog (genui.examples.md) with recipes per feature. */
+export declare const agentSpecExamples: string;

package/dist/types/components/ui/controls/select.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+declare const Select: import("react").FC<SelectPrimitive.SelectProps>;
+declare const SelectValue: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SelectViewport: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SelectItemIndicator: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const SelectItemText: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare function SelectPortal(props: ComponentProps<typeof SelectPrimitive.Portal>): import("react").JSX.Element;
+declare function SelectTrigger({ className, ...props }: ComponentProps<typeof SelectPrimitive.Trigger>): import("react").JSX.Element;
+declare function SelectContent({ className, ...props }: ComponentProps<typeof SelectPrimitive.Content>): import("react").JSX.Element;
+declare function SelectItem({ className, ...props }: ComponentProps<typeof SelectPrimitive.Item>): import("react").JSX.Element;
+declare function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>): import("react").JSX.Element;
+export { Select, SelectValue, SelectGroup, SelectPortal, SelectViewport, SelectItemIndicator, SelectItemText, SelectTrigger, SelectContent, SelectItem, SelectLabel, };

package/dist/types/components/ui/controls/tabs.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+declare function Tabs(props: ComponentProps<typeof TabsPrimitive.Root>): import("react").JSX.Element;
+declare function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>): import("react").JSX.Element;
+declare function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>): import("react").JSX.Element;
+declare function TabsContent(props: ComponentProps<typeof TabsPrimitive.Content>): import("react").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/types/components/ui/controls/toggle-group.d.ts

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
-import { toggleVariants } from "./toggle";
-declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
+import { toggleVariants } from "./toggle.js";
+declare function ToggleGroup({ className, variant, size, spacing, segmented, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
     spacing?: number;
+    segmented?: boolean;
 }): React.JSX.Element;
 declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
 export { ToggleGroup, ToggleGroupItem };

package/dist/types/components/ui/display/chart.d.ts

@@ -1,10 +1,6 @@
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import type { TooltipValueType } from "recharts";
-declare const THEMES: {
-    readonly light: "";
-    readonly dark: ".dark";
-};
 type TooltipNameType = number | string;
 export type ChartConfig = Record<string, {
     label?: React.ReactNode;
@@ -14,9 +10,9 @@ export type ChartConfig = Record<string, {
     theme?: never;
 } | {
     color?: never;
-    theme: Record<keyof typeof THEMES, string>;
+    theme: Record<"light" | "dark", string>;
 })>;
-declare function ChartContainer({ id, className, children, config, overlay, initialDimension, ...props }: React.ComponentProps<"div"> & {
+declare function ChartContainer({ id, className, children, config, overlay, initialDimension, style, ...props }: React.ComponentProps<"div"> & {
     config: ChartConfig;
     overlay?: React.ReactNode;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
@@ -25,21 +21,19 @@ declare function ChartContainer({ id, className, children, config, overlay, init
         height: number;
     };
 }): React.JSX.Element;
-declare const ChartStyle: ({ id, config }: {
-    id: string;
-    config: ChartConfig;
-}) => React.JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, emphasizedKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
+    /** Marks the row whose dataKey matches with `data-emphasized="true"` for styling. */
+    emphasizedKey?: string | undefined;
 } & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
 declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
     hideIcon?: boolean;
     nameKey?: string;
 } & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
-export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, };

package/dist/types/components/ui/media/carousel.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import { Button } from "../controls/button";
+import { Button } from "../controls/button.js";
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];

package/dist/types/components/ui/overlays/collapsible.d.ts

@@ -0,0 +1,6 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import type { ComponentProps } from "react";
+declare function Collapsible(props: ComponentProps<typeof CollapsiblePrimitive.Root>): import("react").JSX.Element;
+declare function CollapsibleTrigger(props: ComponentProps<typeof CollapsiblePrimitive.Trigger>): import("react").JSX.Element;
+declare function CollapsibleContent(props: ComponentProps<typeof CollapsiblePrimitive.Content>): import("react").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/types/components/ui/overlays/popover.d.ts

@@ -2,7 +2,8 @@ import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Content>;
+declare function PopoverContent(props: PopoverContentProps): React.JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
 declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;

package/dist/types/components/ui/overlays/ui-scope.d.ts

@@ -3,9 +3,25 @@ export declare function usePortalScope(): {
     container: HTMLElement | null;
     boundary?: Element;
 };
+/**
+ * Space below the viewport that overlays may extend into, in pixels. The
+ * iframe runtime provides it: the host grows a content-sized frame to show an
+ * overlay that extends past its bottom, so an overlay need not flip above its
+ * trigger, where the frame's top would clip it.
+ */
+export interface OverlayRoom {
+    below(): number;
+    subscribe(listener: () => void): () => void;
+}
+export declare const OverlayRoomContext: import("react").Context<OverlayRoom | null>;
+type Side = "top" | "right" | "bottom" | "left";
+export type CollisionPadding = number | Partial<Record<Side, number>>;
+/** Extends an overlay's collision padding by the room below the viewport. */
+export declare function useCollisionPadding(padding?: CollisionPadding): CollisionPadding;
 export interface UiScopeProps extends ComponentProps<"section"> {
     appearance?: "light" | "dark";
     tokens?: Readonly<Record<`--${string}`, string>>;
     boundary?: Element;
 }
 export declare function UiScope({ children, className, style, appearance, tokens, boundary, ...props }: UiScopeProps): import("react").JSX.Element;
+export {};

package/dist/types/dil/custom-component.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type ReactNode } from "react";
-import type { DilComponentProps } from "./customization";
+import type { DilComponentProps } from "./customization.js";
 export interface CustomComponentProps {
     component: ComponentType<DilComponentProps>;
     name: string;

package/dist/types/dil/dil-renderer.d.ts

@@ -1,54 +1,89 @@
 import { type Ref } from "react";
-import type { DilRendererHandle } from "./renderer-handle";
-import { type DilCustomization } from "./customization";
-import { type RendererMetrics } from "./renderer-environment";
-import type { ProgressiveReveal } from "./view/reveal-options";
-import type { AutoScroll } from "./view/scroll-options";
-import { type UpdateInterval } from "./runtime/presentation-scheduler";
+import type { DilRendererHandle } from "./renderer-handle.js";
+import type { DilCustomization } from "./customization.js";
+import type { RendererMetrics } from "./renderer-environment.js";
+import type { DilRenderError } from "./render-error.js";
+import type { ProgressiveReveal } from "./view/reveal-options.js";
+import type { AutoScroll, ScrollContainer } from "./view/scroll-options.js";
+import { type UpdateInterval } from "./runtime/presentation-scheduler.js";
+/**
+ * Starts loading the code that `mode="host"` and `mode="shadow"` share. Once
+ * it resolves, those modes render synchronously: their `ref` is set in the
+ * first commit and `renderToString` includes them.
+ */
+export declare function preloadHostRenderer(): Promise<void>;
 interface DilCommonProps {
     ref?: Ref<DilRendererHandle> | undefined;
     /** Append-only source prefix. Remount with a new key to replace it. */
     text: string;
     isStreaming?: boolean;
-    /** Show the receiving/completion label without affecting errors. */
+    /**
+     * Show the "Receiving document", "Incomplete" or "Complete" label. Errors
+     * and the note that a response ended early stay visible when false.
+     */
     showStatus?: boolean;
     /** Stagger newly shown blocks; disabled by default and under reduced motion. */
     progressiveReveal?: ProgressiveReveal;
     autoScroll?: AutoScroll;
+    /**
+     * What scrolls around the renderer, for `autoScroll` and for virtualized
+     * long content. Defaults to `"auto"`: the nearest ancestor that scrolls
+     * vertically, crossing Shadow DOM boundaries, or the window when none does.
+     * Pass `"window"`, an element, or a ref to an element to choose one.
+     */
+    scrollContainer?: ScrollContainer | undefined;
     /** Maximum streaming presentation frequency; user interaction remains immediate. */
     updateInterval?: UpdateInterval;
+    /** Color scheme of the stock components. Defaults to "light". */
+    appearance?: "light" | "dark" | undefined;
+    /**
+     * CSS custom properties applied to the renderer root, such as `--primary` or
+     * `--background`. The iframe mode accepts only values that cannot load
+     * resources and ignores the rest with a console warning.
+     */
+    tokens?: Readonly<Record<`--${string}`, string>> | undefined;
+    /**
+     * URL of the directory that serves frame.html. Defaults to "/opendil/". Only
+     * the iframe mode loads it; host and Shadow DOM modes ignore it, so a mode
+     * chosen at runtime can always pass the app's runtime location.
+     */
+    runtimeBaseUrl?: string | undefined;
     onFollowChange?: (following: boolean) => void;
     onInput?: (detail: {
         length: number;
     }) => void;
     onCommit?: (detail: RendererMetrics) => void;
+    /**
+     * Receives each distinct problem once, with a developer-facing message and,
+     * for parse problems, the offset in `text`. Readers see short generic
+     * wording instead. Syntax problems and documents that ended with unfinished
+     * structure are also logged with `console.warn`. One message reports at most
+     * 20 problems, then one `limit` error; the `incomplete` report always
+     * arrives. An exception thrown here is rethrown asynchronously and does not
+     * interrupt rendering.
+     */
+    onError?: ((error: DilRenderError) => void) | undefined;
 }
 export interface DilIsolatedRendererProps extends DilCommonProps {
-    mode?: "isolated";
-    runtimeBaseUrl?: string;
-    components?: never;
-    componentConfig?: never;
-    classNames?: never;
-    slots?: never;
-    tokens?: never;
-    className?: never;
-    appearance?: never;
-    shadowStyles?: never;
+    mode?: "isolated" | undefined;
+    components?: undefined;
+    componentConfig?: undefined;
+    classNames?: undefined;
+    slots?: undefined;
+    className?: undefined;
+    shadowStyles?: undefined;
 }
 interface DilStyledRendererProps extends DilCommonProps, DilCustomization {
-    runtimeBaseUrl?: never;
-    className?: string;
-    tokens?: Readonly<Record<`--${string}`, string>>;
-    appearance?: "light" | "dark";
+    className?: string | undefined;
 }
 export interface DilHostRendererProps extends DilStyledRendererProps {
     mode: "host";
-    shadowStyles?: never;
+    shadowStyles?: undefined;
 }
 export interface DilShadowRendererProps extends DilStyledRendererProps {
     mode: "shadow";
     /** Trusted application CSS installed inside this renderer's ShadowRoot. */
-    shadowStyles?: string;
+    shadowStyles?: string | undefined;
 }
 export type DilRendererProps = DilIsolatedRendererProps | DilHostRendererProps | DilShadowRendererProps;
 export declare function DilRenderer(props: DilRendererProps): import("react").JSX.Element;

package/dist/types/dil/isolation/frame-startup.d.ts

@@ -0,0 +1,18 @@
+/** Package version, compiled into both the renderer and the copied frame runtime. */
+export declare const RUNTIME_VERSION: string;
+/**
+ * The frame script runs before the frame document's load event, so a frame that
+ * loaded without announcing itself is not the OpenDIL runtime.
+ */
+export declare const READY_AFTER_LOAD_MS = 3000;
+/**
+ * frame.html pings the host every second while frame.js downloads, so this
+ * limit applies only to a frame that has sent nothing at all, such as an app
+ * page whose load event fired before the renderer hydrated.
+ */
+export declare const SILENT_FRAME_MS = 20000;
+export declare function startupFailureMessage(url: string): string;
+export declare function reportStartupFailure(url: string): void;
+/** Warns once per frame URL when the copied runtime and the renderer differ. */
+export declare function checkFrameVersion(url: string, version: unknown): void;
+export declare function reportRejectedTokens(names: readonly string[]): void;

package/dist/types/dil/isolation/frame-theme.d.ts

@@ -0,0 +1,14 @@
+export type Appearance = "light" | "dark";
+export type ThemeTokens = Readonly<Record<`--${string}`, string>>;
+export interface FrameTheme {
+    appearance: Appearance;
+    tokens: ThemeTokens;
+}
+export declare function isSafeTokenValue(value: string): boolean;
+/** Keeps valid custom properties and names everything it drops. */
+export declare function readThemeTokens(value: unknown): {
+    tokens: ThemeTokens;
+    rejected: string[];
+};
+/** Parses a port message into a theme, or returns undefined to ignore it. */
+export declare function readFrameTheme(data: object): FrameTheme | undefined;

package/dist/types/dil/isolation/frame-viewport.d.ts

@@ -0,0 +1,30 @@
+import type { ScrollRootTracker } from "../view/scroll/root-tracker.js";
+export interface FrameViewportMessage {
+    type: "viewport";
+    revision: number;
+    offset: number;
+    height: number;
+    width: number;
+}
+/**
+ * Tells the frame which part of it is visible in the host's scroller, the
+ * page or a scroll container, so virtualized content inside can mount.
+ */
+export declare class FrameViewportReporter {
+    private readonly frame;
+    private readonly scroller;
+    private readonly post;
+    private revision;
+    private lastOffset;
+    private observed;
+    private readonly stop;
+    constructor(frame: HTMLIFrameElement, scroller: ScrollRootTracker, post: (message: FrameViewportMessage) => void);
+    private visible;
+    report: () => void;
+    /**
+     * Scrolls the host until frame offset `offset` is at the visible top. A
+     * request from before the reader's latest scroll is discarded.
+     */
+    scroll(offset: number, revision: number): void;
+    dispose(): void;
+}