@butinapp/ui 0.1.0

package/dist/i18n/plugin-text.d.ts

@@ -0,0 +1,4 @@
+import type { Locale } from './labels.js';
+export type PluginMessages = Record<string, Record<string, string>>;
+export declare const globalPluginText: PluginMessages;
+export declare const makePluginText: (locale: Locale, plugin?: PluginMessages) => (text: string) => string;

package/dist/i18n/plugin-text.js

@@ -0,0 +1,150 @@
+// en→fr for the common, English-canonical vocabulary plugins + presets emit.
+const EN_TO_FR = {
+    // Capability tabs / sections.
+    Summary: 'Résumé',
+    Billing: 'Facturation',
+    Usage: 'Utilisation',
+    Members: 'Membres',
+    Member: 'Membre',
+    'API Keys': 'Clés API',
+    'API keys': 'Clés API',
+    Documents: 'Documents',
+    Invoices: 'Factures',
+    Payments: 'Paiements',
+    Activity: 'Activité',
+    Account: 'Compte',
+    Authentication: 'Authentification',
+    Overview: 'Aperçu',
+    // Common column / field labels.
+    Name: 'Nom',
+    Email: 'Courriel',
+    Role: 'Rôle',
+    Status: 'Statut',
+    Amount: 'Montant',
+    Date: 'Date',
+    Time: 'Heure',
+    Month: 'Mois',
+    Type: 'Type',
+    Created: 'Créé',
+    'Created by': 'Créé par',
+    Expires: 'Expiration',
+    Expiration: 'Expiration',
+    Quantity: 'Quantité',
+    Region: 'Région',
+    Organization: 'Organisation',
+    'Organization ID': "ID d'organisation",
+    'Organization slug': "Identifiant d'organisation",
+    Project: 'Projet',
+    Cluster: 'Grappe',
+    Card: 'Carte',
+    'Last 4': '4 derniers',
+    Plan: 'Forfait',
+    Spend: 'Dépenses',
+    'Spend (MTD)': 'Dépenses (cumul mois)',
+    'This month': 'Ce mois-ci',
+    Credits: 'Crédits',
+    'Credit balance': 'Solde de crédits',
+    'Prepaid balance': 'Solde prépayé',
+    'Current charges': 'Frais actuels',
+    'Current cycle': 'Cycle actuel',
+    'Next charge': 'Prochain prélèvement',
+    'On-demand spend': 'Dépenses à la demande',
+    'Seats purchased': 'Sièges achetés',
+    'Seats used': 'Sièges utilisés',
+    'Team seats': "Sièges d'équipe",
+    Seat: 'Siège',
+    'Pending invites': 'Invitations en attente',
+    'Open invoices': 'Factures ouvertes',
+    'Payment status': 'Statut de paiement',
+    'Customer since': 'Client depuis',
+    Model: 'Modèle',
+    Service: 'Service',
+    Item: 'Article',
+    Product: 'Produit',
+    Username: "Nom d'utilisateur",
+    Country: 'Pays',
+    Address: 'Adresse',
+    Location: 'Emplacement',
+    Phone: 'Téléphone',
+    Identifier: 'Identifiant',
+    Key: 'Clé',
+    'Last used': 'Dernière utilisation',
+    Limit: 'Limite',
+    Used: 'Utilisé',
+    Unit: 'Unité',
+    Period: 'Période',
+    Metric: 'Métrique',
+    Metrics: 'Métriques',
+    Errors: 'Erreurs',
+    Cost: 'Coût',
+    Attachments: 'Pièces jointes',
+    Share: 'Part',
+    Utilization: 'Utilisation',
+    Stickiness: 'Fidélité',
+    Metered: 'Mesuré',
+    Size: 'Taille',
+    Max: 'Max',
+    'Daily active': 'Actifs/jour',
+    'Weekly active': 'Actifs/semaine',
+    'Monthly active': 'Actifs/mois',
+    'Used today': "Utilisé aujourd'hui",
+    'Used last month': 'Utilisé le mois dernier',
+    // AWS / cloud specifics.
+    'Access key ID': "ID de clé d'accès",
+    'Secret access key': "Clé d'accès secrète",
+    'IAM access keys': "Clés d'accès IAM",
+    'Identity Store ID': "ID du magasin d'identités",
+    'Identity Center users': 'Utilisateurs Identity Center',
+    'Profile name': 'Nom du profil',
+    'AWS profile': 'Profil AWS',
+    'Tax ID': 'Numéro fiscal',
+    'Billing email': 'Courriel de facturation',
+    'Billing name': 'Nom de facturation',
+    'Account name': 'Nom du compte',
+    'Account ID': 'ID du compte',
+    'Enterprise slug': "Identifiant d'entreprise",
+    'Team slug': "Identifiant d'équipe",
+    // View titles.
+    'Monthly spend': 'Dépenses mensuelles',
+    'Monthly meterings': 'Relevés mensuels',
+    'Daily spend': 'Dépenses quotidiennes',
+    'Daily credits': 'Crédits quotidiens',
+    'Payment method': 'Mode de paiement',
+    'This month by cluster': 'Ce mois par grappe',
+    'Spend by service': 'Dépenses par service',
+    'Spend by model': 'Dépenses par modèle',
+    'Spend by linked account': 'Dépenses par compte lié',
+    'Top projects (on-demand)': 'Meilleurs projets (à la demande)',
+    'Licensed items': 'Éléments sous licence'
+};
+// fr→en for the common French-canonical vocabulary (banking / health plugins), so they read in English
+// under an English app without each shipping its own `messages`. Domain terms (DIN, RAMQ, posologie) stay
+// per-plugin. Built by inverting EN_TO_FR plus a few French-first terms those plugins emit.
+const FR_TO_EN = {
+    ...Object.fromEntries(Object.entries(EN_TO_FR).map(([en, fr]) => [fr, en])),
+    Sommaire: 'Summary',
+    Comptes: 'Accounts',
+    Compte: 'Account',
+    Solde: 'Balance',
+    'Solde précédent': 'Previous balance',
+    Factures: 'Invoices',
+    Facture: 'Invoice',
+    Téléphone: 'Phone',
+    Adresse: 'Address',
+    Naissance: 'Date of birth',
+    Sexe: 'Sex',
+    Échéance: 'Due date',
+    'Montant dû': 'Amount due',
+    'Avoir net': 'Net worth',
+    Restante: 'Remaining',
+    Statut: 'Status',
+    Situation: 'Situation'
+};
+// Keyed by locale → (canonical-emitted-string → localized). `en`/`fr` only; other locales pass through.
+export const globalPluginText = { en: FR_TO_EN, fr: EN_TO_FR };
+// Build a translator for the active locale: plugin `messages` override the global dict; unknown strings pass
+// through unchanged (so a service's data + untranslated bespoke labels render verbatim). Pure — unit-tested.
+export const makePluginText = (locale, plugin) => (text) => {
+    const map = { ...(globalPluginText[locale] ?? {}), ...(plugin?.[locale] ?? {}) };
+    return map[text] ?? text;
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export type { PluginView, CapabilityView, ReportResult, VerifyResult, ConfigFieldView } from './types.js';
+export type { ConfigOption } from '@butinapp/sdk';
+export * from './primitives.js';
+export * from './dashboard.js';
+export * from './shell.js';
+export * from './i18n/index.js';

package/dist/index.js

@@ -0,0 +1,15 @@
+// @butinapp/ui — the embeddable, theme-portable design system + the generic data-view renderer. The surface
+// is layered across subpaths so an import line says which tier it's in:
+//   @butinapp/ui/primitives — pure visual components (Button, Card, Table, …) + cn
+//   @butinapp/ui/dashboard  — the descriptor-driven renderer + Overview + chart helpers (the embeddable layer)
+//   @butinapp/ui/shell      — the embeddable shell scaffolding (AppShell · Sidebar · ServiceTabs · ThemeToggle)
+//   @butinapp/ui/i18n       — the label + format contract
+// The app's OWN chrome (profiles, vault, settings, notifications, export) is NOT here — it's
+// app-specific, so it lives in core's renderer (core/src/renderer/chrome), leaving this package embeddable.
+// This root barrel carries only the cross-cutting view-model types every layer shares, then re-aggregates the
+// subpaths so existing root imports keep resolving. (The aggregate stays until the out-of-repo viewer — which
+// still imports from the root — is migrated to subpaths alongside publishing; in-repo code imports the tiers.)
+export * from './primitives.js';
+export * from './dashboard.js';
+export * from './shell.js';
+export * from './i18n/index.js';

package/dist/lib/echarts-theme.d.ts

@@ -0,0 +1,38 @@
+export interface EchartsTheme {
+    LABEL: {
+        color: string;
+        fontSize: number;
+    };
+    AXIS_LINE: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+    };
+    TOOLTIP: {
+        trigger: 'axis';
+        backgroundColor: string;
+        borderColor: string;
+        textStyle: {
+            color: string;
+        };
+    };
+    LEGEND_TEXT: string;
+    ACCENT: string;
+    PALETTE: string[];
+}
+export declare const grid: (top?: number) => {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    containLabel: boolean;
+};
+export declare const asCanvasColor: (value: string) => string;
+export declare const useEchartsTheme: () => EchartsTheme;

