@brillout/docpress 0.16.27 → 0.16.29

package/code-blocks/components/ChoiceGroup.css

@@ -2,29 +2,139 @@
   position: relative;
 
   &:hover {
-    .select-choice,
+    .select-container,
     .copy-button {
       opacity: 1;
     }
   }
 
   /* layout */
-  --select-width: 85px;
-  --select-top-position: 10px;
-  --select-right-base: 42px;
-  --select-gap: 2px;
+  --top-position: 10px;
+  --right-base: 42px;
+  --right-offset: 0px;
+  --border-color: hsl(0, 0%, 75%) hsl(0, 0%, 72%) hsl(0, 0%, 72%) hsl(0, 0%, 75%);
 
-  /* each select increments the level */
-  .select-choice {
+  .select-container {
     position: absolute;
+    background: #eee;
     z-index: 3;
-    height: 25px;
-    top: var(--select-top-position);
-    width: var(--select-width);
-    right: calc(var(--select-right-base) + (var(--lvl) * (var(--select-width) + var(--select-gap))));
+    font-size: 13.3333px;
+    top: var(--top-position);
+    right: calc(var(--right-base) + (var(--right-offset)));
+
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge legacy */
+    user-select: none; /* Standard */
+
+    border-radius: 5px;
+    border-style: solid;
+    border-color: var(--border-color);
 
     opacity: 0;
-    transition: opacity 0.5s ease-in-out, background-color 0.4s ease-in-out;
+    transition: opacity 0.5s ease-in-out;
+  }
+
+  .sliding-rectangle {
+    position: relative;
+    border-radius: 5px;
+    border-color: var(--border-color);
+    width: 100%;
+    overflow: hidden;
+    transition: top 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
+  }
+
+  .select-choice {
+    display: flex;
+    white-space: nowrap;
+    align-items: center;
+    flex-wrap: nowrap;
+    background: #fff;
+    padding: 0 3px 0 5px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: background 120ms ease;
+
+    span {
+      flex: 1;
+    }
+
+    &::after {
+      width: 15px;
+      text-align: end;
+      --animation-width: 2px;
+      position: relative;
+      padding-right: var(--animation-width);
+      padding-left: var(--animation-width);
+      font-size: 1.13em;
+      color: #666;
+      left: 0;
+      transition: left 500ms ease, opacity 150ms ease-in-out;
+      opacity: 0;
+    }
+    .sliding-rectangle:hover &:hover::after {
+      opacity: 1;
+    }
+    &[aria-selected='true'] {
+      &::after {
+        content: '»' !important;
+        opacity: 1;
+      }
+      .sliding-rectangle:hover &:not(:hover)::after {
+        opacity: 0;
+      }
+      &:hover::after {
+        left: var(--animation-width);
+      }
+    }
+    &[aria-disabled='true'] {
+      &::after {
+        content: '⊘';
+        font-size: 1em;
+        left: 1px;
+      }
+    }
+    &:not([aria-selected='true']):not([aria-disabled='true']) {
+      &::after {
+        content: '«';
+      }
+      &:hover::after {
+        left: calc(-1 * var(--animation-width));
+      }
+    }
+  }
+
+  .select-container[aria-expanded='false'] {
+    overflow: hidden;
+    border-width: 1px 2px 2px 1px;
+  }
+
+  .select-container[aria-expanded='true'] {
+    overflow: visible;
+    border-width: 0;
+
+    .sliding-rectangle {
+      border-style: solid;
+      border-width: 1px 2px 2px 1px;
+    }
+  }
+
+  .select-choice:last-child {
+    border-bottom: none;
+  }
+
+  .select-choice:hover {
+    background: #f5f5f5;
+  }
+
+  .select-choice[aria-selected='true'] {
+    background: #eee;
+  }
+
+  .select-choice[aria-disabled='true'] {
+    color: #999;
+    cursor: default;
+    opacity: 0.8;
   }
 
   .hidden {

package/code-blocks/components/ChoiceGroup.tsx

@@ -1,6 +1,6 @@
 export { ChoiceGroup }
 
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useSelectedChoice } from '../hooks/useSelectedChoice.js'
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
 import { cls } from '../../utils/cls.js'
@@ -18,32 +18,99 @@ function ChoiceGroup({
   choiceGroup,
   lvl,
   hide = false,
-}: { children: React.ReactNode; choiceGroup: TChoiceGroup; lvl: number; hide: boolean }) {
-  const [selectedChoice, setSelectedChoice] = useSelectedChoice(choiceGroup.name, choiceGroup.default)
+}: { children: React.ReactNode; choiceGroup: TChoiceGroup; lvl: string; hide: boolean }) {
+  const level = Number(lvl)
+  const { name: groupName, choices, default: defaultChoice, disabled: disabledChoices } = choiceGroup
+  // TODO/after-PR-merge rename useSelectedChoice useCurrentSelection
+  const [selectedChoice, setSelectedChoice] = useSelectedChoice(groupName, defaultChoice)
   const prevPositionRef = useRestoreScroll([selectedChoice])
+  const choiceGroupRef = useRef<HTMLDivElement>(null)
+  const [rightOffset, setRightOffset] = useState(0)
+
+  useEffect(() => {
+    if (level === 0 || !choiceGroupRef.current) return
+    const parentCustomSelect = choiceGroupRef.current.closest(`[data-lvl="${level - 1}"]`)!.lastElementChild!
+    const width = parentCustomSelect.getBoundingClientRect().width
+
+    setRightOffset(level * width + 2)
+  }, [])
+
+  const isDisabled = (choice: string) => disabledChoices.includes(choice)
+  const selectedIndex = choices.indexOf(selectedChoice)
+
+  const height = 25
+  const [expanded, setExpanded] = useState(false)
+  const rectTop = -selectedIndex * height
+
+  // Cycle to next option
+  const next = () => {
+    let nextIndex = selectedIndex
+
+    for (let i = 0; i < choices.length; i++) {
+      nextIndex = (nextIndex + 1) % choices.length
+      if (!isDisabled(choices[nextIndex]!)) {
+        setSelectedChoice(choices[nextIndex]!)
+        return
+      }
+    }
+  }
 
   return (
-    <div data-choice-group={choiceGroup.name} className="choice-group">
-      <select
-        name={`choicesFor-${choiceGroup.name}`}
-        value={selectedChoice}
-        onChange={onChange}
-        className={cls(['select-choice', hide && 'hidden'])}
-        style={{ '--lvl': lvl }}
-      >
+    <div ref={choiceGroupRef} data-choice-group={groupName} data-lvl={level} className="choice-group">
+      {/* Hidden select used to control choice visibility via CSS */}
+      <select name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
         {choiceGroup.choices.map((choice, i) => (
-          <option key={i} value={choice} disabled={choiceGroup.disabled.includes(choice)}>
+          <option key={i} value={choice}>
             {choice}
           </option>
         ))}
       </select>
       {children}
+      <div
+        id={`choicesFor-${groupName}`}
+        aria-haspopup="listbox"
+        aria-expanded={expanded}
+        className={cls(['select-container', (hide || isDisabled(selectedChoice)) && 'hidden'])}
+        style={{ height, '--right-offset': `${rightOffset}px` }}
+        onMouseEnter={() => setExpanded(true)}
+        onMouseLeave={() => setExpanded(false)}
+        onClick={() => {
+          if (!expanded) next()
+        }}
+      >
+        <div
+          aria-activedescendant={`choice-${selectedChoice}`}
+          role="listbox"
+          className="sliding-rectangle"
+          style={{ top: rectTop, height: choices.length * height }}
+        >
+          {choices.map((choice, i) => (
+            <div
+              id={choice}
+              key={i}
+              aria-selected={i === selectedIndex}
+              aria-disabled={isDisabled(choice)}
+              role="option"
+              className="select-choice"
+              style={{ height }}
+              onClick={handleOnClick}
+            >
+              <span>{choice}</span>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   )
 
-  function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
-    const el = e.target
+  function handleOnClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    e.stopPropagation()
+    const el = e.currentTarget
     prevPositionRef.current = { top: el.getBoundingClientRect().top, el }
-    setSelectedChoice(el.value)
+    if (el.ariaSelected === 'true') {
+      next()
+    } else if (el.ariaDisabled === 'false') {
+      setSelectedChoice(el.id)
+    }
   }
 }

package/code-blocks/hooks/useSelectedChoice.ts

@@ -25,7 +25,7 @@ function initializeChoiceGroup() {
     const storageKey = `docpress:choice:${choiceGroupName}`
     const selectedChoice = localStorage.getItem(storageKey)
     if (selectedChoice) {
-      const selectEl = groupEl.querySelector<HTMLSelectElement>(`.select-choice`)!
+      const selectEl = groupEl.querySelector<HTMLSelectElement>(`select[name="choicesFor-${choiceGroupName}"]`)!
       const selectedIndex = [...selectEl.options].findIndex((option) => option.value === selectedChoice)
       if (selectedIndex === -1) {
         localStorage.removeItem(storageKey)

package/dist/vite.config.js

@@ -1,6 +1,6 @@
 export { config as viteConfig };
 import mdx from '@mdx-js/rollup';
-import react from '@vitejs/plugin-react-swc';
+import react from '@vitejs/plugin-react';
 import { parsePageSections } from './parsePageSections.js';
 import rehypePrettyCode from 'rehype-pretty-code';
 import remarkGfm from 'remark-gfm';
@@ -37,7 +37,6 @@ const config = {
     plugins: [
         parsePageSections(),
         mdx({ rehypePlugins, remarkPlugins, providerImportSource: '@brillout/docpress' }),
-        // @vitejs/plugin-react-swc needs to be added *after* the mdx plugins
         react(),
     ],
     optimizeDeps: {

package/docsearch/DocSearchInstall.tsx

@@ -23,9 +23,6 @@ function DocSearchInstall() {
           hitsPerPage: 50,
         }}
         transformItems={(hits) => {
-          hits.map((hit) => {
-            if (hit.type === 'lvl1') hit.url = hit.url.split('#')[0]!
-          })
           hits.sort((a, b) => Number(a.url.includes('#')) - Number(b.url.includes('#')))
           return hits
         }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.27",
+  "version": "0.16.29",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -11,7 +11,7 @@
     "@mdx-js/react": "3.0.1",
     "@mdx-js/rollup": "3.0.1",
     "@shikijs/transformers": "^4.0.2",
-    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@vitejs/plugin-react": "^6.0.1",
     "detype": "^2.0.2",
     "estree-util-value-to-estree": "^3.5.0",
     "npm-to-yarn": "^3.0.1",
@@ -19,11 +19,10 @@
     "remark-directive": "^4.0.0",
     "remark-gfm": "4.0.0",
     "shiki": "1.2.0",
-    "unist-util-visit": "^5.0.0",
-    "vite": "^6.3.5"
+    "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@vitejs/plugin-react-swc": ">=3.0.0",
+    "@vitejs/plugin-react": ">=6.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "typescript": ">=5.0.0",
@@ -31,7 +30,7 @@
     "vite": ">=5.2.0"
   },
   "peerDependenciesMeta": {
-    "@vitejs/plugin-react-swc": {
+    "@vitejs/plugin-react": {
       "optional": true
     },
     "vite": {
@@ -71,7 +70,8 @@
     "@types/react-dom": "^19.2.2",
     "mdast-util-directive": "^3.1.0",
     "mdast-util-mdx-jsx": "^3.2.0",
-    "vike": "^0.4.255"
+    "vike": "^0.4.255",
+    "vite": "^8.0.8"
   },
   "repository": "https://github.com/brillout/docpress",
   "license": "MIT",

package/vite.config.ts

@@ -1,7 +1,7 @@
 export { config as viteConfig }
 
 import mdx from '@mdx-js/rollup'
-import react from '@vitejs/plugin-react-swc'
+import react from '@vitejs/plugin-react'
 import type { PluginOption, UserConfig } from 'vite'
 import { parsePageSections } from './parsePageSections.js'
 import rehypePrettyCode from 'rehype-pretty-code'
@@ -41,7 +41,6 @@ const config: UserConfig = {
   plugins: [
     parsePageSections(),
     mdx({ rehypePlugins, remarkPlugins, providerImportSource: '@brillout/docpress' }) as PluginOption,
-    // @vitejs/plugin-react-swc needs to be added *after* the mdx plugins
     react(),
   ],
   optimizeDeps: {

package/AGENTS.md

@@ -1,30 +0,0 @@
-🚨 STOP: Before responding to ANY message, you MUST complete STEP 1 below. No exceptions - even for simple questions like "1+1".
-
-@AI: Read and always respect all instructions in all AGENTS.md files. Treat this context as always up-to-date — it's never out of scope, no matter how much other context you have.
-
-List of `AGENTS.md` files:
-1. This file (project preferences)
-2. `~/.config/AGENTS.md` (user preferences)
-
-# CRITICAL AGENT INSTRUCTIONS - MUST FOLLOW
-
-## What is "ANY agentic session"?
-- User asks a question (even "1+1" or simple queries)
-- User requests a code change
-- User asks for information
-- Session resumes after idle time
-- First interaction in a conversation
-- EVERYTHING counts - no exceptions
-
-## STEP 1: ALWAYS START HERE (BEFORE ANY TASK)
-**MANDATORY:** When starting ANY agentic session, you MUST:
-1. Read both AGENTS.md files (this file + ~/.config/AGENTS.md)
-2. Say "I've successfully read [list-of-AGENTS.md-files]"
-3. List ALL instructions from both files
-4. Confirm: "✅ AGENTS.md check complete, proceeding with: [brief task description]"
-5. Then proceed with the task
-
-## STEP 2: AFTER MAKING CHANGES
-**MANDATORY:** After completing a task and if you made changes:
-1. Run `$ pnpm run -w format`
-2. Follow user preferences from ~/.config/AGENTS.md for commits and notifications