rift-ds 1.2.0 → 1.4.0

package/components/Attachment/AttachmentViewer.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useId, useRef, useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { Button } from "../Button/Button.js";
+import { CircularButton } from "../CircularButton/CircularButton.js";
+import { formatBytes } from "./fileTypes.js";
+import { renderTypeMark } from "./typeMark.js";
+import { useMounted } from "../../behaviors/useMounted.js";
+import { useLayer } from "../../behaviors/useLayer.js";
+import { useFocusScope } from "../../behaviors/useFocusScope.js";
+import { useScrollLock } from "../../behaviors/useScrollLock.js";
+import "../../fonts/material-symbols.css";
+import "./Attachment.css";
+const AttachmentViewer = React.forwardRef(
+  ({
+    open,
+    onOpenChange,
+    items,
+    activeId,
+    defaultActiveId,
+    onActiveChange,
+    renderPreview,
+    onDownload,
+    onRetry,
+    dismissible = true,
+    downloadLabel = "Download",
+    closeLabel = "Close",
+    previousLabel = "Previous file",
+    nextLabel = "Next file",
+    retryLabel = "Try again",
+    noPreviewLabel = "No preview for this file type",
+    failedLabel = "Couldn’t load this file",
+    failedDescription = "The link may have expired.",
+    formatPosition = (position, total) => `${position} of ${total}`,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-attachment-viewer";
+    const titleId = useId();
+    const panelRef = useRef(null);
+    const setPanelRef = (node) => {
+      panelRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const isControlled = activeId !== void 0;
+    const [uncontrolledId, setUncontrolledId] = useState(defaultActiveId);
+    const currentId = isControlled ? activeId : uncontrolledId;
+    const foundIndex = items.findIndex((item2) => item2.id === currentId);
+    const index = foundIndex === -1 ? 0 : foundIndex;
+    const item = items[index];
+    const total = items.length;
+    const mounted = useMounted();
+    useLayer({
+      open,
+      dismissOnEscape: dismissible,
+      onDismiss: () => onOpenChange(false)
+    });
+    useFocusScope(panelRef, { active: open });
+    useScrollLock(open);
+    const step = (delta) => {
+      if (total < 2) return;
+      const next = items[(index + delta + total) % total];
+      if (!isControlled) setUncontrolledId(next.id);
+      onActiveChange?.(next.id);
+    };
+    const stepRef = useRef(step);
+    stepRef.current = step;
+    useEffect(() => {
+      if (!open || total < 2) return;
+      const onKey = (event) => {
+        if (event.key === "ArrowLeft") stepRef.current(-1);
+        if (event.key === "ArrowRight") stepRef.current(1);
+      };
+      document.addEventListener("keydown", onKey);
+      return () => document.removeEventListener("keydown", onKey);
+    }, [open, total]);
+    if (!mounted) return null;
+    const containerClasses = [baseClass, open ? `${baseClass}--open` : "", className].filter(Boolean).join(" ");
+    const sizeText = item?.size === void 0 ? "" : formatBytes(item.size);
+    const positionText = total > 1 ? formatPosition(index + 1, total) : "";
+    const subtitle = [sizeText, positionText].filter(Boolean).join(" · ");
+    let stage = null;
+    if (item) {
+      const failed = item.status === "error" || item.status === "unavailable";
+      const custom = failed ? void 0 : renderPreview?.(item);
+      const imageSrc = item.src ?? item.previewSrc;
+      if (custom !== void 0 && custom !== null && custom !== false) {
+        stage = custom;
+      } else if (!failed && imageSrc) {
+        stage = /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: `${baseClass}__image`,
+            src: imageSrc,
+            alt: item.previewAlt ?? item.name
+          }
+        );
+      } else if (!failed && item.excerpt) {
+        stage = /* @__PURE__ */ jsx("p", { className: `${baseClass}__text`, children: item.excerpt });
+      } else {
+        stage = /* @__PURE__ */ jsxs("div", { className: `${baseClass}__empty`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__empty-mark`, children: renderTypeMark(item.name, item.kind) }),
+          /* @__PURE__ */ jsx("p", { className: `${baseClass}__empty-title`, children: failed ? failedLabel : noPreviewLabel }),
+          /* @__PURE__ */ jsx("p", { className: `${baseClass}__empty-detail`, children: failed ? item.error ?? failedDescription : [item.name, sizeText].filter(Boolean).join(" · ") }),
+          (failed && onRetry || onDownload) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__empty-actions`, children: [
+            failed && onRetry && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                size: "compact",
+                label: retryLabel,
+                onClick: () => onRetry(item)
+              }
+            ),
+            onDownload && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: failed && onRetry ? "secondary" : "primary",
+                size: "compact",
+                iconLeft: "download",
+                label: downloadLabel,
+                onClick: () => onDownload(item)
+              }
+            )
+          ] })
+        ] });
+      }
+    }
+    const viewer = /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__backdrop`,
+          onClick: dismissible ? () => onOpenChange(false) : void 0
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...rest,
+          ref: setPanelRef,
+          className: `${baseClass}__panel`,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+              item && /* @__PURE__ */ jsx("span", { className: `${baseClass}__header-mark`, children: renderTypeMark(item.name, item.kind) }),
+              /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
+                /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, title: item?.name, children: item?.name }),
+                subtitle !== "" && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
+              ] }),
+              item && onDownload && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: `${baseClass}__download`,
+                  variant: "secondary",
+                  size: "compact",
+                  iconLeft: "download",
+                  label: downloadLabel,
+                  onClick: () => onDownload(item)
+                }
+              ),
+              dismissible && /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "close",
+                  variant: "tertiary",
+                  size: "compact",
+                  ariaLabel: closeLabel,
+                  tooltip: false,
+                  onClick: () => onOpenChange(false)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: `${baseClass}__stage`, children: stage }),
+            total > 1 && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+              /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "chevron_left",
+                  variant: "secondary",
+                  size: "compact",
+                  ariaLabel: previousLabel,
+                  tooltip: false,
+                  onClick: () => step(-1)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__position`, "aria-live": "polite", children: positionText }),
+              /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "chevron_right",
+                  variant: "secondary",
+                  size: "compact",
+                  ariaLabel: nextLabel,
+                  tooltip: false,
+                  onClick: () => step(1)
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+    return ReactDOM.createPortal(viewer, document.body);
+  }
+);
+AttachmentViewer.displayName = "AttachmentViewer";
+export {
+  AttachmentViewer
+};

