@cfast/ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,9 +1,8 @@
-export { ActionButton, AvatarWithInitials, BulkActionBar, ConfirmProvider, DataTable, DetailView, DropZone, FileList, FilterBar, FormStatus, ImagePreview, ImpersonationBanner, ListView, RoleBadge, UIPluginProvider, createUIPlugin, getInitials, useActionToast, useColumnInference, useComponent, useConfirm, useToast, useUIPlugin } from './client.js';
-import { D as DateFieldProps, B as BooleanFieldProps, N as NumberFieldProps, T as TextFieldProps, E as EmailFieldProps, U as UrlFieldProps, I as ImageFieldProps, F as FileFieldProps, R as RelationFieldProps, J as JsonFieldProps, a as FieldComponent, b as EmptyStateProps, c as NavigationProgressProps, d as BreadcrumbItem, e as TabItem, A as AppShellProps, f as NavigationItem, g as UserMenuProps } from './permission-gate-DVmY42oz.js';
-export { h as ActionButtonProps, i as AlertSlotProps, j as AppShellSlotProps, k as AvatarWithInitialsProps, l as BaseFieldProps, m as BreadcrumbSlotProps, n as BulkAction, o as ButtonSlotProps, C as ChipSlotProps, p as ColumnDef, q as ColumnShorthand, r as ConfirmDialogSlotProps, s as ConfirmOptions, t as DataTableProps, u as DetailViewProps, v as DropZoneProps, w as DropZoneSlotProps, x as FileListFile, y as FileListProps, z as FilterBarProps, G as FilterDef, H as FilterOption, K as FilterType, L as FormStatusData, M as FormStatusProps, O as ImagePreviewProps, P as ImpersonationBannerProps, Q as ListViewProps, S as PageContainerSlotProps, V as PermissionGate, W as PermissionGateProps, X as RoleBadgeProps, Y as SidebarSlotProps, Z as TableCellSlotProps, _ as TableRowSlotProps, $ as TableSectionSlotProps, a0 as TableSlotProps, a1 as ToastApi, a2 as ToastOptions, a3 as ToastSlotProps, a4 as ToastType, a5 as TooltipSlotProps, a6 as UIPlugin, a7 as UIPluginComponents, a8 as UserMenuLink, a9 as WhenForbidden } from './permission-gate-DVmY42oz.js';
+import { D as DateFieldProps, B as BooleanFieldProps, N as NumberFieldProps, T as TextFieldProps, E as EmailFieldProps, U as UrlFieldProps, I as ImageFieldProps, F as FileFieldProps, R as RelationFieldProps, J as JsonFieldProps, a as FieldComponent, b as EmptyStateProps, c as NavigationProgressProps, d as BreadcrumbItem, e as TabItem, A as AppShellProps, f as NavigationItem, g as UserMenuProps } from './client-CIx8_tmv.js';
+export { h as ActionButton, i as ActionButtonProps, j as AlertSlotProps, k as AppShellSlotProps, l as AvatarWithInitials, m as AvatarWithInitialsProps, n as BaseFieldProps, o as BreadcrumbSlotProps, p as BulkAction, q as BulkActionBar, r as ButtonSlotProps, C as ChipSlotProps, s as ColumnDef, t as ColumnShorthand, u as ConfirmDialogSlotProps, v as ConfirmOptions, w as ConfirmProvider, x as DataTable, y as DataTableProps, z as DetailView, G as DetailViewProps, H as DropZone, K as DropZoneProps, L as DropZoneSlotProps, M as FileList, O as FileListFile, P as FileListProps, Q as FilterBar, S as FilterBarProps, V as FilterDef, W as FilterOption, X as FilterType, Y as FormStatus, Z as FormStatusData, _ as FormStatusProps, $ as ImagePreview, a0 as ImagePreviewProps, a1 as ImpersonationBanner, a2 as ImpersonationBannerProps, a3 as ListView, a4 as ListViewProps, a5 as PageContainerSlotProps, a6 as PermissionGate, a7 as PermissionGateProps, a8 as RoleBadge, a9 as RoleBadgeProps, aa as SidebarSlotProps, ab as TableCellSlotProps, ac as TableRowSlotProps, ad as TableSectionSlotProps, ae as TableSlotProps, af as ToastApi, ag as ToastContext, ah as ToastOptions, ai as ToastSlotProps, aj as ToastType, ak as TooltipSlotProps, al as UIPlugin, am as UIPluginComponents, an as UIPluginProvider, ao as UserMenuLink, ap as WhenForbidden, aq as createUIPlugin, ar as getInitials, as as useActionToast, at as useColumnInference, au as useComponent, av as useConfirm, aw as useToast, ax as useUIPlugin } from './client-CIx8_tmv.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import '@cfast/actions/client';
+import { ClientDescriptor, ActionHookResult } from '@cfast/actions/client';
 
 /**
  * Read-only display component that formats date values.
@@ -412,4 +411,52 @@ declare function AppShellHeader({ children, userMenu, }: {
  */
 declare function UserMenu({ links, onSignOut, }: UserMenuProps): react_jsx_runtime.JSX.Element | null;
 
