@roxyapi/ui 0.0.1 → 0.1.1

package/dist/components/data.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Generic fallback renderer. Accepts ANY OpenAPI response shape and renders it
+ * via field-name heuristics so future spec additions render reasonably without
+ * hand-wired components. Mirrors the WordPress GenericRenderer pattern.
+ *
+ * Heuristic order:
+ *   1. Primitive (string, number, boolean) -> single line.
+ *   2. Array of primitives -> chip list.
+ *   3. Array of objects with shared keys -> table.
+ *   4. Object with title-like field -> card with key/value rows.
+ *   5. Otherwise -> definition list of all keys.
+ *
+ * Future spec hint: when the server emits `x-roxy-ui` on a schema, the
+ * dispatcher in tool-call (Phase 2.5) will select a hand-tuned component
+ * instead of this fallback.
+ */
+type Json = string | number | boolean | null | Json[] | {
+    [key: string]: Json;
+};
+export declare class RoxyData extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: Json;
+    render(): TemplateResult<1>;
+    private renderValue;
+    private renderArray;
+    private renderTable;
+    private renderObject;
+    private renderField;
+    private formatPrimitive;
+    private collectKeys;
+    private humanize;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'roxy-data': RoxyData;
+    }
+}
+export {};
+//# sourceMappingURL=data.d.ts.map

package/dist/components/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/components/data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;;;;GAeG;AAEH,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,EAAE,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAMhF,qBACa,QAAS,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,4BAiGX;IAGF,IAAI,EAAE,IAAI,CAAQ;IAElB,MAAM;IAYN,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,YAAY;IA+CpB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,QAAQ;CAMhB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

package/dist/components/data.js

