Update

Author: amirhhashemi

app.config.ts

@@ -98,7 +98,7 @@ export default defineConfig(
 							"install-local": "pnpm i",
 							run: "pnpm :content",
 							exec: "pnpx :content",
-							create: "pnpm init :content",
+							create: "pnpm create :content",
 						},
 						yarn: {
 							install: "yarn add :content",
@@ -115,16 +115,16 @@ export default defineConfig(
 							"install-global": "bun i :content -g",
 							"install-local": "bun i",
 							run: "bun :content",
-              exec: "bunx :content",
-              create: "bun create :content",
+							exec: "bunx :content",
+							create: "bun create :content",
 						},
 						deno: {
 							install: "deno add npm::content",
 							"install-dev": "deno add npm::content -D",
 							"install-global": "deno add npm::content -g",
 							"install-local": "deno i",
 							run: "deno run :content",
-							"exec": "dpx :content",
+							exec: "dpx :content",
 							create: "deno run -A npm::content",
 						},
 					},

package.json

@@ -26,7 +26,6 @@
 		"@solid-primitives/marker": "^0.1.0",
 		"@solid-primitives/media": "^2.2.9",
 		"@solid-primitives/platform": "^0.2.0",
-		"@solid-primitives/storage": "^4.3.1",
 		"@solidjs/meta": "^0.29.4",
 		"@solidjs/router": "^0.15.3",
 		"@solidjs/start": "^1.1.1",

pnpm-lock.yaml

@@ -1,13 +1,10 @@
 import {
-	Accessor,
 	For,
 	Match,
 	type ParentProps,
-	Show,
 	Switch,
 	children,
 	createMemo,
-	createSignal,
 	splitProps,
 } from "solid-js";
 import { isServer } from "solid-js/web";
@@ -16,7 +13,6 @@ import { A } from "~/ui/i18n-anchor";
 import { clientOnly } from "@solidjs/start";
 import { Callout } from "~/ui/callout";
 import { Tabs, TabList, TabPanel, Tab } from "~/ui/tabs";
-import { makePersisted, messageSync } from "@solid-primitives/storage";
 
 export { EditPageLink } from "../ui/edit-page-link";
 export { PageIssueLink } from "../ui/page-issue-link";
@@ -37,43 +33,8 @@ export const DirectiveContainer = (
 	} & ParentProps
 ) => {
 	const _children = children(() => props.children).toArray();
-
 	const tabNames = createMemo(() => props.tabNames?.split("\0") ?? []);
 
-	const tabs = (value?: Accessor<string>, onChange?: (s: string) => void) => (
-		<Tabs value={value?.()} onChange={onChange}>
-			<TabList>
-				<For each={tabNames()}>
-					{(title) => (
-						<Tab
-							value={title}
-							class="px-5 py-1 relative top-0.5 transition-colors duration-300 aria-selected:font-bold aria-selected:dark:text-slate-300 aria-selected:text-blue-500 aria-selected:border-b-2 aria-selected:border-blue-400"
-						>
-							{title}
-						</Tab>
-					)}
-				</For>
-			</TabList>
-			<For each={tabNames()}>
-				{(title, idx) => (
-					<TabPanel value={title} forceMount={true}>
-						{_children[idx()]}
-					</TabPanel>
-				)}
-			</For>
-		</Tabs>
-	);
-
-	const tabsWithPersistence = () => {
-		// eslint-disable-next-line solid/reactivity
-		const [openTab, setOpenTab] = makePersisted(createSignal(tabNames()[0]), {
-			name: `tab-group:${props.title}`,
-			sync: messageSync(new BroadcastChannel("tab-group")),
-		});
-
-		return tabs(openTab, setOpenTab);
-	};
-
 	return (
 		<Switch
 			fallback={
@@ -82,9 +43,20 @@ export const DirectiveContainer = (
 		>
 			<Match when={props.type === "tab"}>{_children}</Match>
 			<Match when={props.type === "tab-group"}>
-				<Show when={props.title} fallback={tabs()}>
-					{tabsWithPersistence()}
-				</Show>
+				<Tabs>
+					<TabList>
+						<For each={tabNames()}>
+							{(title) => <Tab value={title}>{title}</Tab>}
+						</For>
+					</TabList>
+					<For each={tabNames()}>
+						{(title, idx) => (
+							<TabPanel value={title} forceMount={true}>
+								{_children[idx()]}
+							</TabPanel>
+						)}
+					</For>
+				</Tabs>
 			</Match>
 		</Switch>
 	);