@thebase/ui 0.0.10 → 0.0.11

package/dist/runtime/milkdown/milkdown-editor.js

@@ -1 +1 @@
-import"./chunk-23NN352E.js";async function le({root:e,value:o="",onChange:t,collaborative:r=!1,room:s="baseui-markdown",password:i,signaling:m,user:w}={}){if(!e)throw new Error("BaseUI markdown editor: missing root element.");let[C,M,T,U,D,F,I,N,W,x,K,O,R,_]=await Promise.all([import("./core-T2SC7EXQ.js"),import("./commonmark-263P63KC.js"),import("./gfm-IHXC5DQO.js"),import("./history-VOPZ3HXQ.js"),import("./clipboard-5NOA4E34.js"),import("./cursor-Z4UWEH5V.js"),import("./indent-WYLZY3CZ.js"),import("./upload-DA4OHNVQ.js"),import("./block-G2R773CV.js"),import("./tooltip-5CTXOYIA.js"),import("./slash-3TY5YM2E.js"),import("./streaming-S7JA52O3.js"),import("./diff-K3BORLOX.js"),import("./listener-GNT2L5RH.js")]),{Editor:j,defaultValueCtx:L,rootCtx:V}=C,{commonmark:q}=M,{gfm:z}=T,{history:G}=U,{clipboard:H}=D,{cursor:J}=F,{indent:Q}=I,{upload:X}=N,{block:Y,BlockProvider:h}=W,{tooltipFactory:Z,TooltipProvider:$}=x,{slashFactory:ee,SlashProvider:te}=K,{streaming:oe}=O,{diff:re}=R,{listener:ne,listenerCtx:se}=_,v=Z("BASEUI_MARKDOWN"),S=ee("BASEUI_MARKDOWN"),a=[],c=j.make().config(n=>{n.set(V,e),n.set(L,String(o??"")),n.set(v.key,ae(e,$)),n.set(S.key,ce(e,te)),n.get(se).markdownUpdated((f,l,d)=>{l!==d&&t?.(l,d,f)})}).use(q).use(z).use(H).use(J).use(Q).use(X).use(Y).use(v).use(S).use(oe).use(re).use(ne);if(r){let[{Doc:n},{WebrtcProvider:f},l]=await Promise.all([import("./yjs-H3MVN7TP.js"),import("./y-webrtc-VQGJXSXG.js"),import("./lib-QZEOHNSS.js")]),{collab:d,collabServiceCtx:ie}=l,u=new n,g={};i&&(g.password=i),Array.isArray(m)&&m.length&&(g.signaling=m);let p=new f(s,u,g),P=w&&typeof w=="object"?w:{};p.awareness?.setLocalStateField("user",{name:P.name||"Anonymous",color:P.color||"#2563eb",...P}),c.use(d),a.push(()=>p.destroy?.(),()=>u.destroy());let b=await c.create();return b.action(A=>{E(A,e,h,a),A.get(ie).bindDoc(u).setAwareness(p.awareness).applyTemplate(String(o??"")).connect()}),{editor:b,provider:p,doc:u,destroy:()=>B(b,a)}}c.use(G);let y=await c.create();return y.action(n=>E(n,e,h,a)),{editor:y,provider:null,doc:null,destroy:()=>B(y,a)}}function k(e,o=""){let t=document.createElement("div");return t.className=e,t.textContent=o,t.setAttribute("aria-hidden","true"),t}function ae(e,o){return{view:t=>{let r=new o({root:e,content:k("baseui-markdown-editor-tooltip","Markdown tools")});return r.update(t),{update:(s,i)=>r.update(s,i),destroy:()=>r.destroy()}}}}function ce(e,o){return{view:t=>{let r=new o({root:e,content:k("baseui-markdown-editor-slash","Type Markdown syntax")});return r.update(t),{update:(s,i)=>r.update(s,i),destroy:()=>r.destroy()}}}}function E(e,o,t,r){let s=new t({ctx:e,root:o,content:k("baseui-markdown-editor-block-handle","::")});s.update(),r.push(()=>s.destroy())}function B(e,o){for(let t of o)t();e.destroy()}export{le as createMilkdownMarkdownEditor};
+import"./chunk-23NN352E.js";async function lt({root:t,value:o="",onChange:e,collaborative:r=!1,room:s="bu-markdown",password:i,signaling:m,user:w}={}){if(!t)throw new Error("BaseUI markdown editor: missing root element.");let[C,M,T,U,D,F,I,N,W,x,K,O,R,_]=await Promise.all([import("./core-T2SC7EXQ.js"),import("./commonmark-263P63KC.js"),import("./gfm-IHXC5DQO.js"),import("./history-VOPZ3HXQ.js"),import("./clipboard-5NOA4E34.js"),import("./cursor-Z4UWEH5V.js"),import("./indent-WYLZY3CZ.js"),import("./upload-DA4OHNVQ.js"),import("./block-G2R773CV.js"),import("./tooltip-5CTXOYIA.js"),import("./slash-3TY5YM2E.js"),import("./streaming-S7JA52O3.js"),import("./diff-K3BORLOX.js"),import("./listener-GNT2L5RH.js")]),{Editor:j,defaultValueCtx:L,rootCtx:V}=C,{commonmark:q}=M,{gfm:z}=T,{history:G}=U,{clipboard:H}=D,{cursor:J}=F,{indent:Q}=I,{upload:X}=N,{block:Y,BlockProvider:h}=W,{tooltipFactory:Z,TooltipProvider:$}=x,{slashFactory:tt,SlashProvider:et}=K,{streaming:ot}=O,{diff:rt}=R,{listener:nt,listenerCtx:st}=_,v=Z("BASEUI_MARKDOWN"),S=tt("BASEUI_MARKDOWN"),c=[],a=j.make().config(n=>{n.set(V,t),n.set(L,String(o??"")),n.set(v.key,ct(t,$)),n.set(S.key,at(t,et)),n.get(st).markdownUpdated((f,l,d)=>{l!==d&&e?.(l,d,f)})}).use(q).use(z).use(H).use(J).use(Q).use(X).use(Y).use(v).use(S).use(ot).use(rt).use(nt);if(r){let[{Doc:n},{WebrtcProvider:f},l]=await Promise.all([import("./yjs-H3MVN7TP.js"),import("./y-webrtc-VQGJXSXG.js"),import("./lib-QZEOHNSS.js")]),{collab:d,collabServiceCtx:it}=l,u=new n,g={};i&&(g.password=i),Array.isArray(m)&&m.length&&(g.signaling=m);let p=new f(s,u,g),P=w&&typeof w=="object"?w:{};p.awareness?.setLocalStateField("user",{name:P.name||"Anonymous",color:P.color||"#2563eb",...P}),a.use(d),c.push(()=>p.destroy?.(),()=>u.destroy());let b=await a.create();return b.action(A=>{E(A,t,h,c),A.get(it).bindDoc(u).setAwareness(p.awareness).applyTemplate(String(o??"")).connect()}),{editor:b,provider:p,doc:u,destroy:()=>B(b,c)}}a.use(G);let y=await a.create();return y.action(n=>E(n,t,h,c)),{editor:y,provider:null,doc:null,destroy:()=>B(y,c)}}function k(t,o=""){let e=document.createElement("div");return e.className=t,e.textContent=o,e.setAttribute("aria-hidden","true"),e}function ct(t,o){return{view:e=>{let r=new o({root:t,content:k("bu-markdown-editor-tooltip","Markdown tools")});return r.update(e),{update:(s,i)=>r.update(s,i),destroy:()=>r.destroy()}}}}function at(t,o){return{view:e=>{let r=new o({root:t,content:k("bu-markdown-editor-slash","Type Markdown syntax")});return r.update(e),{update:(s,i)=>r.update(s,i),destroy:()=>r.destroy()}}}}function E(t,o,e,r){let s=new e({ctx:t,root:o,content:k("bu-markdown-editor-block-handle","::")});s.update(),r.push(()=>s.destroy())}function B(t,o){for(let e of o)e();t.destroy()}export{lt as createMilkdownMarkdownEditor};

