@everystack/admin 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everystack/admin",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Declarative admin dashboard framework for PostgREST APIs",
   "license": "AGPL-3.0-only",
   "publishConfig": {
@@ -15,22 +15,33 @@
       "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./rpc": {
+      "types": "./src/rpc/resource-dashboard-rpc.ts",
+      "default": "./src/rpc/resource-dashboard-rpc.ts"
+    },
     "./presets/twitter": {
       "types": "./src/presets/twitter.ts",
       "default": "./src/presets/twitter.ts"
     }
   },
+  "scripts": {
+    "test": "jest",
+    "build": "tsc --build",
+    "lint": "tsc --noEmit"
+  },
   "dependencies": {
     "d3-scale": "4.0.2",
     "d3-time-format": "4.1.0"
   },
   "peerDependencies": {
-    "@everystack/api": ">=0.1.0",
-    "@everystack/ui": ">=0.1.0",
+    "@everystack/api": ">=0.2.4",
+    "@everystack/ui": ">=0.2.2",
     "react": "19.2.6",
     "react-native": "0.83.6"
   },
   "devDependencies": {
+    "@everystack/api": "workspace:*",
+    "@everystack/ui": "workspace:*",
     "@types/d3-scale": "4.0.9",
     "@types/d3-time-format": "4.0.3",
     "@types/jest": "29.5.14",
@@ -40,13 +51,6 @@
     "react": "19.2.6",
     "react-native": "0.83.6",
     "ts-jest": "29.4.9",
-    "typescript": "5.9.3",
-    "@everystack/api": "0.2.0",
-    "@everystack/ui": "0.2.0"
-  },
-  "scripts": {
-    "test": "jest",
-    "build": "tsc --build",
-    "lint": "tsc --noEmit"
+    "typescript": "5.9.3"
   }
-}
+}

package/src/adapters/EverystackAdapter.ts

@@ -120,6 +120,16 @@ export class EverystackAdapter implements DataAdapter {
     }
   }
 
+  async rpc<T = unknown>(fn: string, body?: unknown): Promise<T> {
+    const result = await this.client.rpc<T>(fn, body);
+
+    if (result.error) {
+      throw new Error(result.error.message);
+    }
+
+    return result.data as T;
+  }
+
   async aggregate(resource: string, params: AggregateParams): Promise<AggregateResult> {
     const selectParts: string[] = [];
 

package/src/adapters/types.ts

@@ -55,6 +55,12 @@ export interface DataAdapter {
    */
   aggregate?(resource: string, params: AggregateParams): Promise<AggregateResult>;
 
+  /**
+   * Call a named RPC on the backend (row actions, dashboards).
+   * Throws on error, like the other adapter methods.
+   */
+  rpc?<T = unknown>(fn: string, body?: unknown): Promise<T>;
+
   /**
    * Subscribe to real-time updates (optional)
    */

package/src/components/dashboard/Brush.tsx

@@ -1,139 +1,7 @@
 /**
- * Brush — Gesture-based selection overlay for chart brushing.
- *
- * Uses react-native PanResponder for cross-platform gesture tracking
- * (no dependency on react-native-gesture-handler).  Maps pixel
- * coordinates to data domain values via a d3 scale's `.invert()` method.
- *
- * Render as a sibling overlaid on top of chart content inside a
- * position: relative container.
+ * Brush — re-exported from @everystack/ui, the single chart vocabulary
+ * (docs/plans/admin-observability.md, decision 8).
  */
 
-import React, { useRef, useState } from 'react';
-import { View, PanResponder } from 'react-native';
-
-export interface BrushProps {
-  /** d3 scale with `.invert()` for mapping pixels → data domain. */
-  xScale: { invert: (px: number) => unknown };
-  /** Chart width in pixels. */
-  width: number;
-  /** Chart height in pixels. */
-  height: number;
-  /** Called when brush selection changes.  null = cleared. */
-  onBrush: (extent: [unknown, unknown] | null) => void;
-  /** Called when brush is cleared (double-tap). */
-  onClear?: () => void;
-  /** Overlay color for the selection region. */
-  brushColor?: string;
-}
-
-/**
- * Clamp a value between min and max.
- */
-export function clamp(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(max, value));
-}
-
-/**
- * Compute brush extent from two pixel positions and a scale.
- *
- * Returns domain values in [min, max] order regardless of drag direction.
- */
-export function computeBrushExtent(
-  startPx: number,
-  endPx: number,
-  width: number,
-  invert: (px: number) => unknown,
-): [unknown, unknown] {
-  const minPx = clamp(Math.min(startPx, endPx), 0, width);
-  const maxPx = clamp(Math.max(startPx, endPx), 0, width);
-  return [invert(minPx), invert(maxPx)];
-}
-
-export function Brush({
-  xScale,
-  width,
-  height,
-  onBrush,
-  onClear,
-  brushColor = 'rgba(99, 102, 241, 0.2)',
-}: BrushProps): React.ReactElement {
-  const [selection, setSelection] = useState<{ left: number; width: number } | null>(null);
-  const startXRef = useRef(0);
-  const lastTapRef = useRef(0);
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: () => true,
-
-      onPanResponderGrant: (evt) => {
-        const now = Date.now();
-        const x = evt.nativeEvent.locationX;
-
-        // Double-tap detection (< 300ms)
-        if (now - lastTapRef.current < 300) {
-          setSelection(null);
-          onBrush(null);
-          onClear?.();
-          lastTapRef.current = 0;
-          return;
-        }
-        lastTapRef.current = now;
-        startXRef.current = x;
-        setSelection({ left: x, width: 0 });
-      },
-
-      onPanResponderMove: (evt) => {
-        const currentX = evt.nativeEvent.locationX;
-        const startX = startXRef.current;
-        const left = clamp(Math.min(startX, currentX), 0, width);
-        const right = clamp(Math.max(startX, currentX), 0, width);
-        setSelection({ left, width: right - left });
-      },
-
-      onPanResponderRelease: (evt) => {
-        const endX = evt.nativeEvent.locationX;
-        const startX = startXRef.current;
-
-        // Minimum 4px drag to count as a brush (not just a tap)
-        if (Math.abs(endX - startX) < 4) {
-          setSelection(null);
-          return;
-        }
-
-        const extent = computeBrushExtent(startX, endX, width, xScale.invert.bind(xScale));
-        onBrush(extent);
-      },
-    }),
-  ).current;
-
-  return (
-    <View
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width,
-        height,
-      }}
-      {...panResponder.panHandlers}
-    >
-      {selection && selection.width > 0 && (
-        <View
-          style={{
-            position: 'absolute',
-            left: selection.left,
-            top: 0,
-            width: selection.width,
-            height,
-            backgroundColor: brushColor,
-            borderLeftWidth: 1,
-            borderRightWidth: 1,
-            borderColor: 'rgba(99, 102, 241, 0.5)',
-          }}
-        />
-      )}
-    </View>
-  );
-}
+export { Brush, clamp, computeBrushExtent } from '@everystack/ui/dashboard';
+export type { BrushProps } from '@everystack/ui/dashboard';

