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

package/dist/pages/createScreenPage.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { DeviceType } from '../components/DeviceFrame';
+export interface ScreenConfig {
+    /** Tab label */
+    label: string;
+    /** Id used in the URL (`?screen=…`) — defaults to the slugified label */
+    id?: string;
+    /** What the screen shows and when it appears */
+    description?: ReactNode;
+    /** Library components used — linked to their docs page when one has this label */
+    components?: string[];
+    /** Implementation notes */
+    notes?: ReactNode;
+    /** Address shown in the browser bar — overrides the page's `url` */
+    url?: string;
+    /** The screen itself, rendered inside the device and the library's theme */
+    component: ComponentType;
+}
+export interface ScreenPageConfig {
+    title: string;
+    description?: ReactNode;
+    /** 'phone' for the mobile library, 'browser' for the web library (default 'phone') */
+    device?: DeviceType;
+    /** Screen size in px — phone 390 × 760, browser 1024 × 640 by default */
+    width?: number;
+    height?: number;
+    /** Address shown in the browser bar */
+    url?: string;
+    screens: ScreenConfig[];
+}
+/** Generates a page showing a flow of full screens, one tab per screen */
+export declare function createScreenPage(config: ScreenPageConfig): () => import("react").JSX.Element;
+//# sourceMappingURL=createScreenPage.d.ts.map

package/dist/pages/createScreenPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createScreenPage.d.ts","sourceRoot":"","sources":["../../src/pages/createScreenPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAKpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,WAAW,YAAY;IAC3B,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,gDAAgD;IAChD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,SAAS,EAAE,aAAa,CAAA;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAoFD,0EAA0E;AAC1E,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,qCA8HxD"}