package/dist/runtime/milkdown/milkdown-text-editor.js

@@ -1 +1 @@
-import"./chunk-23NN352E.js";var R;function te(){return R??(R=new Promise((n,e)=>{if(document.getElementById("baseui-text-editor-crepe-theme")){n();return}let o=document.createElement("link");o.id="baseui-text-editor-crepe-theme",o.rel="stylesheet",o.href=new URL("./theme/common/style.css",import.meta.url).href,o.addEventListener("load",()=>n()),o.addEventListener("error",()=>e(new Error("BaseUI text editor: failed to load Crepe theme CSS."))),document.head.append(o)})),R}async function ce({root:n,value:e="",onChange:o,collaborative:t=!1,providerType:r="webrtc",room:i="baseui-text-editor",url:a,password:c,signaling:s,user:l,placeholder:m}={}){if(!n)throw new Error("BaseUI text editor: missing root element.");let[{Crepe:h},H,x,T,F,U]=await Promise.all([import("./esm-H2D66MX5.js"),import("./core-T2SC7EXQ.js"),import("./utils-H6AH4ARX.js"),import("./diff-K3BORLOX.js"),import("./streaming-S7JA52O3.js"),import("./lib-32AGHSKT.js"),te()]),{editorViewCtx:k,schemaCtx:D}=H,{getHTML:p}=x,{diff:B,diffPluginKey:I,getPendingChanges:z,startDiffReviewCmd:K,startDiffReviewFromDocCmd:O,acceptAllDiffsCmd:V,acceptDiffChunkCmd:W,acceptDiffRangeCmd:q,rejectDiffChunkCmd:N,rejectDiffRangeCmd:G,clearDiffReviewCmd:J}=T,{streaming:Q,startStreamingCmd:X,pushChunkCmd:Y,endStreamingCmd:Z,abortStreamingCmd:_}=F,{emoji:$}=U,{callCommand:L}=x;n.replaceChildren();let b=document.createElement("div");b.className="baseui-text-editor-surface",n.append(b);let d=new h({root:b,defaultValue:t?"":{type:"html",dom:y(e)},features:{[h.Feature.Latex]:!1,[h.Feature.AI]:!1},featureConfigs:m?{[h.Feature.Placeholder]:{text:m}}:{}});d.editor.use(B).use(Q).use($);let C="";d.on(S=>{S.updated(w=>{let g=p()(w);if(g!==C){let v=C;C=g,o?.(g,v,w)}})});let A={callCommand:L,editorViewCtx:k,schemaCtx:D,diffPluginKey:I,getPendingChanges:z,startDiffReviewCmd:K,startDiffReviewFromDocCmd:O,acceptAllDiffsCmd:V,acceptDiffChunkCmd:W,acceptDiffRangeCmd:q,rejectDiffChunkCmd:N,rejectDiffRangeCmd:G,clearDiffReviewCmd:J},E={callCommand:L,startStreamingCmd:X,pushChunkCmd:Y,endStreamingCmd:Z,abortStreamingCmd:_},P=[],u=null,f=null;if(t){let[{Doc:S},w]=await Promise.all([import("./yjs-H3MVN7TP.js"),import("./lib-QZEOHNSS.js")]),{collab:g,collabServiceCtx:v}=w;f=new S,u=await ie({providerType:r,ydoc:f,room:i,url:a,password:c,signaling:s}),u.awareness?.setLocalStateField("user",ae(l)),d.editor.use(g),await d.create();let M;return d.editor.action(ee=>{M=ee.get(v).bindDoc(f).setAwareness(u.awareness).applyTemplate({type:"html",dom:y(e)}).connect()}),P.push(()=>M?.disconnect(),()=>u.destroy?.(),()=>f.destroy()),C=d.editor.action(p()),u.connect?.(),j(d,A,E,P,n,u,f,k,p,D)}return await d.create(),C=d.editor.action(p()),j(d,A,E,P,n,u,f,k,p,D)}function y(n){let e=document.createElement("div");return e.innerHTML=String(n||"").trim()||"<p></p>",e}function j(n,e,o,t,r,i,a,c,s,l){return{editor:n.editor,provider:i,doc:a,focus:()=>n.editor.action(m=>m.get(c).focus()),getHTML:()=>n.editor.action(s()),setHTML:m=>ne(n.editor,m,c,l),diff:oe(n.editor,e),streaming:re(n.editor,o),destroy:()=>{for(let m of t)m();n.destroy(),r.replaceChildren()}}}async function ne(n,e,o,t){let{DOMParser:r,Slice:i}=await import("./model-VKXPTJEQ.js");n.action(a=>{let c=a.get(t),s=a.get(o),l=r.fromSchema(c).parse(y(e));s.dispatch(s.state.tr.replace(0,s.state.doc.content.size,new i(l.content,0,0)))})}function oe(n,e){let o=(t,r)=>n.action(e.callCommand(t,r));return{startFromMarkdown:t=>o(e.startDiffReviewCmd.key,t),startFromHTML:async t=>{let{DOMParser:r}=await import("./model-VKXPTJEQ.js"),i=n.action(a=>r.fromSchema(a.get(e.schemaCtx)).parse(y(t)));return o(e.startDiffReviewFromDocCmd.key,i)},acceptAll:()=>o(e.acceptAllDiffsCmd.key),acceptChunk:t=>o(e.acceptDiffChunkCmd.key,t),rejectChunk:t=>o(e.rejectDiffChunkCmd.key,t),acceptRange:t=>o(e.acceptDiffRangeCmd.key,t),rejectRange:t=>o(e.rejectDiffRangeCmd.key,t),clear:()=>o(e.clearDiffReviewCmd.key),getPendingChanges:()=>n.action(t=>{let r=e.diffPluginKey.getState(t.get(e.editorViewCtx).state);return r?e.getPendingChanges(r):[]})}}function re(n,e){let o=(t,r)=>n.action(e.callCommand(t,r));return{start:t=>o(e.startStreamingCmd.key,t),pushChunk:t=>o(e.pushChunkCmd.key,t),end:t=>o(e.endStreamingCmd.key,t),abort:()=>o(e.abortStreamingCmd.key)}}async function ie({providerType:n,ydoc:e,room:o,url:t,password:r,signaling:i}){if(n==="websocket"){if(!t)throw new Error("BaseUI text editor: collaborative websocket mode requires a `url`.");let{WebsocketProvider:l}=await import("./y-websocket-YOL5ECIU.js");return new l(t,o,e,{connect:!1})}let{WebrtcProvider:a}=await import("./y-webrtc-VQGJXSXG.js"),c={};r&&(c.password=r),Array.isArray(i)&&i.length&&(c.signaling=i);let s=new a(o,e,c);return s.disconnect(),s}function ae(n){let e=n&&typeof n=="object"?n:{};return{name:e.name||"Anonymous",color:e.color||"#2563eb",...e}}export{ce as createMilkdownTextEditor};
+import"./chunk-23NN352E.js";var R;function te(){return R??(R=new Promise((n,e)=>{if(document.getElementById("bu-text-editor-crepe-theme")){n();return}let o=document.createElement("link");o.id="bu-text-editor-crepe-theme",o.rel="stylesheet",o.href=new URL("./theme/common/style.css",import.meta.url).href,o.addEventListener("load",()=>n()),o.addEventListener("error",()=>e(new Error("BaseUI text editor: failed to load Crepe theme CSS."))),document.head.append(o)})),R}async function ce({root:n,value:e="",onChange:o,collaborative:t=!1,providerType:r="webrtc",room:i="bu-text-editor",url:a,password:c,signaling:s,user:l,placeholder:m}={}){if(!n)throw new Error("BaseUI text editor: missing root element.");let[{Crepe:h},H,x,T,F,U]=await Promise.all([import("./esm-H2D66MX5.js"),import("./core-T2SC7EXQ.js"),import("./utils-H6AH4ARX.js"),import("./diff-K3BORLOX.js"),import("./streaming-S7JA52O3.js"),import("./lib-32AGHSKT.js"),te()]),{editorViewCtx:k,schemaCtx:D}=H,{getHTML:p}=x,{diff:B,diffPluginKey:I,getPendingChanges:z,startDiffReviewCmd:K,startDiffReviewFromDocCmd:O,acceptAllDiffsCmd:V,acceptDiffChunkCmd:W,acceptDiffRangeCmd:q,rejectDiffChunkCmd:N,rejectDiffRangeCmd:G,clearDiffReviewCmd:J}=T,{streaming:Q,startStreamingCmd:X,pushChunkCmd:Y,endStreamingCmd:Z,abortStreamingCmd:_}=F,{emoji:$}=U,{callCommand:L}=x;n.replaceChildren();let b=document.createElement("div");b.className="bu-text-editor-surface",n.append(b);let d=new h({root:b,defaultValue:t?"":{type:"html",dom:y(e)},features:{[h.Feature.Latex]:!1,[h.Feature.AI]:!1},featureConfigs:m?{[h.Feature.Placeholder]:{text:m}}:{}});d.editor.use(B).use(Q).use($);let C="";d.on(S=>{S.updated(w=>{let g=p()(w);if(g!==C){let v=C;C=g,o?.(g,v,w)}})});let A={callCommand:L,editorViewCtx:k,schemaCtx:D,diffPluginKey:I,getPendingChanges:z,startDiffReviewCmd:K,startDiffReviewFromDocCmd:O,acceptAllDiffsCmd:V,acceptDiffChunkCmd:W,acceptDiffRangeCmd:q,rejectDiffChunkCmd:N,rejectDiffRangeCmd:G,clearDiffReviewCmd:J},E={callCommand:L,startStreamingCmd:X,pushChunkCmd:Y,endStreamingCmd:Z,abortStreamingCmd:_},P=[],u=null,f=null;if(t){let[{Doc:S},w]=await Promise.all([import("./yjs-H3MVN7TP.js"),import("./lib-QZEOHNSS.js")]),{collab:g,collabServiceCtx:v}=w;f=new S,u=await ie({providerType:r,ydoc:f,room:i,url:a,password:c,signaling:s}),u.awareness?.setLocalStateField("user",ae(l)),d.editor.use(g),await d.create();let M;return d.editor.action(ee=>{M=ee.get(v).bindDoc(f).setAwareness(u.awareness).applyTemplate({type:"html",dom:y(e)}).connect()}),P.push(()=>M?.disconnect(),()=>u.destroy?.(),()=>f.destroy()),C=d.editor.action(p()),u.connect?.(),j(d,A,E,P,n,u,f,k,p,D)}return await d.create(),C=d.editor.action(p()),j(d,A,E,P,n,u,f,k,p,D)}function y(n){let e=document.createElement("div");return e.innerHTML=String(n||"").trim()||"<p></p>",e}function j(n,e,o,t,r,i,a,c,s,l){return{editor:n.editor,provider:i,doc:a,focus:()=>n.editor.action(m=>m.get(c).focus()),getHTML:()=>n.editor.action(s()),setHTML:m=>ne(n.editor,m,c,l),diff:oe(n.editor,e),streaming:re(n.editor,o),destroy:()=>{for(let m of t)m();n.destroy(),r.replaceChildren()}}}async function ne(n,e,o,t){let{DOMParser:r,Slice:i}=await import("./model-VKXPTJEQ.js");n.action(a=>{let c=a.get(t),s=a.get(o),l=r.fromSchema(c).parse(y(e));s.dispatch(s.state.tr.replace(0,s.state.doc.content.size,new i(l.content,0,0)))})}function oe(n,e){let o=(t,r)=>n.action(e.callCommand(t,r));return{startFromMarkdown:t=>o(e.startDiffReviewCmd.key,t),startFromHTML:async t=>{let{DOMParser:r}=await import("./model-VKXPTJEQ.js"),i=n.action(a=>r.fromSchema(a.get(e.schemaCtx)).parse(y(t)));return o(e.startDiffReviewFromDocCmd.key,i)},acceptAll:()=>o(e.acceptAllDiffsCmd.key),acceptChunk:t=>o(e.acceptDiffChunkCmd.key,t),rejectChunk:t=>o(e.rejectDiffChunkCmd.key,t),acceptRange:t=>o(e.acceptDiffRangeCmd.key,t),rejectRange:t=>o(e.rejectDiffRangeCmd.key,t),clear:()=>o(e.clearDiffReviewCmd.key),getPendingChanges:()=>n.action(t=>{let r=e.diffPluginKey.getState(t.get(e.editorViewCtx).state);return r?e.getPendingChanges(r):[]})}}function re(n,e){let o=(t,r)=>n.action(e.callCommand(t,r));return{start:t=>o(e.startStreamingCmd.key,t),pushChunk:t=>o(e.pushChunkCmd.key,t),end:t=>o(e.endStreamingCmd.key,t),abort:()=>o(e.abortStreamingCmd.key)}}async function ie({providerType:n,ydoc:e,room:o,url:t,password:r,signaling:i}){if(n==="websocket"){if(!t)throw new Error("BaseUI text editor: collaborative websocket mode requires a `url`.");let{WebsocketProvider:l}=await import("./y-websocket-YOL5ECIU.js");return new l(t,o,e,{connect:!1})}let{WebrtcProvider:a}=await import("./y-webrtc-VQGJXSXG.js"),c={};r&&(c.password=r),Array.isArray(i)&&i.length&&(c.signaling=i);let s=new a(o,e,c);return s.disconnect(),s}function ae(n){let e=n&&typeof n=="object"?n:{};return{name:e.name||"Anonymous",color:e.color||"#2563eb",...e}}export{ce as createMilkdownTextEditor};

