feat(docs): add live code tab layout component

packages/docs/src/components/live-code-tab-layout.astro

@@ -0,0 +1,36 @@
+---
+// See https://astro-live-code.vercel.app/guides/customization/
+//
+// Layouts can be specified for a specific code block by adding a layout attribute to the code block:
+// ```tsx layout="~/components/live-code-tab-layout.astro"
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+---
+
+<Tabs>
+  <TabItem label="Preview" >
+    <div class="example-container">
+      <slot name="example" />
+    </div>
+  </TabItem>
+  <TabItem label="Code">
+    <slot name="code" />
+  </TabItem>
+</TabItem>
+
+<style>
+  .live-code-layout {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .example-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2.5rem;
+    background: var(--ec-frm-edBg, var(--astro-code-color-background));
+    border-style: solid;
+    border-width: var(--ec-brdWd, 1px);
+    border-color: var(--ec-brdCol, var(--sl-color-gray-5));
+  }
+</style>

packages/docs/src/content/docs/customization/theme.mdx

@@ -41,7 +41,7 @@ export default function AdvancedFilter({ schema }) {
 
 You can override existing theme by replacing them with your own custom components or templates.
 
-```tsx live wrapper="~/components/mui-theme-wrapper.tsx"
+```tsx live wrapper="~/components/mui-theme-wrapper.tsx" layout="~/components/live-code-tab-layout.astro"
 import { filterTheme } from "@fn-sphere/theme-mui-material";
 import { Button } from "@mui/material";
 import {
@@ -51,8 +51,9 @@ import {
   useFilterRule,
   useFilterGroup,
   useView,
+  createFilterGroup,
+  createSingleFilter,
 } from "@fn-sphere/filter";
-import { Fragment } from "react";
 
 const customTheme = {
   ...filterTheme,
@@ -113,8 +114,22 @@ const customTheme = {
   },
 };
 
+const presetRule = createFilterGroup({
+  op: "and",
+  conditions: [
+    createSingleFilter(),
+    createFilterGroup({
+      op: "or",
+      conditions: [createSingleFilter(), createSingleFilter()],
+    }),
+  ],
+});
+
 export default function AdvancedFilter({ schema }) {
-  const { predicate, context } = useFilterSphere({ schema });
+  const { predicate, context } = useFilterSphere({
+    schema,
+    defaultRule: presetRule,
+  });
   return (
     <FilterSphereProvider context={context} theme={customTheme}>
       <FilterBuilder />