@morphika/andami 0.5.0 → 0.5.2

package/sanity/schemas/blocks/marqueeBlock.ts

@@ -0,0 +1,292 @@
+import { defineField, defineType } from "sanity";
+import { blockLayoutField, blockAnimationFields } from "./blockLayout";
+
+/**
+ * marqueeBlock — horizontal infinite-scroll ticker.
+ *
+ * Signature portfolio element. Supports mixed content (text, images,
+ * separators) scrolling horizontally at a configurable speed, with
+ * pause-on-hover and a hollow-text "outline" typography option for the
+ * classic portfolio look.
+ *
+ * Treated as a **section-level block** (same semantics as
+ * projectGridBlock / projectCarouselBlock): lives inside a full-width
+ * column of a pageSectionV2 and is added via the "+ Add Section" modal,
+ * not the "+ Add Block" picker. Unlike the two project-related section
+ * blocks, Marquee is available on **both pages and projects** — the
+ * "AVAILABLE FOR WORK" band fits naturally on `/work/[slug]` too.
+ *
+ * Performance: the renderer uses pure CSS @keyframes + IntersectionObserver
+ * to pause the animation when off-screen. Zero JS in the hot path, zero
+ * CPU off-screen. Respects `prefers-reduced-motion`.
+ *
+ * Hover effects deliberately disabled (enterPresets only): a block that
+ * is already moving doesn't benefit from scale/tilt hover effects — would
+ * fight the motion.
+ */
+export const marqueeBlock = defineType({
+  name: "marqueeBlock",
+  title: "Marquee",
+  type: "object",
+  fields: [
+    // ─── Content (items array) ────────────────────────────────
+    defineField({
+      name: "items",
+      title: "Items",
+      type: "array",
+      description:
+        "Ordered list of text, images and separators. They repeat in order indefinitely as the marquee scrolls.",
+      of: [
+        {
+          type: "object",
+          name: "marqueeText",
+          title: "Text",
+          fields: [
+            defineField({
+              name: "text",
+              title: "Text",
+              type: "string",
+              validation: (Rule) => Rule.required().min(1),
+            }),
+          ],
+          preview: {
+            select: { title: "text" },
+            prepare: ({ title }: { title?: string }) => ({
+              title: title || "(empty text)",
+              subtitle: "Text",
+            }),
+          },
+        },
+        {
+          type: "object",
+          name: "marqueeImage",
+          title: "Image",
+          fields: [
+            defineField({
+              name: "asset_path",
+              title: "Asset path",
+              type: "string",
+              description: "Relative path to the image file",
+              validation: (Rule) => Rule.required(),
+            }),
+            defineField({
+              name: "alt",
+              title: "Alt text",
+              type: "string",
+            }),
+            defineField({
+              name: "border_radius",
+              title: "Border radius (px)",
+              type: "number",
+              initialValue: 0,
+              validation: (Rule) => Rule.min(0).max(200),
+            }),
+            defineField({
+              name: "width",
+              title: "Width (px)",
+              type: "number",
+              description:
+                "Fixed width. Leave empty to derive from the row height and image aspect ratio.",
+              validation: (Rule) => Rule.min(16).max(1200),
+            }),
+          ],
+          preview: {
+            select: { title: "alt", subtitle: "asset_path" },
+            prepare: ({ title, subtitle }: { title?: string; subtitle?: string }) => ({
+              title: title || "(no alt)",
+              subtitle: `Image · ${subtitle || "no asset"}`,
+            }),
+          },
+        },
+        {
+          type: "object",
+          name: "marqueeSeparator",
+          title: "Separator",
+          fields: [
+            defineField({
+              name: "character",
+              title: "Character",
+              type: "string",
+              description:
+                "Any character (or emoji) used as a divider. Common: • · — / ▸ ★",
+              initialValue: "•",
+              validation: (Rule) => Rule.required().min(1).max(4),
+            }),
+          ],
+          preview: {
+            select: { title: "character" },
+            prepare: ({ title }: { title?: string }) => ({
+              title: title || "•",
+              subtitle: "Separator",
+            }),
+          },
+        },
+      ],
+    }),
+
+    // ─── Motion ───────────────────────────────────────────────
+    defineField({
+      name: "direction",
+      title: "Direction",
+      type: "string",
+      description: "Horizontal scroll direction",
+      options: {
+        list: [
+          { title: "Left →", value: "left" },
+          { title: "← Right", value: "right" },
+        ],
+      },
+      initialValue: "left",
+    }),
+    defineField({
+      name: "speed",
+      title: "Speed (px/s)",
+      type: "number",
+      description:
+        "Scroll speed in pixels per second. Decouples from content length (a 20s loop feels radically different with 10 items vs 100).",
+      initialValue: 60,
+      validation: (Rule) => Rule.min(5).max(600),
+    }),
+    defineField({
+      name: "pause_on_hover",
+      title: "Pause on hover",
+      type: "boolean",
+      initialValue: true,
+    }),
+
+    // ─── Typography (text + separator items) ──────────────────
+    defineField({
+      name: "font_size",
+      title: "Font size",
+      type: "string",
+      description: "Size scale for text and separator items",
+      options: {
+        list: [
+          { title: "S", value: "s" },
+          { title: "Base", value: "base" },
+          { title: "L", value: "l" },
+          { title: "XL", value: "xl" },
+          { title: "2XL", value: "2xl" },
+          { title: "3XL", value: "3xl" },
+          { title: "4XL", value: "4xl" },
+          { title: "5XL", value: "5xl" },
+          { title: "6XL", value: "6xl" },
+        ],
+      },
+      initialValue: "3xl",
+    }),
+    defineField({
+      name: "font_weight",
+      title: "Font weight",
+      type: "string",
+      options: {
+        list: [
+          { title: "Normal", value: "400" },
+          { title: "Medium", value: "500" },
+          { title: "Bold", value: "700" },
+          { title: "Black", value: "900" },
+        ],
+      },
+      initialValue: "700",
+    }),
+    defineField({
+      name: "color",
+      title: "Text color",
+      type: "string",
+      description: "Hex or palette token",
+      initialValue: "#111111",
+    }),
+    defineField({
+      name: "text_style",
+      title: "Text style",
+      type: "string",
+      description:
+        "Outline renders hollow text via -webkit-text-stroke — the classic portfolio signature look.",
+      options: {
+        list: [
+          { title: "Solid", value: "solid" },
+          { title: "Outline (hollow)", value: "outline" },
+          { title: "Italic outline", value: "italic-outline" },
+        ],
+      },
+      initialValue: "solid",
+    }),
+    defineField({
+      name: "letter_spacing",
+      title: "Letter spacing (em)",
+      type: "number",
+      description: "Extra tracking between letters — in em units",
+      initialValue: 0,
+      validation: (Rule) => Rule.min(-0.1).max(0.5),
+    }),
+    defineField({
+      name: "text_transform",
+      title: "Text transform",
+      type: "string",
+      options: {
+        list: [
+          { title: "None", value: "none" },
+          { title: "UPPERCASE", value: "uppercase" },
+          { title: "lowercase", value: "lowercase" },
+        ],
+      },
+      initialValue: "uppercase",
+    }),
+
+    // ─── Layout ───────────────────────────────────────────────
+    defineField({
+      name: "gap",
+      title: "Gap between items (px)",
+      type: "number",
+      initialValue: 48,
+      validation: (Rule) => Rule.min(0).max(200),
+    }),
+    defineField({
+      name: "row_height",
+      title: "Row height (px)",
+      type: "number",
+      description: "Height of the marquee band. Determines image item height.",
+      initialValue: 120,
+      validation: (Rule) => Rule.min(24).max(600),
+    }),
+    defineField({
+      name: "padding_y",
+      title: "Vertical padding (px)",
+      type: "number",
+      initialValue: 16,
+      validation: (Rule) => Rule.min(0).max(200),
+    }),
+    defineField({
+      name: "background_color",
+      title: "Background color",
+      type: "string",
+      description: "Hex or palette token. Leave empty for transparent.",
+    }),
+
+    // ─── Standard block fields ────────────────────────────────
+    ...blockAnimationFields,
+    blockLayoutField,
+  ],
+  preview: {
+    select: {
+      direction: "direction",
+      speed: "speed",
+      items: "items",
+    },
+    prepare: ({
+      direction,
+      speed,
+      items,
+    }: {
+      direction?: string;
+      speed?: number;
+      items?: unknown[];
+    }) => {
+      const count = Array.isArray(items) ? items.length : 0;
+      const arrow = direction === "right" ? "←" : "→";
+      return {
+        title: `Marquee (${count} items ${arrow} ${speed ?? 60}px/s)`,
+      };
+    },
+  },
+});

