@askrjs/cli 0.0.3 → 0.0.4

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

@@ -1,56 +0,0 @@
-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/templates/startkit/src/pages/auth/_layout.tsx

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

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

@@ -1,129 +0,0 @@
-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/templates/startkit/src/pages/home.tsx

@@ -1,83 +0,0 @@
-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/templates/startkit/src/pages/not-found.tsx

@@ -1,24 +0,0 @@
-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/templates/startkit/src/pages/workspace/_layout.tsx

@@ -1,17 +0,0 @@
-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/templates/startkit/src/pages/workspace/accounts/index.tsx

@@ -1,217 +0,0 @@
-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/templates/startkit/src/pages/workspace/dashboard.tsx

@@ -1,118 +0,0 @@
-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>
-  );
-}