@hanzo/ui 8.0.2 → 8.0.4

package/src/product/usage/UsageMeter.tsx

@@ -1,75 +0,0 @@
-'use client'
-
-/**
- * Usage meter — the ONE labeled rate-limit bar every Hanzo app renders for an AI
- * quota (session / weekly / a custom window). A thin track + tone-by-value fill
- * (green calm → amber → red hot, the same `utilColor` semantics as the console's
- * `UtilBar`), a "% left" read-out, and an honest reset countdown ("resets in 2h
- * 14m") computed from a real `resetsAt` — never a fabricated number.
- *
- * Built only from @hanzo/gui primitives (the nested-YStack track/fill is the house
- * bar idiom from `Charts.BarRows`), so it themes to the shell and works web +
- * native + desktop. No DOM APIs: `Date` only.
- */
-import { Text, XStack, YStack } from '@hanzo/gui'
-
-import { utilColor } from '../Metric'
-
-/** A single quota window: how much is spent (0–100) and when it refills. */
-export type UsageWindow = {
-  usedPercent: number
-  /** ISO string or Date the window resets — drives the honest countdown. */
-  resetsAt?: string | Date
-}
-
-/** "resets in 2h 14m" from a real reset time, or null when there is none/past. */
-export function resetCountdown(resetsAt?: string | Date): string | null {
-  if (resetsAt == null) return null
-  const t = typeof resetsAt === 'string' ? Date.parse(resetsAt) : resetsAt.getTime()
-  if (!Number.isFinite(t)) return null
-  const mins = Math.floor((t - Date.now()) / 60000)
-  if (mins <= 0) return 'resets now'
-  const d = Math.floor(mins / 1440)
-  const h = Math.floor((mins % 1440) / 60)
-  const m = mins % 60
-  if (d > 0) return `resets in ${d}d ${h}h`
-  if (h > 0) return `resets in ${h}h ${m}m`
-  return `resets in ${m}m`
-}
-
-export function UsageMeter({
-  label,
-  usedPercent,
-  resetsAt,
-  compact,
-}: {
-  label: string
-  usedPercent: number
-  resetsAt?: string | Date
-  compact?: boolean
-}) {
-  const used = Math.max(0, Math.min(100, usedPercent))
-  const left = Math.round(100 - used)
-  const reset = resetCountdown(resetsAt)
-  const h = compact ? 6 : 8
-  return (
-    <YStack gap={compact ? '$1' : '$1.5'}>
-      <XStack items="center" justify="space-between" gap="$2">
-        <Text fontSize="$2" color="$color11" numberOfLines={1} flex={1}>
-          {label}
-        </Text>
-        <Text fontSize="$2" color="$color12" fontWeight="600">
-          {left}% left
-        </Text>
-      </XStack>
-      <YStack height={h} bg="$color3" rounded="$2" overflow="hidden">
-        <YStack height={h} width={`${Math.max(2, used)}%`} bg={utilColor(used) as never} rounded="$2" />
-      </YStack>
-      {reset && !compact ? (
-        <Text fontSize="$1" color="$color10">
-          {reset}
-        </Text>
-      ) : null}
-    </YStack>
-  )
-}

package/src/product/usage/UsageProviderCard.tsx

