bitboss-ui 3.0.0-beta.21 → 3.0.0-beta.22

package/dist/ai/BbTree.md

@@ -68,20 +68,14 @@ normally:
 ```vue
 <template>
 	<div
-		class="w-full max-w-xs overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="w-full max-w-xs overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
 		<div
-			class="flex items-center gap-1.5 border-b border-[color:var(--bb-border)] px-2.5 py-1.5"
+			class="flex items-center gap-1.5 border-b border-(--bb-border) px-2.5 py-1.5"
 		>
-			<BbIcon
-				class="text-[color:var(--bb-text-muted)]"
-				icon="lucide:users"
-				size="sm"
-			/>
+			<BbIcon class="text-(--bb-text-muted)" icon="lucide:users" size="sm" />
 			<span class="text-xs font-medium">People</span>
-			<span class="ml-auto text-xs text-[color:var(--bb-text-muted)]"
-				>Acme Studio</span
-			>
+			<span class="ml-auto text-xs text-(--bb-text-muted)">Acme Studio</span>
 		</div>
 
 		<BbTree
@@ -96,12 +90,12 @@ normally:
 				<button
 					v-if="expandable"
 					:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.name}`"
-					class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm font-medium hover:bg-[color:var(--bb-surface-hover)]"
+					class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm font-medium hover:bg-(--bb-surface-hover)"
 					type="button"
 					v-bind="expandProps"
 				>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="expanded ? 'lucide:chevron-down' : 'lucide:chevron-right'"
 						size="sm"
 					/>
@@ -114,7 +108,7 @@ normally:
 				     expanded with no toggle, so it reads as a pinned section. -->
 				<span
 					v-else-if="item.children?.length"
-					class="flex items-center gap-1.5 px-1.5 py-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="flex items-center gap-1.5 px-1.5 py-1 text-xs font-semibold tracking-wide text-(--bb-text-muted) uppercase"
 				>
 					{{ meta.name }}
 				</span>
@@ -124,7 +118,7 @@ normally:
 						{{ initials(meta.name) }}
 					</BbAvatar>
 					<span class="min-w-0 truncate font-medium">{{ meta.name }}</span>
-					<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]">{{
+					<span class="shrink-0 text-xs text-(--bb-text-muted)">{{
 						meta.role
 					}}</span>
 				</span>
@@ -222,20 +216,14 @@ as plain rows.
 ```vue
 <template>
 	<div
-		class="w-full max-w-xs overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="w-full max-w-xs overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
 		<div
-			class="flex items-center gap-1.5 border-b border-[color:var(--bb-border)] px-2.5 py-1.5"
+			class="flex items-center gap-1.5 border-b border-(--bb-border) px-2.5 py-1.5"
 		>
-			<BbIcon
-				class="text-[color:var(--bb-text-muted)]"
-				icon="lucide:files"
-				size="sm"
-			/>
+			<BbIcon class="text-(--bb-text-muted)" icon="lucide:files" size="sm" />
 			<span class="text-xs font-medium">Explorer</span>
-			<span class="ml-auto text-xs text-[color:var(--bb-text-muted)]"
-				>acme-web</span
-			>
+			<span class="ml-auto text-xs text-(--bb-text-muted)">acme-web</span>
 		</div>
 
 		<BbTree
@@ -249,17 +237,17 @@ as plain rows.
 				<button
 					v-if="expandable"
 					:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.name}`"
-					class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm hover:bg-[color:var(--bb-surface-hover)]"
+					class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm hover:bg-(--bb-surface-hover)"
 					type="button"
 					v-bind="expandProps"
 				>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="expanded ? 'lucide:chevron-down' : 'lucide:chevron-right'"
 						size="sm"
 					/>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="expanded ? 'lucide:folder-open' : 'lucide:folder'"
 						size="sm"
 					/>
@@ -267,16 +255,14 @@ as plain rows.
 				</button>
 				<span
 					v-else
-					class="flex items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 pl-[1.55rem] text-sm text-[color:var(--bb-text-muted)]"
+					class="flex items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 pl-[1.55rem] text-sm text-(--bb-text-muted)"
 				>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-faint)]"
+						class="shrink-0 text-(--bb-text-faint)"
 						icon="lucide:file"
 						size="sm"
 					/>
-					<span class="truncate text-[color:var(--bb-text)]">{{
-						meta.name
-					}}</span>
+					<span class="truncate text-(--bb-text)">{{ meta.name }}</span>
 				</span>
 			</template>
 		</BbTree>
