@gaia-ai/addon-gaia-ui 0.16.0 → 0.16.2

package/dist/src/Entity/ticket/Component/demo-statistics.d.ts

@@ -0,0 +1,14 @@
+import type { StatisticFigureGroup } from '../../../Statistics/client.js';
+/**
+ * Local example data for the optional Statistics demo tab.
+ *
+ * Shaped as the server's configured-figure contract, so the demo paints through
+ * the same `StatisticsFigures` composition the production Stats screens use
+ * rather than through a separate set of demo-only widgets. No value here is
+ * read from or written to a control plane.
+ */
+export interface StatisticExample {
+    readonly name: string;
+    readonly groups: readonly StatisticFigureGroup[];
+}
+export declare const STATISTIC_EXAMPLES: readonly StatisticExample[];

package/dist/src/Entity/ticket/Component/demo-statistics.js

@@ -0,0 +1,88 @@
+const DAYS = [
+    '2026-09-21',
+    '2026-09-22',
+    '2026-09-23',
+    '2026-09-24',
+    '2026-09-25',
+    '2026-09-26',
+    '2026-09-27',
+];
+const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const STATES = ['Ready', 'Coding', 'Review', 'Done'];
+const figure = (id, label, widget, categories, measurements) => {
+    const empty = measurements.every((measurement) => Object.values(measurement.values).every((value) => value === null));
+    return {
+        id,
+        label,
+        description: '',
+        widget,
+        generated: '2026-09-27T00:00:00Z',
+        filters: {},
+        categories,
+        measurements: measurements.map((measurement) => ({
+            value_type: 'integer',
+            unit: 'count',
+            ...measurement,
+        })),
+        empty: {
+            is_empty: empty,
+            message: empty ? 'No example values for this scenario.' : null,
+        },
+        cache: { max_age: 0, contexts: [], tags: [] },
+    };
+};
+const example = (name, states, trend) => {
+    const value = (values, index) => values[index] ?? null;
+    return {
+        name,
+        groups: [
+            {
+                id: 'demo',
+                label: 'Example statistics',
+                figures: [
+                    figure('demo-states', 'Tickets by state', 'matrix', STATES.map((state, index) => ({
+                        key: `state-${index}`,
+                        label: state,
+                    })), [
+                        {
+                            id: 'tickets',
+                            label: 'Tickets',
+                            values: Object.fromEntries(STATES.map((_, index) => [
+                                `state-${index}`,
+                                value(states, index),
+                            ])),
+                        },
+                    ]),
+                    figure('demo-share', 'Share by state', 'grouped_horizontal_bars', STATES.map((state, index) => ({
+                        key: `share-${index}`,
+                        label: state,
+                    })), [
+                        {
+                            id: 'share',
+                            label: 'Tickets',
+                            values: Object.fromEntries(STATES.map((_, index) => [
+                                `share-${index}`,
+                                value(states, index),
+                            ])),
+                        },
+                    ]),
+                    figure('demo-completed', 'Completed per day', 'line', DAYS.map((day, index) => ({
+                        key: day,
+                        label: WEEKDAYS[index] ?? day,
+                    })), [
+                        {
+                            id: 'completed',
+                            label: 'Completed',
+                            values: Object.fromEntries(DAYS.map((day, index) => [day, value(trend, index)])),
+                        },
+                    ]),
+                ],
+            },
+        ],
+    };
+};
+export const STATISTIC_EXAMPLES = [
+    example('Steady week', [12, 7, 4, 26], [3, 5, 4, 8, 6, 9, 11]),
+    example('Busy week', [5, 14, 8, 42], [5, 8, 6, 13, 9, 15, 18]),
+    example('Empty project', [], []),
+];

package/dist/src/Entity/ticket/Component/react-statistics.d.ts

