newtui 2.0.0

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "newtui",
+  "version": "2.0.0",
+  "description": "CLI for newt/ui — Discord-native UI components for React, Vue and Nuxt (shadcn-style registry). Part of the WolfStar toolchain.",
+  "keywords": [
+    "component-library",
+    "design-system",
+    "discord",
+    "discord-bot",
+    "nuxt",
+    "react",
+    "shadcn",
+    "ui",
+    "vue",
+    "wolfstar"
+  ],
+  "homepage": "https://newtui.dev",
+  "bugs": {
+    "url": "https://github.com/wolfstar-project/newt-ui/issues"
+  },
+  "license": "Apache-2.0",
+  "author": "@wolfstar",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wolfstar-project/newt-ui.git",
+    "directory": "packages/newtui"
+  },
+  "bin": {
+    "newtui": "./dist/index.js",
+    "newtui-html": "./cli/index.js"
+  },
+  "files": [
+    "dist",
+    "cli",
+    "registry",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.7.0",
+    "cross-spawn": "^7.0.6",
+    "mri": "^1.2.0",
+    "package-manager-detector": "^1.8.0",
+    "picocolors": "^1.1.1",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@types/cross-spawn": "^6.0.6",
+    "@types/node": "^22.10.2",
+    "tsdown": "^0.22.14",
+    "typescript": "^5.7.2",
+    "unrun": "^0.3.1"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsdown --config-loader unrun",
+    "dev": "tsdown --config-loader unrun --watch",
+    "lint": "oxlint -c ../../.oxlintrc.json .",
+    "lint:fix": "oxlint -c ../../.oxlintrc.json --fix .",
+    "start": "node dist/index.js",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/registry/html/components/attachment.css

@@ -0,0 +1,42 @@
+/* newt-ui · Attachment / File Card */
+
+.newt-attachment {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--newt-bg-surface);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-md);
+  padding: 10px 12px;
+  max-width: 360px;
+}
+.newt-attachment__icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--newt-radius-sm);
+  background: var(--newt-brand);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: var(--newt-font-mono);
+  flex-shrink: 0;
+}
+.newt-attachment__meta {
+  flex: 1;
+  min-width: 0;
+}
+.newt-attachment__name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--newt-text-link);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.newt-attachment__size {
+  font-size: 12px;
+  color: var(--newt-text-muted);
+}

package/registry/html/components/attachment.html

@@ -0,0 +1,8 @@
+<div class="newt-attachment">
+  <div class="newt-attachment__icon">FILE</div>
+  <div class="newt-attachment__meta">
+    <div class="newt-attachment__name">filename.ext</div>
+    <div class="newt-attachment__size">1.2 MB</div>
+  </div>
+  <button class="newt-btn newt-btn--icon" aria-label="Download file">⬇</button>
+</div>

package/registry/html/components/avatar.css

@@ -0,0 +1,32 @@
+/* newt-ui · Avatar */
+
+.newt-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--newt-brand);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 16px;
+  flex-shrink: 0;
+  overflow: hidden;
+  position: relative;
+}
+.newt-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.newt-avatar--sm {
+  width: 24px;
+  height: 24px;
+  font-size: 11px;
+}
+.newt-avatar--lg {
+  width: 80px;
+  height: 80px;
+  font-size: 28px;
+}

package/registry/html/components/avatar.html

@@ -0,0 +1,3 @@
+<div class="newt-avatar">N</div>
+<div class="newt-avatar newt-avatar--sm">N</div>
+<div class="newt-avatar newt-avatar--lg">N</div>

package/registry/html/components/badge.css

@@ -0,0 +1,39 @@
+/* newt-ui · Badge */
+
+.newt-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  padding: 2px 8px;
+  border-radius: var(--newt-radius-full);
+  background: var(--newt-bg-elevated);
+  color: var(--newt-text-secondary);
+}
+
+.newt-badge--brand {
+  background: rgba(88, 101, 242, 0.15);
+  color: #b3baff;
+}
+.newt-badge--success {
+  background: rgba(35, 165, 90, 0.15);
+  color: #45c178;
+}
+.newt-badge--warning {
+  background: rgba(240, 178, 50, 0.15);
+  color: #f3b95f;
+}
+.newt-badge--danger {
+  background: rgba(242, 63, 66, 0.15);
+  color: #f4878a;
+}
+
+.newt-badge--dot::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}

