@orz/ui-hex 0.0.0-stage → 0.0.0

package/dist/types.js

@@ -0,0 +1,10 @@
+/** Equal field by field, so a field added later (an editing caret's nibble) counts too. */
+export function sameSelection(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    const keys = Object.keys(a);
+    return (keys.length === Object.keys(b).length && keys.every((k) => a[k] === b[k]));
+}
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAeA,2FAA2F;AAC3F,MAAM,UAAU,aAAa,CAC3B,CAAsB,EACtB,CAAsB;IAEtB,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACzB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QAAE,OAAO,KAAK,CAAC;IAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAA2B,CAAC;IACtD,OAAO,CACL,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAC1E,CAAC;AACJ,CAAC"}

package/dist/use-hex-document-state.d.ts

@@ -0,0 +1,10 @@
+import { type HexDocument } from "./document.ts";
+export interface HexDocumentState {
+    size: number;
+    dirty: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+}
+/** What a toolbar or a title shows about a document; a new object only after it changes. */
+export declare function useHexDocumentState(doc: HexDocument): HexDocumentState;
+//# sourceMappingURL=use-hex-document-state.d.ts.map

package/dist/use-hex-document-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hex-document-state.d.ts","sourceRoot":"","sources":["../src/use-hex-document-state.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAElE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,4FAA4F;AAC5F,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,WAAW,GAAG,gBAAgB,CAoBtE"}

package/dist/use-hex-document-state.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef, useSyncExternalStore } from "react";
+import { documentVersion } from "./document.js";
+/** What a toolbar or a title shows about a document; a new object only after it changes. */
+export function useHexDocumentState(doc) {
+    const cached = useRef(null);
+    const getSnapshot = useCallback(() => {
+        const version = documentVersion(doc);
+        const last = cached.current;
+        if (last?.doc === doc && last.version === version)
+            return last.state;
+        const state = {
+            size: doc.size,
+            dirty: doc.dirty,
+            canUndo: doc.canUndo,
+            canRedo: doc.canRedo,
+        };
+        cached.current = { doc, version, state };
+        return state;
+    }, [doc]);
+    return useSyncExternalStore(doc.subscribe, getSnapshot, getSnapshot);
+}
+//# sourceMappingURL=use-hex-document-state.js.map

package/dist/use-hex-document-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hex-document-state.js","sourceRoot":"","sources":["../src/use-hex-document-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,eAAe,EAAoB,MAAM,eAAe,CAAC;AASlE,4FAA4F;AAC5F,MAAM,UAAU,mBAAmB,CAAC,GAAgB;IAClD,MAAM,MAAM,GAAG,MAAM,CAIX,IAAI,CAAC,CAAC;IAChB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;QACrC,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC;QAC5B,IAAI,IAAI,EAAE,GAAG,KAAK,GAAG,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;QACrE,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,GAAG,CAAC,IAAI;YACd,KAAK,EAAE,GAAG,CAAC,KAAK;YAChB,OAAO,EAAE,GAAG,CAAC,OAAO;YACpB,OAAO,EAAE,GAAG,CAAC,OAAO;SACrB,CAAC;QACF,MAAM,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACzC,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACV,OAAO,oBAAoB,CAAC,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AACvE,CAAC"}

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@orz/ui-hex",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "description": "Virtualised hex viewer and data inspector over in-memory or paged byte sources",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/orzFly/ui.git",
+    "directory": "packages/ui-hex"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "@orz/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "lucide-react": "^1",
+    "radix-ui": "^1",
+    "react": "^19",
+    "react-dom": "^19",
+    "@orz/ui": "^0.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^22.20.5",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "happy-dom": "^21.0.3",
+    "lucide-react": "^1.31.0",
+    "radix-ui": "^1.6.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "sonner": "^2.0.8",
+    "vitest": "^5.0.5",
+    "@orz/ui": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
 }

package/styles.css

