@jjlmoya/utils-textiles 1.24.0 → 1.26.0

package/src/tool/laundryGuide/bibliography.ts

@@ -2,5 +2,5 @@ import type { BibliographyEntry } from '../../types';
 
 export const bibliography: BibliographyEntry[] = [
     { name: 'ISO 3758 - Textile Care Symbols', url: 'https://www.iso.org/standard/60465.html' },
-    { name: 'FTC - Textile Care Labels', url: 'https://www.ftc.gov/' },
+    { name: 'FTC - Textile Care Labeling Rule', url: 'https://www.ftc.gov/legal-library/browse/rules/care-labeling-textile-wearing-apparel-certain-piece-goods' },
   ];

package/src/tool/quiltBindingCalculator/bibliography.astro

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

package/src/tool/quiltBindingCalculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'BERNINA WeAllSew, Simple Binding Basics',
+    url: 'https://weallsew.com/simple-binding-basics/',
+  },
+  {
+    name: 'Brother SewingCraft France, Finir un bord de quilt',
+    url: 'https://sewingcraft.brother.eu/fr-ch/blog/quilt-club/2024/how-to-bind-a-quilt',
+  },
+];

package/src/tool/quiltBindingCalculator/component.astro

@@ -0,0 +1,110 @@
+---
+import { renderIdleScene } from './dom-views';
+import type { QuiltBindingCalculatorUI } from './ui';
+import './quilt-binding-length-and-strip-calculator.css';
+
+const { ui } = Astro.props as { ui: QuiltBindingCalculatorUI };
+const serializedUI = JSON.stringify(ui).replace(/</g, '\\u003c');
+const metric = { width: '90', length: '120', stripWidth: '6.5', fabricWidth: '110', seam: '0.6' };
+---
+
+<div class="qb-tool" data-qb-tool data-ui={serializedUI}>
+  <div class="qb-layout">
+    <section class="qb-stage" aria-labelledby="qb-stage-label">
+      <div class="qb-stage-head">
+        <span id="qb-stage-label" class="qb-stage-label">{ui.stageLabel}</span>
+        <span class="qb-unit-readout" data-output="unit">{ui.metricLabel}</span>
+      </div>
+      <div class="qb-scene" data-scene set:html={renderIdleScene()}></div>
+      <p class="qb-scene-note">{ui.canvasAlt}</p>
+    </section>
+
+    <section class="qb-workbench" aria-labelledby="qb-controls-label">
+      <div class="qb-workbench-head">
+        <h2 id="qb-controls-label">{ui.controlsLabel}</h2>
+        <div class="qb-unit-toggle" role="group" aria-label={ui.unitLabel}>
+          <button type="button" class="qb-unit-button is-active" data-unit="metric">{ui.metricLabel}</button>
+          <button type="button" class="qb-unit-button" data-unit="imperial">{ui.imperialLabel}</button>
+        </div>
+      </div>
+
+      <fieldset class="qb-fieldset">
+        <legend>{ui.dimensionsLabel}</legend>
+        <div class="qb-fields">
+          <label class="qb-field"><span>{ui.widthLabel}</span><input data-field="quiltWidth" type="number" min="0.1" step="0.1" value={metric.width} /><small>{ui.widthHint}</small></label>
+          <label class="qb-field"><span>{ui.lengthLabel}</span><input data-field="quiltLength" type="number" min="0.1" step="0.1" value={metric.length} /><small>{ui.lengthHint}</small></label>
+          <label class="qb-field"><span>{ui.cornersLabel}</span><input data-field="cornerCount" type="number" min="0" max="100" step="1" value="4" /><small>{ui.cornersHint}</small></label>
+        </div>
+      </fieldset>
+
+      <fieldset class="qb-fieldset">
+        <legend>{ui.fabricLabel}</legend>
+        <div class="qb-fields">
+          <label class="qb-field"><span>{ui.stripWidthLabel}</span><input data-field="stripWidth" type="number" min="0.1" step="0.1" value={metric.stripWidth} /><small>{ui.stripWidthHint}</small></label>
+          <label class="qb-field"><span>{ui.fabricWidthLabel}</span><input data-field="fabricWidth" type="number" min="0.1" step="0.1" value={metric.fabricWidth} /><small>{ui.fabricWidthHint}</small></label>
+          <label class="qb-field"><span>{ui.seamAllowanceLabel}</span><input data-field="seamAllowance" type="number" min="0.1" step="0.1" value={metric.seam} /><small>{ui.seamAllowanceHint}</small></label>
+        </div>
+      </fieldset>
+
+      <div class="qb-choice-row">
+        <div class="qb-choice" data-select="joinMethod">
+          <span class="qb-choice-label">{ui.methodLabel}</span>
+          <button type="button" data-select-trigger aria-haspopup="listbox" aria-expanded="false">{ui.diagonalLabel}</button>
+          <div class="qb-options" data-select-options hidden role="listbox">
+            <button type="button" data-value="diagonal" class="is-active" role="option">{ui.diagonalLabel}</button>
+            <button type="button" data-value="straight" role="option">{ui.straightLabel}</button>
+          </div>
+          <input data-field="joinMethod" type="hidden" value="diagonal" />
+        </div>
+        <div class="qb-choice" data-select="safetyPercent">
+          <span class="qb-choice-label">{ui.safetyLabel}</span>
+          <button type="button" data-select-trigger aria-haspopup="listbox" aria-expanded="false">{ui.safetyTen}</button>
+          <div class="qb-options" data-select-options hidden role="listbox">
+            <button type="button" data-value="0.05" role="option">{ui.safetyFive}</button>
+            <button type="button" data-value="0.1" class="is-active" role="option">{ui.safetyTen}</button>
+            <button type="button" data-value="0.15" role="option">{ui.safetyFifteen}</button>
+          </div>
+          <input data-field="safetyPercent" type="hidden" value="0.1" />
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <section class="qb-result" aria-labelledby="qb-result-label" aria-live="polite">
+    <div class="qb-result-head">
+      <h2 id="qb-result-label">{ui.resultLabel}</h2>
+      <span class="qb-status" data-status><span data-output="status">{ui.emptyResult}</span></span>
+    </div>
+    <div class="qb-result-body is-empty" data-result-body>
+      <p class="qb-empty" data-output="empty">{ui.emptyResult}</p>
+      <div class="qb-metrics">
+        <div><span>{ui.perimeterLabel}</span><strong data-output="perimeter">-</strong></div>
+        <div><span>{ui.requiredLabel}</span><strong data-output="required">-</strong></div>
+        <div><span>{ui.stripsLabel}</span><strong data-output="strips">-</strong></div>
+        <div><span>{ui.cutSizeLabel}</span><strong data-output="cutSize">-</strong></div>
+        <div><span>{ui.joinedLengthLabel}</span><strong data-output="joined">-</strong></div>
+        <div><span>{ui.surplusLabel}</span><strong data-output="surplus">-</strong></div>
+        <div><span>{ui.joinsLabel}</span><strong data-output="joins">-</strong></div>
+      </div>
+      <p class="qb-plan"><span>{ui.cuttingPlanLabel}</span><strong data-output="plan">-</strong></p>
+      <p class="qb-warning" data-output="warning"></p>
+    </div>
+    <div class="qb-result-foot">
+      <p class="qb-feedback" data-output="feedback"></p>
+      <div class="qb-actions"><button type="button" class="qb-secondary" data-reset>{ui.reset}</button><button type="button" class="qb-primary" data-copy>{ui.copySummary}</button></div>
+    </div>
+  </section>
+
+  <details class="qb-notes">
+    <summary>{ui.formulaTitle}</summary>
+    <p>{ui.formulaText}</p>
+    <p><strong>{ui.noteTitle}</strong> {ui.noteText}</p>
+  </details>
+</div>
+
+<script>
+  import { createQuiltBindingController } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-qb-tool]');
+  if (root) createQuiltBindingController(root);
+</script>