@@ -1,22 +1,14 @@
-export declare const STATISTIC_EXAMPLES: readonly [{
-    readonly name: "Steady week";
-    readonly states: readonly [12, 7, 4, 26];
-    readonly trend: readonly [3, 5, 4, 8, 6, 9, 11];
-    readonly progress: 65;
-    readonly budget: 42;
-}, {
-    readonly name: "Busy week";
-    readonly states: readonly [5, 14, 8, 42];
-    readonly trend: readonly [5, 8, 6, 13, 9, 15, 18];
-    readonly progress: 90;
-    readonly budget: 78;
-}, {
-    readonly name: "Empty project";
-    readonly states: readonly [];
-    readonly trend: readonly [];
-    readonly progress: 0;
-    readonly budget: 0;
-}];
-export declare function ReactStatistics({ scenario }: {
-    scenario: number;
-}): import("react").ReactNode;
+import { type VNode } from '@opentui/core';
+export { STATISTIC_EXAMPLES } from './demo-statistics.js';
+export interface DemoStatisticsProps {
+    readonly id: string;
+    readonly scenario: number;
+    /** The figure grid's last measured width, and where a new one is reported. */
+    readonly width: number;
+    readonly onResize: (width: number) => void;
+}
+/**
+ * The demo's chart area: a labelled local scenario painted through the same
+ * `StatisticsFigures` the production Stats screens use.
+ */
+export declare function DemoStatistics({ id, scenario, width, onResize, }: DemoStatisticsProps): VNode;

package/dist/src/Entity/ticket/Component/react-statistics.js

