@powerhousedao/service-offering 0.0.1

package/dist/editors/resource-instance-editor/editor.js

@@ -0,0 +1,1234 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { generateId } from "document-model/core";
+import { DocumentToolbar } from "@powerhousedao/design-system/connect";
+import { useSelectedResourceInstanceDocument } from "../../document-models/resource-instance/hooks.js";
+import { initializeInstance, updateInstanceInfo, updateInstanceStatus, confirmInstance, reportProvisioningStarted, reportProvisioningCompleted, reportProvisioningFailed, activateInstance, suspendForNonPayment, suspendForMaintenance, suspendInstance, resumeAfterPayment, resumeAfterMaintenance, terminateInstance, } from "../../document-models/resource-instance/gen/instance-management/creators.js";
+import { setInstanceFacet, removeInstanceFacet, updateInstanceFacet, } from "../../document-models/resource-instance/gen/configuration-management/creators.js";
+export default function ResourceInstanceEditor() {
+    const [document, dispatch] = useSelectedResourceInstanceDocument();
+    const [mode, setMode] = useState("client");
+    const handleImportData = useCallback(() => {
+        // Initialize instance with sample data
+        dispatch(initializeInstance({
+            profileId: "phd:sample-profile-123",
+            profileDocumentType: "powerhouse/resource-profile",
+            name: "Sample Resource Instance",
+            description: "A sample resource instance populated with demo data for testing purposes.",
+            customerId: "phd:customer-456",
+            resourceTemplateId: "phd:template-789",
+            thumbnailUrl: "https://via.placeholder.com/150",
+            infoLink: "https://example.com/resource-info",
+        }));
+        // Add sample configuration facets
+        dispatch(setInstanceFacet({
+            id: generateId(),
+            categoryKey: "region",
+            categoryLabel: "Region",
+            selectedOption: "us-east-1",
+        }));
+        dispatch(setInstanceFacet({
+            id: generateId(),
+            categoryKey: "tier",
+            categoryLabel: "Service Tier",
+            selectedOption: "premium",
+        }));
+        dispatch(setInstanceFacet({
+            id: generateId(),
+            categoryKey: "storage",
+            categoryLabel: "Storage Size",
+            selectedOption: "100GB",
+        }));
+        dispatch(setInstanceFacet({
+            id: generateId(),
+            categoryKey: "backup",
+            categoryLabel: "Backup Frequency",
+            selectedOption: "daily",
+        }));
+    }, [dispatch]);
+    return (_jsxs("div", { className: "ri-editor", "data-mode": mode, children: [_jsx("style", { children: editorStyles }), _jsx(DocumentToolbar, {}), _jsxs("div", { className: "ri-editor__container", children: [_jsxs("div", { className: "ri-editor__header", children: [mode === "operator" && (_jsxs("button", { type: "button", className: "ri-btn ri-btn--primary", onClick: handleImportData, children: [_jsx("svg", { className: "ri-btn__icon", viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16", children: _jsx("path", { fillRule: "evenodd", d: "M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z", clipRule: "evenodd" }) }), "Import Data"] })), _jsx(ModeToggle, { mode: mode, onModeChange: setMode })] }), _jsx(InstanceHeader, { document: document, dispatch: dispatch, mode: mode }), _jsxs("div", { className: "ri-editor__grid", children: [_jsxs("div", { className: "ri-editor__main", children: [_jsx(ConfigurationPanel, { document: document, dispatch: dispatch, mode: mode }), mode === "operator" && (_jsx(LifecycleActionsPanel, { document: document, dispatch: dispatch }))] }), _jsxs("div", { className: "ri-editor__sidebar", children: [_jsx(ProfileReferencePanel, { document: document, mode: mode }), document.state.global.status === "SUSPENDED" && (_jsx(SuspensionDetailsPanel, { document: document })), _jsx(LifecycleTimeline, { document: document })] })] })] })] }));
+}
+function ModeToggle({ mode, onModeChange }) {
+    return (_jsxs("div", { className: "ri-mode-toggle", children: [_jsxs("button", { type: "button", className: `ri-mode-toggle__btn ${mode === "client" ? "ri-mode-toggle__btn--active" : ""}`, onClick: () => onModeChange("client"), children: [_jsx("svg", { className: "ri-mode-toggle__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), "Client"] }), _jsxs("button", { type: "button", className: `ri-mode-toggle__btn ${mode === "operator" ? "ri-mode-toggle__btn--active" : ""}`, onClick: () => onModeChange("operator"), children: [_jsxs("svg", { className: "ri-mode-toggle__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }), "Operator"] })] }));
+}
+// ============================================================
+// Status Badge Component
+// ============================================================
+const STATUS_CONFIG = {
+    DRAFT: { label: "Draft", className: "ri-badge--slate" },
+    PROVISIONING: { label: "Provisioning", className: "ri-badge--sky" },
+    ACTIVE: { label: "Active", className: "ri-badge--emerald" },
+    SUSPENDED: { label: "Suspended", className: "ri-badge--amber" },
+    TERMINATED: { label: "Terminated", className: "ri-badge--rose" },
+};
+const ALL_STATUSES = [
+    "DRAFT",
+    "PROVISIONING",
+    "ACTIVE",
+    "SUSPENDED",
+    "TERMINATED",
+];
+function StatusBadge({ status }) {
+    const config = STATUS_CONFIG[status];
+    return _jsx("span", { className: `ri-badge ${config.className}`, children: config.label });
+}
+function StatusSelector({ status, dispatch, mode }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleStatusChange = useCallback((newStatus) => {
+        if (newStatus !== status) {
+            dispatch(updateInstanceStatus({ status: newStatus }));
+        }
+        setIsOpen(false);
+    }, [dispatch, status]);
+    if (mode !== "operator") {
+        return _jsx(StatusBadge, { status: status });
+    }
+    return (_jsxs("div", { className: "ri-status-selector", children: [_jsxs("button", { type: "button", className: `ri-badge ${STATUS_CONFIG[status].className} ri-badge--clickable`, onClick: () => setIsOpen(!isOpen), children: [STATUS_CONFIG[status].label, _jsx("svg", { className: "ri-badge__chevron", viewBox: "0 0 20 20", fill: "currentColor", width: "14", height: "14", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ri-status-selector__backdrop", onClick: () => setIsOpen(false) }), _jsx("div", { className: "ri-status-selector__dropdown", children: ALL_STATUSES.map((s) => (_jsxs("button", { type: "button", className: `ri-status-selector__option ${s === status ? "ri-status-selector__option--active" : ""}`, onClick: () => handleStatusChange(s), children: [_jsx("span", { className: `ri-status-selector__dot ri-status-selector__dot--${s.toLowerCase()}` }), STATUS_CONFIG[s].label] }, s))) })] }))] }));
+}
+function InstanceHeader({ document, dispatch, mode }) {
+    const state = document.state.global;
+    const [isEditing, setIsEditing] = useState(false);
+    const [editName, setEditName] = useState(state.name || "");
+    const [editDescription, setEditDescription] = useState(state.description || "");
+    const handleSave = useCallback(() => {
+        dispatch(updateInstanceInfo({
+            name: editName || undefined,
+            description: editDescription || undefined,
+        }));
+        setIsEditing(false);
+    }, [dispatch, editName, editDescription]);
+    return (_jsx("div", { className: "ri-header", children: _jsxs("div", { className: "ri-header__main", children: [_jsxs("div", { className: "ri-header__title-row", children: [_jsxs("div", { className: "ri-header__info", children: [state.thumbnailUrl && (_jsx("img", { src: state.thumbnailUrl, alt: "", className: "ri-header__thumbnail" })), _jsxs("div", { children: [isEditing ? (_jsx("input", { type: "text", className: "ri-input ri-input--title", value: editName, onChange: (e) => setEditName(e.target.value), placeholder: "Instance name" })) : (_jsx("h1", { className: "ri-header__title", children: state.name || "Unnamed Instance" })), isEditing ? (_jsx("textarea", { className: "ri-input ri-input--textarea", value: editDescription, onChange: (e) => setEditDescription(e.target.value), placeholder: "Description", rows: 2 })) : (state.description && (_jsx("p", { className: "ri-header__subtitle", children: state.description })))] })] }), _jsxs("div", { className: "ri-header__actions", children: [_jsx(StatusSelector, { status: state.status, dispatch: dispatch, mode: mode }), mode === "operator" && !isEditing && (_jsx("button", { type: "button", className: "ri-btn ri-btn--ghost ri-btn--sm", onClick: () => setIsEditing(true), children: "Edit" })), isEditing && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "ri-btn ri-btn--ghost ri-btn--sm", onClick: () => setIsEditing(false), children: "Cancel" }), _jsx("button", { type: "button", className: "ri-btn ri-btn--primary ri-btn--sm", onClick: handleSave, children: "Save" })] }))] })] }), _jsxs("div", { className: "ri-header__meta", children: [state.customerId && mode === "operator" && (_jsxs("div", { className: "ri-header__meta-item", children: [_jsx("span", { className: "ri-header__meta-label", children: "Customer ID" }), _jsx("span", { className: "ri-header__meta-value ri-header__meta-value--mono", children: state.customerId })] })), state.resourceTemplateId && (_jsxs("div", { className: "ri-header__meta-item", children: [_jsx("span", { className: "ri-header__meta-label", children: "Template ID" }), _jsx("span", { className: "ri-header__meta-value ri-header__meta-value--mono", children: state.resourceTemplateId })] })), state.infoLink && (_jsxs("div", { className: "ri-header__meta-item", children: [_jsx("span", { className: "ri-header__meta-label", children: "Info Link" }), _jsx("a", { href: state.infoLink, target: "_blank", rel: "noopener noreferrer", className: "ri-header__meta-value ri-header__meta-value--link", children: "View Info" })] }))] })] }) }));
+}
+function ConfigurationPanel({ document, dispatch, mode, }) {
+    const facets = document.state.global.configuration;
+    const [isAdding, setIsAdding] = useState(false);
+    const [newFacet, setNewFacet] = useState({
+        categoryKey: "",
+        categoryLabel: "",
+        selectedOption: "",
+    });
+    const [editingKey, setEditingKey] = useState(null);
+    const [editValue, setEditValue] = useState("");
+    const handleAddFacet = useCallback(() => {
+        if (newFacet.categoryKey &&
+            newFacet.categoryLabel &&
+            newFacet.selectedOption) {
+            dispatch(setInstanceFacet({
+                id: generateId(),
+                categoryKey: newFacet.categoryKey,
+                categoryLabel: newFacet.categoryLabel,
+                selectedOption: newFacet.selectedOption,
+            }));
+            setNewFacet({ categoryKey: "", categoryLabel: "", selectedOption: "" });
+            setIsAdding(false);
+        }
+    }, [dispatch, newFacet]);
+    const handleUpdateFacet = useCallback((categoryKey) => {
+        if (editValue) {
+            dispatch(updateInstanceFacet({
+                categoryKey,
+                selectedOption: editValue,
+            }));
+            setEditingKey(null);
+            setEditValue("");
+        }
+    }, [dispatch, editValue]);
+    const handleRemoveFacet = useCallback((categoryKey) => {
+        dispatch(removeInstanceFacet({ categoryKey }));
+    }, [dispatch]);
+    return (_jsxs("div", { className: "ri-panel", children: [_jsxs("div", { className: "ri-panel__header", children: [_jsx("h3", { className: "ri-panel__title", children: "Configuration" }), mode === "operator" && (_jsx("button", { type: "button", className: "ri-btn ri-btn--primary ri-btn--sm", onClick: () => setIsAdding(true), children: "Add Facet" }))] }), isAdding && (_jsxs("div", { className: "ri-facet-form", children: [_jsx("input", { type: "text", className: "ri-input", placeholder: "Category Key", value: newFacet.categoryKey, onChange: (e) => setNewFacet({ ...newFacet, categoryKey: e.target.value }) }), _jsx("input", { type: "text", className: "ri-input", placeholder: "Category Label", value: newFacet.categoryLabel, onChange: (e) => setNewFacet({ ...newFacet, categoryLabel: e.target.value }) }), _jsx("input", { type: "text", className: "ri-input", placeholder: "Selected Option", value: newFacet.selectedOption, onChange: (e) => setNewFacet({ ...newFacet, selectedOption: e.target.value }) }), _jsxs("div", { className: "ri-facet-form__actions", children: [_jsx("button", { type: "button", className: "ri-btn ri-btn--ghost ri-btn--sm", onClick: () => setIsAdding(false), children: "Cancel" }), _jsx("button", { type: "button", className: "ri-btn ri-btn--primary ri-btn--sm", onClick: handleAddFacet, children: "Add" })] })] })), facets.length === 0 ? (_jsxs("div", { className: "ri-empty", children: [_jsx("div", { className: "ri-empty__icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }) }), _jsx("p", { className: "ri-empty__text", children: "No configuration facets" })] })) : (_jsx("div", { className: "ri-config-list", children: facets.map((facet) => (_jsxs("div", { className: "ri-config-item", children: [_jsxs("div", { className: "ri-config-item__info", children: [_jsx("span", { className: "ri-config-item__label", children: facet.categoryLabel }), _jsx("span", { className: "ri-config-item__key", children: facet.categoryKey })] }), editingKey === facet.categoryKey ? (_jsxs("div", { className: "ri-config-item__edit", children: [_jsx("input", { type: "text", className: "ri-input ri-input--sm", value: editValue, onChange: (e) => setEditValue(e.target.value) }), _jsx("button", { type: "button", className: "ri-btn ri-btn--ghost ri-btn--xs", onClick: () => setEditingKey(null), children: "Cancel" }), _jsx("button", { type: "button", className: "ri-btn ri-btn--primary ri-btn--xs", onClick: () => handleUpdateFacet(facet.categoryKey), children: "Save" })] })) : (_jsxs("div", { className: "ri-config-item__value-row", children: [_jsx("span", { className: "ri-config-item__value", children: facet.selectedOption }), mode === "operator" && (_jsxs("div", { className: "ri-config-item__actions", children: [_jsx("button", { type: "button", className: "ri-btn ri-btn--ghost ri-btn--xs", onClick: () => {
+                                                setEditingKey(facet.categoryKey);
+                                                setEditValue(facet.selectedOption);
+                                            }, children: "Edit" }), _jsx("button", { type: "button", className: "ri-btn ri-btn--ghost ri-btn--xs ri-btn--danger", onClick: () => handleRemoveFacet(facet.categoryKey), children: "Remove" })] }))] }))] }, facet.categoryKey))) }))] }));
+}
+function LifecycleActionsPanel({ document, dispatch, }) {
+    const state = document.state.global;
+    const [modalAction, setModalAction] = useState(null);
+    const [reason, setReason] = useState("");
+    const handleAction = useCallback((action) => {
+        const now = new Date().toISOString();
+        switch (action) {
+            case "confirm":
+                dispatch(confirmInstance({ confirmedAt: now }));
+                break;
+            case "startProvisioning":
+                dispatch(reportProvisioningStarted({ startedAt: now }));
+                break;
+            case "completeProvisioning":
+                dispatch(reportProvisioningCompleted({ completedAt: now }));
+                break;
+            case "failProvisioning":
+                dispatch(reportProvisioningFailed({ failedAt: now, failureReason: reason }));
+                break;
+            case "activate":
+                dispatch(activateInstance({ activatedAt: now }));
+                break;
+            case "suspendNonPayment":
+                dispatch(suspendForNonPayment({ suspendedAt: now }));
+                break;
+            case "suspendMaintenance":
+                dispatch(suspendForMaintenance({ suspendedAt: now }));
+                break;
+            case "suspendOther":
+                dispatch(suspendInstance({ suspendedAt: now, reason: reason || undefined }));
+                break;
+            case "resumePayment":
+                dispatch(resumeAfterPayment({ resumedAt: now }));
+                break;
+            case "resumeMaintenance":
+                dispatch(resumeAfterMaintenance({ resumedAt: now }));
+                break;
+            case "terminate":
+                dispatch(terminateInstance({ terminatedAt: now, reason }));
+                break;
+        }
+        setModalAction(null);
+        setReason("");
+    }, [dispatch, reason]);
+    const getAvailableActions = () => {
+        const actions = [];
+        switch (state.status) {
+            case "DRAFT":
+                if (!state.confirmedAt) {
+                    actions.push({
+                        id: "confirm",
+                        label: "Confirm Instance",
+                        variant: "primary",
+                    });
+                }
+                else if (!state.provisioningStartedAt) {
+                    actions.push({
+                        id: "startProvisioning",
+                        label: "Start Provisioning",
+                        variant: "primary",
+                    });
+                }
+                break;
+            case "PROVISIONING":
+                actions.push({
+                    id: "completeProvisioning",
+                    label: "Complete Provisioning",
+                    variant: "success",
+                });
+                actions.push({
+                    id: "failProvisioning",
+                    label: "Report Failure",
+                    variant: "danger",
+                    needsReason: true,
+                });
+                break;
+            case "ACTIVE":
+                actions.push({
+                    id: "suspendNonPayment",
+                    label: "Suspend (Non-Payment)",
+                    variant: "warning",
+                });
+                actions.push({
+                    id: "suspendMaintenance",
+                    label: "Suspend (Maintenance)",
+                    variant: "warning",
+                });
+                actions.push({
+                    id: "suspendOther",
+                    label: "Suspend (Other)",
+                    variant: "warning",
+                    needsReason: true,
+                });
+                actions.push({
+                    id: "terminate",
+                    label: "Terminate",
+                    variant: "danger",
+                    needsReason: true,
+                });
+                break;
+            case "SUSPENDED":
+                if (state.suspensionType === "NON_PAYMENT") {
+                    actions.push({
+                        id: "resumePayment",
+                        label: "Resume (Payment Received)",
+                        variant: "success",
+                    });
+                }
+                else if (state.suspensionType === "MAINTENANCE") {
+                    actions.push({
+                        id: "resumeMaintenance",
+                        label: "Resume (Maintenance Complete)",
+                        variant: "success",
+                    });
+                }
+                else {
+                    actions.push({
+                        id: "resumePayment",
+                        label: "Resume",
+                        variant: "success",
+                    });
+                }
+                actions.push({
+                    id: "terminate",
+                    label: "Terminate",
+                    variant: "danger",
+                    needsReason: true,
+                });
+                break;
+        }
+        // If draft but confirmed and provisioning completed, allow activation
+        if (state.status === "DRAFT" &&
+            state.provisioningCompletedAt &&
+            !state.activatedAt) {
+            actions.push({
+                id: "activate",
+                label: "Activate Instance",
+                variant: "success",
+            });
+        }
+        return actions;
+    };
+    const actions = getAvailableActions();
+    if (state.status === "TERMINATED" || actions.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "ri-panel", children: [_jsx("div", { className: "ri-panel__header", children: _jsx("h3", { className: "ri-panel__title", children: "Lifecycle Actions" }) }), _jsx("div", { className: "ri-actions__grid", children: actions.map((action) => (_jsx("button", { type: "button", className: `ri-btn ri-btn--${action.variant}`, onClick: () => action.needsReason
+                        ? setModalAction(action.id)
+                        : handleAction(action.id), children: action.label }, action.id))) }), modalAction && (_jsx("div", { className: "ri-modal-overlay", onClick: () => setModalAction(null), children: _jsxs("div", { className: "ri-modal", onClick: (e) => e.stopPropagation(), children: [_jsx("h4", { className: "ri-modal__title", children: modalAction === "terminate"
+                                ? "Terminate Instance"
+                                : modalAction === "failProvisioning"
+                                    ? "Report Provisioning Failure"
+                                    : "Suspend Instance" }), _jsx("p", { className: "ri-modal__message", children: "Please provide a reason:" }), _jsx("textarea", { className: "ri-input ri-input--textarea", value: reason, onChange: (e) => setReason(e.target.value), placeholder: "Enter reason...", rows: 3 }), _jsxs("div", { className: "ri-modal__actions", children: [_jsx("button", { type: "button", className: "ri-btn ri-btn--ghost", onClick: () => setModalAction(null), children: "Cancel" }), _jsx("button", { type: "button", className: `ri-btn ri-btn--${modalAction === "terminate" || modalAction === "failProvisioning" ? "danger" : "warning"}`, onClick: () => handleAction(modalAction), disabled: !reason, children: "Confirm" })] })] }) }))] }));
+}
+function ProfileReferencePanel({ document, mode: _mode, }) {
+    const profile = document.state.global.profile;
+    return (_jsxs("div", { className: "ri-panel ri-panel--compact", children: [_jsx("div", { className: "ri-panel__header", children: _jsx("h3", { className: "ri-panel__title", children: "Resource Profile" }) }), profile ? (_jsxs("div", { className: "ri-profile", children: [_jsxs("div", { className: "ri-profile__item", children: [_jsx("span", { className: "ri-profile__label", children: "Profile ID" }), _jsx("span", { className: "ri-profile__value ri-profile__value--mono", children: profile.id })] }), _jsxs("div", { className: "ri-profile__item", children: [_jsx("span", { className: "ri-profile__label", children: "Document Type" }), _jsx("span", { className: "ri-profile__value", children: profile.documentType })] })] })) : (_jsx("div", { className: "ri-empty ri-empty--sm", children: _jsx("p", { className: "ri-empty__text", children: "No profile linked" }) }))] }));
+}
+// ============================================================
+// Suspension Details Panel Component
+// ============================================================
+function SuspensionDetailsPanel({ document, }) {
+    const state = document.state.global;
+    const formatSuspensionType = (type) => {
+        if (!type)
+            return "Unknown";
+        const labels = {
+            NON_PAYMENT: "Non-Payment",
+            MAINTENANCE: "Maintenance",
+            OTHER: "Other",
+        };
+        return labels[type] || type;
+    };
+    return (_jsxs("div", { className: "ri-panel ri-panel--warning", children: [_jsx("div", { className: "ri-panel__header", children: _jsx("h3", { className: "ri-panel__title", children: "Suspension Details" }) }), _jsxs("div", { className: "ri-suspension", children: [_jsxs("div", { className: "ri-suspension__item", children: [_jsx("span", { className: "ri-suspension__label", children: "Type" }), _jsx("span", { className: "ri-suspension__value", children: formatSuspensionType(state.suspensionType) })] }), state.suspensionReason && (_jsxs("div", { className: "ri-suspension__item", children: [_jsx("span", { className: "ri-suspension__label", children: "Reason" }), _jsx("span", { className: "ri-suspension__value", children: state.suspensionReason })] })), state.suspensionDetails && (_jsxs("div", { className: "ri-suspension__item", children: [_jsx("span", { className: "ri-suspension__label", children: "Details" }), _jsx("span", { className: "ri-suspension__value", children: state.suspensionDetails })] })), state.suspendedAt && (_jsxs("div", { className: "ri-suspension__item", children: [_jsx("span", { className: "ri-suspension__label", children: "Suspended At" }), _jsx("span", { className: "ri-suspension__value", children: formatDate(state.suspendedAt) })] }))] })] }));
+}
+// ============================================================
+// Lifecycle Timeline Component
+// ============================================================
+function LifecycleTimeline({ document, }) {
+    const state = document.state.global;
+    const events = [];
+    if (state.confirmedAt) {
+        events.push({
+            label: "Confirmed",
+            date: state.confirmedAt,
+            variant: "normal",
+        });
+    }
+    if (state.provisioningStartedAt) {
+        events.push({
+            label: "Provisioning Started",
+            date: state.provisioningStartedAt,
+            variant: "normal",
+        });
+    }
+    if (state.provisioningCompletedAt) {
+        events.push({
+            label: "Provisioning Completed",
+            date: state.provisioningCompletedAt,
+            variant: "success",
+        });
+    }
+    if (state.provisioningFailureReason) {
+        events.push({
+            label: `Provisioning Failed: ${state.provisioningFailureReason}`,
+            date: null,
+            variant: "danger",
+        });
+    }
+    if (state.activatedAt) {
+        events.push({
+            label: "Activated",
+            date: state.activatedAt,
+            variant: "success",
+        });
+    }
+    if (state.suspendedAt) {
+        events.push({
+            label: `Suspended (${state.suspensionType || "Unknown"})`,
+            date: state.suspendedAt,
+            variant: "warning",
+        });
+    }
+    if (state.resumedAt) {
+        events.push({
+            label: "Resumed",
+            date: state.resumedAt,
+            variant: "success",
+        });
+    }
+    if (state.terminatedAt) {
+        events.push({
+            label: "Terminated",
+            date: state.terminatedAt,
+            variant: "danger",
+        });
+    }
+    return (_jsxs("div", { className: "ri-panel ri-panel--compact", children: [_jsx("div", { className: "ri-panel__header", children: _jsx("h3", { className: "ri-panel__title", children: "Lifecycle Timeline" }) }), events.length === 0 ? (_jsx("div", { className: "ri-empty ri-empty--sm", children: _jsx("p", { className: "ri-empty__text", children: "No lifecycle events yet" }) })) : (_jsx("div", { className: "ri-timeline", children: events.map((event, index) => (_jsxs("div", { className: `ri-timeline__event ri-timeline__event--${event.variant}`, children: [_jsx("div", { className: "ri-timeline__dot" }), index < events.length - 1 && (_jsx("div", { className: "ri-timeline__line" })), _jsxs("div", { className: "ri-timeline__content", children: [_jsx("span", { className: "ri-timeline__label", children: event.label }), event.date && (_jsx("span", { className: "ri-timeline__date", children: formatDate(event.date) }))] })] }, index))) }))] }));
+}
+// ============================================================
+// Utility Functions
+// ============================================================
+function formatDate(date) {
+    if (!date)
+        return "—";
+    return new Date(date).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+}
+// ============================================================
+// Editor Styles
+// ============================================================
+const editorStyles = `
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+  .ri-editor {
+    --ri-font-sans: 'Inter', system-ui, sans-serif;
+    --ri-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+
+    /* Colors */
+    --ri-slate-50: #f8fafc;
+    --ri-slate-100: #f1f5f9;
+    --ri-slate-200: #e2e8f0;
+    --ri-slate-300: #cbd5e1;
+    --ri-slate-400: #94a3b8;
+    --ri-slate-500: #64748b;
+    --ri-slate-600: #475569;
+    --ri-slate-700: #334155;
+    --ri-slate-800: #1e293b;
+    --ri-slate-900: #0f172a;
+
+    --ri-emerald-50: #ecfdf5;
+    --ri-emerald-100: #d1fae5;
+    --ri-emerald-500: #10b981;
+    --ri-emerald-600: #059669;
+    --ri-emerald-700: #047857;
+
+    --ri-amber-50: #fffbeb;
+    --ri-amber-100: #fef3c7;
+    --ri-amber-500: #f59e0b;
+    --ri-amber-600: #d97706;
+    --ri-amber-700: #b45309;
+
+    --ri-rose-50: #fff1f2;
+    --ri-rose-100: #ffe4e6;
+    --ri-rose-500: #f43f5e;
+    --ri-rose-600: #e11d48;
+    --ri-rose-700: #be123c;
+
+    --ri-sky-50: #f0f9ff;
+    --ri-sky-100: #e0f2fe;
+    --ri-sky-500: #0ea5e9;
+    --ri-sky-600: #0284c7;
+
+    /* Spacing */
+    --ri-radius-sm: 6px;
+    --ri-radius-md: 8px;
+    --ri-radius-lg: 12px;
+
+    /* Shadows */
+    --ri-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+    --ri-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
+    --ri-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+
+    /* Transitions */
+    --ri-transition-fast: 150ms ease;
+    --ri-transition-base: 200ms ease;
+
+    font-family: var(--ri-font-sans);
+    background: var(--ri-slate-50);
+    min-height: 100%;
+    overflow-y: auto;
+  }
+
+  .ri-editor__container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 24px 32px 48px;
+  }
+
+  .ri-editor__header {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  .ri-editor__grid {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    gap: 24px;
+    margin-top: 24px;
+  }
+
+  @media (max-width: 1024px) {
+    .ri-editor__grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .ri-editor__main {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .ri-editor__sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  /* Empty State */
+  .ri-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    text-align: center;
+    padding: 48px;
+  }
+
+  .ri-empty-state__icon {
+    width: 64px;
+    height: 64px;
+    color: var(--ri-slate-300);
+    margin-bottom: 16px;
+  }
+
+  .ri-empty-state__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ri-empty-state__title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--ri-slate-700);
+    margin: 0 0 8px;
+  }
+
+  .ri-empty-state__subtitle {
+    font-size: 0.875rem;
+    color: var(--ri-slate-500);
+    margin: 0;
+  }
+
+  /* Mode Toggle */
+  .ri-mode-toggle {
+    display: inline-flex;
+    background: var(--ri-slate-100);
+    border-radius: var(--ri-radius-lg);
+    padding: 4px;
+    gap: 4px;
+  }
+
+  .ri-mode-toggle__btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    font-family: var(--ri-font-sans);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--ri-slate-600);
+    background: transparent;
+    border: none;
+    border-radius: var(--ri-radius-md);
+    cursor: pointer;
+    transition: all var(--ri-transition-fast);
+  }
+
+  .ri-mode-toggle__btn:hover {
+    color: var(--ri-slate-800);
+  }
+
+  .ri-mode-toggle__btn--active {
+    background: white;
+    color: var(--ri-slate-900);
+    box-shadow: var(--ri-shadow-sm);
+  }
+
+  .ri-mode-toggle__icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  /* Header */
+  .ri-header {
+    background: white;
+    border-radius: var(--ri-radius-lg);
+    padding: 24px;
+    box-shadow: var(--ri-shadow-sm);
+    border: 1px solid var(--ri-slate-200);
+  }
+
+  .ri-header__main {
+    margin-bottom: 0;
+  }
+
+  .ri-header__title-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .ri-header__info {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .ri-header__thumbnail {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--ri-radius-md);
+    object-fit: cover;
+  }
+
+  .ri-header__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--ri-slate-900);
+    margin: 0;
+  }
+
+  .ri-header__subtitle {
+    font-size: 0.875rem;
+    color: var(--ri-slate-500);
+    margin: 4px 0 0;
+  }
+
+  .ri-header__actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .ri-header__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+  }
+
+  .ri-header__meta-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .ri-header__meta-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--ri-slate-500);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .ri-header__meta-value {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--ri-slate-800);
+  }
+
+  .ri-header__meta-value--mono {
+    font-family: var(--ri-font-mono);
+    font-size: 0.8125rem;
+  }
+
+  .ri-header__meta-value--link {
+    color: var(--ri-sky-600);
+    text-decoration: none;
+  }
+
+  .ri-header__meta-value--link:hover {
+    text-decoration: underline;
+  }
+
+  /* Badges */
+  .ri-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    border-radius: 100px;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  .ri-badge--emerald {
+    background: var(--ri-emerald-100);
+    color: var(--ri-emerald-700);
+  }
+
+  .ri-badge--amber {
+    background: var(--ri-amber-100);
+    color: var(--ri-amber-700);
+  }
+
+  .ri-badge--rose {
+    background: var(--ri-rose-100);
+    color: var(--ri-rose-700);
+  }
+
+  .ri-badge--sky {
+    background: var(--ri-sky-100);
+    color: var(--ri-sky-600);
+  }
+
+  .ri-badge--slate {
+    background: var(--ri-slate-100);
+    color: var(--ri-slate-600);
+  }
+
+  .ri-badge--clickable {
+    cursor: pointer;
+    gap: 4px;
+    border: none;
+    font-family: var(--ri-font-sans);
+    transition: all var(--ri-transition-fast);
+  }
+
+  .ri-badge--clickable:hover {
+    filter: brightness(0.95);
+  }
+
+  .ri-badge__chevron {
+    margin-left: 2px;
+  }
+
+  /* Status Selector */
+  .ri-status-selector {
+    position: relative;
+  }
+
+  .ri-status-selector__backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 99;
+  }
+
+  .ri-status-selector__dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    background: white;
+    border-radius: var(--ri-radius-md);
+    box-shadow: var(--ri-shadow-lg);
+    border: 1px solid var(--ri-slate-200);
+    padding: 4px;
+    z-index: 100;
+    min-width: 160px;
+  }
+
+  .ri-status-selector__option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 12px;
+    font-family: var(--ri-font-sans);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--ri-slate-700);
+    background: transparent;
+    border: none;
+    border-radius: var(--ri-radius-sm);
+    cursor: pointer;
+    text-align: left;
+    transition: background var(--ri-transition-fast);
+  }
+
+  .ri-status-selector__option:hover {
+    background: var(--ri-slate-100);
+  }
+
+  .ri-status-selector__option--active {
+    background: var(--ri-slate-100);
+    color: var(--ri-slate-900);
+  }
+
+  .ri-status-selector__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .ri-status-selector__dot--draft {
+    background: var(--ri-slate-400);
+  }
+
+  .ri-status-selector__dot--provisioning {
+    background: var(--ri-sky-500);
+  }
+
+  .ri-status-selector__dot--active {
+    background: var(--ri-emerald-500);
+  }
+
+  .ri-status-selector__dot--suspended {
+    background: var(--ri-amber-500);
+  }
+
+  .ri-status-selector__dot--terminated {
+    background: var(--ri-rose-500);
+  }
+
+  /* Panel */
+  .ri-panel {
+    background: white;
+    border-radius: var(--ri-radius-lg);
+    padding: 24px;
+    box-shadow: var(--ri-shadow-sm);
+    border: 1px solid var(--ri-slate-200);
+  }
+
+  .ri-panel--compact {
+    padding: 20px;
+  }
+
+  .ri-panel--warning {
+    border-color: var(--ri-amber-500);
+    background: var(--ri-amber-50);
+  }
+
+  .ri-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  .ri-panel__title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--ri-slate-900);
+    margin: 0;
+  }
+
+  /* Empty State within panel */
+  .ri-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32px;
+    text-align: center;
+  }
+
+  .ri-empty--sm {
+    padding: 16px;
+  }
+
+  .ri-empty__icon {
+    width: 48px;
+    height: 48px;
+    color: var(--ri-slate-300);
+    margin-bottom: 12px;
+  }
+
+  .ri-empty__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ri-empty__text {
+    font-size: 0.875rem;
+    color: var(--ri-slate-500);
+    margin: 0;
+  }
+
+  /* Buttons */
+  .ri-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 16px;
+    font-family: var(--ri-font-sans);
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: var(--ri-radius-md);
+    border: none;
+    cursor: pointer;
+    transition: all var(--ri-transition-fast);
+  }
+
+  .ri-btn--sm {
+    padding: 6px 12px;
+    font-size: 0.8125rem;
+  }
+
+  .ri-btn--xs {
+    padding: 4px 8px;
+    font-size: 0.75rem;
+  }
+
+  .ri-btn--primary {
+    background: var(--ri-sky-600);
+    color: white;
+  }
+
+  .ri-btn--primary:hover {
+    background: var(--ri-sky-500);
+  }
+
+  .ri-btn--success {
+    background: var(--ri-emerald-600);
+    color: white;
+  }
+
+  .ri-btn--success:hover {
+    background: var(--ri-emerald-500);
+  }
+
+  .ri-btn--warning {
+    background: var(--ri-amber-500);
+    color: white;
+  }
+
+  .ri-btn--warning:hover {
+    background: var(--ri-amber-600);
+  }
+
+  .ri-btn--danger {
+    background: var(--ri-rose-600);
+    color: white;
+  }
+
+  .ri-btn--danger:hover {
+    background: var(--ri-rose-500);
+  }
+
+  .ri-btn--ghost {
+    background: transparent;
+    color: var(--ri-slate-600);
+  }
+
+  .ri-btn--ghost:hover {
+    background: var(--ri-slate-100);
+    color: var(--ri-slate-800);
+  }
+
+  .ri-btn--ghost.ri-btn--danger {
+    background: transparent;
+    color: var(--ri-rose-600);
+  }
+
+  .ri-btn--ghost.ri-btn--danger:hover {
+    background: var(--ri-rose-50);
+  }
+
+  .ri-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Input */
+  .ri-input {
+    width: 100%;
+    padding: 10px 12px;
+    font-family: var(--ri-font-sans);
+    font-size: 0.875rem;
+    color: var(--ri-slate-800);
+    background: white;
+    border: 1px solid var(--ri-slate-300);
+    border-radius: var(--ri-radius-md);
+    transition: border-color var(--ri-transition-fast);
+  }
+
+  .ri-input:focus {
+    outline: none;
+    border-color: var(--ri-sky-500);
+  }
+
+  .ri-input--sm {
+    padding: 6px 10px;
+    font-size: 0.8125rem;
+  }
+
+  .ri-input--title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding: 8px 12px;
+  }
+
+  .ri-input--textarea {
+    resize: vertical;
+    min-height: 60px;
+  }
+
+  /* Configuration */
+  .ri-config-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .ri-config-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: var(--ri-slate-50);
+    border-radius: var(--ri-radius-md);
+    border: 1px solid var(--ri-slate-200);
+  }
+
+  .ri-config-item__info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .ri-config-item__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--ri-slate-800);
+  }
+
+  .ri-config-item__key {
+    font-size: 0.75rem;
+    font-family: var(--ri-font-mono);
+    color: var(--ri-slate-500);
+  }
+
+  .ri-config-item__value-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .ri-config-item__value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--ri-emerald-600);
+  }
+
+  .ri-config-item__actions {
+    display: flex;
+    gap: 4px;
+    opacity: 0;
+    transition: opacity var(--ri-transition-fast);
+  }
+
+  .ri-config-item:hover .ri-config-item__actions {
+    opacity: 1;
+  }
+
+  .ri-config-item__edit {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .ri-facet-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    background: var(--ri-slate-50);
+    border-radius: var(--ri-radius-md);
+    margin-bottom: 16px;
+  }
+
+  .ri-facet-form__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  /* Actions Grid */
+  .ri-actions__grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  /* Profile */
+  .ri-profile {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .ri-profile__item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .ri-profile__label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--ri-slate-500);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .ri-profile__value {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--ri-slate-800);
+  }
+
+  .ri-profile__value--mono {
+    font-family: var(--ri-font-mono);
+    font-size: 0.8125rem;
+  }
+
+  /* Suspension */
+  .ri-suspension {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .ri-suspension__item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .ri-suspension__label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--ri-amber-700);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .ri-suspension__value {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--ri-slate-800);
+  }
+
+  /* Timeline */
+  .ri-timeline {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .ri-timeline__event {
+    display: flex;
+    gap: 12px;
+    position: relative;
+    padding-bottom: 16px;
+  }
+
+  .ri-timeline__event:last-child {
+    padding-bottom: 0;
+  }
+
+  .ri-timeline__dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--ri-slate-400);
+    flex-shrink: 0;
+    margin-top: 4px;
+  }
+
+  .ri-timeline__event--success .ri-timeline__dot {
+    background: var(--ri-emerald-500);
+  }
+
+  .ri-timeline__event--warning .ri-timeline__dot {
+    background: var(--ri-amber-500);
+  }
+
+  .ri-timeline__event--danger .ri-timeline__dot {
+    background: var(--ri-rose-500);
+  }
+
+  .ri-timeline__line {
+    position: absolute;
+    left: 5px;
+    top: 16px;
+    width: 2px;
+    height: calc(100% - 12px);
+    background: var(--ri-slate-200);
+  }
+
+  .ri-timeline__content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .ri-timeline__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--ri-slate-800);
+  }
+
+  .ri-timeline__date {
+    font-size: 0.75rem;
+    color: var(--ri-slate-500);
+  }
+
+  /* Modal */
+  .ri-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .ri-modal {
+    background: white;
+    border-radius: var(--ri-radius-lg);
+    padding: 24px;
+    width: 100%;
+    max-width: 400px;
+    box-shadow: var(--ri-shadow-lg);
+  }
+
+  .ri-modal__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--ri-slate-900);
+    margin: 0 0 8px;
+  }
+
+  .ri-modal__message {
+    font-size: 0.875rem;
+    color: var(--ri-slate-600);
+    margin: 0 0 16px;
+  }
+
+  .ri-modal__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 20px;
+  }
+`;