@alia.onl/sdk 22.2.0 → 22.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @alia.onl/sdk
 
+## 22.3.0
+
+- **Decks and dashboards on the canvas.** `CanvasComponent` draws the canvas tool's two new
+  types: a `deck` (one card per slide: title, subtitle, bullets, body) and a `dashboard` (its
+  stats in a row, then charts, tables and notes on the chart, table and Markdown renderers).
+
 ## 22.2.0
 
 - **Awaited host tools.** `AliaHostToolDefinition.awaitsResult: true` declares a tool whose

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "22.2.0",
+  "version": "22.3.0",
   "description": "Alia AI chat SDK — the conversation runtime, chat UI, voice calls and dictation for Oxy apps",
   "main": "src/index.ts",
   "react-native": "src/index.ts",

package/src/components/canvas/CanvasComponent.tsx

@@ -3,6 +3,8 @@ import { Muted, Text } from '@oxy.so/bloom/typography';
 import { View } from 'react-native';
 import { ChartRenderer } from './ChartRenderer';
 import { CodeRenderer } from './CodeRenderer';
+import { DashboardRenderer } from './DashboardRenderer';
+import { DeckRenderer } from './DeckRenderer';
 import { FormRenderer } from './FormRenderer';
 import { MarkdownRenderer } from './MarkdownRenderer';
 import { TableRenderer } from './TableRenderer';
@@ -45,6 +47,10 @@ export function CanvasComponent({ component, onFormSubmit }: CanvasComponentProp
         return <MarkdownRenderer data={component.data} />;
       case 'artifact':
         return <MarkdownRenderer data={{ content: component.data.content }} />;
+      case 'deck':
+        return <DeckRenderer data={component.data} />;
+      case 'dashboard':
+        return <DashboardRenderer data={component.data} />;
       default:
         return <Muted>{t('panels.canvas.unsupported', { type: component.type })}</Muted>;
     }

package/src/components/canvas/DashboardRenderer.tsx

@@ -0,0 +1,70 @@
+import { Muted, Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
+import { ChartRenderer } from './ChartRenderer';
+import { MarkdownRenderer } from './MarkdownRenderer';
+import { TableRenderer } from './TableRenderer';
+
+export type DashboardWidget =
+  | { kind: 'stat'; label: string; value: string; delta?: string }
+  | {
+      kind: 'chart';
+      title?: string;
+      chartType: 'bar' | 'line' | 'pie';
+      labels: string[];
+      datasets: { label: string; values: number[] }[];
+    }
+  | { kind: 'table'; title?: string; headers: string[]; rows: string[][] }
+  | { kind: 'text'; title?: string; content: string };
+
+interface DashboardRendererProps {
+  data: { widgets?: DashboardWidget[] };
+}
+
+/** A dashboard: its stats in a row, then its charts, tables and notes, each drawn by its own renderer. */
+export function DashboardRenderer({ data }: DashboardRendererProps) {
+  const widgets = Array.isArray(data.widgets) ? data.widgets : [];
+  const stats = widgets.filter(
+    (w): w is Extract<DashboardWidget, { kind: 'stat' }> => w.kind === 'stat',
+  );
+  const rest = widgets.filter((w) => w.kind !== 'stat');
+  return (
+    <View className="gap-3">
+      {stats.length > 0 && (
+        <View className="flex-row flex-wrap gap-3">
+          {stats.map((stat, i) => (
+            <View
+              key={i}
+              className="min-w-36 flex-1 gap-1 rounded-2xl border border-border bg-background-tertiary-default p-3"
+            >
+              <Muted>{stat.label}</Muted>
+              <Text variant="headline-semibold">{stat.value}</Text>
+              {stat.delta ? <Muted>{stat.delta}</Muted> : null}
+            </View>
+          ))}
+        </View>
+      )}
+      {rest.map((widget, i) => {
+        switch (widget.kind) {
+          case 'chart':
+            return <ChartRenderer key={i} data={widget} title={widget.title} />;
+          case 'table':
+            return (
+              <View key={i} className="gap-2">
+                {widget.title ? <Text variant="body-semibold">{widget.title}</Text> : null}
+                <TableRenderer data={widget} title={widget.title} />
+              </View>
+            );
+          case 'text':
+            return (
+              <View key={i} className="gap-2">
+                {widget.title ? <Text variant="body-semibold">{widget.title}</Text> : null}
+                <MarkdownRenderer data={{ content: widget.content }} />
+              </View>
+            );
+          default:
+            return null;
+        }
+      })}
+    </View>
+  );
+}

package/src/components/canvas/DeckRenderer.tsx

@@ -0,0 +1,43 @@
+import { Muted, Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
+import { MarkdownRenderer } from './MarkdownRenderer';
+
+export interface DeckSlide {
+  title: string;
+  subtitle?: string;
+  bullets?: string[];
+  body?: string;
+  notes?: string;
+}
+
+interface DeckRendererProps {
+  data: { slides?: DeckSlide[] };
+}
+
+/**
+ * A slide deck, one card per slide in reading order. Presenting it is the host's
+ * (Astro opens a deck in a tab of its own); here it is read like a document.
+ */
+export function DeckRenderer({ data }: DeckRendererProps) {
+  const slides = Array.isArray(data.slides) ? data.slides : [];
+  return (
+    <View className="gap-3">
+      {slides.map((slide, i) => (
+        <View
+          key={i}
+          className="gap-2 rounded-2xl border border-border bg-background-tertiary-default p-4"
+        >
+          <View className="flex-row items-baseline justify-between gap-2">
+            <Text variant="body-semibold">{slide.title}</Text>
+            <Muted>{i + 1}</Muted>
+          </View>
+          {slide.subtitle ? <Muted>{slide.subtitle}</Muted> : null}
+          {slide.bullets?.length ? (
+            <MarkdownRenderer data={{ content: slide.bullets.map((b) => `- ${b}`).join('\n') }} />
+          ) : null}
+          {slide.body ? <MarkdownRenderer data={{ content: slide.body }} /> : null}
+        </View>
+      ))}
+    </View>
+  );
+}