@gridland/demo 0.2.51 → 0.2.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/run.js +555 -259
- package/package.json +3 -3
package/dist/run.js
CHANGED
|
@@ -1765,6 +1765,7 @@ function useBreakpoints() {
|
|
|
1765
1765
|
// demos/gradient.tsx
|
|
1766
1766
|
import figlet from "figlet";
|
|
1767
1767
|
import ansiShadow from "figlet/importable-fonts/ANSI Shadow.js";
|
|
1768
|
+
import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1768
1769
|
figlet.parseFont("ANSI Shadow", ansiShadow);
|
|
1769
1770
|
var art = figlet.textSync("gridland", { font: "ANSI Shadow" });
|
|
1770
1771
|
var lines = art.split("\n").filter((l) => l.trimEnd().length > 0);
|
|
@@ -1777,13 +1778,16 @@ function GradientApp() {
|
|
|
1777
1778
|
if (event.name === "left") setIndex((i) => i > 0 ? i - 1 : gradientNames.length - 1);
|
|
1778
1779
|
if (event.name === "right") setIndex((i) => i < gradientNames.length - 1 ? i + 1 : 0);
|
|
1779
1780
|
});
|
|
1780
|
-
return /* @__PURE__ */
|
|
1781
|
-
|
|
1782
|
-
{
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1781
|
+
return /* @__PURE__ */ jsxs15("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
1782
|
+
/* @__PURE__ */ jsx21("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: /* @__PURE__ */ jsx21(Gradient, { name: name2, children: lines.join("\n") }) }),
|
|
1783
|
+
/* @__PURE__ */ jsx21("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx21(
|
|
1784
|
+
StatusBar,
|
|
1785
|
+
{
|
|
1786
|
+
items: [{ key: "\u2190\u2192", label: "gradient" }],
|
|
1787
|
+
extra: /* @__PURE__ */ jsx21("span", { style: textStyle({ fg: theme.accent, bold: true }), children: name2.padEnd(11) })
|
|
1788
|
+
}
|
|
1789
|
+
) })
|
|
1790
|
+
] });
|
|
1787
1791
|
}
|
|
1788
1792
|
|
|
1789
1793
|
// demos/ascii.tsx
|
|
@@ -1798,6 +1802,7 @@ import speed from "figlet/importable-fonts/Speed.js";
|
|
|
1798
1802
|
import standard from "figlet/importable-fonts/Standard.js";
|
|
1799
1803
|
import block from "figlet/importable-fonts/Block.js";
|
|
1800
1804
|
import colossal from "figlet/importable-fonts/Colossal.js";
|
|
1805
|
+
import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1801
1806
|
var fonts = [
|
|
1802
1807
|
{ name: "ANSI Shadow", data: ansiShadow2 },
|
|
1803
1808
|
{ name: "Standard", data: standard },
|
|
@@ -1824,34 +1829,43 @@ function AsciiApp() {
|
|
|
1824
1829
|
if (event.name === "left") setFontIndex((i) => i > 0 ? i - 1 : fonts.length - 1);
|
|
1825
1830
|
if (event.name === "right") setFontIndex((i) => i < fonts.length - 1 ? i + 1 : 0);
|
|
1826
1831
|
});
|
|
1827
|
-
return /* @__PURE__ */
|
|
1828
|
-
|
|
1829
|
-
{
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1832
|
+
return /* @__PURE__ */ jsxs16("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
1833
|
+
/* @__PURE__ */ jsx22("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: lines2.map((line, i) => /* @__PURE__ */ jsx22("text", { fg: theme.accent, bold: true, children: line }, i)) }),
|
|
1834
|
+
/* @__PURE__ */ jsx22("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx22(
|
|
1835
|
+
StatusBar,
|
|
1836
|
+
{
|
|
1837
|
+
items: [{ key: "\u2190\u2192", label: "change font" }],
|
|
1838
|
+
extra: /* @__PURE__ */ jsx22("span", { style: textStyle({ fg: theme.accent, bold: true }), children: font.name.padEnd(11) })
|
|
1839
|
+
}
|
|
1840
|
+
) })
|
|
1841
|
+
] });
|
|
1834
1842
|
}
|
|
1835
1843
|
|
|
1836
1844
|
// demos/table.tsx
|
|
1845
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
1837
1846
|
function TableApp() {
|
|
1838
1847
|
const data2 = [
|
|
1839
1848
|
{ name: "Alice", role: "Engineer", status: "Active" },
|
|
1840
1849
|
{ name: "Bob", role: "Designer", status: "Active" },
|
|
1841
1850
|
{ name: "Charlie", role: "PM", status: "Away" }
|
|
1842
1851
|
];
|
|
1843
|
-
return /* @__PURE__ */
|
|
1852
|
+
return /* @__PURE__ */ jsx23("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx23(Table, { data: data2, headerColor: "cyan", borderColor: "#5e81ac" }) });
|
|
1844
1853
|
}
|
|
1845
1854
|
|
|
1846
1855
|
// demos/spinner.tsx
|
|
1847
1856
|
import { useKeyboard as useKeyboard3 } from "@gridland/utils";
|
|
1857
|
+
import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1848
1858
|
function SpinnerApp() {
|
|
1849
|
-
return /* @__PURE__ */
|
|
1859
|
+
return /* @__PURE__ */ jsxs17("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
1860
|
+
/* @__PURE__ */ jsx24("box", { flexGrow: 1, children: /* @__PURE__ */ jsx24(SpinnerPicker, { useKeyboard: useKeyboard3 }) }),
|
|
1861
|
+
/* @__PURE__ */ jsx24("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx24(StatusBar, { items: [{ key: "\u2190\u2192", label: "change variant" }] }) })
|
|
1862
|
+
] });
|
|
1850
1863
|
}
|
|
1851
1864
|
|
|
1852
1865
|
// demos/select-input.tsx
|
|
1853
1866
|
import { useState as useState10 } from "react";
|
|
1854
1867
|
import { useKeyboard as useKeyboard4 } from "@gridland/utils";
|
|
1868
|
+
import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1855
1869
|
var items = [
|
|
1856
1870
|
{ label: "TypeScript", value: "ts" },
|
|
1857
1871
|
{ label: "JavaScript", value: "js" },
|
|
@@ -1867,24 +1881,28 @@ function SelectInputApp() {
|
|
|
1867
1881
|
setResetKey((k) => k + 1);
|
|
1868
1882
|
}
|
|
1869
1883
|
});
|
|
1870
|
-
return /* @__PURE__ */
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
{ key: "
|
|
1882
|
-
|
|
1884
|
+
return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
|
|
1885
|
+
/* @__PURE__ */ jsx25("box", { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx25(
|
|
1886
|
+
SelectInput,
|
|
1887
|
+
{
|
|
1888
|
+
items,
|
|
1889
|
+
title: "Choose a language",
|
|
1890
|
+
useKeyboard: useKeyboard4,
|
|
1891
|
+
onSubmit: () => setSubmitted(true)
|
|
1892
|
+
},
|
|
1893
|
+
resetKey
|
|
1894
|
+
) }),
|
|
1895
|
+
/* @__PURE__ */ jsx25(StatusBar, { items: submitted ? [{ key: "r", label: "reset demo" }] : [
|
|
1896
|
+
{ key: "\u2191\u2193", label: "select" },
|
|
1897
|
+
{ key: "enter", label: "submit" }
|
|
1898
|
+
] })
|
|
1899
|
+
] });
|
|
1883
1900
|
}
|
|
1884
1901
|
|
|
1885
1902
|
// demos/multi-select.tsx
|
|
1886
1903
|
import { useState as useState11 } from "react";
|
|
1887
1904
|
import { useKeyboard as useKeyboard5 } from "@gridland/utils";
|
|
1905
|
+
import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1888
1906
|
var items2 = [
|
|
1889
1907
|
{ label: "TypeScript", value: "ts" },
|
|
1890
1908
|
{ label: "JavaScript", value: "js" },
|
|
@@ -1900,26 +1918,30 @@ function MultiSelectApp() {
|
|
|
1900
1918
|
setResetKey((k) => k + 1);
|
|
1901
1919
|
}
|
|
1902
1920
|
});
|
|
1903
|
-
return /* @__PURE__ */
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
{ key: "
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1921
|
+
return /* @__PURE__ */ jsxs19("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
|
|
1922
|
+
/* @__PURE__ */ jsx26("box", { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx26(
|
|
1923
|
+
MultiSelect,
|
|
1924
|
+
{
|
|
1925
|
+
items: items2,
|
|
1926
|
+
title: "Select languages",
|
|
1927
|
+
useKeyboard: useKeyboard5,
|
|
1928
|
+
onSubmit: () => setSubmitted(true)
|
|
1929
|
+
},
|
|
1930
|
+
resetKey
|
|
1931
|
+
) }),
|
|
1932
|
+
/* @__PURE__ */ jsx26(StatusBar, { items: submitted ? [{ key: "r", label: "reset demo" }] : [
|
|
1933
|
+
{ key: "\u2191\u2193", label: "move" },
|
|
1934
|
+
{ key: "enter", label: "select" },
|
|
1935
|
+
{ key: "a", label: "all" },
|
|
1936
|
+
{ key: "x", label: "clear" }
|
|
1937
|
+
] })
|
|
1938
|
+
] });
|
|
1918
1939
|
}
|
|
1919
1940
|
|
|
1920
1941
|
// demos/prompt-input.tsx
|
|
1921
1942
|
import { useState as useState12 } from "react";
|
|
1922
1943
|
import { useKeyboard as useKeyboard6 } from "@gridland/utils";
|
|
1944
|
+
import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1923
1945
|
var commands = [{ cmd: "/model", desc: "Switch model" }];
|
|
1924
1946
|
var files = ["src/index.ts", "src/routes.ts", "src/auth.ts", "package.json"];
|
|
1925
1947
|
var models = [
|
|
@@ -1942,7 +1964,7 @@ function PromptInputApp() {
|
|
|
1942
1964
|
setLastMessage(msg.text);
|
|
1943
1965
|
};
|
|
1944
1966
|
if (showModelPicker) {
|
|
1945
|
-
return /* @__PURE__ */
|
|
1967
|
+
return /* @__PURE__ */ jsx27("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: /* @__PURE__ */ jsx27(Modal, { title: "Select Model", useKeyboard: useKeyboard6, onClose: () => setShowModelPicker(false), children: /* @__PURE__ */ jsx27("box", { paddingX: 1, children: /* @__PURE__ */ jsx27(
|
|
1946
1968
|
SelectInput,
|
|
1947
1969
|
{
|
|
1948
1970
|
items: models,
|
|
@@ -1953,29 +1975,38 @@ function PromptInputApp() {
|
|
|
1953
1975
|
setShowModelPicker(false);
|
|
1954
1976
|
}
|
|
1955
1977
|
}
|
|
1956
|
-
))));
|
|
1978
|
+
) }) }) });
|
|
1957
1979
|
}
|
|
1958
|
-
return /* @__PURE__ */
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1980
|
+
return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
|
|
1981
|
+
/* @__PURE__ */ jsx27("box", { flexDirection: "column", flexGrow: 1, children: lastMessage ? /* @__PURE__ */ jsxs20("text", { children: [
|
|
1982
|
+
/* @__PURE__ */ jsx27("span", { style: textStyle({ fg: theme.muted }), children: "Sent: " }),
|
|
1983
|
+
/* @__PURE__ */ jsx27("span", { style: textStyle({ fg: theme.foreground }), children: lastMessage })
|
|
1984
|
+
] }) : /* @__PURE__ */ jsx27("text", { children: /* @__PURE__ */ jsx27("span", { children: " " }) }) }),
|
|
1985
|
+
/* @__PURE__ */ jsx27(
|
|
1986
|
+
PromptInput,
|
|
1987
|
+
{
|
|
1988
|
+
commands,
|
|
1989
|
+
files,
|
|
1990
|
+
placeholder: "Message Claude...",
|
|
1991
|
+
showDividers: true,
|
|
1992
|
+
useKeyboard: useKeyboard6,
|
|
1993
|
+
onSubmit: handleSubmit
|
|
1994
|
+
},
|
|
1995
|
+
resetKey
|
|
1996
|
+
),
|
|
1997
|
+
/* @__PURE__ */ jsx27("box", { children: /* @__PURE__ */ jsx27("text", { children: /* @__PURE__ */ jsx27("span", { style: textStyle({ dim: true }), children: "model: " + model }) }) }),
|
|
1998
|
+
/* @__PURE__ */ jsx27("box", { paddingTop: 1, paddingLeft: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx27(StatusBar, { items: [
|
|
1999
|
+
{ key: "\u23CE enter", label: "send" },
|
|
2000
|
+
{ key: "/model", label: "change model" },
|
|
2001
|
+
{ key: "\u2191", label: "history" }
|
|
2002
|
+
] }) })
|
|
2003
|
+
] });
|
|
1974
2004
|
}
|
|
1975
2005
|
|
|
1976
2006
|
// demos/text-input.tsx
|
|
1977
2007
|
import { useState as useState13 } from "react";
|
|
1978
2008
|
import { useKeyboard as useKeyboard7 } from "@gridland/utils";
|
|
2009
|
+
import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1979
2010
|
var FIELDS = [
|
|
1980
2011
|
{ label: "Username", placeholder: "enter your name", maxLength: 30, required: true },
|
|
1981
2012
|
{ label: "Email", placeholder: "user@example.com", maxLength: 50, required: true, description: "We'll never share your email" },
|
|
@@ -1989,26 +2020,30 @@ function TextInputApp() {
|
|
|
1989
2020
|
if (event.name === "up") setActiveField((i) => Math.max(0, i - 1));
|
|
1990
2021
|
if (event.name === "down") setActiveField((i) => Math.min(FIELDS.length - 1, i + 1));
|
|
1991
2022
|
});
|
|
1992
|
-
return /* @__PURE__ */
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2023
|
+
return /* @__PURE__ */ jsxs21("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
2024
|
+
/* @__PURE__ */ jsx28("box", { flexDirection: "column", paddingX: 1, paddingTop: 1, flexGrow: 1, children: FIELDS.map((field, i) => /* @__PURE__ */ jsx28("box", { marginBottom: 1, children: /* @__PURE__ */ jsx28(
|
|
2025
|
+
TextInput,
|
|
2026
|
+
{
|
|
2027
|
+
label: field.label,
|
|
2028
|
+
placeholder: field.placeholder,
|
|
2029
|
+
prompt: "> ",
|
|
2030
|
+
focus: i === activeField,
|
|
2031
|
+
maxLength: field.maxLength,
|
|
2032
|
+
value: values[i],
|
|
2033
|
+
onChange: (v) => setValues((prev) => prev.map((old, j) => j === i ? v : old)),
|
|
2034
|
+
required: field.required,
|
|
2035
|
+
disabled: field.disabled,
|
|
2036
|
+
description: field.description
|
|
2037
|
+
}
|
|
2038
|
+
) }, field.label)) }),
|
|
2039
|
+
/* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "\u2191\u2193", label: "field" }] }) })
|
|
2040
|
+
] });
|
|
2007
2041
|
}
|
|
2008
2042
|
|
|
2009
2043
|
// demos/link.tsx
|
|
2010
2044
|
import { useState as useState14 } from "react";
|
|
2011
2045
|
import { useKeyboard as useKeyboard8 } from "@gridland/utils";
|
|
2046
|
+
import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2012
2047
|
var MODES = ["solid", "dashed", "dotted", "none"];
|
|
2013
2048
|
function LinkApp() {
|
|
2014
2049
|
const theme = useTheme();
|
|
@@ -2018,18 +2053,28 @@ function LinkApp() {
|
|
|
2018
2053
|
if (event.name === "right") setModeIndex((i) => (i + 1) % MODES.length);
|
|
2019
2054
|
if (event.name === "left") setModeIndex((i) => (i - 1 + MODES.length) % MODES.length);
|
|
2020
2055
|
});
|
|
2021
|
-
return /* @__PURE__ */
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2056
|
+
return /* @__PURE__ */ jsxs22("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
2057
|
+
/* @__PURE__ */ jsx29("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsxs22("text", { style: textStyle({ fg: theme.foreground }), children: [
|
|
2058
|
+
"Made by ",
|
|
2059
|
+
/* @__PURE__ */ jsx29("a", { href: "https://cjroth.com", style: { attributes: mode === "solid" ? 8 : mode === "dashed" ? 24 : mode === "dotted" ? 72 : 0, fg: theme.accent }, children: "Chris Roth" }),
|
|
2060
|
+
" and ",
|
|
2061
|
+
/* @__PURE__ */ jsx29("a", { href: "https://jessicacheng.studio", style: { attributes: mode === "solid" ? 8 : mode === "dashed" ? 24 : mode === "dotted" ? 72 : 0, fg: theme.accent }, children: "Jessica Cheng" }),
|
|
2062
|
+
"."
|
|
2063
|
+
] }) }),
|
|
2064
|
+
/* @__PURE__ */ jsx29("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx29(
|
|
2065
|
+
StatusBar,
|
|
2066
|
+
{
|
|
2067
|
+
extra: /* @__PURE__ */ jsx29("span", { style: textStyle({ bold: true, fg: theme.foreground }), children: mode.padEnd(6) }),
|
|
2068
|
+
items: [{ key: "\u2190\u2192", label: "underline style" }]
|
|
2069
|
+
}
|
|
2070
|
+
) })
|
|
2071
|
+
] });
|
|
2028
2072
|
}
|
|
2029
2073
|
|
|
2030
2074
|
// demos/tabs.tsx
|
|
2031
2075
|
import { useState as useState15 } from "react";
|
|
2032
2076
|
import { useKeyboard as useKeyboard9 } from "@gridland/utils";
|
|
2077
|
+
import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2033
2078
|
var tabs = ["Files", "Search", "Git", "Debug"];
|
|
2034
2079
|
function TabBarApp() {
|
|
2035
2080
|
const [selectedIndex, setSelectedIndex] = useState15(0);
|
|
@@ -2037,12 +2082,17 @@ function TabBarApp() {
|
|
|
2037
2082
|
if (event.name === "left") setSelectedIndex((i) => i > 0 ? i - 1 : tabs.length - 1);
|
|
2038
2083
|
if (event.name === "right") setSelectedIndex((i) => i < tabs.length - 1 ? i + 1 : 0);
|
|
2039
2084
|
});
|
|
2040
|
-
return /* @__PURE__ */
|
|
2085
|
+
return /* @__PURE__ */ jsxs23("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
2086
|
+
/* @__PURE__ */ jsx30("box", { padding: 1, children: /* @__PURE__ */ jsx30(TabBar, { options: tabs, selectedIndex }) }),
|
|
2087
|
+
/* @__PURE__ */ jsx30("box", { flexGrow: 1 }),
|
|
2088
|
+
/* @__PURE__ */ jsx30("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx30(StatusBar, { items: [{ key: "\u2190\u2192", label: "switch tab" }] }) })
|
|
2089
|
+
] });
|
|
2041
2090
|
}
|
|
2042
2091
|
|
|
2043
2092
|
// demos/status-bar.tsx
|
|
2044
2093
|
import { useState as useState16 } from "react";
|
|
2045
2094
|
import { useKeyboard as useKeyboard10 } from "@gridland/utils";
|
|
2095
|
+
import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2046
2096
|
var shortcuts = [
|
|
2047
2097
|
{ key: "Tab", label: "switch focus" },
|
|
2048
2098
|
{ key: "\u2190\u2192", label: "cycle" },
|
|
@@ -2059,18 +2109,25 @@ function StatusBarApp() {
|
|
|
2059
2109
|
else if (event.name === "b") setLastKey("back (b)");
|
|
2060
2110
|
else if (event.name === "z") setLastKey("reset (z)");
|
|
2061
2111
|
});
|
|
2062
|
-
return /* @__PURE__ */
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2112
|
+
return /* @__PURE__ */ jsxs24("box", { flexDirection: "column", gap: 1, padding: 1, children: [
|
|
2113
|
+
lastKey ? /* @__PURE__ */ jsxs24("text", { children: [
|
|
2114
|
+
/* @__PURE__ */ jsx31("span", { children: "Pressed: " }),
|
|
2115
|
+
/* @__PURE__ */ jsx31("span", { style: textStyle({ bold: true, fg: theme.accent }), children: lastKey })
|
|
2116
|
+
] }) : /* @__PURE__ */ jsx31("text", { style: textStyle({ dim: true }), children: "Press a key to trigger an action" }),
|
|
2117
|
+
/* @__PURE__ */ jsx31(
|
|
2118
|
+
StatusBar,
|
|
2119
|
+
{
|
|
2120
|
+
items: shortcuts,
|
|
2121
|
+
extra: /* @__PURE__ */ jsx31("span", { style: textStyle({ fg: theme.success }), children: "\u25CF Ready" })
|
|
2122
|
+
}
|
|
2123
|
+
)
|
|
2124
|
+
] });
|
|
2069
2125
|
}
|
|
2070
2126
|
|
|
2071
2127
|
// demos/modal.tsx
|
|
2072
2128
|
import { useState as useState17 } from "react";
|
|
2073
2129
|
import { useKeyboard as useKeyboard11 } from "@gridland/utils";
|
|
2130
|
+
import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2074
2131
|
function ModalApp() {
|
|
2075
2132
|
const theme = useTheme();
|
|
2076
2133
|
const [isOpen, setIsOpen] = useState17(false);
|
|
@@ -2079,30 +2136,50 @@ function ModalApp() {
|
|
|
2079
2136
|
if (isOpen && (event.name === "q" || event.name === "escape")) setIsOpen(false);
|
|
2080
2137
|
});
|
|
2081
2138
|
if (isOpen) {
|
|
2082
|
-
return /* @__PURE__ */
|
|
2139
|
+
return /* @__PURE__ */ jsxs25("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
2140
|
+
/* @__PURE__ */ jsx32(Modal, { title: "Example Modal", useKeyboard: useKeyboard11, onClose: () => setIsOpen(false), children: /* @__PURE__ */ jsxs25("box", { paddingX: 1, flexDirection: "column", children: [
|
|
2141
|
+
/* @__PURE__ */ jsx32("text", { style: textStyle({ fg: theme.foreground }), children: "This is a modal overlay component." }),
|
|
2142
|
+
/* @__PURE__ */ jsx32("text", { children: " " }),
|
|
2143
|
+
/* @__PURE__ */ jsx32("text", { style: textStyle({ dim: true, fg: theme.muted }), children: "It stretches to fill the full terminal height." })
|
|
2144
|
+
] }) }),
|
|
2145
|
+
/* @__PURE__ */ jsx32("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx32(StatusBar, { items: [{ key: "q", label: "close" }] }) })
|
|
2146
|
+
] });
|
|
2083
2147
|
}
|
|
2084
|
-
return /* @__PURE__ */
|
|
2148
|
+
return /* @__PURE__ */ jsx32("box", { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs25("text", { children: [
|
|
2149
|
+
/* @__PURE__ */ jsx32("span", { style: textStyle({ dim: true, fg: theme.muted }), children: "Press " }),
|
|
2150
|
+
/* @__PURE__ */ jsx32("span", { style: textStyle({ bold: true, fg: theme.background, bg: theme.muted }), children: " m " }),
|
|
2151
|
+
/* @__PURE__ */ jsx32("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " to open modal" })
|
|
2152
|
+
] }) });
|
|
2085
2153
|
}
|
|
2086
2154
|
|
|
2087
2155
|
// demos/primitives.tsx
|
|
2156
|
+
import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2088
2157
|
function PrimitivesApp() {
|
|
2089
|
-
return /* @__PURE__ */
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2158
|
+
return /* @__PURE__ */ jsxs26("box", { flexDirection: "column", padding: 1, children: [
|
|
2159
|
+
/* @__PURE__ */ jsx33(
|
|
2160
|
+
"box",
|
|
2161
|
+
{
|
|
2162
|
+
border: true,
|
|
2163
|
+
borderStyle: "rounded",
|
|
2164
|
+
borderColor: "#75715e",
|
|
2165
|
+
title: "Layout",
|
|
2166
|
+
titleAlignment: "center",
|
|
2167
|
+
padding: 1,
|
|
2168
|
+
children: /* @__PURE__ */ jsxs26("box", { flexDirection: "row", gap: 2, children: [
|
|
2169
|
+
/* @__PURE__ */ jsx33("box", { border: true, borderStyle: "single", borderColor: "#a6e22e", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx33("text", { fg: "#a6e22e", bold: true, children: "Box 1" }) }),
|
|
2170
|
+
/* @__PURE__ */ jsx33("box", { border: true, borderStyle: "single", borderColor: "#f92672", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx33("text", { fg: "#f92672", bold: true, children: "Box 2" }) }),
|
|
2171
|
+
/* @__PURE__ */ jsx33("box", { border: true, borderStyle: "single", borderColor: "#66d9ef", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx33("text", { fg: "#66d9ef", bold: true, children: "Box 3" }) })
|
|
2172
|
+
] })
|
|
2173
|
+
}
|
|
2174
|
+
),
|
|
2175
|
+
/* @__PURE__ */ jsx33("text", { dim: true, fg: "#75715e", children: " Nested boxes with borders, colors & flexbox layout" })
|
|
2176
|
+
] });
|
|
2101
2177
|
}
|
|
2102
2178
|
|
|
2103
2179
|
// demos/chat.tsx
|
|
2104
2180
|
import { useState as useState18, useCallback as useCallback3, useRef as useRef5 } from "react";
|
|
2105
2181
|
import { useKeyboard as useKeyboard12 } from "@gridland/utils";
|
|
2182
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
2106
2183
|
var initialMessages = [
|
|
2107
2184
|
{ id: "1", role: "user", content: "Show me my portfolio" },
|
|
2108
2185
|
{ id: "2", role: "assistant", content: "Here's your current portfolio allocation:" },
|
|
@@ -2153,7 +2230,7 @@ function ChatApp() {
|
|
|
2153
2230
|
setStreamingText("");
|
|
2154
2231
|
setActiveToolCalls([]);
|
|
2155
2232
|
}, []);
|
|
2156
|
-
return /* @__PURE__ */
|
|
2233
|
+
return /* @__PURE__ */ jsx34(
|
|
2157
2234
|
ChatPanel,
|
|
2158
2235
|
{
|
|
2159
2236
|
messages,
|
|
@@ -2171,6 +2248,7 @@ function ChatApp() {
|
|
|
2171
2248
|
// demos/chain-of-thought.tsx
|
|
2172
2249
|
import { useState as useState19, useEffect as useEffect4, useRef as useRef6 } from "react";
|
|
2173
2250
|
import { useKeyboard as useKeyboard13 } from "@gridland/utils";
|
|
2251
|
+
import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2174
2252
|
var ALL_STEPS = [
|
|
2175
2253
|
{ tool: "Read", label: "Reading codebase", description: "src/", status: "done", delay: 1800 },
|
|
2176
2254
|
{ tool: "Think", label: "Planning changes", description: "auth module", status: "done", delay: 2500 },
|
|
@@ -2220,25 +2298,32 @@ function ChainOfThoughtApp() {
|
|
|
2220
2298
|
const elapsedMs = ALL_STEPS.slice(0, stepIndex).reduce((sum, s) => sum + s.delay, 0);
|
|
2221
2299
|
const totalMs = ALL_STEPS.reduce((sum, s) => sum + s.delay, 0);
|
|
2222
2300
|
const durationStr = phase === "done" ? `${(totalMs / 1e3).toFixed(1)}s` : `${(elapsedMs / 1e3).toFixed(1)}s`;
|
|
2223
|
-
return /* @__PURE__ */
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2301
|
+
return /* @__PURE__ */ jsxs27("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
2302
|
+
/* @__PURE__ */ jsx35("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsxs27(ChainOfThought, { open: expanded, onOpenChange: setExpanded, children: [
|
|
2303
|
+
/* @__PURE__ */ jsx35(ChainOfThoughtHeader, { duration: durationStr }),
|
|
2304
|
+
/* @__PURE__ */ jsx35(ChainOfThoughtContent, { children: steps.map((step, i) => /* @__PURE__ */ jsx35(
|
|
2305
|
+
ChainOfThoughtStep,
|
|
2306
|
+
{
|
|
2307
|
+
label: step.label,
|
|
2308
|
+
description: step.description,
|
|
2309
|
+
status: step.status,
|
|
2310
|
+
isLast: i === steps.length - 1,
|
|
2311
|
+
children: step.output
|
|
2312
|
+
},
|
|
2313
|
+
i
|
|
2314
|
+
)) })
|
|
2315
|
+
] }) }),
|
|
2316
|
+
/* @__PURE__ */ jsx35("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx35(StatusBar, { items: [
|
|
2317
|
+
{ key: "ctrl+shift+e", label: "toggle" },
|
|
2318
|
+
{ key: "r", label: "restart" }
|
|
2319
|
+
] }) })
|
|
2320
|
+
] });
|
|
2237
2321
|
}
|
|
2238
2322
|
|
|
2239
2323
|
// demos/message.tsx
|
|
2240
2324
|
import { useState as useState20, useEffect as useEffect5, useRef as useRef7 } from "react";
|
|
2241
2325
|
import { useKeyboard as useKeyboard14 } from "@gridland/utils";
|
|
2326
|
+
import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2242
2327
|
var RESPONSE = "I've refactored the auth module. The changes include extracting the token validation into a shared helper, consolidating the middleware chain, and updating the test suite to match.";
|
|
2243
2328
|
function MessageApp() {
|
|
2244
2329
|
const [phase, setPhase] = useState20("idle");
|
|
@@ -2284,18 +2369,30 @@ function MessageApp() {
|
|
|
2284
2369
|
const isStreaming = phase === "streaming";
|
|
2285
2370
|
const isDone = phase === "done";
|
|
2286
2371
|
const showAssistant = phase !== "idle";
|
|
2287
|
-
return /* @__PURE__ */
|
|
2372
|
+
return /* @__PURE__ */ jsxs28("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
2373
|
+
/* @__PURE__ */ jsxs28("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1, children: [
|
|
2374
|
+
/* @__PURE__ */ jsx36(Message, { role: "user", children: /* @__PURE__ */ jsx36(Message.Content, { children: /* @__PURE__ */ jsx36(Message.Text, { children: "Can you refactor the auth module?" }) }) }),
|
|
2375
|
+
showAssistant && /* @__PURE__ */ jsx36(Message, { role: "assistant", isStreaming, children: /* @__PURE__ */ jsx36(Message.Content, { children: /* @__PURE__ */ jsx36(Message.Text, { isLast: true, children: isDone ? RESPONSE : streamedText }) }) })
|
|
2376
|
+
] }),
|
|
2377
|
+
/* @__PURE__ */ jsx36("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx36(StatusBar, { items: [{ key: "r", label: "restart" }] }) })
|
|
2378
|
+
] });
|
|
2288
2379
|
}
|
|
2289
2380
|
|
|
2290
2381
|
// demos/terminal-window.tsx
|
|
2382
|
+
import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2291
2383
|
function TerminalWindowApp() {
|
|
2292
2384
|
const theme = useTheme();
|
|
2293
|
-
return /* @__PURE__ */
|
|
2385
|
+
return /* @__PURE__ */ jsxs29("box", { flexDirection: "column", padding: 1, children: [
|
|
2386
|
+
/* @__PURE__ */ jsx37("text", { style: textStyle({ fg: theme.secondary }), children: '$ echo "Hello from TerminalWindow"' }),
|
|
2387
|
+
/* @__PURE__ */ jsx37("text", { style: textStyle({ fg: theme.foreground }), children: "Hello from TerminalWindow" }),
|
|
2388
|
+
/* @__PURE__ */ jsx37("text", { style: textStyle({ fg: theme.secondary }), children: "$ _" })
|
|
2389
|
+
] });
|
|
2294
2390
|
}
|
|
2295
2391
|
|
|
2296
2392
|
// demos/focus.tsx
|
|
2297
2393
|
import { useState as useState21, useRef as useRef8 } from "react";
|
|
2298
2394
|
import { useKeyboard as useKeyboard15 } from "@gridland/utils";
|
|
2395
|
+
import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2299
2396
|
var focusPanels = [
|
|
2300
2397
|
{
|
|
2301
2398
|
label: "Language",
|
|
@@ -2377,46 +2474,63 @@ function FocusApp() {
|
|
|
2377
2474
|
}
|
|
2378
2475
|
event.preventDefault();
|
|
2379
2476
|
});
|
|
2380
|
-
return /* @__PURE__ */
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
|
|
2477
|
+
return /* @__PURE__ */ jsxs30("box", { flexDirection: "column", flexGrow: 1, children: [
|
|
2478
|
+
/* @__PURE__ */ jsx38("box", { flexDirection: "row", gap: 1, padding: 1, flexGrow: 1, children: focusPanels.map((panel, i) => {
|
|
2479
|
+
const focused = i === panelIndex;
|
|
2480
|
+
const active = focused && entered;
|
|
2481
|
+
const selected = selections[i];
|
|
2482
|
+
return /* @__PURE__ */ jsx38(
|
|
2483
|
+
"box",
|
|
2484
|
+
{
|
|
2485
|
+
border: true,
|
|
2486
|
+
borderStyle: "rounded",
|
|
2487
|
+
borderColor: active ? "#22c55e" : focused ? "#3b82f6" : "#555",
|
|
2488
|
+
flexGrow: 1,
|
|
2489
|
+
children: /* @__PURE__ */ jsxs30("box", { flexDirection: "column", padding: 1, children: [
|
|
2490
|
+
/* @__PURE__ */ jsxs30("text", { style: {
|
|
2491
|
+
fg: active ? "#22c55e" : focused ? "#3b82f6" : "#888",
|
|
2492
|
+
bold: focused
|
|
2493
|
+
}, children: [
|
|
2494
|
+
focused ? "\u25B8 " : " ",
|
|
2495
|
+
panel.label,
|
|
2496
|
+
selected ? `: ${selected}` : ""
|
|
2497
|
+
] }),
|
|
2498
|
+
(active || !entered && focused) && /* @__PURE__ */ jsxs30(Fragment7, { children: [
|
|
2499
|
+
/* @__PURE__ */ jsx38("box", { height: 1 }),
|
|
2500
|
+
/* @__PURE__ */ jsx38("box", { flexDirection: "column", children: panel.items.map((item, j) => {
|
|
2501
|
+
const highlighted = active && j === cursors[i];
|
|
2502
|
+
return /* @__PURE__ */ jsxs30("text", { style: {
|
|
2503
|
+
fg: highlighted ? "#22c55e" : active ? "#ccc" : "#666",
|
|
2504
|
+
bold: highlighted
|
|
2505
|
+
}, children: [
|
|
2506
|
+
highlighted ? " \u25B8 " : " ",
|
|
2507
|
+
item.label
|
|
2508
|
+
] }, item.value);
|
|
2509
|
+
}) })
|
|
2510
|
+
] })
|
|
2511
|
+
] })
|
|
2512
|
+
},
|
|
2513
|
+
panel.label
|
|
2514
|
+
);
|
|
2515
|
+
}) }),
|
|
2516
|
+
/* @__PURE__ */ jsx38("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx38(
|
|
2517
|
+
StatusBar,
|
|
2386
2518
|
{
|
|
2387
|
-
key:
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
flexGrow: 1
|
|
2392
|
-
},
|
|
2393
|
-
/* @__PURE__ */ React.createElement("box", { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React.createElement("text", { style: {
|
|
2394
|
-
fg: active ? "#22c55e" : focused ? "#3b82f6" : "#888",
|
|
2395
|
-
bold: focused
|
|
2396
|
-
} }, focused ? "\u25B8 " : " ", panel.label, selected ? `: ${selected}` : ""), (active || !entered && focused) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("box", { height: 1 }), /* @__PURE__ */ React.createElement("box", { flexDirection: "column" }, panel.items.map((item, j) => {
|
|
2397
|
-
const highlighted = active && j === cursors[i];
|
|
2398
|
-
return /* @__PURE__ */ React.createElement("text", { key: item.value, style: {
|
|
2399
|
-
fg: highlighted ? "#22c55e" : active ? "#ccc" : "#666",
|
|
2400
|
-
bold: highlighted
|
|
2401
|
-
} }, highlighted ? " \u25B8 " : " ", item.label);
|
|
2402
|
-
}))))
|
|
2403
|
-
);
|
|
2404
|
-
})), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(
|
|
2405
|
-
StatusBar,
|
|
2406
|
-
{
|
|
2407
|
-
items: entered ? [{ key: "\u2191\u2193", label: "select" }, { key: "enter", label: "confirm" }, { key: "esc", label: "back" }] : [{ key: "\u2190\u2192", label: "navigate" }, { key: "enter", label: "select" }, { key: "tab", label: "next" }]
|
|
2408
|
-
}
|
|
2409
|
-
)));
|
|
2519
|
+
items: entered ? [{ key: "\u2191\u2193", label: "select" }, { key: "enter", label: "confirm" }, { key: "esc", label: "back" }] : [{ key: "\u2190\u2192", label: "navigate" }, { key: "enter", label: "select" }, { key: "tab", label: "next" }]
|
|
2520
|
+
}
|
|
2521
|
+
) })
|
|
2522
|
+
] });
|
|
2410
2523
|
}
|
|
2411
2524
|
|
|
2412
2525
|
// demos/pointer.tsx
|
|
2413
2526
|
import { useState as useState22, useRef as useRef9 } from "react";
|
|
2414
2527
|
import { useKeyboard as useKeyboard16 } from "@gridland/utils";
|
|
2528
|
+
import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2415
2529
|
var pointerColors = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6"];
|
|
2416
2530
|
var pointerColorNames = ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"];
|
|
2417
2531
|
function HoverBox() {
|
|
2418
2532
|
const [hovering, setHovering] = useState22(false);
|
|
2419
|
-
return /* @__PURE__ */
|
|
2533
|
+
return /* @__PURE__ */ jsx39(
|
|
2420
2534
|
"box",
|
|
2421
2535
|
{
|
|
2422
2536
|
border: true,
|
|
@@ -2425,9 +2539,9 @@ function HoverBox() {
|
|
|
2425
2539
|
width: 20,
|
|
2426
2540
|
height: 5,
|
|
2427
2541
|
onMouseOver: () => setHovering(true),
|
|
2428
|
-
onMouseOut: () => setHovering(false)
|
|
2429
|
-
|
|
2430
|
-
|
|
2542
|
+
onMouseOut: () => setHovering(false),
|
|
2543
|
+
children: /* @__PURE__ */ jsx39("box", { padding: 1, children: /* @__PURE__ */ jsx39("text", { style: { fg: hovering ? "#22c55e" : "#888", bold: hovering }, children: hovering ? "Mouse inside!" : "Hover me" }) })
|
|
2544
|
+
}
|
|
2431
2545
|
);
|
|
2432
2546
|
}
|
|
2433
2547
|
function PointerApp() {
|
|
@@ -2451,79 +2565,192 @@ function PointerApp() {
|
|
|
2451
2565
|
}
|
|
2452
2566
|
event.preventDefault();
|
|
2453
2567
|
});
|
|
2454
|
-
return /* @__PURE__ */
|
|
2455
|
-
"box",
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2568
|
+
return /* @__PURE__ */ jsxs31("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
|
|
2569
|
+
/* @__PURE__ */ jsx39("box", { flexDirection: "row", gap: 1, children: pointerColors.map((color, i) => /* @__PURE__ */ jsx39(
|
|
2570
|
+
"box",
|
|
2571
|
+
{
|
|
2572
|
+
flexGrow: 1,
|
|
2573
|
+
height: 3,
|
|
2574
|
+
border: true,
|
|
2575
|
+
borderStyle: "rounded",
|
|
2576
|
+
borderColor: i === selected ? color : "#555",
|
|
2577
|
+
onMouseDown: (e) => {
|
|
2578
|
+
clickCountRef.current++;
|
|
2579
|
+
setClickCount(clickCountRef.current);
|
|
2580
|
+
selectedRef.current = i;
|
|
2581
|
+
setSelected(i);
|
|
2582
|
+
setMousePos({ x: e.x, y: e.y });
|
|
2583
|
+
},
|
|
2584
|
+
children: /* @__PURE__ */ jsx39("text", { style: { fg: color, bold: i === selected }, children: i === selected ? `\u25B8 ${pointerColorNames[i]}` : ` ${pointerColorNames[i]}` })
|
|
2585
|
+
},
|
|
2586
|
+
color
|
|
2587
|
+
)) }),
|
|
2588
|
+
/* @__PURE__ */ jsx39("box", { height: 1 }),
|
|
2589
|
+
/* @__PURE__ */ jsxs31("box", { flexDirection: "row", gap: 2, children: [
|
|
2590
|
+
/* @__PURE__ */ jsx39(HoverBox, {}),
|
|
2591
|
+
/* @__PURE__ */ jsxs31("box", { flexDirection: "column", flexGrow: 1, paddingTop: 1, children: [
|
|
2592
|
+
/* @__PURE__ */ jsxs31("text", { style: { fg: selected !== null ? pointerColors[selected] : "#888" }, children: [
|
|
2593
|
+
selected !== null ? `Clicked ${pointerColorNames[selected]}` : "Click a color",
|
|
2594
|
+
clickCount > 0 ? ` (${clickCount} clicks)` : ""
|
|
2595
|
+
] }),
|
|
2596
|
+
/* @__PURE__ */ jsx39("text", { style: { dim: true, fg: "#888" }, children: mousePos ? `mouse: ${mousePos.x}, ${mousePos.y}` : "" })
|
|
2597
|
+
] })
|
|
2598
|
+
] }),
|
|
2599
|
+
/* @__PURE__ */ jsx39("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx39(StatusBar, { items: [
|
|
2600
|
+
{ key: "click", label: "select" },
|
|
2601
|
+
{ key: "\u2190\u2192", label: "keyboard nav" }
|
|
2602
|
+
] }) })
|
|
2603
|
+
] });
|
|
2476
2604
|
}
|
|
2477
2605
|
|
|
2478
2606
|
// demos/cursor-highlight.tsx
|
|
2479
2607
|
import { useState as useState23 } from "react";
|
|
2608
|
+
import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2480
2609
|
function CursorHighlightApp() {
|
|
2481
2610
|
const [pos, setPos] = useState23(null);
|
|
2482
|
-
return /* @__PURE__ */
|
|
2611
|
+
return /* @__PURE__ */ jsxs32(
|
|
2483
2612
|
"box",
|
|
2484
2613
|
{
|
|
2485
2614
|
flexDirection: "column",
|
|
2486
2615
|
flexGrow: 1,
|
|
2487
2616
|
onMouseMove: (e) => {
|
|
2488
2617
|
setPos({ x: e.x, y: e.y });
|
|
2489
|
-
}
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2618
|
+
},
|
|
2619
|
+
children: [
|
|
2620
|
+
/* @__PURE__ */ jsxs32("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
|
|
2621
|
+
/* @__PURE__ */ jsx40("text", { style: { bold: true, fg: "#fff" }, children: "Cursor Highlight" }),
|
|
2622
|
+
/* @__PURE__ */ jsx40("text", { style: { dim: true, fg: "#888" }, children: "Move your mouse over the grid" }),
|
|
2623
|
+
/* @__PURE__ */ jsx40("box", { height: 1 }),
|
|
2624
|
+
/* @__PURE__ */ jsx40("box", { flexDirection: "column", children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx40("text", { children: Array.from({ length: 40 }, (_2, col) => {
|
|
2625
|
+
const isEven = (row + col) % 2 === 0;
|
|
2626
|
+
return /* @__PURE__ */ jsx40("span", { style: {
|
|
2627
|
+
fg: isEven ? "#3b82f6" : "#8b5cf6",
|
|
2628
|
+
dim: !isEven
|
|
2629
|
+
}, children: isEven ? "\u2591\u2591" : "\u2593\u2593" }, col);
|
|
2630
|
+
}) }, row)) })
|
|
2631
|
+
] }),
|
|
2632
|
+
/* @__PURE__ */ jsx40("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx40(
|
|
2633
|
+
StatusBar,
|
|
2634
|
+
{
|
|
2635
|
+
items: [],
|
|
2636
|
+
extra: /* @__PURE__ */ jsxs32("span", { children: [
|
|
2637
|
+
/* @__PURE__ */ jsx40("span", { style: textStyle({ bold: true, fg: "#1e1e2e", bg: "#888" }), children: " x " }),
|
|
2638
|
+
/* @__PURE__ */ jsx40("span", { style: textStyle({ dim: true, fg: "#888" }), children: ` ${pos ? String(pos.x).padStart(3) : " -"} ` }),
|
|
2639
|
+
/* @__PURE__ */ jsx40("span", { style: textStyle({ bold: true, fg: "#1e1e2e", bg: "#888" }), children: " y " }),
|
|
2640
|
+
/* @__PURE__ */ jsx40("span", { style: textStyle({ dim: true, fg: "#888" }), children: ` ${pos ? String(pos.y).padStart(3) : " -"}` })
|
|
2641
|
+
] })
|
|
2642
|
+
}
|
|
2643
|
+
) })
|
|
2644
|
+
]
|
|
2645
|
+
}
|
|
2505
2646
|
);
|
|
2506
2647
|
}
|
|
2507
2648
|
|
|
2508
2649
|
// demos/text-style.tsx
|
|
2650
|
+
import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2509
2651
|
function TextStyleApp() {
|
|
2510
2652
|
const theme = useTheme();
|
|
2511
2653
|
const desc = textStyle({ fg: theme.muted });
|
|
2512
|
-
return /* @__PURE__ */
|
|
2654
|
+
return /* @__PURE__ */ jsxs33("box", { flexDirection: "column", padding: 1, gap: 0, children: [
|
|
2655
|
+
/* @__PURE__ */ jsxs33("text", { children: [
|
|
2656
|
+
/* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, bold: true }), children: "bold " }),
|
|
2657
|
+
/* @__PURE__ */ jsxs33("span", { style: desc, children: [
|
|
2658
|
+
"textStyle(",
|
|
2659
|
+
"{",
|
|
2660
|
+
" bold: true ",
|
|
2661
|
+
"}",
|
|
2662
|
+
")"
|
|
2663
|
+
] })
|
|
2664
|
+
] }),
|
|
2665
|
+
/* @__PURE__ */ jsxs33("text", { children: [
|
|
2666
|
+
/* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, dim: true }), children: "dim " }),
|
|
2667
|
+
/* @__PURE__ */ jsxs33("span", { style: desc, children: [
|
|
2668
|
+
"textStyle(",
|
|
2669
|
+
"{",
|
|
2670
|
+
" dim: true ",
|
|
2671
|
+
"}",
|
|
2672
|
+
")"
|
|
2673
|
+
] })
|
|
2674
|
+
] }),
|
|
2675
|
+
/* @__PURE__ */ jsxs33("text", { children: [
|
|
2676
|
+
/* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, italic: true }), children: "italic " }),
|
|
2677
|
+
/* @__PURE__ */ jsxs33("span", { style: desc, children: [
|
|
2678
|
+
"textStyle(",
|
|
2679
|
+
"{",
|
|
2680
|
+
" italic: true ",
|
|
2681
|
+
"}",
|
|
2682
|
+
")"
|
|
2683
|
+
] })
|
|
2684
|
+
] }),
|
|
2685
|
+
/* @__PURE__ */ jsxs33("text", { children: [
|
|
2686
|
+
/* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, underline: true }), children: "underline " }),
|
|
2687
|
+
/* @__PURE__ */ jsxs33("span", { style: desc, children: [
|
|
2688
|
+
"textStyle(",
|
|
2689
|
+
"{",
|
|
2690
|
+
" underline: true ",
|
|
2691
|
+
"}",
|
|
2692
|
+
")"
|
|
2693
|
+
] })
|
|
2694
|
+
] }),
|
|
2695
|
+
/* @__PURE__ */ jsxs33("text", { children: [
|
|
2696
|
+
/* @__PURE__ */ jsx41("span", { style: textStyle({ inverse: true }), children: "inverse " }),
|
|
2697
|
+
/* @__PURE__ */ jsxs33("span", { style: desc, children: [
|
|
2698
|
+
"textStyle(",
|
|
2699
|
+
"{",
|
|
2700
|
+
" inverse: true ",
|
|
2701
|
+
"}",
|
|
2702
|
+
")"
|
|
2703
|
+
] })
|
|
2704
|
+
] }),
|
|
2705
|
+
/* @__PURE__ */ jsx41("text", { children: " " }),
|
|
2706
|
+
/* @__PURE__ */ jsxs33("text", { children: [
|
|
2707
|
+
/* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.primary }), children: "fg color " }),
|
|
2708
|
+
/* @__PURE__ */ jsxs33("span", { style: desc, children: [
|
|
2709
|
+
"textStyle(",
|
|
2710
|
+
"{",
|
|
2711
|
+
" fg: theme.primary ",
|
|
2712
|
+
"}",
|
|
2713
|
+
")"
|
|
2714
|
+
] })
|
|
2715
|
+
] }),
|
|
2716
|
+
/* @__PURE__ */ jsxs33("text", { children: [
|
|
2717
|
+
/* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, bg: theme.secondary }), children: "bg color " }),
|
|
2718
|
+
/* @__PURE__ */ jsxs33("span", { style: desc, children: [
|
|
2719
|
+
"textStyle(",
|
|
2720
|
+
"{",
|
|
2721
|
+
" fg: theme.foreground, bg: theme.secondary ",
|
|
2722
|
+
"}",
|
|
2723
|
+
")"
|
|
2724
|
+
] })
|
|
2725
|
+
] }),
|
|
2726
|
+
/* @__PURE__ */ jsx41("text", { children: " " }),
|
|
2727
|
+
/* @__PURE__ */ jsxs33("text", { children: [
|
|
2728
|
+
/* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.accent, bold: true, underline: true }), children: "combined " }),
|
|
2729
|
+
/* @__PURE__ */ jsxs33("span", { style: desc, children: [
|
|
2730
|
+
"textStyle(",
|
|
2731
|
+
"{",
|
|
2732
|
+
" fg: theme.accent, bold: true, underline: true ",
|
|
2733
|
+
"}",
|
|
2734
|
+
")"
|
|
2735
|
+
] })
|
|
2736
|
+
] })
|
|
2737
|
+
] });
|
|
2513
2738
|
}
|
|
2514
2739
|
|
|
2515
2740
|
// demos/headless.tsx
|
|
2741
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
2516
2742
|
var data = [
|
|
2517
2743
|
{ name: "Alice", role: "Engineer", status: "Active" },
|
|
2518
2744
|
{ name: "Bob", role: "Designer", status: "Active" },
|
|
2519
2745
|
{ name: "Charlie", role: "PM", status: "Away" }
|
|
2520
2746
|
];
|
|
2521
2747
|
function HeadlessApp() {
|
|
2522
|
-
return /* @__PURE__ */
|
|
2748
|
+
return /* @__PURE__ */ jsx42("box", { padding: 1, children: /* @__PURE__ */ jsx42(Table, { data }) });
|
|
2523
2749
|
}
|
|
2524
2750
|
|
|
2525
2751
|
// demos/theming.tsx
|
|
2526
2752
|
import { useKeyboard as useKeyboard17 } from "@gridland/utils";
|
|
2753
|
+
import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2527
2754
|
var tableData = [
|
|
2528
2755
|
{ name: "Alice", role: "Engineer", status: "Active" },
|
|
2529
2756
|
{ name: "Bob", role: "Designer", status: "Away" }
|
|
@@ -2534,16 +2761,21 @@ var selectItems = [
|
|
|
2534
2761
|
{ label: "Python", value: "py" }
|
|
2535
2762
|
];
|
|
2536
2763
|
function ThemingApp() {
|
|
2537
|
-
return /* @__PURE__ */
|
|
2764
|
+
return /* @__PURE__ */ jsxs34("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1, children: [
|
|
2765
|
+
/* @__PURE__ */ jsx43(Spinner, { text: "Loading data..." }),
|
|
2766
|
+
/* @__PURE__ */ jsx43(Table, { data: tableData }),
|
|
2767
|
+
/* @__PURE__ */ jsx43(MultiSelect, { items: selectItems, useKeyboard: useKeyboard17 })
|
|
2768
|
+
] });
|
|
2538
2769
|
}
|
|
2539
2770
|
|
|
2540
2771
|
// src/landing/landing-app.tsx
|
|
2541
2772
|
import { useMemo as useMemo7 } from "react";
|
|
2542
2773
|
|
|
2543
2774
|
// src/landing/install-box.tsx
|
|
2775
|
+
import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2544
2776
|
function InstallBox() {
|
|
2545
2777
|
const theme = useTheme();
|
|
2546
|
-
return /* @__PURE__ */
|
|
2778
|
+
return /* @__PURE__ */ jsx44(
|
|
2547
2779
|
"box",
|
|
2548
2780
|
{
|
|
2549
2781
|
border: true,
|
|
@@ -2551,17 +2783,22 @@ function InstallBox() {
|
|
|
2551
2783
|
borderColor: theme.border,
|
|
2552
2784
|
paddingX: 1,
|
|
2553
2785
|
flexDirection: "column",
|
|
2554
|
-
flexShrink: 0
|
|
2555
|
-
|
|
2556
|
-
|
|
2786
|
+
flexShrink: 0,
|
|
2787
|
+
children: /* @__PURE__ */ jsxs35("text", { children: [
|
|
2788
|
+
/* @__PURE__ */ jsx44("span", { style: textStyle({ dim: true }), children: "$ " }),
|
|
2789
|
+
/* @__PURE__ */ jsx44("span", { style: textStyle({ bold: true }), children: "bun create " }),
|
|
2790
|
+
/* @__PURE__ */ jsx44("span", { style: textStyle({ fg: theme.accent }), children: "gridland" })
|
|
2791
|
+
] })
|
|
2792
|
+
}
|
|
2557
2793
|
);
|
|
2558
2794
|
}
|
|
2559
2795
|
|
|
2560
2796
|
// src/landing/links-box.tsx
|
|
2797
|
+
import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2561
2798
|
var UNDERLINE3 = 1 << 3;
|
|
2562
2799
|
function LinksBox() {
|
|
2563
2800
|
const theme = useTheme();
|
|
2564
|
-
return /* @__PURE__ */
|
|
2801
|
+
return /* @__PURE__ */ jsx45(
|
|
2565
2802
|
"box",
|
|
2566
2803
|
{
|
|
2567
2804
|
border: true,
|
|
@@ -2569,9 +2806,15 @@ function LinksBox() {
|
|
|
2569
2806
|
borderColor: theme.border,
|
|
2570
2807
|
paddingX: 1,
|
|
2571
2808
|
flexDirection: "column",
|
|
2572
|
-
flexShrink: 0
|
|
2573
|
-
|
|
2574
|
-
|
|
2809
|
+
flexShrink: 0,
|
|
2810
|
+
children: /* @__PURE__ */ jsxs36("text", { children: [
|
|
2811
|
+
/* @__PURE__ */ jsx45("span", { children: "\u{1F431}" }),
|
|
2812
|
+
/* @__PURE__ */ jsx45("a", { href: "https://github.com/thoughtfulllc/gridland", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " GitHub" }),
|
|
2813
|
+
/* @__PURE__ */ jsx45("span", { children: " " }),
|
|
2814
|
+
/* @__PURE__ */ jsx45("span", { children: "\u{1F4D6}" }),
|
|
2815
|
+
/* @__PURE__ */ jsx45("a", { href: "https://gridland.io/docs", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " Docs" })
|
|
2816
|
+
] })
|
|
2817
|
+
}
|
|
2575
2818
|
);
|
|
2576
2819
|
}
|
|
2577
2820
|
|
|
@@ -2579,6 +2822,7 @@ function LinksBox() {
|
|
|
2579
2822
|
import { useState as useState24, useEffect as useEffect6, useRef as useRef10, useMemo as useMemo5 } from "react";
|
|
2580
2823
|
import figlet3 from "figlet";
|
|
2581
2824
|
import ansiShadow3 from "figlet/importable-fonts/ANSI Shadow.js";
|
|
2825
|
+
import { Fragment as Fragment8, jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
2582
2826
|
figlet3.parseFont("ANSI Shadow", ansiShadow3);
|
|
2583
2827
|
function makeArt(text) {
|
|
2584
2828
|
return figlet3.textSync(text, { font: "ANSI Shadow" }).split("\n").filter((l) => l.trimEnd().length > 0).join("\n");
|
|
@@ -2611,9 +2855,9 @@ function RevealGradient({ children, revealCol }) {
|
|
|
2611
2855
|
const gradientColors = GRADIENTS.instagram;
|
|
2612
2856
|
const lines2 = children.split("\n");
|
|
2613
2857
|
const maxLength = Math.max(...lines2.map((l) => l.length));
|
|
2614
|
-
if (maxLength === 0) return /* @__PURE__ */
|
|
2858
|
+
if (maxLength === 0) return /* @__PURE__ */ jsx46("text", { children });
|
|
2615
2859
|
const hexColors = useMemo5(() => generateGradient(gradientColors, maxLength), [maxLength]);
|
|
2616
|
-
return /* @__PURE__ */
|
|
2860
|
+
return /* @__PURE__ */ jsx46("box", { position: "relative", width: maxLength, height: lines2.length, shouldFill: false, children: lines2.map((line, lineIndex) => {
|
|
2617
2861
|
const runs = [];
|
|
2618
2862
|
let current = null;
|
|
2619
2863
|
for (let i = 0; i < line.length; i++) {
|
|
@@ -2633,25 +2877,25 @@ function RevealGradient({ children, revealCol }) {
|
|
|
2633
2877
|
}
|
|
2634
2878
|
}
|
|
2635
2879
|
if (current) runs.push(current);
|
|
2636
|
-
return runs.map((run, runIndex) => /* @__PURE__ */
|
|
2880
|
+
return runs.map((run, runIndex) => /* @__PURE__ */ jsx46(
|
|
2637
2881
|
"box",
|
|
2638
2882
|
{
|
|
2639
|
-
key: `${lineIndex}-${runIndex}`,
|
|
2640
2883
|
position: "absolute",
|
|
2641
2884
|
top: lineIndex,
|
|
2642
2885
|
left: run.start,
|
|
2643
|
-
shouldFill: false
|
|
2886
|
+
shouldFill: false,
|
|
2887
|
+
children: /* @__PURE__ */ jsx46("text", { shouldFill: false, children: run.chars.map((char, ci) => /* @__PURE__ */ jsx46(
|
|
2888
|
+
"span",
|
|
2889
|
+
{
|
|
2890
|
+
style: { fg: hexColors[run.start + ci] },
|
|
2891
|
+
children: char
|
|
2892
|
+
},
|
|
2893
|
+
ci
|
|
2894
|
+
)) })
|
|
2644
2895
|
},
|
|
2645
|
-
|
|
2646
|
-
"span",
|
|
2647
|
-
{
|
|
2648
|
-
key: ci,
|
|
2649
|
-
style: { fg: hexColors[run.start + ci] }
|
|
2650
|
-
},
|
|
2651
|
-
char
|
|
2652
|
-
)))
|
|
2896
|
+
`${lineIndex}-${runIndex}`
|
|
2653
2897
|
));
|
|
2654
|
-
}));
|
|
2898
|
+
}) });
|
|
2655
2899
|
}
|
|
2656
2900
|
function Logo({ compact, narrow, mobile }) {
|
|
2657
2901
|
const isBrowser = typeof document !== "undefined";
|
|
@@ -2662,18 +2906,45 @@ function Logo({ compact, narrow, mobile }) {
|
|
|
2662
2906
|
const maxWidth = compact ? 8 : narrow ? 40 : 62;
|
|
2663
2907
|
const revealCol = Math.round(revealProgress * (maxWidth + 4)) - 2;
|
|
2664
2908
|
const taglineOpacity = Math.max(0, Math.min(1, (progress - 0.7) / 0.3));
|
|
2665
|
-
const subtitle = /* @__PURE__ */
|
|
2909
|
+
const subtitle = /* @__PURE__ */ jsxs37(Fragment8, { children: [
|
|
2910
|
+
/* @__PURE__ */ jsx46("text", { children: " " }),
|
|
2911
|
+
/* @__PURE__ */ jsx46("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs37("text", { style: textStyle({ fg: "#d4b0e8" }), opacity: taglineOpacity, wrapMode: "word", textAlign: "center", width: "100%", shouldFill: false, children: [
|
|
2912
|
+
"A framework for building terminal apps, built on ",
|
|
2913
|
+
/* @__PURE__ */ jsx46("a", { href: "https://opentui.com", style: { attributes: 72, fg: "#d4b0e8" }, children: "OpenTUI" }),
|
|
2914
|
+
" + React." + (mobile ? " " : "\n") + "(Gridland apps, like this website, work in the browser and terminal.)"
|
|
2915
|
+
] }) })
|
|
2916
|
+
] });
|
|
2666
2917
|
if (!isBrowser) {
|
|
2667
2918
|
const art2 = compact ? "gridland" : narrow ? gridArt + "\n" + landArt : fullArt;
|
|
2668
|
-
return /* @__PURE__ */
|
|
2919
|
+
return /* @__PURE__ */ jsxs37("box", { flexDirection: "column", flexShrink: 0, width: "100%", alignItems: "center", shouldFill: false, children: [
|
|
2920
|
+
/* @__PURE__ */ jsx46(Gradient, { name: "instagram", children: art2 }),
|
|
2921
|
+
/* @__PURE__ */ jsx46("text", { children: " " }),
|
|
2922
|
+
/* @__PURE__ */ jsx46("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs37("text", { style: textStyle({ fg: "#d4b0e8" }), shouldFill: false, children: [
|
|
2923
|
+
"A framework for building terminal apps, built on OpenTUI + React.",
|
|
2924
|
+
"\n",
|
|
2925
|
+
"(Gridland apps, like this website, work in the browser and terminal.)"
|
|
2926
|
+
] }) })
|
|
2927
|
+
] });
|
|
2669
2928
|
}
|
|
2670
2929
|
if (compact) {
|
|
2671
|
-
return /* @__PURE__ */
|
|
2930
|
+
return /* @__PURE__ */ jsxs37("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
|
|
2931
|
+
/* @__PURE__ */ jsx46("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx46("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx46(RevealGradient, { revealCol, children: "gridland" }) }) }),
|
|
2932
|
+
subtitle
|
|
2933
|
+
] });
|
|
2672
2934
|
}
|
|
2673
2935
|
if (narrow) {
|
|
2674
|
-
return /* @__PURE__ */
|
|
2936
|
+
return /* @__PURE__ */ jsxs37("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
|
|
2937
|
+
/* @__PURE__ */ jsx46("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsxs37("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: [
|
|
2938
|
+
/* @__PURE__ */ jsx46(RevealGradient, { revealCol, children: gridArt }),
|
|
2939
|
+
/* @__PURE__ */ jsx46(RevealGradient, { revealCol, children: landArt })
|
|
2940
|
+
] }) }),
|
|
2941
|
+
subtitle
|
|
2942
|
+
] });
|
|
2675
2943
|
}
|
|
2676
|
-
return /* @__PURE__ */
|
|
2944
|
+
return /* @__PURE__ */ jsxs37("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
|
|
2945
|
+
/* @__PURE__ */ jsx46("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx46("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx46(RevealGradient, { revealCol, children: fullArt }) }) }),
|
|
2946
|
+
subtitle
|
|
2947
|
+
] });
|
|
2677
2948
|
}
|
|
2678
2949
|
|
|
2679
2950
|
// src/landing/matrix-background.tsx
|
|
@@ -2759,6 +3030,7 @@ function useMatrix(width, height) {
|
|
|
2759
3030
|
}
|
|
2760
3031
|
|
|
2761
3032
|
// src/landing/matrix-background.tsx
|
|
3033
|
+
import { jsx as jsx47 } from "react/jsx-runtime";
|
|
2762
3034
|
var MUTE_LEVELS = [0.12, 0.18, 0.24, 0.3, 0.38];
|
|
2763
3035
|
var BG = hexToRgb("#1a1a2e");
|
|
2764
3036
|
function buildMutedColors(baseHex) {
|
|
@@ -2785,28 +3057,29 @@ function MatrixBackground({ width, height, clearRect, clearRects }) {
|
|
|
2785
3057
|
() => columnColors.map(buildMutedColors),
|
|
2786
3058
|
[columnColors]
|
|
2787
3059
|
);
|
|
2788
|
-
return /* @__PURE__ */
|
|
3060
|
+
return /* @__PURE__ */ jsx47("box", { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx47("text", { children: row.map((cell, x) => {
|
|
2789
3061
|
const inClearRect = clearRect && y >= clearRect.top && y < clearRect.top + clearRect.height && x >= clearRect.left && x < clearRect.left + clearRect.width || clearRects && clearRects.some(
|
|
2790
3062
|
(r) => y >= r.top && y < r.top + r.height && x >= r.left && x < r.left + r.width
|
|
2791
3063
|
);
|
|
2792
3064
|
const mutedColors = columnMutedColors[x];
|
|
2793
3065
|
if (cell === " " || inClearRect || !mutedColors) {
|
|
2794
|
-
return /* @__PURE__ */
|
|
3066
|
+
return /* @__PURE__ */ jsx47("span", { children: " " }, x);
|
|
2795
3067
|
}
|
|
2796
|
-
return /* @__PURE__ */
|
|
3068
|
+
return /* @__PURE__ */ jsx47(
|
|
2797
3069
|
"span",
|
|
2798
3070
|
{
|
|
2799
|
-
key: x,
|
|
2800
3071
|
style: {
|
|
2801
3072
|
fg: colorForCell(mutedColors, brightness[y][x])
|
|
2802
|
-
}
|
|
3073
|
+
},
|
|
3074
|
+
children: cell
|
|
2803
3075
|
},
|
|
2804
|
-
|
|
3076
|
+
x
|
|
2805
3077
|
);
|
|
2806
|
-
}))));
|
|
3078
|
+
}) }, y)) });
|
|
2807
3079
|
}
|
|
2808
3080
|
|
|
2809
3081
|
// src/landing/landing-app.tsx
|
|
3082
|
+
import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
2810
3083
|
function LandingApp({ useKeyboard: useKeyboard20 }) {
|
|
2811
3084
|
const theme = useTheme();
|
|
2812
3085
|
const { width, height, isNarrow, isTiny, isMobile } = useBreakpoints();
|
|
@@ -2824,38 +3097,61 @@ function LandingApp({ useKeyboard: useKeyboard20 }) {
|
|
|
2824
3097
|
installLinksClearRect: { top: installLinksTop, left: 1, width: width - 2, height: installLinksHeight }
|
|
2825
3098
|
};
|
|
2826
3099
|
}, [width, height, isTiny, isNarrow, isMobile, isBrowser]);
|
|
2827
|
-
return /* @__PURE__ */
|
|
3100
|
+
return /* @__PURE__ */ jsxs38("box", { width: "100%", height: "100%", position: "relative", children: [
|
|
3101
|
+
/* @__PURE__ */ jsx48(MatrixBackground, { width, height, clearRect, clearRects: isBrowser ? void 0 : [installLinksClearRect] }),
|
|
3102
|
+
/* @__PURE__ */ jsx48("box", { position: "absolute", top: 0, left: 0, width, height, zIndex: 1, flexDirection: "column", shouldFill: false, children: /* @__PURE__ */ jsxs38("box", { flexGrow: 1, flexDirection: "column", paddingTop: 3, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, gap: isMobile ? 0 : 1, shouldFill: false, children: [
|
|
3103
|
+
/* @__PURE__ */ jsx48("box", { flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx48(Logo, { compact: isTiny, narrow: isNarrow, mobile: isMobile }) }),
|
|
3104
|
+
/* @__PURE__ */ jsxs38("box", { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: isMobile ? 0 : 1, flexShrink: 0, shouldFill: false, children: [
|
|
3105
|
+
/* @__PURE__ */ jsx48("box", { border: true, borderStyle: "rounded", borderColor: theme.border, paddingX: 1, flexDirection: "column", flexShrink: 0, children: /* @__PURE__ */ jsxs38("text", { children: [
|
|
3106
|
+
/* @__PURE__ */ jsx48("span", { style: textStyle({ dim: true }), children: "$ " }),
|
|
3107
|
+
/* @__PURE__ */ jsx48("span", { style: textStyle({ bold: true }), children: "bunx " }),
|
|
3108
|
+
/* @__PURE__ */ jsx48("span", { style: textStyle({ fg: theme.accent }), children: "@gridland/demo landing" })
|
|
3109
|
+
] }) }),
|
|
3110
|
+
/* @__PURE__ */ jsx48(InstallBox, {}),
|
|
3111
|
+
/* @__PURE__ */ jsx48(LinksBox, {})
|
|
3112
|
+
] }),
|
|
3113
|
+
/* @__PURE__ */ jsx48("box", { flexGrow: 1, border: true, borderStyle: "rounded", borderColor: theme.border, flexDirection: "column", overflow: "hidden" })
|
|
3114
|
+
] }) })
|
|
3115
|
+
] });
|
|
2828
3116
|
}
|
|
2829
3117
|
|
|
3118
|
+
// src/landing/matrix-rain.tsx
|
|
3119
|
+
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
3120
|
+
|
|
3121
|
+
// src/landing/about-modal.tsx
|
|
3122
|
+
import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
3123
|
+
|
|
2830
3124
|
// demos/index.tsx
|
|
3125
|
+
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
2831
3126
|
var demos = [
|
|
2832
|
-
{ name: "gradient", app: () => /* @__PURE__ */
|
|
2833
|
-
{ name: "ascii", app: () => /* @__PURE__ */
|
|
2834
|
-
{ name: "table", app: () => /* @__PURE__ */
|
|
2835
|
-
{ name: "spinner", app: () => /* @__PURE__ */
|
|
2836
|
-
{ name: "select-input", app: () => /* @__PURE__ */
|
|
2837
|
-
{ name: "multi-select", app: () => /* @__PURE__ */
|
|
2838
|
-
{ name: "prompt-input", app: () => /* @__PURE__ */
|
|
2839
|
-
{ name: "text-input", app: () => /* @__PURE__ */
|
|
2840
|
-
{ name: "link", app: () => /* @__PURE__ */
|
|
2841
|
-
{ name: "tabs", app: () => /* @__PURE__ */
|
|
2842
|
-
{ name: "status-bar", app: () => /* @__PURE__ */
|
|
2843
|
-
{ name: "modal", app: () => /* @__PURE__ */
|
|
2844
|
-
{ name: "primitives", app: () => /* @__PURE__ */
|
|
2845
|
-
{ name: "chat", app: () => /* @__PURE__ */
|
|
2846
|
-
{ name: "chain-of-thought", app: () => /* @__PURE__ */
|
|
2847
|
-
{ name: "message", app: () => /* @__PURE__ */
|
|
2848
|
-
{ name: "terminal-window", app: () => /* @__PURE__ */
|
|
2849
|
-
{ name: "focus", app: () => /* @__PURE__ */
|
|
2850
|
-
{ name: "pointer", app: () => /* @__PURE__ */
|
|
2851
|
-
{ name: "cursor-highlight", app: () => /* @__PURE__ */
|
|
2852
|
-
{ name: "text-style", app: () => /* @__PURE__ */
|
|
2853
|
-
{ name: "headless", app: () => /* @__PURE__ */
|
|
2854
|
-
{ name: "theming", app: () => /* @__PURE__ */
|
|
2855
|
-
{ name: "landing", app: () => /* @__PURE__ */
|
|
3127
|
+
{ name: "gradient", app: () => /* @__PURE__ */ jsx51(GradientApp, {}) },
|
|
3128
|
+
{ name: "ascii", app: () => /* @__PURE__ */ jsx51(AsciiApp, {}) },
|
|
3129
|
+
{ name: "table", app: () => /* @__PURE__ */ jsx51(TableApp, {}) },
|
|
3130
|
+
{ name: "spinner", app: () => /* @__PURE__ */ jsx51(SpinnerApp, {}) },
|
|
3131
|
+
{ name: "select-input", app: () => /* @__PURE__ */ jsx51(SelectInputApp, {}) },
|
|
3132
|
+
{ name: "multi-select", app: () => /* @__PURE__ */ jsx51(MultiSelectApp, {}) },
|
|
3133
|
+
{ name: "prompt-input", app: () => /* @__PURE__ */ jsx51(PromptInputApp, {}) },
|
|
3134
|
+
{ name: "text-input", app: () => /* @__PURE__ */ jsx51(TextInputApp, {}) },
|
|
3135
|
+
{ name: "link", app: () => /* @__PURE__ */ jsx51(LinkApp, {}) },
|
|
3136
|
+
{ name: "tabs", app: () => /* @__PURE__ */ jsx51(TabBarApp, {}) },
|
|
3137
|
+
{ name: "status-bar", app: () => /* @__PURE__ */ jsx51(StatusBarApp, {}) },
|
|
3138
|
+
{ name: "modal", app: () => /* @__PURE__ */ jsx51(ModalApp, {}) },
|
|
3139
|
+
{ name: "primitives", app: () => /* @__PURE__ */ jsx51(PrimitivesApp, {}) },
|
|
3140
|
+
{ name: "chat", app: () => /* @__PURE__ */ jsx51(ChatApp, {}) },
|
|
3141
|
+
{ name: "chain-of-thought", app: () => /* @__PURE__ */ jsx51(ChainOfThoughtApp, {}) },
|
|
3142
|
+
{ name: "message", app: () => /* @__PURE__ */ jsx51(MessageApp, {}) },
|
|
3143
|
+
{ name: "terminal-window", app: () => /* @__PURE__ */ jsx51(TerminalWindowApp, {}) },
|
|
3144
|
+
{ name: "focus", app: () => /* @__PURE__ */ jsx51(FocusApp, {}) },
|
|
3145
|
+
{ name: "pointer", app: () => /* @__PURE__ */ jsx51(PointerApp, {}) },
|
|
3146
|
+
{ name: "cursor-highlight", app: () => /* @__PURE__ */ jsx51(CursorHighlightApp, {}) },
|
|
3147
|
+
{ name: "text-style", app: () => /* @__PURE__ */ jsx51(TextStyleApp, {}) },
|
|
3148
|
+
{ name: "headless", app: () => /* @__PURE__ */ jsx51(HeadlessApp, {}) },
|
|
3149
|
+
{ name: "theming", app: () => /* @__PURE__ */ jsx51(ThemingApp, {}) },
|
|
3150
|
+
{ name: "landing", app: () => /* @__PURE__ */ jsx51(LandingApp, { useKeyboard: useKeyboard18 }) }
|
|
2856
3151
|
];
|
|
2857
3152
|
|
|
2858
3153
|
// src/run.tsx
|
|
3154
|
+
import { jsx as jsx52 } from "react/jsx-runtime";
|
|
2859
3155
|
var _renderer;
|
|
2860
3156
|
function DemoShell({ children }) {
|
|
2861
3157
|
useKeyboard19((event) => {
|
|
@@ -2863,7 +3159,7 @@ function DemoShell({ children }) {
|
|
|
2863
3159
|
_renderer.destroy();
|
|
2864
3160
|
}
|
|
2865
3161
|
});
|
|
2866
|
-
return /* @__PURE__ */
|
|
3162
|
+
return /* @__PURE__ */ jsx52("box", { flexDirection: "column", flexGrow: 1, children });
|
|
2867
3163
|
}
|
|
2868
3164
|
async function runDemo(name2) {
|
|
2869
3165
|
const demo = demos.find((d) => d.name === name2);
|
|
@@ -2873,7 +3169,7 @@ async function runDemo(name2) {
|
|
|
2873
3169
|
process.exit(1);
|
|
2874
3170
|
}
|
|
2875
3171
|
_renderer = await createCliRenderer({ exitOnCtrlC: true });
|
|
2876
|
-
createRoot(_renderer).render(/* @__PURE__ */
|
|
3172
|
+
createRoot(_renderer).render(/* @__PURE__ */ jsx52(DemoShell, { children: demo.app() }));
|
|
2877
3173
|
}
|
|
2878
3174
|
var name = process.argv[2];
|
|
2879
3175
|
if (name) {
|