idcmd 0.0.1 → 0.0.2

package/templates/default/site/styles/tailwind.css

@@ -0,0 +1,452 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+/* ============================================
+   THEME - Customize colors, fonts, and sizing
+   ============================================ */
+
+:root {
+  --background: oklch(0.985 0.002 260);
+  --foreground: oklch(0.15 0.005 260);
+  --card: oklch(0.985 0.002 260);
+  --card-foreground: oklch(0.15 0.005 260);
+  --popover: oklch(0.98 0.002 260);
+  --popover-foreground: oklch(0.15 0.005 260);
+  --primary: oklch(0.18 0.005 260);
+  --primary-foreground: oklch(0.985 0.002 260);
+  --secondary: oklch(0.96 0.003 260);
+  --secondary-foreground: oklch(0.18 0.005 260);
+  --muted: oklch(0.96 0.003 260);
+  --muted-foreground: oklch(0.45 0.005 260);
+  --accent: oklch(0.96 0.003 260);
+  --accent-foreground: oklch(0.18 0.005 260);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0 0 0 / 10%);
+  --input: oklch(0 0 0 / 10%);
+  --ring: oklch(0.5 0.005 260);
+  --radius: 0.625rem;
+  --sidebar-width: 16rem;
+  --sidebar: oklch(0.975 0.002 260);
+  --sidebar-foreground: oklch(0.15 0.005 260);
+  --sidebar-primary: oklch(0.15 0.005 260);
+  --sidebar-primary-foreground: oklch(0.985 0.002 260);
+  --sidebar-accent: oklch(0.96 0.003 260);
+  --sidebar-accent-foreground: oklch(0.18 0.005 260);
+  --sidebar-border: oklch(0 0 0 / 8%);
+  --sidebar-ring: oklch(0.5 0.005 260);
+}
+
+.dark {
+  --background: oklch(0.1 0.005 260);
+  --foreground: oklch(0.93 0 0);
+  --card: oklch(0.13 0.005 260);
+  --card-foreground: oklch(0.93 0 0);
+  --popover: oklch(0.13 0.005 260);
+  --popover-foreground: oklch(0.93 0 0);
+  --primary: oklch(0.93 0 0);
+  --primary-foreground: oklch(0.1 0.005 260);
+  --secondary: oklch(0.18 0.005 260);
+  --secondary-foreground: oklch(0.93 0 0);
+  --muted: oklch(0.18 0.005 260);
+  --muted-foreground: oklch(0.6 0 0);
+  --accent: oklch(0.18 0.005 260);
+  --accent-foreground: oklch(0.93 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(1 0 0 / 8%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.45 0 0);
+  --sidebar: oklch(0.08 0.005 260);
+  --sidebar-foreground: oklch(0.93 0 0);
+  --sidebar-primary: oklch(0.93 0 0);
+  --sidebar-primary-foreground: oklch(0.08 0.005 260);
+  --sidebar-accent: oklch(0.15 0.005 260);
+  --sidebar-accent-foreground: oklch(0.93 0 0);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.45 0 0);
+}
+
+@theme inline {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  /*
+    Tailwind v4’s `border` utility relies on `border-style: var(--tw-border-style)`.
+    In some browsers the Tailwind-defined `--tw-border-style` var can be missing
+    (it’s gated behind a complex `@supports` block), which makes borders render
+    as `border-style: none`. Defining it here ensures borders consistently show.
+  */
+  *,
+  ::before,
+  ::after,
+  ::backdrop {
+    --tw-border-style: solid;
+  }
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html,
+  body {
+    /* Prevent rubber-band overscroll from pulling the sticky top navbar down. */
+    overscroll-behavior-y: none;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+html.smooth-scroll {
+  scroll-behavior: smooth;
+}
+
+/*
+  Sticky + backdrop-filter can jitter on fast scroll in some browsers.
+  Forcing the header into its own composited layer tends to reduce jumping.
+*/
+header {
+  transform: translateZ(0);
+  will-change: transform;
+}
+
+/* ============================================
+   LAYOUT - Sidebar and main content structure
+   ============================================ */
+
+.sidebar {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--sidebar-width);
+    background-color: var(--sidebar);
+    color: var(--sidebar-foreground);
+    border-right: 1px solid var(--sidebar-border);
+    display: flex;
+    flex-direction: column;
+    z-index: 40;
+  }
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem 0.75rem;
+}
+
+.main-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 768px) {
+  .main-wrapper {
+    margin-left: var(--sidebar-width);
+  }
+}
+
+.main-content {
+  flex: 1;
+  padding: 2rem;
+}
+
+/* Hide default disclosure markers; we style the dropdown ourselves. */
+.llm-menu summary {
+  list-style: none;
+}
+.llm-menu summary::-webkit-details-marker {
+  display: none;
+}
+
+/* ============================================
+   RIGHT RAIL - Table of contents scroll + active
+   ============================================ */
+
+.toc-scroll {
+  height: 100%;
+  /*
+    The right rail must never be an independently scrollable container.
+    Wheel/trackpad input over the TOC should scroll the page, not the sidebar.
+  */
+  overflow: hidden;
+  overflow: clip;
+  overscroll-behavior: contain;
+  padding-right: 0.25rem;
+  scrollbar-gutter: stable;
+}
+
+/*
+  "Follow" mode:
+  - No independent scrolling in the TOC.
+  - JS translates the list to keep the active item centered.
+  - Without JS, the TOC is clipped (still clickable, but not independently scrollable).
+*/
+body[data-toc-follow="1"] .toc-scroll {
+  /* Prefer `overflow: clip` (no scroll container) when supported. */
+  overflow: hidden;
+  overflow: clip;
+  /* Ensure wheel/trackpad scroll continues to the page while hovering the TOC. */
+  overscroll-behavior: auto;
+}
+
+body[data-toc-follow="1"] .toc-scroll > ul {
+  will-change: transform;
+}
+
+[data-toc-link] {
+  display: block;
+  padding: 0.25rem 0.5rem;
+  border-left: 2px solid transparent;
+}
+
+[data-toc-link][aria-current="location"] {
+  border-left-color: var(--foreground);
+  color: var(--foreground);
+  font-weight: 500;
+}
+
+/* ============================================
+   PROSE - Typography for markdown content
+   ============================================ */
+
+.prose {
+  @apply overflow-x-hidden max-w-full leading-7;
+  overflow-wrap: anywhere;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-semibold;
+    letter-spacing: -0.025em;
+  }
+  h1 {
+    @apply text-4xl mt-10 mb-4;
+  }
+  h1:first-child {
+    @apply mt-0;
+  }
+  h2 {
+    @apply text-2xl mt-10 mb-4 border-b border-border pb-3;
+  }
+  h3 {
+    @apply text-xl mt-8 mb-3;
+  }
+  h1,
+  h2,
+  h3 {
+    scroll-margin-top: var(--scroll-margin-top, 96px);
+  }
+  p {
+    @apply my-5;
+  }
+  a {
+    @apply text-foreground underline decoration-muted-foreground/40 underline-offset-4 hover:decoration-foreground transition-colors;
+  }
+  code {
+    @apply bg-muted px-1.5 py-0.5 text-sm rounded-md font-mono;
+  }
+  /* Shiki code blocks — sharp corners, terminal aesthetic */
+  pre.shiki {
+    @apply p-5 overflow-x-auto my-6 text-sm border border-border max-w-full;
+    border-radius: 0;
+  }
+  pre.shiki code {
+    @apply bg-transparent p-0 rounded-none;
+  }
+  /* Default to light theme colors */
+  pre.shiki,
+  pre.shiki span {
+    color: var(--shiki-light);
+    background-color: var(--shiki-light-bg);
+  }
+  /* Dark mode: use dark theme colors */
+  .dark pre.shiki,
+  .dark pre.shiki span {
+    color: var(--shiki-dark);
+    background-color: var(--shiki-dark-bg);
+  }
+  /* Fallback for non-shiki pre blocks */
+  pre:not(.shiki) {
+    @apply bg-foreground text-background p-5 overflow-x-auto my-6 border border-border max-w-full;
+    border-radius: 0;
+  }
+  pre:not(.shiki) code {
+    @apply bg-transparent p-0 rounded-none;
+  }
+  blockquote {
+    @apply pl-4 my-5 text-muted-foreground;
+    border-left: 3px solid var(--border);
+    font-style: normal;
+  }
+  ul,
+  ol {
+    @apply my-5 pl-6 leading-7;
+  }
+  li {
+    @apply my-1.5;
+  }
+  ul {
+    list-style-type: "— ";
+  }
+  ol {
+    @apply list-decimal;
+  }
+  /* Task list checkboxes */
+  input[type="checkbox"] {
+    accent-color: var(--accent-foreground);
+  }
+  hr {
+    @apply my-12 border-border;
+  }
+  /* Tables — bottom-border only, minimal chrome */
+  table {
+    @apply my-6 max-w-full overflow-x-auto block;
+    border-collapse: collapse;
+  }
+  th,
+  td {
+    @apply px-4 py-2.5 text-left;
+    border-bottom: 1px solid var(--border);
+  }
+  th {
+    @apply text-xs font-semibold uppercase tracking-wider text-muted-foreground;
+  }
+  tr:hover {
+    @apply bg-muted/30;
+  }
+}
+
+/* Homepage hero prose variant */
+.prose-home h1:first-child {
+  @apply text-5xl md:text-6xl font-semibold;
+  letter-spacing: -0.035em;
+  line-height: 1.1;
+}
+.prose-home h1:first-child + p {
+  @apply text-xl text-muted-foreground;
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+.site-footer {
+  @apply font-mono text-xs text-muted-foreground py-8 px-8 border-t border-border;
+}
+
+/* ============================================
+   DOC COMPONENTS - Errors + InstallTabs
+   ============================================ */
+
+.doc-component-error {
+  @apply my-6 border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm;
+}
+
+/* CSS-only tabs (used by <InstallTabs ... />) */
+.code-tabs {
+  @apply my-6 border border-border bg-card;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: auto auto;
+}
+
+.code-tabs__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.code-tabs__label {
+  @apply text-xs font-semibold uppercase tracking-wider text-muted-foreground;
+  grid-row: 1;
+  border-bottom: 1px solid var(--border);
+  padding: 0.75rem 0.9rem;
+  cursor: pointer;
+  user-select: none;
+  text-align: center;
+}
+
+.code-tabs__label[data-pm="npm"] {
+  grid-column: 1;
+}
+.code-tabs__label[data-pm="pnpm"] {
+  grid-column: 2;
+}
+.code-tabs__label[data-pm="bun"] {
+  grid-column: 3;
+}
+.code-tabs__label[data-pm="yarn"] {
+  grid-column: 4;
+}
+
+.code-tabs__panel {
+  grid-row: 2;
+  grid-column: 1 / -1;
+  display: none;
+}
+
+.code-tabs__input:checked + .code-tabs__label {
+  color: var(--foreground);
+  background: color-mix(in oklab, var(--muted) 75%, transparent);
+  border-bottom-color: transparent;
+}
+
+.code-tabs__input:checked + .code-tabs__label + .code-tabs__panel {
+  display: block;
+}
+
+/* Remove extra chrome so the tabset reads as a single component. */
+.code-tabs__panel pre.shiki,
+.code-tabs__panel pre:not(.shiki) {
+  margin: 0;
+  border: none;
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "allowJs": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}

package/templates/default/vercel.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "bun run build",
+  "outputDirectory": "dist",
+  "installCommand": "bun install",
+  "bunVersion": "1.x"
+}

package/index.js

@@ -1,2 +0,0 @@
-// Placeholder entry point for the idcmd package.
-module.exports = {};