@jjlmoya/utils-pets 1.29.0 → 1.30.0

package/src/tool/petCollarSizeCalculator/pet-collar-size-calculator.css

@@ -0,0 +1,631 @@
+.pet-collar-size-calculator {
+  --n-ink: #1c2025;
+  --n-muted: #727983;
+  --n-canvas: #edf1f4;
+  --n-surface: #fbfaf7;
+  --n-stage: #e2e8ef;
+  --n-paper: #f8f4eb;
+  --n-field: #f4f1ea;
+  --n-line: #c9ced4;
+  --n-accent: #e45d48;
+  --n-accent-soft: #f7d8d1;
+  --n-blue: #3e5fe7;
+  --n-blue-soft: #dce4ff;
+  --n-lime: #c9d65e;
+  --n-lime-soft: #edf0c9;
+  --n-red: #bd493d;
+  --n-red-soft: #f4d6d0;
+
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 74rem;
+  margin: 0 auto;
+  padding: 0.6rem;
+  color: var(--n-ink);
+}
+
+.theme-dark .pet-collar-size-calculator,
+.pet-collar-size-calculator.theme-dark {
+  --n-ink: #f5f0e7;
+  --n-muted: #aeb7c0;
+  --n-canvas: #11171f;
+  --n-surface: #18222c;
+  --n-stage: #202d3a;
+  --n-paper: #273542;
+  --n-field: #202c38;
+  --n-line: #46515c;
+  --n-accent: #ff8068;
+  --n-accent-soft: #55332f;
+  --n-blue: #9daeff;
+  --n-blue-soft: #333d69;
+  --n-lime: #dce878;
+  --n-lime-soft: #4c5033;
+  --n-red: #ff9b88;
+  --n-red-soft: #57302c;
+}
+
+.pet-collar-atelier {
+  display: grid;
+  grid-template-columns: 3.7rem minmax(0, 1fr);
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 1.4rem;
+  background: var(--n-surface);
+}
+
+.pet-collar-atelier-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.4rem 0.55rem;
+  border-right: 1px solid var(--n-line);
+  color: var(--n-muted);
+}
+
+.pet-collar-rail-index {
+  color: var(--n-accent);
+  font-size: 0.72rem;
+  font-weight: 900;
+}
+
+.pet-collar-rail-word {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-size: 0.62rem;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.pet-collar-rail-mark {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  background: var(--n-blue);
+}
+
+.pet-collar-atelier-body {
+  min-width: 0;
+}
+
+.pet-collar-atelier-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.35rem clamp(1.1rem, 3vw, 2.6rem) 1rem;
+}
+
+.pet-collar-kicker,
+.pet-collar-type-field legend,
+.pet-collar-control label,
+.pet-collar-label {
+  display: block;
+  color: var(--n-muted);
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+
+.pet-collar-kicker {
+  color: var(--n-accent);
+}
+
+.pet-collar-type-field {
+  display: flex;
+  align-items: baseline;
+  gap: 0.8rem;
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+
+.pet-collar-type-field legend {
+  margin: 0;
+}
+
+.pet-collar-type-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+}
+
+.pet-collar-type-options label {
+  position: relative;
+}
+
+.pet-collar-type-options input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.pet-collar-type-options span {
+  display: inline-block;
+  border-bottom: 2px solid transparent;
+  padding: 0.15rem 0 0.25rem;
+  color: var(--n-muted);
+  cursor: pointer;
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.pet-collar-type-options input:checked + span {
+  border-color: var(--n-accent);
+  color: var(--n-ink);
+}
+
+.pet-collar-type-options input:focus-visible + span {
+  outline: 3px solid var(--n-accent);
+  outline-offset: 3px;
+}
+
+.pet-collar-scene {
+  border-top: 1px solid var(--n-line);
+  border-bottom: 1px solid var(--n-line);
+  background: var(--n-stage);
+}
+
+.pet-collar-stage {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 0.85fr);
+  min-height: 28rem;
+}
+
+.pet-collar-wheel-wrap {
+  position: relative;
+  min-width: 0;
+  padding: 1rem 0.4rem 0.6rem 1rem;
+  background: var(--n-paper);
+}
+
+.pet-collar-stage-index {
+  position: absolute;
+  top: 1.2rem;
+  right: 1.35rem;
+  color: var(--n-muted);
+  font-size: 0.65rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.pet-collar-fit-wheel {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.pet-collar-wheel-paper {
+  fill: var(--n-paper);
+  stroke: var(--n-line);
+  stroke-width: 1;
+}
+
+.pet-collar-wheel-tick {
+  stroke: var(--n-line);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.pet-collar-wheel-neck {
+  fill: none;
+  stroke: var(--n-accent);
+  stroke-width: 4;
+  stroke-dasharray: 3 8;
+  stroke-linecap: round;
+}
+
+.pet-collar-wheel-band {
+  fill: none;
+  stroke: var(--n-blue);
+  stroke-width: 27;
+  stroke-linecap: round;
+}
+
+.pet-collar-wheel-edge {
+  fill: none;
+  stroke: var(--n-lime);
+  stroke-width: 4;
+  stroke-linecap: round;
+}
+
+.pet-collar-wheel-buckle {
+  fill: none;
+  stroke: var(--n-lime);
+  stroke-width: 5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.pet-collar-wheel-center {
+  fill: var(--n-accent);
+}
+
+.pet-collar-wheel-leader {
+  fill: none;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.pet-collar-wheel-leader-room {
+  stroke: var(--n-accent);
+}
+
+.pet-collar-wheel-leader-span {
+  stroke: var(--n-blue);
+}
+
+.pet-collar-wheel-label,
+.pet-collar-wheel-sublabel {
+  fill: var(--n-ink);
+}
+
+.pet-collar-wheel-label {
+  font-size: 14px;
+  font-weight: 900;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.pet-collar-wheel-label-neck {
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.pet-collar-wheel-label-span {
+  fill: var(--n-blue);
+}
+
+.pet-collar-wheel-sublabel {
+  fill: var(--n-muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.pet-collar-reading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 2rem clamp(1.1rem, 4vw, 3.4rem) 2rem clamp(1.1rem, 3vw, 2rem);
+  border-left: 1px solid var(--n-line);
+}
+
+.pet-collar-reading-label {
+  color: var(--n-accent);
+  font-size: 0.75rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.pet-collar-reading strong {
+  display: block;
+  margin: 0.7rem 0 0.4rem;
+  color: var(--n-ink);
+  font-size: clamp(2.8rem, 6vw, 5.8rem);
+  font-weight: 900;
+  letter-spacing: -0.08em;
+  line-height: 0.9;
+}
+
+.pet-collar-reading strong small {
+  display: inline-block;
+  margin: 0 0.1em;
+  color: var(--n-muted);
+  font-size: 0.3em;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.pet-collar-reading strong em {
+  display: block;
+  margin-top: 0.55rem;
+  color: var(--n-muted);
+  font-size: 0.25em;
+  font-style: normal;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.pet-collar-reading-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 2.4rem;
+  padding-top: 0.9rem;
+  border-top: 1px solid var(--n-line);
+}
+
+.pet-collar-reading-metrics span,
+.pet-collar-reading-metrics b {
+  display: block;
+}
+
+.pet-collar-reading-metrics span {
+  color: var(--n-muted);
+  font-size: 0.65rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.pet-collar-reading-metrics b {
+  margin-top: 0.35rem;
+  color: var(--n-ink);
+  font-size: 0.95rem;
+}
+
+.pet-collar-controls {
+  display: grid;
+  grid-template-columns: minmax(9rem, 0.8fr) minmax(15rem, 1.7fr) auto;
+  padding: 0;
+  background: var(--n-surface);
+}
+
+.pet-collar-control {
+  min-width: 0;
+  padding: 1.1rem clamp(1rem, 2vw, 1.6rem) 1.2rem;
+}
+
+.pet-collar-control + .pet-collar-control {
+  border-left: 1px solid var(--n-line);
+}
+
+.pet-collar-control label,
+.pet-collar-label {
+  margin-bottom: 0.45rem;
+}
+
+.pet-collar-number-wrap,
+.pet-collar-range-row {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.pet-collar-number-wrap input {
+  width: 6rem;
+}
+
+.pet-collar-number-wrap span,
+.pet-collar-range-row output {
+  color: var(--n-accent);
+  font-size: 0.88rem;
+  font-weight: 900;
+}
+
+.pet-collar-range-row input[type='range'] {
+  flex: 1;
+  min-width: 7rem;
+}
+
+.pet-collar-range-row output {
+  min-width: 3.3rem;
+  text-align: right;
+}
+
+.pet-collar-size-calculator input[type='number'] {
+  box-sizing: border-box;
+  min-height: 2.5rem;
+  border: 0;
+  border-bottom: 2px solid var(--n-accent);
+  border-radius: 0;
+  padding: 0.1rem 0;
+  color: var(--n-ink);
+  background: transparent;
+  font: inherit;
+  font-size: 1.65rem;
+  font-weight: 900;
+}
+
+.pet-collar-size-calculator input:focus-visible,
+.pet-collar-size-calculator button:focus-visible {
+  outline: 3px solid var(--n-accent);
+  outline-offset: 3px;
+}
+
+.pet-collar-size-calculator input[type='range'] {
+  accent-color: var(--n-blue);
+}
+
+.pet-collar-unit-switch {
+  display: inline-flex;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.pet-collar-unit-switch button {
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 0.15rem 0 0.3rem;
+  color: var(--n-muted);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 900;
+}
+
+.pet-collar-unit-switch button.is-active {
+  border-color: var(--n-blue);
+  color: var(--n-ink);
+}
+
+.pet-collar-result {
+  padding: 0.85rem clamp(1rem, 2vw, 1.6rem) 1rem;
+  border-top: 1px solid var(--n-line);
+  background: var(--n-surface);
+}
+
+.pet-collar-guidance {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
+}
+
+.pet-collar-guidance-main {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  color: var(--n-muted);
+  font-size: 0.78rem;
+}
+
+.pet-collar-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--n-ink);
+  font-size: 0.75rem;
+  font-weight: 900;
+}
+
+.pet-collar-status::before {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  background: var(--n-blue);
+  content: '';
+}
+
+.pet-collar-status-tight::before {
+  background: var(--n-red);
+}
+
+.pet-collar-status-loose::before {
+  background: var(--n-lime);
+}
+
+.pet-collar-guidance p {
+  display: flex;
+  gap: 0.45rem;
+  margin: 0;
+  color: var(--n-muted);
+  font-size: 0.78rem;
+  line-height: 1.4;
+  text-align: right;
+}
+
+.pet-collar-guidance p span {
+  color: var(--n-accent);
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.pet-collar-guidance p strong {
+  color: var(--n-ink);
+}
+
+.pet-collar-invalid,
+.pet-collar-result-invalid {
+  padding: 1rem;
+  color: var(--n-red);
+  background: var(--n-red-soft);
+}
+
+@media (max-width: 820px) {
+  .pet-collar-stage {
+    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.72fr);
+  }
+
+  .pet-collar-reading strong {
+    font-size: clamp(2.5rem, 7vw, 4.2rem);
+  }
+}
+
+@media (max-width: 660px) {
+  .pet-collar-atelier {
+    grid-template-columns: 1fr;
+  }
+
+  .pet-collar-atelier-rail {
+    display: none;
+  }
+
+  .pet-collar-atelier-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .pet-collar-type-field {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .pet-collar-stage {
+    grid-template-columns: 1fr;
+  }
+
+  .pet-collar-wheel-wrap {
+    padding-right: 0.6rem;
+  }
+
+  .pet-collar-reading {
+    display: block;
+    padding: 1.25rem 1.25rem 1.4rem;
+    border-top: 1px solid var(--n-line);
+    border-left: 0;
+  }
+
+  .pet-collar-reading strong {
+    font-size: clamp(3.4rem, 17vw, 5.4rem);
+  }
+
+  .pet-collar-reading-metrics {
+    margin-top: 1.3rem;
+  }
+
+  .pet-collar-controls {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .pet-collar-control-room {
+    border-left: 1px solid var(--n-line);
+  }
+
+  .pet-collar-control-unit {
+    grid-column: 1 / -1;
+    border-top: 1px solid var(--n-line);
+    border-left: 0;
+  }
+
+  .pet-collar-guidance {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.7rem;
+  }
+
+  .pet-collar-guidance p {
+    flex-wrap: wrap;
+    text-align: left;
+  }
+}
+
+@media (max-width: 430px) {
+  .pet-collar-size-calculator {
+    padding: 0.25rem;
+  }
+
+  .pet-collar-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .pet-collar-control + .pet-collar-control,
+  .pet-collar-control-room,
+  .pet-collar-control-unit {
+    border-top: 1px solid var(--n-line);
+    border-left: 0;
+  }
+
+  .pet-collar-control-unit {
+    grid-column: auto;
+  }
+}

package/src/tool/petCollarSizeCalculator/seo.astro

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

package/src/tool/petCollarSizeCalculator/storage.ts

@@ -0,0 +1,29 @@
+import type { CollarType, CollarUnit } from './logic';
+
+export interface StoredCollarState {
+  neckCircumference?: number;
+  allowance?: number;
+  unit?: CollarUnit;
+  collarType?: CollarType;
+}
+
+const STORAGE_KEY = 'jjlmoya-pet-collar-size';
+
+export function loadCollarState(): StoredCollarState {
+  if (typeof window === 'undefined') return {};
+
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY);
+    return value ? JSON.parse(value) as StoredCollarState : {};
+  } catch {
+    return {};
+  }
+}
+
+export function saveCollarState(state: StoredCollarState): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {}
+}

package/src/tool/petCollarSizeCalculator/ui.ts

@@ -0,0 +1,33 @@
+export interface PetCollarSizeCalculatorUI {
+  [key: string]: string;
+  neckCircumferenceLabel: string;
+  unitLabel: string;
+  centimetres: string;
+  inches: string;
+  allowanceLabel: string;
+  collarTypeLabel: string;
+  flatCollar: string;
+  breakawayCollar: string;
+  martingaleCollar: string;
+  statusTight: string;
+  statusBalanced: string;
+  statusLoose: string;
+  statusTightDetail: string;
+  statusBalancedDetail: string;
+  statusLooseDetail: string;
+  fitStudyLabel: string;
+  fitWindowLabel: string;
+  measuredLabel: string;
+  roomLabel: string;
+  checkLabel: string;
+  sceneAria: string;
+  neckMarker: string;
+  easeMarker: string;
+  rangeMarker: string;
+  minimumMarker: string;
+  maximumMarker: string;
+  checkFlat: string;
+  checkBreakaway: string;
+  checkMartingale: string;
+  invalidInput: string;
+}

package/src/tools.ts

@@ -6,6 +6,7 @@ import { PET_TOXICITY_TOOL } from './tool/petToxicity';
 import { PET_WATER_INTAKE_TOOL } from './tool/petWaterIntake';
 import { PET_CARRIER_CRATE_SIZE_PLANNER_TOOL } from './tool/petCarrierCrateSizePlanner';
 import { PET_MEDICATION_SCHEDULE_PLANNER_TOOL } from './tool/petMedicationSchedulePlanner';
+import { PET_COLLAR_SIZE_CALCULATOR_TOOL } from './tool/petCollarSizeCalculator';
 import type { ToolDefinition } from './types';
 
 export const ALL_TOOLS: ToolDefinition[] = [
@@ -16,6 +17,7 @@ export const ALL_TOOLS: ToolDefinition[] = [
   PET_WATER_INTAKE_TOOL,
   PET_CARRIER_CRATE_SIZE_PLANNER_TOOL,
   PET_MEDICATION_SCHEDULE_PLANNER_TOOL,
+  PET_COLLAR_SIZE_CALCULATOR_TOOL,
 ];
 
 export {
@@ -26,4 +28,5 @@ export {
   PET_WATER_INTAKE_TOOL,
   PET_CARRIER_CRATE_SIZE_PLANNER_TOOL,
   PET_MEDICATION_SCHEDULE_PLANNER_TOOL,
+  PET_COLLAR_SIZE_CALCULATOR_TOOL,
 };