package/dist/lib/echarts-theme.js

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useState } from 'react';
+// Chart grid. `top` defaults to 28 (room for a legend); pass 16 for charts without one.
+export const grid = (top = 28) => ({ left: 8, right: 16, top, bottom: 8, containLabel: true });
+// Tailwind v4 ships full color functions (`oklch(…)`) that are valid as-is, but a bare HSL triplet
+// (`0 0% 26%`) is meant to be wrapped by the CSS. The canvas can't parse a bare triplet and silently
+// drops the stroke. Wrap triplets into `hsl(…)`; pass real color functions through.
+const HSL_TRIPLET = /^-?[\d.]+\s+[\d.]+%\s+[\d.]+%(\s*\/\s*[\d.]+%?)?$/;
+export const asCanvasColor = (value) => (HSL_TRIPLET.test(value) ? `hsl(${value})` : value);
+// Resolve a CSS custom property to a CONCRETE rgb() string. Reading the property directly yields its raw
+// authored value (e.g. `oklch(0.235 0.01 275)`), which ECharts/zrender — and especially the DOM tooltip's
+// background — can't reliably parse, so it silently falls back to its translucent default. We instead set
+// `color: var(--token)` on a throwaway probe in the theme element's subtree and read the *computed* color,
+// which the browser has already resolved to `rgb(…)`. Works for oklch, hsl-triplet, or hex tokens alike.
+const readToken = (el, name, fallback) => {
+    const probe = document.createElement('span');
+    probe.style.cssText = `color: var(${name}); position: absolute; visibility: hidden; pointer-events: none`;
+    el.appendChild(probe);
+    const rgb = getComputedStyle(probe).color;
+    probe.remove();
+    // An unresolved var computes to the inherited color or fully-transparent black; treat that as "missing".
+    return rgb && rgb !== 'rgba(0, 0, 0, 0)' ? rgb : fallback;
+};
+// Element whose computed tokens reflect the theme: the viewer root when embedded, else <html>.
+const probeElement = () => document.querySelector('.butin-viewer') ?? document.documentElement;
+const computeTheme = () => {
+    const el = probeElement();
+    const muted = readToken(el, '--muted-foreground', '#888');
+    const border = readToken(el, '--border', '#2a2a35');
+    const popover = readToken(el, '--popover', '#1b1b22');
+    const popoverFg = readToken(el, '--popover-foreground', '#e8e8ea');
+    // Fallbacks for an unthemed embed; the live values come from the --chart-N tokens. Quiet-instrument:
+    // teal lead, then blue / amber / green / violet — no neon, no magenta.
+    const palette = ['#62d4c8', '#5b9bd5', '#d9a441', '#4bbf8a', '#9b7fd4'].map((fb, i) => readToken(el, `--chart-${i + 1}`, fb));
+    return {
+        LABEL: { color: muted, fontSize: 11 },
+        AXIS_LINE: {
+            axisLine: { lineStyle: { color: border } },
+            splitLine: { lineStyle: { color: border } }
+        },
+        TOOLTIP: { trigger: 'axis', backgroundColor: popover, borderColor: border, textStyle: { color: popoverFg } },
+        LEGEND_TEXT: muted,
+        ACCENT: palette[0],
+        PALETTE: palette
+    };
+};
+// Resolved ECharts styling for the current theme. Returns new objects whenever `.dark` toggles on
+// <html>/<body>, so charts that fold these into a useMemo option builder re-color on the next render.
+export const useEchartsTheme = () => {
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        const observer = new MutationObserver(() => setTick((t) => t + 1));
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+        if (document.body) {
+            observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+        }
+        return () => observer.disconnect();
+    }, []);
+    return useMemo(() => computeTheme(), [tick]);
+};

