@adecore/ui 0.54.11 → 0.54.13

package/dist/EmptyScene.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export interface EmptySceneProps {
+    compact?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+export declare function EmptyScene({ compact, children, className }: EmptySceneProps): import("react").JSX.Element;

package/dist/EmptyScene.js

@@ -0,0 +1,96 @@
+import { c as _c } from "react/compiler-runtime";
+import clsx from 'clsx';
+import { useId } from 'react';
+/* The drawing an `EmptyState` shows through `scene`. It only decorates, so it stays out of the accessibility tree. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EmptyScene(t0) {
+  const $ = _c(14);
+  const {
+    compact: t1,
+    children,
+    className
+  } = t0;
+  const compact = t1 === undefined ? false : t1;
+  const gradient = useId();
+  const t2 = `url("#${gradient}")`;
+  let t3;
+  if ($[0] !== t2) {
+    t3 = {
+      "--scene-fill": t2
+    };
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const style = t3;
+  const t4 = compact && "scene-compact";
+  let t5;
+  if ($[2] !== className || $[3] !== t4) {
+    t5 = clsx("scene", t4, className);
+    $[2] = className;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /*#__PURE__*/_jsx("stop", {
+      offset: "0",
+      style: {
+        stopColor: "var(--scene-top)"
+      }
+    });
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /*#__PURE__*/_jsx("stop", {
+      offset: "1",
+      style: {
+        stopColor: "var(--scene-bottom)"
+      }
+    });
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  let t8;
+  if ($[7] !== gradient) {
+    t8 = /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsxs("linearGradient", {
+        id: gradient,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: [t6, t7]
+      })
+    });
+    $[7] = gradient;
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+  let t9;
+  if ($[9] !== children || $[10] !== style || $[11] !== t5 || $[12] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("svg", {
+      className: t5,
+      viewBox: "0 0 160 104",
+      style: style,
+      "aria-hidden": "true",
+      children: [t8, children]
+    });
+    $[9] = children;
+    $[10] = style;
+    $[11] = t5;
+    $[12] = t8;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  return t9;
+}

package/dist/EmptyState.d.ts

