@locusgraph/blocks 0.1.0 → 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/billing/credit-packs.d.ts

@@ -1,4 +1,4 @@
-import type { CreditPack } from "../types";
+import type { CreditPack } from "../types.js";
 type CreditPacksProps = {
     packs: CreditPack[];
     onBuy: (packId: string) => void;

package/dist/billing/plan-options.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import type { PlanOffer } from "../types";
+import type { PlanOffer } from "../types.js";
 type PlanOptionsProps = {
     plans: PlanOffer[];
     actionFor?: (plan: PlanOffer) => React.ReactNode;

package/dist/billing/wallet-panel.d.ts

@@ -1,4 +1,4 @@
-import type { WalletGrant } from "../types";
+import type { WalletGrant } from "../types.js";
 type WalletPanelProps = {
     balanceMicroUsd: number;
     debtMicroUsd?: number;

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,9 +1,10 @@
-export { CreditPacks } from "./billing/credit-packs";
-export { PlanOptions } from "./billing/plan-options";
-export { WalletPanel } from "./billing/wallet-panel";
-export { KeysTable } from "./keys/keys-table";
-export { NoKeys } from "./keys/no-keys";
-export * from "./types";
-export { QuotaMeter } from "./usage/quota-meter";
-export { UsageAttention } from "./usage/usage-attention";
-export { UsageSummary } from "./usage/usage-summary";
+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";
+export { QuotaMeter } from "./usage/quota-meter.js";
+export { UsageAttention } from "./usage/usage-attention.js";
+export { UsageSummary } from "./usage/usage-summary.js";

package/dist/index.js

@@ -1,9 +1,10 @@
-export { CreditPacks } from "./billing/credit-packs";
-export { PlanOptions } from "./billing/plan-options";
-export { WalletPanel } from "./billing/wallet-panel";
-export { KeysTable } from "./keys/keys-table";
-export { NoKeys } from "./keys/no-keys";
-export * from "./types";
-export { QuotaMeter } from "./usage/quota-meter";
-export { UsageAttention } from "./usage/usage-attention";
-export { UsageSummary } from "./usage/usage-summary";
+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";
+export { QuotaMeter } from "./usage/quota-meter.js";
+export { UsageAttention } from "./usage/usage-attention.js";
+export { UsageSummary } from "./usage/usage-summary.js";

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

@@ -1,8 +1,9 @@
 import type * as React from "react";
-import type { ApiKeyRow } from "../types";
+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/dist/keys/no-keys.d.ts

@@ -1,4 +1,4 @@
-import type { LinkComponent } from "../types";
+import type { LinkComponent } from "../types.js";
 type NoKeysProps = {
     newKeyHref?: string;
     description?: string;

package/dist/usage/quota-meter.d.ts

@@ -1,4 +1,4 @@
-import { type Quota } from "../types";
+import { type Quota } from "../types.js";
 export declare function QuotaMeter({ quota }: {
     quota: Quota;
 }): import("react").JSX.Element;

package/dist/usage/quota-meter.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Progress } from "@locusgraph/components";
 import { formatCount, quotaPercent, quotaStatus } from "@locusgraph/utils";
-import { periodLabel } from "../types";
+import { periodLabel } from "../types.js";
 const statusIndicator = {
     ok: "",
     near: "[&_[data-slot=progress-indicator]]:bg-warn",

package/dist/usage/usage-attention.d.ts

@@ -1,4 +1,4 @@
-import { type LinkComponent, type Quota } from "../types";
+import { type LinkComponent, type Quota } from "../types.js";
 type UsageAttentionProps = {
     balanceMicroUsd: number | null;
     quotas: Quota[];

package/dist/usage/usage-attention.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert, AlertDescription, AlertTitle, Button } from "@locusgraph/components";
 import { balanceLevel, formatCount, formatMicroUsd, quotaStatus } from "@locusgraph/utils";
 import { CircleAlertIcon } from "lucide-react";
-import { periodLabel } from "../types";
+import { periodLabel } from "../types.js";
 function attentionTitle(empty, overCount) {
     if (empty)
         return "Out of credits";

package/dist/usage/usage-summary.d.ts

@@ -1,4 +1,4 @@
-import type { Quota } from "../types";
+import type { Quota } from "../types.js";
 type UsageSummaryProps = {
     quotas: Quota[];
     label?: string;

package/dist/usage/usage-summary.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RuleGrid, RuleGridCell, RuleGridLabel } from "@locusgraph/components";
-import { QuotaMeter } from "./quota-meter";
+import { QuotaMeter } from "./quota-meter.js";
 export function UsageSummary({ quotas, label = "Usage", emptyText = "No plan includes metered usage yet.", }) {
     return (_jsx(RuleGrid, { columns: 1, children: _jsxs(RuleGridCell, { className: "gap-5", children: [_jsx(RuleGridLabel, { children: label }), quotas.length > 0 ? (quotas.map((quota) => _jsx(QuotaMeter, { quota: quota }, quota.key))) : (_jsx("p", { className: "text-sm text-muted-foreground", children: emptyText }))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locusgraph/blocks",
-  "version": "0.1.0",
+  "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": {
@@ -29,17 +29,17 @@
     "provenance": true
   },
   "peerDependencies": {
-    "@locusgraph/components": "^0.1.0",
+    "@locusgraph/components": "^0.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@locusgraph/utils": "0.1.0",
+    "@locusgraph/utils": "0.1.1",
     "lucide-react": "^1.28.0"
   },
   "devDependencies": {
-    "@locusgraph/components": "0.1.0",
-    "@locusgraph/config": "0.1.0",
+    "@locusgraph/components": "0.1.1",
+    "@locusgraph/config": "0.1.1",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
@@ -49,7 +49,7 @@
     "vitest": "^5.0.3"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/sources.css dist/sources.css",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/sources.css dist/sources.css && node ../../scripts/esm-extensions.mjs dist",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run"
   }