@snackbit/opendil 0.0.0 → 0.1.0

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";
+import type { DilDocument } from "../../runtime/document";
+import type { Scope } from "../../runtime/expressions";
+import { type Attributes } from "./attribute-values";
+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,8 @@
+export { DilRenderer } from "./dil/dil-renderer";
+export type { DilRendererHandle } from "./dil/renderer-handle";
+export type { AutoScroll, AutoScrollOptions } from "./dil/view/scroll-options";
+export type { UpdateInterval } from "./dil/runtime/presentation-scheduler";
+export type { DilRendererProps, DilHostRendererProps, DilShadowRendererProps, DilIsolatedRendererProps, } from "./dil/dil-renderer";
+export type { DilComponentProps, DilCustomization } from "./dil/customization";
+export type { RendererMetrics } from "./dil/renderer-environment";
+export type { ProgressiveRevealOptions, ProgressiveReveal, } from "./dil/view/reveal-options";

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,8 @@
+export { Button, buttonVariants } from "./components/ui/controls/button";
+export { ToggleGroup, ToggleGroupItem, } from "./components/ui/controls/toggle-group";
+export { UiScope } from "./components/ui/overlays/ui-scope";
+export { Popover, PopoverTrigger, PopoverContent, } from "./components/ui/overlays/popover";
+export { Tooltip } from "./components/ui/overlays/tooltip";
+export { Input } from "./components/ui/controls/input";
+export { Checkbox } from "./components/ui/controls/checkbox";
+export { Slider } from "./components/ui/controls/slider";

package/dist/ui.js

@@ -0,0 +1,2 @@
+"use client";
+import{b as o,c as r,d as e,e as t,g as p,h as m,i as x,j as f,k as g,l as n,m as i,n as u}from"./chunk-ZWAN2JCV.js";export{m as Button,f as Checkbox,g as Input,r as Popover,t as PopoverContent,e as PopoverTrigger,n as Slider,i as ToggleGroup,u as ToggleGroupItem,x as Tooltip,o as UiScope,p as buttonVariants};

package/package.json

@@ -1,12 +1,82 @@
 {
   "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.1.0",
+  "description": "Streaming interactive documents for React using Dynamic Interface Language",
+  "type": "module",
   "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",
+    "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"
+    }
+  },
+  "bin": {
+    "opendil": "./bin/opendil.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node scripts/build.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,391 @@
+@import "tailwindcss/theme.css";
+@import "tailwindcss/utilities.css" source("../dist");
+@import "@xyflow/react/dist/style.css";
+@import "./tokens.css";
+
+.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 {
+  .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;
+  }
+}
+.dil-scope {
+  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"] {
+  --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-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;
+}
+.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;
+  text-decoration: line-through;
+}
+.dil-legend-swatch {
+  width: 11px;
+  height: 11px;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+.dil-chart-series {
+  transition: opacity 150ms ease;
+}
+.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-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;
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,29 @@
+/* Default OpenDIL tokens, scoped to each renderer. */
+.dil-scope {
+  --dil-text-color: #0d0d0d;
+  --dil-muted-text-color: #5d5d5d;
+  --foreground: #0d0d0d;
+  --muted-foreground: #5d5d5d;
+  --secondary: #f4f4f4;
+  --muted: #f7f7f7;
+  --border: #e5e5e5;
+  --font-dil:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
+    sans-serif;
+  --dil-control-radius: 12px;
+  --dil-item-radius: 8px;
+  --dil-success: #22825e;
+  --dil-warning: #ad751a;
+  --dil-tertiary: #8f8f8f;
+  --dil-node-selected: #343d75;
+  --dil-node-surface: #2a303b;
+  --dil-chart-height: 280px;
+  --dil-spacing: 4px;
+}
+[data-slot="toggle-group"] {
+  border-radius: var(--dil-control-radius);
+  gap: var(--dil-spacing);
+}
+[data-slot="toggle-group-item"] {
+  border-radius: var(--dil-item-radius);
+}