@devalok/shilp-sutra 0.48.0 → 0.49.1

package/dist/composed/schedule-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-view.js","names":[],"sources":["../../src/composed/schedule-view.tsx"],"sourcesContent":["'use client'\n\nimport {\n  addDays,\n  differenceInMinutes,\n  format,\n  getHours,\n  getMinutes,\n  isSameDay,\n  isToday,\n  startOfWeek,\n} from 'date-fns'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\n/* ------------------------------------------------------------------ */\n/*  Types                                                              */\n/* ------------------------------------------------------------------ */\n\nexport interface ScheduleEvent {\n  id: string\n  title: string\n  start: Date\n  end: Date\n  color?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'\n}\n\n/**\n * A day/week calendar schedule grid. Renders time-slotted events with\n * proportional height, color coding, click handlers, and a current-time indicator.\n */\nexport interface ScheduleViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Display mode: single-day column or full-week (7 columns). */\n  view: 'day' | 'week'\n  /** Current day (day view) or any date within the target week (week view). */\n  date: Date\n  /** Events to display on the calendar grid. */\n  events: ScheduleEvent[]\n  /** Called when an event block is clicked. */\n  onEventClick?: (event: ScheduleEvent) => void\n  /** Called when an empty time slot is clicked, with the slot's start and end times. */\n  onSlotClick?: (start: Date, end: Date) => void\n  /** First visible hour (default 8). */\n  startHour?: number\n  /** Last visible hour -- exclusive (default 18). */\n  endHour?: number\n  /** Slot duration in minutes (default 30). */\n  slotDuration?: number\n}\n\n/* ------------------------------------------------------------------ */\n/*  Color map                                                          */\n/* ------------------------------------------------------------------ */\n\nconst eventColorMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  primary: 'bg-accent-2 text-accent-11',\n  success: 'bg-success-3 text-success-11',\n  warning: 'bg-warning-3 text-warning-11',\n  error: 'bg-error-3 text-error-11',\n  info: 'bg-info-3 text-info-11',\n  neutral: 'bg-surface-raised text-surface-fg-muted',\n}\n\n// Solid category dot — the color-blind-safe, shape-based signal that replaces the\n// former left accent rail (the AI tell). Tint above carries the ambient color.\nconst eventDotMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  primary: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n  neutral: 'bg-surface-fg-subtle',\n}\n\n/* ------------------------------------------------------------------ */\n/*  Helpers                                                            */\n/* ------------------------------------------------------------------ */\n\nfunction formatHourLabel(hour: number): string {\n  if (hour === 0) return '12 AM'\n  if (hour < 12) return `${hour} AM`\n  if (hour === 12) return '12 PM'\n  return `${hour - 12} PM`\n}\n\nfunction getEventStyle(\n  event: ScheduleEvent,\n  startHour: number,\n  endHour: number,\n) {\n  const totalMinutes = (endHour - startHour) * 60\n  const eventStartMinutes =\n    (getHours(event.start) - startHour) * 60 + getMinutes(event.start)\n  const durationMinutes = differenceInMinutes(event.end, event.start)\n\n  const top = (eventStartMinutes / totalMinutes) * 100\n  const height = (durationMinutes / totalMinutes) * 100\n\n  return {\n    top: `${top}%`,\n    height: `${height}%`,\n  }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Sub-components                                                     */\n/* ------------------------------------------------------------------ */\n\ninterface TimeColumnProps {\n  startHour: number\n  endHour: number\n}\n\nfunction TimeColumn({ startHour, endHour }: TimeColumnProps) {\n  const hours: number[] = []\n  for (let h = startHour; h < endHour; h++) {\n    hours.push(h)\n  }\n  const slotHeight = 100 / (endHour - startHour)\n\n  return (\n    <div\n      className=\"relative shrink-0 w-[60px] border-r border-surface-border-strong\"\n      aria-hidden=\"true\"\n    >\n      {hours.map((hour) => (\n        <div\n          key={hour}\n          className=\"text-ds-xs text-surface-fg-muted pr-ds-02 text-right\"\n          style={{ height: `${slotHeight}%` }}\n        >\n          {formatHourLabel(hour)}\n        </div>\n      ))}\n    </div>\n  )\n}\n\ninterface DayColumnProps {\n  date: Date\n  events: ScheduleEvent[]\n  startHour: number\n  endHour: number\n  slotDuration: number\n  onEventClick?: (event: ScheduleEvent) => void\n  onSlotClick?: (start: Date, end: Date) => void\n  showHeader?: boolean\n}\n\nfunction DayColumn({\n  date,\n  events,\n  startHour,\n  endHour,\n  slotDuration,\n  onEventClick,\n  onSlotClick,\n  showHeader,\n}: DayColumnProps) {\n  const dayEvents = events.filter((e) => isSameDay(e.start, date))\n  const totalMinutes = (endHour - startHour) * 60\n  const slotCount = totalMinutes / slotDuration\n\n  const slots: { start: Date; end: Date }[] = []\n  for (let i = 0; i < slotCount; i++) {\n    const slotStart = new Date(date)\n    slotStart.setHours(startHour, i * slotDuration, 0, 0)\n    const slotEnd = new Date(slotStart)\n    slotEnd.setMinutes(slotEnd.getMinutes() + slotDuration)\n    slots.push({ start: slotStart, end: slotEnd })\n  }\n\n  const todayInView = isToday(date)\n\n  // Current time indicator position\n  let nowIndicatorTop: number | null = null\n  if (todayInView) {\n    const now = new Date()\n    const nowHour = getHours(now)\n    const nowMin = getMinutes(now)\n    if (nowHour >= startHour && nowHour < endHour) {\n      const nowMinutes = (nowHour - startHour) * 60 + nowMin\n      nowIndicatorTop = (nowMinutes / totalMinutes) * 100\n    }\n  }\n\n  return (\n    <div className=\"flex flex-1 flex-col min-w-[80px]\">\n      {showHeader && (\n        <div\n          className={cn(\n            'text-center text-ds-sm font-semibold py-ds-02 border-b border-surface-border-strong',\n            todayInView\n              ? 'text-accent-11 bg-accent-2'\n              : 'text-surface-fg bg-surface-raised',\n          )}\n        >\n          {format(date, 'EEE d')}\n        </div>\n      )}\n      <div className=\"relative flex-1\">\n        {/* Slot grid lines */}\n        {slots.map((slot, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            className={cn(\n              'block w-full border-b border-surface-border hover:bg-surface-raised-hover transition-colors ease-productive-standard',\n              i % 2 === 0 ? 'border-surface-border-strong' : 'border-surface-border-subtle',\n            )}\n            style={{ height: `${100 / slotCount}%` }}\n            onClick={() => onSlotClick?.(slot.start, slot.end)}\n            aria-label={`${format(slot.start, 'h:mm a')} to ${format(slot.end, 'h:mm a')}`}\n          />\n        ))}\n\n        {/* Events */}\n        {dayEvents.map((event) => {\n          const style = getEventStyle(event, startHour, endHour)\n          const eventColor = event.color ?? 'primary'\n          const colorClass = eventColorMap[eventColor]\n          const dotClass = eventDotMap[eventColor]\n          return (\n            <button\n              key={event.id}\n              type=\"button\"\n              className={cn(\n                'absolute left-ds-01 right-ds-01 rounded-control-inner px-ds-02 py-ds-01',\n                'text-left text-ds-xs font-medium overflow-hidden cursor-pointer',\n                'hover:shadow-raised hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard',\n                colorClass,\n              )}\n              style={style}\n              onClick={(e) => {\n                e.stopPropagation()\n                onEventClick?.(event)\n              }}\n              aria-label={`${event.title}, ${format(event.start, 'h:mm a')} to ${format(event.end, 'h:mm a')}`}\n            >\n              <span className=\"flex items-start gap-ds-02\">\n                <span\n                  className={cn('mt-[3px] h-ds-03 w-ds-03 shrink-0 rounded-pill', dotClass)}\n                  aria-hidden=\"true\"\n                />\n                <span className=\"line-clamp-2\">{event.title}</span>\n              </span>\n            </button>\n          )\n        })}\n\n        {/* Current time indicator */}\n        {nowIndicatorTop != null && (\n          <div\n            className=\"absolute left-0 right-0 h-[2px] bg-error-9 z-10 pointer-events-none\"\n            style={{ top: `${nowIndicatorTop}%` }}\n            aria-hidden=\"true\"\n          >\n            <motion.span\n              className=\"absolute -left-[5px] -top-[4px] h-[10px] w-[10px] rounded-pill bg-error-9\"\n              animate={{ scale: [1, 1.3, 1] }}\n              transition={{ repeat: Infinity, duration: 2 }}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ScheduleView                                                       */\n/* ------------------------------------------------------------------ */\n\nconst ScheduleView = React.forwardRef<HTMLDivElement, ScheduleViewProps>(\n  (\n    {\n      view,\n      date,\n      events,\n      onEventClick,\n      onSlotClick,\n      startHour = 8,\n      endHour = 18,\n      slotDuration = 30,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const days: Date[] = React.useMemo(() => {\n      if (view === 'day') return [date]\n      const weekStart = startOfWeek(date, { weekStartsOn: 1 }) // Monday\n      return Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))\n    }, [view, date])\n\n    return (\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={\n          view === 'day'\n            ? `Schedule for ${format(date, 'EEEE, MMMM d, yyyy')}`\n            : `Week schedule starting ${format(days[0], 'MMMM d, yyyy')}`\n        }\n        className={cn(\n          'flex rounded-control border border-surface-border-strong bg-surface-raised overflow-hidden',\n          'h-[480px]',\n          className,\n        )}\n        {...props}\n      >\n        <TimeColumn startHour={startHour} endHour={endHour} />\n        <div className=\"flex flex-1 divide-x divide-surface-border overflow-x-auto\">\n          {days.map((day) => (\n            <DayColumn\n              key={day.toISOString()}\n              date={day}\n              events={events}\n              startHour={startHour}\n              endHour={endHour}\n              slotDuration={slotDuration}\n              onEventClick={onEventClick}\n              onSlotClick={onSlotClick}\n              showHeader={view === 'week'}\n            />\n          ))}\n        </div>\n      </div>\n    )\n  },\n)\nScheduleView.displayName = 'ScheduleView'\n\nexport { ScheduleView }\n"],"mappings":";;;;;;;AAwDA,IAAM,IAGF;CACF,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV,EAIK,IAGF;CACF,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV;AAMD,SAAS,EAAgB,GAAsB;AAI7C,QAHI,MAAS,IAAU,UACnB,IAAO,KAAW,GAAG,EAAK,OAC1B,MAAS,KAAW,UACjB,GAAG,IAAO,GAAG;;AAGtB,SAAS,EACP,GACA,GACA,GACA;CACA,IAAM,KAAgB,IAAU,KAAa,IACvC,KACH,EAAS,EAAM,MAAM,GAAG,KAAa,KAAK,EAAW,EAAM,MAAM,EAC9D,IAAkB,EAAoB,EAAM,KAAK,EAAM,MAAM,EAE7D,IAAO,IAAoB,IAAgB,KAC3C,IAAU,IAAkB,IAAgB;AAElD,QAAO;EACL,KAAK,GAAG,EAAI;EACZ,QAAQ,GAAG,EAAO;EACnB;;AAYH,SAAS,EAAW,EAAE,cAAW,cAA4B;CAC3D,IAAM,IAAkB,EAAE;AAC1B,MAAK,IAAI,IAAI,GAAW,IAAI,GAAS,IACnC,GAAM,KAAK,EAAE;CAEf,IAAM,IAAa,OAAO,IAAU;AAEpC,QACE,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEX,EAAM,KAAK,MACV,kBAAC,OAAD;GAEE,WAAU;GACV,OAAO,EAAE,QAAQ,GAAG,EAAW,IAAI;aAElC,EAAgB,EAAK;GAClB,EALC,EAKD,CACN;EACE,CAAA;;AAeV,SAAS,EAAU,EACjB,SACA,WACA,cACA,YACA,iBACA,iBACA,gBACA,iBACiB;CACjB,IAAM,IAAY,EAAO,QAAQ,MAAM,EAAU,EAAE,OAAO,EAAK,CAAC,EAC1D,KAAgB,IAAU,KAAa,IACvC,IAAY,IAAe,GAE3B,IAAsC,EAAE;AAC9C,MAAK,IAAI,IAAI,GAAG,IAAI,GAAW,KAAK;EAClC,IAAM,IAAY,IAAI,KAAK,EAAK;AAChC,IAAU,SAAS,GAAW,IAAI,GAAc,GAAG,EAAE;EACrD,IAAM,IAAU,IAAI,KAAK,EAAU;AAEnC,EADA,EAAQ,WAAW,EAAQ,YAAY,GAAG,EAAa,EACvD,EAAM,KAAK;GAAE,OAAO;GAAW,KAAK;GAAS,CAAC;;CAGhD,IAAM,IAAc,EAAQ,EAAK,EAG7B,IAAiC;AACrC,KAAI,GAAa;EACf,IAAM,oBAAM,IAAI,MAAM,EAChB,IAAU,EAAS,EAAI,EACvB,IAAS,EAAW,EAAI;AAC9B,EAAI,KAAW,KAAa,IAAU,MAEpC,MADoB,IAAU,KAAa,KAAK,KAChB,IAAgB;;AAIpD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,KACC,kBAAC,OAAD;GACE,WAAW,EACT,uFACA,IACI,+BACA,oCACL;aAEA,EAAO,GAAM,QAAQ;GAClB,CAAA,EAER,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEG,EAAM,KAAK,GAAM,MAChB,kBAAC,UAAD;KAEE,MAAK;KACL,WAAW,EACT,wHACA,IAAI,KAAM,IAAI,iCAAiC,+BAChD;KACD,OAAO,EAAE,QAAQ,GAAG,MAAM,EAAU,IAAI;KACxC,eAAe,IAAc,EAAK,OAAO,EAAK,IAAI;KAClD,cAAY,GAAG,EAAO,EAAK,OAAO,SAAS,CAAC,MAAM,EAAO,EAAK,KAAK,SAAS;KAC5E,EATK,EASL,CACF;IAGD,EAAU,KAAK,MAAU;KACxB,IAAM,IAAQ,EAAc,GAAO,GAAW,EAAQ,EAChD,IAAa,EAAM,SAAS,WAC5B,IAAa,EAAc,IAC3B,IAAW,EAAY;AAC7B,YACE,kBAAC,UAAD;MAEE,MAAK;MACL,WAAW,EACT,2EACA,mEACA,sHACA,EACD;MACM;MACP,UAAU,MAAM;AAEd,OADA,EAAE,iBAAiB,EACnB,IAAe,EAAM;;MAEvB,cAAY,GAAG,EAAM,MAAM,IAAI,EAAO,EAAM,OAAO,SAAS,CAAC,MAAM,EAAO,EAAM,KAAK,SAAS;gBAE9F,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CACE,kBAAC,QAAD;QACE,WAAW,EAAG,kDAAkD,EAAS;QACzE,eAAY;QACZ,CAAA,EACF,kBAAC,QAAD;QAAM,WAAU;kBAAgB,EAAM;QAAa,CAAA,CAC9C;;MACA,EAtBF,EAAM,GAsBJ;MAEX;IAGD,KAAmB,QAClB,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,KAAK,GAAG,EAAgB,IAAI;KACrC,eAAY;eAEZ,kBAAC,EAAO,MAAR;MACE,WAAU;MACV,SAAS,EAAE,OAAO;OAAC;OAAG;OAAK;OAAE,EAAE;MAC/B,YAAY;OAAE,QAAQ;OAAU,UAAU;OAAG;MAC7C,CAAA;KACE,CAAA;IAEJ;KACF;;;AAQV,IAAM,IAAe,EAAM,YAEvB,EACE,SACA,SACA,WACA,iBACA,gBACA,eAAY,GACZ,aAAU,IACV,kBAAe,IACf,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAe,EAAM,cAAc;AACvC,MAAI,MAAS,MAAO,QAAO,CAAC,EAAK;EACjC,IAAM,IAAY,EAAY,GAAM,EAAE,cAAc,GAAG,CAAC;AACxD,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MAAM,EAAQ,GAAW,EAAE,CAAC;IAChE,CAAC,GAAM,EAAK,CAAC;AAEhB,QACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,cACE,MAAS,QACL,gBAAgB,EAAO,GAAM,qBAAqB,KAClD,0BAA0B,EAAO,EAAK,IAAI,eAAe;EAE/D,WAAW,EACT,8FACA,aACA,EACD;EACD,GAAI;YAbN,CAeE,kBAAC,GAAD;GAAuB;GAAoB;GAAW,CAAA,EACtD,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAK,KAAK,MACT,kBAAC,GAAD;IAEE,MAAM;IACE;IACG;IACF;IACK;IACA;IACD;IACb,YAAY,MAAS;IACrB,EATK,EAAI,aAAa,CAStB,CACF;GACE,CAAA,CACF;;EAGX;AACD,EAAa,cAAc"}
+{"version":3,"file":"schedule-view.js","names":[],"sources":["../../src/composed/schedule-view.tsx"],"sourcesContent":["'use client'\n\nimport {\n  addDays,\n  differenceInMinutes,\n  format,\n  getHours,\n  getMinutes,\n  isSameDay,\n  isToday,\n  startOfWeek,\n} from 'date-fns'\nimport * as React from 'react'\n\nimport { Dot } from '../ui/dot'\nimport { cn } from '../ui/lib/utils'\n\n/* ------------------------------------------------------------------ */\n/*  Types                                                              */\n/* ------------------------------------------------------------------ */\n\nexport interface ScheduleEvent {\n  id: string\n  title: string\n  start: Date\n  end: Date\n  color?: 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral'\n}\n\n/**\n * A day/week calendar schedule grid. Renders time-slotted events with\n * proportional height, color coding, click handlers, and a current-time indicator.\n */\nexport interface ScheduleViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Display mode: single-day column or full-week (7 columns). */\n  view: 'day' | 'week'\n  /** Current day (day view) or any date within the target week (week view). */\n  date: Date\n  /** Events to display on the calendar grid. */\n  events: ScheduleEvent[]\n  /** Called when an event block is clicked. */\n  onEventClick?: (event: ScheduleEvent) => void\n  /** Called when an empty time slot is clicked, with the slot's start and end times. */\n  onSlotClick?: (start: Date, end: Date) => void\n  /** First visible hour (default 8). */\n  startHour?: number\n  /** Last visible hour -- exclusive (default 18). */\n  endHour?: number\n  /** Slot duration in minutes (default 30). */\n  slotDuration?: number\n}\n\n/* ------------------------------------------------------------------ */\n/*  Color map                                                          */\n/* ------------------------------------------------------------------ */\n\nconst eventColorMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  accent: 'bg-accent-2 text-accent-11',\n  success: 'bg-success-3 text-success-11',\n  warning: 'bg-warning-3 text-warning-11',\n  error: 'bg-error-3 text-error-11',\n  info: 'bg-info-3 text-info-11',\n  neutral: 'bg-surface-raised text-surface-fg-muted',\n}\n\n// Solid category dot — the color-blind-safe, shape-based signal that replaces the\n// former left accent rail (the AI tell). Tint above carries the ambient color.\nconst eventDotMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n  neutral: 'bg-surface-fg-subtle',\n}\n\n/* ------------------------------------------------------------------ */\n/*  Helpers                                                            */\n/* ------------------------------------------------------------------ */\n\nfunction formatHourLabel(hour: number): string {\n  if (hour === 0) return '12 AM'\n  if (hour < 12) return `${hour} AM`\n  if (hour === 12) return '12 PM'\n  return `${hour - 12} PM`\n}\n\nfunction getEventStyle(\n  event: ScheduleEvent,\n  startHour: number,\n  endHour: number,\n) {\n  const totalMinutes = (endHour - startHour) * 60\n  const eventStartMinutes =\n    (getHours(event.start) - startHour) * 60 + getMinutes(event.start)\n  const durationMinutes = differenceInMinutes(event.end, event.start)\n\n  const top = (eventStartMinutes / totalMinutes) * 100\n  const height = (durationMinutes / totalMinutes) * 100\n\n  return {\n    top: `${top}%`,\n    height: `${height}%`,\n  }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Sub-components                                                     */\n/* ------------------------------------------------------------------ */\n\ninterface TimeColumnProps {\n  startHour: number\n  endHour: number\n}\n\nfunction TimeColumn({ startHour, endHour }: TimeColumnProps) {\n  const hours: number[] = []\n  for (let h = startHour; h < endHour; h++) {\n    hours.push(h)\n  }\n  const slotHeight = 100 / (endHour - startHour)\n\n  return (\n    <div\n      className=\"relative shrink-0 w-[60px] border-r border-surface-border-strong\"\n      aria-hidden=\"true\"\n    >\n      {hours.map((hour) => (\n        <div\n          key={hour}\n          className=\"text-ds-xs text-surface-fg-muted pr-ds-02 text-right\"\n          style={{ height: `${slotHeight}%` }}\n        >\n          {formatHourLabel(hour)}\n        </div>\n      ))}\n    </div>\n  )\n}\n\ninterface DayColumnProps {\n  date: Date\n  events: ScheduleEvent[]\n  startHour: number\n  endHour: number\n  slotDuration: number\n  onEventClick?: (event: ScheduleEvent) => void\n  onSlotClick?: (start: Date, end: Date) => void\n  showHeader?: boolean\n}\n\nfunction DayColumn({\n  date,\n  events,\n  startHour,\n  endHour,\n  slotDuration,\n  onEventClick,\n  onSlotClick,\n  showHeader,\n}: DayColumnProps) {\n  const dayEvents = events.filter((e) => isSameDay(e.start, date))\n  const totalMinutes = (endHour - startHour) * 60\n  const slotCount = totalMinutes / slotDuration\n\n  const slots: { start: Date; end: Date }[] = []\n  for (let i = 0; i < slotCount; i++) {\n    const slotStart = new Date(date)\n    slotStart.setHours(startHour, i * slotDuration, 0, 0)\n    const slotEnd = new Date(slotStart)\n    slotEnd.setMinutes(slotEnd.getMinutes() + slotDuration)\n    slots.push({ start: slotStart, end: slotEnd })\n  }\n\n  const todayInView = isToday(date)\n\n  // Current time indicator position\n  let nowIndicatorTop: number | null = null\n  if (todayInView) {\n    const now = new Date()\n    const nowHour = getHours(now)\n    const nowMin = getMinutes(now)\n    if (nowHour >= startHour && nowHour < endHour) {\n      const nowMinutes = (nowHour - startHour) * 60 + nowMin\n      nowIndicatorTop = (nowMinutes / totalMinutes) * 100\n    }\n  }\n\n  return (\n    <div className=\"flex flex-1 flex-col min-w-ds-11\">\n      {showHeader && (\n        <div\n          className={cn(\n            'text-center text-ds-sm font-semibold py-ds-02 border-b border-surface-border-strong',\n            todayInView\n              ? 'text-accent-11 bg-accent-2'\n              : 'text-surface-fg bg-surface-raised',\n          )}\n        >\n          {format(date, 'EEE d')}\n        </div>\n      )}\n      <div className=\"relative flex-1\">\n        {/* Slot grid lines */}\n        {slots.map((slot, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            className={cn(\n              'block w-full border-b border-surface-border hover:bg-surface-raised-hover transition-colors ease-productive-standard',\n              'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent-9',\n              i % 2 === 0 ? 'border-surface-border-strong' : 'border-surface-border-subtle',\n            )}\n            style={{ height: `${100 / slotCount}%` }}\n            onClick={() => onSlotClick?.(slot.start, slot.end)}\n            aria-label={`${format(slot.start, 'h:mm a')} to ${format(slot.end, 'h:mm a')}`}\n          />\n        ))}\n\n        {/* Events */}\n        {dayEvents.map((event) => {\n          const style = getEventStyle(event, startHour, endHour)\n          const eventColor = event.color ?? 'accent'\n          const colorClass = eventColorMap[eventColor]\n          const dotClass = eventDotMap[eventColor]\n          return (\n            <button\n              key={event.id}\n              type=\"button\"\n              className={cn(\n                'absolute left-ds-01 right-ds-01 rounded-control-inner px-ds-02 py-ds-01',\n                'text-left text-ds-xs font-medium overflow-hidden cursor-pointer',\n                'hover:shadow-raised hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n                colorClass,\n              )}\n              style={style}\n              onClick={(e) => {\n                e.stopPropagation()\n                onEventClick?.(event)\n              }}\n              aria-label={`${event.title}, ${format(event.start, 'h:mm a')} to ${format(event.end, 'h:mm a')}`}\n            >\n              <span className=\"flex items-start gap-ds-02\">\n                <span\n                  className={cn('mt-[3px] h-ds-03 w-ds-03 shrink-0 rounded-pill', dotClass)}\n                  aria-hidden=\"true\"\n                />\n                <span className=\"line-clamp-2\">{event.title}</span>\n              </span>\n            </button>\n          )\n        })}\n\n        {/* Current time indicator */}\n        {nowIndicatorTop != null && (\n          <div\n            className=\"absolute left-0 right-0 h-ds-01 bg-error-9 z-10 pointer-events-none\"\n            style={{ top: `${nowIndicatorTop}%` }}\n            aria-hidden=\"true\"\n          >\n            <Dot color=\"error\" size=\"lg\" pulse className=\"absolute -left-[5px] -top-[4px]\" />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ScheduleView                                                       */\n/* ------------------------------------------------------------------ */\n\nconst ScheduleView = React.forwardRef<HTMLDivElement, ScheduleViewProps>(\n  (\n    {\n      view,\n      date,\n      events,\n      onEventClick,\n      onSlotClick,\n      startHour = 8,\n      endHour = 18,\n      slotDuration = 30,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const days: Date[] = React.useMemo(() => {\n      if (view === 'day') return [date]\n      const weekStart = startOfWeek(date, { weekStartsOn: 1 }) // Monday\n      return Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))\n    }, [view, date])\n\n    return (\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={\n          view === 'day'\n            ? `Schedule for ${format(date, 'EEEE, MMMM d, yyyy')}`\n            : `Week schedule starting ${format(days[0], 'MMMM d, yyyy')}`\n        }\n        className={cn(\n          'flex rounded-control border border-surface-border-strong bg-surface-raised overflow-hidden',\n          'h-[480px]',\n          className,\n        )}\n        {...props}\n      >\n        <TimeColumn startHour={startHour} endHour={endHour} />\n        <div className=\"flex flex-1 divide-x divide-surface-border overflow-x-auto\">\n          {days.map((day) => (\n            <DayColumn\n              key={day.toISOString()}\n              date={day}\n              events={events}\n              startHour={startHour}\n              endHour={endHour}\n              slotDuration={slotDuration}\n              onEventClick={onEventClick}\n              onSlotClick={onSlotClick}\n              showHeader={view === 'week'}\n            />\n          ))}\n        </div>\n      </div>\n    )\n  },\n)\nScheduleView.displayName = 'ScheduleView'\n\nexport { ScheduleView }\n"],"mappings":"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"}

