@zkmake/three-textures 0.1.0

package/dist/ui.d.ts

@@ -0,0 +1,28 @@
+import { o as TextureLab } from "./lab-CN1v1x-y.js";
+import { n as TexturePanelHandle, r as mountTexturePanel, t as MountTexturePanelOptions } from "./mount-Bk5wVa_1.js";
+//#region src/ui/panel.d.ts
+type PanelEdge = "left" | "right" | "top" | "bottom";
+type TexturePanel = {
+  element: HTMLElement;
+  /** Paint the preview, and the panel when it's not in a dev-panel card, `dark` or `light`. Default dark. */
+  setTheme(theme: "dark" | "light"): void;
+  /** Which screen edge the panel sits on: the preview opens on the other side. */
+  setEdge(edge: PanelEdge): void;
+  /** Re-read the scene now (the panel also does every couple of seconds while shown). */
+  refresh(): void;
+  /** Pause or resume the periodic re-read, e.g. while a host tab is hidden. */
+  setActive(active: boolean): void;
+  dispose(): void;
+};
+export declare const createTexturePanel: (lab: TextureLab, { canLink }?: {
+  canLink?: boolean | undefined;
+}) => TexturePanel;
+//#endregion
+//#region src/ui/styles.d.ts
+/** The panel's stylesheet, injected once. Palettes by `data-theme` on `.ttx`. */
+export declare const TEXTURE_PANEL_STYLES = "\n/* Inside a dev-panel card the tokens come from three-meter's (`--perf-*`), so the panels match;\n   on its own (in a host's tab) the same palette is the fallback. */\n.ttx {\n  --ttx-bg: var(--perf-bg, rgba(22, 24, 29, 0.92));\n  --ttx-fg: var(--perf-fg, #e6e8eb);\n  --ttx-dim: var(--perf-muted, #8b909a);\n  --ttx-line: var(--perf-border, rgba(255, 255, 255, 0.12));\n  --ttx-field: var(--perf-row, rgba(255, 255, 255, 0.04));\n  --ttx-hover: var(--perf-row, rgba(255, 255, 255, 0.04));\n  --ttx-accent: var(--perf-accent, #60a5fa);\n  --ttx-warn: var(--perf-warn, #f59e0b);\n  --ttx-shadow: var(--perf-shadow, 0 8px 24px rgba(0, 0, 0, 0.32));\n  --ttx-live: #34d399;\n  --ttx-checker: rgba(255, 255, 255, 0.08);\n  box-sizing: border-box;\n  color: var(--ttx-fg);\n  font: 11px/1.35 ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n}\n.ttx[data-theme=\"light\"] {\n  --ttx-bg: rgba(250, 250, 252, 0.94);\n  --ttx-fg: #1a1c21;\n  --ttx-dim: #6b7079;\n  --ttx-line: rgba(0, 0, 0, 0.12);\n  --ttx-field: rgba(0, 0, 0, 0.05);\n  --ttx-hover: rgba(0, 0, 0, 0.05);\n  --ttx-accent: #2563eb;\n  --ttx-warn: #b45309;\n  --ttx-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);\n  --ttx-live: #047857;\n  --ttx-checker: rgba(0, 0, 0, 0.07);\n}\n.ttx *, .ttx *::before, .ttx *::after { box-sizing: inherit; }\n.ttx button { font: inherit; color: inherit; }\n\n.ttx-panel { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 8px; }\n/* In the dev-panel card: a fixed width (the frame's cap raised to fit), the list scrolling\n   inside the card's height. */\n.perf-hud.ttx-frame { max-width: min(23rem, calc(100vw - 48px)); }\n.perf-hud__card > .ttx-panel { width: 22rem; max-width: 100%; flex: 1; }\n/* Compact: the brand row alone, with the count. */\n.perf-hud.ttx-compact .ttx-panel { display: none; }\n.perf-hud.ttx-compact .perf-hud__brand { padding-bottom: 6px; }\n.ttx-toolbar { display: flex; gap: 6px; }\n.ttx-search {\n  flex: 1;\n  min-width: 0;\n  border: 1px solid var(--ttx-line);\n  border-radius: 4px;\n  background: var(--ttx-field);\n  padding: 4px 6px;\n  color: inherit;\n  font: inherit;\n}\n.ttx-search::placeholder { color: var(--ttx-dim); }\n.ttx-search:focus { outline: 1px solid var(--ttx-accent); outline-offset: 0; }\n\n.ttx-icon {\n  display: inline-grid;\n  place-items: center;\n  width: 22px;\n  height: 22px;\n  flex: none;\n  padding: 0;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--ttx-dim);\n  cursor: pointer;\n}\n.ttx-icon:hover:not(:disabled) { background: var(--ttx-hover); color: var(--ttx-fg); }\n.ttx-icon:focus-visible { outline: 1px solid var(--ttx-accent); }\n.ttx-icon:disabled { opacity: 0.3; cursor: default; }\n.ttx-icon svg { width: 12px; height: 12px; }\n.ttx-icon.is-on { color: var(--ttx-accent); background: var(--ttx-accent-soft); }\n.ttx-icon.is-live { color: var(--ttx-live); }\n.ttx-icon.is-paused { color: var(--ttx-warn); }\n.ttx-text-button {\n  border: 1px solid var(--ttx-line);\n  border-radius: 4px;\n  background: var(--ttx-field);\n  padding: 3px 8px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.ttx-text-button:hover:not(:disabled) { border-color: var(--ttx-accent); }\n.ttx-text-button:disabled { opacity: 0.4; cursor: default; }\n\n.ttx-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; min-height: 0; }\n.ttx-row {\n  display: grid;\n  grid-template-columns: 40px 1fr auto;\n  align-items: center;\n  gap: 8px;\n  padding: 4px;\n  border-radius: 5px;\n  border: 1px solid transparent;\n}\n.ttx-row:hover { background: var(--ttx-hover); }\n.ttx-row.is-drop { border-color: var(--ttx-accent); background: var(--ttx-accent-soft); }\n.ttx-row.is-hidden { display: none; }\n.ttx-row.is-unsupported { opacity: 0.5; }\n.ttx-thumb {\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  border: 1px solid var(--ttx-line);\n  border-radius: 4px;\n  background: repeating-conic-gradient(var(--ttx-checker) 0 25%, transparent 0 50%) 0 0 / 8px 8px;\n  cursor: zoom-in;\n  overflow: hidden;\n}\n.ttx-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }\n.ttx-row.is-swapped .ttx-thumb { border-color: var(--ttx-accent); }\n.ttx-row.is-showing-original .ttx-thumb { border-color: var(--ttx-warn); }\n.ttx-text { min-width: 0; }\n.ttx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }\n.ttx-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ttx-dim); }\n.ttx-swap-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ttx-accent); }\n.ttx-row.is-showing-original .ttx-swap-name { color: var(--ttx-warn); }\n.ttx-swap-name[hidden] { display: none; }\n.ttx-actions { display: flex; gap: 1px; }\n.ttx-empty, .ttx-status { color: var(--ttx-dim); padding: 6px 4px; }\n.ttx-status.is-error { color: var(--ttx-warn); }\n.ttx-status:empty { display: none; }\n\n.ttx-preview {\n  position: fixed;\n  z-index: 2147483001;\n  top: 50%;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-width: min(46vw, 560px);\n  padding: 8px;\n  border: 1px solid var(--ttx-line);\n  border-radius: 8px;\n  background: var(--ttx-bg);\n  box-shadow: var(--ttx-shadow);\n  transform: translateY(-50%);\n}\n.ttx-preview[hidden] { display: none; }\n.ttx-preview[data-side=\"left\"] { left: 16px; }\n.ttx-preview[data-side=\"right\"] { right: 16px; }\n.ttx-preview img {\n  display: block;\n  max-width: 100%;\n  max-height: 70vh;\n  image-rendering: pixelated;\n  background: repeating-conic-gradient(var(--ttx-checker) 0 25%, transparent 0 50%) 0 0 / 16px 16px;\n}\n.ttx-preview-label { color: var(--ttx-dim); }\n";
+/** Add the stylesheet to `document.head` once. */
+export declare const injectStyles: () => void;
+//#endregion
+export { type MountTexturePanelOptions, type PanelEdge, type TexturePanel, type TexturePanelHandle, mountTexturePanel };
+//# sourceMappingURL=ui.d.ts.map

