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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Layout.tsx"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB;AA+GD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,+BAuCvD"}

package/dist/components/layout/Layout.js

@@ -0,0 +1,109 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import Sidebar from './Sidebar';
+import ComponentSearch from './ComponentSearch';
+import { Link } from 'react-router-dom';
+import { useColorMode } from '../../app/ColorModeContext';
+import { useDocsConfig } from '../../app/config';
+const TOP_BAR_HEIGHT = 52;
+const S = {
+    root: { display: 'flex', minHeight: '100vh' },
+    sidebar: {
+        width: 240,
+        flexShrink: 0,
+        backgroundColor: '#0c0f1a',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        overflowY: 'auto',
+        zIndex: 100,
+    },
+    topBar: {
+        position: 'fixed',
+        top: 0,
+        left: 240,
+        right: 0,
+        height: TOP_BAR_HEIGHT,
+        backgroundColor: 'rgba(var(--docs-bg-rgb, 255,255,255), 0.85)',
+        backdropFilter: 'blur(12px)',
+        WebkitBackdropFilter: 'blur(12px)',
+        borderBottom: '1px solid var(--docs-border)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '0 28px',
+        zIndex: 99,
+        gap: 10,
+        transition: 'border-color 0.2s',
+    },
+    actions: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 20,
+    },
+    links: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 16,
+    },
+    link: {
+        fontSize: 13,
+        fontWeight: 500,
+        color: 'var(--docs-text-secondary)',
+        textDecoration: 'none',
+        whiteSpace: 'nowrap',
+    },
+    themeSwitch: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+    },
+    modeLabel: {
+        fontSize: 12,
+        color: 'var(--docs-text-muted)',
+        fontWeight: 500,
+    },
+    segmented: {
+        display: 'flex',
+        backgroundColor: 'var(--docs-surface)',
+        border: '1px solid var(--docs-border)',
+        borderRadius: 8,
+        padding: 2,
+        gap: 2,
+    },
+    segBtn: (active) => ({
+        fontSize: 12,
+        fontWeight: active ? 600 : 400,
+        padding: '4px 12px',
+        border: 'none',
+        borderRadius: 6,
+        cursor: 'pointer',
+        backgroundColor: active ? 'var(--docs-bg)' : 'transparent',
+        color: active ? 'var(--docs-text-primary)' : 'var(--docs-text-muted)',
+        boxShadow: active ? 'var(--docs-shadow-sm)' : 'none',
+        transition: 'all 0.15s',
+    }),
+    main: {
+        marginLeft: 240,
+        flex: 1,
+        // Flex items default to min-width: auto: wide content (browser frame, tables) would push the page sideways
+        minWidth: 0,
+        backgroundColor: 'var(--docs-bg)',
+        minHeight: '100vh',
+        paddingTop: TOP_BAR_HEIGHT,
+        transition: 'background 0.2s',
+    },
+    content: {
+        maxWidth: 1100,
+        padding: '52px 48px',
+    },
+};
+function TopBarLink({ label, href }) {
+    // Absolute URLs leave the docs; paths stay in the single-page app
+    return /^https?:\/\//.test(href) ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", style: S.link, children: [label, " \u2197"] })) : (_jsx(Link, { to: href, style: S.link, children: label }));
+}
+export default function Layout({ children }) {
+    const { mode, setMode } = useColorMode();
+    const { links } = useDocsConfig();
+    return (_jsxs("div", { style: S.root, children: [_jsx("aside", { style: S.sidebar, children: _jsx(Sidebar, {}) }), _jsxs("div", { style: S.topBar, children: [_jsx(ComponentSearch, {}), _jsxs("div", { style: S.actions, children: [links && links.length > 0 && (_jsx("nav", { style: S.links, "aria-label": "Liens", children: links.map((link) => (_jsx(TopBarLink, { ...link }, link.href))) })), _jsxs("div", { style: S.themeSwitch, children: [_jsx("span", { style: S.modeLabel, children: "Th\u00E8me" }), _jsxs("div", { style: S.segmented, children: [_jsx("button", { style: S.segBtn(mode === 'light'), "aria-pressed": mode === 'light', onClick: () => setMode('light'), children: "\u2600 Light" }), _jsx("button", { style: S.segBtn(mode === 'dark'), "aria-pressed": mode === 'dark', onClick: () => setMode('dark'), children: "\uD83C\uDF19 Dark" })] })] })] })] }), _jsx("main", { style: S.main, children: _jsx("div", { style: S.content, children: children }) })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../src/components/layout/NotFound.tsx"],"names":[],"mappings":"AAkCA,MAAM,CAAC,OAAO,UAAU,QAAQ,gCAW/B"}

package/dist/components/layout/NotFound.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Fallback page for unknown routes */
+import { Link } from 'react-router-dom';
+const S = {
+    root: { padding: '48px 0', maxWidth: 560 },
+    code: {
+        fontSize: 13,
+        fontWeight: 600,
+        color: 'var(--docs-text-muted)',
+        letterSpacing: '0.1em',
+        textTransform: 'uppercase',
+    },
+    title: {
+        fontSize: 32,
+        fontWeight: 700,
+        lineHeight: 1.2,
+        margin: '8px 0 12px',
+        color: 'var(--docs-text-primary)',
+        letterSpacing: '-0.02em',
+    },
+    text: { color: 'var(--docs-text-secondary)', marginBottom: 24 },
+    link: {
+        display: 'inline-block',
+        fontSize: 14,
+        fontWeight: 600,
+        color: 'var(--docs-text-primary)',
+        backgroundColor: 'var(--docs-surface)',
+        border: '1px solid var(--docs-border)',
+        borderRadius: 8,
+        padding: '8px 16px',
+        textDecoration: 'none',
+    },
+};
+export default function NotFound() {
+    return (_jsxs("div", { style: S.root, children: [_jsx("span", { style: S.code, children: "Erreur 404" }), _jsx("h1", { style: S.title, children: "Page introuvable" }), _jsx("p", { style: S.text, children: "Cette page n'existe pas ou a \u00E9t\u00E9 d\u00E9plac\u00E9e. Utilise la recherche ou la navigation \u00E0 gauche." }), _jsx(Link, { to: "/", style: S.link, children: "Retour \u00E0 l'accueil" })] }));
+}

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

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

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

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

package/dist/components/layout/Sidebar.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Navigation sidebar — always dark, pill-style active states */
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+import { useDocsConfig, useNav } from '../../app/config';
+const S = {
+    container: {
+        padding: '20px 0 24px',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    brand: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        color: '#fff',
+        fontSize: 15,
+        fontWeight: 700,
+        padding: '0 16px 16px',
+        marginBottom: 8,
+        textDecoration: 'none',
+        letterSpacing: '-0.01em',
+        borderBottom: '1px solid rgba(255,255,255,0.08)',
+    },
+    brandSub: {
+        display: 'block',
+        fontSize: 11,
+        color: 'rgba(255,255,255,0.4)',
+        fontWeight: 400,
+        marginTop: 2,
+    },
+    // Bounded box: wide wordmarks shrink to fit instead of overflowing the sidebar
+    logo: {
+        display: 'block',
+        height: 28,
+        width: 'auto',
+        maxWidth: 96,
+        objectFit: 'contain',
+        objectPosition: 'left center',
+        flexShrink: 0,
+    },
+    brandText: { minWidth: 0, overflowWrap: 'anywhere' },
+    footer: {
+        // Pushed to the bottom of the sidebar, below the navigation
+        marginTop: 'auto',
+        padding: '16px 16px 0',
+        borderTop: '1px solid rgba(255,255,255,0.08)',
+        fontSize: 11,
+        fontWeight: 500,
+        color: 'rgba(255,255,255,0.4)',
+        letterSpacing: '0.02em',
+    },
+    group: { marginTop: 16, paddingBottom: 8 },
+    groupLabel: {
+        display: 'block',
+        color: 'rgba(255,255,255,0.3)',
+        fontSize: 10,
+        fontWeight: 600,
+        letterSpacing: '0.1em',
+        textTransform: 'uppercase',
+        padding: '0 16px 6px',
+    },
+    link: (active, hovered) => ({
+        display: 'block',
+        padding: '6px 12px',
+        margin: '1px 8px',
+        color: active ? '#fff' : hovered ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.55)',
+        textDecoration: 'none',
+        fontSize: 14,
+        fontWeight: active ? 500 : 400,
+        borderRadius: 6,
+        backgroundColor: active
+            ? 'rgba(255,255,255,0.1)'
+            : hovered
+                ? 'rgba(255,255,255,0.05)'
+                : 'transparent',
+        transition: 'background 0.15s, color 0.15s',
+    }),
+};
+export default function Sidebar() {
+    const [hovered, setHovered] = useState(null);
+    const { brand } = useDocsConfig();
+    // Without a logo the name is the only identity: always shown
+    const showName = !brand.logo || brand.showName !== false;
+    const nav = useNav();
+    return (_jsxs("div", { style: S.container, children: [_jsxs(NavLink, { to: "/", style: S.brand, children: [brand.logo && _jsx("img", { src: brand.logo, alt: showName ? '' : brand.name, style: S.logo }), (showName || brand.subtitle) && (_jsxs("span", { style: S.brandText, children: [showName && brand.name, brand.subtitle && _jsx("span", { style: S.brandSub, children: brand.subtitle })] }))] }), nav.map(({ group, items }) => (_jsxs("div", { style: S.group, children: [_jsx("span", { style: S.groupLabel, children: group }), items.map(({ label, path }) => (_jsx(NavLink, { to: path, style: ({ isActive }) => S.link(isActive, hovered === path), onMouseEnter: () => setHovered(path), onMouseLeave: () => setHovered(null), children: label }, path)))] }, group))), brand.version && _jsxs("div", { style: S.footer, children: ["v", brand.version] })] }));
+}

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

@@ -0,0 +1,10 @@
+export interface TocItem {
+    id: string;
+    label: string;
+}
+interface TableOfContentsProps {
+    items: TocItem[];
+}
+export default function TableOfContents({ items }: TableOfContentsProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TableOfContents.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TableOfContents.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,OAAO,EAAE,CAAA;CACjB;AA+BD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,oBAAoB,+BAiCtE"}

package/dist/components/layout/TableOfContents.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Sticky right-side table of contents with active section tracking */
+import { useState, useEffect } from 'react';
+const S = {
+    container: {
+        width: 200,
+        flexShrink: 0,
+        position: 'sticky',
+        top: 80,
+        alignSelf: 'flex-start',
+    },
+    heading: {
+        fontSize: 11,
+        fontWeight: 700,
+        letterSpacing: '0.08em',
+        textTransform: 'uppercase',
+        color: 'var(--docs-text-muted)',
+        marginBottom: 12,
+    },
+    link: (active) => ({
+        display: 'block',
+        fontSize: 13,
+        padding: '4px 0 4px 12px',
+        color: active ? 'var(--docs-accent)' : 'var(--docs-text-muted)',
+        textDecoration: 'none',
+        borderLeft: `2px solid ${active ? 'var(--docs-accent)' : 'var(--docs-border)'}`,
+        marginBottom: 2,
+        fontWeight: active ? 600 : 400,
+        transition: 'color 0.15s, border-color 0.15s',
+    }),
+};
+export default function TableOfContents({ items }) {
+    const [activeId, setActiveId] = useState(items[0]?.id ?? '');
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            const visible = entries.filter((e) => e.isIntersecting);
+            if (visible.length > 0)
+                setActiveId(visible[0].target.id);
+        }, { rootMargin: '-10% 0% -70% 0%', threshold: 0 });
+        items.forEach(({ id }) => {
+            const el = document.getElementById(id);
+            if (el)
+                observer.observe(el);
+        });
+        return () => observer.disconnect();
+    }, [items]);
+    return (_jsxs("nav", { style: S.container, children: [_jsx("p", { style: S.heading, children: "Sur cette page" }), items.map(({ id, label }) => (_jsx("a", { href: `#${id}`, style: S.link(activeId === id), onClick: () => setActiveId(id), children: label }, id)))] }));
+}

package/dist/hooks/useCopy.d.ts

@@ -0,0 +1,5 @@
+export declare function useCopy(feedbackMs?: number): {
+    copied: boolean;
+    copy: (text: string) => void;
+};
+//# sourceMappingURL=useCopy.d.ts.map

package/dist/hooks/useCopy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopy.d.ts","sourceRoot":"","sources":["../../src/hooks/useCopy.ts"],"names":[],"mappings":"AAGA,wBAAgB,OAAO,CAAC,UAAU,SAAO;;iBAO9B,MAAM;EAehB"}

package/dist/hooks/useCopy.js

@@ -0,0 +1,19 @@
+/** Copy to clipboard with a short "copied" feedback state */
+import { useCallback, useEffect, useRef, useState } from 'react';
+export function useCopy(feedbackMs = 2000) {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const copy = useCallback((text) => {
+        // Clipboard is unavailable on insecure origins: fail silently, the text stays selectable
+        navigator.clipboard
+            ?.writeText(text)
+            .then(() => {
+            setCopied(true);
+            clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), feedbackMs);
+        })
+            .catch(() => { });
+    }, [feedbackMs]);
+    return { copied, copy };
+}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+/** Public API of @situaction/traquiste-docs-kit */
+export { createDocsApp, DocsApp } from './app/createDocsApp';
+export { defineDocsConfig, useDocsConfig } from './app/config';
+export type { ColorMode, DocsConfig, DocsLink, DocsPage, DocsWrapper, NavGroup, NavItem } from './app/config';
+export { createComponentPage } from './pages/createComponentPage';
+export type { ComponentPageConfig, ComponentStatus, Demo, PropDef } from './pages/createComponentPage';
+export type { ComponentProps } from './components/PropsTable';
+export { createScreenPage } from './pages/createScreenPage';
+export type { ScreenConfig, ScreenPageConfig } from './pages/createScreenPage';
+export { DeviceFrame } from './components/DeviceFrame';
+export type { DeviceFrameProps, DeviceType } from './components/DeviceFrame';
+export { default as LiveEditor } from './components/LiveEditor';
+export { DocPage, DocSection } from './pages/DocPage';
+export type { DocPageProps, DocSectionProps } from './pages/DocPage';
+export { CodeBlock } from './components/CodeBlock';
+export type { CodeBlockProps } from './components/CodeBlock';
+export { Callout } from './components/Callout';
+export { Link } from 'react-router-dom';
+export type { CalloutProps, CalloutType } from './components/Callout';
+export { useColorMode } from './app/ColorModeContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC9D,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7G,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AACtG,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE5E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AACrD,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACvC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/index.js