package/dist/pages/createScreenPage.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Factory for full-screen pages: a flow of screens (login, dashboard…) shown in a device frame */
+import { useRef } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { useDocsConfig } from '../app/config';
+import { useColorMode } from '../app/ColorModeContext';
+import { DeviceFrame } from '../components/DeviceFrame';
+import { pageStyles, slugify } from '../styles/pageStyles';
+const DEFAULT_HEIGHT = { phone: 760, browser: 640 };
+const S = {
+    ...pageStyles,
+    tabs: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 6,
+        padding: 4,
+        marginBottom: 32,
+        borderRadius: 10,
+        border: '1px solid var(--docs-border)',
+        backgroundColor: 'var(--docs-surface)',
+        width: 'fit-content',
+        maxWidth: '100%',
+    },
+    tab: (active) => ({
+        fontSize: 13,
+        fontWeight: active ? 600 : 500,
+        fontFamily: 'inherit',
+        padding: '6px 14px',
+        borderRadius: 7,
+        border: 'none',
+        cursor: 'pointer',
+        color: active ? 'var(--docs-text-primary)' : 'var(--docs-text-muted)',
+        backgroundColor: active ? 'var(--docs-bg)' : 'transparent',
+        boxShadow: active ? 'var(--docs-shadow-sm)' : 'none',
+    }),
+    body: (device) => ({
+        display: 'flex',
+        // Phones sit next to their description; wide browser windows go above it
+        flexDirection: device === 'phone' ? 'row' : 'column',
+        flexWrap: 'wrap',
+        alignItems: 'flex-start',
+        gap: 40,
+    }),
+    panel: {
+        flex: '1 1 280px',
+        minWidth: 0,
+        maxWidth: 520,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+    },
+    step: { fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--docs-text-muted)' },
+    screenTitle: { fontSize: 20, fontWeight: 600, lineHeight: 1.4, color: 'var(--docs-text-primary)' },
+    text: { fontSize: 15, lineHeight: 1.65, color: 'var(--docs-text-secondary)' },
+    box: {
+        fontSize: 14,
+        lineHeight: 1.6,
+        color: 'var(--docs-text-secondary)',
+        padding: '12px 16px',
+        borderRadius: 8,
+        border: '1px solid var(--docs-border)',
+        backgroundColor: 'var(--docs-surface)',
+    },
+    boxTitle: { display: 'block', fontWeight: 600, color: 'var(--docs-text-primary)', marginBottom: 8 },
+    chips: { display: 'flex', flexWrap: 'wrap', gap: 6 },
+    chip: {
+        fontFamily: 'ui-monospace, Consolas, monospace',
+        fontSize: 12,
+        padding: '2px 8px',
+        borderRadius: 999,
+        border: '1px solid var(--docs-border)',
+        backgroundColor: 'var(--docs-bg)',
+        color: 'var(--docs-text-primary)',
+        textDecoration: 'none',
+    },
+    nav: { display: 'flex', justifyContent: 'space-between', gap: 8 },
+    navBtn: (disabled) => ({
+        fontSize: 13,
+        fontWeight: 500,
+        fontFamily: 'inherit',
+        padding: '6px 12px',
+        borderRadius: 7,
+        border: '1px solid var(--docs-border)',
+        backgroundColor: 'var(--docs-bg)',
+        color: disabled ? 'var(--docs-text-disabled)' : 'var(--docs-text-primary)',
+        cursor: disabled ? 'default' : 'pointer',
+    }),
+};
+/** Generates a page showing a flow of full screens, one tab per screen */
+export function createScreenPage(config) {
+    const device = config.device ?? 'phone';
+    const screens = config.screens.map((screen) => ({ ...screen, id: screen.id ?? slugify(screen.label) }));
+    return function ScreenPage() {
+        const [params, setParams] = useSearchParams();
+        const { wrapper: Wrapper, pages } = useDocsConfig();
+        const { mode } = useColorMode();
+        const tabRefs = useRef([]);
+        // The active screen lives in the URL, so a screen can be linked to directly
+        const index = Math.max(0, screens.findIndex((s) => s.id === params.get('screen')));
+        const screen = screens[index];
+        const Screen = screen.component;
+        const select = (i) => setParams((prev) => {
+            const next = new URLSearchParams(prev);
+            next.set('screen', screens[i].id);
+            return next;
+        }, { replace: true });
+        // Arrow keys move between tabs, as expected from a tablist
+        function onTabKeyDown(e) {
+            const delta = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
+            if (!delta)
+                return;
+            const next = (index + delta + screens.length) % screens.length;
+            select(next);
+            tabRefs.current[next]?.focus();
+        }
+        const pageFor = (name) => pages.find((p) => p.label === name);
+        return (_jsxs("div", { children: [_jsx("h1", { style: S.title, children: config.title }), config.description && _jsx("p", { style: S.description, children: config.description }), _jsx("div", { role: "tablist", "aria-label": "\u00C9crans", style: S.tabs, onKeyDown: onTabKeyDown, children: screens.map((s, i) => (_jsx("button", { ref: (el) => {
+                            tabRefs.current[i] = el;
+                        }, type: "button", role: "tab", id: `screen-tab-${s.id}`, "aria-selected": i === index, "aria-controls": "screen-panel", tabIndex: i === index ? 0 : -1, style: S.tab(i === index), onClick: () => select(i), children: s.label }, s.id))) }), _jsxs("div", { id: "screen-panel", role: "tabpanel", "aria-labelledby": `screen-tab-${screen.id}`, style: S.body(device), children: [_jsx(DeviceFrame, { device: device, width: config.width, height: config.height ?? DEFAULT_HEIGHT[device], url: screen.url ?? config.url, children: _jsx("div", { className: "docs-screen docs-demo", children: _jsx(Wrapper, { mode: mode, children: _jsx(Screen, {}, screen.id) }) }) }), _jsxs("aside", { style: S.panel, children: [_jsxs("span", { style: S.step, children: ["\u00C9cran ", index + 1, " / ", screens.length] }), _jsx("h2", { style: S.screenTitle, children: screen.label }), screen.description && _jsx("div", { style: S.text, children: screen.description }), screen.components && screen.components.length > 0 && (_jsxs("div", { style: S.box, children: [_jsx("strong", { style: S.boxTitle, children: "Composants utilis\u00E9s" }), _jsx("div", { style: S.chips, children: screen.components.map((name) => {
+                                                const page = pageFor(name);
+                                                return page ? (_jsx(Link, { to: page.path, style: S.chip, children: name }, name)) : (_jsx("code", { style: S.chip, children: name }, name));
+                                            }) })] })), screen.notes && _jsx("div", { style: S.box, children: screen.notes }), screens.length > 1 && (_jsxs("div", { style: S.nav, children: [_jsx("button", { type: "button", style: S.navBtn(index === 0), disabled: index === 0, onClick: () => select(index - 1), children: "\u2190 Pr\u00E9c\u00E9dent" }), _jsx("button", { type: "button", style: S.navBtn(index === screens.length - 1), disabled: index === screens.length - 1, onClick: () => select(index + 1), children: "Suivant \u2192" })] }))] })] })] }));
+    };
+}

