react-cheminfo 0.21.0 → 0.23.0

package/src/projection/ui/projectionStateApi.ts

@@ -0,0 +1,57 @@
+/**
+ * What the one hook every tab shares hands out.
+ *
+ * The type lives beside the hook rather than inside it because the hook is
+ * short and its answer is not: a reader looking for how the state is kept
+ * should not have to scroll past a page of documented fields to find it.
+ */
+
+import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
+import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type {
+  ProjectionGrouping,
+  ResolvedProjectionGroups,
+  ResolvedProjectionShapes,
+} from '../core/projectionSamples.ts';
+import type { ProjectionTab } from '../core/projectionTabs.ts';
+
+import type { ProjectionSelection } from './projectionSelection.ts';
+
+/** What every tab reads, and the five ways any of them changes it. */
+export interface ProjectionStateApi {
+  /** The tabs this result can fill, in reading order. */
+  tabs: readonly ProjectionTab[];
+  /** The one showing. */
+  tab: ProjectionTab;
+  /** Move to another tab. One the result cannot fill is ignored. */
+  setTab: (tab: ProjectionTab) => void;
+  /**
+   * The grouping the dots are coloured by, resolved once per change; empty
+   * while the colour stands for nothing.
+   */
+  groups: ResolvedProjectionGroups;
+  /**
+   * The grouping the dots are shaped by, resolved once per change, or `null`
+   * while they are all discs.
+   */
+  shapes: ResolvedProjectionShapes | null;
+  /** Every grouping the samples carry, for the pickers that choose between them. */
+  groupings: readonly ProjectionGrouping[];
+  /** Every option, already made safe against the result. */
+  options: ProjectionOptions;
+  /** Change some of them; the rest are carried over and checked again. */
+  setOptions: (patch: Partial<ProjectionOptions>) => void;
+  /** The selected rows, as indices, which is what a plot draws. */
+  selected: readonly number[];
+  /** Settle a selection a plot's own gesture produced. */
+  settleSelection: (change: SelectionChange) => void;
+  /** Settle one from elsewhere — a legend entry, a table beside the figure. */
+  selectRows: (
+    rows: readonly number[],
+    mode: ScatterSelectionMode,
+    source: ProjectionSelection['source'],
+  ) => void;
+  /** Draw one pair of axes on the map, which is what a cell of the grid does. */
+  selectPair: (xAxis: number, yAxis: number) => void;
+}

package/src/projection/ui/projectionTabModels.ts

@@ -90,7 +90,7 @@ export function useProjectionModels(
   return {
     profiles,
     shares,
-    sampleName: samples.ids[one] ?? `Row ${one + 1}`,
+    sampleName: samples.labels?.[one] ?? samples.ids[one] ?? `Row ${one + 1}`,
   };
 }
 

package/src/projection/ui/useProjectionState.ts

@@ -2,9 +2,13 @@ import { useCallback, useMemo, useState } from 'react';
 
 import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
 import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
+import {
+  projectionGrouping,
+  resolveProjectionGroups,
+  resolveProjectionShapes,
+} from '../core/projectionGroupings.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
-import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
-import { resolveProjectionGroups } from '../core/projectionSamples.ts';
+import type { ProjectionGrouping } from '../core/projectionSamples.ts';
 import type { ProjectionTab } from '../core/projectionTabs.ts';
 import { projectionTabs } from '../core/projectionTabs.ts';
 import { resolveProjectionOptions } from '../core/resolveProjectionOptions.ts';
@@ -15,6 +19,7 @@ import {
   projectionNamesOf,
   projectionRowsOf,
 } from './projectionSelection.ts';
