@21stware/rpui 0.1.0

package/dist/rpui.js

@@ -0,0 +1,982 @@
+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);
+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 === "rp-annotation" || tag === "proto-annotation";
+}
+function isViewportNode(node) {
+  if (!(node instanceof HTMLElement)) return false;
+  const tag = node.tagName.toLowerCase();
+  return tag === "rp-viewport" || tag === "snap-viewport";
+}
+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; }
+rp-page, proto-page { display:block; min-height:100vh; padding:32px 40px; overflow:auto; }
+.rp-page-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:100vh; align-items:start; }
+.rp-page-main { display:flex; flex-direction:column; min-width:0; overflow:visible; }
+.rp-page-header { flex:0 0 auto; width:fit-content; max-width:none; margin:0 0 22px; }
+.rp-page-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
+.rp-page-title { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.02em; }
+.rp-page-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; }
+.rp-page-description { margin:10px 0 0; color:#374151; line-height:1.6; font-size:14px; }
+.rp-page-body { flex:0 1 auto; display:block; width:fit-content; max-width:100%; min-height:0; overflow:visible; }
+.rp-annotation-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; }
+.rp-annotation-pane-inner { padding:4px 12px 24px 6px; }
+rp-main-view, proto-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; }
+rp-annotation, proto-annotation { display:block; width:fit-content; max-width:980px; margin:14px 0; line-height:1.65; color:#1f2937; font-size:14px; }
+rp-annotation rp-annotation, proto-annotation proto-annotation, rp-annotation proto-annotation, proto-annotation rp-annotation { margin:10px 0 8px 22px; }
+.rp-annotation-head { display:flex; align-items:center; gap:8px; margin:0 0 4px; width:fit-content; }
+.rp-annotation-title { font-weight:700; color:#111827; }
+.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-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; }
+.rp-annotation-pane .rp-annotation-body > :not(rp-annotation):not(proto-annotation):not(rp-enum):not(proto-enum) { max-width:420px; }
+.rp-annotation-body p { margin:0 0 8px; }
+rp-enum, proto-enum { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; width:fit-content; margin:8px 0 12px; }
+.rp-annotation-pane rp-enum, .rp-annotation-pane proto-enum { flex-wrap:wrap; }
+rp-enum-item, proto-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; }
+.rp-enum-label { display:flex; align-items:flex-start; gap:6px; padding:5px 9px 4px; font-size:12px; font-weight:650; color:#374151; }
+.rp-enum-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; }
+.rp-enum-label-text { display:block; }
+.rp-enum-description { display:block; margin-top:2px; font-size:11px; line-height:1.35; font-weight:400; color:var(--rp-muted); }
+.rp-enum-content { display:block; width:fit-content; padding:8px; }
+.rp-annotation-title { font-weight:700; color:#111827; cursor:pointer; }
+.rp-annotation-title:hover { color:var(--rp-primary); }
+.rp-section-focus { outline:2px dashed var(--rp-primary); outline-offset:4px; border-radius:4px; }
+snap-viewport, rp-viewport { display:flex; flex-direction:column; width:var(--snap-width,1440px); height:var(--snap-height,900px); background:#f8fafc; overflow:hidden; color:#111827; }
+snap-layout, rp-layout { 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; }
+snap-layout > *, rp-layout > * { min-width:0; }
+snap-viewport snap-layout, rp-viewport rp-layout { width:100%; }
+snap-viewport > snap-layout, rp-viewport > rp-layout { flex:1 1 auto; min-height:0; }
+snap-viewport > snap-navbar, rp-viewport > rp-navbar { flex:0 0 auto; }
+snap-panel, rp-panel { 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); }
+snap-viewport snap-panel, rp-viewport rp-panel { width:auto; min-width:0; }
+snap-panel[elevation="1"], rp-panel[elevation="1"] { box-shadow:0 4px 16px rgba(15,23,42,.06); }
+snap-panel[elevation="2"], rp-panel[elevation="2"] { box-shadow:var(--rp-shadow); }
+snap-navbar, rp-navbar { display:flex; align-items:center; gap:14px; height:var(--snap-height,64px); padding:0 24px; background:#fff; border-bottom:1px solid var(--rp-border); }
+snap-sidebar, rp-sidebar { display:block; width:var(--snap-width,260px); min-height:0; background:#fff; border-right:1px solid var(--rp-border); padding:14px; }
+snap-viewport snap-sidebar, rp-viewport rp-sidebar { min-height:100%; }
+snap-sidebar[collapsed], rp-sidebar[collapsed] { width:72px; }
+snap-logo, rp-logo { 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; }
+snap-search, rp-search, snap-input, rp-input, snap-date-picker, rp-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; }
+snap-textarea, rp-textarea { 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; }
+snap-search[state="focus"], rp-search[state="focus"], snap-input[state="focus"], rp-input[state="focus"], snap-textarea[state="focus"], rp-textarea[state="focus"], snap-date-picker[state="focus"], rp-date-picker[state="focus"] { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
+snap-search[state="filled"], rp-search[state="filled"], snap-input[state="filled"], rp-input[state="filled"], snap-textarea[state="filled"], rp-textarea[state="filled"], snap-date-picker[state="filled"], rp-date-picker[state="filled"] { border-color:#93c5fd; background:#f8fbff; }
+snap-search[state="error"], rp-search[state="error"], snap-input[state="error"], rp-input[state="error"], snap-textarea[state="error"], rp-textarea[state="error"], snap-date-picker[state="error"], rp-date-picker[state="error"] { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }
+snap-search[state="disabled"], rp-search[state="disabled"], snap-input[state="disabled"], rp-input[state="disabled"], snap-textarea[state="disabled"], rp-textarea[state="disabled"], snap-date-picker[state="disabled"], rp-date-picker[state="disabled"] { opacity:.55; background:#f3f4f6; }
+snap-input[label], rp-input[label], snap-date-picker[label], rp-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; }
+snap-input[label][state="focus"], rp-input[label][state="focus"], snap-input[label][state="filled"], rp-input[label][state="filled"], snap-input[label][state="error"], rp-input[label][state="error"], snap-date-picker[label][state="focus"], rp-date-picker[label][state="focus"], snap-date-picker[label][state="filled"], rp-date-picker[label][state="filled"], snap-date-picker[label][state="error"], rp-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; }
+snap-input[state="focus"] .rp-field-control, rp-input[state="focus"] .rp-field-control, snap-date-picker[state="focus"] .rp-field-control, rp-date-picker[state="focus"] .rp-field-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
+snap-input[state="filled"] .rp-field-control, rp-input[state="filled"] .rp-field-control, snap-date-picker[state="filled"] .rp-field-control, rp-date-picker[state="filled"] .rp-field-control { border-color:#93c5fd; background:#f8fbff; }
+snap-input[state="error"] .rp-field-control, rp-input[state="error"] .rp-field-control, snap-date-picker[state="error"] .rp-field-control, rp-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; }
+snap-select, rp-select { display:inline-block; width:var(--snap-width,280px); }
+.rp-select-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; }
+snap-select[state="expanded"] .rp-select-control, rp-select[state="expanded"] .rp-select-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
+snap-select[state="disabled"], rp-select[state="disabled"] { opacity:.55; }
+.rp-select-value { flex:1 1 auto; min-width:0; }
+.rp-select-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); }
+snap-select[state="expanded"] .rp-select-options, rp-select[state="expanded"] .rp-select-options { display:grid; gap:2px; }
+.rp-select-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }
+.rp-select-option.selected { background:#eff6ff; color:#1d4ed8; font-weight:700; }
+snap-badge, rp-badge { 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; }
+snap-avatar, rp-avatar { 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; }
+snap-list, rp-list { display:flex; flex-direction:column; gap:4px; width:100%; }
+snap-list-item, rp-list-item { display:flex; align-items:center; gap:8px; width:100%; min-width:180px; height:36px; padding:0 10px; border-radius:8px; color:#374151; }
+snap-list-item[state="selected"], rp-list-item[state="selected"] { background:#eff6ff; color:#1d4ed8; font-weight:700; }
+snap-list-item[state="disabled"], rp-list-item[state="disabled"] { opacity:.5; }
+.rp-list-label { flex:1 1 auto; }
+.rp-list-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; }
+snap-tabs, rp-tabs { display:flex; gap:6px; border-bottom:1px solid var(--rp-border); margin-bottom:12px; width:fit-content; }
+snap-tab, rp-tab { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; }
+snap-tab.rp-tab-active, rp-tab.rp-tab-active { color:var(--rp-primary); border-bottom-color:var(--rp-primary); font-weight:700; }
+snap-button, rp-button { 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; }
+snap-button[size="sm"], rp-button[size="sm"] { min-height:28px; padding:0 9px; font-size:12px; border-radius:6px; }
+snap-button[size="lg"], rp-button[size="lg"] { min-height:40px; padding:0 16px; font-size:14px; }
+snap-button[variant="primary"], rp-button[variant="primary"] { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }
+snap-button[variant="secondary"], rp-button[variant="secondary"] { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }
+snap-button[variant="danger"], rp-button[variant="danger"] { border-color:var(--rp-danger); color:var(--rp-danger); }
+snap-button[variant="link"], rp-button[variant="link"] { border-color:transparent; background:transparent; color:var(--rp-primary); padding-inline:2px; }
+snap-button[variant="ghost"], rp-button[variant="ghost"] { border-color:transparent; background:transparent; }
+snap-button[state="disabled"], rp-button[state="disabled"], snap-button[disabled], rp-button[disabled] { opacity:.5; }
+snap-button-group, rp-button-group { display:inline-flex; gap:0; width:fit-content; }
+snap-button-group > snap-button, rp-button-group > rp-button { border-radius:0; margin-left:-1px; }
+snap-button-group > :first-child { border-radius:8px 0 0 8px; margin-left:0; }
+snap-button-group > :last-child { border-radius:0 8px 8px 0; }
+snap-table, rp-table { 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; }
+snap-viewport snap-table, rp-viewport rp-table { width:100%; max-width:none; }
+.rp-table-row { display:table-row; }
+.rp-table-cell { display:table-cell; padding:11px 12px; border-bottom:1px solid var(--rp-border); font-size:13px; vertical-align:middle; white-space:nowrap; }
+.rp-table-head .rp-table-cell { background:#f9fafb; color:#6b7280; font-size:12px; font-weight:750; }
+.rp-table-row:last-child .rp-table-cell { border-bottom:0; }
+snap-table-row, rp-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; }
+snap-table-row > span, rp-table-row > span { padding:10px 12px; font-size:13px; }
+snap-table-row[state="unread"], rp-table-row[state="unread"] { background:#eff6ff; font-weight:700; }
+snap-table-row[state="selected"], rp-table-row[state="selected"] { outline:2px solid rgba(37,99,235,.35); background:#f8fbff; }
+snap-table-row[state="highlighted"], rp-table-row[state="highlighted"] { background:#fffbeb; }
+snap-table-row[state="disabled"], rp-table-row[state="disabled"] { opacity:.5; }
+snap-bulk-action-bar, rp-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; }
+snap-empty, rp-empty { 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; }
+.rp-empty-title { color:#111827; font-weight:700; }
+.rp-empty-desc { font-size:13px; }
+snap-loading, rp-loading { display:grid; gap:8px; min-width:260px; color:var(--rp-primary); }
+.rp-skeleton-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; }
+snap-alert, rp-alert, snap-toast, rp-toast { 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; }
+snap-alert[type="info"], rp-alert[type="info"], snap-toast[type="info"], rp-toast[type="info"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }
+snap-alert[type="success"], rp-alert[type="success"], snap-toast[type="success"], rp-toast[type="success"] { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
+snap-alert[type="warning"], rp-alert[type="warning"], snap-toast[type="warning"], rp-toast[type="warning"] { border-color:#fde68a; background:#fffbeb; color:#92400e; }
+snap-alert[type="error"], rp-alert[type="error"], snap-toast[type="error"], rp-toast[type="error"] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
+snap-dropdown, rp-dropdown, snap-popover, rp-popover { 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); }
+snap-tooltip, rp-tooltip { 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; }
+snap-modal, rp-modal { 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; }
+snap-drawer, rp-drawer { 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); }
+.rp-modal-head, .rp-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--rp-border); font-weight:750; }
+.rp-modal-body, .rp-drawer-body { padding:16px; }
+.rp-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--rp-border); background:#f9fafb; }
+snap-card, rp-card { display:block; width:auto; min-width:220px; padding:14px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }
+.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; }
+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; }
+.rp-stat-change { font-size:12px; font-weight:700; }
+snap-stat-card[trend="up"] .rp-stat-change, rp-stat-card[trend="up"] .rp-stat-change { color:var(--rp-success); }
+snap-stat-card[trend="down"] .rp-stat-change, rp-stat-card[trend="down"] .rp-stat-change { color:var(--rp-danger); }
+snap-tag, rp-tag { 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; }
+snap-tag[color="green"], rp-tag[color="green"] { background:#dcfce7; color:#166534; }
+snap-tag[color="orange"], rp-tag[color="orange"] { background:#ffedd5; color:#9a3412; }
+snap-tag[color="red"], rp-tag[color="red"] { background:#fee2e2; color:#991b1b; }
+snap-checkbox, rp-checkbox, snap-radio, rp-radio { 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; }
+snap-checkbox[state="checked"] .rp-box, rp-checkbox[state="checked"] .rp-box, snap-radio[state="checked"] .rp-box, rp-radio[state="checked"] .rp-box, snap-checkbox[state="indeterminate"] .rp-box, rp-checkbox[state="indeterminate"] .rp-box { background:var(--rp-primary); border-color:var(--rp-primary); }
+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; }
+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; }
+snap-form, rp-form { display:grid; gap:12px; width:fit-content; }
+snap-form[layout="horizontal"], rp-form[layout="horizontal"] { grid-template-columns:max-content 1fr; align-items:start; }
+snap-form-item, rp-form-item { display:grid; gap:6px; width:fit-content; }
+.rp-form-label { color:#374151; font-size:12px; font-weight:700; }
+.rp-form-label.required::after { content:" *"; color:var(--rp-danger); }
+.rp-form-error { color:var(--rp-danger); font-size:12px; }
+snap-upload, rp-upload { 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; }
+snap-upload[state="has-file"], rp-upload[state="has-file"] { justify-items:start; border-style:solid; color:#374151; }
+snap-upload[state="uploading"], rp-upload[state="uploading"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }
+snap-image-placeholder, rp-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; }
+snap-progress, rp-progress { display:block; width:180px; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
+snap-progress[kind="circle"], rp-progress[kind="circle"], snap-progress[style="circle"], rp-progress[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; }
+.rp-progress-bar { display:block; height:100%; width:var(--progress,40%); background:var(--rp-primary); }
+snap-progress[status="success"] .rp-progress-bar, rp-progress[status="success"] .rp-progress-bar { background:var(--rp-success); }
+snap-progress[status="error"] .rp-progress-bar, rp-progress[status="error"] .rp-progress-bar { background:var(--rp-danger); }
+snap-pagination, rp-pagination { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:13px; }
+.rp-page-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; }
+.rp-page-btn.active { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; font-weight:750; }
+snap-steps, rp-steps { 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); }
+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; }
+`;
+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 {
+  connectedCallback() {
+    var _a;
+    injectStyle();
+    if (this.dataset.rpReady) 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() === "rp-annotation" || el.tagName.toLowerCase() === "proto-annotation"
+      ) : [];
+      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 = `rp-annotation-marker ${kind}`;
+    marker.innerHTML = kind === "drop" ? `<span>${escapeHtml(id)}</span>` : "";
+    const head = document.createElement("div");
+    head.className = "rp-annotation-head";
+    head.append(marker);
+    const title = document.createElement("span");
+    title.className = "rp-annotation-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 = "rp-annotation-body";
+    existing.forEach((n) => body.appendChild(n));
+    this.append(head, body);
+  }
+  annotationDepth() {
+    let d = 0;
+    let p = this.parentElement;
+    while (p) {
+      if (p.tagName.toLowerCase() === "rp-annotation" || p.tagName.toLowerCase() === "proto-annotation") 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() === "rp-enum-item" || el.tagName.toLowerCase() === "proto-enum-item"
+    ) : [];
+    const idx = siblings.indexOf(this) + 1;
+    const labelEl = document.createElement("span");
+    labelEl.className = "rp-enum-label";
+    const idxBadge = document.createElement("span");
+    idxBadge.className = "rp-enum-index";
+    idxBadge.textContent = String(idx);
+    const labelText = document.createElement("span");
+    labelText.className = "rp-enum-label-text";
+    labelText.textContent = attr(this, "label", "State");
+    const description = attr(this, "description");
+    if (description) {
+      const desc = document.createElement("span");
+      desc.className = "rp-enum-description";
+      desc.textContent = description;
+      labelText.appendChild(desc);
+    }
+    labelEl.append(idxBadge, labelText);
+    const content = document.createElement("div");
+    content.className = "rp-enum-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);
+  }
+  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 = "rp-page-header";
+    header.innerHTML = `<div class="rp-page-title-row"><h1 class="rp-page-title">${escapeHtml(pageTitle)}</h1><span class="rp-page-route">${escapeHtml(route)}</span></div><p class="rp-page-description">${escapeHtml(description)}</p>`;
+    const body = document.createElement("div");
+    body.className = "rp-page-body";
+    const main = document.createElement("main");
+    main.className = "rp-page-main";
+    const pane = document.createElement("aside");
+    pane.className = "rp-annotation-pane";
+    pane.setAttribute("aria-label", "Annotations");
+    const paneInner = document.createElement("div");
+    paneInner.className = "rp-annotation-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 = "rp-page-shell";
+    shell.append(main, pane);
+    this.appendChild(shell);
+    requestAnimationFrame(() => {
+      const mv = body.querySelector("rp-main-view, proto-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");
+  }
+}
+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"/>'
+};
+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="rp-select-control"><span class="rp-select-value">${escapeHtml(value)}</span>${icon("chevron-down")}</span><span class="rp-select-options">${options.map((o) => `<span class="rp-select-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="rp-toggle-track"><span class="rp-toggle-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="rp-form-label${this.hasAttribute("required") ? " required" : ""}">${escapeHtml(label)}</span>` : ""}`;
+    children.forEach((n) => this.appendChild(n));
+    if (error) this.insertAdjacentHTML("beforeend", `<span class="rp-form-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="rp-progress-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="rp-progress-bar"></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) => `<snap-list-item label="${["全部", "未读", "@ 我", "已归档", "设置"][i] || `Item ${i + 1}`}" icon="${["inbox", "message-square", "at-sign", "archive", "settings"][i] || "file"}"${state === "first-selected" && i === 0 ? ' state="selected"' : ""}></snap-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="rp-list-label">${escapeHtml(label)}</span>${badge ? `<span class="rp-list-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("rp-tab-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="rp-list-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="rp-page-btn">${icon("chevron-left", 14)}</span>${visible.map((p) => `<span class="rp-page-btn${p === current ? " active" : ""}">${p}</span>`).join("")}<span class="rp-page-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 ? "rp-breadcrumb-current" : ""}">${escapeHtml(item)}</span>${i < items.length - 1 ? "<span>/</span>" : ""}`).join("");
+  }
+}
+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="rp-table-cell">✓</span>' : ""}${finalCols.map((c) => `<span class="rp-table-cell">${escapeHtml(c)}</span>`).join("")}`;
+    const body = Array.from({ length: rows }, (_, i) => `<div class="rp-table-row">${hasCheckbox ? `<span class="rp-table-cell"><span class="rp-box">${i === 1 ? icon("check", 12) : ""}</span></span>` : ""}${finalCols.map((c, j) => `<span class="rp-table-cell">${c === "操作" ? '<snap-button label="查看" variant="link"></snap-button>' : escapeHtml(sampleCell(c, j, i))}</span>`).join("")}</div>`).join("");
+    this.innerHTML = `<div class="rp-table-row rp-table-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) => `<snap-button label="${escapeHtml(a)}" variant="ghost"></snap-button>`).join("")}`;
+  }
+}
+class EmptyElement extends HTMLElement {
+  connectedCallback() {
+    injectStyle();
+    if (this.dataset.rpReady) return;
+    this.dataset.rpReady = "true";
+    this.innerHTML = `${icon("empty", 28)}<span class="rp-empty-title">${escapeHtml(attr(this, "label", "暂无数据"))}</span><span class="rp-empty-desc">${escapeHtml(attr(this, "description", ""))}</span>${this.hasAttribute("has-action") ? '<snap-button label="新建" variant="primary" icon="plus"></snap-button>' : ""}`;
+  }
+}
+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="rp-skeleton-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 = "rp-modal-body";
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = `<div class="rp-modal-head"><span>${escapeHtml(attr(this, "title", "标题"))}</span>${icon("x", 14)}</div>`;
+    this.appendChild(body);
+    if (this.hasAttribute("has-footer")) this.insertAdjacentHTML("beforeend", '<div class="rp-modal-footer"><snap-button label="取消"></snap-button><snap-button label="确认" variant="primary"></snap-button></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 = "rp-drawer-body";
+    children.forEach((n) => body.appendChild(n));
+    this.innerHTML = `<div class="rp-drawer-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="rp-card-image">${icon("image")} Image</span>` : ""}${title ? `<span class="rp-card-title">${escapeHtml(title)}</span>` : ""}${subtitle ? `<span class="rp-card-subtitle">${escapeHtml(subtitle)}</span>` : ""}`;
+    children.forEach((n) => this.appendChild(n));
+    if (this.hasAttribute("has-footer")) this.insertAdjacentHTML("beforeend", '<span class="rp-card-footer"><snap-button label="查看" variant="secondary"></snap-button></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) : ""}`;
+  }
+}
+function registerAll() {
+  define("rp-page", RpPage);
+  define("proto-page", RpPage);
+  define("rp-main-view", RpMainView);
+  define("proto-main-view", RpMainView);
+  define("rp-annotation", RpAnnotation);
+  define("proto-annotation", RpAnnotation);
+  define("rp-enum", RpEnum);
+  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]];
+  for (const [suffix, ctor] of pairs) {
+    define(`snap-${suffix}`, ctor);
+    define(`rp-${suffix}`, ctor);
+  }
+}
+registerAll();
+export {
+  registerAll
+};
+//# sourceMappingURL=rpui.js.map