@specscreen/backoffice-core 0.1.1 → 0.1.2

package/README.md

@@ -16,6 +16,11 @@ Include the stylesheet once in your app (Next.js: `app/layout.tsx`, Vite: `main.
 import "@specscreen/backoffice-core/styles";
 ```
 
+Tailwind v4 note:
+
+- No extra `@source` or theme mapping is required in consumer apps when using this package stylesheet.
+- The package exports its own token mappings and source scanning directives.
+
 ---
 
 ## Quick Start
@@ -153,7 +158,11 @@ const NavLink = ({ href, children, className }: any) => (
   </Link>
 );
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const currentPath = usePathname();
 
   return (
@@ -213,12 +222,12 @@ export function App() {
 
 ### `AuthProvider` interface
 
-| Method | Signature | Description |
-|---|---|---|
-| `login` | `({ email, password }) → Promise<void>` | Throw on failure |
-| `logout` | `() → Promise<void>` | Clear session |
-| `checkAuth` | `() → Promise<boolean>` | Return `false` (never throw) on invalid session |
-| `getUser` | `() → Promise<User \| null>` | Return `null` if unauthenticated |
+| Method      | Signature                               | Description                                     |
+| ----------- | --------------------------------------- | ----------------------------------------------- |
+| `login`     | `({ email, password }) → Promise<void>` | Throw on failure                                |
+| `logout`    | `() → Promise<void>`                    | Clear session                                   |
+| `checkAuth` | `() → Promise<boolean>`                 | Return `false` (never throw) on invalid session |
+| `getUser`   | `() → Promise<User \| null>`            | Return `null` if unauthenticated                |
 
 ### Boot flow
 
@@ -240,15 +249,15 @@ function MyComponent() {
 }
 ```
 
-| Property | Type | Description |
-|---|---|---|
-| `user` | `User \| null` | Current authenticated user |
-| `isAuthenticated` | `boolean` | Session is active |
-| `isLoading` | `boolean` | Auth boot is in progress |
-| `error` | `string \| null` | Last auth error message |
-| `login` | `(email, password) → Promise<void>` | Delegates to `authProvider.login` |
-| `logout` | `() → Promise<void>` | Delegates to `authProvider.logout` |
-| `refreshUser` | `() → Promise<void>` | Re-fetch user profile |
+| Property          | Type                                | Description                        |
+| ----------------- | ----------------------------------- | ---------------------------------- |
+| `user`            | `User \| null`                      | Current authenticated user         |
+| `isAuthenticated` | `boolean`                           | Session is active                  |
+| `isLoading`       | `boolean`                           | Auth boot is in progress           |
+| `error`           | `string \| null`                    | Last auth error message            |
+| `login`           | `(email, password) → Promise<void>` | Delegates to `authProvider.login`  |
+| `logout`          | `() → Promise<void>`                | Delegates to `authProvider.logout` |
+| `refreshUser`     | `() → Promise<void>`                | Re-fetch user profile              |
 
 ---
 
@@ -290,14 +299,14 @@ function ActionsBar() {
 }
 ```
 
-| Method | Description |
-|---|---|
-| `can(permission)` | User has this specific permission |
-| `canAny(permissions[])` | User has at least one of these |
-| `canAll(permissions[])` | User has all of these |
-| `hasRole(role)` | User has this role |
-| `roles` | `string[]` — all user roles |
-| `permissions` | `string[]` — all user permissions |
+| Method                  | Description                       |
+| ----------------------- | --------------------------------- |
+| `can(permission)`       | User has this specific permission |
+| `canAny(permissions[])` | User has at least one of these    |
+| `canAll(permissions[])` | User has all of these             |
+| `hasRole(role)`         | User has this role                |
+| `roles`                 | `string[]` — all user roles       |
+| `permissions`           | `string[]` — all user permissions |
 
 ### `<Can>` guard component
 
@@ -357,9 +366,9 @@ The root component. Wraps everything with auth context, guards, and layout.
 <BackofficeApp
   config={config}
   authProvider={authProvider}
-  dataProvider={dataProvider}      // optional
-  NavLink={NavLink}                // optional, pass your router's Link
-  currentPath={pathname}           // optional, for active sidebar item
+  dataProvider={dataProvider} // optional
+  NavLink={NavLink} // optional, pass your router's Link
+  currentPath={pathname} // optional, for active sidebar item
   loginPageProps={{ logo: "/logo.svg", appName: "My App" }}
   headerActionLabel="New Record"
   onHeaderAction={() => router.push("/new")}
@@ -486,9 +495,9 @@ interface Resource {
 
 ```ts
 interface ResourceMeta {
-  requiredRoles?: string[];        // at least one role must match
-  requiredPermissions?: string[];  // all permissions must match
-  hideIfUnauthorized?: boolean;    // default true
+  requiredRoles?: string[]; // at least one role must match
+  requiredPermissions?: string[]; // all permissions must match
+  hideIfUnauthorized?: boolean; // default true
 }
 ```
 
@@ -500,7 +509,11 @@ interface BackofficeConfig {
   logo?: ComponentType<{ className?: string }> | string;
   resources?: Resource[];
   sidebarGroups?: SidebarGroup[];
-  sidebarFooterLinks?: Array<{ label: string; path: string; icon?: ComponentType }>;
+  sidebarFooterLinks?: Array<{
+    label: string;
+    path: string;
+    icon?: ComponentType;
+  }>;
   loginRedirect?: string;
   logoutRedirect?: string;
 }
@@ -530,7 +543,11 @@ export { AuthGuard, ResourceGuard, Can } from "@specscreen/backoffice-core";
 export { AppShell, Sidebar, SidebarToggle } from "@specscreen/backoffice-core";
 
 // Feedback
-export { LoginPage, AccessDenied, LoadingScreen } from "@specscreen/backoffice-core";
+export {
+  LoginPage,
+  AccessDenied,
+  LoadingScreen,
+} from "@specscreen/backoffice-core";
 
 // RBAC utilities (pure functions, no React)
 export {
@@ -543,9 +560,14 @@ export {
 
 // Types
 export type {
-  User, AuthProvider, AuthState,
-  Resource, ResourceMeta, SidebarGroup,
-  BackofficeConfig, DataProvider,
+  User,
+  AuthProvider,
+  AuthState,
+  Resource,
+  ResourceMeta,
+  SidebarGroup,
+  BackofficeConfig,
+  DataProvider,
 } from "@specscreen/backoffice-core";
 
 // Styles

package/dist/styles.css

@@ -2,6 +2,41 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Tailwind v4: scan this package's built files when stylesheet is imported. */
+@source "./**/*.{js,mjs,cjs}";
+
+/* Tailwind v4 tokens: expose utilities like bg-background, border-border, etc. */
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
 /*
  * @specscreen/backoffice-core — Design Tokens
  *
@@ -93,11 +128,12 @@
 
 @layer base {
   * {
-    @apply border-border;
+    border-color: hsl(var(--border));
   }
 
   body {
-    @apply bg-background text-foreground;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@specscreen/backoffice-core",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Reusable backoffice framework with auth and RBAC for React/Next.js",
   "private": false,
   "license": "UNLICENSED",