@manta-eu/react 0.1.0 → 0.1.2

package/README.md

@@ -1,39 +1,45 @@
 # @manta-eu/react
 
-Shared React components and design system styles for Marketer apps.
+React components and design system for Manta apps, including the copilot chat.
 
-## Installation
+## Adding the copilot to a React app
 
-Install in your project:
+Five steps, end to end. Steps 1–3 are setup you do once; step 4 generates the types your app queries
+the graph with; step 5 is the chat itself.
+
+### 1. Install
 
 ```bash
-pnpm add @manta-eu/react
+pnpm add @manta-eu/react @manta-eu/codegen
+pnpm add react react-dom next-themes @xyflow/react html-to-image @ulb-darmstadt/shacl-form
+pnpm add -D tailwindcss @tailwindcss/postcss   # or @tailwindcss/vite, in a Vite app
 ```
 
-### 1. Add base styles to your global CSS
+The second line is this package's peer dependencies — the versions are yours to pick, so the
+package does not pin them for you. `react` and `react-dom` must satisfy `^19.0.0`.
+
+The third is Tailwind 4 and a build plugin for it. The package does not bring its own: the
+stylesheet it ships opens with `@import "tailwindcss"`, so Tailwind has to resolve from your tree
+whatever you write in step 2.
 
-In your app’s main stylesheet (e.g. `src/styles.css`), import Tailwind and the package styles:
+### 2. Add the styles
+
+The copilot is styled with Tailwind 4, so your app has to process the package's CSS. In your global
+stylesheet:
 
 ```css
 @import "tailwindcss";
 
-/* Marketer components – design tokens, base styles, utilities */
+/* Manta components – design tokens, base styles, utilities */
 @import "@manta-eu/react/globals.css";
 ```
 
-### 2. Include the package in Tailwind’s content (purge)
-
-So Tailwind keeps classes used by `@manta-eu/react` in the build, add `@source` in the same global CSS file, pointing at the package (adjust the path if your `node_modules` layout differs, e.g. in a monorepo):
-
-```css
-@source "../node_modules/@manta-eu/react/";
-```
-
-If the package is hoisted (e.g. at the repo root), the path might be `../../node_modules/@manta-eu/react/`.
+The stylesheet points Tailwind at the package's own compiled components, so you do not add an
+`@source` for it yourself.
 
-### 3. Override the font variable
+### 3. Point the font variable at a real font
 
-The design system expects `--font-roobertpro` to be set to your actual font. Override it in your global CSS, for example in `@theme` and/or `:root`:
+The design system reads `--font-roobertpro`. Set it to whatever you actually load:
 
 ```css
 @theme {
@@ -45,11 +51,78 @@ The design system expects `--font-roobertpro` to be set to your actual font. Ove
 }
 ```
 
