@askrjs/cli 0.0.2

package/dist/templates/startkit/src/pages/_layout.tsx

@@ -0,0 +1,56 @@
+import '../styles.css';
+import {
+  ToastHost,
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastTitle,
+  ToastViewport,
+} from '@askrjs/ui/toast';
+import {
+  clearToast,
+  bindToast,
+  setToastOpen,
+  toastMessage,
+  toastOpen,
+} from '../toast';
+import { state } from '@askrjs/askr';
+
+export default function App({ children }: { children?: unknown }) {
+  const [messageState, setMessageState] = state(toastMessage());
+  const [openState, setOpenState] = state(toastOpen());
+
+  bindToast({
+    setMessage: setMessageState,
+    setOpen: setOpenState,
+  });
+
+  const messageTitle = () => messageState()?.title ?? '';
+  const messageDescription = () => messageState()?.description;
+
+  return (
+    <ToastHost duration={2400}>
+      <div class="app-root">{children}</div>
+
+      <ToastViewport class="app-toast-viewport" />
+      {messageState() && (
+        <Toast
+          open={openState()}
+          onOpenChange={(open) => {
+            setToastOpen(open);
+            if (!open) {
+              clearToast();
+            }
+          }}
+          class="app-toast"
+        >
+          <ToastTitle>{messageTitle()}</ToastTitle>
+          {messageDescription() && (
+            <ToastDescription>{messageDescription()}</ToastDescription>
+          )}
+          <ToastClose aria-label="Dismiss notification">Dismiss</ToastClose>
+        </Toast>
+      )}
+    </ToastHost>
+  );
+}

package/dist/templates/startkit/src/pages/auth/_layout.tsx

@@ -0,0 +1,7 @@
+export default function AuthLayout(props: { children?: unknown }) {
+  return (
+    <div class="auth-layout-shell">
+      <div class="auth-layout-card">{props.children}</div>
+    </div>
+  );
+}

package/dist/templates/startkit/src/pages/auth/login.tsx

@@ -0,0 +1,129 @@
+import { state } from '@askrjs/askr';
+import { Link, currentRoute, navigate } from '@askrjs/askr/router';
+import { Button } from '@askrjs/ui/button';
+import { Input } from '@askrjs/ui/input';
+import { Field } from '@askrjs/themes/components';
+import { LockKeyholeIcon, MailIcon } from '@askrjs/lucide';
+import { signIn } from '../../lib/mock-data';
+import {
+  dashboardRoute,
+  normalizeProtectedRouteTarget,
+} from '../../lib/routes';
+import { showToast } from '../../toast';
+
+export default function LoginPage() {
+  const [emailState, setEmailState] = state('alex@example.com');
+  const [passwordState, setPasswordState] = state('askr1234');
+  const [errorTextState, setErrorTextState] = state('');
+  const [submittingState, setSubmittingState] = state(false);
+  const routeSnapshot = currentRoute();
+
+  const redirectTarget = () =>
+    normalizeProtectedRouteTarget(routeSnapshot.query.get('next')) ||
+    dashboardRoute.href;
+
+  const validate = () => {
+    if (!emailState().trim().includes('@')) {
+      return 'Enter a valid email address.';
+    }
+
+    if (passwordState().trim().length < 8) {
+      return 'Password must be at least 8 characters.';
+    }
+
+    return '';
+  };
+
+  const submit = async (event: Event) => {
+    event.preventDefault();
+
+    const validationError = validate();
+    if (validationError) {
+      setErrorTextState(validationError);
+      return;
+    }
+
+    setSubmittingState(true);
+    setErrorTextState('');
+
+    try {
+      await signIn({ email: emailState(), password: passwordState() });
+      showToast({
+        title: 'Signed in',
+        description: 'Welcome back. You can now access protected routes.',
+      });
+      navigate(redirectTarget(), { history: 'replace' });
+    } catch (error) {
+      setErrorTextState(
+        error instanceof Error ? error.message : 'Could not sign in.'
+      );
+      setSubmittingState(false);
+    }
+  };
+
+  return (
+    <section class="auth-page panel">
+      <h1>Sign in</h1>
+      <p>Use your workspace account to continue.</p>
+
+      <form class="auth-form" onSubmit={submit}>
+        <Field id="login-email">
+          <label htmlFor="login-email">Email</label>
+          <label class="input-row">
+            <MailIcon size={15} aria-hidden="true" />
+            <Input
+              type="email"
+              id="login-email"
+              value={emailState()}
+              onInput={(event: Event) =>
+                setEmailState((event.target as HTMLInputElement).value)
+              }
+            />
+          </label>
+        </Field>
+
+        <Field id="login-password">
+          <label htmlFor="login-password">Password</label>
+          <label class="input-row">
+            <LockKeyholeIcon size={15} aria-hidden="true" />
+            <Input
+              type="password"
+              id="login-password"
+              value={passwordState()}
+              onInput={(event: Event) =>
+                setPasswordState((event.target as HTMLInputElement).value)
+              }
+            />
+          </label>
+        </Field>
+
+        {errorTextState() && (
+          <p class="field-error" role="alert">
+            {errorTextState()}
+          </p>
+        )}
+
+        <Button type="submit" disabled={submittingState()}>
+          {submittingState() ? 'Signing in...' : 'Sign in'}
+        </Button>
+      </form>
+
+      <div class="auth-links">
+        <Link href="/">Back to landing</Link>
+        <button
+          type="button"
+          class="link-button"
+          onClick={() =>
+            showToast({
+              title: 'Reset link sent',
+              description:
+                'This is a starter example. Replace with your auth flow.',
+            })
+          }
+        >
+          Forgot password?
+        </button>
+      </div>
+    </section>
+  );
+}

