@rippling/rippling-sdk 0.2.0-alpha.48 → 0.2.0-alpha.49

package/examples/sdui/sdui-tab-multi-view/sdui-tab-multi-view.ts

@@ -1,914 +0,0 @@
-/**
- * **Bark & Train — Field HQ** (demo): roster, schedule, today's snapshot, trainer reference.
- * Tabs: Home, Dogs, Schedule, Today, Resources — mock data only.
- *
- * Run:
- *   npx ts-node --transpile-only -r tsconfig-paths/register examples/sdui/sdui-tab-multi-view/sdui-tab-multi-view.ts
- *
- * Pair: rippling-function.ts uses `@rippling/sdui-builder` for paste-into-Function-editor preview.
- */
-import SDUI from '../../../src/lib/sdui';
-
-const MOCK_DOGS = [
-  {
-    id: 'dog_1',
-    _key: 'dog_1',
-    dog_name__c: 'Rex',
-    breed__c: 'Labrador',
-    age__c: 3,
-    total_training_time__c: 120,
-  },
-  {
-    id: 'dog_2',
-    _key: 'dog_2',
-    dog_name__c: 'Luna',
-    breed__c: 'Border Collie',
-    age__c: 5,
-    total_training_time__c: 340,
-  },
-];
-
-const MOCK_SESSIONS = [
-  {
-    id: 'sess_1',
-    _key: 'sess_1',
-    dog_id__c: 'dog_1',
-    session_date__c: '2026-04-01',
-    duration__c: 45,
-    training_type__c: 'Obedience',
-    notes__c: 'Recall work',
-  },
-  {
-    id: 'sess_2',
-    _key: 'sess_2',
-    dog_id__c: 'dog_2',
-    session_date__c: '2026-04-02',
-    duration__c: 60,
-    training_type__c: 'Agility',
-    notes__c: 'Weaves',
-  },
-];
-
-const SESSION_TOTAL_MIN = MOCK_SESSIONS.reduce((a, row) => a + Number(row.duration__c || 0), 0);
-
-const PCT_TIME_OBEDIENCE = 43;
-const PCT_TIME_AGILITY = 57;
-
-const SESSION_TIME_SEGMENTS = [
-  { value: PCT_TIME_OBEDIENCE, segmentColor: '#7C3AED' },
-  { value: PCT_TIME_AGILITY, segmentColor: '#F97316' },
-];
-
-function renderSpec(functionId: string) {
-  const s = SDUI.createState({
-    dogs: MOCK_DOGS,
-    sessions: MOCK_SESSIONS,
-    stats: {
-      dogCount: MOCK_DOGS.length,
-      sessionCount: MOCK_SESSIONS.length,
-      totalMinutes: SESSION_TOTAL_MIN,
-    },
-    selectedDog: null as unknown,
-    selectedSession: null as unknown,
-    showCreateDogModal: false,
-    showEditDogModal: false,
-    showCreateSessionModal: false,
-    showEditSessionModal: false,
-    dogForm: { dog_name: '', breed: '', age: '' },
-    sessionForm: {
-      dog_id: '',
-      session_date: '',
-      duration: '',
-      training_type: '',
-      notes: '',
-    },
-    activeTab: 'overview',
-  });
-
-  // ============================================================
-  // HOME — redesigned: dashboard layout with hero stats on left,
-  // chart + recent activity stacked on right. Single content
-  // band, no purple hero background. Cleaner and more useful.
-  // ============================================================
-  const overviewPanel = SDUI.components.Layout({
-    width: '100%',
-    maxWidth: '1200px',
-    margin: { left: 'auto', right: 'auto' },
-    padding: { top: 40, bottom: 56, left: 28, right: 28 },
-    children: [
-      SDUI.components.VStack({
-        gap: 'space600',
-        align: 'stretch',
-        children: [
-          SDUI.components.VStack({
-            gap: 'space200',
-            align: 'flex-start',
-            children: [
-              SDUI.components.Text({
-                typestyle: 'bodyMdEmphasis',
-                color: 'secondary',
-                text: 'BARK & TRAIN · FIELD HQ',
-              }),
-              SDUI.components.Heading({
-                level: 1,
-                text: 'Good morning, trainer 👋',
-              }),
-              SDUI.components.Text({
-                typestyle: 'bodyLg',
-                color: 'secondary',
-                text: 'Here is what is happening across your roster and schedule.',
-              }),
-            ],
-          }),
-          SDUI.components.HStack({
-            gap: 'space400',
-            wrap: 'nowrap',
-            align: 'stretch',
-            justify: 'space-between',
-            children: [
-              SDUI.components.Layout({
-                width: '32%',
-                minWidth: '260px',
-                children: [
-                  SDUI.components.Card({
-                    children: [
-                      SDUI.components.Layout({
-                        padding: { top: 24, bottom: 24, left: 24, right: 24 },
-                        backgroundColor: '#EEF2FF',
-                        radius: 12,
-                        children: [
-                          SDUI.components.VStack({
-                            gap: 'space300',
-                            align: 'flex-start',
-                            children: [
-                              SDUI.components.Text({
-                                text: 'DOGS ON ROSTER',
-                                typestyle: 'bodyXsEmphasis',
-                                color: '#4F46E5',
-                              }),
-                              SDUI.components.Heading({
-                                level: 1,
-                                text: SDUI.template`${s.stats.dogCount}`,
-                              }),
-                              SDUI.components.Text({
-                                text: 'Active clients',
-                                color: 'secondary',
-                                typestyle: 'bodySm',
-                              }),
-                            ],
-                          }),
-                        ],
-                      }),
-                    ],
-                  }),
-                ],
-              }),
-              SDUI.components.Layout({
-                width: '32%',
-                minWidth: '260px',
-                children: [
-                  SDUI.components.Card({
-                    children: [
-                      SDUI.components.Layout({
-                        padding: { top: 24, bottom: 24, left: 24, right: 24 },
-                        backgroundColor: '#ECFDF5',
-                        radius: 12,
-                        children: [
-                          SDUI.components.VStack({
-                            gap: 'space300',
-                            align: 'flex-start',
-                            children: [
-                              SDUI.components.Text({
-                                text: 'SESSIONS BOOKED',
-                                typestyle: 'bodyXsEmphasis',
-                                color: '#059669',
-                              }),
-                              SDUI.components.Heading({
-                                level: 1,
-                                text: SDUI.template`${s.stats.sessionCount}`,
-                              }),
-                              SDUI.components.Text({
-                                text: 'On the calendar',
-                                color: 'secondary',
-                                typestyle: 'bodySm',
-                              }),
-                            ],
-                          }),
-                        ],
-                      }),
-                    ],
-                  }),
-                ],
-              }),
-              SDUI.components.Layout({
-                width: '32%',
-                minWidth: '260px',
-                children: [
-                  SDUI.components.Card({
-                    children: [
-                      SDUI.components.Layout({
-                        padding: { top: 24, bottom: 24, left: 24, right: 24 },
-                        backgroundColor: '#FFF7ED',
-                        radius: 12,
-                        children: [
-                          SDUI.components.VStack({
-                            gap: 'space300',
-                            align: 'flex-start',
-                            children: [
-                              SDUI.components.Text({
-                                text: 'PRACTICE MINUTES',
-                                typestyle: 'bodyXsEmphasis',
-                                color: '#EA580C',
-                              }),
-                              SDUI.components.Heading({
-                                level: 1,
-                                text: SDUI.template`${s.stats.totalMinutes}`,
-                              }),
-                              SDUI.components.Text({
-                                text: 'Ring & field time',
-                                color: 'secondary',
-                                typestyle: 'bodySm',
-                              }),
-                            ],
-                          }),
-                        ],
-                      }),
-                    ],
-                  }),
-                ],
-              }),
-            ],
-          }),
-          // Chart + Quick actions row — 66% / 32%
-          SDUI.components.HStack({
-            gap: 'space400',
-            wrap: 'wrap',
-            align: 'stretch',
-            justify: 'space-between',
-            children: [
-              SDUI.components.Layout({
-                width: '66%',
-                minWidth: '420px',
-                children: [
-                  SDUI.components.Card({
-                    title: 'Where practice time goes',
-                    children: [
-                      SDUI.components.VStack({
-                        gap: 'space400',
-                        align: 'stretch',
-                        children: [
-                          SDUI.components.Text({
-                            typestyle: 'bodyMd',
-                            color: 'secondary',
-                            text: 'Split across lesson types from your scheduled sessions.',
-                          }),
-                          // DistributionBar with no wrapping Layout — direct child of VStack
-                          SDUI.components.DistributionBar({
-                            segments: SESSION_TIME_SEGMENTS,
-                            totalValue: 100,
-                            size: 'standard',
-                          }),
-                          SDUI.components.HStack({
-                            gap: 'space300',
-                            wrap: 'wrap',
-                            justify: 'flex-start',
-                            children: [
-                              SDUI.components.Badge({
-                                text: SDUI.template`Obedience · ${PCT_TIME_OBEDIENCE}%`,
-                                appearance: 'PRIMARY_LIGHT',
-                              }),
-                              SDUI.components.Badge({
-                                text: SDUI.template`Agility · ${PCT_TIME_AGILITY}%`,
-                                appearance: 'WARNING_LIGHT',
-                              }),
-                            ],
-                          }),
-                          SDUI.components.Divider({}),
-                          SDUI.components.HStack({
-                            justify: 'space-between',
-                            align: 'center',
-                            children: [
-                              SDUI.components.Text({
-                                typestyle: 'bodySm',
-                                color: 'secondary',
-                                text: 'Want to dig in?',
-                              }),
-                              SDUI.components.Button({
-                                label: 'Open Schedule',
-                                appearance: 'OUTLINE',
-                                size: 'S',
-                                onPress: SDUI.actions.set(s.activeTab, 'sessions'),
-                              }),
-                            ],
-                          }),
-                        ],
-                      }),
-                    ],
-                  }),
-                ],
-              }),
-              SDUI.components.Layout({
-                width: '32%',
-                minWidth: '280px',
-                children: [
-                  SDUI.components.Card({
-                    title: 'Quick actions',
-                    children: [
-                      SDUI.components.VStack({
-                        gap: 'space300',
-                        align: 'stretch',
-                        children: [
-                          SDUI.components.Button({
-                            label: 'Add new dog',
-                            appearance: 'PRIMARY',
-                            size: 'M',
-                            isFluid: true,
-                            onPress: [
-                              SDUI.actions.set(s.dogForm, { dog_name: '', breed: '', age: '' }),
-                              SDUI.actions.set(s.showCreateDogModal, true),
-                            ],
-                          }),
-                          SDUI.components.Button({
-                            label: 'Schedule a session',
-                            appearance: 'OUTLINE',
-                            size: 'M',
-                            isFluid: true,
-                            onPress: [
-                              SDUI.actions.set(s.sessionForm, {
-                                dog_id: '',
-                                session_date: '',
-                                duration: '',
-                                training_type: '',
-                                notes: '',
-                              }),
-                              SDUI.actions.set(s.showCreateSessionModal, true),
-                            ],
-                          }),
-                          SDUI.components.Divider({}),
-                          // Use Link components instead of Button GHOST — they
-                          // naturally left-align as text and look cleaner here.
-                          SDUI.components.Text({
-                            typestyle: 'bodyXsEmphasis',
-                            color: 'secondary',
-                            text: 'JUMP TO',
-                          }),
-                          SDUI.components.Link({
-                            text: '→ View all dogs',
-                            href: '#',
-                            onPress: SDUI.actions.set(s.activeTab, 'dogs'),
-                          }),
-                          SDUI.components.Link({
-                            text: '→ View today',
-                            href: '#',
-                            onPress: SDUI.actions.set(s.activeTab, 'today'),
-                          }),
-                        ],
-                      }),
-                    ],
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      }),
-    ],
-  });
-  const dogsGrid = SDUI.components.Grid({
-    data: s.dogs,
-    height: 520,
-    columns: [
-      { id: 'dog_name__c', header: 'Name', data: 'dog_name__c', width: 220 },
-      { id: 'breed__c', header: 'Breed', data: 'breed__c', width: 280 },
-      { id: 'age__c', header: 'Age', data: 'age__c', width: 100 },
-      { id: 'total_training_time__c', header: 'Training time', data: 'total_training_time__c', width: 160 },
-    ],
-    selectedRow: s.selectedDog.$bind,
-    headerActions: [{ id: 'new_dog', label: 'Add Dog', icon: 'ADD', appearance: 'primary' }],
-    onHeaderAction: [
-      SDUI.actions.set(s.dogForm, { dog_name: '', breed: '', age: '' }),
-      SDUI.actions.set(s.showCreateDogModal, true),
-    ],
-    rowActions: [
-      { id: 'edit_dog', label: 'Edit', icon: 'EDIT_OUTLINE', placement: 'menu' },
-      { id: 'delete_dog', label: 'Delete', icon: 'TRASH_OUTLINE', placement: 'menu' },
-    ],
-    onRowAction: [
-      SDUI.actions.set(s.dogForm, {
-        dog_name: s.selectedDog['dog_name__c'],
-        breed: s.selectedDog['breed__c'],
-        age: s.selectedDog['age__c'],
-      }),
-      SDUI.actions.set(s.showEditDogModal, true),
-    ],
-  });
-
-  const sessionsGrid = SDUI.components.Grid({
-    data: s.sessions,
-    height: 520,
-    columns: [
-      { id: 'session_date__c', header: 'Date', data: 'session_date__c', width: 160 },
-      { id: 'duration__c', header: 'Duration (min)', data: 'duration__c', width: 140 },
-      { id: 'training_type__c', header: 'Type', data: 'training_type__c', type: 'text', width: 180 },
-      { id: 'notes__c', header: 'Notes', data: 'notes__c', width: 320 },
-    ],
-    selectedRow: s.selectedSession.$bind,
-    headerActions: [{ id: 'new_session', label: 'Add Session', icon: 'ADD', appearance: 'primary' }],
-    onHeaderAction: [
-      SDUI.actions.set(s.sessionForm, {
-        dog_id: '',
-        session_date: '',
-        duration: '',
-        training_type: '',
-        notes: '',
-      }),
-      SDUI.actions.set(s.showCreateSessionModal, true),
-    ],
-    rowActions: [
-      { id: 'edit_session', label: 'Edit', icon: 'EDIT_OUTLINE', placement: 'menu' },
-      { id: 'delete_session', label: 'Delete', icon: 'TRASH_OUTLINE', placement: 'menu' },
-    ],
-    onRowAction: [
-      SDUI.actions.set(s.sessionForm, {
-        dog_id: s.selectedSession['dog_id__c'],
-        session_date: s.selectedSession['session_date__c'],
-        duration: s.selectedSession['duration__c'],
-        training_type: s.selectedSession['training_type__c'],
-        notes: s.selectedSession['notes__c'],
-      }),
-      SDUI.actions.set(s.showEditSessionModal, true),
-    ],
-  });
-
-  const dogsPanel = SDUI.components.Layout({
-    width: '100%',
-    maxWidth: '1200px',
-    margin: { left: 'auto', right: 'auto' },
-    padding: { top: 32, bottom: 48, left: 28, right: 28 },
-    children: [
-      SDUI.components.VStack({
-        gap: 'space500',
-        align: 'stretch',
-        children: [
-          SDUI.components.VStack({
-            gap: 'space200',
-            children: [
-              SDUI.components.Heading({
-                level: 1,
-                text: 'Your dogs',
-              }),
-              SDUI.components.Text({
-                typestyle: 'bodyLg',
-                color: 'secondary',
-                text: 'Add Dog or use ⋯ on a row to edit or delete.',
-              }),
-            ],
-          }),
-          dogsGrid,
-        ],
-      }),
-    ],
-  });
-
-  const sessionsPanel = SDUI.components.Layout({
-    width: '100%',
-    maxWidth: '1200px',
-    margin: { left: 'auto', right: 'auto' },
-    padding: { top: 32, bottom: 48, left: 28, right: 28 },
-    children: [
-      SDUI.components.VStack({
-        gap: 'space500',
-        align: 'stretch',
-        children: [
-          SDUI.components.VStack({
-            gap: 'space200',
-            children: [
-              SDUI.components.Heading({
-                level: 1,
-                text: 'Session schedule',
-              }),
-              SDUI.components.Text({
-                typestyle: 'bodyLg',
-                color: 'secondary',
-                text: 'Add Session or use ⋯ on a row. Dog ID must match a roster id (e.g. dog_1).',
-              }),
-            ],
-          }),
-          sessionsGrid,
-        ],
-      }),
-    ],
-  });
-
-  const todayPanel = SDUI.components.Layout({
-    width: '100%',
-    maxWidth: '1200px',
-    margin: { left: 'auto', right: 'auto' },
-    padding: { top: 32, bottom: 48, left: 28, right: 28 },
-    children: [
-      SDUI.components.VStack({
-        gap: 'space600',
-        align: 'stretch',
-        children: [
-          SDUI.components.VStack({
-            gap: 'space200',
-            children: [
-              SDUI.components.Heading({
-                level: 1,
-                text: 'Today & coming up',
-              }),
-              SDUI.components.Text({
-                typestyle: 'bodyLg',
-                color: 'secondary',
-                text: 'Snapshot of upcoming lessons — production would filter by “today” from your sessions.',
-              }),
-            ],
-          }),
-          SDUI.components.TableBasic({
-            title: 'Who’s on deck',
-            width: 1100,
-            columns: [
-              { header: 'When', key: 'when', width: '22%' },
-              { header: 'Dog', key: 'dog', width: '22%' },
-              { header: 'Type', key: 'type', width: '18%' },
-              { header: 'Focus', key: 'focus', width: '38%' },
-            ],
-            rows: [
-              { when: 'Apr 1 · AM', dog: 'Rex', type: 'Obedience', focus: 'Recall · ring A' },
-              { when: 'Apr 2 · PM', dog: 'Luna', type: 'Agility', focus: 'Weaves & contacts' },
-            ],
-          }),
-          SDUI.components.ActionCard({
-            title: 'Need to change something?',
-            caption: 'Full calendar editing lives on Schedule; roster edits live under Dogs.',
-            icon: 'CALENDAR',
-            alignment: 'CENTER',
-            primaryActionTitle: 'Open Schedule',
-            onPressPrimary: SDUI.actions.set(s.activeTab, 'sessions'),
-            secondaryActionTitle: 'Open Dogs',
-            onPressSecondary: SDUI.actions.set(s.activeTab, 'dogs'),
-          }),
-        ],
-      }),
-    ],
-  });
-
-  const resourcesPanel = SDUI.components.Layout({
-    width: '100%',
-    maxWidth: '1200px',
-    margin: { left: 'auto', right: 'auto' },
-    padding: { top: 32, bottom: 48, left: 28, right: 28 },
-    children: [
-      SDUI.components.VStack({
-        gap: 'space600',
-        align: 'stretch',
-        children: [
-          SDUI.components.VStack({
-            gap: 'space200',
-            children: [
-              SDUI.components.Heading({
-                level: 1,
-                text: 'Resources & safety',
-              }),
-              SDUI.components.Text({
-                typestyle: 'bodyLg',
-                color: 'secondary',
-                text: 'Replace these with real PDFs and links — structure stays the same for handlers.',
-              }),
-            ],
-          }),
-          SDUI.components.Tip({
-            title: 'Reactive dogs at the gate',
-            content:
-              'Stagger arrivals so reactive pups aren’t face-to-face in the lobby; post your muzzle policy here.',
-          }),
-          SDUI.components.Tip({
-            title: 'Emergency vet & after hours',
-            content:
-              'Pin clinic phone, poison control, and directions — trainers shouldn’t hunt for them mid-class.',
-          }),
-          SDUI.components.Card({
-            title: 'Files you’ll attach later',
-            children: [
-              SDUI.components.VStack({
-                gap: 'space400',
-                align: 'stretch',
-                children: [
-                  SDUI.components.Text({
-                    typestyle: 'bodyLg',
-                    color: 'secondary',
-                    text: 'Typical uploads: liability waiver, vaccine proof, venue rules, incident report template.',
-                  }),
-                  SDUI.components.HStack({
-                    gap: 'space300',
-                    wrap: 'wrap',
-                    children: [
-                      SDUI.components.Badge({ text: 'Waivers', appearance: 'PRIMARY_LIGHT' }),
-                      SDUI.components.Badge({ text: 'Vaccination records', appearance: 'SUCCESS_LIGHT' }),
-                      SDUI.components.Badge({ text: 'Venue map', appearance: 'WARNING_LIGHT' }),
-                      SDUI.components.Badge({ text: 'Incident log', appearance: 'INFO_LIGHT' }),
-                    ],
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      }),
-    ],
-  });
-
-  const root = SDUI.components.Layout({
-    width: '100%',
-    minHeight: 920,
-    children: [
-      SDUI.components.VStack({
-        align: 'stretch',
-        gap: 'space500',
-        children: [
-          SDUI.components.Tab({
-            value: s.activeTab.$bind,
-            items: [
-              { label: 'Home', value: 'overview' },
-              { label: 'Dogs', value: 'dogs' },
-              { label: 'Schedule', value: 'sessions' },
-              { label: 'Today', value: 'today' },
-              { label: 'Resources', value: 'resources' },
-            ],
-          }),
-          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'overview'), overviewPanel),
-          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'dogs'), dogsPanel),
-          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'sessions'), sessionsPanel),
-          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'today'), todayPanel),
-          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'resources'), resourcesPanel),
-
-          SDUI.components.Modal({
-            title: 'Add Dog',
-            isOpen: s.showCreateDogModal.$bind,
-            onClose: SDUI.actions.set(s.showCreateDogModal, false),
-            children: [
-              SDUI.components.VStack({
-                gap: 'space300',
-                children: [
-                  SDUI.components.TextInput({
-                    label: 'Dog Name',
-                    name: 'dog_name',
-                    value: s.dogForm.dog_name.$bind,
-                    isRequired: true,
-                  }),
-                  SDUI.components.TextInput({
-                    label: 'Breed',
-                    name: 'breed',
-                    value: s.dogForm.breed.$bind,
-                  }),
-                  SDUI.components.Number({
-                    label: 'Age (years)',
-                    name: 'age',
-                    value: s.dogForm.age.$bind,
-                  }),
-                ],
-              }),
-              SDUI.components.HStack({
-                gap: 'space200',
-                justify: 'flex-end',
-                children: [
-                  SDUI.components.Button({
-                    label: 'Cancel',
-                    appearance: 'OUTLINE',
-                    onPress: SDUI.actions.set(s.showCreateDogModal, false),
-                  }),
-                  SDUI.components.Button({
-                    label: 'Create',
-                    appearance: 'PRIMARY',
-                    onPress: SDUI.actions.callFunction(functionId, 'create_dog', {
-                      dog_name: s.dogForm.dog_name,
-                      breed: s.dogForm.breed,
-                      age: s.dogForm.age,
-                      responsePath: '/dogs',
-                      onSuccess: { set: { '/showCreateDogModal': false } },
-                    }),
-                  }),
-                ],
-              }),
-            ],
-          }),
-
-          SDUI.components.Modal({
-            title: 'Edit Dog',
-            isOpen: s.showEditDogModal.$bind,
-            onClose: SDUI.actions.set(s.showEditDogModal, false),
-            children: [
-              SDUI.components.VStack({
-                gap: 'space300',
-                children: [
-                  SDUI.components.TextInput({
-                    label: 'Dog Name',
-                    name: 'edit_dog_name',
-                    value: s.dogForm.dog_name.$bind,
-                    isRequired: true,
-                  }),
-                  SDUI.components.TextInput({
-                    label: 'Breed',
-                    name: 'edit_breed',
-                    value: s.dogForm.breed.$bind,
-                  }),
-                  SDUI.components.Number({
-                    label: 'Age (years)',
-                    name: 'edit_age',
-                    value: s.dogForm.age.$bind,
-                  }),
-                ],
-              }),
-              SDUI.components.HStack({
-                gap: 'space200',
-                justify: 'flex-end',
-                children: [
-                  SDUI.components.Button({
-                    label: 'Delete',
-                    appearance: 'DESTRUCTIVE',
-                    onPress: SDUI.actions.callFunction(functionId, 'delete_dog', {
-                      id: s.selectedDog['id'],
-                      responsePath: '/dogs',
-                      onSuccess: { set: { '/showEditDogModal': false } },
-                    }),
-                  }),
-                  SDUI.components.Button({
-                    label: 'Cancel',
-                    appearance: 'OUTLINE',
-                    onPress: SDUI.actions.set(s.showEditDogModal, false),
-                  }),
-                  SDUI.components.Button({
-                    label: 'Save',
-                    appearance: 'PRIMARY',
-                    onPress: SDUI.actions.callFunction(functionId, 'update_dog', {
-                      id: s.selectedDog['id'],
-                      dog_name: s.dogForm.dog_name,
-                      breed: s.dogForm.breed,
-                      age: s.dogForm.age,
-                      responsePath: '/dogs',
-                      onSuccess: { set: { '/showEditDogModal': false } },
-                    }),
-                  }),
-                ],
-              }),
-            ],
-          }),
-
-          SDUI.components.Modal({
-            title: 'Add Training Session',
-            isOpen: s.showCreateSessionModal.$bind,
-            onClose: SDUI.actions.set(s.showCreateSessionModal, false),
-            children: [
-              SDUI.components.VStack({
-                gap: 'space300',
-                children: [
-                  SDUI.components.TextInput({
-                    label: 'Dog ID',
-                    name: 'dog_id',
-                    value: s.sessionForm.dog_id.$bind,
-                    isRequired: true,
-                  }),
-                  SDUI.components.TextInput({
-                    label: 'Session Date',
-                    name: 'session_date',
-                    value: s.sessionForm.session_date.$bind,
-                    isRequired: true,
-                  }),
-                  SDUI.components.Number({
-                    label: 'Duration (min)',
-                    name: 'duration',
-                    value: s.sessionForm.duration.$bind,
-                  }),
-                  SDUI.components.Select({
-                    label: 'Training Type',
-                    name: 'training_type',
-                    value: s.sessionForm.training_type.$bind,
-                    options: [
-                      { label: 'Obedience', value: 'Obedience' },
-                      { label: 'Agility', value: 'Agility' },
-                      { label: 'Socialization', value: 'Socialization' },
-                      { label: 'Behavior', value: 'Behavior' },
-                    ],
-                  }),
-                  SDUI.components.Textarea({
-                    label: 'Notes',
-                    name: 'notes',
-                    value: s.sessionForm.notes.$bind,
-                  }),
-                ],
-              }),
-              SDUI.components.HStack({
-                gap: 'space200',
-                justify: 'flex-end',
-                children: [
-                  SDUI.components.Button({
-                    label: 'Cancel',
-                    appearance: 'OUTLINE',
-                    onPress: SDUI.actions.set(s.showCreateSessionModal, false),
-                  }),
-                  SDUI.components.Button({
-                    label: 'Create',
-                    appearance: 'PRIMARY',
-                    onPress: SDUI.actions.callFunction(functionId, 'create_session', {
-                      dog_id: s.sessionForm.dog_id,
-                      session_date: s.sessionForm.session_date,
-                      duration: s.sessionForm.duration,
-                      training_type: s.sessionForm.training_type,
-                      notes: s.sessionForm.notes,
-                      responsePath: '/sessions',
-                      onSuccess: { set: { '/showCreateSessionModal': false } },
-                    }),
-                  }),
-                ],
-              }),
-            ],
-          }),
-
-          SDUI.components.Modal({
-            title: 'Edit Training Session',
-            isOpen: s.showEditSessionModal.$bind,
-            onClose: SDUI.actions.set(s.showEditSessionModal, false),
-            children: [
-              SDUI.components.VStack({
-                gap: 'space300',
-                children: [
-                  SDUI.components.TextInput({
-                    label: 'Dog ID',
-                    name: 'edit_dog_id',
-                    value: s.sessionForm.dog_id.$bind,
-                    isRequired: true,
-                  }),
-                  SDUI.components.TextInput({
-                    label: 'Session Date',
-                    name: 'edit_session_date',
-                    value: s.sessionForm.session_date.$bind,
-                    isRequired: true,
-                  }),
-                  SDUI.components.Number({
-                    label: 'Duration (min)',
-                    name: 'edit_duration',
-                    value: s.sessionForm.duration.$bind,
-                  }),
-                  SDUI.components.Select({
-                    label: 'Training Type',
-                    name: 'edit_training_type',
-                    value: s.sessionForm.training_type.$bind,
-                    options: [
-                      { label: 'Obedience', value: 'Obedience' },
-                      { label: 'Agility', value: 'Agility' },
-                      { label: 'Socialization', value: 'Socialization' },
-                      { label: 'Behavior', value: 'Behavior' },
-                    ],
-                  }),
-                  SDUI.components.Textarea({
-                    label: 'Notes',
-                    name: 'edit_notes',
-                    value: s.sessionForm.notes.$bind,
-                  }),
-                ],
-              }),
-              SDUI.components.HStack({
-                gap: 'space200',
-                justify: 'flex-end',
-                children: [
-                  SDUI.components.Button({
-                    label: 'Delete',
-                    appearance: 'DESTRUCTIVE',
-                    onPress: SDUI.actions.callFunction(functionId, 'delete_session', {
-                      id: s.selectedSession['id'],
-                      responsePath: '/sessions',
-                      onSuccess: { set: { '/showEditSessionModal': false } },
-                    }),
-                  }),
-                  SDUI.components.Button({
-                    label: 'Cancel',
-                    appearance: 'OUTLINE',
-                    onPress: SDUI.actions.set(s.showEditSessionModal, false),
-                  }),
-                  SDUI.components.Button({
-                    label: 'Save',
-                    appearance: 'PRIMARY',
-                    onPress: SDUI.actions.callFunction(functionId, 'update_session', {
-                      id: s.selectedSession['id'],
-                      dog_id: s.sessionForm.dog_id,
-                      session_date: s.sessionForm.session_date,
-                      duration: s.sessionForm.duration,
-                      training_type: s.sessionForm.training_type,
-                      notes: s.sessionForm.notes,
-                      responsePath: '/sessions',
-                      onSuccess: { set: { '/showEditSessionModal': false } },
-                    }),
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      }),
-    ],
-  });
-
-  return SDUI.render(s, root);
-}
-
-console.log(JSON.stringify(renderSpec('demo-fn'), null, 2));