@thebase/ui 1.1.2 → 1.1.4

package/dist/baseui.pwa.esm.js

@@ -1,7 +1,7 @@
-var u=[{src:"/icons/icon-192.png",sizes:"192x192",type:"image/png",purpose:"any"},{src:"/icons/icon-512.png",sizes:"512x512",type:"image/png",purpose:"any"},{src:"/icons/icon-512.png",sizes:"512x512",type:"image/png",purpose:"maskable"}],f=["/","/manifest.webmanifest","/favicon.svg"];function d(n){let{name:t,shortName:s=t,description:c="",startUrl:r="/",scope:e="/",display:a="standalone",orientation:i="portrait-primary",backgroundColor:o="#ffffff",themeColor:h="#0f172a",lang:l="en",icons:p=u}=n;return{name:t,short_name:s,description:c,start_url:r,scope:e,display:a,orientation:i,background_color:o,theme_color:h,lang:l,icons:p}}function m(n){let{cacheName:t,cdnVersion:s,appFiles:c=[],extraPrecacheUrls:r=[]}=n,e=`https://cdn.jsdelivr.net/npm/@thebase/ui@${s}/dist/`,a=[...f,...c,...r,`${e}baseui.min.css`,`${e}baseui.esm.js`,`${e}baseui.templates.xml`];return`const CACHE_NAME = ${JSON.stringify(t)};
-const BASEUI_CDN = ${JSON.stringify(e)};
+var d=["favicon.ico","favicon-16x16.png","favicon-32x32.png","apple-touch-icon.png","icon-192.png","icon-512.png"],l="/icons/";function m(e){return[{src:`${e}icon-192.png`,sizes:"192x192",type:"image/png",purpose:"any"},{src:`${e}icon-512.png`,sizes:"512x512",type:"image/png",purpose:"any"},{src:`${e}icon-512.png`,sizes:"512x512",type:"image/png",purpose:"maskable"}]}function E(e){let{name:t,shortName:s=t,description:c="",startUrl:r="/",scope:a="/",display:o="standalone",orientation:n="portrait-primary",backgroundColor:i="#ffffff",themeColor:p="#0f172a",lang:h="en",iconsBase:u=l,icons:f=m(u)}=e;return{name:t,short_name:s,description:c,start_url:r,scope:a,display:o,orientation:n,background_color:i,theme_color:p,lang:h,icons:f}}function C(e){let{cacheName:t,cdnVersion:s,iconsBase:c=l,manifestUrl:r="/manifest.webmanifest",appFiles:a=[],extraPrecacheUrls:o=[]}=e,n=`https://cdn.jsdelivr.net/npm/@thebase/ui@${s}/dist/`,i=["/",r,...d.map(p=>`${c}${p}`),...a,...o,`${n}baseui.min.css`,`${n}baseui.esm.js`,`${n}baseui.templates.xml`];return`const CACHE_NAME = ${JSON.stringify(t)};
+const BASEUI_CDN = ${JSON.stringify(n)};
 
-const PRECACHE_URLS = ${JSON.stringify(a,null,2)};
+const PRECACHE_URLS = ${JSON.stringify(i,null,2)};
 
 self.addEventListener("install", (event) => {
   event.waitUntil(
@@ -50,4 +50,4 @@ self.addEventListener("fetch", (event) => {
     })
   );
 });
-`}export{d as buildManifest,m as buildServiceWorker};
+`}export{d as DEFAULT_ICON_FILES,E as buildManifest,C as buildServiceWorker};

package/dist/baseui.registry.json

@@ -124,6 +124,43 @@
       ],
       "templateName": "baseui.Alert"
     },
