{ "name": "StructuredDocEditor", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/StructuredDocEditor.tsx", "chapterTag": "Kit chrome", "chapter": null, "sectionId": null, "elName": null, "demoUrl": null, "hasLiveDemo": false, "description": "", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "StructuredDocEditor", "isPrincipal": true, "isType": false }, { "name": "StructuredDocEditorProps", "isPrincipal": false, "isType": true }, { "name": "StructuredSection", "isPrincipal": false, "isType": true } ], "importStatement": "import { StructuredDocEditor } from \"@magicblocksai/ui\";", "props": [ { "name": "value", "optional": true, "type": "StructuredSection[]", "doc": "Controlled sections." }, { "name": "defaultValue", "optional": true, "type": "StructuredSection[]", "doc": "Uncontrolled initial sections." }, { "name": "onValueChange", "optional": true, "type": "(sections: StructuredSection[]) => void", "doc": "Fires when any section title or body changes." }, { "name": "renderBody", "optional": true, "type": "(args: { section: StructuredSection", "doc": "Optional custom body renderer. Receives the section and a setter for updating the body. Use for RichTextEditor / SnippetTextarea / MarkdownEditor wiring." }, { "name": "onBodyChange", "optional": false, "type": "(body: string) => void; }) => ReactNode", "doc": "" }, { "name": "showToc", "optional": true, "type": "boolean", "doc": "Show the table of contents rail. Default `false`." }, { "name": "tocPosition", "optional": true, "type": "\"left\" | \"right\"", "doc": "TOC rail position. Default `\"left\"`." }, { "name": "tocTitle", "optional": true, "type": "ReactNode", "doc": "TOC title. Default `\"On this page\"`." }, { "name": "allowAdd", "optional": true, "type": "boolean", "doc": "Show the `+ Add section` button at the bottom. Default `false`." }, { "name": "allowRemove", "optional": true, "type": "boolean", "doc": "Allow removing sections. Default `false`." }, { "name": "addLabel", "optional": true, "type": "ReactNode", "doc": "Add-button label. Default `\"+ Add section\"`." }, { "name": "onAdd", "optional": true, "type": "() => StructuredSection", "doc": "Fires when the user adds a section. Receives the new section to insert." }, { "name": "bodyPlaceholder", "optional": true, "type": "string", "doc": "Body textarea placeholder." }, { "name": "renderSectionActions", "optional": true, "type": "(section: StructuredSection) => ReactNode", "doc": "Render per-section actions slot (top-right). Useful for 3-dot menus." }, { "name": "header", "optional": true, "type": "ReactNode", "doc": "Header content rendered above the first section." }, { "name": "disabled", "optional": true, "type": "boolean", "doc": "Disable interaction." } ], "classesUsed": [ "structured-doc", "structured-doc-add", "structured-doc-body", "structured-doc-header", "structured-doc-section", "structured-doc-section-actions", "structured-doc-section-body", "structured-doc-section-caption", "structured-doc-section-head", "structured-doc-section-icon", "structured-doc-section-kind", "structured-doc-section-num", "structured-doc-section-remove", "structured-doc-section-textarea", "structured-doc-section-title-block", "structured-doc-section-title-input", "structured-doc-section-title-row", "structured-doc-toc", "structured-doc-toc-label", "structured-doc-toc-link", "structured-doc-toc-list", "structured-doc-toc-num", "structured-doc-toc-title", "title" ], "examples": { "react": null, "html": null, "css": ".structured-doc {\n display: block;\n}\n\n.structured-doc-add {\n align-self: flex-start;\n appearance: none;\n background: transparent;\n border: 1px dashed var(--hair);\n border-radius: var(--r-md);\n padding: 8px 14px;\n font: 500 13px/1 var(--f-body);\n color: var(--accent);\n cursor: pointer;\n transition: background var(--dur-2) var(--ease),\n border-color var(--dur-2) var(--ease);\n}\n\n.structured-doc-body {\n display: flex;\n flex-direction: column;\n gap: var(--s-5);\n}\n\n.structured-doc-header { padding: 0 0 var(--s-2); }\n\n.structured-doc-section {\n display: flex;\n flex-direction: column;\n gap: var(--s-3);\n padding: var(--s-4) 0 var(--s-5);\n border-bottom: 1px solid var(--hair-soft);\n}\n\n.structured-doc-section-actions {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.structured-doc-section-body {\n padding-left: 52px; /* aligns body with title baseline (after 40px num gutter) */\n}\n\n.structured-doc-section-caption {\n font: 400 12.5px/1.4 var(--f-body);\n color: var(--fg-soft);\n}\n\n.structured-doc-section-head {\n display: grid;\n grid-template-columns: 40px 1fr auto;\n align-items: flex-start;\n gap: var(--s-3);\n}\n\n.structured-doc-section-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--fg-soft);\n width: 20px;\n height: 20px;\n}\n\n.structured-doc-section-kind {\n font: 600 10.5px/1 var(--f-mono);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n padding: 4px 8px;\n border-radius: 999px;\n background: var(--bg-warm);\n color: var(--fg-soft);\n}\n\n.structured-doc-section-num {\n font: 600 18px/1 var(--f-mono);\n color: var(--fg-faint);\n font-variant-numeric: tabular-nums;\n padding-top: 4px;\n}\n\n.structured-doc-section-remove {\n appearance: none;\n background: transparent;\n border: 0;\n width: 28px;\n height: 28px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--fg-faint);\n cursor: pointer;\n border-radius: var(--r-xs);\n}\n\n.structured-doc-section-textarea {\n width: 100%;\n appearance: none;\n background: transparent;\n border: 0;\n outline: none;\n padding: 0;\n resize: none;\n min-height: 88px;\n font: 400 14px/1.6 var(--f-body);\n color: var(--fg);\n}\n\n.structured-doc-section-title-block {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.structured-doc-section-title-input {\n appearance: none;\n background: transparent;\n border: 0;\n outline: none;\n padding: 4px 0;\n font: 600 18px/1.3 var(--f-display);\n color: var(--fg);\n flex: 1;\n min-width: 0;\n letter-spacing: -0.005em;\n border-bottom: 2px solid transparent;\n transition: border-color var(--dur-2) var(--ease);\n}\n\n.structured-doc-section-title-row {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.structured-doc-toc {\n position: sticky;\n top: var(--s-4);\n padding: var(--s-3);\n border: 1px solid var(--hair-soft);\n border-radius: var(--r-md);\n background: var(--bg-paper);\n}\n\n.structured-doc-toc-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.structured-doc-toc-link {\n appearance: none;\n background: transparent;\n border: 0;\n text-align: left;\n display: grid;\n grid-template-columns: 24px 1fr;\n gap: 4px;\n width: 100%;\n padding: 5px 8px;\n border-radius: var(--r-xs);\n font: 400 12.5px/1.4 var(--f-body);\n color: var(--fg-soft);\n cursor: pointer;\n transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);\n}\n\n.structured-doc-toc-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.structured-doc-toc-num {\n font: 500 11px/1.4 var(--f-mono);\n color: var(--fg-faint);\n font-variant-numeric: tabular-nums;\n}\n\n.structured-doc-toc-title {\n font: 600 10.5px/1 var(--f-mono);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--fg-faint);\n padding: 0 4px 8px;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }" } }