@_linked/shape-ui 2.0.0 → 2.3.0

package/lib/esm/components/InstanceOverview.js

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDataManagerHost } from '../hostContext.js';
+import { getNodeDisplay } from '../shape/nodeDisplay.js';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ImageThumb from '@_linked/primitives/components/ImageThumb';
+import { NodeBadge } from './NodeBadge.js';
+import style from './InstanceOverview.module.css';
+import ReactTable from './ReactTable.js';
+function InstanceOverview({ customColumns, instances, totalCount, properties, shape, isLoading = false, config, setConfig, onSelectionChange, isPickMode = false, pickMaxCount, pickAlreadySelected, deletionProjectId, previewDeletion, executeDeletion, onInstancesDeleted, onBatchUpdate, tableMode, onTableModeChange, }) {
+    // Pick mode is a host flow: the host knows where the picker was opened from and what to
+    // do with the choice. This component only knows that a choice was made.
+    //
+    // There is no fallback. The fallback was CN's sessionStorage-plus-router round trip,
+    // which is exactly the app-specific knowledge that has no business in a component meant
+    // to run inside someone else's app — and holding on to it kept `routes.tsx` in the
+    // import graph, which drags in the whole application.
+    const host = useDataManagerHost();
+    const handlePickInstance = (instance) => { var _a; return (_a = host.picking) === null || _a === void 0 ? void 0 : _a.select([instance]); };
+    const handlePickInstances = (instances) => { var _a; return (_a = host.picking) === null || _a === void 0 ? void 0 : _a.select(instances); };
+    // URI-based selection — stable across sort/filter/pagination
+    const [selectedUris, setSelectedUris] = useState(new Set());
+    const toggleSelectAll = useCallback(() => {
+        setSelectedUris((prev) => {
+            if (prev.size > 0) {
+                // Deselect all
+                return new Set();
+            }
+            // Select all visible instances
+            const allUris = new Set();
+            instances.forEach((inst) => {
+                if (inst === null || inst === void 0 ? void 0 : inst.id)
+                    allUris.add(inst.id);
+            });
+            return allUris;
+        });
+    }, [instances]);
+    const toggleRowSelection = useCallback((uri) => {
+        setSelectedUris((prev) => {
+            const next = new Set(prev);
+            if (next.has(uri)) {
+                next.delete(uri);
+            }
+            else {
+                next.add(uri);
+            }
+            return next;
+        });
+    }, []);
+    const isRowSelected = useCallback((uri) => selectedUris.has(uri), [selectedUris]);
+    const clearSelection = useCallback(() => {
+        setSelectedUris(new Set());
+    }, []);
+    // Remove succeeded URIs from selection after batch ops
+    const removeFromSelection = useCallback((uris) => {
+        setSelectedUris((prev) => {
+            const next = new Set(prev);
+            for (const uri of uris)
+                next.delete(uri);
+            return next;
+        });
+    }, []);
+    const hasSelection = selectedUris.size > 0;
+    // Pre-select rows matching pickAlreadySelected when data loads
+    const preSelectDone = useRef(false);
+    useEffect(() => {
+        if (preSelectDone.current || !isPickMode || !(pickAlreadySelected === null || pickAlreadySelected === void 0 ? void 0 : pickAlreadySelected.length) || !(instances === null || instances === void 0 ? void 0 : instances.length))
+            return;
+        preSelectDone.current = true;
+        const alreadyIds = new Set(pickAlreadySelected.map((a) => a.id));
+        const matching = new Set();
+        instances.forEach((inst) => {
+            if ((inst === null || inst === void 0 ? void 0 : inst.id) && alreadyIds.has(inst.id))
+                matching.add(inst.id);
+        });
+        if (matching.size > 0) {
+            setSelectedUris(matching);
+        }
+    }, [instances, isPickMode, pickAlreadySelected]);
+    const [_config, _setConfig] = useState(config || {
+        pageIndex: 0,
+        pageSize: 10,
+        filters: [],
+    });
+    // Config state can be handled by the parent or here. When the parent owns it, `config` is
+    // the live value and `_config` is only the initial snapshot — so the table must read
+    // `config` when present, or a parent-driven page change (server-side pagination) would
+    // never reach it.
+    const __setConfig = setConfig || _setConfig;
+    const handleNodeClick = (nodeValue, propertyName) => {
+        var _a;
+        // Get the property details to access valueShape
+        const property = properties[propertyName];
+        if (property && property.valueShape && nodeValue.id) {
+            // Navigate to the view page for this node
+            (_a = host.navigate) === null || _a === void 0 ? void 0 : _a.toInstance(property.valueShape.id, nodeValue.id);
+        }
+    };
+    // Notify parent when selection changes (chatbot integration)
+    useEffect(() => {
+        if (onSelectionChange) {
+            const selectedInstances = instances.filter((inst) => (inst === null || inst === void 0 ? void 0 : inst.id) && selectedUris.has(inst.id));
+            onSelectionChange(Array.from(selectedUris).map((uri) => instances.findIndex((inst) => (inst === null || inst === void 0 ? void 0 : inst.id) === uri)).filter((i) => i >= 0), selectedInstances);
+        }
+    }, [selectedUris]);
+    let initialColumns = [
+        {
+            id: 'selection',
+            cell: ({ row }) => {
+                var _a;
+                return (_jsx("input", { type: "hidden", onChange: () => { var _a; return toggleRowSelection((_a = row.original) === null || _a === void 0 ? void 0 : _a.id); }, checked: isRowSelected((_a = row.original) === null || _a === void 0 ? void 0 : _a.id) }));
+            },
+        },
+    ];
+    let columnConfig;
+    const cell = (info) => {
+        console.log('info cell', info);
+        return info.getValue();
+    };
+    if (customColumns) {
+        columnConfig = customColumns.map((config) => {
+            return {
+                id: config.label || config.property.label,
+                accessorKey: config.label || config.property.label,
+                cell: cell,
+                accessorFn: config.renderCell,
+            };
+        });
+        initialColumns.push(...columnConfig);
+    }
+    else {
+        //dynamically define the columns based on the properties of the shape
+        Object.entries(properties || {}).forEach(([propLabel, propShape]) => {
+            //skip rdf:type
+            if (propShape.id === 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type') {
+                return;
+            }
+            columnConfig = {
+                id: propShape.id,
+                // accessorFn, NOT accessorKey: TanStack reads a key as a deep PATH, so a property
+                // labelled "Avg. basket" was looked up as row["Avg"][" basket"] and rendered blank
+                // while every other column on the same row was fine. Labels are written by people and
+                // routinely contain a dot; reading the row directly removes the trap.
+                accessorFn: (row) => row === null || row === void 0 ? void 0 : row[propLabel],
+                cell: (info) => {
+                    let value = info.getValue();
+                    const parseLiteral = (value) => {
+                        let literalText;
+                        if (value instanceof Date) {
+                            literalText = value.toLocaleString();
+                        }
+                        else if (typeof value === 'boolean') {
+                            literalText = value ? 'Yes' : 'No';
+                        }
+                        else if (typeof value === 'number') {
+                            literalText = value.toString();
+                        }
+                        else if (typeof value === 'string') {
+                            literalText = value;
+                        }
+                        else {
+                            literalText = value;
+                        }
+                        return _jsx("span", { className: style.literal, children: literalText });
+                    };
+                    const isNode = (value) => {
+                        return value && typeof value === 'object' && value.id;
+                    };
+                    const parseValue = (value, forceLiteral = false) => {
+                        // Handle ImageObject (has contentUrl)
+                        if (value && typeof value === 'object' && value.contentUrl) {
+                            return _jsx(ImageThumb, { src: value.contentUrl, size: 32, alt: value.label || propLabel, clickToEnlarge: true });
+                        }
+                        if (isNode(value)) {
+                            const images = value.image;
+                            const firstImage = Array.isArray(images) ? images[0] : images;
+                            if (firstImage) {
+                                const imgSrc = typeof firstImage === 'object' && firstImage.contentUrl
+                                    ? String(firstImage.contentUrl)
+                                    : String(firstImage);
+                                return _jsx(ImageThumb, { src: imgSrc, size: 32, alt: value.label || propLabel, clickToEnlarge: true });
+                            }
+                            let identifier;
+                            const otherProperties = Object.keys(value).filter(key => key !== 'id');
+                            if (otherProperties.length > 0) {
+                                for (const property of otherProperties) {
+                                    if (value[property]) {
+                                        identifier = value[property];
+                                        break;
+                                    }
+                                }
+                            }
+                            if (!identifier) {
+                                identifier = getNodeDisplay(value);
+                            }
+                            return forceLiteral ? (identifier) : (_jsx(NodeBadge, { text: identifier, onClick: () => handleNodeClick(value, propLabel), clickable: true }));
+                        }
+                        return parseLiteral(value);
+                    };
+                    if (Array.isArray(value)) {
+                        const maxValues = 3;
+                        const valuesToShow = value.slice(0, maxValues);
+                        const leftOver = value.length - maxValues;
+                        if (leftOver > 0) {
+                            const title = `${leftOver} more values: ${value
+                                .slice(maxValues)
+                                .map((val) => parseValue(val, true))
+                                .join(', ')}`;
+                            valuesToShow.push(_jsx(NodeBadge, { text: `(${leftOver}...)`, title: title, clickable: false }));
+                        }
+                        return valuesToShow.map((val, index) => {
+                            const parsed = parseValue(val);
+                            const isCurrentLiteral = !isNode(val) && !React.isValidElement(val);
+                            const nextVal = valuesToShow[index + 1];
+                            const isNextLiteral = nextVal && !isNode(nextVal) && !React.isValidElement(nextVal);
+                            const needsComma = isCurrentLiteral && isNextLiteral;
+                            return (_jsxs(React.Fragment, { children: [parsed, needsComma ? ', ' : ' '] }, index));
+                        });
+                    }
+                    else {
+                        return parseValue(value);
+                    }
+                },
+                header: propLabel
+                    .replace(/([A-Z])/g, ' $1')
+                    .replace(/_/g, ' ')
+                    .replace(/^./, (char) => char.toUpperCase()),
+                footer: (props) => props.column.id,
+            };
+            initialColumns.push(columnConfig);
+        });
+    }
+    const columns = React.useMemo(() => initialColumns, [properties]);
+    return (_jsx(ReactTable, { data: instances, columns: columns, toggleSelectAll: toggleSelectAll, isRowSelected: isRowSelected, selectedUris: selectedUris, toggleRowSelection: toggleRowSelection, clearSelection: clearSelection, removeFromSelection: removeFromSelection, hasSelection: hasSelection, config: config || _config, setConfig: __setConfig, totalCount: totalCount, shape: shape, properties: properties, isLoading: isLoading, isPickMode: isPickMode, onPickInstance: handlePickInstance, onPickInstances: handlePickInstances, pickMaxCount: pickMaxCount, pickAlreadySelected: pickAlreadySelected, deletionProjectId: deletionProjectId, previewDeletion: previewDeletion, executeDeletion: executeDeletion, onInstancesDeleted: onInstancesDeleted, onBatchUpdate: onBatchUpdate, tableMode: tableMode, onTableModeChange: onTableModeChange }));
+}
+export default InstanceOverview;
+//# sourceMappingURL=InstanceOverview.js.map

