@wakastellar/ui 4.0.0 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wakastellar/ui",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "description": "Zero-config UI Library for Next.js with TweakCN theming and i18n support",
   "keywords": [
     "ui",
@@ -57,7 +57,22 @@
     "./styles/v4": "./src/styles/globals.css",
     "./styles/base": "./src/styles/base.css",
     "./tailwind-preset": "./src/styles/tailwind.preset.js",
-    "./styles/*": "./src/styles/*.css"
+    "./styles/*": "./src/styles/*.css",
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.es.js",
+      "require": "./dist/components/*/index.cjs.js"
+    },
+    "./blocks/*": {
+      "types": "./dist/blocks/*/index.d.ts",
+      "import": "./dist/blocks/*/index.es.js",
+      "require": "./dist/blocks/*/index.cjs.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.es.js",
+      "require": "./dist/hooks/*.cjs.js"
+    }
   },
   "files": [
     "dist",
@@ -75,14 +90,14 @@
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-collapsible": "^1.1.16",
     "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-dialog": "^1.1.19",
+    "@radix-ui/react-dropdown-menu": "^2.1.20",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-menubar": "^1.1.20",
+    "@radix-ui/react-navigation-menu": "^1.2.18",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-radio-group": "^1.3.8",
@@ -95,6 +110,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.15",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.23",
@@ -104,16 +120,17 @@
     "cmdk": "^1.1.1",
     "commander": "^14.0.3",
     "date-fns": "^4.1.0",
-    "i18next": "^26.0.3",
+    "dompurify": "^3.4.13",
+    "i18next": "^26.3.4",
     "lucide-react": "^1.7.0",
-    "next-i18next": "^16.0.5",
     "prismjs": "^1.30.0",
     "prompts": "^2.4.2",
     "react-datepicker": "^9.1.0",
     "react-day-picker": "^9.14.0",
+    "react-easy-crop": "^5.5.0",
     "react-i18next": "^17.0.2",
-    "tailwind-merge": "^3.5.0",
-    "tailwind-variants": "^3.2.2"
+    "react-resizable-panels": "^4.11.2",
+    "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
     "@platejs/ai": ">=52.0.0",
@@ -278,43 +295,44 @@
     "@platejs/indent": "^53.0.0",
     "@platejs/layout": "^53.0.0",
     "@platejs/link": "^53.0.3",
-    "@platejs/markdown": "^53.0.0",
-    "@platejs/media": "^53.0.1",
+    "@platejs/markdown": "^53.2.2",
+    "@platejs/media": "^53.1.4",
     "@platejs/mention": "^53.0.0",
     "@platejs/resizable": "^53.0.0",
     "@platejs/selection": "^53.0.0",
     "@platejs/table": "^53.0.0",
     "@platejs/toc": "^53.0.0",
-    "@platejs/yjs": "^53.0.0",
+    "@platejs/yjs": "^53.2.0",
     "@size-limit/preset-big-lib": "^12.1.0",
     "@storybook/addon-a11y": "^10.3.3",
     "@storybook/addon-docs": "^10.3.3",
     "@storybook/addon-onboarding": "^10.3.3",
     "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/react": "^10.3.3",
     "@storybook/react-vite": "^10.3.3",
     "@tailwindcss/vite": "^4.2.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@tiptap/extension-link": "^3.22.5",
-    "@tiptap/extension-text-align": "^3.22.5",
-    "@tiptap/extension-underline": "^3.22.5",
-    "@tiptap/react": "^3.22.5",
-    "@tiptap/starter-kit": "^3.22.5",
+    "@tiptap/extension-link": "^3.31.3",
+    "@tiptap/extension-text-align": "^3.31.3",
+    "@tiptap/extension-underline": "^3.31.3",
+    "@tiptap/react": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
     "@types/node": "^25.5.0",
     "@types/prismjs": "^1.26.6",
     "@types/prompts": "^2.4.9",
     "@types/react": "^19.2.14",
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser": "^4.1.2",
-    "@vitest/coverage-v8": "^4.1.2",
-    "@vitest/ui": "^4.1.2",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/ui": "^4.1.10",
     "autoprefixer": "^10.4.27",
     "bundlemon": "^3.1.0",
-    "esbuild": "^0.27.4",
-    "eslint": "^10.2.1",
+    "esbuild": "^0.28.1",
+    "eslint": "^10.6.0",
     "eslint-plugin-jsdoc": "^62.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react-hooks": "^7.1.1",
@@ -324,7 +342,7 @@
     "knip": "^6.6.1",
     "platejs": "^53.0.3",
     "playwright": "^1.59.0",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.23",
     "react-hook-form": "^7.72.0",
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
@@ -338,11 +356,30 @@
     "typescript": "^6.0.2",
     "typescript-coverage-report": "^1.1.1",
     "typescript-eslint": "^8.59.1",
-    "vite": "^8.0.5",
+    "vite": "^8.0.16",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.2",
+    "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0"
   },
