@jjlmoya/utils-developer 1.11.0 → 1.13.0

package/src/tool/placeholderGenerator/component.astro

@@ -117,261 +117,6 @@ const t = (ui ?? {}) as PlaceholderGeneratorUI;
   </div>
 </section>
 
-<style>
-  .pg-root {
-    --pg-primary: #eab308;
-    --pg-primary-dark: #ca8a04;
-    --pg-card-bg: #fff;
-    --pg-bg: #f8fafc;
-    --pg-text: #1e293b;
-    --pg-text-muted: #64748b;
-    --pg-border: #e2e8f0;
-    --pg-input-bg: #f1f5f9;
-    --pg-input-text: #1e293b;
-    --pg-btn-bg: #111827;
-    --pg-btn-hover: #000;
-
-    max-width: 1100px;
-    margin: 2rem auto;
-    color: var(--pg-text);
-  }
-
-  :global(.theme-dark) .pg-root {
-    --pg-card-bg: #1e293b;
-    --pg-bg: #0f172a;
-    --pg-text: #f1f5f9;
-    --pg-text-muted: #94a3b8;
-    --pg-border: #334155;
-    --pg-input-bg: #0f172a;
-    --pg-input-text: #e2e8f0;
-    --pg-btn-bg: #f1f5f9;
-    --pg-btn-hover: #fff;
-  }
-
-  .pg-card {
-    background: var(--pg-card-bg);
-    border: 1px solid var(--pg-border);
-    border-radius: 1.25rem;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
-    overflow: hidden;
-  }
-
-  .pg-body {
-    display: grid;
-    grid-template-columns: 300px 1fr;
-    min-height: 560px;
-  }
-
-  @media (max-width: 860px) {
-    .pg-body {
-      grid-template-columns: 1fr;
-    }
-
-    .pg-controls {
-      border-right: none;
-      border-bottom: 1px solid var(--pg-border);
-    }
-  }
-
-  .pg-controls {
-    border-right: 1px solid var(--pg-border);
-    padding: 1.25rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    overflow-y: auto;
-    background: var(--pg-bg);
-  }
-
-  .pg-control-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-
-  .pg-label {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--pg-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .pg-input,
-  .pg-select {
-    width: 100%;
-    padding: 0.6rem 0.875rem;
-    border-radius: 0.625rem;
-    border: 1px solid var(--pg-border);
-    background: var(--pg-card-bg);
-    font-size: 0.875rem;
-    color: var(--pg-input-text);
-    outline: none;
-    transition: border-color 0.2s;
-  }
-
-  .pg-input:focus,
-  .pg-select:focus {
-    border-color: var(--pg-primary);
-    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
-  }
-
-  .pg-dims-group,
-  .pg-colors-group,
-  .pg-typo-group {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.75rem;
-  }
-
-  .pg-presets-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.375rem;
-  }
-
-  .pg-preset-pill {
-    background: var(--pg-input-bg);
-    border: 1px solid var(--pg-border);
-    color: var(--pg-text-muted);
-    padding: 0.3rem 0.6rem;
-    border-radius: 50px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  .pg-preset-pill:hover,
-  :global(.pg-preset-pill.active) {
-    background: var(--pg-primary);
-    border-color: var(--pg-primary-dark);
-    color: #fff;
-  }
-
-  .pg-radio-pill {
-    position: relative;
-    cursor: pointer;
-  }
-
-  .pg-radio-pill input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .pg-radio-pill span {
-    display: inline-block;
-    background: var(--pg-input-bg);
-    border: 1px solid var(--pg-border);
-    color: var(--pg-text-muted);
-    padding: 0.3rem 0.6rem;
-    border-radius: 50px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    transition: all 0.2s;
-  }
-
-  .pg-radio-pill input:checked + span {
-    background: var(--pg-primary);
-    border-color: var(--pg-primary-dark);
-    color: #fff;
-  }
-
-  .pg-color-wrapper {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--pg-border);
-    border-radius: 0.625rem;
-    overflow: hidden;
-    background: var(--pg-card-bg);
-  }
-
-  .pg-color-wrapper input[type="color"] {
-    -webkit-appearance: none;
-    appearance: none;
-    border: none;
-    width: 38px;
-    height: 38px;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    background: transparent;
-    flex-shrink: 0;
-  }
-
-  .pg-color-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-
-  .pg-color-wrapper input[type="color"]::-webkit-color-swatch {
-    border: none;
-    border-right: 1px solid var(--pg-border);
-  }
-
-  .pg-color-text {
-    border: none;
-    padding: 0.5rem 0.625rem;
-    text-transform: uppercase;
-    font-weight: 600;
-    font-size: 0.8rem;
-    color: var(--pg-input-text);
-    background: transparent;
-    flex: 1;
-    outline: none;
-    width: 0;
-  }
-
-  .pg-download-btn {
-    background: var(--pg-btn-bg);
-    color: var(--pg-card-bg);
-    padding: 0.75rem 1.25rem;
-    border-radius: 0.75rem;
-    border: none;
-    font-size: 0.9rem;
-    font-weight: 700;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    transition:
-      background 0.2s,
-      transform 0.1s;
-    margin-top: 0.25rem;
-  }
-
-  .pg-download-btn:hover {
-    background: var(--pg-btn-hover);
-  }
-
-  .pg-download-btn:active {
-    transform: scale(0.98);
-  }
-
-  .pg-preview {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-    background: var(--pg-bg);
-    background-image: radial-gradient(var(--pg-border) 1px, transparent 1px);
-    background-size: 24px 24px;
-  }
-
-  #p-image-preview {
-    max-width: 100%;
-    height: auto;
-    object-fit: contain;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
-    border-radius: 8px;
-  }
-
-  canvas {
-    display: none;
-  }
-</style>
 
 <script>
   const widthInput = document.getElementById('p-width') as HTMLInputElement;

