@photon-ai/pho-ui 2.16.0 → 2.17.0

package/dist/chunks/{log-list-0AXnjFrk.js.map → log-list-BERiO4UJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"log-list-0AXnjFrk.js","names":[],"sources":["../../src/components/log-list/log-list.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useRef,\n  type ComponentProps,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { Badge, type BadgeColor, type BadgeSize } from \"../badge\";\nimport { Button } from \"../button\";\nimport { Skeleton } from \"../skeleton\";\nimport { Spinner } from \"../spinner\";\nimport { StatusView } from \"../status-view\";\nimport { Tooltip } from \"../tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { useCopy } from \"../../utils/use-copy\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/**\n * Log List — rows of requests, deliveries, or messages, newest first,\n * each one line: a mono id you can copy, a status, the method, what\n * happened, and how long ago. Reach for it where a `DataTable` would be\n * columns of the same few fields: a log reads left to right as one line,\n * and the page filters it from a `FilterBar` pinned above.\n *\n * Design notes:\n * - The surface is `BasicPage.Card`'s: hairline border, `base` radius,\n *   hairline rules between rows. It sits in a `Stack` as any card does.\n * - The row is one link (or one button). It stretches over the row from\n *   the label, the way a `DataTable` row's does, so the whole row is one\n *   pointer target and one tab stop; the copy control sits above it.\n * - The id truncates in the middle, keeping the prefix that says what it\n *   is and the tail that tells it apart. The full id is a tooltip away,\n *   and one click copies it.\n * - `LoadMore` is the sentinel at the end: it asks for the next page as\n *   it scrolls into view, and offers a button for keyboards and for\n *   browsers without an observer.\n */\n\n/** Same chrome as `BasicPage.Card`. */\nconst LOG_LIST_SURFACE =\n  \"rounded-base border border-pho-secondary bg-pho-primary divide-y divide-pho-secondary\";\n\n/** Middle truncation: the prefix and this many after it, then the tail. */\nconst ID_HEAD = 12;\nconst ID_TAIL = 5;\n\n/**\n * Keep the start and the end of an id and fold the middle into an\n * ellipsis — `pho_req_01m04axjqrfzxv4xjet40a84gb` reads\n * `pho_req_01m0…a84gb`. Ids that fit are returned whole.\n */\nexport function truncateMiddle(\n  value: string,\n  head = ID_HEAD,\n  tail = ID_TAIL,\n): string {\n  if (value.length <= head + tail + 1) return value;\n  return `${value.slice(0, head)}…${value.slice(-tail)}`;\n}\n\n/* -------------------------------- status -------------------------------- */\n\nconst SUCCESS_WORDS = new Set([\n  \"success\",\n  \"succeeded\",\n  \"successful\",\n  \"delivered\",\n  \"ok\",\n  \"sent\",\n  \"received\",\n  \"completed\",\n  \"complete\",\n  \"done\",\n  \"active\",\n]);\nconst ERROR_WORDS = new Set([\n  \"failed\",\n  \"failure\",\n  \"error\",\n  \"errored\",\n  \"rejected\",\n  \"undelivered\",\n  \"timeout\",\n  \"timed_out\",\n  \"timed out\",\n  \"canceled\",\n  \"cancelled\",\n]);\nconst WARNING_WORDS = new Set([\n  \"pending\",\n  \"queued\",\n  \"retrying\",\n  \"processing\",\n  \"sending\",\n  \"in_progress\",\n  \"in progress\",\n  \"scheduled\",\n  \"waiting\",\n]);\n\n/**\n * The `Badge` color for a log status: an HTTP status code (2xx success,\n * 3xx gray, 4xx warning, 5xx error) or a word (`delivered` / `failed` /\n * `pending`). Anything else is gray.\n */\nexport function logStatusColor(status: number | string): BadgeColor {\n  if (typeof status === \"number\") {\n    if (status < 300) return \"success\";\n    if (status < 400) return \"gray\";\n    if (status < 500) return \"warning\";\n    return \"error\";\n  }\n  const word = status.trim().toLowerCase();\n  if (/^\\d{3}$/.test(word)) return logStatusColor(Number(word));\n  if (SUCCESS_WORDS.has(word)) return \"success\";\n  if (ERROR_WORDS.has(word)) return \"error\";\n  if (WARNING_WORDS.has(word)) return \"warning\";\n  return \"gray\";\n}\n\n/** A status word as a label: `timed_out` reads `Timed out`. */\nexport function logStatusLabel(status: number | string): string {\n  if (typeof status === \"number\") return String(status);\n  const word = status.trim().replace(/_/g, \" \");\n  return word.charAt(0).toUpperCase() + word.slice(1);\n}\n\nexport interface LogStatusProps extends Omit<\n  ComponentProps<\"span\">,\n  \"children\" | \"color\"\n> {\n  /** An HTTP status code or a status word. */\n  value: number | string;\n  /** Override the derived word. */\n  label?: ReactNode;\n  /** Badge size. @default \"sm\" */\n  size?: BadgeSize;\n}\n\n/** The status slot — a low-contrast `Badge` colored by `logStatusColor`. */\nfunction Status({\n  value,\n  label,\n  size = \"sm\",\n  className,\n  ...props\n}: LogStatusProps) {\n  return (\n    <Badge\n      color={logStatusColor(value)}\n      contrast=\"low\"\n      size={size}\n      className={cn(\"tabular-nums\", className)}\n      {...props}\n    >\n      {label ?? logStatusLabel(value)}\n    </Badge>\n  );\n}\n\n/** The method slot — `POST`, `GET` as a quiet mono chip. */\nfunction Method({\n  className,\n  ...props\n}: ComponentProps<\"span\"> & { ref?: Ref<HTMLSpanElement> }) {\n  return (\n    <span\n      className={cn(\n        \"bg-pho-secondary text-pho-secondary inline-flex h-5 min-w-12 shrink-0 items-center justify-center rounded-sm px-1.5 font-mono text-xs font-medium whitespace-nowrap\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ---------------------------------- id ---------------------------------- */\n\n/**\n * The id cell: a mono button that copies the full id, with a tooltip\n * holding the whole of it. The cell is a fixed width in characters so\n * ids line up down the list.\n */\nfunction IdCell({ id, cellId }: { id: string; cellId: string }) {\n  const { copied, copy } = useCopy();\n  return (\n    <Tooltip.Root>\n      <Tooltip.Trigger\n        id={cellId}\n        aria-label={copied ? `${id} copied` : `Copy ${id}`}\n        data-copied={copied || undefined}\n        onClick={() => void copy(id)}\n        className={cn(\n          \"text-pho-secondary outline-pho-brand hover:text-pho-primary relative z-10 -mx-1 w-[calc(18ch+0.5rem)] shrink-0 cursor-pointer truncate rounded-sm px-1 py-0.5 text-left font-mono text-xs transition-colors duration-100 ease-linear focus-visible:outline-2\",\n          \"data-[copied]:text-pho-success\",\n        )}\n      >\n        {copied ? \"Copied\" : truncateMiddle(id)}\n      </Tooltip.Trigger>\n      <output className=\"sr-only\" aria-live=\"polite\">\n        {copied ? \"Copied\" : \"\"}\n      </output>\n      <Tooltip.Portal>\n        <Tooltip.Positioner>\n          <Tooltip.Popup className=\"font-mono\">{id}</Tooltip.Popup>\n        </Tooltip.Positioner>\n      </Tooltip.Portal>\n    </Tooltip.Root>\n  );\n}\n\n/* ---------------------------------- row --------------------------------- */\n\nexport interface LogListRowProps extends Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"onClick\" | \"id\"\n> {\n  /** The record's id — mono, middle-truncated, copied on click. */\n  id?: string;\n  /** The status slot — usually `LogList.Status`. */\n  status?: ReactNode;\n  /** The method — `POST`, `GET`; rendered in `LogList.Method`. */\n  method?: string;\n  /** What happened — the route, the event type, the message. */\n  label: ReactNode;\n  /** The label in mono — for a route or an event type. */\n  code?: boolean;\n  /**\n   * The line under the label, with real content: who received what from\n   * whom, the destination that answered. A sentence, with its period.\n   */\n  description?: ReactNode;\n  /** Trailing: how long it took — \"59 ms\". */\n  duration?: ReactNode;\n  /** Trailing: when — \"2 min ago\". */\n  time?: ReactNode;\n  /** Trailing content before the duration and time. */\n  children?: ReactNode;\n  /** The row is a link to its page, through the host's `LinkProvider`. */\n  href?: string;\n  /** The row is a button. */\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  /**\n   * Replace the row's link element — a router's `Link`, the way Base UI\n   * components take `render`. The row's classes and handlers merge in.\n   */\n  render?: useRender.RenderProp;\n  /** The row whose page is open beside the list — it keeps the wash. */\n  current?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction Row({\n  id,\n  status,\n  method,\n  label,\n  code,\n  description,\n  duration,\n  time,\n  children,\n  href,\n  onClick,\n  render,\n  current,\n  className,\n  ...props\n}: LogListRowProps) {\n  const Link = useLinkComponent();\n  const base = useId();\n  const interactive = href != null || onClick != null || render != null;\n  const cellIds = {\n    id: `${base}-id`,\n    status: `${base}-status`,\n    method: `${base}-method`,\n    meta: `${base}-meta`,\n  };\n  const hasMeta = children != null || duration != null || time != null;\n  const describedBy = [\n    id != null && cellIds.id,\n    status != null && cellIds.status,\n    method != null && cellIds.method,\n    hasMeta && cellIds.meta,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n  const primary = useRender({\n    render: render ?? (href != null ? <Link href={href} /> : undefined),\n    defaultTagName: href != null ? \"a\" : onClick != null ? \"button\" : \"span\",\n    props: {\n      className: cn(\n        \"text-pho-primary block min-w-0 max-w-full truncate text-left text-base font-medium outline-none\",\n        code && \"font-mono text-xs\",\n        // The one link, stretched over the row; the ring is the row's.\n        interactive &&\n          \"cursor-pointer after:absolute after:inset-0 after:content-['']\",\n      ),\n      onClick,\n      type:\n        render == null && href == null && onClick != null\n          ? \"button\"\n          : undefined,\n      \"aria-current\": current ? \"page\" : undefined,\n      \"aria-describedby\": describedBy || undefined,\n      \"data-log-primary\": \"\",\n      children: label,\n    },\n  });\n  return (\n    <div\n      data-log-row=\"\"\n      data-current={current || undefined}\n      className={cn(\n        \"relative flex min-h-12 min-w-0 items-center gap-3 px-5 py-2.5\",\n        interactive &&\n          \"hover:bg-pho-primary-hover outline-pho-brand transition-colors has-[[data-log-primary]:focus-visible]:outline-2 has-[[data-log-primary]:focus-visible]:-outline-offset-2\",\n        current && \"bg-pho-primary-hover\",\n        // The wash follows the card's rounding (minus the 1px border).\n        \"first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]\",\n        className,\n      )}\n      {...props}\n    >\n      {id != null ? <IdCell id={id} cellId={cellIds.id} /> : null}\n      {status != null ? (\n        <span id={cellIds.status} className=\"flex shrink-0 items-center\">\n          {status}\n        </span>\n      ) : null}\n      {method != null ? <Method id={cellIds.method}>{method}</Method> : null}\n      <div data-log-primary-cell=\"\" className=\"min-w-0 flex-1\">\n        {primary}\n        {description != null ? (\n          <p className=\"text-pho-description truncate text-xs\">{description}</p>\n        ) : null}\n      </div>\n      {hasMeta ? (\n        <div\n          id={cellIds.meta}\n          className=\"text-pho-description ml-auto flex shrink-0 items-center gap-3 text-xs whitespace-nowrap tabular-nums\"\n        >\n          {children}\n          {duration != null ? <span>{duration}</span> : null}\n          {time != null ? <span>{time}</span> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/* -------------------------------- states -------------------------------- */\n\nexport interface LogListEmptyProps extends Omit<\n  ComponentProps<\"div\">,\n  \"title\" | \"children\"\n> {\n  /** One short line naming the state. @default \"Nothing here yet.\" */\n  title?: ReactNode;\n  /** What fills it, or why it is empty. */\n  description?: ReactNode;\n  /** An action, when there is one. */\n  children?: ReactNode;\n}\n\n/** The list with no rows — `StatusView` at card size. */\nfunction Empty({\n  title = \"Nothing here yet.\",\n  description,\n  children,\n  className,\n  ...props\n}: LogListEmptyProps) {\n  return (\n    <div className={cn(\"flex justify-center\", className)} {...props}>\n      <StatusView\n        size=\"sm\"\n        title={title}\n        description={description}\n        actions={children}\n      />\n    </div>\n  );\n}\n\n/** Bones in the rows' place while the first page is on its way. */\nfunction Loading({ rows = 5 }: { rows?: number }) {\n  return (\n    <>\n      {Array.from({ length: rows }, (_, index) => (\n        <div\n          key={index}\n          aria-hidden\n          className=\"flex min-h-12 items-center gap-3 px-5 py-2.5\"\n        >\n          <Skeleton className=\"h-3.5 w-32\" />\n          <Skeleton className=\"h-5 w-12 rounded-full\" />\n          <Skeleton className=\"h-3.5 w-48\" />\n          <Skeleton className=\"ml-auto h-3.5 w-16\" />\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport interface LogListLoadMoreProps extends Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n> {\n  /** Asked for as the sentinel scrolls into view, and on the button. */\n  onLoadMore: () => void;\n  /** The next page is on its way — the sentinel shows a spinner and waits. */\n  loading?: boolean;\n  /** Nothing left to load — renders nothing. @default true */\n  hasMore?: boolean;\n  /** How far ahead of the viewport to ask. @default \"200px\" */\n  rootMargin?: string;\n  /** The button's words. @default \"Load more\" */\n  label?: ReactNode;\n}\n\n/**\n * The sentinel at the end of the list. An `IntersectionObserver` asks for\n * the next page as it comes into view (`rootMargin` ahead of it); while\n * `loading` it shows a spinner and asks for nothing. The button is the\n * same request for keyboards and for a browser without the observer.\n * SSR-safe: the observer is created in an effect.\n */\nfunction LoadMore({\n  onLoadMore,\n  loading,\n  hasMore = true,\n  rootMargin = \"200px\",\n  label = \"Load more\",\n  className,\n  ...props\n}: LogListLoadMoreProps) {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const latest = useRef(onLoadMore);\n  latest.current = onLoadMore;\n  useEffect(() => {\n    const el = ref.current;\n    if (!hasMore || loading || el == null) return;\n    if (typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) latest.current();\n      },\n      { rootMargin },\n    );\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [hasMore, loading, rootMargin]);\n  if (!hasMore) return null;\n  return (\n    <div\n      ref={ref}\n      data-log-load-more=\"\"\n      aria-busy={loading || undefined}\n      className={cn(\n        \"flex min-h-12 items-center justify-center px-5 py-2\",\n        className,\n      )}\n      {...props}\n    >\n      {loading ? (\n        <Spinner aria-label=\"Loading more\" className=\"text-pho-secondary\" />\n      ) : (\n        <Button variant=\"ghost\" size=\"sm\" onClick={() => onLoadMore()}>\n          {label}\n        </Button>\n      )}\n    </div>\n  );\n}\n\n/* ---------------------------------- root -------------------------------- */\n\nexport interface LogListRootProps extends ComponentProps<\"div\"> {\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The card the rows stack in. Mark it `aria-busy` while bones show. */\nfunction Root({ className, ...props }: LogListRootProps) {\n  return (\n    <div\n      data-log-list=\"\"\n      className={cn(LOG_LIST_SURFACE, \"min-w-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Log List — a card of one-line log rows.\n *\n * ```tsx\n * <LogList.Root>\n *   <LogList.Row\n *     id=\"pho_req_01m04axjqrfzxv4xjet40a84gb\"\n *     status={<LogList.Status value={200} />}\n *     method=\"POST\"\n *     code\n *     label=\"/v1/messages\"\n *     description=\"+1 332 259 3374 received a message from +1 332 222 1111.\"\n *     duration=\"59 ms\"\n *     time=\"2 min ago\"\n *     href=\"/requests/pho_req_01m04axjqrfzxv4xjet40a84gb\"\n *   />\n *   <LogList.LoadMore onLoadMore={fetchNextPage} loading={isFetching} hasMore={hasNextPage} />\n * </LogList.Root>\n * ```\n */\nexport const LogList = {\n  Root,\n  Row,\n  Status,\n  Method,\n  Empty,\n  Loading,\n  LoadMore,\n};\n"],"mappings":"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"}
+{"version":3,"file":"log-list-BERiO4UJ.js","names":[],"sources":["../../src/components/log-list/log-list.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useRef,\n  type ComponentProps,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { Badge, type BadgeColor, type BadgeSize } from \"../badge\";\nimport { Button } from \"../button\";\nimport { Skeleton } from \"../skeleton\";\nimport { Spinner } from \"../spinner\";\nimport { StatusView } from \"../status-view\";\nimport { Tooltip } from \"../tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { useCopy } from \"../../utils/use-copy\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/**\n * Log List — rows of requests, deliveries, or messages, newest first,\n * each one line: a mono id you can copy, a status, the method, what\n * happened, and how long ago. Reach for it where a `DataTable` would be\n * columns of the same few fields: a log reads left to right as one line,\n * and the page filters it from a `FilterBar` pinned above.\n *\n * Design notes:\n * - The surface is `BasicPage.Card`'s: hairline border, `base` radius,\n *   hairline rules between rows. It sits in a `Stack` as any card does.\n * - The row is one link (or one button). It stretches over the row from\n *   the label, the way a `DataTable` row's does, so the whole row is one\n *   pointer target and one tab stop; the copy control sits above it.\n * - The id truncates in the middle, keeping the prefix that says what it\n *   is and the tail that tells it apart. The full id is a tooltip away,\n *   and one click copies it.\n * - `LoadMore` is the sentinel at the end: it asks for the next page as\n *   it scrolls into view, and offers a button for keyboards and for\n *   browsers without an observer.\n */\n\n/** Same chrome as `BasicPage.Card`. */\nconst LOG_LIST_SURFACE =\n  \"rounded-base border border-pho-secondary bg-pho-primary divide-y divide-pho-secondary\";\n\n/** Middle truncation: the prefix and this many after it, then the tail. */\nconst ID_HEAD = 12;\nconst ID_TAIL = 5;\n\n/**\n * Keep the start and the end of an id and fold the middle into an\n * ellipsis — `pho_req_01m04axjqrfzxv4xjet40a84gb` reads\n * `pho_req_01m0…a84gb`. Ids that fit are returned whole.\n */\nexport function truncateMiddle(\n  value: string,\n  head = ID_HEAD,\n  tail = ID_TAIL,\n): string {\n  if (value.length <= head + tail + 1) return value;\n  return `${value.slice(0, head)}…${value.slice(-tail)}`;\n}\n\n/* -------------------------------- status -------------------------------- */\n\nconst SUCCESS_WORDS = new Set([\n  \"success\",\n  \"succeeded\",\n  \"successful\",\n  \"delivered\",\n  \"ok\",\n  \"sent\",\n  \"received\",\n  \"completed\",\n  \"complete\",\n  \"done\",\n  \"active\",\n]);\nconst ERROR_WORDS = new Set([\n  \"failed\",\n  \"failure\",\n  \"error\",\n  \"errored\",\n  \"rejected\",\n  \"undelivered\",\n  \"timeout\",\n  \"timed_out\",\n  \"timed out\",\n  \"canceled\",\n  \"cancelled\",\n]);\nconst WARNING_WORDS = new Set([\n  \"pending\",\n  \"queued\",\n  \"retrying\",\n  \"processing\",\n  \"sending\",\n  \"in_progress\",\n  \"in progress\",\n  \"scheduled\",\n  \"waiting\",\n]);\n\n/**\n * The `Badge` color for a log status: an HTTP status code (2xx success,\n * 3xx gray, 4xx warning, 5xx error) or a word (`delivered` / `failed` /\n * `pending`). Anything else is gray.\n */\nexport function logStatusColor(status: number | string): BadgeColor {\n  if (typeof status === \"number\") {\n    if (status < 300) return \"success\";\n    if (status < 400) return \"gray\";\n    if (status < 500) return \"warning\";\n    return \"error\";\n  }\n  const word = status.trim().toLowerCase();\n  if (/^\\d{3}$/.test(word)) return logStatusColor(Number(word));\n  if (SUCCESS_WORDS.has(word)) return \"success\";\n  if (ERROR_WORDS.has(word)) return \"error\";\n  if (WARNING_WORDS.has(word)) return \"warning\";\n  return \"gray\";\n}\n\n/** A status word as a label: `timed_out` reads `Timed out`. */\nexport function logStatusLabel(status: number | string): string {\n  if (typeof status === \"number\") return String(status);\n  const word = status.trim().replace(/_/g, \" \");\n  return word.charAt(0).toUpperCase() + word.slice(1);\n}\n\nexport interface LogStatusProps extends Omit<\n  ComponentProps<\"span\">,\n  \"children\" | \"color\"\n> {\n  /** An HTTP status code or a status word. */\n  value: number | string;\n  /** Override the derived word. */\n  label?: ReactNode;\n  /** Badge size. @default \"sm\" */\n  size?: BadgeSize;\n}\n\n/** The status slot — a low-contrast `Badge` colored by `logStatusColor`. */\nfunction Status({\n  value,\n  label,\n  size = \"sm\",\n  className,\n  ...props\n}: LogStatusProps) {\n  return (\n    <Badge\n      color={logStatusColor(value)}\n      contrast=\"low\"\n      size={size}\n      className={cn(\"tabular-nums\", className)}\n      {...props}\n    >\n      {label ?? logStatusLabel(value)}\n    </Badge>\n  );\n}\n\n/** The method slot — `POST`, `GET` as a quiet mono chip. */\nfunction Method({\n  className,\n  ...props\n}: ComponentProps<\"span\"> & { ref?: Ref<HTMLSpanElement> }) {\n  return (\n    <span\n      className={cn(\n        \"bg-pho-secondary text-pho-secondary inline-flex h-5 min-w-12 shrink-0 items-center justify-center rounded-sm px-1.5 font-mono text-xs font-medium whitespace-nowrap\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ---------------------------------- id ---------------------------------- */\n\n/**\n * The id cell: a mono button that copies the full id, with a tooltip\n * holding the whole of it. The cell is a fixed width in characters so\n * ids line up down the list.\n */\nfunction IdCell({ id, cellId }: { id: string; cellId: string }) {\n  const { copied, copy } = useCopy();\n  return (\n    <Tooltip.Root>\n      <Tooltip.Trigger\n        id={cellId}\n        aria-label={copied ? `${id} copied` : `Copy ${id}`}\n        data-copied={copied || undefined}\n        onClick={() => void copy(id)}\n        className={cn(\n          \"text-pho-secondary outline-pho-brand hover:text-pho-primary relative z-10 -mx-1 w-[calc(18ch+0.5rem)] shrink-0 cursor-pointer truncate rounded-sm px-1 py-0.5 text-left font-mono text-xs transition-colors duration-100 ease-linear focus-visible:outline-2\",\n          \"data-[copied]:text-pho-success\",\n        )}\n      >\n        {copied ? \"Copied\" : truncateMiddle(id)}\n      </Tooltip.Trigger>\n      <output className=\"sr-only\" aria-live=\"polite\">\n        {copied ? \"Copied\" : \"\"}\n      </output>\n      <Tooltip.Portal>\n        <Tooltip.Positioner>\n          <Tooltip.Popup className=\"font-mono\">{id}</Tooltip.Popup>\n        </Tooltip.Positioner>\n      </Tooltip.Portal>\n    </Tooltip.Root>\n  );\n}\n\n/* ---------------------------------- row --------------------------------- */\n\nexport interface LogListRowProps extends Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"onClick\" | \"id\"\n> {\n  /** The record's id — mono, middle-truncated, copied on click. */\n  id?: string;\n  /** The status slot — usually `LogList.Status`. */\n  status?: ReactNode;\n  /** The method — `POST`, `GET`; rendered in `LogList.Method`. */\n  method?: string;\n  /** What happened — the route, the event type, the message. */\n  label: ReactNode;\n  /** The label in mono — for a route or an event type. */\n  code?: boolean;\n  /**\n   * The line under the label, with real content: who received what from\n   * whom, the destination that answered. A sentence, with its period.\n   */\n  description?: ReactNode;\n  /** Trailing: how long it took — \"59 ms\". */\n  duration?: ReactNode;\n  /** Trailing: when — \"2 min ago\". */\n  time?: ReactNode;\n  /** Trailing content before the duration and time. */\n  children?: ReactNode;\n  /** The row is a link to its page, through the host's `LinkProvider`. */\n  href?: string;\n  /** The row is a button. */\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  /**\n   * Replace the row's link element — a router's `Link`, the way Base UI\n   * components take `render`. The row's classes and handlers merge in.\n   */\n  render?: useRender.RenderProp;\n  /** The row whose page is open beside the list — it keeps the wash. */\n  current?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction Row({\n  id,\n  status,\n  method,\n  label,\n  code,\n  description,\n  duration,\n  time,\n  children,\n  href,\n  onClick,\n  render,\n  current,\n  className,\n  ...props\n}: LogListRowProps) {\n  const Link = useLinkComponent();\n  const base = useId();\n  const interactive = href != null || onClick != null || render != null;\n  const cellIds = {\n    id: `${base}-id`,\n    status: `${base}-status`,\n    method: `${base}-method`,\n    meta: `${base}-meta`,\n  };\n  const hasMeta = children != null || duration != null || time != null;\n  const describedBy = [\n    id != null && cellIds.id,\n    status != null && cellIds.status,\n    method != null && cellIds.method,\n    hasMeta && cellIds.meta,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n  const primary = useRender({\n    render: render ?? (href != null ? <Link href={href} /> : undefined),\n    defaultTagName: href != null ? \"a\" : onClick != null ? \"button\" : \"span\",\n    props: {\n      className: cn(\n        \"text-pho-primary block min-w-0 max-w-full truncate text-left text-base font-medium outline-none\",\n        code && \"font-mono text-xs\",\n        // The one link, stretched over the row; the ring is the row's.\n        interactive &&\n          \"cursor-pointer after:absolute after:inset-0 after:content-['']\",\n      ),\n      onClick,\n      type:\n        render == null && href == null && onClick != null\n          ? \"button\"\n          : undefined,\n      \"aria-current\": current ? \"page\" : undefined,\n      \"aria-describedby\": describedBy || undefined,\n      \"data-log-primary\": \"\",\n      children: label,\n    },\n  });\n  return (\n    <div\n      data-log-row=\"\"\n      data-current={current || undefined}\n      className={cn(\n        \"relative flex min-h-12 min-w-0 items-center gap-3 px-5 py-2.5\",\n        interactive &&\n          \"hover:bg-pho-primary-hover outline-pho-brand transition-colors has-[[data-log-primary]:focus-visible]:outline-2 has-[[data-log-primary]:focus-visible]:-outline-offset-2\",\n        current && \"bg-pho-primary-hover\",\n        // The wash follows the card's rounding (minus the 1px border).\n        \"first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]\",\n        className,\n      )}\n      {...props}\n    >\n      {id != null ? <IdCell id={id} cellId={cellIds.id} /> : null}\n      {status != null ? (\n        <span id={cellIds.status} className=\"flex shrink-0 items-center\">\n          {status}\n        </span>\n      ) : null}\n      {method != null ? <Method id={cellIds.method}>{method}</Method> : null}\n      <div data-log-primary-cell=\"\" className=\"min-w-0 flex-1\">\n        {primary}\n        {description != null ? (\n          <p className=\"text-pho-description truncate text-xs\">{description}</p>\n        ) : null}\n      </div>\n      {hasMeta ? (\n        <div\n          id={cellIds.meta}\n          className=\"text-pho-description ml-auto flex shrink-0 items-center gap-3 text-xs whitespace-nowrap tabular-nums\"\n        >\n          {children}\n          {duration != null ? <span>{duration}</span> : null}\n          {time != null ? <span>{time}</span> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/* -------------------------------- states -------------------------------- */\n\nexport interface LogListEmptyProps extends Omit<\n  ComponentProps<\"div\">,\n  \"title\" | \"children\"\n> {\n  /** One short line naming the state. @default \"Nothing here yet.\" */\n  title?: ReactNode;\n  /** What fills it, or why it is empty. */\n  description?: ReactNode;\n  /** An action, when there is one. */\n  children?: ReactNode;\n}\n\n/** The list with no rows — `StatusView` at card size. */\nfunction Empty({\n  title = \"Nothing here yet.\",\n  description,\n  children,\n  className,\n  ...props\n}: LogListEmptyProps) {\n  return (\n    <div className={cn(\"flex justify-center\", className)} {...props}>\n      <StatusView\n        size=\"sm\"\n        title={title}\n        description={description}\n        actions={children}\n      />\n    </div>\n  );\n}\n\n/** Bones in the rows' place while the first page is on its way. */\nfunction Loading({ rows = 5 }: { rows?: number }) {\n  return (\n    <>\n      {Array.from({ length: rows }, (_, index) => (\n        <div\n          key={index}\n          aria-hidden\n          className=\"flex min-h-12 items-center gap-3 px-5 py-2.5\"\n        >\n          <Skeleton className=\"h-3.5 w-32\" />\n          <Skeleton className=\"h-5 w-12 rounded-full\" />\n          <Skeleton className=\"h-3.5 w-48\" />\n          <Skeleton className=\"ml-auto h-3.5 w-16\" />\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport interface LogListLoadMoreProps extends Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n> {\n  /** Asked for as the sentinel scrolls into view, and on the button. */\n  onLoadMore: () => void;\n  /** The next page is on its way — the sentinel shows a spinner and waits. */\n  loading?: boolean;\n  /** Nothing left to load — renders nothing. @default true */\n  hasMore?: boolean;\n  /** How far ahead of the viewport to ask. @default \"200px\" */\n  rootMargin?: string;\n  /** The button's words. @default \"Load more\" */\n  label?: ReactNode;\n}\n\n/**\n * The sentinel at the end of the list. An `IntersectionObserver` asks for\n * the next page as it comes into view (`rootMargin` ahead of it); while\n * `loading` it shows a spinner and asks for nothing. The button is the\n * same request for keyboards and for a browser without the observer.\n * SSR-safe: the observer is created in an effect.\n */\nfunction LoadMore({\n  onLoadMore,\n  loading,\n  hasMore = true,\n  rootMargin = \"200px\",\n  label = \"Load more\",\n  className,\n  ...props\n}: LogListLoadMoreProps) {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const latest = useRef(onLoadMore);\n  latest.current = onLoadMore;\n  useEffect(() => {\n    const el = ref.current;\n    if (!hasMore || loading || el == null) return;\n    if (typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) latest.current();\n      },\n      { rootMargin },\n    );\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [hasMore, loading, rootMargin]);\n  if (!hasMore) return null;\n  return (\n    <div\n      ref={ref}\n      data-log-load-more=\"\"\n      aria-busy={loading || undefined}\n      className={cn(\n        \"flex min-h-12 items-center justify-center px-5 py-2\",\n        className,\n      )}\n      {...props}\n    >\n      {loading ? (\n        <Spinner aria-label=\"Loading more\" className=\"text-pho-secondary\" />\n      ) : (\n        <Button variant=\"ghost\" size=\"sm\" onClick={() => onLoadMore()}>\n          {label}\n        </Button>\n      )}\n    </div>\n  );\n}\n\n/* ---------------------------------- root -------------------------------- */\n\nexport interface LogListRootProps extends ComponentProps<\"div\"> {\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The card the rows stack in. Mark it `aria-busy` while bones show. */\nfunction Root({ className, ...props }: LogListRootProps) {\n  return (\n    <div\n      data-log-list=\"\"\n      className={cn(LOG_LIST_SURFACE, \"min-w-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Log List — a card of one-line log rows.\n *\n * ```tsx\n * <LogList.Root>\n *   <LogList.Row\n *     id=\"pho_req_01m04axjqrfzxv4xjet40a84gb\"\n *     status={<LogList.Status value={200} />}\n *     method=\"POST\"\n *     code\n *     label=\"/v1/messages\"\n *     description=\"+1 332 259 3374 received a message from +1 332 222 1111.\"\n *     duration=\"59 ms\"\n *     time=\"2 min ago\"\n *     href=\"/requests/pho_req_01m04axjqrfzxv4xjet40a84gb\"\n *   />\n *   <LogList.LoadMore onLoadMore={fetchNextPage} loading={isFetching} hasMore={hasNextPage} />\n * </LogList.Root>\n * ```\n */\nexport const LogList = {\n  Root,\n  Row,\n  Status,\n  Method,\n  Empty,\n  Loading,\n  LoadMore,\n};\n"],"mappings":"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"}

