@lark-apaas/coding-registry-buildless 0.1.0

package/LICENSE

@@ -0,0 +1,13 @@
+MIT License
+
+Copyright (c) 2024 Lark Technologies Pte. Ltd. and/or its affiliates
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted,provided that the above copyright notice and this permission notice appear in all copies.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
+INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO
+EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR
+CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,
+DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS
+ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# @lark-apaas/coding-registry-buildless
+
+> **Status:** alpha (v0.1) — 占位资产，待 SDK owner 填充真实 SDK。
+
+**buildless 运行时**的 SDK registry（shadcn 式 copy-in 资产的单一事实源）。运行时契约 = *buildless（浏览器 Babel）+ 全局（window/UMD）+ CDN 钉版依赖*；当前由 design-html 栈使用，但本包按**运行时**而非 stack 命名，任何 buildless-globals 栈都可复用。
+
+被 [miaoda-cli](https://code.byted.org/apaas/miaoda-cli) 的 `miaoda registry` 命令消费：抓本包 tarball → 递归扫含 USAGE 块的 SDK 文件 → 把源码**按目录结构原样拷进**用户项目（项目持有、可改、不覆盖）。
+
+**非运行时依赖**：buildless 栈不 `npm install` 本包；它只是个被 CLI 抓取的 catalog，与 template / steering 同分发模型。
+
+## 结构（内容平铺在包根，拷贝时 1:1 落地）
+
+```
+scripts/      # 纯 JS / Web Component（如 deck-stage.js）  → 项目 scripts/
+components/   # React / JSX（如 tweaks-panel.jsx）         → 项目 components/
+stylesheets/  # CSS（按需）                                → 项目 stylesheets/
+```
+
+`add` 保留文件相对包根的路径：`scripts/deck-stage.js` → 项目 `scripts/deck-stage.js`。无 `targets` 映射、不拍平。
+
+## 无 registry.json：USAGE 块即事实源
+
+不维护独立 manifest。每个 SDK 文件以 `/* BEGIN USAGE */ … /* END USAGE */` 注释块开头，声明 name / Exports(to window) / Usage / 约束，可选 `// Depends: <name>` 声明跨 SDK 依赖。
+
+- 条目 `name` = 文件名去扩展名（`deck-stage.js` → `deck-stage`）。
+- `miaoda registry list` 直接输出各文件 USAGE 块原文供 Agent 消费。
+- `miaoda registry add <name>` 解析 `Depends` 闭包后按结构拷入。
+
+## 解析（CLI 怎么找到本包）
+
+CLI 按项目运行时解析：`项目 stack → runtime → registry 包`（`design-html → buildless → @lark-apaas/coding-registry-buildless`）。本包以 `miaodaRegistry.runtime = "buildless"` 标明所服务的运行时。
+
+## 规范
+
+SDK 开发规范（USAGE 块 / 全局导出 / CSS 隔离 / postMessage 协议 / data-miaoda-* / 状态持久化 / 画布缩放 / CDN 固定版本契约）见 [`docs/design-html-sdk-spec.md`](../../../docs/design-html-sdk-spec.md)。完整跨仓设计见飞书文档《design-html 组件 Registry —— 跨仓设计 Spec》。
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

package/components/tweaks-panel.jsx

@@ -0,0 +1,92 @@
+/* BEGIN USAGE */
+// tweaks-panel.jsx — 风格切换/精调面板（React/JSX）
+// Exports (to window): TweaksPanel, useTweaks
+//
+// Usage:
+//   const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "primaryColor": "#2563EB", "dark": false }/*EDITMODE-END*/;
+//   <TweaksPanel defaults={TWEAK_DEFAULTS}>
+//     <TweaksPanel.Color name="primaryColor" label="主色" />
+//     <TweaksPanel.Toggle name="dark" label="暗色" />
+//   </TweaksPanel>
+//   const { primaryColor } = useTweaks();   // 读当前精调值
+//
+// 约束（不可变契约）：导出名 TweaksPanel/useTweaks；postMessage 协议 miaoda:tweaks:*；
+//   EDITMODE-BEGIN/END 标记语法；面板根元素带 data-miaoda-chrome。
+//   定制面：精调项定义、控件、标签文案、默认值由 AI 自由编写。
+/* END USAGE */
+
+(function () {
+  const { createContext, useContext, useState, useEffect } = React;
+
+  // CSS 隔离：twk- 前缀 + 一次性注入去重
+  if (!document.getElementById('twk-styles')) {
+    const s = document.createElement('style');
+    s.id = 'twk-styles';
+    s.textContent = `
+      .twk-panel { position: fixed; right: 16px; top: 16px; z-index: 9999;
+        background: #fff; color: #111; border-radius: 12px; padding: 12px 14px;
+        box-shadow: 0 8px 30px rgba(0,0,0,.18); font: 13px system-ui; min-width: 200px; }
+      .twk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
+    `;
+    document.head.appendChild(s);
+  }
+
+  const TweaksCtx = createContext({});
+  const useTweaks = () => useContext(TweaksCtx);
+
+  function TweaksPanel({ defaults = {}, children }) {
+    const [values, setValues] = useState(defaults);
+
+    // 顺序铁律：先注册监听，再 postMessage 宣告可用
+    useEffect(() => {
+      const onMsg = (e) => {
+        if (e.data && e.data.type === 'miaoda:tweaks:set-keys') {
+          setValues((v) => ({ ...v, ...e.data.keys }));
+        }
+      };
+      window.addEventListener('message', onMsg);
+      try {
+        window.parent.postMessage({ type: 'miaoda:tweaks:available' }, '*');
+      } catch (_) {}
+      return () => window.removeEventListener('message', onMsg);
+    }, []);
+
+    const set = (name, value) => {
+      const next = { ...values, [name]: value };
+      setValues(next);
+      try {
+        window.parent.postMessage({ type: 'miaoda:tweaks:set-keys', keys: { [name]: value } }, '*');
+      } catch (_) {}
+    };
+
+    return (
+      <TweaksCtx.Provider value={{ ...values, __set: set }}>
+        <div className="twk-panel" data-miaoda-chrome>
+          {children}
+        </div>
+      </TweaksCtx.Provider>
+    );
+  }
+
+  TweaksPanel.Color = function ({ name, label }) {
+    const t = useTweaks();
+    return (
+      <label className="twk-row">
+        <span>{label}</span>
+        <input type="color" value={t[name] || '#000000'} onChange={(e) => t.__set(name, e.target.value)} />
+      </label>
+    );
+  };
+
+  TweaksPanel.Toggle = function ({ name, label }) {
+    const t = useTweaks();
+    return (
+      <label className="twk-row">
+        <span>{label}</span>
+        <input type="checkbox" checked={!!t[name]} onChange={(e) => t.__set(name, e.target.checked)} />
+      </label>
+    );
+  };
+
+  Object.assign(window, { TweaksPanel, useTweaks });
+})();

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@lark-apaas/coding-registry-buildless",
+  "version": "0.1.0",
+  "description": "Miaoda registry (buildless runtime) — shadcn-style copy-in SDKs (globals + CDN-pinned, browser Babel) for buildless static HTML stacks",
+  "type": "module",
+  "files": ["scripts", "components", "stylesheets"],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": ["miaoda", "coding-registry", "buildless", "sdk", "shadcn", "copy-in"],
+  "license": "MIT",
+  "miaodaRegistry": {
+    "schemaVersion": 1,
+    "runtime": "buildless"
+  }
+}

