@jjlmoya/utils-audiovisual 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jjlmoya/utils-audiovisual",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/tool/chromaticLens/component.astro

@@ -177,7 +177,7 @@ const { ui } = Astro.props;
 </script>
 
 <style>
-.cl-root {
+:global(.cl-root) {
   --cl-bg: #fff;
   --cl-bg-elevated: #f8fafc;
   --cl-border: #e2e8f0;
@@ -195,7 +195,7 @@ const { ui } = Astro.props;
   margin: 0 auto;
 }
 
-:global(.theme-dark) .cl-root {
+:global(.theme-dark .cl-root) {
   --cl-bg: #18181b;
   --cl-bg-elevated: #27272a;
   --cl-border: #3f3f46;
@@ -209,7 +209,7 @@ const { ui } = Astro.props;
   --cl-shadow: rgba(0, 0, 0, 0.5);
 }
 
-.cl-card {
+:global(.cl-card) {
   background: var(--cl-bg);
   border: 1px solid var(--cl-border);
   border-radius: 3rem;
@@ -219,7 +219,7 @@ const { ui } = Astro.props;
   overflow: hidden;
 }
 
-.cl-drop {
+:global(.cl-drop) {
   padding: 5rem 2rem;
   display: flex;
   flex-direction: column;
@@ -232,13 +232,13 @@ const { ui } = Astro.props;
   gap: 0.5rem;
 }
 
-.cl-drop:hover,
-.cl-drop-active {
+:global(.cl-drop:hover),
+:global(.cl-drop-active) {
   background: var(--cl-accent-alpha-hover);
   border-color: var(--cl-accent);
 }
 
-.cl-drop-icon {
+:global(.cl-drop-icon) {
   width: 5rem;
   height: 5rem;
   background: var(--cl-accent-alpha);
@@ -250,30 +250,30 @@ const { ui } = Astro.props;
   color: var(--cl-accent);
 }
 
-.cl-drop-icon svg {
+:global(.cl-drop-icon svg) {
   width: 2.5rem;
   height: 2.5rem;
 }
 
-.cl-drop-title {
+:global(.cl-drop-title) {
   font-size: 2rem;
   font-weight: 950;
   color: var(--cl-text);
   margin: 0;
 }
 
-.cl-drop-sub {
+:global(.cl-drop-sub) {
   font-size: 1.1rem;
   color: var(--cl-text-muted);
   margin: 0;
   font-weight: 600;
 }
 
-.cl-workspace {
+:global(.cl-workspace) {
   padding: 1.5rem;
 }
 
-.cl-mini-drop {
+:global(.cl-mini-drop) {
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
@@ -289,17 +289,17 @@ const { ui } = Astro.props;
   transition: border-color 0.2s, color 0.2s;
 }
 
-.cl-mini-drop:hover {
+:global(.cl-mini-drop:hover) {
   border-color: var(--cl-accent);
   color: var(--cl-accent);
 }
 
-.cl-mini-drop svg {
+:global(.cl-mini-drop svg) {
   width: 1.1rem;
   height: 1.1rem;
 }
 
-.cl-config-bar {
+:global(.cl-config-bar) {
   padding: 1rem 0;
   margin-bottom: 2rem;
   border-bottom: 1px solid var(--cl-border);
@@ -307,13 +307,13 @@ const { ui } = Astro.props;
   justify-content: flex-end;
 }
 
-.cl-config-item {
+:global(.cl-config-item) {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
 
-.cl-config-label {
+:global(.cl-config-label) {
   font-size: 0.75rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -321,7 +321,7 @@ const { ui } = Astro.props;
   letter-spacing: 0.1em;
 }
 
-.cl-count-select {
+:global(.cl-count-select) {
   padding: 0.5rem 1rem;
   border-radius: 0.75rem;
   background: var(--cl-bg-elevated);
@@ -331,58 +331,58 @@ const { ui } = Astro.props;
   cursor: pointer;
 }
 
-.cl-result-layout {
+:global(.cl-result-layout) {
   display: grid;
   grid-template-columns: 1fr 1.25fr;
   gap: 3rem;
 }
 
 @media (max-width: 800px) {
-  .cl-result-layout {
+  :global(.cl-result-layout) {
     grid-template-columns: 1fr;
   }
 }
 
-.cl-preview-col {
+:global(.cl-preview-col) {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-.cl-preview-img {
+:global(.cl-preview-img) {
   width: 100%;
   border-radius: 1.5rem;
   box-shadow: 0 20px 40px var(--cl-shadow);
   display: block;
 }
 
-.cl-palette-col {
+:global(.cl-palette-col) {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-.cl-palette-header {
+:global(.cl-palette-header) {
   display: flex;
   align-items: center;
   gap: 1rem;
   color: var(--cl-accent);
 }
 
-.cl-palette-header svg {
+:global(.cl-palette-header svg) {
   width: 1.25rem;
   height: 1.25rem;
   flex-shrink: 0;
 }
 
-.cl-palette-header h4 {
+:global(.cl-palette-header h4) {
   font-size: 1.25rem;
   font-weight: 950;
   color: var(--cl-text);
   margin: 0;
 }
 
-.cl-loader {
+:global(.cl-loader) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -390,7 +390,7 @@ const { ui } = Astro.props;
   padding: 2rem 0;
 }
 
-.cl-spinner {
+:global(.cl-spinner) {
   width: 3rem;
   height: 3rem;
   border: 3px solid var(--cl-accent-alpha);
@@ -399,7 +399,7 @@ const { ui } = Astro.props;
   animation: cl-spin 0.8s linear infinite;
 }
 
-.cl-loader-text {
+:global(.cl-loader-text) {
   font-size: 0.75rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -408,14 +408,14 @@ const { ui } = Astro.props;
   margin: 0;
 }
 
-.cl-swatches {
+:global(.cl-swatches) {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   animation: cl-fade-up 0.5s ease;
 }
 
-.cl-swatch {
+:global(.cl-swatch) {
   display: flex;
   align-items: center;
   gap: 1.25rem;
@@ -427,17 +427,17 @@ const { ui } = Astro.props;
   transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s;
 }
 
-.cl-swatch:hover {
+:global(.cl-swatch:hover) {
   transform: scale(1.02);
   border-color: var(--cl-accent);
 }
 
-.cl-swatch-copied {
+:global(.cl-swatch-copied) {
   background: var(--cl-emerald-alpha);
   border-color: var(--cl-emerald);
 }
 
-.cl-swatch-color {
+:global(.cl-swatch-color) {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 0.75rem;
@@ -445,19 +445,19 @@ const { ui } = Astro.props;
   flex-shrink: 0;
 }
 
-.cl-swatch-info {
+:global(.cl-swatch-info) {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
 }
 
-.cl-swatch-hex {
+:global(.cl-swatch-hex) {
   font-weight: 950;
   color: var(--cl-text);
   font-size: 1.25rem;
 }
 
-.cl-swatch-action {
+:global(.cl-swatch-action) {
   font-size: 0.7rem;
   font-weight: 900;
   color: var(--cl-text-muted);
@@ -465,7 +465,7 @@ const { ui } = Astro.props;
   letter-spacing: 0.05em;
 }
 
-.cl-hidden {
+:global(.cl-hidden) {
   display: none;
 }
 

package/src/tool/collageMaker/component.astro

@@ -246,7 +246,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
     ctx.fillRect(0, 0, W, H);
     for (let i = 0; i < Math.min(images.length, pos.length); i++) {
       const p = pos[i]!;
-      await drawImage(ctx, images[i]!.src, p[0], p[1], p[2], p[3]);
+      await drawImage(ctx, images[i]!.src, { x: p[0], y: p[1], w: p[2], h: p[3] });
       if (gap > 0) { ctx.strokeStyle = bcInput.value; ctx.lineWidth = gap; ctx.strokeRect(p[0]-gap/2, p[1]-gap/2, p[2]+gap, p[3]+gap); }
     }
     canvas.style.display = '';
@@ -301,7 +301,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
 </script>
 
 <style>
-.cm-root {
+:global(.cm-root) {
   --cm-bg: #fff;
   --cm-bg-muted: #f8fafc;
   --cm-border: #e2e8f0;
@@ -317,7 +317,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   padding: 1rem;
 }
 
-:global(.theme-dark) .cm-root {
+:global(.theme-dark .cm-root) {
   --cm-bg: #1e293b;
   --cm-bg-muted: #0f172a;
   --cm-border: #334155;
@@ -328,7 +328,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   --cm-shadow: rgba(0,0,0,0.4);
 }
 
-.cm-card {
+:global(.cm-card) {
   background: var(--cm-bg);
   border: 1px solid var(--cm-border);
   border-radius: var(--cm-radius);
@@ -336,7 +336,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   overflow: hidden;
 }
 
-.cm-top-row {
+:global(.cm-top-row) {
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 0;
@@ -348,7 +348,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   }
 }
 
-.cm-left-col {
+:global(.cm-left-col) {
   padding: 1.25rem;
   border-right: 1px solid var(--cm-border);
   display: flex;
@@ -363,7 +363,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   }
 }
 
-.cm-drop-zone {
+:global(.cm-drop-zone) {
   position: relative;
   background: var(--cm-bg-muted);
   border: 2px dashed var(--cm-border);
@@ -379,7 +379,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   color: var(--cm-primary);
 }
 
-.cm-drop-zone input[type="file"] {
+:global(.cm-drop-zone input[type="file"]) {
   position: absolute;
   inset: 0;
   opacity: 0;
@@ -388,32 +388,32 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   height: 100%;
 }
 
-.cm-drop-zone:hover,
-.cm-drop-zone-over {
+:global(.cm-drop-zone:hover),
+:global(.cm-drop-zone-over) {
   border-color: var(--cm-primary);
   background: var(--cm-primary-light);
 }
 
-.cm-drop-title {
+:global(.cm-drop-title) {
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--cm-text);
   margin: 0;
 }
 
-.cm-drop-sub {
+:global(.cm-drop-sub) {
   font-size: 0.75rem;
   color: var(--cm-text-muted);
   margin: 0;
 }
 
-.cm-drop-link {
+:global(.cm-drop-link) {
   color: var(--cm-primary);
   font-weight: 600;
   cursor: pointer;
 }
 
-.cm-section-label {
+:global(.cm-section-label) {
   display: block;
   font-size: 0.65rem;
   font-weight: 700;
@@ -422,13 +422,13 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   color: var(--cm-text-muted);
 }
 
-.cm-section-header {
+:global(.cm-section-header) {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.cm-badge {
+:global(.cm-badge) {
   background: var(--cm-primary-light);
   color: var(--cm-primary);
   font-size: 0.65rem;
@@ -437,14 +437,14 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   border-radius: 9999px;
 }
 
-.cm-thumbs {
+:global(.cm-thumbs) {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
   gap: 0.35rem;
   margin-top: 0.5rem;
 }
 
-.cm-thumb {
+:global(.cm-thumb) {
   position: relative;
   aspect-ratio: 1;
   border-radius: 0.4rem;
@@ -453,18 +453,18 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   transition: border-color 0.15s;
 }
 
-.cm-thumb:hover {
+:global(.cm-thumb:hover) {
   border-color: var(--cm-primary);
 }
 
-.cm-thumb img {
+:global(.cm-thumb img) {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 
-.cm-thumb-num {
+:global(.cm-thumb-num) {
   position: absolute;
   bottom: 2px;
   left: 3px;
@@ -475,7 +475,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   line-height: 1;
 }
 
-.cm-thumb-del {
+:global(.cm-thumb-del) {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -493,15 +493,15 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   transition: background 0.15s;
 }
 
-.cm-thumb:hover .cm-thumb-del {
+:global(.cm-thumb:hover .cm-thumb-del) {
   display: flex;
 }
 
-.cm-thumb-del:hover {
+:global(.cm-thumb-del:hover) {
   background: #dc2626;
 }
 
-.cm-preview-col {
+:global(.cm-preview-col) {
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
@@ -509,7 +509,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   min-height: 260px;
 }
 
-.cm-preview-placeholder {
+:global(.cm-preview-placeholder) {
   flex: 1;
   background: var(--cm-bg-muted);
   border: 2px dashed var(--cm-border);
@@ -522,12 +522,12 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   color: var(--cm-text-muted);
 }
 
-.cm-preview-placeholder p {
+:global(.cm-preview-placeholder p) {
   font-size: 0.8rem;
   margin: 0;
 }
 
-.cm-canvas {
+:global(.cm-canvas) {
   width: 100%;
   height: auto;
   border-radius: 0.75rem;
@@ -535,7 +535,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   display: block;
 }
 
-.cm-dims-badge {
+:global(.cm-dims-badge) {
   font-size: 0.65rem;
   font-weight: 600;
   color: var(--cm-text-muted);
@@ -545,7 +545,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   padding: 0.15rem 0.5rem;
 }
 
-.cm-section-divider {
+:global(.cm-section-divider) {
   border-top: 1px solid var(--cm-border);
   padding: 1rem 1.25rem;
   display: flex;
@@ -553,13 +553,13 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   gap: 0.75rem;
 }
 
-.cm-layouts {
+:global(.cm-layouts) {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
   gap: 0.4rem;
 }
 
-.cm-layout-btn {
+:global(.cm-layout-btn) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -574,31 +574,31 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   position: relative;
 }
 
-.cm-layout-btn span {
+:global(.cm-layout-btn span) {
   font-size: 0.55rem;
   font-weight: 600;
   text-align: center;
   line-height: 1.2;
 }
 
-.cm-layout-btn:hover:not(:disabled) {
+:global(.cm-layout-btn:hover:not(:disabled)) {
   border-color: var(--cm-primary);
   color: var(--cm-primary);
   background: var(--cm-primary-light);
 }
 
-.cm-layout-btn-active {
+:global(.cm-layout-btn-active) {
   border-color: var(--cm-primary);
   background: var(--cm-primary-light);
   color: var(--cm-primary);
 }
 
-.cm-layout-btn-disabled {
+:global(.cm-layout-btn-disabled) {
   opacity: 0.45;
   cursor: not-allowed;
 }
 
-.cm-layout-need {
+:global(.cm-layout-need) {
   position: absolute;
   top: 2px;
   right: 4px;
@@ -612,37 +612,37 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   line-height: 1.4;
 }
 
-.cm-settings-inline {
+:global(.cm-settings-inline) {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 1rem;
 }
 
-.cm-setting {
+:global(.cm-setting) {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
 }
 
-.cm-setting-label {
+:global(.cm-setting-label) {
   font-size: 0.7rem;
   font-weight: 600;
   color: var(--cm-text-muted);
 }
 
-.cm-slider {
+:global(.cm-slider) {
   accent-color: var(--cm-primary);
   width: 120px;
 }
 
-.cm-color-row {
+:global(.cm-color-row) {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
-.cm-color-swatch {
+:global(.cm-color-swatch) {
   width: 32px;
   height: 32px;
   border: 2px solid var(--cm-border);
@@ -652,14 +652,14 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   background: transparent;
 }
 
-.cm-color-code {
+:global(.cm-color-code) {
   font-size: 0.7rem;
   font-weight: 600;
   color: var(--cm-text-muted);
   font-variant-numeric: tabular-nums;
 }
 
-.cm-download-btn {
+:global(.cm-download-btn) {
   display: flex;
   align-items: center;
   gap: 0.4rem;
@@ -677,13 +677,13 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   margin-left: auto;
 }
 
-.cm-download-btn:disabled {
+:global(.cm-download-btn:disabled) {
   opacity: 0.4;
   cursor: not-allowed;
   box-shadow: none;
 }
 
-.cm-download-btn:not(:disabled):hover {
+:global(.cm-download-btn:not(:disabled):hover) {
   transform: translateY(-1px);
   box-shadow: 0 6px 18px rgba(99,102,241,0.4);
 }