-export { AppShell, AppShellHeader, AppShellProps, AppShellSidebar, BooleanField, BooleanFieldProps, BreadcrumbItem, DateField, DateFieldProps, EmailField, EmailFieldProps, EmptyState, EmptyStateProps, FileField, FileFieldProps, ImageField, ImageFieldProps, JsonField, JsonFieldProps, NavigationItem, NavigationProgress, NavigationProgressProps, NumberField, NumberFieldProps, PageContainer, RelationField, RelationFieldProps, TabItem, TextField, TextFieldProps, UrlField, UrlFieldProps, UserMenu, UserMenuProps, fieldForColumn, fieldsForTable };
+/**
+ * Safely retrieves a property from an unknown record-like value by string key.
+ *
+ * Isolates the single unavoidable `Record<string, unknown>` assertion needed
+ * when accessing dynamic keys on generic row/record objects (e.g., in DataTable
+ * and DetailView). Using this helper keeps the rest of the codebase cast-free.
+ *
+ * Returns `undefined` for non-object or null values.
+ *
+ * @param obj - A value expected to be a record-like object.
+ * @param key - The property name to look up.
+ * @returns The property value, or `undefined` if the key does not exist or obj is not an object.
+ *
+ * @internal
+ */
+declare function getField(obj: unknown, key: string): unknown;
+/**
+ * Extracts a string or number `id` from an unknown value.
+ *
+ * Returns the `id` property when it is a `string` or `number`, otherwise
+ * falls back to `0`. Isolates the dynamic-key access so callers avoid casts.
+ *
+ * @param obj - A value expected to be a record-like object with an `id` property.
+ * @returns The `id` value as a `string | number`, or `0` if missing/wrong type.
+ *
+ * @internal
+ */
+declare function getRecordId(obj: unknown): string | number;
+
+/**
+ * Returns the permission status and submit function for the first action in a descriptor.
+ *
+ * Convenience wrapper around `useActions()` for single-action descriptors
+ * (e.g. a create action passed to EmptyState or a navigation item guard).
+ *
+ * @param descriptor - Client-side action descriptor from `@cfast/actions`
+ * @returns The ActionHookResult with `permitted`, `invisible`, `pending`, and `submit`
+ *
+ * @example
+ * ```ts
+ * const status = useActionStatus(createPost.client);
+ * if (status.permitted) {
+ *   status.submit({ title: "New Post" });
+ * }
+ * ```
+ */
+declare function useActionStatus(descriptor: ClientDescriptor): ActionHookResult;
+
+export { AppShell, AppShellHeader, AppShellProps, AppShellSidebar, BooleanField, BooleanFieldProps, BreadcrumbItem, DateField, DateFieldProps, EmailField, EmailFieldProps, EmptyState, EmptyStateProps, FileField, FileFieldProps, ImageField, ImageFieldProps, JsonField, JsonFieldProps, NavigationItem, NavigationProgress, NavigationProgressProps, NumberField, NumberFieldProps, PageContainer, RelationField, RelationFieldProps, TabItem, TextField, TextFieldProps, UrlField, UrlFieldProps, UserMenu, UserMenuProps, fieldForColumn, fieldsForTable, getField, getRecordId, useActionStatus };

package/dist/index.js

@@ -1,43 +1,43 @@
 import {
   ActionButton,
+  AvatarWithInitials,
+  BooleanField,
   BulkActionBar,
   ConfirmProvider,
   DataTable,
+  DateField,
   DetailView,
   DropZone,
+  EmailField,
   EmptyState,
   FileList,
   FilterBar,
   FormStatus,
   ImagePreview,
   ImpersonationBanner,
-  ListView,
-  PageContainer,
-  RoleBadge,
-  useActionToast,
-  useColumnInference,
-  useConfirm
-} from "./chunk-JEGEIQ3R.js";
-import {
-  AvatarWithInitials,
-  BooleanField,
-  DateField,
-  EmailField,
   JsonField,
+  ListView,
   NumberField,
+  PageContainer,
   PermissionGate,
+  RoleBadge,
   TextField,
+  ToastContext,
   UIPluginProvider,
   createUIPlugin,
   fieldForColumn,
   fieldsForTable,
   getField,
   getInitials,
+  getRecordId,
   useActionStatus,
+  useActionToast,
+  useColumnInference,
   useComponent,
+  useConfirm,
   useToast,
   useUIPlugin
-} from "./chunk-RDTUEOLK.js";
+} from "./chunk-PWBG6CGF.js";
 
 // src/fields/url-field.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -280,13 +280,17 @@ export {
   RelationField,
   RoleBadge,
   TextField,
+  ToastContext,
   UIPluginProvider,
   UrlField,
   UserMenu,
   createUIPlugin,
   fieldForColumn,
   fieldsForTable,
+  getField,
   getInitials,
+  getRecordId,
+  useActionStatus,
   useActionToast,
   useColumnInference,
   useComponent,