package/registry/html/components/badge.html

@@ -0,0 +1,3 @@
+<span class="newt-badge newt-badge--brand newt-badge--dot">Brand</span>
+<span class="newt-badge newt-badge--success newt-badge--dot">Online</span>
+<span class="newt-badge newt-badge--danger newt-badge--dot">Error</span>

package/registry/html/components/bot-command-card.css

@@ -0,0 +1,67 @@
+/* newt-ui · Bot Command Card */
+
+.newt-command-card {
+  background: var(--newt-bg-elevated);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-md);
+  padding: 16px;
+  max-width: 480px;
+}
+.newt-command-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  gap: 12px;
+}
+.newt-command-card__name {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--newt-font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--newt-brand);
+}
+.newt-command-card__slash {
+  color: var(--newt-text-muted);
+  font-weight: 400;
+}
+.newt-command-card__desc {
+  font-size: 13px;
+  color: var(--newt-text-secondary);
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+.newt-command-card__options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.newt-command-card__option {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  font-size: 12px;
+}
+.newt-command-card__opt-name {
+  font-family: var(--newt-font-mono);
+  color: var(--newt-text-primary);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.newt-command-card__opt-type {
+  color: var(--newt-text-muted);
+  font-family: var(--newt-font-mono);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+.newt-command-card__opt-required {
+  color: var(--newt-dnd);
+  font-size: 11px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.newt-command-card__opt-desc {
+  color: var(--newt-text-muted);
+}

package/registry/html/components/bot-command-card.html

@@ -0,0 +1,17 @@
+<div class="newt-command-card">
+  <div class="newt-command-card__header">
+    <span class="newt-command-card__name">
+      <span class="newt-command-card__slash">/</span>command
+    </span>
+    <span class="newt-badge newt-badge--brand">bot-name</span>
+  </div>
+  <div class="newt-command-card__desc">Command description goes here.</div>
+  <div class="newt-command-card__options">
+    <div class="newt-command-card__option">
+      <span class="newt-command-card__opt-name">option</span>
+      <span class="newt-command-card__opt-type">STRING</span>
+      <span class="newt-command-card__opt-required">required</span>
+      <span class="newt-command-card__opt-desc">Option description</span>
+    </div>
+  </div>
+</div>

package/registry/html/components/button.css

@@ -0,0 +1,98 @@
+/* newt-ui · Button */
+
+.newt-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: var(--newt-font-sans);
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  padding: 10px 16px;
+  border-radius: var(--newt-radius-sm);
+  border: none;
+  cursor: pointer;
+  transition:
+    background-color var(--newt-duration-fast) var(--newt-ease),
+    color var(--newt-duration-fast) var(--newt-ease),
+    box-shadow var(--newt-duration-fast) var(--newt-ease);
+  white-space: nowrap;
+  user-select: none;
+}
+.newt-btn:active {
+  transform: translateY(0.5px);
+}
+.newt-btn:focus-visible {
+  outline: 2px solid var(--newt-text-link);
+  outline-offset: 2px;
+}
+
+.newt-btn--primary {
+  background: var(--newt-brand);
+  color: #fff;
+}
+.newt-btn--primary:hover {
+  background: var(--newt-brand-hover);
+}
+.newt-btn--primary:active {
+  background: var(--newt-brand-active);
+}
+
+.newt-btn--secondary {
+  background: var(--newt-bg-elevated);
+  color: var(--newt-text-primary);
+}
+.newt-btn--secondary:hover {
+  background: var(--newt-bg-hover);
+}
+
+.newt-btn--danger {
+  background: var(--newt-danger);
+  color: #fff;
+}
+.newt-btn--danger:hover {
+  background: var(--newt-danger-hover);
+}
+
+.newt-btn--success {
+  background: var(--newt-online);
+  color: #fff;
+}
+.newt-btn--success:hover {
+  filter: brightness(0.9);
+}
+
+.newt-btn--link {
+  background: transparent;
+  color: var(--newt-text-link);
+  padding: 4px 0;
+}
+.newt-btn--link:hover {
+  text-decoration: underline;
+}
+
+.newt-btn--sm {
+  padding: 6px 12px;
+  font-size: 13px;
+}
+.newt-btn--lg {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+
+.newt-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.newt-btn--icon {
+  padding: 8px;
+  border-radius: var(--newt-radius-full);
+  background: var(--newt-bg-elevated);
+  color: var(--newt-text-secondary);
+}
+.newt-btn--icon:hover {
+  background: var(--newt-bg-hover);
+  color: var(--newt-text-primary);
+}

package/registry/html/components/button.html

@@ -0,0 +1,5 @@
+<button class="newt-btn newt-btn--primary">Primary</button>
+<button class="newt-btn newt-btn--secondary">Secondary</button>
+<button class="newt-btn newt-btn--success">Success</button>
+<button class="newt-btn newt-btn--danger">Danger</button>
+<button class="newt-btn newt-btn--link">Link button</button>

package/registry/html/components/card.css

@@ -0,0 +1,20 @@
+/* newt-ui · Card / Panel */
+
+.newt-card {
+  background: var(--newt-bg-elevated);
+  border-radius: var(--newt-radius-lg);
+  border: 1px solid var(--newt-border);
+  padding: 20px;
+}
+
+.newt-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 4px;
+}
+
+.newt-card__description {
+  font-size: 14px;
+  color: var(--newt-text-secondary);
+  margin: 0;
+}

package/registry/html/components/card.html

@@ -0,0 +1,4 @@
+<div class="newt-card">
+  <div class="newt-card__title">Card title</div>
+  <p class="newt-card__description">Card description text.</p>
+</div>

package/registry/html/components/channel-topic.css

@@ -0,0 +1,35 @@
+/* newt-ui · Channel Topic Bar */
+
+.newt-channel-topic {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--newt-border);
+  font-size: 14px;
+  min-width: 0;
+}
+.newt-channel-topic__icon {
+  color: var(--newt-text-muted);
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.newt-channel-topic__name {
+  font-weight: 700;
+  color: var(--newt-text-primary);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.newt-channel-topic__divider {
+  width: 1px;
+  height: 18px;
+  background: var(--newt-border);
+  flex-shrink: 0;
+}
+.newt-channel-topic__desc {
+  color: var(--newt-text-muted);
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/registry/html/components/channel-topic.html

@@ -0,0 +1,8 @@
+<div class="newt-channel-topic">
+  <span class="newt-channel-topic__icon" aria-hidden="true">#</span>
+  <span class="newt-channel-topic__name">channel-name</span>
+  <span class="newt-channel-topic__divider"></span>
+  <span class="newt-channel-topic__desc"
+    >Channel topic description goes here</span
+  >
+</div>

package/registry/html/components/code-block.css

@@ -0,0 +1,25 @@
+/* newt-ui · Code Block */
+
+.newt-code {
+  background: #111214;
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-md);
+  font-family: var(--newt-font-mono);
+  font-size: 13px;
+  color: var(--newt-text-secondary);
+  padding: 16px;
+  overflow-x: auto;
+  line-height: 1.6;
+}
+.newt-code .tok-key {
+  color: #569cd6;
+}
+.newt-code .tok-str {
+  color: #ce9178;
+}
+.newt-code .tok-com {
+  color: #6a9955;
+}
+.newt-code .tok-fn {
+  color: #dcdcaa;
+}

package/registry/html/components/code-block.html

@@ -0,0 +1,2 @@
+<pre class="newt-code"><span class="tok-com">// example</span>
+<span class="tok-key">const</span> <span class="tok-fn">greet</span> = () => <span class="tok-str">"hello"</span>;</pre>

package/registry/html/components/context-menu.css

@@ -0,0 +1,46 @@
+/* newt-ui · Context Menu */
+
+.newt-context-menu {
+  background: var(--newt-bg-floating);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-md);
+  box-shadow: var(--newt-shadow-elevation-high);
+  padding: 6px;
+  width: 188px;
+}
+.newt-context-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  border-radius: var(--newt-radius-sm);
+  font-size: 13px;
+  color: var(--newt-text-secondary);
+  cursor: pointer;
+  transition:
+    background var(--newt-duration-fast) var(--newt-ease),
+    color var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-context-menu__item:hover {
+  background: var(--newt-brand);
+  color: #fff;
+}
+.newt-context-menu__item--danger {
+  color: var(--newt-dnd);
+}
+.newt-context-menu__item--danger:hover {
+  background: var(--newt-dnd);
+  color: #fff;
+}
+.newt-context-menu__shortcut {
+  font-size: 11px;
+  color: var(--newt-text-muted);
+}
+.newt-context-menu__item:hover .newt-context-menu__shortcut {
+  color: rgba(255, 255, 255, 0.7);
+}
+.newt-context-menu__divider {
+  height: 1px;
+  background: var(--newt-border);
+  margin: 4px 6px;
+}

package/registry/html/components/context-menu.html

@@ -0,0 +1,14 @@
+<div class="newt-context-menu" role="menu">
+  <div class="newt-context-menu__item" role="menuitem">Action one</div>
+  <div class="newt-context-menu__item" role="menuitem">
+    Action two
+    <span class="newt-context-menu__shortcut">Ctrl+K</span>
+  </div>
+  <div class="newt-context-menu__divider"></div>
+  <div
+    class="newt-context-menu__item newt-context-menu__item--danger"
+    role="menuitem"
+  >
+    Delete
+  </div>
+</div>

package/registry/html/components/cooldown-bar.css

@@ -0,0 +1,33 @@
+/* newt-ui · Cooldown Bar */
+
+.newt-cooldown {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 260px;
+}
+.newt-cooldown__label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--newt-text-muted);
+}
+.newt-cooldown__label strong {
+  font-family: var(--newt-font-mono);
+  color: var(--newt-text-secondary);
+  font-weight: 600;
+}
+.newt-cooldown__track {
+  height: 6px;
+  background: var(--newt-bg-base);
+  border-radius: var(--newt-radius-full);
+  overflow: hidden;
+}
+.newt-cooldown__fill {
+  height: 100%;
+  background: var(--newt-idle);
+  border-radius: var(--newt-radius-full);
+}
+.newt-cooldown__fill--ready {
+  background: var(--newt-online);
+}

package/registry/html/components/cooldown-bar.html

@@ -0,0 +1,9 @@
+<div class="newt-cooldown">
+  <div class="newt-cooldown__label">
+    <span>Command cooldown</span>
+    <strong>3.2s</strong>
+  </div>
+  <div class="newt-cooldown__track">
+    <div class="newt-cooldown__fill" style="width: 40%"></div>
+  </div>
+</div>

package/registry/html/components/divider.css

@@ -0,0 +1,18 @@
+/* newt-ui · Divider with label (Discord date separators) */
+
+.newt-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 16px 0;
+  color: var(--newt-text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+.newt-divider::before,
+.newt-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--newt-border);
+}

