@moises.ai/design-system 3.9.21 → 3.9.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.9.21",
+  "version": "3.9.22",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/Extension/Extension.jsx

@@ -119,23 +119,33 @@ function Header({ title, onBack, headerLeft, headerRight, allowClose = true, onC
  *   allowing individual children to manage their own overflow.
  */
 function Content({ scrollable = true, style, children }) {
+    if (!scrollable) {
+        return (
+          <Flex
+            direction="column"
+            gap="3"
+            style={{ flex: 1, overflowY: 'hidden', minHeight: 0, ...style }}
+          >
+            {children}
+          </Flex>
+        )
+    }
+
     return (
         <div
             style={{
                 flex: 1,
                 minHeight: 0,
-                overflowY: scrollable ? 'auto' : 'hidden',
+                overflowY: 'auto',
                 display: 'flex',
                 flexDirection: 'column',
-                ...style,
             }}
         >
             <Flex
                 direction="column"
-                px="4"
-                py={scrollable ? '4' : undefined}
+                p="4"
                 gap="3"
-                style={scrollable ? undefined : { flex: 1, minHeight: 0 }}
+                style={style}
             >
                 {children}
             </Flex>
@@ -158,7 +168,6 @@ function Footer({ children }) {
             align="center"
             justify="center"
             mx="4"
-            // py="3"
         >
             {children}
         </Flex>
@@ -177,6 +186,7 @@ function Footer({ children }) {
  * @param {React.ReactNode} [props.headerLeft] - Override for the default back button.
  * @param {boolean} [props.allowClose=true] - Whether to show the close (x) button.
  * @param {Function} [props.onClose] - Custom close handler.
+ * @param {boolean} [props.keepMounted] - When true, the screen stays mounted when navigating away, preserving state.
  */
 function Screen() {
     return null
@@ -262,8 +272,19 @@ function Navigator({ initialScreen, animated, children }) {
     const def = screens[current.name]
     if (!def) return null
 
+    // Stable layers: every stack entry with keepMounted, keyed by stack index so the same
+    // component instance stays mounted when navigating (fixes state loss on pop).
+    const keepMountedLayers = useMemo(
+        () =>
+            stack
+                .map((entry, stackIndex) => (screens[entry.name]?.keepMounted ? { entry, stackIndex } : null))
+                .filter(Boolean),
+        [stack, screens],
+    )
+
     const opt = (key, fallback) => (key in screenOptions ? screenOptions[key] : (def[key] ?? fallback))
     const Component = def.component
+    const currentHasKeepMounted = def.keepMounted === true
 
     const handleSetOptions = useCallback(
         (opts) => {
@@ -291,11 +312,51 @@ function Navigator({ initialScreen, animated, children }) {
                 />
                 <div
                     ref={wrapperRef}
-                    style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, overflow: 'hidden' }}
+                    style={{
+                        position: 'relative',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        flex: 1,
+                        minHeight: 0,
+                        overflow: 'hidden',
+                    }}
                 >
-                    <ScreenContext.Provider value={screenCtx} key={gen}>
-                        <Component />
-                    </ScreenContext.Provider>
+                    {keepMountedLayers.map(({ entry, stackIndex }) => {
+                        const layerDef = screens[entry.name]
+                        if (!layerDef?.component) return null
+                        const LayerComponent = layerDef.component
+                        const isCurrent = entry.name === current.name
+                        const layerCtx = isCurrent
+                            ? screenCtx
+                            : { name: entry.name, params: entry.params || {}, setOptions: () => {} }
+                        return (
+                            <div
+                                key={`layer-${stackIndex}`}
+                                style={isCurrent ? {
+                                    position: 'relative',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    flex: 1,
+                                    minHeight: 0,
+                                    overflow: 'hidden',
+                                } : {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    visibility: 'hidden',
+                                    pointerEvents: 'none',
+                                }}
+                            >
+                                <ScreenContext.Provider value={layerCtx}>
+                                    <LayerComponent />
+                                </ScreenContext.Provider>
+                            </div>
+                        )
+                    })}
+                    {!currentHasKeepMounted && (
+                        <ScreenContext.Provider value={screenCtx} key={gen}>
+                            <Component />
+                        </ScreenContext.Provider>
+                    )}
                 </div>
             </div>
         </NavigationContext.Provider>

package/src/components/Extension/Extension.stories.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { Badge, Button, Card, Flex, IconButton, Text, Extension, useNavigation, useScreen } from '../../index'
 import { DotsVerticalIcon } from '../../icons'
+import { Badge, Button, Card, Extension, Flex, IconButton, Text, useNavigation, useScreen } from '../../index'
 
 const mockMoises = {
   extension: { close: () => console.log('extension.close()') },
@@ -365,3 +365,52 @@ export const CustomClose = {
     </Extension>
   ),
 }
+
+// ---------------------------------------------------------------------------
+// Navigator — keepMounted preserves state when navigating away
+// ---------------------------------------------------------------------------
+
+function KeepMountedHomeScreen() {
+  const { push } = useNavigation()
+  const [value, setValue] = useState('')
+
+  return (
+    <Extension.Content>
+      <Text size="2" color="gray">
+        This screen has <code>keepMounted</code>. Type below, then go to Next. When you go back, your text is still here.
+      </Text>
+      <input
+        type="text"
+        placeholder="Type something..."
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        style={{
+          padding: 8,
+          borderRadius: 6,
+          border: '1px solid var(--gray-a6)',
+        }}
+      />
+      <Button variant="soft" size="2" onClick={() => push('next')}>
+        Go to Next
+      </Button>
+    </Extension.Content>
+  )
+}
+
+function KeepMountedNextScreen() {
+  return (
+    <Extension.Content>
+      <Text size="2">Press back — the previous screen kept its state because it stayed mounted.</Text>
+    </Extension.Content>
+  )
+}
+
+export const KeepMounted = {
+  name: 'Navigator (keepMounted)',
+  render: () => (
+    <Extension moises={mockMoises} initialScreen="home" animated>
+      <Extension.Screen name="home" title="Keep Mounted Demo" component={KeepMountedHomeScreen} keepMounted />
+      <Extension.Screen name="next" title="Next" component={KeepMountedNextScreen} />
+    </Extension>
+  ),
+}

package/src/components/ListCards/ListCards.jsx

@@ -273,8 +273,26 @@ export const ListCards = ({
   children,
   alwaysShowScrollbar = true,
   style,
+  scrollable = true,
   ...props
 }) => {
+  const content = (
+    <Box className={styles.gridContainer} pr="3" style={style}>
+      <RadioCards.Root
+        defaultValue={undefined}
+        className={className}
+        style={{ display: 'contents' }}
+        {...props}
+      >
+        {children}
+      </RadioCards.Root>
+    </Box>
+  )
+
+  if (!scrollable) {
+    return content
+  }
+
   return (
     <ScrollArea
       height="100%"
@@ -282,16 +300,7 @@ export const ListCards = ({
       scrollbars="vertical"
       type={alwaysShowScrollbar ? 'auto' : 'hover'}
     >
-      <Box className={styles.gridContainer} pr="3" style={style}>
-        <RadioCards.Root
-          defaultValue={undefined}
-          className={className}
-          style={{ display: 'contents' }}
-          {...props}
-        >
-          {children}
-        </RadioCards.Root>
-      </Box>
+      {content}
     </ScrollArea>
   )
 }

package/src/components/MultiSelectCards/MultiSelectCards.jsx

@@ -1,14 +1,14 @@
-import React, { useCallback } from 'react'
-import classNames from 'classnames'
 import {
-  Flex,
   Box,
   Card as CardRadix,
-  Text,
+  Flex,
   ScrollArea,
+  Text,
 } from '@radix-ui/themes'
-import styles from './MultiSelectCards.module.css'
+import classNames from 'classnames'
+import React, { useCallback } from 'react'
 import { LockIcon } from '../../icons'
+import styles from './MultiSelectCards.module.css'
 
 const Card = ({ item, value, onSelect, disabled, isLocked }) => {
   const handleSelect = useCallback(() => {
@@ -71,12 +71,13 @@ export const MultiSelectCards = ({
   onSelect,
   className,
   disabled = false,
+  style,
   ...props
 }) => (
   <ScrollArea height="100%" width="100%" scrollbars="vertical">
     <Box
       className={classNames(styles.gridContainer, className)}
-      pr="3"
+      style={{ paddingRight: 'var(--space-3)', ...style }}
       {...props}
     >
       {items.map((item) => (

package/src/components/SetlistList/SetlistList.module.css

@@ -204,6 +204,7 @@
 
 .setlistsScrollArea {
   height: 100%;
+  max-height: 80vh;
   padding-right: 6px;
 }
 
@@ -223,13 +224,14 @@ sectionTitle {
 .setlistsContent {
   /* gap: 4px; */
   margin: 1px 0;
+  /* padding-bottom: 16px; */
 }
 
 .scrollShadow {
   position: relative;
 }
 
-.scrollShadow::after {
+/* .scrollShadow::after {
   content: '';
   position: sticky;
   bottom: -2px;
@@ -245,7 +247,7 @@ sectionTitle {
     transparent 100%
   );
   opacity: 0.35;
-}
+} */
 
 .collapsedStack {
   gap: 0;
@@ -284,14 +286,13 @@ sectionTitle {
 
 .collapsedMask {
   position: relative;
-  overflow: hidden;
   display: flex;
-  max-height: 80vh;
   transition: max-height 260ms ease-in-out;
 }
 
 .collapsedMask.collapsedStack,
 .collapsedMask.collapsedShrinking {
+  overflow: hidden;
   max-height: 120px;
 }
 

package/src/components/Shell/Shell.stories.jsx

@@ -12,6 +12,44 @@ import {
   WidgetIcon,
 } from '../../icons'
 
+const SETLIST_TEMPLATES = [
+  {
+    label: 'Piano Exercises',
+    subtitle: 'By Berklee',
+    moises: true,
+    icon: 'https://storage.googleapis.com/moises-api-assets/setlists/jamsession_cory/cover.png',
+  },
+  {
+    label: 'Bossa Nova Essentials',
+  },
+  {
+    label: 'Band Rehearsal',
+    subtitle: 'By Nickyz dsdasdas',
+    group: true,
+  },
+  {
+    label: 'Gig Dec 21th',
+    icon: <MusicNoteIcon width={16} height={16} />,
+  },
+]
+
+const createSetlists = (count) =>
+  Array.from({ length: count }, (_, i) => {
+    const template = SETLIST_TEMPLATES[i % SETLIST_TEMPLATES.length]
+    const id = `setlist-${i}`
+    return {
+      id,
+      label: `${template.label} #${i + 1}`,
+      subtitle: template.subtitle,
+      moises: template.moises,
+      icon: template.icon,
+      group: template.group,
+      dropdownMenuOptions: [
+        { type: 'item', key: 'edit', label: 'Edit', onClick: () => console.log('Edit clicked') },
+      ],
+    }
+  })
+
 export default {
   title: 'Features/Shell',
   component: Shell,
@@ -96,225 +134,8 @@ export const Default = {
     ],
     selectedProductId: 'library',
     onProductClick: () => console.log('Product clicked'),
-    setlists: [
-      {
-        id: 'piano-exercises',
-        label: 'Piano Exercises',
-        subtitle: 'By Berklee',
-        moises: true,
-        icon: 'https://storage.googleapis.com/moises-api-assets/setlists/jamsession_cory/cover.png',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'bossa-nova',
-        label: 'Bossa Nova Essentials',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'band-rehearsal',
-        label: 'Band Rehearsal',
-        subtitle: 'By Nickyz dsdasdas',
-        group: true,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'gig-dec-21',
-        label: 'Gig Dec 21th',
-        icon: <MusicNoteIcon width={16} height={16} />,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'piano-exercises-1',
-        label: 'Piano Exercises',
-        subtitle: 'By Berklee',
-        moises: true,
-        icon: 'https://storage.googleapis.com/moises-api-assets/setlists/jamsession_cory/cover.png',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'bossa-nova-1',
-        label: 'Bossa Nova Essentials',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'band-rehearsal-1',
-        label: 'Band Rehearsal',
-        subtitle: 'By Nickyz dsdasdas',
-        group: true,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'gig-dec-21-1',
-        label: 'Gig Dec 21th',
-        icon: <MusicNoteIcon width={16} height={16} />,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'piano-exercises-2',
-        label: 'Piano Exercises',
-        subtitle: 'By Berklee',
-        moises: true,
-        icon: 'https://storage.googleapis.com/moises-api-assets/setlists/jamsession_cory/cover.png',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'bossa-nova-2',
-        label: 'Bossa Nova Essentials',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'band-rehearsal-2',
-        label: 'Band Rehearsal',
-        subtitle: 'By Nickyz dsdasdas',
-        group: true,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'gig-dec-21-2',
-        label: 'Gig Dec 21th',
-        icon: <MusicNoteIcon width={16} height={16} />,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'piano-exercises-3',
-        label: 'Piano Exercises',
-        subtitle: 'By Berklee',
-        moises: true,
-        icon: 'https://storage.googleapis.com/moises-api-assets/setlists/jamsession_cory/cover.png',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'bossa-nova-3',
-        label: 'Bossa Nova Essentials',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'band-rehearsal-3',
-        label: 'Band Rehearsal',
-        subtitle: 'By Nickyz dsdasdas',
-        group: true,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'gig-dec-21-3',
-        label: 'Gig Dec 21th',
-        icon: <MusicNoteIcon width={16} height={16} />,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-    ],
-    selectedSetlistId: 'piano-exercises',
+    setlists: createSetlists(100),
+    selectedSetlistId: 'setlist-0',
     onSetlistClick: () => console.log('Setlist clicked'),
     onNewSetlistClick: () => console.log('New setlist clicked'),
     collapsed: false,

package/src/components/useForm/useForm.jsx

@@ -121,6 +121,7 @@ export function useForm({ schema }) {
     if (typeof name === 'string') {
       setValues((prev) => ({ ...prev, [name]: value }))
       setErrors((prev) => ({ ...prev, [name]: null }))
+      return
     }
 
     const values = name