@21stware/rpui 0.1.0

package/README.md

@@ -0,0 +1,113 @@
+# 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.
+
+A prototype imports one generated runtime file:
+
+```html
+<script type="module" src="./dist/rpui.js"></script>
+```
+
+The runtime registers custom elements as a side effect and injects its global stylesheet and inline SVG icons. No framework, external CSS, image CDN, or icon CDN is required.
+
+## What it provides
+
+- `rp-page`, `rp-main-view`, `rp-annotation`, `rp-enum`, and `rp-enum-item` for the annotation canvas.
+- A persistent two-pane page layout: title and main snapshot stay visible on the left; top-level annotations render in an independently scrollable right pane.
+- Device preset sizing for `web`, `ipad`, and `mobile`, with fixed-width/auto-height snapshots by default.
+- `rp-enum-item description="..."` for short state explanations.
+- `rp-*` snapshot primitives for static product UI snapshots and annotation slices.
+- Compatibility aliases: `proto-*` for canvas primitives and `snap-*` for snapshot primitives.
+- Automatic numbered pin rendering from `data-pin="N"` inside `rp-main-view`.
+- Attribute-driven static visual states for forms, navigation, tables, overlays, feedback, and empty/loading states.
+- `llms.txt` as the model-facing component reference.
+- `skill.txt` as the repeatable RPUI prototype authoring workflow.
+
+## Development
+
+```bash
+npm install
+npm run build
+```
+
+Useful scripts:
+
+```bash
+npm run dev        # open the source-mode component preview at /preview/
+npm run typecheck  # run TypeScript type checking without emitting files
+npm run build      # type-check, bundle dist/rpui.js, and emit declarations
+npm run release    # currently aliases npm run build
+npm run clean      # remove and recreate dist/
+```
+
+There are currently no lint or test scripts. Use `npm run build` as the full type-check and release artifact verification step.
+
+## Release artifacts
+
+Runtime source is organized into internal modules:
+
+- `src/rpui.ts` — public side-effect entry/aggregator
+- `src/registry.ts` — custom element registration and aliases
+- `src/core/` — icons, runtime CSS injection, DOM/attribute helpers
+- `src/canvas/` — page shell, main view, annotations, enums
+- `src/primitives/` — snapshot primitive component groups
+
+Build output is generated into `dist/`:
+
+- `dist/rpui.js` — bundled browser/runtime entrypoint
+- `dist/rpui.d.ts` — TypeScript declaration output for the public entry
+- `dist/rpui.js.map` — source map
+
+The package is ESM and exposes `dist/rpui.js` through `main`, `module`, and `exports`. The package is side-effectful because importing it registers custom elements.
+
+## Development preview
+
+Run the source-mode preview during component development:
+
+```bash
+npm run dev
+```
+
+This opens `/preview/`, which imports `/src/rpui.ts` directly through Vite. Use it to review component states while editing source.
+
+The demo files under `demo/` intentionally import `../dist/rpui.js` and are release-artifact smoke tests; run `npm run build` before opening them after source changes.
+
+## Demo
+
+After building, open `demo/index.html` in a browser.
+
+The demo shows the intended static document structure:
+
+- one `<rp-page>` root
+- one `<rp-main-view>` containing a main snapshot
+- meaningful `data-pin="N"` anchors
+- matching top-level annotations
+- nested annotations and enum-based state coverage
+
+## Authoring guidance
+
+Use `rp-*` tags for new work. `proto-*` and `snap-*` are compatibility aliases.
+
+Prefer device presets for new prototypes:
+
+```html
+<rp-main-view device="web" scale="0.65">
+  <rp-viewport device="web">
+    <!-- fixed-width, auto-height snapshot -->
+  </rp-viewport>
+</rp-main-view>
+```
+
+Supported presets are `web` (1440px), `ipad` (834px), and `mobile` (390px). Explicit `width` overrides a preset; explicit numeric `height` keeps legacy fixed-height behavior.
+
+Top-level annotations render in the right-side annotation pane automatically. Keep annotation content compact; use `rp-enum-item description="..."` for short state explanations.
+
+Prototype pages should be static and self-contained:
+
+- no functional JavaScript interactions
+- no event attributes such as `onclick`
+- no external CSS/image/icon CDN
+- no `position:absolute` or `position:fixed` in snapshot content
+- all states represented explicitly through attributes and `<rp-enum>` items
+
+See `llms.txt` for the component reference and `skill.txt` for the full prototype workflow.