package/src/tool/quiltBindingCalculator/controller.ts

@@ -0,0 +1,257 @@
+import {
+  calculateBinding,
+  convertLengthFromCm,
+  convertLengthToCm,
+  type BindingInputs,
+  type JoinMethod,
+  type SafetyPercent,
+  type UnitSystem,
+} from './logic';
+import { evaluateBinding } from './evaluator';
+import { formatLength, formatWhole, renderBindingScene, renderIdleScene, resultSummary } from './dom-views';
+import { loadBindingDraft, saveBindingDraft, type SavedBindingDraft } from './storage';
+import type { QuiltBindingCalculatorUI } from './ui';
+
+export const DEFAULT_INPUTS: BindingInputs = {
+  quiltWidthCm: 90,
+  quiltLengthCm: 120,
+  cornerCount: 4,
+  stripWidthCm: 6.5,
+  fabricWidthCm: 110,
+  seamAllowanceCm: 0.6,
+  joinMethod: 'diagonal',
+  safetyPercent: 0.1,
+};
+
+interface ControllerState {
+  unit: UnitSystem;
+  inputs: BindingInputs;
+  ui: QuiltBindingCalculatorUI;
+}
+
+function readUi(root: HTMLElement): QuiltBindingCalculatorUI {
+  return JSON.parse(root.dataset.ui ?? '{}') as QuiltBindingCalculatorUI;
+}
+
+function readNumber(root: HTMLElement, field: string): number {
+  const input = root.querySelector<HTMLInputElement>(`[data-field="${field}"]`);
+  return Number(input?.value ?? '0');
+}
+
+function readInputs(root: HTMLElement, unit: UnitSystem): BindingInputs {
+  return {
+    quiltWidthCm: convertLengthToCm(readNumber(root, 'quiltWidth'), unit),
+    quiltLengthCm: convertLengthToCm(readNumber(root, 'quiltLength'), unit),
+    cornerCount: Math.round(readNumber(root, 'cornerCount')),
+    stripWidthCm: convertLengthToCm(readNumber(root, 'stripWidth'), unit),
+    fabricWidthCm: convertLengthToCm(readNumber(root, 'fabricWidth'), unit),
+    seamAllowanceCm: convertLengthToCm(readNumber(root, 'seamAllowance'), unit),
+    joinMethod: (root.querySelector<HTMLInputElement>('[data-field="joinMethod"]')?.value ?? 'diagonal') as JoinMethod,
+    safetyPercent: Number(root.querySelector<HTMLInputElement>('[data-field="safetyPercent"]')?.value ?? '0.1') as SafetyPercent,
+  };
+}
+
+function inputValue(valueCm: number, unit: UnitSystem): string {
+  const value = convertLengthFromCm(valueCm, unit);
+  return value.toFixed(unit === 'imperial' ? 2 : 1).replace(/\.0+$|(?<=\.[0-9])0+$/, '');
+}
+
+function writeLength(root: HTMLElement, field: string, valueCm: number, unit: UnitSystem): void {
+  const input = root.querySelector<HTMLInputElement>(`[data-field="${field}"]`);
+  if (input) input.value = inputValue(valueCm, unit);
+}
+
+function writeInputs(root: HTMLElement, inputs: BindingInputs, unit: UnitSystem): void {
+  writeLength(root, 'quiltWidth', inputs.quiltWidthCm, unit);
+  writeLength(root, 'quiltLength', inputs.quiltLengthCm, unit);
+  writeLength(root, 'stripWidth', inputs.stripWidthCm, unit);
+  writeLength(root, 'fabricWidth', inputs.fabricWidthCm, unit);
+  writeLength(root, 'seamAllowance', inputs.seamAllowanceCm, unit);
+  const corners = root.querySelector<HTMLInputElement>('[data-field="cornerCount"]');
+  if (corners) corners.value = String(inputs.cornerCount);
+  setSelect(root, 'joinMethod', inputs.joinMethod);
+  setSelect(root, 'safetyPercent', String(inputs.safetyPercent));
+}
+
+function setSelect(root: HTMLElement, field: string, value: string): void {
+  const hidden = root.querySelector<HTMLInputElement>(`[data-field="${field}"]`);
+  const option = root.querySelector<HTMLElement>(`[data-select="${field}"] [data-value="${value}"]`);
+  const trigger = root.querySelector<HTMLButtonElement>(`[data-select="${field}"] [data-select-trigger]`);
+  if (hidden) hidden.value = value;
+  if (trigger && option) {
+    trigger.textContent = option.textContent;
+    trigger.setAttribute('aria-expanded', 'false');
+  }
+  root.querySelectorAll(`[data-select="${field}"] [data-value]`).forEach((item) => {
+    item.classList.toggle('is-active', item.getAttribute('data-value') === value);
+  });
+}
+
+function setOutput(root: HTMLElement, field: string, value: string): void {
+  const output = root.querySelector<HTMLElement>(`[data-output="${field}"]`);
+  if (output) output.textContent = value;
+}
+
+function unitSuffix(unit: UnitSystem): string {
+  return unit === 'imperial' ? 'in' : 'cm';
+}
+
+function warningText(ui: QuiltBindingCalculatorUI, warning: ReturnType<typeof evaluateBinding>['warning']): string {
+  if (warning === 'large-waste') return ui.warningLargeWaste;
+  if (warning === 'small-surplus') return ui.warningSmallSurplus;
+  return '';
+}
+
+function renderMetrics(root: HTMLElement, state: ControllerState, result: Extract<ReturnType<typeof calculateBinding>, { valid: true }>): void {
+  const suffix = unitSuffix(state.unit);
+  setOutput(root, 'perimeter', `${formatLength(result.perimeterCm, state.unit)} ${suffix}`);
+  setOutput(root, 'required', `${formatLength(result.requiredBindingCm, state.unit)} ${suffix}`);
+  setOutput(root, 'strips', formatWhole(result.strips));
+  setOutput(root, 'cutSize', `${formatLength(state.inputs.stripWidthCm, state.unit)} x ${formatLength(state.inputs.fabricWidthCm, state.unit)}`);
+  setOutput(root, 'joined', `${formatLength(result.joinedLengthCm, state.unit)} ${suffix}`);
+  setOutput(root, 'surplus', `${formatLength(result.surplusCm, state.unit)} ${suffix}`);
+  setOutput(root, 'joins', formatWhole(result.joinCount));
+  setOutput(root, 'plan', resultSummary(state.inputs, result, state.unit));
+}
+
+function renderStatus(root: HTMLElement, evaluation: ReturnType<typeof evaluateBinding>): void {
+  root.querySelector('[data-status]')?.classList.remove('is-error');
+  root.querySelector('[data-status]')?.classList.toggle('is-ready', evaluation.status === 'ready');
+  root.querySelector('[data-status]')?.classList.toggle('is-review', evaluation.status === 'review');
+  root.querySelector('[data-result-body]')?.classList.remove('is-empty');
+}
+
+function renderInvalid(root: HTMLElement, ui: QuiltBindingCalculatorUI): void {
+  setOutput(root, 'status', ui.invalidMessage);
+  setOutput(root, 'empty', ui.invalidMessage);
+  ['perimeter', 'required', 'strips', 'cutSize', 'joined', 'surplus', 'joins', 'plan', 'warning'].forEach((field) => setOutput(root, field, '-'));
+  const scene = root.querySelector<HTMLElement>('[data-scene]');
+  if (scene) scene.innerHTML = renderIdleScene();
+  root.querySelector('[data-status]')?.classList.add('is-error');
+  root.querySelector('[data-status]')?.classList.remove('is-ready', 'is-review');
+  root.querySelector('[data-result-body]')?.classList.add('is-empty');
+}
+
+function renderValid(root: HTMLElement, state: ControllerState, result: Extract<ReturnType<typeof calculateBinding>, { valid: true }>): void {
+  const evaluation = evaluateBinding(result);
+  setOutput(root, 'status', evaluation.status === 'ready' ? state.ui.readyBadge : state.ui.reviewBadge);
+  renderMetrics(root, state, result);
+  renderStatus(root, evaluation);
+  setOutput(root, 'warning', warningText(state.ui, evaluation.warning));
+  const scene = root.querySelector<HTMLElement>('[data-scene]');
+  if (scene) scene.innerHTML = renderBindingScene(state.inputs, result, state.unit);
+}
+
+function render(root: HTMLElement, state: ControllerState): void {
+  const result = calculateBinding(state.inputs);
+  setOutput(root, 'unit', state.unit === 'imperial' ? state.ui.imperialLabel : state.ui.metricLabel);
+  if (!result.valid) {
+    renderInvalid(root, state.ui);
+    return;
+  }
+  renderValid(root, state, result);
+  saveBindingDraft({ unit: state.unit, inputs: state.inputs });
+}
+
+function closeSelects(root: HTMLElement): void {
+  root.querySelectorAll<HTMLElement>('[data-select].is-open').forEach((select) => {
+    select.classList.remove('is-open');
+    const options = select.querySelector<HTMLElement>('[data-select-options]');
+    if (options) options.hidden = true;
+    select.querySelector('[data-select-trigger]')?.setAttribute('aria-expanded', 'false');
+  });
+}
+
+function toggleSelect(select: HTMLElement): void {
+  const options = select.querySelector<HTMLElement>('[data-select-options]');
+  if (!options) return;
+  const open = !select.classList.contains('is-open');
+  select.classList.toggle('is-open', open);
+  options.hidden = !open;
+  select.querySelector('[data-select-trigger]')?.setAttribute('aria-expanded', String(open));
+}
+
+function handleSelectClick(root: HTMLElement, target: HTMLElement, state: ControllerState): boolean {
+  const select = target.closest<HTMLElement>('[data-select]');
+  if (!select) return false;
+  if (target.closest('[data-select-trigger]')) {
+    closeSelects(root);
+    toggleSelect(select);
+    return true;
+  }
+  const option = target.closest<HTMLElement>('[data-value]');
+  if (!option) return true;
+  const field = select.dataset.select ?? '';
+  setSelect(root, field, option.dataset.value ?? '');
+  state.inputs = readInputs(root, state.unit);
+  render(root, state);
+  closeSelects(root);
+  return true;
+}
+
+function switchUnit(root: HTMLElement, state: ControllerState, unit: UnitSystem): void {
+  if (unit === state.unit) return;
+  state.inputs = readInputs(root, state.unit);
+  state.unit = unit;
+  writeInputs(root, state.inputs, state.unit);
+  switchUnitButtons(root, state.unit);
+  render(root, state);
+}
+
+async function copySummary(root: HTMLElement, state: ControllerState): Promise<void> {
+  const result = calculateBinding(state.inputs);
+  if (!result.valid) return;
+  const summary = resultSummary(state.inputs, result, state.unit);
+  await navigator.clipboard?.writeText(summary);
+  setOutput(root, 'feedback', state.ui.copied);
+}
+
+function switchUnitButtons(root: HTMLElement, unit: UnitSystem): void {
+  root.querySelectorAll<HTMLElement>('[data-unit]').forEach((button) => {
+    button.classList.toggle('is-active', button.dataset.unit === unit);
+  });
+}
+
+function handleClick(root: HTMLElement, event: MouseEvent, state: ControllerState): void {
+  const target = event.target as HTMLElement;
+  if (handleSelectClick(root, target, state)) return;
+  const unit = target.closest<HTMLElement>('[data-unit]')?.dataset.unit as UnitSystem | undefined;
+  if (unit) {
+    switchUnit(root, state, unit);
+    return;
+  }
+  if (target.closest('[data-reset]')) {
+    state.unit = 'metric';
+    state.inputs = DEFAULT_INPUTS;
+    writeInputs(root, state.inputs, state.unit);
+    switchUnitButtons(root, state.unit);
+    render(root, state);
+    return;
+  }
+  if (target.closest('[data-copy]')) void copySummary(root, state);
+}
+
+function initialiseState(root: HTMLElement): ControllerState {
+  const saved = loadBindingDraft() as SavedBindingDraft | null;
+  const state: ControllerState = {
+    unit: saved?.unit ?? 'metric',
+    inputs: saved?.inputs ?? DEFAULT_INPUTS,
+    ui: readUi(root),
+  };
+  writeInputs(root, state.inputs, state.unit);
+  switchUnitButtons(root, state.unit);
+  return state;
+}
+
+export function createQuiltBindingController(root: HTMLElement): void {
+  const state = initialiseState(root);
+  root.addEventListener('input', () => {
+    state.inputs = readInputs(root, state.unit);
+    render(root, state);
+  });
+  root.addEventListener('click', (event) => handleClick(root, event, state));
+  document.addEventListener('click', (event) => {
+    if (!root.contains(event.target as Node)) closeSelects(root);
+  });
+  render(root, state);
+}

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

