makersclaw 0.1.0 → 0.3.0

package/registry/blocks/stat-cards/demo.jsx

@@ -0,0 +1,257 @@
+"use client";
+
+// StatCards, every shape over made-up numbers — the gallery's and the
+// smoke test's surface. Not installed into apps: `makersclaw add
+// stat-cards` lays index.js, stat-cards.jsx and usage.jsx only.
+import { useState } from "react";
+import { Button, Field, Select, ToggleGroup, toast } from "../components/ui";
+import { StatCards } from "../components/blocks/stat-cards";
+
+// A seeded walk, so the sparklines are the same every render.
+function walk(seed, start, drift, n = 16) {
+  let s = seed;
+  let v = start;
+  return Array.from({ length: n }, () => {
+    s = (s * 16807) % 2147483647;
+    v = Math.max(1, v + drift + ((s / 2147483647) - 0.5) * start * 0.08);
+    return Math.round(v * 100) / 100;
+  });
+}
+
+const money = (n) => `$${n.toLocaleString("en-US")}`;
+
+const STRIP = [
+  { id: "rev", label: "Net revenue", value: "$184,210", delta: 7.4 },
+  { id: "refunds", label: "Refunds", value: "$3,982", delta: -11.2, invert: true },
+  { id: "open", label: "Open invoices", value: "$96,450", delta: 3.1 },
+  { id: "burn", label: "Monthly burn", value: "$41,700", delta: 4.6, invert: true },
+];
+
+const CARDS = [
+  { id: "sessions", label: "Sessions", value: "18,240", delta: -6.3 },
+  { id: "signup", label: "Signup rate", value: "4.1%", delta: 0.6 },
+  { id: "time", label: "Time on page", value: "3m 12s", delta: 12.5 },
+  { id: "bounce", label: "Bounce rate", value: "38.4%", delta: -2.1, invert: true },
+];
+
+const PREVIOUS = [
+  { id: "active", label: "Weekly active teams", value: "2,318", previous: "2,104", delta: { value: 10.2, suffix: "%", label: "vs last week" } },
+  { id: "trial", label: "Trial to paid", value: "18.6%", previous: "19.9%", delta: { value: -1.3, suffix: " pts" } },
+  { id: "resolve", label: "Median time to resolve", value: "4h 10m", previous: "5h 02m", delta: -17.2, invert: true },
+];
+
+const CORNER = [
+  { id: "dau", label: "Daily active", value: "6,904", delta: 9.8 },
+  { id: "orders", label: "Orders", value: "1,127", delta: -4.4 },
+  { id: "aov", label: "Average order", value: "$62.40", delta: 2.9 },
+];
+
+const LINKED = [
+  { id: "mrr", label: "Monthly recurring revenue", value: "$48.6K", delta: 5.2, href: "#mrr" },
+  { id: "customers", label: "Paying customers", value: "1,284", delta: 3.7, href: "#customers" },
+  { id: "churn", label: "Logo churn", value: "2.4%", delta: 0.4, invert: true, href: "#churn" },
+];
+
+const REGIONS = [
+  { id: "emea", label: "EMEA", value: "$212,400", status: { tone: "warning", label: "Needs attention" }, goal: { value: 3, max: 5 }, linkLabel: "View region", onSelect: (it) => toast(`Opening ${it.label}`) },
+  { id: "amer", label: "Americas", value: "$318,900", status: { tone: "success", label: "On track" }, goal: { value: 5, max: 5 }, linkLabel: "View region", onSelect: (it) => toast(`Opening ${it.label}`) },
+  { id: "apac", label: "Asia Pacific", value: "$97,150", status: { tone: "danger", label: "At risk" }, goal: { value: 1, max: 5 }, linkLabel: "View region", onSelect: (it) => toast(`Opening ${it.label}`) },
+];
+
+const TICKERS = [
+  { id: "orbit", label: "Orbit Freight", sublabel: "ORBT", value: "$142.18", delta: { value: 8.9, suffix: "%", label: "+$11.62 today" }, trend: walk(3, 128, 1.1) },
+  { id: "lumen", label: "Lumen Health", sublabel: "LMNH", value: "$61.05", delta: 4.2, trend: walk(11, 58, 0.25) },
+  { id: "carta", label: "Cartwright Mills", sublabel: "CRTW", value: "$83.70", delta: -6.8, trend: walk(29, 92, -0.7) },
+];
+
+const USAGE_BAR = [
+  { id: "runs", label: "Workflow runs", used: 1840, limit: 10000 },
+  { id: "credits", label: "Credits", used: 712, limit: 1000, format: (n) => money(n) },
+  { id: "storage", label: "Storage", used: 3.4, limit: 10, unit: "GB" },
+  { id: "api", label: "API calls", used: 4610, limit: 5000, note: "Calls over the limit are queued until the 1st." },
+];
+
+const USAGE_RING = [
+  { id: "ws", label: "Workspaces", used: 2, limit: 5 },
+  { id: "dash", label: "Dashboards", used: 9, limit: 20 },
+  { id: "seats", label: "Seats", used: 14, limit: 15 },
+  { id: "files", label: "File storage", used: 38, limit: 100, unit: "GB" },
+];
+
+const BUDGETS = [
+  { id: "people", label: "People ops", used: 310, limit: 1000, format: money, href: "#people" },
+  { id: "growth", label: "Growth", used: 640, limit: 1000, format: money, href: "#growth" },
+  { id: "finance", label: "Finance", used: 910, limit: 1000, format: money, href: "#finance" },
+  { id: "product", label: "Product", used: 1300, limit: 2000, format: money, href: "#product" },
+];
+
+const INFRA = [
+  {
+    id: "queries",
+    label: "Queries",
+    used: 9820000,
+    limit: null,
+    value: "9.8M",
+    parts: [
+      { label: "Writes", value: 7410000 },
+      { label: "Reads", value: 2410000 },
+    ],
+    format: (n) => (n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n.toLocaleString("en-US")),
+    editable: false,
+    action: { label: "Upgrade", icon: "zap", onSelect: () => toast("Opening plans") },
+  },
+  {
+    id: "egress",
+    label: "Egress",
+    used: 188,
+    limit: 200,
+    unit: "GB",
+    note: "Egress past 200 GB is billed per GB.",
+    editable: false,
+    action: { label: "Upgrade", icon: "zap", onSelect: () => toast("Opening plans") },
+  },
+  {
+    id: "disk",
+    label: "Disk",
+    used: 41,
+    limit: 500,
+    unit: "GB",
+    note: "Plenty of room.",
+    editable: false,
+    action: { label: "Upgrade", icon: "zap", onSelect: () => toast("Opening plans") },
+  },
+  { id: "spend", label: "Spend", used: 64.2, value: "$64.20", limit: 150, format: money, limitText: "$150 budget", note: "Within budget.", limitLabel: "Change budget", limitPrefix: "$" },
+];
+
+const STORAGE = [
+  {
+    id: "drive",
+    label: "Shared drive",
+    used: 9400,
+    limit: 20000,
+    unit: "MB",
+    value: "9,400 MB",
+    limitText: "20 GB",
+    editable: false,
+    parts: [
+      { label: "Contracts", value: 2900 },
+      { label: "Designs", value: 3600 },
+      { label: "Recordings", value: 2100 },
+      { label: "Other", value: 800 },
+    ],
+  },
+];
+
+const SPEND = [
+  {
+    id: "cloud",
+    label: "Cloud spend",
+    used: 1240,
+    value: "$1,240",
+    suffix: "this month",
+    delta: { value: 9.5, suffix: "%", invert: true },
+    format: money,
+    editable: false,
+    parts: [
+      { label: "Compute", value: 690 },
+      { label: "Storage", value: 380 },
+      { label: "Network", value: 170 },
+    ],
+    caption: "Set limits in billing settings.",
+  },
+];
+
+const LIST = [
+  { id: "y1", label: "After 1 year", value: "$3,100", delta: 6.8 },
+  { id: "y3", label: "After 3 years", value: "$10,450", delta: 19.4 },
+  { id: "y5", label: "After 5 years", value: "$19,800", delta: 31.7 },
+  { id: "y10", label: "After 10 years", value: "$47,200", delta: 58.2 },
+];
+
+// Each source file is one choice: the block's props that draw it.
+const SHAPES = [
+  { value: "strip", label: "Strip", props: { variant: "strip", items: STRIP } },
+  { value: "cards", label: "Cards", props: { variant: "cards", items: CARDS } },
+  { value: "previous", label: "Cards · from a previous value", props: { variant: "cards", items: PREVIOUS, deltaVariant: "badge", size: "md" } },
+  { value: "corner", label: "Cards · change in the corner", props: { variant: "cards", items: CORNER, deltaPlacement: "corner", deltaVariant: "badge" } },
+  { value: "link", label: "Cards · View more", props: { variant: "cards", items: LINKED, deltaPlacement: "corner" } },
+  { value: "goal", label: "Cards · status and goal", props: { variant: "cards", items: REGIONS } },
+  { value: "trend", label: "Cards · sparkline", props: { variant: "cards", items: TICKERS, size: "md" } },
+  { value: "usage", label: "Usage · bars", props: { variant: "usage", items: USAGE_BAR } },
+  {
+    value: "plan",
+    label: "Usage · rings with a header",
+    props: {
+      variant: "usage",
+      meter: "ring",
+      items: USAGE_RING,
+      title: "Plan usage",
+      description: (
+        <>
+          You are on the <span className="font-medium text-foreground">Team</span> plan.{" "}
+          <Button variant="link" size="inherit" onClick={() => toast("Opening plans")}>
+            Compare plans
+          </Button>
+        </>
+      ),
+    },
+  },
+  { value: "budgets", label: "Usage · rings with a link", props: { variant: "usage", meter: "ring", items: BUDGETS, linkLabel: "View spend" } },
+  { value: "infra", label: "Usage · actions and a budget", props: { variant: "usage", items: INFRA, limitLabel: "Change budget" } },
+  { value: "storage", label: "Usage · split with free space", props: { variant: "usage", items: STORAGE, columns: 1 } },
+  { value: "spend", label: "Usage · spend by kind", props: { variant: "usage", items: SPEND, columns: 1, className: "max-w-sm" } },
+  { value: "list", label: "List", props: { variant: "list", items: LIST, title: "Projected savings", className: "max-w-md" } },
+];
+
+export default function StatCardsDemo() {
+  const [shape, setShape] = useState("strip");
+  const [state, setState] = useState("data");
+  // Limits the founder changed, by tile id.
+  const [limits, setLimits] = useState({});
+  const pick = SHAPES.find((s) => s.value === shape) ?? SHAPES[0];
+  const items = (pick.props.items ?? []).map((it) => (limits[it.id] !== undefined ? { ...it, limit: limits[it.id], limitText: it.limitText ? `$${limits[it.id]} budget` : it.limitText } : it));
+
+  // A save that can fail, as a real one can: anything over 5,000 needs an owner.
+  async function changeLimit(item, limit) {
+    await new Promise((r) => setTimeout(r, 500));
+    if (limit > 5000) return { ok: false, error: "Limits over 5,000 need an owner to approve them." };
+    setLimits((l) => ({ ...l, [item.id]: limit }));
+    toast.success(`${item.label}: limit set to ${limit.toLocaleString("en-US")}`);
+    return { ok: true };
+  }
+
+  return (
+    <div className="grid gap-6">
+      <div className="grid gap-3 sm:flex sm:flex-wrap sm:items-end">
+        <Field id="stat-cards-shape" label="Shape" className="sm:w-72">
+          <Select id="stat-cards-shape" value={shape} onChange={(e) => setShape(e.target.value)} options={SHAPES.map(({ value, label }) => ({ value, label }))} />
+        </Field>
+        <ToggleGroup
+          size="sm"
+          aria-label="Demo state"
+          value={state}
+          onChange={setState}
+          items={[
+            { value: "data", label: "Data" },
+            { value: "loading", label: "Loading" },
+            { value: "empty", label: "Empty" },
+            { value: "error", label: "Error" },
+          ]}
+        />
+      </div>
+
+      <StatCards
+        key={shape}
+        label="Key numbers"
+        {...pick.props}
+        items={state === "empty" ? [] : items}
+        loading={state === "loading"}
+        error={state === "error" ? "The numbers could not be read. The last good ones are shown." : undefined}
+        onRetry={() => setState("data")}
+        onLimitChange={shape === "infra" ? changeLimit : undefined}
+        emptyTitle="No numbers yet"
+        emptyBody="They show once the first week of data is in."
+      />
+    </div>
+  );
+}

