@ntmats/hc-ui 0.7.0 → 0.9.0

package/dist/index.d.ts

@@ -310,6 +310,7 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'ti
  */
 export declare const Dialog: ForwardRefExoticComponent<DialogProps & RefAttributes<HTMLDialogElement>>;
 export type SheetPresentation = 'bottom' | 'center' | 'auto';
+export type SheetHeight = 'content' | 'half';
 interface SheetBaseProps extends Omit<DialogProps, 'size' | 'actions' | 'description' | 'closeLabel' | 'title'> {
     /** Slot under the scrolling body, for the buttons (Clear | Done). */
     footer?: ReactNode;
@@ -321,6 +322,13 @@ interface SheetBaseProps extends Omit<DialogProps, 'size' | 'actions' | 'descrip
     presentation?: SheetPresentation;
     /** Maximum width of the centered panel, in px. Default 440. */
     width?: number;
+    /**
+     * Resting height at the bottom. `content` (default) grows with the content up to almost the
+     * whole screen. `half` rests at half the screen, so what is behind stays in sight (dimmed),
+     * and the content scrolls inside; a drag up from the grabber or header still goes to full
+     * height, and a drag down from there comes back to half. No effect on the centered panel.
+     */
+    height?: SheetHeight;
 }
 /**
  * `Sheet` props. By default the sheet has a header with the title (its accessible name) and a
@@ -346,7 +354,8 @@ export type SheetProps = SheetBaseProps & ({
  * Tab trap, Esc, focus return, scroll lock, stacking and controlled `open`/`onClose`.
  * At the bottom it has a grabber, drag to close (past 20% of its height or a quick
  * flick) and drag up from the grabber or header to full height; content that has
- * scrolled down scrolls back before the sheet moves.
+ * scrolled down scrolls back before the sheet moves. `height="half"` rests at half the
+ * screen instead of growing with the content.
  */
 export declare const Sheet: ForwardRefExoticComponent<SheetProps & RefAttributes<HTMLDialogElement>>;
 export interface SheetOption<T extends string> {
@@ -944,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

@@ -602,7 +602,7 @@ function useSheetDrag(sheet, latest) {
     };
   }, [sheet, latest]);
 }
-var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, footer, dismissible = true, header = true, onClose, className, style, ...props }, ref) {
+var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, height = "content", footer, dismissible = true, header = true, onClose, className, style, ...props }, ref) {
   const [node, setNode] = useState(null);
   const setRef = useCallback((element) => {
     setNode(element);
@@ -626,7 +626,8 @@ var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, foo
       headerless: !header,
       className: classes("hc-ui-sheet", className),
       style: sized,
-      "data-presentation": presentation
+      "data-presentation": presentation,
+      "data-height": height === "half" ? "half" : void 0
     }
   );
 });
@@ -1573,6 +1574,7 @@ var CombatDialView = forwardRef(function CombatDialView2({
   labels,
   presentation = "default",
   density = "comfortable",
+  currentMark = "bar",
   onClickChange,
   onSelectPoint,
   tip,
@@ -1676,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

@@ -854,6 +854,11 @@
   border-radius: 20px 20px 0 0;
 }
 [data-hc-ds] .hc-ui-sheet[data-presentation='bottom'][data-closing] { animation: hc-ui-sheet-down var(--hc-dur-medium) var(--hc-ease-emphasized-accel) forwards; }
+/* height="half": rests at half the screen; the body scrolls. Expanded still wins (full height). */
+[data-hc-ds] .hc-ui-sheet[data-presentation='bottom'][data-height='half']:not([data-expanded]) {
+  height: 50dvh;
+  max-height: 50dvh;
+}
 
 @media (max-width: 959.98px) {
   [data-hc-ds] .hc-ui-sheet[data-presentation='auto'] {
@@ -888,6 +893,10 @@
     border-radius: 20px 20px 0 0;
   }
   [data-hc-ds] .hc-ui-sheet[data-presentation='auto'][data-closing] { animation: hc-ui-sheet-down var(--hc-dur-medium) var(--hc-ease-emphasized-accel) forwards; }
+  [data-hc-ds] .hc-ui-sheet[data-presentation='auto'][data-height='half']:not([data-expanded]) {
+    height: 50dvh;
+    max-height: 50dvh;
+  }
 }
 
 /* Closing by drag: the backdrop fades with the sheet instead of waiting for the exit. */
@@ -1906,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.7.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "Shared HCUI/Arena React presentation primitives.",
   "license": "UNLICENSED",