@@ -1,153 +0,0 @@
-'use client'
-
-/**
- * Usage provider card — one AI provider's quota at a glance, mirroring the Codex
- * menu card: a session bar, a weekly bar, any extra windows, credits/spend, and a
- * used-% history Sparkline. Composes `UsageMeter` rows + the canonical
- * `Charts.Sparkline` + `Metric` idioms; nothing is fabricated (a missing window
- * renders no row, a <2-point history renders no spark, `error`/`sourceLabel`/
- * `updatedAt` surface honest provenance).
- *
- * @hanzo/gui primitives only — themes to the shell, works web + native + desktop.
- */
-import { Card, Text, XStack, YStack } from '@hanzo/gui'
-
-import { Sparkline } from '../Charts'
-import { UsageMeter, type UsageWindow } from './UsageMeter'
-
-/** Format a monetary amount; falls back to "12.34 USD" where Intl currency is absent. */
-export function formatUsageCurrency(value: number, currencyCode: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency: currencyCode, maximumFractionDigits: 2 }).format(value)
-  } catch {
-    return `${value.toFixed(2)} ${currencyCode}`
-  }
-}
-
-/** Compact count (1.2K / 3.4M / 5.6B) for token/request totals. */
-export function formatUsageCount(n: number): string {
-  if (!Number.isFinite(n)) return '—'
-  const abs = Math.abs(n)
-  if (abs >= 1e9) return `${(n / 1e9).toFixed(1)}B`
-  if (abs >= 1e6) return `${(n / 1e6).toFixed(1)}M`
-  if (abs >= 1e3) return `${(n / 1e3).toFixed(1)}K`
-  return String(Math.round(n))
-}
-
-/** "updated 2m ago" from a real timestamp, or null when there is none. */
-function updatedLabel(t?: string | Date): string | null {
-  if (t == null) return null
-  const ms = typeof t === 'string' ? Date.parse(t) : t.getTime()
-  if (!Number.isFinite(ms)) return null
-  const mins = Math.floor((Date.now() - ms) / 60000)
-  if (mins < 1) return 'updated just now'
-  if (mins < 60) return `updated ${mins}m ago`
-  const h = Math.floor(mins / 60)
-  if (h < 24) return `updated ${h}h ago`
-  return `updated ${Math.floor(h / 24)}d ago`
-}
-
-export type UsageProviderCardProps = {
-  name: string
-  /** Accent dot color (hex/rgb) — the provider's brand mark. */
-  color?: string
-  /** Plan/tier badge (e.g. "Pro", "Team"). */
-  plan?: string
-  session?: UsageWindow
-  weekly?: UsageWindow
-  /** Additional named windows (e.g. per-model or per-tool quotas). */
-  extras?: Array<{ id: string; title: string; usedPercent: number; resetsAt?: string | Date }>
-  spend?: { used: number; limit?: number; currencyCode: string }
-  /** Used-% samples over time — drawn with the canonical Sparkline. */
-  history?: number[]
-  /** An honest load/refresh error for this provider. */
-  error?: string
-  /** Where the numbers came from (e.g. "OAuth", "API key"). */
-  sourceLabel?: string
-  updatedAt?: string | Date
-}
-
-export function UsageProviderCard({
-  name,
-  color,
-  plan,
-  session,
-  weekly,
-  extras,
-  spend,
-  history,
-  error,
-  sourceLabel,
-  updatedAt,
-}: UsageProviderCardProps) {
-  const updated = updatedLabel(updatedAt)
-  return (
-    <Card p="$4" gap="$3" borderWidth={1} borderColor="$borderColor" flex={1} minW={260}>
-      <XStack items="center" justify="space-between" gap="$2">
-        <XStack items="center" gap="$2" flex={1}>
-          {color ? <YStack width={10} height={10} rounded="$2" bg={color as never} /> : null}
-          <Text fontSize="$4" fontWeight="800" color="$color12" numberOfLines={1}>
-            {name}
-          </Text>
-        </XStack>
-        {plan ? (
-          <Text fontSize="$1" px="$2" py="$1" rounded="$2" bg="$color3" color="$color11">
-            {plan}
-          </Text>
-        ) : null}
-      </XStack>
-
-      {error ? (
-        <Text fontSize="$2" color="#e5534b">
-          {error}
-        </Text>
-      ) : null}
-
-      {session ? <UsageMeter label="Session" usedPercent={session.usedPercent} resetsAt={session.resetsAt} /> : null}
-      {weekly ? <UsageMeter label="Weekly" usedPercent={weekly.usedPercent} resetsAt={weekly.resetsAt} /> : null}
-      {extras?.map((e) => (
-        <UsageMeter key={e.id} label={e.title} usedPercent={e.usedPercent} resetsAt={e.resetsAt} />
-      ))}
-
-      {spend ? (
-        spend.limit != null ? (
-          <UsageMeter
-            label={`Spend · ${formatUsageCurrency(spend.used, spend.currencyCode)} / ${formatUsageCurrency(spend.limit, spend.currencyCode)}`}
-            usedPercent={spend.limit > 0 ? (spend.used / spend.limit) * 100 : 0}
-            compact
-          />
-        ) : (
-          <XStack items="center" justify="space-between" gap="$2">
-            <Text fontSize="$2" color="$color11">
-              Spend
-            </Text>
-            <Text fontSize="$2" color="$color12" fontWeight="600">
-              {formatUsageCurrency(spend.used, spend.currencyCode)}
-            </Text>
-          </XStack>
-        )
-      ) : null}
-
-      {history && history.length >= 2 ? (
-        <XStack justify="flex-end">
-          <Sparkline values={history} />
-        </XStack>
-      ) : null}
-
-      {sourceLabel || updated ? (
-        <XStack items="center" justify="space-between" gap="$2">
-          {sourceLabel ? (
-            <Text fontSize="$1" color="$color10" numberOfLines={1}>
-              {sourceLabel}
-            </Text>
-          ) : null}
-          {updated ? (
-            <Text fontSize="$1" color="$color10">
-              {updated}
-            </Text>
-          ) : null}
-        </XStack>
-      ) : null}
-    </Card>
-  )
-}

