@syncular/ui 0.0.0

package/dist/primitives/tooltip.js

@@ -0,0 +1,15 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { forwardRef, } from 'react';
+import { cn } from '../lib/cn.js';
+const Tooltip = BaseTooltip.Root;
+const TooltipTrigger = BaseTooltip.Trigger;
+const TooltipContent = forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => (_jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { sideOffset: sideOffset, children: _jsx(BaseTooltip.Popup, { ref: ref, className: cn('bg-[#1e1e1e] border border-neutral-700 rounded-md px-2.5 py-1.5 text-xs text-neutral-300 font-mono shadow-lg', className), ...props, children: children }) }) })));
+TooltipContent.displayName = 'TooltipContent';
+/** @base-ui doesn't need a provider - this is a passthrough for backward compat */
+function TooltipProvider({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.js.map

package/dist/primitives/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/primitives/tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAEL,UAAU,GAEX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC;AAEjC,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,CAAC;AAE3C,MAAM,cAAc,GAAG,UAAU,CAK/B,CAAC,EAAE,SAAS,EAAE,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5D,KAAC,WAAW,CAAC,MAAM,cACjB,KAAC,WAAW,CAAC,UAAU,IAAC,UAAU,EAAE,UAAU,YAC5C,KAAC,WAAW,CAAC,KAAK,IAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,8GAA8G,EAC9G,SAAS,CACV,KACG,KAAK,YAER,QAAQ,GACS,GACG,GACN,CACtB,CAAC,CAAC;AACH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,mFAAmF;AACnF,SAAS,eAAe,CAAC,EAAE,QAAQ,EAA2B,EAAE;IAC9D,OAAO,4BAAG,QAAQ,GAAI,CAAC;AAAA,CACxB;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/version.d.ts

@@ -0,0 +1,2 @@
+export declare const UI_VERSION: string;
+//# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,QAAsB,CAAC"}

package/dist/version.js

@@ -0,0 +1,3 @@
+import packageJson from '../package.json';
+export const UI_VERSION = packageJson.version;
+//# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC"}

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@syncular/ui",
+  "version": "0.0.0",
+  "description": "Reusable Syncular UI components and styles",
+  "license": "MIT",
+  "author": "Benjamin Kniffler",
+  "homepage": "https://syncular.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncular/syncular.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/syncular/syncular/issues"
+  },
+  "keywords": [
+    "sync",
+    "offline-first",
+    "realtime",
+    "ui",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./charts": {
+      "bun": "./src/charts/index.ts",
+      "import": {
+        "types": "./dist/charts/index.d.ts",
+        "default": "./dist/charts/index.js"
+      }
+    },
+    "./console": {
+      "bun": "./src/console/index.ts",
+      "import": {
+        "types": "./dist/console/index.d.ts",
+        "default": "./dist/console/index.js"
+      }
+    },
+    "./forms": {
+      "bun": "./src/forms/index.ts",
+      "import": {
+        "types": "./dist/forms/index.d.ts",
+        "default": "./dist/forms/index.js"
+      }
+    },
+    "./primitives": {
+      "bun": "./src/primitives/index.ts",
+      "import": {
+        "types": "./dist/primitives/index.d.ts",
+        "default": "./dist/primitives/index.js"
+      }
+    },
+    "./observable-universe": {
+      "bun": "./src/observable-universe/index.ts",
+      "import": {
+        "types": "./dist/observable-universe/index.d.ts",
+        "default": "./dist/observable-universe/index.js"
+      }
+    },
+    "./demo": {
+      "bun": "./src/demo/index.ts",
+      "import": {
+        "types": "./dist/demo/index.d.ts",
+        "default": "./dist/demo/index.js"
+      }
+    },
+    "./navigation": {
+      "bun": "./src/navigation/index.ts",
+      "import": {
+        "types": "./dist/navigation/index.d.ts",
+        "default": "./dist/navigation/index.js"
+      }
+    },
+    "./styles.css": "./src/styles/styles.css",
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "tsgo": "tsgo --noEmit",
+    "build": "tsgo",
+    "release": "bunx syncular-publish"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.564.0",
+    "recharts": "^3.7.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@syncular/config": "0.0.0",
+    "@types/react": "^19.2.14"
+  }
+}

