@jjlmoya/utils-textiles 1.20.0 → 1.22.0

package/src/tool/clothingSizeConverter/seo.astro

@@ -1,15 +1,15 @@
----
-import { SEORenderer } from '@jjlmoya/utils-shared';
-import { clothingSizeConverter } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  locale?: KnownLocale;
-}
-
-const { locale = 'es' } = Astro.props;
-const content = await clothingSizeConverter.i18n[locale]?.();
-if (!content) return null;
----
-
-{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { clothingSizeConverter } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await clothingSizeConverter.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/embroideryStitchPricingEstimator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/embroideryStitchPricingEstimator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Wilcom - Stitch count and scaling',
+    url: 'https://help.wilcom.com/portal/en/kb/wilcom-international/embroidery-web-api/faqs/articles/stitch-count-scaling',
+  },
+  {
+    name: 'Madeira - Stitch density guide',
+    url: 'https://www.madeirausa.com/_resources/common/userfiles/file/Resources/TH.Reads/Density.pdf',
+  },
+];

package/src/tool/embroideryStitchPricingEstimator/component.astro

@@ -0,0 +1,111 @@
+---
+import type { EmbroideryStitchPricingEstimatorUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui = {} } = Astro.props;
+const toolUI = ui as unknown as EmbroideryStitchPricingEstimatorUI;
+---
+
+<div class="embroider-tool" id="embroidery-stitch-pricing-estimator">
+  <div class="embroider-intro">
+    <span class="embroider-eyebrow">{toolUI.stageLabel}</span>
+    <p>{toolUI.intro}</p>
+  </div>
+  <div class="embroider-workbench">
+    <section class="embroider-stage" aria-label={toolUI.stageLabel}>
+      <div class="embroider-stage-header">
+        <span>{toolUI.canvasAlt}</span>
+        <span class="embroider-status" id="embroider-status-badge">INPUT NEEDED</span>
+      </div>
+      <svg id="embroider-canvas" class="embroider-canvas" viewBox="0 0 400 200" role="img" aria-label={toolUI.canvasAlt}></svg>
+      <div class="embroider-stage-caption">
+        <span id="embroider-result-status">{toolUI.emptyResult}</span>
+        <span id="embroider-notice" class="embroider-notice" hidden></span>
+      </div>
+    </section>
+    <section class="embroider-controls" aria-label={toolUI.controlsLabel}>
+      <div class="embroider-control-heading">
+        <span class="embroider-eyebrow">{toolUI.controlsLabel}</span>
+        <button class="embroider-reset" id="embroider-reset" type="button">{toolUI.reset}</button>
+      </div>
+      <div class="embroider-grid">
+        <label class="embroider-field">
+          <span>{toolUI.widthLabel}</span>
+          <input id="embroider-width" class="embroider-input" type="number" min="0.1" step="0.1" inputmode="decimal" />
+          <small>{toolUI.widthHint}</small>
+        </label>
+        <label class="embroider-field">
+          <span>{toolUI.heightLabel}</span>
+          <input id="embroider-height" class="embroider-input" type="number" min="0.1" step="0.1" inputmode="decimal" />
+          <small>{toolUI.heightHint}</small>
+        </label>
+        <label class="embroider-field">
+          <span>{toolUI.densityLabel}</span>
+          <input id="embroider-density" class="embroider-input" type="number" min="0.1" max="20" step="0.1" inputmode="decimal" />
+          <small>{toolUI.densityHint}</small>
+        </label>
+        <label class="embroider-field">
+          <span>{toolUI.coloursLabel}</span>
+          <input id="embroider-colours" class="embroider-input" type="number" min="1" max="30" step="1" inputmode="numeric" />
+          <small>{toolUI.coloursHint}</small>
+        </label>
+        <label class="embroider-field">
+          <span>{toolUI.speedLabel}</span>
+          <input id="embroider-speed" class="embroider-input" type="number" min="1" step="50" inputmode="numeric" />
+          <small>{toolUI.speedHint}</small>
+        </label>
+        <label class="embroider-field">
+          <span>{toolUI.rateLabel}</span>
+          <input id="embroider-rate" class="embroider-input" type="number" min="0.01" step="0.5" inputmode="decimal" />
+          <small>{toolUI.rateHint}</small>
+        </label>
+      </div>
+      <div class="embroider-select">
+        <span class="embroider-field-label">{toolUI.stitchLabel}</span>
+        <button id="embroider-stitch-trigger" class="embroider-select-trigger" type="button" aria-expanded="false" aria-controls="embroider-stitch-menu">{toolUI.selectStitch}</button>
+        <div id="embroider-stitch-menu" class="embroider-select-menu" hidden role="listbox">
+          <button type="button" data-stitch-option="running" data-note={toolUI.stitchRunningNote} role="option">{toolUI.stitchRunning}</button>
+          <button type="button" data-stitch-option="satin" data-note={toolUI.stitchSatinNote} role="option">{toolUI.stitchSatin}</button>
+          <button type="button" data-stitch-option="fill" data-note={toolUI.stitchFillNote} role="option">{toolUI.stitchFill}</button>
+          <button type="button" data-stitch-option="tatami" data-note={toolUI.stitchTatamiNote} role="option">{toolUI.stitchTatami}</button>
+        </div>
+        <small id="embroider-stitch-note">{toolUI.stitchSatinNote}</small>
+      </div>
+    </section>
+  </div>
+  <section class="embroider-result" aria-label={toolUI.resultLabel}>
+    <div class="embroider-result-main">
+      <span class="embroider-eyebrow">{toolUI.resultLabel}</span>
+      <strong id="embroider-price">--</strong>
+      <span>{toolUI.priceUnit}</span>
+    </div>
+    <div class="embroider-result-metrics">
+      <div><span>{toolUI.effectiveLabel}</span><strong id="embroider-effective">--</strong></div>
+      <div><span>{toolUI.productionLabel}</span><strong id="embroider-duration">--</strong></div>
+    </div>
+    <button id="embroider-copy" class="embroider-copy" type="button">{toolUI.copySummary}</button>
+  </section>
+  <section class="embroider-breakdown">
+    <div><span>{toolUI.areaLabel}</span><strong id="embroider-area">--</strong></div>
+    <div><span>{toolUI.stitchTimeLabel}</span><strong id="embroider-stitch-time">--</strong></div>
+    <div><span>{toolUI.setupLabel}</span><strong id="embroider-setup-time">--</strong></div>
+    <div><span>{toolUI.changesLabel}</span><strong id="embroider-colour-changes">--</strong></div>
+  </section>
+  <section class="embroider-explainer">
+    <div><h3>{toolUI.formulaTitle}</h3><p>{toolUI.formulaText}</p></div>
+    <div><h3>{toolUI.noteTitle}</h3><p>{toolUI.noteText}</p></div>
+  </section>
+</div>
+
+<script id="embroidery-tool-data" type="application/json" is:inline set:html={JSON.stringify(toolUI)}></script>
+
+<script>
+  import { mountEmbroideryEstimator } from './controller';
+  import type { EmbroideryStitchPricingEstimatorUI } from './ui';
+
+  const data = document.getElementById('embroidery-tool-data');
+  if (data?.textContent) mountEmbroideryEstimator(JSON.parse(data.textContent) as EmbroideryStitchPricingEstimatorUI);
+</script>

