@21stware/rpui 0.1.0 → 0.2.1

package/dist/rpui.js

@@ -82,9 +82,11 @@ rp-annotation rp-annotation, proto-annotation proto-annotation, rp-annotation pr
 .rp-annotation-marker { display:inline-grid; place-items:center; flex:0 0 auto; color:#fff; font-size:10px; font-weight:700; line-height:1; }
 .rp-annotation-marker.drop { width:22px; height:22px; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
 .rp-annotation-marker.drop > span { transform:rotate(45deg); }
-.rp-annotation-marker.circle { width:13px; height:13px; background:var(--rp-purple); border-radius:50%; }
-.rp-annotation-marker.triangle { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:13px solid var(--rp-success); }
-.rp-annotation-body { display:block; width:fit-content; max-width:920px; }
+.rp-annotation-marker.circle { width:16px; height:16px; background:var(--rp-purple); border-radius:50%; }
+.rp-annotation-marker.triangle { width:18px; height:16px; background:var(--rp-success); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
+.rp-annotation-marker.triangle > span { transform:translateY(2px); font-size:9px; }
+.rp-annotation-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); }
 .rp-annotation-body > :not(rp-annotation):not(proto-annotation):not(rp-enum):not(proto-enum) { max-width:820px; }
 .rp-annotation-pane rp-annotation, .rp-annotation-pane proto-annotation { max-width:none; }
 .rp-annotation-pane .rp-annotation-body { max-width:none; }
@@ -201,7 +203,7 @@ snap-card, rp-card { display:block; width:auto; min-width:220px; padding:14px; b
 .rp-card-image { display:grid; place-items:center; height:120px; margin:-14px -14px 12px; border-radius:10px 10px 0 0; background:#f3f4f6; color:#6b7280; }
 .rp-card-title { display:block; color:#111827; font-weight:750; }
 .rp-card-subtitle { display:block; margin-top:4px; color:#6b7280; font-size:13px; }
-.rp-card-footer { margin:12px -14px -14px; padding:10px 14px; border-top:1px solid var(--rp-border); background:#f9fafb; }
+.rp-card-footer { display:block; margin:12px -14px -14px; padding:10px 14px; border-top:1px solid var(--rp-border); background:#f9fafb; }
 snap-stat-card, rp-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; }
@@ -218,8 +220,8 @@ snap-checkbox[state="checked"] .rp-box, rp-checkbox[state="checked"] .rp-box, sn
 snap-checkbox[state="disabled"], rp-checkbox[state="disabled"], snap-radio[state="disabled"], rp-radio[state="disabled"] { opacity:.5; }
 snap-radio .rp-box, rp-radio .rp-box { border-radius:999px; }
 snap-toggle, rp-toggle { display:inline-flex; align-items:center; gap:8px; font-size:13px; }
-.rp-toggle-track { width:34px; height:20px; border-radius:999px; background:#d1d5db; padding:2px; }
-.rp-toggle-dot { width:16px; height:16px; border-radius:999px; background:#fff; transition:none; }
+.rp-toggle-track { display:flex; align-items:center; width:34px; height:20px; border-radius:999px; background:#d1d5db; padding:2px; }
+.rp-toggle-dot { display:block; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:none; }
 snap-toggle[state="on"] .rp-toggle-track, rp-toggle[state="on"] .rp-toggle-track { background:var(--rp-primary); }
 snap-toggle[state="on"] .rp-toggle-dot, rp-toggle[state="on"] .rp-toggle-dot { margin-left:14px; }
 snap-toggle[state="disabled"], rp-toggle[state="disabled"] { opacity:.5; }
@@ -250,6 +252,295 @@ snap-steps, rp-steps { display:flex; align-items:center; gap:8px; width:fit-cont
 .rp-step-sep { width:28px; height:1px; background:var(--rp-border); }
 snap-breadcrumb, rp-breadcrumb { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }
 .rp-breadcrumb-current { color:#111827; font-weight:650; }
+
+/* --- data input --- */
+snap-slider, rp-slider { display:inline-flex; align-items:center; gap:10px; width:220px; }
+.rp-slider-track { position:relative; flex:1; height:4px; border-radius:999px; background:#e5e7eb; }
+.rp-slider-fill { position:absolute; height:100%; border-radius:999px; background:var(--rp-primary); }
+.rp-slider-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); box-shadow:0 1px 3px rgba(0,0,0,.2); }
+.rp-slider-value { font-size:12px; color:#374151; min-width:24px; }
+snap-range, rp-range { display:inline-flex; align-items:center; width:220px; }
+snap-number-input, rp-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; }
+snap-rating, rp-rating { display:inline-flex; gap:2px; color:#d1d5db; }
+.rp-star.filled { color:#f59e0b; }
+snap-pin-input, rp-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); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
+snap-color-swatch, rp-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; }
+snap-autocomplete, rp-autocomplete { 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; box-shadow:0 10px 18px rgba(15,23,42,.08); }
+.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 --- */
+snap-chip, rp-chip { 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; }
+snap-tree, rp-tree { display:flex; flex-direction:column; gap:1px; width:fit-content; min-width:240px; }
+.rp-tree-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); }
+.rp-tree-row.selected { background:#eff6ff; color:#1d4ed8; font-weight:650; }
+.rp-tree-spacer { display:inline-block; width:12px; }
+.rp-tree-label { flex:1; }
+snap-timeline, rp-timeline { display:flex; flex-direction:column; width:fit-content; min-width:260px; }
+snap-timeline-item, rp-timeline-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }
+snap-timeline-item:not(:last-child)::before, rp-timeline-item:not(:last-child)::before { content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--rp-border); }
+.rp-timeline-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; }
+.rp-timeline-dot.active { border-color:var(--rp-primary); background:var(--rp-primary); }
+.rp-timeline-dot.done { border-color:var(--rp-success); background:var(--rp-success); }
+.rp-timeline-dot.error { border-color:var(--rp-danger); background:var(--rp-danger); }
+.rp-timeline-main { flex:1; }
+.rp-timeline-head { display:flex; align-items:baseline; gap:8px; }
+.rp-timeline-label { font-weight:650; color:#111827; font-size:13px; }
+.rp-timeline-time { font-size:12px; color:#9ca3af; }
+.rp-timeline-content { font-size:13px; color:#6b7280; margin-top:2px; }
+snap-calendar, rp-calendar { 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; }
+snap-kanban, rp-kanban { display:flex; gap:12px; width:fit-content; align-items:flex-start; }
+snap-kanban-column, rp-kanban-column { display:flex; flex-direction:column; width:200px; padding:10px; border-radius:10px; background:#f3f4f6; }
+.rp-kanban-head { display:flex; align-items:center; justify-content:space-between; font-weight:650; font-size:13px; margin-bottom:8px; color:#374151; }
+.rp-kanban-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e5e7eb; font-size:11px; }
+.rp-kanban-body { display:flex; flex-direction:column; gap:8px; }
+snap-kanban-card, rp-kanban-card { display:block; padding:10px; border-radius:8px; background:#fff; border:1px solid var(--rp-border); }
+.rp-kanban-card-title { display:block; font-size:13px; color:#111827; }
+.rp-kanban-card-tag { display:inline-block; margin-top:6px; padding:1px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; }
+snap-code-block, rp-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; }
+snap-diff, rp-diff { 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; }
+.rp-diff-line { display:flex; align-items:center; gap:10px; padding:2px 10px; }
+.rp-diff-line.add { background:#dcfce7; }
+.rp-diff-line.del { background:#fee2e2; }
+.rp-diff-sign { width:10px; color:#6b7280; }
+.rp-diff-line.add .rp-code-bar { background:#86efac; }
+.rp-diff-line.del .rp-code-bar { background:#fca5a5; }
+.rp-diff-line.ctx .rp-code-bar { background:#e5e7eb; }
+snap-image-grid, rp-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; }
+snap-key-value, rp-key-value { display:flex; flex-direction:column; width:fit-content; min-width:240px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }
+snap-kv-row, rp-kv-row { display:flex; border-bottom:1px solid var(--rp-border); }
+snap-kv-row:last-child, rp-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; }
+snap-accordion, rp-accordion { display:flex; flex-direction:column; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }
+snap-accordion-item, rp-accordion-item { display:block; border-bottom:1px solid var(--rp-border); }
+snap-accordion-item:last-child, rp-accordion-item:last-child { border-bottom:0; }
+.rp-accordion-head { display:flex; align-items:center; gap:8px; padding:11px 14px; font-weight:650; font-size:13px; color:#111827; }
+.rp-accordion-body { padding:0 14px 14px 36px; font-size:13px; color:#6b7280; }
+snap-banner, rp-banner { 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; }
+snap-banner[type="success"], rp-banner[type="success"] { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
+snap-banner[type="warning"], rp-banner[type="warning"] { background:#fffbeb; color:#92400e; border-color:#fde68a; }
+snap-banner[type="error"], rp-banner[type="error"] { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
+.rp-banner-text { flex:1; }
+snap-skeleton, rp-skeleton { 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; }
+snap-countdown, rp-countdown { 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; }
+snap-result, rp-result { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:280px; padding:32px; text-align:center; }
+.rp-result-icon.success { color:var(--rp-success); }
+.rp-result-icon.error { color:var(--rp-danger); }
+.rp-result-icon.empty { color:#9ca3af; }
+.rp-result-title { font-size:16px; font-weight:700; color:#111827; }
+.rp-result-desc { font-size:13px; color:#6b7280; }
+snap-permission-gate, rp-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; }
+snap-quota-bar, rp-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); }
+snap-api-key, rp-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; }
+snap-audit-row, rp-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; }
+snap-workflow-node, rp-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 --- */
+snap-segmented, rp-segmented { 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; box-shadow:0 1px 3px rgba(0,0,0,.08); }
+snap-command-palette, rp-command-palette { display:block; width:520px; border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); 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; }
+snap-context-menu, rp-context-menu, snap-menu, rp-menu { display:inline-flex; flex-direction:column; min-width:180px; padding:5px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.12); }
+.rp-menu-item, snap-menu-item, rp-menu-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; font-size:13px; color:#374151; }
+.rp-menu-item.danger, snap-menu-item.danger, rp-menu-item.danger { color:var(--rp-danger); }
+.rp-menu-item.disabled, snap-menu-item.disabled, rp-menu-item.disabled { opacity:.45; }
+.rp-menu-label { flex:1; }
+.rp-menu-shortcut { color:#9ca3af; font-size:12px; }
+snap-toc, rp-toc { display:flex; flex-direction:column; gap:2px; width:fit-content; min-width:160px; border-left:2px solid var(--rp-border); }
+.rp-toc-item { padding:4px 12px; font-size:13px; color:#6b7280; border-left:2px solid transparent; margin-left:-2px; }
+.rp-toc-item.active { color:var(--rp-primary); border-left-color:var(--rp-primary); font-weight:650; }
+snap-kbd, rp-kbd { display:inline-flex; align-items:center; gap:3px; }
+.rp-kbd-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; }
+.rp-kbd-plus { color:#9ca3af; font-size:11px; }
+snap-split-pane, rp-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; }
+snap-split-pane > *, rp-split-pane > * { padding:14px; }
+snap-split-pane > *:not(:last-child), rp-split-pane > *:not(:last-child) { border-right:1px solid var(--rp-border); }
+snap-divider, rp-divider { display:block; height:1px; background:var(--rp-border); margin:12px 0; }
+snap-divider.rp-divider-v, rp-divider.rp-divider-v { display:inline-block; width:1px; height:auto; align-self:stretch; margin:0 12px; }
+snap-spacer, rp-spacer { display:block; height:var(--snap-size,16px); }
+
+/* --- iOS --- */
+snap-ios-navbar, rp-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; }
+.rp-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; }
+snap-ios-tabbar, rp-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; }
+snap-ios-list, rp-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; }
+.rp-ios-list-header { padding:6px 16px; font-size:13px; color:#6d6d72; background:#f2f2f7; text-transform:none; }
+snap-ios-list-item, rp-ios-list-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid #e5e5ea; font-size:15px; color:#000; }
+snap-ios-list-item:last-child, rp-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; }
+snap-ios-action-sheet, rp-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; }
+snap-ios-alert, rp-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; }
+.rp-ios-alert-body { padding:18px 16px 14px; text-align:center; }
+.rp-ios-alert-title { font-size:17px; font-weight:600; color:#000; }
+.rp-ios-alert-msg { margin-top:3px; font-size:13px; color:#000; }
+.rp-ios-alert-actions { display:flex; border-top:1px solid #d1d1d6; }
+.rp-ios-alert-btn { flex:1; padding:11px; text-align:center; font-size:17px; color:#007aff; }
+.rp-ios-alert-btn.primary { font-weight:600; }
+.rp-ios-alert-btn:not(:last-child) { border-right:1px solid #d1d1d6; }
+snap-ios-switch, rp-ios-switch { display:inline-flex; align-items:center; gap:8px; font-family:-apple-system,sans-serif; font-size:15px; }
+.rp-ios-switch-track { width:51px; height:31px; border-radius:999px; background:#34c759; padding:2px; }
+.rp-ios-switch-dot { display:block; width:27px; height:27px; border-radius:50%; background:#fff; margin-left:20px; box-shadow:0 2px 4px rgba(0,0,0,.2); }
+snap-ios-segmented, rp-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; box-shadow:0 1px 3px rgba(0,0,0,.12); }
+snap-ios-button, rp-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; }
+snap-ios-button[variant="tinted"], rp-ios-button[variant="tinted"] { background:rgba(0,122,255,.15); color:#007aff; }
+snap-ios-button[variant="plain"], rp-ios-button[variant="plain"] { background:transparent; color:#007aff; }
+snap-ios-search, rp-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; }
+snap-ios-stepper, rp-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 --- */
+snap-macos-window, rp-macos-window { display:block; width:fit-content; min-width:480px; border-radius:10px; overflow:hidden; border:1px solid #d1d1d6; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.25); 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; }
+snap-macos-toolbar, rp-macos-toolbar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#f6f6f6; border-bottom:1px solid #d1d1d6; }
+snap-macos-menubar, rp-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; }
+snap-macos-sidebar, rp-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; }
+snap-macos-source-item, rp-macos-source-item { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px; font-size:13px; color:#3c3c43; }
+snap-macos-source-item.selected, rp-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; }
+snap-macos-segmented, rp-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; }
+snap-macos-popover, rp-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; box-shadow:0 12px 40px rgba(0,0,0,.2); }
+.rp-mac-pop-title { font-weight:600; font-size:13px; margin-bottom:8px; }
+snap-macos-sheet, rp-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; }
+snap-macos-stepper, rp-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; }
+snap-macos-disclosure, rp-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; }
+snap-macos-table, rp-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) --- */
+snap-chat, rp-chat { display:flex; flex-direction:column; gap:24px; width:fit-content; min-width:520px; max-width:680px; }
+snap-user-message, rp-user-message, snap-assistant-message, rp-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; }
+snap-user-message .rp-msg-content, rp-user-message .rp-msg-content { color:#111827; }
+snap-system-message, rp-system-message { display:flex; justify-content:center; }
+.rp-sysmsg-line { padding:3px 12px; border-radius:999px; background:#f3f4f6; color:#6b7280; font-size:12px; }
+snap-tool-call, rp-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; }
+snap-agent-output, rp-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; }
+snap-reasoning, rp-reasoning { 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; }
+snap-message-actions, rp-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; }
+snap-suggestions, rp-suggestions { 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; }
+snap-typing, rp-typing { display:flex; align-items:center; }
+.rp-typing-dots { display:inline-flex; gap:4px; }
+.rp-typing-dots > span { width:7px; height:7px; border-radius:50%; background:#c7c7cc; }
+snap-composer, rp-composer { 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; }
+.rp-composer-attach { display:inline-flex; color:#9ca3af; }
+.rp-composer-input { flex:1; font-size:14px; }
+.rp-composer-send { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#111827; color:#fff; }
+.rp-composer-send.streaming { background:var(--rp-danger); }
+snap-citation, rp-citation { 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; }
+snap-token-usage, rp-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;
@@ -259,10 +550,18 @@ function injectStyle() {
   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) return;
+    if (this.dataset.rpReady) {
+      this.setupSlicePins();
+      return;
+    }
     this.dataset.rpReady = "true";
     const existing = Array.from(this.childNodes);
     const depth = this.annotationDepth();
@@ -283,7 +582,8 @@ class RpAnnotation extends HTMLElement {
     const marker = document.createElement("span");
     const kind = id ? "drop" : depth <= 1 ? "circle" : "triangle";
     marker.className = `rp-annotation-marker ${kind}`;
-    marker.innerHTML = kind === "drop" ? `<span>${escapeHtml(id)}</span>` : "";
+    const localIndex = id || sectionPath.split("-").pop() || "";
+    marker.innerHTML = `<span>${escapeHtml(localIndex)}</span>`;
     const head = document.createElement("div");
     head.className = "rp-annotation-head";
     head.append(marker);
@@ -301,6 +601,47 @@ class RpAnnotation extends HTMLElement {
     body.className = "rp-annotation-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 rp-main-view pins top-level regions.
+  setupSlicePins() {
+    var _a;
+    const body = this.querySelector(":scope > .rp-annotation-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("rp-annotation, proto-annotation") !== 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;
@@ -542,6 +883,24 @@ class LogoElement extends HTMLElement {
     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("rp-divider-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"/>',
@@ -572,7 +931,39 @@ const iconPaths = {
   "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"/>'
+  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";
@@ -709,6 +1100,83 @@ class ProgressElement extends HTMLElement {
     this.innerHTML = kind === "circle" ? `${escapeHtml(value)}%` : '<span class="rp-progress-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="rp-slider-track"><span class="rp-slider-fill" style="width:${pct}%"></span><span class="rp-slider-thumb" style="left:${pct}%"></span></span>${this.hasAttribute("show-value") ? `<span class="rp-slider-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="rp-slider-track"><span class="rp-slider-fill" style="left:${l}%;width:${h - l}%"></span><span class="rp-slider-thumb" style="left:${l}%"></span><span class="rp-slider-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();
@@ -806,6 +1274,73 @@ class BreadcrumbElement extends HTMLElement {
     this.innerHTML = items.map((item, i) => `<span class="${i === items.length - 1 ? "rp-breadcrumb-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="rp-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="rp-menu-label">${escapeHtml(label)}</span>${shortcut ? `<span class="rp-menu-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="rp-toc-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="rp-kbd-key">${escapeHtml(k)}</kbd>`).join('<span class="rp-kbd-plus">+</span>');
+  }
+}
 function sampleCell(c, j, i) {
   const lower = c.toLowerCase();
   if (c.includes("发件") || lower.includes("name")) return ["张三", "李四", "系统通知", "运营助手", "王五", "安全团队"][i % 6];
@@ -958,6 +1493,691 @@ class TagElement extends HTMLElement {
     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="rp-tree-spacer"></span>';
+    this.style.setProperty("--tree-level", String(level));
+    this.innerHTML = `<span class="rp-tree-row${attr(this, "state") === "selected" ? " selected" : ""}">${caret}${icon(ic || (expandable ? "folder" : "file"), 14)}<span class="rp-tree-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="rp-timeline-dot ${state}"></span>`;
+    const head = `<div class="rp-timeline-head"><span class="rp-timeline-label">${escapeHtml(label)}</span>${time ? `<span class="rp-timeline-time">${escapeHtml(time)}</span>` : ""}</div>`;
+    const body = document.createElement("div");
+    body.className = "rp-timeline-content";
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = `${dot}<div class="rp-timeline-main">${head}</div>`;
+    this.querySelector(".rp-timeline-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 = "rp-kanban-head";
+    head.innerHTML = `<span>${escapeHtml(title)}</span>${count ? `<span class="rp-kanban-count">${escapeHtml(count)}</span>` : ""}`;
+    const body = document.createElement("div");
+    body.className = "rp-kanban-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="rp-kanban-card-title">${escapeHtml(label)}</span>${tag ? `<span class="rp-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="rp-diff-line ${kind}"><span class="rp-diff-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 = "rp-accordion-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 = "rp-accordion-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="rp-banner-text"><strong>${escapeHtml(attr(this, "title", "通知"))}</strong>${attr(this, "message") ? ` ${escapeHtml(attr(this, "message"))}` : ""}</span>${this.hasAttribute("has-action") ? '<snap-button label="查看" variant="link"></snap-button>' : ""}${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="rp-skeleton-line" style="width:70%"></span><span class="rp-skeleton-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="rp-skeleton-line" style="width:60%"></span></span>').join("");
+    else this.innerHTML = '<span class="rp-skeleton-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="rp-result-icon ${status}">${icon(ic, 40)}</span><span class="rp-result-title">${escapeHtml(attr(this, "title", "操作成功"))}</span><span class="rp-result-desc">${escapeHtml(attr(this, "description", ""))}</span>${this.hasAttribute("has-action") ? '<snap-button label="返回" variant="primary"></snap-button>' : ""}`;
+  }
+}
+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="rp-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 = "rp-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="rp-ios-alert-body"><div class="rp-ios-alert-title">${escapeHtml(title)}</div>${message ? `<div class="rp-ios-alert-msg">${escapeHtml(message)}</div>` : ""}</div><div class="rp-ios-alert-actions">${actions.map((a, i) => `<span class="rp-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="rp-ios-switch-label">${escapeHtml(label)}</span>` : ""}<span class="rp-ios-switch-track"><span class="rp-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"><snap-button label="取消"></snap-button><snap-button label="完成" variant="primary"></snap-button></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="rp-typing-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="rp-composer-attach">${icon("paperclip", 16)}</span><span class="rp-composer-input ${value ? "rp-value" : "rp-placeholder"}">${escapeHtml(value || attr(this, "placeholder", "给助手发消息…"))}</span><span class="rp-composer-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("rp-page", RpPage);
   define("proto-page", RpPage);
@@ -969,7 +2189,137 @@ function registerAll() {
   define("proto-enum", RpEnum);
   define("rp-enum-item", RpEnumItem);
   define("proto-enum-item", RpEnumItem);
-  const pairs = [["viewport", ViewportElement], ["layout", LayoutElement], ["panel", PanelElement], ["navbar", NavbarElement], ["sidebar", SidebarElement], ["logo", LogoElement], ["search", FieldElement], ["input", FieldElement], ["textarea", TextareaElement], ["select", SelectElement], ["badge", BadgeElement], ["avatar", AvatarElement], ["list", ListElement], ["list-item", ListItemElement], ["tabs", TabsElement], ["tab", TabElement], ["button", ButtonElement], ["button-group", GenericElement], ["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], ["checkbox", CheckboxElement], ["radio", RadioElement], ["toggle", ToggleElement], ["form", FormElement], ["form-item", FormItemElement], ["date-picker", DatePickerElement], ["upload", UploadElement], ["image-placeholder", ImagePlaceholderElement], ["progress", ProgressElement], ["pagination", PaginationElement], ["steps", StepsElement], ["breadcrumb", BreadcrumbElement]];
+  const pairs = [
+    // layout
+    ["viewport", ViewportElement],
+    ["layout", LayoutElement],
+    ["panel", PanelElement],
+    ["navbar", 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, ctor] of pairs) {
     define(`snap-${suffix}`, ctor);
     define(`rp-${suffix}`, ctor);