@snackbit/opendil 0.0.0 → 0.2.0

package/dist/types/dil/widgets/control-state.d.ts

@@ -0,0 +1,8 @@
+export interface ControlDraft<T> {
+    upstream: T;
+    value: T;
+    revision: number;
+    pending: number;
+}
+export declare function synchronizeDraft<T>(state: ControlDraft<T>, upstream: T, revision: number): ControlDraft<T>;
+export declare function editDraft<T>(state: ControlDraft<T>, value: T, result: unknown, commit: boolean): ControlDraft<T>;

package/dist/types/dil/widgets/controls.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import type { StoreApi } from "zustand/vanilla";
+import type { DocumentStatus } from "../runtime/document.js";
+import { type Attributes } from "./primitives/attribute-values.js";
+export declare const PopoverTriggerScope: import("react").Context<boolean>;
+export interface ControlProps {
+    attributes: Attributes;
+    children?: ReactNode;
+    ready: boolean;
+    label: string;
+    className?: string | undefined;
+    presentationRef?: ((element: HTMLElement | null) => void) | undefined;
+}
+/** Actions report clipboard outcomes from their own document. */
+export interface ActionProps extends ControlProps {
+    status: StoreApi<DocumentStatus>;
+}
+export declare function ButtonControl({ attributes, children, ready, label, className, presentationRef, status, }: ActionProps): import("react").JSX.Element;
+export declare function CheckboxControl({ attributes, children, ready, className, presentationRef, }: ControlProps): import("react").JSX.Element;
+export declare function SliderControl({ attributes, ready, label, className, presentationRef, }: ControlProps): import("react").JSX.Element;
+export declare function InputControl({ attributes, ready, label, className, presentationRef, }: ControlProps): import("react").JSX.Element;
+export declare function SegmentedControl({ attributes, ready, label, className, presentationRef, }: ControlProps): import("react").JSX.Element;
+export declare function RadioGroupControl({ attributes, children, ready, label, className, presentationRef, }: ControlProps): import("react").JSX.Element;
+export declare function RadioControl({ attributes, children, ready, className, presentationRef, }: ControlProps): import("react").JSX.Element;
+export declare function PressableControl({ attributes, children, ready, className, presentationRef, status, }: ActionProps): import("react").JSX.Element;

package/dist/types/dil/widgets/graphs/graph-model.d.ts

@@ -0,0 +1,13 @@
+import { type Edge, type Node } from "@xyflow/react";
+export declare const SERVICE_WIDTH = 160;
+export declare const SERVICE_HEIGHT = 72;
+export declare const COLUMN_GAP = 64;
+export type ServiceData = {
+    label: string;
+    sub: string;
+};
+export type ServiceGraphNode = Node<ServiceData, "service">;
+export declare function graphModel(content: unknown): {
+    nodes: ServiceGraphNode[];
+    edges: Edge[];
+};

package/dist/types/dil/widgets/graphs/node-graph.d.ts

@@ -0,0 +1,6 @@
+import { type Attributes } from "../primitives/attribute-values.js";
+export interface NodeGraphProps {
+    attributes: Attributes;
+    presentationRef?: ((element: HTMLElement | null) => void) | undefined;
+}
+export declare function NodeGraph({ attributes, presentationRef }: NodeGraphProps): import("react").JSX.Element;

package/dist/types/dil/widgets/graphs/service-node.d.ts

@@ -0,0 +1,3 @@
+import { type NodeProps } from "@xyflow/react";
+import type { ServiceGraphNode } from "./graph-model.js";
+export declare function ServiceNode({ data, selected }: NodeProps<ServiceGraphNode>): import("react").JSX.Element;

package/dist/types/dil/widgets/mermaid-diagram.d.ts

@@ -0,0 +1,5 @@
+export interface MermaidDiagramProps {
+    source: string;
+    presentationRef?: ((element: HTMLElement | null) => void) | undefined;
+}
+export declare function MermaidDiagram({ source, presentationRef, }: MermaidDiagramProps): import("react").JSX.Element | null;

package/dist/types/dil/widgets/primitives/attribute-values.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from "react";
+export type Attributes = Readonly<Record<string, unknown>>;
+export declare function text(value: unknown, fallback?: string): string;
+export declare function number(value: unknown, fallback?: number): number;
+export declare function record(value: unknown): Record<string, unknown>;
+export declare function invoke(attributes: Attributes, key: string, value?: unknown): any;
+/** Presentation-only SVG attributes; paint and marker references stay in the document. */
+export declare function svgAttributes(attributes: Attributes): Record<string, unknown>;
+export declare function color(value: unknown): string | undefined;
+export declare function layoutStyle(attributes: Attributes): CSSProperties & {
+    "--dil-columns"?: number;
+};

