@manta-eu/react 0.1.0 → 0.1.2

package/dist/routes/rules/components/RulesOverviewPage.js

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { compactUri } from "@manta-eu/client/shared/rdf-namespaces";
+import { isPresent } from "@manta-eu/lib/present";
+import { useReactTable } from "@tanstack/react-table";
+import { Copy, Eye, FileCode2, Layers, MoreHorizontal, Sparkles } from "lucide-react";
+import { parseAsInteger, parseAsString, parseAsStringEnum, useQueryState } from "nuqs";
+import { useCallback, useEffect, useMemo } from "react";
+import { Link as RouterLink, useLocation, useNavigate } from "react-router";
+import { toast } from "sonner";
+import { useLocalStorage } from "usehooks-ts";
+import { analyzeRuleActionability, } from "./rule-actionability.js";
+import { RuleOwnershipBadge } from "./RuleOwnershipBadge.js";
+import { filterRulesByActionability, filterRulesByQuery, getRuleDisplayName, getRuleDisplayText, getRuleHref, getRuleOwnerName, getRulePreview, getRuleStatus, sortRulesForDisplay, } from "./rules.utils.js";
+import { RuleStatusBadge } from "./RuleStatusBadge.js";
+import { Badge } from "#components/badge/index";
+import { Banner } from "#components/banner/index";
+import { Button } from "#components/button/index";
+import { Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownTrigger } from "#components/dropdown/index";
+import { EmptyState } from "#components/empty-state/index";
+import { FilterSection, FilterSheet } from "#components/filter-sheet/index";
+import { Input } from "#components/input/index";
+import { PageBody } from "#components/layouts/page/index";
+import { Loader } from "#components/loader/index";
+import { PaginationBlock } from "#components/pagination/index";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { createTableConfig, DataTable, TableColumnRearrangePopover, useTableState } from "#components/table/index";
+import { shouldClampPageIndex, useFittedPagination } from "#hooks/useFittedPagination";
+import { cn } from "#lib/utils";
+const tableKey = "rules-overview-table";
+const rulesTableGeometry = {
+    headerRowHeight: 52,
+    rowHeight: 60,
+    reservedHeight: 58,
+};
+const rulesOverviewExplainerStorageKey = "rules-overview-explainer-dismissed";
+const actionabilityFilterValues = ["all", "automatic", "manual"];
+const parseAsActionabilityFilter = parseAsStringEnum([...actionabilityFilterValues]).withDefault("all");
+const statusFilterValues = ["all", "committed", "new", "modified", "deleted"];
+const parseAsStatusFilter = parseAsStringEnum([...statusFilterValues]).withDefault("all");
+const ruleColumnIds = {
+    rule: "rule",
+    actionability: "actionability",
+    plans: "plans",
+    layer: "layer",
+    status: "status",
+    owner: "owner",
+    actions: "actions",
+};
+const defaultColumnOrder = Object.values(ruleColumnIds);
+const defaultSorting = [{ id: ruleColumnIds.layer, desc: true }];
+const ruleColumnLabels = {
+    [ruleColumnIds.rule]: "Rule",
+    [ruleColumnIds.actionability]: "Type",
+    [ruleColumnIds.plans]: "Plans",
+    [ruleColumnIds.layer]: "Layer",
+    [ruleColumnIds.status]: "Status",
+    [ruleColumnIds.owner]: "Owner",
+};
+function RuleActions(props) {
+    const { rule, href } = props;
+    async function handleCopyRule() {
+        try {
+            await navigator.clipboard.writeText(getRuleDisplayText(rule));
+            toast.success("Rule copied to clipboard");
+        }
+        catch (err) {
+            console.error("Failed to copy rule:", err);
+            toast.error("Failed to copy rule");
+        }
+    }
+    return (_jsx("div", { className: "text-right", onClick: (event) => event.stopPropagation(), children: _jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsx(Button, { variant: "tertiary", iconOnly: true, icon: MoreHorizontal, "aria-label": "Rule actions" }) }), _jsx(DropdownContent, { align: "end", className: "z-60", children: _jsxs(DropdownGroup, { children: [_jsx(DropdownItem, { asChild: true, children: _jsxs(RouterLink, { to: href, children: [_jsx(Eye, { size: 16 }), "View"] }) }), _jsx(DropdownItem, { icon: _jsx(Copy, { className: "size-4" }), onClick: () => void handleCopyRule(), children: "Copy rule" })] }) })] }) }));
+}
+function ActionabilityBadge(props) {
+    const { analysis } = props;
+    if (analysis?.isManualActioning) {
+        return (_jsxs(Badge, { variant: "secondary", size: "sm", children: [_jsx(FileCode2, {}), "Manual"] }));
+    }
+    return (_jsxs(Badge, { variant: "info", size: "sm", children: [_jsx(Sparkles, {}), "Automatic"] }));
+}
+export function RulesOverviewPage(props) {
+    const { rules, supportedActionShapes, ownerNameByUserId, tabs, isLoading = false, error } = props;
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [isExplainerDismissed, setIsExplainerDismissed] = useLocalStorage(rulesOverviewExplainerStorageKey, false);
+    const [searchQuery, setSearchQueryRaw] = useQueryState("search", parseAsString.withDefault(""));
+    const [actionabilityFilter, setActionabilityFilterRaw] = useQueryState("type", parseAsActionabilityFilter);
+    const [statusFilter, setStatusFilterRaw] = useQueryState("status", parseAsStatusFilter);
+    const [pageNumberRaw, setPageNumberRaw] = useQueryState("page", parseAsInteger.withDefault(1));
+    const pageIndex = Math.max(0, pageNumberRaw - 1);
+    const setPageIndex = useCallback((value) => {
+        const nextPageIndex = typeof value === "function" ? value(pageIndex) : value;
+        void setPageNumberRaw(Math.max(0, nextPageIndex) + 1);
+    }, [pageIndex, setPageNumberRaw]);
+    const { containerRef, pageSize } = useFittedPagination({
+        ...rulesTableGeometry,
+        pageIndex,
+        onPageIndexChange: setPageIndex,
+    });
+    const { sorting, setSorting, columnFilters, setColumnFilters, columnVisibility, setColumnVisibility, columnOrder, setColumnOrder, rowSelection, setRowSelection, } = useTableState(tableKey, defaultSorting, {
+        defaultPageSize: pageSize,
+        useLocalState: true,
+    });
+    const actionabilityByRuleIri = useMemo(() => {
+        return new Map(rules.map((rule) => [
+            rule.ruleIri,
+            analyzeRuleActionability(getRuleDisplayText(rule), supportedActionShapes ?? [], rule.namedGraphs),
+        ]));
+    }, [rules, supportedActionShapes]);
+    const manualRulesCount = useMemo(() => rules.filter((rule) => actionabilityByRuleIri.get(rule.ruleIri)?.isManualActioning).length, [actionabilityByRuleIri, rules]);
+    const automaticRulesCount = rules.length - manualRulesCount;
+    const filteredRules = useMemo(() => {
+        const searchFilteredRules = filterRulesByQuery(rules, searchQuery);
+        const actionabilityFilteredRules = filterRulesByActionability(searchFilteredRules, actionabilityByRuleIri, actionabilityFilter);
+        const statusFilteredRules = statusFilter === "all"
+            ? actionabilityFilteredRules
+            : actionabilityFilteredRules.filter((rule) => getRuleStatus(rule) === statusFilter);
+        return sortRulesForDisplay(statusFilteredRules);
+    }, [actionabilityByRuleIri, actionabilityFilter, rules, searchQuery, statusFilter]);
+    useEffect(() => {
+        if (!isPresent(columnOrder)) {
+            setColumnOrder(defaultColumnOrder);
+        }
+    }, [columnOrder, setColumnOrder]);
+    const totalPages = Math.ceil(filteredRules.length / pageSize) || 1;
+    useEffect(() => {
+        if (shouldClampPageIndex({ isLoading, pageIndex, totalPages })) {
+            setPageIndex(totalPages - 1);
+        }
+    }, [isLoading, pageIndex, setPageIndex, totalPages]);
+    const columns = useMemo(() => [
+        {
+            id: ruleColumnIds.rule,
+            accessorFn: (rule) => getRuleDisplayName(rule.ruleIri),
+            enableHiding: false,
+            header: ruleColumnLabels[ruleColumnIds.rule],
+            cell: ({ row }) => {
+                const rule = row.original;
+                const href = `${getRuleHref(rule)}${location.search}`;
+                const label = getRuleDisplayName(rule.ruleIri);
+                const compactLabel = compactUri(rule.ruleIri);
+                const preview = getRulePreview(rule);
+                return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1 text-left", children: [_jsx(RouterLink, { to: href, className: "truncate typography-small-medium hover:text-primary", title: compactLabel, children: label }), _jsx("span", { className: "max-w-xl truncate font-mono typography-caption text-muted-foreground", children: preview })] }));
+            },
+        },
+        {
+            id: ruleColumnIds.actionability,
+            accessorFn: (rule) => (actionabilityByRuleIri.get(rule.ruleIri)?.isManualActioning ? "manual" : "automatic"),
+            header: ruleColumnLabels[ruleColumnIds.actionability],
+            cell: ({ row }) => _jsx(ActionabilityBadge, { analysis: actionabilityByRuleIri.get(row.original.ruleIri) }),
+        },
+        {
+            id: ruleColumnIds.plans,
+            accessorFn: (rule) => rule.namedGraphs.length,
+            header: ruleColumnLabels[ruleColumnIds.plans],
+            meta: { type: "number" },
+            cell: ({ row }) => {
+                const count = row.original.namedGraphs.length;
+                return (_jsxs("span", { className: cn("inline-flex items-center gap-1.5", count === 0 && "text-muted-foreground"), children: [_jsx(Layers, { className: "size-3.5" }), count === 0 ? "—" : `${count} ${count === 1 ? "plan" : "plans"}`] }));
+            },
+        },
+        {
+            id: ruleColumnIds.layer,
+            accessorFn: (rule) => rule.stratumIndex ?? -1,
+            header: ruleColumnLabels[ruleColumnIds.layer],
+            meta: { type: "number" },
+            cell: ({ row }) => _jsx("span", { children: row.original.stratumIndex ?? "—" }),
+        },
+        {
+            id: ruleColumnIds.status,
+            accessorFn: (rule) => getRuleStatus(rule),
+            header: ruleColumnLabels[ruleColumnIds.status],
+            cell: ({ row }) => _jsx(RuleStatusBadge, { status: getRuleStatus(row.original) }),
+        },
+        {
+            id: ruleColumnIds.owner,
+            accessorFn: (rule) => getRuleOwnerName(rule, ownerNameByUserId) ?? rule.ownedBy?.type ?? "",
+            header: ruleColumnLabels[ruleColumnIds.owner],
+            cell: ({ row }) => (_jsx(RuleOwnershipBadge, { ownership: row.original.ownedBy ?? null, ownerName: getRuleOwnerName(row.original, ownerNameByUserId) })),
+        },
+        {
+            id: ruleColumnIds.actions,
+            enableHiding: false,
+            enableSorting: false,
+            cell: ({ row }) => _jsx(RuleActions, { rule: row.original, href: `${getRuleHref(row.original)}${location.search}` }),
+        },
+    ], [actionabilityByRuleIri, location.search, ownerNameByUserId]);
+    const table = useReactTable(createTableConfig({
+        data: filteredRules,
+        columns,
+        pagination: { pageIndex, pageSize },
+        setPagination: (updater) => {
+            const nextPagination = typeof updater === "function" ? updater({ pageIndex, pageSize }) : updater;
+            setPageIndex(nextPagination.pageIndex);
+        },
+        columnPinning: {
+            left: [ruleColumnIds.rule],
+            right: [ruleColumnIds.actions],
+        },
+        sorting,
+        setSorting: (updater) => {
+            setSorting(typeof updater === "function" ? updater(sorting) : updater);
+            setPageIndex(0);
+        },
+        columnFilters,
+        setColumnFilters,
+        columnVisibility,
+        setColumnVisibility,
+        columnOrder,
+        setColumnOrder,
+        rowSelection,
+        setRowSelection,
+    }));
+    const activeFilterCount = (isPresent(searchQuery) ? 1 : 0) + (actionabilityFilter !== "all" ? 1 : 0) + (statusFilter !== "all" ? 1 : 0);
+    function resetFilters() {
+        void setSearchQueryRaw("");
+        void setActionabilityFilterRaw("all");
+        void setStatusFilterRaw("all");
+        setPageIndex(0);
+    }
+    function renderTypeSelect(fullWidth = false) {
+        return (_jsxs(Select, { value: actionabilityFilter, onValueChange: (value) => {
+                void setActionabilityFilterRaw(value);
+                setPageIndex(0);
+            }, children: [_jsx(SelectTrigger, { label: "Type", id: fullWidth ? "rules-type-filter-sheet" : "rules-type-filter", hiddenLabel: true, className: fullWidth ? "w-full" : undefined, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectItem, { value: "all", children: ["All types (", rules.length, ")"] }), _jsxs(SelectItem, { value: "automatic", children: ["Automatic (", automaticRulesCount, ")"] }), _jsxs(SelectItem, { value: "manual", children: ["Manual (", manualRulesCount, ")"] })] })] }));
+    }
+    function renderStatusSelect(fullWidth = false) {
+        return (_jsxs(Select, { value: statusFilter, onValueChange: (value) => {
+                void setStatusFilterRaw(value);
+                setPageIndex(0);
+            }, children: [_jsx(SelectTrigger, { label: "Status", id: fullWidth ? "rules-status-filter-sheet" : "rules-status-filter", hiddenLabel: true, className: fullWidth ? "w-full" : undefined, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All statuses" }), _jsx(SelectItem, { value: "committed", children: "Committed" }), _jsx(SelectItem, { value: "new", children: "New" }), _jsx(SelectItem, { value: "modified", children: "Modified" }), _jsx(SelectItem, { value: "deleted", children: "Deleted" })] })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-b border-muted-border px-5 py-6 shrink-0", children: _jsxs("div", { className: "flex flex-col gap-6", children: [!isExplainerDismissed && (_jsx(Banner, { type: "muted", size: "loose", label: "What you're looking at.", description: _jsxs("span", { children: ["Rules are the building blocks: each one observes a signal and proposes a single change. They cluster into ", _jsx("span", { className: "typography-caption-semibold text-default-foreground", children: "action plans" }), ", the strategic playbooks that actually run on a cadence. A rule used in many plans is doing a lot of work for you."] }), onClose: () => setIsExplainerDismissed(true) })), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-3", children: [tabs, _jsx(Input, { containerClassName: "min-w-0 flex-1 sm:w-80 sm:max-w-sm sm:flex-none", type: "search", variant: "search", placeholder: "Search rules...", value: searchQuery, onChange: (event) => {
+                                        void setSearchQueryRaw(event.target.value);
+                                        setPageIndex(0);
+                                    } }), _jsx("div", { className: "sm:hidden", children: _jsxs(FilterSheet, { activeCount: activeFilterCount, onReset: resetFilters, children: [_jsx(FilterSection, { title: "Type", children: _jsx("div", { className: "w-full", children: renderTypeSelect(true) }) }), _jsx(FilterSection, { title: "Status", children: _jsx("div", { className: "w-full", children: renderStatusSelect(true) }) })] }) }), _jsxs("div", { className: "hidden sm:contents", children: [_jsx("div", { className: "w-[180px] shrink-0", children: renderTypeSelect() }), _jsx("div", { className: "w-[160px] shrink-0", children: renderStatusSelect() })] }), _jsx("div", { className: "ml-auto hidden shrink-0 sm:block", children: _jsx(TableColumnRearrangePopover, { enableReset: true, table: table, columnLabels: ruleColumnLabels, defaultOrder: defaultColumnOrder }) })] })] }) }), _jsxs(PageBody, { className: "flex min-h-0 flex-col gap-6", children: [error && _jsx(Banner, { label: error }), _jsx("div", { ref: containerRef, className: "min-h-0 flex-1", children: isLoading ? (_jsx("div", { className: "flex h-full min-h-64 items-center justify-center", children: _jsx(Loader, { className: "size-8" }) })) : !isPresent(filteredRules) ? (_jsx(EmptyState, { icon: FileCode2, title: "No rules found", description: searchQuery ? "No rules match the current filters." : "Rules will appear here once they are available." })) : (_jsxs("div", { className: "grid w-full min-h-0 grid-cols-1 gap-6", children: [_jsx("div", { className: "rounded-xl border border-muted-border bg-card overflow-x-auto overflow-y-hidden", children: _jsx(DataTable, { table: table, isLoading: isLoading, isRowClickable: () => true, onRowClick: (row) => void navigate(`${getRuleHref(row.original)}${location.search}`) }) }), _jsx(PaginationBlock, { currentPageIndex: pageIndex, totalPages: totalPages, onPageChange: setPageIndex, showPageSize: true, pageSize: pageSize, totalCount: filteredRules.length })] })) })] })] }));
+}

