@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/Card.tsx

@@ -1,45 +1,45 @@
-// A card (m3.material.io/components/cards, .card in ../styles/ui.css): the surface a block or an app's block is, with
-// what is on it (`children`: the block's own heading, text, picture …). Its kind (`kind`: outlined, the default,
-// elevated or filled) is Material's name; how each looks is the theme's, and so is its elevation (lifted when it is
-// a link pointed at, and `dragged`: while it is dragged to another place). With `href` the whole card is a link (Link:
-// on the site; in the editor only drawn), else the element `as` (a <div>, a <section>, an <article>, a <figure> or an
-// <li>). `className` after its own classes (the block's: its layout and what is on it); the rest (aria-…, id, data-…)
-// on it. An Astro component without React gives an element the same classes with cardClass.
-import type { HTMLAttributes, ReactNode } from 'react';
-import { Link } from '@morphemecms/cms/src/standard/view';
-
-export const cardKinds = ['elevated', 'filled', 'outlined'] as const;
-export type CardKind = (typeof cardKinds)[number];
-
-/** A card's classes: its kind's, and evt. dragged. */
-export const cardClass = (kind: CardKind = 'outlined', { dragged = false } = {}) =>
-  ['card', `card-${kind}`, dragged && 'card-dragged'].filter(Boolean).join(' ');
-
-export default function Card({
-  kind,
-  dragged,
-  as: Box = 'div',
-  href,
-  className,
-  children,
-  ...rest
-}: Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'> & {
-  kind?: CardKind;
-  dragged?: boolean;
-  as?: 'div' | 'section' | 'article' | 'figure' | 'li';
-  href?: string;
-  className?: string;
-  children: ReactNode;
-  [data: `data-${string}`]: string | undefined;
-}) {
-  const classes = [cardClass(kind, { dragged }), className].filter(Boolean).join(' ');
-  return href === undefined ? (
-    <Box className={classes} {...rest}>
-      {children}
-    </Box>
-  ) : (
-    <Link href={href} className={classes} {...rest}>
-      {children}
-    </Link>
-  );
-}
+// A card (m3.material.io/components/cards, .card in ../styles/ui.css): the surface a block or an app's block is, with
+// what is on it (`children`: the block's own heading, text, picture …). Its kind (`kind`: outlined, the default,
+// elevated or filled) is Material's name; how each looks is the theme's, and so is its elevation (lifted when it is
+// a link pointed at, and `dragged`: while it is dragged to another place). With `href` the whole card is a link (Link:
+// on the site; in the editor only drawn), else the element `as` (a <div>, a <section>, an <article>, a <figure> or an
+// <li>). `className` after its own classes (the block's: its layout and what is on it); the rest (aria-…, id, data-…)
+// on it. An Astro component without React gives an element the same classes with cardClass.
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+export const cardKinds = ['elevated', 'filled', 'outlined'] as const;
+export type CardKind = (typeof cardKinds)[number];
+
+/** A card's classes: its kind's, and evt. dragged. */
+export const cardClass = (kind: CardKind = 'outlined', { dragged = false } = {}) =>
+  ['card', `card-${kind}`, dragged && 'card-dragged'].filter(Boolean).join(' ');
+
+export default function Card({
+  kind,
+  dragged,
+  as: Box = 'div',
+  href,
+  className,
+  children,
+  ...rest
+}: Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'> & {
+  kind?: CardKind;
+  dragged?: boolean;
+  as?: 'div' | 'section' | 'article' | 'figure' | 'li';
+  href?: string;
+  className?: string;
+  children: ReactNode;
+  [data: `data-${string}`]: string | undefined;
+}) {
+  const classes = [cardClass(kind, { dragged }), className].filter(Boolean).join(' ');
+  return href === undefined ? (
+    <Box className={classes} {...rest}>
+      {children}
+    </Box>
+  ) : (
+    <Link href={href} className={classes} {...rest}>
+      {children}
+    </Link>
+  );
+}

package/theme/ui/Carousel.tsx

