@vttforge/cli 0.0.0 → 0.5.0

package/templates/system-ts/styles/main.css

@@ -0,0 +1,495 @@
+@import "@vttforge/styles";
+
+/*
+ * {{ID}} styles — implements the .sh-* class system from the
+ * canonical Figma reference (character-sheet.jsx + Theme Explorations.html)
+ * on top of @vttforge/styles. Tokens come from the Forge theme; no other
+ * theme is hand-rolled here (consumers swap themes by overriding --vttf-*).
+ *
+ * Component CSS stays UNLAYERED so it wins over Foundry's
+ * @layer applications without specificity wars. Scoped under .{{ID}} so
+ * nothing leaks into core Foundry UI.
+ */
+
+/* Opaque sheet bg — Foundry's ApplicationV2 default is transparent. */
+.{{ID}}.sheet,
+.{{ID}} .window-content {
+  background: var(--vttf-bg);
+  opacity: 1;
+}
+
+.{{ID}}.sheet {
+  color: var(--vttf-text);
+  font-family: var(--vttf-font-body, system-ui, sans-serif);
+}
+
+.{{ID}}.sheet form {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+/* ════════ HEAD (.sh-head) ════════ */
+.{{ID}} .sh-head {
+  display: grid;
+  grid-template-columns: 88px 1fr;
+  gap: var(--vttf-space-4);
+  padding: var(--vttf-space-4);
+  background: var(--vttf-surface);
+  border-bottom: 1px solid var(--vttf-border);
+}
+
+.{{ID}} .sh-portrait {
+  width: 88px;
+  height: 110px;
+  border-radius: var(--vttf-radius-md);
+  background: var(--vttf-surface-2);
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.{{ID}} .sh-id {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.{{ID}} .sh-id-top {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.{{ID}} .sh-name {
+  font-family: var(--vttf-font-display, var(--vttf-font-body));
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--vttf-text);
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid transparent;
+  padding: 0;
+}
+
+.{{ID}} .sh-name:focus {
+  border-bottom-color: var(--vttf-border-strong);
+  outline: none;
+}
+
+.{{ID}} .sh-sub {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--vttf-space-2);
+  font-family: var(--vttf-font-mono, monospace);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--vttf-text-muted);
+}
+
+.{{ID}} .sh-sub input {
+  width: 3.5rem;
+  text-align: center;
+  background: transparent;
+  border: 1px solid var(--vttf-border);
+  border-radius: var(--vttf-radius-sm);
+  color: var(--vttf-text);
+  font: inherit;
+  padding: 2px 6px;
+}
+
+.{{ID}} .sh-quick {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--vttf-space-3);
+}
+
+.{{ID}} .sh-quick .q {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.{{ID}} .sh-quick .qv {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  font-family: var(--vttf-font-display, var(--vttf-font-body));
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--vttf-ember-glow);
+}
+
+.{{ID}} .sh-quick .qv input {
+  width: 2.5rem;
+  font: inherit;
+  color: inherit;
+  text-align: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.{{ID}} .sh-quick .qv-sep {
+  font-size: 14px;
+  color: var(--vttf-text-faint);
+}
+
+.{{ID}} .sh-quick .qv-max {
+  font-size: 14px;
+  color: var(--vttf-text-muted);
+}
+
+.{{ID}} .sh-quick .qk {
+  font-family: var(--vttf-font-mono, monospace);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--vttf-text-faint);
+}
+
+/* ════════ TABS (.sh-tabs) ════════ */
+.{{ID}} .sh-tabs {
+  display: flex;
+  gap: 0;
+  padding: 0 var(--vttf-space-4);
+  background: var(--vttf-bg-elevated);
+  border-bottom: 1px solid var(--vttf-border);
+}
+
+.{{ID}} .sh-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 14px;
+  cursor: pointer;
+  color: var(--vttf-text-muted);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  font-family: var(--vttf-font-body);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.{{ID}} .sh-tab:hover {
+  color: var(--vttf-text);
+}
+
+.{{ID}} .sh-tab.on,
+.{{ID}} .sh-tab.active {
+  color: var(--vttf-text);
+  border-bottom-color: var(--vttf-ember);
+}
+
+/* ════════ BODY (.sh-body) ════════ */
+.{{ID}} .sh-body {
+  flex: 1;
+  overflow: auto;
+  padding: var(--vttf-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--vttf-space-4);
+  min-height: 320px;
+}
+
+.{{ID}} .sh-body .tab {
+  display: none;
+  flex-direction: column;
+  gap: var(--vttf-space-3);
+}
+
+.{{ID}} .sh-body .tab.active {
+  display: flex;
+}
+
+.{{ID}} .sh-section-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--vttf-space-3);
+  font-family: var(--vttf-font-mono, monospace);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--vttf-text-faint);
+  font-weight: 600;
+  margin: 0;
+}
+
+.{{ID}} .sh-section-title::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--vttf-border);
+}
+
+.{{ID}} .sh-section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--vttf-space-3);
+}
+
+.{{ID}} .sh-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: var(--vttf-radius-sm);
+  background: var(--vttf-surface);
+  border: 1px solid var(--vttf-border-strong);
+  color: var(--vttf-text);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.{{ID}} .sh-action:hover {
+  background: var(--vttf-surface-2);
+}
+
+.{{ID}} .sh-action i {
+  color: var(--vttf-ember);
+}
+
+/* ─── Abilities ─── */
+.{{ID}} .sh-abilities {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: var(--vttf-space-2);
+}
+
+.{{ID}} .sh-abil {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 8px;
+  background: var(--vttf-surface);
+  border: 1px solid var(--vttf-border);
+  border-radius: var(--vttf-radius-md);
+}
+
+.{{ID}} .sh-abil .lbl {
+  font-family: var(--vttf-font-mono, monospace);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--vttf-text-faint);
+  font-weight: 600;
+}
+
+.{{ID}} .sh-abil .val {
+  width: 100%;
+  text-align: center;
+  background: transparent;
+  border: none;
+  color: var(--vttf-text);
+  font-family: var(--vttf-font-display, var(--vttf-font-body));
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 0;
+}
+
+.{{ID}} .sh-abil .val:focus {
+  outline: 1px solid var(--vttf-ember);
+  border-radius: var(--vttf-radius-sm);
+}
+
+.{{ID}} .sh-abil .mod {
+  background: transparent;
+  border: none;
+  color: var(--vttf-ember-glow);
+  font-family: var(--vttf-font-body);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: var(--vttf-radius-full);
+}
+
+.{{ID}} .sh-abil .mod:hover {
+  background: color-mix(in oklch, var(--vttf-ember) 12%, transparent);
+}
+
+/* ─── Items ─── */
+.{{ID}} .sh-items {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.{{ID}} .sh-item {
+  display: grid;
+  grid-template-columns: 32px 1fr auto auto auto;
+  gap: var(--vttf-space-3);
+  align-items: center;
+  padding: 8px 10px;
+  background: var(--vttf-surface);
+  border: 1px solid var(--vttf-border);
+  border-radius: var(--vttf-radius-sm);
+  cursor: grab;
+}
+
+.{{ID}} .sh-item:active {
+  cursor: grabbing;
+}
+
+.{{ID}} .sh-item-ico {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--vttf-surface-2);
+  border: 1px solid var(--vttf-border);
+  border-radius: var(--vttf-radius-sm);
+  color: var(--vttf-text-muted);
+  font-size: 16px;
+  overflow: hidden;
+}
+
+.{{ID}} .sh-item-ico img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.{{ID}} .sh-item-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vttf-text);
+}
+
+.{{ID}} .sh-item-meta {
+  font-family: var(--vttf-font-mono, monospace);
+  font-size: 11px;
+  color: var(--vttf-text-faint);
+}
+
+.{{ID}} .sh-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  font-family: var(--vttf-font-mono, monospace);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-weight: 600;
+  border-radius: var(--vttf-radius-full);
+  background: color-mix(in oklch, var(--vttf-ember) 10%, transparent);
+  color: var(--vttf-ember);
+  border: 1px solid color-mix(in oklch, var(--vttf-ember) 40%, transparent);
+}
+
+.{{ID}} .sh-tag.muted {
+  background: var(--vttf-bg-sunken);
+  color: var(--vttf-text-muted);
+  border-color: var(--vttf-border);
+}
+
+.{{ID}} .sh-qty {
+  font-family: var(--vttf-font-mono, monospace);
+  font-size: 12px;
+  color: var(--vttf-text-muted);
+}
+
+.{{ID}} .sh-item-delete {
+  background: transparent;
+  border: none;
+  color: var(--vttf-text-faint);
+  cursor: pointer;
+  padding: 4px 6px;
+}
+
+.{{ID}} .sh-item-delete:hover {
+  color: var(--vttf-rose);
+}
+
+.{{ID}} .sh-items-empty {
+  text-align: center;
+  padding: var(--vttf-space-4);
+  color: var(--vttf-text-faint);
+  font-style: italic;
+}
+
+/* ─── Drop affordance ─── */
+.{{ID}} .sh-drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 20px;
+  border: 1.5px dashed var(--vttf-border-strong);
+  border-radius: var(--vttf-radius-md);
+  background: color-mix(in oklch, var(--vttf-ember) 6%, transparent);
+  text-align: center;
+}
+
+.{{ID}} .sh-drop .lbl {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vttf-text);
+}
+
+.{{ID}} .sh-drop .sub {
+  font-family: var(--vttf-font-mono, monospace);
+  font-size: 11px;
+  color: var(--vttf-text-faint);
+}
+
+/* ─── Empty placeholder (Spells tab) ─── */
+.{{ID}} .sh-empty {
+  padding: var(--vttf-space-6);
+  text-align: center;
+  color: var(--vttf-text-faint);
+  font-style: italic;
+}
+
+/* ─── Biography (readonly fallback) ─── */
+.{{ID}} .sh-biography-readonly {
+  padding: var(--vttf-space-4);
+  background: var(--vttf-bg-sunken);
+  border: 1px solid var(--vttf-border);
+  border-radius: var(--vttf-radius-md);
+  color: var(--vttf-text-muted);
+  line-height: 1.6;
+}
+
+/* ════════ FOOT (.sh-foot) ════════ */
+.{{ID}} .sh-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--vttf-space-4);
+  padding: 12px var(--vttf-space-4);
+  background: var(--vttf-surface);
+  border-top: 1px solid var(--vttf-border);
+  font-family: var(--vttf-font-mono, monospace);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--vttf-text-faint);
+}
+
+.{{ID}} .sh-foot .nm {
+  color: var(--vttf-ember);
+  font-weight: 600;
+}
+
+/* ════════ Gear sheet (unchanged structurally) ════════ */
+.{{ID}}.item .field {
+  display: grid;
+  grid-template-columns: 8rem 1fr;
+  gap: var(--vttf-space-3);
+  align-items: center;
+  padding: 0.35rem 0;
+}

