@difizen/libro-core 0.1.1 → 0.1.2

package/src/material-from-designer.tsx

@@ -31,6 +31,27 @@ export const ClearOutlined: React.FC = () => (
   </svg>
 );
 
+export const PauseCircleOutlined: React.FC = () => (
+  <svg
+    width="21px"
+    height="21px"
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="原色" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="time-out" fillRule="nonzero" fill="#7B7B7B">
+        <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20" />
+        <path
+          d="M10,1.25 C5.16796875,1.25 1.25,5.16796875 1.25,10 C1.25,14.8320312 5.16796875,18.75 10,18.75 C14.8320312,18.75 18.75,14.8320312 18.75,10 C18.75,5.16796875 14.8320312,1.25 10,1.25 Z M10,17.265625 C5.98828125,17.265625 2.734375,14.0117187 2.734375,10 C2.734375,5.98828125 5.98828125,2.734375 10,2.734375 C14.0117187,2.734375 17.265625,5.98828125 17.265625,10 C17.265625,14.0117187 14.0117187,17.265625 10,17.265625 Z M8.28125,6.875 L7.34375,6.875 C7.2578125,6.875 7.1875,6.9453125 7.1875,7.03125 L7.1875,12.96875 C7.1875,13.0546875 7.2578125,13.125 7.34375,13.125 L8.28125,13.125 C8.3671875,13.125 8.4375,13.0546875 8.4375,12.96875 L8.4375,7.03125 C8.4375,6.9453125 8.3671875,6.875 8.28125,6.875 Z M12.65625,6.875 L11.71875,6.875 C11.6328125,6.875 11.5625,6.9453125 11.5625,7.03125 L11.5625,12.96875 C11.5625,13.0546875 11.6328125,13.125 11.71875,13.125 L12.65625,13.125 C12.7421875,13.125 12.8125,13.0546875 12.8125,12.96875 L12.8125,7.03125 C12.8125,6.9453125 12.7421875,6.875 12.65625,6.875 Z"
+          id="形状"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
 export const Reload: React.FC = () => (
   <svg
     width="18px"
@@ -421,7 +442,13 @@ export const AddCellOutlined: React.FC<{ className: string }> = (prop) => (
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
     >
-      <g id="页面-1" stroke="none" strokeWidth="1" fill="#1890FF" fillRule="evenodd">
+      <g
+        id="页面-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="currentColor"
+        fillRule="evenodd"
+      >
         <g id="2.0-添加-cell" transform="translate(-277.000000, -363.000000)">
           <g id="Icon/01-Line/add" transform="translate(277.937500, 363.562500)">
             <path d="M15.9375,7.546875 C16.040625,7.546875 16.125,7.63125 16.125,7.734375 L16.125,9.140625 C16.125,9.24375 16.040625,9.328125 15.9375,9.328125 L8.953125,9.328125 L8.953125,16.6875 C8.953125,16.7910534 8.86917839,16.875 8.765625,16.875 L7.359375,16.875 C7.25582161,16.875 7.171875,16.7910534 7.171875,16.6875 L7.171875,9.328125 L0.1875,9.328125 C0.084375,9.328125 0,9.24375 0,9.140625 L0,7.734375 C0,7.63125 0.084375,7.546875 0.1875,7.546875 L7.171875,7.546875 L7.171875,0.1875 C7.171875,0.0839466094 7.25582161,0 7.359375,0 L8.765625,0 C8.86917839,0 8.953125,0.0839466094 8.953125,0.1875 L8.953125,7.546875 L15.9375,7.546875 Z" />
@@ -455,3 +482,68 @@ export const ArrowRight: React.FC = () => (
     </g>
   </svg>
 );
+
+export const EnableOutputScroll: React.FC = () => (
+  <svg
+    width="16px"
+    height="16px"
+    viewBox="0 0 16 16"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="libro-enable-output-scroll"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g id="2.1固定icon" transform="translate(-314.000000, -344.000000)">
+        <g id="编组-15备份-4" transform="translate(314.000000, 344.000000)">
+          <g
+            id="编组"
+            transform="translate(2.045455, 0.909091)"
+            fill="currentColor"
+            fillRule="nonzero"
+          >
+            <path
+              d="M11.7897727,12.8551136 L0.142045455,12.8551136 C0.0639204545,12.8551136 0,12.9190341 0,12.9971591 L0,14.0625 C0,14.140625 0.0639204545,14.2045455 0.142045455,14.2045455 L11.7897727,14.2045455 C11.8678977,14.2045455 11.9318182,14.140625 11.9318182,14.0625 L11.9318182,12.9971591 C11.9318182,12.9190341 11.8678977,12.8551136 11.7897727,12.8551136 Z M11.7897727,0 L0.142045455,0 C0.0639204545,0 0,0.0639204545 0,0.142045455 L0,1.20738636 C0,1.28551136 0.0639204545,1.34943182 0.142045455,1.34943182 L11.7897727,1.34943182 C11.8678977,1.34943182 11.9318182,1.28551136 11.9318182,1.20738636 L11.9318182,0.142045455 C11.9318182,0.0639204545 11.8678977,0 11.7897727,0 Z M6.45454545,2.18181818 C6.50475316,2.18181818 6.54545455,2.22251957 6.54545455,2.27272727 L6.54457706,4.38181818 L7.71985588,4.38219105 C7.81269273,4.38219105 7.8690036,4.47350599 7.84182654,4.55214864 L7.82106326,4.58993253 L6.03129054,6.85378196 C5.98157463,6.91947798 5.88214281,6.91947798 5.83065133,6.85378196 L4.0408786,4.58993253 C3.97518258,4.50648082 4.0355519,4.38219105 4.14208599,4.38219105 L5.27257706,4.38181818 L5.27272727,2.27272727 C5.27272727,2.22251957 5.31342866,2.18181818 5.36363636,2.18181818 L6.45454545,2.18181818 Z M5.83096591,7.34055398 C5.88068182,7.27485795 5.98011364,7.27485795 6.03160511,7.34055398 L7.82137784,9.60617898 C7.88707386,9.68963068 7.82670455,9.81392045 7.72017045,9.81392045 L6.54457706,9.81381818 L6.54545455,11.9090909 C6.54545455,11.9592986 6.50475316,12 6.45454545,12 L5.36363636,12 C5.31342866,12 5.27272727,11.9592986 5.27272727,11.9090909 L5.27257706,9.81381818 L4.14240057,9.81392045 C4.04956372,9.81392045 3.99325284,9.72260552 4.0204299,9.64396286 L4.04119318,9.60617898 Z"
+              id="形状"
+            />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const DisableOutputScroll: React.FC = () => (
+  <svg
+    width="16px"
+    height="16px"
+    viewBox="0 0 16 16"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="页面-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="4.1取消固定" transform="translate(-314.000000, -344.000000)">
+        <g id="编组-15备份" transform="translate(314.000000, 344.000000)">
+          <rect id="矩形" x="0" y="0" width="16" height="16" rx="4" />
+          <g
+            id="编组"
+            transform="translate(2.000000, 1.000000)"
+            fill="currentColor"
+            fillRule="nonzero"
+          >
+            <path
+              d="M11.7897727,12.8551136 L0.142045455,12.8551136 C0.0639204545,12.8551136 0,12.9190341 0,12.9971591 L0,14.0625 C0,14.140625 0.0639204545,14.2045455 0.142045455,14.2045455 L11.7897727,14.2045455 C11.8678977,14.2045455 11.9318182,14.140625 11.9318182,14.0625 L11.9318182,12.9971591 C11.9318182,12.9190341 11.8678977,12.8551136 11.7897727,12.8551136 Z M11.7897727,0 L0.142045455,0 C0.0639204545,0 0,0.0639204545 0,0.142045455 L0,1.20738636 C0,1.28551136 0.0639204545,1.34943182 0.142045455,1.34943182 L11.7897727,1.34943182 C11.8678977,1.34943182 11.9318182,1.28551136 11.9318182,1.20738636 L11.9318182,0.142045455 C11.9318182,0.0639204545 11.8678977,0 11.7897727,0 Z M7.72017045,4.72301136 C7.82670455,4.72301136 7.88707386,4.59872159 7.82137784,4.51526989 L6.03160511,2.24964489 C5.98011364,2.18394886 5.88068182,2.18394886 5.83096591,2.24964489 L4.04119318,4.51526989 C3.97549716,4.59872159 4.03409091,4.72301136 4.14240057,4.72301136 L5.32670455,4.72301136 L5.32670455,9.48153409 L4.21164773,9.48153409 C4.10511364,9.48153409 4.04474432,9.60582386 4.11044034,9.68927557 L5.90021307,11.953125 C5.95170455,12.018821 6.05113636,12.018821 6.10085227,11.953125 L7.890625,9.68927557 C7.95632102,9.60582386 7.89772727,9.48153409 7.78941761,9.48153409 L6.60511364,9.48153409 L6.60511364,4.72301136 L7.72017045,4.72301136 Z"
+              id="形状"
+            />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/module.ts

@@ -11,34 +11,43 @@ import {
 } from './collapse-service.js';
 import { LibroCommandModule } from './command/index.js';
 import {
+  BetweenCellProvider,
   CellExecutionTimeProvider,
-  LibroCellExecutionTime,
   CellInputBottonBlankProvider,
-  LibroCellInputBottonBlank,
   CellOutputVisulizationProvider,
-  LibroCellVisualization,
   LibroBetweenCellContent,
-  BetweenCellProvider,
+  LibroCellExecutionTime,
+  LibroCellInputBottonBlank,
+  LibroCellVisualization,
 } from './components/index.js';
-import { LibroConfigurationContribution } from './configuration/libro-configuration-contribution.js';
 import { LibroContentModule } from './content/index.js';
+import { LibroFormatterModule } from './formatter/index.js';
 import { LirboContextKey } from './libro-context-key.js';
 import { LibroModel } from './libro-model.js';
-import { NotebookOption, ModelFactory } from './libro-protocol.js';
+import {
+  ModelFactory,
+  NotebookOption,
+  VirtualizedManagerOption,
+  VirtualizedManagerOptionFactory,
+} from './libro-protocol.js';
 import { LibroService } from './libro-service.js';
+import { LibroSettingContribution } from './libro-setting-contribution.js';
 import { LibroViewTracker } from './libro-view-tracker.js';
 import { LibroView } from './libro-view.js';
 import { OutputModule } from './output/index.js';
 import { LibroSlotModule } from './slot/index.js';
 import { LibroColorRegistry } from './theme/libro-color-registry.js';
+import { VirtualizedManagerHelper } from './virtualized-manager-helper.js';
+import { VirtualizedManager } from './virtualized-manager.js';
 
 export const LibroModule = ManaModule.create()
   .register(
+    VirtualizedManager,
     LibroService,
     LirboContextKey,
     LibroModel,
     LibroView,
-    LibroConfigurationContribution,
+    LibroSettingContribution,
     LibroColorRegistry,
     LibroViewTracker,
     {
@@ -62,6 +71,18 @@ export const LibroModule = ManaModule.create()
         };
       },
     },
+    VirtualizedManagerHelper,
+    VirtualizedManager,
+    {
+      token: VirtualizedManagerOptionFactory,
+      useFactory: (ctx) => {
+        return (target: VirtualizedManagerOptionFactory) => {
+          const child = ctx.container.createChild();
+          child.register({ token: VirtualizedManagerOption, useValue: target });
+          return child.get(VirtualizedManager);
+        };
+      },
+    },
     {
       token: CellExecutionTimeProvider,
       useValue: LibroCellExecutionTime,
@@ -88,4 +109,5 @@ export const LibroModule = ManaModule.create()
     ConfigurationModule,
     OutputModule,
     LibroContentModule,
+    LibroFormatterModule,
   );

package/src/output/output-area.tsx

@@ -1,7 +1,6 @@
 import type { IOutput } from '@difizen/libro-common';
 import { isError, isStream } from '@difizen/libro-common';
-import type { ViewComponent } from '@difizen/mana-app';
-import type { Contribution } from '@difizen/mana-app';
+import type { ViewComponent, Contribution } from '@difizen/mana-app';
 import {
   ViewOption,
   getOrigin,
@@ -12,10 +11,8 @@ import {
   view,
   ViewInstance,
 } from '@difizen/mana-app';
-import { Emitter } from '@difizen/mana-app';
-import { contrib, inject, transient } from '@difizen/mana-app';
-import { prop } from '@difizen/mana-app';
-import React, { useEffect } from 'react';
+import { Emitter, prop, contrib, inject, transient } from '@difizen/mana-app';
+import { useEffect, forwardRef } from 'react';
 import { v4 } from 'uuid';
 
 import { ExecutableCellView } from '../cell/index.js';
@@ -28,16 +25,24 @@ import type {
 } from './output-protocol.js';
 import { OutputContribution } from './output-protocol.js';
 
-const LibroOutputAreaRender = React.forwardRef<HTMLDivElement>(
-  function LibroOutputAreaRender(_props, ref) {
+const LibroOutputAreaRender = forwardRef<HTMLDivElement>(
+  function LibroOutputAreaRender(props, ref) {
     const outputArea = useInject<LibroOutputArea>(ViewInstance);
 
+    // const cellModel = outputArea.cell.model;
+    // const executing = ExecutableCellModel.is(cellModel) && cellModel.executing;
+
     useEffect(() => {
       outputArea.onUpdateEmitter.fire();
     }, [outputArea.onUpdateEmitter, outputArea.outputs]);
 
     return (
-      <div className="libro-output-area" ref={ref}>
+      <div
+        className="libro-output-area"
+        ref={ref}
+        //设置最小高度，用于优化长文本输出再次执行时的页面的滚动控制
+        // style={{ minHeight: `${executing ? outputArea.lastOutputContainerHeight + 'px' : 'unset'}` }}
+      >
         {outputArea.outputs.map((output) => {
           return <ViewRender view={output} key={output.id} />;
         })}
@@ -50,12 +55,13 @@ const LibroOutputAreaRender = React.forwardRef<HTMLDivElement>(
 @view('libro-output-area')
 export class LibroOutputArea extends BaseView implements BaseOutputArea {
   override view: ViewComponent = LibroOutputAreaRender;
+  @contrib(OutputContribution)
+  outputProvider: Contribution.Provider<OutputContribution>;
   cell: CellView;
   @prop()
   outputs: BaseOutputView[] = [];
 
-  @contrib(OutputContribution)
-  outputProvider: Contribution.Provider<OutputContribution>;
+  // lastOutputContainerHeight?: number;
 
   constructor(@inject(ViewOption) option: IOutputAreaOption) {
     super();
@@ -187,7 +193,7 @@ export class LibroOutputArea extends BaseView implements BaseOutputArea {
    * messages of the same type.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected shouldCombine(_options: {
+  protected shouldCombine(options: {
     output: IOutput;
     lastModel: BaseOutputView;
   }): boolean {

package/src/output/output-contribution.ts

@@ -1,5 +1,4 @@
-import { ViewManager } from '@difizen/mana-app';
-import { inject, singleton } from '@difizen/mana-app';
+import { inject, singleton, ViewManager } from '@difizen/mana-app';
 
 import { LibroOutputView } from './output-model.js';
 import type { IOutputOptions } from './output-protocol.js';
@@ -7,10 +6,7 @@ import { OutputContribution } from './output-protocol.js';
 
 @singleton({ contrib: OutputContribution })
 export class DefaultOutputContribution implements OutputContribution {
-  viewManager: ViewManager;
-  constructor(@inject(ViewManager) viewManager: ViewManager) {
-    this.viewManager = viewManager;
-  }
+  @inject(ViewManager) viewManager: ViewManager;
   canHandle = () => 1;
   factory(output: IOutputOptions) {
     return this.viewManager.getOrCreateView(LibroOutputView, output);

package/src/output/output-model.tsx

@@ -23,15 +23,15 @@ export class LibroOutputView extends BaseView implements BaseOutputView {
 
   // 增加cell属性，使得通过output可以找到Cell
   cell: CellView;
-  type: string;
 
   @prop()
   raw: IOutput;
-
   @prop()
   data: JSONObject;
   @prop()
   metadata: PartialJSONObject;
+  type: string;
+  trusted: boolean;
   constructor(@inject(ViewOption) options: IOutputOptions) {
     super();
     this.raw = options.output;
@@ -43,7 +43,7 @@ export class LibroOutputView extends BaseView implements BaseOutputView {
   }
 
   render: FC<{ output: BaseOutputView }> = LibroOutputModelRender;
-  trusted: boolean;
+
   override dispose() {
     //
   }

package/src/output/output-protocol.ts

@@ -8,7 +8,6 @@ import type { View } from '@difizen/mana-app';
 import { Syringe } from '@difizen/mana-app';
 
 import type { CellView } from '../libro-protocol.js';
-// import type { CellModel } from '../libro-protocol';
 
 export const CellOption = Symbol('CellOption');
 

package/src/settings/index.less

@@ -0,0 +1,3 @@
+.libro-settings-modal {
+  background-color: #fff !important;
+}

package/src/settings/index.ts

@@ -0,0 +1,4 @@
+export * from './module.js';
+export * from './settings-contribution.js';
+export * from './settings-modal.js';
+export * from './settings-protocol.js';

package/src/settings/module.ts

@@ -0,0 +1,8 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { SettingEditorModule } from './setting-editor/index.js';
+import { SettingsContribution } from './settings-contribution.js';
+
+export const SettingsModule = ManaModule.create()
+  .register(SettingsContribution)
+  .dependOn(SettingEditorModule);

package/src/settings/setting-editor/configuration-panel-view.tsx

@@ -0,0 +1,89 @@
+import type { ConfigurationNode } from '@difizen/mana-app';
+import {
+  BaseView,
+  prop,
+  transient,
+  useInject,
+  view,
+  ViewInstance,
+  ConfigurationRenderRegistry,
+  useConfigurationValue,
+  SchemaValidator,
+} from '@difizen/mana-app';
+import { Form } from 'antd';
+import React from 'react';
+
+import './index.less';
+
+const layout = {
+  labelCol: { span: 8 },
+  wrapperCol: { span: 16 },
+};
+
+export const ConfigurationNodeRender: React.FC<{ node: ConfigurationNode<any> }> = ({
+  node,
+}) => {
+  const configurationRenderRegistry = useInject(ConfigurationRenderRegistry);
+  const schemaValidator = useInject(SchemaValidator);
+  const Render = configurationRenderRegistry.getConfigurationRender(node);
+  const [value, setValue] = useConfigurationValue(node);
+  return (
+    <div key={node.id}>
+      {Render && (
+        <div id={node.id}>
+          <Form.Item
+            label={node.title}
+            extra={node.description}
+            rules={[
+              {
+                validator: (_, currentVal) => {
+                  const valid = schemaValidator.validateNode(node, currentVal);
+                  if (valid) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(new Error('invalid value'));
+                },
+              },
+            ]}
+            hasFeedback
+          >
+            <Render
+              label={node.title}
+              value={value}
+              schema={node.schema}
+              onChange={(val) => {
+                setValue(val);
+              }}
+            />
+          </Form.Item>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const DefaultConfigurationViewComponent: React.FC = () => {
+  const [form] = Form.useForm();
+  const viewInstance = useInject<ConfigurationPanelView>(ViewInstance);
+  const configs = viewInstance.configurationNodes;
+  return (
+    <Form
+      {...layout}
+      form={form}
+      className={`libro-configuration-site-card ${viewInstance.className}`}
+    >
+      {configs?.map((config) => {
+        return <ConfigurationNodeRender node={config} key={config.id} />;
+      })}
+    </Form>
+  );
+};
+
+@transient()
+@view('ConfigurationPanel')
+export class ConfigurationPanelView extends BaseView {
+  override view = DefaultConfigurationViewComponent;
+
+  @prop()
+  configurationNodes: ConfigurationNode<any>[] = [];
+}

package/src/settings/setting-editor/configuration-render-contribution.ts

@@ -0,0 +1,81 @@
+import type { ConfigurationRender } from '@difizen/mana-app';
+import { singleton, ConfigurationRenderContribution } from '@difizen/mana-app';
+
+import {
+  DefaultCheckbox,
+  DefaultInput,
+  DefaultInputNumber,
+  DefaultSelect,
+  DefaultSwitch,
+  DefaultDatePicker,
+} from './default-node-render.js';
+
+@singleton({ contrib: [ConfigurationRenderContribution] })
+export class DefaultConfigurationRenderContribution
+  implements ConfigurationRenderContribution
+{
+  registerConfigurationRenders(): ConfigurationRender[] {
+    return [
+      {
+        canHandle: (config) => {
+          if (config.type === 'input') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultInput,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'checkbox') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultCheckbox,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'switch') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultSwitch,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'inputnumber') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultInputNumber,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'select') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultSelect,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'datepicker') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultDatePicker,
+      },
+    ];
+  }
+}

package/src/settings/setting-editor/default-node-render.tsx

@@ -0,0 +1,65 @@
+import type { RenderProps } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Checkbox, DatePicker, Input, InputNumber, Select, Switch } from 'antd';
+import dayjs from 'dayjs';
+import React from 'react';
+
+const { Option } = Select;
+
+export const DefaultInput: React.FC<RenderProps<string>> = ({ value, onChange }) => (
+  <Input value={value} onChange={(event) => onChange(event.target.value)} />
+);
+
+export const DefaultInputNumber: React.FC<RenderProps<number>> = ({
+  value,
+  onChange,
+  schema,
+}) => (
+  <InputNumber
+    value={value}
+    min={schema.minimum ?? Number.MIN_SAFE_INTEGER}
+    max={schema.maximum ?? Number.MAX_SAFE_INTEGER}
+    onChange={(val) => onChange(val)}
+  />
+);
+
+export const DefaultCheckbox: React.FC<RenderProps<boolean>> = ({
+  value,
+  onChange,
+}) => {
+  return (
+    <Checkbox checked={value} onChange={(event) => onChange(event.target.checked)}>
+      {value ? l10n.t('开启') : l10n.t('关闭')}
+    </Checkbox>
+  );
+};
+
+export const DefaultSwitch: React.FC<RenderProps<boolean>> = ({ value, onChange }) => (
+  <Switch checked={value} onChange={(checked: boolean) => onChange(checked)} />
+);
+
+export const DefaultSelect: React.FC<RenderProps<string>> = ({
+  value,
+  onChange,
+  schema,
+}) => (
+  <Select value={value} onChange={(val: string) => onChange(val)}>
+    {schema['enum'].map((val: string) => (
+      <Option key={val} value={val}>
+        {val}
+      </Option>
+    ))}
+  </Select>
+);
+
+const dateFormat = 'YYYY/MM/DD';
+
+export const DefaultDatePicker: React.FC<RenderProps<string>> = ({
+  value,
+  onChange,
+}) => (
+  <DatePicker
+    value={dayjs(value, dateFormat)}
+    onChange={(date, dateString) => onChange(dateString)}
+  />
+);

package/src/settings/setting-editor/index.less

@@ -0,0 +1,12 @@
+.libro-configuration-tree {
+  height: 100%;
+
+  .libro-configuration-content {
+    height: calc(100% - 48px);
+  }
+}
+
+.libro-configuration-site-card {
+  padding: 30px;
+  background: #ececec;
+}

package/src/settings/setting-editor/index.ts

@@ -0,0 +1,6 @@
+export * from './module.js';
+export * from './configuration-panel-view.js';
+export * from './configuration-render-contribution.js';
+export * from './default-node-render.js';
+export * from './setting-editor-view.js';
+export * from './setting-tree-view.js';

package/src/settings/setting-editor/module.ts

@@ -0,0 +1,17 @@
+import { ManaModule, ConfigurationModule } from '@difizen/mana-app';
+
+import { ConfigurationPanelView } from './configuration-panel-view.js';
+import { DefaultConfigurationRenderContribution } from './configuration-render-contribution.js';
+import { SettingEditorView } from './setting-editor-view.js';
+import { SettingTreeService } from './setting-tree-service.js';
+import { SettingTreeView } from './setting-tree-view.js';
+
+export const SettingEditorModule = ManaModule.create()
+  .register(
+    SettingEditorView,
+    DefaultConfigurationRenderContribution,
+    ConfigurationPanelView,
+    SettingTreeView,
+    SettingTreeService,
+  )
+  .dependOn(ConfigurationModule);