@situaction/traquiste-docs-kit 0.0.0-stage → 1.0.0

package/dist/components/CodeBlock.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Static code block with a copy button — no syntax highlighting */
+import { useCopy } from '../hooks/useCopy';
+const S = {
+    wrapper: {
+        backgroundColor: '#0d1117',
+        border: '1px solid var(--docs-border)',
+        borderRadius: 8,
+        margin: '0 0 20px',
+        overflow: 'hidden',
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+        padding: '6px 10px 6px 16px',
+        borderBottom: '1px solid #21262d',
+    },
+    label: {
+        fontFamily: 'ui-monospace, Consolas, monospace',
+        fontSize: 11,
+        color: '#8b949e',
+        letterSpacing: '0.02em',
+    },
+    button: (copied) => ({
+        fontSize: 11,
+        fontWeight: 500,
+        padding: '3px 8px',
+        border: `1px solid ${copied ? '#238636' : '#30363d'}`,
+        borderRadius: 5,
+        cursor: 'pointer',
+        backgroundColor: copied ? '#0d1117' : '#21262d',
+        color: copied ? '#3fb950' : '#8b949e',
+        fontFamily: 'inherit',
+        whiteSpace: 'nowrap',
+    }),
+    pre: {
+        margin: 0,
+        padding: '14px 16px',
+        overflowX: 'auto',
+        fontFamily: 'ui-monospace, Consolas, monospace',
+        fontSize: 13,
+        lineHeight: 1.6,
+        color: '#e6edf3',
+    },
+};
+/** Removes surrounding blank lines and the indentation shared by all lines (template literals in JSX) */
+export function dedent(code) {
+    const lines = code.replace(/^\s*\n/, '').replace(/\n\s*$/, '').split('\n');
+    const indents = lines.filter((l) => l.trim()).map((l) => l.match(/^\s*/)[0].length);
+    const min = indents.length ? Math.min(...indents) : 0;
+    return lines.map((l) => l.slice(min)).join('\n');
+}
+export function CodeBlock({ children, language, title }) {
+    const { copied, copy } = useCopy();
+    const code = dedent(children);
+    const label = title ?? language;
+    return (_jsxs("div", { style: S.wrapper, children: [_jsxs("div", { style: { ...S.header, justifyContent: label ? 'space-between' : 'flex-end' }, children: [label && _jsx("span", { style: S.label, children: label }), _jsx("button", { type: "button", style: S.button(copied), onClick: () => copy(code), "aria-label": "Copier le code", children: copied ? '✓ Copié' : 'Copier' })] }), _jsx("pre", { style: S.pre, children: _jsx("code", { children: code }) })] }));
+}

package/dist/components/DeviceFrame.d.ts

