@21stware/rpui 0.4.2 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/core/style.d.ts +1 -1
  2. package/dist/core/theme.d.ts +6 -0
  3. package/dist/gallery.js +126 -24
  4. package/dist/gallery.js.map +1 -1
  5. package/dist/rpml-loader.js +70 -0
  6. package/dist/rpml-loader.js.map +1 -1
  7. package/dist/rpui.js +13 -6
  8. package/dist/rpui.js.map +1 -1
  9. package/package.json +1 -1
package/dist/core/style.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export declare const RPUI_STYLE_ID = "rpui-runtime-style";
2
- export declare const style = "\n: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; }\n* { box-sizing:border-box; }\nbody { margin:0; font-family:var(--rp-font); color:var(--rp-text); background:var(--rp-bg); }\n.rp-icon { display:inline-block; flex:0 0 auto; vertical-align:-0.16em; }\npage-el, page-el { display:block; min-height:100vh; padding:32px 40px; overflow:auto; }\n.page-el-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:100vh; align-items:start; }\n.page-el-main { display:flex; flex-direction:column; min-width:0; overflow:visible; }\n.page-el-header { flex:0 0 auto; width:fit-content; max-width:none; margin:0 0 22px; }\n.page-el-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }\n.page-el-title { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.02em; }\n.page-el-route { font-size:13px; color:var(--rp-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.7); border:1px solid var(--rp-border); border-radius:999px; padding:3px 9px; }\n.page-el-description { margin:10px 0 0; color:#374151; line-height:1.6; font-size:14px; }\n.page-el-body { flex:0 1 auto; display:block; width:fit-content; max-width:100%; min-height:0; overflow:visible; }\n.annotation-el-pane { min-width:380px; max-width:680px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:auto; padding:0 0 48px 0; align-self:start; }\n.annotation-el-pane-inner { padding:4px 12px 24px 6px; }\nmain-view, main-view { display:block; width:fit-content; margin:0 0 28px; position:relative; }\n.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); }\n.rp-main-stage-clip { overflow:hidden; border-radius:var(--rp-radius-md); }\n.rp-main-stage { position:relative; transform-origin:top left; background:var(--rp-surface); }\n.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; }\n.rp-pin > span { transform:rotate(45deg); }\n.rp-pin:hover { opacity:0.85; }\nannotation-el, annotation-el { display:block; width:fit-content; max-width:980px; margin:14px 0; line-height:1.65; color:#1f2937; font-size:14px; }\nannotation-el annotation-el, annotation-el annotation-el, annotation-el annotation-el, annotation-el annotation-el { margin:10px 0 8px 22px; }\n.annotation-el-head { display:flex; align-items:center; gap:8px; margin:0 0 4px; width:fit-content; }\n.annotation-el-title { font-weight:700; color:#111827; }\n.annotation-el-marker { display:inline-grid; place-items:center; flex:0 0 auto; color:#fff; font-size:10px; font-weight:700; line-height:1; }\n.annotation-el-marker.drop { width:22px; height:22px; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }\n.annotation-el-marker.drop > span { transform:rotate(45deg); }\n.annotation-el-marker.circle { width:16px; height:16px; background:var(--rp-purple); border-radius:50%; }\n.annotation-el-marker.triangle { width:18px; height:16px; background:var(--rp-success); clip-path:polygon(50% 0, 100% 100%, 0 100%); }\n.annotation-el-marker.triangle > span { transform:translateY(2px); font-size:9px; }\n.annotation-el-marker.global { width:20px; height:20px; background:#0f172a; border-radius:6px; font-size:11px; }\nannotation-global-el, annotation-global-el { display:block; width:fit-content; max-width:980px; margin:0 0 18px; padding:10px 12px 12px; line-height:1.65; color:#1f2937; font-size:14px; background:linear-gradient(180deg,#f8fafc,#fff); border:1px solid var(--rp-border); border-left:3px solid #0f172a; border-radius:var(--rp-radius-md); }\n.annotation-el-pane annotation-global-el, .annotation-el-pane annotation-global-el { max-width:none; }\n.annotation-el-pane annotation-global-el .annotation-el-body { max-width:none; }\n.annotation-el-body { display:block; position:relative; width:fit-content; max-width:920px; }\n.rp-pin-slice { width:18px; height:18px; font-size:10px; box-shadow:0 1px 5px rgba(37,99,235,.3); }\n.annotation-el-body > :not(annotation-el):not(annotation-el):not(enum-el):not(enum-el) { max-width:820px; }\n.annotation-el-pane annotation-el, .annotation-el-pane annotation-el { max-width:none; }\n.annotation-el-pane .annotation-el-body { max-width:none; }\n.annotation-el-pane .annotation-el-body > :not(annotation-el):not(annotation-el):not(enum-el):not(enum-el) { max-width:420px; }\n.annotation-el-body p { margin:0 0 8px; }\nenum-el, enum-el { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; width:fit-content; margin:8px 0 12px; }\n.annotation-el-pane enum-el, .annotation-el-pane enum-el { flex-wrap:wrap; }\nenum-item, enum-item { display:block; flex:0 0 auto; width:fit-content; min-width:180px; max-width:600px; border:1px solid #f0f0f0; border-radius:var(--rp-radius-md); background:#fff; overflow:hidden; }\n.enum-el-label { display:flex; align-items:flex-start; gap:6px; padding:5px 9px 4px; font-size:12px; font-weight:650; color:#374151; }\n.enum-el-index { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; background:#111827; color:#fff; font-size:10px; font-weight:750; border-radius:3px; flex:0 0 auto; margin-top:1px; }\n.enum-el-label-text { display:block; }\n.enum-el-description { display:block; margin-top:2px; font-size:11px; line-height:1.35; font-weight:400; color:var(--rp-muted); }\n.enum-el-content { display:block; width:fit-content; padding:8px; }\n.annotation-el-title { font-weight:700; color:#111827; cursor:pointer; }\n.annotation-el-title:hover { color:var(--rp-primary); }\n.rp-section-focus { outline:2px dashed var(--rp-primary); outline-offset:4px; border-radius:4px; }\nviewport-el, viewport-el { display:flex; flex-direction:column; width:var(--snap-width,1440px); height:var(--snap-height,900px); background:#f8fafc; overflow:hidden; color:#111827; }\nlayout-el, layout-el { display:grid; grid-template-columns:var(--snap-columns,1fr); grid-template-rows:var(--snap-rows,auto); gap:var(--snap-gap,0); align-content:start; width:fit-content; max-width:100%; min-width:0; }\nlayout-el > *, layout-el > * { min-width:0; }\nviewport-el layout-el, viewport-el layout-el { width:100%; }\nviewport-el > layout-el, viewport-el > layout-el { flex:1 1 auto; min-height:0; }\nviewport-el > navbar-el, viewport-el > navbar-el { flex:0 0 auto; }\npanel-el, panel-el { display:block; width:fit-content; max-width:100%; background:#fff; border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); padding:var(--snap-padding,16px); }\nviewport-el panel-el, viewport-el panel-el { width:auto; min-width:0; }\npanel-el[elevation=\"1\"], panel-el[elevation=\"1\"] { box-shadow:0 4px 16px rgba(15,23,42,.06); }\npanel-el[elevation=\"2\"], panel-el[elevation=\"2\"] { box-shadow:var(--rp-shadow); }\nnavbar-el, navbar-el { display:flex; align-items:center; gap:14px; height:var(--snap-height,64px); padding:0 24px; background:#fff; border-bottom:1px solid var(--rp-border); }\nsidebar-el, sidebar-el { display:block; width:var(--snap-width,260px); min-height:0; background:#fff; border-right:1px solid var(--rp-border); padding:14px; }\nviewport-el sidebar-el, viewport-el sidebar-el { min-height:100%; }\nsidebar-el[collapsed], sidebar-el[collapsed] { width:72px; }\nlogo-el, logo-el { display:inline-grid; place-items:center; width:var(--snap-size,82px); height:32px; border-radius:8px; background:#111827; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; }\nsearch-el, search-el, input-el, input-el, date-picker, date-picker { display:inline-flex; align-items:center; gap:8px; width:280px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }\ntextarea-el, textarea-el { display:block; width:320px; min-height:calc(var(--snap-rows,3) * 24px + 22px); padding:9px 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; white-space:pre-wrap; }\nsearch-el[state=\"focus\"], search-el[state=\"focus\"], input-el[state=\"focus\"], input-el[state=\"focus\"], textarea-el[state=\"focus\"], textarea-el[state=\"focus\"], date-picker[state=\"focus\"], date-picker[state=\"focus\"] { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsearch-el[state=\"filled\"], search-el[state=\"filled\"], input-el[state=\"filled\"], input-el[state=\"filled\"], textarea-el[state=\"filled\"], textarea-el[state=\"filled\"], date-picker[state=\"filled\"], date-picker[state=\"filled\"] { border-color:#93c5fd; background:#f8fbff; }\nsearch-el[state=\"error\"], search-el[state=\"error\"], input-el[state=\"error\"], input-el[state=\"error\"], textarea-el[state=\"error\"], textarea-el[state=\"error\"], date-picker[state=\"error\"], date-picker[state=\"error\"] { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\nsearch-el[state=\"disabled\"], search-el[state=\"disabled\"], input-el[state=\"disabled\"], input-el[state=\"disabled\"], textarea-el[state=\"disabled\"], textarea-el[state=\"disabled\"], date-picker[state=\"disabled\"], date-picker[state=\"disabled\"] { opacity:.55; background:#f3f4f6; }\ninput-el[label], input-el[label], date-picker[label], date-picker[label] { display:inline-grid; align-items:start; gap:6px; width:280px; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }\ninput-el[label][state=\"focus\"], input-el[label][state=\"focus\"], input-el[label][state=\"filled\"], input-el[label][state=\"filled\"], input-el[label][state=\"error\"], input-el[label][state=\"error\"], date-picker[label][state=\"focus\"], date-picker[label][state=\"focus\"], date-picker[label][state=\"filled\"], date-picker[label][state=\"filled\"], date-picker[label][state=\"error\"], date-picker[label][state=\"error\"] { border:0; background:transparent; box-shadow:none; }\n.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; }\ninput-el[state=\"focus\"] .rp-field-control, input-el[state=\"focus\"] .rp-field-control, date-picker[state=\"focus\"] .rp-field-control, date-picker[state=\"focus\"] .rp-field-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\ninput-el[state=\"filled\"] .rp-field-control, input-el[state=\"filled\"] .rp-field-control, date-picker[state=\"filled\"] .rp-field-control, date-picker[state=\"filled\"] .rp-field-control { border-color:#93c5fd; background:#f8fbff; }\ninput-el[state=\"error\"] .rp-field-control, input-el[state=\"error\"] .rp-field-control, date-picker[state=\"error\"] .rp-field-control, date-picker[state=\"error\"] .rp-field-control { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\n.rp-field-label { display:block; margin:0 0 6px; color:#374151; font-size:12px; font-weight:650; }\n.rp-placeholder { color:#9ca3af; }\n.rp-value { color:#111827; }\n.rp-error-text { color:var(--rp-danger); font-size:12px; }\nselect-el, select-el { display:inline-block; width:280px; max-width:100%; }\n.select-el-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; }\nselect-el[state=\"expanded\"] .select-el-control, select-el[state=\"expanded\"] .select-el-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nselect-el[state=\"disabled\"], select-el[state=\"disabled\"] { opacity:.55; }\n.select-el-value { flex:1 1 auto; min-width:0; }\n.select-el-options { display:none; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; box-shadow:0 10px 18px rgba(15,23,42,.08); }\nselect-el[state=\"expanded\"] .select-el-options, select-el[state=\"expanded\"] .select-el-options { display:grid; gap:2px; }\n.select-el-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.select-el-option.selected { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nbadge-el, badge-el { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:750; }\navatar-el, avatar-el { display:inline-grid; place-items:center; width:var(--snap-size,32px); height:var(--snap-size,32px); border-radius:999px; background:#e0e7ff; color:#3730a3; font-size:12px; font-weight:800; }\nlist-el, list-el { display:flex; flex-direction:column; gap:4px; width:100%; }\nlist-item, list-item { display:flex; align-items:center; gap:8px; width:100%; min-width:180px; height:36px; padding:0 10px; border-radius:8px; color:#374151; }\nlist-item[state=\"selected\"], list-item[state=\"selected\"] { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nlist-item[state=\"disabled\"], list-item[state=\"disabled\"] { opacity:.5; }\n.list-el-label { flex:1 1 auto; }\n.list-el-badge { margin-left:auto; min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center; padding:0 6px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }\ntabs-el, tabs-el { display:flex; gap:6px; border-bottom:1px solid var(--rp-border); margin-bottom:12px; width:fit-content; }\ntab-el, tab-el { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; }\ntab-el.tab-el-active, tab-el.tab-el-active { color:var(--rp-primary); border-bottom-color:var(--rp-primary); font-weight:700; }\nbutton-el, button-el { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--rp-border); background:#fff; color:#374151; font-size:13px; font-weight:650; }\nbutton-el[size=\"sm\"], button-el[size=\"sm\"] { min-height:28px; padding:0 9px; font-size:12px; border-radius:6px; }\nbutton-el[size=\"lg\"], button-el[size=\"lg\"] { min-height:40px; padding:0 16px; font-size:14px; }\nbutton-el[variant=\"primary\"], button-el[variant=\"primary\"] { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\nbutton-el[variant=\"secondary\"], button-el[variant=\"secondary\"] { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }\nbutton-el[variant=\"danger\"], button-el[variant=\"danger\"] { border-color:var(--rp-danger); color:var(--rp-danger); }\nbutton-el[variant=\"link\"], button-el[variant=\"link\"] { border-color:transparent; background:transparent; color:var(--rp-primary); padding-inline:2px; }\nbutton-el[variant=\"ghost\"], button-el[variant=\"ghost\"] { border-color:transparent; background:transparent; }\nbutton-el[state=\"disabled\"], button-el[state=\"disabled\"], button-el[disabled], button-el[disabled] { opacity:.5; }\nbutton-group, button-group { display:inline-flex; gap:0; width:fit-content; }\nbutton-group > button-el, button-group > button-el { border-radius:0; margin-left:-1px; }\nbutton-group > :first-child { border-radius:8px 0 0 8px; margin-left:0; }\nbutton-group > :last-child { border-radius:0 8px 8px 0; }\ntable-el, table-el { display:table; border-collapse:collapse; width:fit-content; min-width:720px; max-width:980px; background:#fff; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nviewport-el table-el, viewport-el table-el { width:100%; max-width:none; }\n.table-row { display:table-row; }\n.table-el-cell { display:table-cell; padding:11px 12px; border-bottom:1px solid var(--rp-border); font-size:13px; vertical-align:middle; white-space:nowrap; }\n.table-el-head .table-el-cell { background:#f9fafb; color:#6b7280; font-size:12px; font-weight:750; }\n.table-row:last-child .table-el-cell { border-bottom:0; }\ntable-row, table-row { display:grid; grid-template-columns:44px 150px 240px 90px 90px; align-items:center; min-width:560px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#fff; }\ntable-row > span, table-row > span { padding:10px 12px; font-size:13px; }\ntable-row[state=\"unread\"], table-row[state=\"unread\"] { background:#eff6ff; font-weight:700; }\ntable-row[state=\"selected\"], table-row[state=\"selected\"] { outline:2px solid rgba(37,99,235,.35); background:#f8fbff; }\ntable-row[state=\"highlighted\"], table-row[state=\"highlighted\"] { background:#fffbeb; }\ntable-row[state=\"disabled\"], table-row[state=\"disabled\"] { opacity:.5; }\nbulk-action-bar, bulk-action-bar { display:flex; align-items:center; gap:8px; width:fit-content; padding:8px 10px; margin:0 0 10px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:8px; color:#1e40af; font-size:13px; font-weight:650; }\nempty-el, empty-el { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:240px; padding:24px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; }\n.empty-el-title { color:#111827; font-weight:700; }\n.empty-el-desc { font-size:13px; }\nloading-el, loading-el { display:grid; gap:8px; min-width:260px; color:var(--rp-primary); }\n.skeleton-el-line { height:14px; border-radius:999px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }\n.rp-spinner { display:inline-grid; place-items:center; width:32px; height:32px; }\nalert-el, alert-el, toast-el, toast-el { display:flex; align-items:flex-start; gap:8px; width:fit-content; max-width:420px; padding:10px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\nalert-el[type=\"info\"], alert-el[type=\"info\"], toast-el[type=\"info\"], toast-el[type=\"info\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nalert-el[type=\"success\"], alert-el[type=\"success\"], toast-el[type=\"success\"], toast-el[type=\"success\"] { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }\nalert-el[type=\"warning\"], alert-el[type=\"warning\"], toast-el[type=\"warning\"], toast-el[type=\"warning\"] { border-color:#fde68a; background:#fffbeb; color:#92400e; }\nalert-el[type=\"error\"], alert-el[type=\"error\"], toast-el[type=\"error\"], toast-el[type=\"error\"] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }\ndropdown-el, dropdown-el, popover-el, popover-el { display:block; width:var(--snap-width,300px); padding:8px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.1); }\ntooltip-el, tooltip-el { display:inline-block; width:fit-content; max-width:240px; padding:6px 8px; border-radius:6px; background:#111827; color:#fff; font-size:12px; }\n.rp-overlay-title { margin:0 0 8px; color:#111827; font-size:14px; font-weight:750; }\nmodal-el, modal-el { display:block; width:min(var(--snap-width,480px), 100%); border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); overflow:hidden; }\ndrawer-el, drawer-el { display:block; width:min(var(--snap-width,360px), 100%); min-height:320px; border:1px solid var(--rp-border); background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.14); }\n.modal-el-head, .drawer-el-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--rp-border); font-weight:750; }\n.modal-el-body, .drawer-el-body { padding:16px; }\n.modal-el-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--rp-border); background:#f9fafb; }\ncard-el, card-el { display:block; width:auto; min-width:220px; padding:14px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.card-el-image { display:grid; place-items:center; height:120px; margin:-14px -14px 12px; border-radius:10px 10px 0 0; background:#f3f4f6; color:#6b7280; }\n.card-el-title { display:block; color:#111827; font-weight:750; }\n.card-el-subtitle { display:block; margin-top:4px; color:#6b7280; font-size:13px; }\n.card-el-footer { display:block; margin:12px -14px -14px; padding:10px 14px; border-top:1px solid var(--rp-border); background:#f9fafb; }\nstat-card, stat-card { display:grid; gap:6px; width:auto; min-width:0; padding:16px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-stat-label { color:#6b7280; font-size:12px; font-weight:650; }\n.rp-stat-value { color:#111827; font-size:26px; font-weight:800; }\n.rp-stat-change { font-size:12px; font-weight:700; }\nstat-card[trend=\"up\"] .rp-stat-change, stat-card[trend=\"up\"] .rp-stat-change { color:var(--rp-success); }\nstat-card[trend=\"down\"] .rp-stat-change, stat-card[trend=\"down\"] .rp-stat-change { color:var(--rp-danger); }\ntag-el, tag-el { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:650; }\ntag-el[color=\"green\"], tag-el[color=\"green\"] { background:#dcfce7; color:#166534; }\ntag-el[color=\"orange\"], tag-el[color=\"orange\"] { background:#ffedd5; color:#9a3412; }\ntag-el[color=\"red\"], tag-el[color=\"red\"] { background:#fee2e2; color:#991b1b; }\ncheckbox-el, checkbox-el, radio-el, radio-el { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.rp-box { display:inline-grid; place-items:center; width:16px; height:16px; border:1px solid var(--rp-border-strong); border-radius:4px; color:#fff; }\ncheckbox-el[state=\"checked\"] .rp-box, checkbox-el[state=\"checked\"] .rp-box, radio-el[state=\"checked\"] .rp-box, radio-el[state=\"checked\"] .rp-box, checkbox-el[state=\"indeterminate\"] .rp-box, checkbox-el[state=\"indeterminate\"] .rp-box { background:var(--rp-primary); border-color:var(--rp-primary); }\ncheckbox-el[state=\"disabled\"], checkbox-el[state=\"disabled\"], radio-el[state=\"disabled\"], radio-el[state=\"disabled\"] { opacity:.5; }\nradio-el .rp-box, radio-el .rp-box { border-radius:999px; }\ntoggle-el, toggle-el { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.toggle-el-track { display:flex; align-items:center; width:34px; height:20px; border-radius:999px; background:#d1d5db; padding:2px; }\n.toggle-el-dot { display:block; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:none; }\ntoggle-el[state=\"on\"] .toggle-el-track, toggle-el[state=\"on\"] .toggle-el-track { background:var(--rp-primary); }\ntoggle-el[state=\"on\"] .toggle-el-dot, toggle-el[state=\"on\"] .toggle-el-dot { margin-left:14px; }\ntoggle-el[state=\"disabled\"], toggle-el[state=\"disabled\"] { opacity:.5; }\nform-el, form-el { display:grid; gap:12px; width:fit-content; max-width:100%; }\nform-el[layout=\"horizontal\"], form-el[layout=\"horizontal\"] { grid-template-columns:max-content 1fr; align-items:start; }\nform-item, form-item { display:grid; gap:6px; width:fit-content; max-width:100%; }\nform-item > *, form-item > * { max-width:100%; }\n.form-el-label { color:#374151; font-size:12px; font-weight:700; }\n.form-el-label.required::after { content:\" *\"; color:var(--rp-danger); }\n.form-el-error { color:var(--rp-danger); font-size:12px; }\nupload-el, upload-el { display:grid; justify-items:center; gap:8px; width:280px; padding:18px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; font-size:13px; }\nupload-el[state=\"has-file\"], upload-el[state=\"has-file\"] { justify-items:start; border-style:solid; color:#374151; }\nupload-el[state=\"uploading\"], upload-el[state=\"uploading\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nimage-placeholder, image-placeholder { display:grid; place-items:center; width:var(--snap-width,160px); height:var(--snap-height,100px); background:#f3f4f6; border:1px dashed var(--rp-border-strong); border-radius:8px; color:#6b7280; font-size:12px; }\nprogress-el, progress-el { display:block; width:180px; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\nprogress-el[kind=\"circle\"], progress-el[kind=\"circle\"], progress-el[style=\"circle\"], progress-el[style=\"circle\"] { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:conic-gradient(var(--rp-primary) var(--progress,40%), #e5e7eb 0); font-size:12px; font-weight:750; }\n.progress-el-bar { display:block; height:100%; width:var(--progress,40%); background:var(--rp-primary); }\nprogress-el[status=\"success\"] .progress-el-bar, progress-el[status=\"success\"] .progress-el-bar { background:var(--rp-success); }\nprogress-el[status=\"error\"] .progress-el-bar, progress-el[status=\"error\"] .progress-el-bar { background:var(--rp-danger); }\npagination-el, pagination-el { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:13px; }\n.page-el-btn { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border:1px solid var(--rp-border); border-radius:6px; background:#fff; color:#374151; }\n.page-el-btn.active { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; font-weight:750; }\nsteps-el, steps-el { display:flex; align-items:center; gap:8px; width:fit-content; }\n.rp-step { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.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; }\n.rp-step.active { color:var(--rp-primary); font-weight:750; }\n.rp-step.active .rp-step-dot { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\n.rp-step.done .rp-step-dot { border-color:var(--rp-success); background:var(--rp-success); color:#fff; }\n.rp-step-sep { width:28px; height:1px; background:var(--rp-border); }\nbreadcrumb-el, breadcrumb-el { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.breadcrumb-el-current { color:#111827; font-weight:650; }\n\n/* --- data input --- */\nslider-el, slider-el { display:inline-flex; align-items:center; gap:10px; width:220px; }\n.slider-el-track { position:relative; flex:1; height:4px; border-radius:999px; background:#e5e7eb; }\n.slider-el-fill { position:absolute; height:100%; border-radius:999px; background:var(--rp-primary); }\n.slider-el-thumb { position:absolute; top:50%; width:16px; height:16px; margin-left:-8px; transform:translateY(-50%); border-radius:50%; background:#fff; border:1px solid var(--rp-border-strong); }\n.slider-el-value { font-size:12px; color:#374151; min-width:24px; }\nrange-el, range-el { display:inline-flex; align-items:center; width:220px; }\nnumber-input, number-input { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 4px 0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; width:120px; }\n.rp-num-value { flex:1; font-size:13px; }\n.rp-num-steppers { display:flex; flex-direction:column; }\n.rp-num-step { display:grid; place-items:center; width:20px; height:15px; color:#6b7280; cursor:pointer; }\nrating-el, rating-el { display:inline-flex; gap:2px; color:#d1d5db; }\n.rp-star.filled { color:#f59e0b; }\npin-input, pin-input { display:inline-flex; gap:8px; }\n.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; }\n.rp-pin-cell.active { border-color:var(--rp-primary); }\ncolor-swatch, color-swatch { display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }\n.rp-swatch-chip { width:24px; height:24px; border-radius:6px; border:1px solid rgba(0,0,0,.1); }\n.rp-swatch-hex { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }\nautocomplete-el, autocomplete-el { display:inline-block; width:280px; }\n.rp-ac-options { display:grid; gap:1px; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }\n.rp-ac-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-ac-option:first-child { background:#eff6ff; color:#1d4ed8; }\n\n/* --- data display additions --- */\nchip-el, chip-el { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--rp-border); background:#f9fafb; color:#374151; font-size:12px; }\ntree-el, tree-el { display:flex; flex-direction:column; gap:1px; width:fit-content; min-width:240px; }\n.tree-el-row { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; color:#374151; font-size:13px; padding-left:calc(8px + var(--tree-level,0) * 18px); }\n.tree-el-row.selected { background:#eff6ff; color:#1d4ed8; font-weight:650; }\n.tree-el-spacer { display:inline-block; width:12px; }\n.tree-el-label { flex:1; }\ntimeline-el, timeline-el { display:flex; flex-direction:column; width:fit-content; min-width:260px; }\ntimeline-item, timeline-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }\ntimeline-item:not(:last-child)::before, timeline-item:not(:last-child)::before { content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--rp-border); }\n.timeline-el-dot { flex:0 0 auto; width:14px; height:14px; margin-top:2px; border-radius:50%; background:#fff; border:2px solid var(--rp-border-strong); z-index:1; }\n.timeline-el-dot.active { border-color:var(--rp-primary); background:var(--rp-primary); }\n.timeline-el-dot.done { border-color:var(--rp-success); background:var(--rp-success); }\n.timeline-el-dot.error { border-color:var(--rp-danger); background:var(--rp-danger); }\n.timeline-el-main { flex:1; }\n.timeline-el-head { display:flex; align-items:baseline; gap:8px; }\n.timeline-el-label { font-weight:650; color:#111827; font-size:13px; }\n.timeline-el-time { font-size:12px; color:#9ca3af; }\n.timeline-el-content { font-size:13px; color:#6b7280; margin-top:2px; }\ncalendar-el, calendar-el { display:inline-block; width:280px; padding:12px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-cal-head { text-align:center; font-weight:700; font-size:14px; margin-bottom:10px; }\n.rp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }\n.rp-cal-dow { display:grid; place-items:center; height:24px; font-size:11px; color:#9ca3af; }\n.rp-cal-cell { display:grid; place-items:center; height:32px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-cal-cell.selected { background:var(--rp-primary); color:#fff; font-weight:700; }\n.rp-cal-cell.muted { color:transparent; }\nkanban-el, kanban-el { display:flex; gap:12px; width:fit-content; align-items:flex-start; }\nkanban-column, kanban-column { display:flex; flex-direction:column; width:200px; padding:10px; border-radius:10px; background:#f3f4f6; }\n.kanban-el-head { display:flex; align-items:center; justify-content:space-between; font-weight:650; font-size:13px; margin-bottom:8px; color:#374151; }\n.kanban-el-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e5e7eb; font-size:11px; }\n.kanban-el-body { display:flex; flex-direction:column; gap:8px; }\nkanban-card, kanban-card { display:block; padding:10px; border-radius:8px; background:#fff; border:1px solid var(--rp-border); }\n.kanban-card-title { display:block; font-size:13px; color:#111827; }\n.kanban-card-tag { display:inline-block; margin-top:6px; padding:1px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; }\ncode-block, code-block { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#0f172a; }\n.rp-code-head { padding:6px 12px; font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#94a3b8; background:#1e293b; }\n.rp-code-body { padding:10px 0; }\n.rp-code-line { display:flex; align-items:center; gap:12px; padding:1px 12px; }\n.rp-code-ln { width:20px; text-align:right; color:#475569; font-family:ui-monospace,Menlo,monospace; font-size:11px; }\n.rp-code-bar { height:8px; border-radius:3px; background:#334155; }\ndiff-el, diff-el { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; font-family:ui-monospace,Menlo,monospace; }\n.diff-el-line { display:flex; align-items:center; gap:10px; padding:2px 10px; }\n.diff-el-line.add { background:#dcfce7; }\n.diff-el-line.del { background:#fee2e2; }\n.diff-el-sign { width:10px; color:#6b7280; }\n.diff-el-line.add .rp-code-bar { background:#86efac; }\n.diff-el-line.del .rp-code-bar { background:#fca5a5; }\n.diff-el-line.ctx .rp-code-bar { background:#e5e7eb; }\nimage-grid, image-grid { display:grid; grid-template-columns:repeat(var(--grid-cols,3),1fr); gap:8px; width:fit-content; }\n.rp-grid-cell { display:grid; place-items:center; width:80px; height:80px; border-radius:8px; background:#f3f4f6; color:#9ca3af; }\nkey-value, key-value { display:flex; flex-direction:column; width:fit-content; min-width:240px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nkv-row, kv-row { display:flex; border-bottom:1px solid var(--rp-border); }\nkv-row:last-child, kv-row:last-child { border-bottom:0; }\n.rp-kv-key { width:120px; padding:8px 12px; background:#f9fafb; color:#6b7280; font-size:13px; }\n.rp-kv-val { flex:1; padding:8px 12px; color:#111827; font-size:13px; }\naccordion-el, accordion-el { display:flex; flex-direction:column; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\naccordion-item, accordion-item { display:block; border-bottom:1px solid var(--rp-border); }\naccordion-item:last-child, accordion-item:last-child { border-bottom:0; }\n.accordion-el-head { display:flex; align-items:center; gap:8px; padding:11px 14px; font-weight:650; font-size:13px; color:#111827; }\n.accordion-el-body { padding:0 14px 14px 36px; font-size:13px; color:#6b7280; }\nbanner-el, banner-el { display:flex; align-items:center; gap:10px; width:fit-content; min-width:480px; padding:12px 16px; border-radius:8px; font-size:13px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }\nbanner-el[type=\"success\"], banner-el[type=\"success\"] { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }\nbanner-el[type=\"warning\"], banner-el[type=\"warning\"] { background:#fffbeb; color:#92400e; border-color:#fde68a; }\nbanner-el[type=\"error\"], banner-el[type=\"error\"] { background:#fef2f2; color:#991b1b; border-color:#fecaca; }\n.banner-el-text { flex:1; }\nskeleton-el, skeleton-el { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:240px; }\n.rp-skel { border-radius:8px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }\n.rp-skel-block { height:120px; }\n.rp-skel-avatar { width:40px; height:40px; border-radius:50%; }\n.rp-skel-avatar.sm { width:28px; height:28px; }\n.rp-skel-row { display:flex; align-items:center; gap:10px; }\ncountdown-el, countdown-el { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#fef2f2; color:#991b1b; font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }\nresult-el, result-el { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:280px; padding:32px; text-align:center; }\n.result-el-icon.success { color:var(--rp-success); }\n.result-el-icon.error { color:var(--rp-danger); }\n.result-el-icon.empty { color:#9ca3af; }\n.result-el-title { font-size:16px; font-weight:700; color:#111827; }\n.result-el-desc { font-size:13px; color:#6b7280; }\npermission-gate, permission-gate { display:block; position:relative; width:fit-content; }\n.rp-gate-content { opacity:.4; filter:grayscale(1); pointer-events:none; }\n.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; }\nquota-bar, quota-bar { display:block; width:fit-content; min-width:240px; }\n.rp-quota-head { display:flex; justify-content:space-between; font-size:12px; color:#374151; margin-bottom:5px; }\n.rp-quota-num.danger { color:var(--rp-danger); font-weight:700; }\n.rp-quota-track { display:block; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\n.rp-quota-fill { display:block; height:100%; background:var(--rp-primary); }\n.rp-quota-fill.danger { background:var(--rp-danger); }\napi-key, api-key { display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#f9fafb; }\n.rp-apikey-val { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }\n.rp-apikey-copy { display:grid; place-items:center; width:26px; height:26px; border-radius:6px; color:#6b7280; }\naudit-row, audit-row { display:flex; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--rp-border); width:fit-content; min-width:320px; font-size:13px; }\n.rp-audit-actor { font-weight:650; color:#111827; }\n.rp-audit-action { flex:1; color:#6b7280; }\n.rp-audit-time { color:#9ca3af; font-size:12px; }\nworkflow-node, workflow-node { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\n.rp-wf-icon.done { color:var(--rp-success); }\n.rp-wf-icon.active { color:var(--rp-primary); }\n.rp-wf-icon.error { color:var(--rp-danger); }\n.rp-wf-icon.default { color:#9ca3af; }\n\n/* --- navigation & layout additions --- */\nsegmented-el, segmented-el { display:inline-flex; padding:2px; border-radius:8px; background:#f3f4f6; gap:2px; }\n.rp-seg-item { padding:5px 14px; border-radius:6px; font-size:13px; color:#6b7280; }\n.rp-seg-item.active { background:#fff; color:#111827; font-weight:650; }\ncommand-palette, command-palette { display:block; width:520px; border:1px solid var(--rp-border); border-radius:12px; background:#fff; overflow:hidden; }\n.rp-cmdk-input { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--rp-border); }\n.rp-cmdk-list { padding:6px; }\n.rp-cmdk-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:#374151; }\n.rp-cmdk-item.active { background:#eff6ff; color:#1d4ed8; }\ncontext-menu, context-menu, menu-el, menu-el { display:inline-flex; flex-direction:column; min-width:180px; padding:5px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.menu-item, menu-item, menu-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; font-size:13px; color:#374151; }\n.menu-item.danger, menu-item.danger, menu-item.danger { color:var(--rp-danger); }\n.menu-item.disabled, menu-item.disabled, menu-item.disabled { opacity:.45; }\n.menu-el-label { flex:1; }\n.menu-el-shortcut { color:#9ca3af; font-size:12px; }\ntoc-el, toc-el { display:flex; flex-direction:column; gap:2px; width:fit-content; min-width:160px; border-left:2px solid var(--rp-border); }\n.toc-el-item { padding:4px 12px; font-size:13px; color:#6b7280; border-left:2px solid transparent; margin-left:-2px; }\n.toc-el-item.active { color:var(--rp-primary); border-left-color:var(--rp-primary); font-weight:650; }\nkbd-el, kbd-el { display:inline-flex; align-items:center; gap:3px; }\n.kbd-el-key { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:1px solid var(--rp-border-strong); border-bottom-width:2px; border-radius:5px; background:#f9fafb; font-size:11px; font-family:var(--rp-font); color:#374151; }\n.kbd-el-plus { color:#9ca3af; font-size:11px; }\nsplit-pane, split-pane { display:grid; grid-template-columns:var(--snap-columns,1fr 1fr); width:fit-content; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsplit-pane > *, split-pane > * { padding:14px; }\nsplit-pane > *:not(:last-child), split-pane > *:not(:last-child) { border-right:1px solid var(--rp-border); }\ndivider-el, divider-el { display:block; height:1px; background:var(--rp-border); margin:12px 0; }\ndivider-el.divider-el-v, divider-el.divider-el-v { display:inline-block; width:1px; height:auto; align-self:stretch; margin:0 12px; }\nspacer-el, spacer-el { display:block; height:var(--snap-size,16px); }\n\n/* --- iOS --- */\nios-navbar, ios-navbar { display:block; background:rgba(249,249,249,.94); border-bottom:1px solid #d8d8dc; padding:6px 12px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }\n.ios-navbar-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:36px; }\n.rp-ios-nav-leading { display:flex; align-items:center; gap:2px; color:#007aff; font-size:15px; }\n.rp-ios-nav-title { text-align:center; font-weight:600; font-size:16px; color:#000; }\n.rp-ios-nav-trailing { text-align:right; color:#007aff; font-size:15px; }\n.rp-ios-nav-large { font-size:30px; font-weight:700; color:#000; padding:2px 2px 6px; }\nios-tabbar, ios-tabbar { display:flex; background:rgba(249,249,249,.94); border-top:1px solid #d8d8dc; padding:6px 0 4px; }\n.rp-ios-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; color:#8e8e93; font-size:10px; }\n.rp-ios-tab.active { color:#007aff; }\n.rp-ios-tab-label { font-size:10px; }\nios-list, ios-list { display:block; border-radius:10px; background:#fff; overflow:hidden; width:fit-content; min-width:300px; border:1px solid #e5e5ea; font-family:-apple-system,sans-serif; }\n.ios-list-header { padding:6px 16px; font-size:13px; color:#6d6d72; background:#f2f2f7; text-transform:none; }\nios-list-item, ios-list-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid #e5e5ea; font-size:15px; color:#000; }\nios-list-item:last-child, ios-list-item:last-child { border-bottom:0; }\n.rp-ios-li-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; background:#007aff; color:#fff; }\n.rp-ios-li-label { flex:1; }\n.rp-ios-li-detail { color:#8e8e93; }\n.rp-ios-li-chevron { color:#c7c7cc; }\nios-action-sheet, ios-action-sheet { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:320px; padding:8px; font-family:-apple-system,sans-serif; }\n.rp-ios-as-group { border-radius:14px; overflow:hidden; background:rgba(255,255,255,.82); backdrop-filter:blur(20px); }\n.rp-ios-as-title { padding:14px; text-align:center; font-size:13px; color:#8e8e93; border-bottom:1px solid #d1d1d6; }\n.rp-ios-as-action { padding:16px; text-align:center; font-size:18px; color:#007aff; border-bottom:1px solid #d1d1d6; }\n.rp-ios-as-action:last-child { border-bottom:0; }\n.rp-ios-as-action.destructive { color:#ff3b30; }\n.rp-ios-as-action.cancel { font-weight:600; }\nios-alert, ios-alert { display:block; width:270px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); font-family:-apple-system,sans-serif; }\n.ios-alert-body { padding:18px 16px 14px; text-align:center; }\n.ios-alert-title { font-size:17px; font-weight:600; color:#000; }\n.ios-alert-msg { margin-top:3px; font-size:13px; color:#000; }\n.ios-alert-actions { display:flex; border-top:1px solid #d1d1d6; }\n.ios-alert-btn { flex:1; padding:11px; text-align:center; font-size:17px; color:#007aff; }\n.ios-alert-btn.primary { font-weight:600; }\n.ios-alert-btn:not(:last-child) { border-right:1px solid #d1d1d6; }\nios-switch, ios-switch { display:inline-flex; align-items:center; gap:8px; font-family:-apple-system,sans-serif; font-size:15px; }\n.ios-switch-track { width:51px; height:31px; border-radius:999px; background:#34c759; padding:2px; }\n.ios-switch-dot { display:block; width:27px; height:27px; border-radius:50%; background:#fff; margin-left:20px; }\nios-segmented, ios-segmented { display:inline-flex; padding:2px; border-radius:9px; background:#767680; background:rgba(118,118,128,.12); gap:2px; font-family:-apple-system,sans-serif; }\n.rp-ios-seg-item { padding:6px 16px; border-radius:7px; font-size:13px; color:#000; }\n.rp-ios-seg-item.active { background:#fff; font-weight:600; }\nios-button, ios-button { display:inline-grid; place-items:center; min-height:34px; padding:0 16px; border-radius:8px; background:#007aff; color:#fff; font-size:15px; font-weight:600; font-family:-apple-system,sans-serif; }\nios-button[variant=\"tinted\"], ios-button[variant=\"tinted\"] { background:rgba(0,122,255,.15); color:#007aff; }\nios-button[variant=\"plain\"], ios-button[variant=\"plain\"] { background:transparent; color:#007aff; }\nios-search, ios-search { display:inline-flex; align-items:center; gap:6px; width:280px; height:36px; padding:0 10px; border-radius:10px; background:rgba(118,118,128,.12); color:#8e8e93; font-size:15px; font-family:-apple-system,sans-serif; }\nios-stepper, ios-stepper { display:inline-flex; align-items:center; border-radius:8px; background:rgba(118,118,128,.12); }\n.rp-ios-step { display:grid; place-items:center; width:46px; height:32px; color:#000; }\n.rp-ios-step-div { width:1px; height:18px; background:rgba(0,0,0,.15); }\n\n/* --- macOS --- */\nmacos-window, macos-window { display:block; width:fit-content; min-width:480px; border-radius:10px; overflow:hidden; border:1px solid #d1d1d6; background:#fff; font-family:-apple-system,sans-serif; }\n.rp-mac-titlebar { display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; background:#ececec; border-bottom:1px solid #d1d1d6; }\n.rp-mac-lights { display:flex; gap:8px; }\n.rp-mac-light { width:12px; height:12px; border-radius:50%; }\n.rp-mac-light.close { background:#ff5f57; }\n.rp-mac-light.min { background:#febc2e; }\n.rp-mac-light.max { background:#28c840; }\n.rp-mac-title { flex:1; text-align:center; font-size:13px; font-weight:600; color:#3c3c43; }\n.rp-mac-window-body { padding:0; }\nmacos-toolbar, macos-toolbar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#f6f6f6; border-bottom:1px solid #d1d1d6; }\nmacos-menubar, macos-menubar { display:flex; align-items:center; gap:18px; height:26px; padding:0 14px; background:rgba(246,246,246,.9); border-bottom:1px solid #d1d1d6; font-size:13px; font-family:-apple-system,sans-serif; }\n.rp-mac-menubar-apple { color:#000; }\n.rp-mac-menu-title { color:#000; }\n.rp-mac-menu-title.active { background:#007aff; color:#fff; padding:1px 7px; border-radius:4px; }\nmacos-sidebar, macos-sidebar { display:flex; flex-direction:column; gap:1px; width:220px; padding:8px; background:rgba(246,246,246,.85); font-family:-apple-system,sans-serif; }\nmacos-source-item, macos-source-item { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px; font-size:13px; color:#3c3c43; }\nmacos-source-item.selected, macos-source-item.selected { background:#007aff; color:#fff; }\n.rp-mac-source-group { padding:8px 8px 3px; font-size:11px; font-weight:700; color:#8e8e93; text-transform:uppercase; }\nmacos-segmented, macos-segmented { display:inline-flex; border:1px solid #c4c4c7; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }\n.rp-mac-seg-item { padding:4px 14px; font-size:13px; color:#000; background:#fff; border-right:1px solid #c4c4c7; }\n.rp-mac-seg-item:last-child { border-right:0; }\n.rp-mac-seg-item.active { background:#007aff; color:#fff; }\nmacos-popover, macos-popover { display:inline-block; position:relative; }\n.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; }\n.rp-mac-pop-body { min-width:220px; padding:12px; border-radius:10px; border:1px solid #d1d1d6; background:#fff; }\n.rp-mac-pop-title { font-weight:600; font-size:13px; margin-bottom:8px; }\nmacos-sheet, macos-sheet { display:block; width:fit-content; min-width:420px; border-radius:10px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.3); padding:18px; font-family:-apple-system,sans-serif; }\n.rp-mac-sheet-title { font-size:15px; font-weight:700; margin-bottom:12px; }\n.rp-mac-sheet-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }\nmacos-stepper, macos-stepper { display:inline-flex; flex-direction:column; border:1px solid #c4c4c7; border-radius:5px; overflow:hidden; }\n.rp-mac-step { display:grid; place-items:center; width:22px; height:13px; background:#fff; color:#3c3c43; }\n.rp-mac-step.up { border-bottom:1px solid #c4c4c7; }\nmacos-disclosure, macos-disclosure { display:block; font-family:-apple-system,sans-serif; }\n.rp-mac-disc-head { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:#000; }\n.rp-mac-disc-tri { display:inline-flex; transition:none; }\n.rp-mac-disc-tri.open { transform:rotate(90deg); }\n.rp-mac-disc-body { padding:8px 0 0 18px; font-size:13px; color:#3c3c43; }\nmacos-table, macos-table { display:flex; flex-direction:column; width:fit-content; min-width:360px; border:1px solid #d1d1d6; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }\n.rp-mac-tr { display:flex; }\n.rp-mac-tr.rp-mac-th { background:#f6f6f6; border-bottom:1px solid #d1d1d6; font-size:12px; font-weight:600; color:#3c3c43; }\n.rp-mac-tr.alt { background:#f5f8ff; }\n.rp-mac-td { flex:1; display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:13px; color:#3c3c43; }\n.rp-mac-cell-bar { height:8px; border-radius:3px; background:#e5e7eb; }\n\n/* --- agent / conversational UI (Codex-style: single column, de-bubbled) --- */\nchat-el, chat-el { display:flex; flex-direction:column; gap:24px; width:fit-content; min-width:520px; max-width:680px; }\nuser-message, user-message, assistant-message, assistant-message { display:block; }\n.rp-msg-role { font-size:12px; font-weight:700; color:#9ca3af; letter-spacing:.02em; margin:0 0 6px; }\n.rp-msg-content { display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.7; color:#1f2937; }\nuser-message .rp-msg-content, user-message .rp-msg-content { color:#111827; }\nsystem-message, system-message { display:flex; justify-content:center; }\n.rp-sysmsg-line { padding:3px 12px; border-radius:999px; background:#f3f4f6; color:#6b7280; font-size:12px; }\ntool-call, tool-call { display:block; width:fit-content; min-width:280px; max-width:600px; }\n.rp-tool-head { display:flex; align-items:center; gap:8px; font-size:13px; color:#6b7280; }\n.rp-tool-glyph { display:inline-flex; }\n.rp-tool-glyph.done { color:var(--rp-success); }\n.rp-tool-glyph.running { color:var(--rp-primary); }\n.rp-tool-glyph.error { color:var(--rp-danger); }\n.rp-tool-name { font-family:ui-monospace,Menlo,monospace; font-weight:650; color:#374151; }\n.rp-tool-args-inline { font-family:ui-monospace,Menlo,monospace; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.rp-tool-body { margin-top:8px; padding-left:21px; }\nagent-output, agent-output { display:block; width:fit-content; min-width:280px; max-width:600px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#f8fafc; }\n.rp-output-head { padding:6px 12px; font-size:12px; color:#6b7280; border-bottom:1px solid var(--rp-border); font-family:ui-monospace,Menlo,monospace; }\n.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; }\nreasoning-el, reasoning-el { display:block; width:fit-content; min-width:280px; max-width:600px; }\n.rp-reason-head { display:flex; align-items:center; gap:6px; font-size:13px; color:#9ca3af; }\n.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; }\nmessage-actions, message-actions { display:inline-flex; gap:2px; }\n.rp-msg-action { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:#9ca3af; cursor:pointer; }\n.rp-msg-action:hover { background:#f3f4f6; color:#374151; }\nsuggestions-el, suggestions-el { display:flex; flex-wrap:wrap; gap:8px; }\n.rp-suggestion { padding:7px 13px; border:1px solid var(--rp-border); border-radius:8px; font-size:13px; color:#374151; background:#fff; cursor:pointer; }\n.rp-suggestion:hover { border-color:var(--rp-border-strong); background:#f9fafb; }\ntyping-el, typing-el { display:flex; align-items:center; }\n.typing-el-dots { display:inline-flex; gap:4px; }\n.typing-el-dots > span { width:7px; height:7px; border-radius:50%; background:#c7c7cc; }\ncomposer-el, composer-el { display:flex; align-items:center; gap:10px; width:fit-content; min-width:520px; max-width:680px; padding:9px 9px 9px 14px; border:1px solid var(--rp-border-strong); border-radius:14px; background:#fff; }\n.composer-el-attach { display:inline-flex; color:#9ca3af; }\n.composer-el-input { flex:1; font-size:14px; }\n.composer-el-send { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#111827; color:#fff; }\n.composer-el-send.streaming { background:var(--rp-danger); }\ncitation-el, citation-el { display:inline-flex; align-items:center; gap:6px; max-width:280px; padding:3px 9px 3px 3px; border:1px solid var(--rp-border); border-radius:6px; background:#f9fafb; font-size:12px; color:#374151; }\n.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; }\n.rp-cite-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\ntoken-usage, token-usage { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#9ca3af; }\n.rp-token-track { width:90px; height:5px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\n.rp-token-fill { display:block; height:100%; background:#9ca3af; }\nanchor-el, anchor-el { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; font-size:13px; font-weight:600; color:var(--rp-primary); background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.25); border-radius:999px; cursor:pointer; text-decoration:none; vertical-align:middle; }\nanchor-el:hover, anchor-el:hover { background:rgba(37,99,235,.14); }\n.anchor-el-label { line-height:1; }\ndiagram-block, diagram-block { display:block; width:fit-content; max-width:100%; margin:10px 0; padding:12px; background:#fff; border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); overflow:auto; }\n.diagram-block-svg { display:flex; justify-content:center; }\n.diagram-block-svg svg { max-width:100%; height:auto; }\n.diagram-block-empty, .diagram-block-err { font-size:13px; color:var(--rp-muted); }\n.diagram-block-err { color:var(--rp-danger); margin-bottom:6px; }\n.diagram-block-raw { margin:0; font-family:ui-monospace,Menlo,monospace; font-size:12px; line-height:1.5; color:#374151; white-space:pre; overflow:auto; }\n";
2
+ export declare const style = "\n: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; }\n* { box-sizing:border-box; }\nbody { margin:0; font-family:var(--rp-font); color:var(--rp-text); background:var(--rp-bg); }\n.rp-icon { display:inline-block; flex:0 0 auto; vertical-align:-0.16em; }\npage-el, page-el { display:block; padding:32px 40px; overflow:visible; }\n.page-el-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:calc(100vh - 64px); align-items:start; }\n.page-el-main { display:flex; flex-direction:column; min-width:0; overflow:visible; }\n.page-el-header { flex:0 0 auto; width:fit-content; max-width:none; margin:0 0 22px; }\n.page-el-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }\n.page-el-title { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.02em; }\n.page-el-route { font-size:13px; color:var(--rp-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.7); border:1px solid var(--rp-border); border-radius:999px; padding:3px 9px; }\n.page-el-description { margin:10px 0 0; color:#374151; line-height:1.6; font-size:14px; }\n.page-el-body { flex:0 1 auto; display:block; width:fit-content; max-width:100%; min-height:0; overflow:visible; }\n.annotation-el-pane { min-width:380px; max-width:680px; position:sticky; top:32px; height:auto; min-height:calc(100vh - 64px); max-height:calc(100vh - 64px); overflow-y:auto; overflow-x:auto; padding:0 0 48px 0; align-self:start; }\n.annotation-el-pane-inner { padding:4px 12px 24px 6px; }\nmain-view, main-view { display:block; width:fit-content; margin:0 0 28px; position:relative; }\n.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); }\n.rp-main-stage-clip { overflow:hidden; border-radius:var(--rp-radius-md); }\n.rp-main-stage { position:relative; transform-origin:top left; background:var(--rp-surface); }\n.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; }\n.rp-pin > span { transform:rotate(45deg); }\n.rp-pin:hover { opacity:0.85; }\nannotation-el, annotation-el { display:block; width:fit-content; max-width:980px; margin:14px 0; line-height:1.65; color:#1f2937; font-size:14px; }\nannotation-el annotation-el, annotation-el annotation-el, annotation-el annotation-el, annotation-el annotation-el { margin:10px 0 8px 22px; }\n.annotation-el-head { display:flex; align-items:center; gap:8px; margin:0 0 4px; width:fit-content; }\n.annotation-el-title { font-weight:700; color:#111827; }\n.annotation-el-marker { display:inline-grid; place-items:center; flex:0 0 auto; color:#fff; font-size:10px; font-weight:700; line-height:1; }\n.annotation-el-marker.drop { width:22px; height:22px; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }\n.annotation-el-marker.drop > span { transform:rotate(45deg); }\n.annotation-el-marker.circle { width:16px; height:16px; background:var(--rp-purple); border-radius:50%; }\n.annotation-el-marker.triangle { width:18px; height:16px; background:var(--rp-success); clip-path:polygon(50% 0, 100% 100%, 0 100%); }\n.annotation-el-marker.triangle > span { transform:translateY(2px); font-size:9px; }\n.annotation-el-marker.global { width:20px; height:20px; background:#0f172a; border-radius:6px; font-size:11px; }\nannotation-global-el, annotation-global-el { display:block; width:fit-content; max-width:980px; margin:0 0 18px; padding:10px 12px 12px; line-height:1.65; color:#1f2937; font-size:14px; background:var(--rp-surface-soft); border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); }\n.annotation-el-pane annotation-global-el, .annotation-el-pane annotation-global-el { max-width:none; }\n.annotation-el-pane annotation-global-el .annotation-el-body { max-width:none; }\n.annotation-el-body { display:block; position:relative; width:fit-content; max-width:920px; }\n.rp-pin-slice { width:18px; height:18px; font-size:10px; box-shadow:0 1px 5px rgba(37,99,235,.3); }\n.annotation-el-body > :not(annotation-el):not(annotation-el):not(enum-el):not(enum-el) { max-width:820px; }\n.annotation-el-pane annotation-el, .annotation-el-pane annotation-el { max-width:none; }\n.annotation-el-pane .annotation-el-body { max-width:none; }\n.annotation-el-pane .annotation-el-body > :not(annotation-el):not(annotation-el):not(enum-el):not(enum-el) { max-width:420px; }\n.annotation-el-body p { margin:0 0 8px; }\nenum-el, enum-el { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; width:fit-content; margin:8px 0 12px; }\n.annotation-el-pane enum-el, .annotation-el-pane enum-el { flex-wrap:wrap; }\nenum-item, enum-item { display:block; flex:0 0 auto; width:fit-content; min-width:180px; max-width:600px; border:1px solid #f0f0f0; border-radius:var(--rp-radius-md); background:#fff; overflow:hidden; }\n.enum-el-label { display:flex; align-items:flex-start; gap:6px; padding:5px 9px 4px; font-size:12px; font-weight:650; color:#374151; }\n.enum-el-index { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; background:#111827; color:#fff; font-size:10px; font-weight:750; border-radius:3px; flex:0 0 auto; margin-top:1px; }\n.enum-el-label-text { display:block; }\n.enum-el-description { display:block; margin-top:2px; font-size:11px; line-height:1.35; font-weight:400; color:var(--rp-muted); }\n.enum-el-content { display:block; width:fit-content; padding:8px; }\n.annotation-el-title { font-weight:700; color:#111827; cursor:pointer; }\n.annotation-el-title:hover { color:var(--rp-primary); }\n.rp-section-focus { outline:2px dashed var(--rp-primary); outline-offset:4px; border-radius:4px; }\nviewport-el, viewport-el { display:flex; flex-direction:column; width:var(--snap-width,1440px); height:var(--snap-height,900px); background:#f8fafc; overflow:hidden; color:#111827; }\nlayout-el, layout-el { display:grid; grid-template-columns:var(--snap-columns,1fr); grid-template-rows:var(--snap-rows,auto); gap:var(--snap-gap,0); align-content:start; width:fit-content; max-width:100%; min-width:0; }\nlayout-el > *, layout-el > * { min-width:0; }\nviewport-el layout-el, viewport-el layout-el { width:100%; }\nviewport-el > layout-el, viewport-el > layout-el { flex:1 1 auto; min-height:0; }\nviewport-el > navbar-el, viewport-el > navbar-el { flex:0 0 auto; }\npanel-el, panel-el { margin:8px; 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); }\nviewport-el panel-el, viewport-el panel-el { margin:8px; width:auto; min-width:0; }\npanel-el[elevation=\"1\"], panel-el[elevation=\"1\"] { box-shadow:0 4px 16px rgba(15,23,42,.06); }\npanel-el[elevation=\"2\"], panel-el[elevation=\"2\"] { box-shadow:var(--rp-shadow); }\nnavbar-el, navbar-el { display:flex; align-items:center; gap:14px; height:var(--snap-height,64px); padding:0 24px; background:#fff; border-bottom:1px solid var(--rp-border); }\nsidebar-el, sidebar-el { display:block; width:var(--snap-width,260px); min-height:0; background:#fff; border-right:1px solid var(--rp-border); padding:14px; }\nviewport-el sidebar-el, viewport-el sidebar-el { min-height:100%; }\nsidebar-el[collapsed], sidebar-el[collapsed] { width:72px; }\nlogo-el, logo-el { display:inline-grid; place-items:center; width:var(--snap-size,82px); height:32px; border-radius:8px; background:#111827; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; }\nsearch-el, search-el, input-el, input-el, date-picker, date-picker { display:inline-flex; align-items:center; gap:8px; width:280px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }\ntextarea-el, textarea-el { display:block; width:320px; min-height:calc(var(--snap-rows,3) * 24px + 22px); padding:9px 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; white-space:pre-wrap; }\nsearch-el[state=\"focus\"], search-el[state=\"focus\"], input-el[state=\"focus\"], input-el[state=\"focus\"], textarea-el[state=\"focus\"], textarea-el[state=\"focus\"], date-picker[state=\"focus\"], date-picker[state=\"focus\"] { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsearch-el[state=\"filled\"], search-el[state=\"filled\"], input-el[state=\"filled\"], input-el[state=\"filled\"], textarea-el[state=\"filled\"], textarea-el[state=\"filled\"], date-picker[state=\"filled\"], date-picker[state=\"filled\"] { border-color:#93c5fd; background:#f8fbff; }\nsearch-el[state=\"error\"], search-el[state=\"error\"], input-el[state=\"error\"], input-el[state=\"error\"], textarea-el[state=\"error\"], textarea-el[state=\"error\"], date-picker[state=\"error\"], date-picker[state=\"error\"] { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\nsearch-el[state=\"disabled\"], search-el[state=\"disabled\"], input-el[state=\"disabled\"], input-el[state=\"disabled\"], textarea-el[state=\"disabled\"], textarea-el[state=\"disabled\"], date-picker[state=\"disabled\"], date-picker[state=\"disabled\"] { opacity:.55; background:#f3f4f6; }\ninput-el[label], input-el[label], date-picker[label], date-picker[label] { display:inline-grid; align-items:start; gap:6px; width:280px; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }\ninput-el[label][state=\"focus\"], input-el[label][state=\"focus\"], input-el[label][state=\"filled\"], input-el[label][state=\"filled\"], input-el[label][state=\"error\"], input-el[label][state=\"error\"], date-picker[label][state=\"focus\"], date-picker[label][state=\"focus\"], date-picker[label][state=\"filled\"], date-picker[label][state=\"filled\"], date-picker[label][state=\"error\"], date-picker[label][state=\"error\"] { border:0; background:transparent; box-shadow:none; }\n.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; }\ninput-el[state=\"focus\"] .rp-field-control, input-el[state=\"focus\"] .rp-field-control, date-picker[state=\"focus\"] .rp-field-control, date-picker[state=\"focus\"] .rp-field-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\ninput-el[state=\"filled\"] .rp-field-control, input-el[state=\"filled\"] .rp-field-control, date-picker[state=\"filled\"] .rp-field-control, date-picker[state=\"filled\"] .rp-field-control { border-color:#93c5fd; background:#f8fbff; }\ninput-el[state=\"error\"] .rp-field-control, input-el[state=\"error\"] .rp-field-control, date-picker[state=\"error\"] .rp-field-control, date-picker[state=\"error\"] .rp-field-control { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\n.rp-field-label { display:block; margin:0 0 6px; color:#374151; font-size:12px; font-weight:650; }\n.rp-placeholder { color:#9ca3af; }\n.rp-value { color:#111827; }\n.rp-error-text { color:var(--rp-danger); font-size:12px; }\nselect-el, select-el { display:inline-block; width:280px; max-width:100%; }\n.select-el-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; }\nselect-el[state=\"expanded\"] .select-el-control, select-el[state=\"expanded\"] .select-el-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nselect-el[state=\"disabled\"], select-el[state=\"disabled\"] { opacity:.55; }\n.select-el-value { flex:1 1 auto; min-width:0; }\n.select-el-options { display:none; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; box-shadow:0 10px 18px rgba(15,23,42,.08); }\nselect-el[state=\"expanded\"] .select-el-options, select-el[state=\"expanded\"] .select-el-options { display:grid; gap:2px; }\n.select-el-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.select-el-option.selected { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nbadge-el, badge-el { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:750; }\navatar-el, avatar-el { display:inline-grid; place-items:center; width:var(--snap-size,32px); height:var(--snap-size,32px); border-radius:999px; background:#e0e7ff; color:#3730a3; font-size:12px; font-weight:800; }\nlist-el, list-el { display:flex; flex-direction:column; gap:4px; width:100%; }\nlist-item, list-item { display:flex; align-items:center; gap:8px; width:100%; min-width:180px; height:36px; padding:0 10px; border-radius:8px; color:#374151; }\nlist-item[state=\"selected\"], list-item[state=\"selected\"] { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nlist-item[state=\"disabled\"], list-item[state=\"disabled\"] { opacity:.5; }\n.list-el-label { flex:1 1 auto; }\n.list-el-badge { margin-left:auto; min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center; padding:0 6px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }\ntabs-el, tabs-el { display:flex; gap:6px; border-bottom:1px solid var(--rp-border); margin-bottom:12px; width:fit-content; }\ntab-el, tab-el { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; }\ntab-el.tab-el-active, tab-el.tab-el-active { color:var(--rp-primary); border-bottom-color:var(--rp-primary); font-weight:700; }\nbutton-el, button-el { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--rp-border); background:#fff; color:#374151; font-size:13px; font-weight:650; }\nbutton-el[size=\"sm\"], button-el[size=\"sm\"] { min-height:28px; padding:0 9px; font-size:12px; border-radius:6px; }\nbutton-el[size=\"lg\"], button-el[size=\"lg\"] { min-height:40px; padding:0 16px; font-size:14px; }\nbutton-el[variant=\"primary\"], button-el[variant=\"primary\"] { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\nbutton-el[variant=\"secondary\"], button-el[variant=\"secondary\"] { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }\nbutton-el[variant=\"danger\"], button-el[variant=\"danger\"] { border-color:var(--rp-danger); color:var(--rp-danger); }\nbutton-el[variant=\"link\"], button-el[variant=\"link\"] { border-color:transparent; background:transparent; color:var(--rp-primary); padding-inline:2px; }\nbutton-el[variant=\"ghost\"], button-el[variant=\"ghost\"] { border-color:transparent; background:transparent; }\nbutton-el[state=\"disabled\"], button-el[state=\"disabled\"], button-el[disabled], button-el[disabled] { opacity:.5; }\nbutton-group, button-group { display:inline-flex; gap:0; width:fit-content; }\nbutton-group > button-el, button-group > button-el { border-radius:0; margin-left:-1px; }\nbutton-group > :first-child { border-radius:8px 0 0 8px; margin-left:0; }\nbutton-group > :last-child { border-radius:0 8px 8px 0; }\ntable-el, table-el { display:table; border-collapse:collapse; width:fit-content; min-width:720px; max-width:980px; background:#fff; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nviewport-el table-el, viewport-el table-el { width:100%; max-width:none; }\n.table-row { display:table-row; }\n.table-el-cell { display:table-cell; padding:11px 12px; border-bottom:1px solid var(--rp-border); font-size:13px; vertical-align:middle; white-space:nowrap; }\n.table-el-head .table-el-cell { background:#f9fafb; color:#6b7280; font-size:12px; font-weight:750; }\n.table-row:last-child .table-el-cell { border-bottom:0; }\ntable-row, table-row { display:grid; grid-template-columns:44px 150px 240px 90px 90px; align-items:center; min-width:560px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#fff; }\ntable-row > span, table-row > span { padding:10px 12px; font-size:13px; }\ntable-row[state=\"unread\"], table-row[state=\"unread\"] { background:#eff6ff; font-weight:700; }\ntable-row[state=\"selected\"], table-row[state=\"selected\"] { outline:2px solid rgba(37,99,235,.35); background:#f8fbff; }\ntable-row[state=\"highlighted\"], table-row[state=\"highlighted\"] { background:#fffbeb; }\ntable-row[state=\"disabled\"], table-row[state=\"disabled\"] { opacity:.5; }\nbulk-action-bar, bulk-action-bar { display:flex; align-items:center; gap:8px; width:fit-content; padding:8px 10px; margin:0 0 10px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:8px; color:#1e40af; font-size:13px; font-weight:650; }\nempty-el, empty-el { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:240px; padding:24px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; }\n.empty-el-title { color:#111827; font-weight:700; }\n.empty-el-desc { font-size:13px; }\nloading-el, loading-el { display:grid; gap:8px; min-width:260px; color:var(--rp-primary); }\n.skeleton-el-line { height:14px; border-radius:999px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }\n.rp-spinner { display:inline-grid; place-items:center; width:32px; height:32px; }\nalert-el, alert-el, toast-el, toast-el { display:flex; align-items:flex-start; gap:8px; width:fit-content; max-width:420px; padding:10px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\nalert-el[type=\"info\"], alert-el[type=\"info\"], toast-el[type=\"info\"], toast-el[type=\"info\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nalert-el[type=\"success\"], alert-el[type=\"success\"], toast-el[type=\"success\"], toast-el[type=\"success\"] { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }\nalert-el[type=\"warning\"], alert-el[type=\"warning\"], toast-el[type=\"warning\"], toast-el[type=\"warning\"] { border-color:#fde68a; background:#fffbeb; color:#92400e; }\nalert-el[type=\"error\"], alert-el[type=\"error\"], toast-el[type=\"error\"], toast-el[type=\"error\"] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }\ndropdown-el, dropdown-el, popover-el, popover-el { display:block; width:var(--snap-width,300px); padding:8px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.1); }\ntooltip-el, tooltip-el { display:inline-block; width:fit-content; max-width:240px; padding:6px 8px; border-radius:6px; background:#111827; color:#fff; font-size:12px; }\n.rp-overlay-title { margin:0 0 8px; color:#111827; font-size:14px; font-weight:750; }\nmodal-el, modal-el { display:block; width:min(var(--snap-width,480px), 100%); border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); overflow:hidden; }\ndrawer-el, drawer-el { display:block; width:min(var(--snap-width,360px), 100%); min-height:320px; border:1px solid var(--rp-border); background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.14); }\n.modal-el-head, .drawer-el-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--rp-border); font-weight:750; }\n.modal-el-body, .drawer-el-body { padding:16px; }\n.modal-el-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--rp-border); background:#f9fafb; }\ncard-el, card-el { display:block; width:auto; min-width:220px; padding:14px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.card-el-image { display:grid; place-items:center; height:120px; margin:-14px -14px 12px; border-radius:10px 10px 0 0; background:#f3f4f6; color:#6b7280; }\n.card-el-title { display:block; color:#111827; font-weight:750; }\n.card-el-subtitle { display:block; margin-top:4px; color:#6b7280; font-size:13px; }\n.card-el-footer { display:block; margin:12px -14px -14px; padding:10px 14px; border-top:1px solid var(--rp-border); background:#f9fafb; }\nstat-card, stat-card { display:grid; gap:6px; width:auto; min-width:0; padding:16px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-stat-label { color:#6b7280; font-size:12px; font-weight:650; }\n.rp-stat-value { color:#111827; font-size:26px; font-weight:800; }\n.rp-stat-change { font-size:12px; font-weight:700; }\nstat-card[trend=\"up\"] .rp-stat-change, stat-card[trend=\"up\"] .rp-stat-change { color:var(--rp-success); }\nstat-card[trend=\"down\"] .rp-stat-change, stat-card[trend=\"down\"] .rp-stat-change { color:var(--rp-danger); }\ntag-el, tag-el { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:650; }\ntag-el[color=\"green\"], tag-el[color=\"green\"] { background:#dcfce7; color:#166534; }\ntag-el[color=\"orange\"], tag-el[color=\"orange\"] { background:#ffedd5; color:#9a3412; }\ntag-el[color=\"red\"], tag-el[color=\"red\"] { background:#fee2e2; color:#991b1b; }\ncheckbox-el, checkbox-el, radio-el, radio-el { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.rp-box { display:inline-grid; place-items:center; width:16px; height:16px; border:1px solid var(--rp-border-strong); border-radius:4px; color:#fff; }\ncheckbox-el[state=\"checked\"] .rp-box, checkbox-el[state=\"checked\"] .rp-box, radio-el[state=\"checked\"] .rp-box, radio-el[state=\"checked\"] .rp-box, checkbox-el[state=\"indeterminate\"] .rp-box, checkbox-el[state=\"indeterminate\"] .rp-box { background:var(--rp-primary); border-color:var(--rp-primary); }\ncheckbox-el[state=\"disabled\"], checkbox-el[state=\"disabled\"], radio-el[state=\"disabled\"], radio-el[state=\"disabled\"] { opacity:.5; }\nradio-el .rp-box, radio-el .rp-box { border-radius:999px; }\ntoggle-el, toggle-el { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.toggle-el-track { display:flex; align-items:center; width:34px; height:20px; border-radius:999px; background:#d1d5db; padding:2px; }\n.toggle-el-dot { display:block; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:none; }\ntoggle-el[state=\"on\"] .toggle-el-track, toggle-el[state=\"on\"] .toggle-el-track { background:var(--rp-primary); }\ntoggle-el[state=\"on\"] .toggle-el-dot, toggle-el[state=\"on\"] .toggle-el-dot { margin-left:14px; }\ntoggle-el[state=\"disabled\"], toggle-el[state=\"disabled\"] { opacity:.5; }\nform-el, form-el { display:grid; gap:12px; width:fit-content; max-width:100%; }\nform-el[layout=\"horizontal\"], form-el[layout=\"horizontal\"] { grid-template-columns:max-content 1fr; align-items:start; }\nform-item, form-item { display:grid; gap:6px; width:fit-content; max-width:100%; }\nform-item > *, form-item > * { max-width:100%; }\n.form-el-label { color:#374151; font-size:12px; font-weight:700; }\n.form-el-label.required::after { content:\" *\"; color:var(--rp-danger); }\n.form-el-error { color:var(--rp-danger); font-size:12px; }\nupload-el, upload-el { display:grid; justify-items:center; gap:8px; width:280px; padding:18px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; font-size:13px; }\nupload-el[state=\"has-file\"], upload-el[state=\"has-file\"] { justify-items:start; border-style:solid; color:#374151; }\nupload-el[state=\"uploading\"], upload-el[state=\"uploading\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nimage-placeholder, image-placeholder { display:grid; place-items:center; width:var(--snap-width,160px); height:var(--snap-height,100px); background:#f3f4f6; border:1px dashed var(--rp-border-strong); border-radius:8px; color:#6b7280; font-size:12px; }\nprogress-el, progress-el { display:block; width:180px; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\nprogress-el[kind=\"circle\"], progress-el[kind=\"circle\"], progress-el[style=\"circle\"], progress-el[style=\"circle\"] { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:conic-gradient(var(--rp-primary) var(--progress,40%), #e5e7eb 0); font-size:12px; font-weight:750; }\n.progress-el-bar { display:block; height:100%; width:var(--progress,40%); background:var(--rp-primary); }\nprogress-el[status=\"success\"] .progress-el-bar, progress-el[status=\"success\"] .progress-el-bar { background:var(--rp-success); }\nprogress-el[status=\"error\"] .progress-el-bar, progress-el[status=\"error\"] .progress-el-bar { background:var(--rp-danger); }\npagination-el, pagination-el { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:13px; }\n.page-el-btn { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border:1px solid var(--rp-border); border-radius:6px; background:#fff; color:#374151; }\n.page-el-btn.active { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; font-weight:750; }\nsteps-el, steps-el { display:flex; align-items:center; gap:8px; width:fit-content; }\n.rp-step { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.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; }\n.rp-step.active { color:var(--rp-primary); font-weight:750; }\n.rp-step.active .rp-step-dot { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\n.rp-step.done .rp-step-dot { border-color:var(--rp-success); background:var(--rp-success); color:#fff; }\n.rp-step-sep { width:28px; height:1px; background:var(--rp-border); }\nbreadcrumb-el, breadcrumb-el { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.breadcrumb-el-current { color:#111827; font-weight:650; }\n\n/* --- data input --- */\nslider-el, slider-el { display:inline-flex; align-items:center; gap:10px; width:220px; }\n.slider-el-track { position:relative; flex:1; height:4px; border-radius:999px; background:#e5e7eb; }\n.slider-el-fill { position:absolute; height:100%; border-radius:999px; background:var(--rp-primary); }\n.slider-el-thumb { position:absolute; top:50%; width:16px; height:16px; margin-left:-8px; transform:translateY(-50%); border-radius:50%; background:#fff; border:1px solid var(--rp-border-strong); }\n.slider-el-value { font-size:12px; color:#374151; min-width:24px; }\nrange-el, range-el { display:inline-flex; align-items:center; width:220px; }\nnumber-input, number-input { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 4px 0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; width:120px; }\n.rp-num-value { flex:1; font-size:13px; }\n.rp-num-steppers { display:flex; flex-direction:column; }\n.rp-num-step { display:grid; place-items:center; width:20px; height:15px; color:#6b7280; cursor:pointer; }\nrating-el, rating-el { display:inline-flex; gap:2px; color:#d1d5db; }\n.rp-star.filled { color:#f59e0b; }\npin-input, pin-input { display:inline-flex; gap:8px; }\n.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; }\n.rp-pin-cell.active { border-color:var(--rp-primary); }\ncolor-swatch, color-swatch { display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }\n.rp-swatch-chip { width:24px; height:24px; border-radius:6px; border:1px solid rgba(0,0,0,.1); }\n.rp-swatch-hex { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }\nautocomplete-el, autocomplete-el { display:inline-block; width:280px; }\n.rp-ac-options { display:grid; gap:1px; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }\n.rp-ac-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-ac-option:first-child { background:#eff6ff; color:#1d4ed8; }\n\n/* --- data display additions --- */\nchip-el, chip-el { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--rp-border); background:#f9fafb; color:#374151; font-size:12px; }\ntree-el, tree-el { display:flex; flex-direction:column; gap:1px; width:fit-content; min-width:240px; }\n.tree-el-row { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; color:#374151; font-size:13px; padding-left:calc(8px + var(--tree-level,0) * 18px); }\n.tree-el-row.selected { background:#eff6ff; color:#1d4ed8; font-weight:650; }\n.tree-el-spacer { display:inline-block; width:12px; }\n.tree-el-label { flex:1; }\ntimeline-el, timeline-el { display:flex; flex-direction:column; width:fit-content; min-width:260px; }\ntimeline-item, timeline-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }\ntimeline-item:not(:last-child)::before, timeline-item:not(:last-child)::before { content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--rp-border); }\n.timeline-el-dot { flex:0 0 auto; width:14px; height:14px; margin-top:2px; border-radius:50%; background:#fff; border:2px solid var(--rp-border-strong); z-index:1; }\n.timeline-el-dot.active { border-color:var(--rp-primary); background:var(--rp-primary); }\n.timeline-el-dot.done { border-color:var(--rp-success); background:var(--rp-success); }\n.timeline-el-dot.error { border-color:var(--rp-danger); background:var(--rp-danger); }\n.timeline-el-main { flex:1; }\n.timeline-el-head { display:flex; align-items:baseline; gap:8px; }\n.timeline-el-label { font-weight:650; color:#111827; font-size:13px; }\n.timeline-el-time { font-size:12px; color:#9ca3af; }\n.timeline-el-content { font-size:13px; color:#6b7280; margin-top:2px; }\ncalendar-el, calendar-el { display:inline-block; width:280px; padding:12px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-cal-head { text-align:center; font-weight:700; font-size:14px; margin-bottom:10px; }\n.rp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }\n.rp-cal-dow { display:grid; place-items:center; height:24px; font-size:11px; color:#9ca3af; }\n.rp-cal-cell { display:grid; place-items:center; height:32px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-cal-cell.selected { background:var(--rp-primary); color:#fff; font-weight:700; }\n.rp-cal-cell.muted { color:transparent; }\nkanban-el, kanban-el { display:flex; gap:12px; width:fit-content; align-items:flex-start; }\nkanban-column, kanban-column { display:flex; flex-direction:column; width:200px; padding:10px; border-radius:10px; background:#f3f4f6; }\n.kanban-el-head { display:flex; align-items:center; justify-content:space-between; font-weight:650; font-size:13px; margin-bottom:8px; color:#374151; }\n.kanban-el-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e5e7eb; font-size:11px; }\n.kanban-el-body { display:flex; flex-direction:column; gap:8px; }\nkanban-card, kanban-card { display:block; padding:10px; border-radius:8px; background:#fff; border:1px solid var(--rp-border); }\n.kanban-card-title { display:block; font-size:13px; color:#111827; }\n.kanban-card-tag { display:inline-block; margin-top:6px; padding:1px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; }\ncode-block, code-block { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#0f172a; }\n.rp-code-head { padding:6px 12px; font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#94a3b8; background:#1e293b; }\n.rp-code-body { padding:10px 0; }\n.rp-code-line { display:flex; align-items:center; gap:12px; padding:1px 12px; }\n.rp-code-ln { width:20px; text-align:right; color:#475569; font-family:ui-monospace,Menlo,monospace; font-size:11px; }\n.rp-code-bar { height:8px; border-radius:3px; background:#334155; }\ndiff-el, diff-el { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; font-family:ui-monospace,Menlo,monospace; }\n.diff-el-line { display:flex; align-items:center; gap:10px; padding:2px 10px; }\n.diff-el-line.add { background:#dcfce7; }\n.diff-el-line.del { background:#fee2e2; }\n.diff-el-sign { width:10px; color:#6b7280; }\n.diff-el-line.add .rp-code-bar { background:#86efac; }\n.diff-el-line.del .rp-code-bar { background:#fca5a5; }\n.diff-el-line.ctx .rp-code-bar { background:#e5e7eb; }\nimage-grid, image-grid { display:grid; grid-template-columns:repeat(var(--grid-cols,3),1fr); gap:8px; width:fit-content; }\n.rp-grid-cell { display:grid; place-items:center; width:80px; height:80px; border-radius:8px; background:#f3f4f6; color:#9ca3af; }\nkey-value, key-value { display:flex; flex-direction:column; width:fit-content; min-width:240px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nkv-row, kv-row { display:flex; border-bottom:1px solid var(--rp-border); }\nkv-row:last-child, kv-row:last-child { border-bottom:0; }\n.rp-kv-key { width:120px; padding:8px 12px; background:#f9fafb; color:#6b7280; font-size:13px; }\n.rp-kv-val { flex:1; padding:8px 12px; color:#111827; font-size:13px; }\naccordion-el, accordion-el { display:flex; flex-direction:column; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\naccordion-item, accordion-item { display:block; border-bottom:1px solid var(--rp-border); }\naccordion-item:last-child, accordion-item:last-child { border-bottom:0; }\n.accordion-el-head { display:flex; align-items:center; gap:8px; padding:11px 14px; font-weight:650; font-size:13px; color:#111827; }\n.accordion-el-body { padding:0 14px 14px 36px; font-size:13px; color:#6b7280; }\nbanner-el, banner-el { display:flex; align-items:center; gap:10px; width:fit-content; min-width:480px; padding:12px 16px; border-radius:8px; font-size:13px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }\nbanner-el[type=\"success\"], banner-el[type=\"success\"] { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }\nbanner-el[type=\"warning\"], banner-el[type=\"warning\"] { background:#fffbeb; color:#92400e; border-color:#fde68a; }\nbanner-el[type=\"error\"], banner-el[type=\"error\"] { background:#fef2f2; color:#991b1b; border-color:#fecaca; }\n.banner-el-text { flex:1; }\nskeleton-el, skeleton-el { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:240px; }\n.rp-skel { border-radius:8px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }\n.rp-skel-block { height:120px; }\n.rp-skel-avatar { width:40px; height:40px; border-radius:50%; }\n.rp-skel-avatar.sm { width:28px; height:28px; }\n.rp-skel-row { display:flex; align-items:center; gap:10px; }\ncountdown-el, countdown-el { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#fef2f2; color:#991b1b; font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }\nresult-el, result-el { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:280px; padding:32px; text-align:center; }\n.result-el-icon.success { color:var(--rp-success); }\n.result-el-icon.error { color:var(--rp-danger); }\n.result-el-icon.empty { color:#9ca3af; }\n.result-el-title { font-size:16px; font-weight:700; color:#111827; }\n.result-el-desc { font-size:13px; color:#6b7280; }\npermission-gate, permission-gate { display:block; position:relative; width:fit-content; }\n.rp-gate-content { opacity:.4; filter:grayscale(1); pointer-events:none; }\n.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; }\nquota-bar, quota-bar { display:block; width:fit-content; min-width:240px; }\n.rp-quota-head { display:flex; justify-content:space-between; font-size:12px; color:#374151; margin-bottom:5px; }\n.rp-quota-num.danger { color:var(--rp-danger); font-weight:700; }\n.rp-quota-track { display:block; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\n.rp-quota-fill { display:block; height:100%; background:var(--rp-primary); }\n.rp-quota-fill.danger { background:var(--rp-danger); }\napi-key, api-key { display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#f9fafb; }\n.rp-apikey-val { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }\n.rp-apikey-copy { display:grid; place-items:center; width:26px; height:26px; border-radius:6px; color:#6b7280; }\naudit-row, audit-row { display:flex; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--rp-border); width:fit-content; min-width:320px; font-size:13px; }\n.rp-audit-actor { font-weight:650; color:#111827; }\n.rp-audit-action { flex:1; color:#6b7280; }\n.rp-audit-time { color:#9ca3af; font-size:12px; }\nworkflow-node, workflow-node { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\n.rp-wf-icon.done { color:var(--rp-success); }\n.rp-wf-icon.active { color:var(--rp-primary); }\n.rp-wf-icon.error { color:var(--rp-danger); }\n.rp-wf-icon.default { color:#9ca3af; }\n\n/* --- navigation & layout additions --- */\nsegmented-el, segmented-el { display:inline-flex; padding:2px; border-radius:8px; background:#f3f4f6; gap:2px; }\n.rp-seg-item { padding:5px 14px; border-radius:6px; font-size:13px; color:#6b7280; }\n.rp-seg-item.active { background:#fff; color:#111827; font-weight:650; }\ncommand-palette, command-palette { display:block; width:520px; border:1px solid var(--rp-border); border-radius:12px; background:#fff; overflow:hidden; }\n.rp-cmdk-input { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--rp-border); }\n.rp-cmdk-list { padding:6px; }\n.rp-cmdk-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:#374151; }\n.rp-cmdk-item.active { background:#eff6ff; color:#1d4ed8; }\ncontext-menu, context-menu, menu-el, menu-el { display:inline-flex; flex-direction:column; min-width:180px; padding:5px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.menu-item, menu-item, menu-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; font-size:13px; color:#374151; }\n.menu-item.danger, menu-item.danger, menu-item.danger { color:var(--rp-danger); }\n.menu-item.disabled, menu-item.disabled, menu-item.disabled { opacity:.45; }\n.menu-el-label { flex:1; }\n.menu-el-shortcut { color:#9ca3af; font-size:12px; }\ntoc-el, toc-el { display:flex; flex-direction:column; gap:2px; width:fit-content; min-width:160px; border-left:2px solid var(--rp-border); }\n.toc-el-item { padding:4px 12px; font-size:13px; color:#6b7280; border-left:2px solid transparent; margin-left:-2px; }\n.toc-el-item.active { color:var(--rp-primary); border-left-color:var(--rp-primary); font-weight:650; }\nkbd-el, kbd-el { display:inline-flex; align-items:center; gap:3px; }\n.kbd-el-key { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:1px solid var(--rp-border-strong); border-bottom-width:2px; border-radius:5px; background:#f9fafb; font-size:11px; font-family:var(--rp-font); color:#374151; }\n.kbd-el-plus { color:#9ca3af; font-size:11px; }\nsplit-pane, split-pane { display:grid; grid-template-columns:var(--snap-columns,1fr 1fr); width:fit-content; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsplit-pane > *, split-pane > * { padding:14px; }\nsplit-pane > *:not(:last-child), split-pane > *:not(:last-child) { border-right:1px solid var(--rp-border); }\ndivider-el, divider-el { display:block; height:1px; background:var(--rp-border); margin:12px 0; }\ndivider-el.divider-el-v, divider-el.divider-el-v { display:inline-block; width:1px; height:auto; align-self:stretch; margin:0 12px; }\nspacer-el, spacer-el { display:block; height:var(--snap-size,16px); }\n\n/* --- iOS --- */\nios-navbar, ios-navbar { display:block; background:rgba(249,249,249,.94); border-bottom:1px solid #d8d8dc; padding:6px 12px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }\n.ios-navbar-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:36px; }\n.rp-ios-nav-leading { display:flex; align-items:center; gap:2px; color:#007aff; font-size:15px; }\n.rp-ios-nav-title { text-align:center; font-weight:600; font-size:16px; color:#000; }\n.rp-ios-nav-trailing { text-align:right; color:#007aff; font-size:15px; }\n.rp-ios-nav-large { font-size:30px; font-weight:700; color:#000; padding:2px 2px 6px; }\nios-tabbar, ios-tabbar { display:flex; background:rgba(249,249,249,.94); border-top:1px solid #d8d8dc; padding:6px 0 4px; }\n.rp-ios-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; color:#8e8e93; font-size:10px; }\n.rp-ios-tab.active { color:#007aff; }\n.rp-ios-tab-label { font-size:10px; }\nios-list, ios-list { display:block; border-radius:10px; background:#fff; overflow:hidden; width:fit-content; min-width:300px; border:1px solid #e5e5ea; font-family:-apple-system,sans-serif; }\n.ios-list-header { padding:6px 16px; font-size:13px; color:#6d6d72; background:#f2f2f7; text-transform:none; }\nios-list-item, ios-list-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid #e5e5ea; font-size:15px; color:#000; }\nios-list-item:last-child, ios-list-item:last-child { border-bottom:0; }\n.rp-ios-li-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; background:#007aff; color:#fff; }\n.rp-ios-li-label { flex:1; }\n.rp-ios-li-detail { color:#8e8e93; }\n.rp-ios-li-chevron { color:#c7c7cc; }\nios-action-sheet, ios-action-sheet { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:320px; padding:8px; font-family:-apple-system,sans-serif; }\n.rp-ios-as-group { border-radius:14px; overflow:hidden; background:rgba(255,255,255,.82); backdrop-filter:blur(20px); }\n.rp-ios-as-title { padding:14px; text-align:center; font-size:13px; color:#8e8e93; border-bottom:1px solid #d1d1d6; }\n.rp-ios-as-action { padding:16px; text-align:center; font-size:18px; color:#007aff; border-bottom:1px solid #d1d1d6; }\n.rp-ios-as-action:last-child { border-bottom:0; }\n.rp-ios-as-action.destructive { color:#ff3b30; }\n.rp-ios-as-action.cancel { font-weight:600; }\nios-alert, ios-alert { display:block; width:270px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); font-family:-apple-system,sans-serif; }\n.ios-alert-body { padding:18px 16px 14px; text-align:center; }\n.ios-alert-title { font-size:17px; font-weight:600; color:#000; }\n.ios-alert-msg { margin-top:3px; font-size:13px; color:#000; }\n.ios-alert-actions { display:flex; border-top:1px solid #d1d1d6; }\n.ios-alert-btn { flex:1; padding:11px; text-align:center; font-size:17px; color:#007aff; }\n.ios-alert-btn.primary { font-weight:600; }\n.ios-alert-btn:not(:last-child) { border-right:1px solid #d1d1d6; }\nios-switch, ios-switch { display:inline-flex; align-items:center; gap:8px; font-family:-apple-system,sans-serif; font-size:15px; }\n.ios-switch-track { width:51px; height:31px; border-radius:999px; background:#34c759; padding:2px; }\n.ios-switch-dot { display:block; width:27px; height:27px; border-radius:50%; background:#fff; margin-left:20px; }\nios-segmented, ios-segmented { display:inline-flex; padding:2px; border-radius:9px; background:#767680; background:rgba(118,118,128,.12); gap:2px; font-family:-apple-system,sans-serif; }\n.rp-ios-seg-item { padding:6px 16px; border-radius:7px; font-size:13px; color:#000; }\n.rp-ios-seg-item.active { background:#fff; font-weight:600; }\nios-button, ios-button { display:inline-grid; place-items:center; min-height:34px; padding:0 16px; border-radius:8px; background:#007aff; color:#fff; font-size:15px; font-weight:600; font-family:-apple-system,sans-serif; }\nios-button[variant=\"tinted\"], ios-button[variant=\"tinted\"] { background:rgba(0,122,255,.15); color:#007aff; }\nios-button[variant=\"plain\"], ios-button[variant=\"plain\"] { background:transparent; color:#007aff; }\nios-search, ios-search { display:inline-flex; align-items:center; gap:6px; width:280px; height:36px; padding:0 10px; border-radius:10px; background:rgba(118,118,128,.12); color:#8e8e93; font-size:15px; font-family:-apple-system,sans-serif; }\nios-stepper, ios-stepper { display:inline-flex; align-items:center; border-radius:8px; background:rgba(118,118,128,.12); }\n.rp-ios-step { display:grid; place-items:center; width:46px; height:32px; color:#000; }\n.rp-ios-step-div { width:1px; height:18px; background:rgba(0,0,0,.15); }\n\n/* --- macOS --- */\nmacos-window, macos-window { display:block; width:fit-content; min-width:480px; border-radius:10px; overflow:hidden; border:1px solid #d1d1d6; background:#fff; font-family:-apple-system,sans-serif; }\n.rp-mac-titlebar { display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; background:#ececec; border-bottom:1px solid #d1d1d6; }\n.rp-mac-lights { display:flex; gap:8px; }\n.rp-mac-light { width:12px; height:12px; border-radius:50%; }\n.rp-mac-light.close { background:#ff5f57; }\n.rp-mac-light.min { background:#febc2e; }\n.rp-mac-light.max { background:#28c840; }\n.rp-mac-title { flex:1; text-align:center; font-size:13px; font-weight:600; color:#3c3c43; }\n.rp-mac-window-body { padding:0; }\nmacos-toolbar, macos-toolbar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#f6f6f6; border-bottom:1px solid #d1d1d6; }\nmacos-menubar, macos-menubar { display:flex; align-items:center; gap:18px; height:26px; padding:0 14px; background:rgba(246,246,246,.9); border-bottom:1px solid #d1d1d6; font-size:13px; font-family:-apple-system,sans-serif; }\n.rp-mac-menubar-apple { color:#000; }\n.rp-mac-menu-title { color:#000; }\n.rp-mac-menu-title.active { background:#007aff; color:#fff; padding:1px 7px; border-radius:4px; }\nmacos-sidebar, macos-sidebar { display:flex; flex-direction:column; gap:1px; width:220px; padding:8px; background:rgba(246,246,246,.85); font-family:-apple-system,sans-serif; }\nmacos-source-item, macos-source-item { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px; font-size:13px; color:#3c3c43; }\nmacos-source-item.selected, macos-source-item.selected { background:#007aff; color:#fff; }\n.rp-mac-source-group { padding:8px 8px 3px; font-size:11px; font-weight:700; color:#8e8e93; text-transform:uppercase; }\nmacos-segmented, macos-segmented { display:inline-flex; border:1px solid #c4c4c7; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }\n.rp-mac-seg-item { padding:4px 14px; font-size:13px; color:#000; background:#fff; border-right:1px solid #c4c4c7; }\n.rp-mac-seg-item:last-child { border-right:0; }\n.rp-mac-seg-item.active { background:#007aff; color:#fff; }\nmacos-popover, macos-popover { display:inline-block; position:relative; }\n.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; }\n.rp-mac-pop-body { min-width:220px; padding:12px; border-radius:10px; border:1px solid #d1d1d6; background:#fff; }\n.rp-mac-pop-title { font-weight:600; font-size:13px; margin-bottom:8px; }\nmacos-sheet, macos-sheet { display:block; width:fit-content; min-width:420px; border-radius:10px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.3); padding:18px; font-family:-apple-system,sans-serif; }\n.rp-mac-sheet-title { font-size:15px; font-weight:700; margin-bottom:12px; }\n.rp-mac-sheet-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }\nmacos-stepper, macos-stepper { display:inline-flex; flex-direction:column; border:1px solid #c4c4c7; border-radius:5px; overflow:hidden; }\n.rp-mac-step { display:grid; place-items:center; width:22px; height:13px; background:#fff; color:#3c3c43; }\n.rp-mac-step.up { border-bottom:1px solid #c4c4c7; }\nmacos-disclosure, macos-disclosure { display:block; font-family:-apple-system,sans-serif; }\n.rp-mac-disc-head { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:#000; }\n.rp-mac-disc-tri { display:inline-flex; transition:none; }\n.rp-mac-disc-tri.open { transform:rotate(90deg); }\n.rp-mac-disc-body { padding:8px 0 0 18px; font-size:13px; color:#3c3c43; }\nmacos-table, macos-table { display:flex; flex-direction:column; width:fit-content; min-width:360px; border:1px solid #d1d1d6; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }\n.rp-mac-tr { display:flex; }\n.rp-mac-tr.rp-mac-th { background:#f6f6f6; border-bottom:1px solid #d1d1d6; font-size:12px; font-weight:600; color:#3c3c43; }\n.rp-mac-tr.alt { background:#f5f8ff; }\n.rp-mac-td { flex:1; display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:13px; color:#3c3c43; }\n.rp-mac-cell-bar { height:8px; border-radius:3px; background:#e5e7eb; }\n\n/* --- agent / conversational UI (Codex-style: single column, de-bubbled) --- */\nchat-el, chat-el { display:flex; flex-direction:column; gap:24px; width:fit-content; min-width:520px; max-width:680px; }\nuser-message, user-message, assistant-message, assistant-message { display:block; }\n.rp-msg-role { font-size:12px; font-weight:700; color:#9ca3af; letter-spacing:.02em; margin:0 0 6px; }\n.rp-msg-content { display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.7; color:#1f2937; }\nuser-message .rp-msg-content, user-message .rp-msg-content { color:#111827; }\nsystem-message, system-message { display:flex; justify-content:center; }\n.rp-sysmsg-line { padding:3px 12px; border-radius:999px; background:#f3f4f6; color:#6b7280; font-size:12px; }\ntool-call, tool-call { display:block; width:fit-content; min-width:280px; max-width:600px; }\n.rp-tool-head { display:flex; align-items:center; gap:8px; font-size:13px; color:#6b7280; }\n.rp-tool-glyph { display:inline-flex; }\n.rp-tool-glyph.done { color:var(--rp-success); }\n.rp-tool-glyph.running { color:var(--rp-primary); }\n.rp-tool-glyph.error { color:var(--rp-danger); }\n.rp-tool-name { font-family:ui-monospace,Menlo,monospace; font-weight:650; color:#374151; }\n.rp-tool-args-inline { font-family:ui-monospace,Menlo,monospace; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.rp-tool-body { margin-top:8px; padding-left:21px; }\nagent-output, agent-output { display:block; width:fit-content; min-width:280px; max-width:600px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#f8fafc; }\n.rp-output-head { padding:6px 12px; font-size:12px; color:#6b7280; border-bottom:1px solid var(--rp-border); font-family:ui-monospace,Menlo,monospace; }\n.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; }\nreasoning-el, reasoning-el { display:block; width:fit-content; min-width:280px; max-width:600px; }\n.rp-reason-head { display:flex; align-items:center; gap:6px; font-size:13px; color:#9ca3af; }\n.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; }\nmessage-actions, message-actions { display:inline-flex; gap:2px; }\n.rp-msg-action { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:#9ca3af; cursor:pointer; }\n.rp-msg-action:hover { background:#f3f4f6; color:#374151; }\nsuggestions-el, suggestions-el { display:flex; flex-wrap:wrap; gap:8px; }\n.rp-suggestion { padding:7px 13px; border:1px solid var(--rp-border); border-radius:8px; font-size:13px; color:#374151; background:#fff; cursor:pointer; }\n.rp-suggestion:hover { border-color:var(--rp-border-strong); background:#f9fafb; }\ntyping-el, typing-el { display:flex; align-items:center; }\n.typing-el-dots { display:inline-flex; gap:4px; }\n.typing-el-dots > span { width:7px; height:7px; border-radius:50%; background:#c7c7cc; }\ncomposer-el, composer-el { display:flex; align-items:center; gap:10px; width:fit-content; min-width:520px; max-width:680px; padding:9px 9px 9px 14px; border:1px solid var(--rp-border-strong); border-radius:14px; background:#fff; }\n.composer-el-attach { display:inline-flex; color:#9ca3af; }\n.composer-el-input { flex:1; font-size:14px; }\n.composer-el-send { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#111827; color:#fff; }\n.composer-el-send.streaming { background:var(--rp-danger); }\ncitation-el, citation-el { display:inline-flex; align-items:center; gap:6px; max-width:280px; padding:3px 9px 3px 3px; border:1px solid var(--rp-border); border-radius:6px; background:#f9fafb; font-size:12px; color:#374151; }\n.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; }\n.rp-cite-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\ntoken-usage, token-usage { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#9ca3af; }\n.rp-token-track { width:90px; height:5px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\n.rp-token-fill { display:block; height:100%; background:#9ca3af; }\nanchor-el, anchor-el { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; font-size:13px; font-weight:600; color:var(--rp-primary); background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.25); border-radius:999px; cursor:pointer; text-decoration:none; vertical-align:middle; }\nanchor-el:hover, anchor-el:hover { background:rgba(37,99,235,.14); }\n.anchor-el-label { line-height:1; }\ndiagram-block, diagram-block { display:block; width:fit-content; max-width:100%; margin:10px 0; padding:12px; background:#fff; border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); overflow:auto; }\n.diagram-block-svg { display:flex; justify-content:center; }\n.diagram-block-svg svg { max-width:100%; height:auto; }\n.diagram-block-empty, .diagram-block-err { font-size:13px; color:var(--rp-muted); }\n.diagram-block-err { color:var(--rp-danger); margin-bottom:6px; }\n.diagram-block-raw { margin:0; font-family:ui-monospace,Menlo,monospace; font-size:12px; line-height:1.5; color:#374151; white-space:pre; overflow:auto; }\n";
3
3
  export declare function injectStyle(): void;
