@yui540/comimi 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/README.md +44 -0
  2. package/dist/components/arrow-buttons.d.ts +8 -0
  3. package/dist/components/arrow-buttons.d.ts.map +1 -0
  4. package/dist/components/arrow-buttons.styles.d.ts +2 -0
  5. package/dist/components/arrow-buttons.styles.d.ts.map +1 -0
  6. package/dist/components/center-message.d.ts +4 -0
  7. package/dist/components/center-message.d.ts.map +1 -0
  8. package/dist/components/center-message.styles.d.ts +2 -0
  9. package/dist/components/center-message.styles.d.ts.map +1 -0
  10. package/dist/components/controls-dock.d.ts +44 -0
  11. package/dist/components/controls-dock.d.ts.map +1 -0
  12. package/dist/components/controls-dock.styles.d.ts +2 -0
  13. package/dist/components/controls-dock.styles.d.ts.map +1 -0
  14. package/dist/components/error-icon.d.ts +3 -0
  15. package/dist/components/error-icon.d.ts.map +1 -0
  16. package/dist/components/error-icon.styles.d.ts +2 -0
  17. package/dist/components/error-icon.styles.d.ts.map +1 -0
  18. package/dist/components/icons.d.ts +3 -0
  19. package/dist/components/icons.d.ts.map +1 -0
  20. package/dist/components/icons.styles.d.ts +2 -0
  21. package/dist/components/icons.styles.d.ts.map +1 -0
  22. package/dist/components/inputs.d.ts +36 -0
  23. package/dist/components/inputs.d.ts.map +1 -0
  24. package/dist/components/inputs.styles.d.ts +2 -0
  25. package/dist/components/inputs.styles.d.ts.map +1 -0
  26. package/dist/components/loading-icon.d.ts +3 -0
  27. package/dist/components/loading-icon.d.ts.map +1 -0
  28. package/dist/components/loading-icon.styles.d.ts +2 -0
  29. package/dist/components/loading-icon.styles.d.ts.map +1 -0
  30. package/dist/components/menu-panel.d.ts +36 -0
  31. package/dist/components/menu-panel.d.ts.map +1 -0
  32. package/dist/components/menu-panel.styles.d.ts +2 -0
  33. package/dist/components/menu-panel.styles.d.ts.map +1 -0
  34. package/dist/components/notifications.d.ts +3 -0
  35. package/dist/components/notifications.d.ts.map +1 -0
  36. package/dist/components/notifications.styles.d.ts +2 -0
  37. package/dist/components/notifications.styles.d.ts.map +1 -0
  38. package/dist/components/page-layout.d.ts +15 -0
  39. package/dist/components/page-layout.d.ts.map +1 -0
  40. package/dist/components/page-stage.d.ts +28 -0
  41. package/dist/components/page-stage.d.ts.map +1 -0
  42. package/dist/components/page-stage.styles.d.ts +2 -0
  43. package/dist/components/page-stage.styles.d.ts.map +1 -0
  44. package/dist/components/rabbit-mascot.d.ts +2 -0
  45. package/dist/components/rabbit-mascot.d.ts.map +1 -0
  46. package/dist/components/rabbit-mascot.styles.d.ts +2 -0
  47. package/dist/components/rabbit-mascot.styles.d.ts.map +1 -0
  48. package/dist/components/settings-panel.d.ts +28 -0
  49. package/dist/components/settings-panel.d.ts.map +1 -0
  50. package/dist/components/settings-panel.styles.d.ts +2 -0
  51. package/dist/components/settings-panel.styles.d.ts.map +1 -0
  52. package/dist/components/splash-screen.d.ts +3 -0
  53. package/dist/components/splash-screen.d.ts.map +1 -0
  54. package/dist/components/splash-screen.styles.d.ts +2 -0
  55. package/dist/components/splash-screen.styles.d.ts.map +1 -0
  56. package/dist/components/tooltip.styles.d.ts +2 -0
  57. package/dist/components/tooltip.styles.d.ts.map +1 -0
  58. package/dist/components/view-mode-switcher.d.ts +16 -0
  59. package/dist/components/view-mode-switcher.d.ts.map +1 -0
  60. package/dist/components/view-mode-switcher.styles.d.ts +2 -0
  61. package/dist/components/view-mode-switcher.styles.d.ts.map +1 -0
  62. package/dist/components/viewer-root.d.ts +5 -0
  63. package/dist/components/viewer-root.d.ts.map +1 -0
  64. package/dist/components/viewer-root.styles.d.ts +2 -0
  65. package/dist/components/viewer-root.styles.d.ts.map +1 -0
  66. package/dist/core/asset-loader.d.ts +7 -0
  67. package/dist/core/asset-loader.d.ts.map +1 -0
  68. package/dist/core/event-emitter.d.ts +8 -0
  69. package/dist/core/event-emitter.d.ts.map +1 -0
  70. package/dist/core/manga-viewer-core.d.ts +41 -0
  71. package/dist/core/manga-viewer-core.d.ts.map +1 -0
  72. package/dist/defaults.d.ts +9 -0
  73. package/dist/defaults.d.ts.map +1 -0
  74. package/dist/i18n/i18n.d.ts +9 -0
  75. package/dist/i18n/i18n.d.ts.map +1 -0
  76. package/dist/index.d.ts +4 -0
  77. package/dist/index.d.ts.map +1 -0
  78. package/dist/index.js +1820 -0
  79. package/dist/manga-viewer.global.js +2344 -0
  80. package/dist/renderer/renderer-callbacks.d.ts +18 -0
  81. package/dist/renderer/renderer-callbacks.d.ts.map +1 -0
  82. package/dist/renderer/viewer-renderer.d.ts +51 -0
  83. package/dist/renderer/viewer-renderer.d.ts.map +1 -0
  84. package/dist/storage/indexed-db-storage.d.ts +23 -0
  85. package/dist/storage/indexed-db-storage.d.ts.map +1 -0
  86. package/dist/store/reducer.d.ts +3 -0
  87. package/dist/store/reducer.d.ts.map +1 -0
  88. package/dist/store/store.d.ts +11 -0
  89. package/dist/store/store.d.ts.map +1 -0
  90. package/dist/styles/media.d.ts +13 -0
  91. package/dist/styles/media.d.ts.map +1 -0
  92. package/dist/styles/style-registry.d.ts +2 -0
  93. package/dist/styles/style-registry.d.ts.map +1 -0
  94. package/dist/types.d.ts +163 -0
  95. package/dist/types.d.ts.map +1 -0
  96. package/docs/USAGE.md +248 -0
  97. package/locales/en.json +37 -0
  98. package/locales/ja.json +37 -0
  99. package/package.json +42 -0