package/registry/html/components/divider.html

@@ -0,0 +1 @@
+<div class="newt-divider">SECTION LABEL</div>

package/registry/html/components/dropdown.css

@@ -0,0 +1,50 @@
+/* newt-ui · Dropdown Menu */
+
+.newt-dropdown {
+  background: var(--newt-bg-floating);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-md);
+  box-shadow: var(--newt-shadow-elevation-high);
+  padding: 6px;
+  width: 240px;
+}
+.newt-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--newt-radius-sm);
+  cursor: pointer;
+  transition: background var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-dropdown__item:hover,
+.newt-dropdown__item--active {
+  background: var(--newt-brand);
+}
+.newt-dropdown__item:hover .newt-dropdown__desc,
+.newt-dropdown__item--active .newt-dropdown__desc {
+  color: rgba(255, 255, 255, 0.75);
+}
+.newt-dropdown__icon {
+  width: 20px;
+  text-align: center;
+  flex-shrink: 0;
+  color: var(--newt-text-muted);
+}
+.newt-dropdown__item:hover .newt-dropdown__icon,
+.newt-dropdown__item--active .newt-dropdown__icon {
+  color: #fff;
+}
+.newt-dropdown__label {
+  font-size: 14px;
+  font-weight: 500;
+}
+.newt-dropdown__desc {
+  font-size: 12px;
+  color: var(--newt-text-muted);
+}
+.newt-dropdown__divider {
+  height: 1px;
+  background: var(--newt-border);
+  margin: 4px 6px;
+}