package/scripts/deck-stage.js

@@ -0,0 +1,118 @@
+/* BEGIN USAGE */
+// deck-stage.js — PPT/演示画布（纯 JS Web Component）
+// Exports (to window): <deck-stage> custom element
+//
+// Usage:
+//   <deck-stage width="1920" height="1080">
+//     <section data-label="封面"><h1>标题</h1></section>
+//     <section data-label="目标">...</section>
+//   </deck-stage>
+//   element.goTo(n)            // 跳到第 n 页（0-based）
+//   element.addEventListener('slidechange', e => e.detail.index)
+//
+// 约束（不可变契约）：标签名 deck-stage；固定画布 width×height（默认 1920×1080）；
+//   postMessage 协议 miaoda:deck:* / miaoda:canvas:*；导航 UI 带 data-miaoda-chrome。
+//   定制面：每个 <section> 内的内容与样式由 AI 自由编写。
+/* END USAGE */
+
+(function () {
+  if (customElements.get('deck-stage')) return;
+
+  class DeckStage extends HTMLElement {
+    connectedCallback() {
+      const W = Number(this.getAttribute('width')) || 1920;
+      const H = Number(this.getAttribute('height')) || 1080;
+      this._w = W;
+      this._h = H;
+      this._index = 0;
+
+      // 把 light-dom 的 <section> 收为幻灯片
+      this._slides = Array.from(this.querySelectorAll(':scope > section'));
+
+      const shadow = this.attachShadow({ mode: 'open' });
+      shadow.innerHTML = `
+        <style>
+          :host { position: fixed; inset: 0; overflow: hidden; background: #000; }
+          .stage { position: absolute; top: 50%; left: 50%; width: ${W}px; height: ${H}px;
+                   transform-origin: center; }
+          ::slotted(section) { position: absolute; inset: 0; box-sizing: border-box; }
+          ::slotted(section[hidden]) { display: none; }
+          .nav { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
+                 display: flex; gap: 8px; z-index: 10; }
+          .nav button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 8px;
+                        background: rgba(255,255,255,.12); color: #fff; font: 13px system-ui; }
+          @media print {
+            :host { position: static; }
+            .stage { position: static; transform: none !important; width: ${W}px; height: ${H}px;
+                     page-break-after: always; }
+            ::slotted(section[hidden]) { display: block !important; }
+            .nav { display: none; }
+          }
+        </style>
+        <div class="stage"><slot></slot></div>
+        <div class="nav" data-miaoda-chrome>
+          <button data-act="prev">‹</button><button data-act="next">›</button>
+        </div>
+      `;
+
+      this._stage = shadow.querySelector('.stage');
+      shadow.querySelector('[data-act="prev"]').onclick = () => this.goTo(this._index - 1);
+      shadow.querySelector('[data-act="next"]').onclick = () => this.goTo(this._index + 1);
+
+      this._onResize = () => this._fit();
+      window.addEventListener('resize', this._onResize);
+      this._onKey = (e) => {
+        if (e.key === 'ArrowRight') this.goTo(this._index + 1);
+        if (e.key === 'ArrowLeft') this.goTo(this._index - 1);
+      };
+      window.addEventListener('keydown', this._onKey);
+
+      // 顺序铁律：先注册监听，再宣告可用
+      window.addEventListener('message', (e) => {
+        if (e.data && e.data.type === 'miaoda:canvas:set-zoom') this._fit(e.data.zoom);
+      });
+      this._post('miaoda:canvas:present', {});
+
+      // 初始页可来自 URL ?slide=
+      const init = Number(new URLSearchParams(location.search).get('slide')) || 1;
+      this._fit();
+      this.goTo(init - 1);
+    }
+
+    disconnectedCallback() {
+      window.removeEventListener('resize', this._onResize);
+      window.removeEventListener('keydown', this._onKey);
+    }
+
+    _fit(zoom) {
+      const scale = zoom || Math.min(innerWidth / this._w, innerHeight / this._h);
+      this._stage.style.transform = `translate(-50%, -50%) scale(${scale})`;
+      this._post('miaoda:canvas:zoom', { zoom: scale });
+    }
+
+    _post(type, extra) {
+      try {
+        window.parent.postMessage({ type, ...extra }, '*');
+      } catch (_) {}
+    }
+
+    goTo(n) {
+      if (!this._slides.length) return;
+      this._index = Math.max(0, Math.min(n, this._slides.length - 1));
+      this._slides.forEach((el, i) => {
+        el.hidden = i !== this._index;
+      });
+      this.dispatchEvent(new CustomEvent('slidechange', { detail: { index: this._index } }));
+      this._post('miaoda:deck:slide-changed', { index: this._index });
+      const u = new URL(location.href);
+      u.searchParams.set('slide', String(this._index + 1));
+      history.replaceState(null, '', u);
+    }
+
+    get index() {
+      return this._index;
+    }
+  }
+
+  customElements.define('deck-stage', DeckStage);
+})();