@ydant/base 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 cwd-k2
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,214 @@
+# @ydant/base
+
+Element factories, primitives, and base plugin for Ydant.
+
+## Philosophy
+
+**@ydant/base is the user-facing API that knows "how" to render.**
+
+While `@ydant/core` is a pure engine, base provides everything users need:
+
+- Element factories (`div`, `span`, etc.)
+- Primitives (`text`, `attr`, `on`, `style`, etc.)
+- DOM operations (`appendChild`, `setCurrentElement`)
+- Lifecycle management (`onMount`, `onUnmount`)
+- Keyed element diffing
+
+This separation means core remains stable, while base can evolve. Other plugins stand on equal footing with base—they extend core the same way.
+
+## Installation
+
+```bash
+pnpm add @ydant/base
+```
+
+## Usage
+
+```typescript
+import { mount } from "@ydant/core";
+import { createBasePlugin, div, p, text, classes, type Component } from "@ydant/base";
+
+const Greeting: Component = () =>
+  div(function* () {
+    yield* classes("greeting");
+    yield* p(() => [text("Hello World!")]);
+  });
+
+mount(Greeting, document.getElementById("app")!, {
+  plugins: [createBasePlugin()],
+});
+```
+
+## API
+
+### Plugin
+
+| Function             | Description                                |
+| -------------------- | ------------------------------------------ |
+| `createBasePlugin()` | Create plugin to process base DSL elements |
+
+The base plugin extends `RenderContext` and `PluginAPI`:
+
+```typescript
+// RenderContext extensions
+interface RenderContextExtensions {
+  isCurrentElementReused: boolean;
+  pendingKey: string | number | null;
+  keyedNodes: Map<string | number, KeyedNode>;
+  mountCallbacks: Array<() => void | (() => void)>;
+  unmountCallbacks: Array<() => void>;
+}
+
+// PluginAPI extensions (in addition to core's parent, currentElement, processChildren, createChildAPI)
+interface PluginAPIExtensions {
+  // DOM operations
+  readonly isCurrentElementReused: boolean;
+  setCurrentElementReused(reused: boolean): void;
+  appendChild(node: Node): void;
+  setCurrentElement(element: Element | null): void;
+  setParent(parent: Node): void;
+
+  // Lifecycle
+  onMount(callback: () => void | (() => void)): void;
+  onUnmount(callback: () => void): void;
+  addUnmountCallbacks(...callbacks: Array<() => void>): void;
+  executeMount(): void;
+
+  // Keyed elements
+  readonly pendingKey: string | number | null;
+  setPendingKey(key: string | number | null): void;
+  getKeyedNode(key: string | number): KeyedNode | undefined;
+  setKeyedNode(key: string | number, node: KeyedNode): void;
+  deleteKeyedNode(key: string | number): void;
+}
+```
+
+### Element Factories
+
+HTML elements: `div`, `span`, `p`, `button`, `input`, `h1`-`h3`, `ul`, `li`, `a`, `form`, `table`, `thead`, `tbody`, `tr`, `th`, `td`, `label`, `textarea`, `select`, `option`, `nav`, `header`, `footer`, `section`, `article`, `aside`, `main`, `img`
+
+SVG elements: `svg`, `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect`, `g`, `defs`, `use`, `clipPath`, `mask`, `linearGradient`, `radialGradient`, `stop`, `svgText`, `tspan`
+
+### Primitives
+
+| Function              | Description                |
+| --------------------- | -------------------------- |
+| `text(content)`       | Create a text node         |
+| `attr(key, value)`    | Set an HTML attribute      |
+| `classes(...names)`   | Set class attribute        |
+| `on(event, handler)`  | Add event listener         |
+| `style(styles)`       | Set inline styles          |
+| `key(value)`          | Set key for list diffing   |
+| `onMount(callback)`   | Lifecycle hook for mount   |
+| `onUnmount(callback)` | Lifecycle hook for unmount |
+
+#### `on()` Type Overloads
+
+`on()` provides type-safe overloads for known DOM event types:
+
+```typescript
+// Type-safe: handler receives MouseEvent
+yield *
+  on("click", (e) => {
+    /* e: MouseEvent */
+  });
+
+// Type-safe: handler receives KeyboardEvent
+yield *
+  on("keydown", (e) => {
+    /* e: KeyboardEvent */
+  });
+
+// Generic fallback for custom events
+yield *
+  on("my-event", (e) => {
+    /* e: Event */
+  });
+```
+
+### Types
+
+| Type            | Description                                                         |
+| --------------- | ------------------------------------------------------------------- |
+| `Slot`          | `{ node: HTMLElement, refresh: (fn) => void }`                      |
+| `SlotRef`       | Mutable reference holder for a `Slot`, created by `createSlotRef()` |
+| `Render`        | `Generator<Child, ChildReturn, ChildNext>` - Rendering generator    |
+| `Component`     | `() => Render` - Root component type                                |
+| `ElementRender` | `Generator<Element, Slot, ChildNext>` - Element factory return      |
+| `Element`       | Tagged type for HTML/SVG elements                                   |
+| `Attribute`     | Tagged type for attributes                                          |
+| `Listener`      | Tagged type for event listeners                                     |
+| `Text`          | Tagged type for text nodes                                          |
+| `Lifecycle`     | Tagged type for lifecycle hooks                                     |
+| `Key`           | Tagged type for list keys                                           |
+
+### createSlotRef
+
+```typescript
+function createSlotRef(): SlotRef;
+
+interface SlotRef {
+  current: Slot | null;
+}
+```
+
+Creates a mutable reference to a `Slot`. Useful for capturing a Slot reference within array syntax where `yield*` is not available:
+
+```typescript
+const ref = createSlotRef();
+
+yield *
+  div(function* () {
+    ref.current = yield* div(() => [text("Content")]);
+  });
+
+// Later: update via ref
+ref.current?.refresh(() => [text("Updated!")]);
+```
+
+### Key and Element Reuse
+
+When using `key()` for list items, the same key will reuse the existing DOM element:
+
+```typescript
+yield *
+  ul(function* () {
+    for (const item of items) {
+      yield* key(item.id);
+      yield* li(() => [text(item.name)]);
+    }
+  });
+```
+
+**Constraints when reusing keyed elements:**
+
+- **Listeners are not re-registered**: Event handlers remain from the original element. If you need to change handlers, use a different key.
+- **Lifecycle callbacks are not re-registered**: `onMount`/`onUnmount` from the original registration are kept.
+- **Attributes are updated**: Attribute values are refreshed on each render.
+
+This design assumes that components with the same key have the same structure. If you need different behavior, change the key to force a new element.
+
+## Syntax
+
+### Generator Syntax
+
+Use when you need the `Slot` return value:
+
+```typescript
+const slot =
+  yield *
+  div(function* () {
+    yield* text("Content");
+  });
+
+// Later: update the content
+slot.refresh(() => [text("Updated!")]);
+```
+
+### Array Syntax
+
+Use for static structures:
+
+```typescript
+yield * div(() => [classes("container"), text("Static content")]);
+```