package/dist/types/dil/widgets/primitives/primitive.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import type { DilNode } from "../../parser/types.js";
+import type { DilDocument } from "../../runtime/document.js";
+import type { Scope } from "../../runtime/expressions.js";
+import { type Attributes } from "./attribute-values.js";
+export interface PrimitiveProps {
+    node: DilNode;
+    attributes: Attributes;
+    children: ReactNode;
+    document: DilDocument;
+    scope: Scope;
+    instance: string;
+    svg: boolean;
+    inline: boolean;
+    interactive: boolean;
+}
+export declare function Primitive({ node, attributes: sourceAttributes, children, document, instance, svg, inline, interactive, }: PrimitiveProps): import("react").JSX.Element;

package/dist/types/dil/widgets/primitives/vocabulary.d.ts

@@ -0,0 +1,5 @@
+import { Circle } from "lucide-react";
+export declare const ICONS: Record<string, typeof Circle>;
+export declare const LABELS: Record<string, string>;
+export declare const SIZES: Record<string, string>;
+export declare const SVG_ELEMENTS: Set<string>;

package/dist/types/dil/widgets/use-control-value.d.ts

@@ -0,0 +1,2 @@
+/** Retain immediate native feedback while the execution worker acknowledges updates. */
+export declare function useControlValue<T extends string | number | boolean>(upstream: T, action: unknown): readonly [T, (value: T, commit?: boolean) => void];

package/dist/types/index.d.ts

@@ -0,0 +1,9 @@
+export { DilRenderer, preloadHostRenderer } from "./dil/dil-renderer.js";
+export type { DilRendererHandle } from "./dil/renderer-handle.js";
+export type { AutoScroll, AutoScrollOptions, ScrollContainer, } from "./dil/view/scroll-options.js";
+export type { UpdateInterval } from "./dil/runtime/presentation-scheduler.js";
+export type { DilRendererProps, DilHostRendererProps, DilShadowRendererProps, DilIsolatedRendererProps, } from "./dil/dil-renderer.js";
+export type { DilComponentProps, DilCustomization } from "./dil/customization.js";
+export type { RendererMetrics } from "./dil/renderer-environment.js";
+export type { DilRenderError, DilRenderErrorKind } from "./dil/render-error.js";
+export type { ProgressiveRevealOptions, ProgressiveReveal, } from "./dil/view/reveal-options.js";

package/dist/types/lib/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/types/ui.d.ts

@@ -0,0 +1,11 @@
+export { Button, buttonVariants } from "./components/ui/controls/button.js";
+export { ToggleGroup, ToggleGroupItem, } from "./components/ui/controls/toggle-group.js";
+export { UiScope } from "./components/ui/overlays/ui-scope.js";
+export { Popover, PopoverTrigger, PopoverContent, } from "./components/ui/overlays/popover.js";
+export { Tooltip } from "./components/ui/overlays/tooltip.js";
+export { Input } from "./components/ui/controls/input.js";
+export { Checkbox } from "./components/ui/controls/checkbox.js";
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "./components/ui/overlays/collapsible.js";
+export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./components/ui/controls/tabs.js";
+export { Slider } from "./components/ui/controls/slider.js";
+export { Select, SelectValue, SelectGroup, SelectPortal, SelectViewport, SelectItemIndicator, SelectItemText, SelectTrigger, SelectContent, SelectItem, SelectLabel, } from "./components/ui/controls/select.js";

package/dist/ui.js