package/dist/themes/baseui-dark.css

@@ -1 +1 @@
-[b-theme=dark],[data-bs-theme=dark],:root.dark:not([b-theme=light]):not([data-bs-theme=light]),.dark:not([b-theme=light]):not([data-bs-theme=light]){color-scheme:dark;--baseui-background: var(--color-neutral-950, oklch(.145 0 0));--baseui-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-surface: var(--color-neutral-900, oklch(.205 0 0));--baseui-surface-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-card: var(--baseui-surface);--baseui-card-foreground: var(--baseui-surface-foreground);--baseui-popover: var(--baseui-surface);--baseui-popover-foreground: var(--baseui-surface-foreground);--baseui-primary: var(--color-neutral-200, oklch(.922 0 0));--baseui-primary-rgb: 229, 229, 229;--baseui-primary-foreground: var(--color-neutral-900, oklch(.205 0 0));--baseui-secondary: var(--color-neutral-800, oklch(.269 0 0));--baseui-secondary-rgb: 38, 38, 38;--baseui-secondary-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-muted: var(--color-neutral-800, oklch(.269 0 0));--baseui-muted-foreground: var(--color-neutral-400, oklch(.708 0 0));--baseui-accent: var(--color-neutral-800, oklch(.269 0 0));--baseui-accent-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-danger: var(--color-red-400, oklch(.704 .191 22.216));--baseui-danger-rgb: 248, 113, 113;--baseui-danger-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-border: oklch(1 0 0 / 10%);--baseui-input: oklch(1 0 0 / 15%);--baseui-ring: var(--color-neutral-500, oklch(.556 0 0));--baseui-ring-alpha: color-mix(in oklab, var(--baseui-ring) 50%, transparent);--baseui-chart-1: var(--color-blue-500, oklch(.623 .214 259.815));--baseui-chart-2: var(--color-emerald-500, oklch(.696 .17 162.48));--baseui-chart-3: var(--color-yellow-500, oklch(.795 .184 86.047));--baseui-chart-4: var(--color-purple-500, oklch(.627 .265 303.9));--baseui-chart-5: var(--color-red-400, oklch(.704 .191 22.216));--baseui-sidebar: var(--color-neutral-900, oklch(.205 0 0));--baseui-sidebar-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-sidebar-primary: var(--color-blue-500, oklch(.623 .214 259.815));--baseui-sidebar-primary-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-sidebar-accent: var(--color-neutral-800, oklch(.269 0 0));--baseui-sidebar-accent-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-sidebar-border: oklch(1 0 0 / 10%);--baseui-sidebar-ring: var(--color-neutral-500, oklch(.556 0 0));--baseui-overlay: rgb(0 0 0 / 70%);--bs-body-bg: var(--baseui-background);--bs-body-color: var(--baseui-foreground);--bs-body-color-rgb: 250, 250, 250;--bs-emphasis-color: var(--baseui-foreground);--bs-secondary-color: var(--baseui-muted-foreground);--bs-secondary-bg: var(--baseui-muted);--bs-tertiary-color: var(--baseui-muted-foreground);--bs-tertiary-bg: var(--baseui-accent);--bs-primary: var(--baseui-primary);--bs-primary-rgb: var(--baseui-primary-rgb);--bs-secondary: var(--baseui-secondary);--bs-secondary-rgb: var(--baseui-secondary-rgb);--bs-danger: var(--baseui-danger);--bs-danger-rgb: var(--baseui-danger-rgb);--bs-border-color: var(--baseui-border);--bs-border-color-translucent: color-mix(in oklab, var(--baseui-border) 65%, transparent);--bs-focus-ring-color: var(--baseui-ring-alpha)}
+[b-theme=dark],[data-bs-theme=dark],:root.dark:not([b-theme=light]):not([data-bs-theme=light]),.dark:not([b-theme=light]):not([data-bs-theme=light]){color-scheme:dark;--b-background: var(--color-neutral-950, oklch(.145 0 0));--b-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-surface: var(--color-neutral-900, oklch(.205 0 0));--b-surface-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-card: var(--b-surface);--b-card-foreground: var(--b-surface-foreground);--b-popover: var(--b-surface);--b-popover-foreground: var(--b-surface-foreground);--b-primary: var(--color-neutral-200, oklch(.922 0 0));--b-primary-rgb: 229, 229, 229;--b-primary-foreground: var(--color-neutral-900, oklch(.205 0 0));--b-secondary: var(--color-neutral-800, oklch(.269 0 0));--b-secondary-rgb: 38, 38, 38;--b-secondary-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-muted: var(--color-neutral-800, oklch(.269 0 0));--b-muted-foreground: var(--color-neutral-400, oklch(.708 0 0));--b-accent: var(--color-neutral-800, oklch(.269 0 0));--b-accent-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-danger: var(--color-red-400, oklch(.704 .191 22.216));--b-danger-rgb: 248, 113, 113;--b-danger-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-border: oklch(1 0 0 / 10%);--b-input: oklch(1 0 0 / 15%);--b-ring: var(--color-neutral-500, oklch(.556 0 0));--b-ring-alpha: color-mix(in oklab, var(--b-ring) 50%, transparent);--b-chart-1: var(--color-blue-500, oklch(.623 .214 259.815));--b-chart-2: var(--color-emerald-500, oklch(.696 .17 162.48));--b-chart-3: var(--color-yellow-500, oklch(.795 .184 86.047));--b-chart-4: var(--color-purple-500, oklch(.627 .265 303.9));--b-chart-5: var(--color-red-400, oklch(.704 .191 22.216));--b-sidebar: var(--color-neutral-900, oklch(.205 0 0));--b-sidebar-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-sidebar-primary: var(--color-blue-500, oklch(.623 .214 259.815));--b-sidebar-primary-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-sidebar-accent: var(--color-neutral-800, oklch(.269 0 0));--b-sidebar-accent-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-sidebar-border: oklch(1 0 0 / 10%);--b-sidebar-ring: var(--color-neutral-500, oklch(.556 0 0));--b-overlay: rgb(0 0 0 / 70%);--bs-body-bg: var(--b-background);--bs-body-color: var(--b-foreground);--bs-body-color-rgb: 250, 250, 250;--bs-emphasis-color: var(--b-foreground);--bs-secondary-color: var(--b-muted-foreground);--bs-secondary-bg: var(--b-muted);--bs-tertiary-color: var(--b-muted-foreground);--bs-tertiary-bg: var(--b-accent);--bs-primary: var(--b-primary);--bs-primary-rgb: var(--b-primary-rgb);--bs-secondary: var(--b-secondary);--bs-secondary-rgb: var(--b-secondary-rgb);--bs-danger: var(--b-danger);--bs-danger-rgb: var(--b-danger-rgb);--bs-border-color: var(--b-border);--bs-border-color-translucent: color-mix(in oklab, var(--b-border) 65%, transparent);--bs-focus-ring-color: var(--b-ring-alpha)}