package/src/tool/embroideryStitchPricingEstimator/controller.ts

@@ -0,0 +1,111 @@
+import { evaluateEstimate } from './evaluator';
+import { calculateEmbroidery, DEFAULT_INPUT, type EmbroideryInput, type StitchType } from './logic';
+import { copyableSummary, renderEmbroidery } from './dom-views';
+import { loadEmbroideryInput, saveEmbroideryInput } from './storage';
+import type { EmbroideryStitchPricingEstimatorUI } from './ui';
+
+function numberValue(id: string, fallback: number): number {
+  const element = document.getElementById(id) as HTMLInputElement | null;
+  return Number(element?.value ?? fallback);
+}
+
+function readInput(): EmbroideryInput {
+  const selected = document.querySelector('[data-stitch-option].is-selected') as HTMLElement | null;
+  return {
+    widthCm: numberValue('embroider-width', DEFAULT_INPUT.widthCm),
+    heightCm: numberValue('embroider-height', DEFAULT_INPUT.heightCm),
+    density: numberValue('embroider-density', DEFAULT_INPUT.density),
+    stitchType: (selected?.dataset.stitchOption as StitchType) || DEFAULT_INPUT.stitchType,
+    colours: numberValue('embroider-colours', DEFAULT_INPUT.colours),
+    speed: numberValue('embroider-speed', DEFAULT_INPUT.speed),
+    hourlyRate: numberValue('embroider-rate', DEFAULT_INPUT.hourlyRate),
+  };
+}
+
+function writeInput(input: EmbroideryInput): void {
+  const values: Record<string, number> = {
+    'embroider-width': input.widthCm,
+    'embroider-height': input.heightCm,
+    'embroider-density': input.density,
+    'embroider-colours': input.colours,
+    'embroider-speed': input.speed,
+    'embroider-rate': input.hourlyRate,
+  };
+  Object.entries(values).forEach(([id, value]) => {
+    const element = document.getElementById(id) as HTMLInputElement | null;
+    if (element) element.value = String(value);
+  });
+  selectStitch(input.stitchType);
+}
+
+function selectStitch(value: StitchType): void {
+  document.querySelectorAll<HTMLElement>('[data-stitch-option]').forEach((option) => {
+    const active = option.dataset.stitchOption === value;
+    option.classList.toggle('is-selected', active);
+    option.setAttribute('aria-selected', String(active));
+  });
+  const selected = document.querySelector(`[data-stitch-option="${value}"]`) as HTMLElement | null;
+  const trigger = document.getElementById('embroider-stitch-trigger');
+  if (trigger && selected) trigger.textContent = selected.textContent;
+  const note = document.getElementById('embroider-stitch-note');
+  if (note && selected?.dataset.note) note.textContent = selected.dataset.note;
+}
+
+function update(ui: EmbroideryStitchPricingEstimatorUI): { input: EmbroideryInput; calculation: ReturnType<typeof calculateEmbroidery> } {
+  const input = readInput();
+  const calculation = calculateEmbroidery(input);
+  const evaluation = evaluateEstimate(calculation, { invalid: ui.invalidMessage, highVolume: ui.warningHighVolume, longRun: ui.warningLongRun });
+  renderEmbroidery({ input, calculation, evaluation, ui });
+  saveEmbroideryInput(input);
+  return { input, calculation };
+}
+
+function wireSelect(ui: EmbroideryStitchPricingEstimatorUI, refresh: () => void): void {
+  const trigger = document.getElementById('embroider-stitch-trigger');
+  const menu = document.getElementById('embroider-stitch-menu');
+  trigger?.addEventListener('click', () => {
+    if (menu) menu.hidden = !menu.hidden;
+    trigger.setAttribute('aria-expanded', String(menu ? !menu.hidden : false));
+  });
+  document.querySelectorAll<HTMLElement>('[data-stitch-option]').forEach((option) => option.addEventListener('click', () => {
+    selectStitch(option.dataset.stitchOption as StitchType);
+    if (menu) menu.hidden = true;
+    if (trigger) trigger.setAttribute('aria-expanded', 'false');
+    refresh();
+  }));
+  document.addEventListener('click', (event) => {
+    if (!(event.target as HTMLElement).closest('.embroider-select')) {
+      if (menu) menu.hidden = true;
+      trigger?.setAttribute('aria-expanded', 'false');
+    }
+  });
+  const note = document.getElementById('embroider-stitch-note');
+  document.querySelectorAll<HTMLElement>('[data-stitch-option]').forEach((option) => option.addEventListener('mouseenter', () => {
+    if (note) note.textContent = option.dataset.note || ui.stitchSatinNote;
+  }));
+}
+
+function wireCopy(ui: EmbroideryStitchPricingEstimatorUI, refresh: () => ReturnType<typeof update>): void {
+  document.getElementById('embroider-copy')?.addEventListener('click', async () => {
+    const state = refresh();
+    try {
+      await navigator.clipboard.writeText(copyableSummary({ input: state.input, calculation: state.calculation, evaluation: evaluateEstimate(state.calculation, { invalid: ui.invalidMessage, highVolume: ui.warningHighVolume, longRun: ui.warningLongRun }), ui }));
+      const button = document.getElementById('embroider-copy');
+      if (button) {
+        button.textContent = ui.copied;
+        window.setTimeout(() => { button.textContent = ui.copySummary; }, 1600);
+      }
+    } catch {}
+  });
+}
+
+export function mountEmbroideryEstimator(ui: EmbroideryStitchPricingEstimatorUI): void {
+  const saved = loadEmbroideryInput(DEFAULT_INPUT);
+  writeInput(saved);
+  const refresh = () => update(ui);
+  document.querySelectorAll<HTMLInputElement>('.embroider-input').forEach((input) => input.addEventListener('input', refresh));
+  document.getElementById('embroider-reset')?.addEventListener('click', () => { writeInput(DEFAULT_INPUT); refresh(); });
+  wireSelect(ui, refresh);
+  wireCopy(ui, refresh);
+  refresh();
+}