package/README.md ADDED
@@ -0,0 +1,44 @@
1
+ # comimi
2
+
3
+ ![comimi バナー画像](assets/banner.png)
4
+
5
+ comimiは、TypeScript/JavaScript向けの漫画ビューワーライブラリです。
6
+
7
+ ReactなどのUIライブラリに依存していないため、単体で動作します。
8
+
9
+ [yui540.com/comimi](https://yui540.com/comimi)
10
+
11
+ ## インストール
12
+
13
+ ```sh
14
+ npm install @yui540/comimi
15
+ ```
16
+
17
+ ## クイックスタート
18
+
19
+ ```ts
20
+ import { createMangaViewer } from "@yui540/comimi";
21
+
22
+ createMangaViewer(document.querySelector("#viewer")!, {
23
+ manga: {
24
+ id: "sample",
25
+ title: "サンプル漫画",
26
+ author: "yui540",
27
+ pages: [
28
+ { id: "p0", type: "image", src: "/pages/0.webp" },
29
+ { id: "p1", type: "image", src: "/pages/1.webp" },
30
+ { id: "p2", type: "image", src: "/pages/2.webp" },
31
+ ],
32
+ },
33
+ });
34
+ ```
35
+
36
+ これが最小構成です。ビューワーは `#viewer` にマウントされ、DOMを自動的に管理します。戻り値のインスタンスを通じて、ページ送りや設定・イベント操作も行えます。
37
+
38
+ ## ドキュメント
39
+
40
+ APIの詳細、オプション、設定、キーボードショートカット、永続化、i18n については [`docs/USAGE.md`](./docs/USAGE.md) に記載しています。
41
+
42
+ ## ライセンス
43
+
44
+ MIT
@@ -0,0 +1,8 @@
1
+ import type { RendererCallbacks } from "../renderer/renderer-callbacks";
2
+ import type { ViewerState } from "../types";
3
+ export interface ArrowButtonsOptions {
4
+ state: ViewerState;
5
+ callbacks: RendererCallbacks;
6
+ }
7
+ export declare function renderArrowButtons({ state, callbacks }: ArrowButtonsOptions): HTMLElement;
8
+ //# sourceMappingURL=arrow-buttons.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"arrow-buttons.d.ts","sourceRoot":"","sources":["../../src/components/arrow-buttons.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAoB,WAAW,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,iBAAiB,CAAC;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,SAAS,EACV,EAAE,mBAAmB,GAAG,WAAW,CAWnC"}
@@ -0,0 +1,2 @@
1
+ export declare const arrowButtonsStyles = "\n.comimi-arrows {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 30;\n}\n\n.comimi-arrow-button {\n position: absolute;\n top: 50%;\n width: 46px;\n height: 46px;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n pointer-events: auto;\n transform: translateY(-50%);\n}\n\n.comimi-arrow-next {\n right: 24px;\n}\n\n.comimi-arrow-prev {\n left: 24px;\n}\n\n.comimi-arrow-inner {\n position: absolute;\n inset: 0;\n transition:\n transform 0.6s var(--comimi-spring),\n opacity 0.3s linear;\n}\n\n.comimi-arrows[data-overlay=\"false\"] .comimi-arrow-next .comimi-arrow-inner {\n transform: translateX(35px);\n opacity: 0;\n transition:\n transform 0.3s var(--comimi-spring),\n opacity 0.15s linear;\n}\n\n.comimi-arrows[data-overlay=\"false\"] .comimi-arrow-prev .comimi-arrow-inner {\n transform: translateX(-35px);\n opacity: 0;\n transition:\n transform 0.3s var(--comimi-spring),\n opacity 0.15s linear;\n}\n\n.comimi-arrows[data-overlay=\"false\"] {\n pointer-events: none;\n}\n\n.comimi-arrow-bg {\n position: absolute;\n inset: 0;\n border-radius: 16px;\n background: var(--comimi-glass);\n box-shadow: var(--comimi-shadow);\n backdrop-filter: blur(5px);\n transition: inset 0.36s var(--comimi-spring), border-radius 0.36s var(--comimi-spring);\n}\n\n.comimi-arrow-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n color: #666;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n\n.comimi-arrow-prev .comimi-arrow-icon {\n transform: translate(-50%, -50%) scaleX(-1);\n}\n\n@keyframes comimi-arrow-bounce {\n from, to {\n transform: translate(-50%, -50%);\n }\n 40% {\n transform: translate(calc(-50% + 3px), -50%);\n }\n 70% {\n transform: translate(calc(-50% - 1.5px), -50%);\n }\n}\n\n@keyframes comimi-arrow-bounce-prev {\n from, to {\n transform: translate(-50%, -50%) scaleX(-1);\n }\n 40% {\n transform: translate(calc(-50% - 3px), -50%) scaleX(-1);\n }\n 70% {\n transform: translate(calc(-50% + 1.5px), -50%) scaleX(-1);\n }\n}\n\n@media (hover: hover) {\n .comimi-arrow-button:hover .comimi-arrow-bg {\n inset: -3px;\n border-radius: 20px;\n }\n\n .comimi-arrow-next:hover .comimi-arrow-icon {\n animation: comimi-arrow-bounce 0.5s ease-in-out 0.1s both;\n }\n\n .comimi-arrow-prev:hover .comimi-arrow-icon {\n animation: comimi-arrow-bounce-prev 0.5s ease-in-out 0.1s both;\n }\n}\n\n@media (max-width: 767px) {\n .comimi-arrow-button {\n width: 36px;\n height: 50px;\n }\n\n .comimi-arrow-next {\n right: 0;\n }\n\n .comimi-arrow-prev {\n left: 0;\n }\n\n .comimi-arrow-next .comimi-arrow-bg {\n border-radius: 16px 0 0 16px;\n }\n\n .comimi-arrow-prev .comimi-arrow-bg {\n border-radius: 0 16px 16px 0;\n }\n}\n";
2
+ //# sourceMappingURL=arrow-buttons.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"arrow-buttons.styles.d.ts","sourceRoot":"","sources":["../../src/components/arrow-buttons.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,kzFA+I9B,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { I18n } from "../i18n/i18n";
2
+ import type { ViewerState } from "../types";
3
+ export declare function renderCenterMessage(state: ViewerState, i18n: I18n): HTMLElement;
4
+ //# sourceMappingURL=center-message.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"center-message.d.ts","sourceRoot":"","sources":["../../src/components/center-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,IAAI,GACT,WAAW,CAeb"}
@@ -0,0 +1,2 @@
1
+ export declare const centerMessageStyles = "\n.comimi-center-message {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 20;\n transition: opacity 0.3s linear;\n}\n\n.comimi-center-message[data-overlay=\"false\"] {\n opacity: 0;\n transition: opacity 0.15s linear;\n}\n\n.comimi-center-message-text {\n box-sizing: border-box;\n padding: 6px 12px;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.5);\n box-shadow: var(--comimi-shadow);\n backdrop-filter: blur(5px);\n color: #bbb;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.45;\n text-align: center;\n white-space: nowrap;\n}\n\n.comimi-center-message-mobile {\n display: none;\n}\n\n@media (max-width: 767px) {\n .comimi-center-message {\n width: calc(100% - 60px * 2);\n max-width: max-content;\n }\n\n .comimi-center-message-desktop {\n display: none;\n }\n\n .comimi-center-message-mobile {\n display: block;\n }\n}\n";
2
+ //# sourceMappingURL=center-message.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"center-message.styles.d.ts","sourceRoot":"","sources":["../../src/components/center-message.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,m8BAiD/B,CAAC"}
@@ -0,0 +1,44 @@
1
+ import { I18n } from "../i18n/i18n";
2
+ import type { ViewerState } from "../types";
3
+ import type { RendererCallbacks } from "../renderer/renderer-callbacks";
4
+ export declare class ControlsDock {
5
+ private callbacks;
6
+ private i18n;
7
+ private root;
8
+ private seekCurrent;
9
+ private seekTotal;
10
+ private seekBar;
11
+ private seekFill;
12
+ private seekInput;
13
+ private autoplayContainer;
14
+ private autoplayButton;
15
+ private autoplaySlider;
16
+ private autoplayTooltip;
17
+ private autoplayProgress?;
18
+ private autoplayProgressBar?;
19
+ private side;
20
+ private pageMode;
21
+ private pageModeSingleBtn;
22
+ private pageModeSpreadBtn;
23
+ private pageModeSingleIcon;
24
+ private pageModeSpreadIcon;
25
+ private pageModeSingleTooltip;
26
+ private pageModeSpreadTooltip;
27
+ private settings;
28
+ private settingsContainer;
29
+ private settingsButton;
30
+ private settingsIcon;
31
+ private settingsTooltip;
32
+ private prevPageTurnMode?;
33
+ constructor(callbacks: RendererCallbacks, i18n: I18n);
34
+ getElement(): HTMLElement;
35
+ update(state: ViewerState, isMobile: boolean): void;
36
+ private buildSeek;
37
+ private buildRow;
38
+ private buildAutoplay;
39
+ private buildSide;
40
+ private buildPageModeButton;
41
+ private buildSettings;
42
+ private applyPopAnimation;
43
+ }
44
+ //# sourceMappingURL=controls-dock.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"controls-dock.d.ts","sourceRoot":"","sources":["../../src/components/controls-dock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAKxE,qBAAa,YAAY;IAkCrB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,IAAI;IAlCd,OAAO,CAAC,IAAI,CAAiB;IAE7B,OAAO,CAAC,WAAW,CAAmB;IACtC,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,SAAS,CAAoB;IAErC,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,eAAe,CAAmB;IAC1C,OAAO,CAAC,gBAAgB,CAAC,CAAiB;IAC1C,OAAO,CAAC,mBAAmB,CAAC,CAAkB;IAE9C,OAAO,CAAC,IAAI,CAAkB;IAC9B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,iBAAiB,CAAqB;IAC9C,OAAO,CAAC,iBAAiB,CAAqB;IAC9C,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,qBAAqB,CAAmB;IAChD,OAAO,CAAC,qBAAqB,CAAmB;IAEhD,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,YAAY,CAA+B;IACnD,OAAO,CAAC,eAAe,CAAmB;IAE1C,OAAO,CAAC,gBAAgB,CAAC,CAAe;gBAG9B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI;IAapB,UAAU,IAAI,WAAW;IAIzB,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAqEnD,OAAO,CAAC,SAAS;IA4CjB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,aAAa;IAkCrB,OAAO,CAAC,SAAS;IAqCjB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,aAAa;IA8BrB,OAAO,CAAC,iBAAiB;CAK1B"}
@@ -0,0 +1,2 @@
1
+ export declare const controlsDockStyles = "\n/* --- Controls dock (bottom) ------------------------------------------- */\n\n.comimi-controls-dock {\n box-sizing: border-box;\n position: absolute;\n bottom: 24px;\n left: 24px;\n width: calc(100% - 48px);\n padding: 20px 24px;\n z-index: 40;\n pointer-events: auto;\n transition:\n transform 0.6s var(--comimi-spring),\n opacity 0.3s linear;\n}\n\n.comimi-controls-dock[data-overlay=\"false\"] {\n transform: translateY(35px);\n opacity: 0;\n pointer-events: none;\n transition:\n transform 0.3s var(--comimi-spring),\n opacity 0.15s linear;\n}\n\n.comimi-controls-bg {\n position: absolute;\n inset: 0;\n border-radius: 20px;\n background: var(--comimi-glass);\n box-shadow: var(--comimi-shadow);\n backdrop-filter: blur(5px);\n transition: inset 0.36s var(--comimi-spring), border-radius 0.36s var(--comimi-spring);\n}\n\n@media (hover: hover) {\n .comimi-controls-dock:hover > .comimi-controls-bg {\n inset: -4px -4px 0 -4px;\n border-radius: 20px;\n }\n}\n\n.comimi-controls-row {\n position: relative;\n display: grid;\n grid-template-columns: auto auto;\n justify-content: space-between;\n align-items: center;\n}\n\n.comimi-controls-side {\n display: grid;\n grid-auto-flow: column;\n column-gap: 16px;\n justify-content: end;\n align-items: center;\n transition:\n opacity 0.2s ease-in-out,\n visibility 0.2s ease-in-out;\n}\n\n.comimi-controls-dock[data-autoplay=\"true\"] .comimi-controls-side {\n opacity: 0;\n visibility: hidden;\n}\n\n/* --- Seek bar --------------------------------------------------------- */\n\n.comimi-seek {\n position: relative;\n display: grid;\n grid-template-columns: auto 1fr;\n column-gap: 10px;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.comimi-seek-text {\n display: grid;\n grid-template-columns: repeat(2, auto);\n justify-content: start;\n align-items: end;\n line-height: 14px;\n}\n\n.comimi-seek-current {\n color: #333;\n font-size: 12px;\n font-weight: 700;\n}\n\n.comimi-seek-total {\n color: #999;\n font-size: 12px;\n font-weight: 400;\n margin-left: 0.4em;\n}\n\n.comimi-seek-bar {\n position: relative;\n width: 100%;\n height: 18px;\n}\n\n.comimi-seek-track {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 8px;\n border-radius: 999px;\n background: #e0e0e0;\n overflow: hidden;\n transform: translateY(-50%);\n transition: height 0.36s var(--comimi-spring);\n}\n\n@media (hover: hover) {\n .comimi-seek-bar:hover .comimi-seek-track {\n height: 12px;\n }\n}\n\n.comimi-seek-fill {\n position: absolute;\n top: 0;\n height: 100%;\n border-radius: 999px;\n background: #666;\n}\n\n.comimi-seek-bar[data-direction=\"rtl\"] .comimi-seek-fill {\n right: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.comimi-seek-bar[data-direction=\"ltr\"] .comimi-seek-fill {\n left: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.comimi-seek-input {\n position: absolute;\n inset: 0;\n z-index: 1;\n width: 100%;\n height: 18px;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n}\n\n.comimi-seek-input::-webkit-slider-runnable-track {\n height: 8px;\n background: transparent;\n border: 0;\n}\n\n.comimi-seek-input::-webkit-slider-thumb {\n appearance: none;\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n margin-top: -5px;\n border: 0;\n border-radius: 50%;\n background: #666;\n box-shadow: none;\n transition:\n transform 0.36s var(--comimi-spring),\n background-color 0.2s ease-in-out;\n}\n\n.comimi-seek-input:hover::-webkit-slider-thumb {\n transform: scale(1.15);\n}\n\n.comimi-seek-input::-moz-range-track {\n height: 8px;\n background: transparent;\n border: 0;\n}\n\n.comimi-seek-input::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border: 0;\n border-radius: 50%;\n background: #666;\n box-shadow: none;\n transition:\n transform 0.36s var(--comimi-spring),\n background-color 0.2s ease-in-out;\n}\n\n.comimi-seek-input:hover::-moz-range-thumb {\n transform: scale(1.15);\n}\n\n.comimi-seek-input:focus-visible {\n outline: none;\n}\n\n.comimi-seek-input:focus-visible::-webkit-slider-thumb {\n box-shadow: none;\n}\n\n.comimi-seek-input:focus-visible::-moz-range-thumb {\n box-shadow: none;\n}\n\n.comimi-seek-input[data-direction=\"rtl\"] {\n direction: rtl;\n}\n\n/* --- Auto Play -------------------------------------------------------- */\n\n.comimi-autoplay {\n position: relative;\n display: grid;\n grid-template-columns: auto auto;\n column-gap: 12px;\n justify-content: start;\n align-items: center;\n}\n\n.comimi-autoplay-button {\n position: relative;\n width: 24px;\n height: 24px;\n padding: 0;\n border: 0;\n background: transparent;\n color: #666;\n cursor: pointer;\n}\n\n.comimi-autoplay-window {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n overflow: hidden;\n transform: translate(-50%, -50%);\n}\n\n.comimi-autoplay-slider {\n position: absolute;\n top: 0;\n right: 0;\n width: 200%;\n height: 100%;\n transition: transform 0.36s var(--comimi-spring);\n}\n\n.comimi-autoplay-slider[data-active=\"true\"] {\n transform: translateX(50%);\n}\n\n.comimi-autoplay-icon {\n position: absolute;\n top: 0;\n width: 50%;\n height: 100%;\n display: block;\n}\n\n.comimi-autoplay-icon-play {\n right: 0;\n}\n\n.comimi-autoplay-icon-pause {\n left: 0;\n}\n\n.comimi-autoplay-progress {\n position: relative;\n width: 140px;\n height: 6px;\n border-radius: 999px;\n background: #e0e0e0;\n overflow: hidden;\n}\n\n.comimi-autoplay-progress-bar {\n display: block;\n position: absolute;\n inset: 0;\n border-radius: 999px;\n background: #666;\n animation: comimi-autoplay-progress 3s linear 0s infinite;\n}\n\n/* --- Page Mode Toggle (single / spread) ------------------------------ */\n\n.comimi-page-mode {\n position: relative;\n width: 80px;\n height: 30px;\n}\n\n.comimi-page-mode-wrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 80px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n background: #eeeeee;\n border-radius: 8px;\n transform: translate(-50%, -50%);\n transition: width 0.36s var(--comimi-spring);\n}\n\n@media (hover: hover) {\n .comimi-page-mode-wrapper:hover {\n width: 95px;\n }\n}\n\n.comimi-page-mode-button {\n position: relative;\n display: grid;\n place-content: center;\n width: 100%;\n height: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: #666;\n cursor: pointer;\n}\n\n.comimi-page-mode-icon {\n display: block;\n width: 20px;\n opacity: 0.3;\n transform-origin: center bottom;\n transition: opacity 0.2s ease-in-out;\n}\n\n.comimi-page-mode-button[data-selected=\"true\"] .comimi-page-mode-icon {\n opacity: 1;\n}\n\n.comimi-page-mode-icon.comimi-pop-animate {\n animation: comimi-pop 0.5s ease-in-out 0s both;\n}\n\n/* --- Settings (button + popover panel) ------------------------------- */\n\n.comimi-settings {\n position: relative;\n width: 24px;\n height: 24px;\n}\n\n.comimi-settings-button {\n position: absolute;\n inset: 0;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.comimi-settings-icon {\n display: block;\n width: 100%;\n height: 100%;\n color: #666;\n transition: transform 0.36s var(--comimi-spring);\n}\n\n.comimi-settings[data-open=\"true\"] .comimi-settings-icon {\n transform: rotate(30deg);\n}\n\n@keyframes comimi-pop {\n from, to {\n transform: scale(1, 1);\n }\n 50% {\n transform: scale(0.95, 1.15);\n }\n 75% {\n transform: scale(1.15, 0.95);\n }\n}\n\n@keyframes comimi-autoplay-progress {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@media (max-width: 767px) {\n .comimi-controls-dock {\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));\n }\n\n .comimi-controls-bg {\n border-radius: 20px 20px 0 0;\n }\n}\n";
2
+ //# sourceMappingURL=controls-dock.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"controls-dock.styles.d.ts","sourceRoot":"","sources":["../../src/components/controls-dock.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,49PAoa9B,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { I18n } from "../i18n/i18n";
2
+ export declare function renderErrorIcon(i18n: I18n, pageNumber: number): HTMLElement;
3
+ //# sourceMappingURL=error-icon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"error-icon.d.ts","sourceRoot":"","sources":["../../src/components/error-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAkBpC,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,GAAG,WAAW,CAc3E"}
@@ -0,0 +1,2 @@
1
+ export declare const errorIconStyles = "\n.comimi-error-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: grid;\n gap: 10px;\n justify-items: center;\n width: 80px;\n}\n\n.comimi-error-icon-svg {\n width: 80px;\n}\n\n.comimi-error-svg {\n display: block;\n width: 100%;\n transform-origin: center bottom;\n animation: comimi-error-fall 0.8s ease-in-out 0s both;\n}\n\n.comimi-error-stroke {\n fill: none;\n stroke: #ccc;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 10px;\n}\n\n.comimi-error-mimi {\n transform-origin: 56px 43px;\n}\n\n.comimi-error-mimi-left {\n animation:\n comimi-error-mimi-left-intro 0.8s ease-in-out 0s both,\n comimi-error-mimi-left-loop 1.5s ease-in-out 0.8s infinite forwards;\n}\n\n.comimi-error-mimi-right {\n animation:\n comimi-error-mimi-right-intro 0.8s ease-in-out 0s both,\n comimi-error-mimi-right-loop 1.5s ease-in-out 0.8s infinite forwards;\n}\n\n.comimi-error-eye {\n fill: #ccc;\n transform-origin: center;\n transform-box: fill-box;\n animation: comimi-error-eye 1.5s ease-in-out 0.8s infinite forwards;\n}\n\n.comimi-error-icon-text {\n color: #aaa;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.45;\n text-align: center;\n}\n\n@keyframes comimi-error-fall {\n from {\n opacity: 0;\n transform: translateY(-40%) rotate(10deg);\n }\n 20% {\n opacity: 1;\n }\n 40% {\n transform: translateY(0) rotate(0);\n }\n 60% {\n transform: translateY(0) scale(1.1, 0.95);\n }\n 80% {\n transform: translateY(0) scale(0.95, 1.1);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes comimi-error-mimi-left-intro {\n from {\n transform: rotate(0deg);\n }\n 60% {\n transform: rotate(20deg);\n }\n to {\n transform: rotate(10deg);\n }\n}\n\n@keyframes comimi-error-mimi-left-loop {\n from, to {\n transform: rotate(10deg);\n }\n 50% {\n transform: rotate(30deg);\n }\n}\n\n@keyframes comimi-error-mimi-right-intro {\n from {\n transform: rotate(0deg);\n }\n 60% {\n transform: rotate(-20deg);\n }\n to {\n transform: rotate(-10deg);\n }\n}\n\n@keyframes comimi-error-mimi-right-loop {\n from, to {\n transform: rotate(-10deg);\n }\n 50% {\n transform: rotate(-30deg);\n }\n}\n\n@keyframes comimi-error-eye {\n from, to {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(4px);\n }\n}\n";
2
+ //# sourceMappingURL=error-icon.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"error-icon.styles.d.ts","sourceRoot":"","sources":["../../src/components/error-icon.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,i4EAuI3B,CAAC"}
@@ -0,0 +1,3 @@
1
+ export type IconName = "arrow" | "close" | "default" | "fullscreen" | "menu" | "one" | "pause" | "play" | "settings" | "two" | "wide";
2
+ export declare function icon(name: IconName, className?: string): Element;
3
+ //# sourceMappingURL=icons.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/components/icons.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,OAAO,GACP,SAAS,GACT,YAAY,GACZ,MAAM,GACN,KAAK,GACL,OAAO,GACP,MAAM,GACN,UAAU,GACV,KAAK,GACL,MAAM,CAAC;AAEX,wBAAgB,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CA2ChE"}
@@ -0,0 +1,2 @@
1
+ export declare const iconStyles = "\n.comimi-icon {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.comimi-icon-fill {\n fill: currentColor;\n transition: fill .2s linear;\n}\n\n.comimi-icon-stroke {\n fill: none;\n stroke: currentColor;\n stroke-width: 1.6;\n transition: stroke .2s linear;\n}\n\n.comimi-menu-svg,\n.comimi-close-svg {\n display: block;\n position: relative;\n width: 34px;\n height: 34px;\n}\n\n.comimi-menu-svg span,\n.comimi-close-svg span {\n position: absolute;\n left: 50%;\n width: 17px;\n height: 3px;\n border-radius: 999px;\n background: #666;\n}\n\n.comimi-menu-svg span:nth-child(1) {\n top: 9px;\n transform: translateX(-50%);\n}\n\n.comimi-menu-svg span:nth-child(2) {\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.comimi-menu-svg span:nth-child(3) {\n bottom: 9px;\n transform: translateX(-50%);\n}\n\n.comimi-close-svg span {\n top: 50%;\n}\n\n.comimi-close-svg span:nth-child(1) {\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.comimi-close-svg span:nth-child(2) {\n transform: translate(-50%, -50%) rotate(-45deg);\n}\n";
2
+ //# sourceMappingURL=icons.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icons.styles.d.ts","sourceRoot":"","sources":["../../src/components/icons.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,wjCA+DtB,CAAC"}
@@ -0,0 +1,36 @@
1
+ export interface SelectOption {
2
+ label: string;
3
+ value: string | number;
4
+ }
5
+ export declare class ToggleSwitch {
6
+ private root;
7
+ constructor(onChange: (checked: boolean) => void);
8
+ setChecked(checked: boolean): void;
9
+ getElement(): HTMLButtonElement;
10
+ }
11
+ export declare class Selectbox {
12
+ private root;
13
+ private select;
14
+ private label;
15
+ private options;
16
+ constructor(onChange: (value: string | number) => void);
17
+ setOptions(options: SelectOption[]): void;
18
+ setValue(value: string | number): void;
19
+ getElement(): HTMLDivElement;
20
+ }
21
+ export declare class RangeSlider {
22
+ private root;
23
+ private input;
24
+ private fill;
25
+ private valueLabel;
26
+ private unit;
27
+ private min;
28
+ private max;
29
+ constructor(onChange: (value: number) => void);
30
+ setRange(min: number, max: number, step?: number): void;
31
+ setUnit(unit: string): void;
32
+ setValue(value: number): void;
33
+ private refreshLabel;
34
+ getElement(): HTMLDivElement;
35
+ }
36
+ //# sourceMappingURL=inputs.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/components/inputs.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,qBAAa,YAAY;IACvB,OAAO,CAAC,IAAI,CAAoB;gBAEpB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;IAkChD,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAIlC,UAAU,IAAI,iBAAiB;CAGhC;AAED,qBAAa,SAAS;IACpB,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,OAAO,CAAsB;gBAEzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI;IAyBtD,UAAU,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,IAAI;IAezC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAQtC,UAAU,IAAI,cAAc;CAG7B;AAED,qBAAa,WAAW;IACtB,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,KAAK,CAAmB;IAChC,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,IAAI,CAAM;IAClB,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,GAAG,CAAO;gBAEN,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IA6B7C,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,SAAI,GAAG,IAAI;IAQlD,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAU7B,OAAO,CAAC,YAAY;IAIpB,UAAU,IAAI,cAAc;CAG7B"}
@@ -0,0 +1,2 @@
1
+ export declare const inputsStyles = "\n.comimi-selectbox {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n\n.comimi-selectbox-bg {\n position: absolute;\n inset: 0;\n border-radius: 8px;\n background: #eeeeee;\n transition: inset 0.36s var(--comimi-spring);\n}\n\n@media (hover: hover) {\n .comimi-selectbox:hover .comimi-selectbox-bg {\n inset: -3px;\n }\n}\n\n.comimi-selectbox-select {\n position: absolute;\n inset: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n color: transparent;\n font: inherit;\n cursor: pointer;\n opacity: 0;\n}\n\n.comimi-selectbox-select:disabled {\n cursor: not-allowed;\n}\n\n.comimi-selectbox-label {\n position: relative;\n display: block;\n box-sizing: border-box;\n width: 100%;\n padding: 8px 32px 8px 12px;\n color: #333;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.45;\n cursor: pointer;\n pointer-events: none;\n}\n\n.comimi-selectbox-arrow {\n position: absolute;\n top: 50%;\n right: 12px;\n z-index: 1;\n width: 16px;\n height: 16px;\n color: #aaa;\n transform: translateY(-50%) rotate(90deg);\n pointer-events: none;\n}\n\n@media (hover: hover) {\n .comimi-selectbox:hover .comimi-selectbox-arrow {\n animation: comimi-selectbox-arrow 0.5s ease-in-out 0s both;\n }\n}\n\n@keyframes comimi-selectbox-arrow {\n from, to {\n transform: translateY(-50%) rotate(90deg);\n }\n 40% {\n transform: translateY(calc(-50% + 3px)) rotate(90deg);\n }\n 70% {\n transform: translateY(calc(-50% - 1.5px)) rotate(90deg);\n }\n}\n\n.comimi-toggle-switch {\n display: grid;\n grid-template-columns: repeat(2, auto);\n column-gap: 6px;\n justify-content: start;\n align-items: center;\n width: 100%;\n padding: 2px;\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.comimi-toggle-track {\n position: relative;\n width: 32px;\n height: 18px;\n border-radius: 999px;\n background: #eeeeee;\n transition: background-color 0.2s linear;\n}\n\n.comimi-toggle-switch[data-checked=\"true\"] .comimi-toggle-track {\n background: #666;\n}\n\n.comimi-toggle-knob {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #666;\n transition:\n transform 0.36s var(--comimi-spring),\n background-color 0.2s linear;\n}\n\n.comimi-toggle-switch[data-checked=\"true\"] .comimi-toggle-knob {\n background: #fff;\n transform: translateX(100%);\n}\n\n.comimi-toggle-label-wrap {\n position: relative;\n width: 22px;\n height: 12px;\n overflow: hidden;\n}\n\n.comimi-toggle-label-inner {\n position: absolute;\n inset: 0;\n transition: transform 0.36s var(--comimi-spring);\n}\n\n.comimi-toggle-switch[data-checked=\"false\"] .comimi-toggle-label-inner {\n transform: translateX(-100%);\n}\n\n.comimi-toggle-label {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n font-size: 11px;\n font-weight: 400;\n line-height: 12px;\n text-align: center;\n}\n\n.comimi-toggle-label-on {\n color: #333;\n}\n\n.comimi-toggle-label-off {\n color: #aaa;\n transform: translateX(100%);\n}\n\n.comimi-range-slider {\n display: grid;\n grid-template-columns: 1fr auto;\n column-gap: 8px;\n align-items: center;\n width: 100%;\n}\n\n.comimi-range-slider[data-disabled=\"true\"] {\n opacity: 0.6;\n}\n\n.comimi-range-slider-wrap {\n position: relative;\n display: grid;\n align-items: center;\n min-width: 0;\n height: 18px;\n}\n\n.comimi-range-slider-track {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 6px;\n border-radius: 999px;\n background: #eeeeee;\n overflow: hidden;\n transform: translateY(-50%);\n transition: height 0.36s var(--comimi-spring);\n}\n\n@media (hover: hover) {\n .comimi-range-slider-wrap:hover .comimi-range-slider-track {\n height: 10px;\n }\n}\n\n.comimi-range-slider-fill {\n display: block;\n height: 100%;\n background: #666;\n border-radius: inherit;\n}\n\n.comimi-range-slider-input {\n position: relative;\n z-index: 1;\n width: 100%;\n height: 18px;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n}\n\n.comimi-range-slider-input::-webkit-slider-runnable-track {\n height: 6px;\n background: transparent;\n border: 0;\n}\n\n.comimi-range-slider-input::-webkit-slider-thumb {\n appearance: none;\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n margin-top: -6px;\n border: 0;\n border-radius: 50%;\n background: #666;\n box-shadow: none;\n transition:\n transform 0.36s var(--comimi-spring),\n background-color 0.2s ease-in-out;\n}\n\n.comimi-range-slider-input:hover:not(:disabled)::-webkit-slider-thumb {\n transform: scale(1.15);\n}\n\n.comimi-range-slider-input::-moz-range-track {\n height: 6px;\n background: transparent;\n border: 0;\n}\n\n.comimi-range-slider-input::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border: 0;\n border-radius: 50%;\n background: #666;\n box-shadow: none;\n transition:\n transform 0.36s var(--comimi-spring),\n background-color 0.2s ease-in-out;\n}\n\n.comimi-range-slider-input:hover:not(:disabled)::-moz-range-thumb {\n transform: scale(1.15);\n}\n\n.comimi-range-slider-input:focus-visible {\n outline: none;\n}\n\n.comimi-range-slider-input:focus-visible::-webkit-slider-thumb {\n box-shadow: none;\n}\n\n.comimi-range-slider-input:focus-visible::-moz-range-thumb {\n box-shadow: none;\n}\n\n.comimi-range-slider-value {\n width: 36px;\n color: #666;\n font-size: 11px;\n font-weight: 400;\n line-height: 1;\n text-align: right;\n white-space: nowrap;\n}\n";
2
+ //# sourceMappingURL=inputs.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"inputs.styles.d.ts","sourceRoot":"","sources":["../../src/components/inputs.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,ypLAySxB,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { I18n } from "../i18n/i18n";
2
+ export declare function renderLoadingIcon(i18n: I18n): HTMLElement;
3
+ //# sourceMappingURL=loading-icon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"loading-icon.d.ts","sourceRoot":"","sources":["../../src/components/loading-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAoBpC,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,CA6BzD"}
@@ -0,0 +1,2 @@
1
+ export declare const loadingIconStyles = "\n.comimi-loading-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: grid;\n gap: 10px;\n justify-items: center;\n width: 80px;\n}\n\n.comimi-loading-icon-svg {\n width: 80px;\n}\n\n.comimi-loading-svg {\n display: block;\n width: 100%;\n transform-origin: center bottom;\n}\n\n.comimi-loading-stroke {\n fill: none;\n stroke: #ccc;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 10px;\n}\n\n.comimi-loading-mimi {\n transform-origin: 56px 43px;\n}\n\n.comimi-loading-mimi-left {\n animation:\n comimi-loading-mimi-left 0.4s ease-in-out 0.1s 2 forwards,\n comimi-loading-mimi-left 0.4s ease-in-out 1.7s 2 forwards;\n}\n\n.comimi-loading-mimi-right {\n animation:\n comimi-loading-mimi-right 0.4s ease-in-out 0.1s 2 forwards,\n comimi-loading-mimi-right 0.4s ease-in-out 1.7s 2 forwards;\n}\n\n.comimi-loading-eyes {\n transform: translateX(-7px);\n animation:\n comimi-loading-eyes-move 0.4s ease-in-out 1.2s both,\n comimi-loading-eyes-move 0.4s ease-in-out 2.6s reverse forwards;\n}\n\n.comimi-loading-eye {\n fill: #ccc;\n transform-origin: center;\n transform-box: fill-box;\n animation:\n comimi-loading-eye 0.4s ease-in-out 0s forwards,\n comimi-loading-eye 0.4s ease-in-out 1.6s forwards;\n}\n\n.comimi-loading-icon-text {\n color: #aaa;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.45;\n text-align: center;\n}\n\n.comimi-loading-icon-text span {\n display: inline-block;\n animation: comimi-loading-dot 0.8s ease-in-out 0s infinite both;\n}\n\n.comimi-loading-icon-text span:nth-child(1) {\n animation-delay: 0s;\n}\n\n.comimi-loading-icon-text span:nth-child(2) {\n animation-delay: 0.15s;\n}\n\n.comimi-loading-icon-text span:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n@keyframes comimi-loading-mimi-left {\n from, to {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(20deg);\n }\n}\n\n@keyframes comimi-loading-mimi-right {\n from, to {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(-20deg);\n }\n}\n\n@keyframes comimi-loading-eyes-move {\n from {\n transform: translateX(-7px);\n }\n to {\n transform: translateX(7px);\n }\n}\n\n@keyframes comimi-loading-eye {\n from, to {\n transform: scaleY(1);\n }\n 50% {\n transform: scaleY(0.2);\n }\n}\n\n@keyframes comimi-loading-dot {\n from, 50%, to {\n opacity: 1;\n }\n 25% {\n opacity: 0;\n }\n}\n";
2
+ //# sourceMappingURL=loading-icon.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"loading-icon.styles.d.ts","sourceRoot":"","sources":["../../src/components/loading-icon.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,i7EAmI7B,CAAC"}
@@ -0,0 +1,36 @@
1
+ import { I18n } from "../i18n/i18n";
2
+ import type { ViewerState } from "../types";
3
+ import type { RendererCallbacks } from "../renderer/renderer-callbacks";
4
+ export declare class MenuPanel {
5
+ private callbacks;
6
+ private i18n;
7
+ private root;
8
+ private titleEl;
9
+ private authorEl;
10
+ private bottomEl;
11
+ private viewMenu;
12
+ private viewShortcut;
13
+ private viewPageList;
14
+ private pageListInner;
15
+ private pageListCacheKey?;
16
+ private currentState?;
17
+ private currentView;
18
+ private i18nTexts;
19
+ constructor(callbacks: RendererCallbacks, i18n: I18n);
20
+ getElement(): HTMLElement;
21
+ private bindI18nText;
22
+ private refreshI18nTexts;
23
+ update(state: ViewerState): void;
24
+ private applyHeight;
25
+ private refreshPageList;
26
+ private buildTop;
27
+ private findTitleNodes;
28
+ private buildMenuView;
29
+ private renderMenuLink;
30
+ private buildShortcutView;
31
+ private buildPageListView;
32
+ private shortcutSection;
33
+ private shortcutItem;
34
+ private renderBackButton;
35
+ }
36
+ //# sourceMappingURL=menu-panel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"menu-panel.d.ts","sourceRoot":"","sources":["../../src/components/menu-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAMxE,qBAAa,SAAS;IAelB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,IAAI;IAfd,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,aAAa,CAAiB;IACtC,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAClC,OAAO,CAAC,YAAY,CAAC,CAAc;IACnC,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,SAAS,CAA+C;gBAGtD,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI;IA8BpB,UAAU,IAAI,WAAW;IAIzB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,gBAAgB;IAMxB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAiChC,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,eAAe;IAwCvB,OAAO,CAAC,QAAQ;IAqChB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,iBAAiB;IAqCzB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,gBAAgB;CA2BzB"}
@@ -0,0 +1,2 @@
1
+ export declare const menuPanelStyles = "\n.comimi-menu-panel {\n position: absolute;\n top: 24px;\n left: 24px;\n width: 420px;\n z-index: 45;\n pointer-events: auto;\n transition:\n transform 0.6s var(--comimi-spring),\n opacity 0.3s linear;\n}\n\n.comimi-menu-panel[data-overlay=\"false\"] {\n transform: translateY(-35px);\n opacity: 0;\n pointer-events: none;\n transition:\n transform 0.3s var(--comimi-spring),\n opacity 0.15s linear;\n}\n\n.comimi-menu-bg {\n position: absolute;\n inset: 0;\n border-radius: 16px;\n background: var(--comimi-glass);\n box-shadow: var(--comimi-shadow);\n backdrop-filter: blur(5px);\n transition: inset 0.36s var(--comimi-spring);\n}\n\n@media (hover: hover) {\n .comimi-menu-panel:hover > .comimi-menu-bg {\n inset: -5px;\n }\n}\n\n.comimi-menu-top {\n position: relative;\n display: grid;\n grid-template-columns: auto 1fr;\n column-gap: 13px;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n height: 62px;\n padding: 0 13px;\n border: 0;\n background: transparent;\n color: inherit;\n text-align: left;\n cursor: pointer;\n}\n\n.comimi-menu-button {\n position: relative;\n width: 34px;\n height: 34px;\n overflow: hidden;\n}\n\n.comimi-menu-button-inner {\n display: block;\n position: absolute;\n inset: 0;\n transition: transform 0.4s var(--comimi-spring);\n}\n\n.comimi-menu-panel[data-open=\"true\"] .comimi-menu-button-inner {\n transform: translateY(100%);\n}\n\n.comimi-menu-button-inner > * {\n position: absolute;\n inset: 0;\n}\n\n.comimi-menu-button-inner > *:nth-child(2) {\n transform: translateY(-100%);\n}\n\n.comimi-menu-title-wrap {\n min-width: 0;\n}\n\n.comimi-menu-title {\n display: block;\n width: 100%;\n color: #333;\n font-size: 15px;\n font-weight: 700;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.comimi-menu-author {\n display: block;\n width: 100%;\n color: #666;\n font-size: 12px;\n font-weight: 400;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.comimi-menu-bottom {\n position: relative;\n width: 100%;\n overflow: hidden;\n transition: height 0.24s ease-in-out;\n}\n\n.comimi-menu-border {\n width: 100%;\n height: 1px;\n background: #e0e0e0;\n}\n\n.comimi-menu-view {\n position: absolute;\n top: 1px;\n left: 0;\n width: 100%;\n transition: all 0.28s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: scale(0.92);\n filter: blur(5px);\n}\n\n.comimi-menu-view-menu {\n position: relative;\n}\n\n.comimi-menu-panel[data-view=\"menu\"] .comimi-menu-view-menu,\n.comimi-menu-panel[data-view=\"shortcut\"] .comimi-menu-view-shortcut,\n.comimi-menu-panel[data-view=\"pageList\"] .comimi-menu-view-page-list {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n filter: blur(0);\n}\n\n.comimi-menu-list {\n position: relative;\n width: 100%;\n padding: 10px 0;\n}\n\n.comimi-menu-link {\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 1fr auto;\n column-gap: 8px;\n align-items: center;\n width: 100%;\n padding: 10px 16px 10px 22px;\n border: 0;\n border-radius: 10px;\n background: transparent;\n color: #666;\n cursor: pointer;\n transition: background-color 0.24s linear;\n}\n\n.comimi-menu-link:hover {\n background: #f1f1f1;\n}\n\n.comimi-menu-link-text {\n color: #666;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.45;\n text-align: left;\n}\n\n.comimi-menu-link-arrow {\n display: block;\n width: 20px;\n height: 20px;\n color: #aaa;\n}\n\n.comimi-menu-link-arrow > svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.comimi-page-list-inner {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n box-sizing: border-box;\n padding: 22px;\n max-height: 315px;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.comimi-page-list-item {\n display: grid;\n row-gap: 4px;\n padding: 0;\n border: 0;\n background: transparent;\n color: #666;\n cursor: pointer;\n text-align: center;\n}\n\n.comimi-page-list-thumb {\n position: relative;\n display: block;\n width: 100%;\n aspect-ratio: 100 / 141;\n background: #fff;\n border-radius: 6px;\n outline: 3px solid #e0e0e0;\n}\n\n.comimi-page-list-thumb img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n border-radius: 4px;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n.comimi-page-list-text {\n color: #666;\n font-size: 14px;\n font-weight: 700;\n}\n\n.comimi-shortcut-inner {\n display: grid;\n row-gap: 22px;\n box-sizing: border-box;\n padding: 22px;\n max-height: 315px;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.comimi-shortcut-section {\n display: grid;\n row-gap: 8px;\n}\n\n.comimi-shortcut-heading {\n color: #666;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.45;\n}\n\n.comimi-shortcut-list {\n display: grid;\n row-gap: 8px;\n justify-items: start;\n}\n\n.comimi-shortcut-column {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n align-items: center;\n}\n\n.comimi-shortcut-item {\n display: grid;\n grid-template-columns: repeat(2, auto);\n column-gap: 8px;\n align-items: center;\n width: fit-content;\n}\n\n.comimi-shortcut-badge {\n display: grid;\n grid-auto-flow: column;\n column-gap: 6px;\n align-items: center;\n padding: 4px 8px;\n border-radius: 7px;\n background: #eeeeee;\n}\n\n.comimi-shortcut-key {\n color: #666;\n font-size: 13px;\n font-weight: 700;\n line-height: 1.45;\n}\n\n.comimi-shortcut-or::before {\n content: \"or\";\n display: block;\n color: #666;\n font-size: 11px;\n font-weight: 400;\n line-height: 1.45;\n}\n\n.comimi-shortcut-label {\n color: #666;\n font-size: 13px;\n font-weight: 400;\n line-height: 1.45;\n}\n\n.comimi-back-button {\n position: relative;\n width: 100%;\n height: 56px;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.comimi-back-inner {\n position: absolute;\n inset: 8px;\n}\n\n.comimi-back-bg {\n position: absolute;\n inset: 0;\n border-radius: 8px;\n background: #eeeeee;\n transition: inset 0.36s var(--comimi-spring), border-radius 0.36s var(--comimi-spring);\n}\n\n.comimi-back-button:hover .comimi-back-bg {\n inset: -4px;\n border-radius: 10px;\n}\n\n.comimi-back-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #666;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.45;\n pointer-events: none;\n}\n\n.comimi-back-arrow {\n position: absolute;\n top: 50%;\n left: 8px;\n width: 22px;\n height: 22px;\n color: #aaa;\n transform: translateY(-50%) scaleX(-1);\n pointer-events: none;\n}\n\n.comimi-back-arrow > svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n@media (max-width: 767px) {\n .comimi-menu-panel {\n top: 0;\n left: 0;\n width: 100%;\n }\n\n .comimi-menu-bg {\n border-radius: 0 0 16px 16px;\n }\n\n .comimi-menu-top {\n width: 100%;\n }\n\n .comimi-page-list-inner,\n .comimi-shortcut-inner {\n max-height: calc(var(--view-height, 100vh) - 62px - 56px);\n }\n}\n";
2
+ //# sourceMappingURL=menu-panel.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"menu-panel.styles.d.ts","sourceRoot":"","sources":["../../src/components/menu-panel.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,y/NA0Y3B,CAAC"}
@@ -0,0 +1,3 @@
1
+ import type { ViewerState } from "../types";
2
+ export declare function renderNotifications(state: ViewerState): HTMLElement;
3
+ //# sourceMappingURL=notifications.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../src/components/notifications.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,WAAW,CAqBnE"}
@@ -0,0 +1,2 @@
1
+ export declare const notificationsStyles = "\n.comimi-notifications {\n position: absolute;\n bottom: 140px;\n left: 50%;\n transform: translateX(-50%);\n display: grid;\n row-gap: 8px;\n justify-items: center;\n pointer-events: none;\n z-index: 35;\n}\n\n.comimi-toast {\n display: grid;\n grid-template-columns: auto auto;\n gap: 5px;\n align-items: center;\n justify-content: center;\n width: fit-content;\n padding: 6px 13px 6px 8px;\n border-radius: 999px;\n background-color: #666;\n animation: comimi-toast-popup 0.37s ease-in-out 0s both;\n}\n\n.comimi-toast-dot {\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #888;\n}\n\n.comimi-toast-text {\n color: #fff;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.45;\n}\n\n@keyframes comimi-toast-popup {\n from {\n transform: translateY(6px) scale(0.2, 0.8);\n opacity: 0;\n }\n 60% {\n transform: translateY(-1px) scale(1.1, 1.05);\n opacity: 1;\n }\n to {\n transform: scale(1, 1);\n opacity: 1;\n }\n}\n\n@media (max-width: 767px) {\n .comimi-notifications {\n bottom: calc(120px + env(safe-area-inset-bottom, 0px));\n }\n}\n";
2
+ //# sourceMappingURL=notifications.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"notifications.styles.d.ts","sourceRoot":"","sources":["../../src/components/notifications.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,0nCA6D/B,CAAC"}
@@ -0,0 +1,15 @@
1
+ import type { ReadingDirection, ViewerState } from "../types";
2
+ export type AdjacentDirection = "previous" | "next";
3
+ export type PageGroupPlacement = AdjacentDirection | "current";
4
+ export type PageGroupSide = "left" | "center" | "right";
5
+ export interface PageGroup {
6
+ indexes: number[];
7
+ placement: PageGroupPlacement;
8
+ offset: number;
9
+ }
10
+ export declare function getDisplayedPageIndexes(state: ViewerState, isMobile: boolean): number[];
11
+ export declare function getAdjacentPageIndexes(state: ViewerState, direction: AdjacentDirection, isMobile: boolean): number[];
12
+ export declare function getPreloadedPageGroups(state: ViewerState, isMobile: boolean): PageGroup[];
13
+ export declare function getPageGroupSide(state: ViewerState, placement: PageGroupPlacement): PageGroupSide;
14
+ export declare function isSwipeToNext(deltaX: number, direction: ReadingDirection): boolean;
15
+ //# sourceMappingURL=page-layout.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"page-layout.d.ts","sourceRoot":"","sources":["../../src/components/page-layout.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG,SAAS,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,OAAO,GAChB,MAAM,EAAE,CAEV;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,EAAE,OAAO,GAChB,MAAM,EAAE,CAYV;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,OAAO,GAChB,SAAS,EAAE,CAwCb;AAYD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,kBAAkB,GAC5B,aAAa,CAQf;AAED,wBAAgB,aAAa,CAC3B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,gBAAgB,GAC1B,OAAO,CAET"}
@@ -0,0 +1,28 @@
1
+ import { AssetLoader } from "../core/asset-loader";
2
+ import { I18n } from "../i18n/i18n";
3
+ import type { ViewerState } from "../types";
4
+ export interface PageStageOptions {
5
+ assetLoader: AssetLoader;
6
+ i18n: I18n;
7
+ isMobileViewport: () => boolean;
8
+ }
9
+ export declare class PageStage {
10
+ private options;
11
+ private root;
12
+ private imageSources;
13
+ private resolvePromises;
14
+ private slots;
15
+ constructor(options: PageStageOptions);
16
+ getElement(): HTMLDivElement;
17
+ setDragOffset(offsetX: number, animate?: boolean): void;
18
+ /**
19
+ * Reset the stage transform without triggering the CSS transition.
20
+ * Used after a page turn animation finishes so the freshly committed
21
+ * page does not slide back into place.
22
+ */
23
+ snapTransform(): void;
24
+ update(state: ViewerState, isMobile: boolean): void;
25
+ private getOrBuildSlot;
26
+ private buildSlot;
27
+ }
28
+ //# sourceMappingURL=page-stage.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"page-stage.d.ts","sourceRoot":"","sources":["../../src/components/page-stage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,UAAU,CAAC;AASvD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;IACX,gBAAgB,EAAE,MAAM,OAAO,CAAC;CACjC;AAOD,qBAAa,SAAS;IAMR,OAAO,CAAC,OAAO;IAL3B,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,YAAY,CAA6B;IACjD,OAAO,CAAC,eAAe,CAAsC;IAC7D,OAAO,CAAC,KAAK,CAAiC;gBAE1B,OAAO,EAAE,gBAAgB;IAK7C,UAAU,IAAI,cAAc;IAI5B,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,UAAQ,GAAG,IAAI;IAKrD;;;;OAIG;IACH,aAAa,IAAI,IAAI;IAarB,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAqCnD,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,SAAS;CAqElB"}
@@ -0,0 +1,2 @@
1
+ export declare const pageStageStyles = "\n.comimi-stage {\n position: absolute;\n inset: 0;\n will-change: transform;\n transition: transform .18s ease;\n}\n\n.comimi-stage[data-dragging=\"true\"] {\n transition: none;\n}\n\n.comimi-page-group {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n box-sizing: border-box;\n}\n\n.comimi-page {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n min-width: 0;\n min-height: 0;\n background: transparent;\n overflow: hidden;\n flex: 0 0 auto;\n}\n\n.comimi-page[data-spread=\"true\"] {\n width: 50%;\n height: 100%;\n}\n\n.comimi-page[data-spread=\"false\"] {\n width: 100%;\n height: 100%;\n}\n\n.comimi-page[data-position=\"left\"] {\n justify-content: flex-end;\n}\n\n.comimi-page[data-position=\"right\"] {\n justify-content: flex-start;\n}\n\n.comimi-page img,\n.comimi-html-page {\n display: block;\n max-width: 100%;\n max-height: 100%;\n width: 100%;\n height: 100%;\n object-fit: contain;\n transform-origin: center center;\n user-select: none;\n -webkit-user-select: none;\n -webkit-user-drag: none;\n -webkit-touch-callout: none;\n}\n\n.comimi-page[data-spread=\"true\"] img,\n.comimi-page[data-spread=\"true\"] .comimi-html-page {\n width: 100%;\n height: 100%;\n}\n\n.comimi-page[data-position=\"left\"] img,\n.comimi-page[data-position=\"left\"] .comimi-html-page {\n object-position: right center;\n}\n\n.comimi-page[data-position=\"right\"] img,\n.comimi-page[data-position=\"right\"] .comimi-html-page {\n object-position: left center;\n}\n\n.comimi-html-page {\n width: min(100%, 960px);\n height: min(100%, 680px);\n background: #fff;\n color: #111;\n overflow: auto;\n}\n\n";
2
+ //# sourceMappingURL=page-stage.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"page-stage.styles.d.ts","sourceRoot":"","sources":["../../src/components/page-stage.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,myDA+F3B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare function renderRabbitMascot(): HTMLElement;
2
+ //# sourceMappingURL=rabbit-mascot.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rabbit-mascot.d.ts","sourceRoot":"","sources":["../../src/components/rabbit-mascot.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,IAAI,WAAW,CAiBhD"}
@@ -0,0 +1,2 @@
1
+ export declare const rabbitMascotStyles = "\n.comimi-rabbit {\n position: absolute;\n width: 50px;\n pointer-events: none;\n}\n\n.comimi-rabbit-svg {\n display: block;\n width: 100%;\n height: auto;\n}\n\n.comimi-controls-dock > .comimi-rabbit {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.comimi-menu-panel > .comimi-rabbit {\n top: 20px;\n right: 20px;\n}\n\n@media (max-width: 767px) {\n .comimi-controls-dock > .comimi-rabbit {\n display: none;\n }\n}\n\n@media (min-width: 768px) {\n .comimi-menu-panel > .comimi-rabbit {\n display: none;\n }\n}\n";
2
+ //# sourceMappingURL=rabbit-mascot.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rabbit-mascot.styles.d.ts","sourceRoot":"","sources":["../../src/components/rabbit-mascot.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,2iBAmC9B,CAAC"}
@@ -0,0 +1,28 @@
1
+ import { I18n } from "../i18n/i18n";
2
+ import type { ViewerState } from "../types";
3
+ import type { RendererCallbacks } from "../renderer/renderer-callbacks";
4
+ export declare class SettingsPanel {
5
+ private callbacks;
6
+ private i18n;
7
+ private root;
8
+ private body;
9
+ private inner;
10
+ private titleEl;
11
+ private localeLabel;
12
+ private coverLabel;
13
+ private directionLabel;
14
+ private animationLabel;
15
+ private intervalLabel;
16
+ private localeSelect;
17
+ private coverToggle;
18
+ private directionSelect;
19
+ private animationToggle;
20
+ private intervalSlider;
21
+ constructor(callbacks: RendererCallbacks, i18n: I18n);
22
+ update(state: ViewerState): void;
23
+ getElement(): HTMLElement;
24
+ private createLabel;
25
+ private section;
26
+ private scheduleHeightUpdate;
27
+ }
28
+ //# sourceMappingURL=settings-panel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"settings-panel.d.ts","sourceRoot":"","sources":["../../src/components/settings-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAoB,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGxE,qBAAa,aAAa;IAmBtB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,IAAI;IAnBd,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,UAAU,CAAiB;IACnC,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,aAAa,CAAiB;IAEtC,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,eAAe,CAAe;IACtC,OAAO,CAAC,cAAc,CAAc;gBAG1B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI;IA0DpB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IA+BhC,UAAU,IAAI,WAAW;IAIzB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,oBAAoB;CAa7B"}
@@ -0,0 +1,2 @@
1
+ export declare const settingsPanelStyles = "\n.comimi-settings-panel {\n position: absolute;\n top: 0;\n right: -16px;\n width: 250px;\n height: 0;\n border-radius: 20px;\n overflow: hidden;\n background: var(--comimi-glass-strong);\n box-shadow: var(--comimi-shadow);\n backdrop-filter: blur(5px);\n opacity: 0;\n transform: translateY(calc(-100% - 8px));\n transition:\n height 0.38s cubic-bezier(0.12, 1.06, 0.56, 1.02),\n opacity 0.38s cubic-bezier(0.12, 1.06, 0.56, 1.02);\n z-index: 10;\n}\n\n.comimi-settings-panel[data-open=\"true\"] {\n opacity: 1;\n height: var(--comimi-settings-height, 460px);\n}\n\n.comimi-settings-panel-body {\n position: relative;\n width: 100%;\n}\n\n.comimi-settings-panel-inner {\n box-sizing: border-box;\n position: relative;\n padding: 16px 20px 22px;\n}\n\n.comimi-settings-panel-title {\n color: #333;\n font-size: 14px;\n font-weight: 700;\n text-align: center;\n}\n\n.comimi-settings-section {\n display: grid;\n row-gap: 8px;\n margin-top: 18px;\n}\n\n.comimi-settings-label {\n color: #333;\n font-size: 12px;\n font-weight: 400;\n}\n\n@media (max-width: 767px) {\n .comimi-settings-panel-body {\n max-height: calc(var(--view-height, 100vh) - 62px - 56px);\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n}\n";
2
+ //# sourceMappingURL=settings-panel.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"settings-panel.styles.d.ts","sourceRoot":"","sources":["../../src/components/settings-panel.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,4vCA8D/B,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { I18n } from "../i18n/i18n";
2
+ export declare function renderSplashScreen(i18n: I18n): HTMLElement;
3
+ //# sourceMappingURL=splash-screen.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"splash-screen.d.ts","sourceRoot":"","sources":["../../src/components/splash-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,CAuB1D"}
@@ -0,0 +1,2 @@
1
+ export declare const splashScreenStyles = "\n.comimi-splash {\n position: absolute;\n inset: 0;\n z-index: 100;\n background-color: #e0e0e0;\n overflow: hidden;\n animation: comimi-splash-clip 1s cubic-bezier(0.82, 0.01, 0.48, 1.02) 1s both;\n pointer-events: none;\n}\n\n.comimi-splash-logo-wrap {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -60%);\n width: 260px;\n aspect-ratio: 290 / 99;\n}\n\n.comimi-splash-logo {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.72);\n width: 360px;\n aspect-ratio: 360 / 99;\n}\n\n.comimi-splash-symbol {\n position: absolute;\n top: 0;\n left: 0;\n width: 113px;\n display: block;\n transform-origin: center bottom;\n}\n\n.comimi-splash-typo-wrap {\n position: absolute;\n right: 7px;\n bottom: 11px;\n width: 229.5px;\n}\n\n.comimi-splash-typo {\n display: block;\n width: 100%;\n overflow: visible;\n}\n\n.comimi-splash-stroke {\n fill: none;\n stroke: #fff;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 10px;\n}\n\n.comimi-splash-mimi {\n transform-origin: 56px 43px;\n}\n\n.comimi-splash-mimi-left {\n animation: comimi-splash-mimi-left 0.4s ease-in-out 0.3s 2 forwards;\n}\n\n.comimi-splash-mimi-right {\n animation: comimi-splash-mimi-right 0.4s ease-in-out 0.3s 2 forwards;\n}\n\n.comimi-splash-eyes {\n transform: translateX(-7px);\n}\n\n.comimi-splash-eye {\n transform-origin: center;\n transform-box: fill-box;\n animation: comimi-splash-eye 0.4s ease-in-out 0.2s forwards;\n}\n\n.comimi-splash-heart {\n --size: 14px;\n position: absolute;\n top: -20px;\n width: var(--size);\n height: var(--size);\n}\n\n.comimi-splash-heart::before,\n.comimi-splash-heart::after {\n content: \"\";\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 150%;\n border-radius: 999px;\n transform-origin: center bottom;\n}\n\n.comimi-splash-heart::before {\n transform: translateX(-32%) rotate(45deg);\n background-color: #eee;\n}\n\n.comimi-splash-heart::after {\n transform: translateX(32%) rotate(-45deg);\n background-color: #fff;\n}\n\n.comimi-splash-heart-1 {\n right: -2px;\n}\n\n.comimi-splash-heart-2 {\n right: 76px;\n}\n\n.comimi-splash-text {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 120%);\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n line-height: 1.45;\n text-align: center;\n white-space: nowrap;\n}\n\n.comimi-splash-text span {\n display: inline-block;\n animation: comimi-splash-dot 0.8s ease-in-out 0s infinite both;\n}\n\n.comimi-splash-text span:nth-child(1) {\n animation-delay: 0s;\n}\n\n.comimi-splash-text span:nth-child(2) {\n animation-delay: 0.15s;\n}\n\n.comimi-splash-text span:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n@keyframes comimi-splash-clip {\n from {\n clip-path: circle(70%);\n }\n to {\n clip-path: circle(0%);\n }\n}\n\n@keyframes comimi-splash-mimi-left {\n from, to {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(20deg);\n }\n}\n\n@keyframes comimi-splash-mimi-right {\n from, to {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(-20deg);\n }\n}\n\n@keyframes comimi-splash-eye {\n from, to {\n transform: scaleY(1);\n }\n 50% {\n transform: scaleY(0.2);\n }\n}\n\n@keyframes comimi-splash-dot {\n from, 50%, to {\n opacity: 1;\n }\n 25% {\n opacity: 0;\n }\n}\n";
2
+ //# sourceMappingURL=splash-screen.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"splash-screen.styles.d.ts","sourceRoot":"","sources":["../../src/components/splash-screen.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,g3GAkM9B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare const tooltipStyles = "\n.comimi-tooltip {\n position: absolute;\n bottom: 0;\n left: 50%;\n padding: 6px 10px;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.5);\n box-shadow: var(--comimi-shadow);\n backdrop-filter: blur(5px);\n color: #333;\n font-size: 12px;\n font-weight: 600;\n line-height: 1.45;\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n opacity: 0;\n transform: translate(-50%, calc(100% + 6px)) scale(0.88);\n transform-origin: center top;\n transition:\n opacity 0.1s ease-in-out,\n transform 0.16s ease-in-out;\n z-index: 5;\n}\n\n@media (hover: hover) {\n .comimi-has-tooltip:hover > .comimi-tooltip {\n opacity: 1;\n transform: translate(-50%, calc(100% + 6px)) scale(1);\n }\n}\n";
2
+ //# sourceMappingURL=tooltip.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tooltip.styles.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,6uBAgCzB,CAAC"}
@@ -0,0 +1,16 @@
1
+ import { I18n } from "../i18n/i18n";
2
+ import type { ViewerState } from "../types";
3
+ import type { RendererCallbacks } from "../renderer/renderer-callbacks";
4
+ export declare class ViewModeSwitcher {
5
+ private callbacks;
6
+ private i18n;
7
+ private root;
8
+ private indicator;
9
+ private tooltip;
10
+ private entries;
11
+ private prevMode?;
12
+ constructor(callbacks: RendererCallbacks, i18n: I18n);
13
+ getElement(): HTMLElement;
14
+ update(state: ViewerState): void;
15
+ }
16
+ //# sourceMappingURL=view-mode-switcher.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"view-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/view-mode-switcher.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAc,WAAW,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAWxE,qBAAa,gBAAgB;IAQzB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,IAAI;IARd,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,QAAQ,CAAC,CAAa;gBAGpB,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI;IAiDpB,UAAU,IAAI,WAAW;IAIzB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;CAuBjC"}
@@ -0,0 +1,2 @@
1
+ export declare const viewModeSwitcherStyles = "\n.comimi-view-switcher {\n position: absolute;\n top: 20px;\n right: 20px;\n display: grid;\n grid-template-columns: repeat(3, 60px);\n width: 180px;\n border-radius: 16px;\n background: var(--comimi-glass);\n box-shadow: var(--comimi-shadow);\n backdrop-filter: blur(5px);\n pointer-events: auto;\n transition:\n transform 0.6s var(--comimi-spring),\n opacity 0.3s linear;\n}\n\n.comimi-view-switcher[data-overlay=\"false\"] {\n transform: translateY(-35px);\n opacity: 0;\n pointer-events: none;\n transition:\n transform 0.3s var(--comimi-spring),\n opacity 0.15s linear;\n}\n\n@media (hover: hover) {\n .comimi-view-switcher:hover {\n transform: scaleX(1.03);\n }\n}\n\n.comimi-view-switcher-indicator {\n position: absolute;\n top: 0;\n left: 0;\n width: 60px;\n height: 100%;\n border-radius: 16px;\n background: #666;\n transition: transform 0.36s var(--comimi-spring);\n}\n\n.comimi-view-switcher-button {\n position: relative;\n display: grid;\n row-gap: 5px;\n justify-items: center;\n align-content: center;\n height: 58px;\n padding: 0;\n border: 0;\n background: transparent;\n color: #666;\n cursor: pointer;\n transition: color 0.2s linear;\n}\n\n.comimi-view-switcher-button[data-selected=\"true\"] {\n color: #fff;\n}\n\n.comimi-view-switcher-icon-wrap {\n width: 20px;\n height: 20px;\n transform-origin: center bottom;\n}\n\n.comimi-view-switcher-icon {\n display: block;\n width: 100%;\n height: 100%;\n color: currentColor;\n}\n\n.comimi-view-switcher-icon-wrap.comimi-pop-animate {\n animation: comimi-pop 0.5s ease-in-out 0.1s both;\n}\n\n.comimi-view-switcher-label {\n color: currentColor;\n font-size: 10px;\n font-weight: 500;\n text-align: center;\n transition: color 0.2s linear;\n}\n\n@media (max-width: 767px) {\n .comimi-view-switcher {\n top: 70px;\n right: auto;\n left: calc(50% - 90px);\n }\n}\n";
2
+ //# sourceMappingURL=view-mode-switcher.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"view-mode-switcher.styles.d.ts","sourceRoot":"","sources":["../../src/components/view-mode-switcher.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,23DA+FlC,CAAC"}
@@ -0,0 +1,5 @@
1
+ export interface ViewerRootOptions {
2
+ className?: string;
3
+ }
4
+ export declare function createViewerRoot({ className }?: ViewerRootOptions): HTMLDivElement;
5
+ //# sourceMappingURL=viewer-root.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"viewer-root.d.ts","sourceRoot":"","sources":["../../src/components/viewer-root.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAE,iBAAsB,GAAG,cAAc,CAOtF"}
@@ -0,0 +1,2 @@
1
+ export declare const viewerRootStyles = "\n.comimi-root {\n --comimi-bg: #fff;\n --comimi-surface: #f7f7f7;\n --comimi-surface-2: #eeeeee;\n --comimi-fg: #333;\n --comimi-muted: #666;\n --comimi-soft: #999;\n --comimi-line: #e0e0e0;\n --comimi-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n --comimi-glass: rgba(255, 255, 255, 0.8);\n --comimi-glass-strong: rgba(255, 255, 255, 0.8);\n --comimi-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n background: var(--comimi-bg);\n color: var(--comimi-fg);\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n position: relative;\n width: calc(100% - 24px * 2);\n max-width: 900px;\n aspect-ratio: 900 / 636;\n margin: 0 auto;\n border-radius: 16px;\n box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.06);\n overflow: hidden;\n user-select: none;\n touch-action: none;\n transition: box-shadow 0.24s ease-out;\n}\n\n.comimi-root:focus {\n outline: none;\n box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.14);\n}\n\n@media (max-width: 767px) {\n .comimi-root {\n max-width: 500px;\n aspect-ratio: 390 / 490;\n }\n}\n\n.comimi-root[data-layout=\"theater\"] {\n width: 100%;\n max-width: none;\n aspect-ratio: auto;\n min-height: 320px;\n margin: 0;\n border-radius: 0;\n box-shadow: none;\n}\n\n.comimi-root[data-layout=\"browserFullscreen\"],\n.comimi-root[data-layout=\"nativeFullscreen\"] {\n position: fixed;\n inset: 0;\n z-index: 999;\n width: 100vw;\n height: 100dvh;\n max-width: none;\n aspect-ratio: auto;\n margin: 0;\n border-radius: 0;\n box-shadow: none;\n}\n\n.comimi-resize-handle {\n position: relative;\n width: 100%;\n height: 20px;\n background: #fff;\n cursor: ns-resize;\n touch-action: none;\n}\n\n.comimi-resize-handle::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 3px;\n border-radius: 999px;\n background: #bbb;\n transition:\n width 0.36s cubic-bezier(0.34, 1.56, 0.64, 1),\n height 0.36s cubic-bezier(0.34, 1.56, 0.64, 1),\n background-color 0.2s linear;\n}\n\n@media (hover: hover) {\n .comimi-resize-handle:hover::after {\n width: 52px;\n height: 5px;\n background: #888;\n }\n}\n\n";
2
+ //# sourceMappingURL=viewer-root.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"viewer-root.styles.d.ts","sourceRoot":"","sources":["../../src/components/viewer-root.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,spEAkG5B,CAAC"}