package/dist/themes/baseui-light.css

@@ -1 +1 @@
-:root:not([b-theme]):not([data-bs-theme]):not(.dark),[b-theme=light],[data-bs-theme=light],:root.light,.light{color-scheme:light;--baseui-background: var(--color-white, oklch(1 0 0));--baseui-foreground: var(--color-neutral-950, oklch(.145 0 0));--baseui-surface: var(--color-white, oklch(1 0 0));--baseui-surface-foreground: var(--color-neutral-950, oklch(.145 0 0));--baseui-card: var(--baseui-surface);--baseui-card-foreground: var(--baseui-surface-foreground);--baseui-popover: var(--baseui-surface);--baseui-popover-foreground: var(--baseui-surface-foreground);--baseui-primary: var(--color-neutral-900, oklch(.205 0 0));--baseui-primary-rgb: 23, 23, 23;--baseui-primary-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-secondary: var(--color-neutral-100, oklch(.97 0 0));--baseui-secondary-rgb: 245, 245, 245;--baseui-secondary-foreground: var(--color-neutral-900, oklch(.205 0 0));--baseui-muted: var(--color-neutral-100, oklch(.97 0 0));--baseui-muted-foreground: var(--color-neutral-500, oklch(.556 0 0));--baseui-accent: var(--color-neutral-100, oklch(.97 0 0));--baseui-accent-foreground: var(--color-neutral-900, oklch(.205 0 0));--baseui-danger: var(--color-red-600, oklch(.577 .245 27.325));--baseui-danger-rgb: 220, 38, 38;--baseui-danger-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-border: var(--color-neutral-200, oklch(.922 0 0));--baseui-input: var(--color-neutral-200, oklch(.922 0 0));--baseui-ring: var(--color-neutral-400, oklch(.708 0 0));--baseui-ring-alpha: color-mix(in oklab, var(--baseui-ring) 50%, transparent);--baseui-chart-1: var(--color-orange-500, oklch(.705 .213 47.604));--baseui-chart-2: var(--color-emerald-500, oklch(.696 .17 162.48));--baseui-chart-3: var(--color-blue-500, oklch(.623 .214 259.815));--baseui-chart-4: var(--color-yellow-500, oklch(.795 .184 86.047));--baseui-chart-5: var(--color-purple-500, oklch(.627 .265 303.9));--baseui-sidebar: var(--color-neutral-50, oklch(.985 0 0));--baseui-sidebar-foreground: var(--color-neutral-950, oklch(.145 0 0));--baseui-sidebar-primary: var(--color-neutral-900, oklch(.205 0 0));--baseui-sidebar-primary-foreground: var(--color-neutral-50, oklch(.985 0 0));--baseui-sidebar-accent: var(--color-neutral-100, oklch(.97 0 0));--baseui-sidebar-accent-foreground: var(--color-neutral-900, oklch(.205 0 0));--baseui-sidebar-border: var(--color-neutral-200, oklch(.922 0 0));--baseui-sidebar-ring: var(--color-neutral-400, oklch(.708 0 0));--baseui-overlay: rgb(0 0 0 / 25%);--bs-body-bg: var(--baseui-background);--bs-body-color: var(--baseui-foreground);--bs-body-color-rgb: 10, 10, 10;--bs-emphasis-color: var(--baseui-foreground);--bs-secondary-color: var(--baseui-muted-foreground);--bs-secondary-bg: var(--baseui-muted);--bs-tertiary-color: var(--baseui-muted-foreground);--bs-tertiary-bg: var(--baseui-accent);--bs-primary: var(--baseui-primary);--bs-primary-rgb: var(--baseui-primary-rgb);--bs-secondary: var(--baseui-secondary);--bs-secondary-rgb: var(--baseui-secondary-rgb);--bs-danger: var(--baseui-danger);--bs-danger-rgb: var(--baseui-danger-rgb);--bs-border-color: var(--baseui-border);--bs-border-color-translucent: color-mix(in oklab, var(--baseui-border) 65%, transparent);--bs-focus-ring-color: var(--baseui-ring-alpha)}
+:root:not([b-theme]):not([data-bs-theme]):not(.dark),[b-theme=light],[data-bs-theme=light],:root.light,.light{color-scheme:light;--b-background: var(--color-white, oklch(1 0 0));--b-foreground: var(--color-neutral-950, oklch(.145 0 0));--b-surface: var(--color-white, oklch(1 0 0));--b-surface-foreground: var(--color-neutral-950, oklch(.145 0 0));--b-card: var(--b-surface);--b-card-foreground: var(--b-surface-foreground);--b-popover: var(--b-surface);--b-popover-foreground: var(--b-surface-foreground);--b-primary: var(--color-neutral-900, oklch(.205 0 0));--b-primary-rgb: 23, 23, 23;--b-primary-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-secondary: var(--color-neutral-100, oklch(.97 0 0));--b-secondary-rgb: 245, 245, 245;--b-secondary-foreground: var(--color-neutral-900, oklch(.205 0 0));--b-muted: var(--color-neutral-100, oklch(.97 0 0));--b-muted-foreground: var(--color-neutral-500, oklch(.556 0 0));--b-accent: var(--color-neutral-100, oklch(.97 0 0));--b-accent-foreground: var(--color-neutral-900, oklch(.205 0 0));--b-danger: var(--color-red-600, oklch(.577 .245 27.325));--b-danger-rgb: 220, 38, 38;--b-danger-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-border: var(--color-neutral-200, oklch(.922 0 0));--b-input: var(--color-neutral-200, oklch(.922 0 0));--b-ring: var(--color-neutral-400, oklch(.708 0 0));--b-ring-alpha: color-mix(in oklab, var(--b-ring) 50%, transparent);--b-chart-1: var(--color-orange-500, oklch(.705 .213 47.604));--b-chart-2: var(--color-emerald-500, oklch(.696 .17 162.48));--b-chart-3: var(--color-blue-500, oklch(.623 .214 259.815));--b-chart-4: var(--color-yellow-500, oklch(.795 .184 86.047));--b-chart-5: var(--color-purple-500, oklch(.627 .265 303.9));--b-sidebar: var(--color-neutral-50, oklch(.985 0 0));--b-sidebar-foreground: var(--color-neutral-950, oklch(.145 0 0));--b-sidebar-primary: var(--color-neutral-900, oklch(.205 0 0));--b-sidebar-primary-foreground: var(--color-neutral-50, oklch(.985 0 0));--b-sidebar-accent: var(--color-neutral-100, oklch(.97 0 0));--b-sidebar-accent-foreground: var(--color-neutral-900, oklch(.205 0 0));--b-sidebar-border: var(--color-neutral-200, oklch(.922 0 0));--b-sidebar-ring: var(--color-neutral-400, oklch(.708 0 0));--b-overlay: rgb(0 0 0 / 25%);--bs-body-bg: var(--b-background);--bs-body-color: var(--b-foreground);--bs-body-color-rgb: 10, 10, 10;--bs-emphasis-color: var(--b-foreground);--bs-secondary-color: var(--b-muted-foreground);--bs-secondary-bg: var(--b-muted);--bs-tertiary-color: var(--b-muted-foreground);--bs-tertiary-bg: var(--b-accent);--bs-primary: var(--b-primary);--bs-primary-rgb: var(--b-primary-rgb);--bs-secondary: var(--b-secondary);--bs-secondary-rgb: var(--b-secondary-rgb);--bs-danger: var(--b-danger);--bs-danger-rgb: var(--b-danger-rgb);--bs-border-color: var(--b-border);--bs-border-color-translucent: color-mix(in oklab, var(--b-border) 65%, transparent);--bs-focus-ring-color: var(--b-ring-alpha)}