package/src/components/dashboard/DimensionBars.tsx

@@ -1,67 +1,7 @@
 /**
- * DimensionBars — Horizontal bar chart for any categorical dimension.
- *
- * Generalized from PlatformBars. Accepts title, data, colors, and filter state.
- * Tapping a bar toggles that value in the parent's filter state.
+ * DimensionBars — re-exported from @everystack/ui, the single chart
+ * vocabulary (docs/plans/admin-observability.md, decision 8).
  */
 
-import React from 'react';
-import { View, Text, Pressable } from 'react-native';
-
-export interface DimensionBarsProps {
-  title: string;
-  data: { value: string; count: number }[];
-  colors?: Record<string, string>;
-  activeFilters?: string[];
-  onFilter: (value: string) => void;
-}
-
-const DEFAULT_COLOR = '#6366f1';
-
-export function DimensionBars({ title, data, colors, activeFilters, onFilter }: DimensionBarsProps): React.ReactElement {
-  const sorted = [...data].sort((a, b) => b.count - a.count);
-  const maxValue = Math.max(...sorted.map(e => e.count), 1);
-
-  if (sorted.length === 0) {
-    return (
-      <View style={{ flex: 1 }}>
-        <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
-          {title}
-        </Text>
-        <Text style={{ color: '#9ca3af', fontSize: 12 }}>No data</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={{ flex: 1 }}>
-      <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
-        {title}
-      </Text>
-      {sorted.map((entry) => {
-        const color = colors?.[entry.value] ?? DEFAULT_COLOR;
-        const widthPercent = (entry.count / maxValue) * 100;
-        const isActive = activeFilters?.includes(entry.value);
-
-        return (
-          <Pressable
-            key={entry.value}
-            onPress={() => onFilter(entry.value)}
-            style={{ marginBottom: 6, opacity: activeFilters && !isActive ? 0.4 : 1 }}
-          >
-            <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 2 }}>
-              <Text style={{ fontSize: 11, color: '#374151', flex: 1 }}>{entry.value}</Text>
-              <Text style={{ fontSize: 11, color: '#6b7280', fontWeight: '500' }}>{entry.count}</Text>
-            </View>
-            <View style={{ height: 12, backgroundColor: '#f1f5f9', borderRadius: 6 }}>
-              <View style={{
-                height: 12, width: `${widthPercent}%`, backgroundColor: color,
-                borderRadius: 6, minWidth: 4,
-              }} />
-            </View>
-          </Pressable>
-        );
-      })}
-    </View>
-  );
-}
+export { DimensionBars } from '@everystack/ui/dashboard';
+export type { DimensionBarsProps } from '@everystack/ui/dashboard';

