@sableui/react 0.6.1 → 0.7.0

package/dist/components/area-chart/area-chart.meta.js

@@ -0,0 +1,218 @@
+// src/components/area-chart/area-chart.meta.ts
+var areaChartMeta = {
+  name: "AreaChart",
+  summary: "A trend over a sequence, filled to the baseline: overlapping translucent series, stacked, or stacked to 100%, with smooth, linear or step curves and optional gradient fills. The line draws on and the fill rises as it scrolls into view.",
+  keywords: [
+    "chart",
+    "area",
+    "trend",
+    "time series",
+    "stacked",
+    "graph",
+    "analytics",
+    "dashboard",
+    "visitors",
+    "revenue"
+  ],
+  usage: {
+    description: 'Use AreaChart for volume over time \u2014 visitors, revenue, usage \u2014 where the filled shape helps the eye read the size of the total. Stack the series to show a total and its parts; `stacked="expand"` shows each category as 100%. For comparing how measures move relative to each other, LineChart is cleaner; for amounts per category, BarChart.',
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Keep to one to three series; past that the tints muddy \u2014 stack them or switch to LineChart."
+      },
+      {
+        guidance: "do",
+        description: "Set a height on className (h-72, aspect-video h-auto); the chart fills the box it is given."
+      },
+      {
+        guidance: "dont",
+        description: "Overlap more than two unstacked series \u2014 the translucent tints blend into a colour no series has."
+      },
+      {
+        guidance: "dont",
+        description: "Use it for data-heavy views \u2014 streaming or real-time data, thousands of points, zoom and brushing, trading charts. Those belong on a charting library (Recharts, visx, ECharts); Sable's charts are for dashboards, landing pages and decks."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "LineChart",
+      "BarChart",
+      "Sparkline",
+      "Card"
+    ]
+  },
+  status: "beta",
+  props: [
+    {
+      name: "data",
+      type: "Record<string, unknown>[]",
+      description: "The rows, in order along the category axis."
+    },
+    {
+      name: "index",
+      type: "string",
+      description: "The datum field naming each row's category (a month, a day, a channel)."
+    },
+    {
+      name: "series",
+      type: "{ key: string; label: string; tone?: ChartTone; color?: string; icon?: string }[]",
+      description: "The measures to plot: the datum field, its name in the legend/tooltip/table, and its colour (a tone by role, or any CSS colour). Omitted, series take the chart palette in order: --chart-1 \u2026 --chart-8, validated for colour-blind separation in light and dark; a theme may override the set."
+    },
+    {
+      name: "label",
+      type: "string",
+      description: "What the chart shows. Its accessible name and the caption of the data table assistive tech reads."
+    },
+    {
+      name: "className",
+      type: "string",
+      default: '"h-60"',
+      description: "Sizes the chart (plot + legend). Set a height: `h-72`, `aspect-video h-auto`."
+    },
+    {
+      name: "valueFormatter",
+      type: "(value: number) => string",
+      description: 'Format values everywhere (axis, labels, tooltip, table) \u2014 units like "$12,480". Default: compact on the axis, full elsewhere.'
+    },
+    {
+      name: "indexFormatter",
+      type: "(value: string) => string",
+      description: 'Shorten category labels on the axis ("January" \u2192 "Jan"); the tooltip keeps the full value.'
+    },
+    {
+      name: "locale",
+      type: "string",
+      default: "runtime locale",
+      description: "BCP 47 locale for default number and date formatting."
+    },
+    {
+      name: "tooltip",
+      type: 'boolean | { indicator?: "dot" | "line" | "dashed" | "none"; hideLabel?: boolean; labelFormatter?: (label, datum) => ReactNode; showTotal?: boolean }',
+      default: "true",
+      description: "Show a tooltip on hover and keyboard focus, or configure it: the row marker, hiding the heading, rewriting it, adding a Total row."
+    },
+    {
+      name: "legend",
+      type: "boolean",
+      default: "true when there is more than one series",
+      description: "Show the legend under the chart."
+    },
+    {
+      name: "grid",
+      type: "boolean",
+      default: "true (false for horizontal bars)",
+      description: "Hairline gridlines along the value axis."
+    },
+    {
+      name: "xAxis",
+      type: "boolean",
+      default: "true for columns; false for horizontal bars",
+      description: "The horizontal axis."
+    },
+    {
+      name: "yAxis",
+      type: "boolean",
+      default: "false for columns; true for horizontal bars",
+      description: "The vertical axis."
+    },
+    {
+      name: "animate",
+      type: "boolean",
+      default: "true",
+      description: "Play the arrival once the chart scrolls into view. Reduced motion shows the finished chart."
+    },
+    {
+      name: "activeIndex",
+      type: "number | null",
+      description: "The highlighted row (controlled); `null` for none."
+    },
+    {
+      name: "defaultActiveIndex",
+      type: "number | null",
+      description: "The row highlighted at first \u2014 a tooltip already open before anyone hovers."
+    },
+    {
+      name: "onActiveIndexChange",
+      type: "(index: number | null) => void",
+      description: "Called as the pointer or keyboard moves between rows."
+    },
+    {
+      name: "curve",
+      type: '"smooth" | "linear" | "step"',
+      default: '"smooth"',
+      description: "How the line runs between points. `smooth` is monotone: it never overshoots a value the data does not contain."
+    },
+    {
+      name: "stacked",
+      type: 'boolean | "expand"',
+      default: "false",
+      description: 'Stack the series, or `"expand"` to show each category as 100%.'
+    },
+    {
+      name: "gradient",
+      type: "boolean",
+      default: "false",
+      description: "Fill each area with a fade from its colour to transparent instead of a flat tint."
+    }
+  ],
+  tokensUsed: [
+    "tone-edition",
+    "tone-collectible",
+    "tone-standard",
+    "tone-info",
+    "tone-warning",
+    "primary",
+    "muted-foreground",
+    "border",
+    "popover",
+    "popover-foreground",
+    "foreground",
+    "background"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "custom",
+      part: "Area + line",
+      why: "Once on screen, each line draws on (stroke-dashoffset) and its fill rises from the baseline, series staggered \u2014 the trend is read as it is drawn. On the motion tokens; reduced motion shows the finished chart."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "Cursor + tooltip",
+      why: "Hover and focus move the cursor and tooltip instantly \u2014 a lagging cursor reads as a slow chart."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Area + line",
+      why: "Geometry eases from the old shape to the new one through a CSS `d` transition on the motion tokens (no recipe animates path geometry); browsers without `d` transitions update in place."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "AreaChart",
+      why: "A chart has no indeterminate state; show a Skeleton while the data loads."
+    }
+  ],
+  a11y: [
+    "The drawing is aria-hidden; the same numbers are in a visually hidden data table (captioned by `label`) that the chart is aria-describedby, so assistive tech reads values, not shapes.",
+    'With a tooltip, the chart is one tab stop (role=group, aria-roledescription="chart"): arrow keys, Home and End step through the data, Escape clears, and each step is announced in a polite live region.',
+    "Colour is never the only key: series are named in the legend, tooltip and table."
+  ],
+  examples: [
+    {
+      label: "Two series with a legend",
+      code: 'const visitors = [\n	{ month: "January", desktop: 186, mobile: 80 },\n	{ month: "February", desktop: 305, mobile: 200 },\n	{ month: "March", desktop: 237, mobile: 120 },\n	{ month: "April", desktop: 73, mobile: 190 },\n	{ month: "May", desktop: 209, mobile: 130 },\n	{ month: "June", desktop: 214, mobile: 140 },\n]\n\n<AreaChart\n	label="Visitors, January to June"\n	data={visitors}\n	index="month"\n	series={[\n		{ key: "desktop", label: "Desktop" },\n		{ key: "mobile", label: "Mobile" },\n	]}\n	indexFormatter={(m) => m.slice(0, 3)}\n	gradient\n/>'
+    },
+    {
+      label: "Stacked to 100%",
+      code: '<AreaChart\n	label="Share of visitors by device"\n	data={visitors}\n	index="month"\n	series={[\n		{ key: "desktop", label: "Desktop" },\n		{ key: "mobile", label: "Mobile" },\n	]}\n	stacked="expand"\n	yAxis\n	tooltip={{ indicator: "line", showTotal: true }}\n/>'
+    }
+  ]
+};
+export {
+  areaChartMeta
+};

