@stratum-hq/react 0.1.0 → 0.2.1

package/dist/components/AuditLogViewer.d.ts

@@ -0,0 +1,6 @@
+export interface AuditLogViewerProps {
+    limit?: number;
+    className?: string;
+}
+export declare function AuditLogViewer({ limit, className }: AuditLogViewerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuditLogViewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuditLogViewer.d.ts","sourceRoot":"","sources":["../../src/components/AuditLogViewer.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,wBAAgB,cAAc,CAAC,EAAE,KAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAyD5E"}

package/dist/components/AuditLogViewer.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuditLogs } from "../hooks/use-audit-logs.js";
+import { TableSkeleton } from "./TableSkeleton.js";
+const ACTION_VARIANTS = {
+    "tenant.created": "stratum-badge--own",
+    "tenant.updated": "stratum-badge--inherited",
+    "tenant.deleted": "stratum-badge--locked",
+    "tenant.moved": "stratum-badge--inherited",
+    "tenant.reordered": "stratum-badge--inherited",
+    "config.updated": "stratum-badge--inherited",
+    "config.deleted": "stratum-badge--locked",
+    "permission.created": "stratum-badge--own",
+    "permission.deleted": "stratum-badge--locked",
+};
+function formatTime(iso) {
+    try {
+        const d = new Date(iso);
+        const now = Date.now();
+        const diff = now - d.getTime();
+        if (diff < 60_000)
+            return "just now";
+        if (diff < 3_600_000)
+            return `${Math.floor(diff / 60_000)}m ago`;
+        if (diff < 86_400_000)
+            return `${Math.floor(diff / 3_600_000)}h ago`;
+        return d.toLocaleDateString();
+    }
+    catch {
+        return iso;
+    }
+}
+export function AuditLogViewer({ limit = 20, className }) {
+    const { entries, loading, error } = useAuditLogs(limit);
+    if (loading) {
+        return (_jsx("div", { className: `stratum-audit-viewer ${className || ""}`, children: _jsx(TableSkeleton, { rows: 5, columns: 4 }) }));
+    }
+    if (error) {
+        return _jsxs("div", { className: className, children: ["Failed to load audit logs: ", error.message] });
+    }
+    return (_jsx("div", { className: `stratum-audit-viewer ${className || ""}`, children: _jsxs("table", { className: "stratum-audit-viewer__table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Action" }), _jsx("th", { children: "Resource" }), _jsx("th", { children: "Actor" }), _jsx("th", { children: "Time" })] }) }), _jsxs("tbody", { children: [entries.map((entry) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("span", { className: `stratum-badge ${ACTION_VARIANTS[entry.action] || ""}`, children: entry.action }) }), _jsx("td", { children: entry.resource_type && (_jsxs("span", { children: [entry.resource_type, entry.resource_id && _jsxs("code", { children: [" ", entry.resource_id.slice(0, 8), "..."] })] })) }), _jsx("td", { children: entry.actor || "system" }), _jsx("td", { children: formatTime(entry.created_at) })] }, entry.id))), entries.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: 4, style: { textAlign: "center", padding: "16px" }, children: "No audit entries yet. Actions will appear here as you use the platform." }) }))] })] }) }));
+}
+//# sourceMappingURL=AuditLogViewer.js.map

package/dist/components/AuditLogViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuditLogViewer.js","sourceRoot":"","sources":["../../src/components/AuditLogViewer.tsx"],"names":[],"mappings":"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"}

