@syscore/ui-library 1.7.8 → 1.9.0

package/client/ui/Panel.stories.tsx

@@ -2,8 +2,7 @@ import { LayoutGroup } from "motion/react";
 import { motion } from "motion/react";
 import { AnimatePresence } from "motion/react";
 import { getConceptColor } from "../lib/concept-colors";
-import { CodeBadge } from "../components/ui/code-badge";
-import { cn } from "../lib/utils";
+import { capitalize, cn } from "../lib/utils";
 import { Tag } from "../components/ui/tag";
 import { CONCEPT_ICONS } from "../lib/concept-icons";
 import { conceptColors } from "../lib/concept-colors";
@@ -12,326 +11,369 @@ import { useState } from "react";
 import { Label } from "../components/ui/label";
 import { Toggle } from "../components/ui/toggle";
 
-
 // Order of concepts for display
 const conceptOrder: ConceptSlug[] = [
-    "air",
-    "water",
-    "nourishment",
-    "light",
-    "movement",
-    "thermal-comfort",
-    "sound",
-    "materials",
-    "community",
-    "mind",
-    "innovation",
+  "air",
+  "water",
+  "nourishment",
+  "light",
+  "movement",
+  "thermal-comfort",
+  "sound",
+  "materials",
+  "community",
+  "mind",
+  "innovation",
 ];
 
