rvis-aiui-kit 1.0.0

package/README.md

@@ -0,0 +1,22 @@
+# rvis-aiui-kit
+
+RVIS AIUI components and the Glass3 extension SDK.
+
+## SDK
+
+```js
+import glass3 from 'rvis-aiui-kit';
+```
+
+## Components
+
+```json
+{
+  "usingComponents": {
+    "rvis-markdown": "rvis-aiui-kit/markdown",
+    "rvis-list": "rvis-aiui-kit/list"
+  }
+}
+```
+
+Available component exports: `rvis-aiui-kit/image`, `rvis-aiui-kit/list`, `rvis-aiui-kit/markdown`, `rvis-aiui-kit/model-list`, `rvis-aiui-kit/paragraph`, `rvis-aiui-kit/table`.

package/components/image/index.ink

@@ -0,0 +1,44 @@
+<script def>
+{
+  "component": true
+}
+</script>
+
+<script setup>
+export default {
+  properties: {
+    src: {
+      type: String,
+      value: ''
+    },
+    width: {
+      type: String,
+      value: '66px'
+    },
+    height: {
+      type: String,
+      value: '66px'
+    },
+    objectFit: {
+      type: String,
+      value: 'fill'
+    }
+  }
+};
+</script>
+
+<page>
+  <image
+    class="image-content"
+    src="{{ src }}"
+    mode="{{ objectFit === 'contain' ? 'aspectFit' : objectFit === 'cover' ? 'aspectFill' : 'scaleToFill' }}"
+    style="width: {{ width }}; height: {{ height }};"
+  ></image>
+</page>
+
+<style>
+.image-content {
+  border-radius: 4px;
+  overflow: hidden;
+}
+</style>

package/components/list/index.ink

