diff --git a/package.json b/package.json index ff883d0..4ef4421 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@popperjs/core": "^2.11.8", "@types/chroma-js": "^3.1.1", "@types/node": "^24.0.6", + "@types/textfit": "^2.4.5", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", "builtin-modules": "3.3.0", @@ -46,6 +47,7 @@ "chart.js": "^4.5.0", "chroma-js": "^3.1.2", "esbuild-sass-plugin": "^3.3.1", + "textfit": "^2.4.0", "uuid": "^11.1.0", "yaml": "^2.8.0", "zod": "^3.25.67" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6e6d067..65fc1a6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: esbuild-sass-plugin: specifier: ^3.3.1 version: 3.3.1(esbuild@0.17.3)(sass-embedded@1.89.2) + textfit: + specifier: ^2.4.0 + version: 2.4.0 uuid: specifier: ^11.1.0 version: 11.1.0 @@ -42,6 +45,9 @@ importers: '@types/node': specifier: ^24.0.6 version: 24.0.6 + '@types/textfit': + specifier: ^2.4.5 + version: 2.4.5 '@typescript-eslint/eslint-plugin': specifier: 5.29.0 version: 5.29.0(@typescript-eslint/parser@5.29.0(eslint@9.30.0)(typescript@5.0.4))(eslint@9.30.0)(typescript@5.0.4) @@ -453,15 +459,24 @@ packages: '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + '@types/jquery@3.5.32': + resolution: {integrity: sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==} + '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} '@types/node@24.0.6': resolution: {integrity: sha512-ZOyn+gOs749xU7ovp+Ibj0g1o3dFRqsfPnT22C2t5JzcRvgsEDpGawPbCISGKLudJk9Y0wiu9sYd6kUh0pc9TA==} + '@types/sizzle@2.3.9': + resolution: {integrity: sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==} + '@types/tern@0.23.9': resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==} + '@types/textfit@2.4.5': + resolution: {integrity: sha512-C/1i+vGFD7xi1UZPePa6pNdoR0eGFCOe7QrZlTuPGPF+Y4JnFcp9cSJGZko+6tW8GmdDdKt7S9W6sCf3ncvk5g==} + '@typescript-eslint/eslint-plugin@5.29.0': resolution: {integrity: sha512-kgTsISt9pM53yRFQmLZ4npj99yGl3x3Pl7z4eA66OuTzAGC4bQB5H5fuLwPnqTKU3yyrrg4MIhjF17UYnL4c0w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1676,6 +1691,9 @@ packages: resolution: {integrity: sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==} engines: {node: '>=16.0.0'} + textfit@2.4.0: + resolution: {integrity: sha512-/x4aoY5+/tJmu+iwpBH1yw75TFp86M6X15SvaaY/Eep7YySQYtqdOifEtfvVyMwzl7SZ+G4RQw00FD9g5R6i1Q==} + to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -2047,16 +2065,26 @@ snapshots: '@types/estree@1.0.8': {} + '@types/jquery@3.5.32': + dependencies: + '@types/sizzle': 2.3.9 + '@types/json-schema@7.0.15': {} '@types/node@24.0.6': dependencies: undici-types: 7.8.0 + '@types/sizzle@2.3.9': {} + '@types/tern@0.23.9': dependencies: '@types/estree': 1.0.8 + '@types/textfit@2.4.5': + dependencies: + '@types/jquery': 3.5.32 + '@typescript-eslint/eslint-plugin@5.29.0(@typescript-eslint/parser@5.29.0(eslint@9.30.0)(typescript@5.0.4))(eslint@9.30.0)(typescript@5.0.4)': dependencies: '@typescript-eslint/parser': 5.29.0(eslint@9.30.0)(typescript@5.0.4) @@ -3374,6 +3402,8 @@ snapshots: sync-message-port@1.1.3: {} + textfit@2.4.0: {} + to-regex-range@5.0.1: dependencies: is-number: 7.0.0 diff --git a/src/ui/components/bookshelf/Book.svelte b/src/ui/components/bookshelf/Book.svelte index 285f5cd..18b367c 100644 --- a/src/ui/components/bookshelf/Book.svelte +++ b/src/ui/components/bookshelf/Book.svelte @@ -1,19 +1,9 @@ {#if orientation} {#if orientation === "tilted"} - + - + {:else if orientation === "on-display"}
{/if} -{:else if design === "split-bands"} - - - -{:else if design === "dual-top-bands"} - - - -{:else if design === "colored-spine"} - - - {:else} - +
ev.key === "Enter" && onClick?.()} + role="link" + tabindex="0" + > - +
{/if} - diff --git a/src/ui/components/bookshelf/designs/book/BookOnDisplay.svelte b/src/ui/components/bookshelf/BookOnDisplay.svelte similarity index 100% rename from src/ui/components/bookshelf/designs/book/BookOnDisplay.svelte rename to src/ui/components/bookshelf/BookOnDisplay.svelte diff --git a/src/ui/components/bookshelf/BookText.svelte b/src/ui/components/bookshelf/BookText.svelte index 86a7e0d..6295b89 100644 --- a/src/ui/components/bookshelf/BookText.svelte +++ b/src/ui/components/bookshelf/BookText.svelte @@ -1,4 +1,6 @@ - -
ev.key === "Enter" && onClick?.()} - role="link" - tabindex="0" -> - {@render children?.()} -
- - diff --git a/src/ui/components/bookshelf/designs/book/BookDefault.svelte b/src/ui/components/bookshelf/designs/book/BookDefault.svelte deleted file mode 100644 index 1b2c41f..0000000 --- a/src/ui/components/bookshelf/designs/book/BookDefault.svelte +++ /dev/null @@ -1,49 +0,0 @@ - - -
ev.key === "Enter" && onClick?.()} - role="link" - tabindex="0" -> - {@render children?.()} -
- - diff --git a/src/ui/components/bookshelf/designs/book/BookDualTopBands.svelte b/src/ui/components/bookshelf/designs/book/BookDualTopBands.svelte deleted file mode 100644 index 6b233e7..0000000 --- a/src/ui/components/bookshelf/designs/book/BookDualTopBands.svelte +++ /dev/null @@ -1,76 +0,0 @@ - - -
ev.key === "Enter" && onClick?.()} - role="link" - tabindex="0" -> - {@render children?.()} -
- - diff --git a/src/ui/components/bookshelf/designs/book/BookSplitBands.svelte b/src/ui/components/bookshelf/designs/book/BookSplitBands.svelte deleted file mode 100644 index 6b233e7..0000000 --- a/src/ui/components/bookshelf/designs/book/BookSplitBands.svelte +++ /dev/null @@ -1,76 +0,0 @@ - - -
ev.key === "Enter" && onClick?.()} - role="link" - tabindex="0" -> - {@render children?.()} -
- - diff --git a/src/ui/directives/fitText.ts b/src/ui/directives/fitText.ts new file mode 100644 index 0000000..bbcb980 --- /dev/null +++ b/src/ui/directives/fitText.ts @@ -0,0 +1,16 @@ +import type { ActionReturn } from "svelte/action"; +import { default as doTextFit, type TextFitOption } from "textfit"; + +export function fitText( + el: HTMLElement, + opts: TextFitOption = {} +): ActionReturn { + doTextFit(el, opts); + + return { + update(opts) { + doTextFit(el, opts); + }, + destroy() {}, + }; +} diff --git a/src/ui/directives/index.ts b/src/ui/directives/index.ts index 7ff8d3d..e50e551 100644 --- a/src/ui/directives/index.ts +++ b/src/ui/directives/index.ts @@ -1 +1,3 @@ +export { chart } from "./chart"; export { clickOutside } from "./clickOutside"; +export { fitText } from "./fitText"; diff --git a/tsconfig.json b/tsconfig.json index b8cec7a..f9d36fc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,6 +13,7 @@ "strictNullChecks": true, "verbatimModuleSyntax": true, "skipLibCheck": true, + "allowSyntheticDefaultImports": true, "lib": [ "DOM", "ES5",