package/docs/components/accordion.md

@@ -46,27 +46,27 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
   <div b-accordion-item b-att-state="open">
     <button b-accordion-trigger type="button">
       What are your shipping options?
-      <span b-icon="chevron-down" class="baseui-accordion-trigger-icon"></span>
+      <span b-icon="chevron-down" class="bu-accordion-trigger-icon"></span>
     </button>
     <div b-accordion-panel>We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.</div>
   </div>
   <div b-accordion-item>
     <button b-accordion-trigger type="button">
       What is your return policy?
-      <span b-icon="chevron-down" class="baseui-accordion-trigger-icon"></span>
+      <span b-icon="chevron-down" class="bu-accordion-trigger-icon"></span>
     </button>
     <div b-accordion-panel>Returns are accepted within 30 days of delivery, provided the item is unused and in its original packaging.</div>
   </div>
   <div b-accordion-item>
     <button b-accordion-trigger type="button">
       How can I contact customer support?
-      <span b-icon="chevron-down" class="baseui-accordion-trigger-icon"></span>
+      <span b-icon="chevron-down" class="bu-accordion-trigger-icon"></span>
     </button>
     <div b-accordion-panel>Reach us by email, live chat, or phone — support is available seven days a week.</div>
   </div>
 </div>
 ```
 
-Options: `b-att-multiple="true"` allows more than one item to stay open. Events: `baseui:change`. Keyboard: buttons use native activation and focus behavior. The static adapter only wires ARIA/toggle behavior onto author-provided markup — add your own trailing chevron icon (`b-icon="chevron-down" class="baseui-accordion-trigger-icon"`) inside the trigger for the rotating-chevron look the pure Owl `AccordionTrigger` renders automatically, and set `b-att-state="open"` on an item to have it expanded by default.
+Options: `b-att-multiple="true"` allows more than one item to stay open. Events: `baseui:change`. Keyboard: buttons use native activation and focus behavior. The static adapter only wires ARIA/toggle behavior onto author-provided markup — add your own trailing chevron icon (`b-icon="chevron-down" class="bu-accordion-trigger-icon"`) inside the trigger for the rotating-chevron look the pure Owl `AccordionTrigger` renders automatically, and set `b-att-state="open"` on an item to have it expanded by default.
 
 Each panel (`b-accordion-panel` / `AccordionContent`'s root) is driven by its own live `bootstrap.Collapse` instance: it always carries the Bootstrap `collapse` class (plus `show` while open), and Bootstrap itself manages the `collapsing`/height transition and the `show` class across toggles — don't rely on `hidden`/node removal to detect open state. In single-open mode (the default, without `multiple`), opening one item hides every other open item's own `bootstrap.Collapse` instance before showing the clicked item's.

package/docs/components/avatar.md

@@ -53,7 +53,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/block-viewer.md

@@ -26,7 +26,7 @@ import { BlockViewer } from "@base/component";
 
 ```html
 <body data-block-title="sidebar-01" data-block-description="A simple sidebar with navigation grouped by section.">
