xertica-ui 1.9.5 → 2.0.0

package/CHANGELOG.md

@@ -7,6 +7,42 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.0.0] — 2026-05-11
+
+### Added
+
+- **Subpath exports** — The package now exposes 6 granular entry points alongside the full root barrel:
+  - `xertica-ui/ui` — all UI primitives (Button, Card, Input, Table, Dialog, etc.)
+  - `xertica-ui/layout` — Sidebar and Header
+  - `xertica-ui/brand` — XerticaProvider, XerticaLogo, XerticaXLogo, XerticaOrbe, ThemeToggle, LanguageSelector
+  - `xertica-ui/assistant` — XerticaAssistant, MarkdownMessage, CodeBlock, FormattedDocument, ModernChatInput
+  - `xertica-ui/media` — VideoPlayer, AudioPlayer, FloatingMediaWrapper
+  - `xertica-ui/hooks` — useLayout, useTheme, useLanguage, useBrandColors, useAssistente, useApiKey
+  - Root `from 'xertica-ui'` remains fully supported for backward compatibility.
+- **`ImageWithFallback` added to `xertica-ui/ui`** — previously only in the root barrel; now accessible via the `/ui` subpath.
+- **Multi-entry Vite build** — `vite.config.ts` now uses `lib.entry` as an object (7 entry points). Output filenames follow `[entryName].[format].js` pattern.
+- **CLI template — FSD/FDA architecture** — The scaffolded template was restructured to follow Feature-Sliced Design + Feature-Driven Architecture:
+  - `src/app/` — BrowserRouter, XerticaProvider, AuthGuard (auth state + route definitions), AppLayout (Sidebar + children shell)
+  - `src/shared/` — `config/navigation.ts` (route registry), `lib/auth.ts` (localStorage helpers), `types/auth.ts` (User interface)
+  - `src/features/auth/ui/` — LoginContent, ForgotPasswordContent, VerifyEmailContent, ResetPasswordContent; with shared `AuthPageShell` and `SocialLoginButtons` DRY extractions
+  - `src/features/home/ui/` — HomeContent
+  - `src/features/template/ui/` — TemplateContent, FormTemplate
+  - `src/pages/` — thin page wrappers (LoginPage, HomePage, TemplatePage, ForgotPasswordPage, VerifyEmailPage, ResetPasswordPage)
+- **`templates/guidelines/Guidelines.md`** — new architecture guide documenting FSD/FDA layers, layer responsibilities, and "Adding New Routes" step-by-step.
+
+### Changed
+
+- **Template imports** — All template source files updated to use subpath imports (`xertica-ui/ui`, `xertica-ui/brand`, `xertica-ui/layout`, `xertica-ui/assistant`, `xertica-ui/hooks`) instead of the root barrel.
+- **`FormTemplate.tsx` rewritten** — Removed dependency on `@hookform/resolvers/zod`, `react-hook-form`, and `zod` (packages not included in the CLI template's `package.json`). Now uses plain React `useState` + inline validation with only `xertica-ui/ui` primitives.
+- **`tsconfig.build.json`** — `include` array updated to cover all new barrel source directories (`components/**/*`, `contexts/**/*`, `hooks/**/*`).
+- **Documentation** (`llms.txt`, `llms-full.txt`) — Added subpath import reference table and FSD/FDA layer mapping.
+
+### Fixed
+
+- **Stale compiled artifacts** — Removed `App.js`, `App.d.ts`, `main.js`, `main.d.ts` from `templates/src/app/` that were being resolved by Vite's extension priority (`.js` before `.tsx`), causing `Failed to fetch dynamically imported module` errors after the FSD restructure.
+
+---
+
 ## [1.10.0] — 2026-05-08
 
 ### Added

package/README.md

@@ -50,7 +50,7 @@ import 'xertica-ui/style.css';
 **2. Wrap your app** with `XerticaProvider`:
 
 ```tsx
-import { XerticaProvider } from 'xertica-ui';
+import { XerticaProvider } from 'xertica-ui/brand';
 
 function App() {
   return (
@@ -63,6 +63,26 @@ function App() {
 
 ---
 
+## 📂 Subpath Imports (FSD/FDA)
+
+Xertica UI v2 exposes **granular subpath entries** — import only what your layer needs without loading the entire library:
+
+```tsx
+import { Button, Card, Input }       from 'xertica-ui/ui';        // shared/ui — primitives
+import { Sidebar, Header }           from 'xertica-ui/layout';    // layout shell
+import { XerticaProvider }           from 'xertica-ui/brand';     // app-level — providers & brand
+import { XerticaAssistant }          from 'xertica-ui/assistant'; // feature — AI assistant
+import { VideoPlayer, AudioPlayer }  from 'xertica-ui/media';     // feature — media players
+import { useLayout, useTheme }       from 'xertica-ui/hooks';     // shared/lib — hooks & contexts
+import 'xertica-ui/style.css';                                     // styles — import once at root
+```
+
+The root `from 'xertica-ui'` barrel remains available for full backward compatibility.
+
+> **TypeScript**: requires `"moduleResolution": "bundler"` (or `"node16"` / `"nodenext"`) in `tsconfig.json` to resolve subpath exports.
+
+---
+
 ## 🛠️ The Layout System
 
 Xertica UI features an autonomous layout system managed by `LayoutContext`.
@@ -71,7 +91,7 @@ Xertica UI features an autonomous layout system managed by `LayoutContext`.
 Every page **must** use the `<PageHeader>` component for its title and primary actions. Never use raw `h1` or `div` for headers.
 
 ```tsx
-import { PageHeader, PageHeaderHeading, Button } from 'xertica-ui';
+import { PageHeader, PageHeaderHeading, Button } from 'xertica-ui/ui';
 
 export function MyPage() {
   return (
@@ -91,12 +111,37 @@ export function MyPage() {
 ### `useLayout()` Hook
 Access the sidebar state, width, and toggle functions anywhere in the component tree:
 ```tsx
+import { useLayout } from 'xertica-ui/hooks';
+
 const { sidebarWidth, isSidebarOpen, toggleSidebar } = useLayout();
 ```
 
 ---
 
-## 🧩 Component Catalog (96 Components)
+## 🏗️ CLI Template — FSD/FDA Architecture
+
+Projects scaffolded with `npx xertica-ui@latest init` follow **Feature-Sliced Design (FSD) + Feature-Driven Architecture (FDA)**:
+
+```
+src/
+  app/              ← BrowserRouter, XerticaProvider, AuthGuard, AppLayout
+  shared/
+    config/         ← navigation.ts (route definitions)
+    lib/            ← auth.ts (localStorage helpers)
+    types/          ← auth.ts (User interface)
+  features/
+    auth/ui/        ← LoginContent, ForgotPasswordContent, VerifyEmailContent, ResetPasswordContent
+    home/ui/        ← HomeContent
+    template/ui/    ← TemplateContent, FormTemplate
+  pages/            ← thin wrappers: LoginPage, HomePage, TemplatePage, …
+  styles/           ← index.css, xertica/tokens.css
+```
+
+Each feature only imports from `shared/` or its own domain. Pages only compose features. See `templates/guidelines/Guidelines.md` for the full architecture guide.
+
+---
+
+## 🧩 Component Catalog (97 Components)
 
 ### Layout & Navigation
 `Header` · `Sidebar` · `PageHeader` · `Breadcrumb` · `NavigationMenu` · `Tabs` · `Pagination` · `Accordion` · `Collapsible`

package/components/assistant/index.ts

@@ -0,0 +1,5 @@
+export * from './xertica-assistant';
+export { CodeBlock } from './code-block';
+export { MarkdownMessage } from './markdown-message';
+export { ModernChatInput } from './modern-chat-input';
+export { FormattedDocument } from './formatted-document';

package/components/brand/index.ts

@@ -0,0 +1,6 @@
+export * from './xertica-provider';
+export * from './xertica-logo';
+export * from './xertica-xlogo';
+export * from './xertica-orbe';
+export * from './theme-toggle';
+export * from './language-selector';

package/components/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from '../../contexts/LayoutContext';
+export * from '../../contexts/ThemeContext';
+export * from '../../contexts/LanguageContext';
+export * from '../../contexts/BrandColorsContext';
+export * from '../../contexts/AssistenteContext';
+export * from '../../contexts/ApiKeyContext';

package/components/layout/index.ts

@@ -0,0 +1,2 @@
+export * from './sidebar';
+export * from './header';

package/components/media/index.ts

@@ -0,0 +1,3 @@
+export * from './video-player';
+export * from './audio-player';
+export { FloatingMediaWrapper } from './FloatingMediaWrapper';

package/components/ui/index.ts

@@ -216,4 +216,7 @@ export type { PageHeaderProps } from "./page-header";
 export type { ChartConfig } from "./chart";
 
 // Hooks
-export { useMobile, useIsMobile } from "../shared/use-mobile";
+export { useMobile, useIsMobile } from "../shared/use-mobile";
+
+// Image Utilities
+export { ImageWithFallback } from "../figma/ImageWithFallback";