-Use your real font family name (and fallbacks) if it differs from `RoobertPro`.
+### 4. Generate the graph types
+
+The copilot reads a datastore whose shapes are specific to your deployment, so the types come from
+that datastore rather than from this package. `@manta-eu/codegen` fetches them over HTTP:
+
+```bash
+pnpm manta-codegen generate \
+  --api-url https://app.hiremanta.com \
+  --datastore your-datastore \
+  --keycloak-url https://auth.hiremanta.com \
+  --keycloak-realm your-realm \
+  --client-id your-realm-app \
+  --out ./.ldkit
+```
+
+The run writes one file per namespace plus an `index.ts` that re-exports them. Re-run it whenever
+the shapes change. See [`@manta-eu/codegen`](https://www.npmjs.com/package/@manta-eu/codegen) for
+the device-login and service-account paths.
+
+### 5. Mount the chat
+
+`EmbeddedChatProviders` supplies the API client, query cache and graph state; `EmbeddedChat` is the
+copilot itself. Requests carry the session from `mantaBaseUrl`, so the user signs in there.
+
+```tsx
+import { EmbeddedChat } from "@manta-eu/react/components/embedded-chat";
+import { EmbeddedChatProviders } from "@manta-eu/react/providers";
+import "./globals.css";
+
+export function Copilot() {
+  return (
+    <EmbeddedChatProviders mantaBaseUrl="https://app.hiremanta.com" datastoreId="your-datastore">
+      <EmbeddedChat
+        user={{ id: "…", email: "you@example.com", name: "You" }}
+        isOperator={false}
+        assistantName="Copilot"
+      />
+    </EmbeddedChatProviders>
+  );
+}
+```
+
+That is a working copilot. Everything below is optional.
+
+## Tailoring the chat
+
+`EmbeddedChat` takes these, all optional unless marked:
+
+| Prop                          | Type                                  | What it does                                      |
+| ----------------------------- | ------------------------------------- | ------------------------------------------------- |
+| `user`                        | `{ id, email, name? }` — **required** | Who is talking                                    |
+| `isOperator`                  | `boolean` — **required**              | Unlocks operator-only affordances                 |
+| `datastore`                   | `Datastore`                           | The datastore to read; defaults to the provider's |
+| `datastores`                  | `Datastore[]`                         | Choices when `canSwitchDatastore` is set          |
+| `canSwitchDatastore`          | `boolean`                             | Lets an operator change datastore in the UI       |
+| `title`                       | `string`                              | Header text                                       |
+| `assistantName`               | `string`                              | What the assistant calls itself                   |
+| `welcomeSubtitle`             | `string`                              | Subtitle on the empty state                       |
+| `initialPrompt`               | `string`                              | Prefills the composer                             |
+| `mark`                        | `ReactNode`                           | Your logo in the header                           |
+| `allowedModels`               | `MantaModelId[]`                      | Restricts the model picker                        |
+| `pageContext`                 | `PageContext`                         | Tells the assistant what the user is looking at   |
+| `collapsible` / `isCollapsed` | `boolean`                             | Collapsed presentation                            |
+| `onClose` / `onLogout`        | `() => void`                          | Chrome callbacks                                  |
+| `onSelectPlan`                | `(planIri: string) => void`           | Fires when a plan is opened                       |
+| `renderMenuItems`             | `(defaults) => ReactNode[]`           | Replaces the overflow menu                        |
 
-## Usage
+Removing or renaming one of these is a breaking change, so they change rarely.
 
-Import components and use the design system:
+## Using the components on their own
+
+The design system is usable without the chat:
 
 ```tsx
 import { Button } from "@manta-eu/react/button";
@@ -60,28 +133,18 @@ export function App() {
 }
 ```
 
-Your app must use Tailwind 4 and process the package CSS (e.g. PostCSS with `@tailwindcss/postcss`) so the design tokens and utilities in `globals.css` apply.
+Every component has its own subpath export — `@manta-eu/react/button`, `/avatar`, `/badge` and so
+on — so you only pull in what you render.
 
 ## Themes
 
-Three themes are included: **standard** (default), **manta** (light), and **manta-dark**. Switch at runtime by setting a data attribute on `<html>`:
+Three ship with the package: **standard** (default), **manta** (light) and **manta-dark**. Switch at
+runtime on the document root:
 
 ```tsx
 document.documentElement.dataset.theme = "manta";
 ```
 
-Or use a React context/component that sets `data-theme` on the document root. Theme files live in `src/themes/` (standard.css, manta.css, manta-dark.css).
-
-## Development
-
-```bash
-pnpm storybook
-```
-
-Runs Storybook on port 6007.
-
-## Exports
+## License
 
-- `@manta-eu/react/button` – Button component
-- `@manta-eu/react/style` – `cn()` utility
-- `@manta-eu/react/globals.css` – Design system stylesheet
+MIT

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+export type BreadcrumbItem = {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+    current?: boolean;
+};
+export type BreadcrumbLinkRenderer = (props: {
+    href: string;
+    className: string;
+    children: ReactNode;
+}) => ReactNode;
+export type BreadcrumbsProps = {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    /** Render a router link (e.g. React Router / next) for `href` items instead of the default full-navigation `<a>`. */
+    renderLink?: BreadcrumbLinkRenderer;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare function Breadcrumbs(props: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Breadcrumbs {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,KAAK,SAAS,CAAC;AAEpH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,qHAAqH;IACrH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AA4CF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAyBlD;yBAzBe,WAAW"}

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { ChevronRight } from "lucide-react";
+import { Fragment } from "react";
+import { cn } from "#style";
+const crumbBase = "inline-flex min-w-0 items-center gap-1.5 typography-small [&>svg]:size-4 [&>svg]:shrink-0";
+const interactive = "text-muted-foreground hover:text-default-foreground rounded-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-active-border";
+function BreadcrumbCrumb(props) {
+    const { item, isLast, renderLink } = props;
+    const isCurrent = item.current ?? isLast;
+    const content = (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { className: "truncate", children: item.label })] }));
+    if (isCurrent) {
+        return (_jsx("span", { "aria-current": "page", className: cn(crumbBase, "text-default-foreground typography-small-medium"), children: content }));
+    }
+    if (isPresent(item.href)) {
+        const linkClassName = cn(crumbBase, interactive);
+        if (isPresent(renderLink)) {
+            return _jsx(_Fragment, { children: renderLink({ href: item.href, className: linkClassName, children: content }) });
+        }
+        return (_jsx("a", { href: item.href, className: linkClassName, children: content }));
+    }
+    if (isPresent(item.onClick)) {
+        return (_jsx("button", { type: "button", onClick: item.onClick, className: cn(crumbBase, interactive), children: content }));
+    }
+    return _jsx("span", { className: cn(crumbBase, "text-muted-foreground"), children: content });
+}
+export function Breadcrumbs(props) {
+    const { items, separator, renderLink, className } = props;
+    const ariaLabel = props["aria-label"] ?? "Breadcrumb";
+    return (_jsx("nav", { "aria-label": ariaLabel, className: className, "data-slot": "breadcrumbs", children: _jsx("ol", { className: "flex items-center gap-1.5", children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                return (_jsxs(Fragment, { children: [_jsx("li", { className: "flex min-w-0 items-center", children: _jsx(BreadcrumbCrumb, { item: item, isLast: isLast, renderLink: renderLink }) }), !isLast ? (_jsx("li", { "aria-hidden": true, className: "flex shrink-0 items-center text-muted-foreground [&>svg]:size-4", children: separator ?? _jsx(ChevronRight, {}) })) : null] }, `${item.href ?? "crumb"}-${index}`));
+            }) }) }));
+}
+Breadcrumbs.displayName = "Breadcrumbs";

