@tappify/extension-sdk 2.0.0

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/vulakh/Desktop/Work/Tappify/extension-sdk/dist/index.cjs","../src/client/ui/cn.ts","../src/client/ui/primitives.tsx","../src/client/ui/TapDialog.tsx","../src/client/ui/TapForm.tsx"],"names":["_multiline","useId","jsx","jsxs"],"mappings":"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","file":"/Users/vulakh/Desktop/Work/Tappify/extension-sdk/dist/index.cjs","sourcesContent":[null,"import clsx, { type ClassValue as ClsxClassValue } from 'clsx';\n\n/**\n * Anything `cn` accepts: a class string, a number, an array of these, a map of\n * class name to condition, or a value to drop.\n */\nexport type ClassValue = ClsxClassValue;\n\n/**\n * Joins class names, dropping the ones that are `false`, `null` or `undefined`.\n *\n * @remarks\n * This is `clsx`, re-exported so a vendor surface needs no class-name dependency\n * of its own. It does not merge conflicting utility classes.\n *\n * @example\n * ```tsx\n * import { cn } from '@tappify/extension-sdk';\n *\n * function Row({ compact }: { compact: boolean }) {\n *   return <div className={cn('starter-row', compact && 'starter-row--compact')} />;\n * }\n * ```\n */\nexport function cn(...values: ClassValue[]): string {\n  return clsx(values);\n}\n","import {\n  useId,\n  type ButtonHTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type TextareaHTMLAttributes,\n} from 'react';\nimport { cn } from './cn';\n\n/** The props `TapButton` takes, on top of the native button attributes. */\nexport interface TapButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Defaults to `primary`. */\n  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';\n  /** Defaults to `md`. */\n  size?: 'sm' | 'md';\n  /** Disables the button and marks it `aria-busy`. */\n  loading?: boolean;\n}\n\n/**\n * Renders a button in the host's styling, in one of four variants.\n *\n * @remarks\n * Draws on `--tap-accent` and `--tap-accent-fg` for `primary`, `--bg-raised`,\n * `--fg-default` and `--divider` for `secondary`, `--fg-muted` for `ghost` and\n * `--tap-danger` for `danger`, and takes its radius from `--tap-radius`. The\n * element defaults to `type=\"button\"`, so a button inside a `TapForm` does not\n * submit it unless you pass `type=\"submit\"`. `loading` disables the button, so a\n * click cannot land twice.\n *\n * @example\n * ```tsx\n * import { TapButton } from '@tappify/extension-sdk';\n *\n * function ExportRow({ busy, onExport }: { busy: boolean; onExport: () => void }) {\n *   return (\n *     <TapButton variant=\"secondary\" size=\"sm\" loading={busy} onClick={onExport}>\n *       Export\n *     </TapButton>\n *   );\n * }\n * ```\n */\nexport function TapButton({\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled,\n  className,\n  children,\n  ...rest\n}: TapButtonProps): ReactElement {\n  return (\n    <button\n      type=\"button\"\n      {...rest}\n      disabled={disabled === true || loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        'tap-btn',\n        `tap-btn--${variant}`,\n        size === 'sm' && 'tap-btn--sm',\n        className,\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\n/** The props `TapCard` takes. */\nexport interface TapCardProps {\n  /** Rendered in the header, which appears only with a `title` or an `action`. */\n  title?: ReactNode;\n  /** Sits at the end of the header, for a button or a link. */\n  action?: ReactNode;\n  /** Rendered under a divider below the body. */\n  footer?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Renders the bordered surface a widget, tab or page section sits in.\n *\n * @remarks\n * Renders as a `section` on `--bg-raised` with a `--divider` border and the\n * `--tap-radius` corner, and the footer in `--fg-muted`. The header appears only\n * when `title` or `action` is given, and the body carries its own padding, so\n * nest content directly rather than wrapping it in another padded box. A widget\n * belongs in one card.\n *\n * @example\n * ```tsx\n * import { TapButton, TapCard, TapStat } from '@tappify/extension-sdk';\n *\n * function InstallSummary() {\n *   return (\n *     <TapCard\n *       title=\"Install summary\"\n *       action={<TapButton variant=\"ghost\" size=\"sm\">Compact</TapButton>}\n *       footer={<span>Last seven days</span>}\n *     >\n *       <TapStat label=\"Installs\" value=\"1,260\" delta={0.087} />\n *     </TapCard>\n *   );\n * }\n * ```\n */\nexport function TapCard({\n  title,\n  action,\n  footer,\n  className,\n  children,\n}: TapCardProps): ReactElement {\n  return (\n    <section className={cn('tap-card', className)}>\n      {(title !== undefined || action !== undefined) && (\n        <header className=\"tap-card__head\">\n          <span>{title}</span>\n          {action}\n        </header>\n      )}\n      <div className=\"tap-card__body\">{children}</div>\n      {footer !== undefined && (\n        <footer className=\"tap-card__foot\">{footer}</footer>\n      )}\n    </section>\n  );\n}\n\n/** The props `TapPageHeader` takes. */\nexport interface TapPageHeaderProps {\n  title: ReactNode;\n  description?: ReactNode;\n  /** Laid out in a row at the end of the header. */\n  actions?: ReactNode;\n}\n\n/**\n * Renders the title, description and actions at the top of a tab, a page or a\n * settings panel.\n *\n * @remarks\n * The title renders as an `h2`, because the host owns the page's `h1`. The\n * description follows `--fg-muted` and the rule under the header follows\n * `--divider`. Under 360 pixels of mount width the actions stack under the title.\n * A widget in a slot uses `TapCard`'s own header instead.\n *\n * @example\n * ```tsx\n * import { TapButton, TapPageHeader } from '@tappify/extension-sdk';\n *\n * function FunnelsHeader() {\n *   return (\n *     <TapPageHeader\n *       title=\"Funnels\"\n *       description=\"Every step from impression to install.\"\n *       actions={<TapButton size=\"sm\">New funnel</TapButton>}\n *     />\n *   );\n * }\n * ```\n */\nexport function TapPageHeader({\n  title,\n  description,\n  actions,\n}: TapPageHeaderProps): ReactElement {\n  return (\n    <div className=\"tap-page-header\">\n      <div>\n        <h2 className=\"tap-page-header__title\">{title}</h2>\n        {description !== undefined && (\n          <p className=\"tap-page-header__description\">{description}</p>\n        )}\n      </div>\n      {actions !== undefined && <div className=\"tap-row\">{actions}</div>}\n    </div>\n  );\n}\n\n/** The props `TapSkeleton` takes. */\nexport interface TapSkeletonProps {\n  /** How many bars to draw. Defaults to one. */\n  lines?: number;\n  /** A CSS width for every bar. Left out, each bar is 12% shorter than the last. */\n  width?: string;\n  className?: string;\n}\n\n/**\n * Renders the placeholder bars that stand in for content while a read is in\n * flight.\n *\n * @remarks\n * The bars are `aria-hidden`, so a screen reader is not told about them, and they\n * take their tone from `--bg-subtle`. The pulse stops under\n * `prefers-reduced-motion`. Render this while `isLoading` is `true`, in place of\n * the content rather than beside it.\n *\n * @example\n * ```tsx\n * import { TapSkeleton, TapStat, useTapQuery } from '@tappify/extension-sdk';\n *\n * function Keywords() {\n *   const keywords = useTapQuery({ kind: 'keywords' });\n *   if (keywords.isLoading) return <TapSkeleton lines={3} />;\n *   return <TapStat label=\"Tracked\" value={keywords.data?.keywords.length ?? 0} />;\n * }\n * ```\n */\nexport function TapSkeleton({\n  lines = 1,\n  width,\n  className,\n}: TapSkeletonProps): ReactElement {\n  return (\n    <div aria-hidden=\"true\">\n      {Array.from({ length: lines }, (_, index) => (\n        <span\n          key={index}\n          className={cn('tap-skeleton', className)}\n          style={{ width: width ?? `${String(100 - index * 12)}%` }}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** The props `TapEmptyState` takes. */\nexport interface TapEmptyStateProps {\n  title: string;\n  description?: string;\n  /** Rendered under the text, for the one thing the owner can do next. */\n  action?: ReactNode;\n}\n\n/**\n * Renders the centred message that stands in for content when there is nothing to\n * show.\n *\n * @remarks\n * Centres its text in `--fg-muted` with the title in `--fg-default`. Use it for an\n * empty result or a surface the install has not been granted; a failure belongs in\n * `TapErrorState`, which carries a retry and announces itself as an alert.\n *\n * @example\n * ```tsx\n * import { TapEmptyState, useTapQuery } from '@tappify/extension-sdk';\n *\n * function Reviews() {\n *   const reviews = useTapQuery({\n *     kind: 'reviews',\n *     range: { from: '2026-09-01', to: '2026-09-08' },\n *   });\n *   if (reviews.data?.total === 0) {\n *     return <TapEmptyState title=\"No reviews in this range\" />;\n *   }\n *   return <span>{reviews.data?.total ?? 0} reviews</span>;\n * }\n * ```\n */\nexport function TapEmptyState({\n  title,\n  description,\n  action,\n}: TapEmptyStateProps): ReactElement {\n  return (\n    <div className=\"tap-state\">\n      <span className=\"tap-state__title\">{title}</span>\n      {description !== undefined && <span>{description}</span>}\n      {action}\n    </div>\n  );\n}\n\n/** The props `TapErrorState` takes. */\nexport interface TapErrorStateProps {\n  title: string;\n  /** The failure's own message, which is what a caller shows the owner. */\n  description?: string;\n  /** An error code, rendered small in `--font-mono` under the description. */\n  code?: string;\n  /** Renders a Retry button, and is called by it. */\n  onRetry?: () => void;\n}\n\n/**\n * Renders the centred failure message a surface shows in place of its content.\n *\n * @remarks\n * Carries `role=\"alert\"`, so the host announces it, and draws the title in\n * `--tap-danger`. The Retry button appears only with `onRetry`; wire it to the\n * `refetch` of every read the surface needs. Pass the failure's own `message` as\n * the description — an error from `useTapServer` carries the text your server sent\n * the owner — and the `code` of a `TapError` or `TapServerError` as `code`.\n *\n * @example\n * ```tsx\n * import { TapErrorState, useTapQuery } from '@tappify/extension-sdk';\n *\n * function Crashes() {\n *   const crashes = useTapQuery({\n *     kind: 'crashes',\n *     range: { from: '2026-09-01', to: '2026-09-08' },\n *   });\n *   if (crashes.error !== null) {\n *     return (\n *       <TapErrorState\n *         title=\"Crashes did not load\"\n *         description={crashes.error.message}\n *         onRetry={crashes.refetch}\n *       />\n *     );\n *   }\n *   return <span>{crashes.data?.issues.length ?? 0} issues</span>;\n * }\n * ```\n */\nexport function TapErrorState({\n  title,\n  description,\n  code,\n  onRetry,\n}: TapErrorStateProps): ReactElement {\n  return (\n    <div className=\"tap-state tap-state--error\" role=\"alert\">\n      <span className=\"tap-state__title\">{title}</span>\n      {description !== undefined && <span>{description}</span>}\n      {code !== undefined && <span className=\"tap-state__code\">{code}</span>}\n      {onRetry !== undefined && (\n        <TapButton variant=\"secondary\" size=\"sm\" onClick={onRetry}>\n          Retry\n        </TapButton>\n      )}\n    </div>\n  );\n}\n\n/** The props `TapStat` takes. */\nexport interface TapStatProps {\n  label: string;\n  value: ReactNode;\n  /** A share of the previous period, so `0.087` renders as `+9%`. */\n  delta?: number;\n  /** A line of context under the number. */\n  hint?: string;\n}\n\n/**\n * Renders one labelled number, with an optional change against the previous\n * period.\n *\n * @remarks\n * The label is uppercased in `--fg-muted` and the number uses tabular figures, so\n * a row of stats stays aligned as values change. `delta` is a ratio, not a\n * percentage: it renders as whole percent with a plus in front when it is above\n * zero, and is coloured `--tap-danger` below zero and `--tap-accent` at or above\n * it. Format `value`\n * yourself with `tap.format.number` or `tap.format.currency`, so it follows the\n * owner's locale.\n *\n * @example\n * ```tsx\n * import { TapStat, useTap } from '@tappify/extension-sdk';\n *\n * function Installs({ installs, delta }: { installs: number; delta: number }) {\n *   const tap = useTap();\n *   return (\n *     <TapStat\n *       label=\"Installs\"\n *       value={tap.format.number(installs)}\n *       delta={delta}\n *       hint=\"Against the previous seven days\"\n *     />\n *   );\n * }\n * ```\n */\nexport function TapStat({\n  label,\n  value,\n  delta,\n  hint,\n}: TapStatProps): ReactElement {\n  const percent =\n    delta === undefined\n      ? undefined\n      : `${delta > 0 ? '+' : ''}${String(Math.round(delta * 100))}%`;\n\n  return (\n    <div className=\"tap-stat\">\n      <span className=\"tap-stat__label\">{label}</span>\n      <span className=\"tap-stat__value\">{value}</span>\n      {percent !== undefined && (\n        <span\n          className={cn(\n            delta !== undefined && delta < 0\n              ? 'tap-stat__delta--down'\n              : 'tap-stat__delta--up',\n          )}\n        >\n          {percent}\n        </span>\n      )}\n      {hint !== undefined && <span className=\"tap-field__hint\">{hint}</span>}\n    </div>\n  );\n}\n\ninterface FieldFrameProps {\n  id: string;\n  label?: string;\n  hint?: string;\n  error?: string;\n  hintId: string;\n  errorId: string;\n  children: ReactNode;\n}\n\nfunction FieldFrame({\n  id,\n  label,\n  hint,\n  error,\n  hintId,\n  errorId,\n  children,\n}: FieldFrameProps): ReactElement {\n  return (\n    <div className=\"tap-field\">\n      {label !== undefined && (\n        <label className=\"tap-field__label\" htmlFor={id}>\n          {label}\n        </label>\n      )}\n      {children}\n      {hint !== undefined && (\n        <span className=\"tap-field__hint\" id={hintId}>\n          {hint}\n        </span>\n      )}\n      {error !== undefined && (\n        <span className=\"tap-field__error\" id={errorId}>\n          {error}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction describedByOf(\n  fieldId: string,\n  hint: string | undefined,\n  error: string | undefined,\n): string | undefined {\n  const value = cn(\n    hint !== undefined && `${fieldId}-hint`,\n    error !== undefined && `${fieldId}-error`,\n  );\n  return value === '' ? undefined : value;\n}\n\n/**\n * The `TapInput` props for a single-line control, on top of the native input\n * attributes minus `size`.\n */\nexport interface TapSingleLineInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> {\n  /** Rendered as a `label` bound to the control by id. */\n  label?: string;\n  /** Marks the control invalid and renders the message under it. */\n  error?: string;\n  /** A line of guidance under the control, referenced by `aria-describedby`. */\n  hint?: string;\n}\n\nfunction TapSingleLineInput({\n  label,\n  error,\n  hint,\n  className,\n  id,\n  ...rest\n}: TapSingleLineInputProps): ReactElement {\n  const generated = useId();\n  const fieldId = id ?? generated;\n\n  return (\n    <FieldFrame\n      id={fieldId}\n      label={label}\n      hint={hint}\n      error={error}\n      hintId={`${fieldId}-hint`}\n      errorId={`${fieldId}-error`}\n    >\n      <input\n        {...rest}\n        id={fieldId}\n        className={cn(\n          'tap-control',\n          error !== undefined && 'tap-control--invalid',\n          className,\n        )}\n        aria-invalid={error !== undefined || undefined}\n        aria-describedby={describedByOf(fieldId, hint, error)}\n      />\n    </FieldFrame>\n  );\n}\n\n/**\n * The `TapInput` props for a multiline control, on top of the native textarea\n * attributes.\n */\nexport interface TapTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Rendered as a `label` bound to the control by id. */\n  label?: string;\n  /** Marks the control invalid and renders the message under it. */\n  error?: string;\n  /** A line of guidance under the control, referenced by `aria-describedby`. */\n  hint?: string;\n}\n\nfunction TapTextarea({\n  label,\n  error,\n  hint,\n  className,\n  id,\n  rows,\n  ...rest\n}: TapTextareaProps): ReactElement {\n  const generated = useId();\n  const fieldId = id ?? generated;\n\n  return (\n    <FieldFrame\n      id={fieldId}\n      label={label}\n      hint={hint}\n      error={error}\n      hintId={`${fieldId}-hint`}\n      errorId={`${fieldId}-error`}\n    >\n      <textarea\n        {...rest}\n        id={fieldId}\n        rows={rows ?? 4}\n        className={cn(\n          'tap-control',\n          error !== undefined && 'tap-control--invalid',\n          className,\n        )}\n        aria-invalid={error !== undefined || undefined}\n        aria-describedby={describedByOf(fieldId, hint, error)}\n      />\n    </FieldFrame>\n  );\n}\n\n/**\n * The props `TapInput` takes: the single-line set, or the textarea set behind\n * `multiline`.\n */\nexport type TapInputProps =\n  | ({ multiline?: false } & TapSingleLineInputProps)\n  | ({ multiline: true } & TapTextareaProps);\n\n/**\n * Renders a labelled text control with its hint and error, as an input or, with\n * `multiline`, a textarea.\n *\n * @remarks\n * Generates an id when none is passed and binds the label, the hint and the error\n * to the control, so the field is announced whole; an `error` also sets\n * `aria-invalid` and the `--tap-danger` border. The textarea starts at four rows\n * and is resizable in height. Pass `type=\"checkbox\"` with\n * `className=\"tap-control--checkbox\"` for a boolean, which is what `TapForm`\n * does.\n *\n * @example\n * ```tsx\n * import { TapInput } from '@tappify/extension-sdk';\n *\n * function TermField({ term, onTerm }: { term: string; onTerm: (next: string) => void }) {\n *   return (\n *     <TapInput\n *       label=\"Keyword\"\n *       hint=\"One term per row in the report.\"\n *       value={term}\n *       onChange={event => onTerm(event.target.value)}\n *     />\n *   );\n * }\n * ```\n */\nexport function TapInput(props: TapInputProps): ReactElement {\n  if (props.multiline === true) {\n    const { multiline: _multiline, ...rest } = props;\n    return <TapTextarea {...rest} />;\n  }\n\n  const { multiline: _multiline, ...rest } = props;\n  return <TapSingleLineInput {...rest} />;\n}\n\n/** The props `TapSelect` takes, on top of the native select attributes. */\nexport interface TapSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {\n  /** Rendered as a `label` bound to the control by id. */\n  label?: string;\n  /** Marks the control invalid and renders the message under it. */\n  error?: string;\n  /** A line of guidance under the control, referenced by `aria-describedby`. */\n  hint?: string;\n  /** Rendered in order; the component adds no empty option of its own. */\n  options: { value: string; label: string }[];\n}\n\n/**\n * Renders a labelled select over a list of options, with its hint and error.\n *\n * @remarks\n * Carries the same label, hint, error and `aria-describedby` wiring as\n * `TapInput`. Add your own empty option when the field starts unset — `TapForm`\n * puts a `Choose one` option in front of a schema's enum values.\n *\n * @example\n * ```tsx\n * import { TapSelect } from '@tappify/extension-sdk';\n *\n * function PlatformPicker({ value, onPick }: { value: string; onPick: (next: string) => void }) {\n *   return (\n *     <TapSelect\n *       label=\"Platform\"\n *       value={value}\n *       options={[\n *         { value: 'ios', label: 'iOS' },\n *         { value: 'android', label: 'Android' },\n *       ]}\n *       onChange={event => onPick(event.target.value)}\n *     />\n *   );\n * }\n * ```\n */\nexport function TapSelect({\n  label,\n  error,\n  hint,\n  options,\n  className,\n  id,\n  ...rest\n}: TapSelectProps): ReactElement {\n  const generated = useId();\n  const fieldId = id ?? generated;\n\n  return (\n    <FieldFrame\n      id={fieldId}\n      label={label}\n      hint={hint}\n      error={error}\n      hintId={`${fieldId}-hint`}\n      errorId={`${fieldId}-error`}\n    >\n      <select\n        {...rest}\n        id={fieldId}\n        className={cn(\n          'tap-control',\n          error !== undefined && 'tap-control--invalid',\n          className,\n        )}\n        aria-invalid={error !== undefined || undefined}\n        aria-describedby={describedByOf(fieldId, hint, error)}\n      >\n        {options.map(option => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </FieldFrame>\n  );\n}\n\n/** One column of a `TapTable`. */\nexport interface TapTableColumnDef<T> {\n  /** The key read from each row when there is no `render`. */\n  key: string;\n  label: string;\n  /** `end` right-aligns the column and gives it tabular figures. */\n  align?: 'start' | 'end';\n  /** Draws the cell. Without it the cell shows the row's own string or number. */\n  render?(row: T): ReactNode;\n}\n\n/** The props `TapTable` takes. */\nexport interface TapTableProps<T> {\n  columns: TapTableColumnDef<T>[];\n  rows: T[];\n  /** Returns a stable key per row, which React uses for reconciliation. */\n  rowKey: (row: T) => string;\n  /** Rendered in place of the whole table when `rows` is empty. */\n  empty?: ReactNode;\n  /** Makes each row clickable and focusable, and is called on click or Enter. */\n  onRowClick?: (row: T) => void;\n}\n\nfunction cellText(row: unknown, key: string): string {\n  if (row === null || typeof row !== 'object') return '';\n  const value: unknown = Reflect.get(row, key);\n  if (typeof value === 'string') return value;\n  if (\n    typeof value === 'number' ||\n    typeof value === 'boolean' ||\n    typeof value === 'bigint'\n  ) {\n    return String(value);\n  }\n  return '';\n}\n\n/**\n * Renders rows under column headers, scrolling sideways inside the mount rather\n * than widening it.\n *\n * @remarks\n * A cell with no `render` shows the row's own value under `key` when that value is\n * a string, number, boolean or bigint, and nothing otherwise, so an object or an\n * array needs a `render`. With `empty` and no rows, the table is replaced whole by\n * that node. With `onRowClick` each row becomes focusable and answers Enter and\n * Space as well as a click, and hovers on `--bg-subtle`; the headers and rules\n * follow `--fg-muted` and `--divider`.\n *\n * @example\n * ```tsx\n * import { TapEmptyState, TapTable, useTapQuery } from '@tappify/extension-sdk';\n *\n * function Keywords() {\n *   const keywords = useTapQuery({ kind: 'keywords' });\n *   return (\n *     <TapTable\n *       columns={[\n *         { key: 'term', label: 'Term' },\n *         { key: 'position', label: 'Rank', align: 'end' },\n *       ]}\n *       rows={keywords.data?.keywords ?? []}\n *       rowKey={keyword => keyword.id}\n *       empty={<TapEmptyState title=\"No keywords tracked yet\" />}\n *     />\n *   );\n * }\n * ```\n */\nexport function TapTable<T>({\n  columns,\n  rows,\n  rowKey,\n  empty,\n  onRowClick,\n}: TapTableProps<T>): ReactElement {\n  if (rows.length === 0 && empty !== undefined) {\n    return <>{empty}</>;\n  }\n\n  return (\n    <div className=\"tap-table-wrap\">\n      <table className=\"tap-table\">\n        <thead>\n          <tr>\n            {columns.map(column => (\n              <th\n                key={column.key}\n                className={cn(column.align === 'end' && 'tap-table__end')}\n                scope=\"col\"\n              >\n                {column.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map(row => (\n            <tr\n              key={rowKey(row)}\n              data-clickable={onRowClick !== undefined}\n              tabIndex={onRowClick === undefined ? undefined : 0}\n              onClick={\n                onRowClick === undefined ? undefined : () => onRowClick(row)\n              }\n              onKeyDown={\n                onRowClick === undefined\n                  ? undefined\n                  : event => {\n                      if (event.key !== 'Enter' && event.key !== ' ') return;\n                      event.preventDefault();\n                      onRowClick(row);\n                    }\n              }\n            >\n              {columns.map(column => (\n                <td\n                  key={column.key}\n                  className={cn(column.align === 'end' && 'tap-table__end')}\n                >\n                  {column.render\n                    ? column.render(row)\n                    : cellText(row, column.key)}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n","import {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTap } from '../context';\nimport { TapError } from '../errors';\n\nconst DIALOG_CLOSE_EVENT = 'tap:dialog-close';\n\nconst FOCUSABLE =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * `document.activeElement` is the mount's shadow host whenever focus sits\n * inside the shadow tree, so the trap resolves focus from the dialog's own root.\n */\nfunction activeElementNear(node: Node | null): Element | null {\n  const root = node?.getRootNode();\n  return root instanceof ShadowRoot\n    ? root.activeElement\n    : document.activeElement;\n}\n\n/** The props `TapDialog` takes. */\nexport interface TapDialogProps {\n  /** The dialog renders nothing while this is `false`. */\n  open: boolean;\n  /** Rendered in the header, and used as the dialog's accessible name. */\n  title: string;\n  /** Called by Escape, by a click on the scrim, and by the host's close event. */\n  onClose: () => void;\n  /** Rendered under a divider at the end, for the dialog's buttons. */\n  footer?: ReactNode;\n  children: ReactNode;\n  /** The id of your own heading, when the accessible name is not the title. */\n  labelledBy?: string;\n}\n\n/**\n * Renders a modal dialog into the mount's own portal node, so it covers the\n * surface without leaving the extension.\n *\n * @remarks\n * Rendered outside a Tappify mount it throws `TAP_OUTSIDE_HOST`, from the `useTap`\n * above it. Inside a mount whose shadow root has no portal node yet, opening it\n * throws `TapError` with code `TAP_NO_PORTAL`; `renderWithTap` provides that node\n * in tests. While open it traps Tab\n * inside itself, moves focus to the first focusable element and returns focus\n * where it was on close, and answers Escape and a click on the scrim with\n * `onClose`. The scrim follows `--tap-scrim` and the panel `--bg-raised`,\n * `--divider` and `--tap-radius`; the panel is at most 520 pixels wide. The\n * component keeps no open state of its own.\n *\n * @example\n * ```tsx\n * import { TapButton, TapDialog } from '@tappify/extension-sdk';\n * import { useState } from 'react';\n *\n * function ExportDialog() {\n *   const [open, setOpen] = useState(false);\n *   return (\n *     <>\n *       <TapButton onClick={() => setOpen(true)}>Export</TapButton>\n *       <TapDialog\n *         open={open}\n *         title=\"Export keywords\"\n *         onClose={() => setOpen(false)}\n *         footer={<TapButton onClick={() => setOpen(false)}>Done</TapButton>}\n *       >\n *         <span>The report covers the range in the filter bar.</span>\n *       </TapDialog>\n *     </>\n *   );\n * }\n * ```\n */\nexport function TapDialog({\n  open,\n  title,\n  onClose,\n  footer,\n  children,\n  labelledBy,\n}: TapDialogProps): ReactElement | null {\n  const tap = useTap();\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n  const titleId = useId();\n\n  const focusables = useCallback((): HTMLElement[] => {\n    const root = dialogRef.current;\n    if (root === null) return [];\n    return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE));\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n\n    const previous = activeElementNear(dialogRef.current);\n    focusables()[0]?.focus();\n\n    return () => {\n      if (previous instanceof HTMLElement) previous.focus();\n    };\n  }, [open, focusables]);\n\n  useEffect(() => {\n    const portal = tap.__portal;\n    if (!open || portal === null) return;\n\n    const close = (): void => {\n      onClose();\n    };\n\n    portal.addEventListener(DIALOG_CLOSE_EVENT, close);\n    return () => {\n      portal.removeEventListener(DIALOG_CLOSE_EVENT, close);\n    };\n  }, [open, tap, onClose]);\n\n  if (!open) return null;\n\n  if (tap.__portal === null) {\n    throw new TapError(\n      'TAP_NO_PORTAL',\n      'TapDialog needs the host portal node, which the mount sets inside its shadow root. Render this dialog from a contribution entry, or use renderWithTap() in tests.',\n    );\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      event.preventDefault();\n      onClose();\n      return;\n    }\n\n    if (event.key !== 'Tab') return;\n\n    const items = focusables();\n    if (items.length === 0) return;\n\n    const first = items[0];\n    const last = items[items.length - 1];\n    const active = activeElementNear(dialogRef.current);\n\n    if (event.shiftKey && active === first) {\n      event.preventDefault();\n      last.focus();\n      return;\n    }\n\n    if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  };\n\n  return createPortal(\n    <div\n      className=\"tap-dialog-scrim\"\n      onKeyDown={onKeyDown}\n      onMouseDown={event => {\n        if (event.target === event.currentTarget) onClose();\n      }}\n    >\n      <div\n        ref={dialogRef}\n        className=\"tap-dialog\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy ?? titleId}\n      >\n        <header className=\"tap-dialog__head\" id={titleId}>\n          {title}\n        </header>\n        <div className=\"tap-dialog__body\">{children}</div>\n        {footer !== undefined && (\n          <footer className=\"tap-dialog__foot\">{footer}</footer>\n        )}\n      </div>\n    </div>,\n    tap.__portal,\n  );\n}\n","import {\n  useMemo,\n  useState,\n  type ReactElement,\n  type SubmitEventHandler,\n} from 'react';\nimport { z } from 'zod';\nimport type { JsonSchema } from '../../manifest/types';\nimport { TapButton, TapInput, TapSelect } from './primitives';\n\n/** The control a schema property maps to. */\nexport type TapFormFieldKind =\n  | 'text'\n  | 'textarea'\n  | 'date'\n  | 'number'\n  | 'boolean'\n  | 'enum';\n\n/** One control `TapForm` renders, as `formFields` reads it off a schema. */\nexport interface TapFormField {\n  /** The property name in the schema, and the key in the submitted value. */\n  name: string;\n  /** The property's `title`, or the name spaced and capitalised. */\n  label: string;\n  kind: TapFormFieldKind;\n  /** Whether the schema lists the property under `required`. */\n  required: boolean;\n  /** The property's `description`. */\n  hint?: string;\n  /** Set for an `enum` property: one option per string value. */\n  options?: { value: string; label: string }[];\n}\n\nfunction humanise(name: string): string {\n  const spaced = name\n    .replace(/[_-]+/g, ' ')\n    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')\n    .trim();\n  return spaced.charAt(0).toUpperCase() + spaced.slice(1);\n}\n\nfunction readString(\n  source: Record<string, unknown>,\n  key: string,\n): string | undefined {\n  const value = source[key];\n  return typeof value === 'string' ? value : undefined;\n}\n\nfunction kindOf(property: Record<string, unknown>): TapFormFieldKind {\n  if (Array.isArray(property.enum)) return 'enum';\n\n  const type = readString(property, 'type');\n  if (type === 'boolean') return 'boolean';\n  if (type === 'number' || type === 'integer') return 'number';\n\n  const format = readString(property, 'format');\n  if (format === 'textarea') return 'textarea';\n  if (format === 'date') return 'date';\n  return 'text';\n}\n\n/**\n * Reads a JSON Schema object and returns the list of controls `TapForm` renders\n * from it.\n *\n * @remarks\n * One field per declared property, in the order the schema lists them; a schema\n * with no `properties` object returns an empty list, and a property that is not an\n * object is skipped. An `enum` becomes a select and keeps only its string values;\n * otherwise the kind comes from `type` — `boolean`, `number` and `integer` — and\n * then from `format`, where `textarea` and `date` are recognised and anything else\n * falls back to a single-line text control. Nested objects and arrays get a text\n * control, so render those yourself. Call it when you want the fields without the\n * form.\n *\n * @example\n * ```ts\n * import { formFields } from '@tappify/extension-sdk';\n *\n * const fields = formFields({\n *   type: 'object',\n *   properties: { refreshMinutes: { type: 'integer', title: 'Refresh minutes' } },\n *   required: ['refreshMinutes'],\n * });\n * const names = fields.map(field => field.name);\n * ```\n */\nexport function formFields(schema: JsonSchema): TapFormField[] {\n  const properties = schema.properties;\n  if (typeof properties !== 'object' || properties === null) return [];\n\n  const required = new Set(\n    Array.isArray(schema.required)\n      ? schema.required.filter(\n          (name): name is string => typeof name === 'string',\n        )\n      : [],\n  );\n\n  return Object.entries(properties).flatMap(([name, raw]) => {\n    if (typeof raw !== 'object' || raw === null) return [];\n    const property: Record<string, unknown> = { ...raw };\n    const kind = kindOf(property);\n\n    const field: TapFormField = {\n      name,\n      label: readString(property, 'title') ?? humanise(name),\n      kind,\n      required: required.has(name),\n    };\n\n    const hint = readString(property, 'description');\n    if (hint !== undefined) field.hint = hint;\n\n    if (kind === 'enum' && Array.isArray(property.enum)) {\n      field.options = property.enum\n        .filter((option): option is string => typeof option === 'string')\n        .map(option => ({ value: option, label: option }));\n    }\n\n    return [field];\n  });\n}\n\ntype Values = Record<string, unknown>;\n\nfunction requiredErrors(\n  fields: TapFormField[],\n  values: Values,\n): Record<string, string> {\n  const errors: Record<string, string> = {};\n  for (const field of fields) {\n    const value = values[field.name];\n    if (field.required && (value === undefined || value === '')) {\n      errors[field.name] = `${field.label} is required.`;\n    }\n  }\n  return errors;\n}\n\nfunction compile(schema: JsonSchema): z.ZodType | null {\n  try {\n    return z.fromJSONSchema(schema);\n  } catch {\n    return null;\n  }\n}\n\nfunction validate(\n  fields: TapFormField[],\n  compiled: z.ZodType | null,\n  values: Values,\n): Record<string, string> {\n  const errors = requiredErrors(fields, values);\n  if (compiled === null) return errors;\n\n  const result = compiled.safeParse(values);\n  if (result.success) return errors;\n\n  for (const issue of result.error.issues) {\n    const key = issue.path[0];\n    if (typeof key === 'string' && errors[key] === undefined) {\n      errors[key] = issue.message;\n    }\n  }\n  return errors;\n}\n\nfunction clean(fields: TapFormField[], values: Values): Values {\n  const output: Values = {};\n  for (const field of fields) {\n    const value = values[field.name];\n    if (value === undefined || value === '') continue;\n    output[field.name] = value;\n  }\n  return output;\n}\n\n/** The props `TapForm` takes. */\nexport interface TapFormProps<T> {\n  /** The object schema to render, one control per declared property. */\n  schema: JsonSchema;\n  /** The value the fields start at; later changes to it do not reset the form. */\n  value?: Partial<T>;\n  /** Defaults to `Submit`. */\n  submitLabel?: string;\n  /** Defaults to `Cancel`. */\n  cancelLabel?: string;\n  /** Marks the submit button busy and disables it while a submit is in flight. */\n  busy?: boolean;\n  /** Called with the cleaned value once validation passes. */\n  onSubmit: (value: T) => void | Promise<void>;\n  /** Renders a cancel button next to submit, and is called by it. */\n  onCancel?: () => void;\n}\n\n/**\n * Renders a JSON Schema as a form in the host's styling, validates it on submit\n * and hands back the value.\n *\n * @remarks\n * Point it at the same schema file the manifest references, so the form and the\n * handler change together. Submit drops the fields left blank, then checks what\n * remains against the whole schema, so a `minimum`, `pattern` or `maxLength`\n * lands under the control it belongs to; a required field left empty is reported\n * without reaching the schema. A schema this SDK's Zod version cannot compile\n * still renders and still enforces required fields. `onSubmit` runs only when\n * nothing failed, and the form holds its own values, so a change to `value` after\n * the first render does not reset it. A form with no `value` has nothing to infer\n * `T` from, so annotate the handler's parameter.\n *\n * @example\n * ```tsx\n * import { TapForm, type TapSettingsProps } from '@tappify/extension-sdk';\n *\n * const schema = {\n *   type: 'object',\n *   properties: { refreshMinutes: { type: 'integer', title: 'Refresh minutes' } },\n *   required: ['refreshMinutes'],\n * };\n *\n * function Settings({ values, onChange }: TapSettingsProps) {\n *   return (\n *     <TapForm\n *       schema={schema}\n *       value={values}\n *       submitLabel=\"Save\"\n *       onSubmit={next => onChange(next)}\n *     />\n *   );\n * }\n * ```\n */\nexport function TapForm<T>({\n  schema,\n  value,\n  submitLabel = 'Submit',\n  cancelLabel = 'Cancel',\n  busy = false,\n  onSubmit,\n  onCancel,\n}: TapFormProps<T>): ReactElement {\n  const fields = useMemo(() => formFields(schema), [schema]);\n  const compiled = useMemo(() => compile(schema), [schema]);\n  const [values, setValues] = useState<Values>(() => ({ ...value }));\n  const [errors, setErrors] = useState<Record<string, string>>({});\n\n  const set = (name: string, next: unknown): void => {\n    setValues(current => ({ ...current, [name]: next }));\n    setErrors(current => {\n      if (current[name] === undefined) return current;\n      const { [name]: _cleared, ...rest } = current;\n      return rest;\n    });\n  };\n\n  const submit: SubmitEventHandler<HTMLFormElement> = event => {\n    event.preventDefault();\n    const candidate = clean(fields, values);\n    const found = validate(fields, compiled, candidate);\n    setErrors(found);\n    if (Object.keys(found).length > 0) return;\n\n    void onSubmit(candidate as T);\n  };\n\n  return (\n    <form className=\"tap-form\" onSubmit={submit} noValidate>\n      {fields.map(field => {\n        const raw = values[field.name];\n\n        if (field.kind === 'enum') {\n          return (\n            <TapSelect\n              key={field.name}\n              label={field.label}\n              hint={field.hint}\n              error={errors[field.name]}\n              required={field.required}\n              value={typeof raw === 'string' ? raw : ''}\n              options={[\n                { value: '', label: 'Choose one' },\n                ...(field.options ?? []),\n              ]}\n              onChange={event => {\n                set(field.name, event.target.value);\n              }}\n            />\n          );\n        }\n\n        if (field.kind === 'boolean') {\n          return (\n            <TapInput\n              key={field.name}\n              type=\"checkbox\"\n              label={field.label}\n              hint={field.hint}\n              error={errors[field.name]}\n              className=\"tap-control--checkbox\"\n              checked={raw === true}\n              onChange={event => {\n                set(field.name, event.target.checked);\n              }}\n            />\n          );\n        }\n\n        if (field.kind === 'textarea') {\n          return (\n            <TapInput\n              key={field.name}\n              multiline\n              label={field.label}\n              hint={field.hint}\n              error={errors[field.name]}\n              required={field.required}\n              value={typeof raw === 'string' ? raw : ''}\n              onChange={event => {\n                set(field.name, event.target.value);\n              }}\n            />\n          );\n        }\n\n        return (\n          <TapInput\n            key={field.name}\n            type={\n              field.kind === 'number'\n                ? 'number'\n                : field.kind === 'date'\n                  ? 'date'\n                  : 'text'\n            }\n            label={field.label}\n            hint={field.hint}\n            error={errors[field.name]}\n            required={field.required}\n            value={\n              typeof raw === 'string' || typeof raw === 'number'\n                ? String(raw)\n                : ''\n            }\n            onChange={event => {\n              set(\n                field.name,\n                field.kind === 'number'\n                  ? event.target.value === ''\n                    ? ''\n                    : Number(event.target.value)\n                  : event.target.value,\n              );\n            }}\n          />\n        );\n      })}\n\n      <div className=\"tap-form__actions\">\n        {onCancel !== undefined && (\n          <TapButton variant=\"secondary\" onClick={onCancel}>\n            {cancelLabel}\n          </TapButton>\n        )}\n        <TapButton type=\"submit\" loading={busy}>\n          {submitLabel}\n        </TapButton>\n      </div>\n    </form>\n  );\n}\n"]}