package/dist/chunks/scroll-area-Zik8t1Mk.js

@@ -0,0 +1,168 @@
+"use client";
+import { t as d } from "./cn-ChIgwEl3.js";
+import "../motion.js";
+import { createContext as A, useContext as k, useLayoutEffect as C, useRef as b } from "react";
+import { Fragment as L, jsx as i, jsxs as v } from "react/jsx-runtime";
+import { motion as $ } from "motion/react";
+import { ScrollArea as c } from "@base-ui/react/scroll-area";
+var N = "pointer-events-none absolute inset-x-0 z-10 h-8", _ = 8, F = 1;
+function P(t, e) {
+  const n = 100 / (t + 1);
+  return Array.from({ length: t }, (o, r) => ({
+    blurPx: r / (t - 1) * e,
+    window: [
+      r * n,
+      (r + 1) * n,
+      (r + 2) * n,
+      (r + 3) * n
+    ]
+  })).filter((o) => o.blurPx > 0);
+}
+var T = P(_, F);
+function U(t, e) {
+  const n = t === "top" ? "to top" : "to bottom", [o, r, l, s] = e;
+  return `linear-gradient(${n}, transparent ${o}%, black ${r}%, black ${l}%, transparent ${s}%)`;
+}
+var z = "var(--pho-surface, var(--background-color-pho-primary))";
+function B(t, e) {
+  return `linear-gradient(${t === "top" ? "to top" : "to bottom"}, color-mix(in oklab, ${e} 20%, transparent) 0%, ${e} 100%)`;
+}
+function y(t, e) {
+  if (t)
+    for (const n of t.children) {
+      const o = n;
+      if (o.dataset.scrollFade === "wash") {
+        o.style.opacity = String(e);
+        continue;
+      }
+      const r = `blur(${Number(o.dataset.blurPx) * e}px)`;
+      o.style.backdropFilter = r, o.style.setProperty("-webkit-backdrop-filter", r);
+    }
+}
+function x({ edge: t, edgeRef: e, surface: n = z, className: o }) {
+  return /* @__PURE__ */ v("div", {
+    ref: e,
+    "aria-hidden": !0,
+    "data-edge": t,
+    className: d(N, o ?? (t === "top" ? "top-0" : "bottom-0")),
+    children: [T.map(({ blurPx: r, window: l }, s) => {
+      const a = U(t, l);
+      return /* @__PURE__ */ i("div", {
+        "data-blur-px": r,
+        className: "absolute inset-0",
+        style: {
+          maskImage: a,
+          WebkitMaskImage: a
+        }
+      }, s);
+    }), /* @__PURE__ */ i("div", {
+      "data-scroll-fade": "wash",
+      className: "absolute inset-0 opacity-0",
+      style: { background: B(t, n) }
+    })]
+  });
+}
+var R = A(null);
+function H() {
+  const t = k(R);
+  if (t == null) throw new Error("ScrollArea parts must be used inside ScrollArea.Root");
+  return t;
+}
+function E(t) {
+  return t <= 0 ? 0 : t >= 1 ? 1 : t;
+}
+function M(t, e) {
+  typeof t == "function" ? t(e) : t && (t.current = e);
+}
+function O({ inset: t, insetTop: e, insetBottom: n, style: o, ref: r, ...l }) {
+  return /* @__PURE__ */ i(c.Content, {
+    ref: r,
+    style: {
+      paddingTop: e ?? t,
+      paddingBottom: n ?? t,
+      ...o
+    },
+    ...l
+  });
+}
+var X = c.Corner;
+function j({ className: t, children: e, fade: n = !0, ...o }) {
+  const r = b(null), l = b(null);
+  return /* @__PURE__ */ i(c.Root, {
+    className: d("relative overflow-hidden", t),
+    ...o,
+    children: /* @__PURE__ */ v(R.Provider, {
+      value: {
+        topEl: r,
+        bottomEl: l,
+        fade: n
+      },
+      children: [e, n ? /* @__PURE__ */ v(L, { children: [/* @__PURE__ */ i(x, {
+        edge: "top",
+        edgeRef: r
+      }), /* @__PURE__ */ i(x, {
+        edge: "bottom",
+        edgeRef: l
+      })] }) : null]
+    })
+  });
+}
+function D({ className: t, ref: e, ...n }) {
+  const { topEl: o, bottomEl: r, fade: l } = H(), s = b(null);
+  return C(() => {
+    const a = s.current;
+    if (!a || !l) return;
+    const m = () => {
+      const g = o.current?.offsetHeight || r.current?.offsetHeight || 32, p = a.scrollHeight - a.clientHeight, w = p <= 0 ? 0 : E(a.scrollTop / g), S = p <= 0 ? 0 : E((p - a.scrollTop) / g);
+      y(o.current, w), y(r.current, S);
+    };
+    let u = 0;
+    const h = () => {
+      u || (u = requestAnimationFrame(() => {
+        u = 0, m();
+      }));
+    };
+    m(), a.addEventListener("scroll", h, { passive: !0 });
+    let f = null;
+    return typeof ResizeObserver < "u" && (f = new ResizeObserver(m), f.observe(a), a.firstElementChild && f.observe(a.firstElementChild)), () => {
+      a.removeEventListener("scroll", h), u && cancelAnimationFrame(u), f?.disconnect();
+    };
+  }, [
+    o,
+    r,
+    l
+  ]), /* @__PURE__ */ i(c.Viewport, {
+    render: /* @__PURE__ */ i($.div, { layoutScroll: !0 }),
+    className: d("outline-pho-brand h-full min-h-0 w-full overscroll-contain rounded-[inherit] focus-visible:outline-2 focus-visible:-outline-offset-1", t),
+    ...n,
+    ref: (a) => {
+      s.current = a, M(e, a);
+    }
+  });
+}
+function G({ className: t, ...e }) {
+  return /* @__PURE__ */ i(c.Scrollbar, {
+    className: d("relative z-20 flex touch-none p-0.5 opacity-0 transition-opacity delay-300 select-none", "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-0", "data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-2.5", t),
+    ...e
+  });
+}
+function I({ className: t, ...e }) {
+  return /* @__PURE__ */ i(c.Thumb, {
+    className: d("flex-1 rounded-full bg-[var(--border-color-pho-primary)]", t),
+    ...e
+  });
+}
+var Z = {
+  Root: j,
+  Viewport: D,
+  Content: O,
+  Scrollbar: G,
+  Thumb: I,
+  Corner: X
+};
+export {
+  F as n,
+  Z as t
+};
+
+//# sourceMappingURL=scroll-area-Zik8t1Mk.js.map