package/dist/templates/startkit/src/pages/home.tsx

@@ -0,0 +1,83 @@
+import { Link } from '@askrjs/askr/router';
+import {
+  ShieldCheckIcon,
+  WorkflowIcon,
+  LayoutPanelTopIcon,
+  SparklesIcon,
+} from '@askrjs/lucide';
+import { dashboardRoute, loginRoute } from '../lib/routes';
+
+const navButtonClass = 'button button-secondary';
+
+export default function LandingPage() {
+  return (
+    <section class="marketing-page">
+      <header class="marketing-header">
+        <Link href="/" class="brand-link">
+          <span class="brand-pill" aria-hidden="true">
+            A
+          </span>
+          <strong>{'{{appName}}'}</strong>
+        </Link>
+        <div class="marketing-actions">
+          <Link href={loginRoute.href} class={navButtonClass}>
+            {loginRoute.navLabel}
+          </Link>
+        </div>
+      </header>
+
+      <div class="hero-block panel">
+        <p class="eyebrow">Production-ready starter</p>
+        <h1>Build your Askr app like a real product from day one.</h1>
+        <p>
+          This starter combines Askr, askr-ui, askr-themes, and lucide icons in
+          a practical SaaS baseline with semantic pages, composed route trees,
+          and shared layouts.
+        </p>
+        <div class="hero-cta">
+          <Link href={dashboardRoute.href} class="button">
+            Open dashboard
+          </Link>
+          <Link href={loginRoute.href} class={navButtonClass}>
+            Try login flow
+          </Link>
+        </div>
+      </div>
+
+      <section class="feature-grid">
+        <article class="panel feature-card">
+          <WorkflowIcon size={18} aria-hidden="true" />
+          <h2>Composed routes</h2>
+          <p>
+            Public, auth, protected, and 404 routes are assembled from small
+            child route modules instead of one large router file.
+          </p>
+        </article>
+        <article class="panel feature-card">
+          <LayoutPanelTopIcon size={18} aria-hidden="true" />
+          <h2>Composed UI patterns</h2>
+          <p>
+            Reusable table, headers, empty states, stat cards, sidebar, and top
+            app header.
+          </p>
+        </article>
+        <article class="panel feature-card">
+          <ShieldCheckIcon size={18} aria-hidden="true" />
+          <h2>State and data flow</h2>
+          <p>
+            Deterministic mock data with loading, empty, error, and mutation
+            states.
+          </p>
+        </article>
+        <article class="panel feature-card">
+          <SparklesIcon size={18} aria-hidden="true" />
+          <h2>Calm visual baseline</h2>
+          <p>
+            CSS token system, neutral palette, one accent color, and restrained
+            depth.
+          </p>
+        </article>
+      </section>
+    </section>
+  );
+}