-  <div id="baseui-block-viewer" b-ui="block-viewer"></div>
+  <div id="bu-block-viewer" b-ui="block-viewer"></div>
   <script type="text/xml" b-block-code-template>
     <templates>
       <t t-name="examples.SidebarBlock">

package/docs/components/breadcrumb.md

@@ -73,7 +73,7 @@ BaseUI adds the shadcn/Nova breadcrumb classes, inserts chevron separators when
     <li><a href="/">Home</a></li>
     <li b-breadcrumb-separator aria-hidden="true">·</li>
     <li><span b-ui="dropdown-menu">
-      <button b-dropdown-trigger type="button" class="baseui-breadcrumb-link">
+      <button b-dropdown-trigger type="button" class="bu-breadcrumb-link">
         <span>Components</span> <span b-icon="chevron-down"></span>
       </button>
       <span b-dropdown-menu>

package/docs/components/calendar.md

@@ -52,7 +52,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/carousel.md

@@ -102,7 +102,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/chart.md

@@ -37,8 +37,8 @@ import { Chart } from "@thebase/ui";
     </div>
     <div b-chart-footer="">
       <div b-chart-legend="">
-        <span style="--baseui-chart-color: var(--baseui-chart-1)">Desktop</span>
-        <span style="--baseui-chart-color: var(--baseui-chart-2)">Mobile</span>
+        <span style="--b-chart-color: var(--b-chart-1)">Desktop</span>
+        <span style="--b-chart-color: var(--b-chart-2)">Mobile</span>
       </div>
     </div>
   </Chart>
@@ -110,7 +110,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens plus shadcn-compatible chart tokens: `--baseui-chart-1` through `--baseui-chart-5`. Area-card examples also use `--baseui-chart-height`, `--baseui-chart-grid`, `b-chart-area`, `b-chart-line`, `b-chart-axis`, `b-chart-footer`, `b-chart-trend`, and `b-chart-range`.
+The component inherits BaseUI semantic tokens plus shadcn-compatible chart tokens: `--b-chart-1` through `--b-chart-5`. Area-card examples also use `--b-chart-height`, `--b-chart-grid`, `b-chart-area`, `b-chart-line`, `b-chart-axis`, `b-chart-footer`, `b-chart-trend`, and `b-chart-range`.
 
 ## Accessibility behavior
 

package/docs/components/combobox.md

@@ -59,7 +59,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/command.md

@@ -62,7 +62,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/context-menu.md

@@ -64,7 +64,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/data-table.md

@@ -22,7 +22,7 @@ import { DataTable } from "@thebase/ui";
 | --- | --- | --- | --- |
 | `DataTable` | `columns` | `Array` | optional; defaults to the shadcn payments demo columns |
 | `DataTable` | `rows` | `Array` | optional; defaults to the shadcn payments demo rows |
