@askrjs/cli 0.0.2

package/dist/templates/startkit/src/styles/components.css

@@ -0,0 +1,396 @@
+@layer components {
+  .panel {
+    border: 1px solid var(--ak-color-border);
+    border-radius: var(--ak-radius-lg);
+    background: var(--ak-color-surface);
+    padding: var(--ak-layout-panel-padding);
+    box-shadow: var(--starter-shadow-soft);
+  }
+
+  .feature-card {
+    display: grid;
+    align-content: start;
+    gap: var(--ak-space-sm);
+    transition:
+      transform 220ms ease,
+      box-shadow 220ms ease,
+      border-color 220ms ease;
+  }
+
+  .feature-card:hover {
+    transform: translateY(-2px);
+    border-color: color-mix(in srgb, var(--ak-color-primary) 28%, transparent);
+    box-shadow: var(--starter-shadow-press);
+  }
+
+  .feature-card svg {
+    color: var(--ak-color-primary);
+    inline-size: 1.1rem;
+    block-size: 1.1rem;
+  }
+
+  .eyebrow {
+    font-size: var(--ak-font-size-xs);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ak-color-muted);
+    font-weight: 600;
+  }
+
+  .brand-link,
+  .sidebar-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ak-space-sm);
+  }
+
+  .brand-pill {
+    display: grid;
+    place-items: center;
+    inline-size: 1.8rem;
+    block-size: 1.8rem;
+    border-radius: 999px;
+    background: linear-gradient(
+      145deg,
+      var(--ak-color-primary),
+      var(--ak-color-primary-hover)
+    );
+    color: #fff;
+    font-weight: 700;
+    box-shadow: var(--starter-shadow-press);
+  }
+
+  .sidebar-title {
+    color: var(--ak-color-fg);
+    font-weight: 600;
+  }
+
+  .sidebar-subtitle,
+  .breadcrumbs {
+    color: var(--ak-color-muted);
+    font-size: var(--ak-font-size-xs);
+  }
+
+  .app-sidebar-nav {
+    block-size: 100%;
+    gap: var(--ak-space-lg);
+  }
+
+  .header-search,
+  .input-row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ak-space-sm);
+    border: 1px solid var(--ak-color-border);
+    border-radius: var(--ak-radius-md);
+    background: var(--ak-color-surface);
+    color: var(--ak-color-muted);
+    padding-inline: var(--ak-space-md);
+    min-block-size: 2.5rem;
+  }
+
+  .header-search [data-slot='input'],
+  .input-row [data-slot='input'] {
+    border: none;
+    background: transparent;
+    color: var(--ak-color-fg);
+  }
+
+  .header-search {
+    min-inline-size: min(22rem, 100%);
+  }
+
+  .header-account-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ak-space-sm);
+    border: 1px solid var(--ak-color-border);
+    border-radius: var(--ak-radius-md);
+    background: var(--ak-color-surface);
+    padding: var(--ak-space-2xs) var(--ak-space-sm);
+    transition:
+      border-color 160ms ease,
+      background-color 160ms ease;
+  }
+
+  .header-account-trigger:hover {
+    border-color: color-mix(in srgb, var(--ak-color-primary) 22%, transparent);
+    background: var(--ak-color-surface-muted);
+  }
+
+  .page-header-copy {
+    display: grid;
+    gap: var(--ak-space-sm);
+    max-inline-size: var(--starter-content-max-ch);
+  }
+
+  .stat-card {
+    display: grid;
+    gap: var(--ak-space-sm);
+  }
+
+  .stat-card-head {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ak-space-sm);
+  }
+
+  .stat-card strong {
+    font-size: clamp(1.4rem, 1.16rem + 0.85vw, 1.8rem);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  .trend {
+    color: var(--ak-color-muted);
+    font-size: var(--ak-font-size-sm);
+  }
+
+  .empty-state {
+    display: grid;
+    gap: var(--ak-space-md);
+    justify-items: start;
+  }
+
+  .section-head {
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: var(--ak-space-md);
+    flex-wrap: wrap;
+  }
+
+  .table-wrap {
+    border: 1px solid var(--ak-color-border);
+    border-radius: var(--ak-radius-md);
+    overflow: auto;
+  }
+
+  table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    min-inline-size: 48rem;
+  }
+
+  th,
+  td {
+    text-align: start;
+    border-block-end: 1px solid var(--ak-color-border);
+    padding: var(--ak-space-md) var(--ak-space-lg-plus);
+  }
+
+  th {
+    font-size: var(--ak-font-size-xs);
+    color: var(--ak-color-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  tr:last-child td {
+    border-block-end: none;
+  }
+
+  .cell-select {
+    inline-size: 3rem;
+  }
+
+  .cell-actions {
+    inline-size: 8rem;
+  }
+
+  .status-pill {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 999px;
+    border: 1px solid var(--ak-color-border);
+    padding: var(--ak-space-2xs) var(--ak-space-sm);
+    text-transform: capitalize;
+    font-size: var(--ak-font-size-xs);
+    background: var(--ak-color-surface-muted);
+  }
+
+  .status-active {
+    color: var(--starter-color-success);
+  }
+
+  .status-pending,
+  .status-archived {
+    color: var(--ak-color-muted);
+  }
+
+  .field-error {
+    color: var(--ak-color-danger);
+    font-size: var(--ak-font-size-sm);
+    font-weight: 600;
+  }
+
+  .auth-page {
+    display: grid;
+    gap: var(--ak-space-lg);
+  }
+
+  .auth-form {
+    display: grid;
+    gap: var(--ak-space-md);
+  }
+
+  .auth-links {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--ak-space-md);
+    font-size: var(--ak-font-size-sm);
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ak-space-xs);
+    border-radius: var(--ak-radius-md);
+    border: 1px solid transparent;
+    min-block-size: 2.5rem;
+    padding-inline: var(--ak-space-md);
+    text-decoration: none;
+    transition:
+      transform 150ms ease,
+      box-shadow 160ms ease,
+      background-color 160ms ease,
+      border-color 160ms ease;
+  }
+
+  .button:hover {
+    box-shadow: var(--starter-shadow-press);
+    transform: translateY(-1px);
+  }
+
+  .button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  }
+
+  .link-button {
+    border: none;
+    background: transparent;
+    color: var(--ak-color-primary);
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .switch-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--ak-space-md);
+    padding-block: var(--ak-space-sm);
+  }
+
+  .button-secondary {
+    background: var(--ak-color-surface);
+    border-color: var(--ak-color-border);
+    color: var(--ak-color-fg);
+  }
+
+  [data-slot='button'] {
+    border-radius: var(--ak-radius-md);
+    border: 1px solid transparent;
+    min-block-size: 2.5rem;
+    transition:
+      transform 150ms ease,
+      box-shadow 160ms ease,
+      background-color 160ms ease,
+      border-color 160ms ease;
+  }
+
+  [data-slot='button']:hover {
+    box-shadow: var(--starter-shadow-press);
+    transform: translateY(-1px);
+  }
+
+  [data-slot='button']:focus-visible,
+  [data-slot='dropdown-menu-item']:focus-visible,
+  [data-slot='toast-close']:focus-visible,
+  [data-slot='dialog-close']:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  }
+
+  [data-slot='button'][data-disabled='true'],
+  [data-slot='button']:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+
+  [data-slot='dropdown-menu-content'] {
+    border: 1px solid var(--ak-color-border);
+    border-radius: var(--ak-radius-md);
+    background: var(--ak-color-surface);
+    padding: var(--ak-space-sm);
+    display: grid;
+    gap: var(--ak-space-2xs);
+  }
+
+  [data-slot='dropdown-menu-label'] {
+    color: var(--ak-color-muted);
+    font-size: var(--ak-font-size-xs);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    padding: var(--ak-space-sm);
+  }
+
+  [data-slot='dropdown-menu-item'] {
+    border-radius: var(--ak-radius-sm);
+    padding: var(--ak-space-sm) var(--ak-space-md);
+    border: none;
+    background: transparent;
+    color: var(--ak-color-fg);
+  }
+
+  [data-slot='dropdown-menu-item']:hover {
+    background: var(--ak-color-surface-muted);
+  }
+
+  [data-slot='dropdown-menu-separator'] {
+    block-size: 1px;
+    background: var(--ak-color-border);
+    inline-size: 100%;
+    margin-block: var(--ak-space-2xs);
+  }
+
+  .app-toast-viewport {
+    position: fixed;
+    inset-block-end: var(--ak-space-lg);
+    inset-inline-end: var(--ak-space-lg);
+    display: grid;
+    gap: var(--ak-space-sm);
+    z-index: 30;
+  }
+
+  .app-toast,
+  [data-slot='dialog-content'] {
+    border: 1px solid var(--ak-color-border);
+    border-radius: var(--ak-radius-lg);
+    background: var(--ak-color-surface);
+    box-shadow: none;
+  }
+
+  [data-slot='dialog-overlay'] {
+    position: fixed;
+    inset: 0;
+    background: color-mix(in srgb, var(--ak-color-fg) 25%, transparent);
+    backdrop-filter: blur(2px);
+  }
+
+  [data-slot='dialog-content'] {
+    position: fixed;
+    inline-size: min(30rem, calc(100vw - 2rem));
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 40;
+  }
+}

