64 | {label}
65 |
66 |
70 |
71 | {space}
72 |
73 | inputRef.current?.focus()}
17 | className="inline-flex cursor-text items-center gap-2 rounded-full border-b border-foreground/10 bg-foreground/10 px-3.5 py-1.5 focus-within:ring-1"
18 | onFocus={() => setIsActive(true)}
19 | onBlur={() => setIsActive(false)}
20 | >
21 | {React.useMemo(
22 | () => (
23 |
42 | );
43 | }
44 |
45 | export default TaskbarSearch;
46 |
--------------------------------------------------------------------------------
/src/components/calculator.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Button } from "@/components/fluentui/button";
3 | import React, { useState, useEffect } from "react";
4 |
5 | const Calculator: React.FC = () => {
6 | const [displayValue, setDisplayValue] = useState
130 |
276 | );
277 | };
278 |
279 | export default Calculator;
280 |
--------------------------------------------------------------------------------
/src/components/component.tsx:
--------------------------------------------------------------------------------
1 | // Private File: Original content is not included.
2 | // This is an auto-generated placeholder.
3 | // File exists but is not accessible for public use.
4 |
5 | // This file is used as placeholder
6 | export default function Comp({ children }: any) {
7 | return <>{children};
8 | }
9 | export { Comp as Component }
--------------------------------------------------------------------------------
/src/components/desktop/desktop-item.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { clsx, cn } from "@/lib/utils";
3 | // import Image from "next/image";
4 | import React from "react";
5 | import { type DraggableWindowProps } from "../drag-window";
6 | import dynamic from "next/dynamic";
7 | import { useWinState } from "@/hooks/useWinState";
8 | import { DesktopItemContextMenuEmittor } from "@/lib/emittors";
9 | import { DesktopIcons } from "@/lib/images";
10 | import { Component } from "../component";
11 | import { composeEventHandlers } from "@radix-ui/primitive";
12 | // import { AnimatePresence } from "framer-motion";
13 | const DraggableWindowBase = dynamic(() =>
14 | import("../drag-window").then((all) => all.DraggableWindowBase),
15 | );
16 |
17 | type DesktopItemProps
131 |
132 | {operator}
133 |
134 | {displayValue}
135 |
136 |
137 |
144 |
151 |
158 |
165 |
166 |
173 |
180 |
187 |
194 |
195 |
202 |
209 |
216 |
223 |
224 |
231 |
238 |
245 |
252 |
253 |
260 |
267 |
274 |
275 |
89 | 
90 | {isShortcut && (
91 | 
98 | )}
99 |
100 | {name}
101 |
61 | {/* Folder Name */}
62 |
65 | node.onClick?.({ ...node, name, path: currentPath })
66 | }
67 | className="explorer-nav-panel-item"
68 | >
69 | (e.stopPropagation(), toggleFolder())}
76 | />
77 |
78 | 
83 | {`${name}`}
84 |
85 |
86 | {/* Render Content Dynamically */}
87 | {isOpen && hasContent && (
88 |
119 | );
120 | };
121 |
122 | export type FolderTreeProps = {
123 | data: Record
89 | {/* Render Folders */}
90 | {Boolean(folderNames.length) &&
91 | folderNames.map((folderName, idx) => {
92 | const treeNode = node.folders![folderName]!;
93 | return (
94 |
113 | 📄 {file}
114 |
115 | ))}
116 |
117 | )}
118 |
42 |
43 | {children}
44 |
45 |
46 | *:first-child]:pl-3 [&>*:only-child]:!px-3",
33 | fluent && "focus-indicator",
34 | className,
35 | )}
36 | />
37 | );
38 | }
39 | export const InputButtonCNs =
40 | "inline-flex py-[3px] h-fit items-center justify-center rounded-sm bg-transparent px-2 text-foreground/60 hover:bg-foreground/10 active:opacity-80";
41 |
42 | export const InputButtonVisibility = {
43 | onEmpty: "only-empty",
44 | onText: "only-text",
45 | onFocus: "only-focus",
46 | };
47 |
48 | export function InputButton({
49 | className,
50 | icon,
51 | tabIndex,
52 | ...p
53 | }: Omit, "children"> & {
54 | icon: React.ReactNode;
55 | }) {
56 | return (
57 |
66 | );
67 | }
68 |
69 | export function getCurrentInput(
70 | e: React.MouseEvent | React.KeyboardEvent,
71 | ) {
72 | return e.currentTarget
73 | .closest("[data-input-wrapper]")
74 | ?.querySelector("input") as HTMLInputElement | undefined;
75 | }
76 |
77 | const Input = React.forwardRef(
78 | (
79 | { className, children, pClassName, pStyle, type, toolBtns, ...props },
80 | ref,
81 | ) => {
82 | return (
83 |
88 |
94 | {toolBtns}
95 | {children}
96 |
97 | );
98 | },
99 | );
100 | Input.displayName = "Input";
101 |
102 | const FluentInput = React.forwardRef(
103 | ({ children, ...p }, ref) => {
104 | const innerRef = React.useRef(null);
105 |
106 | React.useImperativeHandle(ref, () => innerRef.current!);
107 |
108 | const clear = () => {
109 | if (innerRef.current) {
110 | innerRef.current.value = "";
111 | innerRef.current.focus();
112 | }
113 | };
114 |
115 | return (
116 |
117 | {true && ( // children
118 | (
132 | ({ className, pClassName, ...props }, ref) => {
133 | return (
134 |
135 |
140 |
141 | );
142 | },
143 | );
144 | TextArea.displayName = "TextArea";
145 |
146 | export { Input, TextArea, FluentInput };
147 |
--------------------------------------------------------------------------------
/src/components/fluentui/slider.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import React, { useEffect, useRef, useState } from "react";
3 | // import type { IntRange } from "type-fest";
4 | import { composeEventHandlers } from "@radix-ui/primitive";
5 |
6 | type SliderProps = {
7 | min?: number;
8 | max?: number;
9 | initialValue?: number;
10 | onValueChange?: (value: number) => void;
11 | onProgressChange?: (percentage: number) => void;
12 | value?: number;
13 | } & Omit, "min" | "max">;
14 |
15 | export default function Slider({
16 | initialValue = 10,
17 | min = 0,
18 | max = 100,
19 | className,
20 | onChange,
21 | onValueChange,
22 | onProgressChange,
23 | value: userValue,
24 | }: SliderProps) {
25 | const [value, setValue] = useState(initialValue);
26 | const relValue = userValue ?? value;
27 | const percentage = useRef((relValue - min) / (max - min));
28 |
29 | useEffect(() => {
30 | onValueChange?.(relValue);
31 | percentage.current = (relValue - min) / (max - min);
32 | onProgressChange?.(percentage.current);
33 | }, [relValue]);
34 |
35 | return (
36 | console.log(e.currentTarget.value)}
42 | style={{ "--slider-progress": `${percentage.current}%` }}
43 | onChange={composeEventHandlers(
44 | onChange,
45 | (e) => {
46 | if (userValue != undefined) return;
47 | const newValue = Number(e.target.value);
48 | setValue(newValue);
49 | },
50 | { checkForDefaultPrevented: true },
51 | )}
52 | className={cn("fluent-slider outline-none", className)}
53 | />
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/iframe.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import React, { useState } from "react";
3 | import Loader, { Bar } from "./loader";
4 |
5 | function Iframe({
6 | className,
7 | icon,
8 | ...p
9 | }: React.ComponentProps<"iframe"> & { icon?: string }) {
10 | const [isLoading, setIsLoading] = useState(true);
11 | return (
12 | <>
13 |
119 |
123 | )}
124 |
125 | );
126 | },
127 | );
128 |
129 | FluentInput.displayName = "FluentInput";
130 |
131 | const TextArea = React.forwardRef