@middag-io/react 0.6.0 → 0.7.1

package/README.md

@@ -0,0 +1,349 @@
+# @middag-io/react
+
+Shared React UI library for the MIDDAG ecosystem. Consumed by Moodle (`local_middag`) and WordPress host plugins via Inertia.js.
+
+**[Live Demo](https://middag-react-mock.pages.dev)** | **[Documentation](https://ui-docs.middag.io)**
+
+## Stack
+
+- React 19, TypeScript, Tailwind CSS v4
+- Inertia.js (peer dependency -- all hosts use Inertia)
+- ReUI components (Radix-based)
+- TanStack Table, @xyflow/react, @dnd-kit
+
+## Install
+
+### Quick start (recommended)
+
+```bash
+# Community (no auth needed)
+npx create-middag-ui
+
+# PRO (source maps, mock SPA, full exports)
+npx @middag-io/create-middag-ui
+```
+
+The wizard detects your host platform (Moodle/WordPress), configures authentication, and scaffolds a `ui/` directory with a working mock build.
+
+### Manual install
+
+**npm public (no auth needed):**
+
+```bash
+npm install @middag-io/react react react-dom @inertiajs/react @inertiajs/core
+```
+
+**GitHub Packages (includes TypeScript source for IDE navigation):**
+
+```bash
+# Add to global ~/.npmrc
+echo "@middag-io:registry=https://npm.pkg.github.com" >> ~/.npmrc
+echo "//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN" >> ~/.npmrc
+
+npm install @middag-io/react react react-dom @inertiajs/react @inertiajs/core
+```
+
+Create a token at [github.com/settings/tokens](https://github.com/settings/tokens) with `read:packages` scope. See [Authentication](https://ui-docs.middag.io/authentication) for details.
+
+> **GitHub Packages access requires:** membership in the [middag-io](https://github.com/middag-io) organization on GitHub. The token alone is not sufficient — you must have read access to the `middag-io/middag-react` repository.
+
+### Community vs PRO
+
+| Content | Community | PRO |
+|---------|-----------|-----|
+| ESM bundle (`dist-lib/`) | Yes | Yes |
+| TypeScript declarations (`.d.ts`) | Yes | Yes |
+| Declaration maps (`.d.ts.map`) | Yes | Yes |
+| TypeScript source (`src/`) | No | Yes |
+| Mock SPA extensible (`mock/`) | No | Yes |
+| IDE "go to definition" into source | No | Yes |
+| Authentication required | No | Yes |
+
+Both editions deliver the same runtime code. Community is sufficient for building plugins. PRO additionally includes TypeScript source for IDE navigation and the extensible mock SPA.
+
+## Usage
+
+```tsx
+import { ContractPage, registerDefaults } from '@middag-io/react';
+import type { PageContract } from '@middag-io/react';
+
+// Register core shells, layouts, and all 17 blocks
+registerDefaults();
+
+// Render a contract-driven page
+<ContractPage contract={myContract} />
+```
+
+### Selective registration (IIFE consumers)
+
+WordPress and other IIFE consumers should import only the blocks they need to avoid bundling heavy dependencies (@xyflow/react, @dnd-kit) via `inlineDynamicImports`:
+
+```tsx
+import {
+  ContractPage,
+  registerShell, registerLayout, registerBlock,
+  AdminShell, StackLayout, DashboardLayout,
+  DenseTableBlock, MetricCardBlock, EmptyStateBlock,
+} from '@middag-io/react';
+
+registerShell('admin', AdminShell);
+registerLayout('stack', StackLayout);
+registerLayout('dashboard', DashboardLayout);
+registerBlock('dense_table', DenseTableBlock);
+registerBlock('metric_card', MetricCardBlock);
+registerBlock('empty_state', EmptyStateBlock);
+```
+
+### Lazy block loading
+
+Blocks can defer data loading until they mount (useful for tabbed pages):
+
+```tsx
+// PHP sends block with empty data + lazyProp metadata:
+{
+  type: 'dense_table',
+  key: 'invoices',
+  data: {},
+  meta: { lazyProp: 'invoices' }
+}
+
+// PHP also sends a top-level Inertia prop (initially null):
+// 'invoices' => null
+
+// When the block mounts, it auto-fetches via router.reload({ only: ['invoices'] })
+// Radix Tabs unmounts inactive tabs, so lazy blocks only fetch when their tab activates
+```
+
+### ReUI components
+
+Consumers can import ReUI primitives for custom components:
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@middag-io/react/reui/tabs.tsx';
+import { Button } from '@middag-io/react/reui/button.tsx';
+```
+
+### Custom blocks
+
+```tsx
+import { registerBlock, type BlockProps } from '@middag-io/react';
+
+function ChartBlock({ block }: BlockProps<{ labels: string[]; values: number[] }>) {
+  return <div>{/* your chart */}</div>;
+}
+
+registerBlock('chart', ChartBlock);
+```
+
+### Contract validation
+
+```tsx
+import { validatePageContract } from '@middag-io/react';
+
+const errors = validatePageContract(contractFromBackend);
+if (errors) {
+  console.error('Invalid contract:', errors);
+}
+```
+
+Zod schemas are exported for consumers who want to extend validation or generate JSON Schema for PHP consumers.
+
+### i18n with host-specific resolver
+
+```tsx
+import { I18nProvider } from '@middag-io/react';
+
+// Moodle: inject Moodle string resolver
+<I18nProvider asyncResolver={moodleGetStrings}>
+  <App />
+</I18nProvider>
+
+// WordPress: inject WP i18n resolver
+<I18nProvider asyncResolver={wpGetStrings}>
+  <App />
+</I18nProvider>
+```
+
+## Architecture
+
+```
+src/
+  app/           # ContractPage, registries, providers, LazyBlock
+  base/          # Shells, layouts, blocks, hooks, theme, partials
+  components/
+    reui/        # ReUI primitives (Radix-based, source of truth)
+    examples/    # ReUI component examples (synced from registry)
+  contracts/     # TypeScript types (PageContract, BlockData, etc.)
+  lib/           # Generic utilities and hooks
+  assets/        # Fonts, lottie animations
+  index.ts       # Barrel export
+mock/            # Dev playground (standalone SPA, no server needed)
+scripts/         # Tooling (sync, doctor)
+.githooks/       # Git hooks (pre-commit, commit-msg, pre-push)
+.changeset/      # Changesets config for automated versioning
+```
+
+### What belongs here vs host plugins
+
+| Here (@middag-io/react)     | Host plugin (Moodle/WP)             |
+|-----------------------------|-------------------------------------|
+| Shells, layouts, blocks     | Extensions with host-specific pages |
+| ContractPage renderer       | Inertia server-side adapter         |
+| Theme system                | License validation (server-side)    |
+| i18n provider (generic)     | i18n resolver (host-specific)       |
+| Type contracts              | API endpoints, DB queries           |
+| ReUI examples (reference)   | Custom components                   |
+| Mock build (dev playground) | AMD build (Moodle), ESM bundle (WP) |
+
+### Extension model
+
+Extensions implement `ExtensionPage` (extends `PageContract`) for licensed features. The build gate excludes unlicensed extensions at compile time. Host plugins handle server-side license checks and only send contracts for active extensions.
+
+## Development
+
+```bash
+# Check environment
+npm run doctor
+
+# Mock build -- standalone SPA, no server needed
+npm run dev:mock        # http://localhost:5174
+
+# Typecheck
+npm run typecheck
+
+# Lint
+npm run lint:fix
+
+# Build ESM lib
+npm run build
+```
+
+### Host switching (mock only)
+
+The mock build includes a host switcher (M/W button in sidebar footer) to preview the UI inside Moodle Boost header or WordPress admin chrome.
+
+### ReUI component examples
+
+Examples from the ReUI registry are synced to `src/components/examples/`. They serve as reference for component usage and are excluded from the published NPM package.
+
+```bash
+# Sync all examples from ReUI registry (auto-discovers new components)
+npm run sync:examples
+
+# Preview what would be synced
+npm run sync:examples -- --dry-run
+
+# Check if new examples are available (used by CI)
+npm run sync:examples -- --check
+```
+
+A GitHub Action runs weekly (Mondays 8:00 UTC) to check for new examples and opens a PR automatically if updates are available.
+
+## Git Hooks
+
+Configured via `.githooks/` (activated by `npm run prepare`):
+
+| Hook         | Trigger      | Protection                           |
+|--------------|--------------|--------------------------------------|
+| `pre-commit` | `git commit` | Typecheck + lint on staged files     |
+| `commit-msg` | `git commit` | Enforces Conventional Commits format |
+| `pre-push`   | `git push`   | Full typecheck + lib build           |
+
+## Versioning
+
+Uses [Changesets](https://github.com/changesets/changesets) for automated versioning and changelog with GitHub-linked entries.
+
+```bash
+# After finishing a feature:
+npx changeset           # select patch/minor/major, write summary
+git add . && git commit  # include the .changeset/*.md file
+
+# On merge to main:
+# GitHub Action opens "Version Packages" PR
+# Merge that PR to publish to GitHub Packages
+```
+
+## CLI
+
+The package includes a CLI for bootstrapping and maintaining the UI layer in consumer projects:
+
+| Command                                 | Description                                                                   |
+|-----------------------------------------|-------------------------------------------------------------------------------|
+| `npx create-middag-ui`                  | Bootstrap `ui/` (Community)                                                   |
+| `npx @middag-io/create-middag-ui`       | Bootstrap `ui/` (PRO)                                                         |
+| `npx @middag-io/react doctor`           | Validate consumer project setup (deps, configs, peer deps)                    |
+| `npx @middag-io/react dev`              | Start mock dev server from consumer project                                   |
+| `npx @middag-io/react add-block <type>` | Scaffold a new block type with component + mock factory                       |
+| `npx @middag-io/react upgrade`          | Check for updates and run codemods                                            |
+
+## Scripts
+
+| Command                 | Description                           |
+|-------------------------|---------------------------------------|
+| `npm run doctor`        | Validate development environment      |
+| `npm run dev:mock`      | Dev server with hot reload (mock SPA) |
+| `npm run build`         | Build ESM lib to `dist-lib/`          |
+| `npm run build:mock`    | Build mock SPA to `dist-mock/`        |
+| `npm run typecheck`     | TypeScript type check                 |
+| `npm run lint`          | ESLint check                          |
+| `npm run lint:fix`      | ESLint auto-fix                       |
+| `npm run format`        | Prettier format                       |
+| `npm run format:check`  | Prettier check                        |
+| `npm run sync:examples` | Sync ReUI examples from registry      |
+| `npm run changeset`     | Create a changeset for versioning     |
+| `npm run release`       | Build + publish (used by CI)          |
+
+## Peer Dependencies
+
+- `react` ^19.0.0
+- `react-dom` ^19.0.0
+- `@inertiajs/react` ^2.0.0
+- `@inertiajs/core` ^2.0.0
+
+## Mock Build Deployment (Cloudflare Pages)
+
+The mock SPA is deployed automatically to Cloudflare Pages on every push to `main`.
+
+**Live URL:** `https://middag-react-mock.pages.dev`
+
+### First-time setup
+
+1. Create the Cloudflare Pages project:
+   ```bash
+   npx wrangler pages project create middag-react-mock --production-branch main
+   ```
+
+2. Add repository secrets in GitHub (`Settings > Secrets and variables > Actions`):
+    - `CLOUDFLARE_API_TOKEN` -- API token with "Cloudflare Pages: Edit" permission
+    - `CLOUDFLARE_ACCOUNT_ID` -- your Cloudflare account ID (found in dashboard URL or Workers & Pages overview)
+
+3. Push to `main` -- the `deploy-mock.yml` workflow runs automatically.
+
+### Manual deploy (local)
+
+```bash
+npm run build:mock
+npx wrangler pages deploy dist-mock --project-name=middag-react-mock
+```
+
+## CI/CD
+
+| Workflow                       | Trigger                                   | What it does                                                         |
+|--------------------------------|-------------------------------------------|----------------------------------------------------------------------|
+| `publish.yml`                  | Push to main                              | Typecheck + Changesets publish to GitHub Packages + npm public       |
+| `publish-create-middag-ui.yml` | Push to main (packages/create-middag-ui/) | Publish to npm (Community) + GitHub Packages (PRO)                   |
+| `deploy-mock.yml`              | Push to main / manual                     | Build mock + deploy to Cloudflare Pages                              |
+| `sync-examples.yml`            | Monday 8:00 UTC / manual                  | Sync ReUI examples, opens PR if updates                              |
+
+### Required secrets
+
+| Secret                  | Registry         | Purpose                                    |
+|-------------------------|------------------|--------------------------------------------|
+| `GITHUB_TOKEN`          | GitHub Packages  | Publish `@middag-io/react` (auto-provided) |
+| `NPM_TOKEN`             | npm (public)     | Publish `@middag-io/react` + `create-middag-ui` |
+| `CLOUDFLARE_API_TOKEN`  | Cloudflare Pages | Deploy mock SPA                            |
+| `CLOUDFLARE_ACCOUNT_ID` | Cloudflare Pages | Account identifier                         |
+
+## License
+
+Private -- MIDDAG proprietary.

package/bin/codemods/README.md

@@ -0,0 +1,18 @@
+# Codemods
+
+Automatic migration scripts for breaking changes between versions.
+
+Each codemod is a `.mjs` file named `v{VERSION}.mjs` (e.g., `v0.7.0.mjs`).
+The upgrade command runs all codemods between the current and target version.
+
+## Writing a codemod
+
+Export a default function that receives the project root path:
+
+```js
+export default async function migrate(projectRoot) {
+  // Read, transform, write files
+}
+
+export const description = "What this codemod does";
+```

package/bin/codemods/v0.7.0.mjs

@@ -0,0 +1,21 @@
+/**
+ * v0.7.0 codemod: i18n defaults, error telemetry, mock exports, open contract types
+ *
+ * No breaking changes — inform user about new features.
+ */
+
+/* global console */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default async function migrate(_projectRoot) {
+  console.log([
+    "  No breaking changes in v0.7.0",
+    "  New features available:",
+    "    - LIB_UI_DEFAULTS: override lib UI strings via I18nProvider",
+    "    - ErrorReporterProvider: plug Sentry/New Relic for error telemetry",
+    "    - @middag-io/react/mock: extend the mock SPA (GitHub Packages only)",
+    "    - Custom shell/layout types: register your own shells and layouts",
+  ].join("\n"));
+}
+
+export const description = "i18n defaults, error telemetry, mock exports, open contract types";

package/bin/middag-react.js

@@ -15,8 +15,9 @@
  * For bootstrapping a new project, use: npx create-middag-ui
  */
 
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import { execSync } from "node:child_process";
 
 // ── Helpers ────────────────────────────────────────────────────────────────
@@ -170,7 +171,55 @@ export function create${pascalName.replace("Block", "")}Block(
   console.log(`\n  Docs: https://docs.middag.io/guides/custom-blocks\n`);
 }
 
-function cmdUpgrade(cwd) {
+/**
+ * Parse a semver string like "0.7.0" or "^0.6.0" into [major, minor, patch].
+ * Strips leading ^ ~ >= etc.
+ */
+function parseSemver(v) {
+  const m = String(v).match(/(\d+)\.(\d+)\.(\d+)/);
+  return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null;
+}
+
+/**
+ * Compare two semver tuples: -1 (a < b), 0 (a == b), 1 (a > b).
+ */
+function compareSemver(a, b) {
+  for (let i = 0; i < 3; i++) {
+    if (a[i] < b[i]) return -1;
+    if (a[i] > b[i]) return 1;
+  }
+  return 0;
+}
+
+/**
+ * Discover codemod files in bin/codemods/ and return those whose version
+ * is > currentVer and <= targetVer, sorted ascending.
+ */
+function discoverCodemods(currentVer, targetVer) {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const codemodsDir = join(__dirname, "codemods");
+
+  if (!existsSync(codemodsDir)) return [];
+
+  const files = readdirSync(codemodsDir).filter((f) => /^v[\d.]+\.mjs$/.test(f));
+  const candidates = [];
+
+  for (const file of files) {
+    const ver = parseSemver(file);
+    if (!ver) continue;
+    // Include codemods where: currentVer < codemodVer <= targetVer
+    if (compareSemver(ver, currentVer) > 0 && compareSemver(ver, targetVer) <= 0) {
+      candidates.push({ file, ver, path: join(codemodsDir, file) });
+    }
+  }
+
+  // Sort ascending by version
+  candidates.sort((a, b) => compareSemver(a.ver, b.ver));
+  return candidates;
+}
+
+async function cmdUpgrade(cwd) {
   log("Checking for updates...\n");
   const pkgPath = join(cwd, "package.json");
 
@@ -180,19 +229,51 @@ function cmdUpgrade(cwd) {
   }
 
   try {
-    const result = execSync("npm view @middag-io/react version 2>/dev/null", { encoding: "utf8" }).trim();
+    const latest = execSync("npm view @middag-io/react version 2>/dev/null", { encoding: "utf8" }).trim();
     const currentPkg = JSON.parse(readFileSync(pkgPath, "utf8"));
-    const current = currentPkg.dependencies?.["@middag-io/react"] || "unknown";
+    const currentRaw = currentPkg.dependencies?.["@middag-io/react"] || "unknown";
+
+    console.log(`  Current: ${currentRaw}`);
+    console.log(`  Latest:  ${latest}`);
 
-    console.log(`  Current: ${current}`);
-    console.log(`  Latest:  ${result}`);
+    const currentVer = parseSemver(currentRaw);
+    const targetVer = parseSemver(latest);
 
-    if (current.includes(result)) {
+    if (currentRaw.includes(latest)) {
       success("Already up to date");
     } else {
       log("Updating...");
       run("npm install @middag-io/react@latest", { cwd });
-      success(`Updated to ${result}`);
+      success(`Updated to ${latest}`);
+    }
+
+    // ── Codemods ────────────────────────────────────────────────────────
+    if (currentVer && targetVer && compareSemver(currentVer, targetVer) < 0) {
+      const codemods = discoverCodemods(currentVer, targetVer);
+
+      if (codemods.length > 0) {
+        console.log("");
+        log(`Running ${codemods.length} codemod(s)...\n`);
+
+        let applied = 0;
+        for (const cm of codemods) {
+          const mod = await import(cm.path);
+          const desc = mod.description || cm.file;
+          console.log(`  \x1b[36m▸\x1b[0m ${cm.file}: ${desc}`);
+          try {
+            await mod.default(cwd);
+            applied++;
+          } catch (err) {
+            fail(`Codemod ${cm.file} failed: ${err.message}`);
+          }
+        }
+
+        console.log("");
+        success(`${applied}/${codemods.length} codemod(s) applied`);
+      } else {
+        console.log("");
+        success("No codemods needed for this upgrade");
+      }
     }
   } catch {
     warn("Could not check latest version (network or auth issue)");
@@ -222,7 +303,7 @@ switch (command) {
     cmdAddBlock(cwd, args[0]);
     break;
   case "upgrade":
-    cmdUpgrade(cwd);
+    await cmdUpgrade(cwd);
     break;
   default:
     console.log(`

package/dist-lib/{ConditionTreeBlock-BGPYAImJ.js → ConditionTreeBlock-B24FzcsP.js}

@@ -1,83 +1,86 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { n as e } from "./i18n-zhMby9Ml.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/base/blocks/ConditionTreeBlock.tsx
-function n({ logic: t }) {
-	return /* @__PURE__ */ e("span", {
-		className: t === "and" ? "text-primary inline-flex items-center rounded bg-[oklch(0.93_0.04_264)] px-2 py-0.5 text-xs font-bold uppercase" : "inline-flex items-center rounded bg-[oklch(0.95_0.04_75)] px-2 py-0.5 text-xs font-bold text-[oklch(0.55_0.16_75)] uppercase",
-		children: t
+function r({ logic: e }) {
+	return /* @__PURE__ */ t("span", {
+		className: e === "and" ? "text-primary inline-flex items-center rounded bg-[oklch(0.93_0.04_264)] px-2 py-0.5 text-xs font-bold uppercase" : "inline-flex items-center rounded bg-[oklch(0.95_0.04_75)] px-2 py-0.5 text-xs font-bold text-[oklch(0.55_0.16_75)] uppercase",
+		children: e
 	});
 }
-function r({ rule: n }) {
-	return /* @__PURE__ */ t("div", {
+function i({ rule: r }) {
+	let { t: i } = e();
+	return /* @__PURE__ */ n("div", {
 		className: "bg-background flex items-center gap-2 rounded-md p-2",
 		children: [
-			/* @__PURE__ */ e("span", {
+			/* @__PURE__ */ t("span", {
 				className: "border-border bg-muted/50 inline-flex items-center rounded border px-2 py-1 text-sm font-medium",
-				children: n.field
+				children: r.field
 			}),
-			/* @__PURE__ */ e("span", {
+			/* @__PURE__ */ t("span", {
 				className: "text-muted-foreground text-sm",
-				children: n.operator
+				children: r.operator
 			}),
-			/* @__PURE__ */ e("span", {
+			/* @__PURE__ */ t("span", {
 				className: "border-border bg-muted/50 inline-flex items-center rounded border px-2 py-1 text-sm font-medium",
-				children: n.value
+				children: r.value
 			}),
-			/* @__PURE__ */ e("button", {
+			/* @__PURE__ */ t("button", {
 				type: "button",
 				className: "text-muted-foreground hover:text-destructive ml-auto flex h-6 w-6 items-center justify-center rounded text-sm transition-colors",
 				tabIndex: -1,
-				"aria-label": "Remover regra",
+				"aria-label": i("middag.ui.condition_tree.remove_rule"),
 				children: "×"
 			})
 		]
 	});
 }
-function i({ group: a, depth: o }) {
-	return /* @__PURE__ */ t("div", {
+function a({ group: o, depth: s }) {
+	let { t: c } = e();
+	return /* @__PURE__ */ n("div", {
 		className: "bg-muted/30 space-y-2 rounded-lg border p-3",
-		style: o > 0 ? { marginLeft: `${o * 16}px` } : void 0,
+		style: s > 0 ? { marginLeft: `${s * 16}px` } : void 0,
 		children: [
-			/* @__PURE__ */ t("div", {
+			/* @__PURE__ */ n("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ e(n, { logic: a.logic }), o > 0 && /* @__PURE__ */ e("button", {
+				children: [/* @__PURE__ */ t(r, { logic: o.logic }), s > 0 && /* @__PURE__ */ t("button", {
 					type: "button",
 					className: "text-muted-foreground hover:text-destructive ml-auto flex h-6 w-6 items-center justify-center rounded text-sm transition-colors",
 					tabIndex: -1,
-					"aria-label": "Remover grupo",
+					"aria-label": c("middag.ui.condition_tree.remove_group"),
 					children: "×"
 				})]
 			}),
-			a.rules.map((t) => /* @__PURE__ */ e(r, { rule: t }, t.id)),
-			a.groups.map((t) => /* @__PURE__ */ e(i, {
-				group: t,
-				depth: o + 1
-			}, t.id)),
-			/* @__PURE__ */ t("div", {
+			o.rules.map((e) => /* @__PURE__ */ t(i, { rule: e }, e.id)),
+			o.groups.map((e) => /* @__PURE__ */ t(a, {
+				group: e,
+				depth: s + 1
+			}, e.id)),
+			/* @__PURE__ */ n("div", {
 				className: "flex items-center gap-2 pt-1",
-				children: [/* @__PURE__ */ e("button", {
+				children: [/* @__PURE__ */ t("button", {
 					type: "button",
 					className: "text-muted-foreground hover:border-primary hover:text-primary rounded-md border border-dashed px-3 py-1 text-xs transition-colors",
 					tabIndex: -1,
-					children: "+ Adicionar regra"
-				}), /* @__PURE__ */ e("button", {
+					children: c("middag.ui.condition_tree.add_rule")
+				}), /* @__PURE__ */ t("button", {
 					type: "button",
 					className: "text-muted-foreground hover:border-primary hover:text-primary rounded-md border border-dashed px-3 py-1 text-xs transition-colors",
 					tabIndex: -1,
-					children: "+ Adicionar grupo"
+					children: c("middag.ui.condition_tree.add_group")
 				})]
 			})
 		]
 	});
 }
-function a({ block: t }) {
-	let { data: n } = t;
-	return /* @__PURE__ */ e("div", {
+function o({ block: e }) {
+	let { data: n } = e;
+	return /* @__PURE__ */ t("div", {
 		className: "space-y-3",
-		children: /* @__PURE__ */ e(i, {
+		children: /* @__PURE__ */ t(a, {
 			group: n.root,
 			depth: 0
 		})
 	});
 }
 //#endregion
-export { a as ConditionTreeBlock };
+export { o as ConditionTreeBlock };