package/dist/components/channel-icon/index.d.ts

@@ -1,4 +1,4 @@
-export type Channel = "META" | "GOOGLE_ADS" | "SNAPCHAT" | "SHOPIFY" | "MARKETER" | "MANTA";
+export type Channel = "META" | "GOOGLE_ADS" | "SNAPCHAT" | "SHOPIFY" | "MANTA";
 export type ChannelIconProps = {
     channel?: Channel;
     showName?: boolean;
@@ -12,5 +12,4 @@ export { GoogleAdsIcon } from "./google-ads-icon.js";
 export { SnapChatIcon } from "./snapchat-icon.js";
 export { ShopifyIcon } from "./shopify-icon.js";
 export { MantaIcon } from "./manta-icon.js";
-export { MarketerIcon } from "./marketer-icon.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/channel-icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/channel-icon/index.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAW5F,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDA0ClD;AAED,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/channel-icon/index.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAU/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAoClD;AAED,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/channel-icon/index.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { match } from "ts-pattern";
 import { GoogleAdsIcon } from "./google-ads-icon.js";
 import { MantaIcon } from "./manta-icon.js";
-import { MarketerIcon } from "./marketer-icon.js";
 import { MetaIcon } from "./meta-icon.js";
 import { ShopifyIcon } from "./shopify-icon.js";
 import { SnapChatIcon } from "./snapchat-icon.js";
@@ -12,7 +11,6 @@ const channelDisplayName = {
     GOOGLE_ADS: "Google Ads",
     SNAPCHAT: "Snapchat",
     SHOPIFY: "Shopify",
-    MARKETER: "Marketer",
     MANTA: "Manta",
 };
 export function ChannelIcon(props) {
@@ -24,7 +22,6 @@ export function ChannelIcon(props) {
         .with("GOOGLE_ADS", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(GoogleAdsIcon, { className: cn("size-6", iconClassName), rounded: rounded }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.GOOGLE_ADS })] })))
         .with("SNAPCHAT", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(SnapChatIcon, { className: cn("size-6", iconClassName), rounded: rounded }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.SNAPCHAT })] })))
         .with("SHOPIFY", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(ShopifyIcon, { className: cn("size-6", iconClassName), rounded: rounded }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.SHOPIFY })] })))