package/dist/routes/rules/components/SupportedActionShapesList/SupportedActionShapeDetails.d.ts

@@ -0,0 +1,7 @@
+import type { GQLSupportedActionShape } from "@manta-eu/client";
+type SupportedActionShapeDetailsProps = {
+    shape: GQLSupportedActionShape | null;
+};
+export declare function SupportedActionShapeDetails(props: SupportedActionShapeDetailsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SupportedActionShapeDetails.d.ts.map

package/dist/routes/rules/components/SupportedActionShapesList/SupportedActionShapeDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportedActionShapeDetails.d.ts","sourceRoot":"","sources":["../../../../../src/routes/rules/components/SupportedActionShapesList/SupportedActionShapeDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAahE,KAAK,gCAAgC,GAAG;IACtC,KAAK,EAAE,uBAAuB,GAAG,IAAI,CAAC;CACvC,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,2CA4ElF"}

package/dist/routes/rules/components/SupportedActionShapesList/SupportedActionShapeDetails.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { compactUri } from "@manta-eu/client/shared/rdf-namespaces";
+import { isPresent } from "@manta-eu/lib/present";
+import { buildShaclShapeQuery } from "@manta-eu/rdf-lib/shacl-shape-query";
+import { useMemo } from "react";
+import { match, P } from "ts-pattern";
+import { formatCount, isRequired, parseShaclShapeGraph } from "./shacl-shape.js";
+import { TokenList } from "./TokenList.js";
+import { Graph } from "#components/graph/index";
+import { Loader } from "#components/loader/index";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "#components/table/index";
+import { useSparqlConstruct } from "#ldo-ui";
+export function SupportedActionShapeDetails(props) {
+    const { shape } = props;
+    const shapeQuery = useMemo(() => (shape ? buildShaclShapeQuery(shape.actionShape) : ""), [shape]);
+    const { data: graph, isLoading, error, } = useSparqlConstruct({
+        query: shapeQuery,
+        queryKey: ["supported-action-shape-shacl", shape?.actionShape],
+        enabled: isPresent(shape),
+        keepPreviousData: true,
+    });
+    const summary = useMemo(() => (shape && graph ? parseShaclShapeGraph(graph, shape.actionShape) : null), [graph]);
+    return match(shape)
+        .with(null, () => _jsx("div", { className: "rounded-lg border border-muted-border bg-background p-4" }))
+        .otherwise((currentShape) => (_jsxs("div", { className: "min-w-0 rounded-lg border border-muted-border bg-background", children: [_jsxs("div", { className: "border-b border-muted-border p-4", children: [_jsx("p", { className: "break-all font-mono typography-small-medium", children: compactUri(currentShape.actionShape) }), _jsxs("div", { className: "mt-3 flex flex-wrap gap-2 gap-x-4", children: [summary && _jsx(LabeledTokens, { label: "Target Classes", values: summary.targetClasses.map(compactUri) }), _jsx(LabeledTokens, { label: "RDF Types", values: currentShape.rdfTypes.map(compactUri) }), _jsx(LabeledTokens, { label: "Operations", values: currentShape.operations })] })] }), match({ isLoading, error })
+                .with({ isLoading: true }, () => (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx(Loader, { className: "size-8" }) })))
+                .with({ error: P.nonNullable }, ({ error }) => (_jsxs("div", { className: "p-4", children: [_jsx("p", { className: "typography-body text-error-foreground", children: "Error loading SHACL definition" }), _jsx("p", { className: "typography-small text-muted-foreground", children: error instanceof Error ? error.message : "Failed to load SHACL definition" })] })))
+                .otherwise(() => match(summary)
+                .with(null, () => (_jsx("div", { className: "p-4", children: _jsx("p", { className: "typography-body text-muted-foreground", children: "No SHACL definition found" }) })))
+                .with({ nodeCount: 0 }, () => (_jsx("div", { className: "p-4", children: _jsx("p", { className: "typography-body text-muted-foreground", children: "No SHACL definition found" }) })))
+                .otherwise((currentSummary) => (_jsxs("div", { className: "space-y-4 p-4 pt-0", children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(MetricBlock, { label: "Nodes", value: currentSummary.nodeCount.toString() }), _jsx(MetricBlock, { label: "Triples", value: currentSummary.tripleCount.toString() })] }), _jsx(PropertyConstraintsTable, { properties: currentSummary.properties }), graph && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-muted-border", children: [_jsx("div", { className: "border-b border-muted-border px-3 py-2 typography-small-medium", children: "Graph" }), _jsx("div", { className: "h-120", children: _jsx(Graph, { graph: graph, fullHeight: true }) })] }))] }))))] })));
+}
+function PropertyConstraintsTable(props) {
+    const { properties } = props;
+    if (!isPresent(properties)) {
+        return _jsx("p", { className: "typography-body text-muted-foreground", children: "No property constraints found" });
+    }
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Property" }), _jsx(TableHead, { children: "Required" }), _jsx(TableHead, { children: "Count" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { children: "Description" })] }) }), _jsx(TableBody, { children: properties.map((property) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "whitespace-normal", children: _jsxs("div", { className: "flex min-w-48 flex-col gap-1", children: [property.name && _jsx("span", { className: "typography-small-medium", children: property.name }), _jsx("span", { className: "break-all font-mono typography-small text-muted-foreground", children: compactUri(property.path) })] }) }), _jsx(TableCell, { children: isRequired(property) ? "Yes" : "No" }), _jsx(TableCell, { children: formatCount(property) }), _jsx(TableCell, { className: "whitespace-normal", children: _jsx(TokenList, { values: property.valueTypes.map(compactUri) }) }), _jsx(TableCell, { className: "max-w-64 whitespace-normal text-muted-foreground", children: property.description || "-" })] }, property.nodeId))) })] }));
+}
+function LabeledTokens(props) {
+    const { values, label } = props;
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "typography-small-medium text-muted-foreground", children: label }), _jsx(TokenList, { values: values })] }));
+}
+function MetricBlock(props) {
+    const { label, value } = props;
+    return (_jsxs("div", { className: "rounded-lg border border-muted-border bg-muted/40 px-3 py-2", children: [_jsx("p", { className: "typography-small text-muted-foreground", children: label }), _jsx("p", { className: "typography-body-medium", children: value })] }));
+}