package/dist/components/area-chart/index.js

@@ -0,0 +1,7 @@
+// src/components/area-chart/index.ts
+import { AreaChart } from "./area-chart.js";
+import { areaChartMeta } from "./area-chart.meta.js";
+export {
+  AreaChart,
+  areaChartMeta
+};

package/dist/components/attachment/attachment.js

@@ -0,0 +1,176 @@
+// src/components/attachment/attachment.tsx
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { useTypeTier } from "../../lib/density.js";
+import { Progress, ProgressTrack } from "../progress/index.js";
+import {
+  attachmentMediaVariants,
+  attachmentVariants
+} from "./attachment.variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Attachment({
+  name,
+  meta,
+  thumbnail,
+  icon,
+  variant = "card",
+  status = "idle",
+  progress,
+  actions,
+  onOpen,
+  openLabel,
+  className,
+  children,
+  ...props
+}) {
+  const glyph = icon ?? (thumbnail ? "image-stack" : "file");
+  const dot = name.lastIndexOf(".");
+  const hasExtension = dot > 0 && name.length - dot <= 6;
+  const stem = hasExtension ? name.slice(0, dot) : name;
+  const extension = hasExtension ? name.slice(dot) : "";
+  const isMedia = variant === "media";
+  const tier = useTypeTier();
+  const textLayer = onOpen ? "pointer-events-none" : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-status": status,
+      className: cn(
+        attachmentVariants({ variant, status, interactive: Boolean(onOpen) }),
+        className
+      ),
+      ...props,
+      children: [
+        onOpen ? (
+          // z-0 keeps this a local stacking concern inside the card's own
+          // `isolate`, not a bid in the global layer order.
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onOpen,
+              className: "absolute inset-0 z-0 cursor-pointer rounded-[var(--attachment-radius,var(--radius-md))] motion-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+              children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: openLabel ?? `Open ${name}` })
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: cn(attachmentMediaVariants({ variant })), children: thumbnail ? (
+          // On a media tile the picture IS the label — there is no adjacent
+          // filename to read. On a card it sits next to one, so describing it
+          // again would just make AT say the name twice.
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: thumbnail,
+              alt: isMedia ? name : "",
+              className: "size-full object-cover",
+              loading: "lazy"
+            }
+          )
+        ) : /* @__PURE__ */ jsx(Icon, { name: glyph, className: isMedia ? "text-2xl" : "text-lg" }) }),
+        isMedia ? (
+          /* On a media tile the name would cover the picture, so it only appears
+             when there is something to say — a size, an upload state, an error.
+             `bg-overlay` rather than a themed surface: this ink sits on arbitrary
+             imagery, not on a theme surface, and has to stay legible over both. */
+          meta || status !== "idle" ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-x-0 z-10 bg-overlay px-2 py-1",
+                // Clear the progress bar (h-1) on the same edge rather than
+                // letting it paint over the bottom of the text.
+                status === "uploading" ? "bottom-1" : "bottom-0",
+                textLayer
+              ),
+              children: /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "truncate text-overlay-foreground",
+                    tier.secondary
+                  ),
+                  children: meta ?? name
+                }
+              )
+            }
+          ) : null
+        ) : /* @__PURE__ */ jsxs("div", { className: cn("z-10 min-w-0 flex-1", textLayer), children: [
+          /* @__PURE__ */ jsxs(
+            "p",
+            {
+              "data-slot": "attachment-name",
+              title: name,
+              className: cn("flex min-w-0 text-foreground", tier.body),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: stem }),
+                extension ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: extension }) : null
+              ]
+            }
+          ),
+          meta ? (
+            // Truncated normally — a size and a type are recognisable from
+            // their first few characters. NOT on error: the reason is the
+            // only thing telling the reader whether to retry or pick a
+            // different file, and "Upload failed — over the 50 MB l…" is
+            // exactly the half of the sentence that does not help.
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  tier.secondary,
+                  status === "error" ? "text-destructive" : "truncate text-muted-foreground"
+                ),
+                children: meta
+              }
+            )
+          ) : null,
+          status === "uploading" ? (
+            // In the text column, under the meta it measures — not along
+            // the card's bottom edge. On the edge the corner curve clipped
+            // the bar at rounder settings, and the track, read against
+            // whatever the card sits on, made the card look cut off.
+            /* @__PURE__ */ jsx(
+              Progress,
+              {
+                value: progress ?? null,
+                "aria-label": `Uploading ${name}`,
+                className: "mt-1.5 w-full",
+                children: /* @__PURE__ */ jsx(ProgressTrack, { className: "h-1" })
+              }
+            )
+          ) : null
+        ] }),
+        actions ? (
+          // On a media tile the picture fills the box, so in-flow actions were
+          // pushed below it and clipped away. They float on the top-end corner
+          // instead — pass `variant="floating"` buttons so they read on any image.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "z-10 flex shrink-0 items-center gap-1",
+                isMedia ? "absolute end-1 top-1" : "relative"
+              ),
+              children: actions
+            }
+          )
+        ) : null,
+        isMedia && status === "uploading" ? /* @__PURE__ */ jsx(
+          Progress,
+          {
+            value: progress ?? null,
+            "aria-label": `Uploading ${name}`,
+            className: "pointer-events-none absolute inset-x-0 bottom-0 z-10 w-full",
+            children: /* @__PURE__ */ jsx(ProgressTrack, { className: "h-1 rounded-none bg-muted" })
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+Attachment.displayName = "Attachment";
+export {
+  Attachment
+};

package/dist/components/attachment/attachment.meta.js

@@ -0,0 +1,179 @@
+// src/components/attachment/attachment.meta.ts
+var attachmentMeta = {
+  name: "Attachment",
+  summary: "A file or image attached to a message: media or icon lead, name and metadata, upload and error states, an actions slot, and a full-card trigger that keeps those actions separately clickable.",
+  status: "stable",
+  keywords: [
+    "attachment",
+    "file",
+    "upload",
+    "image preview",
+    "chat file",
+    "document",
+    "drag and drop",
+    "file card"
+  ],
+  usage: {
+    description: "The card a file takes in a conversation \u2014 in the composer while it uploads, and in the transcript once it has. It renders all four states an attachment actually moves through (queued, uploading, failed, delivered) rather than only the delivered one, because the other three are the states that are hard to get right and would otherwise fall back on every caller.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Use `variant="media"` for images and `variant="card"` for documents. A filename tells you nothing about a photo, and a thumbnail tells you nothing about a contract.'
+      },
+      {
+        guidance: "do",
+        description: 'Pass `onOpen` rather than wrapping the card in your own button. It renders a stretched trigger underneath the actions, so the card is one tab stop, each action is its own, and clicking "remove" never opens the file.'
+      },
+      {
+        guidance: "do",
+        description: 'Give `status="uploading"` a numeric `progress` when you have one and omit it when you do not \u2014 the bar goes indeterminate rather than lying about 0%.'
+      },
+      {
+        guidance: "do",
+        description: 'Put the reason in `meta` when `status="error"`. The card re-colors but keeps its shape, so a failed upload stays recognisable as the file it was \u2014 the text is what says why.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not nest interactive controls inside a card you have wrapped in a link or button yourself. That is invalid HTML and unreachable in the order it looks like; `onOpen` exists to avoid it."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it as a generic file-list row. `Tree` is the file listing; this one is shaped for a conversation, where an attachment is a message payload."
+      },
+      {
+        guidance: "dont",
+        description: "Do not rely on the error colour alone to signal failure. Colour is not a status for anyone who cannot see it \u2014 say what happened in `meta`."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Media",
+        required: true,
+        description: "Thumbnail crop or file glyph. Fills the tile in `media`, a lead square in `card`."
+      },
+      {
+        name: "Label",
+        required: true,
+        description: "Name and metadata. A row beside the media in `card`; a scrim strip over the picture in `media`, shown only when there is something to say."
+      },
+      {
+        name: "Actions",
+        required: false,
+        description: "Remove / retry / download controls, stacked above the stretched trigger so they stay separately clickable."
+      },
+      {
+        name: "Progress",
+        required: false,
+        description: 'A hairline bar along the bottom edge while `status="uploading"`; determinate with `progress`, indeterminate without.'
+      }
+    ]
+  },
+  related: {
+    components: ["Message", "Bubble", "MessageScroller", "Progress"]
+  },
+  props: [
+    {
+      name: "name",
+      type: "string",
+      description: "File name. Truncated rather than wrapped \u2014 the stem truncates and a short extension stays visible \u2014 and used as the default label for the stretched trigger and the media tile's alt text."
+    },
+    {
+      name: "meta",
+      type: "ReactNode",
+      description: "Size, type, upload progress, or the failure reason \u2014 the quiet second line."
+    },
+    {
+      name: "thumbnail",
+      type: "string",
+      description: "Image preview URL. Present means the card shows a crop of the file instead of a glyph."
+    },
+    {
+      name: "icon",
+      type: "string",
+      default: '"file"',
+      description: 'Semantic icon name for a non-image file (resolved through IconProvider). Defaults to "image-stack" when a thumbnail is set.'
+    },
+    {
+      name: "variant",
+      type: '"card" | "media"',
+      default: '"card"',
+      description: "`card` is a name-led horizontal row for documents; `media` is a square tile that is mostly picture."
+    },
+    {
+      name: "status",
+      type: '"idle" | "uploading" | "error"',
+      default: '"idle"',
+      description: "Transfer state. `uploading` adds a progress bar; `error` re-colors the card without changing its shape."
+    },
+    {
+      name: "progress",
+      type: "number",
+      description: "Percentage 0\u2013100 while uploading. Omit for an indeterminate bar."
+    },
+    {
+      name: "actions",
+      type: "ReactNode",
+      description: 'Remove / retry / download controls. Stay clickable when `onOpen` makes the card a trigger. On a `media` tile they float on the top-end corner over the picture, so pass `variant="floating"` buttons there.'
+    },
+    {
+      name: "onOpen",
+      type: "() => void",
+      description: "Makes the whole card activate, via a stretched button rendered beneath the actions rather than by wrapping the card."
+    },
+    {
+      name: "openLabel",
+      type: "string",
+      default: "`Open ${name}`",
+      description: "Accessible label for that stretched trigger."
+    },
+    {
+      name: "...div props",
+      type: 'Omit<ComponentPropsWithRef<"div">, "onClick">',
+      description: "Spread onto the card. Use `onOpen` rather than `onClick` \u2014 a click handler on a div is not a control."
+    }
+  ],
+  variants: {
+    variant: ["card", "media"],
+    status: ["idle", "uploading", "error"]
+  },
+  tokensUsed: [
+    "card",
+    "border",
+    "border-strong",
+    "muted",
+    "muted-foreground",
+    "foreground",
+    "destructive",
+    "overlay",
+    "overlay-foreground",
+    "ring"
+  ],
+  a11y: [
+    "The full-card trigger is a real stretched `<button>` with an accessible label, not a click handler on a div \u2014 so it is one tab stop, keyboard-activatable, and focus-ringed.",
+    "Actions sit above that trigger in the stacking order, which keeps them individually focusable and stops a click on `remove` from also opening the file. Text is only made click-through when a trigger is present, so a filename stays selectable otherwise.",
+    "A thumbnail is described as the attachment in `media` (where the picture is the only label) and left decorative in `card` (where the filename is right beside it), so AT never reads the same name twice.",
+    "The upload bar carries an accessible name via Progress; the error state is carried by text in `meta` as well as colour.",
+    "Label text on a media tile sits on `overlay` / `overlay-foreground` \u2014 a fixed pairing that stays legible over arbitrary imagery, where a theme surface token would not."
+  ],
+  examples: [
+    {
+      label: "Document with a remove action",
+      code: '<Attachment name="proposal.pdf" meta="2.4 MB \xB7 PDF" onOpen={() => open(file)} actions={<Button variant="ghost" size="icon-xs" aria-label="Remove"><Icon name="xmark" /></Button>} />'
+    },
+    {
+      label: "Image tile, uploading",
+      code: '<Attachment variant="media" name="cover.png" thumbnail={previewUrl} status="uploading" progress={62} meta="Uploading\u2026 62%" />'
+    },
+    {
+      label: "Failed upload with a retry",
+      code: '<Attachment name="recording.mov" meta="Upload failed \u2014 file is over the 50 MB limit" status="error" icon="warning" actions={<Button variant="ghost" size="xs" onClick={retry}>Retry</Button>} />'
+    },
+    {
+      label: "Attachments as a message payload",
+      code: '<Message messageId="m7" align="end" footer={<RelativeTime date={sentAt} />}>\n	<div className="flex flex-wrap gap-2">\n		{files.map((f) => (<Attachment key={f.id} variant="media" name={f.name} thumbnail={f.url} onOpen={() => open(f)} />))}\n	</div>\n</Message>'
+    }
+  ]
+};
+export {
+  attachmentMeta
+};