@@ -4,6 +4,7 @@ export interface EmptyStateProps {
     icon?: LucideIcon | ReactElement<{
         size?: number;
     }>;
+    scene?: ReactNode;
     busy?: boolean;
     title?: ReactNode;
     children: ReactNode;
@@ -11,4 +12,4 @@ export interface EmptyStateProps {
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function EmptyState({ icon, busy, title, children, action, className, ref }: EmptyStateProps): import("react").JSX.Element;
+export declare function EmptyState({ icon, scene, busy, title, children, action, className, ref }: EmptyStateProps): import("react").JSX.Element;

package/dist/EmptyState.js

@@ -7,9 +7,10 @@ import { Spinner } from "./Spinner.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_SIZE = 20;
 export function EmptyState(t0) {
-  const $ = _c(18);
+  const $ = _c(24);
   const {
     icon,
+    scene,
     busy: t1,
     title,
     children,
@@ -27,8 +28,20 @@ export function EmptyState(t0) {
     t2 = $[1];
   }
   let t3;
-  if ($[2] !== busy || $[3] !== icon) {
-    t3 = (busy || icon) && /*#__PURE__*/_jsx("span", {
+  if ($[2] !== busy || $[3] !== scene) {
+    t3 = scene && !busy && /*#__PURE__*/_jsx("div", {
+      className: "mb-2",
+      children: scene
+    });
+    $[2] = busy;
+    $[3] = scene;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== busy || $[6] !== icon || $[7] !== scene) {
+    t4 = (busy || icon && !scene) && /*#__PURE__*/_jsx("span", {
       className: "text-text-faint",
       children: busy ? /*#__PURE__*/_jsx(Spinner, {
         size: ICON_SIZE
@@ -39,61 +52,64 @@ export function EmptyState(t0) {
         size: ICON_SIZE
       })
     });
-    $[2] = busy;
-    $[3] = icon;
-    $[4] = t3;
+    $[5] = busy;
+    $[6] = icon;
+    $[7] = scene;
+    $[8] = t4;
   } else {
-    t3 = $[4];
+    t4 = $[8];
   }
-  let t4;
-  if ($[5] !== title) {
-    t4 = title && /*#__PURE__*/_jsx("p", {
-      className: "text-sm font-medium text-text",
+  let t5;
+  if ($[9] !== scene || $[10] !== title) {
+    t5 = title && /*#__PURE__*/_jsx("p", {
+      className: clsx("text-text", scene ? "text-base font-semibold" : "text-sm font-medium"),
       children: title
     });
-    $[5] = title;
-    $[6] = t4;
+    $[9] = scene;
+    $[10] = title;
+    $[11] = t5;
   } else {
-    t4 = $[6];
+    t5 = $[11];
   }
-  let t5;
-  if ($[7] !== children) {
-    t5 = /*#__PURE__*/_jsx("p", {
+  let t6;
+  if ($[12] !== children) {
+    t6 = /*#__PURE__*/_jsx("p", {
       className: "max-w-[280px] text-xs leading-snug text-text-muted",
       children: children
     });
-    $[7] = children;
-    $[8] = t5;
+    $[12] = children;
+    $[13] = t6;
   } else {
-    t5 = $[8];
+    t6 = $[13];
   }
-  let t6;
-  if ($[9] !== action) {
-    t6 = action && /*#__PURE__*/_jsx("div", {
+  let t7;
+  if ($[14] !== action) {
+    t7 = action && /*#__PURE__*/_jsx("div", {
       className: "mt-2",
       children: action
     });
-    $[9] = action;
-    $[10] = t6;
+    $[14] = action;
+    $[15] = t7;
   } else {
-    t6 = $[10];
+    t7 = $[15];
   }
-  let t7;
-  if ($[11] !== ref || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
-    t7 = /*#__PURE__*/_jsxs("div", {
+  let t8;
+  if ($[16] !== ref || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== t7) {
+    t8 = /*#__PURE__*/_jsxs("div", {
       ref: ref,
       className: t2,
-      children: [t3, t4, t5, t6]
+      children: [t3, t4, t5, t6, t7]
     });
-    $[11] = ref;
-    $[12] = t2;
-    $[13] = t3;
-    $[14] = t4;
-    $[15] = t5;
-    $[16] = t6;
-    $[17] = t7;
+    $[16] = ref;
+    $[17] = t2;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
   } else {
-    t7 = $[17];
+    t8 = $[23];
   }
-  return t7;
+  return t8;
 }

package/dist/PanelEmpty.d.ts

@@ -3,6 +3,8 @@ import type { ReactNode, Ref } from 'react';
 export interface PanelEmptyProps {
     header?: ReactNode;
     icon?: LucideIcon;
+    scene?: ReactNode;
+    title?: ReactNode;
     busy?: boolean;
     action?: ReactNode;
     sunken?: boolean;
@@ -11,4 +13,4 @@ export interface PanelEmptyProps {
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function PanelEmpty({ header, icon, busy, action, sunken, fill, children, className, ref }: PanelEmptyProps): import("react").JSX.Element;
+export declare function PanelEmpty({ header, icon, scene, title, busy, action, sunken, fill, children, className, ref }: PanelEmptyProps): import("react").JSX.Element;

package/dist/PanelEmpty.js

@@ -3,10 +3,12 @@ import clsx from 'clsx';
 import { EmptyState } from "./EmptyState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function PanelEmpty(t0) {
-  const $ = _c(14);
+  const $ = _c(16);
   const {
     header,
     icon,
+    scene,
+    title,
     busy: t1,
     action,
     sunken: t2,
@@ -31,9 +33,11 @@ export function PanelEmpty(t0) {
     t6 = $[3];
   }
   let t7;
-  if ($[4] !== action || $[5] !== busy || $[6] !== children || $[7] !== icon) {
+  if ($[4] !== action || $[5] !== busy || $[6] !== children || $[7] !== icon || $[8] !== scene || $[9] !== title) {
     t7 = /*#__PURE__*/_jsx(EmptyState, {
       icon: icon,
+      scene: scene,
+      title: title,
       busy: busy,
       action: action,
       children: children
@@ -42,24 +46,26 @@ export function PanelEmpty(t0) {
     $[5] = busy;
     $[6] = children;
     $[7] = icon;
-    $[8] = t7;
+    $[8] = scene;
+    $[9] = title;
+    $[10] = t7;
   } else {
-    t7 = $[8];
+    t7 = $[10];
   }
   let t8;
-  if ($[9] !== header || $[10] !== ref || $[11] !== t6 || $[12] !== t7) {
+  if ($[11] !== header || $[12] !== ref || $[13] !== t6 || $[14] !== t7) {
     t8 = /*#__PURE__*/_jsxs("div", {
       ref: ref,
       className: t6,
       children: [header, t7]
     });
-    $[9] = header;
-    $[10] = ref;
-    $[11] = t6;
-    $[12] = t7;
-    $[13] = t8;
+    $[11] = header;
+    $[12] = ref;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
   } else {
-    t8 = $[13];
+    t8 = $[15];
   }
   return t8;
 }

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { ColorWheelPicker, type ColorWheelPickerProps } from './ColorWheelPicker
 export { ColumnResizeHandle, type ColumnResizeHandleProps } from './ColumnResizeHandle.tsx';
 export { DisabledReason, type DisabledReasonProps } from './DisabledReason.tsx';
 export { DockShell, type DockShellProps } from './DockShell.tsx';
+export { EmptyScene, type EmptySceneProps } from './EmptyScene.tsx';
 export { EmptyState, type EmptyStateProps } from './EmptyState.tsx';
 export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary.tsx';
 export { Field, FieldHint, FormError, type FieldHintProps, type FieldProps, type FormErrorProps } from './Field.tsx';

package/dist/index.js

@@ -27,6 +27,7 @@ export { ColorWheelPicker } from "./ColorWheelPicker.js";
 export { ColumnResizeHandle } from "./ColumnResizeHandle.js";
 export { DisabledReason } from "./DisabledReason.js";
 export { DockShell } from "./DockShell.js";
+export { EmptyScene } from "./EmptyScene.js";
 export { EmptyState } from "./EmptyState.js";
 export { ErrorBoundary } from "./ErrorBoundary.js";
 export { Field, FieldHint, FormError } from "./Field.js";

package/dist/menu/parts.d.ts

@@ -19,7 +19,7 @@ type ItemLook = {
     unstyled?: boolean;
 };
 type MenuItemProps = ComponentProps<typeof BaseMenu.Item> & ItemLook;
-export declare function MenuItem({ unstyled, className, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuItem({ unstyled, className, children, ...props }: MenuItemProps): import("react").JSX.Element;
 export interface MenuCheckProps {
     kind: 'radio' | 'checkbox';
     checked?: boolean;

package/dist/menu/parts.js

@@ -159,8 +159,33 @@ export function MenuPopup(t0) {
   }
   return t8;
 }
+/*
+ * Typing in an open menu moves to the first row whose text starts with the letters, read from the
+ * row's `label` or else its rendered text. The space JSX keeps between an icon and the name
+ * (`<Icon /> {name}`) draws nothing in a row laid out with a gap, but it would start that text and
+ * keep the row from ever matching. A row whose text starts with something other than its name,
+ * such as initials before it, sets `label`.
+ */
+function withoutLeadingSpace(children) {
+  if (typeof children === 'string') {
+    return children.trimStart();
+  }
+  if (!Array.isArray(children)) {
+    return children;
+  }
+  let reached = false;
+  return children.map(child => {
+    if (reached || typeof child !== 'string') {
+      return child;
+    }
+    const trimmed = child.trimStart();
+    reached = trimmed !== '';
+    return trimmed;
+  });
+}
 export function MenuItem(t0) {
-  const $ = _c(10);
+  const $ = _c(15);
+  let children;
   let className;
   let props;
   let t1;
@@ -168,40 +193,54 @@ export function MenuItem(t0) {
     ({
       unstyled: t1,
       className,
+      children,
       ...props
     } = t0);
     $[0] = t0;
-    $[1] = className;
-    $[2] = props;
-    $[3] = t1;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = t1;
   } else {
-    className = $[1];
-    props = $[2];
-    t1 = $[3];
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    t1 = $[4];
   }
   const unstyled = t1 === undefined ? false : t1;
   let t2;
-  if ($[4] !== className || $[5] !== unstyled) {
+  if ($[5] !== className || $[6] !== unstyled) {
     t2 = unstyled ? className : withClass("menu-item", className);
-    $[4] = className;
-    $[5] = unstyled;
-    $[6] = t2;
+    $[5] = className;
+    $[6] = unstyled;
+    $[7] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[7];
   }
   let t3;
-  if ($[7] !== props || $[8] !== t2) {
-    t3 = /*#__PURE__*/_jsx(BaseMenu.Item, {
+  if ($[8] !== children || $[9] !== unstyled) {
+    t3 = unstyled ? children : withoutLeadingSpace(children);
+    $[8] = children;
+    $[9] = unstyled;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== props || $[12] !== t2 || $[13] !== t3) {
+    t4 = /*#__PURE__*/_jsx(BaseMenu.Item, {
       className: t2,
-      ...props
+      ...props,
+      children: t3
     });
-    $[7] = props;
-    $[8] = t2;
-    $[9] = t3;
+    $[11] = props;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
   } else {
-    t3 = $[9];
+    t4 = $[14];
   }
-  return t3;
+  return t4;
 }
 /* One line of the row tall, so a row with a second line keeps the tick beside its first. */
 export function MenuCheck(t0) {
@@ -281,7 +320,7 @@ export function MenuCheck(t0) {
 const checkRow = (kind, unstyled, indicator, children) => unstyled ? children : /*#__PURE__*/_jsxs(_Fragment, {
   children: [indicator === 'start' && /*#__PURE__*/_jsx(MenuCheck, {
     kind: kind
-  }), children, indicator === 'end' && /*#__PURE__*/_jsx(MenuCheck, {
+  }), withoutLeadingSpace(children), indicator === 'end' && /*#__PURE__*/_jsx(MenuCheck, {
     kind: kind,
     className: "ml-auto"
   })]
@@ -418,7 +457,7 @@ export function MenuRadioItem(t0) {
   return t5;
 }
 export function MenuSubmenuTrigger(t0) {
-  const $ = _c(14);
+  const $ = _c(16);
   let children;
   let className;
   let props;
@@ -451,33 +490,41 @@ export function MenuSubmenuTrigger(t0) {
     t2 = $[6];
   }
   let t3;
-  if ($[7] !== chevron) {
-    t3 = chevron && /*#__PURE__*/_jsx(Icon, {
+  if ($[7] !== children) {
+    t3 = withoutLeadingSpace(children);
+    $[7] = children;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== chevron) {
+    t4 = chevron && /*#__PURE__*/_jsx(Icon, {
       icon: ChevronRight,
       size: 14,
       className: "ml-auto text-text-faint"
     });
-    $[7] = chevron;
-    $[8] = t3;
+    $[9] = chevron;
+    $[10] = t4;
   } else {
-    t3 = $[8];
+    t4 = $[10];
   }
-  let t4;
-  if ($[9] !== children || $[10] !== props || $[11] !== t2 || $[12] !== t3) {
-    t4 = /*#__PURE__*/_jsxs(BaseMenu.SubmenuTrigger, {
+  let t5;
+  if ($[11] !== props || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
+    t5 = /*#__PURE__*/_jsxs(BaseMenu.SubmenuTrigger, {
       className: t2,
       ...props,
-      children: [children, t3]
+      children: [t3, t4]
     });
-    $[9] = children;
-    $[10] = props;
-    $[11] = t2;
-    $[12] = t3;
-    $[13] = t4;
+    $[11] = props;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
   } else {
-    t4 = $[13];
+    t5 = $[15];
   }
-  return t4;
+  return t5;
 }
 /* Its first item is the row, every `RowAction` and `RowSubmenuTrigger` after it an item of its own, so the arrow keys reach each. */
 export function MenuRow(t0) {

package/dist/theme.css

@@ -115,6 +115,16 @@
     --file-icon-purple: #a631be;
     --file-icon-pink: #d32a61;
     --file-icon-mauve: #594c5b;
+    /* `EmptyScene`: what a drawing of an empty place is made of. */
+    --scene-top: #ffffff;
+    --scene-bottom: #ececf1;
+    --scene-rim: rgb(0 0 0 / 0.09);
+    --scene-line: rgb(0 0 0 / 0.12);
+    --scene-inset: rgb(0 0 0 / 0.06);
+    --scene-text: rgb(0 0 0 / 0.14);
+    --scene-lift: drop-shadow(0 1px 1px rgb(0 0 0 / 0.08)) drop-shadow(0 5px 10px rgb(0 0 0 / 0.08));
+    /* What lands in a scene overshoots a little and settles. */
+    --scene-arrive: cubic-bezier(0.34, 1.5, 0.55, 1);
 }
 
 /* The theme attribute sits on `<html>`, the element the light rule above lands on too, so a token
@@ -191,6 +201,13 @@
     --file-icon-purple: #d568ea;
     --file-icon-pink: #ff678d;
     --file-icon-mauve: #79697b;
+    --scene-top: #2c2c32;
+    --scene-bottom: #1a1a1f;
+    --scene-rim: rgb(255 255 255 / 0.08);
+    --scene-line: rgb(255 255 255 / 0.1);
+    --scene-inset: rgb(0 0 0 / 0.3);
+    --scene-text: rgb(255 255 255 / 0.16);
+    --scene-lift: drop-shadow(0 1px 0 rgb(0 0 0 / 0.4)) drop-shadow(0 6px 10px rgb(0 0 0 / 0.35));
 }
 
 /* Code a person reads as code (an editor, a grid of values, a statement) at one size the app may set on
@@ -1178,3 +1195,93 @@
         .ade-scrollbar, .ade-scrollbar::before, .ade-scrollbar-thumb::before { transition: none; }
     }
 }
+
+/* The drawing of an empty place (`EmptyScene`): shapes in a soft gradient with a thin rim and one detail
+   in the accent color, on the same 8 second loop. Each rule below only animates: at rest, and under
+   reduced motion, a drawing shows the end of what it plays. */
+.scene { flex: none; width: 160px; height: 104px; overflow: visible; }
+.scene-compact { width: 136px; height: 88px; }
+.scene-shape { fill: var(--scene-fill); stroke: var(--scene-rim); stroke-width: 1; stroke-linejoin: round; }
+.scene-edge { fill: none; stroke: var(--scene-line); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
+.scene-inset { fill: var(--scene-inset); }
+.scene-line { fill: none; stroke: var(--text-faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.scene-text { fill: none; stroke: var(--scene-text); stroke-width: 4px; stroke-linecap: round; }
+.scene-hand { fill: none; stroke: var(--text-muted); stroke-width: 2.5; stroke-linecap: round; }
+.scene-dot { fill: var(--text-faint); }
+.scene-accent { fill: var(--accent); }
+.scene-accent-line { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+.scene-lift { filter: var(--scene-lift); }
+.scene-cursor { fill: var(--text); stroke: var(--surface); stroke-width: 1; stroke-linejoin: round; }
+.scene [class*="scene-reveal-"] { transform-box: fill-box; transform-origin: center; }
+.scene [class*="scene-stroke-"], .scene [class*="scene-type-"] { stroke-dasharray: 1; }
+
+@keyframes scene-loop { 0% { opacity: 0; } 3%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
+@keyframes scene-reveal-0 { 0%, 3% { opacity: 0; transform: translateY(5px) scale(0.94); } 9%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-0 { 0%, 3% { stroke-dashoffset: 1; } 10%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-1 { 0%, 9% { opacity: 0; transform: translateY(5px) scale(0.94); } 15%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-1 { 0%, 9% { stroke-dashoffset: 1; } 16%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-2 { 0%, 15% { opacity: 0; transform: translateY(5px) scale(0.94); } 21%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-2 { 0%, 15% { stroke-dashoffset: 1; } 22%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-3 { 0%, 21% { opacity: 0; transform: translateY(5px) scale(0.94); } 27%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-3 { 0%, 21% { stroke-dashoffset: 1; } 28%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-4 { 0%, 27% { opacity: 0; transform: translateY(5px) scale(0.94); } 33%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-4 { 0%, 27% { stroke-dashoffset: 1; } 34%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-5 { 0%, 33% { opacity: 0; transform: translateY(5px) scale(0.94); } 39%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-5 { 0%, 33% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-6 { 0%, 39% { opacity: 0; transform: translateY(5px) scale(0.94); } 45%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-6 { 0%, 39% { stroke-dashoffset: 1; } 46%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-7 { 0%, 45% { opacity: 0; transform: translateY(5px) scale(0.94); } 51%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-7 { 0%, 45% { stroke-dashoffset: 1; } 52%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-8 { 0%, 51% { opacity: 0; transform: translateY(5px) scale(0.94); } 57%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-8 { 0%, 51% { stroke-dashoffset: 1; } 58%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-9 { 0%, 57% { opacity: 0; transform: translateY(5px) scale(0.94); } 63%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-9 { 0%, 57% { stroke-dashoffset: 1; } 64%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-10 { 0%, 63% { opacity: 0; transform: translateY(5px) scale(0.94); } 69%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-10 { 0%, 63% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-11 { 0%, 69% { opacity: 0; transform: translateY(5px) scale(0.94); } 75%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-11 { 0%, 69% { stroke-dashoffset: 1; } 76%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-12 { 0%, 75% { opacity: 0; transform: translateY(5px) scale(0.94); } 81%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-12 { 0%, 75% { stroke-dashoffset: 1; } 82%, 100% { stroke-dashoffset: 0; } }
+
+@media (prefers-reduced-motion: no-preference) {
+    .scene-loop { animation: scene-loop 8s linear infinite; }
+    .scene-reveal-0 { animation: scene-reveal-0 8s var(--scene-arrive) infinite; }
+    .scene-stroke-0 { animation: scene-stroke-0 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-0 { animation: scene-stroke-0 8s steps(5, jump-none) infinite; }
+    .scene-reveal-1 { animation: scene-reveal-1 8s var(--scene-arrive) infinite; }
+    .scene-stroke-1 { animation: scene-stroke-1 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-1 { animation: scene-stroke-1 8s steps(5, jump-none) infinite; }
+    .scene-reveal-2 { animation: scene-reveal-2 8s var(--scene-arrive) infinite; }
+    .scene-stroke-2 { animation: scene-stroke-2 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-2 { animation: scene-stroke-2 8s steps(5, jump-none) infinite; }
+    .scene-reveal-3 { animation: scene-reveal-3 8s var(--scene-arrive) infinite; }
+    .scene-stroke-3 { animation: scene-stroke-3 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-3 { animation: scene-stroke-3 8s steps(5, jump-none) infinite; }
+    .scene-reveal-4 { animation: scene-reveal-4 8s var(--scene-arrive) infinite; }
+    .scene-stroke-4 { animation: scene-stroke-4 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-4 { animation: scene-stroke-4 8s steps(5, jump-none) infinite; }
+    .scene-reveal-5 { animation: scene-reveal-5 8s var(--scene-arrive) infinite; }
+    .scene-stroke-5 { animation: scene-stroke-5 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-5 { animation: scene-stroke-5 8s steps(5, jump-none) infinite; }
+    .scene-reveal-6 { animation: scene-reveal-6 8s var(--scene-arrive) infinite; }
+    .scene-stroke-6 { animation: scene-stroke-6 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-6 { animation: scene-stroke-6 8s steps(5, jump-none) infinite; }
+    .scene-reveal-7 { animation: scene-reveal-7 8s var(--scene-arrive) infinite; }
+    .scene-stroke-7 { animation: scene-stroke-7 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-7 { animation: scene-stroke-7 8s steps(5, jump-none) infinite; }
+    .scene-reveal-8 { animation: scene-reveal-8 8s var(--scene-arrive) infinite; }
+    .scene-stroke-8 { animation: scene-stroke-8 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-8 { animation: scene-stroke-8 8s steps(5, jump-none) infinite; }
+    .scene-reveal-9 { animation: scene-reveal-9 8s var(--scene-arrive) infinite; }
+    .scene-stroke-9 { animation: scene-stroke-9 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-9 { animation: scene-stroke-9 8s steps(5, jump-none) infinite; }
+    .scene-reveal-10 { animation: scene-reveal-10 8s var(--scene-arrive) infinite; }
+    .scene-stroke-10 { animation: scene-stroke-10 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-10 { animation: scene-stroke-10 8s steps(5, jump-none) infinite; }
+    .scene-reveal-11 { animation: scene-reveal-11 8s var(--scene-arrive) infinite; }
+    .scene-stroke-11 { animation: scene-stroke-11 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-11 { animation: scene-stroke-11 8s steps(5, jump-none) infinite; }
+    .scene-reveal-12 { animation: scene-reveal-12 8s var(--scene-arrive) infinite; }
+    .scene-stroke-12 { animation: scene-stroke-12 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-12 { animation: scene-stroke-12 8s steps(5, jump-none) infinite; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.54.11",
+  "version": "0.54.13",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/EmptyScene.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import { useId, type CSSProperties, type ReactNode } from 'react';
+
+export interface EmptySceneProps {
+    /* For a panel: 136 by 88 pixels instead of 160 by 104. */
+    compact?: boolean;
+
+    /* SVG in a 160 by 104 view box, drawn with the `scene-*` classes of the theme. */
+    children: ReactNode;
+
+    className?: string;
+}
+
+/* The drawing an `EmptyState` shows through `scene`. It only decorates, so it stays out of the accessibility tree. */
+export function EmptyScene({ compact = false, children, className }: EmptySceneProps) {
+    const gradient = useId();
+    const style = { '--scene-fill': `url("#${gradient}")` } as CSSProperties;
+
+    return (
+        <svg className={clsx('scene', compact && 'scene-compact', className)} viewBox="0 0 160 104" style={style} aria-hidden="true">
+            <defs>
+                <linearGradient id={gradient} x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0" style={{ stopColor: 'var(--scene-top)' }} />
+                    <stop offset="1" style={{ stopColor: 'var(--scene-bottom)' }} />
+                </linearGradient>
+            </defs>
+            {children}
+        </svg>
+    );
+}

package/src/EmptyState.tsx

@@ -11,6 +11,9 @@ export interface EmptyStateProps {
     /* A Lucide icon, or a mark of another kind that takes a `size`. */
     icon?: LucideIcon | ReactElement<{ size?: number }>;
 
+    /* A drawing in place of the icon, usually an `EmptyScene`, for a place a person may not know yet. */
+    scene?: ReactNode;
+
     /* A `Spinner` in place of the icon. */
     busy?: boolean;
 
@@ -27,10 +30,11 @@ export interface EmptyStateProps {
     ref?: Ref<HTMLDivElement>;
 }
 
-export function EmptyState({ icon, busy = false, title, children, action, className, ref }: EmptyStateProps) {
+export function EmptyState({ icon, scene, busy = false, title, children, action, className, ref }: EmptyStateProps) {
     return (
         <div ref={ref} className={clsx('flex flex-col items-center justify-center gap-2 px-6 py-8 text-center', className)}>
-            {(busy || icon) && (
+            {scene && !busy && <div className="mb-2">{scene}</div>}
+            {(busy || (icon && !scene)) && (
                 <span className="text-text-faint">
                     {busy ? (
                         <Spinner size={ICON_SIZE} />
@@ -41,7 +45,7 @@ export function EmptyState({ icon, busy = false, title, children, action, classN
                     )}
                 </span>
             )}
-            {title && <p className="text-sm font-medium text-text">{title}</p>}
+            {title && <p className={clsx('text-text', scene ? 'text-base font-semibold' : 'text-sm font-medium')}>{title}</p>}
             <p className="max-w-[280px] text-xs leading-snug text-text-muted">{children}</p>
             {/* The button is an answer to the sentence, not a third line of it. */}
             {action && <div className="mt-2">{action}</div>}

package/src/PanelEmpty.tsx

@@ -9,6 +9,11 @@ export interface PanelEmptyProps {
 
     icon?: LucideIcon;
 
+    /* A drawing in place of the icon, usually a compact `EmptyScene`. */
+    scene?: ReactNode;
+
+    title?: ReactNode;
+
     /* A `Spinner` in place of the icon. */
     busy?: boolean;
 
@@ -25,11 +30,11 @@ export interface PanelEmptyProps {
     ref?: Ref<HTMLDivElement>;
 }
 
-export function PanelEmpty({ header, icon, busy = false, action, sunken = false, fill = 'grow', children, className, ref }: PanelEmptyProps) {
+export function PanelEmpty({ header, icon, scene, title, busy = false, action, sunken = false, fill = 'grow', children, className, ref }: PanelEmptyProps) {
     return (
         <div ref={ref} className={clsx('grid min-h-0 place-items-center', fill === 'full' ? 'h-full' : 'grow', sunken && 'bg-surface-sunken', className)}>
             {header}
-            <EmptyState icon={icon} busy={busy} action={action}>
+            <EmptyState icon={icon} scene={scene} title={title} busy={busy} action={action}>
                 {children}
             </EmptyState>
         </div>

package/src/index.ts

@@ -48,6 +48,7 @@ export { ColorWheelPicker, type ColorWheelPickerProps } from './ColorWheelPicker
 export { ColumnResizeHandle, type ColumnResizeHandleProps } from './ColumnResizeHandle.tsx';
 export { DisabledReason, type DisabledReasonProps } from './DisabledReason.tsx';
 export { DockShell, type DockShellProps } from './DockShell.tsx';
+export { EmptyScene, type EmptySceneProps } from './EmptyScene.tsx';
 export { EmptyState, type EmptyStateProps } from './EmptyState.tsx';
 export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary.tsx';
 export { Field, FieldHint, FormError, type FieldHintProps, type FieldProps, type FormErrorProps } from './Field.tsx';

package/src/menu/parts.tsx

@@ -97,10 +97,44 @@ type ItemLook = {
     unstyled?: boolean;
 };
 
+/*
+ * Typing in an open menu moves to the first row whose text starts with the letters, read from the
+ * row's `label` or else its rendered text. The space JSX keeps between an icon and the name
+ * (`<Icon /> {name}`) draws nothing in a row laid out with a gap, but it would start that text and
+ * keep the row from ever matching. A row whose text starts with something other than its name,
+ * such as initials before it, sets `label`.
+ */
+function withoutLeadingSpace(children: ReactNode): ReactNode {
+    if (typeof children === 'string') {
+        return children.trimStart();
+    }
+
+    if (!Array.isArray(children)) {
+        return children;
+    }
+
+    let reached = false;
+
+    return children.map((child: ReactNode) => {
+        if (reached || typeof child !== 'string') {
+            return child;
+        }
+
+        const trimmed = child.trimStart();
+        reached = trimmed !== '';
+
+        return trimmed;
+    });
+}
+
 type MenuItemProps = ComponentProps<typeof BaseMenu.Item> & ItemLook;
 
-export function MenuItem({ unstyled = false, className, ...props }: MenuItemProps) {
-    return <BaseMenu.Item className={unstyled ? className : withClass('menu-item', className)} {...props} />;
+export function MenuItem({ unstyled = false, className, children, ...props }: MenuItemProps) {
+    return (
+        <BaseMenu.Item className={unstyled ? className : withClass('menu-item', className)} {...props}>
+            {unstyled ? children : withoutLeadingSpace(children)}
+        </BaseMenu.Item>
+    );
 }
 
 export interface MenuCheckProps {
@@ -147,7 +181,7 @@ const checkRow = (kind: MenuCheckProps['kind'], unstyled: boolean, indicator: In
     ) : (
         <>
             {indicator === 'start' && <MenuCheck kind={kind} />}
-            {children}
+            {withoutLeadingSpace(children)}
             {indicator === 'end' && <MenuCheck kind={kind} className="ml-auto" />}
         </>
     );
@@ -182,7 +216,7 @@ type SubmenuTriggerProps = ComponentProps<typeof BaseMenu.SubmenuTrigger> & {
 export function MenuSubmenuTrigger({ className, children, chevron = true, ...props }: SubmenuTriggerProps) {
     return (
         <BaseMenu.SubmenuTrigger className={withClass('menu-item', className)} {...props}>
-            {children}
+            {withoutLeadingSpace(children)}
             {chevron && <Icon icon={ChevronRight} size={14} className="ml-auto text-text-faint" />}
         </BaseMenu.SubmenuTrigger>
     );

package/src/theme.css

@@ -115,6 +115,16 @@
     --file-icon-purple: #a631be;
     --file-icon-pink: #d32a61;
     --file-icon-mauve: #594c5b;
+    /* `EmptyScene`: what a drawing of an empty place is made of. */
+    --scene-top: #ffffff;
+    --scene-bottom: #ececf1;
+    --scene-rim: rgb(0 0 0 / 0.09);
+    --scene-line: rgb(0 0 0 / 0.12);
+    --scene-inset: rgb(0 0 0 / 0.06);
+    --scene-text: rgb(0 0 0 / 0.14);
+    --scene-lift: drop-shadow(0 1px 1px rgb(0 0 0 / 0.08)) drop-shadow(0 5px 10px rgb(0 0 0 / 0.08));
+    /* What lands in a scene overshoots a little and settles. */
+    --scene-arrive: cubic-bezier(0.34, 1.5, 0.55, 1);
 }
 
 /* The theme attribute sits on `<html>`, the element the light rule above lands on too, so a token
@@ -191,6 +201,13 @@
     --file-icon-purple: #d568ea;
     --file-icon-pink: #ff678d;
     --file-icon-mauve: #79697b;
+    --scene-top: #2c2c32;
+    --scene-bottom: #1a1a1f;
+    --scene-rim: rgb(255 255 255 / 0.08);
+    --scene-line: rgb(255 255 255 / 0.1);
+    --scene-inset: rgb(0 0 0 / 0.3);
+    --scene-text: rgb(255 255 255 / 0.16);
+    --scene-lift: drop-shadow(0 1px 0 rgb(0 0 0 / 0.4)) drop-shadow(0 6px 10px rgb(0 0 0 / 0.35));
 }
 
 /* Code a person reads as code (an editor, a grid of values, a statement) at one size the app may set on
@@ -1178,3 +1195,93 @@
         .ade-scrollbar, .ade-scrollbar::before, .ade-scrollbar-thumb::before { transition: none; }
     }
 }
+
+/* The drawing of an empty place (`EmptyScene`): shapes in a soft gradient with a thin rim and one detail
+   in the accent color, on the same 8 second loop. Each rule below only animates: at rest, and under
+   reduced motion, a drawing shows the end of what it plays. */
+.scene { flex: none; width: 160px; height: 104px; overflow: visible; }
+.scene-compact { width: 136px; height: 88px; }
+.scene-shape { fill: var(--scene-fill); stroke: var(--scene-rim); stroke-width: 1; stroke-linejoin: round; }
+.scene-edge { fill: none; stroke: var(--scene-line); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
+.scene-inset { fill: var(--scene-inset); }
+.scene-line { fill: none; stroke: var(--text-faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.scene-text { fill: none; stroke: var(--scene-text); stroke-width: 4px; stroke-linecap: round; }
+.scene-hand { fill: none; stroke: var(--text-muted); stroke-width: 2.5; stroke-linecap: round; }
+.scene-dot { fill: var(--text-faint); }
+.scene-accent { fill: var(--accent); }
+.scene-accent-line { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+.scene-lift { filter: var(--scene-lift); }
+.scene-cursor { fill: var(--text); stroke: var(--surface); stroke-width: 1; stroke-linejoin: round; }
+.scene [class*="scene-reveal-"] { transform-box: fill-box; transform-origin: center; }
+.scene [class*="scene-stroke-"], .scene [class*="scene-type-"] { stroke-dasharray: 1; }
+
+@keyframes scene-loop { 0% { opacity: 0; } 3%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
+@keyframes scene-reveal-0 { 0%, 3% { opacity: 0; transform: translateY(5px) scale(0.94); } 9%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-0 { 0%, 3% { stroke-dashoffset: 1; } 10%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-1 { 0%, 9% { opacity: 0; transform: translateY(5px) scale(0.94); } 15%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-1 { 0%, 9% { stroke-dashoffset: 1; } 16%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-2 { 0%, 15% { opacity: 0; transform: translateY(5px) scale(0.94); } 21%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-2 { 0%, 15% { stroke-dashoffset: 1; } 22%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-3 { 0%, 21% { opacity: 0; transform: translateY(5px) scale(0.94); } 27%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-3 { 0%, 21% { stroke-dashoffset: 1; } 28%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-4 { 0%, 27% { opacity: 0; transform: translateY(5px) scale(0.94); } 33%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-4 { 0%, 27% { stroke-dashoffset: 1; } 34%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-5 { 0%, 33% { opacity: 0; transform: translateY(5px) scale(0.94); } 39%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-5 { 0%, 33% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-6 { 0%, 39% { opacity: 0; transform: translateY(5px) scale(0.94); } 45%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-6 { 0%, 39% { stroke-dashoffset: 1; } 46%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-7 { 0%, 45% { opacity: 0; transform: translateY(5px) scale(0.94); } 51%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-7 { 0%, 45% { stroke-dashoffset: 1; } 52%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-8 { 0%, 51% { opacity: 0; transform: translateY(5px) scale(0.94); } 57%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-8 { 0%, 51% { stroke-dashoffset: 1; } 58%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-9 { 0%, 57% { opacity: 0; transform: translateY(5px) scale(0.94); } 63%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-9 { 0%, 57% { stroke-dashoffset: 1; } 64%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-10 { 0%, 63% { opacity: 0; transform: translateY(5px) scale(0.94); } 69%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-10 { 0%, 63% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-11 { 0%, 69% { opacity: 0; transform: translateY(5px) scale(0.94); } 75%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-11 { 0%, 69% { stroke-dashoffset: 1; } 76%, 100% { stroke-dashoffset: 0; } }
+@keyframes scene-reveal-12 { 0%, 75% { opacity: 0; transform: translateY(5px) scale(0.94); } 81%, 100% { opacity: 1; transform: none; } }
+@keyframes scene-stroke-12 { 0%, 75% { stroke-dashoffset: 1; } 82%, 100% { stroke-dashoffset: 0; } }
+
+@media (prefers-reduced-motion: no-preference) {
+    .scene-loop { animation: scene-loop 8s linear infinite; }
+    .scene-reveal-0 { animation: scene-reveal-0 8s var(--scene-arrive) infinite; }
+    .scene-stroke-0 { animation: scene-stroke-0 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-0 { animation: scene-stroke-0 8s steps(5, jump-none) infinite; }
+    .scene-reveal-1 { animation: scene-reveal-1 8s var(--scene-arrive) infinite; }
+    .scene-stroke-1 { animation: scene-stroke-1 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-1 { animation: scene-stroke-1 8s steps(5, jump-none) infinite; }
+    .scene-reveal-2 { animation: scene-reveal-2 8s var(--scene-arrive) infinite; }
+    .scene-stroke-2 { animation: scene-stroke-2 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-2 { animation: scene-stroke-2 8s steps(5, jump-none) infinite; }
+    .scene-reveal-3 { animation: scene-reveal-3 8s var(--scene-arrive) infinite; }
+    .scene-stroke-3 { animation: scene-stroke-3 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-3 { animation: scene-stroke-3 8s steps(5, jump-none) infinite; }
+    .scene-reveal-4 { animation: scene-reveal-4 8s var(--scene-arrive) infinite; }
+    .scene-stroke-4 { animation: scene-stroke-4 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-4 { animation: scene-stroke-4 8s steps(5, jump-none) infinite; }
+    .scene-reveal-5 { animation: scene-reveal-5 8s var(--scene-arrive) infinite; }
+    .scene-stroke-5 { animation: scene-stroke-5 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-5 { animation: scene-stroke-5 8s steps(5, jump-none) infinite; }
+    .scene-reveal-6 { animation: scene-reveal-6 8s var(--scene-arrive) infinite; }
+    .scene-stroke-6 { animation: scene-stroke-6 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-6 { animation: scene-stroke-6 8s steps(5, jump-none) infinite; }
+    .scene-reveal-7 { animation: scene-reveal-7 8s var(--scene-arrive) infinite; }
+    .scene-stroke-7 { animation: scene-stroke-7 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-7 { animation: scene-stroke-7 8s steps(5, jump-none) infinite; }
+    .scene-reveal-8 { animation: scene-reveal-8 8s var(--scene-arrive) infinite; }
+    .scene-stroke-8 { animation: scene-stroke-8 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-8 { animation: scene-stroke-8 8s steps(5, jump-none) infinite; }
+    .scene-reveal-9 { animation: scene-reveal-9 8s var(--scene-arrive) infinite; }
+    .scene-stroke-9 { animation: scene-stroke-9 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-9 { animation: scene-stroke-9 8s steps(5, jump-none) infinite; }
+    .scene-reveal-10 { animation: scene-reveal-10 8s var(--scene-arrive) infinite; }
+    .scene-stroke-10 { animation: scene-stroke-10 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-10 { animation: scene-stroke-10 8s steps(5, jump-none) infinite; }
+    .scene-reveal-11 { animation: scene-reveal-11 8s var(--scene-arrive) infinite; }
+    .scene-stroke-11 { animation: scene-stroke-11 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-11 { animation: scene-stroke-11 8s steps(5, jump-none) infinite; }
+    .scene-reveal-12 { animation: scene-reveal-12 8s var(--scene-arrive) infinite; }
+    .scene-stroke-12 { animation: scene-stroke-12 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+    .scene-type-12 { animation: scene-stroke-12 8s steps(5, jump-none) infinite; }
+}