package/dist/elements/factory.d.ts

@@ -0,0 +1,16 @@
+import { Builder } from '@ydant/core';
+import { ElementRender } from '../types';
+/**
+ * HTML 要素ファクトリを作成
+ *
+ * @returns ElementRender を返すジェネレーター関数
+ *          yield* で使用すると Slot を返す
+ */
+export declare function createHTMLElement(tag: string): (builder: Builder) => ElementRender;
+/**
+ * SVG 要素ファクトリを作成
+ *
+ * @returns ElementRender を返すジェネレーター関数
+ *          yield* で使用すると Slot を返す
+ */
+export declare function createSVGElement(tag: string): (builder: Builder) => ElementRender;

package/dist/elements/html.d.ts

@@ -0,0 +1,32 @@
+import { Builder } from '@ydant/core';
+import { ElementRender } from '../types';
+export declare const div: (builder: Builder) => ElementRender;
+export declare const span: (builder: Builder) => ElementRender;
+export declare const p: (builder: Builder) => ElementRender;
+export declare const h1: (builder: Builder) => ElementRender;
+export declare const h2: (builder: Builder) => ElementRender;
+export declare const h3: (builder: Builder) => ElementRender;
+export declare const img: (builder: Builder) => ElementRender;
+export declare const button: (builder: Builder) => ElementRender;
+export declare const input: (builder: Builder) => ElementRender;
+export declare const ul: (builder: Builder) => ElementRender;
+export declare const li: (builder: Builder) => ElementRender;
+export declare const a: (builder: Builder) => ElementRender;
+export declare const section: (builder: Builder) => ElementRender;
+export declare const header: (builder: Builder) => ElementRender;
+export declare const footer: (builder: Builder) => ElementRender;
+export declare const nav: (builder: Builder) => ElementRender;
+export declare const main: (builder: Builder) => ElementRender;
+export declare const article: (builder: Builder) => ElementRender;
+export declare const aside: (builder: Builder) => ElementRender;
+export declare const form: (builder: Builder) => ElementRender;
+export declare const label: (builder: Builder) => ElementRender;
+export declare const textarea: (builder: Builder) => ElementRender;
+export declare const select: (builder: Builder) => ElementRender;
+export declare const option: (builder: Builder) => ElementRender;
+export declare const table: (builder: Builder) => ElementRender;
+export declare const thead: (builder: Builder) => ElementRender;
+export declare const tbody: (builder: Builder) => ElementRender;
+export declare const tr: (builder: Builder) => ElementRender;
+export declare const th: (builder: Builder) => ElementRender;
+export declare const td: (builder: Builder) => ElementRender;

package/dist/elements/svg.d.ts