package/templates/system-ts/system.json

@@ -0,0 +1,44 @@
+{
+  "id": "{{ID}}",
+  "title": "{{TITLE}}",
+  "description": "{{DESCRIPTION}}",
+  "version": "0.1.0",
+  "compatibility": {
+    "minimum": "{{FOUNDRY_MIN_VERSION}}",
+    "verified": "{{FOUNDRY_VERIFIED_VERSION}}"
+  },
+  "authors": [{ "name": "{{AUTHOR}}" }],
+  "esmodules": ["main.mjs"],
+  "styles": [{ "src": "styles/main.css" }],
+  "languages": [{ "lang": "en", "name": "English", "path": "lang/en.json" }],
+  "documentTypes": {
+    "Actor": {
+      "character": {
+        "htmlFields": ["biography"]
+      }
+    },
+    "Item": {
+      "gear": {
+        "htmlFields": ["description"]
+      }
+    }
+  },
+  "grid": {
+    "type": 1,
+    "distance": 5,
+    "units": "ft",
+    "diagonals": 0
+  },
+  "primaryTokenAttribute": "health",
+  "secondaryTokenAttribute": "power",
+  "flags": {
+    "hotReload": {
+      "extensions": ["css", "hbs", "json"],
+      "paths": ["styles", "templates", "lang"]
+    },
+    "{{ID}}": {
+      "needsMigrationVersion": "0.1.0",
+      "compatibleMigrationVersion": "0.0.0"
+    }
+  }
+}