package/dist/ui.js

@@ -0,0 +1,2 @@
+import { i as injectStyles, n as createTexturePanel, r as TEXTURE_PANEL_STYLES, t as mountTexturePanel } from "./mount-D6SH40yP.js";
+export { TEXTURE_PANEL_STYLES, createTexturePanel, injectStyles, mountTexturePanel };

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@zkmake/three-textures",
+  "version": "0.1.0",
+  "description": "A dev panel for the textures in a three.js scene: see them, download them, paint them, swap them back in live — compressed (KTX2) textures included. Vanilla three and React Three Fiber.",
+  "keywords": [
+    "devtools",
+    "ktx2",
+    "r3f",
+    "react-three-fiber",
+    "texture",
+    "textures",
+    "three",
+    "threejs"
+  ],
+  "homepage": "https://github.com/zkmake/three-kit/tree/main/packages/three-textures#readme",
+  "bugs": "https://github.com/zkmake/three-kit/issues",
+  "license": "MIT",
+  "author": "Zubin Khavarian",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zkmake/three-kit.git",
+    "directory": "packages/three-textures"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.js",
+    "./react": "./dist/react.js",
+    "./ui": "./dist/ui.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "ci:test": "vitest run",
+    "ci:typecheck": "tsc",
+    "pack:check": "npm pack --dry-run",
+    "test": "vitest watch",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@zkmake/three-meter": "^0.11.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/core": "catalog:",
+    "@react-three/fiber": "catalog:",
+    "@react-three/test-renderer": "catalog:",
+    "@types/react": "catalog:",
+    "@types/three": "catalog:",
+    "publint": "catalog:",
+    "react": "catalog:",
+    "three": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "peerDependencies": {
+    "@react-three/fiber": ">=8",
+    "react": ">=18",
+    "three": ">=0.170"
+  },
+  "peerDependenciesMeta": {
+    "@react-three/fiber": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=20.19"
+  }
+}