@dazl/component-gallery 1.0.0 → 2.0.0

package/README.md

@@ -65,13 +65,15 @@ import { Button } from './button';
 export default function ButtonExample() {
   return (
     <>
-      <Section title="Sizes" layout="row">
+      <Section layout="row">
+        <Section.Title>Sizes</Section.Title>
         <Button size="sm">Small</Button>
         <Button size="md">Medium</Button>
         <Button size="lg">Large</Button>
       </Section>
 
-      <Section title="States" layout="column">
+      <Section layout="column">
+        <Section.Title>States</Section.Title>
         <Button disabled>Disabled</Button>
         <Button loading>Loading</Button>
       </Section>

package/dist/example/example.d.ts

@@ -1,7 +1,11 @@
 export interface SectionProps {
-    title?: string;
     layout?: 'row' | 'column';
     children: React.ReactNode;
 }
-export declare const Section: ({ title, layout, children }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Section: {
+    ({ layout, children }: SectionProps): import("react/jsx-runtime").JSX.Element;
+    Title: import("react").FC<{
+        children: React.ReactNode;
+    }>;
+};
 //# sourceMappingURL=example.d.ts.map

package/dist/example/example.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"example.d.ts","sourceRoot":"","sources":["../../src/example/example.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,GAAI,6BAAwC,YAAY,4CAS3E,CAAC"}
+{"version":3,"file":"example.d.ts","sourceRoot":"","sources":["../../src/example/example.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IACzB,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO;2BAAqC,YAAY;;kBAa5B,KAAK,CAAC,SAAS;;CAFvD,CAAC"}

package/dist/index.js

@@ -1,13 +1,28 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-const i = "_section_omose_1", l = "_sectionTitle_omose_9", m = "_sectionContentColumn_omose_18", C = "_sectionContentRow_omose_24", o = {
-  section: i,
-  sectionTitle: l,
-  sectionContentColumn: m,
-  sectionContentRow: C
-}, u = ({ title: n, layout: e = "column", children: s }) => /* @__PURE__ */ c("section", { className: o.section, children: [
-  n ? /* @__PURE__ */ t("div", { className: o.sectionTitle, children: n }) : null,
-  /* @__PURE__ */ t("div", { className: e === "column" ? o.sectionContentColumn : o.sectionContentRow, children: s })
-] });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+const section = "section";
+const sectionTitle = "sectionTitle";
+const sectionContentColumn = "sectionContentColumn";
+const sectionContentRow = "sectionContentRow";
+const styles = {
+  section,
+  sectionTitle,
+  sectionContentColumn,
+  sectionContentRow
+};
+const Section = ({ layout = "column", children }) => {
+  const { title, content } = extractTitle(children);
+  return /* @__PURE__ */ jsxs("section", { className: styles.section, children: [
+    title,
+    /* @__PURE__ */ jsx("div", { className: layout === "column" ? styles.sectionContentColumn : styles.sectionContentRow, children: content })
+  ] });
+};
+const SectionTitle = ({ children }) => /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children });
+Section.Title = SectionTitle;
+const extractTitle = (children) => {
+  const [title, ...content] = Children.toArray(children);
+  return isValidElement(title) && title.type === SectionTitle ? { title, content } : { title: null, content: children };
+};
 export {
-  u as Section
+  Section
 };

package/dist/route/index.js

@@ -1,59 +1,92 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { useCallback as f, memo as _, useState as h, lazy as b, Suspense as g, Component as v, useMemo as w, useEffect as p, useRef as E } from "react";
-import { z as s } from "zod";
-const S = "_root_segk4_1", k = {
-  root: S
-}, y = () => f((e) => {
-  if (!e) return;
-  const r = (t) => {
-    if (!(t.target instanceof Element)) return;
-    const a = t.target.closest("a");
-    if (!a) return;
-    const o = a.getAttribute("href");
-    o && (t.preventDefault(), C(o) && window.open(o, "_blank", "noopener,noreferrer"));
-  };
-  return e.addEventListener("click", r), () => {
-    e.removeEventListener("click", r);
-  };
-}, []), C = (e) => /^[a-z][a-z0-9+.-]*:/i.test(e), x = "_card_krcb2_1", N = "_cardHeader_krcb2_10", I = "_cardContent_krcb2_19", L = "_loadingState_krcb2_23", D = "_spinner_krcb2_30", H = "_errorState_krcb2_45", P = "_errorIcon_krcb2_56", z = "_errorMessage_krcb2_60", c = {
-  card: x,
-  cardHeader: N,
-  cardContent: I,
-  loadingState: L,
-  spinner: D,
-  errorState: H,
-  errorIcon: P,
-  errorMessage: z
-}, M = _(function({ example: r }) {
-  const [t] = h(() => b(() => import(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback, memo, useState, lazy, Suspense, Component, useMemo, useEffect, useRef } from "react";
+import { z } from "zod";
+const componentGallery = "componentGallery";
+const styles$1 = {
+  componentGallery
+};
+const useLinkBehaviorOverride = () => {
+  return useCallback((container) => {
+    if (!container) return;
+    const handleClick = (event) => {
+      if (!(event.target instanceof Element)) return;
+      const link = event.target.closest("a");
+      if (!link) return;
+      const href = link.getAttribute("href");
+      if (!href) return;
+      event.preventDefault();
+      if (isAbsoluteUrl(href)) {
+        window.open(href, "_blank", "noopener,noreferrer");
+      }
+    };
+    container.addEventListener("click", handleClick);
+    return () => {
+      container.removeEventListener("click", handleClick);
+    };
+  }, []);
+};
+const isAbsoluteUrl = (url) => /^[a-z][a-z0-9+.-]*:/i.test(url);
+const exampleCard = "exampleCard";
+const exampleCardHeader = "exampleCardHeader";
+const exampleCardContent = "exampleCardContent";
+const exampleCardLoading = "exampleCardLoading";
+const exampleCardSpinner = "exampleCardSpinner";
+const exampleCardError = "exampleCardError";
+const exampleCardErrorIcon = "exampleCardErrorIcon";
+const exampleCardErrorMessage = "exampleCardErrorMessage";
+const styles = {
+  exampleCard,
+  exampleCardHeader,
+  exampleCardContent,
+  exampleCardLoading,
+  exampleCardSpinner,
+  exampleCardError,
+  exampleCardErrorIcon,
+  exampleCardErrorMessage
+};
+const ExampleCard = memo(function Example({ example }) {
+  const [Component2] = useState(() => lazy(() => import(
     /* @vite-ignore */
-    `/${r.relativePath}`
-  ))), a = y();
-  return /* @__PURE__ */ u("div", { id: r.relativePath, className: c.card, children: [
-    /* @__PURE__ */ n("h3", { className: c.cardHeader, children: r.displayName }),
-    /* @__PURE__ */ n("div", { ref: a, className: c.cardContent, children: /* @__PURE__ */ n(R, { fallback: (o) => /* @__PURE__ */ n(F, { error: o }), children: /* @__PURE__ */ n(g, { fallback: /* @__PURE__ */ n(A, {}), children: /* @__PURE__ */ n(t, {}) }) }) })
+    `/${example.relativePath}`
+  )));
+  const contentRef = useLinkBehaviorOverride();
+  return /* @__PURE__ */ jsxs("div", { id: example.relativePath, className: styles.exampleCard, children: [
+    /* @__PURE__ */ jsx("h3", { className: styles.exampleCardHeader, children: example.displayName }),
+    /* @__PURE__ */ jsx(ErrorBoundary, { fallback: (error) => /* @__PURE__ */ jsx(ExampleCardError, { error }), children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ExampleCardLoading, {}), children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: styles.exampleCardContent, children: /* @__PURE__ */ jsx(Component2, {}) }) }) })
+  ] });
+});
+const ExampleCardLoading = () => {
+  return /* @__PURE__ */ jsx("div", { className: styles.exampleCardLoading, children: /* @__PURE__ */ jsx("div", { className: styles.exampleCardSpinner }) });
+};
+const ExampleCardError = ({ error }) => {
+  return /* @__PURE__ */ jsxs("div", { className: styles.exampleCardError, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.exampleCardErrorIcon, children: "⚠" }),
+    /* @__PURE__ */ jsx("span", { className: styles.exampleCardErrorMessage, children: error.message })
   ] });
