Move DurationInput to @probo/ui and scope pattern merge by category

Move the DurationInput component from the console app into @probo/ui
for reuse, add duration formatting helpers to @probo/helpers, and
update pattern merge to group by both category ID and prefix.

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/helpers/src/duration.ts

@@ -21,6 +21,16 @@ const UNITS: [number, string, string][] = [
   [60, "minute", "minutes"],
 ];
 
+export const DURATION_UNITS: { value: string; label: string; seconds: number }[] = [
+  { value: "seconds", label: "seconds", seconds: 1 },
+  { value: "minutes", label: "minutes", seconds: 60 },
+  { value: "hours", label: "hours", seconds: 3600 },
+  { value: "days", label: "days", seconds: 86400 },
+  { value: "weeks", label: "weeks", seconds: 604800 },
+  { value: "months", label: "months", seconds: 2592000 },
+  { value: "years", label: "years", seconds: 31536000 },
+];
+
 export function humanizeSeconds(seconds: number | null): string {
   if (seconds === null || seconds <= 0) return "session";
   for (const [unit, singular, plural] of UNITS) {
@@ -31,3 +41,23 @@ export function humanizeSeconds(seconds: number | null): string {
   }
   return `${seconds} ${seconds === 1 ? "second" : "seconds"}`;
 }
+
+export function toMaxAgeSeconds(value: string, unit: string): number | null {
+  const num = parseFloat(value);
+  if (isNaN(num) || num <= 0) return null;
+  const u = DURATION_UNITS.find(u => u.value === unit);
+  if (!u) return null;
+  const rounded = Math.round(num * u.seconds);
+  if (rounded <= 0) return null;
+  return rounded;
+}
+
+export function fromMaxAgeSeconds(seconds: number | null): { value: string; unit: string } {
+  if (seconds === null || seconds <= 0) return { value: "", unit: "days" };
+  for (const u of [...DURATION_UNITS].reverse()) {
+    if (seconds >= u.seconds && seconds % u.seconds === 0) {
+      return { value: String(seconds / u.seconds), unit: u.value };
+    }
+  }
+  return { value: String(seconds), unit: "seconds" };
+}

packages/helpers/src/index.ts

@@ -109,7 +109,12 @@ export {
   formatDuration,
   parseDate,
 } from "./date";
-export { humanizeSeconds } from "./duration";
+export {
+  humanizeSeconds,
+  DURATION_UNITS,
+  toMaxAgeSeconds,
+  fromMaxAgeSeconds,
+} from "./duration";
 export { getTrustCenterUrl } from "./trustCenter";
 export { detectSocialName } from "./socialUrl";
 export { formatError, type GraphQLError } from "./error";

packages/ui/src/Atoms/Input/DurationInput.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
+//
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+//
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+// PERFORMANCE OF THIS SOFTWARE.
+
+import { DURATION_UNITS } from "@probo/helpers";
+
+import { Input } from "./Input";
+
+interface DurationInputProps {
+  value: string;
+  unit: string;
+  onValueChange: (value: string) => void;
+  onUnitChange: (unit: string) => void;
+}
+
+export function DurationInput({ value, unit, onValueChange, onUnitChange }: DurationInputProps) {
+  return (
+    <div className="flex gap-1">
+      <Input
+        type="number"
+        min={0}
+        value={value}
+        onChange={e => onValueChange(e.target.value)}
+        placeholder="—"
+        className="w-20"
+      />
+      <select
+        value={unit}
+        onChange={e => onUnitChange(e.target.value)}
+        className="rounded border border-border bg-background px-2 py-1 text-sm"
+      >
+        {DURATION_UNITS.map(u => (
+          <option key={u.value} value={u.value}>{u.label}</option>
+        ))}
+      </select>
+    </div>
+  );
+}

packages/ui/src/index.ts

@@ -39,6 +39,7 @@ export {
 export { Avatar } from "./Atoms/Avatar/Avatar";
 export { Field } from "./Molecules/Field/Field";
 export { Input } from "./Atoms/Input/Input";
+export { DurationInput } from "./Atoms/Input/DurationInput";
 export { Textarea } from "./Atoms/Textarea/Textarea";
 export { Option, Select, SelectGroup, SelectLabel } from "./Atoms/Select/Select";
 export { Label } from "./Atoms/Label/Label";