package/lib/esm/components/InstanceOverview.js.map

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

package/lib/esm/components/InstanceOverview.module.css

@@ -0,0 +1,35 @@
+/* ============================================================================
+   InstanceOverview.module.css
+   
+   Instance data display styles for table cells.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Node Badge === */
+.node {
+  display: inline-block;
+  background-color: var(--instance-overview-gray-100, var(--color-gray-100));
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-selector);
+  color: var(--table-cell-text);
+  font-size: var(--typography-small-size);
+}
+
+/* === Literal Value === */
+.literal {
+  display: inline-block;
+  color: var(--table-cell-text);
+}
+
+/* ============================================================================
+   Dark Mode
+   ============================================================================ */
+
+[data-theme='dark'] .node {
+  background-color: var(--instance-overview-gray-700, var(--color-gray-700));
+  color: var(--table-cell-text);
+}
+
+[data-theme='dark'] .literal {
+  color: var(--table-cell-text);
+}

package/lib/esm/components/InstanceView.d.ts

@@ -0,0 +1,29 @@
+import type { PropertyShapeWire, NodeShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+/**
+ * Read-only rendering of one instance's values.
+ *
+ * Lifted out of `ViewInstance` (436 lines), which rendered all of this inline. That made the
+ * single-instance view the one CRUD surface with no organism at all — nothing to extract,
+ * nothing to test, and nothing that could move into the package. The page keeps what a page
+ * should: routing, breadcrumbs, layout chrome, actions, the deletion dialog.
+ *
+ * Navigation is a callback, not a router call. Clicking a related node means "show me that
+ * one", and where that goes is the host's business.
+ */
+export interface InstanceViewProps {
+    shape?: NodeShapeWire;
+    /** Property metadata by label — used to resolve which shape a related node belongs to. */
+    properties: Record<string, PropertyShapeWire>;
+    /** The instance's values, keyed by property label. */
+    subject: Record<string, any> | null;
+    /**
+     * A related node was clicked. Given the node and the property it came from, so the caller
+     * can resolve the target shape from `properties[propertyName].valueShape`.
+     */
+    onNodeClick?: (node: {
+        id: string;
+        label?: string;
+    }, propertyName: string) => void;
+}
+export declare function InstanceView({ shape, properties, subject, onNodeClick, }: InstanceViewProps): import("react").JSX.Element;
+export default InstanceView;

package/lib/esm/components/InstanceView.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { cl } from '@_linked/react/utils/ClassNames';
+import { NodeBadge } from './NodeBadge.js';
+import ImageThumb from '@_linked/primitives/components/ImageThumb';
+import { getNodeDisplay } from '../shape/nodeDisplay.js';
+import { getTransition, staggerContainer, staggerItem, useReducedMotion, } from '@_linked/primitives/motion';
+import style from './InstanceView.module.css';
+/** Above this many values, the rest collapse behind a "(n…)" badge. */
+const MAX_VALUES = 7;
+export function InstanceView({ shape, properties, subject, onNodeClick, }) {
+    var _a;
+    const [expandedArrays, setExpandedArrays] = useState(new Set());
+    const reducedMotion = useReducedMotion();
+    const expand = (propertyName) => setExpandedArrays((prev) => new Set(prev).add(propertyName));
+    const handleNodeClick = (node, propertyName) => {
+        if (node === null || node === void 0 ? void 0 : node.id)
+            onNodeClick === null || onNodeClick === void 0 ? void 0 : onNodeClick(node, propertyName);
+    };
+    /** An image source, whether the value carries one directly or via a nested ImageObject. */
+    const imageSourceOf = (value) => {
+        const images = value === null || value === void 0 ? void 0 : value.image;
+        const first = Array.isArray(images) ? images[0] : images;
+        if (!first)
+            return undefined;
+        return typeof first === 'object' && first.contentUrl
+            ? String(first.contentUrl)
+            : String(first);
+    };
+    const renderArrayItem = (item, key, propertyName) => {
+        if (typeof item === 'object' && (item === null || item === void 0 ? void 0 : item.contentUrl)) {
+            return (_jsx("div", { children: _jsx(ImageThumb, { src: item.contentUrl, size: 40, alt: item.label || propertyName }) }, key));
+        }
+        if (typeof item === 'object' && (item === null || item === void 0 ? void 0 : item.id)) {
+            const imgSrc = imageSourceOf(item);
+            if (imgSrc) {
+                return (_jsx("div", { children: _jsx(ImageThumb, { src: imgSrc, size: 40, alt: item.label || propertyName }) }, key));
+            }
+            return (_jsx("div", { children: _jsx(NodeBadge, { text: item.label || item.id, onClick: () => handleNodeClick(item, propertyName), clickable: true }) }, key));
+        }
+        return (_jsx("div", { children: _jsx(NodeBadge, { text: String(item) }) }, key));
+    };
+    const renderValue = (value, propertyName) => {
+        if (value === null || value === undefined)
+            return _jsx("p", { children: "-" });
+        if (typeof value === 'boolean')
+            return _jsx("p", { children: value ? 'Yes' : 'No' });
+        // An ImageObject: the value IS the image.
+        if (typeof value === 'object' && value.contentUrl) {
+            return (_jsxs("div", { className: style.imageValue, children: [_jsx(ImageThumb, { src: value.contentUrl, size: 64, alt: propertyName }), _jsx("p", { className: style.imageLabel, children: value.label || value.contentUrl })] }));
+        }
+        // A related node: show its image if it has one, else a clickable badge.
+        if (typeof value === 'object' && value.id) {
+            const imgSrc = imageSourceOf(value);
+            if (imgSrc) {
+                return (_jsxs("div", { className: style.imageValue, children: [_jsx(ImageThumb, { src: imgSrc, size: 48, alt: value.label || propertyName }), value.label && _jsx("span", { className: style.imageLabel, children: value.label })] }));
+            }
+            return (_jsx(NodeBadge, { text: getNodeDisplay(value), onClick: () => handleNodeClick(value, propertyName), clickable: true }));
+        }
+        if (Array.isArray(value)) {
+            if (value.length === 0)
+                return _jsx("p", { children: "-" });
+            const isExpanded = expandedArrays.has(propertyName);
+            const visible = isExpanded ? value : value.slice(0, MAX_VALUES);
+            const leftOver = value.length - MAX_VALUES;
+            return (_jsxs("div", { className: style.badgeContainer, children: [visible.map((item, index) => renderArrayItem(item, index, propertyName)), !isExpanded && leftOver > 0 && (_jsx("div", { children: _jsx(NodeBadge, { text: `(${leftOver}...)`, onClick: () => expand(propertyName), clickable: true }) }))] }));
+        }
+        return _jsx("p", { children: String(value) });
+    };
+    if (!subject)
+        return null;
+    // Only properties that actually have a value, and never the identifier — it names the
+    // record rather than describing it.
+    const populated = ((_a = shape === null || shape === void 0 ? void 0 : shape.propertyShapes) !== null && _a !== void 0 ? _a : []).filter((prop) => {
+        if (prop.label === 'id')
+            return false;
+        const value = subject[prop.label];
+        return value !== undefined && value !== null && value !== '';
+    });
+    return (_jsx(motion.div, { className: style.rows, variants: staggerContainer, initial: "initial", animate: "animate", children: populated.map((prop) => {
+            const value = subject[prop.label];
+            const formattedLabel = prop.label.charAt(0).toUpperCase() + prop.label.slice(1);
+            const isStacked = shouldStack(value);
+            return (_jsxs(motion.div, { className: cl(style.form, isStacked && style.stacked), variants: staggerItem, transition: getTransition(reducedMotion), children: [_jsx("div", { className: style.label, children: _jsx("label", { children: formattedLabel }) }), _jsx("div", { className: style.value, children: renderValue(value, prop.label) })] }, prop.label));
+        }) }));
+}
+/** A value wide enough that label-beside-value stops reading well. */
+function shouldStack(value) {
+    if (Array.isArray(value))
+        return value.length > 3;
+    if (typeof value === 'string')
+        return value.length > 120;
+    return false;
+}
+export default InstanceView;
+//# sourceMappingURL=InstanceView.js.map

package/lib/esm/components/InstanceView.js.map

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

package/lib/esm/components/InstanceView.module.css

@@ -0,0 +1,157 @@
+/*
+ * Lifted from ViewInstance.module.css alongside the InstanceView organism.
+ *
+ * Only the rules that render an instance's VALUES. The page keeps its layout, header,
+ * actions and skeleton rules — those belong to the page, not to the value list.
+ */
+
+.rows {
+  padding: var(--surface-gap) var(--space-2xl) var(--space-lg) var(--space-2xl);
+}
+
+.form {
+  display: flex;
+  min-height: 3.75rem;
+  align-items: center;
+  border-top: 1px solid var(--table-row-border);
+  justify-content: flex-start;
+  padding: var(--space-sm) 0;
+}
+
+.form:first-child {
+  border-top: none;
+}
+
+.form.stacked {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-sm);
+}
+
+.form.stacked .label {
+  width: 100%;
+}
+
+.form.stacked .value {
+  width: 100%;
+}
+
+.label {
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+  min-width: 120px;
+  height: 100%;
+  justify-content: center;
+  padding-right: var(--space-md);
+  flex-shrink: 0;
+}
+
+.label label {
+  color: var(--instance-view-gray-500, var(--color-gray-500));
+  font-size: var(--typography-font-size);
+}
+
+.value {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm-plus);
+  width: 70%;
+  max-height: 8.75rem;
+  overflow-y: auto;
+}
+
+.value p {
+  color: var(--text-primary);
+  font-size: var(--typography-font-size);
+  margin: 0;
+}
+
+.badgeContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2xs) 0;
+  overflow-y: auto;
+}
+
+.expandedContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  overflow-y: auto;
+  margin-top: var(--space-sm);
+  padding: var(--space-sm);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-field);
+  background: var(--section-bg);
+}
+
+.imageValue {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.imageLabel {
+  color: var(--instance-view-gray-600, var(--color-gray-600));
+  font-size: var(--typography-small-size);
+  word-break: break-all;
+}
+
+[data-theme='dark'] .imageLabel {
+  color: var(--instance-view-gray-400, var(--color-gray-400));
+}
+
+[data-theme='dark'] .label label {
+  color: var(--instance-view-gray-400, var(--color-gray-400));
+}
+
+.rows {
+    padding: var(--space-sm) var(--space-md);
+  }
+
+.form {
+    padding: var(--space-md) 0;
+  }
+
+.label {
+    width: 35%;
+    min-width: 100px;
+    padding-right: var(--space-sm);
+  }
+
+.value {
+    width: 65%;
+  }
+
+.rows {
+    padding: var(--space-xs) var(--space-sm);
+  }
+
+.form {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2xs);
+    padding: var(--space-sm) 0;
+  }
+
+.label {
+    width: 100%;
+    min-width: unset;
+    padding-right: 0;
+    margin-bottom: 0;
+  }
+
+.label label {
+    font-size: var(--typography-small-size);
+  }
+
+.value {
+    width: 100%;
+    max-height: none;
+  }
+
+.value p {
+    font-size: var(--typography-small-size);
+  }
+

