@askrjs/cli 0.0.2 → 0.0.4

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

@@ -1,396 +0,0 @@
-@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/templates/startkit/src/styles/layout.css

@@ -1,192 +0,0 @@
-@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/templates/startkit/src/styles/reset.css

@@ -1,38 +0,0 @@
-@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/templates/startkit/src/styles/theme.css

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