@butinapp/ui 0.1.0 → 0.1.2

package/dist/components/data-table.js

@@ -8,8 +8,9 @@ import { Checkbox } from './checkbox.js';
 import { formatRows, normalizeTablePrefs, selection as sel, sortRows } from './data-table-model.js';
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu.js';
 import { Input } from './input.js';
-// First entry is the default selection (see pageSize seeding below).
 const DEFAULT_PAGE_SIZES = [15, 25, 50, 100];
+// The page size a table opens at when nothing is saved (see pageSize seeding below).
+const DEFAULT_PAGE_SIZE = 25;
 // Generic, headless, theme-portable table. TanStack owns sorting/column-order/visibility/pagination;
 // selection (external Set) and grouping (manual collapsible sections over the sorted rows) are layered
 // on top so grouping stays fully controllable. Pure — prefs in via props, export out via callback.
@@ -45,7 +46,8 @@ export const DataTable = ({ columns, rows, getRowId, selection, onSelectionChang
         sorting: (seed.sort ? [{ id: seed.sort.key, desc: seed.sort.dir === 'desc' }] : []),
         columnOrder: (seed.columnOrder ?? []),
         columnVisibility: (seed.columnVisibility ?? {}),
-        pageSize: seed.pageSize ?? pageSizes[0] ?? 15
+        pageSize: seed.pageSize ??
+            (pageSizes.includes(DEFAULT_PAGE_SIZE) ? DEFAULT_PAGE_SIZE : (pageSizes[0] ?? DEFAULT_PAGE_SIZE))
     }), [seed, pageSizes]);
     const [sorting, setSorting] = useState(seedStates.sorting);
     const [columnOrder, setColumnOrder] = useState(seedStates.columnOrder);

package/dist/features/shell/sidebar.d.ts

@@ -11,6 +11,8 @@ export interface SidebarService {
 }
 export type SidebarTarget = {
     kind: 'overview';
+} | {
+    kind: 'people';
 } | {
     kind: 'management';
 } | {
@@ -20,12 +22,13 @@ export type SidebarTarget = {
     serviceId: string;
 };
 export type SidebarActive = SidebarTarget;
-export declare const Sidebar: ({ services, active, onSelect, onNavigate, onOpenSettings, showManagement, showDeveloper }: {
+export declare const Sidebar: ({ services, active, onSelect, onNavigate, onOpenSettings, showManagement, showPeople, showDeveloper }: {
     services: SidebarService[];
     active: SidebarActive;
     onSelect: (target: SidebarTarget) => void;
     onNavigate?: () => void;
     onOpenSettings?: () => void;
     showManagement?: boolean;
+    showPeople?: boolean;
     showDeveloper?: boolean;
 }) => import("react").JSX.Element;

package/dist/features/shell/sidebar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Database, LayoutGrid, Search, Settings, Wrench } from 'lucide-react';
+import { Database, LayoutGrid, Search, Settings, Users, Wrench } from 'lucide-react';
 import { useState } from 'react';
 import { useLabels } from '../../i18n/index.js';
 import { cn, Input, ServiceIcon } from '../../primitives.js';
@@ -10,7 +10,7 @@ const rowClass = (active) => cn('flex w-full cursor-pointer items-center gap-2 r
 // The fixed left rail: Management link, then a searchable service list with Overview pinned first. Each
 // service shows its brand-color icon and a connection-confidence dot (when it has data). Pure +
 // prop-driven; the host owns navigation. `onNavigate` lets a mobile sheet close itself after a pick.
-export const Sidebar = ({ services, active, onSelect, onNavigate, onOpenSettings, showManagement = true, showDeveloper = true }) => {
+export const Sidebar = ({ services, active, onSelect, onNavigate, onOpenSettings, showManagement = true, showPeople = false, showDeveloper = true }) => {
     const t = useLabels();
     const [query, setQuery] = useState('');
     const filtered = services.filter((s) => s.name.toLowerCase().includes(query.trim().toLowerCase()));
@@ -24,7 +24,7 @@ export const Sidebar = ({ services, active, onSelect, onNavigate, onOpenSettings
                             return (_jsxs("div", { title: t.sidebarDisabledHint, "aria-disabled": true, className: cn(rowClass(false), 'cursor-not-allowed opacity-40 hover:bg-transparent'), children: [_jsx(ServiceIcon, { id: s.id, icon: s.icon, name: s.name, color: s.color, size: 16 }), _jsx("span", { className: "truncate", children: s.name })] }, s.id));
                         }
                         return (_jsxs("button", { className: rowClass(isActive), onClick: () => go({ kind: 'service', serviceId: s.id }), children: [_jsx(ServiceIcon, { id: s.id, icon: s.icon, name: s.name, color: s.color, size: 16 }), _jsx("span", { className: "truncate", children: s.name }), s.dot ? (_jsx(ConnDot, { state: s.dot, testing: s.testing, className: "ml-auto size-1.5 shrink-0", title: s.dot })) : null] }, s.id));
-                    }))] }), showManagement || showDeveloper || onOpenSettings ? (_jsxs("div", { className: "space-y-0.5 border-t pt-2", children: [_jsx("div", { className: "text-muted-foreground px-2 pb-1 text-[10px] font-medium tracking-wider uppercase", children: t.systemHeading }), showManagement ? (_jsxs("button", { className: rowClass(active.kind === 'management'), onClick: () => go({ kind: 'management' }), children: [_jsx(Database, { className: "size-4 shrink-0" }), t.navManagement] })) : null, showDeveloper ? (_jsxs("button", { className: rowClass(active.kind === 'developer'), onClick: () => go({ kind: 'developer' }), children: [_jsx(Wrench, { className: "size-4 shrink-0" }), t.navDeveloper] })) : null, onOpenSettings ? (_jsxs("button", { className: rowClass(false), onClick: () => {
+                    }))] }), showManagement || showPeople || showDeveloper || onOpenSettings ? (_jsxs("div", { className: "space-y-0.5 border-t pt-2", children: [_jsx("div", { className: "text-muted-foreground px-2 pb-1 text-[10px] font-medium tracking-wider uppercase", children: t.systemHeading }), showManagement ? (_jsxs("button", { className: rowClass(active.kind === 'management'), onClick: () => go({ kind: 'management' }), children: [_jsx(Database, { className: "size-4 shrink-0" }), t.navManagement] })) : null, showPeople ? (_jsxs("button", { className: rowClass(active.kind === 'people'), onClick: () => go({ kind: 'people' }), children: [_jsx(Users, { className: "size-4 shrink-0" }), t.navPeople] })) : null, showDeveloper ? (_jsxs("button", { className: rowClass(active.kind === 'developer'), onClick: () => go({ kind: 'developer' }), children: [_jsx(Wrench, { className: "size-4 shrink-0" }), t.navDeveloper] })) : null, onOpenSettings ? (_jsxs("button", { className: rowClass(false), onClick: () => {
                             onOpenSettings();
                             onNavigate?.();
                         }, children: [_jsx(Settings, { className: "size-4 shrink-0" }), t.navSettings] })) : null] })) : null] }));