-| `DataTable` | `variant` | `String` | `default` by default; use `compact` for denser rows or any custom value for a `baseui-data-table-{variant}` hook |
+| `DataTable` | `variant` | `String` | `default` by default; use `compact` for denser rows or any custom value for a `bu-data-table-{variant}` hook |
 | `DataTable` | `searchable` | `Boolean` | `true` by default |
 | `DataTable` | `sortable` | `Boolean` | `true` by default; set `column.sortable = false` per column to disable |
 | `DataTable` | `pagination` | `Boolean` | `true` by default |
@@ -62,7 +62,7 @@ The table viewport always scrolls horizontally (`overflow: auto`) once its conte
 
 ### Mobile kanban view
 
-Below 640px width, the table view is replaced by a stacked one-column card ("kanban") view — each row becomes a card showing every visible column as a label/value pair, with selection and row actions preserved. This is CSS-driven (`.baseui-data-table__viewport` hides, `.baseui-data-table__cards` shows), so it applies to both the pure Owl component and the static `b-ui="data-table"` markup automatically.
+Below 640px width, the table view is replaced by a stacked one-column card ("kanban") view — each row becomes a card showing every visible column as a label/value pair, with selection and row actions preserved. This is CSS-driven (`.bu-data-table__viewport` hides, `.bu-data-table__cards` shows), so it applies to both the pure Owl component and the static `b-ui="data-table"` markup automatically.
 
 See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
@@ -90,7 +90,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/date-picker.md

@@ -52,7 +52,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/dialog.md