package/dist/components/ConfigInheritanceVisualizer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ConfigInheritanceVisualizer — shows how config values cascade from
+ * parent to children with real-time visual feedback.
+ *
+ * ┌─────────────────────────┐     ┌─────────────────────────┐
+ * │  Parent: AcmeSec        │     │  Child: NorthStar MSP    │
+ * │ ─────────────────────── │ ──▶ │ ─────────────────────── │
+ * │  max_users     1000     │     │  max_users     500  own │
+ * │  api_rate      10000 🔒 │     │  api_rate      10000 ↑  │
+ * │  brand_color   #2563EB  │     │  brand_color   #1E40AF  │
+ * └─────────────────────────┘     └─────────────────────────┘
+ */
+export interface ConfigInheritanceVisualizerProps {
+    className?: string;
+}
+export declare function ConfigInheritanceVisualizer({ className }: ConfigInheritanceVisualizerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ConfigInheritanceVisualizer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigInheritanceVisualizer.d.ts","sourceRoot":"","sources":["../../src/components/ConfigInheritanceVisualizer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAOH,MAAM,WAAW,gCAAgC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2ED,wBAAgB,2BAA2B,CAAC,EAAE,SAAS,EAAE,EAAE,gCAAgC,kDA6H1F"}

package/dist/components/ConfigInheritanceVisualizer.js

@@ -0,0 +1,353 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ConfigInheritanceVisualizer — shows how config values cascade from
+ * parent to children with real-time visual feedback.
+ *
+ * ┌─────────────────────────┐     ┌─────────────────────────┐
+ * │  Parent: AcmeSec        │     │  Child: NorthStar MSP    │
+ * │ ─────────────────────── │ ──▶ │ ─────────────────────── │
+ * │  max_users     1000     │     │  max_users     500  own │
+ * │  api_rate      10000 🔒 │     │  api_rate      10000 ↑  │
+ * │  brand_color   #2563EB  │     │  brand_color   #1E40AF  │
+ * └─────────────────────────┘     └─────────────────────────┘
+ */
+import { useState } from "react";
+import { useConfigCascade } from "../hooks/use-config-cascade.js";
+import { TableSkeleton } from "./TableSkeleton.js";
+function Badge({ type }) {
+    const styles = {
+        inherited: { label: "Inherited", icon: "\u2191", className: "stratum-cascade-badge--inherited" },
+        locked: { label: "Locked", icon: "\u2193", className: "stratum-cascade-badge--locked" },
+        own: { label: "Own", icon: "\u2022", className: "stratum-cascade-badge--own" },
+    };
+    const s = styles[type];
+    return (_jsxs("span", { className: `stratum-cascade-badge ${s.className}`, children: [s.icon, " ", s.label] }));
+}
+function getBadgeType(entry) {
+    if (entry.locked)
+        return "locked";
+    if (entry.inherited)
+        return "inherited";
+    return "own";
+}
+function ConfigTable({ entries, title, subtitle, highlightKey, }) {
+    return (_jsxs("div", { className: "stratum-cascade-panel", children: [_jsxs("div", { className: "stratum-cascade-panel__header", children: [_jsx("span", { className: "stratum-cascade-panel__title", children: title }), subtitle && _jsx("span", { className: "stratum-cascade-panel__subtitle", children: subtitle })] }), _jsxs("table", { className: "stratum-cascade-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Key" }), _jsx("th", { children: "Value" }), _jsx("th", { children: "Status" })] }) }), _jsxs("tbody", { children: [entries.map((entry) => (_jsxs("tr", { className: highlightKey === entry.key ? "stratum-cascade-row--highlight" : "", children: [_jsx("td", { className: "stratum-cascade-key", children: entry.key }), _jsx("td", { className: "stratum-cascade-value", children: _jsx("code", { children: JSON.stringify(entry.value) }) }), _jsx("td", { children: _jsx(Badge, { type: getBadgeType(entry) }) })] }, entry.key))), entries.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: 3, className: "stratum-cascade-empty", children: "No config values" }) }))] })] })] }));
+}
+export function ConfigInheritanceVisualizer({ className }) {
+    const { data, loading, error, refresh } = useConfigCascade();
+    const [selectedChild, setSelectedChild] = useState(0);
+    const [highlightKey, setHighlightKey] = useState(null);
+    if (loading) {
+        return (_jsx("div", { className: `stratum-cascade ${className || ""}`, children: _jsx(TableSkeleton, { rows: 4, columns: 3 }) }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: `stratum-cascade stratum-cascade--error ${className || ""}`, children: [_jsxs("p", { children: ["Failed to load inheritance data: ", error.message] }), _jsx("button", { type: "button", onClick: refresh, className: "stratum-cascade-retry", children: "Retry" })] }));
+    }
+    if (!data)
+        return null;
+    const activeChild = data.children[selectedChild];
+    return (_jsxs("div", { className: `stratum-cascade ${className || ""}`, children: [_jsx("style", { children: cascadeStyles }), data.children.length > 1 && (_jsx("div", { className: "stratum-cascade-tabs", role: "tablist", children: data.children.map((child, i) => (_jsx("button", { role: "tab", "aria-selected": i === selectedChild, className: `stratum-cascade-tab${i === selectedChild ? " active" : ""}`, onClick: () => { setSelectedChild(i); setHighlightKey(null); }, children: child.name }, child.id))) })), _jsxs("div", { className: "stratum-cascade-split", children: [_jsx(ConfigTable, { entries: data.parent.config, title: data.parent.name, subtitle: "Parent", highlightKey: highlightKey }), _jsxs("div", { className: "stratum-cascade-arrow", "aria-hidden": "true", children: [_jsx("div", { className: "stratum-cascade-arrow__line" }), _jsx("div", { className: "stratum-cascade-arrow__head", children: "\u25B6" })] }), activeChild ? (_jsx(ConfigTable, { entries: activeChild.config, title: activeChild.name, subtitle: "Child", highlightKey: highlightKey })) : (_jsxs("div", { className: "stratum-cascade-panel stratum-cascade-panel--empty", children: [_jsx("div", { className: "stratum-cascade-panel__header", children: _jsx("span", { className: "stratum-cascade-panel__title", children: "No children" }) }), _jsx("p", { className: "stratum-cascade-empty-message", children: "This tenant has no child tenants. Create a child tenant to see config inheritance in action." })] }))] }), activeChild && (_jsxs("div", { className: "stratum-cascade-diff", children: [_jsx("span", { className: "stratum-cascade-diff__label", children: "Inheritance summary:" }), (() => {
+                        const inherited = activeChild.config.filter((e) => e.inherited && !e.locked).length;
+                        const locked = activeChild.config.filter((e) => e.locked).length;
+                        const own = activeChild.config.filter((e) => !e.inherited && !e.locked).length;
+                        return (_jsxs(_Fragment, { children: [inherited > 0 && (_jsxs("span", { className: "stratum-cascade-diff__stat stratum-cascade-diff__stat--inherited", onMouseEnter: () => {
+                                        const firstInherited = activeChild.config.find((e) => e.inherited && !e.locked);
+                                        if (firstInherited)
+                                            setHighlightKey(firstInherited.key);
+                                    }, onMouseLeave: () => setHighlightKey(null), children: [inherited, " inherited"] })), locked > 0 && (_jsxs("span", { className: "stratum-cascade-diff__stat stratum-cascade-diff__stat--locked", children: [locked, " locked"] })), own > 0 && (_jsxs("span", { className: "stratum-cascade-diff__stat stratum-cascade-diff__stat--own", children: [own, " overridden"] }))] }));
+                    })()] }))] }));
+}
+// ── Scoped styles ─────────────────────────────────────────────
+const cascadeStyles = `
+.stratum-cascade {
+  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
+}
+
+.stratum-cascade--error {
+  padding: var(--space-xl, 24px);
+  color: var(--color-error, #DC2626);
+  font-size: 0.875rem;
+}
+
+.stratum-cascade-retry {
+  margin-top: var(--space-sm, 8px);
+  padding: var(--space-xs, 4px) var(--space-md, 12px);
+  border: 1px solid var(--border, #E2E8F0);
+  border-radius: var(--radius-sm, 4px);
+  background: var(--bg-card, white);
+  color: var(--text-secondary, #475569);
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+
+/* Child selector tabs */
+.stratum-cascade-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border, #E2E8F0);
+  margin-bottom: var(--space-lg, 16px);
+  overflow-x: auto;
+}
+
+.stratum-cascade-tab {
+  padding: var(--space-sm, 8px) var(--space-lg, 16px);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-tertiary, #64748B);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
+  white-space: nowrap;
+}
+
+.stratum-cascade-tab:hover {
+  color: var(--text-primary, #0F172A);
+}
+
+.stratum-cascade-tab.active {
+  color: var(--color-accent, #0D9488);
+  border-bottom-color: var(--color-accent, #0D9488);
+}
+
+/* Split-screen layout */
+.stratum-cascade-split {
+  display: flex;
+  gap: var(--space-md, 12px);
+  align-items: flex-start;
+}
+
+/* Cascade arrow */
+.stratum-cascade-arrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3xl, 48px) 0;
+  flex-shrink: 0;
+  color: var(--color-accent, #0D9488);
+  opacity: 0.6;
+}
+
+.stratum-cascade-arrow__line {
+  width: 2px;
+  height: 24px;
+  background: var(--color-accent, #0D9488);
+  opacity: 0.4;
+}
+
+.stratum-cascade-arrow__head {
+  font-size: 0.75rem;
+  transform: rotate(0deg);
+}
+
+/* Panel (each side of the split) */
+.stratum-cascade-panel {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--border, #E2E8F0);
+  border-radius: var(--radius-md, 6px);
+  overflow: hidden;
+}
+
+.stratum-cascade-panel--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.stratum-cascade-panel__header {
+  padding: var(--space-sm, 8px) var(--space-md, 12px);
+  border-bottom: 1px solid var(--border, #E2E8F0);
+  background: var(--bg-card, white);
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-sm, 8px);
+}
+
+.stratum-cascade-panel__title {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-primary, #0F172A);
+  font-family: var(--font-display, 'Satoshi', sans-serif);
+}
+
+.stratum-cascade-panel__subtitle {
+  font-size: 0.6875rem;
+  color: var(--text-tertiary, #64748B);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.stratum-cascade-empty-message {
+  padding: var(--space-xl, 24px);
+  text-align: center;
+  color: var(--text-tertiary, #64748B);
+  font-size: 0.8125rem;
+}
+
+/* Config table within panel */
+.stratum-cascade-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.75rem;
+}
+
+.stratum-cascade-table th {
+  padding: var(--space-xs, 4px) var(--space-md, 12px);
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary, #64748B);
+  border-bottom: 1px solid var(--border, #E2E8F0);
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+}
+
+.stratum-cascade-table td {
+  padding: var(--space-xs, 4px) var(--space-md, 12px);
+  border-bottom: 1px solid var(--border, #E2E8F0);
+  color: var(--text-primary, #0F172A);
+}
+
+.stratum-cascade-key {
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  font-weight: 500;
+}
+
+.stratum-cascade-value code {
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  font-size: 0.6875rem;
+  color: var(--text-secondary, #475569);
+}
+
+.stratum-cascade-empty {
+  text-align: center;
+  color: var(--text-tertiary, #64748B);
+  padding: var(--space-lg, 16px) !important;
+  font-style: italic;
+}
+
+/* Highlight row on hover from diff summary */
+.stratum-cascade-row--highlight {
+  background: rgba(13, 148, 136, 0.08);
+}
+
+/* Badges */
+.stratum-cascade-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 0.625rem;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  white-space: nowrap;
+}
+
+.stratum-cascade-badge--inherited {
+  color: var(--color-accent, #0D9488);
+  background: var(--color-accent-light, #CCFBF1);
+}
+
+.stratum-cascade-badge--locked {
+  color: var(--color-warning, #D97706);
+  background: var(--color-warning-bg, #FEF3C7);
+}
+
+.stratum-cascade-badge--own {
+  color: var(--text-secondary, #475569);
+  background: var(--bg-input, var(--color-100, #F1F5F9));
+  border: 1px solid var(--border, #E2E8F0);
+}
+
+/* Dark mode overrides */
+[data-theme="dark"] .stratum-cascade-badge--inherited {
+  background: rgba(13, 148, 136, 0.15);
+}
+
+[data-theme="dark"] .stratum-cascade-badge--locked {
+  background: rgba(217, 119, 6, 0.15);
+}
+
+/* Diff summary bar */
+.stratum-cascade-diff {
+  margin-top: var(--space-md, 12px);
+  padding: var(--space-sm, 8px) var(--space-md, 12px);
+  border: 1px solid var(--border, #E2E8F0);
+  border-radius: var(--radius-sm, 4px);
+  display: flex;
+  align-items: center;
+  gap: var(--space-md, 12px);
+  font-size: 0.75rem;
+  background: var(--bg-card, white);
+}
+
+.stratum-cascade-diff__label {
+  color: var(--text-tertiary, #64748B);
+  font-weight: 500;
+}
+
+.stratum-cascade-diff__stat {
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-weight: 600;
+  font-size: 0.6875rem;
+  cursor: default;
+}
+
+.stratum-cascade-diff__stat--inherited {
+  color: var(--color-accent, #0D9488);
+  background: var(--color-accent-light, #CCFBF1);
+}
+
+.stratum-cascade-diff__stat--locked {
+  color: var(--color-warning, #D97706);
+  background: var(--color-warning-bg, #FEF3C7);
+}
+
+.stratum-cascade-diff__stat--own {
+  color: var(--text-secondary, #475569);
+  background: var(--bg-input, var(--color-100, #F1F5F9));
+}
+
+[data-theme="dark"] .stratum-cascade-diff__stat--inherited {
+  background: rgba(13, 148, 136, 0.15);
+}
+
+[data-theme="dark"] .stratum-cascade-diff__stat--locked {
+  background: rgba(217, 119, 6, 0.15);
+}
+
+/* Responsive: stack on narrow screens */
+@media (max-width: 768px) {
+  .stratum-cascade-split {
+    flex-direction: column;
+  }
+
+  .stratum-cascade-arrow {
+    flex-direction: row;
+    padding: 0 var(--space-xl, 24px);
+  }
+
+  .stratum-cascade-arrow__line {
+    width: 24px;
+    height: 2px;
+  }
+
+  .stratum-cascade-arrow__head {
+    transform: rotate(90deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stratum-cascade-row--highlight {
+    transition: none;
+  }
+}
+`;
+//# sourceMappingURL=ConfigInheritanceVisualizer.js.map