@@ -0,0 +1,339 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// packages/ui/src/components/data.ts
+import { css as css2, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// packages/ui/src/utils/base-styles.ts
+import { css } from "lit";
+var baseStyles = css`
+	:host {
+		display: block;
+		container-type: inline-size;
+		font-family: var(
+			--roxy-font-sans,
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			sans-serif
+		);
+		color: var(--roxy-fg, #0a0a0a);
+		background: transparent;
+		font-size: var(--roxy-text-base, 1rem);
+		line-height: var(--roxy-leading-normal, 1.5);
+		animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	@keyframes roxy-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(2px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			animation: none;
+		}
+	}
+
+	.roxy-skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--roxy-border, #e4e4e7) 0%,
+			color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
+			var(--roxy-border, #e4e4e7) 100%
+		);
+		background-size: 200% 100%;
+		animation: roxy-shimmer 1.4s ease-in-out infinite;
+		border-radius: var(--roxy-radius-md, 8px);
+	}
+
+	@keyframes roxy-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.roxy-skeleton {
+			animation: none;
+		}
+	}
+
+	.roxy-empty {
+		padding: var(--roxy-space-lg, 1.5rem);
+		color: var(--roxy-muted, #71717a);
+		text-align: center;
+		font-size: var(--roxy-text-sm, 0.875rem);
+	}
+
+	:host(:focus-within) .roxy-card {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+	}
+`;
+
+// packages/ui/src/components/data.ts
+var TITLE_KEYS = ["title", "name", "label", "heading", "overview", "summary"];
+var IMAGE_KEYS = ["imageUrl", "image", "icon", "symbol"];
+var SKIP_KEYS = ["imageUrl", "image"];
+var RoxyData = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+  }
+  render() {
+    if (this.data == null) {
+      return html`<div class="roxy-empty" role="status">No data</div>`;
+    }
+    return html`<div
+			class="roxy-card"
+			aria-label="Generic data display"
+		>
+			${this.renderValue(this.data)}
+		</div>`;
+  }
+  renderValue(value) {
+    if (value === null || value === void 0) return nothing;
+    if (typeof value === "string") return html`<p>${value}</p>`;
+    if (typeof value === "number" || typeof value === "boolean") {
+      return html`<p>${String(value)}</p>`;
+    }
+    if (Array.isArray(value)) return this.renderArray(value);
+    return this.renderObject(value);
+  }
+  renderArray(arr) {
+    if (arr.length === 0) {
+      return html`<div class="roxy-empty" role="status">Empty list</div>`;
+    }
+    const allPrimitive = arr.every(
+      (v) => v === null || ["string", "number", "boolean"].includes(typeof v)
+    );
+    if (allPrimitive) {
+      return html`<ul class="roxy-chips">
+				${arr.map((v) => html`<li>${String(v)}</li>`)}
+			</ul>`;
+    }
+    const allObjects = arr.every(
+      (v) => v !== null && typeof v === "object" && !Array.isArray(v)
+    );
+    if (allObjects) return this.renderTable(arr);
+    return html`<ol>
+			${arr.map((v) => html`<li>${this.renderValue(v)}</li>`)}
+		</ol>`;
+  }
+  renderTable(rows) {
+    const keys = this.collectKeys(rows);
+    return html`<table class="roxy-table" role="table">
+			<thead>
+				<tr>
+					${keys.map((k) => html`<th>${this.humanize(k)}</th>`)}
+				</tr>
+			</thead>
+			<tbody>
+				${rows.map(
+      (row) => html`<tr>
+						${keys.map((k) => html`<td>${this.formatPrimitive(row[k])}</td>`)}
+					</tr>`
+    )}
+			</tbody>
+		</table>`;
+  }
+  renderObject(obj) {
+    const titleKey = TITLE_KEYS.find((k) => typeof obj[k] === "string");
+    const imageKey = IMAGE_KEYS.find(
+      (k) => typeof obj[k] === "string" && obj[k].startsWith("http")
+    );
+    const summaryKey = titleKey !== "summary" && typeof obj.summary === "string" ? "summary" : null;
+    const rows = Object.entries(obj).filter(
+      ([k, v]) => k !== titleKey && k !== summaryKey && !SKIP_KEYS.includes(k) && v !== null && v !== void 0
+    );
+    return html`
+			${imageKey ? html`<img
+						class="roxy-image"
+						src=${String(obj[imageKey])}
+						alt=${titleKey ? String(obj[titleKey]) : "illustration"}
+						loading="lazy"
+					/>` : nothing}
+			${titleKey ? html`<h3 class="roxy-title">${obj[titleKey]}</h3>` : nothing}
+			${summaryKey ? html`<p class="roxy-summary">${obj[summaryKey]}</p>` : nothing}
+			${rows.length > 0 ? html`<dl class="roxy-rows">
+						${rows.map(
+      ([k, v]) => html`
+								<dt>${this.humanize(k)}</dt>
+								<dd>${this.renderField(v)}</dd>
+							`
+    )}
+					</dl>` : nothing}
+		`;
+  }
+  renderField(value) {
+    if (value === null || value === void 0) return "";
+    if (typeof value === "string") return value;
+    if (typeof value === "number" || typeof value === "boolean")
+      return String(value);
+    if (Array.isArray(value)) {
+      const allPrimitive = value.every(
+        (v) => ["string", "number", "boolean"].includes(typeof v)
+      );
+      if (allPrimitive) {
+        return html`<ul class="roxy-chips">
+					${value.map((v) => html`<li>${String(v)}</li>`)}
+				</ul>`;
+      }
+    }
+    return html`<roxy-data .data=${value}></roxy-data>`;
+  }
+  formatPrimitive(value) {
+    if (value === null || value === void 0) return "";
+    if (typeof value === "string") return value;
+    if (typeof value === "number" || typeof value === "boolean")
+      return String(value);
+    if (Array.isArray(value)) return value.map(String).join(", ");
+    return JSON.stringify(value);
+  }
+  collectKeys(rows) {
+    const seen = /* @__PURE__ */ new Set();
+    for (const row of rows) {
+      for (const k of Object.keys(row)) seen.add(k);
+    }
+    return Array.from(seen);
+  }
+  humanize(key) {
+    return key.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^\w/, (c) => c.toUpperCase());
+  }
+};
+RoxyData.styles = [
+  baseStyles,
+  css2`
+			.roxy-card {
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+
+			.roxy-title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0 0 var(--roxy-space-sm, 0.5rem) 0;
+				color: var(--roxy-primary, #0f172a);
+				letter-spacing: var(--roxy-tracking-tight);
+			}
+
+			.roxy-summary {
+				color: var(--roxy-secondary, #475569);
+				margin: 0 0 var(--roxy-space-md, 1rem) 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			dl.roxy-rows {
+				margin: 0;
+				display: grid;
+				grid-template-columns: minmax(8ch, max-content) 1fr;
+				gap: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+			}
+			dl.roxy-rows dt {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				text-transform: capitalize;
+			}
+			dl.roxy-rows dd {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				word-break: break-word;
+			}
+
+			ul.roxy-chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				padding: 0;
+				margin: 0;
+				list-style: none;
+			}
+			ul.roxy-chips li {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+
+			table.roxy-table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			table.roxy-table th,
+			table.roxy-table td {
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				padding: var(--roxy-space-sm, 0.5rem);
+				text-align: left;
+				text-transform: none;
+			}
+			table.roxy-table th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: capitalize;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.04em;
+			}
+
+			.roxy-image {
+				max-width: 100%;
+				height: auto;
+				border-radius: var(--roxy-radius-md, 8px);
+				margin-bottom: var(--roxy-space-md, 1rem);
+			}
+
+			.roxy-section {
+				margin-bottom: var(--roxy-space-md, 1rem);
+			}
+			.roxy-section h4 {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-secondary, #475569);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
+				text-transform: capitalize;
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyData.prototype, "data", 2);
+RoxyData = __decorateClass([
+  customElement("roxy-data")
+], RoxyData);
+export {
+  RoxyData
+};
+//# sourceMappingURL=data.js.map

package/dist/components/data.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/data.ts", "../../src/utils/base-styles.ts"],
+  "sourcesContent": ["import { css, html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\n/**\n * Generic fallback renderer. Accepts ANY OpenAPI response shape and renders it\n * via field-name heuristics so future spec additions render reasonably without\n * hand-wired components. Mirrors the WordPress GenericRenderer pattern.\n *\n * Heuristic order:\n *   1. Primitive (string, number, boolean) -> single line.\n *   2. Array of primitives -> chip list.\n *   3. Array of objects with shared keys -> table.\n *   4. Object with title-like field -> card with key/value rows.\n *   5. Otherwise -> definition list of all keys.\n *\n * Future spec hint: when the server emits `x-roxy-ui` on a schema, the\n * dispatcher in tool-call (Phase 2.5) will select a hand-tuned component\n * instead of this fallback.\n */\n\ntype Json = string | number | boolean | null | Json[] | { [key: string]: Json };\n\nconst TITLE_KEYS = ['title', 'name', 'label', 'heading', 'overview', 'summary'];\nconst IMAGE_KEYS = ['imageUrl', 'image', 'icon', 'symbol'];\nconst SKIP_KEYS = ['imageUrl', 'image']; // rendered separately, not in body rows\n\n@customElement('roxy-data')\nexport class RoxyData extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.roxy-card {\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-md, 1rem);\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\n\t\t\t}\n\n\t\t\t.roxy-title {\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tmargin: 0 0 var(--roxy-space-sm, 0.5rem) 0;\n\t\t\t\tcolor: var(--roxy-primary, #0f172a);\n\t\t\t\tletter-spacing: var(--roxy-tracking-tight);\n\t\t\t}\n\n\t\t\t.roxy-summary {\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t\tmargin: 0 0 var(--roxy-space-md, 1rem) 0;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\n\t\t\tdl.roxy-rows {\n\t\t\t\tmargin: 0;\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: minmax(8ch, max-content) 1fr;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\tdl.roxy-rows dt {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t\tdl.roxy-rows dd {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tword-break: break-word;\n\t\t\t}\n\n\t\t\tul.roxy-chips {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin: 0;\n\t\t\t\tlist-style: none;\n\t\t\t}\n\t\t\tul.roxy-chips li {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tpadding: 2px 8px;\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t}\n\n\t\t\ttable.roxy-table {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-collapse: collapse;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\ttable.roxy-table th,\n\t\t\ttable.roxy-table td {\n\t\t\t\tborder-bottom: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\ttext-align: left;\n\t\t\t\ttext-transform: none;\n\t\t\t}\n\t\t\ttable.roxy-table th {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tletter-spacing: 0.04em;\n\t\t\t}\n\n\t\t\t.roxy-image {\n\t\t\t\tmax-width: 100%;\n\t\t\t\theight: auto;\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tmargin-bottom: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.roxy-section {\n\t\t\t\tmargin-bottom: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\t.roxy-section h4 {\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t\tmargin: 0 0 var(--roxy-space-xs, 0.25rem) 0;\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: Json = null;\n\n\trender() {\n\t\tif (this.data == null) {\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No data</div>`;\n\t\t}\n\t\treturn html`<div\n\t\t\tclass=\"roxy-card\"\n\t\t\taria-label=\"Generic data display\"\n\t\t>\n\t\t\t${this.renderValue(this.data)}\n\t\t</div>`;\n\t}\n\n\tprivate renderValue(value: Json): TemplateResult | typeof nothing {\n\t\tif (value === null || value === undefined) return nothing;\n\t\tif (typeof value === 'string') return html`<p>${value}</p>`;\n\t\tif (typeof value === 'number' || typeof value === 'boolean') {\n\t\t\treturn html`<p>${String(value)}</p>`;\n\t\t}\n\t\tif (Array.isArray(value)) return this.renderArray(value);\n\t\treturn this.renderObject(value as Record<string, Json>);\n\t}\n\n\tprivate renderArray(arr: Json[]): TemplateResult {\n\t\tif (arr.length === 0) {\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">Empty list</div>`;\n\t\t}\n\t\tconst allPrimitive = arr.every(\n\t\t\t(v) => v === null || ['string', 'number', 'boolean'].includes(typeof v),\n\t\t);\n\t\tif (allPrimitive) {\n\t\t\treturn html`<ul class=\"roxy-chips\">\n\t\t\t\t${arr.map((v) => html`<li>${String(v)}</li>`)}\n\t\t\t</ul>`;\n\t\t}\n\t\tconst allObjects = arr.every(\n\t\t\t(v) => v !== null && typeof v === 'object' && !Array.isArray(v),\n\t\t);\n\t\tif (allObjects) return this.renderTable(arr as Record<string, Json>[]);\n\t\treturn html`<ol>\n\t\t\t${arr.map((v) => html`<li>${this.renderValue(v)}</li>`)}\n\t\t</ol>`;\n\t}\n\n\tprivate renderTable(rows: Record<string, Json>[]): TemplateResult {\n\t\tconst keys = this.collectKeys(rows);\n\t\treturn html`<table class=\"roxy-table\" role=\"table\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t${keys.map((k) => html`<th>${this.humanize(k)}</th>`)}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t${rows.map(\n\t\t\t\t\t(row) => html`<tr>\n\t\t\t\t\t\t${keys.map((k) => html`<td>${this.formatPrimitive(row[k])}</td>`)}\n\t\t\t\t\t</tr>`,\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>`;\n\t}\n\n\tprivate renderObject(obj: Record<string, Json>): TemplateResult {\n\t\tconst titleKey = TITLE_KEYS.find((k) => typeof obj[k] === 'string');\n\t\tconst imageKey = IMAGE_KEYS.find(\n\t\t\t(k) =>\n\t\t\t\ttypeof obj[k] === 'string' && (obj[k] as string).startsWith('http'),\n\t\t);\n\t\tconst summaryKey =\n\t\t\ttitleKey !== 'summary' && typeof obj.summary === 'string'\n\t\t\t\t? 'summary'\n\t\t\t\t: null;\n\t\tconst rows = Object.entries(obj).filter(\n\t\t\t([k, v]) =>\n\t\t\t\tk !== titleKey &&\n\t\t\t\tk !== summaryKey &&\n\t\t\t\t!SKIP_KEYS.includes(k) &&\n\t\t\t\tv !== null &&\n\t\t\t\tv !== undefined,\n\t\t);\n\n\t\treturn html`\n\t\t\t${\n\t\t\t\timageKey\n\t\t\t\t\t? html`<img\n\t\t\t\t\t\tclass=\"roxy-image\"\n\t\t\t\t\t\tsrc=${String(obj[imageKey])}\n\t\t\t\t\t\talt=${titleKey ? String(obj[titleKey]) : 'illustration'}\n\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t/>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${titleKey ? html`<h3 class=\"roxy-title\">${obj[titleKey]}</h3>` : nothing}\n\t\t\t${summaryKey ? html`<p class=\"roxy-summary\">${obj[summaryKey]}</p>` : nothing}\n\t\t\t${\n\t\t\t\trows.length > 0\n\t\t\t\t\t? html`<dl class=\"roxy-rows\">\n\t\t\t\t\t\t${rows.map(\n\t\t\t\t\t\t\t([k, v]) => html`\n\t\t\t\t\t\t\t\t<dt>${this.humanize(k)}</dt>\n\t\t\t\t\t\t\t\t<dd>${this.renderField(v)}</dd>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</dl>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t`;\n\t}\n\n\tprivate renderField(value: Json): TemplateResult | string {\n\t\tif (value === null || value === undefined) return '';\n\t\tif (typeof value === 'string') return value;\n\t\tif (typeof value === 'number' || typeof value === 'boolean')\n\t\t\treturn String(value);\n\t\tif (Array.isArray(value)) {\n\t\t\tconst allPrimitive = value.every((v) =>\n\t\t\t\t['string', 'number', 'boolean'].includes(typeof v),\n\t\t\t);\n\t\t\tif (allPrimitive) {\n\t\t\t\treturn html`<ul class=\"roxy-chips\">\n\t\t\t\t\t${value.map((v) => html`<li>${String(v)}</li>`)}\n\t\t\t\t</ul>`;\n\t\t\t}\n\t\t}\n\t\treturn html`<roxy-data .data=${value}></roxy-data>`;\n\t}\n\n\tprivate formatPrimitive(value: Json | undefined): string {\n\t\tif (value === null || value === undefined) return '';\n\t\tif (typeof value === 'string') return value;\n\t\tif (typeof value === 'number' || typeof value === 'boolean')\n\t\t\treturn String(value);\n\t\tif (Array.isArray(value)) return value.map(String).join(', ');\n\t\treturn JSON.stringify(value);\n\t}\n\n\tprivate collectKeys(rows: Record<string, Json>[]): string[] {\n\t\tconst seen = new Set<string>();\n\t\tfor (const row of rows) {\n\t\t\tfor (const k of Object.keys(row)) seen.add(k);\n\t\t}\n\t\treturn Array.from(seen);\n\t}\n\n\tprivate humanize(key: string): string {\n\t\treturn key\n\t\t\t.replace(/[_-]+/g, ' ')\n\t\t\t.replace(/([a-z])([A-Z])/g, '$1 $2')\n\t\t\t.replace(/^\\w/, (c) => c.toUpperCase());\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-data': RoxyData;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n"],
+  "mappings": "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",
+  "names": ["css", "css"]
+}

