function generateAppTsx(context) {
  const { spec } = context;
  let viewList = [];
  if (spec.views) {
    viewList = Array.isArray(spec.views) ? spec.views : Object.entries(spec.views).map(([name, def]) => ({ name, ...def }));
  }
  const modelViews = /* @__PURE__ */ new Map();
  const dashboardView = viewList.find((v) => v.type === "dashboard")?.name || null;
  for (const view of viewList) {
    const model = Array.isArray(view.model) ? view.model[0] : view.model || view.primaryModel;
    if (!model) continue;
    if (!modelViews.has(model)) modelViews.set(model, { other: [] });
    const entry = modelViews.get(model);
    const type = view.type || "list";
    if (type === "list") entry.list = view.name;
    else if (type === "detail") entry.detail = view.name;
    else if (type === "form") entry.form = view.name;
    else if (type !== "dashboard") entry.other.push(view.name);
  }
  const imports = viewList.map((v) => `import ${v.name} from './components/${v.name}';`).join("\n");
  const routes = viewList.map((v) => {
    const path = `/${v.name.toLowerCase().replace("view", "")}`;
    return `          <Route path="${path}" element={<${v.name} />} />`;
  }).join("\n");
  const defaultView = dashboardView || viewList[0]?.name || "div";
  const defaultElement = defaultView === "div" ? '<div className="p-8">Welcome</div>' : `<${defaultView} />`;
  const navGroups = Array.from(modelViews.entries()).map(([model, views]) => {
    const lower = model.charAt(0).toLowerCase() + model.slice(1);
    const listPath = views.list ? `/${views.list.toLowerCase().replace("view", "")}` : "";
    const formPath = views.form ? `/${views.form.toLowerCase().replace("view", "")}` : "";
    return `          <div>
            <h3 className="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">${model}s</h3>
${listPath ? `            <a href="${listPath}" className="block px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded">Browse</a>` : ""}
${formPath ? `            <a href="${formPath}" className="block px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded">+ New</a>` : ""}
          </div>`;
  }).join("\n");
  return `import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
${imports}

function App() {
  return (
    <Router>
      <div className="flex min-h-screen bg-gray-50">
        {/* Sidebar */}
        <aside className="w-56 bg-white border-r border-gray-200 p-4 space-y-5">
          <div>
            <h1 className="text-lg font-bold text-gray-900">SpecVerse App</h1>
            <p className="text-xs text-gray-400">Generated from specification</p>
          </div>
${dashboardView ? `          <a href="/dashboard" className="block px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded">Dashboard</a>` : ""}
${navGroups}
        </aside>

        {/* Main content */}
        <main className="flex-1 overflow-auto">
          <Routes>
            <Route path="/" element={${defaultElement}} />
${dashboardView ? `          <Route path="/dashboard" element={<${dashboardView} />} />` : ""}
${routes}
            <Route path="*" element={<div className="p-8"><h1 className="text-2xl">404 - Not Found</h1></div>} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}

export default App;
`;
}
export {
  generateAppTsx as default
};
