@ggui-ai/dev-stack 0.8.0 → 0.9.0
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/hub-preview/client.js +636 -712
- package/dist/local-registry/compile-ui.js +4 -4
- package/package.json +7 -7
|
@@ -63,26 +63,26 @@ var require_react_production = __commonJS({
|
|
|
63
63
|
};
|
|
64
64
|
var assign = Object.assign;
|
|
65
65
|
var emptyObject = {};
|
|
66
|
-
function
|
|
66
|
+
function Component(props, context, updater) {
|
|
67
67
|
this.props = props;
|
|
68
68
|
this.context = context;
|
|
69
69
|
this.refs = emptyObject;
|
|
70
70
|
this.updater = updater || ReactNoopUpdateQueue;
|
|
71
71
|
}
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
Component.prototype.isReactComponent = {};
|
|
73
|
+
Component.prototype.setState = function(partialState, callback) {
|
|
74
74
|
if ("object" !== typeof partialState && "function" !== typeof partialState && null != partialState)
|
|
75
75
|
throw Error(
|
|
76
76
|
"takes an object of state variables to update or a function which returns an object of state variables."
|
|
77
77
|
);
|
|
78
78
|
this.updater.enqueueSetState(this, partialState, callback, "setState");
|
|
79
79
|
};
|
|
80
|
-
|
|
80
|
+
Component.prototype.forceUpdate = function(callback) {
|
|
81
81
|
this.updater.enqueueForceUpdate(this, callback, "forceUpdate");
|
|
82
82
|
};
|
|
83
83
|
function ComponentDummy() {
|
|
84
84
|
}
|
|
85
|
-
ComponentDummy.prototype =
|
|
85
|
+
ComponentDummy.prototype = Component.prototype;
|
|
86
86
|
function PureComponent(props, context, updater) {
|
|
87
87
|
this.props = props;
|
|
88
88
|
this.context = context;
|
|
@@ -91,7 +91,7 @@ var require_react_production = __commonJS({
|
|
|
91
91
|
}
|
|
92
92
|
var pureComponentPrototype = PureComponent.prototype = new ComponentDummy();
|
|
93
93
|
pureComponentPrototype.constructor = PureComponent;
|
|
94
|
-
assign(pureComponentPrototype,
|
|
94
|
+
assign(pureComponentPrototype, Component.prototype);
|
|
95
95
|
pureComponentPrototype.isPureReactComponent = true;
|
|
96
96
|
var isArrayImpl = Array.isArray;
|
|
97
97
|
function noop() {
|
|
@@ -296,7 +296,7 @@ var require_react_production = __commonJS({
|
|
|
296
296
|
};
|
|
297
297
|
exports.Activity = REACT_ACTIVITY_TYPE;
|
|
298
298
|
exports.Children = Children;
|
|
299
|
-
exports.Component =
|
|
299
|
+
exports.Component = Component;
|
|
300
300
|
exports.Fragment = REACT_FRAGMENT_TYPE;
|
|
301
301
|
exports.Profiler = REACT_PROFILER_TYPE;
|
|
302
302
|
exports.PureComponent = PureComponent;
|
|
@@ -2785,9 +2785,9 @@ var require_react_dom_client_production = __commonJS({
|
|
|
2785
2785
|
function createFiberImplClass(tag, pendingProps, key, mode) {
|
|
2786
2786
|
return new FiberNode(tag, pendingProps, key, mode);
|
|
2787
2787
|
}
|
|
2788
|
-
function shouldConstruct(
|
|
2789
|
-
|
|
2790
|
-
return !(!
|
|
2788
|
+
function shouldConstruct(Component) {
|
|
2789
|
+
Component = Component.prototype;
|
|
2790
|
+
return !(!Component || !Component.isReactComponent);
|
|
2791
2791
|
}
|
|
2792
2792
|
function createWorkInProgress(current, pendingProps) {
|
|
2793
2793
|
var workInProgress2 = current.alternate;
|
|
@@ -4157,7 +4157,7 @@ var require_react_dom_client_production = __commonJS({
|
|
|
4157
4157
|
if (!objectIs(nextDeps[i], prevDeps[i])) return false;
|
|
4158
4158
|
return true;
|
|
4159
4159
|
}
|
|
4160
|
-
function renderWithHooks(current, workInProgress2,
|
|
4160
|
+
function renderWithHooks(current, workInProgress2, Component, props, secondArg, nextRenderLanes) {
|
|
4161
4161
|
renderLanes = nextRenderLanes;
|
|
4162
4162
|
currentlyRenderingFiber = workInProgress2;
|
|
4163
4163
|
workInProgress2.memoizedState = null;
|
|
@@ -4165,11 +4165,11 @@ var require_react_dom_client_production = __commonJS({
|
|
|
4165
4165
|
workInProgress2.lanes = 0;
|
|
4166
4166
|
ReactSharedInternals.H = null === current || null === current.memoizedState ? HooksDispatcherOnMount : HooksDispatcherOnUpdate;
|
|
4167
4167
|
shouldDoubleInvokeUserFnsInHooksDEV = false;
|
|
4168
|
-
nextRenderLanes =
|
|
4168
|
+
nextRenderLanes = Component(props, secondArg);
|
|
4169
4169
|
shouldDoubleInvokeUserFnsInHooksDEV = false;
|
|
4170
4170
|
didScheduleRenderPhaseUpdateDuringThisPass && (nextRenderLanes = renderWithHooksAgain(
|
|
4171
4171
|
workInProgress2,
|
|
4172
|
-
|
|
4172
|
+
Component,
|
|
4173
4173
|
props,
|
|
4174
4174
|
secondArg
|
|
4175
4175
|
));
|
|
@@ -4187,7 +4187,7 @@ var require_react_dom_client_production = __commonJS({
|
|
|
4187
4187
|
if (didRenderTooFewHooks) throw Error(formatProdErrorMessage(300));
|
|
4188
4188
|
null === current || didReceiveUpdate || (current = current.dependencies, null !== current && checkIfContextChanged(current) && (didReceiveUpdate = true));
|
|
4189
4189
|
}
|
|
4190
|
-
function renderWithHooksAgain(workInProgress2,
|
|
4190
|
+
function renderWithHooksAgain(workInProgress2, Component, props, secondArg) {
|
|
4191
4191
|
currentlyRenderingFiber = workInProgress2;
|
|
4192
4192
|
var numberOfReRenders = 0;
|
|
4193
4193
|
do {
|
|
@@ -4205,7 +4205,7 @@ var require_react_dom_client_production = __commonJS({
|
|
|
4205
4205
|
null != children.memoCache && (children.memoCache.index = 0);
|
|
4206
4206
|
}
|
|
4207
4207
|
ReactSharedInternals.H = HooksDispatcherOnRerender;
|
|
4208
|
-
children =
|
|
4208
|
+
children = Component(props, secondArg);
|
|
4209
4209
|
} while (didScheduleRenderPhaseUpdateDuringThisPass);
|
|
4210
4210
|
return children;
|
|
4211
4211
|
}
|
|
@@ -5406,17 +5406,17 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5406
5406
|
"function" === typeof instance.UNSAFE_componentWillReceiveProps && instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);
|
|
5407
5407
|
instance.state !== workInProgress2 && classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
|
|
5408
5408
|
}
|
|
5409
|
-
function resolveClassComponentProps(
|
|
5409
|
+
function resolveClassComponentProps(Component, baseProps) {
|
|
5410
5410
|
var newProps = baseProps;
|
|
5411
5411
|
if ("ref" in baseProps) {
|
|
5412
5412
|
newProps = {};
|
|
5413
5413
|
for (var propName in baseProps)
|
|
5414
5414
|
"ref" !== propName && (newProps[propName] = baseProps[propName]);
|
|
5415
5415
|
}
|
|
5416
|
-
if (
|
|
5416
|
+
if (Component = Component.defaultProps) {
|
|
5417
5417
|
newProps === baseProps && (newProps = assign({}, newProps));
|
|
5418
|
-
for (var propName$73 in
|
|
5419
|
-
void 0 === newProps[propName$73] && (newProps[propName$73] =
|
|
5418
|
+
for (var propName$73 in Component)
|
|
5419
|
+
void 0 === newProps[propName$73] && (newProps[propName$73] = Component[propName$73]);
|
|
5420
5420
|
}
|
|
5421
5421
|
return newProps;
|
|
5422
5422
|
}
|
|
@@ -5560,8 +5560,8 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5560
5560
|
renderLanes2
|
|
5561
5561
|
);
|
|
5562
5562
|
}
|
|
5563
|
-
function updateForwardRef(current, workInProgress2,
|
|
5564
|
-
|
|
5563
|
+
function updateForwardRef(current, workInProgress2, Component, nextProps, renderLanes2) {
|
|
5564
|
+
Component = Component.render;
|
|
5565
5565
|
var ref = workInProgress2.ref;
|
|
5566
5566
|
if ("ref" in nextProps) {
|
|
5567
5567
|
var propsWithoutRef = {};
|
|
@@ -5572,7 +5572,7 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5572
5572
|
nextProps = renderWithHooks(
|
|
5573
5573
|
current,
|
|
5574
5574
|
workInProgress2,
|
|
5575
|
-
|
|
5575
|
+
Component,
|
|
5576
5576
|
propsWithoutRef,
|
|
5577
5577
|
ref,
|
|
5578
5578
|
renderLanes2
|
|
@@ -5585,10 +5585,10 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5585
5585
|
reconcileChildren(current, workInProgress2, nextProps, renderLanes2);
|
|
5586
5586
|
return workInProgress2.child;
|
|
5587
5587
|
}
|
|
5588
|
-
function updateMemoComponent(current, workInProgress2,
|
|
5588
|
+
function updateMemoComponent(current, workInProgress2, Component, nextProps, renderLanes2) {
|
|
5589
5589
|
if (null === current) {
|
|
5590
|
-
var type =
|
|
5591
|
-
if ("function" === typeof type && !shouldConstruct(type) && void 0 === type.defaultProps && null ===
|
|
5590
|
+
var type = Component.type;
|
|
5591
|
+
if ("function" === typeof type && !shouldConstruct(type) && void 0 === type.defaultProps && null === Component.compare)
|
|
5592
5592
|
return workInProgress2.tag = 15, workInProgress2.type = type, updateSimpleMemoComponent(
|
|
5593
5593
|
current,
|
|
5594
5594
|
workInProgress2,
|
|
@@ -5597,7 +5597,7 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5597
5597
|
renderLanes2
|
|
5598
5598
|
);
|
|
5599
5599
|
current = createFiberFromTypeAndProps(
|
|
5600
|
-
|
|
5600
|
+
Component.type,
|
|
5601
5601
|
null,
|
|
5602
5602
|
nextProps,
|
|
5603
5603
|
workInProgress2,
|
|
@@ -5611,9 +5611,9 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5611
5611
|
type = current.child;
|
|
5612
5612
|
if (!checkScheduledUpdateOrContext(current, renderLanes2)) {
|
|
5613
5613
|
var prevProps = type.memoizedProps;
|
|
5614
|
-
|
|
5615
|
-
|
|
5616
|
-
if (
|
|
5614
|
+
Component = Component.compare;
|
|
5615
|
+
Component = null !== Component ? Component : shallowEqual;
|
|
5616
|
+
if (Component(prevProps, nextProps) && current.ref === workInProgress2.ref)
|
|
5617
5617
|
return bailoutOnAlreadyFinishedWork(current, workInProgress2, renderLanes2);
|
|
5618
5618
|
}
|
|
5619
5619
|
workInProgress2.flags |= 1;
|
|
@@ -5622,7 +5622,7 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5622
5622
|
current.return = workInProgress2;
|
|
5623
5623
|
return workInProgress2.child = current;
|
|
5624
5624
|
}
|
|
5625
|
-
function updateSimpleMemoComponent(current, workInProgress2,
|
|
5625
|
+
function updateSimpleMemoComponent(current, workInProgress2, Component, nextProps, renderLanes2) {
|
|
5626
5626
|
if (null !== current) {
|
|
5627
5627
|
var prevProps = current.memoizedProps;
|
|
5628
5628
|
if (shallowEqual(prevProps, nextProps) && current.ref === workInProgress2.ref)
|
|
@@ -5634,7 +5634,7 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5634
5634
|
return updateFunctionComponent(
|
|
5635
5635
|
current,
|
|
5636
5636
|
workInProgress2,
|
|
5637
|
-
|
|
5637
|
+
Component,
|
|
5638
5638
|
nextProps,
|
|
5639
5639
|
renderLanes2
|
|
5640
5640
|
);
|
|
@@ -5794,12 +5794,12 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5794
5794
|
workInProgress2.flags |= 4194816;
|
|
5795
5795
|
}
|
|
5796
5796
|
}
|
|
5797
|
-
function updateFunctionComponent(current, workInProgress2,
|
|
5797
|
+
function updateFunctionComponent(current, workInProgress2, Component, nextProps, renderLanes2) {
|
|
5798
5798
|
prepareToReadContext(workInProgress2);
|
|
5799
|
-
|
|
5799
|
+
Component = renderWithHooks(
|
|
5800
5800
|
current,
|
|
5801
5801
|
workInProgress2,
|
|
5802
|
-
|
|
5802
|
+
Component,
|
|
5803
5803
|
nextProps,
|
|
5804
5804
|
void 0,
|
|
5805
5805
|
renderLanes2
|
|
@@ -5809,33 +5809,33 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5809
5809
|
return bailoutHooks(current, workInProgress2, renderLanes2), bailoutOnAlreadyFinishedWork(current, workInProgress2, renderLanes2);
|
|
5810
5810
|
isHydrating && nextProps && pushMaterializedTreeId(workInProgress2);
|
|
5811
5811
|
workInProgress2.flags |= 1;
|
|
5812
|
-
reconcileChildren(current, workInProgress2,
|
|
5812
|
+
reconcileChildren(current, workInProgress2, Component, renderLanes2);
|
|
5813
5813
|
return workInProgress2.child;
|
|
5814
5814
|
}
|
|
5815
|
-
function replayFunctionComponent(current, workInProgress2, nextProps,
|
|
5815
|
+
function replayFunctionComponent(current, workInProgress2, nextProps, Component, secondArg, renderLanes2) {
|
|
5816
5816
|
prepareToReadContext(workInProgress2);
|
|
5817
5817
|
workInProgress2.updateQueue = null;
|
|
5818
5818
|
nextProps = renderWithHooksAgain(
|
|
5819
5819
|
workInProgress2,
|
|
5820
|
-
|
|
5820
|
+
Component,
|
|
5821
5821
|
nextProps,
|
|
5822
5822
|
secondArg
|
|
5823
5823
|
);
|
|
5824
5824
|
finishRenderingHooks(current);
|
|
5825
|
-
|
|
5825
|
+
Component = checkDidRenderIdHook();
|
|
5826
5826
|
if (null !== current && !didReceiveUpdate)
|
|
5827
5827
|
return bailoutHooks(current, workInProgress2, renderLanes2), bailoutOnAlreadyFinishedWork(current, workInProgress2, renderLanes2);
|
|
5828
|
-
isHydrating &&
|
|
5828
|
+
isHydrating && Component && pushMaterializedTreeId(workInProgress2);
|
|
5829
5829
|
workInProgress2.flags |= 1;
|
|
5830
5830
|
reconcileChildren(current, workInProgress2, nextProps, renderLanes2);
|
|
5831
5831
|
return workInProgress2.child;
|
|
5832
5832
|
}
|
|
5833
|
-
function updateClassComponent(current, workInProgress2,
|
|
5833
|
+
function updateClassComponent(current, workInProgress2, Component, nextProps, renderLanes2) {
|
|
5834
5834
|
prepareToReadContext(workInProgress2);
|
|
5835
5835
|
if (null === workInProgress2.stateNode) {
|
|
5836
|
-
var context = emptyContextObject, contextType =
|
|
5836
|
+
var context = emptyContextObject, contextType = Component.contextType;
|
|
5837
5837
|
"object" === typeof contextType && null !== contextType && (context = readContext(contextType));
|
|
5838
|
-
context = new
|
|
5838
|
+
context = new Component(nextProps, context);
|
|
5839
5839
|
workInProgress2.memoizedState = null !== context.state && void 0 !== context.state ? context.state : null;
|
|
5840
5840
|
context.updater = classComponentUpdater;
|
|
5841
5841
|
workInProgress2.stateNode = context;
|
|
@@ -5845,27 +5845,27 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5845
5845
|
context.state = workInProgress2.memoizedState;
|
|
5846
5846
|
context.refs = {};
|
|
5847
5847
|
initializeUpdateQueue(workInProgress2);
|
|
5848
|
-
contextType =
|
|
5848
|
+
contextType = Component.contextType;
|
|
5849
5849
|
context.context = "object" === typeof contextType && null !== contextType ? readContext(contextType) : emptyContextObject;
|
|
5850
5850
|
context.state = workInProgress2.memoizedState;
|
|
5851
|
-
contextType =
|
|
5851
|
+
contextType = Component.getDerivedStateFromProps;
|
|
5852
5852
|
"function" === typeof contextType && (applyDerivedStateFromProps(
|
|
5853
5853
|
workInProgress2,
|
|
5854
|
-
|
|
5854
|
+
Component,
|
|
5855
5855
|
contextType,
|
|
5856
5856
|
nextProps
|
|
5857
5857
|
), context.state = workInProgress2.memoizedState);
|
|
5858
|
-
"function" === typeof
|
|
5858
|
+
"function" === typeof Component.getDerivedStateFromProps || "function" === typeof context.getSnapshotBeforeUpdate || "function" !== typeof context.UNSAFE_componentWillMount && "function" !== typeof context.componentWillMount || (contextType = context.state, "function" === typeof context.componentWillMount && context.componentWillMount(), "function" === typeof context.UNSAFE_componentWillMount && context.UNSAFE_componentWillMount(), contextType !== context.state && classComponentUpdater.enqueueReplaceState(context, context.state, null), processUpdateQueue(workInProgress2, nextProps, context, renderLanes2), suspendIfUpdateReadFromEntangledAsyncAction(), context.state = workInProgress2.memoizedState);
|
|
5859
5859
|
"function" === typeof context.componentDidMount && (workInProgress2.flags |= 4194308);
|
|
5860
5860
|
nextProps = true;
|
|
5861
5861
|
} else if (null === current) {
|
|
5862
5862
|
context = workInProgress2.stateNode;
|
|
5863
|
-
var unresolvedOldProps = workInProgress2.memoizedProps, oldProps = resolveClassComponentProps(
|
|
5863
|
+
var unresolvedOldProps = workInProgress2.memoizedProps, oldProps = resolveClassComponentProps(Component, unresolvedOldProps);
|
|
5864
5864
|
context.props = oldProps;
|
|
5865
|
-
var oldContext = context.context, contextType$jscomp$0 =
|
|
5865
|
+
var oldContext = context.context, contextType$jscomp$0 = Component.contextType;
|
|
5866
5866
|
contextType = emptyContextObject;
|
|
5867
5867
|
"object" === typeof contextType$jscomp$0 && null !== contextType$jscomp$0 && (contextType = readContext(contextType$jscomp$0));
|
|
5868
|
-
var getDerivedStateFromProps =
|
|
5868
|
+
var getDerivedStateFromProps = Component.getDerivedStateFromProps;
|
|
5869
5869
|
contextType$jscomp$0 = "function" === typeof getDerivedStateFromProps || "function" === typeof context.getSnapshotBeforeUpdate;
|
|
5870
5870
|
unresolvedOldProps = workInProgress2.pendingProps !== unresolvedOldProps;
|
|
5871
5871
|
contextType$jscomp$0 || "function" !== typeof context.UNSAFE_componentWillReceiveProps && "function" !== typeof context.componentWillReceiveProps || (unresolvedOldProps || oldContext !== contextType) && callComponentWillReceiveProps(
|
|
@@ -5882,12 +5882,12 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5882
5882
|
oldContext = workInProgress2.memoizedState;
|
|
5883
5883
|
unresolvedOldProps || oldState !== oldContext || hasForceUpdate ? ("function" === typeof getDerivedStateFromProps && (applyDerivedStateFromProps(
|
|
5884
5884
|
workInProgress2,
|
|
5885
|
-
|
|
5885
|
+
Component,
|
|
5886
5886
|
getDerivedStateFromProps,
|
|
5887
5887
|
nextProps
|
|
5888
5888
|
), oldContext = workInProgress2.memoizedState), (oldProps = hasForceUpdate || checkShouldComponentUpdate(
|
|
5889
5889
|
workInProgress2,
|
|
5890
|
-
|
|
5890
|
+
Component,
|
|
5891
5891
|
oldProps,
|
|
5892
5892
|
nextProps,
|
|
5893
5893
|
oldState,
|
|
@@ -5898,14 +5898,14 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5898
5898
|
context = workInProgress2.stateNode;
|
|
5899
5899
|
cloneUpdateQueue(current, workInProgress2);
|
|
5900
5900
|
contextType = workInProgress2.memoizedProps;
|
|
5901
|
-
contextType$jscomp$0 = resolveClassComponentProps(
|
|
5901
|
+
contextType$jscomp$0 = resolveClassComponentProps(Component, contextType);
|
|
5902
5902
|
context.props = contextType$jscomp$0;
|
|
5903
5903
|
getDerivedStateFromProps = workInProgress2.pendingProps;
|
|
5904
5904
|
oldState = context.context;
|
|
5905
|
-
oldContext =
|
|
5905
|
+
oldContext = Component.contextType;
|
|
5906
5906
|
oldProps = emptyContextObject;
|
|
5907
5907
|
"object" === typeof oldContext && null !== oldContext && (oldProps = readContext(oldContext));
|
|
5908
|
-
unresolvedOldProps =
|
|
5908
|
+
unresolvedOldProps = Component.getDerivedStateFromProps;
|
|
5909
5909
|
(oldContext = "function" === typeof unresolvedOldProps || "function" === typeof context.getSnapshotBeforeUpdate) || "function" !== typeof context.UNSAFE_componentWillReceiveProps && "function" !== typeof context.componentWillReceiveProps || (contextType !== getDerivedStateFromProps || oldState !== oldProps) && callComponentWillReceiveProps(
|
|
5910
5910
|
workInProgress2,
|
|
5911
5911
|
context,
|
|
@@ -5920,12 +5920,12 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5920
5920
|
var newState = workInProgress2.memoizedState;
|
|
5921
5921
|
contextType !== getDerivedStateFromProps || oldState !== newState || hasForceUpdate || null !== current && null !== current.dependencies && checkIfContextChanged(current.dependencies) ? ("function" === typeof unresolvedOldProps && (applyDerivedStateFromProps(
|
|
5922
5922
|
workInProgress2,
|
|
5923
|
-
|
|
5923
|
+
Component,
|
|
5924
5924
|
unresolvedOldProps,
|
|
5925
5925
|
nextProps
|
|
5926
5926
|
), newState = workInProgress2.memoizedState), (contextType$jscomp$0 = hasForceUpdate || checkShouldComponentUpdate(
|
|
5927
5927
|
workInProgress2,
|
|
5928
|
-
|
|
5928
|
+
Component,
|
|
5929
5929
|
contextType$jscomp$0,
|
|
5930
5930
|
nextProps,
|
|
5931
5931
|
oldState,
|
|
@@ -5940,7 +5940,7 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5940
5940
|
context = nextProps;
|
|
5941
5941
|
markRef(current, workInProgress2);
|
|
5942
5942
|
nextProps = 0 !== (workInProgress2.flags & 128);
|
|
5943
|
-
context || nextProps ? (context = workInProgress2.stateNode,
|
|
5943
|
+
context || nextProps ? (context = workInProgress2.stateNode, Component = nextProps && "function" !== typeof Component.getDerivedStateFromError ? null : context.render(), workInProgress2.flags |= 1, null !== current && nextProps ? (workInProgress2.child = reconcileChildFibers(
|
|
5944
5944
|
workInProgress2,
|
|
5945
5945
|
current.child,
|
|
5946
5946
|
null,
|
|
@@ -5948,9 +5948,9 @@ var require_react_dom_client_production = __commonJS({
|
|
|
5948
5948
|
), workInProgress2.child = reconcileChildFibers(
|
|
5949
5949
|
workInProgress2,
|
|
5950
5950
|
null,
|
|
5951
|
-
|
|
5951
|
+
Component,
|
|
5952
5952
|
renderLanes2
|
|
5953
|
-
)) : reconcileChildren(current, workInProgress2,
|
|
5953
|
+
)) : reconcileChildren(current, workInProgress2, Component, renderLanes2), workInProgress2.memoizedState = context.state, current = workInProgress2.child) : current = bailoutOnAlreadyFinishedWork(
|
|
5954
5954
|
current,
|
|
5955
5955
|
workInProgress2,
|
|
5956
5956
|
renderLanes2
|
|
@@ -19674,12 +19674,15 @@ var require_jsx_runtime = __commonJS({
|
|
|
19674
19674
|
});
|
|
19675
19675
|
|
|
19676
19676
|
// hub-preview-client/main.tsx
|
|
19677
|
-
var
|
|
19677
|
+
var import_react43 = __toESM(require_react(), 1);
|
|
19678
19678
|
var import_client = __toESM(require_client(), 1);
|
|
19679
19679
|
|
|
19680
|
-
// ../
|
|
19681
|
-
var
|
|
19682
|
-
var
|
|
19680
|
+
// ../mcp-apps-react/dist/chunk-7P6ASYW6.mjs
|
|
19681
|
+
var __defProp2 = Object.defineProperty;
|
|
19682
|
+
var __export2 = (target, all) => {
|
|
19683
|
+
for (var name in all)
|
|
19684
|
+
__defProp2(target, name, { get: all[name], enumerable: true });
|
|
19685
|
+
};
|
|
19683
19686
|
|
|
19684
19687
|
// ../protocol/dist/version.js
|
|
19685
19688
|
var PROTOCOL_VERSION = "draft-2026-06-12";
|
|
@@ -34209,7 +34212,7 @@ config(en_default());
|
|
|
34209
34212
|
|
|
34210
34213
|
// ../protocol/dist/gadgets/stdlib-gadgets.js
|
|
34211
34214
|
var STDLIB_GADGETS_PACKAGE = "@ggui-ai/gadgets";
|
|
34212
|
-
var STDLIB_GADGETS_VERSION = "0.
|
|
34215
|
+
var STDLIB_GADGETS_VERSION = "0.9.0";
|
|
34213
34216
|
var STDLIB_GADGETS = [
|
|
34214
34217
|
{
|
|
34215
34218
|
package: STDLIB_GADGETS_PACKAGE,
|
|
@@ -34826,10 +34829,11 @@ var renderErrorCodeSchema = external_exports.enum([
|
|
|
34826
34829
|
"PRODUCTION_FAILED",
|
|
34827
34830
|
"VALIDATION_ERROR",
|
|
34828
34831
|
"NO_PLATFORM_KEY",
|
|
34829
|
-
"NO_CREDENTIALS"
|
|
34832
|
+
"NO_CREDENTIALS",
|
|
34833
|
+
"GENERATION_QUEUE_OVERLOADED"
|
|
34830
34834
|
]);
|
|
34831
34835
|
var renderErrorSchema = external_exports.object({
|
|
34832
|
-
code: renderErrorCodeSchema.describe("Canonical failure class. PRODUCTION_FAILED: generation did not produce a component. VALIDATION_ERROR: a server-side precondition rejected the render before generation. NO_PLATFORM_KEY: the server's managed provider-key configuration has no key for the resolved route. NO_CREDENTIALS: no generation credentials are configured on the server."),
|
|
34836
|
+
code: renderErrorCodeSchema.describe("Canonical failure class. PRODUCTION_FAILED: generation did not produce a component. VALIDATION_ERROR: a server-side precondition rejected the render before generation. NO_PLATFORM_KEY: the server's managed provider-key configuration has no key for the resolved route. NO_CREDENTIALS: no generation credentials are configured on the server. GENERATION_QUEUE_OVERLOADED: the deployment's admission gate rejected the request before generation started (queue full or wait timed out) \u2014 not a failed attempt; safe to retry immediately."),
|
|
34833
34837
|
message: external_exports.string().describe("Human-readable failure detail \u2014 fold into the next attempt or surface to the operator.")
|
|
34834
34838
|
});
|
|
34835
34839
|
var resourceReadErrorCodeSchema = external_exports.enum([
|
|
@@ -34887,33 +34891,78 @@ var renderOutputSchema = external_exports.object({
|
|
|
34887
34891
|
description: external_exports.string(),
|
|
34888
34892
|
example: external_exports.string(),
|
|
34889
34893
|
args: external_exports.object({
|
|
34890
|
-
sessionId: external_exports.string()
|
|
34894
|
+
sessionId: external_exports.string(),
|
|
34895
|
+
// The per-call long-poll window in seconds. Carried on the hint
|
|
34896
|
+
// because consume's own default is 0 (single non-blocking
|
|
34897
|
+
// drain): an agent copying a timeout-less hint gets an instant
|
|
34898
|
+
// empty result and stops looping.
|
|
34899
|
+
timeout: external_exports.number()
|
|
34891
34900
|
})
|
|
34892
|
-
}).optional().describe("
|
|
34901
|
+
}).optional().describe("Required-next-call hint \u2014 when the rendered contract has actions, points the agent at ggui_consume({sessionId, timeout}) for the inbound action loop. Absent for pure-display renders.")
|
|
34893
34902
|
});
|
|
34894
34903
|
var updateInputSchema = external_exports.discriminatedUnion("kind", [
|
|
34895
34904
|
external_exports.object({
|
|
34896
34905
|
sessionId: external_exports.string().describe("GguiSession opaque id (UUID) \u2014 returned by ggui_render."),
|
|
34897
34906
|
kind: external_exports.literal("replace"),
|
|
34898
|
-
props: external_exports.record(external_exports.string(), external_exports.unknown()).describe("Full replacement props map. New map IS the new state.")
|
|
34907
|
+
props: external_exports.record(external_exports.string(), external_exports.unknown()).describe("Full replacement props map. New map IS the new state, rendered as a NEW card (a new history entry). For an in-place repaint of the mounted card use ggui_amend.")
|
|
34908
|
+
}).strict(),
|
|
34909
|
+
external_exports.object({
|
|
34910
|
+
sessionId: external_exports.string().describe("GguiSession opaque id (UUID) \u2014 returned by ggui_render."),
|
|
34911
|
+
kind: external_exports.literal("merge"),
|
|
34912
|
+
patch: external_exports.record(external_exports.string(), external_exports.unknown()).describe("RFC 7396 JSON Merge Patch \u2014 null deletes a key; arrays fully replace. The merged state renders as a NEW card (a new history entry). For an in-place repaint of the mounted card use ggui_amend.")
|
|
34913
|
+
}).strict()
|
|
34914
|
+
]);
|
|
34915
|
+
var amendInputSchema = external_exports.discriminatedUnion("kind", [
|
|
34916
|
+
external_exports.object({
|
|
34917
|
+
sessionId: external_exports.string().describe("GguiSession opaque id (UUID) \u2014 returned by ggui_render."),
|
|
34918
|
+
kind: external_exports.literal("replace"),
|
|
34919
|
+
props: external_exports.record(external_exports.string(), external_exports.unknown()).describe("Full replacement props map, applied to the currently mounted card in place.")
|
|
34899
34920
|
}).strict(),
|
|
34900
34921
|
external_exports.object({
|
|
34901
34922
|
sessionId: external_exports.string().describe("GguiSession opaque id (UUID) \u2014 returned by ggui_render."),
|
|
34902
34923
|
kind: external_exports.literal("merge"),
|
|
34903
|
-
patch: external_exports.record(external_exports.string(), external_exports.unknown()).describe("RFC 7396 JSON Merge Patch \u2014 null deletes a key; arrays fully replace.")
|
|
34924
|
+
patch: external_exports.record(external_exports.string(), external_exports.unknown()).describe("RFC 7396 JSON Merge Patch \u2014 null deletes a key; arrays fully replace. Applied to the currently mounted card in place.")
|
|
34904
34925
|
}).strict()
|
|
34905
34926
|
]);
|
|
34906
34927
|
var updateOutputSchema = external_exports.object({
|
|
34907
34928
|
sessionId: external_exports.string(),
|
|
34908
34929
|
updated: external_exports.boolean(),
|
|
34909
34930
|
/**
|
|
34910
|
-
*
|
|
34911
|
-
*
|
|
34912
|
-
*
|
|
34931
|
+
* The epoch-pinned URI of the NEW history record this update minted
|
|
34932
|
+
* (`ui://ggui/render/{id}[/{key}]#{epoch}` — see epoch-uri.ts). On a
|
|
34933
|
+
* no-op (`updated: false`) no record is minted and this is the bare
|
|
34934
|
+
* live-head URI. Mirrored on the LLM-visible structuredContent so
|
|
34935
|
+
* SDKs that strip `_meta` from tool_results can still reach the
|
|
34913
34936
|
* mount URI. Kept in sync with the update handler's wire shape —
|
|
34914
34937
|
* this export and the handler's inline schema must not drift.
|
|
34915
34938
|
*/
|
|
34916
|
-
resourceUri: external_exports.string()
|
|
34939
|
+
resourceUri: external_exports.string(),
|
|
34940
|
+
/**
|
|
34941
|
+
* The session's head epoch after this call: advanced by one on a
|
|
34942
|
+
* real update (`updated: true`), unchanged on a no-op. `ggui_render`
|
|
34943
|
+
* mints epoch 0. The session ROW is the authority
|
|
34944
|
+
* (`GguiSessionBase.epoch`, absent ⇒ 0); the ledger's `ui.reminted`
|
|
34945
|
+
* events are the wire signal only — the ledger is horizon-bounded
|
|
34946
|
+
* and must never be counted as the source of truth.
|
|
34947
|
+
*/
|
|
34948
|
+
epoch: external_exports.number().int().min(0),
|
|
34949
|
+
/**
|
|
34950
|
+
* Present ONLY on a no-op (`updated: false`): the patch conformed to
|
|
34951
|
+
* the contract but left the final props semantically identical to
|
|
34952
|
+
* the current state, so nothing was written, nothing changes on
|
|
34953
|
+
* screen, and NO new history record was minted. Model-visible by
|
|
34954
|
+
* design — the common producer of a no-op is an agent echoing
|
|
34955
|
+
* existing props back believing it changed the UI, and this field is
|
|
34956
|
+
* its feedback channel.
|
|
34957
|
+
*/
|
|
34958
|
+
warning: external_exports.string().optional()
|
|
34959
|
+
});
|
|
34960
|
+
var amendOutputSchema = external_exports.object({
|
|
34961
|
+
sessionId: external_exports.string(),
|
|
34962
|
+
updated: external_exports.boolean(),
|
|
34963
|
+
resourceUri: external_exports.string(),
|
|
34964
|
+
/** Same no-op feedback channel as ggui_update's `warning`. */
|
|
34965
|
+
warning: external_exports.string().optional()
|
|
34917
34966
|
});
|
|
34918
34967
|
var declareToolCatalogInputSchema = external_exports.object({
|
|
34919
34968
|
toolCatalog: external_exports.record(external_exports.string(), external_exports.object({ name: external_exports.string(), version: external_exports.string().optional() }).strict()).describe("Per-app canonical tool identities: bare tool name -> its server's initialize-declared serverInfo. Host/library-supplied; not an agent action.")
|
|
@@ -34922,6 +34971,45 @@ var declareToolCatalogOutputSchema = external_exports.object({
|
|
|
34922
34971
|
saved: external_exports.boolean(),
|
|
34923
34972
|
appId: external_exports.string()
|
|
34924
34973
|
}).strict();
|
|
34974
|
+
var RUNTIME_PULL_MAX_LIMIT = 100;
|
|
34975
|
+
var RUNTIME_PULL_MAX_WAIT_SECONDS = 20;
|
|
34976
|
+
var gguiSessionEventSchema = external_exports.object({
|
|
34977
|
+
seq: external_exports.number().int().min(1).describe('Monotonic, gap-free per render; starts at 1 (0 is the "no events yet" cursor sentinel, never an event).'),
|
|
34978
|
+
type: external_exports.string().min(1).describe("Wire-frame type \u2014 see the canonical GguiSessionEventType taxonomy; plain string so servers can mint new types without a protocol bump."),
|
|
34979
|
+
timestamp: external_exports.string().describe("ISO 8601 UTC timestamp the server stamped on emission."),
|
|
34980
|
+
data: external_exports.unknown().describe("Type-specific payload \u2014 structurally identical to the matching live-channel frame payload.")
|
|
34981
|
+
});
|
|
34982
|
+
var runtimePullInputShape = {
|
|
34983
|
+
sessionId: external_exports.string().min(1).describe('Active render id \u2014 sourced from `_meta["ai.ggui/render"].sessionId` on the iframe boot envelope. Unknown and cross-tenant ids surface uniformly as session_not_found.'),
|
|
34984
|
+
sinceSequence: external_exports.number().int().min(0).optional().describe("Replay cursor \u2014 only events with seq > sinceSequence return. Omit (= 0) on first pull; advance to the last event's seq (or lastSequence on an empty page) on every subsequent pull."),
|
|
34985
|
+
limit: external_exports.number().int().min(1).optional().describe(`Max events per page. Values above ${RUNTIME_PULL_MAX_LIMIT} are clamped to ${RUNTIME_PULL_MAX_LIMIT}; omit for the default ${RUNTIME_PULL_MAX_LIMIT}. When hasMore is true, immediately re-pull with the advanced cursor.`),
|
|
34986
|
+
wait: external_exports.number().min(0).optional().describe(`Subscription-mode hold, in seconds. When set and the cursor page is empty, the server holds this call until an event lands or the hold elapses (values above ${RUNTIME_PULL_MAX_WAIT_SECONDS} are clamped to ${RUNTIME_PULL_MAX_WAIT_SECONDS}). An empty page after a full hold is a NORMAL result \u2014 immediately re-pull to stay subscribed, or back off to sparse un-held pulls after a few consecutive empties. Omit (= 0) for an immediate return.`)
|
|
34987
|
+
};
|
|
34988
|
+
var runtimePullInputSchema = external_exports.object(runtimePullInputShape);
|
|
34989
|
+
var runtimePullEventsPageSchema = external_exports.object({
|
|
34990
|
+
events: external_exports.array(gguiSessionEventSchema),
|
|
34991
|
+
lastSequence: external_exports.number().int().min(0),
|
|
34992
|
+
hasMore: external_exports.boolean()
|
|
34993
|
+
});
|
|
34994
|
+
var runtimePullHorizonSchema = external_exports.object({
|
|
34995
|
+
reason: external_exports.literal("REPLAY_HORIZON_PASSED"),
|
|
34996
|
+
currentSequence: external_exports.number().int().min(0)
|
|
34997
|
+
});
|
|
34998
|
+
var runtimePullOutputSchema = external_exports.union([
|
|
34999
|
+
runtimePullEventsPageSchema,
|
|
35000
|
+
runtimePullHorizonSchema
|
|
35001
|
+
]);
|
|
35002
|
+
var RUNTIME_TELEMETRY_MAX_EVENTS = 40;
|
|
35003
|
+
var runtimeTelemetryInputShape = {
|
|
35004
|
+
sessionId: external_exports.string().min(1).describe("Render id the report concerns \u2014 sourced from the boot envelope. Client-claimed: used as a log tag only."),
|
|
35005
|
+
events: external_exports.array(external_exports.object({
|
|
35006
|
+
at: external_exports.number().min(0).describe("Milliseconds since iframe boot (monotonic, client clock)."),
|
|
35007
|
+
kind: external_exports.string().min(1).max(64).describe("Event name \u2014 e.g. 'boot.path', 'status.connected', 'channel_failover_swap', 'doorbell.ring'."),
|
|
35008
|
+
detail: external_exports.string().max(512).optional().describe("Optional compact context (JSON fragment or message).")
|
|
35009
|
+
})).min(1).max(RUNTIME_TELEMETRY_MAX_EVENTS).describe("Batched ladder/doorbell events, oldest first.")
|
|
35010
|
+
};
|
|
35011
|
+
var runtimeTelemetryInputSchema = external_exports.object(runtimeTelemetryInputShape);
|
|
35012
|
+
var runtimeTelemetryOutputSchema = external_exports.object({ ok: external_exports.literal(true) });
|
|
34925
35013
|
|
|
34926
35014
|
// ../protocol/dist/schemas/invoke.js
|
|
34927
35015
|
var textBlockSchema = external_exports.object({
|
|
@@ -35559,24 +35647,10 @@ function validateActionEnvelope(envelope, spec, precompiledActions) {
|
|
|
35559
35647
|
return validateActionData(envelope.payload, spec, precompiledActions);
|
|
35560
35648
|
}
|
|
35561
35649
|
|
|
35562
|
-
// ../
|
|
35563
|
-
var
|
|
35564
|
-
var
|
|
35565
|
-
var
|
|
35566
|
-
var KNOWN_PERMISSION_NAMES_SET2 = new Set(KNOWN_PERMISSION_NAMES);
|
|
35567
|
-
var DECODER = new TextDecoder();
|
|
35568
|
-
|
|
35569
|
-
// ../ggui-react/dist/chunk-7P6ASYW6.mjs
|
|
35570
|
-
var __defProp2 = Object.defineProperty;
|
|
35571
|
-
var __export2 = (target, all) => {
|
|
35572
|
-
for (var name in all)
|
|
35573
|
-
__defProp2(target, name, { get: all[name], enumerable: true });
|
|
35574
|
-
};
|
|
35575
|
-
|
|
35576
|
-
// ../ggui-react/dist/index.mjs
|
|
35577
|
-
var import_react8 = __toESM(require_react(), 1);
|
|
35578
|
-
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
|
|
35579
|
-
var import_react9 = __toESM(require_react(), 1);
|
|
35650
|
+
// ../mcp-apps-react/dist/index.mjs
|
|
35651
|
+
var import_react5 = __toESM(require_react(), 1);
|
|
35652
|
+
var import_react6 = __toESM(require_react(), 1);
|
|
35653
|
+
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
|
|
35580
35654
|
|
|
35581
35655
|
// ../wire/dist/index.js
|
|
35582
35656
|
var dist_exports = {};
|
|
@@ -35602,13 +35676,13 @@ __export(dist_exports, {
|
|
|
35602
35676
|
});
|
|
35603
35677
|
|
|
35604
35678
|
// ../wire/dist/WireProvider.js
|
|
35605
|
-
var
|
|
35679
|
+
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
|
|
35606
35680
|
|
|
35607
35681
|
// ../wire/dist/context.js
|
|
35608
|
-
var
|
|
35609
|
-
var WireContext = (0,
|
|
35682
|
+
var import_react = __toESM(require_react(), 1);
|
|
35683
|
+
var WireContext = (0, import_react.createContext)(null);
|
|
35610
35684
|
function useWireContext() {
|
|
35611
|
-
const ctx = (0,
|
|
35685
|
+
const ctx = (0, import_react.useContext)(WireContext);
|
|
35612
35686
|
if (!ctx) {
|
|
35613
35687
|
throw new Error("useWireContext must be used within a WireProvider. Ensure the component is rendered inside a GguiWireProvider.");
|
|
35614
35688
|
}
|
|
@@ -35617,11 +35691,11 @@ function useWireContext() {
|
|
|
35617
35691
|
|
|
35618
35692
|
// ../wire/dist/WireProvider.js
|
|
35619
35693
|
function GguiWireProvider({ config: config2, children }) {
|
|
35620
|
-
return (0,
|
|
35694
|
+
return (0, import_jsx_runtime.jsx)(WireContext.Provider, { value: config2, children });
|
|
35621
35695
|
}
|
|
35622
35696
|
|
|
35623
35697
|
// ../wire/dist/useAction.js
|
|
35624
|
-
var
|
|
35698
|
+
var import_react2 = __toESM(require_react(), 1);
|
|
35625
35699
|
|
|
35626
35700
|
// ../wire/dist/dispatch-dedup.js
|
|
35627
35701
|
var pendingDispatches = /* @__PURE__ */ new Set();
|
|
@@ -35655,7 +35729,7 @@ function tryAcceptDispatch(actionName, data) {
|
|
|
35655
35729
|
// ../wire/dist/useAction.js
|
|
35656
35730
|
function useAction(actionName) {
|
|
35657
35731
|
const { dispatch, onDispatchSuppressed } = useWireContext();
|
|
35658
|
-
return (0,
|
|
35732
|
+
return (0, import_react2.useCallback)((data) => {
|
|
35659
35733
|
const decision = tryAcceptDispatch(actionName, data);
|
|
35660
35734
|
if (decision.suppressed) {
|
|
35661
35735
|
console.warn(`[ggui] useAction('${actionName}') suppressed a duplicate dispatch (same name + payload, same event-loop task). This usually means two interactive elements nest and both wire to the same action (e.g. a Checkbox onChange inside a Card as={Clickable} onClick); the inner gesture bubbles to the outer handler so one user click would fire the action twice. Wire each useAction callback to exactly ONE interactive surface. Tier-0 'double-wired-action' warns on this at gen time; this runtime defense ensures the user-visible behavior stays correct regardless of code shape.`);
|
|
@@ -35678,7 +35752,7 @@ function useAction(actionName) {
|
|
|
35678
35752
|
}
|
|
35679
35753
|
|
|
35680
35754
|
// ../wire/dist/useGguiContext.js
|
|
35681
|
-
var
|
|
35755
|
+
var import_react3 = __toESM(require_react(), 1);
|
|
35682
35756
|
function useGguiContext(slotName) {
|
|
35683
35757
|
const contextName = slotName.length === 0 ? "Context" : slotName.charAt(0).toUpperCase() + slotName.slice(1) + "Context";
|
|
35684
35758
|
const registry2 = globalThis.__ggui__?.contexts;
|
|
@@ -35686,19 +35760,19 @@ function useGguiContext(slotName) {
|
|
|
35686
35760
|
if (!ctx) {
|
|
35687
35761
|
throw new Error(`[ggui] useGguiContext('${slotName}'): no Context registered. The contract must declare 'contextSpec.${slotName}' AND the runtime must have synthesized the per-slot React Context at boot. If you see this in production code generated by the LLM, the boilerplate's destructure line drifted from the contract.`);
|
|
35688
35762
|
}
|
|
35689
|
-
return (0,
|
|
35763
|
+
return (0, import_react3.useContext)(ctx);
|
|
35690
35764
|
}
|
|
35691
35765
|
|
|
35692
35766
|
// ../wire/dist/useStream.js
|
|
35693
|
-
var
|
|
35767
|
+
var import_react4 = __toESM(require_react(), 1);
|
|
35694
35768
|
function useStream(channelName) {
|
|
35695
35769
|
const { subscribe } = useWireContext();
|
|
35696
|
-
const [latest, setLatest] = (0,
|
|
35697
|
-
const [all, setAll] = (0,
|
|
35698
|
-
const [isComplete, setIsComplete] = (0,
|
|
35699
|
-
const allRef = (0,
|
|
35770
|
+
const [latest, setLatest] = (0, import_react4.useState)(null);
|
|
35771
|
+
const [all, setAll] = (0, import_react4.useState)([]);
|
|
35772
|
+
const [isComplete, setIsComplete] = (0, import_react4.useState)(false);
|
|
35773
|
+
const allRef = (0, import_react4.useRef)(all);
|
|
35700
35774
|
allRef.current = all;
|
|
35701
|
-
(0,
|
|
35775
|
+
(0, import_react4.useEffect)(() => {
|
|
35702
35776
|
return subscribe(channelName, (delivery) => {
|
|
35703
35777
|
const typed = delivery.payload;
|
|
35704
35778
|
setLatest(typed);
|
|
@@ -35871,243 +35945,104 @@ function buildWireConfig(opts) {
|
|
|
35871
35945
|
};
|
|
35872
35946
|
}
|
|
35873
35947
|
|
|
35874
|
-
// ../
|
|
35875
|
-
var
|
|
35876
|
-
|
|
35877
|
-
|
|
35878
|
-
var
|
|
35879
|
-
id: external_exports.string().min(1)
|
|
35880
|
-
});
|
|
35881
|
-
var ComponentRef = external_exports.string().min(1);
|
|
35882
|
-
var Align = external_exports.enum(["start", "center", "end", "stretch"]);
|
|
35883
|
-
var Justify = external_exports.enum([
|
|
35884
|
-
"start",
|
|
35885
|
-
"center",
|
|
35886
|
-
"end",
|
|
35887
|
-
"between",
|
|
35888
|
-
"around",
|
|
35889
|
-
"evenly"
|
|
35890
|
-
]);
|
|
35891
|
-
var RowComponent = ComponentBase.extend({
|
|
35892
|
-
component: external_exports.literal("Row"),
|
|
35893
|
-
children: external_exports.array(ComponentRef).optional(),
|
|
35894
|
-
gap: external_exports.string().optional(),
|
|
35895
|
-
align: Align.optional(),
|
|
35896
|
-
justify: Justify.optional()
|
|
35897
|
-
});
|
|
35898
|
-
var ColumnComponent = ComponentBase.extend({
|
|
35899
|
-
component: external_exports.literal("Column"),
|
|
35900
|
-
children: external_exports.array(ComponentRef).optional(),
|
|
35901
|
-
gap: external_exports.string().optional(),
|
|
35902
|
-
align: Align.optional(),
|
|
35903
|
-
justify: Justify.optional()
|
|
35904
|
-
});
|
|
35905
|
-
var CardComponent = ComponentBase.extend({
|
|
35906
|
-
component: external_exports.literal("Card"),
|
|
35907
|
-
child: ComponentRef.optional()
|
|
35908
|
-
});
|
|
35909
|
-
var ListComponent = ComponentBase.extend({
|
|
35910
|
-
component: external_exports.literal("List"),
|
|
35911
|
-
children: external_exports.array(ComponentRef).optional()
|
|
35912
|
-
});
|
|
35913
|
-
var DividerComponent = ComponentBase.extend({
|
|
35914
|
-
component: external_exports.literal("Divider"),
|
|
35915
|
-
orientation: external_exports.enum(["horizontal", "vertical"]).optional()
|
|
35916
|
-
});
|
|
35917
|
-
var TextComponent = ComponentBase.extend({
|
|
35918
|
-
component: external_exports.literal("Text"),
|
|
35919
|
-
text: external_exports.string(),
|
|
35920
|
-
variant: external_exports.string().optional()
|
|
35921
|
-
});
|
|
35922
|
-
var ImageComponent = ComponentBase.extend({
|
|
35923
|
-
component: external_exports.literal("Image"),
|
|
35924
|
-
src: external_exports.string().min(1),
|
|
35925
|
-
alt: external_exports.string().optional()
|
|
35926
|
-
});
|
|
35927
|
-
var IconComponent = ComponentBase.extend({
|
|
35928
|
-
component: external_exports.literal("Icon"),
|
|
35929
|
-
name: external_exports.string().min(1)
|
|
35930
|
-
});
|
|
35931
|
-
var ButtonComponent = ComponentBase.extend({
|
|
35932
|
-
component: external_exports.literal("Button"),
|
|
35933
|
-
label: external_exports.string()
|
|
35934
|
-
});
|
|
35935
|
-
var TextFieldComponent = ComponentBase.extend({
|
|
35936
|
-
component: external_exports.literal("TextField"),
|
|
35937
|
-
label: external_exports.string().optional(),
|
|
35938
|
-
placeholder: external_exports.string().optional(),
|
|
35939
|
-
value: external_exports.string().optional()
|
|
35940
|
-
});
|
|
35941
|
-
var CheckBoxComponent = ComponentBase.extend({
|
|
35942
|
-
component: external_exports.literal("CheckBox"),
|
|
35943
|
-
label: external_exports.string().optional(),
|
|
35944
|
-
checked: external_exports.boolean().optional()
|
|
35945
|
-
});
|
|
35946
|
-
var ChoicePickerOption = external_exports.object({
|
|
35947
|
-
label: external_exports.string(),
|
|
35948
|
-
value: external_exports.string()
|
|
35949
|
-
});
|
|
35950
|
-
var ChoicePickerComponent = ComponentBase.extend({
|
|
35951
|
-
component: external_exports.literal("ChoicePicker"),
|
|
35952
|
-
label: external_exports.string().optional(),
|
|
35953
|
-
options: external_exports.array(ChoicePickerOption).optional(),
|
|
35954
|
-
value: external_exports.string().optional()
|
|
35955
|
-
});
|
|
35956
|
-
var ComponentSchema = external_exports.discriminatedUnion("component", [
|
|
35957
|
-
RowComponent,
|
|
35958
|
-
ColumnComponent,
|
|
35959
|
-
CardComponent,
|
|
35960
|
-
ListComponent,
|
|
35961
|
-
DividerComponent,
|
|
35962
|
-
TextComponent,
|
|
35963
|
-
ImageComponent,
|
|
35964
|
-
IconComponent,
|
|
35965
|
-
ButtonComponent,
|
|
35966
|
-
TextFieldComponent,
|
|
35967
|
-
CheckBoxComponent,
|
|
35968
|
-
ChoicePickerComponent
|
|
35969
|
-
]);
|
|
35970
|
-
|
|
35971
|
-
// ../preview-a2ui/dist/messages.js
|
|
35972
|
-
var A2UI_MESSAGE_VERSION = "v0.9";
|
|
35973
|
-
var VersionLiteral = external_exports.literal(A2UI_MESSAGE_VERSION);
|
|
35974
|
-
var SurfaceId = external_exports.string().min(1);
|
|
35975
|
-
var CreateSurfaceMessageSchema = external_exports.object({
|
|
35976
|
-
version: VersionLiteral,
|
|
35977
|
-
createSurface: external_exports.object({
|
|
35978
|
-
surfaceId: SurfaceId,
|
|
35979
|
-
catalogId: external_exports.string().min(1)
|
|
35980
|
-
})
|
|
35981
|
-
});
|
|
35982
|
-
var UpdateComponentsMessageSchema = external_exports.object({
|
|
35983
|
-
version: VersionLiteral,
|
|
35984
|
-
updateComponents: external_exports.object({
|
|
35985
|
-
surfaceId: SurfaceId,
|
|
35986
|
-
components: external_exports.array(ComponentSchema)
|
|
35987
|
-
})
|
|
35988
|
-
});
|
|
35989
|
-
var DeleteSurfaceMessageSchema = external_exports.object({
|
|
35990
|
-
version: VersionLiteral,
|
|
35991
|
-
deleteSurface: external_exports.object({
|
|
35992
|
-
surfaceId: SurfaceId
|
|
35993
|
-
})
|
|
35994
|
-
});
|
|
35995
|
-
var ServerMessageSchema = external_exports.union([
|
|
35996
|
-
CreateSurfaceMessageSchema,
|
|
35997
|
-
UpdateComponentsMessageSchema,
|
|
35998
|
-
DeleteSurfaceMessageSchema
|
|
35999
|
-
]);
|
|
36000
|
-
|
|
36001
|
-
// ../ggui-react/dist/index.mjs
|
|
36002
|
-
var import_react11 = __toESM(require_react(), 1);
|
|
35948
|
+
// ../mcp-apps-react/dist/index.mjs
|
|
35949
|
+
var import_react7 = __toESM(require_react(), 1);
|
|
35950
|
+
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
|
|
35951
|
+
var import_react8 = __toESM(require_react(), 1);
|
|
35952
|
+
var import_react9 = __toESM(require_react(), 1);
|
|
36003
35953
|
var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
|
|
36004
|
-
var import_react12 = __toESM(require_react(), 1);
|
|
36005
35954
|
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
|
|
36006
|
-
var import_react13 = __toESM(require_react(), 1);
|
|
36007
|
-
var import_react14 = __toESM(require_react(), 1);
|
|
36008
35955
|
var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
|
|
35956
|
+
var import_react10 = __toESM(require_react(), 1);
|
|
35957
|
+
var import_react11 = __toESM(require_react(), 1);
|
|
36009
35958
|
var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
|
|
36010
35959
|
var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
|
|
36011
|
-
var import_react15 = __toESM(require_react(), 1);
|
|
36012
|
-
var import_react16 = __toESM(require_react(), 1);
|
|
36013
35960
|
var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
|
|
35961
|
+
var import_react12 = __toESM(require_react(), 1);
|
|
36014
35962
|
var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
|
|
35963
|
+
var import_react13 = __toESM(require_react(), 1);
|
|
36015
35964
|
var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
|
|
36016
|
-
var
|
|
35965
|
+
var import_react14 = __toESM(require_react(), 1);
|
|
36017
35966
|
var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
|
|
36018
|
-
var import_react18 = __toESM(require_react(), 1);
|
|
36019
35967
|
var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
|
|
36020
|
-
var
|
|
35968
|
+
var import_react15 = __toESM(require_react(), 1);
|
|
36021
35969
|
var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
|
|
35970
|
+
var import_react16 = __toESM(require_react(), 1);
|
|
36022
35971
|
var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
|
|
36023
|
-
var
|
|
35972
|
+
var import_react17 = __toESM(require_react(), 1);
|
|
36024
35973
|
var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
|
|
36025
|
-
var import_react21 = __toESM(require_react(), 1);
|
|
36026
35974
|
var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
|
|
36027
|
-
var import_react22 = __toESM(require_react(), 1);
|
|
36028
35975
|
var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
|
|
35976
|
+
var import_react18 = __toESM(require_react(), 1);
|
|
36029
35977
|
var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
|
|
36030
35978
|
var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
|
|
36031
|
-
var import_react23 = __toESM(require_react(), 1);
|
|
36032
35979
|
var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
|
|
35980
|
+
var import_react19 = __toESM(require_react(), 1);
|
|
36033
35981
|
var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
|
|
35982
|
+
var import_react20 = __toESM(require_react(), 1);
|
|
36034
35983
|
var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
|
|
36035
|
-
var import_react24 = __toESM(require_react(), 1);
|
|
36036
35984
|
var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
|
|
36037
|
-
var
|
|
35985
|
+
var import_react21 = __toESM(require_react(), 1);
|
|
36038
35986
|
var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
|
|
35987
|
+
var import_react22 = __toESM(require_react(), 1);
|
|
36039
35988
|
var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
|
|
36040
|
-
var
|
|
35989
|
+
var import_react23 = __toESM(require_react(), 1);
|
|
36041
35990
|
var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
|
|
36042
|
-
var
|
|
35991
|
+
var import_react24 = __toESM(require_react(), 1);
|
|
36043
35992
|
var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
|
|
36044
|
-
var
|
|
35993
|
+
var import_react25 = __toESM(require_react(), 1);
|
|
35994
|
+
var import_react26 = __toESM(require_react(), 1);
|
|
36045
35995
|
var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
|
|
36046
|
-
var
|
|
35996
|
+
var import_react27 = __toESM(require_react(), 1);
|
|
36047
35997
|
var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
|
|
36048
|
-
var import_react30 = __toESM(require_react(), 1);
|
|
36049
|
-
var import_react31 = __toESM(require_react(), 1);
|
|
36050
35998
|
var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
|
|
36051
|
-
var import_react32 = __toESM(require_react(), 1);
|
|
36052
35999
|
var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
|
|
36053
36000
|
var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
|
|
36001
|
+
var import_react28 = __toESM(require_react(), 1);
|
|
36054
36002
|
var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
|
|
36003
|
+
var import_react29 = __toESM(require_react(), 1);
|
|
36055
36004
|
var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
|
|
36056
|
-
var
|
|
36005
|
+
var import_react30 = __toESM(require_react(), 1);
|
|
36057
36006
|
var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
|
|
36058
|
-
var import_react34 = __toESM(require_react(), 1);
|
|
36059
36007
|
var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
|
|
36060
|
-
var import_react35 = __toESM(require_react(), 1);
|
|
36061
36008
|
var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
|
|
36062
36009
|
var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
|
|
36063
36010
|
var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
|
|
36064
36011
|
var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
|
|
36065
36012
|
var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
|
|
36013
|
+
var import_react31 = __toESM(require_react(), 1);
|
|
36066
36014
|
var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
|
|
36067
36015
|
var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
|
|
36068
|
-
var
|
|
36016
|
+
var import_react32 = __toESM(require_react(), 1);
|
|
36069
36017
|
var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
|
|
36070
36018
|
var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
|
|
36071
|
-
var
|
|
36019
|
+
var import_react33 = __toESM(require_react(), 1);
|
|
36072
36020
|
var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
|
|
36073
36021
|
var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
|
|
36074
|
-
var
|
|
36022
|
+
var import_react34 = __toESM(require_react(), 1);
|
|
36075
36023
|
var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
|
|
36076
36024
|
var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
|
|
36077
|
-
var
|
|
36025
|
+
var import_react35 = __toESM(require_react(), 1);
|
|
36078
36026
|
var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
|
|
36027
|
+
var import_react36 = __toESM(require_react(), 1);
|
|
36079
36028
|
var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
|
|
36080
|
-
var import_react40 = __toESM(require_react(), 1);
|
|
36081
36029
|
var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
|
|
36082
|
-
var import_react41 = __toESM(require_react(), 1);
|
|
36083
36030
|
var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
|
|
36031
|
+
var import_react37 = __toESM(require_react(), 1);
|
|
36084
36032
|
var import_jsx_runtime55 = __toESM(require_jsx_runtime(), 1);
|
|
36033
|
+
var import_react38 = __toESM(require_react(), 1);
|
|
36085
36034
|
var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1);
|
|
36086
|
-
var
|
|
36035
|
+
var import_react39 = __toESM(require_react(), 1);
|
|
36087
36036
|
var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
|
|
36088
|
-
var
|
|
36037
|
+
var import_react40 = __toESM(require_react(), 1);
|
|
36089
36038
|
var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
|
|
36090
|
-
var import_react44 = __toESM(require_react(), 1);
|
|
36091
36039
|
var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
|
|
36092
|
-
var
|
|
36040
|
+
var import_react41 = __toESM(require_react(), 1);
|
|
36093
36041
|
var import_jsx_runtime60 = __toESM(require_jsx_runtime(), 1);
|
|
36094
|
-
var import_react46 = __toESM(require_react(), 1);
|
|
36095
36042
|
var import_jsx_runtime61 = __toESM(require_jsx_runtime(), 1);
|
|
36096
|
-
var
|
|
36097
|
-
var
|
|
36098
|
-
var
|
|
36099
|
-
var import_jsx_runtime64 = __toESM(require_jsx_runtime(), 1);
|
|
36100
|
-
var import_react48 = __toESM(require_react(), 1);
|
|
36101
|
-
var import_react49 = __toESM(require_react(), 1);
|
|
36102
|
-
var import_jsx_runtime65 = __toESM(require_jsx_runtime(), 1);
|
|
36103
|
-
var import_react50 = __toESM(require_react(), 1);
|
|
36104
|
-
var import_jsx_runtime66 = __toESM(require_jsx_runtime(), 1);
|
|
36105
|
-
var import_jsx_runtime67 = __toESM(require_jsx_runtime(), 1);
|
|
36106
|
-
var import_react51 = __toESM(require_react(), 1);
|
|
36107
|
-
var import_jsx_runtime68 = __toESM(require_jsx_runtime(), 1);
|
|
36108
|
-
var import_react52 = __toESM(require_react(), 1);
|
|
36109
|
-
var import_jsx_runtime69 = __toESM(require_jsx_runtime(), 1);
|
|
36110
|
-
var StreamBusContext = (0, import_react11.createContext)(null);
|
|
36043
|
+
var import_react42 = __toESM(require_react(), 1);
|
|
36044
|
+
var GguiContext = (0, import_react6.createContext)(null);
|
|
36045
|
+
var KNOWN_PERMISSION_NAMES_SET2 = new Set(KNOWN_PERMISSION_NAMES);
|
|
36111
36046
|
var primitives_exports = {};
|
|
36112
36047
|
__export2(primitives_exports, {
|
|
36113
36048
|
Accordion: () => Accordion,
|
|
@@ -36220,7 +36155,7 @@ var maxWidthMap = {
|
|
|
36220
36155
|
function Container({ children, maxWidth: maxWidth2 = "lg", center = true, padding, style, className }) {
|
|
36221
36156
|
const resolvedMaxWidth = maxWidthMap[maxWidth2] || maxWidth2;
|
|
36222
36157
|
const resolvedPadding = resolveSpacing(padding);
|
|
36223
|
-
return (0,
|
|
36158
|
+
return (0, import_jsx_runtime3.jsx)("div", { className, style: {
|
|
36224
36159
|
maxWidth: resolvedMaxWidth,
|
|
36225
36160
|
margin: center ? "0 auto" : void 0,
|
|
36226
36161
|
padding: resolvedPadding,
|
|
@@ -36230,9 +36165,9 @@ function Container({ children, maxWidth: maxWidth2 = "lg", center = true, paddin
|
|
|
36230
36165
|
}
|
|
36231
36166
|
function renderWithTrait(trait, traitProps, root, children) {
|
|
36232
36167
|
if (trait === void 0) {
|
|
36233
|
-
return (0,
|
|
36168
|
+
return (0, import_react8.createElement)("div", { className: root.className, style: root.style }, children);
|
|
36234
36169
|
}
|
|
36235
|
-
return (0,
|
|
36170
|
+
return (0, import_react8.createElement)(trait, { ...traitProps, className: root.className, style: root.style }, children);
|
|
36236
36171
|
}
|
|
36237
36172
|
function resolveToneCss(tone) {
|
|
36238
36173
|
switch (tone) {
|
|
@@ -36357,7 +36292,7 @@ function Stack(props) {
|
|
|
36357
36292
|
return renderWithTrait(Trait, traitProps, { className, style: composedStyle }, children);
|
|
36358
36293
|
}
|
|
36359
36294
|
function Row(props) {
|
|
36360
|
-
return (0,
|
|
36295
|
+
return (0, import_react9.createElement)(Stack, { ...props, direction: "horizontal" });
|
|
36361
36296
|
}
|
|
36362
36297
|
var BREAKPOINTS = [
|
|
36363
36298
|
["sm", 640],
|
|
@@ -36401,7 +36336,7 @@ function Grid(props) {
|
|
|
36401
36336
|
gap: resolveSpacing(gap),
|
|
36402
36337
|
...style
|
|
36403
36338
|
};
|
|
36404
|
-
return renderWithTrait(Trait, traitProps, { className: className ? `${className} ${cls}` : cls, style: composedStyle2 }, (0,
|
|
36339
|
+
return renderWithTrait(Trait, traitProps, { className: className ? `${className} ${cls}` : cls, style: composedStyle2 }, (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [(0, import_jsx_runtime4.jsx)("style", { children: rules.join("") }), children] }));
|
|
36405
36340
|
}
|
|
36406
36341
|
const composedStyle = {
|
|
36407
36342
|
display: "grid",
|
|
@@ -36436,7 +36371,7 @@ function Divider({ orientation = "horizontal", margin = "var(--ggui-spacing-md,
|
|
|
36436
36371
|
const resolvedMargin = typeof margin === "number" ? `${margin}px` : margin;
|
|
36437
36372
|
const dividerColor = tone ? resolveToneCss(tone) : "var(--ggui-color-outlineVariant, #e4e4e7)";
|
|
36438
36373
|
if (orientation === "vertical") {
|
|
36439
|
-
return (0,
|
|
36374
|
+
return (0, import_jsx_runtime5.jsx)("div", { role: "separator", "aria-orientation": "vertical", className, style: {
|
|
36440
36375
|
width: "1px",
|
|
36441
36376
|
backgroundColor: dividerColor,
|
|
36442
36377
|
margin: `0 ${resolvedMargin}`,
|
|
@@ -36444,7 +36379,7 @@ function Divider({ orientation = "horizontal", margin = "var(--ggui-spacing-md,
|
|
|
36444
36379
|
...style
|
|
36445
36380
|
} });
|
|
36446
36381
|
}
|
|
36447
|
-
return (0,
|
|
36382
|
+
return (0, import_jsx_runtime5.jsx)("hr", { role: "separator", "aria-orientation": "horizontal", className, style: {
|
|
36448
36383
|
border: "none",
|
|
36449
36384
|
height: "1px",
|
|
36450
36385
|
backgroundColor: dividerColor,
|
|
@@ -36454,12 +36389,12 @@ function Divider({ orientation = "horizontal", margin = "var(--ggui-spacing-md,
|
|
|
36454
36389
|
}
|
|
36455
36390
|
function Spacer({ size = 16, style, className }) {
|
|
36456
36391
|
if (size === "flex") {
|
|
36457
|
-
return (0,
|
|
36392
|
+
return (0, import_jsx_runtime6.jsx)("div", { className, style: {
|
|
36458
36393
|
flex: 1,
|
|
36459
36394
|
...style
|
|
36460
36395
|
} });
|
|
36461
36396
|
}
|
|
36462
|
-
return (0,
|
|
36397
|
+
return (0, import_jsx_runtime6.jsx)("div", { className, style: {
|
|
36463
36398
|
width: `${size}px`,
|
|
36464
36399
|
height: `${size}px`,
|
|
36465
36400
|
flexShrink: 0,
|
|
@@ -36513,7 +36448,7 @@ function Text({ children, size = "base", weight = "normal", caps = false, tone,
|
|
|
36513
36448
|
...style
|
|
36514
36449
|
};
|
|
36515
36450
|
const elementProps = { id, htmlFor, className, style: textStyle };
|
|
36516
|
-
return (0,
|
|
36451
|
+
return (0, import_react10.createElement)(is, elementProps, children);
|
|
36517
36452
|
}
|
|
36518
36453
|
var fontSize = {
|
|
36519
36454
|
xs: "12px",
|
|
@@ -36596,7 +36531,7 @@ function Heading({ children, level = 2, tone, align, style, className }) {
|
|
|
36596
36531
|
const tag = `h${level}`;
|
|
36597
36532
|
const headingStyle = headingStyles[tag] || headingStyles.h2;
|
|
36598
36533
|
const resolvedColor = tone ? resolveToneCss(tone) : "var(--ggui-color-onSurface, #18181b)";
|
|
36599
|
-
return (0,
|
|
36534
|
+
return (0, import_react11.createElement)(tag, {
|
|
36600
36535
|
className,
|
|
36601
36536
|
style: {
|
|
36602
36537
|
...headingStyle,
|
|
@@ -36609,10 +36544,10 @@ function Heading({ children, level = 2, tone, align, style, className }) {
|
|
|
36609
36544
|
}
|
|
36610
36545
|
function Spinner({ size = 24, tone, style, className }) {
|
|
36611
36546
|
const spinnerColor = tone === "inherit" ? "currentColor" : tone ? resolveToneCss(tone) : "var(--ggui-color-primary-600, #0284c7)";
|
|
36612
|
-
return (0,
|
|
36547
|
+
return (0, import_jsx_runtime8.jsxs)("svg", { className, width: size, height: size, viewBox: "0 0 24 24", fill: "none", role: "status", "aria-label": "Loading", style: {
|
|
36613
36548
|
animation: "ggui-spin 1s linear infinite",
|
|
36614
36549
|
...style
|
|
36615
|
-
}, children: [(0,
|
|
36550
|
+
}, children: [(0, import_jsx_runtime8.jsx)("style", { children: `@keyframes ggui-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }), (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "var(--ggui-color-outlineVariant, #e4e4e7)", strokeWidth: "3", fill: "none" }), (0, import_jsx_runtime8.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: spinnerColor, strokeWidth: "3", strokeLinecap: "round", fill: "none" })] });
|
|
36616
36551
|
}
|
|
36617
36552
|
var duration3 = {
|
|
36618
36553
|
instant: "0ms",
|
|
@@ -36689,7 +36624,7 @@ var variantStyles = {
|
|
|
36689
36624
|
function Button({ children, variant = "primary", size = "md", fullWidth, loading, disabled, leftIcon, rightIcon, type = "button", onClick, onPress, style, className, ...rest }) {
|
|
36690
36625
|
const isDisabled = disabled || loading;
|
|
36691
36626
|
const handleClick = onClick ?? onPress;
|
|
36692
|
-
return (0,
|
|
36627
|
+
return (0, import_jsx_runtime7.jsx)("button", { type, onClick: isDisabled ? void 0 : handleClick, disabled: isDisabled, className, style: {
|
|
36693
36628
|
...sizeStyles[size],
|
|
36694
36629
|
...variantStyles[variant],
|
|
36695
36630
|
display: "inline-flex",
|
|
@@ -36704,7 +36639,7 @@ function Button({ children, variant = "primary", size = "md", fullWidth, loading
|
|
|
36704
36639
|
transition: `background-color ${duration3.normal} ${easing.easeInOut}, box-shadow ${duration3.normal} ${easing.easeInOut}, opacity ${duration3.normal} ${easing.easeInOut}`,
|
|
36705
36640
|
boxShadow: "var(--ggui-shape-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))",
|
|
36706
36641
|
...style
|
|
36707
|
-
}, ...rest, children: loading ? (0,
|
|
36642
|
+
}, ...rest, children: loading ? (0, import_jsx_runtime7.jsx)(Spinner, { size: 16, tone: "inherit" }) : (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [leftIcon, children, rightIcon] }) });
|
|
36708
36643
|
}
|
|
36709
36644
|
var sizeStyles2 = {
|
|
36710
36645
|
sm: {
|
|
@@ -36721,21 +36656,21 @@ var sizeStyles2 = {
|
|
|
36721
36656
|
}
|
|
36722
36657
|
};
|
|
36723
36658
|
function Input({ label, placeholder, value, onChange, type = "text", error: error210, helperText, required: required2, disabled, size = "md", style, className, ...rest }) {
|
|
36724
|
-
const uniqueId = (0,
|
|
36659
|
+
const uniqueId = (0, import_react12.useId)();
|
|
36725
36660
|
const inputId = `${uniqueId}-input`;
|
|
36726
36661
|
const messageId = `${uniqueId}-message`;
|
|
36727
36662
|
const hasError = Boolean(error210);
|
|
36728
36663
|
const hasMessage = Boolean(error210 || helperText);
|
|
36729
|
-
return (0,
|
|
36664
|
+
return (0, import_jsx_runtime9.jsxs)("div", { className, style: {
|
|
36730
36665
|
display: "flex",
|
|
36731
36666
|
flexDirection: "column",
|
|
36732
36667
|
gap: "var(--ggui-spacing-1, 4px)",
|
|
36733
36668
|
...style
|
|
36734
|
-
}, children: [label && (0,
|
|
36669
|
+
}, children: [label && (0, import_jsx_runtime9.jsxs)("label", { htmlFor: inputId, style: {
|
|
36735
36670
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
36736
36671
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
36737
36672
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36738
|
-
}, children: [label, required2 && (0,
|
|
36673
|
+
}, children: [label, required2 && (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime9.jsx)("input", { id: inputId, type, placeholder, value, onChange: (e) => onChange?.(e.target.value), disabled, required: required2, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
|
|
36739
36674
|
...sizeStyles2[size],
|
|
36740
36675
|
width: "100%",
|
|
36741
36676
|
borderRadius: "var(--ggui-shape-radius-md, 8px)",
|
|
@@ -36744,28 +36679,28 @@ function Input({ label, placeholder, value, onChange, type = "text", error: erro
|
|
|
36744
36679
|
color: "var(--ggui-color-onSurface, #18181b)",
|
|
36745
36680
|
transition: `border-color ${duration3.normal} ${easing.easeInOut}, box-shadow ${duration3.normal} ${easing.easeInOut}`,
|
|
36746
36681
|
boxSizing: "border-box"
|
|
36747
|
-
}, ...rest }), hasMessage && (0,
|
|
36682
|
+
}, ...rest }), hasMessage && (0, import_jsx_runtime9.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
|
|
36748
36683
|
fontSize: "var(--ggui-font-size-xs, 12px)",
|
|
36749
36684
|
color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36750
36685
|
}, children: error210 || helperText })] });
|
|
36751
36686
|
}
|
|
36752
36687
|
function TextArea({ label, placeholder, value, onChange, rows = 4, error: error210, helperText, required: required2, disabled, maxLength, showCount, autoResize, style, className, ...rest }) {
|
|
36753
|
-
const uniqueId = (0,
|
|
36688
|
+
const uniqueId = (0, import_react13.useId)();
|
|
36754
36689
|
const textareaId = `${uniqueId}-textarea`;
|
|
36755
36690
|
const messageId = `${uniqueId}-message`;
|
|
36756
36691
|
const hasError = Boolean(error210);
|
|
36757
36692
|
const hasMessage = Boolean(error210 || helperText);
|
|
36758
36693
|
const charCount = value?.length || 0;
|
|
36759
|
-
return (0,
|
|
36694
|
+
return (0, import_jsx_runtime10.jsxs)("div", { className, style: {
|
|
36760
36695
|
display: "flex",
|
|
36761
36696
|
flexDirection: "column",
|
|
36762
36697
|
gap: "var(--ggui-spacing-1, 4px)",
|
|
36763
36698
|
...style
|
|
36764
|
-
}, children: [label && (0,
|
|
36699
|
+
}, children: [label && (0, import_jsx_runtime10.jsxs)("label", { htmlFor: textareaId, style: {
|
|
36765
36700
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
36766
36701
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
36767
36702
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36768
|
-
}, children: [label, required2 && (0,
|
|
36703
|
+
}, children: [label, required2 && (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime10.jsx)("textarea", { id: textareaId, placeholder, value, onChange: (e) => onChange?.(e.target.value), rows, disabled, required: required2, maxLength, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
|
|
36769
36704
|
padding: "10px 12px",
|
|
36770
36705
|
width: "100%",
|
|
36771
36706
|
borderRadius: "var(--ggui-shape-radius-md, 8px)",
|
|
@@ -36777,10 +36712,10 @@ function TextArea({ label, placeholder, value, onChange, rows = 4, error: error2
|
|
|
36777
36712
|
transition: `border-color ${duration3.normal} ${easing.easeInOut}, box-shadow ${duration3.normal} ${easing.easeInOut}`,
|
|
36778
36713
|
boxSizing: "border-box",
|
|
36779
36714
|
resize: autoResize ? "none" : "vertical"
|
|
36780
|
-
}, ...rest }), (0,
|
|
36715
|
+
}, ...rest }), (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [hasMessage && (0, import_jsx_runtime10.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
|
|
36781
36716
|
fontSize: "var(--ggui-font-size-xs, 12px)",
|
|
36782
36717
|
color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36783
|
-
}, children: error210 || helperText }), showCount && maxLength && (0,
|
|
36718
|
+
}, children: error210 || helperText }), showCount && maxLength && (0, import_jsx_runtime10.jsxs)("span", { style: {
|
|
36784
36719
|
fontSize: "var(--ggui-font-size-xs, 12px)",
|
|
36785
36720
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)",
|
|
36786
36721
|
marginLeft: "auto"
|
|
@@ -36792,16 +36727,16 @@ var sizeStyles3 = {
|
|
|
36792
36727
|
lg: { padding: "12px 14px", fontSize: "var(--ggui-font-size-base, 16px)" }
|
|
36793
36728
|
};
|
|
36794
36729
|
function Select({ label, value, onChange, options, placeholder, error: error210, helperText, required: required2, disabled, size = "md", style, className, ...rest }) {
|
|
36795
|
-
const uniqueId = (0,
|
|
36730
|
+
const uniqueId = (0, import_react14.useId)();
|
|
36796
36731
|
const selectId = `${uniqueId}-select`;
|
|
36797
36732
|
const messageId = `${uniqueId}-message`;
|
|
36798
36733
|
const hasError = Boolean(error210);
|
|
36799
36734
|
const hasMessage = Boolean(error210 || helperText);
|
|
36800
|
-
return (0,
|
|
36735
|
+
return (0, import_jsx_runtime11.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [label && (0, import_jsx_runtime11.jsxs)("label", { htmlFor: selectId, style: {
|
|
36801
36736
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
36802
36737
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
36803
36738
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36804
|
-
}, children: [label, required2 && (0,
|
|
36739
|
+
}, children: [label, required2 && (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime11.jsxs)("select", { id: selectId, value, onChange: (e) => onChange?.(e.target.value), disabled, required: required2, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
|
|
36805
36740
|
...sizeStyles3[size],
|
|
36806
36741
|
width: "100%",
|
|
36807
36742
|
borderRadius: "var(--ggui-shape-radius-md, 8px)",
|
|
@@ -36816,26 +36751,26 @@ function Select({ label, value, onChange, options, placeholder, error: error210,
|
|
|
36816
36751
|
paddingRight: "36px",
|
|
36817
36752
|
boxSizing: "border-box",
|
|
36818
36753
|
transition: `border-color ${duration3.normal} ${easing.easeInOut}, box-shadow ${duration3.normal} ${easing.easeInOut}`
|
|
36819
|
-
}, ...rest, children: [placeholder && (0,
|
|
36754
|
+
}, ...rest, children: [placeholder && (0, import_jsx_runtime11.jsx)("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (0, import_jsx_runtime11.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))] }), hasMessage && (0, import_jsx_runtime11.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
|
|
36820
36755
|
fontSize: "var(--ggui-font-size-xs, 12px)",
|
|
36821
36756
|
color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36822
36757
|
}, children: error210 || helperText })] });
|
|
36823
36758
|
}
|
|
36824
36759
|
function Checkbox({ label, checked, onChange, disabled, description, indeterminate, style, className }) {
|
|
36825
|
-
return (0,
|
|
36760
|
+
return (0, import_jsx_runtime12.jsxs)("label", { className, style: {
|
|
36826
36761
|
display: "flex",
|
|
36827
36762
|
alignItems: "flex-start",
|
|
36828
36763
|
gap: "var(--ggui-spacing-2, 8px)",
|
|
36829
36764
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
36830
36765
|
opacity: disabled ? 0.5 : 1,
|
|
36831
36766
|
...style
|
|
36832
|
-
}, children: [(0,
|
|
36767
|
+
}, children: [(0, import_jsx_runtime12.jsxs)("div", { style: {
|
|
36833
36768
|
position: "relative",
|
|
36834
36769
|
width: "18px",
|
|
36835
36770
|
height: "18px",
|
|
36836
36771
|
flexShrink: 0,
|
|
36837
36772
|
marginTop: "2px"
|
|
36838
|
-
}, children: [(0,
|
|
36773
|
+
}, children: [(0, import_jsx_runtime12.jsx)("input", { type: "checkbox", checked, onChange: (e) => onChange?.(e.target.checked), disabled, ref: (el) => {
|
|
36839
36774
|
if (el)
|
|
36840
36775
|
el.indeterminate = indeterminate || false;
|
|
36841
36776
|
}, style: {
|
|
@@ -36845,7 +36780,7 @@ function Checkbox({ label, checked, onChange, disabled, description, indetermina
|
|
|
36845
36780
|
margin: 0,
|
|
36846
36781
|
opacity: 0,
|
|
36847
36782
|
cursor: disabled ? "not-allowed" : "pointer"
|
|
36848
|
-
} }), (0,
|
|
36783
|
+
} }), (0, import_jsx_runtime12.jsx)("div", { style: {
|
|
36849
36784
|
width: "18px",
|
|
36850
36785
|
height: "18px",
|
|
36851
36786
|
borderRadius: "var(--ggui-shape-radius-sm, 4px)",
|
|
@@ -36855,11 +36790,11 @@ function Checkbox({ label, checked, onChange, disabled, description, indetermina
|
|
|
36855
36790
|
alignItems: "center",
|
|
36856
36791
|
justifyContent: "center",
|
|
36857
36792
|
transition: "all 0.2s"
|
|
36858
|
-
}, children: (checked || indeterminate) && (0,
|
|
36793
|
+
}, children: (checked || indeterminate) && (0, import_jsx_runtime12.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { color: "#ffffff" }, children: indeterminate ? (0, import_jsx_runtime12.jsx)("path", { d: "M2.5 6H9.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) : (0, import_jsx_runtime12.jsx)("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), (label || description) && (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [label && (0, import_jsx_runtime12.jsx)("span", { style: {
|
|
36859
36794
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
36860
36795
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
36861
36796
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36862
|
-
}, children: label }), description && (0,
|
|
36797
|
+
}, children: label }), description && (0, import_jsx_runtime12.jsx)("span", { style: {
|
|
36863
36798
|
fontSize: "var(--ggui-font-size-xs, 12px)",
|
|
36864
36799
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36865
36800
|
}, children: description })] })] });
|
|
@@ -36871,15 +36806,15 @@ var sizeConfig = {
|
|
|
36871
36806
|
};
|
|
36872
36807
|
function Toggle({ label, checked, onChange, disabled, size = "md", style, className }) {
|
|
36873
36808
|
const config2 = sizeConfig[size];
|
|
36874
|
-
const [focused, setFocused] = (0,
|
|
36875
|
-
return (0,
|
|
36809
|
+
const [focused, setFocused] = (0, import_react15.useState)(false);
|
|
36810
|
+
return (0, import_jsx_runtime13.jsxs)("label", { className, style: {
|
|
36876
36811
|
display: "flex",
|
|
36877
36812
|
alignItems: "center",
|
|
36878
36813
|
gap: "var(--ggui-spacing-2, 8px)",
|
|
36879
36814
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
36880
36815
|
opacity: disabled ? 0.5 : 1,
|
|
36881
36816
|
...style
|
|
36882
|
-
}, children: [(0,
|
|
36817
|
+
}, children: [(0, import_jsx_runtime13.jsx)("div", { role: "switch", "aria-checked": checked, "aria-label": label, tabIndex: disabled ? -1 : 0, onClick: () => !disabled && onChange?.(!checked), onKeyDown: (e) => {
|
|
36883
36818
|
if (disabled)
|
|
36884
36819
|
return;
|
|
36885
36820
|
if (e.key === " " || e.key === "Enter") {
|
|
@@ -36896,7 +36831,7 @@ function Toggle({ label, checked, onChange, disabled, size = "md", style, classN
|
|
|
36896
36831
|
flexShrink: 0,
|
|
36897
36832
|
outline: "none",
|
|
36898
36833
|
boxShadow: focused ? "0 0 0 3px var(--ggui-color-primary-200, #bae6fd)" : void 0
|
|
36899
|
-
}, children: (0,
|
|
36834
|
+
}, children: (0, import_jsx_runtime13.jsx)("div", { style: {
|
|
36900
36835
|
width: config2.knob,
|
|
36901
36836
|
height: config2.knob,
|
|
36902
36837
|
borderRadius: "50%",
|
|
@@ -36906,23 +36841,23 @@ function Toggle({ label, checked, onChange, disabled, size = "md", style, classN
|
|
|
36906
36841
|
left: checked ? config2.width - config2.knob - (config2.height - config2.knob) / 2 : (config2.height - config2.knob) / 2,
|
|
36907
36842
|
transition: `left ${duration3.normal} ${easing.easeInOut}`,
|
|
36908
36843
|
boxShadow: "var(--ggui-shape-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))"
|
|
36909
|
-
} }) }), label && (0,
|
|
36844
|
+
} }) }), label && (0, import_jsx_runtime13.jsx)("span", { style: {
|
|
36910
36845
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
36911
36846
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
36912
36847
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36913
36848
|
}, children: label })] });
|
|
36914
36849
|
}
|
|
36915
36850
|
function RadioGroup({ label, value, onChange, options, direction = "vertical", disabled, error: error210, style, className }) {
|
|
36916
|
-
const uniqueId = (0,
|
|
36851
|
+
const uniqueId = (0, import_react16.useId)();
|
|
36917
36852
|
const labelId = `${uniqueId}-label`;
|
|
36918
36853
|
const errorId = `${uniqueId}-error`;
|
|
36919
36854
|
const groupName = `${uniqueId}-radio`;
|
|
36920
36855
|
const hasError = Boolean(error210);
|
|
36921
|
-
return (0,
|
|
36856
|
+
return (0, import_jsx_runtime14.jsxs)("div", { role: "radiogroup", "aria-labelledby": label ? labelId : void 0, "aria-describedby": hasError ? errorId : void 0, className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-2, 8px)", ...style }, children: [label && (0, import_jsx_runtime14.jsx)("span", { id: labelId, style: {
|
|
36922
36857
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
36923
36858
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
36924
36859
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36925
|
-
}, children: label }), (0,
|
|
36860
|
+
}, children: label }), (0, import_jsx_runtime14.jsx)("div", { style: {
|
|
36926
36861
|
display: "flex",
|
|
36927
36862
|
flexDirection: direction === "vertical" ? "column" : "row",
|
|
36928
36863
|
gap: direction === "vertical" ? "var(--ggui-spacing-2, 8px)" : "var(--ggui-spacing-4, 16px)",
|
|
@@ -36930,26 +36865,26 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
|
|
|
36930
36865
|
}, children: options.map((option) => {
|
|
36931
36866
|
const isSelected = value === option.value;
|
|
36932
36867
|
const isDisabled = disabled || option.disabled;
|
|
36933
|
-
return (0,
|
|
36868
|
+
return (0, import_jsx_runtime14.jsxs)("label", { style: {
|
|
36934
36869
|
display: "flex",
|
|
36935
36870
|
alignItems: "flex-start",
|
|
36936
36871
|
gap: "var(--ggui-spacing-2, 8px)",
|
|
36937
36872
|
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
36938
36873
|
opacity: isDisabled ? 0.5 : 1
|
|
36939
|
-
}, children: [(0,
|
|
36874
|
+
}, children: [(0, import_jsx_runtime14.jsxs)("div", { style: {
|
|
36940
36875
|
position: "relative",
|
|
36941
36876
|
width: "18px",
|
|
36942
36877
|
height: "18px",
|
|
36943
36878
|
flexShrink: 0,
|
|
36944
36879
|
marginTop: "2px"
|
|
36945
|
-
}, children: [(0,
|
|
36880
|
+
}, children: [(0, import_jsx_runtime14.jsx)("input", { type: "radio", name: groupName, value: option.value, checked: isSelected, onChange: () => onChange?.(option.value), disabled: isDisabled, style: {
|
|
36946
36881
|
position: "absolute",
|
|
36947
36882
|
width: "18px",
|
|
36948
36883
|
height: "18px",
|
|
36949
36884
|
margin: 0,
|
|
36950
36885
|
opacity: 0,
|
|
36951
36886
|
cursor: isDisabled ? "not-allowed" : "pointer"
|
|
36952
|
-
} }), (0,
|
|
36887
|
+
} }), (0, import_jsx_runtime14.jsx)("div", { style: {
|
|
36953
36888
|
width: "18px",
|
|
36954
36889
|
height: "18px",
|
|
36955
36890
|
borderRadius: "var(--ggui-shape-radius-full, 9999px)",
|
|
@@ -36959,51 +36894,51 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
|
|
|
36959
36894
|
alignItems: "center",
|
|
36960
36895
|
justifyContent: "center",
|
|
36961
36896
|
transition: "all 0.2s"
|
|
36962
|
-
}, children: isSelected && (0,
|
|
36897
|
+
}, children: isSelected && (0, import_jsx_runtime14.jsx)("div", { style: {
|
|
36963
36898
|
width: "8px",
|
|
36964
36899
|
height: "8px",
|
|
36965
36900
|
borderRadius: "var(--ggui-shape-radius-full, 9999px)",
|
|
36966
36901
|
backgroundColor: "var(--ggui-color-primary-600, #0284c7)"
|
|
36967
|
-
} }) })] }), (0,
|
|
36902
|
+
} }) })] }), (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [(0, import_jsx_runtime14.jsx)("span", { style: {
|
|
36968
36903
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
36969
36904
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
36970
36905
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36971
|
-
}, children: option.label }), option.description && (0,
|
|
36906
|
+
}, children: option.label }), option.description && (0, import_jsx_runtime14.jsx)("span", { style: {
|
|
36972
36907
|
fontSize: "var(--ggui-font-size-xs, 12px)",
|
|
36973
36908
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36974
36909
|
}, children: option.description })] })] }, option.value);
|
|
36975
|
-
}) }), error210 && (0,
|
|
36910
|
+
}) }), error210 && (0, import_jsx_runtime14.jsx)("span", { id: errorId, role: "alert", style: {
|
|
36976
36911
|
fontSize: "var(--ggui-font-size-xs, 12px)",
|
|
36977
36912
|
color: "var(--ggui-color-error-500, #ef4444)"
|
|
36978
36913
|
}, children: error210 })] });
|
|
36979
36914
|
}
|
|
36980
36915
|
function Slider({ label, value = 0, onChange, min = 0, max = 100, step = 1, disabled, showValue, style, className }) {
|
|
36981
|
-
const uniqueId = (0,
|
|
36916
|
+
const uniqueId = (0, import_react17.useId)();
|
|
36982
36917
|
const sliderId = `${uniqueId}-slider`;
|
|
36983
36918
|
const labelId = `${uniqueId}-label`;
|
|
36984
36919
|
const percentage = (value - min) / (max - min) * 100;
|
|
36985
|
-
return (0,
|
|
36920
|
+
return (0, import_jsx_runtime15.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-2, 8px)", ...style }, children: [(label || showValue) && (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [label && (0, import_jsx_runtime15.jsx)("span", { id: labelId, style: {
|
|
36986
36921
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
36987
36922
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
36988
36923
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
36989
|
-
}, children: label }), showValue && (0,
|
|
36924
|
+
}, children: label }), showValue && (0, import_jsx_runtime15.jsx)("span", { style: {
|
|
36990
36925
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
36991
36926
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
36992
36927
|
color: "var(--ggui-color-primary-600, #0284c7)"
|
|
36993
|
-
}, children: value })] }), (0,
|
|
36928
|
+
}, children: value })] }), (0, import_jsx_runtime15.jsxs)("div", { style: { position: "relative", height: "20px", display: "flex", alignItems: "center" }, children: [(0, import_jsx_runtime15.jsx)("div", { style: {
|
|
36994
36929
|
position: "absolute",
|
|
36995
36930
|
width: "100%",
|
|
36996
36931
|
height: "6px",
|
|
36997
36932
|
borderRadius: "3px",
|
|
36998
36933
|
backgroundColor: "var(--ggui-color-outlineVariant, #e4e4e7)"
|
|
36999
|
-
} }), (0,
|
|
36934
|
+
} }), (0, import_jsx_runtime15.jsx)("div", { style: {
|
|
37000
36935
|
position: "absolute",
|
|
37001
36936
|
width: `${percentage}%`,
|
|
37002
36937
|
height: "6px",
|
|
37003
36938
|
borderRadius: "3px",
|
|
37004
36939
|
backgroundColor: disabled ? "var(--ggui-color-outline, #d4d4d8)" : "var(--ggui-color-primary-600, #0284c7)",
|
|
37005
36940
|
transition: "width 0.1s"
|
|
37006
|
-
} }), (0,
|
|
36941
|
+
} }), (0, import_jsx_runtime15.jsx)("input", { id: sliderId, type: "range", min, max, step, value, onChange: (e) => onChange?.(Number(e.target.value)), disabled, "aria-labelledby": label ? labelId : void 0, "aria-label": label ? void 0 : "Slider", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, style: {
|
|
37007
36942
|
position: "absolute",
|
|
37008
36943
|
width: "100%",
|
|
37009
36944
|
height: "20px",
|
|
@@ -37011,7 +36946,7 @@ function Slider({ label, value = 0, onChange, min = 0, max = 100, step = 1, disa
|
|
|
37011
36946
|
opacity: 0,
|
|
37012
36947
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
37013
36948
|
zIndex: 1
|
|
37014
|
-
} }), (0,
|
|
36949
|
+
} }), (0, import_jsx_runtime15.jsx)("div", { style: {
|
|
37015
36950
|
position: "absolute",
|
|
37016
36951
|
left: `calc(${percentage}% - 10px)`,
|
|
37017
36952
|
width: "20px",
|
|
@@ -37060,7 +36995,7 @@ var sizeStyles4 = {
|
|
|
37060
36995
|
lg: { padding: "4px 10px", fontSize: "var(--ggui-font-size-sm, 14px)" }
|
|
37061
36996
|
};
|
|
37062
36997
|
function Badge({ children, variant = "default", size = "md", pill = true, style, className }) {
|
|
37063
|
-
return (0,
|
|
36998
|
+
return (0, import_jsx_runtime16.jsx)("span", { className, style: {
|
|
37064
36999
|
...variantStyles2[variant],
|
|
37065
37000
|
...sizeStyles4[size],
|
|
37066
37001
|
display: "inline-flex",
|
|
@@ -37087,7 +37022,7 @@ function Skeleton({ variant = "rect", width, height, radius: radius2 = "sm", sty
|
|
|
37087
37022
|
animation: "ggui-skeleton-pulse 1.5s ease-in-out infinite",
|
|
37088
37023
|
...style
|
|
37089
37024
|
};
|
|
37090
|
-
return (0,
|
|
37025
|
+
return (0, import_jsx_runtime17.jsx)("div", { className, style: composedStyle, "aria-hidden": "true", children: (0, import_jsx_runtime17.jsx)("style", { children: `@keyframes ggui-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }` }) });
|
|
37091
37026
|
}
|
|
37092
37027
|
var sizeMap2 = {
|
|
37093
37028
|
xs: 24,
|
|
@@ -37104,7 +37039,7 @@ var avatarColors = [
|
|
|
37104
37039
|
"var(--ggui-color-info-500, #06b6d4)"
|
|
37105
37040
|
];
|
|
37106
37041
|
function Avatar({ src, name, size = "md", shape = "circle", style, className }) {
|
|
37107
|
-
const [imageError, setImageError] = (0,
|
|
37042
|
+
const [imageError, setImageError] = (0, import_react18.useState)(false);
|
|
37108
37043
|
const resolvedSize = typeof size === "number" ? size : sizeMap2[size] || 40;
|
|
37109
37044
|
const initials = name ? name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
|
|
37110
37045
|
const getColorFromName = (name2) => {
|
|
@@ -37114,7 +37049,7 @@ function Avatar({ src, name, size = "md", shape = "circle", style, className })
|
|
|
37114
37049
|
return avatarColors[hash2 % avatarColors.length];
|
|
37115
37050
|
};
|
|
37116
37051
|
const showInitials = !src || imageError;
|
|
37117
|
-
return (0,
|
|
37052
|
+
return (0, import_jsx_runtime18.jsx)("div", { role: "img", "aria-label": name || "Avatar", className, style: {
|
|
37118
37053
|
width: resolvedSize,
|
|
37119
37054
|
height: resolvedSize,
|
|
37120
37055
|
borderRadius: shape === "circle" ? "50%" : "var(--ggui-shape-radius-md, 8px)",
|
|
@@ -37128,7 +37063,7 @@ function Avatar({ src, name, size = "md", shape = "circle", style, className })
|
|
|
37128
37063
|
overflow: "hidden",
|
|
37129
37064
|
flexShrink: 0,
|
|
37130
37065
|
...style
|
|
37131
|
-
}, children: showInitials ? initials : (0,
|
|
37066
|
+
}, children: showInitials ? initials : (0, import_jsx_runtime18.jsx)("img", { src, alt: name || "Avatar", onError: () => setImageError(true), style: {
|
|
37132
37067
|
width: "100%",
|
|
37133
37068
|
height: "100%",
|
|
37134
37069
|
objectFit: "cover"
|
|
@@ -37161,14 +37096,14 @@ var variantStyles3 = {
|
|
|
37161
37096
|
}
|
|
37162
37097
|
};
|
|
37163
37098
|
var defaultIcons = {
|
|
37164
|
-
info: (0,
|
|
37165
|
-
success: (0,
|
|
37166
|
-
warning: (0,
|
|
37167
|
-
error: (0,
|
|
37099
|
+
info: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
|
|
37100
|
+
success: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
|
|
37101
|
+
warning: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
|
|
37102
|
+
error: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
|
|
37168
37103
|
};
|
|
37169
37104
|
function Alert({ children, variant = "info", title, closable, onClose, icon, style, className }) {
|
|
37170
37105
|
const variantStyle = variantStyles3[variant];
|
|
37171
|
-
return (0,
|
|
37106
|
+
return (0, import_jsx_runtime19.jsxs)("div", { role: "alert", className, style: {
|
|
37172
37107
|
display: "flex",
|
|
37173
37108
|
gap: "12px",
|
|
37174
37109
|
padding: "12px 16px",
|
|
@@ -37177,10 +37112,10 @@ function Alert({ children, variant = "info", title, closable, onClose, icon, sty
|
|
|
37177
37112
|
border: `1px solid ${variantStyle.border}`,
|
|
37178
37113
|
color: variantStyle.text,
|
|
37179
37114
|
...style
|
|
37180
|
-
}, children: [(0,
|
|
37115
|
+
}, children: [(0, import_jsx_runtime19.jsx)("div", { style: { color: variantStyle.icon, flexShrink: 0 }, children: icon || defaultIcons[variant] }), (0, import_jsx_runtime19.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)" }, children: [title && (0, import_jsx_runtime19.jsx)("div", { style: {
|
|
37181
37116
|
fontWeight: "var(--ggui-font-weight-semibold, 600)",
|
|
37182
37117
|
fontSize: "var(--ggui-font-size-sm, 14px)"
|
|
37183
|
-
}, children: title }), (0,
|
|
37118
|
+
}, children: title }), (0, import_jsx_runtime19.jsx)("div", { style: { fontSize: "var(--ggui-font-size-sm, 14px)" }, children })] }), closable && (0, import_jsx_runtime19.jsx)("button", { onClick: onClose, "aria-label": "Close", style: {
|
|
37184
37119
|
background: "none",
|
|
37185
37120
|
border: "none",
|
|
37186
37121
|
padding: "4px",
|
|
@@ -37195,7 +37130,7 @@ function Alert({ children, variant = "info", title, closable, onClose, icon, sty
|
|
|
37195
37130
|
alignItems: "center",
|
|
37196
37131
|
justifyContent: "center",
|
|
37197
37132
|
borderRadius: "var(--ggui-shape-radius-sm, 4px)"
|
|
37198
|
-
}, children: (0,
|
|
37133
|
+
}, children: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] });
|
|
37199
37134
|
}
|
|
37200
37135
|
var variantColors = {
|
|
37201
37136
|
default: "var(--ggui-color-primary-600, #0284c7)",
|
|
@@ -37213,17 +37148,17 @@ function Progress({ value, max = 100, variant = "default", size = "md", label, s
|
|
|
37213
37148
|
const height = sizeHeights[size];
|
|
37214
37149
|
const barColor = variantColors[variant];
|
|
37215
37150
|
const accessibleName = label ?? "Progress";
|
|
37216
|
-
return (0,
|
|
37151
|
+
return (0, import_jsx_runtime20.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [showLabel && (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [(0, import_jsx_runtime20.jsx)("span", { style: { fontSize: "var(--ggui-font-size-sm, 14px)", color: "var(--ggui-color-onSurfaceVariant, #52525b)" }, children: accessibleName }), (0, import_jsx_runtime20.jsxs)("span", { style: {
|
|
37217
37152
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
37218
37153
|
fontWeight: "var(--ggui-font-weight-medium, 500)",
|
|
37219
37154
|
color: "var(--ggui-color-onSurface, #18181b)"
|
|
37220
|
-
}, children: [Math.round(percentage), "%"] })] }), (0,
|
|
37155
|
+
}, children: [Math.round(percentage), "%"] })] }), (0, import_jsx_runtime20.jsxs)("div", { role: "progressbar", "aria-valuenow": indeterminate ? void 0 : value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": accessibleName, style: {
|
|
37221
37156
|
width: "100%",
|
|
37222
37157
|
height,
|
|
37223
37158
|
borderRadius: height / 2,
|
|
37224
37159
|
backgroundColor: "var(--ggui-color-outlineVariant, #e4e4e7)",
|
|
37225
37160
|
overflow: "hidden"
|
|
37226
|
-
}, children: [(0,
|
|
37161
|
+
}, children: [(0, import_jsx_runtime20.jsx)("div", { style: {
|
|
37227
37162
|
height: "100%",
|
|
37228
37163
|
borderRadius: height / 2,
|
|
37229
37164
|
backgroundColor: barColor,
|
|
@@ -37234,23 +37169,23 @@ function Progress({ value, max = 100, variant = "default", size = "md", label, s
|
|
|
37234
37169
|
} : {
|
|
37235
37170
|
width: `${percentage}%`
|
|
37236
37171
|
}
|
|
37237
|
-
} }), indeterminate && (0,
|
|
37172
|
+
} }), indeterminate && (0, import_jsx_runtime20.jsx)("style", { children: `@keyframes ggui-progress-indeterminate {
|
|
37238
37173
|
0% { transform: translateX(-100%); }
|
|
37239
37174
|
100% { transform: translateX(400%); }
|
|
37240
37175
|
}` })] })] });
|
|
37241
37176
|
}
|
|
37242
37177
|
function Image({ src, alt, width, height, objectFit = "cover", radius: radius2, fallback, style, className }) {
|
|
37243
|
-
const [error210, setError] = (0,
|
|
37178
|
+
const [error210, setError] = (0, import_react19.useState)(false);
|
|
37244
37179
|
const resolveSize2 = (value) => {
|
|
37245
37180
|
if (value === void 0)
|
|
37246
37181
|
return void 0;
|
|
37247
37182
|
return typeof value === "number" ? `${value}px` : value;
|
|
37248
37183
|
};
|
|
37249
37184
|
if (error210 && fallback) {
|
|
37250
|
-
return (0,
|
|
37185
|
+
return (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: fallback });
|
|
37251
37186
|
}
|
|
37252
37187
|
if (error210) {
|
|
37253
|
-
return (0,
|
|
37188
|
+
return (0, import_jsx_runtime21.jsx)("div", { role: "img", "aria-label": `${alt} (failed to load)`, className, style: {
|
|
37254
37189
|
width: resolveSize2(width) || "100%",
|
|
37255
37190
|
height: resolveSize2(height) || "auto",
|
|
37256
37191
|
borderRadius: resolveRadius(radius2),
|
|
@@ -37260,9 +37195,9 @@ function Image({ src, alt, width, height, objectFit = "cover", radius: radius2,
|
|
|
37260
37195
|
justifyContent: "center",
|
|
37261
37196
|
color: "var(--ggui-color-outline, #d4d4d8)",
|
|
37262
37197
|
...style
|
|
37263
|
-
}, children: (0,
|
|
37198
|
+
}, children: (0, import_jsx_runtime21.jsx)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "currentColor", children: (0, import_jsx_runtime21.jsx)("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }) });
|
|
37264
37199
|
}
|
|
37265
|
-
return (0,
|
|
37200
|
+
return (0, import_jsx_runtime21.jsx)("img", { src, alt, onError: () => setError(true), className, style: {
|
|
37266
37201
|
width: resolveSize2(width) || "100%",
|
|
37267
37202
|
height: resolveSize2(height) || "auto",
|
|
37268
37203
|
objectFit,
|
|
@@ -41253,7 +41188,7 @@ function resolveLucideName(name) {
|
|
|
41253
41188
|
return LUCIDE_LOOKUP.get(normalized);
|
|
41254
41189
|
}
|
|
41255
41190
|
function renderLucideIcon(data, size, color) {
|
|
41256
|
-
return (0,
|
|
41191
|
+
return (0, import_jsx_runtime22.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: data.map(([tag, attrs], i) => import_react20.default.createElement(tag, { key: i, ...attrs })) });
|
|
41257
41192
|
}
|
|
41258
41193
|
function Icon({ name, size = 24, tone, children, style, className, "aria-label": ariaLabel }) {
|
|
41259
41194
|
const iconColor = tone ? resolveToneCss(tone) : "currentColor";
|
|
@@ -41268,22 +41203,22 @@ function Icon({ name, size = 24, tone, children, style, className, "aria-label":
|
|
|
41268
41203
|
...style
|
|
41269
41204
|
};
|
|
41270
41205
|
if (children) {
|
|
41271
|
-
return (0,
|
|
41206
|
+
return (0, import_jsx_runtime22.jsx)("span", { className, style: wrapStyle, ...a11yProps, children });
|
|
41272
41207
|
}
|
|
41273
41208
|
if (name) {
|
|
41274
41209
|
const lucideKey = resolveLucideName(name);
|
|
41275
41210
|
if (lucideKey) {
|
|
41276
|
-
return (0,
|
|
41211
|
+
return (0, import_jsx_runtime22.jsx)("span", { className, style: wrapStyle, ...a11yProps, children: renderLucideIcon(LUCIDE_ICONS[lucideKey], size, iconColor) });
|
|
41277
41212
|
}
|
|
41278
41213
|
}
|
|
41279
41214
|
if (name && /[^\x00-\x7F]/.test(name)) {
|
|
41280
|
-
return (0,
|
|
41215
|
+
return (0, import_jsx_runtime22.jsx)("span", { className, ...a11yProps, style: {
|
|
41281
41216
|
...wrapStyle,
|
|
41282
41217
|
fontSize: size * 0.75,
|
|
41283
41218
|
lineHeight: 1
|
|
41284
41219
|
}, children: name });
|
|
41285
41220
|
}
|
|
41286
|
-
return (0,
|
|
41221
|
+
return (0, import_jsx_runtime22.jsx)("span", { className, ...a11yProps, style: {
|
|
41287
41222
|
...wrapStyle,
|
|
41288
41223
|
backgroundColor: "var(--ggui-color-outlineVariant, #e4e4e7)",
|
|
41289
41224
|
borderRadius: "var(--ggui-shape-radius-sm, 4px)",
|
|
@@ -41298,7 +41233,7 @@ function Link({ children, href, external, tone, underline = "hover", style, clas
|
|
|
41298
41233
|
hover: "none",
|
|
41299
41234
|
none: "none"
|
|
41300
41235
|
}[underline];
|
|
41301
|
-
return (0,
|
|
41236
|
+
return (0, import_jsx_runtime23.jsxs)("a", { href, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, className, style: {
|
|
41302
41237
|
color: linkColor,
|
|
41303
41238
|
textDecoration: underlineStyle,
|
|
41304
41239
|
cursor: "pointer",
|
|
@@ -41312,13 +41247,13 @@ function Link({ children, href, external, tone, underline = "hover", style, clas
|
|
|
41312
41247
|
if (underline === "hover") {
|
|
41313
41248
|
e.target.style.textDecoration = "none";
|
|
41314
41249
|
}
|
|
41315
|
-
}, ...rest, children: [children, external && (0,
|
|
41250
|
+
}, ...rest, children: [children, external && (0, import_jsx_runtime23.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { marginLeft: "4px", verticalAlign: "middle" }, children: [(0, import_jsx_runtime23.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), (0, import_jsx_runtime23.jsx)("polyline", { points: "15 3 21 3 21 9" }), (0, import_jsx_runtime23.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] })] });
|
|
41316
41251
|
}
|
|
41317
41252
|
function Tooltip({ children, content, position = "top", delay = 200, style, className }) {
|
|
41318
|
-
const [visible, setVisible] = (0,
|
|
41319
|
-
const [coords, setCoords] = (0,
|
|
41320
|
-
const triggerRef = (0,
|
|
41321
|
-
const timeoutRef = (0,
|
|
41253
|
+
const [visible, setVisible] = (0, import_react21.useState)(false);
|
|
41254
|
+
const [coords, setCoords] = (0, import_react21.useState)({ top: 0, left: 0 });
|
|
41255
|
+
const triggerRef = (0, import_react21.useRef)(null);
|
|
41256
|
+
const timeoutRef = (0, import_react21.useRef)(null);
|
|
41322
41257
|
const showTooltip = () => {
|
|
41323
41258
|
timeoutRef.current = setTimeout(() => {
|
|
41324
41259
|
setVisible(true);
|
|
@@ -41330,7 +41265,7 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
|
|
|
41330
41265
|
}
|
|
41331
41266
|
setVisible(false);
|
|
41332
41267
|
};
|
|
41333
|
-
(0,
|
|
41268
|
+
(0, import_react21.useEffect)(() => {
|
|
41334
41269
|
if (visible && triggerRef.current) {
|
|
41335
41270
|
const rect = triggerRef.current.getBoundingClientRect();
|
|
41336
41271
|
const offset = 8;
|
|
@@ -41357,7 +41292,7 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
|
|
|
41357
41292
|
setCoords({ top, left });
|
|
41358
41293
|
}
|
|
41359
41294
|
}, [visible, position]);
|
|
41360
|
-
(0,
|
|
41295
|
+
(0, import_react21.useEffect)(() => {
|
|
41361
41296
|
return () => {
|
|
41362
41297
|
if (timeoutRef.current) {
|
|
41363
41298
|
clearTimeout(timeoutRef.current);
|
|
@@ -41376,10 +41311,10 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
|
|
|
41376
41311
|
return "translateY(-50%)";
|
|
41377
41312
|
}
|
|
41378
41313
|
};
|
|
41379
|
-
return (0,
|
|
41314
|
+
return (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [(0, import_jsx_runtime24.jsx)("div", { ref: triggerRef, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, className, style: {
|
|
41380
41315
|
display: "inline-block",
|
|
41381
41316
|
...style
|
|
41382
|
-
}, children }), visible && (0,
|
|
41317
|
+
}, children }), visible && (0, import_jsx_runtime24.jsx)("div", { role: "tooltip", style: {
|
|
41383
41318
|
position: "fixed",
|
|
41384
41319
|
top: coords.top,
|
|
41385
41320
|
left: coords.left,
|
|
@@ -41395,16 +41330,16 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
|
|
|
41395
41330
|
whiteSpace: "nowrap"
|
|
41396
41331
|
}, children: content })] });
|
|
41397
41332
|
}
|
|
41398
|
-
var sortIndicator = (active, direction) => (0,
|
|
41333
|
+
var sortIndicator = (active, direction) => (0, import_jsx_runtime25.jsxs)("span", { "aria-hidden": "true", style: {
|
|
41399
41334
|
display: "inline-flex",
|
|
41400
41335
|
flexDirection: "column",
|
|
41401
41336
|
marginLeft: "4px",
|
|
41402
41337
|
fontSize: "10px",
|
|
41403
41338
|
lineHeight: 1,
|
|
41404
41339
|
opacity: active ? 1 : 0.3
|
|
41405
|
-
}, children: [(0,
|
|
41340
|
+
}, children: [(0, import_jsx_runtime25.jsx)("span", { style: { opacity: active && direction === "asc" ? 1 : 0.4 }, children: "\u25B2" }), (0, import_jsx_runtime25.jsx)("span", { style: { opacity: active && direction === "desc" ? 1 : 0.4 }, children: "\u25BC" })] });
|
|
41406
41341
|
function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped = false, hoverable = true, compact = false, bordered = false, caption, style, className }) {
|
|
41407
|
-
const [hoveredRow, setHoveredRow] = (0,
|
|
41342
|
+
const [hoveredRow, setHoveredRow] = (0, import_react22.useState)(null);
|
|
41408
41343
|
const cellPadding = compact ? "var(--ggui-spacing-1, 4px) var(--ggui-spacing-2, 8px)" : "var(--ggui-spacing-2, 8px) var(--ggui-spacing-4, 16px)";
|
|
41409
41344
|
const handleSort = (key) => {
|
|
41410
41345
|
if (!onSort)
|
|
@@ -41412,7 +41347,7 @@ function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped
|
|
|
41412
41347
|
const newDirection = sortKey === key && sortDirection === "asc" ? "desc" : "asc";
|
|
41413
41348
|
onSort(key, newDirection);
|
|
41414
41349
|
};
|
|
41415
|
-
const
|
|
41350
|
+
const headerStyle = {
|
|
41416
41351
|
padding: cellPadding,
|
|
41417
41352
|
textAlign: "left",
|
|
41418
41353
|
fontWeight: "var(--ggui-font-weight-semibold, 600)",
|
|
@@ -41424,36 +41359,36 @@ function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped
|
|
|
41424
41359
|
whiteSpace: "nowrap",
|
|
41425
41360
|
userSelect: "none"
|
|
41426
41361
|
};
|
|
41427
|
-
return (0,
|
|
41362
|
+
return (0, import_jsx_runtime25.jsx)("div", { className, style: {
|
|
41428
41363
|
overflowX: "auto",
|
|
41429
41364
|
borderRadius: "var(--ggui-shape-radius-lg, 8px)",
|
|
41430
41365
|
border: bordered ? "1px solid var(--ggui-color-outlineVariant, #e4e4e7)" : void 0,
|
|
41431
41366
|
...style
|
|
41432
|
-
}, children: (0,
|
|
41367
|
+
}, children: (0, import_jsx_runtime25.jsxs)("table", { role: "table", style: {
|
|
41433
41368
|
width: "100%",
|
|
41434
41369
|
borderCollapse: "collapse",
|
|
41435
41370
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
41436
41371
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)"
|
|
41437
|
-
}, children: [caption && (0,
|
|
41372
|
+
}, children: [caption && (0, import_jsx_runtime25.jsx)("caption", { style: {
|
|
41438
41373
|
padding: cellPadding,
|
|
41439
41374
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
41440
41375
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)",
|
|
41441
41376
|
textAlign: "left",
|
|
41442
41377
|
captionSide: "top"
|
|
41443
|
-
}, children: caption }), (0,
|
|
41378
|
+
}, children: caption }), (0, import_jsx_runtime25.jsx)("thead", { children: (0, import_jsx_runtime25.jsx)("tr", { children: columns.map((col) => (0, import_jsx_runtime25.jsx)("th", { scope: "col", "aria-sort": sortKey === col.key ? sortDirection === "asc" ? "ascending" : "descending" : void 0, onClick: col.sortable ? () => handleSort(col.key) : void 0, onKeyDown: col.sortable ? (e) => {
|
|
41444
41379
|
if (e.key === "Enter" || e.key === " ") {
|
|
41445
41380
|
e.preventDefault();
|
|
41446
41381
|
handleSort(col.key);
|
|
41447
41382
|
}
|
|
41448
41383
|
} : void 0, tabIndex: col.sortable ? 0 : void 0, style: {
|
|
41449
|
-
...
|
|
41384
|
+
...headerStyle,
|
|
41450
41385
|
textAlign: col.align || "left",
|
|
41451
41386
|
width: col.width,
|
|
41452
41387
|
cursor: col.sortable ? "pointer" : "default"
|
|
41453
|
-
}, children: (0,
|
|
41388
|
+
}, children: (0, import_jsx_runtime25.jsxs)("span", { style: { display: "inline-flex", alignItems: "center" }, children: [col.header, col.sortable && sortIndicator(sortKey === col.key, sortDirection)] }) }, col.key)) }) }), (0, import_jsx_runtime25.jsx)("tbody", { children: data.map((row, rowIndex) => (0, import_jsx_runtime25.jsx)("tr", { onMouseEnter: hoverable ? () => setHoveredRow(rowIndex) : void 0, onMouseLeave: hoverable ? () => setHoveredRow(null) : void 0, style: {
|
|
41454
41389
|
backgroundColor: hoverable && hoveredRow === rowIndex ? "var(--ggui-color-surface, #fafafa)" : striped && rowIndex % 2 === 1 ? "var(--ggui-color-surface, #fafafa)" : "transparent",
|
|
41455
41390
|
transition: "background-color 0.15s ease"
|
|
41456
|
-
}, children: columns.map((col) => (0,
|
|
41391
|
+
}, children: columns.map((col) => (0, import_jsx_runtime25.jsx)("td", { style: {
|
|
41457
41392
|
padding: cellPadding,
|
|
41458
41393
|
textAlign: col.align || "left",
|
|
41459
41394
|
borderBottom: "1px solid var(--ggui-color-surfaceVariant, #f4f4f5)",
|
|
@@ -41475,10 +41410,10 @@ var sizeStyles5 = {
|
|
|
41475
41410
|
}
|
|
41476
41411
|
};
|
|
41477
41412
|
function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullWidth = false, style, className }) {
|
|
41478
|
-
const uniqueId = (0,
|
|
41479
|
-
const [internalKey, setInternalKey] = (0,
|
|
41413
|
+
const uniqueId = (0, import_react23.useId)();
|
|
41414
|
+
const [internalKey, setInternalKey] = (0, import_react23.useState)(items[0]?.key);
|
|
41480
41415
|
const currentKey = activeKey ?? internalKey;
|
|
41481
|
-
const handleChange = (0,
|
|
41416
|
+
const handleChange = (0, import_react23.useCallback)((key) => {
|
|
41482
41417
|
if (onChange) {
|
|
41483
41418
|
onChange(key);
|
|
41484
41419
|
} else {
|
|
@@ -41486,8 +41421,8 @@ function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullW
|
|
|
41486
41421
|
}
|
|
41487
41422
|
}, [onChange]);
|
|
41488
41423
|
const activeItem = items.find((item) => item.key === currentKey);
|
|
41489
|
-
const tabListRef = (0,
|
|
41490
|
-
const handleTabKeyDown = (0,
|
|
41424
|
+
const tabListRef = (0, import_react23.useRef)(null);
|
|
41425
|
+
const handleTabKeyDown = (0, import_react23.useCallback)((e) => {
|
|
41491
41426
|
const enabledItems = items.filter((item) => !item.disabled);
|
|
41492
41427
|
const currentIndex = enabledItems.findIndex((item) => item.key === currentKey);
|
|
41493
41428
|
let nextIndex;
|
|
@@ -41561,11 +41496,11 @@ function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullW
|
|
|
41561
41496
|
borderRadius: variant === "pills" ? "var(--ggui-shape-radius-lg, 8px)" : void 0,
|
|
41562
41497
|
padding: variant === "pills" ? "var(--ggui-spacing-1, 4px)" : void 0
|
|
41563
41498
|
};
|
|
41564
|
-
return (0,
|
|
41499
|
+
return (0, import_jsx_runtime26.jsxs)("div", { className, style, children: [(0, import_jsx_runtime26.jsx)("div", { ref: tabListRef, role: "tablist", "aria-orientation": "horizontal", style: tabListStyle, children: items.map((item) => {
|
|
41565
41500
|
const isActive = item.key === currentKey;
|
|
41566
41501
|
const isDisabled = !!item.disabled;
|
|
41567
|
-
return (0,
|
|
41568
|
-
}) }), activeItem && (0,
|
|
41502
|
+
return (0, import_jsx_runtime26.jsxs)("button", { role: "tab", id: `${uniqueId}-tab-${item.key}`, "aria-selected": isActive, "aria-controls": `${uniqueId}-panel-${item.key}`, "aria-disabled": isDisabled, tabIndex: isActive ? 0 : -1, onClick: isDisabled ? void 0 : () => handleChange(item.key), onKeyDown: isDisabled ? void 0 : handleTabKeyDown, style: getTabStyle(isActive, isDisabled), children: [item.icon, item.label] }, item.key);
|
|
41503
|
+
}) }), activeItem && (0, import_jsx_runtime26.jsx)("div", { role: "tabpanel", id: `${uniqueId}-panel-${activeItem.key}`, "aria-labelledby": `${uniqueId}-tab-${activeItem.key}`, tabIndex: 0, style: {
|
|
41569
41504
|
padding: "var(--ggui-spacing-4, 16px) 0"
|
|
41570
41505
|
}, children: activeItem.content })] });
|
|
41571
41506
|
}
|
|
@@ -41745,20 +41680,20 @@ var variantStyles4 = {
|
|
|
41745
41680
|
}
|
|
41746
41681
|
};
|
|
41747
41682
|
var defaultIcons2 = {
|
|
41748
|
-
info: (0,
|
|
41749
|
-
success: (0,
|
|
41750
|
-
warning: (0,
|
|
41751
|
-
error: (0,
|
|
41683
|
+
info: (0, import_jsx_runtime27.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
|
|
41684
|
+
success: (0, import_jsx_runtime27.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
|
|
41685
|
+
warning: (0, import_jsx_runtime27.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
|
|
41686
|
+
error: (0, import_jsx_runtime27.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
|
|
41752
41687
|
};
|
|
41753
41688
|
function Toast({ message, variant = "info", title, duration: duration22 = 5e3, onClose, visible = true, style, className }) {
|
|
41754
|
-
(0,
|
|
41689
|
+
(0, import_react24.useEffect)(() => {
|
|
41755
41690
|
if (!visible || duration22 === 0 || !onClose)
|
|
41756
41691
|
return;
|
|
41757
41692
|
const timer = setTimeout(onClose, duration22);
|
|
41758
41693
|
return () => clearTimeout(timer);
|
|
41759
41694
|
}, [visible, duration22, onClose]);
|
|
41760
41695
|
if (!visible) {
|
|
41761
|
-
return (0,
|
|
41696
|
+
return (0, import_jsx_runtime27.jsx)("div", { role: "alert", "aria-live": "assertive", className, style: {
|
|
41762
41697
|
position: "absolute",
|
|
41763
41698
|
width: "1px",
|
|
41764
41699
|
height: "1px",
|
|
@@ -41783,10 +41718,10 @@ function Toast({ message, variant = "info", title, duration: duration22 = 5e3, o
|
|
|
41783
41718
|
animation: animation.slideInUp,
|
|
41784
41719
|
...style
|
|
41785
41720
|
};
|
|
41786
|
-
return (0,
|
|
41721
|
+
return (0, import_jsx_runtime27.jsxs)("div", { role: "alert", "aria-live": "assertive", className, style: toastStyle, children: [(0, import_jsx_runtime27.jsx)("div", { style: { color: vs.icon, flexShrink: 0, marginTop: "2px" }, children: defaultIcons2[variant] }), (0, import_jsx_runtime27.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "2px" }, children: [title && (0, import_jsx_runtime27.jsx)("div", { style: {
|
|
41787
41722
|
fontWeight: "var(--ggui-font-weight-semibold, 600)",
|
|
41788
41723
|
fontSize: "var(--ggui-font-size-sm, 14px)"
|
|
41789
|
-
}, children: title }), (0,
|
|
41724
|
+
}, children: title }), (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: "var(--ggui-font-size-sm, 14px)" }, children: message })] }), onClose && (0, import_jsx_runtime27.jsx)("button", { onClick: onClose, "aria-label": "Dismiss notification", style: {
|
|
41790
41725
|
background: "none",
|
|
41791
41726
|
border: "none",
|
|
41792
41727
|
padding: "4px",
|
|
@@ -41801,16 +41736,16 @@ function Toast({ message, variant = "info", title, duration: duration22 = 5e3, o
|
|
|
41801
41736
|
alignItems: "center",
|
|
41802
41737
|
justifyContent: "center",
|
|
41803
41738
|
borderRadius: "var(--ggui-shape-radius-sm, 4px)"
|
|
41804
|
-
}, children: (0,
|
|
41739
|
+
}, children: (0, import_jsx_runtime27.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] });
|
|
41805
41740
|
}
|
|
41806
|
-
var chevron = (expanded) => (0,
|
|
41741
|
+
var chevron = (expanded) => (0, import_jsx_runtime28.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style: {
|
|
41807
41742
|
transition: `transform ${duration3.normal} ${easing.easeInOut}`,
|
|
41808
41743
|
transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
41809
41744
|
flexShrink: 0
|
|
41810
|
-
}, children: (0,
|
|
41745
|
+
}, children: (0, import_jsx_runtime28.jsx)("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) });
|
|
41811
41746
|
function Accordion({ items, expandedKeys, onChange, multiple = false, variant = "default", style, className }) {
|
|
41812
|
-
const uniqueId = (0,
|
|
41813
|
-
const [internalExpanded, setInternalExpanded] = (0,
|
|
41747
|
+
const uniqueId = (0, import_react25.useId)();
|
|
41748
|
+
const [internalExpanded, setInternalExpanded] = (0, import_react25.useState)([]);
|
|
41814
41749
|
const currentExpanded = expandedKeys ?? internalExpanded;
|
|
41815
41750
|
const handleToggle = (key) => {
|
|
41816
41751
|
let newExpanded;
|
|
@@ -41858,12 +41793,12 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
|
|
|
41858
41793
|
borderTop: isFirst ? "1px solid var(--ggui-color-outlineVariant, #e4e4e7)" : void 0
|
|
41859
41794
|
};
|
|
41860
41795
|
};
|
|
41861
|
-
return (0,
|
|
41796
|
+
return (0, import_jsx_runtime28.jsx)("div", { className, style: containerStyle, children: items.map((item, index) => {
|
|
41862
41797
|
const isExpanded = currentExpanded.includes(item.key);
|
|
41863
41798
|
const isDisabled = !!item.disabled;
|
|
41864
41799
|
const isFirst = index === 0;
|
|
41865
41800
|
const isLast = index === items.length - 1;
|
|
41866
|
-
return (0,
|
|
41801
|
+
return (0, import_jsx_runtime28.jsxs)("div", { style: getItemStyle(isFirst, isLast), children: [(0, import_jsx_runtime28.jsx)("h3", { style: { margin: 0 }, children: (0, import_jsx_runtime28.jsxs)("button", { id: `${uniqueId}-header-${item.key}`, "aria-expanded": isExpanded, "aria-controls": `${uniqueId}-panel-${item.key}`, "aria-disabled": isDisabled, onClick: isDisabled ? void 0 : () => handleToggle(item.key), style: {
|
|
41867
41802
|
display: "flex",
|
|
41868
41803
|
alignItems: "center",
|
|
41869
41804
|
justifyContent: "space-between",
|
|
@@ -41878,9 +41813,9 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
|
|
|
41878
41813
|
color: "var(--ggui-color-onSurface, #18181b)",
|
|
41879
41814
|
textAlign: "left",
|
|
41880
41815
|
transition: `background-color ${duration3.fast} ${easing.easeInOut}`
|
|
41881
|
-
}, children: [(0,
|
|
41816
|
+
}, children: [(0, import_jsx_runtime28.jsx)("span", { children: item.title }), chevron(isExpanded)] }) }), (0, import_jsx_runtime28.jsx)("div", { id: `${uniqueId}-panel-${item.key}`, role: "region", "aria-labelledby": `${uniqueId}-header-${item.key}`, hidden: !isExpanded, style: {
|
|
41882
41817
|
overflow: "hidden"
|
|
41883
|
-
}, children: isExpanded && (0,
|
|
41818
|
+
}, children: isExpanded && (0, import_jsx_runtime28.jsx)("div", { style: {
|
|
41884
41819
|
padding: "0 var(--ggui-spacing-4, 16px) var(--ggui-spacing-4, 16px)",
|
|
41885
41820
|
fontSize: "var(--ggui-font-size-sm, 14px)",
|
|
41886
41821
|
color: "var(--ggui-color-onSurfaceVariant, #52525b)",
|
|
@@ -41890,7 +41825,7 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
|
|
|
41890
41825
|
}
|
|
41891
41826
|
var STYLE_ID = "ggui-motion-keyframes";
|
|
41892
41827
|
function MotionKeyframes() {
|
|
41893
|
-
(0,
|
|
41828
|
+
(0, import_react26.useEffect)(() => {
|
|
41894
41829
|
if (document.getElementById(STYLE_ID))
|
|
41895
41830
|
return;
|
|
41896
41831
|
const styleEl = document.createElement("style");
|
|
@@ -41907,12 +41842,12 @@ function MotionKeyframes() {
|
|
|
41907
41842
|
return null;
|
|
41908
41843
|
}
|
|
41909
41844
|
function useMotion() {
|
|
41910
|
-
const [motionEnabled, setMotionEnabled] = (0,
|
|
41845
|
+
const [motionEnabled, setMotionEnabled] = (0, import_react26.useState)(() => {
|
|
41911
41846
|
if (typeof window === "undefined")
|
|
41912
41847
|
return true;
|
|
41913
41848
|
return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
41914
41849
|
});
|
|
41915
|
-
(0,
|
|
41850
|
+
(0, import_react26.useEffect)(() => {
|
|
41916
41851
|
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
41917
41852
|
const handler = (e) => setMotionEnabled(!e.matches);
|
|
41918
41853
|
mq.addEventListener("change", handler);
|
|
@@ -41921,9 +41856,9 @@ function useMotion() {
|
|
|
41921
41856
|
return { motionEnabled };
|
|
41922
41857
|
}
|
|
41923
41858
|
function useAnimationKey(dep) {
|
|
41924
|
-
const [key, setKey] = (0,
|
|
41925
|
-
const isFirst = (0,
|
|
41926
|
-
(0,
|
|
41859
|
+
const [key, setKey] = (0, import_react26.useState)(0);
|
|
41860
|
+
const isFirst = (0, import_react26.useRef)(true);
|
|
41861
|
+
(0, import_react26.useEffect)(() => {
|
|
41927
41862
|
if (isFirst.current) {
|
|
41928
41863
|
isFirst.current = false;
|
|
41929
41864
|
return;
|
|
@@ -42061,7 +41996,7 @@ var colors = {
|
|
|
42061
41996
|
transparent: "transparent"
|
|
42062
41997
|
};
|
|
42063
41998
|
function SearchField({ value: controlledValue, onChange, onSearch, placeholder = "Search...", showButton = false, buttonText = "Search", loading, disabled, size = "md", style, className }) {
|
|
42064
|
-
const [internalValue, setInternalValue] = (0,
|
|
41999
|
+
const [internalValue, setInternalValue] = (0, import_react27.useState)("");
|
|
42065
42000
|
const value = controlledValue !== void 0 ? controlledValue : internalValue;
|
|
42066
42001
|
const handleChange = (newValue) => {
|
|
42067
42002
|
if (controlledValue === void 0) {
|
|
@@ -42082,12 +42017,12 @@ function SearchField({ value: controlledValue, onChange, onSearch, placeholder =
|
|
|
42082
42017
|
md: "md",
|
|
42083
42018
|
lg: "md"
|
|
42084
42019
|
};
|
|
42085
|
-
return (0,
|
|
42020
|
+
return (0, import_jsx_runtime29.jsxs)("div", { className, style: {
|
|
42086
42021
|
display: "flex",
|
|
42087
42022
|
gap: "8px",
|
|
42088
42023
|
alignItems: "flex-end",
|
|
42089
42024
|
...style
|
|
42090
|
-
}, children: [(0,
|
|
42025
|
+
}, children: [(0, import_jsx_runtime29.jsxs)("div", { style: { position: "relative", flex: 1 }, children: [(0, import_jsx_runtime29.jsx)("div", { style: {
|
|
42091
42026
|
position: "absolute",
|
|
42092
42027
|
left: "12px",
|
|
42093
42028
|
top: "50%",
|
|
@@ -42096,7 +42031,7 @@ function SearchField({ value: controlledValue, onChange, onSearch, placeholder =
|
|
|
42096
42031
|
pointerEvents: "none",
|
|
42097
42032
|
display: "flex",
|
|
42098
42033
|
alignItems: "center"
|
|
42099
|
-
}, children: loading ? (0,
|
|
42034
|
+
}, children: loading ? (0, import_jsx_runtime29.jsx)(Spinner, { size: 16 }) : (0, import_jsx_runtime29.jsx)(Icon, { name: "search", size: 16 }) }), (0, import_jsx_runtime29.jsx)("input", { type: "search", value, onChange: (e) => handleChange(e.target.value), onKeyDown: handleKeyDown, placeholder, disabled: disabled || loading, style: {
|
|
42100
42035
|
width: "100%",
|
|
42101
42036
|
padding: size === "sm" ? "6px 10px 6px 36px" : size === "lg" ? "12px 14px 12px 40px" : "10px 12px 10px 38px",
|
|
42102
42037
|
paddingLeft: "36px",
|
|
@@ -42107,24 +42042,24 @@ function SearchField({ value: controlledValue, onChange, onSearch, placeholder =
|
|
|
42107
42042
|
color: colors.gray[900],
|
|
42108
42043
|
outline: "none",
|
|
42109
42044
|
boxSizing: "border-box"
|
|
42110
|
-
} })] }), showButton && (0,
|
|
42045
|
+
} })] }), showButton && (0, import_jsx_runtime29.jsx)(Button, { onClick: handleSubmit, disabled: disabled || loading, size: buttonSizes[size], loading, children: buttonText })] });
|
|
42111
42046
|
}
|
|
42112
42047
|
function FormField({ label, children, error: error210, helperText, required: required2, description, style, className }) {
|
|
42113
42048
|
const hasError = Boolean(error210);
|
|
42114
|
-
return (0,
|
|
42049
|
+
return (0, import_jsx_runtime30.jsxs)("div", { className, style: {
|
|
42115
42050
|
display: "flex",
|
|
42116
42051
|
flexDirection: "column",
|
|
42117
42052
|
gap: "4px",
|
|
42118
42053
|
...style
|
|
42119
|
-
}, children: [(0,
|
|
42054
|
+
}, children: [(0, import_jsx_runtime30.jsxs)("label", { style: {
|
|
42120
42055
|
fontSize: fontSize.sm,
|
|
42121
42056
|
fontWeight: fontWeight.medium,
|
|
42122
42057
|
color: colors.gray[700]
|
|
42123
|
-
}, children: [label, required2 && (0,
|
|
42058
|
+
}, children: [label, required2 && (0, import_jsx_runtime30.jsx)("span", { style: { color: colors.error[500], marginLeft: "2px" }, children: "*" })] }), description && (0, import_jsx_runtime30.jsx)("span", { style: {
|
|
42124
42059
|
fontSize: fontSize.xs,
|
|
42125
42060
|
color: colors.gray[500],
|
|
42126
42061
|
marginBottom: "4px"
|
|
42127
|
-
}, children: description }), children, (error210 || helperText) && (0,
|
|
42062
|
+
}, children: description }), children, (error210 || helperText) && (0, import_jsx_runtime30.jsx)("span", { style: {
|
|
42128
42063
|
fontSize: fontSize.xs,
|
|
42129
42064
|
color: hasError ? colors.error[500] : colors.gray[500]
|
|
42130
42065
|
}, children: error210 || helperText })] });
|
|
@@ -42133,7 +42068,7 @@ function MenuItem({ label, icon, rightElement, onClick, disabled, active, danger
|
|
|
42133
42068
|
const baseColor = danger ? colors.error[600] : colors.gray[700];
|
|
42134
42069
|
const hoverBg = danger ? colors.error[50] : colors.gray[100];
|
|
42135
42070
|
const activeBg = danger ? colors.error[100] : colors.primary[50];
|
|
42136
|
-
return (0,
|
|
42071
|
+
return (0, import_jsx_runtime31.jsxs)("button", { onClick: disabled ? void 0 : onClick, disabled, className, style: {
|
|
42137
42072
|
display: "flex",
|
|
42138
42073
|
alignItems: "center",
|
|
42139
42074
|
gap: "8px",
|
|
@@ -42157,7 +42092,7 @@ function MenuItem({ label, icon, rightElement, onClick, disabled, active, danger
|
|
|
42157
42092
|
if (!disabled && !active) {
|
|
42158
42093
|
e.target.style.backgroundColor = "transparent";
|
|
42159
42094
|
}
|
|
42160
|
-
}, children: [icon && (0,
|
|
42095
|
+
}, children: [icon && (0, import_jsx_runtime31.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: icon }), (0, import_jsx_runtime31.jsx)("span", { style: { flex: 1 }, children: label }), rightElement && (0, import_jsx_runtime31.jsx)("span", { style: { display: "flex", flexShrink: 0, color: colors.gray[400] }, children: rightElement })] });
|
|
42161
42096
|
}
|
|
42162
42097
|
var variantStyles5 = {
|
|
42163
42098
|
default: {
|
|
@@ -42198,7 +42133,7 @@ var sizeStyles6 = {
|
|
|
42198
42133
|
};
|
|
42199
42134
|
function Tag({ children, variant = "default", size = "md", closable, onClose, icon, style, className }) {
|
|
42200
42135
|
const sizeStyle = sizeStyles6[size];
|
|
42201
|
-
return (0,
|
|
42136
|
+
return (0, import_jsx_runtime32.jsxs)("span", { className, style: {
|
|
42202
42137
|
display: "inline-flex",
|
|
42203
42138
|
alignItems: "center",
|
|
42204
42139
|
gap: sizeStyle.gap,
|
|
@@ -42208,7 +42143,7 @@ function Tag({ children, variant = "default", size = "md", closable, onClose, ic
|
|
|
42208
42143
|
borderRadius: "6px",
|
|
42209
42144
|
...variantStyles5[variant],
|
|
42210
42145
|
...style
|
|
42211
|
-
}, children: [icon && (0,
|
|
42146
|
+
}, children: [icon && (0, import_jsx_runtime32.jsx)("span", { style: { display: "flex" }, children: icon }), children, closable && (0, import_jsx_runtime32.jsx)("button", { onClick: onClose, style: {
|
|
42212
42147
|
display: "flex",
|
|
42213
42148
|
alignItems: "center",
|
|
42214
42149
|
justifyContent: "center",
|
|
@@ -42219,12 +42154,12 @@ function Tag({ children, variant = "default", size = "md", closable, onClose, ic
|
|
|
42219
42154
|
cursor: "pointer",
|
|
42220
42155
|
opacity: 0.7,
|
|
42221
42156
|
marginLeft: "2px"
|
|
42222
|
-
}, "aria-label": "Remove", children: (0,
|
|
42157
|
+
}, "aria-label": "Remove", children: (0, import_jsx_runtime32.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: (0, import_jsx_runtime32.jsx)("path", { d: "M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6 9.5 3.205z" }) }) })] });
|
|
42223
42158
|
}
|
|
42224
42159
|
function Dropdown({ trigger, options, value, onChange, placement = "bottom-start", disabled, style, className }) {
|
|
42225
|
-
const [isOpen, setIsOpen] = (0,
|
|
42226
|
-
const containerRef = (0,
|
|
42227
|
-
(0,
|
|
42160
|
+
const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
|
|
42161
|
+
const containerRef = (0, import_react28.useRef)(null);
|
|
42162
|
+
(0, import_react28.useEffect)(() => {
|
|
42228
42163
|
const handleClickOutside = (event) => {
|
|
42229
42164
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
42230
42165
|
setIsOpen(false);
|
|
@@ -42235,7 +42170,7 @@ function Dropdown({ trigger, options, value, onChange, placement = "bottom-start
|
|
|
42235
42170
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
42236
42171
|
}
|
|
42237
42172
|
}, [isOpen]);
|
|
42238
|
-
(0,
|
|
42173
|
+
(0, import_react28.useEffect)(() => {
|
|
42239
42174
|
const handleEscape = (event) => {
|
|
42240
42175
|
if (event.key === "Escape") {
|
|
42241
42176
|
setIsOpen(false);
|
|
@@ -42264,11 +42199,11 @@ function Dropdown({ trigger, options, value, onChange, placement = "bottom-start
|
|
|
42264
42199
|
return { top: "100%", left: 0, marginTop: "4px" };
|
|
42265
42200
|
}
|
|
42266
42201
|
};
|
|
42267
|
-
return (0,
|
|
42202
|
+
return (0, import_jsx_runtime33.jsxs)("div", { ref: containerRef, className, style: {
|
|
42268
42203
|
position: "relative",
|
|
42269
42204
|
display: "inline-block",
|
|
42270
42205
|
...style
|
|
42271
|
-
}, children: [(0,
|
|
42206
|
+
}, children: [(0, import_jsx_runtime33.jsx)("div", { onClick: () => !disabled && setIsOpen(!isOpen), style: { cursor: disabled ? "not-allowed" : "pointer" }, children: trigger }), isOpen && (0, import_jsx_runtime33.jsx)("div", { style: {
|
|
42272
42207
|
position: "absolute",
|
|
42273
42208
|
...getMenuPosition(),
|
|
42274
42209
|
minWidth: "160px",
|
|
@@ -42278,19 +42213,19 @@ function Dropdown({ trigger, options, value, onChange, placement = "bottom-start
|
|
|
42278
42213
|
boxShadow: shadow.lg,
|
|
42279
42214
|
zIndex: zIndex.dropdown,
|
|
42280
42215
|
padding: "4px"
|
|
42281
|
-
}, children: options.map((option) => (0,
|
|
42216
|
+
}, children: options.map((option) => (0, import_jsx_runtime33.jsx)(MenuItem, { label: option.label, icon: option.icon, onClick: () => handleSelect(option.value), disabled: option.disabled, active: value === option.value, danger: option.danger }, option.value)) })] });
|
|
42282
42217
|
}
|
|
42283
42218
|
function Autocomplete({ value = "", onChange, onSelect, options, placeholder, label, loading, disabled, error: error210, noResultsText = "No results found", style, className }) {
|
|
42284
|
-
const [isOpen, setIsOpen] = (0,
|
|
42285
|
-
const [highlightedIndex, setHighlightedIndex] = (0,
|
|
42286
|
-
const containerRef = (0,
|
|
42287
|
-
const filteredOptions = (0,
|
|
42219
|
+
const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
|
|
42220
|
+
const [highlightedIndex, setHighlightedIndex] = (0, import_react29.useState)(-1);
|
|
42221
|
+
const containerRef = (0, import_react29.useRef)(null);
|
|
42222
|
+
const filteredOptions = (0, import_react29.useMemo)(() => {
|
|
42288
42223
|
if (!value)
|
|
42289
42224
|
return options;
|
|
42290
42225
|
const lowerValue = value.toLowerCase();
|
|
42291
42226
|
return options.filter((opt) => opt.label.toLowerCase().includes(lowerValue) || opt.value.toLowerCase().includes(lowerValue));
|
|
42292
42227
|
}, [options, value]);
|
|
42293
|
-
(0,
|
|
42228
|
+
(0, import_react29.useEffect)(() => {
|
|
42294
42229
|
const handleClickOutside = (event) => {
|
|
42295
42230
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
42296
42231
|
setIsOpen(false);
|
|
@@ -42338,10 +42273,10 @@ function Autocomplete({ value = "", onChange, onSelect, options, placeholder, la
|
|
|
42338
42273
|
break;
|
|
42339
42274
|
}
|
|
42340
42275
|
};
|
|
42341
|
-
return (0,
|
|
42276
|
+
return (0, import_jsx_runtime34.jsxs)("div", { ref: containerRef, className, style: {
|
|
42342
42277
|
position: "relative",
|
|
42343
42278
|
...style
|
|
42344
|
-
}, children: [(0,
|
|
42279
|
+
}, children: [(0, import_jsx_runtime34.jsx)("div", { onKeyDown: handleKeyDown, children: (0, import_jsx_runtime34.jsx)(Input, { label, value, onChange: handleInputChange, onFocus: () => setIsOpen(true), placeholder, disabled, error: error210 }) }), isOpen && (0, import_jsx_runtime34.jsx)("div", { style: {
|
|
42345
42280
|
position: "absolute",
|
|
42346
42281
|
top: "100%",
|
|
42347
42282
|
left: 0,
|
|
@@ -42354,12 +42289,12 @@ function Autocomplete({ value = "", onChange, onSelect, options, placeholder, la
|
|
|
42354
42289
|
zIndex: zIndex.dropdown,
|
|
42355
42290
|
maxHeight: "240px",
|
|
42356
42291
|
overflow: "auto"
|
|
42357
|
-
}, children: loading ? (0,
|
|
42292
|
+
}, children: loading ? (0, import_jsx_runtime34.jsx)("div", { style: { padding: "12px", display: "flex", justifyContent: "center" }, children: (0, import_jsx_runtime34.jsx)(Spinner, { size: 20 }) }) : filteredOptions.length === 0 ? (0, import_jsx_runtime34.jsx)("div", { style: {
|
|
42358
42293
|
padding: "12px",
|
|
42359
42294
|
textAlign: "center",
|
|
42360
42295
|
color: colors.gray[500],
|
|
42361
42296
|
fontSize: fontSize.sm
|
|
42362
|
-
}, children: noResultsText }) : filteredOptions.map((option, index) => (0,
|
|
42297
|
+
}, children: noResultsText }) : filteredOptions.map((option, index) => (0, import_jsx_runtime34.jsxs)("div", { onClick: () => !option.disabled && handleSelect(option), style: {
|
|
42363
42298
|
padding: "8px 12px",
|
|
42364
42299
|
cursor: option.disabled ? "not-allowed" : "pointer",
|
|
42365
42300
|
backgroundColor: highlightedIndex === index ? colors.gray[100] : "transparent",
|
|
@@ -42368,10 +42303,10 @@ function Autocomplete({ value = "", onChange, onSelect, options, placeholder, la
|
|
|
42368
42303
|
display: "flex",
|
|
42369
42304
|
alignItems: "center",
|
|
42370
42305
|
gap: "8px"
|
|
42371
|
-
}, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0,
|
|
42306
|
+
}, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0, import_jsx_runtime34.jsx)("span", { style: { flexShrink: 0 }, children: option.icon }), (0, import_jsx_runtime34.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime34.jsx)("div", { children: option.label }), option.description && (0, import_jsx_runtime34.jsx)("div", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: option.description })] })] }, option.value)) })] });
|
|
42372
42307
|
}
|
|
42373
42308
|
function Breadcrumb({ items, separator = "/", onItemClick, style, className }) {
|
|
42374
|
-
return (0,
|
|
42309
|
+
return (0, import_jsx_runtime35.jsx)("nav", { "aria-label": "Breadcrumb", className, style: {
|
|
42375
42310
|
display: "flex",
|
|
42376
42311
|
alignItems: "center",
|
|
42377
42312
|
gap: "8px",
|
|
@@ -42379,19 +42314,19 @@ function Breadcrumb({ items, separator = "/", onItemClick, style, className }) {
|
|
|
42379
42314
|
...style
|
|
42380
42315
|
}, children: items.map((item, index) => {
|
|
42381
42316
|
const isLast = index === items.length - 1;
|
|
42382
|
-
return (0,
|
|
42317
|
+
return (0, import_jsx_runtime35.jsxs)(import_react30.Fragment, { children: [index > 0 && (0, import_jsx_runtime35.jsx)("span", { style: { color: colors.gray[400] }, children: separator }), item.icon && (0, import_jsx_runtime35.jsx)("span", { style: {
|
|
42383
42318
|
display: "flex",
|
|
42384
42319
|
alignItems: "center",
|
|
42385
42320
|
color: isLast ? colors.gray[900] : colors.gray[500]
|
|
42386
|
-
}, children: item.icon }), isLast ? (0,
|
|
42321
|
+
}, children: item.icon }), isLast ? (0, import_jsx_runtime35.jsx)("span", { style: {
|
|
42387
42322
|
color: colors.gray[900],
|
|
42388
42323
|
fontWeight: 500
|
|
42389
|
-
}, "aria-current": "page", children: item.label }) : item.href ? (0,
|
|
42324
|
+
}, "aria-current": "page", children: item.label }) : item.href ? (0, import_jsx_runtime35.jsx)(Link, { href: item.href, tone: "muted", underline: "hover", onClick: (e) => {
|
|
42390
42325
|
if (onItemClick) {
|
|
42391
42326
|
e.preventDefault();
|
|
42392
42327
|
onItemClick(item, index);
|
|
42393
42328
|
}
|
|
42394
|
-
}, children: item.label }) : (0,
|
|
42329
|
+
}, children: item.label }) : (0, import_jsx_runtime35.jsx)("button", { onClick: () => onItemClick?.(item, index), style: {
|
|
42395
42330
|
background: "none",
|
|
42396
42331
|
border: "none",
|
|
42397
42332
|
padding: 0,
|
|
@@ -42434,7 +42369,7 @@ function Pagination({ currentPage, totalPages, onPageChange, showFirstLast = tru
|
|
|
42434
42369
|
};
|
|
42435
42370
|
const buttonSize = size === "sm" ? "xs" : size === "lg" ? "md" : "sm";
|
|
42436
42371
|
const iconSize = size === "sm" ? 14 : size === "lg" ? 20 : 16;
|
|
42437
|
-
const PageButton = ({ page, active }) => (0,
|
|
42372
|
+
const PageButton = ({ page, active }) => (0, import_jsx_runtime36.jsx)("button", { onClick: () => !disabled && onPageChange?.(page), disabled, style: {
|
|
42438
42373
|
minWidth: size === "sm" ? "28px" : size === "lg" ? "40px" : "32px",
|
|
42439
42374
|
height: size === "sm" ? "28px" : size === "lg" ? "40px" : "32px",
|
|
42440
42375
|
padding: "0 8px",
|
|
@@ -42448,15 +42383,15 @@ function Pagination({ currentPage, totalPages, onPageChange, showFirstLast = tru
|
|
|
42448
42383
|
opacity: disabled ? 0.5 : 1,
|
|
42449
42384
|
transition: "all 0.15s"
|
|
42450
42385
|
}, children: page });
|
|
42451
|
-
return (0,
|
|
42386
|
+
return (0, import_jsx_runtime36.jsxs)("nav", { "aria-label": "Pagination", className, style: {
|
|
42452
42387
|
display: "flex",
|
|
42453
42388
|
alignItems: "center",
|
|
42454
42389
|
gap: "4px",
|
|
42455
42390
|
...style
|
|
42456
|
-
}, children: [showFirstLast && (0,
|
|
42391
|
+
}, children: [showFirstLast && (0, import_jsx_runtime36.jsxs)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(1), disabled: disabled || currentPage === 1, "aria-label": "First page", children: [(0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-left", size: iconSize }), (0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-left", size: iconSize, style: { marginLeft: "-8px" } })] }), (0, import_jsx_runtime36.jsx)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(currentPage - 1), disabled: disabled || currentPage === 1, "aria-label": "Previous page", children: (0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-left", size: iconSize }) }), getVisiblePages().map((page, index) => page === "ellipsis" ? (0, import_jsx_runtime36.jsx)("span", { style: {
|
|
42457
42392
|
padding: "0 4px",
|
|
42458
42393
|
color: colors.gray[400]
|
|
42459
|
-
}, children: "..." }, `ellipsis-${index}`) : (0,
|
|
42394
|
+
}, children: "..." }, `ellipsis-${index}`) : (0, import_jsx_runtime36.jsx)(PageButton, { page, active: page === currentPage }, page)), (0, import_jsx_runtime36.jsx)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(currentPage + 1), disabled: disabled || currentPage === totalPages, "aria-label": "Next page", children: (0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-right", size: iconSize }) }), showFirstLast && (0, import_jsx_runtime36.jsxs)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(totalPages), disabled: disabled || currentPage === totalPages, "aria-label": "Last page", children: [(0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-right", size: iconSize }), (0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-right", size: iconSize, style: { marginLeft: "-8px" } })] })] });
|
|
42460
42395
|
}
|
|
42461
42396
|
function EmptyState({ icon, title, description, action, style, className }) {
|
|
42462
42397
|
const composedStyle = {
|
|
@@ -42464,11 +42399,11 @@ function EmptyState({ icon, title, description, action, style, className }) {
|
|
|
42464
42399
|
padding: "var(--ggui-spacing-xl, 32px)",
|
|
42465
42400
|
...style
|
|
42466
42401
|
};
|
|
42467
|
-
return (0,
|
|
42402
|
+
return (0, import_jsx_runtime37.jsxs)(Stack, { align: "center", gap: "sm", className, style: composedStyle, children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime37.jsx)(Icon, { name: icon, size: 40, tone: "subtle" }) : icon), (0, import_jsx_runtime37.jsx)(Heading, { level: 3, children: title }), description !== void 0 && (0, import_jsx_runtime37.jsx)(Text, { tone: "muted", children: description }), action !== void 0 && (0, import_jsx_runtime37.jsx)("div", { style: { marginTop: "var(--ggui-spacing-sm, 8px)" }, children: action })] });
|
|
42468
42403
|
}
|
|
42469
42404
|
function Stat({ label, value, delta, trend = "neutral", icon, style, className }) {
|
|
42470
42405
|
const deltaTone = trend === "up" ? "success" : trend === "down" ? "error" : "muted";
|
|
42471
|
-
return (0,
|
|
42406
|
+
return (0, import_jsx_runtime38.jsxs)(Stack, { gap: "xs", className, style, children: [(0, import_jsx_runtime38.jsxs)(Row, { gap: "xs", align: "center", children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime38.jsx)(Icon, { name: icon, size: 16, tone: "muted" }) : icon), (0, import_jsx_runtime38.jsx)(Text, { size: "xs", weight: "semibold", caps: true, tone: "muted", children: label })] }), (0, import_jsx_runtime38.jsxs)(Row, { gap: "sm", align: "end", children: [(0, import_jsx_runtime38.jsx)(Text, { size: "3xl", weight: "bold", children: value }), delta !== void 0 && (0, import_jsx_runtime38.jsx)(Text, { size: "sm", weight: "semibold", tone: deltaTone, children: delta })] })] });
|
|
42472
42407
|
}
|
|
42473
42408
|
var MARKER_SIZE = 28;
|
|
42474
42409
|
function stepState(index, current) {
|
|
@@ -42496,7 +42431,7 @@ var markerStyles = {
|
|
|
42496
42431
|
}
|
|
42497
42432
|
};
|
|
42498
42433
|
function Marker({ index, state }) {
|
|
42499
|
-
return (0,
|
|
42434
|
+
return (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": "true", style: {
|
|
42500
42435
|
width: MARKER_SIZE,
|
|
42501
42436
|
height: MARKER_SIZE,
|
|
42502
42437
|
borderRadius: "50%",
|
|
@@ -42507,19 +42442,19 @@ function Marker({ index, state }) {
|
|
|
42507
42442
|
boxSizing: "border-box",
|
|
42508
42443
|
transition: "background-color 0.2s, border-color 0.2s, color 0.2s",
|
|
42509
42444
|
...markerStyles[state]
|
|
42510
|
-
}, children: state === "completed" ? (0,
|
|
42445
|
+
}, children: state === "completed" ? (0, import_jsx_runtime39.jsx)(Icon, { name: "check", size: 16, tone: "inherit" }) : (0, import_jsx_runtime39.jsx)(Text, { is: "span", size: "sm", weight: "semibold", tone: "inherit", children: index + 1 }) });
|
|
42511
42446
|
}
|
|
42512
42447
|
function StepLabel({ label, state }) {
|
|
42513
|
-
return (0,
|
|
42448
|
+
return (0, import_jsx_runtime39.jsx)(Text, { is: "span", size: "sm", weight: state === "current" ? "semibold" : "normal", tone: state === "upcoming" ? "muted" : "default", children: label });
|
|
42514
42449
|
}
|
|
42515
42450
|
function Stepper({ steps, current, orientation = "horizontal", onStepClick, style, className }) {
|
|
42516
42451
|
const renderStep = (label, index) => {
|
|
42517
42452
|
const state = stepState(index, current);
|
|
42518
|
-
const content = (0,
|
|
42453
|
+
const content = (0, import_jsx_runtime39.jsxs)(Row, { gap: "sm", align: "center", children: [(0, import_jsx_runtime39.jsx)(Marker, { index, state }), (0, import_jsx_runtime39.jsx)(StepLabel, { label, state })] });
|
|
42519
42454
|
if (onStepClick === void 0) {
|
|
42520
|
-
return (0,
|
|
42455
|
+
return (0, import_jsx_runtime39.jsx)("span", { "aria-current": state === "current" ? "step" : void 0, children: content });
|
|
42521
42456
|
}
|
|
42522
|
-
return (0,
|
|
42457
|
+
return (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: () => onStepClick(index), "aria-current": state === "current" ? "step" : void 0, style: {
|
|
42523
42458
|
background: "none",
|
|
42524
42459
|
border: "none",
|
|
42525
42460
|
padding: 0,
|
|
@@ -42530,14 +42465,14 @@ function Stepper({ steps, current, orientation = "horizontal", onStepClick, styl
|
|
|
42530
42465
|
}, children: content });
|
|
42531
42466
|
};
|
|
42532
42467
|
if (orientation === "vertical") {
|
|
42533
|
-
return (0,
|
|
42468
|
+
return (0, import_jsx_runtime39.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime39.jsx)(Stack, { gap: "none", align: "start", children: steps.map((label, index) => (0, import_jsx_runtime39.jsxs)(Stack, { gap: "none", align: "start", children: [index > 0 && (0, import_jsx_runtime39.jsx)("span", { style: {
|
|
42534
42469
|
width: MARKER_SIZE,
|
|
42535
42470
|
height: 16,
|
|
42536
42471
|
display: "inline-flex",
|
|
42537
42472
|
justifyContent: "center"
|
|
42538
|
-
}, children: (0,
|
|
42473
|
+
}, children: (0, import_jsx_runtime39.jsx)(Divider, { orientation: "vertical", margin: 0 }) }), renderStep(label, index)] }, index)) }) });
|
|
42539
42474
|
}
|
|
42540
|
-
return (0,
|
|
42475
|
+
return (0, import_jsx_runtime39.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime39.jsx)(Row, { gap: "sm", align: "center", children: steps.map((label, index) => (0, import_jsx_runtime39.jsxs)(Row, { gap: "sm", align: "center", style: index > 0 ? { flex: 1 } : void 0, children: [index > 0 && (0, import_jsx_runtime39.jsx)(Divider, { style: { flex: 1, minWidth: 16, margin: 0 } }), renderStep(label, index)] }, index)) }) });
|
|
42541
42476
|
}
|
|
42542
42477
|
var SAFE_HREF = /^(?:https?:\/\/|mailto:)[^\s\x00-\x1f]+$/i;
|
|
42543
42478
|
function safeHref(raw) {
|
|
@@ -42846,16 +42781,16 @@ function renderRichTextInlines(inlines) {
|
|
|
42846
42781
|
case "text":
|
|
42847
42782
|
return node.text;
|
|
42848
42783
|
case "break":
|
|
42849
|
-
return (0,
|
|
42784
|
+
return (0, import_jsx_runtime40.jsx)("br", {}, i);
|
|
42850
42785
|
case "strong":
|
|
42851
|
-
return (0,
|
|
42786
|
+
return (0, import_jsx_runtime40.jsx)("strong", { children: renderRichTextInlines(node.children) }, i);
|
|
42852
42787
|
case "em":
|
|
42853
|
-
return (0,
|
|
42788
|
+
return (0, import_jsx_runtime40.jsx)("em", { children: renderRichTextInlines(node.children) }, i);
|
|
42854
42789
|
case "code":
|
|
42855
|
-
return (0,
|
|
42790
|
+
return (0, import_jsx_runtime40.jsx)("code", { style: CODE_INLINE, children: node.code }, i);
|
|
42856
42791
|
case "link": {
|
|
42857
42792
|
const children = renderRichTextInlines(node.children);
|
|
42858
|
-
return node.href !== void 0 ? (0,
|
|
42793
|
+
return node.href !== void 0 ? (0, import_jsx_runtime40.jsx)(Link, { href: node.href, external: true, children }, i) : (0, import_jsx_runtime40.jsx)("span", { style: LINK_INERT, children }, i);
|
|
42859
42794
|
}
|
|
42860
42795
|
}
|
|
42861
42796
|
});
|
|
@@ -42863,20 +42798,20 @@ function renderRichTextInlines(inlines) {
|
|
|
42863
42798
|
function renderBlock(block, key) {
|
|
42864
42799
|
switch (block.type) {
|
|
42865
42800
|
case "paragraph":
|
|
42866
|
-
return (0,
|
|
42801
|
+
return (0, import_jsx_runtime40.jsx)(Text, { children: renderRichTextInlines(block.children) }, key);
|
|
42867
42802
|
case "heading":
|
|
42868
|
-
return (0,
|
|
42803
|
+
return (0, import_jsx_runtime40.jsx)(Heading, { level: block.level, children: renderRichTextInlines(block.children) }, key);
|
|
42869
42804
|
case "code-fence":
|
|
42870
|
-
return (0,
|
|
42805
|
+
return (0, import_jsx_runtime40.jsx)("pre", { style: CODE_FENCE, "data-lang": block.lang, children: (0, import_jsx_runtime40.jsx)("code", { children: block.code }) }, key);
|
|
42871
42806
|
case "list": {
|
|
42872
|
-
const items = block.items.map((item, i) => (0,
|
|
42873
|
-
return block.ordered ? (0,
|
|
42807
|
+
const items = block.items.map((item, i) => (0, import_jsx_runtime40.jsx)("li", { children: renderRichTextInlines(item.children) }, i));
|
|
42808
|
+
return block.ordered ? (0, import_jsx_runtime40.jsx)("ol", { start: block.start, style: LIST, children: items }, key) : (0, import_jsx_runtime40.jsx)("ul", { style: LIST, children: items }, key);
|
|
42874
42809
|
}
|
|
42875
42810
|
}
|
|
42876
42811
|
}
|
|
42877
42812
|
function Markdown({ markdown, className, style }) {
|
|
42878
42813
|
const blocks = parseRichText(markdown);
|
|
42879
|
-
return (0,
|
|
42814
|
+
return (0, import_jsx_runtime40.jsx)("div", { className, "data-ggui-markdown": "", style: {
|
|
42880
42815
|
display: "flex",
|
|
42881
42816
|
flexDirection: "column",
|
|
42882
42817
|
gap: "var(--ggui-spacing-sm, 12px)",
|
|
@@ -42884,7 +42819,7 @@ function Markdown({ markdown, className, style }) {
|
|
|
42884
42819
|
}, children: blocks.map(renderBlock) });
|
|
42885
42820
|
}
|
|
42886
42821
|
function MarkdownInline({ markdown }) {
|
|
42887
|
-
return (0,
|
|
42822
|
+
return (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: renderRichTextInlines(parseInlineRichText(markdown)) });
|
|
42888
42823
|
}
|
|
42889
42824
|
var compositions_exports = {};
|
|
42890
42825
|
__export2(compositions_exports, {
|
|
@@ -42903,7 +42838,7 @@ __export2(compositions_exports, {
|
|
|
42903
42838
|
Sidebar: () => Sidebar
|
|
42904
42839
|
});
|
|
42905
42840
|
function Header({ logo, navigation: navigation2, actions, sticky = false, background, bordered = true, style, className }) {
|
|
42906
|
-
return (0,
|
|
42841
|
+
return (0, import_jsx_runtime41.jsxs)("header", { className, style: {
|
|
42907
42842
|
display: "flex",
|
|
42908
42843
|
alignItems: "center",
|
|
42909
42844
|
justifyContent: "space-between",
|
|
@@ -42917,10 +42852,10 @@ function Header({ logo, navigation: navigation2, actions, sticky = false, backgr
|
|
|
42917
42852
|
boxShadow: shadow.sm
|
|
42918
42853
|
},
|
|
42919
42854
|
...style
|
|
42920
|
-
}, children: [logo && (0,
|
|
42855
|
+
}, children: [logo && (0, import_jsx_runtime41.jsx)("div", { style: { flexShrink: 0 }, children: logo }), navigation2 && (0, import_jsx_runtime41.jsx)("nav", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: "32px" }, children: navigation2 }), actions && (0, import_jsx_runtime41.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexShrink: 0 }, children: actions })] });
|
|
42921
42856
|
}
|
|
42922
42857
|
function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
|
|
42923
|
-
const [expanded, setExpanded] = (0,
|
|
42858
|
+
const [expanded, setExpanded] = (0, import_react31.useState)(false);
|
|
42924
42859
|
const hasChildren = item.children && item.children.length > 0;
|
|
42925
42860
|
const isActive = activeId === item.id;
|
|
42926
42861
|
const handleClick = () => {
|
|
@@ -42929,7 +42864,7 @@ function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
|
|
|
42929
42864
|
}
|
|
42930
42865
|
onItemClick?.(item);
|
|
42931
42866
|
};
|
|
42932
|
-
return (0,
|
|
42867
|
+
return (0, import_jsx_runtime42.jsxs)("div", { children: [(0, import_jsx_runtime42.jsxs)("button", { onClick: handleClick, disabled: item.disabled, style: {
|
|
42933
42868
|
display: "flex",
|
|
42934
42869
|
alignItems: "center",
|
|
42935
42870
|
gap: "12px",
|
|
@@ -42946,11 +42881,11 @@ function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
|
|
|
42946
42881
|
cursor: item.disabled ? "not-allowed" : "pointer",
|
|
42947
42882
|
transition: "all 0.15s",
|
|
42948
42883
|
justifyContent: collapsed ? "center" : "flex-start"
|
|
42949
|
-
}, children: [item.icon && (0,
|
|
42884
|
+
}, children: [item.icon && (0, import_jsx_runtime42.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: item.icon }), !collapsed && (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [(0, import_jsx_runtime42.jsx)("span", { style: { flex: 1 }, children: item.label }), item.badge && (0, import_jsx_runtime42.jsx)("span", { children: item.badge }), hasChildren && (0, import_jsx_runtime42.jsx)(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: 14, tone: "subtle" })] })] }), hasChildren && expanded && !collapsed && (0, import_jsx_runtime42.jsx)("div", { style: { marginTop: "4px" }, children: item.children.map((child) => (0, import_jsx_runtime42.jsx)(SidebarItem, { item: child, activeId, onItemClick, collapsed, depth: depth + 1 }, child.id)) })] });
|
|
42950
42885
|
}
|
|
42951
42886
|
function Sidebar({ items, activeId, onItemClick, collapsed = false, header, footer, width = 256, collapsedWidth = 64, style, className }) {
|
|
42952
42887
|
const currentWidth = collapsed ? collapsedWidth : width;
|
|
42953
|
-
return (0,
|
|
42888
|
+
return (0, import_jsx_runtime42.jsxs)("aside", { className, style: {
|
|
42954
42889
|
width: currentWidth,
|
|
42955
42890
|
minWidth: currentWidth,
|
|
42956
42891
|
height: "100%",
|
|
@@ -42961,15 +42896,15 @@ function Sidebar({ items, activeId, onItemClick, collapsed = false, header, foot
|
|
|
42961
42896
|
transition: "width 0.2s",
|
|
42962
42897
|
overflow: "hidden",
|
|
42963
42898
|
...style
|
|
42964
|
-
}, children: [header && (0,
|
|
42899
|
+
}, children: [header && (0, import_jsx_runtime42.jsx)("div", { style: {
|
|
42965
42900
|
padding: collapsed ? "16px 8px" : "16px",
|
|
42966
42901
|
borderBottom: `1px solid ${colors.gray[200]}`
|
|
42967
|
-
}, children: header }), (0,
|
|
42902
|
+
}, children: header }), (0, import_jsx_runtime42.jsx)("nav", { style: {
|
|
42968
42903
|
flex: 1,
|
|
42969
42904
|
padding: "8px",
|
|
42970
42905
|
overflowY: "auto",
|
|
42971
42906
|
overflowX: "hidden"
|
|
42972
|
-
}, children: (0,
|
|
42907
|
+
}, children: (0, import_jsx_runtime42.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: items.map((item) => (0, import_jsx_runtime42.jsx)(SidebarItem, { item, activeId, onItemClick, collapsed }, item.id)) }) }), footer && (0, import_jsx_runtime42.jsx)("div", { style: {
|
|
42973
42908
|
padding: collapsed ? "16px 8px" : "16px",
|
|
42974
42909
|
borderTop: `1px solid ${colors.gray[200]}`
|
|
42975
42910
|
}, children: footer })] });
|
|
@@ -42981,7 +42916,7 @@ function CardGrid({ children, columns = 3, gap = 16, style, className }) {
|
|
|
42981
42916
|
}
|
|
42982
42917
|
return `repeat(auto-fit, minmax(280px, 1fr))`;
|
|
42983
42918
|
};
|
|
42984
|
-
return (0,
|
|
42919
|
+
return (0, import_jsx_runtime43.jsx)("div", { className, style: {
|
|
42985
42920
|
display: "grid",
|
|
42986
42921
|
gridTemplateColumns: getGridColumns(),
|
|
42987
42922
|
gap: `${gap}px`,
|
|
@@ -42989,8 +42924,8 @@ function CardGrid({ children, columns = 3, gap = 16, style, className }) {
|
|
|
42989
42924
|
}, children });
|
|
42990
42925
|
}
|
|
42991
42926
|
function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
|
|
42992
|
-
const [showReplyInput, setShowReplyInput] = (0,
|
|
42993
|
-
const [replyContent, setReplyContent] = (0,
|
|
42927
|
+
const [showReplyInput, setShowReplyInput] = (0, import_react32.useState)(false);
|
|
42928
|
+
const [replyContent, setReplyContent] = (0, import_react32.useState)("");
|
|
42994
42929
|
const handleSubmitReply = () => {
|
|
42995
42930
|
if (replyContent.trim()) {
|
|
42996
42931
|
onReply?.(comment.id, replyContent);
|
|
@@ -42999,30 +42934,30 @@ function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
|
|
|
42999
42934
|
}
|
|
43000
42935
|
};
|
|
43001
42936
|
const timestamp = comment.timestamp instanceof Date ? comment.timestamp.toLocaleString() : comment.timestamp;
|
|
43002
|
-
return (0,
|
|
42937
|
+
return (0, import_jsx_runtime44.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime44.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime44.jsx)("span", { style: { color: colors.gray[500], fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime44.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: colors.gray[700] }, children: comment.content }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime44.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
|
|
43003
42938
|
padding: "2px 8px",
|
|
43004
42939
|
border: `1px solid ${colors.gray[200]}`,
|
|
43005
42940
|
borderRadius: "12px",
|
|
43006
42941
|
backgroundColor: colors.gray[50],
|
|
43007
42942
|
fontSize: fontSize.xs,
|
|
43008
42943
|
cursor: "pointer"
|
|
43009
|
-
}, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0,
|
|
42944
|
+
}, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0, import_jsx_runtime44.jsx)("button", { onClick: () => setShowReplyInput(!showReplyInput), style: {
|
|
43010
42945
|
background: "none",
|
|
43011
42946
|
border: "none",
|
|
43012
42947
|
color: colors.gray[500],
|
|
43013
42948
|
fontSize: fontSize.xs,
|
|
43014
42949
|
cursor: "pointer"
|
|
43015
|
-
}, children: "Reply" })] }), showReplyInput && (0,
|
|
42950
|
+
}, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime44.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime44.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime44.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime44.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime44.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
|
|
43016
42951
|
}
|
|
43017
42952
|
function CommentThread({ comments, currentUser, onAddComment, onReply, onReaction, loading, style, className }) {
|
|
43018
|
-
const [newComment, setNewComment] = (0,
|
|
42953
|
+
const [newComment, setNewComment] = (0, import_react32.useState)("");
|
|
43019
42954
|
const handleSubmit = () => {
|
|
43020
42955
|
if (newComment.trim()) {
|
|
43021
42956
|
onAddComment?.(newComment);
|
|
43022
42957
|
setNewComment("");
|
|
43023
42958
|
}
|
|
43024
42959
|
};
|
|
43025
|
-
return (0,
|
|
42960
|
+
return (0, import_jsx_runtime44.jsxs)("div", { className, style: { ...style }, children: [currentUser && (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px", marginBottom: "24px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: currentUser.name, src: currentUser.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsx)(TextArea, { value: newComment, onChange: setNewComment, placeholder: "Write a comment...", rows: 3 }), (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: "8px", display: "flex", justifyContent: "flex-end" }, children: (0, import_jsx_runtime44.jsx)(Button, { onClick: handleSubmit, disabled: !newComment.trim(), children: "Comment" }) })] })] }), loading ? (0, import_jsx_runtime44.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime44.jsx)(Spinner, { size: 24 }) }) : (0, import_jsx_runtime44.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: comments.map((comment) => (0, import_jsx_runtime44.jsx)(CommentItem, { comment, onReply, onReaction }, comment.id)) })] });
|
|
43026
42961
|
}
|
|
43027
42962
|
function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data", onSort, sortKey, sortDirection, onRowClick, selectable, selectedKeys = [], onSelectionChange, style, className }) {
|
|
43028
42963
|
const getRowKey = (row, index) => {
|
|
@@ -43047,16 +42982,16 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
|
|
|
43047
42982
|
};
|
|
43048
42983
|
const allSelected = data.length > 0 && selectedKeys.length === data.length;
|
|
43049
42984
|
const someSelected = selectedKeys.length > 0 && selectedKeys.length < data.length;
|
|
43050
|
-
return (0,
|
|
42985
|
+
return (0, import_jsx_runtime45.jsx)("div", { className, style: {
|
|
43051
42986
|
border: `1px solid ${colors.gray[200]}`,
|
|
43052
42987
|
borderRadius: "8px",
|
|
43053
42988
|
overflow: "hidden",
|
|
43054
42989
|
...style
|
|
43055
|
-
}, children: (0,
|
|
42990
|
+
}, children: (0, import_jsx_runtime45.jsxs)("table", { style: {
|
|
43056
42991
|
width: "100%",
|
|
43057
42992
|
borderCollapse: "collapse",
|
|
43058
42993
|
fontSize: fontSize.sm
|
|
43059
|
-
}, children: [(0,
|
|
42994
|
+
}, children: [(0, import_jsx_runtime45.jsx)("thead", { children: (0, import_jsx_runtime45.jsxs)("tr", { style: { backgroundColor: colors.gray[50] }, children: [selectable && (0, import_jsx_runtime45.jsx)("th", { style: { width: "40px", padding: "12px" }, children: (0, import_jsx_runtime45.jsx)(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: handleSelectAll }) }), columns.map((col) => (0, import_jsx_runtime45.jsx)("th", { style: {
|
|
43060
42995
|
padding: "12px 16px",
|
|
43061
42996
|
textAlign: col.align || "left",
|
|
43062
42997
|
fontWeight: fontWeight.semibold,
|
|
@@ -43064,14 +42999,14 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
|
|
|
43064
42999
|
borderBottom: `1px solid ${colors.gray[200]}`,
|
|
43065
43000
|
cursor: col.sortable ? "pointer" : void 0,
|
|
43066
43001
|
width: col.width
|
|
43067
|
-
}, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0,
|
|
43002
|
+
}, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime45.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime45.jsx)("tbody", { children: loading ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime45.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: colors.gray[500] }, children: emptyText }) }) : data.map((row, index) => {
|
|
43068
43003
|
const key = getRowKey(row, index);
|
|
43069
43004
|
const isSelected = selectedKeys.includes(key);
|
|
43070
|
-
return (0,
|
|
43005
|
+
return (0, import_jsx_runtime45.jsxs)("tr", { onClick: () => onRowClick?.(row, index), style: {
|
|
43071
43006
|
backgroundColor: isSelected ? colors.primary[50] : void 0,
|
|
43072
43007
|
cursor: onRowClick ? "pointer" : void 0,
|
|
43073
43008
|
transition: "background-color 0.15s"
|
|
43074
|
-
}, children: [selectable && (0,
|
|
43009
|
+
}, children: [selectable && (0, import_jsx_runtime45.jsx)("td", { style: { padding: "12px" }, children: (0, import_jsx_runtime45.jsx)(Checkbox, { checked: isSelected, onChange: (checked) => handleSelectRow(key, checked) }) }), columns.map((col) => (0, import_jsx_runtime45.jsx)("td", { style: {
|
|
43075
43010
|
padding: "12px 16px",
|
|
43076
43011
|
textAlign: col.align || "left",
|
|
43077
43012
|
color: colors.gray[900],
|
|
@@ -43080,9 +43015,9 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
|
|
|
43080
43015
|
}) })] }) });
|
|
43081
43016
|
}
|
|
43082
43017
|
function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, placeholder = "Type a message...", header, style, className }) {
|
|
43083
|
-
const [inputValue, setInputValue] = (0,
|
|
43084
|
-
const messagesEndRef = (0,
|
|
43085
|
-
(0,
|
|
43018
|
+
const [inputValue, setInputValue] = (0, import_react33.useState)("");
|
|
43019
|
+
const messagesEndRef = (0, import_react33.useRef)(null);
|
|
43020
|
+
(0, import_react33.useEffect)(() => {
|
|
43086
43021
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
43087
43022
|
}, [messages]);
|
|
43088
43023
|
const handleSend = () => {
|
|
@@ -43097,7 +43032,7 @@ function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, p
|
|
|
43097
43032
|
handleSend();
|
|
43098
43033
|
}
|
|
43099
43034
|
};
|
|
43100
|
-
return (0,
|
|
43035
|
+
return (0, import_jsx_runtime46.jsxs)("div", { className, style: {
|
|
43101
43036
|
display: "flex",
|
|
43102
43037
|
flexDirection: "column",
|
|
43103
43038
|
height: "100%",
|
|
@@ -43106,51 +43041,51 @@ function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, p
|
|
|
43106
43041
|
backgroundColor: colors.white,
|
|
43107
43042
|
overflow: "hidden",
|
|
43108
43043
|
...style
|
|
43109
|
-
}, children: [header && (0,
|
|
43044
|
+
}, children: [header && (0, import_jsx_runtime46.jsx)("div", { style: {
|
|
43110
43045
|
padding: "12px 16px",
|
|
43111
43046
|
borderBottom: `1px solid ${colors.gray[200]}`
|
|
43112
|
-
}, children: header }), (0,
|
|
43047
|
+
}, children: header }), (0, import_jsx_runtime46.jsxs)("div", { style: {
|
|
43113
43048
|
flex: 1,
|
|
43114
43049
|
padding: "16px",
|
|
43115
43050
|
overflowY: "auto",
|
|
43116
43051
|
display: "flex",
|
|
43117
43052
|
flexDirection: "column",
|
|
43118
43053
|
gap: "12px"
|
|
43119
|
-
}, children: [loading ? (0,
|
|
43054
|
+
}, children: [loading ? (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime46.jsx)(Spinner, { size: 24 }) }) : messages.map((message) => {
|
|
43120
43055
|
const isOwn = message.sender.id === currentUserId;
|
|
43121
43056
|
const timestamp = message.timestamp instanceof Date ? message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : message.timestamp;
|
|
43122
|
-
return (0,
|
|
43057
|
+
return (0, import_jsx_runtime46.jsxs)("div", { style: {
|
|
43123
43058
|
display: "flex",
|
|
43124
43059
|
flexDirection: isOwn ? "row-reverse" : "row",
|
|
43125
43060
|
alignItems: "flex-end",
|
|
43126
43061
|
gap: "8px"
|
|
43127
|
-
}, children: [!isOwn && (0,
|
|
43062
|
+
}, children: [!isOwn && (0, import_jsx_runtime46.jsx)(Avatar, { name: message.sender.name, src: message.sender.avatar, size: "xs" }), (0, import_jsx_runtime46.jsxs)("div", { style: {
|
|
43128
43063
|
maxWidth: "70%",
|
|
43129
43064
|
padding: "10px 14px",
|
|
43130
43065
|
borderRadius: radius.lg,
|
|
43131
43066
|
backgroundColor: isOwn ? colors.primary[600] : colors.gray[100],
|
|
43132
43067
|
color: isOwn ? colors.white : colors.gray[900]
|
|
43133
|
-
}, children: [(0,
|
|
43068
|
+
}, children: [(0, import_jsx_runtime46.jsx)("p", { style: { margin: 0, fontSize: fontSize.sm }, children: message.content }), (0, import_jsx_runtime46.jsxs)("div", { style: {
|
|
43134
43069
|
display: "flex",
|
|
43135
43070
|
alignItems: "center",
|
|
43136
43071
|
gap: "4px",
|
|
43137
43072
|
marginTop: "4px",
|
|
43138
43073
|
fontSize: fontSize.xs,
|
|
43139
43074
|
opacity: 0.7
|
|
43140
|
-
}, children: [(0,
|
|
43141
|
-
}), typing && (0,
|
|
43075
|
+
}, children: [(0, import_jsx_runtime46.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime46.jsxs)("span", { children: [message.status === "sending" && "\u2022", message.status === "sent" && "\u2713", message.status === "delivered" && "\u2713\u2713", message.status === "read" && "\u2713\u2713", message.status === "error" && "!"] })] })] })] }, message.id);
|
|
43076
|
+
}), typing && (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime46.jsxs)("span", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime46.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime46.jsxs)("div", { style: {
|
|
43142
43077
|
padding: "12px 16px",
|
|
43143
43078
|
borderTop: `1px solid ${colors.gray[200]}`,
|
|
43144
43079
|
display: "flex",
|
|
43145
43080
|
gap: "8px"
|
|
43146
|
-
}, children: [(0,
|
|
43081
|
+
}, children: [(0, import_jsx_runtime46.jsx)("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder, style: {
|
|
43147
43082
|
flex: 1,
|
|
43148
43083
|
padding: "10px 14px",
|
|
43149
43084
|
border: `1px solid ${colors.gray[300]}`,
|
|
43150
43085
|
borderRadius: radius.full,
|
|
43151
43086
|
fontSize: fontSize.sm,
|
|
43152
43087
|
outline: "none"
|
|
43153
|
-
} }), (0,
|
|
43088
|
+
} }), (0, import_jsx_runtime46.jsx)(Button, { onClick: handleSend, disabled: !inputValue.trim(), children: (0, import_jsx_runtime46.jsx)(Icon, { name: "chevron-right", size: 18 }) })] })] });
|
|
43154
43089
|
}
|
|
43155
43090
|
function NavigationBar({ items, activeId, onItemClick, orientation = "horizontal", variant = "default", style, className }) {
|
|
43156
43091
|
const renderItem = (item) => {
|
|
@@ -43192,16 +43127,16 @@ function NavigationBar({ items, activeId, onItemClick, orientation = "horizontal
|
|
|
43192
43127
|
onItemClick?.(item);
|
|
43193
43128
|
}
|
|
43194
43129
|
};
|
|
43195
|
-
const content = (0,
|
|
43130
|
+
const content = (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [item.icon && (0, import_jsx_runtime47.jsx)("span", { style: { display: "flex" }, children: item.icon }), (0, import_jsx_runtime47.jsx)("span", { children: item.label })] });
|
|
43196
43131
|
if (item.href) {
|
|
43197
|
-
return (0,
|
|
43132
|
+
return (0, import_jsx_runtime47.jsx)("a", { href: item.href, onClick: (e) => {
|
|
43198
43133
|
e.preventDefault();
|
|
43199
43134
|
handleClick();
|
|
43200
43135
|
}, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
|
|
43201
43136
|
}
|
|
43202
|
-
return (0,
|
|
43137
|
+
return (0, import_jsx_runtime47.jsx)("button", { onClick: handleClick, disabled: item.disabled, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
|
|
43203
43138
|
};
|
|
43204
|
-
return (0,
|
|
43139
|
+
return (0, import_jsx_runtime47.jsx)("nav", { className, style: {
|
|
43205
43140
|
display: "flex",
|
|
43206
43141
|
flexDirection: orientation === "horizontal" ? "row" : "column",
|
|
43207
43142
|
gap: orientation === "horizontal" ? "4px" : "2px",
|
|
@@ -43220,8 +43155,8 @@ function formatFileSize(bytes) {
|
|
|
43220
43155
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
|
|
43221
43156
|
}
|
|
43222
43157
|
function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multiple = true, maxSize, maxFiles, disabled, dragDrop = true, style, className }) {
|
|
43223
|
-
const [isDragOver, setIsDragOver] = (0,
|
|
43224
|
-
const inputRef = (0,
|
|
43158
|
+
const [isDragOver, setIsDragOver] = (0, import_react34.useState)(false);
|
|
43159
|
+
const inputRef = (0, import_react34.useRef)(null);
|
|
43225
43160
|
const handleFiles = (fileList) => {
|
|
43226
43161
|
if (!fileList)
|
|
43227
43162
|
return;
|
|
@@ -43250,7 +43185,7 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
|
|
|
43250
43185
|
const handleDragLeave = () => {
|
|
43251
43186
|
setIsDragOver(false);
|
|
43252
43187
|
};
|
|
43253
|
-
return (0,
|
|
43188
|
+
return (0, import_jsx_runtime48.jsxs)("div", { className, style: { ...style }, children: [(0, import_jsx_runtime48.jsxs)("div", { onClick: () => !disabled && inputRef.current?.click(), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
|
|
43254
43189
|
border: `2px dashed ${isDragOver ? colors.primary[400] : colors.gray[300]}`,
|
|
43255
43190
|
borderRadius: radius.lg,
|
|
43256
43191
|
padding: "32px",
|
|
@@ -43259,7 +43194,7 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
|
|
|
43259
43194
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
43260
43195
|
transition: "all 0.2s",
|
|
43261
43196
|
opacity: disabled ? 0.5 : 1
|
|
43262
|
-
}, children: [(0,
|
|
43197
|
+
}, children: [(0, import_jsx_runtime48.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime48.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime48.jsx)("p", { style: { margin: "12px 0 4px", color: colors.gray[700], fontSize: fontSize.sm }, children: dragDrop ? "Drag and drop files here, or click to browse" : "Click to browse files" }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: 0, color: colors.gray[500], fontSize: fontSize.xs }, children: [accept && `Accepted: ${accept}`, maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`, maxFiles && ` \u2022 Max files: ${maxFiles}`] })] }), files.length > 0 && (0, import_jsx_runtime48.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file2) => (0, import_jsx_runtime48.jsxs)("div", { style: {
|
|
43263
43198
|
display: "flex",
|
|
43264
43199
|
alignItems: "center",
|
|
43265
43200
|
gap: "12px",
|
|
@@ -43267,14 +43202,14 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
|
|
|
43267
43202
|
border: `1px solid ${colors.gray[200]}`,
|
|
43268
43203
|
borderRadius: radius.md,
|
|
43269
43204
|
backgroundColor: colors.white
|
|
43270
|
-
}, children: [(0,
|
|
43205
|
+
}, children: [(0, import_jsx_runtime48.jsx)(Icon, { name: "menu", size: 20, tone: "subtle" }), (0, import_jsx_runtime48.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime48.jsx)("p", { style: {
|
|
43271
43206
|
margin: 0,
|
|
43272
43207
|
fontSize: fontSize.sm,
|
|
43273
43208
|
color: colors.gray[900],
|
|
43274
43209
|
whiteSpace: "nowrap",
|
|
43275
43210
|
overflow: "hidden",
|
|
43276
43211
|
textOverflow: "ellipsis"
|
|
43277
|
-
}, children: file2.name }), (0,
|
|
43212
|
+
}, children: file2.name }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: colors.gray[500] }, children: [formatFileSize(file2.size), file2.error && (0, import_jsx_runtime48.jsx)("span", { style: { color: colors.error[500], marginLeft: "8px" }, children: file2.error })] }), file2.status === "uploading" && file2.progress !== void 0 && (0, import_jsx_runtime48.jsx)(Progress, { value: file2.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime48.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file2.id), children: (0, import_jsx_runtime48.jsx)(Icon, { name: "x", size: 16 }) })] }, file2.id)) })] });
|
|
43278
43213
|
}
|
|
43279
43214
|
var variantColors2 = {
|
|
43280
43215
|
info: colors.info[500],
|
|
@@ -43285,44 +43220,44 @@ var variantColors2 = {
|
|
|
43285
43220
|
function NotificationItem({ notification, onMarkAsRead, onDismiss }) {
|
|
43286
43221
|
const timestamp = notification.timestamp instanceof Date ? notification.timestamp.toLocaleString() : notification.timestamp;
|
|
43287
43222
|
const typeColor = variantColors2[notification.type || "info"];
|
|
43288
|
-
return (0,
|
|
43223
|
+
return (0, import_jsx_runtime49.jsxs)("div", { style: {
|
|
43289
43224
|
display: "flex",
|
|
43290
43225
|
gap: "12px",
|
|
43291
43226
|
padding: "12px",
|
|
43292
43227
|
backgroundColor: notification.read ? "transparent" : colors.primary[50],
|
|
43293
43228
|
borderRadius: radius.md,
|
|
43294
43229
|
transition: "background-color 0.15s"
|
|
43295
|
-
}, children: [(0,
|
|
43230
|
+
}, children: [(0, import_jsx_runtime49.jsx)("div", { style: {
|
|
43296
43231
|
width: "8px",
|
|
43297
43232
|
height: "8px",
|
|
43298
43233
|
borderRadius: "50%",
|
|
43299
43234
|
backgroundColor: notification.read ? "transparent" : typeColor,
|
|
43300
43235
|
flexShrink: 0,
|
|
43301
43236
|
marginTop: "6px"
|
|
43302
|
-
} }), (0,
|
|
43237
|
+
} }), (0, import_jsx_runtime49.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px" }, children: [(0, import_jsx_runtime49.jsx)("p", { style: {
|
|
43303
43238
|
margin: 0,
|
|
43304
43239
|
fontWeight: fontWeight.medium,
|
|
43305
43240
|
color: colors.gray[900],
|
|
43306
43241
|
fontSize: fontSize.sm
|
|
43307
|
-
}, children: notification.title }), (0,
|
|
43242
|
+
}, children: notification.title }), (0, import_jsx_runtime49.jsx)("button", { onClick: () => onDismiss?.(notification.id), style: {
|
|
43308
43243
|
background: "none",
|
|
43309
43244
|
border: "none",
|
|
43310
43245
|
padding: "2px",
|
|
43311
43246
|
cursor: "pointer",
|
|
43312
43247
|
color: colors.gray[400],
|
|
43313
43248
|
flexShrink: 0
|
|
43314
|
-
}, children: (0,
|
|
43249
|
+
}, children: (0, import_jsx_runtime49.jsx)(Icon, { name: "x", size: 14 }) })] }), notification.message && (0, import_jsx_runtime49.jsx)("p", { style: {
|
|
43315
43250
|
margin: "4px 0 0",
|
|
43316
43251
|
color: colors.gray[600],
|
|
43317
43252
|
fontSize: fontSize.xs
|
|
43318
|
-
}, children: notification.message }), (0,
|
|
43253
|
+
}, children: notification.message }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "8px" }, children: [(0, import_jsx_runtime49.jsx)("span", { style: { color: colors.gray[400], fontSize: fontSize.xs }, children: timestamp }), !notification.read && (0, import_jsx_runtime49.jsx)("button", { onClick: () => onMarkAsRead?.(notification.id), style: {
|
|
43319
43254
|
background: "none",
|
|
43320
43255
|
border: "none",
|
|
43321
43256
|
padding: 0,
|
|
43322
43257
|
color: colors.primary[600],
|
|
43323
43258
|
fontSize: fontSize.xs,
|
|
43324
43259
|
cursor: "pointer"
|
|
43325
|
-
}, children: "Mark as read" }), notification.action && (0,
|
|
43260
|
+
}, children: "Mark as read" }), notification.action && (0, import_jsx_runtime49.jsx)("button", { onClick: notification.action.onClick, style: {
|
|
43326
43261
|
background: "none",
|
|
43327
43262
|
border: "none",
|
|
43328
43263
|
padding: 0,
|
|
@@ -43333,24 +43268,24 @@ function NotificationItem({ notification, onMarkAsRead, onDismiss }) {
|
|
|
43333
43268
|
}
|
|
43334
43269
|
function NotificationCenter({ notifications, onMarkAsRead, onMarkAllAsRead, onDismiss, onClearAll, emptyText = "No notifications", loading, style, className }) {
|
|
43335
43270
|
const unreadCount = notifications.filter((n) => !n.read).length;
|
|
43336
|
-
return (0,
|
|
43271
|
+
return (0, import_jsx_runtime49.jsxs)("div", { className, style: {
|
|
43337
43272
|
display: "flex",
|
|
43338
43273
|
flexDirection: "column",
|
|
43339
43274
|
...style
|
|
43340
|
-
}, children: [(0,
|
|
43275
|
+
}, children: [(0, import_jsx_runtime49.jsxs)("div", { style: {
|
|
43341
43276
|
display: "flex",
|
|
43342
43277
|
alignItems: "center",
|
|
43343
43278
|
justifyContent: "space-between",
|
|
43344
43279
|
padding: "12px 16px",
|
|
43345
43280
|
borderBottom: `1px solid ${colors.gray[200]}`
|
|
43346
|
-
}, children: [(0,
|
|
43281
|
+
}, children: [(0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime49.jsx)("span", { style: { fontWeight: fontWeight.semibold, color: colors.gray[900] }, children: "Notifications" }), unreadCount > 0 && (0, import_jsx_runtime49.jsx)("span", { style: {
|
|
43347
43282
|
padding: "2px 8px",
|
|
43348
43283
|
borderRadius: "12px",
|
|
43349
43284
|
backgroundColor: colors.primary[100],
|
|
43350
43285
|
color: colors.primary[700],
|
|
43351
43286
|
fontSize: fontSize.xs,
|
|
43352
43287
|
fontWeight: fontWeight.medium
|
|
43353
|
-
}, children: unreadCount })] }), (0,
|
|
43288
|
+
}, children: unreadCount })] }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [unreadCount > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onMarkAllAsRead, children: "Mark all read" }), notifications.length > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })] })] }), (0, import_jsx_runtime49.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime49.jsx)(Spinner, { size: 24 }) }) : notifications.length === 0 ? (0, import_jsx_runtime49.jsx)("div", { style: { textAlign: "center", padding: "32px", color: colors.gray[500] }, children: emptyText }) : (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: notifications.map((notification) => (0, import_jsx_runtime49.jsx)(NotificationItem, { notification, onMarkAsRead, onDismiss }, notification.id)) }) })] });
|
|
43354
43289
|
}
|
|
43355
43290
|
var sizeWidths = {
|
|
43356
43291
|
sm: "400px",
|
|
@@ -43360,12 +43295,12 @@ var sizeWidths = {
|
|
|
43360
43295
|
full: "100vw"
|
|
43361
43296
|
};
|
|
43362
43297
|
function Modal({ open, onClose, title, children, footer, size = "md", closeOnOverlayClick = true, closeOnEscape = true, showCloseButton = true, style, className }) {
|
|
43363
|
-
const handleEscape = (0,
|
|
43298
|
+
const handleEscape = (0, import_react35.useCallback)((e) => {
|
|
43364
43299
|
if (e.key === "Escape" && closeOnEscape) {
|
|
43365
43300
|
onClose();
|
|
43366
43301
|
}
|
|
43367
43302
|
}, [closeOnEscape, onClose]);
|
|
43368
|
-
(0,
|
|
43303
|
+
(0, import_react35.useEffect)(() => {
|
|
43369
43304
|
if (open) {
|
|
43370
43305
|
document.addEventListener("keydown", handleEscape);
|
|
43371
43306
|
document.body.style.overflow = "hidden";
|
|
@@ -43383,7 +43318,7 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
|
|
|
43383
43318
|
}
|
|
43384
43319
|
};
|
|
43385
43320
|
const isFullscreen = size === "full";
|
|
43386
|
-
return (0,
|
|
43321
|
+
return (0, import_jsx_runtime50.jsxs)("div", { style: {
|
|
43387
43322
|
position: "fixed",
|
|
43388
43323
|
inset: 0,
|
|
43389
43324
|
zIndex: zIndex.modal,
|
|
@@ -43391,12 +43326,12 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
|
|
|
43391
43326
|
alignItems: isFullscreen ? "stretch" : "center",
|
|
43392
43327
|
justifyContent: "center",
|
|
43393
43328
|
padding: isFullscreen ? 0 : "24px"
|
|
43394
|
-
}, children: [(0,
|
|
43329
|
+
}, children: [(0, import_jsx_runtime50.jsx)("div", { onClick: handleOverlayClick, style: {
|
|
43395
43330
|
position: "absolute",
|
|
43396
43331
|
inset: 0,
|
|
43397
43332
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
43398
43333
|
animation: animation.fadeIn
|
|
43399
|
-
} }), (0,
|
|
43334
|
+
} }), (0, import_jsx_runtime50.jsxs)("div", { role: "dialog", "aria-modal": "true", className, style: {
|
|
43400
43335
|
position: "relative",
|
|
43401
43336
|
width: sizeWidths[size],
|
|
43402
43337
|
maxWidth: isFullscreen ? "100%" : "calc(100vw - 48px)",
|
|
@@ -43409,17 +43344,17 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
|
|
|
43409
43344
|
overflow: "hidden",
|
|
43410
43345
|
animation: animation.scaleIn,
|
|
43411
43346
|
...style
|
|
43412
|
-
}, children: [(title || showCloseButton) && (0,
|
|
43347
|
+
}, children: [(title || showCloseButton) && (0, import_jsx_runtime50.jsxs)("div", { style: {
|
|
43413
43348
|
display: "flex",
|
|
43414
43349
|
alignItems: "center",
|
|
43415
43350
|
justifyContent: "space-between",
|
|
43416
43351
|
padding: "16px 20px",
|
|
43417
43352
|
borderBottom: `1px solid ${colors.gray[200]}`
|
|
43418
|
-
}, children: [title && (0,
|
|
43353
|
+
}, children: [title && (0, import_jsx_runtime50.jsx)(Heading, { level: 4, children: title }), showCloseButton && (0, import_jsx_runtime50.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close modal", style: { marginLeft: "auto" }, children: (0, import_jsx_runtime50.jsx)(Icon, { name: "x", size: 20 }) })] }), (0, import_jsx_runtime50.jsx)("div", { style: {
|
|
43419
43354
|
flex: 1,
|
|
43420
43355
|
padding: "20px",
|
|
43421
43356
|
overflowY: "auto"
|
|
43422
|
-
}, children }), footer && (0,
|
|
43357
|
+
}, children }), footer && (0, import_jsx_runtime50.jsx)("div", { style: {
|
|
43423
43358
|
display: "flex",
|
|
43424
43359
|
alignItems: "center",
|
|
43425
43360
|
justifyContent: "flex-end",
|
|
@@ -43429,9 +43364,9 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
|
|
|
43429
43364
|
}, children: footer })] })] });
|
|
43430
43365
|
}
|
|
43431
43366
|
function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Search commands...", recentIds = [], loading, style, className }) {
|
|
43432
|
-
const [query, setQuery] = (0,
|
|
43433
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
43434
|
-
const filteredCommands = (0,
|
|
43367
|
+
const [query, setQuery] = (0, import_react36.useState)("");
|
|
43368
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react36.useState)(0);
|
|
43369
|
+
const filteredCommands = (0, import_react36.useMemo)(() => {
|
|
43435
43370
|
const filtered = query ? commands.filter((cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()) || cmd.description?.toLowerCase().includes(query.toLowerCase())) : commands;
|
|
43436
43371
|
const groups = /* @__PURE__ */ new Map();
|
|
43437
43372
|
if (!query && recentIds.length > 0) {
|
|
@@ -43452,21 +43387,21 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
|
|
|
43452
43387
|
});
|
|
43453
43388
|
return groups;
|
|
43454
43389
|
}, [commands, query, recentIds]);
|
|
43455
|
-
const flatCommands = (0,
|
|
43390
|
+
const flatCommands = (0, import_react36.useMemo)(() => {
|
|
43456
43391
|
const flat = [];
|
|
43457
43392
|
filteredCommands.forEach((cmds) => flat.push(...cmds));
|
|
43458
43393
|
return flat;
|
|
43459
43394
|
}, [filteredCommands]);
|
|
43460
|
-
(0,
|
|
43395
|
+
(0, import_react36.useEffect)(() => {
|
|
43461
43396
|
setSelectedIndex(0);
|
|
43462
43397
|
}, [query]);
|
|
43463
|
-
(0,
|
|
43398
|
+
(0, import_react36.useEffect)(() => {
|
|
43464
43399
|
if (open) {
|
|
43465
43400
|
setQuery("");
|
|
43466
43401
|
setSelectedIndex(0);
|
|
43467
43402
|
}
|
|
43468
43403
|
}, [open]);
|
|
43469
|
-
const handleKeyDown = (0,
|
|
43404
|
+
const handleKeyDown = (0, import_react36.useCallback)((e) => {
|
|
43470
43405
|
if (e.key === "Escape") {
|
|
43471
43406
|
onClose();
|
|
43472
43407
|
return;
|
|
@@ -43486,7 +43421,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
|
|
|
43486
43421
|
}
|
|
43487
43422
|
}
|
|
43488
43423
|
}, [flatCommands, selectedIndex, onSelect, onClose]);
|
|
43489
|
-
(0,
|
|
43424
|
+
(0, import_react36.useEffect)(() => {
|
|
43490
43425
|
if (open) {
|
|
43491
43426
|
document.addEventListener("keydown", handleKeyDown);
|
|
43492
43427
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
@@ -43495,7 +43430,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
|
|
|
43495
43430
|
if (!open)
|
|
43496
43431
|
return null;
|
|
43497
43432
|
let currentIndex = 0;
|
|
43498
|
-
return (0,
|
|
43433
|
+
return (0, import_jsx_runtime51.jsxs)("div", { style: {
|
|
43499
43434
|
position: "fixed",
|
|
43500
43435
|
inset: 0,
|
|
43501
43436
|
zIndex: zIndex.modal,
|
|
@@ -43503,11 +43438,11 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
|
|
|
43503
43438
|
alignItems: "flex-start",
|
|
43504
43439
|
justifyContent: "center",
|
|
43505
43440
|
paddingTop: "15vh"
|
|
43506
|
-
}, children: [(0,
|
|
43441
|
+
}, children: [(0, import_jsx_runtime51.jsx)("div", { onClick: onClose, style: {
|
|
43507
43442
|
position: "absolute",
|
|
43508
43443
|
inset: 0,
|
|
43509
43444
|
backgroundColor: "rgba(0, 0, 0, 0.5)"
|
|
43510
|
-
} }), (0,
|
|
43445
|
+
} }), (0, import_jsx_runtime51.jsxs)("div", { role: "dialog", className, style: {
|
|
43511
43446
|
position: "relative",
|
|
43512
43447
|
width: "560px",
|
|
43513
43448
|
maxWidth: "calc(100vw - 48px)",
|
|
@@ -43519,19 +43454,19 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
|
|
|
43519
43454
|
display: "flex",
|
|
43520
43455
|
flexDirection: "column",
|
|
43521
43456
|
...style
|
|
43522
|
-
}, children: [(0,
|
|
43457
|
+
}, children: [(0, import_jsx_runtime51.jsx)("div", { style: { padding: "12px", borderBottom: `1px solid ${colors.gray[200]}` }, children: (0, import_jsx_runtime51.jsxs)("div", { style: { position: "relative" }, children: [(0, import_jsx_runtime51.jsx)(Icon, { name: "search", size: 18, tone: "subtle", style: {
|
|
43523
43458
|
position: "absolute",
|
|
43524
43459
|
left: "12px",
|
|
43525
43460
|
top: "50%",
|
|
43526
43461
|
transform: "translateY(-50%)"
|
|
43527
|
-
} }), (0,
|
|
43462
|
+
} }), (0, import_jsx_runtime51.jsx)("input", { type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder, autoFocus: true, style: {
|
|
43528
43463
|
width: "100%",
|
|
43529
43464
|
padding: "12px 12px 12px 42px",
|
|
43530
43465
|
border: "none",
|
|
43531
43466
|
fontSize: fontSize.base,
|
|
43532
43467
|
outline: "none",
|
|
43533
43468
|
backgroundColor: "transparent"
|
|
43534
|
-
} })] }) }), (0,
|
|
43469
|
+
} })] }) }), (0, import_jsx_runtime51.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime51.jsx)(Spinner, { size: 24 }) }) : flatCommands.length === 0 ? (0, import_jsx_runtime51.jsx)("div", { style: { textAlign: "center", padding: "32px", color: colors.gray[500] }, children: "No commands found" }) : Array.from(filteredCommands.entries()).map(([group, cmds]) => (0, import_jsx_runtime51.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, import_jsx_runtime51.jsx)("div", { style: {
|
|
43535
43470
|
padding: "8px 12px",
|
|
43536
43471
|
fontSize: fontSize.xs,
|
|
43537
43472
|
fontWeight: fontWeight.semibold,
|
|
@@ -43541,7 +43476,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
|
|
|
43541
43476
|
}, children: group }), cmds.map((cmd) => {
|
|
43542
43477
|
const index = currentIndex++;
|
|
43543
43478
|
const isSelected = index === selectedIndex;
|
|
43544
|
-
return (0,
|
|
43479
|
+
return (0, import_jsx_runtime51.jsxs)("button", { onClick: () => {
|
|
43545
43480
|
if (!cmd.disabled) {
|
|
43546
43481
|
onSelect(cmd);
|
|
43547
43482
|
onClose();
|
|
@@ -43558,7 +43493,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
|
|
|
43558
43493
|
color: cmd.disabled ? colors.gray[400] : colors.gray[900],
|
|
43559
43494
|
textAlign: "left",
|
|
43560
43495
|
cursor: cmd.disabled ? "not-allowed" : "pointer"
|
|
43561
|
-
}, children: [cmd.icon && (0,
|
|
43496
|
+
}, children: [cmd.icon && (0, import_jsx_runtime51.jsx)("span", { style: { display: "flex", color: colors.gray[500] }, children: cmd.icon }), (0, import_jsx_runtime51.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.sm }, children: cmd.label }), cmd.description && (0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: cmd.description })] }), cmd.shortcut && (0, import_jsx_runtime51.jsx)("kbd", { style: {
|
|
43562
43497
|
padding: "2px 6px",
|
|
43563
43498
|
backgroundColor: colors.gray[100],
|
|
43564
43499
|
borderRadius: radius.sm,
|
|
@@ -43566,7 +43501,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
|
|
|
43566
43501
|
color: colors.gray[500],
|
|
43567
43502
|
fontFamily: "inherit"
|
|
43568
43503
|
}, children: cmd.shortcut })] }, cmd.id);
|
|
43569
|
-
})] }, group)) }), (0,
|
|
43504
|
+
})] }, group)) }), (0, import_jsx_runtime51.jsxs)("div", { style: {
|
|
43570
43505
|
padding: "8px 12px",
|
|
43571
43506
|
borderTop: `1px solid ${colors.gray[200]}`,
|
|
43572
43507
|
display: "flex",
|
|
@@ -43574,35 +43509,35 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
|
|
|
43574
43509
|
gap: "16px",
|
|
43575
43510
|
fontSize: fontSize.xs,
|
|
43576
43511
|
color: colors.gray[500]
|
|
43577
|
-
}, children: [(0,
|
|
43512
|
+
}, children: [(0, import_jsx_runtime51.jsx)("span", { children: "\u2191\u2193 Navigate" }), (0, import_jsx_runtime51.jsx)("span", { children: "\u21B5 Select" }), (0, import_jsx_runtime51.jsx)("span", { children: "Esc Close" })] })] })] });
|
|
43578
43513
|
}
|
|
43579
43514
|
function Footer({ brand, columns, socialLinks, bottomText, bottomLinks, background, bordered = true, style, className }) {
|
|
43580
|
-
return (0,
|
|
43515
|
+
return (0, import_jsx_runtime52.jsxs)("footer", { className, role: "contentinfo", style: {
|
|
43581
43516
|
backgroundColor: background || colors.gray[50],
|
|
43582
43517
|
borderTop: bordered ? `1px solid ${colors.gray[200]}` : void 0,
|
|
43583
43518
|
...style
|
|
43584
|
-
}, children: [(0,
|
|
43519
|
+
}, children: [(0, import_jsx_runtime52.jsxs)("div", { style: {
|
|
43585
43520
|
display: "flex",
|
|
43586
43521
|
flexWrap: "wrap",
|
|
43587
43522
|
gap: "48px",
|
|
43588
43523
|
padding: "48px 24px",
|
|
43589
43524
|
maxWidth: "1280px",
|
|
43590
43525
|
margin: "0 auto"
|
|
43591
|
-
}, children: [brand && (0,
|
|
43526
|
+
}, children: [brand && (0, import_jsx_runtime52.jsx)("div", { style: { flex: "1 1 280px", minWidth: "200px" }, children: brand }), columns?.map((column, colIdx) => (0, import_jsx_runtime52.jsxs)("div", { style: { flex: "0 1 180px", minWidth: "140px" }, children: [column.title && (0, import_jsx_runtime52.jsx)("h4", { style: {
|
|
43592
43527
|
fontSize: fontSize.sm,
|
|
43593
43528
|
fontWeight: fontWeight.semibold,
|
|
43594
43529
|
color: colors.gray[900],
|
|
43595
43530
|
lineHeight: lineHeight.normal,
|
|
43596
43531
|
margin: "0 0 16px 0",
|
|
43597
43532
|
padding: 0
|
|
43598
|
-
}, children: column.title }), (0,
|
|
43533
|
+
}, children: column.title }), (0, import_jsx_runtime52.jsx)("ul", { style: {
|
|
43599
43534
|
listStyle: "none",
|
|
43600
43535
|
margin: 0,
|
|
43601
43536
|
padding: 0,
|
|
43602
43537
|
display: "flex",
|
|
43603
43538
|
flexDirection: "column",
|
|
43604
43539
|
gap: "10px"
|
|
43605
|
-
}, children: column.links.map((link, linkIdx) => (0,
|
|
43540
|
+
}, children: column.links.map((link, linkIdx) => (0, import_jsx_runtime52.jsx)("li", { children: (0, import_jsx_runtime52.jsx)("a", { href: link.href, onClick: link.onClick ? (e) => {
|
|
43606
43541
|
e.preventDefault();
|
|
43607
43542
|
link.onClick?.();
|
|
43608
43543
|
} : void 0, style: {
|
|
@@ -43611,7 +43546,7 @@ function Footer({ brand, columns, socialLinks, bottomText, bottomLinks, backgrou
|
|
|
43611
43546
|
textDecoration: "none",
|
|
43612
43547
|
transition: "color 0.15s",
|
|
43613
43548
|
lineHeight: lineHeight.normal
|
|
43614
|
-
}, "aria-label": link.label, children: link.label }) }, linkIdx)) })] }, colIdx))] }), (bottomText || bottomLinks || socialLinks) && (0,
|
|
43549
|
+
}, "aria-label": link.label, children: link.label }) }, linkIdx)) })] }, colIdx))] }), (bottomText || bottomLinks || socialLinks) && (0, import_jsx_runtime52.jsxs)("div", { style: {
|
|
43615
43550
|
display: "flex",
|
|
43616
43551
|
flexWrap: "wrap",
|
|
43617
43552
|
alignItems: "center",
|
|
@@ -43621,17 +43556,17 @@ function Footer({ brand, columns, socialLinks, bottomText, bottomLinks, backgrou
|
|
|
43621
43556
|
maxWidth: "1280px",
|
|
43622
43557
|
margin: "0 auto",
|
|
43623
43558
|
borderTop: `1px solid ${colors.gray[200]}`
|
|
43624
|
-
}, children: [bottomText && (0,
|
|
43559
|
+
}, children: [bottomText && (0, import_jsx_runtime52.jsx)("span", { style: {
|
|
43625
43560
|
fontSize: fontSize.sm,
|
|
43626
43561
|
color: colors.gray[500],
|
|
43627
43562
|
lineHeight: lineHeight.normal
|
|
43628
|
-
}, children: bottomText }), (0,
|
|
43563
|
+
}, children: bottomText }), (0, import_jsx_runtime52.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "20px" }, children: [socialLinks?.map((social, idx) => (0, import_jsx_runtime52.jsx)("a", { href: social.href, "aria-label": social.label, style: {
|
|
43629
43564
|
display: "flex",
|
|
43630
43565
|
alignItems: "center",
|
|
43631
43566
|
justifyContent: "center",
|
|
43632
43567
|
color: colors.gray[500],
|
|
43633
43568
|
transition: "color 0.15s"
|
|
43634
|
-
}, children: social.icon }, idx)), bottomLinks?.map((link, idx) => (0,
|
|
43569
|
+
}, children: social.icon }, idx)), bottomLinks?.map((link, idx) => (0, import_jsx_runtime52.jsx)("a", { href: link.href, onClick: link.onClick ? (e) => {
|
|
43635
43570
|
e.preventDefault();
|
|
43636
43571
|
link.onClick?.();
|
|
43637
43572
|
} : void 0, style: {
|
|
@@ -43650,7 +43585,7 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
|
|
|
43650
43585
|
const sizeConfig2 = sizeStyles7[size] || sizeStyles7.md;
|
|
43651
43586
|
const hasImage = !!backgroundImage;
|
|
43652
43587
|
const showOverlay = hasImage && overlay;
|
|
43653
|
-
return (0,
|
|
43588
|
+
return (0, import_jsx_runtime53.jsxs)("section", { className, style: {
|
|
43654
43589
|
position: "relative",
|
|
43655
43590
|
backgroundColor: background || (hasImage ? void 0 : colors.white),
|
|
43656
43591
|
...hasImage && {
|
|
@@ -43660,11 +43595,11 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
|
|
|
43660
43595
|
},
|
|
43661
43596
|
overflow: "hidden",
|
|
43662
43597
|
...style
|
|
43663
|
-
}, children: [showOverlay && (0,
|
|
43598
|
+
}, children: [showOverlay && (0, import_jsx_runtime53.jsx)("div", { "aria-hidden": "true", style: {
|
|
43664
43599
|
position: "absolute",
|
|
43665
43600
|
inset: 0,
|
|
43666
43601
|
backgroundColor: "rgba(0, 0, 0, 0.5)"
|
|
43667
|
-
} }), (0,
|
|
43602
|
+
} }), (0, import_jsx_runtime53.jsxs)("div", { style: {
|
|
43668
43603
|
position: "relative",
|
|
43669
43604
|
maxWidth: "1280px",
|
|
43670
43605
|
margin: "0 auto",
|
|
@@ -43674,10 +43609,10 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
|
|
|
43674
43609
|
alignItems: align === "center" ? "center" : "center",
|
|
43675
43610
|
gap: "48px",
|
|
43676
43611
|
textAlign: align === "center" ? "center" : "left"
|
|
43677
|
-
}, children: [(0,
|
|
43612
|
+
}, children: [(0, import_jsx_runtime53.jsxs)("div", { style: {
|
|
43678
43613
|
flex: align === "left" && media ? "1 1 50%" : void 0,
|
|
43679
43614
|
maxWidth: align === "center" ? "800px" : void 0
|
|
43680
|
-
}, children: [heading && (0,
|
|
43615
|
+
}, children: [heading && (0, import_jsx_runtime53.jsx)("h1", { style: {
|
|
43681
43616
|
fontSize: sizeConfig2.headingSize,
|
|
43682
43617
|
fontWeight: fontWeight.bold,
|
|
43683
43618
|
lineHeight: lineHeight.tight,
|
|
@@ -43685,7 +43620,7 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
|
|
|
43685
43620
|
color: showOverlay ? colors.white : colors.gray[900],
|
|
43686
43621
|
margin: "0 0 16px 0",
|
|
43687
43622
|
padding: 0
|
|
43688
|
-
}, children: heading }), description && (0,
|
|
43623
|
+
}, children: heading }), description && (0, import_jsx_runtime53.jsx)("p", { style: {
|
|
43689
43624
|
fontSize: sizeConfig2.descSize,
|
|
43690
43625
|
lineHeight: lineHeight.relaxed,
|
|
43691
43626
|
color: showOverlay ? "rgba(255,255,255,0.9)" : colors.gray[600],
|
|
@@ -43693,12 +43628,12 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
|
|
|
43693
43628
|
padding: 0,
|
|
43694
43629
|
maxWidth: align === "center" ? "640px" : void 0,
|
|
43695
43630
|
...align === "center" && { marginLeft: "auto", marginRight: "auto" }
|
|
43696
|
-
}, children: description }), (primaryAction || secondaryAction) && (0,
|
|
43631
|
+
}, children: description }), (primaryAction || secondaryAction) && (0, import_jsx_runtime53.jsxs)("div", { style: {
|
|
43697
43632
|
display: "flex",
|
|
43698
43633
|
flexWrap: "wrap",
|
|
43699
43634
|
gap: "12px",
|
|
43700
43635
|
justifyContent: align === "center" ? "center" : "flex-start"
|
|
43701
|
-
}, children: [primaryAction && (0,
|
|
43636
|
+
}, children: [primaryAction && (0, import_jsx_runtime53.jsx)("button", { onClick: primaryAction.onClick, style: {
|
|
43702
43637
|
padding: "12px 28px",
|
|
43703
43638
|
fontSize: fontSize.base,
|
|
43704
43639
|
fontWeight: fontWeight.semibold,
|
|
@@ -43709,7 +43644,7 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
|
|
|
43709
43644
|
cursor: "pointer",
|
|
43710
43645
|
transition: "background-color 0.15s",
|
|
43711
43646
|
lineHeight: lineHeight.normal
|
|
43712
|
-
}, children: primaryAction.label }), secondaryAction && (0,
|
|
43647
|
+
}, children: primaryAction.label }), secondaryAction && (0, import_jsx_runtime53.jsx)("button", { onClick: secondaryAction.onClick, style: {
|
|
43713
43648
|
padding: "12px 28px",
|
|
43714
43649
|
fontSize: fontSize.base,
|
|
43715
43650
|
fontWeight: fontWeight.semibold,
|
|
@@ -43720,7 +43655,7 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
|
|
|
43720
43655
|
cursor: "pointer",
|
|
43721
43656
|
transition: "all 0.15s",
|
|
43722
43657
|
lineHeight: lineHeight.normal
|
|
43723
|
-
}, children: secondaryAction.label })] })] }), media && (0,
|
|
43658
|
+
}, children: secondaryAction.label })] })] }), media && (0, import_jsx_runtime53.jsx)("div", { style: {
|
|
43724
43659
|
flex: align === "left" ? "1 1 50%" : void 0,
|
|
43725
43660
|
display: "flex",
|
|
43726
43661
|
justifyContent: "center",
|
|
@@ -43734,9 +43669,9 @@ __export2(interact_exports, {
|
|
|
43734
43669
|
Hoverable: () => Hoverable,
|
|
43735
43670
|
Pressable: () => Pressable
|
|
43736
43671
|
});
|
|
43737
|
-
var Clickable = (0,
|
|
43738
|
-
const [hovered, setHovered] = (0,
|
|
43739
|
-
const [active, setActive] = (0,
|
|
43672
|
+
var Clickable = (0, import_react37.forwardRef)(function Clickable2({ children, onClick, onDoubleClick, hoverStyle, activeStyle, cursor, transition: transition2 = "all 200ms ease", disabled = false, role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
|
|
43673
|
+
const [hovered, setHovered] = (0, import_react37.useState)(false);
|
|
43674
|
+
const [active, setActive] = (0, import_react37.useState)(false);
|
|
43740
43675
|
const hasClick = !!onClick;
|
|
43741
43676
|
const resolvedCursor = disabled ? "not-allowed" : cursor ?? (hasClick ? "pointer" : void 0);
|
|
43742
43677
|
const resolvedRole = role ?? (hasClick ? "button" : void 0);
|
|
@@ -43757,19 +43692,19 @@ var Clickable = (0, import_react42.forwardRef)(function Clickable2({ children, o
|
|
|
43757
43692
|
...hovered && !disabled ? hoverStyle : {},
|
|
43758
43693
|
...active && !disabled ? activeStyle : {}
|
|
43759
43694
|
};
|
|
43760
|
-
return (0,
|
|
43695
|
+
return (0, import_jsx_runtime54.jsx)("div", { ref, className, style: mergedStyle, onClick: disabled ? void 0 : onClick, onDoubleClick: disabled ? void 0 : onDoubleClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
|
|
43761
43696
|
setHovered(false);
|
|
43762
43697
|
setActive(false);
|
|
43763
43698
|
}, onMouseDown: () => setActive(true), onMouseUp: () => setActive(false), onKeyDown: handleKeyDown, role: resolvedRole, "aria-label": ariaLabel, "aria-disabled": disabled || void 0, tabIndex: resolvedTabIndex, ...rest, children });
|
|
43764
43699
|
});
|
|
43765
|
-
var Hoverable = (0,
|
|
43766
|
-
const [hovered, setHovered] = (0,
|
|
43700
|
+
var Hoverable = (0, import_react38.forwardRef)(function Hoverable2({ children, hoverStyle, onHoverChange, transition: transition2 = "all 200ms ease", style, className, ...rest }, ref) {
|
|
43701
|
+
const [hovered, setHovered] = (0, import_react38.useState)(false);
|
|
43767
43702
|
const mergedStyle = {
|
|
43768
43703
|
...style,
|
|
43769
43704
|
transition: transition2,
|
|
43770
43705
|
...hovered ? hoverStyle : {}
|
|
43771
43706
|
};
|
|
43772
|
-
return (0,
|
|
43707
|
+
return (0, import_jsx_runtime55.jsx)("div", { ref, className, style: mergedStyle, onMouseEnter: () => {
|
|
43773
43708
|
setHovered(true);
|
|
43774
43709
|
onHoverChange?.(true);
|
|
43775
43710
|
}, onMouseLeave: () => {
|
|
@@ -43777,10 +43712,10 @@ var Hoverable = (0, import_react43.forwardRef)(function Hoverable2({ children, h
|
|
|
43777
43712
|
onHoverChange?.(false);
|
|
43778
43713
|
}, ...rest, children });
|
|
43779
43714
|
});
|
|
43780
|
-
var Pressable = (0,
|
|
43781
|
-
const [hovered, setHovered] = (0,
|
|
43782
|
-
const [pressed, setPressed] = (0,
|
|
43783
|
-
const [longPressTimer, setLongPressTimer] = (0,
|
|
43715
|
+
var Pressable = (0, import_react39.forwardRef)(function Pressable2({ children, onPress, onLongPress, longPressDelay = 500, hoverStyle, pressStyle, disabled = false, transition: transition2 = "all 150ms ease", role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
|
|
43716
|
+
const [hovered, setHovered] = (0, import_react39.useState)(false);
|
|
43717
|
+
const [pressed, setPressed] = (0, import_react39.useState)(false);
|
|
43718
|
+
const [longPressTimer, setLongPressTimer] = (0, import_react39.useState)(null);
|
|
43784
43719
|
const hasPress = !!onPress || !!onLongPress;
|
|
43785
43720
|
const handleMouseDown = (e) => {
|
|
43786
43721
|
if (disabled)
|
|
@@ -43823,7 +43758,7 @@ var Pressable = (0, import_react44.forwardRef)(function Pressable2({ children, o
|
|
|
43823
43758
|
...pressed && !disabled ? pressStyle : {}
|
|
43824
43759
|
};
|
|
43825
43760
|
const content = typeof children === "function" ? children({ pressed, hovered }) : children;
|
|
43826
|
-
return (0,
|
|
43761
|
+
return (0, import_jsx_runtime56.jsx)("div", { ref, className, style: mergedStyle, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
|
|
43827
43762
|
setHovered(false);
|
|
43828
43763
|
setPressed(false);
|
|
43829
43764
|
if (longPressTimer)
|
|
@@ -46667,7 +46602,7 @@ function getTheme(id, mode = "light") {
|
|
|
46667
46602
|
function getDefaultThemeId() {
|
|
46668
46603
|
return "ggui";
|
|
46669
46604
|
}
|
|
46670
|
-
var ThemeContext = (0,
|
|
46605
|
+
var ThemeContext = (0, import_react40.createContext)(null);
|
|
46671
46606
|
var COLOR_MIX_SUPPORTS = "@supports (color: color-mix(in srgb, red, blue))";
|
|
46672
46607
|
function resolvePrimary500Hex(cssVariables) {
|
|
46673
46608
|
const match = cssVariables.match(/--ggui-color-primary-500:\s*(#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6})\s*;/);
|
|
@@ -47159,7 +47094,7 @@ function makeScopeClass(reactId) {
|
|
|
47159
47094
|
}
|
|
47160
47095
|
var AUTO_RETRY_LIMIT = 1;
|
|
47161
47096
|
var AUTO_RETRY_DELAY = 500;
|
|
47162
|
-
var ErrorBoundary = class extends
|
|
47097
|
+
var ErrorBoundary = class extends import_react7.default.Component {
|
|
47163
47098
|
state = { error: null, catchCount: 0, autoRetrying: false };
|
|
47164
47099
|
retryTimer = null;
|
|
47165
47100
|
static getDerivedStateFromError(error210) {
|
|
@@ -47181,10 +47116,10 @@ var ErrorBoundary = class extends import_react12.default.Component {
|
|
|
47181
47116
|
if (this.retryTimer) clearTimeout(this.retryTimer);
|
|
47182
47117
|
}
|
|
47183
47118
|
render() {
|
|
47184
|
-
const { error: error210, autoRetrying
|
|
47119
|
+
const { error: error210, autoRetrying } = this.state;
|
|
47185
47120
|
if (!error210) return this.props.children;
|
|
47186
47121
|
if (autoRetrying) {
|
|
47187
|
-
return /* @__PURE__ */ (0,
|
|
47122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: {
|
|
47188
47123
|
display: "flex",
|
|
47189
47124
|
alignItems: "center",
|
|
47190
47125
|
justifyContent: "center",
|
|
@@ -47193,21 +47128,22 @@ var ErrorBoundary = class extends import_react12.default.Component {
|
|
|
47193
47128
|
gap: 8,
|
|
47194
47129
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
47195
47130
|
fontSize: 13,
|
|
47196
|
-
color: "
|
|
47131
|
+
color: "var(--ggui-color-onSurface, inherit)",
|
|
47132
|
+
opacity: 0.6
|
|
47197
47133
|
}, children: [
|
|
47198
|
-
/* @__PURE__ */ (0,
|
|
47134
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: {
|
|
47199
47135
|
width: 16,
|
|
47200
47136
|
height: 16,
|
|
47201
|
-
border: "2px solid rgba(
|
|
47202
|
-
borderTopColor: "
|
|
47137
|
+
border: "2px solid rgba(128,128,128,0.25)",
|
|
47138
|
+
borderTopColor: "currentColor",
|
|
47203
47139
|
borderRadius: "50%",
|
|
47204
47140
|
animation: "ggui-err-spin 0.6s linear infinite"
|
|
47205
47141
|
} }),
|
|
47206
47142
|
"Retrying...",
|
|
47207
|
-
/* @__PURE__ */ (0,
|
|
47143
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("style", { children: `@keyframes ggui-err-spin { to { transform: rotate(360deg); } }` })
|
|
47208
47144
|
] });
|
|
47209
47145
|
}
|
|
47210
|
-
return /* @__PURE__ */ (0,
|
|
47146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: {
|
|
47211
47147
|
display: "flex",
|
|
47212
47148
|
flexDirection: "column",
|
|
47213
47149
|
alignItems: "center",
|
|
@@ -47216,21 +47152,23 @@ var ErrorBoundary = class extends import_react12.default.Component {
|
|
|
47216
47152
|
minHeight: 120,
|
|
47217
47153
|
gap: 12,
|
|
47218
47154
|
textAlign: "center",
|
|
47219
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
|
47155
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
47156
|
+
color: "var(--ggui-color-onSurface, inherit)"
|
|
47220
47157
|
}, children: [
|
|
47221
|
-
/* @__PURE__ */ (0,
|
|
47158
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: {
|
|
47222
47159
|
width: 48,
|
|
47223
47160
|
height: 48,
|
|
47224
47161
|
borderRadius: 14,
|
|
47225
47162
|
background: "rgba(239, 68, 68, 0.1)",
|
|
47163
|
+
color: "#ef4444",
|
|
47226
47164
|
display: "flex",
|
|
47227
47165
|
alignItems: "center",
|
|
47228
47166
|
justifyContent: "center",
|
|
47229
47167
|
fontSize: 22
|
|
47230
47168
|
}, children: "!" }),
|
|
47231
|
-
/* @__PURE__ */ (0,
|
|
47232
|
-
/* @__PURE__ */ (0,
|
|
47233
|
-
/* @__PURE__ */ (0,
|
|
47169
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { fontSize: 14, fontWeight: 600, opacity: 0.9 }, children: "Something went wrong" }),
|
|
47170
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { fontSize: 12, opacity: 0.6, maxWidth: 280, lineHeight: 1.4 }, children: "This component encountered an error. Try asking for a different view." }),
|
|
47171
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
47234
47172
|
"button",
|
|
47235
47173
|
{
|
|
47236
47174
|
onClick: () => this.setState({ error: null, catchCount: 0 }),
|
|
@@ -47238,9 +47176,10 @@ var ErrorBoundary = class extends import_react12.default.Component {
|
|
|
47238
47176
|
marginTop: 4,
|
|
47239
47177
|
padding: "8px 20px",
|
|
47240
47178
|
borderRadius: 8,
|
|
47241
|
-
border: "1px solid
|
|
47242
|
-
background: "
|
|
47243
|
-
color: "
|
|
47179
|
+
border: "1px solid currentColor",
|
|
47180
|
+
background: "transparent",
|
|
47181
|
+
color: "inherit",
|
|
47182
|
+
opacity: 0.75,
|
|
47244
47183
|
fontSize: 13,
|
|
47245
47184
|
fontWeight: 500,
|
|
47246
47185
|
cursor: "pointer"
|
|
@@ -47248,7 +47187,18 @@ var ErrorBoundary = class extends import_react12.default.Component {
|
|
|
47248
47187
|
children: "Retry"
|
|
47249
47188
|
}
|
|
47250
47189
|
),
|
|
47251
|
-
|
|
47190
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("details", { style: { marginTop: 8, maxWidth: 320, width: "100%", textAlign: "left", opacity: 0.65 }, children: [
|
|
47191
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("summary", { style: { fontSize: 11, cursor: "pointer" }, children: "Error details" }),
|
|
47192
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("pre", { style: {
|
|
47193
|
+
fontSize: 11,
|
|
47194
|
+
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
|
|
47195
|
+
whiteSpace: "pre-wrap",
|
|
47196
|
+
overflowWrap: "anywhere",
|
|
47197
|
+
margin: "6px 0 0",
|
|
47198
|
+
maxHeight: 140,
|
|
47199
|
+
overflow: "auto"
|
|
47200
|
+
}, children: error210.message })
|
|
47201
|
+
] })
|
|
47252
47202
|
] });
|
|
47253
47203
|
}
|
|
47254
47204
|
};
|
|
@@ -47257,15 +47207,15 @@ function ReactComponentRenderer({
|
|
|
47257
47207
|
props = {},
|
|
47258
47208
|
themeId,
|
|
47259
47209
|
cssOverrides,
|
|
47260
|
-
fallback = /* @__PURE__ */ (0,
|
|
47210
|
+
fallback = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: "Loading component..." }),
|
|
47261
47211
|
onError
|
|
47262
47212
|
}) {
|
|
47263
|
-
const reactId = (0,
|
|
47264
|
-
const [scopeClass] = (0,
|
|
47265
|
-
const [
|
|
47266
|
-
const [error210, setError] = (0,
|
|
47267
|
-
const [loading, setLoading] = (0,
|
|
47268
|
-
(0,
|
|
47213
|
+
const reactId = (0, import_react7.useId)();
|
|
47214
|
+
const [scopeClass] = (0, import_react7.useState)(() => makeScopeClass(reactId) || `ggui-rcr-${++scopeCounter}`);
|
|
47215
|
+
const [Component, setComponent] = (0, import_react7.useState)(null);
|
|
47216
|
+
const [error210, setError] = (0, import_react7.useState)(null);
|
|
47217
|
+
const [loading, setLoading] = (0, import_react7.useState)(true);
|
|
47218
|
+
(0, import_react7.useEffect)(() => {
|
|
47269
47219
|
if (!code || code.trim().length === 0) {
|
|
47270
47220
|
setComponent(null);
|
|
47271
47221
|
setLoading(false);
|
|
@@ -47293,7 +47243,7 @@ function ReactComponentRenderer({
|
|
|
47293
47243
|
} catch {
|
|
47294
47244
|
}
|
|
47295
47245
|
w.__ggui__ = {
|
|
47296
|
-
react:
|
|
47246
|
+
react: import_react7.default,
|
|
47297
47247
|
reactDom: reactDomModule,
|
|
47298
47248
|
primitives: primitives_exports,
|
|
47299
47249
|
components: components_exports,
|
|
@@ -47301,7 +47251,7 @@ function ReactComponentRenderer({
|
|
|
47301
47251
|
interact: interact_exports,
|
|
47302
47252
|
wire: dist_exports
|
|
47303
47253
|
};
|
|
47304
|
-
w.__REACT =
|
|
47254
|
+
w.__REACT = import_react7.default;
|
|
47305
47255
|
w.__GGUI_PRIMITIVES = primitives_exports;
|
|
47306
47256
|
w.__GGUI_COMPONENTS = components_exports;
|
|
47307
47257
|
w.__GGUI_COMPOSITIONS = compositions_exports;
|
|
@@ -47337,13 +47287,13 @@ function ReactComponentRenderer({
|
|
|
47337
47287
|
}, [code]);
|
|
47338
47288
|
const themeCss = themeId ? getScopedThemeCss(themeId, scopeClass) : getScopedCssTokens(scopeClass);
|
|
47339
47289
|
if (!code || code.trim().length === 0) {
|
|
47340
|
-
return /* @__PURE__ */ (0,
|
|
47290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: fallback });
|
|
47341
47291
|
}
|
|
47342
47292
|
if (loading) {
|
|
47343
|
-
return /* @__PURE__ */ (0,
|
|
47293
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: fallback });
|
|
47344
47294
|
}
|
|
47345
47295
|
if (error210) {
|
|
47346
|
-
return /* @__PURE__ */ (0,
|
|
47296
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: {
|
|
47347
47297
|
display: "flex",
|
|
47348
47298
|
flexDirection: "column",
|
|
47349
47299
|
alignItems: "center",
|
|
@@ -47354,7 +47304,7 @@ function ReactComponentRenderer({
|
|
|
47354
47304
|
textAlign: "center",
|
|
47355
47305
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
|
47356
47306
|
}, children: [
|
|
47357
|
-
/* @__PURE__ */ (0,
|
|
47307
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: {
|
|
47358
47308
|
width: 48,
|
|
47359
47309
|
height: 48,
|
|
47360
47310
|
borderRadius: 14,
|
|
@@ -47364,52 +47314,26 @@ function ReactComponentRenderer({
|
|
|
47364
47314
|
justifyContent: "center",
|
|
47365
47315
|
fontSize: 22
|
|
47366
47316
|
}, children: "!" }),
|
|
47367
|
-
/* @__PURE__ */ (0,
|
|
47368
|
-
/* @__PURE__ */ (0,
|
|
47317
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.8)" }, children: "Failed to load component" }),
|
|
47318
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.4)", maxWidth: 280, lineHeight: 1.4 }, children: error210.message })
|
|
47369
47319
|
] });
|
|
47370
47320
|
}
|
|
47371
|
-
if (!
|
|
47372
|
-
return /* @__PURE__ */ (0,
|
|
47321
|
+
if (!Component) {
|
|
47322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: fallback });
|
|
47373
47323
|
}
|
|
47374
|
-
return /* @__PURE__ */ (0,
|
|
47375
|
-
/* @__PURE__ */ (0,
|
|
47324
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: scopeClass, children: [
|
|
47325
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("style", { children: [
|
|
47376
47326
|
themeCss,
|
|
47377
47327
|
cssOverrides ?? ""
|
|
47378
47328
|
] }),
|
|
47379
|
-
/* @__PURE__ */ (0,
|
|
47329
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Component, { ...props }) }, code.length)
|
|
47380
47330
|
] });
|
|
47381
47331
|
}
|
|
47382
|
-
var previewShimmerKeyframes = `@keyframes ggui-preview-shimmer {
|
|
47383
|
-
0% { transform: translateX(-100%); }
|
|
47384
|
-
100% { transform: translateX(100%); }
|
|
47385
|
-
}`;
|
|
47386
|
-
var previewCaretKeyframes = `@keyframes ggui-preview-caret {
|
|
47387
|
-
0%, 45% { opacity: 1; }
|
|
47388
|
-
55%, 100% { opacity: 0; }
|
|
47389
|
-
}`;
|
|
47390
|
-
var previewFragmentEnterKeyframes = `@keyframes ggui-preview-fragment-enter {
|
|
47391
|
-
from { opacity: 0; transform: scale(0.97); }
|
|
47392
|
-
to { opacity: 1; transform: scale(1); }
|
|
47393
|
-
}`;
|
|
47394
|
-
var previewReducedMotionCSS = `@media (prefers-reduced-motion: reduce) {
|
|
47395
|
-
[data-ggui-preview] *,
|
|
47396
|
-
[data-ggui-preview]::before,
|
|
47397
|
-
[data-ggui-preview]::after {
|
|
47398
|
-
animation-duration: 0.01ms !important;
|
|
47399
|
-
animation-iteration-count: 1 !important;
|
|
47400
|
-
transition-duration: 0.01ms !important;
|
|
47401
|
-
}
|
|
47402
|
-
}`;
|
|
47403
|
-
var previewKeyframesCss = [
|
|
47404
|
-
previewShimmerKeyframes,
|
|
47405
|
-
previewCaretKeyframes,
|
|
47406
|
-
previewFragmentEnterKeyframes,
|
|
47407
|
-
previewReducedMotionCSS
|
|
47408
|
-
].join("\n\n");
|
|
47409
47332
|
var DynamicComponent = ReactComponentRenderer;
|
|
47333
|
+
var DECODER = new TextDecoder();
|
|
47410
47334
|
|
|
47411
47335
|
// hub-preview-client/main.tsx
|
|
47412
|
-
var
|
|
47336
|
+
var import_jsx_runtime62 = __toESM(require_jsx_runtime(), 1);
|
|
47413
47337
|
function bootstrap() {
|
|
47414
47338
|
const boot = window.__GGUI_DEV_PREVIEW__;
|
|
47415
47339
|
return {
|
|
@@ -47473,11 +47397,11 @@ function PreviewApp({
|
|
|
47473
47397
|
token,
|
|
47474
47398
|
selectedId
|
|
47475
47399
|
}) {
|
|
47476
|
-
const [state, setState] = (0,
|
|
47400
|
+
const [state, setState] = (0, import_react43.useState)(
|
|
47477
47401
|
selectedId ? { kind: "loading" } : { kind: "idle" }
|
|
47478
47402
|
);
|
|
47479
|
-
const [version2, setVersion] = (0,
|
|
47480
|
-
(0,
|
|
47403
|
+
const [version2, setVersion] = (0, import_react43.useState)(0);
|
|
47404
|
+
(0, import_react43.useEffect)(() => {
|
|
47481
47405
|
if (!selectedId) {
|
|
47482
47406
|
setState({ kind: "idle" });
|
|
47483
47407
|
return;
|
|
@@ -47490,7 +47414,7 @@ function PreviewApp({
|
|
|
47490
47414
|
});
|
|
47491
47415
|
return () => controller.abort();
|
|
47492
47416
|
}, [selectedId, token, version2]);
|
|
47493
|
-
(0,
|
|
47417
|
+
(0, import_react43.useEffect)(() => {
|
|
47494
47418
|
if (!selectedId) return;
|
|
47495
47419
|
const controller = new AbortController();
|
|
47496
47420
|
subscribeToRegistry(token, controller.signal, (event) => {
|
|
@@ -47500,90 +47424,90 @@ function PreviewApp({
|
|
|
47500
47424
|
return () => controller.abort();
|
|
47501
47425
|
}, [selectedId, token]);
|
|
47502
47426
|
if (state.kind === "idle") {
|
|
47503
|
-
return /* @__PURE__ */ (0,
|
|
47504
|
-
/* @__PURE__ */ (0,
|
|
47505
|
-
/* @__PURE__ */ (0,
|
|
47427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
|
|
47428
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Meta, { children: "No UI selected" }),
|
|
47429
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Status, { children: "Pick a UI from the Discovered UIs panel to preview it here." })
|
|
47506
47430
|
] });
|
|
47507
47431
|
}
|
|
47508
47432
|
if (state.kind === "loading") {
|
|
47509
|
-
return /* @__PURE__ */ (0,
|
|
47510
|
-
/* @__PURE__ */ (0,
|
|
47433
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
|
|
47434
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Meta, { children: [
|
|
47511
47435
|
"Preview of ",
|
|
47512
|
-
/* @__PURE__ */ (0,
|
|
47436
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: selectedId })
|
|
47513
47437
|
] }),
|
|
47514
|
-
/* @__PURE__ */ (0,
|
|
47438
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Status, { children: "Loading bundle\u2026" })
|
|
47515
47439
|
] });
|
|
47516
47440
|
}
|
|
47517
47441
|
if (state.kind === "ready") {
|
|
47518
|
-
return /* @__PURE__ */ (0,
|
|
47442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "surface", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DynamicComponent, { code: state.code }) });
|
|
47519
47443
|
}
|
|
47520
47444
|
if (state.kind === "not-found") {
|
|
47521
|
-
return /* @__PURE__ */ (0,
|
|
47522
|
-
/* @__PURE__ */ (0,
|
|
47445
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
|
|
47446
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Meta, { children: [
|
|
47523
47447
|
"Preview of ",
|
|
47524
|
-
/* @__PURE__ */ (0,
|
|
47448
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: selectedId })
|
|
47525
47449
|
] }),
|
|
47526
|
-
/* @__PURE__ */ (0,
|
|
47450
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Status, { children: "The server doesn't know this id. It may have been removed from the registry." })
|
|
47527
47451
|
] });
|
|
47528
47452
|
}
|
|
47529
47453
|
if (state.kind === "missing") {
|
|
47530
|
-
return /* @__PURE__ */ (0,
|
|
47531
|
-
/* @__PURE__ */ (0,
|
|
47532
|
-
/* @__PURE__ */ (0,
|
|
47454
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
|
|
47455
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Meta, { children: "No renderable entry" }),
|
|
47456
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Status, { children: [
|
|
47533
47457
|
"Declare ",
|
|
47534
|
-
/* @__PURE__ */ (0,
|
|
47458
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: "entryPoint" }),
|
|
47535
47459
|
" in ",
|
|
47536
|
-
/* @__PURE__ */ (0,
|
|
47460
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: "ggui.ui.json" }),
|
|
47537
47461
|
", or colocate a ",
|
|
47538
|
-
/* @__PURE__ */ (0,
|
|
47462
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: "ggui.ui.tsx" }),
|
|
47539
47463
|
" beside the manifest."
|
|
47540
47464
|
] }),
|
|
47541
|
-
state.tried.length > 0 && /* @__PURE__ */ (0,
|
|
47465
|
+
state.tried.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("pre", { className: "tried", children: state.tried.join("\n") })
|
|
47542
47466
|
] });
|
|
47543
47467
|
}
|
|
47544
47468
|
if (state.kind === "compile") {
|
|
47545
|
-
return /* @__PURE__ */ (0,
|
|
47546
|
-
/* @__PURE__ */ (0,
|
|
47547
|
-
/* @__PURE__ */ (0,
|
|
47469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
|
|
47470
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Meta, { children: "Local compile failed" }),
|
|
47471
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "errors", children: state.detail.errors.map((err, i) => {
|
|
47548
47472
|
const loc = err.location;
|
|
47549
47473
|
const locLine = loc ? `${loc.file ?? state.detail.entry}:${loc.line ?? "?"}:${loc.column ?? "?"}` : state.detail.entry;
|
|
47550
|
-
return /* @__PURE__ */ (0,
|
|
47551
|
-
/* @__PURE__ */ (0,
|
|
47552
|
-
/* @__PURE__ */ (0,
|
|
47553
|
-
loc?.lineText && /* @__PURE__ */ (0,
|
|
47474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { children: [
|
|
47475
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("pre", { className: "location", children: locLine }),
|
|
47476
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("pre", { className: "error", children: err.text }),
|
|
47477
|
+
loc?.lineText && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("pre", { className: "line-text", children: loc.lineText })
|
|
47554
47478
|
] }, i);
|
|
47555
47479
|
}) })
|
|
47556
47480
|
] });
|
|
47557
47481
|
}
|
|
47558
47482
|
if (state.kind === "http") {
|
|
47559
|
-
return /* @__PURE__ */ (0,
|
|
47560
|
-
/* @__PURE__ */ (0,
|
|
47483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
|
|
47484
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Meta, { children: [
|
|
47561
47485
|
"Bundle fetch failed (HTTP ",
|
|
47562
47486
|
state.status,
|
|
47563
47487
|
")"
|
|
47564
47488
|
] }),
|
|
47565
|
-
/* @__PURE__ */ (0,
|
|
47489
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Status, { children: state.message })
|
|
47566
47490
|
] });
|
|
47567
47491
|
}
|
|
47568
|
-
return /* @__PURE__ */ (0,
|
|
47569
|
-
/* @__PURE__ */ (0,
|
|
47570
|
-
/* @__PURE__ */ (0,
|
|
47492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
|
|
47493
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Meta, { children: "Local ggui dev server is unreachable" }),
|
|
47494
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Status, { children: [
|
|
47571
47495
|
"Studio could not reach the server \u2014 is ",
|
|
47572
|
-
/* @__PURE__ */ (0,
|
|
47496
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: "ggui dev" }),
|
|
47573
47497
|
" still running?",
|
|
47574
|
-
/* @__PURE__ */ (0,
|
|
47575
|
-
/* @__PURE__ */ (0,
|
|
47498
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("br", {}),
|
|
47499
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "dim", children: state.message })
|
|
47576
47500
|
] })
|
|
47577
47501
|
] });
|
|
47578
47502
|
}
|
|
47579
47503
|
function Pane({ children }) {
|
|
47580
|
-
return /* @__PURE__ */ (0,
|
|
47504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "frame", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "pane", children }) });
|
|
47581
47505
|
}
|
|
47582
47506
|
function Meta({ children }) {
|
|
47583
|
-
return /* @__PURE__ */ (0,
|
|
47507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "meta", children });
|
|
47584
47508
|
}
|
|
47585
47509
|
function Status({ children }) {
|
|
47586
|
-
return /* @__PURE__ */ (0,
|
|
47510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "status", children });
|
|
47587
47511
|
}
|
|
47588
47512
|
async function subscribeToRegistry(token, signal, onEvent) {
|
|
47589
47513
|
let backoff = 500;
|
|
@@ -47652,7 +47576,7 @@ function mount() {
|
|
|
47652
47576
|
if (!root) throw new Error("preview-root element not found in shell");
|
|
47653
47577
|
const { token, selectedId } = bootstrap();
|
|
47654
47578
|
(0, import_client.createRoot)(root).render(
|
|
47655
|
-
/* @__PURE__ */ (0,
|
|
47579
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react43.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PreviewApp, { token, selectedId }) })
|
|
47656
47580
|
);
|
|
47657
47581
|
}
|
|
47658
47582
|
mount();
|