# Oxide UI -- Project Handoff v6
# Pure ASCII. Fetch this file to restore full session context.
# URL: https://oxide-ui.dev/handoff.txt

================================================================
RESUME PROMPT
================================================================

  I'm continuing development of Oxide UI. Please fetch:
  https://oxide-ui.dev/handoff.txt
  Confirm current state and ask what to work on next.

Before first Cloudflare Pages deploy: paste HANDOFF.md instead.

================================================================
PROJECT IDENTITY
================================================================

Name:        Oxide UI
Type:        Tailwind CSS component library + VitePress docs site
Goal:        Dark-mode Preline.co equivalent for Nuxt projects
Framework:   Nuxt 3 / Vue 3 ONLY. No React. No vanilla HTML.
Mode:        Dark ONLY. Never add light mode.
Accent:      #D40C37 (crimson)
Background:  #09090b (zinc-950)
Surface:     #18181b (zinc-900)
Border:      #27272a (zinc-800)
Text:        #f4f4f5 (zinc-100) / #a1a1aa (zinc-400)
Hosting:     Cloudflare Pages (static)
Docs:        VitePress 1.x
Version:     v0.1.0
Git:         main branch

================================================================
FONT STACK
================================================================

Display/headings:  Syne (400, 700, 800)
Body:              DM Sans (300, 400, 500, 600)
Code:              JetBrains Mono (400, 500)
Loaded via Google Fonts link in .vitepress/config.mts head array.

================================================================
REAL-WORLD CONTEXT
================================================================

Owner runs a multi-app hosting website.
Current live apps:
  1. YouTube Thumbnail Downloader (paste URL -> download HD/SD thumbnails)
  2. YouTube Channel Stats (paste channel URL -> stats, download banner/avatar)
More apps planned. Oxide UI is the component system for the whole site.

================================================================
INTERACTION LAYER -- RULES
================================================================

Headless UI v1 (Vue) is THE interaction layer. NON-NEGOTIABLE.
Install: npm install @headlessui/vue

HUI component -> Oxide UI page
  Dialog       -> Modal, Drawer
  Menu         -> Dropdown
  Listbox      -> Select
  Combobox     -> Select (Combobox section), Command Palette
  Switch       -> Toggle
  Disclosure   -> Accordion, Navbar (mobile menu)
  Popover      -> Popover
  RadioGroup   -> Radio Group
  Tabs         -> Tabs
  Transition   -> Drawer, Toast, Command Palette, all animated

DO NOT use Preline JS plugins (conflict with Vue reactivity).
Preline HTML/CSS patterns are fine; their JS plugins are not.

================================================================
COMPONENTS (39 total) -- ALL with per-variant Preview blocks
================================================================

Accordion      Disclosure     single item, full accordion
Alert          --             info/success/warning/error, dismissible
Avatar         --             initials, sizes, status dot, group
Badge          --             brand/secondary/success/warning/error/outline/live/count
Breadcrumb     --             chevron/slash/home/badge, dynamic Nuxt
Button         --             primary/secondary/outline/ghost/destructive, sizes
Card           --             basic/header+footer/icon/stat/interactive/horizontal
Carousel       --             CSS translate, dots, thumbnails, autoplay, looping
Checkbox       --             Vue v-model, indeterminate, card group
Code Block     --             single/tabbed, copy button, Shiki integration
Command Palette Combobox      Cmd+K overlay, keyboard nav, grouped results
Context Menu   --             right-click, viewport clamp, dividers, danger
Data Grid      --             filter + sort + paginate (Vue computed)
Date Picker    --             calendar grid, month nav, today/clear
Drawer         Dialog         right/left, Vue+Teleport, HUI Dialog
Dropdown       Menu           basic/sections/icons/destructive
Empty State    --             default/no-results/in-table/minimal
File Upload    --             drag-and-drop, progress bars, real fetch
Input          --             basic/label/icon/trailing button/error/disabled/textarea
Modal          Dialog         Vue+Teleport, HUI Dialog, sizes
Navbar         Disclosure     basic/sticky/active links/HUI mobile menu
Notification Dot --           count badge, pulse, on avatar, on nav, status colours
Pagination     --             numbered+ellipsis, count, compact; Vue computed
PIN Input      --             6-digit, 4-digit masked, auto-focus, paste
Popover        Popover        basic/profile card, HUI Popover, positioning
Progress       --             determinate/colours/sizes/thick+label/indeterminate
Radio Group    RadioGroup     card picker/pill row/classic, HUI RadioGroup
Scrollspy      --             IntersectionObserver, sticky nav, Nuxt composable
Select         Listbox/Combobox basic/label/disabled/error, HUI variants
Skeleton       --             shapes/card/table, Vue pending, shimmer
Spinner        --             basic/sizes/button loading/dots/full-page
Stepper        --             horizontal, labels, Vue nav, aria-current
Strong Password --            show/hide, 4-segment meter, requirement list
Table          --             basic/avatar/sortable/empty state
Tabs           Tabs           underline/pill, HUI Tabs
Tag Input      --             Enter/comma add, Backspace remove, suggestions
Toast          --             success/error/info, useToast composable
Toggle         Switch         on/off, HUI Switch
Tooltip        --             top/bottom/left/right, Vue wrapper component

