@21stware/rpui 0.1.1 → 0.3.1

package/dist/gallery.js

@@ -0,0 +1,2654 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const PRIMITIVES = [
+  // layout
+  "viewport",
+  "layout",
+  "panel",
+  "sidebar",
+  "logo",
+  "split-pane",
+  "divider",
+  "spacer",
+  // controls
+  "search",
+  "input",
+  "textarea",
+  "select",
+  "button",
+  "button-group",
+  "checkbox",
+  "radio",
+  "toggle",
+  "form",
+  "form-item",
+  "date-picker",
+  "upload",
+  "image-placeholder",
+  "progress",
+  "slider",
+  "range",
+  "number-input",
+  "rating",
+  "pin-input",
+  "color-swatch",
+  "autocomplete",
+  // navigation
+  "badge",
+  "avatar",
+  "list",
+  "list-item",
+  "tabs",
+  "tab",
+  "pagination",
+  "steps",
+  "breadcrumb",
+  "segmented",
+  "command-palette",
+  "context-menu",
+  "menu",
+  "menu-item",
+  "toc",
+  "kbd",
+  // data display
+  "table",
+  "table-row",
+  "bulk-action-bar",
+  "empty",
+  "loading",
+  "alert",
+  "toast",
+  "dropdown",
+  "popover",
+  "tooltip",
+  "modal",
+  "drawer",
+  "card",
+  "stat-card",
+  "tag",
+  "chip",
+  "tree",
+  "tree-item",
+  "timeline",
+  "timeline-item",
+  "calendar",
+  "kanban",
+  "kanban-column",
+  "kanban-card",
+  "code-block",
+  "diff",
+  "image-grid",
+  "key-value",
+  "kv-row",
+  "accordion",
+  "accordion-item",
+  "banner",
+  "skeleton",
+  "countdown",
+  "result",
+  "permission-gate",
+  "quota-bar",
+  "api-key",
+  "audit-row",
+  "workflow-node",
+  // iOS
+  "ios-navbar",
+  "ios-tabbar",
+  "ios-list",
+  "ios-list-item",
+  "ios-action-sheet",
+  "ios-alert",
+  "ios-switch",
+  "ios-segmented",
+  "ios-button",
+  "ios-search",
+  "ios-stepper",
+  // macOS
+  "macos-window",
+  "macos-toolbar",
+  "macos-menubar",
+  "macos-sidebar",
+  "macos-source-item",
+  "macos-segmented",
+  "macos-popover",
+  "macos-sheet",
+  "macos-stepper",
+  "macos-disclosure",
+  "macos-table",
+  // agent / conversational UI
+  "chat",
+  "user-message",
+  "assistant-message",
+  "system-message",
+  "tool-call",
+  "agent-output",
+  "reasoning",
+  "message-actions",
+  "suggestions",
+  "typing",
+  "composer",
+  "citation",
+  "token-usage"
+];
+function primitiveComponentTag(lang) {
+  return lang.includes("-") ? lang : `${lang}-el`;
+}
+const EXPLICIT = {
+  // canvas
+  page: "page-el",
+  view: "main-view",
+  annotation: "annotation-el",
+  enum: "enum-el",
+  "enum-item": "enum-item",
+  viewport: "viewport-el",
+  // curated primitive rename
+  navigator: "navbar-el"
+};
+const LANG_TO_COMPONENT = (() => {
+  const map = {};
+  for (const lang of PRIMITIVES) map[lang] = primitiveComponentTag(lang);
+  for (const [lang, comp] of Object.entries(EXPLICIT)) map[lang] = comp;
+  return map;
+})();
+(() => {
+  const map = {};
+  for (const [lang, comp] of Object.entries(LANG_TO_COMPONENT)) map[comp] = lang;
+  return map;
+})();
+function toComponentTag(tag) {
+  return LANG_TO_COMPONENT[tag.toLowerCase()] ?? tag;
+}
+function expandSelfClosing(source) {
+  return source.replace(
+    /<([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)\/>/g,
+    (_m, tag, attrs) => `<${tag}${attrs}></${tag}>`
+  );
+}
+function rewriteTags(source) {
+  return source.replace(
+    /<(\/?)([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>])*)>/g,
+    (_m, slash, tag, rest) => `<${slash}${toComponentTag(tag)}${rest}>`
+  );
+}
+function normalize(source) {
+  return rewriteTags(expandSelfClosing(source.trim()));
+}
+function parseToPage(source) {
+  const holder = document.createElement("div");
+  holder.innerHTML = normalize(source);
+  const root = holder.querySelector("page-el") ?? holder.firstElementChild;
+  if (!root) throw new Error("RPML parse error: no <page> root element found");
+  return root;
+}
+function attr(el, name, fallback = "") {
+  return el.getAttribute(name) ?? fallback;
+}
+function intAttr(el, name, fallback) {
+  const raw = el.getAttribute(name);
+  const value = raw === null || raw === "" ? NaN : Number(raw);
+  return Number.isFinite(value) ? value : fallback;
+}
+function escapeHtml(value) {
+  return value.replace(/[&<>'"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;" })[c] || c);
+}
+function csv(el, name, fallback) {
+  return attr(el, name, fallback).split(",").map((s) => s.trim()).filter(Boolean);
+}
+const deviceWidths = { web: 1440, ipad: 834, mobile: 390 };
+function resolveWidth(el, fallback) {
+  const raw = el.getAttribute("width");
+  const width = raw === null || raw === "" ? NaN : Number(raw);
+  if (Number.isFinite(width)) return width;
+  return deviceWidths[attr(el, "device")] ?? fallback;
+}
+function hasExplicitNumericHeight(el) {
+  const raw = el.getAttribute("height");
+  return raw !== null && raw !== "" && Number.isFinite(Number(raw));
+}
+function usesAutoHeight(el) {
+  const raw = el.getAttribute("height");
+  return raw === "auto" || el.hasAttribute("auto-height") || !!el.getAttribute("device") && !hasExplicitNumericHeight(el);
+}
+function resolveHeight(el, fallback) {
+  const raw = el.getAttribute("height");
+  const height = raw === null || raw === "" ? NaN : Number(raw);
+  return Number.isFinite(height) ? height : fallback;
+}
+function isTopAnnotation(node) {
+  if (!(node instanceof HTMLElement)) return false;
+  const tag = node.tagName.toLowerCase();
+  return tag === "annotation-el" || tag === "annotation-el";
+}
+function isViewportNode(node) {
+  if (!(node instanceof HTMLElement)) return false;
+  const tag = node.tagName.toLowerCase();
+  return tag === "viewport-el" || tag === "viewport-el";
+}
+function define(name, ctor) {
+  if (customElements.get(name)) return;
+  const Alias = class extends ctor {
+  };
+  customElements.define(name, Alias);
+}
+const RPUI_STYLE_ID = "rpui-runtime-style";
+const style = `
+:root { --rp-bg:#f0f2f5; --rp-surface:#fff; --rp-surface-soft:#f9fafb; --rp-text:#111827; --rp-muted:#6b7280; --rp-border:#e5e7eb; --rp-border-strong:#d1d5db; --rp-primary:#2563eb; --rp-success:#059669; --rp-warning:#d97706; --rp-danger:#dc2626; --rp-purple:#7c3aed; --rp-radius-sm:4px; --rp-radius-md:8px; --rp-radius-lg:12px; --rp-shadow:0 8px 28px rgba(15,23,42,.08); --rp-font:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
+* { box-sizing:border-box; }
+body { margin:0; font-family:var(--rp-font); color:var(--rp-text); background:var(--rp-bg); }
+.rp-icon { display:inline-block; flex:0 0 auto; vertical-align:-0.16em; }
+page-el, page-el { display:block; min-height:100vh; padding:32px 40px; overflow:auto; }
+.page-el-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:100vh; align-items:start; }
+.page-el-main { display:flex; flex-direction:column; min-width:0; overflow:visible; }
+.page-el-header { flex:0 0 auto; width:fit-content; max-width:none; margin:0 0 22px; }
+.page-el-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
+.page-el-title { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.02em; }
+.page-el-route { font-size:13px; color:var(--rp-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.7); border:1px solid var(--rp-border); border-radius:999px; padding:3px 9px; }
+.page-el-description { margin:10px 0 0; color:#374151; line-height:1.6; font-size:14px; }
+.page-el-body { flex:0 1 auto; display:block; width:fit-content; max-width:100%; min-height:0; overflow:visible; }
+.annotation-el-pane { min-width:380px; max-width:680px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:auto; padding:0 0 48px 0; align-self:start; }
+.annotation-el-pane-inner { padding:4px 12px 24px 6px; }
+main-view, main-view { display:block; width:fit-content; margin:0 0 28px; position:relative; }
+.rp-main-shell { position:relative; overflow:visible; border:1px solid var(--rp-border-strong); border-radius:var(--rp-radius-md); background:var(--rp-surface); box-shadow:var(--rp-shadow); }
+.rp-main-stage-clip { overflow:hidden; border-radius:var(--rp-radius-md); }
+.rp-main-stage { position:relative; transform-origin:top left; background:var(--rp-surface); }
+.rp-pin { position:absolute; z-index:20; display:grid; place-items:center; width:24px; height:24px; color:#fff; font-size:11px; font-weight:700; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:translate(-6px,-6px) rotate(-45deg); box-shadow:0 2px 8px rgba(37,99,235,.25); cursor:pointer; }
+.rp-pin > span { transform:rotate(45deg); }
+.rp-pin:hover { opacity:0.85; }
+annotation-el, annotation-el { display:block; width:fit-content; max-width:980px; margin:14px 0; line-height:1.65; color:#1f2937; font-size:14px; }
+annotation-el annotation-el, annotation-el annotation-el, annotation-el annotation-el, annotation-el annotation-el { margin:10px 0 8px 22px; }
+.annotation-el-head { display:flex; align-items:center; gap:8px; margin:0 0 4px; width:fit-content; }
+.annotation-el-title { font-weight:700; color:#111827; }
+.annotation-el-marker { display:inline-grid; place-items:center; flex:0 0 auto; color:#fff; font-size:10px; font-weight:700; line-height:1; }
+.annotation-el-marker.drop { width:22px; height:22px; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
+.annotation-el-marker.drop > span { transform:rotate(45deg); }
+.annotation-el-marker.circle { width:16px; height:16px; background:var(--rp-purple); border-radius:50%; }
+.annotation-el-marker.triangle { width:18px; height:16px; background:var(--rp-success); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
+.annotation-el-marker.triangle > span { transform:translateY(2px); font-size:9px; }
+.annotation-el-body { display:block; position:relative; width:fit-content; max-width:920px; }
+.rp-pin-slice { width:18px; height:18px; font-size:10px; box-shadow:0 1px 5px rgba(37,99,235,.3); }
+.annotation-el-body > :not(annotation-el):not(annotation-el):not(enum-el):not(enum-el) { max-width:820px; }
+.annotation-el-pane annotation-el, .annotation-el-pane annotation-el { max-width:none; }
+.annotation-el-pane .annotation-el-body { max-width:none; }
+.annotation-el-pane .annotation-el-body > :not(annotation-el):not(annotation-el):not(enum-el):not(enum-el) { max-width:420px; }
+.annotation-el-body p { margin:0 0 8px; }
+enum-el, enum-el { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; width:fit-content; margin:8px 0 12px; }
+.annotation-el-pane enum-el, .annotation-el-pane enum-el { flex-wrap:wrap; }
+enum-item, enum-item { display:block; flex:0 0 auto; width:fit-content; min-width:180px; max-width:600px; border:1px solid #f0f0f0; border-radius:var(--rp-radius-md); background:#fff; overflow:hidden; }
+.enum-el-label { display:flex; align-items:flex-start; gap:6px; padding:5px 9px 4px; font-size:12px; font-weight:650; color:#374151; }
+.enum-el-index { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; background:#111827; color:#fff; font-size:10px; font-weight:750; border-radius:3px; flex:0 0 auto; margin-top:1px; }
+.enum-el-label-text { display:block; }
+.enum-el-description { display:block; margin-top:2px; font-size:11px; line-height:1.35; font-weight:400; color:var(--rp-muted); }
+.enum-el-content { display:block; width:fit-content; padding:8px; }
+.annotation-el-title { font-weight:700; color:#111827; cursor:pointer; }
+.annotation-el-title:hover { color:var(--rp-primary); }
+.rp-section-focus { outline:2px dashed var(--rp-primary); outline-offset:4px; border-radius:4px; }
+viewport-el, viewport-el { display:flex; flex-direction:column; width:var(--snap-width,1440px); height:var(--snap-height,900px); background:#f8fafc; overflow:hidden; color:#111827; }
+layout-el, layout-el { display:grid; grid-template-columns:var(--snap-columns,1fr); grid-template-rows:var(--snap-rows,auto); gap:var(--snap-gap,0); align-content:start; width:fit-content; max-width:100%; min-width:0; }
+layout-el > *, layout-el > * { min-width:0; }
+viewport-el layout-el, viewport-el layout-el { width:100%; }
+viewport-el > layout-el, viewport-el > layout-el { flex:1 1 auto; min-height:0; }
+viewport-el > navbar-el, viewport-el > navbar-el { flex:0 0 auto; }
+panel-el, panel-el { display:block; width:fit-content; max-width:100%; background:#fff; border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); padding:var(--snap-padding,16px); }
+viewport-el panel-el, viewport-el panel-el { width:auto; min-width:0; }
+panel-el[elevation="1"], panel-el[elevation="1"] { box-shadow:0 4px 16px rgba(15,23,42,.06); }
+panel-el[elevation="2"], panel-el[elevation="2"] { box-shadow:var(--rp-shadow); }
+navbar-el, navbar-el { display:flex; align-items:center; gap:14px; height:var(--snap-height,64px); padding:0 24px; background:#fff; border-bottom:1px solid var(--rp-border); }
+sidebar-el, sidebar-el { display:block; width:var(--snap-width,260px); min-height:0; background:#fff; border-right:1px solid var(--rp-border); padding:14px; }
+viewport-el sidebar-el, viewport-el sidebar-el { min-height:100%; }
+sidebar-el[collapsed], sidebar-el[collapsed] { width:72px; }
+logo-el, logo-el { display:inline-grid; place-items:center; width:var(--snap-size,82px); height:32px; border-radius:8px; background:#111827; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; }
+search-el, search-el, input-el, input-el, date-picker, date-picker { display:inline-flex; align-items:center; gap:8px; width:280px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }
+textarea-el, textarea-el { display:block; width:320px; min-height:calc(var(--snap-rows,3) * 24px + 22px); padding:9px 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; white-space:pre-wrap; }
+search-el[state="focus"], search-el[state="focus"], input-el[state="focus"], input-el[state="focus"], textarea-el[state="focus"], textarea-el[state="focus"], date-picker[state="focus"], date-picker[state="focus"] { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
+search-el[state="filled"], search-el[state="filled"], input-el[state="filled"], input-el[state="filled"], textarea-el[state="filled"], textarea-el[state="filled"], date-picker[state="filled"], date-picker[state="filled"] { border-color:#93c5fd; background:#f8fbff; }
+search-el[state="error"], search-el[state="error"], input-el[state="error"], input-el[state="error"], textarea-el[state="error"], textarea-el[state="error"], date-picker[state="error"], date-picker[state="error"] { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }
+search-el[state="disabled"], search-el[state="disabled"], input-el[state="disabled"], input-el[state="disabled"], textarea-el[state="disabled"], textarea-el[state="disabled"], date-picker[state="disabled"], date-picker[state="disabled"] { opacity:.55; background:#f3f4f6; }
+input-el[label], input-el[label], date-picker[label], date-picker[label] { display:inline-grid; align-items:start; gap:6px; width:280px; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }
+input-el[label][state="focus"], input-el[label][state="focus"], input-el[label][state="filled"], input-el[label][state="filled"], input-el[label][state="error"], input-el[label][state="error"], date-picker[label][state="focus"], date-picker[label][state="focus"], date-picker[label][state="filled"], date-picker[label][state="filled"], date-picker[label][state="error"], date-picker[label][state="error"] { border:0; background:transparent; box-shadow:none; }
+.rp-field-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }
+input-el[state="focus"] .rp-field-control, input-el[state="focus"] .rp-field-control, date-picker[state="focus"] .rp-field-control, date-picker[state="focus"] .rp-field-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
+input-el[state="filled"] .rp-field-control, input-el[state="filled"] .rp-field-control, date-picker[state="filled"] .rp-field-control, date-picker[state="filled"] .rp-field-control { border-color:#93c5fd; background:#f8fbff; }
+input-el[state="error"] .rp-field-control, input-el[state="error"] .rp-field-control, date-picker[state="error"] .rp-field-control, date-picker[state="error"] .rp-field-control { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }
+.rp-field-label { display:block; margin:0 0 6px; color:#374151; font-size:12px; font-weight:650; }
+.rp-placeholder { color:#9ca3af; }
+.rp-value { color:#111827; }
+.rp-error-text { color:var(--rp-danger); font-size:12px; }
+select-el, select-el { display:inline-block; width:280px; max-width:100%; }
+.select-el-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; }
+select-el[state="expanded"] .select-el-control, select-el[state="expanded"] .select-el-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
+select-el[state="disabled"], select-el[state="disabled"] { opacity:.55; }
+.select-el-value { flex:1 1 auto; min-width:0; }
+.select-el-options { display:none; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; box-shadow:0 10px 18px rgba(15,23,42,.08); }
+select-el[state="expanded"] .select-el-options, select-el[state="expanded"] .select-el-options { display:grid; gap:2px; }
+.select-el-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }
+.select-el-option.selected { background:#eff6ff; color:#1d4ed8; font-weight:700; }
+badge-el, badge-el { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:750; }
+avatar-el, avatar-el { display:inline-grid; place-items:center; width:var(--snap-size,32px); height:var(--snap-size,32px); border-radius:999px; background:#e0e7ff; color:#3730a3; font-size:12px; font-weight:800; }
+list-el, list-el { display:flex; flex-direction:column; gap:4px; width:100%; }
+list-item, list-item { display:flex; align-items:center; gap:8px; width:100%; min-width:180px; height:36px; padding:0 10px; border-radius:8px; color:#374151; }
+list-item[state="selected"], list-item[state="selected"] { background:#eff6ff; color:#1d4ed8; font-weight:700; }
+list-item[state="disabled"], list-item[state="disabled"] { opacity:.5; }
+.list-el-label { flex:1 1 auto; }
+.list-el-badge { margin-left:auto; min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center; padding:0 6px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }
+tabs-el, tabs-el { display:flex; gap:6px; border-bottom:1px solid var(--rp-border); margin-bottom:12px; width:fit-content; }
+tab-el, tab-el { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; }
+tab-el.tab-el-active, tab-el.tab-el-active { color:var(--rp-primary); border-bottom-color:var(--rp-primary); font-weight:700; }
+button-el, button-el { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--rp-border); background:#fff; color:#374151; font-size:13px; font-weight:650; }
+button-el[size="sm"], button-el[size="sm"] { min-height:28px; padding:0 9px; font-size:12px; border-radius:6px; }
+button-el[size="lg"], button-el[size="lg"] { min-height:40px; padding:0 16px; font-size:14px; }
+button-el[variant="primary"], button-el[variant="primary"] { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }
+button-el[variant="secondary"], button-el[variant="secondary"] { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }
+button-el[variant="danger"], button-el[variant="danger"] { border-color:var(--rp-danger); color:var(--rp-danger); }
+button-el[variant="link"], button-el[variant="link"] { border-color:transparent; background:transparent; color:var(--rp-primary); padding-inline:2px; }
+button-el[variant="ghost"], button-el[variant="ghost"] { border-color:transparent; background:transparent; }
+button-el[state="disabled"], button-el[state="disabled"], button-el[disabled], button-el[disabled] { opacity:.5; }
+button-group, button-group { display:inline-flex; gap:0; width:fit-content; }
+button-group > button-el, button-group > button-el { border-radius:0; margin-left:-1px; }
+button-group > :first-child { border-radius:8px 0 0 8px; margin-left:0; }
+button-group > :last-child { border-radius:0 8px 8px 0; }
+table-el, table-el { display:table; border-collapse:collapse; width:fit-content; min-width:720px; max-width:980px; background:#fff; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }
+viewport-el table-el, viewport-el table-el { width:100%; max-width:none; }
+.table-row { display:table-row; }
+.table-el-cell { display:table-cell; padding:11px 12px; border-bottom:1px solid var(--rp-border); font-size:13px; vertical-align:middle; white-space:nowrap; }
+.table-el-head .table-el-cell { background:#f9fafb; color:#6b7280; font-size:12px; font-weight:750; }
+.table-row:last-child .table-el-cell { border-bottom:0; }
+table-row, table-row { display:grid; grid-template-columns:44px 150px 240px 90px 90px; align-items:center; min-width:560px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#fff; }
+table-row > span, table-row > span { padding:10px 12px; font-size:13px; }
+table-row[state="unread"], table-row[state="unread"] { background:#eff6ff; font-weight:700; }
+table-row[state="selected"], table-row[state="selected"] { outline:2px solid rgba(37,99,235,.35); background:#f8fbff; }
+table-row[state="highlighted"], table-row[state="highlighted"] { background:#fffbeb; }
+table-row[state="disabled"], table-row[state="disabled"] { opacity:.5; }
+bulk-action-bar, bulk-action-bar { display:flex; align-items:center; gap:8px; width:fit-content; padding:8px 10px; margin:0 0 10px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:8px; color:#1e40af; font-size:13px; font-weight:650; }
+empty-el, empty-el { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:240px; padding:24px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; }
+.empty-el-title { color:#111827; font-weight:700; }
+.empty-el-desc { font-size:13px; }
+loading-el, loading-el { display:grid; gap:8px; min-width:260px; color:var(--rp-primary); }
+.skeleton-el-line { height:14px; border-radius:999px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }
+.rp-spinner { display:inline-grid; place-items:center; width:32px; height:32px; }
+alert-el, alert-el, toast-el, toast-el { display:flex; align-items:flex-start; gap:8px; width:fit-content; max-width:420px; padding:10px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }
+alert-el[type="info"], alert-el[type="info"], toast-el[type="info"], toast-el[type="info"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }
+alert-el[type="success"], alert-el[type="success"], toast-el[type="success"], toast-el[type="success"] { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
+alert-el[type="warning"], alert-el[type="warning"], toast-el[type="warning"], toast-el[type="warning"] { border-color:#fde68a; background:#fffbeb; color:#92400e; }
+alert-el[type="error"], alert-el[type="error"], toast-el[type="error"], toast-el[type="error"] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
+dropdown-el, dropdown-el, popover-el, popover-el { display:block; width:var(--snap-width,300px); padding:8px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.1); }
+tooltip-el, tooltip-el { display:inline-block; width:fit-content; max-width:240px; padding:6px 8px; border-radius:6px; background:#111827; color:#fff; font-size:12px; }
+.rp-overlay-title { margin:0 0 8px; color:#111827; font-size:14px; font-weight:750; }
+modal-el, modal-el { display:block; width:min(var(--snap-width,480px), 100%); border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); overflow:hidden; }
+drawer-el, drawer-el { display:block; width:min(var(--snap-width,360px), 100%); min-height:320px; border:1px solid var(--rp-border); background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.14); }
+.modal-el-head, .drawer-el-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--rp-border); font-weight:750; }
+.modal-el-body, .drawer-el-body { padding:16px; }
+.modal-el-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--rp-border); background:#f9fafb; }
+card-el, card-el { display:block; width:auto; min-width:220px; padding:14px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }
+.card-el-image { display:grid; place-items:center; height:120px; margin:-14px -14px 12px; border-radius:10px 10px 0 0; background:#f3f4f6; color:#6b7280; }
+.card-el-title { display:block; color:#111827; font-weight:750; }
+.card-el-subtitle { display:block; margin-top:4px; color:#6b7280; font-size:13px; }
+.card-el-footer { display:block; margin:12px -14px -14px; padding:10px 14px; border-top:1px solid var(--rp-border); background:#f9fafb; }
+stat-card, stat-card { display:grid; gap:6px; width:auto; min-width:0; padding:16px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }
+.rp-stat-label { color:#6b7280; font-size:12px; font-weight:650; }
+.rp-stat-value { color:#111827; font-size:26px; font-weight:800; }
+.rp-stat-change { font-size:12px; font-weight:700; }
+stat-card[trend="up"] .rp-stat-change, stat-card[trend="up"] .rp-stat-change { color:var(--rp-success); }
+stat-card[trend="down"] .rp-stat-change, stat-card[trend="down"] .rp-stat-change { color:var(--rp-danger); }
+tag-el, tag-el { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:650; }
+tag-el[color="green"], tag-el[color="green"] { background:#dcfce7; color:#166534; }
+tag-el[color="orange"], tag-el[color="orange"] { background:#ffedd5; color:#9a3412; }
+tag-el[color="red"], tag-el[color="red"] { background:#fee2e2; color:#991b1b; }
+checkbox-el, checkbox-el, radio-el, radio-el { display:inline-flex; align-items:center; gap:8px; font-size:13px; }
+.rp-box { display:inline-grid; place-items:center; width:16px; height:16px; border:1px solid var(--rp-border-strong); border-radius:4px; color:#fff; }
+checkbox-el[state="checked"] .rp-box, checkbox-el[state="checked"] .rp-box, radio-el[state="checked"] .rp-box, radio-el[state="checked"] .rp-box, checkbox-el[state="indeterminate"] .rp-box, checkbox-el[state="indeterminate"] .rp-box { background:var(--rp-primary); border-color:var(--rp-primary); }
+checkbox-el[state="disabled"], checkbox-el[state="disabled"], radio-el[state="disabled"], radio-el[state="disabled"] { opacity:.5; }
+radio-el .rp-box, radio-el .rp-box { border-radius:999px; }
+toggle-el, toggle-el { display:inline-flex; align-items:center; gap:8px; font-size:13px; }
+.toggle-el-track { display:flex; align-items:center; width:34px; height:20px; border-radius:999px; background:#d1d5db; padding:2px; }
+.toggle-el-dot { display:block; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:none; }
+toggle-el[state="on"] .toggle-el-track, toggle-el[state="on"] .toggle-el-track { background:var(--rp-primary); }
+toggle-el[state="on"] .toggle-el-dot, toggle-el[state="on"] .toggle-el-dot { margin-left:14px; }
+toggle-el[state="disabled"], toggle-el[state="disabled"] { opacity:.5; }
+form-el, form-el { display:grid; gap:12px; width:fit-content; max-width:100%; }
+form-el[layout="horizontal"], form-el[layout="horizontal"] { grid-template-columns:max-content 1fr; align-items:start; }
+form-item, form-item { display:grid; gap:6px; width:fit-content; max-width:100%; }
+form-item > *, form-item > * { max-width:100%; }
+.form-el-label { color:#374151; font-size:12px; font-weight:700; }
+.form-el-label.required::after { content:" *"; color:var(--rp-danger); }
+.form-el-error { color:var(--rp-danger); font-size:12px; }
+upload-el, upload-el { display:grid; justify-items:center; gap:8px; width:280px; padding:18px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; font-size:13px; }
+upload-el[state="has-file"], upload-el[state="has-file"] { justify-items:start; border-style:solid; color:#374151; }
+upload-el[state="uploading"], upload-el[state="uploading"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }
+image-placeholder, image-placeholder { display:grid; place-items:center; width:var(--snap-width,160px); height:var(--snap-height,100px); background:#f3f4f6; border:1px dashed var(--rp-border-strong); border-radius:8px; color:#6b7280; font-size:12px; }
+progress-el, progress-el { display:block; width:180px; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
+progress-el[kind="circle"], progress-el[kind="circle"], progress-el[style="circle"], progress-el[style="circle"] { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:conic-gradient(var(--rp-primary) var(--progress,40%), #e5e7eb 0); font-size:12px; font-weight:750; }
+.progress-el-bar { display:block; height:100%; width:var(--progress,40%); background:var(--rp-primary); }
+progress-el[status="success"] .progress-el-bar, progress-el[status="success"] .progress-el-bar { background:var(--rp-success); }
+progress-el[status="error"] .progress-el-bar, progress-el[status="error"] .progress-el-bar { background:var(--rp-danger); }
+pagination-el, pagination-el { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:13px; }
+.page-el-btn { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border:1px solid var(--rp-border); border-radius:6px; background:#fff; color:#374151; }
+.page-el-btn.active { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; font-weight:750; }
+steps-el, steps-el { display:flex; align-items:center; gap:8px; width:fit-content; }
+.rp-step { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }
+.rp-step-dot { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px; border:1px solid var(--rp-border-strong); background:#fff; color:#6b7280; font-size:11px; font-weight:750; }
+.rp-step.active { color:var(--rp-primary); font-weight:750; }
+.rp-step.active .rp-step-dot { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }
+.rp-step.done .rp-step-dot { border-color:var(--rp-success); background:var(--rp-success); color:#fff; }
+.rp-step-sep { width:28px; height:1px; background:var(--rp-border); }
+breadcrumb-el, breadcrumb-el { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }
+.breadcrumb-el-current { color:#111827; font-weight:650; }
+
+/* --- data input --- */
+slider-el, slider-el { display:inline-flex; align-items:center; gap:10px; width:220px; }
+.slider-el-track { position:relative; flex:1; height:4px; border-radius:999px; background:#e5e7eb; }
+.slider-el-fill { position:absolute; height:100%; border-radius:999px; background:var(--rp-primary); }
+.slider-el-thumb { position:absolute; top:50%; width:16px; height:16px; margin-left:-8px; transform:translateY(-50%); border-radius:50%; background:#fff; border:1px solid var(--rp-border-strong); }
+.slider-el-value { font-size:12px; color:#374151; min-width:24px; }
+range-el, range-el { display:inline-flex; align-items:center; width:220px; }
+number-input, number-input { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 4px 0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; width:120px; }
+.rp-num-value { flex:1; font-size:13px; }
+.rp-num-steppers { display:flex; flex-direction:column; }
+.rp-num-step { display:grid; place-items:center; width:20px; height:15px; color:#6b7280; cursor:pointer; }
+rating-el, rating-el { display:inline-flex; gap:2px; color:#d1d5db; }
+.rp-star.filled { color:#f59e0b; }
+pin-input, pin-input { display:inline-flex; gap:8px; }
+.rp-pin-cell { display:grid; place-items:center; width:40px; height:46px; border:1px solid var(--rp-border-strong); border-radius:8px; font-size:18px; font-weight:700; background:#fff; }
+.rp-pin-cell.active { border-color:var(--rp-primary); }
+color-swatch, color-swatch { display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }
+.rp-swatch-chip { width:24px; height:24px; border-radius:6px; border:1px solid rgba(0,0,0,.1); }
+.rp-swatch-hex { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }
+autocomplete-el, autocomplete-el { display:inline-block; width:280px; }
+.rp-ac-options { display:grid; gap:1px; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }
+.rp-ac-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }
+.rp-ac-option:first-child { background:#eff6ff; color:#1d4ed8; }
+
+/* --- data display additions --- */
+chip-el, chip-el { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--rp-border); background:#f9fafb; color:#374151; font-size:12px; }
+tree-el, tree-el { display:flex; flex-direction:column; gap:1px; width:fit-content; min-width:240px; }
+.tree-el-row { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; color:#374151; font-size:13px; padding-left:calc(8px + var(--tree-level,0) * 18px); }
+.tree-el-row.selected { background:#eff6ff; color:#1d4ed8; font-weight:650; }
+.tree-el-spacer { display:inline-block; width:12px; }
+.tree-el-label { flex:1; }
+timeline-el, timeline-el { display:flex; flex-direction:column; width:fit-content; min-width:260px; }
+timeline-item, timeline-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }
+timeline-item:not(:last-child)::before, timeline-item:not(:last-child)::before { content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--rp-border); }
+.timeline-el-dot { flex:0 0 auto; width:14px; height:14px; margin-top:2px; border-radius:50%; background:#fff; border:2px solid var(--rp-border-strong); z-index:1; }
+.timeline-el-dot.active { border-color:var(--rp-primary); background:var(--rp-primary); }
+.timeline-el-dot.done { border-color:var(--rp-success); background:var(--rp-success); }
+.timeline-el-dot.error { border-color:var(--rp-danger); background:var(--rp-danger); }
+.timeline-el-main { flex:1; }
+.timeline-el-head { display:flex; align-items:baseline; gap:8px; }
+.timeline-el-label { font-weight:650; color:#111827; font-size:13px; }
+.timeline-el-time { font-size:12px; color:#9ca3af; }
+.timeline-el-content { font-size:13px; color:#6b7280; margin-top:2px; }
+calendar-el, calendar-el { display:inline-block; width:280px; padding:12px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }
+.rp-cal-head { text-align:center; font-weight:700; font-size:14px; margin-bottom:10px; }
+.rp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
+.rp-cal-dow { display:grid; place-items:center; height:24px; font-size:11px; color:#9ca3af; }
+.rp-cal-cell { display:grid; place-items:center; height:32px; border-radius:6px; font-size:13px; color:#374151; }
+.rp-cal-cell.selected { background:var(--rp-primary); color:#fff; font-weight:700; }
+.rp-cal-cell.muted { color:transparent; }
+kanban-el, kanban-el { display:flex; gap:12px; width:fit-content; align-items:flex-start; }
+kanban-column, kanban-column { display:flex; flex-direction:column; width:200px; padding:10px; border-radius:10px; background:#f3f4f6; }
+.kanban-el-head { display:flex; align-items:center; justify-content:space-between; font-weight:650; font-size:13px; margin-bottom:8px; color:#374151; }
+.kanban-el-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e5e7eb; font-size:11px; }
+.kanban-el-body { display:flex; flex-direction:column; gap:8px; }
+kanban-card, kanban-card { display:block; padding:10px; border-radius:8px; background:#fff; border:1px solid var(--rp-border); }
+.kanban-card-title { display:block; font-size:13px; color:#111827; }
+.kanban-card-tag { display:inline-block; margin-top:6px; padding:1px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; }
+code-block, code-block { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#0f172a; }
+.rp-code-head { padding:6px 12px; font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#94a3b8; background:#1e293b; }
+.rp-code-body { padding:10px 0; }
+.rp-code-line { display:flex; align-items:center; gap:12px; padding:1px 12px; }
+.rp-code-ln { width:20px; text-align:right; color:#475569; font-family:ui-monospace,Menlo,monospace; font-size:11px; }
+.rp-code-bar { height:8px; border-radius:3px; background:#334155; }
+diff-el, diff-el { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; font-family:ui-monospace,Menlo,monospace; }
+.diff-el-line { display:flex; align-items:center; gap:10px; padding:2px 10px; }
+.diff-el-line.add { background:#dcfce7; }
+.diff-el-line.del { background:#fee2e2; }
+.diff-el-sign { width:10px; color:#6b7280; }
+.diff-el-line.add .rp-code-bar { background:#86efac; }
+.diff-el-line.del .rp-code-bar { background:#fca5a5; }
+.diff-el-line.ctx .rp-code-bar { background:#e5e7eb; }
+image-grid, image-grid { display:grid; grid-template-columns:repeat(var(--grid-cols,3),1fr); gap:8px; width:fit-content; }
+.rp-grid-cell { display:grid; place-items:center; width:80px; height:80px; border-radius:8px; background:#f3f4f6; color:#9ca3af; }
+key-value, key-value { display:flex; flex-direction:column; width:fit-content; min-width:240px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }
+kv-row, kv-row { display:flex; border-bottom:1px solid var(--rp-border); }
+kv-row:last-child, kv-row:last-child { border-bottom:0; }
+.rp-kv-key { width:120px; padding:8px 12px; background:#f9fafb; color:#6b7280; font-size:13px; }
+.rp-kv-val { flex:1; padding:8px 12px; color:#111827; font-size:13px; }
+accordion-el, accordion-el { display:flex; flex-direction:column; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }
+accordion-item, accordion-item { display:block; border-bottom:1px solid var(--rp-border); }
+accordion-item:last-child, accordion-item:last-child { border-bottom:0; }
+.accordion-el-head { display:flex; align-items:center; gap:8px; padding:11px 14px; font-weight:650; font-size:13px; color:#111827; }
+.accordion-el-body { padding:0 14px 14px 36px; font-size:13px; color:#6b7280; }
+banner-el, banner-el { display:flex; align-items:center; gap:10px; width:fit-content; min-width:480px; padding:12px 16px; border-radius:8px; font-size:13px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
+banner-el[type="success"], banner-el[type="success"] { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
+banner-el[type="warning"], banner-el[type="warning"] { background:#fffbeb; color:#92400e; border-color:#fde68a; }
+banner-el[type="error"], banner-el[type="error"] { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
+.banner-el-text { flex:1; }
+skeleton-el, skeleton-el { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:240px; }
+.rp-skel { border-radius:8px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }
+.rp-skel-block { height:120px; }
+.rp-skel-avatar { width:40px; height:40px; border-radius:50%; }
+.rp-skel-avatar.sm { width:28px; height:28px; }
+.rp-skel-row { display:flex; align-items:center; gap:10px; }
+countdown-el, countdown-el { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#fef2f2; color:#991b1b; font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }
+result-el, result-el { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:280px; padding:32px; text-align:center; }
+.result-el-icon.success { color:var(--rp-success); }
+.result-el-icon.error { color:var(--rp-danger); }
+.result-el-icon.empty { color:#9ca3af; }
+.result-el-title { font-size:16px; font-weight:700; color:#111827; }
+.result-el-desc { font-size:13px; color:#6b7280; }
+permission-gate, permission-gate { display:block; position:relative; width:fit-content; }
+.rp-gate-content { opacity:.4; filter:grayscale(1); pointer-events:none; }
+.rp-gate-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px; background:rgba(255,255,255,.6); color:#6b7280; font-size:12px; font-weight:650; border-radius:8px; }
+quota-bar, quota-bar { display:block; width:fit-content; min-width:240px; }
+.rp-quota-head { display:flex; justify-content:space-between; font-size:12px; color:#374151; margin-bottom:5px; }
+.rp-quota-num.danger { color:var(--rp-danger); font-weight:700; }
+.rp-quota-track { display:block; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
+.rp-quota-fill { display:block; height:100%; background:var(--rp-primary); }
+.rp-quota-fill.danger { background:var(--rp-danger); }
+api-key, api-key { display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#f9fafb; }
+.rp-apikey-val { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }
+.rp-apikey-copy { display:grid; place-items:center; width:26px; height:26px; border-radius:6px; color:#6b7280; }
+audit-row, audit-row { display:flex; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--rp-border); width:fit-content; min-width:320px; font-size:13px; }
+.rp-audit-actor { font-weight:650; color:#111827; }
+.rp-audit-action { flex:1; color:#6b7280; }
+.rp-audit-time { color:#9ca3af; font-size:12px; }
+workflow-node, workflow-node { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }
+.rp-wf-icon.done { color:var(--rp-success); }
+.rp-wf-icon.active { color:var(--rp-primary); }
+.rp-wf-icon.error { color:var(--rp-danger); }
+.rp-wf-icon.default { color:#9ca3af; }
+
+/* --- navigation & layout additions --- */
+segmented-el, segmented-el { display:inline-flex; padding:2px; border-radius:8px; background:#f3f4f6; gap:2px; }
+.rp-seg-item { padding:5px 14px; border-radius:6px; font-size:13px; color:#6b7280; }
+.rp-seg-item.active { background:#fff; color:#111827; font-weight:650;  }
+command-palette, command-palette { display:block; width:520px; border:1px solid var(--rp-border); border-radius:12px; background:#fff; overflow:hidden; }
+.rp-cmdk-input { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--rp-border); }
+.rp-cmdk-list { padding:6px; }
+.rp-cmdk-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:#374151; }
+.rp-cmdk-item.active { background:#eff6ff; color:#1d4ed8; }
+context-menu, context-menu, menu-el, menu-el { display:inline-flex; flex-direction:column; min-width:180px; padding:5px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }
+.menu-item, menu-item, menu-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; font-size:13px; color:#374151; }
+.menu-item.danger, menu-item.danger, menu-item.danger { color:var(--rp-danger); }
+.menu-item.disabled, menu-item.disabled, menu-item.disabled { opacity:.45; }
+.menu-el-label { flex:1; }
+.menu-el-shortcut { color:#9ca3af; font-size:12px; }
+toc-el, toc-el { display:flex; flex-direction:column; gap:2px; width:fit-content; min-width:160px; border-left:2px solid var(--rp-border); }
+.toc-el-item { padding:4px 12px; font-size:13px; color:#6b7280; border-left:2px solid transparent; margin-left:-2px; }
+.toc-el-item.active { color:var(--rp-primary); border-left-color:var(--rp-primary); font-weight:650; }
+kbd-el, kbd-el { display:inline-flex; align-items:center; gap:3px; }
+.kbd-el-key { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:1px solid var(--rp-border-strong); border-bottom-width:2px; border-radius:5px; background:#f9fafb; font-size:11px; font-family:var(--rp-font); color:#374151; }
+.kbd-el-plus { color:#9ca3af; font-size:11px; }
+split-pane, split-pane { display:grid; grid-template-columns:var(--snap-columns,1fr 1fr); width:fit-content; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }
+split-pane > *, split-pane > * { padding:14px; }
+split-pane > *:not(:last-child), split-pane > *:not(:last-child) { border-right:1px solid var(--rp-border); }
+divider-el, divider-el { display:block; height:1px; background:var(--rp-border); margin:12px 0; }
+divider-el.divider-el-v, divider-el.divider-el-v { display:inline-block; width:1px; height:auto; align-self:stretch; margin:0 12px; }
+spacer-el, spacer-el { display:block; height:var(--snap-size,16px); }
+
+/* --- iOS --- */
+ios-navbar, ios-navbar { display:block; background:rgba(249,249,249,.94); border-bottom:1px solid #d8d8dc; padding:6px 12px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
+.ios-navbar-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:36px; }
+.rp-ios-nav-leading { display:flex; align-items:center; gap:2px; color:#007aff; font-size:15px; }
+.rp-ios-nav-title { text-align:center; font-weight:600; font-size:16px; color:#000; }
+.rp-ios-nav-trailing { text-align:right; color:#007aff; font-size:15px; }
+.rp-ios-nav-large { font-size:30px; font-weight:700; color:#000; padding:2px 2px 6px; }
+ios-tabbar, ios-tabbar { display:flex; background:rgba(249,249,249,.94); border-top:1px solid #d8d8dc; padding:6px 0 4px; }
+.rp-ios-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; color:#8e8e93; font-size:10px; }
+.rp-ios-tab.active { color:#007aff; }
+.rp-ios-tab-label { font-size:10px; }
+ios-list, ios-list { display:block; border-radius:10px; background:#fff; overflow:hidden; width:fit-content; min-width:300px; border:1px solid #e5e5ea; font-family:-apple-system,sans-serif; }
+.ios-list-header { padding:6px 16px; font-size:13px; color:#6d6d72; background:#f2f2f7; text-transform:none; }
+ios-list-item, ios-list-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid #e5e5ea; font-size:15px; color:#000; }
+ios-list-item:last-child, ios-list-item:last-child { border-bottom:0; }
+.rp-ios-li-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; background:#007aff; color:#fff; }
+.rp-ios-li-label { flex:1; }
+.rp-ios-li-detail { color:#8e8e93; }
+.rp-ios-li-chevron { color:#c7c7cc; }
+ios-action-sheet, ios-action-sheet { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:320px; padding:8px; font-family:-apple-system,sans-serif; }
+.rp-ios-as-group { border-radius:14px; overflow:hidden; background:rgba(255,255,255,.82); backdrop-filter:blur(20px); }
+.rp-ios-as-title { padding:14px; text-align:center; font-size:13px; color:#8e8e93; border-bottom:1px solid #d1d1d6; }
+.rp-ios-as-action { padding:16px; text-align:center; font-size:18px; color:#007aff; border-bottom:1px solid #d1d1d6; }
+.rp-ios-as-action:last-child { border-bottom:0; }
+.rp-ios-as-action.destructive { color:#ff3b30; }
+.rp-ios-as-action.cancel { font-weight:600; }
+ios-alert, ios-alert { display:block; width:270px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); font-family:-apple-system,sans-serif; }
+.ios-alert-body { padding:18px 16px 14px; text-align:center; }
+.ios-alert-title { font-size:17px; font-weight:600; color:#000; }
+.ios-alert-msg { margin-top:3px; font-size:13px; color:#000; }
+.ios-alert-actions { display:flex; border-top:1px solid #d1d1d6; }
+.ios-alert-btn { flex:1; padding:11px; text-align:center; font-size:17px; color:#007aff; }
+.ios-alert-btn.primary { font-weight:600; }
+.ios-alert-btn:not(:last-child) { border-right:1px solid #d1d1d6; }
+ios-switch, ios-switch { display:inline-flex; align-items:center; gap:8px; font-family:-apple-system,sans-serif; font-size:15px; }
+.ios-switch-track { width:51px; height:31px; border-radius:999px; background:#34c759; padding:2px; }
+.ios-switch-dot { display:block; width:27px; height:27px; border-radius:50%; background:#fff; margin-left:20px;  }
+ios-segmented, ios-segmented { display:inline-flex; padding:2px; border-radius:9px; background:#767680; background:rgba(118,118,128,.12); gap:2px; font-family:-apple-system,sans-serif; }
+.rp-ios-seg-item { padding:6px 16px; border-radius:7px; font-size:13px; color:#000; }
+.rp-ios-seg-item.active { background:#fff; font-weight:600; }
+ios-button, ios-button { display:inline-grid; place-items:center; min-height:34px; padding:0 16px; border-radius:8px; background:#007aff; color:#fff; font-size:15px; font-weight:600; font-family:-apple-system,sans-serif; }
+ios-button[variant="tinted"], ios-button[variant="tinted"] { background:rgba(0,122,255,.15); color:#007aff; }
+ios-button[variant="plain"], ios-button[variant="plain"] { background:transparent; color:#007aff; }
+ios-search, ios-search { display:inline-flex; align-items:center; gap:6px; width:280px; height:36px; padding:0 10px; border-radius:10px; background:rgba(118,118,128,.12); color:#8e8e93; font-size:15px; font-family:-apple-system,sans-serif; }
+ios-stepper, ios-stepper { display:inline-flex; align-items:center; border-radius:8px; background:rgba(118,118,128,.12); }
+.rp-ios-step { display:grid; place-items:center; width:46px; height:32px; color:#000; }
+.rp-ios-step-div { width:1px; height:18px; background:rgba(0,0,0,.15); }
+
+/* --- macOS --- */
+macos-window, macos-window { display:block; width:fit-content; min-width:480px; border-radius:10px; overflow:hidden; border:1px solid #d1d1d6; background:#fff; font-family:-apple-system,sans-serif; }
+.rp-mac-titlebar { display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; background:#ececec; border-bottom:1px solid #d1d1d6; }
+.rp-mac-lights { display:flex; gap:8px; }
+.rp-mac-light { width:12px; height:12px; border-radius:50%; }
+.rp-mac-light.close { background:#ff5f57; }
+.rp-mac-light.min { background:#febc2e; }
+.rp-mac-light.max { background:#28c840; }
+.rp-mac-title { flex:1; text-align:center; font-size:13px; font-weight:600; color:#3c3c43; }
+.rp-mac-window-body { padding:0; }
+macos-toolbar, macos-toolbar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#f6f6f6; border-bottom:1px solid #d1d1d6; }
+macos-menubar, macos-menubar { display:flex; align-items:center; gap:18px; height:26px; padding:0 14px; background:rgba(246,246,246,.9); border-bottom:1px solid #d1d1d6; font-size:13px; font-family:-apple-system,sans-serif; }
+.rp-mac-menubar-apple { color:#000; }
+.rp-mac-menu-title { color:#000; }
+.rp-mac-menu-title.active { background:#007aff; color:#fff; padding:1px 7px; border-radius:4px; }
+macos-sidebar, macos-sidebar { display:flex; flex-direction:column; gap:1px; width:220px; padding:8px; background:rgba(246,246,246,.85); font-family:-apple-system,sans-serif; }
+macos-source-item, macos-source-item { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px; font-size:13px; color:#3c3c43; }
+macos-source-item.selected, macos-source-item.selected { background:#007aff; color:#fff; }
+.rp-mac-source-group { padding:8px 8px 3px; font-size:11px; font-weight:700; color:#8e8e93; text-transform:uppercase; }
+macos-segmented, macos-segmented { display:inline-flex; border:1px solid #c4c4c7; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }
+.rp-mac-seg-item { padding:4px 14px; font-size:13px; color:#000; background:#fff; border-right:1px solid #c4c4c7; }
+.rp-mac-seg-item:last-child { border-right:0; }
+.rp-mac-seg-item.active { background:#007aff; color:#fff; }
+macos-popover, macos-popover { display:inline-block; position:relative; }
+.rp-mac-pop-arrow { display:block; width:16px; height:8px; margin:0 auto -1px; clip-path:polygon(50% 0,100% 100%,0 100%); background:#fff; border:1px solid #d1d1d6; }
+.rp-mac-pop-body { min-width:220px; padding:12px; border-radius:10px; border:1px solid #d1d1d6; background:#fff;  }
+.rp-mac-pop-title { font-weight:600; font-size:13px; margin-bottom:8px; }
+macos-sheet, macos-sheet { display:block; width:fit-content; min-width:420px; border-radius:10px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.3); padding:18px; font-family:-apple-system,sans-serif; }
+.rp-mac-sheet-title { font-size:15px; font-weight:700; margin-bottom:12px; }
+.rp-mac-sheet-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
+macos-stepper, macos-stepper { display:inline-flex; flex-direction:column; border:1px solid #c4c4c7; border-radius:5px; overflow:hidden; }
+.rp-mac-step { display:grid; place-items:center; width:22px; height:13px; background:#fff; color:#3c3c43; }
+.rp-mac-step.up { border-bottom:1px solid #c4c4c7; }
+macos-disclosure, macos-disclosure { display:block; font-family:-apple-system,sans-serif; }
+.rp-mac-disc-head { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:#000; }
+.rp-mac-disc-tri { display:inline-flex; transition:none; }
+.rp-mac-disc-tri.open { transform:rotate(90deg); }
+.rp-mac-disc-body { padding:8px 0 0 18px; font-size:13px; color:#3c3c43; }
+macos-table, macos-table { display:flex; flex-direction:column; width:fit-content; min-width:360px; border:1px solid #d1d1d6; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }
+.rp-mac-tr { display:flex; }
+.rp-mac-tr.rp-mac-th { background:#f6f6f6; border-bottom:1px solid #d1d1d6; font-size:12px; font-weight:600; color:#3c3c43; }
+.rp-mac-tr.alt { background:#f5f8ff; }
+.rp-mac-td { flex:1; display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:13px; color:#3c3c43; }
+.rp-mac-cell-bar { height:8px; border-radius:3px; background:#e5e7eb; }
+
+/* --- agent / conversational UI (Codex-style: single column, de-bubbled) --- */
+chat-el, chat-el { display:flex; flex-direction:column; gap:24px; width:fit-content; min-width:520px; max-width:680px; }
+user-message, user-message, assistant-message, assistant-message { display:block; }
+.rp-msg-role { font-size:12px; font-weight:700; color:#9ca3af; letter-spacing:.02em; margin:0 0 6px; }
+.rp-msg-content { display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.7; color:#1f2937; }
+user-message .rp-msg-content, user-message .rp-msg-content { color:#111827; }
+system-message, system-message { display:flex; justify-content:center; }
+.rp-sysmsg-line { padding:3px 12px; border-radius:999px; background:#f3f4f6; color:#6b7280; font-size:12px; }
+tool-call, tool-call { display:block; width:fit-content; min-width:280px; max-width:600px; }
+.rp-tool-head { display:flex; align-items:center; gap:8px; font-size:13px; color:#6b7280; }
+.rp-tool-glyph { display:inline-flex; }
+.rp-tool-glyph.done { color:var(--rp-success); }
+.rp-tool-glyph.running { color:var(--rp-primary); }
+.rp-tool-glyph.error { color:var(--rp-danger); }
+.rp-tool-name { font-family:ui-monospace,Menlo,monospace; font-weight:650; color:#374151; }
+.rp-tool-args-inline { font-family:ui-monospace,Menlo,monospace; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.rp-tool-body { margin-top:8px; padding-left:21px; }
+agent-output, agent-output { display:block; width:fit-content; min-width:280px; max-width:600px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#f8fafc; }
+.rp-output-head { padding:6px 12px; font-size:12px; color:#6b7280; border-bottom:1px solid var(--rp-border); font-family:ui-monospace,Menlo,monospace; }
+.rp-output-body { padding:12px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.6; color:#334155; white-space:pre-wrap; }
+reasoning-el, reasoning-el { display:block; width:fit-content; min-width:280px; max-width:600px; }
+.rp-reason-head { display:flex; align-items:center; gap:6px; font-size:13px; color:#9ca3af; }
+.rp-reason-body { margin-top:8px; padding-left:19px; border-left:2px solid var(--rp-border); font-size:13px; line-height:1.7; color:#6b7280; }
+message-actions, message-actions { display:inline-flex; gap:2px; }
+.rp-msg-action { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:#9ca3af; cursor:pointer; }
+.rp-msg-action:hover { background:#f3f4f6; color:#374151; }
+suggestions-el, suggestions-el { display:flex; flex-wrap:wrap; gap:8px; }
+.rp-suggestion { padding:7px 13px; border:1px solid var(--rp-border); border-radius:8px; font-size:13px; color:#374151; background:#fff; cursor:pointer; }
+.rp-suggestion:hover { border-color:var(--rp-border-strong); background:#f9fafb; }
+typing-el, typing-el { display:flex; align-items:center; }
+.typing-el-dots { display:inline-flex; gap:4px; }
+.typing-el-dots > span { width:7px; height:7px; border-radius:50%; background:#c7c7cc; }
+composer-el, composer-el { display:flex; align-items:center; gap:10px; width:fit-content; min-width:520px; max-width:680px; padding:9px 9px 9px 14px; border:1px solid var(--rp-border-strong); border-radius:14px; background:#fff; }
+.composer-el-attach { display:inline-flex; color:#9ca3af; }
+.composer-el-input { flex:1; font-size:14px; }
+.composer-el-send { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#111827; color:#fff; }
+.composer-el-send.streaming { background:var(--rp-danger); }
+citation-el, citation-el { display:inline-flex; align-items:center; gap:6px; max-width:280px; padding:3px 9px 3px 3px; border:1px solid var(--rp-border); border-radius:6px; background:#f9fafb; font-size:12px; color:#374151; }
+.rp-cite-idx { display:grid; place-items:center; width:17px; height:17px; border-radius:4px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }
+.rp-cite-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+token-usage, token-usage { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#9ca3af; }
+.rp-token-track { width:90px; height:5px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
+.rp-token-fill { display:block; height:100%; background:#9ca3af; }
+`;
+function injectStyle() {
+  if (document.getElementById(RPUI_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = RPUI_STYLE_ID;
+  el.textContent = style;
+  document.head.appendChild(el);
+}
+class RpAnnotation extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "ro");
+    __publicField(this, "frame", 0);
+  }
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) {
+      this.setupSlicePins();
+      return;
+    }
+    this.dataset.rpReady = "true";
+    const existing = Array.from(this.childNodes);
+    const depth = this.annotationDepth();
+    const id = attr(this, "id");
+    const label = attr(this, "label", id ? `Annotation ${id}` : "Annotation");
+    let sectionPath;
+    if (id) {
+      sectionPath = id;
+    } else {
+      const parentSection = ((_a = this.closest("[data-rp-section]")) == null ? void 0 : _a.dataset.rpSection) ?? "";
+      const siblings = this.parentElement ? Array.from(this.parentElement.children).filter(
+        (el) => el.tagName.toLowerCase() === "annotation-el" || el.tagName.toLowerCase() === "annotation-el"
+      ) : [];
+      const idx = siblings.indexOf(this) + 1;
+      sectionPath = parentSection ? `${parentSection}-${idx}` : String(idx);
+    }
+    this.dataset.rpSection = sectionPath;
+    const marker = document.createElement("span");
+    const kind = id ? "drop" : depth <= 1 ? "circle" : "triangle";
+    marker.className = `annotation-el-marker ${kind}`;
+    const localIndex = id || sectionPath.split("-").pop() || "";
+    marker.innerHTML = `<span>${escapeHtml(localIndex)}</span>`;
+    const head = document.createElement("div");
+    head.className = "annotation-el-head";
+    head.append(marker);
+    const title = document.createElement("span");
+    title.className = "annotation-el-title";
+    title.textContent = label;
+    title.addEventListener("click", () => {
+      const url = new URL(location.href);
+      url.searchParams.set("section", sectionPath);
+      history.pushState(null, "", url);
+      window.dispatchEvent(new CustomEvent("rp-section", { detail: sectionPath }));
+    });
+    head.append(title);
+    const body = document.createElement("div");
+    body.className = "annotation-el-body";
+    existing.forEach((n) => body.appendChild(n));
+    this.append(head, body);
+    this.setupSlicePins();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.ro) == null ? void 0 : _a.disconnect();
+    if (this.frame) cancelAnimationFrame(this.frame);
+  }
+  // A UI slice inside this annotation may carry data-pin markers on sub-regions.
+  // Render pins on those slices so their numbers connect to the deeper annotations
+  // that explain them — mirroring how main-view pins top-level regions.
+  setupSlicePins() {
+    var _a;
+    const body = this.querySelector(":scope > .annotation-el-body");
+    if (!body || !body.querySelector("[data-pin]")) return;
+    (_a = this.ro) == null ? void 0 : _a.disconnect();
+    this.scheduleSlicePins(body);
+    this.ro = new ResizeObserver(() => this.scheduleSlicePins(body));
+    this.ro.observe(this);
+  }
+  scheduleSlicePins(body) {
+    if (this.frame) return;
+    this.frame = requestAnimationFrame(() => {
+      this.frame = 0;
+      this.renderSlicePins(body);
+    });
+  }
+  renderSlicePins(body) {
+    body.querySelectorAll(":scope > .rp-pin").forEach((p) => p.remove());
+    const bodyRect = body.getBoundingClientRect();
+    body.querySelectorAll("[data-pin]").forEach((target) => {
+      if (target.closest("annotation-el, annotation-el") !== this) return;
+      const pinId = target.dataset.pin;
+      if (!pinId) return;
+      const r = target.getBoundingClientRect();
+      const pin = document.createElement("span");
+      pin.className = "rp-pin rp-pin-slice";
+      pin.style.left = `${r.left - bodyRect.left}px`;
+      pin.style.top = `${r.top - bodyRect.top}px`;
+      pin.innerHTML = `<span>${escapeHtml(pinId)}</span>`;
+      body.appendChild(pin);
+    });
+  }
+  annotationDepth() {
+    let d = 0;
+    let p = this.parentElement;
+    while (p) {
+      if (p.tagName.toLowerCase() === "annotation-el" || p.tagName.toLowerCase() === "annotation-el") d++;
+      p = p.parentElement;
+    }
+    return d;
+  }
+}
+class RpEnum extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class RpEnumItem extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const parent = this.parentElement;
+    const siblings = parent ? Array.from(parent.children).filter(
+      (el) => el.tagName.toLowerCase() === "enum-item" || el.tagName.toLowerCase() === "enum-item"
+    ) : [];
+    const idx = siblings.indexOf(this) + 1;
+    const labelEl = document.createElement("span");
+    labelEl.className = "enum-el-label";
+    const idxBadge = document.createElement("span");
+    idxBadge.className = "enum-el-index";
+    idxBadge.textContent = String(idx);
+    const labelText = document.createElement("span");
+    labelText.className = "enum-el-label-text";
+    labelText.textContent = attr(this, "label", "State");
+    const description = attr(this, "description");
+    if (description) {
+      const desc = document.createElement("span");
+      desc.className = "enum-el-description";
+      desc.textContent = description;
+      labelText.appendChild(desc);
+    }
+    labelEl.append(idxBadge, labelText);
+    const content = document.createElement("div");
+    content.className = "enum-el-content";
+    children.forEach((n) => content.appendChild(n));
+    this.append(labelEl, content);
+  }
+}
+class RpMainView extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "ro");
+    __publicField(this, "frame", 0);
+  }
+  connectedCallback() {
+    injectStyle();
+    if (!this.dataset.rpReady) {
+      this.dataset.rpReady = "true";
+      const width = resolveWidth(this, 1440);
+      const height = resolveHeight(this, 900);
+      const autoHeight = usesAutoHeight(this);
+      const scale = Number(attr(this, "scale", "0.7")) || 0.7;
+      const children = Array.from(this.childNodes);
+      const shell = document.createElement("div");
+      shell.className = "rp-main-shell";
+      shell.style.width = `${width * scale}px`;
+      if (!autoHeight) shell.style.height = `${height * scale}px`;
+      const stage2 = document.createElement("div");
+      stage2.className = "rp-main-stage";
+      stage2.style.width = `${width}px`;
+      stage2.style.minHeight = autoHeight ? "0" : `${height}px`;
+      stage2.style.height = autoHeight ? "auto" : `${height}px`;
+      stage2.style.transform = `scale(${scale})`;
+      const clip = document.createElement("div");
+      clip.className = "rp-main-stage-clip";
+      children.forEach((n) => {
+        if (isViewportNode(n)) {
+          if (!n.hasAttribute("width") && !n.hasAttribute("device")) n.style.setProperty("--snap-width", `${width}px`);
+          if (!n.hasAttribute("height")) n.style.setProperty("--snap-height", autoHeight ? "auto" : `${height}px`);
+        }
+        stage2.appendChild(n);
+      });
+      clip.appendChild(stage2);
+      shell.appendChild(clip);
+      this.appendChild(shell);
+    }
+    this.scheduleRender();
+    this.ro = new ResizeObserver(() => this.scheduleRender());
+    this.ro.observe(this);
+    const stage = this.querySelector(".rp-main-stage");
+    if (stage) this.ro.observe(stage);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.ro) == null ? void 0 : _a.disconnect();
+    if (this.frame) {
+      cancelAnimationFrame(this.frame);
+      this.frame = 0;
+    }
+  }
+  scheduleRender() {
+    if (this.frame) return;
+    this.frame = requestAnimationFrame(() => {
+      this.frame = 0;
+      this.syncAutoHeight();
+      this.renderPins();
+    });
+  }
+  syncAutoHeight() {
+    if (!usesAutoHeight(this)) return;
+    const shell = this.querySelector(".rp-main-shell");
+    const stage = this.querySelector(".rp-main-stage");
+    if (!shell || !stage) return;
+    const scale = Number(attr(this, "scale", "0.7")) || 0.7;
+    const next = `${Math.ceil(stage.scrollHeight * scale)}px`;
+    if (shell.style.height !== next) shell.style.height = next;
+  }
+  renderPins() {
+    const shell = this.querySelector(".rp-main-shell");
+    const stage = this.querySelector(".rp-main-stage");
+    if (!shell || !stage) return;
+    shell.querySelectorAll(".rp-pin").forEach((p) => p.remove());
+    const shellRect = shell.getBoundingClientRect();
+    stage.querySelectorAll("[data-pin]").forEach((target) => {
+      const id = target.dataset.pin;
+      if (!id) return;
+      const r = target.getBoundingClientRect();
+      const pin = document.createElement("span");
+      pin.className = "rp-pin";
+      pin.style.left = `${r.left - shellRect.left}px`;
+      pin.style.top = `${r.top - shellRect.top}px`;
+      pin.innerHTML = `<span>${escapeHtml(id)}</span>`;
+      pin.addEventListener("click", () => {
+        const url = new URL(location.href);
+        url.searchParams.set("section", id);
+        history.pushState(null, "", url);
+        window.dispatchEvent(new CustomEvent("rp-section", { detail: id }));
+      });
+      shell.appendChild(pin);
+    });
+  }
+}
+function activateSection(path, pane) {
+  document.querySelectorAll(".rp-section-focus").forEach((el) => el.classList.remove("rp-section-focus"));
+  const target = document.querySelector(`[data-rp-section="${CSS.escape(path)}"]`);
+  if (!target) return;
+  target.classList.add("rp-section-focus");
+  if (pane) {
+    const paneEl = pane;
+    const targetRect = target.getBoundingClientRect();
+    const paneRect = paneEl.getBoundingClientRect();
+    paneEl.scrollTo({ top: paneEl.scrollTop + targetRect.top - paneRect.top - 20, behavior: "smooth" });
+  }
+  setTimeout(() => target.classList.remove("rp-section-focus"), 3e3);
+}
+class RpPage extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const pageTitle = attr(this, "title", "Untitled");
+    const route = attr(this, "route", "/");
+    const description = attr(this, "description", "");
+    this.removeAttribute("title");
+    const existing = Array.from(this.childNodes);
+    const header = document.createElement("div");
+    header.className = "page-el-header";
+    header.innerHTML = `<div class="page-el-title-row"><h1 class="page-el-title">${escapeHtml(pageTitle)}</h1><span class="page-el-route">${escapeHtml(route)}</span></div><p class="page-el-description">${escapeHtml(description)}</p>`;
+    const body = document.createElement("div");
+    body.className = "page-el-body";
+    const main = document.createElement("main");
+    main.className = "page-el-main";
+    const pane = document.createElement("aside");
+    pane.className = "annotation-el-pane";
+    pane.setAttribute("aria-label", "Annotations");
+    const paneInner = document.createElement("div");
+    paneInner.className = "annotation-el-pane-inner";
+    existing.forEach((n) => (isTopAnnotation(n) ? paneInner : body).appendChild(n));
+    pane.appendChild(paneInner);
+    main.append(header, body);
+    const shell = document.createElement("div");
+    shell.className = "page-el-shell";
+    shell.append(main, pane);
+    this.appendChild(shell);
+    requestAnimationFrame(() => {
+      const mv = body.querySelector("main-view, main-view");
+      if (mv) header.style.maxWidth = `${mv.offsetWidth}px`;
+    });
+    const go = () => {
+      const sec = new URLSearchParams(location.search).get("section");
+      if (sec) activateSection(sec, pane);
+    };
+    window.addEventListener("popstate", go);
+    window.addEventListener("rp-section", (e) => activateSection(e.detail, pane));
+    requestAnimationFrame(go);
+  }
+}
+class GenericElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class ViewportElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.hasAttribute("width") || this.hasAttribute("device")) this.style.setProperty("--snap-width", `${resolveWidth(this, 1440)}px`);
+    if (hasExplicitNumericHeight(this)) this.style.setProperty("--snap-height", `${resolveHeight(this, 900)}px`);
+    else if (usesAutoHeight(this)) this.style.setProperty("--snap-height", "auto");
+  }
+}
+class LayoutElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    this.style.setProperty("--snap-columns", attr(this, "columns", "1fr"));
+    this.style.setProperty("--snap-rows", attr(this, "rows", "auto"));
+    if (this.hasAttribute("gap")) this.style.setProperty("--snap-gap", `${attr(this, "gap", "0")}px`);
+  }
+}
+class PanelElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    this.style.setProperty("--snap-padding", `${attr(this, "padding", "16")}px`);
+  }
+}
+class NavbarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    this.style.setProperty("--snap-height", `${attr(this, "height", "64")}px`);
+  }
+}
+class SidebarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    this.style.setProperty("--snap-width", `${attr(this, "width", "260")}px`);
+  }
+}
+class LogoElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.hasAttribute("size")) this.style.setProperty("--snap-size", `${attr(this, "size", "82")}px`);
+    if (!this.innerHTML.trim()) this.textContent = attr(this, "label", "LOGO");
+  }
+}
+class SplitPaneElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    this.style.setProperty("--snap-columns", attr(this, "columns", "1fr 1fr"));
+  }
+}
+class DividerElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.hasAttribute("vertical")) this.classList.add("divider-el-v");
+  }
+}
+class SpacerElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.hasAttribute("size")) this.style.setProperty("--snap-size", `${attr(this, "size", "16")}px`);
+  }
+}
+const iconPaths = {
+  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+  bell: '<path d="M10.3 21a1.9 1.9 0 0 0 3.4 0"/><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"/>',
+  user: '<path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/>',
+  inbox: '<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.5 5h13L22 12v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7z"/>',
+  archive: '<rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/>',
+  "at-sign": '<circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  "trash-2": '<path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/>',
+  x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  loader: '<path d="M21 12a9 9 0 1 1-6.2-8.6"/>',
+  image: '<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>',
+  "circle-alert": '<circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/>',
+  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+  "layout-dashboard": '<rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/>',
+  "message-square": '<path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/>',
+  settings: '<path d="M12.2 2h-.4l-1 3a7 7 0 0 0-1.6.7l-3-1.4-.3.3-2 3 .2.4 2.6 2a7 7 0 0 0 0 2l-2.6 2-.2.4 2 3 .3.3 3-1.4a7 7 0 0 0 1.6.7l1 3h.4l1-3a7 7 0 0 0 1.6-.7l3 1.4.3-.3 2-3-.2-.4-2.6-2a7 7 0 0 0 0-2l2.6-2 .2-.4-2-3-.3-.3-3 1.4a7 7 0 0 0-1.6-.7z"/><circle cx="12" cy="12" r="3"/>',
+  plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+  file: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>',
+  users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9"/><path d="M16 3.1a4 4 0 0 1 0 7.8"/>',
+  shield: '<path d="M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3z"/>',
+  calendar: '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
+  upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/>',
+  empty: '<path d="M4 7h16"/><path d="M5 7l1.5 13h11L19 7"/><path d="M9 11h6"/>',
+  "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+  minus: '<path d="M5 12h14"/>',
+  "alert-triangle": '<path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+  info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+  "circle-check": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+  circle: '<circle cx="12" cy="12" r="10"/>',
+  "chevron-up": '<path d="m18 15-6-6-6 6"/>',
+  star: '<path d="M12 2l3 6.3 6.9 1-5 4.9 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-5-4.9 6.9-1z"/>',
+  copy: '<rect width="13" height="13" x="9" y="9" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
+  lock: '<rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  "circle-x": '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
+  "more-horizontal": '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
+  "more-vertical": '<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>',
+  grip: '<circle cx="9" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="18" r="1"/>',
+  folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z"/>',
+  "file-code": '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="m9 13-2 2 2 2"/><path d="m15 13 2 2-2 2"/>',
+  "git-branch": '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+  clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+  key: '<circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/>',
+  zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
+  home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
+  heart: '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>',
+  bookmark: '<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>',
+  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',
+  edit: '<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4Z"/>',
+  eye: '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
+  filter: '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
+  refresh: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/>',
+  sparkles: '<path d="M9.9 2.5 12 8l5.5 2.1L12 12l-2.1 5.5L7.8 12 2.3 9.9 7.8 8z"/><path d="M18 5l.9 2.1L21 8l-2.1.9L18 11l-.9-2.1L15 8l2.1-.9z"/>',
+  bot: '<rect width="16" height="11" x="4" y="9" rx="2"/><path d="M12 5v4"/><circle cx="12" cy="4" r="1"/><path d="M9 13v1.5"/><path d="M15 13v1.5"/>',
+  wrench: '<path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z"/>',
+  terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
+  "thumbs-up": '<path d="M7 10v11"/><path d="M15 5.9 14 10h5.5a2 2 0 0 1 2 2.4l-1.4 7A2 2 0 0 1 18 21H7V10l4-8a2 2 0 0 1 3 1.7z"/>',
+  "thumbs-down": '<path d="M17 14V3"/><path d="M9 18.1 10 14H4.5a2 2 0 0 1-2-2.4l1.4-7A2 2 0 0 1 6 3h11v11l-4 8a2 2 0 0 1-3-1.7z"/>',
+  send: '<path d="M14.5 9.5 21 3l-6.5 18-2.5-7-7-2.5z"/>',
+  stop: '<rect width="14" height="14" x="5" y="5" rx="2"/>',
+  paperclip: '<path d="m21 8-9.5 9.5a4 4 0 0 1-5.7-5.7L13 4.6a2.7 2.7 0 0 1 3.8 3.8L9.5 15.7a1.3 1.3 0 0 1-1.9-1.9l7.4-7.4"/>',
+  globe: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/>'
+};
+function icon(name, size = 16) {
+  const key = name || "file";
+  const paths = iconPaths[key] || iconPaths.file;
+  return `<svg class="rp-icon" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+}
+class FieldElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const value = attr(this, "value");
+    const placeholder = attr(this, "placeholder", "Search");
+    const label = attr(this, "label");
+    const error = attr(this, "error-message");
+    const showValue = value || attr(this, "state") === "filled";
+    const content = `${this.fieldIcon()}<span class="${showValue ? "rp-value" : "rp-placeholder"}">${escapeHtml(value || placeholder)}</span>${this.hasAttribute("has-clear-button") ? icon("x", 14) : ""}`;
+    this.innerHTML = label || error ? `<span class="rp-field-label">${escapeHtml(label)}</span><span class="rp-field-control">${content}</span>${error ? `<span class="rp-error-text">${escapeHtml(error)}</span>` : ""}` : content;
+  }
+  fieldIcon() {
+    return icon(this.tagName.toLowerCase().includes("date-picker") ? "calendar" : "search");
+  }
+}
+class TextareaElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.style.setProperty("--snap-rows", attr(this, "rows", "3"));
+    const value = attr(this, "value") || attr(this, "placeholder", "Textarea");
+    this.innerHTML = `<span class="${attr(this, "value") ? "rp-value" : "rp-placeholder"}">${escapeHtml(value)}</span>`;
+  }
+}
+class SelectElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const options = csv(this, "options", "选项 A,选项 B,选项 C");
+    const value = attr(this, "value", options[0] || "Select");
+    const label = attr(this, "label");
+    this.innerHTML = `${label ? `<span class="rp-field-label">${escapeHtml(label)}</span>` : ""}<span class="select-el-control"><span class="select-el-value">${escapeHtml(value)}</span>${icon("chevron-down")}</span><span class="select-el-options">${options.map((o) => `<span class="select-el-option${o === value ? " selected" : ""}">${escapeHtml(o)}</span>`).join("")}</span>`;
+  }
+}
+class ButtonElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label", ((_a = this.textContent) == null ? void 0 : _a.trim()) || "Button");
+    const ic = attr(this, "icon");
+    const loading = attr(this, "state") === "loading";
+    this.innerHTML = `${loading ? icon("loader") : ic ? icon(ic) : ""}<span>${escapeHtml(label)}</span>`;
+  }
+}
+class CheckboxElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const state = attr(this, "state");
+    const mark = state === "checked" ? icon("check", 12) : state === "indeterminate" ? icon("minus", 12) : "";
+    this.innerHTML = `<span class="rp-box">${mark}</span><span>${escapeHtml(attr(this, "label", ""))}</span>`;
+  }
+}
+class RadioElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const checked = attr(this, "state") === "checked";
+    this.innerHTML = `<span class="rp-box">${checked ? icon("circle", 8) : ""}</span><span>${escapeHtml(attr(this, "label", ""))}</span>`;
+  }
+}
+class ToggleElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `<span class="toggle-el-track"><span class="toggle-el-dot"></span></span><span>${escapeHtml(attr(this, "label", ""))}</span>`;
+  }
+}
+class FormElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class FormItemElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const label = attr(this, "label");
+    const error = attr(this, "error");
+    this.innerHTML = `${label ? `<span class="form-el-label${this.hasAttribute("required") ? " required" : ""}">${escapeHtml(label)}</span>` : ""}`;
+    children.forEach((n) => this.appendChild(n));
+    if (error) this.insertAdjacentHTML("beforeend", `<span class="form-el-error">${escapeHtml(error)}</span>`);
+  }
+}
+class DatePickerElement extends FieldElement {
+  fieldIcon() {
+    return icon("calendar");
+  }
+}
+class UploadElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const state = attr(this, "state", "empty");
+    if (state === "has-file") this.innerHTML = `${icon("file")}<span>${escapeHtml(attr(this, "file", "document.pdf"))}</span>`;
+    else if (state === "uploading") this.innerHTML = `${icon("loader")}<span>上传中...</span><span class="progress-el-bar" style="width:${escapeHtml(attr(this, "progress", "60"))}%"></span>`;
+    else this.innerHTML = `${icon("upload", 24)}<span>${escapeHtml(attr(this, "label", "点击或拖拽文件上传"))}</span>`;
+  }
+}
+class ImagePlaceholderElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    this.style.setProperty("--snap-width", `${attr(this, "width", "160")}px`);
+    this.style.setProperty("--snap-height", `${attr(this, "height", "100")}px`);
+    if (!this.innerHTML.trim()) this.innerHTML = `${icon("image")} ${escapeHtml(attr(this, "label", "Image"))}`;
+  }
+}
+class ProgressElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const value = attr(this, "value", "40");
+    this.style.setProperty("--progress", `${value}%`);
+    const kind = attr(this, "kind", attr(this, "style"));
+    this.innerHTML = kind === "circle" ? `${escapeHtml(value)}%` : '<span class="progress-el-bar"></span>';
+  }
+}
+class SliderElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const min = intAttr(this, "min", 0);
+    const max = intAttr(this, "max", 100);
+    const value = intAttr(this, "value", 40);
+    const pct = max > min ? Math.max(0, Math.min(100, (value - min) / (max - min) * 100)) : 0;
+    const label = attr(this, "label");
+    this.innerHTML = `${label ? `<span class="rp-field-label">${escapeHtml(label)}</span>` : ""}<span class="slider-el-track"><span class="slider-el-fill" style="width:${pct}%"></span><span class="slider-el-thumb" style="left:${pct}%"></span></span>${this.hasAttribute("show-value") ? `<span class="slider-el-value">${value}</span>` : ""}`;
+  }
+}
+class RangeElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const min = intAttr(this, "min", 0);
+    const max = intAttr(this, "max", 100);
+    const low = intAttr(this, "low", 25);
+    const high = intAttr(this, "high", 75);
+    const span = max - min || 1;
+    const l = (low - min) / span * 100;
+    const h = (high - min) / span * 100;
+    this.innerHTML = `<span class="slider-el-track"><span class="slider-el-fill" style="left:${l}%;width:${h - l}%"></span><span class="slider-el-thumb" style="left:${l}%"></span><span class="slider-el-thumb" style="left:${h}%"></span></span>`;
+  }
+}
+class NumberInputElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const value = attr(this, "value", "0");
+    this.innerHTML = `<span class="rp-num-value">${escapeHtml(value)}</span><span class="rp-num-steppers"><span class="rp-num-step">${icon("chevron-up", 12)}</span><span class="rp-num-step">${icon("chevron-down", 12)}</span></span>`;
+  }
+}
+class RatingElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const max = intAttr(this, "max", 5);
+    const value = intAttr(this, "value", 3);
+    this.innerHTML = Array.from({ length: max }, (_, i) => `<span class="rp-star${i < value ? " filled" : ""}">${icon("star", 16)}</span>`).join("");
+  }
+}
+class PinInputElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const len = intAttr(this, "length", 4);
+    const value = attr(this, "value", "");
+    const chars = value.split("");
+    this.innerHTML = Array.from({ length: len }, (_, i) => `<span class="rp-pin-cell${i === chars.length ? " active" : ""}">${escapeHtml(chars[i] || "")}</span>`).join("");
+  }
+}
+class ColorSwatchElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const value = attr(this, "value", "#2563eb");
+    this.innerHTML = `<span class="rp-swatch-chip" style="background:${escapeHtml(value)}"></span><span class="rp-swatch-hex">${escapeHtml(attr(this, "label", value))}</span>`;
+  }
+}
+class AutocompleteElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const value = attr(this, "value");
+    const options = csv(this, "options", "选项一,选项二,选项三");
+    this.innerHTML = `<span class="rp-field-control">${icon("search")}<span class="${value ? "rp-value" : "rp-placeholder"}">${escapeHtml(value || attr(this, "placeholder", "输入以搜索"))}</span></span>${this.hasAttribute("open") ? `<span class="rp-ac-options">${options.map((o) => `<span class="rp-ac-option">${escapeHtml(o)}</span>`).join("")}</span>` : ""}`;
+  }
+}
+class BadgeElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    const count = attr(this, "count", "0");
+    const max = intAttr(this, "max", 99);
+    const n = Number(count);
+    this.textContent = Number.isFinite(n) && n > max ? `${max}+` : count;
+  }
+}
+class AvatarElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    const size = attr(this, "size", "32");
+    this.style.setProperty("--snap-size", `${size}px`);
+    if (!((_a = this.textContent) == null ? void 0 : _a.trim())) this.textContent = attr(this, "initials", "U");
+  }
+}
+class ListElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady || this.children.length) return;
+    this.dataset.rpReady = "true";
+    const items = intAttr(this, "items", 3);
+    const state = attr(this, "state");
+    this.innerHTML = Array.from({ length: items }, (_, i) => `<list-item label="${["全部", "未读", "@ 我", "已归档", "设置"][i] || `Item ${i + 1}`}" icon="${["inbox", "message-square", "at-sign", "archive", "settings"][i] || "file"}"${state === "first-selected" && i === 0 ? ' state="selected"' : ""}></list-item>`).join("");
+  }
+}
+class ListItemElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label", ((_a = this.textContent) == null ? void 0 : _a.trim()) || "Item");
+    const badge = attr(this, "badge");
+    const ic = attr(this, "icon");
+    this.innerHTML = `${ic ? icon(ic) : ""}<span class="list-el-label">${escapeHtml(label)}</span>${badge ? `<span class="list-el-badge">${escapeHtml(badge)}</span>` : ""}`;
+  }
+}
+class TabsElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    const active = attr(this, "active", "0");
+    const numeric = Number(active);
+    const children = Array.from(this.children);
+    children.forEach((child, i) => {
+      var _a;
+      const label = child.getAttribute("label") || ((_a = child.textContent) == null ? void 0 : _a.trim()) || "";
+      const isActive = Number.isFinite(numeric) ? i === numeric : label === active;
+      child.classList.toggle("tab-el-active", isActive);
+    });
+  }
+}
+class TabElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label", ((_a = this.textContent) == null ? void 0 : _a.trim()) || "Tab");
+    const badge = attr(this, "badge");
+    this.innerHTML = `<span>${escapeHtml(label)}</span>${badge ? `<span class="list-el-badge">${escapeHtml(badge)}</span>` : ""}`;
+  }
+}
+class PaginationElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const total = intAttr(this, "total", 10);
+    const current = intAttr(this, "current", 1);
+    const pageSize = intAttr(this, "page-size", 10);
+    const pages = Math.max(1, Math.ceil(total / pageSize));
+    const visible = Array.from({ length: Math.min(pages, 5) }, (_, i) => i + 1);
+    this.innerHTML = `<span class="page-el-btn">${icon("chevron-left", 14)}</span>${visible.map((p) => `<span class="page-el-btn${p === current ? " active" : ""}">${p}</span>`).join("")}<span class="page-el-btn">${icon("chevron-right", 14)}</span><span>共 ${total} 条</span>`;
+  }
+}
+class StepsElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const steps = csv(this, "steps", "步骤一,步骤二,步骤三");
+    const active = intAttr(this, "active", 0);
+    this.innerHTML = steps.map((s, i) => `<span class="rp-step ${i < active ? "done" : i === active ? "active" : ""}"><span class="rp-step-dot">${i < active ? icon("check", 12) : i + 1}</span>${escapeHtml(s)}</span>${i < steps.length - 1 ? '<span class="rp-step-sep"></span>' : ""}`).join("");
+  }
+}
+class BreadcrumbElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const items = csv(this, "items", "首页,当前页");
+    this.innerHTML = items.map((item, i) => `<span class="${i === items.length - 1 ? "breadcrumb-el-current" : ""}">${escapeHtml(item)}</span>${i < items.length - 1 ? "<span>/</span>" : ""}`).join("");
+  }
+}
+class SegmentedElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const options = csv(this, "options", "日,周,月");
+    const active = attr(this, "active", "0");
+    const idx = Number(active);
+    this.innerHTML = options.map((o, i) => `<span class="rp-seg-item${(Number.isFinite(idx) ? i === idx : o === active) ? " active" : ""}">${escapeHtml(o)}</span>`).join("");
+  }
+}
+class CommandPaletteElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const query = attr(this, "query");
+    const results = csv(this, "results", "新建文件,打开设置,搜索工单,切换主题");
+    this.innerHTML = `<div class="rp-cmdk-input">${icon("search")}<span class="${query ? "rp-value" : "rp-placeholder"}">${escapeHtml(query || "输入命令…")}</span></div><div class="rp-cmdk-list">${results.map((r, i) => `<div class="rp-cmdk-item${i === 0 ? " active" : ""}">${icon("zap", 14)}<span>${escapeHtml(r)}</span></div>`).join("")}</div>`;
+  }
+}
+class ContextMenuElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady || this.children.length) return;
+    this.dataset.rpReady = "true";
+    const items = csv(this, "items", "复制,重命名,移动到,删除");
+    this.innerHTML = items.map((it) => `<div class="menu-item${it === "删除" ? " danger" : ""}"><span>${escapeHtml(it)}</span></div>`).join("");
+  }
+}
+class MenuElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class MenuItemElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label", ((_a = this.textContent) == null ? void 0 : _a.trim()) || "菜单项");
+    const ic = attr(this, "icon");
+    const shortcut = attr(this, "shortcut");
+    const disabled = attr(this, "state") === "disabled";
+    this.innerHTML = `${ic ? icon(ic, 14) : ""}<span class="menu-el-label">${escapeHtml(label)}</span>${shortcut ? `<span class="menu-el-shortcut">${escapeHtml(shortcut)}</span>` : ""}`;
+    if (disabled) this.classList.add("disabled");
+  }
+}
+class TocElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady || this.children.length) return;
+    this.dataset.rpReady = "true";
+    const items = csv(this, "items", "概述,安装,用法,API,常见问题");
+    this.innerHTML = items.map((it, i) => `<span class="toc-el-item${i === 0 ? " active" : ""}">${escapeHtml(it)}</span>`).join("");
+  }
+}
+class KbdElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const keys = csv(this, "keys", "⌘,K");
+    this.innerHTML = keys.map((k) => `<kbd class="kbd-el-key">${escapeHtml(k)}</kbd>`).join('<span class="kbd-el-plus">+</span>');
+  }
+}
+function sampleCell(c, j, i) {
+  const lower = c.toLowerCase();
+  if (c.includes("发件") || lower.includes("name")) return ["张三", "李四", "系统通知", "运营助手", "王五", "安全团队"][i % 6];
+  if (c.includes("预览") || lower.includes("preview")) return ["请确认新的项目评审时间", "本周周报已发送", "你的账号存在新的登录", "活动报名已通过审核", "附件已更新", "安全策略变更提醒"][i % 6];
+  if (c.includes("时间") || lower.includes("time")) return ["09:12", "昨天", "周二", "5月30日", "5月28日", "5月20日"][i % 6];
+  if (c.includes("状态") || lower.includes("status")) return i % 2 ? "未读" : "已读";
+  return `Data ${i + 1}-${j + 1}`;
+}
+class TableElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const cols = csv(this, "columns", "Name,Preview,Time,Status");
+    const rows = intAttr(this, "rows", 4);
+    const hasCheckbox = this.hasAttribute("has-checkbox");
+    const hasAction = this.hasAttribute("has-action");
+    const finalCols = hasAction ? [...cols, "操作"] : cols;
+    const headCells = `${hasCheckbox ? '<span class="table-el-cell">✓</span>' : ""}${finalCols.map((c) => `<span class="table-el-cell">${escapeHtml(c)}</span>`).join("")}`;
+    const body = Array.from({ length: rows }, (_, i) => `<div class="table-row">${hasCheckbox ? `<span class="table-el-cell"><span class="rp-box">${i === 1 ? icon("check", 12) : ""}</span></span>` : ""}${finalCols.map((c, j) => `<span class="table-el-cell">${c === "操作" ? '<button-el label="查看" variant="link"></button-el>' : escapeHtml(sampleCell(c, j, i))}</span>`).join("")}</div>`).join("");
+    this.innerHTML = `<div class="table-row table-el-head">${headCells}</div>${body}`;
+  }
+}
+class TableRowElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `<span><span class="rp-box">${attr(this, "state") === "selected" ? icon("check", 12) : ""}</span></span><span>张三</span><span>消息内容预览文本</span><span>09:12</span><span>${escapeHtml(attr(this, "state", "default"))}</span>`;
+  }
+}
+class BulkActionBarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const count = attr(this, "count", "1");
+    const actions = csv(this, "actions", "确认,取消");
+    this.innerHTML = `${icon("check")}<span>已选 ${escapeHtml(count)} 项</span>${actions.map((a) => `<button-el label="${escapeHtml(a)}" variant="ghost"></button-el>`).join("")}`;
+  }
+}
+class EmptyElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `${icon("empty", 28)}<span class="empty-el-title">${escapeHtml(attr(this, "label", "暂无数据"))}</span><span class="empty-el-desc">${escapeHtml(attr(this, "description", ""))}</span>${this.hasAttribute("has-action") ? '<button-el label="新建" variant="primary" icon="plus"></button-el>' : ""}`;
+  }
+}
+class LoadingElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const rows = intAttr(this, "rows", 3);
+    this.innerHTML = attr(this, "kind") === "spinner" || attr(this, "style") === "spinner" ? `<span class="rp-spinner">${icon("loader", 24)}</span>` : Array.from({ length: rows }, (_, i) => `<span class="skeleton-el-line" style="width:${220 - i * 24}px"></span>`).join("");
+  }
+}
+class AlertElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const type = attr(this, "type", "info");
+    const title = attr(this, "title", type === "error" ? "错误" : "提示");
+    const message = attr(this, "message", "");
+    const ic = type === "error" ? "circle-alert" : type === "warning" ? "alert-triangle" : type === "success" ? "circle-check" : "info";
+    this.innerHTML = `${icon(ic)}<span><strong>${escapeHtml(title)}</strong>${message ? `<br>${escapeHtml(message)}` : ""}</span>${this.hasAttribute("closable") ? icon("x", 14) : ""}`;
+  }
+}
+class OverlayElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const title = attr(this, "title");
+    if (!title) return;
+    const head = document.createElement("div");
+    head.className = "rp-overlay-title";
+    head.textContent = title;
+    this.prepend(head);
+    children.forEach((n) => this.appendChild(n));
+  }
+}
+class TooltipElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (!((_a = this.textContent) == null ? void 0 : _a.trim())) this.textContent = attr(this, "text", "提示内容");
+  }
+}
+class ModalElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.style.setProperty("--snap-width", `${attr(this, "width", "480")}px`);
+    const children = Array.from(this.childNodes);
+    const body = document.createElement("div");
+    body.className = "modal-el-body";
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = `<div class="modal-el-head"><span>${escapeHtml(attr(this, "title", "标题"))}</span>${icon("x", 14)}</div>`;
+    this.appendChild(body);
+    if (this.hasAttribute("has-footer")) this.insertAdjacentHTML("beforeend", '<div class="modal-el-footer"><button-el label="取消"></button-el><button-el label="确认" variant="primary"></button-el></div>');
+  }
+}
+class DrawerElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.style.setProperty("--snap-width", `${attr(this, "width", "360")}px`);
+    const children = Array.from(this.childNodes);
+    const body = document.createElement("div");
+    body.className = "drawer-el-body";
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = `<div class="drawer-el-head"><span>${escapeHtml(attr(this, "title", "抽屉"))}</span>${icon("x", 14)}</div>`;
+    this.appendChild(body);
+  }
+}
+class CardElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const title = attr(this, "title");
+    const subtitle = attr(this, "subtitle");
+    this.innerHTML = `${this.hasAttribute("has-image") ? `<span class="card-el-image">${icon("image")} Image</span>` : ""}${title ? `<span class="card-el-title">${escapeHtml(title)}</span>` : ""}${subtitle ? `<span class="card-el-subtitle">${escapeHtml(subtitle)}</span>` : ""}`;
+    children.forEach((n) => this.appendChild(n));
+    if (this.hasAttribute("has-footer")) this.insertAdjacentHTML("beforeend", '<span class="card-el-footer"><button-el label="查看" variant="secondary"></button-el></span>');
+  }
+}
+class StatCardElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `<span class="rp-stat-label">${escapeHtml(attr(this, "label", "指标"))}</span><span class="rp-stat-value">${escapeHtml(attr(this, "value", "128"))}</span><span class="rp-stat-change">${escapeHtml(attr(this, "change", "0%"))}</span>`;
+  }
+}
+class TagElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label", ((_a = this.textContent) == null ? void 0 : _a.trim()) || "Tag");
+    this.innerHTML = `<span>${escapeHtml(label)}</span>${this.hasAttribute("closable") ? icon("x", 12) : ""}`;
+  }
+}
+class ChipElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label", ((_a = this.textContent) == null ? void 0 : _a.trim()) || "Chip");
+    const ic = attr(this, "icon");
+    this.innerHTML = `${ic ? icon(ic, 12) : ""}<span>${escapeHtml(label)}</span>${this.hasAttribute("closable") ? icon("x", 11) : ""}`;
+  }
+}
+class TreeElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class TreeItemElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const level = intAttr(this, "level", 0);
+    const label = attr(this, "label", "Node");
+    const ic = attr(this, "icon");
+    const expandable = this.hasAttribute("expanded") || this.hasAttribute("collapsed");
+    const expanded = this.hasAttribute("expanded");
+    const caret = expandable ? icon(expanded ? "chevron-down" : "chevron-right", 12) : '<span class="tree-el-spacer"></span>';
+    this.style.setProperty("--tree-level", String(level));
+    this.innerHTML = `<span class="tree-el-row${attr(this, "state") === "selected" ? " selected" : ""}">${caret}${icon(ic || (expandable ? "folder" : "file"), 14)}<span class="tree-el-label">${escapeHtml(label)}</span></span>`;
+  }
+}
+class TimelineElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class TimelineItemElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const label = attr(this, "label");
+    const time = attr(this, "time");
+    const state = attr(this, "state", "default");
+    const dot = `<span class="timeline-el-dot ${state}"></span>`;
+    const head = `<div class="timeline-el-head"><span class="timeline-el-label">${escapeHtml(label)}</span>${time ? `<span class="timeline-el-time">${escapeHtml(time)}</span>` : ""}</div>`;
+    const body = document.createElement("div");
+    body.className = "timeline-el-content";
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = `${dot}<div class="timeline-el-main">${head}</div>`;
+    this.querySelector(".timeline-el-main").appendChild(body);
+  }
+}
+class CalendarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const month = attr(this, "month", "2026 年 6 月");
+    const selected = intAttr(this, "selected", 15);
+    const dows = ["一", "二", "三", "四", "五", "六", "日"];
+    const cells = Array.from({ length: 35 }, (_, i) => {
+      const day = i - 1;
+      const valid = day >= 1 && day <= 30;
+      return `<span class="rp-cal-cell${valid && day === selected ? " selected" : ""}${valid ? "" : " muted"}">${valid ? day : ""}</span>`;
+    }).join("");
+    this.innerHTML = `<div class="rp-cal-head"><span>${escapeHtml(month)}</span></div><div class="rp-cal-grid">${dows.map((d) => `<span class="rp-cal-dow">${d}</span>`).join("")}${cells}</div>`;
+  }
+}
+class KanbanElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class KanbanColumnElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const title = attr(this, "title", "列");
+    const count = attr(this, "count");
+    const head = document.createElement("div");
+    head.className = "kanban-el-head";
+    head.innerHTML = `<span>${escapeHtml(title)}</span>${count ? `<span class="kanban-el-count">${escapeHtml(count)}</span>` : ""}`;
+    const body = document.createElement("div");
+    body.className = "kanban-el-body";
+    children.forEach((n) => body.appendChild(n));
+    this.append(head, body);
+  }
+}
+class KanbanCardElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label", "卡片");
+    const tag = attr(this, "tag");
+    this.innerHTML = `<span class="kanban-card-title">${escapeHtml(label)}</span>${tag ? `<span class="kanban-card-tag">${escapeHtml(tag)}</span>` : ""}`;
+  }
+}
+class CodeBlockElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const lines = intAttr(this, "lines", 5);
+    const lang = attr(this, "lang", "ts");
+    const body = Array.from({ length: lines }, (_, i) => `<span class="rp-code-line"><span class="rp-code-ln">${i + 1}</span><span class="rp-code-bar" style="width:${40 + i * 37 % 50}%"></span></span>`).join("");
+    this.innerHTML = `<div class="rp-code-head">${escapeHtml(lang)}</div><div class="rp-code-body">${body}</div>`;
+  }
+}
+class DiffElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const rows = intAttr(this, "rows", 4);
+    const body = Array.from({ length: rows }, (_, i) => {
+      const kind = i % 3 === 0 ? "add" : i % 3 === 1 ? "del" : "ctx";
+      const sign = kind === "add" ? "+" : kind === "del" ? "-" : " ";
+      return `<span class="diff-el-line ${kind}"><span class="diff-el-sign">${sign}</span><span class="rp-code-bar" style="width:${45 + i * 29 % 45}%"></span></span>`;
+    }).join("");
+    this.innerHTML = body;
+  }
+}
+class ImageGridElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const count = intAttr(this, "count", 6);
+    const cols = intAttr(this, "columns", 3);
+    this.style.setProperty("--grid-cols", String(cols));
+    this.innerHTML = Array.from({ length: count }, () => `<span class="rp-grid-cell">${icon("image", 20)}</span>`).join("");
+  }
+}
+class KeyValueElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class KvRowElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `<span class="rp-kv-key">${escapeHtml(attr(this, "label", "键"))}</span><span class="rp-kv-val">${escapeHtml(attr(this, "value", "值"))}</span>`;
+  }
+}
+class AccordionElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class AccordionItemElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const label = attr(this, "label", "分节");
+    const expanded = this.hasAttribute("expanded");
+    const head = document.createElement("div");
+    head.className = "accordion-el-head";
+    head.innerHTML = `${icon(expanded ? "chevron-down" : "chevron-right", 14)}<span>${escapeHtml(label)}</span>`;
+    this.appendChild(head);
+    if (expanded) {
+      const body = document.createElement("div");
+      body.className = "accordion-el-body";
+      children.forEach((n) => body.appendChild(n));
+      this.appendChild(body);
+    }
+  }
+}
+class BannerElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const type = attr(this, "type", "info");
+    const ic = type === "error" ? "circle-alert" : type === "warning" ? "alert-triangle" : type === "success" ? "circle-check" : "info";
+    this.innerHTML = `${icon(ic)}<span class="banner-el-text"><strong>${escapeHtml(attr(this, "title", "通知"))}</strong>${attr(this, "message") ? ` ${escapeHtml(attr(this, "message"))}` : ""}</span>${this.hasAttribute("has-action") ? '<button-el label="查看" variant="link"></button-el>' : ""}${this.hasAttribute("closable") ? icon("x", 14) : ""}`;
+  }
+}
+class SkeletonElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const shape = attr(this, "shape", "line");
+    if (shape === "avatar") this.innerHTML = '<span class="rp-skel rp-skel-avatar"></span>';
+    else if (shape === "card") this.innerHTML = '<span class="rp-skel rp-skel-block"></span><span class="skeleton-el-line" style="width:70%"></span><span class="skeleton-el-line" style="width:50%"></span>';
+    else if (shape === "list") this.innerHTML = Array.from({ length: 3 }, () => '<span class="rp-skel-row"><span class="rp-skel rp-skel-avatar sm"></span><span class="skeleton-el-line" style="width:60%"></span></span>').join("");
+    else this.innerHTML = '<span class="skeleton-el-line"></span>';
+  }
+}
+class CountdownElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `${icon("clock", 13)}<span>${escapeHtml(attr(this, "value", "02:45:18"))}</span>`;
+  }
+}
+class ResultElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const status = attr(this, "status", "success");
+    const ic = status === "error" ? "circle-x" : status === "empty" ? "empty" : "circle-check";
+    this.innerHTML = `<span class="result-el-icon ${status}">${icon(ic, 40)}</span><span class="result-el-title">${escapeHtml(attr(this, "title", "操作成功"))}</span><span class="result-el-desc">${escapeHtml(attr(this, "description", ""))}</span>${this.hasAttribute("has-action") ? '<button-el label="返回" variant="primary"></button-el>' : ""}`;
+  }
+}
+class PermissionGateElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const wrap = document.createElement("div");
+    wrap.className = "rp-gate-content";
+    children.forEach((n) => wrap.appendChild(n));
+    const overlay = document.createElement("div");
+    overlay.className = "rp-gate-overlay";
+    overlay.innerHTML = `${icon("lock", 16)}<span>${escapeHtml(attr(this, "reason", "无权限"))}</span>`;
+    this.append(wrap, overlay);
+  }
+}
+class QuotaBarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const used = intAttr(this, "used", 70);
+    const limit = intAttr(this, "limit", 100);
+    const pct = limit ? Math.min(100, used / limit * 100) : 0;
+    const danger = pct >= 90;
+    this.innerHTML = `<div class="rp-quota-head"><span>${escapeHtml(attr(this, "label", "用量"))}</span><span class="rp-quota-num${danger ? " danger" : ""}">${used} / ${limit}</span></div><span class="rp-quota-track"><span class="rp-quota-fill${danger ? " danger" : ""}" style="width:${pct}%"></span></span>`;
+  }
+}
+class ApiKeyElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const value = attr(this, "value", "sk_live_••••••••••••3f9a");
+    this.innerHTML = `<span class="rp-apikey-val">${escapeHtml(value)}</span><span class="rp-apikey-copy">${icon("copy", 14)}</span>`;
+  }
+}
+class AuditRowElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `<span class="rp-audit-actor">${escapeHtml(attr(this, "actor", "用户"))}</span><span class="rp-audit-action">${escapeHtml(attr(this, "action", "执行了操作"))}</span><span class="rp-audit-time">${escapeHtml(attr(this, "time", "刚刚"))}</span>`;
+  }
+}
+class WorkflowNodeElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const state = attr(this, "state", "default");
+    const ic = state === "done" ? "circle-check" : state === "active" ? "circle" : state === "error" ? "circle-x" : "circle";
+    this.innerHTML = `<span class="rp-wf-icon ${state}">${icon(ic, 16)}</span><span class="rp-wf-label">${escapeHtml(attr(this, "label", "节点"))}</span>`;
+  }
+}
+class IosNavbarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const title = attr(this, "title", "标题");
+    const large = this.hasAttribute("large");
+    const back = attr(this, "back");
+    const trailing = attr(this, "trailing");
+    this.innerHTML = `<div class="ios-navbar-row"><span class="rp-ios-nav-leading">${back ? `${icon("chevron-left", 18)}<span>${escapeHtml(back)}</span>` : ""}</span><span class="rp-ios-nav-title${large ? " inline" : ""}">${large ? "" : escapeHtml(title)}</span><span class="rp-ios-nav-trailing">${trailing ? escapeHtml(trailing) : ""}</span></div>${large ? `<div class="rp-ios-nav-large">${escapeHtml(title)}</div>` : ""}`;
+  }
+}
+class IosTabbarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const items = csv(this, "items", "首页,搜索,通知,我的");
+    const icons = csv(this, "icons", "home,search,bell,user");
+    const active = intAttr(this, "active", 0);
+    this.innerHTML = items.map((it, i) => `<span class="rp-ios-tab${i === active ? " active" : ""}">${icon(icons[i] || "circle", 22)}<span class="rp-ios-tab-label">${escapeHtml(it)}</span></span>`).join("");
+  }
+}
+class IosListElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const header = attr(this, "header");
+    if (header) {
+      const h = document.createElement("div");
+      h.className = "ios-list-header";
+      h.textContent = header;
+      this.insertBefore(h, this.firstChild);
+    }
+  }
+}
+class IosListItemElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label", "项");
+    const detail = attr(this, "detail");
+    const ic = attr(this, "icon");
+    const chevron = this.hasAttribute("chevron");
+    this.innerHTML = `${ic ? `<span class="rp-ios-li-icon">${icon(ic, 16)}</span>` : ""}<span class="rp-ios-li-label">${escapeHtml(label)}</span>${detail ? `<span class="rp-ios-li-detail">${escapeHtml(detail)}</span>` : ""}${chevron ? `<span class="rp-ios-li-chevron">${icon("chevron-right", 16)}</span>` : ""}`;
+  }
+}
+class IosActionSheetElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const title = attr(this, "title");
+    const actions = csv(this, "actions", "拍照,从相册选择,选择文件");
+    const destructive = attr(this, "destructive");
+    const group = `<div class="rp-ios-as-group">${title ? `<div class="rp-ios-as-title">${escapeHtml(title)}</div>` : ""}${actions.map((a) => `<div class="rp-ios-as-action${a === destructive ? " destructive" : ""}">${escapeHtml(a)}</div>`).join("")}</div>`;
+    const cancel = `<div class="rp-ios-as-group"><div class="rp-ios-as-action cancel">取消</div></div>`;
+    this.innerHTML = group + cancel;
+  }
+}
+class IosAlertElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const title = attr(this, "title", "提示");
+    const message = attr(this, "message", "");
+    const actions = csv(this, "actions", "取消,确定");
+    this.innerHTML = `<div class="ios-alert-body"><div class="ios-alert-title">${escapeHtml(title)}</div>${message ? `<div class="ios-alert-msg">${escapeHtml(message)}</div>` : ""}</div><div class="ios-alert-actions">${actions.map((a, i) => `<span class="ios-alert-btn${i === actions.length - 1 ? " primary" : ""}">${escapeHtml(a)}</span>`).join("")}</div>`;
+  }
+}
+class IosSwitchElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label");
+    this.innerHTML = `${label ? `<span class="ios-switch-label">${escapeHtml(label)}</span>` : ""}<span class="ios-switch-track"><span class="ios-switch-dot"></span></span>`;
+  }
+}
+class IosSegmentedElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const options = csv(this, "options", "第一,第二,第三");
+    const active = intAttr(this, "active", 0);
+    this.innerHTML = options.map((o, i) => `<span class="rp-ios-seg-item${i === active ? " active" : ""}">${escapeHtml(o)}</span>`).join("");
+  }
+}
+class IosButtonElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `<span>${escapeHtml(attr(this, "label", ((_a = this.textContent) == null ? void 0 : _a.trim()) || "按钮"))}</span>`;
+  }
+}
+class IosSearchElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const value = attr(this, "value");
+    this.innerHTML = `${icon("search", 15)}<span class="${value ? "rp-value" : "rp-placeholder"}">${escapeHtml(value || attr(this, "placeholder", "搜索"))}</span>`;
+  }
+}
+class IosStepperElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `<span class="rp-ios-step minus">${icon("minus", 16)}</span><span class="rp-ios-step-div"></span><span class="rp-ios-step plus">${icon("plus", 16)}</span>`;
+  }
+}
+class MacWindowElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const title = attr(this, "title", "窗口");
+    const titlebar = `<div class="rp-mac-titlebar"><span class="rp-mac-lights"><span class="rp-mac-light close"></span><span class="rp-mac-light min"></span><span class="rp-mac-light max"></span></span><span class="rp-mac-title">${escapeHtml(title)}</span></div>`;
+    const body = document.createElement("div");
+    body.className = "rp-mac-window-body";
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = titlebar;
+    this.appendChild(body);
+  }
+}
+class MacToolbarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class MacMenubarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const items = csv(this, "items", "文件,编辑,显示,窗口,帮助");
+    this.innerHTML = `<span class="rp-mac-menubar-apple">${icon("home", 14)}</span>` + items.map((it, i) => `<span class="rp-mac-menu-title${i === 0 ? " active" : ""}">${escapeHtml(it)}</span>`).join("");
+  }
+}
+class MacSidebarElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class MacSourceItemElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const label = attr(this, "label", "项");
+    const ic = attr(this, "icon");
+    if (this.hasAttribute("group")) {
+      this.classList.add("rp-mac-source-group");
+      this.textContent = label;
+      return;
+    }
+    this.innerHTML = `${ic ? icon(ic, 15) : ""}<span class="rp-mac-source-label">${escapeHtml(label)}</span>`;
+    if (attr(this, "state") === "selected") this.classList.add("selected");
+  }
+}
+class MacSegmentedElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const options = csv(this, "options", "全部,未读,标记");
+    const active = intAttr(this, "active", 0);
+    this.innerHTML = options.map((o, i) => `<span class="rp-mac-seg-item${i === active ? " active" : ""}">${escapeHtml(o)}</span>`).join("");
+  }
+}
+class MacPopoverElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const title = attr(this, "title");
+    const arrow = '<span class="rp-mac-pop-arrow"></span>';
+    const body = document.createElement("div");
+    body.className = "rp-mac-pop-body";
+    if (title) {
+      const h = document.createElement("div");
+      h.className = "rp-mac-pop-title";
+      h.textContent = title;
+      body.appendChild(h);
+    }
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = arrow;
+    this.appendChild(body);
+  }
+}
+class MacSheetElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const title = attr(this, "title", "操作");
+    const body = document.createElement("div");
+    body.className = "rp-mac-sheet-body";
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = `<div class="rp-mac-sheet-title">${escapeHtml(title)}</div>`;
+    this.appendChild(body);
+    this.insertAdjacentHTML("beforeend", '<div class="rp-mac-sheet-actions"><button-el label="取消"></button-el><button-el label="完成" variant="primary"></button-el></div>');
+  }
+}
+class MacStepperElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `<span class="rp-mac-step up">${icon("chevron-up", 11)}</span><span class="rp-mac-step down">${icon("chevron-down", 11)}</span>`;
+  }
+}
+class MacDisclosureElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const label = attr(this, "label", "详情");
+    const expanded = this.hasAttribute("expanded");
+    const head = document.createElement("div");
+    head.className = "rp-mac-disc-head";
+    head.innerHTML = `<span class="rp-mac-disc-tri${expanded ? " open" : ""}">${icon("chevron-right", 12)}</span><span>${escapeHtml(label)}</span>`;
+    this.appendChild(head);
+    if (expanded) {
+      const body = document.createElement("div");
+      body.className = "rp-mac-disc-body";
+      children.forEach((n) => body.appendChild(n));
+      this.appendChild(body);
+    }
+  }
+}
+class MacTableElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const cols = csv(this, "columns", "名称,类型,大小");
+    const rows = intAttr(this, "rows", 5);
+    const head = `<div class="rp-mac-tr rp-mac-th">${cols.map((c, i) => `<span class="rp-mac-td">${escapeHtml(c)}${i === 0 ? icon("chevron-up", 10) : ""}</span>`).join("")}</div>`;
+    const body = Array.from({ length: rows }, (_, r) => `<div class="rp-mac-tr${r % 2 ? " alt" : ""}">${cols.map((c, ci) => `<span class="rp-mac-td">${ci === 0 ? icon("file", 13) : ""}<span class="rp-mac-cell-bar" style="width:${50 + (r * 17 + ci * 23) % 40}%"></span></span>`).join("")}</div>`).join("");
+    this.innerHTML = head + body;
+  }
+}
+class ChatElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+  }
+}
+class UserMessageElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const text = attr(this, "text");
+    const content = document.createElement("div");
+    content.className = "rp-msg-content";
+    if (text) content.textContent = text;
+    else children.forEach((n) => content.appendChild(n));
+    this.innerHTML = `<div class="rp-msg-role">You</div>`;
+    this.appendChild(content);
+  }
+}
+class AssistantMessageElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const text = attr(this, "text");
+    const name = attr(this, "name", "Assistant");
+    const content = document.createElement("div");
+    content.className = "rp-msg-content";
+    if (text) content.textContent = text;
+    else children.forEach((n) => content.appendChild(n));
+    this.innerHTML = `<div class="rp-msg-role">${escapeHtml(name)}</div>`;
+    this.appendChild(content);
+  }
+}
+class SystemMessageElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const text = attr(this, "text", ((_a = this.textContent) == null ? void 0 : _a.trim()) || "系统消息");
+    this.innerHTML = `<span class="rp-sysmsg-line">${escapeHtml(text)}</span>`;
+  }
+}
+class ToolCallElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const name = attr(this, "name", "tool");
+    const state = attr(this, "state", "done");
+    const glyph = state === "running" ? icon("loader", 13) : state === "error" ? icon("circle-x", 13) : icon("check", 13);
+    const args = attr(this, "args");
+    const head = `<div class="rp-tool-head"><span class="rp-tool-glyph ${state}">${glyph}</span><span class="rp-tool-name">${escapeHtml(name)}</span>${args ? `<span class="rp-tool-args-inline">${escapeHtml(args)}</span>` : ""}</div>`;
+    const body = document.createElement("div");
+    body.className = "rp-tool-body";
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = head;
+    if (children.length) this.appendChild(body);
+  }
+}
+class AgentOutputElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const label = attr(this, "label");
+    const head = label ? `<div class="rp-output-head">${escapeHtml(label)}</div>` : "";
+    const body = document.createElement("div");
+    body.className = "rp-output-body";
+    const text = attr(this, "text");
+    if (text) body.textContent = text;
+    else children.forEach((n) => body.appendChild(n));
+    this.innerHTML = head;
+    this.appendChild(body);
+  }
+}
+class ReasoningElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const children = Array.from(this.childNodes);
+    const expanded = this.hasAttribute("expanded");
+    const head = `<div class="rp-reason-head">${icon(expanded ? "chevron-down" : "chevron-right", 13)}<span>Thought for a few seconds</span></div>`;
+    this.innerHTML = head;
+    if (expanded) {
+      const body = document.createElement("div");
+      body.className = "rp-reason-body";
+      children.forEach((n) => body.appendChild(n));
+      this.appendChild(body);
+    }
+  }
+}
+class MessageActionsElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady || this.children.length) return;
+    this.dataset.rpReady = "true";
+    const actions = csv(this, "actions", "copy,retry,up,down");
+    const map = { copy: ["copy", "复制"], retry: ["refresh", "重试"], up: ["thumbs-up", "赞"], down: ["thumbs-down", "踩"], edit: ["edit", "编辑"], share: ["send", "分享"] };
+    this.innerHTML = actions.map((a) => {
+      const m = map[a] || ["circle", a];
+      return `<span class="rp-msg-action" title="${escapeHtml(m[1])}">${icon(m[0], 14)}</span>`;
+    }).join("");
+  }
+}
+class SuggestionsElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const items = csv(this, "items", "总结要点,继续,给个例子");
+    this.innerHTML = items.map((t) => `<span class="rp-suggestion">${escapeHtml(t)}</span>`).join("");
+  }
+}
+class TypingElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `<span class="typing-el-dots"><span></span><span></span><span></span></span>`;
+  }
+}
+class ComposerElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const value = attr(this, "value");
+    const state = attr(this, "state", "idle");
+    const sendIcon = state === "streaming" ? icon("stop", 16) : icon("send", 16);
+    this.innerHTML = `<span class="composer-el-attach">${icon("paperclip", 16)}</span><span class="composer-el-input ${value ? "rp-value" : "rp-placeholder"}">${escapeHtml(value || attr(this, "placeholder", "给助手发消息…"))}</span><span class="composer-el-send ${state}">${sendIcon}</span>`;
+  }
+}
+class CitationElement extends HTMLElement {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const index = attr(this, "index", "1");
+    const title = attr(this, "title", ((_a = this.textContent) == null ? void 0 : _a.trim()) || "来源");
+    this.innerHTML = `<span class="rp-cite-idx">${escapeHtml(index)}</span><span class="rp-cite-title">${escapeHtml(title)}</span>`;
+  }
+}
+class TokenUsageElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    const used = intAttr(this, "used", 1840);
+    const limit = intAttr(this, "limit", 8e3);
+    const pct = limit ? Math.min(100, used / limit * 100) : 0;
+    this.innerHTML = `<span>${used.toLocaleString()} / ${limit.toLocaleString()} tokens</span><span class="rp-token-track"><span class="rp-token-fill" style="width:${pct}%"></span></span>`;
+  }
+}
+function registerAll() {
+  define("page-el", RpPage);
+  define("main-view", RpMainView);
+  define("annotation-el", RpAnnotation);
+  define("enum-el", RpEnum);
+  define("enum-item", RpEnumItem);
+  const pairs = [
+    // layout
+    ["viewport", ViewportElement],
+    ["layout", LayoutElement],
+    ["panel", PanelElement],
+    ["navigator", NavbarElement],
+    ["sidebar", SidebarElement],
+    ["logo", LogoElement],
+    ["split-pane", SplitPaneElement],
+    ["divider", DividerElement],
+    ["spacer", SpacerElement],
+    // controls
+    ["search", FieldElement],
+    ["input", FieldElement],
+    ["textarea", TextareaElement],
+    ["select", SelectElement],
+    ["button", ButtonElement],
+    ["button-group", GenericElement],
+    ["checkbox", CheckboxElement],
+    ["radio", RadioElement],
+    ["toggle", ToggleElement],
+    ["form", FormElement],
+    ["form-item", FormItemElement],
+    ["date-picker", DatePickerElement],
+    ["upload", UploadElement],
+    ["image-placeholder", ImagePlaceholderElement],
+    ["progress", ProgressElement],
+    ["slider", SliderElement],
+    ["range", RangeElement],
+    ["number-input", NumberInputElement],
+    ["rating", RatingElement],
+    ["pin-input", PinInputElement],
+    ["color-swatch", ColorSwatchElement],
+    ["autocomplete", AutocompleteElement],
+    // navigation
+    ["badge", BadgeElement],
+    ["avatar", AvatarElement],
+    ["list", ListElement],
+    ["list-item", ListItemElement],
+    ["tabs", TabsElement],
+    ["tab", TabElement],
+    ["pagination", PaginationElement],
+    ["steps", StepsElement],
+    ["breadcrumb", BreadcrumbElement],
+    ["segmented", SegmentedElement],
+    ["command-palette", CommandPaletteElement],
+    ["context-menu", ContextMenuElement],
+    ["menu", MenuElement],
+    ["menu-item", MenuItemElement],
+    ["toc", TocElement],
+    ["kbd", KbdElement],
+    // data display
+    ["table", TableElement],
+    ["table-row", TableRowElement],
+    ["bulk-action-bar", BulkActionBarElement],
+    ["empty", EmptyElement],
+    ["loading", LoadingElement],
+    ["alert", AlertElement],
+    ["toast", AlertElement],
+    ["dropdown", OverlayElement],
+    ["popover", OverlayElement],
+    ["tooltip", TooltipElement],
+    ["modal", ModalElement],
+    ["drawer", DrawerElement],
+    ["card", CardElement],
+    ["stat-card", StatCardElement],
+    ["tag", TagElement],
+    ["chip", ChipElement],
+    ["tree", TreeElement],
+    ["tree-item", TreeItemElement],
+    ["timeline", TimelineElement],
+    ["timeline-item", TimelineItemElement],
+    ["calendar", CalendarElement],
+    ["kanban", KanbanElement],
+    ["kanban-column", KanbanColumnElement],
+    ["kanban-card", KanbanCardElement],
+    ["code-block", CodeBlockElement],
+    ["diff", DiffElement],
+    ["image-grid", ImageGridElement],
+    ["key-value", KeyValueElement],
+    ["kv-row", KvRowElement],
+    ["accordion", AccordionElement],
+    ["accordion-item", AccordionItemElement],
+    ["banner", BannerElement],
+    ["skeleton", SkeletonElement],
+    ["countdown", CountdownElement],
+    ["result", ResultElement],
+    ["permission-gate", PermissionGateElement],
+    ["quota-bar", QuotaBarElement],
+    ["api-key", ApiKeyElement],
+    ["audit-row", AuditRowElement],
+    ["workflow-node", WorkflowNodeElement],
+    // iOS
+    ["ios-navbar", IosNavbarElement],
+    ["ios-tabbar", IosTabbarElement],
+    ["ios-list", IosListElement],
+    ["ios-list-item", IosListItemElement],
+    ["ios-action-sheet", IosActionSheetElement],
+    ["ios-alert", IosAlertElement],
+    ["ios-switch", IosSwitchElement],
+    ["ios-segmented", IosSegmentedElement],
+    ["ios-button", IosButtonElement],
+    ["ios-search", IosSearchElement],
+    ["ios-stepper", IosStepperElement],
+    // macOS
+    ["macos-window", MacWindowElement],
+    ["macos-toolbar", MacToolbarElement],
+    ["macos-menubar", MacMenubarElement],
+    ["macos-sidebar", MacSidebarElement],
+    ["macos-source-item", MacSourceItemElement],
+    ["macos-segmented", MacSegmentedElement],
+    ["macos-popover", MacPopoverElement],
+    ["macos-sheet", MacSheetElement],
+    ["macos-stepper", MacStepperElement],
+    ["macos-disclosure", MacDisclosureElement],
+    ["macos-table", MacTableElement],
+    // agent / conversational UI
+    ["chat", ChatElement],
+    ["user-message", UserMessageElement],
+    ["assistant-message", AssistantMessageElement],
+    ["system-message", SystemMessageElement],
+    ["tool-call", ToolCallElement],
+    ["agent-output", AgentOutputElement],
+    ["reasoning", ReasoningElement],
+    ["message-actions", MessageActionsElement],
+    ["suggestions", SuggestionsElement],
+    ["typing", TypingElement],
+    ["composer", ComposerElement],
+    ["citation", CitationElement],
+    ["token-usage", TokenUsageElement]
+  ];
+  for (const [suffix] of pairs) {
+    if (toComponentTag(suffix) === suffix && !suffix.includes("-"))
+      console.warn(`[rpui] registry tag "${suffix}" missing from RPML vocabulary`);
+  }
+  for (const [suffix, ctor] of pairs) {
+    define(toComponentTag(suffix), ctor);
+  }
+}
+registerAll();
+registerAll();
+const CHROME_CSS = `
+.rpml-gallery { display:grid; grid-template-columns:260px 1fr; height:100vh; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
+.rpml-gallery.collapsed { grid-template-columns:1fr; }
+.rpml-gallery.collapsed .rpml-gx-side { display:none; }
+.rpml-gx-side { display:flex; flex-direction:column; border-right:1px solid #e5e7eb; background:#fff; min-height:0; }
+.rpml-gx-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:16px; border-bottom:1px solid #e5e7eb; font-size:14px; font-weight:700; color:#111827; }
+.rpml-gx-head small { display:block; margin-top:3px; font-size:11px; font-weight:400; color:#6b7280; }
+.rpml-gx-toggle { flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px; margin:-3px -3px 0 0; padding:0; border:1px solid #e5e7eb; border-radius:7px; background:#fff; color:#6b7280; font-size:15px; line-height:1; cursor:pointer; }
+.rpml-gx-toggle:hover { background:#f3f4f6; color:#111827; }
+.rpml-gx-fab { position:fixed; top:12px; left:12px; z-index:50; display:none; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid #e5e7eb; border-radius:9px; background:#fff; color:#374151; font-size:17px; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); }
+.rpml-gx-fab:hover { background:#f3f4f6; color:#111827; }
+.rpml-gallery.collapsed .rpml-gx-fab { display:flex; }
+.rpml-gx-nav { flex:1; overflow-y:auto; padding:8px; }
+.rpml-gx-group { padding:10px 8px 3px; font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; }
+.rpml-gx-item { display:block; padding:6px 10px; border-radius:7px; font-size:13px; color:#374151; text-decoration:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.rpml-gx-item:hover { background:#f3f4f6; }
+.rpml-gx-item.active { background:#eff6ff; color:#1d4ed8; font-weight:650; }
+.rpml-gx-indent { padding-left:22px; }
+.rpml-gx-main { overflow:auto; min-height:0; background:#f4f6f8; }
+.rpml-gx-err { padding:40px; color:#dc2626; font-family:ui-monospace,Menlo,monospace; }
+`;
+function injectChrome() {
+  if (document.getElementById("rpml-gallery-style")) return;
+  const s = document.createElement("style");
+  s.id = "rpml-gallery-style";
+  s.textContent = CHROME_CSS;
+  document.head.appendChild(s);
+}
+function docTitle(source, fallback) {
+  const m = source.match(/<page\b[^>]*\btitle="([^"]*)"/i);
+  return (m == null ? void 0 : m[1]) || fallback;
+}
+function buildTree(docs) {
+  const root = { name: "", children: /* @__PURE__ */ new Map() };
+  for (const doc of docs) {
+    const parts = doc.path.split("/").filter(Boolean);
+    let node = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const isLeaf = i === parts.length - 1;
+      if (!node.children.has(part)) node.children.set(part, { name: part, children: /* @__PURE__ */ new Map() });
+      node = node.children.get(part);
+      if (isLeaf) {
+        node.path = doc.path;
+        node.title = docTitle(doc.source, part.replace(/\.rpml$/i, ""));
+      }
+    }
+  }
+  return root;
+}
+function basename(path) {
+  return path.split("/").pop() || path;
+}
+function mountGallery(docs, host = document.body) {
+  injectChrome();
+  const byPath = new Map(docs.map((d) => [d.path, d]));
+  const tree = buildTree(docs);
+  const root = document.createElement("div");
+  root.className = "rpml-gallery";
+  const side = document.createElement("aside");
+  side.className = "rpml-gx-side";
+  const count = docs.length;
+  side.innerHTML = `<div class="rpml-gx-head"><span>RPML 文档<small>${count} 个文件</small></span><button class="rpml-gx-toggle" type="button" title="收起侧边栏" aria-label="收起侧边栏">«</button></div>`;
+  const nav = document.createElement("nav");
+  nav.className = "rpml-gx-nav";
+  side.appendChild(nav);
+  const main = document.createElement("div");
+  main.className = "rpml-gx-main";
+  const fab = document.createElement("button");
+  fab.className = "rpml-gx-fab";
+  fab.type = "button";
+  fab.title = "展开侧边栏";
+  fab.setAttribute("aria-label", "展开侧边栏");
+  fab.textContent = "☰";
+  root.append(side, main, fab);
+  host.innerHTML = "";
+  host.appendChild(root);
+  side.querySelector(".rpml-gx-toggle").addEventListener("click", () => root.classList.add("collapsed"));
+  fab.addEventListener("click", () => root.classList.remove("collapsed"));
+  const links = /* @__PURE__ */ new Map();
+  function renderNav(node, depth) {
+    const entries = [...node.children.values()];
+    const leaves = entries.filter((e) => e.path).sort((a, b) => a.name.localeCompare(b.name));
+    const folders = entries.filter((e) => !e.path).sort((a, b) => a.name.localeCompare(b.name));
+    for (const leaf of leaves) {
+      const a = document.createElement("a");
+      a.className = depth > 0 ? "rpml-gx-item rpml-gx-indent" : "rpml-gx-item";
+      a.textContent = leaf.title || leaf.name;
+      a.href = `#${leaf.path}`;
+      links.set(leaf.path, a);
+      nav.appendChild(a);
+    }
+    for (const folder of folders) {
+      const g = document.createElement("div");
+      g.className = "rpml-gx-group";
+      g.textContent = folder.name;
+      nav.appendChild(g);
+      renderNav(folder, depth + 1);
+    }
+  }
+  renderNav(tree, 0);
+  function pickDefault() {
+    const idx = docs.find((d) => basename(d.path).replace(/\.rpml$/i, "").toLowerCase() === "index");
+    return (idx ?? docs[0]).path;
+  }
+  function show(path) {
+    const doc = byPath.get(path);
+    if (!doc) {
+      main.innerHTML = `<div class="rpml-gx-err">未找到文档：${path}</div>`;
+      return;
+    }
+    try {
+      main.innerHTML = "";
+      main.appendChild(parseToPage(doc.source));
+    } catch (e) {
+      main.innerHTML = `<div class="rpml-gx-err">RPML 解析错误：${e.message}</div>`;
+    }
+    links.forEach((a, p) => a.classList.toggle("active", p === path));
+  }
+  function route() {
+    const path = decodeURIComponent(location.hash.slice(1)) || pickDefault();
+    show(path);
+  }
+  nav.addEventListener("click", (e) => {
+    const a = e.target.closest("a.rpml-gx-item");
+    if (!a) return;
+    e.preventDefault();
+    const path = decodeURIComponent(a.hash.slice(1));
+    history.pushState(null, "", a.hash);
+    show(path);
+  });
+  window.addEventListener("popstate", route);
+  route();
+}
+const inlined = globalThis.__RPML_DOCS__;
+if (inlined && Array.isArray(inlined) && inlined.length) {
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => mountGallery(inlined));
+  else mountGallery(inlined);
+}
+export {
+  mountGallery
+};
+//# sourceMappingURL=gallery.js.map