@@ -0,0 +1,56 @@
+import { convertLengthFromCm, type BindingInputs, type BindingResult, type UnitSystem } from './logic';
+
+export function formatLength(valueCm: number, unit: UnitSystem, locale = 'en-US'): string {
+  const value = convertLengthFromCm(valueCm, unit);
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: unit === 'imperial' ? 2 : 1 }).format(value);
+}
+
+export function formatWhole(value: number, locale = 'en-US'): string {
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value);
+}
+
+function sceneScale(inputs: BindingInputs): { width: number; height: number } {
+  const ratio = inputs.quiltWidthCm / inputs.quiltLengthCm;
+  const maxWidth = 212;
+  const maxHeight = 126;
+  if (ratio >= maxWidth / maxHeight) return { width: maxWidth, height: maxWidth / ratio };
+  return { width: maxHeight * ratio, height: maxHeight };
+}
+
+function stripMarks(result: BindingResult, y: number): string {
+  const count = Math.min(result.strips, 8);
+  const marks = Array.from({ length: count }, (_, index) => {
+    const x = 38 + index * 27;
+    return `<rect class="qb-strip-mark" x="${x}" y="${y}" width="21" height="8" rx="2" />`;
+  }).join('');
+  const extra = result.strips > 8 ? `<text class="qb-strip-extra" x="257" y="${y + 7}">+${result.strips - 8}</text>` : '';
+  return `${marks}${extra}`;
+}
+
+export function renderIdleScene(): string {
+  return '<svg viewBox="0 0 300 230" role="img" aria-hidden="true"><rect class="qb-scene-paper" x="8" y="8" width="284" height="214" rx="22" /><path class="qb-ribbon-idle" d="M58 52H242V168H58Z" /><rect class="qb-quilt-idle" x="76" y="70" width="148" height="80" rx="4" /></svg>';
+}
+
+export function renderBindingScene(inputs: BindingInputs, result: BindingResult, unit: UnitSystem): string {
+  const size = sceneScale(inputs);
+  const x = 150 - size.width / 2;
+  const y = 90 - size.height / 2;
+  const right = x + size.width;
+  const bottom = y + size.height;
+  const cornerDots = [
+    `<circle class="qb-corner-dot" cx="${x}" cy="${y}" r="4" />`,
+    `<circle class="qb-corner-dot" cx="${right}" cy="${y}" r="4" />`,
+    `<circle class="qb-corner-dot" cx="${right}" cy="${bottom}" r="4" />`,
+    `<circle class="qb-corner-dot" cx="${x}" cy="${bottom}" r="4" />`,
+  ].join('');
+  const label = `${formatLength(result.requiredBindingCm, unit)} ${unit === 'imperial' ? 'in' : 'cm'} binding`;
+  const labelY = 183;
+  const countY = 197;
+  const marksY = 209;
+  return `<svg viewBox="0 0 300 230" role="img" aria-label="${label}"><rect class="qb-scene-paper" x="8" y="8" width="284" height="214" rx="22" /><path class="qb-ribbon" d="M${x - 10} ${y - 10}H${right + 10}V${bottom + 10}H${x - 10}Z" /><rect class="qb-quilt" x="${x}" y="${y}" width="${size.width}" height="${size.height}" rx="4" />${cornerDots}<text class="qb-scene-measure" x="150" y="${labelY}">${label}</text><text class="qb-scene-count" x="150" y="${countY}">${formatWhole(result.strips)} strips to join</text>${stripMarks(result, marksY)}</svg>`;
+}
+
+export function resultSummary(inputs: BindingInputs, result: BindingResult, unit: UnitSystem): string {
+  const cut = `${formatLength(inputs.stripWidthCm, unit)} x ${formatLength(inputs.fabricWidthCm, unit)}`;
+  return `${formatWhole(result.strips)} strips at ${cut}, ${formatLength(result.requiredBindingCm, unit)} binding required.`;
+}

