canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/shell/TopBar.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface TopBarProps {
+    /** Where you are: the breadcrumb and anything that describes the open entry. */
+    leading: ReactNode;
+    /** What you can do: the branch and the actions on it. */
+    trailing: ReactNode;
+}
+/**
+ * The shell's top bar: one 48px row from `md` up. Narrower, `leading` takes a row of its own
+ * above `trailing`, which wraps rather than clip a control. Layout only.
+ */
+export declare function TopBar({ leading, trailing }: TopBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/shell/TopBar.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Group } from '@mantine/core';
+const TOP_BAR_HEIGHT = 48;
+/**
+ * The shell's top bar: one 48px row from `md` up. Narrower, `leading` takes a row of its own
+ * above `trailing`, which wraps rather than clip a control. Layout only.
+ */
+export function TopBar({ leading, trailing }) {
+    return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", px: "sm", py: 6, mih: TOP_BAR_HEIGHT, style: {
+            borderBottom: '1px solid var(--canopy-input-border)',
+            background: 'var(--mantine-color-body)',
+        }, children: [_jsx(Box, { flex: { base: '1 0 100%', md: '1 1 0%' }, miw: 0, children: leading }), _jsx(Group, { gap: 6, wrap: "wrap", align: "center", justify: "flex-end", flex: { base: '1 0 100%', md: '0 1 auto' }, miw: 0, children: trailing })] }));
+}

package/dist/editor/shell/host-chrome.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+/**
+ * @internal Exported for tests. The host page's chrome around `anchor`, an element the editor
+ * renders in place: the `<body>` child holding it, plus every `<body>` child the same copy of React
+ * rendered (a Next.js root layout's header and footer). That copy's fiber key has a random suffix,
+ * so portal containers and the roots other libraries create, such as MDXEditor's popup
+ * container, never match it.
+ */
+export declare function findHostChrome(anchor: Element): HTMLElement[];
+/**
+ * Makes the host's chrome inert and hidden while the editor is mounted: Tab never leaves the
+ * editor, and chrome with its own z-index never paints over the shell. Applied once, at mount,
+ * since an element added later may be a third-party popup that must stay usable; unmount restores
+ * exactly what this changed.
+ */
+export declare function useHideHostChrome(anchorRef: RefObject<Element | null>): void;

package/dist/editor/shell/host-chrome.js

@@ -0,0 +1,69 @@
+'use client';
+import { useEffect } from 'react';
+const REACT_FIBER_KEY_PREFIX = '__reactFiber$';
+function reactFiberKey(element) {
+    return Object.keys(element).find((key) => key.startsWith(REACT_FIBER_KEY_PREFIX));
+}
+/**
+ * @internal Exported for tests. The host page's chrome around `anchor`, an element the editor
+ * renders in place: the `<body>` child holding it, plus every `<body>` child the same copy of React
+ * rendered (a Next.js root layout's header and footer). That copy's fiber key has a random suffix,
+ * so portal containers and the roots other libraries create, such as MDXEditor's popup
+ * container, never match it.
+ */
+export function findHostChrome(anchor) {
+    const body = anchor.ownerDocument.body;
+    let root = anchor;
+    while (root.parentElement && root.parentElement !== body)
+        root = root.parentElement;
+    if (root.parentElement !== body)
+        return [];
+    const fiberKey = reactFiberKey(anchor);
+    const siblings = fiberKey
+        ? Array.from(body.children).filter((child) => child !== root && fiberKey in child)
+        : [];
+    return [root, ...siblings].filter((element) => element instanceof HTMLElement);
+}
+/** Per element, so a second editor mounted at once never restores what the first still hides. */
+const holds = new WeakMap();
+function hide(element) {
+    let hold = holds.get(element);
+    if (!hold) {
+        const wasInert = element.hasAttribute('inert');
+        const { visibility } = element.style;
+        element.setAttribute('inert', '');
+        element.style.visibility = 'hidden';
+        hold = {
+            count: 0,
+            restore: () => {
+                if (!wasInert)
+                    element.removeAttribute('inert');
+                element.style.visibility = visibility;
+            },
+        };
+        holds.set(element, hold);
+    }
+    hold.count++;
+    const held = hold;
+    return () => {
+        if (--held.count > 0)
+            return;
+        holds.delete(element);
+        held.restore();
+    };
+}
+/**
+ * Makes the host's chrome inert and hidden while the editor is mounted: Tab never leaves the
+ * editor, and chrome with its own z-index never paints over the shell. Applied once, at mount,
+ * since an element added later may be a third-party popup that must stay usable; unmount restores
+ * exactly what this changed.
+ */
+export function useHideHostChrome(anchorRef) {
+    useEffect(() => {
+        const anchor = anchorRef.current;
+        if (!anchor)
+            return;
+        const releases = findHostChrome(anchor).map(hide);
+        return () => releases.forEach((release) => release());
+    }, [anchorRef]);
+}