@@ -0,0 +1,198 @@
+<script def>
+{
+  "component": true
+}
+</script>
+
+<script setup>
+export default {
+  properties: {
+    title: {
+      type: String,
+      value: ''
+    },
+    description: {
+      type: String,
+      value: ''
+    },
+    items: {
+      type: String,
+      value: '[]'
+    }
+  }
+};
+</script>
+
+<page>
+  <view class="list-card">
+    <view class="list-header">
+      <text class="list-title">{{ title }}</text>
+      <text class="list-description">{{ description }}</text>
+    </view>
+
+    <view class="list-header-divider"></view>
+
+    <view class="list-body">
+      <view
+        class="list-item"
+        ink:for="{{ JSON.parse(items) }}"
+        ink:key="id"
+      >
+        <view class="list-row">
+          <view class="list-status-cell">
+            <text
+              class="list-checkmark"
+              ink:if="{{ item.completed }}"
+            >✓</text>
+          </view>
+
+          <view class="list-vertical-divider">
+            <view class="list-vertical-dash"></view>
+            <view class="list-vertical-dash"></view>
+            <view class="list-vertical-dash"></view>
+            <view class="list-vertical-dash"></view>
+            <view class="list-vertical-dash"></view>
+            <view class="list-vertical-dash"></view>
+            <view class="list-vertical-dash"></view>
+            <view class="list-vertical-dash"></view>
+            <view class="list-vertical-dash"></view>
+            <view class="list-vertical-dash"></view>
+          </view>
+
+          <view class="list-item-copy">
+            <text class="list-item-text">{{ item.text }}</text>
+          </view>
+        </view>
+
+        <view
+          class="list-row-divider"
+          ink:if="{{ index !== JSON.parse(items).length - 1 }}"
+        ></view>
+      </view>
+    </view>
+  </view>
+</page>
+
+<style>
+.list-card {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  max-width: 424px;
+  box-sizing: border-box;
+  background-color: #000000;
+  border: 2px solid rgba(64, 255, 94, 0.6);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.list-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: auto;
+  height: 30px;
+  padding: 0 12px;
+  box-sizing: border-box;
+}
+
+.list-title {
+  color: #40ff5e;
+  font-family: monospace;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
+.list-description {
+  color: rgba(64, 255, 94, 0.6);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.list-header-divider {
+  width: auto;
+  align-self: stretch;
+  height: 2px;
+  background-color: rgba(64, 255, 94, 0.6);
+}
+
+.list-body {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+}
+
+.list-item {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+}
+
+.list-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+  height: 30px;
+}
+
+.list-status-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 30px;
+  box-sizing: border-box;
+}
+
+.list-vertical-divider {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 2px;
+  height: 30px;
+  flex-shrink: 0;
+}
+
+.list-vertical-dash {
+  width: 2px;
+  height: 2px;
+  background-color: rgba(64, 255, 94, 0.6);
+}
+
+.list-checkmark {
+  color: #40ff5e;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.list-item-copy {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 12px;
+  box-sizing: border-box;
+}
+
+.list-item-text {
+  color: #40ff5e;
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.list-row-divider {
+  width: auto;
+  align-self: stretch;
+  height: 1px;
+  box-sizing: border-box;
+  border-width: 1px 0 0 0;
+  border-style: dashed;
+  border-color: rgba(64, 255, 94, 0.6);
+}
+</style>

package/components/list/readme.md

@@ -0,0 +1,71 @@
+# List 列表组件
+
+`rvis-list` 用于展示带标题、描述、完成状态和分隔线的紧凑列表。
+
+## 引入组件
+
+在页面的 `<script def>` 中注册组件：
+
+```json
+{
+  "usingComponents": {
+    "rvis-list": "rvis-aiui-kit/list"
+  }
+}
+```
+
+## API
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `title` | `String` | `''` | 否 | 列表标题 |
+| `description` | `String` | `''` | 否 | 标题后的补充描述 |
+| `items` | `String` | `'[]'` | 否 | 由列表数据序列化得到的 JSON 字符串 |
+
+### Item 数据结构
+
+`items` 解析后应为数组，数组中每一项支持以下字段：
+
+| 字段 | 类型 | 必填 | 说明 |
+| --- | --- | --- | --- |
+| `id` | `String` | 是 | 列表项唯一标识，用于 `ink:key` |
+| `text` | `String` | 是 | 列表项文案 |
+| `completed` | `Boolean` | 是 | 是否显示完成勾选标记 |
+
+组件不提供事件或插槽。
+
+## 使用示例
+
+页面数据中需要先使用 `JSON.stringify` 序列化列表：
+
+```js
+export default {
+  data: {
+    title: '检查清单',
+    description: '共4项（已完成1项）',
+    items: JSON.stringify([
+      { id: 'item-01', text: '检查项1', completed: true },
+      { id: 'item-02', text: '检查项2', completed: false },
+      { id: 'item-03', text: '检查项3', completed: false },
+      { id: 'item-04', text: '检查项4', completed: false }
+    ])
+  }
+};
+```
+
+在页面模板中传入属性：
+
+```html
+<rvis-list
+  title="{{ title }}"
+  description="{{ description }}"
+  items="{{ items }}"
+></rvis-list>
+```
+
+## 注意事项
+
+- `items` 必须是可被 `JSON.parse` 解析的 JSON 数组字符串，不要直接传入 JavaScript 数组。
+- 建议为每个列表项提供稳定且唯一的 `id`。
+- 当 `completed` 为 `true` 时，列表项左侧显示勾选标记。
+- 当前运行时中，不要使用 `ink:if` / `ink:else` 反复卸载和重新显示 `rvis-list` 组件。组件内部的 `ink:for` 迭代节点可能无法在重新显示时正确恢复，导致只显示表头。动态显示或隐藏时，应保持组件挂载；隐藏状态使用 `position: absolute; left: -1000px;` 将组件移出屏幕，显示状态再恢复到原位置。不要通过 `display` 属性隐藏，否则内部文字可能无法同步隐藏并堆叠到左上角。

package/components/markdown/index.ink

@@ -0,0 +1,109 @@
+<script def>
+{
+  "component": true,
+  "usingComponents": {
+    "rvis-image": "rvis-aiui-kit/image",
+    "rvis-paragraph": "rvis-aiui-kit/paragraph",
+    "rvis-table": "rvis-aiui-kit/table"
+  }
+}
+</script>
+
+<script setup>
+import { parseMarkdown } from './parser.js';
+
+export default {
+  properties: {
+    content: { type: String, value: '' }
+  },
+  data: {},
+  lifetimes: {
+    created() {
+      let previousContent;
+      let blocks = [];
+      // AIUI serializes component data when resolving template scopes. A cached
+      // getter derives blocks from the latest host properties, including initial
+      // property sync after created(). No unsupported property observer needed.
+      Object.defineProperty(this.data, 'blocks', {
+        enumerable: true,
+        get: () => {
+          const content = this.properties.content;
+          if (content !== previousContent) {
+            blocks = parseMarkdown(content);
+            previousContent = content;
+          }
+          return blocks;
+        }
+      });
+    }
+  }
+};
+</script>
+
+<page>
+  <view class="markdown-document">
+    <view class="markdown-block" ink:for="{{ blocks }}" ink:key="id">
+      <view class="markdown-image" ink:if="{{ item.type === 'image' }}">
+        <rvis-image src="{{ item.src }}" width="424px" height="200px" objectFit="contain"></rvis-image>
+        <rvis-paragraph text="{{ item.alt }}" width="424px"></rvis-paragraph>
+      </view>
+      <view class="markdown-text" ink:if="{{ item.type === 'paragraph' }}">
+        <rvis-paragraph text="{{ item.text }}" segments="{{ item.segments }}" width="424px"></rvis-paragraph>
+      </view>
+      <view class="markdown-table" ink:if="{{ item.type === 'table' }}">
+        <rvis-table column="{{ item.column }}" data="{{ item.data }}" compact="true" columnWidths="{{ item.columnWidths }}"></rvis-table>
+      </view>
+      <view class="markdown-list-item" ink:if="{{ item.type === 'list-item' }}">
+        <text class="markdown-list-marker">{{ item.marker }}</text>
+        <rvis-paragraph text="{{ item.text }}" segments="{{ item.segments }}" width="384px"></rvis-paragraph>
+      </view>
+    </view>
+  </view>
+</page>
+
+<style>
+.markdown-document {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  width: 424px;
+  background-color: #000000;
+}
+.markdown-block {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 424px;
+  flex-shrink: 0;
+}
+.markdown-text,
+.markdown-table {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 424px;
+}
+.markdown-image {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  width: 424px;
+}
+.markdown-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  width: 424px;
+}
+.markdown-list-marker {
+  width: 32px;
+  flex-shrink: 0;
+  color: #40ff5e;
+  font-size: 16px;
+  line-height: 24px;
+}
+</style>