package/src/components/dashboard/DimensionDonut.tsx

@@ -1,98 +1,7 @@
 /**
- * DimensionDonut — Stacked bar showing distribution for any categorical dimension.
- *
- * Generalized from LevelDonut. Accepts title, data, colors, order, and filter state.
- * Tapping a segment toggles that value in the parent's filter state.
+ * DimensionDonut — re-exported from @everystack/ui, the single chart
+ * vocabulary (docs/plans/admin-observability.md, decision 8).
  */
 
-import React from 'react';
-import { View, Text, Pressable } from 'react-native';
-
-export interface DimensionDonutProps {
-  title: string;
-  data: { value: string; count: number }[];
-  colors?: Record<string, string>;
-  order?: string[];
-  activeFilters?: string[];
-  onFilter: (value: string) => void;
-}
-
-const DEFAULT_COLOR = '#6b7280';
-
-export function DimensionDonut({ title, data, colors, order, activeFilters, onFilter }: DimensionDonutProps): React.ReactElement {
-  // Sort by order if provided, else by count
-  const sorted = order
-    ? order
-        .map(val => {
-          const entry = data.find(e => e.value === val);
-          return { value: val, count: entry?.count ?? 0 };
-        })
-        .filter(e => e.count > 0)
-    : [...data].sort((a, b) => b.count - a.count);
-
-  const total = sorted.reduce((sum, e) => sum + e.count, 0);
-
-  if (sorted.length === 0) {
-    return (
-      <View style={{ flex: 1 }}>
-        <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
-          {title}
-        </Text>
-        <Text style={{ color: '#9ca3af', fontSize: 12 }}>No data</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={{ flex: 1 }}>
-      <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
-        {title}
-      </Text>
-
-      {/* Stacked bar */}
-      <View style={{
-        flexDirection: 'row', height: 24, borderRadius: 12, overflow: 'hidden',
-        marginBottom: 12,
-      }}>
-        {sorted.map((entry) => {
-          const color = colors?.[entry.value] ?? DEFAULT_COLOR;
-          const widthPercent = (entry.count / total) * 100;
-          const isActive = activeFilters?.includes(entry.value);
-          return (
-            <Pressable
-              key={entry.value}
-              onPress={() => onFilter(entry.value)}
-              style={{
-                width: `${widthPercent}%`,
-                backgroundColor: color,
-                minWidth: 4,
-                opacity: activeFilters && !isActive ? 0.4 : 1,
-              }}
-            />
-          );
-        })}
-      </View>
-
-      {/* Legend */}
-      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
-        {sorted.map((entry) => {
-          const color = colors?.[entry.value] ?? DEFAULT_COLOR;
-          const percent = total > 0 ? ((entry.count / total) * 100).toFixed(1) : '0';
-          const isActive = activeFilters?.includes(entry.value);
-          return (
-            <Pressable
-              key={entry.value}
-              onPress={() => onFilter(entry.value)}
-              style={{ flexDirection: 'row', alignItems: 'center', opacity: activeFilters && !isActive ? 0.4 : 1 }}
-            >
-              <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: color, marginRight: 4 }} />
-              <Text style={{ fontSize: 11, color: '#374151' }}>
-                {entry.value} ({percent}%)
-              </Text>
-            </Pressable>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
+export { DimensionDonut } from '@everystack/ui/dashboard';
+export type { DimensionDonutProps } from '@everystack/ui/dashboard';

package/src/components/dashboard/StatDials.tsx

@@ -1,12 +1,10 @@
 /**
- * StatDials — Config-driven circular dials for dashboard KPIs.
- *
- * Renders N dials from an array of { label, value, color, ratio }.
- * Each dial shows a colored ring proportional to ratio (0-1).
+ * StatDials — config-driven KPI dials, rendered by the shared
+ * @everystack/ui StatDials (decision 8). Public props unchanged.
  */
 
 import React from 'react';
-import { View, Text } from 'react-native';
+import { StatDials as UiStatDials } from '@everystack/ui/dashboard';
 
 export interface DialData {
   label: string;
@@ -20,48 +18,6 @@ export interface StatDialsProps {
   dials: DialData[];
 }
 
-function Dial({ label, value, color, ratio }: DialData): React.ReactElement {
-  const size = 64;
-  const borderWidth = 4;
-  const fillPercent = Math.min(1, Math.max(0, ratio ?? 1));
-
-  return (
-    <View style={{ alignItems: 'center', flex: 1 }}>
-      <View style={{
-        width: size, height: size, borderRadius: size / 2,
-        borderWidth,
-        borderColor: `${color}20`,
-        backgroundColor: '#ffffff',
-        alignItems: 'center', justifyContent: 'center',
-      }}>
-        {/* Overlay ring */}
-        <View style={{
-          position: 'absolute', top: -borderWidth, left: -borderWidth,
-          width: size, height: size, borderRadius: size / 2,
-          borderWidth,
-          borderLeftColor: fillPercent > 0 ? color : 'transparent',
-          borderBottomColor: fillPercent >= 0.25 ? color : 'transparent',
-          borderRightColor: fillPercent >= 0.5 ? color : 'transparent',
-          borderTopColor: fillPercent >= 0.75 ? color : 'transparent',
-          transform: [{ rotate: '-90deg' }],
-        }} />
-        <Text style={{ color, fontSize: value > 999 ? 14 : 18, fontWeight: '700' }}>
-          {value.toLocaleString()}
-        </Text>
-      </View>
-      <Text style={{ marginTop: 6, fontSize: 11, color: '#6b7280', fontWeight: '500' }}>
-        {label}
-      </Text>
-    </View>
-  );
-}
-
 export function StatDials({ dials }: StatDialsProps): React.ReactElement {
-  return (
-    <View style={{ flexDirection: 'row', gap: 8, paddingVertical: 12 }}>
-      {dials.map((dial) => (
-        <Dial key={dial.label} {...dial} />
-      ))}
-    </View>
-  );
+  return <UiStatDials dials={dials} />;
 }

package/src/components/dashboard/TimeHistogram.tsx

@@ -1,16 +1,10 @@
 /**
- * TimeHistogram — Brushable hourly event histogram.
- *
- * Receives pre-aggregated time buckets from the server. Brushing
- * calls onBrush with [startISO, endISO] to update the parent's
- * filter state, which triggers a new server query.
- *
- * Renders bars as react-native Views (no SVG dependency).
+ * TimeHistogram — the resource dashboard's brushable histogram, rendered by
+ * the shared @everystack/ui primitive (decision 8). Public props unchanged.
  */
 
-import React, { useMemo } from 'react';
-import { View, Text } from 'react-native';
-import { Brush } from './Brush';
+import React from 'react';
+import { TimeHistogram as UiTimeHistogram } from '@everystack/ui/dashboard';
 
 export interface TimeHistogramProps {
   data: { bucket: string; count: number }[];
@@ -20,139 +14,21 @@ export interface TimeHistogramProps {
   onBrush: (extent: [string, string] | null) => void;
 }
 
-export function TimeHistogram({ data, width, height = 120, title, onBrush }: TimeHistogramProps): React.ReactElement {
-  const { bins, maxCount, xScale, barWidth } = useMemo(() => {
-    if (!data || data.length === 0) {
-      return { bins: [] as { bucket: string; ts: number; count: number }[], maxCount: 0, xScale: null, barWidth: 0 };
-    }
-
-    const sorted = data
-      .map(d => ({ bucket: d.bucket, ts: new Date(d.bucket).getTime(), count: d.count }))
-      .filter(d => d.count > 0 && !isNaN(d.ts))
-      .sort((a, b) => a.ts - b.ts);
-
-    if (sorted.length === 0) {
-      return { bins: [] as { bucket: string; ts: number; count: number }[], maxCount: 0, xScale: null, barWidth: 0 };
-    }
-
-    const minTime = sorted[0].ts;
-    const maxTime = sorted[sorted.length - 1].ts;
-    const mc = Math.max(...sorted.map(e => e.count), 1);
-
-    try {
-      const { scaleLinear } = require('d3-scale');
-      const padding = 16;
-      const chartWidth = width - padding * 2;
-      const scale = scaleLinear()
-        .domain([minTime, maxTime + 3_600_000])
-        .range([padding, padding + chartWidth]);
-      const bw = Math.max(2, chartWidth / Math.max(sorted.length, 1) - 1);
-      return { bins: sorted, maxCount: mc, xScale: scale, barWidth: bw };
-    } catch {
-      return { bins: sorted, maxCount: mc, xScale: null, barWidth: 0 };
-    }
-  }, [data, width]);
-
-  if (bins.length === 0) {
-    return (
-      <View style={{ height, justifyContent: 'center', alignItems: 'center' }}>
-        <Text style={{ color: '#9ca3af', fontSize: 12 }}>No event data</Text>
-      </View>
-    );
-  }
-
-  const barHeight = height - 32;
-
-  const handleBrush = (extent: [unknown, unknown] | null) => {
-    if (!extent) {
-      onBrush(null);
-      return;
-    }
-    // Convert epoch ms back to ISO strings for the server
-    const start = new Date(extent[0] as number).toISOString();
-    const end = new Date(extent[1] as number).toISOString();
-    onBrush([start, end]);
-  };
-
-  // Format time labels
-  const firstTime = new Date(bins[0].ts);
-  const lastTime = new Date(bins[bins.length - 1].ts);
-  const formatTime = (d: Date) => {
-    try {
-      const { timeFormat } = require('d3-time-format');
-      return timeFormat('%b %d %H:%M')(d);
-    } catch {
-      return d.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
-    }
-  };
-
+export function TimeHistogram({
+  data,
+  width,
+  height = 120,
+  title,
+  onBrush,
+}: TimeHistogramProps): React.ReactElement {
   return (
-    <View style={{ marginTop: 16 }}>
-      <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
-        {title ?? 'Events Over Time'}
-      </Text>
-      <View style={{ position: 'relative', height, width }}>
-        {/* Bars */}
-        {xScale ? (
-          <View style={{ position: 'absolute', top: 0, left: 0, width, height: barHeight }}>
-            {bins.map((bin) => {
-              const x = xScale(bin.ts);
-              const h = Math.max(2, (bin.count / maxCount) * barHeight);
-              return (
-                <View
-                  key={bin.bucket}
-                  style={{
-                    position: 'absolute',
-                    left: x,
-                    bottom: 0,
-                    width: barWidth,
-                    height: h,
-                    backgroundColor: bin.count > maxCount * 0.7 ? '#ef4444' : '#6366f1',
-                    borderRadius: 2,
-                  }}
-                />
-              );
-            })}
-          </View>
-        ) : (
-          <View style={{
-            flexDirection: 'row', alignItems: 'flex-end', height: barHeight, gap: 1,
-            paddingHorizontal: 16,
-          }}>
-            {bins.map((bin) => (
-              <View
-                key={bin.bucket}
-                style={{
-                  flex: 1,
-                  height: Math.max(2, (bin.count / maxCount) * barHeight),
-                  backgroundColor: bin.count > maxCount * 0.7 ? '#ef4444' : '#6366f1',
-                  borderRadius: 2,
-                }}
-              />
-            ))}
-          </View>
-        )}
-
-        {/* Brush overlay */}
-        {xScale && (
-          <Brush
-            xScale={xScale}
-            width={width}
-            height={barHeight}
-            onBrush={handleBrush}
-          />
-        )}
-
-        {/* Time labels */}
-        <View style={{
-          flexDirection: 'row', justifyContent: 'space-between',
-          paddingHorizontal: 16, marginTop: 4,
-          position: 'absolute', bottom: 0, left: 0, right: 0,
-        }}>
-          <Text style={{ fontSize: 10, color: '#9ca3af' }}>{formatTime(firstTime)}</Text>
-          <Text style={{ fontSize: 10, color: '#9ca3af' }}>{formatTime(lastTime)}</Text>
-        </View>
-      </View>
-    </View>
+    <UiTimeHistogram
+      data={(data ?? []).map((d) => ({ bucket: d.bucket, counts: { count: d.count } }))}
+      width={width}
+      height={height}
+      title={title ?? 'Events Over Time'}
+      emptyText="No event data"
+      onBrush={onBrush}
+    />
   );
 }

package/src/index.ts

@@ -30,6 +30,8 @@ export type {
   StatDialConfig,
   StatDialValue,
   DimensionConfig,
+  // Row actions
+  RowActionConfig,
 } from './types';
 
 // Adapter types
@@ -126,6 +128,9 @@ export { ImageDisplay } from './components/ImageDisplay';
 export { resolveImageUrl, type ResolveImageUrlOptions } from './utils/resolve-image-url';
 export { uploadFile, type UploadFileOptions, type UploadFileResult } from './utils/upload-file';
 
+// Row actions
+export { visibleRowActions } from './utils/row-actions';
+
 // Utilities
 export {
   toCamelCase,