package/dist/editor/slug.d.ts

@@ -0,0 +1,16 @@
+/** Slug derivation and validation shared by the create and rename modals. */
+/** A URL slug for a title: ASCII lowercase letters, digits and single hyphens, empty when none remain. */
+export declare function slugFromTitle(title: string): string;
+/**
+ * The message for a slug the user may not use, or null when it is fine.
+ *
+ * Delegates to `parseSlug` rather than restating its rule: the server refuses to CREATE an
+ * entry whose slug fails it (api/content.ts and ContentStore.write's [SLUG] guards), and the
+ * static build fails outright on one that slipped through (static/index.ts's
+ * assertRoutableSlugs). A second, hand-maintained copy of the charset/length/separator rules
+ * here could only ever drift out of agreement with the boundary that actually decides.
+ */
+export declare function validateEntrySlug(value: string, opts?: {
+    existingSlugs?: ReadonlySet<string>;
+    currentSlug?: string;
+}): string | null;

package/dist/editor/slug.js

@@ -0,0 +1,43 @@
+/** Slug derivation and validation shared by the create and rename modals. */
+// Imported from '../paths/validation.js' directly, NOT the `paths` barrel, which pulls
+// node:fs into the browser bundle (pnpm lint:bundle enforces this).
+import { parseSlug } from '../paths/validation.js';
+const MAX_SLUG_LENGTH = 64;
+/** A URL slug for a title: ASCII lowercase letters, digits and single hyphens, empty when none remain. */
+export function slugFromTitle(title) {
+    const slug = title
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .replace(/&/g, ' and ')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+    return slug.slice(0, MAX_SLUG_LENGTH).replace(/-+$/, '');
+}
+/**
+ * The message for a slug the user may not use, or null when it is fine.
+ *
+ * Delegates to `parseSlug` rather than restating its rule: the server refuses to CREATE an
+ * entry whose slug fails it (api/content.ts and ContentStore.write's [SLUG] guards), and the
+ * static build fails outright on one that slipped through (static/index.ts's
+ * assertRoutableSlugs). A second, hand-maintained copy of the charset/length/separator rules
+ * here could only ever drift out of agreement with the boundary that actually decides.
+ */
+export function validateEntrySlug(value, opts = {}) {
+    if (!value.trim())
+        return 'Enter a slug';
+    const parsed = parseSlug(value);
+    if (!parsed.ok)
+        return parsed.error;
+    // `parseSlug` lowercases before testing, so it accepts 'My-Post' and hands back 'my-post'.
+    // Keep the field itself strict: the value typed here is what the duplicate check below and
+    // the create request are keyed on, so silently normalizing would let 'My-Post' sail past a
+    // collision with an existing 'my-post' and land as a 409 from the server instead of an
+    // inline message here.
+    if (parsed.slug !== value)
+        return 'Use lowercase letters';
+    if (value !== opts.currentSlug && opts.existingSlugs?.has(value)) {
+        return 'An entry with this slug already exists';
+    }
+    return null;
+}

package/dist/editor/theme.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type MantineColorScheme, type MantineColorsTuple, type MantineThemeOverride } from '@mantine/core';
 import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/dropzone/styles.css';
 import '@mdxeditor/editor/style.css';
