@bearmenu/ui 0.8.33 → 0.8.35

package/src/components/split-share-row.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Checkbox } from "./checkbox";
+import { CurrencyInput } from "./currency-input";
+
+/**
+ * SplitShareRow — one person's share of a split item (16-shared-table.html,
+ * T6 and X10). Include them or leave them out, and in the custom mode set what
+ * they had.
+ *
+ * The board draws one row two ways and they are the same component: under md a
+ * full-width row with the check on the trailing edge, where a thumb is; from md
+ * a tile in a three-up grid with a square checkbox leading, where an eye scans
+ * a column. Both are CSS on one DOM — the order flips with `order`, the check's
+ * radius with a breakpoint — so there is no JS measurement and no flash.
+ *
+ * The amount sits in a soft pill under md whether or not it is editable, as the
+ * frames draw it; from md a fixed amount is plain text and only an editable one
+ * keeps the pill, plus a hairline and a focus ring, because on a wide screen
+ * nothing else would say "you can type here".
+ *
+ * The numeral is the bold sans and only the caller's currency suffix is mono,
+ * as the board draws money everywhere.
+ *
+ * The parent owns the grid (`grid md:grid-cols-3`) and the arithmetic. This row
+ * reports what it was given and never rounds: allocations are integer minor
+ * units and must sum to the line total exactly.
+ */
+export type SplitShareRowProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onChange" | "children"
+> & {
+  /** Avatar and name, composed by the caller — the design system holds no participant shape. */
+  person: React.ReactNode;
+  /** The share as the caller formatted it. Shown when `editable` is false. */
+  amount: React.ReactNode;
+  /** Swaps the amount for a `CurrencyInput`. The custom mode, and only it. */
+  editable?: boolean;
+  /** The editable value in major units, as `CurrencyInput` takes it. */
+  amountValue?: number | null;
+  onAmountChange?: (value: number | null) => void;
+  /** Passed through to `CurrencyInput` for the editable amount. */
+  currency?: string;
+  locale?: string;
+  /** Is this person in the split? Omit the handler for a row that cannot be excluded. */
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  /**
+   * The checkbox's accessible name — "Include Ana in the split". Injected;
+   * the design system holds no copy.
+   */
+  includeLabel?: string;
+  /** The editable amount's accessible name — "Ana's share". */
+  amountLabel?: string;
+  disabled?: boolean;
+};
+
+const SplitShareRow = React.forwardRef<HTMLDivElement, SplitShareRowProps>(
+  (
+    {
+      className,
+      person,
+      amount,
+      editable = false,
+      amountValue = null,
+      onAmountChange,
+      currency = "lei",
+      locale,
+      checked,
+      onCheckedChange,
+      includeLabel,
+      amountLabel,
+      disabled = false,
+      ...props
+    },
+    ref
+  ) => {
+    const amountId = React.useId();
+
+    return (
+      <div
+        ref={ref}
+        data-slot="split-share-row"
+        data-checked={checked ? "" : undefined}
+        className={cn(
+          "flex items-center gap-3 rounded-xl border border-border bg-card px-3 py-2.5",
+          className
+        )}
+        {...props}
+      >
+        <div className="min-w-0 flex-1 order-2">{person}</div>
+
+        {editable ? (
+          <span className="order-3 shrink-0">
+            {/* `CurrencyInput` takes a closed prop set with no `aria-label`,
+                so the name arrives the HTML way. */}
+            <label htmlFor={amountId} className="sr-only">
+              {amountLabel}
+            </label>
+            <CurrencyInput
+              id={amountId}
+              value={amountValue}
+              onChange={(next) => onAmountChange?.(next)}
+              currency={currency}
+              locale={locale}
+              disabled={disabled}
+              // An editable amount has to look editable at both widths, which
+              // the soft pill alone does not do on a wide screen where the
+              // fixed amount is plain text: it takes a hairline and a focus ring.
+              className="h-9 w-24 rounded-lg border border-border bg-surface-2 text-right text-[13px] font-bold tabular-nums focus-within:ring-2 focus-within:ring-ring"
+            />
+          </span>
+        ) : (
+          <span
+            data-slot="split-share-amount"
+            className={cn(
+              "order-3 shrink-0 rounded-lg bg-surface-2 px-2.5 py-1 text-[13px] font-bold tabular-nums md:bg-transparent md:px-0",
+              // Only the amount goes quiet when someone is out of the split.
+              // Dimming the whole row takes the name under 4.5:1 with it.
+              checked === false && "text-muted-foreground"
+            )}
+          >
+            {amount}
+          </span>
+        )}
+
+        {onCheckedChange ? (
+          <Checkbox
+            checked={checked}
+            onCheckedChange={(next) => onCheckedChange(next === true)}
+            disabled={disabled}
+            aria-label={includeLabel}
+            // Last in the DOM because that is where the sheet paints it, so
+            // tab order follows the eye; `md:order-first` moves it to the
+            // leading edge for the dialog's three-up tiles. 44px either way.
+            className={cn(
+              "relative order-4 size-6 rounded-full md:order-1 md:size-5 md:rounded-md",
+              "before:absolute before:-inset-2.5 before:content-[''] md:before:-inset-3"
+            )}
+          />
+        ) : null}
+      </div>
+    );
+  }
+);
+SplitShareRow.displayName = "SplitShareRow";
+
+export { SplitShareRow };

