PixelPilot: Instructions file for GitHub Copilot

Progressive Disclosure

Users don't need everything at once. This file covers hiding complexity, expert mode toggles, expanding details, and information architecture that reveals itself progressively — without frustrating power users.

---

CRITICAL RULES

1. Essential first — Show must-have info immediately, nice-to-have on demand.
2. Predictable revelation — Users should anticipate what's behind the click.
3. Preserve context — Expanding content shouldn't lose the user's place.
4. Accessible — All disclosed content reachable via keyboard.
5. Remember preferences — Expert mode should persist.

---

THE PROGRESSIVE DISCLOSURE SPECTRUM

[Immediate]     [1 Click]        [2 Clicks]       [Deep]
   |               |                |               |
 Title          Summary           Details        Expert
 Price          Description       Specs          Debug
 CTA            Reviews           Comparisons    Source

Rule: 80% of users only need the first two levels.

---

BASIC DISCLOSURE PATTERNS

Accordion

// Accordion.tsx
interface AccordionItem {
  id: string;
  title: string;
  content: React.ReactNode;
  defaultOpen?: boolean;
}

export function Accordion({ 
  items, 
  allowMultiple = false 
}: { 
  items: AccordionItem[]; 
  allowMultiple?: boolean;
}) {
  const [openIds, setOpenIds] = useState<Set<string>>(() => {
    const defaults = items.filter(i => i.defaultOpen).map(i => i.id);
    return new Set(defaults);
  });

  const toggle = (id: string) => {
    setOpenIds(prev => {
      const next = new Set(allowMultiple ? prev : []);
      if (prev.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  return (
    <div className="accordion">
      {items.map(item => (
        <div 
          key={item.id} 
          className={`accordion__item ${openIds.has(item.id) ? 'accordion__item--open' : ''}`}
        >
          <button
            className="accordion__trigger"
            onClick={() => toggle(item.id)}
            aria-expanded={openIds.has(item.id)}
            aria-controls={`accordion-panel-${item.id}`}
          >
            <span>{item.title}</span>
            <ChevronIcon className="accordion__icon" aria-hidden="true" />
          </button>
          
          <div
            id={`accordion-panel-${item.id}`}
            className="accordion__panel"
            role="region"
            aria-labelledby={`accordion-trigger-${item.id}`}
            hidden={!openIds.has(item.id)}
          >
            <div className="accordion__content">
              {item.content}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}