package/dist/lib/format.d.ts

@@ -0,0 +1,4 @@
+export declare const formatUsd: (n: number) => string;
+export declare const formatMoney: (n: number, currency?: string, locale?: string) => string;
+export declare const formatUsdCompact: (n: number) => string;
+export declare const formatMoneyCompact: (n: number, currency?: string, locale?: string) => string;

package/dist/lib/format.js

@@ -0,0 +1,18 @@
+// Format a number as USD (e.g. 1234.5 → "$1,234.50").
+export const formatUsd = (n) => n.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+// Format a number in an explicit ISO-4217 currency (e.g. 1234.5, 'CAD' → "CA$1,234.50").
+export const formatMoney = (n, currency = 'USD', locale = 'en-US') => n.toLocaleString(locale, { style: 'currency', currency });
+// Compact USD for tight spaces: 2_230_000 → "$2.23M", 12_400 → "$12.4k", 52 → "$52". Keeps the sign.
+export const formatUsdCompact = (n) => {
+    const abs = Math.abs(n);
+    const sign = n < 0 ? '-' : '';
+    if (abs >= 1_000_000) {
+        return `${sign}$${(abs / 1_000_000).toFixed(2)}M`;
+    }
+    if (abs >= 1_000) {
+        return `${sign}$${(abs / 1_000).toFixed(1)}k`;
+    }
+    return `${sign}$${Math.round(abs)}`;
+};
+// Compact money in an explicit currency via Intl compact notation: 2_230_000 CAD → "CA$2.2M", 12_400 → "$12K".
+export const formatMoneyCompact = (n, currency = 'USD', locale = 'en-US') => n.toLocaleString(locale, { style: 'currency', currency, notation: 'compact', maximumFractionDigits: 1 });