package/src/components/table-ledger-card.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Users } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarGroup } from "./avatar";
+import { Badge } from "./badge";
+import { TableLedgerCard } from "./table-ledger-card";
+
+const meta: Meta<typeof TableLedgerCard> = {
+  title: "Shared table/TableLedgerCard",
+  component: TableLedgerCard,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "What one party at a shared table has against their name. One component for the person card, the Shared card, the card a remote write just changed, and the drop targets on Organise.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TableLedgerCard>;
+
+const adrian = (
+  <Avatar size="sm" tone="brown">
+    <AvatarFallback>A</AvatarFallback>
+  </Avatar>
+);
+
+const rows = [
+  { id: "1", label: "Ciorbă de burtă", amount: "32 lei" },
+  { id: "2", label: "Zacuscă de casă", amount: "24 lei" },
+];
+
+/** T2 — a person and what they had. */
+export const Person: Story = {
+  args: {
+    lead: adrian,
+    person: (
+      <>
+        Adrian <span className="font-normal text-muted-foreground">· host</span>
+      </>
+    ),
+    meta: "2 items + share",
+    total: "96 lei",
+    rows,
+    labels: { rows: "Adrian's items" },
+  },
+};
+
+/** T2 — the Shared card: a glyph for a lead, and rows priced per head. */
+export const Shared: Story = {
+  args: {
+    lead: (
+      <span className="grid size-8 place-items-center rounded-full bg-muted text-muted-foreground">
+        <Users className="size-4" aria-hidden />
+      </span>
+    ),
+    person: "Shared between everyone",
+    total: "120 lei",
+    rows: [{ id: "w", label: "Fetească Neagră, Recaș", amount: "", trailing: "40 lei each" }],
+  },
+};
+
+/** X5 — someone else just added to it, marked in place rather than re-sorted. */
+export const Updated: Story = {
+  args: {
+    state: "updated",
+    lead: (
+      <Avatar size="sm" tone="teal">
+        <AvatarFallback>B</AvatarFallback>
+      </Avatar>
+    ),
+    person: "Bruno",
+    total: "150 lei",
+    rows: [
+      {
+        id: "t",
+        label: "Tochitură ardelenească",
+        amount: "54 lei",
+        badge: <Badge variant="pending">just now</Badge>,
+      },
+    ],
+  },
+};
+
+/** T4 desktop — the drop targets, header only. */
+export const DropTargets: Story = {
+  render: () => (
+    <div className="grid gap-2">
+      <TableLedgerCard state="drop-idle" lead={adrian} person="Adrian" meta="2 items" total="56 lei" />
+      <TableLedgerCard
+        state="drop-active"
+        lead={
+          <Avatar size="sm" tone="teal">
+            <AvatarFallback>B</AvatarFallback>
+          </Avatar>
+        }
+        person="Bruno"
+        meta="2 items"
+        total="150 lei"
+      />
+      <TableLedgerCard
+        state="drop-idle"
+        lead={
+          <AvatarGroup size="sm" spacing="tight">
+            <Avatar tone="brown">
+              <AvatarFallback>A</AvatarFallback>
+            </Avatar>
+            <Avatar tone="teal">
+              <AvatarFallback>B</AvatarFallback>
+            </Avatar>
+          </AvatarGroup>
+        }
+        person="Shared"
+        meta="Split between everyone"
+      />
+    </div>
+  ),
+};

package/src/components/table-ledger-card.tsx

@@ -0,0 +1,138 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * TableLedgerCard — what one party at a shared table has against their name.
+ *
+ * The board draws this shape four times and it is one component
+ * (16-shared-table.html):
+ * - T2, a person's card — avatar, "Adrian · host", "2 items + share", their
+ *   total, and the items under it.
+ * - T2, the Shared card — the same card whose `lead` is a people glyph or an
+ *   `AvatarGroup` instead of one avatar, and whose rows carry "40 lei each".
+ * - X5, the same card the moment someone else changed it: `updated` rings it
+ *   and tints the header, so a remote write is marked in place and the ledger
+ *   never silently re-sorts under a reader.
+ * - T4 desktop, the drop targets — the header alone, no rows, `drop-idle`
+ *   until a drag is over it and `drop-active` while it is.
+ *
+ * Money slots are `font-bold tabular-nums`, so a column of totals lines up and
+ * does not shuffle when one changes. The board sets the NUMERAL in the bold
+ * sans and only the currency suffix in mono, small and muted — so a caller
+ * passes `96` followed by a `font-mono text-[11px] text-muted-foreground`
+ * "lei", and never wraps the whole amount in `font-mono`.
+ *
+ * Drag is an accelerator only. A card in `drop-active` must have a tap and
+ * keyboard path to the same outcome — every T4 row opens "Who had this?" —
+ * because a pointer that can drag is not a pointer everyone has.
+ */
+const tableLedgerCardVariants = cva(
+  "overflow-hidden rounded-2xl border bg-card transition-colors",
+  {
+    variants: {
+      state: {
+        default: "border-border",
+        updated: "border-primary",
+        "drop-idle": "border-dashed border-border",
+        "drop-active": "border-dashed border-primary bg-accent-subtle",
+      },
+    },
+    defaultVariants: { state: "default" },
+  }
+);
+
+export type TableLedgerRow = {
+  /** React key. Falls back to the index when the caller has no id. */
+  id?: string;
+  /** The dish or drink. */
+  label: React.ReactNode;
+  /** Its price, formatted by the caller. */
+  amount: React.ReactNode;
+  /** The quiet trailing line — "40 lei each" on the Shared card. Replaces `amount` when set. */
+  trailing?: React.ReactNode;
+  /** A chip on the row — "just now" on the X5 card, "Queued" on X6. */
+  badge?: React.ReactNode;
+};
+
+export type TableLedgerCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> &
+  VariantProps<typeof tableLedgerCardVariants> & {
+    /** The leading slot: an `Avatar`, an `AvatarGroup`, or a glyph for "Shared". */
+    lead?: React.ReactNode;
+    /** The name — "Adrian · host", "Shared between everyone". */
+    person?: React.ReactNode;
+    /** The line under the name — "2 items + share". */
+    meta?: React.ReactNode;
+    /** Their running total, formatted by the caller. */
+    total?: React.ReactNode;
+    /** The items. Empty or omitted for a T4 drop target. */
+    rows?: TableLedgerRow[];
+    /** Accessible names. Injected; the design system holds no copy. */
+    labels?: { rows?: string };
+  };
+
+const TableLedgerCard = React.forwardRef<HTMLDivElement, TableLedgerCardProps>(
+  ({ className, state, lead, person, meta, total, rows, labels, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="table-ledger-card"
+      data-state={state ?? "default"}
+      className={cn(tableLedgerCardVariants({ state }), className)}
+      {...props}
+    >
+      <div
+        data-slot="table-ledger-header"
+        className={cn(
+          "flex items-center gap-3 px-3.5 py-3",
+          // The header takes its own ground only when there are items under it,
+          // so it reads as their heading. A card with no rows — a drop target,
+          // a person who has had nothing yet — is one plain block, and tinting
+          // it would also paint over `drop-active`'s accent.
+          rows?.length
+            ? state === "updated"
+              ? "bg-accent-subtle"
+              : "bg-surface-2/60"
+            : undefined
+        )}
+      >
+        {lead ? <div className="shrink-0">{lead}</div> : null}
+        <div className="min-w-0 flex-1">
+          {person ? <div className="truncate text-[15px] font-bold leading-tight">{person}</div> : null}
+          {meta ? <div className="mt-0.5 truncate text-[12.5px] text-muted-foreground">{meta}</div> : null}
+        </div>
+        {total ? (
+          <div
+            data-slot="table-ledger-total"
+            className="shrink-0 text-[15px] font-bold tabular-nums"
+          >
+            {total}
+          </div>
+        ) : null}
+      </div>
+
+      {rows && rows.length > 0 ? (
+        <ul data-slot="table-ledger-rows" aria-label={labels?.rows} className="divide-y divide-border">
+          {rows.map((row, index) => (
+            <li
+              key={row.id ?? index}
+              className="flex items-center gap-3 px-3.5 py-2.5 text-[14px]"
+            >
+              <span className="min-w-0 flex-1 truncate">{row.label}</span>
+              {row.badge}
+              {row.trailing ? (
+                <span className="shrink-0 text-[12.5px] text-muted-foreground">{row.trailing}</span>
+              ) : (
+                <span className="shrink-0 text-[14px] font-bold tabular-nums">
+                  {row.amount}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+);
+TableLedgerCard.displayName = "TableLedgerCard";
+
+export { TableLedgerCard, tableLedgerCardVariants };

package/src/components/table-trigger-band.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarFallback, AvatarGroup } from "./avatar";
+import { Button } from "./button";
+import { TableTriggerBand } from "./table-trigger-band";
+
+const meta: Meta<typeof TableTriggerBand> = {
+  title: "Shared table/TableTriggerBand",
+  component: TableTriggerBand,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The way back to a live table from the venue's own pages. One target at both widths: a chevron under md, the action inside the link from md — a real button nested in a link would give a screen reader two controls where a reader sees one.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TableTriggerBand>;
+
+const stack = (
+  <AvatarGroup size="sm" spacing="tight">
+    <Avatar tone="brown">
+      <AvatarFallback>A</AvatarFallback>
+    </Avatar>
+    <Avatar tone="teal">
+      <AvatarFallback>B</AvatarFallback>
+    </Avatar>
+    <Avatar tone="green">
+      <AvatarFallback>A</AvatarFallback>
+    </Avatar>
+  </AvatarGroup>
+);
+
+/** T0c — a session is live on this device. */
+export const AtTheTable: Story = {
+  args: {
+    href: "/t/8f3c1a",
+    people: stack,
+    title: "You're at Table 18",
+    meta: "Adrian, Bruno and you · opened 19:42 · 367 lei so far",
+    // `asChild`: the band is the link, so its action must not be a real
+    // <button> nested inside an <a>.
+    action: (
+      <Button asChild variant="cta">
+        <span>Open the table</span>
+      </Button>
+    ),
+  },
+};
+
+/** T0e — none is, so the band offers to start one. No naming step. */
+export const StartATable: Story = {
+  args: {
+    href: "/t/new",
+    title: "Start a table",
+    meta: "Track who had what, then invite the others",
+    action: (
+      <Button asChild variant="cta">
+        <span>Start a table</span>
+      </Button>
+    ),
+  },
+};
+
+/** Without an action the chevron carries both widths. */
+export const ChevronOnly: Story = {
+  args: {
+    href: "/t/8f3c1a",
+    people: stack,
+    title: "You're at Table 18",
+    meta: "3 people · 367 lei so far",
+  },
+};

package/src/components/table-trigger-band.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * TableTriggerBand — the way back to a live shared table from the venue's own
+ * pages: "You're at Table 18 · 3 people · 367 lei so far" (16-shared-table.html
+ * T0c), and the same band offering to start one when none is live (T0e).
+ *
+ * It is one target, not a card with a button in it. The frames draw a chevron
+ * under md and an "Open the table" button from md, but both mean "this band
+ * goes to the table", so the band is the link at both widths and `action`
+ * renders inside it as the wide screen's affordance — a span that looks like a
+ * button, `aria-hidden`, because the link already carries the name. A real
+ * button nested in a link is invalid HTML and gives a screen reader two
+ * controls where a reader sees one.
+ *
+ * `linkComponent` takes the app's router link (`next/link`); it falls back to
+ * `a`, so the design system imports no router.
+ */
+export type TableTriggerBandProps = {
+  /** "You're at Table 18", "Start a table". */
+  title: React.ReactNode;
+  /** "3 people · 367 lei so far"; desktop draws the longer "Adrian, Bruno and you · opened 19:42". */
+  meta?: React.ReactNode;
+  /** The avatar stack — an `AvatarGroup`, or nothing when no table is live. */
+  people?: React.ReactNode;
+  /**
+   * The wide screen's call to action. Decorative: the band is the control, so
+   * this must NOT be a real `button` — a button inside an anchor is invalid
+   * HTML. Pass `<Button asChild><span>…</span></Button>`.
+   */
+  action?: React.ReactNode;
+  href: string;
+  /** The app's link component. Defaults to `a`. */
+  linkComponent?: React.ElementType;
+  className?: string;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "title" | "action">;
+
+const TableTriggerBand = React.forwardRef<HTMLAnchorElement, TableTriggerBandProps>(
+  ({ title, meta, people, action, href, linkComponent, className, ...props }, ref) => {
+    const Link = linkComponent ?? "a";
+
+    return (
+      <Link
+        ref={ref}
+        href={href}
+        data-slot="table-trigger-band"
+        className={cn(
+          "flex items-center gap-3 rounded-2xl border border-primary bg-card px-3.5 py-3 transition-colors hover:bg-accent-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          className
+        )}
+        {...props}
+      >
+        {people ? <div className="shrink-0">{people}</div> : null}
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-[15px] font-bold leading-tight">{title}</div>
+          {meta ? <div className="mt-0.5 truncate text-[12.5px] text-muted-foreground">{meta}</div> : null}
+        </div>
+        {action ? (
+          <span data-slot="table-trigger-action" aria-hidden className="hidden shrink-0 md:block">
+            {action}
+          </span>
+        ) : null}
+        <ChevronRight
+          aria-hidden
+          className={cn("size-5 shrink-0 text-muted-foreground", action && "md:hidden")}
+        />
+      </Link>
+    );
+  }
+);
+TableTriggerBand.displayName = "TableTriggerBand";
+
+export { TableTriggerBand };

package/src/globals.css

@@ -190,6 +190,31 @@ h6 {
   --brown: oklch(0.31 0.05 45);
   --brown-foreground: oklch(0.985 0 0);
 
+  /* Avatar tones — one fixed hue per person at a shared table, so the same
+     face reads the same on the ledger card, the organise chip, the split row
+     and the activity feed. Sampled from the shared-table board
+     (16-shared-table.html): #914F2F, #006469, #196632. All three sit near
+     L 0.45–0.50, which carries a white initial at 6.2:1, 6.9:1 and 7.0:1 —
+     AA with room, because the initial is small and semibold.
+
+     They are NOT `--primary` / `--success`: those move with the brand and
+     with status, and a person's colour must not. `avatar-brown` is deliberately
+     lighter than `--brown` so a disc separates from a brown control behind it. */
+  --avatar-brown: oklch(0.5 0.1 45.5);
+  --avatar-teal: oklch(0.458 0.078 201);
+  --avatar-green: oklch(0.451 0.111 150);
+  /* The board draws three people; a table can seat more. The drawn hues sit at
+     45.5°, 150° and 201°, leaving the 205°–405° arc free, so the next three are
+     spaced across it at the same step the teal/green pair uses. White initials
+     measure 6.57 / 7.30 / 7.12:1 here. Assign in this order: rose (357°) then
+     lands furthest from brown (45.5°) in join order. Past six, cycle — at a
+     table of seven the initial and the name are doing the identifying, and
+     colour is a support cue, never the only one, which is also the answer to
+     teal and green reading alike under deuteranopia. */
+  --avatar-blue: oklch(0.48 0.13 253);
+  --avatar-violet: oklch(0.47 0.14 305);
+  --avatar-rose: oklch(0.48 0.15 357);
+
   /* Shadow tokens — color + per-step alpha (themed in .dark) */
   --shadow-color: 0 0% 0%;
   --shadow-alpha-2xs: 0.05;
@@ -359,6 +384,18 @@ h6 {
   --brown: oklch(0.31 0.05 45);
   --brown-foreground: oklch(0.985 0 0);
 
+  /* Avatar tones, lifted one notch. The light values sit at 2.6–2.9:1 against
+     a 0.205 card, so a disc has no edge in dark; +0.06 lightness buys 3.3–3.7:1
+     (AA non-text) while the white initial still holds 4.8–5.4:1 (AA text).
+     Lifting further trades the initial away for the edge — this is the ceiling. */
+  --avatar-brown: oklch(0.56 0.1 45.5);
+  --avatar-teal: oklch(0.518 0.078 201);
+  --avatar-green: oklch(0.511 0.111 150);
+  /* Same +0.06 lift: disc-vs-card 3.54 / 3.19 / 3.26:1, white at 5.07 / 5.63 / 5.50:1. */
+  --avatar-blue: oklch(0.54 0.13 253);
+  --avatar-violet: oklch(0.53 0.14 305);
+  --avatar-rose: oklch(0.54 0.15 357);
+
   /* Heavier shadow alphas — default Tailwind tints disappear on dark surfaces */
   --shadow-alpha-2xs: 0.25;
   --shadow-alpha-xs: 0.3;
@@ -424,6 +461,13 @@ h6 {
   --color-chart-5: var(--chart-5);
   --color-brown: var(--brown);
   --color-brown-foreground: var(--brown-foreground);
+  /* `bg-avatar-brown` … — a person's fixed hue at a shared table. */
+  --color-avatar-brown: var(--avatar-brown);
+  --color-avatar-teal: var(--avatar-teal);
+  --color-avatar-green: var(--avatar-green);
+  --color-avatar-blue: var(--avatar-blue);
+  --color-avatar-violet: var(--avatar-violet);
+  --color-avatar-rose: var(--avatar-rose);
 
   /* Radius scale */
   --radius-sm: calc(var(--radius) - 4px);

package/src/test/setup.ts

@@ -11,3 +11,14 @@ globalThis.ResizeObserver = class ResizeObserver {
 };
 
 window.HTMLElement.prototype.scrollIntoView = function () {};
+
+// jsdom implements no Pointer Events capture API. vaul calls
+// `setPointerCapture` on the first pointerdown inside a Drawer, so without
+// these any test that clicks inside a sheet fails with an unhandled
+// TypeError — and the failure lands on whichever test ran last, not on the
+// one that caused it.
+window.HTMLElement.prototype.setPointerCapture = function () {};
+window.HTMLElement.prototype.releasePointerCapture = function () {};
+window.HTMLElement.prototype.hasPointerCapture = function () {
+  return false;
+};