package/registry/blocks/stat-cards/index.js

@@ -0,0 +1,4 @@
+// The StatCards block — `makersclaw add stat-cards`. Fixed: compose it
+// through its props (README.md beside this file); a tile it cannot be is
+// your own component in components/, built from the kit's Stat and Meter.
+export { StatCards } from "./stat-cards";

package/registry/blocks/stat-cards/stat-cards.jsx

@@ -0,0 +1,307 @@
+"use client";
+
+import { Button, Card, Delta, Empty, Item, ItemGroup, Meter, Notice, Skeleton, Stat, StatGroup, StatusDot, cx } from "../../ui";
+import { Sparkline } from "../chart";
+import { LimitSheet, MoreLink, UsageTile, useLimitEditor } from "./usage";
+
+// StatCards — a row of key numbers, each with its name and what changed.
+// Four shapes over one list of items:
+//
+//   strip  (default) one bordered strip, a rule between the numbers
+//   cards  each number its own card: a change, a "from" value, a status
+//          dot and a goal, a sparkline, a "View more" footer
+//   usage  amounts against a limit: a bar or a ring, a split by kind with
+//          what is left, a warning line near the cap, an action per tile
+//          and a limit the founder can change (onLimitChange)
+//   list   label · value · change, one row each, in a bordered list
+//
+// Data in as props, saves out as callbacks. README.md beside this file
+// lists every prop.
+
+const LG_COLS = { 1: "lg:grid-cols-1", 2: "lg:grid-cols-2", 3: "lg:grid-cols-3", 4: "lg:grid-cols-4" };
+const SM_COLS = { 1: "sm:grid-cols-1", 2: "sm:grid-cols-2", 3: "sm:grid-cols-2", 4: "sm:grid-cols-2" };
+const STATUS_WORDS = { success: "On track", warning: "Needs attention", danger: "At risk", info: "In progress", neutral: "No status" };
+// A long unbroken value ("$287,654.00") breaks rather than push its cell wider.
+const WRAP = "[overflow-wrap:anywhere]";
+
+const keyOf = (item, i) => String(item?.id ?? item?.label ?? i);
+
+// A delta prop as Delta's props: a bare number is a percent.
+function deltaProps(item, variant) {
+  const d = item?.delta;
+  if (d === null || d === undefined || d === false) return null;
+  const base = typeof d === "number" ? { value: d, suffix: "%" } : { ...d };
+  return { variant, invert: item.invert, ...base };
+}
+
+// Up is good unless inverted; the sparkline wears that verdict.
+function trendTone(item) {
+  if (item.trendTone) return item.trendTone;
+  const d = item.delta;
+  const n = typeof d === "number" ? d : typeof d?.value === "number" ? d.value : 0;
+  if (!n) return "chart-1";
+  const good = item.invert || d?.invert ? n < 0 : n > 0;
+  return good ? "success" : "danger";
+}
+
+function statusOf(item) {
+  const s = item?.status;
+  if (!s) return null;
+  if (typeof s === "string") return { tone: s, label: STATUS_WORDS[s] ?? s };
+  return { tone: s.tone ?? "neutral", label: s.label ?? STATUS_WORDS[s.tone] ?? "" };
+}
+
+// One number: the label row (with a status dot or a corner change), the
+// value, then an optional goal. Used bare in a strip cell and inside a card.
+function StatBody({ item, deltaPlacement, deltaVariant, size }) {
+  const status = statusOf(item);
+  const d = deltaProps(item, deltaVariant);
+  const corner = d && deltaPlacement === "corner" && !status;
+  const unit = [item.unit, item.previous !== undefined && item.previous !== null ? `from ${item.previous}` : null].filter(Boolean).join(" ");
+  const goal = item.goal;
+  return (
+    <div className={cx("min-w-0", WRAP)}>
+      <div className="flex min-w-0 items-start justify-between gap-3">
+        <span className="min-w-0 truncate text-sm font-medium text-muted-foreground">
+          {item.label}
+          {item.sublabel ? <span className="font-normal"> · {item.sublabel}</span> : null}
+        </span>
+        {status ? <StatusDot tone={status.tone} label={status.label} size="sm" className="shrink-0" /> : null}
+        {corner ? <Delta {...d} className="shrink-0" /> : null}
+      </div>
+      <Stat value={item.value} unit={unit || undefined} delta={corner ? undefined : d ?? undefined} caption={item.caption} size={size} />
+      {goal && typeof goal.value === "number" ? (
+        <Meter
+          className="mt-4"
+          size="thin"
+          value={goal.value}
+          max={goal.max ?? 100}
+          label={goal.label ?? "Goals achieved"}
+          valueText={goal.valueText ?? `${goal.value}/${goal.max ?? 100}`}
+          valueTone="neutral"
+          tone={goal.tone ?? (status && status.tone !== "neutral" ? status.tone : undefined)}
+          direction="higher"
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function hasTrend(item) {
+  return Array.isArray(item.trend) && item.trend.length > 0;
+}
+
+function StatCard({ item, deltaPlacement, deltaVariant, size, linkLabel }) {
+  const link = item.href || item.onSelect;
+  return (
+    <Card as="div" padding="none" className="flex min-w-0 flex-col">
+      <div className="p-4">
+        <StatBody item={item} deltaPlacement={deltaPlacement} deltaVariant={deltaVariant} size={size} />
+      </div>
+      {hasTrend(item) ? (
+        <Sparkline
+          data={item.trend}
+          label={item.trendLabel ?? `${item.label}, trend`}
+          tone={trendTone(item)}
+          height={48}
+          dot={false}
+          className="-mt-1"
+        />
+      ) : null}
+      {link ? (
+        <div className="mt-auto flex justify-end border-t border-border px-4 py-2.5">
+          <MoreLink item={item} fallback={linkLabel} />
+        </div>
+      ) : null}
+    </Card>
+  );
+}
+
+function Loading({ variant, count, cols }) {
+  const n = Array.from({ length: count }, (_, i) => i);
+  if (variant === "list") {
+    return (
+      <div aria-busy="true" aria-label="Loading" className="grid gap-3 rounded-lg border border-border bg-card p-4">
+        {n.map((i) => (
+          <div key={i} className="flex items-center justify-between gap-4">
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-4 w-20" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+  const tile = (i) => (
+    <div key={i} className="grid gap-3">
+      <Skeleton className="h-4 w-24" />
+      <Skeleton className="h-7 w-32" />
+      {variant === "usage" ? <Skeleton className="h-2 w-full" /> : null}
+    </div>
+  );
+  if (variant === "strip") {
+    return (
+      <div aria-busy="true" aria-label="Loading">
+        <StatGroup columns={cols}>{n.map(tile)}</StatGroup>
+      </div>
+    );
+  }
+  return (
+    <div aria-busy="true" aria-label="Loading" className={cx("grid grid-cols-1 gap-4", SM_COLS[cols], LG_COLS[cols])}>
+      {n.map((i) => (
+        <Card key={i} as="div">
+          {tile(i)}
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+export function StatCards({
+  items,
+  variant = "strip",
+  columns,
+  title,
+  description,
+  actions,
+  label,
+  // stats
+  deltaPlacement,
+  deltaVariant,
+  size,
+  linkLabel = "View more",
+  // usage
+  meter = "bar",
+  format,
+  warnAt = 90,
+  onLimitChange,
+  limitLabel = "Change limit",
+  limitHint,
+  // states
+  loading = false,
+  loadingCount = 4,
+  error,
+  onRetry,
+  emptyTitle = "No numbers yet",
+  emptyBody,
+  emptyAction,
+  className,
+}) {
+  const list = (items ?? []).filter(Boolean);
+  const cols = Math.min(4, Math.max(1, columns ?? Math.min(list.length || loadingCount || 1, 4)));
+  const editor = useLimitEditor(onLimitChange, format);
+  // Each shape's own defaults, as the source drew it.
+  const placement = deltaPlacement ?? (variant === "strip" ? "corner" : "inline");
+  const dVariant = deltaVariant ?? (variant === "list" ? "badge" : "text");
+  const statSize = size ?? (variant === "strip" ? "md" : "lg");
+
+  let body;
+  if (loading) {
+    body = <Loading variant={variant} count={Math.max(1, loadingCount)} cols={cols} />;
+  } else if (!list.length) {
+    body = <Empty icon="chart" title={emptyTitle} body={emptyBody} action={emptyAction} className="rounded-lg border border-dashed border-border" />;
+  } else if (variant === "list") {
+    body = (
+      <ItemGroup variant="outline" aria-label={label ?? title}>
+        {list.map((item, i) => (
+          <Item
+            key={keyOf(item, i)}
+            size="sm"
+            title={item.label}
+            href={item.href}
+            onClick={item.onSelect && !item.href ? () => item.onSelect(item) : undefined}
+            meta={
+              <span className="flex items-center gap-3 text-sm">
+                <span data-nums className="font-medium text-foreground">
+                  {item.value}
+                  {item.unit ? <span className="ml-1 text-xs font-normal text-muted-foreground">{item.unit}</span> : null}
+                </span>
+                {deltaProps(item, dVariant) ? (
+                  <>
+                    <span aria-hidden="true" className="h-4 w-px bg-border" />
+                    <Delta {...deltaProps(item, dVariant)} />
+                  </>
+                ) : null}
+              </span>
+            }
+          />
+        ))}
+      </ItemGroup>
+    );
+  } else if (variant === "usage") {
+    body = (
+      <div role="list" aria-label={label ?? title} className={cx("grid grid-cols-1 gap-4", SM_COLS[cols], LG_COLS[cols])}>
+        {list.map((item, i) => (
+          <div role="listitem" key={keyOf(item, i)} className="min-w-0">
+            <UsageTile
+              item={item}
+              meter={item.meter ?? meter}
+              format={item.format ?? format}
+              warnAt={item.warnAt ?? warnAt}
+              linkLabel={linkLabel}
+              limitLabel={item.limitLabel ?? limitLabel}
+              onEditLimit={onLimitChange && item.editable !== false ? () => editor.open(item) : null}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  } else if (variant === "cards") {
+    body = (
+      <div role="list" aria-label={label ?? title} className={cx("grid grid-cols-1 gap-4", SM_COLS[cols], LG_COLS[cols])}>
+        {list.map((item, i) => (
+          <div role="listitem" key={keyOf(item, i)} className="flex min-w-0 flex-col [&>*]:flex-1">
+            <StatCard item={item} deltaPlacement={placement} deltaVariant={dVariant} size={statSize} linkLabel={linkLabel} />
+          </div>
+        ))}
+      </div>
+    );
+  } else {
+    body = (
+      <StatGroup columns={cols} label={label ?? title}>
+        {list.map((item, i) => (
+          <div key={keyOf(item, i)} className="grid gap-2">
+            <StatBody item={item} deltaPlacement={placement} deltaVariant={dVariant} size={statSize} />
+            {hasTrend(item) ? (
+              <Sparkline data={item.trend} label={item.trendLabel ?? `${item.label}, trend`} tone={trendTone(item)} height={32} dot={false} />
+            ) : null}
+            {item.href || item.onSelect ? (
+              <div>
+                <MoreLink item={item} fallback={linkLabel} />
+              </div>
+            ) : null}
+          </div>
+        ))}
+      </StatGroup>
+    );
+  }
+
+  return (
+    <section aria-label={title ? undefined : label} className={cx("grid min-w-0 gap-4", className)}>
+      {title || description || actions ? (
+        <header className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0">
+            {title ? <h2 className="text-lg font-semibold leading-tight text-foreground">{title}</h2> : null}
+            {description ? <div className="mt-1 text-sm text-muted-foreground">{description}</div> : null}
+          </div>
+          {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
+        </header>
+      ) : null}
+      {error ? (
+        <Notice
+          tone="danger"
+          action={
+            onRetry ? (
+              <Button size="sm" icon="refresh" onClick={onRetry}>
+                Retry
+              </Button>
+            ) : null
+          }
+        >
+          {error}
+        </Notice>
+      ) : null}
+      {body}
+      <LimitSheet editor={editor} label={limitLabel} hint={limitHint} />
+    </section>
+  );
+}