package/dist/lib/monthly-buckets.d.ts

@@ -0,0 +1,9 @@
+export interface MonthBucket {
+    month: string;
+    amount: number;
+}
+export declare const monthRange: (start: string, end: string) => string[];
+export declare const monthlyBuckets: (invoices: Array<{
+    date?: string;
+    amount: number;
+}>, nowMonth: string) => MonthBucket[];

package/dist/lib/monthly-buckets.js

@@ -0,0 +1,32 @@
+// Bucket invoices onto a continuous YYYY-MM axis from the earliest invoice through the latest (or the
+// current month), gaps filled with 0 so a month with no spend stays an aligned slot instead of
+// collapsing. Single series, no year picker. `nowMonth` is passed in to keep this pure/testable.
+import { round2 } from '@butinapp/sdk/util';
+import { groupBy, sumBy } from 'lodash-es';
+import { DateTime } from 'luxon';
+const monthOf = (date) => date.slice(0, 7);
+export const monthRange = (start, end) => {
+    const out = [];
+    const last = DateTime.fromFormat(end, 'yyyy-MM', { zone: 'utc' });
+    for (let m = DateTime.fromFormat(start, 'yyyy-MM', { zone: 'utc' }); m <= last; m = m.plus({ months: 1 })) {
+        out.push(m.toFormat('yyyy-MM'));
+    }
+    return out;
+};
+export const monthlyBuckets = (invoices, nowMonth) => {
+    const dated = invoices.filter((inv) => typeof inv.date === 'string' && inv.date.length >= 7);
+    if (dated.length === 0) {
+        return [];
+    }
+    const months = dated.map((inv) => monthOf(inv.date)).sort();
+    const start = months[0];
+    let end = months[months.length - 1];
+    if (nowMonth > end) {
+        end = nowMonth;
+    }
+    const byMonth = groupBy(dated, (inv) => monthOf(inv.date));
+    return monthRange(start, end).map((month) => ({
+        month,
+        amount: round2(sumBy(byMonth[month] ?? [], (inv) => inv.amount))
+    }));
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/lib/utils.js

@@ -0,0 +1,3 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export const cn = (...inputs) => twMerge(clsx(inputs));

package/dist/primitives.d.ts

@@ -0,0 +1,28 @@
+export { Button, buttonVariants } from './components/button.js';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './components/card.js';
+export { Input } from './components/input.js';
+export { Badge, badgeVariants } from './components/badge.js';
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetTitle } from './components/sheet.js';
+export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './components/dialog.js';
+export { Skeleton } from './components/skeleton.js';
+export { Separator } from './components/separator.js';
+export { Label } from './components/label.js';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/tooltip.js';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/tabs.js';
+export { Switch } from './components/switch.js';
+export { Checkbox } from './components/checkbox.js';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem } from './components/dropdown-menu.js';
+export { Select } from './components/select.js';
+export type { SelectOption } from './components/select.js';
+export { Combobox } from './components/combobox.js';
+export type { ComboboxProps } from './components/combobox.js';
+export { ServiceIcon, ServiceIconProvider, readableOn } from './components/service-icon.js';
+export type { ServiceIconResolver } from './components/service-icon.js';
+export { DataTable } from './components/data-table.js';
+export type { DataTableProps } from './components/data-table.js';
+export type { DataTableColumn, DataTableState } from './components/data-table-model.js';
+export { EChart } from './components/echart.js';
+export { Sparkline } from './components/sparkline.js';
+export { Progress } from './components/progress.js';
+export { StatCard } from './features/charts.js';
+export { cn } from './lib/utils.js';