package/llms.txt

@@ -6,11 +6,11 @@
 
 Use `@cfast/ui` when building data-driven pages in a cfast app. It sits between your primitive component library (MUI Joy UI) and your application code, providing "smart" components that integrate with `@cfast/db`, `@cfast/actions`, `@cfast/permissions`, `@cfast/pagination`, `@cfast/auth`, and `@cfast/storage`.
 
-Import styled components from `@cfast/ui/joy`. Import headless components and hooks from `@cfast/ui`.
+Import styled components from `@cfast/joy`. Import headless components and hooks from `@cfast/ui`.
 
 ## Key concepts
 
-- **Headless core + UI plugins**: `@cfast/ui` exports hooks and logic. `@cfast/ui/joy` exports Joy UI styled implementations. Custom plugins can provide other UI libraries via `createUIPlugin()`.
+- **Headless core + UI plugins**: `@cfast/ui` exports hooks and logic. `@cfast/joy` exports Joy UI styled implementations. Custom plugins can provide other UI libraries via `createUIPlugin()`.
 - **Permission-aware**: Components like `ActionButton`, `PermissionGate`, `EmptyState`, sidebar nav items, and `BulkActionBar` automatically hide/disable based on `@cfast/actions` permission status.
 - **Schema-driven**: Pass a Drizzle `table` to `DataTable`, `FilterBar`, `DetailView`, or `useColumnInference()` and columns/fields/filters are inferred from column types.
 - **URL-synced**: `FilterBar` serializes filter state to URL search params. `DataTable` sorting syncs to URL params. Both work with `@cfast/pagination`'s `parseParams()` in loaders.
@@ -36,7 +36,7 @@ useColumnInference(table: Record<string, unknown> | undefined, columns?: string[
 // Maps Drizzle table columns to TypedField components. Memoized.
 ```
 
-### Components (from `@cfast/ui/joy`)
+### Components (from `@cfast/joy`)
 
 **Data display:**
 - `DataTable` -- table with sorting, selection, row actions, skeleton loading. Accepts `data` (pagination result), `table` (Drizzle), `columns`, `actions`, `selectable`.
@@ -93,7 +93,7 @@ useComponent(slotName: string): ComponentType
 ### Full list page
 
 ```typescript
-import { ListView } from "@cfast/ui/joy";
+import { ListView } from "@cfast/joy";
 import { usePagination } from "@cfast/pagination";
 import { posts } from "~/db/schema";
 
@@ -118,7 +118,7 @@ function PostsPage() {
 ### Permission-aware button with confirmation
 
 ```typescript
-import { ActionButton } from "@cfast/ui/joy";
+import { ActionButton } from "@cfast/joy";
 
 <ActionButton
   action={deletePost}
@@ -152,7 +152,7 @@ useActionToast(composed.client, {
 
 ## Common Mistakes
 
-- Importing from `@cfast/ui/joy` on the server -- Joy components are client-only. Use headless exports from `@cfast/ui` for server-safe code.
+- Importing from `@cfast/joy` on the server -- Joy components are client-only. Use headless exports from `@cfast/ui` for server-safe code.
 - Forgetting `<ToastProvider>` in root layout -- `useToast()` and `useActionToast()` throw without it.
 - Forgetting `<ConfirmProvider>` -- `useConfirm()` and `ActionButton` with `confirmation` need it.
 - Passing raw data arrays to `DataTable` instead of a pagination result from `usePagination()`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfast/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Permission-aware React components with UI library plugins",
   "keywords": [
     "cfast",
@@ -23,10 +23,6 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./joy": {
-      "import": "./dist/joy.js",
-      "types": "./dist/joy.d.ts"
-    },
     "./client": {
       "import": "./dist/client.js",
       "types": "./dist/client.d.ts"
@@ -41,28 +37,16 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/joy.ts src/client.ts --format esm --dts",
-    "dev": "tsup src/index.ts src/joy.ts src/client.ts --format esm --dts --watch",
+    "build": "tsup src/index.ts src/client.ts --format esm --dts",
+    "dev": "tsup src/index.ts src/client.ts --format esm --dts --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
-    "test": "vitest run",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "test": "vitest run"
   },
   "peerDependencies": {
-    "@mui/joy": ">=5.0.0-beta.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "react-router": ">=7",
-    "sonner": ">=2"
-  },
-  "peerDependenciesMeta": {
-    "@mui/joy": {
-      "optional": true
-    },
-    "sonner": {
-      "optional": true
-    }
+    "react-router": ">=7"
   },
   "dependencies": {
     "@cfast/actions": "workspace:*",
@@ -73,12 +57,6 @@
     "@cfast/storage": "workspace:*"
   },
   "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/joy": "^5.0.0-beta.52",
-    "@mui/material": "^6.5.0",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
@@ -87,8 +65,6 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.12.0",
-    "sonner": "^2.0.3",
-    "storybook": "^8.6.14",
     "tsup": "^8",
     "typescript": "^5.7",
     "vitest": "^4.1.0"