package/templates/system-ts/template.json

@@ -0,0 +1,8 @@
+{
+  "Actor": {
+    "types": ["character"]
+  },
+  "Item": {
+    "types": ["gear"]
+  }
+}

package/templates/system-ts/templates/actor/character-sheet.hbs

@@ -0,0 +1,168 @@
+{{!--
+  Character sheet — markup mirrors the canonical Figma reference
+  (character-sheet.jsx + Theme Explorations .sh-* classes).
+
+  Tabs nav uses `data-tab`/`data-group` + `data-action="vttforgeTab"` so
+  BaseActorSheet's default tab action routes clicks. `context.tabs.primary`
+  is auto-populated by BaseActorSheet's _prepareContext.
+
+  `<img data-edit="img">` is handled by DocumentSheetV2's built-in editImage
+  action. `<prose-mirror>` is the v13 rich text element for biography.
+--}}
+<form autocomplete="off">
+
+  {{!-- ════════ HEAD (.sh-head) ════════ --}}
+  <div class="sh-head">
+    <img class="sh-portrait" src="{{actor.img}}" alt="{{actor.name}}" data-edit="img" />
+    <div class="sh-id">
+      <div class="sh-id-top">
+        <input class="sh-name" type="text" name="name" value="{{actor.name}}"
+               placeholder="{{localize '{{LOCALE_PREFIX}}.Sheet.NamePlaceholder'}}" />
+        <div class="sh-sub">
+          <span>{{localize "{{LOCALE_PREFIX}}.Sheet.Level"}}</span>
+          <input type="number" name="system.level" value="{{system.level}}" min="1" max="20" />
+        </div>
+      </div>
+      <div class="sh-quick">
+        <div class="q">
+          <div class="qv">
+            <input type="number" name="system.health.value" value="{{system.health.value}}" min="0" />
+            <span class="qv-sep">/</span>
+            <span class="qv-max">{{system.health.max}}</span>
+          </div>
+          <div class="qk">{{localize "{{LOCALE_PREFIX}}.Sheet.Quick.HP"}}</div>
+        </div>
+        <div class="q">
+          <div class="qv">{{system.armorClass}}</div>
+          <div class="qk">{{localize "{{LOCALE_PREFIX}}.Sheet.Quick.AC"}}</div>
+        </div>
+        <div class="q">
+          <div class="qv">
+            <input type="number" name="system.speed" value="{{system.speed}}" min="0" />
+          </div>
+          <div class="qk">{{localize "{{LOCALE_PREFIX}}.Sheet.Quick.SPD"}}</div>
+        </div>
+        <div class="q">
+          <div class="qv">{{numberFormat system.initiative sign=true}}</div>
+          <div class="qk">{{localize "{{LOCALE_PREFIX}}.Sheet.Quick.INIT"}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {{!-- ════════ TABS (.sh-tabs) ════════ --}}
+  <nav class="sh-tabs" data-group="primary">
+    {{#each tabs as |tab|}}
+      <button type="button" class="sh-tab {{#if tab.active}}on{{/if}}"
+              data-tab="{{tab.id}}"
+              data-group="primary"
+              data-action="vttforgeTab"
+              title="{{localize tab.label}}">
+        {{#if tab.icon}}<i class="{{tab.icon}}"></i>{{/if}}
+        <span>{{localize tab.label}}</span>
+      </button>
+    {{/each}}
+  </nav>
+
+  {{!-- ════════ BODY (.sh-body) ════════ --}}
+  <section class="sh-body">
+
+    {{!-- ABILITIES --}}
+    <section class="tab abilities {{tabs.abilities.cssClass}}"
+             data-tab="abilities" data-group="primary">
+      <h3 class="sh-section-title">{{localize "{{LOCALE_PREFIX}}.Sheet.AbilityScores"}}</h3>
+      <div class="sh-abilities">
+        {{#each abilities as |ability|}}
+          <div class="sh-abil">
+            <div class="lbl" title="{{ability.label}}">{{ability.key}}</div>
+            <input class="val" type="number"
+                   name="system.abilities.{{ability.key}}"
+                   value="{{ability.value}}" min="1" max="30" />
+            <button type="button" class="mod sh-abil-roll"
+                    data-action="rollAbility" data-ability="{{ability.key}}"
+                    title="{{localize '{{LOCALE_PREFIX}}.Sheet.Roll.label'}}">
+              {{numberFormat ability.mod sign=true}}
+            </button>
+          </div>
+        {{/each}}
+      </div>
+    </section>
+
+    {{!-- INVENTORY --}}
+    <section class="tab inventory {{tabs.inventory.cssClass}}"
+             data-tab="inventory" data-group="primary">
+      <header class="sh-section-head">
+        <h3 class="sh-section-title">{{localize "{{LOCALE_PREFIX}}.Sheet.Inventory"}}</h3>
+        <button type="button" class="sh-action" data-action="createGear"
+                title="{{localize '{{LOCALE_PREFIX}}.Sheet.NewGear'}}">
+          <i class="fa-solid fa-plus"></i>
+          <span>{{localize "{{LOCALE_PREFIX}}.Sheet.NewGear"}}</span>
+        </button>
+      </header>
+      <div class="sh-items">
+        {{#each gear as |item|}}
+          <div class="sh-item" data-item-id="{{item.id}}" draggable="true">
+            <div class="sh-item-ico">
+              {{#if item.img}}
+                <img src="{{item.img}}" alt="{{item.name}}" />
+              {{else}}
+                <i class="fa-solid fa-box"></i>
+              {{/if}}
+            </div>
+            <div>
+              <div class="sh-item-name">{{item.name}}</div>
+              <div class="sh-item-meta">{{numberFormat item.weight}} lb</div>
+            </div>
+            <span class="sh-tag {{#if (eq item.kind "stowed")}}muted{{/if}}">
+              {{localize (concat "{{LOCALE_PREFIX}}.Gear.Kind." item.kind)}}
+            </span>
+            <span class="sh-qty">×{{item.quantity}}</span>
+            <button type="button" class="sh-item-delete" data-action="deleteItem"
+                    title="{{localize '{{LOCALE_PREFIX}}.Sheet.Delete'}}">
+              <i class="fa-solid fa-trash"></i>
+            </button>
+          </div>
+        {{else}}
+          <div class="sh-items-empty">{{localize "{{LOCALE_PREFIX}}.Sheet.NoGear"}}</div>
+        {{/each}}
+      </div>
+
+      <div class="sh-drop">
+        <div class="lbl">{{localize "{{LOCALE_PREFIX}}.Sheet.Drop.label"}}</div>
+        <div class="sub">onDropItem(item, event)</div>
+      </div>
+    </section>
+
+    {{!-- SPELLS (placeholder) --}}
+    <section class="tab spells {{tabs.spells.cssClass}}"
+             data-tab="spells" data-group="primary">
+      <h3 class="sh-section-title">{{localize "{{LOCALE_PREFIX}}.Sheet.Spells"}}</h3>
+      <div class="sh-empty">{{localize "{{LOCALE_PREFIX}}.Sheet.SpellsEmpty"}}</div>
+    </section>
+
+    {{!-- BIOGRAPHY --}}
+    <section class="tab biography {{tabs.biography.cssClass}}"
+             data-tab="biography" data-group="primary">
+      <h3 class="sh-section-title">{{localize "{{LOCALE_PREFIX}}.Sheet.Biography"}}</h3>
+      {{#if isEditable}}
+        <prose-mirror name="system.biography"
+                      button="true"
+                      editable="{{isEditable}}"
+                      toggled="false"
+                      value="{{system.biography}}">
+          {{{enrichedBiography}}}
+        </prose-mirror>
+      {{else}}
+        <div class="sh-biography-readonly">{{{enrichedBiography}}}</div>
+      {{/if}}
+    </section>
+
+  </section>
+
+  {{!-- ════════ FOOT (.sh-foot) ════════ --}}
+  <footer class="sh-foot">
+    <span class="nm">VTTFORGE · FORGE</span>
+    <span>@vttforge/styles · v0.2</span>
+  </footer>
+
+</form>