@jjlmoya/utils-textiles 1.24.0 → 1.26.0

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

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

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

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

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

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

package/src/tool/quiltBindingCalculator/index.ts

@@ -0,0 +1,11 @@
+import type { ToolDefinition } from '../../types';
+import { quiltBindingCalculator } from './entry';
+
+export * from './entry';
+
+export const QUILT_BINDING_CALCULATOR_TOOL: ToolDefinition = {
+  entry: quiltBindingCalculator,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/quiltBindingCalculator/logic.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+import { renderBindingScene } from './dom-views';
+import { calculateBinding, convertLengthFromCm, convertLengthToCm, type BindingInputs } from './logic';
+
+const example: BindingInputs = {
+  quiltWidthCm: 90,
+  quiltLengthCm: 120,
+  cornerCount: 4,
+  stripWidthCm: 6.5,
+  fabricWidthCm: 110,
+  seamAllowanceCm: 0.6,
+  joinMethod: 'diagonal',
+  safetyPercent: 0.1,
+};
+
+describe('quilt binding calculation', () => {
+  it('calculates perimeter, reserves, strips, and surplus', () => {
+    const result = calculateBinding(example);
+    expect(result).toMatchObject({
+      valid: true,
+      perimeterCm: 420,
+      cornerReserveCm: 4.8,
+      joiningReserveCm: 7.7,
+      requiredBindingCm: 475.75,
+      strips: 5,
+      joinCount: 4,
+      joinedLengthCm: 524,
+    });
+    if (result.valid) expect(result.surplusCm).toBeCloseTo(48.25, 4);
+  });
+
+  it('uses the smaller loss for straight joins', () => {
+    const result = calculateBinding({ ...example, joinMethod: 'straight' });
+    expect(result.valid).toBe(true);
+    if (result.valid) {
+      expect(result.joinLossCm).toBe(1.2);
+      expect(result.joiningReserveCm).toBe(1.2);
+    }
+  });
+
+  it('rejects a fabric width that cannot hold the strip', () => {
+    const result = calculateBinding({ ...example, fabricWidthCm: 6 });
+    expect(result).toEqual({ valid: false, errors: ['fabricWidth'] });
+  });
+
+  it('rejects negative dimensions and invalid corners', () => {
+    const result = calculateBinding({ ...example, quiltWidthCm: -1, cornerCount: 2.5 });
+    expect(result).toEqual({ valid: false, errors: ['lengths', 'corners'] });
+  });
+
+  it('converts inches without changing the physical length', () => {
+    const inches = convertLengthFromCm(2.54, 'imperial');
+    expect(inches).toBe(1);
+    expect(convertLengthToCm(inches, 'imperial')).toBe(2.54);
+  });
+
+  it('keeps scene labels clear and preserves quilt proportions', () => {
+    const result = calculateBinding(example);
+    expect(result.valid).toBe(true);
+    if (result.valid) {
+      const scene = renderBindingScene(example, result, 'metric');
+      const quilt = scene.match(/class="qb-quilt"[^>]*width="([^"]+)" height="([^"]+)"/);
+      const label = scene.match(/class="qb-scene-measure" x="150" y="([^"]+)"/);
+      const marks = scene.match(/class="qb-strip-mark" x="38" y="([^"]+)"/);
+      expect(quilt).not.toBeNull();
+      expect(Number(quilt?.[1]) / Number(quilt?.[2])).toBeCloseTo(0.75, 4);
+      expect(Number(label?.[1])).toBeLessThan(Number(marks?.[1]));
+    }
+  });
+});

package/src/tool/quiltBindingCalculator/logic.ts