@@ -0,0 +1,13 @@
+/** Public API of @situaction/traquiste-docs-kit */
+export { createDocsApp, DocsApp } from './app/createDocsApp';
+export { defineDocsConfig, useDocsConfig } from './app/config';
+export { createComponentPage } from './pages/createComponentPage';
+export { createScreenPage } from './pages/createScreenPage';
+export { DeviceFrame } from './components/DeviceFrame';
+export { default as LiveEditor } from './components/LiveEditor';
+export { DocPage, DocSection } from './pages/DocPage';
+export { CodeBlock } from './components/CodeBlock';
+export { Callout } from './components/Callout';
+// In-site links for guide pages, without a full reload — the docs' own router instance
+export { Link } from 'react-router-dom';
+export { useColorMode } from './app/ColorModeContext';

package/dist/pages/DocPage.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+export interface DocPageProps {
+    /** Page title (H1) */
+    title: string;
+    /** Lead paragraph under the title */
+    description?: ReactNode;
+    /** Page content — use DocSection for headings listed in the table of contents */
+    children: ReactNode;
+}
+export interface DocSectionProps {
+    /** Section heading (H2), also shown in the table of contents */
+    title: string;
+    /** Anchor id — defaults to the slugified title */
+    id?: string;
+    /** Lead paragraph under the heading */
+    description?: ReactNode;
+    children?: ReactNode;
+}
+/** H2 section of a guide page */
+export declare function DocSection({ title, id, description, children }: DocSectionProps): import("react").JSX.Element;
+/** Guide page (Getting started, Theming…) with the same layout as component pages */
+export declare function DocPage({ title, description, children }: DocPageProps): import("react").JSX.Element;
+export declare namespace DocPage {
+    var Section: typeof DocSection;
+}
+//# sourceMappingURL=DocPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocPage.d.ts","sourceRoot":"","sources":["../../src/pages/DocPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,iFAAiF;IACjF,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAKD,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAU/E;AAED,qFAAqF;AACrF,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAsBrE;yBAtBe,OAAO"}