package/dist/core/theme.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const THEME_CSS = "\n:root {\n --rpml-gx-border:#e5e7eb; --rpml-gx-side-bg:#fff; --rpml-gx-main-bg:#f4f6f8;\n --rpml-gx-fg:#111827; --rpml-gx-muted:#6b7280; --rpml-gx-group:#9ca3af;\n --rpml-gx-hover:#f3f4f6; --rpml-gx-item:#374151; --rpml-gx-active-bg:#eff6ff;\n --rpml-gx-active-fg:#1d4ed8; --rpml-gx-copy-hover:#e5e7eb; --rpml-gx-ok:#059669;\n}\nhtml[data-rpml-theme=\"dark\"] {\n --rpml-gx-border:#2a3344; --rpml-gx-side-bg:#0f172a; --rpml-gx-main-bg:#0b1120;\n --rpml-gx-fg:#e2e8f0; --rpml-gx-muted:#94a3b8; --rpml-gx-group:#64748b;\n --rpml-gx-hover:#1e293b; --rpml-gx-item:#cbd5e1; --rpml-gx-active-bg:#1e3a5f;\n --rpml-gx-active-fg:#93c5fd; --rpml-gx-copy-hover:#334155; --rpml-gx-ok:#34d399;\n}\nhtml[data-rpml-theme=\"dark\"] body { background:#0b1120; }\n/* Invert the rendered prototype as a whole; hue-rotate keeps colors recognizable. */\nhtml[data-rpml-theme=\"dark\"] page-el { filter:invert(0.92) hue-rotate(180deg); }\n\n.rpml-theme-fab {\n position:fixed; top:12px; right:12px; z-index:50; display:flex; align-items:center;\n justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--rpml-gx-border);\n border-radius:9px; background:var(--rpml-gx-side-bg); color:var(--rpml-gx-fg); font-size:16px;\n line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12);\n}\n.rpml-theme-fab:hover { background:var(--rpml-gx-hover); }\n";
2
+ export declare function injectThemeStyle(): void;
3
+ export declare function currentTheme(): 'light' | 'dark';
4
+ export declare function setTheme(theme: 'light' | 'dark'): void;
5
+ export declare function initTheme(): void;
6
+ export declare function mountThemeFab(host?: HTMLElement): void;
package/dist/gallery.js CHANGED
@@ -246,8 +246,8 @@ const style = `
246
246
  * { box-sizing:border-box; }
247
247
  body { margin:0; font-family:var(--rp-font); color:var(--rp-text); background:var(--rp-bg); }
248
248
  .rp-icon { display:inline-block; flex:0 0 auto; vertical-align:-0.16em; }
249
- page-el, page-el { display:block; min-height:100vh; padding:32px 40px; overflow:auto; }
250
- .page-el-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:100vh; align-items:start; }
249
+ page-el, page-el { display:block; padding:32px 40px; overflow:visible; }
250
+ .page-el-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:calc(100vh - 64px); align-items:start; }
251
251
  .page-el-main { display:flex; flex-direction:column; min-width:0; overflow:visible; }
252
252
  .page-el-header { flex:0 0 auto; width:fit-content; max-width:none; margin:0 0 22px; }
253
253
  .page-el-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
@@ -255,7 +255,7 @@ page-el, page-el { display:block; min-height:100vh; padding:32px 40px; overflow:
255
255
  .page-el-route { font-size:13px; color:var(--rp-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.7); border:1px solid var(--rp-border); border-radius:999px; padding:3px 9px; }
256
256
  .page-el-description { margin:10px 0 0; color:#374151; line-height:1.6; font-size:14px; }
257
257
  .page-el-body { flex:0 1 auto; display:block; width:fit-content; max-width:100%; min-height:0; overflow:visible; }
258
- .annotation-el-pane { min-width:380px; max-width:680px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:auto; padding:0 0 48px 0; align-self:start; }
258
+ .annotation-el-pane { min-width:380px; max-width:680px; position:sticky; top:32px; height:auto; min-height:calc(100vh - 64px); max-height:calc(100vh - 64px); overflow-y:auto; overflow-x:auto; padding:0 0 48px 0; align-self:start; }
259
259
  .annotation-el-pane-inner { padding:4px 12px 24px 6px; }
260
260
  main-view, main-view { display:block; width:fit-content; margin:0 0 28px; position:relative; }
261
261
  .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); }
@@ -275,7 +275,7 @@ annotation-el annotation-el, annotation-el annotation-el, annotation-el annotati
275
275
  .annotation-el-marker.triangle { width:18px; height:16px; background:var(--rp-success); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
276
276
  .annotation-el-marker.triangle > span { transform:translateY(2px); font-size:9px; }
277
277
  .annotation-el-marker.global { width:20px; height:20px; background:#0f172a; border-radius:6px; font-size:11px; }
278
- annotation-global-el, annotation-global-el { display:block; width:fit-content; max-width:980px; margin:0 0 18px; padding:10px 12px 12px; line-height:1.65; color:#1f2937; font-size:14px; background:linear-gradient(180deg,#f8fafc,#fff); border:1px solid var(--rp-border); border-left:3px solid #0f172a; border-radius:var(--rp-radius-md); }
278
+ annotation-global-el, annotation-global-el { display:block; width:fit-content; max-width:980px; margin:0 0 18px; padding:10px 12px 12px; line-height:1.65; color:#1f2937; font-size:14px; background:var(--rp-surface-soft); border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); }
279
279
  .annotation-el-pane annotation-global-el, .annotation-el-pane annotation-global-el { max-width:none; }
280
280
  .annotation-el-pane annotation-global-el .annotation-el-body { max-width:none; }
281
281
  .annotation-el-body { display:block; position:relative; width:fit-content; max-width:920px; }
@@ -302,8 +302,8 @@ layout-el > *, layout-el > * { min-width:0; }
302
302
  viewport-el layout-el, viewport-el layout-el { width:100%; }
303
303
  viewport-el > layout-el, viewport-el > layout-el { flex:1 1 auto; min-height:0; }
304
304
  viewport-el > navbar-el, viewport-el > navbar-el { flex:0 0 auto; }
305
- panel-el, panel-el { display:block; width:fit-content; max-width:100%; background:#fff; border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); padding:var(--snap-padding,16px); }
306
- viewport-el panel-el, viewport-el panel-el { width:auto; min-width:0; }
305
+ panel-el, panel-el { margin:8px; 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); }
306
+ viewport-el panel-el, viewport-el panel-el { margin:8px; width:auto; min-width:0; }
307
307
  panel-el[elevation="1"], panel-el[elevation="1"] { box-shadow:0 4px 16px rgba(15,23,42,.06); }
308
308
  panel-el[elevation="2"], panel-el[elevation="2"] { box-shadow:var(--rp-shadow); }
309
309
  navbar-el, navbar-el { display:flex; align-items:center; gap:14px; height:var(--snap-height,64px); padding:0 24px; background:#fff; border-bottom:1px solid var(--rp-border); }
@@ -868,6 +868,10 @@ class RpAnnotationGlobal extends HTMLElement {
868
868
  this.dataset.rpReady = "true";
869
869
  const existing = Array.from(this.childNodes);
870
870
  const label = attr(this, "label", "全局说明");
871
+ const globalSiblings = this.parentElement ? Array.from(this.parentElement.children).filter(
872
+ (el) => el.tagName.toLowerCase() === "annotation-global-el"
873
+ ) : [];
874
+ this.dataset.rpSection = `global-${globalSiblings.indexOf(this) + 1}`;
871
875
  const marker = document.createElement("span");
872
876
  marker.className = "annotation-el-marker global";
873
877
  marker.innerHTML = "<span>★</span>";
@@ -943,6 +947,7 @@ class RpMainView extends HTMLElement {
943
947
  stage2.style.transform = `scale(${scale})`;
944
948
  const clip = document.createElement("div");
945
949
  clip.className = "rp-main-stage-clip";
950
+ if (!autoHeight) clip.style.height = `${height * scale}px`;
946
951
  children.forEach((n) => {
947
952
  if (isViewportNode(n)) {
948
953
  if (!n.hasAttribute("width") && !n.hasAttribute("device")) n.style.setProperty("--snap-width", `${width}px`);
@@ -980,10 +985,12 @@ class RpMainView extends HTMLElement {
980
985
  if (!usesAutoHeight(this)) return;
981
986
  const shell = this.querySelector(".rp-main-shell");
982
987
  const stage = this.querySelector(".rp-main-stage");
988
+ const clip = this.querySelector(".rp-main-stage-clip");
983
989
  if (!shell || !stage) return;
984
990
  const scale = Number(attr(this, "scale", "0.7")) || 0.7;
985
991
  const next = `${Math.ceil(stage.scrollHeight * scale)}px`;
986
992
  if (shell.style.height !== next) shell.style.height = next;
993
+ if (clip && clip.style.height !== next) clip.style.height = next;
987
994
  }
988
995
  renderPins() {
989
996
  const shell = this.querySelector(".rp-main-shell");
@@ -99578,29 +99585,93 @@ function registerAll() {
99578
99585
  }
99579
99586
  }
99580
99587
  registerAll();
99588
+ const THEME_STYLE_ID = "rpml-theme-style";
99589
+ const ATTR = "data-rpml-theme";
99590
+ const THEME_CSS = `
99591
+ :root {
99592
+ --rpml-gx-border:#e5e7eb; --rpml-gx-side-bg:#fff; --rpml-gx-main-bg:#f4f6f8;
99593
+ --rpml-gx-fg:#111827; --rpml-gx-muted:#6b7280; --rpml-gx-group:#9ca3af;
99594
+ --rpml-gx-hover:#f3f4f6; --rpml-gx-item:#374151; --rpml-gx-active-bg:#eff6ff;
99595
+ --rpml-gx-active-fg:#1d4ed8; --rpml-gx-copy-hover:#e5e7eb; --rpml-gx-ok:#059669;
99596
+ }
99597
+ html[${ATTR}="dark"] {
99598
+ --rpml-gx-border:#2a3344; --rpml-gx-side-bg:#0f172a; --rpml-gx-main-bg:#0b1120;
99599
+ --rpml-gx-fg:#e2e8f0; --rpml-gx-muted:#94a3b8; --rpml-gx-group:#64748b;
99600
+ --rpml-gx-hover:#1e293b; --rpml-gx-item:#cbd5e1; --rpml-gx-active-bg:#1e3a5f;
99601
+ --rpml-gx-active-fg:#93c5fd; --rpml-gx-copy-hover:#334155; --rpml-gx-ok:#34d399;
99602
+ }
99603
+ html[${ATTR}="dark"] body { background:#0b1120; }
99604
+ /* Invert the rendered prototype as a whole; hue-rotate keeps colors recognizable. */
99605
+ html[${ATTR}="dark"] page-el { filter:invert(0.92) hue-rotate(180deg); }
99606
+
99607
+ .rpml-theme-fab {
99608
+ position:fixed; top:12px; right:12px; z-index:50; display:flex; align-items:center;
99609
+ justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--rpml-gx-border);
99610
+ border-radius:9px; background:var(--rpml-gx-side-bg); color:var(--rpml-gx-fg); font-size:16px;
99611
+ line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12);
99612
+ }
99613
+ .rpml-theme-fab:hover { background:var(--rpml-gx-hover); }
99614
+ `;
99615
+ function injectThemeStyle() {
99616
+ if (document.getElementById(THEME_STYLE_ID)) return;
99617
+ const s = document.createElement("style");
99618
+ s.id = THEME_STYLE_ID;
99619
+ s.textContent = THEME_CSS;
99620
+ document.head.appendChild(s);
99621
+ }
99622
+ function themeFromUrl() {
99623
+ const t = new URLSearchParams(location.search).get("theme");
99624
+ return t === "dark" || t === "light" ? t : null;
99625
+ }
99626
+ function currentTheme() {
99627
+ return document.documentElement.getAttribute(ATTR) === "dark" ? "dark" : "light";
99628
+ }
99629
+ function setTheme(theme) {
99630
+ document.documentElement.setAttribute(ATTR, theme);
99631
+ const url = new URL(location.href);
99632
+ url.searchParams.set("theme", theme);
99633
+ history.replaceState(history.state, "", url);
99634
+ }
99635
+ function initTheme() {
99636
+ const fromUrl = themeFromUrl();
99637
+ if (fromUrl) {
99638
+ document.documentElement.setAttribute(ATTR, fromUrl);
99639
+ return;
99640
+ }
99641
+ const prefersDark = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
99642
+ document.documentElement.setAttribute(ATTR, prefersDark ? "dark" : "light");
99643
+ }
99581
99644
  registerAll();
99582
99645
  const CHROME_CSS = `
