@sriinnu/runic 1.0.0

package/Sources/Runic/Views/Preferences/LiquidComponents.swift

@@ -0,0 +1,305 @@
+import AppKit
+import SwiftUI
+
+// MARK: - Ambient liquid mesh
+
+@MainActor
+struct LiquidMeshBackground: View {
+    @State private var phase: Double = 0
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+
+    private static let palette: [Color] = [
+        Color(red: 0.30, green: 0.52, blue: 0.96),
+        Color(red: 0.62, green: 0.34, blue: 0.92),
+        Color(red: 0.24, green: 0.78, blue: 0.76),
+        Color(red: 0.44, green: 0.28, blue: 0.88),
+        Color(red: 0.18, green: 0.60, blue: 0.94),
+    ]
+
+    var body: some View {
+        TimelineView(.animation(minimumInterval: 1 / 30.0, paused: self.reduceMotion)) { timeline in
+            Canvas { context, size in
+                let t = self.reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate
+                let cx = size.width / 2
+                let cy = size.height / 2
+
+                for (i, color) in Self.palette.enumerated() {
+                    let fi = Double(i)
+                    let angle = t * (0.12 + fi * 0.03) + fi * 1.25
+                    let r = min(cx, cy) * (0.28 + 0.18 * sin(t * 0.15 + fi * 0.9))
+                    let x = cx + cos(angle) * r * 0.6
+                    let y = cy + sin(angle) * r * 0.5
+                    let blob = min(size.width, size.height) * (0.52 + 0.12 * sin(t * 0.2 + fi))
+
+                    let rect = CGRect(x: x - blob / 2, y: y - blob / 2, width: blob, height: blob)
+                    context.fill(
+                        Ellipse().path(in: rect),
+                        with: .radialGradient(
+                            Gradient(colors: [color.opacity(0.35), color.opacity(0.08), color.opacity(0)]),
+                            center: CGPoint(x: x, y: y),
+                            startRadius: 0,
+                            endRadius: blob / 2))
+                }
+            }
+            .blur(radius: 40)
+        }
+    }
+}
+
+// MARK: - Cursor spotlight overlay
+
+@MainActor
+private struct CursorSpotlight: View {
+    let cursorPoint: UnitPoint
+    let isActive: Bool
+
+    var body: some View {
+        GeometryReader { geo in
+            RadialGradient(
+                colors: [
+                    Color.primary.opacity(self.isActive ? 0.10 : 0),
+                    Color.primary.opacity(self.isActive ? 0.04 : 0),
+                    Color.clear,
+                ],
+                center: UnitPoint(
+                    x: geo.size.width > 0 ? max(0, min(1, self.cursorPoint.x)) : 0.5,
+                    y: geo.size.height > 0 ? max(0, min(1, self.cursorPoint.y)) : 0.5),
+                startRadius: 0,
+                endRadius: 160)
+                .animation(.easeOut(duration: 0.15), value: self.isActive)
+        }
+        .allowsHitTesting(false)
+        .accessibilityHidden(true)
+    }
+}
+
+// MARK: - Shimmer sweep overlay
+
+@MainActor
+private struct ShimmerSweep: View {
+    @State private var offset: CGFloat = -0.4
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+    let stableDelay: Double
+
+    var body: some View {
+        GeometryReader { geo in
+            if !self.reduceMotion {
+                LinearGradient(
+                    colors: [.clear, Color.primary.opacity(0.04), Color.primary.opacity(0.07), Color.primary.opacity(0.04), .clear],
+                    startPoint: .leading,
+                    endPoint: .trailing)
+                    .frame(width: geo.size.width * 0.35)
+                    .offset(x: geo.size.width * self.offset)
+            }
+        }
+        .clipped()
+        .allowsHitTesting(false)
+        .accessibilityHidden(true)
+        .onAppear {
+            guard !self.reduceMotion else { return }
+            withAnimation(
+                .easeInOut(duration: 2.8)
+                .repeatForever(autoreverses: false)
+                .delay(self.stableDelay))
+            {
+                self.offset = 1.4
+            }
+        }
+    }
+}
+
+// MARK: - Rotating gradient border (Magic Card)
+
+@MainActor
+private struct RotatingGradientBorder: View {
+    let cornerRadius: CGFloat
+    let isActive: Bool
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+
+    private static let borderColors: [Color] = [
+        Color(red: 0.36, green: 0.86, blue: 1.0),
+        Color(red: 0.24, green: 0.40, blue: 0.89),
+        Color(red: 0.31, green: 0.00, blue: 0.76),
+        Color(red: 0.24, green: 0.40, blue: 0.89),
+        Color(red: 0.36, green: 0.86, blue: 1.0),
+    ]
+
+    var body: some View {
+        if self.isActive && !self.reduceMotion {
+            TimelineView(.animation(minimumInterval: 1 / 60.0, paused: !self.isActive)) { timeline in
+                let rotation = timeline.date.timeIntervalSinceReferenceDate * 72
+                RoundedRectangle(cornerRadius: self.cornerRadius, style: .continuous)
+                    .strokeBorder(
+                        AngularGradient(
+                            gradient: Gradient(colors: Self.borderColors),
+                            center: .center,
+                            angle: .degrees(rotation)),
+                        lineWidth: 1.5)
+                    .opacity(0.7)
+            }
+            .transition(.opacity.animation(.easeInOut(duration: 0.35)))
+        }
+    }
+}
+
+// MARK: - Shared glass modifier (single source of truth)
+
+@MainActor
+private struct LiquidGlassCore: ViewModifier {
+    let shimmerIndex: Int
+    @State private var hovering = false
+    @State private var cursorUnit: UnitPoint = .center
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+
+    func body(content: Content) -> some View {
+        content
+            .padding(RunicSpacing.md)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .background(
+                RoundedRectangle(cornerRadius: RunicCornerRadius.lg, style: .continuous)
+                    .fill(.ultraThinMaterial)
+                    .shadow(
+                        color: self.hovering ? Color.accentColor.opacity(0.12) : .black.opacity(0.04),
+                        radius: self.hovering ? 12 : 4,
+                        y: self.hovering ? 4 : 2))
+            .overlay(
+                RoundedRectangle(cornerRadius: RunicCornerRadius.lg, style: .continuous)
+                    .strokeBorder(
+                        LinearGradient(
+                            colors: [
+                                Color.primary.opacity(self.hovering ? 0.18 : 0.10),
+                                Color.primary.opacity(self.hovering ? 0.06 : 0.03),
+                            ],
+                            startPoint: .topLeading,
+                            endPoint: .bottomTrailing),
+                        lineWidth: 0.5))
+            .overlay { RotatingGradientBorder(cornerRadius: RunicCornerRadius.lg, isActive: self.hovering) }
+            .overlay {
+                GeometryReader { geo in
+                    CursorSpotlight(
+                        cursorPoint: UnitPoint(
+                            x: geo.size.width > 0 ? self.cursorUnit.x / geo.size.width : 0.5,
+                            y: geo.size.height > 0 ? self.cursorUnit.y / geo.size.height : 0.5),
+                        isActive: self.hovering)
+                }
+            }
+            .clipShape(RoundedRectangle(cornerRadius: RunicCornerRadius.lg, style: .continuous))
+            .overlay {
+                ShimmerSweep(stableDelay: Double(self.shimmerIndex) * 0.8 + 1.0)
+                    .clipShape(RoundedRectangle(cornerRadius: RunicCornerRadius.lg, style: .continuous))
+            }
+            .scaleEffect(self.hovering && !self.reduceMotion ? 1.01 : 1.0)
+            .animation(.spring(response: 0.35, dampingFraction: 0.72), value: self.hovering)
+            .background(
+                GeometryReader { geo in
+                    Color.clear
+                        .onContinuousHover { phase in
+                            switch phase {
+                            case .active(let pt):
+                                self.hovering = true
+                                self.cursorUnit = UnitPoint(x: pt.x, y: pt.y)
+                            case .ended:
+                                self.hovering = false
+                            }
+                        }
+                        .frame(width: geo.size.width, height: geo.size.height)
+                }
+            )
+    }
+}
+
+// MARK: - Public components using the shared core
+
+@MainActor
+struct LiquidSection<Content: View>: View {
+    let title: String?
+    let content: Content
+
+    init(title: String? = nil, @ViewBuilder content: () -> Content) {
+        self.title = title
+        self.content = content()
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: RunicSpacing.sm) {
+            if let title {
+                Text(title)
+                    .font(.system(.caption, design: .rounded).weight(.semibold))
+                    .foregroundStyle(.secondary)
+                    .textCase(.uppercase)
+                    .padding(.leading, RunicSpacing.xxs)
+            }
+            self.content
+        }
+        .modifier(LiquidGlassCore(shimmerIndex: self.title.hashValue & 0xF))
+    }
+}
+
+@MainActor
+struct GlassCard<Content: View>: View {
+    let content: Content
+
+    init(@ViewBuilder content: () -> Content) {
+        self.content = content()
+    }
+
+    var body: some View {
+        self.content
+            .modifier(LiquidGlassCore(shimmerIndex: 0))
+    }
+}
+
+// MARK: - View modifiers
+
+extension View {
+    func liquidGlass() -> some View {
+        modifier(LiquidGlassCore(shimmerIndex: 3))
+    }
+
+    func liquidEntrance(appeared: Bool, index: Int) -> some View {
+        self
+            .opacity(appeared ? 1 : 0)
+            .offset(y: appeared ? 0 : 14)
+            .scaleEffect(appeared ? 1 : 0.97, anchor: .top)
+            .animation(
+                .spring(response: 0.5, dampingFraction: 0.78)
+                .delay(Double(index) * 0.07),
+                value: appeared)
+    }
+}
+
+// MARK: - Liquid preferences pane wrapper
+
+@MainActor
+struct LiquidPreferencesPane<Content: View>: View {
+    let meshOpacity: Double
+    let showsIndicators: Bool
+    private let content: () -> Content
+
+    init(
+        meshOpacity: Double = 0.3,
+        showsIndicators: Bool = true,
+        @ViewBuilder content: @escaping () -> Content)
+    {
+        self.meshOpacity = meshOpacity
+        self.showsIndicators = showsIndicators
+        self.content = content
+    }
+
+    var body: some View {
+        ZStack {
+            LiquidMeshBackground()
+                .ignoresSafeArea()
+                .opacity(self.meshOpacity)
+
+            ScrollView(.vertical, showsIndicators: self.showsIndicators) {
+                VStack(alignment: .leading, spacing: RunicSpacing.md) {
+                    self.content()
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(.horizontal, PreferencesLayoutMetrics.paneHorizontal)
+                .padding(.vertical, PreferencesLayoutMetrics.paneVertical)
+            }
+        }
+    }
+}

package/Sources/Runic/Views/Preferences/PreferencesAboutPane.swift

@@ -0,0 +1,271 @@
+import AppKit
+import SwiftUI
+
+// MARK: - Floating orb accent (About-specific)
+
+@MainActor
+private struct FloatingOrb: View {
+    let color: Color
+    let size: CGFloat
+    let speed: Double
+    let offset: Double
+    @State private var phase: Double = 0
+    private let timer = Timer.publish(every: 1 / 24.0, on: .main, in: .common).autoconnect()
+
+    var body: some View {
+        Circle()
+            .fill(
+                RadialGradient(
+                    colors: [self.color.opacity(0.5), self.color.opacity(0)],
+                    center: .center,
+                    startRadius: 0,
+                    endRadius: self.size / 2))
+            .frame(width: self.size, height: self.size)
+            .offset(
+                x: sin(self.phase * self.speed + self.offset) * 20,
+                y: cos(self.phase * self.speed * 0.7 + self.offset) * 14)
+            .onReceive(self.timer) { _ in self.phase += 1 / 24.0 }
+    }
+}
+
+// MARK: - Liquid link button (About-specific)
+
+@MainActor
+private struct LiquidLinkButton: View {
+    let icon: String
+    let title: String
+    let url: String
+    @State private var hovering = false
+
+    var body: some View {
+        Button {
+            if let url = URL(string: self.url) { NSWorkspace.shared.open(url) }
+        } label: {
+            HStack(spacing: RunicSpacing.xs) {
+                Image(systemName: self.icon)
+                    .font(.system(size: 12, weight: .medium))
+                    .frame(width: 18)
+                Text(self.title)
+                    .font(.system(size: 12.5, weight: .medium))
+            }
+            .foregroundStyle(self.hovering ? .primary : .secondary)
+            .padding(.horizontal, RunicSpacing.sm)
+            .padding(.vertical, RunicSpacing.compact)
+            .background(
+                Capsule(style: .continuous)
+                    .fill(.ultraThinMaterial)
+                    .opacity(self.hovering ? 1 : 0))
+            .overlay(
+                Capsule(style: .continuous)
+                    .strokeBorder(
+                        Color.white.opacity(self.hovering ? 0.18 : 0),
+                        lineWidth: 0.5))
+        }
+        .buttonStyle(.plain)
+        .contentShape(Capsule())
+        .onHover { over in
+            withAnimation(.easeOut(duration: 0.18)) { self.hovering = over }
+        }
+        .scaleEffect(self.hovering ? 1.04 : 1.0)
+        .animation(.spring(response: 0.28, dampingFraction: 0.75), value: self.hovering)
+    }
+}
+
+// MARK: - About pane
+
+@MainActor
+struct AboutPane: View {
+    let updater: UpdaterProviding
+    @State private var iconHover = false
+    @State private var appeared = false
+    @AppStorage("autoUpdateEnabled") private var autoUpdateEnabled: Bool = true
+    @State private var didLoadUpdaterState = false
+
+    private var versionString: String {
+        let version = Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String ?? "–"
+        let build = Bundle.main.object(forInfoDictionaryKey: "CFBundleVersion") as? String
+        return build.map { "\(version) (\($0))" } ?? version
+    }
+
+    private var buildTimestamp: String? {
+        guard let raw = Bundle.main.object(forInfoDictionaryKey: "CodexBuildTimestamp") as? String else { return nil }
+        let parser = ISO8601DateFormatter()
+        parser.formatOptions = [.withInternetDateTime]
+        guard let date = parser.date(from: raw) else { return raw }
+
+        let formatter = DateFormatter()
+        formatter.dateStyle = .medium
+        formatter.timeStyle = .short
+        formatter.locale = .current
+        return formatter.string(from: date)
+    }
+
+    var body: some View {
+        ZStack {
+            LiquidMeshBackground()
+                .ignoresSafeArea()
+                .opacity(0.6)
+
+            ScrollView(.vertical, showsIndicators: false) {
+                VStack(spacing: RunicSpacing.lg) {
+                    self.heroSection
+                    self.linksSection
+                    self.updaterSection
+                    self.footerSection
+                }
+                .padding(.horizontal, PreferencesLayoutMetrics.paneHorizontal)
+                .padding(.vertical, PreferencesLayoutMetrics.paneVertical)
+            }
+        }
+        .onAppear {
+            guard !self.didLoadUpdaterState else { return }
+            self.updater.automaticallyChecksForUpdates = self.autoUpdateEnabled
+            self.updater.automaticallyDownloadsUpdates = self.autoUpdateEnabled
+            self.didLoadUpdaterState = true
+            withAnimation(.easeOut(duration: 0.8)) { self.appeared = true }
+        }
+        .onChange(of: self.autoUpdateEnabled) { _, newValue in
+            self.updater.automaticallyChecksForUpdates = newValue
+            self.updater.automaticallyDownloadsUpdates = newValue
+        }
+    }
+
+    // MARK: - Hero
+
+    private var heroSection: some View {
+        VStack(spacing: RunicSpacing.md) {
+            ZStack {
+                FloatingOrb(color: .blue, size: 120, speed: 0.4, offset: 0)
+                    .offset(x: -30, y: -10)
+                FloatingOrb(color: .purple, size: 90, speed: 0.5, offset: 2.1)
+                    .offset(x: 25, y: 15)
+
+                if let image = NSApplication.shared.applicationIconImage {
+                    Button(action: self.openProjectHome) {
+                        Image(nsImage: image)
+                            .resizable()
+                            .frame(width: 96, height: 96)
+                            .clipShape(RoundedRectangle(cornerRadius: RunicCornerRadius.xl, style: .continuous))
+                            .shadow(
+                                color: .black.opacity(0.18),
+                                radius: self.iconHover ? 16 : 8,
+                                y: self.iconHover ? 6 : 3)
+                            .scaleEffect(self.iconHover ? 1.06 : 1.0)
+                    }
+                    .buttonStyle(.plain)
+                    .accessibilityLabel("Open Runic project on GitHub")
+                    .onHover { hovering in
+                        withAnimation(.spring(response: 0.32, dampingFraction: 0.72)) {
+                            self.iconHover = hovering
+                        }
+                    }
+                }
+            }
+            .frame(height: 120)
+
+            VStack(spacing: RunicSpacing.xxs) {
+                Text("Runic")
+                    .font(.system(size: 26, weight: .bold, design: .rounded))
+
+                Text("Version \(self.versionString)")
+                    .font(.system(size: 12, weight: .medium, design: .rounded))
+                    .foregroundStyle(.secondary)
+
+                if let buildTimestamp {
+                    Text("Built \(buildTimestamp)")
+                        .font(.system(size: 11, design: .rounded))
+                        .foregroundStyle(.tertiary)
+                }
+            }
+
+            VStack(spacing: RunicSpacing.xs) {
+                Text("पूर्णमदः पूर्णमिदं पूर्णात् पूर्णमुदच्यते")
+                    .font(.system(size: 12, weight: .regular, design: .serif))
+                    .foregroundStyle(.secondary)
+                    .multilineTextAlignment(.center)
+                Text("From fullness comes fullness.\nWhen fullness is taken from fullness,\nfullness alone remains.")
+                    .font(.system(size: 11.5, weight: .regular, design: .rounded))
+                    .foregroundStyle(.tertiary)
+                    .multilineTextAlignment(.center)
+                    .lineSpacing(2)
+                Text("— Isha Upanishad")
+                    .font(.system(size: 10, weight: .medium, design: .rounded))
+                    .foregroundStyle(.quaternary)
+            }
+        }
+        .frame(maxWidth: .infinity)
+        .opacity(self.appeared ? 1 : 0)
+        .offset(y: self.appeared ? 0 : 12)
+    }
+
+    // MARK: - Links
+
+    private var linksSection: some View {
+        GlassCard {
+            HStack(spacing: RunicSpacing.xs) {
+                LiquidLinkButton(
+                    icon: "chevron.left.slash.chevron.right",
+                    title: "GitHub",
+                    url: "https://github.com/sriinnu/Runic")
+                LiquidLinkButton(
+                    icon: "globe",
+                    title: "Web",
+                    url: "https://www.srinivas.dev")
+                LiquidLinkButton(
+                    icon: "bird",
+                    title: "Twitter",
+                    url: "https://x.com/sriinnu")
+                LiquidLinkButton(
+                    icon: "envelope",
+                    title: "Email",
+                    url: "mailto:sriinnu@users.noreply.github.com")
+            }
+            .frame(maxWidth: .infinity)
+        }
+        .opacity(self.appeared ? 1 : 0)
+        .offset(y: self.appeared ? 0 : 16)
+        .animation(.easeOut(duration: 0.7).delay(0.15), value: self.appeared)
+    }
+
+    // MARK: - Updater
+
+    private var updaterSection: some View {
+        GlassCard {
+            if self.updater.isAvailable {
+                VStack(spacing: RunicSpacing.sm) {
+                    Toggle("Check for updates automatically", isOn: self.$autoUpdateEnabled)
+                        .toggleStyle(.checkbox)
+                        .font(.system(size: 12.5))
+                        .frame(maxWidth: .infinity, alignment: .center)
+                    Button("Check for Updates…") { self.updater.checkForUpdates(nil) }
+                        .buttonStyle(.bordered)
+                        .controlSize(.small)
+                }
+            } else {
+                Text(self.updater.unavailableReason ?? "Updates unavailable in this build.")
+                    .font(.system(size: 12, design: .rounded))
+                    .foregroundStyle(.secondary)
+                    .frame(maxWidth: .infinity)
+            }
+        }
+        .opacity(self.appeared ? 1 : 0)
+        .offset(y: self.appeared ? 0 : 20)
+        .animation(.easeOut(duration: 0.7).delay(0.25), value: self.appeared)
+    }
+
+    // MARK: - Footer
+
+    private var footerSection: some View {
+        Text("© 2025–2026 Srinivas Pendela. MIT License.")
+            .font(.system(size: 11, design: .rounded))
+            .foregroundStyle(.tertiary)
+            .frame(maxWidth: .infinity)
+            .opacity(self.appeared ? 1 : 0)
+            .animation(.easeOut(duration: 0.6).delay(0.35), value: self.appeared)
+    }
+
+    private func openProjectHome() {
+        guard let url = URL(string: "https://github.com/sriinnu/Runic") else { return }
+        NSWorkspace.shared.open(url)
+    }
+}