@@ -1,124 +1,124 @@
-// A carousel (m3.material.io/components/carousel, .carousel in ../styles/ui.css): its items in a row to swipe
-// (`items`, each with its key, its name for screen readers, `label`, and what it shows, `content`), with native
-// scroll-snap, so swiping works on a phone without JavaScript. Its layout (`layout`) is Material's:
-// - 'uncontained' (the default): every item as wide as the others, as many as fit and the next one cut off at the edge,
-//   reaching out to a phone's edges: one with the next peeking in, two on a tablet, three on a computer.
-// - 'multi-browse': large items from the start, then a medium and a small one, as high as the theme says; each grows
-//   and shrinks as it passes (carouselLayout.ts), for leafing quickly through many pictures.
-// - 'hero': one large item (more on a wide screen) and a small one after it (`alignment` 'start', the default) or
-//   between two small ones (`alignment` 'center'), for pictures to look at one by one, with the next one in sight.
-// - 'full-screen': one item at a time, as wide as the carousel, out to a phone's edges.
-// In the contained layouts (all but 'uncontained') an item's `content` fills its mask (.carousel-item-mask), as a
-// picture should; a text on it can fade as it shrinks with --carousel-mask (0 to 1). Under them the theme's addition to
-// M3's carousel, a page indicator: a dot for each item (`indicatorLabels`, what each says to a screen reader), which
-// follows the scroll position and jumps to an item. On the site carousel.script.ts makes it work and shows it and lays
-// out multi-browse and hero, in the editor it works here. No autoplay: the visitor decides the pace. `label`: what the
-// carousel is called; `roleDescription` and `itemRoleDescription`: what it and an item are (aria-roledescription, in
-// the site's language); `className` after its own classes (its place in the text). An Astro component gives an element
-// the same classes with carouselClass.
-import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { useOnSite } from '@morphemecms/cms/src/standard/view';
-import {
-  carouselLayout,
-  keylineLayouts,
-  scrollFor,
-  shownItem,
-  type CarouselAlignment,
-  type CarouselLayout,
-} from '@theme/ui/carouselLayout';
-
-export type { CarouselAlignment, CarouselLayout };
-export type CarouselItem = { key: string; label: string; content: ReactNode };
-
-/** The layouts of a carousel, as Material 3 names them. */
-export const carouselLayouts: CarouselLayout[] = ['multi-browse', 'uncontained', 'hero', 'full-screen'];
-
-/** A carousel's classes: a contained layout's (none for the default, uncontained), and a hero's aligned to the centre. */
-export const carouselClass = (layout: CarouselLayout = 'uncontained', alignment: CarouselAlignment = 'start') =>
-  [
-    'carousel',
-    layout !== 'uncontained' && `carousel-contained carousel-${layout}`,
-    layout === 'hero' && alignment === 'center' && 'carousel-center',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-export default function Carousel({
-  items,
-  layout = 'uncontained',
-  alignment = 'start',
-  label,
-  roleDescription,
-  itemRoleDescription,
-  indicatorLabels,
-  className,
-}: {
-  items: CarouselItem[];
-  layout?: CarouselLayout;
-  alignment?: CarouselAlignment;
-  label?: string;
-  roleDescription: string;
-  itemRoleDescription: string;
-  indicatorLabels: string[];
-  className?: string;
-}) {
-  const onSite = useOnSite();
-  const root = useRef<HTMLDivElement>(null);
-  const row = useRef<HTMLUListElement>(null);
-  const [shown, setShown] = useState(0);
-  const contained = layout !== 'uncontained';
-  // In the editor: multi-browse and hero laid out here, as carousel.script.ts does on the site.
-  useEffect(
-    () => (root.current && keylineLayouts.includes(layout) ? carouselLayout(root.current) : undefined),
-    [layout, alignment, items.length],
-  );
-  const go = (i: number) => row.current?.scrollTo({ left: scrollFor(row.current, i), behavior: 'smooth' });
-  return (
-    <div
-      ref={root}
-      className={[carouselClass(layout, alignment), className].filter(Boolean).join(' ')}
-      role="region"
-      aria-roledescription={roleDescription}
-      aria-label={label || undefined}
-      data-carousel=""
-      data-carousel-layout={layout === 'uncontained' ? undefined : layout}
-      data-carousel-alignment={layout === 'hero' && alignment === 'center' ? alignment : undefined}
-    >
-      <ul ref={row} className="carousel-items" data-carousel-items="" onScroll={(e) => setShown(shownItem(e.currentTarget))}>
-        {items.map((item) => (
-          <li
-            key={item.key}
-            className="carousel-item"
-            aria-roledescription={itemRoleDescription}
-            aria-label={item.label}
-            data-carousel-item=""
-          >
-            {contained ? (
-              <div className="carousel-item-mask" data-carousel-mask="">
-                {item.content}
-              </div>
-            ) : (
-              item.content
-            )}
-          </li>
-        ))}
-      </ul>
-
-      <div className="carousel-indicator" data-carousel-indicator="" hidden={onSite}>
-        {items.map((item, i) => (
-          <button
-            key={item.key}
-            type="button"
-            className="carousel-indicator-dot"
-            aria-label={indicatorLabels[i]}
-            aria-current={onSite ? undefined : i === shown}
-            data-carousel-dot=""
-            onClick={() => go(i)}
-          >
-            <span />
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
+// A carousel (m3.material.io/components/carousel, .carousel in ../styles/ui.css): its items in a row to swipe
+// (`items`, each with its key, its name for screen readers, `label`, and what it shows, `content`), with native
+// scroll-snap, so swiping works on a phone without JavaScript. Its layout (`layout`) is Material's:
+// - 'uncontained' (the default): every item as wide as the others, as many as fit and the next one cut off at the edge,
+//   reaching out to a phone's edges: one with the next peeking in, two on a tablet, three on a computer.
+// - 'multi-browse': large items from the start, then a medium and a small one, as high as the theme says; each grows
+//   and shrinks as it passes (carouselLayout.ts), for leafing quickly through many pictures.
+// - 'hero': one large item (more on a wide screen) and a small one after it (`alignment` 'start', the default) or
+//   between two small ones (`alignment` 'center'), for pictures to look at one by one, with the next one in sight.
+// - 'full-screen': one item at a time, as wide as the carousel, out to a phone's edges.
+// In the contained layouts (all but 'uncontained') an item's `content` fills its mask (.carousel-item-mask), as a
+// picture should; a text on it can fade as it shrinks with --carousel-mask (0 to 1). Under them the theme's addition to
+// M3's carousel, a page indicator: a dot for each item (`indicatorLabels`, what each says to a screen reader), which
+// follows the scroll position and jumps to an item. On the site carousel.script.ts makes it work and shows it and lays
+// out multi-browse and hero, in the editor it works here. No autoplay: the visitor decides the pace. `label`: what the
+// carousel is called; `roleDescription` and `itemRoleDescription`: what it and an item are (aria-roledescription, in
+// the site's language); `className` after its own classes (its place in the text). An Astro component gives an element
+// the same classes with carouselClass.
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useOnSite } from '@morphemecms/cms/src/standard/view';
+import {
+  carouselLayout,
+  keylineLayouts,
+  scrollFor,
+  shownItem,
+  type CarouselAlignment,
+  type CarouselLayout,
+} from '@theme/ui/carouselLayout';
+
+export type { CarouselAlignment, CarouselLayout };
+export type CarouselItem = { key: string; label: string; content: ReactNode };
+
+/** The layouts of a carousel, as Material 3 names them. */
+export const carouselLayouts: CarouselLayout[] = ['multi-browse', 'uncontained', 'hero', 'full-screen'];
+
+/** A carousel's classes: a contained layout's (none for the default, uncontained), and a hero's aligned to the centre. */
+export const carouselClass = (layout: CarouselLayout = 'uncontained', alignment: CarouselAlignment = 'start') =>
+  [
+    'carousel',
+    layout !== 'uncontained' && `carousel-contained carousel-${layout}`,
+    layout === 'hero' && alignment === 'center' && 'carousel-center',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+export default function Carousel({
+  items,
+  layout = 'uncontained',
+  alignment = 'start',
+  label,
+  roleDescription,
+  itemRoleDescription,
+  indicatorLabels,
+  className,
+}: {
+  items: CarouselItem[];
+  layout?: CarouselLayout;
+  alignment?: CarouselAlignment;
+  label?: string;
+  roleDescription: string;
+  itemRoleDescription: string;
+  indicatorLabels: string[];
+  className?: string;
+}) {
+  const onSite = useOnSite();
+  const root = useRef<HTMLDivElement>(null);
+  const row = useRef<HTMLUListElement>(null);
+  const [shown, setShown] = useState(0);
+  const contained = layout !== 'uncontained';
+  // In the editor: multi-browse and hero laid out here, as carousel.script.ts does on the site.
+  useEffect(
+    () => (root.current && keylineLayouts.includes(layout) ? carouselLayout(root.current) : undefined),
+    [layout, alignment, items.length],
+  );
+  const go = (i: number) => row.current?.scrollTo({ left: scrollFor(row.current, i), behavior: 'smooth' });
+  return (
+    <div
+      ref={root}
+      className={[carouselClass(layout, alignment), className].filter(Boolean).join(' ')}
+      role="region"
+      aria-roledescription={roleDescription}
+      aria-label={label || undefined}
+      data-carousel=""
+      data-carousel-layout={layout === 'uncontained' ? undefined : layout}
+      data-carousel-alignment={layout === 'hero' && alignment === 'center' ? alignment : undefined}
+    >
+      <ul ref={row} className="carousel-items" data-carousel-items="" onScroll={(e) => setShown(shownItem(e.currentTarget))}>
+        {items.map((item) => (
+          <li
+            key={item.key}
+            className="carousel-item"
+            aria-roledescription={itemRoleDescription}
+            aria-label={item.label}
+            data-carousel-item=""
+          >
+            {contained ? (
+              <div className="carousel-item-mask" data-carousel-mask="">
+                {item.content}
+              </div>
+            ) : (
+              item.content
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <div className="carousel-indicator" data-carousel-indicator="" hidden={onSite}>
+        {items.map((item, i) => (
+          <button
+            key={item.key}
+            type="button"
+            className="carousel-indicator-dot"
+            aria-label={indicatorLabels[i]}
+            aria-current={onSite ? undefined : i === shown}
+            data-carousel-dot=""
+            onClick={() => go(i)}
+          >
+            <span />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/theme/ui/Checkbox.tsx

@@ -1,59 +1,59 @@
-// A checkbox (m3.material.io/components/checkbox, .checkbox in ../styles/ui.css): the box, its name (`label`) beside
-// it and a line under the name (`supporting`), all of it one <label>, so a click anywhere ticks it. `checked`: ticked
-// from the start; `indeterminate`: neither ticked nor not (a choice over others, some of which are ticked; the browser
-// has it as a property, not an attribute, so on the site checkbox.script.ts sets it from data-indeterminate, and in the
-// editor it is set here, until it is clicked); `disabled`: it cannot be changed (a choice that is always on); `error`:
-// it is wrong (not ticked where it must be), marked, and with a text the line under it says what is wrong. The tick and
-// the dash are the theme's icons (`check`, `minus`), shown by a theme that draws the box itself; else the browser draws
-// the box in the accent. With `onChange` (the editor) `checked` is whether it is ticked now, else ticked from the start.
-// Other attributes (`name`, `value`, `required`, data-…) go on the <input>, and `className` on
-// the label.
-import { useEffect, useRef, type ReactNode } from 'react';
-import { Svg } from '@morphemecms/cms/src/icon';
-
-/** A checkbox's classes, and the error's when it is wrong. */
-export const checkboxClass = (error = false) => (error ? 'checkbox checkbox-error' : 'checkbox');
-
-export default function Checkbox({
-  label,
-  supporting,
-  checked,
-  indeterminate,
-  error,
-  className,
-  ...rest
-}: {
-  label: string;
-  supporting?: ReactNode;
-  checked?: boolean;
-  indeterminate?: boolean;
-  error?: string | boolean;
-  className?: string;
-} & Record<string, unknown>) {
-  const input = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    if (input.current) input.current.indeterminate = Boolean(indeterminate);
-  }, [indeterminate]);
-  const line = typeof error === 'string' && error ? error : supporting;
-  return (
-    <label className={[checkboxClass(Boolean(error)), className].filter(Boolean).join(' ')}>
-      <span className="checkbox-box">
-        <input
-          ref={input}
-          type="checkbox"
-          className="checkbox-input"
-          {...(rest.onChange ? { checked: Boolean(checked) } : { defaultChecked: checked })}
-          aria-invalid={error ? true : undefined}
-          data-indeterminate={indeterminate ? '' : undefined}
-          {...rest}
-        />
-        <Svg name="check" size={14} className="checkbox-icon" />
-        {indeterminate && <Svg name="minus" size={14} className="checkbox-indeterminate-icon" />}
-      </span>
-      <span className="checkbox-text">
-        <span className="checkbox-label">{label}</span>
-        {line && <span className="checkbox-supporting">{line}</span>}
-      </span>
-    </label>
-  );
-}
+// A checkbox (m3.material.io/components/checkbox, .checkbox in ../styles/ui.css): the box, its name (`label`) beside
+// it and a line under the name (`supporting`), all of it one <label>, so a click anywhere ticks it. `checked`: ticked
+// from the start; `indeterminate`: neither ticked nor not (a choice over others, some of which are ticked; the browser
+// has it as a property, not an attribute, so on the site checkbox.script.ts sets it from data-indeterminate, and in the
+// editor it is set here, until it is clicked); `disabled`: it cannot be changed (a choice that is always on); `error`:
+// it is wrong (not ticked where it must be), marked, and with a text the line under it says what is wrong. The tick and
+// the dash are the theme's icons (`check`, `minus`), shown by a theme that draws the box itself; else the browser draws
+// the box in the accent. With `onChange` (the editor) `checked` is whether it is ticked now, else ticked from the start.
+// Other attributes (`name`, `value`, `required`, data-…) go on the <input>, and `className` on
+// the label.
+import { useEffect, useRef, type ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+
+/** A checkbox's classes, and the error's when it is wrong. */
+export const checkboxClass = (error = false) => (error ? 'checkbox checkbox-error' : 'checkbox');
+
+export default function Checkbox({
+  label,
+  supporting,
+  checked,
+  indeterminate,
+  error,
+  className,
+  ...rest
+}: {
+  label: string;
+  supporting?: ReactNode;
+  checked?: boolean;
+  indeterminate?: boolean;
+  error?: string | boolean;
+  className?: string;
+} & Record<string, unknown>) {
+  const input = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (input.current) input.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  const line = typeof error === 'string' && error ? error : supporting;
+  return (
+    <label className={[checkboxClass(Boolean(error)), className].filter(Boolean).join(' ')}>
+      <span className="checkbox-box">
+        <input
+          ref={input}
+          type="checkbox"
+          className="checkbox-input"
+          {...(rest.onChange ? { checked: Boolean(checked) } : { defaultChecked: checked })}
+          aria-invalid={error ? true : undefined}
+          data-indeterminate={indeterminate ? '' : undefined}
+          {...rest}
+        />
+        <Svg name="check" size={14} className="checkbox-icon" />
+        {indeterminate && <Svg name="minus" size={14} className="checkbox-indeterminate-icon" />}
+      </span>
+      <span className="checkbox-text">
+        <span className="checkbox-label">{label}</span>
+        {line && <span className="checkbox-supporting">{line}</span>}
+      </span>
+    </label>
+  );
+}