package/lib/esm/components/NodeBadge.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export interface NodeBadgeProps {
+    /** What identifies the node — a label where it has one, otherwise its IRI. */
+    text: string;
+    onClick?: () => void;
+    /** Whether the badge acts on a click. A read-only host may not navigate. */
+    clickable?: boolean;
+    title?: string;
+    className?: string;
+}
+/**
+ * A chip standing for one node.
+ *
+ * The only badge this package needs, and it is a thin composition over the presentational
+ * primitive. It exists as its own component rather than as a bare `<Badge>` for one reason:
+ * "a related instance" is a shape-domain concept, and a table cell, a form field and a
+ * read-only view must render it identically. A caller reaching for the primitive directly
+ * would have to remember which variant and colour meant "node", and eventually two of them
+ * would disagree.
+ *
+ * `clickable` is separate from `onClick` deliberately. A host that cannot navigate still
+ * passes a handler in some code paths, and a chip that looks interactive and does nothing is
+ * worse than one that looks inert.
+ */
+export declare function NodeBadge({ text, onClick, clickable, title, className, }: NodeBadgeProps): React.JSX.Element;

package/lib/esm/components/NodeBadge.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from '@_linked/primitives/components/Badge';
+/**
+ * A chip standing for one node.
+ *
+ * The only badge this package needs, and it is a thin composition over the presentational
+ * primitive. It exists as its own component rather than as a bare `<Badge>` for one reason:
+ * "a related instance" is a shape-domain concept, and a table cell, a form field and a
+ * read-only view must render it identically. A caller reaching for the primitive directly
+ * would have to remember which variant and colour meant "node", and eventually two of them
+ * would disagree.
+ *
+ * `clickable` is separate from `onClick` deliberately. A host that cannot navigate still
+ * passes a handler in some code paths, and a chip that looks interactive and does nothing is
+ * worse than one that looks inert.
+ */
+export function NodeBadge({ text, onClick, clickable = false, title, className, }) {
+    const interactive = clickable && !!onClick;
+    if (!interactive) {
+        return (_jsx(Badge, { variant: "soft", color: "neutral", title: title, className: className, children: text }));
+    }
+    return (_jsx(Badge, { variant: "soft", color: "neutral", title: title, className: className, asChild: true, children: _jsx("button", { type: "button", onClick: (event) => {
+                // A node chip frequently sits inside a clickable row. Without this, choosing the
+                // chip also triggers the row.
+                event.stopPropagation();
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }, children: text }) }));
+}
+//# sourceMappingURL=NodeBadge.js.map

package/lib/esm/components/NodeBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeBadge.js","sourceRoot":"","sources":["../../../src/components/NodeBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,KAAK,EAAC,MAAM,sCAAsC,CAAC;AAY3D;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,SAAS,GACM;IACf,MAAM,WAAW,GAAG,SAAS,IAAI,CAAC,CAAC,OAAO,CAAC;IAE3C,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,YACrE,IAAI,GACC,CACT,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,kBAC/E,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,iFAAiF;gBACjF,8BAA8B;gBAC9B,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;YACd,CAAC,YAEA,IAAI,GACE,GACH,CACT,CAAC;AACJ,CAAC"}