+  "overrides": {
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.5",
+    "jspdf": ">=4.2.1",
+    "next": ">=16.2.6",
+    "diff": ">=8.0.3",
+    "lodash": ">=4.18.0",
+    "lodash-es": ">=4.18.0",
+    "@isaacs/brace-expansion": ">=5.0.6",
+    "picomatch": ">=4.0.2",
+    "path-to-regexp": ">=8.4.0",
+    "handlebars": ">=4.7.9",
+    "serialize-javascript": ">=7.0.5",
+    "dompurify": ">=3.4.0",
+    "rollup": ">=4.59.0",
+    "markdown-it": ">=14.1.1",
+    "vite": ">=8.0.5",
+    "postcss": ">=8.5.10"
+  },
   "scripts": {
     "dev": "vite build --watch --mode development",
     "build": "vite build && pnpm build:types && pnpm build:cli",
@@ -368,6 +405,8 @@
     "audit:size-limit": "size-limit --json > audit/output/size-limit.json",
     "audit:all": "mkdir -p audit/output && pnpm audit:coverage && pnpm audit:bundle && pnpm audit:a11y && pnpm audit:typescript && pnpm audit:dead-code && pnpm audit:size-limit",
     "build:packages": "pnpm -r --filter './packages/*' build",
-    "type-check:packages": "pnpm -r --filter './packages/*' type-check"
+    "type-check:packages": "pnpm -r --filter './packages/*' type-check",
+    "registry:generate": "node scripts/generate-registry.mjs",
+    "registry:check": "node scripts/generate-registry.mjs --check"
   }
 }

package/src/blocks/_shared/identity/InviteUserPanel.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "../../../components/button"
+import { Label } from "../../../components/label"
+import { Textarea } from "../../../components/textarea"
+import { RoleSelect } from './RoleSelect'
+import type { InvitePayload, RoleDefinition } from './types'
+
+export interface InviteUserPanelProps {
+  roles: RoleDefinition[]
+  defaultRoleId?: string
+  onSubmit: (payload: InvitePayload) => Promise<void> | void
+  onCancel?: () => void
+  isSubmitting?: boolean
+}
+
+function parseEmails(raw: string): string[] {
+  return Array.from(
+    new Set(
+      raw
+        .split(/[\s,;\n]+/)
+        .map((s) => s.trim().toLowerCase())
+        .filter((s) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s))
+    )
+  )
+}
+
+/**
+ * Panel form for inviting one or more users by email with role selection.
+ */
+export function InviteUserPanel({
+  roles,
+  defaultRoleId,
+  onSubmit,
+  onCancel,
+  isSubmitting,
+}: InviteUserPanelProps): React.ReactElement {
+  const [emailsRaw, setEmailsRaw] = React.useState('')
+  const [roleId, setRoleId] = React.useState<string | undefined>(defaultRoleId ?? roles[0]?.id)
+  const [message, setMessage] = React.useState('')
+  const emails = React.useMemo(() => parseEmails(emailsRaw), [emailsRaw])
+  const canSubmit = emails.length > 0 && !!roleId && !isSubmitting
+
+  const handleFormSubmit = async (e: React.SyntheticEvent) => {
+    e.preventDefault()
+    if (!roleId || emails.length === 0) return
+    await onSubmit({ emails, roleId, message: message || undefined })
+  }
+
+  return (
+    <form onSubmit={handleFormSubmit} className="flex flex-col gap-4 p-4">
+      <div className="space-y-2">
+        <Label htmlFor="invite-emails">Adresses email</Label>
+        <Textarea
+          id="invite-emails"
+          value={emailsRaw}
+          onChange={(e) => setEmailsRaw(e.target.value)}
+          placeholder="alice@example.com, bob@example.com"
+          rows={3}
+        />
+        <p className="text-xs text-muted-foreground">
+          {emails.length} adresse{emails.length > 1 ? 's' : ''} détectée{emails.length > 1 ? 's' : ''}
+        </p>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="invite-role">Rôle</Label>
+        <RoleSelect id="invite-role" value={roleId} onChange={setRoleId} roles={roles} />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="invite-message">Message (optionnel)</Label>
+        <Textarea
+          id="invite-message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          rows={3}
+        />
+      </div>
+      <div className="mt-auto flex justify-end gap-2 pt-4 border-t">
+        {onCancel && (
+          <Button type="button" variant="ghost" onClick={onCancel} disabled={isSubmitting}>
+            Annuler
+          </Button>
+        )}
+        <Button type="submit" disabled={!canSubmit}>
+          {isSubmitting ? "Envoi…" : "Envoyer l'invitation"}
+        </Button>
+      </div>
+    </form>
+  )
+}