package/src/product/usage/index.ts

@@ -1,10 +0,0 @@
-// @hanzo/ui/product/usage — the shared AI-usage surface (the ONE way every Hanzo
-// app renders quota bars, per-provider cards, and the usage dashboard).
-//
-// UsageMeter (labeled rate-limit bar) → UsageProviderCard (one provider) →
-// UsageDashboard (totals header + provider grid). Presentational, host-agnostic,
-// cross-platform on @hanzo/gui.
-
-export * from './UsageMeter'
-export * from './UsageProviderCard'
-export * from './UsageDashboard'

package/types/product/social/CampaignCard.d.ts

@@ -1,14 +0,0 @@
-export type Campaign = {
-    id: string;
-    name: string;
-    channel: string;
-    status: string;
-    objective?: string;
-    /** minor units (cents) */
-    budget: number;
-    spend: number;
-};
-export declare function CampaignCard({ campaign }: {
-    campaign: Campaign;
-}): import("react").JSX.Element;
-//# sourceMappingURL=CampaignCard.d.ts.map

package/types/product/social/CampaignCard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CampaignCard.d.ts","sourceRoot":"","sources":["../../../src/product/social/CampaignCard.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAID,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,QAAQ,CAAA;CAAE,+BAsChE"}

package/types/product/social/ChannelBadge.d.ts

@@ -1,7 +0,0 @@
-export type Channel = 'x' | 'facebook' | 'instagram' | 'linkedin' | 'tiktok' | 'youtube' | 'threads';
-export declare function ChannelBadge({ channel, showLabel, size, }: {
-    channel: Channel;
-    showLabel?: boolean;
-    size?: number;
-}): import("react").JSX.Element;
-//# sourceMappingURL=ChannelBadge.d.ts.map

package/types/product/social/ChannelBadge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChannelBadge.d.ts","sourceRoot":"","sources":["../../../src/product/social/ChannelBadge.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,OAAO,GACf,GAAG,GACH,UAAU,GACV,WAAW,GACX,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAA;AAYb,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,SAAiB,EACjB,IAAS,GACV,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,+BAuBA"}

package/types/product/social/PostCard.d.ts

@@ -1,16 +0,0 @@
-import { type Channel } from './ChannelBadge';
-export type Post = {
-    id: string;
-    content: string;
-    channel: Channel;
-    status: string;
-    /** unix seconds; 0/undefined = not scheduled */
-    scheduleAt?: number;
-    media?: string[];
-};
-export declare function PostCard({ post, onEdit, onDelete, }: {
-    post: Post;
-    onEdit?: (p: Post) => void;
-    onDelete?: (p: Post) => void;
-}): import("react").JSX.Element;
-//# sourceMappingURL=PostCard.d.ts.map

package/types/product/social/PostCard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PostCard.d.ts","sourceRoot":"","sources":["../../../src/product/social/PostCard.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAgB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAE3D,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAYD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;CAC7B,+BAuCA"}

package/types/product/social/index.d.ts

@@ -1,4 +0,0 @@
-export * from './ChannelBadge';
-export * from './CampaignCard';
-export * from './PostCard';
-//# sourceMappingURL=index.d.ts.map

package/types/product/social/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product/social/index.ts"],"names":[],"mappings":"AAGA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/types/product/usage/UsageDashboard.d.ts