package/dist/routes/rules/components/SupportedActionShapesList/SupportedActionShapesList.d.ts

@@ -0,0 +1,8 @@
+import type { GQLSupportedActionShape } from "@manta-eu/client";
+export type SupportedActionShapesListProps = {
+    actionShapes: GQLSupportedActionShape[];
+    isLoading: boolean;
+    error?: string | null;
+};
+export declare function SupportedActionShapesList(props: SupportedActionShapesListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SupportedActionShapesList.d.ts.map

package/dist/routes/rules/components/SupportedActionShapesList/SupportedActionShapesList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportedActionShapesList.d.ts","sourceRoot":"","sources":["../../../../../src/routes/rules/components/SupportedActionShapesList/SupportedActionShapesList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAahE,MAAM,MAAM,8BAA8B,GAAG;IAC3C,YAAY,EAAE,uBAAuB,EAAE,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAmBF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,2CAuG9E"}

package/dist/routes/rules/components/SupportedActionShapesList/SupportedActionShapesList.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { compactUri } from "@manta-eu/client/shared/rdf-namespaces";
+import { isPresent } from "@manta-eu/lib/present";
+import { useReactTable } from "@tanstack/react-table";
+import { Check } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { match, P } from "ts-pattern";
+import { SupportedActionShapeDetails } from "./SupportedActionShapeDetails.js";
+import { TokenList } from "./TokenList.js";
+import { Loader } from "#components/loader/index";
+import { ScrollArea } from "#components/scroll-area/index";
+import { createTableConfig, DataTable } from "#components/table/index";
+function OpCheck(props) {
+    const { active } = props;
+    if (!active) {
+        return (_jsx("span", { "aria-label": "Not supported", className: "text-muted-foreground", children: "\u2014" }));
+    }
+    return _jsx(Check, { className: "size-4 text-default-foreground", "aria-label": "Supported" });
+}
+export function SupportedActionShapesList(props) {
+    const { actionShapes, isLoading, error } = props;
+    const [selectedShape, setSelectedShape] = useState(actionShapes[0] ?? null);
+    const [sorting, setSorting] = useState([]);
+    useEffect(() => {
+        if (isPresent(actionShapes) && !selectedShape) {
+            setSelectedShape(actionShapes[0]);
+        }
+    }, [actionShapes, selectedShape]);
+    const columns = useMemo(() => [
+        {
+            id: "actionShape",
+            accessorFn: (row) => compactUri(row.actionShape),
+            header: "Action Shape",
+            cell: ({ row }) => (_jsx("span", { title: row.original.actionShape, className: "font-mono typography-small whitespace-normal break-all", children: compactUri(row.original.actionShape) })),
+        },
+        {
+            id: "rdfTypes",
+            accessorFn: (row) => row.rdfTypes.map(compactUri).join(","),
+            header: "RDF Types",
+            cell: ({ row }) => (_jsx("div", { className: "whitespace-normal", children: _jsx(TokenList, { values: row.original.rdfTypes.map(compactUri) }) })),
+        },
+        {
+            id: "create",
+            accessorFn: (row) => (row.supportsCreate ? 1 : 0),
+            sortingFn: "basic",
+            header: "Create",
+            cell: ({ row }) => _jsx(OpCheck, { active: row.original.supportsCreate }),
+        },
+        {
+            id: "update",
+            accessorFn: (row) => (row.supportsUpdate ? 1 : 0),
+            sortingFn: "basic",
+            header: "Update",
+            cell: ({ row }) => _jsx(OpCheck, { active: row.original.supportsUpdate }),
+        },
+        {
+            id: "delete",
+            accessorFn: (row) => (row.supportsDelete ? 1 : 0),
+            sortingFn: "basic",
+            header: "Delete",
+            cell: ({ row }) => _jsx(OpCheck, { active: row.original.supportsDelete }),
+        },
+    ], []);
+    const table = useReactTable(createTableConfig({
+        data: actionShapes,
+        columns,
+        sorting,
+        setSorting,
+        pagination: { pageIndex: 0, pageSize: isPresent(actionShapes) ? actionShapes.length : 1 },
+    }));
+    return match({ error, isLoading, actionShapes })
+        .with({ error: P.nonNullable }, ({ error }) => (_jsx("div", { className: "flex flex-1 items-center justify-center p-8", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "typography-body text-error-foreground", children: "Error loading action shapes" }), _jsx("p", { className: "typography-small text-muted-foreground", children: error })] }) })))
+        .with({ isLoading: true }, () => (_jsx("div", { className: "flex flex-1 items-center justify-center", children: _jsx(Loader, { className: "size-8" }) })))
+        .with({ actionShapes: P.when((shapes) => !isPresent(shapes)) }, () => (_jsx("div", { className: "flex flex-1 items-center justify-center p-8", children: _jsx("p", { className: "typography-body text-muted-foreground", children: "No supported action shapes found" }) })))
+        .otherwise(() => (_jsx(ScrollArea, { className: "flex-1 h-full min-h-0", children: _jsxs("div", { className: "grid flex-1 min-h-0 grid-cols-1 gap-4 overflow-auto p-4 xl:grid-cols-[minmax(0,1fr)_minmax(420px,0.9fr)]", children: [_jsx("div", { className: "min-w-0", children: _jsx(DataTable, { table: table, onRowClick: (row) => setSelectedShape(row.original), rowClassName: (row) => row.original.actionShape === selectedShape?.actionShape ? "bg-muted/70" : undefined }) }), _jsx(SupportedActionShapeDetails, { shape: selectedShape })] }) })));
+}

