@askrjs/cli 0.0.2 → 0.0.4

package/templates/startkit/src/lib/routes.ts

@@ -1,116 +0,0 @@
-export type AppRouteKind = 'public' | 'auth' | 'protected';
-
-export type AppRouteDefinition = {
-  id: 'landing' | 'login' | 'dashboard' | 'accounts' | 'settings';
-  href: string;
-  label: string;
-  navLabel: string;
-  description: string;
-  kind: AppRouteKind;
-};
-
-const appOrigin = 'https://{{appName}}.local';
-
-export const landingRoute: AppRouteDefinition = {
-  id: 'landing',
-  href: '/',
-  label: 'Home',
-  navLabel: 'Home',
-  description: 'Marketing overview and entry points into the starter app.',
-  kind: 'public',
-};
-
-export const loginRoute: AppRouteDefinition = {
-  id: 'login',
-  href: '/login',
-  label: 'Login',
-  navLabel: 'Sign in',
-  description: 'Auth entry for the starter app.',
-  kind: 'auth',
-};
-
-export const dashboardRoute: AppRouteDefinition = {
-  id: 'dashboard',
-  href: '/dashboard',
-  label: 'Dashboard',
-  navLabel: 'Dashboard',
-  description: 'Overview of growth, usage, and recent workspace activity.',
-  kind: 'protected',
-};
-
-export const accountsRoute: AppRouteDefinition = {
-  id: 'accounts',
-  href: '/accounts',
-  label: 'Accounts',
-  navLabel: 'Accounts',
-  description: 'Search, filter, and manage account records.',
-  kind: 'protected',
-};
-
-export const settingsRoute: AppRouteDefinition = {
-  id: 'settings',
-  href: '/settings',
-  label: 'Settings',
-  navLabel: 'Settings',
-  description: 'Profile fields, preferences, and modal patterns.',
-  kind: 'protected',
-};
-
-export const defaultProtectedRoute = dashboardRoute;
-export const protectedRoutes = [
-  dashboardRoute,
-  accountsRoute,
-  settingsRoute,
-] as const;
-export const workspaceRoutes = [...protectedRoutes] as const;
-export const routeCatalog = [
-  landingRoute,
-  loginRoute,
-  ...protectedRoutes,
-] as const;
-
-const routeByPath = new Map(routeCatalog.map((route) => [route.href, route]));
-
-function parseRouteTarget(target: string): URL | null {
-  try {
-    return new URL(target, appOrigin);
-  } catch {
-    return null;
-  }
-}
-
-export function isProtectedRoute(pathname: string): boolean {
-  return protectedRoutes.some((route) => route.href === pathname);
-}
-
-export function normalizeProtectedRouteTarget(
-  target: string | null | undefined
-): string {
-  if (!target) {
-    return defaultProtectedRoute.href;
-  }
-
-  const parsed = parseRouteTarget(target);
-  if (
-    !parsed ||
-    parsed.origin !== appOrigin ||
-    !isProtectedRoute(parsed.pathname)
-  ) {
-    return defaultProtectedRoute.href;
-  }
-
-  return `${parsed.pathname}${parsed.search}${parsed.hash}`;
-}
-
-export function buildLoginHref(nextTarget?: string | null): string {
-  if (!nextTarget) {
-    return loginRoute.href;
-  }
-
-  const target = normalizeProtectedRouteTarget(nextTarget);
-  return `${loginRoute.href}?next=${encodeURIComponent(target)}`;
-}
-
-export function getRouteLabel(pathname: string): string {
-  return routeByPath.get(pathname)?.label ?? 'Workspace';
-}

package/templates/startkit/src/main.tsx

@@ -1,12 +0,0 @@
-import { createSPA } from '@askrjs/askr/boot';
-import { initializeAppSession } from './lib/mock-data';
-import { pageRegistry } from './router';
-
-initializeAppSession();
-
-// createSPA is async: it drains lazy() chunks, applies the registry,
-// resolves the initial route, and wires history navigation — all in one call.
-const root = document.getElementById('app');
-if (!root) throw new Error('Missing #app root element.');
-
-await createSPA({ root, registry: pageRegistry });

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>
-  );
-}