package/dist/templates/startkit/src/pages/not-found.tsx

@@ -0,0 +1,24 @@
+import { Link } from '@askrjs/askr/router';
+
+const navButtonClass = 'button button-secondary';
+
+export default function NotFoundPage() {
+  return (
+    <section class="not-found-page panel">
+      <p class="eyebrow">404</p>
+      <h1>Page not found</h1>
+      <p>
+        The route you requested is not mapped in this starter. Use this page to
+        wire your own fallback analytics and recovery flow.
+      </p>
+      <div class="hero-cta">
+        <Link href="/dashboard" class="button">
+          Go to dashboard
+        </Link>
+        <Link href="/" class={navButtonClass}>
+          Back to landing
+        </Link>
+      </div>
+    </section>
+  );
+}

package/dist/templates/startkit/src/pages/workspace/_layout.tsx

@@ -0,0 +1,17 @@
+import { Shell, ShellMain, ShellNav } from '@askrjs/themes/components';
+import AppHeader from '../../components/app-header';
+import AppSidebar from '../../components/app-sidebar';
+
+export default function AppLayout(props: { children?: unknown }) {
+  return (
+    <Shell variant="sidebar" class="app-shell">
+      <ShellNav class="app-shell-nav">
+        <AppSidebar />
+      </ShellNav>
+      <ShellMain class="app-shell-main">
+        <AppHeader />
+        <div class="app-main">{props.children}</div>
+      </ShellMain>
+    </Shell>
+  );
+}

package/dist/templates/startkit/src/pages/workspace/accounts/index.tsx

