{ "name": "PosShell", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/PosShell.tsx", "chapterTag": "26 Embed Extras", "chapter": "26-embed-extras.html", "sectionId": "pos-shell", "elName": "PosShell", "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-shell", "hasLiveDemo": false, "description": "", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "PosShell", "isPrincipal": true, "isType": false }, { "name": "PosShellProps", "isPrincipal": false, "isType": true } ], "importStatement": "import { PosShell } from \"@magicblocksai/ui\";", "props": [ { "name": "progress", "optional": false, "type": "number", "doc": "0–100." }, { "name": "sectionLabel", "optional": true, "type": "ReactNode", "doc": "\"Loan\" / \"Review\" / \"Done\" — the section the current question belongs to." }, { "name": "onSave", "optional": true, "type": "() => void", "doc": "" }, { "name": "children", "optional": true, "type": "ReactNode", "doc": "Transcript content — messages, ask cards." }, { "name": "side", "optional": true, "type": "ReactNode", "doc": "Desktop side column — typically ``." }, { "name": "mobileBar", "optional": true, "type": "ReactNode", "doc": "Fixed bottom bar for mobile — ``." }, { "name": "overlays", "optional": true, "type": "ReactNode", "doc": "Overlays — ``, ``." }, { "name": "embedded", "optional": true, "type": "boolean", "doc": "Render inside a container rather than filling the viewport (chapter demos)." }, { "name": "hideSide", "optional": true, "type": "boolean", "doc": "Hide the side column (mobile). Defaults to the provider's `mobile`." }, { "name": "mark", "optional": true, "type": "ReactNode", "doc": "The operator's own mark for the header tile. Defaults to the kit's bars glyph. ⚠ THIS IS THE OPERATOR'S PAGE, NOT OURS (NG-004). An applicant is applying to *them*; the shell already carries their business name, their colours, their font and their favicon, and the one thing it could not carry was the mark — so a lender whose chat widget shows their logo got our waveform at the top left of the surface their customers actually apply through. Their workaround reached into `.pos-header-mark` from outside, which is a kit internal and a reasonable thing to want to stop doing. The tile is a ~28px square, so pass the SQUARE version of a brand where one exists — a wide lock-up shrinks into it until it is unreadable." } ], "classesUsed": [ "pos", "pos-grid", "pos-header", "pos-header-actions", "pos-header-mark", "pos-header-meta", "pos-header-text", "pos-header-title", "pos-progress", "pos-progress-fill", "pos-progress-label", "pos-save-btn", "pos-secure", "pos-side", "pos-stream", "pos-thread" ], "examples": { "react": null, "html": "
Northgate Mortgage
Apply with Ava · 4 min
Property · 32% complete
Secure application · nothing shared until you submit
What property are we talking about?
", "css": ".pos { height: 100dvh; background: var(--p-page); color: var(--p-fg); font-family: var(--p-font); display: flex; flex-direction: column; overflow: hidden; }\n\n.pos-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--p-side-width, 380px); }\n\n.pos-header { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 14px clamp(16px, 3vw, 28px); background: var(--p-card); border-bottom: 1px solid var(--p-hair-soft); }\n\n.pos-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }\n\n.pos-header-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--p-accent-soft); color: var(--p-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n\n.pos-header-meta { font: 400 10px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--p-dim); margin-top: 2px; }\n\n.pos-header-text { flex: 1; min-width: 0; }\n\n.pos-header-title { font: 600 15px/1.2 var(--p-font-display, var(--f-display)); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.pos-progress { width: 120px; height: 6px; border-radius: var(--r-pill); background: var(--p-hair); overflow: hidden; display: block; }\n\n.pos-progress-fill { display: block; height: 100%; background: var(--p-accent); border-radius: var(--r-pill); transition: width var(--dur-4) var(--ease); }\n\n.pos-progress-label { font: 400 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--p-dim); white-space: nowrap; }\n\n.pos-save-btn { padding: 8px 13px; min-height: 36px; border-radius: var(--r-pill); border: 1px solid var(--p-hair); background: transparent; cursor: pointer; font: 500 12.5px/1.2 var(--p-font); color: var(--p-dim); white-space: nowrap; transition: all var(--dur-2) var(--ease); }\n\n.pos-secure { align-self: center; font: 400 9.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-faint); padding: 3px 11px; border-radius: var(--r-pill); background: var(--p-bubble); }\n\n.pos-side { min-width: 0; border-left: 1px solid var(--p-hair-soft); background: var(--p-card); overflow-y: auto; padding: 22px 20px 28px; }\n\n.pos-stream { min-width: 0; overflow-y: auto; padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 28px) 30px; }\n\n.pos-thread { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }" } }