@hanzo/ui 8.0.1 → 8.0.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "type": "module",
-  "description": "Hanzo UI \u2014 the one cross-platform component library on @hanzo/gui. The product/app layer (charts, metrics, page headers, status tags, rich empty states, combobox, slide-over, toasts, drag-reorder, labeled field rows, provider/product marks) + the metadata-driven record layer (@hanzo/data: RecordsView, DataTable, board, typed field editors) + the calm dark-first tokens and motion. Presentational, host-agnostic (data/effects injected), clean-room. Web + native (iOS) + desktop.",
+  "description": "Hanzo UI — the one cross-platform component library on @hanzo/gui. The product/app layer (charts, metrics, page headers, status tags, rich empty states, combobox, slide-over, toasts, drag-reorder, labeled field rows, provider/product marks) + the metadata-driven record layer (@hanzo/data: RecordsView, DataTable, board, typed field editors) + the calm dark-first tokens and motion. Presentational, host-agnostic (data/effects injected), clean-room. Web + native (iOS) + desktop.",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",

package/src/product/index.ts

@@ -55,3 +55,9 @@ export * from './StatusTag'
 export * from './ThemeToggle'
 export * from './Toast'
 export * from './color'
+
+// Usage — the shared AI-quota surface (meter bar → provider card → dashboard).
+export * from './usage'
+
+// Social — ChannelBadge, PostCard, CampaignCard (extracted from Hanzo Social).
+export * from './social'

package/src/product/social/CampaignCard.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+/**
+ * CampaignCard — one marketing campaign (name, channel, lifecycle, budget/spend
+ * bar). Pure: all data via props. Reuses the shared StatusTag for the lifecycle
+ * pill (one status vocabulary). Extracted from Hanzo Social.
+ */
+import { Card, Text, XStack, YStack } from '@hanzo/gui'
+import { StatusTag } from '../StatusTag'
+
+export type Campaign = {
+  id: string
+  name: string
+  channel: string
+  status: string
+  objective?: string
+  /** minor units (cents) */
+  budget: number
+  spend: number
+}
+
+const money = (cents: number) => `$${Math.round((cents || 0) / 100).toLocaleString()}`
+
+export function CampaignCard({ campaign }: { campaign: Campaign }) {
+  const pct =
+    campaign.budget > 0 ? Math.min(100, (campaign.spend / campaign.budget) * 100) : 0
+  return (
+    <Card p="$4" gap="$3" borderWidth={1} borderColor="$borderColor" width="100%">
+      <XStack items="flex-start" justify="space-between" gap="$2">
+        <YStack gap="$1">
+          <Text fontSize="$4" fontWeight="700">
+            {campaign.name}
+          </Text>
+          <Text fontSize="$2" color="$color11">
+            {campaign.channel}
+          </Text>
+        </YStack>
+        <StatusTag status={campaign.status} />
+      </XStack>
+
+      {campaign.objective ? (
+        <Text fontSize="$2" color="$color11">
+          {campaign.objective}
+        </Text>
+      ) : null}
+
+      <YStack gap="$1.5">
+        <XStack justify="space-between">
+          <Text fontSize="$1" color="$color11">
+            {money(campaign.spend)} spent
+          </Text>
+          <Text fontSize="$1" color="$color11">
+            {money(campaign.budget)} budget
+          </Text>
+        </XStack>
+        <YStack height={6} rounded="$2" bg="$color3" overflow="hidden">
+          <YStack height={6} rounded="$2" bg="$color9" width={`${pct}%` as never} />
+        </YStack>
+      </YStack>
+    </Card>
+  )
+}

package/src/product/social/ChannelBadge.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+/**
+ * ChannelBadge — the ONE way a social network is marked (brand color + glyph +
+ * optional label), on @hanzo/gui primitives so it renders on web, native, and
+ * desktop. Data-free / host-agnostic. Extracted from Hanzo Social (social.hanzo.ai).
+ */
+import { Text, XStack, YStack } from '@hanzo/gui'
+
+export type Channel =
+  | 'x'
+  | 'facebook'
+  | 'instagram'
+  | 'linkedin'
+  | 'tiktok'
+  | 'youtube'
+  | 'threads'
+
+const META: Record<Channel, { label: string; bg: string; fg: string; mark: string }> = {
+  x: { label: 'X', bg: '#0f0f12', fg: '#e6e6ea', mark: '𝕏' },
+  facebook: { label: 'Facebook', bg: '#1877f2', fg: '#ffffff', mark: 'f' },
+  instagram: { label: 'Instagram', bg: '#e1306c', fg: '#ffffff', mark: 'IG' },
+  linkedin: { label: 'LinkedIn', bg: '#0a66c2', fg: '#ffffff', mark: 'in' },
+  tiktok: { label: 'TikTok', bg: '#111114', fg: '#25f4ee', mark: 'TT' },
+  youtube: { label: 'YouTube', bg: '#ff0000', fg: '#ffffff', mark: '▶' },
+  threads: { label: 'Threads', bg: '#111114', fg: '#e6e6ea', mark: '@' },
+}
+
+export function ChannelBadge({
+  channel,
+  showLabel = false,
+  size = 22,
+}: {
+  channel: Channel
+  showLabel?: boolean
+  size?: number
+}) {
+  const m = META[channel] ?? META.x
+  return (
+    <XStack items="center" gap="$2">
+      <YStack
+        width={size}
+        height={size}
+        items="center"
+        justify="center"
+        rounded="$2"
+        bg={m.bg as never}
+      >
+        <Text fontSize="$1" fontWeight="800" color={m.fg as never}>
+          {m.mark}
+        </Text>
+      </YStack>
+      {showLabel ? (
+        <Text fontSize="$3" color="$color12">
+          {m.label}
+        </Text>
+      ) : null}
+    </XStack>
+  )
+}