@@ -0,0 +1,17 @@
+/** Device mock-ups around demos and full screens: a phone (mobile library) or a browser window (web library) */
+import type { ReactNode } from 'react';
+export type DeviceType = 'phone' | 'browser';
+export interface DeviceFrameProps {
+    /** Mock-up to draw (default 'phone') */
+    device?: DeviceType;
+    /** Screen width in px — phone 390, browser 1024 by default; never wider than the page */
+    width?: number;
+    /** Screen height in px — omit to fit the content (demos); set it for full screens, which then scroll inside */
+    height?: number;
+    /** Address shown in the browser bar */
+    url?: string;
+    children: ReactNode;
+}
+/** Phone or browser mock-up — follows the docs' light / dark mode */
+export declare function DeviceFrame({ device, ...props }: DeviceFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=DeviceFrame.d.ts.map

package/dist/components/DeviceFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceFrame.d.ts","sourceRoot":"","sources":["../../src/components/DeviceFrame.tsx"],"names":[],"mappings":"AAAA,gHAAgH;AAChH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,CAAA;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+GAA+G;IAC/G,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,CAAA;CACpB;AAsHD,qEAAqE;AACrE,wBAAgB,WAAW,CAAC,EAAE,MAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAE3E"}

package/dist/components/DeviceFrame.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useColorMode } from '../app/ColorModeContext';
+const PHONE_WIDTH = 390;
+const BROWSER_WIDTH = 1024;
+/** Screen area: fixed height scrolls like a real device, otherwise grows with the content */
+function screenStyle(height, background) {
+    return height
+        ? {
+            height,
+            overflowY: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            backgroundColor: background,
+        }
+        : { position: 'relative', overflow: 'hidden', backgroundColor: background };
+}
+function PhoneFrame({ width, height, children }) {
+    const isDark = useColorMode().mode === 'dark';
+    const chrome = isDark ? '#000' : '#f2f2f2';
+    return (_jsx("div", { "data-device": "phone", style: { position: 'relative', width: width ?? PHONE_WIDTH, maxWidth: '100%' }, children: _jsxs("div", { style: {
+                position: 'relative',
+                borderRadius: 48,
+                border: `8px solid ${isDark ? '#2a2a2a' : '#1a1a1a'}`,
+                boxShadow: isDark
+                    ? '0 24px 64px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05)'
+                    : '0 24px 64px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.1)',
+                backgroundColor: chrome,
+                overflow: 'hidden',
+            }, children: [_jsx("div", { style: { height: 44, backgroundColor: chrome, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("div", { style: { width: 120, height: 34, borderRadius: 20, backgroundColor: '#1a1a1a' } }) }), _jsx("div", { style: screenStyle(height, chrome), children: children }), _jsx("div", { style: { height: 34, backgroundColor: chrome, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("div", { style: {
+                            width: 134,
+                            height: 5,
+                            borderRadius: 3,
+                            backgroundColor: isDark ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)',
+                        } }) })] }) }));
+}
+function BrowserFrame({ width, height, url, children }) {
+    const isDark = useColorMode().mode === 'dark';
+    return (_jsxs("div", { "data-device": "browser", style: {
+            width: width ?? BROWSER_WIDTH,
+            maxWidth: '100%',
+            borderRadius: 10,
+            border: `1px solid ${isDark ? '#3f3f46' : '#d4d4d8'}`,
+            boxShadow: isDark ? '0 24px 64px rgba(0,0,0,0.6)' : '0 24px 64px rgba(0,0,0,0.18)',
+            overflow: 'hidden',
+        }, children: [_jsxs("div", { style: {
+                    height: 40,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '0 14px',
+                    backgroundColor: isDark ? '#1f1f23' : '#e9e9ec',
+                    borderBottom: `1px solid ${isDark ? '#3f3f46' : '#d4d4d8'}`,
+                }, children: [_jsx("div", { style: { display: 'flex', gap: 7 }, "aria-hidden": true, children: ['#ff5f57', '#febc2e', '#28c840'].map((color) => (_jsx("span", { style: { width: 11, height: 11, borderRadius: '50%', backgroundColor: color } }, color))) }), _jsx("div", { style: {
+                            flex: 1,
+                            maxWidth: 480,
+                            margin: '0 auto',
+                            height: 24,
+                            borderRadius: 6,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: 12,
+                            color: isDark ? '#a1a1aa' : '#71717a',
+                            backgroundColor: isDark ? '#2a2a2e' : '#ffffff',
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis',
+                        }, children: url }), _jsx("div", { style: { width: 47 }, "aria-hidden": true })] }), _jsx("div", { style: screenStyle(height, isDark ? '#0f0f10' : '#ffffff'), children: children })] }));
+}
+/** Phone or browser mock-up — follows the docs' light / dark mode */
+export function DeviceFrame({ device = 'phone', ...props }) {
+    return device === 'browser' ? _jsx(BrowserFrame, { ...props }) : _jsx(PhoneFrame, { ...props });
+}

package/dist/components/LiveEditor.d.ts

@@ -0,0 +1,10 @@
+import ReactForScope from 'react';
+interface LiveEditorProps {
+    title: string;
+    initialCode: string;
+    scope: Record<string, unknown>;
+    phoneFrame?: boolean;
+}
+export default function LiveEditor({ title, initialCode, scope, phoneFrame }: LiveEditorProps): ReactForScope.JSX.Element;
+export {};
+//# sourceMappingURL=LiveEditor.d.ts.map

package/dist/components/LiveEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveEditor.d.ts","sourceRoot":"","sources":["../../src/components/LiveEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,MAAM,OAAO,CAAA;AAsBjC,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAsGD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,eAAe,6BA8M5F"}

package/dist/components/LiveEditor.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Demo card: live-editable preview powered by @babel/standalone */
+import { Component, useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react';
+import ReactForScope from 'react';
+import Editor from '@monaco-editor/react';
+import { useDocsConfig } from '../app/config';
+import { DeviceFrame } from './DeviceFrame';
+import { useColorMode } from '../app/ColorModeContext';
+let babelCache = null;
+let babelLoading = null;
+function loadBabel() {
+    if (babelCache)
+        return Promise.resolve(babelCache);
+    if (!babelLoading) {
+        babelLoading = import('@babel/standalone').then((m) => {
+            babelCache = m;
+            return m;
+        });
+    }
+    return babelLoading;
+}
+const S = {
+    card: {
+        border: '1px solid var(--docs-border)',
+        borderRadius: 12,
+        overflow: 'hidden',
+        marginBottom: 20,
+        boxShadow: 'var(--docs-shadow-sm)',
+    },
+    header: {
+        padding: '10px 14px',
+        borderBottom: '1px solid var(--docs-border)',
+        backgroundColor: 'var(--docs-surface)',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 8,
+    },
+    title: {
+        fontSize: 12,
+        fontWeight: 600,
+        color: 'var(--docs-text-muted)',
+        letterSpacing: '0.03em',
+        textTransform: 'uppercase',
+        flex: 1,
+    },
+    actions: { display: 'flex', gap: 6, alignItems: 'center' },
+    btn: {
+        fontSize: 12,
+        fontWeight: 500,
+        padding: '4px 10px',
+        border: '1px solid var(--docs-border)',
+        borderRadius: 6,
+        cursor: 'pointer',
+        backgroundColor: 'var(--docs-bg)',
+        color: 'var(--docs-text-secondary)',
+        fontFamily: 'inherit',
+        whiteSpace: 'nowrap',
+    },
+    btnCopied: {
+        color: 'var(--docs-badge-default-color)',
+        borderColor: 'var(--docs-badge-default-bg)',
+        backgroundColor: 'var(--docs-badge-default-bg)',
+    },
+    loading: { fontSize: 13, color: 'var(--docs-text-disabled)', fontStyle: 'italic' },
+    error: {
+        color: 'var(--docs-badge-name-color)',
+        fontSize: 12,
+        fontFamily: 'ui-monospace, Consolas, monospace',
+        whiteSpace: 'pre-wrap',
+        margin: 0,
+        maxWidth: '100%',
+        overflowX: 'auto',
+        lineHeight: 1.6,
+    },
+};
+/**
+ * Keeps a broken demo inside its own card.
+ *
+ * `evalCode` only catches what throws while the snippet is *evaluated*; anything that throws while
+ * React renders the returned element escapes it, and with no boundary in the tree that unmounts the
+ * whole docs app — a single bad component reads as "the docs crashed" instead of pointing at itself.
+ *
+ * Keyed on the source in `LiveEditor` below, so editing the code clears a previous failure.
+ */
+class DemoBoundary extends Component {
+    state = { message: null };
+    static getDerivedStateFromError(error) {
+        return { message: error instanceof Error ? error.message : String(error) };
+    }
+    componentDidCatch(error, info) {
+        // Kept on the console: the stack is what actually locates the faulty component
+        console.error('[docs] demo render failed', error, info.componentStack);
+    }
+    render() {
+        if (this.state.message !== null) {
+            return _jsx("pre", { style: S.error, children: `Erreur de rendu\n${this.state.message}` });
+        }
+        return this.props.children;
+    }
+}
+/** 6-dot drag indicator (2 cols × 3 rows) */
+function DragDots({ active }) {
+    const color = active ? 'var(--docs-accent)' : 'var(--docs-text-muted)';
+    const dot = { width: 2, height: 2, borderRadius: '50%', backgroundColor: color };
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [0, 1, 2].map((i) => (_jsxs("div", { style: { display: 'flex', gap: 3 }, children: [_jsx("div", { style: dot }), _jsx("div", { style: dot })] }, i))) }));
+}
+export default function LiveEditor({ title, initialCode, scope, phoneFrame }) {
+    const Wrapper = useDocsConfig().wrapper;
+    const [code, setCode] = useState(initialCode);
+    const [showCode, setShowCode] = useState(false);
+    const [preview, setPreview] = useState(null);
+    const [error, setError] = useState(null);
+    const [copied, setCopied] = useState(false);
+    const [previewWidth, setPreviewWidth] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const { mode } = useColorMode();
+    const wrapperRef = useRef(null);
+    const scopeRef = useRef(scope);
+    // Latest scope for the debounced compile, synced before any timer can fire
+    useLayoutEffect(() => {
+        scopeRef.current = scope;
+    }, [scope]);
+    const debounceRef = useRef(undefined);
+    function handleMouseDown(e) {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = wrapperRef.current?.offsetWidth ?? 600;
+        setIsDragging(true);
+        function onMouseMove(ev) {
+            const next = Math.max(280, Math.min(1000, startWidth + (ev.clientX - startX)));
+            setPreviewWidth(next);
+        }
+        function onMouseUp() {
+            setIsDragging(false);
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        }
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }
+    const evalCode = useCallback((src) => {
+        loadBabel()
+            .then((Babel) => {
+            const fullScope = { React: ReactForScope, ...scopeRef.current };
+            const keys = Object.keys(fullScope);
+            const wrapped = `const { ${keys.join(', ')} } = __scope__;\nreturn (${src});`;
+            const result = Babel.transform(wrapped, {
+                presets: ['react'],
+                filename: 'preview.jsx',
+                parserOpts: { allowReturnOutsideFunction: true },
+            });
+            if (!result.code)
+                throw new Error('Transpilation failed');
+            const fn = new Function('__scope__', result.code);
+            setPreview(fn(fullScope));
+            setError(null);
+        })
+            .catch((e) => {
+            setError(e instanceof Error ? e.message : String(e));
+        });
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => { evalCode(initialCode); }, []);
+    function handleChange(value) {
+        const src = value ?? '';
+        setCode(src);
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => evalCode(src), 300);
+    }
+    function handleCopy() {
+        navigator.clipboard.writeText(code).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    }
+    function handleReset() {
+        setCode(initialCode);
+        evalCode(initialCode);
+    }
+    const editorHeight = Math.max(80, code.split('\n').length * 19 + 24);
+    return (_jsxs("div", { style: { ...S.card, userSelect: isDragging ? 'none' : undefined }, children: [_jsxs("div", { style: S.header, children: [_jsx("span", { style: S.title, children: title }), _jsxs("div", { style: S.actions, children: [code !== initialCode && (_jsx("button", { style: S.btn, onClick: handleReset, children: "\u21BA Reset" })), _jsx("button", { style: { ...S.btn, ...(copied ? S.btnCopied : {}) }, onClick: handleCopy, children: copied ? '✓ Copié' : 'Copier' }), _jsx("button", { style: S.btn, onClick: () => setShowCode((v) => !v), children: showCode ? 'Masquer' : '<> Code' })] })] }), _jsxs("div", { style: {
+                    backgroundColor: 'var(--docs-bg-subtle)',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    minHeight: 140,
+                    position: 'relative',
+                    transition: 'background 0.2s',
+                }, children: [_jsxs("div", { ref: wrapperRef, style: {
+                            display: 'flex',
+                            alignItems: 'stretch',
+                            width: previewWidth ? `${previewWidth}px` : '100%',
+                            maxWidth: '100%',
+                        }, children: [_jsx("div", { className: "docs-demo", style: {
+                                    flex: 1,
+                                    padding: phoneFrame ? '32px 24px' : '48px 32px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                }, children: _jsx(Wrapper, { mode: mode, children: error ? (_jsx("pre", { style: S.error, children: error })) : (_jsx(DemoBoundary, { children: phoneFrame ? (_jsx(DeviceFrame, { device: "phone", children: preview ?? _jsx("span", { style: S.loading, children: "Chargement\u2026" }) })) : (preview ?? _jsx("span", { style: S.loading, children: "Chargement\u2026" })) }, `${code}|${mode}`)) }) }), _jsx("div", { onMouseDown: handleMouseDown, onDoubleClick: () => setPreviewWidth(null), title: "Glisser pour redimensionner \u00B7 Double-clic pour r\u00E9initialiser", style: {
+                                    width: 20,
+                                    flexShrink: 0,
+                                    cursor: 'ew-resize',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    borderLeft: '1px solid var(--docs-border)',
+                                    backgroundColor: isDragging ? 'var(--docs-accent-subtle)' : 'transparent',
+                                    transition: 'background 0.15s',
+                                }, children: _jsx(DragDots, { active: isDragging }) })] }), previewWidth && (_jsxs("span", { style: {
+                            position: 'absolute',
+                            bottom: 6,
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                            fontSize: 11,
+                            fontFamily: 'ui-monospace, Consolas, monospace',
+                            color: 'var(--docs-text-muted)',
+                            backgroundColor: 'var(--docs-surface)',
+                            border: '1px solid var(--docs-border)',
+                            borderRadius: 4,
+                            padding: '2px 6px',
+                            pointerEvents: 'none',
+                        }, children: [previewWidth, "px"] }))] }), showCode && (_jsx(Editor, { height: editorHeight, language: "jsx", theme: "vs-dark", value: code, onChange: handleChange, options: {
+                    minimap: { enabled: false },
+                    scrollBeyondLastLine: false,
+                    fontSize: 13,
+                    lineNumbers: 'off',
+                    padding: { top: 14, bottom: 14 },
+                    fontFamily: 'ui-monospace, Consolas, monospace',
+                } }))] }));
+}

