@magicpages/kalotyp-ui 0.1.2 → 0.2.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 (28) hide show
  1. package/dist/icons.d.ts +1 -1
  2. package/dist/icons.d.ts.map +1 -1
  3. package/dist/index.js +11350 -928
  4. package/dist/index.js.map +1 -1
  5. package/dist/kalotyp-ui.css +1 -1
  6. package/dist/plugins/annotate/coord-inputs.d.ts +10 -2
  7. package/dist/plugins/annotate/coord-inputs.d.ts.map +1 -1
  8. package/dist/plugins/annotate/emoji-data.d.ts +27 -0
  9. package/dist/plugins/annotate/emoji-data.d.ts.map +1 -0
  10. package/dist/plugins/annotate/emoji-images.d.ts +47 -0
  11. package/dist/plugins/annotate/emoji-images.d.ts.map +1 -0
  12. package/dist/plugins/annotate/emoji-picker.d.ts +29 -0
  13. package/dist/plugins/annotate/emoji-picker.d.ts.map +1 -0
  14. package/dist/plugins/annotate/fonts-loader.d.ts +22 -0
  15. package/dist/plugins/annotate/fonts-loader.d.ts.map +1 -0
  16. package/dist/plugins/annotate/mount.d.ts.map +1 -1
  17. package/dist/plugins/annotate/panel.d.ts +20 -1
  18. package/dist/plugins/annotate/panel.d.ts.map +1 -1
  19. package/dist/plugins/annotate/plugin.d.ts.map +1 -1
  20. package/dist/plugins/annotate/render.d.ts +3 -3
  21. package/dist/plugins/annotate/render.d.ts.map +1 -1
  22. package/dist/plugins/annotate/selection.d.ts +29 -1
  23. package/dist/plugins/annotate/selection.d.ts.map +1 -1
  24. package/dist/plugins/annotate/text-editor.d.ts +6 -2
  25. package/dist/plugins/annotate/text-editor.d.ts.map +1 -1
  26. package/dist/plugins/annotate/tools.d.ts +11 -0
  27. package/dist/plugins/annotate/tools.d.ts.map +1 -1
  28. package/package.json +2 -2