@@ -0,0 +1,217 @@
+import { state } from '@askrjs/askr';
+import { resource } from '@askrjs/askr/resources';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@askrjs/ui/alert-dialog';
+import { Button } from '@askrjs/ui/button';
+import {
+  Inline,
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+} from '@askrjs/themes/components';
+import { ArchiveIcon, PlusIcon } from '@askrjs/lucide';
+import PageHeader from '../../../components/page-header';
+import AccountFilters from '../../../features/accounts/account-filters';
+import AccountTable from '../../../features/accounts/account-table';
+import {
+  archiveAccounts,
+  listAccounts,
+  type AccountRecord,
+  type AccountStatus,
+} from '../../../lib/mock-data';
+import { showToast } from '../../../toast';
+
+export default function AccountsPage() {
+  const [queryState, setQueryState] = state('');
+  const [statusState, setStatusState] = state<AccountStatus | 'all'>('all');
+  const [pageState, setPageState] = state(1);
+  const [selectedIdsState, setSelectedIdsState] = state<string[]>([]);
+  const [archivingState, setArchivingState] = state(false);
+
+  const pageSize = 5;
+
+  const accountsResource = resource(
+    async ({ signal }) =>
+      listAccounts({
+        signal,
+        query: queryState(),
+        status: statusState(),
+        page: pageState(),
+        pageSize,
+      }),
+    [queryState(), statusState(), pageState()]
+  );
+
+  const rows = () => accountsResource.value?.items ?? [];
+  const totalPages = () => accountsResource.value?.totalPages ?? 1;
+
+  const toggleRow = (id: string) => {
+    setSelectedIdsState((current) =>
+      current.includes(id)
+        ? current.filter((value) => value !== id)
+        : [...current, id]
+    );
+  };
+
+  const resetFilters = () => {
+    setQueryState('');
+    setStatusState('all');
+    setPageState(1);
+  };
+
+  const openRow = (row: AccountRecord) => {
+    showToast({
+      title: row.name,
+      description: `Open account ${row.id} details in your real product workflow.`,
+    });
+  };
+
+  const archiveSelected = async () => {
+    if (selectedIdsState().length === 0) {
+      return;
+    }
+
+    setArchivingState(true);
+
+    try {
+      const result = await archiveAccounts({ ids: selectedIdsState() });
+      setSelectedIdsState([]);
+      showToast({
+        title: 'Accounts archived',
+        description: `${result.archived} account records moved to archived status.`,
+      });
+      await accountsResource.refresh();
+    } catch (error) {
+      showToast({
+        title: 'Archive failed',
+        description:
+          error instanceof Error
+            ? error.message
+            : 'Could not archive selected rows.',
+      });
+    } finally {
+      setArchivingState(false);
+    }
+  };
+
+  return (
+    <section class="stack-lg">
+      <PageHeader
+        title="Accounts"
+        description="Search, filter, page, and run row actions against account records."
+        actions={
+          <Button
+            onPress={() =>
+              showToast({
+                title: 'Create account',
+                description:
+                  'Wire this button into your real create-account form flow.',
+              })
+            }
+          >
+            <PlusIcon size={14} aria-hidden="true" /> Add account
+          </Button>
+        }
+      />
+
+      <section class="panel stack-md">
+        <AccountFilters
+          query={queryState()}
+          status={statusState()}
+          onQueryChange={(next) => {
+            setQueryState(next);
+            setPageState(1);
+          }}
+          onStatusChange={(next) => {
+            setStatusState(next);
+            setPageState(1);
+          }}
+          onReset={resetFilters}
+        />
+
+        <AccountTable
+          rows={rows}
+          selectedIds={selectedIdsState}
+          onToggleRow={toggleRow}
+          onOpenRow={openRow}
+          loading={accountsResource.pending && !accountsResource.value}
+          errorText={accountsResource.error?.message ?? null}
+        />
+
+        <Inline align="center" gap="var(--ak-space-lg)" wrap="wrap">
+          <span class="muted">{selectedIdsState().length} selected</span>
+
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button
+                disabled={selectedIdsState().length === 0}
+                class="button-secondary"
+              >
+                <ArchiveIcon size={14} aria-hidden="true" /> Archive selected
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogPortal>
+              <AlertDialogOverlay />
+              <AlertDialogContent class="panel stack-md">
+                <AlertDialogTitle>Archive selected accounts?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This updates selected account records in the mock data source.
+                </AlertDialogDescription>
+                <div class="inline-end">
+                  <AlertDialogCancel asChild>
+                    <Button class="button-secondary">Cancel</Button>
+                  </AlertDialogCancel>
+                  <AlertDialogAction asChild>
+                    <Button
+                      onPress={() => void archiveSelected()}
+                      disabled={archivingState()}
+                    >
+                      {archivingState() ? 'Archiving...' : 'Confirm archive'}
+                    </Button>
+                  </AlertDialogAction>
+                </div>
+              </AlertDialogContent>
+            </AlertDialogPortal>
+          </AlertDialog>
+
+          <Pagination aria-label="Accounts pages">
+            <PaginationContent>
+              <PaginationItem>
+                <Button
+                  class="button-secondary"
+                  disabled={pageState() <= 1}
+                  onPress={() => setPageState((page) => page - 1)}
+                >
+                  Previous
+                </Button>
+              </PaginationItem>
+              <PaginationItem>
+                <span aria-current="page">
+                  Page {pageState()} of {totalPages()}
+                </span>
+              </PaginationItem>
+              <PaginationItem>
+                <Button
+                  class="button-secondary"
+                  disabled={pageState() >= totalPages()}
+                  onPress={() => setPageState((page) => page + 1)}
+                >
+                  Next
+                </Button>
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </Inline>
+      </section>
+    </section>
+  );
+}