package/dist/components/attachment/attachment.variants.js

@@ -0,0 +1,47 @@
+// src/components/attachment/attachment.variants.ts
+import { cva } from "class-variance-authority";
+var attachmentVariants = cva(
+  "group/attachment relative isolate overflow-hidden rounded-[var(--attachment-radius,var(--radius-md))] border text-start motion-interactive",
+  {
+    variants: {
+      variant: {
+        // The inset grows with the corner radius (half of it, never under 8px), so a
+        // rounder card does not crowd its tile and progress bar into the curve.
+        card: "flex w-full max-w-xs items-center gap-3 p-[max(--spacing(2),calc(var(--attachment-radius,var(--radius-md))/2))]",
+        media: "block size-28"
+      },
+      status: {
+        idle: "border-border bg-card",
+        uploading: "border-border bg-card",
+        error: "border-destructive/40 bg-destructive/5"
+      },
+      interactive: {
+        true: "hover:border-border-strong",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "card",
+      status: "idle",
+      interactive: false
+    }
+  }
+);
+var attachmentMediaVariants = cva(
+  "flex shrink-0 items-center justify-center overflow-hidden bg-muted text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        // Concentric with the card: its radius less the inset. The tile sits right
+        // at the edge, so it follows the curve rather than a floor (4px minimum).
+        card: "size-10 rounded-[max(--spacing(1),calc(var(--attachment-radius,var(--radius-md))-max(--spacing(2),calc(var(--attachment-radius,var(--radius-md))/2))))]",
+        media: "size-full rounded-none"
+      }
+    },
+    defaultVariants: { variant: "card" }
+  }
+);
+export {
+  attachmentMediaVariants,
+  attachmentVariants
+};

package/dist/components/attachment/index.js

@@ -0,0 +1,7 @@
+// src/components/attachment/index.ts
+import { Attachment } from "./attachment.js";
+import { attachmentMeta } from "./attachment.meta.js";
+export {
+  Attachment,
+  attachmentMeta
+};