@jjlmoya/utils-audiovisual 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-audiovisual",
-    "version": "1.15.0",
+    "version": "1.17.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -10,7 +10,8 @@
         "./entries": "./src/entries.ts"
     },
     "files": [
-        "src"
+        "src",
+        "scripts"
     ],
     "publishConfig": {
         "access": "public"
@@ -29,7 +30,8 @@
         "postversion": "git push && git push --tags",
         "patch": "npm version patch",
         "minor": "npm version minor",
-        "major": "npm version major"
+        "major": "npm version major",
+        "postinstall": "node scripts/postinstall.mjs"
     },
     "lint-staged": {
         "*.{ts,tsx,astro}": [

package/scripts/postinstall.mjs

@@ -0,0 +1,27 @@
+import { readFileSync, writeFileSync, mkdirSync, readdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const libDir = dirname(fileURLToPath(import.meta.url));
+const toolsDir = join(libDir, '../src/tool');
+
+const inNodeModules = libDir.includes('node_modules');
+if (!inNodeModules) process.exit(0);
+
+const projectRoot = join(libDir, '../../../..');
+const categoryKey = JSON.parse(readFileSync(join(libDir, '../package.json'), 'utf8')).name.replace('@jjlmoya/utils-', '');
+const destDir = join(projectRoot, `public/styles/lib/${categoryKey}`);
+
+mkdirSync(destDir, { recursive: true });
+
+const tools = readdirSync(toolsDir, { withFileTypes: true }).filter(d => d.isDirectory());
+for (const tool of tools) {
+    const toolDir = join(toolsDir, tool.name);
+    let files;
+    try { files = readdirSync(toolDir).filter(f => f.endsWith('.css')); }
+    catch { continue; }
+    for (const file of files) {
+        writeFileSync(join(destDir, file), readFileSync(join(toolDir, file)));
+        console.log(`[@jjlmoya/utils-${categoryKey}] copied ${file}`);
+    }
+}

package/src/tool/chromaticLens/component.astro

@@ -176,313 +176,4 @@ const { ui } = Astro.props;
   document.addEventListener('astro:page-load', init);
 </script>
 
-<style>
-:global(.cl-root) {
-  --cl-bg: #fff;
-  --cl-bg-elevated: #f8fafc;
-  --cl-border: #e2e8f0;
-  --cl-text: #0f172a;
-  --cl-text-muted: #64748b;
-  --cl-accent: #6366f1;
-  --cl-accent-alpha: rgba(99, 102, 241, 0.08);
-  --cl-accent-alpha-hover: rgba(99, 102, 241, 0.04);
-  --cl-emerald: #10b981;
-  --cl-emerald-alpha: rgba(16, 185, 129, 0.06);
-  --cl-shadow: rgba(0, 0, 0, 0.15);
 
-  padding: 2.5rem 1.5rem;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-:global(.theme-dark .cl-root) {
-  --cl-bg: #18181b;
-  --cl-bg-elevated: #27272a;
-  --cl-border: #3f3f46;
-  --cl-text: #f4f4f5;
-  --cl-text-muted: #71717a;
-  --cl-accent: #818cf8;
-  --cl-accent-alpha: rgba(129, 140, 248, 0.12);
-  --cl-accent-alpha-hover: rgba(129, 140, 248, 0.06);
-  --cl-emerald: #34d399;
-  --cl-emerald-alpha: rgba(52, 211, 153, 0.08);
-  --cl-shadow: rgba(0, 0, 0, 0.5);
-}
-
-:global(.cl-card) {
-  background: var(--cl-bg);
-  border: 1px solid var(--cl-border);
-  border-radius: 3rem;
-  padding: 1.5rem;
-  box-shadow: 0 45px 120px -30px var(--cl-shadow);
-  position: relative;
-  overflow: hidden;
-}
-
-:global(.cl-drop) {
-  padding: 5rem 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border: 3px dashed var(--cl-border);
-  border-radius: 2.5rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-align: center;
-  gap: 0.5rem;
-}
-
-:global(.cl-drop:hover),
-:global(.cl-drop-active) {
-  background: var(--cl-accent-alpha-hover);
-  border-color: var(--cl-accent);
-}
-
-:global(.cl-drop-icon) {
-  width: 5rem;
-  height: 5rem;
-  background: var(--cl-accent-alpha);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1rem;
-  color: var(--cl-accent);
-}
-
-:global(.cl-drop-icon svg) {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-:global(.cl-drop-title) {
-  font-size: 2rem;
-  font-weight: 950;
-  color: var(--cl-text);
-  margin: 0;
-}
-
-:global(.cl-drop-sub) {
-  font-size: 1.1rem;
-  color: var(--cl-text-muted);
-  margin: 0;
-  font-weight: 600;
-}
-
-:global(.cl-workspace) {
-  padding: 1.5rem;
-}
-
-:global(.cl-mini-drop) {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1.25rem;
-  background: var(--cl-bg-elevated);
-  border: 1px solid var(--cl-border);
-  border-radius: 1rem;
-  font-size: 0.75rem;
-  font-weight: 800;
-  color: var(--cl-text-muted);
-  cursor: pointer;
-  margin-bottom: 2rem;
-  transition: border-color 0.2s, color 0.2s;
-}
-
-:global(.cl-mini-drop:hover) {
-  border-color: var(--cl-accent);
-  color: var(--cl-accent);
-}
-
-:global(.cl-mini-drop svg) {
-  width: 1.1rem;
-  height: 1.1rem;
-}
-
-:global(.cl-config-bar) {
-  padding: 1rem 0;
-  margin-bottom: 2rem;
-  border-bottom: 1px solid var(--cl-border);
-  display: flex;
-  justify-content: flex-end;
-}
-
-:global(.cl-config-item) {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-:global(.cl-config-label) {
-  font-size: 0.75rem;
-  font-weight: 900;
-  text-transform: uppercase;
-  color: var(--cl-text-muted);
-  letter-spacing: 0.1em;
-}
-
-:global(.cl-count-select) {
-  padding: 0.5rem 1rem;
-  border-radius: 0.75rem;
-  background: var(--cl-bg-elevated);
-  border: 1px solid var(--cl-border);
-  color: var(--cl-text);
-  font-weight: 800;
-  cursor: pointer;
-}
-
-:global(.cl-result-layout) {
-  display: grid;
-  grid-template-columns: 1fr 1.25fr;
-  gap: 3rem;
-}
-
-@media (max-width: 800px) {
-  :global(.cl-result-layout) {
-    grid-template-columns: 1fr;
-  }
-}
-
-:global(.cl-preview-col) {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-:global(.cl-preview-img) {
-  width: 100%;
-  border-radius: 1.5rem;
-  box-shadow: 0 20px 40px var(--cl-shadow);
-  display: block;
-}
-
-:global(.cl-palette-col) {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-:global(.cl-palette-header) {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  color: var(--cl-accent);
-}
-
-:global(.cl-palette-header svg) {
-  width: 1.25rem;
-  height: 1.25rem;
-  flex-shrink: 0;
-}
-
-:global(.cl-palette-header h4) {
-  font-size: 1.25rem;
-  font-weight: 950;
-  color: var(--cl-text);
-  margin: 0;
-}
-
-:global(.cl-loader) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 2rem 0;
-}
-
-:global(.cl-spinner) {
-  width: 3rem;
-  height: 3rem;
-  border: 3px solid var(--cl-accent-alpha);
-  border-top-color: var(--cl-accent);
-  border-radius: 50%;
-  animation: cl-spin 0.8s linear infinite;
-}
-
-:global(.cl-loader-text) {
-  font-size: 0.75rem;
-  font-weight: 900;
-  text-transform: uppercase;
-  color: var(--cl-text-muted);
-  letter-spacing: 0.1em;
-  margin: 0;
-}
-
-:global(.cl-swatches) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  animation: cl-fade-up 0.5s ease;
-}
-
-:global(.cl-swatch) {
-  display: flex;
-  align-items: center;
-  gap: 1.25rem;
-  background: var(--cl-bg-elevated);
-  border-radius: 1.25rem;
-  padding: 1rem;
-  border: 1px solid var(--cl-border);
-  cursor: pointer;
-  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s;
-}
-
-:global(.cl-swatch:hover) {
-  transform: scale(1.02);
-  border-color: var(--cl-accent);
-}
-
-:global(.cl-swatch-copied) {
-  background: var(--cl-emerald-alpha);
-  border-color: var(--cl-emerald);
-}
-
-:global(.cl-swatch-color) {
-  width: 3.5rem;
-  height: 3.5rem;
-  border-radius: 0.75rem;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
-  flex-shrink: 0;
-}
-
-:global(.cl-swatch-info) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-
-:global(.cl-swatch-hex) {
-  font-weight: 950;
-  color: var(--cl-text);
-  font-size: 1.25rem;
-}
-
-:global(.cl-swatch-action) {
-  font-size: 0.7rem;
-  font-weight: 900;
-  color: var(--cl-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-:global(.cl-hidden) {
-  display: none;
-}
-
-@keyframes cl-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes cl-fade-up {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>