package/dist/canvas/annotation.d.ts

@@ -0,0 +1,10 @@
+export declare class RpAnnotation extends HTMLElement {
+    connectedCallback(): void;
+    annotationDepth(): number;
+}
+export declare class RpEnum extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class RpEnumItem extends HTMLElement {
+    connectedCallback(): void;
+}

package/dist/canvas/main-view.d.ts

@@ -0,0 +1,9 @@
+export declare class RpMainView extends HTMLElement {
+    private ro?;
+    private frame;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    scheduleRender(): void;
+    syncAutoHeight(): void;
+    renderPins(): void;
+}

package/dist/canvas/page.d.ts

@@ -0,0 +1,3 @@
+export declare class RpPage extends HTMLElement {
+    connectedCallback(): void;
+}

package/dist/core/dom.d.ts

@@ -0,0 +1,12 @@
+export declare function attr(el: Element, name: string, fallback?: string): string;
+export declare function intAttr(el: Element, name: string, fallback: number): number;
+export declare function escapeHtml(value: string): string;
+export declare function csv(el: Element, name: string, fallback: string): string[];
+export declare const deviceWidths: Record<string, number>;
+export declare function resolveWidth(el: Element, fallback: number): number;
+export declare function hasExplicitNumericHeight(el: Element): boolean;
+export declare function usesAutoHeight(el: Element): boolean;
+export declare function resolveHeight(el: Element, fallback: number): number;
+export declare function isTopAnnotation(node: Node): node is HTMLElement;
+export declare function isViewportNode(node: Node): node is HTMLElement;
+export declare function define(name: string, ctor: CustomElementConstructor): void;

package/dist/core/icons.d.ts

@@ -0,0 +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 declare function icon(name?: string, size?: number): string;

package/dist/core/style.d.ts

@@ -0,0 +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 function injectStyle(): void;

package/dist/primitives/controls.d.ts

@@ -0,0 +1,40 @@
+export declare class FieldElement extends HTMLElement {
+    connectedCallback(): void;
+    fieldIcon(): string;
+}
+export declare class TextareaElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class SelectElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ButtonElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class CheckboxElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class RadioElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ToggleElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class FormElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class FormItemElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class DatePickerElement extends FieldElement {
+    fieldIcon(): string;
+}
+export declare class UploadElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ImagePlaceholderElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ProgressElement extends HTMLElement {
+    connectedCallback(): void;
+}

package/dist/primitives/data-display.d.ts

@@ -0,0 +1,40 @@
+export declare function sampleCell(c: string, j: number, i: number): string;
+export declare class TableElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class TableRowElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class BulkActionBarElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class EmptyElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class LoadingElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class AlertElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class OverlayElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class TooltipElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ModalElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class DrawerElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class CardElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class StatCardElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class TagElement extends HTMLElement {
+    connectedCallback(): void;
+}

package/dist/primitives/layout.d.ts

@@ -0,0 +1,21 @@
+export declare class GenericElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ViewportElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class LayoutElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class PanelElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class NavbarElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class SidebarElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class LogoElement extends HTMLElement {
+    connectedCallback(): void;
+}

package/dist/primitives/navigation.d.ts

@@ -0,0 +1,27 @@
+export declare class BadgeElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class AvatarElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ListElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class ListItemElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class TabsElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class TabElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class PaginationElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class StepsElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export declare class BreadcrumbElement extends HTMLElement {
+    connectedCallback(): void;
+}

package/dist/registry.d.ts

@@ -0,0 +1 @@
+export declare function registerAll(): void;

package/dist/rpui.d.ts

@@ -0,0 +1,2 @@
+import { registerAll } from './registry';
+export { registerAll };