package/dist/components/ConfigInheritanceVisualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigInheritanceVisualizer.js","sourceRoot":"","sources":["../../src/components/ConfigInheritanceVisualizer.tsx"],"names":[],"mappings":"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"}

package/dist/components/DraggableTenantTree.d.ts

@@ -0,0 +1,31 @@
+/**
+ * DraggableTenantTree — TenantTree with drag-and-drop support.
+ *
+ * Supports two operations:
+ * - **Reparenting**: drag a tenant onto a different parent → calls moveTenant API
+ * - **Sibling reordering**: drag a tenant above/below a sibling → calls reorderTenant API
+ *
+ * Uses a dedicated drag handle (⠿) so clicking the node still selects it
+ * and clicking the expand/collapse arrow still works.
+ *
+ * ┌──────────────────────────────────┐
+ * │  ⠿ AcmeSec                      │
+ * │  ⠿ ├── NorthStar MSP            │
+ * │  ⠿ │   ├── Client Alpha  ← drag │
+ * │  ⠿ │   └── Client Beta          │
+ * │  ⠿ └── SouthShield MSP  ← drop  │
+ * │  ⠿     └── Client Gamma         │
+ * └──────────────────────────────────┘
+ */
+export interface DraggableTenantTreeProps {
+    rootId?: string;
+    onSelect?: (tenantId: string) => void;
+    onMove?: (tenantId: string, newParentId: string) => void;
+    onReorder?: (tenantId: string, position: number) => void;
+    onEdit?: (tenantId: string, currentName: string) => void;
+    onArchive?: (tenantId: string, name: string) => void;
+    onAddChild?: (parentId: string) => void;
+    className?: string;
+}
+export declare function DraggableTenantTree({ rootId, onSelect, onMove, onReorder, onEdit, onArchive, onAddChild, className, }: DraggableTenantTreeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DraggableTenantTree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableTenantTree.d.ts","sourceRoot":"","sources":["../../src/components/DraggableTenantTree.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAkBH,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsJD,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,wBAAwB,2CAyI1B"}