package/dist/composed/status-badge.d.ts

@@ -1,28 +1,30 @@
 "use client";
-import { VariantProps } from 'class-variance-authority';
 import { IconInput } from '../ui/lib/icon-input';
 import * as React from 'react';
-declare const statusBadgeVariants: (props?: ({
-    status?: "active" | "completed" | "pending" | "approved" | "rejected" | "blocked" | "in-progress" | "review" | "cancelled" | "draft" | null | undefined;
-    color?: "success" | "error" | "info" | "warning" | "neutral" | null | undefined;
-    size?: "sm" | "md" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Domain work-statuses → the shared intent colour used by both the Badge pill
+ * and the leading Dot. StatusBadge is a thin semantic wrapper: it owns the
+ * status vocabulary and composes `<Badge>` + `<Dot>` rather than re-styling a pill.
+ */
+type StatusKey = 'active' | 'pending' | 'approved' | 'rejected' | 'completed' | 'blocked' | 'in-progress' | 'review' | 'cancelled' | 'draft';
+type StatusColor = 'success' | 'warning' | 'error' | 'info' | 'neutral';
 interface StatusBadgeBaseProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {
     label?: string;
     hideDot?: boolean;
-    size?: VariantProps<typeof statusBadgeVariants>['size'];
+    size?: 'sm' | 'md';
     onClick?: () => void;
+    /** Trailing icon. When omitted on a clickable badge, a chevron is shown. */
     icon?: IconInput;
 }
 interface StatusBadgeWithStatus extends StatusBadgeBaseProps {
-    status?: VariantProps<typeof statusBadgeVariants>['status'];
+    status?: StatusKey;
     color?: never;
 }
 interface StatusBadgeWithColor extends StatusBadgeBaseProps {
     status?: never;
-    color: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    color: StatusColor;
 }
 export type StatusBadgeProps = StatusBadgeWithStatus | StatusBadgeWithColor;
-declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
-export { StatusBadge, statusBadgeVariants };
+declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLElement>>;
+export { StatusBadge };
 //# sourceMappingURL=status-badge.d.ts.map

package/dist/composed/status-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/composed/status-badge.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAKrD,QAAA,MAAM,mBAAmB;;;;8EAgCxB,CAAA;AAuBD,UAAU,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACtG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,qBAAsB,SAAQ,oBAAoB;IAC1D,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;CAC5D;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAK3E,QAAA,MAAM,WAAW,0FAyFhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/composed/status-badge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAGrD;;;;GAIG;AACH,KAAK,SAAS,GACV,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAC5D,SAAS,GAAG,aAAa,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAA;AAkBhE,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAEvE,UAAU,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACtG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,qBAAsB,SAAQ,oBAAoB;IAC1D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,KAAK,EAAE,WAAW,CAAA;CACnB;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAO3E,QAAA,MAAM,WAAW,sFAsChB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/composed/status-badge.js

@@ -1,139 +1,63 @@
 "use client";
-import { IconProvider as e } from "../ui/icon-context.js";
-import { motionProps as t } from "../ui/lib/motion.js";
-import { t as n } from "../_chunks/vendor-utils.js";
-import { cn as r } from "../ui/lib/utils.js";
-import { Icon as i } from "../ui/icon.js";
-import { t as a } from "../_chunks/normalize-icon.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { IconChevronDown as l } from "@tabler/icons-react";
-import { AnimatePresence as u, motion as d } from "framer-motion";
+import { motionProps as e } from "../ui/lib/motion.js";
+import { Dot as t } from "../ui/dot.js";
+import { BadgeCompound as n } from "../_chunks/badge-group.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { IconChevronDown as a } from "@tabler/icons-react";
+import { AnimatePresence as o, motion as s } from "framer-motion";
 //#region src/composed/status-badge.tsx
-var f = n("inline-flex items-center gap-ds-02b rounded-pill font-body", {
-	variants: {
-		status: {
-			active: "bg-success-3 text-success-11",
-			pending: "bg-warning-3 text-warning-11",
-			approved: "bg-success-3 text-success-11",
-			rejected: "bg-error-3 text-error-11",
-			completed: "bg-success-3 text-success-11",
-			blocked: "bg-error-3 text-error-11",
-			"in-progress": "bg-accent-3 text-accent-11",
-			review: "bg-info-3 text-info-11",
-			cancelled: "bg-surface-raised text-surface-fg-subtle",
-			draft: "bg-surface-raised text-surface-fg-subtle"
-		},
-		color: {
-			success: "bg-success-3 text-success-11",
-			warning: "bg-warning-3 text-warning-11",
-			error: "bg-error-3 text-error-11",
-			info: "bg-info-3 text-info-11",
-			neutral: "bg-surface-raised text-surface-fg-subtle"
-		},
-		size: {
-			sm: "px-ds-03 py-ds-01 text-ds-xs font-semibold",
-			md: "px-ds-04 py-ds-02 text-ds-sm font-medium"
-		}
-	},
-	defaultVariants: { size: "md" }
-}), p = {
-	active: "bg-success-9",
-	pending: "bg-warning-9",
-	approved: "bg-success-9",
-	rejected: "bg-error-9",
-	completed: "bg-success-9",
-	blocked: "bg-error-9",
-	"in-progress": "bg-accent-9",
-	review: "bg-info-9",
-	cancelled: "bg-disabled",
-	draft: "bg-surface-fg-subtle"
-}, m = {
-	success: "bg-success-9",
-	warning: "bg-warning-9",
-	error: "bg-error-9",
-	info: "bg-info-9",
-	neutral: "bg-surface-fg-subtle"
-}, h = {
+var c = {
+	active: "success",
+	approved: "success",
+	completed: "success",
+	pending: "warning",
+	rejected: "error",
+	blocked: "error",
+	"in-progress": "accent",
+	review: "info",
+	cancelled: "neutral",
+	draft: "neutral"
+}, l = {
 	duration: .3,
 	ease: "easeOut"
-}, g = o.forwardRef(({ status: n, color: o, size: g, label: _, hideDot: v = !1, onClick: y, icon: b, className: x, ...S }, C) => {
-	let w = y != null, T = w ? d.button : d.span, E = w ? "cursor-pointer hover:opacity-80 transition-opacity" : void 0, D = b == null ? w ? /* @__PURE__ */ s(i, {
-		icon: l,
-		size: "xs",
-		className: "text-current/50 -mr-0.5 shrink-0"
-	}) : null : /* @__PURE__ */ s(e, {
-		size: "xs",
-		children: a(b)
-	});
-	if (o != null) {
-		let e = _ ?? o.charAt(0).toUpperCase() + o.slice(1), n = m[o];
-		return /* @__PURE__ */ s(u, {
-			mode: "wait",
-			children: /* @__PURE__ */ c(T, {
-				ref: C,
-				...w ? {
-					type: "button",
-					onClick: y
-				} : {},
-				initial: {
-					opacity: .6,
-					scale: .95
-				},
-				animate: {
-					opacity: 1,
-					scale: 1
-				},
-				exit: {
-					opacity: .6,
-					scale: .95
-				},
-				transition: h,
-				className: r(f({
-					color: o,
-					size: g
-				}), E, x),
-				...t(S),
-				children: [
-					!v && /* @__PURE__ */ s("span", {
-						className: r("shrink-0 rounded-pill", g === "sm" ? "h-ds-02b w-ds-02b" : "h-[8px] w-[8px]", n),
-						"aria-hidden": "true"
-					}),
-					e,
-					D
-				]
-			}, o)
-		});
-	}
-	let O = n ?? "pending", k = _ ?? O.charAt(0).toUpperCase() + O.slice(1), A = p[O];
-	return /* @__PURE__ */ s(u, {
+}, u = (e) => e.charAt(0).toUpperCase() + e.slice(1), d = r.forwardRef(({ status: r, color: d, size: f = "md", label: p, hideDot: m = !1, onClick: h, icon: g, className: _, ...v }, y) => {
+	let b = d ?? r ?? "pending", x = d ?? c[r ?? "pending"], S = p ?? u(d ?? r ?? "pending").replace("-", " "), C = g ?? (h == null ? void 0 : a);
+	return /* @__PURE__ */ i(o, {
 		mode: "wait",
-		children: /* @__PURE__ */ c(T, {
-			ref: C,
-			...w ? {
-				type: "button",
-				onClick: y
-			} : {},
-			initial: { opacity: .6 },
-			animate: { opacity: 1 },
-			exit: { opacity: .6 },
-			transition: h,
-			className: r(f({
-				status: O,
-				size: g
-			}), E, x),
-			...t(S),
-			children: [
-				!v && /* @__PURE__ */ s("span", {
-					className: r("shrink-0 rounded-pill", g === "sm" ? "h-ds-02b w-ds-02b" : "h-[8px] w-[8px]", A),
-					"aria-hidden": "true"
+		children: /* @__PURE__ */ i(s.span, {
+			initial: {
+				opacity: .6,
+				scale: .95
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: .6,
+				scale: .95
+			},
+			transition: l,
+			className: "inline-flex",
+			...e(v),
+			children: /* @__PURE__ */ i(n, {
+				ref: y,
+				variant: "soft",
+				color: x,
+				size: f,
+				onClick: h,
+				startIcon: m ? void 0 : /* @__PURE__ */ i(t, {
+					color: x,
+					size: "sm"
 				}),
-				k,
-				D
-			]
-		}, O)
+				endIcon: C,
+				className: _,
+				children: S
+			})
+		}, b)
 	});
 });
-g.displayName = "StatusBadge";
+d.displayName = "StatusBadge";
 //#endregion
-export { g as StatusBadge, f as statusBadgeVariants };
+export { d as StatusBadge };

package/dist/composed/status-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-badge.js","names":[],"sources":["../../src/composed/status-badge.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { motionProps } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\n\nconst statusBadgeVariants = cva(\n  'inline-flex items-center gap-ds-02b rounded-pill font-body',\n  {\n    variants: {\n      status: {\n        active: 'bg-success-3 text-success-11',\n        pending: 'bg-warning-3 text-warning-11',\n        approved: 'bg-success-3 text-success-11',\n        rejected: 'bg-error-3 text-error-11',\n        completed: 'bg-success-3 text-success-11',\n        blocked: 'bg-error-3 text-error-11',\n        'in-progress': 'bg-accent-3 text-accent-11',\n        review: 'bg-info-3 text-info-11',\n        cancelled: 'bg-surface-raised text-surface-fg-subtle',\n        draft: 'bg-surface-raised text-surface-fg-subtle',\n      },\n      color: {\n        success: 'bg-success-3 text-success-11',\n        warning: 'bg-warning-3 text-warning-11',\n        error: 'bg-error-3 text-error-11',\n        info: 'bg-info-3 text-info-11',\n        neutral: 'bg-surface-raised text-surface-fg-subtle',\n      },\n      size: {\n        sm: 'px-ds-03 py-ds-01 text-ds-xs font-semibold',\n        md: 'px-ds-04 py-ds-02 text-ds-sm font-medium',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst dotColorMap: Record<string, string> = {\n  active: 'bg-success-9',\n  pending: 'bg-warning-9',\n  approved: 'bg-success-9',\n  rejected: 'bg-error-9',\n  completed: 'bg-success-9',\n  blocked: 'bg-error-9',\n  'in-progress': 'bg-accent-9',\n  review: 'bg-info-9',\n  cancelled: 'bg-disabled',\n  draft: 'bg-surface-fg-subtle',\n}\n\nconst colorDotMap: Record<string, string> = {\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n  neutral: 'bg-surface-fg-subtle',\n}\n\ninterface StatusBadgeBaseProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {\n  label?: string\n  hideDot?: boolean\n  size?: VariantProps<typeof statusBadgeVariants>['size']\n  onClick?: () => void\n  icon?: IconInput\n}\n\ninterface StatusBadgeWithStatus extends StatusBadgeBaseProps {\n  status?: VariantProps<typeof statusBadgeVariants>['status']\n  color?: never\n}\n\ninterface StatusBadgeWithColor extends StatusBadgeBaseProps {\n  status?: never\n  color: 'success' | 'warning' | 'error' | 'info' | 'neutral'\n}\n\nexport type StatusBadgeProps = StatusBadgeWithStatus | StatusBadgeWithColor\n\n/* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — intentional for smooth morph */\nconst statusMorphTransition = { duration: 0.3, ease: 'easeOut' as const }\n\nconst StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(\n  ({ status, color, size, label, hideDot = false, onClick, icon, className, ...props }, ref) => {\n    const isClickable = onClick != null\n    const Tag = isClickable ? motion.button : motion.span\n    const clickableClasses = isClickable ? 'cursor-pointer hover:opacity-80 transition-opacity' : undefined\n\n    const trailingIcon = icon != null\n      ? <IconProvider size=\"xs\">{normalizeIcon(icon)}</IconProvider>\n      : isClickable\n        ? <Icon icon={IconChevronDown} size=\"xs\" className=\"text-current/50 -mr-0.5 shrink-0\" />\n        : null\n\n    if (color != null) {\n      // Color branch — color is the styling key\n      const displayLabel = label ?? (color.charAt(0).toUpperCase() + color.slice(1))\n      const dotColor = colorDotMap[color]\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <Tag\n            key={color}\n            ref={ref as any}\n            {...(isClickable ? { type: 'button' as const, onClick } : {})}\n            initial={{ opacity: 0.6, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0.6, scale: 0.95 }}\n            transition={statusMorphTransition}\n            className={cn(\n              statusBadgeVariants({ color, size }),\n              clickableClasses,\n              className,\n            )}\n            {...motionProps(props)}\n          >\n            {!hideDot && (\n              <span\n                className={cn(\n                  'shrink-0 rounded-pill',\n                  size === 'sm' ? 'h-ds-02b w-ds-02b' : 'h-[8px] w-[8px]',\n                  dotColor,\n                )}\n                aria-hidden=\"true\"\n              />\n            )}\n            {displayLabel}\n            {trailingIcon}\n          </Tag>\n        </AnimatePresence>\n      )\n    }\n\n    // Status branch — derive styling from status (default: 'pending')\n    const statusKey = status ?? 'pending'\n    const displayLabel = label ?? (statusKey.charAt(0).toUpperCase() + statusKey.slice(1))\n    const dotColor = dotColorMap[statusKey]\n\n    return (\n      <AnimatePresence mode=\"wait\">\n        <Tag\n          key={statusKey}\n          ref={ref as any}\n          {...(isClickable ? { type: 'button' as const, onClick } : {})}\n          initial={{ opacity: 0.6 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0.6 }}\n          transition={statusMorphTransition}\n          className={cn(\n            statusBadgeVariants({ status: statusKey, size }),\n            clickableClasses,\n            className,\n          )}\n          {...motionProps(props)}\n        >\n          {!hideDot && (\n            <span\n              className={cn(\n                'shrink-0 rounded-pill',\n                size === 'sm' ? 'h-ds-02b w-ds-02b' : 'h-[8px] w-[8px]',\n                dotColor,\n              )}\n              aria-hidden=\"true\"\n            />\n          )}\n          {displayLabel}\n          {trailingIcon}\n        </Tag>\n      </AnimatePresence>\n    )\n  },\n)\nStatusBadge.displayName = 'StatusBadge'\n\nexport { StatusBadge, statusBadgeVariants }\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,IAAsB,EAC1B,8DACA;CACE,UAAU;EACR,QAAQ;GACN,QAAQ;GACR,SAAS;GACT,UAAU;GACV,UAAU;GACV,WAAW;GACX,SAAS;GACT,eAAe;GACf,QAAQ;GACR,WAAW;GACX,OAAO;GACR;EACD,OAAO;GACL,SAAS;GACT,SAAS;GACT,OAAO;GACP,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CACF,EAEK,IAAsC;CAC1C,QAAQ;CACR,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,SAAS;CACT,eAAe;CACf,QAAQ;CACR,WAAW;CACX,OAAO;CACR,EAEK,IAAsC;CAC1C,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV,EAuBK,IAAwB;CAAE,UAAU;CAAK,MAAM;CAAoB,EAEnE,IAAc,EAAM,YACvB,EAAE,WAAQ,UAAO,SAAM,UAAO,aAAU,IAAO,YAAS,SAAM,cAAW,GAAG,KAAS,MAAQ;CAC5F,IAAM,IAAc,KAAW,MACzB,IAAM,IAAc,EAAO,SAAS,EAAO,MAC3C,IAAmB,IAAc,uDAAuD,KAAA,GAExF,IAAe,KAAQ,OAEzB,IACE,kBAAC,GAAD;EAAM,MAAM;EAAiB,MAAK;EAAK,WAAU;EAAqC,CAAA,GACtF,OAHF,kBAAC,GAAD;EAAc,MAAK;YAAM,EAAc,EAAK;EAAgB,CAAA;AAKhE,KAAI,KAAS,MAAM;EAEjB,IAAM,IAAe,KAAU,EAAM,OAAO,EAAE,CAAC,aAAa,GAAG,EAAM,MAAM,EAAE,EACvE,IAAW,EAAY;AAE7B,SACE,kBAAC,GAAD;GAAiB,MAAK;aACpB,kBAAC,GAAD;IAEO;IACL,GAAK,IAAc;KAAE,MAAM;KAAmB;KAAS,GAAG,EAAE;IAC5D,SAAS;KAAE,SAAS;KAAK,OAAO;KAAM;IACtC,SAAS;KAAE,SAAS;KAAG,OAAO;KAAG;IACjC,MAAM;KAAE,SAAS;KAAK,OAAO;KAAM;IACnC,YAAY;IACZ,WAAW,EACT,EAAoB;KAAE;KAAO;KAAM,CAAC,EACpC,GACA,EACD;IACD,GAAI,EAAY,EAAM;cAbxB;KAeG,CAAC,KACA,kBAAC,QAAD;MACE,WAAW,EACT,yBACA,MAAS,OAAO,sBAAsB,mBACtC,EACD;MACD,eAAY;MACZ,CAAA;KAEH;KACA;KACG;MA1BC,EA0BD;GACU,CAAA;;CAKtB,IAAM,IAAY,KAAU,WACtB,IAAe,KAAU,EAAU,OAAO,EAAE,CAAC,aAAa,GAAG,EAAU,MAAM,EAAE,EAC/E,IAAW,EAAY;AAE7B,QACE,kBAAC,GAAD;EAAiB,MAAK;YACpB,kBAAC,GAAD;GAEO;GACL,GAAK,IAAc;IAAE,MAAM;IAAmB;IAAS,GAAG,EAAE;GAC5D,SAAS,EAAE,SAAS,IAAK;GACzB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,IAAK;GACtB,YAAY;GACZ,WAAW,EACT,EAAoB;IAAE,QAAQ;IAAW;IAAM,CAAC,EAChD,GACA,EACD;GACD,GAAI,EAAY,EAAM;aAbxB;IAeG,CAAC,KACA,kBAAC,QAAD;KACE,WAAW,EACT,yBACA,MAAS,OAAO,sBAAsB,mBACtC,EACD;KACD,eAAY;KACZ,CAAA;IAEH;IACA;IACG;KA1BC,EA0BD;EACU,CAAA;EAGvB;AACD,EAAY,cAAc"}
+{"version":3,"file":"status-badge.js","names":[],"sources":["../../src/composed/status-badge.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Badge } from '../ui/badge'\nimport { Dot, type DotColor } from '../ui/dot'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { motionProps } from '../ui/lib/motion'\n\n/**\n * Domain work-statuses → the shared intent colour used by both the Badge pill\n * and the leading Dot. StatusBadge is a thin semantic wrapper: it owns the\n * status vocabulary and composes `<Badge>` + `<Dot>` rather than re-styling a pill.\n */\ntype StatusKey =\n  | 'active' | 'pending' | 'approved' | 'rejected' | 'completed'\n  | 'blocked' | 'in-progress' | 'review' | 'cancelled' | 'draft'\n\n// Intent colours shared by Badge + Dot (never 'current' — that's a Badge-internal mode).\ntype IntentColor = Exclude<DotColor, 'current'>\n\nconst STATUS_TO_COLOR: Record<StatusKey, IntentColor> = {\n  active: 'success',\n  approved: 'success',\n  completed: 'success',\n  pending: 'warning',\n  rejected: 'error',\n  blocked: 'error',\n  'in-progress': 'accent',\n  review: 'info',\n  cancelled: 'neutral',\n  draft: 'neutral',\n}\n\ntype StatusColor = 'success' | 'warning' | 'error' | 'info' | 'neutral'\n\ninterface StatusBadgeBaseProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {\n  label?: string\n  hideDot?: boolean\n  size?: 'sm' | 'md'\n  onClick?: () => void\n  /** Trailing icon. When omitted on a clickable badge, a chevron is shown. */\n  icon?: IconInput\n}\n\ninterface StatusBadgeWithStatus extends StatusBadgeBaseProps {\n  status?: StatusKey\n  color?: never\n}\n\ninterface StatusBadgeWithColor extends StatusBadgeBaseProps {\n  status?: never\n  color: StatusColor\n}\n\nexport type StatusBadgeProps = StatusBadgeWithStatus | StatusBadgeWithColor\n\n/* Between durations.moderate02 (0.24) and slow01 (0.4) — smooth status morph. */\nconst statusMorphTransition = { duration: 0.3, ease: 'easeOut' as const }\n\nconst titleCase = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)\n\nconst StatusBadge = React.forwardRef<HTMLElement, StatusBadgeProps>(\n  ({ status, color, size = 'md', label, hideDot = false, onClick, icon, className, ...props }, ref) => {\n    // A `color` wins if given; otherwise derive from `status` (default 'pending').\n    const key = color ?? status ?? 'pending'\n    const dotColor: IntentColor = color ?? STATUS_TO_COLOR[(status ?? 'pending') as StatusKey]\n    const displayLabel = label ?? titleCase(color ?? status ?? 'pending').replace('-', ' ')\n    const isClickable = onClick != null\n\n    // Trailing: an explicit icon, else a chevron for clickable badges.\n    const endIcon: IconInput | undefined = icon ?? (isClickable ? IconChevronDown : undefined)\n\n    return (\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={key}\n          initial={{ opacity: 0.6, scale: 0.95 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0.6, scale: 0.95 }}\n          transition={statusMorphTransition}\n          className=\"inline-flex\"\n          {...motionProps(props)}\n        >\n          <Badge\n            ref={ref}\n            variant=\"soft\"\n            color={dotColor}\n            size={size}\n            onClick={onClick}\n            startIcon={!hideDot ? <Dot color={dotColor} size=\"sm\" /> : undefined}\n            endIcon={endIcon}\n            className={className}\n          >\n            {displayLabel}\n          </Badge>\n        </motion.span>\n      </AnimatePresence>\n    )\n  },\n)\nStatusBadge.displayName = 'StatusBadge'\n\nexport { StatusBadge }\n"],"mappings":";;;;;;;;;AAuBA,IAAM,IAAkD;CACtD,QAAQ;CACR,UAAU;CACV,WAAW;CACX,SAAS;CACT,UAAU;CACV,SAAS;CACT,eAAe;CACf,QAAQ;CACR,WAAW;CACX,OAAO;CACR,EA0BK,IAAwB;CAAE,UAAU;CAAK,MAAM;CAAoB,EAEnE,KAAa,MAAc,EAAE,OAAO,EAAE,CAAC,aAAa,GAAG,EAAE,MAAM,EAAE,EAEjE,IAAc,EAAM,YACvB,EAAE,WAAQ,UAAO,UAAO,MAAM,UAAO,aAAU,IAAO,YAAS,SAAM,cAAW,GAAG,KAAS,MAAQ;CAEnG,IAAM,IAAM,KAAS,KAAU,WACzB,IAAwB,KAAS,EAAiB,KAAU,YAC5D,IAAe,KAAS,EAAU,KAAS,KAAU,UAAU,CAAC,QAAQ,KAAK,IAAI,EAIjF,IAAiC,MAHnB,KAAW,OAGiD,KAAA,IAAlB;AAE9D,QACE,kBAAC,GAAD;EAAiB,MAAK;YACpB,kBAAC,EAAO,MAAR;GAEE,SAAS;IAAE,SAAS;IAAK,OAAO;IAAM;GACtC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,MAAM;IAAE,SAAS;IAAK,OAAO;IAAM;GACnC,YAAY;GACZ,WAAU;GACV,GAAI,EAAY,EAAM;aAEtB,kBAAC,GAAD;IACO;IACL,SAAQ;IACR,OAAO;IACD;IACG;IACT,WAAY,IAA+C,KAAA,IAArC,kBAAC,GAAD;KAAK,OAAO;KAAU,MAAK;KAAO,CAAA;IAC/C;IACE;cAEV;IACK,CAAA;GACI,EApBP,EAoBO;EACE,CAAA;EAGvB;AACD,EAAY,cAAc"}

package/dist/motion/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { motionProps as e, springs as t, stagger as n, tweens as r, withReducedMotion as i } from "../ui/lib/motion.js";
-import { n as a, t as o } from "../_chunks/motion-provider.js";
+import { MotionProvider as a, useMotion as o } from "../_chunks/motion-provider.js";
 //#region src/motion/check-motion-provider.ts
 var s = !1;
 function c() {
@@ -15,4 +15,4 @@ function c() {
 //#region src/motion/index.ts
 c();
 //#endregion
-export { o as MotionProvider, e as motionProps, t as springs, n as stagger, r as tweens, a as useMotion, i as withReducedMotion };
+export { a as MotionProvider, e as motionProps, t as springs, n as stagger, r as tweens, o as useMotion, i as withReducedMotion };

package/dist/shell/bottom-navbar.js

@@ -3,8 +3,8 @@ import { IconProvider as e } from "../ui/icon-context.js";
 import { springs as t } from "../ui/lib/motion.js";
 import { cn as n } from "../ui/lib/utils.js";
 import { Icon as r } from "../ui/icon.js";
-import { t as i } from "../_chunks/normalize-icon.js";
-import { n as a } from "../_chunks/link-context.js";
+import { normalizeIcon as i } from "../_chunks/normalize-icon.js";
+import { useLink as a } from "../_chunks/link-context.js";
 import "./link-context.js";
 import * as o from "react";
 import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
@@ -122,7 +122,7 @@ var x = o.forwardRef(({ currentPath: o = "/", user: y, primaryItems: x = [], mor
 		...w,
 		ref: T,
 		"aria-label": "Mobile navigation",
-		className: n("fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-raised px-ds-05 pb-safe pt-0 md:hidden", C),
+		className: n("fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-chrome px-ds-05 pb-safe pt-0 md:hidden", C),
 		children: [x.map((e) => /* @__PURE__ */ f(b, {
 			item: e,
 			isActive: M(e.href, e.exact)

package/dist/shell/bottom-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven: accepts currentPath, user, navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport { IconDots, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  /** Icon for this nav item. Accepts any `IconInput`. */\n  icon: IconInput\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n}\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavbarProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** User information (used to determine admin status, presence) */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow menu */\n  moreItems?: BottomNavItem[]\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (internal)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  const isMultiDigit = count >= 10\n  return (\n    <span\n      aria-label={`${count} notifications`}\n      className={cn(\n        'absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75',\n        isMultiDigit ? 'px-0.5' : '',\n      )}\n    >\n      {display}\n    </span>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  onClick?: () => void\n}) {\n  const Link = useLink()\n  const prefersReducedMotion = useReducedMotion()\n  return (\n    <motion.div whileTap={prefersReducedMotion ? undefined : { y: -2 }} transition={prefersReducedMotion ? { duration: 0 } : springs.snappy} className=\"flex max-w-[70px] flex-1\">\n      <Link\n        href={item.href}\n        onClick={onClick}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard',\n          isActive\n            ? 'font-semibold text-accent-11'\n            : 'text-surface-fg-subtle',\n        )}\n      >\n        <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n          {isActive && (\n            <motion.div\n              layoutId=\"bottom-nav-indicator\"\n              className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n              aria-hidden=\"true\"\n              transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            />\n          )}\n          <div className=\"relative p-ds-03\">\n            <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          <span className=\"text-center\">{item.title}</span>\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user: _user,\n      primaryItems = [],\n      moreItems = [],\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const prefersReducedMotion = useReducedMotion()\n    const [showMore, setShowMore] = useState(false)\n    const overlayRef = useRef<HTMLDivElement>(null)\n\n    const closeMore = useCallback(() => setShowMore(false), [])\n\n    // Focus first focusable item when overlay opens\n    useEffect(() => {\n      if (showMore && overlayRef.current) {\n        const firstFocusable = overlayRef.current.querySelector<HTMLElement>('a, button')\n        firstFocusable?.focus()\n      }\n    }, [showMore])\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    // Check if any \"more\" item is active\n    const isMoreActive = moreItems.some((item) =>\n      isActive(item.href, item.exact),\n    )\n\n    return (\n      <>\n        {/* More Menu Overlay */}\n        <AnimatePresence>\n        {showMore && (\n          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape\n          <div\n            className=\"fixed inset-0 z-overlay md:hidden\"\n            onClick={() => setShowMore(false)}\n          >\n          <div className=\"absolute inset-0 bg-overlay\" />\n          { }\n          <motion.div\n            ref={overlayRef}\n            role=\"dialog\"\n            aria-label=\"More navigation\"\n            initial={{ y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.smooth}\n            className=\"absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              e.stopPropagation()\n              if (e.key === 'Escape') closeMore()\n            }}\n          >\n            <div className=\"mb-ds-04 flex items-center justify-between\">\n              <span className=\"text-ds-md font-semibold text-surface-fg\">\n                More\n              </span>\n              <button\n                onClick={() => setShowMore(false)}\n                aria-label=\"Close more menu\"\n                className=\"flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover\"\n              >\n                <Icon icon={IconX} size=\"sm\" className=\"text-surface-fg-muted\" />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-ds-03\">\n              {moreItems.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  onClick={() => setShowMore(false)}\n                  className={cn(\n                    'flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-ds-sm transition-colors ease-productive-standard',\n                    isActive(item.href, item.exact)\n                      ? 'bg-surface-raised-hover text-accent-11'\n                      : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                  )}\n                >\n                  <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n                  <span className=\"text-center\">\n                    {item.title}\n                  </span>\n                </Link>\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      )}\n        </AnimatePresence>\n\n      {/* Bottom Navigation Bar */}\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-raised px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {primaryItems.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n          />\n        ))}\n\n        {/* More Button */}\n        {moreItems.length > 0 && (\n          <motion.button\n            type=\"button\"\n            onClick={() => setShowMore(!showMore)}\n            aria-label=\"More navigation options\"\n            aria-expanded={showMore}\n            whileTap={prefersReducedMotion ? undefined : { y: -2 }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            className={cn(\n              'flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm',\n              showMore || isMoreActive\n                ? 'font-semibold text-accent-11'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n              {(showMore || isMoreActive) && (\n                <motion.div\n                  layoutId=\"bottom-nav-indicator\"\n                  className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n                  aria-hidden=\"true\"\n                  transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n                />\n              )}\n              <div className=\"p-ds-03\">\n                <Icon icon={IconDots} />\n              </div>\n              <span className=\"text-center\">More</span>\n            </div>\n          </motion.button>\n        )}\n      </nav>\n    </>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}
+{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven: accepts currentPath, user, navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport { IconDots, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  /** Icon for this nav item. Accepts any `IconInput`. */\n  icon: IconInput\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n}\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavbarProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** User information (used to determine admin status, presence) */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow menu */\n  moreItems?: BottomNavItem[]\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (internal)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  const isMultiDigit = count >= 10\n  return (\n    <span\n      aria-label={`${count} notifications`}\n      className={cn(\n        'absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75',\n        isMultiDigit ? 'px-0.5' : '',\n      )}\n    >\n      {display}\n    </span>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  onClick?: () => void\n}) {\n  const Link = useLink()\n  const prefersReducedMotion = useReducedMotion()\n  return (\n    <motion.div whileTap={prefersReducedMotion ? undefined : { y: -2 }} transition={prefersReducedMotion ? { duration: 0 } : springs.snappy} className=\"flex max-w-[70px] flex-1\">\n      <Link\n        href={item.href}\n        onClick={onClick}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard',\n          isActive\n            ? 'font-semibold text-accent-11'\n            : 'text-surface-fg-subtle',\n        )}\n      >\n        <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n          {isActive && (\n            <motion.div\n              layoutId=\"bottom-nav-indicator\"\n              className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n              aria-hidden=\"true\"\n              transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            />\n          )}\n          <div className=\"relative p-ds-03\">\n            <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          <span className=\"text-center\">{item.title}</span>\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user: _user,\n      primaryItems = [],\n      moreItems = [],\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const prefersReducedMotion = useReducedMotion()\n    const [showMore, setShowMore] = useState(false)\n    const overlayRef = useRef<HTMLDivElement>(null)\n\n    const closeMore = useCallback(() => setShowMore(false), [])\n\n    // Focus first focusable item when overlay opens\n    useEffect(() => {\n      if (showMore && overlayRef.current) {\n        const firstFocusable = overlayRef.current.querySelector<HTMLElement>('a, button')\n        firstFocusable?.focus()\n      }\n    }, [showMore])\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    // Check if any \"more\" item is active\n    const isMoreActive = moreItems.some((item) =>\n      isActive(item.href, item.exact),\n    )\n\n    return (\n      <>\n        {/* More Menu Overlay */}\n        <AnimatePresence>\n        {showMore && (\n          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape\n          <div\n            className=\"fixed inset-0 z-overlay md:hidden\"\n            onClick={() => setShowMore(false)}\n          >\n          <div className=\"absolute inset-0 bg-overlay\" />\n          { }\n          <motion.div\n            ref={overlayRef}\n            role=\"dialog\"\n            aria-label=\"More navigation\"\n            initial={{ y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.smooth}\n            className=\"absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              e.stopPropagation()\n              if (e.key === 'Escape') closeMore()\n            }}\n          >\n            <div className=\"mb-ds-04 flex items-center justify-between\">\n              <span className=\"text-ds-md font-semibold text-surface-fg\">\n                More\n              </span>\n              <button\n                onClick={() => setShowMore(false)}\n                aria-label=\"Close more menu\"\n                className=\"flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover\"\n              >\n                <Icon icon={IconX} size=\"sm\" className=\"text-surface-fg-muted\" />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-ds-03\">\n              {moreItems.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  onClick={() => setShowMore(false)}\n                  className={cn(\n                    'flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-ds-sm transition-colors ease-productive-standard',\n                    isActive(item.href, item.exact)\n                      ? 'bg-surface-raised-hover text-accent-11'\n                      : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                  )}\n                >\n                  <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n                  <span className=\"text-center\">\n                    {item.title}\n                  </span>\n                </Link>\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      )}\n        </AnimatePresence>\n\n      {/* Bottom Navigation Bar */}\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-chrome px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {primaryItems.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n          />\n        ))}\n\n        {/* More Button */}\n        {moreItems.length > 0 && (\n          <motion.button\n            type=\"button\"\n            onClick={() => setShowMore(!showMore)}\n            aria-label=\"More navigation options\"\n            aria-expanded={showMore}\n            whileTap={prefersReducedMotion ? undefined : { y: -2 }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            className={cn(\n              'flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm',\n              showMore || isMoreActive\n                ? 'font-semibold text-accent-11'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n              {(showMore || isMoreActive) && (\n                <motion.div\n                  layoutId=\"bottom-nav-indicator\"\n                  className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n                  aria-hidden=\"true\"\n                  transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n                />\n              )}\n              <div className=\"p-ds-03\">\n                <Icon icon={IconDots} />\n              </div>\n              <span className=\"text-center\">More</span>\n            </div>\n          </motion.button>\n        )}\n      </nav>\n    </>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}

package/dist/shell/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { n as e, t } from "../_chunks/link-context.js";
+import { LinkProvider as e, useLink as t } from "../_chunks/link-context.js";
 import { CommandRegistryProvider as n, useCommandRegistry as r } from "./command-registry.js";
 import { AppCommandPalette as i } from "./app-command-palette.js";
 import "./link-context.js";
@@ -8,4 +8,4 @@ import { NotificationCenter as o } from "./notification-center.js";
 import { NotificationPreferences as s } from "./notification-preferences.js";
 import { AppSidebar as c } from "./sidebar.js";
 import { TopBar as l } from "./top-bar.js";
-export { i as AppCommandPalette, c as AppSidebar, a as BottomNavbar, n as CommandRegistryProvider, t as LinkProvider, o as NotificationCenter, s as NotificationPreferences, l as TopBar, r as useCommandRegistry, e as useLink };
+export { i as AppCommandPalette, c as AppSidebar, a as BottomNavbar, n as CommandRegistryProvider, e as LinkProvider, o as NotificationCenter, s as NotificationPreferences, l as TopBar, r as useCommandRegistry, t as useLink };

package/dist/shell/link-context.js

@@ -1,3 +1,3 @@
 "use client";
-import { n as e, t } from "../_chunks/link-context.js";
-export { t as LinkProvider, e as useLink };
+import { LinkProvider as e, useLink as t } from "../_chunks/link-context.js";
+export { e as LinkProvider, t as useLink };

package/dist/shell/notification-center.js

@@ -5,7 +5,7 @@ import { Spinner as n } from "../ui/spinner.js";
 import { Icon as r } from "../ui/icon.js";
 import { useIsMobile as i } from "../hooks/use-mobile.js";
 import { Button as a } from "../ui/button.js";
-import { i as o, r as s, t as c } from "../_chunks/popover.js";
+import { Popover as o, PopoverContent as s, PopoverTrigger as c } from "../_chunks/popover.js";
 import { Tooltip as l, TooltipContent as u, TooltipTrigger as d } from "../ui/tooltip.js";
 import { TruncatedText as f } from "../ui/truncated-text.js";
 import { Sheet as p, SheetContent as ee, SheetTitle as m, SheetTrigger as h } from "../ui/sheet.js";
@@ -246,12 +246,12 @@ var M = _.forwardRef(({ notifications: a = [], unreadCount: f, open: g, onOpenCh
 				children: "Notifications"
 			}), Q]
 		})]
-	}) : /* @__PURE__ */ S(c, {
+	}) : /* @__PURE__ */ S(o, {
 		open: g,
 		onOpenChange: _,
 		children: [/* @__PURE__ */ S(l, { children: [/* @__PURE__ */ x(d, {
 			asChild: !0,
-			children: /* @__PURE__ */ x(o, {
+			children: /* @__PURE__ */ x(c, {
 				asChild: !0,
 				children: $
 			})

package/dist/shell/sidebar.js

@@ -2,11 +2,11 @@
 import { IconProvider as e } from "../ui/icon-context.js";
 import { cn as t } from "../ui/lib/utils.js";
 import { Avatar as n, AvatarFallback as r, AvatarImage as i } from "../ui/avatar.js";
-import { t as a } from "../_chunks/normalize-icon.js";
+import { normalizeIcon as a } from "../_chunks/normalize-icon.js";
 import { Button as o } from "../ui/button.js";
 import { Collapsible as s, CollapsibleContent as c, CollapsibleTrigger as l } from "../ui/collapsible.js";
 import { TruncatedText as u } from "../ui/truncated-text.js";
-import { n as d } from "../_chunks/link-context.js";
+import { useLink as d } from "../_chunks/link-context.js";
 import { Sidebar as f, SidebarContent as p, SidebarFooter as m, SidebarGroup as h, SidebarGroupAction as g, SidebarGroupContent as _, SidebarGroupLabel as v, SidebarHeader as y, SidebarMenu as b, SidebarMenuBadge as x, SidebarMenuButton as S, SidebarMenuItem as C, SidebarMenuSub as w, SidebarMenuSubButton as T, SidebarMenuSubItem as E, SidebarSeparator as D } from "../ui/sidebar.js";
 import "./link-context.js";
 import * as O from "react";

package/dist/shell/top-bar.js

@@ -3,7 +3,7 @@ import { IconProvider as e } from "../ui/icon-context.js";
 import { cn as t } from "../ui/lib/utils.js";
 import { Icon as n } from "../ui/icon.js";
 import { Avatar as r, AvatarFallback as i, AvatarImage as a } from "../ui/avatar.js";
-import { t as o } from "../_chunks/normalize-icon.js";
+import { normalizeIcon as o } from "../_chunks/normalize-icon.js";
 import { DropdownMenu as s, DropdownMenuContent as c, DropdownMenuItem as l, DropdownMenuSeparator as u, DropdownMenuTrigger as d } from "../ui/dropdown-menu.js";
 import { Tooltip as f, TooltipContent as p, TooltipTrigger as m } from "../ui/tooltip.js";
 import { TruncatedText as h } from "../ui/truncated-text.js";
@@ -17,7 +17,7 @@ var T = _.forwardRef(({ className: e, children: n, ...r }, i) => {
 	return /* @__PURE__ */ y("header", {
 		...r,
 		ref: i,
-		className: t("z-sticky w-full border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04 md:px-ds-06", a ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center", e),
+		className: t("z-sticky w-full border-b border-surface-border-strong bg-surface-chrome px-ds-05 py-ds-04 md:px-ds-06", a ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center", e),
 		children: n
 	});
 });