add some

frame.js

@@ -554,7 +554,9 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 			if (key == mdb.STATUS && can.base.isIn(value, mdb.ENABLE, ice.TRUE)) { _value = `<i class="${icon.disable}">`
 				function onclick() { run(event, mdb.MODIFY, [mdb.STATUS, mdb.DISABLE]); return true }
 			}
-			return {className: option.indexOf(key) > -1? ice.MSG_OPTION: key == ctx.ACTION? ctx.ACTION: "", text: [msg.IsDetail() && key == mdb.KEY? can.user.trans(can, _value, null, html.INPUT): value, html.TD], onclick: function(event) { var target = event.target
+			return {className: option.indexOf(key) > -1? ice.MSG_OPTION: key == ctx.ACTION? ctx.ACTION: "", text: [
+				msg.IsDetail() && key == mdb.KEY? can.user.trans(can, _value, null, html.INPUT): _value, html.TD,
+			], onclick: function(event) { var target = event.target
 				if (onclick()) { return }
 				if (key == cli.QRCODE && can.page.tagis(event.target, html.IMG)) { can.user.opens(event.target.title) }
 				if (can.page.tagis(target, html.INPUT) && target.type == html.BUTTON) { can.requestAction(request(event), target.name)

index.css

@@ -449,6 +449,8 @@ div.item.button.danger input { border:var(--box-danger); }
 div.item.button.notice input { border:var(--box-notice); }
 div.action div.tabs:hover { background-color:var(--hover-bg-color); }
 div.action div.tabs.select { background-color:var(--output-bg-color); border-top:var(--box-notice3); }
+/* div.action div.tabs.select { background-color:var(--output-bg-color); border-bottom:var(--box-notice3); } */
+/* div.action div.tabs.select { background-color:var(--output-bg-color); border-left:var(--box-notice3); } */
 div.zone>div.item { background-color:var(--th-bg-color); }
 div.zone>div.list>div.zone>div.item { background-color:var(--th-bg-color); }
 div.tabs div { background-color:var(--plugin-bg-color); }
@@ -868,11 +870,11 @@ fieldset>div.output.form>div.item>span.need { color:red; }
 fieldset>div.output.form>div.item>div.item>input { font-size:20px; height:38px; width:var(--form-width); }
 fieldset>div.output.form>div.item>div.item>input[type=button] { font-size:20px; height:48px; border:var(--box-notice); }
 fieldset.studio>div.action>div.item:not(.icons) { font-style:italic; }
-fieldset.studio>div.output>fieldset>form.option div.icon.delete { display:none; }
+fieldset.studio>div.output>fieldset.story { margin:var(--plugin-margin); }
-fieldset.studio>div.output>fieldset>form.option div.icon:nth-child(2) { margin-left:var(--plugin-margin); }
+fieldset.studio>div.output>fieldset.story:not(.select) { display:none; }
-fieldset.studio>div.output>fieldset>div.output>table.content { width:100%; }
+fieldset.studio>div.output>fieldset.story>form.option div.icon.delete { display:none; }
-fieldset.studio>div.output>fieldset:not(.select) { display:none; }
+/* fieldset.studio>div.output>fieldset>form.option div.icon:nth-child(2) { margin-left:var(--plugin-margin); } */
-fieldset.studio>div.output>fieldset { margin:var(--plugin-margin); }
+/* fieldset.studio>div.output>fieldset>div.output>table.content { width:100%; } */
 fieldset.plug>div.output table.content { width:100%; }
 fieldset.plug.dream.zone>div.output>div.item { display:flex; padding:var(--input-padding); margin:var(--input-margin); }
 fieldset.plug.dream.zone>div.output>div.item>img { margin-right:var(--input-margin); }

plugin/state.js

@@ -15,14 +15,15 @@ Volcanos(chat.ONIMPORT, {
 	_session: function(can, msg) { can.misc.sessionStorage(can, msg._arg[0], msg._arg[1]), can.Update() },
 	_field: function(can, msg, cb) {
 		var height = can.base.Max(html.STORY_HEIGHT, can.ConfHeight()-can.onexport.actionHeight(can)-can.onexport.statusHeight(can)), width = can.ConfWidth()
-		var tabs = false
+		var tabs = false, tabHash = msg.Option("field.tabs")
-		if (msg.Option("field.tabs")) { height = can.ConfHeight()-can.onexport.actionHeight(can)-can.onexport.statusHeight(can)
+		if (tabHash) { height = can.ConfHeight()-can.onexport.actionHeight(can)-can.onexport.statusHeight(can)
-			can.sub && can.sub.onimport.tabs(can, [{name: msg.Option("field.tabs")}], function() {
+			can.sub && can.sub.onimport.tabs(can, [{name: tabHash.slice(0, 6)}], function() {
-				can.onmotion.cache(can, function() { return msg.Option("field.tabs") })
+				can.onmotion.cache(can, function() { return tabHash })
 			}), tabs = true
 		}
 		msg.Table(function(item) {
 			// if (can.page.tagis(can._target, html.FIELDSET_STORY) || can._msg && can._msg.IsDetail()) { item.style = item.style||html.FLOAT }
+			tabs && can.onmotion.cache(can, function() { return tabHash })
 			can.onappend._plugin(can, item, {index: item.index, args: can.base.Obj(item.args||item.arg, []), height: height, width: width}, function(sub) {
 				can._plugins = (can._plugins||[]).concat([sub])
 				sub.run = function(event, cmds, cb) { var index = msg.Option(ice.MSG_INDEX); can.run(can.request(event, {pod: item.space}), (msg[ice.MSG_PREFIX]? msg[ice.MSG_PREFIX]: index? [ctx.RUN, index]: []).concat(cmds), cb, true) }
@@ -30,9 +31,11 @@ Volcanos(chat.ONIMPORT, {
 				can.page.ClassList.has(can, sub._target, html.FLOAT)? can.onmotion.float(sub): sub.onimport.size(sub, height, width, true), cb && cb(sub)
 				if (item.style == html.FLOAT) { return } can.onmotion.delay(can, function() { can.onmotion.scrollIntoView(can, sub._target) }, 300)
 				sub.onexport.output = function() {
-					tabs && sub.sub.onimport.tabs(can, [{name: msg.Option("field.tabs")}], function() {
+					if (tabs) { msg.Option(ice.MSG_ACTION) && can.onappend._action(can, msg.Option(ice.MSG_ACTION))
-						tabs || can.onmotion.cache(can, function() { return msg.Option("field.tabs") })
+						sub.sub.onimport.tabs(can, [{name: tabHash.slice(0, 6)}], function() {
-					}), tabs = false
+							tabs || can.onmotion.cache(can, function() { return tabHash })
+						}), tabs = false
+					}
 				}
 				if (can.base.isIn(sub.ConfIndex(), wiki.WORD)) { sub.onexport.output = function() { can.page.style(can, sub._output, html.HEIGHT, "", html.MAX_HEIGHT, "") } }
 			})

plugin/story/studiolayout.js

@@ -8,23 +8,29 @@ Volcanos(chat.ONIMPORT, {
 	},
 	_nick: function(can, value) { return value.name },
 	project: function(can, msg, key, cb) { can.ui = can.onappend.layout(can), can.onappend.style(can, "studiolayout", can._fields)
-		var _select; msg.Table(function(value) { value.nick = can.onimport._nick(can, value)
+		var _select; msg.Table(function(value) { var hash = value[key]; value.nick = can.onimport._nick(can, value)
-			var target = can.onimport.item(can, value, function(event, value) { can.misc.SearchHash(can, value[key])
+			var target = can.onimport.item(can, value, function(event, value) { can.misc.SearchHash(can, hash)
 				if (can.onmotion.cache(can, function(save, load) {
 					save({
 						_content: can.ui._content_plugin,
 						_profile: can.ui._profile_plugin,
 						_display: can.ui._display_plugin,
-					}), load(value[key], function(bak) {
+					}), load(hash, function(bak) {
 						can.ui._content_plugin = bak._content
 						can.ui._profile_plugin = bak._profile
 						can.ui._display_plugin = bak._display
 					})
-					return value[key]
+					return hash
 				}, can.ui.content, can.ui.profile, can.ui.display)) {
 					can.onmotion.select(can, can._action, html.DIV_TABS, value._tabs); return
-				} value._tabs = can.onimport.tabs(can, [value], function() { target.click() })
+				}
-				can.core.Item(cb(event, value[key], value), function(key, item) { can.onmotion.toggle(can, can.ui[key], true)
+				value._tabs = can.onimport.tabs(can, [value], function() { target.click() }, function() {
+					delete(value._tabs), delete(can._cache_data[hash])
+					delete(can.ui.content._cache[hash])
+					delete(can.ui.profile._cache[hash])
+					delete(can.ui.display._cache[hash])
+				})
+				can.core.Item(cb(event, hash, value), function(key, item) { can.onmotion.toggle(can, can.ui[key], true)
 					can.onappend.plugin(can, item, function(sub) { can.ui["_"+key+"_plugin"] = sub
 						can.onimport.layout(can), sub.onexport.output = function() { can.onimport.layout(can) }
 					}, can.ui[key])

plugin/table.js

@@ -185,29 +185,29 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) {
 		if (typeof tabs == code.STRING) { tabs = {name: tabs} }
 		function close(target) {
 			if (can.page.ClassList.has(can, target, html.SELECT)) {
-				var next = target.nextSibling||target.previousSibling; if (!next) { return } next.click()
+				var next = can.page.tagis(target.nextSibling, html.DIV_TABS)? target.nextSibling: can.page.tagis(target.previousSibling, html.DIV_TABS)? target.previousSibling: null
-			} cbs && cbs(tabs), can.page.Remove(can, target)
+				if (!next) { return true } next && next.click()
-			can.onexport.tabs(can)
+			} can.page.Remove(can, target), can.onexport.tabs && can.onexport.tabs(can)
 		}
 		return {view: [[html.TABS, tabs.type, tabs.role, tabs.status]], title: tabs.title||tabs.text, list: [{text: [tabs.nick||tabs.name, html.SPAN, mdb.NAME]}, {icon: mdb.DELETE, onclick: function(event) {
-			close(tabs._target), can.onkeymap.prevent(event)
+			tabs._target._close(), can.onkeymap.prevent(event)
 		}}], onclick: function(event) {
 			can.onmotion.select(can, action, html.DIV_TABS, tabs._target), can.base.isFunc(cb) && cb(event, tabs)
 		}, _init: function(target) { var menu = tabs._menu||shy(function(event, button) { can.Update(event, [ctx.ACTION, button]) })
-			target._item = tabs, tabs._target = target, target._close = function() { close(target) }
+			target._item = tabs, tabs._target = target, target._close = function() { close(target) || cbs && cbs(tabs) }
 			var _action = can.page.parseAction(can, tabs)
-			can.page.Modify(can, target, {draggable: true, _close: function() { close(target) },
+			can.page.Modify(can, target, {draggable: true,
 				ondragstart: function(event) { action._drop = function(before) {
-					before.parentNode == action && action.insertBefore(target, before)
+					before.parentNode == action && action.insertBefore(target, before), can.onexport.tabs(can)
-					can.onexport.tabs(can)
 				} },
 				ondragover: function(event) { event.preventDefault(), action._drop(event.target) },
 				oncontextmenu: function(event) { can.user.carte(event, can, kit.Dict(
-					"Close", function(event) { close(target) },
+					"Close", function(event) { target._close() },
-					"Close Other", function(event) { can.page.SelectChild(can, action, html.DIV_TABS, function(target) { target == tabs._target || close(target) }) },
+					"Close Other", function(event) { target.click()
+						can.page.SelectChild(can, action, html.DIV_TABS, function(target) { target == tabs._target || target._close() }) },
 					"Rename Tabs", function(event) { can.user.input(event, can, [mdb.NAME], function(list) {
 						can.page.Select(can, target, html.SPAN_NAME, function(target) { can.page.Modify(can, target, list[0]||tabs.name) })
-						can.onexport.tabs(can)
+						can.onexport.tabs && can.onexport.tabs(can)
 					}) }, menu.meta,
 				), ["Close", "Close Other", "Rename Tabs", ""].concat(can.base.getValid(menu.list, can.core.Item(menu.meta)), _action), function(event, button, meta) {
 					(meta[button]||menu)(can.request(event, tabs), button, meta)