package/sanity/schemas/index.ts

@@ -1,111 +1,120 @@
-import page from "./page";
-import pageSectionV2 from "./pageSectionV2";
-import customSection from "./customSection";
-import customSectionInstance from "./customSectionInstance";
-import siteSettings from "./siteSettings";
-import siteStyles from "./siteStyles";
-import assetRegistry from "./assetRegistry";
-import enterAnimationConfig from "./objects/enterAnimationConfig";
-import hoverEffectConfig from "./objects/hoverEffectConfig";
-import typewriterConfig from "./objects/typewriterConfig";
-import parallaxSlide from "./objects/parallaxSlide";
-import parallaxGroup from "./objects/parallaxGroup";
-import coverSection from "./objects/coverSection";
-import {
-  textBlock,
-  imageBlock,
-  imageGridBlock,
-  videoBlock,
-  spacerBlock,
-  buttonBlock,
-  projectGridBlock,
-  projectCarouselBlock,
-} from "./blocks";
-
-// Re-export individual schemas for granular use by instances
-export {
-  default as page,
-} from "./page";
-export {
-  default as siteSettings,
-} from "./siteSettings";
-export {
-  default as siteStyles,
-} from "./siteStyles";
-export {
-  default as assetRegistry,
-} from "./assetRegistry";
-export {
-  default as pageSectionV2,
-} from "./pageSectionV2";
-export {
-  default as customSection,
-} from "./customSection";
-export {
-  default as customSectionInstance,
-} from "./customSectionInstance";
-export {
-  default as enterAnimationConfig,
-} from "./objects/enterAnimationConfig";
-export {
-  default as hoverEffectConfig,
-} from "./objects/hoverEffectConfig";
-export {
-  default as typewriterConfig,
-} from "./objects/typewriterConfig";
-export {
-  default as parallaxSlide,
-} from "./objects/parallaxSlide";
-export {
-  default as parallaxGroup,
-} from "./objects/parallaxGroup";
-export {
-  default as coverSection,
-} from "./objects/coverSection";
-export {
-  textBlock,
-  imageBlock,
-  imageGridBlock,
-  videoBlock,
-  spacerBlock,
-  buttonBlock,
-  projectGridBlock,
-  projectCarouselBlock,
-} from "./blocks";
-
-export const schemaTypes = [
-  // Documents
-  page,
-  siteSettings,
-  siteStyles,
-  assetRegistry,
-
-  // Structural objects
-  pageSectionV2,
-  customSection,
-  customSectionInstance,
-
-  // Reusable objects
-  enterAnimationConfig,     // Enter animation system (Session 117)
-  hoverEffectConfig,        // Unified hover effect system (Session 117)
-  typewriterConfig,         // Typewriter config for textBlock (Session 117)
-  parallaxSlide,            // Parallax V2 slide (Session 123)
-  parallaxGroup,            // Parallax V2 group (Session 123)
-  coverSection,             // Cover Section — proportional rows (Session 176)
-
-  // Blocks (9)
-  textBlock,
-  imageBlock,
-  imageGridBlock,
-  videoBlock,
-  spacerBlock,
-  buttonBlock,
-  projectGridBlock,
-  projectCarouselBlock,
-];
-
-/**
- * Named alias for instance consumption.
- * Instances import this and pass to composeSchemas().
- */
-export const coreSchemas = schemaTypes;
+import page from "./page";
+import pageSectionV2 from "./pageSectionV2";
+import customSection from "./customSection";
+import customSectionInstance from "./customSectionInstance";
+import siteSettings from "./siteSettings";
+import siteStyles from "./siteStyles";
+import assetRegistry from "./assetRegistry";
+import enterAnimationConfig from "./objects/enterAnimationConfig";
+import hoverEffectConfig from "./objects/hoverEffectConfig";
+import typewriterConfig from "./objects/typewriterConfig";
+import parallaxSlide from "./objects/parallaxSlide";
+import parallaxGroup from "./objects/parallaxGroup";
+import coverSection from "./objects/coverSection";
+import {
+  textBlock,
+  imageBlock,
+  imageGridBlock,
+  videoBlock,
+  spacerBlock,
+  buttonBlock,
+  beforeAfterBlock,
+  audioBlock,
+  projectGridBlock,
+  projectCarouselBlock,
+  marqueeBlock,
+} from "./blocks";
+
+// Re-export individual schemas for granular use by instances
+export {
+  default as page,
+} from "./page";
+export {
+  default as siteSettings,
+} from "./siteSettings";
+export {
+  default as siteStyles,
+} from "./siteStyles";
+export {
+  default as assetRegistry,
+} from "./assetRegistry";
+export {
+  default as pageSectionV2,
+} from "./pageSectionV2";
+export {
+  default as customSection,
+} from "./customSection";
+export {
+  default as customSectionInstance,
+} from "./customSectionInstance";
+export {
+  default as enterAnimationConfig,
+} from "./objects/enterAnimationConfig";
+export {
+  default as hoverEffectConfig,
+} from "./objects/hoverEffectConfig";
+export {
+  default as typewriterConfig,
+} from "./objects/typewriterConfig";
+export {
+  default as parallaxSlide,
+} from "./objects/parallaxSlide";
+export {
+  default as parallaxGroup,
+} from "./objects/parallaxGroup";
+export {
+  default as coverSection,
+} from "./objects/coverSection";
+export {
+  textBlock,
+  imageBlock,
+  imageGridBlock,
+  videoBlock,
+  spacerBlock,
+  buttonBlock,
+  beforeAfterBlock,
+  audioBlock,
+  projectGridBlock,
+  projectCarouselBlock,
+  marqueeBlock,
+} from "./blocks";
+
+export const schemaTypes = [
+  // Documents
+  page,
+  siteSettings,
+  siteStyles,
+  assetRegistry,
+
+  // Structural objects
+  pageSectionV2,
+  customSection,
+  customSectionInstance,
+
+  // Reusable objects
+  enterAnimationConfig,     // Enter animation system (Session 117)
+  hoverEffectConfig,        // Unified hover effect system (Session 117)
+  typewriterConfig,         // Typewriter config for textBlock (Session 117)
+  parallaxSlide,            // Parallax V2 slide (Session 123)
+  parallaxGroup,            // Parallax V2 group (Session 123)
+  coverSection,             // Cover Section — proportional rows (Session 176)
+
+  // Blocks (11)
+  textBlock,
+  imageBlock,
+  imageGridBlock,
+  videoBlock,
+  spacerBlock,
+  buttonBlock,
+  beforeAfterBlock,
+  audioBlock,
+  projectGridBlock,
+  projectCarouselBlock,
+  marqueeBlock,
+];
+
+/**
+ * Named alias for instance consumption.
+ * Instances import this and pass to composeSchemas().
+ */
+export const coreSchemas = schemaTypes;