package/dist/chunks/scroll-area-Zik8t1Mk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-Zik8t1Mk.js","names":[],"sources":["../../src/components/scroll-area/scroll-area-edges.tsx","../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["import { type Ref } from \"react\";\nimport { BLUR_PX } from \"../../motion\";\nimport { cn } from \"../../utils/cn\";\n\n/** Overlay strip height — a short ramp, not a banner. `h-8` = 32px. */\nexport const EDGE_CLASS = \"pointer-events-none absolute inset-x-0 z-10 h-8\";\nexport const EDGE_REVEAL_PX = 32;\n\nconst BLUR_LAYER_COUNT = 8;\n\n/**\n * The system's one blur strength. The edge fade peaks here, and a motion\n * that softens (a scope swap, a bar title) borrows the same value, so\n * every soft focus in the product is the same soft focus.\n */\nexport const BLUR_MAX_PX = BLUR_PX;\n\nfunction buildBlurLayers(count: number, maxPx: number) {\n  const segment = 100 / (count + 1);\n  return Array.from({ length: count }, (_, i) => ({\n    blurPx: (i / (count - 1)) * maxPx,\n    window: [\n      i * segment,\n      (i + 1) * segment,\n      (i + 2) * segment,\n      (i + 3) * segment,\n    ] as const,\n  })).filter((layer) => layer.blurPx > 0);\n}\n\nconst BLUR_LAYERS = buildBlurLayers(BLUR_LAYER_COUNT, BLUR_MAX_PX);\n\nfunction edgeMask(edge: \"top\" | \"bottom\", window: readonly number[]) {\n  const toEdge = edge === \"top\" ? \"to top\" : \"to bottom\";\n  const [a, b, c, d] = window;\n  return `linear-gradient(${toEdge}, transparent ${a}%, black ${b}%, black ${c}%, transparent ${d}%)`;\n}\n\n// The wash fades into the block it sits on: every `bg-pho-*` surface\n// registers itself as `--pho-surface` (see the stylesheet), so the nearest\n// surface ancestor's background carries down here — live across themes.\n// The primary surface is the fallback for hosts outside any pho surface.\nconst DEFAULT_SURFACE =\n  \"var(--pho-surface, var(--background-color-pho-primary))\";\n\nfunction washGradient(edge: \"top\" | \"bottom\", surface: string) {\n  const to = edge === \"top\" ? \"to top\" : \"to bottom\";\n  return `linear-gradient(${to}, color-mix(in oklab, ${surface} 20%, transparent) 0%, ${surface} 100%)`;\n}\n\nexport function paintEdge(node: HTMLDivElement | null, progress: number) {\n  if (!node) return;\n  for (const child of node.children) {\n    const el = child as HTMLElement;\n    if (el.dataset.scrollFade === \"wash\") {\n      el.style.opacity = String(progress);\n      continue;\n    }\n    const blur = `blur(${Number(el.dataset.blurPx) * progress}px)`;\n    el.style.backdropFilter = blur;\n    el.style.setProperty(\"-webkit-backdrop-filter\", blur);\n  }\n}\n\nexport function Edge({\n  edge,\n  edgeRef,\n  surface = DEFAULT_SURFACE,\n  className,\n}: {\n  edge: \"top\" | \"bottom\";\n  edgeRef: Ref<HTMLDivElement>;\n  /** The surface the wash fades into — the card by default, or a page. */\n  surface?: string;\n  /** Position override — the strip sits at the named edge unless placed. */\n  className?: string;\n}) {\n  return (\n    <div\n      ref={edgeRef}\n      aria-hidden\n      data-edge={edge}\n      className={cn(\n        EDGE_CLASS,\n        className ?? (edge === \"top\" ? \"top-0\" : \"bottom-0\"),\n      )}\n    >\n      {BLUR_LAYERS.map(({ blurPx, window }, index) => {\n        const mask = edgeMask(edge, window);\n        return (\n          <div\n            key={index}\n            data-blur-px={blurPx}\n            className=\"absolute inset-0\"\n            style={{\n              maskImage: mask,\n              WebkitMaskImage: mask,\n            }}\n          />\n        );\n      })}\n      <div\n        data-scroll-fade=\"wash\"\n        className=\"absolute inset-0 opacity-0\"\n        style={{ background: washGradient(edge, surface) }}\n      />\n    </div>\n  );\n}\n","import {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  type ComponentProps,\n  type ElementType,\n  type Ref,\n  type RefObject,\n} from \"react\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui/react/scroll-area\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Edge, EDGE_REVEAL_PX, paintEdge } from \"./scroll-area-edges\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst ScrollAreaContext = createContext<{\n  topEl: RefObject<HTMLDivElement | null>;\n  bottomEl: RefObject<HTMLDivElement | null>;\n  fade: boolean;\n} | null>(null);\n\nfunction useScrollAreaContext() {\n  const ctx = useContext(ScrollAreaContext);\n  if (ctx == null) {\n    throw new Error(\"ScrollArea parts must be used inside ScrollArea.Root\");\n  }\n  return ctx;\n}\n\nfunction clamp01(n: number) {\n  if (n <= 0) return 0;\n  if (n >= 1) return 1;\n  return n;\n}\n\nfunction assignRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === \"function\") {\n    ref(node);\n  } else if (ref) {\n    // React 18 types `RefObject.current` as readonly; the write is legal.\n    (ref as { current: T | null }).current = node;\n  }\n}\n\n/**\n * The scrolled content. `inset` is a resting inset in the scroll axis —\n * like a scroll view's safe-area padding: the content stands clear of the\n * edges at rest but scrolls past them to the true edge, and the scrollbar\n * and edge fade stay on `Root`'s edges. `insetTop` / `insetBottom` set the\n * ends separately (they win over `inset`).\n */\nfunction Content({\n  inset,\n  insetTop,\n  insetBottom,\n  style,\n  ref,\n  ...props\n}: ComponentProps<typeof BaseScrollArea.Content> & {\n  inset?: number | string;\n  insetTop?: number | string;\n  insetBottom?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}) {\n  return (\n    <BaseScrollArea.Content\n      ref={ref}\n      style={{\n        paddingTop: insetTop ?? inset,\n        paddingBottom: insetBottom ?? inset,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n\nconst Corner = BaseScrollArea.Corner;\n\nfunction Root({\n  className,\n  children,\n  fade = true,\n  ...props\n}: StyledProps<typeof BaseScrollArea.Root> & {\n  /**\n   * Progressive edge fade (blur + wash). Leave on except for code\n   * surfaces — CodeBlock is the only caller that turns it off, so\n   * glyphs hard-clip at the border.\n   * @default true\n   */\n  fade?: boolean;\n}) {\n  const topEl = useRef<HTMLDivElement | null>(null);\n  const bottomEl = useRef<HTMLDivElement | null>(null);\n\n  return (\n    <BaseScrollArea.Root\n      className={cn(\"relative overflow-hidden\", className)}\n      {...props}\n    >\n      <ScrollAreaContext.Provider value={{ topEl, bottomEl, fade }}>\n        {children}\n        {fade ? (\n          <>\n            <Edge edge=\"top\" edgeRef={topEl} />\n            <Edge edge=\"bottom\" edgeRef={bottomEl} />\n          </>\n        ) : null}\n      </ScrollAreaContext.Provider>\n    </BaseScrollArea.Root>\n  );\n}\n\nfunction Viewport({\n  className,\n  ref,\n  ...props\n}: StyledProps<typeof BaseScrollArea.Viewport>) {\n  const { topEl, bottomEl, fade } = useScrollAreaContext();\n  const viewportRef = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    const viewport = viewportRef.current;\n    if (!viewport || !fade) return;\n\n    const paint = () => {\n      const reveal =\n        topEl.current?.offsetHeight ||\n        bottomEl.current?.offsetHeight ||\n        EDGE_REVEAL_PX;\n      const maxScroll = viewport.scrollHeight - viewport.clientHeight;\n      const top = maxScroll <= 0 ? 0 : clamp01(viewport.scrollTop / reveal);\n      const bottom =\n        maxScroll <= 0 ? 0 : clamp01((maxScroll - viewport.scrollTop) / reveal);\n      paintEdge(topEl.current, top);\n      paintEdge(bottomEl.current, bottom);\n    };\n\n    let frame = 0;\n    const onScroll = () => {\n      if (frame) return;\n      frame = requestAnimationFrame(() => {\n        frame = 0;\n        paint();\n      });\n    };\n\n    paint();\n    viewport.addEventListener(\"scroll\", onScroll, { passive: true });\n    let observer: ResizeObserver | null = null;\n    if (typeof ResizeObserver !== \"undefined\") {\n      observer = new ResizeObserver(paint);\n      observer.observe(viewport);\n      if (viewport.firstElementChild) {\n        observer.observe(viewport.firstElementChild);\n      }\n    }\n    return () => {\n      viewport.removeEventListener(\"scroll\", onScroll);\n      if (frame) cancelAnimationFrame(frame);\n      observer?.disconnect();\n    };\n  }, [topEl, bottomEl, fade]);\n\n  return (\n    <BaseScrollArea.Viewport\n      // A motion element with layoutScroll: any layout-animated content\n      // inside (a shared-element morph, a FLIP row) projects against the\n      // viewport's scroll offset instead of reading a scroll as a layout\n      // change.\n      render={<motion.div layoutScroll />}\n      className={cn(\n        \"outline-pho-brand h-full min-h-0 w-full overscroll-contain rounded-[inherit] focus-visible:outline-2 focus-visible:-outline-offset-1\",\n        className,\n      )}\n      {...props}\n      ref={(node) => {\n        viewportRef.current = node;\n        assignRef(ref, node);\n      }}\n    />\n  );\n}\n\nfunction Scrollbar({\n  className,\n  ...props\n}: StyledProps<typeof BaseScrollArea.Scrollbar>) {\n  return (\n    <BaseScrollArea.Scrollbar\n      className={cn(\n        \"relative z-20 flex touch-none p-0.5 opacity-0 transition-opacity delay-300 select-none\",\n        \"data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-0\",\n        \"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-2.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Thumb({\n  className,\n  ...props\n}: StyledProps<typeof BaseScrollArea.Thumb>) {\n  return (\n    <BaseScrollArea.Thumb\n      className={cn(\n        \"flex-1 rounded-full bg-[var(--border-color-pho-primary)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Scroll area built on Base UI `ScrollArea` — a capped region with overlay\n * scrollbars and progressive edge fade. Approaching rows blur (0 → 1px) and\n * wash into the surface; strength tracks scroll distance over one strip\n * height. Give `Root` a fixed size; put content in `Viewport` → `Content`\n * and add a `Scrollbar` → `Thumb` per axis.\n */\nexport const ScrollArea = {\n  Root,\n  Viewport,\n  Content,\n  Scrollbar,\n  Thumb,\n  Corner,\n};\n"],"mappings":"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"}