package/components/Attachment/fileTypes.d.ts

@@ -0,0 +1,101 @@
+/**
+ * The file-type model behind the attachment family: what kind of file a
+ * name and mime type describe, the short label its type mark wears, and the
+ * small formatting helpers a tile needs. No React and no browser APIs, so a
+ * server component, a route handler or a test can import it directly.
+ *
+ * Four kinds are "well known" and carry a colour role of their own (the
+ * `--color-file-*` tokens): pdf, spreadsheet, document and presentation.
+ * Every other kind is neutral and wears its extension as a badge, so colour
+ * stays a signal for the formats a reader recognises at a glance.
+ */
+/** What kind of file an attachment is. */
+export type FileKind = 'pdf' | 'document' | 'spreadsheet' | 'presentation' | 'image' | 'audio' | 'video' | 'archive' | 'code' | 'text' | 'pasted' | 'generic';
+/** Where an attachment is in its life: usable, on its way, failed, or gone. */
+export type AttachmentStatus = 'ready' | 'uploading' | 'error' | 'unavailable';
+/** What a kind looks like on a tile. */
+export interface FileKindMeta {
+    /** Reader-facing name of the kind, used in accessible names. */
+    label: string;
+    /** Short uppercase label on the type mark when the extension gives none. */
+    mark: string;
+    /** Whether the kind has a colour role of its own; the rest are neutral. */
+    colored: boolean;
+    /** Material Symbol standing for the kind in a plain list row. */
+    icon: string;
+}
+export declare const FILE_KINDS: Record<FileKind, FileKindMeta>;
+/** The lower-case extension of a file name, without the dot. Empty when the
+    name has none, or is a dotfile with nothing before the dot. */
+export declare function getFileExtension(name: string): string;
+/** The two facts about a file this module reads. A `File` satisfies it. */
+export interface FileLike {
+    /** File name, extension included. */
+    name: string;
+    /** Mime type, when the source reported one. */
+    type?: string;
+}
+/** The kind a file is, read from its extension first and its mime type second. */
+export declare function getFileKind(file: FileLike): FileKind;
+/**
+ * The short uppercase label a tile's type mark wears. A well-known kind
+ * keeps its family mark (every word-processor file reads DOC), except where
+ * the extension is itself the familiar name (CSV). Any other file wears its
+ * own extension.
+ */
+export declare function getFileTypeLabel(name: string, kind: FileKind): string;
+/**
+ * Split a file name for middle truncation: the head may be ellipsized, the
+ * tail (the last few characters of the stem plus the extension) always
+ * shows, so a truncated name still says what the file is.
+ */
+export declare function splitFileName(name: string, tailChars?: number): {
+    head: string;
+    tail: string;
+};
+/** Render a byte count as a short human-readable string. */
+export declare function formatBytes(bytes: number): string;
+/**
+ * Whether a file satisfies a native `accept` string: comma-separated
+ * extensions (`.pdf`), exact mime types (`text/csv`) and wildcards
+ * (`image/*`). An empty string accepts everything.
+ */
+export declare function matchesAccept(file: FileLike, accept: string): boolean;
+/**
+ * One attachment as the family passes it around: what a tile draws, what a
+ * group lays out, and what `useAttachments` keeps. Plain data, so it
+ * serialises and crosses the server boundary; the `File` itself stays with
+ * whoever owns the upload.
+ */
+export interface AttachmentItem {
+    /** Stable identity, unique within its list. */
+    id: string;
+    /** File name, extension included. */
+    name: string;
+    /** What kind of file it is. */
+    kind: FileKind;
+    /** Size in bytes. */
+    size?: number;
+    /** Mime type, when the source reported one. */
+    mimeType?: string;
+    /** Where the file is in its life. */
+    status: AttachmentStatus;
+    /** Upload progress, 0 to 100, while `status` is `uploading`. */
+    progress?: number;
+    /** Why it failed, while `status` is `error`. */
+    error?: string;
+    /** Image that fills the tile: an object URL for a picture, or a
+        host-rendered first page for a document. */
+    previewSrc?: string;
+    /** Alt text for the preview. Defaults to the name. */
+    previewAlt?: string;
+    /** Full-size image for the viewer, when the preview is a thumbnail.
+        Defaults to `previewSrc`. */
+    src?: string;
+    /** Intrinsic width of the preview, to reserve its shape before it loads. */
+    width?: number;
+    /** Intrinsic height of the preview. */
+    height?: number;
+    /** First lines of a pasted block, drawn as the tile's excerpt. */
+    excerpt?: string;
+}