package/src/tool/placeholderGenerator/entry.ts

@@ -0,0 +1,46 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+
+import type { PlaceholderGeneratorUI } from './ui';
+
+export type PlaceholderGeneratorLocaleContent = ToolLocaleContent<PlaceholderGeneratorUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+import { content as de } from './i18n/de';
+import { content as id } from './i18n/id';
+import { content as it } from './i18n/it';
+import { content as ja } from './i18n/ja';
+import { content as ko } from './i18n/ko';
+import { content as nl } from './i18n/nl';
+import { content as pl } from './i18n/pl';
+import { content as pt } from './i18n/pt';
+import { content as ru } from './i18n/ru';
+import { content as sv } from './i18n/sv';
+import { content as tr } from './i18n/tr';
+import { content as zh } from './i18n/zh';
+
+export const placeholderGenerator: DeveloperToolEntry<PlaceholderGeneratorUI> = {
+  id: 'placeholder-generator',
+  icons: {
+    bg: 'mdi:image-outline',
+    fg: 'mdi:image-size-select-actual',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+    de: async () => de,
+    id: async () => id,
+    it: async () => it,
+    ja: async () => ja,
+    ko: async () => ko,
+    nl: async () => nl,
+    pl: async () => pl,
+    pt: async () => pt,
+    ru: async () => ru,
+    sv: async () => sv,
+    tr: async () => tr,
+    zh: async () => zh,
+  },
+};

package/src/tool/placeholderGenerator/index.ts