+import type { ProjectionStateApi } from './projectionStateApi.ts';
 import type { ProjectionViewerProps } from './projectionViewerProps.ts';
 
 /**
@@ -41,34 +46,6 @@ type ProjectionStateOptions = Pick<
   | 'onOptionsChange'
 >;
 
-/** What every tab reads, and the five ways any of them changes it. */
-export interface ProjectionStateApi {
-  /** The tabs this result can fill, in reading order. */
-  tabs: readonly ProjectionTab[];
-  /** The one showing. */
-  tab: ProjectionTab;
-  /** Move to another tab. One the result cannot fill is ignored. */
-  setTab: (tab: ProjectionTab) => void;
-  /** The groups as every figure draws them, resolved once per change. */
-  groups: ResolvedProjectionGroups;
-  /** Every option, already made safe against the result. */
-  options: ProjectionOptions;
-  /** Change some of them; the rest are carried over and checked again. */
-  setOptions: (patch: Partial<ProjectionOptions>) => void;
-  /** The selected rows, as indices, which is what a plot draws. */
-  selected: readonly number[];
-  /** Settle a selection a plot's own gesture produced. */
-  settleSelection: (change: SelectionChange) => void;
-  /** Settle one from elsewhere — a legend entry, a table beside the figure. */
-  selectRows: (
-    rows: readonly number[],
-    mode: ScatterSelectionMode,
-    source: ProjectionSelection['source'],
-  ) => void;
-  /** Draw one pair of axes on the map, which is what a cell of the grid does. */
-  selectPair: (xAxis: number, yAxis: number) => void;
-}
-
 /**
  * The tab, the pair of axes, the selection and the options, controlled or not.
  *
@@ -121,13 +98,23 @@ export function useProjectionState(
     () => defaultOptions ?? {},
   );
 
+  const groupings = samples.groupings ?? NO_GROUPINGS;
+  const settled = useMemo(
+    () =>
+      resolveProjectionOptions(heldOptions ?? ownOptions, result, groupings),
+    [groupings, heldOptions, ownOptions, result],
+  );
+  const { colorBy, shapeBy } = settled;
+  const rowCount = result.scores.rows;
   const groups = useMemo(
-    () => resolveProjectionGroups(samples, result.scores.rows),
-    [result, samples],
+    () =>
+      resolveProjectionGroups(projectionGrouping(samples, colorBy), rowCount),
+    [colorBy, rowCount, samples],
   );
-  const settled = useMemo(
-    () => resolveProjectionOptions(heldOptions ?? ownOptions, result),
-    [heldOptions, ownOptions, result],
+  const shapes = useMemo(
+    () =>
+      resolveProjectionShapes(projectionGrouping(samples, shapeBy), rowCount),
+    [rowCount, samples, shapeBy],
   );
 
   const setTab = useCallback(
@@ -142,11 +129,15 @@ export function useProjectionState(
 
   const setOptions = useCallback(
     (patch: Partial<ProjectionOptions>) => {
-      const next = resolveProjectionOptions({ ...settled, ...patch }, result);
+      const next = resolveProjectionOptions(
+        { ...settled, ...patch },
+        result,
+        groupings,
+      );
       if (heldOptions === undefined) setOwnOptions(next);
       onOptionsChange?.(next);
     },
-    [heldOptions, onOptionsChange, result, settled],
+    [groupings, heldOptions, onOptionsChange, result, settled],
   );
 
   const selectRows = useCallback(
@@ -189,6 +180,8 @@ export function useProjectionState(
     tab: inReach(tab, tabs) ?? inReach(ownTab, tabs) ?? tabs[0] ?? 'map',
     setTab,
     groups,
+    shapes,
+    groupings,
     options: settled,
     setOptions,
     selected:
@@ -222,3 +215,6 @@ function inReach(
   }
   return undefined;
 }
+
+/** No groupings at all, shared so an absent list keeps one identity. */
+const NO_GROUPINGS: readonly ProjectionGrouping[] = [];

package/src/scatter/core/index.ts

@@ -38,6 +38,7 @@ export {
   resetLassoPath,
 } from './lassoPath.ts';
 export { pointInPolygon, pointsInPolygon, polygonBounds } from './polygon.ts';
