@ntmats/hc-ui 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -953,9 +953,18 @@ export interface CombatDialViewProps {
     /**
      * `comfortable` (default): 40px cells. `compact`: 34px cells, 6px gaps, 13px numbers and
      * tighter point chips, for dense lists (HCUI's compact dial of the unit view on phones).
+     * `dense`: 25px cells and rows, 3px between rows, 11–12px numbers, the compact header,
+     * for a dial next to other content (the Arena's table card).
      * The printed presentation keeps its own measures.
      */
-    density?: 'comfortable' | 'compact';
+    density?: 'comfortable' | 'compact' | 'dense';
+    /**
+     * How the current click is marked. `bar` (default): a muted column with a thin accent
+     * bar on top. `framed`: the column is framed in light gray behind the cells and the click
+     * number becomes a filled circle in the text color, easier to find mid-game; the power
+     * colors stay intact. Ignored by the printed presentation.
+     */
+    currentMark?: 'bar' | 'framed';
     /** Without it the dial is static: it neither marks nor changes the click; only cells with a tip react. */
     onClickChange?: (click: number) => void;
     onSelectPoint: (point: CombatDialPoint) => void;

package/dist/index.js

@@ -1574,6 +1574,7 @@ var CombatDialView = forwardRef(function CombatDialView2({
   labels,
   presentation = "default",
   density = "comfortable",
+  currentMark = "bar",
   onClickChange,
   onSelectPoint,
   tip,
@@ -1677,7 +1678,7 @@ var CombatDialView = forwardRef(function CombatDialView2({
       COMBAT_DIAL_STATS.map((stat) => /* @__PURE__ */ jsx("div", { className: "hc-ui-combat-dial__cell", "data-kind": "ko", children: labels.koCell }, stat))
     ] })
   ] }, rowIndex);
-  return /* @__PURE__ */ jsxs("section", { ref, className: "hc-ui-combat-dial", "data-presentation": presentation, "data-density": density === "compact" ? "compact" : void 0, "data-static": flag(!tracksClick), children: [
+  return /* @__PURE__ */ jsxs("section", { ref, className: "hc-ui-combat-dial", "data-presentation": presentation, "data-density": density === "comfortable" ? void 0 : density, "data-current-mark": currentMark === "framed" ? "framed" : void 0, "data-static": flag(!tracksClick), children: [
     presentation !== "printed" && /* @__PURE__ */ jsxs("header", { className: "hc-ui-combat-dial__header", children: [
       /* @__PURE__ */ jsxs("div", { className: "hc-ui-combat-dial__header-top", children: [
         /* @__PURE__ */ jsx("span", { className: "hc-ui-combat-dial__label", children: labels.heading }),

package/dist/styles.css

@@ -1915,6 +1915,47 @@
 [data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) :is(.hc-ui-combat-dial__cell[data-kind='value'], .hc-ui-combat-dial__range) { font-size: var(--hc-font-size-sm); }
 [data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__special-icon { width: 18px; height: 18px; }
 
+/* `density="dense"`: the compact header (point chips) with 25px cells and rows, 3px between
+   rows and 6px between clicks, 11px click numbers and 12px values, 15px special icons:
+   a dial that sits beside other content (the Arena's table card). */
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__header { gap: 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__points { gap: var(--hc-space-1); padding: var(--hc-space-1) 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__chip { gap: var(--hc-space-2); padding: var(--hc-space-2); border-radius: var(--hc-radius-lg); }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__grid-wrap { padding: 5px 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__grid { gap: 6px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__col { grid-template-rows: repeat(5, 25px); gap: 3px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__col[data-start]::before { top: 28px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__cell { width: 25px; height: 25px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__cell[data-tip]::after { inset: -2px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__cell[data-kind='number'] { font-size: 11px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) :is(.hc-ui-combat-dial__cell:is([data-kind='value'], [data-kind='ko']), .hc-ui-combat-dial__range) { font-size: 12px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__special-icon { width: 15px; height: 15px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='dense']:not([data-presentation='printed']) .hc-ui-combat-dial__bolt { height: 11px; }
+
+/* `currentMark="framed"`: the current click's column is framed in light gray behind its
+   cells (a little larger than them) and its number becomes a filled circle in the text
+   color. Shape and contrast mark it without relying on color; the power colors stay. */
+[data-hc-ds] .hc-ui-combat-dial[data-current-mark='framed']:not([data-presentation='printed']) .hc-ui-combat-dial__col[data-current] {
+  isolation: isolate;
+  background: none;
+  box-shadow: none;
+}
+[data-hc-ds] .hc-ui-combat-dial[data-current-mark='framed']:not([data-presentation='printed']) .hc-ui-combat-dial__col[data-current]::after {
+  content: '';
+  position: absolute;
+  inset: -4px -3px;
+  z-index: -1;
+  border-radius: 8px;
+  background: var(--hc-color-bg-muted-2);
+  box-shadow: inset 0 0 0 1px var(--hc-color-border);
+}
+[data-hc-ds] .hc-ui-combat-dial[data-current-mark='framed']:not([data-presentation='printed']) .hc-ui-combat-dial__col[data-current] .hc-ui-combat-dial__cell[data-kind='number'] {
+  border-radius: 50%;
+  background: var(--hc-color-text-primary);
+  color: var(--hc-color-text-inverse);
+  font-weight: 800;
+}
+
 /* `presentation="printed"`: the physical card's dial, at HCUnits' measures (20px
    cells, 23px between clicks, 24px between rows); the white legend sits on the
    card's dark window. Its numbers use the `font` shorthand, with ROND right after it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntmats/hc-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "Shared HCUI/Arena React presentation primitives.",
   "license": "UNLICENSED",