@@ -1,51 +1,5 @@
-import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
-
-import type { PlaceholderGeneratorUI } from './ui';
-
-export type PlaceholderGeneratorLocaleContent = ToolLocaleContent<PlaceholderGeneratorUI>;
-
-import { content as es } from './i18n/es';
-import { content as en } from './i18n/en';
-import { content as fr } from './i18n/fr';
-import { content as de } from './i18n/de';
-import { content as id } from './i18n/id';
-import { content as it } from './i18n/it';
-import { content as ja } from './i18n/ja';
-import { content as ko } from './i18n/ko';
-import { content as nl } from './i18n/nl';
-import { content as pl } from './i18n/pl';
-import { content as pt } from './i18n/pt';
-import { content as ru } from './i18n/ru';
-import { content as sv } from './i18n/sv';
-import { content as tr } from './i18n/tr';
-import { content as zh } from './i18n/zh';
-
-export const placeholderGenerator: DeveloperToolEntry<PlaceholderGeneratorUI> = {
-  id: 'placeholder-generator',
-  icons: {
-    bg: 'mdi:image-outline',
-    fg: 'mdi:image-size-select-actual',
-  },
-  i18n: {
-    es: async () => es,
-    en: async () => en,
-    fr: async () => fr,
-    de: async () => de,
-    id: async () => id,
-    it: async () => it,
-    ja: async () => ja,
-    ko: async () => ko,
-    nl: async () => nl,
-    pl: async () => pl,
-    pt: async () => pt,
-    ru: async () => ru,
-    sv: async () => sv,
-    tr: async () => tr,
-    zh: async () => zh,
-  },
-};
-
-
+import { placeholderGenerator } from './entry';
+export * from './entry';
 export const PLACEHOLDER_GENERATOR_TOOL: ToolDefinition = {
   entry: placeholderGenerator,
   Component: () => import('./component.astro'),

package/src/tool/placeholderGenerator/placeholder-image-generator.css

@@ -0,0 +1,253 @@
+.pg-root {
+    --pg-primary: #eab308;
+    --pg-primary-dark: #ca8a04;
+    --pg-card-bg: #fff;
+    --pg-bg: #f8fafc;
+    --pg-text: #1e293b;
+    --pg-text-muted: #64748b;
+    --pg-border: #e2e8f0;
+    --pg-input-bg: #f1f5f9;
+    --pg-input-text: #1e293b;
+    --pg-btn-bg: #111827;
+    --pg-btn-hover: #000;
+
+    max-width: 1100px;
+    margin: 2rem auto;
+    color: var(--pg-text);
+  }
+
+  :global(.theme-dark) .pg-root {
+    --pg-card-bg: #1e293b;
+    --pg-bg: #0f172a;
+    --pg-text: #f1f5f9;
+    --pg-text-muted: #94a3b8;
+    --pg-border: #334155;
+    --pg-input-bg: #0f172a;
+    --pg-input-text: #e2e8f0;
+    --pg-btn-bg: #f1f5f9;
+    --pg-btn-hover: #fff;
+  }
+
+  .pg-card {
+    background: var(--pg-card-bg);
+    border: 1px solid var(--pg-border);
+    border-radius: 1.25rem;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+    overflow: hidden;
+  }
+
+  .pg-body {
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    min-height: 560px;
+  }
+
+  @media (max-width: 860px) {
+    .pg-body {
+      grid-template-columns: 1fr;
+    }
+
+    .pg-controls {
+      border-right: none;
+      border-bottom: 1px solid var(--pg-border);
+    }
+  }
+
+  .pg-controls {
+    border-right: 1px solid var(--pg-border);
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    overflow-y: auto;
+    background: var(--pg-bg);
+  }
+
+  .pg-control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .pg-label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--pg-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .pg-input,
+  .pg-select {
+    width: 100%;
+    padding: 0.6rem 0.875rem;
+    border-radius: 0.625rem;
+    border: 1px solid var(--pg-border);
+    background: var(--pg-card-bg);
+    font-size: 0.875rem;
+    color: var(--pg-input-text);
+    outline: none;
+    transition: border-color 0.2s;
+  }
+
+  .pg-input:focus,
+  .pg-select:focus {
+    border-color: var(--pg-primary);
+    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
+  }
+
+  .pg-dims-group,
+  .pg-colors-group,
+  .pg-typo-group {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  .pg-presets-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .pg-preset-pill {
+    background: var(--pg-input-bg);
+    border: 1px solid var(--pg-border);
+    color: var(--pg-text-muted);
+    padding: 0.3rem 0.6rem;
+    border-radius: 50px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .pg-preset-pill:hover,
+  :global(.pg-preset-pill.active) {
+    background: var(--pg-primary);
+    border-color: var(--pg-primary-dark);
+    color: #fff;
+  }
+
+  .pg-radio-pill {
+    position: relative;
+    cursor: pointer;
+  }
+
+  .pg-radio-pill input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .pg-radio-pill span {
+    display: inline-block;
+    background: var(--pg-input-bg);
+    border: 1px solid var(--pg-border);
+    color: var(--pg-text-muted);
+    padding: 0.3rem 0.6rem;
+    border-radius: 50px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    transition: all 0.2s;
+  }
+
+  .pg-radio-pill input:checked + span {
+    background: var(--pg-primary);
+    border-color: var(--pg-primary-dark);
+    color: #fff;
+  }
+
+  .pg-color-wrapper {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--pg-border);
+    border-radius: 0.625rem;
+    overflow: hidden;
+    background: var(--pg-card-bg);
+  }
+
+  .pg-color-wrapper input[type="color"] {
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    width: 38px;
+    height: 38px;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    background: transparent;
+    flex-shrink: 0;
+  }
+
+  .pg-color-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  .pg-color-wrapper input[type="color"]::-webkit-color-swatch {
+    border: none;
+    border-right: 1px solid var(--pg-border);
+  }
+
+  .pg-color-text {
+    border: none;
+    padding: 0.5rem 0.625rem;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 0.8rem;
+    color: var(--pg-input-text);
+    background: transparent;
+    flex: 1;
+    outline: none;
+    width: 0;
+  }
+
+  .pg-download-btn {
+    background: var(--pg-btn-bg);
+    color: var(--pg-card-bg);
+    padding: 0.75rem 1.25rem;
+    border-radius: 0.75rem;
+    border: none;
+    font-size: 0.9rem;
+    font-weight: 700;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition:
+      background 0.2s,
+      transform 0.1s;
+    margin-top: 0.25rem;
+  }
+
+  .pg-download-btn:hover {
+    background: var(--pg-btn-hover);
+  }
+
+  .pg-download-btn:active {
+    transform: scale(0.98);
+  }
+
+  .pg-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--pg-bg);
+    background-image: radial-gradient(var(--pg-border) 1px, transparent 1px);
+    background-size: 24px 24px;
+  }
+
+  #p-image-preview {
+    max-width: 100%;
+    height: auto;
+    object-fit: contain;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+  }
+
+  canvas {
+    display: none;
+  }