package/dist/templates/startkit/src/pages/workspace/dashboard.tsx

@@ -0,0 +1,118 @@
+import { state } from '@askrjs/askr';
+import { resource } from '@askrjs/askr/resources';
+import { Button } from '@askrjs/ui/button';
+import {
+  BarChart3Icon,
+  CircleDollarSignIcon,
+  Clock3Icon,
+  UsersIcon,
+} from '@askrjs/lucide';
+import DataTable, { type DataTableColumn } from '../../components/data-table';
+import EmptyState from '../../components/empty-state';
+import PageHeader from '../../components/page-header';
+import StatCard from '../../components/stat-card';
+import { getDashboardData, type ActivityEntry } from '../../lib/mock-data';
+import { formatRelativeDate } from '../../lib/format';
+
+export default function DashboardPage() {
+  const [hideActivityState, setHideActivityState] = state(false);
+  const dashboardResource = resource(
+    async ({ signal }) => getDashboardData({ signal }),
+    []
+  );
+
+  const stats = () => dashboardResource.value?.stats ?? [];
+  const activities = () =>
+    hideActivityState() ? [] : (dashboardResource.value?.activities ?? []);
+
+  const columns: DataTableColumn<ActivityEntry>[] = [
+    { key: 'actor', header: 'Actor', render: (row) => row.actor },
+    { key: 'action', header: 'Action', render: (row) => row.action },
+    { key: 'resource', header: 'Resource', render: (row) => row.resource },
+    {
+      key: 'timestamp',
+      header: 'When',
+      render: (row) => (
+        <span class="muted">{formatRelativeDate(row.timestamp)}</span>
+      ),
+    },
+  ];
+
+  const iconByStatKey = {
+    mrr: CircleDollarSignIcon,
+    accounts: UsersIcon,
+    pending: Clock3Icon,
+    seats: BarChart3Icon,
+  } as const;
+
+  return (
+    <section class="stack-lg">
+      <PageHeader
+        title="Dashboard"
+        description="Overview of workspace health, growth, and recent team activity."
+        actions={
+          <Button
+            onPress={() => dashboardResource.refresh()}
+            disabled={dashboardResource.pending}
+          >
+            {dashboardResource.pending ? 'Refreshing...' : 'Refresh'}
+          </Button>
+        }
+      />
+
+      <div class="stat-grid">
+        {stats().map((stat) => {
+          const Icon =
+            iconByStatKey[stat.key as keyof typeof iconByStatKey] ??
+            BarChart3Icon;
+          return (
+            <StatCard
+              label={stat.label}
+              value={stat.value}
+              trend={stat.trend}
+              icon={Icon}
+            />
+          );
+        })}
+      </div>
+
+      <section class="panel stack-md">
+        <div class="section-head">
+          <div>
+            <h2>Recent activity</h2>
+            <p class="muted">
+              The activity table demonstrates loading, empty, and retry
+              behavior.
+            </p>
+          </div>
+          <Button
+            onPress={() => setHideActivityState((current) => !current)}
+            class="button-secondary"
+            disabled={dashboardResource.pending}
+          >
+            {hideActivityState() ? 'Show activity' : 'Show empty state'}
+          </Button>
+        </div>
+
+        {dashboardResource.error ? (
+          <EmptyState
+            title="Could not load dashboard"
+            description={dashboardResource.error.message}
+            action={
+              <Button onPress={() => dashboardResource.refresh()}>Retry</Button>
+            }
+          />
+        ) : (
+          <DataTable
+            rows={activities}
+            rowKey={(row) => row.id}
+            columns={columns}
+            isLoading={dashboardResource.pending && !dashboardResource.value}
+            emptyTitle="No activity yet"
+            emptyDescription="Your activity feed will appear as soon as workspace events are recorded."
+          />
+        )}
+      </section>
+    </section>
+  );
+}