-}), A = () => /* @__PURE__ */ n("div", { className: c.loadingState, children: /* @__PURE__ */ n("div", { className: c.spinner }) }), F = ({ error: e }) => /* @__PURE__ */ u("div", { className: c.errorState, children: [
-  /* @__PURE__ */ n("span", { className: c.errorIcon, children: "⚠" }),
-  /* @__PURE__ */ n("span", { className: c.errorMessage, children: e.message })
-] });
-class R extends v {
-  constructor(r) {
-    super(r), this.state = { error: null };
+};
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
   }
-  static getDerivedStateFromError(r) {
-    return { error: r };
+  static getDerivedStateFromError(error) {
+    return { error };
   }
   render() {
-    return this.state.error ? this.props.fallback(this.state.error) : this.props.children;
+    if (this.state.error) {
+      return this.props.fallback(this.state.error);
+    }
+    return this.props.children;
   }
 }
-const j = (e) => {
-  const r = document.getElementById(e);
-  r && (r.scrollIntoView({
+const scrollExampleCardIntoView = (id) => {
+  const element = document.getElementById(id);
+  if (!element) return;
+  element.scrollIntoView({
     behavior: "instant",
     block: "nearest"
-  }), r.animate(
+  });
+  element.animate(
     [
       { boxShadow: "0 0 0 0 #3E63DD" },
       { boxShadow: "0 0 0 4px #3E63DD", offset: 0.2 },
@@ -63,53 +96,74 @@ const j = (e) => {
       duration: 900,
       easing: "ease-out"
     }
-  ));
-}, O = s.object({
-  displayName: s.string(),
-  relativePath: s.string()
-}), B = s.object({
-  columns: s.number().default(2),
-  examples: s.array(O).default([]),
-  selectedExamplePath: s.string().optional(),
-  random: s.number().optional()
-}), G = () => {
-  const [e, r] = h(() => typeof window < "u" ? window.location.hash : "");
-  return p(() => {
-    const t = () => r(window.location.hash);
-    return window.addEventListener("hashchange", t), () => window.removeEventListener("hashchange", t);
-  }, []), e;
-}, U = () => {
-  const e = G();
-  return w(() => {
+  );
+};
+const componentExampleInfoSchema = z.object({
+  displayName: z.string(),
+  relativePath: z.string()
+});
+const componentGalleryParamsSchema = z.object({
+  columns: z.number().default(2),
+  examples: z.array(componentExampleInfoSchema).default([]),
+  selectedExamplePath: z.string().optional(),
+  random: z.number().optional()
+});
+const useLocationHash = () => {
+  const [hash, setHash] = useState(() => typeof window !== "undefined" ? window.location.hash : "");
+  useEffect(() => {
+    const handleHashChange = () => setHash(window.location.hash);
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, []);
+  return hash;
+};
+const useComponentGalleryParams = () => {
+  const hash = useLocationHash();
+  return useMemo(() => {
     try {
-      const r = JSON.parse(decodeURIComponent(e.slice(1)));
-      return B.parse(r);
+      const parsed = JSON.parse(decodeURIComponent(hash.slice(1)));
+      return componentGalleryParamsSchema.parse(parsed);
     } catch {
       return { columns: 1, examples: [] };
     }
-  }, [e]);
-}, V = (e, r) => {
-  const t = E(null);
-  return p(() => {
-    const a = t.current;
-    if (!e || !a) return;
-    let o = !1, l = !1, i = 0;
-    const d = () => {
-      l || (o = !0);
-    }, m = new ResizeObserver(() => {
-      o || (l = !0, j(e), cancelAnimationFrame(i), i = requestAnimationFrame(() => {
-        l = !1;
-      }));
+  }, [hash]);
+};
+const useScrollToExampleCard = (relativePath, counter) => {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!relativePath || !container) return;
+    let scrolledManually = false;
+    let scrollingProgrammatically = false;
+    let animationFrameId = 0;
+    const handleScroll = () => {
+      if (scrollingProgrammatically) return;
+      scrolledManually = true;
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      if (scrolledManually) return;
+      scrollingProgrammatically = true;
+      scrollExampleCardIntoView(relativePath);
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = requestAnimationFrame(() => {
+        scrollingProgrammatically = false;
+      });
     });
-    return window.addEventListener("scroll", d), m.observe(a), () => {
-      window.removeEventListener("scroll", d), m.disconnect(), cancelAnimationFrame(i);
+    window.addEventListener("scroll", handleScroll);
+    resizeObserver.observe(container);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+      cancelAnimationFrame(animationFrameId);
     };
-  }, [e, r]), t;
+  }, [relativePath, counter]);
+  return containerRef;
 };
-function T() {
-  const { columns: e, examples: r, selectedExamplePath: t, random: a } = U(), o = V(t, a);
-  return /* @__PURE__ */ n("div", { ref: o, className: k.root, style: { "--columns": e }, children: r.map((l) => /* @__PURE__ */ n(M, { example: l }, l.relativePath)) });
+function ComponentGallery() {
+  const { columns, examples, selectedExamplePath, random } = useComponentGalleryParams();
+  const ref = useScrollToExampleCard(selectedExamplePath, random);
+  return /* @__PURE__ */ jsx("div", { ref, className: styles$1.componentGallery, style: { "--columns": columns }, children: examples.map((example) => /* @__PURE__ */ jsx(ExampleCard, { example }, example.relativePath)) });
 }
 export {
-  T as default
+  ComponentGallery as default
 };

package/dist/styles.css

@@ -1 +1,105 @@
-._section_omose_1{margin-bottom:32px}._section_omose_1:last-child{margin-bottom:0}._sectionTitle_omose_9{margin-bottom:16px;font-weight:700;font-size:12px;color:light-dark(#666,#999);text-transform:uppercase;letter-spacing:.05em}._sectionContentColumn_omose_18{display:flex;flex-direction:column;gap:16px}._sectionContentRow_omose_24{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px}._root_segk4_1{display:grid;gap:16px;padding:16px;grid-template-columns:repeat(var(--columns, 1),minmax(0,1fr))}._root_segk4_1>*{scroll-margin:16px}._card_krcb2_1{border-radius:8px;padding:16px;display:flex;flex-direction:column;background-color:light-dark(#fff,#222);overflow:auto}._cardHeader_krcb2_10{margin-bottom:16px;font-weight:700;font-size:12px;color:light-dark(#666,#999);text-transform:uppercase;letter-spacing:.05em}._cardContent_krcb2_19{flex:1}._loadingState_krcb2_23{display:flex;align-items:center;justify-content:center;padding:0 32px 32px}._spinner_krcb2_30{width:24px;height:24px;border:2px solid light-dark(#eee,#444);border-top-color:light-dark(#999,#888);border-radius:50%;animation:_spin_krcb2_30 1s linear infinite}@keyframes _spin_krcb2_30{to{transform:rotate(360deg)}}._errorState_krcb2_45{padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:light-dark(#ce2c31,#ec5d5e)}._errorIcon_krcb2_56{font-size:32px}._errorMessage_krcb2_60{border-radius:4px;overflow-wrap:break-word;font-weight:400;font-size:14px}
+.section {
+  margin-bottom: 32px;
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+.sectionTitle {
+  margin-bottom: 16px;
+  font: bold 12px/1.5 system-ui;
+  color: light-dark(#666, #999);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.sectionContentColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sectionContentRow {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+}
+html,
+body {
+  overscroll-behavior: none;
+  background-color: light-dark(#f3f3f3, #151515);
+}
+
+.componentGallery {
+  display: grid;
+  gap: 16px;
+  padding: 16px;
+  grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
+
+  & > * {
+    /** Give extra space to example cards when scrolling programmatically. */
+    scroll-margin: 16px;
+  }
+}
+.exampleCard {
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  background-color: light-dark(#fff, #222);
+  overflow: auto;
+}
+
+.exampleCardHeader {
+  margin-bottom: 16px;
+  font: bold 12px/1.5 system-ui;
+  color: light-dark(#666, #999);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.exampleCardContent {
+}
+
+.exampleCardLoading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 32px 32px 32px;
+}
+
+.exampleCardSpinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid light-dark(#eee, #444);
+  border-top-color: light-dark(#999, #888);
+  border-radius: 50%;
+  animation: exampleCardSpin 1s linear infinite;
+}
+
+.exampleCardError {
+  padding: 32px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: center;
+  color: light-dark(#ce2c31, #ec5d5e);
+}
+
+.exampleCardErrorIcon {
+  font: 32px/1.5 system-ui;
+}
+
+.exampleCardErrorMessage {
+  font: 14px/1.5 system-ui;
+  overflow-wrap: break-word;
+}
+
+@keyframes exampleCardSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dazl/component-gallery",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "View your components in a gallery inside Dazl",
   "author": "Dazl",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "directory": "packages/component-gallery"
   },
   "dependencies": {
-    "zod": ">=4.0.0"
+    "zod": "^4.3.6"
   },
   "peerDependencies": {
     "react": ">=19.0.0"

package/src/example/example.module.css

@@ -8,8 +8,7 @@
 
 .sectionTitle {
   margin-bottom: 16px;
-  font-weight: bold;
-  font-size: 12px;
+  font: bold 12px/1.5 system-ui;
   color: light-dark(#666, #999);
   text-transform: uppercase;
   letter-spacing: 0.05em;

package/src/example/example.tsx

@@ -1,18 +1,34 @@
+import { Children, isValidElement, type ReactNode } from 'react';
+
 import styles from './example.module.css';
 
 export interface SectionProps {
-    title?: string;
     layout?: 'row' | 'column';
     children: React.ReactNode;
 }
 
-export const Section = ({ title, layout = 'column', children }: SectionProps) => {
+export const Section = ({ layout = 'column', children }: SectionProps) => {
+    const { title, content } = extractTitle(children);
+
     return (
         <section className={styles.section}>
-            {title ? <div className={styles.sectionTitle}>{title}</div> : null}
+            {title}
             <div className={layout === 'column' ? styles.sectionContentColumn : styles.sectionContentRow}>
-                {children}
+                {content}
             </div>
         </section>
     );
 };
+
+const SectionTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <div className={styles.sectionTitle}>{children}</div>
+);
+
+Section.Title = SectionTitle;
+
+const extractTitle = (children: ReactNode): { title: ReactNode; content: ReactNode } => {
+    const [title, ...content] = Children.toArray(children);
+    return isValidElement(title) && title.type === SectionTitle
+        ? { title, content }
+        : { title: null, content: children };
+};

package/src/route/component-gallery.module.css

@@ -1,10 +1,17 @@
-.root {
+html,
+body {
+  overscroll-behavior: none;
+  background-color: light-dark(#f3f3f3, #151515);
+}
+
+.componentGallery {
   display: grid;
   gap: 16px;
   padding: 16px;
   grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
-}
 
-.root > * {
-  scroll-margin: 16px;
+  & > * {
+    /** Give extra space to example cards when scrolling programmatically. */
+    scroll-margin: 16px;
+  }
 }

package/src/route/component-gallery.tsx

@@ -9,7 +9,7 @@ export default function ComponentGallery() {
     const ref = useScrollToExampleCard(selectedExamplePath, random);
 
     return (
-        <div ref={ref} className={styles.root} style={{ '--columns': columns } as CSSProperties}>
+        <div ref={ref} className={styles.componentGallery} style={{ '--columns': columns } as CSSProperties}>
             {examples.map((example) => (
                 <ExampleCard key={example.relativePath} example={example} />
             ))}

package/src/route/example-card.module.css

@@ -1,4 +1,4 @@
-.card {
+.exampleCard {
   border-radius: 8px;
   padding: 16px;
   display: flex;
@@ -7,59 +7,53 @@
   overflow: auto;
 }
 
-.cardHeader {
+.exampleCardHeader {
   margin-bottom: 16px;
-  font-weight: bold;
-  font-size: 12px;
+  font: bold 12px/1.5 system-ui;
   color: light-dark(#666, #999);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
-.cardContent {
-  flex: 1;
+.exampleCardContent {
 }
 
-.loadingState {
+.exampleCardLoading {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 32px 32px 32px;
 }
 
-.spinner {
+.exampleCardSpinner {
   width: 24px;
   height: 24px;
   border: 2px solid light-dark(#eee, #444);
   border-top-color: light-dark(#999, #888);
   border-radius: 50%;
-  animation: spin 1s linear infinite;
+  animation: exampleCardSpin 1s linear infinite;
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.errorState {
-  padding: 32px;
+.exampleCardError {
+  padding: 32px 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   gap: 8px;
   text-align: center;
   color: light-dark(#ce2c31, #ec5d5e);
 }
 
-.errorIcon {
-  font-size: 32px;
+.exampleCardErrorIcon {
+  font: 32px/1.5 system-ui;
 }
 
-.errorMessage {
-  border-radius: 4px;
+.exampleCardErrorMessage {
+  font: 14px/1.5 system-ui;
   overflow-wrap: break-word;
-  font-weight: 400;
-  font-size: 14px;
+}
+
+@keyframes exampleCardSpin {
+  to {
+    transform: rotate(360deg);
+  }
 }

package/src/route/example-card.tsx

@@ -7,37 +7,37 @@ interface ExampleCardProps {
     example: ComponentExampleInfo;
 }
 
-export const ExampleCard = memo(function ExampleCard({ example }: ExampleCardProps) {
+export const ExampleCard = memo(function Example({ example }: ExampleCardProps) {
     const [Component] = useState(() => lazy(() => import(/* @vite-ignore */ `/${example.relativePath}`)));
     const contentRef = useLinkBehaviorOverride();
 
     return (
-        <div id={example.relativePath} className={styles.card}>
-            <h3 className={styles.cardHeader}>{example.displayName}</h3>
-            <div ref={contentRef} className={styles.cardContent}>
-                <ErrorBoundary fallback={(error) => <ErrorState error={error} />}>
-                    <Suspense fallback={<LoadingState />}>
+        <div id={example.relativePath} className={styles.exampleCard}>
+            <h3 className={styles.exampleCardHeader}>{example.displayName}</h3>
+            <ErrorBoundary fallback={(error) => <ExampleCardError error={error} />}>
+                <Suspense fallback={<ExampleCardLoading />}>
+                    <div ref={contentRef} className={styles.exampleCardContent}>
                         <Component />
-                    </Suspense>
-                </ErrorBoundary>
-            </div>
+                    </div>
+                </Suspense>
+            </ErrorBoundary>
         </div>
     );
 });
 
-const LoadingState = () => {
+const ExampleCardLoading = () => {
     return (
-        <div className={styles.loadingState}>
-            <div className={styles.spinner} />
+        <div className={styles.exampleCardLoading}>
+            <div className={styles.exampleCardSpinner} />
         </div>
     );
 };
 
-const ErrorState = ({ error }: { error: Error }) => {
+const ExampleCardError = ({ error }: { error: Error }) => {
     return (
-        <div className={styles.errorState}>
-            <span className={styles.errorIcon}>⚠</span>
-            <span className={styles.errorMessage}>{error.message}</span>
+        <div className={styles.exampleCardError}>
+            <span className={styles.exampleCardErrorIcon}>⚠</span>
+            <span className={styles.exampleCardErrorMessage}>{error.message}</span>
         </div>
     );
 };