@@ -1,44 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useTerminalDimensions } from '@opentui/react';
-import { Badge } from '../../../Vendor/termcn/ui/badge.js';
-import { BarChart } from '../../../Vendor/termcn/ui/bar-chart.js';
-import { Card } from '../../../Vendor/termcn/ui/card.js';
-import { Gauge } from '../../../Vendor/termcn/ui/gauge.js';
-import { LineChart } from '../../../Vendor/termcn/ui/line-chart.js';
-import { ProgressBar } from '../../../Vendor/termcn/ui/progress-bar.js';
-import { Sparkline } from '../../../Vendor/termcn/ui/sparkline.js';
-export const STATISTIC_EXAMPLES = [
-    {
-        name: 'Steady week',
-        states: [12, 7, 4, 26],
-        trend: [3, 5, 4, 8, 6, 9, 11],
-        progress: 65,
-        budget: 42,
-    },
-    {
-        name: 'Busy week',
-        states: [5, 14, 8, 42],
-        trend: [5, 8, 6, 13, 9, 15, 18],
-        progress: 90,
-        budget: 78,
-    },
-    { name: 'Empty project', states: [], trend: [], progress: 0, budget: 0 },
-];
-const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-const LABELS = ['Ready', 'Coding', 'Review', 'Done'];
-const COLORS = ['#60a5fa', '#a78bfa', '#fbbf24', '#34d399'];
-export function ReactStatistics({ scenario }) {
-    const { width } = useTerminalDimensions();
+import { BoxRenderable, h } from '@opentui/core';
+import { Badge } from '../../../Component/badge/index.js';
+import { FOREGROUND, paragraphNode, plainRun } from '../../../lib/vnode.js';
+import { StatisticsFigures } from '../../../Statistics/figures.js';
+import { STATISTIC_EXAMPLES } from './demo-statistics.js';
+export { STATISTIC_EXAMPLES } from './demo-statistics.js';
+/**
+ * The demo's chart area: a labelled local scenario painted through the same
+ * `StatisticsFigures` the production Stats screens use.
+ */
+export function DemoStatistics({ id, scenario, width, onResize, }) {
     const example = STATISTIC_EXAMPLES[scenario] ?? STATISTIC_EXAMPLES[0];
-    const wide = width >= 100;
-    const panelWidth = Math.max(24, Math.min(70, Math.floor((width - 12) / (wide ? 2 : 1))));
-    const chartWidth = Math.max(18, panelWidth - 6);
-    return (_jsxs("box", { flexDirection: "column", gap: 1, children: [_jsxs("box", { flexDirection: "row", gap: 2, children: [_jsx(Badge, { variant: "info", bordered: false, children: "Example data" }), _jsxs("text", { children: [example.name, " \u00B7 n: next scenario"] })] }), _jsxs("box", { flexDirection: wide ? 'row' : 'column', gap: 1, children: [_jsx(Card, { title: "Tickets by state", width: panelWidth, children: _jsx(BarChart, { data: example.states.map((value, index) => ({
-                                label: LABELS[index] ?? '',
-                                value,
-                                color: COLORS[index] ?? '#60a5fa',
-                            })), width: chartWidth }) }), _jsx(Card, { title: "Completed per day", subtitle: "Last 7 days \u00B7 example counts", width: panelWidth, children: _jsx(LineChart, { data: example.trend.map((value, index) => ({
-                                value,
-                                label: DAYS[index] ?? '',
-                            })), width: chartWidth, height: 6, color: "#34d399" }) })] }), _jsxs("box", { flexDirection: wide ? 'row' : 'column', gap: 1, children: [_jsxs(Card, { title: "Sprint progress", width: panelWidth, children: [_jsx(ProgressBar, { value: example.progress, width: Math.max(8, chartWidth - 6), color: "#60a5fa" }), _jsx(Sparkline, { data: [...example.trend], width: Math.max(8, chartWidth - 10), label: "Activity", color: "#34d399" })] }), _jsx(Card, { title: "Budget used", width: panelWidth, children: _jsx(Gauge, { value: example.budget, size: "md", color: "#fbbf24" }) })] })] }));
+    return h(BoxRenderable, { id, flexDirection: 'column', gap: 1 }, h(BoxRenderable, { id: `${id}-label`, flexDirection: 'row', gap: 2 }, Badge({ id: `${id}-badge`, label: 'Example data', variant: 'info' }), paragraphNode({
+        id: `${id}-scenario`,
+        runs: [plainRun(`${example?.name ?? ''} · n: next scenario`)],
+        fg: FOREGROUND,
+    })), StatisticsFigures({
+        id: `${id}-grid`,
+        groups: example?.groups ?? [],
+        width,
+        onResize,
+    }));
 }

package/dist/src/Entity/ticket/Component/ticket-content/index.d.ts

@@ -1,6 +1,21 @@
-import { type ReactNode } from 'react';
-import { type TicketContentModel, type TicketContentTab, type TicketProperty } from './model.js';
+import { type VNode } from '@opentui/core';
+import { type TicketContentEntry, type TicketContentModel, type TicketContentTab, type TicketProperty, type TicketSidebar } from './model.js';
+export declare const SIDEBAR_TABS: readonly [{
+    readonly id: "details";
+    readonly label: "Details";
+}, {
+    readonly id: "stats";
+    readonly label: "Stats";
+}, {
+    readonly id: "related";
+    readonly label: "Related";
+}];
+export type SidebarTabId = (typeof SIDEBAR_TABS)[number]['id'];
+/** The pane a sidebar opens on: Stats once the ticket is done, else Details. */
+export declare const defaultSidebarTab: (sidebar: TicketSidebar) => SidebarTabId;
 export interface TicketContentProps {
+    /** The owner every node id derives from. */
+    readonly id: string;
     readonly model: TicketContentModel;
     readonly tab: TicketContentTab;
     readonly selectedKey?: string;
@@ -8,5 +23,15 @@ export interface TicketContentProps {
     readonly select: (key: string) => void;
     readonly toggle: (key: string) => void;
     readonly activateProperty?: (item: TicketProperty) => void;
+    /** Terminal width — the Overview's side-by-side breakpoint reads it. */
+    readonly terminalColumns: number;
+    /** The visit's sidebar pane; absent means {@link defaultSidebarTab}. */
+    readonly sidebarTab?: SidebarTabId;
+    readonly onSidebarTab: (tab: SidebarTabId) => void;
+    /** The Planning document tab last chosen in this visit. */
+    readonly documentKey?: string;
+    readonly onDocumentTab: (key: string) => void;
 }
-export declare function TicketContent({ model, tab, selectedKey, expandedKeys, select, toggle, activateProperty, }: TicketContentProps): ReactNode;
+/** The Planning pane's active document: the selection, the visit's tab, or Description. */
+export declare const activeDocumentKey: (documents: readonly TicketContentEntry[], selectedKey: string | undefined, documentKey: string | undefined) => string | undefined;
+export declare function TicketContent(props: TicketContentProps): VNode;