package/components/markdown/parser.js

@@ -0,0 +1,149 @@
+// A deliberately small Markdown subset: images, paragraphs, **strong**,
+// pipe tables and numbered list items. Unsupported syntax remains literal text.
+function unescapeText(text) {
+  return text.replace(/\\([\\`*{}\[\]()#+.!_|>~-])/g, '$1');
+}
+
+export function parseInline(text) {
+  const runs = [];
+  let plain = '';
+  const flush = () => {
+    if (plain) runs.push({ text: plain, bold: false });
+    plain = '';
+  };
+  for (let index = 0; index < text.length;) {
+    if (text[index] === '\\' && /[\\`*{}\[\]()#+.!_|>~-]/.test(text[index + 1] || '')) {
+      plain += text[index + 1];
+      index += 2;
+      continue;
+    }
+    if (text.slice(index, index + 2) === '**') {
+      let end = index + 2;
+      while (end < text.length) {
+        if (text[end] === '\\') { end += 2; continue; }
+        if (text.slice(end, end + 2) === '**') break;
+        end += 1;
+      }
+      if (end < text.length && end > index + 2) {
+        flush();
+        runs.push({ text: unescapeText(text.slice(index + 2, end)), bold: true });
+        index = end + 2;
+        continue;
+      }
+    }
+    plain += text[index++];
+  }
+  flush();
+  return runs;
+}
+
+function textProps(text) {
+  const runs = parseInline(text);
+  return {
+    text: runs.map(run => run.text).join(''),
+    segments: runs.some(run => run.bold) ? JSON.stringify(runs) : '[]'
+  };
+}
+
+export function splitTableRow(line) {
+  const cells = [];
+  let cell = '';
+  const source = line.trim();
+  for (let index = 0; index < source.length; index += 1) {
+    const char = source[index];
+    if (char === '\\' && index + 1 < source.length) {
+      cell += char + source[++index];
+    } else if (char === '|') {
+      cells.push(cell.trim());
+      cell = '';
+    } else {
+      cell += char;
+    }
+  }
+  cells.push(cell.trim());
+  if (source.startsWith('|')) cells.shift();
+  // An escaped final pipe belongs to the cell, not the table border.
+  if (source.endsWith('|') && cells[cells.length - 1] === '') cells.pop();
+  return cells;
+}
+
+function tableColumns(lines, index) {
+  if (!lines[index].includes('|') || index + 1 >= lines.length) return null;
+  const headers = splitTableRow(lines[index]);
+  const separators = splitTableRow(lines[index + 1]);
+  if (headers.length < 2 || headers.length !== separators.length ||
+      !separators.every(cell => /^:?-{3,}:?$/.test(cell))) return null;
+  return headers.map((title, columnIndex) => ({
+    title: unescapeText(title),
+    dataIndex: 'column' + columnIndex,
+    align: separators[columnIndex].startsWith(':') && separators[columnIndex].endsWith(':')
+      ? 'center' : separators[columnIndex].endsWith(':') ? 'right' : 'left'
+  }));
+}
+
+function imageLine(line) {
+  const match = line.trim().match(/^!\[([^\]]*)\]\((\S+)\)$/);
+  if (!match || !/^(https?:\/\/|\/(?!\/)|\.\.?\/)/i.test(match[2])) return null;
+  return { alt: unescapeText(match[1]), src: match[2] };
+}
+
+function listLine(line) {
+  return line.match(/^ {0,3}(\d+)\.\s+(.+)$/);
+}
+
+export function parseMarkdown(content) {
+  if (typeof content !== 'string' || !content.trim()) return [];
+  const lines = content.replace(/\r\n?/g, '\n').split('\n');
+  const blocks = [];
+  for (let index = 0; index < lines.length;) {
+    if (!lines[index].trim()) { index += 1; continue; }
+    const id = 'line-' + index;
+    const image = imageLine(lines[index]);
+    if (image) {
+      blocks.push({ id, type: 'image', ...image });
+      index += 1;
+      continue;
+    }
+    const columns = tableColumns(lines, index);
+    if (columns) {
+      index += 2;
+      const rows = [];
+      while (index < lines.length && lines[index].includes('|')) {
+        const cells = splitTableRow(lines[index]);
+        if (cells.length !== columns.length) break;
+        const row = { key: 'line-' + index };
+        columns.forEach((column, cellIndex) => {
+          row[column.dataIndex] = unescapeText(cells[cellIndex]);
+        });
+        rows.push(row);
+        index += 1;
+      }
+      blocks.push({
+        id, type: 'table', column: JSON.stringify(columns), data: JSON.stringify(rows),
+        columnWidths: columns.length === 3 ? '120px 156px 144px' : ''
+      });
+      continue;
+    }
+    const numbered = listLine(lines[index]);
+    if (numbered) {
+      let text = numbered[2];
+      index += 1;
+      while (index < lines.length && /^ {2,}\S/.test(lines[index]) && !listLine(lines[index]) && !imageLine(lines[index]) && !tableColumns(lines, index)) {
+        text += ' ' + lines[index++].trim();
+      }
+      blocks.push({ id, type: 'list-item', marker: numbered[1] + '.', ...textProps(text) });
+      continue;
+    }
+    const paragraph = [lines[index++].trim()];
+    while (index < lines.length && lines[index].trim() && !imageLine(lines[index]) && !listLine(lines[index]) && !tableColumns(lines, index)) {
+      paragraph.push(lines[index++].trim());
+    }
+    blocks.push({ id, type: 'paragraph', ...textProps(paragraph.join(' ')) });
+  }
+  // Keep a uniform block shape and valid fallback props while AIUI resolves
+  // template bindings. The renderer creates only the matching type branch.
+  return blocks.map(block => ({
+    text: '', segments: '[]', src: '', alt: '', marker: '',
+    column: '[]', data: '[]', columnWidths: '', ...block
+  }));
+}