@@ -0,0 +1,20 @@
+import { Builder } from '@ydant/core';
+import { ElementRender } from '../types';
+export declare const svg: (builder: Builder) => ElementRender;
+export declare const circle: (builder: Builder) => ElementRender;
+export declare const ellipse: (builder: Builder) => ElementRender;
+export declare const line: (builder: Builder) => ElementRender;
+export declare const path: (builder: Builder) => ElementRender;
+export declare const polygon: (builder: Builder) => ElementRender;
+export declare const polyline: (builder: Builder) => ElementRender;
+export declare const rect: (builder: Builder) => ElementRender;
+export declare const g: (builder: Builder) => ElementRender;
+export declare const defs: (builder: Builder) => ElementRender;
+export declare const use: (builder: Builder) => ElementRender;
+export declare const clipPath: (builder: Builder) => ElementRender;
+export declare const mask: (builder: Builder) => ElementRender;
+export declare const linearGradient: (builder: Builder) => ElementRender;
+export declare const radialGradient: (builder: Builder) => ElementRender;
+export declare const stop: (builder: Builder) => ElementRender;
+export declare const svgText: (builder: Builder) => ElementRender;
+export declare const tspan: (builder: Builder) => ElementRender;

package/dist/global.d.ts

@@ -0,0 +1,85 @@
+import { Builder, PluginAPI } from '@ydant/core';
+import { Element, Attribute, Listener, Text, Lifecycle, Slot, KeyedNode } from './types';
+declare module "@ydant/core" {
+  // RenderContext に base プラグイン用のプロパティを追加
+  interface RenderContextExtensions {
+    /** 現在の要素が再利用されたかどうか（リスナー・ライフサイクルの重複登録を防ぐ） */
+    isCurrentElementReused: boolean;
+    /** キー付き要素のマップ */
+    keyedNodes: Map<string | number, KeyedNode>;
+    /** マウント時に実行するコールバック */
+    mountCallbacks: Array<() => void | (() => void)>;
+    /** アンマウント時に実行するコールバック */
+    unmountCallbacks: Array<() => void>;
+  }
+
+  // PluginAPI に base プラグインのメソッドを追加
+  interface PluginAPIExtensions {
+    // === DOM 操作 ===
+    /** 現在の親ノード */
+    readonly parent: Node;
+    /** 現在処理中の要素 */
+    readonly currentElement: globalThis.Element | null;
+    /** 現在の要素を設定 */
+    setCurrentElement(element: globalThis.Element | null): void;
+    /** 親を設定 */
+    setParent(parent: Node): void;
+    /** 親ノードに子ノードを追加 */
+    appendChild(node: Node): void;
+
+    // === ライフサイクル ===
+    /** マウント時のコールバックを登録 */
+    onMount(callback: () => void | (() => void)): void;
+    /** アンマウント時のコールバックを登録 */
+    onUnmount(callback: () => void): void;
+    /** unmount コールバックを追加 */
+    addUnmountCallbacks(...callbacks: Array<() => void>): void;
+    /** mount コールバックを実行 */
+    executeMount(): void;
+    /** 現在のコンテキストの unmount コールバックを取得 */
+    getUnmountCallbacks(): Array<() => void>;
+
+    // === 子要素処理 ===
+    /** 子要素を処理する */
+    processChildren(
+      builder: Builder,
+      options?: {
+        parent?: Node;
+        inheritContext?: boolean;
+      },
+    ): void;
+    /** 新しい子コンテキストの API を作成 */
+    createChildAPI(parent: Node): PluginAPI;
+
+    // === keyed 要素 ===
+    /** 現在の要素が再利用されたかどうか */
+    readonly isCurrentElementReused: boolean;
+    /** 要素再利用フラグを設定 */
+    setCurrentElementReused(reused: boolean): void;
+    /** keyed node を取得 */
+    getKeyedNode(key: string | number): KeyedNode | undefined;
+    /** keyed node を設定 */
+    setKeyedNode(key: string | number, node: KeyedNode): void;
+    /** keyed node を削除 */
+    deleteKeyedNode(key: string | number): void;
+  }
+
+  // base の DSL 型を Child に追加
+  interface PluginChildExtensions {
+    Element: Element;
+    Attribute: Attribute;
+    Listener: Listener;
+    Text: Text;
+    Lifecycle: Lifecycle;
+  }
+
+  // Slot を ChildNext に追加（Element の yield* で受け取る値）
+  interface PluginNextExtensions {
+    Slot: Slot;
+  }
+
+  // Slot を ChildReturn に追加（Component の戻り値）
+  interface PluginReturnExtensions {
+    Slot: Slot;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference path="./global.d.ts" />
+/**
+ * @ydant/base
+ *
+ * 要素ファクトリ・プリミティブ DSL とそれらを処理するベースプラグイン
+ */
+export type { Slot, ElementRender, Element, Attribute, Listener, Text, Lifecycle, Decoration, } from './types';
+export { attr, classes, on, text, onMount, onUnmount, style, keyed } from './primitives';
+export { div, span, p, h1, h2, h3, img, button, input, ul, li, a, section, header, footer, nav, main, article, aside, form, label, textarea, select, option, table, thead, tbody, tr, th, td, } from './elements/html';
+export { svg, circle, ellipse, line, path, polygon, polyline, rect, g, defs, use, clipPath, mask, linearGradient, radialGradient, stop, svgText, tspan, } from './elements/svg';
+export { createSlotRef } from './slot-ref';
+export type { SlotRef } from './slot-ref';
+export { createHTMLElement, createSVGElement } from './elements/factory';
+export { createBasePlugin } from './plugin';

package/dist/index.es.js

@@ -0,0 +1,256 @@
+import { toChildren as f, isTagged as a } from "@ydant/core";
+function m(e) {
+  return function* (...t) {
+    yield e(...t);
+  };
+}
+const M = m(
+  (e, t) => ({
+    type: "attribute",
+    key: e,
+    value: t
+  })
+);
+function w(...e) {
+  return (function* () {
+    yield { type: "attribute", key: "class", value: e.flat().join(" ") };
+  })();
+}
+function K(e, t) {
+  return (function* () {
+    yield { type: "listener", key: e, value: t };
+  })();
+}
+const P = m((e) => ({ type: "text", content: e }));
+function* R(e) {
+  yield { type: "lifecycle", event: "mount", callback: e };
+}
+function* x(e) {
+  yield { type: "lifecycle", event: "unmount", callback: e };
+}
+function* L(e) {
+  yield { type: "attribute", key: "style", value: Object.entries(e).map(([n, o]) => `${n.startsWith("--") ? n : n.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${o}`).join("; ") };
+}
+function S(e, t) {
+  return (...n) => (function* () {
+    const o = t(...n), u = o.next();
+    if (u.done) return u.value;
+    const c = yield { ...u.value, key: e };
+    return o.next(c), c;
+  })();
+}
+const b = "http://www.w3.org/2000/svg";
+function r(e) {
+  return function* (t) {
+    const n = f(t());
+    return yield { type: "element", tag: e, children: n };
+  };
+}
+function l(e) {
+  return function* (t) {
+    const n = f(t());
+    return yield {
+      type: "element",
+      tag: e,
+      children: n,
+      ns: b
+    };
+  };
+}
+const G = r("div"), T = r("span"), A = r("p"), j = r("h1"), V = r("h2"), $ = r("h3"), H = r("img"), I = r("button"), O = r("input"), _ = r("ul"), q = r("li"), B = r("a"), D = r("section"), F = r("header"), W = r("footer"), Z = r("nav"), z = r("main"), J = r("article"), Q = r("aside"), X = r("form"), Y = r("label"), ee = r("textarea"), te = r("select"), ne = r("option"), oe = r("table"), se = r("thead"), re = r("tbody"), ue = r("tr"), le = r("th"), ce = r("td"), ae = l("svg"), ie = l("circle"), de = l("ellipse"), fe = l("line"), me = l("path"), ye = l("polygon"), be = l("polyline"), pe = l("rect"), Ce = l("g"), ke = l("defs"), he = l("use"), ge = l("clipPath"), ve = l("mask"), Ee = l("linearGradient"), Ue = l("radialGradient"), Ne = l("stop"), Me = l("text"), we = l("tspan");
+function Ke() {
+  let e = null;
+  return {
+    get current() {
+      return e;
+    },
+    bind(t) {
+      e = t;
+    },
+    refresh(t) {
+      e && e.refresh(t);
+    },
+    get node() {
+      return e?.node ?? null;
+    }
+  };
+}
+function p(e, t) {
+  const n = e.key ?? null;
+  let o, u = !1;
+  if (n !== null && t.getKeyedNode(n)) {
+    const d = t.getKeyedNode(n);
+    o = d.node, u = !0, t.addUnmountCallbacks(...d.unmountCallbacks), t.deleteKeyedNode(n);
+  } else
+    o = e.ns ? document.createElementNS(e.ns, e.tag) : document.createElement(e.tag);
+  t.appendChild(o), C(e, o, u);
+  const s = t.createChildAPI(o), c = [];
+  n !== null && t.setKeyedNode(n, {
+    key: n,
+    node: o,
+    unmountCallbacks: c
+  });
+  const i = k(o, s, c);
+  u && (o.innerHTML = ""), e.children && s.processChildren(() => e.children, {
+    parent: o
+  });
+  const y = s.getUnmountCallbacks();
+  return c.push(...y), t.addUnmountCallbacks(...c), s.executeMount(), { value: i };
+}
+function C(e, t, n) {
+  if (e.decorations)
+    for (const o of e.decorations)
+      a(o, "attribute") ? t.setAttribute(o.key, o.value) : a(o, "listener") && (n || t.addEventListener(o.key, o.value));
+}
+function k(e, t, n) {
+  return {
+    node: e,
+    refresh(o) {
+      const u = t.getUnmountCallbacks(), s = /* @__PURE__ */ new Set([...n, ...u]);
+      for (const i of s)
+        i();
+      for (n.length = 0; e.firstChild; )
+        e.removeChild(e.firstChild);
+      t.processChildren(o, { parent: e });
+      const c = t.getUnmountCallbacks();
+      n.push(...c), t.executeMount();
+    }
+  };
+}
+function h(e, t) {
+  const n = t.currentElement;
+  return n && n.setAttribute(e.key, e.value), {};
+}
+function g(e, t) {
+  if (t.isCurrentElementReused)
+    return {};
+  const n = t.currentElement;
+  return n && n.addEventListener(e.key, e.value), {};
+}
+function v(e, t) {
+  const n = document.createTextNode(e.content);
+  return t.appendChild(n), {};
+}
+function E(e, t) {
+  return t.isCurrentElementReused ? {} : (e.event === "mount" ? t.onMount(e.callback) : e.event === "unmount" && t.onUnmount(e.callback), {});
+}
+function U(e) {
+  const t = e.mountCallbacks, n = e.unmountCallbacks;
+  requestAnimationFrame(() => {
+    for (const o of t) {
+      const u = o();
+      typeof u == "function" && n.push(u);
+    }
+    e.mountCallbacks = [];
+  });
+}
+function Pe() {
+  return {
+    name: "base",
+    types: ["element", "text", "attribute", "listener", "lifecycle"],
+    initContext(e) {
+      e.isCurrentElementReused = !1, e.keyedNodes = /* @__PURE__ */ new Map(), e.mountCallbacks = [], e.unmountCallbacks = [];
+    },
+    mergeChildContext(e, t) {
+      const n = e.mountCallbacks, o = t.mountCallbacks, u = e.unmountCallbacks, s = t.unmountCallbacks;
+      n && o && n.push(...o), u && s && u.push(...s);
+    },
+    extendAPI(e, t) {
+      Object.defineProperty(e, "isCurrentElementReused", {
+        get() {
+          return t.isCurrentElementReused;
+        },
+        enumerable: !0
+      }), e.appendChild = (s) => {
+        t.parent.appendChild(s);
+      }, e.setCurrentElement = (s) => {
+        t.currentElement = s;
+      }, e.setParent = (s) => {
+        t.parent = s;
+      }, e.setCurrentElementReused = (s) => {
+        t.isCurrentElementReused = s;
+      };
+      const n = t.keyedNodes;
+      e.getKeyedNode = (s) => n.get(s), e.setKeyedNode = (s, c) => {
+        n.set(s, c);
+      }, e.deleteKeyedNode = (s) => {
+        n.delete(s);
+      };
+      const o = t.mountCallbacks, u = t.unmountCallbacks;
+      e.onMount = (s) => {
+        o.push(s);
+      }, e.onUnmount = (s) => {
+        u.push(s);
+      }, e.addUnmountCallbacks = (...s) => {
+        u.push(...s);
+      }, e.executeMount = () => {
+        U(t);
+      }, e.getUnmountCallbacks = () => u;
+    },
+    process(e, t) {
+      return a(e, "element") ? p(e, t) : a(e, "text") ? v(e, t) : a(e, "attribute") ? h(e, t) : a(e, "listener") ? g(e, t) : a(e, "lifecycle") ? E(e, t) : {};
+    }
+  };
+}
+export {
+  B as a,
+  J as article,
+  Q as aside,
+  M as attr,
+  I as button,
+  ie as circle,
+  w as classes,
+  ge as clipPath,
+  Pe as createBasePlugin,
+  r as createHTMLElement,
+  l as createSVGElement,
+  Ke as createSlotRef,
+  ke as defs,
+  G as div,
+  de as ellipse,
+  W as footer,
+  X as form,
+  Ce as g,
+  j as h1,
+  V as h2,
+  $ as h3,
+  F as header,
+  H as img,
+  O as input,
+  S as keyed,
+  Y as label,
+  q as li,
+  fe as line,
+  Ee as linearGradient,
+  z as main,
+  ve as mask,
+  Z as nav,
+  K as on,
+  R as onMount,
+  x as onUnmount,
+  ne as option,
+  A as p,
+  me as path,
+  ye as polygon,
+  be as polyline,
+  Ue as radialGradient,
+  pe as rect,
+  D as section,
+  te as select,
+  T as span,
+  Ne as stop,
+  L as style,
+  ae as svg,
+  Me as svgText,
+  oe as table,
+  re as tbody,
+  ce as td,
+  P as text,
+  ee as textarea,
+  le as th,
+  se as thead,
+  ue as tr,
+  we as tspan,
+  _ as ul,
+  he as use
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(n,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@ydant/core")):typeof define=="function"&&define.amd?define(["exports","@ydant/core"],i):(n=typeof globalThis<"u"?globalThis:n||self,i(n.YdantBase={},n.YdantCore))})(this,(function(n,i){"use strict";function f(e){return function*(...t){yield e(...t)}}const y=f((e,t)=>({type:"attribute",key:e,value:t}));function b(...e){return(function*(){yield{type:"attribute",key:"class",value:e.flat().join(" ")}})()}function g(e,t){return(function*(){yield{type:"listener",key:e,value:t}})()}const h=f(e=>({type:"text",content:e}));function*C(e){yield{type:"lifecycle",event:"mount",callback:e}}function*k(e){yield{type:"lifecycle",event:"unmount",callback:e}}function*v(e){yield{type:"attribute",key:"style",value:Object.entries(e).map(([l,u])=>`${l.startsWith("--")?l:l.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${u}`).join("; ")}}function E(e,t){return(...l)=>(function*(){const u=t(...l),c=u.next();if(c.done)return c.value;const r=yield{...c.value,key:e};return u.next(r),r})()}const T="http://www.w3.org/2000/svg";function o(e){return function*(t){const l=i.toChildren(t());return yield{type:"element",tag:e,children:l}}}function a(e){return function*(t){const l=i.toChildren(t());return yield{type:"element",tag:e,children:l,ns:T}}}const U=o("div"),M=o("span"),N=o("p"),P=o("h1"),S=o("h2"),w=o("h3"),G=o("img"),R=o("button"),K=o("input"),L=o("ul"),j=o("li"),p=o("a"),A=o("section"),V=o("header"),B=o("footer"),H=o("nav"),O=o("main"),$=o("article"),q=o("aside"),I=o("form"),Y=o("label"),_=o("textarea"),D=o("select"),F=o("option"),W=o("table"),Z=o("thead"),z=o("tbody"),J=o("tr"),Q=o("th"),X=o("td"),x=a("svg"),ee=a("circle"),ne=a("ellipse"),te=a("line"),le=a("path"),oe=a("polygon"),ue=a("polyline"),se=a("rect"),ce=a("g"),ae=a("defs"),ie=a("use"),re=a("clipPath"),de=a("mask"),fe=a("linearGradient"),me=a("radialGradient"),ye=a("stop"),be=a("text"),ge=a("tspan");function he(){let e=null;return{get current(){return e},bind(t){e=t},refresh(t){e&&e.refresh(t)},get node(){return e?.node??null}}}function Ce(e,t){const l=e.key??null;let u,c=!1;if(l!==null&&t.getKeyedNode(l)){const m=t.getKeyedNode(l);u=m.node,c=!0,t.addUnmountCallbacks(...m.unmountCallbacks),t.deleteKeyedNode(l)}else u=e.ns?document.createElementNS(e.ns,e.tag):document.createElement(e.tag);t.appendChild(u),ke(e,u,c);const s=t.createChildAPI(u),r=[];l!==null&&t.setKeyedNode(l,{key:l,node:u,unmountCallbacks:r});const d=ve(u,s,r);c&&(u.innerHTML=""),e.children&&s.processChildren(()=>e.children,{parent:u});const Se=s.getUnmountCallbacks();return r.push(...Se),t.addUnmountCallbacks(...r),s.executeMount(),{value:d}}function ke(e,t,l){if(e.decorations)for(const u of e.decorations)i.isTagged(u,"attribute")?t.setAttribute(u.key,u.value):i.isTagged(u,"listener")&&(l||t.addEventListener(u.key,u.value))}function ve(e,t,l){return{node:e,refresh(u){const c=t.getUnmountCallbacks(),s=new Set([...l,...c]);for(const d of s)d();for(l.length=0;e.firstChild;)e.removeChild(e.firstChild);t.processChildren(u,{parent:e});const r=t.getUnmountCallbacks();l.push(...r),t.executeMount()}}}function Ee(e,t){const l=t.currentElement;return l&&l.setAttribute(e.key,e.value),{}}function Te(e,t){if(t.isCurrentElementReused)return{};const l=t.currentElement;return l&&l.addEventListener(e.key,e.value),{}}function Ue(e,t){const l=document.createTextNode(e.content);return t.appendChild(l),{}}function Me(e,t){return t.isCurrentElementReused?{}:(e.event==="mount"?t.onMount(e.callback):e.event==="unmount"&&t.onUnmount(e.callback),{})}function Ne(e){const t=e.mountCallbacks,l=e.unmountCallbacks;requestAnimationFrame(()=>{for(const u of t){const c=u();typeof c=="function"&&l.push(c)}e.mountCallbacks=[]})}function Pe(){return{name:"base",types:["element","text","attribute","listener","lifecycle"],initContext(e){e.isCurrentElementReused=!1,e.keyedNodes=new Map,e.mountCallbacks=[],e.unmountCallbacks=[]},mergeChildContext(e,t){const l=e.mountCallbacks,u=t.mountCallbacks,c=e.unmountCallbacks,s=t.unmountCallbacks;l&&u&&l.push(...u),c&&s&&c.push(...s)},extendAPI(e,t){Object.defineProperty(e,"isCurrentElementReused",{get(){return t.isCurrentElementReused},enumerable:!0}),e.appendChild=s=>{t.parent.appendChild(s)},e.setCurrentElement=s=>{t.currentElement=s},e.setParent=s=>{t.parent=s},e.setCurrentElementReused=s=>{t.isCurrentElementReused=s};const l=t.keyedNodes;e.getKeyedNode=s=>l.get(s),e.setKeyedNode=(s,r)=>{l.set(s,r)},e.deleteKeyedNode=s=>{l.delete(s)};const u=t.mountCallbacks,c=t.unmountCallbacks;e.onMount=s=>{u.push(s)},e.onUnmount=s=>{c.push(s)},e.addUnmountCallbacks=(...s)=>{c.push(...s)},e.executeMount=()=>{Ne(t)},e.getUnmountCallbacks=()=>c},process(e,t){return i.isTagged(e,"element")?Ce(e,t):i.isTagged(e,"text")?Ue(e,t):i.isTagged(e,"attribute")?Ee(e,t):i.isTagged(e,"listener")?Te(e,t):i.isTagged(e,"lifecycle")?Me(e,t):{}}}}n.a=p,n.article=$,n.aside=q,n.attr=y,n.button=R,n.circle=ee,n.classes=b,n.clipPath=re,n.createBasePlugin=Pe,n.createHTMLElement=o,n.createSVGElement=a,n.createSlotRef=he,n.defs=ae,n.div=U,n.ellipse=ne,n.footer=B,n.form=I,n.g=ce,n.h1=P,n.h2=S,n.h3=w,n.header=V,n.img=G,n.input=K,n.keyed=E,n.label=Y,n.li=j,n.line=te,n.linearGradient=fe,n.main=O,n.mask=de,n.nav=H,n.on=g,n.onMount=C,n.onUnmount=k,n.option=F,n.p=N,n.path=le,n.polygon=oe,n.polyline=ue,n.radialGradient=me,n.rect=se,n.section=A,n.select=D,n.span=M,n.stop=ye,n.style=v,n.svg=x,n.svgText=be,n.table=W,n.tbody=z,n.td=X,n.text=h,n.textarea=_,n.th=Q,n.thead=Z,n.tr=J,n.tspan=ge,n.ul=L,n.use=ie,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/dist/plugin/element.d.ts

@@ -0,0 +1,6 @@
+import { PluginAPI, PluginResult } from '@ydant/core';
+import { Element } from '../types';
+/**
+ * Element を DOM ノードに変換し、Slot を返す
+ */
+export declare function processElement(element: Element, api: PluginAPI): PluginResult;

package/dist/plugin/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference path="./global.d.ts" />
+import { Plugin } from '@ydant/core';
+/**
+ * ベースプラグインを作成
+ *
+ * element, text, attribute, listener, key, lifecycle を処理するプラグイン
+ */
+export declare function createBasePlugin(): Plugin;

package/dist/plugin/primitives.d.ts

@@ -0,0 +1,10 @@
+import { PluginAPI, PluginResult } from '@ydant/core';
+import { Attribute, Listener, Text, Lifecycle } from '../types';
+/** Attribute を処理 */
+export declare function processAttribute(attr: Attribute, api: PluginAPI): PluginResult;
+/** Listener を処理 */
+export declare function processListener(listener: Listener, api: PluginAPI): PluginResult;
+/** Text を処理 */
+export declare function processText(text: Text, api: PluginAPI): PluginResult;
+/** Lifecycle を処理 */
+export declare function processLifecycle(lifecycle: Lifecycle, api: PluginAPI): PluginResult;

package/dist/primitives.d.ts

@@ -0,0 +1,71 @@
+import { CleanupFn, Primitive, Render } from '@ydant/core';
+import { Attribute, Listener, Text, Lifecycle, ElementRender } from './types';
+/** HTML 属性を yield */
+export declare const attr: (key: string, value: string) => Primitive<Attribute>;
+/** class 属性のショートハンド */
+export declare function classes(...classNames: (string | string[])[]): Primitive<Attribute>;
+/** イベントリスナを yield（HTMLElementEventMap のイベント型を推論） */
+export declare function on<K extends keyof HTMLElementEventMap>(key: K, handler: (e: HTMLElementEventMap[K]) => void): Primitive<Listener>;
+/** イベントリスナを yield（カスタムイベント用フォールバック） */
+export declare function on(key: string, handler: (e: Event) => void): Primitive<Listener>;
+/** テキストノードを yield */
+export declare const text: (content: string) => Primitive<Text>;
+/**
+ * コンポーネントがマウントされた時に実行されるコールバックを登録する
+ *
+ * @param callback - マウント時に実行される関数。クリーンアップ関数を返すことができる。
+ *
+ * @example
+ * ```typescript
+ * yield* onMount(() => {
+ *   const interval = setInterval(() => console.log("tick"), 1000);
+ *   return () => clearInterval(interval);  // クリーンアップ
+ * });
+ * ```
+ */
+export declare function onMount(callback: () => void | CleanupFn): Primitive<Lifecycle>;
+/**
+ * コンポーネントがアンマウントされる時に実行されるコールバックを登録する
+ *
+ * @param callback - アンマウント時に実行される関数
+ *
+ * @example
+ * ```typescript
+ * yield* onUnmount(() => {
+ *   console.log("Component unmounted");
+ * });
+ * ```
+ */
+export declare function onUnmount(callback: () => void): Primitive<Lifecycle>;
+/**
+ * インラインスタイルを設定する
+ *
+ * @param properties - CSS プロパティのオブジェクト
+ *
+ * @example
+ * ```typescript
+ * yield* style({
+ *   padding: "16px",
+ *   display: "flex",
+ *   "--primary-color": "#3b82f6",
+ * });
+ * ```
+ */
+export declare function style(properties: Partial<CSSStyleDeclaration> & Record<`--${string}`, string>): Primitive<Attribute>;
+/**
+ * 要素ファクトリやコンポーネントをラップし、生成される Element に key を付与する
+ *
+ * @param key - 一意な識別子（string または number）
+ * @param factory - 要素ファクトリ（div, li 等）またはコンポーネント
+ * @returns key 付きファクトリ（元と同じ引数を受け取る）
+ *
+ * @example
+ * ```typescript
+ * // 要素ファクトリと組み合わせ
+ * yield* keyed(item.id, li)(() => [text(item.name)]);
+ *
+ * // コンポーネントと組み合わせ
+ * yield* keyed(item.id, ListItemView)({ item, onDelete });
+ * ```
+ */
+export declare function keyed<Args extends unknown[]>(key: string | number, factory: (...args: Args) => Render): (...args: Args) => ElementRender;

package/dist/slot-ref.d.ts

@@ -0,0 +1,39 @@
+import { Builder } from '@ydant/core';
+import { Slot } from './types';
+/**
+ * Slot への参照を保持するオブジェクト
+ *
+ * イベントハンドラ等から Slot を操作するためのヘルパー。
+ * bind() で Slot を関連付け、refresh() で子要素を再レンダリングする。
+ */
+export interface SlotRef {
+    /** 現在バインドされている Slot（未バインドなら null） */
+    readonly current: Slot | null;
+    /** Slot をバインドする */
+    bind(slot: Slot): void;
+    /** バインドされた Slot の子要素を再レンダリングする */
+    refresh(children: Builder): void;
+    /** バインドされた Slot の DOM 要素（未バインドなら null） */
+    readonly node: HTMLElement | null;
+}
+/**
+ * SlotRef を作成する
+ *
+ * @example
+ * ```typescript
+ * const counter = createSlotRef();
+ * let count = 0;
+ *
+ * counter.bind(yield* div(function* () {
+ *   yield* text(`Count: ${count}`);
+ *   yield* button(function* () {
+ *     yield* on("click", () => {
+ *       count++;
+ *       counter.refresh(() => [text(`Count: ${count}`)]);
+ *     });
+ *     yield* text("Increment");
+ *   });
+ * }));
+ * ```
+ */
+export declare function createSlotRef(): SlotRef;

package/dist/types.d.ts

@@ -0,0 +1,60 @@
+import { Tagged, CleanupFn, Instructor, Builder, ChildNext } from '@ydant/core';
+/** 要素のスロット（DOM 参照と更新関数を持つ） */
+export interface Slot {
+    /** マウントされた DOM 要素 */
+    readonly node: HTMLElement;
+    /** 子要素を再レンダリングする */
+    refresh(children: Builder): void;
+}
+/**
+ * 要素ファクトリの戻り値型
+ *
+ * Element を yield し、必ず Slot を返すジェネレーター。
+ * 汎用の Render より具体的な型で、yield* div() が Slot を返すことを保証する。
+ *
+ * ChildNext は void を含むが、Element yield 時は必ず Slot が返される。
+ * 型システムでこれを表現するため、Element と Slot のみに限定している。
+ */
+export type ElementRender = Generator<Element, Slot, ChildNext>;
+/** HTML 属性 */
+export type Attribute = Tagged<"attribute", {
+    key: string;
+    value: string;
+}>;
+/** イベントリスナ */
+export type Listener = Tagged<"listener", {
+    key: string;
+    value: (e: Event) => void;
+}>;
+/** テキストノード */
+export type Text = Tagged<"text", {
+    content: string;
+}>;
+/** マウント時のライフサイクルイベント */
+export type MountLifecycle = Tagged<"lifecycle", {
+    event: "mount";
+    callback: () => void | CleanupFn;
+}>;
+/** アンマウント時のライフサイクルイベント */
+export type UnmountLifecycle = Tagged<"lifecycle", {
+    event: "unmount";
+    callback: () => void;
+}>;
+/** ライフサイクルイベント */
+export type Lifecycle = MountLifecycle | UnmountLifecycle;
+/** Keyed 要素の情報 */
+export interface KeyedNode {
+    key: string | number;
+    node: globalThis.Element;
+    unmountCallbacks: Array<() => void>;
+}
+/** HTML 要素の装飾 (Attribute, Listener) */
+export type Decoration = Attribute | Listener;
+/** HTML 要素 */
+export type Element = Tagged<"element", {
+    tag: string;
+    children: Instructor;
+    decorations?: Decoration[];
+    key?: string | number;
+    ns?: string;
+}>;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ydant/base",
+  "version": "0.1.0",
+  "description": "Base DSL primitives and plugin for Ydant",
+  "keywords": [
+    "dom",
+    "elements",
+    "plugin",
+    "primitives",
+    "ydant"
+  ],
+  "homepage": "https://github.com/cwd-k2/ydant#readme",
+  "bugs": {
+    "url": "https://github.com/cwd-k2/ydant/issues"
+  },
+  "license": "MIT",
+  "author": "cwd-k2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cwd-k2/ydant.git",
+    "directory": "packages/base"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "@ydant/dev": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "peerDependencies": {
+    "@ydant/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  }
+}