@geniee-inc/sfa-kit 1.6.0

package/GUIDE.md

@@ -0,0 +1,585 @@
+# @geniee-inc/sfa-kit
+
+React hooks and components for building pages that connect to GENIEE SFA/CRM data. The kit handles authentication and data fetching — you compose layouts freely using the hooks or optional convenience wrappers.
+
+## Install
+
+```bash
+npm install @geniee-inc/sfa-kit
+```
+
+No registry configuration is required — the package is published publicly on the npm registry. `react` and `react-dom` (18 or 19) are peer dependencies.
+
+The package ships built JavaScript and TypeScript declarations only. It contains no credentials: every API call requires a Keystone JWT obtained at runtime, so the package on its own cannot reach any data.
+
+### Reading the installed version
+
+`SFA_KIT_VERSION` is not a public export. The installed version is read from the package manifest, which is exposed as a subpath for exactly this purpose:
+
+```ts
+import pkg from '@geniee-inc/sfa-kit/package.json';
+// pkg.version -> '1.6.0'
+```
+
+No other subpath resolves: `exports` deliberately exposes only the root entry and `./package.json`, so internal modules cannot be imported directly.
+
+## Architecture
+
+The kit is **hooks-first**. It provides auth, data fetching, and metadata discovery. The AI (or developer) generates the UI directly — deciding layout, field arrangement, and styling. Pre-built components exist as convenience wrappers but are not required.
+
+## Auth
+
+Every page uses `SfaLoginGate` as the outermost wrapper. It auto-detects the hosting context and chooses the right auth flow:
+
+| Context                     | What happens                          | How                                                                             |
+| --------------------------- | ------------------------------------- | ------------------------------------------------------------------------------- |
+| Standalone (Studio preview) | Login form + DevToolbar appear        | Page is not in an iframe, or no embed context detected                          |
+| Embedded in SFA (iframe)    | Seamless code exchange, no login form | Page is in an iframe with `trustedOrigin` prop or content token (`_t`) detected |
+
+### Props
+
+- **`apiBase`** (optional) — Overrides the default API endpoint (`https://keystone-api.chikyu.mobi`).
+- **`trustedOrigin`** (optional) — The origin of the SFA/CRM host page (e.g. `"https://app.chikyu.net"`). When provided and the page runs inside an iframe, `SfaLoginGate` uses the postMessage code-exchange flow (`POST /v1/auth/exchange`) instead of a login form. Injected automatically by Keystone's content endpoint at serve time.
+- **`defaultOrganizationId`** (optional) — The org ID to auto-select when the user's account belongs to multiple organizations. **Set this to the org that generated the page's metadata** (the org used in Step 0 schema discovery). Without this prop, multi-org accounts auto-select the first available org, which may not be the intended one. Use an env var, not a literal: `defaultOrganizationId={Number(process.env.NEXT_PUBLIC_DEFAULT_ORG_ID)}`.
+- **`objectKey`** (optional) — The object this page is built for (e.g. `"companies"`). The standalone DevToolbar shows it in the page-info tooltip and in the record ID placeholder. Pass it at **both** levels; omit it only if the page genuinely has no object.
+- **`level`** (optional) — `"record"` or `"object"`: which Chikyu tab slot this page is for. Only `"record"` gets a record ID input in the standalone DevToolbar. Defaults to `"record"` when `objectKey` is set and `"object"` otherwise, so pages written before this prop keep working — but **an object-level page that passes `objectKey` must set `level="object"` explicitly**, or it gets a record ID input it cannot use.
+
+### Standalone mode (no `trustedOrigin`)
+
+Shows a GENIEE SFA/CRM-branded login form. Org is auto-selected via `defaultOrganizationId` (or the first available org). After login, a DevToolbar appears at the top; on record-level pages it carries a record ID input and a fetch button, and at both levels it shows the object, org ID and sfa-kit version behind the ページ情報 tooltip. The toolbar only renders in standalone mode and will not appear when embedded.
+
+```tsx
+'use client';
+
+import { SfaLoginGate } from '@geniee-inc/sfa-kit';
+
+export default function Page() {
+  return (
+    <SfaLoginGate
+      defaultOrganizationId={Number(process.env.NEXT_PUBLIC_DEFAULT_ORG_ID)}
+      objectKey="companies"
+      level="record">
+      {/* hooks and components go here */}
+    </SfaLoginGate>
+  );
+}
+```
+
+Every component and hook in this package is a client component: they use `useState`, `useEffect` and context. The package does not emit a `'use client'` directive of its own, so **any file that imports from `@geniee-inc/sfa-kit` must declare `'use client'` itself** when it lives in a React Server Components tree (Next.js App Router, for example). Omitting it fails at build time with "You're importing a component that needs `useState`".
+
+### Embedded mode (`trustedOrigin` + iframe)
+
+No login form. The host sends a single-use exchange code via `postMessage`, `SfaLoginGate` exchanges it for a JWT, and proactively refreshes the token before expiry. The same page code works in both modes — `trustedOrigin` is injected at serve time, so no code changes are needed between preview and production.
+
+**postMessage protocol:**
+
+```text
+iframe -> host  : { type: "sfa-kit:ready" }          after mount
+host   -> iframe: { type: "sfa-kit:code", code }     single-use exchange code
+iframe -> host  : { type: "sfa-kit:code-request" }   pre-expiry refresh / 401 fallback
+```
+
+### SfaProvider (advanced)
+
+For cases where the host app manages auth entirely and passes a token directly as a prop. Most pages should use `SfaLoginGate` instead.
+
+```tsx
+import { SfaProvider } from '@geniee-inc/sfa-kit';
+
+<SfaProvider
+  apiBase="..."
+  auth={{ accessToken: jwt }}
+  mode="direct"
+  organizationId={organizationId}>
+  {/* hooks and components go here */}
+</SfaProvider>;
+```
+
+**Never build a custom login form.** `SfaLoginGate` is the only auth entry point. It handles login, org resolution, dev email formats, and iframe code exchange. Custom forms will break.
+
+## Embed context
+
+Pages use `useEmbedContext()` to read the current object and record from the hosting environment. In embedded mode, the host provides these via postMessage. In standalone mode, the DevToolbar provides them.
+
+```tsx
+import { useEmbedContext, useRecord } from '@geniee-inc/sfa-kit';
+
+function CompanyDetail() {
+  const ctx = useEmbedContext();
+  const { record, isLoading } = useRecord(
+    ctx?.object_key ?? '',
+    ctx?.record_id ?? ''
+  );
+  // ...
+}
+```
+
+Returns `{ object_key: string, record_id?: string } | null`.
+
+## Hooks
+
+The primary way to access SFA/CRM data. Must be inside the auth wrapper.
+
+### useRecord
+
+Fetches a single record.
+
+```tsx
+import { useRecord } from '@geniee-inc/sfa-kit';
+
+const { record, isLoading, error, refetch } = useRecord('companies', 'abc123');
+```
+
+Returns `{ record: SfaRecord | null, isLoading, error, refetch }`.
+
+### useRecordList
+
+Fetches a paginated list of records. Supports cursor-based pagination (Keystone API).
+
+```tsx
+import { useRecordList } from '@geniee-inc/sfa-kit';
+
+const { items, totalCount, hasMore, pageIndex, goToPage, isLoading, error } =
+  useRecordList('companies');
+
+// With params
+const result = useRecordList('companies', {
+  limit: 10,
+  sortBy: 'company_name',
+  sortOrder: 'asc',
+});
+```
+
+**Filters** must use react-querybuilder shape with `combinator` and `rules`. The backend rejects any other format with a 422.
+
+```tsx
+const result = useRecordList('companies', {
+  filter: {
+    combinator: 'and',
+    rules: [
+      { field: 'industry', operator: 'eq', value: 'Manufacturing' },
+      { field: 'annual_revenue', operator: 'gte', value: 1000000 },
+    ],
+  },
+});
+```
+
+For cross-object queries (fetching child records of a parent), prefer `useRelatedRecords` which builds the filter automatically from describe metadata.
+
+### useRelatedRecords
+
+Fetches child records scoped to a parent by resolving the join automatically from describe metadata. The caller names the parent and target collections; the hook discovers which foreign key to filter on.
+
+```tsx
+import { useRelatedRecords } from '@geniee-inc/sfa-kit';
+
+// Fetch opportunities belonging to a company
+const { items, isLoading, error, relationship } = useRelatedRecords(
+  'companies', // parent collection
+  'comp-1', // parent record id
+  'opportunities' // target collection
+);
+```
+
+Internally, the hook calls `useDescribe` on the parent to find the relationship's `viaField`, builds a filter (`eq` for a single id, `in` for an array), and delegates to `useRecordList` with cursor pagination.
+
+**Grandchild pattern** — for deeper traversals (e.g., company → negotiations → activity histories), compose two calls. The second call takes the child IDs returned by the first call and fetches their grandchildren in a single `in` query, no N+1. Because `childIds` comes from the first call's paginated `items`, this fetches grandchildren for the currently loaded page only:
+
+```tsx
+const { items: negotiations } = useRelatedRecords(
+  'companies',
+  companyId,
+  'business_discussions'
+);
+const childIds = negotiations.map(r => r.record_id);
+const { items: activities } = useRelatedRecords(
+  'business_discussions',
+  childIds, // string[] triggers "in" operator
+  'activity_histories',
+  { limit: 50, sortBy: 'activity_date', sortOrder: 'desc' }
+);
+```
+
+**Params:** `{ limit?, sortBy?, sortOrder?, additionalFilter? }`. The `additionalFilter` is merged alongside the auto-built relationship filter. It is added as a single element of the `rules` array, so pass either one rule object or a nested react-querybuilder group with `{ combinator, rules }`:
+
+```tsx
+// Single extra rule
+useRelatedRecords('companies', 'comp-1', 'opportunities', {
+  additionalFilter: { field: 'status', operator: 'eq', value: 'open' },
+});
+
+// Nested rule group
+useRelatedRecords('companies', 'comp-1', 'opportunities', {
+  additionalFilter: {
+    combinator: 'and',
+    rules: [
+      { field: 'status', operator: 'eq', value: 'open' },
+      { field: 'annual_revenue', operator: 'gte', value: 1000000 },
+    ],
+  },
+});
+```
+
+**Options:** `{ enabled?: boolean }`. Set `enabled: false` to keep the hook from fetching until you are ready:
+
+```tsx
+const { items, isLoading, error } = useRelatedRecords(
+  'companies',
+  'comp-1',
+  'opportunities',
+  {}, // params
+  { enabled: false }
+);
+```
+
+**Error handling:** If the relationship doesn't exist in the parent's metadata, the hook returns a `RelationNotFoundError` with an `availableTargets` list so the caller can self-correct.
+
+Returns `{ items, totalCount, hasMore, pageIndex, goToPage, isLoading, error, refetch, relationship }`.
+
+### useDescribe
+
+Discovers object schema — fields, types, relationships, permissions. Use this to build dynamic UIs that adapt to any object.
+
+```tsx
+import { useDescribe } from '@geniee-inc/sfa-kit';
+
+const { object, isLoading, error } = useDescribe('companies');
+
+// object.fields — field definitions (key, label, kind, required, editable, choices)
+// object.relationships — relationships to other objects
+// object.permissions — { readable, creatable, updatable, deletable }
+```
+
+### useObjectCatalog
+
+Lists all objects available in the org.
+
+```tsx
+import { useObjectCatalog } from '@geniee-inc/sfa-kit';
+
+const { objects, isLoading } = useObjectCatalog();
+// objects: [{ key, label, origin, primaryDisplayField, relationships }]
+```
+
+### useSfaClient
+
+Returns the raw `SfaClient` instance for advanced use cases not covered by the other hooks.
+
+```tsx
+import { useSfaClient } from '@geniee-inc/sfa-kit';
+
+const client = useSfaClient();
+const record = await client.get('companies', 'abc123');
+const list = await client.list('companies', { limit: 10 });
+```
+
+## Record shape
+
+All hooks return records in a normalized shape:
+
+```ts
+interface SfaRecord {
+  record_id: string;
+  collection_name: string;
+  fields: Record<string, SfaFieldValue>;
+  titleFields: string[];
+  title?: string | null; // Pre-built display title from Keystone
+  version?: string | null; // Opaque version token (Keystone ETag) — required by useUpdateRecord and useDeleteRecord for optimistic locking
+  permissions: { canEdit: boolean; canDelete: boolean };
+}
+
+interface SfaFieldValue {
+  kind: SfaFieldKind; // 'text' | 'number' | 'date' | 'datetime' | 'single_choice' | ...
+  value: unknown; // raw stored value
+  label: string | null; // display label (for selects, references, etc.)
+}
+```
+
+Access field values: `record.fields['company_name']?.value` for the raw value, `record.fields['company_name']?.label` for the display label.
+
+## Error handling
+
+Two baseline components for resilient pages:
+
+### ErrorBoundary
+
+Catches uncaught errors and renders a retry UI instead of a blank page.
+
+```tsx
+import { ErrorBoundary } from '@geniee-inc/sfa-kit';
+
+<ErrorBoundary>
+  <RecordView collection="companies" recordId={id} />
+</ErrorBoundary>;
+```
+
+### EmptyState
+
+Placeholder for pages with no data.
+
+```tsx
+import { EmptyState } from '@geniee-inc/sfa-kit';
+
+if (!ctx?.record_id)
+  return <EmptyState message="レコードが指定されていません" />;
+```
+
+## Convenience wrappers (optional)
+
+These fetch their own data. Use them for simple cases; prefer hooks when you need custom UI.
+
+### RecordView
+
+Displays a single record as a label-value grid.
+
+```tsx
+<RecordView collection="companies" recordId="abc123" />
+```
+
+Props:
+
+- `collection` (required) - The object name.
+- `recordId` (required) - The ID of the record to display.
+- `title` (optional) - Override the display title.
+- `fields` (optional) - Array of field names to show. If omitted, shows all fields.
+- `fieldGroups` (optional) - Grouped field layout. See below.
+
+**fieldGroups** organizes fields into titled groups with multi-column layouts:
+
+```tsx
+<RecordView
+  collection="companies"
+  recordId="abc123"
+  fieldGroups={[
+    {
+      title: 'Basic Info',
+      layout: '2-col',
+      fields: ['company_name', 'industry'],
+    },
+    {
+      title: 'Financial',
+      layout: '2-col',
+      fields: ['annual_revenue_calc', 'founded_date'],
+    },
+  ]}
+/>
+```
+
+Each group: `title?` (heading), `layout?` (`"1-col"` | `"2-col"` | `"3-col"`), `fields` (field names).
+
+### RecordList
+
+Displays a paginated table of records.
+
+```tsx
+<RecordList collection="companies" />
+```
+
+Props:
+
+- `collection` (required) - The object name.
+- `columns` (optional) - Array of `{ fieldName, header?, width? }`. If omitted, auto-detects up to 8 columns.
+- `pageSize` (optional) - Records per page. Default 20.
+- `onRowClick` (optional) - `(record) => void` callback.
+- `showPagination` (optional) - Default true.
+- `params` (optional) - `{ limit?, offset?, sortBy?, sortOrder?, filter?, cursor? }`.
+
+### FieldRenderer
+
+Renders a single field value based on its kind. Used internally by RecordView and RecordList. Use directly when building custom layouts.
+
+```tsx
+<FieldRenderer fieldValue={someField} fieldName="company_name" />
+```
+
+## Design tokens
+
+All kit components use CSS custom properties with `--sfa-*` prefixes. Use these in your generated UI for visual consistency with SFA/CRM:
+
+```css
+--sfa-primary: #3867d1;
+--sfa-error: #ed5c5c;
+--sfa-success: #a3c848;
+--sfa-warning: #f2b45e;
+--sfa-text-primary: #313542;
+--sfa-text-secondary: #838a98;
+--sfa-border: #d6d9dd;
+--sfa-bg-default: #f7f8fa;
+--sfa-bg-surface: #ffffff;
+--sfa-font-family: 'Noto Sans JP', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+```
+
+Override any token on a parent element:
+
+```tsx
+<div style={{ '--sfa-primary': '#FF0000' } as React.CSSProperties}>
+```
+
+## Composition examples
+
+**Record-level page with org default and embed context:**
+
+```tsx
+'use client';
+import {
+  SfaLoginGate,
+  useEmbedContext,
+  useRecord,
+  ErrorBoundary,
+  EmptyState,
+} from '@geniee-inc/sfa-kit';
+
+function CompanyDetail() {
+  const ctx = useEmbedContext();
+  const { record, isLoading, error } = useRecord(
+    ctx?.object_key ?? '',
+    ctx?.record_id ?? ''
+  );
+
+  if (!ctx?.record_id)
+    return <EmptyState message="会社レコードが選択されていません" />;
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+  if (!record) return null;
+
+  return (
+    <div>
+      <h1>{record.title ?? record.record_id}</h1>
+      {Object.entries(record.fields).map(([key, field]) => (
+        <p key={key}>
+          <strong>{key}:</strong> {field.label ?? String(field.value ?? '')}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+export default function Page() {
+  return (
+    <SfaLoginGate
+      defaultOrganizationId={Number(process.env.NEXT_PUBLIC_DEFAULT_ORG_ID)}
+      objectKey="companies"
+      level="record">
+      <ErrorBoundary>
+        <CompanyDetail />
+      </ErrorBoundary>
+    </SfaLoginGate>
+  );
+}
+```
+
+**Object-level page (`level="object"`, no record ID input):**
+
+```tsx
+'use client';
+import {
+  SfaLoginGate,
+  useEmbedContext,
+  useRecordList,
+} from '@geniee-inc/sfa-kit';
+
+function ObjectList() {
+  const ctx = useEmbedContext();
+  const { items, isLoading } = useRecordList(ctx?.object_key ?? '');
+  // ...
+}
+
+export default function Page() {
+  return (
+    <SfaLoginGate
+      defaultOrganizationId={Number(process.env.NEXT_PUBLIC_DEFAULT_ORG_ID)}
+      objectKey="companies"
+      level="object">
+      <ObjectList />
+    </SfaLoginGate>
+  );
+}
+```
+
+**Cross-object page (company timeline with current-page grandchildren):**
+
+```tsx
+'use client';
+import {
+  SfaLoginGate,
+  useEmbedContext,
+  useRelatedRecords,
+  ErrorBoundary,
+  EmptyState,
+} from '@geniee-inc/sfa-kit';
+
+function CompanyTimeline() {
+  const ctx = useEmbedContext();
+  const companyId = ctx?.record_id ?? '';
+
+  const {
+    items: negotiations,
+    isLoading: loadingNeg,
+    error: negotiationsError,
+  } = useRelatedRecords('companies', companyId, 'business_discussions', {
+    limit: 50,
+    sortBy: 'created_date',
+    sortOrder: 'desc',
+  });
+
+  const childIds = negotiations.map(r => r.record_id);
+  // `childIds` is from the first call's paginated `items`, so this fetches
+  // grandchildren for the currently loaded page of negotiations only.
+  const {
+    items: activities,
+    isLoading: loadingAct,
+    error: activitiesError,
+  } = useRelatedRecords(
+    'business_discussions',
+    childIds,
+    'activity_histories',
+    { limit: 50, sortBy: 'activity_date', sortOrder: 'desc' }
+  );
+
+  if (!companyId)
+    return <EmptyState message="会社レコードが選択されていません" />;
+  if (negotiationsError || activitiesError)
+    return <p>Error: {(negotiationsError ?? activitiesError).message}</p>;
+  if (loadingNeg || loadingAct) return <p>Loading...</p>;
+
+  return (
+    <div>
+      <h2>商談 ({negotiations.length})</h2>
+      {negotiations.map(n => (
+        <p key={n.record_id}>{n.title ?? n.record_id}</p>
+      ))}
+      <h2>活動履歴 ({activities.length})</h2>
+      {activities.map(a => (
+        <p key={a.record_id}>{a.title ?? a.record_id}</p>
+      ))}
+    </div>
+  );
+}
+
+export default function Page() {
+  return (
+    <SfaLoginGate
+      defaultOrganizationId={Number(process.env.NEXT_PUBLIC_DEFAULT_ORG_ID)}
+      objectKey="companies"
+      level="record">
+      <ErrorBoundary>
+        <CompanyTimeline />
+      </ErrorBoundary>
+    </SfaLoginGate>
+  );
+}
+```
+
+## Do NOT
+
+- Do NOT create your own authentication, login forms, or auth providers. `SfaLoginGate` handles everything.
+- Do NOT hand-wire foreign key filters for cross-object queries. Use `useRelatedRecords` which resolves the join from describe metadata automatically.
+- Do NOT hardcode `defaultOrganizationId` as a number literal in JSX. Use `Number(process.env.NEXT_PUBLIC_DEFAULT_ORG_ID)` and set the value in `.env`.
+- Do NOT embed service account credentials in generated page source. Discovery credentials (used to query the schema at build time) must never appear in deployed code.
+- Do NOT call the API directly with fetch. Use the provided hooks or `useSfaClient()`.
+- Do NOT add Route Handlers (app/api/) for SFA data. The kit calls the API from the browser.
+- Do NOT hardcode API base URLs, API keys, or credentials anywhere.
+- Do NOT import from `@mui/material`, `@emotion`, or `@ag-grid`. This package has zero external UI dependencies.
+- Do NOT nest SfaLoginGate inside another SfaLoginGate or SfaProvider.
+- Do NOT hardcode a list of available objects. Discover from the user's request or `useDescribe`.
+- Do NOT write `.npmrc` or embed npm registry tokens in any file. sfa-kit is a public package and installs without authentication.

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Geniee, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# @geniee-inc/sfa-kit
+
+React hooks and components for building pages that connect to GENIEE SFA/CRM data. The kit handles authentication and data fetching — you compose the layout.
+
+## Install
+
+```bash
+npm install @geniee-inc/sfa-kit
+```
+
+No registry configuration and no authentication are required. `react` and `react-dom` (18 or 19) are peer dependencies.
+
+The package ships ES modules built for a bundler — Next.js, Vite, webpack, Bun. Relative specifiers inside it are extensionless, so plain Node ESM resolution will not load it directly, and there is no CommonJS entry point: `require()` is not supported.
+
+## Scope
+
+This package is published so that it can be installed by GENIEE SFA/CRM (Chikyu) pages and by the JapanAI Studio page builder. It is not a general-purpose library: every request needs a Keystone access token issued at runtime by GENIEE's API, and without one all calls fail with 401. The package carries no credentials and cannot reach any data on its own.
+
+## What is published
+
+Built JavaScript and TypeScript declarations only. Source, tests and git history stay in GENIEE's private repository.
+
+## Documentation
+
+The full API reference — every hook, component, prop and the composition rules — ships inside this package as `GUIDE.md`. After installing, read `node_modules/@geniee-inc/sfa-kit/GUIDE.md`, or extract it from the published tarball.
+
+It is the authoritative reference for the version you installed. Cross-check it against the `.d.ts` declarations in the same package before relying on a specific prop.
+
+## License
+
+MIT — see `LICENSE.md`.

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@geniee-inc/sfa-kit",
+  "version": "1.6.0",
+  "description": "React hooks and components for building pages that connect to GENIEE SFA/CRM data.",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE.md",
+    "GUIDE.md"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}