package/dist/templates/startkit/src/styles/layout.css

@@ -0,0 +1,192 @@
+@layer layout {
+  .app-root {
+    min-block-size: 100dvh;
+  }
+
+  .marketing-page,
+  .not-found-page {
+    inline-size: min(
+      var(--ak-layout-content-max-width),
+      calc(100% - 2 * var(--ak-layout-page-gutter))
+    );
+    margin-inline: auto;
+    padding-block: var(--ak-space-xl) var(--ak-space-2xl);
+    display: grid;
+    gap: var(--ak-space-xl);
+  }
+
+  .marketing-page > * {
+    animation: starter-fade-up 520ms ease-out both;
+  }
+
+  .marketing-page > :nth-child(2) {
+    animation-delay: 70ms;
+  }
+
+  .marketing-page > :nth-child(3) {
+    animation-delay: 130ms;
+  }
+
+  .marketing-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ak-space-md);
+    padding-block-start: var(--ak-space-sm);
+  }
+
+  .hero-block {
+    display: grid;
+    gap: var(--ak-space-lg-plus);
+  }
+
+  .hero-block p {
+    max-inline-size: var(--starter-content-max-ch);
+  }
+
+  .hero-cta {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--ak-space-md);
+  }
+
+  .feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
+    gap: var(--ak-space-lg);
+  }
+
+  .auth-layout-shell {
+    min-block-size: 100dvh;
+    display: grid;
+    place-items: center;
+    padding: var(--ak-space-xl);
+  }
+
+  .auth-layout-card {
+    inline-size: min(100%, 420px);
+  }
+
+  .app-shell {
+    min-block-size: 100dvh;
+  }
+
+  .app-shell-nav {
+    flex: 0 0 17rem;
+  }
+
+  .app-shell-main {
+    min-inline-size: 0;
+  }
+
+  .app-sidebar {
+    block-size: 100%;
+    border-inline-end: 1px solid var(--ak-color-border);
+    background: var(--ak-color-surface);
+    padding: var(--ak-space-lg-plus);
+    display: grid;
+    align-content: start;
+    gap: var(--ak-space-lg);
+  }
+
+  .app-main {
+    inline-size: min(
+      var(--ak-layout-content-max-width),
+      calc(100% - 2 * var(--ak-layout-page-gutter))
+    );
+    margin-inline: auto;
+    padding-block: var(--ak-space-xl) var(--ak-space-2xl);
+    display: grid;
+    gap: var(--ak-space-xl);
+  }
+
+  .app-header {
+    position: sticky;
+    inset-block-start: 0;
+    border-block-end: 1px solid var(--ak-color-border);
+    background: var(--starter-surface-glass);
+    backdrop-filter: blur(8px);
+    padding: var(--ak-space-lg) var(--ak-layout-page-gutter);
+    z-index: 15;
+  }
+
+  .stat-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--ak-space-md);
+  }
+
+  .settings-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--ak-space-lg);
+  }
+
+  .account-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ak-space-md);
+    align-items: center;
+  }
+
+  .account-search {
+    min-inline-size: min(28rem, 100%);
+  }
+
+  .inline-end {
+    display: inline-flex;
+    justify-content: flex-end;
+    gap: var(--ak-space-sm);
+    inline-size: 100%;
+  }
+
+  @keyframes starter-fade-up {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (max-width: 960px) {
+    .app-shell {
+      flex-direction: column;
+    }
+
+    .app-shell-nav {
+      flex-basis: auto;
+      inline-size: 100%;
+    }
+
+    .app-shell-nav [data-slot='sidebar'] {
+      inline-size: 100%;
+      border-inline-end: none;
+      border-block-end: 1px solid var(--ak-color-border);
+    }
+
+    .settings-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .marketing-page,
+    .not-found-page,
+    .app-main {
+      gap: var(--ak-space-lg);
+      padding-block: var(--ak-space-lg) var(--ak-space-xl);
+    }
+
+    .app-header {
+      padding-block: var(--ak-space-md);
+    }
+
+    .feature-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}

package/dist/templates/startkit/src/styles/reset.css

@@ -0,0 +1,38 @@
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body,
+  #app {
+    margin: 0;
+    min-height: 100%;
+  }
+
+  body {
+    min-block-size: 100dvh;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h1,
+  h2,
+  h3,
+  p {
+    margin: 0;
+  }
+
+  button,
+  input,
+  select {
+    font: inherit;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}

package/dist/templates/startkit/src/styles/theme.css

@@ -0,0 +1,76 @@
+@import '@askrjs/themes/default';
+
+@layer theme {
+  body {
+    background:
+      radial-gradient(
+        1100px 620px at 100% -12%,
+        color-mix(in srgb, var(--ak-color-primary) 13%, transparent),
+        transparent 60%
+      ),
+      radial-gradient(
+        820px 420px at -8% 14%,
+        color-mix(in srgb, var(--ak-color-primary) 8%, transparent),
+        transparent 64%
+      ),
+      var(--ak-color-bg);
+    color: var(--ak-color-fg);
+    font-family: var(--ak-font-family);
+    font-size: var(--ak-font-size-md);
+    line-height: 1.55;
+  }
+
+  h1 {
+    font-size: var(--ak-font-size-display);
+    line-height: 1.06;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+  }
+
+  h2 {
+    font-size: var(--ak-font-size-heading);
+    line-height: 1.3;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
+  }
+
+  .muted,
+  p {
+    color: var(--ak-color-muted);
+    line-height: 1.65;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--ak-color-primary) 30%, transparent);
+    color: var(--ak-color-fg);
+  }
+
+  .stack-sm,
+  .stack-md,
+  .stack-lg {
+    display: grid;
+  }
+
+  .stack-sm {
+    gap: var(--ak-space-sm);
+  }
+
+  .stack-md {
+    gap: var(--ak-space-lg);
+  }
+
+  .stack-lg {
+    gap: var(--ak-space-xl);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}