-        .with("MARKETER", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(MarketerIcon, { className: cn("size-6", iconClassName) }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.MARKETER })] })))
         .with("MANTA", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(MantaIcon, { className: cn("size-6", iconClassName) }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.MANTA })] })))
         .exhaustive();
 }
@@ -33,4 +30,3 @@ export { GoogleAdsIcon } from "./google-ads-icon.js";
 export { SnapChatIcon } from "./snapchat-icon.js";
 export { ShopifyIcon } from "./shopify-icon.js";
 export { MantaIcon } from "./manta-icon.js";
-export { MarketerIcon } from "./marketer-icon.js";

package/dist/components/chip/index.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export type ChipProps = {
+    label: ReactNode;
+    /** Accessible name for the remove action, e.g. "Remove Meta". */
+    removeLabel: string;
+    onRemove: () => void;
+    disabled?: boolean;
+};
+/** A removable pill shared by MultiSelect and InputTags; hides its remove button when disabled. */
+export declare function Chip(props: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Chip {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,mGAAmG;AACnG,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2CAgBpC;yBAhBe,IAAI"}

package/dist/components/chip/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+/** A removable pill shared by MultiSelect and InputTags; hides its remove button when disabled. */
+export function Chip(props) {
+    return (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-sm bg-faint px-1.5 py-0.5 typography-caption text-default-foreground", children: [_jsx("span", { className: "truncate", children: props.label }), !props.disabled && (_jsx("button", { type: "button", "aria-label": `Remove ${props.removeLabel}`, onClick: props.onRemove, className: "pointer-events-auto -mr-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:text-default-foreground", children: _jsx(X, { className: "size-3" }) }))] }));
+}
+Chip.displayName = "Chip";

package/dist/components/editable-text/index.d.ts

@@ -0,0 +1,13 @@
+export type EditableTextProps = {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare function EditableText(props: EditableTextProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace EditableText {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/editable-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/editable-text/index.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAIF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA4FpD;yBA5Fe,YAAY"}

package/dist/components/editable-text/index.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "#style";
+const shared = "typography-body -mx-1.5 rounded-sm px-1.5 py-0.5";
+export function EditableText(props) {
+    const { value, onChange, placeholder = "Click to edit", disabled = false, className } = props;
+    const ariaLabel = props["aria-label"];
+    const [isEditing, setIsEditing] = useState(false);
+    const [draft, setDraft] = useState(value);
+    const inputRef = useRef(null);
+    const buttonRef = useRef(null);
+    const wasEditing = useRef(false);
+    useEffect(() => {
+        if (isEditing) {
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        }
+        else if (wasEditing.current) {
+            // Returning from edit mode: the input just unmounted, so pull focus back to the button
+            // rather than letting it drop to <body>.
+            buttonRef.current?.focus();
+        }
+        wasEditing.current = isEditing;
+    }, [isEditing]);
+    function startEditing() {
+        if (disabled) {
+            return;
+        }
+        setDraft(value);
+        setIsEditing(true);
+    }
+    function commit() {
+        setIsEditing(false);
+        const next = draft.trim();
+        if (next !== value) {
+            onChange(next);
+        }
+    }
+    function cancel() {
+        setDraft(value);
+        setIsEditing(false);
+    }
+    function onKeyDown(event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            commit();
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            cancel();
+        }
+    }
+    if (isEditing) {
+        return (_jsx("input", { ref: inputRef, value: draft, "aria-label": ariaLabel, placeholder: placeholder, onChange: (event) => setDraft(event.currentTarget.value), onBlur: commit, onKeyDown: onKeyDown, className: cn(shared, "min-w-0 bg-background text-default-foreground outline outline-2 -outline-offset-1 outline-active-border placeholder:text-muted-foreground", className) }));
+    }
+    const hasValue = isPresent(value);
+    return (_jsx("button", { ref: buttonRef, type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: startEditing, "data-slot": "editable-text", className: cn(shared, "inline-flex max-w-full items-center text-left hover:bg-accent/60 disabled:pointer-events-none disabled:opacity-50", hasValue ? "text-default-foreground" : "text-muted-foreground", className), children: _jsx("span", { className: "truncate", children: hasValue ? value : placeholder }) }));
+}
+EditableText.displayName = "EditableText";

package/dist/components/explain-fact/ExplainFact.d.ts

@@ -0,0 +1,16 @@
+import { type ExplainFactOutput } from "#ldo-ui";
+export type { ExplainFactOutput };
+export type ExplainFactBaseProps = {
+    mode: "compact" | "full";
+    subject: string;
+    predicate?: string;
+    object: string;
+    namedGraph?: string;
+    objectDatatype?: string;
+    className?: string;
+};
+export type ExplainFactProps = ExplainFactBaseProps & {
+    data?: ExplainFactOutput;
+};
+export declare function ExplainFact(props: ExplainFactProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExplainFact.d.ts.map

package/dist/components/explain-fact/ExplainFact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExplainFact.d.ts","sourceRoot":"","sources":["../../../src/components/explain-fact/ExplainFact.tsx"],"names":[],"mappings":"AAKA,OAAO,EAUL,KAAK,iBAAiB,EAGvB,MAAM,SAAS,CAAC;AAGjB,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAElC,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAEnF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAUlD"}

package/dist/components/{rdfox-explain/RDFoxExplain.js → explain-fact/ExplainFact.js}

@@ -4,17 +4,17 @@ import { ChevronRight } from "lucide-react";
 import { useMemo, useState } from "react";
 import { Link } from "react-router";
 import { OutdatedFactNotice } from "./OutdatedFactNotice.js";
-import { buildExplainPath, ExplainCompactView, ExplainFullView, ExplainRouteMessage, ExplainRouteSkeleton, isRDFoxExplainOutput, normalize, RDFoxExplainState, SubstitutedFactNotice, } from "#ldo-ui";
+import { buildExplainPath, ExplainCompactView, ExplainFullView, ExplainRouteMessage, ExplainRouteSkeleton, isExplainFactOutput, normalize, ExplainFactState, SubstitutedFactNotice, } from "#ldo-ui";
 import { useMantaClient } from "#providers/MantaClientProvider";
-export function RDFoxExplain(props) {
+export function ExplainFact(props) {
     const { data, ...rest } = props;
     const [showCurrent, setShowCurrent] = useState(false);
     if (data && !showCurrent) {
-        return _jsx(RDFoxExplainFromData, { ...rest, data: data, onShowCurrent: () => setShowCurrent(true) });
+        return _jsx(ExplainFactFromData, { ...rest, data: data, onShowCurrent: () => setShowCurrent(true) });
     }
-    return _jsx(RDFoxExplainFromFetch, { ...rest });
+    return _jsx(ExplainFactFromFetch, { ...rest });
 }
-function RDFoxExplainFromFetch(props) {
+function ExplainFactFromFetch(props) {
     const { mode, subject, predicate, object, namedGraph, objectDatatype, className } = props;
     const { mantaClient } = useMantaClient();
     const queryResult = useExplainRdFoxFactQuery(mantaClient, {
@@ -29,7 +29,7 @@ function RDFoxExplainFromFetch(props) {
     if (queryResult.isLoading) {
         if (isFull)
             return _jsx(ExplainRouteSkeleton, { className: className });
-        return _jsx(RDFoxExplainState, { className: className, title: "Loading RDFox explanation..." });
+        return _jsx(ExplainFactState, { className: className, title: "Loading this explanation..." });
     }
     const error = queryResult.error;
     const response = queryResult.data?.explainRDFoxFact;
@@ -38,17 +38,17 @@ function RDFoxExplainFromFetch(props) {
         if (isFull) {
             return (_jsx(ExplainRouteMessage, { className: className, variant: "error", title: "Could not load this explanation", detail: detail }));
         }
-        return _jsx(RDFoxExplainState, { className: className, title: "Could not load RDFox explanation", detail: detail });
+        return _jsx(ExplainFactState, { className: className, title: "Could not load this explanation", detail: detail });
     }
-    if (!response || !isRDFoxExplainOutput(response.facts)) {
+    if (!response || !isExplainFactOutput(response.facts)) {
         if (isFull) {
             return (_jsx(ExplainRouteMessage, { className: className, variant: "empty", title: "No explanation available", detail: "This fact has no recorded derivation to show." }));
         }
-        return _jsx(RDFoxExplainState, { className: className, title: "No RDFox explanation returned" });
+        return _jsx(ExplainFactState, { className: className, title: "No explanation available" });
     }
-    return _jsx(RDFoxExplainFromData, { ...props, data: response.facts });
+    return _jsx(ExplainFactFromData, { ...props, data: response.facts });
 }
-function RDFoxExplainFromData(props) {
+function ExplainFactFromData(props) {
     const { mode, data, subject, predicate, object, namedGraph, objectDatatype, onShowCurrent, className } = props;
     const tree = useMemo(() => normalize(data), [data]);
     const [displayMode, setDisplayMode] = useState("labels");
@@ -56,7 +56,7 @@ function RDFoxExplainFromData(props) {
         if (mode === "full") {
             return (_jsx(ExplainRouteMessage, { className: className, variant: "empty", title: "No proof tree for this fact", detail: "It may be an explicit fact with no derivation to walk." }));
         }
-        return _jsx(RDFoxExplainState, { className: className, title: "No proof tree available for this fact" });
+        return _jsx(ExplainFactState, { className: className, title: "No proof tree available for this fact" });
     }
     const subjectTerm = tree.root.spo?.subject ?? subject;
     if (mode === "compact") {

package/dist/components/explain-fact/OutdatedFactNotice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutdatedFactNotice.d.ts","sourceRoot":"","sources":["../../../src/components/explain-fact/OutdatedFactNotice.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvD,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,EAAE,YAAY,CAAC;IAClB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,kDAqChE"}

package/dist/components/input/index.d.ts

@@ -18,6 +18,8 @@ export { InputDateRange } from "./input-date-range.js";
 export { InputDateTime } from "./input-date-time.js";
 export { InputFile } from "./input-file.js";
 export { InputTime } from "./input-time.js";
+export { InputNumeric, type InputNumericProps } from "./input-numeric.js";
+export { InputTags, type InputTagsProps, type InputTagsSize } from "./input-tags.js";
 export { CountrySelector, type CountrySelectorProps } from "./country-selector.js";
 export { PhoneInput, type CountryOption } from "./phone-input.js";
 export { Textarea, type TextareaArgs, type TextareaProps } from "./textarea.js";

package/dist/components/input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGvG,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,kBAAkB,EAAE,CAAC;AAC7D,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAEzD,wBAAgB,WAAW,CAAC,KAAK,EAAE,eAAe,2CAEjD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG;IAC3D,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,2CAuBrD;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAE7D,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,2CAEzD;AAED,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAG7E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7E,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGvG,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,kBAAkB,EAAE,CAAC;AAC7D,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAEzD,wBAAgB,WAAW,CAAC,KAAK,EAAE,eAAe,2CAEjD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG;IAC3D,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,2CAuBrD;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAE7D,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,2CAEzD;AAED,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAG7E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7E,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/input/index.js

@@ -20,6 +20,8 @@ export { InputDateRange } from "./input-date-range.js";
 export { InputDateTime } from "./input-date-time.js";
 export { InputFile } from "./input-file.js";
 export { InputTime } from "./input-time.js";
+export { InputNumeric } from "./input-numeric.js";
+export { InputTags } from "./input-tags.js";
 export { CountrySelector } from "./country-selector.js";
 export { PhoneInput } from "./phone-input.js";
 export { Textarea } from "./textarea.js";

package/dist/components/input/input-numeric.d.ts

@@ -0,0 +1,19 @@
+export type InputNumericProps = {
+    value: number;
+    onValueChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare function clamp(value: number, min?: number, max?: number): number;
+export declare function decimalsOf(value: number): number;
+export declare function roundToStep(value: number, step: number, base?: number): number;
+export declare function InputNumeric(props: InputNumericProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputNumeric {
+    var displayName: string;
+}
+//# sourceMappingURL=input-numeric.d.ts.map

package/dist/components/input/input-numeric.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-numeric.d.ts","sourceRoot":"","sources":["../../../src/components/input/input-numeric.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CASvE;AAMD,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAQhD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,SAAI,GAAG,MAAM,CAGzE;AAkBD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAkFpD;yBAlFe,YAAY"}