@@ -39,11 +39,11 @@ import {
 <button b-ui="button" b-att-variant="outline" b-att-trigger="#settings-dialog">Open Dialog</button>
 <div b-ui="dialog" b-att-trigger="[b-att-trigger='#settings-dialog']" id="settings-dialog">
   <div b-dialog-panel>
-    <div class="baseui-dialog-header" data-slot="dialog-header">
-      <h2 b-dialog-title class="baseui-dialog-title">Edit profile</h2>
-      <p b-dialog-description class="baseui-dialog-description">Make changes to your profile here. Click save when you're done.</p>
+    <div class="bu-dialog-header" data-slot="dialog-header">
+      <h2 b-dialog-title class="bu-dialog-title">Edit profile</h2>
+      <p b-dialog-description class="bu-dialog-description">Make changes to your profile here. Click save when you're done.</p>
     </div>
-    <button b-dialog-close class="btn baseui-button btn-light btn-icon-sm baseui-dialog-close-control" aria-label="Close">
+    <button b-dialog-close class="btn bu-button btn-light btn-icon-sm bu-dialog-close-control" aria-label="Close">
       <span b-icon="x"></span>
       <span class="visually-hidden">Close</span>
     </button>
@@ -57,7 +57,7 @@ import {
         <input b-ui="input" class="form-control" value="@peduarte" />
       </label>
     </div>
-    <div b-dialog-footer class="baseui-dialog-footer">
+    <div b-dialog-footer class="bu-dialog-footer">
       <button b-dialog-close b-ui="button" b-att-variant="outline">Cancel</button>
       <button b-ui="button">Save changes</button>
     </div>

package/docs/components/form.md

@@ -23,19 +23,19 @@ class BugReportExample extends Component {
     FieldLabel,
   };
   static template = xml`
-    <form class="baseui-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
-      <div class="baseui-form-header">
-        <h3 class="baseui-form-title">Bug Report</h3>
-        <p class="baseui-form-description">Help us improve by reporting bugs you encounter.</p>
+    <form class="bu-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
+      <div class="bu-form-header">
+        <h3 class="bu-form-title">Bug Report</h3>
+        <p class="bu-form-description">Help us improve by reporting bugs you encounter.</p>
       </div>
 
-      <FieldGroup className="'baseui-form-fields'">
+      <FieldGroup className="'bu-form-fields'">
         <Field>
           <FieldLabel for="'bug-title'">Bug Title</FieldLabel>
           <input
             id="bug-title"
             name="title"
-            class="form-control baseui-form-control"
+            class="form-control bu-form-control"
             type="text"
             placeholder="Login button not working on mobile"
             autocomplete="off"
@@ -45,18 +45,18 @@ class BugReportExample extends Component {
 
         <Field>
           <FieldLabel for="'bug-description'">Description</FieldLabel>
-          <div class="baseui-form-input-group" data-slot="input-group" role="group">
+          <div class="bu-form-input-group" data-slot="input-group" role="group">
             <textarea
               id="bug-description"
               name="description"
-              class="form-control baseui-form-textarea"
+              class="form-control bu-form-textarea"
               placeholder="I'm having an issue with the login button on mobile."
               maxlength="100"
               rows="6"
               t-model="state.description"
             ></textarea>
-            <div class="baseui-form-counter" data-slot="input-group-addon" data-align="block-end">
-              <span class="baseui-form-counter-text">
+            <div class="bu-form-counter" data-slot="input-group-addon" data-align="block-end">
+              <span class="bu-form-counter-text">
                 <t t-esc="state.description.length"/>/100 characters
               </span>
             </div>
@@ -65,7 +65,7 @@ class BugReportExample extends Component {
         </Field>
       </FieldGroup>
 
-      <Field orientation="'horizontal'" className="'baseui-form-actions'">
+      <Field orientation="'horizontal'" className="'bu-form-actions'">
         <Button type="'button'" variant="'outline'" onClick="() => this.reset()">Reset</Button>
         <Button type="'submit'">Submit</Button>
       </Field>
@@ -95,19 +95,19 @@ class BugReportExample extends Component {
 ```
 
 ```base-ui
-<form class="baseui-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
-  <div class="baseui-form-header">
-    <h3 class="baseui-form-title">Bug Report</h3>
-    <p class="baseui-form-description">Help us improve by reporting bugs you encounter.</p>
+<form class="bu-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
+  <div class="bu-form-header">
+    <h3 class="bu-form-title">Bug Report</h3>
+    <p class="bu-form-description">Help us improve by reporting bugs you encounter.</p>
   </div>
 
-  <FieldGroup className="'baseui-form-fields'">
+  <FieldGroup className="'bu-form-fields'">
     <Field>
       <FieldLabel for="'bug-title'">Bug Title</FieldLabel>
       <input
         id="bug-title"
         name="title"
-        class="form-control baseui-form-control"
+        class="form-control bu-form-control"
         type="text"
         placeholder="Login button not working on mobile"
         autocomplete="off"
@@ -117,18 +117,18 @@ class BugReportExample extends Component {
 
     <Field>
       <FieldLabel for="'bug-description'">Description</FieldLabel>
-      <div class="baseui-form-input-group" data-slot="input-group" role="group">
+      <div class="bu-form-input-group" data-slot="input-group" role="group">
         <textarea
           id="bug-description"
           name="description"
-          class="form-control baseui-form-textarea"
+          class="form-control bu-form-textarea"
           placeholder="I'm having an issue with the login button on mobile."
           maxlength="100"
           rows="6"
           t-model="state.description"
         ></textarea>
-        <div class="baseui-form-counter" data-slot="input-group-addon" data-align="block-end">
-          <span class="baseui-form-counter-text">
+        <div class="bu-form-counter" data-slot="input-group-addon" data-align="block-end">
+          <span class="bu-form-counter-text">
             <t t-esc="state.description.length"/>/100 characters
           </span>
         </div>
@@ -137,7 +137,7 @@ class BugReportExample extends Component {
     </Field>
   </FieldGroup>
 
-  <Field orientation="'horizontal'" className="'baseui-form-actions'">
+  <Field orientation="'horizontal'" className="'bu-form-actions'">
     <Button type="'button'" variant="'outline'" onClick="() => this.reset()">Reset</Button>
     <Button type="'submit'">Submit</Button>
   </Field>
@@ -157,12 +157,12 @@ This is the same Bug Report form converted from static `b-ui` markup to pure Owl
 
 ```base-ui
 <form b-ui="form">
-  <div class="baseui-form-header">
-    <h3 class="baseui-form-title">Bug Report</h3>
-    <p class="baseui-form-description">Help us improve by reporting bugs you encounter.</p>
+  <div class="bu-form-header">
+    <h3 class="bu-form-title">Bug Report</h3>
+    <p class="bu-form-description">Help us improve by reporting bugs you encounter.</p>
   </div>
 
-  <div b-field-group class="baseui-form-fields">
+  <div b-field-group class="bu-form-fields">
     <div b-ui="field">
       <label b-field-label for="bug-title">Bug Title</label>
       <input
@@ -177,7 +177,7 @@ This is the same Bug Report form converted from static `b-ui` markup to pure Owl
 
     <div b-ui="field">
       <label b-field-label for="bug-description">Description</label>
-      <div class="baseui-form-input-group" data-slot="input-group" role="group">
+      <div class="bu-form-input-group" data-slot="input-group" role="group">
         <textarea
           b-ui="textarea"
           id="bug-description"
@@ -186,7 +186,7 @@ This is the same Bug Report form converted from static `b-ui` markup to pure Owl
           maxlength="100"
           rows="6"
         ></textarea>
-        <div class="baseui-form-counter" data-slot="input-group-addon" data-align="block-end">
+        <div class="bu-form-counter" data-slot="input-group-addon" data-align="block-end">
           <span b-form-counter>0/100 characters</span>
         </div>
       </div>
@@ -194,7 +194,7 @@ This is the same Bug Report form converted from static `b-ui` markup to pure Owl
     </div>
   </div>
 
-  <div b-ui="field" b-att-orientation="horizontal" class="baseui-form-actions">
+  <div b-ui="field" b-att-orientation="horizontal" class="bu-form-actions">
     <button b-ui="button" b-att-variant="outline" b-form-reset type="button">Reset</button>
     <button b-ui="button" type="submit">Submit</button>
   </div>

package/docs/components/input-otp.md

@@ -52,7 +52,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/input.md

@@ -61,7 +61,7 @@ Input does not emit custom BaseUI events. Use native `input` and `change` events
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-input`, `--baseui-border`, `--baseui-ring`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-input`, `--b-border`, `--b-ring`, and `--b-radius`.
 
 ## Browser support
 

package/docs/components/markdown.md

@@ -101,7 +101,7 @@ A fenced ` ```base-ui ` block renders as a live component, not a code sample:
 - `b-att-base-ui` / `baseUi` — set to `"false"` to skip live-mounting fenced ` ```base-ui ` blocks; they render as plain code instead (defaults to enabled).
 - `b-att-editable` / `editable` — set to `"true"` to mount Milkdown instead of read-only rendered HTML.
 - `b-att-collaborative` / `collaborative` — set to `"true"` to connect the editor through Yjs + y-webrtc.
-- `b-att-room` / `room` — y-webrtc room name for collaborative sessions (defaults to `baseui-markdown`).
+- `b-att-room` / `room` — y-webrtc room name for collaborative sessions (defaults to `bu-markdown`).
 - `b-att-password` / `password` — optional y-webrtc room password.
 - `b-att-signaling` / `signaling` — comma-separated signaling URLs for the static API, or an array prop for Owl.
 

package/docs/components/message-scroller.md

@@ -74,7 +74,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/message.md

@@ -67,7 +67,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/popover.md

@@ -69,7 +69,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`. The popup itself is styled by Bootstrap's own bundled `.popover`/`.popover-arrow`/`.popover-body` CSS (loaded via `dist/baseui.min.css`), not BaseUI's own classes.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`. The popup itself is styled by Bootstrap's own bundled `.popover`/`.popover-arrow`/`.popover-body` CSS (loaded via `dist/baseui.min.css`), not BaseUI's own classes.
 
 ## Accessibility behavior
 

package/docs/components/pwa.md

@@ -69,7 +69,7 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
   <div b-pwa-panel>
     <h2>Install Base Hub</h2>
     <p>Install this app from your browser prompt so you can launch it like an app.</p>
-    <div class="baseui-pwa-footer">
+    <div class="bu-pwa-footer">
       <button b-pwa-close type="button">Later</button>
       <button type="button">Install</button>
     </div>

package/docs/components/questionnaire.md

@@ -109,7 +109,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/resizable.md

@@ -65,7 +65,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/scroll-area.md

@@ -69,7 +69,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/shell.md

@@ -35,7 +35,7 @@ import { SidebarClose, SidebarTrigger } from "@thebase/ui";
   <ShellMain>
     <ShellHeader>
       <SidebarTrigger>Menu</SidebarTrigger>
-      <div class="baseui-shell-header-spacer"/>
+      <div class="bu-shell-header-spacer"/>
       <ShellUserMenu/>
     </ShellHeader>
     <ShellContent loading="state.loading">Routed page content</ShellContent>
@@ -48,7 +48,7 @@ import { SidebarClose, SidebarTrigger } from "@thebase/ui";
 Four cross-cutting concerns are opt-in via props instead of baked into the layout:
 
 - `authState` — an arbitrary object (e.g. `{ username, onLogout }`), exposed to descendants via `env.shell.authState`. `ShellUserMenu` reads it directly and renders nothing when it's absent; pass its own default slot to fully customize the markup instead of the built-in username/logout row.
-- `toast`/`onToastOpenChange` — when `toast` is set (`{ variant, message, delay, persistent, actionLabel, onAction }`), `Shell` renders a built-in `Toast` bound to it, positioned as a fixed top-right overlay (`.baseui-shell-toast`) so it survives regardless of where `ShellContent` scrolls. Useful for a single app-wide notification channel (e.g. a message-bus toast) that should outlive route changes.
+- `toast`/`onToastOpenChange` — when `toast` is set (`{ variant, message, delay, persistent, actionLabel, onAction }`), `Shell` renders a built-in `Toast` bound to it, positioned as a fixed top-right overlay (`.bu-shell-toast`) so it survives regardless of where `ShellContent` scrolls. Useful for a single app-wide notification channel (e.g. a message-bus toast) that should outlive route changes.
 - `notificationPage`/`pwa` — each an Owl component class, mounted once at the shell root (`<t t-component="..."/>`) alongside the sidebar, same shape as a consumer app's own `PWAInstallDrawer`. `Shell` doesn't know or care what they render — they're expected to manage their own trigger/visibility.
 
 | Component | Prop | Type | Notes |