package/dist/components/PropsTable.d.ts

@@ -0,0 +1,16 @@
+/** Typed props API table — one row per prop */
+export interface PropDef {
+    name: string;
+    type: string;
+    required: boolean;
+    default?: string;
+    description: string;
+}
+/** Props of every documented component, keyed by component name — produced by the docgen Vite plugin */
+export type ComponentProps = Record<string, PropDef[]>;
+interface PropsTableProps {
+    props: PropDef[];
+}
+export default function PropsTable({ props }: PropsTableProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PropsTable.d.ts.map

package/dist/components/PropsTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropsTable.d.ts","sourceRoot":"","sources":["../../src/components/PropsTable.tsx"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,wGAAwG;AACxG,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAA;AAEtD,UAAU,eAAe;IACvB,KAAK,EAAE,OAAO,EAAE,CAAA;CACjB;AAwDD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,+BAmC5D"}

package/dist/components/PropsTable.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const S = {
+    table: {
+        width: '100%',
+        borderCollapse: 'collapse',
+        fontSize: 14,
+        marginTop: 16,
+    },
+    th: {
+        textAlign: 'left',
+        padding: '10px 12px',
+        backgroundColor: 'var(--docs-surface)',
+        borderBottom: '2px solid var(--docs-border)',
+        fontWeight: 600,
+        color: 'var(--docs-text-primary)',
+        fontSize: 13,
+    },
+    td: {
+        padding: '10px 12px',
+        borderBottom: '1px solid var(--docs-border)',
+        verticalAlign: 'top',
+        color: 'var(--docs-text-secondary)',
+        lineHeight: 1.5,
+    },
+    nameMono: {
+        fontFamily: 'ui-monospace, Consolas, monospace',
+        fontSize: 13,
+        color: 'var(--docs-badge-name-color)',
+        backgroundColor: 'var(--docs-badge-name-bg)',
+        padding: '2px 5px',
+        borderRadius: 3,
+    },
+    typeMono: {
+        fontFamily: 'ui-monospace, Consolas, monospace',
+        fontSize: 13,
+        color: 'var(--docs-badge-type-color)',
+        backgroundColor: 'var(--docs-badge-type-bg)',
+        padding: '2px 5px',
+        borderRadius: 3,
+    },
+    defaultMono: {
+        fontFamily: 'ui-monospace, Consolas, monospace',
+        fontSize: 13,
+        color: 'var(--docs-badge-default-color)',
+        backgroundColor: 'var(--docs-badge-default-bg)',
+        padding: '2px 5px',
+        borderRadius: 3,
+    },
+    required: { color: 'var(--docs-badge-name-color)', fontSize: 12, marginLeft: 4 },
+    empty: { color: 'var(--docs-text-disabled)' },
+    noProps: { color: 'var(--docs-text-secondary)', marginTop: 16 },
+};
+const HEADERS = ['Nom', 'Type', 'Défaut', 'Description'];
+export default function PropsTable({ props }) {
+    if (props.length === 0)
+        return _jsx("p", { style: S.noProps, children: "Ce composant n'a pas de props." });
+    return (_jsxs("table", { style: S.table, children: [_jsx("thead", { children: _jsx("tr", { children: HEADERS.map((h) => (_jsx("th", { style: S.th, children: h }, h))) }) }), _jsx("tbody", { children: props.map((prop, i) => (_jsxs("tr", { style: { backgroundColor: i % 2 === 0 ? 'var(--docs-bg)' : 'var(--docs-bg-subtle)' }, children: [_jsxs("td", { style: S.td, children: [_jsx("code", { style: S.nameMono, children: prop.name }), prop.required && _jsx("span", { style: S.required, children: "*" })] }), _jsx("td", { style: S.td, children: _jsx("code", { style: S.typeMono, children: prop.type }) }), _jsx("td", { style: S.td, children: prop.default
+                                ? _jsx("code", { style: S.defaultMono, children: prop.default })
+                                : _jsx("span", { style: S.empty, children: "\u2014" }) }), _jsx("td", { style: S.td, children: prop.description })] }, prop.name))) })] }));
+}