@@ -0,0 +1,93 @@
+export const INCH_TO_CM = 2.54;
+
+export type UnitSystem = 'metric' | 'imperial';
+export type JoinMethod = 'diagonal' | 'straight';
+export type SafetyPercent = 0.05 | 0.1 | 0.15;
+
+export interface BindingInputs {
+  quiltWidthCm: number;
+  quiltLengthCm: number;
+  cornerCount: number;
+  stripWidthCm: number;
+  fabricWidthCm: number;
+  seamAllowanceCm: number;
+  joinMethod: JoinMethod;
+  safetyPercent: SafetyPercent;
+}
+
+export interface BindingResult {
+  valid: true;
+  perimeterCm: number;
+  cornerReserveCm: number;
+  joiningReserveCm: number;
+  wasteReserveCm: number;
+  requiredBindingCm: number;
+  strips: number;
+  joinCount: number;
+  joinedLengthCm: number;
+  surplusCm: number;
+  fabricCutLengthCm: number;
+  joinLossCm: number;
+}
+
+export interface InvalidBindingResult {
+  valid: false;
+  errors: string[];
+}
+
+export type CalculationResult = BindingResult | InvalidBindingResult;
+
+export function convertLengthToCm(value: number, unit: UnitSystem): number {
+  return unit === 'imperial' ? value * INCH_TO_CM : value;
+}
+
+export function convertLengthFromCm(value: number, unit: UnitSystem): number {
+  return unit === 'imperial' ? value / INCH_TO_CM : value;
+}
+
+function validateInputs(inputs: BindingInputs): string[] {
+  const errors: string[] = [];
+  const lengths = [inputs.quiltWidthCm, inputs.quiltLengthCm, inputs.stripWidthCm, inputs.fabricWidthCm, inputs.seamAllowanceCm];
+  if (lengths.some((value) => !Number.isFinite(value) || value <= 0)) errors.push('lengths');
+  if (!Number.isInteger(inputs.cornerCount) || inputs.cornerCount < 0 || inputs.cornerCount > 100) errors.push('corners');
+  if (inputs.fabricWidthCm <= inputs.stripWidthCm) errors.push('fabricWidth');
+  if (inputs.safetyPercent < 0.05 || inputs.safetyPercent > 0.15) errors.push('safety');
+  return errors;
+}
+
+function countStrips(requiredCm: number, fabricWidthCm: number, joinLossCm: number): number {
+  const usefulLength = fabricWidthCm - joinLossCm;
+  return Math.max(1, Math.ceil((requiredCm - joinLossCm) / usefulLength));
+}
+
+export function calculateBinding(inputs: BindingInputs): CalculationResult {
+  const errors = validateInputs(inputs);
+  if (errors.length > 0) return { valid: false, errors };
+
+  const perimeterCm = 2 * (inputs.quiltWidthCm + inputs.quiltLengthCm);
+  const cornerReserveCm = inputs.cornerCount * inputs.seamAllowanceCm * 2;
+  const joiningReserveCm = inputs.joinMethod === 'diagonal'
+    ? inputs.stripWidthCm + inputs.seamAllowanceCm * 2
+    : inputs.seamAllowanceCm * 2;
+  const baseLengthCm = perimeterCm + cornerReserveCm + joiningReserveCm;
+  const wasteReserveCm = baseLengthCm * inputs.safetyPercent;
+  const requiredBindingCm = baseLengthCm + wasteReserveCm;
+  const joinLossCm = inputs.joinMethod === 'diagonal' ? inputs.stripWidthCm : inputs.seamAllowanceCm * 2;
+  const strips = countStrips(requiredBindingCm, inputs.fabricWidthCm, joinLossCm);
+  const joinedLengthCm = strips * inputs.fabricWidthCm - (strips - 1) * joinLossCm;
+
+  return {
+    valid: true,
+    perimeterCm,
+    cornerReserveCm,
+    joiningReserveCm,
+    wasteReserveCm,
+    requiredBindingCm,
+    strips,
+    joinCount: Math.max(0, strips - 1),
+    joinedLengthCm,
+    surplusCm: joinedLengthCm - requiredBindingCm,
+    fabricCutLengthCm: strips * inputs.stripWidthCm,
+    joinLossCm,
+  };
+}