package/dist/pages/DocPage.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Guide page: title, description, sections and an automatic table of contents */
+import { useLayoutEffect, useRef, useState } from 'react';
+import TableOfContents from '../components/layout/TableOfContents';
+import { pageStyles as S, slugify } from '../styles/pageStyles';
+const sameItems = (a, b) => a.length === b.length && a.every((item, i) => item.id === b[i].id && item.label === b[i].label);
+/** H2 section of a guide page */
+export function DocSection({ title, id, description, children }) {
+    return (_jsxs("section", { children: [_jsx("h2", { id: id ?? slugify(title), "data-doc-section": title, style: S.sectionHeading, children: title }), description && _jsx("p", { style: S.sectionDescription, children: description }), children] }));
+}
+/** Guide page (Getting started, Theming…) with the same layout as component pages */
+export function DocPage({ title, description, children }) {
+    const contentRef = useRef(null);
+    const [toc, setToc] = useState([]);
+    // Read the sections from the DOM: they can be nested in fragments or custom components
+    useLayoutEffect(() => {
+        const headings = contentRef.current?.querySelectorAll('h2[data-doc-section]') ?? [];
+        const items = [...headings].map((h) => ({ id: h.id, label: h.dataset.docSection ?? '' }));
+        setToc((prev) => (sameItems(prev, items) ? prev : items));
+    }, [children]);
+    return (_jsxs("div", { style: S.layout, children: [_jsxs("div", { ref: contentRef, className: "docs-prose", style: S.content, children: [_jsx("h1", { style: S.title, children: title }), description && _jsx("p", { style: S.description, children: description }), children] }), toc.length > 0 && _jsx(TableOfContents, { items: toc })] }));
+}
+DocPage.Section = DocSection;