package/dist/routes/rules/components/SupportedActionShapesList/TokenList.d.ts

@@ -0,0 +1,6 @@
+type TokenListProps = {
+    values: string[];
+};
+export declare function TokenList(props: TokenListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TokenList.d.ts.map

package/dist/routes/rules/components/SupportedActionShapesList/TokenList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenList.d.ts","sourceRoot":"","sources":["../../../../../src/routes/rules/components/SupportedActionShapesList/TokenList.tsx"],"names":[],"mappings":"AAGA,KAAK,cAAc,GAAG;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAc9C"}

package/dist/routes/rules/components/SupportedActionShapesList/TokenList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Badge } from "#components/badge/index";
+export function TokenList(props) {
+    if (!isPresent(props.values)) {
+        return _jsx("span", { className: "text-muted-foreground", children: "-" });
+    }
+    return (_jsx("div", { className: "flex flex-wrap gap-1.5", children: props.values.map((value) => (_jsx(Badge, { size: "sm", variant: "secondary", children: value }, value))) }));
+}

package/dist/routes/rules/components/SupportedActionShapesList/index.d.ts

@@ -0,0 +1,2 @@
+export { SupportedActionShapesList, type SupportedActionShapesListProps } from "./SupportedActionShapesList.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/routes/rules/components/SupportedActionShapesList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/routes/rules/components/SupportedActionShapesList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,KAAK,8BAA8B,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/routes/rules/components/SupportedActionShapesList/index.js