@@ -1,10 +0,0 @@
-import { type UsageProviderCardProps } from './UsageProviderCard';
-export declare function UsageDashboard({ providers, totals, }: {
-    providers: UsageProviderCardProps[];
-    totals?: {
-        spendUSD?: number;
-        tokens?: number;
-        requests?: number;
-    };
-}): import("react").JSX.Element;
-//# sourceMappingURL=UsageDashboard.d.ts.map

package/types/product/usage/UsageDashboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UsageDashboard.d.ts","sourceRoot":"","sources":["../../../src/product/usage/UsageDashboard.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAqB,KAAK,sBAAsB,EAAyC,MAAM,qBAAqB,CAAA;AAE3H,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,MAAM,GACP,EAAE;IACD,SAAS,EAAE,sBAAsB,EAAE,CAAA;IACnC,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACnE,+BA8BA"}

package/types/product/usage/UsageMeter.d.ts

@@ -1,15 +0,0 @@
-/** A single quota window: how much is spent (0–100) and when it refills. */
-export type UsageWindow = {
-    usedPercent: number;
-    /** ISO string or Date the window resets — drives the honest countdown. */
-    resetsAt?: string | Date;
-};
-/** "resets in 2h 14m" from a real reset time, or null when there is none/past. */
-export declare function resetCountdown(resetsAt?: string | Date): string | null;
-export declare function UsageMeter({ label, usedPercent, resetsAt, compact, }: {
-    label: string;
-    usedPercent: number;
-    resetsAt?: string | Date;
-    compact?: boolean;
-}): import("react").JSX.Element;
-//# sourceMappingURL=UsageMeter.d.ts.map

package/types/product/usage/UsageMeter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UsageMeter.d.ts","sourceRoot":"","sources":["../../../src/product/usage/UsageMeter.tsx"],"names":[],"mappings":"AAiBA,4EAA4E;AAC5E,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAA;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACzB,CAAA;AAED,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAYtE;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,+BAyBA"}

package/types/product/usage/UsageProviderCard.d.ts

@@ -1,35 +0,0 @@
-import { type UsageWindow } from './UsageMeter';
-/** Format a monetary amount; falls back to "12.34 USD" where Intl currency is absent. */
-export declare function formatUsageCurrency(value: number, currencyCode: string): string;
-/** Compact count (1.2K / 3.4M / 5.6B) for token/request totals. */
-export declare function formatUsageCount(n: number): string;
-export type UsageProviderCardProps = {
-    name: string;
-    /** Accent dot color (hex/rgb) — the provider's brand mark. */
-    color?: string;
-    /** Plan/tier badge (e.g. "Pro", "Team"). */
-    plan?: string;
-    session?: UsageWindow;
-    weekly?: UsageWindow;
-    /** Additional named windows (e.g. per-model or per-tool quotas). */
-    extras?: Array<{
-        id: string;
-        title: string;
-        usedPercent: number;
-        resetsAt?: string | Date;
-    }>;
-    spend?: {
-        used: number;
-        limit?: number;
-        currencyCode: string;
-    };
-    /** Used-% samples over time — drawn with the canonical Sparkline. */
-    history?: number[];
-    /** An honest load/refresh error for this provider. */
-    error?: string;
-    /** Where the numbers came from (e.g. "OAuth", "API key"). */
-    sourceLabel?: string;
-    updatedAt?: string | Date;
-};
-export declare function UsageProviderCard({ name, color, plan, session, weekly, extras, spend, history, error, sourceLabel, updatedAt, }: UsageProviderCardProps): import("react").JSX.Element;
-//# sourceMappingURL=UsageProviderCard.d.ts.map

package/types/product/usage/UsageProviderCard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UsageProviderCard.d.ts","sourceRoot":"","sources":["../../../src/product/usage/UsageProviderCard.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,cAAc,CAAA;AAE3D,yFAAyF;AACzF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAM/E;AAED,mEAAmE;AACnE,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAOlD;AAeD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAA;IAC5F,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9D,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,OAAO,EACP,MAAM,EACN,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,SAAS,GACV,EAAE,sBAAsB,+BAuExB"}

package/types/product/usage/index.d.ts

@@ -1,4 +0,0 @@
-export * from './UsageMeter';
-export * from './UsageProviderCard';
-export * from './UsageDashboard';
-//# sourceMappingURL=index.d.ts.map

package/types/product/usage/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product/usage/index.ts"],"names":[],"mappings":"AAOA,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA"}