package/dist/pages/createComponentPage.d.ts

@@ -0,0 +1,33 @@
+import type { PropDef } from '../components/PropsTable';
+export type { PropDef };
+export interface Demo {
+    /** Optional H2 section heading rendered above this demo */
+    section?: string;
+    /** Optional description rendered below the section heading */
+    sectionDescription?: string;
+    /** Label shown in the demo card header */
+    title: string;
+    /** JSX expression shown and evaluated live */
+    code: string;
+    /** Wrap preview in a phone frame (for full-width mobile components) */
+    phoneFrame?: boolean;
+}
+/** 'updated': an existing component changed in a recent release */
+export type ComponentStatus = 'stable' | 'beta' | 'new' | 'updated' | 'deprecated';
+export interface ComponentPageConfig {
+    title: string;
+    description: string;
+    /** Maturity status of the component */
+    status?: ComponentStatus;
+    /** Link to the Figma component (opens in a new tab) */
+    figma?: string;
+    /** Components available in the live editor. React is injected automatically. */
+    scope: Record<string, unknown>;
+    demos: Demo[];
+    /** Props table: written by hand, or 'auto' to read it from the component's TypeScript source (docgen plugin) */
+    props: PropDef[] | 'auto';
+    /** Component whose props are shown with `props: 'auto'` — defaults to `title` */
+    propsOf?: string;
+}
+export declare function createComponentPage(config: ComponentPageConfig): () => import("react").JSX.Element;
+//# sourceMappingURL=createComponentPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createComponentPage.d.ts","sourceRoot":"","sources":["../../src/pages/createComponentPage.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAGvD,YAAY,EAAE,OAAO,EAAE,CAAA;AAEvB,MAAM,WAAW,IAAI;IACnB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8DAA8D;IAC9D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAA;IACZ,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,mEAAmE;AACnE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,YAAY,CAAA;AAElF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,uCAAuC;IACvC,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,gHAAgH;IAChH,KAAK,EAAE,OAAO,EAAE,GAAG,MAAM,CAAA;IACzB,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AA6JD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,qCAiE9D"}