@@ -0,0 +1 @@
+export { SupportedActionShapesList } from "./SupportedActionShapesList.js";

package/dist/routes/rules/components/SupportedActionShapesList/shacl-shape.d.ts

@@ -0,0 +1,20 @@
+import type { RdfGraph } from "#ldo-ui";
+export type PropertyConstraint = {
+    nodeId: string;
+    path: string;
+    name?: string;
+    description?: string;
+    minCount?: string;
+    maxCount?: string;
+    valueTypes: string[];
+};
+export type ShaclShapeSummary = {
+    targetClasses: string[];
+    properties: PropertyConstraint[];
+    nodeCount: number;
+    tripleCount: number;
+};
+export declare function parseShaclShapeGraph(graph: RdfGraph, shapeIri: string): ShaclShapeSummary;
+export declare function isRequired(property: PropertyConstraint): boolean;
+export declare function formatCount(property: PropertyConstraint): string;
+//# sourceMappingURL=shacl-shape.d.ts.map

package/dist/routes/rules/components/SupportedActionShapesList/shacl-shape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shacl-shape.d.ts","sourceRoot":"","sources":["../../../../../src/routes/rules/components/SupportedActionShapesList/shacl-shape.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,GAAG,iBAAiB,CAWzF;AAED,wBAAgB,UAAU,CAAC,QAAQ,EAAE,kBAAkB,GAAG,OAAO,CAEhE;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,kBAAkB,GAAG,MAAM,CAEhE"}

