@21stware/rpui 0.1.1 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # RPUI
 
-RPUI (Readable Prototype UI) is a static UI prototype canvas and snapshot primitive runtime implemented with native Web Components. It converts interaction states, permission variants, loading/empty/error states, and nested UI details into one readable static HTML document.
+RPUI (Rapid Prototype UI) is a static UI prototype canvas and snapshot primitive runtime implemented with native Web Components. It converts interaction states, permission variants, loading/empty/error states, and nested UI details into one static HTML document.
 
 A prototype imports one generated runtime file:
 

package/SKILL.md

@@ -0,0 +1,279 @@
+# RPUI Prototype Implementation Skill
+
+Use this skill when converting product requirements, screenshots, existing UI code, or design notes into a static RPUI prototype.
+
+## Goal
+
+Produce one readable, static, self-contained HTML prototype that **completely** exposes a product page's UI structure, interaction states, permissions, loading/empty/error/validation states, state machines, and edge cases — at a level of detail engineering can implement from and QA can derive test cases from, without running the real app.
+
+RPUI does not simulate interaction. It bakes time-based behavior into a spatial document: every state that would normally appear only after a click, a role change, or a server response is laid out at once. The two words that govern quality are **complex** (cover the real information density of a production page) and **complete** (no state, branch, permission, or edge case left implicit).
+
+> If a reviewer finishes reading your prototype and still has to ask "but what happens when…", the prototype is not done.
+
+## Complexity expectation
+
+A realistic complex application page is **not** a few annotated regions. Calibrate to this baseline:
+
+- **8–10 top-level annotations** (`<rp-annotation id="N">`), one per meaningful pinned region.
+- **3–5 levels of annotation nesting** where the domain warrants it: region → element → state family → per-state rule → boundary/exception.
+- **Every conditional branch enumerated** with `<rp-enum>` — states, permission variants, validation outcomes, async results.
+- Annotation bodies written at **implementation depth**: trigger conditions, data source, state-machine transitions, permission gates, validation rules, error handling, boundary values.
+
+`demo/golden.html` is the reference for this bar. Study it before authoring. The minimal template at the bottom of this file shows mechanics only — never treat it as a complexity target.
+
+## Required inputs
+
+Prefer these inputs, in priority order:
+
+1. Product requirement or user story.
+2. Screenshot or design draft.
+3. Existing code with conditional rendering (read `v-if`/`&&`/ternaries/guards — each is a state to enumerate).
+4. Permission matrix or role notes.
+5. Known loading, empty, error, validation, and edge cases.
+
+If inputs are missing, infer common SaaS/product states and make every assumption explicit in an annotation. Never silently omit a plausible state.
+
+## Output contract
+
+Output a complete HTML file that imports exactly one RPUI runtime file:
+
+```html
+<script type="module" src="./dist/rpui.js"></script>
+```
+
+The document must contain:
+
+1. one `<rp-page>` root with `title`, `route`, and `description` (the description should state which representative state the main snapshot captures),
+2. exactly one `<rp-main-view>` containing the main page snapshot,
+3. snapshot content built with `rp-*` primitives only,
+4. numbered `data-pin="N"` anchors on every meaningful main-view region,
+5. matching top-level `<rp-annotation id="N" label="...">` blocks,
+6. `<rp-enum>` / `<rp-enum-item>` for every conditional branch and state family.
+
+## The recursive decomposition method
+
+This is the core technique for reaching completeness. Decompose every pinned region top-down through up to five semantic levels. Stop at the level where further splitting adds no implementation value.
+
+- **L1 — Region** (`<rp-annotation id="N">`, pinned): a structural area of the page (navbar, sidebar, filter bar, table, drawer). One per `data-pin`.
+- **L2 — Element / concern** (nested `<rp-annotation>`): a distinct responsibility inside the region (search behavior, a single column, the bulk-action bar, one form field group).
+- **L3 — State family** (`<rp-enum>` or a nested annotation containing one): the set of mutually exclusive states for that element (default/focus/filled/error; collapsed/expanded; the rows' read×SLA×selected matrix).
+- **L4 — Per-state rule** (`<rp-enum-item>` + `description`, or a deeper annotation): what each state _means_ and the rule behind it — trigger, threshold, transition, gate.
+- **L5 — Boundary / exception** (deepest annotation/enum): extremes and failure modes — 0/empty/overflow values, race conditions, permission denials, irreversible actions.
+
+Not every region needs all five levels. A simple stat card may stop at L3. A data table with a detail drawer will routinely reach L5. Let the domain decide depth; let completeness decide breadth.
+
+## Annotation content structure
+
+L1/L2 annotation bodies must read like a spec, not a caption. For a non-trivial region, cover the relevant subset of these dimensions in plain prose:
+
+- **Trigger / entry condition** — what causes this to appear or activate.
+- **Data source & refresh** — where values come from, polling/refresh cadence.
+- **State enumeration** — which states exist (then expand them in `<rp-enum>`).
+- **Permission gate** — which roles see/use it, what changes per role.
+- **Validation rule** — required fields, formats, cross-field constraints.
+- **Error / async handling** — loading, empty, partial-failure, retry behavior.
+- **Boundary values** — limits, overflow, truncation, zero/critical states.
+
+Keep each dimension to one or two precise sentences. "Compact" means no padding and no waffle — it does **not** mean omitting a dimension that matters. Completeness wins over brevity; precision wins over length.
+
+## Coverage matrix method
+
+Completeness in complex apps is combinatorial, not a flat list. When two or more axes interact, enumerate the product, not each axis alone:
+
+- **permission × state** — e.g. detail-drawer buttons differ by role _and_ by ticket status.
+- **role × data-size** — admin view of 5000 rows vs agent view of 7 rows.
+- **flow-step × validation** — each wizard step × (valid / invalid / pending).
+- **read-state × SLA × selection** — a table row's appearance is the product of all three.
+
+Build the matrix mentally, drop impossible cells, and create one `<rp-enum-item>` for each surviving combination. If a cell is intentionally out of scope, say so in an annotation rather than leaving it blank.
+
+## Implementation steps
+
+1. Identify route, title, and a one-sentence description naming the representative state the snapshot captures.
+2. Choose a device preset: `web` desktop/admin, `ipad` tablet, `mobile` phone. Prefer fixed-width, auto-height.
+3. Choose the **most information-dense representative state** for the main snapshot: loaded data, an active selection, an open drawer/expanded panel central to the page, role-specific controls, active validation. The snapshot should look like the page on a busy day, not an empty shell.
+4. Build the snapshot inside `<rp-main-view device="…">` using only `rp-*` primitives, usually inside `<rp-viewport device="…">`.
+5. Add `data-pin="N"` to every meaningful region. Number from 1, no gaps.
+6. For every pin create one top-level `<rp-annotation id="N" label="…">`.
+7. Apply the recursive decomposition method to each region (L1→L5 as warranted).
+8. For every conditional branch, build a coverage matrix and expand it with `<rp-enum>` / `<rp-enum-item label="…" description="…">`.
+9. Write annotation bodies at implementation depth using the content-structure dimensions.
+10. Verify no interactive JS, event attributes, external images, external CSS, or CDN icons are used.
+
+## Section addressing, markers & deep links
+
+The runtime auto-assigns a `data-rp-section` path to every annotation: top-level = its `id` (e.g. `3`); nested = parent path + 1-based sibling index (e.g. `3-2`, `3-2-1`). Authors do not write these.
+
+Every annotation also gets a **marker showing its local index** (the last segment of its section path):
+
+- Top-level (has `id`): blue water-drop showing the id (`1`, `2`, …), matching its pin.
+- Nested depth 1: purple circle showing its local index (`3-2` shows **2**).
+- Nested depth ≥2: green triangle showing its local index (`3-2-1` shows **1**).
+
+So a nested annotation at `1-1` is marked simply **1** — the number is local to its parent, not the full path. This lets you annotate a UI slice one level deeper and still reference it unambiguously ("see ① under 区域 3").
+
+- Clicking a pin, or any annotation title, updates the URL `?section=<path>` and scrolls/focuses that annotation (dashed outline).
+- Opening a URL with `?section=3-2-1` focuses that nested annotation on load.
+- `<rp-enum-item>` cards are auto-numbered with a black square index badge (1, 2, 3…) so prose can refer to "state 2".
+
+Use stable, intentional nesting order — index-based addresses and markers depend on sibling order.
+
+### Annotating a UI slice further
+
+When a UI slice rendered inside an annotation needs its own explanation, do not flatten it into prose. Nest another `<rp-annotation>` around or after the slice: it receives its own numbered marker (circle/triangle) and its body indents one level. The chain reads:
+
+```
+main view  →  ⬤ annotation 1 (pinned)  →  UI slice  →  ① nested annotation (marked "1")  →  detail
+```
+
+Example — a slice that itself has sub-rules:
+
+```html
+<rp-annotation id="3" label="筛选区">
+  触发条件、数据来源……
+  <rp-enum>
+    <rp-enum-item label="展开浮层"><rp-select state="expanded" options="全部,P1,P2"></rp-select></rp-enum-item>
+  </rp-enum>
+  <rp-annotation label="排序规则">      <!-- marked ① (purple circle), indented -->
+    点击列头切换升/降序，默认按 SLA 剩余时间升序。
+    <rp-annotation label="多列排序">    <!-- marked ① (green triangle), indented again -->
+      按住 Shift 点击追加次级排序键。
+    </rp-annotation>
+  </rp-annotation>
+</rp-annotation>
+```
+
+## Mid-level composition patterns
+
+Complex pages are built from recurring composite modules. Assemble these from primitives rather than reinventing per page:
+
+- **Data table module**: `rp-tabs` (status filter) + filter row (`rp-select`/`rp-date-picker`/`rp-toggle`) + `rp-bulk-action-bar` + `rp-table` (`has-checkbox has-action`) + `rp-pagination`.
+- **Master–detail**: `rp-layout columns="minmax(0,1fr) <w>"` with the list on the left and a detail panel on the right. If the detail panel opens on row click (transient), apply the overlay trigger pattern; only keep it open in the snapshot when it is a permanently docked region.
+- **Dashboard header**: `rp-layout columns="repeat(N,1fr)"` of `rp-stat-card`.
+- **Multi-step flow**: `rp-steps` + per-step `rp-form` / `rp-form-item`, each step's validation enumerated.
+- **Form with validation**: `rp-form` + `rp-form-item label required error` + control in `error`/`filled` states enumerated side by side.
+
+## Component families
+
+RPUI ships a broad primitive set. Pick the smallest primitive that conveys the intent. See `llms.txt` for the full attribute reference; for a visual catalog of every component and its states, run `npm run dev` and open the source-mode preview at `/preview/`.
+
+- **Layout**: viewport, layout, panel, card, split-pane, divider, spacer, sidebar, navbar.
+- **Data input**: input, search, textarea, select, date-picker, checkbox, radio, toggle, slider, range, number-input, rating, pin-input, color-swatch, autocomplete, upload, button, button-group, form, form-item.
+- **Data display**: table, table-row, list, list-item, tree, timeline, calendar, kanban, code-block, diff, image-grid, key-value, accordion, stat-card, tag, chip, badge, avatar, image-placeholder, progress.
+- **Navigation**: tabs, breadcrumb, pagination, steps, segmented, menu, context-menu, command-palette, toc, kbd.
+- **Feedback / overlays**: alert, toast, banner, empty, loading, skeleton, countdown, result, progress, tooltip, dropdown, popover, modal, drawer.
+- **Enterprise / SaaS**: permission-gate, quota-bar, api-key, audit-row, workflow-node.
+
+### Platform primitives (Apple HIG)
+
+For native-feeling iOS / macOS prototypes, prefer the platform-prefixed primitives over the generic web ones:
+
+- **iOS** (`rp-ios-*`): ios-navbar, ios-tabbar, ios-list / ios-list-item, ios-action-sheet, ios-alert, ios-switch, ios-segmented, ios-button, ios-search, ios-stepper. Use with `device="mobile"`.
+- **macOS** (`rp-macos-*`): macos-window, macos-toolbar, macos-menubar, macos-sidebar / macos-source-item, macos-segmented, macos-popover, macos-sheet, macos-stepper, macos-disclosure, macos-table. Use with `device="web"`.
+
+Choose the platform that matches the product: a generic web SaaS page uses the plain `rp-*` set; a native iOS app uses `rp-ios-*` inside a `device="mobile"` viewport; a native macOS app wraps content in `rp-macos-window`. Do not mix platform styles within one snapshot.
+
+> ARIA note: component states (checked/expanded/selected/disabled/current) mirror the structure ARIA APG expects, so annotations can describe accessibility intent. RPUI stays static and does **not** emit runtime `role`/`aria-*` — treat ARIA as a design reference for *which states to document*, not as something the runtime manages.
+
+## Overlay trigger pattern (critical)
+
+Overlays and transient feedback are **interaction results, not page regions**. This includes `rp-modal`, `rp-drawer`, `rp-dropdown`, `rp-popover`, `rp-tooltip`, and `rp-toast`. Do **not** place them in the main snapshot — a snapshot showing an open modal or a live toast is a frozen mid-interaction frame, which contradicts RPUI's "space replaces time" model. Worse, never stack mutually exclusive overlays (empty + loading + modal + toast) side by side in the snapshot as if they coexist.
+
+Instead, model each overlay as a **trigger → result** pair:
+
+1. **Pin the trigger** in the main snapshot — the button, row, field, or menu entry that opens the overlay (e.g. an action button, a table row, a `…` menu). The snapshot shows only this resting trigger.
+2. **State the trigger condition** in the annotation body: what action or system event opens it, any precondition, and the permission gate.
+3. **Render the overlay inside the annotation**, normally as an `<rp-enum>` showing the closed→open transition or the overlay's own variants (e.g. confirm vs. irreversible, success vs. partial-failure vs. error toast).
+
+```html
+<!-- main snapshot: only the trigger is pinned -->
+<rp-button label="批量关闭" variant="danger" data-pin="5"></rp-button>
+
+<!-- annotation: trigger condition + overlay rendered here -->
+<rp-annotation id="5" label="批量关闭">
+  触发条件：勾选 ≥1 行后点击「批量关闭」，仅主管/坐席可见。点击弹出二次确认。
+  <rp-enum>
+    <rp-enum-item label="确认弹窗" description="列出影响范围与可逆性。">
+      <rp-modal title="批量关闭确认" has-footer>
+        <rp-alert type="warning" title="将关闭 3 条工单" message="客户 7 天内可重开。"></rp-alert>
+      </rp-modal>
+    </rp-enum-item>
+    <rp-enum-item label="关闭成功" description="3s 自动消失，列表刷新。">
+      <rp-toast type="success" title="已关闭 3 条工单"></rp-toast>
+    </rp-enum-item>
+  </rp-enum>
+</rp-annotation>
+```
+
+Narrow exception: when a side panel is a **permanently docked structural region** of the page (not a transiently opened overlay), it may appear open in the snapshot as the representative state — but its open/close trigger and conditions must still be documented in its annotation. When unsure, treat it as an overlay and use the trigger pattern.
+
+## Authoring rules
+
+- Use `rp-*` tags for new work. `proto-*` and `snap-*` are compatibility aliases only.
+- Use `<rp-page>` as root; exactly one `<rp-main-view>` per page.
+- Use `rp-*` primitives for both the snapshot and UI slices inside annotations. Never use raw `div`/`button`/`input`/`table` for product UI; plain text and simple inline markup in annotations is fine.
+- No CSS or JS in the prototype; no `position:absolute`/`fixed` in snapshot content (RPUI owns pin positioning).
+- Do not hide important content behind interactions — expand it into `<rp-enum>`.
+- Overlays and transient feedback (`rp-modal`, `rp-drawer`, `rp-dropdown`, `rp-popover`, `rp-tooltip`, `rp-toast`) are interaction results: do not place them in the main snapshot. Pin the trigger and render the overlay inside its annotation (see Overlay trigger pattern). Plain collapsed `rp-select` in the snapshot is fine; its expanded list belongs in an annotation enum.
+- Note runtime limits honestly: `rp-table` cell text is sampled by the runtime from column names — for exact data, describe it in the annotation rather than expecting the table to render it.
+
+## Multi-page applications
+
+One `<rp-page>` = one screen. For an application with several screens:
+
+- Produce one RPUI HTML file per screen; name files by route.
+- If a single page exceeds ~12 pins, it is too dense — split a sub-area into its own page and note in the description that it details a region of the parent.
+- For cross-screen flows (wizard, drill-down), state the entry/exit routes in each page's description so the set reads as a connected flow.
+
+## Minimal template (mechanics only — not a complexity target)
+
+```html
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <script type="module" src="./dist/rpui.js"></script>
+  </head>
+  <body>
+    <rp-page title="页面标题" route="/route" description="主快照取『…』代表态">
+      <rp-main-view device="web" scale="0.65">
+        <rp-viewport device="web">
+          <!-- main snapshot -->
+        </rp-viewport>
+      </rp-main-view>
+
+      <rp-annotation id="1" label="区域说明">
+        触发条件、数据来源、权限与校验在此用一两句说清。
+        <rp-enum>
+          <rp-enum-item label="默认" description="正常数据态。"
+            ><rp-empty label="示例"></rp-empty
+          ></rp-enum-item>
+          <rp-enum-item label="加载中" description="首次进入或刷新。"
+            ><rp-loading rows="3"></rp-loading
+          ></rp-enum-item>
+          <rp-enum-item label="错误" description="服务端或网络异常。"
+            ><rp-alert type="error" title="加载失败" message="请重试"></rp-alert
+          ></rp-enum-item>
+        </rp-enum>
+      </rp-annotation>
+    </rp-page>
+  </body>
+</html>
+```
+
+For a realistic complex page, see `demo/golden.html` (9 top-level annotations, 3–5 levels deep, implementation-level bodies).
+
+## Quality bar
+
+A good RPUI prototype is reviewable by engineering, product, design, and QA without running the app. QA derives test cases from annotations; engineering derives conditional-rendering and state-machine logic from enum items; design sees whether any hidden state was missed.
+
+Before finishing, check:
+
+- pin numbers continuous; every pin has a matching top-level annotation,
+- the snapshot shows the most information-dense useful state,
+- decomposition reached implementation depth where the domain warranted it (state machines, permission gates, validation, boundaries all covered),
+- combinatorial states (permission × state, role × scale, step × validation) are enumerated, not collapsed,
+- every hidden interaction result is expanded into an enum,
+- role/permission differences are explicit,
+- runtime limits (e.g. table sampling) are noted where they affect fidelity,
+- no forbidden product-UI HTML, scripts, event handlers, or external resources.

package/dist/canvas/annotation.d.ts

@@ -1,5 +1,11 @@
 export declare class RpAnnotation extends HTMLElement {
+    private ro?;
+    private frame;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupSlicePins;
+    private scheduleSlicePins;
+    private renderSlicePins;
     annotationDepth(): number;
 }
 export declare class RpEnum extends HTMLElement {

package/dist/core/icons.d.ts

@@ -1,2 +1,2 @@
-export type IconName = 'search' | 'bell' | 'user' | 'inbox' | 'archive' | 'at-sign' | 'check' | 'trash-2' | 'x' | 'loader' | 'image' | 'circle-alert' | 'chevron-down' | 'layout-dashboard' | 'message-square' | 'settings' | 'plus' | 'file' | 'users' | 'shield' | 'calendar' | 'upload' | 'empty' | 'chevron-left' | 'chevron-right' | 'minus' | 'alert-triangle' | 'info' | 'circle-check' | 'circle';
+export type IconName = 'search' | 'bell' | 'user' | 'inbox' | 'archive' | 'at-sign' | 'check' | 'trash-2' | 'x' | 'loader' | 'image' | 'circle-alert' | 'chevron-down' | 'layout-dashboard' | 'message-square' | 'settings' | 'plus' | 'file' | 'users' | 'shield' | 'calendar' | 'upload' | 'empty' | 'chevron-left' | 'chevron-right' | 'minus' | 'alert-triangle' | 'info' | 'circle-check' | 'circle' | 'chevron-up' | 'star' | 'copy' | 'lock' | 'circle-x' | 'more-horizontal' | 'more-vertical' | 'grip' | 'folder' | 'file-code' | 'git-branch' | 'clock' | 'key' | 'zap' | 'home' | 'heart' | 'bookmark' | 'download' | 'edit' | 'eye' | 'filter' | 'refresh' | 'sparkles' | 'bot' | 'wrench' | 'terminal' | 'thumbs-up' | 'thumbs-down' | 'send' | 'stop' | 'paperclip' | 'globe';
 export declare function icon(name?: string, size?: number): string;

package/dist/core/style.d.ts

@@ -1,3 +1,3 @@
 export declare const RPUI_STYLE_ID = "rpui-runtime-style";
-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; }\nrp-page, proto-page { display:block; min-height:100vh; padding:32px 40px; overflow:auto; }\n.rp-page-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:100vh; align-items:start; }\n.rp-page-main { display:flex; flex-direction:column; min-width:0; overflow:visible; }\n.rp-page-header { flex:0 0 auto; width:fit-content; max-width:none; margin:0 0 22px; }\n.rp-page-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }\n.rp-page-title { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.02em; }\n.rp-page-route { font-size:13px; color:var(--rp-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.7); border:1px solid var(--rp-border); border-radius:999px; padding:3px 9px; }\n.rp-page-description { margin:10px 0 0; color:#374151; line-height:1.6; font-size:14px; }\n.rp-page-body { flex:0 1 auto; display:block; width:fit-content; max-width:100%; min-height:0; overflow:visible; }\n.rp-annotation-pane { min-width:380px; max-width:680px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:auto; padding:0 0 48px 0; align-self:start; }\n.rp-annotation-pane-inner { padding:4px 12px 24px 6px; }\nrp-main-view, proto-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; }\nrp-annotation, proto-annotation { display:block; width:fit-content; max-width:980px; margin:14px 0; line-height:1.65; color:#1f2937; font-size:14px; }\nrp-annotation rp-annotation, proto-annotation proto-annotation, rp-annotation proto-annotation, proto-annotation rp-annotation { margin:10px 0 8px 22px; }\n.rp-annotation-head { display:flex; align-items:center; gap:8px; margin:0 0 4px; width:fit-content; }\n.rp-annotation-title { font-weight:700; color:#111827; }\n.rp-annotation-marker { display:inline-grid; place-items:center; flex:0 0 auto; color:#fff; font-size:10px; font-weight:700; line-height:1; }\n.rp-annotation-marker.drop { width:22px; height:22px; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }\n.rp-annotation-marker.drop > span { transform:rotate(45deg); }\n.rp-annotation-marker.circle { width:13px; height:13px; background:var(--rp-purple); border-radius:50%; }\n.rp-annotation-marker.triangle { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:13px solid var(--rp-success); }\n.rp-annotation-body { display:block; width:fit-content; max-width:920px; }\n.rp-annotation-body > :not(rp-annotation):not(proto-annotation):not(rp-enum):not(proto-enum) { max-width:820px; }\n.rp-annotation-pane rp-annotation, .rp-annotation-pane proto-annotation { max-width:none; }\n.rp-annotation-pane .rp-annotation-body { max-width:none; }\n.rp-annotation-pane .rp-annotation-body > :not(rp-annotation):not(proto-annotation):not(rp-enum):not(proto-enum) { max-width:420px; }\n.rp-annotation-body p { margin:0 0 8px; }\nrp-enum, proto-enum { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; width:fit-content; margin:8px 0 12px; }\n.rp-annotation-pane rp-enum, .rp-annotation-pane proto-enum { flex-wrap:wrap; }\nrp-enum-item, proto-enum-item { display:block; flex:0 0 auto; width:fit-content; min-width:180px; max-width:600px; border:1px solid #f0f0f0; border-radius:var(--rp-radius-md); background:#fff; overflow:hidden; }\n.rp-enum-label { display:flex; align-items:flex-start; gap:6px; padding:5px 9px 4px; font-size:12px; font-weight:650; color:#374151; }\n.rp-enum-index { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; background:#111827; color:#fff; font-size:10px; font-weight:750; border-radius:3px; flex:0 0 auto; margin-top:1px; }\n.rp-enum-label-text { display:block; }\n.rp-enum-description { display:block; margin-top:2px; font-size:11px; line-height:1.35; font-weight:400; color:var(--rp-muted); }\n.rp-enum-content { display:block; width:fit-content; padding:8px; }\n.rp-annotation-title { font-weight:700; color:#111827; cursor:pointer; }\n.rp-annotation-title:hover { color:var(--rp-primary); }\n.rp-section-focus { outline:2px dashed var(--rp-primary); outline-offset:4px; border-radius:4px; }\nsnap-viewport, rp-viewport { display:flex; flex-direction:column; width:var(--snap-width,1440px); height:var(--snap-height,900px); background:#f8fafc; overflow:hidden; color:#111827; }\nsnap-layout, rp-layout { display:grid; grid-template-columns:var(--snap-columns,1fr); grid-template-rows:var(--snap-rows,auto); gap:var(--snap-gap,0); align-content:start; width:fit-content; max-width:100%; min-width:0; }\nsnap-layout > *, rp-layout > * { min-width:0; }\nsnap-viewport snap-layout, rp-viewport rp-layout { width:100%; }\nsnap-viewport > snap-layout, rp-viewport > rp-layout { flex:1 1 auto; min-height:0; }\nsnap-viewport > snap-navbar, rp-viewport > rp-navbar { flex:0 0 auto; }\nsnap-panel, rp-panel { display:block; width:fit-content; max-width:100%; background:#fff; border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); padding:var(--snap-padding,16px); }\nsnap-viewport snap-panel, rp-viewport rp-panel { width:auto; min-width:0; }\nsnap-panel[elevation=\"1\"], rp-panel[elevation=\"1\"] { box-shadow:0 4px 16px rgba(15,23,42,.06); }\nsnap-panel[elevation=\"2\"], rp-panel[elevation=\"2\"] { box-shadow:var(--rp-shadow); }\nsnap-navbar, rp-navbar { display:flex; align-items:center; gap:14px; height:var(--snap-height,64px); padding:0 24px; background:#fff; border-bottom:1px solid var(--rp-border); }\nsnap-sidebar, rp-sidebar { display:block; width:var(--snap-width,260px); min-height:0; background:#fff; border-right:1px solid var(--rp-border); padding:14px; }\nsnap-viewport snap-sidebar, rp-viewport rp-sidebar { min-height:100%; }\nsnap-sidebar[collapsed], rp-sidebar[collapsed] { width:72px; }\nsnap-logo, rp-logo { display:inline-grid; place-items:center; width:var(--snap-size,82px); height:32px; border-radius:8px; background:#111827; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; }\nsnap-search, rp-search, snap-input, rp-input, snap-date-picker, rp-date-picker { display:inline-flex; align-items:center; gap:8px; width:280px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }\nsnap-textarea, rp-textarea { display:block; width:320px; min-height:calc(var(--snap-rows,3) * 24px + 22px); padding:9px 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; white-space:pre-wrap; }\nsnap-search[state=\"focus\"], rp-search[state=\"focus\"], snap-input[state=\"focus\"], rp-input[state=\"focus\"], snap-textarea[state=\"focus\"], rp-textarea[state=\"focus\"], snap-date-picker[state=\"focus\"], rp-date-picker[state=\"focus\"] { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-search[state=\"filled\"], rp-search[state=\"filled\"], snap-input[state=\"filled\"], rp-input[state=\"filled\"], snap-textarea[state=\"filled\"], rp-textarea[state=\"filled\"], snap-date-picker[state=\"filled\"], rp-date-picker[state=\"filled\"] { border-color:#93c5fd; background:#f8fbff; }\nsnap-search[state=\"error\"], rp-search[state=\"error\"], snap-input[state=\"error\"], rp-input[state=\"error\"], snap-textarea[state=\"error\"], rp-textarea[state=\"error\"], snap-date-picker[state=\"error\"], rp-date-picker[state=\"error\"] { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\nsnap-search[state=\"disabled\"], rp-search[state=\"disabled\"], snap-input[state=\"disabled\"], rp-input[state=\"disabled\"], snap-textarea[state=\"disabled\"], rp-textarea[state=\"disabled\"], snap-date-picker[state=\"disabled\"], rp-date-picker[state=\"disabled\"] { opacity:.55; background:#f3f4f6; }\nsnap-input[label], rp-input[label], snap-date-picker[label], rp-date-picker[label] { display:inline-grid; align-items:start; gap:6px; width:280px; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }\nsnap-input[label][state=\"focus\"], rp-input[label][state=\"focus\"], snap-input[label][state=\"filled\"], rp-input[label][state=\"filled\"], snap-input[label][state=\"error\"], rp-input[label][state=\"error\"], snap-date-picker[label][state=\"focus\"], rp-date-picker[label][state=\"focus\"], snap-date-picker[label][state=\"filled\"], rp-date-picker[label][state=\"filled\"], snap-date-picker[label][state=\"error\"], rp-date-picker[label][state=\"error\"] { border:0; background:transparent; box-shadow:none; }\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; }\nsnap-input[state=\"focus\"] .rp-field-control, rp-input[state=\"focus\"] .rp-field-control, snap-date-picker[state=\"focus\"] .rp-field-control, rp-date-picker[state=\"focus\"] .rp-field-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-input[state=\"filled\"] .rp-field-control, rp-input[state=\"filled\"] .rp-field-control, snap-date-picker[state=\"filled\"] .rp-field-control, rp-date-picker[state=\"filled\"] .rp-field-control { border-color:#93c5fd; background:#f8fbff; }\nsnap-input[state=\"error\"] .rp-field-control, rp-input[state=\"error\"] .rp-field-control, snap-date-picker[state=\"error\"] .rp-field-control, rp-date-picker[state=\"error\"] .rp-field-control { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\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; }\nsnap-select, rp-select { display:inline-block; width:var(--snap-width,280px); }\n.rp-select-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; }\nsnap-select[state=\"expanded\"] .rp-select-control, rp-select[state=\"expanded\"] .rp-select-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-select[state=\"disabled\"], rp-select[state=\"disabled\"] { opacity:.55; }\n.rp-select-value { flex:1 1 auto; min-width:0; }\n.rp-select-options { display:none; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; box-shadow:0 10px 18px rgba(15,23,42,.08); }\nsnap-select[state=\"expanded\"] .rp-select-options, rp-select[state=\"expanded\"] .rp-select-options { display:grid; gap:2px; }\n.rp-select-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-select-option.selected { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nsnap-badge, rp-badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:750; }\nsnap-avatar, rp-avatar { display:inline-grid; place-items:center; width:var(--snap-size,32px); height:var(--snap-size,32px); border-radius:999px; background:#e0e7ff; color:#3730a3; font-size:12px; font-weight:800; }\nsnap-list, rp-list { display:flex; flex-direction:column; gap:4px; width:100%; }\nsnap-list-item, rp-list-item { display:flex; align-items:center; gap:8px; width:100%; min-width:180px; height:36px; padding:0 10px; border-radius:8px; color:#374151; }\nsnap-list-item[state=\"selected\"], rp-list-item[state=\"selected\"] { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nsnap-list-item[state=\"disabled\"], rp-list-item[state=\"disabled\"] { opacity:.5; }\n.rp-list-label { flex:1 1 auto; }\n.rp-list-badge { margin-left:auto; min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center; padding:0 6px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }\nsnap-tabs, rp-tabs { display:flex; gap:6px; border-bottom:1px solid var(--rp-border); margin-bottom:12px; width:fit-content; }\nsnap-tab, rp-tab { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; }\nsnap-tab.rp-tab-active, rp-tab.rp-tab-active { color:var(--rp-primary); border-bottom-color:var(--rp-primary); font-weight:700; }\nsnap-button, rp-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--rp-border); background:#fff; color:#374151; font-size:13px; font-weight:650; }\nsnap-button[size=\"sm\"], rp-button[size=\"sm\"] { min-height:28px; padding:0 9px; font-size:12px; border-radius:6px; }\nsnap-button[size=\"lg\"], rp-button[size=\"lg\"] { min-height:40px; padding:0 16px; font-size:14px; }\nsnap-button[variant=\"primary\"], rp-button[variant=\"primary\"] { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\nsnap-button[variant=\"secondary\"], rp-button[variant=\"secondary\"] { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }\nsnap-button[variant=\"danger\"], rp-button[variant=\"danger\"] { border-color:var(--rp-danger); color:var(--rp-danger); }\nsnap-button[variant=\"link\"], rp-button[variant=\"link\"] { border-color:transparent; background:transparent; color:var(--rp-primary); padding-inline:2px; }\nsnap-button[variant=\"ghost\"], rp-button[variant=\"ghost\"] { border-color:transparent; background:transparent; }\nsnap-button[state=\"disabled\"], rp-button[state=\"disabled\"], snap-button[disabled], rp-button[disabled] { opacity:.5; }\nsnap-button-group, rp-button-group { display:inline-flex; gap:0; width:fit-content; }\nsnap-button-group > snap-button, rp-button-group > rp-button { border-radius:0; margin-left:-1px; }\nsnap-button-group > :first-child { border-radius:8px 0 0 8px; margin-left:0; }\nsnap-button-group > :last-child { border-radius:0 8px 8px 0; }\nsnap-table, rp-table { display:table; border-collapse:collapse; width:fit-content; min-width:720px; max-width:980px; background:#fff; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsnap-viewport snap-table, rp-viewport rp-table { width:100%; max-width:none; }\n.rp-table-row { display:table-row; }\n.rp-table-cell { display:table-cell; padding:11px 12px; border-bottom:1px solid var(--rp-border); font-size:13px; vertical-align:middle; white-space:nowrap; }\n.rp-table-head .rp-table-cell { background:#f9fafb; color:#6b7280; font-size:12px; font-weight:750; }\n.rp-table-row:last-child .rp-table-cell { border-bottom:0; }\nsnap-table-row, rp-table-row { display:grid; grid-template-columns:44px 150px 240px 90px 90px; align-items:center; min-width:560px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#fff; }\nsnap-table-row > span, rp-table-row > span { padding:10px 12px; font-size:13px; }\nsnap-table-row[state=\"unread\"], rp-table-row[state=\"unread\"] { background:#eff6ff; font-weight:700; }\nsnap-table-row[state=\"selected\"], rp-table-row[state=\"selected\"] { outline:2px solid rgba(37,99,235,.35); background:#f8fbff; }\nsnap-table-row[state=\"highlighted\"], rp-table-row[state=\"highlighted\"] { background:#fffbeb; }\nsnap-table-row[state=\"disabled\"], rp-table-row[state=\"disabled\"] { opacity:.5; }\nsnap-bulk-action-bar, rp-bulk-action-bar { display:flex; align-items:center; gap:8px; width:fit-content; padding:8px 10px; margin:0 0 10px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:8px; color:#1e40af; font-size:13px; font-weight:650; }\nsnap-empty, rp-empty { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:240px; padding:24px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; }\n.rp-empty-title { color:#111827; font-weight:700; }\n.rp-empty-desc { font-size:13px; }\nsnap-loading, rp-loading { display:grid; gap:8px; min-width:260px; color:var(--rp-primary); }\n.rp-skeleton-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; }\nsnap-alert, rp-alert, snap-toast, rp-toast { display:flex; align-items:flex-start; gap:8px; width:fit-content; max-width:420px; padding:10px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\nsnap-alert[type=\"info\"], rp-alert[type=\"info\"], snap-toast[type=\"info\"], rp-toast[type=\"info\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nsnap-alert[type=\"success\"], rp-alert[type=\"success\"], snap-toast[type=\"success\"], rp-toast[type=\"success\"] { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }\nsnap-alert[type=\"warning\"], rp-alert[type=\"warning\"], snap-toast[type=\"warning\"], rp-toast[type=\"warning\"] { border-color:#fde68a; background:#fffbeb; color:#92400e; }\nsnap-alert[type=\"error\"], rp-alert[type=\"error\"], snap-toast[type=\"error\"], rp-toast[type=\"error\"] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }\nsnap-dropdown, rp-dropdown, snap-popover, rp-popover { display:block; width:var(--snap-width,300px); padding:8px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.1); }\nsnap-tooltip, rp-tooltip { display:inline-block; width:fit-content; max-width:240px; padding:6px 8px; border-radius:6px; background:#111827; color:#fff; font-size:12px; }\n.rp-overlay-title { margin:0 0 8px; color:#111827; font-size:14px; font-weight:750; }\nsnap-modal, rp-modal { display:block; width:min(var(--snap-width,480px), 100%); border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); overflow:hidden; }\nsnap-drawer, rp-drawer { display:block; width:min(var(--snap-width,360px), 100%); min-height:320px; border:1px solid var(--rp-border); background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.14); }\n.rp-modal-head, .rp-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--rp-border); font-weight:750; }\n.rp-modal-body, .rp-drawer-body { padding:16px; }\n.rp-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--rp-border); background:#f9fafb; }\nsnap-card, rp-card { display:block; width:auto; min-width:220px; padding:14px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-card-image { display:grid; place-items:center; height:120px; margin:-14px -14px 12px; border-radius:10px 10px 0 0; background:#f3f4f6; color:#6b7280; }\n.rp-card-title { display:block; color:#111827; font-weight:750; }\n.rp-card-subtitle { display:block; margin-top:4px; color:#6b7280; font-size:13px; }\n.rp-card-footer { margin:12px -14px -14px; padding:10px 14px; border-top:1px solid var(--rp-border); background:#f9fafb; }\nsnap-stat-card, rp-stat-card { display:grid; gap:6px; width:auto; min-width:0; padding:16px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\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; }\nsnap-stat-card[trend=\"up\"] .rp-stat-change, rp-stat-card[trend=\"up\"] .rp-stat-change { color:var(--rp-success); }\nsnap-stat-card[trend=\"down\"] .rp-stat-change, rp-stat-card[trend=\"down\"] .rp-stat-change { color:var(--rp-danger); }\nsnap-tag, rp-tag { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:650; }\nsnap-tag[color=\"green\"], rp-tag[color=\"green\"] { background:#dcfce7; color:#166534; }\nsnap-tag[color=\"orange\"], rp-tag[color=\"orange\"] { background:#ffedd5; color:#9a3412; }\nsnap-tag[color=\"red\"], rp-tag[color=\"red\"] { background:#fee2e2; color:#991b1b; }\nsnap-checkbox, rp-checkbox, snap-radio, rp-radio { 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; }\nsnap-checkbox[state=\"checked\"] .rp-box, rp-checkbox[state=\"checked\"] .rp-box, snap-radio[state=\"checked\"] .rp-box, rp-radio[state=\"checked\"] .rp-box, snap-checkbox[state=\"indeterminate\"] .rp-box, rp-checkbox[state=\"indeterminate\"] .rp-box { background:var(--rp-primary); border-color:var(--rp-primary); }\nsnap-checkbox[state=\"disabled\"], rp-checkbox[state=\"disabled\"], snap-radio[state=\"disabled\"], rp-radio[state=\"disabled\"] { opacity:.5; }\nsnap-radio .rp-box, rp-radio .rp-box { border-radius:999px; }\nsnap-toggle, rp-toggle { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.rp-toggle-track { width:34px; height:20px; border-radius:999px; background:#d1d5db; padding:2px; }\n.rp-toggle-dot { width:16px; height:16px; border-radius:999px; background:#fff; transition:none; }\nsnap-toggle[state=\"on\"] .rp-toggle-track, rp-toggle[state=\"on\"] .rp-toggle-track { background:var(--rp-primary); }\nsnap-toggle[state=\"on\"] .rp-toggle-dot, rp-toggle[state=\"on\"] .rp-toggle-dot { margin-left:14px; }\nsnap-toggle[state=\"disabled\"], rp-toggle[state=\"disabled\"] { opacity:.5; }\nsnap-form, rp-form { display:grid; gap:12px; width:fit-content; }\nsnap-form[layout=\"horizontal\"], rp-form[layout=\"horizontal\"] { grid-template-columns:max-content 1fr; align-items:start; }\nsnap-form-item, rp-form-item { display:grid; gap:6px; width:fit-content; }\n.rp-form-label { color:#374151; font-size:12px; font-weight:700; }\n.rp-form-label.required::after { content:\" *\"; color:var(--rp-danger); }\n.rp-form-error { color:var(--rp-danger); font-size:12px; }\nsnap-upload, rp-upload { display:grid; justify-items:center; gap:8px; width:280px; padding:18px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; font-size:13px; }\nsnap-upload[state=\"has-file\"], rp-upload[state=\"has-file\"] { justify-items:start; border-style:solid; color:#374151; }\nsnap-upload[state=\"uploading\"], rp-upload[state=\"uploading\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nsnap-image-placeholder, rp-image-placeholder { display:grid; place-items:center; width:var(--snap-width,160px); height:var(--snap-height,100px); background:#f3f4f6; border:1px dashed var(--rp-border-strong); border-radius:8px; color:#6b7280; font-size:12px; }\nsnap-progress, rp-progress { display:block; width:180px; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\nsnap-progress[kind=\"circle\"], rp-progress[kind=\"circle\"], snap-progress[style=\"circle\"], rp-progress[style=\"circle\"] { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:conic-gradient(var(--rp-primary) var(--progress,40%), #e5e7eb 0); font-size:12px; font-weight:750; }\n.rp-progress-bar { display:block; height:100%; width:var(--progress,40%); background:var(--rp-primary); }\nsnap-progress[status=\"success\"] .rp-progress-bar, rp-progress[status=\"success\"] .rp-progress-bar { background:var(--rp-success); }\nsnap-progress[status=\"error\"] .rp-progress-bar, rp-progress[status=\"error\"] .rp-progress-bar { background:var(--rp-danger); }\nsnap-pagination, rp-pagination { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:13px; }\n.rp-page-btn { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border:1px solid var(--rp-border); border-radius:6px; background:#fff; color:#374151; }\n.rp-page-btn.active { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; font-weight:750; }\nsnap-steps, rp-steps { 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); }\nsnap-breadcrumb, rp-breadcrumb { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.rp-breadcrumb-current { color:#111827; font-weight:650; }\n";
+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; }\nrp-page, proto-page { display:block; min-height:100vh; padding:32px 40px; overflow:auto; }\n.rp-page-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:100vh; align-items:start; }\n.rp-page-main { display:flex; flex-direction:column; min-width:0; overflow:visible; }\n.rp-page-header { flex:0 0 auto; width:fit-content; max-width:none; margin:0 0 22px; }\n.rp-page-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }\n.rp-page-title { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.02em; }\n.rp-page-route { font-size:13px; color:var(--rp-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.7); border:1px solid var(--rp-border); border-radius:999px; padding:3px 9px; }\n.rp-page-description { margin:10px 0 0; color:#374151; line-height:1.6; font-size:14px; }\n.rp-page-body { flex:0 1 auto; display:block; width:fit-content; max-width:100%; min-height:0; overflow:visible; }\n.rp-annotation-pane { min-width:380px; max-width:680px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:auto; padding:0 0 48px 0; align-self:start; }\n.rp-annotation-pane-inner { padding:4px 12px 24px 6px; }\nrp-main-view, proto-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; }\nrp-annotation, proto-annotation { display:block; width:fit-content; max-width:980px; margin:14px 0; line-height:1.65; color:#1f2937; font-size:14px; }\nrp-annotation rp-annotation, proto-annotation proto-annotation, rp-annotation proto-annotation, proto-annotation rp-annotation { margin:10px 0 8px 22px; }\n.rp-annotation-head { display:flex; align-items:center; gap:8px; margin:0 0 4px; width:fit-content; }\n.rp-annotation-title { font-weight:700; color:#111827; }\n.rp-annotation-marker { display:inline-grid; place-items:center; flex:0 0 auto; color:#fff; font-size:10px; font-weight:700; line-height:1; }\n.rp-annotation-marker.drop { width:22px; height:22px; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }\n.rp-annotation-marker.drop > span { transform:rotate(45deg); }\n.rp-annotation-marker.circle { width:16px; height:16px; background:var(--rp-purple); border-radius:50%; }\n.rp-annotation-marker.triangle { width:18px; height:16px; background:var(--rp-success); clip-path:polygon(50% 0, 100% 100%, 0 100%); }\n.rp-annotation-marker.triangle > span { transform:translateY(2px); font-size:9px; }\n.rp-annotation-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.rp-annotation-body > :not(rp-annotation):not(proto-annotation):not(rp-enum):not(proto-enum) { max-width:820px; }\n.rp-annotation-pane rp-annotation, .rp-annotation-pane proto-annotation { max-width:none; }\n.rp-annotation-pane .rp-annotation-body { max-width:none; }\n.rp-annotation-pane .rp-annotation-body > :not(rp-annotation):not(proto-annotation):not(rp-enum):not(proto-enum) { max-width:420px; }\n.rp-annotation-body p { margin:0 0 8px; }\nrp-enum, proto-enum { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; width:fit-content; margin:8px 0 12px; }\n.rp-annotation-pane rp-enum, .rp-annotation-pane proto-enum { flex-wrap:wrap; }\nrp-enum-item, proto-enum-item { display:block; flex:0 0 auto; width:fit-content; min-width:180px; max-width:600px; border:1px solid #f0f0f0; border-radius:var(--rp-radius-md); background:#fff; overflow:hidden; }\n.rp-enum-label { display:flex; align-items:flex-start; gap:6px; padding:5px 9px 4px; font-size:12px; font-weight:650; color:#374151; }\n.rp-enum-index { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; background:#111827; color:#fff; font-size:10px; font-weight:750; border-radius:3px; flex:0 0 auto; margin-top:1px; }\n.rp-enum-label-text { display:block; }\n.rp-enum-description { display:block; margin-top:2px; font-size:11px; line-height:1.35; font-weight:400; color:var(--rp-muted); }\n.rp-enum-content { display:block; width:fit-content; padding:8px; }\n.rp-annotation-title { font-weight:700; color:#111827; cursor:pointer; }\n.rp-annotation-title:hover { color:var(--rp-primary); }\n.rp-section-focus { outline:2px dashed var(--rp-primary); outline-offset:4px; border-radius:4px; }\nsnap-viewport, rp-viewport { display:flex; flex-direction:column; width:var(--snap-width,1440px); height:var(--snap-height,900px); background:#f8fafc; overflow:hidden; color:#111827; }\nsnap-layout, rp-layout { display:grid; grid-template-columns:var(--snap-columns,1fr); grid-template-rows:var(--snap-rows,auto); gap:var(--snap-gap,0); align-content:start; width:fit-content; max-width:100%; min-width:0; }\nsnap-layout > *, rp-layout > * { min-width:0; }\nsnap-viewport snap-layout, rp-viewport rp-layout { width:100%; }\nsnap-viewport > snap-layout, rp-viewport > rp-layout { flex:1 1 auto; min-height:0; }\nsnap-viewport > snap-navbar, rp-viewport > rp-navbar { flex:0 0 auto; }\nsnap-panel, rp-panel { display:block; width:fit-content; max-width:100%; background:#fff; border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); padding:var(--snap-padding,16px); }\nsnap-viewport snap-panel, rp-viewport rp-panel { width:auto; min-width:0; }\nsnap-panel[elevation=\"1\"], rp-panel[elevation=\"1\"] { box-shadow:0 4px 16px rgba(15,23,42,.06); }\nsnap-panel[elevation=\"2\"], rp-panel[elevation=\"2\"] { box-shadow:var(--rp-shadow); }\nsnap-navbar, rp-navbar { display:flex; align-items:center; gap:14px; height:var(--snap-height,64px); padding:0 24px; background:#fff; border-bottom:1px solid var(--rp-border); }\nsnap-sidebar, rp-sidebar { display:block; width:var(--snap-width,260px); min-height:0; background:#fff; border-right:1px solid var(--rp-border); padding:14px; }\nsnap-viewport snap-sidebar, rp-viewport rp-sidebar { min-height:100%; }\nsnap-sidebar[collapsed], rp-sidebar[collapsed] { width:72px; }\nsnap-logo, rp-logo { display:inline-grid; place-items:center; width:var(--snap-size,82px); height:32px; border-radius:8px; background:#111827; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; }\nsnap-search, rp-search, snap-input, rp-input, snap-date-picker, rp-date-picker { display:inline-flex; align-items:center; gap:8px; width:280px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }\nsnap-textarea, rp-textarea { display:block; width:320px; min-height:calc(var(--snap-rows,3) * 24px + 22px); padding:9px 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; white-space:pre-wrap; }\nsnap-search[state=\"focus\"], rp-search[state=\"focus\"], snap-input[state=\"focus\"], rp-input[state=\"focus\"], snap-textarea[state=\"focus\"], rp-textarea[state=\"focus\"], snap-date-picker[state=\"focus\"], rp-date-picker[state=\"focus\"] { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-search[state=\"filled\"], rp-search[state=\"filled\"], snap-input[state=\"filled\"], rp-input[state=\"filled\"], snap-textarea[state=\"filled\"], rp-textarea[state=\"filled\"], snap-date-picker[state=\"filled\"], rp-date-picker[state=\"filled\"] { border-color:#93c5fd; background:#f8fbff; }\nsnap-search[state=\"error\"], rp-search[state=\"error\"], snap-input[state=\"error\"], rp-input[state=\"error\"], snap-textarea[state=\"error\"], rp-textarea[state=\"error\"], snap-date-picker[state=\"error\"], rp-date-picker[state=\"error\"] { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\nsnap-search[state=\"disabled\"], rp-search[state=\"disabled\"], snap-input[state=\"disabled\"], rp-input[state=\"disabled\"], snap-textarea[state=\"disabled\"], rp-textarea[state=\"disabled\"], snap-date-picker[state=\"disabled\"], rp-date-picker[state=\"disabled\"] { opacity:.55; background:#f3f4f6; }\nsnap-input[label], rp-input[label], snap-date-picker[label], rp-date-picker[label] { display:inline-grid; align-items:start; gap:6px; width:280px; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }\nsnap-input[label][state=\"focus\"], rp-input[label][state=\"focus\"], snap-input[label][state=\"filled\"], rp-input[label][state=\"filled\"], snap-input[label][state=\"error\"], rp-input[label][state=\"error\"], snap-date-picker[label][state=\"focus\"], rp-date-picker[label][state=\"focus\"], snap-date-picker[label][state=\"filled\"], rp-date-picker[label][state=\"filled\"], snap-date-picker[label][state=\"error\"], rp-date-picker[label][state=\"error\"] { border:0; background:transparent; box-shadow:none; }\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; }\nsnap-input[state=\"focus\"] .rp-field-control, rp-input[state=\"focus\"] .rp-field-control, snap-date-picker[state=\"focus\"] .rp-field-control, rp-date-picker[state=\"focus\"] .rp-field-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-input[state=\"filled\"] .rp-field-control, rp-input[state=\"filled\"] .rp-field-control, snap-date-picker[state=\"filled\"] .rp-field-control, rp-date-picker[state=\"filled\"] .rp-field-control { border-color:#93c5fd; background:#f8fbff; }\nsnap-input[state=\"error\"] .rp-field-control, rp-input[state=\"error\"] .rp-field-control, snap-date-picker[state=\"error\"] .rp-field-control, rp-date-picker[state=\"error\"] .rp-field-control { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\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; }\nsnap-select, rp-select { display:inline-block; width:var(--snap-width,280px); }\n.rp-select-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; }\nsnap-select[state=\"expanded\"] .rp-select-control, rp-select[state=\"expanded\"] .rp-select-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-select[state=\"disabled\"], rp-select[state=\"disabled\"] { opacity:.55; }\n.rp-select-value { flex:1 1 auto; min-width:0; }\n.rp-select-options { display:none; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; box-shadow:0 10px 18px rgba(15,23,42,.08); }\nsnap-select[state=\"expanded\"] .rp-select-options, rp-select[state=\"expanded\"] .rp-select-options { display:grid; gap:2px; }\n.rp-select-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-select-option.selected { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nsnap-badge, rp-badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:750; }\nsnap-avatar, rp-avatar { display:inline-grid; place-items:center; width:var(--snap-size,32px); height:var(--snap-size,32px); border-radius:999px; background:#e0e7ff; color:#3730a3; font-size:12px; font-weight:800; }\nsnap-list, rp-list { display:flex; flex-direction:column; gap:4px; width:100%; }\nsnap-list-item, rp-list-item { display:flex; align-items:center; gap:8px; width:100%; min-width:180px; height:36px; padding:0 10px; border-radius:8px; color:#374151; }\nsnap-list-item[state=\"selected\"], rp-list-item[state=\"selected\"] { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nsnap-list-item[state=\"disabled\"], rp-list-item[state=\"disabled\"] { opacity:.5; }\n.rp-list-label { flex:1 1 auto; }\n.rp-list-badge { margin-left:auto; min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center; padding:0 6px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }\nsnap-tabs, rp-tabs { display:flex; gap:6px; border-bottom:1px solid var(--rp-border); margin-bottom:12px; width:fit-content; }\nsnap-tab, rp-tab { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; }\nsnap-tab.rp-tab-active, rp-tab.rp-tab-active { color:var(--rp-primary); border-bottom-color:var(--rp-primary); font-weight:700; }\nsnap-button, rp-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--rp-border); background:#fff; color:#374151; font-size:13px; font-weight:650; }\nsnap-button[size=\"sm\"], rp-button[size=\"sm\"] { min-height:28px; padding:0 9px; font-size:12px; border-radius:6px; }\nsnap-button[size=\"lg\"], rp-button[size=\"lg\"] { min-height:40px; padding:0 16px; font-size:14px; }\nsnap-button[variant=\"primary\"], rp-button[variant=\"primary\"] { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\nsnap-button[variant=\"secondary\"], rp-button[variant=\"secondary\"] { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }\nsnap-button[variant=\"danger\"], rp-button[variant=\"danger\"] { border-color:var(--rp-danger); color:var(--rp-danger); }\nsnap-button[variant=\"link\"], rp-button[variant=\"link\"] { border-color:transparent; background:transparent; color:var(--rp-primary); padding-inline:2px; }\nsnap-button[variant=\"ghost\"], rp-button[variant=\"ghost\"] { border-color:transparent; background:transparent; }\nsnap-button[state=\"disabled\"], rp-button[state=\"disabled\"], snap-button[disabled], rp-button[disabled] { opacity:.5; }\nsnap-button-group, rp-button-group { display:inline-flex; gap:0; width:fit-content; }\nsnap-button-group > snap-button, rp-button-group > rp-button { border-radius:0; margin-left:-1px; }\nsnap-button-group > :first-child { border-radius:8px 0 0 8px; margin-left:0; }\nsnap-button-group > :last-child { border-radius:0 8px 8px 0; }\nsnap-table, rp-table { display:table; border-collapse:collapse; width:fit-content; min-width:720px; max-width:980px; background:#fff; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsnap-viewport snap-table, rp-viewport rp-table { width:100%; max-width:none; }\n.rp-table-row { display:table-row; }\n.rp-table-cell { display:table-cell; padding:11px 12px; border-bottom:1px solid var(--rp-border); font-size:13px; vertical-align:middle; white-space:nowrap; }\n.rp-table-head .rp-table-cell { background:#f9fafb; color:#6b7280; font-size:12px; font-weight:750; }\n.rp-table-row:last-child .rp-table-cell { border-bottom:0; }\nsnap-table-row, rp-table-row { display:grid; grid-template-columns:44px 150px 240px 90px 90px; align-items:center; min-width:560px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#fff; }\nsnap-table-row > span, rp-table-row > span { padding:10px 12px; font-size:13px; }\nsnap-table-row[state=\"unread\"], rp-table-row[state=\"unread\"] { background:#eff6ff; font-weight:700; }\nsnap-table-row[state=\"selected\"], rp-table-row[state=\"selected\"] { outline:2px solid rgba(37,99,235,.35); background:#f8fbff; }\nsnap-table-row[state=\"highlighted\"], rp-table-row[state=\"highlighted\"] { background:#fffbeb; }\nsnap-table-row[state=\"disabled\"], rp-table-row[state=\"disabled\"] { opacity:.5; }\nsnap-bulk-action-bar, rp-bulk-action-bar { display:flex; align-items:center; gap:8px; width:fit-content; padding:8px 10px; margin:0 0 10px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:8px; color:#1e40af; font-size:13px; font-weight:650; }\nsnap-empty, rp-empty { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:240px; padding:24px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; }\n.rp-empty-title { color:#111827; font-weight:700; }\n.rp-empty-desc { font-size:13px; }\nsnap-loading, rp-loading { display:grid; gap:8px; min-width:260px; color:var(--rp-primary); }\n.rp-skeleton-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; }\nsnap-alert, rp-alert, snap-toast, rp-toast { display:flex; align-items:flex-start; gap:8px; width:fit-content; max-width:420px; padding:10px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\nsnap-alert[type=\"info\"], rp-alert[type=\"info\"], snap-toast[type=\"info\"], rp-toast[type=\"info\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nsnap-alert[type=\"success\"], rp-alert[type=\"success\"], snap-toast[type=\"success\"], rp-toast[type=\"success\"] { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }\nsnap-alert[type=\"warning\"], rp-alert[type=\"warning\"], snap-toast[type=\"warning\"], rp-toast[type=\"warning\"] { border-color:#fde68a; background:#fffbeb; color:#92400e; }\nsnap-alert[type=\"error\"], rp-alert[type=\"error\"], snap-toast[type=\"error\"], rp-toast[type=\"error\"] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }\nsnap-dropdown, rp-dropdown, snap-popover, rp-popover { display:block; width:var(--snap-width,300px); padding:8px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.1); }\nsnap-tooltip, rp-tooltip { display:inline-block; width:fit-content; max-width:240px; padding:6px 8px; border-radius:6px; background:#111827; color:#fff; font-size:12px; }\n.rp-overlay-title { margin:0 0 8px; color:#111827; font-size:14px; font-weight:750; }\nsnap-modal, rp-modal { display:block; width:min(var(--snap-width,480px), 100%); border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); overflow:hidden; }\nsnap-drawer, rp-drawer { display:block; width:min(var(--snap-width,360px), 100%); min-height:320px; border:1px solid var(--rp-border); background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.14); }\n.rp-modal-head, .rp-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--rp-border); font-weight:750; }\n.rp-modal-body, .rp-drawer-body { padding:16px; }\n.rp-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--rp-border); background:#f9fafb; }\nsnap-card, rp-card { display:block; width:auto; min-width:220px; padding:14px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-card-image { display:grid; place-items:center; height:120px; margin:-14px -14px 12px; border-radius:10px 10px 0 0; background:#f3f4f6; color:#6b7280; }\n.rp-card-title { display:block; color:#111827; font-weight:750; }\n.rp-card-subtitle { display:block; margin-top:4px; color:#6b7280; font-size:13px; }\n.rp-card-footer { display:block; margin:12px -14px -14px; padding:10px 14px; border-top:1px solid var(--rp-border); background:#f9fafb; }\nsnap-stat-card, rp-stat-card { display:grid; gap:6px; width:auto; min-width:0; padding:16px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\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; }\nsnap-stat-card[trend=\"up\"] .rp-stat-change, rp-stat-card[trend=\"up\"] .rp-stat-change { color:var(--rp-success); }\nsnap-stat-card[trend=\"down\"] .rp-stat-change, rp-stat-card[trend=\"down\"] .rp-stat-change { color:var(--rp-danger); }\nsnap-tag, rp-tag { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:650; }\nsnap-tag[color=\"green\"], rp-tag[color=\"green\"] { background:#dcfce7; color:#166534; }\nsnap-tag[color=\"orange\"], rp-tag[color=\"orange\"] { background:#ffedd5; color:#9a3412; }\nsnap-tag[color=\"red\"], rp-tag[color=\"red\"] { background:#fee2e2; color:#991b1b; }\nsnap-checkbox, rp-checkbox, snap-radio, rp-radio { 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; }\nsnap-checkbox[state=\"checked\"] .rp-box, rp-checkbox[state=\"checked\"] .rp-box, snap-radio[state=\"checked\"] .rp-box, rp-radio[state=\"checked\"] .rp-box, snap-checkbox[state=\"indeterminate\"] .rp-box, rp-checkbox[state=\"indeterminate\"] .rp-box { background:var(--rp-primary); border-color:var(--rp-primary); }\nsnap-checkbox[state=\"disabled\"], rp-checkbox[state=\"disabled\"], snap-radio[state=\"disabled\"], rp-radio[state=\"disabled\"] { opacity:.5; }\nsnap-radio .rp-box, rp-radio .rp-box { border-radius:999px; }\nsnap-toggle, rp-toggle { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.rp-toggle-track { display:flex; align-items:center; width:34px; height:20px; border-radius:999px; background:#d1d5db; padding:2px; }\n.rp-toggle-dot { display:block; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:none; }\nsnap-toggle[state=\"on\"] .rp-toggle-track, rp-toggle[state=\"on\"] .rp-toggle-track { background:var(--rp-primary); }\nsnap-toggle[state=\"on\"] .rp-toggle-dot, rp-toggle[state=\"on\"] .rp-toggle-dot { margin-left:14px; }\nsnap-toggle[state=\"disabled\"], rp-toggle[state=\"disabled\"] { opacity:.5; }\nsnap-form, rp-form { display:grid; gap:12px; width:fit-content; }\nsnap-form[layout=\"horizontal\"], rp-form[layout=\"horizontal\"] { grid-template-columns:max-content 1fr; align-items:start; }\nsnap-form-item, rp-form-item { display:grid; gap:6px; width:fit-content; }\n.rp-form-label { color:#374151; font-size:12px; font-weight:700; }\n.rp-form-label.required::after { content:\" *\"; color:var(--rp-danger); }\n.rp-form-error { color:var(--rp-danger); font-size:12px; }\nsnap-upload, rp-upload { display:grid; justify-items:center; gap:8px; width:280px; padding:18px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; font-size:13px; }\nsnap-upload[state=\"has-file\"], rp-upload[state=\"has-file\"] { justify-items:start; border-style:solid; color:#374151; }\nsnap-upload[state=\"uploading\"], rp-upload[state=\"uploading\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nsnap-image-placeholder, rp-image-placeholder { display:grid; place-items:center; width:var(--snap-width,160px); height:var(--snap-height,100px); background:#f3f4f6; border:1px dashed var(--rp-border-strong); border-radius:8px; color:#6b7280; font-size:12px; }\nsnap-progress, rp-progress { display:block; width:180px; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\nsnap-progress[kind=\"circle\"], rp-progress[kind=\"circle\"], snap-progress[style=\"circle\"], rp-progress[style=\"circle\"] { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:conic-gradient(var(--rp-primary) var(--progress,40%), #e5e7eb 0); font-size:12px; font-weight:750; }\n.rp-progress-bar { display:block; height:100%; width:var(--progress,40%); background:var(--rp-primary); }\nsnap-progress[status=\"success\"] .rp-progress-bar, rp-progress[status=\"success\"] .rp-progress-bar { background:var(--rp-success); }\nsnap-progress[status=\"error\"] .rp-progress-bar, rp-progress[status=\"error\"] .rp-progress-bar { background:var(--rp-danger); }\nsnap-pagination, rp-pagination { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:13px; }\n.rp-page-btn { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border:1px solid var(--rp-border); border-radius:6px; background:#fff; color:#374151; }\n.rp-page-btn.active { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; font-weight:750; }\nsnap-steps, rp-steps { 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); }\nsnap-breadcrumb, rp-breadcrumb { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.rp-breadcrumb-current { color:#111827; font-weight:650; }\n\n/* --- data input --- */\nsnap-slider, rp-slider { display:inline-flex; align-items:center; gap:10px; width:220px; }\n.rp-slider-track { position:relative; flex:1; height:4px; border-radius:999px; background:#e5e7eb; }\n.rp-slider-fill { position:absolute; height:100%; border-radius:999px; background:var(--rp-primary); }\n.rp-slider-thumb { position:absolute; top:50%; width:16px; height:16px; margin-left:-8px; transform:translateY(-50%); border-radius:50%; background:#fff; border:1px solid var(--rp-border-strong); box-shadow:0 1px 3px rgba(0,0,0,.2); }\n.rp-slider-value { font-size:12px; color:#374151; min-width:24px; }\nsnap-range, rp-range { display:inline-flex; align-items:center; width:220px; }\nsnap-number-input, rp-number-input { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 4px 0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; width:120px; }\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; }\nsnap-rating, rp-rating { display:inline-flex; gap:2px; color:#d1d5db; }\n.rp-star.filled { color:#f59e0b; }\nsnap-pin-input, rp-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); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-color-swatch, rp-color-swatch { display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }\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; }\nsnap-autocomplete, rp-autocomplete { 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; box-shadow:0 10px 18px rgba(15,23,42,.08); }\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 --- */\nsnap-chip, rp-chip { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--rp-border); background:#f9fafb; color:#374151; font-size:12px; }\nsnap-tree, rp-tree { display:flex; flex-direction:column; gap:1px; width:fit-content; min-width:240px; }\n.rp-tree-row { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; color:#374151; font-size:13px; padding-left:calc(8px + var(--tree-level,0) * 18px); }\n.rp-tree-row.selected { background:#eff6ff; color:#1d4ed8; font-weight:650; }\n.rp-tree-spacer { display:inline-block; width:12px; }\n.rp-tree-label { flex:1; }\nsnap-timeline, rp-timeline { display:flex; flex-direction:column; width:fit-content; min-width:260px; }\nsnap-timeline-item, rp-timeline-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }\nsnap-timeline-item:not(:last-child)::before, rp-timeline-item:not(:last-child)::before { content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--rp-border); }\n.rp-timeline-dot { flex:0 0 auto; width:14px; height:14px; margin-top:2px; border-radius:50%; background:#fff; border:2px solid var(--rp-border-strong); z-index:1; }\n.rp-timeline-dot.active { border-color:var(--rp-primary); background:var(--rp-primary); }\n.rp-timeline-dot.done { border-color:var(--rp-success); background:var(--rp-success); }\n.rp-timeline-dot.error { border-color:var(--rp-danger); background:var(--rp-danger); }\n.rp-timeline-main { flex:1; }\n.rp-timeline-head { display:flex; align-items:baseline; gap:8px; }\n.rp-timeline-label { font-weight:650; color:#111827; font-size:13px; }\n.rp-timeline-time { font-size:12px; color:#9ca3af; }\n.rp-timeline-content { font-size:13px; color:#6b7280; margin-top:2px; }\nsnap-calendar, rp-calendar { 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; }\nsnap-kanban, rp-kanban { display:flex; gap:12px; width:fit-content; align-items:flex-start; }\nsnap-kanban-column, rp-kanban-column { display:flex; flex-direction:column; width:200px; padding:10px; border-radius:10px; background:#f3f4f6; }\n.rp-kanban-head { display:flex; align-items:center; justify-content:space-between; font-weight:650; font-size:13px; margin-bottom:8px; color:#374151; }\n.rp-kanban-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e5e7eb; font-size:11px; }\n.rp-kanban-body { display:flex; flex-direction:column; gap:8px; }\nsnap-kanban-card, rp-kanban-card { display:block; padding:10px; border-radius:8px; background:#fff; border:1px solid var(--rp-border); }\n.rp-kanban-card-title { display:block; font-size:13px; color:#111827; }\n.rp-kanban-card-tag { display:inline-block; margin-top:6px; padding:1px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; }\nsnap-code-block, rp-code-block { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#0f172a; }\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; }\nsnap-diff, rp-diff { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; font-family:ui-monospace,Menlo,monospace; }\n.rp-diff-line { display:flex; align-items:center; gap:10px; padding:2px 10px; }\n.rp-diff-line.add { background:#dcfce7; }\n.rp-diff-line.del { background:#fee2e2; }\n.rp-diff-sign { width:10px; color:#6b7280; }\n.rp-diff-line.add .rp-code-bar { background:#86efac; }\n.rp-diff-line.del .rp-code-bar { background:#fca5a5; }\n.rp-diff-line.ctx .rp-code-bar { background:#e5e7eb; }\nsnap-image-grid, rp-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; }\nsnap-key-value, rp-key-value { display:flex; flex-direction:column; width:fit-content; min-width:240px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsnap-kv-row, rp-kv-row { display:flex; border-bottom:1px solid var(--rp-border); }\nsnap-kv-row:last-child, rp-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; }\nsnap-accordion, rp-accordion { display:flex; flex-direction:column; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsnap-accordion-item, rp-accordion-item { display:block; border-bottom:1px solid var(--rp-border); }\nsnap-accordion-item:last-child, rp-accordion-item:last-child { border-bottom:0; }\n.rp-accordion-head { display:flex; align-items:center; gap:8px; padding:11px 14px; font-weight:650; font-size:13px; color:#111827; }\n.rp-accordion-body { padding:0 14px 14px 36px; font-size:13px; color:#6b7280; }\nsnap-banner, rp-banner { display:flex; align-items:center; gap:10px; width:fit-content; min-width:480px; padding:12px 16px; border-radius:8px; font-size:13px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }\nsnap-banner[type=\"success\"], rp-banner[type=\"success\"] { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }\nsnap-banner[type=\"warning\"], rp-banner[type=\"warning\"] { background:#fffbeb; color:#92400e; border-color:#fde68a; }\nsnap-banner[type=\"error\"], rp-banner[type=\"error\"] { background:#fef2f2; color:#991b1b; border-color:#fecaca; }\n.rp-banner-text { flex:1; }\nsnap-skeleton, rp-skeleton { 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; }\nsnap-countdown, rp-countdown { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#fef2f2; color:#991b1b; font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }\nsnap-result, rp-result { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:280px; padding:32px; text-align:center; }\n.rp-result-icon.success { color:var(--rp-success); }\n.rp-result-icon.error { color:var(--rp-danger); }\n.rp-result-icon.empty { color:#9ca3af; }\n.rp-result-title { font-size:16px; font-weight:700; color:#111827; }\n.rp-result-desc { font-size:13px; color:#6b7280; }\nsnap-permission-gate, rp-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; }\nsnap-quota-bar, rp-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); }\nsnap-api-key, rp-api-key { display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#f9fafb; }\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; }\nsnap-audit-row, rp-audit-row { display:flex; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--rp-border); width:fit-content; min-width:320px; font-size:13px; }\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; }\nsnap-workflow-node, rp-workflow-node { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\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 --- */\nsnap-segmented, rp-segmented { 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; box-shadow:0 1px 3px rgba(0,0,0,.08); }\nsnap-command-palette, rp-command-palette { display:block; width:520px; border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); overflow:hidden; }\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; }\nsnap-context-menu, rp-context-menu, snap-menu, rp-menu { display:inline-flex; flex-direction:column; min-width:180px; padding:5px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.12); }\n.rp-menu-item, snap-menu-item, rp-menu-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-menu-item.danger, snap-menu-item.danger, rp-menu-item.danger { color:var(--rp-danger); }\n.rp-menu-item.disabled, snap-menu-item.disabled, rp-menu-item.disabled { opacity:.45; }\n.rp-menu-label { flex:1; }\n.rp-menu-shortcut { color:#9ca3af; font-size:12px; }\nsnap-toc, rp-toc { display:flex; flex-direction:column; gap:2px; width:fit-content; min-width:160px; border-left:2px solid var(--rp-border); }\n.rp-toc-item { padding:4px 12px; font-size:13px; color:#6b7280; border-left:2px solid transparent; margin-left:-2px; }\n.rp-toc-item.active { color:var(--rp-primary); border-left-color:var(--rp-primary); font-weight:650; }\nsnap-kbd, rp-kbd { display:inline-flex; align-items:center; gap:3px; }\n.rp-kbd-key { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:1px solid var(--rp-border-strong); border-bottom-width:2px; border-radius:5px; background:#f9fafb; font-size:11px; font-family:var(--rp-font); color:#374151; }\n.rp-kbd-plus { color:#9ca3af; font-size:11px; }\nsnap-split-pane, rp-split-pane { display:grid; grid-template-columns:var(--snap-columns,1fr 1fr); width:fit-content; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsnap-split-pane > *, rp-split-pane > * { padding:14px; }\nsnap-split-pane > *:not(:last-child), rp-split-pane > *:not(:last-child) { border-right:1px solid var(--rp-border); }\nsnap-divider, rp-divider { display:block; height:1px; background:var(--rp-border); margin:12px 0; }\nsnap-divider.rp-divider-v, rp-divider.rp-divider-v { display:inline-block; width:1px; height:auto; align-self:stretch; margin:0 12px; }\nsnap-spacer, rp-spacer { display:block; height:var(--snap-size,16px); }\n\n/* --- iOS --- */\nsnap-ios-navbar, rp-ios-navbar { display:block; background:rgba(249,249,249,.94); border-bottom:1px solid #d8d8dc; padding:6px 12px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }\n.rp-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; }\nsnap-ios-tabbar, rp-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; }\nsnap-ios-list, rp-ios-list { display:block; border-radius:10px; background:#fff; overflow:hidden; width:fit-content; min-width:300px; border:1px solid #e5e5ea; font-family:-apple-system,sans-serif; }\n.rp-ios-list-header { padding:6px 16px; font-size:13px; color:#6d6d72; background:#f2f2f7; text-transform:none; }\nsnap-ios-list-item, rp-ios-list-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid #e5e5ea; font-size:15px; color:#000; }\nsnap-ios-list-item:last-child, rp-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; }\nsnap-ios-action-sheet, rp-ios-action-sheet { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:320px; padding:8px; font-family:-apple-system,sans-serif; }\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; }\nsnap-ios-alert, rp-ios-alert { display:block; width:270px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); font-family:-apple-system,sans-serif; }\n.rp-ios-alert-body { padding:18px 16px 14px; text-align:center; }\n.rp-ios-alert-title { font-size:17px; font-weight:600; color:#000; }\n.rp-ios-alert-msg { margin-top:3px; font-size:13px; color:#000; }\n.rp-ios-alert-actions { display:flex; border-top:1px solid #d1d1d6; }\n.rp-ios-alert-btn { flex:1; padding:11px; text-align:center; font-size:17px; color:#007aff; }\n.rp-ios-alert-btn.primary { font-weight:600; }\n.rp-ios-alert-btn:not(:last-child) { border-right:1px solid #d1d1d6; }\nsnap-ios-switch, rp-ios-switch { display:inline-flex; align-items:center; gap:8px; font-family:-apple-system,sans-serif; font-size:15px; }\n.rp-ios-switch-track { width:51px; height:31px; border-radius:999px; background:#34c759; padding:2px; }\n.rp-ios-switch-dot { display:block; width:27px; height:27px; border-radius:50%; background:#fff; margin-left:20px; box-shadow:0 2px 4px rgba(0,0,0,.2); }\nsnap-ios-segmented, rp-ios-segmented { display:inline-flex; padding:2px; border-radius:9px; background:#767680; background:rgba(118,118,128,.12); gap:2px; font-family:-apple-system,sans-serif; }\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; box-shadow:0 1px 3px rgba(0,0,0,.12); }\nsnap-ios-button, rp-ios-button { display:inline-grid; place-items:center; min-height:34px; padding:0 16px; border-radius:8px; background:#007aff; color:#fff; font-size:15px; font-weight:600; font-family:-apple-system,sans-serif; }\nsnap-ios-button[variant=\"tinted\"], rp-ios-button[variant=\"tinted\"] { background:rgba(0,122,255,.15); color:#007aff; }\nsnap-ios-button[variant=\"plain\"], rp-ios-button[variant=\"plain\"] { background:transparent; color:#007aff; }\nsnap-ios-search, rp-ios-search { display:inline-flex; align-items:center; gap:6px; width:280px; height:36px; padding:0 10px; border-radius:10px; background:rgba(118,118,128,.12); color:#8e8e93; font-size:15px; font-family:-apple-system,sans-serif; }\nsnap-ios-stepper, rp-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 --- */\nsnap-macos-window, rp-macos-window { display:block; width:fit-content; min-width:480px; border-radius:10px; overflow:hidden; border:1px solid #d1d1d6; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.25); font-family:-apple-system,sans-serif; }\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; }\nsnap-macos-toolbar, rp-macos-toolbar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#f6f6f6; border-bottom:1px solid #d1d1d6; }\nsnap-macos-menubar, rp-macos-menubar { display:flex; align-items:center; gap:18px; height:26px; padding:0 14px; background:rgba(246,246,246,.9); border-bottom:1px solid #d1d1d6; font-size:13px; font-family:-apple-system,sans-serif; }\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; }\nsnap-macos-sidebar, rp-macos-sidebar { display:flex; flex-direction:column; gap:1px; width:220px; padding:8px; background:rgba(246,246,246,.85); font-family:-apple-system,sans-serif; }\nsnap-macos-source-item, rp-macos-source-item { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px; font-size:13px; color:#3c3c43; }\nsnap-macos-source-item.selected, rp-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; }\nsnap-macos-segmented, rp-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; }\nsnap-macos-popover, rp-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; box-shadow:0 12px 40px rgba(0,0,0,.2); }\n.rp-mac-pop-title { font-weight:600; font-size:13px; margin-bottom:8px; }\nsnap-macos-sheet, rp-macos-sheet { display:block; width:fit-content; min-width:420px; border-radius:10px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.3); padding:18px; font-family:-apple-system,sans-serif; }\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; }\nsnap-macos-stepper, rp-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; }\nsnap-macos-disclosure, rp-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; }\nsnap-macos-table, rp-macos-table { display:flex; flex-direction:column; width:fit-content; min-width:360px; border:1px solid #d1d1d6; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }\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) --- */\nsnap-chat, rp-chat { display:flex; flex-direction:column; gap:24px; width:fit-content; min-width:520px; max-width:680px; }\nsnap-user-message, rp-user-message, snap-assistant-message, rp-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; }\nsnap-user-message .rp-msg-content, rp-user-message .rp-msg-content { color:#111827; }\nsnap-system-message, rp-system-message { display:flex; justify-content:center; }\n.rp-sysmsg-line { padding:3px 12px; border-radius:999px; background:#f3f4f6; color:#6b7280; font-size:12px; }\nsnap-tool-call, rp-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; }\nsnap-agent-output, rp-agent-output { display:block; width:fit-content; min-width:280px; max-width:600px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#f8fafc; }\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; }\nsnap-reasoning, rp-reasoning { 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; }\nsnap-message-actions, rp-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; }\nsnap-suggestions, rp-suggestions { 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; }\nsnap-typing, rp-typing { display:flex; align-items:center; }\n.rp-typing-dots { display:inline-flex; gap:4px; }\n.rp-typing-dots > span { width:7px; height:7px; border-radius:50%; background:#c7c7cc; }\nsnap-composer, rp-composer { display:flex; align-items:center; gap:10px; width:fit-content; min-width:520px; max-width:680px; padding:9px 9px 9px 14px; border:1px solid var(--rp-border-strong); border-radius:14px; background:#fff; }\n.rp-composer-attach { display:inline-flex; color:#9ca3af; }\n.rp-composer-input { flex:1; font-size:14px; }\n.rp-composer-send { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#111827; color:#fff; }\n.rp-composer-send.streaming { background:var(--rp-danger); }\nsnap-citation, rp-citation { display:inline-flex; align-items:center; gap:6px; max-width:280px; padding:3px 9px 3px 3px; border:1px solid var(--rp-border); border-radius:6px; background:#f9fafb; font-size:12px; color:#374151; }\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; }\nsnap-token-usage, rp-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; }\n";
 export declare function injectStyle(): void;

package/dist/primitives/agent.d.ts

@@ -0,0 +1,39 @@
+export declare class ChatElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class UserMessageElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class AssistantMessageElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class SystemMessageElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ToolCallElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class AgentOutputElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ReasoningElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class MessageActionsElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class SuggestionsElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class TypingElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ComposerElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class CitationElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class TokenUsageElement extends HTMLElement {
+    connectedCallback(): void;
+}

package/dist/primitives/controls.d.ts

@@ -38,3 +38,24 @@ export declare class ImagePlaceholderElement extends HTMLElement {
 export declare class ProgressElement extends HTMLElement {
     connectedCallback(): void;
 }
+export declare class SliderElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class RangeElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class NumberInputElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class RatingElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class PinInputElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ColorSwatchElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class AutocompleteElement extends HTMLElement {
+    connectedCallback(): void;
+}