package/dist/chunks/sidebar-DRPe5CAh.js

@@ -0,0 +1,306 @@
+"use client";
+import { t as n } from "./cn-ChIgwEl3.js";
+import { t as ee } from "./is-react-component-DSnjtBmo.js";
+import { n as te } from "./link-provider-DXzDQ08N.js";
+import { SPRING_PRESS as re } from "../motion.js";
+import { a as ae, u as ne } from "./button-CdqS_t5a.js";
+import { t as oe } from "./createReactComponent-BqCmnqfX.js";
+import { t as se } from "./IconArrowUpRight-DGgKzQwV.js";
+import { t as ie } from "./IconChevronRight-CzoJnYNI.js";
+import { n as _ } from "./avatar-BkmGDIqf.js";
+import { t as le } from "./IconSearch-BKAHkLyX.js";
+import { t as h } from "./scroll-area-Zik8t1Mk.js";
+import { t as L } from "./collapsible-if7ncPbI.js";
+import { t as ce } from "./kbd-DNI10uy7.js";
+import { createContext as P, isValidElement as ue, useCallback as z, useContext as G, useEffect as T, useId as pe, useLayoutEffect as me, useMemo as K, useRef as w, useState as C } from "react";
+import { Fragment as de, jsx as t, jsxs as c } from "react/jsx-runtime";
+import { motion as g } from "motion/react";
+import { Collapsible as fe } from "@base-ui/react/collapsible";
+var he = [
+  ["path", {
+    d: "M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+    key: "svg-0"
+  }],
+  ["path", {
+    d: "M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+    key: "svg-1"
+  }],
+  ["path", {
+    d: "M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+    key: "svg-2"
+  }]
+], xe = oe("outline", "dots", "Dots", he), I = {
+  initial: !1,
+  whileTap: { scale: 0.97 },
+  transition: re
+}, H = "border-pho-secondary bg-pho-page sticky top-0 flex h-dvh w-64 shrink-0 flex-col border-r", j = {
+  base: "px-4 pt-5 pb-4",
+  sm: "px-3 pt-4 pb-3"
+}, Qe = n(H, j.base), ve = {
+  base: "mb-6 px-2",
+  sm: "mb-3 px-0"
+}, q = "outline-pho-brand flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-base transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1", be = "bg-pho-primary text-pho-primary ring-pho-secondary font-medium ring-1 ring-inset *:data-icon:text-pho-primary", $ = n("text-pho-secondary *:data-icon:text-pho-secondary", "hover:bg-pho-primary hover:text-pho-primary hover:*:data-icon:text-pho-primary"), We = "text-pho-primary *:data-icon:text-pho-primary", ge = "ml-auto size-4 shrink-0 transition-transform duration-150 ease-out", V = {
+  withIcon: "pl-6",
+  withoutIcon: "pl-4"
+}, J = P("base"), Q = P(null), W = typeof window > "u" ? T : me;
+function Ie({ className: r, inset: e = "base", ...a }) {
+  return /* @__PURE__ */ t(J.Provider, {
+    value: e,
+    children: /* @__PURE__ */ t("aside", {
+      className: n(H, j[e], r),
+      ...a,
+      "data-inset": e
+    })
+  });
+}
+function Ne({ className: r, ...e }) {
+  const a = G(J);
+  return /* @__PURE__ */ t("div", {
+    className: n("flex items-center gap-2.5 [&:has(+nav)]:mb-0", ve[a], r),
+    ...e
+  });
+}
+function ye({ label: r = "Search", kbd: e = "⌘K", className: a, ...s }) {
+  return /* @__PURE__ */ t(ae, {
+    variant: "outlined",
+    shape: "square",
+    size: "md",
+    "aria-keyshortcuts": e === "⌘K" ? "Meta+K Control+K" : void 0,
+    prefix: /* @__PURE__ */ t(le, { "aria-hidden": !0 }),
+    suffix: /* @__PURE__ */ t(ce, {
+      keys: e,
+      className: "pointer-events-none"
+    }),
+    className: n("hover:ring-pho-secondary min-h-9 w-full justify-start gap-2 rounded-sm px-2 py-1.5 has-[[data-icon=prefix]]:pl-2 has-[[data-icon=suffix]]:pr-2 [&>[data-text]]:min-w-0 [&>[data-text]]:flex-1 [&>[data-text]]:truncate [&>[data-text]]:px-0 [&>[data-text]]:text-left", a),
+    ...s,
+    children: r
+  });
+}
+function Re({ scroll: r = !0, inset: e, insetTop: a = e ?? 24, insetBottom: s = e ?? 16, className: i, style: l, children: u, ...p }) {
+  return r ? /* @__PURE__ */ t("nav", {
+    className: n("flex min-h-0 flex-1 flex-col", i),
+    style: l,
+    ...p,
+    children: /* @__PURE__ */ c(h.Root, {
+      className: "min-h-0 flex-1",
+      children: [/* @__PURE__ */ t(h.Viewport, { children: /* @__PURE__ */ t(h.Content, {
+        inset: e,
+        insetTop: a,
+        insetBottom: s,
+        className: "flex flex-col gap-6",
+        children: u
+      }) }), /* @__PURE__ */ t(h.Scrollbar, { children: /* @__PURE__ */ t(h.Thumb, {}) })]
+    })
+  }) : /* @__PURE__ */ t("nav", {
+    className: n("flex flex-col gap-6", i),
+    style: {
+      paddingTop: a ?? e,
+      paddingBottom: s ?? e,
+      ...l
+    },
+    ...p,
+    children: u
+  });
+}
+function Se({ className: r, ...e }) {
+  return /* @__PURE__ */ t("div", {
+    className: r,
+    ...e
+  });
+}
+function Ee({ className: r, ...e }) {
+  return /* @__PURE__ */ t("div", {
+    className: n("text-pho-description mb-2 px-2 text-xs font-normal", r),
+    ...e
+  });
+}
+function X({ className: r, columns: e, ...a }) {
+  return /* @__PURE__ */ t("ul", {
+    className: n("m-0 list-none p-0 *:m-0", e ? "grid grid-cols-2 gap-x-2 gap-y-0.5" : "flex flex-col gap-0.5", r),
+    ...a
+  });
+}
+function Ae({ className: r, ...e }) {
+  return /* @__PURE__ */ t("div", {
+    className: n("mt-4 flex flex-col gap-0.5 [nav~&]:mt-0", r),
+    ...e
+  });
+}
+function b(r) {
+  if (r == null || r === !1) return null;
+  let e = null;
+  return ee(r) ? e = /* @__PURE__ */ t(r, {}) : ue(r) && (e = r), e == null ? null : /* @__PURE__ */ t("span", {
+    "data-icon": !0,
+    className: "pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0",
+    children: e
+  });
+}
+function _e({ icon: r, active: e, className: a, children: s, href: i, external: l, ...u }) {
+  const p = te(), N = K(() => g.create(p), [p]), m = G(Q), f = pe();
+  W(() => {
+    if (m)
+      return m.reportActive(f, !!e), () => m.reportActive(f, !1);
+  }, [
+    m,
+    f,
+    e
+  ]);
+  const x = n(q, e ? be : $, a), d = /* @__PURE__ */ t("span", {
+    className: "min-w-0 flex-1 truncate",
+    children: s
+  });
+  return i !== void 0 ? /* @__PURE__ */ t("li", { children: /* @__PURE__ */ c(N, {
+    href: i,
+    "aria-current": e ? "page" : void 0,
+    ...l && {
+      target: "_blank",
+      rel: "noopener noreferrer"
+    },
+    ...u,
+    className: x,
+    ...I,
+    children: [
+      b(r),
+      d,
+      l && /* @__PURE__ */ c(de, { children: [b(/* @__PURE__ */ t(se, { "aria-hidden": !0 })), /* @__PURE__ */ t("span", {
+        className: "sr-only",
+        children: "(opens in a new tab)"
+      })] })
+    ]
+  }) }) : /* @__PURE__ */ t("li", { children: /* @__PURE__ */ c(g.button, {
+    type: "button",
+    "aria-current": e ? "page" : void 0,
+    ...u,
+    className: x,
+    ...I,
+    children: [b(r), d]
+  }) });
+}
+function we({ label: r, icon: e, open: a, defaultOpen: s = !1, onOpenChange: i, openWhenChildActive: l = !0, active: u, className: p, children: N, ...m }) {
+  const [f, x] = C(s), d = a !== void 0, y = d ? a : f, R = z((o) => {
+    d || x(o), i?.(o);
+  }, [d, i]), [B, Y] = C(() => /* @__PURE__ */ new Set()), O = z((o, F) => {
+    Y((E) => {
+      if (E.has(o) === F) return E;
+      const A = new Set(E);
+      return F ? A.add(o) : A.delete(o), A;
+    });
+  }, []), Z = K(() => ({ reportActive: O }), [O]), v = u ?? B.size > 0, D = w(!1);
+  T(() => {
+    const o = requestAnimationFrame(() => {
+      D.current = !0;
+    });
+    return () => cancelAnimationFrame(o);
+  }, []);
+  const [S, k] = C(!1), M = w(y);
+  M.current = y;
+  const U = w(R);
+  return U.current = R, W(() => {
+    !l || !v || M.current || (D.current || k(!0), U.current(!0));
+  }, [
+    B,
+    v,
+    l
+  ]), T(() => {
+    if (!S) return;
+    const o = requestAnimationFrame(() => k(!1));
+    return () => cancelAnimationFrame(o);
+  }, [S]), /* @__PURE__ */ c(L.Root, {
+    open: y,
+    onOpenChange: (o) => R(o),
+    render: /* @__PURE__ */ t("li", {}),
+    children: [/* @__PURE__ */ c(fe.Trigger, {
+      render: /* @__PURE__ */ t(g.button, { ...I }),
+      className: n(q, $, v && "text-pho-primary *:data-icon:text-pho-primary", "data-[panel-open]:*:data-chevron:rotate-90", p),
+      "data-child-active": v || void 0,
+      ...m,
+      children: [
+        b(e),
+        /* @__PURE__ */ t("span", {
+          className: "min-w-0 flex-1 truncate",
+          children: r
+        }),
+        /* @__PURE__ */ t(ie, {
+          "aria-hidden": !0,
+          "data-chevron": !0,
+          className: ge
+        })
+      ]
+    }), /* @__PURE__ */ t(L.Panel, {
+      keepMounted: !0,
+      style: S ? { transitionDuration: "0s" } : void 0,
+      children: /* @__PURE__ */ t(Q.Provider, {
+        value: Z,
+        children: /* @__PURE__ */ t("div", {
+          "data-submenu-list": !0,
+          className: n("pt-0.5", e ? V.withIcon : V.withoutIcon),
+          children: /* @__PURE__ */ t(X, { children: N })
+        })
+      })
+    })]
+  });
+}
+var Ce = "group outline-pho-brand flex w-full cursor-pointer items-center gap-2 rounded-base p-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2";
+function Te(r) {
+  const e = r.split(/\s+/).filter(Boolean);
+  return ((e[0]?.[0] ?? r[0] ?? "?") + (e.length >= 2 ? e[e.length - 1]?.[0] ?? "" : "")).toUpperCase();
+}
+function Be({ name: r, avatarSrc: e, initials: a, className: s, ...i }) {
+  return /* @__PURE__ */ c(g.button, {
+    type: "button",
+    className: n(Ce, s),
+    ...i,
+    ...I,
+    children: [
+      /* @__PURE__ */ c(_.Root, {
+        size: "xs",
+        children: [e && /* @__PURE__ */ t(_.Image, {
+          src: e,
+          alt: ""
+        }), /* @__PURE__ */ t(_.Fallback, { children: a ?? Te(r) })]
+      }),
+      /* @__PURE__ */ t("span", {
+        className: "text-pho-primary min-w-0 flex-1 truncate text-base",
+        children: r
+      }),
+      /* @__PURE__ */ t("span", {
+        "aria-hidden": !0,
+        className: ne({
+          variant: "outlined",
+          size: "sm",
+          shape: "circle",
+          className: "group-hover:bg-pho-primary-hover group-hover:text-pho-secondary-hover group-data-[popup-open]:bg-pho-primary-hover group-data-[popup-open]:text-pho-secondary-hover p-1"
+        }),
+        children: /* @__PURE__ */ t(xe, { className: "size-4" })
+      })
+    ]
+  });
+}
+var Xe = {
+  Root: Ie,
+  Header: Ne,
+  Search: ye,
+  Nav: Re,
+  Group: Se,
+  GroupLabel: Ee,
+  List: X,
+  Item: _e,
+  Submenu: we,
+  Footer: Ae,
+  AccountRow: Be
+};
+export {
+  H as a,
+  ge as c,
+  Xe as d,
+  $ as i,
+  V as l,
+  q as n,
+  Qe as o,
+  be as r,
+  j as s,
+  ve as t,
+  We as u
+};
+
+//# sourceMappingURL=sidebar-DRPe5CAh.js.map