package/dist/routes/rules/components/SupportedActionShapesList/shacl-shape.js

@@ -0,0 +1,48 @@
+import { compactUri, sh } from "@manta-eu/client/shared/rdf-namespaces";
+export function parseShaclShapeGraph(graph, shapeIri) {
+    const propertyNodes = getTerms(graph, shapeIri, sh.property).map((term) => term.value);
+    return {
+        targetClasses: getTerms(graph, shapeIri, sh.targetClass).map((term) => term.value),
+        properties: propertyNodes
+            .map((nodeId) => parsePropertyConstraint(graph, nodeId))
+            .sort((a, b) => compactUri(a.path).localeCompare(compactUri(b.path))),
+        nodeCount: graph.size,
+        tripleCount: countTriples(graph),
+    };
+}
+export function isRequired(property) {
+    return Number(property.minCount ?? 0) > 0;
+}
+export function formatCount(property) {
+    return `${property.minCount ?? "0"}..${property.maxCount ?? "*"}`;
+}
+function parsePropertyConstraint(graph, nodeId) {
+    return {
+        nodeId,
+        path: firstTermValue(graph, nodeId, sh.path) ?? nodeId,
+        name: firstTermValue(graph, nodeId, sh.name),
+        description: firstTermValue(graph, nodeId, sh.description),
+        minCount: firstTermValue(graph, nodeId, sh.minCount),
+        maxCount: firstTermValue(graph, nodeId, sh.maxCount),
+        valueTypes: [
+            ...getTerms(graph, nodeId, sh.datatype).map((term) => term.value),
+            ...getTerms(graph, nodeId, sh.class).map((term) => term.value),
+            ...getTerms(graph, nodeId, sh.node).map((term) => term.value),
+        ],
+    };
+}
+function getTerms(graph, subject, predicate) {
+    return graph.get(subject)?.get(predicate) ?? [];
+}
+function firstTermValue(graph, subject, predicate) {
+    return getTerms(graph, subject, predicate)[0]?.value;
+}
+function countTriples(graph) {
+    let count = 0;
+    for (const predicates of graph.values()) {
+        for (const terms of predicates.values()) {
+            count += terms.length;
+        }
+    }
+    return count;
+}