@@ -54,7 +55,7 @@ export declare const createCanopyTheme: (options?: Pick<CanopyThemeOptions, "col
     headings?: {
         fontFamily?: string | undefined;
         fontWeight?: string | undefined;
-        textWrap?: "wrap" | "nowrap" | "balance" | "stable" | "pretty" | undefined;
+        textWrap?: "balance" | "nowrap" | "wrap" | "stable" | "pretty" | undefined;
         sizes?: {
             h1?: {
                 fontSize?: string | undefined;

package/dist/editor/theme.js

@@ -1,11 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { DEFAULT_THEME, MantineProvider, createTheme, } from '@mantine/core';
+import { Alert, ActionIcon, Badge, Button, Checkbox, DEFAULT_THEME, Drawer, Input, MantineProvider, Modal, Notification, Radio, Switch, Tabs, Text, Tooltip, getDefaultZIndex, getPrimaryShade, mergeThemeOverrides, createTheme, darken, } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import { ModalsProvider } from '@mantine/modals';
 import { generateColors } from '@mantine/colors-generator';
+import { composite, contrastRatio, isMeasurable, readableOnScale } from './contrast.js';
 import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/dropzone/styles.css';
 import '@mdxeditor/editor/style.css';
@@ -38,29 +40,328 @@ const toScale = (input, fallbackKey, fallback) => {
     }
     return fallbackScale;
 };
+// Icon-only close buttons are named "Close". Every Modal and Drawer one keeps it under a caller's
+// `closeButtonProps` unless that sets `aria-label`; a toast's or Alert's is replaced whole.
+const CLOSE_BUTTON_PROPS = { 'aria-label': 'Close' };
+// Filled red is red.8 under white; filled orange is orange.6 under black, since no orange shade
+// reaches 4.5:1 under white; a filled primary is `--canopy-primary-fill`. Callers pass a plain
+// `color`.
+const isPrimary = (theme, color) => color === undefined || color === theme.primaryColor;
+const checkboxOnRing = (theme, props) => isPrimary(theme, props.color)
+    ? {
+        '--checkbox-color': props.variant === 'outline' ? undefined : 'var(--canopy-focus-ring)',
+        '--checkbox-icon-color': props.iconColor ? undefined : 'var(--canopy-focus-ring-contrast)',
+    }
+    : {};
+const radioOnRing = (theme, props) => isPrimary(theme, props.color)
+    ? {
+        '--radio-color': props.variant === 'outline' ? undefined : 'var(--canopy-focus-ring)',
+        '--radio-icon-color': props.iconColor ? undefined : 'var(--canopy-focus-ring-contrast)',
+    }
+    : {};
+const canopyComponents = {
+    Button: Button.extend({
+        // The editor's default control size; a per-call `size` is only for a deliberate exception.
+        defaultProps: { size: 'xs' },
+        vars: (theme, props) => {
+            if ((props.variant ?? 'filled') !== 'filled')
+                return { root: {} };
+            if (props.color === 'red') {
+                return {
+                    root: { '--button-bg': theme.colors.red[8], '--button-hover': theme.colors.red[9] },
+                };
+            }
+            if (props.color === 'orange') {
+                return {
+                    root: {
+                        '--button-bg': theme.colors.orange[6],
+                        '--button-hover': theme.colors.orange[7],
+                        '--button-color': theme.black,
+                    },
+                };
+            }
+            if (isPrimary(theme, props.color)) {
+                return {
+                    root: {
+                        '--button-bg': 'var(--canopy-primary-fill)',
+                        '--button-hover': 'var(--canopy-primary-fill-hover)',
+                        '--button-color': 'var(--mantine-color-white)',
+                    },
+                };
+            }
+            return { root: {} };
+        },
+    }),
+    Badge: Badge.extend({
+        // Sentence case, as every other label; an xs badge's 9px is too small for lowercase.
+        styles: { root: { textTransform: 'none', '--badge-fz-xs': 'var(--badge-fz-sm)' } },
+        vars: (theme, props) => (props.variant ?? 'filled') === 'filled' && isPrimary(theme, props.color)
+            ? {
+                root: {
+                    '--badge-bg': 'var(--canopy-primary-fill)',
+                    '--badge-color': 'var(--mantine-color-white)',
+                },
+            }
+            : { root: {} },
+    }),
+    ActionIcon: ActionIcon.extend({
+        defaultProps: { size: 'sm' },
+        vars: (theme, props) => (props.variant ?? 'filled') === 'filled' && isPrimary(theme, props.color)
+            ? {
+                root: {
+                    '--ai-bg': 'var(--canopy-primary-fill)',
+                    '--ai-hover': 'var(--canopy-primary-fill-hover)',
+                    '--ai-color': 'var(--mantine-color-white)',
+                },
+            }
+            : { root: {} },
+    }),
+    // Tooltips open on focus and touch too, so an icon-only control's name reaches the keyboard.
+    Tooltip: Tooltip.extend({ defaultProps: { events: { hover: true, focus: true, touch: true } } }),
+    // A default input's border is `--canopy-input-border`; errored and focused ones keep Mantine's.
+    Input: Input.extend({
+        styles: (_theme, props) => props.error || (props.variant ?? 'default') !== 'default'
+            ? {}
+            : { wrapper: { '--input-bd': 'var(--canopy-input-border)' } },
+    }),
+    // Checkbox, Radio and Tabs name their colour inline even when none is given, and a Switch when
+    // one is, past the focus-ring alias; a primary one is pointed at the ring here, and its tick,
+    // dot or thumb takes the colour that reads on it.
+    Checkbox: Checkbox.extend({ vars: (theme, props) => ({ root: checkboxOnRing(theme, props) }) }),
+    CheckboxIndicator: Checkbox.Indicator.extend({
+        vars: (theme, props) => ({ indicator: checkboxOnRing(theme, props) }),
+    }),
+    Radio: Radio.extend({ vars: (theme, props) => ({ root: radioOnRing(theme, props) }) }),
+    RadioIndicator: Radio.Indicator.extend({
+        vars: (theme, props) => ({ indicator: radioOnRing(theme, props) }),
+    }),
+    // Pills put text on the colour, which the ring does not measure for.
+    Tabs: Tabs.extend({
+        vars: (theme, props) => ({
+            root: isPrimary(theme, props.color) && props.variant !== 'pills'
+                ? { '--tabs-color': 'var(--canopy-focus-ring)' }
+                : {},
+        }),
+    }),
+    Switch: Switch.extend({
+        vars: (theme, props) => ({
+            root: isPrimary(theme, props.color) ? { '--switch-color': 'var(--canopy-focus-ring)' } : {},
+        }),
+        styles: (theme, props) => isPrimary(theme, props.color)
+            ? { root: { '--canopy-switch-thumb-on': 'var(--canopy-focus-ring-contrast)' } }
+            : {},
+    }),
+    // Dark dimmed text is nearly as bright as body text, so it also takes the dimmed font style.
+    // Every input's description, Checkbox's, Radio's and Switch's included, is an InputWrapper's.
+    InputWrapper: Input.Wrapper.extend({
+        styles: { description: { fontStyle: 'var(--canopy-dimmed-font-style)' } },
+    }),
+    // Dimmed Text takes the same style.
+    Text: Text.extend({
+        styles: (_theme, props) => props.c === 'dimmed' ? { root: { fontStyle: 'var(--canopy-dimmed-font-style)' } } : {},
+    }),
+    ModalCloseButton: Modal.CloseButton.extend({ defaultProps: CLOSE_BUTTON_PROPS }),
+    DrawerCloseButton: Drawer.CloseButton.extend({ defaultProps: CLOSE_BUTTON_PROPS }),
+    // Mantine dims a titled toast's text to gray.6 / dark.2, under 4.5:1 on its surface.
+    Notification: Notification.extend({
+        defaultProps: { closeButtonProps: CLOSE_BUTTON_PROPS },
+        styles: { description: { color: 'var(--mantine-color-text)' } },
+    }),
+    // A light yellow Alert's title, icon and close button are yellow on pale yellow, under 2:1, so
+    // they take the text colour; the tint and the icon's shape still mark it a warning.
+    Alert: Alert.extend({
+        defaultProps: { closeButtonLabel: 'Close' },
+        vars: (_theme, props) => props.color === 'yellow' && (props.variant ?? 'light') === 'light'
+            ? { root: { '--alert-color': 'var(--mantine-color-text)' } }
+            : { root: {} },
+    }),
+};
 export const createCanopyTheme = (options) => {
     const { colors, themeOverride } = options ?? {};
     const brand = toScale(colors?.brand, 'indigo', defaultCanopyColors.brand);
     const primary = toScale(colors?.primary ?? colors?.brand, 'blue', defaultCanopyColors.primary);
     const neutral = toScale(colors?.neutral, 'gray', defaultCanopyColors.neutral);
     const accent = toScale(colors?.accent, 'teal', defaultCanopyColors.accent);
-    return createTheme({
+    const base = createTheme({
         primaryColor: 'brand',
-        primaryShade: { light: 6, dark: 5 },
+        // Where `--canopy-focus-ring` and `--canopy-primary-fill` start on the primary scale.
+        primaryShade: { light: 7, dark: 5 },
         defaultRadius: 'md',
-        colors: {
-            ...DEFAULT_THEME.colors,
-            brand,
-            primary,
-            neutral,
-            accent,
-            ...(themeOverride?.colors ?? {}),
-        },
+        colors: { ...DEFAULT_THEME.colors, brand, primary, neutral, accent },
         fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif',
-        ...themeOverride,
+        components: canopyComponents,
+    });
+    // Deep merge, so an override that sets only some colours or one component's props keeps the rest.
+    return mergeThemeOverrides(base, themeOverride ?? {});
+};
+/**
+ * A colour's text, light and subtle variants and outline take the first step, from the primary
+ * shade in light mode or Mantine's dark text shade 4, reaching 4.5:1 on its hovered light tint
+ * over the lowest-contrast surface (gray.1, dark.4); past the scale's end, the end shade darkened
+ * or lightened. A colour, gray or dark scale it cannot measure (`var()`, oklch) keeps Mantine's.
+ */
+const readableColourVariables = (theme, scheme) => {
+    const variables = {};
+    const shade = getPrimaryShade(theme, scheme);
+    if (!theme.colors.gray.every(isMeasurable) || !theme.colors.dark.every(isMeasurable)) {
+        return variables;
+    }
+    for (const [name, scale] of Object.entries(theme.colors)) {
+        if (scale.length !== 10 || !scale.every(isMeasurable))
+            continue;
+        const { shade: step, value } = scheme === 'light'
+            ? readableOnScale(scale, {
+                from: shade,
+                toward: 'darker',
+                background: composite(scale[shade], 0.12, theme.colors.gray[1]),
+            })
+            : readableOnScale(scale, {
+                from: 4,
+                toward: 'lighter',
+                background: composite(scale[Math.max(shade - 2, 0)], 0.2, theme.colors.dark[4]),
+            });
+        const colour = step === undefined ? value : `var(--mantine-color-${name}-${step})`;
+        variables[`--mantine-color-${name}-text`] = colour;
+        variables[`--mantine-color-${name}-light-color`] = colour;
+        variables[`--mantine-color-${name}-outline`] = colour;
+    }
+    return variables;
+};
+/** `--canopy-primary-fill`: the first step from the primary shade with white at 4.5:1 on it. */
+const primaryFill = (theme, scheme) => {
+    const scale = theme.colors[theme.primaryColor];
+    if (!scale.every(isMeasurable)) {
+        return {
+            '--canopy-primary-fill': `var(--mantine-color-${theme.primaryColor}-filled)`,
+            '--canopy-primary-fill-hover': `var(--mantine-color-${theme.primaryColor}-filled-hover)`,
+        };
+    }
+    const { shade, value } = readableOnScale(scale, {
+        from: getPrimaryShade(theme, scheme),
+        toward: 'darker',
+        background: theme.white,
     });
+    const step = (n) => `var(--mantine-color-${theme.primaryColor}-${n})`;
+    return shade === undefined
+        ? { '--canopy-primary-fill': value, '--canopy-primary-fill-hover': darken(value, 0.1) }
+        : {
+            '--canopy-primary-fill': step(shade),
+            '--canopy-primary-fill-hover': step(shade === 9 ? 8 : shade + 1),
+        };
+};
+/**
+ * `--canopy-focus-ring`: the first step from the primary shade, darker in light mode and lighter in
+ * dark, at 3:1 on gray.1 or dark.5. Mantine draws focus rings, focused borders and a checked
+ * Switch in `--mantine-primary-color-filled`, so that becomes the ring; `canopyComponents` points
+ * Checkbox, Radio and Tabs at it. A tick on it is white, or black where white is under 3:1.
+ */
+const focusRing = (theme, scheme) => {
+    const scale = theme.colors[theme.primaryColor];
+    const surface = scheme === 'light' ? theme.colors.gray[1] : theme.colors.dark[5];
+    const ring = scale.every(isMeasurable) && isMeasurable(surface)
+        ? readableOnScale(scale, {
+            from: getPrimaryShade(theme, scheme),
+            toward: scheme === 'light' ? 'darker' : 'lighter',
+            background: surface,
+            minimum: 3,
+        })
+        : undefined;
+    const contrast = ring && contrastRatio(theme.white, ring.value) < 3 ? theme.black : theme.white;
+    return {
+        '--canopy-focus-ring': ring === undefined
+            ? `var(--mantine-color-${theme.primaryColor}-filled)`
+            : ring.shade === undefined
+                ? ring.value
+                : `var(--mantine-color-${theme.primaryColor}-${ring.shade})`,
+        '--canopy-focus-ring-contrast': contrast,
+        '--mantine-primary-color-filled': 'var(--canopy-focus-ring)',
+    };
 };
+/**
+ * docs/ux-guidelines.md "Colour and contrast" says what each token is for; `theme.test.tsx` pins
+ * every ratio for the default palette. Dark dimmed mixes dark.1 with dark.2, since dark.1 alone
+ * reads as body text; placeholders sit further from it, so they never pass for a value.
+ */
+const canopyCssVariablesResolver = (theme) => ({
+    variables: {
+        '--canopy-count-bg': 'color-mix(in srgb, var(--mantine-primary-color-filled) 20%, var(--mantine-color-body))',
+        '--canopy-count-bg-orange': 'color-mix(in srgb, var(--mantine-color-orange-filled) 20%, var(--mantine-color-body))',
+    },
+    light: {
+        ...readableColourVariables(theme, 'light'),
+        '--mantine-color-dimmed': 'var(--mantine-color-gray-7)',
+        '--mantine-color-placeholder': 'color-mix(in srgb, var(--mantine-color-gray-6) 60%, var(--mantine-color-gray-7))',
+        '--canopy-danger-text': 'var(--mantine-color-red-9)',
+        '--canopy-input-border': 'color-mix(in srgb, var(--mantine-color-gray-6) 80%, var(--mantine-color-gray-7))',
+        '--canopy-surface-subtle': 'var(--mantine-color-gray-0)',
+        '--canopy-surface-muted': 'var(--mantine-color-gray-1)',
+        '--canopy-dimmed-font-style': 'normal',
+        ...primaryFill(theme, 'light'),
+        ...focusRing(theme, 'light'),
+    },
+    dark: {
+        ...readableColourVariables(theme, 'dark'),
+        '--mantine-color-dimmed': 'color-mix(in srgb, var(--mantine-color-dark-1) 85%, var(--mantine-color-dark-2))',
+        '--mantine-color-placeholder': 'color-mix(in srgb, var(--mantine-color-dark-2) 60%, var(--mantine-color-dark-1))',
+        '--canopy-danger-text': 'var(--mantine-color-red-3)',
+        '--canopy-input-border': 'color-mix(in srgb, var(--mantine-color-dark-2) 80%, var(--mantine-color-dark-1))',
+        '--canopy-surface-subtle': 'var(--mantine-color-dark-6)',
+        '--canopy-surface-muted': 'var(--mantine-color-dark-5)',
+        '--canopy-dimmed-font-style': 'italic',
+        ...primaryFill(theme, 'dark'),
+        ...focusRing(theme, 'dark'),
+    },
+});
+/**
+ * What Mantine draws from class rules, out of the theme variables' reach: unchecked control borders,
+ * Switch thumbs, white text on the primary colour (moved to the fill), and dimmed text Mantine
+ * draws itself (a blocked menu item, a combobox's empty message, outside days). Outside days lose
+ * Mantine's half opacity, under 4.5:1.
+ */
+const CANOPY_STYLES = `
+.mantine-Checkbox-input:not(:checked, :disabled, [data-indeterminate], [data-error]),
+.mantine-CheckboxIndicator-indicator:not([data-checked], [data-disabled], [data-indeterminate]),
+.mantine-Radio-radio:not(:checked, :disabled, [data-error]),
+.mantine-RadioIndicator-indicator:not([data-checked], [data-disabled]) {
+  border-color: var(--canopy-input-border);
+}
+.mantine-Switch-input:not(:checked, :disabled, [data-disabled]) + .mantine-Switch-track:not([data-error]) {
+  --switch-bd: var(--canopy-input-border);
+}
+.mantine-Switch-input:not(:checked, :disabled, [data-disabled]) + .mantine-Switch-track > .mantine-Switch-thumb {
+  --switch-thumb-bd: var(--canopy-input-border);
+}
+.mantine-Switch-input:checked:not(:disabled, [data-disabled]) + .mantine-Switch-track > .mantine-Switch-thumb {
+  --switch-thumb-bg: var(--canopy-switch-thumb-on, var(--mantine-color-white));
+  --switch-thumb-bd: var(--canopy-switch-thumb-on, var(--mantine-color-white));
+}
+[data-combobox-selected] {
+  --mantine-primary-color-filled: var(--canopy-primary-fill);
+}
+.mantine-DateTimePicker-day[data-selected],
+.mantine-DateTimePicker-pickerControl[data-selected] {
+  background-color: var(--canopy-primary-fill);
+}
+.mantine-DateTimePicker-day[data-selected]:hover,
+.mantine-DateTimePicker-pickerControl[data-selected]:hover {
+  background-color: var(--canopy-primary-fill-hover);
+}
+input.mantine-TimeInput-input::-webkit-datetime-edit-hour-field:focus,
+input.mantine-TimeInput-input::-webkit-datetime-edit-minute-field:focus,
+input.mantine-TimeInput-input::-webkit-datetime-edit-second-field:focus,
+input.mantine-TimeInput-input::-webkit-datetime-edit-ampm-field:focus {
+  background-color: var(--canopy-primary-fill);
+}
+.mantine-Menu-item[aria-disabled='true'],
+.mantine-Combobox-empty,
+.mantine-DateTimePicker-day[data-outside] {
+  font-style: var(--canopy-dimmed-font-style);
+}
+.mantine-DateTimePicker-day[data-outside]:not([data-disabled]) {
+  opacity: 1;
+}
+`;
 export const CanopyCMSProvider = ({ children, colors, colorScheme = 'light', themeOverride, withNotifications = true, }) => {
     const theme = useMemo(() => createCanopyTheme({ colors, themeOverride }), [colors, themeOverride]);
-    return (_jsx(MantineProvider, { theme: theme, defaultColorScheme: colorScheme, children: _jsxs(ModalsProvider, { children: [withNotifications ? _jsx(Notifications, { position: "bottom-left" }) : null, children] }) }));
+    return (_jsxs(MantineProvider, { theme: theme, defaultColorScheme: colorScheme, cssVariablesResolver: canopyCssVariablesResolver, children: [_jsx("style", { "data-canopy-styles": true, dangerouslySetInnerHTML: { __html: CANOPY_STYLES } }), _jsxs(ModalsProvider, { modalProps: { zIndex: getDefaultZIndex('popover') }, children: [withNotifications ? _jsx(Notifications, { position: "bottom-right" }) : null, children] })] }));
 };

package/dist/editor/unanswered.d.ts

@@ -0,0 +1,17 @@
+import type { ApiResponse } from '../api/types.js';
+/** A write a gateway answered with a 5xx page (how a slow request ends behind CloudFront). */
+export declare class UnansweredError extends Error {
+    readonly name = "UnansweredError";
+    constructor();
+}
+/** Whether a refused response is a gateway's 5xx page rather than the API's answer. */
+export declare function isGatewayFailure(result: ApiResponse): boolean;
+/** Whether `err` leaves a write's outcome unknown: a timeout, or a gateway's 5xx page. */
+export declare function isUnanswered(err: unknown): boolean;
+/**
+ * A failed write whose outcome is unknown, so its message is a warning (yellow), not an error
+ * (docs/ux-guidelines.md, Loading, empty and error states).
+ */
+export declare class MayHaveLandedError extends Error {
+    readonly name = "MayHaveLandedError";
+}

package/dist/editor/unanswered.js

@@ -0,0 +1,26 @@
+import { isApiTimeoutError, isNonApiResponse, WRITE_TIMED_OUT_MESSAGE } from '../api/client.js';
+/** A write a gateway answered with a 5xx page (how a slow request ends behind CloudFront). */
+export class UnansweredError extends Error {
+    constructor() {
+        super(WRITE_TIMED_OUT_MESSAGE);
+        this.name = 'UnansweredError';
+    }
+}
+/** Whether a refused response is a gateway's 5xx page rather than the API's answer. */
+export function isGatewayFailure(result) {
+    return !result.ok && isNonApiResponse(result) && result.status >= 500;
+}
+/** Whether `err` leaves a write's outcome unknown: a timeout, or a gateway's 5xx page. */
+export function isUnanswered(err) {
+    return isApiTimeoutError(err) || err instanceof UnansweredError;
+}
+/**
+ * A failed write whose outcome is unknown, so its message is a warning (yellow), not an error
+ * (docs/ux-guidelines.md, Loading, empty and error states).
+ */
+export class MayHaveLandedError extends Error {
+    constructor() {
+        super(...arguments);
+        this.name = 'MayHaveLandedError';
+    }
+}

package/dist/editor/unavailable-entry-type.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Author-facing wording for an entry type the running code cannot resolve (see
+ * `EntryTypeUnavailable`). Dependency-free so any client module can import it.
+ */
+/** `ApiResponse.code` of the 503 the API answers with for an entry of an unavailable type. */
+export declare const SCHEMA_UNAVAILABLE_CODE = "SCHEMA_UNAVAILABLE";
+/**
+ * The message split around the schema refs, so a renderer can set the refs in a code style.
+ * With no refs (a 503 on an entry the schema did not flag) the parenthetical is omitted.
+ */
+export declare function unavailableTypeMessageParts(schemaRefs: readonly string[]): {
+    before: string;
+    after: string;
+};
+/** The distinct schema refs of the unavailable entry types in `entryTypes`, in order. */
+export declare function unavailableSchemaRefs(entryTypes: ReadonlyArray<{
+    unavailable?: {
+        schemaRef: string;
+    };
+}> | undefined): string[];

package/dist/editor/unavailable-entry-type.js

@@ -0,0 +1,28 @@
+/**
+ * Author-facing wording for an entry type the running code cannot resolve (see
+ * `EntryTypeUnavailable`). Dependency-free so any client module can import it.
+ */
+/** `ApiResponse.code` of the 503 the API answers with for an entry of an unavailable type. */
+export const SCHEMA_UNAVAILABLE_CODE = 'SCHEMA_UNAVAILABLE';
+const HEAD = "This section uses a content type this editor version doesn't know yet";
+const TAIL = 'It usually appears after the editor finishes updating; reload in a few minutes.';
+/**
+ * The message split around the schema refs, so a renderer can set the refs in a code style.
+ * With no refs (a 503 on an entry the schema did not flag) the parenthetical is omitted.
+ */
+export function unavailableTypeMessageParts(schemaRefs) {
+    const hasRefs = schemaRefs.length > 0;
+    return {
+        before: hasRefs ? `${HEAD} (` : HEAD,
+        after: `${hasRefs ? ')' : ''}. ${TAIL}`,
+    };
+}
+/** The distinct schema refs of the unavailable entry types in `entryTypes`, in order. */
+export function unavailableSchemaRefs(entryTypes) {
+    const refs = [];
+    for (const et of entryTypes ?? []) {
+        if (et.unavailable && !refs.includes(et.unavailable.schemaRef))
+            refs.push(et.unavailable.schemaRef);
+    }
+    return refs;
+}