package/src/tool/quiltBindingCalculator/quilt-binding-length-and-strip-calculator.css

@@ -0,0 +1,474 @@
+:root {
+  --n-paper: #f7f1e6;
+  --n-surface: #fffdf8;
+  --n-ink: #2c2930;
+  --n-muted: #746c70;
+  --n-line: #d8c9b5;
+  --n-accent: #9b4d3a;
+  --n-accent-strong: #71352b;
+  --n-accent-soft: #f0d8c8;
+  --n-ribbon: #d28b65;
+  --n-quilt: #b7c5b5;
+  --n-success: #3c6b4b;
+  --n-warning: #9a5b22;
+  --n-error: #9b3c3c;
+}
+
+.qb-tool {
+  --n-card: var(--n-surface);
+  --n-card-ink: var(--n-ink);
+  --n-card-muted: var(--n-muted);
+  --n-card-line: var(--n-line);
+  --n-card-accent: var(--n-accent);
+
+  box-sizing: border-box;
+  width: min(100%, calc(100vw - 4rem));
+  max-width: min(100%, calc(100vw - 4rem));
+  color: var(--n-card-ink);
+  background: var(--n-paper);
+  border: 1px solid var(--n-card-line);
+  border-radius: 1.5rem;
+  overflow: visible;
+}
+
+main:has(.qb-tool) {
+  min-width: 0;
+}
+
+.tool-page.tool-page:has(.qb-tool) {
+  box-sizing: border-box;
+  width: min(100%, calc(100vw - 4rem));
+  max-width: min(1200px, calc(100vw - 4rem));
+  min-width: 0;
+}
+
+.section-tool.section-tool:has(.qb-tool) {
+  box-sizing: border-box;
+  width: min(100%, calc(100vw - 4rem));
+  max-width: min(1200px, calc(100vw - 4rem));
+}
+
+.theme-dark .qb-tool {
+  --n-paper: #17191b;
+  --n-surface: #24282b;
+  --n-ink: #f5eee3;
+  --n-muted: #c4b8ad;
+  --n-line: #4c4b48;
+  --n-accent: #e4a07a;
+  --n-accent-strong: #ffd0ae;
+  --n-accent-soft: #49352d;
+  --n-ribbon: #bd785d;
+  --n-quilt: #718879;
+  --n-success: #a9d5ad;
+  --n-warning: #f0bb78;
+  --n-error: #ffaaa0;
+}
+
+.qb-layout {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(15rem, 0.9fr) minmax(20rem, 1.1fr);
+  gap: 0;
+}
+
+.qb-stage,
+.qb-workbench,
+.qb-result,
+.qb-notes {
+  min-width: 0;
+  background: var(--n-card);
+}
+
+.qb-stage {
+  padding: 1.25rem;
+  border-radius: 1.5rem 0 0;
+  border-right: 1px solid var(--n-card-line);
+}
+
+.qb-stage-head,
+.qb-workbench-head,
+.qb-result-head,
+.qb-result-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.qb-stage-label,
+.qb-choice-label,
+.qb-plan span,
+.qb-metrics span {
+  color: var(--n-card-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.qb-unit-readout {
+  color: var(--n-card-accent);
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.qb-scene {
+  margin: 1rem 0 0.5rem;
+}
+
+.qb-scene svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.qb-scene-note {
+  margin: 0;
+  color: var(--n-card-muted);
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.qb-scene-paper {
+  fill: var(--n-paper);
+  stroke: var(--n-card-line);
+  stroke-width: 1;
+}
+
+.qb-ribbon,
+.qb-ribbon-idle {
+  fill: none;
+  stroke: var(--n-ribbon);
+  stroke-width: 12;
+  stroke-linejoin: round;
+}
+
+.qb-ribbon-idle { opacity: 0.5; }
+
+.qb-quilt {
+  fill: var(--n-quilt);
+  stroke: var(--n-card-ink);
+  stroke-width: 2;
+}
+
+.qb-quilt-idle {
+  fill: var(--n-quilt);
+  opacity: 0.35;
+}
+
+.qb-corner-dot {
+  fill: var(--n-card-accent);
+  stroke: var(--n-card);
+  stroke-width: 2;
+}
+
+.qb-scene-measure,
+.qb-scene-count,
+.qb-strip-extra {
+  fill: var(--n-card-ink);
+  text-anchor: middle;
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.qb-scene-count {
+  fill: var(--n-card-muted);
+  font-size: 7px;
+  font-weight: 500;
+}
+
+.qb-strip-mark {
+  fill: var(--n-ribbon);
+  stroke: var(--n-card-ink);
+  stroke-width: 0.5;
+}
+
+.qb-workbench {
+  padding: 1.25rem;
+  border-radius: 0 1.5rem 0 0;
+}
+
+.qb-workbench h2,
+.qb-result h2 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+
+.qb-unit-toggle {
+  display: inline-flex;
+  padding: 0.2rem;
+  border: 1px solid var(--n-card-line);
+  border-radius: 999px;
+}
+
+.qb-unit-button,
+.qb-primary,
+.qb-secondary,
+.qb-choice > button,
+.qb-options button {
+  border: 0;
+  color: var(--n-card-ink);
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+
+.qb-unit-button {
+  padding: 0.45rem 0.7rem;
+  border-radius: 999px;
+  color: var(--n-card-muted);
+  font-size: 0.75rem;
+}
+
+.qb-unit-button.is-active {
+  color: var(--n-surface);
+  background: var(--n-card-accent);
+}
+
+.qb-fieldset {
+  min-width: 0;
+  margin: 1.25rem 0 0;
+  padding: 0;
+  border: 0;
+}
+
+.qb-fieldset legend {
+  margin-bottom: 0.65rem;
+  color: var(--n-card-accent);
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.qb-fields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.65rem;
+}
+
+.qb-field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--n-card-ink);
+  font-size: 0.78rem;
+}
+
+.qb-field input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 2.7rem;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--n-card-line);
+  border-radius: 0.6rem;
+  color: var(--n-card-ink);
+  background: var(--n-paper);
+  font: inherit;
+}
+
+.qb-field input:focus,
+.qb-choice > button:focus,
+.qb-unit-button:focus,
+.qb-primary:focus,
+.qb-secondary:focus,
+.qb-options button:focus {
+  outline: 3px solid var(--n-accent-soft);
+  outline-offset: 2px;
+}
+
+.qb-field small {
+  color: var(--n-card-muted);
+  font-size: 0.68rem;
+  line-height: 1.25;
+}
+
+.qb-choice-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.65rem;
+  margin-top: 1.25rem;
+}
+
+.qb-choice {
+  position: relative;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.qb-choice > button {
+  min-height: 2.7rem;
+  padding: 0.55rem 2rem 0.55rem 0.7rem;
+  border: 1px solid var(--n-card-line);
+  border-radius: 0.6rem;
+  background: var(--n-paper);
+  text-align: left;
+}
+
+.qb-choice > button::after {
+  content: '';
+  position: absolute;
+  right: 0.8rem;
+  bottom: 0.95rem;
+  width: 0.45rem;
+  height: 0.45rem;
+  border-right: 2px solid var(--n-card-accent);
+  border-bottom: 2px solid var(--n-card-accent);
+  transform: rotate(45deg);
+}
+
+.qb-options {
+  position: absolute;
+  z-index: 3;
+  top: 4rem;
+  right: 0;
+  left: 0;
+  padding: 0.3rem;
+  border: 1px solid var(--n-card-line);
+  border-radius: 0.6rem;
+  background: var(--n-card);
+  box-shadow: 0 0.8rem 1.4rem #0002;
+}
+
+.qb-options[hidden] { display: none; }
+
+.qb-options button {
+  display: block;
+  width: 100%;
+  padding: 0.6rem;
+  border-radius: 0.35rem;
+  text-align: left;
+}
+
+.qb-options button:hover,
+.qb-options button.is-active {
+  color: var(--n-card-accent);
+  background: var(--n-accent-soft);
+}
+
+.qb-result {
+  padding: 1.25rem;
+  border-top: 1px solid var(--n-card-line);
+  border-radius: 0 0 1.5rem;
+}
+
+.qb-status {
+  padding: 0.35rem 0.6rem;
+  border-radius: 999px;
+  color: var(--n-card-muted);
+  background: var(--n-accent-soft);
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+.qb-status.is-ready { color: var(--n-success); }
+.qb-status.is-review { color: var(--n-warning); }
+.qb-status.is-error { color: var(--n-error); }
+.qb-result-body { margin-top: 1rem; }
+
+.qb-result-body.is-empty .qb-metrics,
+.qb-result-body.is-empty .qb-plan,
+.qb-result-body.is-empty .qb-warning { display: none; }
+
+.qb-empty {
+  margin: 0;
+  color: var(--n-card-muted);
+}
+
+.qb-result-body:not(.is-empty) .qb-empty { display: none; }
+
+.qb-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.7rem;
+}
+
+.qb-metrics div {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.qb-metrics strong {
+  overflow-wrap: anywhere;
+  font-size: 1rem;
+}
+
+.qb-plan {
+  display: grid;
+  gap: 0.3rem;
+  margin: 1rem 0;
+  padding-top: 0.9rem;
+  border-top: 1px solid var(--n-card-line);
+}
+
+.qb-plan strong { font-size: 0.95rem; }
+
+.qb-warning {
+  margin: 0.8rem 0 0;
+  color: var(--n-warning);
+  font-size: 0.82rem;
+}
+
+.qb-result-foot { margin-top: 1rem; }
+
+.qb-feedback {
+  min-height: 1.2rem;
+  margin: 0;
+  color: var(--n-success);
+  font-size: 0.78rem;
+}
+
+.qb-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.qb-primary,
+.qb-secondary {
+  padding: 0.55rem 0.8rem;
+  border-radius: 0.55rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.qb-primary {
+  color: var(--n-surface);
+  background: var(--n-card-accent);
+}
+
+.qb-secondary { border: 1px solid var(--n-card-line); }
+
+.qb-notes {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--n-card-line);
+  color: var(--n-card-muted);
+  font-size: 0.82rem;
+  line-height: 1.5;
+}
+
+.qb-notes summary {
+  color: var(--n-card-ink);
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.qb-notes p { margin: 0.8rem 0 0; }
+
+@media (max-width: 48rem) {
+  .qb-layout { grid-template-columns: 1fr; }
+  .qb-stage {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-card-line);
+    border-radius: 1.5rem 1.5rem 0 0;
+  }
+  .qb-workbench { border-radius: 0; }
+  .qb-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 30rem) {
+  .qb-fields, .qb-choice-row { grid-template-columns: 1fr 1fr; }
+  .qb-fields .qb-field:last-child { grid-column: 1 / -1; }
+  .qb-result-head,
+  .qb-result-foot {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .qb-actions { width: 100%; }
+  .qb-actions button { flex: 1; }
+}

package/src/tool/quiltBindingCalculator/seo.astro

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

package/src/tool/quiltBindingCalculator/storage.ts

@@ -0,0 +1,26 @@
+import type { BindingInputs, UnitSystem } from './logic';
+
+const STORAGE_KEY = 'jjlmoya-quilt-binding-calculator-v1';
+
+export interface SavedBindingDraft {
+  unit: UnitSystem;
+  inputs: BindingInputs;
+}
+
+export function loadBindingDraft(): SavedBindingDraft | null {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw) as SavedBindingDraft;
+  } catch {
+    return null;
+  }
+}
+
+export function saveBindingDraft(draft: SavedBindingDraft): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(draft));
+  } catch {
+    return;
+  }
+}