@@ -0,0 +1,456 @@
+/* Load after @orz/ui/styles.css. The --hex-* defaults are declared on the
+   components' own roots, so their var(--primary) and friends resolve
+   against whichever theme class sits above them; an override therefore has
+   to target .orz-hex or .orz-hex-inspector itself, not an ancestor. */
+
+.orz-hex,
+.orz-hex-inspector {
+  --hex-font: var(
+    --font-mono,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace
+  );
+  --hex-row-height: 1.375rem;
+  --hex-fill: color-mix(in oklch, var(--primary) 32%, var(--card));
+  --hex-edge: var(--primary);
+  --hex-twin-fill: color-mix(in oklch, var(--foreground) 6%, var(--card));
+  --hex-twin-edge: var(--muted-foreground);
+  --hex-hover: var(--accent);
+  --hex-label: var(--muted-foreground);
+  --hex-faded: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
+  --hex-modified: var(--destructive);
+  /* Not documented as tokens: cell geometry the panes and header share. */
+  --hex-cell-pad: 0.25rem;
+  --hex-group-gap: 0.6rem;
+  --hex-text-cell: 1.6ch;
+}
+
+.orz-hex {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
+  width: max-content;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius, 0.5rem);
+  background: var(--card);
+  color: var(--card-foreground);
+  font-family: var(--hex-font);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  line-height: var(--hex-row-height);
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: pan-x pan-y;
+}
+.orz-hex[data-fill] {
+  height: 100%;
+}
+/* As wide as the most columns need, so that a narrower width is the limit
+   the columns are fitted to. */
+.orz-hex[data-columns-auto] {
+  width: var(--hex-auto-width, max-content);
+}
+.orz-hex[data-resizable] {
+  min-width: 10rem;
+  min-height: 6rem;
+}
+.orz-hex[data-resizable="both"] {
+  resize: both;
+}
+.orz-hex[data-resizable="horizontal"] {
+  resize: horizontal;
+}
+.orz-hex[data-resizable="vertical"] {
+  resize: vertical;
+}
+.orz-hex:focus {
+  border-color: var(--ring);
+}
+
+.orz-hex-measure {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.orz-hex-probe {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  width: 0;
+  height: var(--hex-row-height);
+}
+
+.orz-hex-scroller {
+  position: relative;
+  overflow: auto;
+  overscroll-behavior: contain;
+  /* Firefox leaves a vertical scrollbar that appears after layout out of the
+     max-content width, so the rows overflow by its width; a reserved gutter
+     is counted up front. */
+  scrollbar-gutter: stable;
+  padding-inline: 0.625rem;
+}
+.orz-hex[data-fill] .orz-hex-scroller {
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+.orz-hex-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background: var(--card);
+  color: var(--hex-label);
+}
+
+.orz-hex-spacer {
+  position: relative;
+  width: max-content;
+  /* A selected cell's 1px contour may overhang the edge. */
+  overflow: clip;
+  overflow-clip-margin: 1px;
+}
+/* Pinned under the header while the spacer scrolls: the scroll position only
+   picks the top row, so the view moves by whole rows like the reference. */
+.orz-hex-layer {
+  position: sticky;
+}
+
+.orz-hex-row {
+  display: flex;
+  height: var(--hex-row-height);
+  white-space: pre;
+}
+
+.orz-hex-addr {
+  flex: none;
+  box-sizing: content-box;
+  min-width: 4ch;
+  padding-right: 0.75rem;
+  color: var(--hex-label);
+}
+
+.orz-hex-pane-gap {
+  flex: none;
+  width: 1rem;
+}
+
+.orz-hex-text-label {
+  flex: none;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding-left: 0.2ch;
+}
+/* Wraps the aria-hidden column labels without joining the header's flex row,
+   so the picker beside them stays reachable. */
+.orz-hex-header-labels {
+  display: contents;
+}
+
+/* The encoding picker's trigger, @orz/ui's FilterMenu behind it, sized to
+   the header row. Unlayered, so it wins over any layered utilities. */
+.orz-hex-encoding {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  white-space: nowrap;
+  max-width: 100%;
+  height: var(--hex-row-height);
+  gap: 0.25rem;
+  margin-left: -0.2ch;
+  padding: 0 0.25rem 0 0.2ch;
+  border: 1px solid transparent;
+  border-radius: calc(var(--radius, 0.5rem) - 0.25rem);
+  background: transparent;
+  box-shadow: none;
+  color: var(--hex-label);
+  font: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+.orz-hex-encoding:hover,
+.orz-hex-encoding[data-state="open"] {
+  background: var(--hex-hover);
+}
+.orz-hex-encoding:focus-visible {
+  border-color: var(--ring);
+  box-shadow: none;
+  outline: none;
+}
+.orz-hex-encoding-value {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.orz-hex-encoding svg {
+  flex-shrink: 0;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+/* The menu is portalled out of .orz-hex, and this sheet is plain CSS that
+   Tailwind never scans, so its rows are styled here rather than by utilities. */
+.orz-hex-encoding-menu {
+  width: 20rem;
+}
+.orz-hex-encoding-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.orz-hex-encoding-alias {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+
+/* Cells have no margins: the contour depends on neighbours touching. Each
+   state sets variables on the cell, and the content box reads them once. */
+.orz-hex-cell {
+  --cell-pad: var(--hex-cell-pad);
+  --cell-pad-end: var(--cell-pad);
+  --cell-fill: var(--hex-twin-fill);
+  --cell-edge: var(--hex-twin-edge);
+  position: relative;
+  display: block;
+  flex: none;
+  height: var(--hex-row-height);
+}
+.orz-hex-text-cell {
+  --cell-pad: 0;
+  width: var(--hex-text-cell);
+  text-align: center;
+}
+.orz-hex-cell[data-group-end] {
+  --cell-pad-end: var(--hex-group-gap);
+}
+.orz-hex:focus[data-active-pane="hex"] [data-pane="hex"],
+.orz-hex:focus[data-active-pane="text"] [data-pane="text"] {
+  --cell-fill: var(--hex-fill);
+  --cell-edge: var(--hex-edge);
+}
+
+/* One contour per range: an edge layer 1px larger behind every selected
+   cell, and fills above all of them that cover the inner edges. */
+.orz-hex-cell[data-sel] {
+  --cell-bg: var(--cell-fill);
+}
+.orz-hex-cell[data-sel]::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  z-index: 0;
+  background: var(--cell-edge);
+}
+.orz-hex:not([data-dragging]) [data-hover] {
+  --cell-bg: var(--hex-hover);
+}
+.orz-hex:not([data-dragging]) [data-hover][data-sel] {
+  --cell-bg: color-mix(in oklch, var(--cell-fill) 60%, var(--hex-hover));
+}
+.orz-hex:focus [data-caret] {
+  --cell-caret: inset 0 -2px 0 var(--cell-edge);
+}
+
+.orz-hex-cell-content {
+  position: relative;
+  z-index: 1;
+  display: block;
+  box-sizing: border-box;
+  height: 100%;
+  padding-inline: var(--cell-pad) var(--cell-pad-end);
+  background: var(--cell-bg, transparent);
+  box-shadow: var(--cell-caret, none);
+}
+
+/* Two stacked letters, drawn as text: no monospace webfont covers the
+   U+2400 control pictures, and a fallback glyph would break the grid. */
+.orz-hex-control {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  align-content: center;
+  padding-block: 0.15em;
+  font-size: 0.55em;
+  font-weight: 500;
+  line-height: 1;
+}
+.orz-hex-control b {
+  display: block;
+  padding-inline: 0.15em;
+  font-weight: inherit;
+  text-align: left;
+}
+.orz-hex-control b + b {
+  text-align: right;
+}
+
+/* Above every cell's fill, so a neighbour's selection or hover cannot cover
+   the part of the glyph over it; hit-testing still lands on the cells
+   beneath. */
+.orz-hex-glyph {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--hex-glyph-span) * 100%);
+  pointer-events: none;
+  white-space: pre;
+}
+.orz-hex-glyph > span {
+  transform: scaleX(var(--hex-glyph-squeeze, 1));
+}
+
+.orz-hex-cell[data-faded]:not([data-sel]):not([data-hover]),
+.orz-hex-cell[data-state="loading"] {
+  color: var(--hex-faded);
+}
+.orz-hex-cell[data-state="error"] {
+  color: var(--destructive);
+}
+
+/* HexEditor */
+
+/* Wins over the faded rule above: a typed 00 is an edit, not padding. */
+.orz-hex .orz-hex-cell[data-modified]:not([data-state]) {
+  color: var(--hex-modified);
+}
+
+/* In the hex pane the caret marks the digit the next keystroke writes. */
+.orz-hex:focus [data-pane="hex"][data-caret="0"],
+.orz-hex:focus [data-pane="hex"][data-caret="1"] {
+  --cell-caret: none;
+}
+.orz-hex-nibble {
+  display: inline-block;
+}
+.orz-hex:focus [data-caret="0"] .orz-hex-nibble:first-child,
+.orz-hex:focus [data-caret="1"] .orz-hex-nibble:last-child {
+  box-shadow: inset 0 -2px 0 var(--cell-edge);
+}
+
+/* Insert mode: a bar before the cell, where the next byte goes. Mid-byte,
+   the low digit is still overwritten, so it keeps the digit underline. */
+.orz-hex[data-mode="insert"]:focus [data-caret]:not([data-caret="1"]) {
+  --cell-caret: inset 2px 0 0 var(--cell-edge);
+}
+.orz-hex[data-mode="insert"]:focus [data-caret="0"] .orz-hex-nibble {
+  box-shadow: none;
+}
+
+/* Hex cells take their width from their digits, so a cell with none has to
+   reserve two, or a short last row pulls its text pane left. */
+.orz-hex-cell[data-append][data-pane="hex"] .orz-hex-cell-content,
+.orz-hex-cell[data-empty]:not(.orz-hex-text-cell) .orz-hex-cell-content {
+  width: calc(2ch + var(--cell-pad) + var(--cell-pad-end));
+}
+.orz-hex:focus [data-append][data-caret] {
+  --cell-caret: inset 0 -2px 0 var(--cell-edge);
+}
+
+.orz-hex-status-end {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.orz-hex-mode {
+  padding: 0 0.375rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius, 0.5rem) - 0.25rem);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 1rem;
+  cursor: pointer;
+}
+.orz-hex-mode[aria-pressed="true"] {
+  background: var(--background);
+  color: var(--foreground);
+}
+.orz-hex-mode:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.orz-hex-mode:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+
+.orz-hex-status {
+  display: flex;
+  flex: none;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.25rem 0.625rem;
+  border-top: 1px solid var(--border);
+  background: var(--muted);
+  color: var(--muted-foreground);
+  font-size: 0.6875rem;
+  line-height: 1.25rem;
+  white-space: nowrap;
+}
+/* Clear of the resize handle in the corner. */
+.orz-hex[data-resizable] .orz-hex-status {
+  padding-right: 1.25rem;
+}
+
+.orz-hex-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* HexInspector */
+
+.orz-hex-inspector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--foreground);
+}
+.orz-hex-inspector-heading {
+  margin: 0;
+  font-weight: 600;
+}
+.orz-hex-inspector-list {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  column-gap: 1rem;
+  row-gap: 0.125rem;
+  margin: 0;
+}
+.orz-hex-inspector-list dt {
+  color: var(--muted-foreground);
+}
+.orz-hex-inspector-list dd {
+  margin: 0;
+  font-family: var(--hex-font);
+  overflow-wrap: anywhere;
+}
+.orz-hex-inspector-list [data-dimmed] {
+  opacity: 0.45;
+}
+.orz-hex-inspector-endian {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}