================================================================
FILE STRUCTURE (key files)
================================================================

oxide-ui/
  .gitignore / LICENSE / README.md / HANDOFF.md
  package.json / tailwind.config.js / postcss.config.js

  .vitepress/
    config.mts                    nav, 5-section sidebar, SEO, fonts
    plugins/colorSwatch.js        hex/rgba backtick -> inline swatch dot
    theme/
      index.ts                    Layout + 39 demo components registered
      style.css                   CSS vars, VitePress overrides
      Layout.vue                  announcement banner
      components/
        Preview.vue               grid-bg canvas (props: column)
        demos/ (39 Demo.vue files)

  public/
    logo.svg / robots.txt / _headers
    llms.txt / llms-full.txt / handoff.txt
    examples/
      landing-page.html / tool-app.html / dashboard.html / marketing.html

  components/ (39 .md files, alphabetical)

  examples/ index.md + 4 example .md pages
  plugins/ index.md
  getting-started/ index.md + installation.md + theming.md
  ai/ index.md + handoff.md
  index.md

================================================================
SIDEBAR STRUCTURE
================================================================

1. Getting Started: Introduction, Installation, Theming
2. Components: 39 components (alphabetical)
3. Examples: Overview + 4 standalone pages (open _blank)
4. Plugins & Interactions: Overview, HUI docs (ext), Preline (ext)
5. AI & LLM: Overview, Resume/Handoff, llms.txt, llms-full.txt, handoff.txt

================================================================
HOW TO ADD A NEW COMPONENT
================================================================

1. Create .vitepress/theme/components/demos/MyDemo.vue
2. Register in .vitepress/theme/index.ts
3. Write components/my-component.md
   - frontmatter: title + description
   - H1 + oxide-component-tag div
   - ## Overview with <Preview><MyDemo /></Preview>
   - per-variant <Preview> + code blocks
   - ## With Headless UI (if applicable)
   - ## Accessibility notes
4. Add to sidebar in .vitepress/config.mts (alphabetical)
5. Update public/llms.txt and public/llms-full.txt
6. Update HANDOFF.md and public/handoff.txt
7. git add -A && git commit -m "feat: add [Component]"

================================================================
GIT WORKFLOW
================================================================

Branch: main only (private repo)
Convention: feat / fix / docs / refactor / chore
Push to GitHub -> Cloudflare Pages auto-deploys from main.

================================================================
DEPLOYMENT
================================================================

Build:   npm run build  ->  .vitepress/dist
Cloudflare Pages:
  Build command:    npm run build
  Output dir:       .vitepress/dist
  NODE_VERSION env: 20

================================================================
REMAINING BACKLOG
================================================================

The original backlog is FULLY COMPLETE (39 components).

Possible next directions:
  New components:  Textarea autoheight, Color Picker, Rating stars,
                   Timeline, Split button, Kbd, Divider
  Polish:          llms.txt sync, OG image, Changelog page
  Infrastructure:  @oxide-ui/nuxt module, npx oxide-ui add CLI
  Examples:        Blog, Auth page, Settings page, Onboarding
  Docs:            StackBlitz embeds, Figma kit, Contribution guide

================================================================
OPEN QUESTIONS
================================================================

- Real domain + GitHub org (oxide-ui.dev is a placeholder)
- Publish @oxide-ui/nuxt module with auto-imported components?
- CLI: npx oxide-ui add button
- In-browser StackBlitz playground per component?
- Changelog page?

================================================================
SESSION HISTORY
================================================================

Session 1: Initial VitePress site, 5 components, AI files, theme.
Session 2: Fixed .vitepress bug, color swatch plugin, LLM sidebar.
Session 3: 10 new components, per-variant Previews, Examples, handoff URL.
Session 4: Fixed handoff encoding, 4 HTML examples, Card+Input previews,
           Accordion+Popover+Radio Group (HUI), Plugins page.
Session 5: HUI Disclosure for Navbar, 7 new components, git init,
           LICENSE, README. Total: 25 components.
Session 6: BACKLOG COMPLETE. 14 new components: Carousel, Code Block,
           Command Palette, Context Menu, Data Grid, Date Picker,
           File Upload, Notification Dot, PIN Input, Scrollspy,
           Stepper, Strong Password, Tag Input, Tooltip.
           Total: 39 components, 39 demos, 39 doc pages, all registered.