-
 // Wrapper component that manages state and accepts initial values from args
 const ExploreSidePanelView = (args: any) => {
-    const { concepts,
-        themes,
-        strategies,
-        selectedConcept,
-        selectedTheme,
-        selectedStrategy,
-        onConceptClick,
-        onThemeClick,
-        onStrategyClick,
-        scope,
-        onScopeChange,
-        activePursuits,
-        onPursuitToggle, } = args;
-
-    // Local UI state (hover)
-    const [hoveredConcept, setHoveredConcept] = useState<ConceptSlug | null>(null);
-    const [hoveredTheme, setHoveredTheme] = useState<string | null>(null);
-    const [hoveredStrategy, setHoveredStrategy] = useState<string | null>(null);
-
-    // Derived data
-    const conceptsByKey = new Map(concepts.map((c) => [c.conceptKey, c]));
-    const activeColor = getConceptColor(selectedConcept || "community");
-
-
-    return (
-        <LayoutGroup>
-            <Card className="space-y-2 rounded-r-none pt-8 border-r-0">
-                {/* CONCEPT Section */}
-                <motion.section layout="position" className="flex flex-col gap-3">
-                    <Label className="px-2 text-gray-600 flex items-center  min-w-0">
-                        <span className="shrink-0 pr-1">CONCEPT</span>
-                        <AnimatePresence mode="wait">
-                            {hoveredConcept && (
-                                <motion.span
-                                    key={hoveredConcept}
-                                    initial={{ opacity: 0, x: -4 }}
-                                    animate={{ opacity: 1, x: 0 }}
-                                    exit={{ opacity: 0, x: 4 }}
-                                    transition={{ duration: 0.15 }}
-                                    className="truncate"
-                                    style={{ willChange: "opacity, transform" }}
-                                >
-                                    · {conceptsByKey.get(hoveredConcept)?.name.toUpperCase()}
-                                </motion.span>
-                            )}
-                        </AnimatePresence>
-                    </Label>
-
-                    <div className="grid grid-cols-3 lg:grid-cols-5 max-w-max gap-2">
-                        {conceptOrder.map((slug) => {
-                            const Icon = CONCEPT_ICONS[slug];
-                            const isSelected = selectedConcept === slug;
-                            const isHovered = hoveredConcept === slug;
-                            const isFilled = (isSelected && !selectedTheme) || isHovered;
-                            const isOutlined = isSelected && !!selectedTheme && !isHovered;
-                            const color = getConceptColor(slug);
-
-                            return (
-                                <button
-                                    key={slug}
-                                    onClick={() => onConceptClick(slug)}
-                                    onMouseEnter={() => setHoveredConcept(slug)}
-                                    onMouseLeave={() => setHoveredConcept(null)}
-                                    className="rounded-full transition-all duration-200 size-12 flex items-center justify-center cursor-pointer"
-                                    style={(() => {
-                                        if (isOutlined) {
-                                            return {
-                                                border: `3px solid ${color.contrast || color.solid}`,
-                                                backgroundColor: "white",
-                                            };
-                                        }
-                                        if (isFilled) {
-                                            return {
-                                                backgroundColor: color.contrast || color.solid,
-                                            };
-                                        }
-                                        return undefined;
-                                    })()}
-                                    aria-label={conceptsByKey.get(slug)?.name}
-                                >
-                                    <Icon active={isFilled} outlined={isOutlined} className="size-12" />
-                                </button>
-                            );
-                        })}
-                    </div>
-                </motion.section>
-
-                {/* THEME Section - Animated reveal */}
-                <AnimatePresence mode="wait">
-                    {themes.length > 0 && (
-                        <motion.section
-                            key="theme-section"
-                            layout="position"
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            transition={{ duration: 0.2 }}
-                            className="flex flex-col gap-3"
-                            style={{ willChange: "opacity" }}
-                        >
-                            <Label className="px-2 text-gray-600 flex items-center  min-w-0">
-                                <span className="shrink-0 pr-1">THEME</span>
-                                <AnimatePresence mode="wait">
-                                    {hoveredTheme && (
-                                        <motion.span
-                                            key={hoveredTheme}
-                                            initial={{ opacity: 0, x: -4 }}
-                                            animate={{ opacity: 1, x: 0 }}
-                                            exit={{ opacity: 0, x: 4 }}
-                                            transition={{ duration: 0.15 }}
-                                            className="truncate"
-                                            style={{ willChange: "opacity, transform" }}
-                                        >
-                                            · {themes.find((t) => t.code === hoveredTheme)?.name.toUpperCase()}
-                                        </motion.span>
-                                    )}
-                                </AnimatePresence>
-                            </Label>
-                            <div className="grid grid-cols-3 lg:grid-cols-5 max-w-max gap-2">
-                                {themes.map((theme) => {
-                                    const isSelected = selectedTheme === theme.code;
-                                    const isFilled = isSelected && !selectedStrategy;
-                                    const isOutlined = isSelected && !!selectedStrategy;
-
-                                    return (
-                                        <button
-                                            key={theme.code}
-                                            onClick={() => onThemeClick(theme.code)}
-                                            onMouseEnter={() => setHoveredTheme(theme.code)}
-                                            onMouseLeave={() => setHoveredTheme(null)}
-                                            className="cursor-pointer"
-                                        >
-                                            <CodeBadge
-                                                code={theme.code}
-                                                className={cn(
-                                                    !isSelected && "hover:border-blue-300"
-                                                )}
-                                                style={
-                                                    isFilled
-                                                        ? {
-                                                            backgroundColor: activeColor.contrast || activeColor.solid,
-                                                            borderColor: activeColor.contrast || activeColor.solid,
-                                                            color: "white",
-                                                            borderWidth: "3px",
-                                                        }
-                                                        : isOutlined
-                                                            ? {
-                                                                backgroundColor: "white",
-                                                                borderColor: activeColor.contrast || activeColor.solid,
-                                                                color: activeColor.contrast || activeColor.solid,
-                                                                borderWidth: "3px",
-                                                            }
-                                                            : !isSelected
-                                                                ? {
-                                                                    backgroundColor: "var(--color-blue-100)",
-                                                                    color: "var(--color-blue-600)",
-                                                                    borderColor: "var(--color-blue-100)",
-                                                                    borderWidth: "3px",
-                                                                }
-                                                                : {
-                                                                    borderWidth: "3px",
-                                                                }
-                                                }
-                                            />
-                                        </button>
-                                    );
-                                })}
-                            </div>
-                        </motion.section>
+  const {
+    concepts,
+    themes,
+    strategies,
+    selectedConcept,
+    selectedTheme,
+    selectedStrategy,
+    onConceptClick,
+    onThemeClick,
+    onStrategyClick,
+    scope,
+    onScopeChange,
+    activePursuits,
+    onPursuitToggle,
+  } = args;
+
+  // Local UI state (hover)
+  const [hoveredConcept, setHoveredConcept] = useState<ConceptSlug | null>(
+    null,
+  );
+  const [hoveredTheme, setHoveredTheme] = useState<string | null>(null);
+  const [hoveredStrategy, setHoveredStrategy] = useState<string | null>(null);
+
+  // Derived data
+  const conceptsByKey = new Map(concepts.map((c) => [c.conceptKey, c]));
+  const activeColor = getConceptColor(selectedConcept || "community");
+
+  return (
+    <LayoutGroup>
+      <Card className="space-y-2 rounded-r-none pt-8 border-r-0">
+        {/* CONCEPT Section */}
+        <motion.section layout="position" className="flex flex-col gap-3">
+          <div className="flex items-center min-w-0">
+            <Label className="pr-1">CONCEPT</Label>
+
+            <div className="relative min-w-0 flex-1 self-stretch">
+              <AnimatePresence mode="wait">
+                {hoveredConcept && (
+                  <motion.div
+                    key={hoveredConcept}
+                    initial={{ opacity: 0, x: -4 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: 4 }}
+                    transition={{ duration: 0.15 }}
+                    className="absolute top-1/2 -translate-y-1/2 left-0 right-0 body-small"
+                    style={{ willChange: "opacity, transform" }}
+                  >
+                    <span className="line-clamp-1">
+                      ·{" "}
+                      {capitalize(
+                        concepts.find((c) => c.conceptKey === hoveredConcept)
+                          ?.name ?? "",
+                      )}
+                    </span>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-3 lg:grid-cols-5 max-w-max gap-2">
+            {conceptOrder.map((slug) => {
+              const Icon = CONCEPT_ICONS[slug];
+              const isSelected = selectedConcept === slug;
+              const isHovered = hoveredConcept === slug;
+              const isFilled = (isSelected && !selectedTheme) || isHovered;
+              const isOutlined = isSelected && !!selectedTheme && !isHovered;
+              const color = getConceptColor(slug);
+
+              return (
+                <button
+                  key={slug}
+                  onClick={() => onConceptClick(slug)}
+                  onMouseEnter={() => setHoveredConcept(slug)}
+                  onMouseLeave={() => setHoveredConcept(null)}
+                  className="rounded-full transition-all duration-200 size-12 flex items-center justify-center cursor-pointer"
+                  style={(() => {
+                    if (isOutlined) {
+                      return {
+                        outline: `3px solid ${color.contrast || color.solid}`,
+                        outlineOffset: "-3px",
+                        backgroundColor: "white",
+                      };
+                    }
+                    if (isFilled) {
+                      return {
+                        backgroundColor: color.contrast || color.solid,
+                      };
+                    }
+                    return undefined;
+                  })()}
+                  aria-label={conceptsByKey.get(slug)?.name}
+                >
+                  <Icon
+                    active={isFilled}
+                    outlined={isOutlined}
+                    className="size-12"
+                  />
+                </button>
+              );
+            })}
+          </div>
+        </motion.section>
+
+        {/* THEME Section - Animated reveal */}
+        <AnimatePresence mode="wait">
+          {themes.length > 0 && (
+            <motion.section
+              key="theme-section"
+              layout="position"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="flex flex-col gap-3"
+              style={{ willChange: "opacity" }}
+            >
+              <div className="flex items-center min-w-0">
+                <Label className="pr-1">THEME</Label>
+
+                <div className="relative min-w-0 flex-1 self-stretch">
+                  <AnimatePresence mode="wait">
+                    {hoveredTheme && (
+                      <motion.div
+                        key={hoveredTheme}
+                        initial={{ opacity: 0, x: -4 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 4 }}
+                        transition={{ duration: 0.15 }}
+                        className="absolute top-1/2 -translate-y-1/2 left-0 right-0 body-small"
+                        style={{ willChange: "opacity, transform" }}
+                      >
+                        <span className="line-clamp-1">
+                          ·{" "}
+                          {capitalize(
+                            themes.find((t) => t.code === hoveredTheme)?.name ??
+                              "",
+                          )}
+                        </span>
+                      </motion.div>
                     )}
-                </AnimatePresence>
-
-                {/* STRATEGY Section - Animated reveal */}
-                <AnimatePresence mode="wait">
-                    {strategies.length > 0 && (
-                        <motion.section
-                            key="strategy-section"
-                            layout="position"
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            transition={{ duration: 0.2 }}
-                            className="flex flex-col gap-3"
-                            style={{ willChange: "opacity" }}
-                        >
-                            <Label className="px-2 text-gray-600 flex items-center  min-w-0">
-                                <span className="shrink-0 pr-1">STRATEGY</span>
-                                <AnimatePresence mode="wait">
-                                    {hoveredStrategy && (
-                                        <motion.span
-                                            key={hoveredStrategy}
-                                            initial={{ opacity: 0, x: -4 }}
-                                            animate={{ opacity: 1, x: 0 }}
-                                            exit={{ opacity: 0, x: 4 }}
-                                            transition={{ duration: 0.15 }}
-                                            className="truncate"
-                                            style={{ willChange: "opacity, transform" }}
-                                        >
-                                            · {strategies.find((s) => s.code === hoveredStrategy)?.name.toUpperCase()}
-                                        </motion.span>
-                                    )}
-                                </AnimatePresence>
-                            </Label>
-                            <div className="grid grid-cols-3 sm:grid-cols-5 max-w-max gap-2">
-                                {strategies.map((strategy) => {
-                                    const isSelected = selectedStrategy === strategy.code;
-
-                                    return (
-                                        <button
-                                            key={strategy.code}
-                                            onClick={() => onStrategyClick(strategy.code)}
-                                            onMouseEnter={() => setHoveredStrategy(strategy.code)}
-                                            onMouseLeave={() => setHoveredStrategy(null)}
-                                            className="cursor-pointer"
-                                        >
-                                            <CodeBadge
-                                                code={strategy.code}
-                                                className={cn(
-                                                    !isSelected && "hover:border-blue-300",
-                                                    "border-[3px]"
-                                                )}
-                                                style={
-                                                    isSelected
-                                                        ? {
-                                                            backgroundColor: activeColor.contrast || activeColor.solid,
-                                                            borderColor: activeColor.contrast || activeColor.solid,
-                                                            color: "white",
-                                                            borderWidth: "3px",
-                                                        }
-                                                        : {
-                                                            backgroundColor: "var(--color-blue-100)",
-                                                            color: "var(--color-blue-600)",
-                                                            borderColor: "var(--color-blue-100)",
-                                                            borderWidth: "3px",
-                                                        }
-                                                }
-                                            />
-                                        </button>
-                                    );
-                                })}
-                            </div>
-                        </motion.section>
+                  </AnimatePresence>
+                </div>
+              </div>
+              <div className="grid grid-cols-3 lg:grid-cols-5 max-w-max gap-2">
+                {themes.map((theme) => {
+                  const isSelected = selectedTheme === theme.code;
+                  const isFilled = isSelected && !selectedStrategy;
+                  const isOutlined = isSelected && !!selectedStrategy;
+
+                  return (
+                    <button
+                      key={theme.code}
+                      onClick={() => onThemeClick(theme.code)}
+                      onMouseEnter={() => setHoveredTheme(theme.code)}
+                      onMouseLeave={() => setHoveredTheme(null)}
+                      className="cursor-pointer"
+                    >
+                      <Tag
+                        variant="code"
+                        className={cn(!isSelected && "hover:border-blue-300")}
+                        style={
+                          isFilled
+                            ? {
+                                backgroundColor:
+                                  activeColor.contrast || activeColor.solid,
+                                borderColor:
+                                  activeColor.contrast || activeColor.solid,
+                                color: "white",
+                                borderWidth: "3px",
+                              }
+                            : isOutlined
+                              ? {
+                                  backgroundColor: "white",
+                                  borderColor:
+                                    activeColor.contrast || activeColor.solid,
+                                  color:
+                                    activeColor.contrast || activeColor.solid,
+                                  borderWidth: "3px",
+                                }
+                              : !isSelected
+                                ? {
+                                    backgroundColor: "var(--color-blue-100)",
+                                    color: "var(--color-blue-600)",
+                                    borderColor: "var(--color-blue-100)",
+                                    borderWidth: "3px",
+                                  }
+                                : {
+                                    borderWidth: "3px",
+                                  }
+                        }
+                      >
+                        {theme.code}
+                      </Tag>
+                    </button>
+                  );
+                })}
+              </div>
+            </motion.section>
+          )}
+        </AnimatePresence>
+
+        {/* STRATEGY Section - Animated reveal */}
+        <AnimatePresence mode="wait">
+          {strategies.length > 0 && (
+            <motion.section
+              key="strategy-section"
+              layout="position"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="flex flex-col gap-3"
+              style={{ willChange: "opacity" }}
+            >
+              <div className="flex items-center min-w-0">
+                <Label className="pr-1">STRATEGY</Label>
+
+                <div className="relative min-w-0 flex-1 self-stretch mt-px">
+                  <AnimatePresence mode="wait">
+                    {hoveredStrategy && (
+                      <motion.div
+                        key={hoveredStrategy}
+                        initial={{ opacity: 0, x: -4 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 4 }}
+                        transition={{ duration: 0.15 }}
+                        className="absolute top-1/2 -translate-y-1/2 left-0 right-0  body-small"
+                        style={{ willChange: "opacity, transform" }}
+                      >
+                        <span className="line-clamp-1">
+                          ·{" "}
+                          {capitalize(
+                            strategies.find((s) => s.code === hoveredStrategy)
+                              ?.name ?? "",
+                          )}
+                        </span>
+                      </motion.div>
                     )}
-                </AnimatePresence>
-
-                {/* SCOPE Section */}
-                <motion.section
-                    layout="position"
-                    transition={{ duration: 0.2, ease: [0.25, 0.46, 0.45, 0.94] }}
-                    className="flex flex-col gap-3 items-start max-w-max"
-                >
-                    <Label className="px-2 text-gray-600">SCOPE</Label>
-                    <div className="bg-white border border-gray-100 rounded-full  inline-flex">
-                        <Toggle
-                            options={[
-                                { label: "Non-core", value: "non-core" },
-                                { label: "Core", value: "core" },
-                            ]}
-                            value={scope}
-                            onValueChange={(value) => onScopeChange(value as "non-core" | "core")}
-                        />
-                    </div>
-                </motion.section>
-
-                {/* PURSUIT Section */}
-                <motion.section
-                    layout="position"
-                    transition={{ duration: 0.2, ease: [0.25, 0.46, 0.45, 0.94] }}
-                    className="flex flex-col gap-3 items-start max-w-max"
-                >
-                    <Label className="px-2 text-gray-600">PURSUIT</Label>
-                    <div className=" inline-flex gap-3">
-                        <Tag
-                            variant="light"
-                            active={activePursuits.has("certification")}
-                            onClick={() => onPursuitToggle("certification")}
-                        >
-                            Certification
-                        </Tag>
-                        <Tag
-                            variant="light"
-                            active={activePursuits.has("rating")}
-                            onClick={() => onPursuitToggle("rating")}
-                        >
-                            Rating
-                        </Tag>
-                    </div>
-                </motion.section>
-            </Card>
-        </LayoutGroup>
-    );
+                  </AnimatePresence>
+                </div>
+              </div>
+              <div className="grid grid-cols-3 sm:grid-cols-5 max-w-max gap-2">
+                {strategies.map((strategy) => {
+                  const isSelected = selectedStrategy === strategy.code;
+
+                  return (
+                    <button
+                      key={strategy.code}
+                      onClick={() => onStrategyClick(strategy.code)}
+                      onMouseEnter={() => setHoveredStrategy(strategy.code)}
+                      onMouseLeave={() => setHoveredStrategy(null)}
+                      className="cursor-pointer"
+                    >
+                      <Tag
+                        variant="code"
+                        className={cn(
+                          !isSelected && "hover:border-blue-300",
+                          "border-[3px]",
+                        )}
+                        style={
+                          isSelected
+                            ? {
+                                backgroundColor:
+                                  activeColor.contrast || activeColor.solid,
+                                borderColor:
+                                  activeColor.contrast || activeColor.solid,
+                                color: "white",
+                                borderWidth: "3px",
+                              }
+                            : {
+                                backgroundColor: "var(--color-blue-100)",
+                                color: "var(--color-blue-600)",
+                                borderColor: "var(--color-blue-100)",
+                                borderWidth: "3px",
+                              }
+                        }
+                      >
+                        {strategy.code}
+                      </Tag>
+                    </button>
+                  );
+                })}
+              </div>
+            </motion.section>
+          )}
+        </AnimatePresence>
+
+        {/* SCOPE Section */}
+        <motion.section
+          layout="position"
+          transition={{ duration: 0.2, ease: [0.25, 0.46, 0.45, 0.94] }}
+          className="flex flex-col gap-3 items-start max-w-max"
+        >
+          <Label>SCOPE</Label>
+          <div className="bg-white border border-gray-100 rounded-full  inline-flex">
+            <Toggle
+              options={[
+                { label: "Non-core", value: "non-core" },
+                { label: "Core", value: "core" },
+              ]}
+              value={scope}
+              onValueChange={(value) =>
+                onScopeChange(value as "non-core" | "core")
+              }
+            />
+          </div>
+        </motion.section>
+
+        {/* PURSUIT Section */}
+        <motion.section
+          layout="position"
+          transition={{ duration: 0.2, ease: [0.25, 0.46, 0.45, 0.94] }}
+          className="flex flex-col gap-3 items-start max-w-max"
+        >
+          <Label>PURSUIT</Label>
+          <div className=" inline-flex gap-3">
+            <Tag
+              variant="text"
+              active={activePursuits.has("certification")}
+              onClick={() => onPursuitToggle("certification")}
+            >
+              Certification
+            </Tag>
+            <Tag
+              variant="text"
+              active={activePursuits.has("rating")}
+              onClick={() => onPursuitToggle("rating")}
+            >
+              Rating
+            </Tag>
+          </div>
+        </motion.section>
+      </Card>
+    </LayoutGroup>
+  );
 };
 
 export const ExploreSidePanel = {
-    args: {
-        mockSearchParams: "concept=community&theme=C8",
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `<ExploreSidePanelView
+  args: {
+    mockSearchParams: "concept=community&theme=C8",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<ExploreSidePanelView
   concepts={concepts}
   themes={themes}
   strategies={strategies}
@@ -346,135 +388,170 @@ export const ExploreSidePanel = {
   activePursuits={activePursuits}
   onPursuitToggle={handlePursuitToggle}
 />`,
-            },
-        },
-    },
-    render: (args: any) => {
-        // Mock searchParams with state for Storybook //
-        const [urlState, setUrlState] = useState(args.mockSearchParams || "");
-        const searchParams = new URLSearchParams(urlState);
-        //In real app: const searchParams = useSearchParams();
-
-        // URL state
-        const selectedConcept = searchParams.get("concept") as ConceptSlug | null;
-        const selectedTheme = searchParams.get("theme");
-        const selectedStrategy = searchParams.get("strategy");
-
-        // Progressive data fetching //
-        // const { data: concepts = [] } = useConceptListQuery();
-        // const { data: themes = [] } = useThemesQuery(selectedConcept);
-        // const { data: strategies = [] } = useStrategiesQuery(selectedConcept, selectedTheme);
-
-        // Mock data for Storybook
-        const concepts = [{ "conceptKey": "mind", "name": "Mind" }, { "conceptKey": "community", "name": "Community" }, { "conceptKey": "movement", "name": "Movement" }, { "conceptKey": "water", "name": "Water" }, { "conceptKey": "air", "name": "Air" }, { "conceptKey": "light", "name": "Light" }, { "conceptKey": "thermal-comfort", "name": "Thermal Comfort" }, { "conceptKey": "nourishment", "name": "Nourishment" }, { "conceptKey": "sound", "name": "Sound" }, { "conceptKey": "materials", "name": "Materials" }, { "conceptKey": "innovation", "name": "Innovation" }];
-
-        // Themes only load when concept is selected
-        const themes = selectedConcept ? [{ "code": "C1", "name": "Community and occupant engagement" }, { "code": "C2", "name": "Emergency preparedness" }, { "code": "C3", "name": "Fair housing" }, { "code": "C4", "name": "Family and parental support" }, { "code": "C5", "name": "Health benefits and services" }, { "code": "C6", "name": "Health promotion" }, { "code": "C7", "name": "Inclusive design" }, { "code": "C8", "name": "Occupant experience" }, { "code": "C9", "name": "Organizational practices" }, { "code": "C10", "name": "Personal-professional development" }, { "code": "C11", "name": "Supportive construction practices" }] : [];
-
-        // Strategies only load when theme is selected
-        const strategies = selectedTheme ? [{ "code": "C8.1", "name": "Collect additional occupant research" }, { "code": "C8.2", "name": "Conduct qualitative research" }, { "code": "C8.3", "name": "Develop annual action plan" }, { "code": "C8.4", "name": "Perform annual occupant survey" }] : [];
-
-        // Local state
-        const [scope, setScope] = useState<"core" | "non-core">("core");
-        const [activePursuits, setActivePursuits] = useState<Set<"certification" | "rating">>(
-            new Set(["certification"])
-        );
-
-        // Navigation handlers
-        const handleConceptClick = (slug: ConceptSlug) => {
-            const params = new URLSearchParams(searchParams.toString());
-
-            if (selectedConcept === slug) {
-                params.delete("concept");
-                params.delete("theme");
-                params.delete("strategy");
-            } else {
-                params.set("concept", slug);
-                params.delete("theme");
-                params.delete("strategy");
-            }
-
-            setUrlState(params.toString());
-            // In real app: router.push(`/explore?${params.toString()}`);
-        };
-
-        const handleThemeClick = (themeCode: string) => {
-            const params = new URLSearchParams(searchParams.toString());
-
-            if (selectedTheme === themeCode) {
-                if (selectedStrategy) {
-                    params.delete("strategy");
-                } else {
-                    params.delete("theme");
-                    params.delete("strategy");
-                }
-            } else {
-                params.set("theme", themeCode);
-                params.delete("strategy");
-            }
-
-            setUrlState(params.toString());
-            // In real app: router.push(`/explore?${params.toString()}`);
-        };
-
-        const handleStrategyClick = (strategyCode: string) => {
-            const params = new URLSearchParams(searchParams.toString());
-
-            if (selectedStrategy === strategyCode) {
-                params.delete("strategy");
-            } else {
-                params.set("strategy", strategyCode);
-            }
-
-            setUrlState(params.toString());
-            // In real app: router.push(`/explore?${params.toString()}`);
-        };
-
-        const handleScopeChange = (newScope: "core" | "non-core") => {
-            setScope(newScope);
-        };
-
-        const handlePursuitToggle = (pursuit: "certification" | "rating") => {
-            setActivePursuits((prev) => {
-                const next = new Set(prev);
-                if (next.has(pursuit)) {
-                    next.delete(pursuit);
-                } else {
-                    next.add(pursuit);
-                }
-                return next;
-            });
-        };
-
-        return (
-            <ExploreSidePanelView
-                concepts={concepts}
-                themes={themes}
-                strategies={strategies}
-                selectedConcept={selectedConcept}
-                selectedTheme={selectedTheme}
-                selectedStrategy={selectedStrategy}
-                onConceptClick={handleConceptClick}
-                onThemeClick={handleThemeClick}
-                onStrategyClick={handleStrategyClick}
-                scope={scope}
-                onScopeChange={handleScopeChange}
-                activePursuits={activePursuits}
-                onPursuitToggle={handlePursuitToggle}
-            />
-        );
+      },
     },
+  },
+  render: (args: any) => {
+    // Mock searchParams with state for Storybook //
+    const [urlState, setUrlState] = useState(args.mockSearchParams || "");
+    const searchParams = new URLSearchParams(urlState);
+    //In real app: const searchParams = useSearchParams();
+
+    // URL state
+    const selectedConcept = searchParams.get("concept") as ConceptSlug | null;
+    const selectedTheme = searchParams.get("theme");
+    const selectedStrategy = searchParams.get("strategy");
+
+    // Progressive data fetching //
+    // const { data: concepts = [] } = useConceptListQuery();
+    // const { data: themes = [] } = useThemesQuery(selectedConcept);
+    // const { data: strategies = [] } = useStrategiesQuery(selectedConcept, selectedTheme);
+
+    // Mock data for Storybook
+    const concepts = [
+      { conceptKey: "mind", name: "Mind" },
+      { conceptKey: "community", name: "Community" },
+      { conceptKey: "movement", name: "Movement" },
+      { conceptKey: "water", name: "Water" },
+      { conceptKey: "air", name: "Air" },
+      { conceptKey: "light", name: "Light" },
+      { conceptKey: "thermal-comfort", name: "Thermal Comfort" },
+      { conceptKey: "nourishment", name: "Nourishment" },
+      { conceptKey: "sound", name: "Sound" },
+      { conceptKey: "materials", name: "Materials" },
+      { conceptKey: "innovation", name: "Innovation" },
+    ];
+
+    // Themes only load when concept is selected
+    const themes = selectedConcept
+      ? [
+          { code: "C1", name: "Community and occupant engagement" },
+          { code: "C2", name: "Emergency preparedness" },
+          { code: "C3", name: "Fair housing" },
+          { code: "C4", name: "Family and parental support" },
+          { code: "C5", name: "Health benefits and services" },
+          { code: "C6", name: "Health promotion" },
+          { code: "C7", name: "Inclusive design" },
+          { code: "C8", name: "Occupant experience" },
+          { code: "C9", name: "Organizational practices" },
+          { code: "C10", name: "Personal-professional development" },
+          { code: "C11", name: "Supportive construction practices" },
+        ]
+      : [];
+
+    // Strategies only load when theme is selected
+    const strategies = selectedTheme
+      ? [
+          { code: "C8.1", name: "Collect additional occupant research" },
+          { code: "C8.2", name: "Conduct qualitative research" },
+          { code: "C8.3", name: "Develop annual action plan" },
+          { code: "C8.4", name: "Perform annual occupant survey" },
+        ]
+      : [];
+
+    // Local state
+    const [scope, setScope] = useState<"core" | "non-core">("core");
+    const [activePursuits, setActivePursuits] = useState<
+      Set<"certification" | "rating">
+    >(new Set(["certification"]));
+
+    // Navigation handlers
+    const handleConceptClick = (slug: ConceptSlug) => {
+      const params = new URLSearchParams(searchParams.toString());
+
+      if (selectedConcept === slug) {
+        params.delete("concept");
+        params.delete("theme");
+        params.delete("strategy");
+      } else {
+        params.set("concept", slug);
+        params.delete("theme");
+        params.delete("strategy");
+      }
+
+      setUrlState(params.toString());
+      // In real app: router.push(`/explore?${params.toString()}`);
+    };
+
+    const handleThemeClick = (themeCode: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+
+      if (selectedTheme === themeCode) {
+        if (selectedStrategy) {
+          params.delete("strategy");
+        } else {
+          params.delete("theme");
+          params.delete("strategy");
+        }
+      } else {
+        params.set("theme", themeCode);
+        params.delete("strategy");
+      }
+
+      setUrlState(params.toString());
+      // In real app: router.push(`/explore?${params.toString()}`);
+    };
+
+    const handleStrategyClick = (strategyCode: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+
+      if (selectedStrategy === strategyCode) {
+        params.delete("strategy");
+      } else {
+        params.set("strategy", strategyCode);
+      }
+
+      setUrlState(params.toString());
+      // In real app: router.push(`/explore?${params.toString()}`);
+    };
+
+    const handleScopeChange = (newScope: "core" | "non-core") => {
+      setScope(newScope);
+    };
+
+    const handlePursuitToggle = (pursuit: "certification" | "rating") => {
+      setActivePursuits((prev) => {
+        const next = new Set(prev);
+        if (next.has(pursuit)) {
+          next.delete(pursuit);
+        } else {
+          next.add(pursuit);
+        }
+        return next;
+      });
+    };
+
+    return (
+      <div className="max-w-[322px]">
+        <ExploreSidePanelView
+          concepts={concepts}
+          themes={themes}
+          strategies={strategies}
+          selectedConcept={selectedConcept}
+          selectedTheme={selectedTheme}
+          selectedStrategy={selectedStrategy}
+          onConceptClick={handleConceptClick}
+          onThemeClick={handleThemeClick}
+          onStrategyClick={handleStrategyClick}
+          scope={scope}
+          onScopeChange={handleScopeChange}
+          activePursuits={activePursuits}
+          onPursuitToggle={handlePursuitToggle}
+        />
+      </div>
+    );
+  },
 };
 
 const meta = {
-    title: "Review/Panel",
-    component: ExploreSidePanelView,
-    tags: ["autodocs"],
-    parameters: {
-        layout: "padded",
-    },
-}
+  title: "Review/Panel",
+  component: ExploreSidePanelView,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
 
 export default meta;
 
-type ConceptSlug = keyof typeof conceptColors;
+type ConceptSlug = keyof typeof conceptColors;