package/dist/components/dosha-card.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+interface DoshaData {
+    present?: boolean;
+    severity?: 'Mild' | 'Moderate' | 'Severe' | string;
+    type?: string;
+    description?: string;
+    remedies?: string[];
+    exceptions?: string[];
+    effects?: string | {
+        marriage?: string;
+        personality?: string;
+        timing?: string;
+        relationships?: string;
+        general?: string;
+        phases?: Record<string, string>;
+    };
+}
+/**
+ * Dosha presence card. Renders /vedic-astrology/dosha/{manglik,kalsarpa,sadhesati}.
+ * Visual severity indicator + remedies + scoped effects.
+ */
+export declare class RoxyDoshaCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: DoshaData | null;
+    type: 'manglik' | 'kalsarpa' | 'sadhesati' | string;
+    render(): import("lit").TemplateResult<1>;
+    private renderEffects;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'roxy-dosha-card': RoxyDoshaCard;
+    }
+}
+export {};
+//# sourceMappingURL=dosha-card.d.ts.map

package/dist/components/dosha-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dosha-card.d.ts","sourceRoot":"","sources":["../../src/components/dosha-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,UAAU,SAAS;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EACL,MAAM,GACN;QACA,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC/B,CAAC;CACL;AAQD;;;GAGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BA4FX;IAGF,IAAI,EAAE,SAAS,GAAG,IAAI,CAAQ;IAG9B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CAAa;IAEhE,MAAM;IAyDN,OAAO,CAAC,aAAa;CAgBrB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}