package/dist/routes/rules/components/datalog-editor/BindingsPreview.d.ts

@@ -0,0 +1,9 @@
+import { type DatalogRule } from "@manta-eu/datalog-parser";
+import { type ComponentProps } from "react";
+export type BindingsPreviewProps = ComponentProps<"div"> & {
+    ast: DatalogRule | null;
+    prefixes?: Record<string, string>;
+    limit?: number;
+};
+export declare const BindingsPreview: import("react").ForwardRefExoticComponent<Omit<BindingsPreviewProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BindingsPreview.d.ts.map

package/dist/routes/rules/components/datalog-editor/BindingsPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BindingsPreview.d.ts","sourceRoot":"","sources":["../../../../../src/routes/rules/components/datalog-editor/BindingsPreview.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvF,OAAO,EAAkC,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5E,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD,GAAG,EAAE,WAAW,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,eAAe,8HA0F1B,CAAC"}

package/dist/routes/rules/components/datalog-editor/BindingsPreview.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { namespaces } from "@manta-eu/client/shared/rdf-namespaces";
+import { datalogBodyToSparqlSelect } from "@manta-eu/datalog-parser";
+import { isPresent } from "@manta-eu/lib/present";
+import { AlertCircle } from "lucide-react";
+import { forwardRef, useEffect, useMemo } from "react";
+import { useDebounceValue } from "usehooks-ts";
+import { useSparqlQueryExecution } from "../../hooks/useSparqlQueryExecution.js";
+import { Skeleton } from "#components/skeleton/index";
+import { cn } from "#lib/utils";
+export const BindingsPreview = forwardRef(function BindingsPreview(props, ref) {
+    const { ast, prefixes = namespaces, limit = 5, className, ...restProps } = props;
+    const [debouncedAst] = useDebounceValue(ast, 500);
+    const { sparqlQuery, variables } = useMemo(() => {
+        if (!debouncedAst || !isPresent(debouncedAst.body)) {
+            return { sparqlQuery: null, variables: [] };
+        }
+        try {
+            const result = datalogBodyToSparqlSelect(debouncedAst.body, prefixes);
+            return {
+                sparqlQuery: `${result.query.trim()}\nLIMIT ${limit}`,
+                variables: result.variables || [],
+            };
+        }
+        catch {
+            return { sparqlQuery: null, variables: [] };
+        }
+    }, [debouncedAst, prefixes, limit]);
+    const { executeQuery, isLoading, error, results } = useSparqlQueryExecution();
+    useEffect(() => {
+        if (sparqlQuery) {
+            void executeQuery(sparqlQuery);
+        }
+    }, [sparqlQuery, executeQuery]);
+    return (_jsxs("div", { ref: ref, className: cn("border rounded-lg overflow-hidden", className), ...restProps, children: [_jsx("div", { className: "bg-muted/30 px-4 py-2 border-b", children: _jsx("h4", { className: "typography-caption text-muted-foreground", children: "Variable Bindings Preview" }) }), _jsx("div", { className: "p-4", children: !sparqlQuery ? (_jsx("p", { className: "typography-small text-muted-foreground", children: debouncedAst
+                        ? "Add body formulas to see variable bindings"
+                        : "Enter a valid rule to see variable bindings" })) : isLoading ? (_jsxs("div", { className: "space-y-3", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-8 w-3/4" }), _jsx(Skeleton, { className: "h-8 w-5/6" })] })) : error ? (_jsxs("div", { className: "flex items-start gap-2 text-error-foreground", children: [_jsx(AlertCircle, { className: "size-4 mt-0.5 shrink-0" }), _jsx("p", { className: "typography-small", children: error })] })) : results && isPresent(results.bindings) ? (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: variables.map((varName) => (_jsxs("div", { className: "px-2 py-1 bg-primary/10 text-primary rounded typography-small", children: ["?", varName] }, varName))) }), _jsx("div", { className: "space-y-2", children: results.bindings.slice(0, limit).map((binding, index) => (_jsx("div", { className: "p-2 bg-muted/20 rounded-md border border-muted", children: _jsx("div", { className: "grid grid-cols-1 gap-1", children: Object.entries(binding).map(([key, value]) => (_jsxs("div", { className: "flex gap-2", children: [_jsxs("span", { className: "typography-small text-muted-foreground", children: ["?", key, ":"] }), _jsx("span", { className: "typography-small font-mono break-all", children: value })] }, key))) }) }, index))) }), results.bindings.length > limit && (_jsxs("p", { className: "typography-small text-muted-foreground text-center", children: ["Showing ", limit, " of ", results.bindings.length, " bindings"] }))] })) : (_jsx("p", { className: "typography-small text-muted-foreground", children: "No bindings found for the current rule" })) })] }));
+});

package/dist/routes/rules/components/datalog-editor/FactsPreview.d.ts

@@ -0,0 +1,10 @@
+import type { DatalogRule } from "@manta-eu/datalog-parser";
+import { type ComponentProps } from "react";
+export type FactsPreviewProps = ComponentProps<"div"> & {
+    rule: string;
+    ast: DatalogRule | null;
+    prefixes?: Record<string, string>;
+    sampleLimit?: number;
+};
+export declare const FactsPreview: import("react").ForwardRefExoticComponent<Omit<FactsPreviewProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FactsPreview.d.ts.map

package/dist/routes/rules/components/datalog-editor/FactsPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FactsPreview.d.ts","sourceRoot":"","sources":["../../../../../src/routes/rules/components/datalog-editor/FactsPreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AASlE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,WAAW,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAeF,eAAO,MAAM,YAAY,2HAiIvB,CAAC"}