create-principles-disciple 1.0.0 → 1.74.0

package/console/dist/ui/pages/PrincipleDetailPage.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useParams, useNavigate, Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { fetchPrincipleDetail } from "../api.js";
+import { formatDate, formatDateShort } from "../utils/format.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card.js";
+import { Badge } from "../components/ui/badge.js";
+import { Button } from "../components/ui/button.js";
+import { Skeleton } from "../components/ui/skeleton.js";
+import { ProgressBar, ValueScoreBar, AdherenceBar } from "../components/ui/progress-bar.js";
+import { MarkdownRenderer, CollapsibleSection, TruncatedText } from "../components/ui/markdown.js";
+import { ArrowLeft, ChevronRight, Copy, Check, Share2, Shield, AlertTriangle, Clock, Zap, Target, FileText, } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const STATUS_COLORS = {
+    candidate: "text-amber-500",
+    probation: "text-blue-500",
+    active: "text-primary",
+    deprecated: "text-destructive",
+    archived: "text-muted-foreground",
+};
+const STATUS_BG = {
+    candidate: "bg-amber-50 dark:bg-amber-950/20",
+    probation: "bg-blue-50 dark:bg-blue-950/20",
+    active: "bg-primary/10",
+    deprecated: "bg-destructive/10",
+    archived: "bg-muted",
+};
+const PRIORITY_COLORS = {
+    P0: "text-destructive",
+    P1: "text-amber-500",
+    P2: "text-muted-foreground",
+};
+const ENFORCEMENT_COLORS = {
+    block: "text-destructive",
+    warn: "text-amber-500",
+    log: "text-muted-foreground",
+};
+const RULE_TYPE_LABELS = {
+    hook: "Hook",
+    gate: "Gate",
+    skill: "Skill",
+    lora: "LoRA",
+    test: "Test",
+    prompt: "Prompt",
+};
+function MetaCard({ label, value, icon, bgClass = "" }) {
+    return (_jsxs("div", { className: cn("p-4 rounded-lg border border-border", bgClass), children: [_jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground mb-1", children: [icon, _jsx("span", { children: label })] }), _jsx("div", { className: "text-sm font-medium", children: value !== null && value !== undefined && value !== "" ? String(value) : "—" })] }));
+}
+function RuleCard({ rule }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "p-4 rounded-lg border border-border bg-card", children: [_jsxs("div", { className: "flex items-center gap-3 mb-3", children: [_jsx(Badge, { variant: "outline", className: "text-xs", children: RULE_TYPE_LABELS[rule.type] ?? rule.type }), _jsx(Badge, { variant: "outline", className: cn("text-xs", ENFORCEMENT_COLORS[rule.enforcement] ?? ""), children: rule.enforcement.toUpperCase() }), _jsx(Badge, { variant: "secondary", className: "text-xs", children: rule.status }), _jsx("span", { className: "text-sm font-medium ml-auto", children: rule.name || rule.id })] }), rule.description && (_jsx("div", { className: "text-xs text-muted-foreground mb-3", children: _jsx(MarkdownRenderer, { content: rule.description }) })), _jsxs("div", { className: "space-y-2", children: [rule.triggerCondition && (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Target, { className: "h-3 w-3 mt-0.5 text-muted-foreground flex-shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("span", { className: "text-xs text-muted-foreground font-medium", children: [t("pages:principles.triggerCondition"), ":"] }), _jsx(TruncatedText, { text: rule.triggerCondition, maxLines: 3, className: "text-xs text-foreground break-all" })] })] })), rule.action && (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Zap, { className: "h-3 w-3 mt-0.5 text-muted-foreground flex-shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("span", { className: "text-xs text-muted-foreground font-medium", children: [t("pages:principles.action"), ":"] }), _jsx(TruncatedText, { text: rule.action, maxLines: 3, className: "text-xs text-foreground break-all" })] })] }))] }), (rule.coverageRate > 0 || rule.falsePositiveRate > 0) && (_jsxs("div", { className: "flex gap-4 mt-3 pt-3 border-t border-border", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-xs text-muted-foreground mb-1", children: t("pages:principles.coverageRate") }), _jsx(ProgressBar, { value: rule.coverageRate * 100, max: 100, size: "sm", showLabel: true })] }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-xs text-muted-foreground mb-1", children: t("pages:principles.falsePositiveRate") }), _jsx(ProgressBar, { value: rule.falsePositiveRate * 100, max: 100, size: "sm", showLabel: true })] })] }))] }));
+}
+function NotFoundPage({ principleId }) {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-16", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mb-4", children: _jsx(AlertTriangle, { className: "h-8 w-8 text-destructive" }) }), _jsx("h2", { className: "text-xl font-semibold mb-2", children: t("pages:principles.notFound") }), _jsx("p", { className: "text-sm text-muted-foreground mb-6", children: t("pages:principles.notFoundDescription", { id: principleId }) }), _jsxs("div", { className: "flex gap-3", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate("/principles"), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), t("pages:principles.backToList")] }), _jsx(Button, { onClick: () => navigate("/principles"), children: t("pages:principles.browsePrinciples") })] })] }));
+}
+function LoadingSkeleton() {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 w-10" }), _jsx(Skeleton, { className: "h-8 w-48" })] }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx(Skeleton, { className: "h-24 w-full" }, i))) }), _jsx(Skeleton, { className: "h-32 w-full" }), _jsx("div", { className: "space-y-3", children: Array.from({ length: 2 }).map((_, i) => (_jsx(Skeleton, { className: "h-32 w-full" }, i))) })] }));
+}
+export function PrincipleDetailPage() {
+    const { t } = useTranslation();
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [principle, setPrinciple] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!id) {
+            setError("No principle ID provided");
+            setLoading(false);
+            return;
+        }
+        const controller = new AbortController();
+        setLoading(true);
+        setError(null);
+        fetchPrincipleDetail(id)
+            .then((result) => {
+            if (controller.signal.aborted)
+                return;
+            if (result.success && result.data) {
+                setPrinciple(result.data.principle);
+            }
+            else if (!result.success) {
+                setError(result.error || "Failed to load principle");
+            }
+            else {
+                setError("Failed to load principle");
+            }
+        })
+            .catch((err) => {
+            if (controller.signal.aborted)
+                return;
+            setError(err instanceof Error ? err.message : "Unknown error");
+        })
+            .finally(() => {
+            if (!controller.signal.aborted)
+                setLoading(false);
+        });
+        return () => controller.abort();
+    }, [id]);
+    const handleCopyLink = () => {
+        const url = `${window.location.origin}${window.location.pathname}#principles/${id}`;
+        navigator.clipboard.writeText(url).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }).catch(() => {
+            // clipboard API not available (e.g. non-HTTPS)
+        });
+    };
+    const handleShare = async () => {
+        if (!id)
+            return;
+        const url = `${window.location.origin}${window.location.pathname}#principles/${id}`;
+        if (navigator.share) {
+            try {
+                await navigator.share({
+                    title: `${t("pages:principles.title")} - ${id}`,
+                    text: principle?.text || id,
+                    url,
+                });
+            }
+            catch {
+                // User cancelled or share failed
+            }
+        }
+        else {
+            handleCopyLink();
+        }
+    };
+    if (loading) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs(Button, { variant: "ghost", className: "mb-2", disabled: true, children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), t("pages:principles.backToList")] }), _jsx(LoadingSkeleton, {})] }));
+    }
+    if (error || !principle) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs(Button, { variant: "ghost", className: "mb-2", onClick: () => navigate("/principles"), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), t("pages:principles.backToList")] }), _jsx(NotFoundPage, { principleId: id || "unknown" })] }));
+    }
+    const bgClass = STATUS_BG[principle.status];
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground mb-2", children: [_jsx(Link, { to: "/principles", className: "hover:text-foreground transition-colors flex items-center gap-1", children: t("pages:principles.title") }), _jsx(ChevronRight, { className: "h-4 w-4" }), _jsx("span", { className: "text-foreground", children: principle.id })] }), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Badge, { variant: "outline", className: cn("text-sm px-3 py-1", STATUS_COLORS[principle.status]), children: principle.status }), _jsx(Badge, { variant: "outline", className: cn("text-sm px-3 py-1", PRIORITY_COLORS[principle.priority]), children: principle.priority }), principle.scope === "domain" && principle.domain && (_jsx(Badge, { variant: "secondary", className: "text-sm px-3 py-1", children: principle.domain }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleCopyLink, children: copied ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4 mr-1" }), t("common:copied")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "h-4 w-4 mr-1" }), t("pages:principles.copyLink")] })) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleShare, children: [_jsx(Share2, { className: "h-4 w-4 mr-1" }), t("pages:principles.share")] })] })] }), _jsx(Card, { className: cn("border-l-4", bgClass.includes("primary") ? "border-l-primary" : ""), children: _jsxs(CardContent, { className: "p-6", children: [_jsxs("div", { className: "flex items-start gap-3 mb-4", children: [_jsx(FileText, { className: "h-5 w-5 text-muted-foreground mt-0.5" }), _jsxs("div", { children: [_jsx("div", { className: "mb-2", children: _jsx(MarkdownRenderer, { content: principle.text }) }), _jsxs("div", { className: "flex items-center gap-4 text-xs text-muted-foreground", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Clock, { className: "h-3 w-3" }), t("pages:principles.createdAt"), ":", " ", principle.createdAt
+                                                            ? formatDateShort(principle.createdAt)
+                                                            : "—"] }), _jsxs("span", { children: [t("pages:principles.updatedAt"), ":", " ", principle.updatedAt
+                                                            ? formatDateShort(principle.updatedAt)
+                                                            : "—"] })] })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-3", children: t("pages:principles.valueMetrics") }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground mb-1", children: t("pages:principles.valueScore") }), _jsx(ValueScoreBar, { valueScore: principle.valueScore })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground mb-1", children: t("pages:principles.adherence") }), _jsx(AdherenceBar, { adherenceRate: principle.adherenceRate })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground mb-1", children: t("pages:principles.painPrevented") }), _jsx("div", { className: "text-2xl font-bold", children: principle.painPreventedCount })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-3", children: t("pages:principles.quickStats") }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "p-3 rounded-lg bg-muted/50", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:principles.ruleCount") }), _jsxs("div", { className: "text-xl font-bold flex items-center gap-1", children: [_jsx(Shield, { className: "h-4 w-4" }), principle.ruleCount] })] }), _jsxs("div", { className: "p-3 rounded-lg bg-muted/50", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:principles.conflictCount") }), _jsxs("div", { className: "text-xl font-bold flex items-center gap-1", children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), principle.conflictsWithPrincipleIds.length] })] })] })] })] })] }) }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsx(MetaCard, { label: t("pages:principles.triggerPattern"), value: principle.triggerPattern, icon: _jsx(Target, { className: "h-3 w-3" }), bgClass: bgClass }), _jsx(MetaCard, { label: t("pages:principles.action"), value: principle.action, icon: _jsx(Zap, { className: "h-3 w-3" }), bgClass: bgClass }), _jsx(MetaCard, { label: t("pages:principles.evaluability"), value: principle.evaluability, icon: _jsx(Check, { className: "h-3 w-3" }), bgClass: bgClass }), _jsx(MetaCard, { label: t("pages:principles.scope"), value: principle.scope + (principle.domain ? ` / ${principle.domain}` : ""), icon: _jsx(FileText, { className: "h-3 w-3" }), bgClass: bgClass })] }), principle.coreAxiomId && (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-sm", children: t("pages:principles.coreAxiom") }) }), _jsx(CardContent, { children: _jsx(Badge, { variant: "outline", children: principle.coreAxiomId }) })] })), principle.supersedesPrincipleId && (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-sm", children: t("pages:principles.supersedes") }) }), _jsx(CardContent, { children: _jsx(Link, { to: `/principles/${principle.supersedesPrincipleId}`, className: "text-sm text-primary hover:underline", children: principle.supersedesPrincipleId }) })] })), principle.conflictsWithPrincipleIds.length > 0 && (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(CardTitle, { className: "text-sm flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }), t("pages:principles.conflictsWith")] }) }), _jsx(CardContent, { children: _jsx("div", { className: "flex flex-wrap gap-2", children: principle.conflictsWithPrincipleIds.map((conflictId) => (_jsx(Link, { to: `/principles/${conflictId}`, className: cn("px-3 py-1 rounded-full text-sm border transition-colors", "border-destructive/30 bg-destructive/5 text-destructive", "hover:bg-destructive/10 hover:border-destructive/50"), children: conflictId }, conflictId))) }) })] })), principle.lastPainPreventedAt && (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(CardTitle, { className: "text-sm flex items-center gap-2", children: [_jsx(Clock, { className: "h-4 w-4" }), t("pages:principles.lastPainPrevented")] }) }), _jsx(CardContent, { children: _jsx("p", { className: "text-sm", children: formatDate(principle.lastPainPreventedAt) }) })] })), _jsx(CollapsibleSection, { title: `${t("pages:principles.associatedRules")} (${principle.rules.length})`, defaultOpen: principle.rules.length <= 3, children: principle.rules.length === 0 ? (_jsxs("div", { className: "text-center py-6", children: [_jsx(Shield, { className: "h-8 w-8 text-muted-foreground mx-auto mb-2" }), _jsx("p", { className: "text-sm text-muted-foreground", children: t("pages:principles.noRules") })] })) : (_jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: principle.rules.map((rule) => (_jsx(RuleCard, { rule: rule }, rule.id))) })) }), principle.derivedFromPainIds.length > 0 && (_jsx(CollapsibleSection, { title: `${t("pages:principles.derivedFromPain")} (${principle.derivedFromPainIds.length})`, defaultOpen: false, children: _jsx("div", { className: "flex flex-wrap gap-2", children: principle.derivedFromPainIds.map((painId) => (_jsx(Badge, { variant: "secondary", className: "text-xs", children: painId }, painId))) }) }))] }));
+}