@@ -0,0 +1,2 @@
+"use client";
+import{a as r,b as p,c,d as m,e as f,f as d,h as u,i as b,j as g,k as C,l as P,m as T,n as x,o as S}from"./chunk-RPZW4WVX.js";import{Collapsible as s}from"radix-ui";import{jsx as a}from"react/jsx-runtime";function v(e){return a(s.Root,{"data-slot":"collapsible",...e})}function y(e){return a(s.Trigger,{"data-slot":"collapsible-trigger",...e})}function I(e){return a(s.Content,{"data-slot":"collapsible-content",...e})}import{Tabs as i}from"radix-ui";import{jsx as l}from"react/jsx-runtime";function w(e){return l(i.Root,{"data-slot":"tabs",...e})}function h({className:e,...t}){return l(i.List,{"data-slot":"tabs-list",className:r("inline-flex w-fit items-center rounded-lg bg-secondary p-1",e),...t})}function L({className:e,...t}){return l(i.Trigger,{"data-slot":"tabs-trigger",className:r("inline-flex h-8 items-center justify-center gap-2 rounded-md px-2 text-sm font-medium text-foreground whitespace-nowrap outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm",e),...t})}function V(e){return l(i.Content,{"data-slot":"tabs-content",...e})}import{Select as o}from"radix-ui";import{jsx as n}from"react/jsx-runtime";var N=o.Root,G=o.Value,R=o.Group,k=o.Viewport,z=o.ItemIndicator,B=o.ItemText;function U(e){let{container:t}=p();return n(o.Portal,{container:t,...e})}function q({className:e,...t}){return n(o.Trigger,{"data-slot":"select-trigger",className:r("inline-flex items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50",e),...t})}function A({className:e,...t}){return n(o.Content,{"data-slot":"select-content",className:r("z-50 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",e),...t})}function D({className:e,...t}){return n(o.Item,{"data-slot":"select-item",className:r("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",e),...t})}function E({className:e,...t}){return n(o.Label,{"data-slot":"select-label",className:r("px-2 py-1.5 text-xs font-medium",e),...t})}export{b as Button,C as Checkbox,v as Collapsible,I as CollapsibleContent,y as CollapsibleTrigger,P as Input,m as Popover,d as PopoverContent,f as PopoverTrigger,N as Select,A as SelectContent,R as SelectGroup,D as SelectItem,z as SelectItemIndicator,B as SelectItemText,E as SelectLabel,U as SelectPortal,q as SelectTrigger,G as SelectValue,k as SelectViewport,T as Slider,w as Tabs,V as TabsContent,h as TabsList,L as TabsTrigger,x as ToggleGroup,S as ToggleGroupItem,g as Tooltip,c as UiScope,u as buttonVariants};

package/package.json

@@ -1,12 +1,93 @@
 {
   "name": "@snackbit/opendil",
-  "version": "0.0.0",
-  "description": "Placeholder that reserves the package name for trusted publishing. Install 0.1.0 or later.",
+  "version": "0.2.0",
+  "description": "Streaming interactive documents for React using Dynamic Interface Language",
+  "type": "module",
+  "types": "./dist/types/index.d.ts",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/snackbit/opendil.git"
+    "url": "git+https://github.com/snackbit/opendil.git",
+    "directory": "packages/opendil"
   },
   "homepage": "https://opendil.com",