+export { pointShapePath } from './pointShape.ts';
 export type { ScatterGroupMoments } from './scatterGroupMoments.ts';
 export type {
   ScatterGroupSpread,

package/src/scatter/core/pointShape.ts

@@ -0,0 +1,80 @@
+import { chartRoundPixel } from '../../chart/core/chartScale.ts';
+import type { OverlayMarkShape } from '../../overlay/core/overlayMarks.ts';
+
+/**
+ * The outline of a mark drawn as a filled polygon — a sample shaped by a
+ * second grouping, or a marker drawn in one of those shapes — as SVG path data.
+ *
+ * Every shape covers the area of the disc it stands in for. The eye weighs a
+ * mark by its ink, so a square drawn in the disc's own box would make its
+ * group read as the heavier one — which is a claim about the data that nothing
+ * in the data supports.
+ * @param shape - The shape.
+ * @param x - Horizontal centre, in pixels.
+ * @param y - Vertical centre, in pixels.
+ * @param radius - Radius of the disc the shape stands in for, in pixels.
+ * @returns The path data, or `null` for a disc, which is drawn as a circle,
+ * and for every mark that is not a filled polygon.
+ */
+export function pointShapePath(
+  shape: OverlayMarkShape,
+  x: number,
+  y: number,
+  radius: number,
+): string | null {
+  if (shape === 'square') {
+    const half = SQUARE_HALF * radius;
+    return polygon([
+      [x - half, y - half],
+      [x + half, y - half],
+      [x + half, y + half],
+      [x - half, y + half],
+    ]);
+  }
+  if (shape === 'diamond') {
+    const reach = DIAMOND_REACH * radius;
+    return polygon([
+      [x, y - reach],
+      [x + reach, y],
+      [x, y + reach],
+      [x - reach, y],
+    ]);
+  }
+  if (shape === 'triangle' || shape === 'triangle-down') {
+    // The centroid sits on the point, so the triangle is balanced on the
+    // sample rather than hanging from it.
+    const tip = TRIANGLE_TIP * radius;
+    const half = TRIANGLE_HALF_BASE * radius;
+    const base = (TRIANGLE_TIP / 2) * radius;
+    const flip = shape === 'triangle' ? 1 : -1;
+    return polygon([
+      [x, y - flip * tip],
+      [x + half, y + flip * base],
+      [x - half, y + flip * base],
+    ]);
+  }
+  return null;
+}
+
+function polygon(corners: ReadonlyArray<readonly [number, number]>): string {
+  let path = '';
+  for (const [x, y] of corners) {
+    path += `${path === '' ? 'M' : 'L'}${chartRoundPixel(x)} ${chartRoundPixel(y)}`;
+  }
+  return `${path}Z`;
+}
+
+/** Half the side of a square as large as a disc of radius one: √π / 2. */
+const SQUARE_HALF = Math.sqrt(Math.PI) / 2;
+
+/** How far a diamond as large as that disc reaches from its centre: √(π / 2). */
+const DIAMOND_REACH = Math.sqrt(Math.PI / 2);
+
+/**
+ * The side of an equilateral triangle as large as that disc is √(4π / √3). Its
+ * tip stands side / √3 from the centroid, and its base half as far on the other
+ * side.
+ */
+const TRIANGLE_SIDE = Math.sqrt((4 * Math.PI) / Math.sqrt(3));
+const TRIANGLE_TIP = TRIANGLE_SIDE / Math.sqrt(3);
+const TRIANGLE_HALF_BASE = TRIANGLE_SIDE / 2;

package/src/scatter/ui/ScatterPlot.tsx

@@ -32,7 +32,8 @@ import { useScatterLabels } from './useScatterLabels.ts';
  */
 export function ScatterPlot(props: ScatterPlotProps): ReactElement {
   const { x, y, width, height, xAxis, yAxis, groupOf, groups } = props;
-  const { mutedGroups, ellipse = null, ellipseMinimumPoints } = props;
+  const { mutedGroups, shapeOf, shapes } = props;
+  const { ellipse = null, ellipseMinimumPoints } = props;
   const { ellipseFillOpacity, showGroupMeans, markers } = props;
   const { pointRadius = 3.5, outlinedFrom, pointLabels } = props;
   const { showGroupLabels = false, selected, defaultSelected } = props;
@@ -127,6 +128,8 @@ export function ScatterPlot(props: ScatterPlotProps): ReactElement {
             groupOf={groupOf}
             colors={ink.colors}
             opacities={ink.opacities}
+            shapeOf={shapeOf}
+            shapes={shapes}
             radius={pointRadius}
             outlinedFrom={outlinedFrom}
           />

package/src/scatter/ui/ScatterPointLayer.tsx

@@ -3,6 +3,8 @@ import { memo } from 'react';
 
 import { chartGroupIndex } from '../../chart/core/chartGroups.ts';
 import { chartRoundPixel } from '../../chart/core/chartScale.ts';
+import type { OverlaySampleShape } from '../../overlay/core/overlayMarks.ts';
+import { pointShapePath } from '../core/pointShape.ts';
 import type { ScreenPoints } from '../core/screenPoints.ts';
 
 /** What {@link ScatterPointLayer} draws. */
@@ -31,6 +33,17 @@ export interface ScatterPointLayerProps {
    * @default undefined — every group is drawn at full strength
    */
   opacities?: readonly number[];
+  /**
+   * Which shape each point takes, as an index into `shapes`. An entry of `-1`,
+   * or one outside the range, is a disc.
+   * @default undefined — every point is a disc
+   */
+  shapeOf?: ArrayLike<number>;
+  /**
+   * The shapes, in the order `shapeOf` names them.
+   * @default undefined
+   */
+  shapes?: readonly OverlaySampleShape[];
   /**
    * Colour of a point belonging to no group. It has to be the one ink on the
    * plot that names nothing, or a reader counts it as one more group.
@@ -77,7 +90,8 @@ export interface ScatterPointLayerProps {
  *
  * A hollow dot is the same dot at the same radius with its colour moved from
  * the fill to the stroke, so the two read as one kind of thing seen at two
- * levels of confidence rather than as two unrelated marks.
+ * levels of confidence rather than as two unrelated marks. A shaped point
+ * follows the same rule, and covers the area of the disc it stands in for.
  * @param props - See {@link ScatterPointLayerProps}.
  * @returns The cloud.
  */
@@ -89,6 +103,8 @@ export const ScatterPointLayer = memo(function ScatterPointLayer(
     groupOf,
     colors,
     opacities,
+    shapeOf,
+    shapes,
     fallbackColor = 'var(--text-faint)',
     radius = 3.5,
     radii,
@@ -102,6 +118,7 @@ export const ScatterPointLayer = memo(function ScatterPointLayer(
   const steps = order === undefined ? count : Math.min(count, order.length);
   const hollowFrom = outlineStart(outlinedFrom, count);
   const groups = colors?.length ?? 0;
+  const shapeCount = shapes?.length ?? 0;
   const ink = groupInk(colors, opacities, fallbackColor);
 
   const dots: ReactElement[] = [];
@@ -115,17 +132,28 @@ export const ScatterPointLayer = memo(function ScatterPointLayer(
     const color = ink.colors[slot] ?? fallbackColor;
     const hollow = index >= hollowFrom;
     const size = radii?.[index];
+    const reach = size === undefined ? radius : chartRoundPixel(size);
+    const shape = shapes?.[chartGroupIndex(shapeOf, index, shapeCount)];
+    const outline =
+      shape === undefined ? null : pointShapePath(shape, x, y, reach);
+    const paint = {
+      fill: hollow ? 'none' : color,
+      stroke: hollow ? color : undefined,
+      strokeWidth: hollow ? OUTLINE_WIDTH : undefined,
+      opacity: ink.opacities[slot],
+    };
     dots.push(
-      <circle
-        key={index}
-        cx={chartRoundPixel(x)}
-        cy={chartRoundPixel(y)}
-        r={size === undefined ? radius : chartRoundPixel(size)}
-        fill={hollow ? 'none' : color}
-        stroke={hollow ? color : undefined}
-        strokeWidth={hollow ? OUTLINE_WIDTH : undefined}
-        opacity={ink.opacities[slot]}
-      />,
+      outline === null ? (
+        <circle
+          key={index}
+          cx={chartRoundPixel(x)}
+          cy={chartRoundPixel(y)}
+          r={reach}
+          {...paint}
+        />
+      ) : (
+        <path key={index} d={outline} {...paint} />
+      ),
     );
   }
 

package/src/scatter/ui/scatterFigureProps.ts

@@ -9,6 +9,7 @@
 
 import type { ReactNode } from 'react';
 
+import type { OverlaySampleShape } from '../../overlay/core/overlayMarks.ts';
 import type { ScatterSelectionMode } from '../core/scatterSelection.ts';
 
 import type { SelectionChange } from './useScatterSelection.ts';
@@ -61,6 +62,18 @@ export interface ScatterGroupProps {
    * @default undefined — every group is drawn in full
    */
   mutedGroups?: ReadonlySet<string>;
+  /**
+   * Which shape each point takes, as an index into `shapes`: a second
+   * grouping of the same points, drawn while colour keeps the first. A point
+   * with `-1`, `NaN`, or an index outside the range, is a disc.
+   * @default undefined — every point is a disc
+   */
+  shapeOf?: ArrayLike<number>;
+  /**
+   * The shapes, in the order `shapeOf` names them.
+   * @default undefined
+   */
+  shapes?: readonly OverlaySampleShape[];
   /**
    * Radius of a dot, in pixels. A cloud draws the dot at the middle of its box
    * at this size, one at the front larger and one at the back smaller.

package/src/scatter/ui/scatterMarkGlyph.tsx

@@ -10,6 +10,7 @@ import type { ReactElement } from 'react';
 
 import { chartRoundPixel } from '../../chart/core/chartScale.ts';
 import type { OverlayMarkShape } from '../../overlay/core/overlayMarks.ts';
+import { pointShapePath } from '../core/pointShape.ts';
 
 /** A point drawn over the cloud that is not a sample, already in pixels. */
 export interface ScatterPixelMark {
@@ -32,7 +33,8 @@ export interface ScatterPixelMark {
  * One mark, drawn as the glyph its shape asks for.
  *
  * A rule laid across the cloud names no point, so the two rule shapes are
- * drawn as the default cross.
+ * drawn as the default cross. The three filled polygons are the shapes a
+ * sample can take, drawn as large as the disc they stand in for.
  * @param mark - What to draw, already in the frame's pixels.
  * @param size - Side of the square the glyph is drawn in, in pixels.
  * @param key - What React reconciles the glyph by.
@@ -81,6 +83,12 @@ export function markGlyph(
       />
     );
   }
+  const polygon = pointShapePath(shape, x, y, half);
+  if (polygon !== null) {
+    return (
+      <path key={key} {...shared} d={polygon} fill={color} stroke="none" />
+    );
+  }
   return (
     <path
       key={key}

package/src/scatter3d/ui/ScatterCloud.tsx

@@ -47,6 +47,7 @@ import { useOrbitDrag } from './useOrbitDrag.ts';
 export function ScatterCloud(props: ScatterCloudProps): ReactElement {
   const { x, y, z, width, height, xLabel, yLabel, zLabel } = props;
   const { groupOf, groups, mutedGroups, ellipsoid = null } = props;
+  const { shapeOf, shapes } = props;
   const { ellipsoidMinimumPoints, ellipsoidFillOpacity } = props;
   const { showGroupLabels = false, pointLabels, pointRadius = 3.5 } = props;
   const { outlinedFrom, selected, defaultSelected, onSelectionChange } = props;
@@ -198,6 +199,8 @@ export function ScatterCloud(props: ScatterCloudProps): ReactElement {
           groupOf={groupOf}
           colors={ink.colors}
           opacities={ink.opacities}
+          shapeOf={shapeOf}
+          shapes={shapes}
           radius={pointRadius}
           outlinedFrom={outlinedFrom}
         />

package/styles/chrome.css

@@ -321,6 +321,169 @@ button {
   max-width: none;
 }
 
+/* ── Selection ───────────────────────────────────────────────────────────── */
+
+/* A tool is clicked and dragged, not read: a drag across a viewer, a double
+   click on a control or a stray triple click must not paint the page. What is
+   worth taking away is copied with a click instead (`<ClickToCopy>`). Form
+   controls stay editable, and what a visitor reads, quotes or reports stays
+   selectable: the About page, the glossary, a code block, a reference, an
+   error, and any region a site marks with `text-selectable`. The regions are
+   reopened down to their descendants, so a site's own `* { user-select: none }`
+   cannot close them again. */
+body {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input,
+textarea,
+select,
+[contenteditable],
+:is(
+  .text-selectable,
+  .about-page,
+  .glossary-index,
+  .code-block,
+  .citation-preview,
+  .error-fallback__message,
+  .bp6-callout.bp6-intent-danger
+),
+:is(
+    .text-selectable,
+    .about-page,
+    .glossary-index,
+    .code-block,
+    .citation-preview,
+    .error-fallback__message,
+    .bp6-callout.bp6-intent-danger
+  )
+  * {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+/* ── Click to copy ───────────────────────────────────────────────────────── */
+
+/* The copy cursor, the tint and the clipboard glyph are the promise; a tick
+   keeps it. The glyph is `clipboard`, never `duplicate`: two overlapping squares
+   read as "add another". Green and red are the confirmation's own colours,
+   the ones Blueprint gives success and danger. */
+.click-to-copy {
+  position: relative;
+  border-radius: 4px;
+  cursor: copy;
+  transition: background-color 120ms ease;
+}
+
+.click-to-copy:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.click-to-copy[data-copy='copied'] {
+  background-color: color-mix(in oklab, #238551 15%, transparent);
+}
+
+.click-to-copy[data-copy='failed'] {
+  background-color: color-mix(in oklab, #cd4246 15%, transparent);
+}
+
+.click-to-copy__icon {
+  position: absolute;
+  top: 50%;
+  color: var(--text-muted);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+/* In a line of text the glyph floats just past the value, so the line keeps
+   its spacing; a block keeps room for it inside its right edge. */
+.click-to-copy--inline .click-to-copy__icon {
+  left: 100%;
+  transform: translate(3px, -50%);
+}
+
+.click-to-copy--block {
+  padding-right: 22px;
+}
+
+.click-to-copy--block .click-to-copy__icon {
+  right: 4px;
+  transform: translateY(-50%);
+}
+
+.click-to-copy:focus-visible .click-to-copy__icon,
+.click-to-copy[data-copy] .click-to-copy__icon {
+  opacity: 1;
+}
+
+.click-to-copy[data-copy='copied'] .click-to-copy__icon {
+  color: #238551;
+}
+
+.click-to-copy[data-copy='failed'] .click-to-copy__icon {
+  color: #cd4246;
+}
+
+/* Only where there is a pointer to hover with: on a touch screen the tint
+   would stay on after the tap, over the tick. */
+@media (hover: hover) {
+  .click-to-copy:not([data-copy]):hover {
+    background-color: color-mix(in oklab, var(--accent) 12%, transparent);
+  }
+
+  .click-to-copy:hover .click-to-copy__icon {
+    opacity: 1;
+  }
+}
+
+/* Blueprint's interactive and striped tables paint and point every cell from
+   three classes deep, so a copyable cell repeats its class to stay ahead. */
+.click-to-copy.click-to-copy.click-to-copy.click-to-copy:is(td, th) {
+  border-radius: 0;
+  cursor: copy;
+}
+
+.click-to-copy.click-to-copy.click-to-copy.click-to-copy:is(
+    td,
+    th
+  )[data-copy='copied'] {
+  background-color: color-mix(in oklab, #238551 15%, transparent);
+}
+
+.click-to-copy.click-to-copy.click-to-copy.click-to-copy:is(
+    td,
+    th
+  )[data-copy='failed'] {
+  background-color: color-mix(in oklab, #cd4246 15%, transparent);
+}
+
+@media (hover: hover) {
+  .click-to-copy.click-to-copy.click-to-copy.click-to-copy:is(td, th):not(
+      [data-copy]
+    ):hover {
+    background-color: color-mix(in oklab, var(--accent) 12%, transparent);
+  }
+}
+
+/* The glyph carries the confirmation to the eye; this carries it to a reader. */
+.click-to-copy__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media print {
+  .click-to-copy__icon {
+    display: none;
+  }
+}
+
 /* ── Printing ────────────────────────────────────────────────────────────── */
 
 /* Students print the cheatsheet. Let them, without the chrome. */