package/src/tool/quiltBindingCalculator/entry.ts

@@ -0,0 +1,29 @@
+import type { TextilesToolEntry, ToolLocaleContent } from '../../types';
+import type { QuiltBindingCalculatorUI } from './ui';
+
+export type QuiltBindingCalculatorLocaleContent = ToolLocaleContent<QuiltBindingCalculatorUI>;
+
+export const quiltBindingCalculator: TextilesToolEntry<QuiltBindingCalculatorUI> = {
+  id: 'quilt-binding-length-calculator',
+  icons: {
+    bg: 'mdi:scissors-cutting',
+    fg: 'mdi:map-marker-distance',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    id: () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content),
+  },
+};

package/src/tool/quiltBindingCalculator/evaluator.ts

@@ -0,0 +1,13 @@
+import type { BindingResult } from './logic';
+
+export interface BindingEvaluation {
+  status: 'ready' | 'review';
+  warning: 'large-waste' | 'small-surplus' | null;
+}
+
+export function evaluateBinding(result: BindingResult): BindingEvaluation {
+  const wasteRatio = result.wasteReserveCm / result.requiredBindingCm;
+  if (wasteRatio > 0.13) return { status: 'review', warning: 'large-waste' };
+  if (result.surplusCm < result.joinLossCm) return { status: 'review', warning: 'small-surplus' };
+  return { status: 'ready', warning: null };
+}

package/src/tool/quiltBindingCalculator/i18n/de.ts

@@ -0,0 +1,3 @@
+import { createContent } from './shared';
+
+export const content = createContent('de');