"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import * as React from 'react';

// src/chrome/app-line-field-dial-preset.tsx
var appLineFieldPattern = {
  lineField: {
    spacing: 4,
    thickness: 1.2,
    topOpacity: 0.18,
    bottomOpacity: 0.15,
    /** Pinstripe tint matches `--theme-background-sidebar` (warm shell gray). */
    tint: "#F9FAFA",
    blur: 0,
    lift: 0
  },
  surface: {
    showPattern: true,
    glowOpacity: 0.2,
    noiseOpacity: 0.08
  }
};
function hexToRgb(hex) {
  const normalized = hex.replace("#", "");
  const expanded = normalized.length === 3 ? normalized.split("").map((character) => `${character}${character}`).join("") : normalized;
  if (!/^[\da-fA-F]{6}$/.test(expanded)) {
    return { r: 148, g: 163, b: 184 };
  }
  return {
    r: Number.parseInt(expanded.slice(0, 2), 16),
    g: Number.parseInt(expanded.slice(2, 4), 16),
    b: Number.parseInt(expanded.slice(4, 6), 16)
  };
}
var DARK_LINE_ALPHA_SCALE = 0.14;
function flatLightStripeColor(pattern, tint) {
  const a = (pattern.lineField.topOpacity + pattern.lineField.bottomOpacity) / 2;
  return `rgba(${tint.r}, ${tint.g}, ${tint.b}, ${a})`;
}
function flatDarkStripeColor(pattern) {
  const a = (pattern.lineField.topOpacity + pattern.lineField.bottomOpacity) / 2 * DARK_LINE_ALPHA_SCALE;
  return `rgba(255, 255, 255, ${a})`;
}
function GroovedHorizontalStripes({
  pattern,
  tint,
  patternOpacity,
  lift,
  mask,
  isDark
}) {
  const stripeColor = isDark ? flatDarkStripeColor(pattern) : flatLightStripeColor(pattern, tint);
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: "absolute inset-0",
      style: {
        transform: lift,
        filter: `blur(${pattern.lineField.blur}px)`,
        backgroundColor: stripeColor,
        opacity: patternOpacity,
        WebkitMaskImage: mask,
        maskImage: mask
      }
    }
  );
}
function LineFieldPatternLayers({
  pattern
}) {
  const tint = hexToRgb(pattern.lineField.tint);
  const lift = `translateY(${pattern.lineField.lift}px)`;
  const mask = `repeating-linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) ${pattern.lineField.thickness}px, transparent ${pattern.lineField.thickness}px, transparent ${pattern.lineField.spacing}px)`;
  const patternOpacity = pattern.surface.showPattern ? 1 : 0;
  const darkShellLayers = /* @__PURE__ */ jsx(
    GroovedHorizontalStripes,
    {
      pattern,
      tint,
      patternOpacity,
      lift,
      mask,
      isDark: true
    }
  );
  return /* @__PURE__ */ jsxs(
    "div",
    {
      "aria-hidden": true,
      className: "pointer-events-none absolute inset-0 z-0 overflow-hidden",
      suppressHydrationWarning: true,
      children: [
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 dark:hidden", children: /* @__PURE__ */ jsx(
          GroovedHorizontalStripes,
          {
            pattern,
            tint,
            patternOpacity,
            lift,
            mask,
            isDark: false
          }
        ) }),
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 hidden dark:block", children: darkShellLayers })
      ]
    }
  );
}
var GroovedPanelPreferenceContext = React.createContext(null);
function useGroovedPanelPreference() {
  const ctx = React.useContext(GroovedPanelPreferenceContext);
  if (ctx == null) {
    throw new Error(
      "useGroovedPanelPreference must be used within GroovedPanelPreferenceProvider"
    );
  }
  return ctx;
}
function AppMainLineFieldPattern() {
  const { groovedPanelEnabled } = useGroovedPanelPreference();
  if (!groovedPanelEnabled) {
    return null;
  }
  return /* @__PURE__ */ jsx(LineFieldPatternLayers, { pattern: appLineFieldPattern });
}

export { AppMainLineFieldPattern };
//# sourceMappingURL=app-main-line-field-pattern.js.map
//# sourceMappingURL=app-main-line-field-pattern.js.map