dekit-cli 0.1.1 → 0.2.1

package/templates/components/blank/component.css

@@ -0,0 +1,3 @@
+.component {
+  display: block;
+}

package/templates/components/blank/component.html

@@ -0,0 +1,5 @@
+<template>
+  <div class="component">
+    <slot></slot>
+  </div>
+</template>

package/templates/pages/blank/page.css

@@ -0,0 +1,3 @@
+.page {
+  padding: 48px;
+}

package/templates/pages/blank/page.html

@@ -0,0 +1,3 @@
+<div class="page">
+  <h1>__PAGE_NAME__</h1>
+</div>

package/templates/pages/form/page.css

@@ -0,0 +1,88 @@
+.form-page {
+  padding: 64px 24px;
+  min-height: 100vh;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.form-container {
+  width: 100%;
+  max-width: 520px;
+}
+
+.form-title {
+  font-size: 2rem;
+  font-weight: 800;
+  color: #111827;
+  margin-bottom: 10px;
+}
+
+.form-description {
+  font-size: 1rem;
+  color: #6b7280;
+  margin-bottom: 36px;
+  line-height: 1.6;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.form-input,
+.form-textarea {
+  padding: 10px 14px;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  color: #111827;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  resize: vertical;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: #9ca3af;
+}
+
+.form-submit {
+  padding: 12px 28px;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-family: inherit;
+  color: #ffffff;
+  background: var(--color-primary, #2563eb);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.15s;
+  align-self: flex-start;
+}
+
+.form-submit:hover {
+  opacity: 0.88;
+  transform: translateY(-1px);
+}

package/templates/pages/form/page.html

@@ -0,0 +1,21 @@
+<section class="form-page">
+  <div class="form-container">
+    <h1 class="form-title">Contact Us</h1>
+    <p class="form-description">Fill out the form below and we'll get back to you shortly.</p>
+    <form class="form">
+      <div class="form-group">
+        <label class="form-label" for="name">Full Name</label>
+        <input class="form-input" type="text" id="name" name="name" placeholder="Jane Doe" />
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="email">Email Address</label>
+        <input class="form-input" type="email" id="email" name="email" placeholder="jane@example.com" />
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="message">Message</label>
+        <textarea class="form-textarea" id="message" name="message" rows="5" placeholder="Write your message here..."></textarea>
+      </div>
+      <button class="form-submit" type="submit">Send Message</button>
+    </form>
+  </div>
+</section>

package/templates/pages/grid/page.css

@@ -0,0 +1,84 @@
+.grid-page {
+  padding: 64px 24px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.grid-page__header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.grid-page__title {
+  font-size: 2rem;
+  font-weight: 800;
+  color: #111827;
+  margin-bottom: 12px;
+}
+
+.grid-page__subtitle {
+  font-size: 1rem;
+  color: #6b7280;
+  line-height: 1.6;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+}
+
+@media (max-width: 600px) {
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.card {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #ffffff;
+  transition: box-shadow 0.2s, transform 0.2s;
+}
+
+.card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+.card__image {
+  width: 100%;
+  height: 180px;
+  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
+}
+
+.card__body {
+  padding: 20px 20px 24px;
+}
+
+.card__title {
+  font-size: 1.0625rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 10px;
+}
+
+.card__desc {
+  font-size: 0.9375rem;
+  color: #6b7280;
+  line-height: 1.6;
+  margin-bottom: 16px;
+}
+
+.card__link {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-primary, #2563eb);
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.card__link:hover {
+  opacity: 0.75;
+}

package/templates/pages/grid/page.html

@@ -0,0 +1,40 @@
+<section class="grid-page">
+  <div class="grid-page__header">
+    <h1 class="grid-page__title">Featured Items</h1>
+    <p class="grid-page__subtitle">Explore our curated collection of items below.</p>
+  </div>
+  <div class="card-grid">
+    <div class="card">
+      <div class="card__image" aria-label="Image placeholder"></div>
+      <div class="card__body">
+        <h2 class="card__title">Card Title One</h2>
+        <p class="card__desc">A short description of this item. Add details to inform the reader about what makes it interesting.</p>
+        <a href="#" class="card__link">View Details &rarr;</a>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card__image" aria-label="Image placeholder"></div>
+      <div class="card__body">
+        <h2 class="card__title">Card Title Two</h2>
+        <p class="card__desc">A short description of this item. Add details to inform the reader about what makes it interesting.</p>
+        <a href="#" class="card__link">View Details &rarr;</a>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card__image" aria-label="Image placeholder"></div>
+      <div class="card__body">
+        <h2 class="card__title">Card Title Three</h2>
+        <p class="card__desc">A short description of this item. Add details to inform the reader about what makes it interesting.</p>
+        <a href="#" class="card__link">View Details &rarr;</a>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card__image" aria-label="Image placeholder"></div>
+      <div class="card__body">
+        <h2 class="card__title">Card Title Four</h2>
+        <p class="card__desc">A short description of this item. Add details to inform the reader about what makes it interesting.</p>
+        <a href="#" class="card__link">View Details &rarr;</a>
+      </div>
+    </div>
+  </div>
+</section>

package/templates/pages/hero/page.css

@@ -0,0 +1,62 @@
+.hero {
+  padding: 96px 24px;
+  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+  text-align: center;
+}
+
+.hero__inner {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.hero__title {
+  font-size: 2.75rem;
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: #111827;
+  margin-bottom: 20px;
+}
+
+.hero__subtitle {
+  font-size: 1.125rem;
+  color: #6b7280;
+  line-height: 1.7;
+  margin-bottom: 36px;
+}
+
+.hero__actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-block;
+  padding: 12px 28px;
+  border-radius: 8px;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.15s;
+  border: 2px solid transparent;
+}
+
+.btn:hover {
+  opacity: 0.88;
+  transform: translateY(-1px);
+}
+
+.btn--primary {
+  background: var(--color-primary, #2563eb);
+  color: #ffffff;
+  border-color: var(--color-primary, #2563eb);
+}
+
+.btn--outline {
+  background: transparent;
+  color: var(--color-primary, #2563eb);
+  border-color: var(--color-primary, #2563eb);
+}

package/templates/pages/hero/page.html

@@ -0,0 +1,10 @@
+<section class="hero">
+  <div class="hero__inner">
+    <h1 class="hero__title">Welcome to Your Page</h1>
+    <p class="hero__subtitle">Add your subtitle here. Describe what this page is about in a clear, compelling sentence.</p>
+    <div class="hero__actions">
+      <a href="#" class="btn btn--primary">Get Started</a>
+      <a href="#" class="btn btn--outline">Learn More</a>
+    </div>
+  </div>
+</section>

package/templates/projects/blank/dekit.yaml

@@ -0,0 +1,9 @@
+version: 1.0
+global-style: "global.css"
+
+components: {}
+
+pages:
+  home:
+    template: "pages/home/home.html"
+    style: "pages/home/home.css"

package/templates/projects/blank/global.css

@@ -0,0 +1,18 @@
+:root {
+  --color-primary: #2563eb;
+  --color-text: #1f2937;
+  --color-bg: #ffffff;
+  --font-sans: system-ui, -apple-system, sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background: var(--color-bg);
+}

package/templates/projects/blank/pages/home/home.css

@@ -0,0 +1,3 @@
+.page {
+  padding: 48px;
+}

package/templates/projects/blank/pages/home/home.html

@@ -0,0 +1,3 @@
+<div class="page">
+  <h1>Home</h1>
+</div>

package/templates/projects/dashboard/dekit.yaml

@@ -0,0 +1,9 @@
+version: 1.0
+global-style: "global.css"
+
+components: {}
+
+pages:
+  home:
+    template: "pages/home/home.html"
+    style: "pages/home/home.css"

package/templates/projects/dashboard/global.css

@@ -0,0 +1,18 @@
+:root {
+  --color-primary: #2563eb;
+  --color-text: #1f2937;
+  --color-bg: #ffffff;
+  --font-sans: system-ui, -apple-system, sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background: var(--color-bg);
+}

package/templates/projects/dashboard/pages/home/home.css

@@ -0,0 +1,248 @@
+/* App layout */
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 240px;
+  flex-shrink: 0;
+  background: #111827;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 16px;
+  overflow-y: auto;
+}
+
+.sidebar__logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  margin-bottom: 32px;
+}
+
+.sidebar__logo-icon {
+  color: var(--color-primary);
+  font-size: 1.25rem;
+}
+
+.sidebar__logo-text {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  text-decoration: none;
+  color: #9ca3af;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  transition: background 0.15s, color 0.15s;
+}
+
+.nav-item:hover {
+  background: #1f2937;
+  color: #ffffff;
+}
+
+.nav-item--active {
+  background: #1d4ed8;
+  color: #ffffff;
+}
+
+.nav-item__icon {
+  font-size: 1rem;
+  width: 20px;
+  text-align: center;
+}
+
+/* Main */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #f9fafb;
+}
+
+/* Topbar */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32px;
+  height: 64px;
+  background: #ffffff;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.topbar__title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.topbar__btn {
+  padding: 8px 18px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  cursor: pointer;
+  color: #374151;
+  transition: background 0.15s;
+}
+
+.topbar__btn:hover {
+  background: #f3f4f6;
+}
+
+.topbar__avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  color: #ffffff;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Content */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.stat-card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 24px;
+}
+
+.stat-card__label {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.stat-card__value {
+  font-size: 2rem;
+  font-weight: 800;
+  color: #111827;
+  margin-bottom: 8px;
+}
+
+.stat-card__change {
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.stat-card__change--up {
+  color: #16a34a;
+}
+
+.stat-card__change--down {
+  color: #dc2626;
+}
+
+/* Section Card */
+.section-card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 24px;
+}
+
+.section-card__title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 20px;
+}
+
+/* Activity Table */
+.activity-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.activity-table th {
+  text-align: left;
+  padding: 8px 12px;
+  color: #6b7280;
+  font-weight: 600;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.activity-table td {
+  padding: 12px 12px;
+  color: #374151;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.activity-table tr:last-child td {
+  border-bottom: none;
+}
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 99px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.badge--green {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.badge--blue {
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.badge--gray {
+  background: #f3f4f6;
+  color: #6b7280;
+}