fix: zindexes

apps/web/components/ui/preview-notification.tsx

@@ -35,7 +35,7 @@ function PreviewNotificationContent() {
         bottom: 0,
         left: 0,
         right: 0,
-        zIndex: 9999,
+        zIndex: "preview",
         backgroundColor: "warning.200",
         color: "black",
         padding: 3,

apps/web/components/widgets/now-playing-widget.tsx

@@ -2,6 +2,7 @@
 
 import { trackNowPlayingClick } from "@httpjpg/analytics";
 import { NowPlaying, useNowPlaying } from "@httpjpg/now-playing";
+import { zIndex } from "@httpjpg/tokens";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
@@ -31,24 +32,36 @@ function NowPlayingWidgetComponent() {
   };
 
   const content = (
-    <button type="button" onClick={handleClick} style={{ all: "unset" }}>
-      <NowPlaying
-        title={isLoading ? "Loading..." : data?.title || "╱╱ #welovemusic ╱╱"}
-        artist={
-          isLoading ? "..." : data?.artist || "⋄ ⋄ ⋄ (spotify(none)) ⋄ ⋄ ⋄"
-        }
-        artwork={
-          data?.artwork ||
-          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect fill='%23a3a3a3' width='100' height='100'/%3E%3Ctext x='50' y='50' font-family='monospace' font-size='40' text-anchor='middle' dy='.3em' fill='white'%3E♪%3C/text%3E%3C/svg%3E"
-        }
-        isPlaying={data?.isPlaying || false}
-        isLoading={isLoading}
-        autoExtractColor={!!data && !isLoading}
-        vibrantColor={
-          !data || isLoading ? "rgba(163, 163, 163, 0.6)" : undefined
-        }
-        textColor={!data || isLoading ? "white" : undefined}
-      />
+    <button
+      type="button"
+      onClick={handleClick}
+      style={{
+        all: "unset",
+        position: "fixed",
+        inset: 0,
+        pointerEvents: "none",
+        zIndex: zIndex.floating,
+      }}
+    >
+      <div style={{ pointerEvents: "auto" }}>
+        <NowPlaying
+          title={isLoading ? "Loading..." : data?.title || "╱╱ #welovemusic ╱╱"}
+          artist={
+            isLoading ? "..." : data?.artist || "⋄ ⋄ ⋄ (spotify(none)) ⋄ ⋄ ⋄"
+          }
+          artwork={
+            data?.artwork ||
+            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect fill='%23a3a3a3' width='100' height='100'/%3E%3Ctext x='50' y='50' font-family='monospace' font-size='40' text-anchor='middle' dy='.3em' fill='white'%3E♪%3C/text%3E%3C/svg%3E"
+          }
+          isPlaying={data?.isPlaying || false}
+          isLoading={isLoading}
+          autoExtractColor={!!data && !isLoading}
+          vibrantColor={
+            !data || isLoading ? "rgba(163, 163, 163, 0.6)" : undefined
+          }
+          textColor={!data || isLoading ? "white" : undefined}
+        />
+      </div>
     </button>
   );
 

apps/web/components/widgets/psn-card.tsx

@@ -38,7 +38,7 @@ export const PSNCard = ({ username }: PSNCardProps) => {
         position: "fixed",
         top: 0,
         left: 0,
-        zIndex: 40,
+        zIndex: "widget",
         width: "250px",
         display: "none",
         lg: {

packages/consent/src/components/cookie-banner.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { zIndex } from "@httpjpg/tokens";
 import { Box, Button } from "@httpjpg/ui";
 import { useEffect, useState } from "react";
 import { getConsent, hasConsent, setConsent } from "../consent";
@@ -117,7 +118,7 @@ export function CookieBanner({
         bottom: 0,
         left: 0,
         right: 0,
-        zIndex: 99999,
+        zIndex: zIndex.cookieBanner,
         backgroundColor: "white",
         color: "black",
         padding: "24px 16px",

packages/now-playing/src/now-playing-loading.tsx

@@ -89,7 +89,6 @@ export const NowPlayingLoading = ({
           width: config.width,
           height: config.height,
           cursor: "grab",
-          zIndex: 9999,
           touchAction: "none",
           userSelect: "none",
           ...style,

packages/now-playing/src/now-playing.tsx

@@ -285,7 +285,6 @@ export const NowPlaying = ({
             width: config.width,
             height: config.height,
             cursor: "grab",
-            zIndex: 9999,
             touchAction: "none",
             userSelect: "none",
           }}

packages/storyblok-ui/src/components/work-list/SbWorkList.tsx

@@ -1,13 +1,9 @@
 "use client";
 
-// TODO: Fix Storyblok component registration
-// This component exists in code but throws "Component work-list doesn't exist" in CMS
-// Need to run: pnpm --filter @httpjpg/storyblok-sync run sync
-// Or manually create component in Storyblok dashboard
-
 import { renderStoryblokRichText } from "@httpjpg/storyblok-richtext";
 import { WorkList } from "@httpjpg/ui";
-import { memo } from "react";
+import { memo, type ReactNode, useRef } from "react";
+import { mapColorToToken } from "../../lib/token-mapping";
 import { useStoryblokEditable } from "../../lib/use-storyblok-editable";
 
 export interface SbWorkListProps {
@@ -39,6 +35,11 @@ export interface SbWorkListProps {
           };
         }
     >; // Array of story UUIDs or resolved stories
+    gap?: number;
+    showDividers?: boolean;
+    dividerPattern?: string;
+    dividerColor?: string;
+    dividerSpacing?: string;
   };
   /**
    * Base URL for work links
@@ -56,63 +57,147 @@ export const SbWorkList = memo(function SbWorkList({
   baseUrl = "/work",
 }: SbWorkListProps) {
   const editableProps = useStoryblokEditable(blok);
-  const { work } = blok;
+  const lastWorkItemsRef = useRef<any[]>([]);
+
+  const {
+    work,
+    gap,
+    showDividers,
+    dividerPattern,
+    dividerColor,
+    dividerSpacing,
+  } = blok || {};
+  const showDividersValue = showDividers === true;
 
-  // Filter out UUIDs and only keep resolved stories (objects)
+  // Filter out UUIDs and only keep resolved stories
   const workStories = (work || []).filter(
-    (item): item is Exclude<typeof item, string> => typeof item === "object",
+    (item): item is Exclude<typeof item, string> =>
+      item != null && typeof item === "object" && "slug" in item,
   );
 
+  // Use cached items during Storyblok reload (Visual Editor stability)
   if (!workStories || workStories.length === 0) {
-    return null;
+    if (lastWorkItemsRef.current.length > 0 && work && work.length > 0) {
+      return (
+        <div {...editableProps} key={blok._uid}>
+          <WorkList
+            works={lastWorkItemsRef.current}
+            gap={gap}
+            showDividers={showDividersValue}
+            dividerProps={
+              showDividersValue
+                ? {
+                    variant: "ascii",
+                    pattern: dividerPattern || "⋆｡°✩ ･ ✦ ･ ✧ ･ ✦ ･ ✩°｡⋆",
+                    color: mapColorToToken(dividerColor) || "neutral.200",
+                    spacing: dividerSpacing || "3",
+                  }
+                : undefined
+            }
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div {...editableProps} key={blok._uid}>
+        <div
+          style={{
+            padding: "1rem",
+            border: "2px dashed #ccc",
+            textAlign: "center",
+          }}
+        >
+          No work items selected. Add work items in Storyblok.
+        </div>
+      </div>
+    );
   }
 
   // Transform Storyblok work data to WorkList format
-  const workItems = workStories.map((item) => {
-    // Use date_end if exists (for events/exhibitions with timespan),
-    // otherwise use date field, fallback to first_published_at
-    const dateString =
-      item.content?.date_end ||
-      item.content?.date ||
-      item.first_published_at ||
-      item.published_at ||
-      item.created_at;
+  const workItems = workStories
+    .map((item) => {
+      if (!item.slug) return null;
 
-    // Render rich text description if available
-    const description = item.content?.description
-      ? renderStoryblokRichText(item.content.description)
-      : undefined;
+      const dateString =
+        item.content?.date_end ||
+        item.content?.date ||
+        item.first_published_at ||
+        item.published_at ||
+        item.created_at ||
+        new Date().toISOString();
+
+      let description: ReactNode;
+      if (item.content?.description) {
+        try {
+          description = renderStoryblokRichText(item.content.description);
+        } catch {
+          // Silently fail - description is optional
+        }
+      }
 
-    return {
-      id: item.slug,
-      slug: item.slug,
-      title: item.content?.title || item.name,
-      description,
-      images: (item.content?.images || []).map((img) => {
-        // Check content_type first (for Storyblok assets)
-        const hasVideoContentType = img.content_type?.startsWith("video/");
-        // Fallback: Check file extension (for external URLs)
-        const hasVideoExtension = /\.(mp4|webm|ogg|mov|avi|mkv)(\?|$)/i.test(
-          img.filename || "",
-        );
-        const isVideo = hasVideoContentType || hasVideoExtension;
+      return {
+        id: item.slug,
+        slug: item.slug,
+        title: item.content?.title || item.name || "Untitled",
+        description,
+        images: (item.content?.images || [])
+          .filter((img) => img?.filename)
+          .map((img) => {
+            const hasVideoContentType = img.content_type?.startsWith("video/");
+            const hasVideoExtension =
+              /\.(mp4|webm|ogg|mov|avi|mkv)(\?|$)/i.test(img.filename || "");
+            const isVideo = hasVideoContentType || hasVideoExtension;
 
-        return {
-          url: isVideo ? "" : img.filename || "",
-          alt: img.alt || item.content?.title || item.name,
-          copyright: img.copyright,
-          focus: img.focus,
-          videoUrl: isVideo ? img.filename : undefined,
-        };
-      }),
-      date: dateString,
-      baseUrl,
-    };
-  });
+            return {
+              url: isVideo ? "" : img.filename || "",
+              alt: img.alt || item.content?.title || item.name || "Image",
+              copyright: img.copyright,
+              focus: img.focus,
+              videoUrl: isVideo ? img.filename : undefined,
+            };
+          }),
+        date: dateString,
+        baseUrl,
+      };
+    })
+    .filter((item): item is NonNullable<typeof item> => item !== null);
+
+  if (workItems.length === 0) {
+    return (
+      <div {...editableProps} key={blok._uid}>
+        <div
+          style={{
+            padding: "1rem",
+            border: "2px dashed #f00",
+            textAlign: "center",
+          }}
+        >
+          ⚠️ Error loading work items.
+        </div>
+      </div>
+    );
+  }
+
+  lastWorkItemsRef.current = workItems;
 
   return (
-    <div {...editableProps}>
-      <WorkList works={workItems} />
+    <div {...editableProps} key={blok._uid}>
+      <WorkList
+        works={workItems}
+        gap={gap}
+        showDividers={showDividersValue}
+        dividerProps={
+          showDividersValue
+            ? {
+                variant: "ascii",
+                pattern: dividerPattern || "⋆｡°✩ ･ ✦ ･ ✧ ･ ✦ ･ ✩°｡⋆",
+                color: mapColorToToken(dividerColor) || "neutral.200",
+                spacing: dividerSpacing || "3",
+              }
+            : undefined
+        }
+      />
     </div>
   );
 });

packages/tokens/src/index.ts

@@ -22,6 +22,7 @@ export {
   remToPx,
   responsiveSpacing,
 } from "./utils";
+export { type ZIndexKey, type ZIndexValue, zIndex } from "./z-index";
 
 import { borderRadius } from "./border-radius";
 import { colors } from "./colors";
@@ -31,6 +32,7 @@ import { sizes } from "./sizes";
 import { spacing } from "./spacing";
 import { transitions } from "./transitions";
 import { typography } from "./typography";
+import { zIndex } from "./z-index";
 
 /**
  * Complete design tokens object
@@ -50,6 +52,7 @@ export const tokens = {
   opacity,
   transitions,
   sizes,
+  zIndex,
 } as const;
 
 export type Tokens = typeof tokens;