package/dist/primitives.js

@@ -0,0 +1,26 @@
+// @butinapp/ui/primitives — the design-system primitives: pure, prop-driven, theme-portable visual
+// components with no app/IPC/Electron concept in them. The foundation every other layer composes.
+export { Button, buttonVariants } from './components/button.js';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './components/card.js';
+export { Input } from './components/input.js';
+export { Badge, badgeVariants } from './components/badge.js';
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetTitle } from './components/sheet.js';
+export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './components/dialog.js';
+export { Skeleton } from './components/skeleton.js';
+export { Separator } from './components/separator.js';
+export { Label } from './components/label.js';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/tooltip.js';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/tabs.js';
+export { Switch } from './components/switch.js';
+export { Checkbox } from './components/checkbox.js';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem } from './components/dropdown-menu.js';
+export { Select } from './components/select.js';
+export { Combobox } from './components/combobox.js';
+export { ServiceIcon, ServiceIconProvider, readableOn } from './components/service-icon.js';
+export { DataTable } from './components/data-table.js';
+export { EChart } from './components/echart.js';
+export { Sparkline } from './components/sparkline.js';
+export { Progress } from './components/progress.js';
+export { StatCard } from './features/charts.js';
+// The class-merge helper every layer builds on.
+export { cn } from './lib/utils.js';

