@lark-apaas/coding-registry-buildless 0.1.0 → 0.1.2-alpha.0

package/README.md

@@ -4,27 +4,32 @@
 
 **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 文件 → 把源码**按目录结构原样拷进**用户项目（项目持有、可改、不覆盖）。
+被 [miaoda-cli](https://code.byted.org/apaas/miaoda-cli) 的 `miaoda registry` 命令消费：抓本包 tarball → 递归扫白名单目录下的代码文件 → 把源码**拍平为 basename 拷进**用户项目根（项目持有、可改、不覆盖）。
 
 **非运行时依赖**：buildless 栈不 `npm install` 本包；它只是个被 CLI 抓取的 catalog，与 template / steering 同分发模型。
 
-## 结构（内容平铺在包根，拷贝时 1:1 落地）
+## 结构（包内按目录组织；落地拍平到项目根）
+
+包内 SDK 文件必须放在**白名单顶层目录**下（这是条目门槛之一）：
 
 ```
-scripts/      # 纯 JS / Web Component（如 deck-stage.js）  → 项目 scripts/
-components/   # React / JSX（如 tweaks-panel.jsx）         → 项目 components/
-stylesheets/  # CSS（按需）                                → 项目 stylesheets/
+scripts/      # 纯 JS / Web Component（如 deck-stage.js）
+components/   # React / JSX（如 tweaks-panel.jsx）
+stylesheets/  # CSS（按需）
 ```
 
-`add` 保留文件相对包根的路径：`scripts/deck-stage.js` → 项目 `scripts/deck-stage.js`。无 `targets` 映射、不拍平。
+`add` **不保留子目录**：所有文件**拍平为 basename 落到项目根**（`scripts/deck-stage.js` → 项目根 `deck-stage.js`）。同名 basename 撞车时后者覆盖前者。
+
+## 条目识别：目录白名单 + USAGE（可选元数据）
 
-## 无 registry.json：USAGE 块即事实源
+不维护独立 manifest。**条目门槛** = 白名单顶层目录（`scripts/` · `components/` · `stylesheets/`，任意深度）下的代码文件（`.js/.jsx/.mjs/.cjs/.ts/.tsx/.css`）。
 
-不维护独立 manifest。每个 SDK 文件以 `/* BEGIN USAGE */ … /* END USAGE */` 注释块开头，声明 name / Exports(to window) / Usage / 约束，可选 `// Depends: <name>` 声明跨 SDK 依赖。
+USAGE 块（`/* BEGIN USAGE */ … /* END USAGE */`）**可选但强烈推荐**：有则声明 name / Exports(to window) / Usage / 约束（供 Agent 读）+ `// Depends: <token>` 依赖；无则 usage 为空、无依赖，仍是条目。
 
-- 条目 `name` = 文件名去扩展名（`deck-stage.js` → `deck-stage`）。
-- `miaoda registry list` 直接输出各文件 USAGE 块原文供 Agent 消费。
-- `miaoda registry add <name>` 解析 `Depends` 闭包后按结构拷入。
+- 条目 `name` = 文件名去扩展名（`deck-stage.js` → `deck-stage`），**不要求唯一**（`foo.jsx` + `foo.css` 可共存）。
+- **寻址（多匹配）**：`add` / `Depends` 的 token 按「name / 完整文件名 / relPath」匹配，**命中的条目全部拉取**；`relPath`（相对包根路径）是唯一精确地址。
+- `miaoda registry list` 输出各文件 USAGE 块原文供 Agent 消费（`--json` 的 `file` 字段即 relPath）。
+- `miaoda registry add <token>` 解析 `Depends` 闭包后，**拍平为 basename 拷到项目根**（`added`/`skipped` 为落地 basename）。
 
 ## 解析（CLI 怎么找到本包）
 

package/components/android-frame.jsx

@@ -0,0 +1,189 @@
+/* BEGIN USAGE */
+// Android.jsx — Simplified Android (Material 3) device frame
+// Status bar + content + gesture nav + keyboard.
+// Based on Figma M3 spec. No dependencies, no image assets.
+// Exports (to window): AndroidDevice, AndroidStatusBar, AndroidListItem, AndroidNavBar, AndroidKeyboard
+//
+// Usage — wrap your screen content in <AndroidDevice> to get the bezel, status
+// bar and gesture nav (props: width=412, height=892, dark, keyboard):
+//
+//   <AndroidDevice>
+//     ...your screen content...
+//   </AndroidDevice>
+//   <AndroidDevice dark keyboard>…</AndroidDevice>
+//   <AndroidDevice width={360} height={800}>…</AndroidDevice>   // smaller device size
+/* END USAGE */
+
+const MD_C = {
+  surface: '#f4fbf8',
+  surfaceVariant: '#dae5e1',
+  inverseOnSurface: '#ecf2ef',
+  secondaryContainer: '#cde8e1',
+  primaryFixedDim: '#83d5c6',
+  onSurface: '#171d1b',
+  onSurfaceVar: '#49454f',
+  onPrimaryContainer: '#00201c',
+  primary: '#006a60',
+  frameBorder: 'rgba(116,119,117,0.5)',
+};
+
+// ─────────────────────────────────────────────────────────────
+// Status bar (time left, wifi/cell/battery right)
+// ─────────────────────────────────────────────────────────────
+function AndroidStatusBar({ dark = false }) {
+  const c = dark ? '#fff' : MD_C.onSurface;
+  return (
+    <div style={{
+      height: 40, display: 'flex', alignItems: 'center',
+      justifyContent: 'space-between', padding: '0 16px',
+      position: 'relative',
+      fontFamily: 'Roboto, system-ui, sans-serif',
+    }}>
+      {/* time left */}
+      <div style={{ width: 128, display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span style={{ fontSize: 14, fontWeight: 400, letterSpacing: 0.25, lineHeight: '20px', color: c }}>9:30</span>
+      </div>
+      {/* camera punch-hole (center) */}
+      <div style={{
+        position: 'absolute', left: '50%', top: 8, transform: 'translateX(-50%)',
+        width: 24, height: 24, borderRadius: 100, background: '#2e2e2e',
+      }} />
+      {/* status icons right */}
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ display: 'flex', paddingRight: 2 }}>
+          <svg width="16" height="16" viewBox="0 0 16 16" style={{ marginRight: -2 }}>
+            <path d="M8 13.3L.67 5.97a10.37 10.37 0 0114.66 0L8 13.3z" fill={c}/>
+          </svg>
+          <svg width="16" height="16" viewBox="0 0 16 16" style={{ marginRight: -2 }}>
+            <path d="M14.67 14.67V1.33L1.33 14.67h13.34z" fill={c}/>
+          </svg>
+        </div>
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <rect x="3.75" y="2" width="8.5" height="13" rx="1.5" fill={c}/>
+          <rect x="5.5" y="0.9" width="5" height="2" rx="0.5" fill={c}/>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// List item (Material 3)
+// ─────────────────────────────────────────────────────────────
+function AndroidListItem({ headline, supporting, leading }) {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: 16,
+      padding: '12px 16px', minHeight: 56, boxSizing: 'border-box',
+      fontFamily: 'Roboto, system-ui, sans-serif',
+    }}>
+      {leading && (
+        <div style={{
+          width: 40, height: 40, borderRadius: '50%',
+          background: MD_C.primary, color: '#fff',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontSize: 18, fontWeight: 500, flexShrink: 0,
+        }}>{leading}</div>
+      )}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontSize: 16, color: MD_C.onSurface, lineHeight: '24px' }}>{headline}</div>
+        {supporting && (
+          <div style={{ fontSize: 14, color: MD_C.onSurfaceVar, lineHeight: '20px' }}>{supporting}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Gesture nav bar (pill)
+// ─────────────────────────────────────────────────────────────
+function AndroidNavBar({ dark = false }) {
+  return (
+    <div style={{
+      height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center',
+    }}>
+      <div style={{
+        width: 108, height: 4, borderRadius: 2,
+        background: dark ? '#fff' : MD_C.onSurface, opacity: 0.4,
+      }} />
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Device frame — wraps everything
+// ─────────────────────────────────────────────────────────────
+function AndroidDevice({
+  children, width = 412, height = 892, dark = false,
+  keyboard = false,
+}) {
+  return (
+    <div style={{
+      width, height, borderRadius: 18, overflow: 'hidden',
+      background: dark ? '#1d1b20' : MD_C.surface,
+      border: `8px solid ${MD_C.frameBorder}`,
+      boxShadow: '0 30px 80px rgba(0,0,0,0.25)',
+      display: 'flex', flexDirection: 'column', boxSizing: 'border-box',
+    }}>
+      <AndroidStatusBar dark={dark} />
+      <div style={{ flex: 1, overflow: 'auto' }}>
+        {children}
+      </div>
+      {keyboard && <AndroidKeyboard />}
+      <AndroidNavBar dark={dark} />
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Keyboard — Gboard (Material 3)
+// ─────────────────────────────────────────────────────────────
+function AndroidKeyboard() {
+  let _k = 0;
+  const key = (l, { flex = 1, bg = MD_C.surface, r = 6, minW, fs = 21 } = {}) => (
+    <div key={_k++} style={{
+      height: 46, borderRadius: r, flex, minWidth: minW,
+      background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
+      fontFamily: 'Roboto, system-ui', fontSize: fs,
+      color: MD_C.onPrimaryContainer,
+    }}>{l}</div>
+  );
+  const row = (keys, style = {}) => (
+    <div style={{ display: 'flex', gap: 6, justifyContent: 'center', ...style }}>
+      {keys.map(l => key(l))}
+    </div>
+  );
+  return (
+    <div style={{
+      background: MD_C.inverseOnSurface, padding: '0 8px 8px',
+      display: 'flex', flexDirection: 'column', gap: 4,
+    }}>
+      {/* navbar spacer (icons omitted) */}
+      <div style={{ height: 44 }} />
+      {/* key rows */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {row(['q','w','e','r','t','y','u','i','o','p'])}
+        {row(['a','s','d','f','g','h','j','k','l'], { padding: '0 20px' })}
+        <div style={{ display: 'flex', gap: 6 }}>
+          {key('', { bg: MD_C.surfaceVariant })}
+          <div style={{ display: 'flex', gap: 6, flex: 7, minWidth: 274 }}>
+            {['z','x','c','v','b','n','m'].map(l => key(l))}
+          </div>
+          {key('', { bg: MD_C.surfaceVariant })}
+        </div>
+        <div style={{ display: 'flex', gap: 6 }}>
+          {key('?123', { bg: MD_C.secondaryContainer, r: 100, minW: 58, fs: 14 })}
+          {key(',', { bg: MD_C.surfaceVariant })}
+          {key('', { flex: 3, minW: 154 })}
+          {key('.', { bg: MD_C.surfaceVariant })}
+          {key('', { bg: MD_C.primaryFixedDim, r: 100, minW: 58 })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, {
+  AndroidDevice, AndroidStatusBar, AndroidListItem, AndroidNavBar, AndroidKeyboard,
+});