package/src/charts/activity-chart.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from './chart';
+
+export interface ActivityChartDataPoint {
+  timestamp: string;
+  pushCount: number;
+  pullCount: number;
+}
+
+export interface ActivityChartProps {
+  data: ActivityChartDataPoint[];
+  className?: string;
+}
+
+const chartConfig = {
+  pushCount: {
+    label: 'Push',
+    color: 'var(--color-healthy)',
+  },
+  pullCount: {
+    label: 'Pull',
+    color: 'var(--color-flow)',
+  },
+} satisfies ChartConfig;
+
+export function ActivityChart({ data, className }: ActivityChartProps) {
+  const formattedData = data.map((bucket) => ({
+    ...bucket,
+    time: formatTimestamp(bucket.timestamp),
+  }));
+
+  return (
+    <ChartContainer config={chartConfig} className={className}>
+      <AreaChart data={formattedData} margin={{ left: 0, right: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" vertical={false} />
+        <XAxis
+          dataKey="time"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          fontSize={12}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          fontSize={12}
+          width={40}
+        />
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent indicator="dot" />}
+        />
+        <Area
+          dataKey="pullCount"
+          type="monotone"
+          fill="var(--color-flow)"
+          fillOpacity={0.3}
+          stroke="var(--color-flow)"
+          stackId="a"
+        />
+        <Area
+          dataKey="pushCount"
+          type="monotone"
+          fill="var(--color-healthy)"
+          fillOpacity={0.3}
+          stroke="var(--color-healthy)"
+          stackId="a"
+        />
+      </AreaChart>
+    </ChartContainer>
+  );
+}
+
+function formatTimestamp(timestamp: string): string {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}

package/src/charts/chart.tsx

@@ -0,0 +1,302 @@
+'use client';
+
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { cn } from '../lib/cn';
+
+const THEMES = { light: '', dark: '.dark' } as const;
+type ThemeName = keyof typeof THEMES;
+
+export type ChartConfig = Record<
+  string,
+  {
+    icon?: React.ComponentType;
+    label?: React.ReactNode;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<ThemeName, string> }
+  )
+>;
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+  return context;
+}
+
+export const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >['children'];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        className={cn(
+          "flex justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-neutral-500 [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-panel [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-panel [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        data-chart={chartId}
+        ref={ref}
+        {...props}
+      >
+        <ChartStyle config={config} id={chartId} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={{ width: 1, height: 1 }}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = 'ChartContainer';
+
+function ChartStyle({ config, id }: { config: ChartConfig; id: string }) {
+  const colorConfig = Object.entries(config).filter(
+    ([, itemConfig]) => itemConfig.theme || itemConfig.color
+  );
+
+  if (colorConfig.length < 1) {
+    return null;
+  }
+
+  return (
+    <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: Static style generation for chart CSS variables.
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(([theme, prefix]) => {
+            const variables = colorConfig
+              .map(([key, itemConfig]) => {
+                const color =
+                  itemConfig.theme?.[theme as ThemeName] ?? itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+              })
+              .filter(Boolean)
+              .join('\n');
+            return `${prefix} [data-chart='${id}'] {\n${variables}\n}`;
+          })
+          .join('\n'),
+      }}
+    />
+  );
+}
+
+type TooltipPayloadData = {
+  fill?: string;
+} & Record<string, string | number | boolean | null | undefined>;
+
+interface TooltipPayloadItem {
+  color?: string;
+  dataKey?: string | number;
+  fill?: string;
+  name?: string;
+  payload?: TooltipPayloadData;
+  value?: number | string;
+}
+
+export const ChartTooltip = RechartsPrimitive.Tooltip;
+
+interface ChartTooltipContentProps extends React.ComponentProps<'div'> {
+  active?: boolean;
+  color?: string;
+  formatter?: (
+    value: string | number,
+    name: string,
+    item: TooltipPayloadItem,
+    index: number,
+    payload: TooltipPayloadData
+  ) => React.ReactNode;
+  hideIndicator?: boolean;
+  hideLabel?: boolean;
+  indicator?: 'dashed' | 'dot' | 'line';
+  label?: string;
+  labelClassName?: string;
+  labelFormatter?: (
+    value: string | React.ReactNode,
+    payload: TooltipPayloadItem[]
+  ) => React.ReactNode;
+  labelKey?: string;
+  nameKey?: string;
+  payload?: TooltipPayloadItem[];
+}
+
+export const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  ChartTooltipContentProps
+>(
+  (
+    {
+      active,
+      className,
+      color,
+      formatter,
+      hideIndicator = false,
+      hideLabel = false,
+      indicator = 'dot',
+      label,
+      labelClassName,
+      labelFormatter,
+      labelKey,
+      nameKey,
+      payload,
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+      const item = payload[0];
+      if (!item) {
+        return null;
+      }
+      const key = `${labelKey || item.dataKey || item.name || 'value'}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === 'string'
+          ? (config[label]?.label ?? label)
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn('font-medium', labelClassName)}>
+            {labelFormatter(value ?? '', payload)}
+          </div>
+        );
+      }
+      if (!value) {
+        return null;
+      }
+      return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+    }, [
+      config,
+      hideLabel,
+      label,
+      labelClassName,
+      labelFormatter,
+      labelKey,
+      payload,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+    return (
+      <div
+        className={cn(
+          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-surface px-2.5 py-1.5 text-xs shadow-xl',
+          className
+        )}
+        ref={ref}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload?.fill || item.color;
+
+            return (
+              <div
+                className={cn(
+                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-neutral-500',
+                  indicator === 'dot' ? 'items-center' : null
+                )}
+                key={key}
+              >
+                {formatter && item.value !== undefined && item.name ? (
+                  formatter(
+                    item.value,
+                    item.name,
+                    item,
+                    index,
+                    item.payload ?? {}
+                  )
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : !hideIndicator ? (
+                      <div
+                        className={cn(
+                          'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+                          indicator === 'dot' ? 'h-2.5 w-2.5' : null,
+                          indicator === 'line' ? 'w-1' : null,
+                          indicator === 'dashed'
+                            ? 'w-0 border-[1.5px] border-dashed bg-transparent'
+                            : null,
+                          nestLabel && indicator === 'dashed' ? 'my-0.5' : null
+                        )}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    ) : null}
+                    <div
+                      className={cn(
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center'
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-neutral-500">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value !== undefined ? (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {typeof item.value === 'number'
+                            ? item.value.toLocaleString()
+                            : item.value}
+                        </span>
+                      ) : null}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+ChartTooltipContent.displayName = 'ChartTooltipContent';
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  item: TooltipPayloadItem,
+  key: string
+) {
+  const payloadValue = item.payload?.[key];
+  const payloadKey = typeof payloadValue === 'string' ? payloadValue : null;
+  const dataKey = typeof item.dataKey === 'string' ? item.dataKey : null;
+  const nameKey = typeof item.name === 'string' ? item.name : null;
+  const configKey = payloadKey ?? dataKey ?? nameKey ?? key;
+  return config[configKey];
+}

package/src/charts/index.ts

@@ -0,0 +1,4 @@
+export * from './activity-chart';
+export * from './chart';
+export * from './latency-chart';
+export * from './outcomes-chart';

package/src/charts/latency-chart.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from './chart';
+
+export interface LatencyPercentiles {
+  p50: number;
+  p90: number;
+  p99: number;
+}
+
+export interface LatencyChartData {
+  push: LatencyPercentiles;
+  pull: LatencyPercentiles;
+}
+
+export interface LatencyChartProps {
+  data: LatencyChartData;
+  className?: string;
+}
+
+const chartConfig = {
+  push: {
+    label: 'Push',
+    color: 'var(--color-healthy)',
+  },
+  pull: {
+    label: 'Pull',
+    color: 'var(--color-flow)',
+  },
+} satisfies ChartConfig;
+
+export function LatencyChart({ data, className }: LatencyChartProps) {
+  const chartData = [
+    { percentile: 'p50', push: data.push.p50, pull: data.pull.p50 },
+    { percentile: 'p90', push: data.push.p90, pull: data.pull.p90 },
+    { percentile: 'p99', push: data.push.p99, pull: data.pull.p99 },
+  ];
+
+  return (
+    <ChartContainer config={chartConfig} className={className}>
+      <BarChart data={chartData} margin={{ left: 0, right: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" vertical={false} />
+        <XAxis
+          dataKey="percentile"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          fontSize={12}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          fontSize={12}
+          width={50}
+          tickFormatter={(value) => `${value}ms`}
+        />
+        <ChartTooltip
+          cursor={false}
+          content={
+            <ChartTooltipContent
+              formatter={(value, name) => [`${value}ms`, name]}
+            />
+          }
+        />
+        <Bar dataKey="push" fill="var(--color-healthy)" radius={[4, 4, 0, 0]} />
+        <Bar dataKey="pull" fill="var(--color-flow)" radius={[4, 4, 0, 0]} />
+      </BarChart>
+    </ChartContainer>
+  );
+}