package/dist/shell.d.ts

@@ -0,0 +1,8 @@
+export { connDotClass, connLabel, ConnDot } from './features/shell/conn-state.js';
+export type { ConnState } from './features/shell/conn-state.js';
+export { AppShell } from './features/shell/app-shell.js';
+export { ThemeToggle } from './features/shell/theme-toggle.js';
+export { Sidebar } from './features/shell/sidebar.js';
+export type { SidebarService, SidebarTarget, SidebarActive } from './features/shell/sidebar.js';
+export { ServiceTabs } from './features/shell/service-tabs.js';
+export type { ServiceTab } from './features/shell/service-tabs.js';

package/dist/shell.js

@@ -0,0 +1,10 @@
+// @butinapp/ui/shell — the embeddable shell scaffolding: the structural, prop-driven pieces an embed composes
+// into a dashboard (the app frame, the service sidebar, a service's capability tabs, the connection dot, the
+// theme switch). NOT the Butin app's own chrome — profiles, vault, settings, notifications, and export
+// are app-specific and live in core (core/src/renderer/chrome). The out-of-repo viewer builds its
+// read-only dashboard from exactly this + /dashboard + /primitives.
+export { connDotClass, connLabel, ConnDot } from './features/shell/conn-state.js';
+export { AppShell } from './features/shell/app-shell.js';
+export { ThemeToggle } from './features/shell/theme-toggle.js';
+export { Sidebar } from './features/shell/sidebar.js';
+export { ServiceTabs } from './features/shell/service-tabs.js';

package/dist/theme.css