package/dist/i18n/labels.d.ts

@@ -11,6 +11,9 @@ export interface ButinLabels {
     navManagement: string;
     navOverview: string;
     navDeveloper: string;
+    navPeople: string;
+    peopleSummary: (people: number, services: number) => string;
+    peopleEmpty: string;
     logsHeading: string;
     navSettings: string;
     devNavBrowser: string;
@@ -171,6 +174,7 @@ export interface ButinLabels {
     refreshedAgo: (relative: string, absolute: string) => string;
     refreshWarning: string;
     connectPrompt: (service: string) => string;
+    disconnectedWithData: (service: string) => string;
     noDataYet: string;
     serviceCount: (n: number) => string;
     overviewSpending: string;

package/dist/i18n/labels.js

@@ -9,6 +9,9 @@ export const en = {
     navManagement: 'Management',
     navOverview: 'Overview',
     navDeveloper: 'Developer',
+    navPeople: 'People',
+    peopleSummary: (people, services) => `${people} ${people === 1 ? 'person' : 'people'} across ${services} ${services === 1 ? 'service' : 'services'}`,
+    peopleEmpty: 'No member data yet — services that report team members will show their people here after a refresh.',
     logsHeading: 'Logs',
     navSettings: 'Settings',
     devNavBrowser: 'Navigation browser',
@@ -179,6 +182,7 @@ export const en = {
     refreshedAgo: (relative, absolute) => `refreshed ${relative} · ${absolute}`,
     refreshWarning: 'Refresh failed — showing the last loaded data.',
     connectPrompt: (service) => `Connect ${service} to fetch its first report.`,
+    disconnectedWithData: (service) => `${service} is disconnected — showing the last loaded data.`,
     noDataYet: 'No data yet',
     serviceCount: (n) => `${n} ${n === 1 ? 'service' : 'services'}`,
     overviewSpending: 'Spending',
@@ -422,6 +426,9 @@ export const fr = {
     navManagement: 'Gestion',
     navOverview: 'Aperçu',
     navDeveloper: 'Développeur',
+    navPeople: 'Personnes',
+    peopleSummary: (people, services) => `${people} personne${people > 1 ? 's' : ''} sur ${services} service${services > 1 ? 's' : ''}`,
+    peopleEmpty: 'Aucune donnée de membres pour l’instant — les services qui rapportent des membres d’équipe apparaîtront ici après une actualisation.',
     logsHeading: 'Journaux',
     navSettings: 'Réglages',
     devNavBrowser: 'Navigateur',
@@ -592,6 +599,7 @@ export const fr = {
     refreshedAgo: (relative, absolute) => `actualisé ${relative} · ${absolute}`,
     refreshWarning: 'Échec du rafraîchissement — affichage des dernières données chargées.',
     connectPrompt: (service) => `Connectez ${service} pour récupérer ses premières données.`,
+    disconnectedWithData: (service) => `${service} est déconnecté — affichage des dernières données chargées.`,
     noDataYet: 'Aucune donnée',
     serviceCount: (n) => `${n} ${n === 1 ? 'service' : 'services'}`,
     overviewSpending: 'Dépenses',

package/dist/lib/echarts-theme.js

@@ -20,8 +20,9 @@ const readToken = (el, name, fallback) => {
     // 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;
+// Element whose computed tokens reflect the theme: the nearest `.butin` scope (an embed wrapper, or the app's
+// <html>), which is where the token values are defined. Falls back to <html> if the class isn't found.
+const probeElement = () => document.querySelector('.butin') ?? document.documentElement;
 const computeTheme = () => {
     const el = probeElement();
     const muted = readToken(el, '--muted-foreground', '#888');

package/dist/theme.css

@@ -10,12 +10,21 @@
    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.
 
+   SCOPED, not global: the concrete token VALUES live on the `.butin` scope class, never on the document
+   `:root`. That's the containment guarantee — a host embedding a Butin surface imports this file and its
+   own `:root` (and its own shadcn `--background` / `--chart-*` tokens) is never overwritten; Butin's values
+   apply only inside the `.butin` subtree. Every Butin root carries the class: the app's <html>, and each
+   embed wrapper (@butinapp/viewer's ButinViewer/ButinView). The @theme mapping stays global (it only
+   defines `--color-*` utility aliases as `var(--token)`, late-bound to whichever scope resolves them), so
+   Butin's `bg-background` inside `.butin` reads Butin's value and the host's utilities outside read the
+   host's.
+
    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. */
+   shadcn-named tokens on `.butin` itself; the components only ever reference the names. */
 
 @custom-variant dark (&:is(.dark *));
 
-:root {
+.butin {
   color-scheme: light;
   --radius: 0.5rem;
   /* Surface elevation mirrors dark's stack (canvas → chrome → card), inverted: the canvas is a soft
@@ -54,7 +63,11 @@
   --sidebar-ring: oklch(0.58 0.09 188);
 }
 
-.dark {
+/* Dark applies when the scope element itself is dark (`.butin.dark`, the standalone viewer's own toggle) or
+   sits under a dark ancestor (`.dark .butin`, a host that owns the theme). Both resolve the dark values only
+   within the Butin subtree. */
+.butin.dark,
+.dark .butin {
   color-scheme: dark;
   --background: oklch(0.177 0.011 261);
   --foreground: oklch(0.957 0.006 256);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@butinapp/ui",
-  "version": "0.1.0",
-  "description": "Butin's embeddable, theme-portable design system + the generic data-view renderer (DashboardRenderer, Overview, app shell). Pure, prop-driven, no Electron. Ships theme.css; a Tailwind host generates the utilities.",
+  "version": "0.1.2",
+  "description": "Butin's embeddable, theme-portable design system + the generic data-view renderer (DashboardRenderer, Overview, app shell). Pure, prop-driven, no Electron. Ships a self-contained, .butin-scoped butin.css for drop-in embeds (zero host build), plus theme.css for a host that co-builds.",
   "homepage": "https://butin.app",
   "bugs": "https://github.com/butinapp/butin/issues",
   "license": "MIT",
@@ -37,7 +37,8 @@
       "types": "./dist/i18n/index.d.ts",
       "import": "./dist/i18n/index.js"
     },
-    "./theme.css": "./dist/theme.css"
+    "./theme.css": "./dist/theme.css",
+    "./butin.css": "./dist/butin.css"
   },
   "publishConfig": {
     "access": "public"
@@ -52,10 +53,11 @@
     "luxon": "^3.7.2",
     "radix-ui": "^1.5.0",
     "tailwind-merge": "^3.6.0",
-    "@butinapp/shapes": "0.1.0",
-    "@butinapp/sdk": "0.1.0"
+    "@butinapp/sdk": "0.1.2",
+    "@butinapp/shapes": "0.1.2"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -63,14 +65,16 @@
     "@types/luxon": "^3.7.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "jsdom": "^29.1.1"
+    "jsdom": "^29.1.1",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.1"
   },
   "peerDependencies": {
     "react": "^19.2.7",
     "react-dom": "^19.2.7"
   },
   "scripts": {
-    "build": "tsgo -p tsconfig.build.json && node scripts/copy-assets.mjs",
+    "build": "tsgo -p tsconfig.build.json && node scripts/copy-assets.mjs && node scripts/build-css.mjs",
     "typecheck": "tsgo --noEmit -p tsconfig.json",
     "test": "vitest run"
   },