@brillout/docpress 0.16.39 → 0.16.41

package/code-blocks/components/ChoiceGroup.css

@@ -49,6 +49,28 @@
     transition: background 120ms ease;
   }
 
+  .choice-select__option-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .choice-select__option img {
+    width: 14px;
+    height: 14px;
+
+    filter: grayscale(100%);
+    opacity: 0.8;
+    --transition: 500ms ease;
+    transition: filter var(--transition), opacity var(--transition);
+  }
+
+  .choice-select:hover .choice-select__option img,
+  .choice-select[aria-expanded='true'] .choice-select__option img {
+    filter: grayscale(0%);
+    opacity: 1;
+  }
+
   .choice-select[aria-expanded='false'] {
     overflow: hidden;
     border-width: 1px 2px 2px 1px;

package/code-blocks/components/ChoiceGroup.tsx

@@ -1,33 +1,14 @@
 export { ChoiceGroup, CustomSelectsContainer }
 
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import type { ChoiceGroup as TChoiceGroup, ChoiceGroupWithParent } from '../types.js'
+import React, { createContext, useContext, useState } from 'react'
+import { usePageContext } from '../../renderer/usePageContext.js'
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js'
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
 import { cls } from '../../utils/cls.js'
 import './ChoiceGroup.css'
 
-type TChoiceGroup = {
-  name: string
-  choices: string[]
-  emptyChoices: string[]
-  default: string
-  hidden: boolean
-  lvl: number
-}
-
-type ParentChoiceGroup = {
-  name: string
-  default: string
-}
-
-type ChoiceGroupWithParent = TChoiceGroup & { parentChoiceGroup?: ParentChoiceGroup & { choices: string[] } }
-
-type ContextType = {
-  choiceGroupAll: ChoiceGroupWithParent[]
-  registerChoiceGroup: (choiceGroup: TChoiceGroup, parentChoiceGroup?: ParentChoiceGroup & { choice: string }) => void
-}
-
-const CustomSelectsContainerContext = createContext<ContextType | undefined>(undefined)
+const CustomSelectsContainerContext = createContext<{ choiceGroupAll: ChoiceGroupWithParent[] } | undefined>(undefined)
 
 function useCustomSelectsContext() {
   const ctx = useContext(CustomSelectsContainerContext)
@@ -35,75 +16,24 @@ function useCustomSelectsContext() {
   return ctx
 }
 
-function CustomSelectsContainer({ children }: { children: React.ReactNode }) {
-  const [choiceGroupAll, setChoiceGroupAll] = useState<ChoiceGroupWithParent[]>([])
-
-  function registerChoiceGroup(choiceGroup: TChoiceGroup, parentChoiceGroup?: ParentChoiceGroup & { choice: string }) {
-    setChoiceGroupAll((prev) => {
-      const index = prev.findIndex((g) => g.name === choiceGroup.name)
-      const existing = prev[index]
-
-      if (!existing) {
-        return [
-          ...prev,
-          {
-            ...choiceGroup,
-            ...(parentChoiceGroup && {
-              parentChoiceGroup: {
-                ...parentChoiceGroup,
-                choices: !choiceGroup.hidden ? [parentChoiceGroup.choice] : [],
-              },
-            }),
-          },
-        ]
-      }
-
-      if (!parentChoiceGroup || !existing.parentChoiceGroup) return prev
-
-      const existingChoices = existing.parentChoiceGroup.choices
-      if (!choiceGroup.hidden) existing.parentChoiceGroup.choices.push(parentChoiceGroup.choice)
-
-      const mergedChoices = new Set([...existing.parentChoiceGroup.choices])
-      if (mergedChoices.size === existingChoices.length) return prev
-
-      const next = [...prev]
-      next[index] = {
-        ...existing,
-        parentChoiceGroup: {
-          ...existing.parentChoiceGroup,
-          choices: [...mergedChoices],
-        },
-      }
-      return next
-    })
-  }
-
-  return (
-    <CustomSelectsContainerContext.Provider value={{ choiceGroupAll, registerChoiceGroup }}>
-      {children}
-    </CustomSelectsContainerContext.Provider>
-  )
-}
-
-type ChoiceGroupProps = {
-  children: React.ReactNode
-  choiceGroup: TChoiceGroup
-  parentChoiceGroup?: ParentChoiceGroup & { choice: string }
+function CustomSelectsContainer({
+  children,
+  choiceGroupAll,
+}: { children: React.ReactNode; choiceGroupAll: ChoiceGroupWithParent[] }) {
+  return <CustomSelectsContainerContext value={{ choiceGroupAll }}>{children}</CustomSelectsContainerContext>
 }
 
-function ChoiceGroup({ children, choiceGroup, parentChoiceGroup }: ChoiceGroupProps) {
+function ChoiceGroup({ children, choiceGroup }: { children: React.ReactNode; choiceGroup: TChoiceGroup }) {
   const { name: groupName, choices, default: defaultChoice, lvl } = choiceGroup
   const [selectedChoice] = useCurrentSelection(groupName, defaultChoice)
-  const { choiceGroupAll, registerChoiceGroup } = useCustomSelectsContext()
-
-  useEffect(() => registerChoiceGroup(choiceGroup, parentChoiceGroup), [])
+  const { choiceGroupAll } = useCustomSelectsContext()
 
   return (
     <div data-choice-group={groupName} data-lvl={lvl} className="choice-group">
       {/* Hidden select used to control choice visibility via CSS */}
       <select name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
-        {choices.map((choice, i) => (
-          <option key={i} value={choice}>
+        {choices.map(({ name: choice }) => (
+          <option key={choice} value={choice}>
             {choice}
           </option>
         ))}
@@ -111,49 +41,38 @@ function ChoiceGroup({ children, choiceGroup, parentChoiceGroup }: ChoiceGroupPr
       {children}
       {lvl === 0 && !choiceGroup.hidden && (
         <div className={`choice-group__selects`}>
-          {choiceGroupAll
-            .slice()
-            .sort((a, b) => a.lvl - b.lvl)
-            .map((choiceGroup, i) => (
-              <CustomSelect key={i} choiceGroup={choiceGroup} />
-            ))}
+          {choiceGroupAll.map((choiceGroup) => (
+            <CustomSelect key={choiceGroup.name} choiceGroup={choiceGroup} />
+          ))}
         </div>
       )}
     </div>
   )
 }
 
+const OPTION_HEIGHT = 25
 function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
-  const { name: groupName, choices, emptyChoices, default: defaultChoice, hidden, parentChoiceGroup } = choiceGroup
+  const choicesAll = usePageContext().config.docpress.choices
+  const { name: groupName, emptyChoices, default: defaultChoice, hidden, parentChoiceGroup, isBuiltIn } = choiceGroup
   const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
-  const setPrevPosition = useRestoreScroll([selectedChoice])
   const [expanded, setExpanded] = useState(false)
+  const [parentSelectedChoice] = useCurrentSelection(parentChoiceGroup?.name || '', parentChoiceGroup?.default || '')
+  const setPrevPosition = useRestoreScroll([selectedChoice])
 
+  const { choices } = isBuiltIn ? choiceGroup : choicesAll![groupName]!
+  const isHidden = parentChoiceGroup ? !parentChoiceGroup.choices.includes(parentSelectedChoice) : hidden
   const isEmptyChoice = (choice: string) => emptyChoices.includes(choice)
-  const filteredChoices = choices.filter((choice) => !isEmptyChoice(choice))
-  const selectedIndex = filteredChoices.indexOf(selectedChoice)
-  const height = 25
-  const rectTop = -selectedIndex * height
-
-  function next() {
-    const nextIndex = (selectedIndex + 1) % filteredChoices.length
-    setSelectedChoice(filteredChoices[nextIndex]!)
-  }
-  function isHidden() {
-    if (parentChoiceGroup) {
-      const [parentSelectedChoice] = useCurrentSelection(parentChoiceGroup.name, parentChoiceGroup.default)
-      return !parentChoiceGroup.choices.includes(parentSelectedChoice)
-    }
-    return hidden
-  }
+  const filteredChoices = choices.filter((choice) => !isEmptyChoice(choice.name))
+  const selectedIndex = filteredChoices.findIndex((choice) => choice.name === selectedChoice)
+  const rectTop = -selectedIndex * OPTION_HEIGHT
 
   return (
     <div
       id={`choicesFor-${groupName}`}
       aria-haspopup="listbox"
       aria-expanded={expanded}
-      className={cls(['choice-select', (isHidden() || isEmptyChoice(selectedChoice)) && 'hidden'])}
-      style={{ height }}
+      className={cls(['choice-select', (isHidden || isEmptyChoice(selectedChoice)) && 'hidden'])}
+      style={{ height: OPTION_HEIGHT }}
       onMouseEnter={() => setExpanded(true)}
       onMouseLeave={() => setExpanded(false)}
       onClick={() => {
@@ -164,32 +83,40 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
         aria-activedescendant={`choice-${selectedChoice}`}
         role="listbox"
         className="choice-select__list"
-        style={{ top: rectTop, height: filteredChoices.length * height }}
+        style={{ top: rectTop, height: filteredChoices.length * OPTION_HEIGHT }}
       >
-        {filteredChoices.map((choice, i) => (
+        {filteredChoices.map(({ name: choice, icon, iconStyle }, i) => (
           <div
-            id={choice}
-            key={i}
+            id={`choice-${choice}`}
+            key={choice}
             aria-selected={i === selectedIndex}
             role="option"
             className="choice-select__option"
-            style={{ height }}
-            onClick={handleOnClick}
+            style={{ height: OPTION_HEIGHT }}
+            onClick={(e) => handleOnClick(e, choice)}
           >
-            {choice}
+            <span className="choice-select__option-content">
+              <img src={icon} alt="" aria-hidden="true" style={iconStyle} />
+              {choice}
+            </span>
           </div>
         ))}
       </div>
     </div>
   )
-  function handleOnClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+
+  function next() {
+    const nextIndex = (selectedIndex + 1) % filteredChoices.length
+    setSelectedChoice(filteredChoices[nextIndex]!.name)
+  }
+  function handleOnClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>, choice: string) {
     e.stopPropagation()
     const el = e.currentTarget
     setPrevPosition(el)
     if (el.getAttribute('aria-selected') === 'true') {
       next()
     } else {
-      setSelectedChoice(el.id)
+      setSelectedChoice(choice)
     }
   }
 }

package/code-blocks/components/Tabs.css

@@ -11,6 +11,7 @@
   select:has(option:nth-of-type(7):checked) ~ ul[role='tablist'] li:nth-of-type(7) {
     border-bottom: 2px solid #aaa;
     color: var(--color-text);
+    font-weight: 600;
   }
 }
 
@@ -32,6 +33,17 @@
   color: color-mix(in srgb, var(--color-text) 80%, white 20%);
 }
 
+.choice-tabs__tab-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.choice-tabs__tab img {
+  width: 14px;
+  height: 14px;
+}
+
 @media screen and (max-width: 400px) {
   .choice-tabs__tab {
     padding: 6px 4px;

package/code-blocks/components/Tabs.tsx

@@ -17,43 +17,45 @@ function Tabs({ choice, hide = [] }: { choice: string; hide: string[] }) {
   const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
   const setPrevPosition = useRestoreScroll([selectedChoice])
   const isHidden = (choice: string) => hide.includes(choice)
-  const filteredChoices = choices.filter((choice) => !isHidden(choice))
-  const selectedIndex = filteredChoices.indexOf(selectedChoice)
+  const filteredChoices = choices.filter((choice) => !isHidden(choice.name))
+  const selectedIndex = filteredChoices.findIndex((choice) => choice.name === selectedChoice)
 
   return (
     <div className="choice-tabs" data-choice-group={groupName}>
       {/* Hidden select used to control tablist styling via CSS. */}
       <select name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
-        {choices.map((choice, i) => (
-          <option key={i} value={choice}>
+        {choices.map(({ name: choice }) => (
+          <option key={choice} value={choice}>
             {choice}
           </option>
         ))}
       </select>
       <ul id={`choicesFor-${groupName}`} className="choice-tabs__tab-list" role="tablist">
-        {choices.map((choice, i) => (
+        {choices.map(({ name: choice, icon, iconStyle }, i) => (
           <li
-            key={i}
-            id={choice}
+            key={choice}
+            id={`tab-${choice}`}
             style={{ display: isHidden(choice) ? 'none' : undefined }}
             className="choice-tabs__tab"
             role="tab"
             aria-selected={i === selectedIndex}
             tabIndex={i === selectedIndex ? 0 : -1}
-            onClick={(e) => handleOnClick(e, i)}
+            onClick={(e) => handleOnClick(e, choice)}
             onKeyDown={handleOnKeyDown}
           >
-            {choice}
+            <span className="choice-tabs__tab-content">
+              <img src={icon} alt="" aria-hidden="true" style={iconStyle} />
+              {choice}
+            </span>
           </li>
         ))}
       </ul>
     </div>
   )
 
-  function handleOnClick(e: React.MouseEvent<HTMLLIElement, MouseEvent>, index: number) {
-    const el = e.currentTarget
-    setPrevPosition(el)
-    setSelectedChoice(choices[index]!)
+  function handleOnClick(e: React.MouseEvent<HTMLLIElement, MouseEvent>, choice: string) {
+    setPrevPosition(e.currentTarget)
+    setSelectedChoice(choice)
   }
 
   function handleOnKeyDown(e: React.KeyboardEvent<HTMLLIElement>) {
@@ -80,7 +82,7 @@ function Tabs({ choice, hide = [] }: { choice: string; hide: string[] }) {
     e.preventDefault()
     setPrevPosition(el)
     const nextChoice = filteredChoices[nextIndex]!
-    setSelectedChoice(nextChoice)
+    setSelectedChoice(nextChoice.name)
     const tabEl = el.parentElement?.parentElement as HTMLDivElement
 
     if (!isInViewport(tabEl)) tabEl.scrollIntoView({ block: 'start', behavior: 'smooth' })

package/code-blocks/remarkChoiceGroup.ts

@@ -1,14 +1,18 @@
 export { remarkChoiceGroup }
 
 import type { Root } from 'mdast'
+import type { Plugin, Transformer } from 'unified'
 import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
 import type { ChoiceNode } from './utils/generateChoiceGroupCode.js'
+import type { ChoiceGroup, ChoiceGroupWithParent, ParentChoiceGroup } from './types.js'
 import { visit } from 'unist-util-visit'
 import { parseMetaString } from './rehypeMetaToProps.js'
-import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js'
+import { generateChoiceGroupCode, expressionToAttribute } from './utils/generateChoiceGroupCode.js'
+import { remarkPkgManager } from './remarkPkgManager.js'
+import { remarkDetype } from './remarkDetype.js'
 
-function remarkChoiceGroup() {
-  return function (tree: Root) {
+const remarkChoiceGroup: Plugin<[], Root> = (): Transformer<Root> => {
+  return async (tree, file) => {
     visit(tree, (node) => {
       if (node.type === 'code') {
         if (!node.meta) return
@@ -74,6 +78,53 @@ function remarkChoiceGroup() {
 
       process()
     })
+
+    await remarkDetype.call(this)(tree, file)
+    remarkPkgManager.call(this)(tree, file)
+
+    visit(tree, 'mdxJsxFlowElement', (node) => {
+      if (node.name !== 'CustomSelectsContainer') return 'skip'
+
+      const choiceGroupAll: ChoiceGroupWithParent[] = []
+
+      visit(node, 'mdxJsxFlowElement', (child) => {
+        if (child.name !== 'ChoiceGroup') return
+
+        const choiceGroup = child.data?.customDataChoiceGroup
+        const parentChoiceGroup = child.data?.customDataParentChoiceGroup
+
+        if (!choiceGroup) return
+
+        const existing = choiceGroupAll.find((g) => g.name === choiceGroup.name)
+
+        // first occurrence
+        if (!existing) {
+          choiceGroupAll.push({
+            ...choiceGroup,
+            ...(parentChoiceGroup && {
+              parentChoiceGroup: {
+                name: parentChoiceGroup.name,
+                default: parentChoiceGroup.default,
+                choices: !choiceGroup.hidden ? [parentChoiceGroup.choice] : [],
+              },
+            }),
+          })
+
+          return
+        }
+
+        // merge parent choices
+        if (parentChoiceGroup && existing.parentChoiceGroup && !choiceGroup.hidden) {
+          existing.parentChoiceGroup.choices = [
+            ...new Set([...existing.parentChoiceGroup.choices, parentChoiceGroup.choice]),
+          ]
+        }
+      })
+
+      node.attributes.push(expressionToAttribute('choiceGroupAll', choiceGroupAll))
+
+      return 'skip'
+    })
   }
 }
 
@@ -104,10 +155,9 @@ declare module 'mdast' {
     customDataIsVisited?: boolean
     customDataChoice?: string
     customDataFilter?: string
-    customDataParentChoiceGroup?: {
-      name: string
+    customDataChoiceGroup?: ChoiceGroup
+    customDataParentChoiceGroup?: ParentChoiceGroup & {
       choice: string
-      default: string
       lvl: number
     }
   }

package/code-blocks/types.ts

@@ -0,0 +1,13 @@
+export type { ChoiceGroup, ChoiceGroupWithParent, ParentChoiceGroup }
+
+import type { Config } from '../types/Config.js'
+
+type ChoiceGroup = NonNullable<Config['choices']>[string] & {
+  name: string
+  emptyChoices: string[]
+  hidden: boolean
+  lvl: number
+  isBuiltIn?: boolean
+}
+type ParentChoiceGroup = { name: string; default: string }
+type ChoiceGroupWithParent = ChoiceGroup & { parentChoiceGroup?: ParentChoiceGroup & { choices: string[] } }

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -1,8 +1,10 @@
-export { generateChoiceGroupCode }
+export { generateChoiceGroupCode, expressionToAttribute }
 export type { ChoiceNode }
 
+import type { Config } from '../../types/Config.js'
+import type { ChoiceGroup } from '../types.js'
 import type { BlockContent, DefinitionContent, Parent } from 'mdast'
-import type { MdxJsxAttribute, MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
+import type { MdxJsxAttribute, MdxJsxFlowElement, MdxJsxFlowElementData } from 'mdast-util-mdx-jsx'
 import { getVikeConfig } from 'vike/plugin'
 import { assertUsage } from '../../utils/assert.js'
 import { valueToEstree } from 'estree-util-value-to-estree'
@@ -12,13 +14,39 @@ type ChoiceNode = {
   children: (BlockContent | DefinitionContent)[]
 }
 
-const CHOICES_BUILT_IN: Record<string, { choices: string[]; default: string }> = {
+// TODO: determine icon representation for CHOICES_BUILT_IN given lack of SVG/file import support
+// use SVG URLs for now
+const CHOICES_BUILT_IN: NonNullable<Config['choices']> = {
   codeLang: {
-    choices: ['JavaScript', 'TypeScript'],
+    choices: [
+      {
+        name: 'JavaScript',
+        icon: 'https://www.svgrepo.com/show/452045/js.svg',
+        iconStyle: { position: 'relative', top: -0.5 },
+      },
+      {
+        name: 'TypeScript',
+        icon: 'https://www.svgrepo.com/show/349540/typescript.svg',
+        iconStyle: { position: 'relative', top: -0.5 },
+      },
+    ],
     default: 'JavaScript',
   },
   pkgManager: {
-    choices: ['npm', 'pnpm', 'Bun', 'Yarn'],
+    choices: [
+      {
+        name: 'npm',
+        icon: 'https://www.svgrepo.com/show/452077/npm.svg',
+        iconStyle: { position: 'relative', top: 1.5 },
+      },
+      { name: 'pnpm', icon: 'https://www.svgrepo.com/show/373778/light-pnpm.svg' },
+      { name: 'Bun', icon: 'https://bun.com/logo.svg' },
+      {
+        name: 'Yarn',
+        icon: 'https://www.svgrepo.com/show/354588/yarn.svg',
+        iconStyle: { position: 'relative', top: -0.5 },
+      },
+    ],
     default: 'npm',
   },
 }
@@ -33,6 +61,22 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide
   const { choiceGroup, mergedChoiceNodes } = resolveChoiceGroupNodes(choiceNodes)
   const attributes: MdxJsxAttribute[] = []
   const children: MdxJsxFlowElement[] = []
+  let data: MdxJsxFlowElementData = {}
+
+  if (parent.data?.customDataParentChoiceGroup) {
+    const { lvl: parentLvl } = parent.data.customDataParentChoiceGroup
+    lvl = parentLvl + 1
+
+    data.customDataParentChoiceGroup = parent.data.customDataParentChoiceGroup
+    /*
+    // Keep the marker on the parent: a single choice can contain several toggleable code blocks
+    // (e.g. two TypeScript blocks, or a TypeScript block + an `npm` command). Each of them spawns
+    // its own nested choice group and must inherit the same parent level. Clearing the marker here
+    // would make every group after the first resolve to `lvl: 0`, wrapping it in its own
+    // `CustomSelectsContainer` — which then renders without `choiceGroupAll` and crashes.
+    parent.data = undefined
+    */
+  }
 
   for (const choiceNode of mergedChoiceNodes) {
     const choiceChildren: (BlockContent | DefinitionContent)[] = []
@@ -51,34 +95,36 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide
       ],
       children: choiceChildren,
       data: {
-        customDataParentChoiceGroup: {
-          name: choiceGroup.name,
-          choice: choiceNode.choiceValue,
-          default: choiceGroup.default,
-          lvl,
-        },
+        ...(!Object.keys(CHOICES_BUILT_IN).includes(choiceGroup.name) && {
+          customDataParentChoiceGroup: {
+            name: choiceGroup.name,
+            choice: choiceNode.choiceValue,
+            default: choiceGroup.default,
+            lvl,
+          },
+        }),
       },
     })
   }
 
-  if (parent.data?.customDataParentChoiceGroup) {
-    const { lvl: parentLvl, ...parentChoiceGroup } = parent.data.customDataParentChoiceGroup
-
-    attributes.push(expressionToAttribute('parentChoiceGroup', parentChoiceGroup))
-
-    lvl = parentLvl + 1
-    parent.data.customDataParentChoiceGroup = undefined
+  const choiceGroupAttr: ChoiceGroup = {
+    ...choiceGroup,
+    hidden: choiceNodes.length === 1 || hidden,
+    lvl,
+    isBuiltIn: Object.keys(CHOICES_BUILT_IN).includes(choiceGroup.name),
   }
 
-  attributes.push(
-    expressionToAttribute('choiceGroup', { ...choiceGroup, hidden: choiceNodes.length === 1 || hidden, lvl }),
-  )
+  attributes.push(expressionToAttribute('choiceGroup', choiceGroupAttr))
 
   const choiceGroupNode: MdxJsxFlowElement = {
     type: 'mdxJsxFlowElement',
     name: 'ChoiceGroup',
     attributes,
     children,
+    data: {
+      ...data,
+      customDataChoiceGroup: choiceGroupAttr,
+    },
   }
 
   if (lvl === 0) {
@@ -99,16 +145,17 @@ function resolveChoiceGroupNodes(choiceNodes: ChoiceNode[]) {
   const { choices: choicesConfig } = vikeConfig.config.docpress
   const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig }
 
-  const groupName = Object.keys(choicesAll).find((key) => {
-    // get only the values that exist in both choices and choicesAll[key].choices
-    const existsChoices = choicesAll[key]!.choices.filter((choice) => choices.includes(choice))
-    // if nothing exists, skip this key
-    if (existsChoices.length === 0) return false
-    return true
-  })
+  // Resolve to the group that defines ALL of the block's values. Matching a group that merely
+  // shares ANY value would mis-resolve a custom group that collides with a built-in on a single
+  // value — e.g. a `runtime` group [Node, Bun, Deno, Cloudflare] sharing `Bun` with `pkgManager`.
+  const groupName = Object.keys(choicesAll).find((key) =>
+    choices.every((choice) => choicesAll[key]!.choices.some(({ name }) => name === choice)),
+  )
   assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`)
 
-  const emptyChoices = choicesAll[groupName]!.choices.filter((choice) => !choices.includes(choice))
+  const emptyChoices = choicesAll[groupName]!.choices.filter((choice) => !choices.includes(choice.name)).map(
+    (choice) => choice.name,
+  )
 
   const choiceGroup = {
     name: groupName,
@@ -117,10 +164,10 @@ function resolveChoiceGroupNodes(choiceNodes: ChoiceNode[]) {
   }
 
   const mergedChoiceNodes: ChoiceNode[] = choiceGroup.choices.map((choice) => {
-    const node = choiceNodes.find((node) => node.choiceValue === choice)
+    const node = choiceNodes.find((node) => node.choiceValue === choice.name)
 
     return {
-      choiceValue: choice,
+      choiceValue: choice.name,
       children: node?.children ?? [],
     }
   })

package/dist/code-blocks/components/Tabs.js

@@ -14,15 +14,17 @@ function Tabs({ choice, hide = [] }) {
     const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice);
     const setPrevPosition = useRestoreScroll([selectedChoice]);
     const isHidden = (choice) => hide.includes(choice);
-    const filteredChoices = choices.filter((choice) => !isHidden(choice));
-    const selectedIndex = filteredChoices.indexOf(selectedChoice);
+    const filteredChoices = choices.filter((choice) => !isHidden(choice.name));
+    const selectedIndex = filteredChoices.findIndex((choice) => choice.name === selectedChoice);
     return (React.createElement("div", { className: "choice-tabs", "data-choice-group": groupName },
-        React.createElement("select", { name: `choicesFor-${groupName}`, value: selectedChoice, hidden: true, disabled: true }, choices.map((choice, i) => (React.createElement("option", { key: i, value: choice }, choice)))),
-        React.createElement("ul", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "tablist" }, choices.map((choice, i) => (React.createElement("li", { key: i, id: choice, style: { display: isHidden(choice) ? 'none' : undefined }, className: "choice-tabs__tab", role: "tab", "aria-selected": i === selectedIndex, tabIndex: i === selectedIndex ? 0 : -1, onClick: (e) => handleOnClick(e, i), onKeyDown: handleOnKeyDown }, choice))))));
-    function handleOnClick(e, index) {
-        const el = e.currentTarget;
-        setPrevPosition(el);
-        setSelectedChoice(choices[index]);
+        React.createElement("select", { name: `choicesFor-${groupName}`, value: selectedChoice, hidden: true, disabled: true }, choices.map(({ name: choice }) => (React.createElement("option", { key: choice, value: choice }, choice)))),
+        React.createElement("ul", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "tablist" }, choices.map(({ name: choice, icon, iconStyle }, i) => (React.createElement("li", { key: choice, id: `tab-${choice}`, style: { display: isHidden(choice) ? 'none' : undefined }, className: "choice-tabs__tab", role: "tab", "aria-selected": i === selectedIndex, tabIndex: i === selectedIndex ? 0 : -1, onClick: (e) => handleOnClick(e, choice), onKeyDown: handleOnKeyDown },
+            React.createElement("span", { className: "choice-tabs__tab-content" },
+                React.createElement("img", { src: icon, alt: "", "aria-hidden": "true", style: iconStyle }),
+                choice)))))));
+    function handleOnClick(e, choice) {
+        setPrevPosition(e.currentTarget);
+        setSelectedChoice(choice);
     }
     function handleOnKeyDown(e) {
         const el = e.currentTarget;
@@ -46,7 +48,7 @@ function Tabs({ choice, hide = [] }) {
         e.preventDefault();
         setPrevPosition(el);
         const nextChoice = filteredChoices[nextIndex];
-        setSelectedChoice(nextChoice);
+        setSelectedChoice(nextChoice.name);
         const tabEl = el.parentElement?.parentElement;
         if (!isInViewport(tabEl))
             tabEl.scrollIntoView({ block: 'start', behavior: 'smooth' });

package/dist/code-blocks/remarkChoiceGroup.d.ts

@@ -1,15 +1,16 @@
 export { remarkChoiceGroup };
 import type { Root } from 'mdast';
-declare function remarkChoiceGroup(): (tree: Root) => void;
+import type { Plugin } from 'unified';
+import type { ChoiceGroup, ParentChoiceGroup } from './types.js';
+declare const remarkChoiceGroup: Plugin<[], Root>;
 declare module 'mdast' {
     interface Data {
         customDataIsVisited?: boolean;
         customDataChoice?: string;
         customDataFilter?: string;
-        customDataParentChoiceGroup?: {
-            name: string;
+        customDataChoiceGroup?: ChoiceGroup;
+        customDataParentChoiceGroup?: ParentChoiceGroup & {
             choice: string;
-            default: string;
             lvl: number;
         };
     }

package/dist/code-blocks/remarkChoiceGroup.js

@@ -1,9 +1,11 @@
 export { remarkChoiceGroup };
 import { visit } from 'unist-util-visit';
 import { parseMetaString } from './rehypeMetaToProps.js';
-import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js';
-function remarkChoiceGroup() {
-    return function (tree) {
+import { generateChoiceGroupCode, expressionToAttribute } from './utils/generateChoiceGroupCode.js';
+import { remarkPkgManager } from './remarkPkgManager.js';
+import { remarkDetype } from './remarkDetype.js';
+const remarkChoiceGroup = () => {
+    return async (tree, file) => {
         visit(tree, (node) => {
             if (node.type === 'code') {
                 if (!node.meta)
@@ -62,8 +64,46 @@ function remarkChoiceGroup() {
             }
             process();
         });
+        await remarkDetype.call(this)(tree, file);
+        remarkPkgManager.call(this)(tree, file);
+        visit(tree, 'mdxJsxFlowElement', (node) => {
+            if (node.name !== 'CustomSelectsContainer')
+                return 'skip';
+            const choiceGroupAll = [];
+            visit(node, 'mdxJsxFlowElement', (child) => {
+                if (child.name !== 'ChoiceGroup')
+                    return;
+                const choiceGroup = child.data?.customDataChoiceGroup;
+                const parentChoiceGroup = child.data?.customDataParentChoiceGroup;
+                if (!choiceGroup)
+                    return;
+                const existing = choiceGroupAll.find((g) => g.name === choiceGroup.name);
+                // first occurrence
+                if (!existing) {
+                    choiceGroupAll.push({
+                        ...choiceGroup,
+                        ...(parentChoiceGroup && {
+                            parentChoiceGroup: {
+                                name: parentChoiceGroup.name,
+                                default: parentChoiceGroup.default,
+                                choices: !choiceGroup.hidden ? [parentChoiceGroup.choice] : [],
+                            },
+                        }),
+                    });
+                    return;
+                }
+                // merge parent choices
+                if (parentChoiceGroup && existing.parentChoiceGroup && !choiceGroup.hidden) {
+                    existing.parentChoiceGroup.choices = [
+                        ...new Set([...existing.parentChoiceGroup.choices, parentChoiceGroup.choice]),
+                    ];
+                }
+            });
+            node.attributes.push(expressionToAttribute('choiceGroupAll', choiceGroupAll));
+            return 'skip';
+        });
     };
-}
+};
 function filterChoices(nodes) {
     const filteredChoices = new Set();
     const filters = [...new Set(nodes.flat().map((node) => node.data.customDataFilter))];

package/dist/code-blocks/types.d.ts

@@ -0,0 +1,18 @@
+export type { ChoiceGroup, ChoiceGroupWithParent, ParentChoiceGroup };
+import type { Config } from '../types/Config.js';
+type ChoiceGroup = NonNullable<Config['choices']>[string] & {
+    name: string;
+    emptyChoices: string[];
+    hidden: boolean;
+    lvl: number;
+    isBuiltIn?: boolean;
+};
+type ParentChoiceGroup = {
+    name: string;
+    default: string;
+};
+type ChoiceGroupWithParent = ChoiceGroup & {
+    parentChoiceGroup?: ParentChoiceGroup & {
+        choices: string[];
+    };
+};

package/dist/code-blocks/types.js

@@ -0,0 +1 @@
+export {};

package/dist/code-blocks/utils/generateChoiceGroupCode.d.ts

@@ -1,9 +1,10 @@
-export { generateChoiceGroupCode };
+export { generateChoiceGroupCode, expressionToAttribute };
 export type { ChoiceNode };
 import type { BlockContent, DefinitionContent, Parent } from 'mdast';
-import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
+import type { MdxJsxAttribute, MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
 type ChoiceNode = {
     choiceValue: string;
     children: (BlockContent | DefinitionContent)[];
 };
 declare function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide?: boolean): MdxJsxFlowElement;
+declare function expressionToAttribute(name: string, value: unknown): MdxJsxAttribute;

package/dist/code-blocks/utils/generateChoiceGroupCode.js

@@ -1,14 +1,40 @@
-export { generateChoiceGroupCode };
+export { generateChoiceGroupCode, expressionToAttribute };
 import { getVikeConfig } from 'vike/plugin';
 import { assertUsage } from '../../utils/assert.js';
 import { valueToEstree } from 'estree-util-value-to-estree';
+// TODO: determine icon representation for CHOICES_BUILT_IN given lack of SVG/file import support
+// use SVG URLs for now
 const CHOICES_BUILT_IN = {
     codeLang: {
-        choices: ['JavaScript', 'TypeScript'],
+        choices: [
+            {
+                name: 'JavaScript',
+                icon: 'https://www.svgrepo.com/show/452045/js.svg',
+                iconStyle: { position: 'relative', top: -0.5 },
+            },
+            {
+                name: 'TypeScript',
+                icon: 'https://www.svgrepo.com/show/349540/typescript.svg',
+                iconStyle: { position: 'relative', top: -0.5 },
+            },
+        ],
         default: 'JavaScript',
     },
     pkgManager: {
-        choices: ['npm', 'pnpm', 'Bun', 'Yarn'],
+        choices: [
+            {
+                name: 'npm',
+                icon: 'https://www.svgrepo.com/show/452077/npm.svg',
+                iconStyle: { position: 'relative', top: 1.5 },
+            },
+            { name: 'pnpm', icon: 'https://www.svgrepo.com/show/373778/light-pnpm.svg' },
+            { name: 'Bun', icon: 'https://bun.com/logo.svg' },
+            {
+                name: 'Yarn',
+                icon: 'https://www.svgrepo.com/show/354588/yarn.svg',
+                iconStyle: { position: 'relative', top: -0.5 },
+            },
+        ],
         default: 'npm',
     },
 };
@@ -19,6 +45,20 @@ function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
     const { choiceGroup, mergedChoiceNodes } = resolveChoiceGroupNodes(choiceNodes);
     const attributes = [];
     const children = [];
+    let data = {};
+    if (parent.data?.customDataParentChoiceGroup) {
+        const { lvl: parentLvl } = parent.data.customDataParentChoiceGroup;
+        lvl = parentLvl + 1;
+        data.customDataParentChoiceGroup = parent.data.customDataParentChoiceGroup;
+        /*
+        // Keep the marker on the parent: a single choice can contain several toggleable code blocks
+        // (e.g. two TypeScript blocks, or a TypeScript block + an `npm` command). Each of them spawns
+        // its own nested choice group and must inherit the same parent level. Clearing the marker here
+        // would make every group after the first resolve to `lvl: 0`, wrapping it in its own
+        // `CustomSelectsContainer` — which then renders without `choiceGroupAll` and crashes.
+        parent.data = undefined
+        */
+    }
     for (const choiceNode of mergedChoiceNodes) {
         const choiceChildren = [];
         if (choiceNode.children.every((node) => node.type === 'containerDirective')) {
@@ -36,27 +76,33 @@ function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
             ],
             children: choiceChildren,
             data: {
-                customDataParentChoiceGroup: {
-                    name: choiceGroup.name,
-                    choice: choiceNode.choiceValue,
-                    default: choiceGroup.default,
-                    lvl,
-                },
+                ...(!Object.keys(CHOICES_BUILT_IN).includes(choiceGroup.name) && {
+                    customDataParentChoiceGroup: {
+                        name: choiceGroup.name,
+                        choice: choiceNode.choiceValue,
+                        default: choiceGroup.default,
+                        lvl,
+                    },
+                }),
             },
         });
     }
-    if (parent.data?.customDataParentChoiceGroup) {
-        const { lvl: parentLvl, ...parentChoiceGroup } = parent.data.customDataParentChoiceGroup;
-        attributes.push(expressionToAttribute('parentChoiceGroup', parentChoiceGroup));
-        lvl = parentLvl + 1;
-        parent.data.customDataParentChoiceGroup = undefined;
-    }
-    attributes.push(expressionToAttribute('choiceGroup', { ...choiceGroup, hidden: choiceNodes.length === 1 || hidden, lvl }));
+    const choiceGroupAttr = {
+        ...choiceGroup,
+        hidden: choiceNodes.length === 1 || hidden,
+        lvl,
+        isBuiltIn: Object.keys(CHOICES_BUILT_IN).includes(choiceGroup.name),
+    };
+    attributes.push(expressionToAttribute('choiceGroup', choiceGroupAttr));
     const choiceGroupNode = {
         type: 'mdxJsxFlowElement',
         name: 'ChoiceGroup',
         attributes,
         children,
+        data: {
+            ...data,
+            customDataChoiceGroup: choiceGroupAttr,
+        },
     };
     if (lvl === 0) {
         return {
@@ -73,25 +119,21 @@ function resolveChoiceGroupNodes(choiceNodes) {
     const choices = choiceNodes.map((choiceNode) => choiceNode.choiceValue);
     const { choices: choicesConfig } = vikeConfig.config.docpress;
     const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig };
-    const groupName = Object.keys(choicesAll).find((key) => {
-        // get only the values that exist in both choices and choicesAll[key].choices
-        const existsChoices = choicesAll[key].choices.filter((choice) => choices.includes(choice));
-        // if nothing exists, skip this key
-        if (existsChoices.length === 0)
-            return false;
-        return true;
-    });
+    // Resolve to the group that defines ALL of the block's values. Matching a group that merely
+    // shares ANY value would mis-resolve a custom group that collides with a built-in on a single
+    // value — e.g. a `runtime` group [Node, Bun, Deno, Cloudflare] sharing `Bun` with `pkgManager`.
+    const groupName = Object.keys(choicesAll).find((key) => choices.every((choice) => choicesAll[key].choices.some(({ name }) => name === choice)));
     assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`);
-    const emptyChoices = choicesAll[groupName].choices.filter((choice) => !choices.includes(choice));
+    const emptyChoices = choicesAll[groupName].choices.filter((choice) => !choices.includes(choice.name)).map((choice) => choice.name);
     const choiceGroup = {
         name: groupName,
         ...choicesAll[groupName],
         emptyChoices,
     };
     const mergedChoiceNodes = choiceGroup.choices.map((choice) => {
-        const node = choiceNodes.find((node) => node.choiceValue === choice);
+        const node = choiceNodes.find((node) => node.choiceValue === choice.name);
         return {
-            choiceValue: choice,
+            choiceValue: choice.name,
             children: node?.children ?? [],
         };
     });

package/dist/types/Config.d.ts

@@ -48,6 +48,10 @@ type Category = string | {
     hide?: boolean;
 };
 type Choice = {
-    choices: string[];
+    choices: {
+        name: string;
+        icon: string;
+        iconStyle?: React.CSSProperties;
+    }[];
     default: string;
 };

package/dist/vite.config.js

@@ -12,9 +12,7 @@ import { transformerNotationDiff, transformerNotationWordHighlight } from '@shik
 // https://github.com/shikijs/shiki/compare/main...brillout:shiki:brillout/highlight-color-param
 import { transformerNotationHighlight } from '@brillout/shiki-transformers';
 import { rehypeMetaToProps } from './code-blocks/rehypeMetaToProps.js';
-import { remarkDetype } from './code-blocks/remarkDetype.js';
 import { shikiTransformerAutoLinks } from './code-blocks/shikiTransformerAutoLinks.js';
-import { remarkPkgManager } from './code-blocks/remarkPkgManager.js';
 import { remarkChoiceGroup } from './code-blocks/remarkChoiceGroup.js';
 const root = process.cwd();
 const prettyCode = [
@@ -31,7 +29,7 @@ const prettyCode = [
     },
 ];
 const rehypePlugins = [prettyCode, [rehypeMetaToProps]];
-const remarkPlugins = [remarkGfm, remarkDirective, remarkChoiceGroup, remarkDetype, remarkPkgManager];
+const remarkPlugins = [remarkGfm, remarkDirective, remarkChoiceGroup];
 const config = {
     root,
     plugins: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.39",
+  "version": "0.16.41",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -62,6 +62,7 @@
     "@vitejs/plugin-react": "^6.0.1",
     "mdast-util-directive": "^3.1.0",
     "mdast-util-mdx-jsx": "^3.2.0",
+    "unified": "^11.0.5",
     "vike": "^0.4.255",
     "vite": "^8.0.8"
   },

package/types/Config.ts

@@ -63,6 +63,6 @@ type Category =
     }
 
 type Choice = {
-  choices: string[]
+  choices: { name: string; icon: string; iconStyle?: React.CSSProperties }[]
   default: string
 }

package/vite.config.ts

@@ -14,9 +14,7 @@ import { transformerNotationDiff, transformerNotationWordHighlight } from '@shik
 // https://github.com/shikijs/shiki/compare/main...brillout:shiki:brillout/highlight-color-param
 import { transformerNotationHighlight } from '@brillout/shiki-transformers'
 import { rehypeMetaToProps } from './code-blocks/rehypeMetaToProps.js'
-import { remarkDetype } from './code-blocks/remarkDetype.js'
 import { shikiTransformerAutoLinks } from './code-blocks/shikiTransformerAutoLinks.js'
-import { remarkPkgManager } from './code-blocks/remarkPkgManager.js'
 import { remarkChoiceGroup } from './code-blocks/remarkChoiceGroup.js'
 
 const root = process.cwd()
@@ -34,7 +32,7 @@ const prettyCode = [
   },
 ]
 const rehypePlugins: any = [prettyCode, [rehypeMetaToProps]]
-const remarkPlugins = [remarkGfm, remarkDirective, remarkChoiceGroup, remarkDetype, remarkPkgManager]
+const remarkPlugins = [remarkGfm, remarkDirective, remarkChoiceGroup]
 
 const config: UserConfig = {
   root,