pinstripe 0.12.0 → 0.13.0

package/lib/database/adapters/mysql.js

@@ -352,7 +352,7 @@ Adapter.register('mysql').include({
             },
 
             async first(options = {}){
-                return (await this.all({ ...options, limit: Sql.fromString('0, 1') })).pop();
+                return (await this.all({ ...options, limit: Sql.fromString('1'), offset: Sql.fromString('0') })).pop();
             },
         
             async count(options = {}){
@@ -506,9 +506,18 @@ Adapter.register('mysql').include({
                     if(options.limit){
                         out.push(this.renderSql` limit ${options.limit}`);
                     }
-                } else if(joinRoot._limit) {
-                    const { page, pageSize } = joinRoot._limit;
-                    out.push(this.renderSql` limit ${(page - 1) * pageSize}, ${pageSize}`);
+                } else if(joinRoot._pagination) {
+                    const { pageSize } = joinRoot._pagination;
+                    out.push(this.renderSql` limit ${pageSize}`);
+                }
+
+                if(options.hasOwnProperty('offset')){
+                    if(options.offset){
+                        out.push(this.renderSql` offset ${options.offset}`);
+                    }
+                } else if(joinRoot._pagination || joinRoot._skipCount) {
+                    const { page = 1, pageSize = 10 } = joinRoot._pagination || {};
+                    out.push(this.renderSql` offset ${((page - 1) * pageSize) + joinRoot._skipCount}`);
                 }
         
                 return this.renderSql`${out}`;
@@ -559,10 +568,16 @@ Adapter.register('mysql').include({
                     out.push(this.renderSql` order by ${this._orderBySql}`);
                 }
         
-                if(this._limit) {
-                    const { page, pageSize } = this._limit;
-                    out.push(this.renderSql` limit ${(page - 1) * pageSize}, ${pageSize}`);
+                if(this._pagination) {
+                    const { pageSize } = this._pagination;
+                    out.push(this.renderSql` limit ${pageSize}`);
                 }
+
+                if(this._pagination || this._skipCount) {
+                    const { page = 1, pageSize = 10 } = this._pagination || {};
+                    out.push(this.renderSql` offset ${((page - 1) * pageSize) + this._skipCount}`);
+                }
+
                 return this._database.renderSql`${out}`;
             }
         }
@@ -582,8 +597,6 @@ const TYPE_TO_COLUMN_TYPE_MAP = {
     integer: "int(11)",
     string: "varchar(255)",
     text: "longtext",
-    time: "time",
-    timestamp: "datetime"
 };
 
 const COLUMN_TYPE_TO_TYPE_MAP = (() => {

package/lib/database/adapters/sqlite.js

@@ -1,7 +1,7 @@
 
 import sqlite from 'sqlite3';
 import * as crypto from 'crypto';
-import { unlink } from 'fs';
+import { existsSync, unlink } from 'fs';
 import { promisify } from 'util';
 
 import { Adapter } from '../adapter.js';
@@ -14,14 +14,15 @@ import { Table } from '../table.js';
 import { Row } from '../row.js';
 
 let schemaCache = {};
+let connection;
 
 Adapter.register('sqlite').include({
     get connection(){
-        if(!this._connection){
+        if(!connection){
             const { filename } = this.config;
-            this._connection = new sqlite.Database(filename);
+            connection = new sqlite.Database(filename);
         }
-        return this._connection;
+        return connection;
     },
 
     escapeValue(value){
@@ -51,13 +52,15 @@ Adapter.register('sqlite').include({
             },
         
             async drop() {
-                await new Promise((resolve, reject) => {
-                    this._adapter.connection.close(error => error ? reject(error) : resolve());
-                });
-                delete this._adapter._connection;
+                if(connection){
+                    await new Promise((resolve, reject) => {
+                        connection.close(error => error ? reject(error) : resolve());
+                    });
+                    connection = undefined;
+                }
                 schemaCache = {};
                 this._sessionCache = {};
-                await promisify(unlink)(this._adapter.config.filename);
+                if(existsSync(this._adapter.config.filename)) await promisify(unlink)(this._adapter.config.filename);
             },
         
             async tables(){
@@ -80,9 +83,7 @@ Adapter.register('sqlite').include({
             },
         
             async destroy() {
-                await new Promise((resolve, reject) => {
-                    this._adapter.connection.close(error => error ? reject(error) : resolve());
-                });
+                // do nothing
             },
 
             async _fetchRows(sql){
@@ -138,7 +139,19 @@ Adapter.register('sqlite').include({
                 while(rows.length){
                     const { _type, ...fields } = rows.shift();
                     if(_type !== undefined){
-                        out.push(await Row.create(_type, this, fields));
+                        const table = await this[Inflector.pluralize(_type)];
+                        const mappedFields = {};
+                        const names = Object.keys(fields);
+                        while(names.length){
+                            const name = names.shift();
+                            const column = await table[name];
+                            if(column && ['date', 'datetime'].includes(await column.type())){
+                                mappedFields[name] = new Date(fields[name]);
+                            } else {
+                                mappedFields[name] = fields[name];
+                            }
+                        }
+                        out.push(await Row.create(_type, this, mappedFields));
                     } else {
                         out.push(fields);
                     }
@@ -323,7 +336,7 @@ Adapter.register('sqlite').include({
             },
 
             async first(options = {}){
-                return (await this.all({ ...options, limit: Sql.fromString('0, 1') })).pop();
+                return (await this.all({ ...options, limit: Sql.fromString('1'), offset: Sql.fromString('0')  })).pop();
             },
         
             async count(options = {}){
@@ -345,6 +358,8 @@ Adapter.register('sqlite').include({
                             type = 'primary_key';
                         } else if(name == 'id'){
                             type = 'alternate_key';
+                        } else if(name.match(/.+Id$/)){
+                            type = 'foreign_key';
                         } else {
                             type = COLUMN_TYPE_TO_TYPE_MAP[row.type] || 'string';
                         }
@@ -475,9 +490,18 @@ Adapter.register('sqlite').include({
                     if(options.limit){
                         out.push(this.renderSql` limit ${options.limit}`);
                     }
-                } else if(joinRoot._limit) {
-                    const { page, pageSize } = joinRoot._limit;
-                    out.push(this.renderSql` limit ${(page - 1) * pageSize}, ${pageSize}`);
+                } else if(joinRoot._pagination) {
+                    const { pageSize } = joinRoot._pagination;
+                    out.push(this.renderSql` limit ${pageSize}`);
+                }
+
+                if(options.hasOwnProperty('offset')){
+                    if(options.offset){
+                        out.push(this.renderSql` offset ${options.offset}`);
+                    }
+                } else if(joinRoot._pagination || joinRoot._skipCount) {
+                    const { page = 1, pageSize = 10 } = joinRoot._pagination || {};
+                    out.push(this.renderSql` offset ${((page - 1) * pageSize) + joinRoot._skipCount}`);
                 }
         
                 return this.renderSql`${out}`;
@@ -527,11 +551,17 @@ Adapter.register('sqlite').include({
                 if(this._orderBySql.length){
                     out.push(this.renderSql` order by ${this._orderBySql}`);
                 }
-        
-                if(this._limit) {
-                    const { page, pageSize } = this._limit;
-                    out.push(this.renderSql` limit ${(page - 1) * pageSize}, ${pageSize}`);
+
+                if(this._pagination) {
+                    const { pageSize } = this._pagination;
+                    out.push(this.renderSql` limit ${pageSize}`);
                 }
+
+                if(this._pagination || this._skipCount) {
+                    const { page = 1, pageSize = 10 } = this._pagination || {};
+                    out.push(this.renderSql` offset ${((page - 1) * pageSize) + this._skipCount}`);
+                }
+
                 return this._database.renderSql`${out}`;
             }
         }
@@ -551,8 +581,6 @@ const TYPE_TO_COLUMN_TYPE_MAP = {
     integer: "integer",
     string: "varchar",
     text: "text",
-    time: "time",
-    timestamp: "datetime"
 };
 
 const COLUMN_TYPE_TO_TYPE_MAP = (() => {

package/lib/database/constants.js

@@ -7,8 +7,6 @@ export const ALLOWED_TABLE_ADAPTER_COLUMN_TYPES = [
     'float',
     'integer',
     'string',
-    'time',
-    'timestamp'
 ];
 
 export const TYPE_TO_DEFAULT_VALUE_MAP = {
@@ -32,8 +30,6 @@ export const COLUMN_TYPE_TO_FORM_FIELD_TYPE_MAP = {
     integer: "number",
     string: "text",
     text: "textarea",
-    time: "datetime-local",
-    timestamp: "datetime-local"
 };
 
 export const RESERVED_WORDS = [

package/lib/database/table.js

@@ -108,7 +108,8 @@ export const Table = Base.extend().include({
             this._fromSql = [this._generateFromSql()];
             this._whereSql = [];
             this._orderBySql = [];
-            this._limit = undefined;
+            this._pagination = undefined;
+            this._skipCount = 0;
         }
     },
 
@@ -138,12 +139,17 @@ export const Table = Base.extend().include({
     },
 
     paginate(page = 1, pageSize = 10){
-        this._joinRoot._limit = { page, pageSize };
+        this._joinRoot._pagination = { page, pageSize };
         return this;
     },
 
     clearPagination(){
-        this._joinRoot._limit = undefined;
+        this._joinRoot._pagination = undefined;
+        return this;
+    },
+
+    skip(skipCount){
+        this._joinRoot._skipCount = skipCount;
         return this;
     },
 
@@ -151,6 +157,7 @@ export const Table = Base.extend().include({
         return this._database.run`${this._generateSelectSql(options)}`;
     },
 
+    // can we get rid of this?
     async forEach(fn){
         const rows = await this.all();
         for(let i = 0; i < rows.length; i++){
@@ -231,7 +238,7 @@ export const Table = Base.extend().include({
     },
 
     async toTableAdapter(){
-        const limit = this._joinRoot._limit;
+        const limit = this._joinRoot._pagination;
         const name = this.constructor.name;
         let pageCount = 1;
         let rowCount;

package/lib/database/union.js

@@ -28,7 +28,7 @@ export const Union = Base.extend().include({
         });
     },
     
-    initialize(database, collections, orderBySql = [], limit){
+    initialize(database, collections, orderBySql = [], pagination, skip = 0){
         this._adapter = database._adapter;
         this._database = database
         this._collections = (collections || this.constructor.tableClasses.map(tableClass => new tableClass(database))).map(collection => {
@@ -38,7 +38,8 @@ export const Union = Base.extend().include({
             return AsyncPathBuilder.new(collection);
         });
         this._orderBySql = [ ...orderBySql ];
-        this._limit = limit;
+        this._pagination = pagination;
+        this._skipCount = skip
     },
 
     concat(collection){
@@ -55,12 +56,17 @@ export const Union = Base.extend().include({
     },
 
     paginate(page = 1, pageSize = 10){
-        this._limit = { page, pageSize };
+        this._pagination = { page, pageSize };
         return this;
     },
 
     clearPagination(){
-        this._limit = undefined;
+        this._pagination = undefined;
+        return this;
+    },
+
+    skip(skipCount){
+        this._joinRoot._skipCount = skipCount;
         return this;
     },
 
@@ -68,6 +74,7 @@ export const Union = Base.extend().include({
         return this._database.run`${this._generateSelectSql(options)}`;
     },
 
+    // can we get rid of this?
     async forEach(fn){
         const rows = await this.all();
         for(let i = 0; i < rows.length; i++){
@@ -91,11 +98,11 @@ export const Union = Base.extend().include({
     destroy(){},
 
     __getMissing(name){
-        return new Union(this._database, this._collections.map(collection => collection[name]), this._orderBySql, this._limit);
+        return new Union(this._database, this._collections.map(collection => collection[name]), this._orderBySql, this._pagination, this._skipCount);
     },
 
     __call(...args){
-        return new Union(this._database, this._collections.map(collection => collection(...args)), this._orderBySql, this._limit);
+        return new Union(this._database, this._collections.map(collection => collection(...args)), this._orderBySql, this._pagination, this._skipCount);
     },
 
     _generateSelectSql: deligateToAdapter('_generateSelectSql'),

package/lib/node_wrapper.js

@@ -383,7 +383,7 @@ function cleanChildren(){
 }
 
 function clean(){
-    if(this.is('.progress-bar')) return;
+    if(this.is('.ps-progress-bar')) return;
 
     [...this.node.childNodes].forEach(node => node._nodeWrapper && clean.call(node._nodeWrapper));
 
@@ -503,7 +503,7 @@ function insert(virtualNode, referenceChild, returnNodeWrapper = true){
     } else if(type == '#comment'){
         node = document.createComment(attributes.value);
     } else {
-        node = document.createElement(type);
+        node = (type == 'svg' || this.node instanceof SVGElement) ? document.createElementNS('http://www.w3.org/2000/svg', type) : document.createElement(type);
         Object.keys(attributes).forEach((key) => {
             node.setAttribute(key, attributes[key]);
         });
@@ -532,7 +532,7 @@ function normalizeVirtualNode(){
     }
 
     if(this.type == 'body'){
-        const progressBar = new this.constructor(this, 'div', {class: 'progress-bar', 'data-node-wrapper': 'progress-bar'})
+        const progressBar = new this.constructor(this, 'div', {class: 'ps-progress-bar', 'data-node-wrapper': 'progress-bar'})
         this.children = [
             progressBar,
             ...this.children

package/lib/node_wrappers/document.client.js

@@ -16,7 +16,7 @@ export default {
 
     get progressBar(){
         if(!this._progressBar){
-            this._progressBar = this.descendants.find(node => node.is('.progress-bar'));
+            this._progressBar = this.descendants.find(node => node.is('.ps-progress-bar'));
         }
         return this._progressBar;
     },

package/lib/node_wrappers/helpers.js

@@ -10,9 +10,9 @@ export function loadFrame(confirm, target, method, url){
     
     if(target == '_overlay'){
         this.document.descendants.filter(node => node.is('html')).forEach(node => {
-            node.addClass('has-overlay');
+            node.addClass('ps-has-overlay');
         });
-        frame = this.document.descendants.find(node => node.is('body')).append(`<div class="overlay" data-node-wrapper="overlay" data-load-on-init="false"></div>`).pop();
+        frame = this.document.descendants.find(node => node.is('body')).append(`<div class="ps-overlay" data-node-wrapper="overlay" data-load-on-init="false"></div>`).pop();
         frame._parent = this;
         this._overlayChild = frame;
     } else {

package/lib/node_wrappers/markdown_editor/line_inserter.client.js

@@ -6,7 +6,7 @@ export default {
         this.on('click', () => {
             const { lineContent } = this.data;
             const { lineNumber } = this.parents.find(n => n.is('[data-line-number]')).data;
-            const markdownEditor =  this.parents.find(n => n.is('.markdown-editor'));
+            const markdownEditor =  this.parents.find(n => n.is('.ps-markdown-editor'));
 
             markdownEditor.replaceLine(lineNumber, lineContent);
         });

package/lib/node_wrappers/markdown_editor.client.js

@@ -4,14 +4,14 @@ export default {
         this.constructor.parent.prototype.initialize.call(this, ...args);
         
         const anchorTextarea = this.frame.parent;
-        const editorTextarea = this.descendants.find(n => n.is('.markdown-editor-text-pane > textarea'));
+        const editorTextarea = this.descendants.find(n => n.is('.ps-markdown-editor-text-pane > textarea'));
 
         editorTextarea.value = anchorTextarea.value;
         editorTextarea.focus();
         editorTextarea.selectionStart = anchorTextarea.selectionStart;
         editorTextarea.selectionEnd = anchorTextarea.selectionEnd;
         
-        const previewFrame = this.frame.descendants.find(n => n.is('.markdown-editor-preview-pane'));
+        const previewFrame = this.frame.descendants.find(n => n.is('.ps-markdown-editor-preview-pane'));
 
         this.on('submit', () => {
             const { value } = this.values;

package/lib/node_wrappers/overlay.client.js

@@ -17,9 +17,9 @@ export default {
 
     remove(...args){
         this.constructor.parent.prototype.remove.call(this, ...args);
-        if(!this.document.descendants.find(node => node.is('body')).children.filter((child) => child.is('.overlay')).length){
+        if(!this.document.descendants.find(node => node.is('body')).children.filter((child) => child.is('.ps-overlay')).length){
             this.document.descendants.filter(node => node.is('html')).forEach(node => {
-                node.removeClass('has-overlay');
+                node.removeClass('ps-has-overlay');
             })
         }
     }

package/lib/services/fetch.js

@@ -1,3 +1,4 @@
+import { View } from '../view.js';
 
 export default ({ createEnvironment }) => {
     return (_params = {}) => createEnvironment(async ({ environment, renderView }) => {
@@ -31,8 +32,18 @@ export default ({ createEnvironment }) => {
     });
 };
 
+const isView = name => !!View.classes[name];
+
 const renderGuardViews = async (renderView, viewName, params) => {
     const viewNameSegments = viewName != '' ? viewName.split(/\//) : [];
+
+    const candidateIndexView = [...viewNameSegments, 'index'].join('/');
+    const candidateDefaultView = [...viewNameSegments, 'default'].join('/');
+
+    if(!isView(candidateIndexView) && !isView(candidateDefaultView)){
+        viewNameSegments.pop();
+    }
+
     const prefixSegments = [];
     while(true){
         const out = normalizeResponse(await renderView(prefixSegments.length ? [...prefixSegments, 'guard'].join('/') : 'guard', params));

package/lib/services/format_date.js

@@ -0,0 +1,6 @@
+
+import { DateTime } from 'luxon';
+
+export default () => {
+    return (date, format = 'LLL dd, yyyy') => DateTime.fromJSDate(date).toFormat(format);
+};

package/lib/services/render_form.js

@@ -70,7 +70,7 @@ export default {
         });
 
         return renderHtml`
-            <div class="modal" data-node-wrapper="anchor" data-action="remove" data-ignore-events-from-children="true">
+            <div class="ps-modal" data-node-wrapper="anchor" data-action="remove" data-ignore-events-from-children="true">
                 <button data-node-wrapper="anchor" data-action="remove"></button>
                 <form method="post" enctype="multipart/form-data" autocomplete="off">
                     <header>
@@ -80,9 +80,9 @@ export default {
                         ${() => {
                             if(otherErrors.length){
                                 return renderHtml`
-                                    <div class="field">
+                                    <div class="ps-field">
                                         ${otherErrors.map(error => renderHtml`
-                                            <p class="is-error">${error}</p>
+                                            <p class="ps-is-error">${error}</p>
                                         `)}
                                     </div>
                                 `
@@ -96,31 +96,31 @@ export default {
                             }
                             return renderHtml`
                                 <div>
-                                    <label>${label}</label>
+                                    <label class="ps-label">${label}</label>
                                     ${() => {
                                         if(type == 'textarea'){
                                             return renderHtml`
-                                                <textarea class="${error ? ' is-error' : ''}" name="${name}">${value}</textarea>
+                                                <textarea class="ps-textarea${error ? ' ps-is-error' : ''}" name="${name}">${value}</textarea>
                                             `
                                         }
                                         if(type == 'markdown'){
                                             return renderHtml`
-                                                <textarea class="${error ? ' is-error' : ''}" name="${name}" data-node-wrapper="anchor" data-target="_overlay" data-href="&_part=markdown-editor">${value}</textarea>
+                                                <textarea class="ps-textarea${error ? ' ps-is-error' : ''}" name="${name}" data-node-wrapper="anchor" data-target="_overlay" data-href="&_part=markdown-editor">${value}</textarea>
                                             `
                                         }
                                         if(type == 'checkbox'){
                                             return renderHtml`
-                                                <input class="${error ? ' is-error' : ''}" type="checkbox" name="${name}" type="${type}" ${value ? 'checked' : ''} />
+                                                <input class="ps-input${error ? ' ps-is-error' : ''}" type="checkbox" name="${name}" type="${type}" ${value ? 'checked' : ''} />
                                             `
                                         }
                                         return renderHtml`
-                                            <input class="${error ? ' is-error' : ''}" name="${name}" type="${type}" value="${value}">
+                                            <input class="ps-input${error ? ' ps-is-error' : ''}" name="${name}" type="${type}" value="${value}">
                                         ` 
                                     }}
                                     ${() => {
                                         if(error){
                                             return renderHtml`
-                                                <p class="help is-error">${error}</p>
+                                                <p class="ps-is-error">${error}</p>
                                             `
                                         }
                                     }}
@@ -129,8 +129,8 @@ export default {
                         })}
                     </section>
                     <footer>
-                        <button type="submit">${submitTitle}</button>
-                        <button data-node-wrapper="anchor" data-action="remove">${cancelTitle}</button>
+                        <button class="ps-button" type="submit">${submitTitle}</button>
+                        <button class="ps-button" data-node-wrapper="anchor" data-action="remove">${cancelTitle}</button>
                     </footer>
                 </form>
             </div>
@@ -142,13 +142,13 @@ export default {
         const { value = '' } = params;
 
         return renderHtml`
-            <div class="modal" data-node-wrapper="anchor" data-action="remove" data-ignore-events-from-children="true">
+            <div class="ps-modal" data-node-wrapper="anchor" data-action="remove" data-ignore-events-from-children="true">
                 <button data-node-wrapper="anchor" data-action="remove"></button>
-                <div class="markdown-editor" data-autosubmit="true" data-node-wrapper="markdown-editor">
-                    <div class="markdown-editor-text-pane">
+                <div class="ps-markdown-editor" data-autosubmit="true" data-node-wrapper="markdown-editor">
+                    <div class="ps-markdown-editor-text-pane">
                         <textarea name="value">${value}</textarea>
                     </div>
-                    <div class="markdown-editor-preview-pane" data-url="&_part=markdown-editor-preview" data-node-wrapper="frame"></div>
+                    <div class="ps-markdown-editor-preview-pane" data-url="&_part=markdown-editor-preview" data-node-wrapper="frame"></div>
                 </div>
             </div>
         `;

package/lib/services/render_frame.js

@@ -0,0 +1,11 @@
+
+import { Url } from '../url.js'
+
+export default ({ fetch, renderHtml }) => {
+    return async (path = '/', params = {}) => {
+        const [ status, headers, body ] = await fetch({ ...params, _path: path });
+        const url = Url.new('http', 'localhost', 80, path, params).toString().replace(/http:\/\/[^\/]*/, '');
+        
+        return renderHtml`<div data-node-wrapper="frame" data-url="${url}">${renderHtml(body)}</div>`;
+    };
+};

package/lib/services/render_list.js

@@ -27,11 +27,11 @@ export default ({ overload, renderHtml }) => {
                         return { number, current };
                     });
                     if(pagination.length > 1) return renderHtml` 
-                        <nav class="p-pagination pagination">
-                            <ul class="pagination-list mb-4">
+                        <nav class="ps-pagination">
+                            <ul>
                                 ${pagination.map(({ number, current }) => renderHtml`
                                     <li>
-                                        <a class="pagination-link${current ? ' is-current' : ''}" href="?page=${number}">${number}</a>
+                                        <a class="${current ? ' ps-is-current' : ''}" href="?page=${number}">${number}</a>
                                     </li>
                                 `)}
                             </ul>

package/lib/services/render_markdown.js

@@ -23,7 +23,7 @@ export default ({ renderHtml }) => {
             paragraph.type = 'div';
             paragraph.attributes = {
                 ...paragraph.attributes,
-                class: 'frame',
+                class: 'ps-frame',
                 'data-node-wrapper': 'frame',
                 'data-url': `/blocks/${name}?args=${encodeURIComponent(args)}`
             };

package/lib/services/render_table.js

@@ -24,16 +24,15 @@ export default ({ overload, renderList, renderHtml, params: { _headers = {} } })
                     if(_headers['x-pinstripe-frame-type'] != 'overlay') return out;
 
                     return renderHtml`
-                    <div class="modal" data-node-wrapper="anchor" data-action="remove" data-ignore-events-from-children="true">
+                        <div class="ps-modal" data-node-wrapper="anchor" data-action="remove" data-ignore-events-from-children="true">
                             <button data-node-wrapper="anchor" data-action="remove"></button>
-                            <div>
-                                <header class="modal-card-head">
+                                <header>
                                     <p>${name}</p>
                                 </header>
-                                <section class="modal-card-body">
+                                <div>
                                     ${out}
-                                </section>
-                                <footer class="modal-card-foot">
+                                </div>
+                                <footer>
                                     <button class="button" data-action="remove">Close</button>
                                 </footer>
                             </div>

package/lib/views/base.css.js

@@ -1,226 +1,15 @@
 
-export default async ({ renderCss, themeConfig }) => renderCss({
-    get '*'() {
-        return {
-            margin: 0,
-            padding: 0,
-            color: themeConfig.colors.text,
-            fontSize: themeConfig.fontSizes.text,
-            fontWeight: 400,
-            lineHeight: 1.5,
-            boxSizing: 'border-box',
-            fontFamily: themeConfig.fonts.main,
-            textRendering: 'optimizeLegibility',
-            textSizeAdjust: '100%',
-            '-moz-osx-font-smoothing': 'grayscale',
-            '-webkit-font-smoothing': 'antialiased',
-        };
-    },
-
-    'article, aside, figure, footer, header, hgroup, section': { display: 'block' },
+export default async ({ renderCss }) => renderCss({
 
-    get 'code, pre'(){
-        return {
-            '-moz-osx-font-smoothing': 'auto',
-            '-webkit-font-smoothing': 'auto',
-            'font-family': themeConfig.fonts.code,
-        };
-    },
-
-    get a() {
-        return {
-            color: themeConfig.colors.link,
-            cursor: 'pointer',
-            textDecoration: 'none',
-            strong: { color: 'currentColor' },
-            '&:hover': { color: themeConfig.colors.linkHover }
-        };
-    },
-
-    get code() {
-        return {
-            backgroundColor: themeConfig.colors.codeBackground,
-            color: themeConfig.colors.code,
-            fontSize: themeConfig.fontSizes.code,
-            fontWeight: themeConfig.fontWeights.code,
-            padding: themeConfig.space.codePadding
-        };
-    },
-
-    get hr() {
-        return {
-            backgroundColor: themeConfig.colors.hrBackground,
-            border: 'none',
-            display: 'block',
-            height: themeConfig.sizes.hrHeight,
-            margin: themeConfig.space.hrMargin
-        };
+    html: {
+        fontSize: '62.5%'
     },
 
-    img: {
-        height: 'auto',
-        maxWidth: '100%'
+    body: {
+        fontSize: '1.6rem'
     },
 
-    'input[type="checkbox"], input[type="radio"]': { verticalAlign: 'baseline' },
-
-    get small() {
-        return {
-            fontSize: themeConfig.fontSizes.small
-        }
-    },
-
-    span: {
-        fontStyle: 'inherit',
-        fontWeight: 'inherit'
-    },
-
-    get strong() {
-        return {
-            color: themeConfig.colors.strong,
-            fontWeight: themeConfig.fontWeights.strong
-        }
-    },
-
-    fieldset: { border: 'none' },
-
-
-    get pre() {
-        return {
-            '-webkit-overflow-scrolling': 'touch',
-            backgroundColor: themeConfig.colors.preBackground,
-            color: themeConfig.colors.pre,
-            fontSize: themeConfig.fontSizes.pre,
-            overflowX: 'auto',
-            padding: themeConfig.space.prePadding,
-            whiteSpace: 'pre',
-            wordWrap: 'normal',
-            code: {
-                backgroundColor: 'transparent',
-                color: 'currentColor',
-                fontSize: themeConfig.fontSizes.preCode,
-                padding: 0
-            }
-        }
-    },
-
-    'li + li': { marginTop: '0.25em' },
-
-    'p, dl, ol, ul, blockquote, pre, table': { '&:not(:last-child)': { marginBottom: '1em' } },
-
-    get 'h1, h2, h3, h4, h5, h6'() {
-        return {
-            color: themeConfig.colors.heading,
-            fontWeight: themeConfig.fontWeights.heading,
-            lineHeight: themeConfig.lineHeights.heading
-        };
-    },
-
-    h1: {
-        fontSize: '2em',
-        marginBottom: '0.5em',
-        '&:not(:first-child)': { marginTop: '1em' }
-    },
-
-    h2: {
-        fontSize: '1.75em',
-        marginBottom: '0.5714em',
-        '&:not(:first-child)': { marginTop: '1.1428em' }
-    },
-
-    h3: {
-        fontSize: '1.5em',
-        marginBottom: '0.6666em',
-        '&:not(:first-child)': { marginTop: '1.3333em' }
-    },
-
-    h4: {
-        fontSize: '1.25em',
-        marginBottom: '0.8em'
-    },
-
-    h5: {
-        fontSize: '1.125em',
-        marginBottom: '0.8888em'
-    },
-
-    h6: {
-        fontSize: '1em',
-        marginBottom: '1em'
-    },
-
-    get blockquote() {
-        return {
-            backgroundColor: themeConfig.colors.blockquoteBackground,
-            padding: themeConfig.space.blockquotePadding
-        };
-    },
-
-    ol: {
-        listStylePosition: 'outside',
-        marginTop: '1em',
-        '&:not([type])': { listStyleType: 'decimal' }
-    },
-
-    ul: {
-        listStyle: 'disc outside',
-        marginTop: '1em',
-        marginLeft: '2em',
-        marginBottom: '1em',
-        ul: {
-            listStyleType: 'circle',
-            marginTop: '0.5em',
-            ul: {
-                listStyleType: 'square',
-            }
-        }
-    },
-
-    figure: {
-        marginLeft: '2em',
-        marginRight: '2em',
-        textAlign: 'center',
-        '&:not(:first-child)': { marginTop: '2em' },
-        '&:not(:last-child)': { marginBottom: '2em' },
-        img: { display: 'inlineBlock' },
-        figcaption: { fontStyle: 'italic' }
-    },
-
-    'sup, sub': { fontSize: '75%' },
-
-    get table() {
-        return {
-            width: '100%',
-
-            'td, th': {
-                border: themeConfig.borders.tableCell,
-                borderWidth: themeConfig.borderWidths.tableCell,
-                padding: themeConfig.space.tableCellPadding,
-                verticalAlign: 'top',
-                '&:not([align])': { textAlign: 'inherit' }
-            },
-
-            th: { color: themeConfig.colors.tableCellHeading },
-
-            thead: {
-                'td, th': {
-                    borderWidth: themeConfig.borderWidths.tableHeadCell,
-                    color: themeConfig.colors.tableHeadCell,
-                }
-            },
-
-            tfoot: {
-                'td, th': {
-                    borderWidth: themeConfig.borderWidths.tableFootCell,
-                    color: themeConfig.colors.tableFootCell,
-                }
-            },
-
-            'tbody tr:last-child': { 'td, th': { borderBottomWidth: 0 } }
-        }
-    },
-
-    'button, *.button': {
+    '.ps-button': {
         '-moz-appearance': 'none',
         '-webkit-appearance': 'none',
         display: 'inline-flex',
@@ -228,24 +17,24 @@ export default async ({ renderCss, themeConfig }) => renderCss({
         verticalAlign: 'top',
         justifyContent: 'center',
     
-        border: '1px solid transparent',
-        borderRadius: '4px',
+        border: '0.1rem solid transparent',
+        borderRadius: '0.4rem',
         boxShadow: 'none',
-        fontSize: '1rem',
+        fontSize: '1.6rem',
         height: '2.5em',
         lineHeight: '1.5',
         position: 'relative',
         
         backgroundColor: 'white',
         borderColor: '#dbdbdb',
-        borderWidth: '1px',
+        borderWidth: '0.1rem',
         color: '#363636',
         cursor: 'pointer',
         
-        paddingBottom: 'calc(0.5em - 1px)',
+        paddingBottom: 'calc(0.5em - 0.1rem)',
         paddingLeft: '1em',
         paddingRight: '1em',
-        paddingTop: 'calc(0.5em - 1px)',
+        paddingTop: 'calc(0.5em - 0.1rem)',
         textAlign: 'center',
         whiteSpace: 'nowrap',
     
@@ -270,28 +59,28 @@ export default async ({ renderCss, themeConfig }) => renderCss({
         }
     },
 
-    "input:not([type='checkbox'])": {
+    ".ps-input:not([type='checkbox'])": {
         '-moz-appearance': 'none',
         '-webkit-appearance': 'none',
         alignItems: 'center',
-        border: '1px solid transparent',
-        borderRadius: '4px',
+        border: '0.1rem solid transparent',
+        borderRadius: '0.4rem',
         boxShadow: 'none',
         display: 'inline-flex',
-        fontSize: '1rem',
+        fontSize: '1.6rem',
         height: '2.5em',
         justifyContent: 'flex-start',
         lineHeight: '1.5',
-        paddingBottom: 'calc(0.5em - 1px)',
-        paddingLeft: 'calc(0.75em - 1px)',
-        paddingRight: 'calc(0.75em - 1px)',
-        paddingTop: 'calc(0.5em - 1px)',
+        paddingBottom: 'calc(0.5em - 0.1rem)',
+        paddingLeft: 'calc(0.75em - 0.1rem)',
+        paddingRight: 'calc(0.75em - 0.1rem)',
+        paddingTop: 'calc(0.5em - 0.1rem)',
         position: 'relative',
         verticalAlign: 'top',
 
         backgroundColor: 'white',
         borderColor: '#dbdbdb',
-        borderRadius: '4px',
+        borderRadius: '0.4rem',
         color: '#363636',
 
         boxShadow: 'inset 0 0.0625em 0.125em rgb(10 10 10 / 5%)',
@@ -318,89 +107,49 @@ export default async ({ renderCss, themeConfig }) => renderCss({
         },
     },
 
-    textarea: {
-        border: '1px solid #dbdbdb',
+    '.ps-textarea': {
+        border: '0.1rem solid #dbdbdb',
         width: '100%',
         minHeight: '7em',
-        borderRadius: '4px',
-        paddingBottom: 'calc(0.5em - 1px)',
-        paddingLeft: 'calc(0.75em - 1px)',
-        paddingRight: 'calc(0.75em - 1px)',
-        paddingTop: 'calc(0.5em - 1px)',
+        borderRadius: '0.4rem',
+        paddingBottom: 'calc(0.5em - 0.1rem)',
+        paddingLeft: 'calc(0.75em - 0.1rem)',
+        paddingRight: 'calc(0.75em - 0.1rem)',
+        paddingTop: 'calc(0.5em - 0.1rem)',
     },
 
-    label: {
+    '.ps-label': {
         color: '#363636',
         display: 'block',
-        fontSize: '1rem',
+        fontSize: '1.6rem',
         fontWeight: '700',
         '&:not(:last-child)': { marginBottom: '0.5em' }
     },
 
-    '*.is-error:not(input):not(textarea)': {
+    '*.ps-is-error:not(input):not(textarea)': {
         color: '#f14668',
         display: 'block',
     },
 
-    '&.has-overlay': { overflow: 'hidden !important' },
-
-    '.card': {
-        backgroundVolor: 'white',
-        borderRadius: '0.25rem',
-        boxShadow: '0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0px 0 1px rgb(10 10 10 / 2%)',
-        color: '#4a4a4a',
-        maxWidth: '100%',
-        position: 'relative',
-        marginBottom: '2em', 
-    
-        '> *': {
-            backgroundColor: 'transparent',
-            padding: '1.5rem'
-        },
-    
-        '> header': {
-            backgroundColor: 'transparent',
-            alignItems: 'stretch',
-            boxShadow: '0 0.125em 0.25em rgb(10 10 10 / 10%)',
-            display: 'flex',
-            alignItems: 'center',
-            flexGrow: '1',
-            padding: '0.75rem 1rem',
-            '> *': {
-                color: '#363636',
-                fontWeight: '700'
-            }
-        },
-    
-        '> footer': {
-            backgroundColor: 'transparent',
-            borderTop: '1px solid #ededed',
-            alignItems: 'stretch'
-        }
-    },
-
-    '.container': {
-        maxWidth: '1020px',
-        margin: '0 auto 0 auto'
-    },
+    '&.ps-has-overlay': { overflow: 'hidden !important' },
 
-    '.default-block': {
-        borderWidth: '1px',
+    '.ps-default-block': {
+        borderWidth: '0.1rem',
         borderStyle: 'dashed',
         padding: '1em',
         '> ul > li': { cursor: 'pointer' }
     },
 
-    '.frame': {
+    '.ps-frame': {
         '&:not(:last-child)': { marginBottom: '1em' }
     },
 
-    '.markdown-editor': {
+    '.ps-markdown-editor': {
         display: 'flex',
         flexDirection: 'row',
         width: '100%',
         height: '100%',
-        maxWidth: '1200px',
+        maxWidth: '120.0rem',
         background: '#fff',
         zIndex: '1',
     
@@ -412,7 +161,7 @@ export default async ({ renderCss, themeConfig }) => renderCss({
         '&-text-pane': {
             position: 'relative',
             borderStyle: 'solid',
-            borderWidth: '0 1px 0 0',
+            borderWidth: '0 0.1rem 0 0',
             borderColor: 'rgb(99, 99, 99)',
             padding: 0,
     
@@ -422,7 +171,7 @@ export default async ({ renderCss, themeConfig }) => renderCss({
                 width: '100%',
                 resize: 'none',
                 outline: 'none',
-                fontSize: '16px',
+                fontSize: '1.6rem',
                 fontFamily: 'monospace',
                 padding: '1em'
             }
@@ -434,7 +183,7 @@ export default async ({ renderCss, themeConfig }) => renderCss({
         }
     },
 
-    '.modal': {
+    '.ps-modal': {
         display: 'flex',
         alignItems: 'center',
         flexDirection: 'column',
@@ -451,16 +200,16 @@ export default async ({ renderCss, themeConfig }) => renderCss({
         '> button': {
             background: 'none',
             position: 'fixed',
-            right: '20px',
-            top: '20px',
+            right: '2.0rem',
+            top: '2.0rem',
         
-            height: '32px',
-            width: '32px',
+            height: '3.2rem',
+            width: '3.2rem',
         
             userSelect: 'none',
             '-webkit-appearance': 'none',
             border: 'none',
-            borderRadius: '9999px',
+            borderRadius: '999.9rem',
             cursor: 'pointer',
             pointerEvents: 'auto',
             display: 'inline-block',
@@ -483,24 +232,24 @@ export default async ({ renderCss, themeConfig }) => renderCss({
             },
         
             '&:before': {
-                height: '2px',
+                height: '0.2rem',
                 width: '50%',   
             },
         
             '&:after': {
                 height: '50%',
-                width: '2px',
+                width: '0.2rem',
             }
         },
     
         '> *:not(button)': {
-            maxHeight: 'calc(100vh - 40px)',
-            maxWidth: 'calc(100vw - 160px)',
+            maxHeight: 'calc(100vh - 4.0rem)',
+            maxWidth: 'calc(100vw - 16.0rem)',
             margin: '0 auto'
         },
     
         '> form': {
-            minWidth: '640px',
+            minWidth: '64.0rem',
         
             '> *': {
                 display: 'block',
@@ -508,7 +257,7 @@ export default async ({ renderCss, themeConfig }) => renderCss({
                 flexGrow: '1',
                 flexShrink: '1',
                 overflow: 'auto',
-                padding: '20px',
+                padding: '2.0rem',
             },
         
             '> header, > footer': {
@@ -517,37 +266,37 @@ export default async ({ renderCss, themeConfig }) => renderCss({
                 display: 'flex',
                 flexShrink: '0',
                 justifyContent: 'flex-start',
-                padding: '20px',
+                padding: '2.0rem',
                 position: 'relative'
             },
         
             '> header': {
-                borderBottom: '1px solid #dbdbdb',
-                borderTopLeftRadius: '6px',
-                borderTopRightRadius: '6px',
+                borderBottom: '0.1rem solid #dbdbdb',
+                borderTopLeftRadius: '0.6rem',
+                borderTopRightRadius: '0.6rem',
         
                 '> *': {
                     color: '#363636',
                     flexGrow: '1',
                     flexShrink: '0',
-                    fontSize: '1.5rem',
+                    fontSize: '2.4rem',
                     lineHeight: '1'
                 }
             },
         
             '> footer': {
-                borderBottomLeftRadius: '6px',
-                borderBottomRightRadius: '6px',
-                borderTop: '1px solid #dbdbdb'
+                borderBottomLeftRadius: '0.6rem',
+                borderBottomRightRadius: '0.6rem',
+                borderTop: '0.1rem solid #dbdbdb'
             }
         }
     },
 
-    '.navbar': {
+    '.ps-navbar': {
         textAlign: 'right'
     },
 
-    '.overlay': {
+    '.ps-overlay': {
         position: 'absolute',
         top: '0',
         left: '0',
@@ -556,7 +305,7 @@ export default async ({ renderCss, themeConfig }) => renderCss({
         zIndex: '1000000'
     },
 
-    '.pagination': {
+    '.ps-pagination': {
         get '> ul'() {
             return {
                 listStyle: 'none',
@@ -582,24 +331,24 @@ export default async ({ renderCss, themeConfig }) => renderCss({
                         verticalAlign: 'top',
                         justifyContent: 'center',
                     
-                        border: '1px solid transparent',
-                        borderRadius: '4px',
+                        border: '0.1rem solid transparent',
+                        borderRadius: '0.4rem',
                         boxShadow: 'none',
-                        fontSize: '1rem',
+                        fontSize: '1.6rem',
                         height: '2.5em',
                         lineHeight: '1.5',
                         position: 'relative',
                         
                         backgroundColor: 'white',
                         borderColor: '#dbdbdb',
-                        borderWidth: '1px',
+                        borderWidth: '0.1rem',
                         color: '#363636',
                         cursor: 'pointer',
                         
-                        paddingBottom: 'calc(0.5em - 1px)',
+                        paddingBottom: 'calc(0.5em - 0.1rem)',
                         paddingLeft: '1em',
                         paddingRight: '1em',
-                        paddingTop: 'calc(0.5em - 1px)',
+                        paddingTop: 'calc(0.5em - 0.1rem)',
                         textAlign: 'center',
                         whiteSpace: 'nowrap',
                         marginBottom: '2em',
@@ -629,12 +378,12 @@ export default async ({ renderCss, themeConfig }) => renderCss({
         }
     },
 
-    '.progress-bar': {
+    '.ps-progress-bar': {
         position: 'fixed',
         display: 'block',
         top: '0',
         left: '0',
-        height: '3px',
+        height: '0.3rem',
         width: '100%',
         zIndex: '100000',
     
@@ -646,7 +395,7 @@ export default async ({ renderCss, themeConfig }) => renderCss({
                 display: 'block',
                 top: '0',
                 left: '0',
-                height: '3px',
+                height: '0.3rem',
                 width: '0',
                 background: '#0076ff',
                 transition: `width ${animationDuration}ms ease-out, opacity ${animationDuration / 2}ms ${animationDuration / 2}ms ease-in`,

package/lib/views/blocks/default.js

@@ -13,7 +13,7 @@ export default ({ renderHtml, params: { _path } }) => {
         .sort()
 
     return renderHtml`
-        <div class="default-block">
+        <div class="ps-default-block">
             <p>Insert block:</p>
             <ul>
                 ${names.map(name => renderHtml`

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "pinstripe",
   "description": "Pinstripe is a fullstack JavaScript web framework for Node.js.",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "author": "Jody Salt",
   "license": "MIT",
   "exports": {
@@ -27,6 +27,7 @@
     "chalk": "^4.1.0",
     "html-entities": "^2.3.2",
     "js-yaml": "^4.1.0",
+    "luxon": "^2.3.1",
     "markdown-it": "^12.2.0",
     "memfs": "^3.2.2",
     "mime-types": "^2.1.28",
@@ -36,5 +37,5 @@
     "unionfs": "^4.4.0",
     "webpack": "^5.39.1"
   },
-  "gitHead": "855766e9b5516a28d493c2c45e9684f0f7f59330"
+  "gitHead": "47c4af70d05a70d86502cfa877c85f6337560b5a"
 }