@@ -364,7 +350,7 @@ or restore them on reload.
 
 		<BbTree
 			v-model:expanded-items="expandedSections"
-			class="rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-1.5"
+			class="rounded-(--bb-radius) border border-(--bb-border) p-1.5"
 			:expandable="(node) => !!node.children?.length"
 			item-value="id"
 			:items="sections"
@@ -374,7 +360,7 @@ or restore them on reload.
 				<button
 					v-if="expandable"
 					:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.label}`"
-					class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)] hover:bg-[color:var(--bb-surface-hover)]"
+					class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-xs font-semibold tracking-wide text-(--bb-text-muted) uppercase hover:bg-(--bb-surface-hover)"
 					type="button"
 					v-bind="expandProps"
 				>
@@ -471,7 +457,7 @@ useful for a custom layout or an inline empty state under one branch.
 ```vue
 <template>
 	<BbTree
-		class="w-full max-w-xs rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-1.5"
+		class="w-full max-w-xs rounded-(--bb-radius) border border-(--bb-border) p-1.5"
 		:expandable="(n) => !!n.children?.length"
 		item-value="id"
 		:items="pages"
@@ -481,7 +467,7 @@ useful for a custom layout or an inline empty state under one branch.
 		<template #0="{ meta, expanded, expandProps }">
 			<button
 				:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.label}`"
-				class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)] hover:bg-[color:var(--bb-surface-hover)]"
+				class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-xs font-semibold tracking-wide text-(--bb-text-muted) uppercase hover:bg-(--bb-surface-hover)"
 				type="button"
 				v-bind="expandProps"
 			>
@@ -498,7 +484,7 @@ useful for a custom layout or an inline empty state under one branch.
 		<template #trash="{ meta, expanded, expandProps }">
 			<button
 				:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.label}`"
-				class="knowledge-base-tree__trash flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm"
+				class="knowledge-base-tree__trash flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm"
 				type="button"
 				v-bind="expandProps"
 			>
@@ -514,13 +500,11 @@ useful for a custom layout or an inline empty state under one branch.
 				<li
 					v-for="page in item.children ?? []"
 					:key="page.meta.id"
-					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm text-[color:var(--bb-text-muted)] line-through"
+					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm text-(--bb-text-muted) line-through"
 				>
 					<BbIcon icon="lucide:file-x" size="sm" /> {{ page.meta.label }}
 				</li>
-				<li
-					class="px-1.5 pb-1 pl-[1.55rem] text-xs text-[color:var(--bb-text-muted)]"
-				>
+				<li class="px-1.5 pb-1 pl-[1.55rem] text-xs text-(--bb-text-muted)">
 					Deleted pages are removed for good after 30 days.
 				</li>
 			</ul>
@@ -529,10 +513,10 @@ useful for a custom layout or an inline empty state under one branch.
 		<!-- Default slot: every remaining node (the pages). -->
 		<template #default="{ meta }">
 			<span
-				class="flex items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 pl-[1.55rem] text-sm"
+				class="flex items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 pl-[1.55rem] text-sm"
 			>
 				<BbIcon
-					class="text-[color:var(--bb-text-faint)]"
+					class="text-(--bb-text-faint)"
 					icon="lucide:file-text"
 					size="sm"
 				/>
@@ -646,7 +630,7 @@ out of the box: collapsing is a smooth CSS grid-rows transition, not a remount.
 		},
 	]"
 	:expandable="(n) => !!n.children?.length"
-	class="max-w-xs rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-1.5"
+	class="max-w-xs rounded-(--bb-radius) border border-(--bb-border) p-1.5"
 	style="--indent:1.5rem; --gap:.375rem"
 >
 	<template #default="{ meta, expandable, expanded, expandProps }">
@@ -654,16 +638,16 @@ out of the box: collapsing is a smooth CSS grid-rows transition, not a remount.
 			v-if="expandable"
 			v-bind="expandProps"
 			type="button"
-			class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm font-medium hover:bg-[color:var(--bb-surface-hover)]"
+			class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm font-medium hover:bg-(--bb-surface-hover)"
 		>
 			<BbIcon
-				class="text-[color:var(--bb-text-muted)]"
+				class="text-(--bb-text-muted)"
 				:icon="expanded ? 'lucide:chevron-down' : 'lucide:chevron-right'"
 				size="sm"
 			/>
 			{{ meta.name }}
 		</button>
