some reactivity improvements and missing dims for tabcomponents (#5146)

frontend/src/lib/components/apps/components/display/AppAccordionList.svelte

@@ -23,7 +23,8 @@
 	type InternalAccordionListInput = AppInput & {
 		value: AccordionListValue[];
 	};
-	const accordionInput = componentInput as InternalAccordionListInput
+
+	$: accordionInput = componentInput as InternalAccordionListInput;
 
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -101,7 +102,7 @@
 							)}
 						>
 							<span class="mr-2 w-8 font-mono">{activeIndex === index ? '-' : '+'}</span>
-							{accordionInput?.value[index].header || `Header ${index}`}
+							{accordionInput?.value[index]?.header || `Header ${index}`}
 						</button>
 						{#if activeIndex === index}
 							<div class="p-2 overflow-auto w-full">

frontend/src/lib/components/apps/editor/component/components.ts

@@ -4167,6 +4167,7 @@ export const presetComponents = {
 	sidebartabscomponent: {
 		name: 'Sidebar Tabs',
 		icon: PanelLeft,
+		dims: '3:8-12:8' as AppComponentDimensions,
 		targetComponent: 'tabscomponent' as const,
 		configuration: {
 			tabsKind: {
@@ -4178,6 +4179,7 @@ export const presetComponents = {
 	accordiontabcomponent: {
 		name: 'Accordion Tabs',
 		icon: ListCollapse,
+		dims: '3:8-12:8' as AppComponentDimensions,
 		targetComponent: 'tabscomponent' as const,
 		configuration: {
 			tabsKind: {
@@ -4189,6 +4191,7 @@ export const presetComponents = {
 	invisibletabscomponent: {
 		name: 'Invisible Tabs',
 		icon: PanelTopInactive,
+		dims: '3:8-12:8' as AppComponentDimensions,
 		targetComponent: 'tabscomponent' as const,
 		configuration: {
 			tabsKind: {