package/src/product/social/PostCard.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+/**
+ * PostCard — one social post: channel, lifecycle, body, schedule time, a media
+ * count, and injected edit/delete affordances. Pure (data + handlers via props);
+ * composes ChannelBadge + the shared StatusTag. Extracted from Hanzo Social.
+ */
+import { Card, Text, XStack, YStack, Button } from '@hanzo/gui'
+import { Pencil, Trash2 } from '@hanzogui/lucide-icons-2'
+import { StatusTag } from '../StatusTag'
+import { ChannelBadge, 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[]
+}
+
+const fmt = (unix?: number) =>
+  unix
+    ? new Date(unix * 1000).toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      })
+    : ''
+
+export function PostCard({
+  post,
+  onEdit,
+  onDelete,
+}: {
+  post: Post
+  onEdit?: (p: Post) => void
+  onDelete?: (p: Post) => void
+}) {
+  const mediaCount = post.media?.length ?? 0
+  return (
+    <Card p="$3" gap="$2.5" borderWidth={1} borderColor="$borderColor" width="100%">
+      <XStack items="center" justify="space-between" gap="$2">
+        <XStack items="center" gap="$2">
+          <ChannelBadge channel={post.channel} />
+          <StatusTag status={post.status} />
+        </XStack>
+        <XStack gap="$1">
+          {onEdit ? (
+            <Button size="$2" chromeless icon={<Pencil size={15} />} onPress={() => onEdit(post)} />
+          ) : null}
+          {onDelete ? (
+            <Button size="$2" chromeless icon={<Trash2 size={15} />} onPress={() => onDelete(post)} />
+          ) : null}
+        </XStack>
+      </XStack>
+
+      <Text fontSize="$3" color="$color12">
+        {post.content}
+      </Text>
+
+      <XStack items="center" justify="space-between" gap="$2">
+        {post.scheduleAt ? (
+          <Text fontSize="$1" color="$color11">
+            {fmt(post.scheduleAt)}
+          </Text>
+        ) : (
+          <YStack />
+        )}
+        {mediaCount ? (
+          <Text fontSize="$1" color="$color10">
+            {mediaCount} media
+          </Text>
+        ) : null}
+      </XStack>
+    </Card>
+  )
+}

package/src/product/social/index.ts

@@ -0,0 +1,6 @@
+// @hanzo/ui/product/social — pure, host-agnostic social-media components
+// extracted from Hanzo Social (social.hanzo.ai). Data + handlers injected via
+// props; built only on @hanzo/gui primitives + the shared StatusTag.
+export * from './ChannelBadge'
+export * from './CampaignCard'
+export * from './PostCard'

package/src/product/usage/UsageDashboard.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+/**
+ * Usage dashboard — the ONE shared AI-usage screen every Hanzo app (console,
+ * desktop, app, chat) renders: a summary header of totals (spend / tokens /
+ * requests) as `Metric` tiles, above a responsive grid of `UsageProviderCard`s.
+ *
+ * Presentational + honest: totals are pre-summed by the caller and formatted here
+ * (an absent total is an em-dash, never fabricated); the grid simply lays out the
+ * providers it is given. @hanzo/gui primitives only — web + native + desktop.
+ */
+import { XStack, YStack } from '@hanzo/gui'
+import { Activity, Coins, DollarSign } from '@hanzogui/lucide-icons-2'
+
+import { MetricCard } from '../Metric'
+import { UsageProviderCard, type UsageProviderCardProps, formatUsageCount, formatUsageCurrency } from './UsageProviderCard'
+
+export function UsageDashboard({
+  providers,
+  totals,
+}: {
+  providers: UsageProviderCardProps[]
+  totals?: { spendUSD?: number; tokens?: number; requests?: number }
+}) {
+  return (
+    <YStack gap="$4">
+      {totals ? (
+        <XStack gap="$3" flexWrap="wrap">
+          <MetricCard
+            icon={<DollarSign size={16} color="$color11" />}
+            label="Total spend"
+            value={totals.spendUSD != null ? formatUsageCurrency(totals.spendUSD, 'USD') : '—'}
+          />
+          <MetricCard
+            icon={<Coins size={16} color="$color11" />}
+            label="Tokens"
+            value={totals.tokens != null ? formatUsageCount(totals.tokens) : '—'}
+          />
+          <MetricCard
+            icon={<Activity size={16} color="$color11" />}
+            label="Requests"
+            value={totals.requests != null ? formatUsageCount(totals.requests) : '—'}
+          />
+        </XStack>
+      ) : null}
+
+      <XStack gap="$3" flexWrap="wrap">
+        {providers.map((p) => (
+          <UsageProviderCard key={p.name} {...p} />
+        ))}
+      </XStack>
+    </YStack>
+  )
+}

package/src/product/usage/UsageMeter.tsx

@@ -0,0 +1,75 @@
+'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

@@ -0,0 +1,153 @@
+'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

@@ -0,0 +1,10 @@
+// @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/index.d.ts

@@ -19,4 +19,6 @@ export * from './StatusTag';
 export * from './ThemeToggle';
 export * from './Toast';
 export * from './color';
+export * from './usage';
+export * from './social';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAA;AAKxB,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,SAAS,IAAI,eAAe,EAC5B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,GACN,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,mBAAmB,CAAA;AAGjC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAA;AAKxB,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,SAAS,IAAI,eAAe,EAC5B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,GACN,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,mBAAmB,CAAA;AAGjC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AAGvB,cAAc,SAAS,CAAA;AAGvB,cAAc,UAAU,CAAA"}

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,15 @@
+/** 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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"}