@@ -0,0 +1,137 @@
+/* The Butin design-system theme — the single source of truth for brand tokens.
+
+   A host's Tailwind build imports this right after `@import 'tailwindcss'`:
+     @import 'tailwindcss';
+     @import '@butinapp/ui/theme.css';
+     @source '<the host's component source>';   // host still scans the source it renders
+
+   It carries the semantic token palette (shadcn-named, dark-first), the `@theme inline` mapping that
+   turns those tokens into utilities, and the dark variant. This is SOURCE the host's single Tailwind
+   build consumes — @butinapp/ui still ships no compiled CSS (no preflight, no utilities), so there is no
+   second build to collide with. Importing the same tokens twice is idempotent.
+
+   Theme-portable by design: an embedder that wants its OWN palette skips this import and defines the same
+   semantic tokens itself; the components only ever reference the names. */
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  color-scheme: light;
+  --radius: 0.5rem;
+  /* Surface elevation mirrors dark's stack (canvas → chrome → card), inverted: the canvas is a soft
+     cool-gray so white cards lift off it. A flat all-white surface reads as unfinished. */
+  --background: oklch(0.973 0.004 275);
+  --foreground: oklch(0.205 0.014 275);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.205 0.014 275);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.205 0.014 275);
+  --primary: oklch(0.58 0.09 188);
+  --primary-foreground: oklch(0.99 0.005 220);
+  --secondary: oklch(0.955 0.006 275);
+  --secondary-foreground: oklch(0.25 0.012 275);
+  --muted: oklch(0.955 0.006 275);
+  --muted-foreground: oklch(0.5 0.018 275);
+  --accent: oklch(0.94 0.008 275);
+  --accent-foreground: oklch(0.25 0.012 275);
+  --destructive: oklch(0.55 0.22 27);
+  --destructive-foreground: oklch(0.99 0.01 27);
+  --border: oklch(0.912 0.006 275);
+  --input: oklch(0.78 0.008 275);
+  --ring: oklch(0.58 0.09 188);
+  --chart-1: oklch(0.62 0.15 215);
+  --chart-2: oklch(0.55 0.1 230);
+  --chart-3: oklch(0.63 0.16 75);
+  --chart-4: oklch(0.6 0.16 162);
+  --chart-5: oklch(0.55 0.2 292);
+  --sidebar: oklch(0.965 0.005 275);
+  --sidebar-foreground: oklch(0.205 0.014 275);
+  --sidebar-primary: oklch(0.58 0.09 188);
+  --sidebar-primary-foreground: oklch(0.99 0.005 220);
+  --sidebar-accent: oklch(0.93 0.008 275);
+  --sidebar-accent-foreground: oklch(0.25 0.012 275);
+  --sidebar-border: oklch(0.912 0.006 275);
+  --sidebar-ring: oklch(0.58 0.09 188);
+}
+
+.dark {
+  color-scheme: dark;
+  --background: oklch(0.177 0.011 261);
+  --foreground: oklch(0.957 0.006 256);
+  --card: oklch(0.22 0.016 257);
+  --card-foreground: oklch(0.957 0.006 256);
+  --popover: oklch(0.258 0.02 255);
+  --popover-foreground: oklch(0.957 0.006 256);
+  --primary: oklch(0.801 0.105 186);
+  --primary-foreground: oklch(0.2 0.02 250);
+  --secondary: oklch(0.282 0.022 254);
+  --secondary-foreground: oklch(0.957 0.006 256);
+  --muted: oklch(0.282 0.022 254);
+  --muted-foreground: oklch(0.628 0.029 252);
+  --accent: oklch(0.3 0.018 255);
+  --accent-foreground: oklch(0.957 0.006 256);
+  --destructive: oklch(0.681 0.148 30);
+  --destructive-foreground: oklch(0.97 0.01 30);
+  --border: oklch(1 0 0 / 6%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.801 0.105 186);
+  --chart-1: oklch(0.801 0.105 186);
+  --chart-2: oklch(0.62 0.1 230);
+  --chart-3: oklch(0.751 0.13 80);
+  --chart-4: oklch(0.725 0.131 161);
+  --chart-5: oklch(0.66 0.11 300);
+  --sidebar: oklch(0.195 0.012 259);
+  --sidebar-foreground: oklch(0.957 0.006 256);
+  --sidebar-primary: oklch(0.801 0.105 186);
+  --sidebar-primary-foreground: oklch(0.2 0.02 250);
+  --sidebar-accent: oklch(0.282 0.022 254);
+  --sidebar-accent-foreground: oklch(0.957 0.006 256);
+  --sidebar-border: oklch(1 0 0 / 6%);
+  --sidebar-ring: oklch(0.801 0.105 186);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Type system: geometric grotesk for the wordmark + headlines (font-display), monospace for all
+     data/status/numbers (font-mono — the "operator surface" signal), Inter/system for body. A host loads
+     the actual variable-font files; the stacks fall back gracefully when it doesn't. */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-display: 'Space Grotesk Variable', 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
+}

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+export type { CapabilityView, ConfigFieldView, PluginView } from '@butinapp/shapes';
+export type ReportResult = {
+    ok: boolean;
+    data?: unknown;
+    error?: string;
+    lastRunAt?: string;
+};
+export type VerifyResult = {
+    ok: boolean;
+    error?: string;
+};

package/dist/types.js

@@ -0,0 +1,6 @@
+// View-model props for the presentational components. The plugin view-model (PluginView · CapabilityView ·
+// ConfigFieldView) is defined ONCE in @butinapp/shapes — the neutral package below both core and ui — and
+// re-exported here so @butinapp/ui consumers keep one import site. core's IPC DTO (`PluginSummary`) is built
+// as `PluginView & { …extras }`, so the app passes its DTOs straight through and an embed feeds the same
+// components from a published snapshot. The two outcome shapes below stay here — they're ui-local.
+export {};