package/src/blocks/_shared/identity/RoleSelect.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../components/select"
+import type { RoleDefinition } from './types'
+
+export interface RoleSelectProps {
+  value: string | undefined
+  onChange: (value: string) => void
+  roles: RoleDefinition[]
+  disabled?: boolean
+  placeholder?: string
+  triggerClassName?: string
+  /**
+   * Optional id assigned to the underlying SelectTrigger so that a sibling
+   * `<Label htmlFor={...}>` can target it. When omitted, a stable id is
+   * generated via `useId()` and exposed through `aria-labelledby` fallback.
+   */
+  id?: string
+  /** Alias for `id` — kept for explicit naming in calling code. */
+  triggerId?: string
+}
+
+/**
+ * Accessible role picker built on top of the shared Select primitive.
+ * Accepts an optional `id` (or `triggerId`) so that a sibling `<Label htmlFor>`
+ * can target the trigger button — falls back to `useId()` when unset.
+ */
+export function RoleSelect({
+  value,
+  onChange,
+  roles,
+  disabled,
+  placeholder = 'Rôle',
+  triggerClassName,
+  id,
+  triggerId,
+}: RoleSelectProps): React.ReactElement {
+  const generatedId = React.useId()
+  const resolvedId = id ?? triggerId ?? generatedId
+  return (
+    <Select value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectTrigger id={resolvedId} className={triggerClassName}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {roles.map((role) => (
+          <SelectItem key={role.id} value={role.id}>
+            {role.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/blocks/_shared/identity/SidePushLayout.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+import { cn } from "../../../utils"
+import { Button } from "../../../components/button"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "../../../components/sheet"
+
+export interface SidePushLayoutProps {
+  children: React.ReactNode
+  panel: React.ReactNode | null
+  panelWidth?: number
+  panelTitle?: string
+  onClose?: () => void
+  className?: string
+}
+
+const MOBILE_QUERY = '(max-width: 767px)'
+
+function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = React.useState(false)
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return
+    const mq = window.matchMedia(MOBILE_QUERY)
+    const update = () => setIsMobile(mq.matches)
+    update()
+    mq.addEventListener('change', update)
+    return () => mq.removeEventListener('change', update)
+  }, [])
+  return isMobile
+}
+
+export function SidePushLayout({
+  children,
+  panel,
+  panelWidth = 520,
+  panelTitle,
+  onClose,
+  className,
+}: SidePushLayoutProps): React.ReactElement {
+  const isMobile = useIsMobile()
+  const isOpen = panel !== null
+  const asideRef = React.useRef<HTMLElement | null>(null)
+  const previouslyFocusedRef = React.useRef<HTMLElement | null>(null)
+  const titleId = React.useId()
+
+  React.useEffect(() => {
+    if (!isOpen) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose?.()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [isOpen, onClose])
+
+  React.useEffect(() => {
+    if (!isOpen) return
+    previouslyFocusedRef.current = document.activeElement as HTMLElement | null
+    if (asideRef.current) {
+      const focusable = asideRef.current.querySelector<HTMLElement>(
+        'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+      )
+      focusable?.focus()
+    }
+    return () => {
+      previouslyFocusedRef.current?.focus?.()
+    }
+  }, [isOpen])
+
+  if (isMobile) {
+    return (
+      <div className={cn('flex w-full h-full', className)}>
+        <div className="flex-1 min-w-0">{children}</div>
+        <Sheet open={isOpen} onOpenChange={(open) => { if (!open) onClose?.() }}>
+          <SheetContent
+            side="right"
+            className="w-full p-0"
+            style={{ maxWidth: `${panelWidth}px` }}
+          >
+            {panelTitle && (
+              <SheetHeader className="px-4 py-3 border-b">
+                <SheetTitle>{panelTitle}</SheetTitle>
+                <SheetDescription className="sr-only">
+                  {panelTitle}
+                </SheetDescription>
+              </SheetHeader>
+            )}
+            <div className="overflow-y-auto h-full">{panel}</div>
+          </SheetContent>
+        </Sheet>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex w-full h-full', className)}>
+      <div className="flex-1 min-w-0">{children}</div>
+      <aside
+        ref={asideRef}
+        aria-hidden={!isOpen}
+        aria-labelledby={panelTitle ? titleId : undefined}
+        style={{ width: isOpen ? panelWidth : 0 }}
+        className={cn(
+          'shrink-0 overflow-hidden border-l bg-card transition-[width] duration-200 ease-out',
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+      >
+        {isOpen && (
+          <div className="flex h-full flex-col" style={{ width: panelWidth }}>
+            <header className="sticky top-0 z-10 flex items-center justify-between border-b bg-card px-4 py-3">
+              <h2 id={titleId} className="text-base font-semibold">
+                {panelTitle}
+              </h2>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onClose}
+                aria-label="Fermer"
+              >
+                <X className="size-4" />
+              </Button>
+            </header>
+            <div className="flex-1 overflow-y-auto">{panel}</div>
+          </div>
+        )}
+      </aside>
+    </div>
+  )
+}

package/src/blocks/_shared/identity/index.ts

@@ -0,0 +1,3 @@
+export { SidePushLayout } from './SidePushLayout'
+export type { SidePushLayoutProps } from './SidePushLayout'
+export type { UserRecord, RoleDefinition, InvitePayload, UserPatch } from './types'

package/src/blocks/_shared/identity/types.ts

@@ -0,0 +1,29 @@
+export interface UserRecord {
+  id: string
+  email: string
+  firstName?: string
+  lastName?: string
+  avatarUrl?: string
+  roleId: string
+  status: 'active' | 'invited' | 'suspended'
+  lastLoginAt?: Date
+}
+
+export interface RoleDefinition {
+  id: string
+  label: string
+  description?: string
+}
+
+export interface InvitePayload {
+  emails: string[]
+  roleId: string
+  message?: string
+}
+
+export interface UserPatch {
+  firstName?: string
+  lastName?: string
+  roleId?: string
+  status?: UserRecord['status']
+}

package/src/blocks/api-keys-manager/ApiKeysManager.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { WakaApiKeysManager } from './index'
+import type { ApiKeyRecord, ScopeDefinition } from './index'
+
+const scopes: ScopeDefinition[] = [
+  { id: 'read', label: 'Lecture', description: 'Accès lecture seule' },
+  { id: 'write', label: 'Écriture', description: 'Accès lecture + écriture' },
+  { id: 'admin', label: 'Administration', description: 'Accès complet' },
+]
+
+const keys: ApiKeyRecord[] = [
+  {
+    id: 'k1',
+    name: 'CI Production',
+    prefix: 'wks_live_a1b2',
+    scopes: ['read', 'write'],
+    lastUsedAt: new Date(2026, 4, 21),
+    expiresAt: new Date(2026, 11, 31),
+    status: 'active',
+    createdAt: new Date(2026, 0, 15),
+  },
+  {
+    id: 'k2',
+    name: 'Mobile App',
+    prefix: 'wks_live_c3d4',
+    scopes: ['read'],
+    status: 'rotating',
+    createdAt: new Date(2025, 9, 1),
+  },
+]
+
+const meta: Meta<typeof WakaApiKeysManager> = {
+  title: 'Blocks/Identity/ApiKeysManager',
+  component: WakaApiKeysManager,
+}
+export default meta
+
+type Story = StoryObj<typeof WakaApiKeysManager>
+
+const handlers = {
+  onCreate: async (p: { name: string; scopes: string[]; expiresAt?: Date }) => {
+    console.log('create', p)
+    return { token: 'wks_live_' + Math.random().toString(36).slice(2) }
+  },
+  onRevoke: async (id: string) => { console.log('revoke', id) },
+  onRotate: async (id: string, g: number) => {
+    console.log('rotate', id, g)
+    return { newToken: 'wks_live_' + Math.random().toString(36).slice(2) }
+  },
+} as const
+
+export const Default: Story = {
+  args: { keys, scopes, ...handlers },
+}
+
+export const Empty: Story = {
+  args: { keys: [], scopes, ...handlers },
+}
+
+export const Loading: Story = {
+  args: { keys: [], scopes, isLoading: true, ...handlers },
+}

package/src/blocks/api-keys-manager/WakaApiKeysManager.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Blocks/Identity/ApiKeysManager/Docs" />
+
+# WakaApiKeysManager
+
+Gestion des clés API d'un tenant : liste, création, rotation avec période de grâce, révocation. Le bloc est 100% présentationnel — la génération du token a lieu côté backend (le bloc reçoit le token via la Promise des callbacks).
+
+## Sécurité
+
+- Le token complet est affiché **une seule fois** dans un dialog one-time
+- Le token est effacé du state React à la fermeture du dialog (cleanup `useEffect`)
+- Le token n'est jamais persisté côté client (pas de `localStorage`, pas de `sessionStorage`)
+- Aucun `console.log` du token
+
+## Usage
+
+```tsx
+<WakaApiKeysManager
+  keys={apiKeys}
+  scopes={[{ id: 'read', label: 'Lecture' }, { id: 'write', label: 'Écriture' }]}
+  onCreate={async ({ name, scopes, expiresAt }) => {
+    const { token } = await api.createKey({ name, scopes, expiresAt })
+    return { token }
+  }}
+  onRotate={async (keyId, graceDays) => {
+    const { newToken } = await api.rotateKey(keyId, graceDays)
+    return { newToken }
+  }}
+  onRevoke={async (keyId) => api.revokeKey(keyId)}
+/>
+```