@locusgraph/blocks 0.1.1 → 0.2.0

package/README.md

@@ -19,7 +19,8 @@ pnpm add @locusgraph/blocks @locusgraph/components
 | `WalletPanel` | `balanceMicroUsd`, `debtMicroUsd`, `grants`. A Rule Grid cell |
 | `CreditPacks` | `packs`, `onBuy(packId)`, `pending`. A Rule Grid cell |
 | `PlanOptions` | `plans`, `actionFor(plan)` for plans that are not current |
-| `KeysTable` | `keys`, `actions(key)` |
+| `KeysTable` | `keys`, `actions(key)`, `highlightedId` to flash a just-created key. Dates render in the viewer's time zone after hydration |
+| `LocalDate` | `value` (ISO string): UTC on the server, the viewer's time zone after hydration |
 | `NoKeys` | `newKeyHref` (omit for read-only roles), `linkComponent` |
 
 `WalletPanel` and `CreditPacks` are cells, so put them in a `RuleGrid`:

package/dist/dates/local-date.d.ts

@@ -0,0 +1,3 @@
+export declare function LocalDate({ value }: {
+    value: string;
+}): import("react").JSX.Element;

package/dist/dates/local-date.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+const utcFormat = new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeZone: "UTC" });
+const localFormat = new Intl.DateTimeFormat("en-US", { dateStyle: "medium" });
+export function LocalDate({ value }) {
+    const [hydrated, setHydrated] = useState(false);
+    useEffect(() => setHydrated(true), []);
+    return (_jsx("time", { dateTime: value, children: (hydrated ? localFormat : utcFormat).format(new Date(value)) }));
+}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { CreditPacks } from "./billing/credit-packs.js";
 export { PlanOptions } from "./billing/plan-options.js";
 export { WalletPanel } from "./billing/wallet-panel.js";
+export { LocalDate } from "./dates/local-date.js";
 export { KeysTable } from "./keys/keys-table.js";
 export { NoKeys } from "./keys/no-keys.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,6 +1,7 @@
 export { CreditPacks } from "./billing/credit-packs.js";
 export { PlanOptions } from "./billing/plan-options.js";
 export { WalletPanel } from "./billing/wallet-panel.js";
+export { LocalDate } from "./dates/local-date.js";
 export { KeysTable } from "./keys/keys-table.js";
 export { NoKeys } from "./keys/no-keys.js";
 export * from "./types.js";

package/dist/keys/keys-table.d.ts

@@ -3,6 +3,7 @@ import type { ApiKeyRow } from "../types.js";
 type KeysTableProps = {
     keys: ApiKeyRow[];
     actions?: (key: ApiKeyRow) => React.ReactNode;
+    highlightedId?: string;
 };
-export declare function KeysTable({ keys, actions }: KeysTableProps): React.JSX.Element;
+export declare function KeysTable({ keys, actions, highlightedId }: KeysTableProps): React.JSX.Element;
 export {};

package/dist/keys/keys-table.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@locusgraph/components";
-import { formatDate } from "@locusgraph/utils";
-export function KeysTable({ keys, actions }) {
-    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Key" }), _jsx(TableHead, { children: "Product" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Created by" }), _jsx(TableHead, { className: "hidden sm:table-cell", children: "Created" }), _jsx(TableHead, { children: "Expires" }), actions && _jsx(TableHead, { className: "w-0" })] }) }), _jsx(TableBody, { children: keys.map((key) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: key.name ?? "Untitled" }), _jsx(TableCell, { className: "hidden font-mono text-muted-foreground md:table-cell", children: key.maskedKey }), _jsx(TableCell, { children: key.productLabel }), _jsx(TableCell, { className: "hidden md:table-cell", children: key.createdBy }), _jsx(TableCell, { className: "hidden sm:table-cell", children: formatDate(key.createdAt) }), _jsx(TableCell, { children: formatDate(key.expiresAt, "Never") }), actions && _jsx(TableCell, { className: "text-right", children: actions(key) })] }, key.id))) })] }));
+import { LocalDate } from "../dates/local-date.js";
+function dateOr(value, empty) {
+    return value ? _jsx(LocalDate, { value: value }) : empty;
+}
+export function KeysTable({ keys, actions, highlightedId }) {
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Key" }), _jsx(TableHead, { children: "Product" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Created by" }), _jsx(TableHead, { className: "hidden sm:table-cell", children: "Created" }), _jsx(TableHead, { children: "Expires" }), actions && _jsx(TableHead, { className: "w-0" })] }) }), _jsx(TableBody, { children: keys.map((key) => (_jsxs(TableRow, { "data-new": key.id === highlightedId ? "" : undefined, className: "transition-colors duration-1000 data-new:bg-accent", children: [_jsx(TableCell, { className: "font-medium", children: key.name ?? "Untitled" }), _jsx(TableCell, { className: "hidden font-mono text-muted-foreground md:table-cell", children: key.maskedKey }), _jsx(TableCell, { children: key.productLabel }), _jsx(TableCell, { className: "hidden md:table-cell", children: key.createdBy }), _jsx(TableCell, { className: "hidden sm:table-cell", children: dateOr(key.createdAt, "") }), _jsx(TableCell, { children: dateOr(key.expiresAt, "Never") }), actions && _jsx(TableCell, { className: "text-right", children: actions(key) })] }, key.id))) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locusgraph/blocks",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Product sections built from @locusgraph/components: usage meters and alerts, wallet, credit packs, plan options and API keys.",
   "license": "MIT",
   "repository": {
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@locusgraph/components": "0.1.1",
-    "@locusgraph/config": "0.1.0",
+    "@locusgraph/config": "0.1.1",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",