-  "files": []
+  "bugs": "https://github.com/snackbit/opendil/issues",
+  "keywords": [
+    "react",
+    "generative-ui",
+    "streaming",
+    "dil"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "files": [
+    "dist",
+    "!dist/test",
+    "!dist/.opendil-manifest.json",
+    "styles",
+    "bin",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tailwind.css": "./styles/tailwind.css",
+    "./package.json": "./package.json",
+    "./ui": {
+      "types": "./dist/types/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./agent-spec": {
+      "types": "./dist/types/agent-spec.d.ts",
+      "default": "./dist/agent-spec.js"
+    },
+    "./spec/genui.agent.md": "./dist/spec/genui.agent.md",
+    "./spec/genui.agent.full.md": "./dist/spec/genui.agent.full.md",
+    "./spec/genui.examples.md": "./dist/spec/genui.examples.md"
+  },
+  "bin": {
+    "opendil": "./bin/opendil.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepack": "node scripts/prune-dist.mjs",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@tanstack/react-virtual": "^3.13.12",
+    "@xyflow/react": "^12.12.1",
+    "acorn": "^8.16.0",
+    "acorn-walk": "^8.3.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dompurify": "^3.4.17",
+    "embla-carousel-react": "^8.6.0",
+    "lowlight": "3.3.0",
+    "lucide-react": "^0.468.0",
+    "mermaid": "^12.2.0",
+    "quickjs-emscripten": "^0.32.0",
+    "radix-ui": "^1.8.1",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.8.0",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remend": "^1.4.0",
+    "tailwind-merge": "^3.3.1",
+    "unified": "^11.0.5",
+    "zustand": "^5.0.8"
+  }
 }

package/styles/tailwind.css

@@ -0,0 +1,443 @@
+@import "tailwindcss/theme.css";
+@import "tailwindcss/utilities.css" source("../dist");
+@import "@xyflow/react/dist/style.css";
+@import "./tokens.css";
+
+/* Follows the renderer's appearance instead of the operating system or a page-wide class. */
+@custom-variant dil-dark (&:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *));
+
+.dil-scope {
+  --background: #ffffff;
+  --foreground: var(--dil-text-color);
+  --card: #ffffff;
+  --card-foreground: #171717;
+  --popover: #ffffff;
+  --popover-foreground: #171717;
+  --primary: #202020;
+  --primary-foreground: #ffffff;
+  --secondary: #f3f3f2;
+  --secondary-foreground: #242424;
+  --muted: #f6f6f5;
+  --muted-foreground: var(--dil-muted-text-color);
+  --accent: #eeeeec;
+  --accent-foreground: #171717;
+  --destructive: #cc4545;
+  --border: #e5e5e2;
+  --input: #dededb;
+  --ring: #8b8b87;
+  --radius: 0.75rem;
+  --chart-1: #6580d9;
+  --chart-2: #47a98a;
+  --chart-3: #d4a458;
+  --chart-4: #ac81cc;
+  --chart-5: #d78675;
+}
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+@layer base {
+  /* Contains absolutely positioned descendants, such as screen-reader status
+     regions, so they scroll with the renderer inside overflow containers. In the
+     base layer, position utilities passed through className still win. */
+  .dil-scope {
+    position: relative;
+  }
+  .dil-scope *,
+  .dil-scope *::before,
+  .dil-scope *::after {
+    box-sizing: border-box;
+    border: 0 solid var(--border);
+  }
+  .dil-scope h1,
+  .dil-scope h2,
+  .dil-scope h3,
+  .dil-scope p {
+    margin: 0;
+  }
+  /* User-agent form colors follow color-scheme, not the renderer tokens. */
+  .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);
+  font-size: 15px;
+  line-height: 1.65;
+}
+.dil-scope button:not(:disabled),
+.dil-scope [role="button"]:not([aria-disabled="true"]) {
+  cursor: pointer;
+}
+.dil-scope button,
+.dil-scope input,
+.dil-scope textarea {
+  font: inherit;
+}
+.dil-scope[data-theme="dark"] {
+  color-scheme: dark;
+  --background: #171717;
+  --foreground: #fafafa;
+  --dil-text-color: #fafafa;
+  --dil-muted-text-color: #b5b5b5;
+  --card: #202020;
+  --card-foreground: #fafafa;
+  --popover: #202020;
+  --popover-foreground: #fafafa;
+  --primary: #eeeeee;
+  --primary-foreground: #171717;
+  --secondary: #303030;
+  --secondary-foreground: #eeeeee;
+  --muted: #292929;
+  --muted-foreground: #b5b5b5;
+  --accent: #363636;
+  --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;
+}
+.dil-document {
+  overflow-wrap: anywhere;
+}
+.dil-markdown {
+  display: contents;
+}
+.dil-markdown p {
+  margin: 0;
+}
+.dil-markdown h1 {
+  font-size: 1.8rem;
+  font-weight: 650;
+  line-height: 1.25;
+  margin: 0 0 8px;
+  letter-spacing: -0.035em;
+}
+.dil-markdown h2 {
+  font-size: 1.25rem;
+  font-weight: 650;
+  line-height: 1.4;
+  margin: 24px 0 4px;
+  letter-spacing: -0.02em;
+}
+.dil-markdown strong {
+  font-weight: 600;
+}
+/* The browser's list and quote styles, restated so a host page's CSS reset,
+   such as Tailwind's preflight, does not remove bullets, numbers and indents. */
+.dil-markdown :where(ul, ol) {
+  margin-block: 1em;
+  padding-inline-start: 40px;
+}
+.dil-markdown :where(ul, ol) :where(ul, ol) {
+  margin-block: 0;
+}
+.dil-markdown ul {
+  list-style-type: disc;
+}
+.dil-markdown :where(ul, ol) ul {
+  list-style-type: circle;
+}
+.dil-markdown :where(ul, ol) :where(ul, ol) ul {
+  list-style-type: square;
+}
+.dil-markdown ol {
+  list-style-type: decimal;
+}
+.dil-markdown blockquote {
+  margin: 1em 40px;
+}
+.dil-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+.dil-markdown th,
+.dil-markdown td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+.dil-markdown pre {
+  overflow-x: auto;
+  padding: 16px;
+  background: var(--muted);
+  border-radius: 8px;
+}
+.dil-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.dil-layout {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.dil-row {
+  flex-direction: row;
+}
+.dil-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--dil-columns, 2), minmax(0, 1fr));
+}
+.dil-inline p {
+  display: inline;
+}
+.dil-input-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+.dil-virtual-item {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-bottom: var(--dil-item-gap, 12px);
+}
+.dil-virtual-item:focus-within {
+  z-index: 1;
+}
+.dil-skeleton {
+  min-height: 28px;
+  border-radius: 8px;
+  background: var(--muted);
+  animation: dil-pulse 1.5s ease-in-out infinite;
+}
+.dil-chart-legend {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  min-height: 32px;
+  gap: 2px;
+}
+.dil-scope .dil-legend-item {
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 5px;
+  font-size: 12px;
+  background: transparent;
+  box-shadow: none;
+  transition: opacity 150ms ease;
+}
+.dil-legend-item:hover {
+  background: transparent;
+}
+.dil-legend-item:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+.dil-legend-item[data-muted="true"] {
+  opacity: 0.625;
+}
+.dil-legend-item[data-hidden="true"] {
+  opacity: 0.45;
+}
+.dil-legend-swatch {
+  width: 11px;
+  height: 11px;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+.dil-chart-series {
+  transition: opacity 150ms ease;
+}
+/* Pie slice emphasis stays in CSS: re-rendering a Recharts Pie remounts its sectors. */
+.dil-chart-pie:has(.dil-chart-series:hover, .dil-chart-series:focus-visible)
+  .dil-chart-series:not(:hover, :focus-visible) {
+  opacity: 0.625;
+}
+.dil-tooltip {
+  z-index: 60;
+  max-width: min(24rem, calc(100vw - 16px));
+  border-radius: 8px;
+  background: var(--foreground);
+  color: var(--background);
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 1.4;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+}
+.dil-snap-tooltip {
+  pointer-events: none;
+}
+.dil-snap-tooltip [data-emphasized="true"] span {
+  font-weight: 700;
+}
+.dil-code-block textarea {
+  font-family: var(--font-mono, monospace);
+  font-size: var(--text-xs, 0.75rem);
+  line-height: 1.6;
+  white-space: pre;
+  overflow-wrap: normal;
+  overflow-x: auto;
+}
+.dil-code-editor {
+  position: relative;
+}
+.dil-code-editor textarea,
+.dil-code-editor .dil-code-highlight {
+  margin: 0;
+  padding: 12px;
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  line-height: 1.6;
+  letter-spacing: normal;
+  tab-size: 2;
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+.dil-code-editor .dil-code-highlight {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.dil-code-editor .dil-code-highlight code,
+.dil-code-editor .dil-code-highlight span {
+  font: inherit;
+  letter-spacing: inherit;
+  tab-size: inherit;
+}
+.dil-code-editor textarea {
+  position: relative;
+  color: transparent;
+  caret-color: var(--foreground);
+  background: transparent;
+}
+.dil-code-editor textarea::selection {
+  color: transparent;
+  background: color-mix(in srgb, var(--primary) 24%, transparent);
+}
+.dil-code-block .hljs-keyword,
+.dil-code-block .hljs-literal,
+.dil-code-block .hljs-type {
+  color: var(--dil-code-keyword, #7044a6);
+}
+.dil-code-block .hljs-string,
+.dil-code-block .hljs-attr,
+.dil-code-block .hljs-addition {
+  color: var(--dil-code-string, #24734f);
+}
+.dil-code-block .hljs-number,
+.dil-code-block .hljs-symbol {
+  color: var(--dil-code-number, #a15021);
+}
+.dil-code-block .hljs-title,
+.dil-code-block .hljs-built_in,
+.dil-code-block .hljs-tag {
+  color: var(--dil-code-title, #285ca3);
+}
+.dil-code-block .hljs-comment,
+.dil-code-block .hljs-meta {
+  color: var(--muted-foreground);
+}
+.dil-scope[data-theme="dark"] {
+  --dil-code-keyword: #c7a7f8;
+  --dil-code-string: #8bd4ae;
+  --dil-code-number: #f2b685;
+  --dil-code-title: #97bdf4;
+}
+@media (forced-colors: active) {
+  .dil-code-editor .dil-code-highlight {
+    visibility: hidden;
+  }
+  .dil-code-editor textarea {
+    color: CanvasText;
+    caret-color: CanvasText;
+  }
+  .dil-code-editor textarea::selection {
+    color: HighlightText;
+    background: Highlight;
+  }
+}
+.dil-code-block[data-word-wrap="true"] :is(pre, textarea) {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.dil-service-node {
+  width: 160px;
+  height: 72px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--card);
+  color: var(--foreground);
+}
+.dil-service-node strong {
+  font-size: 14px;
+  line-height: 1.2;
+}
+.dil-service-node > span {
+  font-size: 12px;
+  color: var(--muted-foreground);
+  line-height: 1.2;
+}
+.dil-service-node[data-selected="true"] {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent);
+}
+@keyframes dil-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@media (max-width: 520px) {
+  .dil-grid {
+    grid-template-columns: 1fr;
+  }
+  .dil-row[data-wrap="wrap"] {
+    flex-wrap: wrap;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    scroll-behavior: auto !important;
+    transition: none !important;
+  }
+}