package/components/markdown/readme.md

@@ -0,0 +1,50 @@
+# Markdown 组件
+
+使用项目 `image`、`paragraph`、`table` 组件渲染轻量 Markdown。没有 `streamdown`、HTML 注入、浏览器 DOM 或第三方解析库依赖。
+
+```json
+{
+  "usingComponents": {
+    "rvis-markdown": "rvis-aiui-kit/markdown"
+  }
+}
+```
+
+```xml
+<rvis-markdown content="{{ markdownContent }}"></rvis-markdown>
+```
+
+`content` 为原始 Markdown 字符串，默认 `''`。组件宽度为 `424px`，不包含滚动容器；页面在完整的 `480px × 640px` 屏幕内从 y=0 布局，外层使用 `scroll-view`。Demo 入口为「组件示例 → Markdown 组件 Demo」。
+
+## 流式效果实验 Demo
+
+当前 demo 从空字符串开始，每 `120ms` 追加 `12` 个 Unicode 码点，直到完整输出同一份 `result.md`。这是本地定时模拟，不调用模型或流式网络接口；没有缓存到完整段落或表格后才显示，所以可观察未闭合语法的真实表现。
+
+镜腿上下滑动仍每次滚动 `120px`，不自动跟随到底部。离开到其他页面时暂停、返回时继续，退出页面时清理定时器；重新进入 demo 从头开始。
+
+当前 `ink-open` 验证中，表格能逐行增长，完成后六行数据及四条编号列表可见；但后续追加过程中曾出现图片说明和开头段落消失，未闭合语法也可能暂时显示为原文并引起重新排版。本 demo 用于暴露流式问题，不表示组件已具备稳定流式支持；本次未调整解析器或共享组件的渲染实现。
+
+## 第一版支持范围
+
+- 独立一行的 `![说明](URL)` 图片。保留完整 URL（含查询参数），使用共享图片组件以 `contain` 放入 `424px × 200px` 区域，并显示说明文字。支持 HTTP(S)、`/`、`./`、`../` 路径；图片是否可加载取决于地址和设备网络。当前没有图片加载状态或失败事件，不承诺失败自动替换占位图。
+- 普通段落，空行分段；同段落的源文件换行合并为空格。
+- 段落和列表中的 `**加粗**`，支持同段内多处加粗。共享段落组件使用原生 `p` 的行内排版能力，正确处理普通文字和粗体跨行；不经过 Markdown 原生渲染器。
+- 管道表格、表头、`---` 分隔行，支持首尾管道省略、空单元格、`\|`、冒号对齐。表格单元格目前仅支持纯文本。三列时使用 `120px / 156px / 144px` 列宽，其他列数等分；不支持跨行/跨列或宽表自动改成卡片。
+- `1. 内容` 形式的编号列表，保留原编号，续行与正文对齐；支持缩进的续行。
+- 保留中文和 emoji 原字符；emoji 的字形和颜色取决于 Host 字体。
+
+不支持标题、嵌套列表、斜体、代码、公式、HTML、可点击链接等完整 Markdown 功能，未识别的行按普通文本显示。不是完整 CommonMark/GFM 实现。第一版针对完整文档展示，不保证逐 token 流式解析时的稳定布局。
+
+## 实现与更新
+
+`parser.js` 输出平铺的图片、段落、表格、列表项 blocks；模板只使用单层 `ink:for`，表格单元格由共享表格组件单独平铺。父组件与子组件的循环处于独立组件作用域。
+
+每个 block 使用 `ink:if` 按类型创建对应分支，不预先挂载其他类型的组件。这份 `result.md` 只需要一个表格，不会为其他段落创建隐藏的空表格。旧版全部挂载后用 `position: absolute; left: -1000px` 移出屏幕的方案，会在此 demo 中触发表格压成横线的问题；已通过固定 `448px × 502px` 视口、`352px` 高滚动区域的 `ink-open` 对照验证，勿恢复该方案。
+
+AIUI 当前组件运行时没有实现小程序式 property observers。组件在 `created` 中给本地 `data.blocks` 定义可枚举 getter，模板读取数据时按最新 `properties.content` 解析；相同内容复用缓存，无轮询计时器。当前验证范围为一次性传入完整文档，并在展示期间保持内容不变；滚动只改变页面的 `scrollTop`。getter 能重新解析更新后的字符串，但这不等于条件节点销毁、重建后的显示已得到保证；跨类型内容替换和逐 token 流式更新不在本版保证范围。不要对组件内部 `blocks` 调用 `setData`。
+
+更新运行时后，应复查组件作用域、getter 的数据序列化及 `p` 行内排版；Node 测试不代替原生布局验证。
+
+```sh
+npm run test:components
+```