.gitignore and v0.2.0

playground/src/App.vue

@@ -15,6 +15,7 @@ import {
   DsInline,
   DsInlineMessage,
   DsLoadingState,
+  DsLogicTree,
   DsPageHeader,
   DsPanel,
   DsPasswordInput,
@@ -25,23 +26,34 @@ import {
   DsSelect,
   DsSettingsSection,
   DsSkeleton,
+  DsSortableList,
   DsSpinner,
   DsStack,
   DsSwitch,
   DsTabs,
   DsTextarea,
   DsTextInput,
+  type DsLogicGroup,
+  type DsSortableItem,
   type DsTabItem,
 } from "@omaresquivel/design-system";
 
 const sections: DsTabItem[] = [
   { id: "catalog", label: "Catálogo" },
+  { id: "tools", label: "Herramientas" },
   { id: "profile", label: "Perfil" },
   { id: "settings", label: "Configuración" },
   { id: "form", label: "Formulario largo" },
   { id: "states", label: "Estados de panel" },
 ];
-const currentSection = ref("catalog");
+const requestedSection = new URLSearchParams(window.location.search).get(
+  "section",
+);
+const currentSection = ref(
+  sections.some((section) => section.id === requestedSection)
+    ? (requestedSection ?? "catalog")
+    : "catalog",
+);
 const name = ref("Omar Esquivel");
 const email = ref("omar@example.com");
 const password = ref("correct horse battery staple");
@@ -55,6 +67,63 @@ const terms = ref(false);
 const dialogOpen = ref(false);
 const confirmOpen = ref(false);
 const panelState = ref<"loading" | "error" | "empty" | "success">("success");
+const sortableItems = ref<DsSortableItem[]>([
+  {
+    id: "discovery",
+    label: "Descubrimiento",
+    description: "Entender el problema y las personas usuarias.",
+  },
+  {
+    id: "design",
+    label: "Diseño",
+    description: "Proponer y validar una solución.",
+  },
+  {
+    id: "delivery",
+    label: "Entrega",
+    description: "Construir, medir y aprender.",
+  },
+]);
+const logicFields = [
+  { label: "Estado", value: "status" },
+  { label: "País", value: "country" },
+  { label: "Plan", value: "plan" },
+];
+const logicTree = ref<DsLogicGroup>({
+  id: "audience",
+  type: "group",
+  operator: "and",
+  children: [
+    {
+      id: "active-users",
+      type: "condition",
+      field: "status",
+      comparison: "equals",
+      value: "active",
+    },
+    {
+      id: "market",
+      type: "group",
+      operator: "or",
+      children: [
+        {
+          id: "mexico",
+          type: "condition",
+          field: "country",
+          comparison: "equals",
+          value: "MX",
+        },
+        {
+          id: "pro-plan",
+          type: "condition",
+          field: "plan",
+          comparison: "equals",
+          value: "pro",
+        },
+      ],
+    },
+  ],
+});
 const nameError = computed(() =>
   name.value.length > 0 && name.value.length < 3
     ? "Escribe al menos tres caracteres."
@@ -261,6 +330,52 @@ const planOptions = [
             </DsStack>
           </template>
 
+          <template #tools>
+            <DsStack :gap="6">
+              <DsSectionHeader
+                title="Herramientas interactivas"
+                description="Primeros contratos para ordenar contenido y construir reglas anidadas."
+              />
+              <DsPanel>
+                <DsStack :gap="4">
+                  <DsSectionHeader
+                    title="Ordenar etapas"
+                    description="Arrastra los elementos o usa los botones para moverlos."
+                  />
+                  <DsSortableList
+                    v-model="sortableItems"
+                    label="Etapas del proyecto"
+                  />
+                </DsStack>
+              </DsPanel>
+
+              <DsPanel>
+                <DsStack :gap="4">
+                  <DsSectionHeader
+                    title="Árbol lógico"
+                    description="Combina grupos AND/OR y condiciones editables."
+                  />
+                  <DsLogicTree
+                    v-model="logicTree"
+                    :fields="logicFields"
+                    label="Reglas de audiencia"
+                  />
+                </DsStack>
+              </DsPanel>
+              <DsPanel tone="muted">
+                <DsStack :gap="3">
+                  <DsSectionHeader
+                    title="Modelo serializable"
+                    description="El resultado del árbol puede guardarse o enviarse directamente como JSON."
+                  />
+                  <pre class="playground-code"><code>{{
+                    JSON.stringify(logicTree, null, 2)
+                  }}</code></pre>
+                </DsStack>
+              </DsPanel>
+            </DsStack>
+          </template>
+
           <template #profile>
             <DsStack :gap="6">
               <DsSectionHeader