package/dist/components/layout/ComponentSearch.d.ts

@@ -0,0 +1,2 @@
+export default function ComponentSearch(): import("react").JSX.Element;
+//# sourceMappingURL=ComponentSearch.d.ts.map

package/dist/components/layout/ComponentSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentSearch.d.ts","sourceRoot":"","sources":["../../../src/components/layout/ComponentSearch.tsx"],"names":[],"mappings":"AA6EA,MAAM,CAAC,OAAO,UAAU,eAAe,gCAyItC"}

package/dist/components/layout/ComponentSearch.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Top bar search — filters the docs navigation and jumps to the selected page (⌘K / Ctrl+K) */
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { MagnifyingGlass } from '@phosphor-icons/react';
+import { useNav } from '../../app/config';
+const IS_MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
+const S = {
+    wrapper: { position: 'relative', width: 280 },
+    field: (focused) => ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        height: 34,
+        padding: '0 10px',
+        backgroundColor: 'var(--docs-surface)',
+        border: `1px solid ${focused ? 'var(--docs-accent)' : 'var(--docs-border)'}`,
+        borderRadius: 8,
+        transition: 'border-color 0.15s',
+    }),
+    icon: { color: 'var(--docs-text-muted)', flexShrink: 0 },
+    input: {
+        flex: 1,
+        minWidth: 0,
+        border: 'none',
+        background: 'transparent',
+        outline: 'none',
+        fontFamily: 'inherit',
+        fontSize: 13,
+        color: 'var(--docs-text-primary)',
+    },
+    kbd: {
+        fontFamily: 'inherit',
+        fontSize: 11,
+        color: 'var(--docs-text-muted)',
+        border: '1px solid var(--docs-border)',
+        borderRadius: 4,
+        padding: '0 5px',
+        lineHeight: '18px',
+        flexShrink: 0,
+    },
+    dropdown: {
+        position: 'absolute',
+        top: 'calc(100% + 6px)',
+        left: 0,
+        right: 0,
+        maxHeight: 360,
+        overflowY: 'auto',
+        backgroundColor: 'var(--docs-bg)',
+        border: '1px solid var(--docs-border)',
+        borderRadius: 8,
+        boxShadow: 'var(--docs-shadow-md)',
+        padding: 4,
+        listStyle: 'none',
+    },
+    option: (active) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+        padding: '7px 10px',
+        borderRadius: 6,
+        cursor: 'pointer',
+        fontSize: 13,
+        color: active ? 'var(--docs-accent)' : 'var(--docs-text-primary)',
+        backgroundColor: active ? 'var(--docs-accent-subtle)' : 'transparent',
+    }),
+    optionGroup: { fontSize: 11, color: 'var(--docs-text-muted)' },
+    empty: { padding: '10px', fontSize: 13, color: 'var(--docs-text-muted)' },
+};
+export default function ComponentSearch() {
+    const navigate = useNavigate();
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const listRef = useRef(null);
+    const [query, setQuery] = useState('');
+    const [open, setOpen] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const nav = useNav();
+    const allItems = useMemo(() => nav.flatMap(({ group, items }) => items.map((item) => ({ ...item, group }))), [nav]);
+    const results = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return allItems;
+        // Prefix matches first, then substring matches
+        const matches = allItems.filter((item) => item.label.toLowerCase().includes(q));
+        return matches.sort((a, b) => Number(!a.label.toLowerCase().startsWith(q)) - Number(!b.label.toLowerCase().startsWith(q)));
+    }, [query, allItems]);
+    // Global ⌘K / Ctrl+K shortcut focuses the search
+    useEffect(() => {
+        const onKeyDown = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+                e.preventDefault();
+                inputRef.current?.focus();
+                inputRef.current?.select();
+                setOpen(true);
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, []);
+    // Close the dropdown on outside click
+    useEffect(() => {
+        const onMouseDown = (e) => {
+            if (!wrapperRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', onMouseDown);
+        return () => document.removeEventListener('mousedown', onMouseDown);
+    }, []);
+    // Keep the highlighted option visible while navigating with arrows
+    useEffect(() => {
+        const el = listRef.current?.children[activeIndex];
+        el?.scrollIntoView({ block: 'nearest' });
+    }, [activeIndex]);
+    const select = (item) => {
+        navigate(item.path);
+        setQuery('');
+        setOpen(false);
+        inputRef.current?.blur();
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setOpen(true);
+            setActiveIndex((i) => Math.min(i + 1, results.length - 1));
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveIndex((i) => Math.max(i - 1, 0));
+        }
+        else if (e.key === 'Enter') {
+            const item = results[activeIndex];
+            if (item)
+                select(item);
+        }
+        else if (e.key === 'Escape') {
+            setOpen(false);
+            inputRef.current?.blur();
+        }
+    };
+    return (_jsxs("div", { ref: wrapperRef, style: S.wrapper, children: [_jsxs("div", { style: S.field(focused), onClick: () => inputRef.current?.focus(), children: [_jsx(MagnifyingGlass, { size: 15, style: S.icon }), _jsx("input", { ref: inputRef, type: "text", value: query, placeholder: "Rechercher un composant\u2026", "aria-label": "Rechercher un composant", role: "combobox", "aria-expanded": open, "aria-controls": "component-search-results", "aria-activedescendant": open && results[activeIndex] ? `search-opt-${activeIndex}` : undefined, style: S.input, onChange: (e) => {
+                            setQuery(e.target.value);
+                            setActiveIndex(0);
+                            setOpen(true);
+                        }, onFocus: () => {
+                            setFocused(true);
+                            setOpen(true);
+                        }, onBlur: () => setFocused(false), onKeyDown: onKeyDown }), !focused && _jsx("kbd", { style: S.kbd, children: IS_MAC ? '⌘K' : 'Ctrl K' })] }), open && (_jsx("ul", { id: "component-search-results", role: "listbox", ref: listRef, style: S.dropdown, children: results.length === 0 ? (_jsx("li", { style: S.empty, children: "Aucun r\u00E9sultat" })) : (results.map((item, i) => (_jsxs("li", { id: `search-opt-${i}`, role: "option", "aria-selected": i === activeIndex, style: S.option(i === activeIndex), onMouseEnter: () => setActiveIndex(i), 
+                    // mousedown instead of click so the input blur doesn't swallow the selection
+                    onMouseDown: (e) => {
+                        e.preventDefault();
+                        select(item);
+                    }, children: [_jsx("span", { children: item.label }), _jsx("span", { style: S.optionGroup, children: item.group })] }, item.path)))) }))] }));
+}

package/dist/components/layout/Layout.d.ts

@@ -0,0 +1,8 @@
+/** Doc site shell: fixed sidebar + glassmorphism top bar + main content */
+import type { ReactNode } from 'react';
+interface LayoutProps {
+    children: ReactNode;
+}
+export default function Layout({ children }: LayoutProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Layout.d.ts.map