package/src/tool/embroideryStitchPricingEstimator/dom-views.ts

@@ -0,0 +1,94 @@
+import type { EmbroideryCalculation, EmbroideryInput } from './logic';
+import { formatMinutes, formatNumber } from './logic';
+import type { EmbroideryStitchPricingEstimatorUI } from './ui';
+import type { EstimateEvaluation } from './evaluator';
+
+interface RenderContext {
+  input: EmbroideryInput;
+  calculation: EmbroideryCalculation | null;
+  evaluation: EstimateEvaluation;
+  ui: EmbroideryStitchPricingEstimatorUI;
+}
+
+function setText(id: string, value: string): void {
+  const element = document.getElementById(id);
+  if (element) element.textContent = value;
+}
+
+function makeSvgElement<K extends keyof SVGElementTagNameMap>(tag: K, attrs: Record<string, string>): SVGElementTagNameMap[K] {
+  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
+  Object.entries(attrs).forEach(([key, value]) => element.setAttribute(key, value));
+  return element;
+}
+
+function renderThreadLines(svg: SVGSVGElement, input: EmbroideryInput): void {
+  const lineCount = Math.min(18, Math.max(5, Math.round(input.density * 2)));
+  for (let index = 0; index < lineCount; index += 1) {
+    const y = 38 + (index * 124) / Math.max(1, lineCount - 1);
+    const path = makeSvgElement('path', {
+      d: `M 45 ${y} C 95 ${y - 20} 145 ${y + 20} 195 ${y} S 295 ${y - 20} 355 ${y}`,
+      class: 'embroider-thread',
+      'stroke-width': `${1.2 + input.density / 10}`,
+    });
+    svg.appendChild(path);
+  }
+}
+
+function renderCanvas(input: EmbroideryInput): void {
+  const svg = document.getElementById('embroider-canvas') as SVGSVGElement | null;
+  if (!svg) return;
+  while (svg.firstChild) svg.removeChild(svg.firstChild);
+  svg.appendChild(makeSvgElement('circle', { cx: '200', cy: '100', r: '160', class: 'embroider-hoop-shadow' }));
+  svg.appendChild(makeSvgElement('circle', { cx: '200', cy: '100', r: '150', class: 'embroider-hoop' }));
+  svg.appendChild(makeSvgElement('rect', { x: '42', y: '22', width: '316', height: '156', rx: '14', class: 'embroider-cloth' }));
+  renderThreadLines(svg, input);
+  svg.appendChild(makeSvgElement('circle', { cx: '200', cy: '100', r: '8', class: 'embroider-needle' }));
+}
+
+function renderValues(calculation: EmbroideryCalculation | null, ui: EmbroideryStitchPricingEstimatorUI): void {
+  if (!calculation) {
+    setText('embroider-result-status', ui.emptyResult);
+    setText('embroider-effective', '--');
+    setText('embroider-duration', '--');
+    setText('embroider-price', '--');
+    return;
+  }
+  setText('embroider-result-status', ui.estimateBadge);
+  setText('embroider-effective', `${formatNumber(calculation.effectiveStitches)} ${ui.stitchesUnit}`);
+  setText('embroider-duration', formatMinutes(calculation.totalMinutes));
+  setText('embroider-price', calculation.basePrice.toFixed(2));
+  setText('embroider-area', `${formatNumber(calculation.areaCm2, 1)} cm2`);
+  setText('embroider-stitch-time', formatMinutes(calculation.stitchMinutes));
+  setText('embroider-setup-time', formatMinutes(calculation.setupMinutes));
+  setText('embroider-colour-changes', formatNumber(calculation.colourChanges));
+}
+
+function renderEvaluation(evaluation: EstimateEvaluation): void {
+  const badge = document.getElementById('embroider-status-badge');
+  const notice = document.getElementById('embroider-notice');
+  if (badge) {
+    badge.textContent = getStatusLabel(evaluation.status);
+    badge.dataset.status = evaluation.status;
+  }
+  if (notice) {
+    notice.textContent = evaluation.message;
+    notice.hidden = !evaluation.message;
+  }
+}
+
+function getStatusLabel(status: EstimateEvaluation['status']): string {
+  if (status === 'ready') return 'READY';
+  if (status === 'attention') return 'CHECK';
+  return 'INPUT NEEDED';
+}
+
+export function renderEmbroidery(ctx: RenderContext): void {
+  renderCanvas(ctx.input);
+  renderValues(ctx.calculation, ctx.ui);
+  renderEvaluation(ctx.evaluation);
+}
+
+export function copyableSummary(ctx: RenderContext): string {
+  if (!ctx.calculation) return ctx.ui.invalidMessage;
+  return `${ctx.ui.resultLabel}: ${formatNumber(ctx.calculation.effectiveStitches)} ${ctx.ui.stitchesUnit}, ${formatMinutes(ctx.calculation.totalMinutes)}, ${ctx.calculation.basePrice.toFixed(2)} ${ctx.ui.priceUnit}`;
+}