-		<span v-else class="px-1.5 py-0.5 text-sm text-[color:var(--bb-text-muted)]">{{ meta.name }}</span>
+		<span v-else class="px-1.5 py-0.5 text-sm text-(--bb-text-muted)">{{ meta.name }}</span>
 	</template>
 </BbTree>
 ```
@@ -682,7 +666,7 @@ scoped under a wrapper class so it stays local.
 ```vue
 <template>
 	<BbTree
-		class="connector-tree w-full max-w-xs rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-1.5"
+		class="connector-tree w-full max-w-xs rounded-(--bb-radius) border border-(--bb-border) p-1.5"
 		:expandable="(node) => !!node.children?.length"
 		item-value="path"
 		:items="items"
@@ -691,12 +675,12 @@ scoped under a wrapper class so it stays local.
 			<button
 				v-if="expandable"
 				:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.name}`"
-				class="flex items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-sm hover:bg-[color:var(--bb-surface-hover)]"
+				class="flex items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-sm hover:bg-(--bb-surface-hover)"
 				type="button"
 				v-bind="expandProps"
 			>
 				<BbIcon
-					class="shrink-0 text-[color:var(--bb-text-muted)]"
+					class="shrink-0 text-(--bb-text-muted)"
 					:icon="expanded ? 'lucide:folder-open' : 'lucide:folder'"
 					size="sm"
 				/>
@@ -704,14 +688,14 @@ scoped under a wrapper class so it stays local.
 			</button>
 			<span
 				v-else
-				class="flex items-center gap-1.5 px-1.5 py-0.5 text-sm text-[color:var(--bb-text-muted)]"
+				class="flex items-center gap-1.5 px-1.5 py-0.5 text-sm text-(--bb-text-muted)"
 			>
 				<BbIcon
-					class="shrink-0 text-[color:var(--bb-text-faint)]"
+					class="shrink-0 text-(--bb-text-faint)"
 					icon="lucide:file"
 					size="sm"
 				/>
-				<span class="text-[color:var(--bb-text)]">{{ meta.name }}</span>
+				<span class="text-(--bb-text)">{{ meta.name }}</span>
 			</span>
 		</template>
 	</BbTree>
@@ -829,20 +813,14 @@ fetch and swap its children.
 ```vue
 <template>
 	<div
-		class="w-full max-w-xs overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="w-full max-w-xs overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
 		<div
-			class="flex items-center gap-1.5 border-b border-[color:var(--bb-border)] px-2.5 py-1.5"
+			class="flex items-center gap-1.5 border-b border-(--bb-border) px-2.5 py-1.5"
 		>
-			<BbIcon
-				class="text-[color:var(--bb-text-muted)]"
-				icon="lucide:cloud"
-				size="sm"
-			/>
+			<BbIcon class="text-(--bb-text-muted)" icon="lucide:cloud" size="sm" />
 			<span class="text-xs font-medium">Remote files</span>
-			<span class="ml-auto text-xs text-[color:var(--bb-text-muted)]"
-				>lazy load</span
-			>
+			<span class="ml-auto text-xs text-(--bb-text-muted)">lazy load</span>
 		</div>
 
 		<BbTree
@@ -857,17 +835,17 @@ fetch and swap its children.
 				<button
 					v-if="expandable"
 					:aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${meta.label}`"
-					class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm hover:bg-[color:var(--bb-surface-hover)]"
+					class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm hover:bg-(--bb-surface-hover)"
 					type="button"
 					v-bind="expandProps"
 				>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="isOpen ? 'lucide:chevron-down' : 'lucide:chevron-right'"
 						size="sm"
 					/>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="isOpen ? 'lucide:folder-open' : 'lucide:folder'"
 						size="sm"
 					/>
@@ -875,7 +853,7 @@ fetch and swap its children.
 				</button>
 				<span
 					v-else-if="meta.loading"
-					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm text-[color:var(--bb-text-muted)]"
+					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm text-(--bb-text-muted)"
 				>
 					<BbSpinner size="xs" /> Loading…
 				</span>
@@ -883,11 +861,7 @@ fetch and swap its children.
 					v-else
 					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm"
 				>
-					<BbIcon
-						class="text-[color:var(--bb-text-faint)]"
-						icon="lucide:file"
-						size="sm"
-					/>
+					<BbIcon class="text-(--bb-text-faint)" icon="lucide:file" size="sm" />
 					{{ meta.label }}
 				</span>
 			</template>