99583
99646
  .rpml-gallery { display:grid; grid-template-columns:260px 1fr; height:100vh; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
99584
99647
  .rpml-gallery.collapsed { grid-template-columns:1fr; }
99585
99648
  .rpml-gallery.collapsed .rpml-gx-side { display:none; }
99586
- .rpml-gx-side { display:flex; flex-direction:column; border-right:1px solid #e5e7eb; background:#fff; min-height:0; }
99587
- .rpml-gx-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:16px; border-bottom:1px solid #e5e7eb; font-size:14px; font-weight:700; color:#111827; }
99588
- .rpml-gx-head small { display:block; margin-top:3px; font-size:11px; font-weight:400; color:#6b7280; }
99589
- .rpml-gx-toggle { flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px; margin:-3px -3px 0 0; padding:0; border:1px solid #e5e7eb; border-radius:7px; background:#fff; color:#6b7280; font-size:15px; line-height:1; cursor:pointer; }
99590
- .rpml-gx-toggle:hover { background:#f3f4f6; color:#111827; }
99591
- .rpml-gx-fab { position:fixed; top:12px; left:12px; z-index:50; display:none; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid #e5e7eb; border-radius:9px; background:#fff; color:#374151; font-size:17px; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); }
99592
- .rpml-gx-fab:hover { background:#f3f4f6; color:#111827; }
99649
+ .rpml-gx-side { display:flex; flex-direction:column; border-right:1px solid var(--rpml-gx-border,#e5e7eb); background:var(--rpml-gx-side-bg,#fff); min-height:0; }
99650
+ .rpml-gx-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:16px; border-bottom:1px solid var(--rpml-gx-border,#e5e7eb); font-size:14px; font-weight:700; color:var(--rpml-gx-fg,#111827); }
99651
+ .rpml-gx-head small { display:block; margin-top:3px; font-size:11px; font-weight:400; color:var(--rpml-gx-muted,#6b7280); }
99652
+ .rpml-gx-head-actions { flex:none; display:flex; gap:6px; margin:-3px -3px 0 0; }
99653
+ .rpml-gx-btn { display:flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:1px solid var(--rpml-gx-border,#e5e7eb); border-radius:7px; background:var(--rpml-gx-side-bg,#fff); color:var(--rpml-gx-muted,#6b7280); font-size:15px; line-height:1; cursor:pointer; }
99654
+ .rpml-gx-btn:hover { background:var(--rpml-gx-hover,#f3f4f6); color:var(--rpml-gx-fg,#111827); }
99655
+ .rpml-gx-fab { position:fixed; top:12px; left:12px; z-index:50; display:none; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--rpml-gx-border,#e5e7eb); border-radius:9px; background:var(--rpml-gx-side-bg,#fff); color:var(--rpml-gx-fg,#374151); font-size:17px; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); }
99656
+ .rpml-gx-fab:hover { background:var(--rpml-gx-hover,#f3f4f6); }
99593
99657
  .rpml-gallery.collapsed .rpml-gx-fab { display:flex; }
99594
99658
  .rpml-gx-nav { flex:1; overflow-y:auto; padding:8px; }
99595
- .rpml-gx-group { padding:10px 8px 3px; font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; }
99596
- .rpml-gx-item { display:block; padding:6px 10px; border-radius:7px; font-size:13px; color:#374151; text-decoration:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
99597
- .rpml-gx-item:hover { background:#f3f4f6; }
99598
- .rpml-gx-item.active { background:#eff6ff; color:#1d4ed8; font-weight:650; }
99599
- .rpml-gx-indent { padding-left:22px; }
99600
- .rpml-gx-main { overflow:auto; min-height:0; background:#f4f6f8; }
99659
+ .rpml-gx-group { padding:10px 8px 3px; font-size:11px; font-weight:700; color:var(--rpml-gx-group,#9ca3af); text-transform:uppercase; letter-spacing:.04em; }
99660
+ .rpml-gx-row { display:flex; align-items:center; border-radius:7px; }
99661
+ .rpml-gx-row:hover { background:var(--rpml-gx-hover,#f3f4f6); }
99662
+ .rpml-gx-row.active { background:var(--rpml-gx-active-bg,#eff6ff); }
99663
+ .rpml-gx-item { flex:1; min-width:0; display:block; padding:6px 10px; font-size:13px; color:var(--rpml-gx-item,#374151); text-decoration:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
99664
+ .rpml-gx-row.active .rpml-gx-item { color:var(--rpml-gx-active-fg,#1d4ed8); font-weight:650; }
99665
+ .rpml-gx-indent .rpml-gx-item { padding-left:22px; }
99666
+ .rpml-gx-copy { flex:none; margin-right:6px; padding:3px 7px; border:1px solid var(--rpml-gx-border,#e5e7eb); border-radius:6px; background:transparent; color:var(--rpml-gx-muted,#9ca3af); font-size:11px; line-height:1.4; cursor:pointer; opacity:0; transition:opacity .12s; }
99667
+ .rpml-gx-row:hover .rpml-gx-copy { opacity:1; }
99668
+ .rpml-gx-copy:hover { background:var(--rpml-gx-copy-hover,#e5e7eb); color:var(--rpml-gx-fg,#111827); }
99669
+ .rpml-gx-copy.copied { opacity:1; color:var(--rpml-gx-ok,#059669); border-color:var(--rpml-gx-ok,#059669); }
99670
+ .rpml-gx-main { overflow:auto; min-height:0; background:var(--rpml-gx-main-bg,#f4f6f8); }
99601
99671
  .rpml-gx-err { padding:40px; color:#dc2626; font-family:ui-monospace,Menlo,monospace; }
99602
99672
  `;
99603
99673
  function injectChrome() {
99674
+ injectThemeStyle();
99604
99675
  if (document.getElementById("rpml-gallery-style")) return;
99605
99676
  const s = document.createElement("style");
99606
99677
  s.id = "rpml-gallery-style";
@@ -99657,7 +99728,7 @@ function mountGallery(docs, host = document.body) {
99657
99728
  const side = document.createElement("aside");
99658
99729
  side.className = "rpml-gx-side";
99659
99730
  const count = docs.length;
99660
- side.innerHTML = `<div class="rpml-gx-head"><span>RPML 文档<small>${count} 个文件</small></span><button class="rpml-gx-toggle" type="button" title="收起侧边栏" aria-label="收起侧边栏">«</button></div>`;
99731
+ side.innerHTML = `<div class="rpml-gx-head"><span>RPML 文档<small>${count} 个文件</small></span><div class="rpml-gx-head-actions"><button class="rpml-gx-btn rpml-gx-theme" type="button" title="切换亮色/暗色" aria-label="切换亮色/暗色">◑</button><button class="rpml-gx-btn rpml-gx-toggle" type="button" title="收起侧边栏" aria-label="收起侧边栏">«</button></div></div>`;
99661
99732
  const nav = document.createElement("nav");
99662
99733
  nav.className = "rpml-gx-nav";
99663
99734
  side.appendChild(nav);
@@ -99674,18 +99745,32 @@ function mountGallery(docs, host = document.body) {
99674
99745
  host.appendChild(root);
99675
99746
  side.querySelector(".rpml-gx-toggle").addEventListener("click", () => root.classList.add("collapsed"));
99676
99747
  fab.addEventListener("click", () => root.classList.remove("collapsed"));
99748
+ initTheme();
99749
+ side.querySelector(".rpml-gx-theme").addEventListener("click", () => {
99750
+ setTheme(currentTheme() === "dark" ? "light" : "dark");
99751
+ });
99677
99752
  const links = /* @__PURE__ */ new Map();
99678
99753
  function renderNav(node, depth) {
99679
99754
  const entries = [...node.children.values()];
99680
99755
  const leaves = entries.filter((e) => e.path).sort((a, b) => a.name.localeCompare(b.name));
99681
99756
  const folders = entries.filter((e) => !e.path).sort((a, b) => a.name.localeCompare(b.name));
99682
99757
  for (const leaf of leaves) {
99758
+ const row = document.createElement("div");
99759
+ row.className = depth > 0 ? "rpml-gx-row rpml-gx-indent" : "rpml-gx-row";
99683
99760
  const a = document.createElement("a");
99684
- a.className = depth > 0 ? "rpml-gx-item rpml-gx-indent" : "rpml-gx-item";
99761
+ a.className = "rpml-gx-item";
99685
99762
  a.textContent = leaf.title || leaf.name;
99686
99763
  a.href = `#${leaf.path}`;
99687
- links.set(leaf.path, a);
99688
- nav.appendChild(a);
99764
+ const copy = document.createElement("button");
99765
+ copy.className = "rpml-gx-copy";
99766
+ copy.type = "button";
99767
+ copy.title = "复制此页全部内容";
99768
+ copy.setAttribute("aria-label", "复制此页全部内容");
99769
+ copy.dataset.copyPath = leaf.path;
99770
+ copy.textContent = "copy";
99771
+ row.append(a, copy);
99772
+ links.set(leaf.path, row);
99773
+ nav.appendChild(row);
99689
99774
  }
99690
99775
  for (const folder of folders) {
99691
99776
  const g = document.createElement("div");
@@ -99732,7 +99817,24 @@ function mountGallery(docs, host = document.body) {
99732
99817
  show(target, section);
99733
99818
  });
99734
99819
  nav.addEventListener("click", (e) => {
99735
- const a = e.target.closest("a.rpml-gx-item");
99820
+ var _a2;
99821
+ const el = e.target;
99822
+ const copyBtn = el.closest(".rpml-gx-copy");
99823
+ if (copyBtn) {
99824
+ e.preventDefault();
99825
+ const doc = byPath.get(copyBtn.dataset.copyPath);
99826
+ if (!doc) return;
99827
+ void ((_a2 = navigator.clipboard) == null ? void 0 : _a2.writeText(doc.source).then(() => {
99828
+ copyBtn.classList.add("copied");
99829
+ copyBtn.textContent = "已复制";
99830
+ setTimeout(() => {
99831
+ copyBtn.classList.remove("copied");
99832
+ copyBtn.textContent = "copy";
99833
+ }, 1500);
99834
+ }));
99835
+ return;
99836
+ }
99837
+ const a = el.closest("a.rpml-gx-item");
99736
99838
  if (!a) return;
99737
99839
  e.preventDefault();
99738
99840
  const path = decodeURIComponent(a.hash.slice(1));