@deepfuture/dui-core 0.0.2 → 0.0.5

package/README.md

@@ -163,7 +163,14 @@ A visual editor for design tokens. Edit colors with OKLCH sliders, tweak spacing
 
 ### Inspector
 
-Toggle with **Ctrl+Shift+I** to inspect any DUI component at runtime — view properties, design tokens, style layers, slots, and CSS parts. Also exposes `window.__dui_inspect()` for programmatic access by LLM agents via Chrome DevTools.
+A runtime inspector and mutation API for DUI components. Two interfaces:
+
+- **Visual UI** (Ctrl+Shift+I) — hover-highlight components, inspect properties/tokens/styles, edit theme CSS and design tokens live
+- **Console API** — `window.__dui_inspect()`, `window.__dui_mutate.*`, `window.__dui_export()` for programmatic access by agents or scripts
+
+Both share a changelog, so agent and human edits are visible to each other. Changes can be exported as structured source file diffs.
+
+See **[Inspector docs](docs/inspector.md)** for the full API reference and usage guide.
 
 ## Documentation
 
@@ -172,6 +179,7 @@ Toggle with **Ctrl+Shift+I** to inspect any DUI component at runtime — view pr
 - [Creating Components](docs/creating-components.md) — guide for adding new components
 - [Theming](docs/theming.md) — theme system, design tokens, writing component styles
 - [Consuming](docs/consuming.md) — integrating DUI into an app
+- [Inspector](docs/inspector.md) — runtime inspection, mutation API, and visual editor
 - [Accessibility](docs/accessibility.md) — accessibility patterns and guidelines
 
 ## Contributing

package/apply-theme.d.ts

@@ -12,6 +12,8 @@ export interface DuiTheme {
     base: CSSResult;
     /** Tag name → component aesthetic styles. */
     styles: Map<string, CSSResult>;
+    /** Optional prose stylesheet for .dui-prose rich-text styling. */
+    prose?: CSSStyleSheet;
 }
 export interface ApplyThemeOptions {
     theme: DuiTheme;

package/apply-theme.js

@@ -14,6 +14,10 @@ export function applyTheme({ theme, components }) {
     if (!document.adoptedStyleSheets.includes(theme.tokens)) {
         document.adoptedStyleSheets = [...document.adoptedStyleSheets, theme.tokens];
     }
+    // 1b. Inject prose stylesheet if present (idempotent)
+    if (theme.prose && !document.adoptedStyleSheets.includes(theme.prose)) {
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets, theme.prose];
+    }
     // 2. For each component, create a themed subclass and register it
     for (const Base of components) {
         const tagName = Base.tagName;

package/floating-portal-controller.js

@@ -4,6 +4,7 @@
  * provided overlay root) so that popups escape `container-type` ancestors.
  */
 import { adoptStyles, render, } from "lit";
+import { getActiveTheme } from "./apply-theme.js";
 import { notifyPopupClosing, notifyPopupOpening } from "./popup-coordinator.js";
 import { onTransitionEnd, startFixedAutoUpdate, waitForAnimationFrame, } from "./floating-popup-utils.js";
 export class FloatingPortalController {
@@ -161,9 +162,17 @@ export class FloatingPortalController {
         positioner.style.pointerEvents = "none";
         positioner.setAttribute("data-floating-portal", "");
         positioner.setAttribute("data-dui-portal-for", this.#host.tagName.toLowerCase());
-        if (this.#styles) {
+        const theme = getActiveTheme();
+        const themeTag = this.#host.tagName.toLowerCase();
+        const themeComponentStyles = theme?.styles.get(themeTag);
+        const allStyles = [
+            ...(this.#styles ?? []),
+            ...(theme?.base ? [theme.base] : []),
+            ...(themeComponentStyles ? [themeComponentStyles] : []),
+        ];
+        if (allStyles.length > 0) {
             const shadow = positioner.attachShadow({ mode: "open" });
-            adoptStyles(shadow, this.#styles);
+            adoptStyles(shadow, allStyles);
         }
         overlayRoot.appendChild(positioner);
         this.#positioner = positioner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepfuture/dui-core",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "DUI core — applyTheme(), setup(), event factory, base styles",
   "type": "module",
   "license": "MIT",