+    {
+      "name": "apidoc",
+      "type": "owl",
+      "dependencies": [
+        "owl",
+        "marked",
+        "mermaid"
+      ],
+      "attributes": [
+        "b-ui",
+        "b-att-src",
+        "b-att-title",
+        "b-att-server-url",
+        "b-att-theme",
+        "b-att-theme-toggle",
+        "b-att-hash",
+        "b-att-operation",
+        "b-att-try-it",
+        "b-att-authorize",
+        "b-att-languages",
+        "b-att-language",
+        "b-att-asset-base",
+        "b-att-oauth-redirect-uri",
+        "b-att-height",
+        "b-att-templates"
+      ],
+      "events": [
+        "baseui:load",
+        "baseui:error",
+        "baseui:navigate"
+      ],
+      "owlComponents": [
+        "ApiDoc",
+        "ApiDocGroup"
+      ],
+      "templateName": "baseui.ApiDoc"
+    },
     {
       "name": "aspect-ratio",
       "type": "static",
@@ -1660,13 +1697,13 @@
     }
   ],
   "integrity": {
-    "baseui.min.css": "sha384-hYFwlV6T/ONYzawtDGDFUoruqgNwYl9AVvLDHx24IWgKSMXqwACo/nX04I3gnyT9",
+    "baseui.min.css": "sha384-RP2d04etuqh6nmVNHdJFYqK79B7N55jITUg52YrEXI3lyla5kJA4AHa2hUq79v0m",
     "bootstrap.bundle.min.js": "sha384-RMbllTJcplkCRnELNTOc5Kz/3AvFDE/rNlJqWqfgmRWruobClBdfwvl10akQZkR1",
-    "baseui.min.js": "sha384-Qv1lpDLXQ3+gI0MGXGSdeOmq7tX+Hn6/TcsSsnWikLXQhi7BTAIKNWPUeIXP1LxF",
-    "baseui.esm.js": "sha384-IkUDqUsC56aiRgXggGe2XGZM2chM148CB837Gh/mWPtjqUEq5qH9ve5eG5texJPT",
+    "baseui.min.js": "sha384-6WmmDQaq2vveoleqTuVjap7gNc/1I9cKo+GmkXdLpgKwap8gwo8P5Yw80YWT+Cuj",
+    "baseui.esm.js": "sha384-9haHF/FrXo5MXP2GQGK33GkmwAXQAde21ogM5mvCuWyOHwhyEwSw8isxrzgaHrs7",
     "baseui.icons.esm.js": "sha384-hj39VMhzcFvmYnjob2hlioMOAqwAXCURGreF6s9RitXFp/iYi7rUdqtfCI+ICQeS",
-    "baseui.templates.xml": "sha384-XkqmfurKcEF6WuIQHWAbnZfW6oz19n7SDVRDU3g0hc3qOr4kPd/qfNGcTmcDDIgQ",
-    "baseui.block-viewer.esm.js": "sha384-XlIb3jDxt6Q75dbC4rLctTdPU6u0vJFcbxp9Gl6VKOkhjpz3wRBe0E3dWd80425L",
+    "baseui.templates.xml": "sha384-4pEOfbxiBDpMq0vJHvl9+ZFNcnTDhvZGdTZcmCFOELE0vXQrateo0qlO8VeuoKdq",
+    "baseui.block-viewer.esm.js": "sha384-6GNPYUTwsoi1ZsfOWhVWqw4vI328WX6Xb5f7A4HygyT5s+fmJaEbL7ZQmPamoyJz",
     "baseui.analytics.esm.js": "sha384-M6TVmchmceTvpSzgI+DNA6zAn9xmz9a+YEexCLslSo/Ngxyp2kmzs9fm+PxWy+Da",
     "baseui.analytics.min.js": "sha384-B0hBkVDbT7gmDmUMazlN4Nc1KnYGSpL+IcW2hd8840knx73HGImPgGs84MvS3hKE",
     "icons/lucide.json": "sha384-mc5mzpmq9eOgZVa2IcjrL33Ty4nMXE8aoZMfy+lgkC/jMQ4aYnk2S58mFsSGFnW1",

package/dist/baseui.templates.xml

@@ -89,6 +89,456 @@
     <div data-slot="alert-action" t-att-class="'bu-alert-action' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="AlertAction" t-call="baseui.AlertAction"/>
+<t t-name="baseui.ApiDoc">
+    <div t-ref="root" t-att-class="classNames" t-att-style="rootStyle" t-att-data-theme="theme" t-att-data-bs-theme="theme" data-slot="apidoc" t-att-data-status="state.status">
+      <header class="app-header">
+        <div class="header-left">
+          <Button variant="'ghost'" size="'icon'" icon="'menu'" className="'icon-button mobile-only sidebar-toggle'" aria-label="'Toggle sidebar'" attrs="{'aria-expanded': state.sidebarOpen ? 'true' : 'false'}" onClick="() => this.toggleSidebar()"/>
+          <a t-if="state.status === 'ready'" class="brand-link" t-att-href="href('introduction')" t-on-click="(ev) => this.go(ev, 'introduction')"><span class="brand-title" t-esc="title"/></a>
+        </div>
+        <div class="header-right">
+          <Button t-if="state.status === 'ready' and hasSecurity" variant="state.authed ? 'default' : 'outline'" size="'sm'" className="'btn-authorize'" label="state.authed ? 'Authorized' : 'Authorize'" onClick="() => this.openAuth()"/>
+          <Badge t-if="state.status === 'ready' and doc.info.version" variant="'muted'" pill="true" label="'v' + doc.info.version"/>
+          <Button t-if="props.themeToggle" variant="'ghost'" size="'icon'" icon="theme === 'dark' ? 'sun' : 'moon'" aria-label="'Switch to ' + (theme === 'dark' ? 'light' : 'dark') + ' mode'" ariaPressed="theme === 'dark' ? 'true' : 'false'" onClick="() => this.toggleTheme()"/>
+        </div>
+      </header>
+
+      <Dialog open="state.authOpen" onOpenChange="(open) => this.setAuthOpen(open)">
+        <DialogContent className="'auth-dialog-panel'">
+          <DialogHeader>
+            <DialogTitle>Available authorizations</DialogTitle>
+            <DialogDescription>Values are stored locally in your browser and applied to Try It requests.</DialogDescription>
+          </DialogHeader>
+          <section t-if="state.authOpen" class="auth-dialog-body">
+            <t t-call="baseui.ApiDocAuthBody"/>
+          </section>
+          <DialogFooter>
+            <Button variant="'ghost'" label="'Close'" onClick="() => this.closeAuth()"/>
+            <Button label="'Authorize'" onClick="() => this.saveAuth()"/>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <div class="app-shell">
+        <aside t-if="state.status === 'ready'" class="sidebar-shell" t-att-aria-hidden="state.sidebarOpen ? 'false' : 'true'">
+          <nav class="sidebar-nav" aria-label="API navigation">
+            <ul class="sidebar-root">
+              <li>
+                <a t-att-href="href('introduction')" t-att-class="'sidebar-intro-link' + (state.current === 'introduction' ? ' is-active' : '')" t-on-click="(ev) => this.go(ev, 'introduction')"><span>Introduction</span></a>
+              </li>
+              <t t-foreach="sidebarGroups" t-as="group" t-key="group.id">
+                <ApiDocGroup group="group" groups="doc.groups" current="state.current" href="(id) => this.href(id)" onSelect="(ev, id) => this.go(ev, id)"/>
+              </t>
+            </ul>
+          </nav>
+        </aside>
+
+        <main class="workspace">
+          <section t-ref="main" class="doc-main">
+            <div t-if="state.status === 'loading'" class="empty-state" role="status">Loading API documentation…</div>
+            <div t-elif="state.status === 'error'" class="empty-state" role="alert">Failed to load API spec: <t t-esc="state.error"/></div>
+            <t t-elif="op" t-call="baseui.ApiDocOperation"/>
+            <t t-else="" t-call="baseui.ApiDocIntro"/>
+          </section>
+          <aside t-if="state.status === 'ready' and showTryIt" class="tryit-panel">
+            <t t-call="baseui.ApiDocTryIt"/>
+          </aside>
+        </main>
+      </div>
+    </div>
+  </t>
+  <t t-name="ApiDoc" t-call="baseui.ApiDoc"/>
+
+  <t t-name="baseui.ApiDocGroup">
+    <li class="sidebar-group-wrap">
+      <details class="sidebar-group" open="open">
+        <summary>
+          <span class="sidebar-group-label"><t t-esc="props.group.name"/><span t-if="props.group.kind" class="apidoc-muted"> (<t t-esc="props.group.kind"/>)</span></span>
+          <span class="sidebar-group-arrow"><Icon name="'chevron-right'"/></span>
+        </summary>
+        <ul class="sidebar-group-items">
+          <li t-foreach="props.group.items" t-as="item" t-key="item.id">
+            <a t-att-href="props.href(item.id)" t-att-class="'sidebar-op-link' + (props.current === item.id ? ' is-active' : '')" t-on-click="(ev) => props.onSelect(ev, item.id)">
+              <span class="method-badge" t-att-data-method="item.method" t-esc="methodLabel(item.method)"/>
+              <span t-esc="item.summary"/>
+            </a>
+          </li>
+          <t t-foreach="children" t-as="child" t-key="child.id">
+            <ApiDocGroup group="child" groups="props.groups" current="props.current" href="props.href" onSelect="props.onSelect"/>
+          </t>
+        </ul>
+      </details>
+    </li>
+  </t>
+
+  <t t-name="baseui.ApiDocBreadcrumb">
+    <Breadcrumb>
+      <BreadcrumbList>
+        <t t-foreach="breadcrumb" t-as="part" t-key="part_index">
+          <BreadcrumbItem>
+            <BreadcrumbPage t-if="part_last"><t t-esc="part.label"/></BreadcrumbPage>
+            <BreadcrumbLink t-else="" href="href(part.id)" onClick="(ev) => this.go(ev, part.id)">
+              <Icon t-if="part.home" name="'house'"/>
+              <t t-else="" t-esc="part.label"/>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator t-if="!part_last"/>
+        </t>
+      </BreadcrumbList>
+    </Breadcrumb>
+  </t>
+
+  <t t-name="baseui.ApiDocIntro">
+    <div class="doc-pane">
+      <t t-call="baseui.ApiDocBreadcrumb"/>
+      <h1 t-esc="title"/>
+      <Badge t-if="doc.info.version" variant="'muted'" label="'v' + doc.info.version"/>
+      <p t-if="doc.info.summary" class="param-desc" t-esc="doc.info.summary"/>
+      <div t-if="doc.info.description" class="prose"><Markdown t-key="theme" content="doc.info.description" baseUi="false"/></div>
+      <div class="intro-card">
+        <header><h3>Base URL</h3></header>
+        <section><code t-esc="doc.baseUrl"/></section>
+      </div>
+      <section class="doc-section">
+        <h2>Groups</h2>
+        <ul class="intro-group-list">
+          <li t-foreach="doc.groups" t-as="group" t-key="group.id">
+            <a t-att-href="href(group.items[0].id)" t-on-click="(ev) => this.go(ev, group.items[0].id)"><strong t-esc="group.name"/></a>
+            <span t-if="group.description"> — <t t-esc="group.description"/></span>
+            <span class="apidoc-muted"> (<t t-esc="group.items.length"/> endpoint<t t-if="group.items.length !== 1">s</t>)</span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </t>
+
+  <t t-name="baseui.ApiDocParams">
+    <details t-if="paramList.length" class="param-group" open="open">
+      <summary><span class="param-group-head"><span class="caret"/><t t-esc="paramTitle.toUpperCase()"/></span></summary>
+      <ul>
+        <li t-foreach="paramList" t-as="p" t-key="p.name" class="param-row">
+          <div>
+            <div class="param-row-head">
+              <span class="param-name" t-esc="p.name"/>
+              <span class="param-type"><t t-esc="p.type"/><t t-if="p.format"> (<t t-esc="p.format"/>)</t></span>
+            </div>
+            <p t-if="p.description" class="param-desc" t-esc="p.description"/>
+            <p t-if="p.enum" class="param-desc">enum: <t t-foreach="p.enum" t-as="e" t-key="e_index"><code t-esc="e"/><t t-if="!e_last">, </t></t></p>
+            <p t-if="p.example !== undefined" class="param-desc">example<t t-if="p.exampleLabel"> (<t t-esc="p.exampleLabel"/>)</t>: <code t-esc="p.example"/></p>
+          </div>
+          <Badge t-if="p.required" variant="'danger'" label="'Required'"/>
+        </li>
+      </ul>
+    </details>
+  </t>
+
+  <t t-name="baseui.ApiDocSchema">
+    <t t-set="rows" t-value="schemaRows(schemaNode)"/>
+    <p t-if="!rows.length" class="apidoc-muted">No schema available.</p>
+    <ul t-else="" class="schema-tree">
+      <li t-foreach="rows" t-as="row" t-key="row_index" t-attf-style="--depth:#{depth(row.path)}">
+        <span class="param-name"><t t-esc="row.path"/><span t-if="row.required" class="required-star">*</span></span>
+        <span class="param-type"><t t-esc="row.type"/><t t-if="row.format"> (<t t-esc="row.format"/>)</t></span>
+        <p t-if="row.description" class="param-desc" t-esc="row.description"/>
+      </li>
+    </ul>
+  </t>
+
+  <t t-name="baseui.ApiDocCode">
+    <pre class="snippet-block"><span class="snippet-gutter"><span t-foreach="lineNumbers(codeText)" t-as="n" t-key="n" t-esc="n"/></span><span class="snippet-code"><code t-esc="codeText"/></span></pre>
+  </t>
+
+  <t t-name="baseui.ApiDocOperation">
+    <div class="doc-pane">
+      <t t-call="baseui.ApiDocBreadcrumb"/>
+      <h1><t t-esc="op.summary"/><Badge t-if="op.deprecated" variant="'warning'" label="'Deprecated'"/></h1>
+      <div class="endpoint-box">
+        <span class="method-badge" t-att-data-method="op.method" t-esc="methodLabel(op.method)"/>
+        <code class="endpoint-url" t-esc="doc.baseUrl + op.path"/>
+      </div>
+      <section t-if="op.description" class="doc-section"><div class="prose"><Markdown t-key="op.id + theme" content="op.description" baseUi="false"/></div></section>
+      <p t-if="op.externalDocs and op.externalDocs.url" class="param-desc"><a t-att-href="op.externalDocs.url" target="_blank" rel="noopener noreferrer"><t t-esc="op.externalDocs.description || 'External documentation'"/></a></p>
+
+      <section class="doc-section">
+        <h2>Request</h2>
+        <t t-call="baseui.ApiDocParams"><t t-set="paramTitle" t-value="'Path Parameters'"/><t t-set="paramList" t-value="op.parameters.path"/></t>
+        <t t-call="baseui.ApiDocParams"><t t-set="paramTitle" t-value="'Query Parameters'"/><t t-set="paramList" t-value="op.parameters.query"/></t>
+        <t t-call="baseui.ApiDocParams"><t t-set="paramTitle" t-value="'Header Parameters'"/><t t-set="paramList" t-value="op.parameters.header"/></t>
+        <t t-call="baseui.ApiDocParams"><t t-set="paramTitle" t-value="'Form Data'"/><t t-set="paramList" t-value="op.parameters.formData"/></t>
+        <details t-if="op.parameters.body" class="param-group" open="open">
+          <t t-set="body" t-value="op.parameters.body"/>
+          <summary><span class="param-group-head"><span class="caret"/>BODY<t t-if="body.required"> (required)</t></span></summary>
+          <p t-if="body.description" class="param-desc" t-esc="body.description"/>
+          <p class="param-desc">content type: <code t-esc="body.contentType || 'application/json'"/></p>
+          <t t-if="body.encoding">
+            <p class="param-desc">encoding:</p>
+            <ul class="schema-tree">
+              <li t-foreach="encodingEntries(body.encoding)" t-as="entry" t-key="entry[0]">
+                <span class="param-name" t-esc="entry[0]"/>
+                <span class="param-type"><t t-esc="entry[1].contentType || ''"/><t t-if="entry[1].style"> style=<t t-esc="entry[1].style"/></t></span>
+              </li>
+            </ul>
+          </t>
+          <p class="param-desc">example<t t-if="body.exampleIsAuto"> (auto)</t><t t-elif="body.exampleLabel"> (<t t-esc="body.exampleLabel"/>)</t>:</p>
+          <pre><code t-esc="formatExample(body.example)"/></pre>
+          <t t-call="baseui.ApiDocSchema"><t t-set="schemaNode" t-value="body.schema"/></t>
+        </details>
+      </section>
+
+      <section class="doc-section">
+        <div class="response-tabs-head"><h2>Responses</h2></div>
+        <p t-if="!op.responses.length" class="apidoc-muted">No responses documented.</p>
+        <Tabs t-else="" t-key="op.id" value="'' + state.respTab" onChange="(v) => this.selectResponse(v)">
+          <div class="response-tabs-head">
+            <TabsList className="'response-tablist'" variant="'line'">
+              <TabTrigger t-foreach="op.responses" t-as="r" t-key="r.status" value="'' + r_index" className="'tab-status tab-' + statusClass(r.status)"><t t-esc="r.status"/></TabTrigger>
+            </TabsList>
+          </div>
+          <TabsContainer className="'response-card-shell'">
+            <TabContent t-foreach="op.responses" t-as="r" t-key="r.status" value="'' + r_index">
+              <p t-if="r.summary" class="response-desc"><strong t-esc="r.summary"/></p>
+              <p class="response-desc" t-esc="r.description"/>
+              <t t-call="baseui.ApiDocParams"><t t-set="paramTitle" t-value="'Response Headers'"/><t t-set="paramList" t-value="r.headers"/></t>
+              <div t-if="r.schema" class="response-body">
+                <div class="response-body-head">
+                  <Badge variant="'secondary'" label="r.contentType || 'application/json'"/>
+                  <div class="view-toggle" role="group">
+                    <Button size="'sm'" variant="state.respView[r_index] !== 'example' ? 'default' : 'outline'" ariaPressed="state.respView[r_index] !== 'example' ? 'true' : 'false'" label="'Schema'" onClick="() => this.setResponseView(r_index, 'schema')"/>
+                    <Button size="'sm'" variant="state.respView[r_index] === 'example' ? 'default' : 'outline'" ariaPressed="state.respView[r_index] === 'example' ? 'true' : 'false'" label="r.exampleIsAuto ? 'Example (auto)' : 'Example'" onClick="() => this.setResponseView(r_index, 'example')"/>
+                  </div>
+                </div>
+                <pre t-if="state.respView[r_index] === 'example'"><code t-esc="formatExample(r.example)"/></pre>
+                <div t-else=""><t t-call="baseui.ApiDocSchema"><t t-set="schemaNode" t-value="r.schema"/></t></div>
+              </div>
+              <p t-else="" class="apidoc-muted">No response body.</p>
+              <details t-if="r.links.length" class="param-group">
+                <summary><span class="param-group-head"><span class="caret"/>LINKS</span></summary>
+                <ul>
+                  <li t-foreach="r.links" t-as="l" t-key="l.name" class="param-row">
+                    <div>
+                      <div class="param-row-head"><span class="param-name" t-esc="l.name"/></div>
+                      <p t-if="l.description" class="param-desc" t-esc="l.description"/>
+                      <p class="param-desc"><t t-if="l.operationId">operationId: <code t-esc="l.operationId"/></t><t t-else="">operationRef: <code t-esc="l.operationRef"/></t></p>
+                    </div>
+                  </li>
+                </ul>
+              </details>
+            </TabContent>
+          </TabsContainer>
+        </Tabs>
+      </section>
+
+      <section t-if="op.callbacks.length" class="doc-section">
+        <h2>Callbacks</h2>
+        <ul class="schema-tree">
+          <li t-foreach="op.callbacks" t-as="cb" t-key="cb_index">
+            <span class="method-badge" t-att-data-method="cb.method" t-esc="methodLabel(cb.method)"/>
+            <span class="param-name" t-esc="cb.name"/>
+            <code class="param-type" t-esc="cb.expression"/>
+            <p t-if="cb.summary" class="param-desc" t-esc="cb.summary"/>
+            <p t-if="cb.description" class="param-desc" t-esc="cb.description"/>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </t>
+
+  <t t-name="baseui.ApiDocResultRequest">
+    <div class="result-section">
+      <h4 class="result-section-title">Request</h4>
+      <details class="param-group" open="open">
+        <summary><span class="param-group-head"><span class="caret"/>URL</span></summary>
+        <t t-call="baseui.ApiDocCode"><t t-set="codeText" t-value="state.result.sent.url"/></t>
+      </details>
+      <details class="param-group" open="open">
+        <summary><span class="param-group-head"><span class="caret"/>Headers</span></summary>
+        <t t-call="baseui.ApiDocCode"><t t-set="codeText" t-value="state.result.sent.headerLines || '(none)'"/></t>
+      </details>
+      <details t-if="state.result.sent.bodyText" class="param-group" open="open">
+        <summary><span class="param-group-head"><span class="caret"/>Body</span></summary>
+        <t t-call="baseui.ApiDocCode"><t t-set="codeText" t-value="state.result.sent.bodyText"/></t>
+      </details>
+    </div>
+  </t>
+
+  <t t-name="baseui.ApiDocTryIt">
+    <div class="tryit-stack">
+      <section class="sdk-card">
+        <div class="sdk-strip" role="tablist" aria-label="Code language">
+          <Button t-foreach="languages" t-as="l" t-key="l.id" unstyled="true" className="'lang-chip' + (l.id === currentLanguage.id ? ' is-active' : '')" onClick="() => this.setLanguage(l.id)">
+            <span t-attf-class="lang-chip-icon lang-#{languageTone(l.id)}">
+              <span class="lang-chip-icon-image" t-att-style="iconUrl(l) ? 'background-image:url(' + iconUrl(l) + ')' : ''"/>
+            </span>
+            <span class="lang-chip-label" t-esc="l.label"/>
+          </Button>
+        </div>
+        <Badge variant="'secondary'" className="'sdk-current'" label="currentLanguage.label"/>
+        <div class="snippet-shell"><t t-call="baseui.ApiDocCode"><t t-set="codeText" t-value="state.snippet"/></t></div>
+      </section>
+
+      <section class="tryit-card">
+        <header class="tryit-card-head">
+          <h3>Request</h3>
+          <Button variant="'ghost'" size="'sm'" className="'head-action'" label="'Collapse All'" onClick="() => this.collapseRequest()"/>
+        </header>
+        <div class="tryit-card-body">
+          <details open="open">
+            <summary><span class="param-group-head"><span class="caret"/>Base URL</span></summary>
+            <div class="tryit-fields">
+              <NativeSelect value="draft.baseUrl" onChange="(v) => this.onBaseUrl(v)">
+                <option t-foreach="serverOptions" t-as="server" t-key="server.url" t-att-value="server.url"><t t-esc="serverLabel(server)"/></option>
+              </NativeSelect>
+            </div>
+          </details>
+
+          <details t-if="tryItParams.length" open="open">
+            <summary><span class="param-group-head"><span class="caret"/>Parameters</span></summary>
+            <div class="tryit-fields">
+              <label t-foreach="tryItParams" t-as="p" t-key="p.group + p.name" class="tryit-field">
+                <span><t t-esc="p.name"/> <span class="apidoc-muted">— <t t-esc="p.group"/><t t-if="p.required"> REQUIRED</t></span></span>
+                <NativeSelect t-if="p.enum" value="draft[p.group][p.name]" onChange="(v) => this.onParam(v, p.group, p.name)">
+                  <option t-foreach="p.enum" t-as="v" t-key="v_index" t-att-value="v" t-esc="v"/>
+                </NativeSelect>
+                <Input t-else="" value="draft[p.group][p.name] ?? ''" placeholder="p.description || (p.required ? 'required' : 'optional')" onInput="(v) => this.onParam(v, p.group, p.name)"/>
+              </label>
+            </div>
+          </details>
+
+          <details t-if="op.parameters.body" open="open">
+            <summary><span class="param-group-head"><span class="caret"/>Body (<t t-esc="draft.mimeType"/>)</span></summary>
+            <div class="tryit-fields">
+              <Textarea rows="8" value="draft.bodyText" onInput="(v) => this.onBody(v)"/>
+            </div>
+          </details>
+
+          <Button className="'apidoc-btn'" disabled="!!(state.result and state.result.phase === 'sending')" label="'Send API Request'" onClick="() => this.send()"/>
+        </div>
+      </section>
+
+      <section class="tryit-card">
+        <header class="tryit-card-head">
+          <h3>Response</h3>
+          <Button variant="'ghost'" size="'sm'" className="'response-clear'" label="'Clear'" onClick="() => this.clearResult()"/>
+        </header>
+        <div class="tryit-card-body">
+          <div t-if="!state.result" class="response-placeholder">Click the <code>Send API Request</code> button above and see the response here!</div>
+          <t t-elif="state.result.phase === 'sending'">
+            <div class="tryit-result-head">
+              <Badge variant="'muted'" label="state.result.sent.method"/>
+              <span class="apidoc-muted">Sending…</span>
+            </div>
+            <t t-call="baseui.ApiDocResultRequest"/>
+          </t>
+          <t t-else="">
+            <t t-call="baseui.ApiDocResultRequest"/>
+            <div class="result-section">
+              <h4 class="result-section-title">Response</h4>
+              <t t-if="state.result.phase === 'done'">
+                <div class="tryit-result-head">
+                  <span class="status-badge" t-att-data-status="statusClass(state.result.res.status)"><t t-esc="state.result.res.status"/><t t-if="state.result.res.statusText"> <t t-esc="state.result.res.statusText"/></t></span>
+                  <span class="apidoc-muted"><t t-esc="state.result.res.ms"/> ms</span>
+                </div>
+                <details class="param-group">
+                  <summary><span class="param-group-head"><span class="caret"/>Headers</span></summary>
+                  <t t-call="baseui.ApiDocCode"><t t-set="codeText" t-value="state.result.res.headerLines || '(none)'"/></t>
+                </details>
+                <t t-call="baseui.ApiDocCode"><t t-set="codeText" t-value="state.result.res.bodyText"/></t>
+              </t>
+              <t t-else="">
+                <div class="tryit-result-head"><Badge variant="'danger'" label="'Request failed'"/></div>
+                <p class="param-desc"><t t-esc="state.result.message"/>. This is usually a CORS restriction or network error — check the browser console for details.</p>
+              </t>
+            </div>
+          </t>
+        </div>
+      </section>
+    </div>
+  </t>
+
+  <t t-name="baseui.ApiDocStoredField">
+    <div class="auth-field">
+      <label class="tryit-field auth-field">
+        <span class="auth-field-label" t-esc="fieldLabel"/>
+        <div class="auth-input-row">
+          <Input value="state.inputs[fieldName]" disabled="!!state.stored[fieldName]" placeholder="fieldPlaceholder" onInput="(v) => this.setAuthInput(fieldName, v)"/>
+          <Button variant="'outline'" size="'sm'" className="'auth-clean-button' + (state.stored[fieldName] ? '' : ' is-hidden')" label="'Clean'" onClick="() => this.clearAuth(fieldName)"/>
+        </div>
+      </label>
+      <p class="param-desc auth-field-help"><t t-esc="fieldHelp"/></p>
+    </div>
+  </t>
+
+  <t t-name="baseui.ApiDocAuthBody">
+    <div class="auth-global-fields">
+      <t t-call="baseui.ApiDocStoredField">
+        <t t-set="fieldName" t-value="'apikey'"/>
+        <t t-set="fieldLabel" t-value="'API Key'"/>
+        <t t-set="fieldPlaceholder" t-value="'Enter API key'"/>
+        <t t-set="fieldHelp" t-value="'Stored in this tab\'s session storage as apikey. Used for apiKey-type schemes and as the Basic auth credential (Authorization: Basic &lt;API Key&gt;).'"/>
+      </t>
+      <t t-call="baseui.ApiDocStoredField">
+        <t t-set="fieldName" t-value="'oauthkey'"/>
+        <t t-set="fieldLabel" t-value="'Bearer / OAuth token'"/>
+        <t t-set="fieldPlaceholder" t-value="'Bearer token (auto-filled by Authorize/Get token below)'"/>
+        <t t-set="fieldHelp" t-value="'Stored in this tab\'s session storage as oauthkey. Used for bearer, openIdConnect and oauth2 schemes as Authorization: Bearer &lt;token&gt;.'"/>
+      </t>
+    </div>
+    <p t-if="!authSchemes.length" class="apidoc-muted auth-empty-state">No authorization schemes defined by this spec.</p>
+    <div t-else="" class="auth-schemes">
+      <details t-foreach="authSchemes" t-as="scheme" t-key="scheme.key" class="param-group auth-scheme" open="open">
+        <summary>
+          <span t-esc="scheme.key"/>
+          <Badge variant="'secondary'" label="scheme.def.type"/>
+          <Badge t-if="scheme.def.deprecated" variant="'warning'" label="'Deprecated'"/>
+        </summary>
+        <p t-if="scheme.def.description" class="param-desc" t-esc="scheme.def.description"/>
+        <p t-if="scheme.def.oauth2MetadataUrl" class="param-desc">Metadata: <a t-att-href="scheme.def.oauth2MetadataUrl" target="_blank" rel="noopener noreferrer" t-esc="scheme.def.oauth2MetadataUrl"/></p>
+        <p t-if="scheme.def.type === 'apiKey'" class="param-desc">Sent as <t t-esc="scheme.def.in === 'query' ? 'query parameter' : 'header'"/> <code t-esc="scheme.def.name"/> using the <strong>API Key</strong> above.</p>
+        <p t-elif="scheme.def.type === 'basic'" class="param-desc">Sent as <code>Authorization: Basic &lt;API Key&gt;</code> using the <strong>API Key</strong> above.</p>
+        <p t-elif="scheme.def.type === 'bearer'" class="param-desc">Sent as <code>Authorization: Bearer &lt;token&gt;</code> using the <strong>Bearer / OAuth token</strong> above.</p>
+        <p t-elif="scheme.def.type === 'mutualTLS'" class="param-desc">This scheme authenticates via a client TLS certificate negotiated at the transport layer — there is nothing to fill in here.</p>
+        <t t-elif="scheme.def.type === 'oauth2'">
+          <t t-set="fields" t-value="state.oauth[scheme.key]"/>
+          <t t-set="flow" t-value="scheme.def.flow"/>
+          <p class="param-desc">Flow: <code t-esc="oauthFlowLabel(flow)"/></p>
+          <div t-if="scheme.scopes.length" class="tryit-field auth-field">
+            <span class="auth-field-label">Scopes</span>
+            <ul class="auth-scope-list">
+              <li t-foreach="scheme.scopes" t-as="scope" t-key="scope[0]">
+                <Checkbox checked="fields.scopes.includes(scope[0])" onChange="() => this.toggleScope(scheme.key, scope[0])"><code t-esc="scope[0]"/> — <t t-esc="scope[1]"/></Checkbox>
+              </li>
+            </ul>
+          </div>
+          <label class="tryit-field auth-field">
+            <span class="auth-field-label">Client ID</span>
+            <Input type="'text'" value="fields.clientId" onInput="(v) => this.setField(fields, 'clientId', v)"/>
+          </label>
+          <t t-if="flow === 'accessCode' or flow === 'application' or flow === 'password'">
+            <label class="tryit-field auth-field">
+              <span class="auth-field-label">Client secret</span>
+              <Input type="'password'" value="fields.clientSecret" onInput="(v) => this.setField(fields, 'clientSecret', v)"/>
+            </label>
+            <p class="param-desc auth-field-help">Client secret is sent from the browser — only use a test/dev OAuth client here.</p>
+          </t>
+          <t t-if="flow === 'password'">
+            <label class="tryit-field auth-field">
+              <span class="auth-field-label">Username</span>
+              <Input type="'text'" value="fields.username" onInput="(v) => this.setField(fields, 'username', v)"/>
+            </label>
+            <label class="tryit-field auth-field">
+              <span class="auth-field-label">Password</span>
+              <Input type="'password'" value="fields.password" onInput="(v) => this.setField(fields, 'password', v)"/>
+            </label>
+          </t>
+          <div t-if="flow" class="tryit-field auth-field auth-action-row">
+            <Button variant="'outline'" size="'sm'" label="flow === 'implicit' or flow === 'accessCode' ? 'Authorize' : 'Get token'" onClick="() => this.startOAuth2Flow(scheme.key)"/>
+            <p class="param-desc auth-field-help" t-att-data-state="state.oauthStatus[scheme.key] ? (state.oauthStatus[scheme.key].isError ? 'error' : 'ok') : null" t-esc="state.oauthStatus[scheme.key] ? state.oauthStatus[scheme.key].message : ''"/>
+          </div>
+        </t>
+        <p t-else="" class="param-desc">Unsupported scheme type: <t t-esc="scheme.def.type"/></p>
+      </details>
+    </div>
+  </t>
 <t t-name="baseui.accordion">
     <div b-ui="accordion"><t t-slot="default"/></div>
   </t>
@@ -281,7 +731,7 @@
             <section t-att-class="state.mode === 'code' ? 'bu-block-code-panel is-active' : 'bu-block-code-panel'">
               <div class="bu-block-code-toolbar" role="group" aria-label="Code source">
                 <Button variant="'ghost'" type="'button'" ariaPressed="state.codeVariant === 'owl' ? 'true' : 'false'" onClick="() => this.setCodeVariant('owl')">
-                  Pure Owl Component
+                  Base Component
                 </Button>
                 <Button variant="'ghost'" type="'button'" ariaPressed="state.codeVariant === 'template' ? 'true' : 'false'" onClick="() => this.setCodeVariant('template')">
                   Template
@@ -1312,18 +1762,36 @@
   </t>
   <t t-name="Icon" t-call="baseui.Icon"/>
 <t t-name="baseui.Input">
+    <div t-if="isOutlined" t-att-class="outlinedClassNames">
+      <div class="bu-input-box">
+        <Icon t-if="props.leadingIcon" name="props.leadingIcon" className="'bu-input-icon bu-input-leading'"/>
+        <t t-call="baseui.Input.field"/>
+        <span class="bu-input-label" t-esc="props.label"/>
+        <Icon t-if="trailingIcon" name="trailingIcon" className="'bu-input-icon bu-input-trailing'"/>
+      </div>
+      <div t-if="supportingText or props.maxLength" class="bu-input-support">
+        <span t-att-id="supportId" t-esc="supportingText"/>
+        <span t-if="props.maxLength" class="bu-input-counter" t-esc="counter"/>
+      </div>
+    </div>
+    <t t-else="" t-call="baseui.Input.field"/>
+  </t>
+  <t t-name="baseui.Input.field">
     <input
       t-att-class="classNames"
       t-att-style="props.style"
       t-att-type="props.type || 'text'"
-      t-att-placeholder="props.placeholder"
+      t-att-placeholder="fieldPlaceholder"
       t-att-value="props.value"
       t-att-disabled="props.disabled"
       t-att-readonly="props.readonly"
       t-att-id="props.id"
       t-att-list="props.list"
       t-att-autocomplete="props.autocomplete"
+      t-att-maxlength="props.maxLength"
       t-att-aria-label="ariaLabel"
+      t-att-aria-invalid="isInvalid ? 'true' : undefined"
+      t-att-aria-describedby="supportingText ? supportId : undefined"
       t-att-min="props.min"
       t-att-max="props.max"
       t-att-step="props.step"