package/dist/styles/docs.css

@@ -0,0 +1,177 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ===== Light theme (default) ===== */
+:root {
+  --docs-bg:             #ffffff;
+  --docs-bg-rgb:         255, 255, 255;
+  --docs-bg-subtle:      #f9fafb;
+  --docs-surface:        #f4f4f5;
+  --docs-border:         #e4e4e7;
+
+  --docs-text-primary:   #18181b;
+  --docs-text-secondary: #52525b;
+  --docs-text-muted:     #a1a1aa;
+  --docs-text-disabled:  #d4d4d8;
+
+  --docs-accent:         #0072E5;
+  --docs-accent-subtle:  rgba(0, 114, 229, 0.08);
+
+  --docs-shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
+  --docs-shadow-md:      0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
+
+  --docs-badge-name-color:    #dc2626;
+  --docs-badge-name-bg:       #fef2f2;
+  --docs-badge-type-color:    #2563eb;
+  --docs-badge-type-bg:       #eff6ff;
+  --docs-badge-default-color: #16a34a;
+  --docs-badge-default-bg:    #f0fdf4;
+  /* Callouts (guide pages) */
+  --docs-callout-info-bg:       #eff6ff;
+  --docs-callout-info-border:   #bfdbfe;
+  --docs-callout-info-accent:   #2563eb;
+  --docs-callout-tip-bg:        #f0fdf4;
+  --docs-callout-tip-border:    #bbf7d0;
+  --docs-callout-tip-accent:    #16a34a;
+  --docs-callout-warning-bg:    #fffbeb;
+  --docs-callout-warning-border:#fde68a;
+  --docs-callout-warning-accent:#d97706;
+  --docs-callout-danger-bg:     #fef2f2;
+  --docs-callout-danger-border: #fecaca;
+  --docs-callout-danger-accent: #dc2626;
+
+}
+
+/* ===== Dark theme ===== */
+[data-theme="dark"] {
+  --docs-bg:             #09090b;
+  --docs-bg-rgb:         9, 9, 11;
+  --docs-bg-subtle:      #18181b;
+  --docs-surface:        #27272a;
+  --docs-border:         #3f3f46;
+
+  --docs-text-primary:   #fafafa;
+  --docs-text-secondary: #a1a1aa;
+  --docs-text-muted:     #71717a;
+  --docs-text-disabled:  #52525b;
+
+  --docs-accent:         #60a5fa;
+  --docs-accent-subtle:  rgba(96, 165, 250, 0.1);
+
+  --docs-shadow-sm:      0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
+  --docs-shadow-md:      0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
+
+  --docs-badge-name-color:    #fca5a5;
+  --docs-badge-name-bg:       #450a0a;
+  --docs-badge-type-color:    #93c5fd;
+  --docs-badge-type-bg:       #0c1a2e;
+  --docs-badge-default-color: #86efac;
+  --docs-badge-default-bg:    #052e16;
+  --docs-callout-info-bg:       rgba(37, 99, 235, 0.12);
+  --docs-callout-info-border:   rgba(96, 165, 250, 0.35);
+  --docs-callout-info-accent:   #60a5fa;
+  --docs-callout-tip-bg:        rgba(22, 163, 74, 0.12);
+  --docs-callout-tip-border:    rgba(74, 222, 128, 0.3);
+  --docs-callout-tip-accent:    #4ade80;
+  --docs-callout-warning-bg:    rgba(217, 119, 6, 0.12);
+  --docs-callout-warning-border:rgba(251, 191, 36, 0.3);
+  --docs-callout-warning-accent:#fbbf24;
+  --docs-callout-danger-bg:     rgba(220, 38, 38, 0.12);
+  --docs-callout-danger-border: rgba(248, 113, 113, 0.3);
+  --docs-callout-danger-accent: #f87171;
+
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--docs-font-family, 'Urbanist'), -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--docs-bg);
+  color: var(--docs-text-primary);
+  transition: background 0.2s, color 0.2s;
+}
+
+/* A documented library may size html/body globally (e.g. `:root, body { width: 100vw }`),
+   which adds a horizontal scrollbar. Higher specificity wins whatever the load order. */
+html:root,
+html body {
+  width: auto;
+}
+
+#root {
+  display: contents;
+}
+
+/* ===== Guide pages (DocPage) =====
+   Plain p / ul / code / a written in a guide. `:not(.docs-demo *)` leaves live demos untouched:
+   they must render like in an app, with the library's own styles. */
+.docs-prose p:not(.docs-demo *) {
+  margin: 0 0 16px;
+  line-height: 1.7;
+  color: var(--docs-text-secondary);
+}
+
+.docs-prose h3:not(.docs-demo *) {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.4;
+  margin: 28px 0 10px;
+  color: var(--docs-text-primary);
+}
+
+.docs-prose ul:not(.docs-demo *),
+.docs-prose ol:not(.docs-demo *) {
+  margin: 0 0 16px;
+  padding-left: 22px;
+  line-height: 1.7;
+  color: var(--docs-text-secondary);
+}
+
+.docs-prose ul:not(.docs-demo *) { list-style: disc; }
+.docs-prose ol:not(.docs-demo *) { list-style: decimal; }
+.docs-prose li:not(.docs-demo *) { margin-bottom: 4px; }
+
+.docs-prose a:not(.docs-demo *) {
+  color: var(--docs-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.docs-prose strong:not(.docs-demo *) {
+  font-weight: 600;
+  color: var(--docs-text-primary);
+}
+
+.docs-prose :not(pre) > code:not(.docs-demo *) {
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 0.88em;
+  padding: 1px 5px;
+  border: 1px solid var(--docs-border);
+  border-radius: 4px;
+  background: var(--docs-surface);
+  color: var(--docs-text-primary);
+}
+
+/* Callout text sits on a tinted background: primary color, no trailing gap */
+.docs-callout-body p:not(.docs-demo *) { color: inherit; margin-bottom: 8px; }
+.docs-callout-body > :last-child { margin-bottom: 0; }
+
+/* ===== Full screens (createScreenPage) =====
+   The screen fills the device height, also through a wrapper that renders its own element
+   (e.g. a ThemeProvider <div>): a screen root with `flex: 1` stretches to the bottom. */
+.docs-screen,
+.docs-screen > * {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}

package/dist/styles/pageStyles.d.ts

@@ -0,0 +1,45 @@
+export declare const pageStyles: {
+    layout: {
+        display: "flex";
+        gap: number;
+        alignItems: "flex-start";
+    };
+    content: {
+        flex: number;
+        minWidth: number;
+    };
+    title: {
+        fontSize: number;
+        fontWeight: number;
+        lineHeight: number;
+        marginBottom: number;
+        color: "var(--docs-text-primary)";
+        letterSpacing: string;
+    };
+    description: {
+        fontSize: number;
+        color: "var(--docs-text-secondary)";
+        marginBottom: number;
+        lineHeight: number;
+    };
+    sectionHeading: {
+        fontSize: number;
+        fontWeight: number;
+        lineHeight: number;
+        color: "var(--docs-text-primary)";
+        marginBottom: number;
+        marginTop: number;
+        paddingTop: number;
+        borderTop: string;
+        scrollMarginTop: number;
+    };
+    sectionDescription: {
+        fontSize: number;
+        color: "var(--docs-text-secondary)";
+        lineHeight: number;
+        marginBottom: number;
+    };
+};
+/** Anchor id for a heading — accents folded so French titles keep readable ids ('États' → 'etats') */
+export declare function slugify(text: string): string;
+//# sourceMappingURL=pageStyles.d.ts.map

package/dist/styles/pageStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageStyles.d.ts","sourceRoot":"","sources":["../../src/styles/pageStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCkB,CAAA;AAEzC,sGAAsG;AACtG,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQ5C"}

package/dist/styles/pageStyles.js

@@ -0,0 +1,46 @@
+export const pageStyles = {
+    layout: { display: 'flex', gap: 48, alignItems: 'flex-start' },
+    content: { flex: 1, minWidth: 0 },
+    title: {
+        fontSize: 36,
+        fontWeight: 700,
+        // Explicit line-height: a library's global h1–h6 rules must not restyle the docs headings
+        lineHeight: 1.6,
+        marginBottom: 8,
+        color: 'var(--docs-text-primary)',
+        letterSpacing: '-0.02em',
+    },
+    description: {
+        fontSize: 16,
+        color: 'var(--docs-text-secondary)',
+        marginBottom: 40,
+        lineHeight: 1.6,
+    },
+    sectionHeading: {
+        fontSize: 22,
+        fontWeight: 600,
+        lineHeight: 1.6,
+        color: 'var(--docs-text-primary)',
+        marginBottom: 12,
+        marginTop: 40,
+        paddingTop: 24,
+        borderTop: '1px solid var(--docs-border)',
+        scrollMarginTop: 80,
+    },
+    sectionDescription: {
+        fontSize: 15,
+        color: 'var(--docs-text-secondary)',
+        lineHeight: 1.65,
+        marginBottom: 20,
+    },
+};
+/** Anchor id for a heading — accents folded so French titles keep readable ids ('États' → 'etats') */
+export function slugify(text) {
+    return text
+        .normalize('NFD')
+        .replace(/[̀-ͯ]/g, '')
+        .toLowerCase()
+        .trim()
+        .replace(/\s+/g, '-')
+        .replace(/[^a-z0-9-]/g, '');
+}

package/dist/vite/extractProps.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from '../components/PropsTable.js';
+export type { ComponentProps };
+export interface ExtractOptions {
+    /** tsconfig used to type-check the components — defaults to sensible JSX compiler options */
+    tsconfig?: string;
+}
+export declare function createPropsExtractor({ tsconfig }?: ExtractOptions): (files: string[]) => ComponentProps;
+//# sourceMappingURL=extractProps.d.ts.map

package/dist/vite/extractProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractProps.d.ts","sourceRoot":"","sources":["../../src/vite/extractProps.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAW,MAAM,6BAA6B,CAAA;AAE1E,YAAY,EAAE,cAAc,EAAE,CAAA;AAE9B,MAAM,WAAW,cAAc;IAC7B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AA0ED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAE,cAAmB,IAI5D,OAAO,MAAM,EAAE,KAAG,cAAc,CACzC"}

package/dist/vite/extractProps.js

@@ -0,0 +1,79 @@
+/** Reads component props from TypeScript sources (interfaces, JSDoc, defaults) — Node only */
+import ts from 'typescript';
+import { withCompilerOptions, withCustomConfig } from 'react-docgen-typescript';
+const PARSER_OPTIONS = {
+    // Unions of literals are expanded to their values instead of a type alias name
+    shouldExtractLiteralValuesFromEnum: true,
+    shouldRemoveUndefinedFromOptional: true,
+    savePropValueAsString: true,
+    // Inherited DOM / React props (ButtonHTMLAttributes, ViewProps…) would bury the component's own API
+    propFilter: (prop) => !prop.parent?.fileName.includes('node_modules'),
+};
+// Single quotes, as in the libraries' code style: "primary" → 'primary'
+const singleQuote = (literal) => literal.replace(/^"(.*)"$/, "'$1'");
+/** Removes outer parentheses added around optional function types: `(() => void)` → `() => void` */
+function unwrapParens(type) {
+    if (!type.startsWith('(') || !type.endsWith(')'))
+        return type;
+    let depth = 0;
+    for (let i = 0; i < type.length; i++) {
+        if (type[i] === '(')
+            depth++;
+        else if (type[i] === ')')
+            depth--;
+        // The first parenthesis closes before the end: they do not wrap the whole type
+        if (depth === 0 && i < type.length - 1)
+            return type;
+    }
+    return type.slice(1, -1);
+}
+function formatType(prop) {
+    const { type } = prop;
+    if (type.name === 'enum') {
+        const values = (type.value ?? []);
+        if (values.length)
+            return values.map((v) => singleQuote(v.value)).join(' | ');
+        return type.raw ?? type.name;
+    }
+    return unwrapParens(type.name)
+        // ReactElement<unknown, string | JSXElementConstructor<any>> → ReactElement
+        .replace(/ReactElement<[^<>]*(<[^<>]*>[^<>]*)*>/g, 'ReactElement');
+}
+function formatDefault(value, type) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    const text = String(value);
+    // String defaults come without quotes: put them back when the prop holds strings
+    const isStringProp = type === 'string' || type.includes("'");
+    const isLiteral = /^(true|false|null|undefined|-?\d+(\.\d+)?|['"`].*)$/.test(text);
+    return isStringProp && !isLiteral ? `'${text}'` : text;
+}
+// JSDoc written as `/** text **/` leaves a trailing asterisk
+const cleanDescription = (text) => text.replace(/\s*\*+\s*$/, '').trim();
+function toPropDef(prop) {
+    const type = formatType(prop);
+    const def = formatDefault(prop.defaultValue?.value, type);
+    return {
+        name: prop.name,
+        type,
+        required: prop.required,
+        ...(def !== undefined ? { default: def } : {}),
+        description: cleanDescription(prop.description),
+    };
+}
+// docgen also reports exported helpers and constants (getBearingSector, MARKER_HEIGHT): keep PascalCase only
+const isComponentName = (name) => /^[A-Z]/.test(name) && !/^[A-Z0-9_]+$/.test(name);
+function toComponentProps(docs) {
+    const result = {};
+    for (const doc of docs) {
+        if (isComponentName(doc.displayName))
+            result[doc.displayName] = Object.values(doc.props).map(toPropDef);
+    }
+    return result;
+}
+export function createPropsExtractor({ tsconfig } = {}) {
+    const parser = tsconfig
+        ? withCustomConfig(tsconfig, PARSER_OPTIONS)
+        : withCompilerOptions({ jsx: ts.JsxEmit.ReactJSX, esModuleInterop: true, skipLibCheck: true }, PARSER_OPTIONS);
+    return (files) => (files.length ? toComponentProps(parser.parse(files)) : {});
+}

package/dist/vite/index.d.ts

@@ -0,0 +1,18 @@
+import type { Plugin } from 'vite';
+export type { ComponentProps } from './extractProps.js';
+export interface DocgenOptions {
+    /** Component source files, relative to the Vite root — e.g. ['../src/components/**\/*.tsx'] */
+    include: string[];
+    /** Files to skip — stories and tests are always skipped */
+    exclude?: string[];
+    /** tsconfig used to read the components, relative to the Vite root */
+    tsconfig?: string;
+}
+/** Absolute paths of the files matching `include` minus `exclude` */
+export declare function findComponentFiles(root: string, include: string[], exclude?: string[]): Promise<string[]>;
+/**
+ * Exposes `virtual:traquiste-docs/props`, a `{ [componentName]: PropDef[] }` map to pass to
+ * `defineDocsConfig({ componentProps })`. Pages then use `props: 'auto'`.
+ */
+export declare function docgen(options: DocgenOptions): Plugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/vite/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vite/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAA;AAIlD,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvD,MAAM,WAAW,aAAa;IAC5B,+FAA+F;IAC/F,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAQD,qEAAqE;AACrE,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,GAAE,MAAM,EAAO,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAOnH;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,CAqDrD"}

package/dist/vite/index.js

@@ -0,0 +1,73 @@
+/** Vite plugin: generates component props tables from TypeScript sources — import from '@situaction/traquiste-docs-kit/vite' */
+import path from 'node:path';
+import { glob } from 'tinyglobby';
+import { createPropsExtractor } from './extractProps.js';
+const VIRTUAL_ID = 'virtual:traquiste-docs/props';
+const RESOLVED_ID = '\0' + VIRTUAL_ID;
+// Matched on absolute paths: glob `ignore` patterns are relative to the cwd, and components live
+// outside it (`../src/…`), so they would never apply
+const ALWAYS_EXCLUDED = /(\.(stories|test|spec)\.[^/\\]+$)|([/\\]node_modules[/\\])/;
+/** Absolute paths of the files matching `include` minus `exclude` */
+export async function findComponentFiles(root, include, exclude = []) {
+    const [matched, excluded] = await Promise.all([
+        glob(include, { cwd: root, absolute: true }),
+        exclude.length ? glob(exclude, { cwd: root, absolute: true }) : Promise.resolve([]),
+    ]);
+    const skip = new Set(excluded);
+    return matched.filter((file) => !skip.has(file) && !ALWAYS_EXCLUDED.test(file)).sort();
+}
+/**
+ * Exposes `virtual:traquiste-docs/props`, a `{ [componentName]: PropDef[] }` map to pass to
+ * `defineDocsConfig({ componentProps })`. Pages then use `props: 'auto'`.
+ */
+export function docgen(options) {
+    let root = process.cwd();
+    let files = [];
+    let props = {};
+    let extract;
+    let ready = null;
+    async function scan() {
+        files = await findComponentFiles(root, options.include, options.exclude);
+        props = extract(files);
+    }
+    const isIncluded = (file) => files.includes(path.resolve(file));
+    return {
+        name: 'traquiste-docs:docgen',
+        configResolved(config) {
+            root = config.root;
+            extract = createPropsExtractor({
+                tsconfig: options.tsconfig ? path.resolve(root, options.tsconfig) : undefined,
+            });
+        },
+        resolveId(id) {
+            return id === VIRTUAL_ID ? RESOLVED_ID : null;
+        },
+        async load(id) {
+            if (id !== RESOLVED_ID)
+                return null;
+            // Parsed once, on first import: a TypeScript program over all components takes a few seconds
+            ready ??= scan();
+            await ready;
+            return `export default ${JSON.stringify(props)}`;
+        },
+        configureServer(server) {
+            // Edit a component → re-read it alone; add or remove one → rescan everything
+            const refresh = async (file, rescan) => {
+                if (rescan)
+                    await scan();
+                else if (isIncluded(file))
+                    Object.assign(props, extract([path.resolve(file)]));
+                else
+                    return;
+                const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
+                if (mod) {
+                    server.moduleGraph.invalidateModule(mod);
+                    server.ws.send({ type: 'full-reload' });
+                }
+            };
+            server.watcher.on('change', (file) => void refresh(file, false));
+            server.watcher.on('add', (file) => void refresh(file, true));
+            server.watcher.on('unlink', (file) => void refresh(file, true));
+        },
+    };
+}