package/dist/kalotyp-ui.css CHANGED
@@ -1,2 +1,2 @@
1
- .pintura-editor{--color-background:255, 255, 255;--color-foreground:21, 23, 26;--font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;--editor-modal-border-radius:0px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--kalotyp-success:48, 207, 67;--kalotyp-border:rgba(var(--color-foreground), .16);--kalotyp-border-strong:rgba(var(--color-foreground), .36);--kalotyp-muted:rgba(var(--color-foreground), .7);--kalotyp-soft:rgba(var(--color-foreground), .08);--kalotyp-track:rgba(var(--color-foreground), .1);--kalotyp-radius:6px;--kalotyp-radius-lg:10px;--kalotyp-control-height:36px;--kalotyp-text-size:13px;--kalotyp-transition:all .2s ease;z-index:2147483646;background:rgb(var(--color-background));font-family:var(--font-family);color:rgb(var(--color-foreground));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;display:flex;position:fixed;inset:0}html:not(.dark) .pintura-editor{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-background:255, 255, 255!important;--color-foreground:21, 23, 26!important}html.dark .pintura-editor{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-background:21, 23, 26!important;--color-foreground:244, 245, 246!important}.PinturaModal{background:rgb(var(--color-background));border-radius:var(--editor-modal-border-radius);overflow:hidden;flex:auto!important;width:100%!important;height:100%!important;min-height:0!important;display:flex!important;position:relative!important}.kalotyp-editor:focus,.kalotyp-editor:focus-visible{outline:none}.kalotyp-button-prefs{border-radius:var(--kalotyp-radius);width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;z-index:2;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;font-size:16px;line-height:1;display:inline-flex;position:absolute;top:18px;right:56px}.kalotyp-button-prefs svg{width:16px;height:16px}.kalotyp-button-prefs:hover{background:var(--kalotyp-soft);color:rgb(var(--color-foreground))}.kalotyp-button-prefs:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-button-close{border-radius:var(--kalotyp-radius);width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;z-index:2;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;font-size:16px;line-height:1;display:inline-flex;position:absolute;top:18px;right:14px}.kalotyp-button-close svg{width:16px;height:16px}.kalotyp-button-close:hover{background:var(--kalotyp-soft);color:rgb(var(--color-foreground))}.kalotyp-button-close:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-root{grid-template-rows:auto minmax(0,1fr) auto!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;height:100%!important;min-height:0!important;display:grid!important}.kalotyp-root[data-env~=landscape]{grid-template-rows:auto 1fr auto}.kalotyp-nav-tools{border-bottom:1px solid var(--kalotyp-border);flex:none;align-items:center;gap:8px;min-height:56px;padding:14px 180px 14px 24px;display:flex}.kalotyp-history-controls{z-index:2;align-items:center;gap:4px;display:inline-flex;position:absolute;top:18px;right:100px}.kalotyp-history-button{width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.kalotyp-history-button svg{width:16px;height:16px}.kalotyp-history-button:hover:not(:disabled){color:rgb(var(--color-foreground));background:var(--kalotyp-track)}.kalotyp-history-button:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-history-button:disabled{opacity:.35;cursor:not-allowed}.kalotyp-main{background:rgb(var(--color-background));gap:12px;padding:12px 16px 0;flex-direction:column!important;min-height:0!important;display:flex!important}.kalotyp-stage{border-radius:var(--kalotyp-radius);background:rgba(var(--color-foreground), .06);flex:1 1 0!important;min-height:0!important;position:relative!important}.kalotyp-util-footer{border-top:1px solid var(--kalotyp-border);justify-content:flex-end;align-items:center;gap:8px;padding:14px 24px;display:flex}.pintura-editor .kalotyp-root>.kalotyp-nav-tools{padding-bottom:14px!important}.pintura-editor .kalotyp-root .kalotyp-stage{max-width:none!important;margin:0!important}.pintura-editor .kalotyp-root[data-env~=landscape] .kalotyp-util-main,.pintura-editor .kalotyp-root[data-env~=landscape] .kalotyp-util-footer{padding-right:24px!important}.kalotyp-export-group{height:var(--kalotyp-control-height);border:1px solid rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);background:rgb(var(--color-foreground));isolation:isolate;transition:var(--kalotyp-transition);align-items:stretch;display:inline-flex;overflow:hidden}.kalotyp-export-group:focus-within{box-shadow:var(--kalotyp-focus-shadow)}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-export{font-family:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;justify-content:center;align-items:center;line-height:1;transition:background .18s;height:100%!important;color:rgb(var(--color-background))!important;opacity:1!important;background:0 0!important;border:0!important;border-radius:0!important;padding:0 18px!important;font-weight:700!important;display:inline-flex!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-export:hover{background:rgba(var(--color-background), .12)!important;color:rgb(var(--color-background))!important;opacity:1!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-export:focus-visible{outline:none;background:rgba(var(--color-background), .12)!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-export:disabled{cursor:not-allowed;opacity:.4!important}.kalotyp-button-inner{display:inline-block}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings{cursor:pointer;width:36px;box-shadow:inset 1px 0 0 rgba(var(--color-background), .22);justify-content:center;align-items:center;padding:0;transition:background .18s;height:100%!important;color:rgb(var(--color-background))!important;opacity:1!important;background:0 0!important;border:0!important;border-radius:0!important;display:inline-flex!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings:hover{background:rgba(var(--color-background), .12)!important;color:rgb(var(--color-background))!important;opacity:1!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings:focus-visible{outline:none;background:rgba(var(--color-background), .12)!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings:disabled{cursor:not-allowed;opacity:.4!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings[aria-expanded=true]{background:rgba(var(--color-background), .18)!important}.pintura-editor .kalotyp-root .kalotyp-export-group:hover{background:rgba(var(--color-foreground), .92);border-color:rgba(var(--color-foreground), .92)}.kalotyp-visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.pintura-editor{--kalotyp-focus-ring:rgb(var(--color-foreground));--kalotyp-focus-halo:rgb(var(--color-background));--kalotyp-focus-shadow:0 0 0 2px var(--kalotyp-focus-halo), 0 0 0 4px var(--kalotyp-focus-ring)}.kalotyp-nested-overlay{z-index:50;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.kalotyp-nested-overlay--modal{background:rgba(var(--color-foreground), .32)}.kalotyp-nested-overlay--popover{pointer-events:auto;background:0 0}.kalotyp-nested-surface{background:rgb(var(--color-background));color:rgb(var(--color-foreground));border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius-lg);flex-direction:column;min-width:280px;max-width:min(520px,100% - 32px);max-height:calc(100% - 32px);display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000002e,0 2px 6px #00000014}.kalotyp-nested-surface:focus-visible{outline:none}.kalotyp-nested-header{border-bottom:1px solid var(--kalotyp-border);justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.kalotyp-nested-title{margin:0;font-size:14px;font-weight:600;line-height:1.2}.kalotyp-nested-close{border-radius:var(--kalotyp-radius);width:28px;height:28px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;font-size:22px;line-height:1;display:inline-flex}.kalotyp-nested-close:hover{background:var(--kalotyp-soft);color:rgb(var(--color-foreground))}.kalotyp-nested-close:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-nested-body{padding:16px 14px;overflow-y:auto}.kalotyp-stage-container{-webkit-user-select:none;user-select:none;touch-action:none;background:0 0;position:absolute;inset:0;overflow:hidden}.kalotyp-stage-status{text-align:center;pointer-events:none;color:rgba(var(--color-foreground), .7);justify-content:center;align-items:center;padding:12px 18px;font-size:14px;display:flex;position:absolute;inset:50% 0 auto}.kalotyp-stage-image,.kalotyp-stage-overlay{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.kalotyp-stage-overlay{z-index:1}.kalotyp-stage-body{z-index:2;cursor:move;touch-action:none;position:absolute}.kalotyp-handles{z-index:3;pointer-events:none;position:absolute;inset:0}.kalotyp-corner-anchor{pointer-events:none;width:0;height:0;position:absolute}.kalotyp-handle{pointer-events:auto;touch-action:none;background:0 0;border:none;margin:0;padding:0;position:absolute}.kalotyp-handle[data-shape=circle]{background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));border-radius:50%;width:12px;height:12px;top:-6px;left:-6px;box-shadow:0 1px 3px #0000002e}.kalotyp-handle[data-shape=circle][data-direction=tl],.kalotyp-handle[data-shape=circle][data-direction=br]{cursor:nwse-resize}.kalotyp-handle[data-shape=circle][data-direction=tr],.kalotyp-handle[data-shape=circle][data-direction=bl]{cursor:nesw-resize}.kalotyp-handle[data-shape=edge][data-direction=t],.kalotyp-handle[data-shape=edge][data-direction=b]{cursor:ns-resize;height:6px;margin-top:-3px}.kalotyp-handle[data-shape=edge][data-direction=l],.kalotyp-handle[data-shape=edge][data-direction=r]{cursor:ew-resize;width:6px;margin-left:-3px}.kalotyp-handle:focus-visible{outline:2px solid var(--kalotyp-focus-ring);outline-offset:2px;box-shadow:0 0 0 4px var(--kalotyp-focus-halo)}.kalotyp-crop-panel{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.kalotyp-preset-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.kalotyp-preset-button{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-items:center;padding:0 12px;display:inline-flex}.kalotyp-preset-button:hover{background:var(--kalotyp-soft);border-color:var(--kalotyp-border-strong)}.kalotyp-preset-button:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-preset-button[aria-checked=true]{background:rgb(var(--color-foreground));border-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.kalotyp-crop-dims{flex-wrap:wrap;justify-content:center;align-items:end;gap:8px;width:100%;margin-top:6px;display:flex}.kalotyp-crop-dims-field{flex-direction:column;gap:4px;display:flex}.kalotyp-crop-dims-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-crop-dims-input{width:80px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 10px}.kalotyp-crop-dims-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-util-nav{background:var(--kalotyp-track);border-radius:var(--kalotyp-radius-lg);align-items:center;gap:2px;padding:4px;display:inline-flex}.kalotyp-util-nav-button{height:28px;color:var(--kalotyp-muted);font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0 14px;font-weight:500;transition:color .2s,background .2s,border-color .2s,box-shadow .2s;display:inline-flex;position:relative}.kalotyp-util-nav-button:hover{color:rgb(var(--color-foreground))}.kalotyp-util-nav-button:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-util-nav-button[aria-selected=true]{background:rgb(var(--color-background));border-color:var(--kalotyp-border);color:rgb(var(--color-foreground));font-weight:600;box-shadow:0 1px 2px #0000000a}.kalotyp-util-nav-button:disabled{opacity:.4;cursor:not-allowed}.kalotyp-preview-canvas{pointer-events:none}.kalotyp-flip-panel,.kalotyp-rotate-panel,.kalotyp-resize-panel{width:100%;font-size:var(--kalotyp-text-size);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.kalotyp-rotate-row{align-items:center;gap:8px;display:flex}.kalotyp-resize-row{align-items:end;gap:8px;display:flex}.kalotyp-util-main{border-top:1px solid var(--kalotyp-border);background:rgb(var(--color-background));flex:none;justify-content:center;align-items:center;min-height:88px;padding:18px 24px;display:flex}.kalotyp-flip-panel{justify-content:center;gap:8px;display:flex}.kalotyp-toggle-button{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-items:center;padding:0 14px;display:inline-flex}.kalotyp-toggle-button:hover{border-color:var(--kalotyp-border-strong)}.kalotyp-toggle-button:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-toggle-button[aria-pressed=true]{background:rgb(var(--color-foreground));border-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.kalotyp-rotate-slider-label{font-size:var(--kalotyp-text-size);color:var(--kalotyp-muted);min-width:72px}.kalotyp-rotate-slider{cursor:ew-resize;appearance:none;background:0 0;flex:1;min-width:220px;height:4px}.kalotyp-rotate-slider::-webkit-slider-runnable-track{background:var(--kalotyp-border);border-radius:999px;height:4px}.kalotyp-rotate-slider::-moz-range-track{background:var(--kalotyp-border);border-radius:999px;height:4px}.kalotyp-rotate-slider::-webkit-slider-thumb{appearance:none;background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));cursor:ew-resize;border-radius:50%;width:16px;height:16px;margin-top:-6px;box-shadow:0 1px 3px #0003}.kalotyp-rotate-slider::-moz-range-thumb{background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));cursor:ew-resize;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}.kalotyp-rotate-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px rgb(var(--color-background)), 0 0 0 5px rgb(var(--color-foreground))}.kalotyp-rotate-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px rgb(var(--color-background)), 0 0 0 5px rgb(var(--color-foreground))}.kalotyp-rotate-input{width:72px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 8px}.kalotyp-rotate-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-rotate-input-group{align-items:center;gap:4px;display:inline-flex}.kalotyp-rotate-suffix{font-size:var(--kalotyp-text-size);color:var(--kalotyp-muted);font-variant-numeric:tabular-nums}.kalotyp-rotate-reset{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;padding:0 12px}.kalotyp-rotate-reset:hover{border-color:var(--kalotyp-border-strong)}.kalotyp-rotate-reset:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-quarter-button{width:36px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));cursor:pointer;transition:var(--kalotyp-transition);background:0 0;padding:0;font-size:18px;line-height:1}.kalotyp-quarter-button:hover{background:var(--kalotyp-soft);border-color:var(--kalotyp-border-strong)}.kalotyp-quarter-button:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-resize-field{flex-direction:column;gap:4px;display:flex}.kalotyp-resize-field-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-resize-input{width:92px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 10px}.kalotyp-resize-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-resize-lock{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kalotyp-resize-lock:hover{border-color:var(--kalotyp-border-strong);color:rgb(var(--color-foreground))}.kalotyp-resize-lock:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-resize-lock[aria-pressed=true]{color:rgb(var(--color-foreground));border-color:var(--kalotyp-border-strong)}.kalotyp-resize-dims{align-items:end}.kalotyp-resize-dims .kalotyp-resize-lock{margin-bottom:2px}.kalotyp-resize-summary{font-size:var(--kalotyp-text-size);color:rgb(var(--color-foreground));font-variant-numeric:tabular-nums}.kalotyp-resize-helper{color:var(--kalotyp-muted);font-size:12px}.kalotyp-annotate-stage{-webkit-user-select:none;user-select:none;touch-action:none;background:0 0;position:absolute;inset:0;overflow:hidden}.kalotyp-annotate-image,.kalotyp-annotate-shapes,.kalotyp-annotate-live{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.kalotyp-annotate-shapes{z-index:1}.kalotyp-annotate-live{z-index:2}.kalotyp-annotate-hit{z-index:3;cursor:crosshair;position:absolute;inset:0}.kalotyp-annotate-stage[data-tool=select] .kalotyp-annotate-hit{cursor:default}.kalotyp-annotate-stage[data-tool=text] .kalotyp-annotate-hit{cursor:text}.kalotyp-annotate-handles{z-index:4;pointer-events:none;position:absolute;inset:0}.kalotyp-annotate-handle{border:2px solid rgb(var(--color-background));background:rgb(var(--color-foreground));cursor:pointer;pointer-events:auto;touch-action:none;border-radius:50%;width:12px;height:12px;margin-top:-6px;margin-left:-6px;padding:0;font-size:0;position:absolute;box-shadow:0 1px 2px #0006}.kalotyp-annotate-handle:focus-visible{outline:2px solid var(--kalotyp-focus-ring);outline-offset:2px;box-shadow:0 0 0 4px var(--kalotyp-focus-halo)}.kalotyp-annotate-handle[data-direction=tl],.kalotyp-annotate-handle[data-direction=br]{cursor:nwse-resize}.kalotyp-annotate-handle[data-direction=tr],.kalotyp-annotate-handle[data-direction=bl]{cursor:nesw-resize}.kalotyp-annotate-handle[data-direction=t],.kalotyp-annotate-handle[data-direction=b]{cursor:ns-resize}.kalotyp-annotate-handle[data-direction=l],.kalotyp-annotate-handle[data-direction=r]{cursor:ew-resize}.kalotyp-annotate-text-overlay{z-index:5;pointer-events:none;position:absolute;inset:0}.kalotyp-annotate-text-editor{pointer-events:auto;background:rgba(var(--color-background), .85);border:1px dashed rgba(var(--color-foreground), .55);white-space:pre-wrap;word-break:break-word;min-width:60px;min-height:1em;caret-color:rgb(var(--color-foreground));border-radius:4px;outline:none;margin-top:-4px;margin-left:-6px;padding:4px 6px;line-height:1.2;position:absolute}.kalotyp-annotate-panel{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.kalotyp-annotate-toolbar{background:var(--kalotyp-track);border-radius:var(--kalotyp-radius-lg);align-items:center;gap:4px;padding:4px;display:inline-flex}.kalotyp-annotate-tool{width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:16px;font-weight:500;display:inline-flex}.kalotyp-annotate-tool svg{width:18px;height:18px;display:block}.kalotyp-annotate-tool:hover{color:rgb(var(--color-foreground))}.kalotyp-annotate-tool:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-tool[aria-pressed=true]{background:rgb(var(--color-background));border-color:var(--kalotyp-border);color:rgb(var(--color-foreground));box-shadow:0 1px 2px #0000000a}.kalotyp-annotate-style-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:inline-flex}.kalotyp-annotate-swatches{align-items:center;gap:4px;display:inline-flex}.kalotyp-annotate-swatch{border:2px solid var(--kalotyp-border);background:var(--kalotyp-swatch,currentColor);cursor:pointer;width:22px;height:22px;transition:var(--kalotyp-transition);border-radius:50%;padding:0}.kalotyp-annotate-swatch:hover{transform:scale(1.08)}.kalotyp-annotate-swatch:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-swatch[aria-checked=true]{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 1px rgb(var(--color-background)) inset}.kalotyp-annotate-hex{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));background-image:linear-gradient(var(--kalotyp-hex-swatch,#000), var(--kalotyp-hex-swatch,#000));width:116px;height:28px;color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-transform:lowercase;font-variant-numeric:tabular-nums;background-position:6px;background-repeat:no-repeat;background-size:18px 18px;padding:0 8px 0 32px}.kalotyp-annotate-hex:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-stroke-label{font-size:var(--kalotyp-text-size);color:var(--kalotyp-muted)}.kalotyp-annotate-stroke{width:120px}.kalotyp-annotate-delete{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.kalotyp-annotate-delete svg{width:14px;height:14px}.kalotyp-annotate-delete:hover:not(:disabled){background:var(--kalotyp-soft);border-color:var(--kalotyp-border-strong)}.kalotyp-annotate-delete:disabled{opacity:.4;cursor:not-allowed}.kalotyp-annotate-insert{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.kalotyp-annotate-insert svg{width:14px;height:14px}.kalotyp-annotate-insert:hover:not(:disabled){background:var(--kalotyp-soft);border-color:var(--kalotyp-border-strong)}.kalotyp-annotate-insert:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-insert:disabled{opacity:.4;cursor:not-allowed}.kalotyp-annotate-coords{flex-wrap:wrap;justify-content:center;align-items:end;gap:8px;width:100%;margin-top:6px;display:flex}.kalotyp-annotate-coords[hidden]{display:none}.kalotyp-annotate-coords-field{flex-direction:column;gap:4px;display:flex}.kalotyp-annotate-coords-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-annotate-coords-input{width:80px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 10px}.kalotyp-annotate-coords-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-finetune-panel{width:100%;max-width:640px;font-size:var(--kalotyp-text-size);grid-template-columns:1fr;gap:6px;margin:0 auto;display:grid}.kalotyp-util-main:has(.kalotyp-finetune-panel){justify-content:center;align-items:stretch;padding-block:16px}.kalotyp-finetune-row{align-items:center;gap:10px;height:32px;display:flex}.kalotyp-finetune-label{width:84px;color:var(--kalotyp-muted);font-size:var(--kalotyp-text-size);text-align:right;flex:none;font-weight:500}.kalotyp-finetune-slider{cursor:ew-resize;appearance:none;background:0 0;flex:1;min-width:160px;height:4px}.kalotyp-finetune-slider::-webkit-slider-runnable-track{background:var(--kalotyp-border);border-radius:999px;height:4px}.kalotyp-finetune-slider::-moz-range-track{background:var(--kalotyp-border);border-radius:999px;height:4px}.kalotyp-finetune-slider::-webkit-slider-thumb{appearance:none;background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));cursor:ew-resize;border-radius:50%;width:16px;height:16px;margin-top:-6px;box-shadow:0 1px 3px #0003}.kalotyp-finetune-slider::-moz-range-thumb{background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));cursor:ew-resize;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}.kalotyp-finetune-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px rgb(var(--color-background)), 0 0 0 5px rgb(var(--color-foreground))}.kalotyp-finetune-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px rgb(var(--color-background)), 0 0 0 5px rgb(var(--color-foreground))}.kalotyp-finetune-input{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));width:60px;height:28px;color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;flex:none;padding:0 8px}.kalotyp-finetune-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-finetune-row-reset{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);width:28px;height:28px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;flex:none;padding:0;font-size:14px;line-height:1}.kalotyp-finetune-row-reset:hover{border-color:var(--kalotyp-border-strong);color:rgb(var(--color-foreground))}.kalotyp-finetune-row-reset:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-finetune-reset-all{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);height:28px;color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-self:flex-end;margin-top:4px;padding:0 12px}.kalotyp-finetune-reset-all:hover{border-color:var(--kalotyp-border-strong)}.kalotyp-finetune-reset-all:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-filter-panel{width:100%;max-width:100%;font-size:var(--kalotyp-text-size);flex-direction:column;gap:8px;margin:0 auto;display:flex}.kalotyp-util-main:has(.kalotyp-filter-panel){justify-content:center;align-items:stretch;padding-block:12px}.kalotyp-filter-strip{scrollbar-width:thin;-webkit-overflow-scrolling:touch;justify-content:flex-start;gap:12px;padding:4px 16px;display:flex;overflow:auto hidden}@media (min-width:720px){.kalotyp-filter-strip{justify-content:center}}.kalotyp-filter-thumb{cursor:pointer;font:inherit;color:rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);transition:var(--kalotyp-transition);background:0 0;border:0;flex-direction:column;flex:none;align-items:center;gap:6px;padding:4px;display:flex}.kalotyp-filter-thumb:hover{background:var(--kalotyp-soft)}.kalotyp-filter-thumb:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-filter-thumb-image{border:2px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:var(--kalotyp-track);transition:var(--kalotyp-transition);line-height:0;display:block;overflow:hidden}.kalotyp-filter-thumb-canvas{width:100%;height:100%;display:block}.kalotyp-filter-thumb-label{color:var(--kalotyp-muted);text-align:center;font-variant-numeric:tabular-nums;min-height:14px;font-size:12px;line-height:1.2}.kalotyp-filter-thumb--active .kalotyp-filter-thumb-image{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 3px rgba(var(--color-foreground), .18)}.kalotyp-filter-thumb--active .kalotyp-filter-thumb-label{color:rgb(var(--color-foreground));font-weight:600}.kalotyp-filter-thumb-check{background:rgb(var(--color-foreground));width:18px;height:18px;color:rgb(var(--color-background));pointer-events:none;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;line-height:1;display:none;position:absolute;top:4px;right:4px}.kalotyp-filter-thumb-image{position:relative}.kalotyp-filter-thumb--active .kalotyp-filter-thumb-check{display:inline-flex}.kalotyp-redact-stage{-webkit-user-select:none;user-select:none;touch-action:none;background:0 0;position:absolute;inset:0;overflow:hidden}.kalotyp-redact-image,.kalotyp-redact-regions,.kalotyp-redact-live{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.kalotyp-redact-regions{z-index:1}.kalotyp-redact-live{z-index:2}.kalotyp-redact-hit{z-index:3;cursor:crosshair;position:absolute;inset:0}.kalotyp-redact-handles{z-index:4;pointer-events:none;position:absolute;inset:0}.kalotyp-redact-handle{border:2px solid rgb(var(--color-background));background:rgb(var(--color-foreground));cursor:pointer;pointer-events:auto;touch-action:none;border-radius:50%;width:12px;height:12px;margin-top:-6px;margin-left:-6px;padding:0;font-size:0;position:absolute;box-shadow:0 1px 2px #0006}.kalotyp-redact-handle:focus-visible{outline:2px solid var(--kalotyp-focus-ring);outline-offset:2px;box-shadow:0 0 0 4px var(--kalotyp-focus-halo)}.kalotyp-redact-handle[data-direction=tl],.kalotyp-redact-handle[data-direction=br]{cursor:nwse-resize}.kalotyp-redact-handle[data-direction=tr],.kalotyp-redact-handle[data-direction=bl]{cursor:nesw-resize}.kalotyp-redact-handle[data-direction=t],.kalotyp-redact-handle[data-direction=b]{cursor:ns-resize}.kalotyp-redact-handle[data-direction=l],.kalotyp-redact-handle[data-direction=r]{cursor:ew-resize}.kalotyp-redact-panel{width:100%;max-width:720px;font-size:var(--kalotyp-text-size);flex-direction:column;gap:10px;margin:0 auto;display:flex}.kalotyp-redact-toolbar{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.kalotyp-redact-mode{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);padding:0 14px}.kalotyp-redact-mode:hover{background:var(--kalotyp-soft)}.kalotyp-redact-mode:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-redact-mode--active{box-shadow:0 0 0 1px rgb(var(--color-foreground)) inset;font-weight:600;background:rgb(var(--color-foreground))!important;color:rgb(var(--color-background))!important;border-color:rgb(var(--color-foreground))!important}.kalotyp-redact-style-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.kalotyp-redact-color-group,.kalotyp-redact-button-group{flex:none;align-items:center;gap:8px;display:inline-flex}.kalotyp-redact-color-hint{text-align:center;color:var(--kalotyp-muted);flex:100%;font-size:12px;font-style:italic}.kalotyp-redact-color-hint[hidden]{display:none}.kalotyp-redact-color{width:36px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);cursor:pointer;background:0 0;padding:0}.kalotyp-redact-color:disabled{opacity:.4;cursor:not-allowed}.kalotyp-redact-hex{width:100px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);font-variant-numeric:tabular-nums;text-align:left;padding:0 10px}.kalotyp-redact-hex:disabled{opacity:.4;cursor:not-allowed}.kalotyp-redact-hex:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-redact-insert,.kalotyp-redact-delete{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);align-items:center;gap:6px;padding:0 14px;display:inline-flex}.kalotyp-redact-insert:hover,.kalotyp-redact-delete:hover{background:var(--kalotyp-soft)}.kalotyp-redact-insert:focus-visible,.kalotyp-redact-delete:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-redact-delete:disabled{opacity:.5;cursor:not-allowed}.kalotyp-redact-coords{flex-wrap:wrap;justify-content:center;align-items:end;gap:8px;width:100%;margin-top:6px;display:flex}.kalotyp-redact-coords[hidden]{display:none}.kalotyp-redact-coords-field{flex-direction:column;gap:4px;display:flex}.kalotyp-redact-coords-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-redact-coords-input{width:80px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 10px}.kalotyp-redact-coords-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-frame-panel{width:100%;max-width:100%;font-size:var(--kalotyp-text-size);flex-direction:column;gap:8px;margin:0 auto;display:flex}.kalotyp-util-main:has(.kalotyp-frame-panel){justify-content:center;align-items:stretch;padding-block:12px}.kalotyp-frame-strip-wrap{display:block}.kalotyp-frame-strip{scrollbar-width:thin;-webkit-overflow-scrolling:touch;justify-content:flex-start;gap:12px;padding:4px 16px;display:flex;overflow:auto hidden}@media (min-width:720px){.kalotyp-frame-strip{justify-content:center}}.kalotyp-frame-thumb{cursor:pointer;font:inherit;color:rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);transition:var(--kalotyp-transition);background:0 0;border:0;flex-direction:column;flex:none;align-items:center;gap:6px;padding:4px;display:flex}.kalotyp-frame-thumb:hover{background:var(--kalotyp-soft)}.kalotyp-frame-thumb:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-frame-thumb-image{border:2px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:var(--kalotyp-track);transition:var(--kalotyp-transition);justify-content:center;align-items:center;width:80px;height:60px;line-height:0;display:flex;position:relative;overflow:hidden}.kalotyp-frame-thumb-canvas{max-width:100%;max-height:100%;display:block}.kalotyp-frame-thumb-label{color:var(--kalotyp-muted);text-align:center;font-variant-numeric:tabular-nums;min-height:14px;font-size:12px;line-height:1.2}.kalotyp-frame-thumb--active .kalotyp-frame-thumb-image{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 3px rgba(var(--color-foreground), .18)}.kalotyp-frame-thumb--active .kalotyp-frame-thumb-label{color:rgb(var(--color-foreground));font-weight:600}.kalotyp-frame-thumb-check{background:rgb(var(--color-foreground));width:18px;height:18px;color:rgb(var(--color-background));pointer-events:none;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;line-height:1;display:none;position:absolute;top:4px;right:4px}.kalotyp-frame-thumb--active .kalotyp-frame-thumb-check{display:inline-flex}.kalotyp-frame-color-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.kalotyp-frame-color-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-frame-color-hint{text-align:center;color:var(--kalotyp-muted);flex:100%;font-size:12px;font-style:italic}.kalotyp-frame-color-hint[hidden]{display:none}.kalotyp-frame-color{width:36px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);cursor:pointer;background:0 0;padding:0}.kalotyp-frame-color:disabled{opacity:.4;cursor:not-allowed}.kalotyp-frame-hex{width:100px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);font-variant-numeric:tabular-nums;text-align:left;padding:0 10px}.kalotyp-frame-hex:disabled{opacity:.4;cursor:not-allowed}.kalotyp-frame-hex:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-frame-preview-container{position:absolute;inset:0}.kalotyp-frame-preview-canvas{position:absolute}.kalotyp-nested-overlay--popover .kalotyp-nested-surface.kalotyp-output-popover{min-width:280px;max-width:320px}.kalotyp-output-popover-body{flex-direction:column;gap:10px;display:flex}.kalotyp-output-row{grid-template-columns:64px 1fr auto;align-items:center;gap:10px;display:grid}.kalotyp-output-row-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-output-format{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);padding:0 8px}.kalotyp-output-format:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-output-quality{width:100%;accent-color:rgb(var(--color-foreground))}.kalotyp-output-quality:focus-visible{box-shadow:var(--kalotyp-focus-shadow);border-radius:var(--kalotyp-radius);outline:none}.kalotyp-output-quality-readout{font-size:var(--kalotyp-text-size);color:var(--kalotyp-muted);font-variant-numeric:tabular-nums;text-align:right;min-width:28px}.kalotyp-output-hint{color:var(--kalotyp-muted);margin:0 0 4px 74px;font-size:12px}.kalotyp-output-summary{font-size:var(--kalotyp-text-size);color:rgb(var(--color-foreground));margin:4px 0 0;font-weight:500}.kalotyp-output-metadata-row{font-size:var(--kalotyp-text-size);cursor:pointer;align-items:center;gap:8px;margin:6px 0 0;display:flex}.kalotyp-output-metadata-checkbox{accent-color:rgb(var(--color-foreground));width:16px;height:16px;margin:0}.kalotyp-output-metadata-text{line-height:1.3}.kalotyp-output-metadata-hint{color:var(--kalotyp-muted);min-height:16px;margin:2px 0 0;padding-left:24px;font-size:11px;font-style:italic;line-height:1.4}.kalotyp-output-footer{border-top:1px solid var(--kalotyp-border);justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;padding-top:12px;display:flex}.kalotyp-output-done{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;padding:0 14px}.kalotyp-output-done:hover{background:var(--kalotyp-soft)}.kalotyp-output-done:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-output-save{height:var(--kalotyp-control-height);border:1px solid rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);background:rgb(var(--color-foreground));color:rgb(var(--color-background));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);padding:0 16px;font-weight:600}.kalotyp-output-save:hover{background:rgba(var(--color-foreground), .88);border-color:rgba(var(--color-foreground), .88)}.kalotyp-output-save:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-output-save:disabled{opacity:.4;cursor:not-allowed}.kalotyp-nested-overlay--modal .kalotyp-nested-surface.kalotyp-preferences-modal{min-width:360px;max-width:460px}.kalotyp-preferences-body{flex-direction:column;gap:18px;display:flex}.kalotyp-preferences-section{flex-direction:column;gap:10px;display:flex}.kalotyp-preferences-section h4{letter-spacing:.02em;text-transform:uppercase;color:var(--kalotyp-muted);margin:0;font-size:13px;font-weight:600}.kalotyp-preferences-toggle{font-size:var(--kalotyp-text-size);cursor:pointer;align-items:center;gap:10px;display:flex}.kalotyp-preferences-toggle input[type=checkbox]{accent-color:rgb(var(--color-foreground));width:16px;height:16px}.kalotyp-preferences-footer{border-top:1px solid var(--kalotyp-border);justify-content:space-between;align-items:center;gap:8px;margin-top:4px;padding-top:12px;display:flex}.kalotyp-preferences-reset{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:var(--kalotyp-muted);font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;background:0 0;padding:0 14px}.kalotyp-preferences-reset:hover{background:var(--kalotyp-soft);color:rgb(var(--color-foreground))}.kalotyp-preferences-done{height:var(--kalotyp-control-height);border:1px solid rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);background:rgb(var(--color-foreground));color:rgb(var(--color-background));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;padding:0 16px;font-weight:600}.kalotyp-preferences-done:hover{background:rgba(var(--color-foreground), .88)}.kalotyp-preferences-done:focus-visible,.kalotyp-preferences-reset:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-nested-overlay--modal .kalotyp-nested-surface.kalotyp-cheatsheet-modal{min-width:380px;max-width:520px;max-height:80vh;overflow-y:auto}.kalotyp-cheatsheet-body{flex-direction:column;gap:18px;display:flex}.kalotyp-cheatsheet-section{flex-direction:column;gap:8px;display:flex}.kalotyp-cheatsheet-heading{letter-spacing:.04em;text-transform:uppercase;color:var(--kalotyp-muted);margin:0;font-size:12px;font-weight:600}.kalotyp-cheatsheet-list{grid-template-columns:minmax(140px,auto) 1fr;align-items:baseline;gap:6px 16px;margin:0;display:grid}.kalotyp-cheatsheet-keys{flex-wrap:wrap;align-items:center;gap:4px;margin:0;display:flex}.kalotyp-cheatsheet-kbd{border:1px solid var(--kalotyp-border);background:var(--kalotyp-soft);min-width:22px;color:rgb(var(--color-foreground));font:inherit;text-align:center;border-bottom-width:2px;border-radius:4px;padding:2px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:500;line-height:1.4;display:inline-block}.kalotyp-cheatsheet-plus{color:var(--kalotyp-muted);font-size:11px}.kalotyp-cheatsheet-description{font-size:var(--kalotyp-text-size);color:rgb(var(--color-foreground));margin:0;line-height:1.4}@media (pointer:coarse){.kalotyp-button-close{position:absolute}.kalotyp-button-close:before{content:"";position:absolute;inset:-6px}.kalotyp-history-button{position:relative}.kalotyp-history-button:before{content:"";position:absolute;inset:-6px}.kalotyp-util-nav-button{position:relative}.kalotyp-util-nav-button:before{content:"";position:absolute;inset:-8px -2px}.kalotyp-handle[data-shape=circle]:before{content:"";z-index:-1;position:absolute;inset:-12px}.kalotyp-handle[data-shape=edge][data-direction=t]:before,.kalotyp-handle[data-shape=edge][data-direction=b]:before{content:"";z-index:-1;position:absolute;inset:-19px 0}.kalotyp-handle[data-shape=edge][data-direction=l]:before,.kalotyp-handle[data-shape=edge][data-direction=r]:before{content:"";z-index:-1;position:absolute;inset:0 -19px}.kalotyp-annotate-handle:before{content:"";position:absolute;inset:-16px}.kalotyp-annotate-tool{position:relative}.kalotyp-annotate-tool:before{content:"";position:absolute;inset:-6px}.kalotyp-annotate-swatch{width:32px;height:32px;position:relative}.kalotyp-annotate-swatch:before{content:"";border-radius:50%;position:absolute;inset:-6px}.kalotyp-annotate-color{width:36px;height:36px;position:relative}.kalotyp-annotate-color:before{content:"";position:absolute;inset:-4px}.kalotyp-preset-button{height:40px;position:relative}.kalotyp-preset-button:before{content:"";position:absolute;inset:-2px}.kalotyp-toggle-button,.kalotyp-rotate-input,.kalotyp-rotate-reset,.kalotyp-quarter-button,.kalotyp-resize-input,.kalotyp-resize-lock{height:40px;min-height:40px}.kalotyp-toggle-button:before,.kalotyp-rotate-reset:before,.kalotyp-quarter-button:before,.kalotyp-resize-lock:before{content:"";position:absolute;inset:-2px}.kalotyp-toggle-button,.kalotyp-rotate-reset,.kalotyp-quarter-button,.kalotyp-resize-lock,.kalotyp-finetune-row-reset{position:relative}.kalotyp-finetune-row-reset:before{content:"";position:absolute;inset:-8px}.kalotyp-finetune-reset-all{height:36px;position:relative}.kalotyp-finetune-reset-all:before{content:"";position:absolute;inset:-4px}.kalotyp-rotate-slider,.kalotyp-finetune-slider,.kalotyp-annotate-stroke{height:44px}.kalotyp-rotate-slider::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}.kalotyp-finetune-slider::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}.kalotyp-annotate-stroke::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}.kalotyp-rotate-slider::-moz-range-thumb{width:24px;height:24px}.kalotyp-finetune-slider::-moz-range-thumb{width:24px;height:24px}.kalotyp-annotate-stroke::-moz-range-thumb{width:24px;height:24px}.kalotyp-button-export{height:44px;padding:0 22px}}@media (max-width:768px){.kalotyp-main{gap:8px;padding:8px 8px 0!important}.kalotyp-nav-tools{flex-wrap:nowrap;gap:8px;min-height:56px;padding:8px 8px 8px 12px}.kalotyp-util-nav{scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:auto;min-width:0;overflow:auto hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 36px calc(100% - 36px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 36px calc(100% - 36px),#0000 100%)}.kalotyp-util-nav::-webkit-scrollbar{display:none}.kalotyp-util-nav-button{scroll-snap-align:start;flex:none}.kalotyp-history-controls,.kalotyp-button-close{flex:none;position:static!important}.kalotyp-nav-tools{padding-right:168px}.kalotyp-button-close{position:absolute!important;top:12px!important;right:8px!important}.kalotyp-button-prefs{position:absolute!important;top:12px!important;right:48px!important}.kalotyp-history-controls{position:absolute!important;top:12px!important;right:88px!important}.kalotyp-util-main{min-height:72px;padding:12px}.kalotyp-util-footer{padding:10px 12px}.pintura-editor .kalotyp-root>.kalotyp-nav-tools{padding:8px 100px 8px 12px!important}.pintura-editor .kalotyp-root[data-env~=landscape] .kalotyp-util-main,.pintura-editor .kalotyp-root[data-env~=landscape] .kalotyp-util-footer{padding-left:12px!important;padding-right:12px!important}.kalotyp-rotate-slider{min-width:140px}.kalotyp-rotate-slider-label{min-width:auto}.kalotyp-resize-panel{align-items:stretch;gap:8px}.kalotyp-resize-row{flex-wrap:wrap;justify-content:center}.kalotyp-finetune-panel{max-width:100%}.kalotyp-finetune-label{text-align:right;width:56px;font-size:12px}.kalotyp-finetune-slider{min-width:80px}.kalotyp-finetune-input{width:56px}.kalotyp-annotate-toolbar{-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;overflow:auto hidden}.kalotyp-annotate-toolbar::-webkit-scrollbar{display:none}.kalotyp-annotate-tool{flex:none}.kalotyp-annotate-style-row{flex-wrap:wrap;gap:8px}.kalotyp-annotate-stroke{min-width:120px}.kalotyp-filter-strip{gap:8px;padding:4px 8px}}@media (max-width:360px){.kalotyp-util-nav{-webkit-mask-image:none;mask-image:none}.pintura-editor .kalotyp-root>.kalotyp-nav-tools,.kalotyp-nav-tools{padding-right:92px!important}}@media (max-height:500px) and (orientation:landscape){.kalotyp-nav-tools{min-height:44px;padding-top:6px;padding-bottom:6px}.kalotyp-main{gap:6px;padding:6px 12px 0!important}.kalotyp-util-main{padding:6px 12px;min-height:56px!important}.kalotyp-util-footer{padding:6px 12px}.kalotyp-button-export{height:40px;padding:0 16px}.kalotyp-button-close,.kalotyp-button-prefs,.kalotyp-history-controls{top:6px!important}}
1
+ .pintura-editor{--color-background:255, 255, 255;--color-foreground:21, 23, 26;--font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;--editor-modal-border-radius:0px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--kalotyp-success:48, 207, 67;--kalotyp-border:rgba(var(--color-foreground), .16);--kalotyp-border-strong:rgba(var(--color-foreground), .36);--kalotyp-muted:rgba(var(--color-foreground), .7);--kalotyp-soft:rgba(var(--color-foreground), .08);--kalotyp-track:rgba(var(--color-foreground), .1);--kalotyp-radius:6px;--kalotyp-radius-lg:10px;--kalotyp-control-height:36px;--kalotyp-text-size:13px;--kalotyp-transition:all .2s ease;z-index:2147483646;background:rgb(var(--color-background));font-family:var(--font-family);color:rgb(var(--color-foreground));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;display:flex;position:fixed;inset:0}html:not(.dark) .pintura-editor{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-background:255, 255, 255!important;--color-foreground:21, 23, 26!important}html.dark .pintura-editor{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-background:21, 23, 26!important;--color-foreground:244, 245, 246!important}.PinturaModal{background:rgb(var(--color-background));border-radius:var(--editor-modal-border-radius);overflow:hidden;flex:auto!important;width:100%!important;height:100%!important;min-height:0!important;display:flex!important;position:relative!important}.kalotyp-editor:focus,.kalotyp-editor:focus-visible{outline:none}.kalotyp-button-prefs{border-radius:var(--kalotyp-radius);width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;z-index:2;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;font-size:16px;line-height:1;display:inline-flex;position:absolute;top:18px;right:56px}.kalotyp-button-prefs svg{width:16px;height:16px}.kalotyp-button-prefs:hover{background:var(--kalotyp-soft);color:rgb(var(--color-foreground))}.kalotyp-button-prefs:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-button-close{border-radius:var(--kalotyp-radius);width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;z-index:2;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;font-size:16px;line-height:1;display:inline-flex;position:absolute;top:18px;right:14px}.kalotyp-button-close svg{width:16px;height:16px}.kalotyp-button-close:hover{background:var(--kalotyp-soft);color:rgb(var(--color-foreground))}.kalotyp-button-close:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-root{grid-template-rows:auto minmax(0,1fr) auto!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;height:100%!important;min-height:0!important;display:grid!important}.kalotyp-root[data-env~=landscape]{grid-template-rows:auto 1fr auto}.kalotyp-nav-tools{border-bottom:1px solid var(--kalotyp-border);flex:none;align-items:center;gap:8px;min-height:56px;padding:14px 180px 14px 24px;display:flex}.kalotyp-history-controls{z-index:2;align-items:center;gap:4px;display:inline-flex;position:absolute;top:18px;right:100px}.kalotyp-history-button{width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.kalotyp-history-button svg{width:16px;height:16px}.kalotyp-history-button:hover:not(:disabled){color:rgb(var(--color-foreground));background:var(--kalotyp-track)}.kalotyp-history-button:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-history-button:disabled{opacity:.35;cursor:not-allowed}.kalotyp-main{background:rgb(var(--color-background));gap:12px;padding:12px 16px 0;flex-direction:column!important;min-height:0!important;display:flex!important}.kalotyp-stage{border-radius:var(--kalotyp-radius);background:rgba(var(--color-foreground), .06);flex:1 1 0!important;min-height:0!important;position:relative!important}.kalotyp-util-footer{border-top:1px solid var(--kalotyp-border);justify-content:flex-end;align-items:center;gap:8px;padding:14px 24px;display:flex}.pintura-editor .kalotyp-root>.kalotyp-nav-tools{padding-bottom:14px!important}.pintura-editor .kalotyp-root .kalotyp-stage{max-width:none!important;margin:0!important}.pintura-editor .kalotyp-root[data-env~=landscape] .kalotyp-util-main,.pintura-editor .kalotyp-root[data-env~=landscape] .kalotyp-util-footer{padding-right:24px!important}.kalotyp-export-group{height:var(--kalotyp-control-height);border:1px solid rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);background:rgb(var(--color-foreground));isolation:isolate;transition:var(--kalotyp-transition);align-items:stretch;display:inline-flex;overflow:hidden}.kalotyp-export-group:focus-within{box-shadow:var(--kalotyp-focus-shadow)}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-export{font-family:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;justify-content:center;align-items:center;line-height:1;transition:background .18s;height:100%!important;color:rgb(var(--color-background))!important;opacity:1!important;background:0 0!important;border:0!important;border-radius:0!important;padding:0 18px!important;font-weight:700!important;display:inline-flex!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-export:hover{background:rgba(var(--color-background), .12)!important;color:rgb(var(--color-background))!important;opacity:1!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-export:focus-visible{outline:none;background:rgba(var(--color-background), .12)!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-export:disabled{cursor:not-allowed;opacity:.4!important}.kalotyp-button-inner{display:inline-block}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings{cursor:pointer;width:36px;box-shadow:inset 1px 0 0 rgba(var(--color-background), .22);justify-content:center;align-items:center;padding:0;transition:background .18s;height:100%!important;color:rgb(var(--color-background))!important;opacity:1!important;background:0 0!important;border:0!important;border-radius:0!important;display:inline-flex!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings:hover{background:rgba(var(--color-background), .12)!important;color:rgb(var(--color-background))!important;opacity:1!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings:focus-visible{outline:none;background:rgba(var(--color-background), .12)!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings:disabled{cursor:not-allowed;opacity:.4!important}.pintura-editor .kalotyp-root .kalotyp-export-group .kalotyp-button-output-settings[aria-expanded=true]{background:rgba(var(--color-background), .18)!important}.pintura-editor .kalotyp-root .kalotyp-export-group:hover{background:rgba(var(--color-foreground), .92);border-color:rgba(var(--color-foreground), .92)}.kalotyp-visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.pintura-editor{--kalotyp-focus-ring:rgb(var(--color-foreground));--kalotyp-focus-halo:rgb(var(--color-background));--kalotyp-focus-shadow:0 0 0 2px var(--kalotyp-focus-halo), 0 0 0 4px var(--kalotyp-focus-ring)}.kalotyp-nested-overlay{z-index:50;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.kalotyp-nested-overlay--modal{background:rgba(var(--color-foreground), .32)}.kalotyp-nested-overlay--popover{pointer-events:auto;background:0 0}.kalotyp-nested-surface{background:rgb(var(--color-background));color:rgb(var(--color-foreground));border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius-lg);flex-direction:column;min-width:280px;max-width:min(520px,100% - 32px);max-height:calc(100% - 32px);display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000002e,0 2px 6px #00000014}.kalotyp-nested-surface:focus-visible{outline:none}.kalotyp-nested-header{border-bottom:1px solid var(--kalotyp-border);justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.kalotyp-nested-title{margin:0;font-size:14px;font-weight:600;line-height:1.2}.kalotyp-nested-close{border-radius:var(--kalotyp-radius);width:28px;height:28px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;font-size:22px;line-height:1;display:inline-flex}.kalotyp-nested-close:hover{background:var(--kalotyp-soft);color:rgb(var(--color-foreground))}.kalotyp-nested-close:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-nested-body{padding:16px 14px;overflow-y:auto}.kalotyp-stage-container{-webkit-user-select:none;user-select:none;touch-action:none;background:0 0;position:absolute;inset:0;overflow:hidden}.kalotyp-stage-status{text-align:center;pointer-events:none;color:rgba(var(--color-foreground), .7);justify-content:center;align-items:center;padding:12px 18px;font-size:14px;display:flex;position:absolute;inset:50% 0 auto}.kalotyp-stage-image,.kalotyp-stage-overlay{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.kalotyp-stage-overlay{z-index:1}.kalotyp-stage-body{z-index:2;cursor:move;touch-action:none;position:absolute}.kalotyp-handles{z-index:3;pointer-events:none;position:absolute;inset:0}.kalotyp-corner-anchor{pointer-events:none;width:0;height:0;position:absolute}.kalotyp-handle{pointer-events:auto;touch-action:none;background:0 0;border:none;margin:0;padding:0;position:absolute}.kalotyp-handle[data-shape=circle]{background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));border-radius:50%;width:12px;height:12px;top:-6px;left:-6px;box-shadow:0 1px 3px #0000002e}.kalotyp-handle[data-shape=circle][data-direction=tl],.kalotyp-handle[data-shape=circle][data-direction=br]{cursor:nwse-resize}.kalotyp-handle[data-shape=circle][data-direction=tr],.kalotyp-handle[data-shape=circle][data-direction=bl]{cursor:nesw-resize}.kalotyp-handle[data-shape=edge][data-direction=t],.kalotyp-handle[data-shape=edge][data-direction=b]{cursor:ns-resize;height:6px;margin-top:-3px}.kalotyp-handle[data-shape=edge][data-direction=l],.kalotyp-handle[data-shape=edge][data-direction=r]{cursor:ew-resize;width:6px;margin-left:-3px}.kalotyp-handle:focus-visible{outline:2px solid var(--kalotyp-focus-ring);outline-offset:2px;box-shadow:0 0 0 4px var(--kalotyp-focus-halo)}.kalotyp-crop-panel{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.kalotyp-preset-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.kalotyp-preset-button{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-items:center;padding:0 12px;display:inline-flex}.kalotyp-preset-button:hover{background:var(--kalotyp-soft);border-color:var(--kalotyp-border-strong)}.kalotyp-preset-button:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-preset-button[aria-checked=true]{background:rgb(var(--color-foreground));border-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.kalotyp-crop-dims{flex-wrap:wrap;justify-content:center;align-items:end;gap:8px;width:100%;margin-top:6px;display:flex}.kalotyp-crop-dims-field{flex-direction:column;gap:4px;display:flex}.kalotyp-crop-dims-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-crop-dims-input{width:80px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 10px}.kalotyp-crop-dims-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-util-nav{background:var(--kalotyp-track);border-radius:var(--kalotyp-radius-lg);align-items:center;gap:2px;padding:4px;display:inline-flex}.kalotyp-util-nav-button{height:28px;color:var(--kalotyp-muted);font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0 14px;font-weight:500;transition:color .2s,background .2s,border-color .2s,box-shadow .2s;display:inline-flex;position:relative}.kalotyp-util-nav-button:hover{color:rgb(var(--color-foreground))}.kalotyp-util-nav-button:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-util-nav-button[aria-selected=true]{background:rgb(var(--color-background));border-color:var(--kalotyp-border);color:rgb(var(--color-foreground));font-weight:600;box-shadow:0 1px 2px #0000000a}.kalotyp-util-nav-button:disabled{opacity:.4;cursor:not-allowed}.kalotyp-preview-canvas{pointer-events:none}.kalotyp-flip-panel,.kalotyp-rotate-panel,.kalotyp-resize-panel{width:100%;font-size:var(--kalotyp-text-size);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.kalotyp-rotate-row{align-items:center;gap:8px;display:flex}.kalotyp-resize-row{align-items:end;gap:8px;display:flex}.kalotyp-util-main{border-top:1px solid var(--kalotyp-border);background:rgb(var(--color-background));flex:none;justify-content:center;align-items:center;min-height:88px;padding:18px 24px;display:flex}.kalotyp-flip-panel{justify-content:center;gap:8px;display:flex}.kalotyp-toggle-button{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-items:center;padding:0 14px;display:inline-flex}.kalotyp-toggle-button:hover{border-color:var(--kalotyp-border-strong)}.kalotyp-toggle-button:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-toggle-button[aria-pressed=true]{background:rgb(var(--color-foreground));border-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.kalotyp-rotate-slider-label{font-size:var(--kalotyp-text-size);color:var(--kalotyp-muted);min-width:72px}.kalotyp-rotate-slider{cursor:ew-resize;appearance:none;background:0 0;flex:1;min-width:220px;height:4px}.kalotyp-rotate-slider::-webkit-slider-runnable-track{background:var(--kalotyp-border);border-radius:999px;height:4px}.kalotyp-rotate-slider::-moz-range-track{background:var(--kalotyp-border);border-radius:999px;height:4px}.kalotyp-rotate-slider::-webkit-slider-thumb{appearance:none;background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));cursor:ew-resize;border-radius:50%;width:16px;height:16px;margin-top:-6px;box-shadow:0 1px 3px #0003}.kalotyp-rotate-slider::-moz-range-thumb{background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));cursor:ew-resize;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}.kalotyp-rotate-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px rgb(var(--color-background)), 0 0 0 5px rgb(var(--color-foreground))}.kalotyp-rotate-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px rgb(var(--color-background)), 0 0 0 5px rgb(var(--color-foreground))}.kalotyp-rotate-input{width:72px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 8px}.kalotyp-rotate-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-rotate-input-group{align-items:center;gap:4px;display:inline-flex}.kalotyp-rotate-suffix{font-size:var(--kalotyp-text-size);color:var(--kalotyp-muted);font-variant-numeric:tabular-nums}.kalotyp-rotate-reset{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;padding:0 12px}.kalotyp-rotate-reset:hover{border-color:var(--kalotyp-border-strong)}.kalotyp-rotate-reset:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-quarter-button{width:36px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));cursor:pointer;transition:var(--kalotyp-transition);background:0 0;padding:0;font-size:18px;line-height:1}.kalotyp-quarter-button:hover{background:var(--kalotyp-soft);border-color:var(--kalotyp-border-strong)}.kalotyp-quarter-button:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-resize-field{flex-direction:column;gap:4px;display:flex}.kalotyp-resize-field-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-resize-input{width:92px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 10px}.kalotyp-resize-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-resize-lock{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kalotyp-resize-lock:hover{border-color:var(--kalotyp-border-strong);color:rgb(var(--color-foreground))}.kalotyp-resize-lock:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-resize-lock[aria-pressed=true]{color:rgb(var(--color-foreground));border-color:var(--kalotyp-border-strong)}.kalotyp-resize-dims{align-items:end}.kalotyp-resize-dims .kalotyp-resize-lock{margin-bottom:2px}.kalotyp-resize-summary{font-size:var(--kalotyp-text-size);color:rgb(var(--color-foreground));font-variant-numeric:tabular-nums}.kalotyp-resize-helper{color:var(--kalotyp-muted);font-size:12px}.kalotyp-annotate-stage{-webkit-user-select:none;user-select:none;touch-action:none;background:0 0;position:absolute;inset:0;overflow:hidden}.kalotyp-annotate-image,.kalotyp-annotate-shapes,.kalotyp-annotate-live{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.kalotyp-annotate-shapes{z-index:1}.kalotyp-annotate-live{z-index:2}.kalotyp-annotate-hit{z-index:3;cursor:crosshair;position:absolute;inset:0}.kalotyp-annotate-stage[data-tool=select] .kalotyp-annotate-hit{cursor:default}.kalotyp-annotate-stage[data-tool=text] .kalotyp-annotate-hit{cursor:text}.kalotyp-annotate-stage[data-tool=emoji] .kalotyp-annotate-hit{cursor:copy}.kalotyp-annotate-handles{z-index:4;pointer-events:none;position:absolute;inset:0}.kalotyp-annotate-handle{border:2px solid rgb(var(--color-background));background:rgb(var(--color-foreground));cursor:pointer;pointer-events:auto;touch-action:none;border-radius:50%;width:12px;height:12px;margin-top:-6px;margin-left:-6px;padding:0;font-size:0;position:absolute;box-shadow:0 1px 2px #0006}.kalotyp-annotate-handle:focus-visible{outline:2px solid var(--kalotyp-focus-ring);outline-offset:2px;box-shadow:0 0 0 4px var(--kalotyp-focus-halo)}.kalotyp-annotate-handle[data-direction=tl],.kalotyp-annotate-handle[data-direction=br]{cursor:nwse-resize}.kalotyp-annotate-handle[data-direction=tr],.kalotyp-annotate-handle[data-direction=bl]{cursor:nesw-resize}.kalotyp-annotate-handle[data-direction=t],.kalotyp-annotate-handle[data-direction=b]{cursor:ns-resize}.kalotyp-annotate-handle[data-direction=l],.kalotyp-annotate-handle[data-direction=r]{cursor:ew-resize}.kalotyp-annotate-rotate-handle{border:2px solid rgb(var(--color-background));cursor:grab;pointer-events:auto;touch-action:none;background:#6366f1;border-radius:50%;width:14px;height:14px;margin-top:-7px;margin-left:-7px;padding:0;font-size:0;position:absolute;box-shadow:0 1px 2px #0006}.kalotyp-annotate-rotate-handle:active{cursor:grabbing}.kalotyp-annotate-rotate-handle:focus-visible{outline:2px solid var(--kalotyp-focus-ring);outline-offset:2px;box-shadow:0 0 0 4px var(--kalotyp-focus-halo)}.kalotyp-annotate-text-overlay{z-index:5;pointer-events:none;position:absolute;inset:0}.kalotyp-annotate-text-editor{pointer-events:auto;white-space:pre;background:0 0;border:none;outline:none;min-width:1ch;margin:0;padding:0;line-height:1.2;display:inline-block;position:absolute}.kalotyp-annotate-text-editor::selection{color:#0000;background-color:#6366f159}.kalotyp-annotate-emoji-picker{z-index:6;background:rgb(var(--color-background));border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius-lg);pointer-events:auto;flex-direction:column;gap:8px;width:min(360px,100% - 24px);max-height:min(360px,100% - 24px);padding:10px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000002e}.kalotyp-annotate-emoji-picker[hidden]{display:none}.kalotyp-annotate-emoji-header{flex:none;justify-content:space-between;align-items:center;display:flex}.kalotyp-annotate-emoji-title{font-size:var(--kalotyp-text-size);color:rgb(var(--color-foreground));font-weight:600}.kalotyp-annotate-emoji-close{width:24px;height:24px;color:var(--kalotyp-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.kalotyp-annotate-emoji-close svg{width:16px;height:16px}.kalotyp-annotate-emoji-close:hover{color:rgb(var(--color-foreground));background:var(--kalotyp-soft)}.kalotyp-annotate-emoji-close:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-emoji-search{flex:none;align-items:center;display:flex;position:relative}.kalotyp-annotate-emoji-search svg{width:16px;height:16px;color:var(--kalotyp-muted);pointer-events:none;position:absolute;left:8px}.kalotyp-annotate-emoji-search-input{width:100%;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);padding:0 10px 0 30px}.kalotyp-annotate-emoji-search-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-emoji-tabs{flex:none;align-items:center;gap:4px;padding-bottom:2px;display:flex;overflow-x:auto}.kalotyp-annotate-emoji-tab{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;flex:none;justify-content:center;align-items:center;width:36px;height:36px;padding:0;line-height:1;display:inline-flex}.kalotyp-annotate-emoji-tab-img{pointer-events:none;width:24px;height:24px;display:block}.kalotyp-annotate-emoji-tab:hover{background:var(--kalotyp-soft)}.kalotyp-annotate-emoji-tab:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-emoji-tab[aria-pressed=true]{background:var(--kalotyp-track);border-color:var(--kalotyp-border)}.kalotyp-annotate-emoji-grid{grid-template-columns:repeat(var(--kalotyp-emoji-cols,8), 1fr);touch-action:pan-y;overscroll-behavior:contain;flex:auto;gap:2px;min-height:0;display:grid;overflow-y:auto}.kalotyp-annotate-emoji-cell{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:20px;line-height:1;display:inline-flex}.kalotyp-annotate-emoji-cell:hover{background:var(--kalotyp-soft)}.kalotyp-annotate-emoji-cell:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-emoji-cell-img{pointer-events:none;width:26px;height:26px;display:block}.kalotyp-annotate-emoji-empty{text-align:center;font-size:var(--kalotyp-text-size);color:var(--kalotyp-muted);margin:0;padding:12px 0}.kalotyp-annotate-emoji-empty[hidden]{display:none}.kalotyp-util-main:has(.kalotyp-annotate-panel){align-items:flex-start;min-height:244px}.kalotyp-annotate-panel{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.kalotyp-annotate-toolbar{background:var(--kalotyp-track);border-radius:var(--kalotyp-radius-lg);align-items:center;gap:4px;padding:4px;display:inline-flex}.kalotyp-annotate-tool{width:32px;height:32px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:16px;font-weight:500;display:inline-flex}.kalotyp-annotate-tool svg{width:18px;height:18px;display:block}.kalotyp-annotate-tool:hover{color:rgb(var(--color-foreground))}.kalotyp-annotate-tool:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-tool[aria-pressed=true]{background:rgb(var(--color-background));border-color:var(--kalotyp-border);color:rgb(var(--color-foreground));box-shadow:0 1px 2px #0000000a}.kalotyp-annotate-style-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:inline-flex}.kalotyp-annotate-text-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:inline-flex}.kalotyp-annotate-font{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;padding:0 8px}.kalotyp-annotate-font:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-font-size{width:64px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 10px}.kalotyp-annotate-font-size:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-text-toggle,.kalotyp-annotate-align-button{width:32px;height:var(--kalotyp-control-height);color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.kalotyp-annotate-text-toggle svg,.kalotyp-annotate-align-button svg{width:18px;height:18px;display:block}.kalotyp-annotate-text-toggle:hover,.kalotyp-annotate-align-button:hover{color:rgb(var(--color-foreground))}.kalotyp-annotate-text-toggle:focus-visible,.kalotyp-annotate-align-button:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-text-toggle[aria-pressed=true],.kalotyp-annotate-align-button[aria-checked=true]{background:rgb(var(--color-background));border-color:var(--kalotyp-border);color:rgb(var(--color-foreground));box-shadow:0 1px 2px #0000000a}.kalotyp-annotate-align{align-items:center;gap:2px;display:inline-flex}.kalotyp-annotate-swatches{align-items:center;gap:4px;display:inline-flex}.kalotyp-annotate-swatch{border:2px solid var(--kalotyp-border);background:var(--kalotyp-swatch,currentColor);cursor:pointer;width:22px;height:22px;transition:var(--kalotyp-transition);border-radius:50%;padding:0}.kalotyp-annotate-swatch:hover{transform:scale(1.08)}.kalotyp-annotate-swatch:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-swatch[aria-checked=true]{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 1px rgb(var(--color-background)) inset}.kalotyp-annotate-hex{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));background-image:linear-gradient(var(--kalotyp-hex-swatch,#000), var(--kalotyp-hex-swatch,#000));width:116px;height:28px;color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-transform:lowercase;font-variant-numeric:tabular-nums;background-position:6px;background-repeat:no-repeat;background-size:18px 18px;padding:0 8px 0 32px}.kalotyp-annotate-hex:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-stroke-label{font-size:var(--kalotyp-text-size);color:var(--kalotyp-muted)}.kalotyp-annotate-stroke{width:120px}.kalotyp-annotate-delete{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.kalotyp-annotate-delete svg{width:14px;height:14px}.kalotyp-annotate-delete:hover:not(:disabled){background:var(--kalotyp-soft);border-color:var(--kalotyp-border-strong)}.kalotyp-annotate-delete:disabled{opacity:.4;cursor:not-allowed}.kalotyp-annotate-insert{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.kalotyp-annotate-insert svg{width:14px;height:14px}.kalotyp-annotate-insert:hover:not(:disabled){background:var(--kalotyp-soft);border-color:var(--kalotyp-border-strong)}.kalotyp-annotate-insert:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-annotate-insert:disabled{opacity:.4;cursor:not-allowed}.kalotyp-annotate-coords{flex-wrap:wrap;justify-content:center;align-items:end;gap:8px;width:100%;margin-top:6px;display:flex}.kalotyp-annotate-coords[hidden]{display:none}.kalotyp-annotate-coords-field{flex-direction:column;gap:4px;display:flex}.kalotyp-annotate-coords-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-annotate-coords-input{width:80px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 10px}.kalotyp-annotate-coords-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-finetune-panel{width:100%;max-width:640px;font-size:var(--kalotyp-text-size);grid-template-columns:1fr;gap:6px;margin:0 auto;display:grid}.kalotyp-util-main:has(.kalotyp-finetune-panel){justify-content:center;align-items:stretch;padding-block:16px}.kalotyp-finetune-row{align-items:center;gap:10px;height:32px;display:flex}.kalotyp-finetune-label{width:84px;color:var(--kalotyp-muted);font-size:var(--kalotyp-text-size);text-align:right;flex:none;font-weight:500}.kalotyp-finetune-slider{cursor:ew-resize;appearance:none;background:0 0;flex:1;min-width:160px;height:4px}.kalotyp-finetune-slider::-webkit-slider-runnable-track{background:var(--kalotyp-border);border-radius:999px;height:4px}.kalotyp-finetune-slider::-moz-range-track{background:var(--kalotyp-border);border-radius:999px;height:4px}.kalotyp-finetune-slider::-webkit-slider-thumb{appearance:none;background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));cursor:ew-resize;border-radius:50%;width:16px;height:16px;margin-top:-6px;box-shadow:0 1px 3px #0003}.kalotyp-finetune-slider::-moz-range-thumb{background:rgb(var(--color-foreground));border:2px solid rgb(var(--color-background));cursor:ew-resize;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}.kalotyp-finetune-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px rgb(var(--color-background)), 0 0 0 5px rgb(var(--color-foreground))}.kalotyp-finetune-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px rgb(var(--color-background)), 0 0 0 5px rgb(var(--color-foreground))}.kalotyp-finetune-input{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));width:60px;height:28px;color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;flex:none;padding:0 8px}.kalotyp-finetune-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-finetune-row-reset{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);width:28px;height:28px;color:var(--kalotyp-muted);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;flex:none;padding:0;font-size:14px;line-height:1}.kalotyp-finetune-row-reset:hover{border-color:var(--kalotyp-border-strong);color:rgb(var(--color-foreground))}.kalotyp-finetune-row-reset:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-finetune-reset-all{border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);height:28px;color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;align-self:flex-end;margin-top:4px;padding:0 12px}.kalotyp-finetune-reset-all:hover{border-color:var(--kalotyp-border-strong)}.kalotyp-finetune-reset-all:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-filter-panel{width:100%;max-width:100%;font-size:var(--kalotyp-text-size);flex-direction:column;gap:8px;margin:0 auto;display:flex}.kalotyp-util-main:has(.kalotyp-filter-panel){justify-content:center;align-items:stretch;padding-block:12px}.kalotyp-filter-strip{scrollbar-width:thin;-webkit-overflow-scrolling:touch;justify-content:flex-start;gap:12px;padding:4px 16px;display:flex;overflow:auto hidden}@media (min-width:720px){.kalotyp-filter-strip{justify-content:center}}.kalotyp-filter-thumb{cursor:pointer;font:inherit;color:rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);transition:var(--kalotyp-transition);background:0 0;border:0;flex-direction:column;flex:none;align-items:center;gap:6px;padding:4px;display:flex}.kalotyp-filter-thumb:hover{background:var(--kalotyp-soft)}.kalotyp-filter-thumb:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-filter-thumb-image{border:2px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:var(--kalotyp-track);transition:var(--kalotyp-transition);line-height:0;display:block;overflow:hidden}.kalotyp-filter-thumb-canvas{width:100%;height:100%;display:block}.kalotyp-filter-thumb-label{color:var(--kalotyp-muted);text-align:center;font-variant-numeric:tabular-nums;min-height:14px;font-size:12px;line-height:1.2}.kalotyp-filter-thumb--active .kalotyp-filter-thumb-image{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 3px rgba(var(--color-foreground), .18)}.kalotyp-filter-thumb--active .kalotyp-filter-thumb-label{color:rgb(var(--color-foreground));font-weight:600}.kalotyp-filter-thumb-check{background:rgb(var(--color-foreground));width:18px;height:18px;color:rgb(var(--color-background));pointer-events:none;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;line-height:1;display:none;position:absolute;top:4px;right:4px}.kalotyp-filter-thumb-image{position:relative}.kalotyp-filter-thumb--active .kalotyp-filter-thumb-check{display:inline-flex}.kalotyp-redact-stage{-webkit-user-select:none;user-select:none;touch-action:none;background:0 0;position:absolute;inset:0;overflow:hidden}.kalotyp-redact-image,.kalotyp-redact-regions,.kalotyp-redact-live{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.kalotyp-redact-regions{z-index:1}.kalotyp-redact-live{z-index:2}.kalotyp-redact-hit{z-index:3;cursor:crosshair;position:absolute;inset:0}.kalotyp-redact-handles{z-index:4;pointer-events:none;position:absolute;inset:0}.kalotyp-redact-handle{border:2px solid rgb(var(--color-background));background:rgb(var(--color-foreground));cursor:pointer;pointer-events:auto;touch-action:none;border-radius:50%;width:12px;height:12px;margin-top:-6px;margin-left:-6px;padding:0;font-size:0;position:absolute;box-shadow:0 1px 2px #0006}.kalotyp-redact-handle:focus-visible{outline:2px solid var(--kalotyp-focus-ring);outline-offset:2px;box-shadow:0 0 0 4px var(--kalotyp-focus-halo)}.kalotyp-redact-handle[data-direction=tl],.kalotyp-redact-handle[data-direction=br]{cursor:nwse-resize}.kalotyp-redact-handle[data-direction=tr],.kalotyp-redact-handle[data-direction=bl]{cursor:nesw-resize}.kalotyp-redact-handle[data-direction=t],.kalotyp-redact-handle[data-direction=b]{cursor:ns-resize}.kalotyp-redact-handle[data-direction=l],.kalotyp-redact-handle[data-direction=r]{cursor:ew-resize}.kalotyp-redact-panel{width:100%;max-width:720px;font-size:var(--kalotyp-text-size);flex-direction:column;gap:10px;margin:0 auto;display:flex}.kalotyp-redact-toolbar{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.kalotyp-redact-mode{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);padding:0 14px}.kalotyp-redact-mode:hover{background:var(--kalotyp-soft)}.kalotyp-redact-mode:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-redact-mode--active{box-shadow:0 0 0 1px rgb(var(--color-foreground)) inset;font-weight:600;background:rgb(var(--color-foreground))!important;color:rgb(var(--color-background))!important;border-color:rgb(var(--color-foreground))!important}.kalotyp-redact-style-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.kalotyp-redact-color-group,.kalotyp-redact-button-group{flex:none;align-items:center;gap:8px;display:inline-flex}.kalotyp-redact-color-hint{text-align:center;color:var(--kalotyp-muted);flex:100%;font-size:12px;font-style:italic}.kalotyp-redact-color-hint[hidden]{display:none}.kalotyp-redact-color{width:36px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);cursor:pointer;background:0 0;padding:0}.kalotyp-redact-color:disabled{opacity:.4;cursor:not-allowed}.kalotyp-redact-hex{width:100px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);font-variant-numeric:tabular-nums;text-align:left;padding:0 10px}.kalotyp-redact-hex:disabled{opacity:.4;cursor:not-allowed}.kalotyp-redact-hex:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-redact-insert,.kalotyp-redact-delete{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);align-items:center;gap:6px;padding:0 14px;display:inline-flex}.kalotyp-redact-insert:hover,.kalotyp-redact-delete:hover{background:var(--kalotyp-soft)}.kalotyp-redact-insert:focus-visible,.kalotyp-redact-delete:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-redact-delete:disabled{opacity:.5;cursor:not-allowed}.kalotyp-redact-coords{flex-wrap:wrap;justify-content:center;align-items:end;gap:8px;width:100%;margin-top:6px;display:flex}.kalotyp-redact-coords[hidden]{display:none}.kalotyp-redact-coords-field{flex-direction:column;gap:4px;display:flex}.kalotyp-redact-coords-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-redact-coords-input{width:80px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);text-align:right;font-variant-numeric:tabular-nums;padding:0 10px}.kalotyp-redact-coords-input:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);background:rgb(var(--color-background));outline:none}.kalotyp-frame-panel{width:100%;max-width:100%;font-size:var(--kalotyp-text-size);flex-direction:column;gap:8px;margin:0 auto;display:flex}.kalotyp-util-main:has(.kalotyp-frame-panel){justify-content:center;align-items:stretch;padding-block:12px}.kalotyp-frame-strip-wrap{display:block}.kalotyp-frame-strip{scrollbar-width:thin;-webkit-overflow-scrolling:touch;justify-content:flex-start;gap:12px;padding:4px 16px;display:flex;overflow:auto hidden}@media (min-width:720px){.kalotyp-frame-strip{justify-content:center}}.kalotyp-frame-thumb{cursor:pointer;font:inherit;color:rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);transition:var(--kalotyp-transition);background:0 0;border:0;flex-direction:column;flex:none;align-items:center;gap:6px;padding:4px;display:flex}.kalotyp-frame-thumb:hover{background:var(--kalotyp-soft)}.kalotyp-frame-thumb:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-frame-thumb-image{border:2px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:var(--kalotyp-track);transition:var(--kalotyp-transition);justify-content:center;align-items:center;width:80px;height:60px;line-height:0;display:flex;position:relative;overflow:hidden}.kalotyp-frame-thumb-canvas{max-width:100%;max-height:100%;display:block}.kalotyp-frame-thumb-label{color:var(--kalotyp-muted);text-align:center;font-variant-numeric:tabular-nums;min-height:14px;font-size:12px;line-height:1.2}.kalotyp-frame-thumb--active .kalotyp-frame-thumb-image{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 3px rgba(var(--color-foreground), .18)}.kalotyp-frame-thumb--active .kalotyp-frame-thumb-label{color:rgb(var(--color-foreground));font-weight:600}.kalotyp-frame-thumb-check{background:rgb(var(--color-foreground));width:18px;height:18px;color:rgb(var(--color-background));pointer-events:none;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;line-height:1;display:none;position:absolute;top:4px;right:4px}.kalotyp-frame-thumb--active .kalotyp-frame-thumb-check{display:inline-flex}.kalotyp-frame-color-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.kalotyp-frame-color-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-frame-color-hint{text-align:center;color:var(--kalotyp-muted);flex:100%;font-size:12px;font-style:italic}.kalotyp-frame-color-hint[hidden]{display:none}.kalotyp-frame-color{width:36px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);cursor:pointer;background:0 0;padding:0}.kalotyp-frame-color:disabled{opacity:.4;cursor:not-allowed}.kalotyp-frame-hex{width:100px;height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);font-variant-numeric:tabular-nums;text-align:left;padding:0 10px}.kalotyp-frame-hex:disabled{opacity:.4;cursor:not-allowed}.kalotyp-frame-hex:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-frame-preview-container{position:absolute;inset:0}.kalotyp-frame-preview-canvas{position:absolute}.kalotyp-nested-overlay--popover .kalotyp-nested-surface.kalotyp-output-popover{min-width:280px;max-width:320px}.kalotyp-output-popover-body{flex-direction:column;gap:10px;display:flex}.kalotyp-output-row{grid-template-columns:64px 1fr auto;align-items:center;gap:10px;display:grid}.kalotyp-output-row-label{color:var(--kalotyp-muted);font-size:12px;font-weight:500}.kalotyp-output-format{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);padding:0 8px}.kalotyp-output-format:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-output-quality{width:100%;accent-color:rgb(var(--color-foreground))}.kalotyp-output-quality:focus-visible{box-shadow:var(--kalotyp-focus-shadow);border-radius:var(--kalotyp-radius);outline:none}.kalotyp-output-quality-readout{font-size:var(--kalotyp-text-size);color:var(--kalotyp-muted);font-variant-numeric:tabular-nums;text-align:right;min-width:28px}.kalotyp-output-hint{color:var(--kalotyp-muted);margin:0 0 4px 74px;font-size:12px}.kalotyp-output-summary{font-size:var(--kalotyp-text-size);color:rgb(var(--color-foreground));margin:4px 0 0;font-weight:500}.kalotyp-output-metadata-row{font-size:var(--kalotyp-text-size);cursor:pointer;align-items:center;gap:8px;margin:6px 0 0;display:flex}.kalotyp-output-metadata-checkbox{accent-color:rgb(var(--color-foreground));width:16px;height:16px;margin:0}.kalotyp-output-metadata-text{line-height:1.3}.kalotyp-output-metadata-hint{color:var(--kalotyp-muted);min-height:16px;margin:2px 0 0;padding-left:24px;font-size:11px;font-style:italic;line-height:1.4}.kalotyp-output-footer{border-top:1px solid var(--kalotyp-border);justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;padding-top:12px;display:flex}.kalotyp-output-done{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:rgb(var(--color-foreground));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);background:0 0;padding:0 14px}.kalotyp-output-done:hover{background:var(--kalotyp-soft)}.kalotyp-output-done:focus-visible{border-color:rgb(var(--color-foreground));box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-output-save{height:var(--kalotyp-control-height);border:1px solid rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);background:rgb(var(--color-foreground));color:rgb(var(--color-background));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;transition:var(--kalotyp-transition);padding:0 16px;font-weight:600}.kalotyp-output-save:hover{background:rgba(var(--color-foreground), .88);border-color:rgba(var(--color-foreground), .88)}.kalotyp-output-save:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-output-save:disabled{opacity:.4;cursor:not-allowed}.kalotyp-nested-overlay--modal .kalotyp-nested-surface.kalotyp-preferences-modal{min-width:360px;max-width:460px}.kalotyp-preferences-body{flex-direction:column;gap:18px;display:flex}.kalotyp-preferences-section{flex-direction:column;gap:10px;display:flex}.kalotyp-preferences-section h4{letter-spacing:.02em;text-transform:uppercase;color:var(--kalotyp-muted);margin:0;font-size:13px;font-weight:600}.kalotyp-preferences-toggle{font-size:var(--kalotyp-text-size);cursor:pointer;align-items:center;gap:10px;display:flex}.kalotyp-preferences-toggle input[type=checkbox]{accent-color:rgb(var(--color-foreground));width:16px;height:16px}.kalotyp-preferences-footer{border-top:1px solid var(--kalotyp-border);justify-content:space-between;align-items:center;gap:8px;margin-top:4px;padding-top:12px;display:flex}.kalotyp-preferences-reset{height:var(--kalotyp-control-height);border:1px solid var(--kalotyp-border);border-radius:var(--kalotyp-radius);color:var(--kalotyp-muted);font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;background:0 0;padding:0 14px}.kalotyp-preferences-reset:hover{background:var(--kalotyp-soft);color:rgb(var(--color-foreground))}.kalotyp-preferences-done{height:var(--kalotyp-control-height);border:1px solid rgb(var(--color-foreground));border-radius:var(--kalotyp-radius);background:rgb(var(--color-foreground));color:rgb(var(--color-background));font:inherit;font-size:var(--kalotyp-text-size);cursor:pointer;padding:0 16px;font-weight:600}.kalotyp-preferences-done:hover{background:rgba(var(--color-foreground), .88)}.kalotyp-preferences-done:focus-visible,.kalotyp-preferences-reset:focus-visible{box-shadow:var(--kalotyp-focus-shadow);outline:none}.kalotyp-nested-overlay--modal .kalotyp-nested-surface.kalotyp-cheatsheet-modal{min-width:380px;max-width:520px;max-height:80vh;overflow-y:auto}.kalotyp-cheatsheet-body{flex-direction:column;gap:18px;display:flex}.kalotyp-cheatsheet-section{flex-direction:column;gap:8px;display:flex}.kalotyp-cheatsheet-heading{letter-spacing:.04em;text-transform:uppercase;color:var(--kalotyp-muted);margin:0;font-size:12px;font-weight:600}.kalotyp-cheatsheet-list{grid-template-columns:minmax(140px,auto) 1fr;align-items:baseline;gap:6px 16px;margin:0;display:grid}.kalotyp-cheatsheet-keys{flex-wrap:wrap;align-items:center;gap:4px;margin:0;display:flex}.kalotyp-cheatsheet-kbd{border:1px solid var(--kalotyp-border);background:var(--kalotyp-soft);min-width:22px;color:rgb(var(--color-foreground));font:inherit;text-align:center;border-bottom-width:2px;border-radius:4px;padding:2px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:500;line-height:1.4;display:inline-block}.kalotyp-cheatsheet-plus{color:var(--kalotyp-muted);font-size:11px}.kalotyp-cheatsheet-description{font-size:var(--kalotyp-text-size);color:rgb(var(--color-foreground));margin:0;line-height:1.4}@media (pointer:coarse){.kalotyp-button-close{position:absolute}.kalotyp-button-close:before{content:"";position:absolute;inset:-6px}.kalotyp-history-button{position:relative}.kalotyp-history-button:before{content:"";position:absolute;inset:-6px}.kalotyp-util-nav-button{position:relative}.kalotyp-util-nav-button:before{content:"";position:absolute;inset:-8px -2px}.kalotyp-handle[data-shape=circle]:before{content:"";z-index:-1;position:absolute;inset:-12px}.kalotyp-handle[data-shape=edge][data-direction=t]:before,.kalotyp-handle[data-shape=edge][data-direction=b]:before{content:"";z-index:-1;position:absolute;inset:-19px 0}.kalotyp-handle[data-shape=edge][data-direction=l]:before,.kalotyp-handle[data-shape=edge][data-direction=r]:before{content:"";z-index:-1;position:absolute;inset:0 -19px}.kalotyp-annotate-handle:before{content:"";position:absolute;inset:-16px}.kalotyp-annotate-tool{position:relative}.kalotyp-annotate-tool:before{content:"";position:absolute;inset:-6px}.kalotyp-annotate-swatch{width:32px;height:32px;position:relative}.kalotyp-annotate-swatch:before{content:"";border-radius:50%;position:absolute;inset:-6px}.kalotyp-annotate-color{width:36px;height:36px;position:relative}.kalotyp-annotate-color:before{content:"";position:absolute;inset:-4px}.kalotyp-preset-button{height:40px;position:relative}.kalotyp-preset-button:before{content:"";position:absolute;inset:-2px}.kalotyp-toggle-button,.kalotyp-rotate-input,.kalotyp-rotate-reset,.kalotyp-quarter-button,.kalotyp-resize-input,.kalotyp-resize-lock{height:40px;min-height:40px}.kalotyp-toggle-button:before,.kalotyp-rotate-reset:before,.kalotyp-quarter-button:before,.kalotyp-resize-lock:before{content:"";position:absolute;inset:-2px}.kalotyp-toggle-button,.kalotyp-rotate-reset,.kalotyp-quarter-button,.kalotyp-resize-lock,.kalotyp-finetune-row-reset{position:relative}.kalotyp-finetune-row-reset:before{content:"";position:absolute;inset:-8px}.kalotyp-finetune-reset-all{height:36px;position:relative}.kalotyp-finetune-reset-all:before{content:"";position:absolute;inset:-4px}.kalotyp-rotate-slider,.kalotyp-finetune-slider,.kalotyp-annotate-stroke{height:44px}.kalotyp-rotate-slider::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}.kalotyp-finetune-slider::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}.kalotyp-annotate-stroke::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}.kalotyp-rotate-slider::-moz-range-thumb{width:24px;height:24px}.kalotyp-finetune-slider::-moz-range-thumb{width:24px;height:24px}.kalotyp-annotate-stroke::-moz-range-thumb{width:24px;height:24px}.kalotyp-button-export{height:44px;padding:0 22px}}@media (max-width:768px){.kalotyp-main{gap:8px;padding:8px 8px 0!important}.kalotyp-nav-tools{flex-wrap:nowrap;gap:8px;min-height:56px;padding:8px 8px 8px 12px}.kalotyp-util-nav{scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:auto;min-width:0;overflow:auto hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 36px calc(100% - 36px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 36px calc(100% - 36px),#0000 100%)}.kalotyp-util-nav::-webkit-scrollbar{display:none}.kalotyp-util-nav-button{scroll-snap-align:start;flex:none}.kalotyp-history-controls,.kalotyp-button-close{flex:none;position:static!important}.kalotyp-nav-tools{padding-right:168px}.kalotyp-button-close{position:absolute!important;top:12px!important;right:8px!important}.kalotyp-button-prefs{position:absolute!important;top:12px!important;right:48px!important}.kalotyp-history-controls{position:absolute!important;top:12px!important;right:88px!important}.kalotyp-util-main{min-height:72px;padding:12px}.kalotyp-util-footer{padding:10px 12px}.pintura-editor .kalotyp-root>.kalotyp-nav-tools{padding:8px 100px 8px 12px!important}.pintura-editor .kalotyp-root[data-env~=landscape] .kalotyp-util-main,.pintura-editor .kalotyp-root[data-env~=landscape] .kalotyp-util-footer{padding-left:12px!important;padding-right:12px!important}.kalotyp-rotate-slider{min-width:140px}.kalotyp-rotate-slider-label{min-width:auto}.kalotyp-resize-panel{align-items:stretch;gap:8px}.kalotyp-resize-row{flex-wrap:wrap;justify-content:center}.kalotyp-finetune-panel{max-width:100%}.kalotyp-finetune-label{text-align:right;width:56px;font-size:12px}.kalotyp-finetune-slider{min-width:80px}.kalotyp-finetune-input{width:56px}.kalotyp-annotate-toolbar{-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;overflow:auto hidden}.kalotyp-annotate-toolbar::-webkit-scrollbar{display:none}.kalotyp-annotate-tool{flex:none}.kalotyp-annotate-style-row{flex-wrap:wrap;gap:8px}.kalotyp-annotate-stroke{min-width:120px}.kalotyp-filter-strip{gap:8px;padding:4px 8px}}@media (max-width:360px){.kalotyp-util-nav{-webkit-mask-image:none;mask-image:none}.pintura-editor .kalotyp-root>.kalotyp-nav-tools,.kalotyp-nav-tools{padding-right:92px!important}}@media (max-height:500px) and (orientation:landscape){.kalotyp-nav-tools{min-height:44px;padding-top:6px;padding-bottom:6px}.kalotyp-main{gap:6px;padding:6px 12px 0!important}.kalotyp-util-main{padding:6px 12px;min-height:56px!important}.kalotyp-util-footer{padding:6px 12px}.kalotyp-button-export{height:40px;padding:0 16px}.kalotyp-button-close,.kalotyp-button-prefs,.kalotyp-history-controls{top:6px!important}}
2
2
  /*$vite$:1*/
package/dist/plugins/annotate/coord-inputs.d.ts CHANGED
@@ -11,15 +11,17 @@
11
11
  * - rect / ellipse → Left, Top, Width, Height (matches crop's
12
12
  * dimension-input pattern from Phase 6.2; same semantics).
13
13
  * - arrow → Start X, Start Y, End X, End Y (the two endpoints).
14
- * - text → X, Y (anchor only; size is driven by the font size
14
+ * - text → X, Y (anchor only; size is driven by the font-size
15
15
  * control, and the inline editor handles the text content).
16
+ * - emoji → X, Y, Size, Angle (the square sticker box; Size and Angle are the
17
+ * keyboard equivalents of dragging a corner / the rotate handle).
16
18
  *
17
19
  * One row instance is reused across selections; it rebuilds its
18
20
  * fields when the selected shape's kind changes. The mount layer
19
21
  * subscribes to the selection and calls `updateForShape(shape)` on
20
22
  * each change so the inputs reflect the live geometry.
21
23
  */
22
- import type { Shape } from '@magicpages/kalotyp-core';
24
+ import { type Shape } from '@magicpages/kalotyp-core';
23
25
  export interface CoordInputsOptions {
24
26
  /**
25
27
  * Called when a typed value commits (blur or Enter). The handler
@@ -49,6 +51,12 @@ export type ShapeCoordEdit = {
49
51
  readonly kind: 'text';
50
52
  readonly x: number;
51
53
  readonly y: number;
54
+ } | {
55
+ readonly kind: 'emoji';
56
+ readonly x: number;
57
+ readonly y: number;
58
+ readonly size: number;
59
+ readonly rotation: number;
52
60
  };
53
61
  export interface CoordInputsHandle {
54
62
  readonly container: HTMLDivElement;
package/dist/plugins/annotate/coord-inputs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"coord-inputs.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/coord-inputs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACpC;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB;IACE,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,GACD;IACE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB,GACD;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;IACnC,oFAAoF;IACpF,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,OAAO,IAAI,IAAI,CAAC;CACjB;AA4BD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,CAsK/E;AAcD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,GAAG,KAAK,CAqCxE"}
1
+ {"version":3,"file":"coord-inputs.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/coord-inputs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAOL,KAAK,KAAK,EAEX,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACpC;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB;IACE,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,GACD;IACE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB,GACD;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GACjE;IACE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEN,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;IACnC,oFAAoF;IACpF,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,OAAO,IAAI,IAAI,CAAC;CACjB;AAsCD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,CAqL/E;AAkBD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,GAAG,KAAK,CAgDxE"}
package/dist/plugins/annotate/emoji-data.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ /**
2
+ * GENERATED FILE — do not edit by hand.
3
+ *
4
+ * Emoji catalogue for the annotate emoji picker. List/names from
5
+ * unicode-emoji-json (MIT); `key` is the OpenMoji (CC-BY-SA-4.0) artwork
6
+ * filename stem, resolved at generation time. Regenerate with `pnpm gen:emoji`
7
+ * — see scripts/gen-emoji-data.mjs.
8
+ *
9
+ * 1914 emojis across 9 groups.
10
+ */
11
+ export interface EmojiEntry {
12
+ /** The emoji character (used for search context and the placed shape). */
13
+ readonly char: string;
14
+ /** CLDR name, used as the search corpus and the picker button's accessible label. */
15
+ readonly name: string;
16
+ /** OpenMoji artwork filename stem; the SVG URL is `<assetBase>/<key>.svg`. */
17
+ readonly key: string;
18
+ }
19
+ export interface EmojiGroup {
20
+ /** Stable group key (the Unicode group slug). */
21
+ readonly id: string;
22
+ /** Human-readable group label for the category tab. */
23
+ readonly label: string;
24
+ readonly emojis: ReadonlyArray<EmojiEntry>;
25
+ }
26
+ export declare const EMOJI_GROUPS: ReadonlyArray<EmojiGroup>;
27
+ //# sourceMappingURL=emoji-data.d.ts.map
package/dist/plugins/annotate/emoji-data.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"emoji-data.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/emoji-data.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,WAAW,UAAU;IACzB,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,UAAU,CAUlD,CAAC"}
package/dist/plugins/annotate/emoji-images.d.ts ADDED
@@ -0,0 +1,47 @@
1
+ /**
2
+ * Emoji artwork loader for the annotate emoji sticker tool.
3
+ *
4
+ * Emoji stickers render as OpenMoji SVGs (crisp at any size) rather than the
5
+ * platform's bitmap emoji font (which blurs when enlarged). The SVGs ship as
6
+ * static same-origin assets next to the bundle; this module resolves their URL,
7
+ * loads them on demand into an `<img>` cache, and hands the decoded image to the
8
+ * shared `paintShape` so the on-screen preview and the bake draw the same pixels.
9
+ *
10
+ * Nothing is fetched until an emoji is actually browsed or placed, and each
11
+ * glyph is loaded once and cached. Until an image is ready (or if the asset is
12
+ * unavailable) `paintShape` falls back to the OS emoji font, so the feature
13
+ * degrades gracefully and never blocks.
14
+ */
15
+ import type { Shape } from '@magicpages/kalotyp-core';
16
+ /** The OpenMoji artwork key for an emoji character, or `undefined` if unknown. */
17
+ export declare function emojiKeyFor(char: string): string | undefined;
18
+ /**
19
+ * Override where emoji SVGs are loaded from. The host (e.g. the Ghost loader)
20
+ * calls this when the assets aren't served at the default `/emoji/` path. A
21
+ * trailing slash is enforced.
22
+ *
23
+ * Best set before the first emoji is used, but a later change is honoured:
24
+ * already-cached images were loaded from the old base, so changing it drops the
25
+ * cache and the next paint reloads from the new base.
26
+ */
27
+ export declare function setEmojiAssetBase(url: string): void;
28
+ /** The same-origin SVG URL for an OpenMoji artwork key. */
29
+ export declare function emojiSvgUrlForKey(key: string): string;
30
+ /** The same-origin SVG URL for an emoji character, or `null` if it has no artwork. */
31
+ export declare function emojiSvgUrl(char: string): string | null;
32
+ /** Register a callback fired whenever an emoji image finishes loading (for repaint). */
33
+ export declare function onEmojiImageLoad(callback: () => void): () => void;
34
+ /**
35
+ * Synchronous resolver consumed by `paintShape`: returns the decoded image if
36
+ * it's ready, otherwise `null` (and kicks off the load so a later repaint — via
37
+ * `onEmojiImageLoad` — can draw it). `null` makes `paintShape` fall back to the
38
+ * OS emoji font.
39
+ */
40
+ export declare function resolveEmojiImage(char: string): CanvasImageSource | null;
41
+ /**
42
+ * Load the artwork for every emoji shape and await it (for the bake, so the
43
+ * saved image gets the crisp SVG rather than the fallback). Bounded by a
44
+ * timeout — a slow or blocked asset must never wedge Save.
45
+ */
46
+ export declare function ensureEmojiImagesLoaded(shapes: ReadonlyArray<Shape>): Promise<void>;
47
+ //# sourceMappingURL=emoji-images.d.ts.map
package/dist/plugins/annotate/emoji-images.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"emoji-images.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/emoji-images.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAQtD,kFAAkF;AAClF,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAE5D;AAID;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAOnD;AAmBD,2DAA2D;AAC3D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAErD;AAED,sFAAsF;AACtF,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGvD;AAWD,wFAAwF;AACxF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAKjE;AAwBD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,iBAAiB,GAAG,IAAI,CAKxE;AAKD;;;;GAIG;AACH,wBAAsB,uBAAuB,CAAC,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CA0BzF"}
package/dist/plugins/annotate/emoji-picker.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ /**
2
+ * Emoji picker popover for the annotate emoji sticker tool.
3
+ *
4
+ * A self-contained overlay (owned by the mount layer, like the inline text
5
+ * editor) with a search box, category tabs, and a scrollable grid. To keep the
6
+ * DOM small the grid renders only the active category — or, while searching,
7
+ * the capped set of name matches — never all ~1,900 cells at once.
8
+ *
9
+ * The picker is purely presentational: clicking a cell reports the chosen
10
+ * character via `onSelect`; the caller arms it as the current emoji and places
11
+ * it on the canvas. The popover is positioned by CSS (absolute, anchored above
12
+ * the panel) so showing it never reflows the stage.
13
+ */
14
+ export interface EmojiPickerOptions {
15
+ readonly host: HTMLElement;
16
+ /** A cell was chosen; the value is the emoji character. */
17
+ onSelect(char: string): void;
18
+ /** The close (×) button was pressed. */
19
+ onClose(): void;
20
+ }
21
+ export interface EmojiPickerHandle {
22
+ readonly element: HTMLDivElement;
23
+ show(): void;
24
+ hide(): void;
25
+ readonly isOpen: boolean;
26
+ destroy(): void;
27
+ }
28
+ export declare function buildEmojiPicker(options: EmojiPickerOptions): EmojiPickerHandle;
29
+ //# sourceMappingURL=emoji-picker.d.ts.map
package/dist/plugins/annotate/emoji-picker.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"emoji-picker.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/emoji-picker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,wCAAwC;IACxC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,OAAO,IAAI,IAAI,CAAC;CACjB;AAOD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,CA+O/E"}
package/dist/plugins/annotate/fonts-loader.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Loads the text-annotation web fonts from fonts.bunny.net — the same
3
+ * GDPR-friendly CDN and family set Ghost's own admin uses, so annotations can
4
+ * match a site's typography. Injection is idempotent: if the link is already
5
+ * present (Ghost may have loaded these, or we ran before), it's a no-op.
6
+ *
7
+ * The bake awaits `document.fonts.load` (with a timeout) before painting, so a
8
+ * slow load never produces a wrong baked image — it just falls back to the
9
+ * generic family if the face isn't ready in time.
10
+ */
11
+ /**
12
+ * Inject the Bunny stylesheet once (idempotent) and invoke `onFontsChanged`
13
+ * whenever font faces finish loading. Web fonts arrive asynchronously: the
14
+ * canvas first paints with a fallback face, then the real face swaps in with
15
+ * different metrics — so the caller must repaint the shapes when fonts load,
16
+ * or committed text appears to shift on the next interaction. `loadingdone`
17
+ * fires for each batch the document loads (including fonts Ghost or other tools
18
+ * trigger), and `fonts.ready` covers any already-pending load. Returns a
19
+ * cleanup that detaches the listener.
20
+ */
21
+ export declare function ensureAnnotateFontsLoaded(onFontsChanged?: () => void): () => void;
22
+ //# sourceMappingURL=fonts-loader.d.ts.map
package/dist/plugins/annotate/fonts-loader.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fonts-loader.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/fonts-loader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAeH;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAejF"}
package/dist/plugins/annotate/mount.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/mount.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EACL,KAAK,aAAa,EAclB,KAAK,WAAW,EAChB,KAAK,KAAK,EAQV,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AAmBlC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IACrC,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IACvC,6DAA6D;IAC7D,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,oBAAoB,GAAG,mBAAmB,CAucvF"}
1
+ {"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/mount.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EACL,KAAK,aAAa,EAelB,KAAK,WAAW,EAChB,KAAK,KAAK,EAQV,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AAuBlC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IACrC,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IACvC,6DAA6D;IAC7D,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,oBAAoB,GAAG,mBAAmB,CA6rBvF"}
package/dist/plugins/annotate/panel.d.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  * other Phase 2 panels (rotate, flip, resize) established — flat
5
5
  * row(s) of controls under `.kalotyp-util-main`.
6
6
  */
7
- import { type AnnotateTool, type StylePalette } from '@magicpages/kalotyp-core';
7
+ import { type AnnotateTool, type StylePalette, type TextAlign } from '@magicpages/kalotyp-core';
8
8
  export interface AnnotatePanelOptions {
9
9
  readonly initialTool: AnnotateTool;
10
10
  readonly initialStyle: StylePalette;
@@ -18,6 +18,11 @@ export interface AnnotatePanelOptions {
18
18
  onSelectTool(tool: AnnotateTool): void;
19
19
  onColorChange(color: string): void;
20
20
  onStrokeWidthChange(width: number): void;
21
+ onFontFamilyChange(fontFamily: string): void;
22
+ onFontSizeChange(fontSize: number): void;
23
+ onToggleBold(): void;
24
+ onToggleItalic(): void;
25
+ onAlignChange(align: TextAlign): void;
21
26
  onDeleteSelected(): void;
22
27
  /**
23
28
  * Insert the active drawing tool's default shape at image centre
@@ -33,11 +38,25 @@ export interface AnnotatePanel {
33
38
  readonly hexInput: HTMLInputElement;
34
39
  readonly colorSwatches: ReadonlyArray<HTMLButtonElement>;
35
40
  readonly strokeRange: HTMLInputElement;
41
+ readonly fontSelect: HTMLSelectElement;
42
+ readonly fontSizeInput: HTMLInputElement;
43
+ readonly boldButton: HTMLButtonElement;
44
+ readonly italicButton: HTMLButtonElement;
45
+ readonly alignButtons: ReadonlyMap<TextAlign, HTMLButtonElement>;
36
46
  readonly deleteButton: HTMLButtonElement;
37
47
  readonly insertButton: HTMLButtonElement;
38
48
  setActiveTool(tool: AnnotateTool): void;
39
49
  setStyle(style: StylePalette): void;
40
50
  setCanDelete(canDelete: boolean): void;
51
+ /**
52
+ * Show the per-mode controls for the active tool / selection. `text` reveals
53
+ * the font/size/bold/italic/align row; `emoji` hides the colour + stroke
54
+ * controls (an emoji carries its own colour). Stroke width hides for both.
55
+ */
56
+ setControlsMode(mode: {
57
+ readonly text: boolean;
58
+ readonly emoji: boolean;
59
+ }): void;
41
60
  }
42
61
  export declare function buildAnnotatePanel(options: AnnotatePanelOptions): AnnotatePanel;
43
62
  //# sourceMappingURL=panel.d.ts.map
package/dist/plugins/annotate/panel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,KAAK,YAAY,EAEjB,KAAK,YAAY,EAClB,MAAM,0BAA0B,CAAC;AAGlC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,YAAY,CAAC;IACnC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,YAAY,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IACvC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,gBAAgB,IAAI,IAAI,CAAC;IACzB;;;;;OAKG;IACH,gBAAgB,IAAI,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;IACnE,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACzD,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC;IACvC,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,aAAa,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;CACxC;AAsCD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,CAoL/E"}
1
+ {"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,KAAK,YAAY,EAEjB,KAAK,YAAY,EAEjB,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAGlC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,YAAY,CAAC;IACnC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,YAAY,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IACvC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7C,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,YAAY,IAAI,IAAI,CAAC;IACrB,cAAc,IAAI,IAAI,CAAC;IACvB,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACtC,gBAAgB,IAAI,IAAI,CAAC;IACzB;;;;;OAKG;IACH,gBAAgB,IAAI,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;IACnE,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACzD,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC;IACvC,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC;IACvC,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC;IACzC,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC;IACvC,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,YAAY,EAAE,WAAW,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;IACjE,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,aAAa,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC;;;;OAIG;IACH,eAAe,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;CAClF;AA4CD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,CAyT/E"}
package/dist/plugins/annotate/plugin.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,aAAa,EACnB,MAAM,0BAA0B,CAAC;AAGlC,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;CACjC;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,qBAAqB,GAAG,aAAa,CAAC,aAAa,CAAC,CAmBjG"}
1
+ {"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,aAAa,EACnB,MAAM,0BAA0B,CAAC;AAIlC,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;CACjC;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,qBAAqB,GAAG,aAAa,CAAC,aAAa,CAAC,CAwBjG"}
package/dist/plugins/annotate/render.d.ts CHANGED
@@ -15,7 +15,7 @@
15
15
  * from the core `bake.ts` module so the live preview is byte-equal to
16
16
  * the bake output (per shape).
17
17
  */
18
- import { type Shape, type SourceImage, type Viewport } from '@magicpages/kalotyp-core';
18
+ import { type PaintShapeOptions, type Shape, type SourceImage, type Viewport } from '@magicpages/kalotyp-core';
19
19
  export declare function paintImageLayer(canvas: HTMLCanvasElement, source: SourceImage, stageWidth: number, stageHeight: number, viewport: Viewport): void;
20
20
  /**
21
21
  * Paint a list of shapes by setting up an image-space coordinate
@@ -24,13 +24,13 @@ export declare function paintImageLayer(canvas: HTMLCanvasElement, source: Sourc
24
24
  * scaling by the viewport scale; the shapes' image-space coordinates
25
25
  * then land at the right display pixels for free.
26
26
  */
27
- export declare function paintShapesLayer(canvas: HTMLCanvasElement, shapes: ReadonlyArray<Shape>, stageWidth: number, stageHeight: number, viewport: Viewport): void;
27
+ export declare function paintShapesLayer(canvas: HTMLCanvasElement, shapes: ReadonlyArray<Shape>, stageWidth: number, stageHeight: number, viewport: Viewport, opts?: PaintShapeOptions): void;
28
28
  /**
29
29
  * Paint a single in-progress shape on the live canvas. Same
30
30
  * coordinate setup as the shapes layer; passing `null` clears the
31
31
  * canvas without drawing — useful when a gesture ends.
32
32
  */
33
- export declare function paintLiveLayer(canvas: HTMLCanvasElement, shape: Shape | null, stageWidth: number, stageHeight: number, viewport: Viewport): void;
33
+ export declare function paintLiveLayer(canvas: HTMLCanvasElement, shape: Shape | null, stageWidth: number, stageHeight: number, viewport: Viewport, opts?: PaintShapeOptions): void;
34
34
  /**
35
35
  * Paint a selection-marquee rectangle (image-space) on the live
36
36
  * canvas. Distinct from `paintLiveLayer` because the marquee uses
package/dist/plugins/annotate/render.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAc,KAAK,KAAK,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AA0BnG,wBAAgB,eAAe,CAC7B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACjB,IAAI,CAYN;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,EAC5B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACjB,IAAI,CAWN;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACjB,IAAI,CASN;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,iBAAiB,EACzB,YAAY,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,EAC5E,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACjB,IAAI,CA+BN"}
1
+ {"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EACL,KAAK,iBAAiB,EAEtB,KAAK,KAAK,EACV,KAAK,WAAW,EAChB,KAAK,QAAQ,EACd,MAAM,0BAA0B,CAAC;AA0BlC,wBAAgB,eAAe,CAC7B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACjB,IAAI,CAYN;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,EAC5B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,CAAC,EAAE,iBAAiB,GACvB,IAAI,CAWN;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,CAAC,EAAE,iBAAiB,GACvB,IAAI,CASN;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,iBAAiB,EACzB,YAAY,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,EAC5E,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACjB,IAAI,CA+BN"}
package/dist/plugins/annotate/selection.d.ts CHANGED
@@ -14,7 +14,7 @@
14
14
  * manipulators. Reusing that helper keeps the handle DOM consistent
15
15
  * with crop's so future styling can target both with a single rule.
16
16
  */
17
- import { type AnnotateState, type Shape, type Viewport } from '@magicpages/kalotyp-core';
17
+ import { type AnnotateState, type SelectionHandle, type Shape, type Viewport } from '@magicpages/kalotyp-core';
18
18
  import type { ToolGestureContext } from './tools.js';
19
19
  /**
20
20
  * Build and own the selection-handle DOM. The returned object exposes
@@ -34,6 +34,34 @@ export interface SelectionLayer {
34
34
  destroy(): void;
35
35
  }
36
36
  export declare function buildSelectionLayer(options: SelectionLayerOptions): SelectionLayer;
37
+ /**
38
+ * Build the per-handle resize gesture. Snapshots the selected shape
39
+ * at gesture start; each move computes the new image-space pointer
40
+ * position and applies it via the appropriate per-shape mutator.
41
+ *
42
+ * Returns `null` if no shape is selected when the handle is pressed
43
+ * (defensive — UI should hide handles in that case).
44
+ */
45
+ /**
46
+ * The rotation (degrees, CW) that aims the box's "up" edge toward `pointer`,
47
+ * about the box `center`. Pointer directly above the centre → 0°. Exported so
48
+ * the angle math can be unit-tested without a live gesture.
49
+ */
50
+ export declare function emojiRotationFromPointer(center: {
51
+ x: number;
52
+ y: number;
53
+ }, pointer: {
54
+ x: number;
55
+ y: number;
56
+ }): number;
57
+ /**
58
+ * Map a handle drag to a new shape. Exported for unit testing; the gesture
59
+ * wrapper calls it on each pointer move.
60
+ */
61
+ export declare function applyHandleDrag(shape: Shape, direction: SelectionHandle, image: {
62
+ x: number;
63
+ y: number;
64
+ }): Shape | null;
37
65
  /**
38
66
  * Helper for the mount layer: which shape (if any) is selected, given
39
67
  * the current state? Keeps the lookup logic in one place — most
package/dist/plugins/annotate/selection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAEL,KAAK,aAAa,EAOlB,KAAK,KAAK,EAEV,KAAK,QAAQ,EACd,MAAM,0BAA0B,CAAC;AAGlC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,YAAY,EAAE,WAAW,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,kBAAkB,CAAC;IACzC,iEAAiE;IACjE,WAAW,IAAI,QAAQ,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtD,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,GAAG,cAAc,CAwElF;AA8ID;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,GAAG,IAAI,CAGlE"}
1
+ {"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../src/plugins/annotate/selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAEL,KAAK,aAAa,EAQlB,KAAK,eAAe,EACpB,KAAK,KAAK,EAEV,KAAK,QAAQ,EACd,MAAM,0BAA0B,CAAC;AAGlC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAOrD;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,YAAY,EAAE,WAAW,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,kBAAkB,CAAC;IACzC,iEAAiE;IACjE,WAAW,IAAI,QAAQ,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtD,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,GAAG,cAAc,CAkHlF;AAwBD;;;;;;;GAOG;AACH;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,OAAO,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAChC,MAAM,CAGR;AA0DD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAC9B,KAAK,GAAG,IAAI,CAkEd;AAuBD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,GAAG,IAAI,CAGlE"}