package/components/Attachment/fileTypes.js

@@ -0,0 +1,182 @@
+const FILE_KINDS = {
+  pdf: { label: "PDF", mark: "PDF", colored: true, icon: "picture_as_pdf" },
+  document: {
+    label: "Document",
+    mark: "DOC",
+    colored: true,
+    icon: "description"
+  },
+  spreadsheet: {
+    label: "Spreadsheet",
+    mark: "XLS",
+    colored: true,
+    icon: "table"
+  },
+  presentation: {
+    label: "Presentation",
+    mark: "PPT",
+    colored: true,
+    icon: "co_present"
+  },
+  image: { label: "Image", mark: "IMG", colored: false, icon: "image" },
+  audio: { label: "Audio", mark: "AUDIO", colored: false, icon: "graphic_eq" },
+  video: { label: "Video", mark: "VIDEO", colored: false, icon: "movie" },
+  archive: {
+    label: "Archive",
+    mark: "ZIP",
+    colored: false,
+    icon: "folder_zip"
+  },
+  code: { label: "Code", mark: "CODE", colored: false, icon: "code" },
+  text: { label: "Text", mark: "TXT", colored: false, icon: "notes" },
+  pasted: {
+    label: "Pasted text",
+    mark: "PASTED",
+    colored: false,
+    icon: "content_paste"
+  },
+  generic: { label: "File", mark: "FILE", colored: false, icon: "draft" }
+};
+const EXTENSION_KINDS = {
+  pdf: "pdf",
+  doc: "document",
+  docx: "document",
+  odt: "document",
+  rtf: "document",
+  pages: "document",
+  xls: "spreadsheet",
+  xlsx: "spreadsheet",
+  xlsm: "spreadsheet",
+  csv: "spreadsheet",
+  tsv: "spreadsheet",
+  ods: "spreadsheet",
+  numbers: "spreadsheet",
+  ppt: "presentation",
+  pptx: "presentation",
+  odp: "presentation",
+  png: "image",
+  jpg: "image",
+  jpeg: "image",
+  gif: "image",
+  webp: "image",
+  avif: "image",
+  svg: "image",
+  bmp: "image",
+  heic: "image",
+  tiff: "image",
+  mp3: "audio",
+  wav: "audio",
+  m4a: "audio",
+  ogg: "audio",
+  flac: "audio",
+  aac: "audio",
+  mp4: "video",
+  mov: "video",
+  webm: "video",
+  mkv: "video",
+  avi: "video",
+  zip: "archive",
+  tar: "archive",
+  gz: "archive",
+  tgz: "archive",
+  rar: "archive",
+  "7z": "archive",
+  js: "code",
+  jsx: "code",
+  ts: "code",
+  tsx: "code",
+  mjs: "code",
+  cjs: "code",
+  json: "code",
+  html: "code",
+  css: "code",
+  py: "code",
+  rb: "code",
+  go: "code",
+  rs: "code",
+  java: "code",
+  c: "code",
+  cpp: "code",
+  h: "code",
+  sh: "code",
+  sql: "code",
+  yml: "code",
+  yaml: "code",
+  xml: "code",
+  swift: "code",
+  kt: "code",
+  php: "code",
+  txt: "text",
+  md: "text",
+  log: "text"
+};
+const MIME_KINDS = [
+  [/^application\/pdf$/, "pdf"],
+  [/^image\//, "image"],
+  [/^audio\//, "audio"],
+  [/^video\//, "video"],
+  [/spreadsheet|ms-excel|^text\/csv$/, "spreadsheet"],
+  [/presentation|ms-powerpoint/, "presentation"],
+  [/wordprocessing|msword|opendocument\.text|^application\/rtf$/, "document"],
+  [/zip|x-tar|x-7z|x-rar|gzip/, "archive"],
+  [/json|javascript|typescript|xml|^text\/(html|css|x-)/, "code"],
+  [/^text\//, "text"]
+];
+function getFileExtension(name) {
+  const dot = name.lastIndexOf(".");
+  if (dot <= 0 || dot === name.length - 1) return "";
+  return name.slice(dot + 1).toLowerCase();
+}
+function getFileKind(file) {
+  const byExtension = EXTENSION_KINDS[getFileExtension(file.name)];
+  if (byExtension) return byExtension;
+  const mime = file.type ?? "";
+  if (mime !== "") {
+    for (const [test, kind] of MIME_KINDS) if (test.test(mime)) return kind;
+  }
+  return "generic";
+}
+const MAX_MARK_CHARS = 5;
+function getFileTypeLabel(name, kind) {
+  const extension = getFileExtension(name);
+  if (kind === "pasted") return FILE_KINDS.pasted.mark;
+  if (FILE_KINDS[kind].colored) {
+    return extension === "csv" || extension === "tsv" ? extension.toUpperCase() : FILE_KINDS[kind].mark;
+  }
+  if (extension !== "" && extension.length <= MAX_MARK_CHARS) return extension.toUpperCase();
+  return FILE_KINDS[kind].mark;
+}
+function splitFileName(name, tailChars = 4) {
+  const extension = getFileExtension(name);
+  const stemLength = extension === "" ? name.length : name.length - extension.length - 1;
+  if (stemLength <= tailChars) return { head: "", tail: name };
+  const cut = stemLength - tailChars;
+  return { head: name.slice(0, cut), tail: name.slice(cut) };
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / Math.pow(1024, exponent);
+  return `${exponent === 0 ? value : value.toFixed(1)} ${units[exponent]}`;
+}
+function matchesAccept(file, accept) {
+  const rules = accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+  if (rules.length === 0) return true;
+  const mime = (file.type ?? "").toLowerCase();
+  const name = file.name.toLowerCase();
+  return rules.some((rule) => {
+    if (rule.startsWith(".")) return name.endsWith(rule);
+    if (rule.endsWith("/*")) return mime.startsWith(rule.slice(0, -1));
+    return mime === rule;
+  });
+}
+export {
+  FILE_KINDS,
+  formatBytes,
+  getFileExtension,
+  getFileKind,
+  getFileTypeLabel,
+  matchesAccept,
+  splitFileName
+};

package/components/Attachment/typeMark.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { FileKind } from './fileTypes';
+/**
+ * Render the type mark for a file. `typeLabel` overrides the derived label.
+ * The label is drawn, not announced: the mark is decoration beside a file
+ * name that already carries the extension.
+ */
+export declare function renderTypeMark(name: string, kind: FileKind, options?: {
+    typeLabel?: string;
+    form?: 'icon' | 'badge';
+}): ReactElement;

package/components/Attachment/typeMark.js

@@ -0,0 +1,51 @@
+import { createElement } from "react";
+import { getFileTypeLabel, FILE_KINDS } from "./fileTypes.js";
+const BASE = "ds-attachment-mark";
+const glyph = (label) => createElement(
+  "svg",
+  { className: `${BASE}__glyph`, viewBox: "0 0 32 32", "aria-hidden": true, focusable: false },
+  createElement("path", {
+    fill: "currentColor",
+    d: "M8.5 1A2.5 2.5 0 0 0 6 3.5v14.5a2.5 2.5 0 0 0 2.5 2.5h15a2.5 2.5 0 0 0 2.5-2.5V8.6a1.5 1.5 0 0 0-.44-1.06l-6.1-6.1A1.5 1.5 0 0 0 18.4 1H8.5Z"
+  }),
+  createElement("path", {
+    className: `${BASE}__fold`,
+    d: "M18.5 1.6v4.65c0 .97.78 1.75 1.75 1.75h4.65l-6.4-6.4Z"
+  }),
+  createElement(
+    "text",
+    {
+      className: `${BASE}__letters`,
+      x: 16,
+      y: 31,
+      textAnchor: "middle",
+      // A long override is squeezed to the glyph's width rather than spilling out of it
+      ...label.length > 3 ? { textLength: 30, lengthAdjust: "spacingAndGlyphs" } : {}
+    },
+    label
+  )
+);
+function renderTypeMark(name, kind, options = {}) {
+  const { typeLabel, form = "icon" } = options;
+  const label = typeLabel ?? getFileTypeLabel(name, kind);
+  const colored = FILE_KINDS[kind].colored;
+  const tone = colored ? `${BASE}--${kind}` : `${BASE}--neutral`;
+  if (form === "badge") {
+    return createElement(
+      "span",
+      { className: `${BASE} ${BASE}--badge ${tone}`, "aria-hidden": true },
+      // A well-known format keeps its colour as a dot beside the label:
+      // the label itself stays in a text colour, so it reads on any theme
+      colored ? createElement("span", { className: `${BASE}__dot` }) : null,
+      label
+    );
+  }
+  return createElement(
+    "span",
+    { className: `${BASE} ${BASE}--icon ${tone}`, "aria-hidden": true },
+    colored ? glyph(label) : createElement("span", { className: `${BASE}__chip` }, label)
+  );
+}
+export {
+  renderTypeMark
+};

package/components/Attachment/useAttachments.d.ts

@@ -0,0 +1,65 @@
+import { AttachmentItem } from './fileTypes';
+/** Why a file was turned away. */
+export type AttachmentRejectionReason = 'type' | 'size' | 'count' | 'duplicate';
+export interface AttachmentRejection {
+    /** The file that did not join the list. */
+    file: File;
+    /** Which rule it broke. */
+    reason: AttachmentRejectionReason;
+}
+/** What an upload function is given besides the file. */
+export interface AttachmentUploadContext {
+    /** Aborts when the item is removed or the list is cleared. */
+    signal: AbortSignal;
+    /** Report progress, 0 to 100. */
+    onProgress: (percent: number) => void;
+}
+export interface UseAttachmentsOptions {
+    /** Native `accept` string. Files outside it are rejected. */
+    accept?: string;
+    /** Largest file allowed, in bytes. */
+    maxSize?: number;
+    /** Most files the list may hold. */
+    maxCount?: number;
+    /** Let the same file join twice. Off by default; identity is name, size and modified time. */
+    allowDuplicates?: boolean;
+    /**
+     * Upload one file. While it runs the item is `uploading`; resolving makes
+     * it `ready`, rejecting makes it `error` with the thrown message. Omit it
+     * and every file is `ready` as soon as it joins.
+     */
+    upload?: (file: File, context: AttachmentUploadContext) => Promise<void>;
+    /** Fires with the files a call to `add` turned away. */
+    onReject?: (rejections: AttachmentRejection[]) => void;
+    /** Characters of a pasted block kept as its tile excerpt. */
+    excerptLength?: number;
+}
+export interface UseAttachmentsResult {
+    /** The list, in the order files joined. */
+    items: AttachmentItem[];
+    /** Add files; returns the ones turned away. */
+    add: (files: File[]) => AttachmentRejection[];
+    /** Add a block of pasted text as an attachment of its own. */
+    addText: (text: string, name?: string) => void;
+    /** Remove one item, aborting its upload and revoking its preview. */
+    remove: (id: string) => void;
+    /** Run a failed item's upload again. */
+    retry: (id: string) => void;
+    /** Empty the list, aborting uploads and revoking every preview. */
+    clear: () => void;
+    /**
+     * Empty the list for a send and return what it held, previews still
+     * alive. The caller now owns them: see `revokeAttachmentUrls`.
+     */
+    take: () => {
+        items: AttachmentItem[];
+        files: File[];
+    };
+    /** The `File` behind an item, or the text of a pasted one. */
+    getSource: (id: string) => File | string | undefined;
+    /** True while any item is uploading. */
+    isUploading: boolean;
+}
+/** Release the object URLs behind a list of items. Safe to call twice. */
+export declare function revokeAttachmentUrls(items: AttachmentItem[]): void;
+export declare function useAttachments(options?: UseAttachmentsOptions): UseAttachmentsResult;