package/console/dist/ui/pages/PrinciplesPage.d.ts

@@ -0,0 +1 @@
+export declare function PrinciplesPage(): import("react/jsx-runtime").JSX.Element;

package/console/dist/ui/pages/PrinciplesPage.js

@@ -0,0 +1,322 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
+import { Link, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { fetchPrinciples, fetchPrincipleDetail } from "../api.js";
+import { formatDateShort } from "../utils/format.js";
+import { PageHeader } from "../components/page-header.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card.js";
+import { Badge } from "../components/ui/badge.js";
+import { Skeleton } from "../components/ui/skeleton.js";
+import { Button } from "../components/ui/button.js";
+import { Input } from "../components/ui/input.js";
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "../components/ui/select.js";
+import { ValueScoreBar, AdherenceBar } from "../components/ui/progress-bar.js";
+import { DonutChartWithLegend, HorizontalBarChart, CoverageIndicator, Histogram, computeValueBuckets } from "../components/ui/charts.js";
+import { CompareView } from "../components/compare-view.js";
+import { TruncatedText } from "../components/ui/markdown.js";
+import { useDebounce } from "../hooks/useDebounce.js";
+import { useKeyboardNavigation, useFocusSearch } from "../hooks/useKeyboardNavigation.js";
+import { useBookmarks } from "../hooks/useBookmarks.js";
+import { ChevronDown, ChevronRight, Search, Shield, FileSearch, Inbox, X, ExternalLink, BarChart3, Bookmark, BookmarkCheck, CheckSquare, Square, Download, GitCompare, } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const STATUS_COLORS = {
+    candidate: "text-amber-500",
+    probation: "text-blue-500",
+    active: "text-primary",
+    deprecated: "text-destructive",
+    archived: "text-muted-foreground",
+};
+const STATUS_BG = {
+    candidate: "bg-amber-500/10",
+    probation: "bg-blue-500/10",
+    active: "bg-primary/10",
+    deprecated: "bg-destructive/10",
+    archived: "bg-muted",
+};
+const PRIORITY_COLORS = {
+    P0: "text-destructive",
+    P1: "text-amber-500",
+    P2: "text-muted-foreground",
+};
+const ENFORCEMENT_COLORS = {
+    block: "text-destructive",
+    warn: "text-amber-500",
+    log: "text-muted-foreground",
+};
+const RULE_TYPE_LABELS = {
+    hook: "Hook",
+    gate: "Gate",
+    skill: "Skill",
+    lora: "LoRA",
+    test: "Test",
+    prompt: "Prompt",
+};
+function StatCard({ label, value, color }) {
+    return (_jsx(Card, { className: "transition-all duration-200 hover:shadow-md", children: _jsxs(CardContent, { className: "p-4 text-center", children: [_jsx("div", { className: cn("text-2xl font-bold", color), children: value }), _jsx("div", { className: "text-xs text-muted-foreground mt-1", children: label })] }) }));
+}
+function RuleCard({ rule }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "p-3 rounded-md border border-border bg-card", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Badge, { variant: "outline", className: "text-xs", children: RULE_TYPE_LABELS[rule.type] ?? rule.type }), _jsx(Badge, { variant: "outline", className: cn("text-xs", ENFORCEMENT_COLORS[rule.enforcement] ?? ""), children: rule.enforcement.toUpperCase() }), _jsx(Badge, { variant: "secondary", className: "text-xs", children: rule.status }), _jsx("span", { className: "text-sm font-medium ml-auto", children: rule.name || rule.id })] }), rule.triggerCondition && (_jsxs("div", { className: "text-xs text-muted-foreground mb-1", children: [_jsxs("span", { className: "font-medium", children: [t("pages:principles.triggerCondition"), ":"] }), " ", rule.triggerCondition] })), rule.action && (_jsxs("div", { className: "text-xs text-muted-foreground", children: [_jsxs("span", { className: "font-medium", children: [t("pages:principles.action"), ":"] }), " ", rule.action] }))] }));
+}
+function PrincipleRow({ principle, expanded, onToggle, detail, detailLoading, isSelected, isBookmarked, onToggleBookmark, selectionMode, isChecked, onToggleCheck }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: cn("border-b border-border last:border-0 transition-colors", isSelected && "bg-accent/70"), children: [_jsxs("div", { className: "flex items-start gap-3 px-4 py-3 cursor-pointer hover:bg-accent/50 transition-colors", role: "button", tabIndex: 0, onClick: selectionMode ? onToggleCheck : onToggle, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    selectionMode ? onToggleCheck() : onToggle();
+                } }, children: [selectionMode && (_jsx("div", { className: "mt-0.5 flex-shrink-0", onClick: (e) => e.stopPropagation(), children: _jsx("button", { onClick: onToggleCheck, className: "text-muted-foreground hover:text-foreground", "aria-label": isChecked ? "Deselect principle" : "Select principle", children: isChecked ? (_jsx(CheckSquare, { className: "h-4 w-4 text-primary" })) : (_jsx(Square, { className: "h-4 w-4" })) }) })), _jsx("div", { className: "mt-0.5 flex-shrink-0", children: expanded ? (_jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap mb-1", children: [_jsx("span", { className: "font-medium text-sm", children: principle.id }), _jsx(Link, { to: `/principles/${principle.id}`, onClick: (e) => e.stopPropagation(), className: "text-muted-foreground hover:text-foreground transition-colors", title: t("pages:principles.viewDetail"), children: _jsx(ExternalLink, { className: "h-3 w-3" }) }), _jsx(Badge, { variant: "outline", className: cn("text-xs", STATUS_COLORS[principle.status]), children: principle.status }), _jsx(Badge, { variant: "outline", className: cn("text-xs", PRIORITY_COLORS[principle.priority]), children: principle.priority }), principle.scope === "domain" && principle.domain && (_jsx(Badge, { variant: "secondary", className: "text-xs", children: principle.domain })), principle.ruleCount > 0 && (_jsxs(Badge, { variant: "secondary", className: "text-xs", children: [_jsx(Shield, { className: "h-3 w-3 mr-1" }), principle.ruleCount, " ", t("pages:principles.rules")] }))] }), _jsx(TruncatedText, { text: principle.text, maxLines: 2, className: "text-xs text-muted-foreground" }), _jsxs("div", { className: "flex items-center gap-4 mt-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 flex-1 min-w-0", children: [_jsxs("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [t("pages:principles.valueScore"), ":"] }), _jsx(ValueScoreBar, { valueScore: principle.valueScore, className: "flex-1" })] }), _jsxs("div", { className: "flex items-center gap-1.5 flex-1 min-w-0", children: [_jsxs("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [t("pages:principles.adherence"), ":"] }), _jsx(AdherenceBar, { adherenceRate: principle.adherenceRate, className: "flex-1" })] }), _jsxs("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [t("pages:principles.painPrevented"), ": ", principle.painPreventedCount] })] })] }), _jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [_jsx("button", { onClick: (e) => { e.stopPropagation(); onToggleBookmark(); }, className: cn("p-1 rounded transition-colors", isBookmarked ? "text-primary" : "text-muted-foreground hover:text-foreground"), title: isBookmarked ? t("pages:principles.removeBookmark") : t("pages:principles.addBookmark"), "aria-label": isBookmarked ? "Remove bookmark" : "Add bookmark", children: isBookmarked ? _jsx(BookmarkCheck, { className: "h-4 w-4" }) : _jsx(Bookmark, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-xs text-muted-foreground", children: principle.updatedAt ? formatDateShort(principle.updatedAt) : "" })] })] }), expanded && (_jsxs("div", { className: "px-4 pb-4 pl-11", children: [detailLoading && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-4 w-64" }), _jsx(Skeleton, { className: "h-20 w-full" })] })), detail && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: [_jsxs("div", { className: cn("p-2 rounded-md", STATUS_BG[principle.status]), children: [_jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:principles.triggerPattern") }), _jsx("div", { className: "text-xs font-medium mt-0.5", children: principle.triggerPattern || "—" })] }), _jsxs("div", { className: cn("p-2 rounded-md", STATUS_BG[principle.status]), children: [_jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:principles.action") }), _jsx("div", { className: "text-xs font-medium mt-0.5", children: principle.action || "—" })] }), _jsxs("div", { className: cn("p-2 rounded-md", STATUS_BG[principle.status]), children: [_jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:principles.evaluability") }), _jsx("div", { className: "text-xs font-medium mt-0.5", children: principle.evaluability })] }), _jsxs("div", { className: cn("p-2 rounded-md", STATUS_BG[principle.status]), children: [_jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:principles.scope") }), _jsxs("div", { className: "text-xs font-medium mt-0.5", children: [principle.scope, principle.domain ? ` / ${principle.domain}` : ""] })] })] }), detail.conflictsWithPrincipleIds.length > 0 && (_jsxs("div", { className: "text-xs text-muted-foreground", children: [t("pages:principles.conflictsWith"), ": ", detail.conflictsWithPrincipleIds.join(", ")] })), detail.rules.length > 0 && (_jsxs("div", { children: [_jsxs("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: [t("pages:principles.associatedRules"), " (", detail.rules.length, ")"] }), _jsx("div", { className: "flex flex-col gap-2", children: detail.rules.map((rule) => (_jsx(RuleCard, { rule: rule }, rule.id))) })] })), detail.rules.length === 0 && (_jsx("div", { className: "text-xs text-muted-foreground italic", children: t("pages:principles.noRules") }))] }))] }))] }));
+}
+function EmptyState({ hasFilters, onClear }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-4", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4", children: hasFilters ? (_jsx(FileSearch, { className: "h-8 w-8 text-muted-foreground" })) : (_jsx(Inbox, { className: "h-8 w-8 text-muted-foreground" })) }), _jsx("h3", { className: "text-lg font-medium mb-2", children: hasFilters ? t("pages:principles.noResults") : t("pages:principles.noPrinciples") }), _jsx("p", { className: "text-sm text-muted-foreground text-center mb-4 max-w-md", children: hasFilters
+                    ? t("pages:principles.noResultsDescription")
+                    : t("pages:principles.noPrinciplesDescription") }), hasFilters && (_jsx(Button, { variant: "outline", onClick: onClear, children: t("common:clear") }))] }));
+}
+export function PrinciplesPage() {
+    const { t } = useTranslation();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [data, setData] = useState(null);
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [searchQuery, setSearchQuery] = useState(() => searchParams.get("search") ?? "");
+    const [statusFilter, setStatusFilter] = useState(() => searchParams.get("status") ?? "all");
+    const [scopeFilter, setScopeFilter] = useState(() => searchParams.get("scope") ?? "all");
+    const [priorityFilter, setPriorityFilter] = useState(() => searchParams.get("priority") ?? "all");
+    const [evaluabilityFilter, setEvaluabilityFilter] = useState(() => searchParams.get("evaluability") ?? "all");
+    const [sortBy, setSortBy] = useState(() => searchParams.get("sort") ?? "valueScore");
+    const [showBookmarkedOnly, setShowBookmarkedOnly] = useState(() => searchParams.get("bookmarked") === "true");
+    const [expandedIds, setExpandedIds] = useState(new Set());
+    const [principleDetails, setPrincipleDetails] = useState({});
+    const [loadingDetails, setLoadingDetails] = useState(new Set());
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const [selectionMode, setSelectionMode] = useState(false);
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const [compareIds, setCompareIds] = useState(null);
+    const searchInputRef = useRef(null);
+    const debouncedSearchQuery = useDebounce(searchQuery, 300);
+    useEffect(() => {
+        const params = new URLSearchParams();
+        if (searchQuery)
+            params.set("search", searchQuery);
+        if (statusFilter !== "all")
+            params.set("status", statusFilter);
+        if (scopeFilter !== "all")
+            params.set("scope", scopeFilter);
+        if (priorityFilter !== "all")
+            params.set("priority", priorityFilter);
+        if (evaluabilityFilter !== "all")
+            params.set("evaluability", evaluabilityFilter);
+        if (sortBy !== "valueScore")
+            params.set("sort", sortBy);
+        if (showBookmarkedOnly)
+            params.set("bookmarked", "true");
+        setSearchParams(params, { replace: true });
+    }, [searchQuery, statusFilter, scopeFilter, priorityFilter, evaluabilityFilter, sortBy, showBookmarkedOnly, setSearchParams]);
+    const { bookmarks, toggleBookmark, isBookmarked } = useBookmarks();
+    useFocusSearch({ enabled: true });
+    const filteredPrinciples = useMemo(() => {
+        if (!data)
+            return [];
+        let items = data.principles;
+        if (statusFilter !== "all") {
+            items = items.filter((p) => p.status === statusFilter);
+        }
+        if (scopeFilter !== "all") {
+            items = items.filter((p) => p.scope === scopeFilter);
+        }
+        if (priorityFilter !== "all") {
+            items = items.filter((p) => p.priority === priorityFilter);
+        }
+        if (evaluabilityFilter !== "all") {
+            items = items.filter((p) => p.evaluability === evaluabilityFilter);
+        }
+        if (showBookmarkedOnly) {
+            items = items.filter((p) => isBookmarked(p.id));
+        }
+        if (debouncedSearchQuery.trim()) {
+            const q = debouncedSearchQuery.toLowerCase();
+            items = items.filter((p) => p.id.toLowerCase().includes(q) ||
+                p.text.toLowerCase().includes(q) ||
+                p.triggerPattern.toLowerCase().includes(q) ||
+                p.action.toLowerCase().includes(q) ||
+                (p.domain ?? "").toLowerCase().includes(q));
+        }
+        items = [...items].sort((a, b) => {
+            switch (sortBy) {
+                case "valueScore":
+                    return b.valueScore - a.valueScore;
+                case "adherenceRate":
+                    return b.adherenceRate - a.adherenceRate;
+                case "painPreventedCount":
+                    return b.painPreventedCount - a.painPreventedCount;
+                case "updatedAt":
+                    return b.updatedAt.localeCompare(a.updatedAt);
+                case "createdAt":
+                    return b.createdAt.localeCompare(a.createdAt);
+                default:
+                    return 0;
+            }
+        });
+        return items;
+    }, [data, statusFilter, scopeFilter, priorityFilter, evaluabilityFilter, debouncedSearchQuery, sortBy, showBookmarkedOnly, isBookmarked]);
+    const { resetSelection } = useKeyboardNavigation({
+        itemCount: filteredPrinciples.length,
+        onSelect: setSelectedIndex,
+        enabled: true,
+    });
+    useEffect(() => {
+        if (selectedIndex >= filteredPrinciples.length) {
+            setSelectedIndex(filteredPrinciples.length - 1);
+        }
+        else if (selectedIndex < 0 && filteredPrinciples.length > 0) {
+            setSelectedIndex(-1);
+        }
+    }, [filteredPrinciples.length]);
+    useEffect(() => {
+        const controller = new AbortController();
+        loadData(controller.signal);
+        return () => controller.abort();
+    }, []);
+    function loadData(signal) {
+        setLoading(true);
+        setError("");
+        fetchPrinciples()
+            .then((result) => {
+            if (signal?.aborted)
+                return;
+            if (result.success && result.data) {
+                setData(result.data);
+            }
+            else if (!result.success) {
+                setError(result.error);
+            }
+        })
+            .catch((err) => {
+            if (signal?.aborted)
+                return;
+            setError(err instanceof Error ? err.message : String(err));
+        })
+            .finally(() => {
+            if (!signal?.aborted)
+                setLoading(false);
+        });
+    }
+    function refreshData() {
+        loadData();
+    }
+    const toggleExpand = useCallback(async (principleId) => {
+        const next = new Set(expandedIds);
+        if (next.has(principleId)) {
+            next.delete(principleId);
+        }
+        else {
+            next.add(principleId);
+            if (!principleDetails[principleId]) {
+                setLoadingDetails((prev) => new Set(prev).add(principleId));
+                try {
+                    const result = await fetchPrincipleDetail(principleId);
+                    if (result.success && result.data) {
+                        setPrincipleDetails((prev) => ({
+                            ...prev,
+                            [principleId]: result.data.principle,
+                        }));
+                    }
+                }
+                catch {
+                    // ignore detail load errors
+                }
+                finally {
+                    setLoadingDetails((prev) => {
+                        const next = new Set(prev);
+                        next.delete(principleId);
+                        return next;
+                    });
+                }
+            }
+        }
+        setExpandedIds(next);
+    }, [expandedIds, principleDetails]);
+    function handleRowClick(principleId) {
+        const index = filteredPrinciples.findIndex((p) => p.id === principleId);
+        if (index !== -1) {
+            setSelectedIndex(index);
+        }
+        toggleExpand(principleId);
+    }
+    function clearFilters() {
+        setSearchQuery("");
+        setStatusFilter("all");
+        setScopeFilter("all");
+        setPriorityFilter("all");
+        setEvaluabilityFilter("all");
+        setSortBy("valueScore");
+        setShowBookmarkedOnly(false);
+        resetSelection();
+        setSearchParams({}, { replace: true });
+    }
+    function toggleSelect(id) {
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }
+    function handleExport() {
+        const exportData = selectionMode && selectedIds.size > 0
+            ? filteredPrinciples.filter((p) => selectedIds.has(p.id))
+            : filteredPrinciples;
+        const json = JSON.stringify(exportData, null, 2);
+        const blob = new Blob([json], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `principles-export-${new Date().toISOString().slice(0, 10)}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    function handleCompare() {
+        const ids = Array.from(selectedIds);
+        if (ids.length === 2) {
+            setCompareIds([ids[0], ids[1]]);
+        }
+    }
+    const hasActiveFilters = statusFilter !== "all" ||
+        scopeFilter !== "all" ||
+        priorityFilter !== "all" ||
+        evaluabilityFilter !== "all" ||
+        searchQuery.trim() !== "" ||
+        showBookmarkedOnly;
+    if (loading && !data) {
+        return (_jsxs("div", { children: [_jsx(Skeleton, { className: "h-8 w-48 mb-6" }), _jsx("div", { className: "flex gap-3 mb-6", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Card, { children: _jsx(CardContent, { className: "p-4", children: _jsx(Skeleton, { className: "h-10 w-20" }) }) }, i))) }), _jsx(Skeleton, { className: "h-10 w-full mb-4" }), _jsx(Skeleton, { className: "h-64 w-full" })] }));
+    }
+    if (error && !data) {
+        return (_jsx(Card, { children: _jsxs(CardContent, { className: "p-6", children: [_jsx("p", { className: "text-destructive", children: error }), _jsx(Button, { variant: "outline", className: "mt-4", onClick: refreshData, children: t("components:errorBoundary.retry") })] }) }));
+    }
+    const summary = data?.summary;
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(PageHeader, { title: t("pages:principles.title"), description: t("pages:principles.description"), onRefresh: refreshData }), summary && (_jsxs("div", { className: "flex gap-3 mb-4 flex-wrap", children: [_jsx(StatCard, { label: t("pages:principles.active"), value: summary.active, color: STATUS_COLORS.active }), _jsx(StatCard, { label: t("pages:principles.candidate"), value: summary.candidate, color: STATUS_COLORS.candidate }), _jsx(StatCard, { label: t("pages:principles.probation"), value: summary.probation, color: STATUS_COLORS.probation }), _jsx(StatCard, { label: t("pages:principles.deprecated"), value: summary.deprecated, color: STATUS_COLORS.deprecated }), _jsx(StatCard, { label: t("pages:principles.total"), value: summary.total, color: "text-foreground" })] })), data && (_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: [_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(CardTitle, { className: "text-xs font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(BarChart3, { className: "h-3.5 w-3.5" }), t("pages:principles.statusDistribution")] }) }), _jsx(CardContent, { children: _jsx(DonutChartWithLegend, { items: [
+                                        { label: t("pages:principles.active"), value: data.summary.active, color: "hsl(147, 50%, 38%)" },
+                                        { label: t("pages:principles.candidate"), value: data.summary.candidate, color: "hsl(45, 93%, 47%)" },
+                                        { label: t("pages:principles.probation"), value: data.summary.probation, color: "hsl(217, 91%, 60%)" },
+                                        { label: t("pages:principles.deprecated"), value: data.summary.deprecated, color: "hsl(0, 84%, 60%)" },
+                                        { label: t("pages:principles.archived"), value: data.summary.archived, color: "hsl(0, 0%, 60%)" },
+                                    ].filter((item) => item.value > 0), size: 100, strokeWidth: 16 }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(CardTitle, { className: "text-xs font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(BarChart3, { className: "h-3.5 w-3.5" }), t("pages:principles.priorityBreakdown")] }) }), _jsx(CardContent, { children: _jsx(HorizontalBarChart, { items: [
+                                        { label: "P0", value: data.principles.filter((p) => p.priority === "P0").length, color: "hsl(0, 84%, 60%)" },
+                                        { label: "P1", value: data.principles.filter((p) => p.priority === "P1").length, color: "hsl(45, 93%, 47%)" },
+                                        { label: "P2", value: data.principles.filter((p) => p.priority === "P2").length, color: "hsl(0, 0%, 60%)" },
+                                    ] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(CardTitle, { className: "text-xs font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(Shield, { className: "h-3.5 w-3.5" }), t("pages:principles.ruleCoverage")] }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground mb-1", children: t("pages:principles.withRules") }), _jsx(CoverageIndicator, { covered: data.principles.filter((p) => p.ruleCount > 0).length, total: data.principles.length })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground mb-1", children: t("pages:principles.avgRulesPerPrinciple") }), _jsx("div", { className: "text-2xl font-bold", children: data.principles.length > 0
+                                                    ? (data.principles.reduce((sum, p) => sum + p.ruleCount, 0) / data.principles.length).toFixed(1)
+                                                    : "0" })] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(CardTitle, { className: "text-xs font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(BarChart3, { className: "h-3.5 w-3.5" }), t("pages:principles.valueDistribution")] }) }), _jsx(CardContent, { children: _jsx(Histogram, { buckets: computeValueBuckets(data.principles) }) })] })] })), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("div", { className: "relative flex-1 min-w-[200px]", children: [_jsx(Search, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" }), _jsx(Input, { ref: searchInputRef, "data-search-input": true, type: "text", placeholder: t("pages:principles.searchPlaceholder"), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-8 pr-10" }), searchQuery && (_jsx("button", { onClick: () => setSearchQuery(""), className: "absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground", children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [t("pages:principles.status"), ":"] }), _jsxs(Select, { value: statusFilter, onValueChange: setStatusFilter, children: [_jsx(SelectTrigger, { className: "h-8 text-xs w-[130px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("pages:principles.allStatuses") }), _jsx(SelectItem, { value: "active", children: "Active" }), _jsx(SelectItem, { value: "candidate", children: "Candidate" }), _jsx(SelectItem, { value: "probation", children: "Probation" }), _jsx(SelectItem, { value: "deprecated", children: "Deprecated" }), _jsx(SelectItem, { value: "archived", children: "Archived" })] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [t("pages:principles.scope"), ":"] }), _jsxs(Select, { value: scopeFilter, onValueChange: setScopeFilter, children: [_jsx(SelectTrigger, { className: "h-8 text-xs w-[110px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("pages:principles.allScopes") }), _jsx(SelectItem, { value: "general", children: "General" }), _jsx(SelectItem, { value: "domain", children: "Domain" })] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [t("pages:principles.priorityBreakdown"), ":"] }), _jsxs(Select, { value: priorityFilter, onValueChange: setPriorityFilter, children: [_jsx(SelectTrigger, { className: "h-8 text-xs w-[100px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("pages:principles.allPriorities") }), _jsx(SelectItem, { value: "P0", children: "P0" }), _jsx(SelectItem, { value: "P1", children: "P1" }), _jsx(SelectItem, { value: "P2", children: "P2" })] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [t("pages:principles.evaluability"), ":"] }), _jsxs(Select, { value: evaluabilityFilter, onValueChange: setEvaluabilityFilter, children: [_jsx(SelectTrigger, { className: "h-8 text-xs w-[140px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("pages:principles.allEvaluabilities") }), _jsx(SelectItem, { value: "deterministic", children: "Deterministic" }), _jsx(SelectItem, { value: "weak_heuristic", children: "Weak Heuristic" }), _jsx(SelectItem, { value: "manual_only", children: "Manual Only" })] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [t("common:sort"), ":"] }), _jsxs(Select, { value: sortBy, onValueChange: setSortBy, children: [_jsx(SelectTrigger, { className: "h-8 text-xs w-[160px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "valueScore", children: t("pages:principles.sortByValue") }), _jsx(SelectItem, { value: "adherenceRate", children: t("pages:principles.sortByAdherence") }), _jsx(SelectItem, { value: "painPreventedCount", children: t("pages:principles.sortByPainPrevented") }), _jsx(SelectItem, { value: "updatedAt", children: t("pages:principles.sortByUpdated") }), _jsx(SelectItem, { value: "createdAt", children: t("pages:principles.sortByCreated") })] })] })] }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "h-4 w-4 mr-1" }), t("common:clear")] }))] }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [_jsxs(Button, { variant: showBookmarkedOnly ? "default" : "outline", size: "sm", onClick: () => setShowBookmarkedOnly(!showBookmarkedOnly), children: [_jsx(Bookmark, { className: "h-3.5 w-3.5 mr-1" }), t("pages:principles.bookmarked"), " (", bookmarks.length, ")"] }), _jsxs(Button, { variant: selectionMode ? "default" : "outline", size: "sm", onClick: () => {
+                                        setSelectionMode(!selectionMode);
+                                        if (selectionMode) {
+                                            setSelectedIds(new Set());
+                                        }
+                                    }, children: [_jsx(CheckSquare, { className: "h-3.5 w-3.5 mr-1" }), t("pages:principles.select")] }), selectionMode && selectedIds.size > 0 && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [selectedIds.size, " ", t("pages:principles.selected")] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleExport, children: [_jsx(Download, { className: "h-3.5 w-3.5 mr-1" }), t("pages:principles.export")] }), selectedIds.size === 2 && (_jsxs(Button, { variant: "outline", size: "sm", onClick: handleCompare, children: [_jsx(GitCompare, { className: "h-3.5 w-3.5 mr-1" }), t("pages:principles.compare")] })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedIds(new Set()), children: t("pages:principles.deselectAll") })] })), !selectionMode && (_jsxs(Button, { variant: "outline", size: "sm", onClick: handleExport, children: [_jsx(Download, { className: "h-3.5 w-3.5 mr-1" }), t("pages:principles.exportAll")] }))] }), _jsx("div", { className: "mt-2 text-xs text-muted-foreground", children: t("pages:principles.keyboardHint") })] }) }), compareIds && data && (_jsx(CompareView, { principles: filteredPrinciples.filter((p) => compareIds.includes(p.id)), onClose: () => {
+                    setCompareIds(null);
+                    setSelectedIds(new Set());
+                } })), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx("div", { className: "flex items-center justify-between", children: _jsxs(CardTitle, { className: "text-sm", children: [t("pages:principles.principleList"), " (", filteredPrinciples.length, ")"] }) }) }), _jsx(CardContent, { className: "p-0 max-h-[calc(100vh-420px)] overflow-y-auto", children: filteredPrinciples.length === 0 ? (_jsx(EmptyState, { hasFilters: hasActiveFilters, onClear: clearFilters })) : (filteredPrinciples.map((p, index) => (_jsx(PrincipleRow, { principle: p, expanded: expandedIds.has(p.id), onToggle: () => handleRowClick(p.id), detail: principleDetails[p.id] ?? null, detailLoading: loadingDetails.has(p.id), isSelected: index === selectedIndex, isBookmarked: isBookmarked(p.id), onToggleBookmark: () => toggleBookmark(p.id), selectionMode: selectionMode, isChecked: selectedIds.has(p.id), onToggleCheck: () => toggleSelect(p.id) }, p.id)))) })] })] }));
+}

package/console/dist/ui/pages/SamplesPage.d.ts

@@ -0,0 +1 @@
+export declare function SamplesPage(): import("react/jsx-runtime").JSX.Element;