@donotdev/cli 0.0.19 → 0.0.21

package/templates/app-dndev/src/components/Kanban.css.example

@@ -0,0 +1,385 @@
+/* ===========================
+   KANBAN — Board + Cards + Sheet
+   =========================== */
+
+/* --- Board grid --- */
+
+.dndev-kanban-board {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-surface, 8px);
+  overflow: hidden;
+  background: var(--card);
+  flex: 1;
+  min-height: 100dvh;
+}
+
+@media (width < 900px) {
+  .dndev-kanban-board { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (width < 540px) {
+  .dndev-kanban-board { grid-template-columns: 1fr; }
+}
+
+/* --- Column --- */
+
+.dndev-kanban-column {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.dndev-kanban-column + .dndev-kanban-column {
+  border-inline-start: 1px dashed var(--border);
+}
+
+@media (width < 900px) {
+  .dndev-kanban-column:nth-child(3),
+  .dndev-kanban-column:nth-child(4) { border-top: 1px dashed var(--border); }
+  .dndev-kanban-column:nth-child(3) { border-inline-start: none; }
+}
+
+@media (width < 540px) {
+  .dndev-kanban-column + .dndev-kanban-column {
+    border-inline-start: none;
+    border-top: 1px dashed var(--border);
+  }
+}
+
+.dndev-kanban-column[data-column='backlog'] { background: color-mix(in oklch, var(--muted) 40%, transparent); }
+.dndev-kanban-column[data-column='in_progress'] { background: color-mix(in oklch, var(--warning, #f59e0b) 4%, transparent); }
+.dndev-kanban-column[data-column='review'] { background: color-mix(in oklch, var(--primary) 4%, transparent); }
+.dndev-kanban-column[data-column='done'] { background: color-mix(in oklch, var(--success, #22c55e) 4%, transparent); }
+
+/* Column header */
+.dndev-kanban-col-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dndev-kanban-col-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dndev-kanban-col-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.dndev-kanban-column[data-column='backlog'] .dndev-kanban-col-dot { background: var(--muted-foreground); }
+.dndev-kanban-column[data-column='in_progress'] .dndev-kanban-col-dot { background: var(--warning, #f59e0b); }
+.dndev-kanban-column[data-column='review'] .dndev-kanban-col-dot { background: var(--primary); }
+.dndev-kanban-column[data-column='done'] .dndev-kanban-col-dot { background: var(--success, #22c55e); }
+
+/* Cards area */
+.dndev-kanban-cards {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px;
+  min-height: 80px;
+  overflow-y: auto;
+}
+
+.dndev-kanban-empty {
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  flex: 1;
+  min-height: 80px;
+  border: 1px dashed var(--border);
+  border-radius: 6px;
+  opacity: 0.5;
+}
+
+/* Show more button */
+.dndev-kanban-show-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px;
+  border: none;
+  border-top: 1px dashed var(--border);
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color var(--dur-fast, 100ms);
+}
+
+.dndev-kanban-show-more:hover {
+  color: var(--foreground);
+  background: color-mix(in oklch, var(--muted) 30%, transparent);
+}
+
+/* ===========================
+   KANBAN CARD — compact, clickable
+   =========================== */
+
+.dndev-kanban-card {
+  cursor: pointer;
+}
+
+.dndev-kanban-card-inner {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  border-inline-start: 3px solid var(--muted-foreground);
+  background: var(--background);
+  border-top: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+  border-bottom: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+  border-inline-end: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+  transition: background var(--dur-fast, 100ms);
+}
+
+.dndev-kanban-card:hover .dndev-kanban-card-inner {
+  background: color-mix(in oklch, var(--muted) 40%, var(--background));
+}
+
+.dndev-kanban-card-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.dndev-kanban-card-title {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--foreground);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dndev-kanban-card-meta {
+  font-size: 10px;
+  font-family: var(--font-mono, monospace);
+  color: var(--muted-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+
+.dndev-kanban-card-overlay {
+  opacity: 0.9;
+  transform: rotate(2deg);
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
+}
+
+/* Grip handle */
+.dndev-kanban-grip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  min-height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: grab;
+  flex-shrink: 0;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity var(--dur-fast, 100ms);
+}
+
+.dndev-kanban-card:hover .dndev-kanban-grip { opacity: 1; }
+.dndev-kanban-grip:active { cursor: grabbing; }
+
+/* Add button */
+.dndev-kanban-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all var(--dur-fast, 100ms);
+}
+
+.dndev-kanban-add:hover {
+  color: var(--foreground);
+  border-color: var(--foreground);
+  border-style: solid;
+  background: var(--muted, rgba(128, 128, 128, 0.1));
+}
+
+/* ===========================
+   CARD DETAIL SHEET — slide from right
+   =========================== */
+
+.dndev-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 150;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dndev-sheet {
+  width: min(440px, 90vw);
+  height: 100%;
+  background: var(--card);
+  border-inline-start: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  animation: dndev-sheet-in 200ms ease;
+}
+
+@keyframes dndev-sheet-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+.dndev-sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dndev-sheet-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition: all var(--dur-fast, 100ms);
+}
+
+.dndev-sheet-close:hover {
+  background: var(--muted);
+  color: var(--foreground);
+}
+
+.dndev-sheet-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dndev-sheet-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.dndev-sheet-input {
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-surface, 8px);
+  background: var(--background);
+  color: var(--foreground);
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--dur-fast, 100ms);
+}
+
+.dndev-sheet-input:focus {
+  border-color: var(--primary);
+}
+
+.dndev-sheet-textarea {
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-surface, 8px);
+  background: var(--background);
+  color: var(--foreground);
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  resize: vertical;
+  min-height: 80px;
+  transition: border-color var(--dur-fast, 100ms);
+}
+
+.dndev-sheet-textarea:focus {
+  border-color: var(--primary);
+}
+
+.dndev-sheet-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--dur-fast, 100ms);
+}
+
+.dndev-sheet-option[data-active='true'] {
+  background: var(--foreground);
+  color: var(--background);
+  border-color: var(--foreground);
+}
+
+.dndev-sheet-option-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.dndev-sheet-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--border);
+}
+
+/* ===========================
+   color-mix FALLBACKS
+   =========================== */
+
+@supports not (background: color-mix(in oklch, red 50%, blue)) {
+  .dndev-kanban-column[data-column='backlog'] { background: rgba(128, 128, 128, 0.06); }
+  .dndev-kanban-column[data-column='in_progress'] { background: rgba(245, 158, 11, 0.04); }
+  .dndev-kanban-column[data-column='review'] { background: rgba(59, 130, 246, 0.04); }
+  .dndev-kanban-column[data-column='done'] { background: rgba(34, 197, 94, 0.04); }
+}

package/templates/app-dndev/src/components/ModeToggle.tsx.example

@@ -0,0 +1,32 @@
+/**
+ * @fileoverview BUILD / RUN mode toggle for the dashboard header
+ */
+
+import { memo } from 'react';
+import { Hammer, Zap } from 'lucide-react';
+
+import { ToggleGroup } from '@donotdev/components';
+
+import { useDoNotDashStore } from '../stores/dndevStore';
+
+import type { ReactNode } from 'react';
+
+function ModeToggleComponent(): ReactNode {
+  const mode = useDoNotDashStore((s) => s.mode);
+  const toggleMode = useDoNotDashStore((s) => s.toggleMode);
+
+  return (
+    <ToggleGroup
+      type="single"
+      size="sm"
+      value={mode}
+      onValueChange={(v) => { if (v) toggleMode(); }}
+      items={[
+        { value: 'build', label: <><Hammer size={12} /> BUILD</> },
+        { value: 'run', label: <><Zap size={12} /> RUN</> },
+      ]}
+    />
+  );
+}
+
+export const ModeToggle = memo(ModeToggleComponent);

package/templates/app-dndev/src/components/OverlaySlot.tsx.example

@@ -0,0 +1,68 @@
+/**
+ * @fileoverview Overlay center slot — lets pages inject content into CockpitLayout's overlay bar
+ *
+ * CockpitLayout renders OverlaySlotTarget (a DOM node). Pages render OverlaySlotPortal
+ * which portals its children into that DOM node. No state loops — pure React portals.
+ */
+
+import { createContext, useContext, useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import type { ReactNode } from 'react';
+
+// ============================================================================
+// CONTEXT — shares the target DOM element
+// ============================================================================
+
+const OverlaySlotContext = createContext<HTMLDivElement | null>(null);
+
+// ============================================================================
+// PROVIDER (used by CockpitLayout)
+// ============================================================================
+
+export function OverlaySlotProvider({ children }: { children: ReactNode }) {
+  const [target, setTarget] = useState<HTMLDivElement | null>(null);
+
+  return (
+    <OverlaySlotContext.Provider value={target}>
+      {children}
+      {/* Hidden mount point — CockpitLayout moves this into the overlay bar */}
+      <div ref={setTarget} style={{ display: 'contents' }} />
+    </OverlaySlotContext.Provider>
+  );
+}
+
+// ============================================================================
+// TARGET (rendered by CockpitLayout in the overlay bar)
+// ============================================================================
+
+/** Renders the overlay slot target where portaled content appears */
+export function OverlaySlotTarget() {
+  const ref = useRef<HTMLDivElement>(null);
+  const target = useContext(OverlaySlotContext);
+
+  // Move the provider's mount point into this target element
+  useEffect(() => {
+    if (!ref.current || !target) return;
+    ref.current.appendChild(target);
+    return () => {
+      // Move back to avoid orphan
+      if (ref.current && target.parentNode === ref.current) {
+        ref.current.removeChild(target);
+      }
+    };
+  }, [target]);
+
+  return <div ref={ref} className="dndev-cockpit-overlays-center" />;
+}
+
+// ============================================================================
+// PORTAL (used by pages to inject content)
+// ============================================================================
+
+/** Portal children into the overlay center slot */
+export function OverlaySlotPortal({ children }: { children: ReactNode }) {
+  const target = useContext(OverlaySlotContext);
+  if (!target) return null;
+  return createPortal(children, target);
+}

package/templates/app-dndev/src/components/TerminalPanel.css.example

@@ -0,0 +1,228 @@
+/* ===========================
+   TERMINAL PANEL
+   When embedded: fills its parent flex container (no fixed positioning)
+   When standalone (collapsed bar in bottom-bar layout): minimal tabbar only
+   =========================== */
+
+.dndev-terminal-panel {
+  display: flex;
+  flex-direction: column;
+  background: var(--card);
+  contain: layout style;
+  min-height: 0;
+}
+
+/* Embedded mode — fills parent panel */
+.dndev-terminal-panel[data-embedded] {
+  flex: 1;
+  height: 100%;
+  border: none;
+}
+
+/* ===========================
+   TAB BAR
+   =========================== */
+
+.dndev-terminal-tabbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 34px;
+  min-height: 34px;
+  padding-inline: 8px;
+  background: var(--muted);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  gap: 4px;
+}
+
+.dndev-terminal-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: visible;
+  scrollbar-width: none;
+}
+
+.dndev-terminal-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.dndev-terminal-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color var(--dur-fast, 100ms), background var(--dur-fast, 100ms);
+  line-height: 1;
+}
+
+.dndev-terminal-tab:hover {
+  color: var(--foreground);
+  background: var(--background);
+}
+
+.dndev-terminal-tab[data-active='true'] {
+  color: var(--foreground);
+  background: var(--background);
+  font-weight: 500;
+}
+
+.dndev-terminal-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color var(--dur-fast, 100ms), background var(--dur-fast, 100ms);
+}
+
+.dndev-terminal-toggle:hover {
+  color: var(--foreground);
+  background: var(--background);
+}
+
+.dndev-terminal-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* Add tab button */
+.dndev-terminal-tab-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  border-radius: 4px;
+  margin-inline-start: 2px;
+  transition: color var(--dur-fast, 100ms), background var(--dur-fast, 100ms);
+}
+
+.dndev-terminal-tab-add:hover {
+  color: var(--foreground);
+  background: var(--background);
+}
+
+/* Tab close / kill button */
+.dndev-terminal-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-inline-start: 2px;
+  border-radius: 3px;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--dur-fast, 100ms), color var(--dur-fast, 100ms), background var(--dur-fast, 100ms);
+}
+
+.dndev-terminal-tab:hover .dndev-terminal-tab-close {
+  opacity: 1;
+}
+
+.dndev-terminal-tab-close:hover {
+  color: var(--destructive);
+  background: color-mix(in oklch, var(--destructive) 15%, transparent);
+}
+
+/* ===========================
+   TERMINAL CONTENT — xterm container
+   =========================== */
+
+.dndev-terminal-content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background: #0a0a0a;
+  position: relative;
+}
+
+/* xterm container — fills content area */
+.dndev-terminal-xterm-host {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+/* Per-tab xterm wrapper — created dynamically in JS */
+.dndev-terminal-tab-pane {
+  width: 100%;
+  height: 100%;
+}
+
+/* ===========================
+   XTERM OVERRIDES
+   =========================== */
+
+.dndev-terminal-content .xterm {
+  height: 100%;
+  padding: 4px;
+}
+
+.dndev-terminal-content .xterm-viewport {
+  overflow-y: auto !important;
+}
+
+/* ===========================
+   APP PICKER DROPDOWN
+   =========================== */
+
+.dndev-terminal-app-picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  min-width: 160px;
+  background: var(--popover, var(--card));
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px;
+  z-index: 50;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.dndev-terminal-app-picker-empty {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+
+.dndev-terminal-app-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  background: transparent;
+  color: var(--foreground);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background var(--dur-fast, 100ms);
+}
+
+.dndev-terminal-app-picker-item:hover {
+  background: var(--accent, var(--muted));
+}